/* VISKAS (Visit K3 & Sanitasi) RSWN: latar halaman gradasi penuh Merah - Kuning, kartu isian putih. */
:root{--card:#fff;--tx:#2a2224;--mu:#6b6062;--bd:#eadfe1;--in:#c9c3c4;--pr:#a8172a;--pr2:#fdeceb;--ex:#c62828;--ok:#1e7a3c;--yl:#f2b705;--bar:#d9461f;--bar2:#f2b705}
@media(prefers-color-scheme:dark){:root{--card:#211b1c;--tx:#f0e9ea;--mu:#ab9fa1;--bd:#3a2f31;--in:#4a3e40;--pr:#f07d84;--pr2:#3a2226;--ex:#ef7070;--ok:#66bb6a;--bar:#f08a4b;--bar2:#f5c84c}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:system-ui,'Segoe UI',Arial,sans-serif;color:var(--tx);font-size:14px;line-height:1.5;
  background:radial-gradient(circle at 90% 0,rgba(255,224,102,.55),transparent 40%),linear-gradient(135deg,#9c1426 0%,#c8261f 30%,#e8611a 60%,#f5a623 82%,#f9d23c 100%) fixed}
@media(prefers-color-scheme:dark){body{background:radial-gradient(circle at 90% 0,rgba(245,200,76,.25),transparent 40%),linear-gradient(135deg,#4a0b13 0%,#6e1714 35%,#7a3a10 70%,#7a5a12 100%) fixed}}
header{display:flex;align-items:center;gap:14px;padding:14px 20px;color:#fff;flex-wrap:wrap;background:rgba(0,0,0,.12);border-bottom:4px solid rgba(255,224,102,.85)}
header .lg{flex:none;width:60px;height:60px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center}header .lg img{width:50px;height:50px;object-fit:contain}
header h1{margin:0;font-size:20px;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.25)}header p{margin:2px 0 0;font-size:12px;font-weight:600;color:#ffe9b8}
header .acct{color:#fff}header .acct .who{color:#ffe9b8}header .acct .who b{color:#fff}
header .btn.o{background:rgba(255,255,255,.92);color:#a8172a;border-color:#fff}header .btn.d{background:#fff;color:#c62828;border-color:#fff}
main{max-width:1200px;margin:0 auto;padding:18px}
.crumb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.crumb a{color:#fff;font-weight:600;text-decoration:none;background:rgba(0,0,0,.18);padding:5px 12px;border-radius:99px;font-size:13px}
.crumb a:hover{background:rgba(0,0,0,.3)}
h2.title{margin:0 0 12px;color:#fff;font-size:19px;letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;margin-bottom:16px;box-shadow:0 6px 22px rgba(80,10,10,.18);overflow:hidden}
.card>h3{margin:0;padding:12px 18px;border-bottom:1px solid var(--bd);color:var(--pr);font-size:15px;background:linear-gradient(90deg,#fff3c9,transparent 80%)}
@media(prefers-color-scheme:dark){.card>h3{background:linear-gradient(90deg,#3a301a,transparent 80%)}}
.card .bd{padding:12px 18px 18px}
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.9);border-radius:10px;padding:4px;margin-bottom:14px;flex-wrap:wrap}
@media(prefers-color-scheme:dark){.tabs{background:rgba(33,27,28,.9)}}
.tabs button{flex:1;min-width:150px;border:0;background:none;padding:9px;border-radius:7px;color:var(--mu);cursor:pointer;font:inherit;font-weight:600}
.tabs button.on{background:linear-gradient(135deg,#a8172a,#e8611a);color:#fff}
.grid{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Laptop / desktop: satu baris 3 atau 4 isian; tablet 2 isian; ponsel 1 isian. */
.grid.g3,.grid.g4{grid-template-columns:1fr}
@media(min-width:600px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
label.l{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}.req{color:var(--ex)}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--in);border-radius:8px;background:var(--card);color:var(--tx);font:inherit}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--pr);vertical-align:middle}
input:focus,textarea:focus,select:focus{outline:2px solid var(--yl);outline-offset:0;border-color:var(--pr)}
input[readonly]{background:var(--pr2)}
textarea{resize:vertical;min-height:70px}
.btn{padding:8px 15px;border-radius:8px;border:1px solid var(--pr);background:var(--pr);color:#fff;cursor:pointer;font:inherit;font-weight:600;text-decoration:none;display:inline-block}
.btn.o{background:none;color:var(--pr)}.btn.d{border-color:var(--ex);color:var(--ex);background:none}.btn.g{border-color:var(--ok);background:var(--ok)}.btn.s{padding:3px 9px;font-size:12px}
.btn:disabled{opacity:.55;cursor:wait}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.bar .sp{flex:1}
.alert{border-radius:8px;padding:10px 12px;margin:0 0 12px;font-size:13px}.alert.i{background:#fff3c9;color:#5a4300}.alert.ok{background:#e3f4e4;color:#1e5e22}.alert.er{background:#fdecea;color:var(--ex)}
@media(prefers-color-scheme:dark){.alert.i{background:#3a301a;color:#f5d98c}.alert.ok{background:#1b3323;color:#8fd6a5}.alert.er{background:#3d2224}}
.mu{color:var(--mu)}.note{color:var(--mu);font-size:12px;margin:8px 0 0}
.flt{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:12px 18px;align-items:end}.flt label{font-size:12px;font-weight:600;color:var(--mu)}.flt select,.flt input{padding:7px 9px}
.tw{overflow-x:auto}table.list{border-collapse:collapse;width:100%;font-size:13px}
.list th,.list td{padding:8px 9px;border-bottom:1px solid var(--bd);text-align:left;vertical-align:top}.list th{font-size:12px;color:var(--mu);background:#fff3c9;white-space:nowrap}
@media(prefers-color-scheme:dark){.list th{background:#3a301a}}
.list td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.list td.c{text-align:center}.list td.ac{white-space:nowrap}.list td.ac .btn{margin:2px}.list .sub{color:var(--mu);font-size:12px}
.chip{display:inline-block;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700;margin:1px 2px 1px 0;background:var(--pr2);color:var(--pr)}
.chip.fin{background:#e3f4e4;color:#1e5e22}.chip.dr{background:#fff3c9;color:#7a5a00}.chip.wt{background:#fde3cf;color:#9a3d06}.chip.er{background:#fdecea;color:var(--ex)}.chip.gr{background:#eceff1;color:#455a64}
.empty{padding:26px;text-align:center;color:var(--mu)}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border-radius:12px;padding:14px 16px;box-shadow:0 6px 22px rgba(80,10,10,.18);border-top:4px solid var(--yl)}.kpi span{display:block;font-size:12px;color:var(--mu);font-weight:600}
.kpi b{display:block;font-size:26px;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.kpi small{color:var(--mu);font-size:12px}
.charts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.charts .card{margin:0}
.hb{display:grid;grid-template-columns:minmax(110px,40%) 1fr 54px;gap:6px 10px;align-items:center;font-size:13px}
.hb .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb .tr{height:14px;border-radius:0 4px 4px 0;background:var(--pr2)}
.hb .tr i{display:block;height:100%;background:var(--bar);border-radius:0 4px 4px 0;min-width:2px}.hb .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cols{display:flex;align-items:flex-end;gap:5px;height:200px;padding-top:18px}.cols .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.cols .c i{display:block;width:100%;max-width:36px;background:var(--bar);border-radius:4px 4px 0 0}.cols .c b{font-size:10px;font-variant-numeric:tabular-nums;margin-bottom:2px;white-space:nowrap}
.cols .c span{font-size:10px;color:var(--mu);margin-top:4px;border-top:1px solid var(--in);width:100%;text-align:center;padding-top:3px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ok);color:#fff;padding:12px 18px;border-radius:8px;max-width:420px;z-index:70;box-shadow:0 4px 14px rgba(0,0,0,.25)}.toast.err{background:var(--ex)}
.ckt{width:100%;border-collapse:collapse;font-size:13px}.ckt th,.ckt td{border:1px solid var(--bd);padding:7px 8px;vertical-align:middle}.ckt th{background:#fff3c9;font-size:12px}
@media(prefers-color-scheme:dark){.ckt th{background:#3a301a}}
.ckt td.o{position:relative}
.ckt tr.grp td{background:var(--pr2);color:var(--pr);font-weight:700}.ckt td.o{width:74px;text-align:center}
.ckt label.ya,.ckt label.tdk{display:inline-flex;align-items:center;justify-content:center;width:46px;height:32px;border:2px solid var(--in);border-radius:8px;cursor:pointer;font-weight:800;font-size:16px;color:transparent;user-select:none}
.ckt input{position:absolute;opacity:0;pointer-events:none}
.ckt input:checked+label.ya{border-color:var(--ok);background:#e3f4e4;color:var(--ok)}.ckt input:checked+label.tdk{border-color:var(--ex);background:#fdecea;color:var(--ex)}
.ckt input:focus-visible+label{outline:2px solid var(--yl)}
.ckt tr.miss td{background:rgba(242,183,5,.12)}
/* Komponen / item tambahan (Gizi & Rawat Inap): kolom teks tetap tampil di dalam tabel ceklis. */
.ckt input:not([type=radio]):not([type=checkbox]){position:static;opacity:1;pointer-events:auto}
.ckt .tbw{display:flex;gap:6px;align-items:center}.ckt .tbw input{flex:1;min-width:0;padding:6px 9px}
.ckt .tbx{border:none;background:none;color:var(--ex);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}
/* Kelola komponen tetap (Monitoring Sanitasi Unit): ubah keterangan / hapus komponen */
.ckt .kk{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}.ckt .kk button{border:1px solid rgba(168,23,42,.35);background:none;color:var(--pr);border-radius:6px;cursor:pointer;font-size:12px;line-height:1;padding:3px 6px}
.ckt .kk button.kh{color:var(--ex);border-color:rgba(198,40,40,.4)}.ckt tr.grp .kk button{background:rgba(255,255,255,.85)}
.ckt tr.tbr td{background:rgba(168,23,42,.035)}.ckt tr.tbadd td{padding:6px 8px}
.ckt .tbadd button{border:1px dashed var(--pr);background:none;color:var(--pr);font:inherit;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;padding:5px 10px}
.ckt th.o{width:74px}.ckt>tbody.hd{display:none}
/* Laptop / desktop: komponen yang diperiksa tampil 2 butir per baris (judul komponen selebar tabel). */
@media(min-width:900px){
  table.ckt.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  table.ckt.two>thead{display:none}
  table.ckt.two>tbody{display:table;width:100%;border-collapse:collapse;table-layout:fixed;margin-top:-1px}
  table.ckt.two>tbody.g{grid-column:1/-1;margin-top:10px}table.ckt.two>tbody.g:first-of-type{margin-top:0}
  table.ckt.two>tbody.hd{display:table}
}
canvas.sig{width:100%;max-width:400px;aspect-ratio:8/3;border:1px dashed var(--mu);border-radius:8px;background:#fff;cursor:crosshair;display:block}
.drop{border:2px dashed var(--in);border-radius:10px;padding:14px;text-align:center}
.pv{max-height:420px;overflow:auto;border:1px solid var(--bd);border-radius:8px;margin-top:10px}
.sum{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
/* Komponen yang Diperiksa (Gizi): 1 baris berisi 2 komponen (kiri & kanan) di laptop / desktop, 1 komponen per baris di ponsel. */
.kgrid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:900px){.kgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Ponsel: ukuran huruf sedikit lebih besar agar mudah dibaca. */
@media(max-width:599px){
  body{font-size:15.5px}
  header h1{font-size:21px}header p{font-size:13px}.crumb a{font-size:14px}h2.title{font-size:20px}.card>h3{font-size:16.5px}
  label.l{font-size:14.5px}input,textarea,select{font-size:16px}
  .btn{font-size:15px}.btn.s{font-size:13.5px}.alert{font-size:14.5px}.note{font-size:13.5px}
  .flt label{font-size:13.5px}table.list{font-size:14.5px}.list th{font-size:13.5px}.list .sub{font-size:13.5px}.chip{font-size:12px}
  .kpi span,.kpi small{font-size:13.5px}.hb{font-size:14.5px}.cols .c b,.cols .c span{font-size:11px}
  .ckt{font-size:14.5px}.ckt th{font-size:13.5px}
  body .hero h2{font-size:31px}body .akses{font-size:14.5px}body .unit b{font-size:16.5px}body .unit span,body .unit em{font-size:14.5px}
  body .ckt label.na,body .ckt label.ya,body .ckt label.tdk,body .ckt tr.det label.l,body .ckt .tm{font-size:13.5px}
  body .rek span{font-size:14.5px}body .rek b{font-size:16.5px}body .outlet h4{font-size:15.5px}
}
[hidden]{display:none!important}
/* Monitoring IPAL: Monitoring Harian Debit Air Limbah & Logbook Tim IPAL RSWN dalam satu bagian (pindah bagian tanpa ke menu). */
.ipal-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.ipal-nav a{flex:1 1 220px;text-align:center;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.88);color:#a8172a;font-weight:800;text-decoration:none;box-shadow:0 4px 14px rgba(80,10,10,.18);border:2px solid transparent}
.ipal-nav a[aria-current=page]{background:#a8172a;color:#fff;border-color:#f2b705}.ipal-nav a:not([aria-current]):hover{border-color:#a8172a}
@media(prefers-color-scheme:dark){.ipal-nav a{background:rgba(33,27,28,.92);color:#f28b95}.ipal-nav a[aria-current=page]{background:#a8172a;color:#fff}}
@media print{.ipal-nav{display:none!important}}