/* Apresia Admin — tema TERANG saja.

   Dulu bawaannya gelap, dengan varian terang yang menyala lewat
   prefers-color-scheme atau data-theme="light". Admin ini sekarang selalu
   terang, apa pun setelan sistemnya: kerja admin adalah membaca tabel padat
   berjam-jam di siang hari, dan dua tema berarti dua set warna yang harus
   dijaga kontrasnya. Palet terangnya sama persis dengan varian terang yang
   lama, KECUALI dua nilai yang di sana gagal kontras dan diukur ulang:

   --dim  #8A83A0 -> #6B6585   (3,60:1 -> 5,49:1 di atas putih). Ia teks
          keterangan dan judul kolom tabel — bukan hiasan.
   --ok   #12824F -> #0F7646   (4,31:1 -> 5,04:1 di atas --ok-mud). Ia teks
          lencana status "aktif"/"lunas"/"Super Admin". */
:root{
  --bg:#F6F4FB; --shell:#FFFFFF; --card:#FFFFFF; --card2:#F1EEF9;
  --line:#E4DFF0; --line2:#D3CCE6;
  --txt:#1B1530; --mut:#5A5270; --dim:#6B6585;
  --brand:#5B47E0; --brand-mud:#ECE8FF;
  --gold:#9A6B00; --ok:#0F7646; --ok-mud:#E3F6EC; --bad:#C0392B; --bad-mud:#FDECEA; --warn:#9A6400; --warn-mud:#FFF4DB;
  --field:#FFFFFF; --focus:rgba(91,71,224,.25);
  --radius:12px; --shadow:0 1px 2px rgba(20,10,60,.06);
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font:14px/1.5 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:16px} h3{font-size:14px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.muted{color:var(--dim)}
.money{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
/* ---------- menu samping ----------
   SELALU terang, apa pun tema halamannya. Tokennya dipatok di sini, bukan
   diwarisi dari :root — di tema gelap :root berisi warna malam, dan sidebar
   yang mewarisinya ikut gelap.

   Tiap pasangan teks diukur: teks redup #6B6585 di atas putih 5,5:1, teks
   tautan aktif #3D2BB8 di atas #EEEBFF 8,0:1. */
.side{
  --s-bg:#FFFFFF; --s-garis:#E8E5F1; --s-txt:#1B1530; --s-mut:#3F3958; --s-dim:#6B6585;
  --s-hover:#F5F3FB; --s-aktif:#EEEBFF; --s-aktif-txt:#3D2BB8; --s-aksen:#5B47E0;
  background:var(--s-bg); color:var(--s-txt);
  border-right:1px solid var(--s-garis);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:16px 12px 24px;
  color-scheme:light;
  /* Animasi buka-tutup dropdown: tinggi `auto` hanya bisa dianimasikan
     dengan izin ini. Peramban yang belum mendukungnya membuka seketika —
     tidak ada yang rusak. */
  interpolate-size:allow-keywords;
  scrollbar-width:thin;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 16px;margin-bottom:6px;border-bottom:1px solid var(--s-garis);color:var(--s-txt);font-weight:700;font-size:15px}
.brand:hover{text-decoration:none}
.brand img{width:28px;height:28px}
.brand small{display:block;font-weight:500;color:var(--s-dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.side .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.nav{display:flex;flex-direction:column;gap:2px;padding-top:6px}

/* Dasbor dan kepala tiap modul memakai bentuk yang sama, supaya deret
   teratasnya terbaca sebagai satu daftar modul, bukan satu tautan ditambah
   sembilan judul. */
.nav-dasbor,
.nav-modul > summary{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:9px;
  color:var(--s-mut);font-size:13.5px;font-weight:600;
  cursor:pointer;user-select:none;
}
.nav-dasbor:hover,
.nav-modul > summary:hover{background:var(--s-hover);color:var(--s-txt);text-decoration:none}
.nav-dasbor.on{background:var(--s-aktif);color:var(--s-aktif-txt)}
.nav-modul > summary{list-style:none}
.nav-modul > summary::-webkit-details-marker{display:none}
.nav-modul > summary:focus-visible,
.nav-dasbor:focus-visible,
.nav-isi a:focus-visible{outline:2px solid var(--s-aksen);outline-offset:1px}

.nav-modul .nm{flex:1;min-width:0}
.nav-modul .jml{
  font-size:11px;font-weight:600;color:var(--s-dim);
  background:var(--s-hover);border:1px solid var(--s-garis);
  border-radius:99px;padding:0 7px;line-height:18px;font-variant-numeric:tabular-nums;
}
.nav-modul .chev{width:16px;height:16px;color:var(--s-dim);transition:transform .2s ease}
.nav-modul[open] > summary .chev{transform:rotate(180deg)}

/* Modul yang memuat halaman aktif: ikonnya ikut beraksen, jadi letak
   pembaca tetap terlihat walau modulnya ditutup. */
.nav-modul[data-aktif] > summary{color:var(--s-txt)}
.nav-modul[data-aktif] > summary > .ic:first-child{color:var(--s-aksen)}

.nav-modul::details-content{
  block-size:0;overflow:hidden;
  transition:block-size .22s ease, content-visibility .22s allow-discrete;
}
.nav-modul[open]::details-content{block-size:auto}

/* Isi modul menjorok di bawah ikonnya, dengan garis panduan tipis. */
.nav-isi{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px 19px;padding-left:11px;border-left:1px solid var(--s-garis)}
.nav-isi a{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--s-mut);font-size:13px}
.nav-isi a:hover{background:var(--s-hover);color:var(--s-txt);text-decoration:none}
.nav-isi a.on{background:var(--s-aktif);color:var(--s-aktif-txt);font-weight:600}
.nav-isi a .ro{
  margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  color:var(--s-dim);border:1px solid var(--s-garis);border-radius:5px;padding:0 5px;line-height:16px;
}

@media (prefers-reduced-motion: reduce){
  .nav-modul::details-content{transition:none}
  .nav-modul .chev{transition:none}
}
.main{min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:12px 28px;border-bottom:1px solid var(--line);background:var(--shell);position:sticky;top:0;z-index:5}
.top .spacer{flex:1}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#8B7BF0,#5D8BE8);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.menu-btn{display:none}
.content{padding:24px 28px 60px;max-width:1400px}

/* ---------- page header ---------- */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head .crumbs{font-size:12.5px;color:var(--dim);margin-bottom:4px}
.page-head .crumbs a{color:var(--dim)}
.page-head .grow{flex:1;min-width:200px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h .grow{flex:1}
.card-b{padding:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat .k{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.stat .v{font-size:24px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.stat .s{font-size:12.5px;color:var(--mut);margin-top:2px}
.note{padding:10px 14px;border-radius:10px;background:var(--brand-mud);color:var(--mut);font-size:13px;margin-bottom:14px;border:1px solid var(--line)}

/* ---------- buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--line2);background:var(--card2);color:var(--txt);font:inherit;font-weight:550;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--brand);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:transparent}
.btn.danger:hover{background:var(--bad-mud)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mut)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px}
input,select,textarea{font:inherit;color:var(--txt);background:var(--field);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--focus)}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:var(--brand)}
textarea{min-height:96px;resize:vertical}
textarea.json{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;min-height:140px}
input:disabled,select:disabled,textarea:disabled{opacity:.6}
label.lbl{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
label.lbl .req{color:var(--bad)}
.help{font-size:12px;color:var(--dim);margin-top:5px}
.err{font-size:12.5px;color:var(--bad);margin-top:5px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:10px;padding:8px 0}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.toolbar input[type=search]{max-width:280px}
.toolbar select{width:auto;max-width:200px;padding:7px 10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--brand-mud);font-size:12px;color:var(--mut)}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600;white-space:nowrap;background:var(--card)}
th a{color:inherit}
tbody tr:hover{background:color-mix(in srgb,var(--card2) 60%,transparent)}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right}
td .row-link{color:var(--txt);font-weight:550}
.empty{padding:40px 16px;text-align:center;color:var(--dim)}

/* ---------- detail ---------- */
dl.kv{display:grid;grid-template-columns:220px 1fr;margin:0}
dl.kv dt,dl.kv dd{padding:10px 16px;border-bottom:1px solid var(--line);margin:0}
dl.kv dt{color:var(--dim);font-size:13px}
dl.kv dd{word-break:break-word}
dl.kv > :nth-last-child(-n+2){border-bottom:0}
pre.json{margin:0;padding:10px 12px;background:var(--field);border:1px solid var(--line);border-radius:8px;max-height:320px;overflow:auto;font-size:12.5px;white-space:pre-wrap}

/* ---------- pills ---------- */
.pill{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--card2);color:var(--mut);font-size:12px;font-weight:550;white-space:nowrap;border:1px solid var(--line)}
.pill.ok{background:var(--ok-mud);color:var(--ok);border-color:transparent}
.pill.bad{background:var(--bad-mud);color:var(--bad);border-color:transparent}
.pill.warn{background:var(--warn-mud);color:var(--warn);border-color:transparent}

/* ---------- flash ---------- */
.flash{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13.5px;border:1px solid transparent}
.flash.ok{background:var(--ok-mud);color:var(--ok)}
.flash.bad{background:var(--bad-mud);color:var(--bad)}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--dim);flex-wrap:wrap}
.pager .grow{flex:1}

/* ---------- attention list ---------- */
.att{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);color:var(--txt)}
.att:last-child{border-bottom:0}
.att:hover{background:var(--card2);text-decoration:none}
.att .n{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.att .n.hot{color:var(--warn)}

/* ---------- chart ---------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:8px}
.bars div{flex:1;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
.bars div:hover{opacity:1}
.bars-x{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:6px}

/* ---------- dialog ---------- */
dialog{border:1px solid var(--line2);border-radius:14px;background:var(--card);color:var(--txt);padding:0;max-width:440px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(5,3,15,.6)}
dialog .card-b p{margin:0 0 12px;color:var(--mut)}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:16px}
.auth .card{width:100%;max-width:400px}
.auth .brand{justify-content:center;padding:24px 0 8px;font-size:17px}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;z-index:20;transform:translateX(-100%);transition:transform .2s}
  body.nav-open .side{transform:none;box-shadow:0 0 0 100vmax rgba(27,21,48,.35)}
  .menu-btn{display:inline-flex}
  .top{padding:10px 16px}
  .content{padding:18px 16px 48px}
  .g2,.form-grid{grid-template-columns:1fr}
  dl.kv{grid-template-columns:1fr}
  dl.kv dt{border-bottom:0;padding-bottom:0}
  .toolbar input[type=search]{max-width:none}
}
@media (max-width:520px){ .g4{grid-template-columns:1fr} .who .name{display:none} }
@media (max-width:640px){ .top > form{display:none} }