/* =========================================================================
   FFEWES0926 — MASTER TOGGLE RAIL (PETA & WS / PREDIKSI BANJIR) — STAGING
   -------------------------------------------------------------------------
   v20260829-MASTER2
   HANYA dua master toggle. TIDAK mengubah isi/urutan card, mesin waktu,
   peta, kontrol bawah, header, atau toggle Fitur.

   Mekanisme layout yang AMAN (fix akar masalah v207):
   - Rail tetap menjadi grid item .main (TIDAK pakai display:none di desktop).
   - Rail ditutup dengan: kolom grid = 0 + rail width:0 + overflow:hidden +
     visibility:hidden + pointer-events:none + border/padding 0.
   - Dengan begini .mapcol SELALU berada di kolom tengah (minmax(0,1fr))
     → peta tidak pernah menyusut/tergelap, kontrol bawah tidak terkompresi.
   - Saat dibuka: lebar kolom kembali ke nilai existing source baseline
     (clamp existing), bukan angka baru.
   ========================================================================= */

/* ---------- MASTER TOGGLE (edge tab / drawer handle) ---------- */
/* =========================================================================
   v390 — EDGE DRAWER: toggle "PETA & WS" / "PREDIKSI BANJIR" jadi PITA VERTIKAL
   menempel di border KIRI & KANAN layar (teks diputar 90°), tengah vertikal.
   Pola: Picture47.png. Klik tetap membuka/tutup rail (fungsi toggle tidak berubah).
   ========================================================================= */
.ffewes-master-rail-toggle{
  position:fixed;            /* v390 — pita SELALU menempel border layar (edge drawer),
                                tidak ikut bergeser saat rail terbuka */
  top:106px;                 /* v392 — DI ATAS (bawah header ~102px), bukan tengah border */
  transform:none;
  z-index:7500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  padding:16px 7px;
  border-radius:0;
  cursor:pointer;
  font-family:Arial,'Segoe UI',sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.2;
  background:linear-gradient(180deg,#0e2745,#081726);
  color:#f4e287;
  border:1px solid rgba(255,212,0,.65);
  box-shadow:0 4px 18px rgba(0,0,0,.6);
  -webkit-appearance:none;
  appearance:none;
}
.ffewes-master-rail-toggle:hover{ border-color:#ffd400; color:#fff5b8; background:linear-gradient(180deg,#143457,#0b2036); }
.ffewes-master-rail-toggle:focus-visible{ outline:2px solid #ffd400; outline-offset:2px; }
.ffewes-master-rail-toggle .st{
  color:#8ebeff;
  border-top:1px solid rgba(255,255,255,.38);
  border-left:none;
  padding-top:7px;
  padding-left:0;
  margin-top:5px;
  margin-left:0;
  font-size:8px;
  letter-spacing:1.5px;
}
.ffewes-master-rail-toggle[aria-expanded="true"] .st{ color:#8ebeff; }
/* PITA KIRI: menempel border kiri, membulat di sisi dalam (kanan) */
.ffewes-master-rail-left{
  left:0;
  top:106px;
  border-left:none;
  /* v393 — arah teks DIBALIK (bawah->atas): putar 180 derajat.
     Border-radius disesuaikan agar sisi dalam (kanan) tetap membulat:
     rotate memetakan TL<->BR & TR<->BL -> pakai 12px 0 0 12px. */
  border-radius:12px 0 0 12px;
  transform:rotate(180deg);
}
/* PITA KANAN: menempel border kanan, membulat di sisi dalam (kiri) */
.ffewes-master-rail-right{
  right:0;
  top:106px;
  border-right:none;
  border-radius:12px 0 0 12px;
}

/* Beri ruang untuk toggle di atas: overlay top-kiri/kanan (phasebox & wslegend)
   diturunkan lagi (top 104) agar tidak tertutup toggle kanan yang pindah ke top 56. */
.mapcol .otl{ top:104px; }
.mapcol .otr{ top:104px; }

/* ---------- COLLAPSE STATE (class namespaced di .main) ---------- */
/* rail tertutup: kolom grid 0; rail tetap di DOM, isi & state card tidak diubah */
.main.ffewes-master-left-off{ grid-template-columns:0 minmax(0,1fr) clamp(272px,16vw,296px)!important; }
.main.ffewes-master-right-off{ grid-template-columns:clamp(230px,12.8vw,252px) minmax(0,1fr) 0!important; } /* v482 - panel kiri ramping (lebih sempit dr kanan) */
.main.ffewes-master-left-off.ffewes-master-right-off{ grid-template-columns:0 minmax(0,1fr) 0!important; }
@media (max-width:1500px){
  .main.ffewes-master-left-off{ grid-template-columns:0 minmax(0,1fr) 282px!important; }
  .main.ffewes-master-right-off{ grid-template-columns:220px minmax(0,1fr) 0!important; } /* v482 */
  .main.ffewes-master-left-off.ffewes-master-right-off{ grid-template-columns:0 minmax(0,1fr) 0!important; }
}
/* rail yang tertutup: lebar 0 + tak terlihat, tapi TETAP grid item (mapcol di tengah) */
.main.ffewes-master-left-off .rail.left,
.main.ffewes-master-right-off .rail.right{
  min-width:0!important;
  max-width:0!important;
  width:0!important;
  overflow:hidden!important;
  padding-left:0!important;
  padding-right:0!important;
  border-left-width:0!important;
  border-right-width:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
/* <=1120 (single column): tampilkan/sembunyikan rail via display (aman, bukan grid 3 kolom) */
@media (max-width:1120px){
  .main.ffewes-master-left-off .rail.left,
  .main.ffewes-master-right-off .rail.right{ display:none!important; }
  .main.ffewes-master-left-off,
  .main.ffewes-master-right-off{ grid-template-columns:1fr!important; }
  /* v362 — FIX ponsel: aturan 3-class `0 minmax(0,1fr) 0` (spesifisitas 0,3,0) MENANG
     atas media 1fr (0,2,0) → mapcol jatuh di kolom 1 (lebar 0) → layar kosong/hitam.
     Paksa 1 kolom dgn spesifisitas SAMA & posisi terakhir (menang). */
  .main.ffewes-master-left-off.ffewes-master-right-off{ grid-template-columns:1fr!important; }
}

/* ---------- SWITCHER JENIS PETA DASAR (Satelit / OSM / Jalan / Dark) ---------- */
.ffewes-basemap{
  position:absolute;       /* v396 - relatif MAPCOL (area peta): saat drawer kanan BUKA, toggle
                              ikut bergeser ke kiri bersama peta & menempel sisi kiri panel kanan
                              (TIDAK menutupi isi panel kanan); saat TUTUP, menempel kiri pita. */
  right:8px;               /* drawer BUKA: menempel sisi kiri rail kanan */
  top:4px;                 /* di mapcol (top 102) = y106 — menempel border atas peta */
  z-index:7500;
}
.ffewes-basemap-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:96px;
  padding:5px 9px;
  border-radius:8px;
  cursor:pointer;
  font-family:Arial,'Segoe UI',sans-serif;
  font-size:11px;          /* v397 - font PETA DASAR +2px (9->11) */
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
  background:#0b2137;
  color:#f4e287;
  border:1px solid rgba(255,212,0,.55);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  -webkit-appearance:none;
  appearance:none;
}
.ffewes-basemap-toggle:hover{ border-color:#ffd400; color:#fff5b8; }
.ffewes-basemap-toggle:focus-visible{ outline:2px solid #ffd400; outline-offset:2px; }
.ffewes-basemap-toggle .arr{ color:#8ebeff; }
.ffewes-basemap-menu{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:132px;
  display:none;
  flex-direction:column;
  gap:2px;
  padding:4px;
  background:#081725;
  border:1px solid #31536f;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  z-index:7501;
}
.ffewes-basemap-menu.show{ display:flex; }
.ffewes-basemap-menu button{
  display:block;
  width:100%;
  text-align:left;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:#d9ebfb;
  font:700 10px/1.2 Arial,'Segoe UI',sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.ffewes-basemap-menu button:hover{ background:#10283e; border-color:#294965; }
.ffewes-basemap-menu button.on{ background:#1b5773; border-color:#6fe0ff; color:#fff; }

/* grup label di menu Peta Dasar */
.ffewes-basemap-menu .ffewes-basemap-group{
  display:block;
  padding:3px 8px 4px;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:#7791a9;
  border-bottom:1px solid #1c3048;
  margin-bottom:3px;
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
}

/* v239 — status loading basemap + tombol menu 6 pilihan (tanpa grup header) */
.ffewes-basemap-status{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:150px;
  max-width:220px;
  padding:5px 8px;
  border-radius:7px;
  background:rgba(8,23,37,.97);
  border:1px solid #31536f;
  color:#8fe6ff;
  font:700 9px/1.3 Arial,'Segoe UI',sans-serif;
  display:none;
  z-index:7502;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.ffewes-basemap-status.show{ display:block; }
.ffewes-basemap-menu button{ display:block; width:100%; text-align:left; padding:5px 8px; border:1px solid transparent; border-radius:6px; background:transparent; color:#d9ebfb; font:700 10px/1.2 Arial,'Segoe UI',sans-serif; cursor:pointer; white-space:nowrap; }

/* v245 — Basemap OPERASIONAL: style netral khusus FFEWES (hanya tile layer ini).
   DILARANG memfilter #map/.leaflet-*-pane — overlay FFEWES tidak boleh kena. */
.ffewes-operational-basemap{
  filter: grayscale(72%) saturate(34%) brightness(116%) contrast(80%);
}


/* v392 — ZOOM & BG slider digeser ke KIRI pita kanan (right:56) & diturunkan,
   agar TIDAK tertutup oleh pita kanan atas & tidak tumpang tindih dgn Peta Dasar. */
.leaflet-top.leaflet-right{
  position:absolute !important; /* v396 - relatif mapcol (area peta) */
  top:28px !important;          /* di mapcol: child y = 28+10(margin) = 38 rel = y140 (menempel Peta Dasar) */
  right:8px !important;         /* drawer BUKA: menempel sisi kiri rail kanan */
}
.bgvctl{
  position:absolute !important; /* v396 - relatif mapcol (area peta) */
  right:8px !important;         /* drawer BUKA: menempel sisi kiri rail kanan */
  top:106px !important;         /* di mapcol = y208 (menempel zoom) */
}
/* phasebox (.otl) digeser kanan agar tidak tertutup pita kiri atas */
.mapcol .otl{
  left:44px !important;
}

/* v396 — SAAT DRAWER KANAN TUTUP: mapcol penuh -> toggle di kanan atas peta,
   menempel ke pita di border (pita 28px + gap 6px = right 34). */
.main.ffewes-master-right-off .ffewes-basemap{ right:34px !important; }
.main.ffewes-master-right-off .leaflet-top.leaflet-right{ right:34px !important; }
.main.ffewes-master-right-off .bgvctl{ right:34px !important; }