/*
 * lms-style.css — Le Marché Super / Design System
 * ─────────────────────────────────────────────────
 * Mobile-first. Tablette à partir de 600px. Desktop à partir de 1024px.
 * À importer dans TOUTES les pages : <link rel="stylesheet" href="/lms-style.css">
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-weight: 400;
  background: var(--cream);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  /* Couleurs */
  --black:       #111110;
  --white:       #FAFAF8;
  --cream:       #F2F0EB;
  --stone:       #E8E5DE;
  --border:      #D8D5CC;
  --muted:       #9C9A92;
  --text:        #1C1C1A;
  --text-light:  #6B6965;

  /* Statuts */
  --green:       #2D6A4F;
  --green-light: #D8EDDF;
  --green-mid:   #52B788;
  --amber:       #92600A;
  --amber-light: #FEF3CD;
  --red:         #8B1A1A;
  --red-light:   #FDECEA;

  /* App colors (icônes launcher) */
  --app-bl:      #111110;
  --app-inv:     #1E3A2F;
  --app-sav:     #3D1F14;
  --app-plan:    #1A2535;
  --app-prep:    #2D2010;
  --app-gest:    #0F2535;

  /* Espacements */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;

  /* Rayons */
  --r-sm:        8px;
  --r-md:        12px;
  --r-lg:        20px;
  --r-icon:      20px;   /* icônes app — ratio iOS ~27% */
  --r-full:      999px;

  /* Topbar */
  --topbar-h:    64px;

  /* Dock */
  --dock-h:      68px;

  /* Transition */
  --ease:        cubic-bezier(.22,.68,0,1.2);

  /* Alias courts utilisés dans toutes les pages (évite les redéfinitions locales) */
  --r:           4px;                        /* border-radius compact */
  --r-tbl:       4px;                        /* alias historique (sav, reception) */
  --b:           1px solid #D8D5CE;          /* bordure standard */
  --bg:          #F5F3EF;                    /* fond "Excel / carte" */
  --th-bg:       #F5F3EF;                    /* fond entête tableau */
  --row-hover:   #FAFAF8;                    /* hover ligne tableau */
  --border-tbl:  1px solid #D8D5CE;          /* alias explicite .xl-tbl */
}

/* ── LAYOUT PRINCIPAL ───────────────────────────────────────── */
.lms-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: calc(var(--dock-h) + 16px);
}

.lms-content {
  flex: 1;
  /* padding-top FIXE : aligne toutes les apps sur la même marge sous topbar
     (référence : reception/detail.php). Les paddings latéraux et bottom
     restent responsive pour la respiration. */
  padding: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 12px) var(--space-md) var(--space-md);
  max-width: min(1500px, 100%);
  margin: 0 auto;
  width: 100%;
}

/* Tablette : élargit seulement les marges latérales et bottom */
@media (min-width: 600px) {
  .lms-content {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}

/* Desktop (backend uniquement) : idem */
@media (min-width: 1024px) {
  .lms-content {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION RÉUTILISABLE — switcher semaine/jour + boutons d'action
   ───────────────────────────────────────────────────────────────────
   Patterns factorisés depuis l'app Arrivage (UX validée 2026-05-23).

   CONVENTION D'ORDRE : les boutons qui apparaissent CONDITIONNELLEMENT
   (ex. "Aujourd'hui", visible seulement hors semaine courante) se placent
   À GAUCHE des boutons toujours visibles → ils ne décalent jamais ces
   derniers. Le switcher reste à droite (position constante d'un écran à
   l'autre). Sur mobile : boutons en rangée, switcher pleine largeur dessous.

   Markup type (contrôles en haut à droite d'une page) :
     <div class="nav-controls">
       <a class="today-btn" href="?">Aujourd'hui</a>          (conditionnel)
       <div class="nav-views"><a href="...">Autre vue</a></div>
       <div class="week-nav">
         <a class="wn-prev" href="...">←</a>
         <span class="week-label">Semaine 22</span>
         <a class="wn-next" href="...">→</a>
       </div>
     </div>

   Switcher de jour (bandeau, ex. mobile) :
     <div class="day-switch">
       <button class="day-nav-arrow">‹</button>
       <span class="day-label">Samedi 23 mai 2026</span>
       <button class="day-nav-arrow">›</button>
     </div>
   =================================================================== */
.nav-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

.week-nav{display:inline-flex;align-items:center;gap:6px;padding:0;}
.week-nav .week-label{font-size:14px;font-weight:600;padding:0 6px;color:var(--text);min-width:90px;text-align:center;}
.week-nav .week-label.current{color:#1A5C38;}

.today-btn{padding:8px 12px;border:1px solid var(--text);background:var(--text);color:#fff;
  text-decoration:none;font-size:11px;font-weight:600;border-radius:8px;white-space:nowrap;cursor:pointer;
  font-family:inherit;}
.today-btn:hover{background:#000;}

/* Flèches de switcher (semaine + jour) : carrés arrondis, glyphe centré */
.wn-prev,.wn-next,.day-switch .day-nav-arrow,.day-carousel-nav .day-nav-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:38px;padding:0;border:1px solid #D8D5CE;background:#fff;color:var(--text);
  font-size:18px;line-height:1;border-radius:8px;cursor:pointer;font-family:inherit;
  text-decoration:none;transition:background .12s,border-color .12s;-webkit-tap-highlight-color:transparent;}
.wn-prev:hover,.wn-next:hover,.day-switch .day-nav-arrow:hover,.day-carousel-nav .day-nav-arrow:hover{
  background:#F5F3EF;border-color:#B8B4AC;}
.wn-prev:disabled,.wn-next:disabled,.day-carousel-nav .day-nav-arrow:disabled{opacity:.35;cursor:not-allowed;}

.nav-views{display:inline-flex;gap:6px;}
.nav-views a{padding:8px 12px;border:1px solid #D8D5CE;background:#fff;color:var(--text);
  text-decoration:none;font-size:12px;border-radius:8px;}
.nav-views a.active{background:var(--text);color:#fff;border-color:var(--text);}
.nav-views a:hover:not(.active){background:#F5F3EF;}

/* Bandeau switcher de jour (le display est géré par la page : inline ou mobile-only) */
.day-switch{align-items:center;justify-content:space-between;gap:8px;
  background:#F0E5C8;border:1px solid #E0D2A8;border-radius:8px;padding:8px 10px;}
.day-switch .day-label{flex:1;text-align:center;font-size:14px;font-weight:700;color:#5B4216;text-transform:capitalize;}

/* Carousel jour (mobile-only par défaut) */
.day-carousel-nav{display:none;}
.day-nav-title{font-size:14px;font-weight:600;color:var(--text);text-transform:capitalize;line-height:1.2;user-select:none;}
.day-nav-title.today{color:#1A5C38;}

/* Mobile : contrôles empilés. Boutons conditionnels (today) à gauche,
   "autre vue" prend le reste, switcher pleine largeur dessous. */
@media (max-width:640px){
  .nav-controls{width:100%;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:6px;justify-content:flex-start;}
  .nav-controls .today-btn{order:1;padding:10px 14px;font-size:12px;}
  .nav-controls .nav-views{order:2;flex-wrap:wrap;gap:6px;}
  .nav-controls .nav-views a{padding:10px 14px;font-size:12px;}
  .nav-controls .week-nav{order:3;flex:1 1 100%;display:flex;align-items:center;gap:10px;box-sizing:border-box;}
  .nav-controls .week-nav .wn-prev,.nav-controls .week-nav .wn-next{flex:0 0 44px;width:44px;height:44px;}
  .nav-controls .week-nav .week-label{flex:1 1 auto;}
  /* Carousel jour visible en mobile */
  .day-carousel-nav{display:flex;align-items:center;width:100%;box-sizing:border-box;gap:10px;padding:4px 0 8px;}
  .day-carousel-nav .day-nav-arrow{flex:0 0 44px;width:44px;height:44px;}
  .day-carousel-nav .day-nav-title{flex:1 1 auto;text-align:center;}
}

/* ═══ Bouton "nouveau XXX" — template global (réf. app Appro) ═══════
   Bouton d'action primaire d'une page (créer une demande, une DLC, un
   ticket, un fournisseur…). Sur mobile il passe SOUS le titre : on rend le
   bloc titre pleine largeur dans les conteneurs d'en-tête standards, donc
   le(s) bouton(s) wrappe(nt) à la ligne suivante. =================== */
.btn-new{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;
  padding:9px 16px;border-radius:var(--r);background:var(--text);color:#fff;border:none;
  cursor:pointer;text-decoration:none;font-family:inherit;}
.btn-new svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;}
.btn-new:hover{background:#000;}

@media (max-width:640px){
  .top > div:first-child,
  .sw-top > div:first-child,
  .art-top > div:first-child,
  .tb-top > div:first-child,
  .f-top > div:first-child{flex:1 1 100%;}
}

/* ═══ Champ de recherche article + scanner (modèle global) ═════════
   Markup type :
     <div class="prod-zone">
       <input class="fi" ...>   (ou .prod-inp)
       <button class="scan-btn">📷</button>
     </div>
   Mobile : bouton carré séparé à droite (par défaut ci-dessous).
   Tablette+ (≥641px) : scanner INTÉGRÉ dans le champ, collé à droite —
   plus esthétique. S'applique à toutes les pages (sav/dlc/reappro/inventaire)
   qui réutilisent ce markup. ============================================ */
.prod-zone{display:flex;gap:8px;align-items:center;}
.prod-zone > input,.prod-zone .fi,.prod-zone .prod-inp{flex:1;min-width:0;}
.scan-btn{flex-shrink:0;width:48px;height:48px;border:var(--b);border-radius:var(--r);
  background:var(--text);color:#fff;cursor:pointer;font-size:20px;display:flex;
  align-items:center;justify-content:center;font-family:inherit;}

@media (min-width:641px){
  .prod-zone{position:relative;gap:0;}
  .prod-zone > input,.prod-zone .fi,.prod-zone .prod-inp{padding-right:50px;}
  .prod-zone .scan-btn{position:absolute;top:4px;right:4px;bottom:4px;height:auto;width:42px;
    background:transparent;color:var(--muted);border:none;border-radius:6px;}
  .prod-zone .scan-btn:hover{background:#EFEAE0;color:var(--text);}
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.lms-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* iOS PWA (standalone) : on étend la barre sous l'encoche/status bar
     (heure/batterie) et on descend le contenu via padding-top = safe-area.
     box-sizing border-box → la zone de contenu reste = --topbar-h. */
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  background: var(--black);
  display: flex;
  align-items: center;
  padding-left: 14px;
  padding-right: 14px;
  gap: 10px;
  z-index: 100;
}

/* Titre texte compact (remplace l'ancien logo image) */
.lms-topbar-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.lms-topbar-title:hover { color: #fff; }

/* Ancienne classe conservée pour compat */
.lms-logo,
.lms-logo-img,
.lms-topbar-divider,
.lms-topbar-label { display: none; }

.lms-topbar-spacer { flex: 1; }

.lms-topbar-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}
.lms-topbar-back svg { width: 16px; height: 16px; }

/* User chip */
.lms-user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: var(--r-full);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lms-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}

/* Couleurs avatar par initiales (cycle) */
.av-a { background: var(--green-light); color: var(--green); }
.av-b { background: #DBEAFE; color: #1E40AF; }
.av-c { background: #FDE8D8; color: #9A3412; }
.av-d { background: #F3E8FF; color: #6B21A8; }
.av-e { background: #FEF9C3; color: #854D0E; }
.av-f { background: #FCE7F3; color: #9D174D; }
.av-g { background: #D1FAE5; color: #065F46; }

.lms-user-chip .lms-avatar { width: 24px; height: 24px; font-size: 9px; }
.lms-chip-name { font-size: 12px; color: rgba(255,255,255,0.85); font-weight: 400; white-space: nowrap; }
.lms-chip-role { display: none; }

/* Mobile : topbar plus compacte */
@media (max-width: 480px) {
  :root { --topbar-h: 52px; }
  /* ⚠ ne pas remettre padding:0 → écraserait le padding-top safe-area iOS
     (sinon le contenu se centre sur toute la hauteur, sous la status bar). */
  .lms-topbar { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .lms-topbar-title { font-size: 12px; }
  .lms-user-chip { padding: 3px 9px 3px 3px; }
  .lms-topbar-back { font-size: 12px; }
}

/* ── DOCK ───────────────────────────────────────────────────── */
.lms-dock {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--dock-h);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(242,240,235,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid var(--stone);
  padding: 0 var(--space-lg);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 100;
}

.lms-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  padding: 5px 16px;
}

.lms-dock-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s var(--ease);
}

.lms-dock-item:active .lms-dock-icon { transform: scale(.88); }
.lms-dock-item.active .lms-dock-icon { background: var(--black); }
.lms-dock-item.active .lms-dock-icon svg { stroke: #fff; }

.lms-dock-item svg { width: 22px; height: 22px; stroke: var(--text-light); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lms-dock-label { font-size: 10px; color: var(--text-light); font-weight: 400; }
.lms-dock-item.active .lms-dock-label { color: var(--text); font-weight: 500; }

/* ── LAUNCHER (page d'accueil) ──────────────────────────────── */
.lms-launcher {
  padding-top: var(--space-sm);
}

.lms-section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.lms-app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--space-xl);
}

@media (min-width: 400px) {
  .lms-app-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (min-width: 600px) {
  .lms-app-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Icône app */
.lms-app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.lms-icon-sq {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .12s var(--ease), opacity .1s;
}

.lms-app-icon:active .lms-icon-sq {
  transform: scale(.88);
  opacity: .9;
}

.lms-icon-sq svg {
  width: 36%;
  height: 36%;
  stroke: rgba(255,255,255,0.9);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lms-icon-label {
  font-size: 11px;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
  font-weight: 400;
}

/* Badge notification */
.lms-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: #D63030;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--cream);
  line-height: 1;
}

/* App verrouillée */
.lms-app-icon.locked { opacity: .38; cursor: not-allowed; }
.lms-app-icon.locked .lms-icon-sq { background: var(--stone) !important; }
.lms-app-icon.locked .lms-icon-sq svg { stroke: var(--muted); }
.lms-app-icon.locked .lms-icon-label { color: var(--muted); }

/* ── CARTES ─────────────────────────────────────────────────── */
.lms-card {
  background: var(--white);
  border: 0.5px solid var(--stone);
  border-radius: var(--r-lg);
  padding: var(--space-md);
}

.lms-card + .lms-card { margin-top: var(--space-sm); }

.lms-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.lms-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.lms-card-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── BADGES STATUT ──────────────────────────────────────────── */
.lms-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-full);
  line-height: 1;
}

.lms-tag-ok     { background: var(--green-light);  color: var(--green); }
.lms-tag-warn   { background: var(--amber-light);  color: var(--amber); }
.lms-tag-err    { background: var(--red-light);    color: var(--red); }
.lms-tag-neutral{ background: var(--stone);        color: var(--muted); }

.lms-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

/* ── BOUTONS ────────────────────────────────────────────────── */
.lms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  transition: transform .1s var(--ease), opacity .1s;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.lms-btn:active { transform: scale(.96); }

.lms-btn-primary {
  background: var(--black);
  color: #fff;
}

.lms-btn-secondary {
  background: var(--white);
  color: var(--text);
  border: 0.5px solid var(--border);
}

.lms-btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 0.5px solid transparent;
}

.lms-btn-danger {
  background: var(--red-light);
  color: var(--red);
}

.lms-btn-full { width: 100%; }

.lms-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* ── FORMULAIRES ────────────────────────────────────────────── */
.lms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.lms-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: .02em;
}

.lms-input,
.lms-select,
.lms-textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

.lms-input:focus,
.lms-select:focus,
.lms-textarea:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(17,17,16,0.06);
}

.lms-input::placeholder,
.lms-textarea::placeholder { color: var(--muted); }

.lms-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

.lms-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239C9A92' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ── LISTE D'ACTIVITÉ ───────────────────────────────────────── */
.lms-activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 0;
  border-bottom: 0.5px solid var(--stone);
}
.lms-activity-item:last-child { border-bottom: none; }

.lms-activity-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
}

.lms-activity-detail { flex: 1; min-width: 0; }
.lms-activity-name { font-size: 13px; font-weight: 500; color: var(--text); }
.lms-activity-action { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lms-activity-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* ── UTILITAIRES ────────────────────────────────────────────── */
.lms-divider { height: 0.5px; background: var(--stone); margin: var(--space-md) 0; }
.lms-spacer { height: var(--space-md); }
.lms-spacer-lg { height: var(--space-xl); }

.lms-page-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.lms-page-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--space-lg);
}

/* Grille 2 colonnes pour stats */
.lms-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.lms-stat-card {
  background: var(--white);
  border: 0.5px solid var(--stone);
  border-radius: var(--r-md);
  padding: 14px;
}

.lms-stat-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.lms-stat-value { font-size: 24px; font-weight: 500; color: var(--text); line-height: 1; }
.lms-stat-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Message d'alerte */
.lms-alert {
  display: flex;
  gap: var(--space-sm);
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.lms-alert-ok   { background: var(--green-light); color: var(--green); }
.lms-alert-warn { background: var(--amber-light); color: var(--amber); }
.lms-alert-err  { background: var(--red-light);   color: var(--red); }

/* Écran de chargement */
.lms-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.lms-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--stone);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: lms-spin .7s linear infinite;
}

@keyframes lms-spin { to { transform: rotate(360deg); } }

/* ── ANIMATIONS PAGE ────────────────────────────────────────── */
@keyframes lms-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animation fade-only (pas de translateY) — sinon le contenu "descend"
   visuellement de 8px au chargement, ce qui était perçu comme un bug
   notamment sur les listings (commandes-pro). */
.lms-animate {
  animation: lms-fadein .2s ease forwards;
}

/* ── LMS Toast (générique) ─────────────────────────────────────
   Toast réutilisable depuis n'importe quelle page via lib/lms-toast.js
   (LmsToast.show / .info / .success / .warn / .denied).

   Toujours rendu à la racine du <body> via JS (pas dans .lms-content)
   pour éviter qu'un containing block parasite (transform, contain)
   neutralise le position:fixed.

   Variantes (couleur) :
     .info    : neutre/bleu
     .success : vert
     .warn    : ocre (app draft/disabled, validation soft)
     .denied  : rouge (refus d'accès, erreur dure)
   ─────────────────────────────────────────────────────────────── */
.lms-toast {
  position: fixed;
  top: calc(var(--topbar-h, 50px) + env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translate(-50%, -180%);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  max-width: min(560px, calc(100% - 32px));
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .25s;
  opacity: 0;
  font-family: inherit;
}
.lms-toast.show { transform: translate(-50%, 0);     opacity: 1; }
.lms-toast.hide { transform: translate(-50%, -180%); opacity: 0; }
.lms-toast-ico  { font-size: 15px; line-height: 1.2; flex-shrink: 0; }

.lms-toast.info    { background: #EEF4FB; border-color: #B8CCE3; color: #1E3A6B; }
.lms-toast.success { background: #ECF7EF; border-color: #B7DDC2; color: #1E5A33; }
.lms-toast.warn    { background: #FFFBF0; border-color: #F0D080; color: #7D5500; }
.lms-toast.denied  { background: #FFF5F5; border-color: #E5A0A0; color: #8B1A1A; }

/* ── Badge dock notifications ── */
.dock-notif-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #8B1A1A;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--white);
  animation: badge-pop .3s cubic-bezier(.175,.885,.32,1.275);
  pointer-events: none;
}
@keyframes badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSANTS RÉUTILISABLES
   À préférer aux styles inline dans les pages. Classes attendues
   par les pages existantes (non-breaking, s'ajoute sans casser).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1) Filtres chips ───────────────────────────────────────── */
.flt{
  font-size:11px;font-weight:500;padding:5px 12px;
  border:var(--b);border-radius:var(--r);
  background:var(--white);color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:background .1s,color .1s,border-color .1s;
}
.flt:hover{border-color:var(--text);color:var(--text);}
.flt.on{background:var(--text);color:#fff;border-color:var(--text);}
.flt-search{
  font-size:11px;padding:5px 10px;
  border:var(--b);border-radius:var(--r);
  background:var(--white);color:var(--text);outline:none;
}
.flt-search:focus{border-color:var(--text);}
.filters,.filters-bar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;align-items:center;}

/* ── 2) Status badges ───────────────────────────────────────── */
.sb{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:600;
  padding:3px 8px;border-radius:var(--r);
  white-space:nowrap;
}
/* Neutres */
.sb-neutral,.sb-brouillon{background:#F5F3EF;color:#6B7280;}
.sb-info,.sb-examiner,.sb-ep{background:#DBEAFE;color:#1E40AF;}
.sb-warn,.sb-ap,.sb-retour{background:#FEF3CD;color:#92600A;}
.sb-warn-alt{background:#FDE8D8;color:#9A3412;}
.sb-danger,.sb-refuse-f,.sb-bad,.sb-an{background:#FDECEA;color:#8B1A1A;}
.sb-success,.sb-valide-f,.sb-ok,.sb-pr,.sb-v,.sb-tr{background:#D8EDDF;color:#1A5C38;}
.sb-purple,.sb-attente{background:#EDE9FE;color:#5B21B6;}
.sb-partial{background:#FEF3CD;color:#92600A;}
.sb-re,.sb-li{background:#F5F3EF;color:#6B7280;}
/* Alias WC */
.woo-processing{background:#DBEAFE;color:#1E40AF;}
.woo-on-hold{background:#FEF3CD;color:#92600A;}
.woo-completed{background:#D8EDDF;color:#1A5C38;}
.woo-cancelled{background:#FDECEA;color:#8B1A1A;}
.woo-pending{background:#F5F3EF;color:#6B7280;}

/* ── 3) Tableaux Excel-style .xl-tbl / .xl ──────────────────── */
.tbl-wrap{
  border:var(--b);border-radius:var(--r);
  overflow:hidden;background:var(--white);
}
.xl-tbl,.xl{width:100%;border-collapse:collapse;font-size:12px;}
.xl-tbl thead th,.xl thead th{
  padding:7px 11px;text-align:left;
  font-size:10px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--th-bg);
  border-bottom:var(--b);border-right:1px solid #E8E5DF;
  white-space:nowrap;
}
.xl-tbl thead th:last-child,.xl thead th:last-child{border-right:none;}
.xl-tbl tbody tr,.xl tbody tr{border-bottom:1px solid #EEEBE5;}
.xl-tbl tbody tr:last-child,.xl tbody tr:last-child{border-bottom:none;}
.xl-tbl tbody tr:hover td,.xl tbody tr:hover td{background:var(--row-hover);}
.xl-tbl td,.xl td{
  padding:9px 11px;vertical-align:middle;
  border-right:1px solid #EEEBE5;
}
.xl-tbl td:last-child,.xl td:last-child{border-right:none;}
.xl-tbl th.sortable{cursor:pointer;user-select:none;}
.xl-tbl th.sortable:hover{color:var(--text);}
.xl-tbl th .si{margin-left:3px;opacity:.35;font-size:9px;}
.xl-tbl th.sorted .si{opacity:1;}

/* ── 4) Boutons génériques .btn / .btn-* ────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:500;padding:8px 14px;
  border-radius:var(--r);background:var(--text);color:#fff;
  border:none;cursor:pointer;text-decoration:none;
  transition:opacity .1s;
}
.btn:active{opacity:.8;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;}
.btn.ghost{background:transparent;color:var(--text);border:var(--b);}
.btn.ghost svg{stroke:var(--text);}
.btn.green{background:var(--green);}
.btn.orange{background:var(--amber);}
.btn.blue{background:#1E40AF;}
.btn.red{background:var(--red);}
.btn.sm{padding:5px 10px;font-size:11px;}

/* ── 5) Stats cards ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
@media(max-width:599px){.stats{grid-template-columns:repeat(2,1fr);gap:6px;}}
.sc{background:var(--white);border:var(--b);border-radius:var(--r);padding:12px 14px;text-align:center;}
.sv{font-size:22px;font-weight:600;color:var(--text);line-height:1;}
.sl{font-size:10px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.04em;}
.sv-orange{color:var(--amber);}
.sv-blue{color:#1E40AF;}
.sv-green{color:var(--green);}
.sv-red{color:var(--red);}

/* ── 6) Modales ────────────────────────────────────────────── */
.modal-bg{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;padding:16px;
  overflow-y:auto;
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--white);border-radius:var(--r);
  width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
}
.modal-head,.mh{
  padding:14px 16px;font-size:14px;font-weight:600;
  border-bottom:var(--b);background:var(--bg);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-body,.mc{padding:16px;}
.modal-close{
  background:none;border:none;cursor:pointer;
  font-size:22px;color:var(--muted);line-height:1;padding:0;
}

/* ── 7) Autocomplete (search + dropdown) ────────────────────── */
.ac-wrap{position:relative;}
.ac{
  position:absolute;top:calc(100% + 2px);left:0;right:0;
  background:var(--white);border:var(--b);border-radius:var(--r);
  z-index:50;max-height:260px;overflow-y:auto;
  box-shadow:0 6px 18px rgba(0,0,0,.08);display:none;
}
.ac.show,.ac[style*="display:block"]{display:block;}
.ac-item{
  padding:9px 12px;font-size:12px;cursor:pointer;
  border-bottom:1px solid #EEEBE5;
}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.on{background:var(--bg);}
.ac-n,.ai-n{font-weight:500;color:var(--text);font-size:13px;}
.ac-s,.ai-s{font-size:10px;color:var(--muted);margin-top:2px;}

/* ── 8) Formulaires (labels / inputs compacts) ──────────────── */
.fl{font-size:11px;font-weight:500;color:var(--muted);margin-bottom:4px;}
.fi,.fsel,.mi{
  width:100%;font-size:13px;padding:8px 10px;
  border:var(--b);border-radius:var(--r);
  background:var(--white);color:var(--text);outline:none;
  font-family:inherit;
}
.fi:focus,.fsel:focus,.mi:focus{border-color:var(--text);}

/* ── 9) Sections (titre barre horizontale) ──────────────────── */
.sec,.home-sec{
  font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
  margin:18px 0 8px;display:flex;align-items:center;gap:8px;
}

/* ── 10) Skeleton loader ────────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,#E8E5DF 25%,#F5F3EF 50%,#E8E5DF 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;
  border-radius:2px;height:12px;
}
@keyframes sk{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── 11) Loader centré ──────────────────────────────────────── */
.loader{
  text-align:center;padding:24px;
  color:var(--muted);font-size:12px;
}

/* ── 12) Sub-wrapper standard .sw ───────────────────────────── */
/* Pas de padding-top topbar ici : .lms-content parent s'en charge déjà.
   Sinon on cumulait deux fois calc(topbar-h + …) → ~154px d'écart. */
/* Padding latéral : source UNIQUE = .lms-content (16/24/32px selon écran).
   .sw ne gère QUE le max-width (centrage) et l'espace bas (dock) — sinon on
   doublait le padding L/R (lms-content + sw). */
.sw{
  max-width:1500px;margin:0 auto;
  padding:0 0 calc(var(--dock-h) + 24px);
}

/* ── 13) Top bar d'en-tête de page (titre + actions) ────────── */
.top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.ttl{font-size:18px;font-weight:600;color:var(--text);}
.sub{font-size:12px;color:var(--muted);margin-top:2px;}

/* ── 14) Empty state ────────────────────────────────────────── */
.empty{
  text-align:center;padding:24px 16px;
  color:var(--muted);font-size:13px;
  background:var(--white);border:var(--b);border-radius:var(--r);
}

/* ── 15) Progress bar (picking, etc.) ───────────────────────── */
.progress-bar,.pick-progress-bar{
  height:4px;background:#EEEBE5;border-radius:2px;overflow:hidden;
}
.progress-fill,.ppb-fill{
  height:100%;background:var(--green);transition:width .3s;
}