/* ============================================================= dark-theme.css Dark mode overrides for the admin dashboard. Loaded last so it wins over the base theme stylesheet. Selector strategy: • html.dark-theme — class added by JS on • body[data-sidebar="dark"] — kept for sidebar-specific Sneat overrides • !important used only where the base stylesheet forces inline or !important styles Palette (government / formal): Page background : #0F172A Sidebar : #16212B Card surface : #111827 Elevated surface : #1E293B Active menu bg : #273442 Border : #334155 Strong border : #475569 Main text : #F8FAFC Secondary text : #CBD5E1 Muted text : #94A3B8 Primary btn : #1D4ED8 Primary btn hover: #2563EB ============================================================= */ /* -------------------------------------------------- CSS custom properties — dark values -------------------------------------------------- */ html.dark-theme { --dk-bg: #0F172A; /* page background */ --dk-sidebar: #16212B; /* sidebar */ --dk-surface: #111827; /* cards, panels, tables */ --dk-surface-2: #1E293B; /* elevated: card headers, tr:hover, tooltips */ --dk-active: #273442; /* active / selected menu item */ --dk-bdr: #334155; /* default border */ --dk-bdr-strong: #475569; /* table dividers, header borders */ --dk-txt: #F8FAFC; /* primary text */ --dk-txt-2: #CBD5E1; /* secondary text */ --dk-txt-muted: #94A3B8; /* placeholder, muted labels */ --dk-primary: #1D4ED8; /* primary button */ --dk-primary-h: #2563EB; /* primary button hover */ --dk-blue-accent: #3B82F6; /* active sidebar left-border accent */ --dk-danger: #EF4444; --dk-success: #22C55E; --dk-warning: #F59E0B; } /* -------------------------------------------------- Body + page chrome -------------------------------------------------- */ html.dark-theme body { background-color: var(--dk-bg) !important; color: var(--dk-txt) !important; } html.dark-theme #layout-wrapper { background-color: var(--dk-bg); } html.dark-theme .main-content { background-color: var(--dk-bg) !important; color: var(--dk-txt); } html.dark-theme .page-content { background-color: var(--dk-bg) !important; } html.dark-theme .container-fluid { background-color: transparent; color: var(--dk-txt); } html.dark-theme .page-title-box { background-color: transparent; } html.dark-theme .page-title-box h4, html.dark-theme .page-title-box .breadcrumb, html.dark-theme .page-title-box .breadcrumb-item, html.dark-theme .page-title-box .breadcrumb-item a, html.dark-theme .page-title-box .breadcrumb-item.active { color: var(--dk-txt-2) !important; } html.dark-theme .breadcrumb-item + .breadcrumb-item::before { color: var(--dk-txt-muted); } /* -------------------------------------------------- Topbar / Navbar -------------------------------------------------- */ html.dark-theme #page-topbar, html.dark-theme .navbar-header { background-color: var(--dk-surface) !important; border-bottom: 1px solid var(--dk-bdr) !important; box-shadow: 0 2px 8px rgba(2, 6, 23, 0.55) !important; } html.dark-theme #page-topbar *, html.dark-theme .navbar-header * { color: var(--dk-txt-2); } html.dark-theme #page-topbar a, html.dark-theme #page-topbar button, html.dark-theme #page-topbar i, html.dark-theme #page-topbar .bx { color: var(--dk-txt-2) !important; } html.dark-theme .navbar-brand-box { background-color: var(--dk-sidebar) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; } /* ---- User dropdown in topbar ---- */ html.dark-theme .dropdown-menu { background-color: var(--dk-surface) !important; border: 1px solid var(--dk-bdr) !important; box-shadow: 0 4px 16px rgba(2,6,23,0.6) !important; } html.dark-theme .dropdown-item { color: var(--dk-txt-2) !important; } html.dark-theme .dropdown-item:hover, html.dark-theme .dropdown-item:focus { background-color: var(--dk-surface-2) !important; color: var(--dk-txt) !important; } html.dark-theme .dropdown-divider { border-color: var(--dk-bdr) !important; } /* -------------------------------------------------- Sidebar / Vertical Menu -------------------------------------------------- */ html.dark-theme .vertical-menu { background-color: var(--dk-sidebar) !important; border-right: 1px solid rgba(255, 255, 255, 0.03) !important; box-shadow: 2px 0 12px rgba(2, 6, 23, 0.5); } /* Ensure simplebar wrapper is transparent */ html.dark-theme .vertical-menu [data-simplebar], html.dark-theme #sidebar-menu { background-color: transparent !important; } /* ---- Side menu links ---- */ html.dark-theme #side-menu a, html.dark-theme #side-menu > li > a { color: var(--dk-txt-2) !important; display: flex; align-items: center; gap: 0.5rem; padding: 10px 16px; transition: background-color 0.15s ease, color 0.15s ease; } html.dark-theme #side-menu a i, html.dark-theme #side-menu a .bx { color: var(--dk-txt-muted) !important; font-size: 18px; min-width: 22px; text-align: center; flex-shrink: 0; } /* sub-menu items */ html.dark-theme #side-menu ul.sub-menu, html.dark-theme #side-menu ul.mm-show { background-color: rgba(0, 0, 0, 0.15) !important; } html.dark-theme #side-menu ul.sub-menu li a { padding: 8px 28px; font-size: 14px; color: var(--dk-txt-2) !important; } /* ---- Hover state ---- */ html.dark-theme #side-menu a:hover, html.dark-theme #side-menu ul.sub-menu li a:hover { background-color: var(--dk-surface-2) !important; color: var(--dk-txt) !important; } html.dark-theme #side-menu a:hover i, html.dark-theme #side-menu a:hover .bx { color: var(--dk-txt) !important; } /* ---- mm-active (metisMenu open parent) ---- */ html.dark-theme #side-menu li.mm-active > a { color: var(--dk-txt) !important; background-color: transparent !important; } /* -------------------------------------------------- Active menu item overrides NOTE: The inline