/* =========================================================================
   FFEWES — PRIORITAS PENANGANAN PREDIKSI BANJIR  (v20260913-THR1)
   -------------------------------------------------------------------------
   Toggle di SEBELAH KANAN slider waktu prediksi (di bawah running text) +
   panel tabel ringkas 1/4 layar + panel INFO RINCI vertikal.

   Prinsip: LAYER ANALYTICS/VIEW — tidak ada data baru. Seluruh nilai dibaca
   dari master yang sudah ada (02/03/04/05/06/07/08/09/10/11 + registry
   diseminasi + operasional bangunan air) via satu shared state (FFEWES_FS).

   Gaya mengikuti mockup terakhir: panel gelap navy (seperti #ffewes-48h-panel),
   header gradient #102842→#0c1f33, tag kuning #ffd400, tombol hijau/merah.
   ========================================================================= */

/* ---------- 1. TOGGLE (duduk di dalam #ff11-tbcaption, kanan slider) ----------
   vPRIO2 — DISKUSI USER: bar legenda atas jangan tebal/makan tempat.
   Toggle kini TANPA kotak (bukan pill): dua baris teks rata KANAN
   ("PRIORITAS PENANGANAN" / "PREDIKSI BANJIR"), lalu GARIS VERTIKAL, lalu
   status ON/OFF di sebelah kanannya dengan font sebesar keterangan
   "Prediksi banjir akan terjadi …" (12px — sama dgn #ff11-tbcap-txt).
   Tinggi dikunci 28px (setinggi baris slider) ⇒ tinggi #ff11-tbcaption kembali
   34px seperti sebelum toggle dipasang. */
.ff11-tbcaption .ff11-prio-sl{
  display:flex!important; align-items:center!important; justify-content:flex-end!important;
  flex:0 0 auto!important; height:28px!important;
  margin-left:9px!important; padding-left:9px!important;
  border-left:1px solid rgba(120,170,215,.28)!important;
  pointer-events:auto!important;
}
.ff11-prio-tgl{
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; gap:0; cursor:pointer;
  height:100%; max-height:28px; padding:0; margin:0; border:0; background:none;
  box-shadow:none; font-family:Arial,'Segoe UI',sans-serif;
}
.ff11-prio-tgl .ffpw-lbl{
  display:block; text-align:right; white-space:nowrap;
  font-size:8px; font-weight:800; line-height:1.15; letter-spacing:.3px;
  text-transform:uppercase; color:#8fe6ff;
}
/* 1B — garis vertikal di sebelah kanan teks dua baris */
.ff11-prio-tgl .ffpw-st{
  display:block; margin-left:9px; padding-left:9px;
  border-left:1px solid rgba(140,190,230,.55);
  font-size:12px; font-weight:800; line-height:1; letter-spacing:.4px;
  color:#bcd4e6; text-transform:uppercase;
}
.ff11-prio-tgl:hover .ffpw-lbl{ color:#cdefff; }
.ff11-prio-tgl:hover .ffpw-st{ color:#eaf6ff; }
.ff11-prio-tgl.on .ffpw-lbl{ color:#ffe082; }
/* 1C — status ON di kanan garis vertikal, font 12px (sebesar keterangan prediksi) */
.ff11-prio-tgl.on .ffpw-st{ color:#ffd400; text-shadow:0 0 7px rgba(255,212,0,.45); }
.ff11-prio-tgl:focus-visible{ outline:2px solid #8fe6ff; outline-offset:2px; border-radius:4px; }
@media (max-width:1250px){
  .ff11-prio-tgl .ffpw-lbl{ font-size:7.5px; }
  .ff11-prio-tgl .ffpw-st{ font-size:11px; margin-left:7px; padding-left:7px; }
}

/* ---------- 2. PANEL 1/4 LAYAR (tabel ringkas / info rinci) ---------- */
#ffewes-prio-panel{
  display:none; position:fixed; z-index:7665; background:#0a1a28;
  border:1px solid #52738d; overflow:hidden; box-shadow:0 18px 55px rgba(0,0,0,.6);
  color-scheme:dark; pointer-events:auto;
}
#ffewes-prio-panel.compact{
  display:flex; flex-direction:column; right:0; top:var(--headerH,58px);
  bottom:var(--pos-bottom,112px); width:clamp(320px,26vw,580px); border-radius:12px 0 0 0;
}
#ffewes-prio-panel.large{ left:16px; right:16px; width:auto; max-width:none; border-radius:12px; }
#ffewes-prio-panel.closed{ display:none; }
@media (max-width:1100px){
  #ffewes-prio-panel.compact{ width:clamp(320px,42vw,540px); }
}

.ffpw-head{
  display:flex; align-items:center; gap:8px; padding:9px 12px; flex:0 0 auto;
  background:linear-gradient(180deg,#102842,#0c1f33); border-bottom:1px solid rgba(255,255,255,.5);
  position:relative; z-index:2;
}
.ffpw-head .ffpw-hd{ min-width:0; }
.ffpw-tag{
  display:block; font-size:9px; font-weight:900; letter-spacing:.6px;
  text-transform:uppercase; color:#ffd400;
}
.ffpw-head b{ display:block; font-size:13px; color:#fff; margin-top:2px; }
/* vPRIO4 — permintaan user: font baris "Prediksi 1 · horizon mengikuti posisi slider
   (forward-looking)" dinaikkan dari 8,5px → 9px (sama dengan .ffpw-tag). */
.ffpw-head .ffpw-sub{ display:block; font-size:9px; color:#8fb2d2; margin-top:2px; line-height:1.2; }
.ffpw-head button{
  pointer-events:auto; cursor:pointer; border-radius:7px; padding:4px 10px;
  font-size:10px; font-weight:800; white-space:nowrap;
  appearance:none; -webkit-appearance:none; position:relative; z-index:3;
}
.ffpw-expand{ margin-left:auto; border:1px solid #2ee0a4; background:#0e3a52; color:#2ee0a4; }
.ffpw-expand:hover{ background:#13506e; border-color:#7cf6c2; color:#fff; }
.ffpw-close{ border:1px solid #b04048; background:#0e3a52; color:#ff6b6b; }
.ffpw-close:hover{ background:#34141a; border-color:#ffb3b3; color:#fff; }
.ffpw-back{ border:1px solid #70c5ef; background:#0e3a52; color:#8fe6ff; margin-bottom:8px; }
.ffpw-back:hover{ background:#13506e; border-color:#8fe6ff; color:#fff; }

.ffpw-hint{ padding:6px 12px 0; font-size:8.5px; line-height:1.3; color:#8fb2d2; flex:0 0 auto; }
.ffpw-wrap{ flex:1; min-height:0; overflow:auto; padding:6px 12px 12px; }
.ffpw-detail{ flex:1; min-height:0; overflow:auto; padding:10px 12px 16px; }

/* ---------- 3. TABEL RINGKAS : Pri | Lokasi | H | Dampak | Gap | Info Rinci ---------- */
.ffpw-table{
  width:100%; border-collapse:collapse; table-layout:fixed;
  font-size:9.5px; color:#eaf6ff; background:#0a1a28;
}
.ffpw-table thead th{
  position:sticky; top:0; z-index:2; background:#102a42; color:#cfe6f5;
  font-size:7.5px; text-transform:uppercase; letter-spacing:.3px; padding:5px 5px;
  text-align:left; border-bottom:1px solid rgba(255,255,255,.22); white-space:nowrap;
}
.ffpw-table td{
  padding:5px 5px; border-bottom:1px solid rgba(255,255,255,.09);
  vertical-align:top; overflow-wrap:break-word; word-break:normal;
}
.ffpw-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.028); }
.ffpw-table tbody tr:hover td{ background:rgba(24,169,214,.12); }
.ffpw-table tbody tr.sel td{ background:rgba(255,212,0,.16)!important; }
.ffpw-table .c-pri{ text-align:center; font-weight:900; font-size:11px; }
.ffpw-table tr.p1 .c-pri{ color:#ff6b6b; }
.ffpw-table tr.p2 .c-pri{ color:#ffb04a; }
.ffpw-table tr.p3 .c-pri{ color:#ffd400; }
.ffpw-table tr.p4 .c-pri{ color:#8fe6ff; }
.ffpw-table .c-h{ text-align:center; font-weight:800; color:#d9f8ff; font-size:9px; }
.ffpw-table .c-lok b{ display:block; font-weight:800; color:#eaf6ff; font-size:9.5px; line-height:1.2; }
.ffpw-table .c-lok span{ display:block; margin-top:1px; font-size:8px; color:#9fc3e0; line-height:1.15; }
.ffpw-table .c-dmp,.ffpw-table .c-gap{ text-align:center; font-weight:800; font-size:9px; }
.ffpw-dmp-1{ color:#ffd84a; } .ffpw-dmp-2{ color:#ff9c2a; }
.ffpw-dmp-3{ color:#ef4444; } .ffpw-dmp-4{ color:#ff8a8a; }
.ffpw-gap-0{ color:#7cf6c2; } .ffpw-gap-1{ color:#ffd400; } .ffpw-gap-2{ color:#ff8c8c; }
.ffpw-table .c-gap i{ display:block; font-style:normal; font-size:7px; color:#8fb2d2; font-weight:600; }
.ffpw-info{
  display:block; width:100%; cursor:pointer; border-radius:6px; padding:3px 4px;
  appearance:none; -webkit-appearance:none;
  border:1px solid #70c5ef; background:#0e3a52; color:#8fe6ff;
  font-size:8.5px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
.ffpw-info:hover{ background:#13506e; border-color:#8fe6ff; color:#fff; }
.ffpw-empty{ padding:14px 4px; text-align:center; color:#8fb2d2; font-size:10px; }

/* ---------- 3b. vPRIO3 — TABEL LAYAR PENUH (banyak kolom, scroll horizontal) ----------
   Satu tabel utuh (thead+tbody), border antar sel tegas, sel nowrap.
   Lebar tabel ditentukan min-width → kolom tidak pernah terpotong/melipat. */
.ffpw-table.ffpw-wide{
  table-layout:auto; border-collapse:collapse;
  min-width:4050px; font-size:9px; color:#eaf6ff;
}
.ffpw-table.ffpw-wide thead th{
  font-family:'Segoe UI',Arial,sans-serif; font-size:8px; font-weight:800;
  text-transform:uppercase; letter-spacing:.2px; text-align:center; vertical-align:middle;
  padding:6px 7px; color:#cfe6f5; background:#102a42!important;
  border:1px solid #2e4d6b; white-space:nowrap; position:static;
}
.ffpw-table.ffpw-wide td{
  padding:5px 8px; font-size:9px; text-align:center; vertical-align:middle;
  white-space:nowrap; border:1px solid #24435f; background:#0a1a28!important;
  overflow:hidden; text-overflow:ellipsis; max-width:190px;
}
.ffpw-table.ffpw-wide tbody tr:nth-child(even) td{ background:#0d1f30!important; }
.ffpw-table.ffpw-wide tbody tr:hover td{ background:rgba(24,169,214,.16)!important; }
.ffpw-table.ffpw-wide td.txt{ text-align:left; }
.ffpw-table.ffpw-wide td.c-lok{ min-width:170px; max-width:210px; }
.ffpw-table.ffpw-wide td.c-lok b{ display:block; font-size:9px; color:#eaf6ff; overflow:hidden; text-overflow:ellipsis; }
.ffpw-table.ffpw-wide td.c-pri{ font-weight:900; font-size:11px; }
.ffpw-table.ffpw-wide td.c-h{ font-weight:800; color:#d9f8ff; }
.ffpw-table.ffpw-wide td.c-num{ color:#9fc3e0; }
.ffpw-table.ffpw-wide td.c-dmp,
.ffpw-table.ffpw-wide td.c-gap{ font-weight:800; }
.ffpw-table.ffpw-wide td.c-tier{ font-weight:700; color:#eaf6ff; }
/* vPRIO5 — kolom Event ID TIDAK lagi memakai font mono (Consolas/Courier = sempit);
   memakai keluarga sans LEBAR yang sama dgn seluruh panel (lihat blok 6 di bawah). */
.ffpw-table.ffpw-wide td.evid{ font-size:8px; color:#8fe6ff; text-align:left; max-width:230px; letter-spacing:.1px; }
.ffpw-table.ffpw-wide td.c-act{ min-width:78px; padding:4px 6px; }
.ffpw-table.ffpw-wide td.c-act .ffpw-info{ font-size:8px; padding:3px 4px; }
.ffpw-table.ffpw-wide tr.sel td{ background:rgba(255,212,0,.16)!important; }
/* vPRIO5 — kolom "Faktor" memuat kalimat (mis. "fasilitas kritis: TITIK JEMPUT, SHELTER, …")
   → diberi lebar khusus agar tidak terpotong ellipsis; sisa ruang tabel masih cukup. */
.ffpw-table.ffpw-wide td.c-faktor{ min-width:210px; max-width:340px; }
/* vPRIO5 — tabel RINGKAS: karena font kini lebih lebar, baris dibuat SERAGAM 34px
   (2 baris teks lokasi) supaya tinggi baris tidak naik-turun & teks tetap utuh (tanpa elipsis). */
.ffpw-table:not(.ffpw-wide) tbody tr{ height:34px; }
.ffpw-table:not(.ffpw-wide) tbody td{ vertical-align:middle; }
#ffewes-prio-panel.large .ffpw-wrap{ padding:8px 14px 14px; }
#ffewes-prio-panel.large .ffpw-hint{ font-size:9px; }
.ffpw-warnrow{
  margin:0 0 8px; padding:6px 9px; border-radius:8px; font-size:8.5px; line-height:1.3;
  border:1px solid #d9bf54; background:rgba(58,47,12,.55); color:#ffe082;
}
.ffpw-verify{
  display:inline-block; margin-left:4px; padding:1px 5px; border-radius:5px;
  border:1px solid #d9bf54; background:rgba(58,47,12,.7); color:#ffe082;
  font-size:7px; font-weight:800; letter-spacing:.3px;
}

/* ---------- 4. INFO RINCI (vertikal) ---------- */
.ffpw-dhead{
  border:1px solid rgba(255,255,255,.2); border-radius:9px; background:#0d2134;
  padding:8px 10px; margin-bottom:8px;
}
.ffpw-dhead b{ display:block; font-size:14px; color:#fff; line-height:1.15; }
.ffpw-dhead span{ display:block; font-size:9.5px; color:#bad0df; line-height:1.3; margin-top:2px; }
.ffpw-pri{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  padding:7px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.24); background:#0d2437;
}
.ffpw-pri .p{
  font-size:20px; font-weight:900; line-height:1; color:#ff6b6b;
}
.ffpw-pri.k2 .p{ color:#ffb04a; } .ffpw-pri.k3 .p{ color:#ffd400; } .ffpw-pri.k4 .p{ color:#8fe6ff; }
.ffpw-pri .t{ font-size:10.5px; color:#eaf6ff; font-weight:800; }
.ffpw-pri .t span{ display:block; font-size:8.5px; color:#9fc3e0; font-weight:600; margin-top:2px; }
.ffpw-sec{ border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(8,25,39,.82); margin-bottom:8px; overflow:hidden; }
.ffpw-sec>h4{
  margin:0; padding:6px 9px; background:linear-gradient(180deg,#102842,#0c1f33);
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:8.5px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; color:#ffd400;
}
.ffpw-sec>div{ padding:7px 9px; }
.ffpw-kv{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:3px 8px; }
.ffpw-kv dt{ font-size:8.5px; color:#8fb2d2; font-weight:700; line-height:1.35; }
.ffpw-kv dd{ margin:0; font-size:9.5px; color:#eef8ff; line-height:1.35; overflow-wrap:anywhere; }
.ffpw-kv dd em{ font-style:normal; color:#9fc3e0; }
.ffpw-tbl{ width:100%; border-collapse:collapse; font-size:8.5px; color:#eaf6ff; }
.ffpw-tbl th{
  text-align:left; padding:4px 5px; background:#102a42; color:#cfe6f5;
  font-size:7.5px; text-transform:uppercase; letter-spacing:.25px;
  border-bottom:1px solid rgba(255,255,255,.22); white-space:nowrap;
}
.ffpw-tbl td{ padding:4px 5px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.ffpw-tbl td.n{ text-align:right; white-space:nowrap; font-weight:700; }
.ffpw-tbl td.g{ text-align:right; white-space:nowrap; font-weight:900; color:#ff8c8c; }
.ffpw-tbl td.g0{ color:#7cf6c2; }
.ffpw-fac{ font-size:8.5px; color:#eef8ff; line-height:1.35; }
.ffpw-fac b{ color:#d9f8ff; }
.ffpw-alasan{
  border:1px solid #d9bf54; border-radius:9px; background:rgba(58,47,12,.5);
  padding:8px 10px; margin-bottom:4px;
}
.ffpw-alasan h4{
  margin:0 0 4px; font-size:8.5px; font-weight:900; letter-spacing:.6px;
  text-transform:uppercase; color:#ffd400;
}
.ffpw-alasan p{ margin:0; font-size:9.5px; line-height:1.45; color:#ffe8b0; }
.ffpw-muted{ color:#9fc3e0; font-size:8.5px; line-height:1.35; }

/* ---------- 4b. vPRIO5 — SEMUA FONT DI DALAM TABEL/PANEL PRIORITAS DIBUAT LEBIH LEBAR ----------
   Permintaan user: "Buat semua font dalam tabel prioritas menjadi lebih lebar/wide,
   jangan jenis narrow."
   Hasil ukur sebelum perubahan (live): seluruh sel memakai 'Segoe UI' (lebar normal),
   KECUALI kolom Event ID = Consolas/'Courier New'/monospace (paling sempit), dan
   header tabel memakai 'Segoe UI',Arial.
   → Seluruh panel (tabel ringkas, tabel layar penuh, header, dan panel INFO RINCI)
     memakai keluarga sans LEBAR: Verdana → DejaVu Sans → Tahoma → Trebuchet MS → Segoe UI.
     Verdana/DejaVu Sans jauh lebih lebar dari Arial/Segoe UI pada ukuran font yg sama.
   → font-stretch:100% menetralkan efek condensed (mis. 'Arial Narrow' + font-stretch:condensed
     yang dipakai bagian lain halaman ini, agar tidak ikut terbawa turun).
   Tidak mengubah ukuran font, warna, tata letak, atau data apa pun. */
#ffewes-prio-panel,
#ffewes-prio-panel *{
  font-family:Verdana,'DejaVu Sans',Tahoma,'Trebuchet MS','Segoe UI',Arial,sans-serif!important;
  font-stretch:100%!important;
}
/* label kapital (judul/kolom) tetap sedikit dirapatkan agar header 46 kolom tidak melebar berlebihan */
#ffewes-prio-panel .ffpw-tag,
#ffewes-prio-panel .ffpw-table thead th,
#ffewes-prio-panel .ffpw-sec>h4,
#ffewes-prio-panel .ffpw-tbl th{ letter-spacing:.15px!important; }

/* ---------- 5. TEMA TERANG: panel tetap gelap (di atas peta yg gelap) ---------- */
body.ff-dark.ff-theme-light #ffewes-prio-panel{ background-color:#0a1a28!important; border-color:#52738d!important; }
body.ff-dark.ff-theme-light .ffpw-table tbody tr:nth-child(even) td{ background-color:rgba(255,255,255,.028)!important; }
body.ff-dark.ff-theme-light .ff11-prio-tgl .ffpw-lbl{ color:#8fe6ff; }
body.ff-dark.ff-theme-light .ff11-prio-tgl.on .ffpw-lbl{ color:#ffe082; }
body.ff-dark.ff-theme-light .ff11-prio-tgl .ffpw-st{ color:#bcd4e6; }
body.ff-dark.ff-theme-light .ff11-prio-tgl.on .ffpw-st{ color:#ffd400; }