/* ═══════════════════════════════════════════════════════════════════════
   matos-mobile.css — mobile shell + mobile-only patterns.

   Aligned to Camp v2 Style Guide §19 breakpoints:
     - phone:  max-width 639px  — bottom-bar visible, sidebar hidden
     - tablet: 640-959px        — handled by matos-desktop.css (sidebar on)

   Mobile-first base rules (e.g. `.m-topbar`, `.m-bottombar`) apply at all
   widths but are visually hidden ≥ 640px via overrides in
   matos-desktop.css. Truly mobile-only @media rules (`max-width: 639px`)
   live in this file.

   Tokens come from matos-shared.css; this sheet only contains layout,
   chrome, and mobile-shell-specific styles.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Mobile topbar (light surface, 2px yellow hairline, DM Serif) ─────── */
.m-topbar {
  flex-shrink: 0;
  background: var(--wh);
  border-bottom: 2px solid var(--y);
  padding: calc(env(safe-area-inset-top, 0px) + var(--sp-3)) var(--sp-4) var(--sp-2h);
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  z-index: 20;
}
.m-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--y);
  color: var(--bk);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.m-topbar-info { flex: 1; min-width: 0; line-height: 1.05; }
.m-topbar-title { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--bk); }
.m-topbar-sub { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g4); font-weight: 700; margin-top: 1px; }
.m-topbar-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--corps, #2285d0); color: var(--white);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.m-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--g2); background: var(--white); color: var(--g4);
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}

/* ── Mobile scroll region ─────────────────────────────────────────────── */
/* 2026-06-02 (user report: Android can't scroll): the previous rule
 * stacked `.m-scroll` (overflow-y: auto + overscroll-behavior: contain)
 * INSIDE `.main` (which already has overflow-y: auto on desktop, and
 * the mobile override didn't unset it). Two nested scroll containers
 * with contain on the inner one trapped touch scroll on Android.
 *
 * New mobile model: the BODY scrolls naturally. `.m-scroll` is a plain
 * block that grows with content; `.main` resets its overflow on mobile
 * (see the mobile @media block below). Bottom-bar is position: fixed
 * so it overlays the bottom of the natural scroll. Desktop keeps the
 * `.main`-scroll model via the unchanged shared rule. */
.m-scroll {
  padding: var(--sp-4) var(--sp-4) 96px;
}
.m-scroll.flush { padding: 0 0 96px; }

/* matos-app dense density mode tightens the mobile scroll padding. */
.matos-app.dense .m-scroll { padding: var(--sp-3) var(--sp-3) 96px; }

/* ── Bottom bar (mobile only; 4 verb-driven tabs + raised center FAB) ── */
.m-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--wh);
  border-top: 1px solid var(--g2);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 22px);
  z-index: 30;
}
.m-bb-item {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  color: var(--g4);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: color var(--dur-chip);
}
.m-bb-item .ic { font-size: 21px; line-height: 1; }
.m-bb-item.is-active { color: var(--bk); }
.m-bb-item.is-active .ic { color: var(--bk); }
.m-bb-spacer { flex: 1; }
.m-scanfab {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--y);
  color: var(--bk);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 5px var(--wh);
  z-index: 40;
}
.m-scanfab .ic { font-size: 26px; line-height: 1; }
.m-scanfab:active { transform: translateX(-50%) scale(0.95); }
.m-scanfab-label {
  position: absolute;
  bottom: 9px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--bk);
}

/* ── Legacy bottom tab bar (.matos-bottom-bar) ───────────────────────── */
/* Predecessor of `.m-bottombar`, still rendered by `js/components/
   bottom-bar.js` on routes that haven't migrated. Hidden by default;
   shown only at < 640px below. */
.matos-bottom-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: stretch;
  background: var(--wh);
  border-top: 1px solid var(--g2);
  box-shadow: var(--shadow-md);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 100;
}

.matos-bb-item {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--g4);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: background var(--dur-chip, 120ms) ease;
}

.matos-bb-item:active {
  background: var(--g1);
}

.matos-bb-item.is-active {
  color: var(--bk);
  background: var(--y);
}

.matos-bb-icon {
  font-size: 22px;
  line-height: 1;
}

.matos-bb-label {
  font-size: var(--fs-xs);
}

/* ── Mobile card list (Chercher: flex-column cards stack) ────────────── */
.m-cards { display: flex; flex-direction: column; gap: var(--sp-2h); }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile-only viewport rules — fired below 640px (phone / phone-lg).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* App-shell: collapse to single column with topbar on top. */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .app-shell .topbar {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
  .app-shell .sidebar {
    display: none;
  }
  .app-shell .main {
    grid-column: 1;
    grid-row: 2;
    padding: var(--sp-4);
    padding-bottom: 110px;
    /* 2026-06-02: reset the desktop-shared overflow-y: auto so the
     * mobile shell has a single scroll container (the body). The
     * shared rule at matos-shared.css#293 is desktop-default; mobile
     * lets the page scroll naturally. */
    overflow-y: visible;
  }

  /* Legacy bottom-bar visible on phone. The desktop hide rule in
     matos-desktop.css uses min-width: 640px to flip this back off. */
  .matos-bottom-bar {
    display: flex;
  }

  body {
    padding-bottom: 88px;
  }

  /* Mobile sticky-save-bar lift — avoid overlapping bottom nav. */
  .edit-save-bar {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .edit-danger {
    margin-bottom: calc(160px + env(safe-area-inset-bottom));
  }

  /* iPhone touch-target floor — Apple HIG: tappable ≥ 44×44pt. */
  .btn,
  .btn-y,
  .btn-g,
  .btn-b,
  .btn-r,
  .btn-gh,
  .btn-bk {
    min-height: 44px;
  }

  /* iOS Safari zoom-on-focus defence: bump .fm-field inputs to ≥16px so
     the layout doesn't yank when a user taps an input. */
  .fm-field input[type='text'],
  .fm-field input[type='email'],
  .fm-field input[type='tel'],
  .fm-field input[type='url'],
  .fm-field input[type='number'],
  .fm-field input[type='date'],
  .fm-field input[type='time'],
  .fm-field input[type='password'],
  .fm-field input[type='search'],
  .fm-field textarea,
  .fm-field select {
    font-size: 16px;
  }

  /* Item-edit parts row: stack qty + expiry below name on narrow screens;
     keep tick + delete inline. */
  .edit-parts-row {
    grid-template-columns: 32px 1fr 32px;
    grid-template-areas:
      'tick name del'
      '.    qty  .'
      '.    exp  .';
    gap: var(--sp-1) var(--sp-2);
  }
  .edit-parts-row > :nth-child(1) {
    grid-area: tick;
  }
  .edit-parts-row > :nth-child(2) {
    grid-area: name;
  }
  .edit-parts-row > :nth-child(3) {
    grid-area: qty;
  }
  .edit-parts-row > :nth-child(4) {
    grid-area: exp;
  }
  .edit-parts-row > :nth-child(5) {
    grid-area: del;
  }

  /* Aperçu grid: collapse to 1 column under phone. */
  .apercu-grid {
    grid-template-columns: 1fr;
  }

  /* Parcourir dense table folds to stacked cards under phone. */
  .parc-col-head,
  .parc-row {
    display: none;
  }
  .parc-card {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: var(--sp-2);
    margin: var(--sp-1) 0;
    cursor: pointer;
  }
  .parc-card-check {
    margin-top: 2px;
  }
  .parc-card-body {
    flex: 1;
    min-width: 0;
  }
  .parc-card-name {
    font-weight: 500;
  }
  .parc-card-meta {
    color: var(--bk2);
    font-size: var(--fs-md);
    margin-top: 2px;
  }
  .parc-card-status {
    margin-right: var(--sp-05);
  }
  .parc-card-status.parc-st-ok {
    color: var(--green);
  }
  .parc-card-status.parc-st-low,
  .parc-card-status.parc-st-orphan {
    color: var(--amber);
  }
  .parc-card-status.parc-st-repair {
    color: var(--red);
  }
}