/* FFEWES Forecast 11 Hari — CSS (v20260901-INT1)
   Marker, summary warn-card, panel detail, tabel compact/full. */

/* ---------- marker (CSS-only blink) ---------- */
.ff11-divicon{background:transparent;border:0}
.ff11-marker{border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 10px rgba(255,255,255,.15)}
.ff11-marker.ff11-steady{animation:none}
.ff11-marker.ff11-slow{animation:ff11blink 1.6s ease-in-out infinite}
.ff11-marker.ff11-fast{animation:ff11blink .7s ease-in-out infinite}
.ff11-marker.ff11-very-fast{animation:ff11blink .3s ease-in-out infinite}
@keyframes ff11blink{0%,100%{opacity:1}50%{opacity:.25}}
.ff11-popup .leaflet-popup-content-wrapper{background:linear-gradient(180deg,#0d2235,#081725)!important;border:1px solid #416d89!important;border-radius:10px!important;color:#eaf7ff!important}
.ff11-popup .leaflet-popup-tip{background:#0a1b2a!important}
.ff11-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}

/* ---------- summary di PERINGATAN DINI ---------- */
.ff11-summary{margin-top:8px;padding:7px 8px;border:1px solid #3b5b75;border-radius:9px;background:linear-gradient(180deg,#0e2743,#0a1c30)}
.ff11-sum-title{font-size:9px;font-weight:900;letter-spacing:.6px;color:#ffd400;text-transform:uppercase;margin-bottom:5px}
.ff11-sum-row{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;color:#cfe3f5;line-height:1.4}
.ff11-sum-row .k{color:#9fb8cd}
.ff11-sum-row .v{color:#fff;font-weight:700}
.ff11-sum-sev{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:6px;font-size:9px;font-weight:800}
.ff11-info-btn{margin-top:7px;width:100%;padding:5px 8px;border:1px solid #70c5ef;background:#10527b;color:#fff;border-radius:7px;font-size:11px;font-weight:800;cursor:pointer;letter-spacing:.3px}
.ff11-info-btn:hover{border-color:#8fe6ff}

/* ---------- panel detail ---------- */
#ffewes-forecast11-panel{position:absolute;right:36px;top:var(--headerH,102px);bottom:var(--pos-bottom,112px);width:clamp(380px,30vw,520px);z-index:7650;background:#0a1a2b;border:1px solid #3b5b75;border-left:2px solid #ffd400;border-radius:12px 0 0 0;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.55)} /* right:36px agar tidak menutupi edge drawer kanan (28px+gap) */
#ffewes-forecast11-panel.closed{display:none}
.ff11-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #29485f;background:#0d2036}
.ff11-head b{font-size:10.5px;letter-spacing:.4px;color:#ffd400;text-transform:uppercase}
.ff11-close{background:#4a2027;color:#ffd7dc;border:1px solid #e95c68;border-radius:7px;padding:4px 9px;font-size:9px;font-weight:800;cursor:pointer}
.ff11-body{flex:1 1 auto;overflow-y:auto;padding:6px}
.ff11-grp{border:1px solid #2a4560;border-radius:8px;margin-bottom:6px;background:#0c1d30}
.ff11-grp>summary{list-style:none;cursor:pointer;padding:6px 8px;font-size:9.5px;font-weight:800;color:#7cecff;letter-spacing:.3px;user-select:none}
.ff11-grp>summary::-webkit-details-marker{display:none}
.ff11-grp[open]>summary{border-bottom:1px solid #2a4560}
.ff11-grpbody{padding:6px 8px}
.ff11-run,.ff11-day{display:inline-block;margin:2px 3px;padding:4px 7px;border:1px solid #315675;background:#10273a;color:#d9ebfb;border-radius:7px;font-size:8.5px;font-weight:700;cursor:pointer}
.ff11-run.on,.ff11-day.on{border-color:#ffd400;background:#3a3a12;color:#ffe45b}
.ff11-kpi{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;color:#cfe3f5;line-height:1.5;border-bottom:1px dashed #223c52}
.ff11-kpi b{color:#fff}
.ff11-leg{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#d7e5f1;margin:3px 0}
.ff11-muted{color:#8faac0;font-size:9px}
.ff11-listbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px;font-size:9px;color:#9fb8cd}
.ff11-fullbtn{background:#10527b;color:#fff;border:1px solid #70c5ef;border-radius:7px;padding:4px 8px;font-size:8.5px;font-weight:800;cursor:pointer}
/* LEGH1 — tombol hapus filter grup hari legenda di daftar kejadian */
.ff11-lgclearbtn{background:#3a2f0c;color:#ffe680;border:1px solid #d9bf54;border-radius:7px;padding:4px 8px;font-size:8.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.ff11-lgclearbtn:hover{background:#4a3c10;color:#fff6cf}
.ff11-listbar span b{color:#ffe680}
.ff11-tablewrap{overflow:auto;max-height:38vh}
.ff11-table{width:100%;border-collapse:collapse;font-size:9px;min-width:680px}
.ff11-table th{position:sticky;top:0;background:#15324d;color:#fff;padding:5px 6px;border:1px solid #355774;text-align:left;white-space:nowrap;z-index:2}
.ff11-table td{padding:4px 6px;border:1px solid rgba(53,87,116,.55);color:#dce9f3;white-space:nowrap}
.ff11-table tbody tr:nth-child(even) td{background:#0a1b2a}
.ff11-table tbody tr:hover td{background:#102b40}
.ff11-sev{font-weight:800}
.ff11-empty{color:#8faac0;text-align:center;padding:12px!important}

/* ---------- full table ---------- */
.ff11-full{display:none;position:fixed;inset:0;z-index:9800;background:rgba(4,12,20,.96);flex-direction:column;padding:14px}
.ff11-full.show{display:flex}
.ff11-fullhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ff11-fullhead b{color:#ffd400;font-size:13px;letter-spacing:.5px}
.ff11-fullbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ff11-fullbar input,.ff11-fullbar select{height:28px;border:1px solid #315675;background:#0c2336;color:#fff;border-radius:6px;padding:0 8px;font-size:9px}
.ff11-fullwrap{flex:1 1 auto;overflow:auto}
.ff11-fulltable{min-width:1500px;font-size:10px}
.ff11-fulltable th{position:sticky;top:0;z-index:3;cursor:pointer}
.ff11-fulltable th:first-child,.ff11-fulltable td:first-child{position:sticky;left:0;background:#15324d;z-index:4}
.ff11-fulltable td:first-child{background:#0c1d30}

/* v416 — LEGENDA PREDIKSI BANJIR & DAMPAK (panel bawah, toggle filter) */
.ff11-legend-bar{display:flex;gap:6px;align-items:flex-start;flex:0 0 auto;align-self:center;margin-left:4px}
.ff11-lg{display:flex;flex-direction:column;gap:3px;padding:4px 7px;border:1px solid #2a4560;border-radius:9px;background:#0c1d30;min-width:120px}
.ff11-lghead{display:flex;align-items:center;gap:6px;justify-content:space-between}
.ff11-lghead-l{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ff11-lgtgl{background:#10273a;color:#9fb8cd;border:1px solid #315675;border-radius:7px;padding:3px 7px;font-size:8.5px;font-weight:800;letter-spacing:.3px;cursor:pointer;white-space:nowrap}
.ff11-lgtgl.on{background:#3a3a12;color:#ffe45b;border-color:#ffd400;box-shadow:0 0 8px rgba(255,212,0,.4)}
/* v536 — toggle OFF/ON titik genangan (samping LEGENDA DAMPAK):
   label = AKSI — titik TAMPIL → "OFF" (merah, utk mematikan);
   titik HILANG → "ON" (hijau, utk menghidupkan). */
.ff11-lgdotpow{color:#ff8a8a!important;border-color:#b3474f!important;padding:3px 6px!important}
.ff11-lgdotpow[aria-pressed="false"]{color:#7ff0c8!important;border-color:#2ecc71!important;background:#0b2e1f!important}
.ff11-lglive{font-size:8px;color:#3a5a70}
.ff11-lg.on .ff11-lglive{color:#7ff0c8;text-shadow:0 0 6px rgba(127,240,200,.6)}
.ff11-lgdays{display:flex;flex-wrap:wrap;gap:2px;max-width:240px}
.ff11-lgday{background:#10273a;color:#9fb8cd;border:1px solid #315675;border-radius:6px;padding:2px 5px;font-size:8px;font-weight:700;cursor:pointer;white-space:nowrap}
.ff11-lgday.on{background:#2b5b78;color:#dff4ff;border-color:#7cecff;box-shadow:0 0 7px rgba(124,236,255,.5)}
.ff11-lgimps{display:flex;flex-wrap:wrap;gap:3px}
.ff11-lgimp{display:inline-flex;align-items:center;gap:3px;background:#10273a;color:#9fb8cd;border:1px solid #315675;border-radius:6px;padding:1px 4px;font-size:10.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.ff11-lgimp .sw{width:8px;height:8px;border-radius:50%;display:inline-block}
.ff11-lgimp.on{background:#26324a;color:#fff;border-color:#9fb8cd;box-shadow:0 0 7px rgba(255,255,255,.35)}
.ff11-lgrow{display:flex}
.ff11-lg-ongoing.on{background:#5a1f22;color:#ffb3b3;border-color:#ff6b6b}
@media (max-width:1500px){ .ff11-legend-bar{ display:none; } }

/* v417 — header tabel forecast sortable */
.ff11-table th{cursor:pointer;user-select:none}
.ff11-table th.sorted-asc,.ff11-table th.sorted-desc{background:#1d4b3a;color:#7ff0c8}
.ff11-table th:hover{background:#15324d}

/* v423 — LEGENDA DAMPAK 2 BARIS (lebih sempit); KEDALAMAN GENANGAN dipersempit */
.ff11-lgimps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.ff11-lgimp{justify-content:flex-start}
.ff11-lg{min-width:108px}

/* v437 — LEGENDA WAKTU: grid 2 kolom, 6 item (5 legenda + SEDANG TERJADI sejajar
   H+0 di baris terakhir). font +2px (7→11). */
.ff11-lgdays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 8px;max-width:none;padding:1px 0}
.ff11-lgleg{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:1px 1px}
.ff11-lglegtxt{font-size:11px;font-weight:700;color:#d7e5f1;letter-spacing:.2px;white-space:normal;line-height:1.15}
/* v447 — keyframes kedipan legenda WAKTU (SEMPAT HILANG saat edit v434 → semua
   icon diam; dikembalikan agar .slow/.fast/.very-fast benar-benar berkedip) */
@keyframes ff11lgblink{0%,100%{opacity:1}50%{opacity:.4}}
.ff11-daydot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;flex:0 0 auto;box-shadow:0 0 3px rgba(255,255,255,.65)}
.ff11-daydot.steady{animation:none}
.ff11-daydot.slow{animation:ff11lgblink 1.6s ease-in-out infinite}
.ff11-daydot.fast{animation:ff11lgblink .7s ease-in-out infinite}
.ff11-daydot.very-fast{animation:ff11lgblink .3s ease-in-out infinite}
.ff11-daydot.bd{box-shadow:0 0 0 3px #000,0 0 4px rgba(255,255,255,.6);border:0}
/* v437 — SEDANG TERJADI jadi item grid (sejajar H+0): tombol kompak, TIDAK berkedip
   seluruhnya — HANYA dot (very-fast bd) yang berkedip. .on = bg merah + border. */
.ff11-lg-ongoing{
  display:flex;align-items:center;gap:5px;white-space:normal;padding:2px 4px;
  background:#10273a;border:1px solid #315675;border-radius:6px;cursor:pointer;
  font-family:inherit;justify-content:flex-start;min-width:0;
}
.ff11-lg-ongoing.on{background:#5a1f22;border-color:#ff6b6b;box-shadow:0 0 6px rgba(255,107,107,.5)}
.ff11-lg-ongoing.on .ff11-lglegtxt{color:#ffb3b3}
/* v448 — pembeda icon SEDANG TERJADI vs H+0/0-24 (sebelumnya identik):
   SEDANG TERJADI = 1,5× lebih besar (12px, border hitam 3px) persis marker peta
   (marker is_ongoing 22px vs normal 15px). H+0 tetap 8px. */
.ff11-lg-ongoing .ff11-daydot{width:12px;height:12px}
/* dot legenda di panel grup 5 (LEGENDA WAKTU / KEDIPAN) ikut berkedip */
.ff11-dot.ff11-steady{animation:none}
.ff11-dot.ff11-slow{animation:ff11blink 1.6s ease-in-out infinite}
.ff11-dot.ff11-fast{animation:ff11blink .7s ease-in-out infinite}
.ff11-dot.ff11-very-fast{animation:ff11blink .3s ease-in-out infinite}

/* v437 — toggle TABEL PREDIKSI BANJIR: 2 KOLOM berdampingan (kolom 1 TABEL
   font +2px = 10px, kolom 2 PREDIKSI BANJIR font +1px = 9px), tiap kolom
   teks VERTIKAL bawah→atas. */
/* v442 — toggle TABEL PREDIKSI BANJIR dipindah ke BAWAH GRUP LEGENDA DAMPAK
   (di dalam box impact, bawah .ff11-lgimps): HORIZONTAL 1 BARIS, 1 ukuran font.
   Gaya vertikal lama (.ff11-lg-tbl) tidak dipakai lagi — elemen sudah dihapus
   dari HTML. */
.ff11-lgtable-h{
  width:100%;
  margin:0;
  font-size:9px;
  line-height:1.15;
  padding:3px 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.ff11-lgtable-h:hover{color:#fff;border-color:#70c5ef}
/* v437 — master toggle LEGENDA WAKTU & LEGENDA DAMPAK font +1px (8.5→9.5) */
.ff11-legend-bar [data-lg-master]{font-size:9.5px!important}
.ff11-lgtable.on{background:#10527b;color:#fff;border-color:#70c5ef;box-shadow:0 0 8px rgba(112,197,239,.55)}

/* v433 — toggle RESET LAYAR DEFAULT font +4px (6.5→10.5) */
.ff11-lgreset{width:100%;font-size:10.5px;line-height:1.25;padding:3px 4px;white-space:normal}

/* v429 — RINGKASAN & LEGENDA (grup 3+4+5) digabung jadi 1 blok GRID 4 KOLOM:
   Ringkasan Titik Aktif (5 KPI) + Legenda Dampak (4) + Legenda Waktu/Kedipan (5)
   = 14 item, 4 per baris -> hemat vertikal; Daftar Kejadian Prediksi lebih dekat. */
.ff11-leg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 6px;align-items:stretch;padding:0}
.ff11-legend-block{display:contents}
.ff11-leg-grid .ff11-kpi{
  display:flex;justify-content:space-between;align-items:center;gap:4px;
  font-size:8px;line-height:1.2;color:#cfe3f5;border:0;border-radius:5px;
  background:#0d2235;padding:3px 5px;min-width:0;
}
.ff11-leg-grid .ff11-kpi span{color:#9fb8cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff11-leg-grid .ff11-kpi b{color:#fff;font-size:9px;flex:0 0 auto}
.ff11-leg-grid .ff11-leg{
  display:flex;align-items:center;gap:4px;margin:0;padding:3px 5px;
  font-size:7.5px;color:#d7e5f1;border-radius:5px;background:#0d2235;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.ff11-leg-grid .ff11-dot{width:8px;height:8px;flex:0 0 auto}
.ff11-leg-grid .ff11-leg:last-child{white-space:normal;line-height:1.15}

/* v446 — BG box LEGENDA WAKTU & LEGENDA DAMPAK = GRADIENT NAVY GELAP edge drawer
   (#0e2745→#081726, lebih tua dari #10527B v444); border TETAP #70c5ef.
   background-color solid TETAP diset (fixer kontras membaca backgroundColor —
   bila transparent ia keliru memaksa teks jadi gelap di tema terang). */
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="time"],
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="impact"],
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="time"],
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="impact"]{
  background-color:#0e2745!important;
  background-image:linear-gradient(180deg,#0e2745,#081726)!important;
  border:1px solid #70c5ef!important;
}
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lglegtxt,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lglegtxt{
  color:#eef5fb!important;
}
/* teks SEDANG TERJADI ada di tombol navy gelap -> tetap terang */
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing .ff11-lglegtxt,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing .ff11-lglegtxt{color:#d7e5f1!important}
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing.on .ff11-lglegtxt,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing.on .ff11-lglegtxt{color:#ffb3b3!important}
/* dot live header: off = abu terang (terlihat di navy tua) */
body.ff-dark .ff11-lg[data-lg="time"] .ff11-lglive:not(.on),
body.ff-dark .ff11-lg[data-lg="impact"] .ff11-lglive:not(.on),
body.ff-dark.ff-theme-light .ff11-lg[data-lg="time"] .ff11-lglive:not(.on),
body.ff-dark.ff-theme-light .ff11-lg[data-lg="impact"] .ff11-lglive:not(.on){color:#8fb2d2!important}

/* v439 — RESET LAYAR DEFAULT dipindah ke KIRI, di bawah slider ISO (.isowrap):
   baris 3 grid isowrap (grid-column 1/-1). */
.ff11-lgreset-iso{
  grid-column:1/-1;
  width:100%;
  margin:0;
  font-size:12px;  /* v440 — +4px (8→12) */
  line-height:1.1;
  padding:2px 4px;
  white-space:nowrap;
}
body.ff-dark .ff11-lgreset-iso,
body.ff-dark.ff-theme-light .ff11-lgreset-iso{
  background:#10273a;color:#9fb8cd;border:1px solid #315675;border-radius:6px;
  font-weight:800;letter-spacing:.3px;cursor:pointer;text-transform:uppercase;
}
body.ff-dark .ff11-lgreset-iso:hover,
body.ff-dark.ff-theme-light .ff11-lgreset-iso:hover{border-color:#70c5ef;color:#fff}

/* v445 — samakan TINGGI 5 grup panel bawah (ISO/slider ISO, SLIDER waktu,
   KEDALAMAN GENANGAN, LEGENDA WAKTU, LEGENDA DAMPAK) = 100px agar border
   atas & bawah SEJAJAR. Box pendek di-center-kan vertikal (tanpa ruang
   kosong menggantung di bawah). */
body.ff-dark .ctrl .isowrap,
body.ff-dark.ff-theme-light .ctrl .isowrap,
body.ff-dark .ctrl .tl,
body.ff-dark.ff-theme-light .ctrl .tl,
body.ff-dark .ctrl .depthlegend-bottom,
body.ff-dark.ff-theme-light .ctrl .depthlegend-bottom,
body.ff-dark .ctrl .ff11-legend-bar,
body.ff-dark.ff-theme-light .ctrl .ff11-legend-bar{
  height:100px!important;
  align-self:center!important;
}
body.ff-dark .ctrl .ff11-legend-bar .ff11-lg,
body.ff-dark.ff-theme-light .ctrl .ff11-legend-bar .ff11-lg{
  height:100%!important;
}
/* konten pendek di-rapatkan tengah vertikal agar tinggi box tetap 100 tanpa
   celah kosong menggantung */
body.ff-dark .ctrl .depthlegend-bottom,
body.ff-dark.ff-theme-light .ctrl .depthlegend-bottom{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}
body.ff-dark .ctrl .ff11-legend-bar .ff11-lg[data-lg="time"],
body.ff-dark.ff-theme-light .ctrl .ff11-legend-bar .ff11-lg[data-lg="time"],
body.ff-dark .ctrl .ff11-legend-bar .ff11-lg[data-lg="impact"],
body.ff-dark.ff-theme-light .ctrl .ff11-legend-bar .ff11-lg[data-lg="impact"]{
  justify-content:center!important;
}
body.ff-dark .ctrl .ff11-legend-bar .ff11-lg[data-lg="impact"] .ff11-lgimps,
body.ff-dark.ff-theme-light .ctrl .ff11-legend-bar .ff11-lg[data-lg="impact"] .ff11-lgimps{
  flex:1 0 auto!important;align-content:center!important;
}

/* v449 — LEGENDA WAKTU jadi TOMBOL TOGGLE (spt LEGENDA DAMPAK): klik grup hari →
   peta hanya menampilkan hari-hari grup itu; .on = highlight. */
.ff11-lg-daygroup{
  display:flex;align-items:center;gap:5px;width:100%;min-width:0;
  padding:2px 4px;background:#10273a;border:1px solid #315675;border-radius:6px;
  cursor:pointer;font-family:inherit;text-align:left;color:inherit;margin:0;
}
.ff11-lg-daygroup:hover{border-color:#70c5ef}
.ff11-lg-daygroup.on{background:#2b5b78;border-color:#7cecff;box-shadow:0 0 6px rgba(124,236,255,.45)}
.ff11-lg-daygroup .ff11-lglegtxt{color:#eef5fb!important}
.ff11-lg-daygroup.on .ff11-lglegtxt{color:#dff4ff!important}

/* v451 — warna font panel bawah:
   1) SEDANG TERJADI → MERAH TERANG (default & saat .on)
   2) TABEL PREDIKSI BANJIR (di bawah LEGENDA DAMPAK) → MERAH TERANG/MUDA
   3) RESET LAYAR DEFAULT → font HIJAU TERANG + BG HITAM FULL */
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing .ff11-lglegtxt,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing .ff11-lglegtxt,
body.ff-dark .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing.on .ff11-lglegtxt,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg[data-lg="time"] .ff11-lg-ongoing.on .ff11-lglegtxt{
  color:#ff5a5a!important;  /* merah terang */
}
.ff11-lgtable-h{color:#ff8a8a!important}  /* merah muda utk TABEL PREDIKSI BANJIR */
.ff11-lgtable-h:hover{color:#ffb3b3!important}
body.ff-dark .ff11-lgreset-iso,
body.ff-dark.ff-theme-light .ff11-lgreset-iso{
  background:#000000!important;   /* hitam full */
  color:#34d399!important;          /* hijau terang */
  border:1px solid #2ecc71!important;
}
body.ff-dark .ff11-lgreset-iso:hover,
body.ff-dark.ff-theme-light .ff11-lgreset-iso:hover{
  border-color:#34d399!important;color:#7ff0c8!important;
}

/* v451b — menang atas overlay tema terang (body.ff-dark.ff-theme-light .ctrl
   color:var(--l-strong) 0,4,0 > .ff11-lgtable-h 0,1,0): naikkan spesifisitas. */
body.ff-dark.ff-theme-light .ctrl .ff11-lgtable-h,
body.ff-dark .ctrl .ff11-lgtable-h{color:#ff8a8a!important}
body.ff-dark.ff-theme-light .ctrl .ff11-lgtable-h:hover,
body.ff-dark .ctrl .ff11-lgtable-h:hover{color:#ffb3b3!important}

/* v452 — GRUP ISOHYET dipersempit: tombol "Isohyet 1 Jam" dijadikan selebar isinya
   (icon nempel kiri, huruf "m" Jam dekat kanan) → isorange (slider) & RESET ikut
   menyempit. Kolom grid isowrap = auto(auto isi tombol ISO) + auto(contour).
   Semua grup di kanan ikut geser KIRI; gap antar grup = 6px (sama dgn jarak
   LEGENDA WAKTU ↔ LEGENDA DAMPAK). */
body.ff-dark .ctrl .isowrap,
body.ff-dark.ff-theme-light .ctrl .isowrap{
  display:grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:34px 30px auto!important;
  gap:4px 5px!important;
  width:auto!important;
  min-width:0!important;
  padding:2px 3px!important;
  justify-content:start!important;
  align-content:start!important;
}
body.ff-dark .ctrl .isowrap #btn-isohit,
body.ff-dark.ff-theme-light .ctrl .isowrap #btn-isohit{
  grid-column:1!important;grid-row:1!important;
  width:auto!important;min-width:0!important;max-width:none!important;
  justify-content:flex-start!important;
  text-align:left!important;
  padding:4px 2px 4px 1px!important;
  font-size:11.8px!important;
  white-space:nowrap!important;
}
body.ff-dark .ctrl .isowrap #btn-isohit .isodot,
body.ff-dark.ff-theme-light .ctrl .isowrap #btn-isohit .isodot{flex:0 0 auto}
body.ff-dark .ctrl .isowrap .contourtoggle,
body.ff-dark.ff-theme-light .ctrl .isowrap .contourtoggle{
  grid-column:2!important;grid-row:1!important;
  width:auto!important;min-width:0!important;
}
body.ff-dark .ctrl .isowrap .isorange,
body.ff-dark.ff-theme-light .ctrl .isowrap .isorange{grid-column:1/3!important;grid-row:2!important}
body.ff-dark .ctrl .isowrap .ff11-lgreset-iso,
body.ff-dark.ff-theme-light .ctrl .isowrap .ff11-lgreset-iso{grid-column:1/3!important;grid-row:3!important}
/* jarak antar grup panel bawah = 6px (sama lgTime↔lgImpact); legend-bar tanpa margin kiri */
body.ff-dark .ctrl,
body.ff-dark.ff-theme-light .ctrl{gap:6px!important}
body.ff-dark .ctrl .ff11-legend-bar,
body.ff-dark.ff-theme-light .ctrl .ff11-legend-bar{margin-left:0!important}

/* v454 — GRUP PCH & GRUP PDA (berdampingan, kanan LEGENDA DAMPAK): toggle ON/OFF
   menampilkan pos di peta; saat ON box MELEBAR menampilkan legenda status (swatch
   warna) — PCH 6 item 3×2, PDA 5 item (baris1 Tidak Aktif+Normal, baris2
   Waspada+Siaga+Awas). Default OFF (H+0). Box ikut gaya legenda v446. */
body.ff-dark .ff11-legend-bar .ff11-lg-sta,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg-sta{
  background-color:#0e2745!important;
  background-image:linear-gradient(180deg,#0e2745,#081726)!important;
  border:1px solid #70c5ef!important;
  border-radius:9px!important;
  padding:4px 5px!important;
  justify-content:flex-start!important;
  min-width:0!important;
  flex:0 0 auto!important;
  width:auto!important;
}
.ff11-lg-sta[data-lg="sta-pch"].on{width:114px!important;flex:0 0 114px!important;padding-left:2px!important;padding-right:2px!important} /* RC2zn: 104->114 (+10px saat TERBUKA) */
.ff11-lg-sta[data-lg="sta-pda"].on{width:123px!important;flex:0 0 123px!important;padding-left:3px!important;padding-right:3px!important} /* RC2zn: 113->123 (+10px saat TERBUKA) */
/* v456 — prefix body utk menang atas base (0,3,1) yang set width:auto!important */
body.ff-dark .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pch"].on,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pch"].on{width:114px!important;flex:0 0 114px!important;padding-left:2px!important;padding-right:2px!important} /* RC2zn */
body.ff-dark .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pda"].on,
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pda"].on{width:123px!important;flex:0 0 123px!important;padding-left:3px!important;padding-right:3px!important} /* RC2zn */
.ff11-lgstgl{
  display:inline-flex!important;align-items:center!important;gap:4px!important;
  width:100%!important;min-width:0!important;white-space:nowrap!important;
  background:#10273a!important;border:1px solid #315675!important;border-radius:6px!important;
  color:#ffd400!important;font-size:10px!important;font-weight:800!important; /* v455 font +2, KUNING */
  padding:3px 6px!important;cursor:pointer!important;font-family:inherit!important;
}
.ff11-lgstgl:hover{border-color:#70c5ef;color:#ffe45b}
.ff11-lgstgl.on{background:#2b5b78!important;border-color:#7cecff!important;color:#dff4ff!important;box-shadow:0 0 6px rgba(124,236,255,.4)}
.ff11-lgstgl .sv{font-size:9px!important;font-weight:900!important;color:#ffd400!important}
.ff11-lgsta-leg{margin-top:4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
/* v510/v514 — PCH legenda kriteria hujan: 3 BARIS × 2 KOLOM (auto-flow ROW):
   Kolom1 No Rain, Sedang, Sgt Lebat · Kolom2 Ringan, Lebat, Ekstrim
   (label: Tidak Hujan->No Rain & Sangat Lebat->Sgt Lebat, keduanya 1 baris di HTML;
   row-gap 1px + chip padding/gap kecil agar "Sgt Lebat" TIDAK terpotong; box 104px=101+3) */
.ff11-lg-sta[data-lg="sta-pch"] .ff11-lgsta-leg{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,auto)!important;
  grid-auto-flow:row!important;
  gap:1px 2px!important;
}
.ff11-lg-sta[data-lg="sta-pch"] .ff11-lgchip{gap:1px!important;padding-left:1px!important;padding-right:1px!important}
.ff11-lgsta-leg[hidden]{display:none}
/* v458 — FIX: atribut hidden kalah oleh rule display:flex khusus PDA
   (.ff11-lg-sta[data-lg=sta-pda] .ff11-lgsta-leg 0,3,0 > [hidden] 0,2,0)
   → legenda PDA tetap tampil walau OFF. Naikkan [hidden] utk semua. */
body.ff-dark .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pda"] .ff11-lgsta-leg[hidden],
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pda"] .ff11-lgsta-leg[hidden],
body.ff-dark .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pch"] .ff11-lgsta-leg[hidden],
body.ff-dark.ff-theme-light .ff11-legend-bar .ff11-lg-sta[data-lg="sta-pch"] .ff11-lgsta-leg[hidden]{display:none!important}
/* PDA: 2 baris flex — baris1 Tidak Aktif+Normal (masing2 1/2), baris2
   Waspada+Siaga+Awas (masing2 1/3) — sesuai permintaan user */
.ff11-lg-sta[data-lg="sta-pda"] .ff11-lgsta-leg{display:flex;flex-direction:column;gap:3px}
.ff11-lg-sta[data-lg="sta-pda"] .ff11-lgsta-row{display:flex;gap:3px;min-width:0}
.ff11-lg-sta[data-lg="sta-pda"] .ff11-lgsta-row .ff11-lgchip{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
.ff11-lg-sta[data-lg="sta-pda"] .ff11-lgchip{white-space:normal;line-height:1.15}
/* v456 — Tidak Aktif satu baris (muat di chip 88px) agar tinggi baris1 = Normal;
   font & weight dijamin sama dgn chip lain (inherit eksplisit) */
.ff11-lgchip b, .ff11-lgchip b span{font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important}
.ff11-lg-sta[data-lg="sta-pda"] .ff11-lgchip b{flex-direction:row!important;gap:0!important;white-space:nowrap!important}
.ff11-lg-sta[data-lg="sta-pda"] .ff11-lgchip b span{display:inline!important}
.ff11-lgchip{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:0;
  font-size:9px;font-weight:700;color:#eef5fb;white-space:nowrap; /* v455 font +2 */
  overflow:hidden;text-overflow:ellipsis;text-align:center;
}
/* v455 — item 2 kata (Tidak hujan/Sangat lebat/Tidak Aktif) dipecah 2 baris */
.ff11-lgchip b{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;text-align:center;white-space:normal}
.ff11-lgchip i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;display:inline-block;overflow:visible}

/* v455b — warna KUNING tombol PCH/PDA (menang atas overlay tema terang
   body.ff-dark.ff-theme-light .ctrl{color:var(--l-strong)!important} 0,4,0 —
   naikkan spesifisitas ke 0,4,1) + chip 2-kata via 2 span */
body.ff-dark .ctrl .ff11-lgstgl,
body.ff-dark.ff-theme-light .ctrl .ff11-lgstgl,
body.ff-dark .ctrl .ff11-lgstgl.on,
body.ff-dark.ff-theme-light .ctrl .ff11-lgstgl.on{color:#ffd400!important}
body.ff-dark .ctrl .ff11-lgstgl .sv,
body.ff-dark.ff-theme-light .ctrl .ff11-lgstgl .sv{color:#ffd400!important}
body.ff-dark .ctrl .ff11-lgchip,
body.ff-dark.ff-theme-light .ctrl .ff11-lgchip{color:#eef5fb!important}
.ff11-lgchip b span{display:block;line-height:1.1}

/* v460 — 1) Tombol "Isohyet 1 Jam" saat ON (bg KUNING): teks dipaksa HITAM #17202a
   di SEMUA mode — overlay `body.ff-dark.ff-theme-light .ctrl{color:var(--l-strong)!important}`
   (0,4,0) mengalahkan `.btn.iso.on` (0,2,0, tanpa important) → di tema terang teks
   berubah jadi abu #334f64 (bukan hitam). */
body.ff-dark .ctrl .btn.iso.on,
body.ff-dark.ff-theme-light .ctrl .btn.iso.on{color:#17202a!important}
/* 2) "H+0 - HH.MM WIB" (hd0) tetap KUNING di mode gelap & hijau-gelap di mode
   terang — fixer ffewesApplyUniform (JS inline !important tiap 300ms) men-scan
   `.ctrl .tl .tlbl span` dan menimpa .hd0 jadi #d9eaf5/#1a4a6b (diubah di JS
   utk skip .hd0/.hd); CSS di sini jadi pengaman ekstra. */
body.ff-dark .ctrl .tl .tlbl .hd0,
body.ff-dark.ff-theme-light .ctrl .tl .tlbl .hd0{color:#ffd400!important}
body.ff-dark.ff-theme-light .ctrl .tl .tlbl .hd0{color:#0b6b2f!important}

/* v461 — chip legenda PCH/PDA jadi TOMBOL FILTER STATUS (klik = peta hanya status itu) */
/* v462 — perbaiki regresi font chip: HAPUS override font-size/font-weight/color
   (inherit!important membuat chip jadi 13px/400). Biarkan .ff11-lgchip yang atur
   (9px/700/#eef5fb). .ff11-lgstat hanya menambah peran tombol. */
.ff11-lgstat{
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:4px!important;
  padding:1px 2px!important;
  margin:0!important;
  cursor:pointer!important;
  min-width:0!important;
  width:auto!important;
  box-sizing:border-box!important;
  font-family:inherit!important;
  text-align:center!important;
}
.ff11-lgstat:hover{border-color:rgba(124,236,255,.5)!important}
.ff11-lgstat.on{
  border-color:#7cecff!important;
  background:rgba(124,236,255,.14)!important;
  box-shadow:0 0 5px rgba(124,236,255,.35)!important;
}

/* v465 — counter jumlah pos di tombol PCH/PDA */
.ff11-lgstgl .cnt{font-size:8px!important;font-weight:700!important;color:#7ff0c8!important;margin-left:2px!important;white-space:nowrap!important}
/* vRLK8 — Panel default bawah: SEMUA togel grup LEGENDA WAKTU border PUTIH.
   Scope [data-lg="time"] (semua button toggle waktu: master, TABEL, dot, hari,
   SEDANG TERJADI) + RESET DISPLAY DEFAULT di panel bawah. Toggle grup LEGENDA
   DAMPAK / ED KONTROL TIDAK ikut berubah. */
.ctrl #ff11-legend-bar [data-lg="time"] button{
  border:1px solid #ffffff !important;
}
.ctrl #ff11-legend-bar [data-lg="time"] button.on{
  border-color:#ffffff !important;
}
.ctrl #ff11-legend-bar .ff11-lgreset-out{
  border:1px solid #ffffff !important;
}