/* ============================================================
   SIPKL - Lapisan Tema
   ------------------------------------------------------------
   SELALU dimuat SESUDAH style.css, jadi menang di urutan cascade.

   Isi tiga bagian:
   1. Token cadangan (dipakai kalau blok inline dari tema.php
      tidak ada -- mis. halaman statis).
   2. Pemetaan token: mengganti warna tema yang TADANYA
      hardcoded. Tanpa bagian ini, ganti tema hampir tidak
      kelihatan di portal, halaman login, dan panel role.
   3. Mode gelap: membalik token permukaan + menyapu permukaan
      putih dan teks gelap yang masih hardcoded.

   Menambah tema ke-7 cukup di tema_katalog() (PHP). File ini
   tidak perlu diubah kecuali ada selector baru yang masih
   hardcoded.
   ============================================================ */

:root {
  --t-primary: #10b981;
  --t-primary-2: #059669;
  --t-dark: #047857;
  --t-soft: #f0fdf4;
  --t-soft-2: #ecfdf5;
  --t-line: #bbf7d0;
  --t-glow: rgba(5, 150, 105, .55);
  --t-rgb: 16, 185, 129;
  /* Aksen versi terang: dipakai sebagai TEKS di atas latar gelap.
     Nilai stand-in ini hanya untuk halaman tanpa blok inline. */
  --t-teks: #047857;
}

/* ============================================================
   2. PEMETAAN TOKEN (semua tema)
   ============================================================ */

/* ---------------- Latar & aksen utama ---------------- */
.admin-dashboard {
  --admin-navy: var(--green-2);
  --admin-navy-2: var(--green-dark);
  --admin-gold: var(--amber);
  background:
    radial-gradient(900px 480px at 88% -12%, var(--t-glow), transparent 62%),
    radial-gradient(700px 420px at -12% 18%, rgba(245, 158, 11, .11), transparent 55%),
    var(--bg);
}

/* ---------------- Sidebar admin ---------------- */
.admin-nav-link i { color: var(--t-primary-2); }

.admin-nav-link:hover {
  color: var(--t-teks);
  background: var(--t-soft);
}

.admin-nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--t-primary), var(--t-primary-2));
  box-shadow: 0 8px 16px var(--t-glow);
}

.admin-nav-summary i { color: var(--t-teks); }

.admin-nav-box[open] .admin-nav-summary {
  color: #fff;
  background: var(--t-dark);
}

.admin-nav-box[open] .admin-nav-summary i { color: #fff; }

.admin-nav-box { border-color: var(--t-line); }
.admin-nav-sub .admin-nav-link.active { background: var(--t-primary); }

/* ---------------- Kartu & tombol admin ---------------- */
.admin-stat-top i {
  color: var(--t-primary-2);
  background: var(--t-soft-2);
}

.admin-welcome {
  background: var(--t-soft);
  border-color: var(--t-line);
}

.admin-logout {
  color: var(--t-teks);
  background: var(--t-soft);
  border-color: var(--t-line);
  box-shadow: 0 6px 12px var(--t-glow);
}

.admin-logout:hover {
  color: var(--t-teks);
  background: var(--t-soft-2);
}

.admin-profile-avatar,
.admin-backup-icon {
  color: var(--t-primary-2);
  background: var(--t-soft-2);
}

.admin-photo-link { color: var(--t-teks); }

.admin-data-table thead th {
  color: var(--t-teks);
  background: var(--t-soft);
  border-bottom-color: var(--t-line);
}

.admin-chart-legend i { background: var(--t-primary-2); }

.admin-bar {
  background: linear-gradient(180deg, var(--t-primary), var(--t-primary-2));
}

.admin-cari input {
  border-color: var(--t-line);
  background: var(--t-soft);
}

.admin-bulk-bar { border-bottom-color: var(--t-line); }

.admin-clear-mode:has(input:checked) {
  background: var(--t-soft);
  border-color: var(--t-primary-2);
}

/* ---------------- Tombol umum (semua role) ---------------- */
.btn-lumine {
  background: linear-gradient(135deg, var(--t-primary-2), var(--t-dark));
  box-shadow: 0 14px 26px -12px var(--t-glow);
}

.btn-lumine:hover { box-shadow: 0 18px 32px -12px var(--t-glow); }

.btn-ghost-primary {
  color: var(--t-teks);
  background: var(--t-soft);
  border-color: var(--t-line);
}

.btn-ghost-primary:hover {
  color: var(--t-teks);
  background: var(--t-soft-2);
}

.badge-soft .bi { color: var(--t-primary); }

/* ---------------- Brand di topbar role ---------------- */
.app-brand-ic,
.app-brand-ic.varian-hijau,
.app-brand-ic.varian-biru,
.app-brand-ic.varian-ungu,
.app-brand-ic.varian-amber,
.app-brand-ic.varian-rose {
  background: linear-gradient(135deg, var(--t-primary), var(--t-primary-2));
}

.app-akun {
  background: var(--t-soft);
  border-color: var(--t-line);
  color: var(--t-teks);
}

.app-keluar {
  color: var(--t-teks);
  background: var(--t-soft);
  border-color: var(--t-line);
}

.app-keluar:hover { background: var(--t-soft-2); }

/* ---------------- Kartu role (Murid / Guru / DUDI) ---------------- */
.green-top {
  background: linear-gradient(135deg, var(--t-primary), var(--t-primary-2));
}

.t-ic {
  color: var(--t-primary-2);
  background: var(--t-soft-2);
}

.card-title-row h3 { color: var(--t-teks); }

.kic.cc-green,
.kpi .kic.cc-green { color: var(--t-primary-2); background: var(--t-soft-2); }

.btn-cari {
  color: var(--t-teks);
  background: var(--t-soft);
  border-color: var(--t-line);
}

.seg-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--t-primary), var(--t-primary-2));
  border-color: transparent;
}

.seg-tabs button { border-color: var(--t-line); }

.form-check-status:hover {
  background: var(--t-soft-2);
  border-color: var(--t-primary-2);
}

.form-check-status .form-check-input:checked {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
}

.filt-reset { color: var(--t-teks); border-color: var(--t-line); }
.filt-reset:hover { background: var(--t-soft-2); }

.btn-icon:hover {
  color: var(--t-teks);
  background: var(--t-soft-2);
  border-color: var(--t-line);
}

.rubrik-box { border-color: var(--t-line); }
.rubrik-badge { background: var(--t-soft-2); color: var(--t-teks); }
.rubrik-toggle:hover { background: var(--t-soft-2); }

.abs-badge.is-hadir { background: var(--t-soft-2); color: var(--t-teks); }

/* ---------------- Panel Operator ---------------- */
.op-lock-ic { color: var(--muted); background: var(--t-soft-2); }
.op-lock-ic.is-ok { color: var(--t-teks); background: var(--t-soft-2); }

.op-home-item:hover {
  color: var(--t-teks);
  background: var(--t-soft);
  border-color: var(--t-line);
}

.op-home-item > i:first-child,
.op-home-item:hover .op-home-panah { color: var(--t-primary-2); }

.op-home-judul { color: var(--muted); }
.op-lock-alert { border-color: rgba(220, 38, 38, .45); }

/* ============================================================
   PORTAL (halaman depan)
   ------------------------------------------------------------
   Sebelumnya semua ini hijau hardcoded, sehingga ganti tema
   tidak terlihat sama sekali di halaman depan.
   ============================================================ */
.portal-logo {
  background: linear-gradient(135deg, var(--t-primary), var(--t-dark));
  box-shadow: 0 28px 52px -22px var(--t-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.portal-logo::after { border-color: var(--t-line); }

.portal h1 .accent {
  background: linear-gradient(90deg, var(--t-dark), var(--t-primary) 45%, var(--amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blob-g {
  background: radial-gradient(circle at 30% 30%, rgba(var(--t-rgb), .30), transparent 62%);
}

.mesh {
  background-image: radial-gradient(rgba(var(--t-rgb), .16) 1px, transparent 1.4px);
}

.portal .label { color: var(--ink); }
.portal .label::after {
  background: linear-gradient(90deg, var(--t-primary), var(--amber));
}
.portal-footer .bi { color: var(--t-primary); }
.portal-footer { background: rgba(var(--t-rgb), .06); }

/* Kartu peran tetap 4 warna berbeda -- itu sengaja, supaya
   Murid / DUDI / Guru / Admin mudah dibedakan. Yang ikut berubah
   hanya hover-nya. */
.rc-g:hover { border-color: var(--t-primary-2); box-shadow: 0 34px 54px -26px var(--t-glow); }

/* ============================================================
   HALAMAN LOGIN
   ============================================================ */
.auth-body {
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(var(--t-rgb), .20), transparent 60%),
    radial-gradient(760px 480px at 12% 100%, rgba(245, 158, 11, .14), transparent 55%),
    var(--bg);
}

.auth-body::before {
  background-image: radial-gradient(rgba(var(--t-rgb), .14) 1px, transparent 1.4px);
}

.auth-back {
  background: rgba(var(--t-rgb), .10);
  border-color: var(--t-line);
}

.auth-back:hover {
  color: var(--t-teks);
  background: var(--t-soft);
  border-color: var(--t-primary-2);
}

.auth-card {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--t-primary-2), rgba(245, 158, 11, .45)) border-box;
}

.auth-tabs .nav-link.active {
  background: linear-gradient(135deg, var(--t-primary), var(--t-dark));
  box-shadow: 0 10px 20px -10px var(--t-glow);
}

.auth-hint { background: var(--t-soft); border-color: var(--t-line); color: var(--t-teks); }

/* ============================================================
   HALAMAN CETAK (A4)
   ============================================================ */
.cetak-kop { border-bottom-color: var(--t-primary-2); }
.cetak-kop-logo { border-color: var(--t-primary-2); background: var(--t-soft-2); color: var(--t-teks); }
.cetak-logo-huruf { color: var(--t-teks); }
.cetak-blok-kepala i { background: var(--t-primary-2); }
.cetak-judul strong { color: var(--t-teks); }
.cetak-ukur-track i { background: var(--t-primary-2); }
.cetak-aksi { background: var(--t-dark); }
.cetak-aksi button,
.cetak-aksi a { color: #fff; background: var(--t-primary); }
.cetak-sehat .cetak-sehat-angka { color: var(--t-teks); }
.cetak-ttd b { color: var(--t-teks); }
.pi-band,
.pi-footer .sig b { color: var(--t-teks); }
.rk-kop h2 { color: var(--t-teks); }

/* ============================================================
   2b. MODE TERANG -- perkuat nuansa per tema
   ------------------------------------------------------------
   --bg dan --surface sudah bernuansa (dikirim dari tema.php).
   Komponen yang tadinya hardcoded netral ikut menyesuaikan supaya
   tidak terlihat "nempel" di atas latar bertinted.
   ============================================================ */

/* Sidebar admin: nuansa tema, bukan abu-abu netral.
   Pakai --t-soft (bukan color-mix) supaya tidak bergantung
   browser 2023+; di mode gelap ditimpa jadi --d-1 di bawah. */
.admin-sidebar { background: var(--t-soft); }

/* Shell utama butuh garis tipis: latar & kartu tak lagi putih polos */
.admin-shell,
.op-home,
.op-lock {
  border: 1px solid var(--t-line);
  background: var(--surface);
}

.admin-topbar,
.app-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--t-line);
}

.admin-data-table thead th,
.admin-grade-table thead th,
.admin-student-table thead th,
.admin-op-table thead th { background: var(--t-soft); }

.admin-grade-table tbody tr:hover td,
.admin-student-table tbody tr:hover td,
.admin-data-table tbody tr:hover td { background: var(--t-soft); }

.admin-nav-box {
  background: var(--surface);
  border-color: var(--t-line);
}

.admin-nav-box[open] { border-color: var(--t-primary-2); }

.seg-tabs,
.filt-bar {
  background: var(--surface);
  border-color: var(--t-line);
}

/* ============================================================
   3. MODE GELAP
   ------------------------------------------------------------
   Token --d-1/--d-2/--d-3/--d-line/--d-teks/--d-lembut dikirim
   inline oleh tema_blok_css() dan BEDA PER TEMA, jadi mode gelap
   ikut bernuansa. Kalau didefinisikan di sini dengan abu-abu
   netral, hasilnya persis seperti mode gelap yang terasa datar.
   ============================================================ */
html.tema-aktif[data-mode="gelap"] body,
html.tema-aktif[data-mode="gelap"] .app-shell,
html.tema-aktif[data-mode="gelap"] .dudi-shell,
html.tema-aktif[data-mode="gelap"] .admin-dashboard,
html.tema-aktif[data-mode="gelap"] .admin-shell,
html.tema-aktif[data-mode="gelap"] .auth-body,
html.tema-aktif[data-mode="gelap"] .portal {
  background: var(--d-1);
  color: var(--d-teks);
}

html.tema-aktif[data-mode="gelap"] .admin-dashboard {
  background:
    radial-gradient(900px 480px at 88% -12%, var(--t-glow), transparent 62%),
    radial-gradient(700px 420px at -12% 18%, rgba(245, 158, 11, .07), transparent 55%),
    var(--d-1);
}

/* ---------------- Permukaan: kartu & panel ---------------- */
html.tema-aktif[data-mode="gelap"] :is(
  .app-card,
  .admin-table-card, .admin-form-card, .admin-list-card, .admin-chart-card,
  .admin-op-card, .admin-akses-card, .admin-rubrik-table-card, .admin-settings-card,
  .admin-murid-table-card, .admin-dudi-table-card, .admin-guru-table-card,
  .admin-instruktur-table-card, .admin-profile-card, .admin-profile-meta,
  .admin-rubric-primary, .admin-rubric-secondary, .admin-bulk-bar, .admin-bulk-hapus,
  .admin-akses-kaki, .admin-cari input, .admin-op-note, .admin-op-lock,
  .admin-pretitle, .admin-page-head, .admin-topbar, .admin-sidebar,
  .seg-tabs, .seg-tabs button, .filt-bar, .card-block, .ident-grid,
  .search-group, .kpi, .kpi-row .kpi, .chip-card, .nilai-guard,
  .rubrik-box, .welcome-band, .pi-band, .pi-body, .rk-id div, .rk-ringkas,
  .op-lock, .op-home, .app-topbar, .auth-card, .auth-back, .auth-tabs .nav-link,
  .admin-cari-panel, .form-check-status, .abs-legend, .absensi-cek-item,
  .pi-item, .rk-hadir, .table-responsive
) {
  background: var(--d-2);
  border-color: var(--d-line);
  color: var(--d-teks);
}

html.tema-aktif[data-mode="gelap"] :is(
  .admin-topbar, .app-topbar, .app-sidebar, .admin-bulk-bar
) {
  border-bottom-color: var(--d-line);
  box-shadow: 0 2px 10px -6px rgba(0, 0, 0, .6);
}

html.tema-aktif[data-mode="gelap"] .admin-sidebar { background: var(--d-1); }

/* Garis tipis supaya shell tidak terlihat datar di atas latar gelap */
html.tema-aktif[data-mode="gelap"] .admin-shell,
html.tema-aktif[data-mode="gelap"] .op-home,
html.tema-aktif[data-mode="gelap"] .op-lock,
html.tema-aktif[data-mode="gelap"] .auth-card {
  border: 1px solid var(--d-line);
}

html.tema-aktif[data-mode="gelap"] .admin-shell { box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); }

/* Elemen di dalam sidebar tetap perlu dibaca di atas latar gelap */
html.tema-aktif[data-mode="gelap"] .admin-nav-link { color: var(--d-lembut); }
html.tema-aktif[data-mode="gelap"] .admin-nav-link i { color: var(--t-primary); }
html.tema-aktif[data-mode="gelap"] .admin-nav-link:hover { color: var(--d-teks); }
html.tema-aktif[data-mode="gelap"] .admin-nav-box { border-color: var(--d-line); }
html.tema-aktif[data-mode="gelap"] .admin-nav-summary { color: var(--d-lembut); }
html.tema-aktif[data-mode="gelap"] .admin-nav-box[open] .admin-nav-summary { color: #fff; }
html.tema-aktif[data-mode="gelap"] .admin-nav-box[open] .admin-nav-link { color: #fff; }
html.tema-aktif[data-mode="gelap"] .admin-nav-box[open] .admin-nav-link i { color: #fff; }
html.tema-aktif[data-mode="gelap"] .admin-nav-box[open] .admin-nav-link:not(.active) { color: rgba(255, 255, 255, .82); }

/* ---------------- Teks & judul ---------------- */
html.tema-aktif[data-mode="gelap"] :is(h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold) { color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] :is(
  p, label, li, .text-muted, .form-text, .form-label,
  .field-label, .admin-field > span, .pi-note, .cetak-kaki, .admin-pretitle,
  .card-sub, .filt-label, .cc, .text-secondary
) { color: var(--d-lembut); }

/* PENTING: warna teks TIDAK dipaksakan per elemen (td/span/small).
   Kalau dipaksakan, specificity-nya mengalahkan badge & pill di
   dalam sel -- predikat A-E, status Hadir, badge warna -- sehingga
   teksnya ikut jadi abu-abu di atas latar badge yang terang dan
   praktis hilang. Warna teks sel TABEL diwarisi dari <table>
   di bawah, jadi elemen yang punya warna sendiri tetap utuh. */
html.tema-aktif[data-mode="gelap"] :is(
  table.data-table,
  table.admin-grade-table,
  table.admin-student-table,
  table.admin-op-table,
  table.nilai-table,
  table.cetak-tabel,
  .admin-data-table,
  .abs-grid
) { color: var(--d-lembut); }

html.tema-aktif[data-mode="gelap"] :is(
  .card-title-row h3, .admin-card-heading h3, .admin-page-head h2, .op-lock-judul,
  .op-home-head h1, .kpi b, .kpi small b, .ident-grid b, .pi-item b, .rk-id b
) { color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] :is(
  .ti, .admin-profile-card h2, .admin-profile-meta strong, .admin-settings-card-head h3,
  .filt-label, .admin-school-meta, .admin-alert
) { color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] .admin-school-meta span { color: var(--d-lembut); }

/* ---------------- Tabel ---------------- */
html.tema-aktif[data-mode="gelap"] :is(
  table.data-table thead th,
  table.admin-grade-table thead th,
  table.admin-student-table thead th,
  table.admin-op-table thead th,
  table.nilai-table thead th,
  table.cetak-tabel th,
  .admin-data-table thead th,
  .abs-grid thead th
) {
  background: var(--d-3);
  color: var(--d-teks);
  border-bottom-color: var(--d-line);
}

html.tema-aktif[data-mode="gelap"] :is(
  table.data-table tbody td,
  table.admin-grade-table tbody td,
  table.admin-student-table tbody td,
  table.admin-op-table tbody td,
  table.nilai-table tbody td,
  table.cetak-tabel td,
  .admin-data-table tbody td,
  .abs-grid tbody td
) {
  background: transparent;
  border-bottom-color: var(--d-line);
  /* Sengaja TIDAK ada `color` di sini. Badge & pill (predikat A-E,
     status Hadir/Sakit, kode) ada DI DALAM td dan punya warna
     sendiri. Memaksa `color` di sini akan mengalahkan warna badge
     dan menjadikannya abu-abu di atas latar terang -- itu penyebab
     beberapa tulisan "hilang". Warna teks sel tabel diwarisi dari
     elemen <table> (lihat blok di bawah). */
}

html.tema-aktif[data-mode="gelap"] :is(
  table.cetak-tabel tbody tr:nth-child(even) td,
  table.data-table tbody tr.row-absen-murid td
) { background: var(--d-3); }

html.tema-aktif[data-mode="gelap"] :is(
  table.data-table tbody tr:hover td,
  .admin-data-table tbody tr:hover td,
  .admin-grade-table tbody tr:hover td,
  .admin-student-table tbody tr:hover td,
  table.nilai-table tbody tr:hover td
) { background: var(--d-3); }

html.tema-aktif[data-mode="gelap"] :is(.admin-grade-table, .admin-student-table, .admin-op-table, .data-table) td small { color: var(--d-lembut); }

/* ---------------- Form ---------------- */
html.tema-aktif[data-mode="gelap"] :is(
  input, select, textarea, .form-select, .form-control, .form-field, .form-check-input
) {
  background: var(--d-1);
  color: var(--d-teks);
  border-color: var(--d-line);
}

html.tema-aktif[data-mode="gelap"] :is(input, textarea)::placeholder { color: #64748b; }
html.tema-aktif[data-mode="gelap"] .form-select { background-image: none; }
html.tema-aktif[data-mode="gelap"] select option { background: var(--d-2); color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] .form-check-input { background-color: var(--d-3); border-color: var(--d-line); }
html.tema-aktif[data-mode="gelap"] .form-check-input:checked { background-color: var(--t-primary); border-color: var(--t-primary); }

/* ---------------- Bootstrap: modal, dropdown, alert ---------------- */
html.tema-aktif[data-mode="gelap"] .modal-content,
html.tema-aktif[data-mode="gelap"] .modal-header,
html.tema-aktif[data-mode="gelap"] .modal-body,
html.tema-aktif[data-mode="gelap"] .modal-footer,
html.tema-aktif[data-mode="gelap"] .dropdown-menu,
html.tema-aktif[data-mode="gelap"] .list-group-item {
  background: var(--d-2);
  border-color: var(--d-line);
  color: var(--d-teks);
}

html.tema-aktif[data-mode="gelap"] .dropdown-item { color: var(--d-lembut); }
html.tema-aktif[data-mode="gelap"] .dropdown-item:hover,
html.tema-aktif[data-mode="gelap"] .dropdown-item:focus { background: var(--d-3); color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] .btn-light {
  background: var(--d-3);
  border-color: var(--d-line);
  color: var(--d-teks);
}

html.tema-aktif[data-mode="gelap"] .btn-close { filter: invert(1) grayscale(1); }

html.tema-aktif[data-mode="gelap"] :is(.alert-danger, .alert-warning, .alert-info, .alert-success, .alert-secondary) {
  border: 1px solid var(--d-line);
  color: var(--d-teks);
}

html.tema-aktif[data-mode="gelap"] :is(.table, .table > :not(caption) > * > *) { border-color: var(--d-line); }

/* ---------------- Badge & status ---------------- */
/* ---------------- Badge & status ----------------
   Badge di dalam tabel (predikat A-E, status Hadir/Sakit, dsb)
   punya latar TERANG dan teks gelap sendiri. Di mode gelap
   latar menjadi clash kalau dibiarkan, jadi dibalik: latar
   transparan gelap + teks terang. Kontrasnya jauh lebih
   terbaca daripada abu-abu di atas abu-abu. */
html.tema-aktif[data-mode="gelap"] :is(
  .admin-grade-predicate,
  .nilai-predikat,
  .admin-status,
  .admin-attendance-status,
  .admin-dudi-status,
  .cetak-status,
  .admin-pretitle-badge
) {
  background: var(--t-soft-2);
  color: var(--t-teks);
  border: 1px solid var(--d-line);
}

html.tema-aktif[data-mode="gelap"] .badge.text-bg-light,
html.tema-aktif[data-mode="gelap"] .badge.text-bg-light.border {
  background: var(--d-3);
  color: var(--d-teks);
  border-color: var(--d-line);
}

html.tema-aktif[data-mode="gelap"] code {
  background: var(--d-3);
  color: var(--d-teks);
}

html.tema-aktif[data-mode="gelap"] :is(.thumb-foto, .absensi-thumb, .cetak-mini-foto) { border-color: var(--d-line); }

html.tema-aktif[data-mode="gelap"] .admin-photo-link,
html.tema-aktif[data-mode="gelap"] .admin-cari-panel a,
html.tema-aktif[data-mode="gelap"] .app-footer-nav a,
html.tema-aktif[data-mode="gelap"] .pi-item a,
html.tema-aktif[data-mode="gelap"] .admin-rubric-reference-card a { color: var(--t-teks); }

html.tema-aktif[data-mode="gelap"] .admin-rubric-reference-card,
html.tema-aktif[data-mode="gelap"] .admin-rubric-qualification,
html.tema-aktif[data-mode="gelap"] .rubrik-list li { color: var(--d-lembut); }

/* Placeholder & teks mati harus tetap terbaca */
html.tema-aktif[data-mode="gelap"] :is(input, textarea)::placeholder { color: #7c8ba1; }
html.tema-aktif[data-mode="gelap"] .text-muted:empty::after { content: "\2014"; color: #64748b; }

/* Tombol nonaktif tidak boleh menyatu dengan latar */
html.tema-aktif[data-mode="gelap"] .btn:disabled,
html.tema-aktif[data-mode="gelap"] button:disabled { opacity: .55; filter: none; }

/* Lencana kategori di footer */
html.tema-aktif[data-mode="gelap"] .legend-sources .badge.text-bg-light,
html.tema-aktif[data-mode="gelap"] .abs-legend span { background: var(--d-3); color: var(--d-teks); }

/* ---------------- 2FA (Verifikasi Dua Faktor) ----------------
   Warna hardcoded di style.css (hijau/merah muda) akan terlihat
   menyilaukan di atas latar gelap, jadi semua permukaan, teks,
   dan border di sini ditimpa ke token mode gelap. */
html.tema-aktif[data-mode="gelap"] .admin-2fa-deskripsi { color: var(--d-lembut); }
html.tema-aktif[data-mode="gelap"] .admin-2fa-deskripsi b { color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] .admin-2fa-pill.is-aktif { color: var(--t-primary); }
html.tema-aktif[data-mode="gelap"] .admin-2fa-pill.is-menunggu { color: #fbbf24; }
html.tema-aktif[data-mode="gelap"] .admin-2fa-pill.is-off { color: var(--d-lembut); }

html.tema-aktif[data-mode="gelap"] .admin-2fa-status {
  background: var(--d-2);
  border-color: var(--d-line);
  border-left-color: var(--t-primary);
  color: var(--d-teks);
}
html.tema-aktif[data-mode="gelap"] .admin-2fa-status.is-bahaya {
  border-left-color: #f87171;
  color: var(--d-teks);
}
html.tema-aktif[data-mode="gelap"] .admin-2fa-status b { color: var(--d-teks); }

html.tema-aktif[data-mode="gelap"] .admin-2fa-aksi {
  background: var(--d-2);
  border-color: var(--d-line);
}
html.tema-aktif[data-mode="gelap"] .admin-2fa-aksi > b { color: var(--d-teks); }
html.tema-aktif[data-mode="gelap"] .admin-2fa-aksi > b i { color: var(--d-lembut); }
html.tema-aktif[data-mode="gelap"] .admin-2fa-aksi > span { color: var(--d-lembut); }
html.tema-aktif[data-mode="gelap"] .admin-2fa-aksi.is-bahaya { border-color: var(--d-line); }
html.tema-aktif[data-mode="gelap"] .admin-2fa-aksi.is-bahaya > b { color: #fca5a5; }

html.tema-aktif[data-mode="gelap"] .admin-2fa-input {
  background: var(--d-1);
  border-color: var(--d-line);
  color: var(--d-teks);
}
html.tema-aktif[data-mode="gelap"] .admin-2fa-input::placeholder { color: #64748b; }

html.tema-aktif[data-mode="gelap"] .admin-2fa-pending,
html.tema-aktif[data-mode="gelap"] .admin-2fa-kode {
  background: var(--d-2);
  border-color: var(--d-line);
  color: var(--d-teks);
}
html.tema-aktif[data-mode="gelap"] .admin-2fa-pending { border-left-color: #38bdf8; }
html.tema-aktif[data-mode="gelap"] .admin-2fa-kode { border-left-color: #fbbf24; }
html.tema-aktif[data-mode="gelap"] .admin-2fa-nomor { background: #38bdf8; color: #082f49; }

html.tema-aktif[data-mode="gelap"] .admin-2fa-secret,
html.tema-aktif[data-mode="gelap"] .admin-2fa-uri,
html.tema-aktif[data-mode="gelap"] .admin-2fa-kode code {
  background: var(--d-1);
  border-color: var(--d-line);
  color: var(--d-teks);
}

/* ---------------- Footer ----------------
   Sebelumnya footer adalah satu-satunya komponen yang TIDAK ikut
   tema: latar putih polos + ikon logo hardcoded hijau, sementara
   halaman sudah punya nuansa per tema. Akibatnya di tema Biru/Merah
   footer terlihat seperti tempelan hasil salin.

   Catatan token: TIDAK ada --t-lembut. Yang tersedia hanya
   --t-primary/-2/-dark, --t-soft/-2, --t-line, --t-glow, --t-rgb,
   --t-teks. Untuk teks redup pakai --muted, yang sudah otomatis
   dibalik oleh tema_blok_css() antara terang dan gelap. */
.app-footer-terang {
  background: var(--t-soft);
  border-color: var(--t-line);
  color: var(--muted);
}

.app-footer-mark {
  background: linear-gradient(135deg, var(--t-primary), var(--t-dark));
}

/* Logo asli tetap di atas putih: sebagian logo sekolah transparan
   dan jadi tidak terlihat kalau latarnya ikut bertinted. */
.app-footer-mark img { background: #fff; }

.app-footer-text strong { color: var(--t-teks); }
.app-footer-text small { color: var(--muted); }
.app-footer-nav a { color: var(--muted); }
.app-footer-nav a:hover { color: var(--t-teks); }
.app-footer-meta { color: var(--muted); }

/* Varian `gelap` tidak di-set halaman mana pun saat ini (semua
   pakai default `terang`), tapi selector-nya di style.css punya
   specificity lebih tinggi dan warnanya hardcoded. Ditimpa di sini
   dengan specificity yang sama supaya tidak menembus tema kalau
   suatu saat dipakai. */
.app-footer-gelap .app-footer-text strong { color: var(--t-teks); }
.app-footer-gelap .app-footer-text small { color: var(--muted); }
.app-footer-gelap .app-footer-nav a { color: var(--muted); }

html.tema-aktif[data-mode="gelap"] .app-footer-terang,
html.tema-aktif[data-mode="gelap"] .app-footer-gelap,
html.tema-aktif[data-mode="gelap"] .app-footer,
html.tema-aktif[data-mode="gelap"] .portal-footer {
  background: var(--d-1);
  border-color: var(--d-line);
  color: var(--d-lembut);
}

html.tema-aktif[data-mode="gelap"] .app-footer-text strong { color: var(--d-teks); }
html.tema-aktif[data-mode="gelap"] .app-footer-text small,
html.tema-aktif[data-mode="gelap"] .app-footer-meta { color: var(--d-lembut); }

html.tema-aktif[data-mode="gelap"] .app-footer-mark {
  background: linear-gradient(135deg, var(--t-primary-2), var(--t-dark));
  box-shadow: inset 0 0 0 1px var(--d-line);
}

/* ---------------- Cetak: mode gelap tetap cetak di kertas putih ----------------
   Catatan penting: kalau user memilih mode gelap lalu mencetak
   PDF, dokumennya TIDAK ikut gelap (tetap hitam-putih di kertas).
   Hasil cetak resmi selalu lebih baik di kertas putih. */
@media print {
  html.tema-aktif[data-mode="gelap"] body.cetak,
  html.tema-aktif[data-mode="gelap"] .cetak-kartu,
  html.tema-aktif[data-mode="gelap"] .cetak-kartu :is(h1, h2, h3, p, span, b, td, th) {
    background: #fff !important;
    color: #1e293b !important;
  }

  html.tema-aktif[data-mode="gelap"] .cetak-kartu :is(td, th) { border-color: #cbd5e1 !important; }
}