/* ============================================================================
   Portal Akreditasi Puskesmas Kedungwuni I (MASNITU)
   Gaya tampilan — hijau Puskesmas, tanpa pustaka luar (cepat & tidak
   bergantung internet).
   ========================================================================= */

:root{
  --h900:#064e3b; --h800:#065f46; --h700:#047857; --h600:#059669; --h500:#10b981;
  --h50:#ecfdf5;  --h100:#d1fae5;  --teal:#0d9488;
  --tinta:#0f172a; --tinta2:#334155; --tinta3:#64748b;
  --garis:#e2e8f0; --garis2:#eef2f7; --latar:#f1f5f9; --putih:#fff;
  --merah:#b91c1c; --merah-bg:#fef2f2; --kuning:#b45309; --kuning-bg:#fffbeb;
  --r:14px; --r2:10px;
  --bayang:0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--latar); color:var(--tinta);
  font:15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--h700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; line-height:1.25}
code{background:#f1f5f9; border:1px solid var(--garis); padding:1px 5px; border-radius:5px; font-size:12.5px}
.ik{width:19px; height:19px; flex:0 0 auto}
.ik-b{width:34px; height:34px}

/* ------------------------------------------------------------------ TOPBAR */
.tb{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  background:var(--h900); color:#fff; padding:10px 18px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 10px rgba(4,46,38,.25);
}
.tb a{color:#fff}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0}
.brand img{width:44px; height:44px; border-radius:50%; background:#fff; padding:2px}
.brand-t{display:flex; flex-direction:column; min-width:0}
.brand-t b{font-size:16px; letter-spacing:.2px; white-space:nowrap}
.brand-t i{font-style:normal; font-size:12px; color:#a7f3d0; white-space:nowrap}
.tb-kab{width:30px; height:38px; object-fit:contain; margin-left:auto; background:#fff; border-radius:5px; padding:1px}
.tb-r{display:flex; align-items:center; gap:8px; margin-left:14px}
.who{display:flex; flex-direction:column; text-align:right; line-height:1.25; margin-right:4px}
.who b{font-size:13.5px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who i{font-style:normal; font-size:11.5px; color:#a7f3d0}
.tb .btn-s{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); color:#fff}
.tb .btn-s:hover{background:rgba(255,255,255,.2); text-decoration:none}

/* ------------------------------------------------------------- MODE UJI COBA */
.mode-uji{
  display:flex; gap:12px; align-items:flex-start; background:var(--kuning-bg);
  border-bottom:1px solid #fde68a; color:#78350f; padding:11px 18px; font-size:13.5px;
}
.mode-uji svg{width:20px; height:20px; flex:0 0 auto; margin-top:1px}
.mode-uji code{background:#fff7ed; border-color:#fde68a}

/* ------------------------------------------------------------------ KERANGKA */
.app{display:flex; gap:22px; align-items:flex-start; max-width:1640px; margin:0 auto; padding:22px 18px 30px}
.nav{width:252px; flex:0 0 252px; position:sticky; top:78px; display:flex; flex-direction:column; gap:18px}
.nav-g{display:flex; flex-direction:column; gap:4px}
.nav-t{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta3); padding:0 10px 4px}
.nav a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r2);
  color:var(--tinta2); font-size:14px; font-weight:500; text-decoration:none;
}
.nav a:hover{background:#fff; color:var(--h800); text-decoration:none}
.nav a.on{background:var(--h700); color:#fff; font-weight:600; box-shadow:var(--bayang)}
.nav a.on svg{color:#d1fae5}
.nav-bab em{
  font-style:normal; font-weight:700; font-size:11.5px; width:24px; height:24px; flex:0 0 24px;
  display:grid; place-items:center; border-radius:7px; background:var(--h50); color:var(--h800); border:1px solid var(--h100);
}
.nav-bab span{font-size:13.5px}
.main{flex:1; min-width:0}
.wrap{display:flex; flex-direction:column; gap:20px}

/* -------------------------------------------------------------- KEPALA HALAMAN */
.ph{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ph-t h1{font-size:23px}
.ph-t p{margin:3px 0 0; color:var(--tinta3); font-size:13.5px}
.ph-a{display:flex; gap:9px; flex-wrap:wrap}

/* ------------------------------------------------------------------- KARTU */
.card{background:#fff; border:1px solid var(--garis); border-radius:var(--r); box-shadow:var(--bayang); overflow:hidden}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--garis2)}
.card-h h2{font-size:16px}
.card-h p{margin:2px 0 0; font-size:12.5px; color:var(--tinta3)}
.card-b{padding:18px}
.card-b+.card-b{border-top:1px solid var(--garis2)}
.card-f{padding:12px 18px; border-top:1px solid var(--garis2); background:#fbfdfc; font-size:12.5px; color:var(--tinta3)}

/* --------------------------------------------------------------------- KPI */
.kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.kpi{
  background:#fff; border:1px solid var(--garis); border-left:4px solid var(--h600);
  border-radius:var(--r); padding:16px 18px; box-shadow:var(--bayang);
  display:flex; flex-direction:column; gap:2px;
}
.kpi-l{font-size:12px; font-weight:600; color:var(--tinta3); text-transform:uppercase; letter-spacing:.05em}
.kpi-n{font-size:27px; line-height:1.15}
.kpi-k{font-size:12px; color:var(--tinta3)}
.kpi.ok{border-left-color:var(--h600)}
.kpi.warn{border-left-color:#f59e0b}
.kpi.bad{border-left-color:#dc2626}
.kpi.info{border-left-color:var(--teal)}

/* ------------------------------------------------------------------ PROGRES */
.bar{height:9px; background:var(--h50); border-radius:99px; overflow:hidden; border:1px solid var(--h100)}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--h600),var(--teal)); border-radius:99px}
.bar-t{font-size:12px; color:var(--tinta3); margin-top:5px; display:block}
.baris-progres{display:flex; flex-direction:column; gap:14px}

/* ------------------------------------------------------------------- TABEL */
.tbl{width:100%; overflow-x:auto}
table.dt{width:100%; border-collapse:collapse; font-size:14px}
table.dt th{
  text-align:left; background:#f8fafc; color:var(--tinta2); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--garis); white-space:nowrap;
}
table.dt td{padding:11px 12px; border-bottom:1px solid var(--garis2); vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt tr:hover td{background:#fbfdfc}
table.dt .nm{font-weight:600}
table.dt .sub{display:block; font-size:12.5px; color:var(--tinta3)}
td.aksi{white-space:nowrap}
td.num,th.num{text-align:right}
.kol-kode{font-family:ui-monospace, Consolas, monospace; font-size:13px; color:var(--h800)}

/* ----------------------------------------------------------------- LENCANA */
.badge{display:inline-block; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:600; border:1px solid transparent; white-space:nowrap}
.b-draft{background:#f1f5f9; color:#475569; border-color:#e2e8f0}
.b-review{background:var(--kuning-bg); color:#92400e; border-color:#fde68a}
.b-lengkap{background:var(--h50); color:var(--h800); border-color:var(--h100)}
.b-verif{background:#ecfeff; color:#0e7490; border-color:#cffafe}
.b-hijau{background:var(--h50); color:var(--h800); border-color:var(--h100)}
.b-merah{background:var(--merah-bg); color:var(--merah); border-color:#fecaca}
.b-abu{background:#f1f5f9; color:#475569; border-color:#e2e8f0}

/* ------------------------------------------------------------------ TOMBOL */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:var(--r2);
  font-size:14px; font-weight:600; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  background:#e2e8f0; color:var(--tinta2); line-height:1.2;
}
.btn:hover{text-decoration:none; filter:brightness(.97)}
.btn-p{background:var(--h700); color:#fff}
.btn-p:hover{background:var(--h800)}
.btn-s{background:#fff; border-color:#cbd5e1; color:var(--tinta2)}
.btn-s:hover{background:#f8fafc}
.btn-d{background:var(--merah-bg); color:var(--merah); border-color:#fecaca}
.btn-k{padding:6px 10px; font-size:13px; gap:5px}
.btn-k .ik{width:16px; height:16px}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-baris{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ------------------------------------------------------------------ FORMULIR */
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.fgrid .penuh{grid-column:1/-1}
.f{display:flex; flex-direction:column; gap:6px; min-width:0}
.f label{font-size:13px; font-weight:600; color:var(--tinta2)}
.f label span{font-weight:400; color:var(--tinta3)}
.f input,.f select,.f textarea{
  width:100%; padding:9px 11px; border:1px solid #cbd5e1; border-radius:9px; font:inherit;
  background:#fff; color:var(--tinta);
}
.f textarea{min-height:88px; resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--h500); outline-offset:1px; border-color:var(--h600)}
.f .petunjuk{font-size:12px; color:var(--tinta3)}
.bilah-filter{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
.bilah-filter .f{gap:4px}
.bilah-filter select,.bilah-filter input{width:auto; min-width:150px; padding:8px 10px; font-size:13.5px}
.bilah-filter .tumbuh{flex:1 1 220px}
input[type=file]{padding:7px; background:#fbfdfc}

/* -------------------------------------------------------------------- FLASH */
.flash{border-radius:var(--r2); padding:11px 15px; font-size:14px; border:1px solid transparent}
.fl-ok{background:var(--h50); border-color:var(--h100); color:var(--h900)}
.fl-err{background:var(--merah-bg); border-color:#fecaca; color:var(--merah)}
.fl-warn{background:var(--kuning-bg); border-color:#fde68a; color:#78350f}

/* ------------------------------------------------------------------ KOSONG */
.empty{display:flex; flex-direction:column; align-items:center; gap:6px; padding:38px 18px; text-align:center; color:var(--tinta3)}
.empty b{color:var(--tinta2); font-size:15px}
.empty span{font-size:13px}

/* ---------------------------------------------------------------- PAGINASI */
.pag{display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:13.5px}
.pag a,.pag span{border:1px solid var(--garis); border-radius:8px; padding:5px 11px; background:#fff; color:var(--tinta2)}
.pag a:hover{background:var(--h50); border-color:var(--h100); text-decoration:none}
.pag .on{background:var(--h700); border-color:var(--h700); color:#fff; font-weight:700}
.pag .off{color:#cbd5e1}
.pag .info{border:0; background:transparent; color:var(--tinta3); margin-left:6px}

/* -------------------------------------------------------------------- LAIN */
.dua-kolom{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.tiga-kolom{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.info-baris{display:flex; gap:8px; padding:7px 0; border-bottom:1px dashed var(--garis2); font-size:13.5px}
.info-baris:last-child{border-bottom:0}
.info-baris b{min-width:150px; color:var(--tinta3); font-weight:600}
.info-baris span{min-width:0; overflow-wrap:anywhere}
.kotak-catatan{background:var(--h50); border:1px solid var(--h100); border-radius:var(--r2); padding:12px 15px; font-size:13.5px; color:var(--h900)}
.kotak-catatan b{display:block; margin-bottom:3px}
.kotak-catatan ul{margin:5px 0 0; padding-left:20px}
.peringatan{background:var(--kuning-bg); border:1px solid #fde68a; color:#78350f; border-radius:var(--r2); padding:12px 15px; font-size:13.5px}
.tanda-tabel{font-size:12.5px; color:var(--tinta3)}
.kartu-drive{display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--garis); border-radius:var(--r2); background:#fff}
.kartu-drive b{font-size:14px}
.kartu-drive span{font-size:12px; color:var(--tinta3); word-break:break-all}
.daftar-bab{display:flex; flex-direction:column; gap:16px}

/* -------------------------------------------------------------------- KAKI */
.ft{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--garis); background:#fff; padding:18px; margin-top:12px;
  font-size:12.5px; color:var(--tinta3);
}
.ft b{display:block; color:var(--tinta2); font-size:13.5px}
.ft span{display:block}
.ft-r{text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:10px}
.ft-kab{width:26px; height:33px; object-fit:contain; background:#fff; border-radius:4px; padding:1px}

/* ------------------------------------------------------------- HAPUS/MODAL */
dialog{border:1px solid var(--garis); border-radius:var(--r); padding:0; max-width:520px; width:92%; box-shadow:0 20px 50px rgba(15,23,42,.25)}
dialog::backdrop{background:rgba(15,23,42,.45)}
dialog .card{border:0; box-shadow:none}
dialog .card-b p{margin:0 0 12px; font-size:14px}

/* ------------------------------------------------------------------ SELULER */
@media (max-width:1080px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiga-kolom{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .app{flex-wrap:wrap; gap:18px; padding:18px 14px 26px}
  .nav{width:100%; flex:1 1 100%; position:static; flex-direction:row; flex-wrap:wrap; gap:10px}
  .nav-g{flex:1 1 240px}
  .nav-t{padding-left:2px}
  .nav a{padding:8px 10px; font-size:13.5px}
  .brand-t i{display:none}
  .who i{display:none}
  /* Lajur kanan turun ke bawah isi agar kolom isi tetap lega. */
  .rail{width:100%; flex:1 1 100%; position:static}
  .rail-stat{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .fgrid,.dua-kolom,.kpi-grid,.tiga-kolom{grid-template-columns:1fr}
  .ph{flex-direction:column; align-items:flex-start}
  .rail-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galeri{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .tb .btn span{display:none}
  .tb .btn{padding:8px}
  .who b{max-width:110px}
  .ft-r{text-align:left}
  .brand-t b{font-size:14px}
  .tb-kab{display:none}
  /* Topbar sempit: lencana akreditasi pindah ke barisnya sendiri supaya
     .tb-r (nama pengguna + tombol) tidak melewati tepi layar. */
  .tb{flex-wrap:wrap; row-gap:8px; padding:10px 12px}
  .brand{flex:1 1 auto}
  .tb-status{order:9; margin-left:0; flex:1 1 100%; text-align:center}
  .tb-r{margin-left:auto}
}
@media (max-width:560px){
  /* Layar sangat sempit: nama pengguna disembunyikan (identitas tetap tampil
     pada judul halaman & menu) agar tombol Keluar tetap terjangkau. */
  .who{display:none}
  .tb{gap:10px}
  .brand-t b{font-size:13.5px}
  .card-b{padding-left:12px; padding-right:12px}
}

/* ============================================================================
   TAMBAHAN v2 — topbar berstatus, tab versi, progres, kartu wilayah, elemen.
   ========================================================================= */

/* ------------------------------------------------- TOPBAR: lencana akreditasi */
.tb-status{
  margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 13px; border-radius:99px; white-space:nowrap;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
}
.tb-status.ok  {background:#059669; border-color:#10b981}
.tb-status.warn{background:#b45309; border-color:#f59e0b}
.tb-status.bad {background:#b91c1c; border-color:#ef4444}

/* ------------------------------------------------------- SIDEBAR: tab versi */
.nav-versi{
  background:#fff; border:1px solid var(--garis); border-radius:var(--r); padding:10px 11px;
  box-shadow:var(--bayang); display:flex; flex-direction:column; gap:7px;
}
.nv-t{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta3)}
.nav-versi{flex-direction:column}
.nav-versi a{
  display:block; text-align:center; padding:7px 8px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--tinta2); background:#f8fafc; border:1px solid var(--garis); text-decoration:none;
}
.nav-versi a.on{background:var(--h700); color:#fff; border-color:var(--h700)}
.nav-versi a:hover{text-decoration:none; border-color:var(--h700)}

/* ---------------------------------------------------- SIDEBAR: lebar & lencana */
.nav{width:310px; flex:0 0 310px}
.nav a{gap:9px}
.nav .badge-num{
  margin-left:auto; font-style:normal; font-size:11px; font-weight:700; min-width:34px; text-align:center;
  padding:2px 7px; border-radius:99px; background:var(--h50); color:var(--h800); border:1px solid var(--h100);
}
.nav .badge-num.b2{background:#f1f5f9; color:var(--tinta3); border-color:var(--garis)}
.nav a.on .badge-num{background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.35)}
.nav a.nav-kcl span{font-size:13px; line-height:1.3}
.nav a.nav-kcl{padding:7px 11px}

/* --------------------------------------------------------------- TAB VERSI */
.vt{display:inline-flex; gap:4px; background:#eef2f7; border:1px solid var(--garis); border-radius:99px; padding:3px}
.vt a{padding:6px 15px; border-radius:99px; font-size:13px; font-weight:600; color:var(--tinta2); text-decoration:none}
.vt a.on{background:#fff; color:var(--h800); box-shadow:0 1px 3px rgba(15,23,42,.12)}
.vt a:hover{text-decoration:none}

/* ------------------------------------------------------------------ PROGRES */
.prog{
  display:grid; grid-template-columns:minmax(0,1fr) 150px 48px 108px; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--garis); border-radius:var(--r2); background:#fff; text-decoration:none;
}
.prog:hover{border-color:var(--h600); text-decoration:none; background:#fbfdfc}
.prog-t{font-size:13.5px; font-weight:600; color:var(--tinta2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prog-n{font-size:14px; text-align:right}
.prog-k{font-size:12px; color:var(--tinta3); text-align:right}
.bar.ok i{background:linear-gradient(90deg,#059669,#10b981)}
.bar.warn i{background:linear-gradient(90deg,#d97706,#f59e0b)}
.bar.bad i{background:linear-gradient(90deg,#b91c1c,#ef4444)}

/* ------------------------------------------------------ KARTU AKSI (shortcut) */
.aksi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px}
.aksi{
  display:flex; flex-direction:column; gap:5px; padding:15px 16px; border:1px solid var(--garis);
  border-radius:var(--r2); background:#fff; text-decoration:none; box-shadow:var(--bayang);
}
.aksi:hover{border-color:var(--h600); text-decoration:none; transform:translateY(-1px)}
.aksi b{font-size:14px; color:var(--tinta)}
.aksi span{font-size:12.5px; color:var(--tinta3)}
.aksi svg{width:22px; height:22px; color:var(--h700)}

/* -------------------------------------------------------------- KARTU WILAYAH
   (gaya rinci kartu wilayah ada di bagian "LAJUR KANAN & KARTU WILAYAH" di
   bawah; di sini hanya warna pembeda jenisnya.) */
.wil.kel{border-left-color:var(--teal)}
.wil.kosong{border-left-color:#f59e0b; background:#fffdf7}
.wil:hover{border-color:var(--h600)}

/* --------------------------------------------------------------- TABEL ELEMEN */
table.dt td.kode{font-weight:700; color:var(--h800); white-space:nowrap; font-variant-numeric:tabular-nums}
.badge.e-ada  {background:#dcfce7; color:#166534; border-color:#bbf7d0}
.badge.e-belum{background:#fee2e2; color:#991b1b; border-color:#fecaca}
.badge.e-revisi{background:#fef3c7; color:#92400e; border-color:#fde68a}
.saring{display:grid; grid-template-columns:130px 150px minmax(0,1fr) 130px 130px auto; gap:12px; align-items:end}
.langkah{border:1px dashed var(--h100); background:#fbfdfc; border-radius:var(--r2); padding:12px 14px; font-size:13px}

@media (max-width:1100px){
  .nav{width:250px; flex:0 0 250px}
  .prog{grid-template-columns:minmax(0,1fr) 110px 44px}
  .prog-k{display:none}
  .saring{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* PENTING: saat .app menjadi satu kolom, align-items:flex-start membuat .main
   selebar isinya (tabel lebar bisa melewati layar). Wajib stretch. */
@media (max-width:900px){
  .app{flex-direction:column; align-items:stretch}
  .nav{width:100%; flex:1 1 auto; position:static}
  .main{width:100%; flex:1 1 auto}
  .nav-versi{flex-direction:row; align-items:center}
  .nav-versi a{flex:1}
}

/* ============================================================================
   LAJUR KANAN (rail) — "Wilayah Kerja", "Berkas & Dokumentasi", "Alat",
   dan ringkasan capaian. Dipindah dari menu kiri supaya halaman tidak
   menyisakan banyak ruang kosong di sisi kanan.
   ========================================================================= */
.rail{
  width:268px; flex:0 0 268px; position:sticky; top:78px;
  display:flex; flex-direction:column; gap:14px;
}
/* Bertahap: lajur kanan menyempit, lalu TURUN KE BAWAH isi supaya kolom isi
   tetap lega. Ambang 1280px dipilih dari hasil PENGUKURAN (pada 1100–1024px
   kolom isi tinggal ±440px bila lajur kanan tetap di samping). */
@media (max-width:1500px){
  .rail{width:246px; flex:0 0 246px}
}
@media (max-width:1280px){
  .app{flex-wrap:wrap}
  .rail{width:100%; flex:1 1 100%; position:static}
  .rail-stat{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.rail-g{
  background:#fff; border:1px solid var(--garis); border-radius:var(--r);
  padding:12px; box-shadow:var(--bayang); display:flex; flex-direction:column; gap:5px;
}
.rail-t{
  display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta3); padding:1px 4px 6px; border-bottom:1px dashed var(--garis2);
  margin-bottom:3px;
}
.rail-t .ik-s{width:15px; height:15px; color:var(--h700)}
.rail-i{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r2);
  color:var(--tinta2); font-size:14px; font-weight:600; border:1px solid transparent; text-decoration:none;
}
.rail-i .ik{width:18px; height:18px; color:var(--h700); flex:0 0 auto}
.rail-i-t{display:flex; flex-direction:column; min-width:0}
.rail-i-t b{font-size:14px; font-weight:600; color:inherit}
.rail-i-t i{font-style:normal; font-size:11.5px; color:var(--tinta3); font-weight:500}
.rail-i .badge-num{margin-left:auto}
.rail-i:hover{background:var(--h50); border-color:var(--h100); text-decoration:none; color:var(--h800)}
.rail-i.on{background:var(--h700); border-color:var(--h700); color:#fff}
.rail-i.on .ik{color:#d1fae5}
.rail-i.on .rail-i-t i{color:#a7f3d0}
.rail-i.on .badge-num{background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.35)}

.rail-stat{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rail-stat .rs{
  display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:var(--r2);
  background:#f8fafc; border:1px solid var(--garis); text-decoration:none; border-left:3px solid var(--h600);
}
.rail-stat .rs b{font-size:17px; color:var(--h800); line-height:1.15}
.rail-stat .rs span{font-size:11px; color:var(--tinta3); line-height:1.35}
.rail-stat .rs.warn{border-left-color:var(--kuning)}
.rail-stat .rs.warn b{color:var(--kuning)}
.rail-stat .rs.bad{border-left-color:var(--merah)}
.rail-stat .rs.bad b{color:var(--merah)}
.rail-stat .rs:hover{border-color:var(--h600); text-decoration:none}
.rail-bantuan{
  flex-direction:row; gap:9px; align-items:flex-start; background:#fbfdfc; border-style:dashed;
}
.rail-bantuan .ik-s{width:17px; height:17px; color:var(--h700); flex:0 0 auto; margin-top:1px}
.rail-bantuan p{margin:0; font-size:12px; color:var(--tinta3); line-height:1.5}

/* ============================================================================
   LENCANA & IKON JENIS BERKAS
   ========================================================================= */
.bicon{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; margin-right:8px; vertical-align:-9px;
  background:#f1f5f9; color:var(--tinta3); border:1px solid var(--garis);
}
.bicon .ik{width:17px; height:17px}
.jbadge{
  display:inline-block; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700;
  background:#f1f5f9; color:var(--tinta3); border:1px solid var(--garis); white-space:nowrap;
}
.g-foto  .ik, .bicon.g-foto {color:#0f766e}  .jbadge.g-foto {background:#ccfbf1; color:#0f766e; border-color:#99f6e4}
.g-pdf   .ik, .bicon.g-pdf  {color:#b91c1c}  .jbadge.g-pdf  {background:#fee2e2; color:#991b1b; border-color:#fecaca}
.g-word  .ik, .bicon.g-word {color:#1d4ed8}  .jbadge.g-word {background:#dbeafe; color:#1e40af; border-color:#bfdbfe}
.g-excel .ik, .bicon.g-excel{color:#15803d}  .jbadge.g-excel{background:#dcfce7; color:#166534; border-color:#bbf7d0}
.g-slide .ik, .bicon.g-slide{color:#b45309}  .jbadge.g-slide{background:#fef3c7; color:#92400e; border-color:#fde68a}
.g-arsip .ik, .bicon.g-arsip{color:#6d28d9}  .jbadge.g-arsip{background:#ede9fe; color:#5b21b6; border-color:#ddd6fe}

/* ============================================================================
   GALERI FOTO DOKUMENTASI
   ========================================================================= */
.galeri{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}
.gal{
  margin:0; border:1px solid var(--garis); border-radius:var(--r2); overflow:hidden; background:#fff;
  box-shadow:var(--bayang); display:flex; flex-direction:column;
}
.gal:hover{border-color:var(--h600)}
.gal-f{
  display:flex; align-items:center; justify-content:center; height:150px; background:#f1f5f9;
  color:var(--tinta3); overflow:hidden; text-decoration:none;
}
.gal-f img{width:100%; height:150px; object-fit:cover; display:block}
.gal-f:hover{text-decoration:none}
.gal figcaption{padding:10px 12px; display:flex; flex-direction:column; gap:3px}
.gal figcaption b{font-size:13px; color:var(--tinta); line-height:1.35}
.gal figcaption>span{font-size:11.5px; color:var(--tinta3)}
.gal-a{display:flex; flex-wrap:wrap; gap:10px; margin-top:5px}
.gal-a a{font-size:12px; font-weight:700; color:var(--h700); text-decoration:none; display:inline-flex; align-items:center; gap:4px}
.gal-a a .ik{width:14px; height:14px}
.gal-a a:hover{text-decoration:underline}

/* ============================================================================
   PRATINJAU DOKUMEN (lihat.php)
   ========================================================================= */
.pra-foto{
  display:flex; justify-content:center; background:#f1f5f9; border:1px solid var(--garis);
  border-radius:var(--r2); padding:14px; max-height:70vh; overflow:auto;
}
.pra-foto img{max-width:100%; max-height:66vh; object-fit:contain; border-radius:8px; background:#fff}
.pra-bingkai{
  border:1px solid var(--garis); border-radius:var(--r2); overflow:hidden; background:#f1f5f9; height:74vh;
}
.pra-bingkai iframe{width:100%; height:100%; border:0; display:block}
.pra-teks{
  margin:0; padding:16px; background:#f8fafc; border:1px solid var(--garis); border-radius:var(--r2);
  font-family:ui-monospace,Consolas,"Courier New",monospace; font-size:12.5px; line-height:1.65;
  white-space:pre-wrap; word-break:break-word; max-height:70vh; overflow:auto;
}
.pra-petunjuk{margin:10px 0 0; font-size:12.5px; color:var(--tinta3)}
.pra-kartu{
  display:flex; gap:16px; align-items:flex-start; padding:18px;
  background:#f8fafc; border:1px dashed var(--garis); border-radius:var(--r2);
}
.pra-ikon{
  width:56px; height:56px; flex:0 0 56px; border-radius:12px; background:#fff; border:1px solid var(--garis);
  display:flex; align-items:center; justify-content:center; color:var(--h700);
}
.pra-kartu b{font-size:15px}
.pra-kartu p{margin:5px 0 12px; font-size:13.5px; color:var(--tinta3)}
.pra-nav{display:flex; flex-wrap:wrap; gap:9px}
.pra-nav-i{
  display:inline-flex; align-items:center; gap:7px; max-width:330px; padding:7px 11px; border-radius:99px;
  border:1px solid var(--garis); background:#fff; font-size:12.5px; color:var(--tinta2); text-decoration:none;
}
.pra-nav-i .ik{width:15px; height:15px; color:var(--h700)}
.pra-nav-i:hover{border-color:var(--h600); text-decoration:none}
.pra-nav-i.on{background:var(--h700); border-color:var(--h700); color:#fff}
.pra-nav-i.on .ik{color:#d1fae5}

/* ============================================================================
   KARTU WILAYAH — kini <div> berisi tautan + tombol Buka/Ubah/Hapus
   ========================================================================= */
.wil-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px}
.wil{
  position:relative; display:flex; flex-direction:column; gap:0; padding:0; background:#fff;
  border:1px solid var(--garis); border-left:4px solid var(--h600); border-radius:var(--r2);
  box-shadow:var(--bayang); overflow:hidden;
}
.wil-isi{
  display:flex; flex-direction:column; gap:6px; padding:14px 15px 11px; text-decoration:none;
}
.wil-isi:hover{text-decoration:none; background:#fbfdfc}
.wil b{font-size:14.5px; color:var(--tinta)}
.wil .wj{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tinta3)}
.wil .wk{font-size:12.5px; color:var(--tinta3)}
.wil .wn{font-size:11.5px; color:var(--h800); font-weight:600}
.wil-a{
  display:flex; flex-wrap:wrap; gap:7px; padding:9px 12px; border-top:1px solid var(--garis2); background:#fbfdfc;
}
.wil-a form{margin:0}
.mini{
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; font-size:12px;
  font-weight:700; color:var(--h800); background:#fff; border:1px solid var(--garis); text-decoration:none; cursor:pointer;
}
.mini .ik{width:14px; height:14px}
.mini:hover{border-color:var(--h600); text-decoration:none}
.mini-d{color:var(--merah)}
.mini-d:hover{border-color:var(--merah); background:var(--merah-bg)}

/* ------------------------------------------------------------------- CETAK */
@media print{
  .tb,.nav,.ft,.mode-uji,.ph-a,.no-print,.pag,.rail{display:none!important}
  body{background:#fff}
  .app{padding:0; max-width:none; gap:0}
  .card{box-shadow:none; border-color:#cbd5e1; break-inside:avoid}
  .card-h{background:#f8fafc}
  table.dt th{background:#f1f5f9}
  a{color:inherit}
  .wrap{gap:14px}
  .prog{break-inside:avoid}
  .wil{break-inside:avoid}
}

/* ============================================================================
   SISTEM — baris pemeriksaan & tindakan
   ========================================================================= */
.info-baris.perlu{background:#fffbf5; border-color:#fde68a}
.tindakan{
  display:flex; gap:7px; align-items:flex-start; margin-top:7px; padding:8px 11px; border-radius:9px;
  background:#fffbeb; border:1px solid #fde68a; color:#78350f; font-size:12.5px; line-height:1.5;
}
.tindakan .ik{width:15px; height:15px; flex:0 0 auto; margin-top:2px}