/* Pintu staf Havy Sport — dipakai bersama havy.css (token warna sama). HP dulu: menu bawah, laci dari bawah. */
body.adm{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
body.adm-masuk{padding-bottom:0}
.adm-atas{position:sticky;top:0;z-index:50;background:rgba(11,17,16,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.adm-atas .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:8px}
.adm-atas .merek svg{width:28px;height:28px}
.adm-atas .merek b{font-size:1.3rem}
.adm-siapa{display:flex;align-items:center;gap:8px}
.btn-kecil{min-height:36px;padding:7px 12px;font-size:.88rem;border-radius:10px}
.adm-isi{padding-block:18px 28px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.adm-judul{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.adm-judul h1{font-size:clamp(1.8rem,6vw,2.4rem)}
.tgl-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tgl-nav input[type=date]{background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:7px 10px;font:15px var(--f-body);min-height:36px}
.tgl-nav button[aria-pressed="true"]{border-color:var(--volt);background:var(--volt-soft)}
.adm-hitung{display:flex;gap:6px;flex-wrap:wrap}
.adm-hitung .chip{background:var(--panel)}

/* menu bawah staf */
.adm-menu{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:var(--panel);border-top:1px solid var(--line);padding:0 max(4px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px)}
.adm-menu a{flex:1;display:grid;justify-items:center;gap:2px;padding:9px 2px 10px;color:var(--muted);text-decoration:none;font-size:.76rem;font-weight:600}
.adm-menu a svg{width:22px;height:22px}
.adm-menu a[aria-current="page"]{color:var(--volt)}
@media (min-width:921px){
  body.adm{padding-bottom:0}
  .adm-menu{position:sticky;top:53px;bottom:auto;justify-content:center;gap:4px;border-top:0;border-bottom:1px solid var(--line);background:rgba(18,27,25,.95)}
  .adm-menu a{flex:none;grid-auto-flow:column;align-items:center;gap:6px;padding:10px 16px;font-size:.92rem}
  .adm-menu a svg{width:18px;height:18px}
}

/* masuk */
.masuk-kotak{max-width:440px;margin:6vh auto 0;display:grid;gap:12px}
.masuk-kotak h1{font-size:2.6rem}
.pilih-peran{display:grid;gap:8px}
.pilih-peran button{background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--ink);padding:12px 14px;text-align:left;cursor:pointer;display:grid;gap:2px;font:inherit}
.pilih-peran button b{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase}
.pilih-peran button small{color:var(--muted)}
.pilih-peran button[aria-pressed="true"]{border-color:var(--volt);background:var(--volt-soft)}

/* papan jadwal */
.papan-jadwal{border-collapse:separate;border-spacing:4px;width:100%;table-layout:fixed}
.papan-jadwal th,.papan-jadwal td{padding:0;vertical-align:top}
.papan-jadwal thead th{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:4px 2px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.papan-jadwal thead th:first-child,.papan-jadwal tbody th{width:58px;min-width:58px}
.papan-jadwal tbody th{text-align:left;padding:6px 2px;font-weight:500}
.papan-jadwal tbody th .num{display:block;font-size:.92rem}
.papan-jadwal tbody th small{font-family:var(--f-mono);font-size:.66rem;color:var(--muted)}
.papan-jadwal tr.lewat th{opacity:.45}
.papan-jadwal tr.kini th .num{color:var(--volt)}
.sel{width:100%;height:100%;min-height:52px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-align:left;padding:6px 8px;cursor:pointer;display:grid;gap:1px;align-content:start;font:inherit;position:relative}
.sel b{font-size:.86rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel small{font-size:.7rem;color:var(--muted);line-height:1.25}
.sel .sumber{font-style:normal;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);order:9}
.sel.kosong{border-style:dashed;background:transparent;color:var(--muted);font-size:1.2rem;place-items:center}
.sel.kosong:hover{border-color:var(--volt);color:var(--volt)}
.sel.st-menunggu{border-color:rgba(242,180,75,.6);background:rgba(242,180,75,.1)}
.sel.st-dp{border-color:rgba(47,111,214,.7);background:rgba(47,111,214,.16)}
.sel.st-lunas{border-color:rgba(69,212,131,.6);background:rgba(69,212,131,.12)}
.sel.st-datang{border-color:var(--volt);background:var(--volt-soft)}
.sel.st-datang b{color:var(--volt)}
.sel.st-selesai{opacity:.55}
.sel.st-ayo{border-color:rgba(198,76,255,.6);background:rgba(198,76,255,.12)}
.legenda{display:flex;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}

/* laci */
.laci-latar{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55)}
.laci{position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:6px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.laci-pegangan{width:44px;height:5px;border-radius:99px;background:var(--line);margin:4px auto 10px}
@media (min-width:921px){.laci{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(520px,92vw);border-radius:18px}.laci-pegangan{display:none}}
#laci-isi{display:grid;gap:12px}
.laci-kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.laci-kepala h2{font-size:1.7rem}
.rinci{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.95rem}
.rinci dt{color:var(--muted)}
.rinci dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.rinci .kurang{color:var(--warn)}
.laci-aksi{display:flex;gap:8px;flex-wrap:wrap}
.laci-bagian{display:grid;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.laci-bagian summary{cursor:pointer;font-weight:600;color:var(--muted)}
.laci-bagian input,.isian select{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font:16px var(--f-body);width:100%}
.btn.bahaya{border-color:rgba(255,122,112,.5);color:var(--bad)}
.pilih-metode{display:flex;gap:6px;flex-wrap:wrap}
.pilih-metode label{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:600;font-size:.9rem}
.pilih-metode input{position:absolute;opacity:0;pointer-events:none}
.pilih-metode label:has(input:checked){border-color:var(--volt);background:var(--volt-soft);color:var(--ink)}
.pilih-metode label:has(input:focus-visible){outline:2px solid var(--volt);outline-offset:2px}
.t-harga{font-family:var(--f-mono);color:var(--volt);min-height:1.2em}

/* daftar umum (kelas, gym, tetap) */
.adm-daftar{display:grid;gap:8px}
.baris-adm{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.baris-adm .kiri{min-width:0}
.baris-adm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baris-adm small{color:var(--muted);font-size:.8rem}
.baris-adm .kanan{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.baris-isian{display:flex;gap:8px}
.baris-isian input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font:16px var(--f-body)}
.kotak-isi .isian input{background:var(--bg)}
.kartu-kelas-adm{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.kartu-kelas-adm .atas{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}

/* laporan */
.laporan{display:grid;gap:16px}
.angka-besar{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.angka-besar div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:2px}
.angka-besar b{font-family:var(--f-mono);font-size:clamp(1.05rem,4.6vw,1.45rem);font-weight:500;overflow-wrap:anywhere}
.angka-besar small{color:var(--muted)}
.angka-besar .sorot{border-color:var(--volt);box-shadow:inset 0 3px 0 var(--volt)}
.batang{display:grid;gap:8px}
.batang .baris{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:.9rem}
.batang .jalur{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.batang .jalur i{display:block;height:100%;border-radius:99px;background:var(--volt)}
.batang .nilai{font-family:var(--f-mono);font-size:.82rem;white-space:nowrap}
@media (max-width:420px){.batang .baris{grid-template-columns:84px 1fr auto}}
.grafik-hari{display:flex;gap:4px;align-items:flex-end;height:120px;padding-top:8px}
.grafik-hari div{flex:1;display:grid;gap:4px;justify-items:center;align-content:end;height:100%;min-width:0}
.grafik-hari i{display:block;width:100%;max-width:34px;background:var(--volt);border-radius:6px 6px 2px 2px;min-height:2px}
.grafik-hari small{font-size:.62rem;color:var(--muted);white-space:nowrap}