/* ============================================ BAQALAH MANAGEMENT SYSTEM - THEME OVERRIDES ============================================ Three themes: light (default, defined in style.css :root), dark, and glass. Switching is done by setting data-theme="dark" / data-theme="glass" on (see includes/header.php + includes/save_theme.php). Every component in style.css and the page-specific CSS files reads colors through the tokens defined in style.css :root, so redefining those tokens here re-skins the entire site automatically - no per-page overrides needed. */ /* ============================================ DARK THEME ============================================ */ :root[data-theme="dark"] { --bg-body: #12141c; --bg-surface: #1c1f2b; --bg-surface-alt: #242838; --bg-input: #242838; --text-primary: #F1F2F6; --text-secondary: #A9B0C3; --text-muted: #7C8296; /* --dark / --gray are the original (pre-theme) text-color tokens still referenced directly in a few older rules - kept in sync with --text-primary / --text-secondary so those rules theme too. */ --dark: #F1F2F6; --gray: #A9B0C3; --border-color: rgba(255, 255, 255, 0.08); --overlay-soft-1: rgba(255, 255, 255, 0.06); --overlay-soft-2: rgba(255, 255, 255, 0.08); --overlay-soft-3: rgba(255, 255, 255, 0.10); --header-bg: rgba(28, 31, 43, 0.85); --sidebar-bg-start: #0d0e15; --sidebar-bg-end: #05060a; --sidebar-text: rgba(255, 255, 255, 0.6); --scrollbar-track: #1a1c26; --surface-blur: 0px; --shadow: 0 10px 40px rgba(0, 0, 0, 0.35); --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.45); } /* ============================================ GLASS THEME ============================================ Frosted, translucent panels floating over a soft gradient backdrop. --surface-blur drives backdrop-filter on every card/table/header/modal/sidebar via style.css, so a single token switch turns the whole UI glassy. */ :root[data-theme="glass"] { --bg-body: linear-gradient(135deg, #6C63FF 0%, #764ba2 45%, #4facfe 100%); --bg-surface: rgba(255, 255, 255, 0.55); --bg-surface-alt: rgba(255, 255, 255, 0.35); --bg-input: rgba(255, 255, 255, 0.55); --text-primary: #1c1f2b; --text-secondary: #3a3f52; --text-muted: #5a5f75; --dark: #1c1f2b; --gray: #3a3f52; --border-color: rgba(255, 255, 255, 0.4); --overlay-soft-1: rgba(255, 255, 255, 0.25); --overlay-soft-2: rgba(255, 255, 255, 0.3); --overlay-soft-3: rgba(255, 255, 255, 0.35); --header-bg: rgba(255, 255, 255, 0.35); --sidebar-bg-start: rgba(20, 20, 35, 0.45); --sidebar-bg-end: rgba(10, 10, 20, 0.45); --sidebar-text: rgba(255, 255, 255, 0.85); --scrollbar-track: rgba(255, 255, 255, 0.2); --surface-blur: 18px; --shadow: 0 10px 40px rgba(31, 38, 135, 0.25); --shadow-hover: 0 20px 60px rgba(31, 38, 135, 0.35); } :root[data-theme="glass"] html, :root[data-theme="glass"] body { background: var(--bg-body); background-attachment: fixed; } /* Glass sidebar needs a real border since it floats over the colorful backdrop instead of sitting on a flat dark panel. */ :root[data-theme="glass"] .sidebar { border-right: 1px solid rgba(255, 255, 255, 0.25); } /* Glass login page: let the login card float on its own frosted glass instead of doubling up two different gradients. */ :root[data-theme="glass"] .login-page { background: var(--bg-body); } :root[data-theme="glass"] .login-card { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.4); } /* Dark theme: swap the sun/moon switch icon colors so they stay legible, and keep chart.js grid lines visible on dark surfaces. */ :root[data-theme="dark"] .stat-card .stat-icon, :root[data-theme="glass"] .stat-card .stat-icon { filter: none; } /* Scrollbar thumb stays brand-purple in all themes; only the track needs to adapt, already wired via --scrollbar-track. */