/* app.css — CUSTOM STRUCTURES (components & layout shell).
   Colors come from theme.css variables; spacing/alignment helpers live in
   utils.css. Load order: theme.css -> app.css -> utils.css. */

/* ---- Order count badges (customer list) -------------------------------- */
.order-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; border-radius: 9px;
    font-size: 12px; font-weight: 700; padding: 0 7px;
    cursor: default; user-select: none;
}
.badge-blue  { background: var(--blue-100,  #dbeafe); color: var(--blue-700,  #1d4ed8); }
.badge-amber { background: var(--amber-100, #fef3c7); color: var(--amber-700, #b45309); }
.badge-green { background: var(--green-100); color: var(--green-700); }

/* ---- Tooltip popup ----------------------------------------------------- */
.tip-popup {
    display: none; position: absolute; z-index: 9999;
    background: var(--slate-800); color: var(--slate-50);
    border-radius: 8px; padding: 8px 12px;
    font-size: 12px; line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    pointer-events: none; white-space: nowrap;
}
.tip-popup::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--slate-800);
}
.tip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; min-width: 180px; }
.tip-swatch { flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.15); }
.tip-label { color: var(--slate-300); flex: 1; }
.tip-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 18px; border-radius: 9px; flex-shrink: 0;
    font-size: 11px; font-weight: 700; padding: 0 6px;
}
.tip-pill.pill-blue  { background: #1d4ed8; color: #fff; }
.tip-pill.pill-slate { background: var(--slate-600); color: #fff; }
.tip-pill.pill-amber { background: #b45309; color: #fff; }
.tip-pill.pill-green { background: #15803d; color: #fff; }

/* Reset & base typography */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; flex: 0 0 auto; }

/* App shell */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex: 0 0 240px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--primary); color: var(--white); display: grid; place-items: center; }
.brand-mark .icon { width: 18px; height: 18px; }
/* Le logo fourni est une version « réservée » (motif clair) : il tient sur l'aplat corail. */
.brand-mark img { width: 24px; height: 24px; object-fit: contain; display: block; }
.brand-name { font-weight: 500; font-size: 15px; color: var(--ink); }
.brand-sub { font-size: 11px; color: var(--faint); }
.nav { flex: 1; overflow-y: auto; padding: 12px; }
.nav-group { margin-bottom: 12px; }
.nav-group-label { padding: 6px 10px; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--slate-600); font-weight: 500; margin-bottom: 2px; }
.nav-item .icon { color: var(--faint); }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item:hover .icon { color: var(--slate-600); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-strong); }
.nav-item.active .icon { color: var(--primary); }
.nav-foot { padding: 12px; border-top: 1px solid var(--line-soft); }
.nav-foot form { margin: 0; }
.nav-button { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 18px; font-weight: 500; margin: 0; color: var(--ink); }
.searchbox { display: flex; align-items: center; gap: 8px; background: var(--slate-100); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; color: var(--faint); min-width: 240px; }
.searchbox input { border: 0; background: transparent; outline: 0; font-size: 14px; color: var(--text); width: 100%; }
.iconbtn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--slate-600); background: transparent; border: 0; cursor: pointer; }
.iconbtn:hover { background: var(--slate-100); }
.dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); border: 2px solid var(--white); }
.userchip { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; }
.userchip:hover { background: var(--slate-100); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-size: 12px; font-weight: 500; }
.main { padding: 28px; flex: 1; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-card); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.card-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.link { color: var(--primary); font-size: 13px; font-weight: 450; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 9px 14px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--slate-800); }
.btn-outline { background: var(--surface); border-color: var(--line); color: var(--slate-700); }
.btn-outline:hover { background: var(--hover); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--slate-100); }
.btn-sm { padding: 6px 10px; font-size: 13px; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--success-soft); color: var(--success-strong); }
.pill-blue { background: var(--blue-50); color: var(--blue-700); }
.pill-amber { background: var(--amber-50); color: var(--amber-700); }
.pill-slate { background: var(--slate-100); color: var(--slate-600); }
.pill-red { background: var(--red-50); color: var(--red-600); }
/* Une pastille peut être l'action elle-même (retirer son intérêt, annuler une
   demande) : elle ouvre alors une confirmation, plutôt que d'ajouter un bouton
   qui encombre la carte. */
/* Pied de carte du catalogue : les gestes de l'architecte (intérêt, inscription)
   partagent une ligne tant qu'ils tiennent, puis s'empilent en pleine largeur —
   plutôt que de retomber en escalier. « Voir » reste à droite, en dessous. */
.catalog-card-actions { display: flex; flex-direction: column; gap: 6px; }
.catalog-card-gestures { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.catalog-card-gestures > form { flex: 1 1 auto; display: flex; }
.catalog-card-gestures > form > .btn,
.catalog-card-gestures > form > .pill { flex: 1 1 auto; justify-content: center; }
.catalog-card-see { align-self: flex-end; }

button.pill { border: 0; font: inherit; cursor: pointer; }
button.pill:hover { filter: brightness(.95); }
button.pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pa-pos-list { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.wh-pos-pill {
  background: var(--slate-100);
  background: color-mix(in srgb, var(--pos-color, #64748b) 12%, #fff);
  color: var(--pos-color, #64748b);
  border: 0;
}
.wh-pos-pill::before { background: var(--pos-color, #64748b); }
/* Map-pin icon: same hue as the badge, just a bit darker than its background. */
.wh-pos-pill svg,
.wh-pos-pill .icon { color: color-mix(in srgb, var(--pos-color, #64748b) 40%, #fff); }
.wh-pos-more { cursor: default; }

/* Stat tiles */
.stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
/*
 | Tuiles de synthèse. Le chiffre est poussé EN BAS (`margin-top:auto` sur
 | .stat-value) : sans cela, une tuile dont le titre passe sur deux lignes —
 | « Encaissé des architectes » — décalait sa valeur vers le bas et la rangée
 | ne s'alignait plus, alors que le tableau de bord, aux titres courts,
 | paraissait juste. C'est la même règle partout, donc plus de rangée bancale.
 */
.stat {
    flex: 1 1 200px; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 18px 20px; box-shadow: var(--shadow-card);
}
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 38px; }
.stat-ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.stat-ico.green { background: var(--success-soft); color: var(--success); }
.stat-ico.blue { background: var(--blue-50); color: var(--blue-600); }
.stat-ico.amber { background: var(--amber-50); color: var(--amber-600); }
.stat-ico.slate { background: var(--slate-100); color: var(--slate-600); }
.stat-ico.red { background: var(--red-50); color: var(--red-600); }

/* Pagination des listes AJAX : `display:flex` de .row l'emporte sur le [hidden]
   du navigateur (classe > attribut), donc le bloc Précédent/Suivant restait
   affiché sur une liste d'une seule page. */
.card-pad.row[hidden] { display: none; }

/* Trésorerie : le SENS de l'écriture a sa couleur — vert ce qui entre, rouge ce
   qui sort. Même code pour les montants du journal et pour les boutons de saisie
   (volontairement distinct de .btn-danger, qui signale une destruction). */
.amount-in  { color: var(--cash-in-strong); font-weight: 500; }
.amount-out { color: var(--cash-out); font-weight: 500; }
.btn-in  { background: var(--cash-in); color: var(--white); }
.btn-in:hover  { background: var(--cash-in-strong); }
.btn-out { background: var(--cash-out); color: var(--white); }
.btn-out:hover { background: var(--cash-out-strong); }
.stat-value { font-size: 26px; font-weight: 700; margin-top: auto; padding-top: 12px; color: var(--ink); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Table */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.table td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: var(--slate-700); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr.product-row { cursor: pointer; }
.table .right { text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--slate-600); }

.product-list-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--slate-50);
  cursor: pointer;
}
.product-list-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface);
}
.product-list-image-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.product-list-image-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .66);
  color: var(--white);
  opacity: 0;
  transition: opacity .15s;
}
.product-list-image-spinner {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(255, 255, 255, .55);
}
.product-list-image-spinner::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(15, 23, 42, .18);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: brand-saving-spin .7s linear infinite;
}
.product-list-image:hover .product-list-image-overlay,
.product-list-image:focus-within .product-list-image-overlay { opacity: 1; }
.product-list-image.has-image .product-list-image-overlay { opacity: 0; }
.product-list-image.has-image:hover .product-list-image-overlay,
.product-list-image.has-image:focus-within .product-list-image-overlay { opacity: 1; }
.product-list-image.is-uploading { cursor: wait; }
.product-list-image.is-uploading .product-list-image-overlay { opacity: 0; }
.product-list-image.is-uploading .product-list-image-spinner { display: grid; }
.product-list-image.is-uploading .product-list-image-preview { filter: blur(1px); opacity: .5; }
.product-list-table-wrap { overflow-x: auto; position: relative; }
/* Loading veil shown over the list while a filtered page is fetched */
.table-loader {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .78);
}
.table-loader[hidden] { display: none; }
/* Centred "loading …" pill with the same dots-wave as the action buttons */
.table-loader-box {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  font-size: 14px; font-weight: 500; color: var(--slate-600);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.table-loader-box .btn-dots span { width: 6px; height: 6px; }
/* Compact rows-per-page selector in the first header cell */
.pf-pagesize-cell { vertical-align: middle; }
.pf-pagesize-cell .filter-select { width: 100%; min-width: 56px; padding-left: 8px; padding-right: 6px; }
/* Client-side pager under the products list */
.product-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line-soft); }
.product-pager[hidden] { display: none; }
.product-pager .pager-info { font-size: 13px; color: var(--muted); font-weight: 500; }
.product-pager .pager-info strong { color: var(--ink); font-weight: 700; }
.product-pager-controls { display: inline-flex; align-items: center; gap: 4px; }
.product-pager-controls .pager-page { font-size: 13px; font-weight: 500; color: var(--slate-600); padding: 0 10px; }
.product-pager-controls .btn-sm { min-width: 36px; justify-content: center; }
.product-list-table {
  min-width: 1180px;
  table-layout: fixed;
}
.product-list-table th:nth-child(1),
.product-list-table td:nth-child(1) { width: 68px; }
.product-list-table th:nth-child(2),
.product-list-table td:nth-child(2) { width: 260px; }
.product-list-table th:nth-child(3),
.product-list-table td:nth-child(3) { width: 170px; }
.product-list-table th:nth-child(4),
.product-list-table td:nth-child(4) { width: 145px; }
.product-list-table th:nth-child(5),
.product-list-table td:nth-child(5) { width: 145px; }
.product-list-table th:nth-child(6),
.product-list-table td:nth-child(6) { width: 145px; }
.product-list-table th:nth-child(7),
.product-list-table td:nth-child(7) { width: 96px; }
.product-list-table th:nth-child(8),
.product-list-table td:nth-child(8) { width: 78px; }
.product-list-table th:nth-child(9),
.product-list-table td:nth-child(9) { width: 118px; }
.product-list-table td { overflow-wrap: anywhere; }
.product-list-table th:nth-child(7),
.product-list-table td:nth-child(7) {
  white-space: nowrap;
  overflow-wrap: normal;
}
.product-list-table .pill { white-space: nowrap; }

/* Quick-add results table: content-sized columns (auto layout) so the Produit
   cell's name / reference / EAN each stay on one line instead of inheriting the
   products-list 9-column fixed widths (which crushed Produit to 68px). */
.product-quick-table { table-layout: auto; }
.product-quick-table td { overflow-wrap: normal; }
.product-quick-table th:first-child,
.product-quick-table td:first-child { white-space: nowrap; }

/* ----------------------------------------------------------------------------
 * Product picker modal (overlay) — shared by the orders / casse / offers /
 * returns / supplier pickers. Historically each module inlined this CSS in its
 * own page; centralised here so every picker (incl. offers/casse) overlays
 * correctly instead of falling to the bottom of the page.
 * ------------------------------------------------------------------------- */
.order-picker-backdrop {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(15, 23, 42, .45);
    align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow: auto;
}
.order-picker-backdrop:not([hidden]) { display: flex; }
.order-picker {
    width: min(1280px, 100%); background: var(--surface, #fff);
    border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
    padding: 20px; display: flex; flex-direction: column;
}
.order-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* overflow visible so the in-header filter dropdowns aren't clipped; the backdrop scrolls. */
.order-picker-results { overflow: visible; border: 1px solid var(--line); border-radius: 9px; }
.order-picker-count { padding: 10px 12px; }
.picker-table { width: 100%; }
.picker-table tbody td:first-child { white-space: normal; }
.picker-table thead th { overflow: visible; }
/* Per-column filter row inside the picker table head. */
.picker-filter-row th { padding: 8px 8px; vertical-align: top; background: var(--slate-50); }
.picker-prod-filter { display: flex; gap: 6px; }
.picker-prod-filter #filter-type { width: 96px; flex: 0 0 auto; }
.picker-prod-filter #filter-search { flex: 1 1 auto; min-width: 0; }
.picker-filter-row .input { height: 34px; padding: 5px 9px; font-size: 13px; }

.product-filter-card { margin-bottom: 18px; }
.product-client-filter {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.product-client-filter .field { margin-bottom: 0; }
.product-client-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-price-cell {
  white-space: nowrap;
}
.price-old {
  color: var(--faint);
  margin-right: 8px;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price-new {
  color: var(--red-600);
  font-weight: 700;
}

/* Forms */
.field { margin-bottom: 16px; }
.label { display: block; font-size: 13px; color: var(--slate-600); margin-bottom: 6px; font-weight: 500; }
.input { width: 100%; border: 1px solid var(--slate-300); border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: 0; transition: border-color .15s, box-shadow .15s; }
.input:focus { border-color: var(--primary); box-shadow: var(--ring-primary); }
.input.invalid { border-color: var(--red-400); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--red-600); }
.field-hint { margin-top: 5px; font-size: 12px; color: var(--muted); }

/* Product editor */
.product-editor {
  display: grid;
  grid-template-columns: minmax(190px, .42fr) minmax(0, 2fr);
  gap: 20px;
  align-items: start;
}
.product-editor-fields { min-width: 0; }
.product-section-head,
.product-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.product-section-head { margin-bottom: 14px; }
.product-section-copy { font-size: 12px; margin-top: 3px; }
.product-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.product-form-row {
  display: grid;
  gap: 0 16px;
}
.product-form-row .field { min-width: 0; }
.product-form-row-type { grid-template-columns: minmax(180px, 260px); }
.product-form-row-identity { grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.4fr); }
.product-form-row-classification { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-form-row-price { grid-template-columns: minmax(140px, 180px) minmax(260px, 1fr); }
.quick-product-card {
  overflow: visible;
  margin-bottom: 36px;
}
.quick-product-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) minmax(220px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, max-content);
  gap: 24px 22px;
  align-items: start;
}
.quick-pick { min-width: 0; }
.quick-combo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 12px;
  align-items: stretch;
}
.quick-combo-row.is-solo { grid-template-columns: minmax(0, 1fr); }
.quick-add-btn,
.quick-confirm,
.quick-cancel {
  display: inline-grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.quick-add-btn {
  width: 38px;
  height: 38px;
  align-self: center;
  border-radius: 8px;
  background: var(--primary);
  color: var(--white);
}
.quick-add-btn:hover { background: var(--primary-strong); transform: translateY(-1px); }
.quick-add-btn:disabled { background: var(--slate-300); color: var(--white); cursor: not-allowed; transform: none; }
.quick-add-btn:focus-visible,
.quick-confirm:focus-visible,
.quick-cancel:focus-visible,
.quick-submit:focus-visible { outline: 0; box-shadow: var(--ring-primary); }
.quick-add-btn svg { width: 18px; height: 18px; }
.quick-pick.is-staged .catalog-combobox-control { border-color: #22c55e; box-shadow: 0 0 0 1px rgba(34, 197, 94, .15); }
.quick-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}
.quick-new[hidden] { display: none; }
/* Name takes its own full-width row so the panel never collapses in a narrow column;
   code input + confirm/cancel sit together on the row beneath. */
.quick-new > .input:not(.quick-code-input) { grid-column: 1 / -1; }
.quick-new .quick-code-input { grid-column: 1; }
.quick-new .quick-new-actions { grid-column: 2; }
.quick-new .input { height: 40px; border-radius: 8px; }
.quick-new-actions { display: flex; gap: 6px; align-items: stretch; }
.quick-confirm,
.quick-cancel {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--white);
}
.quick-confirm { background: #22c55e; }
.quick-confirm:hover { background: #16a34a; transform: translateY(-1px); }
.quick-cancel { background: var(--slate-700); }
.quick-cancel:hover { background: var(--slate-800); transform: translateY(-1px); }
.quick-confirm svg,
.quick-cancel svg { width: 18px; height: 18px; }
.quick-submit-cell { display: flex; align-items: end; justify-content: flex-end; min-height: 68px; padding-top: 24px; }
.quick-submit {
  min-height: 48px;
  max-width: 190px;
  padding: 8px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--slate-500);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
.quick-submit:not(:disabled) { background: #16a34a; }
.quick-submit:disabled { cursor: not-allowed; opacity: .86; }
/* Taille multi-select chips (one product per chosen size in a run) */
.quick-taille-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--primary); color: var(--white); font-size: 13px; font-weight: 500; }
.quick-chip button { border: 0; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.quick-chip button:hover { color: #fff; }
/* Already-existing combinations flagged on the results table */
.product-row.is-existing td { background: var(--red-50); color: var(--red-700, var(--red-600)); }
.product-row.is-existing .pq-warn { color: var(--red-600); }
.product-status-row {
  margin: 4px -20px -20px;
  padding: 18px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--slate-50);
  border-radius: 0 0 10px 10px;
}
.product-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; color: var(--slate-700); }
.product-switch input { position: absolute; opacity: 0; pointer-events: none; }
.product-switch-track { width: 42px; height: 24px; padding: 3px; border-radius: 999px; background: var(--slate-300); transition: background .15s; }
.product-switch-track::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(15, 23, 42, .25); transition: transform .15s; }
.product-switch input:checked + .product-switch-track { background: var(--primary); }
.product-switch input:checked + .product-switch-track::after { transform: translateX(18px); }
.product-switch input:focus-visible + .product-switch-track { box-shadow: var(--ring-primary); }

.product-media-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 14px; }
.product-media-preview {
  position: relative;
  display: block;
  cursor: pointer;
  flex: 1 1 auto;
  min-height: 196px;
  border-radius: 9px;
  overflow: hidden;
  background:
    linear-gradient(45deg, var(--slate-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--slate-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--slate-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--slate-100) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.product-media-preview img { display: block; width: 100%; height: 100%; min-height: 196px; object-fit: contain; background: rgba(255,255,255,.78); }
.product-media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: linear-gradient(to top, rgba(15, 23, 42, .34), rgba(15, 23, 42, .02) 55%);
  transition: background .18s;
}
.product-media-preview:hover .product-media-overlay { background: linear-gradient(to top, rgba(15, 23, 42, .48), rgba(15, 23, 42, .08) 60%); }
.product-upload-button { pointer-events: none; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
/* Existing-image mode: a compact edit icon in the top-right corner. */
.product-media-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: var(--white);
  background: rgba(15, 23, 42, .82);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
  pointer-events: none;
  transition: background .15s, transform .12s;
}
.product-media-edit svg { width: 18px; height: 18px; }
.product-media-preview.has-image:hover .product-media-edit { background: var(--slate-900); transform: translateY(-1px); }
.product-media-format { color: var(--white); font-size: 11px; font-weight: 500; text-shadow: 0 1px 3px rgba(15,23,42,.6); }
.product-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.product-media-caption { padding: 12px 6px 0; color: var(--muted); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.product-media-error { padding: 0 6px 4px; text-align: center; }
/* Classification read-only strip (product edit). */
.prod-classif-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; background: var(--slate-50); border-radius: 8px; }
.prod-classif-chip { display: flex; align-items: baseline; gap: 5px; }
.prod-classif-key { font-size: 11px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.prod-classif-val { font-size: 13px; font-weight: 500; color: var(--slate-700); }
.prod-classif-sep { color: var(--slate-300); font-size: 14px; font-weight: 300; }

/* Edit header: read-only type text + compact non-editable identity panel */
.prod-readonly-text {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--slate-50);
  color: var(--ink);
  font-weight: 500;
}
.prod-meta { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.prod-meta-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.prod-meta-key { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.prod-meta-val { min-width: 0; color: var(--ink); font-weight: 500; }
.prod-meta-val .prod-classif-row { padding: 0; background: transparent; }

/* Product line thumbnail (order / supplier-order detail tables). */
.cell-product { display: flex; align-items: center; gap: 10px; }
.cell-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--slate-50);
  border: 1px solid var(--line-soft);
}

.catalog-combobox { position: relative; }
.catalog-combobox-control {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--slate-300);
  border-radius: 8px;
  background: var(--surface);
  padding-left: 11px;
  transition: border-color .15s, box-shadow .15s;
}
.catalog-combobox:focus-within .catalog-combobox-control { border-color: var(--primary); box-shadow: var(--ring-primary); }
.catalog-combobox.invalid .catalog-combobox-control { border-color: var(--red-400); }
.catalog-combobox-control > .icon { color: var(--faint); }
.catalog-combobox-control input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 10px 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.catalog-combobox-control input::-webkit-search-cancel-button { display: none; }
/* Inline clear (×) — narrower than the chevron toggle button */
.catalog-combobox-control .catalog-combobox-clear {
  width: auto; align-self: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 18px; line-height: 1; padding: 0 4px;
}
.catalog-combobox-control .catalog-combobox-clear:hover { color: var(--ink); }
/* [hidden] must beat the `display:grid` below (class > attribute), so the chevron
   toggle and the clear × are mutually exclusive: only one icon shows when filled. */
.catalog-combobox-control button[hidden] { display: none; }
.catalog-combobox-control button {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 40px;
  border: 0;
  border-left: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.catalog-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}
.catalog-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--slate-700);
  text-align: left;
  cursor: pointer;
}
.catalog-option:hover,
.catalog-option.active { background: var(--primary-soft); color: var(--primary-strong); }
.catalog-option-category { font-weight: 650; }
.catalog-option-separator { color: var(--slate-300); }
.catalog-option-subcategory { color: var(--muted); }
.catalog-option:hover .catalog-option-subcategory,
.catalog-option.active .catalog-option-subcategory { color: var(--primary-strong); }
.catalog-option-empty { padding: 14px 12px; color: var(--muted); text-align: center; }
/* Split option: label on the left, muted sub (e.g. client group) on the right. */
.catalog-option-split { justify-content: space-between; }
.catalog-option-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-option-sub { flex: 0 0 auto; color: var(--faint); font-size: 13px; }
.catalog-option:hover .catalog-option-sub,
.catalog-option.active .catalog-option-sub { color: var(--primary-strong); }
.catalog-option-swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); margin-right: 2px; }
/* A combobox opened inside a horizontally-scrolling table would be clipped by
   the wrap's overflow (overflow-x:auto forces overflow-y to auto). Lift the clip
   only while its option list is open, so the dropdown shows in full; normal
   horizontal scrolling resumes once it closes. */
.table-wrap:has(.catalog-combobox-control input[aria-expanded="true"]) { overflow: visible; }
/* Same escape hatch for the date-range calendar popup (marked .drp-open while shown),
   so it isn't clipped by the table-wrap when the table has few rows. */
.table-wrap:has(.drp-open) { overflow: visible; }
/* …and for the status multi-select popup (marked .multisel-open while shown). */
.table-wrap:has(.multisel-open) { overflow: visible; }
/* …et pour le calendrier d'un champ date (marqué .dp-open pendant l'ouverture) :
   un filtre « période » dans un `.table-filter-row` est sinon coupé net. */
.table-wrap:has(.datepicker-wrap.dp-open) { overflow: visible; }
.product-sku-table-wrap { overflow-x: auto; }
.product-sku-card {
  padding-top: 14px;
  padding-bottom: 14px;
}
.product-sku-card .between { margin-bottom: 12px; }
.product-sku-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
}
.product-sku-table { min-width: 1060px; }
.product-sku-table th,
.product-sku-table td { padding-top: 12px; padding-bottom: 12px; }
.product-sku-table tbody tr { height: 86px; }
.product-sku-table .input { padding-top: 9px; padding-bottom: 9px; }
.product-sku-table select.input { padding-right: 34px; }
.product-sku-table input[name="sku_code[]"] { min-width: 130px; }
.product-sku-table input[name="barcode[]"] { min-width: 120px; }
.product-sku-table input[name="supplier_ref[]"] { margin-top: 4px !important; }

/* Product import */
.import-card { margin-bottom: 18px; overflow: hidden; }
.import-upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.import-upload-actions { display: flex; align-items: center; }
.import-sample {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--slate-50);
}
.import-sample code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--slate-700);
  overflow-x: auto;
}
.import-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.import-table-wrap { overflow-x: auto; }
.import-table { min-width: 1680px; table-layout: fixed; }
.import-table th,
.import-table td { font-size: 13px; }
.import-name-cell { color: var(--ink); font-weight: 500; }
.import-issues { display: flex; flex-wrap: wrap; gap: 6px; }
.import-issue {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
}
.import-issue-missing,
.import-issue-invalid { background: var(--red-50); color: var(--red-600); }
.import-issue-duplicate { background: var(--amber-50); color: var(--amber-700); }
.import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.import-row-success td { background: rgba(236, 253, 245, .85); }
.import-row-warning td { background: rgba(255, 251, 235, .9); }
.import-row-error td { background: rgba(254, 242, 242, .85); }
.import-flash-error { background: var(--red-50); color: var(--red-600); border-color: var(--red-400); }

/* Inline brand creation */
.brand-inline-card {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--emerald-200);
  border-radius: 10px;
  background: linear-gradient(110deg, var(--primary-soft), var(--surface) 46%);
  box-shadow: var(--shadow-card);
}
.brand-inline-intro { display: flex; align-items: center; gap: 12px; }
.brand-inline-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--primary); color: var(--white); }
.brand-inline-icon .icon { width: 19px; height: 19px; }
.brand-inline-copy { margin-top: 3px; font-size: 12px; }
.brand-inline-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 14px; align-items: end; }
.brand-inline-name .label { margin-bottom: 5px; }
.brand-inline-status { min-height: 42px; padding-bottom: 1px; }
.brand-inline-form .btn { min-height: 42px; justify-content: center; }
.brand-inline-form .btn:disabled { opacity: .65; cursor: wait; }
.brand-name-cell { color: var(--ink) !important; font-weight: 500; }
.brand-identity { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.brand-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
  overflow: hidden;
  cursor: pointer;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-logo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.brand-logo-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .66);
  color: var(--white);
  opacity: 0;
  transition: opacity .15s;
}
.brand-logo:hover .brand-logo-overlay,
.brand-logo:focus-within .brand-logo-overlay { opacity: 1; }
.brand-logo.is-uploading { opacity: .58; cursor: wait; }
.brand-logo.is-uploading .brand-logo-overlay { opacity: 1; }
.brand-logo.is-uploading .brand-logo-overlay .icon { animation: brand-saving-spin .7s linear infinite; }
.brand-logo-1 { background: #dcfce7; color: #166534; }
.brand-logo-2 { background: #dbeafe; color: #1e40af; }
.brand-logo-3 { background: #fef3c7; color: #92400e; }
.brand-logo-4 { background: #fce7f3; color: #9d174d; }
.brand-logo-5 { background: #ede9fe; color: #5b21b6; }
.brand-logo-6 { background: #cffafe; color: #155e75; }
.brand-name-editor { position: relative; min-width: 0; }
.brand-name-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-left: -8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: text;
}
.brand-name-text { white-space: normal; overflow-wrap: anywhere; }
.brand-name-pencil { display: inline-flex; color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.brand-name-display:hover { background: var(--slate-100); }
.brand-name-display:hover .brand-name-pencil,
.brand-name-display:focus-visible .brand-name-pencil { opacity: 1; transform: translateX(0); }
.brand-name-input {
  display: none;
  width: min(360px, 100%);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  outline: 0;
  box-shadow: var(--ring-primary);
}
.brand-name-editor.is-editing .brand-name-display { display: none; }
.brand-name-editor.is-editing .brand-name-input { display: block; }
.brand-name-editor.is-saving .brand-name-input {
  color: var(--slate-400);
  background: var(--slate-100);
  border-color: var(--slate-300);
  box-shadow: none;
  cursor: wait;
}
.brand-name-editor.is-saving::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid var(--slate-300);
  border-top-color: var(--slate-600);
  border-radius: 50%;
  animation: brand-saving-spin .7s linear infinite;
}
.brand-name-editor.is-saving .brand-name-input { padding-right: 30px; }
@keyframes brand-saving-spin { to { transform: rotate(360deg); } }
.brand-empty-cell { padding: 28px !important; text-align: center; }
.brand-row-new { animation: brand-row-arrive .45s ease-out both; }
@keyframes brand-row-arrive {
  from { opacity: 0; transform: translateY(-8px); background: var(--primary-soft); }
  to { opacity: 1; transform: translateY(0); background: transparent; }
}
.brand-table-head-left { display: flex; align-items: center; gap: 18px; }
.brand-page-size { display: inline-flex; align-items: center; gap: 8px; }
.brand-page-size label { font-size: 12px; font-weight: 500; color: var(--muted); }
.brand-page-size select {
  min-width: 72px;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: 0;
}
.brand-page-size select:focus { border-color: var(--primary); box-shadow: var(--ring-primary); }
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
}
.table-page-link,
.table-page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 500;
}
.table-page-link { padding: 6px 11px; }
.table-page-number { min-width: 34px; padding: 6px; }
.table-page-link:hover,
.table-page-number:hover { border-color: var(--slate-300); background: var(--hover); color: var(--ink); }
.table-page-number.active { border-color: var(--primary); background: var(--primary); color: var(--white); }
.table-page-link.disabled { opacity: .42; pointer-events: none; }
.table-page-numbers { display: flex; align-items: center; gap: 6px; }

/* Inline taxonomy management */
.taxonomy-inline-card {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background:
    linear-gradient(112deg, rgba(219, 234, 254, .72), rgba(255, 255, 255, .94) 48%),
    var(--surface);
  box-shadow: var(--shadow-card);
}
.taxonomy-inline-intro { display: flex; align-items: center; gap: 12px; }
.taxonomy-inline-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 9px;
  background: var(--blue-600);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .18);
}
.taxonomy-inline-icon .icon { width: 20px; height: 20px; }
.taxonomy-inline-copy,
.taxonomy-table-copy { margin-top: 3px; font-size: 12px; }
.taxonomy-inline-form {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
}
.taxonomy-inline-status { min-height: 42px; padding-bottom: 1px; }
.taxonomy-inline-form .btn { min-height: 42px; justify-content: center; }
.taxonomy-inline-form .btn:disabled,
.taxonomy-subcategory-form .btn:disabled { opacity: .6; cursor: wait; }
.taxonomy-card { overflow: hidden; }
.taxonomy-card-head { min-height: 70px; }
.taxonomy-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.taxonomy-collapse-toggle { white-space: nowrap; }
.taxonomy-table-wrap { overflow-x: auto; }
.taxonomy-table { min-width: 800px; table-layout: fixed; }
.taxonomy-col-name { width: 44%; }
.taxonomy-col-type { width: 15%; }
.taxonomy-col-products { width: 11%; }
.taxonomy-col-status { width: 13%; }
.taxonomy-col-action { width: 17%; }
.taxonomy-table td { vertical-align: middle; }
.taxonomy-table tbody.taxonomy-group + tbody.taxonomy-group .taxonomy-category-row td {
  border-top: 8px solid var(--slate-50);
}
.taxonomy-table tbody tr.taxonomy-category-row { background: rgba(248, 250, 252, .76); }
.taxonomy-table tbody tr.taxonomy-category-row:hover { background: var(--slate-100); }
.taxonomy-category-row { cursor: pointer; }
.taxonomy-category-row .taxonomy-name-cell { color: var(--ink); font-weight: 700; }
.taxonomy-subcategory-row .taxonomy-name-cell { padding-left: 34px; }
.taxonomy-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.taxonomy-group-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.taxonomy-group-toggle:hover,
.taxonomy-group-toggle:focus-visible { background: rgba(226, 232, 240, .72); color: var(--slate-700); }
.taxonomy-group-toggle .icon { transition: transform .15s ease, color .15s ease; }
.taxonomy-group.is-collapsed .taxonomy-subcategory-row { display: none; }
.taxonomy-group.is-collapsed .taxonomy-group-toggle .icon { transform: rotate(-90deg); }
.taxonomy-subcategory-identity { position: relative; }
.taxonomy-branch {
  position: relative;
  width: 16px;
  height: 24px;
  flex: 0 0 16px;
  margin-left: -14px;
  border-left: 1px solid var(--slate-300);
  border-bottom: 1px solid var(--slate-300);
  border-radius: 0 0 0 8px;
  transform: translateY(-7px);
}
.taxonomy-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.taxonomy-subcategory-row .taxonomy-image {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 8px;
}
.taxonomy-image img { width: 100%; height: 100%; object-fit: cover; background: var(--white); }
.taxonomy-image-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.taxonomy-image-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .68);
  color: var(--white);
  opacity: 0;
  transition: opacity .15s;
}
.taxonomy-image:hover .taxonomy-image-overlay,
.taxonomy-image:focus-within .taxonomy-image-overlay,
.taxonomy-image.is-uploading .taxonomy-image-overlay { opacity: 1; }
.taxonomy-image.is-uploading { opacity: .6; cursor: wait; }
.taxonomy-image.is-uploading .taxonomy-image-overlay .icon { animation: brand-saving-spin .7s linear infinite; }
.taxonomy-image-1 { background: #dbeafe; color: #1e40af; }
.taxonomy-image-2 { background: #dcfce7; color: #166534; }
.taxonomy-image-3 { background: #fef3c7; color: #92400e; }
.taxonomy-image-4 { background: #fce7f3; color: #9d174d; }
.taxonomy-image-5 { background: #ede9fe; color: #5b21b6; }
.taxonomy-image-6 { background: #cffafe; color: #155e75; }
.taxonomy-name-editor {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.taxonomy-name-display {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  margin-left: -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: text;
}
.taxonomy-name-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.taxonomy-name-pencil {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--faint);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}
.taxonomy-name-display:hover { background: rgba(226, 232, 240, .72); }
.taxonomy-name-display:hover .taxonomy-name-pencil,
.taxonomy-name-display:focus-visible .taxonomy-name-pencil { opacity: 1; transform: translateX(0); }
.taxonomy-name-input {
  display: none;
  width: min(360px, 100%);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  outline: 0;
  box-shadow: var(--ring-primary);
}
.taxonomy-name-editor.is-editing .taxonomy-name-display { display: none; }
.taxonomy-name-editor.is-editing .taxonomy-name-input { display: block; }
.taxonomy-name-editor.is-saving .taxonomy-name-input {
  padding-right: 30px;
  color: var(--slate-400);
  background: var(--slate-100);
  border-color: var(--slate-300);
  box-shadow: none;
  cursor: wait;
}
.taxonomy-name-editor.is-saving::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid var(--slate-300);
  border-top-color: var(--slate-600);
  border-radius: 50%;
  animation: brand-saving-spin .7s linear infinite;
}
.taxonomy-type {
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.taxonomy-type-category { background: var(--blue-50); color: var(--blue-700); }
.taxonomy-type-subcategory { background: var(--slate-100); color: var(--slate-600); }
.taxonomy-table form { margin: 0; }
.taxonomy-table form > .pill { border: 0; cursor: pointer; }
.taxonomy-add-sub { white-space: nowrap; }
.taxonomy-subcategory-form-row td { padding: 14px 20px 16px 68px; background: var(--blue-50); }
.taxonomy-subcategory-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  background: rgba(255, 255, 255, .86);
}
.taxonomy-subcategory-actions { display: flex; align-items: center; gap: 6px; min-height: 42px; }
.taxonomy-subcategory-form .btn { min-height: 38px; }
.taxonomy-empty-cell { padding: 44px 20px !important; color: var(--muted) !important; text-align: center; }
.taxonomy-row-new,
.taxonomy-group-new { animation: taxonomy-arrive .45s ease-out both; }
@keyframes taxonomy-arrive {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Suppliers */
.supplier-form-card { overflow: hidden; }
.supplier-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.supplier-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px -20px -20px;
  padding: 18px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--slate-50);
}
.supplier-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.supplier-detail-head .sub { margin-top: 4px; }
.supplier-hero-card { padding: 22px; margin-bottom: 18px; }
.supplier-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: stretch;
}
.supplier-hero-main,
.supplier-hero-side {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
}
.supplier-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
}
.supplier-avatar {
  width: 84px;
  height: 84px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-soft), #dbeafe);
  color: var(--primary-strong);
  font-size: 28px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}
.supplier-hero-copy { min-width: 0; }
.supplier-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 18px;
}
.supplier-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.supplier-hero-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
.supplier-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.supplier-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.supplier-mini-stat {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--slate-50);
}
.supplier-mini-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.supplier-mini-label {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}
.supplier-tabs-card { overflow: hidden; }
.supplier-tabs-head { align-items: flex-start; gap: 16px; }
.supplier-tabs-copy { margin-top: 3px; font-size: 12px; }
.supplier-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.supplier-tab {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.supplier-tab:hover { background: var(--hover); color: var(--ink); }
.supplier-tab.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
.supplier-panels { padding: 0; }
.supplier-panel { padding: 0; }
.supplier-empty-state {
  padding: 18px 20px 0;
}
.supplier-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.supplier-info-table th {
  width: 190px;
  font-size: 12px;
  color: var(--faint);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.supplier-info-table td,
.supplier-info-table th { padding-left: 20px; padding-right: 20px; }
.supplier-info-table tbody tr:hover { background: transparent; }
.table-wrap { overflow-x: auto; }

.supplier-tabs-card .card-head { min-height: 74px; }
.supplier-panel .table { min-width: 920px; }
.supplier-info-table { min-width: 0; }

@media (max-width: 880px) {
  .supplier-form-card .supplier-form-grid { grid-template-columns: 1fr; }
  .supplier-form-footer { align-items: flex-start; flex-direction: column; }
  .supplier-tabs-head { align-items: flex-start; flex-direction: column; }
  .supplier-tabs { justify-content: flex-start; }
  .supplier-hero-grid { grid-template-columns: 1fr; }
}

/* Supplier orders */
.supplier-order-list-card,
.supplier-order-lines-card,
.supplier-order-history-card { overflow: hidden; }
.supplier-order-table { min-width: 1100px; }
.supplier-order-row { cursor: pointer; }
.order-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--slate-200); }
.order-progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }

/* Failed-delivery orders: tinted row + warning icon so problem orders stand out. */
.order-row-failed > td { background: color-mix(in srgb, var(--red-500, #ef4444) 8%, transparent); }
.order-row-failed:hover > td { background: color-mix(in srgb, var(--red-500, #ef4444) 13%, transparent); }
.order-row-failed > td:first-child { box-shadow: inset 3px 0 0 var(--red-500, #ef4444); }
.order-failed-ic { display: inline-flex; color: var(--red-600, #dc2626); }
/* Failed order: red progress bar + the issue (instead of the status) below it. */
.order-progress.is-failed span { background: var(--red-500, #ef4444); }
.order-issue-text { display: inline-flex; align-items: center; gap: 4px; color: var(--red-600, #dc2626); font-weight: 500; }
.order-issue-text svg { width: 13px; height: 13px; }
.supplier-order-progress-copy,
.supplier-order-card-copy { margin-top: 4px; font-size: 12px; }
.supplier-order-empty { padding: 44px 20px !important; text-align: center; color: var(--muted) !important; }
.supplier-order-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, .7fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.supplier-order-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.supplier-order-notes { resize: vertical; min-height: 104px; }
.supplier-order-summary { position: sticky; top: 84px; }
.supplier-order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px -20px -4px;
  padding: 18px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--slate-50);
  color: var(--slate-600);
}
.supplier-order-total strong { color: var(--ink); font-size: 18px; }
.supplier-order-lines-card { margin-bottom: 20px; }
.supplier-order-lines { min-width: 1220px; }
.supplier-order-lines th:nth-child(1) { min-width: 280px; }
.supplier-order-lines th:nth-child(2) { min-width: 240px; }
.supplier-order-lines .line-quantity,
.supplier-order-lines .line-received,
.supplier-order-lines .line-price { min-width: 112px; text-align: right; }
.supplier-order-line-error {
  padding: 10px 20px;
  border-bottom: 1px solid var(--red-400);
  background: var(--red-50);
  color: var(--red-600);
}
.supplier-order-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.supplier-order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
/* Left overview card fills the row height (matching the taller status card) and
   spreads its fields so there's no dead space below it. The right card stays
   content-height so nothing floats under its button. */
.supplier-order-detail-grid > section { display: flex; flex-direction: column; }
.supplier-order-detail-grid > section .supplier-order-overview { flex: 1 1 auto; align-content: space-between; }
.supplier-order-detail-grid > aside { align-self: start; }
.supplier-order-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.supplier-order-value { color: var(--ink); font-size: 23px; font-weight: 800; white-space: nowrap; }
.supplier-order-value span { color: var(--muted); font-size: 12px; font-weight: 700; }
.supplier-order-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-top: 24px;
}
.supplier-order-overview > div > span,
.supplier-order-notes-box > span {
  display: block;
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.supplier-order-overview strong { color: var(--ink); }
.supplier-order-notes-box { margin-top: 22px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--slate-50); }
.supplier-order-notes-box p { margin: 0; color: var(--slate-700); }
.supplier-order-progress-large { margin-top: 20px; }
.supplier-order-progress-large > .order-progress { height: 10px; margin: 10px 0; }
.supplier-order-progress-large strong { color: var(--ink); font-size: 24px; }
.supplier-order-status-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.supplier-order-history-card { margin-top: 20px; }
.supplier-order-timeline { padding: 20px; }
.supplier-order-timeline-item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 20px; }
.supplier-order-timeline-item:last-child { padding-bottom: 0; }
.supplier-order-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.supplier-order-timeline-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--slate-100); color: var(--slate-400); }
.supplier-order-timeline-marker.is-current { background: var(--primary-soft); color: var(--primary); }
.supplier-order-timeline-content { padding: 3px 0 0; }
.supplier-order-timeline-content p { margin: 8px 0 0; color: var(--slate-600); }
.supplier-order-flash-error { background: var(--red-50); color: var(--red-600); border-color: var(--red-400); }

@media (max-width: 980px) {
  .supplier-order-editor,
  .supplier-order-detail-grid { grid-template-columns: 1fr; }
  .supplier-order-summary { position: static; }
}

@media (max-width: 620px) {
  .supplier-order-fields,
  .supplier-order-overview { grid-template-columns: 1fr; }
  .supplier-order-detail-head { flex-direction: column; }
}

/* Stepper */
.stepper { display: flex; align-items: flex-start; }
.step { flex: 1; text-align: center; position: relative; }
.step .bullet { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; background: var(--surface); border: 2px solid var(--line); color: var(--slate-300); position: relative; z-index: 1; }
.step.done .bullet { background: var(--primary); border-color: var(--primary); color: var(--white); }
.step.done .bullet .icon { width: 15px; height: 15px; }
.step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.step.done::before { background: var(--primary); }
.step:first-child::before { display: none; }
.s-title { font-size: 13px; font-weight: 500; color: var(--slate-700); }
.s-sub { font-size: 12px; color: var(--faint); }

/* Flash / page header (components) */
.flash { display: flex; align-items: center; gap: 8px; background: var(--primary-soft); color: var(--primary-strong); border: 1px solid var(--emerald-200); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 18px; }
.flash .icon { width: 18px; height: 18px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); }
.page-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Responsive shell adjustments */
@media (max-width: 880px) {
  /* Le menu latéral devient un tiroir (voir la section « Mobile » en fin de
     fichier) : plus de rail d'icônes sans libellé. */
  .searchbox { display: none; }
  .product-editor { grid-template-columns: 1fr; }
  .product-client-filter { grid-template-columns: 1fr; }
  .product-client-filter-actions { justify-content: flex-start; }
  .quick-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-submit-cell { justify-content: flex-start; min-height: auto; }
  .product-media-card { min-height: 0; }
  .brand-inline-card { grid-template-columns: 1fr; }
  .import-upload-form { grid-template-columns: 1fr; }
  .import-footer { align-items: flex-start; flex-direction: column; }
  .taxonomy-inline-card { grid-template-columns: 1fr; }
  .brand-table-head { align-items: flex-start; gap: 10px; }
  .brand-table-head-left { align-items: flex-start; flex-direction: column; gap: 8px; }
  .taxonomy-subcategory-form { grid-template-columns: 1fr auto; }
  .taxonomy-subcategory-field { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .main { padding: 18px; }
  .topbar { padding: 0 16px; }
  .page-head { align-items: flex-start; gap: 12px; }
  .product-fields-grid { grid-template-columns: 1fr; }
  .product-form-row,
  .product-form-row-type,
  .product-form-row-identity,
  .product-form-row-classification,
  .product-form-row-price { grid-template-columns: 1fr; }
  .quick-product-grid { grid-template-columns: 1fr; }
  .quick-new { grid-template-columns: minmax(0, 1fr) auto; }
  .quick-submit { width: 100%; }
  .product-section-head { align-items: flex-start; }
  .product-status-row { align-items: flex-start; flex-direction: column; }
  .product-media-preview,
  .product-media-preview img { min-height: 196px; }
  .brand-inline-form { grid-template-columns: 1fr; }
  .taxonomy-inline-form,
  .taxonomy-subcategory-form { grid-template-columns: 1fr; }
  .brand-inline-status { min-height: auto; }
  .taxonomy-inline-status { min-height: auto; }
  .taxonomy-subcategory-field { grid-column: auto; }
  .taxonomy-subcategory-actions { justify-content: flex-start; }
  .supplier-form-grid { grid-template-columns: 1fr; }
  .supplier-form-footer { align-items: flex-start; flex-direction: column; }
  .supplier-hero-main { grid-template-columns: 1fr; }
  .supplier-contact-grid { grid-template-columns: 1fr; }
  .supplier-hero-stats { grid-template-columns: 1fr; }
  .table-pagination { padding: 12px; }
  .table-page-link { font-size: 0; }
  .table-page-link .icon { width: 17px; height: 17px; }
}

/* ---- Custom date picker ------------------------------------------ */
[x-cloak] { display: none !important; }

/* --- Side dock (slide-in drawer) + its history timeline --- */
.btn-icon { padding: 0; width: 38px; height: 38px; justify-content: center; }
.dock { display: inline-flex; }
.dock-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 90; }
.dock-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--surface); z-index: 91; box-shadow: -14px 0 44px rgba(15, 23, 42, .20); display: flex; flex-direction: column; }
/* Dock large — un compte rendu en tableau (import d'architectes). */
.dock-panel-wide { width: min(960px, 96vw); }
/* Tuile cliquable : elle ouvre la liste qu'elle résume (compte rendu d'import). */
.stat-button { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.stat-button:hover { border-color: var(--slate-300); }
.stat-button.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.dock-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; font-weight: 600; }
.dock-anim { transition: transform .25s ease, opacity .25s ease; }
.dock-off { transform: translateX(100%); opacity: 0; }
.dock-on { transform: translateX(0); opacity: 1; }
.dock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dock-head-sub { font-size: 13px; margin-top: 2px; }
.dock-close { background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; display: inline-flex; }
.dock-close:hover { background: var(--hover); color: var(--ink); }
.dock-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }
.dock-empty { text-align: center; padding: 24px; }
.dock-timeline-item { display: flex; gap: 12px; padding-bottom: 18px; position: relative; }
.dock-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.dock-timeline-marker { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--slate-100); color: var(--slate-400); z-index: 1; }
.dock-timeline-marker.is-current { background: var(--primary-soft); color: var(--primary-strong); }
.dock-timeline-content { flex: 1 1 auto; min-width: 0; }
.dock-timeline-note { margin: 6px 0 0; font-size: 13px; color: var(--slate-600); }
.dock-event { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--slate-700); }
.dock-event svg { width: 14px; height: 14px; color: var(--slate-400); }
.dock-by { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dock-by svg { width: 13px; height: 13px; }

/* Order line fulfilment qty (prepared/delivered) + livreur pointing */
.qty-short { color: var(--amber-600); font-weight: 700; }
.lv-pack-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; cursor: pointer; }
.lv-pack-all svg { width: 15px; height: 15px; color: var(--slate-400); }
.lv-check-col { width: 1%; text-align: center; white-space: nowrap; }
.lv-line-check, .pick-row input[type="checkbox"] { width: 18px; height: 18px; }
.stock-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.stock-summary .pill { display: inline-flex; align-items: center; gap: 5px; }
.datepicker-wrap { position: relative; }
.datepicker-control { position: relative; display: flex; align-items: center; }
.datepicker-control .datepicker-input { flex: 1; padding-right: 38px; }
.datepicker-cal-btn {
    position: absolute; right: 10px; background: none; border: none;
    cursor: pointer; color: var(--muted); display: flex; align-items: center; padding: 0;
}
.datepicker-cal-btn:hover { color: var(--text); }
.datepicker-popup {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    background: var(--surface, #fff); border: 1px solid var(--line);
    border-radius: 9px; box-shadow: 0 8px 32px rgba(15,23,42,.16);
    padding: 14px; min-width: 264px;
}
.datepicker-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.datepicker-nav-btn {
    background: none; border: none; cursor: pointer; color: var(--muted);
    display: flex; align-items: center; border-radius: 6px; padding: 4px;
}
.datepicker-nav-btn:hover { background: var(--slate-100); color: var(--text); }
.datepicker-month-label { font-weight: 500; font-size: 14px; }
.datepicker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.datepicker-weekdays span { text-align: center; font-size: 11px; font-weight: 500; color: var(--muted); padding: 4px 0; }
.datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepicker-day {
    aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 6px; font-size: 13px;
    cursor: pointer; color: var(--text); padding: 0;
}
.datepicker-day:hover:not(:disabled):not(.dp-sel) { background: var(--slate-100); }
.datepicker-day.dp-today { font-weight: 700; color: var(--primary); }
.datepicker-day.dp-sel { background: var(--primary); color: #fff; font-weight: 500; }
.datepicker-day.dp-empty { visibility: hidden; pointer-events: none; }
/* Outside the allowed range (trainings planning: outside the training period). */
.datepicker-day.dp-out { color: var(--faint); opacity: .4; cursor: default; text-decoration: line-through; }

/* ---- PDF split-button dropdown ---------------------------------------- */
.pdf-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 100;
    background: var(--surface, #fff); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(15,23,42,.12);
    min-width: 140px; overflow: hidden;
}
.pdf-dropdown-item {
    display: block; padding: 9px 14px; font-size: 13px; color: var(--text);
    text-decoration: none; white-space: nowrap;
}
.pdf-dropdown-item:hover { background: var(--slate-100); }

/* ---- Orders table filter row ------------------------------------------ */
.input-sm { padding: 5px 10px; font-size: 13px; height: 32px; }
.btn-sm   { padding: 4px 10px; font-size: 13px; height: 32px; }

tr.table-filter-row th {
    background: var(--slate-50, #f8fafc);
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
}
.filter-select {
    width: 100%; padding: 4px 8px; font-size: 12px; height: 30px;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--card-bg, #fff); color: var(--text);
    font-family: inherit; cursor: pointer;
}
.filter-select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.filter-drp-btn {
    display: flex; align-items: center; gap: 5px; width: 100%;
    padding: 4px 8px; font-size: 12px; height: 30px;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--card-bg, #fff); color: var(--text);
    font-family: inherit; cursor: pointer; white-space: nowrap; overflow: hidden;
}
.filter-drp-btn:hover { border-color: var(--primary); }
.filter-daterange { position: relative; }
/* Dans la barre de filtres d'un catalogue, le sélecteur s'aligne sur .input-sm. */
.catalog-filters-row .filter-drp-btn { height: 32px; font-size: 13px; padding: 5px 10px; gap: 7px; }
/* Le calendrier ne doit pas être rogné par le tableau qui le contient
   (même échappatoire que le combobox et le champ date). */
.table-wrap:has(.filter-daterange.drp-open) { overflow: visible; }
.btn-filter-reset {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--muted); text-decoration: none;
    padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.btn-filter-reset:hover { color: var(--danger, #dc2626); background: var(--red-50, #fef2f2); }

/* ---- Multiselect dropdown (filter row) --------------------------------- */
.multisel-popup {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
    background: var(--card-bg, #fff); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
    padding: 6px 4px; display: flex; flex-direction: column; gap: 1px;
}
.multisel-option {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; border-radius: 6px; cursor: pointer;
    font-size: 12px; white-space: nowrap;
}
.multisel-option:hover { background: var(--slate-50, #f8fafc); }
.multisel-option input[type="checkbox"] { accent-color: var(--primary); cursor: pointer; }

/* ---- Date range picker popup ------------------------------------------ */
.drp-popup {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
    background: var(--card-bg, #fff); border: 1px solid var(--line);
    border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
    width: 280px; padding: 12px;
}
.drp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drp-month { font-weight: 500; font-size: 14px; }
.drp-nav { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--text); display: flex; }
.drp-nav:hover { background: var(--slate-100, #f1f5f9); }
.drp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.drp-weekdays span { text-align: center; font-size: 11px; font-weight: 500; color: var(--muted); padding: 4px 0; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.drp-day {
    aspect-ratio: 1; width: 100%; display: flex; align-items: center; justify-content: center;
    border: none; background: none; border-radius: 6px; font-size: 12px;
    cursor: pointer; color: var(--text); padding: 0;
}
.drp-day:hover:not(:disabled):not(.drp-start):not(.drp-end) { background: var(--slate-100, #f1f5f9); }
.drp-day.drp-today  { font-weight: 700; color: var(--primary); }
.drp-day.drp-range  { background: var(--blue-50, #eff6ff); border-radius: 0; }
.drp-day.drp-start,
.drp-day.drp-end    { background: var(--primary); color: #fff; font-weight: 500; border-radius: 6px; }
.drp-day.drp-empty  { visibility: hidden; pointer-events: none; }

/* ---- Order info card (show page) -------------------------------------- */
.order-info-card { display: flex; gap: 24px; align-items: flex-start; }
.order-info-main { flex: 1; min-width: 0; }
.order-status-aside { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; background: var(--slate-50, #f8fafc); border-radius: 8px; text-align: center; }
.order-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .46);
}
.order-confirm-modal {
  width: min(100%, 420px);
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .24);
}
.order-confirm-title { margin-bottom: 8px; color: var(--ink); font-size: 16px; font-weight: 700; }
.order-confirm-copy { margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.order-confirm-copy strong { color: var(--ink); }

/* Concise, centred confirm dialog (e.g. product status toggle) */
.confirm-mini {
  width: min(100%, 380px);
  padding: 26px 26px 22px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(15, 23, 42, .24);
}
.confirm-mini-icon {
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fef3c7; color: #d97706;
}
.confirm-mini-icon .icon { width: 22px; height: 22px; }
.confirm-mini-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.confirm-mini-copy { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.confirm-mini-copy strong { color: var(--ink); }
.confirm-mini-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-mini-actions .btn,
.confirm-mini-actions .confirm-dialog-ok,
.confirm-mini-actions .confirm-dialog-cancel { min-width: 116px; justify-content: center; }
/* Danger (delete) variant — red confirm + red icon, never the theme colour. */
.confirm-mini.is-danger .confirm-mini-icon { background: var(--red-50); color: var(--red-600); }

/* Red destructive button (deletes / dangerous confirms) */
.btn-danger { background: var(--red-600); color: var(--white); border: 1px solid var(--red-600); }
.btn-danger:hover { background: var(--red-500); border-color: var(--red-500); }
.btn-danger:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--red-50); }

/* Inline "dots wave" loader (small buttons — e.g. the status pill while saving) */
.product-toggle-btn.is-loading { pointer-events: none; }
.btn-dots { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.btn-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: dots-wave 1s infinite ease-in-out both;
}
.btn-dots span:nth-child(2) { animation-delay: .15s; }
.btn-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dots-wave {
  0%, 70%, 100% { transform: translateY(0); opacity: .35; }
  35%           { transform: translateY(-4px); opacity: 1; }
}
.order-tracking-card { margin: 16px 0; overflow: hidden; }
.order-tracking-scroll { overflow-x: auto; padding: 26px 22px 22px; }
.order-tracking-progress { padding: 20px 22px 0; }
.order-tracking-progress > .order-progress { height: 10px; margin-top: 8px; }
.order-status-stepper { min-width: 620px; }
.order-status-stepper .step .bullet { width: 40px; height: 40px; margin-bottom: 10px; }
.order-status-stepper .step::before { top: 19px; }
.order-status-stepper .step .bullet .icon { width: 19px; height: 19px; }
.order-status-stepper .step.done::before,
.order-status-stepper .step.current::before { background: var(--primary); }
.order-status-stepper .step.current .bullet {
  border-color: var(--blue-600);
  background: var(--blue-50);
  color: var(--blue-600);
  box-shadow: 0 0 0 4px var(--blue-50);
}
.order-status-stepper .s-title { font-size: 14px; }
.order-status-stepper .s-sub { margin-top: 3px; }

/* Failed-delivery step: orange icon (border + bg), clickable to open the issue drawer. */
.order-status-stepper .step.is-failed .bullet {
  border-color: var(--amber-500, #f59e0b);
  background: var(--amber-50, #fffbeb);
  color: var(--amber-600, #d97706);
  box-shadow: 0 0 0 4px var(--amber-50, #fffbeb);
  cursor: pointer; appearance: none; padding: 0;
}
.order-status-stepper .step.is-failed .bullet:hover { box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber-500, #f59e0b) 22%, transparent); }
.order-status-stepper .step.is-failed .s-title { color: var(--amber-700, #b45309); }
.step-failed-tag { color: var(--amber-700, #b45309); font-weight: 500; }

/* Delivery-issue right sidebar (drawer). */
.issue-drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .4); display: flex; justify-content: flex-end; }
.issue-drawer { width: min(420px, 100%); height: 100%; background: var(--surface, #fff); box-shadow: -12px 0 40px rgba(15, 23, 42, .2); padding: 22px; overflow: auto; display: flex; flex-direction: column; }
.issue-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.issue-drawer-head .card-title { display: flex; align-items: center; gap: 8px; color: var(--amber-700, #b45309); }
.issue-drawer-body { display: flex; flex-direction: column; gap: 16px; }
.issue-row .supplier-label { margin-bottom: 4px; }
.order-tracking-cancelled { display: flex; align-items: center; gap: 12px; padding: 22px; color: var(--red-600); background: var(--red-50); }
.order-tracking-cancelled > .icon { flex: 0 0 auto; width: 26px; height: 26px; }

/* Compact, header-less tracking stepper (supplier order detail, top of page) */
.sup-track-card { margin: 0 0 16px; padding: 12px 16px 6px; overflow: hidden; }
.sup-track-top { font-size: 12px; margin-bottom: 5px; }
.sup-track-bar { height: 6px; }
.sup-track-scroll { overflow-x: auto; padding: 14px 4px 6px; }
.stepper--compact { min-width: 480px; }
.stepper--compact .step .bullet { width: 28px; height: 28px; margin-bottom: 5px; }
.stepper--compact .step::before { top: 13px; }
.stepper--compact .step .bullet .icon { width: 14px; height: 14px; }
.stepper--compact .step.done::before,
.stepper--compact .step.current::before { background: var(--primary); }
.stepper--compact .step.current .bullet { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-600); box-shadow: 0 0 0 4px var(--blue-50); }
.stepper--compact .s-title { font-size: 12px; }
.stepper--compact .s-sub { font-size: 11px; margin-top: 1px; }
.order-tracking-cancelled strong,
.order-tracking-cancelled span { display: block; }
.order-tracking-cancelled span { margin-top: 2px; color: var(--slate-600); font-size: 13px; }

/* User administration */
.user-list-card { overflow: hidden; }
.user-status-button { border: 0; cursor: pointer; }
.user-empty { padding: 36px 20px !important; text-align: center; color: var(--muted) !important; }
.user-form-card { max-width: 900px; }
.user-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.user-form-grid .field-wide { grid-column: 1 / -1; }
.user-active-field { align-self: end; padding-bottom: 9px; }
.field-hint { margin-top: 5px; color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  .user-form-grid { grid-template-columns: 1fr; }
  .user-active-field { padding-bottom: 0; }
}

/* Authentication — split card: fluid gradient panel + flip login/register.  */
.auth-body {
  height: 100vh;
  overflow: hidden;
  background: #eef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

/* The one white frame holding both halves — never taller than the viewport. */
.auth-frame {
  display: flex;
  gap: 8px;
  width: min(1060px, 100%);
  max-height: calc(100vh - 56px);
  min-height: min(560px, calc(100vh - 56px));
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .25), 0 2px 10px rgba(15, 23, 42, .05);
}

/* Left: fluid gradient brand panel. */
.auth-panel {
  flex: 1 1 50%;
  min-height: 0;
  border-radius: 12px;
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  color: #fff;
  user-select: none;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(90% 70% at 88% 14%, var(--auth-glow-a), transparent 62%),
    radial-gradient(85% 85% at 8% 90%, var(--auth-glow-b), transparent 66%),
    radial-gradient(60% 55% at 72% 78%, var(--auth-glow-c), transparent 60%),
    linear-gradient(160deg, var(--auth-grad-a), var(--auth-grad-b) 55%, var(--auth-grad-c));
}
.auth-panel::after {
  /* soft moving sheen for the "fluid" feel */
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(45% 38% at 50% 50%, rgba(255, 255, 255, .14), transparent 70%);
  animation: auth-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes auth-drift {
  from { transform: translate(-6%, -4%) rotate(-4deg); }
  to   { transform: translate(8%, 6%) rotate(5deg); }
}
.auth-panel-eyebrow { font-size: 13px; opacity: .85; margin-bottom: 12px; }
.auth-panel-title {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.22;
  font-weight: 650;
  letter-spacing: -.015em;
  max-width: 380px;
}
.auth-panel-foot { margin-top: auto; position: relative; z-index: 1; }
.auth-panel-foot-label { display: block; font-size: 12px; opacity: .65; margin-bottom: 12px; }
.auth-panel-icons { display: flex; align-items: center; gap: 22px; opacity: .85; }
.auth-panel-icons .icon { width: 22px; height: 22px; }
.auth-panel-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 12px;
  margin-bottom: 46px; opacity: .95; position: relative; z-index: 1;
}
.auth-panel-brand .brand-mark { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
/* Logo institutionnel complet sur le panneau sombre (variante à fond transparent). */
.auth-panel-logo { display: block; width: 100%; max-width: 250px; height: auto; }

/* Right: the form half, a 3D flip between login (front) and register (back). */
.auth-side {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 34px;
  perspective: 1800px;
  overflow-y: auto;
}
.auth-side > div { max-height: 100%; margin: auto 0; }
.auth-flip {
  display: grid;
  width: min(100%, 400px);
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.4, .1, .2, 1);
}
.auth-flip.flipped { transform: rotateY(180deg); }
.auth-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; align-self: center; }
.auth-face-back { transform: rotateY(180deg); }
.auth-face.is-away { pointer-events: none; }

.auth-heading { margin-bottom: 16px; }
.auth-heading h1 { margin: 0 0 6px; color: var(--ink); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.auth-heading p { margin: 0; color: var(--muted); font-size: 13.5px; }
.auth-form { display: grid; gap: 11px; }
.auth-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .auth-form-row { grid-template-columns: 1fr; } }
.auth-form .field { display: grid; gap: 6px; }
.auth-form .label { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.auth-form .input {
  height: 42px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-form .input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
}
.auth-link { color: var(--auth-accent); font-weight: 500; font-size: 12.5px; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--slate-600); }
.auth-check input { width: 15px; height: 15px; accent-color: var(--auth-accent); }
.auth-forgot-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.auth-submit {
  width: 100%;
  height: 44px;
  justify-content: center;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  background: var(--auth-accent);
  box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .65);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.auth-submit:hover { background: var(--auth-accent-strong); box-shadow: 0 14px 26px -10px var(--auth-shadow); }
.auth-submit:active { transform: translateY(1px); }
.auth-swap { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--slate-600); }
.auth-alert,
.auth-success { margin-bottom: 16px; padding: 11px 13px; border-radius: 8px; font-size: 13px; }
.auth-alert { border: 1px solid var(--red-400); background: var(--red-50); color: var(--red-600); }
.auth-success { border: 1px solid var(--emerald-200); background: var(--primary-soft); color: var(--primary-strong); }

/* Collapse to the form alone on narrow screens. */
@media (max-width: 900px) {
  .auth-panel { display: none; }
  .auth-frame { padding: 10px; }
  .auth-side { padding: 24px 16px; }

  /*
   | Sur mobile la page de connexion doit pouvoir DÉFILER : `height:100vh` +
   | `overflow:hidden` piégeait le formulaire sous le clavier virtuel, et 100vh
   | ignore la barre d'adresse d'iOS (d'où 100dvh).
   */
  .auth-body { height: auto; min-height: 100dvh; overflow: auto; padding: 16px; }
  .auth-input, .auth-form .input { font-size: 16px; }   /* pas de zoom iOS */
  .auth-submit { min-height: 46px; }
}

/* ============================================================================
 | Field UI — minimal mobile/tablet shell for preparator & driver roles.
 | No sidebar; a slim sticky top bar + full-width main. Touch-first sizing.
 ========================================================================== */
.m-body { background: var(--bg); }
.m-shell { min-height: 100vh; display: flex; flex-direction: column; }
.m-topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; min-height: 56px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding-top: max(10px, env(safe-area-inset-top));
}
.m-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto; margin-left: -6px;
    border-radius: 8px; color: var(--ink);
}
.m-back:active { background: var(--slate-100); }
.m-topbar-title { flex: 1 1 auto; min-width: 0; }
.m-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sub { font-size: 12px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-menu { position: relative; flex: 0 0 auto; }
.m-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--ink); }
.m-menu-btn:active { background: var(--slate-100); }
.m-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; }
.m-menu-user { padding: 8px 12px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.m-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 8px; font-size: 15px; color: var(--ink); background: none; text-align: left; }
.m-menu-item:active { background: var(--slate-100); }
.m-main { flex: 1 1 auto; padding: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); max-width: 720px; width: 100%; margin: 0 auto; }

/* Tabs (field board) */
.m-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.m-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; font-weight: 500; font-size: 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; }
.m-tab.active { color: var(--primary-strong); border-color: var(--primary); background: var(--primary-soft); }
.m-tab .count { font-size: 12px; background: rgba(100,116,139,.16); border-radius: 999px; padding: 1px 8px; }
.m-tab.active .count { background: rgba(16,185,129,.20); color: var(--primary-strong); }

/* Order cards (preparator board) */
.pcard-list { display: flex; flex-direction: column; gap: 8px; }
.pcard { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; color: inherit; }
.pcard:active { background: var(--slate-100); }
.pcard.tmr-warn   { border-left: 4px solid #f59e0b; }
.pcard.tmr-danger { border-left: 4px solid #ef4444; }
.pcard.tmr-ok     { border-left: 4px solid #10b981; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-ref { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: 15px; color: var(--ink); }
.pcard-cust { color: var(--ink); font-size: 14px; margin-top: 2px; }
.pcard-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; color: var(--muted); font-size: 13px; }
.pcard-timer { font-variant-numeric: tabular-nums; font-weight: 700; }
.pcard-timer.tmr-warn { color: #b45309; }
.pcard-timer.tmr-danger { color: #dc2626; }
.pcard-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--primary-strong); }
.m-empty { text-align: center; color: var(--muted); padding: 40px 16px; }

/* Pick view — sticky scan + counters */
.pick-head { position: sticky; top: 56px; z-index: 20; background: var(--bg); padding: 10px 0 12px; margin: -4px 0 6px; }
.pick-counts { display: flex; gap: 10px; margin-bottom: 10px; }
.pick-count { flex: 1 1 0; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; text-align: center; }
.pick-count-val { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pick-count-val.is-complete { color: var(--primary-strong); }
.pick-count-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 2px; }
.scan-bar { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--line); border-radius: 9px; padding: 4px 6px 4px 12px; }
.scan-bar.is-ok { border-color: var(--primary); }
.scan-bar.is-err { border-color: var(--red-400, #f87171); }
.scan-bar > svg { color: var(--faint); flex: 0 0 auto; }
.scan-bar input { flex: 1 1 auto; border: 0; outline: 0; background: none; font-size: 16px; padding: 10px 0; min-width: 0; }
.scan-msg { font-size: 12px; min-height: 16px; margin-top: 6px; }
.scan-msg.is-ok  { color: var(--success); }
.scan-msg.is-err { color: var(--red-600, #dc2626); }

/* Pick rows (mobile cards) */
.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; }
/* Completed line: de-emphasised, light grey, and sunk to the bottom (flex order). */
.pick-row.is-picked { background: var(--slate-100); border-color: var(--line); }
.pick-row.is-picked .pick-name { color: var(--muted); font-weight: 500; }
.pick-row.is-picked .pick-qtyin { color: var(--muted); }
.pick-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.pick-row.is-picked .pick-check { background: var(--primary); border-color: var(--primary); }
.pick-check svg { width: 16px; height: 16px; opacity: 0; }
.pick-row.is-picked .pick-check svg { opacity: 1; }
.pick-body { flex: 1 1 auto; min-width: 0; }
.pick-name { font-weight: 500; color: var(--ink); }
.pick-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pick-locs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pick-qty { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); font-size: 15px; }
.pick-actions { position: sticky; bottom: 0; padding: 12px 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.pick-actions .btn { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }

/* Pick — quantity controls (scan batch qty + per-line scanned count) */
.scan-qty { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; border-left: 1px solid var(--line); padding-left: 8px; margin-right: 4px; }
.scan-qty input { width: 46px; border: 0; outline: 0; background: none; font-size: 16px; font-weight: 700; text-align: center; padding: 8px 0; }
.pick-row .pick-check { background: none; cursor: pointer; }
/* Partially-scanned line: stronger amber border so it stands out. */
.pick-row.is-partial { border-color: #f59e0b; border-width: 2px; box-shadow: inset 0 0 0 1px #f59e0b; }
.pick-qtybox { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 4px; }
.pick-qtyin { min-width: 22px; text-align: right; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.pick-row.is-partial .pick-qtyin { color: #b45309; }
.pick-qtyord { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.pick-qtyedit { width: 56px; text-align: center; font-size: 16px; font-weight: 700; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pick-qtyedit:focus { border-color: var(--primary); outline: 0; }

/* Pick — scan qty as a native select (renders as the iOS wheel picker) */
.scan-qty-sel { border: 0; background: none; font-size: 16px; font-weight: 700; padding: 8px 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.scan-qty-sel:focus { outline: 0; }
/* Pick row body — each piece on its own line */
.pick-body { display: flex; flex-direction: column; align-items: flex-start; }
.pick-name, .pick-sub { display: block; }

/* Receiving — single big slip-upload button (label wraps a hidden file input). */
.slip-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border: 2px dashed var(--line); border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--ink); background: var(--surface); cursor: pointer; }
.slip-btn:active { background: var(--slate-100); }
.slip-btn svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--slate-400); }
.slip-btn.is-attached { border-style: solid; border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.slip-btn.is-attached svg { color: var(--primary-strong); }

/* Receiving — scan/search results dropdown (add a line by EAN or name). */
.scan-wrap { position: relative; }
.scan-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; max-height: 280px; overflow: auto; }
.scan-result { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; background: none; }
.scan-result:active, .scan-result:hover { background: var(--slate-100); }
.scan-result-name { display: block; font-weight: 500; color: var(--ink); }
.scan-result-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Receiving — putaway as mobile cards (no overflowing table). */
/* Compact combobox used inside table filter rows. */
.catalog-combobox-sm { width: 100%; }
.catalog-combobox-sm .catalog-combobox-control { padding: 2px 8px; min-width: 0; }
.catalog-combobox-sm .catalog-combobox-control input { height: 30px; font-size: 13px; min-width: 0; }
.cell-filter { display: flex; gap: 6px; align-items: center; }
.cell-filter .filter-select { min-width: 0; }

/* Permission matrix — expandable module list (module + active toggle → inner elements) */
.perm-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.perm-mod { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.perm-mod.is-on { border-color: var(--primary); box-shadow: 0 1px 0 var(--primary-soft); }
.perm-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.perm-mod.is-on .perm-mod-head { background: var(--primary-soft); }
.perm-mod-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ink); }
.perm-mod-caret { border: 0; background: transparent; padding: 0; color: var(--primary-strong); display: inline-flex; cursor: default; }
.perm-mod-count { font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); }
.perm-mod-switch { margin: 0; flex: 0 0 auto; }
.perm-mod-body { padding: 14px 16px; border-top: 1px solid var(--line); }
.perm-group + .perm-group { margin-top: 14px; }
.perm-group-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.perm-elements { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-element { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; transition: background .12s, border-color .12s; }
.perm-element:hover { border-color: var(--primary); }
.perm-element input { position: absolute; opacity: 0; pointer-events: none; }
.perm-element-box { width: 18px; height: 18px; border: 1.5px solid var(--slate-300); border-radius: 6px; display: grid; place-items: center; background: transparent; color: #fff; transition: background .12s, border-color .12s; }
.perm-element-box svg { width: 12px; height: 12px; opacity: 0; }
.perm-element input:checked + .perm-element-box { background: var(--primary); border-color: var(--primary); }
.perm-element input:checked + .perm-element-box svg { opacity: 1; }
.perm-element input:checked ~ .perm-element-label { color: var(--primary-strong); }
.perm-element input:focus-visible + .perm-element-box { box-shadow: var(--ring-primary); }
.perm-element-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--slate-600); }
.perm-element-label svg { width: 14px; height: 14px; color: var(--muted); }
.perm-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------------------------------- Trainings ---------------------------------- */
.training-thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.training-thumb { position: relative; width: 150px; }
.training-thumb img {
  width: 100%; height: 104px; object-fit: fill;
  border-radius: 8px; border: 1px solid var(--line); display: block; background: var(--slate-100);
}
.training-thumb form { position: absolute; top: 6px; right: 6px; }
.training-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.training-card { overflow: hidden; display: flex; flex-direction: column; }
.training-card-cover {
  width: 100%;
  height: 235px;
  object-fit: fill;
  display: block;
  background: var(--slate-100);
  margin-bottom: 20px;
}
.training-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.training-card-body > .row:last-child { margin-top: auto; }

/* ------------------------- Trainings form v2 (uploads, planning, formateurs) */
.dock-backdrop[hidden], .dock-panel[hidden] { display: none; }

.training-form-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .training-form-layout { grid-template-columns: 1fr; } }
.training-form-main { display: grid; gap: 18px; }

/* Affiche (poster) dropzone */
.upload-affiche {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; cursor: pointer;
  border: 2px dashed var(--slate-300); background: var(--slate-50); overflow: hidden;
  display: grid; place-items: center; transition: border-color .15s ease, background .15s ease;
}
.upload-affiche:hover, .upload-affiche.is-drag { border-color: var(--primary); background: var(--primary-soft); }
.upload-affiche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-affiche-empty { display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 13px; padding: 18px; text-align: center; }
.upload-affiche-empty .icon { width: 30px; height: 30px; color: var(--slate-400); }
.upload-hint { font-size: 11.5px; color: var(--faint); }
.upload-affiche-overlay {
  position: absolute; inset: auto 0 0 0; padding: 8px; display: none; align-items: center; justify-content: center; gap: 6px;
  background: rgba(15, 23, 42, .55); color: #fff; font-size: 12.5px; font-weight: 500;
}
.upload-affiche.has-image:hover .upload-affiche-overlay { display: flex; }

/* Attachments dropzone + file rows */
.upload-drop {
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  border: 2px dashed var(--slate-300); border-radius: 9px; padding: 22px; color: var(--muted); font-size: 13.5px;
  background: var(--slate-50); transition: border-color .15s ease, background .15s ease;
}
.upload-drop:hover, .upload-drop.is-drag { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.upload-files { display: grid; gap: 8px; margin-top: 10px; }
.upload-files:empty { display: none; }
.upload-file {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.upload-file-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.upload-file-ico { width: 40px; height: 40px; border-radius: 8px; background: var(--slate-100); display: grid; place-items: center; color: var(--slate-500); flex: 0 0 auto; font-size: 17px; }
.upload-file-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.upload-file-meta > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-meta .muted { font-size: 11.5px; }
.upload-file-remove {
  margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.upload-file-remove:hover { background: var(--red-50); color: var(--red-600); }

/* Planning (per-day slots) */
.plan-empty { display: grid; justify-items: center; gap: 8px; padding: 22px; text-align: center; }
.plan-day { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; }
.plan-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.plan-day-head .plan-date { width: 172px; }
.plan-day-head .plan-date .datepicker-input { height: 32px; font-size: 13px; }
.plan-day-head .muted { text-transform: capitalize; }
.plan-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-slot { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 4px 6px; background: var(--slate-50); }
.plan-slot input[type="time"] { width: 96px; }
.plan-slot-remove { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.plan-slot-remove:hover { background: var(--red-50); color: var(--red-600); }

/* Formateurs side dock */
.formateurs-dock .formateur-add { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.formateur-list { display: grid; gap: 8px; }
.formateur-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px;
}
.formateur-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13.5px; }
.formateur-row-main .muted { font-size: 12px; }
.formateur-row .pill { margin-left: auto; }

/* ------------------------------------ Timeline ------------------------------------ */
.timeline-month { margin-bottom: 26px; }
.timeline-month-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; padding-left: 2px;
}
.timeline-items { display: grid; gap: 8px; }
.timeline-item {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: 12px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.timeline-item:hover { border-color: var(--primary); box-shadow: var(--shadow-card); }
/* `display:flex` l'emporte sur le [hidden] du navigateur : sans ça le filtre de
   type ne masquait rien du tout. Idem pour un mois entièrement filtré. */
.timeline-item[hidden], .timeline-month[hidden] { display: none; }
.timeline-ico {
  width: 38px; height: 38px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--slate-100); color: var(--slate-600);
}
/* Miniature de l'affiche, aux mêmes dimensions que .timeline-ico qu'elle remplace. */
.timeline-thumb {
  width: 38px; height: 38px; border-radius: 8px; flex: 0 0 auto;
  object-fit: cover; display: block; background: var(--slate-100);
  border: 1px solid var(--line);
}
.timeline-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; color: var(--text); }
.timeline-body .muted { font-size: 12.5px; }
.timeline-item .pill { margin-left: auto; flex: 0 0 auto; }

/* Maintenance — seed console (admin only).                                    */
.seed-intro { display: flex; align-items: flex-start; gap: 14px; }
.seed-intro .stat-ico { flex: 0 0 auto; }
.seed-intro .muted { font-size: 13px; margin-top: 2px; }
.seed-card-head { display: flex; align-items: flex-start; gap: 14px; }
.seed-card-head .stat-ico { flex: 0 0 auto; }
.seed-card-title strong { display: block; font-size: 15px; color: var(--ink); }
.seed-card-title .muted { font-size: 13px; margin-top: 3px; }
.seed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0 52px; }
.seed-card .field-hint { margin-left: 52px; }
@media (max-width: 720px) {
  .seed-meta, .seed-card .field-hint { margin-left: 0; }
}
.seed-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 0 52px; padding: 9px 12px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary); font-size: 13px;
}
.seed-result-error { background: var(--red-50, #fef2f2); color: var(--red-600, #dc2626); }
@media (max-width: 720px) { .seed-result { margin-left: 0; } }

/* Data-table row thumbnail (events list) — real affiche or icon placeholder.  */
.th-thumb { width: 56px; }
.td-thumb { width: 56px; padding-right: 0; }
.row-thumb {
  display: block; width: 44px; height: 44px; border-radius: 8px;
  object-fit: cover; background: var(--slate-100); border: 1px solid var(--line);
}
.row-thumb-empty {
  display: grid; place-items: center; color: var(--faint);
  background: var(--slate-50);
}

/* Timeline — client-side type filter chips.                                   */
.timeline-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.timeline-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer;
}
.timeline-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.timeline-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.timeline-chip.is-on .muted { color: rgba(255, 255, 255, .75); }
.timeline-chip:disabled { opacity: .45; cursor: default; }
.timeline-chip .muted { font-size: 12px; }

/* A form value that cannot be changed (e.g. the pack's activity).             */
.input-locked {
  display: flex; align-items: center; gap: 8px;
  background: var(--slate-50); color: var(--muted); cursor: default;
}

/* Travels — Admin ↔ Agence discussion thread on a pack.                       */
.travel-thread { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.travel-msg { padding: 10px 12px; border-radius: 8px; background: var(--slate-50); border: 1px solid var(--line); }
.travel-msg.is-agency { background: var(--primary-soft); border-color: transparent; }
.travel-msg.is-decision { background: var(--red-50); border-color: transparent; }
.travel-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.travel-msg p { margin: 0; white-space: pre-line; font-size: 13.5px; color: var(--text); }

/* Cotisations — règlements listés sous leur cotisation (écran architecte).    */
.cot-payment-row td { background: var(--slate-50); font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.cot-payment-row .pill { margin-left: 6px; }
.inline-form { display: inline-block; }
.travel-responses { display: inline-flex; gap: 4px; cursor: help; }

/* Champ fichier stylé — remplace le « Choose file / No file chosen » natif.   */
.file-field {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px 7px 8px; border: 1px dashed var(--line);
  border-radius: 8px; background: var(--surface); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.file-field:hover, .file-field.is-drop { border-color: var(--primary); background: var(--primary-soft); }
.file-field.has-file { border-style: solid; }
.file-field-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 12px; border-radius: 8px; background: var(--slate-100);
  color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.file-field:hover .file-field-btn { background: var(--surface); }
.file-field-name {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-field.has-file .file-field-name { color: var(--ink); }
.file-field-clear {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: 6px; line-height: 0;
}
.file-field-clear:hover { color: var(--red-600); background: var(--red-50); }

/* ==========================================================================
   Messagerie architecte ↔ administration — bulles façon WhatsApp.
   ========================================================================== */

/* Boîte de réception (Conseil) */
.chat-inbox { display: flex; flex-direction: column; }
.chat-inbox-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none;
}
.chat-inbox-item:first-child { border-top: 0; }
.chat-inbox-item:hover { background: var(--hover); }
.chat-inbox-item.is-unread { background: var(--primary-soft); }
.chat-inbox-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-inbox-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.chat-inbox-top .muted { font-size: 12px; white-space: nowrap; }
.chat-inbox-preview {
  display: flex; align-items: center; gap: 5px; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-badge {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}

/* Le fil */
.chat { display: flex; flex-direction: column; overflow: hidden; }
.chat-scroll {
  height: min(60vh, 560px); overflow-y: auto; padding: 18px 16px;
  background: var(--slate-50);
  /* trame discrète, clin d'œil au papier millimétré du reste de l'app */
  background-image:
    linear-gradient(var(--slate-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-100) 1px, transparent 1px);
  background-size: 28px 28px;
}
.chat-messages { display: flex; flex-direction: column; gap: 8px; }

.chat-day { text-align: center; margin: 10px 0 4px; }
.chat-day span {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
}

.chat-row { display: flex; }
.chat-row.is-mine { justify-content: flex-end; }
.chat-bubble {
  max-width: min(78%, 520px); padding: 8px 12px 6px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
  display: flex; flex-direction: column; gap: 4px;
}
.chat-row.is-mine .chat-bubble {
  background: var(--primary-soft); border-color: transparent;
}
.chat-row.is-theirs .chat-bubble { border-top-left-radius: 4px; }
.chat-row.is-mine .chat-bubble { border-top-right-radius: 4px; }

.chat-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.chat-meta { align-self: flex-end; font-size: 11px; color: var(--muted); }

.chat-image { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; }
.chat-audio { width: 260px; max-width: 100%; height: 38px; }
.chat-file {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 8px; background: var(--slate-50); border: 1px solid var(--line);
  color: inherit; text-decoration: none; max-width: 100%;
}
.chat-file:hover { border-color: var(--primary); }
.chat-file-icon { color: var(--muted); line-height: 0; flex: 0 0 auto; }
.chat-file-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-meta { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }

.chat-empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.chat-empty.hidden { display: none; }

/* Composeur */
.chat-composer { border-top: 1px solid var(--line); background: var(--surface); padding: 10px 12px; }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-input {
  flex: 1 1 auto; resize: none; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; font: inherit; font-size: 14px; line-height: 1.4;
  max-height: 140px; background: var(--slate-50); color: var(--text);
}
.chat-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.chat-icon-btn {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.chat-icon-btn:hover { background: var(--hover); color: var(--primary); }
.chat-send {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.chat-send:hover { background: var(--primary-strong); }

.chat-attachment {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 7px 10px; border-radius: 8px; background: var(--slate-50); border: 1px solid var(--line);
}
.chat-attachment-icon { color: var(--muted); line-height: 0; }
.chat-attachment-name { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-clear { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; line-height: 0; }
.chat-attachment-clear:hover { color: var(--red-600); }

.chat-recording { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.chat-attachment[hidden],
.chat-recording[hidden],
.chat-composer-row[hidden] { display: none; }
.chat-recording .btn { margin-left: auto; }
.chat-recording .btn + .btn { margin-left: 0; }
.chat-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red-500); animation: chat-pulse 1.2s infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .chat-rec-dot { animation: none; } }

@media (max-width: 720px) {
  .chat-bubble { max-width: 88%; }
  .chat-scroll { height: 58vh; }
}

/* Catalogue — barre de filtres + pastille « pack » sur la couverture.         */
.catalog-filters { margin-bottom: 18px; }
/*
 | Barre de filtres du catalogue — DEUX lignes assumées : les champs se
 | répartissent sur la première, les boutons prennent la seconde, alignés à
 | droite. Tout sur une ligne tassait « Filtrer » contre le dernier champ et
 | désalignait la grille de cartes en dessous.
 */
.catalog-filters-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
/* Les champs date de la barre s'alignent sur les autres filtres (.input-sm). */
.catalog-filters-row .datepicker-input { height: 32px; padding: 5px 32px 5px 10px; font-size: 13px; }
.catalog-filters-actions {
  display: flex; gap: 8px; align-items: center; justify-content: flex-end;
  grid-column: 1 / -1;                 /* sa propre ligne, pleine largeur */
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
/* Le bouton de repli n'existe que sur téléphone (cf. bloc mobile plus bas). */
.catalog-filters-toggle { display: none; }
.catalog-cover { position: relative; }
.catalog-pack-flag { position: absolute; left: 10px; bottom: 10px; }
.catalog-pack-flag .pill { text-decoration: none; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }

/* ==========================================================================
   CATALOGUE MOBILE — la carte devient une AFFICHE.
   Sur téléphone, une vignette de 150 px surmontée de trois lignes grises n'a
   aucune présence : chaque activité prend toute la largeur, l'image passe en
   fond plein cadre et le texte s'écrit dessus, sur un voile anthracite (la
   couleur d'encre de la charte, jamais du noir pur). C'est la même grammaire
   que les visuels de la charte : photo pleine page, titre posé dessus.
   Aucun changement de markup — le même HTML sert les deux mises en page.
   ========================================================================== */
@media (max-width: 900px) {
  /* La barre de filtres se replie : le premier écran doit montrer des cartes. */
  .catalog-filters { margin-bottom: 14px; padding: 10px 12px; }
  .catalog-filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 6px 2px; background: none; border: 0;
    font: inherit; font-weight: 500; color: var(--ink); cursor: pointer;
  }
  .catalog-filters-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
  .catalog-filters-toggle[aria-expanded="true"] > .icon:last-child { transform: rotate(180deg); }
  .catalog-filters-toggle > .icon:last-child { transition: transform .18s ease; color: var(--muted); }
  .catalog-filters-row { display: none; }
  .catalog-filters-row.is-open { display: grid; padding-top: 12px; }

  .training-grid { gap: 18px; }

  /*
   | La carte est une AFFICHE : photo plein cadre, coins très adoucis, et le
   | contenu vit dans un PANNEAU DE VERRE posé dans l'image (le geste des
   | maquettes de référence — docs/screenshots/mobile-packs.jpg) plutôt qu'un
   | simple dégradé. La photo reste presque entière ; le texte flotte dessus.
   */
  .training-card {
    position: relative;
    min-height: 330px;
    border-radius: 18px;
    border: 0;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
      0 24px 48px -20px rgba(34, 34, 34, .45),
      0 6px 16px -8px rgba(34, 34, 34, .25);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
  }
  .training-card:active { transform: scale(.977); }

  .training-card > .catalog-cover { position: absolute; inset: 0; z-index: 0; }
  .training-card > .catalog-cover > a,
  .training-card > .catalog-cover > a > .training-card-cover { display: block; width: 100%; height: 100%; }
  .training-card > .catalog-cover > a > .training-card-cover {
    object-fit: fill; object-position: center;
    transition: transform .5s ease;
  }
  .training-card:active .training-card-cover { transform: scale(1.03); }

  /*
   | Le voile est discret : un vignettage haut (lisibilité du drapeau pack) et
   | un ancrage sombre derrière le panneau — la photo garde sa lumière, c'est
   | le verre qui porte le texte.
   */
  .training-card > .catalog-cover::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(34, 34, 34, .18) 0%, rgba(34, 34, 34, 0) 26%),
      linear-gradient(180deg, rgba(34, 34, 34, 0) 46%, rgba(34, 34, 34, .38) 78%, rgba(34, 34, 34, .66) 100%);
  }

  /* Le corps devient un panneau de verre dépoli, détaché des bords. */
  .training-card > .training-card-body {
    position: relative;
    z-index: 1;
    margin: auto 10px 10px;
    padding: 16px 16px 14px;
    gap: 7px;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(160deg, rgba(64, 58, 53, .58), rgba(34, 34, 34, .46));
    border: 1px solid rgba(255, 255, 255, .16);
    border-top-color: rgba(255, 255, 255, .28);   /* le fil de lumière du verre */
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 14px 30px -18px rgba(34, 34, 34, .8);
  }
  /* Sans backdrop-filter (vieux WebView), le panneau s'opacifie tout seul. */
  @supports not (backdrop-filter: blur(1px)) {
    .training-card > .training-card-body {
      background: linear-gradient(160deg, rgba(52, 47, 43, .93), rgba(34, 34, 34, .9));
    }
  }

  .training-card > .training-card-body > .link {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.02em;
  }
  .training-card > .training-card-body .muted,
  .training-card > .training-card-body .mono { color: rgba(255, 255, 255, .82); font-size: 13.5px; }
  .training-card > .training-card-body .muted .icon { opacity: .8; }

  /* Le drapeau « pack » de l'agence remonte : le bas appartient au panneau. */
  .catalog-pack-flag { left: 14px; bottom: auto; top: 14px; }

  /*
   | Les gestes dans le verre : tout passe en pilule pleine largeur. Le bouton
   | plein garde sa couleur de sens (vert = j'entre dans l'activité) ; le
   | secondaire est un verre plus clair dans le verre.
   */
  .catalog-card-gestures { gap: 8px; margin-top: 4px; }
  .catalog-card-gestures > form > .btn {
    min-height: 42px;
    border-radius: 999px;
    font-size: 14px;
  }
  .catalog-card-gestures > form > .btn-outline {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
  }
  .catalog-card-gestures > form > .btn-in { box-shadow: 0 10px 22px -10px rgba(5, 195, 136, .7); }
  .catalog-card-gestures > form > .pill { min-height: 34px; border-radius: 999px; }
  .training-card .pill { box-shadow: 0 2px 10px rgba(34, 34, 34, .28); }

  /* Arrivée en cascade : la liste se déroule, elle n'apparaît pas d'un bloc. */
  .training-grid > .training-card { animation: catalog-card-rise .42s cubic-bezier(.22, .61, .36, 1) both; }
  .training-grid > .training-card:nth-child(1) { animation-delay: .02s; }
  .training-grid > .training-card:nth-child(2) { animation-delay: .07s; }
  .training-grid > .training-card:nth-child(3) { animation-delay: .12s; }
  .training-grid > .training-card:nth-child(4) { animation-delay: .17s; }
  .training-grid > .training-card:nth-child(n+5) { animation-delay: .2s; }
}

@keyframes catalog-card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .training-grid > .training-card { animation: none; }
  .training-card { transition: none; }
}

/* ==========================================================================
   MOBILE — le menu latéral est un tiroir, pas un rail d'icônes.
   Tout ce qui suit ne s'applique qu'aux petits écrans ; le bureau est inchangé.
   ========================================================================== */

/* Hamburger + bouton de fermeture : invisibles sur grand écran. */
.nav-toggle, .nav-close, .nav-backdrop { display: none; }

@media (max-width: 900px) {
  /* ---- le tiroir ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 95;
    width: min(290px, 86vw); flex-basis: auto; height: 100dvh;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 14px 0 44px rgba(15, 23, 42, .18);
  }
  .sidebar.is-open { transform: translateX(0); }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 94;
    background: rgba(15, 23, 42, .45);
  }
  .nav-backdrop[hidden] { display: none; }

  .nav-close {
    display: grid; place-items: center; margin-left: auto;
    width: 40px; height: 40px; border: 0; border-radius: 8px;
    background: none; color: var(--muted); cursor: pointer;
  }
  .nav-close:hover { background: var(--hover); }

  .nav-toggle {
    display: grid; place-items: center; position: relative;
    width: 42px; height: 42px; margin-left: -8px; flex: 0 0 auto;
    border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
  }
  .nav-toggle:hover { background: var(--hover); }
  .nav-toggle-dot {
    position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--primary); border: 2px solid var(--surface);
  }

  /* Cibles tactiles confortables dans le tiroir. */
  .nav-item { min-height: 46px; font-size: 15px; }
  .nav-group-label { font-size: 11px; }

  /* ---- le contenu occupe toute la largeur ---- */
  .app { display: block; }
  .content { min-height: 100dvh; }
  .topbar { gap: 10px; padding: 0 14px; height: 58px; }
  .topbar h1 {
    font-size: 16px; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .spacer { display: none; }
  .userchip .nav-label { display: none; }
  .main { padding: 16px 14px 28px; }

  /* ---- les structures denses passent en colonne ---- */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head .row { flex-wrap: wrap; }
  .grid-2, .training-form-layout, .user-form-grid { grid-template-columns: 1fr; }
  .training-grid { grid-template-columns: 1fr; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .catalog-filters-row { grid-template-columns: 1fr; }
  .catalog-filters-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Les docks deviennent des feuilles pleine largeur. */
  .dock-panel { width: 100vw; max-width: none; }

  /* Un tableau reste un tableau : il défile, il ne se casse pas. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table th, .table td { white-space: nowrap; }

  /* iOS zoome sur un champ dont la police est < 16px : on l'évite. */
  .input, .filter-select, textarea, select, .chat-input { font-size: 16px; }

  /* Boutons : pleine largeur quand ils sont seuls sur leur ligne. */
  .page-head .btn { min-height: 42px; }
  .row.justify-end .btn { min-height: 42px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .page-head h2 { font-size: 19px; }
  .card-pad { padding: 16px; }
  .card-head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  /* Une pile de boutons d'action tient mieux en pleine largeur qu'en ligne. */
  .page-head .row.gap-2 > .btn,
  .page-head .row.gap-2 > form > .btn { flex: 1 1 140px; justify-content: center; }
  .chat-scroll { height: 62dvh; }
  .chat-bubble { max-width: 90%; }
  .timeline-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .timeline-chip { flex: 0 0 auto; }
}

/* Statut éditable en ligne (assets/js/statusedit.js).                         */
.status-edit { cursor: pointer; border: 1px dashed transparent; }
.status-edit:hover { border-color: currentColor; }
.status-edit.is-busy { cursor: default; opacity: .75; }
.status-edit-select { min-width: 150px; }

/* Le loader trois points, pendant l'enregistrement. */
.status-dots { display: inline-flex; align-items: center; gap: 3px; height: 12px; }
.status-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  animation: status-dot 1s infinite ease-in-out;
}
.status-dots i:nth-child(2) { animation-delay: .15s; }
.status-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes status-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .status-dots i { animation: none; opacity: .6; } }

/* Message supprimé + action de suppression sur ses propres bulles.            */
.chat-bubble.is-deleted { background: var(--slate-50); border-style: dashed; }
.chat-deleted { display: flex; align-items: center; gap: 6px; color: var(--muted); font-style: italic; }
.chat-delete {
  border: 0; background: none; padding: 0 0 0 6px; line-height: 0;
  color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s;
}
.chat-bubble:hover .chat-delete, .chat-delete:focus-visible { opacity: 1; }
.chat-delete:hover { color: var(--red-600); }
.chat-send.is-busy, .chat-send:disabled { opacity: .55; cursor: default; }
/* Le survol ne suffit pas au doigt : l'action reste visible sur écran tactile. */
@media (hover: none) { .chat-delete { opacity: .55; } }


/* ------------------------------------------------------------------ cloche */
/* La cloche de la topbar : bouton + pastille + panneau déroulant. */
.bell { position: relative; }
.bell-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surface); color: var(--muted); cursor: pointer;
}
.bell-btn:hover { color: var(--ink); border-color: var(--muted); }
.bell-dot {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 9px; border: 2px solid var(--surface);
}
.bell-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16); z-index: 60; overflow: hidden;
}
.bell-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.bell-empty { padding: 20px 12px; text-align: center; font-size: 13px; }
.bell-item {
    display: block; padding: 10px 12px; border-bottom: 1px solid var(--line);
    color: var(--text); text-decoration: none;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--hover); }
/* Non lue : une barre corail à gauche, plutôt qu'un fond qui alourdit la liste. */
.bell-item.is-unread { box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.bell-item-title { display: block; font-size: 13px; line-height: 1.4; }
.bell-item-ago { display: block; font-size: 11px; margin-top: 2px; }
@media (max-width: 640px) { .bell-panel { position: fixed; left: 12px; right: 12px; width: auto; } }

/* Une ligne de la page Notifications — même grammaire que la cloche. */
.notif-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    color: var(--text); text-decoration: none;
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--hover); }
.notif-row.is-unread { box-shadow: inset 3px 0 0 var(--primary); }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-title { font-size: 14px; line-height: 1.45; }
.notif-row.is-unread .notif-title { font-weight: 600; color: var(--ink); }
.notif-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) {
    .notif-row { flex-direction: column; gap: 6px; }
    .notif-meta { white-space: normal; }
}

/* ------------------------------------------------------------------ onglets */
/*
 | Contrôle segmenté plutôt qu'onglets « à dossier » : une piste claire, le
 | segment actif en surface blanche posée dessus. Plus proche du reste de
 | l'interface (cartes douces, ombres courtes) qu'un liseré collé au bord.
 */
.tab-bar {
    display: inline-flex; gap: 2px; padding: 4px;
    background: var(--hover); border: 1px solid var(--line);
    border-radius: 10px; margin-bottom: 14px;
}
.tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border: 0; border-radius: 7px;
    background: transparent; color: var(--muted);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
    background: var(--surface); color: var(--ink);
    box-shadow: 0 1px 2px rgba(34, 34, 34, .10), 0 0 0 1px rgba(34, 34, 34, .04);
}
.tab-count {
    min-width: 20px; padding: 0 6px; border-radius: 9px;
    background: rgba(34, 34, 34, .07); color: var(--muted);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.tab.is-active .tab-count { background: var(--primary); color: #fff; }
@media (max-width: 640px) {
    .tab-bar { display: flex; width: 100%; overflow-x: auto; }
    .tab { flex: 1; justify-content: center; white-space: nowrap; }
}

/* Web Push — first-page permission prompt */
.push-prompt {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(34, 34, 34, .45);
  backdrop-filter: blur(2px);
}
.push-prompt-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 24px 48px -20px rgba(34, 34, 34, .45);
}
.push-prompt-title {
  font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.push-prompt-body { font-size: 13.5px; line-height: 1.45; margin: 0 0 18px; }
.push-prompt-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}