/* Tampilan Sistem Sensus Rawat Inap — diselaraskan dengan EMR RSUD Dr. Soetomo */
:root{
  /* diambil dari tampilan EMR Soetomo */
  --biru:#1D9BF0; --biru-tua:#0B7DD1; --biru-muda:#E8F4FE;
  --ungu:#7C3AED; --ungu-muda:#F0E9FE;
  --mint:#2DC5B6; --mint-muda:#DFF5F2; --mint-kepala:#D4F0EC; --mint-baris:#F2FBFA;
  --merah:#FF4D6D; --merah-muda:#FFE9ED;
  --kuning:#F5A524; --kuning-muda:#FFF4E0;
  --hijau:#3FB950; --hijau-muda:#E6F7E9;
  --ink:#233043; --ink-2:#67748A; --ink-3:#9AA5B5;
  --garis:#E6EAF0; --garis-2:#F0F3F7;
  --dasar:#F4F7FB; --kartu:#FFFFFF;
  --bayang:0 1px 2px rgba(33,49,77,.04), 0 6px 18px rgba(33,49,77,.06);
  --bayang-2:0 2px 6px rgba(33,49,77,.06), 0 12px 28px rgba(33,49,77,.09);
  --lengkung:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',-apple-system,Segoe UI,sans-serif;background:var(--dasar);color:var(--ink);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.angka,table,.kpi-utama .val,.kpi-sel .val,.kop-meta b{
  font-family:'IBM Plex Sans',-apple-system,sans-serif;font-variant-numeric:tabular-nums}

/* ============ kerangka ============ */
.app{display:flex;min-height:100vh}
.sidebar{width:238px;flex:none;background:var(--kartu);border-right:1px solid var(--garis);
  padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.merek{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.merek .lambang{width:34px;height:34px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--mint),var(--biru));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px}
.merek b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.merek span{display:block;font-size:11px;color:var(--ink-3);font-weight:400}
.nav-judul{font-size:10.5px;font-weight:600;color:var(--ink-3);letter-spacing:.07em;
  text-transform:uppercase;padding:12px 10px 6px}
.nav-btn{display:flex;align-items:center;gap:11px;width:100%;font:inherit;font-size:13.5px;
  font-weight:500;color:var(--ink-2);background:none;border:none;cursor:pointer;text-align:left;
  padding:10px 12px;border-radius:11px;margin-bottom:2px}
.nav-btn:hover{background:var(--garis-2);color:var(--ink)}
.nav-btn[aria-current="page"]{background:var(--biru);color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(29,155,240,.32)}
.nav-btn svg{width:18px;height:18px;flex:none}
/* menu anak: judul pendek dengan keterangan kecil di bawahnya */
.nav-anak{align-items:flex-start;padding:9px 12px}
.nav-anak svg{margin-top:1px}
.nav-anak span{display:block;line-height:1.25}
.nav-anak small{display:block;font-size:10.5px;font-weight:400;color:var(--ink-3);
  margin-top:2px;letter-spacing:0}
.nav-anak[aria-current="page"] small{color:rgba(255,255,255,.82)}
.utama{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{background:var(--kartu);border-bottom:1px solid var(--garis);padding:11px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:30}
.remah{font-size:12.5px;color:var(--ink-3)}
.remah b{color:var(--ink);font-weight:500}
.topbar-kanan{display:flex;align-items:center;gap:10px}
.pengguna{display:flex;align-items:center;gap:9px;background:var(--biru-muda);
  border-radius:999px;padding:5px 14px 5px 6px}
.pengguna .foto{width:26px;height:26px;border-radius:50%;background:var(--biru);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:600}
.pengguna span{font-size:12.5px;font-weight:500;color:var(--biru-tua)}
.ikon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--garis);background:var(--kartu);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.ikon-btn:hover{background:var(--garis-2);color:var(--ink)}
.ikon-btn svg{width:16px;height:16px}

.wrap{padding:20px 22px 56px;max-width:1560px;width:100%}
.halaman{display:none}
.halaman.aktif{display:block}

/* ============ kartu ============ */
.kartu{background:var(--kartu);border-radius:var(--lengkung);box-shadow:var(--bayang);margin-top:16px}
.kartu-kop{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:15px 20px;flex-wrap:wrap}
.kartu-kop h2{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px}
.kartu-kop h2 .titik{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}
.kartu-kop .sub{font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:400}
.kartu-isi{padding:0 20px 18px}

.kop{background:linear-gradient(115deg,#0B7DD1,#1D9BF0 46%,#2DC5B6);border-radius:var(--lengkung);
  padding:20px 24px;color:#fff;box-shadow:var(--bayang-2)}
.kop-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.kop h1{font-size:19px;font-weight:600;letter-spacing:-.01em}
.kop .rs{font-size:12.5px;opacity:.85;margin-top:2px}
.kop-meta{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.kop-meta div{background:rgba(255,255,255,.16);border-radius:12px;padding:8px 14px;
  font-size:11.5px;min-width:112px;backdrop-filter:blur(2px)}
.kop-meta b{display:block;font-size:16px;font-weight:600;margin-top:1px}
.btn{font:inherit;font-size:12.5px;font-weight:500;padding:8px 16px;border:none;border-radius:999px;
  background:rgba(255,255,255,.2);color:#fff;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.32)}
.btn-solid{background:#fff;color:var(--biru-tua);font-weight:600}
.btn-solid:hover{background:#F2F8FE}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ============ peringatan ============ */
.alert{display:flex;gap:12px;align-items:flex-start;background:var(--kuning-muda);
  border-radius:13px;padding:12px 16px;margin-top:12px}
.alert .tanda{width:22px;height:22px;border-radius:50%;background:var(--kuning);color:#fff;
  font-size:13px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:1px}
.alert p{font-size:13px}
.alert b{font-weight:600}
.alert .sub{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.alert-bad{background:var(--merah-muda)}
.alert-bad .tanda{background:var(--merah)}

/* ============ kartu indikator ============ */
.kpi{display:grid;grid-template-columns:minmax(238px,1fr) 2.3fr;gap:14px;margin-top:16px}
.kpi-utama{background:linear-gradient(135deg,#7C3AED,#A855F7);border-radius:var(--lengkung);
  padding:20px 22px;color:#fff;box-shadow:0 10px 26px rgba(124,58,237,.26)}
.kpi-utama .lbl{font-size:12.5px;opacity:.9;font-weight:500}
.kpi-utama .val{font-size:50px;font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:4px 0 2px}
.kpi-utama .ket{font-size:11.5px;opacity:.82}
.kpi-utama .anomali,.kpi-utama .diluar{color:#fff}
.kpi-sisa{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi-sel{background:var(--kartu);border-radius:var(--lengkung);padding:15px 16px;box-shadow:var(--bayang);
  border-top:3px solid var(--biru)}
.kpi-sel:nth-child(2){border-top-color:var(--mint)}
.kpi-sel:nth-child(3){border-top-color:var(--kuning)}
.kpi-sel:nth-child(4){border-top-color:var(--ungu)}
.kpi-sel:nth-child(5){border-top-color:var(--merah)}
.kpi-sel .lbl{font-size:12px;color:var(--ink-2);font-weight:500}
.kpi-sel .val{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:2px 0 2px}
.kpi-sel .ket{font-size:10.5px;color:var(--ink-3)}
.kpi-sisa.redup{opacity:.45}
.diluar{color:var(--kuning)}
.anomali{color:var(--merah)}

/* ============ filter ============ */
.pilih{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);
  font-weight:500;margin-left:10px}
.pilih select{font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);padding:6px 11px;
  border:1px solid var(--garis);border-radius:999px;background:#FBFCFE;cursor:pointer}
.pilih select:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 3px rgba(29,155,240,.13)}
#pilih-grafik{display:flex;flex-wrap:wrap;gap:4px}
.filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:13px;align-items:end}
.fld label{display:block;font-size:11.5px;color:var(--ink-2);font-weight:500;margin-bottom:5px}
.fld select,.fld input{width:100%;font:inherit;font-size:13px;padding:9px 12px;
  border:1px solid var(--garis);background:#FBFCFE;color:var(--ink);border-radius:11px}
.fld select:focus,.fld input:focus{outline:none;border-color:var(--biru);background:#fff;
  box-shadow:0 0 0 3px rgba(29,155,240,.13)}

/* ============ tab pil ============ */
.tabs{display:flex;gap:4px;padding:14px 20px 0;flex-wrap:wrap}
.tab{font:inherit;font-size:12.5px;font-weight:500;padding:8px 16px;border:none;border-radius:999px;
  background:var(--garis-2);color:var(--ink-2);cursor:pointer}
.tab:hover{background:#E4EAF2;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--biru);color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(29,155,240,.3)}

/* ============ tabel ============ */
.gulung{overflow:auto;max-height:580px;margin:0 6px 6px;border-radius:12px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
th,td{white-space:nowrap}
thead tr.grup th{position:sticky;top:0;z-index:4;height:29px;background:var(--mint-kepala);
  font-size:10.5px;font-weight:600;color:#1B7A70;text-align:center;letter-spacing:.02em;
  border-right:2px solid #fff}
thead tr.kepala th{position:sticky;top:0;z-index:4;background:var(--mint-muda);text-align:right;
  padding:8px 10px;font-weight:600;font-size:11.5px;color:#1B7A70}
thead tr.kepala th.kiri{text-align:left}
#tabel thead tr.kepala th{top:29px}   /* satu-satunya tabel dengan baris grup */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{background:#C7ECE6}
th.sortable::after{content:'';margin-left:4px;opacity:.35}
th[data-arah="asc"]::after{content:'\25B2';opacity:.95}
th[data-arah="desc"]::after{content:'\25BC';opacity:.95}
tbody td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--garis-2)}
tbody td.kiri{text-align:left}
tbody tr:nth-child(even) td{background:var(--mint-baris)}
tbody tr:hover td{background:var(--biru-muda)}
tbody tr.mati td{color:var(--ink-3);font-style:italic}
.beku{position:sticky;left:0;z-index:3;background:var(--kartu);font-weight:500;
  background-clip:padding-box;
  box-shadow:1px 0 0 var(--garis)}
thead .beku{z-index:6}
thead tr.grup th.beku{background:var(--mint-kepala);text-align:left}
thead tr.kepala th.beku{background:var(--mint-muda)}
tbody tr:nth-child(even) td.beku{background:var(--mint-baris)}
tbody tr:hover td.beku{background:var(--biru-muda)}
.induk{cursor:pointer}
.induk td{font-weight:600}
.induk:hover td{background:var(--biru-muda)}
.panah{display:inline-block;width:14px;color:var(--ink-3);font-size:10px}
tbody tr.anak td{color:var(--ink-2);font-weight:400}
tbody tr.anak td.beku{padding-left:28px;font-weight:400}
.tag{font-size:10.5px;color:var(--ink-3);margin-left:6px}
.kol-input{background:rgba(245,165,36,.09)}
.kol-calc{background:rgba(45,197,182,.10)}
.kol-tt{background:rgba(29,155,240,.09)}
.batas{border-left:2px solid #fff}
.flag{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:700;padding:1px 6px;
  border-radius:999px;vertical-align:1px;background:var(--merah);color:#fff}
tfoot tr.rata td{background:var(--mint-baris);color:var(--ink-2);font-weight:500;
  border-top:1px solid var(--garis-2);font-size:12px}
td.titik-waktu span{display:block;font-size:9.5px;font-weight:500;color:var(--ink-3);
  letter-spacing:.01em;margin-top:1px;font-family:'Poppins'}
tfoot td{padding:11px 10px;text-align:right;font-weight:600;
  background:var(--mint-kepala);color:#14655D;border-top:2px solid var(--mint)}
tfoot td.kiri{text-align:left}
tfoot td.beku{z-index:3;background:var(--mint-kepala)}

.legenda{display:flex;gap:18px;flex-wrap:wrap;padding:12px 20px 0;font-size:11.5px;
  color:var(--ink-2);align-items:center}
.legenda span{display:flex;align-items:center;gap:7px}
.kotak{width:12px;height:12px;border-radius:4px;flex:none}
.titik-nilai{width:9px;height:9px;border-radius:50%;flex:none}
.nilai-legenda{padding-top:10px;border-top:1px solid var(--garis-2);margin:10px 20px 0;
  padding-left:0;padding-right:0}
.nilai-legenda.ideal{border-top:none;padding-top:2px;margin-top:0;color:var(--ink-3);font-size:11px}
.nilai-legenda.ideal b{font-weight:600;color:var(--ink-2)}
.nilai-legenda.ideal span{gap:0}
.catatan{font-size:12px;color:var(--ink-2);padding:12px 20px 4px;line-height:1.6}
.sembunyi{display:none}
.lonceng{position:relative}
.lencana-jml{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--merah);color:#fff;font-size:10px;font-weight:700;
  display:none;place-items:center;line-height:16px;font-family:'IBM Plex Sans'}
.lencana-jml.ada{display:grid}
.panel-layang{position:fixed;top:56px;right:20px;z-index:50;width:min(430px,calc(100vw - 32px));
  background:var(--kartu);border-radius:var(--lengkung);box-shadow:var(--bayang-2);
  display:none;overflow:hidden}
.panel-layang.buka{display:block}
.layang-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--garis-2)}
.layang-kop b{font-size:14px;font-weight:600}
.layang-kop span{font-size:11.5px;color:var(--ink-3)}
#layang-isi{max-height:60vh;overflow:auto;padding:10px 14px 14px}
#layang-isi .alert{margin-top:8px}
#layang-isi .alert:first-child{margin-top:0}
.layang-kosong{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:13px}
.tirai{display:none;position:fixed;inset:0;z-index:60;background:rgba(35,48,67,.42);
  backdrop-filter:blur(2px);place-items:center;padding:20px}
.tirai.buka{display:grid}
.dialog{background:var(--kartu);border-radius:var(--lengkung);box-shadow:var(--bayang-2);
  width:100%;max-width:430px;max-height:90vh;overflow:auto}
.dialog-kop{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;
  border-bottom:1px solid var(--garis-2)}
.dialog-kop b{font-size:15px;font-weight:600}
.dialog-isi{padding:16px 20px;display:grid;gap:12px}
.dialog-nota{font-size:11.5px;color:var(--ink-3);line-height:1.6;background:var(--garis-2);
  border-radius:11px;padding:10px 12px}
.dialog-kaki{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 18px}
.dokumen{padding-bottom:8px}
.dok-kop{display:flex;align-items:center;justify-content:center;gap:22px;
  padding:22px 30px 12px;position:relative}
.dok-logo{height:66px;width:auto;flex:none}
.dok-teks{text-align:center;line-height:1.18}
.dok-teks b{display:block;font-size:17px;font-weight:700;color:#00A147;letter-spacing:.04em}
.dok-teks strong{display:block;font-size:29px;font-weight:700;color:#00A147;letter-spacing:.01em}
.dok-teks address{display:block;font-style:normal;font-size:11px;color:#6B6C72;
  margin-top:6px;max-width:430px;line-height:1.45}
.dok-garis{border-top:3px solid #00A147;border-bottom:1px solid #00A147;
  height:4px;margin:4px 26px 0}
.dok-judul{margin-top:15px;text-align:center}
.dok-judul h3{font-size:14.5px;font-weight:600;letter-spacing:.05em}
.dok-judul span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:3px}
#l-kunci-lencana{position:absolute;top:20px;right:24px}
.dok-ttd{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;padding:26px 34px 24px}
.dok-ttd div{text-align:center;font-size:12px}
.dok-ttd span{display:block;color:var(--ink-2)}
.dok-ttd b{display:block;font-weight:500;margin-top:1px}
.dok-ttd .garis{margin-top:54px;font-size:12px;color:var(--ink-2)}
.ubah-ringkas{background:var(--garis-2);border-radius:11px;padding:11px 13px;font-size:12.5px}
.ubah-ringkas b{display:block;font-weight:600;margin-bottom:5px}
.ubah-ringkas .panah-ubah{font-family:'IBM Plex Sans';font-variant-numeric:tabular-nums}
.ubah-ringkas .dari{color:var(--ink-3);text-decoration:line-through}
.ubah-ringkas .jadi{color:var(--biru-tua);font-weight:700;font-size:15px}
.kisi-input.warisan{color:var(--ink-3);font-style:italic}
.kisi-input.diubah{background:var(--kuning-muda);border-color:var(--kuning);
  font-weight:700;font-style:normal;color:var(--ink)}
.tt-lama{display:block;font-size:9.5px;color:var(--ink-3);text-decoration:line-through;
  text-align:right;padding-right:6px;line-height:1.3;font-family:'IBM Plex Sans'}
.bar-terapkan{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin:0 20px 12px;padding:11px 16px;border-radius:13px;
  background:var(--kuning-muda);border:1px solid #E4D3A4}
.bar-terapkan p{font-size:12.5px;color:#7A5600}
.bar-terapkan b{font-weight:600}
.bar-terapkan .aksi{display:flex;gap:8px}
th.terkunci{opacity:.55}
.ada-data{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--hijau);
  margin-left:4px;vertical-align:2px}
.tt-info{font-size:12.5px;color:var(--ink-2);background:var(--garis-2);border-radius:11px;
  padding:9px 12px;line-height:1.7}
.tt-info b{color:var(--ink);font-family:'IBM Plex Sans';font-variant-numeric:tabular-nums}
.kum{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;
  background:var(--kuning-muda);color:#8A6100;border-radius:999px;padding:3px 11px;margin-left:8px}
.kum.nol{background:var(--hijau-muda);color:#2A7D36}
.pita-judul{font-size:11px;color:var(--ink-3);font-weight:500;margin-bottom:7px}
.pita{display:flex;gap:3px;flex-wrap:wrap}
.pita button{width:26px;height:30px;border:none;border-radius:7px;cursor:pointer;
  font:inherit;font-size:10.5px;font-weight:600;color:#fff;line-height:1;
  display:grid;place-items:center;font-family:'IBM Plex Sans'}
.pita .p-cocok{background:var(--hijau)}
.pita .p-belum{background:var(--kuning)}
.pita .p-selisih{background:var(--merah)}
.pita .p-pilih{outline:2.5px solid var(--ink);outline-offset:1.5px}
.kisi-input{width:100%;min-width:42px;font:inherit;font-size:12px;text-align:right;
  padding:4px 5px;border:1px solid transparent;border-radius:7px;background:transparent;
  font-family:'IBM Plex Sans';font-variant-numeric:tabular-nums;color:var(--ink)}
.kisi-input:hover{border-color:var(--garis);background:#fff}
.kisi-input:focus{outline:none;border-color:var(--biru);background:#fff;
  box-shadow:0 0 0 3px rgba(29,155,240,.13)}
.kisi-input.diubah{background:var(--kuning-muda);border-color:var(--kuning);font-weight:600}
tr.sorot td{box-shadow:inset 0 0 0 2px var(--ink)}
td.sel-input{padding:2px 4px}
.ringkas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.ringkas div{background:var(--kartu);border-radius:var(--lengkung);padding:14px 16px;
  box-shadow:var(--bayang);border-left:4px solid var(--garis)}
.ringkas b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;
  font-family:'IBM Plex Sans';font-variant-numeric:tabular-nums}
.ringkas span{font-size:11.5px;color:var(--ink-2)}
.ringkas .r-cocok{border-left-color:var(--hijau)}
.ringkas .r-periksa{border-left-color:var(--kuning)}
.ringkas .r-selisih{border-left-color:var(--merah)}
.ringkas .r-selesai{border-left-color:var(--biru)}
tr.perlu td{background:var(--kuning-muda) !important}
tr.selisih td{background:var(--merah-muda) !important}
.selisih-angka{font-weight:700;color:var(--merah)}
.cocok-angka{color:var(--hijau);font-weight:600}
.sebab{font-size:11px;color:var(--ink-2)}
@media(max-width:900px){.ringkas{grid-template-columns:repeat(2,1fr)}}
.sensus-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sensus-kolom{background:#FBFCFE;border:1px solid var(--garis);border-radius:13px;padding:14px 16px}
.kolom-judul{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px}
.baris-isi{display:grid;grid-template-columns:1fr 78px 78px;gap:8px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--garis-2)}
.baris-isi:last-child{border-bottom:none}
.baris-isi label{font-size:12.5px;color:var(--ink-2)}
.baris-isi .emr{font-size:12px;color:var(--ink-3);text-align:right;font-family:'IBM Plex Sans';
  font-variant-numeric:tabular-nums}
.baris-isi input{width:100%;font:inherit;font-size:13px;text-align:right;padding:6px 9px;
  border:1px solid var(--garis);border-radius:9px;background:#fff;
  font-family:'IBM Plex Sans';font-variant-numeric:tabular-nums}
.baris-isi input:focus{outline:none;border-color:var(--biru);box-shadow:0 0 0 3px rgba(29,155,240,.13)}
.baris-isi.beda input{border-color:var(--kuning);background:var(--kuning-muda)}
.baris-isi.kelompok{border-bottom:none;padding-top:12px}
.baris-isi.kelompok label{font-size:10.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.05em;text-transform:uppercase}
.kepala-isi{display:grid;grid-template-columns:1fr 78px 78px;gap:8px;font-size:10.5px;
  font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  padding-bottom:7px;border-bottom:1px solid var(--garis)}
.kepala-isi span:not(:first-child){text-align:right}
.baris-hitung{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--garis-2);font-size:12.5px}
.baris-hitung:last-child{border-bottom:none}
.baris-hitung span{color:var(--ink-2)}
.baris-hitung b{font-family:'IBM Plex Sans';font-variant-numeric:tabular-nums;font-size:15px}
.baris-hitung.utama b{font-size:19px;color:var(--biru-tua)}
.aksi-baris{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.periksa{border-radius:11px;padding:10px 13px;font-size:12px;margin-top:12px;line-height:1.6}
.periksa-ok{background:var(--hijau-muda);color:#2A7D36}
.periksa-salah{background:var(--merah-muda);color:#A32118}
@media(max-width:900px){.sensus-grid{grid-template-columns:1fr}}
.lencana{display:inline-block;font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:999px}
.l-aktif{background:var(--hijau-muda);color:#2A7D36}
.l-mati{background:var(--garis-2);color:var(--ink-3)}
.l-kelas{background:var(--biru-muda);color:var(--biru-tua)}
.aksi-btn{font:inherit;font-size:11.5px;font-weight:500;padding:4px 12px;border-radius:999px;
  border:1px solid var(--garis);background:var(--kartu);color:var(--ink-2);cursor:pointer}
.aksi-btn:hover{border-color:var(--biru);color:var(--biru-tua);background:var(--biru-muda)}
.kosong{padding:56px 20px;text-align:center;color:var(--ink-3)}
.kosong b{display:block;font-size:15px;color:var(--ink-2);font-weight:600;margin-bottom:5px}

@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff;font-size:9px}
  .sidebar,.topbar,.no-print{display:none !important}
  .halaman:not(.aktif){display:none !important}
  .dokumen{box-shadow:none;border:none}
  .dok-logo{height:58px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dok-teks b,.dok-teks strong{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dok-garis{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #l-kunci-lencana{display:none}
  .dok-ttd{display:grid !important}
  .wrap{padding:0;max-width:none}
  .kartu,.kop,.kpi-utama,.kpi-sel{box-shadow:none;border:1px solid #CCC;break-inside:avoid}
  .kop,.kpi-utama{background:#F2F2F2 !important;color:#000 !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kop-meta div{background:#FFF !important;border:1px solid #DDD}
  .gulung{max-height:none;overflow:visible}
  thead th,tfoot td,.beku{position:static !important}
  thead th{background:#EEE !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  tbody tr{break-inside:avoid}
  .ttd{display:grid !important;grid-template-columns:repeat(2,1fr);gap:60px;margin-top:26px;break-inside:avoid}
  .ttd div{text-align:center;font-size:10px}
  .ttd .garis{margin-top:52px;border-top:1px solid #000;padding-top:3px}
}
.ttd{display:none}
@media(max-width:1100px){
  .sidebar{display:none}
  .kpi{grid-template-columns:1fr}
  .kpi-sisa{grid-template-columns:repeat(2,1fr)}
}

/* ======================================================================
   KARTU INDIKATOR — enam kartu seukuran, bisa diklik
   ====================================================================== */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
@media (max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}

.kpi-kartu{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--garis-2,#E6EAF0);border-radius:14px;
  padding:16px 16px 14px;font:inherit;position:relative;overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.kpi-kartu::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--mint,#2DC5B6)}
.kpi-kartu.k-alos::before{background:#1D9BF0}
.kpi-kartu.k-toi::before{background:#2DC5B6}
.kpi-kartu.k-bto::before{background:#E8A33D}
.kpi-kartu.k-ndr::before{background:#7C5CD6}
.kpi-kartu.k-gdr::before{background:#E05A4E}
.kpi-kartu:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,40,60,.10);
  border-color:var(--garis,#D8DEE7)}
.kpi-kartu:focus-visible{outline:2px solid var(--biru,#1D9BF0);outline-offset:2px}

.kpi-kepala{display:flex;align-items:center;justify-content:space-between;gap:6px}
.kpi-kartu .lbl{font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2,#5A625E)}
.kpi-tanda{width:14px;height:14px;color:var(--ink-3,#9AA5B5);opacity:.55;flex:none}
.kpi-kartu:hover .kpi-tanda{opacity:1;color:var(--biru,#1D9BF0)}
.kpi-kartu .val{font-family:'Poppins',sans-serif;font-size:27px;font-weight:700;
  line-height:1.15;color:var(--ink,#1C2430);letter-spacing:-.015em}
.kpi-kartu .val.diluar{color:var(--kuning,#C9A227)}
.kpi-kartu .val.anomali{color:var(--merah,#A32118)}
.kpi-kartu .ket{font-size:11px;color:var(--ink-3,#9AA5B5)}

/* ======================================================================
   DIALOG REKOMENDASI
   ====================================================================== */
.dialog-rekom{padding:0;overflow:hidden}
.rekom-kop{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;color:#fff;
  background:linear-gradient(135deg,#5E8F52,#4A7342)}
.rekom-kop.r-rendah{background:linear-gradient(135deg,#D98324,#B4621A)}
.rekom-kop.r-tinggi{background:linear-gradient(135deg,#C4473C,#9B2F26)}
.rekom-kop .rekom-ikon{width:34px;height:34px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;
  background:rgba(255,255,255,.22)}
.rekom-kop>div:nth-child(2){flex:1;min-width:0}
.rekom-kop b{display:block;font-family:'Poppins',sans-serif;font-size:17px;font-weight:600}
.rekom-kop span{display:block;font-size:12px;opacity:.88;margin-top:2px}
.rekom-kop .rekom-lencana{display:inline-block;margin-top:9px;padding:4px 11px;border-radius:999px;
  background:rgba(255,255,255,.2);font-size:11.5px;font-weight:500;opacity:1}
.rekom-kop .ikon-btn{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.rekom-kop .ikon-btn:hover{background:rgba(255,255,255,.24)}

.rekom-angka{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.rekom-angka>div{background:var(--mint-baris,#F2F7F5);border-radius:10px;padding:10px 12px}
.rekom-angka span{display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3,#9AA5B5);margin-bottom:3px}
.rekom-angka b{font-family:'Poppins',sans-serif;font-size:16px;color:var(--ink,#1C2430)}

.rekom-uraian{border-left:3px solid var(--kuning,#C9A227);background:#FFFBF0;
  border-radius:0 10px 10px 0;padding:13px 15px;margin-bottom:16px}
.rekom-uraian b{display:block;font-size:13.5px;color:#8A6D1F;margin-bottom:4px}
.rekom-uraian p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2,#5A625E)}

.rekom-tindakan{border:1px solid var(--garis-2,#E6EAF0);border-radius:12px;padding:15px 17px;
  margin-bottom:14px}
.rekom-tindakan>b{display:block;font-size:13px;margin-bottom:10px;color:var(--ink,#1C2430)}
.rekom-tindakan ol{margin:0;padding:0;list-style:none;counter-reset:rk}
.rekom-tindakan li{counter-increment:rk;position:relative;padding:9px 0 9px 36px;font-size:13px;
  line-height:1.55;color:var(--ink-2,#5A625E);border-top:1px solid var(--garis-3,#F0F3F6)}
.rekom-tindakan li:first-child{border-top:none;padding-top:0}
.rekom-tindakan li::before{content:counter(rk);position:absolute;left:0;top:7px;
  width:23px;height:23px;border-radius:50%;background:var(--mint,#2DC5B6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600}
.rekom-tindakan li:first-child::before{top:-1px}

.rekom-info{background:var(--mint-baris,#F2F7F5);border-radius:10px;padding:11px 14px;
  font-size:12.5px;color:var(--ink-2,#5A625E);margin-bottom:10px}
.rekom-catatan{font-size:11px;color:var(--ink-3,#9AA5B5);line-height:1.5;font-style:italic}

/* penanda ruangan berkelas banyak, bisa diklik */
.tanda-kelas{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--garis,#D8DEE7);background:#fff;cursor:pointer;
  font:500 10.5px/1.5 'IBM Plex Sans',sans-serif;color:var(--ink-3,#9AA5B5);
  transition:all .13s ease;vertical-align:middle}
.tanda-kelas:hover{border-color:var(--biru,#1D9BF0);color:var(--biru,#1D9BF0);
  background:#F0F8FE}

/* tabel sensus harian berkelas: lebih padat karena kolomnya banyak */
.tabel-kelas th,.tabel-kelas td{padding:7px 6px;font-size:11.5px}
.tabel-kelas .kepala-kelas th{font-size:10px;font-weight:500;letter-spacing:0;
  background:var(--mint-baris,#F2F7F5);color:var(--ink-2,#5A625E);text-transform:none}
.dok-lebar .gulung{overflow-x:auto}

/* ======================================================================
   CETAK — mendatar, kepala tabel berulang, baris tidak terpotong
   ====================================================================== */
@media print{
  @page{size:A4 landscape;margin:9mm}
  .no-print,.sidebar,.topbar,.panel-layang,.tirai{display:none !important}
  body{background:#fff}
  .app,.utama,.wrap{display:block;margin:0;padding:0;max-width:none}
  .kartu,.dokumen{box-shadow:none;border:none;margin:0;page-break-inside:auto}
  .gulung{max-height:none !important;overflow:visible !important}
  table{page-break-inside:auto;width:100%}
  thead{display:table-header-group}            /* kepala berulang tiap halaman */
  tfoot{display:table-row-group}
  tr{page-break-inside:avoid;page-break-after:auto}
  th,td{padding:4px 5px;font-size:8.5px}
  .tabel-kelas th,.tabel-kelas td{padding:3px 3px;font-size:7px}
  .dok-kop{page-break-after:avoid}
  .dok-ttd{page-break-inside:avoid;page-break-before:auto}
  .legenda,.catatan{font-size:8px}
  .beku{position:static !important}
}