/* WebGIS Sebaran Titik Panas — mobile-first.
   Layar sempit : peta penuh layar + panel sebagai bottom sheet.
   Layar lebar  : peta + sidebar tetap di kiri.
   Panel bisa disembunyikan penuh lewat #panel-toggle (#app.panel-hidden).

   Tema putih-oranye. Gaya tombol mengikuti "Simpan & Input ke Sheet" di Stutepos:
   sudut 12px, font 900, uppercase + tracking lebar, isi solid, tepi bawah 4px
   lebih gelap, bayangan berwarna, dan menekan ke bawah saat ditekan. */

:root {
  --bg: #f1f5f9;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;

  /* Oranye: isi pakai 700 supaya teks putih di atasnya lolos kontras AA
     (5,15:1). Oranye 600 hanya 3,56:1 — terlalu tipis untuk teks kecil. */
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-edge: #7c2d12;
  --accent-soft: #ffedd5;
  --accent-glow: rgba(194, 65, 12, 0.28);
  --on-accent: #ffffff;

  --radius: 12px;
  --pad: 13px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --glass: rgba(255, 255, 255, 0.92);

  /* Tinggi bagian sheet yang terlihat saat tertutup. Diukur ulang oleh app.js. */
  --peek: 186px;
  /* Jarak elemen mengambang dari dasar peta; 0 saat panel disembunyikan. */
  --float-b: calc(var(--peek) + 12px);
}

* { box-sizing: border-box; }

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Cegah pull-to-refresh menabrak gestur geser peta. */
  overscroll-behavior: none;
}

:where(button, input, select, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- kerangka ---------- */
#app {
  height: 100vh;   /* fallback */
  height: 100dvh;  /* ikut menyusut saat address bar mobile muncul */
  position: relative;
  overflow: hidden;
}
#app.panel-hidden { --float-b: calc(12px + var(--safe-b)); }

#map {
  position: absolute;
  inset: 0;
  background: #dbe2ea;
}

/* ---------- judul mengambang (mobile) ---------- */
#topbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 500;
  max-width: calc(100% - 92px);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
  line-height: 1.25;
}
#topbar strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
#topbar span { display: block; font-size: 10px; color: var(--muted); }

/* ---------- tombol sembunyikan/tampilkan panel ---------- */
#panel-toggle {
  position: absolute;
  right: 12px;
  bottom: var(--float-b);
  z-index: 750;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line-strong), 0 8px 18px rgba(15, 23, 42, 0.18);
  transition: bottom 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.15s ease,
    transform 0.08s ease, box-shadow 0.08s ease;
}
#panel-toggle:hover { background: var(--panel-2); }
#panel-toggle:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--line-strong), 0 2px 6px rgba(15, 23, 42, 0.14);
}
#panel-toggle svg { flex: none; color: var(--accent); }
/* Di layar sempit cukup ikonnya — teks memakan ruang peta. */
#panel-toggle #panel-toggle-text { display: none; }

/* ---------- indikator memuat ---------- */
.loading {
  position: absolute;
  bottom: var(--float-b);
  left: 12px;
  z-index: 600;
  max-width: calc(100% - 90px);
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 0 rgba(194, 65, 12, 0.25), 0 6px 16px rgba(15, 23, 42, 0.14);
  transition: bottom 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.loading[hidden] { display: none; }

/* State galat: merah, dan boleh melebar agar tombol ulang muat. */
.loading.error {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  white-space: normal;
  background: #fee2e2;
  color: #991b1b;
  box-shadow: 0 3px 0 rgba(153, 27, 27, 0.25), 0 6px 16px rgba(15, 23, 42, 0.14);
}
.loading .retry {
  flex: none;
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: #991b1b;
  color: #ffffff;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.loading .retry:hover { background: #7f1d1d; }
.loading .retry:active { transform: translateY(1px); }

/* ---------- panel / bottom sheet ---------- */
#panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 700;
  display: flex;
  flex-direction: column;
  height: 86dvh;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 28px rgba(15, 23, 42, 0.18);
  transform: translateY(calc(100% - var(--peek)));
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  touch-action: none;
}
#panel.open { transform: translateY(0); }
#panel.dragging { transition: none; }
#app.panel-hidden #panel { transform: translateY(100%); }

#sheet-handle {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 9px 0 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: grab;
}
#sheet-handle:active { cursor: grabbing; }
#sheet-handle .grip {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}
#panel.open #sheet-handle .grip { background: var(--accent); }

#sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: hidden;
  padding: 0 var(--pad) calc(18px + var(--safe-b));
  -webkit-overflow-scrolling: touch;
}
#panel.open #sheet-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Judul di dalam panel hanya untuk layar lebar; di mobile sudah ada #topbar. */
#sheet-peek header { display: none; }

/* ---------- seksi ---------- */
.ctl {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
/* Seksi pertama di panel tidak butuh garis pemisah di atasnya. */
.ctl-waktu { margin-top: 0; padding-top: 0; border-top: 0; }
.ctl h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Tombol teks kecil di dalam judul seksi — tidak menambah baris. */
.mini {
  flex: none;
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.mini:hover { background: #fdd9b5; }
.mini:active { transform: translateY(1px); }

/* ---------- kontrol waktu & grafik linimasa ---------- */
.waktu-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tombol putar mengikuti gaya tombol confidence yang aktif (isi solid, tepi
   bawah lebih gelap, menekan ke bawah saat ditekan) — bentuknya bulat supaya
   terbaca sebagai satu aksi, bukan pilihan kategori. */
.play {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--accent-edge), 0 8px 18px var(--accent-glow);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.play:hover { background: var(--accent-hover); }
.play:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent-edge), 0 2px 8px var(--accent-glow);
}
.play .ikon-pause, .play.playing .ikon-play { display: none; }
.play.playing .ikon-pause { display: block; }

.waktu-teks {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
#hari-aktif {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#hari-jumlah {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.linimasa {
  display: block;
  width: 100%;
  /* Lebih pendek di layar sempit: seksi ini ada di bagian sheet yang terlihat
     saat tertutup (supaya animasi bisa diputar tanpa menutupi peta), jadi tiap
     piksel tingginya ikut menambah tinggi sheet yang tertutup. 44 px masih
     memberi ~40 px untuk batang tertinggi. */
  height: 44px;
  margin-top: 8px;
  border-radius: 6px;
  cursor: crosshair;
  /* Geseran di atas grafik memilih tanggal, bukan menggulung panel/halaman. */
  touch-action: none;
}

/* ---------- tombol confidence ---------- */
.choice-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  /* ruang untuk tepi bawah 4px + gerak tekan */
  padding-bottom: 4px;
}
.choice-buttons button {
  min-height: 40px;
  padding: 6px 2px;
  border: 0;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease,
    box-shadow 0.08s ease;
}
.choice-buttons button:hover { background: var(--accent-soft); color: var(--accent); }
.choice-buttons button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--line);
}
.choice-buttons button.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 0 var(--accent-edge), 0 8px 18px var(--accent-glow);
}
.choice-buttons button.active:hover { background: var(--accent-hover); }
.choice-buttons button.active:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent-edge), 0 2px 8px var(--accent-glow);
}

/* ---------- angka aktif ---------- */
.stat-active {
  margin-top: 9px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius);
}
.stat-active .big {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-active .small {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #9a5330;
}

/* ---------- input ---------- */
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
input[type="range"] {
  width: 100%;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.radio-group { display: flex; flex-direction: column; }
.radio-group label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- legenda ---------- */
.legend { list-style: none; margin: 0; padding: 0; }
.legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.legend li.active { color: var(--text); font-weight: 900; }
.legend-note {
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
}

.legend .swatch {
  flex: none;
  width: 18px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.18);
}

/* ---------- diagram batang ---------- */
.stat-bars { list-style: none; margin: 0; padding: 0; }
.stat-bars li {
  display: grid;
  grid-template-columns: 84px 1fr 32px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin: 5px 0;
  font-variant-numeric: tabular-nums;
}
.stat-bars li > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-bars li > :last-child { text-align: right; }
.stat-bars .track {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.stat-bars .fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.4;
  transition: width 0.2s ease;
}
.stat-bars li.active .fill { opacity: 1; }
.stat-bars li.active { color: var(--text); font-weight: 900; }

#panel footer {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
}
#panel footer p { margin: 0; }
#panel footer strong { color: var(--accent); }

/* ---------- Leaflet ---------- */
.leaflet-container { font: inherit; }
/* Canvas titik panas tidak menangkap pointer sendiri: klik & geser tetap
   diproses Leaflet sebagai event peta, dan hit-test titik dikerjakan
   hotspot-layer.js dari koordinat klik itu. */
.hotspot-canvas { pointer-events: none; }
/* Atribusi duduk di atas sheet DAN di atas tombol mengambang (tinggi 40px). */
.leaflet-bottom { margin-bottom: calc(var(--float-b) + 46px); }
.leaflet-touch .leaflet-bar { border: 0 !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2); }
.leaflet-touch .leaflet-bar a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  color: var(--text);
  font-weight: 900;
}
.leaflet-touch .leaflet-bar a:hover { color: var(--accent); }

.leaflet-popup-content { font-size: 13px; line-height: 1.55; margin: 12px 14px; }
.leaflet-popup-content-wrapper { border-radius: var(--radius); }
.hotspot-popup dl { margin: 0; }
.hotspot-popup dt {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.hotspot-popup dt:first-child { margin-top: 0; }
.hotspot-popup dd { margin: 0; font-weight: 700; }
.hotspot-popup .badge {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* bg + color ditentukan inline per confidence (RAMP_BADGE di hotspot-data.js) */
}

/* ---------- tooltip hover batas kabupaten ---------- */
.kabupaten-tooltip {
  font-size: 12px;
  line-height: 1.5;
}
.kabupaten-tooltip strong { font-size: 13px; }
.kabupaten-tooltip .muted { color: var(--muted); font-size: 11px; }

/* ---------- atribusi ringkas ---------- */
.leaflet-control-attribution {
  display: flex;
  align-items: center;
  padding: 3px 9px !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass) !important;
  backdrop-filter: blur(8px);
  color: var(--muted) !important;
  font-size: 10px;
  line-height: 1.5;
  cursor: pointer;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-control-attribution:focus-visible { outline: 2px solid var(--accent); }

/* Terlipat: tinggal lingkaran "i". Teks kreditnya tetap ada di DOM. */
.leaflet-control-attribution.attrib-collapsed {
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0 !important;
  font-size: 0;
}
.leaflet-control-attribution.attrib-collapsed::before {
  content: "i";
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.leaflet-control-attribution.attrib-collapsed > * { display: none; }

/* ---------- layar lebar: kembali ke sidebar ---------- */
@media (min-width: 861px) {
  #app { display: flex; }
  #app.panel-hidden { --float-b: 12px; }

  #topbar { display: none; }

  #map { position: relative; inset: auto; flex: 1; height: 100%; }

  #panel {
    position: relative;
    z-index: auto;
    order: -1;
    width: 300px;
    min-width: 300px;
    height: 100%;
    border-top: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: margin-left 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: auto;
  }
  #app.panel-hidden #panel { transform: none; margin-left: -300px; }

  #sheet-handle { display: none; }
  #sheet-scroll { overflow-y: auto; padding: var(--pad) var(--pad) 18px; }

  /* Tidak ada sheet yang perlu diringkas di sini, jadi grafiknya boleh lebih
     tinggi — perbedaan hari sepi vs puncak jadi lebih terbaca. */
  .linimasa { height: 60px; }

  #sheet-peek header { display: block; margin-bottom: 14px; }
  #sheet-peek header h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
  }
  #sheet-peek header .sub { margin: 3px 0 0; font-size: 11px; color: var(--muted); }

  /* Tepi kiri area peta; ikut bergeser saat panel disembunyikan. */
  #app { --map-left: 312px; }
  #app.panel-hidden { --map-left: 12px; }

  #panel-toggle {
    top: 12px;
    bottom: auto;
    right: auto;
    left: var(--map-left);
    transition: left 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.15s ease,
      transform 0.08s ease, box-shadow 0.08s ease;
  }
  #panel-toggle #panel-toggle-text { display: inline; }

  /* Kiri bawah: kanan bawah sudah dipakai atribusi. */
  .loading {
    bottom: 14px;
    right: auto;
    left: var(--map-left);
    transition: left 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .leaflet-bottom { margin-bottom: 0; }
}

/* ---------- hormati preferensi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  #panel, #panel-toggle, .loading, .stat-bars .fill, .choice-buttons button {
    transition: none;
  }
}