/* ══════════════════════════════════════════════════════════════════════════
   MAP MOBILE — shared responsive layer for gunatanah-semasa.css and
   sempadan-pentadbiran.css.

   Those two sheets are near-duplicates (same .app-shell / .sidebar /
   .map-toolbar / .coord-bar / .measure-panel class names), so the mobile
   rules live here ONCE instead of diverging in two places.

   Load AFTER the page's own stylesheet.

   Desktop (>768px) is deliberately untouched: the 320px left sidebar stays.
   Below 768px the sidebar becomes a bottom sheet with three snap states
   driven by --sheet-y, so the map keeps the full viewport behind it.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --tap: 44px;
  --sheet-peek: 148px;   /* handle (grip + label ketikan) + tabs visible */
  --sheet-h: 86dvh;      /* sheet height when fully open */
}

/* 100vh includes the collapsing mobile URL bar, which crops the coord bar and
   the sheet. dvh tracks the visible viewport; the vh line is the fallback. */
.app-shell {
  height: 100vh;
  height: 100dvh;
}

/* ── SHEET HANDLE (hidden on desktop, injected in both map templates) ── */
.sheet-handle { display: none; }

@media (max-width: 768px) {

  html, body { overscroll-behavior: none; }

  /* Stack so the map fills the shell and the sheet floats above it. */
  .main-content { flex-direction: column; position: relative; }
  .map-wrap { flex: 1; width: 100%; min-height: 0; }

  /* ── BOTTOM SHEET ── */
  .sidebar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: auto;
    height: var(--sheet-h);
    z-index: 20;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.32);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(var(--sheet-y, calc(var(--sheet-h) - var(--sheet-peek))));
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: pan-y;
  }
  /* While dragging, JS writes an inline transform for 1:1 finger tracking. */
  .sidebar.dragging { transition: none; }

  .sidebar.sheet-peek { --sheet-y: calc(var(--sheet-h) - var(--sheet-peek)); }
  .sidebar.sheet-half { --sheet-y: 44dvh; }
  .sidebar.sheet-full { --sheet-y: 0px; }

  /* Grabber sahaja tidak memberitahu sesiapa bahawa panel ini boleh dibuka —
     label + karet menjadikan ketikan sebagai tindakan utama, seretan kekal ada. */
  .sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: var(--tap);
    padding: 7px 0 6px;
    flex-shrink: 0;
    cursor: pointer;
    touch-action: none;   /* we handle the drag ourselves */
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-handle:active { cursor: grabbing; }
  .sheet-handle:active .sheet-cue { opacity: 0.6; }
  .sheet-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius); }
  .sheet-grip {
    display: block;
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--border-2);
  }
  .sheet-cue {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity 0.18s;
  }
  .sheet-cue-caret {
    width: 12px; height: 12px;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sheet-handle.is-open .sheet-cue-caret { transform: rotate(180deg); }

  /* Kelipan sekali sahaja pada lawatan pertama. Bilangan ulangan SENGAJA terhad —
     animasi tak terhingga membuatkan Playwright gagal "waiting for element to be stable". */
  .sheet-handle.nudge .sheet-cue { animation: sheet-cue-nudge 1.5s ease-in-out 3; }
  @keyframes sheet-cue-nudge {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 var(--gold-border); }
    50%      { transform: translateY(-3px); box-shadow: 0 0 0 5px transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sheet-handle.nudge .sheet-cue { animation: none; }
    .sheet-cue-caret { transition: none; }
  }

  /* Title block is dead weight in peek state; tabs become the sheet header. */
  .sidebar.sheet-peek .sidebar-header { display: none; }
  .sidebar-header { padding: 8px 16px 12px; }

  .sidebar-tabs {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface);
    padding: 6px 12px 10px;
  }
  .sidebar-tab { min-height: var(--tap); font-size: 12.5px; }

  /* Inner lists must not drag the sheet or rubber-band the page. */
  .legend-scroll,
  .lot-results-scroll,
  .admin-list,
  .tab-panel {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── TOUCH TARGETS ── */
  .mini-btn { min-height: var(--tap); }
  .lg-head, .lg-class,
  .daerah-item, .pbt-item,
  .basemap-card { min-height: var(--tap); }
  .select-wrap select,
  .search-box input { min-height: var(--tap); font-size: 16px; }  /* 16px stops iOS zoom-on-focus */

  /* Default range thumb is ~12px and near-undraggable with a finger. */
  input[type="range"] { height: var(--tap); }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; }
  input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }

  /* ── MAP CHROME ── */
  .map-toolbar {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
  }
  .map-ctrl-btn { width: var(--tap); height: var(--tap); }
  .map-ctrl-btn svg { width: 17px; height: 17px; }

  /* right:58px + width:230px overflows a 360px screen; give it a full row
     above the collapsed sheet instead. */
  .measure-panel {
    top: auto;
    left: 12px; right: 12px;
    width: auto;
    bottom: calc(var(--sheet-peek) + 12px + env(safe-area-inset-bottom));
  }

  .coord-bar {
    bottom: calc(var(--sheet-peek) + 12px + env(safe-area-inset-bottom));
    gap: 10px;
    padding: 6px 12px;
    max-width: calc(100vw - 24px);
  }
  .coord-item { font-size: 9px; }
  .coord-item:nth-child(4) { display: none; }   /* CRS is static text */

  .zoom-hint { max-width: calc(100vw - 24px); text-align: center; }

  /* ── POPUP ── */
  .maplibregl-popup-content { min-width: min(230px, 78vw) !important; max-width: 88vw !important; }
  /* Susun atur baris label/nilai perlu ruang mendatar — rapatkan padding sahaja. */
  .popup-body { padding: 12px; }
  .popup-row { gap: 10px; }
  .popup-row dd { font-size: 12px; }

  /* MapLibre's own controls ship at 29px. */
  .maplibregl-ctrl button { width: 40px !important; height: 40px !important; }

  /* ── TOP NAV (map pages have their own, not base.html's) ── */
  .nav { padding: 0 12px; }
  .nav-btn { height: var(--tap); }
  .theme-toggle { width: var(--tap); height: var(--tap); }
  .brand-tagline { display: none; }
}

@media (max-width: 480px) {
  :root { --sheet-peek: 136px; }

  .nav-center { display: none; }
  /* Icon-only nav buttons; the aria-label carries the meaning. */
  .nav-btn { padding: 0 10px; font-size: 0; gap: 0; }
  .nav-btn svg { width: 16px; height: 16px; }

  .coord-item:nth-child(3) { display: none; }   /* keep LAT/LNG only */
  .stat-chips { display: none; }
}

/* Landscape phones have almost no vertical room — cap the sheet so the map
   stays usable and let it start collapsed. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  :root { --sheet-h: 92dvh; --sheet-peek: 112px; }
  .sidebar.sheet-half { --sheet-y: 30dvh; }
  .sidebar-header { display: none; }
}