/* ============================================================
   CSS/theme-global.css  -  Tema Terang / Gelap untuk SEMUA halaman
   Dipakai bersama assets/theme.js (atribut html[data-theme] & [data-bs-theme]).
   Mode terang = tampilan asli tiap halaman (tidak diubah).
   Mode gelap  = override di bawah ini (palet sama dengan dashboard index).
   ============================================================ */

/* ---------- 1. Token warna ---------- */
:root {
    --sg-bg:        #f4f6fb;
    --sg-surface:   #ffffff;
    --sg-surface-2: #f8fafc;
    --sg-border:    #e2e8f0;
    --sg-text:      #1e293b;
    --sg-muted:     #64748b;
    --sg-brand:     #1e3c72;
    --sg-brand-2:   #2a5298;
    --sg-link:      #1e3c72;
    --sg-hover:     #f0f4ff;
    --sg-checked:   #e7efff;
    --sg-shadow:    0 6px 24px rgba(15,23,42,.18);
    --sg-overlay:   rgba(0,0,0,.35);
    --sg-focus:     #2a5298;
}
html[data-theme="dark"] {
    --sg-bg:        #0f172a;
    --sg-surface:   #1b2336;
    --sg-surface-2: #222c42;
    --sg-border:    #334155;
    --sg-text:      #e2e8f0;
    --sg-muted:     #94a3b8;
    --sg-brand:     #3b6fd4;
    --sg-brand-2:   #5a8be8;
    --sg-link:      #8ab4ff;
    --sg-hover:     #243049;
    --sg-checked:   #1f3a6b;
    --sg-shadow:    0 6px 24px rgba(0,0,0,.55);
    --sg-overlay:   rgba(0,0,0,.6);
    --sg-focus:     #8ab4ff;
}
html { transition: background-color .2s; }

/* ---------- 2. Variabel Bootstrap 5.3 (mode gelap) ---------- */
html[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;               --bs-body-bg-rgb: 15,23,42;
    --bs-body-color: #e2e8f0;            --bs-body-color-rgb: 226,232,240;
    --bs-emphasis-color: #f8fafc;        --bs-emphasis-color-rgb: 248,250,252;
    --bs-secondary-color: #94a3b8;       --bs-secondary-color-rgb: 148,163,184;
    --bs-tertiary-color: #94a3b8;        --bs-tertiary-color-rgb: 148,163,184;
    --bs-secondary-bg: #222c42;          --bs-secondary-bg-rgb: 34,44,66;
    --bs-tertiary-bg: #1b2336;           --bs-tertiary-bg-rgb: 27,35,54;
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(148,163,184,.22);
    --bs-link-color: #8ab4ff;            --bs-link-color-rgb: 138,180,255;
    --bs-link-hover-color: #b3ceff;      --bs-link-hover-color-rgb: 179,206,255;
    --bs-light-rgb: 34,44,66;            /* .bg-light */
}
html[data-bs-theme="dark"] .card {
    --bs-card-bg: #1b2336;
    --bs-card-border-color: #334155;
    --bs-card-cap-bg: rgba(255,255,255,.04);
    --bs-card-color: #e2e8f0;
    border: 1px solid #334155;
}
html[data-bs-theme="dark"] .card:hover { box-shadow: 0 8px 16px rgba(0,0,0,.4); }
html[data-bs-theme="dark"] .modal-content { --bs-modal-bg: #1b2336; --bs-modal-border-color: #334155; --bs-modal-color: #e2e8f0; }
html[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #1b2336; --bs-dropdown-border-color: #334155; --bs-dropdown-color: #e2e8f0;
    --bs-dropdown-link-color: #e2e8f0; --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #243049; --bs-dropdown-divider-bg: #334155;
}
html[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: #1b2336; --bs-list-group-color: #e2e8f0;
    --bs-list-group-border-color: #334155; --bs-list-group-action-hover-bg: #243049;
    --bs-list-group-action-hover-color: #e2e8f0;
}
html[data-bs-theme="dark"] .accordion { --bs-accordion-bg: #1b2336; --bs-accordion-color: #e2e8f0; --bs-accordion-border-color: #334155; }
html[data-bs-theme="dark"] .pagination {
    --bs-pagination-bg: #1b2336; --bs-pagination-border-color: #334155; --bs-pagination-color: #8ab4ff;
    --bs-pagination-hover-bg: #243049; --bs-pagination-hover-color: #b3ceff; --bs-pagination-hover-border-color: #334155;
    --bs-pagination-focus-bg: #243049; --bs-pagination-focus-color: #b3ceff;
    --bs-pagination-active-bg: #3b6fd4; --bs-pagination-active-border-color: #3b6fd4; --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: #222c42; --bs-pagination-disabled-color: #64748b; --bs-pagination-disabled-border-color: #334155;
}
html[data-bs-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: #334155; --bs-nav-tabs-link-active-bg: #1b2336; --bs-nav-tabs-link-active-border-color: #334155 #334155 #1b2336; --bs-nav-tabs-link-hover-border-color: #334155; }
html[data-bs-theme="dark"] .toast { --bs-toast-bg: #1b2336; --bs-toast-color: #e2e8f0; --bs-toast-border-color: #334155; }

/* ---------- 3. Dasar halaman ---------- */
html[data-theme="dark"] body { background: var(--sg-bg); color: var(--sg-text); }
html[data-theme="dark"] body.sg-auth-bg { background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%); }
html[data-theme="dark"] hr { border-color: var(--sg-border); opacity: 1; }
html[data-theme="dark"] ::placeholder { color: #7c8aa0 !important; opacity: 1; }
html[data-theme="dark"] ::selection { background: #3b6fd4; color: #fff; }

/* ---------- 4. Navbar ---------- */
html[data-theme="dark"] .navbar-custom { background: linear-gradient(135deg, #0b1d4a 0%, #1e3a8a 100%); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
html[data-theme="dark"] .navbar-custom .dropdown-menu { border: 1px solid var(--sg-border); box-shadow: 0 8px 24px rgba(0,0,0,.55); }
@media (max-width: 991.98px) {
    html[data-theme="dark"] #navbarNav,
    html[data-theme="dark"] #navbarSekolah { background: rgba(11,29,74,.98); }
    html[data-theme="dark"] .navbar-custom .dropdown-menu { background: var(--sg-surface-2); border-left: 3px solid rgba(255,255,255,.25); border-top: 0; border-right: 0; border-bottom: 0; }
}

/* Tombol ganti tema di navbar */
.theme-toggle-nav {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.3); border-radius: 20px;
    padding: 6px 14px; font-size: .85rem; font-weight: 500; line-height: 1.2;
    min-height: 36px; cursor: pointer; white-space: nowrap;
    transition: background-color .2s, border-color .2s;
}
.theme-toggle-nav:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); color: #fff; }
.theme-toggle-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle-nav i { font-size: 1rem; }
@media (max-width: 991.98px) {
    .theme-toggle-nav { width: 100%; min-height: 44px; border-radius: 7px; padding: 10px 12px; margin: 2px 0; }
}

/* Tombol ganti tema melayang (halaman tanpa navbar: login, dll.) */
.theme-fab {
    position: fixed; z-index: 10000;
    top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sg-surface); color: var(--sg-text);
    border: 1px solid var(--sg-border); box-shadow: 0 2px 10px rgba(15,23,42,.22);
    cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s;
}
.theme-fab:hover { background: var(--sg-hover); border-color: var(--sg-brand-2); }
.theme-fab:focus-visible { outline: 2px solid var(--sg-focus); outline-offset: 2px; }
.theme-fab:active { transform: scale(.94); }
.theme-fab i { font-size: 1.15rem; line-height: 1; }

/* ---------- 5. Utility Bootstrap yang berwarna terang ---------- */
html[data-theme="dark"] .bg-white { background-color: var(--sg-surface) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--sg-surface-2) !important; }
html[data-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.bg-success):not(.btn) { color: var(--sg-text) !important; }
html[data-theme="dark"] .text-black { color: var(--sg-text) !important; }
html[data-theme="dark"] .text-primary:not(.btn) { color: #8ab4ff !important; }
html[data-theme="dark"] .text-success:not(.btn) { color: #4ade80 !important; }
html[data-theme="dark"] .text-info:not(.btn)    { color: #67e8f9 !important; }
html[data-theme="dark"] .text-danger:not(.btn)  { color: #f87171 !important; }
html[data-theme="dark"] .text-warning:not(.btn) { color: #fbbf24 !important; }
html[data-theme="dark"] .progress { background-color: var(--sg-border); }
html[data-theme="dark"] .progress-bar.bg-dark { background-color: #94a3b8 !important; }
html[data-theme="dark"] .badge.bg-dark { background-color: #475569 !important; }
html[data-theme="dark"] .btn-light { --bs-btn-color: #e2e8f0; --bs-btn-bg: #222c42; --bs-btn-border-color: #334155; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2e3a56; --bs-btn-hover-border-color: #475569; --bs-btn-active-bg: #2e3a56; --bs-btn-active-color: #fff; }
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #8ab4ff; --bs-btn-border-color: #5a8be8; --bs-btn-hover-bg: #3b6fd4; --bs-btn-hover-border-color: #3b6fd4; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #3b6fd4; --bs-btn-active-border-color: #3b6fd4; }
html[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #64748b; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #fff; }
html[data-theme="dark"] .btn-outline-dark { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #64748b; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #fff; }

/* Tabel */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent; --bs-table-color: var(--sg-text);
    --bs-table-border-color: var(--sg-border);
    --bs-table-striped-bg: rgba(255,255,255,.035); --bs-table-striped-color: var(--sg-text);
    --bs-table-hover-bg: var(--sg-hover); --bs-table-hover-color: var(--sg-text);
    color: var(--sg-text);
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table > thead.table-light > tr > * {
    --bs-table-bg: var(--sg-surface-2); --bs-table-color: var(--sg-muted); --bs-table-border-color: var(--sg-border);
}
html[data-theme="dark"] .table tbody tr:hover { background-color: var(--sg-hover); }

/* Form */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--sg-surface-2); color: var(--sg-text); border-color: var(--sg-border);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--sg-surface-2); color: var(--sg-text);
    border-color: var(--sg-brand-2); box-shadow: 0 0 0 .2rem rgba(90,139,232,.25);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled { background-color: #171f33; color: #7c8aa0; }
html[data-theme="dark"] .input-group-text { background-color: var(--sg-surface-2); color: var(--sg-muted); border-color: var(--sg-border); }
html[data-theme="dark"] .form-check-input { background-color: var(--sg-surface-2); border-color: #475569; }
html[data-theme="dark"] .form-check-input:checked { background-color: #3b6fd4; border-color: #3b6fd4; }
html[data-theme="dark"] .form-label { color: #cbd5e1; }
html[data-theme="dark"] .form-text { color: var(--sg-muted); }

/* ---------- 6. Blok halaman yang memakai warna putih/abu hardcode ---------- */
/* Permukaan utama (putih -> surface) */
html[data-theme="dark"] .main-container,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .form-subsection,
html[data-theme="dark"] .type-selection,
html[data-theme="dark"] .autocomplete-list,
html[data-theme="dark"] .autocomplete-results,
html[data-theme="dark"] .checkbox-dropdown-btn,
html[data-theme="dark"] .checkbox-dropdown-panel,
html[data-theme="dark"] .alert-pensiun-card,
html[data-theme="dark"] .setup-card,
html[data-theme="dark"] .forgot-card,
html[data-theme="dark"] #sekolahList,
html[data-theme="dark"] .al-card,
html[data-theme="dark"] .al-filter,
html[data-theme="dark"] .al-empty,
html[data-theme="dark"] .al-table-wrap {
    background: var(--sg-surface); color: var(--sg-text); border-color: var(--sg-border);
}
/* Permukaan sekunder (abu muda -> surface-2) */
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .profile-info-item,
html[data-theme="dark"] .detail-item,
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .readonly-section,
html[data-theme="dark"] .stat-mini,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .type-card:not(.selected) {
    background: var(--sg-surface-2); color: var(--sg-text); border-color: var(--sg-border);
}
html[data-theme="dark"] .readonly-pill,
html[data-theme="dark"] .progress-pensiun,
html[data-theme="dark"] .count-badge,
html[data-theme="dark"] .badge-seimbang,
html[data-theme="dark"] .toggle-btn:not(.active) .toggle-badge { background: var(--sg-surface-2); color: var(--sg-muted); }
/* Kontrol toggle/tab (tidak menimpa state aktif) */
html[data-theme="dark"] .toggle-tab:not(.active),
html[data-theme="dark"] .toggle-btn:not(.active),
html[data-theme="dark"] .tab-btn:not(.active),
html[data-theme="dark"] .btn-filter:not(.active),
html[data-theme="dark"] .skenario-btn:not(.active),
html[data-theme="dark"] .btn-jp:not(.active),
html[data-theme="dark"] .btn-edit-anjab,
html[data-theme="dark"] .radio-option:not(.selected) {
    background: var(--sg-surface); color: var(--sg-text); border-color: var(--sg-border);
}
html[data-theme="dark"] .toggle-tab:not(.active):hover,
html[data-theme="dark"] .toggle-btn:not(.active):hover,
html[data-theme="dark"] .tab-btn:not(.active):hover,
html[data-theme="dark"] .btn-filter:not(.active):hover,
html[data-theme="dark"] .skenario-btn:not(.active):hover,
html[data-theme="dark"] .btn-jp:not(.active):hover,
html[data-theme="dark"] .btn-edit-anjab:hover,
html[data-theme="dark"] .radio-option:not(.selected):hover,
html[data-theme="dark"] .checkbox-dropdown-btn:hover { background: var(--sg-hover); border-color: var(--sg-brand-2); }
/* Info/filter aktif (biru muda -> biru transparan) */
html[data-theme="dark"] .active-filters,
html[data-theme="dark"] .alert-info-custom { background: rgba(59,130,246,.14); border-color: rgba(90,139,232,.45); color: var(--sg-text); }
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .contact-admin { background: rgba(148,163,184,.13); color: var(--sg-text); }
html[data-theme="dark"] .info-box p { color: var(--sg-text); }
/* Dropdown checkbox, autocomplete */
html[data-theme="dark"] .checkbox-dropdown-search,
html[data-theme="dark"] .checkbox-dropdown-actions,
html[data-theme="dark"] .checkbox-dropdown-search input { border-color: var(--sg-border); }
html[data-theme="dark"] .checkbox-dropdown-search input { background: var(--sg-surface-2); color: var(--sg-text); }
html[data-theme="dark"] .checkbox-dropdown-list label { color: var(--sg-text); }
html[data-theme="dark"] .checkbox-dropdown-list label:hover,
html[data-theme="dark"] .autocomplete-item:hover,
html[data-theme="dark"] .autocomplete-list .list-group-item:hover,
html[data-theme="dark"] #sekolahList .list-group-item:hover { background: var(--sg-hover); }
html[data-theme="dark"] .checkbox-dropdown-list label.checked { background: var(--sg-checked); color: var(--sg-link); }
html[data-theme="dark"] .autocomplete-list .list-group-item,
html[data-theme="dark"] #sekolahList .list-group-item { background: transparent; color: var(--sg-text); border-color: var(--sg-border); }
html[data-theme="dark"] .subsection-label,
html[data-theme="dark"] .al-table-wrap tbody td { border-color: var(--sg-border); }
/* Kolom nama sticky (guru, tendik, pensiun) harus opaque; header kolom tetap biru bawaan halaman */
html[data-theme="dark"] .table-container .table tbody tr td:nth-child(2) { background: var(--sg-surface); }
html[data-theme="dark"] .table-container .table tbody tr:hover td:nth-child(2) { background: var(--sg-hover); }
/* Baris hover khusus */
html[data-theme="dark"] .tabel-pensiun tbody tr:hover,
html[data-theme="dark"] .table-anjab tbody tr:hover,
html[data-theme="dark"] .table-rombel tbody tr:hover,
html[data-theme="dark"] .table-anjab tbody tr:hover td,
html[data-theme="dark"] .sidebar-sekolah .list-item:hover,
html[data-theme="dark"] .al-table-wrap tbody tr:hover { background: var(--sg-hover); }
html[data-theme="dark"] .al-table-wrap thead th { background: var(--sg-surface-2); color: var(--sg-muted); }
/* Input rombel (status simpan) */
html[data-theme="dark"] .rombel-input { background: var(--sg-surface-2); color: var(--sg-text); border-color: var(--sg-border); }
html[data-theme="dark"] .rombel-input.saving { background: rgba(245,158,11,.16); }
html[data-theme="dark"] .rombel-input.saved  { background: rgba(34,197,94,.16); }
html[data-theme="dark"] .rombel-input.error  { background: rgba(239,68,68,.18); }

/* Baris & badge status pensiun */
html[data-theme="dark"] tr.row-merah  { background-color: rgba(239,68,68,.14) !important; }
html[data-theme="dark"] tr.row-kuning { background-color: rgba(245,158,11,.14) !important; }
html[data-theme="dark"] tr.row-ungu   { background-color: rgba(168,85,247,.16) !important; }
html[data-theme="dark"] tr.row-merah:hover  { background-color: rgba(239,68,68,.24) !important; }
html[data-theme="dark"] tr.row-kuning:hover { background-color: rgba(245,158,11,.24) !important; }
html[data-theme="dark"] tr.row-ungu:hover   { background-color: rgba(168,85,247,.26) !important; }
html[data-theme="dark"] .badge-merah  { background-color: rgba(239,68,68,.22) !important;  color: #fca5a5 !important; }
html[data-theme="dark"] .badge-kuning { background-color: rgba(245,158,11,.22) !important; color: #fcd34d !important; }
html[data-theme="dark"] .badge-ungu   { background-color: rgba(168,85,247,.22) !important; color: #d8b4fe !important; }

/* Teks judul/label yang di-hardcode biru tua/abu gelap */
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .stats-section-title,
html[data-theme="dark"] .subsection-label,
html[data-theme="dark"] .form-section-title,
html[data-theme="dark"] .popup-header,
html[data-theme="dark"] .popup-title,
html[data-theme="dark"] .stat-box .stat-val,
html[data-theme="dark"] .stat-mini .val,
html[data-theme="dark"] .breakdown-val,
html[data-theme="dark"] .autocomplete-item strong,
html[data-theme="dark"] .checkbox-dropdown-actions a,
html[data-theme="dark"] .page-link { color: #8ab4ff; }
html[data-theme="dark"] .page-item.active .page-link { color: #fff; }
html[data-theme="dark"] .stat-box .stat-val.minus,
html[data-theme="dark"] .lk-minus,
html[data-theme="dark"] .alert-pensiun-card .hari-badge { color: #f87171; }
html[data-theme="dark"] .stat-card .stat-label,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-box .stat-label,
html[data-theme="dark"] .stat-mini .lbl,
html[data-theme="dark"] .breakdown-label,
html[data-theme="dark"] .popup-label,
html[data-theme="dark"] .hint-text,
html[data-theme="dark"] .alert-pensiun-card .meta,
html[data-theme="dark"] .alert-pensiun-card .hari-label,
html[data-theme="dark"] .sidebar-sekolah .list-item .meta,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .pw-toggle,
html[data-theme="dark"] .password-toggle { color: var(--sg-muted); }
html[data-theme="dark"] .popup-header { border-color: var(--sg-border); }

/* ---------- 7. Fallback untuk style="" inline yang hardcode terang ---------- */
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"] { background: var(--sg-surface-2) !important; border-color: var(--sg-border) !important; }
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background:#fee2e2"] { background: rgba(239,68,68,.16) !important; }
html[data-theme="dark"] [style*="background:#fef9c3"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background:#fff7ed"] { background: rgba(245,158,11,.16) !important; }
html[data-theme="dark"] [style*="background:#f0fdf4"] { background: rgba(34,197,94,.14) !important; }
html[data-theme="dark"] [style*="background:#fdf4ff"] { background: rgba(217,70,239,.14) !important; }
html[data-theme="dark"] [style*="color:#991b1b"] { color: #fca5a5 !important; }
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color:#64748b"] { color: var(--sg-muted) !important; }
html[data-theme="dark"] [style*="border:1px solid #e0e0e0"] { border-color: var(--sg-border) !important; }

/* ---------- 8. Pencarian global di navbar ---------- */
html[data-theme="dark"] .gs-dropdown { background: var(--sg-surface); box-shadow: 0 8px 30px rgba(0,0,0,.6); border: 1px solid var(--sg-border); }
html[data-theme="dark"] .gs-group-label { color: var(--sg-muted); }
html[data-theme="dark"] .gs-item:hover { background: var(--sg-hover); }
html[data-theme="dark"] .gs-item-label { color: var(--sg-text); }
html[data-theme="dark"] .gs-item-sub { color: var(--sg-muted); }
html[data-theme="dark"] .gs-item-meta,
html[data-theme="dark"] .gs-empty { color: #7c8aa0; }
html[data-theme="dark"] .gs-divider { border-color: var(--sg-border); }
html[data-theme="dark"] .gs-dropdown mark { background: #854d0e !important; color: #fef9c3; }

/* ---------- 9. DataTables ---------- */
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--sg-muted); }
html[data-theme="dark"] table.dataTable > thead > tr > th,
html[data-theme="dark"] table.dataTable > thead > tr > td,
html[data-theme="dark"] table.dataTable > tfoot > tr > th { border-color: var(--sg-border); }
html[data-theme="dark"] table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { box-shadow: inset 0 0 0 9999px rgba(255,255,255,.03); }
html[data-theme="dark"] table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(138,180,255,.08); }

/* ---------- 10. SweetAlert2 ---------- */
html[data-theme="dark"] .swal2-popup { background: #1b2336; color: #e2e8f0; border: 1px solid #334155; }
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: #e2e8f0; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select { background: #0f172a; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .swal2-footer { border-color: #334155; color: #94a3b8; }
html[data-theme="dark"] .swal2-validation-message { background: #222c42; color: #e2e8f0; }

/* ---------- 11. Peta (Leaflet) ---------- */
html[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.75); }
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: var(--sg-surface); color: var(--sg-text); }
html[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--sg-muted); }
html[data-theme="dark"] .leaflet-bar a { background-color: #1b2336; color: #e2e8f0; border-bottom-color: #334155; }
html[data-theme="dark"] .leaflet-bar a:hover { background-color: #243049; }
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(15,23,42,.8) !important; color: #94a3b8 !important; }
html[data-theme="dark"] .leaflet-control-attribution a { color: #8ab4ff !important; }

/* ---------- 12. Halaman khusus ---------- */
/* guru/activity_log_full.php */
html[data-theme="dark"] {
    --al-primary: #8ab4ff; --al-primary-light: rgba(59,130,246,.18);
    --al-success: #4ade80; --al-success-light: rgba(34,197,94,.16);
    --al-danger: #f87171;  --al-danger-light: rgba(239,68,68,.16);
    --al-warning: #fbbf24; --al-warning-light: rgba(245,158,11,.16);
    --al-text: #e2e8f0; --al-sub: #94a3b8; --al-border: #334155; --al-bg: #222c42; --al-card: #1b2336;
}
html[data-theme="dark"] .al-btn-back:hover { background: rgba(59,130,246,.3); }
html[data-theme="dark"] .al-select { background: var(--sg-surface-2); color: var(--sg-text); }
html[data-theme="dark"] .al-pagination .page-item.disabled .page-link { color: #64748b; }
html[data-theme="dark"] .al-empty i { color: #475569; }

/* login.php (memakai variabel --gray-* / --blue-*) */
html[data-theme="dark"] {
    --gray-50: #1b2336; --gray-100: #0f172a; --gray-300: #334155; --gray-500: #94a3b8;
    --gray-700: #cbd5e1; --gray-900: #f1f5f9; --blue-bg: #1e3a5f; --text-main: #c7d2fe;
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .announce-featured { background: var(--sg-surface); }
html[data-theme="dark"] .form-control-custom { background: var(--sg-surface-2); color: var(--gray-900); }
html[data-theme="dark"] .site-header-text h1,
html[data-theme="dark"] .forgot-link { color: #8ab4ff; }
html[data-theme="dark"] .forgot-link:hover { color: #b3ceff; }

/* ---------- 13. Aksesibilitas ---------- */
@media (prefers-reduced-motion: reduce) {
    html, .theme-toggle-nav, .theme-fab { transition: none !important; }
}