/* ═══════════════════════════════════════════════════════════════════════════════
   PROFESSIONAL DARK MODE — theme.css
   Class toggle: html.dark
   Instant FOUC prevention via head-theme.php inline script
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT THEME (default) ── */
:root {
    /* animated background blobs */
    --t-bg-base:            linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    --t-blob-1:             linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --t-blob-2:             linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --t-blob-3:             linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);

    /* surfaces */
    --t-surface:            rgba(255, 255, 255, 0.75);
    --t-surface-solid:      #ffffff;
    --t-surface-2:          #f8fafc;

    /* sidebar */
    --t-sidebar-bg:         #ffffff;
    --t-sidebar-border:     rgba(78, 84, 200, 0.18);
    --t-sidebar-shadow:     6px 0 24px rgba(31, 38, 135, 0.08);
    --t-sidebar-link-bg:    #f7f9ff;
    --t-sidebar-link-hover: #eef2ff;
    --t-sidebar-sep:        rgba(78, 84, 200, 0.22);

    /* mobile sidebar */
    --t-msidebar-bg:        #ffffff;
    --t-msidebar-link:      #444;
    --t-msidebar-link-i:    #667eea;
    --t-msidebar-hover-bg:  #f0f4ff;
    --t-msidebar-hover:     #4e54c8;
    --t-msidebar-active-bg: #eef2ff;
    --t-msidebar-active:    #4e54c8;
    --t-msidebar-title:     #4e54c8;

    /* navbar */
    --t-navbar-bg:          linear-gradient(90deg, #e0eafc 0%, #cfdef3 100%);
    --t-navbar-shadow:      0 4px 18px rgba(31, 38, 135, 0.10);

    /* text */
    --t-text:               #212529;
    --t-text-muted:         #6c757d;
    --t-heading:            #1e293b;

    /* borders */
    --t-border:             #dee2e6;
    --t-border-subtle:      rgba(0, 0, 0, 0.08);

    /* inputs */
    --t-input-bg:           #ffffff;
    --t-input-color:        #212529;
    --t-input-border:       #ced4da;
    --t-input-placeholder:  #9ca3af;
    --t-input-focus-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.2);

    /* cards */
    --t-card-bg:            rgba(255, 255, 255, 0.78);
    --t-card-shadow:        0 10px 30px rgba(0, 0, 0, 0.08);

    /* tables */
    --t-table-border:       #dee2e6;
    --t-table-hover:        rgba(78, 84, 200, 0.04);
    --t-table-stripe:       rgba(0, 0, 0, 0.02);
    --t-thead-bg:           rgba(78, 84, 200, 0.06);

    /* modals */
    --t-modal-bg:           #ffffff;
    --t-modal-header:       #f8f9fa;
    --t-modal-border:       #dee2e6;

    /* dropdowns */
    --t-dropdown-bg:        #ffffff;
    --t-dropdown-border:    rgba(0, 0, 0, 0.15);
    --t-dropdown-hover:     #f0f4ff;
    --t-dropdown-color:     #212529;

    /* alerts */
    --t-alert-info-bg:      #eff6ff;
    --t-alert-info-border:  #bfdbfe;
    --t-alert-info-color:   #1e40af;

    /* misc */
    --t-scrollbar:          rgba(78, 84, 200, 0.2);
    --t-code-bg:            #f1f5f9;
    --t-hr-color:           rgba(0, 0, 0, 0.1);
    --t-list-item-border:   rgba(0, 0, 0, 0.12);
    --t-driver-bg:          rgba(255, 255, 255, 0.97);
    --t-driver-shadow:      0 10px 40px rgba(0, 0, 0, 0.12);

    /* toggle button */
    --t-toggle-bg:          rgba(78, 84, 200, 0.08);
    --t-toggle-hover:       rgba(78, 84, 200, 0.14);
    --t-toggle-color:       #4e54c8;
}

/* ── DARK THEME ────────────────────────────────────────────────────────────── */
html.dark {
    color-scheme: dark;

    /* animated background blobs — vibrant glows against dark bg */
    --t-bg-base:            linear-gradient(135deg, #07091a 0%, #0d1229 100%);
    --t-blob-1:             linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    --t-blob-2:             linear-gradient(135deg, #0891b2 0%, #0d9488 100%);
    --t-blob-3:             linear-gradient(135deg, #db2777 0%, #9333ea 100%);

    /* surfaces */
    --t-surface:            rgba(22, 33, 55, 0.88);
    --t-surface-solid:      #1e293b;
    --t-surface-2:          #0f172a;

    /* sidebar */
    --t-sidebar-bg:         #1a2236;
    --t-sidebar-border:     rgba(99, 102, 241, 0.22);
    --t-sidebar-shadow:     6px 0 24px rgba(0, 0, 0, 0.5);
    --t-sidebar-link-bg:    rgba(99, 102, 241, 0.07);
    --t-sidebar-link-hover: rgba(99, 102, 241, 0.18);
    --t-sidebar-sep:        rgba(99, 102, 241, 0.18);

    /* mobile sidebar */
    --t-msidebar-bg:        #1a2236;
    --t-msidebar-link:      #cbd5e1;
    --t-msidebar-link-i:    #818cf8;
    --t-msidebar-hover-bg:  rgba(99, 102, 241, 0.14);
    --t-msidebar-hover:     #a5b4fc;
    --t-msidebar-active-bg: rgba(99, 102, 241, 0.2);
    --t-msidebar-active:    #a5b4fc;
    --t-msidebar-title:     #818cf8;

    /* navbar */
    --t-navbar-bg:          linear-gradient(90deg, #0d1424 0%, #1a2236 100%);
    --t-navbar-shadow:      0 4px 18px rgba(0, 0, 0, 0.45);

    /* text */
    --t-text:               #e2e8f0;
    --t-text-muted:         #94a3b8;
    --t-heading:            #f1f5f9;

    /* borders */
    --t-border:             #334155;
    --t-border-subtle:      rgba(255, 255, 255, 0.07);

    /* inputs */
    --t-input-bg:           #0a0f1a;
    --t-input-color:        #e2e8f0;
    --t-input-border:       #1e293b;
    --t-input-placeholder:  #64748b;
    --t-input-focus-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);

    /* cards */
    --t-card-bg:            rgba(22, 33, 55, 0.88);
    --t-card-shadow:        0 10px 30px rgba(0, 0, 0, 0.4);

    /* tables */
    --t-table-border:       #334155;
    --t-table-hover:        rgba(99, 102, 241, 0.08);
    --t-table-stripe:       rgba(255, 255, 255, 0.02);
    --t-thead-bg:           rgba(99, 102, 241, 0.1);

    /* modals */
    --t-modal-bg:           #1e293b;
    --t-modal-header:       #0f172a;
    --t-modal-border:       #334155;

    /* dropdowns */
    --t-dropdown-bg:        #1e293b;
    --t-dropdown-border:    rgba(255, 255, 255, 0.1);
    --t-dropdown-hover:     rgba(99, 102, 241, 0.12);
    --t-dropdown-color:     #e2e8f0;

    /* alerts */
    --t-alert-info-bg:      rgba(30, 64, 175, 0.18);
    --t-alert-info-border:  rgba(99, 102, 241, 0.35);
    --t-alert-info-color:   #93c5fd;

    /* misc */
    --t-scrollbar:          rgba(99, 102, 241, 0.3);
    --t-code-bg:            #0f172a;
    --t-hr-color:           rgba(255, 255, 255, 0.08);
    --t-list-item-border:   rgba(255, 255, 255, 0.08);
    --t-driver-bg:          rgba(22, 33, 55, 0.98);
    --t-driver-shadow:      0 10px 40px rgba(0, 0, 0, 0.6);

    /* toggle button */
    --t-toggle-bg:          rgba(99, 102, 241, 0.1);
    --t-toggle-hover:       rgba(99, 102, 241, 0.2);
    --t-toggle-color:       #818cf8;
}

/* ════════════════════════════════════════════════════════════════════════════
   APPLY VARIABLES — Body & Background
   ════════════════════════════════════════════════════════════════════════════ */

html.dark body {
    color: var(--t-text);
    background: var(--t-bg-base) !important;
}

/* Dark animated background blobs */
html.dark .modern-bg-container {
    background: var(--t-bg-base) !important;
}

html.dark .blob-1 {
    background: var(--t-blob-1) !important;
    opacity: 0.65;
}

html.dark .blob-2 {
    background: var(--t-blob-2) !important;
    opacity: 0.55;
}

html.dark .blob-3 {
    background: var(--t-blob-3) !important;
    opacity: 0.60;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
html.dark .navbar {
    background: var(--t-navbar-bg) !important;
    box-shadow: var(--t-navbar-shadow) !important;
    border-bottom: 1px solid var(--t-border-subtle) !important;
}

html.dark .navbar-brand {
    background: linear-gradient(90deg, #818cf8, #a78bfa) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html.dark .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* ── Sidebar (desktop) ──────────────────────────────────────────────────── */
html.dark .app-sidebar .sidebar-inner {
    background: var(--t-sidebar-bg) !important;
    border-right: 1px solid var(--t-sidebar-border) !important;
    box-shadow: var(--t-sidebar-shadow) !important;
}

html.dark .app-sidebar .sidebar-inner::-webkit-scrollbar-thumb {
    background: var(--t-scrollbar) !important;
}

html.dark .sidebar-brand {
    color: #818cf8 !important;
}

html.dark .sidebar-link {
    background: var(--t-sidebar-link-bg) !important;
    color: #818cf8 !important;
    border-color: transparent !important;
}

html.dark .sidebar-link:hover {
    background: var(--t-sidebar-link-hover) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2) !important;
    
}

html.dark .sidebar-link.active {
    background: var(--t-sidebar-link-hover) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    
}

html.dark .sidebar-sep {
    background: var(--t-sidebar-sep) !important;
}

html.dark #sidebarToggle {
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
    background: rgba(99, 102, 241, 0.08) !important;
}

html.dark #sidebarToggle:hover {
    background: rgba(99, 102, 241, 0.16) !important;
}

/* ── Mobile Sidebar ─────────────────────────────────────────────────────── */
html.dark .mobile-sidebar {
    background: var(--t-msidebar-bg) !important;
    border-right: 1px solid var(--t-sidebar-border) !important;
}

html.dark .mobile-sidebar-content {
    color: var(--t-text) !important;
}

html.dark .mobile-link {
    color: var(--t-msidebar-link) !important;
}

html.dark .mobile-link i {
    color: var(--t-msidebar-link-i) !important;
}

html.dark .mobile-link:hover,
html.dark .mobile-link:active {
    background: var(--t-msidebar-hover-bg) !important;
    color: var(--t-msidebar-hover) !important;
}

html.dark .mobile-link.active {
    background: var(--t-msidebar-active-bg) !important;
    color: var(--t-msidebar-active) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
}

html.dark .mobile-link.text-danger {
    color: #f87171 !important;
}

html.dark .mobile-link.text-danger i {
    color: #f87171 !important;
}

html.dark .mobile-link.text-danger:hover {
    background: rgba(248, 113, 113, 0.1) !important;
}

html.dark .sidebar-menu-title {
    color: var(--t-msidebar-title) !important;
}

html.dark .btn-close {
    filter: invert(1) brightness(1.5);
}

/* ── Cards & Surfaces ───────────────────────────────────────────────────── */
/* Double selector to beat inline <style> !important rules */
html.dark .card, html.dark body .card,
html.dark .main-card, html.dark body .main-card,
html.dark .login-card, html.dark body .login-card,
html.dark .section-card, html.dark body .section-card,
html.dark .kpi-card, html.dark body .kpi-card,
html.dark .change-card, html.dark body .change-card,
html.dark .register-card, html.dark body .register-card {
    background: rgba(15, 23, 42, 0.5) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
    
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
    color: var(--t-text) !important;
}

html.dark .kpi-card:hover, html.dark body .kpi-card:hover,
html.dark .section-card:hover, html.dark body .section-card:hover,
html.dark .card:hover, html.dark body .card:hover {
    background: #1e2d4f !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.2) !important;
    transform: translateY(-3px);
}

html.dark .card-header {
    background: rgba(15, 23, 42, 0.5) !important;
    border-bottom-color: var(--t-border) !important;
    color: var(--t-text) !important;
}

html.dark .card-footer {
    background: rgba(15, 23, 42, 0.3) !important;
    border-top-color: var(--t-border) !important;
}

html.dark .card-body,
html.dark .card-title,
html.dark .card-text {
    color: var(--t-text) !important;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .h1,
html.dark .h2,
html.dark .h3,
html.dark .h4,
html.dark .h5,
html.dark .h6 {
    color: var(--t-heading) !important;
}

/* Don't override gradient headings */
html.dark h1[style*="gradient"],
html.dark h2[style*="gradient"],
html.dark h1.gradient-text {
    color: transparent !important;
}

html.dark p {
    color: var(--t-text);
}

html.dark .text-muted,
html.dark .form-text {
    color: var(--t-text-muted) !important;
}

html.dark .text-dark {
    color: var(--t-text) !important;
}

html.dark label,
html.dark .form-label,
html.dark .form-check-label {
    color: var(--t-text) !important;
}

html.dark small,
html.dark .small {
    color: var(--t-text-muted) !important;
}

/* ── Forms & Inputs ─────────────────────────────────────────────────────── */
html.dark .form-control,
html.dark .form-select,
html.dark .input-group-text,
html.dark textarea,
html.dark select {
    background-color: var(--t-input-bg) !important;
    color: var(--t-input-color) !important;
    border-color: var(--t-input-border) !important;
}

html.dark .form-control::placeholder,
html.dark textarea::placeholder {
    color: var(--t-input-placeholder) !important;
}

html.dark .form-control:focus,
html.dark .form-select:focus,
html.dark textarea:focus {
    background-color: var(--t-input-bg) !important;
    color: var(--t-input-color) !important;
    border-color: #6366f1 !important;
    box-shadow: var(--t-input-focus-shadow) !important;
}

html.dark .form-control:disabled,
html.dark .form-select:disabled {
    background-color: rgba(15, 23, 42, 0.6) !important;
    opacity: 0.6;
}

html.dark .form-check-input {
    background-color: var(--t-input-bg) !important;
    border-color: var(--t-input-border) !important;
}

html.dark .form-check-input:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

html.dark .input-group-text {
    background-color: rgba(15, 23, 42, 0.7) !important;
    color: var(--t-text-muted) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
html.dark .btn-outline-secondary {
    border-color: #475569 !important;
    
}

html.dark .btn-outline-secondary:hover {
    background: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark .btn-outline-primary {
    border-color: #6366f1 !important;
    color: #818cf8 !important;
}

html.dark .btn-outline-primary:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}

html.dark .btn-light {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--t-text) !important;
}

html.dark .btn-light:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

html.dark .btn-secondary {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark .btn-secondary:hover {
    background: #475569 !important;
}

html.dark .btn-close {
    filter: invert(1) brightness(2);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
html.dark .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--t-table-border);
    --bs-table-hover-bg: var(--t-table-hover);
    --bs-table-striped-bg: var(--t-table-stripe);
    color: var(--t-text) !important;
    border-color: var(--t-table-border) !important;
}

html.dark .table th,
html.dark .table td,
html.dark .table thead th {
    color: var(--t-text) !important;
    border-color: var(--t-table-border) !important;
}

html.dark .table thead th,
html.dark .table-light,
html.dark .table thead {
    background: var(--t-thead-bg) !important;
    color: var(--t-text) !important;
    border-color: var(--t-table-border) !important;
}

html.dark .table tbody tr:hover td {
    background: var(--t-table-hover) !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--t-table-stripe) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
html.dark .modal-content {
    background: var(--t-modal-bg) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
}

html.dark .modal-header {
    background: var(--t-modal-header) !important;
    border-bottom-color: var(--t-border) !important;
    color: var(--t-text) !important;
}

html.dark .modal-footer {
    border-top-color: var(--t-border) !important;
}

html.dark .modal-title {
    color: var(--t-heading) !important;
}

html.dark .modal-body {
    color: var(--t-text) !important;
}

/* ── Dropdowns ──────────────────────────────────────────────────────────── */
html.dark .dropdown-menu {
    background: var(--t-dropdown-bg) !important;
    border-color: var(--t-dropdown-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html.dark .dropdown-item {
    color: var(--t-dropdown-color) !important;
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
    background: var(--t-dropdown-hover) !important;
    
}

html.dark .dropdown-divider {
    border-top-color: var(--t-border) !important;
}

html.dark .dropdown-header {
    color: var(--t-text-muted) !important;
}

/* ── Nav Pills / Tabs ───────────────────────────────────────────────────── */
html.dark .nav-pills .nav-link {
    color: var(--t-text-muted) !important;
    background: rgba(15, 23, 42, 0.4) !important;
}

html.dark .nav-pills .nav-link:hover {
    
    background: rgba(99, 102, 241, 0.12) !important;
}

html.dark .nav-pills .nav-link.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border: 1px solid rgba(99, 102, 241, 0.5) !important;
    color: #fff !important;
}

html.dark .nav-tabs .nav-link {
    color: var(--t-text-muted) !important;
    border-color: transparent !important;
}

html.dark .nav-tabs .nav-link:hover {
    
    border-color: var(--t-border) !important;
}

html.dark .nav-tabs .nav-link.active {
    background: var(--t-modal-bg) !important;
    border-color: var(--t-border) var(--t-border) transparent !important;
    color: #818cf8 !important;
}

html.dark .nav-tabs {
    border-bottom-color: var(--t-border) !important;
}

/* ── List Groups ────────────────────────────────────────────────────────── */
html.dark .list-group-item {
    background: var(--t-surface-solid) !important;
    border-color: var(--t-list-item-border) !important;
    color: var(--t-text) !important;
}

html.dark .list-group-item:hover {
    background: rgba(99, 102, 241, 0.08) !important;
}

html.dark .list-group-item.active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
html.dark .alert {
    border-color: var(--t-border-subtle) !important;
}

html.dark .alert-info {
    background: var(--t-alert-info-bg) !important;
    border-color: var(--t-alert-info-border) !important;
    color: var(--t-alert-info-color) !important;
}

html.dark .alert-warning {
    background: rgba(180, 120, 0, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fcd34d !important;
}

html.dark .alert-danger {
    background: rgba(185, 28, 28, 0.15) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: #fca5a5 !important;
}

html.dark .alert-success {
    background: rgba(5, 122, 85, 0.15) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    color: #6ee7b7 !important;
}

html.dark .alert-secondary {
    background: rgba(71, 85, 105, 0.3) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
    color: #cbd5e1 !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
html.dark .badge.bg-secondary,
html.dark .badge.bg-light {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* ── Progress ───────────────────────────────────────────────────────────── */
html.dark .progress {
    background: rgba(15, 23, 42, 0.6) !important;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
html.dark .breadcrumb-item,
html.dark .breadcrumb-item a {
    color: var(--t-text-muted) !important;
}

html.dark .breadcrumb-item.active {
    color: var(--t-text) !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
html.dark .page-link {
    background: var(--t-surface-solid) !important;
    border-color: var(--t-border) !important;
    color: #818cf8 !important;
}

html.dark .page-item.active .page-link {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}

html.dark .page-item.disabled .page-link {
    background: rgba(15, 23, 42, 0.4) !important;
    color: var(--t-text-muted) !important;
}

/* ── Accordion ──────────────────────────────────────────────────────────── */
html.dark .accordion-item {
    background: var(--t-surface-solid) !important;
    border-color: var(--t-border) !important;
}

html.dark .accordion-button {
    background: var(--t-surface-solid) !important;
    color: var(--t-text) !important;
}

html.dark .accordion-button:not(.collapsed) {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #818cf8 !important;
}

html.dark .accordion-button::after {
    filter: invert(1);
}

html.dark .accordion-body {
    background: var(--t-surface-solid) !important;
    color: var(--t-text) !important;
}

/* ── Offcanvas ──────────────────────────────────────────────────────────── */
html.dark .offcanvas {
    background: var(--t-surface-solid) !important;
    color: var(--t-text) !important;
}

html.dark .offcanvas-header {
    border-bottom-color: var(--t-border) !important;
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
html.dark .toast {
    background: var(--t-surface-solid) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
}

html.dark .toast-header {
    background: var(--t-modal-header) !important;
    border-bottom-color: var(--t-border) !important;
    color: var(--t-text) !important;
}

/* ── HR & Misc ──────────────────────────────────────────────────────────── */
html.dark hr,
html.dark .vr {
    color: var(--t-hr-color) !important;
    opacity: 1 !important;
}

html.dark pre,
html.dark code {
    background: var(--t-code-bg) !important;
    
    border-color: var(--t-border) !important;
}

html.dark blockquote {
    border-left-color: #6366f1 !important;
    color: var(--t-text-muted) !important;
}

/* ── Driver.js Tooltip ──────────────────────────────────────────────────── */
html.dark .driver-popover {
    background: var(--t-driver-bg) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: var(--t-driver-shadow) !important;
}

html.dark .driver-popover-title {
    color: #818cf8 !important;
}

html.dark .driver-popover-description {
    color: var(--t-text) !important;
}

html.dark .driver-popover-prev-btn {
    border-color: #475569 !important;
    
    background: transparent !important;
}

html.dark .driver-popover-close-btn {
    color: #64748b !important;
}

html.dark .driver-popover-progress-text {
    color: #64748b !important;
}

/* ── KPI Cards (dashboard) ──────────────────────────────────────────────── */
html.dark .kpi-title {
    color: var(--t-text-muted) !important;
}

html.dark .kpi-value {
    color: var(--t-heading) !important;
}

html.dark .section-title {
    color: var(--t-heading) !important;
}

/* ── Theme Toggle Button ────────────────────────────────────────────────── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--t-toggle-color);
    background: var(--t-toggle-bg);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle-btn:hover {
    background: var(--t-toggle-hover);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    color: var(--t-toggle-color);
    text-decoration: none;
}

.theme-toggle-btn i {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Collapsed sidebar: icon only */
.app-sidebar.collapsed .theme-toggle-btn {
    justify-content: center;
    width: 46px;
    aspect-ratio: 1 / 1;
    padding: 10px;
    gap: 0;
    margin-left: auto;
    margin-right: auto;
}

/* ── Transition on theme switch ─────────────────────────────────────────── */
html,
body,
.navbar,
.app-sidebar .sidebar-inner,
.mobile-sidebar { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; }

/* ── Login page — body gradient override for dark mode ──────────────────── */
html.dark body.login-page {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
}

/* ── Player card (players.php row cards) ─────────────────────────────────── */
html.dark .player-card,
html.dark body .player-card {
    background: #16213e !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
html.dark .player-card:hover,
html.dark body .player-card:hover {
    background: #1e2d4f !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

/* ── FullCalendar dark mode ──────────────────────────────────────────────── */
html.dark .fc {
    color: var(--t-text) !important;
}
html.dark .fc-theme-standard td,
html.dark .fc-theme-standard th,
html.dark .fc-theme-standard .fc-scrollgrid {
    border-color: rgba(99, 102, 241, 0.15) !important;
}
html.dark .fc-col-header-cell-cushion,
html.dark .fc-daygrid-day-number,
html.dark .fc .fc-toolbar-title {
    color: var(--t-text) !important;
}
html.dark .fc-daygrid-day-frame,
html.dark .fc .fc-daygrid-body,
html.dark .fc-view-harness,
html.dark .fc-scrollgrid-sync-table,
html.dark .fc-col-header,
html.dark .fc-col-header-cell {
    background: transparent !important;
}
html.dark .fc .fc-daygrid-day {
    background: transparent !important;
}
html.dark .fc .fc-daygrid-day:hover,
html.dark .fc .fc-daygrid-day.fc-day-today {
    background: rgba(99, 102, 241, 0.12) !important;
}
html.dark .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    
    font-weight: 700;
}
html.dark .fc-toolbar-chunk .btn,
html.dark .fc .fc-button {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    
}
html.dark .fc .fc-button:hover {
    background: rgba(99, 102, 241, 0.3) !important;
}
html.dark .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #fff !important;
}
html.dark .fc-event {
    
}
html.dark .fc-list-event:hover td {
    background: rgba(99, 102, 241, 0.1) !important;
}
html.dark .fc-list-day-cushion,
html.dark .fc-list-day th {
    background: #16213e !important;
    color: var(--t-text) !important;
}
html.dark .fc-list-empty {
    background: transparent !important;
    color: var(--t-text-muted) !important;
}

/* ── Login page — body gradient override ────────────────────────────────── */
/* In dark mode the login page body gets a deep indigo gradient
   (the card's own inline gradient is overridden here) */
html.dark body.login-page-body,
html.dark .login-page body {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
}

/* ── Login card dark mode ───────────────────────────────────────────────── */
html.dark .login-card,
html.dark body .login-card {
    background: rgba(13, 18, 41, 0.90) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

html.dark .login-card h2,
html.dark .login-card .form-label {
    color: #e2e8f0 !important;
}

/* ── Context switcher buttons (login page) ──────────────────────────────── */
html.dark .context-btn {
    background: rgba(15, 23, 42, 0.4) !important;
    border: 1px solid transparent !important;
    color: var(--t-text-muted) !important;
    border-radius: 12px !important;
    padding: 10px 15px !important;
    transition: all 0.2s ease !important;
}

html.dark .context-btn.active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: #fff !important;
    box-shadow: none !important;
}

html.dark .context-btn:hover:not(.active) {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #a5b4fc !important;
}

/* ── Misc */
.card,
.main-card,
.modal-content,
.form-control,
.form-select,
.table,
.dropdown-menu,
.list-group-item {
    transition:
        background-color 0.24s ease,
        border-color 0.24s ease,
        color 0.24s ease,
        box-shadow 0.24s ease !important;
}

/* ── Bootstrap Background Utilities Override ────────────────────────────── */
html.dark .bg-white,
html.dark .bg-light,
html.dark body .bg-white,
html.dark body .bg-light {
    background-color: var(--t-card-bg) !important;
    color: var(--t-text) !important;
}
html.dark .form-group-custom.bg-white {
    background-color: transparent !important;
}
html.dark .form-group-custom {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--t-border-subtle) !important;
}
html.dark .form-control.bg-light,
html.dark .form-select.bg-light,
html.dark .form-control.bg-white,
html.dark .form-select.bg-white {
    background-color: var(--t-input-bg) !important;
    color: var(--t-text) !important;
}
html.dark .fc {
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.05);
    --fc-neutral-text-color: var(--t-text-muted);
    --fc-border-color: rgba(99, 102, 241, 0.15);
    --fc-today-bg-color: rgba(99, 102, 241, 0.15);
    background-color: transparent !important;
}

html.dark .fc td,
html.dark .fc th,
html.dark .fc .fc-scrollgrid-sync-inner,
html.dark .fc .fc-theme-standard td, 
html.dark .fc .fc-theme-standard th {
    background: transparent !important;
    background-color: transparent !important;
}

html.dark .fc-day-disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
}


/* Admin Panel Tables & Cards Deep Dark overrides */


html.dark .info-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.dark .info-box * {
    color: #cbd5e1 !important;
}

html.dark .table-light,
html.dark .table-light th,
html.dark .table-light td {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .table-hover tbody tr:hover td,
html.dark .table-hover tbody tr:hover th {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Force inline texts and small indicators to light up in dark mode */
html.dark h5[style*="1a1f36"],
html.dark span[style*="475569"],
html.dark small.text-muted {
    color: #e2e8f0 !important;
}

html.dark table.table, 
html.dark .table-responsive table.table {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
    --bs-table-border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}

html.dark table.table td, 
html.dark table.table th {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
}

html.dark .form-group-custom,
html.dark .form-group-custom.bg-white {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
}

html.dark .form-group-custom label.form-label {
    color: #cbd5e1 !important;
}


html.dark input.bg-light,
html.dark select.bg-light,
html.dark textarea.bg-light,
html.dark .form-control.bg-light,
html.dark .form-select.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark option {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

html.dark body { color: #f1f5f9 !important; background: transparent !important; }
html.dark .player-card, html.dark .group-card, html.dark .mobile-only .card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

html.dark .table, html.dark .table-hover {
    color: #f1f5f9 !important;
}


/* ── Mobile & Custom Cards Catch-all ────────────────────────────────────── */
html.dark .manual-mobile-card,
html.dark .rank-mobile-card,
html.dark .white-card,
html.dark .content-card,
html.dark .stat-card,
html.dark .competition-card,
html.dark .status-card,
html.dark .notification-card,
html.dark .ai-result-card,
html.dark .note-card,
html.dark .location-card,
html.dark .header-card,
html.dark .chart-box,
html.dark .border-box,
html.dark .list-group-item,
html.dark .info-box,
html.dark .card-body.bg-white {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}

html.dark .face-item {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}
html.dark .face-item.notfound {
    background: rgba(239, 68, 68, 0.15) !important;
    border-left-color: #ef4444 !important;
}

html.dark .bg-white, html.dark body .bg-white, html.dark .bg-light, html.dark body .bg-light {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── QR Section Fix ─────────────────────────────────────────────────────── */
html.dark .qr-section {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .qr-section > div:first-child {
    background: #ffffff !important; /* Keep the QR code background white so it can be scanned */
    border-color: rgba(255, 255, 255, 0.2) !important;
}
html.dark .qr-section > div:last-child {
    background: transparent !important;
    border: none !important;
}
html.dark .qr-section > div:last-child * {
    color: #f1f5f9 !important;
}
html.dark .qr-section > div:last-child a.btn-light {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}


/* ── Main Panel Mobile Overrides ────────────────────────────────────── */
html.dark .card, html.dark .card-body, html.dark .main-card {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}

html.dark body {
    color: #f1f5f9 !important;
}

/* Make sure all mobile menu items have correct color */
html.dark h5, html.dark .h5, html.dark h6, html.dark .h6, html.dark .text-dark, html.dark .text-muted {
    color: #e2e8f0 !important;
}

/* Remove inline inline backgrounds everywhere in dark mode */
html.dark [style*="background: #fff"], 
html.dark [style*="background: white"],
html.dark [style*="background:#fff"],
html.dark [style*="background:white"] {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
}

/* Except images and QRs need white */
html.dark img {
    background-color: transparent !important;
}

/* ── Mobile Menu Grid Override ────────────────────────────────────── */
html.dark .mobile-menu-grid {
    background: transparent !important;
}

html.dark .mobile-menu-item {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

html.dark .mobile-menu-item i {
    color: #a5b4fc !important;
}

html.dark .mobile-menu-item span {
    color: #f1f5f9 !important;
}

/* ── Mobile Calendar Override (FullCalendar mostly) ───────────────────── */
html.dark #calendar-mobile-container,
html.dark #calendar-mobile,
html.dark .fc,
html.dark .fc-theme-standard .fc-scrollgrid,
html.dark .fc-theme-standard td, html.dark .fc-theme-standard th {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

html.dark .fc-list, html.dark .fc-list-bg,
html.dark .fc-list-empty-wrap2,
html.dark .fc-list-day-cushion {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

html.dark .fc-list-event-cushion, html.dark .fc-list-event-title, html.dark .fc-list-event-time, html.dark .fc-event {
    background: transparent !important;
    color: #f1f5f9 !important;
}

/* Fallback for generic list rows */
html.dark .fc-list-day-text, html.dark .fc-list-day-side-text {
    color: #a5b4fc !important;
}

html.dark .fc-list-table td, html.dark .fc-list-table tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Any white containers in calendar wrapper */
html.dark #calendar-mobile-container [style*="background: #fff"],
html.dark #calendar-mobile-container [style*="background: white"],
html.dark #calendar-mobile-container .mobile-calendar-day {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.dark .mobile-calendar-row, html.dark .mobile-calendar-header {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

html.dark .fc-view-harness, html.dark .fc-scroller {
    background: transparent !important;
}

/* ── Mobile Specific Calendar Fix ────────────────────────────────────── */
html.dark #calendar-mobile .fc-daygrid-day {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

html.dark #calendar-mobile .fc-daygrid-day-top {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark .mobile-day-label, html.dark #calendar-mobile .mobile-day-label {
    color: #a5b4fc !important;
}

html.dark .fc-daygrid-day-number {
    color: #f1f5f9 !important;
}

/* Also for any inner tables missing transparency */
html.dark #calendar-mobile .fc-scrollgrid-sync-table {
    background: transparent !important;
}

/* ── AI Assistant Panel Dark Mode Override ────────────────────────── */
html.dark .ai-panel {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    box-shadow: -5px 0 25px rgba(0,0,0,0.5) !important;
}

html.dark .ai-panel-header {
    background: rgba(15, 23, 42, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

html.dark .ai-panel-header .ai-header-title {
    color: #f1f5f9 !important;
}

html.dark .ai-panel-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

html.dark .ai-panel-body {
    background: transparent !important;
}

/* User & Bot message bubbles */
html.dark .ai-message-row.user-message-row .ai-message-bubble {
    background: #4e54c8 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(78, 84, 200, 0.2) !important;
}

html.dark .ai-message-row.ai-message-row .ai-message-bubble,
html.dark .ai-message-bubble, html.dark .ai-bubble {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(5px) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Input area */
html.dark .ai-input-area {
    background: rgba(15, 23, 42, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark .ai-input-area textarea,
html.dark #aiInput {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

html.dark .ai-input-area textarea:focus,
html.dark #aiInput:focus {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: #4e54c8 !important;
    color: #fff !important;
}

html.dark .ai-input-area .btn-primary {
    background: #4e54c8 !important;
    border: none !important;
}

/* Floating AI Button (FAB) */
html.dark .ai-fab {
    background: linear-gradient(135deg, #4e54c8, #8f94fb) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    color: #fff !important;
}

/* Quick suggestions blocks */
html.dark .ai-suggestion {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #a5b4fc !important;
}
html.dark .ai-suggestion:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Loading dots */
html.dark .typing-indicator span {
    background-color: #a5b4fc !important;
}

/* ── Voice Assistant Panel Dark Mode (voice-assistant.js) ─────────── */
html.dark #voice-chat-panel {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: -5px 0 25px rgba(0,0,0,0.5) !important;
    color: #f1f5f9 !important;
}

html.dark .voice-chat-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

html.dark .voice-chat-title {
    color: #f1f5f9 !important;
}

html.dark #voice-chat-close {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important;
}

html.dark #voice-chat-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

html.dark .voice-msg.ai {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px) !important;
}

html.dark .voice-msg.user {
    background: #4e54c8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(78, 84, 200, 0.2) !important;
}

html.dark .voice-msg.confirm-card {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #e2e8f0 !important;
}

html.dark .voice-chat-input-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

html.dark #voice-chat-input {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

html.dark #voice-chat-input:focus {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: #4e54c8 !important;
    color: #ffffff !important;
}

html.dark #voice-chat-input::placeholder {
    color: #94a3b8 !important;
    opacity: 0.8 !important;
}

html.dark #voice-chat-mic, html.dark #voice-chat-send {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #a5b4fc !important;
}

html.dark #voice-chat-mic.listening {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

html.dark #voice-chat-send {
    background: #4e54c8 !important;
    color: #ffffff !important;
    border: none !important;
}

html.dark #voice-chat-mic:hover:not(.listening) {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

/* Scrollbar tweaks inside chat */
html.dark .voice-chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2) !important;
}
html.dark .voice-chat-messages::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ── Day Attendance Modal Overrides ───────────────────────────────── */
html.dark #dayAttendancePlayersList .list-group-item {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
    margin-bottom: 6px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

html.dark #dayAttendancePlayersList .list-group-item:hover,
html.dark #dayAttendancePlayersList .list-group-item:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark #dayAttendanceTimesList .bg-light-subtle {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
}

html.dark #dayAttendanceTimesList .bg-light-subtle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html.dark #dayAttendanceTimesList .text-muted {
    color: #a5b4fc !important;
    opacity: 0.8;
}

html.dark #dayAttendanceTimesList .text-primary {
    color: #a5b4fc !important;
    font-size: 1.1em !important;
}

html.dark #dayAttendanceModal .modal-title,
html.dark #dayAttendanceTimesTitle,
html.dark #dayAttendanceModal .fw-semibold {
    color: #f1f5f9 !important;
}

html.dark #dayAttendanceModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* ── Day Attendance Modal Sizing Tweaks (Minimalist) ─────────────── */
html.dark #dayAttendancePlayersList .list-group-item {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
    border-radius: 8px !important;
}

html.dark #dayAttendancePlayersList .list-group-item i {
    font-size: 0.75rem !important;
}

html.dark #dayAttendanceTimesList .bg-light-subtle {
    padding: 0.4rem 0.6rem !important;
    margin-bottom: 4px !important;
    border-radius: 8px !important;
}

html.dark #dayAttendanceTimesList .fw-semibold {
    font-size: 0.85rem !important;
}

html.dark #dayAttendanceTimesList .small.text-muted {
    font-size: 0.7rem !important;
}

html.dark #dayAttendanceTimesList .fw-bold.text-primary {
    font-size: 0.95rem !important;
    margin-top: 2px !important;
}

html.dark #dayAttendanceModal .modal-title {
    font-size: 1rem !important;
}

html.dark #dayAttendanceTimesTitle,
html.dark #dayAttendanceModal .col-lg-5 > .fw-semibold {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
}

/* ── Competitions Filter Buttons Dark Mode Override ───────────────── */
html.dark .btn-group > .btn-outline-secondary,
html.dark .btn-group > .btn-outline-primary,
html.dark .btn-group > .btn-outline-success,
html.dark .btn-group > .btn-outline-warning,
html.dark .btn-group > .btn-outline-info {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark .btn-group > .btn-outline-secondary { color: #cbd5e1 !important; border-color: rgba(203, 213, 225, 0.2) !important; }
html.dark .btn-group > .btn-outline-primary { color: #93c5fd !important; border-color: rgba(147, 197, 253, 0.3) !important; }
html.dark .btn-group > .btn-outline-success { color: #86efac !important; border-color: rgba(134, 239, 172, 0.3) !important; }
html.dark .btn-group > .btn-outline-warning { color: #fde047 !important; border-color: rgba(253, 224, 71, 0.3) !important; }
html.dark .btn-group > .btn-outline-info { color: #67e8f9 !important; border-color: rgba(103, 232, 249, 0.3) !important; }

html.dark .btn-group > .btn.active {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2) !important;
}

html.dark .btn-group > .btn-outline-secondary.active {
    background: rgba(203, 213, 225, 0.15) !important;
    color: #f8fafc !important;
}
html.dark .btn-group > .btn-outline-primary.active {
    background: rgba(147, 197, 253, 0.15) !important;
    color: #eff6ff !important;
}
html.dark .btn-group > .btn-outline-success.active {
    background: rgba(134, 239, 172, 0.15) !important;
    color: #f0fdf4 !important;
}
html.dark .btn-group > .btn-outline-warning.active {
    background: rgba(253, 224, 71, 0.15) !important;
    color: #fefce8 !important;
}
html.dark .btn-group > .btn-outline-info.active {
    background: rgba(103, 232, 249, 0.15) !important;
    color: #ecfeff !important;
}

html.dark .btn-group > .btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Make sure the text inside has enough contrast */
html.dark .btn-group > .btn {
    font-weight: 500 !important;
}