/* Plus Jakarta Sans est servie EN LOCAL par vendor/fonts/jakarta.css (base.html l.18).
   Cet @import vers fonts.googleapis.com avait survécu au rapatriement : sans
   Internet il BLOQUAIT le rendu de tout ce fichier — la « lenteur de temps en
   temps » du POS quand la 4G flanche. Retiré le 2026-08-22. */

/* ============================================================
   SIGMA ERP — Design system (handoff)
   Tokens + composants partagés. Tous les noms de classes
   existants sont conservés ; seul l'aspect change.
   ============================================================ */

:root {
  /* Surfaces & texte */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --text: #1B2129;   /* DS v2 : couleur des titres sur fond blanc (était #101828) */
  --text-strong: #1d2939;
  --text-secondary: #344054;
  --text-muted: #667085;
  --text-muted-2: #475467;
  --text-faint: #98A2B3;
  --text-faint-2: #A0A8B4;

  /* Bordures & séparateurs */
  --border-card: #EAECF0;
  --sep: #EEF0F3;
  --sep-2: #F2F4F6;
  --border-field: #E3E6EB;

  /* Navy (primaire) */
  --navy: #3457A6;
  --navy-hover: #2C4B91;
  --navy-bg: #EEF2FB;

  /* Vert (succès / entrée / encaissement) */
  --green: #15935f;
  --green-hover: #127B50;
  --green-bg: #E7F6EE;
  --green-border: #CDEBD9;

  /* Ambre (avertissement / créances) */
  --amber: #B5790A;
  --amber-strong: #B5560A;
  --amber-bg: #FCF6EA;
  --amber-bg-2: #FCF8EE;
  --amber-border: #F2E3C4;

  /* Rouge (danger / sortie / dépense / alerte) */
  --red: #C0392B;
  --red-bg: #FDECEA;
  --red-border: #F3C9C2;

  /* Violet (transfert) */
  --violet: #7A5AF8;
  --violet-bg: #F0ECFE;
  --violet-border: #E0D8FB;

  /* Topbar */
  --topbar: #1B2129;
  --topbar-border: #2C3540;
  --topbar-control: #262E38;
  --topbar-control-border: #333D49;
  --topbar-active: #2C3744;
  --topbar-text: #9AA4B2;
  --logo: #C9382C;
  --bell: #D63A35;

  /* Alias hérités (utilisés par d'anciennes règles/markup) */
  --primary: var(--navy);
  --accent: var(--navy);
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);

  /* Accent de module (surchargeable par page : .accent-green, etc.) */
  --accent-color: var(--navy);
  --accent-bg: var(--navy-bg);
  --accent-halo: rgba(52, 87, 166, .12);

  /* Ombres */
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-navy-btn: 0 8px 20px -8px rgba(52, 87, 166, .6);
  --shadow-green-btn: 0 10px 22px -10px rgba(21, 147, 95, .65);

  /* Rayons */
  --radius-card: 16px;
  --radius-field: 12px;
  --radius-kpi: 15px;
  --radius-pill: 8px;

  /* ============================================================
     DESIGN SYSTEM v2 — couche de tokens SÉMANTIQUES (rôles).
     Réconciliée sur la palette ci-dessus (réutilise --navy/--green/--red).
     Valeurs validées. N'écrase PAS les tokens legacy (badges legacy inchangés
     tant qu'une vue n'est pas migrée). Voir DESIGN_SYSTEM.md.
     ============================================================ */
  /* Primaire = action (navy) */
  --primary-hover:  var(--navy-hover);
  --primary-active: #243D72;
  --primary-soft:   var(--navy-bg);
  --on-primary:     #FFFFFF;
  --focus-ring:     rgba(52,87,166,.35);
  /* Succès (payé/livré/soldé) */
  --success-bg:     #E1F2EB;
  --success-text:   #0F6E56;
  /* Warning (en attente/en transit/partiel) */
  --warning:        #D97706;
  --warning-bg:     #FBEBD3;
  --warning-text:   #92560A;
  /* Danger (annulé/non payé/litige) */
  --danger-bg:      #F8E3E1;
  --danger-text:    #93291E;
  /* Info (validé/en cours) = famille bleue */
  --info:           #3457A6;
  --info-bg:        #EAF0FB;
  --info-text:      #243D72;
  /* Neutre (brouillon/UI grise) */
  --neutral:        #6B7280;
  --neutral-bg:     #EEF0F3;
  --neutral-text:   #4B5563;
  /* Bordure d'emphase */
  --border-strong:  #CDD2DA;
}

/* Accents de module — appliqués sur un wrapper de page si besoin */
.accent-green   { --accent-color: var(--green);  --accent-bg: var(--green-bg);  --accent-halo: rgba(21,147,95,.12); }
.accent-red     { --accent-color: var(--red);    --accent-bg: var(--red-bg);    --accent-halo: rgba(192,57,43,.12); }
.accent-violet  { --accent-color: var(--violet); --accent-bg: var(--violet-bg); --accent-halo: rgba(122,90,248,.12); }
.accent-amber   { --accent-color: var(--amber);  --accent-bg: var(--amber-bg);  --accent-halo: rgba(181,121,10,.12); }

* { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chiffres alignés partout (tabular-nums) — y compris les contrôles de formulaire
   qui réinitialisent les variantes de fonte */
input, select, textarea, button,
.sigma-table td, .sigma-table th,
.kpi-number, .stock-number,
[class*="badge-"], .status-pill {
  font-variant-numeric: tabular-nums;
}

/* ===== ÉCHELLE TYPOGRAPHIQUE UNIQUE =====
   H1 24/800 · H2 18/800 (#101828) · corps 13,5/600 (#1d2939)
   en-têtes colonnes 10,5/700 MAJ (#98A2B3) · méta 11,5/600 (#98A2B3)
   Graisses : 600 (normal) et 700 (mise en valeur) ; 800 réservé aux titres et KPI 24px+. */
h1 { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.15; }
h2 { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; }

/* ===== NAVBAR ===== */
.sigma-navbar {
  background: var(--topbar);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--topbar-border);
}

.sigma-navbar .logo-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: 28px;
  flex-shrink: 0;
}

.sigma-navbar .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--logo);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
}

.sigma-navbar .logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.sigma-navbar .logo-text {
  font-weight: 800;
  font-size: 16px;
  color: #F4F6F8;
  letter-spacing: .3px;
}

.sigma-navbar .logo-sub {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--topbar-text);
}

.sigma-navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.sigma-navbar .nav-links::-webkit-scrollbar { display: none; }

.sigma-navbar .nav-link {
  color: var(--topbar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 9px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.15s;
}

.sigma-navbar .nav-link:hover {
  color: #fff;
  background: var(--topbar-active);
}

.sigma-navbar .nav-link.active {
  color: #fff;
  background: var(--topbar-active);
}

.sigma-navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.sigma-navbar .notif-btn {
  position: relative;
  color: var(--topbar-text);
  font-size: 16px;
  cursor: pointer;
  background: var(--topbar-control);
  border: 1px solid var(--topbar-control-border);
  border-radius: 9px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.sigma-navbar .notif-btn:hover { color: #fff; }

.sigma-navbar .notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bell);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--topbar);
}

.sigma-navbar .admin-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #E5E9EF;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--topbar-control);
  border: 1px solid var(--topbar-control-border);
  border-radius: 9px;
  height: 38px;
  padding: 0 12px 0 6px;
  transition: all .15s;
}

.sigma-navbar .admin-btn:hover { border-color: #455162; }

.sigma-navbar .admin-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #3457A6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

/* Sélecteur de dépôt dans la topbar (markup inline dans base.html) */
.sigma-navbar .depot-select {
  background: var(--topbar-control) !important;
  border: 1px solid var(--topbar-control-border) !important;
  border-radius: 9px !important;
  padding: 0 12px !important;
  height: 38px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #E5E9EF !important;
  cursor: pointer;
  max-width: 210px;
}
.sigma-navbar .depot-static {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--topbar-control);
  border: 1px solid var(--topbar-control-border);
  border-radius: 9px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #C7CFDA;
}

/* ===== MAIN LAYOUT ===== */
main { padding: 0; }

.sigma-content {
  padding: 28px 32px 56px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ===== CARDS ===== */
.sigma-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  padding: 22px;
}

.sigma-card-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text-strong);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sigma-card-title i { color: var(--accent-color); }

/* ===== KPI CARDS ===== */
.kpi-number {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--navy);
  line-height: 1.15;
}

.kpi-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 700;
}

/* ===== BADGES ===== */
.badge-green,
.badge-red,
.badge-orange,
.badge-blue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
}

.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-orange { background: var(--amber-bg);  color: var(--amber); }
.badge-blue   { background: var(--navy-bg);   color: var(--navy); }

/* ===== STATUS PILLS ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1.3;
}

.status-pret      { background: var(--green-bg); color: var(--green); }
.status-en-cours  { background: var(--amber-bg); color: var(--amber); }
.status-a-preparer{ background: var(--red-bg);   color: var(--red); }
.status-livre     { background: var(--navy-bg);  color: var(--navy); }
.status-rupture   { background: var(--red-bg);   color: var(--red); }
.status-actif     { background: var(--green-bg); color: var(--green); }
.status-inactif   { background: var(--amber-bg); color: var(--amber); }
.status-bas       { background: var(--amber-bg); color: var(--amber); }

/* ===== TABLE ===== */
.sigma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.sigma-table th {
  background: #FAFBFC;
  color: var(--text-faint);
  font-weight: 700;
  font-size: 10.5px;
  padding: 13px 22px;
  text-align: left;
  border-bottom: 1px solid var(--sep-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sigma-table th:hover { color: var(--accent-color); }

.sigma-table td {
  padding: 14px 22px;
  border-top: 1px solid var(--sep-2);
  border-bottom: none;
  vertical-align: middle;
  color: var(--text-secondary);
}

.sigma-table tbody tr:first-child td { border-top: none; }
.sigma-table tr:hover td { background: #FAFBFC; }

/* Nom / libellé fort dans une cellule */
.sigma-table td strong,
.sigma-table td b { color: var(--text-strong); font-weight: 700; }

.product-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #FAFBFC;
  border: 1px solid var(--sep);
}

.product-img-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 18px;
}

/* ===== SUB NAV TABS ===== */
.sigma-tabs {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-bottom: 1px solid var(--sep);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 0 10px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sigma-tabs::-webkit-scrollbar { display: none; }

.sigma-tab {
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: all 0.15s;
}

.sigma-tab:hover { color: var(--text-strong); }

.sigma-tab.active {
  color: var(--accent-color);
  font-weight: 800;
  border-bottom-color: var(--accent-color);
}

/* Variante : barre d'onglets longue, compacte, qui tient sur UNE seule
   ligne (ex. sous-menu Stocks). Padding/gaps resserrés ; défilement
   horizontal conservé en repli ultime sur très petits écrans. */
.sigma-tabs--compact .sigma-tab {
  padding: 12px 11px;
  gap: 6px;
}
.sigma-tabs--compact .sigma-tab i {
  font-size: 13px;
}

/* ===== SIDEBAR FILTERS ===== */
.sigma-sidebar {
  background: #FAFBFC;
  border-right: 1px solid var(--sep);
  padding: 22px;
  min-width: 230px;
  max-width: 230px;
}
.sigma-sidebar select { width: 100%; max-width: 100%; box-sizing: border-box; }

.sigma-sidebar .filter-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sigma-sidebar .filter-title i { color: var(--accent-color); }

.sigma-sidebar .form-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.sigma-sidebar .form-select,
.sigma-sidebar .form-control {
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--border-field);
  padding: 9px 11px;
}

.sigma-sidebar .btn-apply {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  width: 100%;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: var(--shadow-green-btn);
  transition: background .15s;
}

.sigma-sidebar .btn-apply:hover { background: var(--green-hover); }

.brand-checkbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
}

.brand-checkbox-item .count {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
}

/* ===== FORM INPUTS (sigma-input) ===== */
.sigma-input,
input.sigma-input,
select.sigma-input,
textarea.sigma-input {
  width: 100%;
  display: block;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  color: var(--text-strong);
  background: #fff;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-field);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.4;
  appearance: auto;
}

.sigma-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-halo);
  background: #fff;
}

.sigma-input:hover:not(:focus) {
  border-color: #D2D7DE;
}

.sigma-input::placeholder {
  color: var(--text-faint);
  font-weight: 500;
}

select.sigma-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  appearance: none;
  -webkit-appearance: none;
}

textarea.sigma-input {
  resize: vertical;
  min-height: 80px;
}

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.form-label .req,
.form-label .required { color: var(--red); }

/* ===== BUTTONS ===== */
.btn-sigma-primary {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 11px;
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-navy-btn);
  transition: background 0.15s;
}

.btn-sigma-primary:hover { background: var(--navy-hover); color: white; }

.btn-sigma-success {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 11px;
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-green-btn);
  transition: background 0.15s;
}

.btn-sigma-success:hover { background: var(--green-hover); color: white; }

.btn-sigma-outline {
  background: white;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 11px;
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.15s;
}

.btn-sigma-outline:hover { background: #F4F8FC; color: var(--navy); }

/* Bouton neutre (annuler / retour) — utilitaire optionnel */
.btn-sigma-neutral {
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-field);
  border-radius: 11px;
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all .15s;
}
.btn-sigma-neutral:hover { background: var(--bg); }

/* Bouton danger / sortie / dépense — utilitaire optionnel */
.btn-sigma-danger {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 11px;
  height: 42px;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background .15s;
}
.btn-sigma-danger:hover { background: #A93226; color: #fff; }

/* Icônes de boutons — 16px, gap 8px (échelle bouton figée : 42px / 11px / 13,5px / 700) */
[class^="btn-sigma"] i, [class*=" btn-sigma"] i { font-size: 16px; line-height: 1; }

/* ===== SEARCH BAR ===== */
.sigma-search {
  position: relative;
}

.sigma-search input {
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--border-field);
  border-radius: 11px;
  font-size: 13.5px;
  width: 260px;
  outline: none;
  transition: border-color 0.15s, box-shadow .15s;
}

.sigma-search input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-halo);
}

.sigma-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 14px;
}

/* ===== PAGINATION ===== */
.sigma-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  justify-content: center;
}

.sigma-pagination a,
.sigma-pagination span {
  min-width: 34px;
  height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--border-field);
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.sigma-pagination a:hover { border-color: var(--navy); color: var(--navy); }
.sigma-pagination .current {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* ===== COMMANDE LIST ITEM ===== */
.commande-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--sep-2);
}

.commande-item:last-child { border-bottom: none; }

/* ===== ALERT ITEMS ===== */
.alert-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sep-2);
  font-size: 13.5px;
}

.alert-item:last-child { border-bottom: none; }

/* ===== PRODUCT CARDS ===== */
.product-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-card);
  transition: box-shadow 0.15s;
  background: #fff;
}

.product-card:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); }

.product-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.product-card-placeholder {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #EAECF0, #F6F7F9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--text-faint);
}

.product-card-body {
  padding: 13px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ===== PROGRESS BAR ===== */
.sigma-progress {
  height: 6px;
  background: var(--sep);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}

.sigma-progress-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--accent-color);
  transition: width 0.3s ease;
}

/* ===== FORMS (groupes génériques) ===== */
.sigma-form-group {
  margin-bottom: 16px;
}

.sigma-form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.sigma-form-group input,
.sigma-form-group select,
.sigma-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-field);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow .15s;
}

.sigma-form-group input:focus,
.sigma-form-group select:focus,
.sigma-form-group textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-halo);
}

/* ===== CHAMP AVEC BOUTON D'ACTION (œil du mot de passe, croix d'effacement) =====
   Le bouton est POSÉ À CÔTÉ du champ, jamais par-dessus. La version précédente
   le plaçait en `position:absolute` sur les 44 derniers pixels : dès qu'il y
   avait du texte, taper à droite de celui-ci — le geste naturel pour poser le
   curseur avant d'effacer — ne visait plus le champ mais le bouton, qui vidait
   TOUT. Mesuré : `elementFromPoint` à 92 % de la largeur renvoyait le bouton.
   Sur le mot de passe c'était permanent, l'œil étant toujours affiché.
   Deuxième raison, mesurée aussi : les icônes viennent d'un CDN. Sans internet
   elles tombent à 0×0 alors que la boîte de 44 px reste — le piège devenait
   invisible. Ici, le bouton a sa propre bordure : il se voit même sans icône. */
.champ-action {
  display: flex;
  align-items: stretch;
}
.champ-action input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.champ-action button {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F8FA;
  border: 1px solid var(--border-field);
  border-left: 1px solid var(--sep-2);
  border-top-right-radius: var(--radius-field);
  border-bottom-right-radius: var(--radius-field);
  color: var(--text-faint);
  font-size: 15px;
  cursor: pointer;
}
.champ-action button:active { background: #EEF0F3; }
/* Plusieurs boutons côte à côte (⌫ puis ✕) : seul le DERNIER porte l'arrondi
   droit — un bouton du milieu arrondi ferait un trou dans la pilule. */
.champ-action button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
/* Le halo de focus doit entourer l'ENSEMBLE, sinon le champ paraît coupé. */
.champ-action:focus-within input,
.champ-action:focus-within button { border-color: var(--accent-color); }
.champ-action:focus-within { border-radius: var(--radius-field); box-shadow: 0 0 0 3px var(--accent-halo); }
.champ-action input:focus { box-shadow: none; }

/* ===== PAGE HEADER ===== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-header h1 i { color: var(--accent-color); }

.page-subtitle {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Pastille d'icône d'en-tête (utilitaire optionnel) */
.page-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--accent-color);
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent-halo);
  flex-shrink: 0;
}

/* ===== INFO BANNER (utilitaire optionnel) ===== */
.sigma-info-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 13px;
  background: var(--navy-bg);
  border: 1px solid #DCE4F5;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}
.sigma-info-banner i { color: var(--navy); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sigma-info-banner b, .sigma-info-banner strong { color: var(--text-strong); font-weight: 800; }

.sigma-info-banner.amber {
  background: var(--amber-bg-2);
  border-color: var(--amber-border);
  color: var(--text-secondary);
}
.sigma-info-banner.amber i { color: var(--amber); }

/* ===== MESSAGES ===== */
.sigma-alert {
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  border: 1px solid transparent;
}

.sigma-alert-success { background: var(--green-bg); color: var(--green-hover); border-color: var(--green-border); }
.sigma-alert-error   { background: var(--red-bg);   color: #A93226;            border-color: var(--red-border); }
.sigma-alert-warning { background: var(--amber-bg); color: var(--amber-strong);border-color: var(--amber-border); }

/* ===== LOGIN PAGE ===== */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--topbar) 0%, #243042 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 410px;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.35);
}

.login-logo {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
/* Une MARGE, pas un `gap` : le Chromium des POS SUNMI (antérieur à Chrome 84)
   ignore le gap des flexbox — le logo restait collé au titre quoi qu'on mette.
   Constaté en clientèle, photo à l'appui, alors que le CSS était le bon. */
.login-logo img { margin-right: 18px; }

/* 16 px, et pas 14. Sous 16 px, le navigateur d'un téléphone ZOOME tout seul
   quand le champ prend le focus : la page saute, le champ se déplace sous le
   doigt, le curseur devient impossible à poser — c'est ce qui empêchait de
   corriger un caractère sur le POS. Constaté sur SUNMI V2s. La règle vaut pour
   TOUT champ de saisie du site, pas seulement la connexion (voir plus bas). */
.login-card .sigma-form-group input {
  font-size: 16px;
}

/* La carte de connexion sur un petit écran : 24 px de marge + 40 px de padding
   laissaient 232 px utiles sur un écran de 360. On dégonfle. */
@media (max-width: 420px) {
  .login-page { padding: 14px; }
  .login-card { padding: 24px 20px; border-radius: 16px; }
  /* Le bloc logo + titre était calé à gauche pendant que « Bienvenue » était
     centré : l'ensemble penchait. Sur un écran étroit, tout est centré. */
  .login-logo { justify-content: center; margin-bottom: 22px; }
}

/* ===== STOCK NUMBER ===== */
.stock-number {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 800;
}

.stock-ok      { background: var(--green-bg); color: var(--green); }
.stock-bas     { background: var(--amber-bg); color: var(--amber); }
.stock-rupture { background: var(--red-bg);   color: var(--red); }

/* ===== GRID HELPERS ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 1024px) {
  .sigma-navbar .nav-link { padding: 8px 9px; font-size: 12.5px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Zoom au focus : tout champ sous 16 px fait zoomer le navigateur mobile
     quand on tape dedans. La page saute, le champ glisse sous le doigt et le
     curseur devient impossible à poser. 16 px partout sur petit écran. */
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  .sigma-input, .f-input { font-size: 16px !important; }

  /* 84 px en bas = la hauteur de la barre d'actions basse, qui apparaît
     précisément à cette largeur. La réserve était écrite plus bas, dans le bloc
     ≤620 px : entre 621 et 768 px la barre recouvrait donc les derniers pixels
     du contenu — le dernier bouton d'une page n'était plus cliquable. */
  .sigma-content { padding: 18px 16px 84px; }
  .sigma-navbar .nav-links { display: none; }
  .sigma-sidebar { display: none; }
  .main-grid, .bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE & POS (SUNMI V2s ≈ 360 px de large)
   ═══════════════════════════════════════════════════════════════════════════
   Règle unique : AUCUN défilement horizontal. Le commercial ne glisse jamais
   vers la droite — il tient l'appareil d'une main, devant un client.

   Le défaut le plus coûteux n'était pas dans les pages mais dans la BARRE DU
   HAUT : elle refusait de se comprimer (logo + nom de l'entreprise + dépôt +
   cloche + nom complet de l'utilisateur ≈ 505 px incompressibles), et comme
   elle est collante, toute la page glissait avec elle. On la réduit à
   l'essentiel : icône, dépôt, cloche, avatar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Garde-fou général : une cellule de grille contenant un tableau large
   élargissait la grille entière au-delà de l'écran (min-width:auto par défaut). */
html, body { overflow-x: hidden; }
.sigma-content > * { min-width: 0; }

@media (max-width: 620px) {
  .sigma-navbar { padding: 0 12px; gap: 8px; }
  .sigma-navbar .logo-wrap { margin-right: 0; }
  .sigma-navbar .logo-text-wrap { display: none; }   /* l'icône suffit */
  .sigma-navbar .nav-right { gap: 8px; min-width: 0; }
  .sigma-navbar .admin-btn > span,
  .sigma-navbar .admin-chevron { display: none; }    /* l'avatar suffit */
  .sigma-navbar .admin-btn { padding: 0 6px; }
  .sigma-navbar .depot-select,
  .sigma-navbar .depot-static { max-width: 130px; }

  .sigma-content { padding: 14px 12px 84px; }        /* 84 : cf. bloc ≤768 px */
  .module-header { flex-wrap: wrap; gap: 10px; }
  .module-header__title { font-size: 20px; }
  .sigma-card { padding: 14px; }
  .page-header { flex-wrap: wrap; }
  .stat-row, .stat-row--3, .stat-row--5 { grid-template-columns: 1fr; }
  .sigma-search input { width: 100%; max-width: none; }
  .sg-tabs, .sigma-tabs { max-width: 100%; overflow-x: auto; }

  /* ── LES GRILLES À COLONNE FIXE, ÉCRITES EN STYLE INLINE ──────────────────
     C'est le défaut le plus coûteux de l'application sur petit écran, et il
     était invisible : la PAGE ne glissait pas, donc tout semblait aller. Mais
     une grille « 1fr 300px » dans 336 px ne laisse que 18 px au contenu
     principal. Mesuré : le tableau des livraisons vivait dans un hublot de
     16 px ; sur une fiche facture, le tableau des lignes démarrait à 413 px —
     hors écran, non défilable, INEXISTANT pour l'utilisateur. Sur la
     comptabilité, 601 px de colonnes (débit, crédit, solde) étaient purement
     amputés par le `overflow-x:hidden` du garde-fou.
     Le sélecteur d'attribut est le SEUL moyen de battre un style inline sans
     éditer 21 gabarits un par un. */
  .sigma-content [style*="display:grid"],
  .sigma-content [style*="display: grid"] { grid-template-columns: 1fr !important; }
  .sigma-content [style*="display:grid"] > *,
  .sigma-content [style*="display: grid"] > * { min-width: 0 !important; }
  .sigma-content [style*="display:flex"],
  .sigma-content [style*="display: flex"] { flex-wrap: wrap; }
  /* Grille définie en <style> et non en inline : hors de portée du sélecteur. */
  .sgf-prod { grid-template-columns: 1fr !important; }
}

/* ── TABLEAUX EMPILÉS ───────────────────────────────────────────────────────
   Sous 560 px, une liste à 10 colonnes ne se lit pas : elle se glisse, ou pire,
   elle est coupée. Chaque ligne devient une petite fiche, avec le nom de la
   colonne devant la valeur. Les libellés viennent du `<thead>`, recopiés par
   `sigma.js` — aucun gabarit à annoter (851 cellules auraient été à marquer à
   la main). Les tableaux de SAISIE (paniers de vente, réception, inventaire)
   sont exclus : leurs colonnes sont des champs alignés, l'empilement les
   casserait. */
@media screen and (max-width: 560px) {
  table.is-stacked,
  table.is-stacked tbody,
  table.is-stacked tr { display: block; width: 100%; }
  table.is-stacked thead { position: absolute; left: -9999px; }
  table.is-stacked tbody tr {
    border: 1px solid var(--border-card, #EAECF0);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface, #fff);
  }
  table.is-stacked tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: auto !important;
    min-width: 0;
    max-width: none;
    padding: 5px 0 !important;
    border: none !important;
    white-space: normal !important;
    text-align: right !important;
  }
  table.is-stacked tbody td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--text-faint, #98A2B3);
  }
  /* Une cellule sans libellé (actions, case à cocher) prend toute la largeur. */
  table.is-stacked tbody td:not([data-label])::before { content: none; }
  /* Un td[colspan] (état vide : icône + texte + bouton) n'est PAS une paire
     libellé/valeur : en flex, ses enfants se mettaient EN LIGNE et le bouton
     sortait de l'écran (photo SUNMI du 2026-08-29). Bloc, empilé, centré. */
  table.is-stacked tbody td[colspan] { display: block !important; text-align: center !important; }
  table.is-stacked tbody td[colspan]::before { content: none; }
  /* Les cellules bavardes (description, notes…) faisaient des fiches de
     6 lignes dans l'historique : UNE ligne, coupée par « … » — le détail
     complet reste sur l'écran du document lui-même. */
  table.is-stacked tbody td[data-label="Description"],
  table.is-stacked tbody td[data-label="Désignation"],
  table.is-stacked tbody td[data-label="Notes"] {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: right !important;
  }
  table.is-stacked tbody td[data-label="Description"]::before,
  table.is-stacked tbody td[data-label="Désignation"]::before,
  table.is-stacked tbody td[data-label="Notes"]::before {
    float: left;
  }
  /* Le conteneur de défilement n'a plus rien à faire défiler. */
  table.is-stacked { min-width: 0 !important; }
}

/* Cibles tactiles : au doigt, en plein soleil, 30 px ne se visent pas.
   `pointer:coarse` = doigt (pas souris) — la version bureau n'est pas touchée. */
@media (pointer: coarse) {
  .sigma-btn-primary, .sigma-btn-secondary, .sigma-btn-success,
  .sigma-btn-danger, .sigma-btn-ghost { min-height: 46px; }
  .sigma-btn-sm, .sigma-btn-icon { min-height: 38px; min-width: 38px; }
  .sigma-input, .sg-input, .sg-select, select, input[type="text"],
  input[type="number"], input[type="date"], input[type="search"],
  input[type="password"], input[type="tel"], input[type="email"] { min-height: 44px; }
  .sigma-dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .sigma-pagination a, .sigma-pagination span { min-height: 38px; min-width: 38px; }
}

/* ── BARRE D'ACTIONS BASSE ────────────────────────────────────────────────
   Sous 768 px, `.nav-links` disparaît (règle plus haut) sans rien à la place :
   un commercial n'avait plus AUCUN moyen de naviguer, sinon revenir à l'accueil
   par le logo. Cette barre rend ses modules atteignables, au pouce, en bas de
   l'écran — là où la main tient déjà l'appareil. */
.mobile-bar { display: none; }

@media (max-width: 768px) {
  /* UX POS (2026-08-21) : la barre est FIXE en bas — elle recouvrait donc la
     fin de chaque page : le dernier bouton d'un formulaire (« Enregistrer »,
     « Créer l'inventaire ») pouvait se retrouver SOUS la barre, inatteignable
     sans scroll de précision. <main> réserve désormais la hauteur de la barre
     (50 px de lien + 12 px de marges + la zone système du téléphone). */
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: #fff;
    border-top: 1px solid var(--border-field, #E3E6EB);
    box-shadow: 0 -2px 12px rgba(0,0,0,.07);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .mobile-bar a,
  .mobile-bar .mobile-bar__plus {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    min-height: 50px;
    text-decoration: none;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 10px;
    /* Le 5ᵉ emplacement est un BOUTON (il ouvre la feuille, il ne navigue pas) :
       on lui retire l'apparence native pour qu'il soit indistinguable des
       quatre liens voisins. */
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
  }
  .mobile-bar a i,
  .mobile-bar .mobile-bar__plus i { font-size: 17px; }
  .mobile-bar a.is-active,
  .mobile-bar .mobile-bar__plus.is-open { color: var(--navy, #3457A6); background: #EEF2FB; }
  .mobile-bar a span,
  .mobile-bar .mobile-bar__plus span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── FEUILLE « PLUS » ──────────────────────────────────────────────────────
   Sous 768 px, `.nav-links` est masqué et la barre basse ne tient que cinq
   entrées : Tableau de bord, Achats, Comptabilité (donc la Paie) et le menu
   profil n'étaient atteignables par AUCUN chemin depuis un téléphone. Cette
   feuille les porte, en plein écran, avec des lignes de 48 px : le doigt vise
   une bande large, pas une icône.

   Pourquoi une feuille et pas une 6ᵉ entrée à plat dans la barre : au-delà de
   cinq, les libellés (10,5 px + ellipsis) deviennent illisibles sur 360 px.
   Pourquoi pas non plus rallumer `.nav-links` : elle a `overflow-x:auto` et la
   barre du haut, collante, refusait de se comprimer — c'est exactement le
   défilement horizontal qu'on a payé pour éliminer (voir plus haut).

   `display` est piloté en JS (comme le menu profil du bureau) pour que la
   transition d'ouverture puisse partir après un reflow ; la classe `is-open`
   ne fait que glisser le panneau. */
.mobile-sheet { display: none; }

@media (max-width: 768px) {
  .mobile-sheet {
    position: fixed;
    /* `inset` n'existe qu'à partir de Chrome 87 : sur le POS la feuille
       n'était PAS étirée à l'écran. Longhands universels. */
    top: 0; right: 0; bottom: 0; left: 0;
    /* Au-dessus de la barre basse (1200) : la feuille la recouvre, sinon le
       bouton « Plus » resterait visible sous un panneau qui le remplace. */
    z-index: 1400;
  }
  .mobile-sheet__voile {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    transition: opacity .18s ease-out;
  }
  .mobile-sheet.is-open .mobile-sheet__voile { opacity: 1; }

  .mobile-sheet__panneau {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(16, 24, 40, .28);
    transform: translateY(100%);
    transition: transform .18s ease-out;
  }
  .mobile-sheet.is-open .mobile-sheet__panneau { transform: translateY(0); }

  .mobile-sheet__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-card, #EAECF0);
  }
  .mobile-sheet__qui {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #1d2939;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-sheet__avatar {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy, #3457A6);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
  }
  .mobile-sheet__fermer {
    flex: none;
    width: 44px; height: 44px;          /* cible tactile : 44 px minimum */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 10px;
    color: #667085;
    font-size: 17px;
    cursor: pointer;
  }

  .mobile-sheet__corps {
    overflow-y: auto;
    overflow-x: hidden;                 /* aucun défilement latéral, jamais */
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-sheet__section {
    margin: 0;
    padding: 12px 16px 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #98A2B3;
  }
  .mobile-sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #F4F5F7;
    color: #344054;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-sheet__item i {
    flex: none;
    width: 22px;
    text-align: center;
    font-size: 15px;
    color: #98A2B3;
  }
  .mobile-sheet__item.is-active { background: #EEF2FB; color: var(--navy, #3457A6); }
  .mobile-sheet__item.is-active i { color: var(--navy, #3457A6); }
  .mobile-sheet__item--danger { color: var(--red, #C0392B); }
  .mobile-sheet__item--danger i { color: var(--red, #C0392B); }
}

/* Filet : sur un poste de bureau la feuille n'a aucun sens (les liens sont dans
   la barre du haut). Le JS pose un `display:block` en style inline — ce
   !important est ce qui l'empêche de survivre à un redimensionnement de
   fenêtre alors qu'elle était ouverte. */
@media (min-width: 769px) {
  .mobile-sheet { display: none !important; }
}

/* ===== CUSTOM ADMIN DROPDOWN ===== */
.sigma-dropdown {
  position: relative;
}

.sigma-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 210px;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18);
  padding: 6px;
  list-style: none;
  margin: 0;
  z-index: 9999;
  /* Le menu profil d'un superuser est plus haut que l'écran : sans plafond,
     le bas (« Caisse principale »…) restait hors de portée. On borne NETTEMENT
     au-dessus du bord (le coin arrondi + l'ombre disent « panneau borné ») et
     l'ascenseur vit DANS le menu — toujours VISIBLE (Safari le cache par
     défaut jusqu'au premier geste : personne ne devinait qu'on pouvait
     défiler, test utilisateur du 2026-08-14). */
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sigma-dropdown-menu::-webkit-scrollbar { width: 9px; }
.sigma-dropdown-menu::-webkit-scrollbar-thumb {
  background: #D0D5DD;
  border-radius: 8px;
  border: 2px solid #ffffff;   /* respiration : le pouce ne colle pas au bord */
}
.sigma-dropdown-menu::-webkit-scrollbar-track { background: transparent; }

.sigma-dropdown-menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.sigma-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  transition: background 0.12s;
  white-space: nowrap;
}

.sigma-dropdown-item i { color: var(--text-faint); width: 16px; text-align: center; }

.sigma-dropdown-item:hover {
  background: var(--bg);
  color: var(--text-strong);
}

.sigma-dropdown-item--danger { color: var(--red); }
.sigma-dropdown-item--danger i { color: var(--red); }

.sigma-dropdown-item--danger:hover {
  background: var(--red-bg);
  color: #A93226;
}

.sigma-dropdown-divider {
  height: 1px;
  background: var(--sep);
  margin: 5px 4px;
  list-style: none;
}

.sigma-dropdown-label {
  padding: 6px 12px 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-faint);
  list-style: none;
}

.admin-chevron {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.sigma-dropdown.is-open .admin-chevron {
  transform: rotate(180deg);
}

/* Keep Bootstrap dropdown-menu hidden if it slips through */
.dropdown-menu {
  display: none !important;
}

/* ============================================================
   DESIGN SYSTEM v2 — COMPOSANTS CANONIQUES
   Classes neuves (préfixe sigma-* / module-header / stat-* / data-table).
   Inertes tant qu'une vue ne les consomme pas. Voir DESIGN_SYSTEM.md.
   ============================================================ */

/* --- En-tête de module (titre = fonction seule + action à droite) --- */
.module-header { display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:20px; }
.module-header__title { margin:0; font-size:24px; font-weight:800; color:var(--text);
  line-height:1.15; display:inline-flex; align-items:center; gap:8px; }
.module-header__help { width:24px; height:24px; border:0; background:transparent; color:var(--text-faint);
  cursor:help; font-size:15px; padding:0; line-height:1; }
.module-header__help:hover { color:var(--navy); }

/* --- Onglets pills (composant unique) — actif = primaire navy --- */
.sg-tabs { display:inline-flex; background:#fff; border:1px solid var(--border-card); border-radius:14px;
  box-shadow:var(--card-shadow); padding:6px; gap:4px; }
.sg-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--text-secondary); text-decoration:none; white-space:nowrap; transition:background .12s; }
.sg-tab:hover { background:var(--bg); }
.sg-tab.is-active { background:var(--navy); color:#fff; }
.sg-tab .count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:10px; background:var(--neutral-bg); color:var(--neutral-text); font-size:11px; font-weight:800; }
.sg-tab.is-active .count { background:rgba(255,255,255,.25); color:#fff; }

/* --- Badge de statut UNIQUE --- */
.sigma-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; }
.sigma-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.sigma-badge--success { background:var(--success-bg); color:var(--success-text); }
.sigma-badge--warning { background:var(--warning-bg); color:var(--warning-text); }
.sigma-badge--danger  { background:var(--danger-bg);  color:var(--danger-text); }
.sigma-badge--info    { background:var(--info-bg);    color:var(--info-text); }
.sigma-badge--neutral { background:var(--neutral-bg); color:var(--neutral-text); }

/* --- Boutons : hiérarchie unique --- */
.sigma-btn-primary, .sigma-btn-secondary, .sigma-btn-success, .sigma-btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px;
  border-radius:11px; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none;
  border:1.5px solid transparent; font-family:inherit; transition:background .12s, border-color .12s; white-space:nowrap; }
.sigma-btn-primary  { background:var(--navy); color:var(--on-primary); }
.sigma-btn-primary:hover  { background:var(--primary-hover); }
.sigma-btn-primary:active { background:var(--primary-active); }
.sigma-btn-secondary { background:#fff; color:var(--text-secondary); border-color:var(--border-field); }
.sigma-btn-secondary:hover { background:var(--bg); border-color:var(--border-strong); }
.sigma-btn-success { background:var(--green); color:#fff; }
.sigma-btn-success:hover { background:var(--green-hover); }
.sigma-btn-danger { background:#fff; color:var(--red); border-color:var(--red-border); }
.sigma-btn-danger:hover { background:var(--red-bg); }
.sigma-btn-primary i, .sigma-btn-secondary i, .sigma-btn-success i, .sigma-btn-danger i { font-size:16px; line-height:1; }
.sigma-btn-primary:focus-visible, .sigma-btn-secondary:focus-visible,
.sigma-btn-success:focus-visible, .sigma-btn-danger:focus-visible { outline:2px solid transparent; box-shadow:0 0 0 3px var(--focus-ring); }
/* Bouton icône seul (actions de ligne secondaires) — taille unique */
.sigma-btn-icon { width:30px; height:30px; border:1.5px solid var(--border-field); border-radius:8px; background:#fff;
  color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; font-size:13px; }
.sigma-btn-icon:hover { background:var(--bg); border-color:var(--border-strong); }
/* Variante compacte (actions de ligne / en-têtes de tableau) ~30px */
.sigma-btn-sm { height:30px; padding:0 12px; font-size:12.5px; border-radius:8px; gap:6px; }
.sigma-btn-sm i { font-size:13px; }

/* --- Contrôles de filtre canoniques (selects / inputs hors formulaires) --- */
.sg-select, .sg-input { height:40px; box-sizing:border-box; border:1px solid var(--border-field); border-radius:10px;
  padding:0 12px; font-size:13.5px; font-weight:600; color:var(--text-strong); background:#fff;
  font-family:inherit; transition:border-color .15s, box-shadow .15s; outline:none; }
.sg-select:focus, .sg-input:focus { border-color:var(--navy); box-shadow:0 0 0 3px var(--focus-ring); }
.sg-select:hover:not(:focus), .sg-input:hover:not(:focus) { border-color:var(--border-strong); }
.sg-select { appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
  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 fill='%23667085' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.sg-field-label { display:block; font-size:11px; letter-spacing:.3px; text-transform:uppercase; font-weight:700; color:var(--text-faint); margin-bottom:6px; }

/* --- Rangée de KPI + StatCard --- */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
.stat-row--3 { grid-template-columns:repeat(3,1fr); }
.stat-row--5 { grid-template-columns:repeat(5,1fr); }
/* Deux colonnes sur tablette… mais PAS en dessous : le palier 620 px plus haut
   demandait 1 colonne et cette règle, écrite après à spécificité égale, le
   gagnait — les KPI restaient à 2 colonnes de 156 px sur un POS, trop étroites
   pour un montant. Le `min-width` referme la fenêtre. */
@media (min-width:621px) and (max-width:980px){
  .stat-row, .stat-row--3, .stat-row--5 { grid-template-columns:repeat(2,1fr); }
}
.stat-card { background:var(--surface); border:1px solid var(--border-card); border-radius:16px; box-shadow:var(--card-shadow); padding:18px 20px; }
.stat-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.stat-card__label { font-size:11px; letter-spacing:.4px; text-transform:uppercase; font-weight:700; color:var(--text-faint); }
.stat-card__icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }
.stat-card__icon--primary { background:var(--primary-soft); color:var(--navy); }
.stat-card__icon--success { background:var(--success-bg); color:var(--green); }
.stat-card__icon--warning { background:var(--warning-bg); color:var(--warning); }
.stat-card__icon--danger  { background:var(--danger-bg);  color:var(--red); }
.stat-card__icon--info    { background:var(--info-bg);    color:var(--info); }
.stat-card__icon--neutral { background:var(--neutral-bg); color:var(--neutral-text); }
.stat-card__value { font-size:1.7rem; font-weight:800; color:var(--text-strong); line-height:1.1; margin-top:14px; font-variant-numeric:tabular-nums; }
.stat-card__value small { font-size:.6rem; color:var(--text-faint); font-weight:700; }
.stat-card__value--success { color:var(--green); } .stat-card__value--danger { color:var(--red); }
.stat-card__sub { font-size:11.5px; color:var(--text-faint); font-weight:700; margin-top:2px; }

/* --- Tableau de données --- */
.data-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th { text-align:left; font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--text-faint);
  font-weight:700; padding:12px 16px; white-space:nowrap; background:var(--bg); }
.data-table td { padding:13px 16px; border-top:1px solid var(--sep-2); vertical-align:middle; color:var(--text-strong); }
.data-table tbody tr:hover td { background:#FAFBFC; }
.data-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.data-table .col-actions { text-align:right; white-space:nowrap; }
.data-table .cell-ref { font-weight:700; color:var(--navy); text-decoration:none; }
.data-table .cell-sub { font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.data-table .row-actions { display:inline-flex; align-items:center; gap:7px; justify-content:flex-end; }

/* --- Filtres-chips horizontaux (sous-filtre de statut, modules sans sidebar) --- */
.subfilter { display:flex; gap:4px; flex-wrap:wrap; }
.subfilter a { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:10px; border:1.5px solid transparent;
  color:var(--text-secondary); font-size:13px; font-weight:700; text-decoration:none; }
.subfilter a:hover { background:var(--bg); }
.subfilter a.is-active { background:var(--primary-soft); border-color:#cdd9f3; color:var(--info-text); }
.subfilter a .count { font-size:11px; font-weight:800; color:var(--text-faint); }
.subfilter a.is-active .count { color:var(--info-text); }

/* Masqué sur téléphone/POS : décor qui vole la place des boutons. */
@media (max-width: 768px) { .cache-mobile { display: none !important; } }

/* ═════════ REPLI « no-flexgap » — vieux Chromium des POS SUNMI ═════════
   Le `gap` des FLEXBOX n'existe que depuis Chrome 84 (mi-2020). Le navigateur
   embarqué du SUNMI V2s l'ignore : tout ce que le site espace avec `gap` s'y
   retrouvait COLLÉ — cloche contre avatar, icônes contre libellés, modes de
   paiement soudés. Un petit script dans <head> pose la classe `no-flexgap` sur
   <html> quand le navigateur ne sait pas espacer ; les règles ci-dessous
   redonnent alors l'espace avec des marges. Les navigateurs modernes ne voient
   jamais ces règles. NB : le gap des GRILLES, lui, marche depuis Chrome 66 —
   les grilles sont donc exclues.

   Deux familles :
   1. les COMPOSANTS nommés (barre du haut, boutons, badges, tiroir…) ;
   2. une heuristique pour les ~110 gabarits qui posent `gap` en style inline —
      marge horizontale par défaut, verticale quand le style dit `column`. */
.no-flexgap .logo-wrap > * + *,
.no-flexgap .alert-item > * + * { margin-left: 11px; }
.no-flexgap .nav-right > * + * { margin-left: 10px; }
.no-flexgap .admin-btn > * + *,
.no-flexgap .sigma-card-title > * + *,
.no-flexgap .sigma-alert > * + * { margin-left: 9px; }
.no-flexgap .depot-static > * + *,
.no-flexgap .nav-link > * + *,
.no-flexgap .sigma-tab > * + *,
.no-flexgap .subfilter a > * + *,
.no-flexgap .row-actions > * + * { margin-left: 7px; }
.no-flexgap .sigma-badge > * + *,
.no-flexgap .status-pill > * + *,
.no-flexgap .sigma-btn-sm > * + * { margin-left: 6px; }
.no-flexgap .badge-green > * + *, .no-flexgap .badge-red > * + *,
.no-flexgap .badge-orange > * + *, .no-flexgap .badge-blue > * + *,
.no-flexgap .sigma-pagination > * + * { margin-left: 5px; }
.no-flexgap .sigma-btn-primary > * + *, .no-flexgap .sigma-btn-secondary > * + *,
.no-flexgap .sigma-btn-success > * + *, .no-flexgap .sigma-btn-danger > * + *,
.no-flexgap .btn-sigma-primary > * + *, .no-flexgap .btn-sigma-success > * + *,
.no-flexgap .btn-sigma-outline > * + *, .no-flexgap .btn-sigma-neutral > * + *,
.no-flexgap .btn-sigma-danger > * + *,
.no-flexgap .stat-card__head > * + *,
.no-flexgap .module-header__title > * + *,
.no-flexgap .sg-tab > * + * { margin-left: 8px; }
.no-flexgap .module-header > * + *,
.no-flexgap .page-header > * + * { margin-left: 12px; }
.no-flexgap .sigma-dropdown-item > * + *,
.no-flexgap .mobile-sheet__item > * + *,
.no-flexgap .sigma-info-banner > * + * { margin-left: 11px; }
.no-flexgap .mobile-sheet__tete > * + *,
.no-flexgap .mobile-sheet__qui > * + * { margin-left: 10px; }
/* La barre basse empile icône puis libellé : l'espace est VERTICAL. */
.no-flexgap .mobile-bar a > * + *,
.no-flexgap .mobile-bar .mobile-bar__plus > * + * { margin-top: 3px; margin-left: 0; }
.no-flexgap table.is-stacked tbody td > * + * { margin-left: 12px; }
/* Icône suivie de TEXTE NU (<i></i> Libellé) : les règles « * + * »
   ci-dessus ne voient que des ÉLÉMENTS voisins — un nœud texte n'en est pas
   un, et le flex avale l'espace typographique. D'où « ←Retour », « 📄Facture »,
   « +Nouvelle vente » soudés sur le POS. On redonne l'espace à l'icône. */
.no-flexgap .sigma-btn-primary > i:first-child,
.no-flexgap .sigma-btn-secondary > i:first-child,
.no-flexgap .sigma-btn-success > i:first-child,
.no-flexgap .sigma-btn-danger > i:first-child,
.no-flexgap .btn-sigma-primary > i:first-child,
.no-flexgap .btn-sigma-success > i:first-child,
.no-flexgap .btn-sigma-outline > i:first-child,
.no-flexgap .btn-sigma-neutral > i:first-child,
.no-flexgap .btn-sigma-danger > i:first-child,
.no-flexgap .sigma-btn-sm > i:first-child,
.no-flexgap .sigma-card-title > i:first-child,
.no-flexgap .sigma-alert > i:first-child,
.no-flexgap .sigma-info-banner > i:first-child,
.no-flexgap .admin-btn > i:first-child,
.no-flexgap .nav-link > i:first-child,
.no-flexgap .radio-group label > i,
.no-flexgap .radio-na > i:first-child,
.no-flexgap button > i:first-child,
.no-flexgap a.sigma-btn-primary > i:first-child,
.no-flexgap [style*="gap:"] > i:first-child { margin-right: 7px; }
/* Les radios de mode : l'input puis l'icône puis le texte nu. */
.no-flexgap .radio-group label > input { margin-right: 6px; }
/* Une rangée de chips/boutons qui PASSE À LA LIGNE (flex-wrap) : sans le gap,
   les lignes se touchent. Marge verticale de sécurité. */
.no-flexgap .module-header > * { margin-top: 4px; margin-bottom: 4px; }
.no-flexgap .radio-group > * { margin-top: 3px; margin-bottom: 3px; margin-right: 6px; }

/* Heuristique des styles inline. L'espace exact importe moins que l'espace
   tout court : 8 px lisibles valent mieux que 0 px collés. */
.no-flexgap [style*="gap:"]:not([style*="grid"]):not([style*="column"]) > * + * { margin-left: 8px; }
.no-flexgap [style*="column"][style*="gap:"]:not([style*="grid"]) > * + * { margin-top: 10px; margin-left: 0; }



/* ═════════ Ligne de paiement (encaissement multi-modes) ═════════
   Avant : grid en style INLINE, que la règle « [style*=display:grid] →
   1 colonne sous 620 px » aplatissait — Mode, Montant puis un ✕ ORPHELIN
   l'un sous l'autre sur le POS. La classe échappe à cette règle : sur
   petit écran, le Mode prend la largeur, et le ✕ reste À CÔTÉ du montant. */
.mob-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}
@media (max-width: 620px) {
  .mob-ligne { grid-template-columns: 1fr 44px; }
  .mob-ligne > div:first-child { grid-column: 1 / -1; }
}


/* ═════════ REPLI « pas de display:grid » — Chromium < 57 du POS ═════════
   Le navigateur du SUNMI est ANTÉRIEUR aux grilles CSS : les colonnes d'une
   grille s'y empilent en blocs pleine largeur, SANS le gap — d'où les panneaux
   du dashboard caisse (Nouvel encaissement / Vente mobile / Caisse du jour),
   les cartes KPI et les paires de champs soudés les uns aux autres. @supports
   est, lui, compris depuis Chrome 28 : ces marges ne s'appliquent QUE là où la
   grille n'existe pas — les navigateurs modernes ne les voient jamais. */
@supports not (display: grid) {
  .caisse-grid > *,
  .stat-row > *,
  .form-grid-2 > *,
  [style*="display:grid"] > * { margin-bottom: 14px; }
  .mob-ligne > * { margin-bottom: 8px; }
  .mob-ligne .mob-del { margin-bottom: 12px; }
}