/* #143 — Mobile (< 768 px) survival pass.
 *
 * The V2 refactor already folded the old left panel into the topbar
 * (uploads → Import popover, per-track list → Import dropdown), so
 * the mobile job is really:
 *
 *   * Compact the topbar so its buttons don't overflow off the screen.
 *   * Let the stats-bar chips wrap and give the elevation chart a
 *     slimmer height so it doesn't eat the whole map area.
 *   * Ensure the auto-route toast and quick-action panel fit inside
 *     the viewport.
 *   * Bigger touch targets on the map-ctrl-strip.
 *
 * Everything below is scoped to ``@media (max-width: 768px)`` so the
 * desktop layout is untouched.  Long-press → contextmenu conversion
 * for the quick action lives in ``assets/mobile_touch.js``.
 */

/* Trigger on either a narrow width (portrait phones + small tablets)
   or a short height (landscape phones — 844 × 390 iPhone-scale — where
   the width test misses but the desktop topbar still overflows the
   cramped vertical space). */
@media (max-width: 768px), (max-height: 480px) {

  /* ── Topbar: compact ──────────────────────────────────────────── */
  .app-topbar {
    top: 6px;
    left: 6px;
    right: 6px;
    padding: 2px 4px !important;
    gap: 0;
    height: auto !important;
  }
  /* Brand + subtitle sit in the same row as the buttons on desktop
     but that eats ~130 px we can't spare on a phone. */
  .app-topbar .navbar-brand,
  .app-topbar .text-muted { display: none !important; }

  .app-topbar .container,
  .app-topbar .container-fluid {
    padding-left: 2px !important;
    padding-right: 2px !important;
    gap: 2px;
    flex-wrap: nowrap;
  }
  /* Text-hiding trick: kill button font-size so raw text nodes
     collapse, then bump the icon font back up.  Also drop the small
     dropdown caret icons — the popovers still open on tap. */
  .app-topbar .btn {
    font-size: 0 !important;
    padding: 6px 8px !important;
    min-height: 36px;
    min-width: 36px;
    line-height: 1;
    margin-right: 2px !important;
  }
  .app-topbar .btn .bi {
    font-size: 16px !important;
    margin: 0 !important;
  }
  .app-topbar .btn .bi-caret-down-fill,
  .app-topbar .btn .bi-caret-down {
    display: none !important;
  }

  /* Search input in the topbar — now that all the action buttons
     are icon-only (36 px), let the search claim the remaining
     horizontal space via flex-grow.  The Import button carries
     ``ms-auto`` (margin-left: auto) which would otherwise soak the
     leftover flex space as its own margin — force it back to zero
     so the search's ``flex: 1 1 auto`` actually gets fed. */
  .topbar-search {
    /* Stay inline with the buttons on the single topbar row.  Cap
       the input width tight so the buttons still fit; the results
       dropdown (below) breaks out of this constraint. */
    min-width: 0 !important;
    flex: 0 1 90px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    max-width: 90px !important;
  }
  .topbar-search input,
  .topbar-search .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    font-size: 12px;
    padding-left: 24px !important;
  }
  .topbar-search-icon { font-size: 12px !important; left: 6px !important; }

  /* Break the results dropdown out of the input's tight width — pin
     it to the viewport instead so results are legible even though
     the input itself is narrow.  ``position: fixed`` bypasses the
     absolute-positioned .topbar-search parent's bounds entirely. */
  .topbar-search-results {
    position: fixed !important;
    top: 52px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 60vh !important;
  }
  .topbar-search-row { font-size: 13px !important; }
  .topbar-search input,
  .topbar-search .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 13px;
  }

  /* ── Stats bar: chip-wrap + shorter chart ─────────────────────── */
  .stats-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 6px 8px !important;
    max-height: 42vh;
    overflow-y: auto !important;
    /* ``pan-y`` on the panel means finger drags on chips /
       inspector rows scroll the panel vertically.  The elevation
       chart child overrides this with ``pan-x`` (below) so its own
       horizontal-scroll works. */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .stat-chips-row {
    flex-wrap: wrap;
    gap: 4px 6px;
    row-gap: 3px;
  }
  .stat-chip {
    font-size: 11px;
    padding: 2px 8px;
  }
  .route-elev-graph {
    height: 70px !important;
  }
  /* Elevation panning: on narrow viewports the whole route was
     squeezed into ~360 px and the profile was unreadable.  Wrap
     the label strip + chart + scrubber in a shared horizontal
     scroller so all three move together, and force their inner
     width to 720 px so they overflow the wrapper.  Users grab the
     label strip (a plain Div with no Plotly touch handlers) to
     drag through the chart — trying to scroll from the chart
     itself fights Plotly's own touch pipeline. */
  .elev-scroll-wrap {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    /* A faint downward arrow-like scrollbar so first-time users
       see the affordance.  Native iOS/Android scrollbars show up
       on drag anyway; this is just extra discoverability. */
    scrollbar-width: thin;
  }
  .elev-scroll-wrap .label-strip,
  .elev-scroll-wrap .route-elev-graph,
  .elev-scroll-wrap .route-elev-graph .js-plotly-plot,
  .elev-scroll-wrap .route-elev-graph .plotly,
  .elev-scroll-wrap .route-elev-graph .plot-container,
  .elev-scroll-wrap .route-elev-graph .main-svg {
    min-width: 720px !important;
  }
  /* Bigger drag handle: the desktop label strip is 16 px tall,
     which is a poor tap/drag target.  Bump it on mobile. */
  .label-strip {
    height: 24px !important;
  }
  .label-strip-name {
    font-size: 11px !important;
  }

  /* ── Quick-action panel: fit the phone width ──────────────────── */
  .quick-action-panel.qa-left {
    min-width: 220px !important;
    max-width: 240px !important;
  }
  .qa-right {
    min-width: 240px !important;
    max-width: 280px !important;
  }

  /* ── Right-edge map control strip: nudge inward + bigger tap area */
  .map-ctrl-strip {
    right: 8px !important;
  }
  .map-ctrl-btn {
    width: 40px !important;
    height: 40px !important;
  }

  /* ── Section inspector: stack stats above controls ────────────
     On desktop `.inspector` is one wide flex row: stats on the left,
     controls to the right.  On a phone the stats' fixed
     `flex-shrink: 0` steals every pixel and the controls get
     squeezed off-screen.  Break the row into a two-line layout so
     the controls get their own line with full tap targets. */
  .inspector {
    flex-direction: column;
    align-items: stretch !important;
    gap: 4px;
  }
  .inspector-stats {
    flex-shrink: 1 !important;
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 6px;
  }
  .inspector-section-name {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inspector-controls {
    margin-left: 0 !important;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 2px;
  }
  .inspector-controls .btn,
  .inspector-controls .form-control,
  .inspector-controls .form-select {
    min-height: 34px;
  }

  /* ── Auto-route toast: fit width ──────────────────────────────── */
  #auto-route-toast {
    left: 8px !important;
    right: 8px !important;
    min-width: 0 !important;
    top: 60px !important;
    width: auto !important;
  }

  /* ── Import popover: cap to viewport, let track cards wrap ─────
     Python sets inline minWidth: 380px / maxWidth: 440px on the
     popover — that alone overflows a 390 px iPhone.  Override with
     !important, and give the inner track card a two-line layout so
     the filename + stats chips don't push it wider than the
     popover.  Applies to any dbc.Popover on the topbar, keyed by
     id where it matters. */
  #import-popover,
  #export-popover {
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
  }
  #import-popover .popover-body,
  #export-popover .popover-body {
    padding: 8px !important;
  }
  /* Track card: allow wrap so filename can take one line, stats +
     buttons drop underneath.  Cap the filename with ellipsis so
     one long name doesn't force horizontal scroll. */
  .track-card {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .track-card .track-filename {
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  .track-stats-row {
    flex-wrap: wrap;
    row-gap: 2px;
    column-gap: 4px;
    font-size: 11px;
  }
  .track-stat {
    white-space: nowrap;
  }
}