/* Drift Analysis mobile / PWA CSS (v6.1).
 *
 * Loaded by every admin page via <link rel="stylesheet" href="/mobile.css">
 * BEFORE the page's inline styles so page-specific rules can override
 * where needed.
 *
 * What this fixes:
 *   1. iOS PWA fullscreen — content extending under the Dynamic Island
 *      or home indicator. viewport-fit=cover was already set in the
 *      HTML meta, but no page had the matching env(safe-area-inset-*)
 *      padding to keep UI visible. Symptom: header invisible under
 *      Dynamic Island, statusbar under the home indicator.
 *   2. Topbar overflow on narrow screens — brand + 6 tab links + 4
 *      icon buttons + version chip is ~730px wide, doesn't fit a 390px
 *      iPhone. Wrap onto multiple rows instead of overflowing.
 *   3. Horizontal scroll containment — belt-and-braces overflow-x:
 *      hidden on html and body so no rogue element can push a scroll
 *      offset that visually clips content on the left.
 *
 * Tested targets: iPhone 15 Pro (portrait + landscape), iPad Safari,
 * Chrome Android, desktop.
 */

/* Belt-and-braces: never allow horizontal scroll on the root elements.
   Any child that tries to be wider than viewport gets clipped rather
   than pushing the layout offset. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Constrain the .app grid to viewport width. If any grid child tries
   to overflow (say a too-wide topbar before mobile styles applied),
   the grid track stays at viewport width and the offending child
   gets clipped/wrapped instead of pushing the layout. */
.app {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Safe area handling — kicks in on devices that report insets (iPhone
   notch / Dynamic Island, iPad rounded corners, Android edge-to-edge).
   Uses max() so we never lose the existing padding, only extend it
   further when the device needs more room.

   Not wrapped in @supports because iOS Safari has quirks resolving
   env() inside @supports queries — the direct rule works everywhere
   env() is supported, and falls back to the max() fallback (14px)
   where env() returns 0 or is unsupported.

   Uses !important because pages have inline <style> blocks loaded
   AFTER this stylesheet that set their own padding on .header. */
.header,
.topbar {
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-left: max(14px, env(safe-area-inset-left)) !important;
  padding-right: max(14px, env(safe-area-inset-right)) !important;
}
body {
  padding-bottom: env(safe-area-inset-bottom);
}
/* Playback bar on the map page — respect insets so it doesn't sit
   under the home indicator. */
.playback {
  margin-bottom: env(safe-area-inset-bottom);
}

/* Mobile header wrapping. On narrow screens, allow the header to
   wrap onto multiple rows rather than overflow horizontally. This
   is what actually stops the layout from being pushed off-screen. */
@media (max-width: 820px) {
  .header,
  .topbar {
    flex-wrap: wrap;
    row-gap: 6px;
    /* Combine top-inset with a small extra gap so the FIRST row of
       content clears the Dynamic Island / notch comfortably rather
       than sitting flush against it. */
    padding-top: calc(max(14px, env(safe-area-inset-top)) + 4px) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: 10px !important;
  }
  /* Tabs stay on one row but can compress. */
  .topbar-tab {
    font-size: 11px !important;
    padding: 4px 7px !important;
  }
  /* Version chip smaller and never grows. */
  .version-chip {
    font-size: 10px;
    padding: 2px 7px;
    flex-shrink: 0;
  }
  /* Icon buttons shrink so they don't push wider than the row. */
  .icon-btn {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }
  /* Brand mark keeps its size but doesn't get squeezed weirdly. */
  .brand {
    flex-shrink: 0;
  }
  /* The flexible spacer between brand and nav has no reason to exist
     on mobile — remove it so items pack tightly. */
  .spacer {
    flex: 0 0 auto !important;
    width: 0 !important;
  }
}

/* Very small screens (SE, older phones): compress further. */
@media (max-width: 400px) {
  .topbar-tab {
    font-size: 10.5px !important;
    padding: 3px 6px !important;
    margin-right: 2px !important;
  }
  .brand-mark {
    font-size: 15px !important;
  }
}