/* ============================================================================
   PMAH EMERGENCY MOBILE RESPONSIVENESS  (2026-07-12)
   Surgical, additive, CSS-only. Loaded LAST (after css/app.css) so it wins.
   The app lays out with INLINE fixed grids/widths; inline styles beat normal
   CSS, so every override here uses !important. Scope: phones (<=768px) only —
   desktop layout is completely untouched.
   This is the "Path A" emergency fix; hand-editing the inline styles (Path B)
   is deliberately NOT done here.
   ============================================================================ */

/* Mobile/desktop swap helpers (base: mobile blocks hidden on desktop). --------- */
.pmah-mobile-only { display: none; }

@media (max-width: 768px) {

  /* 0. Mobile↔desktop swap: on phones, hide desktop-only nodes (e.g. the orders
        table) and reveal the stacked-card alternative. -------------------------- */
  .pmah-desktop-only { display: none !important; }
  .pmah-mobile-only  { display: block !important; }

  /* 1. Kill the sideways page pan (horizontal overflow). ---------------------- */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 2. Force EVERY inline multi-column grid to a single column. --------------- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 3. Tables: reachable via their OWN horizontal scroll; the page never pans.  */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 4. Cap any fixed-width / fixed-min-width element to the viewport.
        (max-width:100% leaves small elements — icons, 28px dots — unchanged;
        it only reins in elements that would exceed the screen. min-width:0
        lets flex children shrink instead of forcing overflow.) ---------------- */
  [style*="width"]      { max-width: 100% !important; }
  [style*="min-width"]  { min-width: 0 !important; }
  img                   { max-width: 100% !important; height: auto; }

  /* 5. Top nav / header (PlatformNav): wrap instead of running off-screen.
        app.css pins .dashboard-nav to a fixed height:64px; once it wraps to two
        lines that fixed box no longer reserves enough flow space and page content
        slides UNDER it. Because the nav is position:sticky (in normal flow),
        height:auto makes the reserved space track the ACTUAL rendered height, so
        nothing is ever hidden behind it — no hardcoded offset to keep in sync. --- */
  .dashboard-nav {
    flex-wrap: wrap !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    row-gap: 8px;
  }
  .nav-links { flex-wrap: wrap !important; max-width: 100% !important; }
  .nav-user  { flex-wrap: wrap !important; max-width: 100% !important; }

  /* 6. Order-wizard step dots: scroll inside their own row, never push the page.
        (Targets the wizard's step-indicator flex row by its inline signature.) */
  [style*="align-items: center"][style*="gap: 6px"][style*="margin-bottom: 24px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }

  /* 7. Tap targets — iOS 44px minimum on buttons. ---------------------------- */
  button, .btn, [role="button"], .btn-logout, .nav-back-btn {
    min-height: 44px !important;
  }

  /* 8b. Product cards (order wizard "Fits this unit" / replacement options). These are FLEX
        rows (image | flex:1 text | price+button) that don't wrap, so on a phone the model,
        availability chip, and description run off the right edge (item 1's grid rule doesn't
        apply — it's flex). Stack: image on top, text + price full-width below, nothing clipped. */
  .pmah-product-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .pmah-product-card > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  .pmah-product-card > div[style*="text-align: right"] {
    text-align: left !important;
    margin-top: 8px !important;
  }

  /* 8. Dashboard "Your PAG Representative" card. It is a horizontal FLEX row
        (avatar | name | contact buttons) that does NOT wrap, so on a phone the
        mail/phone/mobile buttons overflow the card's right edge (item 1's grid
        rule doesn't apply — it's flex, not grid). Signature is unique to this
        card (class="card" + inline align-items:center + gap:20px). Stack it so
        the contact buttons drop BELOW the name/title, full width, 44px tap. ---- */
  .card[style*="align-items:center"][style*="gap:20px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .card[style*="align-items:center"][style*="gap:20px"] a[href^="mailto:"],
  .card[style*="align-items:center"][style*="gap:20px"] a[href^="tel:"] {
    min-height: 44px !important;
    max-width: 100% !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
}