/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css — viewport ≤720px overrides, drawer, mobile-only FABs,
   PWA safe-area handling.

   Loaded LAST so its rules always win on mobile (no source-order surprises).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Default state of mobile-only chrome on DESKTOP: hidden ────────────── */
/* These are kept here (rather than scattered across other stylesheets) so
   the desktop-default + mobile-active pair lives in one place and the
   source order is never ambiguous. */
#mobile-toggle-btn,
#mobile-backdrop,
#pin-drag-btn,
.mobile-drawer-handle,
.mobile-close-btn {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile viewport (≤720px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #app { position: relative; }

  /* ───── Sidebar → bottom sheet (overrides the desktop floating panel) ───── */
  #sidebar {
    /* Reset the desktop floating position */
    top: unset; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 80vh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 32px rgba(0,0,0,0.45);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* Respect the home-indicator on iOS standalone */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 2000;
  }
  #sidebar.mobile-collapsed { transform: translateY(100%); }

  #map { position: absolute; inset: 0; height: 100vh; width: 100vw; }

  /* Drag-handle visual cue at the very top of the drawer */
  .mobile-drawer-handle {
    display: block; width: 36px; height: 4px;
    background: var(--border); border-radius: 100px;
    margin: 0.55rem auto 0; flex-shrink: 0;
    cursor: grab;
  }

  /* Close (×) button in the sidebar header */
  .mobile-close-btn {
    display: inline-flex; position: absolute;
    top: 1rem; right: 1rem;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg-sidebar-elev);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
  }
  .mobile-close-btn:hover {
    color: var(--text-primary); background: var(--bg-sidebar-elev-2);
  }
  .mobile-close-btn svg { width: 14px; height: 14px; }

  /* Backdrop behind the drawer */
  #mobile-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  #mobile-backdrop.is-visible { opacity: 1; pointer-events: auto; }

  /* ───── Floating action buttons (FABs) ─────
     Two FABs, anchored to the bottom-right and stacked horizontally:
        ┌──── map area ────┐
        │                  │
        │                  │
        │     [pin] [≡]   │   pin = drag-to-add-pin
        └──────────────────┘   ≡   = open sidebar (hamburger)
     Both lift up by env(safe-area-inset-bottom) so they sit above the
     iOS home-indicator on iPhone X+ devices.
  */

  /* Hamburger / open-drawer FAB */
  #mobile-toggle-btn {
    display: flex; position: fixed;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    right: 22px;
    z-index: 3000;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent); color: white;
    align-items: center; justify-content: center;
    border: none;
    box-shadow: 0 6px 18px rgba(217, 119, 6, 0.4), var(--shadow-md);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }
  #mobile-toggle-btn:active { transform: scale(0.92); }

  /* Drag-to-add-pin FAB, sits left of the hamburger.
     `touch-action: none` lets us own the gesture from the very first
     touch event (the browser won't try to scroll or pan first). */
  #pin-drag-btn {
    display: flex; position: fixed;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    right: 90px;
    z-index: 3000;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--modal-text); color: white;
    align-items: center; justify-content: center;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), var(--shadow-md);
    cursor: grab;
    touch-action: none;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease, background 0.18s;
  }
  #pin-drag-btn:active,
  #pin-drag-btn.is-dragging {
    cursor: grabbing; transform: scale(0.92);
    background: var(--accent);
  }
  #pin-drag-btn svg { width: 22px; height: 22px; pointer-events: none; }

  /* Hide BOTH FABs when the drawer is open — the X close button takes over */
  #sidebar:not(.mobile-collapsed) ~ #mobile-toggle-btn,
  #sidebar:not(.mobile-collapsed) ~ #pin-drag-btn {
    opacity: 0; transform: scale(0.6); pointer-events: none;
  }

  /* ───── Tighter spacing in the drawer ───── */
  .sidebar-header  { padding: 0.75rem 1.25rem 0.75rem; }
  .sidebar-section > summary { padding: 0.75rem 1.25rem; }
  .sidebar-section-body { padding: 0 1.25rem 1rem; }
  .sidebar-header h1 { font-size: 1.3rem; }
  .sidebar-header .tagline { display: none; }
  .save-status { top: 1.1rem; right: 3.5rem; }

  /* Pin list inside the bottom-sheet drawer.
     The mobile sidebar uses max-height (not height) so flex:1 on .pin-list
     collapses to zero — the rows stack at 0-height and appear to "overlap".
     Fix: give the sidebar a definite height when it is open so flex:1 works,
     and remove the old 220px cap that was fighting the layout. */
  #sidebar {
    height: 80vh;          /* definite height → flex children resolve correctly */
    max-height: 80vh;      /* still cap at 80vh as before */
  }
  .pin-list {
    /* flex:1 (set in sidebar.css) now resolves correctly because the parent
       has a definite height.  Remove old mobile override entirely. */
    flex: 1;
    max-height: none;      /* cancel any inherited max-height */
    min-height: 80px;      /* always show at least a couple of rows */
  }

  /* ───── Modals → slide-up sheet on small screens ───── */
  .modal-backdrop { padding: 0; align-items: flex-end; z-index: 9999; }
  .modal {
    max-width: 100%; width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    /* Respect home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-header { padding: 1rem 1.25rem 0.5rem; }
  .modal-header h2 { font-size: 1.3rem; }
  .modal-body { padding: 0.5rem 1.25rem 0.75rem; }
  .modal-footer { padding: 0.75rem 1.25rem 1rem; flex-wrap: wrap; }

  /* Map context menu: a bit bigger so taps land easily */
  .context-menu-item { padding: 0.7rem 0.85rem; font-size: 0.9rem; }

  /* Popups slightly slimmer */
  .leaflet-popup-content { width: 220px !important; }

  /* Recenter button: shift a touch further from the notch */
  #recenter-btn {
    top: calc(0.7rem + env(safe-area-inset-top, 0px));
    padding: 0.45rem 0.85rem; font-size: 0.78rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PWA / iOS-standalone — when launched from the Home Screen
   ═══════════════════════════════════════════════════════════════════════
   These rules add a touch more breathing room above the status bar when
   the app runs full-screen (no Safari chrome). The map already fills the
   viewport, but the sidebar header needs some top padding so the title
   doesn't sit under the status bar.

   Two media queries because iOS uses the WebKit-prefixed `display-mode`
   value and other browsers use the standard one. */

@media (display-mode: standalone), (display-mode: fullscreen) {
  /* Push ALL top-anchored Leaflet controls (zoom +/−, any custom top-right
     buttons) below the status bar in standalone/fullscreen PWA mode.
     Without this the zoom buttons are nearly hidden behind the notch. */
  .leaflet-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Tweak the *desktop* sidebar header to add the status-bar inset */
  .sidebar-header {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
  }
}

@media all and (display-mode: standalone) and (max-width: 720px) {
  /* On mobile-in-standalone, the sidebar is the bottom sheet; only the
     map peeks above.  We want tiles to extend under the status bar
     (they look fine) but controls must stay below it. */
  #recenter-btn {
    top: calc(0.6rem + env(safe-area-inset-top, 0px));
  }
  /* Reinforce the Leaflet-top inset for mobile (specificity safety net) */
  .leaflet-top {
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Also push the map height so tiles don't get cropped under the notch
     when the drawer is closed — use dvh (dynamic viewport height) where
     supported, fall back to 100vh. */
  #map {
    height: 100dvh;
    height: 100vh; /* fallback for older browsers */
  }
}