/*
 * GITA SIKKA / AIR MINUM — PROGRESSIVE DISCLOSURE v3
 * Mempertahankan bahasa visual Gita Sikka v2 (biru/kuning/putih).
 * Lapisan presentasi; tidak mengubah sistem PBG/SLF atau struktur tabel.
 */
:root{--water-blue:#0b64b4;--water-navy:#0b3e76;--water-yellow:#f6c83c;--water-soft:#f4f8fd;--water-outline:#e3ebf4}
.panel-heading-v3{padding:17px 20px 12px}
.panel-heading-v3::after{display:none}
.panel-heading-v3 h2{font-size:16px;letter-spacing:-.35px;margin-top:4px}
.panel-heading-v3 .pill-outline{font-size:9px;padding:6px 10px}
.village-hero-v3{min-height:99px;margin:0 16px 12px;padding:16px 17px}
.village-hero-v3 .village-mini-icon{width:40px;height:40px;border-radius:12px}
.village-hero-v3 .village-ident h3{font-size:25px}
.village-hero-v3 .village-ident p{font-size:12px;margin-top:3px}
.village-hero-v3 .village-overline{font-size:9px}
.kpi-grid-v3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0;padding:0 16px}
.kpi-grid-v3 .kpi{min-height:92px;border:1px solid var(--water-outline);background:#fff;border-radius:12px;padding:13px 15px;box-shadow:none}
.kpi-grid-v3 .kpi strong{display:block;font-size:clamp(21px,1.7vw,27px);line-height:1.22;letter-spacing:-.65px;margin:5px 0 0;color:#0e3970}
.kpi-grid-v3 .kpi small{display:block;margin-top:2px;font:500 10px Arial,sans-serif;color:#7890ab}
.kpi-caption{display:block;font:600 11px/1.35 Arial,sans-serif;color:#5a7592;min-height:0}
.village-note{display:flex;gap:9px;align-items:flex-start;margin:10px 17px 2px;padding:10px 11px;border:1px solid #dfebf8;border-radius:9px;background:#f5f9ff;color:#4c6887;font:11px/1.6 Arial,sans-serif}
.village-note[hidden]{display:none}
.village-note svg{height:16px;width:16px;flex:none;margin-top:1px;color:#357db9}
.explore-heading{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:21px 17px 11px}
.explore-heading h4{font-size:15px;color:#113b70;margin:0;letter-spacing:-.25px}
.explore-heading p{margin:0;color:#8192a6;font:11px Arial,sans-serif}
.explore-list{margin:0 16px;display:grid;gap:9px}
.explore-tile{width:100%;padding:14px 14px;display:flex;align-items:center;gap:12px;min-height:70px;border:1px solid var(--water-outline);border-radius:12px;background:white;text-align:left;box-shadow:0 3px 12px rgba(12,52,91,.025);color:#153457;transition:border-color .16s,background .16s,transform .16s}
.explore-tile:hover,.explore-tile:focus-visible{border-color:#accdea;background:#f5faff;transform:translateY(-1px)}
.explore-icon{width:41px;height:41px;display:grid;place-items:center;flex:none;border-radius:11px;background:#e9f3ff;color:#0c65b9;font:700 23px Arial,sans-serif}
.explore-icon svg{width:21px;height:21px;stroke-width:1.8}
.explore-copy{display:flex;flex-direction:column;flex:1;min-width:0;gap:4px}
.explore-copy strong{font-size:13px;color:#103f74}
.explore-copy small{font:11px/1.5 Arial,sans-serif;color:#7489a2;overflow-wrap:anywhere}
.explore-arrow{margin-left:5px;font:26px Arial,sans-serif;color:#8aa1ba;line-height:1}
.overview-date{display:flex;align-items:center;gap:7px;margin:16px 18px 20px;color:#7487a0;font:11px/1.4 Arial,sans-serif}
.overview-date>span:first-child{font-size:16px}
.mobile-map-link{display:none}
/* Rincian kategori: judul dan ekspor hanya muncul setelah kategori dipilih. */
.section-panel{padding:6px 16px 22px}
.section-panel[hidden],#villageOverview[hidden],#exportMenu[hidden]{display:none!important}
.section-topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;position:relative;z-index:20}
.back-overview{border:0;background:none;padding:8px 1px;color:#1162b0;font:700 12px Arial,sans-serif;white-space:nowrap}
.back-overview:hover{text-decoration:underline}
.section-title{font-size:19px;color:var(--water-navy);letter-spacing:-.5px;margin:0 0 13px}
.section-body{padding:0!important}
.export-wrap{position:relative}
.export-trigger{display:inline-flex;align-items:center;gap:7px;border:1px solid #cce1d7;border-radius:9px;color:#207d59;background:#f6fcf8;min-height:37px;padding:7px 11px;font:700 11px Arial,sans-serif;white-space:nowrap}
.export-trigger:hover,.export-trigger[aria-expanded="true"]{background:#e9f8f0;border-color:#8bcfac}
.export-trigger span:first-child{font-size:16px;line-height:1}
.export-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:100;min-width:295px;max-width:min(320px,calc(100vw - 48px));padding:15px;background:#fff;border:1px solid #dce7f1;box-shadow:0 15px 40px rgba(8,42,78,.16);border-radius:12px;color:#143c66}
.export-menu-heading{font:800 12px Arial,sans-serif;margin-bottom:10px}
.export-menu label{display:flex;align-items:flex-start;gap:9px;padding:9px 3px;cursor:pointer;font:700 12px Arial,sans-serif}
.export-menu input{margin-top:2px;accent-color:#0e67bf}
.export-menu label span{display:flex;flex-direction:column;gap:4px;min-width:0}
.export-menu label small{font:11px/1.35 Arial,sans-serif;color:#7589a0}
.export-confirm{display:block;width:100%;padding:11px;background:#0870bd;border:0;border-radius:8px;color:#fff;font:700 12px Arial,sans-serif;margin-top:8px}
.export-confirm:hover{background:#095595}
.export-confirm:disabled{opacity:.65;cursor:wait}
.export-status{font:11px/1.45 Arial,sans-serif;color:#55718e;min-height:0;margin:8px 0 0}
.export-status:empty{display:none}
.section-panel .content-card{box-shadow:none;padding:16px;margin-bottom:11px}
.section-panel .content-card h4{font-size:14px;margin-bottom:13px}
.section-panel .content-card .card-note{margin-top:12px}
.section-panel .data-row strong{max-width:60%;text-align:right}
/* Infrastructure: overview counters always include units. */
.infrastructure-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.infrastructure-stat{border-radius:11px;background:#f5f9fe;border:1px solid #e4edf6;padding:12px 10px;min-width:0}
.infrastructure-stat>span{display:block;color:#5f7a96;font:11px/1.35 Arial,sans-serif;min-height:30px}
.infrastructure-stat>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin-top:6px}
.infrastructure-stat strong{font-size:clamp(19px,1.5vw,25px);color:#0b3b72}
.infrastructure-stat small{color:#778ca4;font:11px Arial,sans-serif}
.asset-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;font:11px/1.4 Arial,sans-serif;color:#70869e}
.asset-summary strong{color:#0b457d;font-size:11px}
.progressive-details{border-top:1px solid #edf1f6;margin-top:8px;padding-top:7px}
.progressive-details>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:9px 3px;color:#135e9d;font:700 12px Arial,sans-serif;list-style:none}
.progressive-details>summary::-webkit-details-marker{display:none}
.progressive-details>summary span{font-size:17px;transition:transform .15s}
.progressive-details[open]>summary span{transform:rotate(180deg)}
.details-list{padding-top:8px}
.asset-row{margin-bottom:7px}
.pipe-switch{display:flex;gap:4px;padding:4px;border:1px solid #e5edf6;border-radius:10px;background:#f2f6fb;margin-bottom:13px}
.pipe-switch button{flex:1;min-width:0;border:0;border-radius:7px;padding:10px 4px;background:none;color:#66809a;font:700 11px Arial,sans-serif;min-height:39px}
.pipe-switch button:hover{background:#e2eefb}
.pipe-switch button.is-active{background:#fff;color:#095fae;box-shadow:0 2px 8px rgba(14,64,116,.1)}
.pipe-overview{background:#f6f9fe;padding:14px;border-radius:11px;border:1px solid #e9eff6}
.pipe-overview>span{font:11px Arial,sans-serif;color:#657d95}
.pipe-overview>strong{display:block;font-size:26px;color:#0e3c74;margin:5px 0 9px}
.pipe-overview .piping-track{margin:10px 0 9px;height:9px}
.pipe-overview .piping-legend{justify-content:space-between;flex-wrap:wrap;line-height:1.5}
.pipe-material{display:block;color:#7b8da2;font:10px Arial,sans-serif;margin-top:3px}
/* Search results clearly identify their result type. */
.search-results button{display:flex;align-items:center;justify-content:space-between;gap:8px}
.search-results button span{flex:1;text-align:left}
.search-results button small{flex:none;border-radius:6px;padding:4px 6px;background:#eaf2fb;color:#326997;font-size:10px}
/* Accessibility */
.section-panel button:focus-visible,.explore-tile:focus-visible,.export-wrap button:focus-visible,.pipe-switch button:focus-visible{outline:3px solid #f5c33b;outline-offset:3px}
/* Tablet: map and panel remain useful even before full width stacking. */
@media(max-width:1400px){
  .workspace{grid-template-columns:minmax(0,1fr) minmax(425px,.95fr)}
  .kpi-grid-v3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .village-hero-v3 .village-ident h3{font-size:23px}
}
@media(max-width:930px){
  .workspace{display:flex;flex-direction:column;height:auto;gap:15px}
  /* Public-facing mobile: desa & pencarian data are readable before opening the large map. */
  .info-panel{order:0;max-height:none;overflow:visible;min-height:0}
  .map-card{order:1;height:420px;min-height:420px}
  .mobile-map-link{display:flex;align-items:center;justify-content:space-between;margin:0 16px 16px;padding:12px 14px;border:1px solid #cbdff3;border-radius:10px;background:#f5faff;color:#0d5d9d;font:700 12px Arial,sans-serif}
  .mobile-map-link span{font-size:16px}
  .section-panel{scroll-margin-top:105px}
  .village-hero-v3{margin-top:8px}
  .panel-heading-v3{padding-top:16px}
  .export-menu{z-index:1100}
}
@media(max-width:620px){
  .site-header{height:68px}
  .main-shell{padding:15px 10px 25px}
  .page-heading{margin-bottom:11px}
  .announcement{margin-bottom:11px;font-size:10.5px}
  .info-panel{border-radius:14px}
  .panel-heading-v3{padding:15px 13px 11px}
  .panel-heading-v3 h2{font-size:16px}
  .village-hero-v3{margin:4px 10px 11px;padding:13px 12px;min-height:86px}
  .village-hero-v3 .village-mini-icon{width:36px;height:36px}
  .village-hero-v3 .village-ident h3{font-size:22px}
  .village-hero-v3 .village-ident p{font-size:11px}
  .kpi-grid-v3{padding:0 10px;gap:8px}
  .kpi-grid-v3 .kpi{min-height:82px;padding:11px 10px}
  .kpi-grid-v3 .kpi strong{font-size:23px}
  .kpi-caption{font-size:10.5px}
  .village-note{margin:10px 10px 0;padding:10px;font-size:10.5px}
  .explore-heading{margin:20px 11px 10px}
  .explore-heading h4{font-size:14px}
  .explore-heading p{font-size:10.5px}
  .explore-list{margin:0 10px;gap:8px}
  .explore-tile{padding:11px;min-height:67px;gap:10px}
  .explore-icon{height:38px;width:38px;flex:none}
  .explore-copy strong{font-size:12.5px}
  .explore-copy small{font-size:10.5px}
  .overview-date{margin:15px 12px;font-size:10.5px}
  .mobile-map-link{margin-inline:10px}
  .section-panel{padding:3px 10px 22px}
  .section-topbar{margin-bottom:11px}
  .section-title{font-size:17px}
  .section-panel .content-card{padding:13px}
  .infrastructure-stat{padding:9px 8px}
  .infrastructure-stat>span{font-size:10px;min-height:29px}
  .infrastructure-stat strong{font-size:21px}
  .infrastructure-stat small{font-size:10px}
  .pipe-switch button{font-size:11px;padding:10px 3px}
  .map-card{height:405px;min-height:405px}
  .map-top-label{max-width:calc(100% - 26px)}
  .map-footer{gap:6px}
  .map-header{top:10px}
  .map-header .map-header-actions{flex-wrap:nowrap}
  .search-wrap input{font-size:12px}
  .search-results{max-height:245px}
  .info-panel .panel-bottom{padding:12px}
}
@media(max-width:385px){
  .explore-copy small{font-size:10px}
  .export-trigger{padding:7px 8px;font-size:10px}
  .back-overview{font-size:11px}
  .infrastructure-stats{gap:5px}
  .infrastructure-stat{padding:8px 6px}
  .infrastructure-stat strong{font-size:20px}
  .status-badge{max-width:90px}
}
@media(prefers-reduced-motion:reduce){.explore-tile,.progressive-details summary span{transition:none}}

/* Access to shared Gita Sikka Admin */
.site-header .water-admin-link{display:inline-flex;align-items:center;border:1px solid #c5d9ed;border-radius:9px;padding:8px 11px;color:#0b5a9d;font-size:12px;white-space:nowrap}.site-header .water-admin-link:hover{background:#edf6ff}
@media(max-width:700px){.site-header .water-admin-link{padding:7px 9px;font-size:11px}}
/* Keep the Admin entrance usable on small phones without extending the header. */
@media(max-width:620px){
  .site-nav a[href="peta.html"]{display:none}
  .site-header .water-admin-link{height:37px;min-height:37px;padding:0 9px;font-size:10px;border-radius:9px}
  .site-header .site-nav a.current{padding-inline:5px;font-size:10px}
  .site-header .site-nav{gap:3px;flex:0 0 auto}
  .site-header .brand{min-width:0}
}