/* ═══════════════════════════════════════════════════════════════════════
   matos-shared.css — tokens, base typography, and components used at
   ALL viewport widths.

   Loaded BEFORE matos-mobile.css and matos-desktop.css in the cascade so
   mobile / desktop sheets can override pieces without losing the shared
   base. See index.html for the load order.

   Per the Camp v2 Style Guide §19, matos's three breakpoints are:
     - phone:   max-width 639px      (matos-mobile.css)
     - tablet:  640-959px            (sidebar shown, no density yet)
     - desktop: ≥ 960px              (matos-desktop.css)

   Tokens live in shared/style/tokens.css (loaded earlier as vendor); only
   domain-functional matos-local tokens that shared cannot provide are
   declared in :root below. Visual tokens (--y, --bk, --g1..4, --sp-*,
   --fs-*, --shadow-*, --radius-*, etc.) come from /vendor/style/tokens.css.
   ─────────────────────────────────────────────────────────────────────── */

/* ── matos-local tokens not in shared ─────────────────────────────────── */
:root {
  /* Brand */
  --y: #ffce00;
  --y-rgb: 255, 206, 0;
  /* Neutrals (mirror shared/style/tokens.css for matos-app pages that
     mount inside the legacy iOS-frame container before vendor sheets
     have loaded — keeps first-paint sane on slow networks). */
  --bk: #141414;
  --bk2: #1e1e1e;
  --bk3: #2a2a2a;
  --white: #fff;
  --wh: #fafaf8;
  --g1: #f2f1ed;
  --g2: #e4e2db;
  --g3: #b8b5ab;
  --g4: #6e6b62;
  /* Semantic */
  --green: #20bb45;
  --red: #dc2626;
  --blue: #1a6b9a;
  --amber: #d97706;
  --purple: #6b21a8;
  /* Status surfaces */
  --bg-warn: #fff3cd;
  --bg-error: #fee2e2;
  --bg-success: #e8f5e9;
  --bg-info: #fff8e1;
  --fg-warn: #856404;
  --fg-success: #1b5e20;
  --fg-error: #b71c1c;
  --fg-info: #1e40af;
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --focus-ring: rgb(var(--y-rgb) / 60%);
  /* Spacing */
  --sp-05: 0.1rem;
  --sp-1: 0.25rem;
  --sp-1h: 0.375rem;
  --sp-2: 0.5rem;
  --sp-2h: 0.625rem;
  --sp-3: 0.75rem;
  --sp-3h: 0.875rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  /* Font sizes */
  --fs-xs: 0.62rem;
  --fs-sm: 0.75rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.15rem;
  --fs-2xl: 1.35rem;
  --fs-3xl: 1.6rem;
  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* Durations */
  --dur-fast: 0.1s;
  --dur-chip: 0.12s;
  --dur-normal: 0.15s;
  --dur-slow: 0.3s;
  --dur-flash: 0.24s; /* QR-scan success flash (FN-3-5) */
  /* Type */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --lh-normal: 1.4;
  --fs-base: 0.875rem;
  /* suite chrome */
  --sb-w: 236px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --purple: #a78bfa;
    --fg-info: #93c5fd;
  }
  /* Dark-mode body text: shared/style/base.css sets `color: var(--bk)` on
     body, but `--bk` is the always-dark accent token and does NOT flip in
     dark mode. Pair with --g4 for legible body-text contrast. */
  body {
    color: var(--g4);
  }
}

/* ── Base typography ──────────────────────────────────────────────────── */
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0 0 var(--sp-3) 0;
}

h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.5px;
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-xl);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--sans);
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  /* iOS Safari paints a gray flash on every tap. Kill the OS overlay so
   * the UI doesn't look "stuttery" on touch devices. */
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  font-family: var(--sans);
  font-size: inherit;
  -webkit-tap-highlight-color: transparent;
}

a,
.m-bb-item,
.m-scanfab,
.btn,
.m-input,
.m-select,
[role='button'] {
  -webkit-tap-highlight-color: transparent;
}

/* ── App shell — desktop grid skeleton ────────────────────────────────── */
/* Mobile overrides live in matos-mobile.css; the grid below is the
 * desktop / tablet default (sidebar left, content right). */
.app-shell {
  display: grid;
  grid-template-columns: 236px 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

/* Pre-bootstrap skeleton — painted by js/main.js#paintSkeleton before
 * the auth + i18n round-trips so the viewport isn't white for the
 * full cold-start latency. Removed by clearSkeleton() when buildShell()
 * paints the real chrome. The keyframes used to be inline-injected via
 * a <style> element, which CSP `style-src 'self'` blocked (2026-06-02
 * cross-browser e2e pass surfaced it). Now baked into the canonical
 * stylesheet so no inline style injection is needed. */
.app-skeleton {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--wh, #fff);
  color: var(--bk, #111);
  font-family: var(--serif, 'DM Serif Display', Georgia, serif);
  z-index: 1;
  pointer-events: none;
}
.app-skeleton-wordmark {
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.01em;
  opacity: 0.85;
  animation: matos-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes matos-skeleton-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.99);
  }
  50% {
    opacity: 0.95;
    transform: scale(1);
  }
}

.app-shell .topbar {
  display: none;
  background: var(--wh);
  border-bottom: 2px solid var(--y);
  padding: 0.75rem 1.5rem;
  gap: var(--sp-3);
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-shell .topbar .title {
  flex: 1;
  color: var(--bk);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-shell .topbar .topbar-logout {
  color: var(--g4);
  font-size: var(--fs-lg);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-xs);
  transition: background var(--dur-chip);
}
.app-shell .topbar .topbar-logout:hover {
  background: var(--g1);
}
.app-shell .topbar .topbar-profile {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: var(--y);
  background-clip: content-box;
  color: var(--bk);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-xs);
  flex-shrink: 0;
  text-decoration: none;
}
.app-shell .topbar .topbar-profile:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.app-shell .topbar .topbar-feedback-toggle {
  background: transparent;
  border: 0;
  color: var(--g4);
  font-size: var(--fs-lg);
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-chip);
}
.app-shell .topbar .topbar-feedback-toggle:hover {
  background: var(--g1);
}
.app-shell .topbar .topbar-feedback-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.app-shell .topbar .topbar-abteilung-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  object-fit: contain;
  flex-shrink: 0;
}

.topbar-launcher-wrap {
  position: relative;
}

/* Sidebar footer overrides — shared provides the base; these adjust
   matos-specific deviations. The sidebar itself is desktop-only in
   matos (hidden in matos-mobile.css). */
.app-shell .sidebar .sb-user {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--bk3);
}
.app-shell .sidebar .sb-user .u-av {
  width: 32px;
  height: 32px;
  font-size: var(--fs-sm);
}
.app-shell .sidebar .sb-user .sb-user-info {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.app-shell .sidebar .sb-user .sb-user-info:hover .u-name {
  text-decoration: underline;
}
.app-shell .sidebar .sb-copyright {
  padding: 0.5rem 0.85rem 0.6rem;
}

.app-shell .main {
  grid-column: 2;
  grid-row: 1;
  padding: var(--sp-5);
  overflow-y: auto;
  /* Grid items default to `min-width: auto`, which resolves to the
   * content's max-content size. Combined with a `1fr` track, that lets
   * any descendant with intrinsic max-content > viewport (e.g. a
   * `.m-chips` strip with `overflow-x: auto` whose chip buttons sum
   * past the available width) blow the grid track past the container,
   * triggering horizontal scroll. Pinning `min-width: 0` here makes
   * the column shrink to the container and lets descendants with
   * their own scroll/overflow handling do their job. Mobile Chercher
   * surfaced this with the long 6-chip Statut filter row at 390px.
   * 2026-06-02. */
  min-width: 0;
}

/* ── Buttons (shared/style/buttons.css layer + matos-local extensions) ── */
.btn,
.btn-y,
.btn-g,
.btn-b,
.btn-r,
.btn-gh,
.btn-bk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}
.btn:active,
.btn-y:active,
.btn-g:active,
.btn-b:active,
.btn-r:active,
.btn-gh:active,
.btn-bk:active {
  transform: scale(0.97);
}
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-lg { font-size: 14px; padding: 11px 18px; }
.btn-md { font-size: 13px; padding: 8px 14px; }
.btn { background: var(--white); color: var(--bk); border: 1px solid var(--g2); }
.btn-y { background: var(--y); color: var(--bk); }
.btn-g { background: var(--y); color: var(--bk); font-weight: 700; }
.btn-b { background: var(--blue); color: var(--white); }
.btn-r { background: #b91c1c; color: var(--white); }
.btn-gh { background: var(--white); color: var(--bk); border: 1px solid var(--g2); }
.btn-gh:active { background: var(--g1); }
.btn-gh.on { background: var(--g1); border-color: var(--bk); color: var(--bk); font-weight: 700; }
.btn-bk { background: var(--bk); color: var(--white); }
.btn-block { width: 100%; }

/* Icon button — small square, used for the item-edit-fields del button. */
.btn-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--g2);
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  color: var(--g4);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    background var(--dur-chip),
    color var(--dur-chip),
    border-color var(--dur-chip);
}
.btn-icon:hover {
  background: var(--g1);
  color: var(--red);
  border-color: var(--red);
}

/* ── Badges / pills (shared/style/badges.css layer + matos-local) ────── */
.badge,
.badge-success,
.badge-warn,
.badge-error,
.badge-info,
.tag-chip,
.tag-chip-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--sans);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge,
.badge-success,
.badge-warn,
.badge-error,
.badge-info {
  padding: 4px var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.badge { background: var(--g1); color: var(--bk); }
.badge-success { background: var(--bg-success); color: var(--fg-success); }
.badge-warn { background: var(--bg-warn); color: var(--fg-warn); }
.badge-error { background: var(--bg-error); color: var(--fg-error); }
.badge-info { background: var(--bg-info); color: var(--blue); }

.tag-chip {
  background: var(--bk);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
/* matos-local — small table-row variant inheriting the dark fill. */
.tag-chip-sm {
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  border-radius: var(--radius-xs);
}

.tp-pill {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--bk);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  display: inline-block;
  color: var(--bk);
}
.tp-pill.sc { background: #cfe6ff; }
.tp-pill.ac { background: #dff0a4; }
.tp-pill.aa { background: #e8c8f5; }
.tp-pill.d  { background: #e4e2db; }

.countdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--g1);
  border: 1px dashed var(--g4);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
  font-size: 11px;
  color: var(--g4);
}
.countdown-chip.soon { border-color: var(--green); color: var(--fg-success); }
.countdown-chip.late { border-color: var(--red); color: var(--fg-error); background: var(--bg-error); }

/* ── Banners (shared/style/banners.css layer + matos-local fix) ──────── */
.sg-banner,
.sg-banner-warn,
.sg-banner-error,
.sg-banner-success,
.sg-banner-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}
.sg-banner-warn { background: var(--bg-warn); color: var(--fg-warn); }
.sg-banner-error { background: var(--bg-error); color: var(--fg-error); }
.sg-banner-success { background: var(--bg-success); color: var(--fg-success); }
.sg-banner-info { background: var(--bg-info); color: var(--g4); }
.sg-banner strong { display: block; font-weight: 600; margin-bottom: 2px; }

/* matos-local — bug fix: ensure [hidden] beats shared's display:flex.
   shared/style/banners.css sets display:flex on .sg-banner; the [hidden]
   attribute has equal specificity and loses to a later rule. */
.sg-banner[hidden] {
  display: none;
}

/* ── Relecture LEDs (Camp v2 Style Guide §08) ──────────────────────────── */
.led {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--g2);
  background: var(--white);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.led.ok { background: var(--green); border-color: var(--green); }
.led.warn { background: var(--y); border-color: var(--y); color: var(--bk); }
.led.bad { background: var(--red); border-color: var(--red); }
.led.field { background: var(--blue); border-color: var(--blue); }

/* ── Mono code ────────────────────────────────────────────────────────── */
.mono {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--g4);
}

/* ── Forms (matos-local form layout) ──────────────────────────────────── */
.fm-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.fm-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--g4);
}

.fm-field input,
.fm-field select,
.fm-field textarea {
  padding: var(--sp-3);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  background: var(--wh);
  font-size: var(--fs-md);
  width: 100%;
}

.fm-field input:focus,
.fm-field select:focus,
.fm-field textarea:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Typeahead dropdown ──────────────────────────────────────────────── */
.typeahead-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  margin-top: 4px;
  background: var(--wh);
  border: 1px solid var(--g2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
}
.typeahead-sec-head {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--g4);
  background: var(--g1);
}
.typeahead-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  border-bottom: 1px solid var(--g1);
  min-height: 44px;
}
.typeahead-row:last-child {
  border-bottom: none;
}
.typeahead-row:hover,
.typeahead-row.active,
.typeahead-row:focus {
  background: var(--g1);
  outline: none;
}
.typeahead-row mark {
  background: rgb(var(--y-rgb) / 25%);
  color: inherit;
  font-weight: 600;
  padding: 0;
}
.typeahead-icon {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}
.typeahead-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.typeahead-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.typeahead-sub {
  font-size: var(--fs-xs);
  color: var(--g4);
  font-family: var(--mono);
}
.typeahead-more {
  background: var(--bg-info);
  font-size: var(--fs-sm);
  color: var(--g4);
  justify-content: center;
}
.typeahead-empty {
  padding: var(--sp-3);
  color: var(--g4);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── Filter chips on /recherche ──────────────────────────────────────── */
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  align-items: center;
}
.search-filters label {
  font-size: var(--fs-xs);
  color: var(--g4);
  margin-right: var(--sp-1);
}
.search-filters select {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  background: var(--wh);
  font-size: var(--fs-sm);
}

/* ── Item card / row ──────────────────────────────────────────────────── */
.item-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--g2);
  cursor: pointer;
  transition: background var(--dur-chip);
}

.item-row:hover {
  background: var(--g1);
}

.item-row .name {
  flex: 1;
  font-weight: 500;
}

.item-row .code {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--g4);
}

.item-row-with-thumb .item-row-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--g1);
  display: grid;
  place-items: center;
}
.item-row-with-thumb .item-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.item-row-with-thumb .item-row-thumb-empty::before {
  content: '📷';
  font-size: 1rem;
  opacity: 0.35;
}
.item-row-with-thumb .item-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.item-row-with-thumb .item-row-text .name {
  font-weight: 500;
}
.item-row-with-thumb .item-row-text .code {
  font-family: var(--mono);
  font-size: 0.78em;
  color: var(--g4);
}

/* Matched-query highlight. */
mark {
  background: rgb(var(--y-rgb) / 25%);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Page wrap (max-width containers) ─────────────────────────────────── */
.page-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.content-default {
  max-width: 760px;
  margin: 0 auto;
}
.content-wide {
  max-width: 1200px;
  margin: 0 auto;
}
.content-extra-wide {
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Modal: search-list pattern (used by item-pick etc.) ─────────────── */
.modal-hint {
  margin: 0 0 var(--sp-3) 0;
  font-size: var(--fs-sm);
  color: var(--g4);
}
.modal-search {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-family: inherit;
  background: var(--wh);
  margin-bottom: var(--sp-3);
}
.modal-search:focus-visible {
  outline: none;
  border-color: var(--bk);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.modal-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.modal-list-empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--g4);
  font-size: var(--fs-sm);
}
.modal-list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--g2);
  font: inherit;
  color: inherit;
}
.modal-list-row:last-child {
  border-bottom: 0;
}
.modal-list-row:hover {
  background: var(--g1);
}
.modal-list-row:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: -2px;
}
.modal-list-row .name {
  flex: 1;
  font-weight: 500;
}
.modal-list-row .code {
  font-size: var(--fs-xs);
  color: var(--g4);
}
.modal-list-row.busy {
  opacity: 0.5;
  pointer-events: none;
}
.modal-acts {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* ── Put-away page ─────────────────────────────────────────────────────── */
.putaway-progress-bar {
  background: var(--g1);
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--sp-2) 0 var(--sp-2) 0;
}
.putaway-progress-fill {
  background: var(--bk);
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--dur-normal);
}
.putaway-counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.putaway-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--g1);
  color: var(--g4);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.putaway-pill.todo {
  background: var(--bk);
  color: var(--white);
}
.putaway-pill.flag-ranger {
  background: var(--bg-success);
  color: var(--green);
}
.putaway-pill.flag-reparer {
  background: var(--bg-warn);
  color: var(--amber);
}
.putaway-pill.flag-incomplet {
  background: var(--bg-warn);
  color: var(--amber);
}
.putaway-pill.flag-autre {
  background: var(--g1);
  color: var(--g4);
}

.putaway-list {
  padding: 0;
  margin-bottom: var(--sp-3);
}
.putaway-list-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--g2);
}
.putaway-list-title {
  flex: 1;
  margin: 0;
  font-size: var(--fs-md);
  font-family: var(--sans);
  font-weight: 600;
}
.putaway-bulk {
  min-height: auto;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
}
.putaway-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--g2);
}
.putaway-row:last-child {
  border-bottom: 0;
}
.putaway-row.done {
  background: var(--bg-success);
}
.putaway-row.busy {
  opacity: 0.5;
  pointer-events: none;
}
.putaway-row-text {
  flex: 1;
  min-width: 0;
}
.putaway-row-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.putaway-row-sub {
  font-size: var(--fs-xs);
  color: var(--g4);
}
.putaway-row-actions {
  display: flex;
  gap: var(--sp-1);
}
.putaway-flag-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--g2);
  border-radius: var(--radius-xs);
  background: var(--wh);
  cursor: pointer;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition:
    background var(--dur-chip),
    border-color var(--dur-chip);
}
.putaway-flag-btn:hover {
  background: var(--g1);
}
.putaway-flag-btn.primary:hover {
  background: var(--bg-success);
  border-color: var(--green);
}
.putaway-flag-btn.warn:hover {
  background: var(--bg-warn);
  border-color: var(--amber);
}
.putaway-undo {
  min-height: auto;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}
.putaway-actions {
  margin-top: var(--sp-3);
}
.putaway-actions .btn {
  width: 100%;
}

/* ── Item history (collapsible) ───────────────────────────────────────── */
.item-history-card {
  margin-top: var(--sp-4);
  border: 1px solid var(--g2);
  border-radius: var(--radius-md);
  background: var(--wh);
  padding: 0;
}
.item-history-summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.item-history-summary::-webkit-details-marker {
  display: none;
}
.item-history-summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  transition: transform var(--dur-chip);
  color: var(--g4);
}
.item-history-card[open] .item-history-summary::before {
  transform: rotate(90deg);
}
.item-history-list {
  padding: 0 var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
}
.item-history-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--g2);
  font-size: var(--fs-sm);
}
.item-history-ts {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--g4);
}
.item-history-label {
}
.item-history-actor {
  font-size: var(--fs-xs);
  color: var(--g4);
}

/* ── Status meta card ─────────────────────────────────────────────────── */
.status-meta {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.status-meta-ic {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.status-meta-text {
  flex: 1;
}
.status-meta-title {
  font-weight: 600;
}
.status-meta-sub {
  font-size: var(--fs-sm);
  color: var(--g4);
  margin-top: 2px;
}

/* ── Shelf detail ─────────────────────────────────────────────────────── */
.shelf-level-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2) 0;
}
.shelf-level-num {
  background: var(--g1);
  border-radius: var(--radius-pill);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-xs);
}
.shelf-level-lbl {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--g4);
  font-weight: 600;
}
.shelf-level-empty {
  padding: var(--sp-3);
  color: var(--g4);
  font-style: italic;
  font-size: var(--fs-sm);
  background: var(--g1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.shelf-boxes {
  padding: 0;
  margin-bottom: var(--sp-2);
}
.shelf-box-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.shelf-box-ic {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.shelf-box-text {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}
.shelf-box-text .name {
  font-weight: 600;
}
.shelf-row-chev {
  color: var(--g4);
  font-size: var(--fs-lg);
}
.shelf-loose-lbl {
  font-size: var(--fs-xs);
  color: var(--g4);
  margin: var(--sp-2) 0 var(--sp-1) var(--sp-2);
}

/* ── Item edit page ────────────────────────────────────────────────────── */
.edit-head {
  margin-bottom: var(--sp-3);
}
.edit-h1 {
  margin: var(--sp-2) 0 0 0;
  font-family: var(--serif);
  font-size: var(--fs-2xl);
}
.edit-section {
  margin-bottom: var(--sp-3);
}
.edit-h2 {
  margin: 0 0 var(--sp-3) 0;
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 400;
}
.edit-hint {
  margin: var(--sp-1) 0 0 0;
  font-size: var(--fs-sm);
  color: var(--g4);
  line-height: 1.4;
}
.edit-readonly-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--g2);
  margin-top: var(--sp-3);
}
.edit-readonly-line .lbl {
  font-size: var(--fs-sm);
  color: var(--g4);
}
.edit-readonly-line .val {
  font-weight: 600;
}

.edit-loc-tabs {
  display: flex;
  gap: var(--sp-1);
  margin: var(--sp-2) 0;
  background: var(--g1);
  border-radius: var(--radius-sm);
  padding: var(--sp-1);
}
.edit-loc-tab {
  flex: 1;
  padding: var(--sp-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--g4);
  font: inherit;
  transition:
    background var(--dur-chip),
    color var(--dur-chip);
}
.edit-loc-tab.active {
  background: var(--white);
  color: var(--bk);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.edit-loc-body {
  margin-top: var(--sp-2);
}
.edit-loc-grid {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: var(--sp-2);
}

.edit-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.edit-status-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  background: var(--wh);
  cursor: pointer;
  transition:
    background var(--dur-chip),
    border-color var(--dur-chip);
}
.edit-status-tile:hover {
  background: var(--g1);
}
.edit-status-tile.active {
  border-color: var(--y);
  background: var(--wh);
  box-shadow: 0 0 0 2px var(--y) inset;
}
.edit-status-tile input[type='radio'] {
  display: none;
}
.edit-status-tile .ic {
  font-size: 1.2rem;
}
.edit-status-tile .lbl {
  font-weight: 600;
}
.edit-status-meta {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.edit-status-meta:empty {
  display: none;
}

.edit-parts-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.edit-parts-row {
  display: grid;
  grid-template-columns: 32px 1fr 64px 140px 32px;
  align-items: center;
  gap: var(--sp-2);
}
.edit-parts-row input[type='text'],
.edit-parts-row input[type='number'],
.edit-parts-row input[type='date'] {
  padding: var(--sp-2);
  border: 1px solid var(--g2);
  border-radius: var(--radius-xs);
  font: inherit;
  min-width: 0;
}
.edit-parts-row .edit-parts-qty {
  text-align: center;
}
.edit-parts-tick {
  width: 32px;
  height: 32px;
  border: 2px solid var(--g3);
  border-radius: var(--radius-xs);
  background: var(--wh);
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition:
    background var(--dur-chip),
    border-color var(--dur-chip);
}
.edit-parts-tick.ok {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.edit-parts-add {
  display: flex;
  gap: var(--sp-2);
}
.edit-parts-add input {
  flex: 1;
}

.edit-retire-reason {
  width: 100%;
  margin: var(--sp-2) 0;
  padding: var(--sp-3);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--wh);
}

.edit-save-bar {
  position: sticky;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--wh);
  border: 1px solid var(--g2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-top: var(--sp-4);
  z-index: 50;
}
.edit-save-bar .btn {
  flex: 1;
}

/* The sticky save bar covers later content (e.g. archive button) when
   scrolled near the bottom. Add bottom margin on the danger section
   equal to the bar's height + sticky offset; mobile bumps this in
   matos-mobile.css to clear the bottom nav. */
.edit-danger {
  margin-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* ── Print stylesheet ─────────────────────────────────────────────────── */
@media print {
  .topbar,
  .sidebar,
  .matos-bottom-bar,
  .m-bottombar,
  #bannerStack,
  #toastRoot,
  .matos-install-banner,
  .skip-link {
    display: none !important;
  }
  body {
    background: var(--wh);
    padding: 0;
  }
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .app-shell .main {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }
  #label-card {
    box-shadow: none !important;
    border: 0 !important;
    padding: 0;
  }
  #label-card .btn {
    display: none;
  }
  #printable {
    border: 0 !important;
    margin: 0 !important;
    page-break-inside: avoid;
  }
  .lbl-batch-head {
    display: none !important;
  }
  .lbl-batch-wrap {
    padding: 0 !important;
    max-width: none !important;
  }
  .lbl-batch-sheet {
    gap: 0 !important;
  }
  .lbl-cell {
    page-break-inside: avoid;
    border: 1px dashed var(--g3) !important;
  }
}

/* ── Bulk-label sheet (on-screen — print rules above override) ────────── */
.lbl-batch-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-3);
}
.lbl-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.lbl-batch-head h1 {
  margin: 0;
}
.lbl-batch-print {
  flex-shrink: 0;
}
.lbl-batch-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-2);
}
.lbl-cell {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2);
  border: 1px dashed var(--g3);
  border-radius: var(--radius-xs);
  background: var(--wh);
}
.lbl-meta {
  min-width: 0;
  overflow: hidden;
}
.lbl-code {
  font-size: var(--fs-sm);
  color: var(--g4);
}
.lbl-name {
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  word-break: break-word;
}
.lbl-cat {
  font-size: var(--fs-xs);
  color: var(--g4);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* MATOS-9: paper-stock-driven label sheet. Inline-style vars on
   .lbl-batch-sheet (set from js/pages/labels-batch.js) drive geometry. */
.lbl-batch-sheet[data-stock-id] {
  display: grid;
  grid-template-columns: repeat(var(--lbl-cols), var(--lbl-w));
  grid-auto-rows: var(--lbl-h);
  column-gap: var(--lbl-hg);
  row-gap: var(--lbl-vg);
  padding-top: var(--lbl-mt);
  padding-left: var(--lbl-ml);
  padding-right: var(--lbl-ml);
  margin: 0;
}
.lbl-batch-sheet[data-stock-id] .lbl-cell {
  width: var(--lbl-w);
  height: var(--lbl-h);
  border-radius: var(--lbl-cr);
  box-sizing: border-box;
  overflow: hidden;
}
.lbl-stock-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1, 0.25rem);
  font-size: var(--fs-sm, 0.875rem);
}
.lbl-stock-picker select {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--g2);
  border-radius: 6px;
}
@media print {
  .lbl-stock-picker {
    display: none;
  }
  .lbl-batch-sheet[data-stock-id] {
    padding-top: var(--lbl-mt);
    padding-left: var(--lbl-ml);
  }
}

/* Audit 2026-06-01: .matos-bottom-sheet* CSS promoted to
   shared/style/bottom-sheet.css (loaded from /vendor/style/bottom-sheet.css
   in index.html). Kept this note in matos-local so the deeper-CSS audit
   (tests/audit-css-deeper.test.js §3.4 candidates) can still detect the
   class name; the actual rules now live in shared. */

/* ── Skip-to-content link (a11y) ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bk);
  color: var(--white);
  padding: var(--sp-2) var(--sp-4);
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  top: 0;
}

/* ── Photo strip + lightbox (used on mobile + desktop) ─────────────── */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-2);
}
.photo-tile {
  position: relative;
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
  background: var(--g1);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: transform var(--dur-fast);
}
.photo-tile:hover {
  transform: scale(1.02);
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  color: var(--white);
  padding: var(--sp-2);
  font-size: var(--fs-xs);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.photo-lightbox-inner {
  max-width: min(90vw, 900px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.photo-lightbox-inner img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--wh);
  border-radius: var(--radius-sm);
}
.photo-lightbox-caption {
  color: var(--white);
  font-size: var(--fs-md);
  text-align: center;
  cursor: text;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-xs);
  min-width: 60%;
  outline: none;
  transition: background var(--dur-chip);
}
.photo-lightbox-caption:hover,
.photo-lightbox-caption:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}
.photo-lightbox-caption-empty {
  color: var(--g3);
  font-style: italic;
}
.photo-lightbox-caption-input {
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-xs);
  border: 1px solid var(--g3);
  background: var(--wh);
  color: var(--bk);
  font-size: var(--fs-md);
  text-align: center;
}
.photo-lightbox-meta {
  color: var(--g3);
  font-size: var(--fs-sm);
}
.photo-lightbox-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* ── QR-scan success flash ────────────────────────────────────────────── */
.qr-flash {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--wh);
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
}

/* ── Reduce motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── /lieux page ──────────────────────────────────────────────────────── */
.loc-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.loc-section {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--g4);
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2) 0;
}
.loc-card-flush {
  padding: 0;
}
.loc-empty {
  padding: var(--sp-4);
  color: var(--g4);
}
.loc-chev {
  color: var(--g4);
}

/* ── Checkout lifecycle screen ─────────────────────────────────────────── */
.matos-page-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--g2);
}
.matos-page-topbar h1 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-lg, 1.125rem);
  font-weight: var(--fw-bold, 700);
}
.matos-checkout-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--g2);
}
.matos-checkout-section-header {
  margin: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: var(--fw-bold, 700);
  color: var(--g4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.matos-checkout-section {
  padding: 0 var(--sp-3) var(--sp-2);
}
.matos-checkout-row {
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--wh);
}
.matos-checkout-row-title {
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.matos-checkout-row-sub {
  color: var(--g4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.matos-checkout-row-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.matos-checkout-empty {
  color: var(--g4);
  font-size: var(--fs-sm);
  padding: var(--sp-2) 0;
  margin: 0;
}
.matos-voir-plus {
  margin: var(--sp-1) 0 var(--sp-2);
  width: 100%;
}

/* ── Checkout sortir/rentrer full-screen modals ───────────────────────── */
.matos-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
.matos-modal-fullscreen {
  position: fixed;
  inset: 0;
  background: var(--wh);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.matos-modal-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--g2);
  flex-shrink: 0;
}
.matos-modal-header h2 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-lg, 1.125rem);
  font-weight: var(--fw-bold, 700);
}
.matos-modal-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--g4);
  flex-shrink: 0;
}
.matos-modal-close:hover {
  background: var(--g1);
}
.matos-modal-close:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 2px;
}
.matos-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  -webkit-overflow-scrolling: touch;
}
.matos-modal-loading {
  color: var(--g4);
  font-size: var(--fs-sm);
  margin: 0;
}
.matos-modal-note {
  font-size: var(--fs-sm);
  color: var(--g4);
  margin: 0 0 var(--sp-3);
}
.matos-modal-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--g2);
  cursor: default;
}
.matos-modal-row:last-child {
  border-bottom: none;
}
.matos-modal-item-name {
  flex: 1;
  font-size: var(--fs-base);
}
.matos-modal-qty {
  color: var(--g4);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.matos-modal-return-row {
  border-bottom: 1px solid var(--g2);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.matos-modal-return-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.matos-modal-return-row .matos-modal-row {
  border-bottom: none;
  padding-bottom: 0;
}
.matos-modal-flag-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-1) 0 var(--sp-2) calc(20px + var(--sp-2));
}
.matos-modal-flag-label {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--g4);
  white-space: nowrap;
}
.matos-modal-flag-btn {
  font-size: var(--fs-xs, 0.75rem);
  padding: 4px 10px;
}
.matos-modal-flag-btn.is-active {
  background: var(--bk);
  color: var(--wh);
  border-color: var(--bk);
}
.matos-modal-parts-hint {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--g4);
  padding: 0 0 var(--sp-1) calc(20px + var(--sp-2));
  margin: 0;
  font-style: italic;
}
.matos-modal-footer {
  padding: var(--sp-3);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--g2);
  flex-shrink: 0;
}
.matos-modal-footer .btn {
  width: 100%;
}

/* ── Plus overflow page ──────────────────────────────────────────────── */
.matos-plus-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  min-height: 56px;
  text-decoration: none;
  color: var(--bk);
  border-bottom: 1px solid var(--g2);
}
.matos-plus-row:active {
  background: var(--g1);
}
.matos-plus-divider {
  margin: var(--sp-3) 0;
  border: none;
  border-top: 1px solid var(--g2);
}

/* ── Créer hub tabs ────────────────────────────────────────────────────── */
.creer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.creer-tabs .tag-chip {
  min-height: 36px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  transition:
    background-color var(--dur-chip),
    color var(--dur-chip);
}

.creer-tabs .tag-chip.is-active {
  background: var(--y);
  color: var(--bk);
  font-weight: 600;
}

.creer-panel {
  margin-top: var(--sp-2);
}

/* Desktop matos-topbar variant — the Cmd-K trigger pill is hidden under
   640px (the palette is desktop-only). */
.matos-topbar.is-desktop {
  padding: 0 var(--sp-3);
}

/* ── Sidebar user-block dropdown ───────────────────────────────────────── */
.sb-user {
  position: relative;
  cursor: pointer;
}

.sb-user-menu {
  position: absolute;
  bottom: calc(100% + var(--sp-1));
  left: var(--sp-2);
  right: var(--sp-2);
  background: var(--bk2);
  color: var(--wh);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: var(--sp-1) 0;
  z-index: 50;
}

.sb-user-menu-item {
  display: block;
  padding: var(--sp-1) var(--sp-2);
  color: inherit;
  text-decoration: none;
}

.sb-user-menu-item:hover {
  background: var(--bk3);
}

.sb-caret {
  margin-left: auto;
}

/* ── Aperçu home page ─────────────────────────────────────────────────── */
.apercu-host {
  padding: var(--sp-3);
}
.apercu-hero {
  margin-bottom: var(--sp-4);
}
.apercu-hero h1 {
  margin: 0 0 var(--sp-1);
}
.apercu-hero-stats {
  color: var(--g4);
  margin: 0;
}
.apercu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.apercu-tile-wide {
  grid-column: 1 / -1;
}
.apercu-tile {
  padding: var(--sp-3);
}
.apercu-tile h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-md, 16px);
}
.apercu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.apercu-list li {
  padding: var(--sp-1) 0;
}
.apercu-list a {
  text-decoration: none;
  color: inherit;
}
.apercu-list a:hover {
  text-decoration: underline;
}
.apercu-empty {
  color: var(--g4);
  font-style: italic;
  margin: 0;
}
.apercu-cta {
  display: inline-block;
  margin-top: var(--sp-2);
  color: var(--bk);
  text-decoration: underline;
  text-decoration-color: var(--y);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.apercu-cta:hover {
  text-decoration-thickness: 3px;
}
.apercu-time {
  color: var(--g4);
  font-size: var(--fs-md);
}
.apercu-action-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.apercu-action-row-secondary {
  margin-top: var(--sp-2);
}

/* sg-card — neutral card surface used by Aperçu tiles + redesign blocks. */
.sg-card {
  background: var(--white);
  border: 1px solid var(--g2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ── Parcourir activités-pattern (dense items table + group headers) ─── */
.parc-host {
  /* host gets .content-wide; reset margin so the title row sits flush. */
}

.parc-titlerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-2);
  gap: var(--sp-2);
}
.parc-title {
  margin: 0;
}
.parc-new-btn {
  flex-shrink: 0;
}

.parc-controls {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.parc-search {
  flex: 1;
  min-width: 200px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  background: var(--wh);
  color: var(--bk);
}
.parc-groupby {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--g2);
  border-radius: var(--radius-sm);
  background: var(--wh);
  color: var(--bk);
}

.parc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-05) var(--sp-2);
  background: var(--g1);
  color: var(--bk);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
}
.parc-filter-chip-clear {
  background: transparent;
  border: none;
  color: var(--bk);
  cursor: pointer;
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 0 var(--sp-05);
}

.parc-group-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--g1);
  color: var(--bk);
  border-left: 3px solid var(--y);
  padding: var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-sm);
  margin-top: var(--sp-3);
}
.parc-group-title {
  font-weight: 600;
}
.parc-collapse-btn {
  background: transparent;
  border: 1px solid var(--g2);
  border-radius: var(--radius-xs);
  padding: 2px var(--sp-1);
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--bk);
}

.parc-col-head,
.parc-row {
  display: grid;
  grid-template-columns: 32px 36px 1fr 180px 80px 100px;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
}
.parc-col-head {
  color: var(--bk3);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  border-bottom: 1px solid var(--g2);
}
.parc-row {
  border-bottom: 1px solid var(--g1);
  cursor: pointer;
}
.parc-row:hover {
  background: var(--g1);
}

.parc-c-status {
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1;
}
.parc-st-ok {
  color: var(--green);
}
.parc-st-low,
.parc-st-orphan {
  color: var(--amber);
}
.parc-st-repair {
  color: var(--red);
}

.parc-c-name {
  font-weight: 500;
}
.parc-c-location,
.parc-c-qty {
  color: var(--bk2);
  font-size: var(--fs-md);
}
.parc-c-updated {
  color: var(--bk3);
  font-size: var(--fs-md);
}

.parc-batch-bar {
  position: fixed;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  background: var(--bk);
  color: var(--wh);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  max-width: calc(100vw - 2 * var(--sp-3));
  flex-wrap: wrap;
}
.parc-batch-count {
  font-weight: 500;
}
.parc-batch-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--wh);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--sp-05) var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-md);
}
.parc-batch-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.parc-batch-clear {
  background: transparent;
  color: var(--wh);
  border: none;
  cursor: pointer;
  font-size: var(--fs-xl);
  line-height: 1;
  padding: 0 var(--sp-1);
}

/* ── matos-app container (shared base; mobile sets overflow/height) ──── */
.matos-app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--wh);
  color: var(--bk);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.matos-app *,
.matos-app *::before,
.matos-app *::after {
  box-sizing: border-box;
}
.matos-app h1,
.matos-app h2,
.matos-app h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
}
.matos-app button {
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
.matos-app .mono {
  font-family: var(--mono);
}

/* ── Generic layout helpers used on every page ────────────────────────── */
.m-eyebrow {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--g4); font-weight: 700;
}
.m-h1 { font-family: var(--serif); font-size: 2rem; line-height: 1; letter-spacing: -0.01em; color: var(--bk); }
.m-h2 { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--bk); }
.m-section-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--sp-5) 0 var(--sp-2h);
}
.m-section-hd:first-child { margin-top: 0; }
.m-section-title { font-family: var(--serif); font-size: 1.15rem; color: var(--bk); }
.m-section-link { font-size: 12px; color: var(--g4); font-weight: 600; }
.m-muted { color: var(--g4); }

/* ── Search pill / input (used on both mobile + desktop pages) ───────── */
.m-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--g2);
  border-radius: var(--radius-pill); padding: 10px var(--sp-4);
  color: var(--g4); font-size: 14px; width: 100%;
}
.m-search.field { border-radius: var(--radius-sm); }
.m-search input {
  border: none; outline: none; background: none; flex: 1;
  font-family: var(--sans); font-size: 14px; color: var(--bk); min-width: 0;
}

/* ── Stat band (dashboard) ─────────────────────────────────────────────── */
.m-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2h);
  margin-top: var(--sp-4);
}
.m-stat {
  background: var(--white); border: 1px solid var(--g2);
  border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-3h);
  box-shadow: var(--shadow-sm);
}
.m-stat-num {
  font-family: var(--serif); font-weight: 700; font-size: 2rem; line-height: 1;
  color: var(--bk); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.m-stat-num.sm { font-size: 1.7rem; }
.m-stat-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--g4); margin-top: 6px;
}
.m-stat-bar { height: 5px; background: var(--g1); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.m-stat-bar > i { display: block; height: 100%; background: var(--green); border-radius: 99px; }

/* ── Attention rows ────────────────────────────────────────────────────── */
.m-attention { padding: var(--sp-1) 0; }
.m-att-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3h);
  border-bottom: 1px solid var(--g1);
  width: 100%; text-align: left;
}
.m-att-row:last-child { border-bottom: none; }
.m-att-ic {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.m-att-ic.err { background: var(--bg-error); }
.m-att-ic.warn { background: var(--bg-warn); }
.m-att-ic.info { background: var(--bg-info); }
.m-att-body { flex: 1; min-width: 0; }
.m-att-count { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1; color: var(--bk); }
.m-att-label { display: block; font-size: 12.5px; color: var(--g4); margin-top: 3px; }
.m-att-row .chev { color: var(--g3); font-size: 15px; }
.m-att-empty {
  display: flex; align-items: center; gap: 8px;
  padding: var(--sp-4); color: var(--fg-success); font-size: 13px;
}

/* ── Generic list rows (À venir / activité) ────────────────────────────── */
.m-feed { list-style: none; padding: 0; margin: 0; }
.m-feed-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--g1);
}
.m-feed-row:last-child { border-bottom: none; }
.m-feed-ic { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.m-feed-main { flex: 1; min-width: 0; }
.m-feed-text { display: block; font-size: 13.5px; color: var(--bk); }
.m-feed-text b { font-weight: 600; }
/* 2026-06-02 a11y: timestamp body text was on `--g3` (#b8b5ab on white
 * = 2.05:1, fails WCAG AA). Body text needs `--g4` (#6e6b62 on white =
 * 5.4:1, AA-pass). `--g3` stays the hairline / disabled-control token
 * where 2:1 is intentional. */
.m-feed-time { display: block; font-size: 11px; color: var(--g4); margin-top: 2px; }

/* ── Item card (Chercher: cards — shared between mobile + desktop) ────── */
.m-item-card {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--white); border: 1px solid var(--g2);
  border-radius: var(--radius-md); padding: var(--sp-3); box-shadow: var(--shadow-sm);
  width: 100%; text-align: left;
}
.m-item-thumb {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--g1); display: grid; place-items: center;
  font-size: 22px; flex-shrink: 0;
}
.m-item-main { flex: 1; min-width: 0; }
.m-item-name { display: block; font-weight: 600; font-size: 14.5px; color: var(--bk); }
.m-item-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11.5px; color: var(--g4);
}
.m-item-code { font-family: var(--mono); font-size: 11px; color: var(--g4); }
.m-item-loc { display: inline-flex; align-items: center; gap: 3px; }
.m-item-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.m-item-qty { font-family: var(--serif); font-size: 1.2rem; color: var(--bk); line-height: 1; }

/* ── Table list (Chercher: table) ──────────────────────────────────────── */
.m-table { background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-md); overflow: hidden; }
.m-tr {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3); border-bottom: 1px solid var(--g1);
  width: 100%; text-align: left;
}
.m-tr:last-child { border-bottom: none; }
.m-tr-name { display: block; font-weight: 500; font-size: 13.5px; color: var(--bk); }
.m-tr-sub { font-size: 11px; color: var(--g4); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.m-tr-sub .mono { font-family: var(--mono); }
.m-group-hd {
  background: var(--g1); padding: 5px var(--sp-3);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4);
}

/* Filter chips */
.m-chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); margin: var(--sp-3) 0; scrollbar-width: none; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip {
  flex-shrink: 0; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--g2); background: var(--white); color: var(--g4);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.m-chip.on { background: var(--bk); color: var(--white); border-color: var(--bk); }
.m-filter-row { display: flex; align-items: center; gap: var(--sp-2h); margin-top: var(--sp-2h); }
.m-filter-lbl { flex-shrink: 0; width: 58px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--g4); }
.m-filter-row .m-chips { margin: 0; flex: 1; min-width: 0; }
.m-chip-sm { padding: 5px 11px; font-size: 12px; }

/* ── Item detail ───────────────────────────────────────────────────────── */
.m-detail-hd { margin-bottom: var(--sp-4); }
.m-detail-name { font-family: var(--serif); font-size: 1.9rem; line-height: 1.05; color: var(--bk); margin-bottom: var(--sp-2); }
.m-detail-meta { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.m-card-block {
  background: var(--white); border: 1px solid var(--g2);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-3h); margin-bottom: var(--sp-3);
}
.m-card-block h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--g4);
  margin-bottom: var(--sp-2h);
}
.m-loc-path { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.m-loc-seg { color: var(--g4); }
.m-loc-seg.last { color: var(--bk); font-weight: 600; }
.m-loc-sep { color: var(--g3); }
.m-loc-box {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--g1); border-radius: var(--radius-xs); padding: 3px 8px;
  font-family: var(--mono); font-size: 12px; color: var(--bk);
}

/* Parts checklist (used on item-detail, mobile + desktop). */
.m-parts { list-style: none; padding: 0; margin: 0; }
.m-part {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2h) 0; border-bottom: 1px solid var(--g1);
}
.m-part:last-child { border-bottom: none; }
.m-part-name { flex: 1; font-size: 14px; }
.m-part.off .m-part-name { color: var(--g4); }

/* Qty counter (Camp guide inv-counter). */
.m-counter { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; justify-items: center; padding: var(--sp-4) 0 var(--sp-2); }
.m-counter .num { font-family: var(--serif); font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.m-counter button { width: 56px; height: 56px; border-radius: var(--radius-md); font-size: 1.5rem; font-weight: 600; display: grid; place-items: center; }
.m-counter .plus { background: var(--green); color: var(--white); box-shadow: var(--shadow-md); }
.m-counter .minus { background: var(--g1); color: var(--bk); }

/* Sticky action bar */
.m-actionbar {
  display: flex; gap: var(--sp-2h); margin-top: var(--sp-4);
}
.m-actionbar .btn-g, .m-actionbar .btn-gh, .m-actionbar .btn-b { flex: 1; padding: 12px; }

/* ── Sorties / checkout cards ──────────────────────────────────────────── */
.m-co-card {
  background: var(--white); border: 1px solid var(--g2);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--sp-3h); margin-bottom: var(--sp-2h);
}
.m-co-card.late { border-left: 3px solid var(--red); }
.m-co-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.m-co-title { font-family: var(--serif); font-size: 1.1rem; color: var(--bk); line-height: 1.1; }
.m-co-dest { font-size: 12.5px; color: var(--g4); margin-top: 3px; }
.m-co-items { font-size: 12px; color: var(--g4); margin-top: var(--sp-2h); padding-top: var(--sp-2h); border-top: 1px solid var(--g1); }

/* Items strip: flex-wrap row of compact chips. Shared between mobile +
   desktop checkout cards. */
.m-co-items-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--sp-2h); padding-top: var(--sp-2h);
  border-top: 1px solid var(--g1);
}
.m-co-item-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--g1); color: var(--bk);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 12px; line-height: 1.3;
  max-width: 200px;
}
.m-co-item-chip-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.m-co-item-chip-qty { color: var(--g4); font-variant-numeric: tabular-nums; }
.m-co-item-chip-more {
  text-decoration: none;
  background: transparent; color: var(--g4);
  border: 1px dashed var(--g2);
}
.m-co-item-chip-more:hover { background: var(--g1); color: var(--bk); }
.m-co-notes {
  font-size: 12px; color: var(--g4); font-style: italic;
  margin-top: var(--sp-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-co-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); gap: var(--sp-2); }

/* ── Scanner (mounted as full-screen overlay on mobile; also reusable) ── */
.m-scanner { position: absolute; inset: 0; background: #0c0c0c; color: var(--white); display: flex; flex-direction: column; z-index: 60; }
.m-scanner-top { padding: calc(env(safe-area-inset-top, 0px) + var(--sp-4)) var(--sp-4) var(--sp-3); display: flex; align-items: center; justify-content: space-between; }
.m-scanner-title { font-family: var(--serif); font-size: 1.2rem; color: var(--white); }
.m-scanner-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.12); color: var(--white); display: grid; place-items: center; font-size: 18px; }
.m-viewfinder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-4); }
.m-vf-box { width: 230px; height: 230px; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.m-vf-box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.m-vf-box::before, .m-vf-box::after,
.m-vf-box > i::before, .m-vf-box > i::after {
  content: ""; position: absolute; width: 38px; height: 38px; border: 4px solid var(--y); z-index: 1;
}
.m-vf-box::before { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 14px; }
.m-vf-box::after { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 14px; }
.m-vf-box > i::before { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 14px; }
.m-vf-box > i::after { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 14px; }
.m-vf-scanline { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--y); box-shadow: 0 0 12px 2px rgb(var(--y-rgb) / 60%); top: 50%; animation: m-scan 2.2s ease-in-out infinite; z-index: 1; pointer-events: none; }
@keyframes m-scan { 0%,100% { top: 14%; } 50% { top: 86%; } }
.m-scanner-hint { color: rgba(255,255,255,0.7); font-size: 14px; text-align: center; max-width: 240px; }
.m-scanner-manual-link { background: transparent; border: 0; color: var(--y); font-size: 13px; padding: 4px 8px; text-decoration: underline; cursor: pointer; }
.m-scanner-manual { width: min(360px, 88vw); }
.m-scanner-manual-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: center; }
.m-scanner-manual-form input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--g2); border-radius: 6px; min-width: 200px; font-family: var(--mono); background: var(--wh); color: var(--bk); }
.m-scanner-modes { display: flex; gap: var(--sp-2); justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.m-scanner-mode { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); font-size: 12.5px; font-weight: 600; }
.m-scanner-mode.on { background: var(--y); color: var(--bk); border-color: var(--y); }

/* Scan result sheet — bottom-sheet positioning; works regardless of width. */
.m-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 70; display: flex; align-items: flex-end; }
.m-sheet {
  width: 100%; background: var(--wh); color: var(--bk);
  border-radius: 18px 18px 0 0; padding: var(--sp-4) var(--sp-4) 40px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
}
.m-sheet-grip { width: 40px; height: 4px; border-radius: 99px; background: var(--g3); margin: 0 auto var(--sp-4); }

/* Plus screen list */
.m-plus-list { background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-md); overflow: hidden; }
.m-plus-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h) var(--sp-3h); border-bottom: 1px solid var(--g1); width: 100%; text-align: left; font-size: 14.5px; }
.m-plus-row:last-child { border-bottom: none; }
.m-plus-row .ic { font-size: 18px; width: 24px; text-align: center; }
.m-plus-row .chev { margin-left: auto; color: var(--g3); }

/* Density */
.matos-app.dense .m-feed-row { padding: 7px 0; }
.matos-app.dense .m-att-row { padding: var(--sp-2h) var(--sp-3); }
.matos-app.dense .m-item-card { padding: var(--sp-2h); }
.matos-app.dense .m-section-hd { margin: var(--sp-4) 0 var(--sp-2); }

/* Status indicator — banner mode strip */
.m-status-banner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--radius-xs);
  font-size: 11.5px; font-weight: 600;
}
.m-status-banner.available { background: var(--bg-success); color: var(--fg-success); }
.m-status-banner.incomplete, .m-status-banner.low { background: var(--bg-warn); color: var(--fg-warn); }
.m-status-banner.repair { background: var(--bg-error); color: var(--fg-error); }
.m-status-banner.field { background: var(--bg-info); color: var(--blue); }
.m-status-led { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g4); }

/* ═══════════════════════════════════════════════════════════════════════
   Revue annuelle (used on mobile + desktop with desktop overrides)
   ═══════════════════════════════════════════════════════════════════════ */
.m-review-cta {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bk); color: var(--white);
  border-radius: var(--radius-md); padding: var(--sp-3h);
  width: 100%; text-align: left; box-shadow: var(--shadow-md);
}
.m-review-cta .ic {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--y); color: var(--bk); display: grid; place-items: center;
  font-size: 22px; flex-shrink: 0;
}
.m-review-cta-body { flex: 1; min-width: 0; }
.m-review-cta-title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; }
.m-review-cta-sub { font-size: 12px; color: var(--g3); margin-top: 3px; }
.m-review-cta .chev { color: var(--y); font-size: 18px; }
.m-review-mini-bar { height: 4px; background: rgba(255,255,255,0.18); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.m-review-mini-bar > i { display: block; height: 100%; background: var(--y); border-radius: 99px; }

.m-review { position: absolute; inset: 0; background: var(--wh); display: flex; flex-direction: column; z-index: 55; }
.m-review-top { flex-shrink: 0; padding: 52px var(--sp-4) var(--sp-3); background: var(--wh); border-bottom: 1px solid var(--g2); }
.m-review-top-row { display: flex; align-items: center; gap: var(--sp-3); }
.m-review-close { width: 34px; height: 34px; border-radius: 50%; background: var(--g1); color: var(--g4); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.m-review-head { flex: 1; min-width: 0; }
.m-review-camp { font-family: var(--serif); font-size: 1.05rem; color: var(--bk); line-height: 1; }
.m-review-count { font-size: 11px; color: var(--g4); font-weight: 600; margin-top: 2px; }
.m-review-progress { height: 6px; background: var(--g1); border-radius: 99px; overflow: hidden; margin-top: var(--sp-3); }
.m-review-progress > i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width var(--dur-slow) ease; }

.m-review-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-4) 24px; }
.m-review-card-hd { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3h); }
.m-review-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--g1); display: grid; place-items: center; font-size: 26px; flex-shrink: 0; }
.m-review-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.05; color: var(--bk); }
.m-review-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--g4); }
.m-review-last { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--g1); color: var(--g4); white-space: nowrap; }
.m-review-last.stale { background: var(--bg-warn); color: var(--fg-warn); }

.m-seg { display: flex; gap: var(--sp-2); }
.m-seg button {
  flex: 1; padding: 8px 4px; border-radius: var(--radius-sm);
  border: 1px solid var(--g2); background: var(--white); color: var(--g4);
  font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.m-seg button .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g3); }
.m-seg button.on { border-color: var(--bk); color: var(--bk); background: var(--g1); }
.m-seg button.on.ok .dot { background: var(--green); }
.m-seg button.on.warn .dot { background: var(--y); }
.m-seg button.on.bad .dot { background: var(--red); }

.m-review-foot {
  flex-shrink: 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + 22px);
  background: var(--wh); border-top: 1px solid var(--g2); box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}
.m-review-foot-row { display: flex; gap: var(--sp-2h); }
.m-review-foot .btn-g, .m-review-foot .btn-gh { padding: 13px; }
.m-review-foot .grow { flex: 1; }
.m-review-skip { display: block; width: 100%; text-align: center; margin-top: var(--sp-2h); font-size: 12.5px; color: var(--g4); font-weight: 600; }

.m-review-edit-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px; margin-top: var(--sp-2);
  border: 1px dashed var(--g3); border-radius: var(--radius-sm);
  background: var(--white); color: var(--g4); font-size: 13px; font-weight: 600;
}
.m-review-edit-toggle.open { border-style: solid; border-color: var(--g2); color: var(--bk); }

.m-review-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-6) var(--sp-5); }
.m-review-done .seal { width: 92px; height: 92px; border-radius: 50%; background: var(--y); color: var(--bk); display: grid; place-items: center; font-size: 46px; margin-bottom: var(--sp-4); box-shadow: var(--shadow-lg); }
.m-review-done h2 { font-family: var(--serif); font-size: 2rem; line-height: 1.05; margin-bottom: var(--sp-2); }
.m-review-done p { color: var(--g4); font-size: 14px; max-width: 260px; margin: 0 auto var(--sp-5); }
.m-review-tally { display: flex; gap: var(--sp-3); width: 100%; margin-bottom: var(--sp-5); }
.m-review-tally .cell { flex: 1; background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-2); }
.m-review-tally .n { font-family: var(--serif); font-size: 1.6rem; color: var(--bk); line-height: 1; }
.m-review-tally .l { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g4); margin-top: 5px; }

/* ═══════════════════════════════════════════════════════════════════════
   Cataloguer / Lieux / Catégories forms (used on every screen size)
   ═══════════════════════════════════════════════════════════════════════ */
.m-field { margin-bottom: var(--sp-3h); }
.m-field > label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--g4); margin-bottom: 6px; }
.m-input, .m-select {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--bk);
  background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-sm);
  padding: 11px var(--sp-3); outline: none; -webkit-appearance: none; appearance: none;
}
.m-input:focus, .m-select:focus { border-color: var(--bk); box-shadow: 0 0 0 3px var(--focus-ring); }
.m-input::placeholder { color: var(--g3); }
.m-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6b62' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.m-field-hint { font-size: 11.5px; color: var(--g4); margin-top: 5px; }
.m-type-toggle { display: flex; gap: var(--sp-2); }
.m-type-toggle .btn-gh { flex: 1; padding: 11px; }
.m-loc-grid { display: grid; grid-template-columns: 1fr 1fr 72px; gap: var(--sp-2); }
.m-dup-hint { margin-top: var(--sp-2); padding: var(--sp-2h) var(--sp-3); border-radius: var(--radius-sm); background: var(--bg-info); color: var(--g4); font-size: 12.5px; }
.m-dup-hint b { color: var(--bk); }
.m-dup-hint a { display: block; padding: 4px 0; color: var(--g4); text-decoration: none; border-bottom: 1px dotted var(--g3); }
.m-dup-hint a:last-child { border-bottom: none; }

/* Lieux */
.m-loc-section { display: flex; align-items: baseline; gap: 8px; margin: var(--sp-5) 0 var(--sp-2h); }
.m-loc-section:first-of-type { margin-top: var(--sp-4); }
.m-loc-section .nm { font-family: var(--serif); font-size: 1.2rem; color: var(--bk); }
.m-loc-section .sub { font-size: 11.5px; color: var(--g4); }
.m-shelf-row { display: flex; align-items: center; gap: var(--sp-3); padding: 11px var(--sp-3h); border-bottom: 1px solid var(--g1); width: 100%; text-align: left; }
.m-shelf-row:last-child { border-bottom: none; }
.m-shelf-row .nm { flex: 1; font-weight: 500; font-size: 14px; }
.m-shelf-row .lv { font-size: 12px; color: var(--g4); }
.m-shelf-row .chev { color: var(--g3); }

/* Catégories grid */
.m-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2h); }
.m-cat-tile { background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-3h); text-align: left; width: 100%; }
.m-cat-swatch { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 24px; margin-bottom: var(--sp-2h); }
.m-cat-name { font-weight: 600; font-size: 14.5px; color: var(--bk); }
.m-cat-count { font-size: 11.5px; color: var(--g4); margin-top: 2px; }
.m-bars { display: flex; flex-direction: column; gap: var(--sp-2h); }
.m-bar-row { display: grid; grid-template-columns: 84px 1fr 32px; gap: var(--sp-2); align-items: center; }
.m-bar-row .lbl { font-size: 12px; color: var(--bk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-bar-track { background: var(--g1); border-radius: 4px; height: 13px; overflow: hidden; }
.m-bar-track > i { display: block; height: 100%; background: var(--y); border-radius: 4px; }
.m-bar-row .val { font-size: 12px; text-align: right; color: var(--g4); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
   Caisses / contenants + return-reporting tags
   ═══════════════════════════════════════════════════════════════════════ */
.m-box-cap { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.m-box-cap .n { font-family: var(--serif); font-size: 1.05rem; color: var(--bk); }
.m-box-cap .x { font-size: 12px; color: var(--g4); }
.m-box-meter { height: 6px; background: var(--g1); border-radius: 99px; overflow: hidden; }
.m-box-meter > i { display: block; height: 100%; background: var(--bk); border-radius: 99px; }

.m-content-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-1); border-bottom: 1px solid var(--g1); width: 100%; text-align: left;
}
.m-content-row:last-child { border-bottom: none; }
.m-content-thumb { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--g1); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.m-content-main { flex: 1; min-width: 0; }
.m-content-name { font-weight: 500; font-size: 13.5px; color: var(--bk); }
.m-content-sub { font-size: 11px; color: var(--g4); margin-top: 1px; }
.m-content-trail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.m-content-qty { font-family: var(--serif); font-size: 1rem; color: var(--bk); }
.m-verify-check {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--g2);
  background: var(--white); display: grid; place-items: center; color: transparent; flex-shrink: 0;
  font-size: 14px; font-weight: 700;
}
.m-verify-check.on { background: var(--green); border-color: var(--green); color: var(--white); }

.m-caisse-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bk); color: var(--white); border-radius: var(--radius-xs);
  padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}

.m-tag-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.m-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--g2); background: var(--white); color: var(--g4);
  font-size: 13px; font-weight: 600;
}
.m-tag.on { background: var(--bk); color: var(--white); border-color: var(--bk); }
.m-tag.on.warn { background: var(--bg-warn); color: var(--fg-warn); border-color: var(--y); }
.m-tag.on.bad { background: var(--bg-error); color: var(--fg-error); border-color: var(--red); }
.m-tag.on.ok { background: var(--bg-success); color: var(--fg-success); border-color: var(--green); }
.m-note-input {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--bk);
  background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-sm);
  padding: 10px var(--sp-3); outline: none; resize: none; min-height: 60px;
}
.m-note-input:focus { border-color: var(--bk); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ═══════════════════════════════════════════════════════════════════════
   Valeur & amortissement (amort card — shared)
   ═══════════════════════════════════════════════════════════════════════ */
.m-amort-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.m-amort-book { line-height: 1; }
.m-amort-book .n { font-family: var(--serif); font-size: 1.9rem; color: var(--bk); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.m-amort-book .l { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g4); margin-top: 4px; }
.m-amort-orig { text-align: right; font-size: 12px; color: var(--g4); line-height: 1.3; }
.m-amort-orig b { color: var(--bk); font-weight: 600; }
.m-amort-bar { height: 8px; background: var(--g1); border-radius: 99px; overflow: hidden; position: relative; }
.m-amort-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber)); border-radius: 99px; }
.m-amort-bar.done > i { background: var(--g3); }
.m-amort-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--g4); margin-top: 6px; }
.m-amort-rows { margin-top: var(--sp-3); border-top: 1px solid var(--g1); padding-top: var(--sp-2h); }
.m-amort-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.m-amort-row .k { color: var(--g4); }
.m-amort-row .v { color: var(--bk); font-weight: 600; font-variant-numeric: tabular-nums; }
.m-amort-add {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 13px; border: 1px dashed var(--g3); border-radius: var(--radius-sm);
  background: var(--white); color: var(--g4); font-size: 13.5px; font-weight: 600; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Créer hub + Réservation builder
   ═══════════════════════════════════════════════════════════════════════ */
.m-hub-group { margin-top: var(--sp-4); }
.m-hub-group:first-of-type { margin-top: var(--sp-2); }
.m-hub-glabel { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g4); margin-bottom: var(--sp-2); }
.m-hub-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h); border-bottom: 1px solid var(--g1); width: 100%; text-align: left; }
.m-hub-row:last-child { border-bottom: none; }
.m-hub-ic { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--g1); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.m-hub-ic.y { background: var(--y); }
.m-hub-tx { flex: 1; min-width: 0; }
.m-hub-tx .nm { display: block; font-weight: 600; font-size: 14.5px; color: var(--bk); }
.m-hub-tx .ds { display: block; font-size: 12px; color: var(--g4); margin-top: 1px; }
.m-hub-row .chev { color: var(--g3); }

.m-picker { position: relative; }
.m-picker-results { border: 1px solid var(--g2); border-radius: var(--radius-sm); margin-top: var(--sp-1); overflow: hidden; background: var(--white); }
.m-picker-result { display: flex; align-items: center; gap: var(--sp-2h); padding: 9px var(--sp-3); border-bottom: 1px solid var(--g1); width: 100%; text-align: left; }
.m-picker-result:last-child { border-bottom: none; }
.m-picker-result .ic { font-size: 17px; }
.m-picker-result .nm { flex: 1; font-size: 13.5px; }
.m-picker-result .cd { font-family: var(--mono); font-size: 11px; color: var(--g4); }
.m-picker-result .add { color: var(--green); font-weight: 700; font-size: 18px; }

.m-cart { background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-md); overflow: hidden; }
.m-cart-row { display: flex; align-items: center; gap: var(--sp-2h); padding: 10px var(--sp-3); border-bottom: 1px solid var(--g1); }
.m-cart-row:last-child { border-bottom: none; }
.m-cart-ic { font-size: 18px; width: 26px; text-align: center; }
.m-cart-main { flex: 1; min-width: 0; }
.m-cart-name { font-size: 13.5px; font-weight: 500; color: var(--bk); }
.m-cart-code { font-family: var(--mono); font-size: 11px; color: var(--g4); }
.m-cart-rm { color: var(--g4); font-size: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-xs); }
.m-qty-step { display: flex; align-items: center; gap: 0; border: 1px solid var(--g2); border-radius: var(--radius-sm); overflow: hidden; }
.m-qty-step button { width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px; background: var(--g1); color: var(--bk); }
.m-qty-step .q { width: 30px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.m-cart-empty { padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--g4); font-size: 13px; border: 1px dashed var(--g2); border-radius: var(--radius-md); }

.m-camp-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--g2); border-radius: var(--radius-sm); background: var(--white); width: 100%; text-align: left; margin-bottom: var(--sp-2); }
.m-camp-opt.on { border-color: var(--bk); box-shadow: 0 0 0 2px var(--bk) inset; }
.m-camp-opt .nm { font-weight: 600; font-size: 14px; color: var(--bk); }
.m-camp-opt .ds { font-size: 12px; color: var(--g4); margin-top: 1px; }
.m-camp-opt .rd { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--g2); flex-shrink: 0; }
.m-camp-opt.on .rd { border-color: var(--bk); background: radial-gradient(var(--bk) 38%, transparent 42%); }

.m-swatch-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.m-swatch { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 20px; border: 1px solid var(--g2); background: var(--white); }
.m-swatch.on { border-color: var(--bk); box-shadow: 0 0 0 2px var(--bk) inset; }
.m-color-dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; }
.m-color-dot.on { border-color: var(--bk); }

/* ── Étiquette QR · Équipe · Réglages ─────────────────────────────────── */
.m-label-card { background: var(--white); border: 1px solid var(--g2); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-5); text-align: center; }
.m-qr { width: 170px; height: 170px; margin: 0 auto var(--sp-3); border-radius: var(--radius-sm); display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 2px; padding: 8px; background: var(--white); border: 1px solid var(--g2); }
.m-qr i { background: var(--bk); border-radius: 1px; }
.m-qr i.o { background: transparent; }
.m-label-name { font-family: var(--serif); font-size: 1.35rem; color: var(--bk); line-height: 1.1; margin-top: var(--sp-2); }
.m-label-code { font-family: var(--mono); font-size: 14px; color: var(--g4); margin-top: 4px; letter-spacing: 0.05em; }

.m-team-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3h); border-bottom: 1px solid var(--g1); }
.m-team-row:last-child { border-bottom: none; }
.m-team-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.m-team-main { flex: 1; min-width: 0; }
.m-team-name { font-weight: 600; font-size: 14px; color: var(--bk); }
.m-team-role { font-size: 12px; color: var(--g4); margin-top: 1px; }

.m-set-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h); border-bottom: 1px solid var(--g1); width: 100%; text-align: left; font-size: 14px; }
.m-set-row:last-child { border-bottom: none; }
.m-set-row .ic { font-size: 18px; width: 24px; text-align: center; }
.m-set-row .val { margin-left: auto; color: var(--g4); font-size: 13px; }
.m-set-row .chev { color: var(--g3); margin-left: 6px; }
.m-toggle { width: 42px; height: 25px; border-radius: 99px; background: var(--g2); position: relative; flex-shrink: 0; transition: background var(--dur-normal); }
.m-toggle.on { background: var(--green); }
.m-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--white); transition: transform var(--dur-normal); box-shadow: var(--shadow-sm); }
.m-toggle.on::after { transform: translateX(17px); }

.m-amort-mode { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2h); }
.m-amort-mode button { flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--g2); background: var(--white); color: var(--g4); font-size: 12.5px; font-weight: 600; }
.m-amort-mode button.on { border-color: var(--bk); background: var(--g1); color: var(--bk); }
.m-amort-preview { background: var(--g1); border-radius: var(--radius-sm); padding: var(--sp-2h) var(--sp-3); margin-top: var(--sp-2h); font-size: 12.5px; color: var(--g4); }
.m-amort-preview b { color: var(--bk); font-weight: 600; }

/* Multi-photo gallery — used on mobile + desktop item-detail / item-edit. */
.m-photo-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.m-photo-grid image-slot { border-radius: var(--radius-sm); }
.m-photo-tile {
  display: block;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-normal);
}
.m-photo-tile:hover { opacity: 0.85; }
.m-photo-tile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.m-photo-add {
  width: 92px; height: 92px; flex-shrink: 0;
  border: 1px dashed var(--g3); border-radius: var(--radius-sm);
  background: var(--white); color: var(--g4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 12px; font-weight: 600;
}
.m-photo-add .pl { font-size: 22px; line-height: 1; }
.m-photo-add:active { background: var(--g1); }

/* item-detail top action bar wrapper */
.m-detail-actionbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* ── PWA install banner (shared chrome; mobile-tail positioning lives in
   matos-mobile.css; desktop top-right positioning lives in
   matos-desktop.css). ──────────────────────────────────────────────── */
.matos-install-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--sp-2));
  right: var(--sp-3);
  left: var(--sp-3);
  margin: 0 auto;
  max-width: 380px;
  background: var(--bk);
  color: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.25));
  z-index: 200;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  font-size: 13.5px;
  -webkit-tap-highlight-color: transparent;
}
.matos-install-banner-accent {
  width: 5px;
  background: var(--y);
  flex-shrink: 0;
}
.matos-install-banner-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2h);
  min-width: 0;
}
.matos-install-banner-body {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.matos-install-banner-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.matos-install-banner-step {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
}
.matos-install-banner-cta {
  background: var(--y);
  color: var(--bk);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 36px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}
.matos-install-banner-cta:active { transform: scale(0.97); }
.matos-install-banner-close {
  background: none;
  color: rgba(255, 255, 255, 0.78);
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 14px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.matos-install-banner-close:hover { color: var(--white); }

/* ── Dark-mode foreground overrides ─────────────────────────────────────
   --bk / --bk2 / --bk3 are non-flipping accent tokens. Explicit
   `color: var(--bk*)` on rules whose background flips in dark mode
   becomes dark-on-dark; the rules below re-route those text colours
   to --g4 (which flips) so contrast stays ≥ 4.5:1. */
@media (prefers-color-scheme: dark) {
  .app-shell .topbar .title {
    color: var(--g4);
  }
  .photo-lightbox-caption-input {
    color: var(--g4);
  }
  .matos-plus-row {
    color: var(--g4);
  }
  .cmdk-trigger,
  .cmdk-trigger kbd {
    color: var(--g4);
  }
  .cmdk-palette,
  .cmdk-result {
    color: var(--g4);
  }
  .parc-search,
  .parc-groupby,
  .parc-filter-chip,
  .parc-filter-chip-clear,
  .parc-group-head,
  .parc-collapse-btn {
    color: var(--g4);
  }
  .parc-col-head,
  .parc-c-location,
  .parc-c-qty,
  .parc-c-updated,
  .parc-card-meta {
    color: var(--g4);
  }
  .modal-search:focus-visible {
    border-color: var(--g4);
  }
}