:root{
  --bg:#EFF5F6;
  --surface:#FFFFFF;
  --ink:#0E2A32;
  --ink-soft:#4C6870;
  --ink-faint:#7E97A0;
  --primary:#0B5566;
  --primary-light:#1C8CA0;
  --primary-pale:#DCEEF1;
  --edit:#B97709;
  --edit-pale:#FBEEDA;
  --edit-ink:#7A4E10;
  --line-muted:#C7DADD;
  --good:#3E9B6F;
  --good-pale:#E1F1E9;
  --warn:#D9A03B;
  --warn-pale:#FBEDD6;
  --low:#C6553D;
  --low-pale:#F8E3E1;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:32px 20px 80px;}

header.top{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:2px solid var(--ink);
  padding-bottom:18px;margin-bottom:28px;flex-wrap:wrap;gap:12px;
}
.brand{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:0.08em;color:var(--ink-soft);text-transform:uppercase;}
h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:30px;margin:2px 0 0;font-weight:700;color:var(--primary);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.top-note{font-size:13px;color:var(--ink-soft);max-width:320px;text-align:right;}

.status-pill{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 11px;
  font-size:11.5px;font-weight:700;vertical-align:middle;
}
.status-pill.good{background:var(--good);color:#fff;}
.status-pill.warn{background:var(--warn);color:#fff;}

.page-footer-note{margin-top:24px;text-align:center;}
.page-footer-note a{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--ink-soft);text-decoration:none;
}
.page-footer-note a:hover{color:var(--primary);}

/* ---------------------------------------------------------------------
   Hub (halaman apps/kpi-sab/index.html): kartu-kartu jenis laporan KPI.
   Pola kartu sama dengan hub Tools/Data/Development di beranda, dipakai
   ulang di sini supaya menambah "isian" baru nanti tinggal menambah satu
   <div class="hub-card">, bukan membangun ulang tampilannya.
--------------------------------------------------------------------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.hub-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-muted);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:10px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
/* Kartu hub: tata letak normal seperti kartu lain. Paragraf TIDAK ikut
   membesar (flex-grow 0) -- kalau dibiarkan flex:1, kartu yang isinya pendek
   jadi berlubang besar di antara teks dan tag. Tombol ditempel ke bawah lewat
   margin-top:auto, jadi ruang sisa jatuh di BAWAH tag (bukan di tengah kartu). */
.hub-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(14,42,50,.10);border-color:#BFD8E0;}
.hub-card h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;margin:0;}
.hub-card p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:0 1 auto;}
.hub-card .open{margin-top:auto;}
.hub-glow{
  position:absolute;top:-50px;right:-50px;width:170px;height:170px;
  border-radius:50%;filter:blur(10px);opacity:.5;pointer-events:none;z-index:0;
  background:radial-gradient(circle,var(--primary-pale),transparent 70%);
}
.hub-card > *:not(.hub-glow){position:relative;z-index:1;}
.hub-ic{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;background:var(--primary);
}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--primary-pale);color:var(--primary);}
.hub-card .open{
  align-self:flex-start;font-size:13.5px;font-weight:600;
  color:#fff;background:var(--ink);padding:8px 16px;border-radius:8px;
  transition:background .15s;
}
.hub-card .open:hover{background:var(--primary);}
.hub-card.soon{opacity:.65;}
.hub-card.soon .open{background:var(--ink-faint);pointer-events:none;}

/* ---------------------------------------------------------------------
   Kartu KPI kategori lain (terpisah dari deret 18.x/19.x): tepi putus-putus
   + aksen amber (--edit) supaya jelas itu kelompok berbeda. Akses lewat
   panah ke bawah (.scroll-down) dari bagian kartu utama.
--------------------------------------------------------------------- */
.hub-card.alt{
  border-style:dashed;border-color:var(--edit);
}
.hub-card.alt .hub-glow{background:radial-gradient(circle,var(--edit-pale),transparent 70%);}
.hub-card.alt .hub-ic{background:var(--edit);}
.hub-card.alt .tag{background:var(--edit-pale);color:var(--edit-ink);}
.hub-card.alt .open{background:var(--edit);}
.hub-card.alt .open:hover{background:var(--edit-ink);}
.hub-card.alt:hover{border-color:var(--edit);box-shadow:0 12px 28px rgba(185,119,9,.12);}

/* Panah antar "halaman": ke bawah dari kartu KPI utama ke kartu gaya beda,
   ke atas untuk kembali. Melayang (bounce) sebagai ajakan scroll. */
.scroll-down,.scroll-up{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  margin:34px auto 6px;color:var(--primary);
  border:1px solid var(--line-muted);background:var(--surface);
  box-shadow:0 8px 20px rgba(14,42,50,.10);
  transition:color .15s,border-color .15s;
}
.scroll-down{animation:bobDown 1.7s ease-in-out infinite;}
.scroll-up{animation:bobUp 1.7s ease-in-out infinite;}
.scroll-down:hover,.scroll-up:hover{color:var(--edit);border-color:var(--edit);}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes bobUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Pemisah berlabel di hub KPI -- pengganti panah bawah (.scroll-down) antara
   kartu KPI utama dan kelompok laporan lainnya. */
.hub-separator{
  display:flex;align-items:center;gap:14px;max-width:560px;margin:40px auto 6px;
  color:var(--ink-soft);font-family:'Space Grotesk',sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.hub-separator::before,.hub-separator::after{content:"";flex:1;height:1px;background:var(--line-muted);}

/* ---------------------------------------------------------------------
   Tool (apps/kpi-sab/ukur-debit.html): toolbar, tabel KPI.
--------------------------------------------------------------------- */
.controls{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px dashed var(--line-muted);
}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:6px;font-weight:600;}
.field select{
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;
  padding:9px 12px;border-radius:8px;border:1px solid var(--line-muted);
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.officials-row{display:flex;gap:6px;}
.officials-row input{
  width:145px;padding:9px 12px;border-radius:8px;border:1px solid var(--line-muted);
  font-family:'Inter',sans-serif;font-size:13px;
}
.officials-row input[readonly]{background:var(--bg);color:var(--ink-soft);}

.tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:10px;}
.tab{
  border:none;background:transparent;color:var(--ink-soft);font-weight:700;font-size:13px;
  font-family:'Space Grotesk',sans-serif;
  padding:8px 15px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s;
}
.tab.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 3px rgba(14,42,50,.12);}

.spacer{flex:1;}
.switch-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.switch{
  position:relative;width:36px;height:20px;border-radius:999px;background:var(--line-muted);
  cursor:pointer;flex:none;transition:background .15s;
}
.switch.on{background:var(--primary);}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;}
.switch.on::after{left:18px;}

.dl-btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
  padding:9px 16px;border-radius:8px;border:none;background:var(--ink);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.dl-btn:hover{background:var(--primary);}
.dl-btn-ghost{background:var(--primary-pale);color:var(--primary);}
.dl-btn-ghost:hover{background:#C9E5EA;}
.dl-btn:disabled{opacity:.6;cursor:not-allowed;}
.spin{
  width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.stats-row{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.stat{background:var(--primary-pale);border-radius:10px;padding:12px 16px;min-width:130px;}
.stat .k{font-size:10px;text-transform:uppercase;color:var(--primary);letter-spacing:.05em;font-weight:600;}
.stat .v{font-family:'IBM Plex Mono';font-size:19px;font-weight:600;color:var(--ink);margin-top:2px;}
.stat .v.good{color:var(--good);}
.stat .v.warn{color:var(--warn);}

.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--ink-soft);margin:0 2px 14px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.sw-edit{background:var(--edit-pale);border:1.5px solid var(--edit);}
.sw-web{background:var(--primary-pale);border:1.5px solid var(--primary);}
.sw-calc{background:var(--good-pale);border:1.5px solid var(--good);}
.sw-lock{background:var(--bg);border:1.5px solid var(--line-muted);}
.sw-empty{background:repeating-linear-gradient(45deg,var(--bg) 0 4px,var(--surface) 4px 8px);border:1.5px dashed var(--line-muted);}

.tablecard{
  background:var(--surface);border:1px solid var(--line-muted);border-radius:var(--radius);
  overflow:hidden;margin-bottom:20px;
}
.scrollx{overflow-x:auto;}
table.kpi{border-collapse:separate;border-spacing:0;width:100%;min-width:1280px;font-family:'IBM Plex Mono',monospace;}
table.kpi thead th{
  position:sticky;top:0;background:var(--bg);z-index:5;
  border-bottom:1px solid var(--line-muted);border-right:1px solid var(--line-muted);
  padding:7px 8px;font-size:10.5px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.04em;text-align:center;white-space:nowrap;
  font-family:'Inter',sans-serif;
}
table.kpi thead tr.r1 th{top:0;} table.kpi thead tr.r2 th{top:26px;} table.kpi thead tr.r3 th{top:52px;}
table.kpi th.month{font-size:12px;color:var(--primary);background:var(--primary-pale);font-family:'Space Grotesk',sans-serif;}
table.kpi tbody td{border-bottom:1px solid var(--line-muted);border-right:1px solid var(--line-muted);padding:0;vertical-align:middle;}
table.kpi td.no,table.kpi td.name{padding:6px 9px;font-size:13px;font-family:'Inter',sans-serif;}
table.kpi td.no{text-align:center;color:var(--ink-faint);width:34px;}
table.kpi td.name{white-space:nowrap;}
table.kpi td.name .sub{display:block;font-size:10.5px;color:var(--ink-faint);font-weight:500;white-space:nowrap;}
table.kpi tr.grouphead td{background:var(--bg);font-weight:700;padding:6px 9px;font-size:12.5px;font-family:'Inter',sans-serif;}
table.kpi tr.sum td{background:#F7FBFB;font-weight:700;}
table.kpi tr.avg td{background:var(--primary-pale);font-weight:700;color:var(--primary);}
.cellwrap{padding:5px 7px;display:flex;align-items:center;justify-content:flex-end;min-height:30px;}
.name-flag{
  display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;
  color:var(--primary);background:var(--primary-pale);border-radius:5px;padding:1px 5px;margin-left:6px;
  text-transform:uppercase;letter-spacing:.03em;font-family:'Inter',sans-serif;
}
input.cell{
  width:100%;text-align:right;border:none;background:transparent;color:var(--ink);
  font:inherit;padding:0;outline:none;
}
table.kpi td.awal .cellwrap{background:var(--edit-pale);border-left:2px solid var(--edit);}
table.kpi td.awal input{color:var(--edit-ink);font-weight:700;}
table.kpi td.real .cellwrap.web{background:var(--primary-pale);border-left:2px solid var(--primary);}
table.kpi td.real .cellwrap.empty{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--bg) 5px 10px);}
table.kpi td.real input{font-weight:700;}
table.kpi td.real .cellwrap.web input{color:var(--primary);pointer-events:none;}
table.kpi td.ratio .cellwrap{background:var(--bg);color:var(--ink-soft);justify-content:center;gap:5px;}
.pill{border-radius:999px;padding:2px 8px;font-weight:700;font-size:12px;}
.pill.good{background:var(--good-pale);color:var(--good);}
.pill.warn{background:var(--warn-pale);color:var(--warn);}
.pill.bad{background:var(--low-pale);color:var(--low);}
.pill.dim{background:transparent;color:var(--ink-faint);}

.tablefoot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;
  padding:10px 16px;border-top:1px solid var(--line-muted);font-size:11.5px;color:var(--ink-faint);
}

.footgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;}
@media (max-width:860px){.footgrid{grid-template-columns:1fr;}}
.card{
  background:var(--surface);border:1px solid var(--line-muted);border-radius:var(--radius);
  padding:16px 18px;
}
.card h3{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-family:'Space Grotesk',sans-serif;font-weight:700;}
.admin-edit{margin-bottom:18px;border-color:var(--edit);}
.admin-edit textarea{
  width:100%;min-height:150px;box-sizing:border-box;resize:vertical;
  border:1px solid var(--line-muted);border-radius:8px;padding:10px 12px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.5;color:var(--ink);
  background:var(--edit-pale);outline:none;
}
.admin-edit textarea:focus{border-color:var(--edit);}
.admin-edit .edit-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}
.admin-edit .edit-actions .hint{color:var(--edit-ink);}
table.k94-edit{border-collapse:collapse;width:100%;min-width:720px;}
table.k94-edit th{
  background:var(--primary-pale);color:var(--primary);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 10px;text-align:left;border:1px solid var(--line-muted);
}
table.k94-edit td{border:1px solid var(--line-muted);padding:4px;}
table.k94-edit td.no{text-align:center;color:var(--ink-soft);font-weight:600;font-family:'IBM Plex Mono',monospace;}
table.k94-edit input{
  width:100%;box-sizing:border-box;border:1px solid transparent;background:var(--edit-pale);
  border-radius:7px;padding:7px 9px;font:inherit;font-size:13px;color:var(--edit-ink);outline:none;
}
table.k94-edit input:focus{border-color:var(--edit);background:#fff;}
table.k94-edit td.keterangan input{width:100%;}
table.k94-edit .del-row{
  background:transparent;border:1px solid var(--line-muted);border-radius:7px;color:var(--low);
  width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1;
}
table.k94-edit .del-row:hover{background:var(--warn-pale);border-color:var(--warn);color:var(--warn);}
.jk-signs-2{grid-template-columns:1fr 1fr;}
.klist{display:flex;flex-direction:column;gap:7px;}
.kline{display:flex;align-items:flex-start;gap:8px;}
.kline .mark{color:var(--ink-faint);margin-top:6px;font-size:11px;}
.kline input{
  flex:1;border:1px solid transparent;background:var(--edit-pale);color:var(--edit-ink);
  border-radius:8px;padding:7px 9px;font:inherit;outline:none;font-family:'Inter',sans-serif;font-size:13.5px;
}
.kline input:focus{border-color:var(--edit);}
.kline button{
  flex:none;border:none;background:transparent;color:var(--ink-faint);cursor:pointer;font-size:15px;
  padding:4px 6px;border-radius:6px;
}
.kline button:hover{background:var(--bg);color:var(--low);}
.addline{
  align-self:flex-start;margin-top:2px;border:1px dashed var(--line-muted);background:transparent;
  color:var(--ink-soft);border-radius:8px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-weight:600;
}
.addline:hover{border-color:var(--primary);color:var(--primary);}

.signblock{display:flex;flex-direction:column;gap:14px;}
.signcol{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.signitem{display:flex;flex-direction:column;gap:5px;}
.signitem .fixed-label{font-size:11.5px;color:var(--ink);font-weight:700;font-family:'Inter',sans-serif;}
.signitem input.role-input{
  font-size:11.5px;color:var(--ink-soft);border:1px solid transparent;background:transparent;
  padding:2px 0;font:inherit;outline:none;border-bottom:1px dashed transparent;font-family:'Inter',sans-serif;font-weight:600;
}
.signitem input.role-input:focus{border-bottom-color:var(--edit);}
.signature-space{height:46px;border-bottom:1px solid var(--line-muted);margin:2px 0;}
.signitem input.name{
  border:1px solid transparent;background:var(--edit-pale);color:var(--edit-ink);font-weight:700;
  border-radius:8px;padding:7px 9px;font:inherit;outline:none;font-family:'Inter',sans-serif;
}
.signitem input.name:focus{border-color:var(--edit);}
.placeline{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-soft);}
.placeline input{
  border:1px solid transparent;background:var(--edit-pale);color:var(--edit-ink);border-radius:8px;
  padding:5px 8px;font:inherit;outline:none;font-family:'Inter',sans-serif;
}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;
  box-shadow:0 12px 30px rgba(14,42,50,.25);transition:opacity .18s,transform .18s;z-index:50;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;}

/* --- Lock banner ("data contoh" + tombol Minta Akses), sama seperti
   apps/riwayat-air-baku --- */
.lock-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#FBEBD8;border:1px solid var(--warn);border-radius:10px;
  padding:14px 18px;margin-bottom:20px;flex-wrap:wrap;
}
.lock-banner-text{font-size:13px;color:var(--ink);flex:1;min-width:220px;line-height:1.5;}
.lock-banner-text b{color:var(--low);}

.access-modal-overlay{
  position:fixed;inset:0;background:rgba(14,42,50,0.45);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.access-modal{
  background:var(--surface);border-radius:14px;padding:24px 26px;max-width:380px;width:100%;
  box-shadow:0 20px 50px -20px rgba(14,42,50,0.4);
}
.access-modal h3{font-family:'Space Grotesk',sans-serif;font-size:17px;margin:0 0 6px;color:var(--primary);}
.access-modal .hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 16px;}
.access-modal label{display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:12px 0 5px;}
.access-modal input, .access-modal textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-muted);border-radius:8px;
  font-family:inherit;font-size:13.5px;background:var(--bg);color:var(--ink);
}
.access-modal textarea{resize:vertical;min-height:56px;}
.access-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.btn-ghost{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
  padding:9px 16px;border-radius:8px;border:none;background:var(--primary-pale);color:var(--primary);cursor:pointer;
}
.btn-ghost:hover{background:var(--line-muted);}
.btn-whatsapp{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:10px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
  padding:10px 16px;border-radius:8px;border:none;background:#25D366;color:#fff;cursor:pointer;
}
.btn-whatsapp:hover{background:#1DA851;}
.access-modal .status-msg{margin-top:10px;font-size:12.5px;min-height:16px;}
.access-modal .status-msg.error{color:var(--low);}
.access-modal .status-msg.ok{color:var(--good);}
.access-modal .status-msg.pending{color:var(--warn);}

/* --- Panel "Pengaturan Anggaran" (18.3b Pengambilan Air Baku): 4 baris
   (31/30/29/28 hari) x 2 kolom nilai (AP/ATD), admin-editable. Sel ANGG di
   tabel utama pakai warna sama seperti .awal (nilai yang diatur admin,
   bukan realisasi asli). --- */
table.kpi td.angg .cellwrap{background:var(--edit-pale);border-left:2px solid var(--edit);}
table.kpi td.angg input{color:var(--edit-ink);font-weight:700;}

.target-card{margin-bottom:16px;}
.target-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px 14px;align-items:center;}
.target-grid .th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;}
.target-grid .dc{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--ink-soft);}
.target-grid input{
  width:100%;border:1px solid transparent;background:var(--edit-pale);color:var(--edit-ink);font-weight:700;
  border-radius:8px;padding:7px 9px;font:inherit;outline:none;font-family:'IBM Plex Mono',monospace;text-align:right;
}
.target-grid input:focus{border-color:var(--edit);}
.target-hint{font-size:12px;color:var(--ink-faint);margin:8px 2px 0;line-height:1.5;}

.dl-btn-admin{background:var(--ink-faint);opacity:.6;cursor:not-allowed;}
.dl-btn-admin.enabled{background:var(--primary);opacity:1;cursor:pointer;}
.dl-btn-admin.enabled:hover{background:var(--ink);}

/* --- 18.4 Laporan Kualitas Air Baku: tabel HARIAN per lokasi (Manggar &
   Teritip), status pintu elevasi 3/5/7 diklik langsung di baris tanggalnya. --- */
.legend .sw-on{background:var(--good);border:1.5px solid var(--good);}
.legend .sw-off{background:var(--bg);border:1.5px solid var(--ink-faint);}

.elev-hint{
  background:var(--primary-pale);border:1px solid #BFD8E0;border-radius:10px;
  padding:11px 15px;margin-bottom:16px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;
}
.elev-hint b{color:var(--primary);}

.loc-card{margin-bottom:20px;}
.loc-head{
  padding:11px 16px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13.5px;
  color:var(--primary);background:var(--primary-pale);border-bottom:1px solid var(--line-muted);
}
table.kual-table{min-width:560px;}
table.kual-table thead tr.r1 th{top:0;}
table.kual-table thead tr.r2 th{top:auto;}
table.kual-table thead th .unit{font-weight:500;font-size:9px;text-transform:none;color:var(--ink-faint);}
table.kual-table td.no{text-align:center;color:var(--ink-soft);font-weight:600;font-family:'IBM Plex Mono',monospace;}
table.kual-table .cellnum{font-family:'IBM Plex Mono',monospace;font-size:13px;}
table.kual-table td.real .cellwrap{justify-content:center;}
table.kual-table td.real .cellwrap.empty{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--bg) 5px 10px);}

td.elev-cell{text-align:center;padding:4px 6px;}
.elev-btn{
  min-width:44px;border:none;border-radius:7px;padding:4px 10px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.03em;
  transition:filter .12s,transform .05s;
}
.elev-btn:hover{filter:brightness(1.06);}
.elev-btn:active{transform:scale(.96);}
.elev-btn.on{background:var(--good);color:#fff;}
.elev-btn.off{background:#E7EDEF;color:var(--ink-faint);}
.elev-tag{
  display:inline-block;min-width:44px;border-radius:7px;padding:4px 10px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.03em;
}
.elev-tag.on{background:var(--good-pale);color:var(--good);}
.elev-tag.off{background:var(--bg);color:var(--ink-faint);}

/* --- 19.2 Evaluasi Hasil Monitoring: tabel 4 blok jadwal (NO/URAIAN/
   RENCANA/REALISASI/KETERANGAN), KETERANGAN dipecah per berita acara. --- */
table.mon-table{min-width:900px;}
table.mon-table thead th{min-width:0;white-space:normal;}
table.mon-table td.name{
  white-space:normal;text-align:center;font-weight:700;
  font-size:13px;line-height:1.4;vertical-align:middle;padding:8px 9px;
}
table.mon-table td.tgl{
  text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  color:var(--ink-soft);font-weight:600;padding:6px 8px;vertical-align:middle;
}
table.mon-table td.ke{
  padding:9px 12px;font-size:13px;line-height:1.5;color:var(--ink);
  font-family:'Inter',sans-serif;vertical-align:middle;background:var(--surface);
}
table.mon-table td.ke-ba{
  padding:5px 12px;font-size:12px;color:var(--ink-faint);
  font-family:'IBM Plex Mono',monospace;vertical-align:middle;border-top:1px dashed var(--line-muted);
}
table.mon-table td.ke-empty{
  text-align:center;color:var(--ink-faint);
  background:repeating-linear-gradient(45deg,transparent 0 5px,var(--bg) 5px 10px);
}
table.mon-table tr.mon-block td.no{font-size:14px;color:var(--ink);}

/* --- 18.1a Pengukuran Level Sumur: tabel ANGG/REAL/±/% per bulan (angka
   jumlah sumur) -- pakai kelas .kpi yang sama dengan 18.3b. --- */
table.kpi td .cellnum{font-family:'IBM Plex Mono',monospace;font-size:13px;}

/* --- 18.1b Pengukuran Statis-Dinamis: tabel BULAN/SWL/DWL per bulan
   (SWL = Statis, DWL = Dinamis, meter). --- */
table.sd-table{min-width:1150px;}
table.sd-table td.name{white-space:normal;text-align:left;font-size:13px;padding:6px 9px;vertical-align:middle;font-weight:600;}
table.sd-table td.bulan{text-align:center;font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;padding:4px 6px;white-space:nowrap;}
table.sd-table td.sdv{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;padding:5px 8px;}
table.sd-table td.sdv.web{background:var(--primary-pale);color:var(--primary);font-weight:700;}
table.sd-table td.sdv.edit{background:var(--edit-pale);color:var(--edit-ink);font-weight:700;}
table.sd-table td.empty{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--bg) 5px 10px);}
table.sd-table tr.grouphead td{white-space:nowrap;}

/* --- 18.5 Monitoring Kondisi Peralatan: ANGG & REAL diisi MANUAL (input
   kuning, bisa diedit admin), ± & % otomatis. --- */
table.peralatan-table{min-width:900px;}
table.peralatan-table td.angg .cellwrap,
table.peralatan-table td.real .cellwrap{background:var(--edit-pale);border-left:2px solid var(--edit);justify-content:center;}
table.peralatan-table input.inpval{color:var(--edit-ink);font-weight:700;text-align:center;width:100%;}
table.peralatan-table td.name{white-space:nowrap;font-size:12.5px;font-weight:600;}

/* --- 18.6 Jadwal PM Terkendali: tanggal Rencana & Realisasi per bulan. --- */
table.jadwal-table{min-width:1000px;}
table.jadwal-table td.name{white-space:normal;font-size:12.5px;font-weight:600;padding:6px 9px;vertical-align:middle;}
table.jadwal-table td.rr{text-align:center;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;padding:4px 6px;vertical-align:middle;}
table.jadwal-table td.rr.renc{color:var(--primary);}
table.jadwal-table td.rr.real{color:var(--edit-ink);}
table.jadwal-table td.dt{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;padding:6px 8px;white-space:nowrap;vertical-align:middle;}
table.jadwal-table td.dt.dash{color:var(--ink-faint);}

/* --- Activity Plan SAB: rekap KPI tahunan, progres per bulan Jan-Jun. --- */
table.act-table{min-width:1700px;}
table.act-table td.name{white-space:normal;font-size:12.5px;font-weight:600;padding:5px 9px;vertical-align:middle;}
table.act-table tr.act-group td{background:var(--primary-pale);font-weight:700;}
table.act-table td.meta{padding:2px 4px;vertical-align:middle;}
table.act-table td.meta input.cell{text-align:left;font-family:'Inter',sans-serif;font-size:12px;padding:2px 4px;background:var(--bg);border-radius:4px;}
table.act-table td.actval{padding:2px 4px;text-align:center;vertical-align:middle;}
table.act-table td.actval input.cell{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:12px;background:var(--edit-pale);border-radius:4px;color:var(--edit-ink);font-weight:700;}
table.act-table td.actval.auto{background:var(--primary-pale);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;}
table.act-table td.actval.empty{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--bg) 5px 10px);color:var(--ink-faint);}

/* --- Jadwal Kegiatan: baris = kegiatan, kolom = hari kerja (tanggal + hari). --- */
table.jk-table{min-width:1120px;}
table.jk-table td.name{white-space:normal;font-size:12.5px;font-weight:600;padding:6px 9px;vertical-align:middle;}
table.jk-table th.jk-day{
  min-width:34px;font-size:13px;font-family:'IBM Plex Mono',monospace;line-height:1.35;
  padding:5px 2px;white-space:nowrap;color:var(--primary);background:var(--bg);
}
table.jk-table th.jk-day b{display:block;font-size:10px;color:var(--ink-faint);font-weight:600;letter-spacing:.04em;}
table.jk-table td.jk-c{text-align:center;padding:5px 2px;vertical-align:middle;min-width:26px;}
table.jk-table td.jk-ke{padding:2px 6px;vertical-align:middle;min-width:190px;}
table.jk-table td.jk-ke input.cell{text-align:left;font-family:'Inter',sans-serif;font-size:12px;padding:3px 5px;background:var(--bg);border-radius:4px;color:var(--ink);}
table.jk-table td.jk-ke input.cell:focus{background:var(--edit-pale);}

/* Penandatangan Jadwal Kegiatan: 3 kolom (Mengetahui / Diketahui / Dibuat) + kode dokumen. */
.jk-signs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
@media (max-width:760px){.jk-signs{grid-template-columns:1fr;}}
.jk-footer-row{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;color:var(--ink-soft);}
.jk-footer-row label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;}
.jk-footer-row input{
  flex:1;max-width:280px;border:1px solid var(--line-muted);border-radius:8px;
  padding:8px 11px;font:inherit;outline:none;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink);
}
.jk-footer-row input:focus{border-color:var(--primary);}

/* Panel "Daftar Sumur & Status Aktif" -- cuma sumur AKTIF yang jadi ANGG. */
.well-card{margin-bottom:20px;}
.well-hint{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 14px;}
.well-group{margin-bottom:12px;}
.well-group:last-child{margin-bottom:0;}
.well-ipa{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  color:var(--primary);margin-bottom:7px;display:flex;align-items:center;gap:8px;
}
.well-count{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  background:var(--primary-pale);color:var(--primary);border-radius:999px;padding:2px 8px;
}
.well-chips{display:flex;flex-wrap:wrap;gap:7px;}
.well-chip{
  border:1.5px solid var(--line-muted);background:var(--surface);color:var(--ink-soft);
  border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;transition:all .13s;
}
.well-chip:hover{border-color:var(--primary-light);}
.well-chip.on{background:var(--good);border-color:var(--good);color:#fff;}
.well-chip.off{background:var(--bg);border-color:var(--line-muted);color:var(--ink-faint);}
.well-chip:disabled{cursor:default;opacity:1;}
.well-empty{font-size:12px;color:var(--ink-faint);}

/* ===== Navbar bersama PTMB (disalin dari apps/riwayat-air-baku/style.css) ===== */
.ptmb-navbar{
  position:sticky; top:0; z-index:999;
  background:rgba(244,248,250,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #DCE9EF;
}
.ptmb-nav-inner{
  max-width:1100px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:20px;
}
.ptmb-brand{ display:flex; align-items:center; gap:10px; font-weight:600; color:#0A2537; text-decoration:none; }
.ptmb-brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(160deg,#0E8E96 0%,#0A2537 100%);
  display:grid; place-items:center; color:#fff;
  font-size:13px; font-weight:700;
}
.ptmb-brand small{ display:block; font-size:11px; font-weight:400; color:#3C5A6E; line-height:1.2; }
.ptmb-nav-links{ display:flex; gap:4px; margin-left:auto; }
.ptmb-nav-links a{
  padding:7px 12px; border-radius:8px; font-size:14px; color:#3C5A6E; text-decoration:none;
  transition:background .15s, color .15s;
}
.ptmb-nav-links a:hover, .ptmb-nav-links a.active{ background:#E7F1F4; color:#0A2537; }
.ptmb-btn-login{
  padding:8px 18px; border-radius:9px; font-size:14px; font-weight:600;
  background:#0A2537; color:#fff; text-decoration:none; transition:background .15s;
}
.ptmb-btn-login:hover{ background:#0A6A72; }
.ptmb-nav-toggle{ display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;position:relative; }
.ptmb-nav-toggle span{ width:22px;height:2px;background:#0A2537;border-radius:2px;transition:transform .2s ease,opacity .2s ease; }
.ptmb-nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ptmb-nav-toggle.open span:nth-child(2){ opacity:0; }
.ptmb-nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.ptmb-nav-ic{ display:none;flex-shrink:0; }
.ptmb-nav-backdrop{ display:none;position:fixed;inset:0;background:rgba(10,37,55,.35);z-index:40; }
@media(max-width:720px){
  .ptmb-nav-toggle{ display:flex;margin-left:auto; }
  .ptmb-nav-backdrop.open{ display:block; }
  .ptmb-nav-links{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:#FFFFFF;border-bottom:1px solid #DCE9EF;
    padding:10px 20px 14px;box-shadow:0 12px 24px -12px rgba(14,42,50,.15);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .ptmb-nav-links.open{ opacity:1;visibility:visible;transform:translateY(0); }
  .ptmb-nav-links a{ display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px; }
  .ptmb-nav-ic{ display:inline-flex; }
}
.nav-right{ display:flex; align-items:center; gap:10px; }
.admin-wrap{ position:relative; }
.admin-chip{
  display:flex; align-items:center; gap:8px;
  padding:6px 12px 6px 6px; border-radius:99px;
  border:1px solid #DCE9EF; background:#FFFFFF;
  font-size:13px; font-weight:600; color:#0A2537;
  transition:border-color .15s, background .15s;
}
.admin-chip:hover{ border-color:#BFD8E0; background:#F6FAFB; }
.admin-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-size:11.5px; font-weight:700;
  background:linear-gradient(150deg,#0E8E96 0%,#0A2537 100%);
}
.admin-chip .role{ font-size:10.5px; font-weight:500; color:#3C5A6E; display:block; margin-top:-1px; }
.admin-chip .name-block{ text-align:left; line-height:1.15; }
.admin-caret{
  width:7px; height:7px; border-right:1.6px solid #3C5A6E; border-bottom:1.6px solid #3C5A6E;
  transform:rotate(45deg); transition:transform .15s; margin-left:2px;
}
.admin-wrap.open .admin-caret{ transform:rotate(-135deg); margin-top:3px; }
.admin-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:#FFFFFF; border:1px solid #DCE9EF; border-radius:12px;
  padding:6px; box-shadow:0 18px 36px rgba(10,37,55,.14);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:60;
}
.admin-wrap.open .admin-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.admin-menu a, .admin-menu .logout{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:600;
  transition:background .12s; text-align:left;
}
.admin-menu a{ color:#0A2537; text-decoration:none; }
.admin-menu a:hover{ background:#F4F8FA; }
.admin-menu .logout{ color:#B97709; }
.admin-menu .logout:hover{ background:#FBF1DE; }
@media(max-width:820px){ .admin-chip .name-block{ display:none; } }

/* --- 9.7 Laporan Kondisi Air Sumur --- */
#ipaTabs{ margin-bottom:14px; }
.ipa-panel .tablecard{ margin-bottom:0; }
.k97-tanggal{ color:var(--primary); font-weight:700; }
.k97-meta-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--line-muted);
}
.k97-meta-grid .field{ display:flex; flex-direction:column; gap:4px; }
.k97-meta-grid label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; }
.k97-meta-grid input{
  border:1px solid var(--line-muted); border-radius:8px; padding:7px 9px;
  font:inherit; font-size:13px; background:var(--surface); color:var(--ink); width:100%; box-sizing:border-box;
}
.k97-meta-grid input[readonly]{ background:var(--bg); color:var(--ink-soft); }

table.k97-edit{ border-collapse:collapse; width:100%; min-width:1080px; }
table.k97-edit th{
  background:var(--primary-pale); color:var(--primary); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.04em; padding:8px 10px; text-align:center; border:1px solid var(--line-muted);
  white-space:nowrap;
}
table.k97-edit td{ border:1px solid var(--line-muted); padding:4px; }
table.k97-edit td.web{ text-align:center; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--primary); background:var(--primary-pale); white-space:nowrap; }
table.k97-edit td.web.lvl{ font-weight:600; }
table.k97-edit td.web.real{ font-weight:700; }
table.k97-edit input{
  width:100%; box-sizing:border-box; border:1px solid transparent; background:var(--edit-pale);
  border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; color:var(--edit-ink); outline:none;
}
table.k97-edit input:focus{ border-color:var(--edit); background:#fff; }
table.k97-edit input[disabled]{ background:var(--bg); color:var(--ink-soft); }
table.k97-edit td.keterangan input{ width:100%; text-align:center; }
table.k97-edit .del-row{
  background:transparent; border:1px solid var(--line-muted); border-radius:7px; color:var(--low);
  width:30px; height:30px; cursor:pointer; font-size:14px; line-height:1;
}
table.k97-edit .del-row:hover{ background:var(--warn-pale); border-color:var(--warn); color:var(--warn); }

.k97-catatan{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.k97-catatan label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; }
.k97-catatan textarea{
  width:100%; box-sizing:border-box; border:1px solid var(--line-muted); border-radius:8px;
  padding:8px 10px; font:inherit; font-size:13px; color:var(--ink); background:var(--surface); resize:vertical;
}
.k97-catatan textarea:focus{ border-color:var(--edit); outline:none; }

.k97-sign-card{ margin-top:14px; }
@media(max-width:860px){ .k97-meta-grid{ grid-template-columns:1fr 1fr; } }

/* --- 9.5 Laporan Monitoring Pipa Transmisi --- */
table.k95-edit{border-collapse:collapse;width:100%;min-width:860px;}
table.k95-edit th{
  background:var(--primary-pale);color:var(--primary);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 10px;text-align:center;border:1px solid var(--line-muted);white-space:nowrap;
}
table.k95-edit td{border:1px solid var(--line-muted);padding:4px;vertical-align:middle;}
table.k95-edit td.no{text-align:center;color:var(--ink-soft);font-weight:600;font-family:'IBM Plex Mono',monospace;}
table.k95-edit td.tgl{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--primary);white-space:nowrap;}
table.k95-edit td.tgl .cellwrap{justify-content:center;background:var(--primary-pale);border-radius:7px;}
table.k95-edit input{
  width:100%;box-sizing:border-box;border:1px solid transparent;background:var(--edit-pale);
  border-radius:7px;padding:7px 9px;font:inherit;font-size:13px;color:var(--edit-ink);outline:none;text-align:center;
}
table.k95-edit input:focus{border-color:var(--edit);background:#fff;}
table.k95-edit input[disabled]{background:var(--bg);color:var(--ink-soft);}
table.k95-edit td.ket textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line-muted);border-radius:7px;
  padding:7px 9px;font:inherit;font-size:13px;color:var(--ink);resize:vertical;background:var(--surface);
}
table.k95-edit td.ket textarea:focus{border-color:var(--edit);outline:none;}
.signitem textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--line-muted);border-radius:8px;
  padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);background:var(--surface);resize:vertical;
}
.signitem textarea:focus{border-color:var(--edit);outline:none;}