/* WebGIS Simulasi Banjir — 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; }

/* ---------- 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);
}
.ctl-level { 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); }

/* ---------- tombol level ---------- */
/* 7 level dalam satu baris: angka saja, satuan sudah ada di judul seksi. */
.level-buttons {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  /* ruang untuk tepi bawah 4px + gerak tekan */
  padding-bottom: 4px;
}
.level-buttons button {
  min-height: 40px;
  padding: 6px 2px;
  border: 0;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  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;
}
.level-buttons button:hover { background: var(--accent-soft); color: var(--accent); }
.level-buttons button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--line);
}
.level-buttons button.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 0 var(--accent-edge), 0 8px 18px var(--accent-glow);
}
.level-buttons button.active:hover { background: var(--accent-hover); }
.level-buttons button.active:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent-edge), 0 2px 8px var(--accent-glow);
}

/* ---------- kendali animasi ---------- */
/* Tombol utama — padanan terdekat "Simpan & Input ke Sheet". */
.anim-row {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  padding-bottom: 4px;
}
#anim-play {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--accent-edge), 0 10px 22px var(--accent-glow);
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
#anim-play:hover { background: var(--accent-hover); }
#anim-play:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent-edge), 0 2px 8px var(--accent-glow);
}
#anim-play.playing { background: var(--accent-hover); }
#anim-play .ico { flex: none; }
#anim-play .ico-pause { display: none; }
#anim-play.playing .ico-play { display: none; }
#anim-play.playing .ico-pause { display: block; }

#anim-speed {
  flex: none;
  min-height: 42px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
}

/* ---------- 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 ---------- */
/* Warna genangan tetap biru — konvensi air, dan kontras kuat di atas citra satelit. */
.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: 30px 1fr 38px;
  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 > :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; }
/* 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); }
.depth-popup b { color: #0369a1; } /* biru, senada dengan poligon genangan */
.depth-popup .calc {
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.depth-popup .muted { margin-top: 6px; 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; }

  #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, .level-buttons button, #anim-play {
    transition: none;
  }
}