/* ── Mobile Wave 1 — shared mobile components ─────────────────────────────
   Canonized from the best existing pages (MOBILE_AUDIT.md §D):
     .m-collapse   table→stacked cards   (from recent_orders + waste)
     .m-actionbar  sticky thumb bar      (from create_order + invoices/scan)
     .m-sheet      bottom sheet          (from sales_dashboard + sales_unified)
     .m-fab        floating action       (from dashboard.css)
   Loads LAST in the CSS chain (tokens→base→chrome→components→archetypes→mobile)
   so page-level rules keep winning unless they opt in. */

/* ── Type floor + touch targets (phones only) ───────────────────────────── */
@media (max-width: 640px) {
  :root {
    --font-size-xs:   11px;   /* never below 10px anywhere */
    --font-size-sm:   12px;
    --font-size-base: 14px;   /* was 13px — readable body floor */
  }
  .btn-lg { min-height: var(--tap); }
  .btn-md { min-height: 40px; }
}

/* Accessible hit-area for small icon buttons: keep the 28-32px glyph,
   extend the touchable surface invisibly. Add the class, keep the look. */
.tap-target { position: relative; }
.tap-target::after {
  content: '';
  position: absolute;
  inset: calc((var(--tap) - 100%) / -2);
  min-width: var(--tap);
  min-height: var(--tap);
}

/* ── Table → stacked cards (opt-in: <table class="m-collapse">) ──────────
   Each <td> needs data-label="Column". The first cell becomes the card
   title. Pattern proven in recent_orders.html / analytics/waste.html. */
@media (max-width: 640px) {
  table.m-collapse { border-collapse: separate; border-spacing: 0; }
  table.m-collapse thead { display: none; }
  table.m-collapse, table.m-collapse tbody { display: block; width: 100%; }
  table.m-collapse tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  table.m-collapse td {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    font-size: var(--font-size-base);
    min-width: 0;
  }
  table.m-collapse td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 1px;
  }
  table.m-collapse td.m-title {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 15px;
  }
  table.m-collapse td.m-title::before { display: none; }
  table.m-collapse td.m-span { grid-column: 1 / -1; }
  table.m-collapse td.m-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 8px;
    margin-top: 6px;
  }
  table.m-collapse td.m-actions::before { display: none; }
  table.m-collapse td.m-actions .btn,
  table.m-collapse td.m-actions a.btn { flex: 1; min-height: var(--tap); justify-content: center; }
}

/* ── Sticky bottom action bar (opt-in wrapper) ───────────────────────────
   <div class="m-actionbar"> <span class="m-actionbar-info">…</span>
   <button class="btn btn-brand">Primary</button> </div> */
@media (max-width: 640px) {
  .m-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .m-actionbar .btn { flex: 1; min-height: 48px; font-size: 15px; }
  .m-actionbar-info { flex-shrink: 0; font-size: 13px; color: var(--text-2); }
  /* page content must not hide behind the bar */
  .has-m-actionbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 641px) { .m-actionbar { position: static; padding: 0; border: 0; background: none; } }

/* ── Bottom sheet (modal that docks to the thumb on phones) ─────────────── */
.m-sheet-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 23, 42, .45);
}
.m-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card, #fff);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}
.m-sheet::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  margin: 4px auto 12px;
  border-radius: 2px;
  background: var(--border);
}
@media (min-width: 720px) {
  /* centers back into a regular modal on bigger screens */
  .m-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 92vw);
    border-radius: 16px;
  }
  .m-sheet::before { display: none; }
}

/* ── FAB (one canonical version — fixes the orphan bottom:90px variants) ── */
.m-fab {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 26px;
  background: var(--c2);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  box-shadow: 0 6px 18px rgba(0, 80, 150, .35);
}
.m-fab:active { transform: scale(.97); }
@media (min-width: 769px) { .m-fab { display: none; } }

/* ── Bottom navigation (≤768px) — _layouts/_chrome_bottomnav.html ───────── */
.m-bottomnav { display: none; }
@media (max-width: 768px) {
  .m-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 58;                      /* under sheets (70+) & actionbars (60) */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 4px 8px max(4px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    /* ⚠ THE FLOAT/SCROLL-JITTER BUG — keep this bar a plain solid box: NO
       backdrop-filter/filter (anywhere, incl. a child ::before) and NO transform.
       The two iOS Safari mechanisms behind the "moves up and down while
       scrolling" report:
        1) backdrop-filter re-samples the page behind it every frame, which
           re-anchors the position:fixed bar to the VISUAL viewport on every
           recompute (focus, push banner, reflow, address-bar shrink on scroll);
        2) transform:translateZ(0) promotes it to its own compositor layer that
           iOS paints at a STALE position during momentum-scroll / URL-bar
           collapse, then snaps back on repaint.
       History: f1de6b9e (meta-viewport), 102dc777 (translateZ+opaque), bcb6d371
       (blur→::before) each killed one trigger; scroll kept jittering. Fix here:
       solid opaque surface + remove BOTH the blur and translateZ. Nothing to
       re-sample, no separate layer ⇒ the bar stays put. NEVER re-add either; a
       transform on an ANCESTOR (never here) is the only other thing that would
       break position:fixed. If this STILL floats on his device, the class-killer
       is the app-shell (non-scrolling body + inner scroller) — do not do that
       unprompted. */
    background: var(--bg-card, #fff);
  }
  .m-bottomnav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 52px;
    border: none;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
  }
  .m-bottomnav-item i { font-size: 21px; }
  .m-bottomnav-item.active { color: var(--acc-ink); }
  [data-theme="dark"] .m-bottomnav-item.active { color: var(--acc-lift); }
  .m-bottomnav-item:active { background: var(--acc-soft); }
  .m-bottomnav-badge {
    position: absolute;
    top: 4px; right: calc(50% - 18px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--red, #DC2626);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
  }
  /* page content + existing fixed elements must clear the bar */
  body.has-bottomnav .main-wrapper,
  body.has-bottomnav .dash-root { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.has-bottomnav .m-actionbar { bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.has-bottomnav .m-fab,
  body.has-bottomnav .dash-new-order-btn { bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  body.has-bottomnav .no-footer { bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
}