/* ============================================================ MetroTrak — LIGHT THEME OVERRIDES (W1-A, 2026-07-14) Applies only when has class "light" (toggled by the floating 🌙/☀️ button + localStorage 'mt_theme'). Dark remains the default look; this file re-skins the main surfaces to a readable light palette while keeping brand accents. ============================================================ */ /* Re-map the design tokens — instantly re-themes every var-based surface (sidebar, nav, cards, borders, inputs). */ html.light { --sidebar-bg-start: #e2e8f0; --sidebar-bg-end: #cbd5e1; --sidebar-text: #1e293b; --sidebar-border: #94a3b8; --content-bg: #f1f5f9; --card-bg: #ffffff; --border: #cbd5e1; --text-dark: #0f172a; --text-muted: #475569; --bg-light: #eef2f7; } html.light body { background: var(--content-bg); color: var(--text-dark); } /* ── Sidebar / nav ─────────────────────────────────────────── */ html.light .sidebar { background: linear-gradient(180deg, #e2e8f0, #cbd5e1); border-right: 1px solid #94a3b8; } html.light .sidebar-brand { border-bottom-color: rgba(15,23,42,0.10); } /* The "MetroTrak" wordmark is hard-coded white in markup — force dark. */ html.light .sidebar-brand div { color: #0f172a !important; } html.light .nav-item { color: #1e293b; } html.light .nav-item:hover { background: rgba(15,23,42,0.06); } html.light .nav-item.active { background: rgba(37,99,235,0.16); color: #1d4ed8; } html.light .sidebar-footer { border-top-color: rgba(15,23,42,0.10); } html.light .sidebar-footer > div { color: #1e293b !important; } /* ── Content shell ─────────────────────────────────────────── */ html.light .content { background: var(--content-bg); } html.light .content-header { background: #ffffff; border-bottom-color: var(--border); } html.light .content-header h2 { color: var(--text-dark); } /* Generic cards / tables that lean on the tokens already read well. The blocks below fix surfaces that hard-code dark hex values. */ /* ── Repo Log (hard-coded dark) ────────────────────────────── */ html.light .rl-wrap { background: #ffffff; border-color: rgba(148,163,184,0.55); } html.light .rl-table { background: #ffffff; color: #0f172a; } html.light .rl-table th, html.light .rl-table td { border-color: rgba(15,23,42,0.08); } html.light .rl-table tbody tr:nth-child(odd) td { background: #ffffff; } html.light .rl-table tbody tr:nth-child(even) td { background: #f1f5f9; } html.light .rl-table tbody tr:hover td { background: #e0e7ff; } html.light .rl-cols th { background: #e2e8f0; color: #334155; border-bottom-color: rgba(148,163,184,0.6); } html.light .rl-table td.c { color: #64748b; } html.light .rl-vin { color: #1d4ed8; } html.light #rl-search { background: #ffffff; color: #0f172a; border-color: #cbd5e1; } html.light .rl-jumps button { background: #ffffff; color: #475569; } /* Band header cells keep their per-section colors (defined in style.css) with light text — those read fine on the light background too. */ /* ── Popups / textareas that hard-code dark ────────────────── */ html.light .pm-pop-msg { color: #1e293b; } html.light .pm-pop textarea { background: #ffffff; color: #0f172a; border-color: #cbd5e1; } /* ── My Notes ──────────────────────────────────────────────── */ html.light .mn-wrap { color: #0f172a; } html.light .mn-area { background: #ffffff; color: #0f172a; border-color: #cbd5e1; } html.light .mn-status { color: #475569; } /* ── Floating theme toggle button ──────────────────────────── */ html.light #mt-theme-toggle { background: #ffffff; color: #7c3aed; border-color: #cbd5e1; } /* ── M2 (2026-07-14) Orders/Fees sheet + chips, light theme ── */ html.light .ot-toolbar #ot-search, html.light .ot-toolbar #fee-search { background:#fff; color:#0f172a; border-color:#cbd5e1; } html.light .ot-deep-pill { background:#fff; color:#1d4ed8; border-color:#cbd5e1; } html.light .ot-deep-pill.on { background:#1d4ed8; color:#fff; } html.light .ot-deeppanel { background:#fff; border-color:#cbd5e1; } html.light .ot-flabel { color:#475569; } html.light .ot-lsearch { background:#fff; color:#0f172a; border-color:#cbd5e1; } html.light .ot-fpill { background:#f1f5f9; color:#334155; border-color:#cbd5e1; } html.light .ot-fpill b { color:#94a3b8; } html.light .ot-timing, html.light .ot-sub { color:#64748b; } html.light .ot-off { color:#475569; } html.light .ot-notes { color:#334155; } html.light .ot-notes-add { color:#94a3b8; } html.light .ot-casehash, html.light .ot-sheet .rl-vin { color:#1d4ed8; } html.light .fee-appr { background:rgba(16,185,129,.14); color:#047857; border-color:rgba(4,120,87,.4); } html.light .fee-decl { background:rgba(239,68,68,.12); color:#b91c1c; border-color:rgba(185,28,28,.4); } html.light .fee-pend { background:rgba(245,158,11,.16); color:#b45309; border-color:rgba(180,83,9,.4); } html.light .fee-unk { background:#e2e8f0; color:#475569; border-color:#cbd5e1; } html.light .rl-kwait { color:#b45309; } html.light .rl-kdue { color:#b91c1c; } html.light .rl-table td.good { color:#047857; } html.light .rl-table td.bad { color:#b91c1c; } /* ── M2 (2026-07-14) T3 — Fees view (w2d) light theme ── */ html.light .w2d-tabs .w2d-tab { background:#eef2f7 !important; color:#334155 !important; border-color:#cbd5e1 !important; } html.light .w2d-tabs .w2d-tab.active { background:#2563eb !important; color:#fff !important; border-color:#2563eb !important; } html.light #fees-body .w2d-sel { background:#ffffff !important; color:#0f172a !important; border-color:#cbd5e1 !important; } html.light #fees-body #fees-count { color:#475569 !important; } html.light #fees-ledger { color:#0f172a; } html.light #fees-ledger thead tr { background:#e2e8f0 !important; } html.light #fees-ledger thead th { color:#334155 !important; border-bottom-color:#94a3b8 !important; } html.light #fees-ledger td, html.light #fees-ledger th { border-bottom-color:rgba(15,23,42,.1) !important; } html.light #fees-ledger tbody tr:nth-child(even) td { background:#f1f5f9; } html.light #fees-ledger tbody tr:hover td { background:#e0e7ff; } html.light #fees-pane-preapprovals table thead tr, html.light #fees-pane-preapprovals table thead th { background:#e2e8f0 !important; color:#334155 !important; } html.light #fees-pane-preapprovals h3 { color:#0f172a; } html.light #fees-body .w2d-status, html.light #fees-body .w2d-chip { filter:brightness(.82); } /* ── M2 (2026-07-14) T3b — light theme was missing the --card var that several hard-coded views (Fees ledger container/rows) read via var(--card,#1a1a2e); undefined -> dark fallback made panels black. Define it (+ odd-row fill) so those surfaces read light. ── */ html.light { --card: #ffffff; --card-2: #f8fafc; } html.light #fees-ledger tbody tr:nth-child(odd) td { background:#ffffff; } html.light #fees-body div[style*="--card"] { background:#ffffff !important; }