/* Floramaar UX Lab — design system partagé
   Base tokens repris de public/assets/css/app.css, affinés pour la V2 pro. */

:root{
  --cr:#FAF7F2; --be:#F5EFE5; --go:#C8A97A; --gd:#9E7D51; --br:#3D2B1F; --bl:#6B4C38;
  --wh:#fff;
  --tx:#2C1F14; --tm:#7A6555; --tl:#A89080;
  --bo:#E5DACB; --bs:#D2C2AC;
  --sg:#2D7A4F; --sb:#E8F5EE;
  --wo:#B8540A; --wb:#FEF3E8;
  --dg:#A32020; --db:#FDEAEA;
  --ya:#C89000; --yb:#FFFBEB;
  --iv:#3E6FB0; --ivb:#EAF1FB; /* bleu info, nouveau accent V2 */
  --vi:#7A5AA8; --vib:#F1EAF9; /* violet — demandes de dépôt (distinct de "À réceptionner" et "Réassort") */
  --r:12px; --rs:8px; --rl:18px;
  --sh:0 10px 32px rgba(44,31,20,.07);
  --sh-lg:0 16px 48px rgba(44,31,20,.14);
  --sh-sm:0 2px 8px rgba(44,31,20,.08);

  /* ---- échelle typographique (micro-lot Typographie 1 — base seulement, pas encore
     appliquée page par page). Usages prévus :
     --fs-page    : titre de page (topbar h1)
     --fs-section : titre de section dans le contenu (h2 de tier, titres de bloc)
     --fs-card    : titre de carte (.card-head h3)
     --fs-body    : corps de texte / cellules de tableau
     --fs-body-sm : texte secondaire (.muted, sous-lignes)
     --fs-meta    : labels, dates, compteurs discrets
     Boutons, badges et chips ne sont PAS concernés par cette échelle : leurs tailles
     (définies dans .btn/.btn-sm/.badge/.chip) sont déjà cohérentes, gérées séparément. */
  --fs-page:19px; --fs-section:15px; --fs-card:14px;
  --fs-body:13px; --fs-body-sm:12px; --fs-meta:11px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--cr);
  color:var(--tx);
  font-size:14px;
  line-height:1.55;
}
h1,h2,h3,h4{margin:0 0 4px;font-weight:700;color:var(--br)}
p{margin:0 0 8px;color:var(--tm)}
a{color:inherit}

/* ---------- layout shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:230px;flex:0 0 230px;background:var(--br);color:var(--wh);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .brand .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(140deg,var(--go),var(--gd));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--br);font-size:16px}
.sidebar .brand .name{font-weight:700;font-size:15px;color:var(--wh)}
.sidebar .brand .tag{font-size:11px;color:var(--go);opacity:.85}
.sidebar nav{flex:1;overflow-y:auto;padding:14px 10px}
.sidebar .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--go);opacity:.7;padding:14px 10px 6px}
.sidebar a.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rs);
  color:rgba(255,255,255,.78);text-decoration:none;font-size:13.5px;margin-bottom:2px;
}
.sidebar a.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a.nav-item.active{background:var(--go);color:var(--br);font-weight:700}
.sidebar a.nav-item .ic{width:18px;text-align:center;font-size:14px}
/* ---- icônes de navigation SVG (Lot Icon 1) : remplace les emoji de sidebar/tabbar,
   trait fin, currentColor pour hériter des états hover/active existants ---- */
.nav-icon{display:inline-flex;align-items:center;justify-content:center}
.nav-icon svg{width:16px;height:16px;stroke:currentColor;display:block}
.sidebar .foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--tl);display:flex;justify-content:space-between;align-items:center}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--bo);
  padding:16px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.topbar h1{font-size:var(--fs-page)}
.topbar .sub{font-size:12.5px;color:var(--tm);margin:0}
/* Plafond de largeur desktop/laptop : évite que tableaux/grilles s'étirent
   bord à bord sur grand écran. N'a d'effet qu'au-delà d'environ 1710px de
   largeur d'écran total (sidebar 230px + 1480px de contenu) — aucun impact
   sur laptop standard, tablette ou mobile. */
.content{padding:24px 28px 48px;flex:1;max-width:1480px;width:100%;margin-inline:auto}

/* ---------- lab-only chrome (not part of the app) ---------- */
.lab-tag{
  position:fixed;bottom:14px;right:14px;background:var(--br);color:var(--go);
  font-size:11px;padding:6px 12px;border-radius:20px;box-shadow:var(--sh);z-index:50;
  letter-spacing:.03em;
}
.lab-back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tm);text-decoration:none;margin-bottom:14px}
.lab-back:hover{color:var(--gd)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:var(--rs);padding:9px 16px;
  font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:filter .12s, transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(140deg,var(--go),var(--gd));color:var(--br)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-dark{background:var(--br);color:#fff}
.btn-dark:hover{filter:brightness(1.15)}
.btn-outline{background:#fff;border-color:var(--bs);color:var(--tx)}
.btn-outline:hover{border-color:var(--gd);color:var(--gd)}
.btn-ghost{background:transparent;color:var(--tm)}
.btn-ghost:hover{background:var(--be)}
.btn-danger{background:var(--db);color:var(--dg)}
.btn-danger:hover{filter:brightness(.97)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-icon{padding:8px;width:34px;height:34px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.01em}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-green{background:var(--sb);color:var(--sg)}
.badge-red{background:var(--db);color:var(--dg)}
.badge-orange{background:var(--wb);color:var(--wo)}
.badge-yellow{background:var(--yb);color:var(--ya)}
.badge-gold{background:#F7EFE0;color:var(--gd)}
.badge-grey{background:var(--be);color:var(--tm)}
.badge-blue{background:var(--ivb);color:var(--iv)}

/* ---- points de statut (Lot Icon 2) : remplace les emoji couleur redondants avec le
   code couleur déjà porté ailleurs (bordure, cnt-pill) — mêmes tokens que les badges. ---- */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-bottom:1px}
.status-dot-red{background:var(--dg)}
.status-dot-orange{background:var(--wo)}
.status-dot-yellow{background:var(--ya)}
.status-dot-green{background:var(--sg)}
.badge-violet{background:var(--vib);color:var(--vi)}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--bo);border-radius:var(--r);box-shadow:var(--sh);padding:18px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px}
.card-head h3{font-size:var(--fs-card)} /* était 14.5px, quasi identique */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.stat{background:#fff;border:1px solid var(--bo);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;border-left:4px solid var(--go)}
.stat.is-warn{border-left-color:var(--wo)}
.stat.is-danger{border-left-color:var(--dg)}
.stat.is-good{border-left-color:var(--sg)}
.stat .lbl{font-size:11.5px;color:var(--tm);text-transform:uppercase;letter-spacing:.05em}
.stat .val{font-size:26px;font-weight:800;color:var(--br);margin-top:4px}
.stat .delta{font-size:12px;color:var(--tm);margin-top:2px}

/* ---------- tables ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tm);padding:10px 12px;border-bottom:2px solid var(--bo)}
table.tbl td{padding:12px;border-bottom:1px solid var(--bo);vertical-align:middle}
table.tbl tr:hover td{background:var(--be)}
table.tbl tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--bo);background:#fff;box-shadow:var(--sh)}
.table-wrap table.tbl{border:none}
.table-wrap table.tbl th:first-child,.table-wrap table.tbl td:first-child{padding-left:16px}

/* ---------- filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;
  border:1px solid var(--bo);background:#fff;color:var(--tm);font-size:12.5px;font-weight:600;cursor:pointer;
}
.chip.active{background:var(--br);border-color:var(--br);color:#fff}
.chip .cnt{background:rgba(0,0,0,.08);border-radius:10px;padding:1px 6px;font-size:11px}
.chip.active .cnt{background:rgba(255,255,255,.18)}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bo);border-radius:var(--rs);padding:8px 12px;min-width:220px}
.search input{border:none;outline:none;font-size:13px;flex:1;background:transparent}
select.sel,input.inp{border:1px solid var(--bo);border-radius:var(--rs);padding:8px 12px;font-size:13px;background:#fff;color:var(--tx)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(44,31,20,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.overlay.open{display:flex}
.modal{background:#fff;border-radius:var(--rl);box-shadow:var(--sh-lg);width:100%;max-width:460px;max-height:90vh;overflow-y:auto}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--bo);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:16px}
.modal-body{padding:20px 22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--bo);display:flex;justify-content:flex-end;gap:8px}
.x-close{background:none;border:none;font-size:18px;color:var(--tm);cursor:pointer;line-height:1}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--bo);margin-bottom:20px;overflow-x:auto}
.tab{padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--tm);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab:hover{color:var(--gd)}
.tab.active{color:var(--br);border-bottom-color:var(--go)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---------- misc ---------- */
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--go),var(--gd));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--br);font-size:13px;flex:0 0 38px}
.divider{height:1px;background:var(--bo);margin:16px 0}
.muted{color:var(--tm);font-size:var(--fs-body-sm)} /* était 12.5px, quasi identique */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--tm);margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em}
.field .hint{font-size:11.5px;color:var(--tl);margin-top:4px}
.progress{height:6px;border-radius:4px;background:var(--be);overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--go),var(--gd))}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--bo);border-radius:20px;overflow:hidden}
.stepper button{width:32px;height:32px;border:none;background:#fff;color:var(--br);font-size:16px;cursor:pointer}
.stepper button:hover{background:var(--be)}
.stepper span{width:36px;text-align:center;font-weight:700;font-size:14px}
.empty{text-align:center;padding:40px 20px;color:var(--tl)}
.empty .ic{font-size:32px;margin-bottom:8px}

/* mobile bottom tabbar (used in partner mobile views, and admin mobile views via .tabbar-more-*) */
.tabbar{display:none}
@media (max-width:820px){
  .sidebar{display:none}
  .tabbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--br);z-index:40;
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;color:rgba(255,255,255,.65);text-decoration:none;font-size:10.5px}
  .tabbar a.active{color:var(--go)}
  .tabbar a .ic{font-size:17px}
  .tabbar a .nav-icon svg{width:18px;height:18px}
  .content{padding-bottom:80px}
}

/* ---- tabbar "Plus" : panneau de liens secondaires, réutilisable sur toutes les pages admin ----
   Le bouton .tabbar-more-btn vit à l'intérieur de .tabbar (donc déjà masqué en desktop).
   Le panneau lui-même reste caché par défaut ; seule la classe .open (ajoutée en JS) l'affiche,
   et cet ajout n'est déclenché que par le bouton, lui-même inatteignable au-dessus de 820px. */
.tabbar-more-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;
  background:none;border:none;color:rgba(255,255,255,.65);font-size:10.5px;font-family:inherit;cursor:pointer;
}
.tabbar-more-btn .ic{font-size:17px}
.tabbar-more-btn.active{color:var(--go)}

.tabbar-more-overlay{position:fixed;inset:0;background:rgba(44,31,20,.4);z-index:49;display:none}
.tabbar-more-panel{
  position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.2);z-index:50;padding:8px 0 90px;
  transform:translateY(100%);transition:transform .2s ease;
}
.tabbar-more-overlay.open{display:block}
.tabbar-more-overlay.open .tabbar-more-panel{transform:translateY(0)}
.tabbar-more-panel a{display:flex;align-items:center;gap:12px;padding:14px 20px;color:var(--tx);text-decoration:none;font-size:14px;border-bottom:1px solid var(--bo)}
.tabbar-more-panel a:last-child{border-bottom:none}
.tabbar-more-panel a .ic{font-size:18px;width:22px;text-align:center}
.tabbar-more-panel a .nav-icon svg{width:18px;height:18px}