/* Lapor Central — satu kolom HP, header lengket, tab bawah (rasa demo D-Box 10/10/2026). Huruf sistem, tanpa CDN. */
:root{
  --bg:#EDF1EE; --sf:#fff; --ink:#13201A; --mut:#5A6A62; --line:#D5DED8;
  --acc:#1D6648; --acc2:#DBEBE2; --ok:#1C7448; --ok2:#DCF0E3; --warn:#9A5F0C; --warn2:#F7E9CF;
  --bad:#AE341E; --bad2:#F6DED7; --info:#2B5886; --info2:#DEE7F2; --gray:#7B827E; --gray2:#E7EAE8;
  --num:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
button,input,select{font:inherit}
.atas{position:sticky;top:0;z-index:5;background:var(--sf);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;display:flex;align-items:center;gap:10px}
.logo{width:32px;height:32px;border-radius:9px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800}
.atas h1{margin:0;font-size:16px;line-height:1.2}
.atas p{margin:0;font-size:12px;color:var(--mut)}
.pil{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.pil.on{background:var(--ok2);color:var(--ok)} .pil.off{background:var(--warn2);color:var(--warn)}
.isi{max-width:520px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.kartu{background:var(--sf);border:1px solid var(--line);border-radius:14px;padding:12px}
.kartu h2{margin:0 0 6px;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ey{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700}
.muted{color:var(--mut)} .kecil{font-size:12.5px} .pusat{text-align:center}
.n{font-family:var(--num)}
.tombol{display:block;width:100%;border:0;border-radius:11px;padding:11px;background:var(--acc);color:#fff;font-weight:700;cursor:pointer}
.tombol.garis{background:#fff;color:var(--acc);border:1.5px solid var(--acc)}
.tombol.kecil{display:inline-block;width:auto;padding:5px 10px;font-size:12.5px}
.tombol:disabled{background:#c9d3cd;color:#fff;border-color:#c9d3cd}
input.masuk{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font-size:18px}
input.kode{font-family:var(--num);font-size:28px;letter-spacing:.3em;text-align:center}
input.cari{width:100%;padding:9px;border:1px solid var(--line);border-radius:10px}
.chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.c-kirim{background:var(--info2);color:var(--info)} .c-rev{background:#d9efe6;color:#17694a}
.c-belum{background:var(--gray2);color:var(--gray)} .c-izin{background:var(--warn2);color:var(--warn)}
.c-bebas{background:#fff;color:var(--gray);border:1px dashed var(--line)}
.baris{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.baris:last-child{border-bottom:0}
.ar{font-family:var(--num);font-weight:700;background:var(--acc2);color:var(--acc);border-radius:7px;padding:2px 6px;
  font-size:12px;min-width:62px;text-align:center}
.gr{flex:1;min-width:0;line-height:1.3} .gr span{display:block;font-size:12px;color:var(--mut)}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stat div{background:var(--sf);border:1px solid var(--line);border-radius:11px;padding:8px}
.stat b{display:block;font-family:var(--num);font-size:18px}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;border:0;background:#fff;padding:7px;font-size:12.5px;font-weight:700;color:var(--mut)}
.seg button[aria-pressed=true]{background:var(--acc);color:#fff}
.minggu{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:10.5px}
.minggu button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 0;cursor:pointer}
.minggu b{display:block;font-family:var(--num);font-size:13px}
.minggu .s-kirim{background:var(--info2)} .minggu .s-rev{background:#d9efe6} .minggu .s-belum{background:#fff}
.minggu .pilih{outline:2px solid var(--ink)}
.f{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13.5px}
.f i{font-style:normal;color:var(--mut)}
.f .kosong{color:#a3aea8;font-style:italic}
.blok{margin-top:8px} .blok h3{margin:0 0 3px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.spanduk{border-radius:12px;padding:10px 12px;font-size:13px}
.spanduk.warn{background:var(--warn2);border:1px solid #e6c98f}
.spanduk.info{background:var(--info2);border:1px solid #b7c9de}
.spanduk.bad{background:var(--bad2);border:1px solid #e7b3a6}
.spanduk b{display:block;margin-bottom:2px}
s{color:var(--mut)}
.tab{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;
  padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.tab button{flex:1;border:0;background:#fff;padding:9px 0;font-size:12px;font-weight:600;color:var(--mut)}
.tab button[aria-current=page]{color:var(--acc);font-weight:800;box-shadow:inset 0 2px 0 var(--acc)}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:9px 14px;border-radius:10px;font-size:13px;max-width:90vw;z-index:9}
ol.langkah{margin:6px 0 0;padding-left:20px;font-size:13.5px}
.kembali{align-self:flex-start;border:0;background:none;color:var(--acc);font-weight:700;padding:4px 0;cursor:pointer}
.ubah{padding:2px 0;font-size:13px}
.ubah strong{font-weight:800}

/* ---- laptop (≥ 900 px): menu di kiri, isi lebar — dipakai HRD, admin, Direktur ---- */
@media (min-width: 900px) {
  body{padding-bottom:0}
  body.ada-tab{padding-left:210px}
  body.ada-tab .atas{margin-left:-210px;padding-left:224px}
  .tab{top:0;bottom:0;left:0;right:auto;width:210px;flex-direction:column;justify-content:flex-start;padding-top:70px;
       border-top:0;border-right:1px solid var(--line)}
  .tab button{flex:0 0 auto;text-align:left;padding:10px 18px;font-size:14px}
  .tab button[aria-current=page]{box-shadow:inset 3px 0 0 var(--acc);background:var(--acc2)}
  .isi{max-width:1180px;padding:18px 24px}
}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
.tabel th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:7px 8px;border-bottom:1px solid var(--line)}
.tabel td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tabel tr.klik{cursor:pointer} .tabel tr.klik:hover td{background:#f6faf7}
.saring{display:flex;flex-wrap:wrap;gap:8px}
.saring input,.saring select,.form input,.form select,.form textarea{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit}
.saring input{flex:1;min-width:200px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 14px}
.form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut);font-weight:600}
.form .penuh{grid-column:1/-1}
.c-merah{background:var(--bad2);color:var(--bad)} .c-ok{background:var(--ok2);color:var(--ok)}
.tab2{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab2 button{border:0;background:none;padding:8px 12px;font-weight:700;color:var(--mut);cursor:pointer}
.tab2 button[aria-pressed=true]{color:var(--acc);box-shadow:inset 0 -2px 0 var(--acc)}
.angka4{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.angka4 button{text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;cursor:pointer}
.angka4 button b{display:block;font-family:var(--num);font-size:24px}
.angka4 button.merah{background:var(--bad2);border-color:#e7b3a6}
.baris-aksi{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabel td.nw{white-space:nowrap}
.kartu.gulir{overflow-x:auto}
.tabel .chip{display:inline-block;margin:1px 2px 1px 0}
.balasan{white-space:pre-wrap;font:12.5px/1.45 system-ui,sans-serif;margin:6px 0 0;background:transparent}

input.in{width:52%;max-width:220px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-family:var(--num);text-align:right;background:#fff}
input.in:disabled{background:var(--bg);color:var(--mut)}
.f.rumus{border-top:1px dashed var(--line);margin-top:4px;padding-top:5px}
details.kartu summary{font-weight:700;cursor:pointer;padding:2px 0}