/* ============================================================
   PETA EMAS — MOBILE CSS FINAL
   Menggantikan semua patch mobile lama.
   Desktop TIDAK disentuh (semua rule di dalam @media max-width:767px)
   ============================================================ */

/* ---- Global: tombol ☰ + backdrop ---- */
.mobile-toggle-btn {
  display: none;
  position: fixed;
  top: 6px; left: 6px;
  width: 36px; height: 36px;
  z-index: 99999;
  background: #111A21;
  color: #D6A21C;
  border: 1.5px solid #D6A21C;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90000;
}
.mobile-backdrop.show { display: block; }

/* ============================================================
   MOBILE (<768px)
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Reset global ---- */
  html, body {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* ---- HEADER ---- */
  header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 48px !important;
    width: 100vw !important;
    z-index: 20000 !important;
    padding: 0 8px 0 50px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  header .brand-sub { display: none !important; }
  header .brand-title { font-size: 12px !important; }
  header .brand-logo { width: 24px !important; height: 24px !important; }
  header .header-status { font-size: 10px !important; margin-left: auto !important; }

  /* ---- Tombol ☰ muncul ---- */
  .mobile-toggle-btn { display: flex !important; }

  /* ---- SIDEBAR (aside) ---- */
  aside {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 88vw !important;
    max-width: 340px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    transform: translateX(-105%) !important;
    transition: transform 0.25s ease !important;
    z-index: 95000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.6) !important;
  }
  aside.mobile-open { transform: translateX(0) !important; }

  /* ---- PETA full screen ---- */
  #map {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  /* ============================================================
     ---- SCAN AREA (kiri) ----
     ============================================================ */
  #scan-area-floating,
  .floating-scan-btn {
    position: fixed !important;
    top: 72px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    background: #D6A21C !important;
    color: #111A21 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    white-space: nowrap !important;
    max-width: 40vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============================================================
     ---- MODE SWITCHER (kanan) — HARUS BISA DIKLIK ----
     ============================================================ */
  #map-mode-switcher {
    position: fixed !important;
    top: 72px !important;
    right: 8px !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    height: 32px !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #17232C !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(214,162,28,0.3) !important;
    max-width: 55vw !important;
  }

  #map-mode-switcher .map-mode-btn {
    position: relative !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    background: transparent !important;
    color: #F5F5F5 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 0 9px !important;
    line-height: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }
  #map-mode-switcher .map-mode-btn.active {
    background: #D6A21C !important;
    color: #111A21 !important;
    font-weight: 700 !important;
  }

  /* KHUSUS TOMBOL 3D (last-child) */
  #map-mode-switcher .map-mode-btn:last-child {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100001 !important;
  }

  /* ============================================================
     ---- LEAFLET ZOOM (+/-) — di bawah mode switcher ----
     ============================================================ */
  #map .leaflet-control-zoom {
    position: absolute !important;
    top: 145px !important;
    right: 8px !important;
    z-index: 5000 !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    pointer-events: auto !important;
  }
  #map .leaflet-control-zoom a {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 16px !important;
  }

  /* ============================================================
     ---- TOMBOL AIR 💧 — di bawah zoom ----
     ============================================================ */
  #river-ctrl-wrap {
    position: fixed !important;
    top: 222px !important;
    right: 8px !important;
    z-index: 6000 !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  #river-ctrl-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

  /* ============================================================
     ---- PROGRESS "Menganalisis area..." ----
     ============================================================ */
  #scan-progress-indicator {
    position: fixed !important;
    top: 124px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    font-size: 10.5px !important;
    padding: 5px 12px !important;
    max-width: calc(100vw - 24px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============================================================
     ---- PANEL HASIL — mobile friendly ----
     ============================================================ */
  #region-info-panel,
  #scan-ready-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 9000 !important;
    font-size: 11px !important;
  }

  /* Panel dinamis hasil scan */
  [class*="fusion" i],
  [class*="bukit" i],
  [class*="evidence-matrix" i],
  [class*="companion" i],
  [class*="kandidat" i],
  [class*="screening" i],
  [class*="spektral" i] {
    max-width: calc(100vw - 16px) !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* Modal simpan target */
  #save-target-modal .save-modal-content {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* Popup Leaflet */
  .leaflet-popup-content {
    max-width: calc(100vw - 60px) !important;
    font-size: 11px !important;
  }
  .leaflet-popup-content-wrapper { border-radius: 10px !important; }

  /* ============================================================
     ---- TERRAIN 3D MODAL ----
     ============================================================ */
  #terrain-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 200000 !important;
  }
  #terrain-modal .terrain-panel {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #terrain-modal #terrain-map {
    width: 100% !important;
    height: 100% !important;
  }
  #terrain-modal .terrain-toolbar {
    flex-wrap: wrap !important;
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  #terrain-modal .terrain-note { font-size: 10px !important; }
  .maplibregl-ctrl-attrib { font-size: 9px !important; }

  /* ============================================================
     ---- SIDEBAR TERBUKA: sembunyikan floating button ----
     ============================================================ */
  body.sidebar-open #scan-area-floating,
  body.sidebar-open #map-mode-switcher,
  body.sidebar-open #scan-progress-indicator {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease !important;
  }
}


/* === 3D ZOOM FIX (relatif terrain-map) === */
@media (max-width: 767px) {

  /* Pastikan parent #terrain-map jadi containing block */
  #terrain-modal .terrain-panel,
  #terrain-modal {
    position: fixed !important;
  }
  #terrain-map {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Semua kontrol MapLibre di atas-kanan → turunkan */
  #terrain-modal .maplibregl-ctrl-top-right,
  #terrain-modal .maplibregl-ctrl-top-left {
    top: 100px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    position: absolute !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 15000 !important;
  }

  /* Panel yang berisi + / − (kontrol zoom MapLibre) */
  #terrain-modal .maplibregl-ctrl-top-right .maplibregl-ctrl,
  #terrain-modal .maplibregl-ctrl-zoom,
  #terrain-modal .maplibregl-ctrl-group {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 15000 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }

  /* Tombol + / − di dalamnya */
  #terrain-modal .maplibregl-ctrl-group button {
    width: 30px !important;
    height: 30px !important;
    background: #111A21 !important;
    color: #D6A21C !important;
    border: none !important;
    font-size: 18px !important;
    line-height: 30px !important;
    cursor: pointer !important;
  }
  #terrain-modal .maplibregl-ctrl-group button + button {
    border-top: 1px solid rgba(214,162,28,0.2) !important;
  }

  /* Tombol air — tetap di bawah zoom di 3D */
  #terrain-modal ~ #river-ctrl-wrap,
  body.terrain-open #river-ctrl-wrap {
    z-index: 15000 !important;
  }

  /* Attribution tetap di bawah */
  #terrain-modal .maplibregl-ctrl-bottom-left,
  #terrain-modal .maplibregl-ctrl-bottom-right {
    bottom: 6px !important;
    top: auto !important;
  }
  #terrain-modal .maplibregl-ctrl-attrib {
    font-size: 9px !important;
  }
}


/* === 3D ZOOM TURUN + COMPASS HIDE === */
@media (max-width: 767px) {

  /* Panel +/− turun lebih bawah, tidak nutup toolbar 3D */
  #terrain-modal .maplibregl-ctrl-top-right,
  #terrain-modal .maplibregl-ctrl-top-left {
    top: 115px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 15000 !important;
  }
  #terrain-modal .maplibregl-ctrl-top-right .maplibregl-ctrl,
  #terrain-modal .maplibregl-ctrl-group {
    margin: 0 !important;
    transform: none !important;
  }

  /* Sembunyikan tombol kompas (putar peta) — susah dipakai di HP */
  #terrain-modal .maplibregl-ctrl-compass {
    display: none !important;
  }
}


/* === SCAN MODE TOUCH FIX (Android) === */
/* Saat scan mode aktif, map harus block touch-action biar drag area jalan */
@media (max-width: 767px) {
  body.scan-mode-active .leaflet-container,
  body.scan-mode-active #map,
  body.scan-mode-active .leaflet-pane,
  body.scan-mode-active .leaflet-map-pane {
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}

/* === LEGEND POSITION FIX === */
/* Legend Leaflet control: pindah ke kiri bawah, naikkan di atas badge */
@media (max-width: 767px) {
  .leaflet-control.screening-legend,
  .leaflet-bottom.leaflet-right .leaflet-control:has([class*="screening" i]),
  .leaflet-bottom.leaflet-right .leaflet-control:has([class*="spektral" i]) {
    position: fixed !important;
    right: auto !important;
    left: 8px !important;
    bottom: 70px !important;  /* naikkan di atas badge */
    margin: 0 !important;
    z-index: 5500 !important;
    max-width: 55vw !important;
  }

  /* Container legend di dalam control */
  .leaflet-control.screening-legend > div,
  .leaflet-bottom.leaflet-right .leaflet-control:has([class*="screening" i]) > div {
    max-height: 44px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    transition: max-height 0.25s ease !important;
  }

  /* Expanded state */
  .leaflet-control.screening-legend.legend-expanded > div,
  .leaflet-bottom.leaflet-right .leaflet-control:has([class*="screening" i]).legend-expanded > div {
    max-height: 350px !important;
  }
}


/* === PANEL SHORTER V4 === */
@media (max-width: 767px) {
  /* Popup Bukit Emas/Sungai Emas — max 40vh */
  .leaflet-popup:has(.target-panel) {
    max-height: 40vh !important;
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    z-index: 5500 !important;
  }
  .leaflet-popup:has(.target-panel) .leaflet-popup-content-wrapper {
    max-height: 40vh !important;
    overflow-y: auto !important;
    border-radius: 14px 14px 10px 10px !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.7) !important;
  }
  .leaflet-popup:has(.target-panel) .leaflet-popup-content {
    max-height: 40vh !important;
    overflow-y: auto !important;
    padding: 12px 14px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  .leaflet-popup:has(.target-panel) .leaflet-popup-tip-container {
    display: none !important;
  }
  
  /* Evidence Matrix juga lebih pendek */
  #evidence-matrix-panel { max-height: 45vh !important; }
  .companion-panel { max-height: 45vh !important; }
  
  /* Tombol tetap di atas */
  #scan-area-floating, #map-mode-switcher {
    z-index: 6500 !important;
  }
}


/* === PALEO EVIDENCE ROW — FORCE LIGHT COLOR === */
.paleo-evidence-row,
.paleo-evidence-row * {
  color: #F5F5F5 !important;
  background: transparent !important;
}

.paleo-evidence-row > div > div:first-child {
  color: #F5F5F5 !important;
  font-weight: 700 !important;
}

.paleo-evidence-row > div > div:nth-child(2) {
  color: #DDDDDD !important;
}

.paleo-evidence-row > div > div:nth-child(3) {
  color: #888888 !important;
  font-style: italic !important;
}

.paleo-evidence-row span {
  color: #D6A21C !important;
}


/* === EVIDENCE PANEL SCROLL FIX === */
@media (max-width: 767px) {
  #evidence-matrix-panel {
    max-height: 55vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 12px !important;
  }

  /* Semua anak panel tidak flex-shrink */
  #evidence-matrix-panel > * {
    flex-shrink: 0 !important;
  }

  /* Row paleo — biar menonjol */
  #evidence-matrix-panel .paleo-evidence-row {
    background: rgba(214, 162, 28, 0.08) !important;
    border-top: 1px solid rgba(214, 162, 28, 0.3) !important;
    border-bottom: 1px solid rgba(214, 162, 28, 0.3) !important;
    margin-top: 4px !important;
  }
}


/* === X CLICK MOBILE FIX === */
@media (max-width: 767px) {
  #evidence-matrix-panel {
    overflow: visible !important;
  }
  
  /* Semua tombol close di Evidence panel — paksa clickable */
  #evidence-matrix-panel button,
  #evidence-matrix-panel [class*="close" i],
  #evidence-matrix-panel .leaflet-popup-close-button,
  #evidence-matrix-panel div[role="button"] {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  
  /* Paleo row tidak nutup X */
  .paleo-evidence-row,
  .paleo-evidence-row * {
    pointer-events: auto !important;
  }
  
  /* Scroll container jangan block */
  #evidence-matrix-panel * {
    touch-action: manipulation !important;
  }
}


/* === X CLICK FIX V2 === */
@media (max-width: 767px) {
  /* Semua elemen di panel evidence: clickable */
  #evidence-matrix-panel {
    pointer-events: auto !important;
  }
  
  /* X button: LAPIS PALING ATAS */
  #evidence-matrix-panel > *:first-child,
  #evidence-matrix-panel > div:first-child {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }
  
  /* Setiap tombol dalam panel */
  #evidence-matrix-panel button,
  #evidence-matrix-panel .leaflet-popup-close-button,
  #evidence-matrix-panel [aria-label*="close" i],
  #evidence-matrix-panel [aria-label*="tutup" i] {
    position: relative !important;
    z-index: 9999999 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(214,162,21,0.3) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Force every child of panel z-index lower than X */
  #evidence-matrix-panel > *:not(:first-child) {
    z-index: auto !important;
  }
}


/* ============================================================
   ZOOM 3D DESKTOP ONLY (di luar @media)
   ============================================================ */
#terrain-modal .maplibregl-ctrl-top-right,
#terrain-modal .maplibregl-ctrl-top-left {
  top: 90px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  position: absolute !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 15000 !important;
}

#terrain-modal .maplibregl-ctrl-top-right .maplibregl-ctrl,
#terrain-modal .maplibregl-ctrl-group {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 15000 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

#terrain-modal .maplibregl-ctrl-group button {
  width: 32px !important;
  height: 32px !important;
  background: #111A21 !important;
  color: #D6A21C !important;
  border: none !important;
  font-size: 18px !important;
  line-height: 32px !important;
  cursor: pointer !important;
}

#terrain-modal .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(214,162,28,0.2) !important;
}

/* Kompas — tampilkan */
#terrain-modal .maplibregl-ctrl-compass {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile: tetap override */
@media (max-width: 767px) {
  #terrain-modal .maplibregl-ctrl-top-right,
  #terrain-modal .maplibregl-ctrl-top-left {
    top: 100px !important;
    right: 8px !important;
  }
}