/*
  GITA SIKKA / AIR MINUM — UI POLISH v2.0 · 23 Oktober 2026
  Layer visual tambahan; air-minum.js dan skema Supabase tetap kompatibel.
  Satu sumber warna untuk satu identitas: putih, biru PUPR, kuning Gita.
*/
:root {
  --gs-blue: #0754a5;
  --gs-deep: #083b75;
  --gs-darker: #082849;
  --gs-yellow: #ffcf35;
  --gs-line: #e6edf5;
  --gs-paper: #ffffff;
  --gs-muted: #657891;
  --gs-shadow: 0 14px 40px rgba(15, 53, 98, .075);
}
html { scroll-padding-top: 96px; }
body { background: #f6f9fd; color: #153457; }
body::before {
  content: ""; position:absolute; left:0; right:0; top:110px; height:235px;
  pointer-events:none; z-index:-1;
  background: radial-gradient(ellipse 58% 82% at 78% 28%, #deecff 0, transparent 78%);
}
button, input { -webkit-tap-highlight-color: transparent; }
.gov-strip {
  height:30px; padding-inline:clamp(20px,3.8vw,76px);
  color:#e7f2fd; background: #07386d; font-size:10px; letter-spacing:.7px;
  border-bottom: 2px solid rgba(255,209,56,.65);
}
.gov-strip span:first-child::before { content:""; display:inline-block; margin-right:9px; width:6px; height:6px; background:#ffd33d; border-radius:50%; vertical-align:1px; }
.site-header {
  height:78px; padding-inline:clamp(20px,3.8vw,76px); gap:26px;
  background: rgba(255,255,255,.97); border-bottom:1px solid #e5edf6;
  box-shadow:0 4px 24px rgba(9,44,84,.035);
}
.brand { gap:11px; }
.brand>img { width:45px; height:45px; filter:drop-shadow(0 2px 2px rgba(16,60,107,.07)); }
.brand strong { font-size:25px; letter-spacing:-1px; }
.brand small { letter-spacing:1.35px; font-size:9px; font-weight:700; margin-top:5px; }
.site-nav { gap:0; }
.site-nav a { font-size:12px; padding:0 20px; transition: color .18s; }
.site-nav a.current::after { background:var(--gs-yellow); height:4px; left:14px;right:14px; }
.agency-logos { gap:11px; padding-left:16px; border-left:1px solid #e8eef6; }
.agency-logos img { width:34px;height:37px; }
.main-shell { max-width:1920px; margin-inline:auto; padding:22px clamp(16px,2.45vw,50px) 22px; }
.page-heading { min-height:82px; margin-bottom:14px; }
.page-title-box { gap:15px; }
.module-emblem { width:56px;height:56px;border-radius:17px;box-shadow:0 12px 25px rgba(4,92,174,.14); }
.module-emblem svg { width:25px;height:25px; }
.eyebrow { color:#477bac; font-size:9px; letter-spacing:1.75px; }
.page-heading h1 { font-size:clamp(24px,1.83vw,32px); letter-spacing:-1px; margin:6px 0 5px; }
.page-heading h1 span { color:#326caa; }
.page-heading p { font-family:Arial,sans-serif; color:#687d95; font-size:13px; }
.page-breadcrumb {font-family:Arial,sans-serif; font-size:11px;align-self:center;}
.page-breadcrumb span {color:#b2c0d0;}
.announcement {
  background:#fffbef;border:1px solid #f1e3ba;border-radius:12px;
  color:#6b5b32;padding:10px 14px; margin-bottom:14px; font-size:11.5px;
}
.announcement-icon {background:#ffdc64; color:#594408; width:23px;height:23px;font-size:12px;}
.announcement strong {color:#62491b;}
.announcement-pill {background:#fff; border-color:#f3d47f; color:#866210; border-radius:999px;}
.workspace { grid-template-columns:minmax(0,1.28fr) minmax(465px,.94fr); gap:16px; height: min(815px,calc(100svh - 257px)); min-height:640px; }
.map-card, .info-panel { border:1px solid #e2eaf4;border-radius:18px; box-shadow: var(--gs-shadow); }
.map-card { position:relative; isolation:isolate; background:#c6dce7; }
/* Desktop: the map tools float like first-class map controls, not a second header. */
.map-header {
  position:absolute;left:15px;right:15px;top:15px;z-index:650;
  min-height:unset;display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;background:none;padding:0;pointer-events:none;
}
.map-header > * {pointer-events:auto;}
.map-layers {
  background:rgba(255,255,255,.97);border:1px solid #e9eef5;
  padding:5px;border-radius:13px;gap:2px;box-shadow:0 8px 24px rgba(12,43,73,.16);flex-wrap:nowrap;
}
.layer-pill {height:37px;padding:6px 10px;gap:7px;border:0;background:transparent;border-radius:8px;color:#294663;font-family:Arial,sans-serif;font-size:11px;transition: background .18s,color .18s;}
.layer-pill:hover {background:#eef5ff;}
.layer-pill:has(input:checked) {background:#eaf3ff;color:#0b55a5;}
.layer-pill input {width:14px;height:14px;accent-color:#0c67ca;}
.layer-square {background:#ffdf7b;border-color:#dda516;}
.layer-counter {background:#fff;color:#145aa4;font-size:10px;}
.layer-pill.is-disabled {background:transparent;}
.tiny-asterisk {font-size:9px;white-space:nowrap;}
.map-header-actions {gap:7px;}
.search-wrap {width:clamp(190px,16.8vw,270px);min-width:180px;height:47px;border:1px solid #e3eaf3;border-radius:12px;box-shadow:0 8px 24px rgba(12,43,73,.16);}
.search-wrap input {font-size:12px;padding:13px 12px;}
.search-wrap>svg {margin-left:13px;width:17px;min-width:17px;}
.search-results {top:calc(100% + 7px);border:1px solid #e2eaf4;box-shadow:0 18px 40px rgba(9,43,78,.2);border-radius:12px;padding:6px;}
.search-results button {padding:12px 10px;font-size:12px;line-height:1.4;}
.icon-action {width:47px;height:47px;background:rgba(255,255,255,.97);border:1px solid #e3eaf3;border-radius:12px;box-shadow:0 8px 24px rgba(12,43,73,.16);color:#0e4a85;}
.icon-action svg {width:20px;height:20px;}
.icon-action:hover {background:#fff4ce;transform:translateY(-1px);}
.map-viewport {height:100%; min-height:0;}
.map-top-label {left:17px;top:80px;background:rgba(255,255,255,.94);border:1px solid #fff;box-shadow:0 5px 15px rgba(23,50,76,.13);border-radius:999px;padding:9px 13px;color:#285276;font-family:Arial,sans-serif;font-size:11px;}
.pulse {background:#21ac89;}
.map-legend {left:16px;bottom:16px;border:1px solid rgba(237,243,247,.92);border-radius:14px;padding:14px 17px;background:rgba(255,255,255,.97);box-shadow:0 9px 29px rgba(23,50,76,.17);font-size:11px;}
.map-legend strong {font-size:11px;margin-bottom:11px;}
.map-legend small {font-size:10px;}
.map-credit {right:14px;bottom:14px;background:rgba(255,255,255,.92);font-family:Arial,sans-serif;font-size:10px;}
.map-footer {border-top:1px solid #e6edf5;min-height:48px;background:#fff;padding:10px 17px;font-size:11px;}
.map-footer b {color:#0b4e94;}
.map-viewport {flex:1;}
.info-panel {background:#fff;scrollbar-color:#d7e5f2 transparent;}
.info-panel::-webkit-scrollbar {width:7px;}
.info-panel::-webkit-scrollbar-thumb {background:#d7e5f2;border-radius:99px;}
.panel-heading {padding:22px 22px 17px;position:relative;}
.panel-heading::after {content:"";position:absolute;bottom:0;left:22px;right:22px;height:1px;background:#edf2f7;}
.panel-eyebrow {font-size:9px;color:#5585b3;letter-spacing:1.5px;}
.panel-heading h2 {font-size:21px;letter-spacing:-.8px;margin-top:7px;}
.pill-outline {border:1px solid #f1d989;background:#fff7d8;color:#80601a;padding:8px 12px;border-radius:999px;letter-spacing:1px;}
.village-hero {margin:16px 17px 12px;padding:20px 19px;min-height:128px;border-radius:14px;background:linear-gradient(110deg,#eaf4ff 0%,#f3f8ff 58%,#e4f1ff 100%);border:1px solid #e0edf9;}
.village-hero::before {content:"";position:absolute;right:-40px;top:-74px;width:265px;height:265px;background:url('assets/contour-light.svg') center/contain no-repeat;opacity:.23;pointer-events:none;}
.village-hero::after {content:"";position:absolute;right:-32px;bottom:-90px;border:1px solid rgba(33,102,164,.16);height:175px;width:175px;border-radius:50%;pointer-events:none;}
.contour-art {display:none;}
.village-ident {align-items:center;gap:12px;min-width:0;}
.village-mini-icon {height:46px;width:46px;flex:none;border-radius:13px;color:#1569bc;background:#fff;box-shadow:0 5px 15px rgba(6,72,139,.055);}
.village-mini-icon svg {width:23px;height:23px;}
.village-overline {font-size:9px;letter-spacing:1.6px;color:#678cab;}
.village-ident h3 {font-size:clamp(21px,1.6vw,26px);letter-spacing:-.9px;color:#073c78;}
.village-ident p {font-size:12px;color:#617d9b;line-height:1.6;}
.status-badge {border:1px solid #efdda8;color:#8d6519;background:#fff8e6;padding:7px 10px;border-radius:100px;font-size:10px;white-space:normal;max-width:124px;text-align:center;}
.kpi-grid {padding:0 17px;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.kpi {border:1px solid #e3eaf4;border-radius:12px;min-height:113px;padding:15px 12px;background:#fff;box-shadow:0 1px 5px rgba(13,46,77,.025);}
.kpi-highlight {background:#fffaf0;border-color:#f3e2b7;}
.kpi-head {font-size:11px;color:#57718d;line-height:1.4;min-height:27px;}
.kpi-symbol {color:#2474ba;display:inline-grid;place-items:center;flex:none;}
.kpi-symbol svg {height:17px;width:17px;stroke-width:2;}
.kpi strong {font-size:clamp(19px,1.4vw,24px);line-height:1.1;letter-spacing:-.65px;margin-top:11px;}
.kpi small {font-size:10px;margin-top:8px;line-height:1.3;}
.kpi-progress {height:7px;margin-top:13px;}
.panel-tabs {padding:0 16px;margin-top:16px;position:sticky;top:0;z-index:8;background:#fff;box-shadow:0 2px 5px #10396305;}
.tab {font-size:12px;font-weight:700;padding:14px 4px 15px;}
.tab.active {color:#075fba;}
.tab.active::after {height:3px;left:7px;right:7px;background:#f2c328;}
#tabContent {padding:17px 17px 26px;}
.content-card {border:1px solid #e4ebf4;border-radius:13px;padding:17px;margin-bottom:12px;box-shadow:0 3px 10px rgba(12,52,92,.025);}
.content-card h4 {font-size:14px;color:#0c3d74;letter-spacing:-.1px;margin-bottom:14px;}
.data-row {font-size:12px;gap:12px;padding:11px 0;line-height:1.5;border-bottom:1px solid #edf2f8;}
.data-row>span:first-child {color:#657c97;max-width:56%;}
.data-row strong {color:#153c67;max-width:60%;overflow-wrap:anywhere;}
.coverage-big {font-size:32px;letter-spacing:-1px;}
.coverage-metre {height:12px;}
.coverage-key {font-size:11px;line-height:1.6;}
.card-note {padding:13px 14px;border:1px solid #e1edf9;border-radius:11px;background:#f0f7ff;color:#506f91;font-size:11.5px;}
.card-note.warning {background:#fff9ec;border-color:#f3e5b9;color:#7b6434;}
.two-cards {gap:10px;}
.stat-chip {border:1px solid #e4ecf6;border-radius:12px;padding:14px;background:#f8fbff;}
.stat-chip span {font-size:11px;line-height:1.4;}
.stat-chip strong {font-size:21px;}
.section-caption {font-size:10px;letter-spacing:.7px;font-weight:700;margin:20px 3px 9px;}
.asset-row {border:1px solid #e3eaf4;border-radius:12px;padding:12px;transition:border-color .15s,box-shadow .15s;}
.asset-row:hover {border-color:#c0d8f4;box-shadow:0 4px 13px #16406a0d;}
.asset-icon {height:39px;width:39px;border-radius:11px;color:#0c64b7;background:#eaf4ff;}
.asset-icon svg {width:21px;height:21px;stroke-width:1.9;}
.asset-row strong {font-size:12.5px;}
.asset-row small {font-size:11px;line-height:1.5;}
.asset-row button {border-color:#cfe1f6;background:#edf5ff;color:#0d5eaf;border-radius:9px;padding:9px 12px;font-size:11px;}
.asset-row button:hover {background:#0d61ba;color:white;}
.empty-note {border-radius:12px;font-size:12px;}
.panel-bottom {padding:13px 20px;font-size:9px;}
.detail-breadcrumb {padding:14px 21px 11px;}
.detail-breadcrumb button {font-size:12px;}
#assetPanel {padding:0 17px 24px;}
.asset-hero {padding:21px;border-radius:14px;border:1px solid #dceaf7;background:linear-gradient(110deg,#e7f3ff,#f6faff);}
.asset-large-icon {width:64px;height:64px;border-radius:17px;color:#0c65b8;background:#fff;border:1px solid #d7e7f7;}
.asset-large-icon svg {width:32px;height:32px;}
.asset-hero strong {font-size:20px;}
.asset-hero small {font-size:12px;line-height:1.5;}
.asset-meta-status {border-radius:999px;}
.asset-locate {border-radius:10px;background:#0759ae;padding:14px;font-size:12px;box-shadow:0 6px 14px #0a57982b;}
.asset-locate:hover {background:#07427f;}
.page-bottom {padding:17px 3px 2px;font-size:11px;}
/* Map markers and popups: card-like white panels consistent with the PBG map. */
.water-marker {height:40px;width:40px;border:3px solid white;border-radius:13px;background:#075dc0;box-shadow:0 6px 16px rgba(5,41,89,.4);}
.water-marker svg {height:19px;width:19px;stroke-width:2;}
.water-source-marker {background:#079ab3;border-radius:50%;}
.leaflet-popup-content-wrapper {border-radius:16px;box-shadow:0 13px 38px rgba(13,40,66,.24);}
.leaflet-popup-content {min-width:240px;}
.water-popup {padding:18px 18px 16px;font-family:Arial,sans-serif;}
.water-popup-kicker {font-size:10px;letter-spacing:1.15px;color:#2378b8;}
.water-popup h3 {font-family:Jakarta,Arial,sans-serif;font-size:16px;letter-spacing:-.3px;line-height:1.4;}
.water-popup .water-popup-meta {font-size:12px;padding:9px 0;}
.water-popup-meta span {color:#667e98;}
.water-popup-meta strong {color:#163d65;}
.water-popup button {border-radius:9px;font-size:12px;padding:12px;background:#0c62ba;}
.water-popup button:hover {background:#0a4f96;}
.water-popup-status {display:inline-flex;padding:5px 8px;border-radius:6px;background:#e7f8ef;color:#197349;font-size:10px;font-weight:700;margin-bottom:7px;}
.leaflet-container .leaflet-control-zoom a {height:35px;width:35px;line-height:35px;color:#0e5598;}
.leaflet-container .leaflet-control-zoom {border:0!important;box-shadow:0 5px 22px #15345336!important;border-radius:10px;overflow:hidden;}
.leaflet-top.leaflet-left {top:126px;left:8px;}
.leaflet-control-attribution {font-size:9px!important;}
/* Tablet: horizontal search remains usable without overlapping the layer pills. */
@media (max-width: 1550px) {
  .workspace {grid-template-columns:minmax(0,1.08fr) minmax(465px,.92fr);}
  .map-header {flex-wrap:wrap;}
  .map-header-actions {width:100%;justify-content:flex-end;}
  .search-wrap {flex:1;max-width:none;}
  .map-top-label {top:138px;}
  .leaflet-top.leaflet-left {top:180px;}
  .kpi-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi {min-height:112px;}
  .kpi strong {font-size:23px;}
}
@media (max-width: 1070px) {
  .workspace {grid-template-columns:minmax(0,1fr) minmax(410px,.95fr);gap:12px;}
  .layer-pill {padding:7px 8px;}
  .tiny-asterisk {display:none;}
  .agency-logos {display:none;}
  .site-header {gap:12px;}
}
@media (max-width: 930px) {
  .main-shell {padding:21px 22px 28px;}
  .workspace {display:flex;flex-direction:column;height:auto;min-height:0;gap:15px;}
  .map-card {height:530px;min-height:530px;}
  .info-panel {max-height:none;overflow:visible;min-height:0;}
  .map-header {position:absolute;}
  .map-top-label {top:130px;}
  .leaflet-top.leaflet-left {top:176px;}
  .kpi-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
  .panel-tabs {position:static;}
  .site-nav a {padding:0 14px;}
  .page-heading {margin-bottom:16px;}
}
@media (max-width: 620px) {
  .gov-strip {padding-inline:14px;height:29px;}
  .site-header {padding-inline:14px;height:68px;}
  .brand>img {height:40px;width:40px;}
  .brand strong {font-size:21px;}
  .brand small {font-size:7.5px;letter-spacing:1px;}
  .site-nav a {padding:0 9px;font-size:11px;}
  .main-shell {padding:18px 10px 25px;}
  .page-heading {gap:8px;min-height:0;}
  .module-emblem {width:46px;height:46px;border-radius:13px;}
  .eyebrow {font-size:8px;letter-spacing:.85px;}
  .page-heading h1 {font-size:23px;margin:5px 0 4px;}
  .page-heading p {font-size:11.5px;line-height:1.45;}
  .announcement {padding:11px 12px;font-size:11px;line-height:1.5;}
  .workspace {gap:12px;}
  .map-card {height:505px;min-height:505px;border-radius:15px;}
  .map-header {left:10px;top:10px;right:10px;gap:7px;}
  .map-layers {width:100%;justify-content:space-between;gap:1px;padding:4px;flex-wrap:nowrap;}
  .layer-pill {justify-content:center;flex:1;padding:7px 3px;height:35px;font-size:10px;gap:5px;}
  .layer-pill input {width:12px;height:12px;}
  .layer-pill.is-disabled {display:none;}
  .map-header-actions {gap:6px;}
  .search-wrap {height:42px;min-width:0;}
  .search-wrap input {font-size:11px;padding:10px 8px;}
  .icon-action {height:42px;width:42px;}
  .map-top-label {top:110px;left:10px;max-width:calc(100% - 20px);font-size:10px;}
  .leaflet-top.leaflet-left {top:148px;left:4px;}
  .map-legend {left:8px;bottom:16px;padding:10px 12px;min-width:150px;font-size:10px;}
  .map-legend small {max-width:155px;}
  .map-credit {display:none;}
  .map-footer {padding:9px 12px;font-size:10px;}
  .map-footer-right {font-size:10px;}
  .panel-heading {padding:18px 17px 14px;}
  .panel-heading::after {left:17px;right:17px;}
  .panel-heading h2 {font-size:20px;}
  .village-hero {margin:12px 12px;padding:16px 13px;min-height:112px;}
  .village-ident {gap:8px;}
  .village-mini-icon {height:37px;width:37px;border-radius:10px;}
  .village-ident h3 {font-size:20px;}
  .village-ident p {font-size:10.5px;}
  .village-overline {font-size:8px;}
  .status-badge {font-size:9px;max-width:100px;}
  .kpi-grid {padding:0 12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .kpi {padding:13px;min-height:111px;}
  .kpi strong {font-size:23px;}
  .kpi-head {font-size:11px;}
  .panel-tabs {padding:0 10px;margin-top:11px;}
  .tab {font-size:11px;padding:13px 2px;}
  #tabContent {padding:13px 12px 22px;}
  .content-card {padding:14px;}
  .data-row {font-size:11.5px;}
  .page-bottom {padding:17px 5px 0;font-size:10px;}
}
@media(max-width:380px) {
  .site-nav a {padding:0 6px;font-size:10px;}
  .layer-pill {font-size:9px;}
  .map-card {height:495px;min-height:495px;}
  .status-badge {font-size:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .icon-action,.layer-pill,.asset-row {transition:none!important;}
}
/* Retain the main header during desktop map exploration. */
@media(min-width:931px) {
  .site-header {position:sticky;top:0;z-index:1100;}
}
/* Keep the map toolbar reachable when it wraps on portrait tablet. */
@media (min-width:931px) and (max-width:1550px) {
  .map-header-actions .search-wrap {min-width:0;}
}