/* ============================================================ Sunrise / Jeeves Dashboard — Unified Theme System ------------------------------------------------------------ Single source of truth for every color used in the dashboard. Loaded BEFORE dashboard.css so the variables here win and any later `:root` redeclarations stay backwards compatible. Usage: → forces light mode → forces dark mode → legacy alias, still supported → follows prefers-color-scheme Tokens are namespaced into 8 groups: bg, text, border, accent, semantic (success/warning/danger/info), table, input, shadow. Every consumer should reach for these — never hardcode a hex. ------------------------------------------------------------ Brand palette: Sunrise Yellow #F5C518 / #FFC700, dark slate navy #1a1a2e / #16213e family for dark mode. ============================================================ */ /* ---------- DARK THEME (default) ---------- */ :root, :root[data-theme="dark"], body[data-theme="dark"], body.dark-mode { /* Surfaces */ --bg-primary: #0f172a; /* page bg */ --bg-secondary: #16213e; /* alt panel / sub-panel */ --bg-tertiary: #1a1a2e; /* deeper recess */ --bg-card: #1e293b; /* card / panel */ --bg-card-hover: #253349; /* card hover */ --bg-sidebar: #0c1322; /* sidebar */ --bg-sidebar-hover: rgba(255,199,0,0.10); --bg-topbar: rgba(15,23,42,0.92); --bg-modal: #1e293b; --bg-overlay: rgba(0,0,0,0.70); --bg-input: #0f172a; --bg-body: #0f172a; /* alias used by older code */ /* Text */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-dim: #64748b; --text-inverse: #0f172a; /* dark text on light surface */ --text-on-accent: #0f172a; /* dark text on yellow button */ --text: #e2e8f0; /* legacy alias */ /* Borders */ --border-color: #334155; --border-light: #1f2937; --border-strong: #475569; --border: #334155; /* legacy alias */ /* Brand / accent */ --accent-primary: #FFC700; /* Sunrise yellow */ --accent-secondary: #F5C518; --accent-hover: #E6B300; --accent-soft: rgba(255,199,0,0.18); --accent-soft-2: rgba(255,199,0,0.10); --sunrise-yellow: #FFC700; --sunrise-orange: #FFC700; --sunrise-red: #E71615; --sunrise-orange-dark: #E71615; --sunrise-gold: #FFC700; --accent: #FFC700; /* legacy alias */ /* Semantic */ --success: #10b981; --success-bg: rgba(16,185,129,0.15); --success-text: #34d399; --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.15); --warning-text: #fbbf24; --danger: #ef4444; --danger-bg: rgba(239,68,68,0.15); --danger-text: #f87171; --info: #3b82f6; --info-bg: rgba(59,130,246,0.15); --info-text: #93c5fd; --purple: #06b6d4; /* ponytail: teal slot, kept distinct from --info blue */ --purple-text: #67e8f9; /* Tables */ --table-header-bg: #16213e; --table-header-text: #94a3b8; --table-row: transparent; --table-row-hover: rgba(255,199,0,0.06); --table-stripe: rgba(255,255,255,0.02); --table-border: #334155; /* Inputs */ --input-bg: #0f172a; --input-border: #334155; --input-text: #f1f5f9; --input-placeholder: #64748b; --input-focus-ring: rgba(255,199,0,0.25); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); /* Scrollbar */ --scrollbar-track: rgba(255,255,255,0.05); --scrollbar-thumb: rgba(255,255,255,0.20); --scrollbar-thumb-h: rgba(255,255,255,0.35); color-scheme: dark; } /* ---------- LIGHT THEME ---------- */ :root[data-theme="light"], body[data-theme="light"], body.light-mode { /* Surfaces */ --bg-primary: #f1f5f9; --bg-secondary: #e2e8f0; --bg-tertiary: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-sidebar: #ffffff; --bg-sidebar-hover: rgba(217,119,6,0.08); --bg-topbar: #ffffff; --bg-modal: #ffffff; --bg-overlay: rgba(15,23,42,0.55); --bg-input: #ffffff; --bg-body: #f1f5f9; /* Text */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-dim: #94a3b8; --text-inverse: #ffffff; --text-on-accent: #0f172a; --text: #1e293b; /* Borders */ --border-color: #cbd5e1; --border-light: #e2e8f0; --border-strong: #94a3b8; --border: #cbd5e1; /* Brand / accent — darker amber for legibility on white */ --accent-primary: #d97706; --accent-secondary: #b45309; --accent-hover: #b45309; --accent-soft: rgba(217,119,6,0.14); --accent-soft-2: rgba(217,119,6,0.08); --sunrise-yellow: #d97706; --sunrise-orange: #d97706; --sunrise-red: #b91c1c; --sunrise-orange-dark: #b91c1c; --sunrise-gold: #d97706; --accent: #d97706; /* Semantic — darker variants for white background */ --success: #059669; --success-bg: rgba(5,150,105,0.12); --success-text: #065f46; --warning: #d97706; --warning-bg: rgba(217,119,6,0.12); --warning-text: #92400e; --danger: #dc2626; --danger-bg: rgba(220,38,38,0.10); --danger-text: #991b1b; --info: #2563eb; --info-bg: rgba(37,99,235,0.10); --info-text: #1e3a8a; --purple: #0891b2; --purple-text: #155e75; /* Tables */ --table-header-bg: #f8fafc; --table-header-text: #475569; --table-row: #ffffff; --table-row-hover: rgba(217,119,6,0.05); --table-stripe: #f8fafc; --table-border: #e2e8f0; /* Inputs */ --input-bg: #ffffff; --input-border: #cbd5e1; --input-text: #0f172a; --input-placeholder: #94a3b8; --input-focus-ring: rgba(217,119,6,0.20); /* Shadows */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 12px rgba(15,23,42,0.08); --shadow-lg: 0 12px 32px rgba(15,23,42,0.12); /* Scrollbar */ --scrollbar-track: rgba(15,23,42,0.05); --scrollbar-thumb: rgba(15,23,42,0.20); --scrollbar-thumb-h: rgba(15,23,42,0.35); color-scheme: light; } /* ---------- prefers-color-scheme FALLBACK ---------- Only applies when neither data-theme nor a body class has been set. The pre-flight inline script in dashboard.html sets one of these on first paint. ------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme]):not(.light-mode-preload) { --bg-primary: #f1f5f9; --bg-secondary: #e2e8f0; --bg-tertiary: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-sidebar: #ffffff; --bg-sidebar-hover: rgba(217,119,6,0.08); --bg-topbar: #ffffff; --bg-modal: #ffffff; --bg-overlay: rgba(15,23,42,0.55); --bg-input: #ffffff; --bg-body: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-dim: #94a3b8; --text-inverse: #ffffff; --text-on-accent: #0f172a; --text: #1e293b; --border-color: #cbd5e1; --border-light: #e2e8f0; --border-strong: #94a3b8; --border: #cbd5e1; --accent-primary: #d97706; --accent-secondary: #b45309; --accent-hover: #b45309; --accent-soft: rgba(217,119,6,0.14); --accent-soft-2: rgba(217,119,6,0.08); --sunrise-yellow: #d97706; --sunrise-orange: #d97706; --sunrise-gold: #d97706; --accent: #d97706; --success-text: #065f46; --warning-text: #92400e; --danger-text: #991b1b; --info-text: #1e3a8a; --table-header-bg: #f8fafc; --table-header-text: #475569; --table-row: #ffffff; --table-row-hover: rgba(217,119,6,0.05); --table-stripe: #f8fafc; --table-border: #e2e8f0; --input-bg: #ffffff; --input-border: #cbd5e1; --input-text: #0f172a; --input-placeholder: #94a3b8; --input-focus-ring: rgba(217,119,6,0.20); --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 4px 12px rgba(15,23,42,0.08); --scrollbar-track: rgba(15,23,42,0.05); --scrollbar-thumb: rgba(15,23,42,0.20); --scrollbar-thumb-h: rgba(15,23,42,0.35); color-scheme: light; } } /* ============================================================ Universal fallbacks for elements built BEFORE the theme system existed. These rules teach the browser to swap any leftover hardcoded color when the theme changes — used as a safety net while the JS-generated HTML is migrated to variables. They target only the inline-style values we found in the audit (slate-900 / slate-800 family bg, white text, amber accents) and remap them to the active theme tokens. Scope is limited to #contentArea so app shell isn't touched. ============================================================ */ /* Body & page-level baseline */ html, body { background: var(--bg-primary); color: var(--text-primary); min-height: 100%; transition: background-color 0.18s ease, color 0.18s ease; } /* Generic theme-aware utility classes for use in JS-generated markup */ .t-bg-primary { background: var(--bg-primary) !important; } .t-bg-card { background: var(--bg-card) !important; } .t-text { color: var(--text-primary) !important; } .t-text-muted { color: var(--text-muted) !important; } .t-text-secondary { color: var(--text-secondary) !important; } .t-border { border: 1px solid var(--border-color) !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-h); } /* ============================================================ Content-area inline-style remaps — patches up legacy markup without forcing every JS file to be rewritten in one pass. These selectors match the most common hardcoded color values identified in the dashboard audit (May 2026). ============================================================ */ body.light-mode #contentArea [style*="background:#0f172a"], body.light-mode #contentArea [style*="background: #0f172a"], body.light-mode #contentArea [style*="background:#1e293b"], body.light-mode #contentArea [style*="background: #1e293b"], body.light-mode #contentArea [style*="background:#0c1322"], body.light-mode #contentArea [style*="background: #0c1322"], body.light-mode #contentArea [style*="background:#111827"], body.light-mode #contentArea [style*="background: #111827"], body.light-mode #contentArea [style*="background:#1f2937"], body.light-mode #contentArea [style*="background: #1f2937"], body.light-mode #contentArea [style*="background:#16213e"], body.light-mode #contentArea [style*="background: #16213e"], body.light-mode #contentArea [style*="background:#1a1a2e"], body.light-mode #contentArea [style*="background: #1a1a2e"], body.light-mode #contentArea [style*="background:#111"], body.light-mode #contentArea [style*="background: #111"] { background: var(--bg-card) !important; color: var(--text-primary) !important; } body.light-mode #contentArea [style*="color:#fff"], body.light-mode #contentArea [style*="color: #fff"], body.light-mode #contentArea [style*="color:#ffffff"], body.light-mode #contentArea [style*="color: #ffffff"], body.light-mode #contentArea [style*="color:#f1f5f9"], body.light-mode #contentArea [style*="color: #f1f5f9"], body.light-mode #contentArea [style*="color:#e2e8f0"], body.light-mode #contentArea [style*="color: #e2e8f0"], body.light-mode #contentArea [style*="color:#e5e7eb"], body.light-mode #contentArea [style*="color: #e5e7eb"], body.light-mode #contentArea [style*="color:#cbd5e1"], body.light-mode #contentArea [style*="color: #cbd5e1"] { color: var(--text-primary) !important; } body.light-mode #contentArea [style*="color:#94a3b8"], body.light-mode #contentArea [style*="color: #94a3b8"], body.light-mode #contentArea [style*="color:#9ca3af"], body.light-mode #contentArea [style*="color: #9ca3af"], body.light-mode #contentArea [style*="color:#64748b"], body.light-mode #contentArea [style*="color: #64748b"], body.light-mode #contentArea [style*="color:#6b7280"], body.light-mode #contentArea [style*="color: #6b7280"] { color: var(--text-secondary) !important; } body.light-mode #contentArea [style*="border:1px solid #333"], body.light-mode #contentArea [style*="border: 1px solid #333"], body.light-mode #contentArea [style*="border:1px solid #334155"], body.light-mode #contentArea [style*="border: 1px solid #334155"], body.light-mode #contentArea [style*="border:1px solid #1f2937"], body.light-mode #contentArea [style*="border: 1px solid #1f2937"], body.light-mode #contentArea [style*="border-color:#334155"], body.light-mode #contentArea [style*="border-color: #334155"] { border-color: var(--border-color) !important; } /* Accent yellow on white — protect contrast (turn into amber) */ body.light-mode #contentArea [style*="color:#FFC700"], body.light-mode #contentArea [style*="color: #FFC700"], body.light-mode #contentArea [style*="color:#ffc700"], body.light-mode #contentArea [style*="color: #ffc700"] { color: var(--accent-primary) !important; } body.light-mode #contentArea [style*="color:#c9a94a"], body.light-mode #contentArea [style*="color: #c9a94a"] { color: var(--accent-primary) !important; } /* Generic dark-on-dark text fixes for slate / gray families used in DOM-built KPI tiles */ body.light-mode #contentArea [style*="color:#0f172a"], body.light-mode #contentArea [style*="color: #0f172a"], body.light-mode #contentArea [style*="color:#1e293b"], body.light-mode #contentArea [style*="color: #1e293b"] { /* These are already dark — fine on light backgrounds; leave untouched. */ } /* Modal / drawer styling — make sure JS-spawned modals follow theme */ .modal, .drill-modal, .admin-modal, .invoice-modal { background: var(--bg-modal); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); } /* Inputs spawned from JS without the dashboard.css class hooks */ #contentArea input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), #contentArea select, #contentArea textarea { background: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); border-radius: 6px; padding: 6px 10px; font-family: inherit; } #contentArea input:focus, #contentArea select:focus, #contentArea textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--input-focus-ring); } #contentArea input::placeholder, #contentArea textarea::placeholder { color: var(--input-placeholder); } /* Remove the pre-load flash while the inline script sets the theme */ .light-mode-preload { background: #f1f5f9 !important; color-scheme: light; } /* ── Customer Management empty state icon ─────────────────────────────────── */ .j-empty__icon { max-width: 80px; max-height: 80px; width: 80px; height: 80px; opacity: 0.3; margin: 0 auto 0.75rem; display: block; } .j-empty__icon svg { width: 100%; height: 100%; display: block; }