/* =========================================================================
   FFEWES0926 — TREE RAIL KIRI "PETA & WS" (HISTORI + OBSERVASI + AKTUAL)
   -------------------------------------------------------------------------
   v20260829-RR17 — subjudul, search/reset, item [ON/OFF][Peta][Tabel],
   opacity layer tematik, tabel mock, legenda dinamis. #daslist disembunyikan
   (renderDASlist tetap berjalan utk data & binding legenda existing).
   ========================================================================= */

#daslist{ display:none!important; }

/* rail kiri = scroll area luar utk 9+ grup */
.rail.left{ pointer-events:auto!important; overflow-y:auto!important; overflow-x:hidden!important; scrollbar-gutter:stable!important; }

.ffewes-ws-tree{
  pointer-events:auto;
  flex:0 0 auto;
  height:auto;
  overflow:visible;
  /* v393 — isi panel kiri digeser KANAN agar tidak tertimpa pita Edge Drawer kiri (28px) */
  padding-left:22px; /* v481 - jarak pita ke box 2px */
  padding-right:0px; /* v482 - jarak kanan box->scrollbar 4px (rail padR 4) */
}
.ffewes-ws-sub{
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#7cf6c2; /* v272 — judul rail kiri: +2pt & hijau terang */
  border-bottom:1px solid #263650;
  padding:2px 4px 5px;
  margin-bottom:6px;
}
.ffewes-ws-tools{ display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap; }
.ffewes-ws-search{
  flex:1 1 100%;
  min-width:0;
  box-sizing:border-box;
  height:24px;
  padding:3px 8px;
  border:1px solid #2a3a55;
  border-radius:8px;
  background:#0a1420;
  color:#d7e5f1;
  font:700 9.5px/1 Arial,'Segoe UI',sans-serif;
}
.ffewes-ws-search::placeholder{ color:#5c7590; }
.ffewes-ws-def,.ffewes-ws-off{
  flex:1 1 0;
  height:22px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:8px;
  background:#0b2137;
  color:#8ebeff;
  font:800 8.5px/1 Arial,'Segoe UI',sans-serif;
  cursor:pointer;
}
.ffewes-ws-def:hover,.ffewes-ws-off:hover{ border-color:#ffffff; color:#fff; }

.ffewes-ws-group{
  display:flex; flex-direction:column; min-height:0; max-height:70vh;
  border:2px solid #4d7094;   /* v398 - border grup dipertebal 2px & lebih terang */
  border-radius:9px;
  background:#080e18;
  overflow:hidden;
  margin-bottom:8px;
}
.ffewes-ws-group-h{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 8px;
  background:linear-gradient(180deg,#0d2036,#0b1b2b);
  border-bottom:1px solid #16263a;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.ffewes-ws-group-h .gn{
  flex:0 0 auto;
  min-width:19px; height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#14314f;
  border:1px solid rgba(255,255,255,.6);
  color:#ffffff;
  font:800 11px/1 Arial,'Segoe UI',sans-serif; /* v310 — penomoran GU +2px (9→11px) */
}
.ffewes-ws-group-h .g{ flex:1 1 auto; min-width:0; font-size:8.5px; font-weight:800; letter-spacing:.5px; color:#ffd400; text-transform:uppercase; }
.ffewes-ws-tgl{
  flex:0 0 auto;
  min-width:46px;
  height:18px;
  padding:0 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.6);
  background:#0b2137;
  color:#8ebeff;
  font:800 8.5px/1 Arial,'Segoe UI',sans-serif;
  letter-spacing:.3px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.ffewes-ws-tgl:hover{ border-color:#ffffff; color:#fff; }
.ffewes-ws-tgl:focus-visible,.ffewes-ws-group-h:focus-visible{ outline:2px solid #ffd400; outline-offset:1px; }
.ffewes-ws-group[data-closed="1"] .ffewes-ws-body{
  touch-action:pan-y; display:none; }
.ffewes-ws-body{
  flex:1 1 auto;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  max-height:60vh;
  min-height:0;
  padding:5px 6px;
  display:flex;
  flex-direction:column;
  gap:3px;
  overscroll-behavior:auto!important; /* v238: setelah isi grup habis discroll, lanjut ke rail */
  scrollbar-width:thin;
  scrollbar-color:#4a5f78 #050b12;
}
.ffewes-ws-body::-webkit-scrollbar{ width:8px; }
.ffewes-ws-body::-webkit-scrollbar-track{ background:#050b12; border-radius:7px; }
.ffewes-ws-body::-webkit-scrollbar-thumb{ background:#4a5f78; border-radius:7px; border:1px solid #0b1d2e; }

.ffewes-ws-row{ display:flex; flex-direction:column; gap:3px; }
/* v317 — jenis bangunan (B09 infra-*): SATU BARIS — nama di kiri, tombol Tabel
   di kanan teks (row horizontal), hemat ruang vertikal */
.ffewes-ws-row-inline{ flex-direction:row; align-items:center; gap:6px; }
.ffewes-ws-row-inline .ffewes-ws-item{ flex:1 1 auto; width:auto; min-width:0; }
.ffewes-ws-row-inline .ffewes-ws-btns{ flex:0 0 auto; }
.ffewes-ws-row-inline .ffewes-ws-mini{ min-width:44px; }
.ffewes-ws-item{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:4px 6px;
  border:1px solid #1c3048;
  border-radius:7px;
  background:#0c1626;
  color:#d7e5f1;
  font:700 9.5px/1.2 Arial,'Segoe UI',sans-serif;
  text-align:left;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.ffewes-ws-item:hover{ background:#10283e; border-color:#294965; }
/* v319 — item belum aktif (WS Pemali–Comal): abu2, tidak bisa diklik */
.ffewes-ws-item-disabled,
.ffewes-ws-item-disabled:hover{
  opacity:.45;
  background:#0a0e14;
  border-color:#2a3038;
  color:#6b7683;
  cursor:not-allowed;
}
.ffewes-ws-item-disabled .sw{ background:#3a4048; border-color:#3a4048; box-shadow:none; }
.ffewes-ws-item .sw{
  flex:0 0 auto;
  width:9px; height:9px;
  border-radius:3px;
  border:1px solid #355169;
  background:#0a1420;
  transition:background .15s,border-color .15s;
}
.ffewes-ws-item.on .sw{ background:#2ee0a4; border-color:#7cf6c2; box-shadow:0 0 5px rgba(46,224,164,.5); }
.ffewes-ws-item .tx{ flex:1 1 auto; min-width:0; }
.ffewes-ws-btns{ display:flex; gap:3px; flex-wrap:wrap; }
.ffewes-ws-mini{
  flex:0 0 auto;
  min-width:38px;
  height:17px;
  padding:0 5px;
  border:1px solid #2a3a55;
  border-radius:6px;
  background:#0b2137;
  color:#9fb4c9;
  font:800 7.5px/1 Arial,'Segoe UI',sans-serif;
  cursor:pointer;
}
.ffewes-ws-mini:hover{ border-color:#52738d; color:#fff; }
.ffewes-ws-mini.on{ background:#14314f; color:#7cf6c2; border-color:#2b5678; }
/* v310 — baris khusus Bangunan Air — Inventaris: dua tombol Peta & Tabel */
.ffewes-ws-rowbtns{ padding:2px 4px; }
.ffewes-ws-rowbtns .ffewes-ws-btns{ display:flex; gap:4px; }
.ffewes-ws-mini-wm{ min-width:52px; }
.ffewes-ws-mini-wm.on{ background:#0e3a52; color:#2ee0a4; border-color:#2ee0a4; }
.ffewes-ws-op{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:#8fd4ff;
}
.ffewes-ws-op .oplab{ font-size:9px; font-weight:800; letter-spacing:.3px; color:#8fd4ff; text-transform:uppercase; }
.ffewes-ws-op .opval{ font-size:9px; font-weight:800; color:#7cf6c2; }
.ffewes-ws-op input[type="range"]{ flex:1 1 auto; height:3px; min-width:0; accent-color:#18c2e6; }
.ffewes-ws-detail{ margin-top:2px; }
.ffewes-ws-tblwrap{ max-height:150px; overflow:auto; border:1px solid #1c3048; border-radius:6px; background:#0a1420; }
.ffewes-ws-tbl{ width:100%; border-collapse:collapse; font-size:7.5px; }
.ffewes-ws-tbl th{ background:#102a42; color:#dce9f3; padding:2px 4px; text-align:left; white-space:nowrap; position:sticky; top:0; }
.ffewes-ws-tbl td{ border-top:1px solid #16263a; padding:2px 4px; color:#d7e5f1; white-space:nowrap; }
.ffewes-ws-src{ font-size:6.5px; color:#5c7590; padding:3px 5px; }

.ffewes-ws-legend{ display:flex; flex-direction:column; gap:3px; padding:4px; }
.ffewes-ws-legend-item{ display:flex; align-items:center; gap:7px; font-size:8.5px; color:#d7e5f1; }
.ffewes-ws-legend-item .lgsw{ flex:0 0 auto; width:14px; height:9px; border-radius:3px; border:1px solid #355169; }

.ffewes-ws-empty{ font-size:8px; color:#7791a9; padding:4px 6px; }

/* scrollbar rail kiri (luar) */
.rail.left::-webkit-scrollbar{ width:8px; }
.rail.left::-webkit-scrollbar-track{ background:#050b12; }
.rail.left::-webkit-scrollbar-thumb{ background:#4a5f78; border-radius:7px; border:1px solid #0b1d2e; }
.rail.left{ scrollbar-width:thin; scrollbar-color:#4a5f78 #050b12; }

/* v241/v355 — KETERANGAN PETA: legenda dinamis layer aktif (tanpa ON/OFF)
   Block mengalir MENYAMPING (flex wrap) — Sungai Orde 1 & 2 sebaris; item per-jenis
   ditata menyamping (lihat aturan di bawah). */
.ffewes-ws-legendbody{ max-height:300px; }
.ffewes-ws-legend{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; gap:5px!important; align-items:flex-start!important; padding:4px!important; }
.ffewes-ws-legend-block{ flex:1 1 auto; min-width:96px; border:1px solid rgba(255,255,255,.6); border-radius:7px; background:#0c1626; padding:5px 6px; margin-bottom:0; }
.ffewes-ws-legend-title{ font-size:8px; font-weight:800; letter-spacing:.5px; color:#ffd400; text-transform:uppercase; margin-bottom:3px; }
.ffewes-ws-legend-items{ display:flex; flex-wrap:wrap; gap:3px 10px; align-items:center; }
.ffewes-ws-legend-item{ display:flex; align-items:center; gap:5px; font-size:8.5px; color:#d7e5f1; padding:1px 0; white-space:nowrap; }
.ffewes-ws-legend-item .lgsw{ flex:0 0 auto; width:12px; height:8px; border-radius:2px; border:1px solid #355169; }
.ffewes-ws-legend-item .lgline{ flex:0 0 auto; width:16px; height:0; }
.ffewes-ws-legendsrc{ font-size:6.5px; color:#5c7590; margin-top:3px; line-height:1.3; }

/* v355/v356 — tata letak per jenis:
   1) Sungai Orde 1 & Orde 2 SEBARIS
   2) PCH: 2 item per baris (3 baris)
   3) PDA/AWLR: 2 item per baris
   4) Batas WS: item hitam sebaris; item abu2 (Pemali-Comal) TURUN ke baris berikutnya */
.ffewes-ws-legend-block[data-k="sungai-o1"] .ffewes-ws-legend-items,
.ffewes-ws-legend-block[data-k="sungai-o2"] .ffewes-ws-legend-items,
.ffewes-ws-legend-block[data-k="batas-das"] .ffewes-ws-legend-items{
  flex-wrap:nowrap;
}
.ffewes-ws-legend-block[data-k="batas-ws"] .ffewes-ws-legend-items{ flex-wrap:wrap; }
.ffewes-ws-legend-block[data-k="batas-ws"] .ffewes-ws-legend-item{ flex:1 1 100%; }
/* PCH: 2 item per baris — GRID 2 kolom (3 baris) */
.ffewes-ws-legend-block[data-k="pch"]{ width:280px; flex:0 0 auto; }
.ffewes-ws-legend-block[data-k="pch"] .ffewes-ws-legend-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 8px; }
.ffewes-ws-legend-block[data-k="pch"] .ffewes-ws-legend-item{ white-space:normal; }
/* PDA/AWLR: 2 item per baris — GRID 2 kolom (Normal&Waspada / Siaga&Awas) */
.ffewes-ws-legend-block[data-k="pda"]{ width:260px; flex:0 0 auto; }
.ffewes-ws-legend-block[data-k="pda"] .ffewes-ws-legend-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 8px; }
.ffewes-ws-legend-block[data-k="pda"] .ffewes-ws-legend-item{ white-space:normal; }
.ffewes-ws-legend-block[data-k="sungai-o1"] .ffewes-ws-legend-item,
.ffewes-ws-legend-block[data-k="sungai-o2"] .ffewes-ws-legend-item,
.ffewes-ws-legend-block[data-k="batas-das"] .ffewes-ws-legend-item,
.ffewes-ws-legend-block[data-k="batas-ws"] .ffewes-ws-legend-item{ flex:0 0 auto; }

/* v242 — label "Legenda Layer Aktif" di dalam card KETERANGAN PETA */
.ffewes-ws-legendcap{
  font-size:8px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#8ebeff;
  border-bottom:1px solid #16263a;
  padding:2px 2px 5px;
  margin-bottom:5px;
}

/* v275 — SUBGRUP (SG) di dalam Grup Utama (GU) rail kiri */
.ffewes-ws-subgrp{
  flex-shrink:0;
  display:flex; flex-direction:column; min-height:0; max-height:60vh;
  border:1px solid #1c3048;
  border-radius:7px;
  background:#0a1420;
  margin-bottom:4px;
  overflow:visible; /* v303 — jangan potong; scroll anak (.sgbody) tetap jalan */
}
.ffewes-ws-subgrp[data-closed="1"] .ffewes-ws-sgbody{
  touch-action:pan-y;
  min-height:0!important; display:none; }
.ffewes-ws-sgh{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  background:linear-gradient(180deg,#0d2036,#0b1b2b);
  border-bottom:1px solid #16263a;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.ffewes-ws-sgh .sgl{
  flex:0 0 auto;
  font-size:9.5px; /* v310 — penomoran SG/SSG +2px (7.5→9.5px) */
  font-weight:900;
  letter-spacing:.3px;
  color:#8ebeff;
  font-family:Consolas,Menlo,monospace;
}
.ffewes-ws-sgh .sgt{
  flex:1 1 auto;
  min-width:0;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.3px;
  color:#ffffff;
  text-transform:uppercase;
}
.ffewes-ws-sgh .arr{ font-size:7px; color:#8ebeff; }
/* v323 — subgrup WS belum aktif (C03 Pemali–Comal): font dibedakan (abu2, italic) */
.ffewes-ws-sgh-inactive{ opacity:.78; }
.ffewes-ws-sgh-inactive .sgl{ color:#6b7683 !important; }
.ffewes-ws-sgh-inactive .sgt{ color:#9aa3af !important; font-style:italic; }
.ffewes-ws-sgh-inactive .arr{ color:#6b7683; }
.ffewes-ws-sgh-inactive .ws-inact-tag{
  font-style:italic;
  font-weight:400;
  font-size:7.5px;
  letter-spacing:.2px;
  color:#8a8f98;
  margin-left:4px;
  text-transform:none;
}
.ffewes-ws-sgbody{
  padding:4px 5px;
  display:flex;
  flex-direction:column;
  gap:3px;
  /* v280 — scroll SUBGRUP: min 25vh (1/4 panel) agar terbaca, max 45vh, chaining */
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
    max-height:45vh!important;
  overscroll-behavior:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#4a5f78 #050b12;
}
.ffewes-ws-sgbody::-webkit-scrollbar{ width:8px; }
.ffewes-ws-sgbody::-webkit-scrollbar-track{ background:#050b12; border-radius:7px; }
.ffewes-ws-sgbody::-webkit-scrollbar-thumb{ background:#4a5f78; border-radius:7px; border:1px solid #0b1d2e; }

/* v277 — level 3: sub-SG di dalam C01/C02 (indent lebih dalam) */
/* v279 — perbaiki scroll 8 subgrup B01..B08 di dalam C01/C02:
   - .ffewes-ws-subgrp (C01/C02) kontennya harus bisa discroll (max-height + overflow)
   - subgrp2 jangan menyusut (flex-shrink 0) agar tidak terpotong */
.ffewes-ws-subgrp2{ margin-left:6px; flex-shrink:0; }
/* kontainer C01/C02 (level2 sgbody) memuat 8 subgrup — pastikan scroll */
.ffewes-ws-subgrp>.ffewes-ws-sgbody{
  touch-action:pan-y;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
    max-height:45vh!important;
  overscroll-behavior:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#4a5f78 #050b12;
}
.ffewes-ws-subgrp>.ffewes-ws-sgbody::-webkit-scrollbar{ width:8px; }
.ffewes-ws-subgrp>.ffewes-ws-sgbody::-webkit-scrollbar-track{ background:#050b12; border-radius:7px; }
.ffewes-ws-subgrp>.ffewes-ws-sgbody::-webkit-scrollbar-thumb{ background:#4a5f78; border-radius:7px; border:1px solid #0b1d2e; }
/* v280 — isi sub-SG level3 (B01..B08 di C01/C02): scroll + min 25vh + chaining */
.ffewes-ws-subgrp2 .ffewes-ws-sgbody{
  touch-action:pan-y;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
    max-height:45vh!important;
  overscroll-behavior:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#4a5f78 #050b12;
}
.ffewes-ws-subgrp2 .ffewes-ws-sgbody::-webkit-scrollbar{ width:8px; }
.ffewes-ws-subgrp2 .ffewes-ws-sgbody::-webkit-scrollbar-track{ background:#050b12; border-radius:7px; }
.ffewes-ws-subgrp2 .ffewes-ws-sgbody::-webkit-scrollbar-thumb{ background:#4a5f78; border-radius:7px; border:1px solid #0b1d2e; }
.ffewes-ws-subgrp2 .ffewes-ws-sgbody .ffewes-ws-item .tx{ font-size:8.5px; }


/* v281 — skema font hierarki rail kiri:
   1) judul panel kiri (HISTORI & KONDISI AKTUAL) = HIJAU TERANG (#7cf6c2)
   2) judul Grup Utama = KUNING (#ffd400)
   3) judul SG = PUTIH
   4) judul SSG (B01..B08 di C01/C02) = HIJAU TERANG
   Font isi Grup/SG/SSG (item layer) = PUTIH */
.ffewes-ws-sub{ color:#7cf6c2 !important; }
.ffewes-ws-group-h .g{ color:#ffd400 !important; }
.ffewes-ws-sgh .sgt{ color:#ffffff !important; }
.ffewes-ws-subgrp2 .ffewes-ws-sgh .sgt{ color:#7cf6c2 !important; }
.ffewes-ws-item .tx{ color:#8fd4ff !important; } /* v282 — isi item layer: BIRU TERANG */

/* v286 — panel tabel item rail kiri (1/4 layar KIRI peta + bisa diperbesar) */
#ffewes-left-table-panel{
  display:none; position:fixed; z-index:7900; background:#0a1a28; border:1px solid #52738d;
  overflow:hidden; box-shadow:0 18px 55px rgba(0,0,0,.6); pointer-events:auto;
}
#ffewes-left-table-panel.compact{
  display:flex; flex-direction:column; left:0; top:var(--headerH,58px); bottom:var(--pos-bottom,112px);
  width:clamp(300px,25vw,560px); border-radius:0 12px 0 0;
}
#ffewes-left-table-panel.large{
  display:flex; flex-direction:column; left:16px; right:16px; top:var(--headerH,58px); bottom:var(--pos-bottom,112px);
  width:auto; border-radius:12px;
}
#ffewes-left-table-panel.closed{ display:none; }
.ffewes-lt-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:#0e2b4d; border-bottom:1px solid #3b5b75; }
.ffewes-lt-head>div{ flex:1 1 auto; min-width:0; }
.ffewes-lt-tag{ display:block; font-size:7px; font-weight:900; letter-spacing:.8px; color:#8fe6ff; }
.ffewes-lt-head b{ display:block; font-size:11px; color:#fff; line-height:1.2; }
.ffewes-lt-expand,.ffewes-lt-close{ flex:0 0 auto; height:24px; padding:0 8px; border-radius:7px; font:800 9px/1 Arial,sans-serif; cursor:pointer; }
.ffewes-lt-expand{ background:#0e3a52; color:#2ee0a4; border:1px solid #2ee0a4; }
.ffewes-lt-close{ background:#3a1214; color:#ff6b6b; border:1px solid #b04048; }
.ffewes-lt-hint{ font-size:7.5px; color:#9fb4c9; padding:5px 8px; }
.ffewes-lt-wrap{ flex:1 1 auto; overflow:auto; }
.ffewes-lt-tbl{ width:100%; border-collapse:collapse; font-size:8px; }
.ffewes-lt-tbl th{ background:#102a42; color:#dce9f3; padding:3px 5px; text-align:left; white-space:nowrap; position:sticky; top:0; z-index:2; }
.ffewes-lt-tbl td{ border-top:1px solid #16263a; padding:3px 5px; color:#d7e5f1; white-space:nowrap; }

/* v323 (final) — override di AKHIR file agar menang atas blok v281 (!important putih) */
.ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .sgl{ color:#6b7683 !important; }
.ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .sgt{ color:#9aa3af !important; font-style:italic; }
.ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .arr{ color:#6b7683 !important; }

/* v332 — baris search terpisah & tombol CCTV di tools (sejajar Default / Semua OFF) */
.ffewes-ws-searchrow{ margin-bottom:6px; }
.ffewes-ws-tools{ position:relative!important; }
.ffewes-ws-cctv{
  flex:1 1 0;
  height:22px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:8px;
  background:#0b2137;
  color:#8ebeff;
  font:800 8.5px/1 Arial,'Segoe UI',sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.ffewes-ws-cctv:hover{ border-color:#52738d; color:#fff; }
.ffewes-ws-cctv.on{ background:#14314f; color:#7cf6c2; border-color:#ffffff; }
.ffewes-ws-cctvmenu{
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  z-index:9800;
  display:none;
  background:#0d1f33;
  border:1px solid #3b5b75;
  border-radius:9px;
  padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.ffewes-ws-cctvmenu.show{ display:block; }
.ffewes-ws-cctv-opt label{
  display:flex; align-items:center; gap:7px;
  padding:6px 7px;
  border-radius:7px;
  cursor:pointer;
  font-size:9.5px;
  color:#d7e5f1;
}
.ffewes-ws-cctv-opt label:hover{ background:#14314f; }
.ffewes-ws-cctv-opt input{ accent-color:#2ee0a4; }
.ffewes-ws-cctv-hint{
  font-size:7px; color:#7791a9; line-height:1.35;
  border-top:1px solid #1c3048; margin-top:5px; padding-top:5px;
}

/* v369 — C01/C02 (inactive): warna dipaksa abu2 (BUKAN putih terang / --l-strong)
   di SEMUA mode — spesifisitas lebih tinggi dari overlay
   body.ff-dark.ff-theme-light .rail:not(.right) :where(...){color:var(--l-strong)} (0,4,1). */
body.ff-dark .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .sgl,
body.ff-dark.ff-theme-light .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .sgl{ color:#6b7683 !important; }
body.ff-dark .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .sgt,
body.ff-dark.ff-theme-light .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .sgt{ color:#9aa3af !important; font-style:italic; }
body.ff-dark .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .arr,
body.ff-dark.ff-theme-light .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .arr{ color:#6b7683 !important; }
body.ff-dark .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .ws-inact-tag,
body.ff-dark.ff-theme-light .ffewes-ws-subgrp > .ffewes-ws-sgh-inactive .ws-inact-tag{ color:#8a8f98 !important; }

/* v370 — TAG STATUS C01/C02 di BARIS BARU di bawah nama WS (bukan inline).
   .sgt = flex kolom; .ws-inact-tag = block -> baris kedua. */
.ffewes-ws-sgh .sgt{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; white-space:normal; line-height:1.25; }
.ffewes-ws-sgh-inactive .ws-inact-tag{
  display:block;
  font-style:italic;
  font-weight:400;
  font-size:7px;
  letter-spacing:.2px;
  color:#8a8f98;
  margin:0;
  padding:0;
  text-transform:none;
  line-height:1.15;
}

/* v379 — blok legenda BANGUNAN AIR: item 2 per baris (persis PCH/PDA) */
.ffewes-ws-legend-block[data-k="bangunan-air"]{ width:280px; flex:0 0 auto; }
.ffewes-ws-legend-block[data-k="bangunan-air"] .ffewes-ws-legend-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 8px; }
.ffewes-ws-legend-block[data-k="bangunan-air"] .ffewes-ws-legend-item{ white-space:normal; }

/* v398b — border grup TIDAK tertimpa overlay tema (v21 memaksa border-color var(--l-line)
   yg transparan). Paksa warna terang #4d7094 di semua mode, spesifisitas > v21 (0,4,1). */
/* v398c — id selector utk menang atas overlay v21 (spesifisitas 0,7,1) */
body.ff-dark #ffewes-ws-tree .ffewes-ws-group,
body.ff-dark.ff-theme-light #ffewes-ws-tree .ffewes-ws-group{
  border-color:#4d7094 !important;
  border-width:2px !important;
}

/* v410 — B05 HISTORI: baris focused (dari klik tabel / poligon / popup) terhighlight */
.ffewes-lt-tbl tbody tr[data-hist-event].focused td{
  background:#3a2c0b !important;
  color:#ffe45b !important;
  font-weight:800 !important;
  box-shadow:inset 0 0 0 1px #ffd400;
}
.ffewes-lt-tbl tbody tr[data-hist-event].focused td:first-child{ border-left:3px solid #ffd400; }
.ffewes-lt-tbl tbody tr[data-hist-event]{ cursor:pointer; }
.ffewes-lt-tbl tbody tr[data-hist-event]:hover td{ background:#102b40; }

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

/* v422 — highlight baris POS PCH/PDA (sinkron tabel <-> peta) */
.ffewes-lt-tbl tbody tr[data-pos-kind].focused td{
  background:#1d4b3a !important;
  color:#9dffdb !important;
  font-weight:800 !important;
  box-shadow:inset 0 0 0 2px #2ee0a4 !important;
}
.ffewes-lt-tbl tbody tr[data-pos-kind].focused td:first-child{ border-left:3px solid #2ee0a4; }
.ffewes-lt-tbl tbody tr[data-pos-kind]{ cursor:pointer; }
.ffewes-lt-tbl tbody tr[data-pos-kind]:hover td{ background:#102b40; }

/* RLK1 — font tabel panel kiri: PCH/PDA +2px (8->10), B03 +3px (8->11); NA & B05 */
.ffewes-lt-tbl.ffewes-lt-pos th, .ffewes-lt-tbl.ffewes-lt-pos td{ font-size:10px!important; padding:4px 6px!important; }
.ffewes-lt-tbl.ffewes-lt-b3 th, .ffewes-lt-tbl.ffewes-lt-b3 td{ font-size:11px!important; padding:4px 6px!important; }
.ffewes-lt-na{ padding:28px 14px 34px; text-align:center; }
.ffewes-lt-na .ffewes-lt-na-ic{ font-size:34px; line-height:1; }
.ffewes-lt-na-t{ font-size:15px; font-weight:800; color:#fff; margin-top:8px; letter-spacing:.2px; }
.ffewes-lt-na-s{ font-size:10px; color:#9fb4c9; margin-top:5px; }
.ffewes-lt-tbl tbody tr[data-b345-resev]{ cursor:pointer; }
.ffewes-lt-tbl tbody tr[data-b345-resev]:hover td{ background:#102b40; }
.ffewes-lt-tbl tbody tr[data-b345-resev].focused td{ background:#3a2c0b!important; color:#ffe45b!important; font-weight:800!important; box-shadow:inset 0 0 0 1px #ffd400; }

/* vRLK6 — BORDER PUTIH (menang atas rule tema v21 yang memaksa var(--l-line)).
   ID selector (#ffewes-ws-tree) lebih tinggi dari body.ff-dark.ff-theme-light .rail:not(...). */
body.ff-dark #ffewes-ws-tree .ffewes-ws-def,
body.ff-dark #ffewes-ws-tree .ffewes-ws-off,
body.ff-dark #ffewes-ws-tree .ffewes-ws-cctv,
body.ff-dark #ffewes-ws-tree .ffewes-ws-tgl{
  border:1px solid rgba(255,255,255,.6) !important;
}
body.ff-dark #ffewes-ws-tree .ffewes-ws-def:hover,
body.ff-dark #ffewes-ws-tree .ffewes-ws-off:hover,
body.ff-dark #ffewes-ws-tree .ffewes-ws-cctv:hover,
body.ff-dark #ffewes-ws-tree .ffewes-ws-tgl:hover{
  border-color:#ffffff !important;
}
body.ff-dark #ffewes-ws-tree .ffewes-ws-cctv.on{
  border-color:#ffffff !important;
}
body.ff-dark #ffewes-ws-tree .ffewes-ws-legend-block{
  border:1px solid rgba(255,255,255,.6) !important;
}

/* ============ vDAS — DAS - WS (di POS HIDROLOGI C01-01/C02-01) ============ */
.ffewes-ws-dasws{
  margin:3px 2px 4px 6px; padding:2px; border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(255,255,255,.025); flex-shrink:0;
}
.ffewes-ws-dasws-hdr{
  display:flex; align-items:center; gap:6px; padding:4px 6px; cursor:pointer; border-radius:6px; min-height:22px;
}
.ffewes-ws-dasws-hdr:hover{ background:rgba(255,255,255,.06); }
.ffewes-ws-dasws-hdr .dashdr-dot{ width:7px; height:7px; border-radius:50%; background:#8ebeff; flex:0 0 auto; }
.ffewes-ws-dasws-hdr .dashdr-tx{ font-size:8.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#ffd400 !important; }
.ffewes-ws-dasws-hdr .dashdr-sub{ font-size:7.5px; color:#8fa3b8; margin-left:auto; }
.ffewes-ws-dasws-hdr .arr{ font-size:8px; color:#8ebeff; }
.ffewes-ws-dasws[data-dasws-closed="1"] .ffewes-ws-dasws-body{ display:none; }
.ffewes-ws-dasws-ws{
  font-size:8px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#cfe3f5; padding:2px 6px 3px; border-top:1px dashed rgba(255,255,255,.16); margin:2px 0 1px;
}
.ffewes-ws-dasrow{ border:1px solid rgba(255,255,255,.14) !important; border-radius:7px !important; background:rgba(255,255,255,.03) !important; margin:2px 0 !important; padding:2px 4px !important; }
.ffewes-ws-dasrow .ffewes-ws-item{ padding:2px 4px !important; }
.ffewes-ws-dasrow .ffewes-ws-item .tx{ font-size:8.5px !important; color:#d7e5f1 !important; }
body.ff-dark #ffewes-ws-tree .ffewes-ws-dasrow .ffewes-ws-mini{ font-size:8px !important; min-height:15px !important; padding:1px 6px !important; }
.ffewes-ws-dasws-body{ padding:1px 4px 3px; }

/* vPET — kolom Petugas & No HP pada tabel pos (ffewes-lt-pos & das|) */
.ffewes-lt-tbl .lt-petugas{ color:#eaf4fb !important; font-weight:700; font-size:9.5px !important; white-space:nowrap; }
.ffewes-lt-tbl .lt-hp{ color:#89d7ff !important; font-family:Consolas,Menlo,monospace; font-size:9px !important; white-space:nowrap; letter-spacing:.3px; }
.ffewes-lt-tbl .lt-petugas.pdash, .ffewes-lt-tbl .lt-hp.pdash{ color:#4a627c !important; font-weight:400; }

/* vND2 — PCH/PDA USULAN (ND): font ABU-ABU (jelas terlihat abu, tetap terbaca).
   Kontras ≈7:1 pada latar tabel gelap #08141f; baris operasional tetap terang.
   vND2 juga mempertegas HIGHLIGHT baris terpilih (klik tabel / klik marker). */
.ffewes-lt-tbl tbody tr.ffewes-lt-nd{ cursor:pointer; }
.ffewes-lt-tbl tbody tr.ffewes-lt-nd td{
  color:#8e9aa6 !important;            /* abu (bukan putih) */
  font-style:italic !important;        /* penanda visual "belum operasional" */
  background-image:none !important;
}
.ffewes-lt-tbl tbody tr.ffewes-lt-nd td:first-child{ color:#7f8b97 !important; font-weight:700 !important; }
.ffewes-lt-tbl tbody tr.ffewes-lt-nd .pdash,
.ffewes-lt-tbl tbody tr.ffewes-lt-nd td.pdash{ color:#6f7b87 !important; }
.ffewes-lt-tbl tbody tr.ffewes-lt-nd:hover td{ background:#122a3e !important; color:#a4b1bd !important; }
/* baris ND yang SEDANG terpilih: tetap abu, tapi jelas (bukan hijau pos operasional) */
.ffewes-lt-tbl tbody tr.ffewes-lt-nd.focused td{
  background:#25333f !important; color:#d7e2ec !important; font-weight:700 !important;
  box-shadow:inset 0 0 0 2px #9fb0bf !important;
}
.ffewes-lt-tbl tbody tr.ffewes-lt-nd.focused td:first-child{ border-left:4px solid #9fb0bf; }

/* vND5 — LEGENDA "Batas DAS": label panjang ("Batas DAS lain — Jratunseluna (50 DAS)")
   membuat baris LUBER keluar box. Struktur item = <div.ffewes-ws-legend-item><span.lgline/><span>label</span></div>
   dengan .ffewes-ws-legend-item{white-space:nowrap} (baris 232) & items nowrap utk batas-das (baris 244)
   → kotak dipaksa melebar melewati border. Perbaikan: izinkan wrap + label boleh membungkus,
   lebar blok dibatasi 100% induk. */
.ffewes-ws-legend-block[data-k="batas-das"],
.ffewes-ws-legend-block[data-k="batas-ws"]{ width:auto!important; max-width:100%!important; flex:1 1 auto!important; min-width:0!important; overflow:hidden!important; }
.ffewes-ws-legend-block[data-k="batas-das"] .ffewes-ws-legend-items{ flex-wrap:wrap!important; min-width:0!important; }
.ffewes-ws-legend-block[data-k="batas-das"] .ffewes-ws-legend-item,
.ffewes-ws-legend-block[data-k="batas-ws"] .ffewes-ws-legend-item{
  flex:1 1 100%!important; min-width:0!important; max-width:100%!important; white-space:normal!important;
}
.ffewes-ws-legend-block[data-k="batas-das"] .ffewes-ws-legend-item>span:last-child,
.ffewes-ws-legend-block[data-k="batas-ws"] .ffewes-ws-legend-item>span:last-child{
  flex:1 1 auto!important; min-width:0!important; white-space:normal!important;
  overflow-wrap:anywhere!important; word-break:normal!important; line-height:1.25!important;
}
.ffewes-ws-legend-block[data-k="batas-das"] .ffewes-ws-legend-item .lgline,
.ffewes-ws-legend-block[data-k="batas-ws"] .ffewes-ws-legend-item .lgline{ flex:0 0 auto!important; }