/* =============================================================================
   custom.css — Light / Dark theme layer for SB Admin 2
   Drop this AFTER sb-admin-2.css. Never modify the original theme files.
   ============================================================================= */
 
/* ---------------------------------------------------------------------------
   1. TRANSITION — smooth, hardware-accelerated theme switching
   --------------------------------------------------------------------------- */
/* *,
*::before,
*::after {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.2s ease,
    box-shadow       0.25s ease;
} */
body,
#content-wrapper,
.card,
.navbar,
.dropdown-menu,
.modal-content,
.table,
.form-control {
  transition:
    background-color 0.18s ease,
    color 0.12s ease,
    border-color 0.18s ease;
}

body {
  will-change: background-color, color;
}
 
/* Exclude elements where transitions look jittery or wrong */
.progress-bar,
canvas,
img,
svg,
[class*="fa-"],
.btn:focus,
.btn:active {
  transition: none;
}
 
/* ---------------------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES
      :root  → light mode (matches default SB Admin 2 palette exactly)
      [data-theme="dark"] on :root → dark overrides
   --------------------------------------------------------------------------- */
:root {
  /* ---- Brand / Accent colours (unchanged in both modes) ---- */
  --clr-primary:    #4e73df;
  --clr-primary-dk: #224abe;
  --clr-success:    #1cc88a;
  --clr-info:       #36b9cc;
  --clr-warning:    #f6c23e;
  --clr-danger:     #e74a3b;
  --clr-secondary:  #858796;
 
  /* ---- Surface / Background ---- */
  --bg-body:        #f8f9fc;   /* page background */
  --bg-content:     #f8f9fc;   /* content-wrapper */
  --bg-card:        #ffffff;
  --bg-card-header: #f8f9fc;
  --bg-topbar:      #ffffff;
  --bg-footer:      #ffffff;
  --bg-input:       #ffffff;
  --bg-input-focus: #ffffff;
  --bg-table-head:  #f8f9fc;
  --bg-table-stripe:#f2f4fc;
  --bg-table-hover: #eaecf4;
  --bg-dropdown:    #ffffff;
  --bg-collapse:    #ffffff;
  --bg-modal:       #ffffff;
  --bg-topbar-toggle-hover: #eaecf4;
 
  /* ---- Sidebar — light mode: clean white with primary accents ---- */
  --bg-sidebar:              #ffffff;
  --bg-sidebar-brand:        #f8f9fc;
  --clr-sidebar-border:      #e3e6f0;
  --clr-sidebar-text:        #858796;
  --clr-sidebar-text-hover:  #4e73df;
  --clr-sidebar-active:      #4e73df;
  --clr-sidebar-heading:     #b7b9cc;
  --bg-sidebar-hover:        #eaecf4;
  --bg-sidebar-active:       #eaecf4;
  --bg-sidebar-divider:      #e3e6f0;
  --bg-sidebar-toggle-btn:   #e3e6f0;
  --clr-sidebar-toggle-btn:  #858796;
  --clr-sidebar-icon:        #d1d3e2;
 
  /* ---- Text ---- */
  --clr-text-body:    #858796;
  --clr-text-heading: #5a5c69;
  --clr-text-muted:   #858796;
  --clr-text-link:    #4e73df;
  --clr-text-dark:    #5a5c69;
 
  /* ---- Borders ---- */
  --clr-border:        #e3e6f0;
  --clr-border-card:   #e3e6f0;
  --clr-border-input:  #d1d3e2;
  --clr-border-table:  #e3e6f0;
  --clr-divider:       #e3e6f0;
 
  /* ---- Shadows ---- */
  --shadow-card:   0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
  --shadow-topbar: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
 
  /* ---- Misc ---- */
  --clr-scroll-to-top: #858796;

  /* Logo */
  --logo-invert: brightness(1) invert(0);
}
 
/* ---------------------------------------------------------------------------
   DARK MODE — override only what changes
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  /* Surface / Background */
  --bg-body:        #1a1c2e;
  --bg-content:     #1a1c2e;
  --bg-card:        #252741;
  --bg-card-header: #1e2036;
  --bg-topbar:      #252741;
  --bg-footer:      #252741;
  --bg-input:       #1e2036;
  --bg-input-focus: #252741;
  --bg-table-head:  #1e2036;
  --bg-table-stripe:#1f2138;
  --bg-table-hover: #2a2d4a;
  --bg-dropdown:    #252741;
  --bg-collapse:    #252741;
  --bg-modal:       #252741;
  --bg-topbar-toggle-hover: #2a2d4a;
 
  /* Text */
  --clr-text-body:    #c5c7d4;
  --clr-text-heading: #e0e2f0;
  --clr-text-muted:   #8b8fa8;
  --clr-text-link:    #7b96f0;
  --clr-text-dark:    #e0e2f0;
 
  /* Borders */
  --clr-border:       #353860;
  --clr-border-card:  #353860;
  --clr-border-input: #404370;
  --clr-border-table: #353860;
  --clr-divider:      #353860;
 
  /* Shadows — subtler on dark */
  --shadow-card:   0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4);
  --shadow-topbar: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4);
 
  --clr-scroll-to-top: #7b96f0;
 
  /* Sidebar — dark mode: deep navy, consistent with card surfaces */
  --bg-sidebar:              #1e2036;
  --bg-sidebar-brand:        #181a2e;
  --clr-sidebar-border:      #353860;
  --clr-sidebar-text:        #8b8fa8;
  --clr-sidebar-text-hover:  #c5c7d4;
  --clr-sidebar-active:      #7b96f0;
  --clr-sidebar-heading:     #505374;
  --bg-sidebar-hover:        #2a2d4a;
  --bg-sidebar-active:       #2a2d4a;
  --bg-sidebar-divider:      #353860;
  --bg-sidebar-toggle-btn:   #2a2d4a;
  --clr-sidebar-toggle-btn:  #8b8fa8;
  --clr-sidebar-icon:        #505374;

  /* Logo */
  --logo-invert: brightness(0) invert(1);
}
 
/* ---------------------------------------------------------------------------
   3. BASE — body & content wrapper
   --------------------------------------------------------------------------- */
body {
  background-color: var(--bg-body) !important;
  color:            var(--clr-text-body) !important;
}
 
#content-wrapper {
  background-color: var(--bg-content) !important;
}

.sidebar-brand > img {
    filter: var(--logo-invert);
}
 
/* ---------------------------------------------------------------------------
   4. TOPBAR / NAVBAR
   --------------------------------------------------------------------------- */
.topbar.navbar-light,
nav.navbar.bg-white,
.navbar.bg-white {
  background-color: var(--bg-topbar) !important;
  box-shadow: var(--shadow-topbar) !important;
  border-bottom: 1px solid var(--clr-border);
}
 
/* Topbar text & icon colours */
.topbar .nav-item .nav-link,
.navbar .nav-link {
  color: var(--clr-text-body) !important;
}
 
.topbar .nav-item .nav-link:hover,
.navbar .nav-link:hover {
  color: var(--clr-text-heading) !important;
}
 
/* Page title in topbar */
.page-title h5,
.text-gray-800 {
  color: var(--clr-text-heading) !important;
}
 
.text-gray-600,
.text-gray-500 {
  color: var(--clr-text-muted) !important;
}
 
/* Topbar divider */
.topbar .topbar-divider {
  border-right-color: var(--clr-divider) !important;
}
 
/* Sidebar top-toggle (hamburger) */
#sidebarToggleTop:hover,
#sidebarToggleTop:active {
  background-color: var(--bg-topbar-toggle-hover) !important;
}
 
/* ---------------------------------------------------------------------------
   5. SIDEBAR — fully themed for both light and dark modes
      Every selector here mirrors the specificity of sidebar-dark rules in
      sb-admin-2.css so our !important overrides reliably win.
   --------------------------------------------------------------------------- */
 
/* ── Core sidebar shell ─────────────────────────────────────────────────── */
/* Beats .bg-gradient-primary (background-color + background-image) */
.sidebar.bg-gradient-primary,
ul.sidebar.bg-gradient-primary {
  background-color: var(--bg-sidebar) !important;
  background-image: none !important;
}
 
/* Ensure the sidebar element itself picks up the surface colour */
.sidebar {
  background-color: var(--bg-sidebar) !important;
  border-right: 1px solid var(--clr-sidebar-border) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06) !important;
}
 
/* ── Brand / logo area ──────────────────────────────────────────────────── */
/* Beats: .sidebar-dark .sidebar-brand { color: #fff } */
.sidebar-dark .sidebar-brand {
  color: var(--clr-sidebar-active) !important;
  background-color: var(--bg-sidebar-brand) !important;
  border-bottom: 1px solid var(--clr-sidebar-border) !important;
}
 
/* ── Dividers ───────────────────────────────────────────────────────────── */
/* Beats: .sidebar-dark hr.sidebar-divider { border-top: 1px solid rgba(255,255,255,.15) } */
.sidebar-dark hr.sidebar-divider {
  border-top-color: var(--bg-sidebar-divider) !important;
}
 
/* ── Section headings ───────────────────────────────────────────────────── */
/* Beats: .sidebar-dark .sidebar-heading { color: rgba(255,255,255,.4) } */
.sidebar-dark .sidebar-heading {
  color: var(--clr-sidebar-heading) !important;
}
 
/* ── Nav link base colour ───────────────────────────────────────────────── */
/* Beats: .sidebar-dark .nav-item .nav-link { color: rgba(255,255,255,.8) } */
.sidebar-dark .nav-item .nav-link {
  color: var(--clr-sidebar-text) !important;
}
 
/* ── Nav link icon colour ───────────────────────────────────────────────── */
/* Beats: .sidebar-dark .nav-item .nav-link i { color: rgba(255,255,255,.3) } */
.sidebar-dark .nav-item .nav-link i {
  color: var(--clr-sidebar-icon) !important;
}
 
/* ── Nav link hover / focus / active states ─────────────────────────────── */
/* Beats: .sidebar-dark .nav-item .nav-link:active, :focus, :hover { color: #fff } */
.sidebar-dark .nav-item .nav-link:active,
.sidebar-dark .nav-item .nav-link:focus,
.sidebar-dark .nav-item .nav-link:hover {
  color: var(--clr-sidebar-text-hover) !important;
  background-color: var(--bg-sidebar-hover) !important;
}
 
/* Beats: .sidebar-dark .nav-item .nav-link:active i, :focus i, :hover i { color: #fff } */
.sidebar-dark .nav-item .nav-link:active i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item .nav-link:hover i {
  color: var(--clr-sidebar-active) !important;
}
 
/* ── Collapse arrow ─────────────────────────────────────────────────────── */
/* Beats: .sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after { color: rgba(255,255,255,.5) } */
.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
  color: var(--clr-sidebar-text) !important;
}
 
/* ── Active nav item ────────────────────────────────────────────────────── */
/* Beats: .sidebar-dark .nav-item.active .nav-link { color: #fff } */
.sidebar-dark .nav-item.active .nav-link {
  color: var(--clr-sidebar-active) !important;
}
 
/* Beats: .sidebar-dark .nav-item.active .nav-link i { color: #fff } */
.sidebar-dark .nav-item.active .nav-link i {
  color: var(--clr-sidebar-active) !important;
}
 
/* Active left-border accent — adds visual anchor without background change */
.sidebar-dark .nav-item.active > .nav-link {
  border-left: 3px solid var(--clr-sidebar-active);
  padding-left: calc(1rem - 3px);
}
 
/* ── Sidebar toggle button (collapse/expand chevron) ────────────────────── */
/* Beats: .sidebar-dark #sidebarToggle { background-color: rgba(255,255,255,.2) } */
.sidebar-dark #sidebarToggle {
  background-color: var(--bg-sidebar-toggle-btn) !important;
  border: 1px solid var(--clr-sidebar-border) !important;
}
 
/* Beats: .sidebar-dark #sidebarToggle::after { color: rgba(255,255,255,.5) } */
.sidebar-dark #sidebarToggle::after {
  color: var(--clr-sidebar-toggle-btn) !important;
}
 
/* Beats: .sidebar-dark #sidebarToggle:hover { background-color: rgba(255,255,255,.25) } */
.sidebar-dark #sidebarToggle:hover {
  background-color: var(--bg-sidebar-hover) !important;
}
 
/* ── Collapse inner panels ──────────────────────────────────────────────── */
.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner,
.sidebar .bg-white {
  background-color: var(--bg-collapse) !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: var(--shadow-card) !important;
}
 
.sidebar .nav-item .collapse .collapse-inner .collapse-header,
.sidebar .nav-item .collapsing .collapse-inner .collapse-header {
  color: var(--clr-text-muted) !important;
}
 
.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
  color: var(--clr-text-heading) !important;
}
 
.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
  background-color: var(--bg-table-hover) !important;
  color: var(--clr-text-heading) !important;
}
 
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  color: var(--clr-primary) !important;
}
 
/* ── Collapse divider inside panels ─────────────────────────────────────── */
.collapse-divider {
  border-top: 1px solid var(--clr-border) !important;
  margin: 0.5rem 0;
}
 
/* ---------------------------------------------------------------------------
   6. CARDS
   --------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-card) !important;
  border-color: var(--clr-border-card) !important;
  box-shadow: var(--shadow-card) !important;
}
 
.card-header {
  background-color: var(--bg-card-header) !important;
  border-bottom-color: var(--clr-border-card) !important;
  color: var(--clr-text-heading) !important;
}
 
.card-footer {
  background-color: var(--bg-card-header) !important;
  border-top-color: var(--clr-border-card) !important;
  color: var(--clr-text-muted) !important;
}
 
.card-body {
  color: var(--clr-text-body) !important;
}
 
/* Stat cards — border-left accent cards */
.card.border-left-primary  { border-left-color: var(--clr-primary)   !important; }
.card.border-left-success  { border-left-color: var(--clr-success)   !important; }
.card.border-left-info     { border-left-color: var(--clr-info)      !important; }
.card.border-left-warning  { border-left-color: var(--clr-warning)   !important; }
.card.border-left-danger   { border-left-color: var(--clr-danger)    !important; }
.card.border-left-secondary{ border-left-color: var(--clr-secondary) !important; }
 
/* ---------------------------------------------------------------------------
   7. TABLES
   --------------------------------------------------------------------------- */
.table {
  color: var(--clr-text-body) !important;
  border-color: var(--clr-border-table) !important;
}
 
.table th,
.table td {
  border-color: var(--clr-border-table) !important;
  color: var(--clr-text-body) !important;
}
 
.table thead th {
  background-color: var(--bg-table-head) !important;
  border-color: var(--clr-border-table) !important;
  color: var(--clr-text-heading) !important;
}
 
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-table-stripe) !important;
}
 
.table-hover tbody tr:hover {
  background-color: var(--bg-table-hover) !important;
  color: var(--clr-text-heading) !important;
}
 
/* DataTables wrapper */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--clr-text-body) !important;
}
 
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--clr-text-muted) !important;
}
 
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--bg-input) !important;
  border-color: var(--clr-border-input) !important;
  color: var(--clr-text-body) !important;
}
 
/* ---------------------------------------------------------------------------
   8. FORMS & INPUTS
   --------------------------------------------------------------------------- */
.form-control {
  background-color: var(--bg-input) !important;
  border-color: var(--clr-border-input) !important;
  color: var(--clr-text-body) !important;
}
 
.form-control:focus {
  background-color: var(--bg-input-focus) !important;
  border-color: var(--clr-primary) !important;
  color: var(--clr-text-heading) !important;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
}
 
.form-control::placeholder {
  color: var(--clr-text-muted) !important;
  opacity: 0.7;
}
 
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--bg-table-head) !important;
  color: var(--clr-text-muted) !important;
}
 
label,
.form-label {
  color: var(--clr-text-heading) !important;
}
 
.input-group-text {
  background-color: var(--bg-card-header) !important;
  border-color: var(--clr-border-input) !important;
  color: var(--clr-text-body) !important;
}
 
select.form-control {
  background-color: var(--bg-input) !important;
  color: var(--clr-text-body) !important;
}
 
/* Search pill input in dashboard */
#searchInput {
  background-color: var(--bg-input) !important;
  border-color: var(--clr-border-input) !important;
  color: var(--clr-text-body) !important;
}
 
/* ---------------------------------------------------------------------------
   9. BUTTONS
   --------------------------------------------------------------------------- */
 
/* Outline variants get adjusted borders/text for dark mode */
.btn-outline-secondary {
  color: var(--clr-text-body) !important;
  border-color: var(--clr-border-input) !important;
}
 
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--bg-table-hover) !important;
  border-color: var(--clr-secondary) !important;
  color: var(--clr-text-heading) !important;
}
 
/* Theme toggle button specifically */
#themeToggle {
  color: var(--clr-text-body) !important;
  border-color: var(--clr-border-input) !important;
  background-color: transparent !important;
}
 
#themeToggle:hover {
  background-color: var(--bg-table-hover) !important;
  color: var(--clr-text-heading) !important;
}
 
/* Refresh button */
#refreshBtn {
  color: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  background-color: transparent !important;
}
 
#refreshBtn:hover {
  background-color: var(--clr-primary) !important;
  color: #fff !important;
}
 
/* Sort button */
#sortBtn {
  color: var(--clr-text-body) !important;
  border-color: var(--clr-border-input) !important;
  background-color: transparent !important;
}
 
#sortBtn:hover {
  background-color: var(--bg-table-hover) !important;
}
 
/* Filter pill buttons */
.btn-outline-primary  { color: var(--clr-primary)  !important; border-color: var(--clr-primary)  !important; }
.btn-outline-success  { color: var(--clr-success)  !important; border-color: var(--clr-success)  !important; }
.btn-outline-warning  { color: var(--clr-warning)  !important; border-color: var(--clr-warning)  !important; }
.btn-outline-danger   { color: var(--clr-danger)   !important; border-color: var(--clr-danger)   !important; }
.btn-outline-info     { color: var(--clr-info)     !important; border-color: var(--clr-info)     !important; }
 
.btn-outline-primary.active,
.btn-outline-primary:hover  { background-color: var(--clr-primary)  !important; color: #fff !important; }
.btn-outline-success.active, .btn-outline-success:hover  { background-color: var(--clr-success)  !important; color: #fff !important; }
.btn-outline-warning.active, .btn-outline-warning:hover  { background-color: var(--clr-warning)  !important; color: #fff !important; }
.btn-outline-danger.active, .btn-outline-danger:hover   { background-color: var(--clr-danger)   !important; color: #fff !important; }
.btn-outline-info.active, .btn-outline-info:hover     { background-color: var(--clr-info)     !important; color: #fff !important; }
 
/* btn-link (e.g. sidebar toggle top) */
.btn-link {
  color: var(--clr-text-body) !important;
}
 
.btn-link:hover {
  color: var(--clr-text-heading) !important;
}
 
/* ---------------------------------------------------------------------------
   10. LINKS
   --------------------------------------------------------------------------- */
a {
  color: var(--clr-text-link) !important;
}
 
a:hover {
  color: var(--clr-primary-dk) !important;
}
 
/* Links that are styled as text (breadcrumb, small text) */
a.nav-link {
  color: var(--clr-text-body) !important;
}
 
/* ---------------------------------------------------------------------------
   11. FOOTER
   --------------------------------------------------------------------------- */
.sticky-footer,
footer.sticky-footer,
footer.sticky-footer.bg-white {
  background-color: var(--bg-footer) !important;
  border-top: 1px solid var(--clr-border) !important;
  color: var(--clr-text-muted) !important;
}
 
/* ---------------------------------------------------------------------------
   12. DROPDOWNS & MODALS
   --------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--bg-dropdown) !important;
  border-color: var(--clr-border) !important;
  box-shadow: var(--shadow-card) !important;
}
 
.dropdown-item {
  color: var(--clr-text-body) !important;
}
 
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-table-hover) !important;
  color: var(--clr-text-heading) !important;
}
 
.dropdown-divider {
  border-color: var(--clr-divider) !important;
}
 
.modal-content {
  background-color: var(--bg-modal) !important;
  border-color: var(--clr-border) !important;
}
 
.modal-header {
  border-bottom-color: var(--clr-border) !important;
  color: var(--clr-text-heading) !important;
}
 
.modal-footer {
  border-top-color: var(--clr-border) !important;
}
 
.modal-body {
  color: var(--clr-text-body) !important;
}
 
.close {
  color: var(--clr-text-heading) !important;
  opacity: 0.6;
}
 
.close:hover {
  opacity: 1;
}
 
/* ---------------------------------------------------------------------------
   13. BOOTSTRAP UTILITY OVERRIDES
   --------------------------------------------------------------------------- */
.bg-white {
  background-color: var(--bg-card) !important;
}
 
.text-dark {
  color: var(--clr-text-heading) !important;
}
 
.text-muted {
  color: var(--clr-text-muted) !important;
}
 
.text-gray-300 {
  color: var(--clr-border-input) !important;
}
 
.text-gray-400 {
  color: var(--clr-text-muted) !important;
}
 
.text-gray-500 {
  color: var(--clr-text-muted) !important;
}
 
.text-gray-600 {
  color: var(--clr-text-muted) !important;
}
 
.text-gray-800 {
  color: var(--clr-text-heading) !important;
}
 
/* Progress bar track */
.progress {
  background-color: var(--bg-table-stripe) !important;
}
 
/* hr dividers */
hr {
  border-color: var(--clr-divider) !important;
}
 
.sidebar-divider {
  border-color: var(--bg-sidebar-divider) !important;
}
 
/* Scroll to top button */
.scroll-to-top {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--clr-border) !important;
  color: var(--clr-scroll-to-top) !important;
}
 
.scroll-to-top:hover {
  background-color: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  color: #fff !important;
}
 
/* ---------------------------------------------------------------------------
   14. INLINE DARK-MODE COLOUR OVERRIDES
       Some elements in the HTML have inline color styles we can't easily
       override with variable references — scope them under [data-theme="dark"]
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] #npsScore {
  color: #e0e2f0 !important;
}
 
[data-theme="dark"] [style*="color: #5a5c69"],
[data-theme="dark"] [style*="color:#5a5c69"] {
  color: var(--clr-text-heading) !important;
}
 
[data-theme="dark"] [style*="color: #858796"],
[data-theme="dark"] [style*="color:#858796"] {
  color: var(--clr-text-muted) !important;
}
 
/* ---------------------------------------------------------------------------
   15. THEME TOGGLE BUTTON — base styles
       Icon swapping (moon ↔ sun) is handled entirely by bindThemeToggle()
       in app.js via innerHTML, so no CSS show/hide rules are needed here.
   --------------------------------------------------------------------------- */
 
/* ---------------------------------------------------------------------------
   16. SYSTEM PREFERENCE — prefers-color-scheme
       Applied only when user has not explicitly chosen a theme via localStorage
       (JS will add the class and persist to localStorage, taking priority)
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-body:        #1a1c2e;
    --bg-content:     #1a1c2e;
    --bg-card:        #252741;
    --bg-card-header: #1e2036;
    --bg-topbar:      #252741;
    --bg-footer:      #252741;
    --bg-input:       #1e2036;
    --bg-input-focus: #252741;
    --bg-table-head:  #1e2036;
    --bg-table-stripe:#1f2138;
    --bg-table-hover: #2a2d4a;
    --bg-dropdown:    #252741;
    --bg-collapse:    #252741;
    --bg-modal:       #252741;
    --bg-topbar-toggle-hover: #2a2d4a;
 
    --clr-text-body:    #c5c7d4;
    --clr-text-heading: #e0e2f0;
    --clr-text-muted:   #8b8fa8;
    --clr-text-link:    #7b96f0;
    --clr-text-dark:    #e0e2f0;
 
    --clr-border:       #353860;
    --clr-border-card:  #353860;
    --clr-border-input: #404370;
    --clr-border-table: #353860;
    --clr-divider:      #353860;
 
    --shadow-card:   0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4);
    --shadow-topbar: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4);
 
    --clr-scroll-to-top: #7b96f0;
  }
}