/* ============================================================ VGPL REPORTING — dark.css Complete dark theme. Loaded alongside main.css. Activated via [data-theme="dark"] on . Palette: Charcoal depths + electric gold accents ============================================================ */ [data-theme="dark"] { /* ── Core token overrides ── */ --bg-base: #0d1117; --bg-surface: #151c28; --bg-surface-alt: #1a2336; --text-primary: #e2e8f4; --text-secondary: #8896b0; --text-muted: #536078; --text-inverse: #0d1117; --border-light: #1f2d42; --border-medium: #263347; --border-strong: #324258; --success-bg: rgba(26, 122, 74, 0.18); --warning-bg: rgba(184, 114, 10, 0.18); --danger-bg: rgba(155, 35, 53, 0.18); --info-bg: rgba(26, 95, 138, 0.18); --shadow-xs: 0 1px 3px rgba(0,0,0,0.4); --shadow-sm: 0 2px 6px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35); --shadow-lg: 0 8px 28px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.35); --shadow-xl: 0 16px 56px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.4); --shadow-gold: 0 4px 24px rgba(118,241,31,0.28); } /* ══════════════════════════════════════════ BASE & BODY ══════════════════════════════════════════ */ [data-theme="dark"] body { background-color: #0d1117; color: #e2e8f4; } [data-theme="dark"] a { color: #7aadcf; } [data-theme="dark"] a:hover { color: var(--accent); } [data-theme="dark"] hr { border-top-color: var(--border-light); } /* ══════════════════════════════════════════ TYPOGRAPHY ══════════════════════════════════════════ */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #e2e8f4; } [data-theme="dark"] .page-title { color: #e2e8f4; } [data-theme="dark"] .page-subtitle { color: #8896b0; } [data-theme="dark"] .section-label { color: #536078; } /* ══════════════════════════════════════════ SIDEBAR — stays dark navy, minor adjustments ══════════════════════════════════════════ */ [data-theme="dark"] .sidebar { background-color: #080e1a; border-right-color: rgba(255,255,255,0.03); } [data-theme="dark"] .sidebar-brand { border-bottom-color: rgba(255,255,255,0.04); } [data-theme="dark"] .brand-name { color: #ffffff; } [data-theme="dark"] .brand-tagline{ color: #3a6399; } [data-theme="dark"] .nav-section-label { color: #2e4a6a; } [data-theme="dark"] .nav-item { color: #5a7a9a; } [data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.04); color: #a0b8d0; } [data-theme="dark"] .nav-item.active { background: rgba(118,241,31,0.10); color: #76f11f; } [data-theme="dark"] .nav-item.active::before { background: #76f11f; } [data-theme="dark"] .nav-badge { background: rgba(118,241,31,0.15); color: #76f11f; } [data-theme="dark"] .sidebar-footer { border-top-color: rgba(255,255,255,0.04); } [data-theme="dark"] .sidebar-user:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] .user-avatar { border-color: rgba(118,241,31,0.25); color: #76f11f; } [data-theme="dark"] .user-name { color: #c8d4e8; } [data-theme="dark"] .user-role { color: #3a6399; } /* ══════════════════════════════════════════ TOPBAR ══════════════════════════════════════════ */ [data-theme="dark"] .topbar { background: #0f1825; border-bottom: 1px solid #1a2538; box-shadow: 0 1px 0 #1a2538; } [data-theme="dark"] .topbar-breadcrumb a { color: #536078; } [data-theme="dark"] .breadcrumb-sep { color: #263347; } [data-theme="dark"] .breadcrumb-current { color: #c8d4e8; font-weight: 500; } [data-theme="dark"] .topbar-btn { color: #536078; } [data-theme="dark"] .topbar-btn:hover { background: #1a2538; border-color: #263347; color: #a0b8d0; } [data-theme="dark"] .topbar-divider { background: #1f2d42; } /* ══════════════════════════════════════════ CONTENT AREA ══════════════════════════════════════════ */ [data-theme="dark"] .content-area { background: #0d1117; } [data-theme="dark"] .content-header { border-bottom-color: #1f2d42; } /* ══════════════════════════════════════════ CARDS ══════════════════════════════════════════ */ [data-theme="dark"] .card { background: #151c28; border-color: #1f2d42; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } [data-theme="dark"] .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.5); } [data-theme="dark"] .card-header { border-bottom-color: #1f2d42; } [data-theme="dark"] .card-title { color: #d8e2f0; } [data-theme="dark"] .card-subtitle { color: #536078; } [data-theme="dark"] .card-footer { background: #1a2336; border-top-color: #1f2d42; } [data-theme="dark"] .card-body { background: #151c28; } /* KPI / stat cards */ [data-theme="dark"] .stat-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .sum-card, [data-theme="dark"] .qs-card, [data-theme="dark"] .qc, [data-theme="dark"] .sc { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .stat-card:hover, [data-theme="dark"] .kpi-card:hover, [data-theme="dark"] .sum-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.55); } [data-theme="dark"] .kpi-label, [data-theme="dark"] .stat-label, [data-theme="dark"] .kpi-lbl, [data-theme="dark"] .sum-lbl, [data-theme="dark"] .ql, [data-theme="dark"] .sl { color: #536078; } [data-theme="dark"] .kpi-value, [data-theme="dark"] .stat-value, [data-theme="dark"] .kpi-val, [data-theme="dark"] .sum-val, [data-theme="dark"] .qv, [data-theme="dark"] .sv, [data-theme="dark"] .hsv { color: #e2e8f4; } [data-theme="dark"] .kpi-sub, [data-theme="dark"] .stat-meta { color: #536078; } /* icon backgrounds in dark */ [data-theme="dark"] .kpi-icon.lime, [data-theme="dark"] .kpi-icon.gold, [data-theme="dark"] .sum-icon.lime, [data-theme="dark"] .qs-icon.g, [data-theme="dark"] .qi.g, [data-theme="dark"] .si.lime { background: rgba(118,241,31,0.12); color: #76f11f; } [data-theme="dark"] .kpi-icon.navy, [data-theme="dark"] .qs-icon.b, [data-theme="dark"] .qi.b, [data-theme="dark"] .si.navy { background: rgba(58,99,153,0.18); color: #5a83b8; } [data-theme="dark"] .kpi-icon.teal, [data-theme="dark"] .qs-icon.t, [data-theme="dark"] .qi.t, [data-theme="dark"] .si.green, [data-theme="dark"] .si.teal { background: rgba(29,158,117,0.15); color: #1d9e75; } [data-theme="dark"] .kpi-icon.coral, [data-theme="dark"] .si.coral { background: rgba(216,90,48,0.15); color: #d85a30; } [data-theme="dark"] .kpi-icon.purple, [data-theme="dark"] .qs-icon.p, [data-theme="dark"] .qi.p { background: rgba(127,119,221,0.15); color: #7f77dd; } [data-theme="dark"] .si.pink { background: rgba(153,53,86,0.18); color: #c06080; } /* ══════════════════════════════════════════ BADGES & PILLS ══════════════════════════════════════════ */ [data-theme="dark"] .badge-navy { background: rgba(30,52,96,0.35); color: #8aadd4; } [data-theme="dark"] .badge-gold { background: rgba(118,241,31,0.15); color: #76f11f; } [data-theme="dark"] .badge-success { background: rgba(26,122,74,0.18); color: #4ade80; } [data-theme="dark"] .badge-warning { background: rgba(184,114,10,0.18); color: #92f445; } [data-theme="dark"] .badge-danger { background: rgba(155,35,53,0.18); color: #f87171; } [data-theme="dark"] .badge-info { background: rgba(26,95,138,0.18); color: #60a5fa; } [data-theme="dark"] .badge-neutral { background: rgba(90,100,128,0.2); color: #8896b0; } [data-theme="dark"] .kpi-badge.up, [data-theme="dark"] .qs-delta.up, [data-theme="dark"] .qd.up, [data-theme="dark"] .hsd { background: rgba(118,241,31,0.15); color: #76f11f; } [data-theme="dark"] .kpi-badge.down, [data-theme="dark"] .qs-delta.down, [data-theme="dark"] .qd.dn { background: rgba(155,35,53,0.18); color: #f87171; } [data-theme="dark"] .kpi-badge.info { background: rgba(58,99,153,0.2); color: #5a83b8; } [data-theme="dark"] .kpi-pct { font-size:11px; font-weight:bold; color:#cad3e4; } [data-theme="dark"] .chart-badge.lime, [data-theme="dark"] .chart-badge.gold, [data-theme="dark"] .cbadge.lime { background: rgba(118,241,31,0.15); color: #76f11f; } [data-theme="dark"] .chart-badge.navy, [data-theme="dark"] .cbadge.navy { background: rgba(30,52,96,0.35); color: #5a83b8; } [data-theme="dark"] .chart-badge.teal, [data-theme="dark"] .cbadge.teal { background: rgba(29,158,117,0.15); color: #1d9e75; } [data-theme="dark"] .chart-badge.coral, [data-theme="dark"] .cbadge.coral { background: rgba(216,90,48,0.15); color: #d85a30; } [data-theme="dark"] .sector-pill { background: rgba(58,99,153,0.2); color: #5a83b8; } [data-theme="dark"] .fund-pill.funded { background: rgba(118,241,31,0.15); color: #76f11f; } [data-theme="dark"] .fund-pill.unfunded { background: rgba(155,35,53,0.18); color: #f87171; } [data-theme="dark"] .gender-badge.m, [data-theme="dark"] .gender-pill.m, [data-theme="dark"] .gp.m, [data-theme="dark"] .gb.m { background: rgba(58,99,153,0.2); color: #5a83b8; } [data-theme="dark"] .gender-badge.f, [data-theme="dark"] .gender-pill.f, [data-theme="dark"] .gp.f, [data-theme="dark"] .gb.f { background: rgba(153,53,86,0.2); color: #c06080; } [data-theme="dark"] .status-pill.active { background: rgba(118,241,31,0.12); color: #76f11f; } [data-theme="dark"] .status-pill.inactive { background: rgba(155,35,53,0.18); color: #f87171; } [data-theme="dark"] .status-pill.pending { background: rgba(184,114,10,0.18); color: #92f445; } [data-theme="dark"] .sp.a { background: rgba(118,241,31,0.12); color: #76f11f; } [data-theme="dark"] .sp.i { background: rgba(155,35,53,0.18); color: #f87171; } [data-theme="dark"] .sp.p { background: rgba(184,114,10,0.18); color: #92f445; } /* ══════════════════════════════════════════ CHARTS ══════════════════════════════════════════ */ [data-theme="dark"] .chart-card, [data-theme="dark"] .cc { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .chart-header, [data-theme="dark"] .ch { border-bottom-color: #1f2d42; } [data-theme="dark"] .chart-title, [data-theme="dark"] .ct { color: #d8e2f0; } [data-theme="dark"] .chart-subtitle, [data-theme="dark"] .cst { color: #536078; } [data-theme="dark"] .chart-body, [data-theme="dark"] .cb { background: #151c28; } /* ══════════════════════════════════════════ TABLES ══════════════════════════════════════════ */ [data-theme="dark"] .table-card, [data-theme="dark"] .main-table-card, [data-theme="dark"] .tc, [data-theme="dark"] .ac, [data-theme="dark"] .nc { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .table-header, [data-theme="dark"] .table-toolbar, [data-theme="dark"] .tt, [data-theme="dark"] .ach, [data-theme="dark"] .nch, [data-theme="dark"] .th { border-bottom-color: #1f2d42; background: #151c28; } [data-theme="dark"] .table-title, [data-theme="dark"] .act, [data-theme="dark"] .tt > div > div:first-child { color: #d8e2f0; } /* thead stays dark navy — looks great in dark mode already */ [data-theme="dark"] .emp-table thead, [data-theme="dark"] .dash-table thead, [data-theme="dark"] .table thead { background: #080e1a; } [data-theme="dark"] .emp-table tbody tr, [data-theme="dark"] .dash-table tbody tr, [data-theme="dark"] .table tbody tr, [data-theme="dark"] .ali { border-bottom-color: #1a2538; } [data-theme="dark"] .emp-table tbody tr:hover, [data-theme="dark"] .dash-table tbody tr:hover, [data-theme="dark"] .table tbody tr:hover, [data-theme="dark"] .ali:hover { background: rgba(118,241,31,0.05); } [data-theme="dark"] .emp-table tbody td, [data-theme="dark"] .dash-table tbody td, [data-theme="dark"] .table tbody td { color: #c8d4e8; } [data-theme="dark"] .td-name, [data-theme="dark"] .tname, [data-theme="dark"] .aa { color: #d8e2f0; font-weight: 500; } [data-theme="dark"] .td-muted, [data-theme="dark"] .td-emp, [data-theme="dark"] .td-rc, [data-theme="dark"] .tmut, [data-theme="dark"] .aw, [data-theme="dark"] .at, [data-theme="dark"] .tmu { color: #536078; } [data-theme="dark"] .td-pin, [data-theme="dark"] .td-code, [data-theme="dark"] .tpin, [data-theme="dark"] .tm { color: #76f11f; } [data-theme="dark"] .toolbar-info { color: #536078; } [data-theme="dark"] .toolbar-info strong { color: #c8d4e8; } /* ══════════════════════════════════════════ FILTER PANEL ══════════════════════════════════════════ */ [data-theme="dark"] .filter-panel, [data-theme="dark"] .fp { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .filter-panel-header, [data-theme="dark"] .fph { border-bottom-color: #1f2d42; } [data-theme="dark"] .filter-panel-title, [data-theme="dark"] .fpt { color: #d8e2f0; } [data-theme="dark"] .filter-count, [data-theme="dark"] .fcount { background: #76f11f; color: #0d1117; } [data-theme="dark"] .filter-body, [data-theme="dark"] .fb { background: #151c28; } [data-theme="dark"] .f-label, [data-theme="dark"] .fl { color: #536078; } [data-theme="dark"] .f-control, [data-theme="dark"] .fc, [data-theme="dark"] .form-control { background: #1a2336; border-color: #263347; color: #c8d4e8; } [data-theme="dark"] .f-control:focus, [data-theme="dark"] .fc:focus, [data-theme="dark"] .form-control:focus { border-color: #76f11f; box-shadow: 0 0 0 3px rgba(118,241,31,0.15); } [data-theme="dark"] .f-control::placeholder, [data-theme="dark"] .fc::placeholder, [data-theme="dark"] .form-control::placeholder { color: #324258; } [data-theme="dark"] select.f-control, [data-theme="dark"] select.fc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23536078' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } [data-theme="dark"] .search-wrap svg { stroke: #324258; } /* ══════════════════════════════════════════ BUTTONS ══════════════════════════════════════════ */ [data-theme="dark"] .btn-primary { background: #1a2e50; border-color: #1a2e50; color: #c8d4e8; } [data-theme="dark"] .btn-primary:hover { background: #213666; border-color: #213666; color: #e2e8f4; } [data-theme="dark"] .btn-gold { background: #76f11f; color: #0d1117; } [data-theme="dark"] .btn-gold:hover { background: #92f445; color: #0d1117; } [data-theme="dark"] .btn-outline { background: transparent; border-color: #263347; color: #8896b0; } [data-theme="dark"] .btn-outline:hover { background: #1a2336; border-color: #324258; color: #c8d4e8; } [data-theme="dark"] .btn-ghost { color: #536078; } [data-theme="dark"] .btn-ghost:hover { background: #1a2336; color: #c8d4e8; } [data-theme="dark"] .btn-export, [data-theme="dark"] .be, [data-theme="dark"] .btn-lime, [data-theme="dark"] .btn-gold { background: #76f11f; color: #0d1117; } [data-theme="dark"] .btn-export:hover, [data-theme="dark"] .be:hover { background: #92f445; color: #0d1117; } [data-theme="dark"] .btn-apply, [data-theme="dark"] .ba, [data-theme="dark"] .btn-filter-apply, [data-theme="dark"] .bfa { background: #1a2e50; color: #c8d4e8; } [data-theme="dark"] .btn-apply:hover, [data-theme="dark"] .ba:hover { background: #213666; color: #e2e8f4; } [data-theme="dark"] .btn-clear, [data-theme="dark"] .bc, [data-theme="dark"] .btn-filter-clear, [data-theme="dark"] .bfc { border-color: #263347; color: #536078; } [data-theme="dark"] .btn-clear:hover, [data-theme="dark"] .bc:hover { border-color: #324258; color: #8896b0; } [data-theme="dark"] .btn-dash.btn-p, [data-theme="dark"] .btn-p { background: #1a2e50; color: #c8d4e8; } [data-theme="dark"] .btn-dash.btn-p:hover { background: #213666; } /* ══════════════════════════════════════════ PAGINATION ══════════════════════════════════════════ */ [data-theme="dark"] .pagination-bar, [data-theme="dark"] .pb { border-top-color: #1f2d42; background: #151c28; color: #536078; } [data-theme="dark"] .pag-btn, [data-theme="dark"] .pbtn { background: #1a2336; border-color: #263347; color: #536078; } [data-theme="dark"] .pag-btn:hover, [data-theme="dark"] .pbtn:hover { background: rgba(118,241,31,0.08); border-color: #76f11f; color: #76f11f; } [data-theme="dark"] .pag-btn.active, [data-theme="dark"] .pbtn.active { background: #0f1825; border-color: #76f11f; color: #76f11f; } /* ══════════════════════════════════════════ ACTIVITY FEED & NOTICES ══════════════════════════════════════════ */ [data-theme="dark"] .activity-card, [data-theme="dark"] .notices-card { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .activity-header, [data-theme="dark"] .notices-header { border-bottom-color: #1f2d42; } [data-theme="dark"] .activity-title, [data-theme="dark"] .notices-title, [data-theme="dark"] .activity-action, [data-theme="dark"] .act { color: #d8e2f0; } [data-theme="dark"] .activity-who, [data-theme="dark"] .activity-time { color: #324258; } [data-theme="dark"] .activity-item, [data-theme="dark"] .ali { border-bottom-color: #1a2538; } [data-theme="dark"] .activity-item:hover, [data-theme="dark"] .ali:hover { background: rgba(118,241,31,0.04); } [data-theme="dark"] .notice-item { border-bottom-color: #1a2538; } [data-theme="dark"] .notice-item:hover { background: rgba(255,255,255,0.02); } [data-theme="dark"] .notice-text { color: #8896b0; } [data-theme="dark"] .notice-time { color: #324258; } [data-theme="dark"] .notice-tag.warn { background: rgba(118,241,31,0.15); color: #76f11f; } [data-theme="dark"] .notice-tag.info { background: rgba(26,95,138,0.18); color: #60a5fa; } [data-theme="dark"] .notice-tag.ok { background: rgba(26,122,74,0.18); color: #4ade80; } [data-theme="dark"] .notice-tag.alert, [data-theme="dark"] .notice-tag.alrt { background: rgba(216,90,48,0.15); color: #d85a30; } [data-theme="dark"] .pending { background: rgba(118,241,31,0.15); color: #76f11f; } /* ══════════════════════════════════════════ ALERTS ══════════════════════════════════════════ */ [data-theme="dark"] .alert-success { background: rgba(26,122,74,0.15); color: #4ade80; border-color: rgba(26,122,74,0.3); } [data-theme="dark"] .alert-warning { background: rgba(184,114,10,0.15); color: #92f445; border-color: rgba(184,114,10,0.3); } [data-theme="dark"] .alert-danger { background: rgba(155,35,53,0.15); color: #f87171; border-color: rgba(155,35,53,0.3); } [data-theme="dark"] .alert-info { background: rgba(26,95,138,0.15); color: #60a5fa; border-color: rgba(26,95,138,0.3); } /* ══════════════════════════════════════════ MODALS ══════════════════════════════════════════ */ [data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.75); } [data-theme="dark"] .modal { background: #151c28; box-shadow: 0 20px 60px rgba(0,0,0,0.7); } [data-theme="dark"] .modal-header { border-bottom-color: #1f2d42; } [data-theme="dark"] .modal-title { color: #d8e2f0; } [data-theme="dark"] .modal-footer { background: #1a2336; border-top-color: #1f2d42; } /* ══════════════════════════════════════════ DROPDOWNS ══════════════════════════════════════════ */ [data-theme="dark"] .dropdown-menu { background: #151c28; border-color: #263347; box-shadow: 0 8px 32px rgba(0,0,0,0.6); } [data-theme="dark"] .dropdown-item { color: #8896b0; } [data-theme="dark"] .dropdown-item:hover { background: #1a2336; color: #c8d4e8; } [data-theme="dark"] .dropdown-item.danger { color: #f87171; } [data-theme="dark"] .dropdown-item.danger:hover { background: rgba(155,35,53,0.18); } [data-theme="dark"] .dropdown-divider { background: #1f2d42; } /* ══════════════════════════════════════════ SUMMARY CARDS (dashboard home page) ══════════════════════════════════════════ */ [data-theme="dark"] .qs-card, [data-theme="dark"] .qc { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .qs-val, [data-theme="dark"] .qv { color: #e2e8f4; } [data-theme="dark"] .qs-lbl, [data-theme="dark"] .ql { color: #536078; } /* ══════════════════════════════════════════ HERO SECTION (home page) ══════════════════════════════════════════ */ [data-theme="dark"] .hero { background: #080e1a; } [data-theme="dark"] .hero-sub { color: #536078; } [data-theme="dark"] .hsc { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .hsl { color: #324258; } /* ══════════════════════════════════════════ MODULE CARDS (home page) ══════════════════════════════════════════ */ [data-theme="dark"] .module-card, [data-theme="dark"] .mc { background: #151c28; border-color: #1f2d42; } [data-theme="dark"] .module-card:hover, [data-theme="dark"] .mc:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.55); border-color: #263347; } [data-theme="dark"] .module-name, [data-theme="dark"] .mn { color: #d8e2f0; } [data-theme="dark"] .module-desc, [data-theme="dark"] .md { color: #536078; } [data-theme="dark"] .module-meta, [data-theme="dark"] .mm { border-top-color: #1f2d42; } [data-theme="dark"] .module-count, [data-theme="dark"] .mct { color: #324258; } [data-theme="dark"] .module-arrow, [data-theme="dark"] .ma { background: #1a2336; } [data-theme="dark"] .module-card:hover .module-arrow, [data-theme="dark"] .mc:hover .ma { background: #76f11f; } [data-theme="dark"] .module-arrow svg, [data-theme="dark"] .ma svg { stroke: #536078; } [data-theme="dark"] .module-card:hover .module-arrow svg, [data-theme="dark"] .mc:hover .ma svg { stroke: #0d1117; } [data-theme="dark"] .module-icon, [data-theme="dark"] .mi { background: #1a2336 !important; } /* ══════════════════════════════════════════ GREETING BAR ══════════════════════════════════════════ */ [data-theme="dark"] .greeting-bar, [data-theme="dark"] .gbar { background: #0f1825; border-bottom-color: #1a2538; } [data-theme="dark"] .greeting-text, [data-theme="dark"] .gt { color: #536078; } [data-theme="dark"] .gt strong { color: #c8d4e8; } [data-theme="dark"] .gm span { color: #324258; } /* ══════════════════════════════════════════ EMPTY STATE ══════════════════════════════════════════ */ [data-theme="dark"] .empty-state-icon, [data-theme="dark"] .empty-icon { background: #1a2336; } [data-theme="dark"] .empty-state-icon svg, [data-theme="dark"] .empty-icon svg { stroke: #324258; } [data-theme="dark"] .empty-state-title, [data-theme="dark"] .empty-title { color: #d8e2f0; } [data-theme="dark"] .empty-state-desc, [data-theme="dark"] .empty-sub { color: #536078; } /* ══════════════════════════════════════════ SKELETON LOADERS ══════════════════════════════════════════ */ [data-theme="dark"] .skeleton { background: linear-gradient( 90deg, #1a2336 25%, #1f2d42 50%, #1a2336 75% ); background-size: 200% 100%; } /* ══════════════════════════════════════════ TOOLTIPS ══════════════════════════════════════════ */ [data-theme="dark"] [data-tooltip]::after { background: #0d1117; color: #c8d4e8; border: 1px solid #263347; } /* ══════════════════════════════════════════ FOOTER ══════════════════════════════════════════ */ [data-theme="dark"] footer { background: #0f1825; border-top-color: #1a2538; } [data-theme="dark"] footer div { color: #324258; } [data-theme="dark"] footer strong { color: #536078; } /* ══════════════════════════════════════════ SCROLLBARS ══════════════════════════════════════════ */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #1f2d42; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #263347; } /* ══════════════════════════════════════════ DARK MODE TOGGLE BUTTON ══════════════════════════════════════════ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .theme-toggle:hover { background: var(--slate-50); border-color: var(--border-light); color: var(--text-primary); } [data-theme="dark"] .theme-toggle:hover { background: #1a2336; border-color: #263347; color: #c8d4e8; } /* Icon swap — CSS driven, zero JS */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Smooth theme transition on everything except backgrounds (backgrounds transition separately to avoid flash) */ [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; }