/* ============================================================================
   mobile-shared.css — Shoal Marketplace shared responsive layer
   ----------------------------------------------------------------------------
   Mobile is the PRIMARY experience (most users are on phones).

   ⚠️  EVERY UI change must be verified at 390px AND on desktop.
       Desktop (>900px) must remain PIXEL-IDENTICAL — so every rule in this
       file is scoped to a max-width media query and can never affect desktop.

   Include on every page AFTER css/styles.css so these can override safely:
       <link rel="stylesheet" href="css/mobile-shared.css">

   Covers the common regressions so new pages inherit mobile behavior:
     • no horizontal overflow / content cut-off      • images scale
     • iOS 16px inputs (prevents auto-zoom)           • 40px tap targets
     • tables scroll instead of breaking layout       • modals fit + scroll
     • utility grids stack                            • Leaflet map is touchable
   ============================================================================ */

@media (max-width: 900px) {

  /* ---- Prevent horizontal overflow / content cut-off ---------------------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg, iframe, embed, object { max-width: 100%; height: auto; }
  pre, code { max-width: 100%; overflow-x: auto; }
  /* long words / URLs / IDs wrap instead of pushing the page wider */
  p, span, div, td, th, li, a, h1, h2, h3, h4, h5, label { overflow-wrap: anywhere; }

  /* ---- Inputs: >=16px so iOS Safari never auto-zooms on focus ------------- */
  input, select, textarea { font-size: 16px !important; max-width: 100%; }

  /* ---- Tap targets: minimum ~40px ---------------------------------------- */
  button, .btn, a.btn, [role="button"],
  input[type="submit"], input[type="button"], input[type="reset"],
  .nav-btn, .mobile-menu-item, .icon-btn, .header-icon-btn {
    min-height: 40px;
  }
  /* keep small buttons tappable too */
  .btn-sm, .btn.btn-sm { min-height: 38px; }

  /* ---- Tables: never break layout — scroll horizontally ------------------ */
  .table-wrap, .table-responsive, .table-scroll, .table-wrapper {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  /* Bare tables (not already wrapped) become their own scroll region. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Modals: fit the screen, scroll inside, keep the close button ------ */
  .modal, .modal-content, .modal-dialog, .modal-box, .modal-card, .offer-dialog,
  .modal-overlay > div {
    max-height: 90vh; max-width: 94vw; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* header (with the close button) stays visible while the body scrolls */
  .modal-header { position: sticky; top: 0; z-index: 2; background: inherit; }
  .modal-close { min-width: 40px; min-height: 40px; }

  /* ---- Common utility grids stack ---------------------------------------- */
  .grid-2, .grid-3, .grid-4, .two-col, .three-col { grid-template-columns: 1fr !important; }

  /* ---- Leaflet pin map: touchable, sensible height, no page-scroll hijack - */
  .leaflet-container { touch-action: pan-x pan-y; max-width: 100%; }

  /* ---- Card grids that use auto-fill columns collapse gracefully already;
          this just guarantees they never overflow the viewport. ------------ */
  [class*="-grid"], [class*="grid-"] { max-width: 100%; }
}

/* Extra-tight phones (<=430px, e.g. iPhone 390px logical width). */
@media (max-width: 430px) {
  .container, .page-container, main, section { padding-left: 14px; padding-right: 14px; }
}