/* ═══ Dark theme overrides — authed pages only ═══ * Loaded by includes/dashboard-head.php, so public pages never see it. * Activated when is present (set by the bootstrap * script also in dashboard-head.php, synchronously reading localStorage * to avoid FOUC). * * Strategy: override the existing CSS custom properties so every * component built on --bg / --ink / --surface / --line / --accent / etc. * flips automatically. Hardcoded hex/rgba in individual module CSS * (brands, cert-inventory, etc.) gets patched via scoped overrides at * the bottom of this file. * ─────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* ── Surfaces (background layers, darkest → lightest) ─────────── */ --bg: #0E1116; --surface: #151A22; --surface-2: #1C222D; --surface-3: #242B38; /* ── Ink (text colours, strongest → weakest) ──────────────────── */ --ink: #E6E9EE; --ink-2: #B5BBC6; --ink-3: #7E8695; --ink-4: #565D6A; /* ── Lines / borders (translucent so they ride the surface tone) ── */ --line: rgba(230, 233, 238, 0.08); --line-2: rgba(230, 233, 238, 0.14); /* ── Accent (brighter blue reads better on dark) ──────────────── */ --accent: #6A95FF; --accent-hover: #8FB1FF; --accent-ink: #8FB1FF; --accent-light: #8FB1FF; --accent-subtle: rgba(106, 149, 255, 0.12); --accent-soft: rgba(106, 149, 255, 0.12); /* ── Status palette (slightly lightened; original values too saturated against a dark surface) ───────────────────────── */ --ok: #22C58D; --warn: #F59E0B; --danger: #F87171; --success: #22C58D; --success-light: #34D399; --error: #F87171; --error-text: #F87171; --purple: #818CF8; --purple-light: #A5B4FC; --status-operational: #22C58D; --status-degraded: #F59E0B; --status-partial: #FB923C; --status-major: #F87171; --status-maintenance: #6A95FF; --status-unknown: #7E8695; /* Legacy token aliases — keep in sync with the dark palette above so per-page stylesheets that still use the old names render correctly. */ --bg-primary: #0E1116; --bg-secondary: #151A22; --bg-tertiary: #1C222D; --bg-elevated: #1C222D; --text-primary: #E6E9EE; --text-secondary: #B5BBC6; --text-tertiary: #7E8695; --border-color: rgba(230, 233, 238, 0.14); --border-subtle: rgba(230, 233, 238, 0.08); --shadow-color: rgba(0, 0, 0, 0.45); /* Glow effects — darker base + slightly stronger so highlights read */ --glow-operational: 0 6px 18px rgba(34, 197, 141, 0.18); --glow-degraded: 0 6px 18px rgba(245, 158, 11, 0.20); --glow-partial: 0 6px 18px rgba(251, 146, 60, 0.22); --glow-major: 0 6px 20px rgba(248, 113, 113, 0.24); --glow-maintenance: 0 6px 18px rgba(106, 149, 255, 0.20); --glow-unknown: 0 3px 10px rgba(126, 134, 149, 0.16); --glow-operational-hover: 0 8px 22px rgba(34, 197, 141, 0.24); --glow-degraded-hover: 0 8px 22px rgba(245, 158, 11, 0.26); --glow-partial-hover: 0 8px 22px rgba(251, 146, 60, 0.28); --glow-major-hover: 0 8px 24px rgba(248, 113, 113, 0.30); --glow-maintenance-hover: 0 8px 22px rgba(106, 149, 255, 0.26); --glow-unknown-hover: 0 6px 16px rgba(126, 134, 149, 0.20); } /* ═══ Global body flip ═══ body color-scheme hint tells the UA to render form controls, scrollbars, and ::selection in dark. */ [data-theme="dark"] body { color-scheme: dark; background: var(--bg); color: var(--ink); } /* Dark-aware focus/selection */ [data-theme="dark"] *::selection { background: rgba(106, 149, 255, 0.30); color: var(--ink); } /* ═══ Module-specific patches for hardcoded colours ═══ Each block below neutralises hex/rgba values that are baked into the original module CSS so they render sensibly on dark surfaces. We don't rewrite the original files — just override at higher specificity. */ /* ── Dashboard first-run welcome panel (dashboard.php inline styles) ── */ [data-theme="dark"] .first-run-welcome { background: linear-gradient(135deg, rgba(106, 149, 255, 0.10), rgba(34, 197, 141, 0.08)); border-color: rgba(106, 149, 255, 0.22); } [data-theme="dark"] .first-run-eyebrow { background: var(--accent); } [data-theme="dark"] .first-run-card { background: var(--surface-2); border-color: var(--line); } [data-theme="dark"] .first-run-card:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(106, 149, 255, 0.20); } /* ── Settings danger zones (settings.php inline #ef4444 rgba) ── The Danger Zone + delete-account UI has 10 inline style="...#ef4444" rules hardcoded. Rather than rewriting them (would risk breaking the light theme), override with a precedent-wins rule scoped to the delete-account modal + btn-danger, plus a catch-all for any text that happens to be inline-coloured #ef4444. */ [data-theme="dark"] h2[style*="#ef4444"], [data-theme="dark"] .settings-card-title[style*="#ef4444"], [data-theme="dark"] [style*="color: #ef4444"], [data-theme="dark"] [style*="color:#ef4444"] { color: var(--danger) !important; } [data-theme="dark"] button[style*="background: #ef4444"], [data-theme="dark"] button[style*="background:#ef4444"] { background: var(--danger) !important; color: #fff !important; } [data-theme="dark"] code[style*="rgba(239,68,68"] { background: rgba(248, 113, 113, 0.14) !important; color: var(--danger) !important; } /* ── Dashboard-modern utility patches (shadows + near-black inks) ── */ [data-theme="dark"] .modern-dashboard .dph-btn.primary { background: var(--ink); color: var(--bg); } [data-theme="dark"] .modern-dashboard .dph-btn.primary:hover { background: #F0F3F8; } [data-theme="dark"] .modern-dashboard .footer-newsletter-form .btn-primary { background: var(--ink); color: var(--bg); } [data-theme="dark"] .modern-dashboard .footer-newsletter-form .btn-primary:hover:not(:disabled) { background: #F0F3F8; } /* ── Segmented tab bars (.tabs) on the Monitors card + Watched SaaS card ── Light-mode design assumes `--surface-2` is RECESSED vs `--surface` (F5F4F0 under FFFFFF) so the active tab reads as elevated. In dark mode our `--surface-2` is LIGHTER than `--surface` (elevation goes the other way), which inverted the relationship. We also explicitly reset the UA button chrome on inactive tabs — without it, Chrome / Safari render