/* WebGIS Cipurut — shell styling. WAB purple theme, minimalist (CSS variables,
   Inter font, soft shadows). */

/* Inter is vendored, not pulled from a CDN: the app ships as a static site and
   must not depend on a third party at run time. Before this @font-face existed
   the stack merely *named* Inter, so only machines that happened to have it
   installed saw it and everyone else silently got the system UI font. */
@font-face{
  font-family:'Inter';
  src:url('fonts/inter-var-latin.woff2') format('woff2-variations'),
      url('fonts/inter-var-latin.woff2') format('woff2');
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --wab-purple:#5b2c86; --wab-purple-2:#6a3a99; --wab-purple-ink:#ffffff;
  --bg:#f5f7fa; --surface:#ffffff; --border:#e2e6ec; --border-2:#cdd4dc;
  --ink:#1a2531; --ink-2:#4a5868; --ink-3:#7a8696;
  --radius:8px;
  --shadow:0 2px 8px rgba(31,20,45,.10),0 1px 2px rgba(31,20,45,.05);
  --shadow-lg:0 8px 24px rgba(31,20,45,.16),0 2px 6px rgba(31,20,45,.06);
}
html,body{
  margin:0; padding:0; height:100%;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
/* ---- Top WAB Header Bar (Foldable Theme) ---- */
.wab-header{
  position:fixed; top:20px; left:35px; z-index:1500;
  background:#6354a5;
  color:#ffffff;
  padding:0; box-shadow:0 3px 12px rgba(0,0,0,0.3);
  user-select:none;
  border-radius:999px;
  display:flex; align-items:center; height:42px;
}
.wab-header-main { display:flex; align-items:center; height:100%; gap:10px; }
.wab-header-brand{ display:flex; align-items:center; gap:12px; height:100%; padding-right:5px; }
.wab-header-icon{
  width:56px; height:56px; background:#ffffff; border-radius:50%;
  box-shadow:0 3px 8px rgba(0,0,0,0.25);
  display:grid; place-items:center; color:#6354a5; flex-shrink:0;
  margin-left:-20px;
}
.wab-header-icon svg { width:28px; height:28px; }
.wab-header-title-group{ display:flex; flex-direction:column; justify-content:center; }
.wab-header-title{ margin:0; font-size:16.5px; font-weight:700; color:#ffffff; letter-spacing:0.01em; line-height:1; }
.wab-header-subtitle{ display:none; }
.wab-header-meta{ display:none; }

#map{ position:absolute; top:0; bottom:0; left:0; right:0; background:#d8dde2; }
button{ font-family:inherit; }

/* ---- Top-left navigation stack ---- */
.wab-navbar{
  position:fixed; top:75px; left:15px; z-index:1200;
  display:flex; flex-direction:column; gap:6px;
}
.wab-navbtn{
  width:38px; height:38px; border:1px solid var(--border);
  background:rgba(255,255,255,.96); color:var(--ink); border-radius:10px;
  font-size:19px; line-height:1; cursor:pointer; box-shadow:var(--shadow);
  display:grid; place-items:center; transition:.15s;
  backdrop-filter:blur(6px);
}
.wab-navbtn:hover{ color:var(--wab-purple); border-color:var(--wab-purple); transform:translateY(-1px); }

/* ---- Bottom-center toolbar (Foldable Theme Widget Pool).
       The circle lives on the svg itself so the label can sit underneath the
       button without stretching it. ---- */
.wab-toolbar{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:1200; display:flex; gap:18px; padding:0;
  background:transparent; border:none; box-shadow:none; backdrop-filter:none;
}
.wab-tool{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:0;
  border:0; background:transparent; cursor:pointer;
}
.wab-tool svg{
  width:22px; height:22px; padding:11px; box-sizing:content-box;
  border-radius:50%; background:rgba(40,40,40,.85); color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3); backdrop-filter:blur(4px); transition:.15s;
}
/* Dark pill behind the label. Plain white text with a shadow was unreliable:
   the basemap under the toolbar ranges from dark contours to bright paddy, and
   a text outline alone still washed out over light tiles. */
.wab-tool span{
  display:block; font-size:11px; font-weight:600; color:#fff; letter-spacing:.01em;
  background:rgba(28,28,32,.78); padding:2px 7px; border-radius:999px;
  backdrop-filter:blur(4px); box-shadow:0 1px 3px rgba(0,0,0,.28);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.wab-tool.active span{ background:var(--wab-purple); }
.wab-tool:hover svg{ background:var(--wab-purple); transform:translateY(-2px); }
.wab-tool.active svg{ background:var(--wab-purple); }
/* small pill under the active widget, as in the WAB reference */
.wab-tool::after{ content:''; width:14px; height:4px; border-radius:3px; background:transparent; }
.wab-tool.active::after{ background:var(--wab-purple); box-shadow:0 1px 3px rgba(0,0,0,.35); }

/* ---- Top-right tool stack (measure) ---- */
.wab-toprightbar{
  position:fixed; top:78px; right:14px; z-index:1200;
  display:flex; flex-direction:column; gap:8px;
}
.wab-rbtn{
  width:42px; height:42px; border:0; border-radius:50%;
  background:rgba(40,40,40,.85); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:.15s;
  box-shadow:0 2px 8px rgba(0,0,0,.3); backdrop-filter:blur(4px);
}
.wab-rbtn:hover{ background:var(--wab-purple); transform:translateY(-1px); }
.wab-rbtn.active{ background:var(--wab-purple); }

/* ---- Floating panel (WAB widget) ---- */
.wab-panel{
  /* clears the toolbar, which is taller now that the buttons carry labels */
  position:fixed; right:14px; bottom:96px; width:280px; max-height:70vh;
  z-index:1300; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden;
  display:none; flex-direction:column;
}
.wab-panel.open{ display:flex; }
.wab-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--wab-purple); color:var(--wab-purple-ink);
  padding:9px 12px; font-weight:700; font-size:13px;
}
.wab-panel-close{
  border:0; background:transparent; color:#fff; font-size:20px; line-height:1;
  cursor:pointer; opacity:.85; padding:0 2px;
}
.wab-panel-close:hover{ opacity:1; }
.wab-panel-body{ padding:12px; overflow:auto; }

/* ---- Basemap gallery (thumbnail cards) ---- */
.wab-basemap-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wab-basemap-item{
  display:flex; flex-direction:column; gap:5px; padding:4px;
  border:2px solid var(--border); border-radius:8px; background:#fafbfc;
  color:var(--ink-2); font-size:12px; font-weight:600; cursor:pointer;
  transition:.15s; text-align:center;
}
.wab-basemap-item:hover{ border-color:var(--wab-purple-2); color:var(--wab-purple); transform:translateY(-1px); }
.wab-basemap-item.active{ border-color:var(--wab-purple); background:#f0ecf5; color:var(--wab-purple); }
.wab-basemap-thumb{
  display:block; width:100%; height:62px; border-radius:5px;
  background:#e6e9ee center/cover no-repeat; border:1px solid rgba(0,0,0,.06);
}
.wab-basemap-name{ display:block; padding-bottom:2px; }

/* ---- Layer list: collapsible group header, eye toggle, symbol swatch,
       expandable per-category sub-rows ---- */
.wab-layerlist{ display:flex; flex-direction:column; gap:1px; }
.wab-ll-group{
  display:flex; align-items:center; gap:6px; width:100%;
  border:0; background:transparent; padding:9px 2px 4px; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700; text-align:left;
  text-transform:uppercase; letter-spacing:.03em; color:var(--ink-3);
}
.wab-ll-group:first-child{ padding-top:0; }
.wab-ll-group:hover{ color:var(--wab-purple); }
.wab-ll-caret{ font-size:10px; line-height:1; transition:transform .15s; }
.wab-ll-group.collapsed .wab-ll-caret{ transform:rotate(-90deg); }
.wab-ll-items{ display:flex; flex-direction:column; gap:1px; }
.wab-ll-items.collapsed{ display:none; }

.wab-ll-row{
  display:flex; align-items:center; gap:8px; padding:5px 4px;
  border-radius:6px; cursor:pointer;
}
.wab-ll-row:hover{ background:#f3f0f8; }
.wab-ll-row.off{ opacity:.45; }
.wab-ll-eye{
  flex:0 0 auto; width:26px; height:26px; padding:0; border:0; border-radius:6px;
  background:transparent; color:var(--wab-purple); cursor:pointer;
  display:grid; place-items:center;
}
.wab-ll-row.off .wab-ll-eye{ color:var(--ink-3); }
.wab-ll-eye:hover{ background:#e7e0f0; }
.wab-ll-name{ font-size:13px; color:var(--ink); flex:1 1 auto; }
.wab-ll-expand{
  flex:0 0 auto; width:22px; height:22px; padding:0; border:0; border-radius:5px;
  background:transparent; color:var(--ink-3); font-size:11px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
}
.wab-ll-expand:hover{ background:#e7e0f0; color:var(--wab-purple); }
.wab-ll-expand.open{ color:var(--wab-purple); }
.wab-ll-subs{ display:flex; flex-direction:column; gap:1px; margin:1px 0 4px 30px; }
.wab-ll-subs.collapsed{ display:none; }
.wab-ll-sub{ display:flex; align-items:center; gap:8px; padding:2px 4px; }
.wab-ll-sub-name{ font-size:12px; color:var(--ink-2); }

/* ---- Legend ---- */
.wab-legend{ display:flex; flex-direction:column; gap:3px; }
.wab-lg-title{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink-3); margin:10px 0 4px;
}
.wab-lg-title:first-child{ margin-top:0; }
.wab-lg-row{ display:flex; align-items:center; gap:9px; padding:2px 4px; }
.wab-lg-swatch{ flex:0 0 auto; width:24px; height:16px; display:inline-block; }
.wab-lg-label{ font-size:12.5px; color:var(--ink); }

/* ---- Coordinate readout ---- */
.wab-coord{
  position:fixed; left:14px; bottom:14px; z-index:1100;
  background:rgba(255,255,255,.92); border:1px solid var(--border);
  border-radius:6px; padding:3px 9px; font-size:11.5px; color:var(--ink-2);
  font-variant-numeric:tabular-nums; box-shadow:var(--shadow);
}
/* nudge Leaflet scale above the coordinate box */
.leaflet-bottom.leaflet-left{ margin-bottom:34px; }

/* ---- Popups: smooth WAB style (applies to every popup, qgis2web + custom) ---- */
.leaflet-popup-content-wrapper{
  border-radius:10px !important; padding:0 !important; overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 12px 32px rgba(31,20,45,.18),0 2px 6px rgba(31,20,45,.08) !important;
}
.leaflet-popup-content{ margin:0 !important; font-family:inherit; font-size:13px; color:var(--ink); line-height:1.5; min-width:230px; }
/* Long attributes (Kondisi and Usulan run to several sentences) scroll inside
   the box instead of making it grow upward off screen. Kept in CSS, not in
   Leaflet's maxHeight option, so it tracks the viewport without rebinding. */
.leaflet-popup-content{ max-height:min(56vh,560px); overflow-y:auto; overscroll-behavior:contain; }
.leaflet-popup-content.leaflet-popup-scrolled{ border-top:0 !important; border-bottom:0 !important; }
.leaflet-popup-content table{ border-collapse:collapse; width:100%; }
.leaflet-popup-content table tr:first-child td{
  background:linear-gradient(135deg,var(--wab-purple) 0%,var(--wab-purple-2) 100%);
  color:#fff; padding:11px 15px; border:0;
  position:sticky; top:0; z-index:2;   /* title stays put while scrolling */
}
.leaflet-popup-content table tr:first-child td strong{ display:block; font-size:14px; font-weight:700; }
.leaflet-popup-content table tr:not(:first-child) td,
.leaflet-popup-content table tr:not(:first-child) th{
  padding:8px 15px; border-bottom:1px solid var(--border); text-align:left; font-size:12.5px; vertical-align:top;
}
.leaflet-popup-content table tr:not(:first-child):last-child td,
.leaflet-popup-content table tr:not(:first-child):last-child th{ border-bottom:0; }
.leaflet-popup-content table tr:nth-child(even):not(:first-child){ background:#faf9fc; }
/* Row labels are the official KUGI attribute definitions verbatim, and some run
   long ("Nama wilayah administrasi Kelurahan atau Desa"). They are stored in
   sentence case, so uppercasing them here only made them harder to read. */
.leaflet-popup-content table th{ color:var(--ink-2); font-weight:600; width:44%; font-size:11.5px; line-height:1.35; }
.leaflet-popup-content table td{ color:var(--ink); }
.leaflet-popup-tip{ background:var(--wab-purple) !important; }
/* Above the sticky title row, which would otherwise cover it. */
.leaflet-popup-close-button{ color:rgba(255,255,255,.85) !important; font-size:18px !important; padding:8px 9px 0 0 !important; z-index:5; }
.leaflet-popup-close-button:hover{ color:#fff !important; }
.wab-pop{ font-size:13px; }
.wab-carousel{ position:relative; margin:0; background:#000; border-radius:0 0 8px 8px; overflow:hidden; }
.wab-carousel-img-box{ position:relative; min-height:100px; background:#000; display:flex; align-items:center; justify-content:center; }
.wab-carousel-err{ display:none; color:#ccc; font-size:12px; font-weight:500; text-align:center; padding:20px; flex-direction:column; align-items:center; justify-content:center; width:100%; height:150px; background:#222; }
.wab-carousel-img{ display:block; width:100%; height:auto; max-height:220px; object-fit:contain; background:#000; cursor:zoom-in; }
.wab-carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px;
  border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:18px;
  cursor:pointer; display:grid; place-items:center;
}
.wab-carousel-nav.prev{ left:6px; } .wab-carousel-nav.next{ right:6px; }
.wab-carousel-nav:hover{ background:var(--wab-purple); }
.wab-carousel-count{
  position:absolute; bottom:6px; right:8px; background:rgba(0,0,0,.6); color:#fff;
  font-size:11px; padding:1px 7px; border-radius:999px;
}

/* ---- Search in Header (Foldable Theme) ---- */
#wab-header-search-container {
  display: flex; align-items: center; padding-right: 0; position: relative; height: 100%;
}
.wab-header-search {
  position: relative; display: flex; align-items: center;
  background: rgba(255,255,255,0.95); border-radius: 0 999px 999px 0;
  height: 100%; width: 240px; transition: 0.2s;
}
.wab-header-search:focus-within { background: #ffffff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.wab-header-search-input {
  border: 0; outline: none; background: transparent; padding: 0 10px;
  font-size: 12.5px; color: var(--ink); flex-grow: 1; width: 100%; height: 100%; font-family: inherit;
}
.wab-header-search-btn {
  border: 0; background: transparent; padding: 0 8px; color: var(--ink-2); cursor: pointer;
  display: grid; place-items: center; height: 100%;
}
.wab-header-search-btn:hover { color: var(--wab-purple); }
.wab-header-search-results {
  position: absolute; top: 48px; left: 0; right: 0; background: #fff;
  border-radius: 6px; box-shadow: var(--shadow-lg);
  display: none; max-height: 300px; overflow-y: auto; color: var(--ink); z-index: 2000;
  flex-direction: column; gap: 2px; padding: 4px;
}
.wab-search-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:4px; cursor:pointer; font-size:12.5px; color:var(--ink);
}
.wab-search-item:hover{ background:#f0ecf5; }
.wab-search-item .tag{
  flex:0 0 auto; font-size:10px; font-weight:700; text-transform:uppercase;
  background:var(--wab-purple); color:#fff; padding:2px 6px; border-radius:999px;
}
.wab-search-item .tag.place{ background:var(--ink-3); }

/* ---- Measure output box (Phase 5) ---- */
.wab-measure-out{
  position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:1400;
  background:rgba(255,255,255,.97); border:1px solid var(--border); border-radius:8px;
  box-shadow:var(--shadow-lg); padding:8px 14px; font-size:13px; color:var(--ink);
  max-width:80vw; text-align:center;
}
.wab-measure-out .hint{ color:var(--ink-3); font-size:11px; }

/* ---- Measure capture overlay (Phase 5) ---- */
.wab-measure-overlay{
  position:fixed; inset:0; z-index:1050; cursor:crosshair; background:transparent;
}

/* ---- Legend swatch alignment + bigger Bangunan icons (override) ---- */
.wab-lg-row{ align-items:center; min-height:24px; }
.wab-lg-swatch{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:22px; }
.wab-lg-line{ width:24px; height:0; }
.wab-lg-fill{ width:20px; height:14px; border:1px solid #232323; display:block; }
.wab-lg-swatch.wab-lg-swatch--icon{ width:28px; height:28px; background-position:center; background-size:contain; background-repeat:no-repeat; }

/* ---- Map labels (Bangunan / Kecamatan / Kabupaten) ---- */
.leaflet-tooltip.wab-label{ padding:2px 5px; border:0; background:rgba(255,255,255,.82); box-shadow:none; border-radius:4px; font-family:Inter,system-ui,sans-serif; color:var(--ink); white-space:nowrap; }
.leaflet-tooltip.wab-label:before{ display:none !important; }
.leaflet-tooltip.wab-label-kab{ background:transparent; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:#33234a; text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 4px #fff; }
.leaflet-tooltip.wab-label-kec{ background:transparent; font-weight:600; font-size:11px; color:#3a3a3a; text-shadow:0 0 3px #fff,0 0 3px #fff; }
.leaflet-tooltip.wab-label-bangunan{ display:none; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; font-family:Arial,sans-serif !important; font-size:11px !important; font-weight:700 !important; color:#000000 !important; text-shadow:0 0 3px #ffffff, 0 0 3px #ffffff, 0 0 4px #ffffff, 0 0 5px #ffffff !important; }
body.z-labels .leaflet-tooltip.wab-label-bangunan{ display:block; }
.leaflet-tooltip.wab-label-desa{ display:none; background:transparent; font-weight:500; font-size:10px; color:#454545; text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 4px #fff; }
body.z-desa .leaflet-tooltip.wab-label-desa{ display:block; }

/* ---- Photo Zoom Modal ---- */
.wab-photo-modal{
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.85);
  display:none; place-items:center; opacity:0; transition:opacity 0.2s;
  backdrop-filter:blur(5px);
}
.wab-photo-modal.open{ display:grid; opacity:1; }
.wab-photo-modal-img{
  max-width:90vw; max-height:90vh; object-fit:contain;
  border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,0.5);
  transform:scale(0.95); transition:transform 0.2s;
}
.wab-photo-modal.open .wab-photo-modal-img{ transform:scale(1); }
.wab-photo-modal-close{
  position:absolute; top:20px; right:25px; background:rgba(255,255,255,0.2); border:0;
  color:#fff; font-size:36px; line-height:1; width:44px; height:44px; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; transition:0.2s;
}
.wab-photo-modal-close:hover{ background:rgba(255,255,255,0.4); transform:rotate(90deg); }

/* ================================================================== *
 *  Small screens. The header pill cannot hold a search field at this
 *  width, so the field collapses to its icon and expands under the
 *  header; panels become full-width sheets above the toolbar.
 * ================================================================== */
@media (max-width:700px){
  .wab-header{ top:8px; left:8px; right:8px; height:40px; }
  .wab-header-main{ width:100%; }
  .wab-header-brand{ flex:1 1 auto; min-width:0; gap:8px; }
  .wab-header-icon{ width:44px; height:44px; margin-left:-14px; }
  .wab-header-icon svg{ width:22px; height:22px; }
  .wab-header-title{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wab-header-title-group{ min-width:0; }

  #wab-header-search-container{ flex:0 0 auto; }
  .wab-header-search{ width:40px; background:transparent; border-radius:999px; }
  .wab-header-search-input{ display:none; }
  .wab-header-search-btn{ color:#fff; width:40px; }
  .wab-header-search.expanded{
    position:fixed; top:56px; left:8px; right:8px; width:auto; height:42px;
    background:#fff; border-radius:999px; box-shadow:var(--shadow-lg);
  }
  .wab-header-search.expanded .wab-header-search-input{ display:block; }
  .wab-header-search.expanded .wab-header-search-btn{ color:var(--ink-2); }
  .wab-header-search.expanded .wab-header-search-results{ top:50px; }

  .wab-navbar{ top:60px; left:8px; }
  .wab-toprightbar{ top:60px; right:8px; }
  .wab-navbtn{ width:36px; height:36px; }
  .wab-rbtn{ width:38px; height:38px; }

  .wab-panel{ left:8px; right:8px; width:auto; bottom:100px; max-height:54vh; }
  /* five widgets must fit across 375px without colliding with the attribute
     table button in the corner */
  .wab-toolbar{ bottom:14px; gap:9px; }
  .wab-tool svg{ width:18px; height:18px; padding:9px; }
  .wab-tool span{ font-size:9.5px; }
  .wab-tool::after{ width:11px; height:3px; }

  .wab-coord{ display:none; }
  .leaflet-bottom.leaflet-left{ margin-bottom:78px; }
  .wab-measure-out{ top:auto; bottom:104px; max-width:calc(100vw - 16px); }
}

@media (max-width:480px){
  .wab-header-title{ font-size:12px; }
  .wab-header-icon{ width:38px; height:38px; margin-left:-10px; }
  .wab-header-icon svg{ width:19px; height:19px; }
  .wab-panel{ max-height:48vh; }
  .wab-basemap-thumb{ height:54px; }
  .leaflet-popup-content{ min-width:190px; }
  .wab-carousel-img{ max-height:170px; }
}

/* Coarse pointers get larger hit areas without changing the visual size. */
@media (pointer:coarse){
  .wab-ll-row{ padding:8px 4px; }
  .wab-ll-eye{ width:30px; height:30px; }
  .wab-carousel-nav{ width:36px; height:36px; }
}