* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f7fa;
}

header {
  height: 70px;
  padding: 12px 24px;
  background: white;
  border-bottom: 1px solid #ddd;
}

header h1 {
  margin: 0;
  color: #073b77;
}

header span {
  font-size: 14px;
  color: #666;
}

#status {
  padding: 8px 24px;
  background: #ffffff;
  font-size: 14px;
}

#map {
  width: 100%;
  height: calc(100vh - 105px);
}

.popup-bangunan h3 {
  margin: 0 0 10px;
  color: #060682;
}

.popup-bangunan {
  line-height: 1.5;
}

.popup-bangunan hr {
  border: 0;
  border-top: 1px solid #24144a;
  margin: 10px 0;
}
/* Animasi popup Leaflet */
.leaflet-popup-content-wrapper {
animation: popupSmooth 0.25s ease-out;
transform-origin: bottom center;
}

@keyframes popupSmooth {
from {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
}

to {
  opacity: 1;
  transform: translateY(0) scale(1);
}
}

/* ================================
 BOTTOM DETAIL PANEL
================================ */

.detail-panel {
position: fixed;

left: 0;
right: 0;
bottom: 0;

height: 25vh;

background: white;

z-index: 2000;

border-radius: 18px 18px 0 0;

box-shadow:
  0 -8px 30px rgba(0, 0, 0, 0.15);

transform: translateY(100%);

transition:
  transform 0.35s cubic-bezier(
    0.22,
    1,
    0.36,
    1
  );

overflow: hidden;
}


/* Saat panel dibuka */
.detail-panel.active {
transform: translateY(0);
}


/* Header */
.detail-header {
height: 60px;

display: flex;
align-items: center;
justify-content: space-between;

padding: 10px 24px;

border-bottom: 1px solid #e5e7eb;
}


.detail-header h3 {
margin: 0;

color: #073b77;

font-size: 18px;
}


.detail-header span {
font-size: 12px;
color: #777;
}


/* Tombol tutup */
.detail-close {
width: 36px;
height: 36px;

border: none;
border-radius: 50%;

background: #f1f3f5;

font-size: 24px;

cursor: pointer;
}


/* Konten */
.detail-content {
height: calc(25vh - 60px);

padding: 14px 24px;

overflow-y: auto;
overflow-x: auto;
}


/* Tabel */
.detail-table {
width: 100%;

border-collapse: collapse;

font-size: 13px;
}


.detail-table th {
text-align: left;

padding: 8px 10px;

background: #f4f7fb;

color: #073b77;

white-space: nowrap;
}


.detail-table td {
padding: 8px 10px;

border-bottom: 1px solid #eee;

white-space: nowrap;
}


/* Button popup */
.btn-detail {
width: 100%;

margin-top: 12px;

padding: 9px 12px;

border: none;
border-radius: 7px;

background: #073b77;
color: white;

font-weight: 600;

cursor: pointer;

transition: 0.2s;
}


.btn-detail:hover {
transform: translateY(-1px);

opacity: 0.9;
}

/* ================================
 STATUS BADGE
================================ */

.status-badge {
display: inline-flex;
align-items: center;

padding: 5px 10px;

border-radius: 999px;

font-size: 12px;
font-weight: 600;

line-height: 1;

white-space: nowrap;
}


/* Terbit / selesai */
.status-sukses {
background: #e8f7ee;
color: #18794e;
}


/* Menunggu / proses */
.status-proses {
background: #fff6d8;
color: #9a6b00;
}


/* Perbaikan / revisi */
.status-perbaikan {
background: #fff0df;
color: #b45309;
}


/* Ditolak / gagal */
.status-gagal {
background: #fde8e8;
color: #b42318;
}


/* Status lain */
.status-netral {
background: #eef2f6;
color: #475467;
}

.popup-status {
margin-top: 6px;
margin-bottom: 6px;
}

.map-wrapper {
position: relative;
overflow: hidden;
}


/* =========================
 TOOLBAR
========================= */

.map-toolbar {
position: absolute;

top: 16px;
left: 20px;

display: flex;
align-items: center;
gap: 10px;

z-index: 1300;

transition: left 0.3s ease;
}


/* Toolbar bergeser ketika sidebar buka */
.map-wrapper.sidebar-open .map-toolbar {
left: 330px;
}


.search-box {
width: 25vw;
min-width: 280px;
max-width: 420px;
}

.search-box input {
width: 100%;
height: 44px;

padding: 0 16px;

border: none;
border-radius: 12px;

background: white;

box-shadow:
  0 4px 18px rgba(0,0,0,0.15);

font-size: 14px;
outline: none;
}


.filter-toggle {
height: 44px;

padding: 0 16px;

border: none;
border-radius: 12px;

background: #073b77;
color: white;

box-shadow:
  0 4px 18px rgba(0,0,0,0.15);

font-size: 14px;
font-weight: 600;

cursor: pointer;
}


/* =========================
 SIDEBAR
========================= */

.filter-sidebar {
position: absolute;

top: 0;
left: 0;
bottom: 0;

width: 310px;

padding: 22px 20px;

background: white;

z-index: 1250;

box-shadow:
  8px 0 30px rgba(0,0,0,0.14);

transform: translateX(-100%);

transition:
  transform 0.3s cubic-bezier(
    0.22,
    1,
    0.36,
    1
  );

overflow-y: auto;
}


/* Sidebar terbuka */
.filter-sidebar.active {
transform: translateX(0);
}


/* HEADER */

.filter-header {
display: flex;
justify-content: space-between;
align-items: flex-start;

margin-bottom: 24px;
}

.filter-header strong {
display: block;

color: #073b77;
font-size: 18px;
}

.filter-header span {
display: block;

margin-top: 4px;

color: #667085;
font-size: 12px;
}


.filter-close {
width: 34px;
height: 34px;

border: none;
border-radius: 50%;

background: #f2f4f7;

font-size: 21px;

cursor: pointer;
}


/* FILTER */

.filter-group {
margin-bottom: 18px;
}

.filter-group label {
display: block;

margin-bottom: 7px;

font-size: 12px;
font-weight: 600;

color: #344054;
}

.filter-group select {
width: 100%;
height: 42px;

padding: 0 10px;

border: 1px solid #d9e0e8;
border-radius: 8px;

background: white;

outline: none;
}


/* BUTTON */

.filter-actions {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

margin-top: 24px;
}

.btn-reset,
.btn-apply {
height: 42px;

border-radius: 8px;

font-weight: 600;
cursor: pointer;
}

.btn-reset {
border: 1px solid #d0d5dd;

background: white;
color: #344054;
}

.btn-apply {
border: none;

background: #073b77;
color: white;
}

/* ========================================
 DASHBOARD KANAN
======================================== */

.dashboard-panel {
position: absolute;

top: 0;
right: 0;
bottom: 0;

width: 330px;

padding: 22px 20px;

background: #ffffff;

z-index: 1250;

box-shadow:
  -8px 0 30px rgba(0, 0, 0, 0.14);

transform: translateX(100%);

transition:
  transform 0.32s cubic-bezier(
    0.22,
    1,
    0.36,
    1
  );

overflow-y: auto;
}

.dashboard-panel.active {
transform: translateX(0);
}


/* HANDLE PANAH */

.dashboard-handle {
position: absolute;

right: 0;
top: 50%;

transform: translateY(-50%);

width: 34px;
height: 70px;

border: none;

border-radius: 12px 0 0 12px;

background: #073b77;
color: white;

box-shadow:
  -4px 3px 15px rgba(0, 0, 0, 0.18);

font-size: 18px;

cursor: pointer;

z-index: 1300;

transition:
  right 0.32s cubic-bezier(
    0.22,
    1,
    0.36,
    1
  ),
  background 0.2s ease;
}

.dashboard-handle:hover {
background: #0b67c2;
}


/* ketika dashboard terbuka */

.map-wrapper.dashboard-open
.dashboard-handle {
right: 330px;
}


/* HEADER */

.dashboard-header {
margin-bottom: 20px;
}

.dashboard-header h3 {
margin: 0;

color: #073b77;

font-size: 19px;
}

.dashboard-header span {
display: block;

margin-top: 4px;

color: #667085;

font-size: 12px;
}


/* KPI */

.dashboard-kpi-grid {
display: grid;

grid-template-columns:
  repeat(2, 1fr);

gap: 10px;
}

.dashboard-kpi {
padding: 13px;

border: 1px solid #edf0f4;

border-radius: 12px;

background: #f9fbfd;
}

.dashboard-kpi span {
display: block;

margin-bottom: 5px;

color: #667085;

font-size: 11px;
}

.dashboard-kpi strong {
color: #073b77;

font-size: 23px;
}


/* HIGHLIGHT */

.dashboard-highlight {
margin-top: 12px;

padding: 14px 16px;

border-radius: 12px;

background: #fff8df;
}

.dashboard-highlight span {
display: block;

color: #725500;

font-size: 12px;
}

.dashboard-highlight strong {
display: inline-block;

margin-top: 3px;

color: #073b77;

font-size: 25px;
}

.dashboard-highlight small {
margin-left: 5px;

color: #667085;
}


/* CHART */

.dashboard-chart-card {
margin-top: 16px;

padding: 14px;

border: 1px solid #edf0f4;

border-radius: 12px;

background: white;
}

.chart-title {
margin-bottom: 12px;

color: #344054;

font-size: 13px;
font-weight: 600;
}

.chart-wrapper {
position: relative;

height: 210px;
}


/* ============================
 GITA SIKKA - BASEMAP CONTROL
============================ */

.leaflet-control-layers {
border: none !important;
border-radius: 12px !important;

background: #ffffff;

box-shadow:
  0 4px 18px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-control-layers-expanded {
padding: 12px 15px;
min-width: 175px;
}

.leaflet-control-layers-base label {
padding: 6px 0;
cursor: pointer;
}

.leaflet-control-layers-base span {
font-size: 13px;
color: #344054;
}

.leaflet-control-layers-base input {
accent-color: #073b77;
}

/* ================================
 CUSTOM MARKER - GITA SIKKA
================================ */

.custom-marker-wrapper {
background: transparent !important;
border: none !important;
}

.custom-marker-circle {
width: 34px;
height: 34px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;
border: 3px solid #ffffff;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);

transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.custom-marker-circle:hover {
transform: scale(1.08);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.custom-marker-circle svg {
display: block;
}


/* ==================================
 MARKER MODE SELECTOR
================================== */

.marker-mode-box select {
height: 44px;
min-width: 170px;

padding: 0 14px;

border: none;
border-radius: 12px;

background: white;
color: #073b77;

font-size: 13px;
font-weight: 600;

cursor: pointer;

box-shadow:
  0 4px 18px rgba(0,0,0,0.15);

outline: none;
}

/* ==================================
 MARKER JUMLAH LANTAI
================================== */

.marker-lantai {
color: #ffffff;
font-size: 13px;
font-weight: 700;
font-family: Arial, sans-serif;

letter-spacing: -0.3px;
user-select: none;
}


/* ================================================
 GITA SIKKA — LEGENDA DINAMIS BAWAH KANAN
 Tambahkan di bagian AKHIR file style.css.
 Dashboard kanan memakai lebar 330px.
 ================================================ */
 .map-legend {
  position: absolute;
  right: 18px;
  bottom: 38px; /* ruang untuk atribusi peta */
  z-index: 1200; /* di atas peta, di bawah sidebar (1250) */
  width: 190px;
  max-width: calc(100% - 36px);
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: right 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
  pointer-events: none; /* tidak menghalangi drag peta */
}

/* Ketika dashboard sebelah kanan terbuka, legenda bergeser ke kirinya. */
.map-wrapper.dashboard-open .map-legend {
  right: 348px; /* 330px dashboard + 18px jarak */
}

/* Sidebar FILTER di kiri tidak menimpa legenda di kanan.
   Jika sidebar kiri dan dashboard kanan terbuka bersamaan,
   legenda tetap mengikuti posisi dashboard kanan. */
.map-legend-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid #E8EDF3;
  color: #073B77;
  font-size: 13px;
}
.map-legend-heading-icon {
  color: #2375B9;
  font-size: 17px;
  line-height: 1;
}
.map-legend-items {
  display: grid;
  gap: 8px;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.map-legend-symbol {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  font: 700 11px Arial, sans-serif;
  color: #fff;
}
.map-legend-symbol svg { display: block; }
.map-legend-label {
  color: #344054;
  font-size: 12px;
  line-height: 1.2;
}

/* Saat panel detail bawah dibuka, pindah ke atas panel agar tidak tertutup. */
body:has(.detail-panel.active) .map-legend {
  bottom: calc(25vh + 24px);
}

/* Pada layar sempit tidak ada cukup ruang di sebelah dashboard.
   Sembunyikan legenda sementara ketika dashboard terbuka. */
@media (max-width: 800px) {
  .map-legend { right: 10px; bottom: 34px; width: 168px; padding: 11px; }
  .map-wrapper.dashboard-open .map-legend {
    right: 10px;
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-legend { transition: none; }
}


/* =========================================
 FIX LAYOUT WEBGIS - FULL VIEWPORT
========================================= */

html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}

body {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
}

/* Header tetap di atas */
header {
flex-shrink: 0;
}

/* Status data */
#status {
flex-shrink: 0;
}

/* Area peta mengisi sisa layar */
.map-wrapper {
position: relative;
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
}

/* Peta mengikuti ukuran wrapper */
#map {
width: 100%;
height: 100%;
min-height: 0;
}

/* Legenda selalu di kanan bawah peta */
.map-legend {
position: absolute;
right: 18px;
bottom: 18px;

z-index: 1200;

transition:
  right 0.32s ease,
  bottom 0.32s ease;
}

/* Dashboard kanan terbuka */
.map-wrapper.dashboard-open .map-legend {
right: 348px;
}

/* Detail bawah terbuka */

body:has(.detail-panel.active) .map-legend {
bottom: calc(25vh - 100px);
}


/* ===============================================
   GITA SIKKA — FIX SCROLL VERTIKAL PADA WEBGIS
   Tempel DI AKHIR style.css yang sudah digunakan.
   =============================================== */
   html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }
  header, #status { flex-shrink: 0; }
  .map-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
    min-height: 0;
  }
  /* Legenda tetap di dalam wrapper, mengikuti dashboard kanan */
  .map-legend {
    right: 18px;
    bottom: 38px;
  }
  .map-wrapper.dashboard-open .map-legend { right: 348px; }
  /* Panel detail adalah overlay fixed; geser legenda ke atas saat terbuka */
  body:has(.detail-panel.active) .map-legend {
    bottom: calc(25vh + 18px);
  }
  @media (max-width: 800px) {
    .map-wrapper.dashboard-open .map-legend { right: 10px; }
  }
  
  /* =========================================================
   GITA SIKKA — LEGENDA DINAMIS BISA DILIPAT
   TAMBAHKAN DI BAGIAN PALING BAWAH style.css
   Tetap gunakan CSS legenda lama, ini hanya override.
   ========================================================= */

/* Legenda mengambang di area peta (bukan di bagian bawah halaman). */
.map-legend {
  position: absolute;
  right: 18px;
  bottom: 38px; /* atribusi Leaflet/Mapbox tetap terlihat */
  width: 205px;
  max-width: calc(100% - 36px);
  padding: 12px;
  z-index: 1200;
  overflow: hidden;
  pointer-events: auto; /* sebelumnya 'none', tombol harus bisa diklik */
  transition:
    right 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.25s ease,
    padding 0.25s ease,
    opacity 0.2s ease;
}

/* Seluruh bagian atas legenda kini berupa tombol interaktif. */
.map-legend-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #073B77;
  text-align: left;
  font: 600 13px Arial, sans-serif;
  cursor: pointer;
}
.map-legend-toggle strong { flex: 1; }
.map-legend-toggle:focus-visible {
  outline: 2px solid #2375B9;
  outline-offset: 3px;
  border-radius: 6px;
}
.map-legend-toggle .map-legend-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: #2375B9;
  font-size: 18px;
}
.map-legend-chevron {
  color: #64748B;
  font-size: 18px;
  transition: transform 0.25s ease;
}
.map-legend-items {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E8EDF3;
  max-height: 390px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease,
              margin-top 0.25s ease, padding-top 0.25s ease;
}

/* Saat ditutup: tinggal tombol kotak kecil untuk membuka lagi. */
.map-legend.is-collapsed {
  width: 46px;
  padding: 0;
  border-radius: 13px;
}
.map-legend.is-collapsed .map-legend-toggle {
  width: 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
}
.map-legend.is-collapsed .map-legend-toggle strong,
.map-legend.is-collapsed .map-legend-chevron {
  display: none;
}
.map-legend.is-collapsed .map-legend-items {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Ikut bergeser saat panel dashboard kanan dibuka. */
.map-wrapper.dashboard-open .map-legend {
  right: 348px; /* 330px lebar dashboard + 18px jarak */
}

/* Ikut naik saat panel detail bangunan tampil. */
body:has(.detail-panel.active) .map-legend {
  bottom: calc(25vh + 18px);
}

@media (max-width: 800px) {
  .map-legend { right: 10px; bottom: 34px; }
  /* Dashboard menutupi area peta pada layar sempit. */
  .map-wrapper.dashboard-open .map-legend {
    right: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-legend, .map-legend-items, .map-legend-chevron { transition: none; }
}

/* ============================================================
   GITA SIKKA — MARKER CLUSTERING
   Tambahkan di BAGIAN PALING BAWAH style.css lama.
   Tidak mengganti CSS marker individual atau legenda dinamis.
   ============================================================ */

/* Cluster otomatis muncul hanya saat beberapa titik berdekatan. */
.gita-cluster {
  background: transparent;
  border: 0;
}

.gita-cluster__bubble {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 4px solid rgba(215, 235, 248, 0.94);
  box-shadow: 0 3px 12px rgba(12, 46, 75, 0.22);
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gita-cluster--kecil .gita-cluster__bubble {
  background: #2375B9;
}

.gita-cluster--sedang .gita-cluster__bubble {
  background: #0A568B;
  font-size: 15px;
}

.gita-cluster--besar .gita-cluster__bubble {
  background: #073B77;
  font-size: 16px;
}

.gita-cluster:hover .gita-cluster__bubble {
  transform: scale(1.08);
  box-shadow: 0 5px 16px rgba(12, 46, 75, 0.34);
}

.gita-cluster:focus-visible {
  outline: 2px solid #FFBF00;
  outline-offset: 4px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .gita-cluster__bubble { transition: none; }
}

/* GITA SIKKA — Popup Foto 16:9 & Lightbox
   Tempel di PALING BAWAH style.css lama. */
   .gita-leaflet-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 17px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 38px rgba(10, 31, 56, .23);
  }
  .gita-leaflet-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
    font: 13px/1.45 Arial, sans-serif;
  }
  .gita-leaflet-popup .leaflet-popup-close-button {
    z-index: 5;
    width: 28px;
    height: 28px;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #42546a;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }
  .gita-popup { color: #1b2a41; }
  .gita-popup__media {
    appearance: none;
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: #eef3f7;
  }
  .gita-popup__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .gita-popup__expand {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(7,59,119,.82);
    color: white;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 19px;
  }
  .gita-popup__body { padding: 15px; }
  .gita-popup__title {
    margin: 0 28px 13px 0;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 750;
    color: #073b77;
  }
  .gita-popup__section {
    padding: 12px;
    border: 1px solid #e3eaf4;
    border-radius: 12px;
    margin-bottom: 11px;
  }
  .gita-popup__section--data { background: #f4f7fd; }
  .gita-popup__section--izin { background: #fffaf1; border-color: #f5ead5; }
  .gita-popup__section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #073b77;
    margin: 0 0 7px;
    font-size: 14px;
    font-weight: 700;
  }
  .gita-popup__symbol {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
    background: #e1e9ff;
    color: #073b77;
  }
  .gita-popup__section--izin .gita-popup__symbol { background: #ffedc3; color: #9d6b00; }
  .gita-popup__row {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 8px 0;
    border-top: 1px solid rgba(83, 102, 123, .11);
    font-size: 12px;
  }
  .gita-popup__row > span { color: #64748b; }
  .gita-popup__row > strong { font-weight: 600; overflow-wrap: anywhere; }
  .gita-popup__row > div { min-width: 0; }
  .gita-popup__chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .gita-popup__chip {
    background: #e5eaff;
    color: #073b77;
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 8px;
    font-size: 11px;
  }
  .gita-popup__row .status-badge {
    white-space: normal;
    display: inline-flex;
    max-width: 100%;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
    font-size: 11px;
    padding: 5px 9px;
  }
  .gita-popup__detail {
    width: 100%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    padding: 11px;
    font-size: 13px;
  }
  .gita-popup__detail > span { font-size: 17px; }
  .gita-popup__media:focus-visible,
  .gita-popup__detail:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
  /* Dialog foto ukuran besar di atas map, bukan di dalam popup. */
  .gita-lightbox {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(95vw, 1000px);
    max-width: 95vw;
    max-height: 94vh;
    padding: 12px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,.32);
    overflow: auto;
  }
  .gita-lightbox::backdrop { background: rgba(5,15,28,.83); }
  .gita-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 9px;
  }
  .gita-lightbox__caption { margin: 10px 4px 0; color: #073b77; font-weight: 700; }
  .gita-lightbox__close {
    position: sticky;
    top: 0;
    float: right;
    border: 0;
    background: #073b77;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    z-index: 1;
  }
  @media (max-width: 600px) {
    .gita-popup__media { aspect-ratio: 2 / 1; }
    .gita-popup__body { padding: 11px; }
    .gita-popup__section { padding: 9px; }
    .gita-popup__row { grid-template-columns: 86px minmax(0,1fr); gap: 6px; }
    .gita-popup__title { font-size: 17px; }
  }
  
  /* ======================================================
   GITA SIKKA — FIX POPUP TERLALU SEMPIT
   Tempel di BARIS PALING BAWAH style.css
   Tidak perlu mengubah app.js, index.html, atau Supabase.
   ====================================================== */

/* Kunci lebar popup agar layout dua kolom tidak menyusut. */
.gita-leaflet-popup .leaflet-popup-content {
  width: min(380px, calc(100vw - 64px)) !important;
  max-width: calc(100vw - 64px) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

.gita-leaflet-popup .leaflet-popup-content-wrapper {
  max-width: calc(100vw - 44px);
}

/* Mencegah padding memperlebar komponen. */
.gita-popup,
.gita-popup * {
  box-sizing: border-box;
}
.gita-popup {
  width: 100%;
  min-width: 0;
}

/* Banner mengikuti ukuran popup dan tetap 16:9. */
.gita-popup__media {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.gita-popup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Label dan nilai seimbang. Jangan patah tiap huruf. */
.gita-popup__row {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
}
.gita-popup__row > strong,
.gita-popup__row > div {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.gita-popup__chips {
  min-width: 0;
  flex-wrap: wrap;
}

/* Hilangkan scrollbar horizontal yang tidak perlu. */
.gita-leaflet-popup .leaflet-popup-scrolled {
  overflow-x: hidden !important;
}

/* Pada HP sempit, label ditempatkan di atas nilai. */
@media (max-width: 440px) {
  .gita-leaflet-popup .leaflet-popup-content {
    width: min(350px, calc(100vw - 64px)) !important;
  }
  .gita-popup__body {
    padding: 12px;
  }
  .gita-popup__section {
    padding: 10px;
  }
  .gita-popup__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .gita-popup__row > strong,
  .gita-popup__row > div {
    width: 100%;
  }
}

/* ===============================================================
   GITA SIKKA | POPUP COMPACT BALANCED (v1)
   Tempel di bagian PALING BAWAH style.css, setelah file FIX popup
   sebelumnya. Tidak perlu mengubah app.js atau index.html.
   =============================================================== */

/* Banner dipangkas secara proporsional (crop), foto TIDAK diregangkan.
   Pada lebar popup 380px, tinggi 168px menghasilkan panorama ringkas.
   Foto sumber tetap boleh disimpan berasio 16:9. */
   .gita-leaflet-popup .gita-popup__media {
    width: 100%;
    height: 168px;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .gita-leaflet-popup .gita-popup__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
  }
  
  /* Ruang kosong popup lebih efisien tanpa mengorbankan keterbacaan. */
  .gita-leaflet-popup .gita-popup__body {
    padding: 11px 13px 12px;
  }
  .gita-leaflet-popup .gita-popup__title {
    margin: 0 28px 9px 0;
    font-size: 19px;
    line-height: 1.3;
  }
  .gita-leaflet-popup .gita-popup__section {
    padding: 10px 11px;
    margin-bottom: 8px;
    border-radius: 11px;
  }
  .gita-leaflet-popup .gita-popup__section-heading {
    margin-bottom: 5px;
    gap: 7px;
    font-size: 13px;
  }
  .gita-leaflet-popup .gita-popup__symbol {
    width: 23px;
    height: 23px;
    font-size: 16px;
    flex: 0 0 23px;
  }
  .gita-leaflet-popup .gita-popup__row {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.4;
  }
  .gita-leaflet-popup .gita-popup__row > strong,
  .gita-leaflet-popup .gita-popup__row > div {
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .gita-leaflet-popup .gita-popup__chip {
    padding: 3px 8px;
    font-size: 11px;
  }
  .gita-leaflet-popup .gita-popup__row .status-badge {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: break-word;
  }
  .gita-leaflet-popup .gita-popup__detail {
    margin-top: 1px;
    padding: 9px 11px;
    border-radius: 9px;
  }
  
  /* Scroll vertikal boleh bila layar pendek; horizontal dihilangkan. */
  .gita-leaflet-popup .leaflet-popup-scrolled {
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: #b7c3cf transparent;
  }
  .gita-leaflet-popup .leaflet-popup-scrolled::-webkit-scrollbar {
    width: 5px;
  }
  .gita-leaflet-popup .leaflet-popup-scrolled::-webkit-scrollbar-thumb {
    background: #b7c3cf;
    border-radius: 999px;
  }
  .gita-leaflet-popup .leaflet-popup-scrolled::-webkit-scrollbar-track {
    background: transparent;
  }
  
  /* Mobile: tinggi foto makin hemat, layout satu kolom dari FIX lama
     tetap dipertahankan agar alamat panjang tidak pecah per huruf. */
  @media (max-width: 600px) {
    .gita-leaflet-popup .gita-popup__media { height: 138px; aspect-ratio: auto; }
    .gita-leaflet-popup .gita-popup__body { padding: 10px 11px; }
    .gita-leaflet-popup .gita-popup__section { padding: 9px; margin-bottom: 7px; }
    .gita-leaflet-popup .gita-popup__row { padding: 5px 0; }
    .gita-leaflet-popup .gita-popup__title { font-size: 17px; margin-bottom: 8px; }
  }
  @media (max-width: 440px) {
    .gita-leaflet-popup .gita-popup__media { height: 125px; }
    .gita-leaflet-popup .gita-popup__row {
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
    }
  }
  
  /* GITA SIKKA — TEMPel DI AKHIR style.css */
.gita-export {
  margin-top: 20px;
  padding: 16px 0 6px;
  border-top: 1px solid #e4eaf2;
}
.gita-export__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #107707;
  font-size: 14px;
  margin-bottom: 12px;
}
.gita-export__heading-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  background: #e9f2ff;
  color: #2375b9;
  border-radius: 9px;
  font-size: 19px;
  font-weight: 700;
}
.gita-export__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.gita-export__btn {
  min-height: 40px;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.gita-export__btn--csv {
  background: #fff;
  color: #073b77;
  border: 1px solid #cbd8e6;
}
.gita-export__btn--excel {
  background: #01660b;
  color: #fff;
  border: 1px solid #073b77;
}
.gita-export__btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(7,59,119,.14);
}
.gita-export__btn:disabled { opacity: .5; cursor: not-allowed; }
.gita-export__btn:focus-visible { outline: 2px solid #ffbf00; outline-offset: 2px; }
.gita-export__desc {
  font-size: 11px;
  color: #667085;
  line-height: 1.55;
  margin: 11px 0 5px;
}
.gita-export__info {
  font-size: 11px;
  color: #168466;
  line-height: 1.4;
  min-height: 15px;
  margin: 0;
}
.gita-export__info.is-error { color: #b42318; }
@media (prefers-reduced-motion: reduce) {
  .gita-export__btn { transition: none; }
}
/* ============================================================
   GITA SIKKA — Export Dropdown pada Toolbar (v2)
   Tempel di PALING BAWAH style.css.
   Tidak perlu menghapus CSS export v1 yang sudah ada.
   ============================================================ */

   .gita-export-toolbar {
    position: relative;
    flex: 0 0 auto;
    z-index: 1350;
  }
  
  .gita-export-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #fddb00;
    border-radius: 12px;
    background: #e6d300;
    color: #141414;
    font: 600 14px Arial, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
    transition: border-color .2s, background .2s, box-shadow .2s;
  }
  .gita-export-trigger:hover,
  .gita-export-toolbar.is-open .gita-export-trigger {
    background: #e6d300;
    border-color: #ffffff;
  }
  .gita-export-trigger:focus-visible,
  .gita-export-option:focus-visible {
    outline: 2px solid #ffbf00;
    outline-offset: 2px;
  }
  .gita-export-chevron { transition: transform .2s ease; }
  .gita-export-toolbar.is-open .gita-export-chevron { transform: rotate(180deg); }
  
  .gita-export-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    width: 248px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(7, 59, 119, .18);
    z-index: 1400;
  }
  .gita-export-dropdown[hidden] { display: none !important; }
  .gita-export-dropdown__title {
    padding: 8px 10px 10px;
    font: 700 13px Arial, sans-serif;
    color: #073b77;
  }
  .gita-export-option {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #19334d;
    text-align: left;
    cursor: pointer;
    font: 400 13px Arial, sans-serif;
  }
  .gita-export-option:not(:disabled):hover { background: #f1f6fd; }
  .gita-export-option:disabled { cursor: not-allowed; opacity: .43; }
  .gita-export-option__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    height: 36px;
    border-radius: 9px;
    background: #e9f2ff;
    color: #2375b9;
    font: 700 11px Arial, sans-serif;
  }
  .gita-export-option__icon--excel {
    background: #e4f5ec;
    color: #168466;
  }
  .gita-export-option__text { display: grid; gap: 3px; }
  .gita-export-option__text strong { font-size: 13px; }
  .gita-export-option__text small { color: #667085; font-size: 11px; }
  .gita-export-dropdown__footer {
    display: grid;
    gap: 4px;
    margin-top: 6px;
    padding: 10px 9px 5px;
    border-top: 1px solid #e6edf5;
    font: 400 11px/1.45 Arial, sans-serif;
    color: #168466;
  }
  .gita-export-dropdown__footer small { color: #667085; font-size: 10px; }
  #gitaExportInfo.is-error { color: #b42318; }
  
  @media (max-width: 600px) {
    .gita-export-trigger { padding: 0 11px; gap: 6px; }
    .gita-export-dropdown { width: 230px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gita-export-trigger, .gita-export-chevron { transition: none; }
  }
  

  /* ============================================================
   GITA SIKKA — DASHBOARD COMPACT v2
   Tempel di BAGIAN PALING BAWAH style.css
   Setelah CSS dashboard, popup, dan export yang sudah terpasang.
   ============================================================ */

/* Sidebar sedikit lebih lebar agar progress dan badge tetap nyaman. */
.dashboard-panel {
  width: 380px;
  padding: 22px 20px 26px;
}
.map-wrapper.dashboard-open .dashboard-handle {
  right: 380px;
}
.map-wrapper.dashboard-open .map-legend {
  right: 398px;
}
.dashboard-header { margin-bottom: 15px; }
.dashboard-header h3 { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.dashboard-header span { font-size: 13px; }

/* Filter aktif: chip teks aman panjang, tidak memaksa panel melebar */
.gita-dash-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 17px;
  min-width: 0;
}
.gita-dash-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #2375B9;
  font-size: 21px;
  font-weight: 700;
}
.gita-dash-filter-label { color: #64748B; font-size: 11px; }
.gita-dash-filter-chip {
  max-width: 100%;
  background: #EAF1FA;
  border: 1px solid #DCE8F4;
  color: #073B77;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.gita-dash-filter-chip--all { background: #F3F6FA; color: #53667B; font-weight: 500; }

/* Dua indikator utama: TANPA kotak KPI */
.gita-dash-overview { display: grid; gap: 8px; margin: 0 0 17px; }
.gita-dash-overview__row {
  display: grid;
  grid-template-columns: 26px auto minmax(0,1fr);
  align-items: center;
  justify-content: start;
  column-gap: 9px;
  min-height: 37px;
}
.gita-dash-overview__icon { display: flex; width: 24px; height: 24px; color: #073B77; }
.gita-dash-overview__icon svg { width: 24px; height: 24px; }
.gita-dash-overview__row strong {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 800;
  color: #073B77;
  font-variant-numeric: tabular-nums;
}
.gita-dash-overview__row > span:last-child {
  color: #53667B;
  font-size: 13px;
  line-height: 1.3;
}

/* Empat KPI sederhana 2x2 */
.gita-dash-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
  margin: 0 0 21px;
}
.gita-dash-mini-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 75px;
  padding: 11px 13px;
  background: #F7F9FC;
  border: 1px solid #E9EEF5;
  border-radius: 12px;
}
.gita-dash-mini-kpi span { font-size: 11px; color: #64748B; margin-bottom: 4px; }
.gita-dash-mini-kpi strong {
  color: #073B77;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Progress bar hanya untuk kategori fungsi yang ada pada data terfilter */
.gita-dash-fungsi {
  padding: 14px;
  border: 1px solid #EDF0F4;
  border-radius: 14px;
  margin: 0 0 13px;
  background: #FFFFFF;
}
.gita-dash-fungsi__head { display:flex; justify-content:space-between; align-items: baseline; gap:7px; margin-bottom:14px; }
.gita-dash-fungsi__head strong { color: #344054; font-size: 14px; }
.gita-dash-fungsi__head span { color: #94A3B8; font-size: 10px; white-space: nowrap; }
.gita-dash-fungsi__list { display: grid; gap: 12px; }
.gita-dash-fungsi__item { min-width: 0; }
.gita-dash-fungsi__item-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom: 6px;
}
.gita-dash-fungsi__item-head span { font-size: 12px; color: #53667B; overflow-wrap: anywhere; }
.gita-dash-fungsi__item-head strong { font-size: 12px; color: #073B77; font-variant-numeric:tabular-nums; }
.gita-dash-fungsi__track {
  width: 100%;
  height: 7px;
  background: #EDF1F5;
  border-radius: 99px;
  overflow: hidden;
}
.gita-dash-fungsi__fill { height:100%; border-radius: 99px; transition: width .25s ease; }
.gita-dash-fungsi__note { margin: 12px 0 0; color: #7B8797; font-size: 10px; line-height: 1.4; }
.gita-dash-fungsi__note[hidden] { display: none; }
.gita-dash-empty { margin: 3px 0; color: #64748B; font-size: 12px; line-height: 1.5; }

/* Doughnut tetap pakai Chart.js bawaan */
.dashboard-chart-card.gita-dash-v2-chart { margin-top: 0; padding: 14px; border-radius:14px; }
.dashboard-chart-card.gita-dash-v2-chart .chart-title { font-weight: 700; margin-bottom: 8px; }
.dashboard-chart-card.gita-dash-v2-chart .chart-wrapper { height: 200px; }

/* Pada layar sempit, panel tetap bisa dibuka tanpa keluar viewport. */
@media (max-width: 900px) {
  .dashboard-panel { width: min(380px, calc(100vw - 44px)); }
  .map-wrapper.dashboard-open .dashboard-handle { right: min(380px, calc(100vw - 44px)); }
  .map-wrapper.dashboard-open .map-legend { opacity:0; visibility:hidden; pointer-events:none; }
}
@media (max-width: 440px) {
  .dashboard-panel { padding: 16px 14px 22px; }
  .dashboard-header h3 { font-size: 20px; }
  .gita-dash-fungsi { padding: 12px; }
  .gita-dash-overview__row > span:last-child { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gita-dash-fungsi__fill { transition: none; }
}

/* GITA SIKKA — Logo kucing & pill pada legenda saat ditutup.
   Tempel DI AKHIR style.css, setelah CSS legenda lama. */

/* Ikon brand juga terlihat pada header legenda saat dibuka. */
.map-legend .map-legend-heading-icon.gita-legend-brand {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.map-legend .gita-legend-brand img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

/* Label singkat dipakai hanya ketika legenda dilipat. */
.map-legend .gita-legend-collapsed-text {
  display: none;
}

/* Override tombol kotak 46px dari CSS legenda lama. */
.map-legend.is-collapsed {
  width: 139px;
  max-width: calc(100% - 24px);
  min-height: 46px;
  padding: 0 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 208, 0, 0.98);
  border: 1px solid rgba(255, 208, 0, 0.95);
  box-shadow: 0 5px 18px rgba(15, 34, 58, .17);
}
.map-legend.is-collapsed .map-legend-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 44px;
  padding: 0;
  gap: 10px;
  border-radius: 999px;
  cursor: pointer;
}
.map-legend.is-collapsed .gita-legend-collapsed-text {
  display: inline;
  color: #191919;
  font: 700 13px/1.2 Arial, sans-serif;
  white-space: nowrap;
}
/* Pastikan judul dinamis untuk mode marker tetap tersembunyi saat dilipat. */
.map-legend.is-collapsed #legendTitle,
.map-legend.is-collapsed .map-legend-chevron {
  display: none;
}
.map-legend.is-collapsed:hover {
  box-shadow: 0 7px 22px rgba(15, 34, 58, .23);
  border-color: #b6cee6;
}
.map-legend .map-legend-toggle:focus-visible {
  outline: 2px solid #101010;
  outline-offset: -2px;
}

@media (max-width: 800px) {
  .map-legend.is-collapsed {
    width: 139px;
    min-height: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-legend { transition: none; }
}

/* ================================================================
   GITA SIKKA — RESPONSIVE MOBILE v1
   Salin bagian ini ke BARIS PALING BAWAH style.css.
   Dipasang setelah CSS popup compact, dashboard v2, export dan logo.
   Desktop (>768px) dipertahankan tanpa perubahan tata letak.
   ================================================================ */

/* Komponen add-on sembunyi di desktop. */
.gita-mobile-backdrop,
.gita-mobile-dashboard-button,
.gita-mobile-status,
.gita-mobile-search-button,
.gita-mobile-sheet-close,
.gita-mobile-popup-sheet { display: none; }

@media (max-width: 768px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body { min-height: 0; height: 100vh; height: 100dvh; }

  /* Header compact, tanpa navbar palsu. */
  header {
    flex: 0 0 auto;
    min-height: 59px;
    height: auto;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #e9eef4;
  }
  header h1 { font-size: 23px; line-height: 1.1; }
  header span { display: block; margin-top: 3px; font-size: 11px; }

  /* Status asli tetap ada untuk JS, namun teks pada peta lebih hemat ruang. */
  #status { display: none; }
  .map-wrapper {
    flex: 1 1 auto;
    width: 100%; min-width: 0; min-height: 0;
    position: relative; overflow: hidden;
  }
  #map { width: 100% !important; height: 100% !important; }

  /* Toolbar: Filter | Export | Mode marker | Search. */
  .map-toolbar,
  .map-wrapper.sidebar-open .map-toolbar {
    position: absolute;
    top: 10px;
    left: 10px !important;
    right: 10px;
    z-index: 1300;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    width: auto;
    transition: none;
  }
  .map-toolbar > * { min-width: 0; }
  #filterToggle {
    flex: 0 0 auto;
    height: 41px;
    padding: 0 10px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 12px;
  }
  .gita-export-toolbar { flex: 0 0 auto; min-width: 0; }
  .gita-export-trigger {
    height: 41px;
    padding: 0 9px;
    gap: 5px;
    border-radius: 10px;
    font-size: 12px;
  }
  .gita-export-trigger svg:first-child { width: 15px; height: 15px; }
  .gita-export-dropdown {
    top: calc(100% + 8px);
    left: 0;
    width: min(255px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    z-index: 1700;
  }
  .marker-mode-box { flex: 1 1 0; min-width: 0; }
  .marker-mode-box select {
    display: block;
    width: 100%;
    height: 41px;
    min-width: 0;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gita-mobile-search-button {
    display: grid;
    place-items: center;
    flex: 0 0 41px;
    width: 41px;
    height: 41px;
    border: 1px solid #d9e3ee;
    border-radius: 10px;
    background: #ffffff;
    color: #073b77;
    box-shadow: 0 3px 11px rgba(7, 59, 119, .12);
    cursor: pointer;
  }
  .map-toolbar .search-box { display: none; }
  .map-toolbar.gita-mobile-search-open .search-box {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1301;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .map-toolbar .search-box input {
    display: block;
    height: 43px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #dce7f0;
    font-size: 13px;
    box-shadow: 0 4px 19px rgba(7, 59, 119, .15);
  }
  /* Zoom dan basemap tidak bertabrakan dengan toolbar atas. */
  #map .leaflet-top.leaflet-right { top: 61px; right: 8px; }
  #map .leaflet-control-layers-expanded {
    max-height: 54dvh;
    overflow-y: auto;
    max-width: calc(100vw - 25px);
  }
  #map .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 34px; }

  /* Status kecil di atas tombol Legenda. */
  .gita-mobile-status {
    position: absolute;
    display: block;
    left: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 1220;
    max-width: min(75vw, 260px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, .98);
    color: #073b77;
    box-shadow: 0 4px 14px rgba(7, 59, 119, .13);
  }

  /* Legenda: pill brand kuning-hitam yang sudah dimodifikasi pengguna. */
  .map-legend,
  .map-wrapper.dashboard-open .map-legend,
  .map-wrapper.sidebar-open .map-legend {
    position: absolute;
    left: 12px !important;
    right: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1230;
    max-width: calc(100vw - 24px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .map-legend.is-collapsed { width: 139px; min-height: 46px; }
  .map-legend:not(.is-collapsed) {
    width: min(340px, calc(100vw - 24px));
    padding: 13px;
    border-radius: 17px;
  }
  .map-legend:not(.is-collapsed) .map-legend-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
    row-gap: 11px;
    max-height: min(52dvh, 390px);
    overflow-y: auto;
    padding-bottom: 1px;
  }
  .map-legend:not(.is-collapsed) .map-legend-item { min-width: 0; gap: 6px; }
  .map-legend:not(.is-collapsed) .map-legend-symbol { flex-basis: 23px; width: 23px; height: 23px; }
  .map-legend:not(.is-collapsed) .map-legend-label { font-size: 11px; overflow-wrap: break-word; }

  /* Floating trigger dashboard, hanya HP/tablet. */
  .dashboard-handle { display: none !important; }
  .gita-mobile-dashboard-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: absolute;
    z-index: 1260;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: #073b77;
    box-shadow: 0 5px 17px rgba(7, 59, 119, .22);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .gita-mobile-dashboard-button svg { flex: 0 0 18px; }

  /* Backdrop diletakkan di atas peta, di bawah semua bottom-sheet. */
  .gita-mobile-backdrop:not([hidden]) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1780;
    background: rgba(10, 26, 44, .34);
    border: 0;
    padding: 0;
    cursor: default;
  }
  .gita-mobile-backdrop[hidden] { display: none !important; }

  /* Bottom sheets yang memakai elemen asli: data/filter tidak diduplikasi. */
  .filter-sidebar,
  .dashboard-panel {
    position: absolute;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100% - 8px);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 32px rgba(11, 36, 63, .2);
    background: #ffffff;
    z-index: 1800;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(108%) !important;
    transition: transform .28s cubic-bezier(.2, .85, .2, 1) !important;
  }
  .filter-sidebar {
    height: min(81dvh, 690px);
    padding: 27px 17px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .dashboard-panel {
    height: min(87dvh, 800px);
    padding: 29px 17px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .filter-sidebar::before,
  .dashboard-panel::before {
    content: "";
    position: absolute;
    top: 10px;
    left: calc(50% - 19px);
    width: 38px;
    height: 4px;
    background: #c7d3e0;
    border-radius: 999px;
  }
  .filter-sidebar.active,
  .dashboard-panel.active { transform: translateY(0) !important; }
  .filter-actions {
    position: sticky;
    bottom: -16px;
    padding: 12px 0 max(5px, env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    z-index: 1;
  }
  .filter-header { margin-bottom: 18px; }
  .filter-group { margin-bottom: 15px; }
  .filter-group select { min-height: 43px; font-size: 13px; }
  .dashboard-header {
    position: relative;
    display: block;
    padding-right: 39px;
  }
  .dashboard-header > span { display: block; margin-top: 3px; }
  .dashboard-header h3 { font-size: 21px; }
  .gita-mobile-sheet-close {
    position: absolute;
    right: 0;
    top: -4px;
    display: grid;
    place-items: center;
    height: 35px;
    width: 35px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #53667b;
    font-size: 26px;
    cursor: pointer;
  }
  .dashboard-chart-card.gita-dash-v2-chart .chart-wrapper { height: 205px; }
  .gita-dash-fungsi__list { gap: 12px; }
  .gita-dash-mini-grid { gap: 8px; }

  /* Leaflet popup tetap menjalankan events aslinya, tapi visual mobile
     ditampilkan sebagai salinan pada bottom sheet, bukan popup kecil di marker. */
  .map-wrapper.gita-mobile-popup-open .gita-leaflet-popup {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .gita-mobile-popup-sheet {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1820;
    width: 100%;
    max-height: min(86dvh, calc(100% - 10px));
    padding-top: 17px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border-radius: 22px 22px 0 0;
    background: #ffffff;
    box-shadow: 0 -8px 32px rgba(11, 36, 63, .23);
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .29s ease, visibility .29s ease;
    -webkit-overflow-scrolling: touch;
  }
  .gita-mobile-popup-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .gita-mobile-sheet-grab {
    position: absolute;
    top: 8px;
    left: calc(50% - 19px);
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #c7d3e0;
  }
  .gita-mobile-popup-close {
    position: absolute;
    top: 22px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50%;
    font-size: 25px;
    background: rgba(255,255,255,.97);
    color: #53667b;
    box-shadow: 0 2px 12px rgba(7,59,119,.12);
    cursor: pointer;
  }
  .gita-mobile-popup-content { padding-bottom: calc(17px + env(safe-area-inset-bottom,0px)); }
  .gita-mobile-popup-content .gita-popup__media { height: 160px; aspect-ratio: auto; }
  .gita-mobile-popup-content .gita-popup__media img { height: 100%; width:100%; object-fit:cover; }
  .gita-mobile-popup-content .gita-popup__body { padding: 12px 16px 0; }
  .gita-mobile-popup-content .gita-popup__title { font-size: 19px; margin-bottom: 11px; padding-right: 28px; }
  .gita-mobile-popup-content .gita-popup__section { padding: 11px; margin-bottom: 9px; }
  .gita-mobile-popup-content .gita-popup__row {
    display: grid;
    grid-template-columns: minmax(90px, 36%) minmax(0, 1fr);
    gap: 9px;
    padding: 7px 0;
    font-size: 12px;
  }
  .gita-mobile-popup-content .gita-popup__row > strong { overflow-wrap: break-word; word-break: normal; }
  .gita-mobile-popup-content .gita-popup__detail { margin-top: 4px; }

  /* Lihat Selengkapnya = detail panel existing, dibuka sebagai sheet juga. */
  .detail-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: min(83dvh, 720px);
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    z-index: 2000;
    transform: translateY(105%);
    overflow: hidden;
  }
  .detail-panel.active { transform: translateY(0); }
  .detail-header { padding: 11px 16px; min-height: 62px; height: 62px; }
  .detail-content {
    height: calc(100% - 62px);
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom,0px));
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Tabel detail boleh digeser horizontal, tanpa memotong kolom. */
  .detail-table { min-width: 450px; }

  .gita-lightbox { width: 96vw; max-width: 96vw; max-height: 90dvh; padding: 8px; }
  .gita-lightbox__image { max-height: 73dvh; }

  /* Jangan biarkan floating controls menimpa sheet ketika dibuka. */
  body.gita-mobile-panel-open .map-legend,
  body.gita-mobile-panel-open .gita-mobile-dashboard-button,
  body.gita-mobile-panel-open .gita-mobile-status {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Interaksi aksesibel untuk sentuhan dan keyboard. */
  .gita-mobile-dashboard-button,
  .gita-mobile-search-button,
  .gita-mobile-sheet-close,
  .gita-mobile-popup-close { touch-action: manipulation; }
  .gita-mobile-dashboard-button:focus-visible,
  .gita-mobile-search-button:focus-visible,
  .gita-mobile-sheet-close:focus-visible,
  .gita-mobile-popup-close:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
}

@media (max-width: 360px) {
  .map-toolbar { gap: 5px; left: 8px !important; right: 8px; }
  #filterToggle { padding: 0 8px; }
  .gita-export-trigger { padding: 0 8px; }
  .gita-export-trigger > span { display: none; }
  .marker-mode-box select { padding: 0 5px; font-size: 10px; }
  .gita-mobile-search-button { flex-basis: 39px; width: 39px; }
  .gita-mobile-popup-content .gita-popup__row { grid-template-columns: minmax(0,1fr); gap: 4px; }
}

@media (max-width: 768px) and (max-height: 550px) {
  header { padding: 6px 12px; min-height: 50px; }
  header h1 { font-size: 20px; }
  .map-toolbar { top: 6px; }
  .filter-sidebar, .dashboard-panel, .gita-mobile-popup-sheet { max-height: 94%; }
  .gita-mobile-popup-content .gita-popup__media { height: 95px; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-sidebar, .dashboard-panel, .detail-panel,
  .gita-mobile-popup-sheet { transition: none !important; }
}

/* GITA SIKKA - Mobile floating popup v2
   Tempel di PALING BAWAH style.css setelah responsive mobile v1.
   Hanya untuk popup bangunan; filter/dashboard tetap bottom sheet. */
   @media (max-width: 768px) {
    /* Menampilkan popup asli Leaflet di dekat marker. */
    .map-wrapper .gita-leaflet-popup {
      visibility: visible !important;
      pointer-events: auto !important;
    }
    .map-wrapper .gita-leaflet-popup .leaflet-popup-content-wrapper {
      max-width: calc(100vw - 36px);
      border-radius: 16px;
      overflow: hidden;
    }
    .map-wrapper .gita-leaflet-popup .leaflet-popup-content {
      width: min(340px, calc(100vw - 64px)) !important;
      max-width: calc(100vw - 64px) !important;
      max-height: min(61dvh, 490px) !important;
      margin: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .map-wrapper .gita-leaflet-popup .gita-popup__media {
      height: 128px !important;
      aspect-ratio: auto !important;
    }
    .map-wrapper .gita-leaflet-popup .gita-popup__media img {
      width: 100%; height: 100%; object-fit: cover;
    }
    /* Tidak ada salinan bottom sheet popup. */
    .gita-mobile-popup-sheet { display: none !important; }
    /* Kontrol mengambang disembunyikan sementara agar tak menutupi popup. */
    .map-wrapper.gita-mobile-floating-popup-open .map-legend,
    .map-wrapper.gita-mobile-floating-popup-open .gita-mobile-dashboard-button,
    .map-wrapper.gita-mobile-floating-popup-open .gita-mobile-status {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }
  @media (max-width: 768px) and (max-height: 600px) {
    .map-wrapper .gita-leaflet-popup .leaflet-popup-content {
      max-height: 50dvh !important;
    }
    .map-wrapper .gita-leaflet-popup .gita-popup__media {
      height: 100px !important;
    }
  }
  
  /* =============================================================
   GITA SIKKA — MOBILE FLOATING POPUP COMPACT v3
   Tempel PALING BAWAH style.css, setelah CSS Mobile Popup v2.
   Tidak mengubah tampilan desktop atau fungsi popup/JS.
   ============================================================= */
@media (max-width: 768px) {
  /* Ukuran popup lebih kecil, tetap dekat marker asli Leaflet. */
  .map-wrapper .gita-leaflet-popup .leaflet-popup-content-wrapper {
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .map-wrapper .gita-leaflet-popup .leaflet-popup-content {
    width: min(278px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    max-height: min(47dvh, 350px) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Jaga konten tak melebar / teks tak terpotong. */
  .map-wrapper .gita-leaflet-popup .gita-popup,
  .map-wrapper .gita-leaflet-popup .gita-popup * {
    box-sizing: border-box;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__body {
    padding: 9px 10px 10px !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__title {
    margin: 0 25px 7px 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__media {
    height: 94px !important;
    aspect-ratio: auto !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Dua kolom ringkas untuk label + nilai; mengurangi tinggi total. */
  .map-wrapper .gita-leaflet-popup .gita-popup__section {
    margin-bottom: 6px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__section-heading {
    margin-bottom: 3px !important;
    gap: 5px !important;
    font-size: 12px !important;
    line-height: 1.3;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__symbol {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
    font-size: 13px !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__row {
    display: grid !important;
    grid-template-columns: 83px minmax(0, 1fr) !important;
    gap: 7px !important;
    align-items: start;
    padding: 4px 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__row > strong,
  .map-wrapper .gita-leaflet-popup .gita-popup__row > div {
    min-width: 0;
    width: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__chip,
  .map-wrapper .gita-leaflet-popup .gita-popup__row .status-badge {
    display: inline-block;
    max-width: 100%;
    font-size: 10px !important;
    line-height: 1.35 !important;
    padding: 3px 6px !important;
    white-space: normal !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__detail {
    margin-top: 3px !important;
    padding: 8px !important;
    font-size: 12px !important;
  }

  /* Zoom & basemap tidak menabrak popup ketika marker aktif.
     Begitu popup ditutup, kontrol otomatis tampil kembali. */
  .map-wrapper.gita-mobile-floating-popup-open #map .leaflet-control-zoom,
  .map-wrapper.gita-mobile-floating-popup-open #map .leaflet-control-layers {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Tombol X popup terlihat dan mudah disentuh. */
  .map-wrapper .gita-leaflet-popup .leaflet-popup-close-button {
    z-index: 5;
    top: 6px !important;
    right: 6px !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 24px !important;
    border-radius: 50%;
    color: #073b77 !important;
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 5px rgba(5,29,53,.13);
  }
}

/* Pada HP pendek: popup tidak menghabiskan area peta. */
@media (max-width: 768px) and (max-height: 650px) {
  .map-wrapper .gita-leaflet-popup .leaflet-popup-content {
    max-height: 42dvh !important;
  }
  .map-wrapper .gita-leaflet-popup .gita-popup__media {
    height: 78px !important;
  }
}

/* ============================================================
   GITA SIKKA — MOBILE NAVIGATION POLISH v4
   Tempel PALING AKHIR style.css (sesudah Popup Compact v3).
   Tidak memodifikasi tampilan desktop / Leaflet popup asli.
   ============================================================ */

/* Tombol Fokus Peta disembunyikan sepenuhnya pada desktop. */
.gita-mobile-focus-map { display: none; }

@media (max-width: 768px) {
  /* Toolbar kompak dan nyaman disentuh tanpa mengubah susunan tombol. */
  .map-wrapper .map-toolbar,
  .map-wrapper.sidebar-open .map-toolbar {
    top: 9px;
    left: 9px !important;
    right: 9px;
    gap: 6px;
    max-width: calc(100% - 18px);
  }
  .map-wrapper .map-toolbar #filterToggle,
  .map-wrapper .map-toolbar .gita-export-trigger,
  .map-wrapper .map-toolbar .marker-mode-box select,
  .map-wrapper .map-toolbar .gita-mobile-search-button {
    height: 43px;
    min-height: 43px;
    border-radius: 11px;
    touch-action: manipulation;
  }
  .map-wrapper .map-toolbar .marker-mode-box {
    flex: 1 1 0;
    min-width: 80px;
  }
  .map-wrapper .map-toolbar .marker-mode-box select {
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
  }
  .map-wrapper .map-toolbar .gita-mobile-search-button {
    flex: 0 0 43px;
    width: 43px;
    box-shadow: 0 3px 12px rgba(7, 59, 119, .11);
  }
  .map-wrapper .map-toolbar.gita-mobile-search-open .gita-mobile-search-button {
    color: #111c26;
    background: #ffbf00;
    border-color: #ffbf00;
  }

  /* Pencarian terbuka tepat di bawah toolbar; Leaflet control turun sedikit. */
  .map-wrapper .map-toolbar.gita-mobile-search-open .search-box {
    top: calc(100% + 7px);
  }
  .map-wrapper:has(.map-toolbar.gita-mobile-search-open) #map .leaflet-top.leaflet-right {
    top: 115px;
  }

  /* Satu kontrol cepat di kanan bawah: fokuskan sebaran marker terfilter. */
  .map-wrapper .gita-mobile-focus-map {
    position: absolute;
    right: 12px;
    bottom: calc(71px + env(safe-area-inset-bottom, 0px));
    z-index: 1255;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dce5ed;
    border-radius: 14px;
    background: #fff;
    color: #073b77;
    box-shadow: 0 5px 16px rgba(7,59,119,.15);
    cursor: pointer;
    touch-action: manipulation;
  }
  .map-wrapper .gita-mobile-focus-map:active {
    transform: scale(.96);
    background: #f4f8fc;
  }
  .map-wrapper .gita-mobile-focus-map:focus-visible {
    outline: 3px solid #ffbf00;
    outline-offset: 3px;
  }

  /* Hindari tombol mengambang menutup legenda terbuka, sheet, dan popup. */
  .map-wrapper.gita-mobile-legend-expanded .gita-mobile-focus-map,
  .map-wrapper.gita-mobile-floating-popup-open .gita-mobile-focus-map,
  body.gita-mobile-panel-open .gita-mobile-focus-map {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Status tetap di kiri, jangan beradu dengan tombol Fokus Peta. */
  .map-wrapper .gita-mobile-status {
    max-width: min(65vw, 238px);
    bottom: calc(77px + env(safe-area-inset-bottom, 0px));
  }

  /* Perjelas pilihan basemap tanpa menambah tombol. */
  #map .leaflet-top.leaflet-right {
    top: 62px;
    right: 9px;
  }
  #map .leaflet-control-zoom a {
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
}

@media (max-width: 390px) {
  .map-wrapper .map-toolbar .gita-export-chevron { display: none; }
  .map-wrapper .map-toolbar #filterToggle { padding-inline: 8px; }
  .map-wrapper .map-toolbar .gita-export-trigger { padding-inline: 8px; }
  .map-wrapper .map-toolbar .marker-mode-box select { font-size: 11px; padding-inline: 5px; }
}

@media (max-width: 350px) {
  .map-wrapper .map-toolbar { gap: 4px; }
  .map-wrapper .map-toolbar .gita-export-trigger > span { display: none; }
  .map-wrapper .map-toolbar .gita-mobile-search-button { flex-basis: 41px; width: 41px; }
}

@media (max-width: 768px) and (max-height: 600px) {
  .map-wrapper .gita-mobile-focus-map {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-wrapper .gita-mobile-focus-map { transition: none !important; }
}


/* =====================================
   GITA SIKKA — PAGE FADE TRANSITION
===================================== */

body {
  animation: gsPageEnter 0.45s ease-out;
  transition: opacity 0.28s ease-in-out;
}

/* Saat menuju halaman lain */
body.gs-page-leaving {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

/* Saat halaman baru terbuka */
@keyframes gsPageEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    transition: none;
  }
}

/* ============================================================
   GITA SIKKA — PERIODE PERMOHONAN & GRAFIK FUNGSI (2026)
   ============================================================ */
.gita-periode-toolbar { position: relative; flex: 0 0 auto; z-index: 1390; }
.gita-periode-trigger {
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 13px; border:1px solid #d8e3ef;
  border-radius:12px; background:#fff; color:#073b77;
  font:600 13px Arial,sans-serif; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,.13);
}
.gita-periode-trigger:hover, .gita-periode-toolbar.is-open .gita-periode-trigger { border-color:#2375b9; background:#f6faff; }
.gita-periode-trigger.is-active { background:#e8f7ee; border-color:#168466; color:#126b47; }
.gita-periode-trigger:focus-visible, .gita-periode-dropdown button:focus-visible { outline:3px solid #ffbf00; outline-offset:2px; }
.gita-periode-chevron { font-size:16px; line-height:1; }
.gita-periode-dropdown {
  position:absolute; top:calc(100% + 9px); right:0; width:290px;
  max-width:calc(100vw - 24px); padding:16px; z-index:1450;
  border:1px solid #dfe6f0; border-radius:15px; background:#fff;
  box-shadow:0 15px 36px rgba(7,59,119,.2);
  display:grid; gap:7px;
}
.gita-periode-dropdown[hidden] { display:none !important; }
.gita-periode-dropdown strong { font-size:14px; color:#073b77; margin-bottom:4px; }
.gita-periode-dropdown label { font-size:12px; font-weight:700; color:#344054; margin-top:5px; }
.gita-periode-dropdown input {
  width:100%; min-width:0; height:40px; padding:7px 10px;
  color:#18364e; background:white; border:1px solid #cfdbe8; border-radius:9px;
  font:13px Arial,sans-serif;
}
.gita-periode-dropdown small { color:#667085; font-size:11px; line-height:1.5; }
#periodeError { margin:0; color:#b42318; font-size:11px; line-height:1.4; }
#periodeError:empty { display:none; }
.gita-periode-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.gita-periode-actions button { height:39px; border-radius:8px; font-weight:700; font-size:12px; cursor:pointer; }
#periodeReset { background:#fff; color:#344054; border:1px solid #cfd7e0; }
#periodeTerapkan { background:#073b77; color:#fff; border:0; }
.gita-chart-subtitle { color:#667085; font-size:11px; line-height:1.4; margin: -4px 0 11px; }
.gita-chart-fungsi-wrapper { position:relative; width:100%; min-height:130px; height:170px; }
.gita-chart-fungsi-wrapper canvas { width:100% !important; height:100% !important; }
.gita-chart-fungsi-wrapper canvas[hidden] { display:none !important; }
#chartFungsiKosong { color:#667085; font-size:12px; margin:0; padding:20px 4px; text-align:center; }
#chartFungsiKosong[hidden] { display:none !important; }
.gita-export-option__icon--geojson { background:#e8f3ff; color:#2375b9; }
.gita-export-option__icon--kml { background:#f3edff; color:#7c3aed; }
.gita-export-option__icon--kmz { background:#fff3e5; color:#b45309; }
@media (max-width: 1200px) and (min-width:769px) {
  .gita-periode-trigger { padding:0 10px; font-size:12px; }
  .gita-periode-trigger #periodeLabel { max-width:125px; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:768px) {
  .map-wrapper .map-toolbar .gita-periode-toolbar { flex:0 0 43px; min-width:0; }
  .map-wrapper .map-toolbar .gita-periode-trigger {
    width:43px; height:43px; min-height:43px; padding:0;
    border-radius:11px; touch-action:manipulation;
  }
  .map-wrapper .map-toolbar .gita-periode-trigger #periodeLabel,
  .map-wrapper .map-toolbar .gita-periode-chevron { display:none; }
  .map-wrapper .map-toolbar .gita-periode-dropdown {
    position:absolute; width:min(290px,calc(100vw - 24px));
    right:0; left:auto; top:calc(100% + 8px); z-index:1700;
  }
  .map-wrapper .map-toolbar .marker-mode-box { min-width:65px; }
}
@media (max-width:350px) {
  .map-wrapper .map-toolbar .gita-periode-toolbar { flex-basis:40px; }
  .map-wrapper .map-toolbar .gita-periode-trigger { width:40px; }
}


/* Layer administrasi sementara: tooltip nama kecamatan */
.gita-tooltip-kecamatan {
  color: #073B77;
  font-weight: 600;
  border: 1px solid #D7E8F7;
  border-radius: 8px;
  padding: 5px 9px;
  box-shadow: 0 4px 12px rgba(7, 59, 119, 0.13);
}


/* =========================================================
   GITA SIKKA — HEATMAP QUICK TOGGLE
   Tombol di kanan search bar; tersinkron dengan filter peta.
   ========================================================= */
.gita-heatmap-toggle {
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid #d9e3ee;
  border-radius: 12px;
  background: #fff;
  color: #073b77;
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
  cursor: pointer;
  touch-action: manipulation;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.gita-heatmap-toggle:hover:not(:disabled) {
  background: #eef5fd;
  transform: translateY(-1px);
}
.gita-heatmap-toggle.is-active,
.gita-heatmap-toggle[aria-pressed="true"] {
  background: #073b77;
  border-color: #073b77;
  color: #fff;
}
.gita-heatmap-toggle.is-active:hover:not(:disabled) {
  background: #125391;
}
.gita-heatmap-toggle:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}
.gita-heatmap-toggle:disabled { opacity: .45; cursor: not-allowed; }
/* Mouse-click outline on Leaflet SVG: keep visible keyboard focus. */
.leaflet-container .leaflet-interactive:focus:not(:focus-visible) {
  outline: none !important;
}
@media (max-width: 768px) {
  .map-wrapper .map-toolbar .gita-heatmap-toggle {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
    border-radius: 11px;
  }
  .map-wrapper .map-toolbar .gita-heatmap-toggle svg { width: 18px; height: 18px; }
}
@media (max-width: 390px) {
  .map-wrapper .map-toolbar .gita-heatmap-toggle {
    flex-basis: 39px; width: 39px; min-width: 39px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gita-heatmap-toggle { transition: none; }
}

/* Permit labels and arbitrary long database statuses stay inside their card. */
.gita-popup__section--izin .gita-popup__row > span { overflow-wrap: anywhere; }
.gita-popup__section--izin .status-badge,
#detailContent .status-badge { white-space: normal; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
.gita-popup__section--izin .gita-popup__muted { margin: 5px 0; }

/* WebGIS module header */
header.webgis-header { display:flex; align-items:center; justify-content:space-between; gap:24px; height:70px; min-height:70px; padding:10px 26px; background:#fff; border-bottom:1px solid #e1e9f0; box-shadow:0 2px 10px #143c5b06; }
.webgis-brand { display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0; }
.webgis-brand img { object-fit:contain; flex-shrink:0; }
.webgis-header .webgis-brand h1 { margin:0; font-size:25px; line-height:1.1; letter-spacing:-.8px; color:#123c5b; }
.webgis-header .webgis-brand-dot { display:inline; color:#dfae26; font-size:inherit; margin:0; }
.webgis-brand p { margin:5px 0 0; color:#63798c; font-size:11px; line-height:1.2; }
.webgis-nav { display:flex; align-items:center; gap:10px; }
.webgis-nav a { display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:8px; color:#405d73; text-decoration:none; font-size:12px; font-weight:600; white-space:nowrap; }
.webgis-nav a:hover { background:#edf4fb; color:#1866a5; }
.webgis-nav a:focus-visible,.webgis-brand:focus-visible { outline:3px solid #dfae26; outline-offset:3px; }
.webgis-nav a.webgis-water-link { background:#f0f6fb; color:#1866a5; border:1px solid #dfebf4; }
.webgis-header .webgis-dev-badge { display:inline-block; margin:0 0 0 4px; color:#75601c; background:#fff1c2; border-radius:4px; padding:4px 6px; font-size:9px; font-weight:500; }
@media(max-width:768px) {
 header.webgis-header { height:auto; min-height:92px; flex-wrap:wrap; gap:8px; padding:9px 14px 7px; }
 .webgis-brand img { width:35px; height:35px; }
 .webgis-header .webgis-brand h1 { font-size:21px; }
 .webgis-brand p { font-size:10px; margin-top:3px; }
 .webgis-nav { width:100%; gap:8px; border-top:1px solid #edf2f6; padding-top:5px; }
 .webgis-nav a { padding:6px 8px; font-size:11px; gap:6px; }
 .webgis-nav svg { width:14px; height:14px; }
 .webgis-header .webgis-dev-badge { font-size:8px; padding:3px 4px; margin-left:0; }
}
@media(max-width:360px) { .webgis-header .webgis-dev-badge { display:none; } }

.webgis-nav .pbg-admin-link{padding:8px 10px;border-radius:9px;border:1px solid #d5e5f4;color:#2067a1;font-size:12px;font-weight:800;white-space:nowrap}.webgis-nav .pbg-admin-link:hover{background:#edf6ff}


/* GITA SIKKA V15 — Layer picker: ringkas dan konsisten. */
#map .leaflet-control-layers {
  overflow: hidden;
  border: 1px solid rgba(213, 220, 232, .85) !important;
  border-radius: 14px !important;
  box-shadow: 0 7px 24px rgba(15, 23, 42, .14) !important;
}
#map .leaflet-control-layers-expanded {
  padding: 11px 13px !important;
  min-width: 188px;
  max-width: min(274px, calc(100vw - 36px));
  max-height: min(70vh, 390px);
  overflow-y: auto;
}
#map .leaflet-control-layers-base label,
#map .leaflet-control-layers-overlays label {
  display: block;
  margin: 0;
  padding: 5px 2px;
  border-radius: 7px;
  cursor: pointer;
}
#map .leaflet-control-layers-base label:hover,
#map .leaflet-control-layers-overlays label:hover {
  background: #f4f7fb;
}
#map .leaflet-control-layers label span {
  font-size: 13px;
  line-height: 1.5;
  color: #344054;
}
#map .leaflet-control-layers input {
  accent-color: #1765bd;
  vertical-align: middle;
  margin-right: 6px;
}
#map .leaflet-control-layers-separator {
  margin: 9px 0 7px;
  border-top-color: #e5e9ef;
}
#map .gita-tooltip-desa {
  background: rgba(20, 29, 45, .95);
  border: 1px solid rgba(250, 204, 21, .6);
  border-radius: 6px;
  color: white;
  font: 500 12px/1.4 Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
#map .gita-tooltip-desa::before {
  border-top-color: rgba(20, 29, 45, .95);
}