/* =====================================================================
   DESIGN TOKEN — SATU SUMBER KEBENARAN UNTUK SEMUA WARNA
   ---------------------------------------------------------------------
   Semua warna permukaan/teks/garis di aplikasi ini WAJIB memakai
   variabel di bawah, JANGAN hardcode hex lagi. Dengan begitu mode gelap
   cukup mendefinisikan ulang variabel yang sama di blok
   html[data-theme="dark"] dan seluruh halaman (termasuk elemen yang
   dibuat lewat JavaScript dengan inline style) ikut berubah otomatis —
   CSS variable memang berlaku di atribut style="" inline.

   Aturan pakai:
   - --heading  : warna TEKS judul/angka penting (dulu var(--navy))
   - --navy     : hanya untuk LATAR gelap (sidebar, tombol, header tabel)
   - --card/--surface-soft/--surface-alt : tingkatan permukaan terang->abu
   - --border/--border-soft/--border-line: garis tegas -> paling halus
   - --ok/--warn/--bad/--info-*          : pasangan latar+teks status
   ===================================================================== */
:root{
  color-scheme: light;
  --navy:#1B3358; --navy-dark:#122341; --gold:#F5B942; --mint:#2FBF71;
  --bg:#F4F6FB; --card:#FFFFFF; --text:#1F2937; --muted:#6B7280; --danger:#E0503B;
  /* Warna teks transliterasi (cara baca) hafalan. Dibuat token tersendiri
     karena sebelumnya memakai --navy — padahal --navy adalah warna LATAR
     gelap, sehingga di mode gelap teksnya nyaris tak terbaca. */
  --latin:#2A63A8;
  --radius:14px;
  /* --- palet tambahan khusus tampilan siswa (ramah anak) --- */
  --sky:#3FB6F0; --sky-soft:#E4F5FF;
  --sun:#FFC93C; --sun-soft:#FFF6DE;
  --mint-soft:#DEFBF0;
  --coral:#FF7A6E; --coral-soft:#FFE9E6;
  --lav:#9C8CF2; --lav-soft:#EFEBFF;

  /* --- token semantik --- */
  --heading:#1B3358;
  --sidebar-bg:#1B3358; --sidebar-text:#C9D3E5; --sidebar-active:#FFFFFF;
  --sidebar-section:#8FA2C4; --sidebar-line:rgba(255,255,255,.12);
  --sidebar-hover:rgba(255,255,255,.06); --sidebar-active-bg:rgba(245,185,66,.15);
  --topbar-bg:#FFFFFF;
  --surface-soft:#F7F9FC; --surface-alt:#EEF1F7; --surface-tint:#EEF2FA;
  --border:#DDE3ED; --border-soft:#EEF1F7; --border-line:#E7EBF3;
  --input-bg:#FAFBFD; --input-border:#E3E8F1;
  --shadow:rgba(27,51,88,.06); --shadow-md:rgba(27,51,88,.10);
  --shadow-lg:rgba(27,51,88,.18); --overlay:rgba(18,35,65,.45);
  --login-bg:linear-gradient(160deg,#EAF6FF 0%,#F3EEFF 55%,#FFF6E9 100%);
  --ok-bg:#DFF6E8;  --ok-text:#146B3A;
  --warn-bg:#FFF3D9; --warn-text:#8A6100;
  --bad-bg:#FCE4E1;  --bad-text:#B0342A;
  --info-bg:#EAF2FF; --info-text:#1B3358;
  --neutral-bg:#EDF1F8; --neutral-text:#5A6684;
  --motiv-text:#7A5B00; --lav-text:#5C46C4; --tab-idle:#5A6478;
}

/* --------------------------- MODE GELAP ---------------------------
   Semua pasangan warna di bawah sudah dicek kontrasnya terhadap latar
   masing-masing (target minimal WCAG AA 4.5:1 untuk teks biasa dan
   3:1 untuk teks tebal berukuran besar), supaya TIDAK ADA teks yang
   "hilang" saat mode gelap aktif. */
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0E141F; --card:#182131; --text:#E8EDF6; --muted:#A6B3C9; --danger:#FF8874;
  --gold:#F7C75A; --mint:#4BD895; --sky:#5CC7F5;
  --heading:#C3DBFA;
  --latin:#8FD3F7;   /* cukup terang untuk dibaca di atas latar gelap */
  --sidebar-bg:#101827; --sidebar-text:#AEBBD1; --sidebar-active:#FFFFFF;
  --sidebar-section:#8394AE; --sidebar-line:rgba(255,255,255,.10);
  --sidebar-hover:rgba(255,255,255,.07); --sidebar-active-bg:rgba(247,199,90,.18);
  --topbar-bg:#182131;
  --surface-soft:#1F2A3A; --surface-alt:#273345; --surface-tint:#20304A;
  --border:#33415A; --border-soft:#2A3648; --border-line:#2A3648;
  --input-bg:#1F2A3A; --input-border:#3C4A62;
  --shadow:rgba(0,0,0,.45); --shadow-md:rgba(0,0,0,.55);
  --shadow-lg:rgba(0,0,0,.65); --overlay:rgba(3,8,16,.68);
  --login-bg:linear-gradient(160deg,#0F1A29 0%,#151327 55%,#1D1710 100%);
  --sky-soft:#12303F; --sun-soft:#33290E; --mint-soft:#10332A;
  --coral-soft:#3B1F1B; --lav-soft:#221D3D;
  --ok-bg:#10352A;  --ok-text:#6FE0A6;
  --warn-bg:#3A2D10; --warn-text:#F5CE79;
  --bad-bg:#3E1E1A;  --bad-text:#FFA593;
  --info-bg:#152840; --info-text:#A8CCF7;
  --neutral-bg:#232F42; --neutral-text:#AAB8CF;
  --motiv-text:#F0D89A; --lav-text:#C3B5FA; --tab-idle:#B3C0D6;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Segoe UI',Nunito,Arial,sans-serif;background:var(--bg);color:var(--text);}
img.logo{width:70px;height:70px;object-fit:contain;}

/* ---------- LOGIN ---------- */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  position:relative; overflow:hidden;
  background:var(--login-bg);
}
.login-blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; z-index:0;}
.login-blob.b1{width:260px;height:260px; background:radial-gradient(circle at 30% 30%,var(--sky),transparent 70%); top:-70px; left:-70px;}
.login-blob.b2{width:220px;height:220px; background:radial-gradient(circle at 60% 40%,var(--mint),transparent 70%); bottom:-60px; right:-50px;}
.login-blob.b3{width:160px;height:160px; background:radial-gradient(circle at 50% 50%,var(--sun),transparent 70%); bottom:60px; left:-40px; opacity:.4;}
.login-blob.b4{width:150px;height:150px; background:radial-gradient(circle at 50% 50%,var(--lav),transparent 70%); top:60px; right:-30px; opacity:.4;}

.login-card{
  background:var(--card); width:100%; max-width:380px; border-radius:26px; padding:36px 30px 28px;
  box-shadow:0 25px 60px var(--shadow-lg); text-align:center; position:relative; z-index:1;
  border-top:5px solid transparent;
  background-image:linear-gradient(var(--card),var(--card)), linear-gradient(90deg,var(--sky),var(--mint) 50%,var(--sun));
  background-origin:border-box; background-clip:padding-box, border-box;
}
.login-logo-ring{
  width:78px; height:78px; margin:0 auto 12px; border-radius:50%;
  background:linear-gradient(135deg,var(--sky-soft),var(--lav-soft));
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(63,182,240,.25);
}
img.logo{width:52px;height:52px;object-fit:contain;}
.login-card h1{font-size:21px;margin:2px 0 2px;color:var(--heading);font-weight:800;}
.login-card p.sub{color:var(--muted);font-size:13px;margin-bottom:22px;}
.tabs{display:flex;background:var(--border-soft);border-radius:14px;padding:5px;margin-bottom:20px;gap:4px;}
.tabs button{flex:1;padding:10px 8px;border:none;border-radius:10px;background:transparent;font-weight:700;color:var(--tab-idle);cursor:pointer;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .18s;}
.tabs button.active{background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;box-shadow:0 6px 14px rgba(27,51,88,.25);}
.field{text-align:left;margin-bottom:14px;}
.field label{font-size:12px;color:var(--muted);display:block;margin-bottom:5px;font-weight:600;}
.field input{width:100%;padding:12px 14px;border:1.5px solid var(--input-border);border-radius:12px;font-size:14px;transition:all .15s;background:var(--input-bg);}
.field input:focus{outline:none;border-color:var(--sky);background:var(--card);box-shadow:0 0 0 4px var(--sky-soft);}
.btn-primary{
  width:100%;padding:13px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--navy),#254B82);color:#fff;font-weight:700;font-size:14.5px;
  cursor:pointer;margin-top:6px;box-shadow:0 8px 18px rgba(27,51,88,.28); transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(27,51,88,.34);}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
#loginError{color:var(--danger);font-size:12.5px;margin-top:10px;min-height:16px;font-weight:600;}
.login-footer{font-size:11px;color:var(--muted);margin-top:18px;line-height:1.5;}

/* ---------- APP SHELL ---------- */
#appShell{display:none;min-height:100vh;}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;background:var(--sidebar-bg);color:#fff;display:flex;flex-direction:column;z-index:20;transition:transform .25s;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid var(--sidebar-line);}
.sidebar-brand img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;}
.sidebar-brand span{font-weight:700;font-size:14.5px;line-height:1.2;}
.sidebar-menu{flex:1;overflow-y:auto;padding:10px 0;}
.menu-item{display:flex;align-items:center;gap:12px;padding:11px 20px;font-size:13.5px;color:var(--sidebar-text);cursor:pointer;border-left:3px solid transparent;}
.menu-item:hover{background:var(--sidebar-hover);color:var(--sidebar-active);}
.menu-item.active{background:var(--sidebar-active-bg);color:var(--sidebar-active);border-left-color:var(--gold);font-weight:600;}
.menu-item .ic{width:18px;text-align:center;}
.sidebar-foot{padding:14px 20px;border-top:1px solid var(--sidebar-line);}

/* ---------- SIDEBAR ACCORDION GROUPS ---------- */
.menu-group-header{display:flex;align-items:center;gap:12px;padding:11px 20px;font-size:13.5px;color:var(--sidebar-text);cursor:pointer;border-left:3px solid transparent;user-select:none;}
.menu-group-header:hover{background:var(--sidebar-hover);color:var(--sidebar-active);}
.menu-group-header .ic{width:18px;text-align:center;}
.menu-group-header .grp-label{flex:1;}
.menu-group-header .chev{font-size:10px;transition:transform .2s;opacity:.7;}
.menu-group.open .menu-group-header .chev{transform:rotate(90deg);}
.menu-group-header.has-active{color:var(--sidebar-active);font-weight:600;}
.menu-submenu{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.menu-group.open .menu-submenu{max-height:600px;}
.menu-submenu .menu-item{padding-left:44px;font-size:13px;}

.main{margin-left:250px;min-height:100vh;display:flex;flex-direction:column;}
.topbar{background:var(--topbar-bg);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-line);position:sticky;top:0;z-index:10;}
.topbar h2{font-size:17px;margin:0;color:var(--heading);}
.topbar .user-chip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--navy-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.content{padding:22px;flex:1;}

.cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px;}
.stat-card{background:var(--card);border-radius:var(--radius);padding:16px 18px;box-shadow:0 4px 14px var(--shadow);}
.stat-card .label{font-size:12px;color:var(--muted);margin-bottom:6px;}
.stat-card .value{font-size:24px;font-weight:800;color:var(--heading);}
.panel{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:0 4px 14px var(--shadow);margin-bottom:18px;}
.panel h3{margin:0 0 14px;font-size:15px;color:var(--heading);}

table.data-table{width:100%;border-collapse:collapse;font-size:13px;}
table.data-table th{background:var(--navy);color:#fff;text-align:left;padding:9px 10px;}
table.data-table td{padding:8px 10px;border-bottom:1px solid var(--border-soft);}
table.data-table tr:hover td{background:var(--surface-soft);}

.btn{padding:8px 14px;border:none;border-radius:8px;background:var(--navy);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.btn.gold{background:var(--gold);color:var(--navy-dark);}
.btn.mint{background:var(--mint);}
.btn.small{padding:5px 9px;font-size:12px;}
.btn.outline{background:var(--card);border:1px solid var(--border);color:var(--heading);}
select, input.form-input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;}

.empty-state{text-align:center;color:var(--muted);padding:40px 10px;font-size:13.5px;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:13px 18px;border-radius:10px;font-size:13.5px;font-weight:600;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.24);z-index:10000;display:none;max-width:360px;animation:toastMasuk .22s ease-out;}
.toast.error{background:var(--danger);}
.toast.success{background:var(--mint);}
.toast .toast-ikon{margin-right:8px;}
@keyframes toastMasuk{from{transform:translateY(14px);opacity:0;} to{transform:translateY(0);opacity:1;}}

/* ---------- Notifikasi "sedang memproses" saat guru menekan Simpan ----------
   Overlay ini SENGAJA menutup seluruh layar supaya:
   (1) guru tahu sistem sedang bekerja (tidak mengira tombolnya tidak berfungsi),
   (2) tombol Simpan tidak bisa ditekan dua kali -> mencegah data dobel,
   (3) halaman tidak ditutup / di-refresh di tengah proses penyimpanan.
   Dipasang OTOMATIS lewat gsCall() untuk SEMUA aksi tulis (simpan/ubah/hapus/
   impor/catat pelanggaran/dll), jadi tombol simpan baru di masa depan ikut
   terlindungi tanpa perlu menambah kode lagi.
   Warna memakai token semantik (--card/--heading/--muted) supaya otomatis
   mengikuti mode terang maupun mode gelap. */
.saving-overlay{position:fixed;inset:0;background:rgba(10,18,32,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px;}
.saving-overlay.show{display:flex;}
.saving-box{background:var(--card);border-radius:16px;padding:26px 30px;min-width:250px;max-width:340px;text-align:center;box-shadow:0 18px 50px var(--shadow-md,rgba(0,0,0,.3));animation:savingMuncul .18s ease-out;}
@keyframes savingMuncul{from{transform:scale(.92);opacity:0;} to{transform:scale(1);opacity:1;}}
.saving-spinner{width:44px;height:44px;margin:0 auto 14px;border:4px solid var(--border-soft,#E6EBF4);border-top-color:var(--gold);border-radius:50%;animation:savingPutar .8s linear infinite;}
@keyframes savingPutar{to{transform:rotate(360deg);}}
.saving-title{font-size:15px;font-weight:700;color:var(--heading);margin-bottom:6px;}
.saving-sub{font-size:12.5px;color:var(--muted);line-height:1.5;}
/* Jangan pernah ikut tercetak, dan hormati preferensi "kurangi animasi". */
@media print{ .saving-overlay{display:none !important;} }
@media (prefers-reduced-motion: reduce){
  .saving-box, .toast{animation:none;}
  .saving-spinner{animation-duration:1.6s;}
}

.modal-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px;}
.modal-box{background:var(--card);border-radius:14px;padding:22px 24px;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;}
.modal-box h3{margin:0 0 16px;color:var(--heading);font-size:16px;}

/* ---------- Panduan Fitur (onboarding tour) ---------- */
.onboard-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;}
.onboard-box{background:var(--card);border-radius:18px;padding:32px 28px 24px;width:100%;max-width:420px;text-align:center;box-shadow:0 20px 50px var(--shadow-lg);animation:onboardPop .25s ease;}
@keyframes onboardPop{from{opacity:0;transform:scale(.94) translateY(6px);}to{opacity:1;transform:none;}}
.onboard-icon{width:76px;height:76px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(135deg,var(--sun,#F5B942),var(--mint) 60%,var(--sky,#4AA8E8));box-shadow:0 8px 18px rgba(47,191,113,.25);}
.onboard-box h3{margin:0 0 10px;color:var(--heading);font-size:18px;font-weight:800;}
.onboard-box p{margin:0 0 20px;color:var(--muted);font-size:13.5px;line-height:1.6;}
.onboard-dots{display:flex;justify-content:center;gap:6px;margin-bottom:22px;}
.onboard-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all .2s;}
.onboard-dots .dot.active{width:20px;border-radius:5px;background:var(--gold);}
.onboard-actions{display:flex;justify-content:space-between;align-items:center;}
.onboard-skip{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;}
.onboard-next{background:var(--gold);color:var(--navy-dark);border:none;border-radius:9px;padding:10px 22px;font-size:13.5px;font-weight:700;cursor:pointer;}
.onboard-next:hover{filter:brightness(1.03);}
.topbar-help-btn{background:none;border:none;color:var(--heading);font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;}
.topbar-help-btn:hover{background:var(--surface-tint);color:var(--heading);}
/* ---------- Halaman Panduan Penggunaan (Pusat Bantuan) ---------- */
.pd-cari{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:13.5px;background:var(--card);color:var(--text);}
.pd-cari:focus{outline:none;border-color:var(--gold);}
.pd-hasil{font-size:12.5px;color:var(--muted);margin-top:8px;min-height:0;}
.pd-hasil:empty{display:none;}
.pd-aksi-atas{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.pd-aksi-atas .btn{font-size:12.5px;padding:8px 14px;}
.pd-bagian h3{margin-bottom:10px;}
.pd-item{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;background:var(--surface-soft);overflow:hidden;}
.pd-item[open]{background:var(--card);border-color:var(--gold);}
.pd-item>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--heading);}
.pd-item>summary::-webkit-details-marker{display:none;}
.pd-item>summary:hover{background:var(--surface-tint);}
.pd-ikon{font-size:17px;line-height:1;flex:none;}
.pd-judul{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pd-chev{flex:none;color:var(--muted);font-size:12px;transition:transform .18s;}
.pd-item[open] .pd-chev{transform:rotate(180deg);}
.pd-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.pd-badge.admin{background:var(--info-bg);color:var(--info-text);}
.pd-badge.wali{background:var(--warn-bg);color:var(--warn-text);}
.pd-isi{padding:2px 16px 16px;border-top:1px solid var(--border-soft);}
.pd-ringkas{font-size:13px;line-height:1.65;color:var(--text);margin:12px 0 4px;}
.pd-sub{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;}
.pd-langkah{margin:0;padding-left:20px;font-size:12.8px;line-height:1.75;color:var(--text);}
.pd-langkah li{margin-bottom:5px;}
.pd-tips{margin:0;padding-left:18px;font-size:12.8px;line-height:1.75;color:var(--text);list-style:none;}
.pd-tips li{margin-bottom:5px;position:relative;padding-left:4px;}
.pd-tips li::before{content:'\2022';position:absolute;left:-14px;color:var(--gold);font-weight:900;}
.pd-buka{margin-top:16px;font-size:12.5px;padding:8px 16px;}
@media(max-width:640px){ .pd-item>summary{font-size:13px;padding:10px 12px;} .pd-isi{padding:2px 12px 14px;} }
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;}
.form-grid input, .form-grid select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.filter-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;}
.filter-row .fg{display:flex;flex-direction:column;gap:5px;}
.filter-row .fg label{font-size:12px;color:var(--muted);}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
.badge.aktif{background:var(--ok-bg);color:var(--ok-text);}
.badge.nonaktif{background:var(--bad-bg);color:var(--danger);}
.badge.lulus{background:var(--info-bg);color:var(--info-text);}
input.nilai-cell{width:64px;padding:6px 7px;border:1px solid var(--border);border-radius:6px;text-align:center;font-size:13px;}
.stat-mini{background:var(--surface-soft);border-radius:10px;padding:10px 14px;font-size:12.5px;}
.stat-mini b{display:block;font-size:16px;color:var(--heading);}
.rapor-sheet{background:#fff;max-width:900px;margin:0 auto 24px;padding:30px 34px;border-radius:10px;box-shadow:0 4px 14px rgba(27,51,88,.08);}
/* Tabel pembungkus supaya identitas siswa (di dalam <thead>) OTOMATIS
   berulang di setiap halaman cetak — ini perilaku standar & didukung
   LUAS oleh semua browser (jauh lebih andal daripada position:fixed,
   yang di beberapa kondisi cetak/print-to-PDF bisa tertumpuk dengan
   konten lain karena asumsi margin halaman tidak selalu terpenuhi).
   thead/tbody memakai 1 <td> pembungkus supaya seluruh konten rapor
   (yang sebelumnya berupa div biasa) tetap bisa dipakai apa adanya. */
table.rapor-page-table{width:100%;border-collapse:collapse;}
table.rapor-page-table>thead>tr>td, table.rapor-page-table>tbody>tr>td{padding:0;border:none;}
.rapor-info{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;font-size:13px;margin-bottom:16px;padding-bottom:14px;border-bottom:1.5px solid var(--heading);}
.rapor-info div span{color:var(--muted);display:inline-block;min-width:110px;}
table.rapor-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:16px;}
table.rapor-table th, table.rapor-table td{border:1px solid var(--border);padding:7px 9px;vertical-align:top;}
/* Header tabel TIDAK memakai warna latar solid — banyak browser (Chrome
   dkk) tetap menghilangkan warna latar saat mencetak kalau opsi
   "Grafik latar/Background graphics" di dialog cetak tidak dicentang
   pengguna, membuat judul kolom jadi nyaris tak terbaca. Supaya PASTI
   jelas di semua kondisi cetak, judul kolom memakai teks navy tebal +
   border bawah tegas (warna teks & border selalu ikut tercetak, tidak
   bergantung opsi "Grafik latar" seperti warna latar). Judul kolom
   dibuat rata tengah (center) untuk semua tabel di rapor (nilai,
   ekstrakurikuler, dst) karena sama-sama memakai class ini. */
table.rapor-table th{
  background:#EEF3FA; color:var(--heading); text-align:center;
  font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.3px;
  border-bottom:2.5px solid var(--heading);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact;
}
table.rapor-table td.rapor-capaian{white-space:pre-line;font-size:12px;line-height:1.55;}
table.rapor-table td.rapor-center{text-align:center;}
.rapor-section-title{font-size:13.5px;font-weight:800;color:var(--heading);margin:20px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--border-soft);}
.rapor-section-title.center{text-align:center;}
.rapor-paragraf{font-size:12.5px;line-height:1.65;color:var(--text);white-space:pre-line;margin:0;}
.rapor-attendance{display:flex;gap:14px;flex-wrap:wrap;}
.rapor-attendance .att-box{flex:1;min-width:120px;background:var(--surface-soft);border-radius:10px;padding:10px 14px;text-align:center;}
.rapor-attendance .att-box b{display:block;font-size:19px;color:var(--heading);}
.rapor-attendance .att-box span{font-size:11.5px;color:var(--muted);font-weight:600;}
.rapor-kenaikan{font-size:13px;margin-top:6px;}
.rapor-ortu-lines{border:1px solid var(--border);border-radius:8px;padding:14px;min-height:70px;margin-top:6px;}
.rapor-signature{display:flex;justify-content:space-between;margin-top:30px;font-size:12.5px;text-align:center;gap:10px;}
.rapor-signature .sig-col{flex:1;}
.rapor-signature .sig-col .sig-space{height:56px;}
.rapor-empty-note{color:var(--muted);font-style:italic;}
.tp-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.tp-badge.baik{background:var(--ok-bg);color:var(--ok-text);}
.tp-badge.perlu{background:var(--warn-bg);color:var(--warn-text);}
/* Footer khusus halaman cetak rapor: identitas siswa (kiri) + nomor
   halaman (kanan), SEKARANG KEDUANYA memakai mekanisme @page bawaan
   browser (CSS Paged Media) — lihat aturan @page di bawah. Memakai
   SATU mekanisme yang sama untuk kedua sisi menjamin keduanya sejajar
   persis pada baris yang sama (sebelumnya sisi kiri pakai
   position:fixed terpisah dari sisi kanan yang pakai @page, sehingga
   tidak sejajar & berpotensi tertumpuk konten lain). Konten sisi kiri
   (identitas siswa, beda-beda tiap siswa) disuntik lewat JS ke
   #raporFooterStyle setiap kali rapor dimuat — lihat fungsi
   suntikPageFooterStyle_(). @bottom-center dibiarkan kosong, hanya
   dipakai untuk menyambung garis border supaya tampak menyatu penuh
   dari kiri ke kanan. */
@media print{
  .sidebar, .topbar, .sidebar-toggle, .no-print{display:none !important;}
  .main{margin-left:0 !important;}
  .content{padding:0 !important;}
  body{background:#fff !important;}
  .rapor-sheet{box-shadow:none;max-width:100%;}
  .print-only{display:block !important;}
}
/* Judul & identitas ringkas yang HANYA muncul saat dicetak (mis. Rekap
   Presensi), supaya lembar cetak tetap punya konteks kelas/bulan walau
   filter (yang disembunyikan lewat .no-print) tidak ikut tercetak. */
.print-only{display:none;}
@page{
  margin:12mm 15mm 18mm 15mm;
  /* Nomor halaman otomatis di kanan bawah (standar CSS Paged Media).
     Catatan: dukungan browser untuk margin-box @page ini bervariasi —
     di Chrome/Edge versi terbaru biasanya tampil dengan baik. */
  @bottom-right{
    content: "Halaman : " counter(page);
    font-size: 9.5px; color:#6B7280;
    border-top:1px solid var(--border); padding-top:4px;
  }
  @bottom-center{
    content: "";
    border-top:1px solid var(--border);
  }
}
.sidebar-toggle{display:none;}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .sidebar-toggle{display:block;background:none;border:none;font-size:22px;color:var(--heading);cursor:pointer;}
}

/* ================= MODE SISWA (tampilan ramah anak) ================= */
body.siswa-mode{background:var(--bg);}
body.siswa-mode .sidebar{display:none;}
body.siswa-mode .main{margin-left:0;}
body.siswa-mode .sidebar-toggle{display:none !important;}
body.siswa-mode .topbar{display:none;}
body.siswa-mode .content{padding:0;}
body.siswa-mode .bottom-nav{display:flex;}

.bottom-nav{
  display:none; position:fixed; left:12px; right:12px; bottom:14px; height:66px;
  background:var(--card); border-radius:24px; box-shadow:0 10px 30px var(--shadow-lg);
  align-items:center; justify-content:space-around; z-index:30; max-width:460px; margin:0 auto;
}
.nav-item{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-size:10px; font-weight:700; cursor:pointer;}
.nav-item .n-ic{font-size:19px;}
.nav-item.active{color:var(--sky);}
.nav-item.active .n-ic{background:var(--sky-soft); width:38px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:12px;}

.siswa-page{padding:16px 16px 96px;}
.greet-card{
  background:linear-gradient(135deg,var(--sky),#5FCBFF); border-radius:22px;
  padding:20px 20px 44px; color:#fff; position:relative; overflow:hidden; margin-bottom:-30px;
}
.greet-card::after{content:"\2726"; position:absolute; right:-10px; top:-18px; font-size:110px; color:rgba(255,255,255,.15);}
.greet-top{display:flex; align-items:center; gap:12px;}
.avatar-ring{width:52px; height:52px; border-radius:50%; background:var(--sun); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:var(--navy-dark); border:3px solid #fff; flex-shrink:0;}
.greet-top h2{margin:0; font-size:17px; font-weight:800;}
.greet-top p{margin:2px 0 0; font-size:12.5px; opacity:.92;}

.stat-row-siswa{display:flex; gap:12px; padding:0 2px; position:relative; z-index:2;}
.stat-card-siswa{flex:1; background:var(--card); border-radius:16px; padding:14px 10px; box-shadow:0 10px 24px var(--shadow-md); text-align:center;}
.stat-card-siswa .ic{font-size:19px;}
.stat-card-siswa .val{font-size:18px; font-weight:800; color:var(--heading); margin-top:2px;}
.stat-card-siswa .lbl{font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px;}

.siswa-section-title{font-size:14.5px; font-weight:800; color:var(--heading); margin:22px 2px 10px; display:flex; align-items:center; gap:6px;}
.motiv-card{background:var(--sun-soft); border:2px dashed var(--sun); border-radius:16px; padding:14px 16px; display:flex; gap:10px; align-items:flex-start;}
.motiv-card .emoji{font-size:24px;}
.motiv-card p{margin:0; font-size:12.5px; color:var(--motiv-text); line-height:1.5; font-weight:600;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.subject-card{background:var(--card); border-radius:16px; padding:14px; box-shadow:0 6px 16px var(--shadow); position:relative; overflow:hidden;}
.subject-card .bar{position:absolute; left:0; top:0; bottom:0; width:6px;}
.subject-card h4{margin:0 0 8px; font-size:12px; color:var(--heading); font-weight:800; padding-left:6px;}
.ring-wrap{position:relative; width:56px; height:56px; margin:2px auto 4px;}
.ring{width:56px; height:56px; display:block;}
.ring-label{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; font-size:17px; font-weight:800; color:var(--heading); line-height:1;}
.ring-caption{text-align:center; font-size:10px; color:var(--muted); font-weight:700; margin-top:6px;}
.nilai-akhir-tag{text-align:center; font-size:9px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}
.belum-dinilai{text-align:center; padding:10px 4px 6px;}
.belum-dinilai .bd-ic{font-size:28px; line-height:1;}
.belum-dinilai .bd-txt{font-size:12.5px; font-weight:800; color:var(--heading); margin-top:4px;}
.belum-dinilai .bd-sub{font-size:10px; color:var(--muted); font-weight:600; margin-top:1px;}
.rincian-kosong{font-size:10.5px; color:var(--muted); text-align:center; margin:10px 0 0; padding-top:8px; border-top:1px dashed var(--input-border);}
.rincian-details{margin-top:10px; border-top:1px dashed var(--input-border); padding-top:8px;}
.rincian-details summary{font-size:10.5px; font-weight:700; color:var(--heading); cursor:pointer; list-style:none; text-align:center;}
.rincian-details summary::-webkit-details-marker{display:none;}
.rincian-details summary::after{content:' ▾'; color:var(--muted);}
.rincian-details[open] summary::after{content:' ▴';}
.rincian-list{margin-top:8px; display:flex; flex-direction:column; gap:5px;}
.rincian-row{display:flex; align-items:center; gap:6px; font-size:10.5px; background:var(--surface-soft); border-radius:8px; padding:5px 8px;}
.rincian-jenis{flex-shrink:0; font-size:8.5px; font-weight:800; color:#fff; background:var(--navy); border-radius:5px; padding:2px 5px; text-transform:uppercase; letter-spacing:.2px;}
.rincian-judul{color:var(--muted); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rincian-nilai{color:var(--heading); font-weight:800; white-space:nowrap;}
.rincian-row.remidi{background:var(--coral-soft);}
.rincian-row.remidi .rincian-jenis{background:var(--danger);}
.rincian-row.remidi .rincian-nilai{color:var(--danger);}
.rincian-row.remidi .rincian-nilai b{font-size:9px; font-weight:800; margin-left:3px;}

.att-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.att-mini{border-radius:14px; padding:12px 6px; text-align:center;}
.att-mini .a-val{font-size:19px; font-weight:800;}
.att-mini .a-lbl{font-size:10.5px; font-weight:700; margin-top:2px;}
.att-mini.hadir{background:var(--mint-soft); color:var(--ok-text);}
.att-mini.sakit{background:var(--coral-soft); color:var(--bad-text);}
.att-mini.izin{background:var(--lav-soft); color:var(--lav-text);}
.att-mini.alpa{background:var(--neutral-bg); color:var(--neutral-text);}
.att-percent-wrap{background:var(--card); border-radius:16px; padding:16px; box-shadow:0 6px 16px var(--shadow); margin-top:12px;}
.att-percent-bar{height:14px; background:var(--border-soft); border-radius:20px; overflow:hidden; margin-top:8px;}
.att-percent-fill{height:100%; background:linear-gradient(90deg,var(--mint),#5FE3B3); border-radius:20px;}

/* ---- lencana / pencapaian ---- */
.badge-row{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px;}
.badge-chip{flex-shrink:0; width:108px; text-align:center; background:var(--card); border-radius:16px; padding:12px 8px 10px; box-shadow:0 6px 14px var(--shadow);}
.badge-chip .b-ic{font-size:26px;}
.badge-chip .b-lbl{font-size:9.5px; font-weight:700; color:var(--heading); margin-top:4px; line-height:1.2;}
.badge-chip .b-desc{font-size:8.5px; font-weight:500; color:var(--muted); margin-top:3px; line-height:1.3;}
.badge-chip.locked{opacity:.55;}
.badge-chip.locked .b-ic{filter:grayscale(1);}
.badge-chip.locked .b-lbl{color:var(--muted);}

/* ---- hafalan Asmaul Husna (progres siswa) ---- */
.hafalan-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:8px;}
.hafalan-chip{background:var(--card); border-radius:12px; padding:10px 6px 8px; text-align:center; box-shadow:0 4px 10px var(--shadow); cursor:pointer; user-select:none;}
.hafalan-chip .h-no{display:block; font-size:9.5px; color:var(--muted); font-weight:700;}
.hafalan-chip .h-ic{display:block; font-size:16px; margin:2px 0;}
.hafalan-chip .h-arab{display:block; font-family:'Scheherazade New','Traditional Arabic','Amiri',serif; font-size:20px; line-height:1.5; direction:rtl; color:var(--heading); margin:2px 0 3px;}
.hafalan-chip .h-nama{display:block; font-size:10px; font-weight:600; color:var(--heading); line-height:1.2;}
.hafalan-chip .h-arti{display:block; font-size:9px; font-weight:500; color:var(--muted); line-height:1.25; margin-top:2px;}
.hafalan-chip.hafalan-terverifikasi{background:var(--ok-bg); cursor:default;}
.hafalan-chip.hafalan-diajukan{background:var(--sun-soft);}
.hafalan-chip.hafalan-belum{background:var(--card);}
/* ---- hafalan Surat Pendek Juz 30 & Doa Harian (kartu memanjang) ---- */
.hafalan-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:10px; margin-top:8px;}
.hafalan-card{background:var(--card); border-radius:14px; padding:11px 12px; box-shadow:0 4px 10px var(--shadow); display:flex; align-items:flex-start; gap:9px; cursor:pointer;}
.hafalan-card.hafalan-terverifikasi{background:var(--ok-bg);}
.hafalan-card.hafalan-diajukan{background:var(--sun-soft);}
.hafalan-card .hc-st{font-size:15px; line-height:1.4;}
.hafalan-card .hc-body{flex:1; min-width:0;}
.hafalan-card .hc-arab{display:block; font-family:'Scheherazade New','Traditional Arabic','Amiri',serif; font-size:21px; line-height:1.75; direction:rtl; color:var(--heading);}
.hafalan-card .hc-judul{display:block; font-size:12.5px; font-weight:700; color:var(--heading); line-height:1.3; margin-top:2px;}
.hafalan-card .hc-sub{display:block; font-size:10.5px; color:var(--muted); line-height:1.35; margin-top:2px;}
.hafalan-card .hc-act{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
/* ---- baris ayat / teks doa di dalam modal ---- */
.ayat-row{padding:10px 2px; border-bottom:1px solid var(--border-soft);}
.ayat-row:last-child{border-bottom:none;}
.ayat-no{display:inline-block; min-width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; background:var(--border-soft); color:var(--muted); font-size:10.5px; font-weight:700; margin-bottom:4px;}
.ayat-arab{display:block; font-family:'Scheherazade New','Traditional Arabic','Amiri',serif; font-size:25px; line-height:2.1; direction:rtl; text-align:right; color:var(--heading);}
.ayat-latin{display:block; font-size:12.5px; font-style:italic; font-weight:600; color:var(--latin); margin-top:6px; line-height:1.6;}
/* basmalah: baris tersendiri di atas ayat 1, seperti di mushaf */
.basmalah-row{text-align:center; padding:12px 6px 14px; border-bottom:1px solid var(--border-soft); margin-bottom:2px;}
.basmalah-row .b-arab{display:block; font-family:'Scheherazade New','Traditional Arabic','Amiri',serif; font-size:26px; line-height:2; direction:rtl; color:var(--heading);}
.basmalah-row .b-latin{display:block; font-size:12px; font-style:italic; font-weight:600; color:var(--latin); margin-top:4px;}
.basmalah-row .b-arti{display:block; font-size:11px; color:var(--muted); margin-top:2px;}
.ayat-arti{display:block; font-size:12px; color:var(--muted); margin-top:4px; line-height:1.55;}

/* ---------- INFOGRAFIS: DONUT CHART (proporsi, mis. L/P & presensi) ---------- */
.donut-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:6px 2px;}
.donut-chart{width:132px; height:132px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px var(--shadow-md);}
.donut-hole{width:76px; height:76px; border-radius:50%; background:var(--card); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.donut-hole .dh-val{font-size:18px; font-weight:800; color:var(--heading); line-height:1.1;}
.donut-hole .dh-lbl{font-size:9px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px;}
.donut-legend{display:flex; flex-direction:column; gap:7px; flex:1; min-width:140px;}
.donut-legend-item{font-size:12.5px; color:var(--text); display:flex; align-items:center; gap:8px;}
.donut-legend-item .dot{width:11px; height:11px; border-radius:50%; flex-shrink:0;}
.donut-legend-item b{color:var(--heading);}
.donut-legend-item .pct{color:var(--muted); font-size:11.5px;}
.mapel-bar-list{display:flex; flex-direction:column; gap:11px; padding:4px 2px 2px;}
.mapel-bar-item{display:grid; grid-template-columns:150px 1fr 34px; align-items:center; gap:10px;}
.mapel-bar-label{font-size:12.5px; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mapel-bar-track{background:var(--border-soft); border-radius:8px; height:14px; overflow:hidden;}
.mapel-bar-fill{height:100%; border-radius:8px; transition:width .3s ease;}
.mapel-bar-value{font-size:13px; font-weight:800; text-align:right;}
@media (max-width:520px){ .mapel-bar-item{grid-template-columns:96px 1fr 30px;} .mapel-bar-label{font-size:11.5px;} }

/* ---------- INFOGRAFIS: perbandingan nilai siswa vs rata-rata kelas ---------- */
.compare-card{background:var(--card); border-radius:16px; padding:14px 16px; box-shadow:0 6px 16px var(--shadow); margin-bottom:10px;}
.compare-head{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:800; color:var(--heading); margin-bottom:8px;}
.compare-head .tag{font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:20px;}
.compare-head .tag.atas{background:var(--mint-soft); color:var(--ok-text);}
.compare-head .tag.bawah{background:var(--coral-soft); color:var(--bad-text);}
.compare-row{display:flex; align-items:center; gap:8px; margin-top:6px;}
.compare-row .cr-lbl{font-size:10.5px; color:var(--muted); font-weight:700; width:64px; flex-shrink:0;}
.compare-row .cr-track{flex:1; height:12px; background:var(--border-soft); border-radius:20px; overflow:hidden;}
.compare-row .cr-fill{height:100%; border-radius:20px;}
.compare-row .cr-fill.saya{background:linear-gradient(90deg,var(--sky),#67C9F5);}
.compare-row .cr-fill.kelas{background:linear-gradient(90deg,var(--lav),#B7A9F7);}
.compare-row .cr-val{font-size:11.5px; font-weight:800; color:var(--heading); width:26px; text-align:right; flex-shrink:0;}

/* ---------- INFOGRAFIS: mini bar nilai per mapel (Beranda siswa) ---------- */
.minibar-row{display:flex; align-items:center; gap:10px; margin-top:9px;}
.minibar-row .mb-lbl{font-size:11.5px; font-weight:700; color:var(--heading); width:88px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.minibar-row .mb-track{flex:1; height:11px; background:var(--border-soft); border-radius:20px; overflow:hidden;}
.minibar-row .mb-fill{height:100%; border-radius:20px;}
.minibar-row .mb-val{font-size:11.5px; font-weight:800; width:24px; text-align:right; flex-shrink:0;}

/* ==================================================================
   TAMBAHAN v2 — (1) kategori menu sidebar, (2) tombol lihat password,
   (3) mode gelap. Ditaruh paling bawah supaya menimpa aturan di atas
   bila ada yang bertabrakan.
   ================================================================== */

/* ---------- 1. KATEGORI (SECTION) MENU SIDEBAR ---------- */
.menu-section{
  padding:16px 20px 6px; font-size:10.5px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--sidebar-section); user-select:none;
  display:flex; align-items:center; gap:8px;
}
.menu-section::after{content:''; flex:1; height:1px; background:var(--sidebar-line);}
.menu-section:first-child{padding-top:10px;}
.menu-section.has-active{color:var(--gold);}
.menu-section.has-active::after{background:rgba(245,185,66,.35);}
.sidebar-collapse-btn{
  width:100%; background:transparent; border:1px solid var(--sidebar-line); color:var(--sidebar-text);
  border-radius:9px; padding:8px 10px; font-size:12px; font-weight:700; cursor:pointer;
  margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:6px;
}
.sidebar-collapse-btn:hover{background:var(--sidebar-hover); color:var(--sidebar-active);}

/* ---------- 2. TOMBOL LIHAT PASSWORD ---------- */
.pw-wrap{position:relative; display:block;}
.pw-wrap input{width:100%; padding-right:44px !important;}
.pw-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer; padding:6px 8px;
  font-size:16px; line-height:1; border-radius:8px; color:var(--muted);
}
.pw-toggle:hover{background:var(--surface-alt);}
.pw-toggle:focus-visible{outline:2px solid var(--sky); outline-offset:1px;}

/* ---------- 3. TOMBOL MODE GELAP ---------- */
.theme-toggle{
  background:var(--surface-tint); border:1px solid var(--border); color:var(--heading);
  border-radius:20px; padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.theme-toggle:hover{filter:brightness(.97);}
.theme-toggle-login{
  position:absolute; top:16px; right:16px; z-index:5;
  background:var(--card); border:1px solid var(--border); color:var(--heading);
  border-radius:20px; padding:7px 13px; font-size:12.5px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px var(--shadow); display:inline-flex; align-items:center; gap:6px;
}

/* ---------- ELEMEN FORM: ikut tema, teks selalu kontras ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  background:var(--input-bg); color:var(--text); border-color:var(--input-border);
  font-family:inherit;
}
input[type="checkbox"], input[type="radio"]{accent-color:var(--sky);}
input::placeholder, textarea::placeholder{color:var(--muted); opacity:.85;}
select option{background:var(--card); color:var(--text);}
.field input{background:var(--input-bg); color:var(--text);}
.form-grid input, .form-grid select, .form-grid textarea,
select, input.form-input, input.nilai-cell{border:1px solid var(--input-border);}
input:disabled, select:disabled, textarea:disabled{opacity:.65;}
a{color:var(--heading);}
hr{border:none; border-top:1px solid var(--border);}

/* ---------- LEMBAR RAPOR: SELALU "KERTAS PUTIH" ----------
   Rapor dicetak di atas kertas, jadi lembarnya sengaja TIDAK ikut mode
   gelap. Caranya cukup mendefinisikan ulang token di dalam .rapor-sheet
   (CSS variable diwariskan ke seluruh anaknya), sehingga semua elemen
   rapor otomatis kembali ke palet terang tanpa mengubah satu pun aturan
   di atas. */
.rapor-sheet{
  --card:#FFFFFF; --text:#1F2937; --muted:#6B7280; --heading:#1B3358; --latin:#2A63A8;
  --surface-soft:#F7F9FC; --surface-alt:#EEF1F7; --surface-tint:#EEF2FA;
  --border:#DDE3ED; --border-soft:#EEF1F7; --border-line:#E7EBF3;
  --ok-bg:#DFF6E8; --ok-text:#1D8348; --warn-bg:#FFF3D9; --warn-text:#8A6100;
  --bad-bg:#FCE4E1; --bad-text:#C43D30; --info-bg:#EAF2FF; --info-text:#1B3358;
  background:#FFFFFF; color:#1F2937;
}

/* ---------- PENYESUAIAN KHUSUS MODE GELAP ---------- */
html[data-theme="dark"] .btn.outline{background:var(--surface-soft); border-color:var(--border); color:var(--heading);}
html[data-theme="dark"] .sidebar-foot .btn.outline{background:transparent; color:var(--sidebar-text); border-color:var(--sidebar-line);}
html[data-theme="dark"] .sidebar-foot .btn.outline:hover{background:var(--sidebar-hover); color:#fff;}
html[data-theme="dark"] .tabs{background:var(--surface-soft);}
html[data-theme="dark"] .tabs button{color:var(--tab-idle);}
html[data-theme="dark"] .tabs button.active{background:linear-gradient(135deg,#2B4A7D,#1B3358); color:#fff;}
html[data-theme="dark"] table.data-table th{background:#22304A; color:#EAF0FA;}
html[data-theme="dark"] table.data-table td{border-bottom:1px solid var(--border-soft);}
html[data-theme="dark"] table.data-table tr:hover td{background:var(--surface-soft);}
html[data-theme="dark"] .btn{background:#2B4A7D; color:#fff;}
html[data-theme="dark"] .btn.gold{background:var(--gold); color:#241A00;}
html[data-theme="dark"] .btn.mint{background:var(--mint); color:#052B1B;}
html[data-theme="dark"] .btn-primary{background:linear-gradient(135deg,#2B4A7D,#3A63A6); color:#fff;}
html[data-theme="dark"] .avatar{color:#241A00;}
html[data-theme="dark"] .avatar-ring{color:#241A00; border-color:rgba(255,255,255,.35);}
html[data-theme="dark"] .onboard-next{color:#241A00;}
html[data-theme="dark"] .toast{background:#2B4A7D; color:#fff;}
html[data-theme="dark"] .toast.error{background:#8C2C1F; color:#FFE7E2;}
html[data-theme="dark"] .toast.success{background:#125E42; color:#DFF6E8;}
html[data-theme="dark"] .login-blob{opacity:.28;}
html[data-theme="dark"] .login-card{background-image:linear-gradient(var(--card),var(--card)), linear-gradient(90deg,var(--sky),var(--mint) 50%,var(--sun));}
html[data-theme="dark"] .sidebar-brand img{background:#F1F4FA;}
html[data-theme="dark"] .rincian-jenis{background:#2B4A7D; color:#fff;}
html[data-theme="dark"] .greet-card{background:linear-gradient(135deg,#1E6C93,#2B87B8); color:#fff;}
html[data-theme="dark"] .motiv-card{background:var(--sun-soft); border-color:#7A6218;}
html[data-theme="dark"] .badge.aktif, html[data-theme="dark"] .tp-badge.baik{background:var(--ok-bg); color:var(--ok-text);}
html[data-theme="dark"] .badge.nonaktif{background:var(--bad-bg); color:var(--bad-text);}
html[data-theme="dark"] .empty-state{color:var(--muted);}
html[data-theme="dark"] ::-webkit-scrollbar{width:10px; height:10px;}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--bg);}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#33415A; border-radius:8px;}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#43536F;}

/* ---------- CETAK: PAKSA PALET TERANG ----------
   Apa pun tema yang sedang aktif di layar, hasil cetak harus tetap
   hitam-di-atas-putih supaya terbaca & hemat tinta. */
@media print{
  html[data-theme="dark"]{
    color-scheme: light;
    --bg:#FFFFFF; --card:#FFFFFF; --text:#1F2937; --muted:#6B7280; --heading:#1B3358;
    --surface-soft:#F7F9FC; --surface-alt:#EEF1F7; --surface-tint:#EEF2FA;
    --border:#DDE3ED; --border-soft:#EEF1F7; --border-line:#E7EBF3;
    --ok-bg:#DFF6E8; --ok-text:#1D8348; --warn-bg:#FFF3D9; --warn-text:#8A6100;
    --bad-bg:#FCE4E1; --bad-text:#C43D30; --info-bg:#EAF2FF; --info-text:#1B3358;
  }
  html[data-theme="dark"] body{background:#fff !important; color:#1F2937 !important;}
  .theme-toggle, .theme-toggle-login{display:none !important;}
}