/* ── Light Palette (default) ── */
:root {
    /* ── Backgrounds ── */
    --sb-bg:                 #f5f6f8;
    --sb-bg-secondary:       #f8f9fa;
    --sb-bg-tertiary:        #f0f2f5;

    /* ── Surfaces ── */
    --sb-surface:            #ffffff;
    --sb-surface-hover:      #f8f9fa;
    --sb-surface-active:     #e8f0fe;
    --sb-surface-raised:     #fafbfc;

    /* ── Text ── */
    --sb-text-primary:       #212529;
    --sb-text-secondary:     #6c757d;
    --sb-text-muted:         #adb5bd;
    --sb-text-inverse:       #ffffff;
    --sb-text-dark:          #212529;
    --sb-text-body:          #333333;

    /* ── Borders ── */
    --sb-border:             #dee2e6;
    --sb-border-light:       #f0f0f0;
    --sb-border-strong:      #e0e0e0;
    --sb-border-card:        #e9ecef;

    /* ── Primary / Accent ── */
    --sb-primary:            #0d6efd;
    --sb-primary-hover:      #0b5ed7;
    --sb-primary-light:      #e7f1ff;
    --sb-primary-subtle:     rgba(13, 110, 253, 0.1);

    /* ── Status Colors ── */
    --sb-success:            #198754;
    --sb-success-bg:         #d1e7dd;
    --sb-success-text:       #0f5132;
    --sb-danger:             #f87171;
    --sb-danger-bg:          #f8d7da;
    --sb-danger-text:        #842029;
    --sb-warning:            #ffc107;
    --sb-warning-contrast:   #111827;
    --sb-warning-bg:         #fff3cd;
    --sb-warning-text:       #856404;
    --sb-info:               #0dcaf0;
    --sb-info-bg:            #d1ecf1;
    --sb-info-text:          #0c5460;
    --sb-danger-bg-subtle:   #fef2f2;
    --sb-success-bg-subtle:  #f0fdf4;

    /* ── Assign overlay accent ── */
    --sb-assign-accent:      #6c5ce7;
    --sb-assign-accent-solid: #6c5ce7;
    --sb-assign-accent-lighter: rgba(108, 92, 231, 0.15);
    --sb-assign-accent-light: rgba(108, 92, 231, 0.1);

    /* ── Todo semantic tokens ── */
    --todo-kanban-col-border:        transparent;
    --todo-col-count-bg:             rgba(0, 0, 0, 0.08);
    --todo-drag-over-bg:             var(--sb-badge-blue-bg);
    --todo-card-border:              var(--sb-border-light);
    --todo-card-desc-color:          var(--sb-text-muted);
    --todo-card-meta-color:          var(--sb-text-secondary);
    --todo-card-date-color:          var(--sb-text-muted);
    --todo-card-date-overdue-color:  var(--sb-danger);
    --todo-card-chip-default-bg:     #f0f0f0;
    --todo-card-chip-default-text:   var(--sb-text-primary);
    --todo-card-chip-vehicles-bg:    #cfe2ff;
    --todo-card-chip-vehicles-text:  #084298;
    --todo-card-chip-bus-staff-bg:   #e8d5f5;
    --todo-card-chip-bus-staff-text: #6f42c1;
    --todo-card-chip-parents-bg:     #f8d7e8;
    --todo-card-chip-parents-text:   #d63384;
    --todo-card-chip-vendors-bg:     #ffe5cc;
    --todo-card-chip-vendors-text:   #c45d00;
    --todo-card-chip-overdue-bg:     var(--sb-danger-bg);
    --todo-card-chip-overdue-text:   var(--sb-danger-text);
    --todo-status-todo-bg:           #e9ecef;
    --todo-status-todo-text:         var(--sb-text-primary);
    --todo-status-progress-bg:       #cfe2ff;
    --todo-status-progress-text:     #084298;
    --todo-status-review-bg:         #fff3cd;
    --todo-status-review-text:       #856404;
    --todo-status-done-bg:           var(--sb-success-bg);
    --todo-status-done-text:         var(--sb-success-text);
    --todo-status-holiday-bg:        linear-gradient(135deg, var(--sb-danger-bg), var(--sb-warning-bg));
    --todo-status-holiday-text:      var(--sb-danger);
    --todo-status-holiday-solid-bg:  var(--sb-danger-bg);
    --todo-status-holiday-solid-text: var(--sb-danger-text);
    --todo-status-holiday-border:    var(--sb-danger);
    --todo-cal-day-hover-ring:       rgba(13, 110, 253, 0.2);
    --todo-holiday-day-bg:           var(--sb-warning-bg);
    --todo-holiday-day-hover-bg:     var(--sb-warning-bg);
    --todo-holiday-day-hover-ring:   rgba(210, 153, 34, 0.35);
    --todo-holiday-day-today-bg:     linear-gradient(135deg, var(--sb-primary-light) 60%, var(--sb-warning-bg) 100%);
    --todo-file-drop-border:         #dee2e6;
    --todo-file-drop-bg:             transparent;
    --todo-file-placeholder-color:   var(--sb-text-muted);
    --todo-file-selected-bg:         var(--sb-input-bg-muted);
    --todo-file-selected-border:     var(--sb-border);
    --todo-file-selected-text:       var(--sb-text-dark);
    --todo-primary-link-border:      #cfe2ff;
    --todo-primary-link-hover-bg:    #cfe2ff;
    --todo-primary-link-hover-shadow: 0 2px 6px rgba(13, 110, 253, 0.12);
    --todo-hover-danger-bg:          #fce4e6;
    --todo-surface-subtle-bg:        #f0f0f0;
    --todo-detail-desc-color:        var(--sb-text-primary);
    --todo-detail-desc-bg:           var(--sb-input-bg-muted);
    --todo-detail-desc-border:       var(--sb-border);
    --todo-detail-label-color:       var(--sb-text-muted);
    --todo-detail-value-color:       var(--sb-text-dark);
    --todo-detail-attachment-border: #f0f0f0;
    --todo-empty-state-color:        var(--sb-text-muted);

    /* ── Navbar ── */
    --sb-navbar-bg:          #ffffff;
    --sb-navbar-border:      #dee2e6;

    /* ── Sidebar ── */
    --sb-sidebar-bg:         #ffffff;
    --sb-sidebar-border:     #dee2e6;
    --sb-sidebar-icon-bg:    #DAE8FF;
    --sb-sidebar-icon-active-bg: #5B8DEF;
    --sb-sidebar-hover:      #e7f1ff;
    --sb-sidebar-active:     #e7f1ff;

    /* ── Card ── */
    --sb-card-bg:            #ffffff;
    --sb-card-border:        #e9ecef;

    /* ── Popover / Dropdown ── */
    --sb-popover-bg:         #ffffff;
    --sb-popover-border:     #f0f0f0;

    /* ── Input / Forms ── */
    --sb-input-bg:           #ffffff;
    --sb-input-border:       #dee2e6;
    --sb-input-text:         #212529;
    --sb-input-placeholder:  #adb5bd;
    --sb-input-bg-muted:     #f5f6f8;

    /* ── Table ── */
    --sb-table-header-bg:    #fafbfc;
    --sb-table-border:       #e9ecef;
    --sb-table-row-hover:    #f0f4ff;
    --sb-table-row-active:   #e8f0fe;
    --sb-table-row-stripe:   #f0f2f5;

    /* ── Shadows ── */
    --sb-shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.04);
    --sb-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.06);
    --sb-shadow-md:          0 4px 12px rgba(0, 0, 0, 0.08);
    --sb-shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.12);
    --sb-shadow-popover:     0 4px 20px rgba(0, 0, 0, 0.12);

    /* ── Overlay ── */
    --sb-overlay-bg:         rgba(0, 0, 0, 0.4);

    /* ── Scrollbar ── */
    --sb-scrollbar-thumb:    rgba(0, 0, 0, 0.3);
    --sb-scrollbar-track:    transparent;

    /* ── Chat ── */
    --sb-chat-bg:            #f0f2f5;
    --sb-chat-mine:          #d9f2d9;
    --sb-chat-other:         #ffffff;
    --sb-chat-date-bg:       #e2e8f0;
    --sb-chat-date-text:     #64748b;

    /* ── Graphs / Charts ── */
    --sb-graph-bg:           #ffffff;
    --sb-graph-border:       #e0e0e0;
    --sb-graph-grid:         #e5e5e5;
    --sb-graph-text:         #666666;

    /* ── Login ── */
    --sb-login-bg:           #f8f9fa;
    --sb-login-panel-bg:     #ffffff;

    /* ── Misc ── */
    --sb-link-color:         #000000;
    --sb-badge-blue-bg:      #e8f0fe;
    --sb-badge-blue-text:    #1a73e8;
    --sb-code-bg:            #f5f5f5;
    --sb-dashboard-icon-opacity: 1;
    --sb-transition:         0.3s;

    /* ── Sidebar scrollbar ── */
    --sb-sidebar-scrollbar:  rgba(13, 110, 253, 0.35);
}


/* ══════════════════════════════════════════════
   DARK PALETTE
   Inspired by GitHub's dark-default theme
   ============================================== */
[data-theme="dark"] {
    /* ── Backgrounds ── */
    --sb-bg:                 #0d1117;
    --sb-bg-secondary:       #161b22;
    --sb-bg-tertiary:        #1c2128;

    /* ── Surfaces ── */
    --sb-surface:            #161b22;
    --sb-surface-hover:      #1c2128;
    --sb-surface-active:     #1f2a38;
    --sb-surface-raised:     #1c2128;

    /* ── Text ── */
    --sb-text-primary:       #e6edf3;
    --sb-text-secondary:     #8b949e;
    --sb-text-muted:         #484f58;
    --sb-text-inverse:       #0d1117;
    --sb-text-dark:          #e6edf3;
    --sb-text-body:          #c9d1d9;

    /* ── Borders ── */
    --sb-border:             #30363d;
    --sb-border-light:       #21262d;
    --sb-border-strong:      #3d444d;
    --sb-border-card:        #30363d;

    /* ── Primary / Accent ── */
    --sb-primary:            #58a6ff;
    --sb-primary-hover:      #79b8ff;
    --sb-primary-light:      rgba(56, 139, 253, 0.15);
    --sb-primary-subtle:     rgba(56, 139, 253, 0.1);

    /* ── Status Colors ── */
    --sb-success:            #3fb950;
    --sb-success-bg:         rgba(63, 185, 80, 0.15);
    --sb-success-text:       #3fb950;
    --sb-danger:             #f85149;
    --sb-danger-bg:          rgba(248, 81, 73, 0.15);
    --sb-danger-text:        #f85149;
    --sb-warning:            #d29922;
    --sb-warning-contrast:   #111827;
    --sb-warning-bg:         rgba(210, 153, 34, 0.15);
    --sb-warning-text:       #d29922;
    --sb-info:               #58a6ff;
    --sb-info-bg:            rgba(88, 166, 255, 0.15);
    --sb-info-text:          #58a6ff;
    --sb-danger-bg-subtle:   rgba(248, 81, 73, 0.1);
    --sb-success-bg-subtle:  rgba(63, 185, 80, 0.1);

    /* ── Assign overlay accent ── */
    --sb-assign-accent:      #a78bfa;
    --sb-assign-accent-solid: #7c3aed;
    --sb-assign-accent-lighter: rgba(167, 139, 250, 0.15);
    --sb-assign-accent-light: rgba(167, 139, 250, 0.1);

    /* ── Todo semantic tokens ── */
    --todo-kanban-col-border:        var(--sb-border);
    --todo-col-count-bg:             rgba(13, 17, 23, 0.25);
    --todo-drag-over-bg:             rgba(56, 139, 253, 0.16);
    --todo-card-border:              var(--sb-card-border);
    --todo-card-desc-color:          var(--sb-text-secondary);
    --todo-card-meta-color:          var(--sb-text-secondary);
    --todo-card-date-color:          var(--sb-text-secondary);
    --todo-card-date-overdue-color:  #ff7b72;
    --todo-card-chip-default-bg:     var(--sb-surface-hover);
    --todo-card-chip-default-text:   var(--sb-text-secondary);
    --todo-card-chip-vehicles-bg:    rgba(56, 139, 253, 0.18);
    --todo-card-chip-vehicles-text:  #79b8ff;
    --todo-card-chip-bus-staff-bg:   rgba(139, 92, 246, 0.18);
    --todo-card-chip-bus-staff-text: #b392f0;
    --todo-card-chip-parents-bg:     rgba(214, 51, 132, 0.18);
    --todo-card-chip-parents-text:   #ff9ecb;
    --todo-card-chip-vendors-bg:     rgba(253, 126, 20, 0.18);
    --todo-card-chip-vendors-text:   #ffb77a;
    --todo-card-chip-overdue-bg:     rgba(248, 81, 73, 0.18);
    --todo-card-chip-overdue-text:   #ff7b72;
    --todo-status-todo-bg:           #30363d;
    --todo-status-todo-text:         #c9d1d9;
    --todo-status-progress-bg:       rgba(56, 139, 253, 0.2);
    --todo-status-progress-text:     #58a6ff;
    --todo-status-review-bg:         rgba(210, 153, 34, 0.2);
    --todo-status-review-text:       #d29922;
    --todo-status-done-bg:           rgba(63, 185, 80, 0.2);
    --todo-status-done-text:         #3fb950;
    --todo-status-holiday-bg:        rgba(248, 81, 73, 0.18);
    --todo-status-holiday-text:      #ff7b72;
    --todo-status-holiday-solid-bg:  rgba(248, 81, 73, 0.18);
    --todo-status-holiday-solid-text: #ff7b72;
    --todo-status-holiday-border:    #ff7b72;
    --todo-cal-day-hover-ring:       rgba(56, 139, 253, 0.22);
    --todo-holiday-day-bg:           rgba(210, 153, 34, 0.12);
    --todo-holiday-day-hover-bg:     rgba(210, 153, 34, 0.18);
    --todo-holiday-day-hover-ring:   rgba(210, 153, 34, 0.28);
    --todo-holiday-day-today-bg:     linear-gradient(135deg, rgba(56, 139, 253, 0.2) 60%, rgba(210, 153, 34, 0.14) 100%);
    --todo-file-drop-border:         var(--sb-border);
    --todo-file-drop-bg:             var(--sb-surface);
    --todo-file-placeholder-color:   var(--sb-text-secondary);
    --todo-file-selected-bg:         var(--sb-surface);
    --todo-file-selected-border:     var(--sb-border);
    --todo-file-selected-text:       var(--sb-text-primary);
    --todo-primary-link-border:      rgba(56, 139, 253, 0.28);
    --todo-primary-link-hover-bg:    rgba(56, 139, 253, 0.24);
    --todo-primary-link-hover-shadow: 0 2px 6px rgba(56, 139, 253, 0.16);
    --todo-hover-danger-bg:          rgba(248, 81, 73, 0.16);
    --todo-surface-subtle-bg:        var(--sb-surface-hover);
    --todo-detail-desc-color:        var(--sb-text-body);
    --todo-detail-desc-bg:           var(--sb-input-bg-muted);
    --todo-detail-desc-border:       var(--sb-border);
    --todo-detail-label-color:       var(--sb-text-secondary);
    --todo-detail-value-color:       var(--sb-text-primary);
    --todo-detail-attachment-border: var(--sb-border);
    --todo-empty-state-color:        var(--sb-text-secondary);

    /* ── Navbar ── */
    --sb-navbar-bg:          #161b22;
    --sb-navbar-border:      #30363d;

    /* ── Sidebar ── */
    --sb-sidebar-bg:         #0d1117;
    --sb-sidebar-border:     #30363d;
    --sb-sidebar-icon-bg:    rgba(56, 139, 253, 0.15);
    --sb-sidebar-icon-active-bg: #58a6ff;
    --sb-sidebar-hover:      rgba(56, 139, 253, 0.1);
    --sb-sidebar-active:     rgba(56, 139, 253, 0.15);

    /* ── Card ── */
    --sb-card-bg:            #161b22;
    --sb-card-border:        #30363d;

    /* ── Popover / Dropdown ── */
    --sb-popover-bg:         #1c2128;
    --sb-popover-border:     #30363d;

    /* ── Input / Forms ── */
    --sb-input-bg:           #0d1117;
    --sb-input-border:       #30363d;
    --sb-input-text:         #e6edf3;
    --sb-input-placeholder:  #484f58;
    --sb-input-bg-muted:     #161b22;

    /* ── Table ── */
    --sb-table-header-bg:    #161b22;
    --sb-table-border:       #30363d;
    --sb-table-row-hover:    #1c2128;
    --sb-table-row-active:   #1f2a38;
    --sb-table-row-stripe:   #161b22;

    /* ── Shadows (subtle on dark) ── */
    --sb-shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.2);
    --sb-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
    --sb-shadow-md:          0 4px 12px rgba(0, 0, 0, 0.35);
    --sb-shadow-lg:          0 8px 24px rgba(0, 0, 0, 0.4);
    --sb-shadow-popover:     0 4px 20px rgba(0, 0, 0, 0.5);

    /* ── Overlay ── */
    --sb-overlay-bg:         rgba(0, 0, 0, 0.6);

    /* ── Scrollbar ── */
    --sb-scrollbar-thumb:    rgba(139, 148, 158, 0.35);
    --sb-scrollbar-track:    transparent;

    /* ── Chat ── */
    --sb-chat-bg:            #0d1117;
    --sb-chat-mine:          #1a3a2a;
    --sb-chat-other:         #1c2128;
    --sb-chat-date-bg:       #21262d;
    --sb-chat-date-text:     #8b949e;

    /* ── Graphs / Charts ── */
    --sb-graph-bg:           #161b22;
    --sb-graph-border:       #30363d;
    --sb-graph-grid:         #30363d;
    --sb-graph-text:         #8b949e;

    /* ── Login ── */
    --sb-login-bg:           #0d1117;
    --sb-login-panel-bg:     #161b22;

    /* ── Misc ── */
    --sb-link-color:         #e6edf3;
    --sb-badge-blue-bg:      rgba(56, 139, 253, 0.15);
    --sb-badge-blue-text:    #58a6ff;
    --sb-code-bg:            #161b22;
    --sb-dashboard-icon-opacity: 0.85;

    /* ── Sidebar scrollbar ── */
    --sb-sidebar-scrollbar:  rgba(88, 166, 255, 0.35);
}


/* ══════════════════════════════════════════════
   THEME TRANSITION
   Smooth color transition when switching themes
   ============================================== */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                fill 0.25s ease !important;
}


/* ══════════════════════════════════════════════
   DARK THEME — GLOBAL OVERRIDES
   Catch-all for elements not yet tokenized
   ============================================== */

/* ── Body ── */
[data-theme="dark"] body {
    background-color: var(--sb-bg);
    color: var(--sb-text-primary);
}

/* ── Links ── */
[data-theme="dark"] a {
    color: var(--sb-link-color);
}

/* Keep navbar icon buttons consistent in dark mode (CCTV uses anchor tag) */
[data-theme="dark"] .navbar-icon-btn {
    color: var(--sb-text-secondary);
}

[data-theme="dark"] .navbar-icon-btn:hover,
[data-theme="dark"] .navbar-popover-wrap.open .navbar-icon-btn {
    color: var(--sb-primary);
}

/* ── Images — prevent glare ── */
[data-theme="dark"] img {
    opacity: 0.92;
}
[data-theme="dark"] img:hover {
    opacity: 1;
}

/* ── Scrollbars ── */
[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background-color: var(--sb-scrollbar-thumb);
}
[data-theme="dark"] *::-webkit-scrollbar-track {
    background: var(--sb-scrollbar-track);
}

/* ── Bootstrap Overrides ── */
[data-theme="dark"] .form-control {
    background-color: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--sb-input-bg);
    border-color: var(--sb-primary);
    color: var(--sb-input-text);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--sb-input-placeholder);
}

[data-theme="dark"] .modal-content {
    background-color: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--sb-border);
    background: var(--sb-surface-raised);
}
[data-theme="dark"] .modal-header .modal-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .modal-header .close {
    color: var(--sb-text-secondary);
    text-shadow: none;
}
[data-theme="dark"] .modal-header .close:hover {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .modal-footer {
    border-top-color: var(--sb-border);
    background: var(--sb-surface-raised);
}
[data-theme="dark"] .modal-body {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--sb-surface-hover);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}

[data-theme="dark"] .btn-primary {
    background-color: var(--sb-primary);
    border-color: var(--sb-primary);
}

[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}

[data-theme="dark"] select option {
    background-color: var(--sb-surface);
    color: var(--sb-text-primary);
}

/* ── Bootstrap Tables ── */
[data-theme="dark"] .table {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .table thead th {
    background-color: var(--sb-table-header-bg);
    border-color: var(--sb-table-border);
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--sb-border-light);
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--sb-table-row-stripe);
}
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--sb-table-row-hover);
}

/* ── Bootstrap Cards ── */
[data-theme="dark"] .card {
    background-color: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}

/* ── Bootstrap nav-tabs ── */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--sb-surface);
    border-color: var(--sb-border) var(--sb-border) var(--sb-surface);
    color: var(--sb-text-primary);
}

/* ── Bootstrap dropdown ── */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--sb-popover-bg);
    border-color: var(--sb-popover-border);
}
[data-theme="dark"] .dropdown-item {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--sb-surface-hover);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .dropdown-item-text {
    color: var(--sb-text-secondary);
}

/* ── hr ── */
[data-theme="dark"] hr {
    border-color: var(--sb-border);
}

/* ── ApexCharts ── */
[data-theme="dark"] .apexcharts-canvas {
    background: transparent !important;
}
[data-theme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-title-text {
    fill: var(--sb-text-secondary) !important;
}
[data-theme="dark"] .apexcharts-gridline {
    stroke: var(--sb-graph-grid) !important;
}
[data-theme="dark"] .apexcharts-xaxis-label,
[data-theme="dark"] .apexcharts-yaxis-label {
    fill: var(--sb-text-muted) !important;
}
[data-theme="dark"] .apexcharts-legend-text {
    color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] .apexcharts-tooltip {
    background: var(--sb-popover-bg) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-title {
    background: var(--sb-surface-raised) !important;
    border-bottom-color: var(--sb-border) !important;
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .apexcharts-xaxistooltip,
[data-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--sb-popover-bg) !important;
    border-color: var(--sb-border) !important;
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .apexcharts-xaxistooltip::before,
[data-theme="dark"] .apexcharts-xaxistooltip::after {
    border-bottom-color: var(--sb-popover-bg) !important;
}

/* ── Leaflet / Maps ── */
[data-theme="dark"] .leaflet-control-zoom a {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text-primary) !important;
    border-color: var(--sb-border) !important;
}
[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: var(--sb-popover-bg) !important;
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .leaflet-popup-tip {
    background: var(--sb-popover-bg) !important;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — COMPONENT-SPECIFIC OVERRIDES
   Organized by component / CSS file
   ══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   base.css — Layout & Core Components
   ───────────────────────────────────── */

/* Main content area */
[data-theme="dark"] .main_container {
    background-color: var(--sb-bg);
}

[data-theme="dark"] .sidebar-logo img {
    opacity: 1 !important;
}

[data-theme="dark"] .sidebar-logo .sidebar-logo-light {
    display: none;
}

[data-theme="dark"] .sidebar-logo .sidebar-logo-dark {
    display: block;
}

/* Content wrapper */
[data-theme="dark"] .content_container {
    background-color: var(--sb-bg);
}

/* Page titles & headings */
[data-theme="dark"] .page-title,
[data-theme="dark"] .ele-title {
    color: var(--sb-text-primary);
}

/* Stat cards on various pages */
[data-theme="dark"] .stat-value {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .stat-label {
    color: var(--sb-text-secondary);
}

/* Search bar */
[data-theme="dark"] .search-bar,
[data-theme="dark"] input.search-input {
    background-color: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] #suggestions {
    background: var(--sb-popover-bg);
    border-color: var(--sb-border);
}
[data-theme="dark"] #suggestions li {
    color: var(--sb-text-primary);
}
[data-theme="dark"] #suggestions li:hover {
    background-color: var(--sb-surface-hover);
}

/* List-detail wrapper */
[data-theme="dark"] .list-detail-wrapper {
    background-color: var(--sb-bg);
}
[data-theme="dark"] .main_list_container {
    background-color: var(--sb-bg);
}
[data-theme="dark"] .element_details_container {
    background-color: var(--sb-bg);
}
[data-theme="dark"] .detail-cont {
    background-color: var(--sb-card-bg);
}

/* Cards & panels */
[data-theme="dark"] .list-card,
[data-theme="dark"] .item-card {
    background-color: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .list-card:hover,
[data-theme="dark"] .item-card:hover {
    background-color: var(--sb-surface-hover);
}

/* Navbar popovers (already covered above, but being thorough) */
[data-theme="dark"] .navbar-popover {
    background: var(--sb-popover-bg);
    box-shadow: var(--sb-shadow-popover);
}
[data-theme="dark"] .navbar-popover-header {
    border-bottom-color: var(--sb-popover-border);
}
[data-theme="dark"] .navbar-popover-header strong {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .navbar-popover-footer {
    border-top-color: var(--sb-popover-border);
}
[data-theme="dark"] .navbar-popover-divider {
    background: var(--sb-popover-border);
}
[data-theme="dark"] .navbar-popover-empty {
    color: var(--sb-text-muted);
}

/* Notification items */
[data-theme="dark"] .navbar-notif-item {
    border-bottom-color: var(--sb-border-light);
}
[data-theme="dark"] .navbar-notif-item:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .navbar-notif-item .notif-text {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .navbar-notif-item .notif-time {
    color: var(--sb-text-muted);
}

/* Support popover */
[data-theme="dark"] .navbar-support-row {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .navbar-support-row:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .navbar-support-icon {
    background: var(--sb-surface-hover);
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .navbar-support-info span {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .navbar-support-info small {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .navbar-support-mini-link {
    background: var(--sb-surface-hover);
    border-color: var(--sb-border);
}
[data-theme="dark"] .navbar-support-mini-link:hover {
    background: var(--sb-surface-active);
}
[data-theme="dark"] .navbar-support-mini-link small {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .navbar-support-badge {
    background: var(--sb-primary-light);
    color: var(--sb-primary);
}

/* Broadcast popover */
[data-theme="dark"] .broadcast-option-btn {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .broadcast-option-btn:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .broadcast-option-left span {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .broadcast-input {
    background-color: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}

/* Profile popover */
[data-theme="dark"] .navbar-profile-header {
    background: var(--sb-surface-raised);
}
[data-theme="dark"] .navbar-dropdown-title span {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .navbar-profile-menu-item {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .navbar-profile-menu-item:hover {
    background: var(--sb-surface-hover);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .navbar-profile-menu-item i {
    color: var(--sb-text-secondary);
}

/* Logout modal */
[data-theme="dark"] .pay-result-box {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
}

[data-theme="dark"] .pay-result-title {
    color: var(--sb-text-high);
}

/* Dark mode for manual pay modal V2 */
[data-theme="dark"] .tight-fee-row {
    color: #94a3b8;
}

[data-theme="dark"] .tight-fee-row .val {
    color: #e2e8f0;
}

[data-theme="dark"] .tight-fee-total {
    border-top-color: #334155;
    color: #f8fafc;
}

[data-theme="dark"] .tight-fee-total .val {
    color: #60a5fa;
}

[data-theme="dark"] .modal-input-tight {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .modal-input-tight:focus {
    border-color: #3b82f6;
}

[data-theme="dark"] .logout-modal-card {
    background: var(--sb-surface);
    border-color: var(--sb-border);
}
[data-theme="dark"] .logout-modal-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .logout-modal-msg {
    color: var(--sb-text-secondary);
}

/* Page toolbar */
[data-theme="dark"] .page-toolbar {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .toolbar-btn {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .toolbar-btn:hover {
    background: var(--sb-surface-hover);
}

/* Data table wrapper */
[data-theme="dark"] .data-table-wrapper {
    background: var(--sb-card-bg);
    box-shadow: var(--sb-shadow-sm);
}
[data-theme="dark"] .data-table thead th {
    background: var(--sb-table-header-bg) !important;
    color: var(--sb-text-secondary) !important;
    border-bottom-color: var(--sb-table-border) !important;
}
[data-theme="dark"] .data-table tbody tr {
    border-bottom-color: var(--sb-border-light);
}
[data-theme="dark"] .data-table tbody tr:hover {
    background: var(--sb-table-row-hover);
}
[data-theme="dark"] .data-table tbody tr.active-row {
    background: var(--sb-table-row-active);
}
[data-theme="dark"] .data-table tbody td {
    color: var(--sb-text-body) !important;
}

/* Pagination */
[data-theme="dark"] .pagination-container {
    background: var(--sb-card-bg);
    border-top-color: var(--sb-border);
}
[data-theme="dark"] .page-btn {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .page-btn:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .page-btn.active {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
    color: var(--sb-text-inverse);
}


/* ─────────────────────────────────────
   Misc — Remaining catch-all overrides
   ───────────────────────────────────── */

/* Login page */
[data-theme="dark"] .login_form_container {
    background: var(--sb-login-panel-bg);
    border-color: var(--sb-border);
}
[data-theme="dark"] .login_form h2,
[data-theme="dark"] .login_form h3 {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .login-contact-msg {
    color: var(--sb-text-secondary);
}

/* 404 page */
[data-theme="dark"] .error-page {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .error-page h1 {
    color: var(--sb-primary);
}

/* Inline style overrides — catch background: white/fff from inline */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color:#ffffff"] {
    background-color: var(--sb-card-bg) !important;
}

[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"] {
    color: var(--sb-text-primary) !important;
}

[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#212529"] {
    color: var(--sb-text-primary) !important;
}

[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#6c757d"] {
    color: var(--sb-text-secondary) !important;
}

[data-theme="dark"] [style*="border-color: #dee2e6"],
[data-theme="dark"] [style*="border: 1px solid #dee2e6"],
[data-theme="dark"] [style*="border: 1px solid #e9ecef"],
[data-theme="dark"] [style*="border: 1px solid #eee"] {
    border-color: var(--sb-border) !important;
}

/* White background cards — common pattern */
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"] {
    background-color: var(--sb-bg-secondary) !important;
}

[data-theme="dark"] [style*="background: #f5f6f8"],
[data-theme="dark"] [style*="background:#f5f6f8"],
[data-theme="dark"] [style*="background-color: #f5f6f8"],
[data-theme="dark"] [style*="background-color:#f5f6f8"] {
    background-color: var(--sb-bg) !important;
}

/* Fix labels */
[data-theme="dark"] label {
    color: var(--sb-text-primary);
}

/* Utility classes */
[data-theme="dark"] .text-dark {
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] .bg-white {
    background-color: var(--sb-surface) !important;
}
[data-theme="dark"] .bg-light {
    background-color: var(--sb-bg-secondary) !important;
}
[data-theme="dark"] .border {
    border-color: var(--sb-border) !important;
}
[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--sb-border) !important;
}
[data-theme="dark"] .border-top {
    border-top-color: var(--sb-border) !important;
}
[data-theme="dark"] .shadow-sm {
    box-shadow: var(--sb-shadow-sm) !important;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — OVERLAY CARD (Students, Buses, Drivers etc)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .overlay-card {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-lg);
    border: 1px solid var(--sb-border);
}
[data-theme="dark"] .overlay-card-header {
    background: var(--sb-surface-raised);
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .overlay-card-header h3 {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .overlay-card-close {
    color: var(--sb-text-muted);
}
[data-theme="dark"] .overlay-card-close:hover {
    color: var(--sb-text-primary);
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .overlay-card-body {
    color: var(--sb-text-primary);
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
[data-theme="dark"] .overlay-card-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
}
[data-theme="dark"] .overlay-card-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
}
[data-theme="dark"] .overlay-form > .form-actions {
    background: var(--sb-surface, #1e1e1e);
    border-top-color: var(--sb-border, #333);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .overlay-form > button[type="submit"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .overlay-detail-item .overlay-label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .overlay-detail-item .overlay-value {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .overlay-form label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .overlay-form .form-control {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] .overlay-form .form-control:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}
[data-theme="dark"] .overlay-form .form-actions {
    border-top-color: var(--sb-border);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — FILTER DROPDOWN
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .filter-dropdown {
    background: var(--sb-popover-bg);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-popover);
}
[data-theme="dark"] .filter-dropdown label {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .filter-group label {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .checkbox-group {
    border-color: var(--sb-border);
    background: var(--sb-input-bg);
}
[data-theme="dark"] .checkbox-group label {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .apply-btn {
    background: var(--sb-primary);
    color: var(--sb-text-inverse);
}
[data-theme="dark"] .filter-backdrop {
    background: var(--sb-overlay-bg);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — TOOLBAR (Search, Add, Filter buttons)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .toolbar-search input {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] .toolbar-search input:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
[data-theme="dark"] .toolbar-search input::placeholder {
    color: var(--sb-input-placeholder);
}
[data-theme="dark"] .toolbar-search .suggestions {
    background: var(--sb-popover-bg);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-popover);
}
[data-theme="dark"] .toolbar-search .suggestions li {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .toolbar-search .suggestions li:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .toolbar-btn-secondary {
    background: var(--sb-surface-hover);
    color: var(--sb-text-primary);
    border: 1px solid var(--sb-border);
}
[data-theme="dark"] .toolbar-btn-secondary:hover {
    background: var(--sb-surface-active);
}
[data-theme="dark"] .toolbar-btn-primary {
    background: var(--sb-primary);
    color: var(--sb-text-inverse);
}
[data-theme="dark"] .toolbar-btn-primary:hover {
    background: var(--sb-primary-hover);
}
[data-theme="dark"] .section-title {
    color: var(--sb-text-primary);
}


/* Google Maps InfoWindow dark style */
[data-theme="dark"] .gm-style .gm-style-iw-c {
    background: var(--sb-popover-bg) !important;
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .gm-style .gm-style-iw-d {
    color: var(--sb-text-primary) !important;
}
[data-theme="dark"] .gm-style .gm-style-iw-tc::after {
    background: var(--sb-popover-bg) !important;
}
[data-theme="dark"] .gm-style .gm-style-iw-t::after {
    background: var(--sb-popover-bg) !important;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — ASSIGN OVERLAY (Vehicles page)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] #assignOverlay {
    background: var(--sb-surface);
    border-color: var(--sb-border);
}
[data-theme="dark"] .assign-tabs {
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .assign-tab {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .assign-tab:hover {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .assign-tab.active {
    color: var(--sb-assign-accent);
    border-bottom-color: var(--sb-assign-accent);
}
[data-theme="dark"] .assign-tab-count {
    background: var(--sb-assign-accent-lighter);
    color: var(--sb-assign-accent);
}
[data-theme="dark"] .assign-tab.active .assign-tab-count {
    background: var(--sb-assign-accent-solid);
    color: #fff;
}
[data-theme="dark"] .assign-list {
    border-color: var(--sb-border);
}
[data-theme="dark"] .assign-item {
    border-bottom-color: var(--sb-border-light);
}
[data-theme="dark"] .assign-item:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .assign-item.checked {
    background: var(--sb-assign-accent-light);
}
[data-theme="dark"] .assign-item-name {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .assign-item-meta {
    color: var(--sb-text-secondary);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — SHARE LIVE TRACKING MODAL
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .share-modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .share-modal {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .share-modal-header {
    background: var(--sb-surface-raised);
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .share-modal-header h4 {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .share-modal-header h4 i {
    background: var(--sb-primary-light);
    color: var(--sb-primary);
}
[data-theme="dark"] .share-modal-close {
    color: var(--sb-text-muted);
}
[data-theme="dark"] .share-modal-close:hover {
    color: var(--sb-text-primary);
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .share-bus-badge {
    background: var(--sb-bg-secondary);
    border-color: var(--sb-border);
}
[data-theme="dark"] .share-bus-icon {
    background: var(--sb-primary);
}
[data-theme="dark"] .share-bus-number {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .share-bus-label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .share-field-label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .share-expiry-pill {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-body);
}
[data-theme="dark"] .share-expiry-pill:hover {
    border-color: var(--sb-primary);
    color: var(--sb-primary);
    background: var(--sb-primary-light);
}
[data-theme="dark"] .share-expiry-pill.active {
    background: var(--sb-primary);
    color: #fff;
    border-color: var(--sb-primary);
}
[data-theme="dark"] .share-custom-input {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] .share-custom-input:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}
[data-theme="dark"] .share-custom-unit {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .share-custom-toggle {
    border-color: var(--sb-border);
}
[data-theme="dark"] .share-custom-mode {
    background: var(--sb-surface);
    color: var(--sb-text-secondary);
    border-color: var(--sb-border);
}
[data-theme="dark"] .share-custom-mode.active {
    background: var(--sb-primary);
    color: #fff;
}
[data-theme="dark"] .share-custom-datetime {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
    color-scheme: dark;
}
[data-theme="dark"] .share-generate-btn {
    background: var(--sb-primary);
}
[data-theme="dark"] .share-generate-btn:hover {
    background: var(--sb-primary-hover);
}
[data-theme="dark"] .share-result-divider {
    background: var(--sb-border);
}
[data-theme="dark"] .share-link-box {
    border-color: var(--sb-border);
    background: var(--sb-bg-secondary);
}
[data-theme="dark"] .share-link-input {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .share-copy-btn {
    background: var(--sb-primary);
}
[data-theme="dark"] .share-copy-btn:hover {
    background: var(--sb-primary-hover);
}
[data-theme="dark"] .share-copy-btn.copied {
    background: var(--sb-success);
}
[data-theme="dark"] .share-meta-row {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .share-notice {
    background: var(--sb-warning-bg);
    color: var(--sb-warning-text);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — ROUTE BADGES (Students/Routes table column)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .route-tag,
[data-theme="dark"] .route-pill,
[data-theme="dark"] [class*="route-badge"] {
    background: var(--sb-badge-blue-bg) !important;
    color: var(--sb-badge-blue-text) !important;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — APP CARDS (Download Apps page)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .app-card {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .app-card:hover {
    box-shadow: var(--sb-shadow-lg);
}
[data-theme="dark"] .app-card-header--blue {
    background: linear-gradient(135deg, rgba(56,139,253,0.15) 0%, rgba(56,139,253,0.08) 100%);
}
[data-theme="dark"] .app-card-header--indigo {
    background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(139,92,246,0.08) 100%);
}
[data-theme="dark"] .app-card-header--teal {
    background: linear-gradient(135deg, rgba(63,185,80,0.15) 0%, rgba(63,185,80,0.08) 100%);
}
[data-theme="dark"] .app-card-icon {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-sm);
}
[data-theme="dark"] .app-card-header--teal .app-card-icon--symbol i {
    color: #2dd4bf;
}
[data-theme="dark"] .app-card-header--indigo .app-card-icon--symbol i {
    color: #a78bfa;
}
[data-theme="dark"] .app-card-header--blue .app-card-icon--symbol i {
    color: #60a5fa;
}
[data-theme="dark"] .app-card-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .app-card-desc {
    color: var(--sb-text-secondary);
}

/* CCTV apps specific dark adjustments */
[data-theme="dark"] .cctv-empty-note {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .cctv-inline-badge .store-badge {
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — QR MODAL
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .qr-modal {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-lg);
}
[data-theme="dark"] .qr-modal-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .qr-modal-close {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .qr-modal-close:hover {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .qr-modal-hint {
    color: var(--sb-text-secondary);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — LOGOUT MODAL
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .logout-modal-content {
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow-lg);
}
[data-theme="dark"] .logout-modal-close {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .logout-modal-close:hover {
    color: var(--sb-text-primary);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — ROUTE PAGES (edit-route, edit-path, route-detail)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .route-info-card,
[data-theme="dark"] .route-detail-card {
    background: var(--sb-card-bg);
    border: 1px solid var(--sb-card-border);
}
[data-theme="dark"] .route-header {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .route-meta {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .stop-item {
    background: var(--sb-surface);
    border-color: var(--sb-border-light);
}
[data-theme="dark"] .stop-item:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .stop-name {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .stop-address {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .stop-time {
    color: var(--sb-text-muted);
}
[data-theme="dark"] .route-map-wrap {
    border-color: var(--sb-border);
}

[data-theme="dark"] .route-action-card {
    background: var(--sb-card-bg);
    border: 1px solid var(--sb-card-border);
}

[data-theme="dark"] .route-action-header h4,
[data-theme="dark"] .route-detail-title h2,
[data-theme="dark"] .route-stops-header h4,
[data-theme="dark"] .edit-route-title {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .back-btn {
    color: var(--sb-primary) !important;
}

[data-theme="dark"] .back-btn:hover {
    background: var(--sb-primary-subtle) !important;
    color: var(--sb-primary) !important;
}

[data-theme="dark"] .create-route-form .form-labels,
[data-theme="dark"] .edit-route-form .form-labels,
[data-theme="dark"] .stop-name-input,
[data-theme="dark"] .route-info-item .info-value,
[data-theme="dark"] .stop-left span,
[data-theme="dark"] .stop-student-link {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .route-info-item,
[data-theme="dark"] .edit-route-form,
[data-theme="dark"] .stop-student-item {
    background: var(--sb-surface);
    border-color: var(--sb-border);
}

[data-theme="dark"] .route-info-item,
[data-theme="dark"] .edit-route-form {
    border: 1px solid var(--sb-border);
}

[data-theme="dark"] .route-info-item .info-label,
[data-theme="dark"] .route-stop-meta,
[data-theme="dark"] .stop-students-toggle,
[data-theme="dark"] .stop-student-empty,
[data-theme="dark"] .route-no-stops,
[data-theme="dark"] .route-search-empty {
    color: var(--sb-text-secondary);
}

[data-theme="dark"] .route-stops-header {
    border-bottom-color: var(--sb-border);
}

[data-theme="dark"] .stop-item {
    border-bottom-color: var(--sb-border-light);
}

[data-theme="dark"] .stop-edit-link {
    color: var(--sb-primary);
}

[data-theme="dark"] .stop-student-link {
    text-decoration: none;
}

[data-theme="dark"] .stop-student-item {
    border-bottom-color: var(--sb-border-light);
}

[data-theme="dark"] .stop-student-item:hover,
[data-theme="dark"] .stop-student-link:hover {
    background: var(--sb-surface-active);
}

[data-theme="dark"] .create-route-form .form-control,
[data-theme="dark"] .edit-route-form .form-control,
[data-theme="dark"] #student-search,
[data-theme="dark"] #students-checkboxes.form-control {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}

[data-theme="dark"] .create-route-form .form-control:focus,
[data-theme="dark"] .edit-route-form .form-control:focus,
[data-theme="dark"] #student-search:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

[data-theme="dark"] #students-checkboxes .checkbox-container label {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .error-msg {
    background: var(--sb-danger-bg);
    color: var(--sb-danger);
    border: 1px solid rgba(248, 81, 73, 0.28);
}

[data-theme="dark"] .route-iw-title {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .route-iw-meta {
    color: var(--sb-text-secondary);
}

[data-theme="dark"] .route-no-stops-icon {
    color: var(--sb-text-secondary);
}

[data-theme="dark"] .student-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
}

[data-theme="dark"] .veh-std-title,
[data-theme="dark"] .veh-std-total,
[data-theme="dark"] .veh-student-name {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .veh-student-cls {
    color: var(--sb-text-secondary);
}

/* Path editing UI */
[data-theme="dark"] .path-sidebar {
    background: var(--sb-surface);
    border-right-color: var(--sb-border);
}
[data-theme="dark"] .path-sidebar-header {
    color: var(--sb-text-primary);
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .waypoint-item {
    background: var(--sb-surface);
    border-color: var(--sb-border-light);
}
[data-theme="dark"] .waypoint-item:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .waypoint-label {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .waypoint-meta {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .waypoint-input {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — ROUTE PLANNER (Standalone create_route_manually)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] body.route-planner-page {
    background: var(--sb-bg);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .route-planner-card {
    background: var(--sb-card-bg);
    border: 1px solid var(--sb-card-border);
    box-shadow: var(--sb-shadow-lg);
}
[data-theme="dark"] .route-planner-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] #routePlannerForm label,
[data-theme="dark"] #route-details p {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] #route-details strong {
    color: var(--sb-text-primary);
}
[data-theme="dark"] #routeSelect {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] #routeSelect:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
[data-theme="dark"] #stopList > div {
    background: var(--sb-surface-hover) !important;
    border: 1px solid var(--sb-card-border);
}
[data-theme="dark"] .stop-name,
[data-theme="dark"] .stop-co,
[data-theme="dark"] .date-time {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .dragging {
    background-color: var(--sb-border-light);
}
[data-theme="dark"] .route-planner-page .drag-over {
    border-color: var(--sb-primary) !important;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — DRIVER / ATTENDANT PAGES
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .driver-row:hover,
[data-theme="dark"] .attendant-row:hover {
    background: var(--sb-table-row-hover);
}
[data-theme="dark"] .driver-row.active-row,
[data-theme="dark"] .attendant-row.active-row {
    background: var(--sb-table-row-active);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — FEE PAGES
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .fee-card {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .fee-summary-card {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .fee-stat-value {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .fee-stat-label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .fee-receipt-card {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .fee-tabs {
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .fee-tab-btn {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .fee-tab-btn:hover,
[data-theme="dark"] .fee-tab-btn.active {
    color: var(--sb-primary);
    border-bottom-color: var(--sb-primary);
}
[data-theme="dark"] .fee-exp-btn {
    background: var(--sb-surface);
    border-color: var(--sb-border);
}
[data-theme="dark"] .fee-exp-btn-pdf {
    color: var(--sb-danger);
    border-color: rgba(248,81,73,0.3);
}
[data-theme="dark"] .fee-exp-btn-pdf:hover {
    background: var(--sb-danger-bg-subtle);
}
[data-theme="dark"] .fee-exp-btn-excel {
    color: var(--sb-success);
    border-color: rgba(63,185,80,0.3);
}
[data-theme="dark"] .fee-exp-btn-excel:hover {
    background: var(--sb-success-bg-subtle);
}
[data-theme="dark"] .fee-flt-btn {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .fee-flt-btn:hover,
[data-theme="dark"] .fee-flt-btn.active {
    border-color: var(--sb-primary);
    color: var(--sb-primary);
    background: var(--sb-primary-light);
}
[data-theme="dark"] .fee-flt-dropdown {
    background: var(--sb-popover-bg);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-popover);
}
[data-theme="dark"] .fee-flt-header,
[data-theme="dark"] .fee-flt-footer {
    border-color: var(--sb-border);
    background: var(--sb-surface-raised);
}
[data-theme="dark"] .fee-flt-title,
[data-theme="dark"] .fee-flt-label {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .fee-flt-clear {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .fee-flt-clear:hover {
    color: var(--sb-danger);
    background: var(--sb-danger-bg-subtle);
}
[data-theme="dark"] .fee-flt-search,
[data-theme="dark"] .fee-flt-dates input[type="date"] {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
/* Keep date fields and picker icon clearly visible in dark mode */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    /* Force a consistently light icon regardless of browser defaults */
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
[data-theme="dark"] .fee-flt-list {
    border-color: var(--sb-border);
    background: var(--sb-surface);
}
[data-theme="dark"] .fee-flt-check {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .fee-flt-check:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .fee-filter-row input,
[data-theme="dark"] .fee-filter-row select {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] .fee-filter-row input:focus,
[data-theme="dark"] .fee-filter-row select:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 3px rgba(88,166,255,0.15);
}
[data-theme="dark"] .fee-pg-btn {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .fee-pg-btn:hover:not(.active):not(:disabled) {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .fee-pg-info,
[data-theme="dark"] .fee-date-muted,
[data-theme="dark"] .fee-id-mono,
[data-theme="dark"] .fee-empty,
[data-theme="dark"] .fee-due-muted {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .fee-receipt-btn,
[data-theme="dark"] .fee-action-edit {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-primary);
}
[data-theme="dark"] .fee-receipt-btn:hover,
[data-theme="dark"] .fee-action-edit:hover {
    background: var(--sb-surface-hover);
    border-color: var(--sb-primary);
}
[data-theme="dark"] .fee-modal-box,
[data-theme="dark"] .pay-result-box {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .fee-modal-header,
[data-theme="dark"] .sd-history-section {
    border-color: var(--sb-border);
}
[data-theme="dark"] .fee-modal-header h3,
[data-theme="dark"] .sd-name,
[data-theme="dark"] .sd-due-amount,
[data-theme="dark"] .pay-result-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .sd-id,
[data-theme="dark"] .sd-due-label,
[data-theme="dark"] .sd-due-hint,
[data-theme="dark"] .sd-section-title,
[data-theme="dark"] .sd-amount-label,
[data-theme="dark"] .sd-amount-hint,
[data-theme="dark"] .sd-history-date,
[data-theme="dark"] .sd-history-id,
[data-theme="dark"] .pay-result-msg,
[data-theme="dark"] .pay-result-detail,
[data-theme="dark"] .fee-edit-subtitle {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .sd-chip {
    background: var(--sb-surface-hover);
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .sd-chip-primary {
    background: var(--sb-primary-light);
    color: var(--sb-primary);
}
[data-theme="dark"] .sd-due-card,
[data-theme="dark"] .sd-amount-wrapper,
[data-theme="dark"] .fee-edit-radio-group,
[data-theme="dark"] .fee-edit-preview {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .sd-currency {
    background: var(--sb-surface-raised);
    color: var(--sb-text-secondary);
    border-right-color: var(--sb-border);
}
[data-theme="dark"] .sd-amount-input,
[data-theme="dark"] #feeEditOverlay input,
[data-theme="dark"] #feeEditOverlay select,
[data-theme="dark"] #feeEditOverlay textarea {
    background: var(--sb-input-bg);
    color: var(--sb-input-text);
}
[data-theme="dark"] .sd-history-item {
    border-bottom-color: var(--sb-border-light);
}
[data-theme="dark"] .sd-empty {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] #fcReceived {
    color: var(--sb-success) !important;
}
[data-theme="dark"] #fcTotalDue {
    color: var(--sb-danger) !important;
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — BUS HISTORY PAGE
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .history-sidebar {
    background: var(--sb-surface);
    border-right-color: var(--sb-border);
}
[data-theme="dark"] .history-sidebar-header {
    color: var(--sb-text-primary);
    border-bottom-color: var(--sb-border);
}
[data-theme="dark"] .history-date-input {
    background: var(--sb-input-bg);
    border-color: var(--sb-input-border);
    color: var(--sb-input-text);
}
[data-theme="dark"] .history-bus-item {
    color: var(--sb-text-primary);
    border-bottom-color: var(--sb-border-light);
}
[data-theme="dark"] .history-bus-item:hover {
    background: var(--sb-surface-hover);
}
[data-theme="dark"] .history-bus-item.active {
    background: var(--sb-surface-active);
}
[data-theme="dark"] .history-info-bar {
    background: var(--sb-surface);
    border-bottom-color: var(--sb-border);
    color: var(--sb-text-primary);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — CONTACT US PAGE
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .contact-card {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] .contact-title {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .contact-info {
    color: var(--sb-text-secondary);
}


/* ══════════════════════════════════════════════════════════
   DARK THEME — DOCUMENT ROWS (inside overlays)
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] [style*="border-bottom:1px solid #eee"],
[data-theme="dark"] [style*="border-bottom: 1px solid #eee"] {
    border-bottom-color: var(--sb-border) !important;
}

/* Additional inline overrides for common patterns */
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"] {
    color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color: #999"] {
    color: var(--sb-text-muted) !important;
}
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #888"] {
    color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] [style*="color:#1a2233"],
[data-theme="dark"] [style*="color: #1a2233"] {
    color: var(--sb-text-primary) !important;
}
/* Catch-all for any white background panels in dark mode */
[data-theme="dark"] .heading_container {
    color: var(--sb-text-primary);
}

/* RFID Live page filter dropdown */
[data-theme="dark"] .rfid-filter-dropdown {
    background: var(--sb-popover-bg);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-popover);
}
[data-theme="dark"] .rfid-filter-dropdown label {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .rfid-filter-dropdown .rfid-filter-group {
    border-color: var(--sb-border);
}

/* Google Map dark tiles overlay (subtle tint) */
[data-theme="dark"] .tracking-map-area {
    filter: none; /* Don't invert the map */
}

/* Mobile responsive sidebar in dark mode */
@media (max-width: 767px) {
    [data-theme="dark"] .tracking-sidebar:not(.collapsed) {
        background: var(--sb-surface) !important;
        border-right-color: var(--sb-border) !important;
        box-shadow: 2px 0 12px rgba(0,0,0,0.4) !important;
    }
}

/* ══════════════════════════════════════════════════════════
   DARK THEME — MORE SPECIFIC OVERRIDES (Route Badge, Modal, etc.)
   ══════════════════════════════════════════════════════════ */

/* Route badge inside tables */
[data-theme="dark"] .table-route-badge {
    background: var(--sb-badge-blue-bg) !important;
    color: var(--sb-badge-blue-text) !important;
    border-color: rgba(56, 139, 253, 0.2) !important;
}

[data-theme="dark"] .table-route-badge-active {
    background: rgba(63, 185, 80, 0.16) !important;
    color: #3fb950 !important;
    border-color: rgba(63, 185, 80, 0.32) !important;
}

[data-theme="dark"] .table-route-badge-inactive {
    background: rgba(248, 81, 73, 0.16) !important;
    color: #f85149 !important;
    border-color: rgba(248, 81, 73, 0.32) !important;
}

[data-theme="dark"] .table-route-badge:hover {
    background: #388bfd !important;
    color: #fff !important;
}

[data-theme="dark"] .table-route-badge-active:hover {
    background: rgba(63, 185, 80, 0.24) !important;
    color: #56d364 !important;
}

[data-theme="dark"] .table-route-badge-inactive:hover {
    background: rgba(248, 81, 73, 0.24) !important;
    color: #ff7b72 !important;
}

/* Reusable table footer dark theme */
[data-theme="dark"] .table-footer {
    background: var(--sb-card-bg) !important;
    border-top-color: var(--sb-border) !important;
    color: var(--sb-text-secondary) !important;
}
[data-theme="dark"] .table-footer strong {
    color: var(--sb-primary) !important;
}


/* ─────────────────────────────────────
   Broadcast + Notifications Pages
   ───────────────────────────────────── */
[data-theme="dark"] .broadcast-filter-panel {
    --toolbar-bg: var(--sb-surface);
    --toolbar-border: var(--sb-border);
    --toolbar-label: var(--sb-text-secondary);
    --toolbar-heading: var(--sb-text-primary);
    --toolbar-text: var(--sb-text-primary);
    --toolbar-primary: var(--sb-primary);
    --toolbar-primary-soft: rgba(88, 166, 255, 0.15);
    --toolbar-control-bg: var(--sb-input-bg);

    background: linear-gradient(180deg, var(--sb-surface-raised) 0%, var(--sb-surface) 100%);
    border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
}
[data-theme="dark"] .filter-toolbar-chip {
    background: var(--sb-input-bg);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .filter-field .form-control,
[data-theme="dark"] .filter-field .form-select {
    border-color: var(--sb-input-border);
    background: var(--sb-input-bg);
    color: var(--sb-input-text);
}
[data-theme="dark"] .filter-field .form-control:focus,
[data-theme="dark"] .filter-field .form-select:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.18);
}
[data-theme="dark"] .broadcast-summary,
[data-theme="dark"] .broadcast-sent-label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .broadcast-sent-value {
    color: var(--sb-text-primary);
}

[data-theme="dark"] .pagination-wrap .pagination .page-link {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .pagination-wrap .pagination .page-link:hover {
    background: var(--sb-surface-hover);
    color: var(--sb-text-primary);
}
[data-theme="dark"] .pagination-wrap .pagination .page-item.active .page-link {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
    color: var(--sb-text-inverse);
}
[data-theme="dark"] .pagination-wrap .pagination .page-item.disabled .page-link {
    background: var(--sb-surface);
    border-color: var(--sb-border);
    color: var(--sb-text-muted);
}

[data-theme="dark"] .notification-filter-card {
    background: var(--sb-card-bg);
    border-color: var(--sb-card-border);
}
[data-theme="dark"] #notificationsTable .incident-text,
[data-theme="dark"] #notificationsTable .route-text,
[data-theme="dark"] #notificationsTable .table-message {
    color: var(--sb-text-primary);
}
[data-theme="dark"] .notification-filter-card label {
    color: var(--sb-text-secondary);
}
[data-theme="dark"] .notification-filter-card .btn-outline-secondary {
    color: var(--sb-text-primary);
    border-color: var(--sb-border);
    background: var(--sb-surface);
}
[data-theme="dark"] .notification-filter-card .btn-outline-secondary:hover {
    background: var(--sb-surface-hover);
    border-color: var(--sb-border-strong);
}
[data-theme="dark"] #notificationsTable .btn-outline-primary {
    color: var(--sb-primary);
    border-color: rgba(88, 166, 255, 0.4);
}
[data-theme="dark"] #notificationsTable .btn-outline-primary:hover {
    color: var(--sb-text-inverse);
    background: var(--sb-primary);
    border-color: var(--sb-primary);
}

[data-theme="dark"] .pay-result-box {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
}

[data-theme="dark"] .pay-result-title {
    color: var(--sb-text-high);
}