/* ============================================================================ * Koktl Business Suite Corporate Dark Theme * * Loaded on every page. Every selector is scoped under * `[data-bs-theme="dark"]` (or a child of ``) * so this file is purely additive — toggling back to light reverts * everything by simply removing the attribute. * * Palette is a muted slate-blue, in keeping with the existing brand blue * used by the login page hero. No pure black, no neon. * ============================================================================ */ :root[data-bs-theme="dark"] { /* Koktl Suite-specific tokens (referenced by component overrides below) */ --ks-bg: #0f172a; /* slate-900 — page background */ --ks-surface: #1a2436; /* cards, panels, navbar */ --ks-surface-2: #212d42; /* elevated rows / hover surface */ --ks-surface-3: #283452; /* tertiary surface (table head) */ --ks-border: #2c3a52; /* soft separators */ --ks-border-strong:#3a4a66; /* stronger separators / focus rings */ --ks-text: #e2e8f0; --ks-text-strong: #f1f5f9; --ks-text-muted: #94a3b8; --ks-text-subtle: #64748b; --ks-accent: #3b82f6; --ks-accent-soft: #1e3a8a; --ks-success: #22c55e; --ks-success-soft: #14532d; --ks-danger: #f87171; --ks-danger-soft: #7f1d1d; --ks-warning: #fbbf24; --ks-warning-soft: #78350f; --ks-info: #38bdf8; --ks-info-soft: #075985; /* Bootstrap 5.3 token overrides — these cascade through every BS component */ --bs-body-bg: var(--ks-bg); --bs-body-color: var(--ks-text); --bs-body-color-rgb: 226, 232, 240; --bs-body-bg-rgb: 15, 23, 42; --bs-emphasis-color: var(--ks-text-strong); --bs-secondary-color: var(--ks-text-muted); --bs-tertiary-color: var(--ks-text-subtle); --bs-secondary-bg: var(--ks-surface); --bs-tertiary-bg: var(--ks-surface-2); --bs-border-color: var(--ks-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-link-color: #60a5fa; --bs-link-hover-color: #93c5fd; --bs-link-color-rgb: 96, 165, 250; --bs-heading-color: var(--ks-text-strong); --bs-code-color: #f9a8d4; } /* Page background applies to on every page that includes the header */ html[data-bs-theme="dark"], html[data-bs-theme="dark"] body { background-color: var(--ks-bg); color: var(--ks-text); color-scheme: dark; } /* ============================================================ * 1. Navbar — re-skin the BS5 `.navbar-light .bg-light` from header.php * ============================================================ */ [data-bs-theme="dark"] .navbar.navbar-light.bg-light { background-color: var(--ks-surface) !important; border-bottom-color: var(--ks-border) !important; } [data-bs-theme="dark"] .navbar.navbar-light .navbar-brand, [data-bs-theme="dark"] .navbar.navbar-light .nav-link { color: var(--ks-text); } [data-bs-theme="dark"] .navbar.navbar-light .nav-link:hover, [data-bs-theme="dark"] .navbar.navbar-light .nav-link:focus { color: var(--ks-text-strong); } [data-bs-theme="dark"] .navbar.navbar-light .navbar-nav .nav-link.active, [data-bs-theme="dark"] .navbar.navbar-light .navbar-nav .nav-item.active > .nav-link { color: #fff; } [data-bs-theme="dark"] .navbar.navbar-light .navbar-toggler { color: var(--ks-text); border-color: var(--ks-border-strong); } [data-bs-theme="dark"] .navbar.navbar-light .navbar-toggler-icon { /* recolour the toggler icon to a light glyph */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226, 232, 240, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-bs-theme="dark"] nav.navbar:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.45), 0 6px 20px 0 rgba(0, 0, 0, 0.35); } /* role chip in navbar (header.php inline