/* Zeon Dashboard — Theme tokens (light + dark). Loaded via _head_theme.html in every template. Each template's in-file :root {} provides light-mode values; this file layers a dark palette on top when [data-theme="dark"] is set on , or when the OS asks for dark AND no explicit override is set. */ /* ============================================================ */ /* LIGHT — base defaults (unset [data-theme] on a light OS) */ /* Also applied by :root[data-theme="light"] below for users */ /* who explicitly overrode a dark OS to light. */ /* ============================================================ */ :root { color-scheme: light; --bg: #f0f2f8; --surface: #ffffff; --surface2: #f8f9fc; --surface3: #eef2f7; --border: #e4e8f0; --border-strong: #cbd5e1; --text: #1a1d2e; --text1: #1a1d2e; --text2: #5a6075; --text3: #8891a8; --dark: #0f1117; --card: #ffffff; --zebra: #fafbfd; --red: #e8192c; --amber: #f59e0b; --green: #22c55e; --teal: #1a4a5c; --indigo: #6366f1; --blue: #3b82f6; --purple: #9333ea; --brand: #e8192c; --chip-success-bg: #dcfce7; --chip-success-fg: #15803d; --chip-fail-bg: #fee2e2; --chip-fail-fg: #b91c1c; --chip-warn-bg: #fef3c7; --chip-warn-fg: #92400e; --chip-neutral-bg: #f1f5f9; --chip-neutral-fg: #475569; --chip-info-bg: #dbeafe; --chip-info-fg: #1e40af; --chip-violet-bg: #ede9fe; --chip-violet-fg: #6d28d9; /* Status text on surfaces (AA in both themes) */ --status-fail: #dc2626; --status-warn: #b45309; --status-mid: #4d7c0f; --status-ok: #15803d; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-lg: 0 6px 24px rgba(0,0,0,0.12); } :root[data-theme="light"] { color-scheme: light; --bg: #f0f2f8; --surface: #ffffff; --surface2: #f8f9fc; --surface3: #eef2f7; --border: #e4e8f0; --border-strong: #cbd5e1; --text: #1a1d2e; --text1: #1a1d2e; --text2: #5a6075; --text3: #8891a8; --dark: #0f1117; --card: #ffffff; --zebra: #fafbfd; --red: #e8192c; --amber: #f59e0b; --green: #22c55e; --teal: #1a4a5c; --indigo: #6366f1; --blue: #3b82f6; --purple: #9333ea; --brand: #e8192c; /* Semantic chip pairs */ --chip-success-bg: #dcfce7; --chip-success-fg: #15803d; --chip-fail-bg: #fee2e2; --chip-fail-fg: #b91c1c; --chip-warn-bg: #fef3c7; --chip-warn-fg: #92400e; --chip-neutral-bg: #f1f5f9; --chip-neutral-fg: #475569; --chip-info-bg: #dbeafe; --chip-info-fg: #1e40af; --chip-violet-bg: #ede9fe; --chip-violet-fg: #6d28d9; /* Status text on surfaces (AA in both themes) */ --status-fail: #dc2626; --status-warn: #b45309; --status-mid: #4d7c0f; --status-ok: #15803d; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-lg: 0 6px 24px rgba(0,0,0,0.12); } /* ============================================================ */ /* DARK — explicit override */ /* ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0b0f; --surface: #141822; --surface2: #1c2030; --surface3: #242a3a; --border: #2b3040; --border-strong: #3d4356; --text: #e6e9ef; --text1: #e6e9ef; --text2: #a3adc2; /* Muted tier must stay ≥4.5:1 on --surface. #6b7488 measured 3.8:1 on dark cards (operator screenshot: labels unreadable); #8891a8 (same value light mode uses) gives 5.3:1 while staying clearly dimmer than --text2. */ --text3: #8891a8; --dark: #0a0b0f; --card: #141822; --zebra: #1a1e2b; --red: #f26977; /* softened for dark bg */ --amber: #fbbf24; --green: #4ade80; --teal: #4ea1b8; --indigo: #818cf8; --blue: #60a5fa; --purple: #c084fc; --brand: #e8192c; /* brand red stays for badges/CTAs */ --chip-success-bg: #0f2b1c; --chip-success-fg: #4ade80; --chip-fail-bg: #2e1013; --chip-fail-fg: #f87171; --chip-warn-bg: #2b1e0a; --chip-warn-fg: #fbbf24; --chip-neutral-bg: #1c2030; --chip-neutral-fg: #a3adc2; --chip-info-bg: #0d2340; --chip-info-fg: #60a5fa; --chip-violet-bg: #2a1a40; --chip-violet-fg: #c084fc; --status-fail: #f26977; --status-warn: #fbbf24; --status-mid: #a3e635; --status-ok: #4ade80; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-card: 0 2px 8px rgba(0,0,0,0.35); --shadow-lg: 0 6px 24px rgba(0,0,0,0.5); } /* ============================================================ */ /* DARK — auto follow OS when no explicit override */ /* ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0a0b0f; --surface: #141822; --surface2: #1c2030; --surface3: #242a3a; --border: #2b3040; --border-strong: #3d4356; --text: #e6e9ef; --text1: #e6e9ef; --text2: #a3adc2; --text3: #8891a8; /* see note in the explicit-dark block */ --dark: #0a0b0f; --card: #141822; --zebra: #1a1e2b; --red: #f26977; --amber: #fbbf24; --green: #4ade80; --teal: #4ea1b8; --indigo: #818cf8; --blue: #60a5fa; --purple: #c084fc; --brand: #e8192c; --chip-success-bg: #0f2b1c; --chip-success-fg: #4ade80; --chip-fail-bg: #2e1013; --chip-fail-fg: #f87171; --chip-warn-bg: #2b1e0a; --chip-warn-fg: #fbbf24; --chip-neutral-bg: #1c2030; --chip-neutral-fg: #a3adc2; --chip-info-bg: #0d2340; --chip-info-fg: #60a5fa; --chip-violet-bg: #2a1a40; --chip-violet-fg: #c084fc; --status-fail: #f26977; --status-warn: #fbbf24; --status-mid: #a3e635; --status-ok: #4ade80; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-card: 0 2px 8px rgba(0,0,0,0.35); --shadow-lg: 0 6px 24px rgba(0,0,0,0.5); } } /* ============================================================ */ /* Global element defaults — pick up tokens automatically */ /* ============================================================ */ html { color-scheme: light dark; } body { background: var(--bg); color: var(--text1); } /* Table headers, cards, modal bodies, form inputs — the pieces templates and dashboard.js style with hardcoded surfaces. Keeping these low-specificity so per-page rules still win when they need to. */ /* Sessions/table thead backgrounds that were hardcoded #f8fafc */ [data-theme="dark"] tbody tr:nth-child(even), [data-theme="dark"] .zebra { background: var(--zebra); } /* Hardcoded #fff form controls */ [data-theme="dark"] input[type="text"]:not([disabled]), [data-theme="dark"] input[type="date"]:not([disabled]), [data-theme="dark"] input[type="email"]:not([disabled]), [data-theme="dark"] input[type="password"]:not([disabled]), [data-theme="dark"] input[type="search"]:not([disabled]), [data-theme="dark"] input[type="number"]:not([disabled]), [data-theme="dark"] textarea:not([disabled]), [data-theme="dark"] select:not([disabled]) { background: var(--surface2); color: var(--text1); border-color: var(--border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text3); } /* Native browser scrollbars in dark */ [data-theme="dark"] { scrollbar-color: var(--border-strong) var(--surface); } /* Any hardcoded modal-overlay black-transparent overlay stays fine. */ /* ============================================================ */ /* Dark-mode overrides for admin-template patterns */ /* ============================================================ */ /* Nearly every admin_* template ships a floating "page-head" banner and a "card-head" panel-title bar using a light gradient. Replacing them via specific rules avoids editing 10 near- identical templates. */ [data-theme="dark"] .page-head, [data-theme="dark"] .card-head { background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%) !important; border-color: var(--border) !important; } [data-theme="dark"] .page-head h1, [data-theme="dark"] .page-head h2, [data-theme="dark"] .page-head .title { color: var(--text1) !important; } /* Admin cards / list rows with hardcoded #fff or #f8fafc slipped through where they were composed dynamically. */ [data-theme="dark"] .card, [data-theme="dark"] .card-body, [data-theme="dark"] .content-card, [data-theme="dark"] .list-card, [data-theme="dark"] .list-row, [data-theme="dark"] .stat-card, [data-theme="dark"] .upload-card, [data-theme="dark"] .sessions-card, [data-theme="dark"] .month-header, [data-theme="dark"] .month-body, [data-theme="dark"] .date-row, [data-theme="dark"] .toolbar { background: var(--surface); color: var(--text1); border-color: var(--border); } /* Buttons: btn-secondary/btn-ghost use hardcoded slate colours; in dark they need theme-aware neutral. */ [data-theme="dark"] .btn-secondary { background: var(--surface3); color: var(--text1); } [data-theme="dark"] .btn-secondary:hover:not(:disabled) { background: var(--surface2); } [data-theme="dark"] .btn-ghost { color: var(--text2); } [data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--surface3); } /* Filter pill row + search inputs — hardcoded pill backgrounds */ [data-theme="dark"] .filter-pill, [data-theme="dark"] .pill, [data-theme="dark"] .pg-btn { background: var(--surface2); color: var(--text2); border-color: var(--border); } [data-theme="dark"] .filter-pill.active, [data-theme="dark"] .pill.active, [data-theme="dark"] .pg-btn.active { background: var(--surface3); color: var(--text1); border-color: var(--border-strong); } /* Table row hover — some pages hardcode a light-gray hover */ [data-theme="dark"] tbody tr:hover { background: var(--surface2); } /* Role chip backgrounds — dashboard admin has hardcoded semantic pill colours (#fee2e2 for admin, #dbeafe for overwatch, etc.). These already work reasonably on dark because they're low-opacity tints; boost the contrast by dropping opacity slightly. */ [data-theme="dark"] .role-admin, [data-theme="dark"] .role-overwatch, [data-theme="dark"] .role-om, [data-theme="dark"] .role-manager, [data-theme="dark"] .role-mailer, [data-theme="dark"] .role-viewer, [data-theme="dark"] .role-hr { filter: brightness(0.5) saturate(1.4); } [data-theme="dark"] .role-admin { background: var(--chip-fail-bg); color: var(--chip-fail-fg); } [data-theme="dark"] .role-overwatch { background: var(--chip-info-bg); color: var(--chip-info-fg); } [data-theme="dark"] .role-om { background: var(--chip-success-bg); color: var(--chip-success-fg); } [data-theme="dark"] .role-manager { background: var(--chip-warn-bg); color: var(--chip-warn-fg); } [data-theme="dark"] .role-viewer { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); } [data-theme="dark"] .role-mailer { background: #2a1a3f; color: #c4b5fd; } [data-theme="dark"] .role-hr { background: var(--chip-info-bg); color: var(--chip-info-fg); } [data-theme="dark"] .me-tag { background: var(--chip-fail-bg); color: var(--chip-fail-fg); } /* Icon-button actions (edit/delete/etc.) — light gray glass on dark */ [data-theme="dark"] .icon-btn, [data-theme="dark"] .row-action { background: var(--surface2); color: var(--text2); border-color: var(--border); } [data-theme="dark"] .icon-btn:hover, [data-theme="dark"] .row-action:hover { background: var(--surface3); color: var(--text1); } /* Search bars — hardcoded #f8fafc bg */ [data-theme="dark"] .search-box, [data-theme="dark"] .search-input { background: var(--surface2); color: var(--text1); border-color: var(--border); } /* Table row striping and hover — many templates hardcode #fafbff / #f0f4ff on tbody tr:nth-child(even) or tr:hover which in dark mode reads as almost-white on almost-black. Force dark equivalents so text stays legible. */ [data-theme="dark"] tbody tr:nth-child(even) td, [data-theme="dark"] tbody tr.zebra td { background: var(--zebra) !important; } [data-theme="dark"] tbody tr:hover td, [data-theme="dark"] tbody tr:nth-child(even):hover td { background: var(--surface3) !important; } /* Semantic row tints (leave, absent, no-checkout, late) — use dark chip backgrounds so text (rendered from JS tokenised colours) stays legible. */ [data-theme="dark"] tr.is-leave td, [data-theme="dark"] tr.row-no-checkout td { background: var(--chip-fail-bg) !important; } [data-theme="dark"] tr.is-leave:hover td, [data-theme="dark"] tr.row-no-checkout:hover td { background: var(--chip-fail-bg) !important; filter: brightness(1.2); } [data-theme="dark"] tr.row-is-late td { background: var(--chip-warn-bg) !important; } [data-theme="dark"] tr.row-is-late:hover td { background: var(--chip-warn-bg) !important; filter: brightness(1.2); } [data-theme="dark"] tr.is-absent td { background: var(--chip-fail-bg) !important; } /* Danger/warning/success outline buttons — used in attendance, ticket views. Hardcoded light pastel backgrounds unreadable on dark. */ [data-theme="dark"] .btn-danger, [data-theme="dark"] .del-emp-btn { background: var(--chip-fail-bg); color: var(--chip-fail-fg); border-color: #7a2a2a; } [data-theme="dark"] .btn-danger:hover:not(:disabled), [data-theme="dark"] .del-emp-btn:hover { background: var(--chip-fail-bg); filter: brightness(1.2); } [data-theme="dark"] .btn-warning, [data-theme="dark"] .deact-emp-btn { background: var(--chip-warn-bg); color: var(--chip-warn-fg); border-color: #7a5a1a; } [data-theme="dark"] .btn-warning:hover:not(:disabled), [data-theme="dark"] .deact-emp-btn:hover { background: var(--chip-warn-bg); filter: brightness(1.2); } [data-theme="dark"] .deact-emp-btn.activate { background: var(--chip-success-bg); color: var(--chip-success-fg); border-color: #1a5a3a; } /* Role/status pills that hardcode semantic light bg + coloured fg */ [data-theme="dark"] .pill-out, [data-theme="dark"] .rbadge-general { background: var(--chip-neutral-bg); color: var(--chip-neutral-fg); } [data-theme="dark"] .pill-absent { background: var(--chip-fail-bg); color: var(--chip-fail-fg); } [data-theme="dark"] .leave-type-chip { background: var(--chip-warn-bg); color: var(--chip-warn-fg); } /* Modal overlays — the black rgba(0,0,0,0.5) works fine; modal BODIES need dark backgrounds. Many modals inline background:#fff which the dashboard.js pass below handles. */ /* Chart.js text — read tokens via CSS custom property so our theme-aware chart initializer can pick them up via getComputedStyle(document.documentElement). */