/* ================================================================== * GLOBAL LIGHT-MODE OVERRIDES * * Scoped to every `.page-section` (= every main content tab in * templates/index.html — Dashboard, Code, Lovable Convert, Train, * Phone Agent, Podcast, Marketing, etc.) plus the Designer + Admin * containers. * * Why this file exists: most page sections were authored against the * dark theme with hardcoded inline `style="background:#0..; color:#fff"` * and a sprinkling of class-based dark colors. In light mode those * inline + class colors win against ordinary CSS, leaving white text * on white backgrounds. * * Strategy: * 1. Force a readable dark slate text color on ALL descendants. * 2. Force a readable light surface on any element whose inline * `background:` starts with #0/#1/#2 (covers all the dark hex * literals: #0b1220, #111827, #1a1a1f, #1e293b, #1f2937, …). * 3. Bring back semantic accent colors (success/error/etc.) with * *darker* variants that read on white. * * Loaded LAST in so it wins cascade order. * ================================================================== */ /* ------ 1. Force readable text everywhere inside page-sections ------ */ [data-theme="light"] .page-section, [data-theme="light"] .page-section *, [data-theme="light"] #main, [data-theme="light"] .main-content .page-section *, [data-theme="light"] .admin-page, [data-theme="light"] .admin-page * { color: #1e293b !important; } /* ------ 2. Force light surfaces on inline dark backgrounds ------ */ [data-theme="light"] .page-section [style*="background:#0"], [data-theme="light"] .page-section [style*="background:#1"], [data-theme="light"] .page-section [style*="background:#2"], [data-theme="light"] .page-section [style*="background: #0"], [data-theme="light"] .page-section [style*="background: #1"], [data-theme="light"] .page-section [style*="background: #2"], [data-theme="light"] .page-section [style*="background-color:#0"], [data-theme="light"] .page-section [style*="background-color:#1"], [data-theme="light"] .page-section [style*="background-color:#2"], [data-theme="light"] .page-section [style*="background-color: #0"], [data-theme="light"] .page-section [style*="background-color: #1"], [data-theme="light"] .page-section [style*="background-color: #2"], [data-theme="light"] .page-section [style*="background:var(--card-bg"], [data-theme="light"] .page-section [style*="background: var(--card-bg"] { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(100, 116, 139, 0.25) !important; } /* Same blanket for any inline-styled element using a dark var fallback */ [data-theme="light"] .page-section [style*="--card-bg"] { background: rgba(255, 255, 255, 0.95) !important; } /* ------ 3. Inline dark border colors → readable slate border ------ */ [data-theme="light"] .page-section [style*="border:1px solid #"], [data-theme="light"] .page-section [style*="border: 1px solid #"], [data-theme="light"] .page-section [style*="border-color:#0"], [data-theme="light"] .page-section [style*="border-color:#1"], [data-theme="light"] .page-section [style*="border-color:#2"], [data-theme="light"] .page-section [style*="border-color: #0"], [data-theme="light"] .page-section [style*="border-color: #1"], [data-theme="light"] .page-section [style*="border-color: #2"] { border-color: rgba(100, 116, 139, 0.25) !important; } /* ------ 4. Inputs / selects / textareas — bright surface ------ */ [data-theme="light"] .page-section input:not([type="checkbox"]):not([type="radio"]), [data-theme="light"] .page-section select, [data-theme="light"] .page-section textarea { background: rgba(255, 255, 255, 0.95) !important; color: #1e293b !important; border: 1px solid rgba(100, 116, 139, 0.28) !important; } [data-theme="light"] .page-section input::placeholder, [data-theme="light"] .page-section textarea::placeholder { color: #94a3b8 !important; opacity: 1; } /* ------ 5. Restore semantic accent colors (darker shades for white bg) ------ */ [data-theme="light"] .page-section [style*="color:#10b981"], [data-theme="light"] .page-section [style*="color: #10b981"] { color: #047857 !important; /* emerald-700 — readable on white */ } [data-theme="light"] .page-section [style*="color:#22c55e"], [data-theme="light"] .page-section [style*="color: #22c55e"] { color: #15803d !important; /* green-700 */ } [data-theme="light"] .page-section [style*="color:#ef4444"], [data-theme="light"] .page-section [style*="color: #ef4444"] { color: #b91c1c !important; /* red-700 */ } [data-theme="light"] .page-section [style*="color:#dc2626"] { color: #991b1b !important; } [data-theme="light"] .page-section [style*="color:#f59e0b"], [data-theme="light"] .page-section [style*="color: #f59e0b"] { color: #b45309 !important; /* amber-700 */ } [data-theme="light"] .page-section [style*="color:#3b82f6"], [data-theme="light"] .page-section [style*="color: #3b82f6"] { color: #1d4ed8 !important; /* blue-700 */ } [data-theme="light"] .page-section [style*="color:#60a5fa"] { color: #1d4ed8 !important; } [data-theme="light"] .page-section [style*="color:#7c3aed"], [data-theme="light"] .page-section [style*="color: #7c3aed"] { color: #5b21b6 !important; /* violet-800 */ } [data-theme="light"] .page-section [style*="color:#ec4899"] { color: #be185d !important; /* pink-700 */ } [data-theme="light"] .page-section [style*="color:#06b6d4"] { color: #0e7490 !important; /* cyan-700 */ } [data-theme="light"] .page-section [style*="color:#facc15"], [data-theme="light"] .page-section [style*="color:#fbbf24"] { color: #a16207 !important; /* yellow-700 */ } /* ------ 6. Status pill / chip backgrounds with semantic colors ------ */ /* Keep their tint visible but dim the surface so dark text reads. */ [data-theme="light"] .page-section [style*="background:#10b981"], [data-theme="light"] .page-section [style*="background: #10b981"] { background: rgba(16, 185, 129, 0.15) !important; color: #047857 !important; } [data-theme="light"] .page-section [style*="background:#ef4444"], [data-theme="light"] .page-section [style*="background: #ef4444"] { background: rgba(239, 68, 68, 0.15) !important; color: #b91c1c !important; } [data-theme="light"] .page-section [style*="background:#3b82f6"], [data-theme="light"] .page-section [style*="background: #3b82f6"] { background: rgba(59, 130, 246, 0.15) !important; color: #1d4ed8 !important; } [data-theme="light"] .page-section [style*="background:#f59e0b"] { background: rgba(245, 158, 11, 0.15) !important; color: #b45309 !important; } [data-theme="light"] .page-section [style*="background:#7c3aed"] { background: rgba(124, 58, 237, 0.15) !important; color: #5b21b6 !important; } /* ------ 7. Per-feature deterministic chips (hsla()) keep their hue but switch to darker text so they read on a light card. ------ */ [data-theme="light"] .page-section [style*="hsla("] { color: #1e293b !important; } /* ------ 8. Tables: header row + cells ------ */ [data-theme="light"] .page-section table, [data-theme="light"] .page-section table th, [data-theme="light"] .page-section table td { color: #1e293b !important; border-color: rgba(100, 116, 139, 0.18) !important; } [data-theme="light"] .page-section table thead tr { background: rgba(241, 245, 249, 0.6) !important; } /* ------ 9. Common class-based dark-mode helpers used throughout ------ */ [data-theme="light"] .page-section .pa-card, [data-theme="light"] .page-section .pa-section, [data-theme="light"] .page-section .pc-card, [data-theme="light"] .page-section .pc-section, [data-theme="light"] .page-section .stat-card, [data-theme="light"] .page-section .train-bar, [data-theme="light"] .page-section .train-cat-body, [data-theme="light"] .page-section .lc-card, [data-theme="light"] .page-section .lc-section, [data-theme="light"] .page-section .lc-panel, [data-theme="light"] .page-section .code-panel, [data-theme="light"] .page-section .dev-panel, [data-theme="light"] .page-section .card, [data-theme="light"] .page-section .creation-card, [data-theme="light"] .page-section .result-card, [data-theme="light"] .page-section .progress-card { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(100, 116, 139, 0.22) !important; color: #1e293b !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } /* ------ 10. Tabs (Phone Agent / Lovable Convert / Train) ------ */ [data-theme="light"] .page-section .pa-tab, [data-theme="light"] .page-section .lc-tab, [data-theme="light"] .page-section .train-tab, [data-theme="light"] .page-section .tab { color: #475569 !important; background: transparent !important; border-color: rgba(100, 116, 139, 0.22) !important; } [data-theme="light"] .page-section .pa-tab.active, [data-theme="light"] .page-section .lc-tab.active, [data-theme="light"] .page-section .train-tab.active, [data-theme="light"] .page-section .tab.active { color: #1e293b !important; background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(59, 130, 246, 0.5) !important; } /* ------ 11. Code editor / pre blocks — light surface, slate text ------ */ [data-theme="light"] .page-section pre, [data-theme="light"] .page-section code, [data-theme="light"] .page-section .CodeMirror, [data-theme="light"] .page-section .cm-editor { background: #f8fafc !important; color: #1e293b !important; border-color: rgba(100, 116, 139, 0.2) !important; } /* ------ 12. Buttons that were dark-themed ------ */ [data-theme="light"] .page-section button:not([style*="background"]):not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-buy"]):not([class*="btn-admin"]):not([class*="btn-logout"]) { color: #1e293b !important; } /* ------ 13. Links + clickable inline accents kept blue ------ */ [data-theme="light"] .page-section a:not([class*="btn"]), [data-theme="light"] .page-section a:not([class*="btn"]) * { color: #1d4ed8 !important; } /* ------ 14. Misc small fixes ------ */ [data-theme="light"] .page-section hr { border-color: rgba(100, 116, 139, 0.2) !important; } [data-theme="light"] .page-section .breadcrumb-page, [data-theme="light"] .page-section .breadcrumb-item, [data-theme="light"] .page-section .breadcrumb-sep, [data-theme="light"] .page-section .page-subtitle, [data-theme="light"] .page-section .hint, [data-theme="light"] .page-section .muted, [data-theme="light"] .page-section .opacity-50, [data-theme="light"] .page-section [style*="opacity:.5"], [data-theme="light"] .page-section [style*="opacity:.6"], [data-theme="light"] .page-section [style*="opacity:.7"], [data-theme="light"] .page-section [style*="opacity:.8"] { color: #475569 !important; } /* ------ 15. Train module (LoRA Training page) ------ train.css was authored dark-only with color: #fff / rgba(255,255,255,.x) on most labels and values. In light mode that vanishes into the white surface. The terminal + live-log panels intentionally stay dark — those surfaces have their own dark background so light text on them is correct. */ [data-theme="light"] #page-train .train-bar, [data-theme="light"] #page-train .train-bar-title, [data-theme="light"] #page-train .train-bar-select, [data-theme="light"] #page-train .train-status-label, [data-theme="light"] #page-train .train-progress-label, [data-theme="light"] #page-train .train-progress-label span, [data-theme="light"] #page-train .train-loss-value, [data-theme="light"] #page-train .train-loss-label, [data-theme="light"] #page-train .train-kpi-card, [data-theme="light"] #page-train .train-kpi-card-value, [data-theme="light"] #page-train .train-kpi-card-label, [data-theme="light"] #page-train .train-cat-body, [data-theme="light"] #page-train .train-cat-toggle, [data-theme="light"] #page-train .train-cat-name, [data-theme="light"] #page-train .train-cat-count, [data-theme="light"] #page-train .train-cat-pct, [data-theme="light"] #page-train .train-load-label, [data-theme="light"] #page-train .train-storage-badge, [data-theme="light"] #page-train .train-time-strip, [data-theme="light"] #page-train .train-time-strip *, [data-theme="light"] #page-train .train-tab, [data-theme="light"] #page-train .train-tab.active, [data-theme="light"] #page-train .train-empty { color: #1e293b !important; } [data-theme="light"] #page-train .train-kpi-card-label, [data-theme="light"] #page-train .train-cat-pct, [data-theme="light"] #page-train .train-cat-count { color: #475569 !important; } /* Terminal + live-log panels: light surface, dark text in light mode. xterm.js inside .train-terminal-container has its own theme that we swap in trainCockpit.js — these CSS overrides cover the wrapper chrome (header bar, log lines outside xterm). */ [data-theme="light"] #page-train .train-terminal, [data-theme="light"] #page-train .train-terminal-header, [data-theme="light"] #page-train .train-terminal-body, [data-theme="light"] #page-train .train-terminal-container, [data-theme="light"] #page-train .train-logs, [data-theme="light"] #page-train .train-logs-header, [data-theme="light"] #page-train .train-logs-body, [data-theme="light"] #page-train .train-log-line, [data-theme="light"] #page-train #train-logs-viewer { background: #f8fafc !important; color: #1e293b !important; border-color: rgba(100, 116, 139, 0.22) !important; } /* ------ 16. Phone Agent module ------ phone-agent.css used rgba(30,41,59,…) on buttons + rgba(15,23,42,…) on pills. On white surfaces those become dark-on-light blobs with poor contrast. Swap to white-ish surface + slate text + slate border in light mode. .pa-btn-primary and .pa-btn-danger keep their bold colors. */ [data-theme="light"] #page-phone-agent .pa-pill { background: #ffffff !important; border-color: rgba(100, 116, 139, 0.35) !important; color: #1e293b !important; } [data-theme="light"] #page-phone-agent .pa-btn:not(.pa-btn-primary):not(.pa-btn-danger), [data-theme="light"] #page-phone-agent .pa-btn-secondary, [data-theme="light"] #page-phone-agent .pa-appt-list button, [data-theme="light"] #page-phone-agent [data-edit-appt], [data-theme="light"] #page-phone-agent [data-delete-appt], [data-theme="light"] #page-phone-agent table button, [data-theme="light"] #page-phone-agent tr button { background: #ffffff !important; border: 1px solid rgba(100, 116, 139, 0.35) !important; color: #1e293b !important; } [data-theme="light"] #page-phone-agent .pa-btn:not(.pa-btn-primary):not(.pa-btn-danger):hover, [data-theme="light"] #page-phone-agent .pa-btn-secondary:hover, [data-theme="light"] #page-phone-agent .pa-appt-list button:hover, [data-theme="light"] #page-phone-agent [data-edit-appt]:hover, [data-theme="light"] #page-phone-agent [data-delete-appt]:hover, [data-theme="light"] #page-phone-agent table button:hover, [data-theme="light"] #page-phone-agent tr button:hover { background: #f1f5f9 !important; border-color: rgba(59, 130, 246, 0.5) !important; } [data-theme="light"] #page-phone-agent [data-delete-appt] { color: #b91c1c !important; border-color: rgba(220, 38, 38, 0.4) !important; } /* ------ 17. Colab / Notebook module ------ notebook.css relies on dark `--tc-glass-bg-*` vars + `--tc-text-secondary` for the toolbar + sidebar. In light mode the buttons stay near-black with near-black icon glyphs → unreadable. Force white-surface + slate text. */ [data-theme="light"] #page-notebook .nb-toolbar, [data-theme="light"] #page-notebook .nb-sidebar, [data-theme="light"] #page-notebook .nb-sidebar-header, [data-theme="light"] #page-notebook .nb-empty-state { background: #ffffff !important; color: #1e293b !important; border-color: rgba(100, 116, 139, 0.22) !important; } [data-theme="light"] #page-notebook .nb-toolbar-btn, [data-theme="light"] #page-notebook .nb-cell-toolbar button, [data-theme="light"] #page-notebook .nb-create-btn, [data-theme="light"] #page-notebook .nb-list-item { background: #ffffff !important; border: 1px solid rgba(100, 116, 139, 0.35) !important; color: #1e293b !important; } [data-theme="light"] #page-notebook .nb-toolbar-btn i, [data-theme="light"] #page-notebook .nb-cell-toolbar button i, [data-theme="light"] #page-notebook .nb-create-btn i { color: inherit !important; } [data-theme="light"] #page-notebook .nb-toolbar-btn:hover, [data-theme="light"] #page-notebook .nb-cell-toolbar button:hover, [data-theme="light"] #page-notebook .nb-create-btn:hover, [data-theme="light"] #page-notebook .nb-list-item:hover { background: #f1f5f9 !important; border-color: rgba(59, 130, 246, 0.5) !important; } [data-theme="light"] #page-notebook .nb-toolbar-btn.nb-run-all { background: var(--tc-primary, #3B82F6) !important; border-color: var(--tc-primary, #3B82F6) !important; color: #ffffff !important; } [data-theme="light"] #page-notebook .nb-list-item.active { background: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.5) !important; color: #1e293b !important; } [data-theme="light"] #page-notebook .nb-search { background: #ffffff !important; color: #1e293b !important; border: 1px solid rgba(100, 116, 139, 0.35) !important; } [data-theme="light"] #page-notebook .nb-kernel-status { color: #475569 !important; }