/* Werktyd dark-mode overrides. * * Light theme is the default, defined in dashboard.css. When the user (or * their OS) prefers dark mode, theme.js sets `data-theme="dark"` on * and these overrides apply. Variables only — no element-specific selectors * here, so dashboard.css stays in charge of layout/structure. * * The selectors below are written so the dark vars win against the light * defaults regardless of which CSS loaded first (specificity boosted via * :root + [data-theme=dark]). */ :root[data-theme="dark"] { /* Surface + ink */ --bg: #0f172a; /* slate-900 */ --bg-elev: #1e293b; /* slate-800 — cards */ --bg-elev2: #334155; /* slate-700 — table stripes / hovers */ --ink: #e2e8f0; /* slate-200 */ --ink-muted: #94a3b8; /* slate-400 */ --ink-strong: #f8fafc; /* slate-50 — headings */ --border: #334155; --border-soft: #1e293b; /* Brand + accents — pull saturation down a notch for dark backgrounds */ --brand: #818cf8; /* indigo-400 */ --brand-soft: #4f46e533; --ok: #34d399; /* emerald-400 */ --warn: #fbbf24; /* amber-400 */ --danger: #f87171; /* red-400 */ } :root[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; } /* Cards / forms / containers — bump from white to slate-800 */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .card-form, :root[data-theme="dark"] .verify-card, :root[data-theme="dark"] .kpi-tile, :root[data-theme="dark"] .notice, :root[data-theme="dark"] .callout, :root[data-theme="dark"] details { background: #1e293b; color: #e2e8f0; border-color: #334155; } :root[data-theme="dark"] .notice.ok { background: #064e3b; color: #d1fae5; border-color: #047857; } :root[data-theme="dark"] .notice.err { background: #7f1d1d; color: #fee2e2; border-color: #b91c1c; } /* Tables */ :root[data-theme="dark"] table, :root[data-theme="dark"] table.grid { background: #1e293b; color: #e2e8f0; } :root[data-theme="dark"] table.grid thead th { background: #0f172a; color: #94a3b8; border-bottom-color: #334155; } :root[data-theme="dark"] table.grid tbody tr { border-bottom-color: #334155; } :root[data-theme="dark"] table.grid tbody tr:hover { background: #334155; } :root[data-theme="dark"] table.grid tbody tr.absent, :root[data-theme="dark"] table.grid tbody tr.absent td { background: #1e293b; color: #94a3b8; } /* Open shift (worker forgot to clock out) — amber slate that reads on dark. Both the row AND its cells need overriding because the light-theme rule sets `tr.open td { background: #fff8e6 }` directly on the cells, which would otherwise bleed through as cream-on-light-grey = invisible text. */ :root[data-theme="dark"] table.grid tbody tr.open td { background: #3a2e16; /* deep amber slate */ color: #fde68a; /* warm-yellow text */ border-bottom-color: #4b3a1c; } :root[data-theme="dark"] table.grid tbody tr.open:hover td { background: #4a3a1c; } :root[data-theme="dark"] table.grid tbody tr.open .link { color: #fbbf24; } :root[data-theme="dark"] table.grid tbody tr.open .link:hover { color: #fcd34d; } /* Inputs */ :root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: #0f172a; color: #e2e8f0; border-color: #334155; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { border-color: #818cf8; outline-color: #818cf8; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #64748b; } /* Nav */ :root[data-theme="dark"] .nav { background: #1e293b; border-bottom-color: #334155; color: #e2e8f0; } :root[data-theme="dark"] .nav a { color: #94a3b8; } :root[data-theme="dark"] .nav a.on { color: #f8fafc; border-bottom-color: #818cf8; } :root[data-theme="dark"] .nav .logo, :root[data-theme="dark"] .nav .co { color: #e2e8f0; } /* Buttons */ :root[data-theme="dark"] .btn { background: #4f46e5; color: #f8fafc; border-color: #4338ca; } :root[data-theme="dark"] .btn.alt { background: #334155; color: #e2e8f0; border-color: #475569; } :root[data-theme="dark"] .btn:hover { background: #4338ca; } :root[data-theme="dark"] button.link, :root[data-theme="dark"] .link { color: #818cf8; } :root[data-theme="dark"] .link.danger, :root[data-theme="dark"] button.danger { color: #f87171; } /* Chips */ :root[data-theme="dark"] .chip { background: #334155; color: #e2e8f0; border-color: #475569; } :root[data-theme="dark"] .chip.in { background: #064e3b; color: #6ee7b7; border-color: #047857; } :root[data-theme="dark"] .chip.out { background: #7f1d1d; color: #fecaca; border-color: #b91c1c; } /* Hero card on /dashboard + /patrol */ :root[data-theme="dark"] .hero, :root[data-theme="dark"] .patrol-hero { background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%); color: #f8fafc; } /* KPI tiles */ :root[data-theme="dark"] .kpi-tile .kpi-num { color: #f8fafc; } :root[data-theme="dark"] .kpi-tile .kpi-label { color: #94a3b8; } :root[data-theme="dark"] .kpi-tile.has .kpi-num { color: #fbbf24; } /* Code blocks + pair codes */ :root[data-theme="dark"] code, :root[data-theme="dark"] .pair-code { background: #0f172a; color: #fbbf24; border-color: #334155; } /* Footer */ :root[data-theme="dark"] .foot, :root[data-theme="dark"] .foot a { color: #94a3b8; } /* Muted text */ :root[data-theme="dark"] .muted, :root[data-theme="dark"] .muted-soft { color: #94a3b8; } /* Status dots */ :root[data-theme="dark"] .status-fresh { background: #34d399; } :root[data-theme="dark"] .status-aging { background: #fbbf24; } :root[data-theme="dark"] .status-stale { background: #f87171; } :root[data-theme="dark"] .status-never { background: #64748b; } /* Marker labels stay readable in dark map tiles */ :root[data-theme="dark"] .patrol-marker { color: #f8fafc; text-shadow: 0 0 2px rgba(0,0,0,0.7); } /* Theme toggle button affordance */ #theme-toggle { font-size: 1.1rem; cursor: pointer; padding: 0.25rem 0.5rem; border: none; background: transparent; margin-right: 0.5rem; } #theme-toggle:hover { opacity: 0.75; }