/* ============ INVENTAIRE — style premium ============ */
.inventory-page{
  --card-bg: rgba(255,255,255,0.03);
  --card-bg-strong: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.10);
  --border-soft: rgba(255,255,255,0.06);
  --text-dim: rgba(255,255,255,0.65);
  --chip-bg: rgba(80,120,255,.12);
  --chip-text: #bcd1ff;
  --accent: #87b5ff;
}

/* entête */
.inventory-header{
  display:flex;
  align-items:flex-end;
  gap:.75rem;
  margin-bottom:1.25rem;   /* même marge que .page-header global */
}

.inventory-header .page-title{
  margin: 0;              /* pas de marge spéciale */
  font-size: 1.4rem;      /* même taille que les autres */
  font-weight: 600;
}
.inventory-header .success-recap{
  background: var(--card-bg); border:1px solid var(--border);
  padding:.5rem .75rem; border-radius:.6rem; font-size:.9rem; color:var(--text-dim);
}

/* toggle */
.inv-toggle{ display:flex; gap:.4rem; margin:.5rem 0 1rem; }
.inv-toggle .pill{
  padding:.4rem .7rem; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:var(--text-dim); font-weight:600;
}
.inv-toggle .pill.active{
  background:var(--card-bg-strong); color:#fff; border-color:var(--border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Sections */
.inv-section{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius: .9rem;
  padding: .75rem .9rem;
  margin-bottom: .9rem;
}
.inv-sec-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px dashed var(--border-soft); padding-bottom:.5rem; margin-bottom:.6rem;
}
.inv-sec-title{ font-weight:700; letter-spacing:.3px; }

/* Groupes */
.inv-group{ margin-bottom:.6rem; }
.inv-group-head{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.3rem .2rem;
}
.inv-group-head .title{
  font-weight:700; color:#fff; letter-spacing:.2px;
}
.inv-group-head .chips{ display:flex; flex-wrap:wrap; gap:.35rem; }

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .5rem; border-radius:999px; font-size:.75rem;
  background:var(--chip-bg); color:var(--chip-text); border:1px solid rgba(120,150,255,.18);
}

.chip--zero{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(220,235,255,.55);
}

.chip--has{
  border-color: rgba(16,185,129,.28);
  background: rgba(16,185,129,.10);
  color: rgba(199,255,235,.92);
}


/* badge expiration */
.badge-exp{ color:#ffca5c; font-size:.95em; }

/* Tableau */
.inv-table{
  width:100%; border-collapse:separate; border-spacing:0 .4rem;
}
.inv-table thead th{
  font-size:.80rem; color:var(--text-dim); font-weight:600; padding:0 .35rem .2rem;
  text-align:left;
}
.inv-table tbody tr{
  background: rgba(255,255,255,0.02);
  border:1px solid var(--border);
  outline:1px solid transparent;
  transition: .18s ease;
}
.inv-table tbody tr:hover{
  background: rgba(255,255,255,0.04);
  outline-color: rgba(255,255,255,0.04);
}
.inv-table td{
  padding:.55rem .6rem;
  vertical-align:middle;
}

/* Largeurs de colonnes pour meilleur alignement */
.inv-table th:nth-child(1),
.inv-table td:nth-child(1){
  width: 38%;          /* Nom/compagnie un peu plus compact */
}

.inv-table th:nth-child(2),
.inv-table td:nth-child(2){
  width: 14%;          /* DIN bien aligné */
}

.inv-table th:nth-child(3),
.inv-table td:nth-child(3){
  width: 18%;          /* Badge fabricant · format */
}

.inv-table th:nth-child(4),
.inv-table td:nth-child(4){
  width: 10%;          /* Qté */
}

/* Min / Max laissent le reste */


.inv-table td .pname{ font-weight:600; letter-spacing:.2px; }
.inv-table td .meta{ color:var(--text-dim); font-size:.8rem; margin-top:.15rem; }
.inv-table td.actions{ text-align:right; }

/* === Sous-tableau des détails (Qté / Lot / Expiration / Datamatrix) === */
.inv-detail-wrap table {
  table-layout: fixed;
}

.inv-detail-wrap th:nth-child(1),
.inv-detail-wrap td:nth-child(1) {
  width: 10%;          /* Qté */
  text-align: left;
}

.inv-detail-wrap th:nth-child(2),
.inv-detail-wrap td:nth-child(2) {
  width: 18%;          /* Lot */
}

.inv-detail-wrap th:nth-child(3),
.inv-detail-wrap td:nth-child(3) {
  width: 20%;          /* Expiration */
}

.inv-detail-wrap th:nth-child(4),
.inv-detail-wrap td:nth-child(4) {
  width: 52%;          /* Datamatrix + boutons */
}


/* Boutons compacts */
.btn-xs, .inv-table .ghost-btn{
  padding:.28rem .5rem; border-radius:.6rem; font-size:.78rem;
}


/* Fin INVENTAIRE */

/* Lignes placeholder (stock 0) – déjà gérées en inline pour compatibilité,
   mais tu peux utiliser cette classe si tu préfères */
.inv-table tr.placeholder {
  opacity:.70;
  filter:grayscale(.2);
}
/* Entête de groupe cliquable + caret */
.inv-group-head{ user-select:none; }
.inv-group-head .title{ display:flex; align-items:center; gap:.35rem; }

.inventory-context-banner {
  margin-bottom: 0.75rem;
  display: inline-flex !important;   /* force le mode “pilule” */
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.7rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  font-size: 0.82rem;
  color: #e2e8f0;

  width: auto !important;           /* 🔥 ne prend plus toute la ligne */
  max-width: max-content;           /* s’ajuste au texte */
}


.inventory-context-banner .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4ade80; /* green */
}

.inventory-context-banner.remote {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.inventory-context-banner.remote .dot {
  background: #f87171; /* red */
}

.inventory-context-banner.hidden {
  display: none !important;
}



.sec-metric--global.is-clickable{ cursor:pointer; }
.sec-metric--global.is-clickable:hover{
  filter: brightness(1.06);
  border-color: rgba(108,204,255,.35);
}
.sec-metric--global.is-clickable:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(108,204,255,.18);
}

/* =========================================================
   INVENTAIRE — TOP (CLEAN v2.1)
   Objectif:
   - Col gauche OK
   - Col scan + historique PLUS ÉTROITE (surtout historique)
   - Col droite PLUS LARGE pour badges (et badges plus gros)
   ========================================================= */

/* ---------- GRID LAYOUT ---------- */
.inventory-page .inv-top{
  display: grid;

  /* AVANT (trop d'espace pour history):
     clamp(210px, 18vw, 270px)
     minmax(220px, 0.62fr)
     minmax(320px, 1.25fr)
     clamp(200px, 16vw, 260px);
  */

  /* APRÈS:
     - scan un peu plus tight
     - history nettement plus tight
     - colonne droite plus large
  */
  grid-template-columns:
    clamp(210px, 18vw, 270px)     /* gauche */
    minmax(200px, 0.48fr)         /* scan (plus étroit) */
    minmax(260px, 0.78fr)         /* history (plus étroit) */
    clamp(280px, 24vw, 360px);    /* droite (plus large) */

  grid-template-rows: auto auto;
  gap: 12px 8px;
  align-items: start;
  margin-bottom: .9rem;
}

/* important pour shrink dans grid */
.inventory-page .inv-top > .inv-slot{ min-width: 0; }

/* placement (inchangé) */
.inventory-page .inv-access{ grid-column: 1; grid-row: 1; }
.inventory-page .inv-tabs{   grid-column: 1; grid-row: 2; }
/*.inventory-page .inv-scan{   grid-column: 2; grid-row: 1 / span 2; }*/
/*.inventory-page .inv-history{grid-column: 3; grid-row: 1 / span 2; }*/
.inventory-page .inv-view{   grid-column: 4; grid-row: 1; justify-self: end; }
.inventory-page .inv-badges{ grid-column: 4; grid-row: 2; justify-self: end; }

/* ---------- BADGES GLOBAUX (plus gros + wrap contrôlé) ---------- */
.inventory-page .inv-badges{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}

/* avant: nowrap + ellipsis -> ça force petit.
   après: on autorise 2 lignes max (visuellement clean) */
.inventory-page .inv-global-metrics{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  max-width: 100%;

  flex-wrap: wrap;              /* 🔥 permet d'utiliser la largeur gagnée */
  white-space: normal;          /* 🔥 plus de nowrap */
  overflow: hidden;
  max-height: calc(2 * 28px);   /* ~ 2 lignes de badges */
}

/* redonne du volume */
.inventory-page .inv-badges .sec-metric--global{
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: .78rem !important;
  line-height: 1.1 !important;
}

.inventory-page .inv-badges .sec-metric--global svg{
  width: 16px !important;
  height: 16px !important;
}

/* =========================================================
   INVENTAIRE — Badges globaux (4) : couleurs sémantiques
   Ordre attendu: 1) Lot/Exp manquant  2) Sous min  3) Over max  4) Expire bientôt
   ========================================================= */

/* Base commune (look “badge premium” cohérent) */
.inventory-page #inv-global-metrics .sec-metric--global{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(235,245,255,.92) !important;
}

/* 1) Lot/Exp à ajouter — BLEU (donnée à compléter) */
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(1){
  background: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.32) !important;
  color: rgba(210,245,255,.98) !important;
}

/* 2) Sous le minimum — ROUGE (risque de rupture / action immédiate) */
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(2){
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.34) !important;
  color: rgba(255,215,215,.98) !important;
}

/* 3) Over le maximum — VIOLET (surstock / ajuster) */
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(3){
  background: rgba(168,85,247,.12) !important;
  border-color: rgba(168,85,247,.34) !important;
  color: rgba(242,224,255,.98) !important;
}

/* 4) Expire bientôt — AMBRE (attention temps / à traiter) */
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(4){
  background: rgba(250,204,21,.12) !important;
  border-color: rgba(250,204,21,.34) !important;
  color: rgba(255,245,200,.98) !important;
}

/* Hover: même style, un peu plus présent */
.inventory-page #inv-global-metrics .sec-metric--global:hover{
  filter: brightness(1.10);
}

/* Si tes badges ont une icône SVG dedans, on harmonise la couleur */
.inventory-page #inv-global-metrics .sec-metric--global svg{
  opacity: .95;
}


/* ---------- QUICK HISTORY (table encore plus compacte) ---------- */
.inventory-page .inv-history{
  align-self: stretch;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-left: 8px; /* ton “air” conservé */
}

.inventory-page .inv-history .inv-quick-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* essentiel pour contrôler le Nom */
}

/* header compact */
.inventory-page .inv-history .inv-quick-table thead th{
  padding: 4px 6px;
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(159,179,200,.12);
  text-align: left;
  line-height: 1.1;
}

/* widths plus agressifs pour libérer la colonne droite */
.inventory-page .inv-history .inv-quick-table th:nth-child(2),
.inventory-page .inv-history .inv-quick-table td:nth-child(2){
  width: 72px;         /* Format plus petit */
  white-space: nowrap;
  text-align: right;
}
.inventory-page .inv-history .inv-quick-table th:nth-child(3),
.inventory-page .inv-history .inv-quick-table td:nth-child(3){
  width: 34px;         /* Qte plus petit */
  white-space: nowrap;
  text-align: right;
}
.inventory-page .inv-history .inv-quick-table th:nth-child(4),
.inventory-page .inv-history .inv-quick-table td:nth-child(4){
  width: 64px;         /* Annuler plus petit */
  white-space: nowrap;
  text-align: right;
}

/* col1 Nom: ellipsis + “cap” pour ne pas manger la place */
.inventory-page .inv-history .inv-quick-table th:nth-child(1),
.inventory-page .inv-history .inv-quick-table td:nth-child(1){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* 🔥 “cap” de largeur: garde le tableau compact même si noms longs */
  max-width: 220px;
}

/* rows compact */
.inventory-page .inv-history .inv-quick-table td{
  padding: 4px 6px;
  font-size: .76rem;
  line-height: 1.15;
  border-top: 1px solid rgba(159,179,200,.10);
  vertical-align: middle;
  min-width: 0;
}

/* bouton annuler compact */
.inventory-page .inv-history button.ds-pill-link,
.inventory-page .inv-history .ds-pill-link{
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,22,32,.25);
  color: rgba(226,232,240,.92);
  font-size: .70rem;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- RESPONSIVE (inchangé logique, juste colonnes) ---------- */
@media (max-width: 1200px){
  .inventory-page .inv-top{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: auto auto auto;
    gap: 12px 8px;
  }
  .inventory-page .inv-access{ grid-column: 1; grid-row: 1; }
  .inventory-page .inv-view{   grid-column: 2; grid-row: 1; justify-self: end; }
  .inventory-page .inv-tabs{   grid-column: 1; grid-row: 2; }
  .inventory-page .inv-badges{ grid-column: 2; grid-row: 2; justify-self: end; }
  .inventory-page .inv-scan{   grid-column: 1; grid-row: 3; }
  .inventory-page .inv-history{grid-column: 2; grid-row: 3; }
}

@media (max-width: 900px){
  .inventory-page .inv-top{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
  }
  .inventory-page .inv-access{ grid-column: 1; grid-row: 1; }
  .inventory-page .inv-view{   grid-column: 1; grid-row: 2; justify-self: start; }
  .inventory-page .inv-tabs{   grid-column: 1; grid-row: 3; }
  .inventory-page .inv-badges{ grid-column: 1; grid-row: 4; justify-self: start; }
  .inventory-page .inv-scan{   grid-column: 1; grid-row: 5; }
  .inventory-page .inv-history{grid-column: 1; grid-row: 6; overflow: hidden; }
}

/* Retrait rapide — cacher le preview quand il n'y a rien */
#product-preview.ds-hidden{
  display: none !important;
}

#product-preview:not(.ds-hidden){
  display: block; /* ou flex, selon ton layout interne */
}

/* Optionnel: si le wrapper garde une hauteur/padding */
.inv-quick-scan #product-preview.ds-hidden{
  margin: 0 !important;
  padding: 0 !important;
}

/* ===============================
   Retrait rapide — Preview en overlay (ne push pas le layout)
   =============================== */

/* le wrapper devient le référentiel de position */
.inv-scan .inv-quick-scan{
  position: relative;
}

/* preview caché = pas de place */
#product-preview.ds-hidden{
  display: none !important;
}

/* preview visible = overlay sous l'input */
#product-preview:not(.ds-hidden){
  display: block;
  position: absolute;
  top: calc(100% + 8px);     /* juste sous le champ */
  left: 0;
  right: 0;
  z-index: 50;               /* au-dessus de l'inventaire */
  
  /* look & feel (reprend tes tokens) */
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);

  /* pour éviter que ça déborde écran */
  max-height: 220px;
  overflow: auto;
  backdrop-filter: blur(6px);
}

/* optionnel: petite flèche */
#product-preview:not(.ds-hidden)::before{
  content: "";
  position: absolute;
  top: -7px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: rgba(15, 23, 42, 0.92);
  border-left: 1px solid rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.12);
  transform: rotate(45deg);
}

/* important: éviter que la colonne clip l’overlay */
.inventory-page .inv-top,
.inventory-page .inv-slot.inv-scan{
  overflow: visible;
}

/* =========================================
   INVENTAIRE — Ajustements (badges + align Y)
   ========================================= */

/* 1) Badges globaux un peu plus gros */
.inventory-page .inv-badges .sec-metric--global{
  padding: 6px 12px !important;
  font-size: .86rem !important;
  line-height: 1.1 !important;
}

.inventory-page .inv-badges .sec-metric--global svg{
  width: 18px !important;
  height: 18px !important;
}

/* Réaligner badges + toggle (pas trop bas) */
.inventory-page .inv-tabs,
.inventory-page .inv-badges{
  align-self: center;     /* 🔥 au centre de la row, pas en bas */
  margin-top: 4px;        /* micro ajustement seulement */
}


/* Optionnel: rendre le toggle un peu plus “présent” (si tu veux) */
.inventory-page .inv-toggle .pill{
  padding: .48rem .82rem;
  font-size: .86rem;
}

/* ------------------------------------ */
/* Modal (reprend le style réception) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:2000}
.modal.hidden{display:none!important;pointer-events:none!important;opacity:0!important}
.modal .modal-content{background:#101721;border:1px solid #233044;border-radius:12px;max-width:920px;width:96%;padding:1rem}
.modal .modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #233044;padding-bottom:.6rem}
.modal .modal-body{padding:.8rem 0}
.btn{padding:.45rem .75rem;border-radius:8px;border:1px solid #2b3340;background:#182131;color:#eaf0f9;cursor:pointer}
.btn-primary{background:#2f8ad9;border-color:#2f8ad9}
.btn-validate{background:#2f8ad9;border-color:#2f8ad9}
.btn-icon{padding:.35rem .6rem}
.import-inline{display:flex;align-items:center;gap:.8rem;flex-wrap:nowrap}
.import-label{white-space:nowrap;font-weight:600;color:#cbd6e2;font-size:.95rem}
.import-input{background:#122031;border:1px solid #2f3e54;color:#eaf0f9;border-radius:8px;height:36px;padding:.35rem .55rem}
.supplier-input{width:180px}
.file-input{width:300px}
.import-submit{height:36px;padding:0 1rem}
.import-feedback{display:block;margin-top:.5rem;font-size:.85rem;color:#9bb3cc}

/* =========================================================
   INVENTAIRE — Modal Réception rapide (look cohérent)
   ========================================================= */

.inventory-page #modal-reception-rapide.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
}

.inventory-page #modal-reception-rapide.modal.hidden{
  display: none !important;
}



/* Header */
.inventory-page #modal-reception-rapide .rr-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 6px 10px;
  border-bottom: 1px dashed var(--border-soft);
}

.inventory-page #modal-reception-rapide .rr-title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .2px;
}

.inventory-page #modal-reception-rapide .rr-close{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(235,245,255,.92);
}

.inventory-page #modal-reception-rapide .rr-close:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}

/* Body spacing */
.inventory-page #modal-reception-rapide .rr-body{
  padding: 12px 6px 6px;
}

/* Ligne import: tout sur une ligne */
.inventory-page #modal-reception-rapide .rr-import-row{
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0;
}

/* Fournisseur (label + select inline) */
.inventory-page #modal-reception-rapide .rr-provider{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.inventory-page #modal-reception-rapide .rr-label{
  font-weight: 700;
  color: rgba(235,245,255,.86);
  font-size: .92rem;
}

/* Inputs */
.inventory-page #modal-reception-rapide .rr-control{
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  padding: 0 10px;
  outline: none;
}

.inventory-page #modal-reception-rapide .rr-control:focus{
  border-color: rgba(135,181,255,.45);
  box-shadow: 0 0 0 3px rgba(135,181,255,.18);
}

.inventory-page #modal-reception-rapide .rr-select{
  width: 170px;
}

/* File input: prend la place disponible */
.inventory-page #modal-reception-rapide .rr-file{
  min-width: 0;
}
.inventory-page #modal-reception-rapide .rr-file-input{
  width: 100%;
  padding: 6px 10px;
}

/* Actions */
.inventory-page #modal-reception-rapide .rr-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Boutons: même base que tes .btn */
.inventory-page #modal-reception-rapide .rr-primary,
.inventory-page #modal-reception-rapide .rr-validate{
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
}

/* Feedback */
.inventory-page #modal-reception-rapide .rr-feedback{
  display: block;
  margin-top: 8px;
  color: var(--text-dim);
  font-size: .88rem;
}

/* Résultat */
.inventory-page #modal-reception-rapide .rr-result{
  margin-top: 14px;
}

.inventory-page #modal-reception-rapide .rr-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.inventory-page #modal-reception-rapide .rr-result-meta{
  color: rgba(180,200,220,.82);
}

/* Table */
.inventory-page #modal-reception-rapide .rr-table{
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.inventory-page #modal-reception-rapide .rr-table-head{
  display:grid;
  grid-template-columns: 160px 1fr 110px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: rgba(210,225,245,.82);
  font-weight: 700;
  font-size: .86rem;
}

.inventory-page #modal-reception-rapide .rr-table-body{
  max-height: 360px;
  overflow: auto;
}

.inventory-page #modal-reception-rapide .rr-right{
  text-align: right;
}

/* Responsive: si ça devient trop serré, on passe en 2 lignes sans casser */
@media (max-width: 720px){
  .inventory-page #modal-reception-rapide .rr-import-row{
    grid-template-columns: 1fr;
  }
  .inventory-page #modal-reception-rapide .rr-actions{
    justify-content: flex-start;
  }
}

/* =========================================================
   INVENTAIRE — Modal Réception rapide (ajustements v2)
   - pas de blur backdrop
   - modal + large
   - bouton primary moins “flash”
   - select dropdown lisible (options)
   ========================================================= */

.inventory-page #modal-reception-rapide.modal{
  background: rgba(0,0,0,.78);   /* overlay simple */
  backdrop-filter: none !important; /* 🔥 retire le blur */
}

/* Modal un peu plus grande */
.inventory-page #modal-reception-rapide .modal-content.rr-modal{
  width: min(1040px, 96vw);     /* AVANT: 920px */
  max-width: 1040px;
  padding: 16px 16px 14px;
  border-radius: 16px;
}

/* Bouton "Importer" : look plus cohérent (accent subtil) */
.inventory-page #modal-reception-rapide .btn.btn-primary.rr-primary{
  background: rgba(135,181,255,.16) !important;   /* accent soft */
  border-color: rgba(135,181,255,.38) !important;
  color: rgba(235,245,255,.95) !important;
}

.inventory-page #modal-reception-rapide .btn.btn-primary.rr-primary:hover{
  background: rgba(135,181,255,.22) !important;
  border-color: rgba(135,181,255,.55) !important;
  filter: none !important;
}

.inventory-page #modal-reception-rapide .btn.btn-primary.rr-primary:active{
  transform: translateY(1px);
}

/* Focus propre sur controls (file/select) */
.inventory-page #modal-reception-rapide .rr-control:focus{
  border-color: rgba(135,181,255,.55);
  box-shadow: 0 0 0 3px rgba(135,181,255,.16);
}

/* =========================================================
   Fix "white on white" dans le dropdown du <select>
   (les options sont rendues par l'UI native du navigateur,
   donc on force une palette safe sur option)
   ========================================================= */

.inventory-page #modal-reception-rapide select.rr-select{
  color-scheme: dark; /* aide certains navigateurs en thème sombre */
}

/* Options: texte noir sur fond clair (lisible partout) */
.inventory-page #modal-reception-rapide select.rr-select option{
  background: #ffffff !important;
  color: #0b1220 !important;
}

/* Option sélectionnée / hover (si supporté) */
.inventory-page #modal-reception-rapide select.rr-select option:checked{
  background: #e6efff !important;
  color: #0b1220 !important;
}

/* Cellule produit riche */
.inventory-page #modal-reception-rapide .rr-prod{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width: 0;
}

.inventory-page #modal-reception-rapide .rr-prod-name{
  font-weight: 650;
  color: rgba(235,245,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page #modal-reception-rapide .rr-prod-meta{
  font-size: .82rem;
  color: rgba(180,200,220,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barre bouton en bas du tableau */
.inventory-page #modal-reception-rapide .rr-finalize-bar{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;
}

/* Bouton finaliser cohérent inventaire (accent vert soft, pas neon) */
.inventory-page #modal-reception-rapide .btn.rr-finalize{
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 700;

  background: rgba(16,185,129,.14);
  border: 1px solid rgba(16,185,129,.34);
  color: rgba(220,255,244,.95);
}

.inventory-page #modal-reception-rapide .btn.rr-finalize:hover{
  background: rgba(16,185,129,.20);
  border-color: rgba(16,185,129,.48);
}

.inventory-page #modal-reception-rapide .btn.rr-finalize:active{
  transform: translateY(1px);
}

/* barre sous tableau */
.inventory-page #modal-reception-rapide .rr-finalize-bar{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;
}

/* bouton finaliser cohérent inventaire */
.inventory-page #modal-reception-rapide .btn.rr-finalize{
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-weight: 750;

  background: rgba(16,185,129,.14);
  border: 1px solid rgba(16,185,129,.34);
  color: rgba(220,255,244,.95);
}
.inventory-page #modal-reception-rapide .btn.rr-finalize:hover{
  background: rgba(16,185,129,.20);
  border-color: rgba(16,185,129,.48);
}


/* =========================================================
   INVENTAIRE — Quick Panel (scan + preview + history)
   ========================================================= */

/* Le panel remplace l’espace (col 2 + 3, row 1-2) */
.inventory-page .inv-quick-panel{
  grid-column: 2 / span 2;
  grid-row: 1 / span 2;

  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  position: relative;
  overflow: visible;
}

/* Petite ligne header (subtile) */
.inventory-page .inv-quick-panel-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--border-soft);
}

.inventory-page .inv-quick-panel-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.inventory-page .inv-quick-panel-sub{
  font-size: .82rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout interne : scan à gauche, historique à droite */
.inventory-page .inv-quick-panel-body{
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(260px, 0.85fr);
  gap: 12px;
  align-items: start;
}

/* IMPORTANT: les .inv-scan et .inv-history ne sont plus des slots de la grille principale */
.inventory-page .inv-quick-panel .inv-scan,
.inventory-page .inv-quick-panel .inv-history{
  min-width: 0;
  overflow: visible;
}

/* On retire le padding-left interne de l’historique (sinon ça fait “décalé” dans une box) */
.inventory-page .inv-quick-panel .inv-history{
  padding-left: 0;
}

/* Garde ton preview overlay OK dans le panel */
.inventory-page .inv-quick-panel .inv-quick-scan{
  position: relative;
}
.inventory-page .inv-quick-panel #product-preview:not(.ds-hidden){
  z-index: 60;
}

/* Responsive: <=1200px on retombe sur 2 colonnes globales */
@media (max-width: 1200px){
  .inventory-page .inv-quick-panel{
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .inventory-page .inv-quick-panel-body{
    grid-template-columns: 1fr 1fr;
  }
}

/* Responsive: <=900px tout en colonne */
@media (max-width: 900px){
  .inventory-page .inv-quick-panel{
    grid-column: 1;
  }
  .inventory-page .inv-quick-panel-body{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   INVENTAIRE — Descendre visuellement (2) Tabs + (6) Badges
   (robuste même si align-self / margin existants)
   ========================================================= */

.inventory-page{
  --inv-drop: 18px;  /* ajuste 6 / 10 / 14 */
}

/* (2) Toggle Inventaire/Quarantaine */
.inventory-page .inv-top .inv-slot.inv-tabs{
  transform: translateY(var(--inv-drop)) !important;
}

/* (6) Badges globaux */
.inventory-page .inv-top .inv-slot.inv-badges{
  transform: translateY(var(--inv-drop)) !important;
}

/* évite les effets d’interaction chelous */
.inventory-page .inv-top .inv-slot.inv-tabs,
.inventory-page .inv-top .inv-slot.inv-badges{
  will-change: transform;
}

/* Responsive: on réduit un peu */
@media (max-width: 1200px){
  .inventory-page{ --inv-drop: 6px; }
}
@media (max-width: 900px){
  .inventory-page{ --inv-drop: 4px; }
}

/* =========================================================
   INVENTAIRE — Bouton "Réception" (thème inventaire)
   ========================================================= */

#btn-reception-rapide{
  /* reset du look “bouton blanc” */
  appearance: none;
  background: var(--card-bg);
  color: #e5edff;

  border: 1px solid var(--border);
  border-radius: 999px;

  padding: .42rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .2px;

  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}

/* hover subtil (comme les pills / badges) */
#btn-reception-rapide:hover{
  background: var(--card-bg-strong);
  border-color: rgba(135,181,255,.45);
}

/* focus clavier propre */
#btn-reception-rapide:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(135,181,255,.22);
}

/* micro feedback clic */
#btn-reception-rapide:active{
  transform: translateY(1px);
}

/* =========================================================
   INVENTAIRE — Badges SECTION (JS: <span class="sec-metric" style="...">)
   Ordre: 1 Lot/Exp  2 Sous min  3 Over max  4 Expire bientôt
   ========================================================= */

.inventory-page .inv-sec-chips .sec-metric{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(235,245,255,.92) !important;
}

/* 1) Lot/Exp à ajouter — BLEU */
.inventory-page .inv-sec-chips .sec-metric:nth-child(1){
  background: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.32) !important;
  color: rgba(210,245,255,.98) !important;
}

/* 2) Sous le minimum — ROUGE */
.inventory-page .inv-sec-chips .sec-metric:nth-child(2){
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.34) !important;
  color: rgba(255,215,215,.98) !important;
}

/* 3) Over le maximum — VIOLET */
.inventory-page .inv-sec-chips .sec-metric:nth-child(3){
  background: rgba(168,85,247,.12) !important;
  border-color: rgba(168,85,247,.34) !important;
  color: rgba(242,224,255,.98) !important;
}

/* 4) Expire bientôt — AMBRE */
.inventory-page .inv-sec-chips .sec-metric:nth-child(4){
  background: rgba(250,204,21,.12) !important;
  border-color: rgba(250,204,21,.34) !important;
  color: rgba(255,245,200,.98) !important;
}

/* icônes */
.inventory-page .inv-sec-chips .sec-metric svg{
  opacity: .95;
}

/* =========================================================
   INVENTAIRE — ZÉRO = GRIS (prioritaire sur les couleurs)
   Détection: le JS met opacity:.55 sur les badges à 0
   ========================================================= */

/* helper: match opacity .55 sous toutes les écritures */
.inventory-page .sec-metric[style*="opacity:.55"],
.inventory-page .sec-metric[style*="opacity: .55"],
.inventory-page .sec-metric[style*="opacity:0.55"],
.inventory-page .sec-metric[style*="opacity: 0.55"],
.inventory-page .sec-metric--global[style*="opacity:.55"],
.inventory-page .sec-metric--global[style*="opacity: .55"],
.inventory-page .sec-metric--global[style*="opacity:0.55"],
.inventory-page .sec-metric--global[style*="opacity: 0.55"]{
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(180,190,205,.62) !important;
  opacity: .62 !important;
  filter: none !important;
}

/* IMPORTANT: écrase explicitement tes 4 couleurs pour les badges muted (section) */
.inventory-page .inv-sec-chips .sec-metric:nth-child(1)[style*="opacity"],
.inventory-page .inv-sec-chips .sec-metric:nth-child(2)[style*="opacity"],
.inventory-page .inv-sec-chips .sec-metric:nth-child(3)[style*="opacity"],
.inventory-page .inv-sec-chips .sec-metric:nth-child(4)[style*="opacity"]{
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(180,190,205,.62) !important;
}

/* IMPORTANT: idem pour les 4 globales */
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(1)[style*="opacity"],
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(2)[style*="opacity"],
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(3)[style*="opacity"],
.inventory-page #inv-global-metrics .sec-metric--global:nth-child(4)[style*="opacity"]{
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(180,190,205,.62) !important;
}

/* icônes muted */
.inventory-page .sec-metric[style*="opacity"] svg,
.inventory-page .sec-metric--global[style*="opacity"] svg{
  opacity: .55 !important;
}

/* =========================================================
   TOAST — overlay premium (Inventaire)
   ========================================================= */

.inventory-page .toast{
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 4000;

  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 12px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 14, 20, 0.94);
  color: rgba(235,245,255,.92);

  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: none;

  display: flex;
  align-items: center;
  gap: 10px;

  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;

  transition: opacity .18s ease, transform .18s ease;
}

/* petite pastille status */
.inventory-page .toast::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(16,185,129,.95);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  flex: 0 0 auto;
}

/* visible */
.inventory-page .toast.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* variantes si tu veux plus tard */
.inventory-page .toast.is-error::before{
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.inventory-page .toast.is-warn::before{
  background: rgba(250,204,21,.95);
  box-shadow: 0 0 0 3px rgba(250,204,21,.18);
}

/* =========================================================
   INVENTAIRE — Modal PLE2 (Compléter Lot/Exp)
   ========================================================= */

.inventory-page #pending-lotexp-list-modal.modal{
  background: rgba(0,0,0,.78);
  backdrop-filter: none !important;
}

.inventory-page #pending-lotexp-list-modal .modal-content.ple2-modal{
  width: min(1040px, 96vw);
  max-width: 1040px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(8, 12, 18, 0.985);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

.inventory-page #pending-lotexp-list-modal .ple2-body{
  max-height: 72vh;
  overflow: auto;
}

.inventory-page #pending-lotexp-list-modal .ple2-scan,
.inventory-page #pending-lotexp-list-modal input[type="text"],
.inventory-page #pending-lotexp-list-modal input[type="number"],
.inventory-page #pending-lotexp-list-modal input[type="date"]{
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  padding: 0 10px;
  outline: none;
}

.inventory-page #pending-lotexp-list-modal input:focus{
  border-color: rgba(135,181,255,.55);
  box-shadow: 0 0 0 3px rgba(135,181,255,.16);
}

.inventory-page #pending-lotexp-list-modal .ple2-table-head{
  display: grid;
  grid-template-columns: 2.4fr 52px 0.7fr 132px 72px;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(210,225,245,.82);
  font-weight: 750;
  font-size: .86rem;
}

.inventory-page #pending-lotexp-list-modal .ple2-list{
  margin-top: .55rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.inventory-page #pending-lotexp-list-modal .ple2-block{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: .55rem .55rem .45rem;
}

.inventory-page #pending-lotexp-list-modal .ple2-block-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.6rem;
}

.inventory-page #pending-lotexp-list-modal .ple2-block-title{
  font-weight: 750;
  color: rgba(235,245,255,.94);
}

.inventory-page #pending-lotexp-list-modal .ple2-block-meta{
  margin-top: 2px;
  font-size: .88rem;
  color: rgba(180,200,220,.72);
}

.inventory-page #pending-lotexp-list-modal .ple2-need-n{
  font-weight: 850;
  color: #ffd1a6;
}

.inventory-page #pending-lotexp-list-modal .ple2-lines{
  margin-top: .55rem;
  display: grid;
  gap: .35rem;
}

.inventory-page #pending-lotexp-list-modal .ple2-row{
  display: grid;
  grid-template-columns: 2.4fr 52px 0.7fr 132px 72px; gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.inventory-page #pending-lotexp-list-modal .ple2-qty{
  text-align: center;
  padding: 0 6px;       /* moins large */
}

.inventory-page #pending-lotexp-list-modal .ple2-lot{
  min-width: 0;
}

.inventory-page #pending-lotexp-list-modal .ple2-exp{
  padding: 0 10px;   /* laisse respirer le calendrier */
  text-align: center;
}



.inventory-page #pending-lotexp-list-modal .ple2-pname{
  font-weight: 700;
  color: rgba(235,245,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page #pending-lotexp-list-modal .ple2-pmeta{
  margin-top: 2px;
  font-size: .82rem;
  color: rgba(180,200,220,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page #pending-lotexp-list-modal .ple2-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
}

.inventory-page #pending-lotexp-list-modal .ple2-plus,
.inventory-page #pending-lotexp-list-modal .ple2-del{
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.92);
  cursor: pointer;
}

.inventory-page #pending-lotexp-list-modal .ple2-del{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}

.inventory-page #pending-lotexp-list-modal .ple2-footer{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: .85rem;
}

.inventory-page #pending-lotexp-list-modal .ple2-prod--blank{
  display:flex;
  align-items:center;
  justify-content:center;
}

.ple2-inline-metrics {
  color: rgba(180,200,220,.85);
  font-size: 0.82rem;
  white-space: nowrap;
}

.ple2-inline-metrics strong {
  color: rgba(235,245,255,.95);
  font-weight: 600;
}

.ple2-inline-metrics{
  color: rgba(180,200,220,.85);
  font-size: .82rem;
  white-space: nowrap;
}

.ple2-inline-metrics strong{
  color: rgba(235,245,255,.95);
  font-weight: 600;
}

.ple2-progress{
  margin-left: .25rem;
  opacity: .9;
}


/* =========================================================
   INVENTAIRE — Séparateur entre molécules (safe)
   - plus d'air entre inv-group
   - ligne fine, mais ne casse pas la "box ouverte"
   ========================================================= */

/* Air global entre molécules */
.inventory-page .inv-sec-body > .inv-group{
  margin: 10px 0;
}

/* Fine ligne uniquement AVANT une molécule fermée (et pas "dans" une box ouverte) */
.inventory-page .inv-sec-body > .inv-group + .inv-group{
  position: relative;
  padding-top: 10px; /* espace après la ligne */
}

/* La ligne (subtile) */
.inventory-page .inv-sec-body > .inv-group + .inv-group::before{
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

/* Optionnel: si la molécule précédente est ouverte, on réduit la ligne pour éviter “double cadre” */
.inventory-page .inv-sec-body > .inv-group:has(.inv-group-head[aria-expanded="true"]) + .inv-group::before{
  left: 12px;
  right: 12px;
  opacity: 0.45;
}

/* INVENTAIRE — Format + DIN plus collés à gauche */
.inventory-page .inv-table th:nth-child(2),
.inventory-page .inv-table td:nth-child(2),
.inventory-page .inv-table th:nth-child(3),
.inventory-page .inv-table td:nth-child(3){
  padding-left: .35rem !important;
}

/* Optionnel: éviter que ça “s’étire” */
.inventory-page .inv-table td:nth-child(2),
.inventory-page .inv-table td:nth-child(3){
  white-space: nowrap;
}

/* =========================================================
   INVENTAIRE — Nom | Format | DIN plus collés
   (ordre: 1=Nom, 2=Format, 3=DIN)
   ========================================================= */

/* on réduit le padding horizontal des 3 premières colonnes */
.inventory-page .inv-table th:nth-child(1),
.inventory-page .inv-table td:nth-child(1),
.inventory-page .inv-table th:nth-child(2),
.inventory-page .inv-table td:nth-child(2),
.inventory-page .inv-table th:nth-child(3),
.inventory-page .inv-table td:nth-child(3){
  padding-left: .55rem !important;
  padding-right: .55rem !important;
}

/* Format + DIN encore plus “tight” */
.inventory-page .inv-table th:nth-child(2),
.inventory-page .inv-table td:nth-child(2),
.inventory-page .inv-table th:nth-child(3),
.inventory-page .inv-table td:nth-child(3){
  padding-left: .35rem !important;
  padding-right: .35rem !important;
  white-space: nowrap;
}

/* Optionnel: empêche Nom de garder une largeur énorme */
.inventory-page .inv-table th:nth-child(1),
.inventory-page .inv-table td:nth-child(1){
  width: auto !important;
}

/* =========================================================
   INVENTAIRE — HEADERS TABLE (plus lisibles)
   - augmente taille + contraste
   - garde style premium
   ========================================================= */

.inventory-page .inv-table thead th{
  font-size: .86rem;                 /* AVANT ~.80 */
  font-weight: 750;                 /* plus présent */
  letter-spacing: .22px;
  color: rgba(235,245,255,.84);     /* AVANT trop pâle */
  padding: 0 .45rem .35rem;         /* un peu plus d’air */
  text-transform: none;
}

.inventory-page .inv-table thead th.inv-threshold-head{
  color: rgba(235,245,255,.90);
}

/* Optionnel: petit séparateur discret sous le header (si tu veux + lisibilité)
.inventory-page .inv-table thead{
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
*/


/* =========================================================
   INVENTAIRE — Widget Seuils (Option B) v3 (couleurs + punch)
   Objectifs:
   - barre/dot visibles
   - couleurs d’état évidentes (below/ok/above)
   - pas trop flashy, mais clairement lisible
   ========================================================= */

.inventory-page .inv-threshold-head{
  text-align: left;
}

/* cellule "Seuils" (colspan=2) */
.inventory-page .inv-mm-cell{
  padding-right: .6rem;
  vertical-align: middle;
}

/* widget */
.inventory-page .inv-mm{
  width: min(290px, 100%);
  max-width: 290px;

  display: flex;
  flex-direction: column;
  gap: .34rem;

  padding: .34rem .46rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ligne Min/Max */
.inventory-page .inv-mm-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;

  font-size: .78rem;
  font-weight: 750;
  color: rgba(235,245,255,.82); /* plus clair */
}

.inventory-page .inv-mm-min,
.inventory-page .inv-mm-max{
  white-space: nowrap;
  letter-spacing: .15px;
}

/* barre (neutre) */
.inventory-page .inv-mm-bar{
  position: relative;
  height: 11px;
  border-radius: 999px;

  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.22);

  overflow: hidden;
}

/* texture très légère pour “instrument” */
.inventory-page .inv-mm-bar::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.00)
  );
  opacity: .70;
  pointer-events: none;
}

/* dot (neutre) */
.inventory-page .inv-mm-dot{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 12px;
  height: 12px;
  border-radius: 999px;

  background: rgba(235,245,255,.97);
  outline: 1px solid rgba(0,0,0,.25);

  box-shadow:
    0 0 0 4px rgba(135,181,255,.22),
    0 10px 22px rgba(0,0,0,.38);
}

/* =======================
   ÉTATS (beaucoup plus visibles)
   ======================= */

/* OK */
.inventory-page .inv-mm--ok .inv-mm-bar{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.30);
}
.inventory-page .inv-mm--ok .inv-mm-dot{
  box-shadow:
    0 0 0 4px rgba(16,185,129,.28),
    0 10px 22px rgba(0,0,0,.38);
}

/* Sous minimum */
.inventory-page .inv-mm--below .inv-mm-bar{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.32);
}
.inventory-page .inv-mm--below .inv-mm-dot{
  background: rgba(255,215,215,.98);
  box-shadow:
    0 0 0 4px rgba(239,68,68,.30),
    0 10px 22px rgba(0,0,0,.38);
}

/* Au-dessus maximum */
.inventory-page .inv-mm--above .inv-mm-bar{
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.32);
}
.inventory-page .inv-mm--above .inv-mm-dot{
  background: rgba(242,224,255,.98);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.30),
    0 10px 22px rgba(0,0,0,.38);
}

/* N/A (aucun seuil) */
.inventory-page .inv-mm--na{
  opacity: .70;
}
.inventory-page .inv-mm--na .inv-mm-bar{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
}
.inventory-page .inv-mm--na .inv-mm-dot{
  box-shadow:
    0 0 0 4px rgba(255,255,255,.14),
    0 10px 18px rgba(0,0,0,.30);
}

/* Qté: un peu plus “décisionnel” */
.inventory-page .inv-qty-cell{
  font-weight: 750;
  color: rgba(235,245,255,.94);
}

/* =========================================================
   INVENTAIRE — Hiérarchie visuelle (L connector) via aria-expanded
   - fonctionne sans modifier le JS
   ========================================================= */

/* On cible uniquement les groupes OUVERTS */
.inventory-page .inv-group:has(.inv-group-head[aria-expanded="true"]) .inv-group-body{
  padding-left: 14px; /* espace pour le L */
  position: relative;
}

/* Cellule Nom: texte après le L */
.inventory-page .inv-group:has(.inv-group-head[aria-expanded="true"]) .inv-table tbody td:nth-child(1){
  position: relative;
  padding-left: 22px !important;
}

/* "L" — trait horizontal */
.inventory-page .inv-group:has(.inv-group-head[aria-expanded="true"]) .inv-table tbody td:nth-child(1)::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: rgba(255,255,255,0.30);
  transform: translateY(-50%);
}

/* "L" — trait vertical */
.inventory-page .inv-group:has(.inv-group-head[aria-expanded="true"]) .inv-table tbody td:nth-child(1)::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.18);
}

/* Dernière ligne: coupe le trait vertical pour obtenir un vrai "└" */
.inventory-page .inv-group:has(.inv-group-head[aria-expanded="true"]) .inv-table tbody tr:last-child td:nth-child(1)::after{
  bottom: 50%;
}

/* Quand la molécule est ouverte: le tableau devient clairement "enfant" */
.inventory-page .inv-group-head[aria-expanded="true"] + .inv-group-body{
  margin-left: 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,0.10);
}

/* L connector plus visible */
.inventory-page .inv-group-head[aria-expanded="true"] + .inv-group-body .inv-table tbody td:nth-child(1){
  position: relative;
  padding-left: 26px !important;
}

.inventory-page .inv-group-head[aria-expanded="true"] + .inv-group-body .inv-table tbody td:nth-child(1)::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: rgba(255,255,255,0.38);
  transform: translateY(-50%);
}

.inventory-page .inv-group-head[aria-expanded="true"] + .inv-group-body .inv-table tbody td:nth-child(1)::after{
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.22);
}

.inventory-page .inv-group-head[aria-expanded="true"] + .inv-group-body .inv-table tbody tr:last-child td:nth-child(1)::after{
  bottom: 50%;
}

/* =========================================================
   INVENTAIRE — Sous-table (détails lots) v2
   - 5 colonnes: Qté / Lot / Exp / Datamatrix / Actions
   - Datamatrix + Copier restent ensemble, actions à droite
   ========================================================= */

.inventory-page .inv-subtable{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* clé pour alignement propre */
  font-size: .85rem;
}

.inventory-page .inv-subtable thead th{
  padding: .35rem .5rem;
  color: rgba(235,245,255,.68);
  font-weight: 750;
  font-size: .78rem;
  letter-spacing: .18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.inventory-page .inv-subtable tbody td{
  padding: .42rem .5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}

/* Largeurs stables */
.inventory-page .inv-subtable th:nth-child(1),
.inventory-page .inv-subtable td:nth-child(1){ width: 18%; }

.inventory-page .inv-subtable th:nth-child(2),
.inventory-page .inv-subtable td:nth-child(2){ width: 12%; }

.inventory-page .inv-subtable th:nth-child(3),
.inventory-page .inv-subtable td:nth-child(3){ width: 14%; }

.inventory-page .inv-subtable th:nth-child(4),
.inventory-page .inv-subtable td:nth-child(4){ width: 32%; }

.inventory-page .inv-subtable th:nth-child(5),
.inventory-page .inv-subtable td:nth-child(5){ width: 24%; }

/* Qté plus lisible */
.inventory-page .inv-subtable td:nth-child(1){
  font-weight: 750;
  color: rgba(235,245,255,.92);
  white-space: nowrap;
}

/* Lot: monospace (stabilité visuelle) */
.inventory-page .inv-subtable td:nth-child(2){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(235,245,255,.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expiration centrée */
.inventory-page .inv-subtable td:nth-child(3){
  white-space: nowrap;
}

/* Datamatrix — chip compacte, largeur naturelle */
.inventory-page .inv-dm-wrap{
  display: inline-flex;      /* 🔥 plus flex:1 */
  align-items: center;
  max-width: 100%;
}

.inventory-page .inv-dm-wrap .dm-text{
  display: inline-block;
  max-width: 100%;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: .22rem .45rem;
  border-radius: 8px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .78rem;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(235,245,255,.88);

  cursor: pointer;
}

/* feedback copie */
.inventory-page .inv-dm-wrap .dm-text.copied{
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.35);
  color: rgba(220,255,244,.98);
}


/* Actions — flex wrap intelligent, jamais overflow */
.inventory-page .inv-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;

  flex-wrap: wrap;          /* 🔥 autorise wrap */
  max-width: 100%;
}

.inventory-page .inv-actions .btn,
.inventory-page .inv-actions .ghost-btn{
  padding: .26rem .5rem;
  border-radius: 10px;
  font-size: .78rem;
  white-space: nowrap;
}

/* Bouton disabled (Transférer) */
.inventory-page .inv-actions .is-disabled[disabled]{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.15);
}

/* =========================================================
   INVENTAIRE — Inset panel pour inventory items (Option A)
   - rend la zone "lots" clairement distincte du tableau parent
   ========================================================= */

/* La rangée détail (celle insérée après un produit) */
.inventory-page .inv-detail-row td{
  padding: .45rem .6rem .8rem !important;
}

/* Le conteneur des détails devient un vrai "inset panel" */
.inventory-page .inv-detail-wrap{
  position: relative;
  margin-top: .25rem;

  /* effet "inset" */
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;

  /* creusé + profondeur */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 10px 24px rgba(0,0,0,0.18);

  /* structure */
  padding: .65rem .75rem;
}

/* Retrait gauche pour renforcer la hiérarchie "enfant de" */
.inventory-page .inv-detail-wrap{
  margin-left: 14px;   /* 👈 clé visuelle */
}

/* Petite barre verticale subtile (ancre parent → enfant) */
.inventory-page .inv-detail-wrap::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}

/* La sous-table s’intègre au panel (pas de look "table brute") */
.inventory-page .inv-subtable{
  background: transparent;
}

/* Un peu plus de respiration horizontale dans le panel */
.inventory-page .inv-subtable thead th{
  padding-top: .15rem;
  padding-bottom: .45rem;
}

/* Lignes lots: plus "calmes" et nettes */
.inventory-page .inv-subtable tbody tr{
  background: transparent;
}

.inventory-page .inv-subtable tbody td{
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Optionnel: hover léger sur une ligne lot pour guider l’œil */
.inventory-page .inv-subtable tbody tr:hover td{
  background: rgba(255,255,255,0.03);
}

/* Expiration: jaune si bientôt, rouge si expiré */
.inventory-page .inv-exp{
  white-space: nowrap;
}

.inventory-page .inv-exp.is-soon{
  color: rgba(250,204,21,.95); /* jaune */
  font-weight: 750;
}

.inventory-page .inv-exp.is-expired{
  color: rgba(239,68,68,.95);  /* rouge */
  font-weight: 800;
}

/* Actions: aligner le header avec le 1er bouton + éviter collé au bord droit */
.inventory-page .inv-subtable thead th:nth-child(5){
  text-align: left;               /* 👈 aligné au début du bloc */
  padding-left: .55rem;
  padding-right: .85rem;
}

/* Cellule actions: même repère que le header */
.inventory-page .inv-subtable tbody td:nth-child(5){
  text-align: left;               /* 👈 pas à droite */
  padding-left: .55rem;
  padding-right: .85rem;
}

/* Le bloc boutons ne doit pas se pousser full à droite */
.inventory-page .inv-actions{
  justify-content: flex-start;    /* 👈 aligne avec le header */
}

/* Bouton "Fermer tout" — discret mais toujours accessible */
#inv-collapse-all{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.88);
  font-weight: 650;
  font-size: .82rem;
  cursor: pointer;
}

#inv-collapse-all:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}

/* =========================================================
   INVENTAIRE — Section header sticky + bouton Fermer tout
   ========================================================= */

/* le header de section devient sticky quand on lui met la classe */
.inventory-page .inv-sec-head.is-sticky{
  position: sticky;
  top: 56px;                 /* hauteur topbar -> ajuste si besoin */
  z-index: 80;

  background: rgba(10,14,20,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;

  padding: .55rem .75rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.30);
  backdrop-filter: blur(6px);
}

/* garder les badges + bouton bien alignés à droite */
.inventory-page .inv-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .8rem;
}

/* chips */
.inventory-page .inv-sec-chips{
  display:flex;
  align-items:center;
  gap: .4rem;
}

/* bouton Fermer tout (dans le header de section) */
.inventory-page .inv-sec-collapse{
  margin-left: .55rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;

  padding: .32rem .70rem;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.88);

  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
}

.inventory-page .inv-sec-collapse:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}

/* =========================================================
   INVENTAIRE — Modal Quarantaine (copie look retrait)
   ========================================================= */
.inventory-page #modal-quarantine.modal{
  background: rgba(0,0,0,.78);
  backdrop-filter: none !important;
  z-index: 2300;
}

.inventory-page #modal-quarantine .modal-content.qx-modal{
  width: min(560px, 96vw);
  max-width: 560px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 18, 0.985);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 14px 14px 12px;
}

.inventory-page #modal-quarantine .qx-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.inventory-page #modal-quarantine .qx-title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(235,245,255,.95);
}

.inventory-page #modal-quarantine .qx-sub{
  margin: 2px 0 0;
  font-size: .86rem;
  color: rgba(180,200,220,.72);
}

.inventory-page #modal-quarantine .qx-close{
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  cursor: pointer;
}

.inventory-page #modal-quarantine .qx-close:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}

.inventory-page #modal-quarantine .qx-body{
  padding-top: 10px;
}

.inventory-page #modal-quarantine .qx-recap{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.inventory-page #modal-quarantine .qx-recap-name{
  font-weight: 800;
  color: rgba(235,245,255,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page #modal-quarantine .qx-recap-meta{
  margin-top: 2px;
  font-size: .86rem;
  color: rgba(180,200,220,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-page #modal-quarantine .qx-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.inventory-page #modal-quarantine .qx-field-full{
  grid-column: 1 / -1;
}

.inventory-page #modal-quarantine .qx-label{
  display:block;
  font-weight: 750;
  font-size: .86rem;
  color: rgba(235,245,255,.84);
  margin: 2px 0 6px;
}

.inventory-page #modal-quarantine .qx-input{
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  padding: 0 10px;
  outline: none;
}

.inventory-page #modal-quarantine .qx-input:focus{
  border-color: rgba(135,181,255,.55);
  box-shadow: 0 0 0 3px rgba(135,181,255,.16);
}

.inventory-page #modal-quarantine .qx-hint{
  margin-top: 6px;
  font-size: .82rem;
  color: rgba(180,200,220,.72);
}

/* dropdown lisible partout (options natives) */
.inventory-page #modal-quarantine select.qx-input{
  color-scheme: dark;
}
.inventory-page #modal-quarantine select.qx-input option{
  background: #ffffff !important;
  color: #0b1220 !important;
}

.inventory-page #modal-quarantine .qx-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.inventory-page #modal-quarantine .btn{
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  cursor: pointer;
  font-weight: 750;
}

.inventory-page #modal-quarantine .btn:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.25);
}

.inventory-page #modal-quarantine .btn.btn-primary{
  background: rgba(135,181,255,.16);
  border-color: rgba(135,181,255,.38);
}

.inventory-page #modal-quarantine .btn.btn-primary:hover{
  background: rgba(135,181,255,.22);
  border-color: rgba(135,181,255,.55);
}

.qw-choices{ margin-top: 8px; }
.qw-choices-title{ font-weight: 700; margin-bottom: 6px; color: rgba(235,245,255,.88); }
.qw-choices-list{ display:flex; flex-direction:column; gap:6px; }
.qw-choice{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  cursor:pointer;
}
.qw-choice input{ margin-right: 10px; }
.qw-choice-main{ display:flex; gap:10px; flex-wrap:wrap; }
.qw-choice-stock{
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}
/* Preview overlay: plus grand */
#product-preview:not(.ds-hidden){
  max-height: 360px;          /* au lieu de 220 */
  padding: 14px 14px;         /* plus d’air */
  border-radius: 16px;
}
.qw-choices{ margin-top: 8px; }
.qw-choices-title{
  font-weight: 750;
  margin-bottom: 8px;
  color: rgba(235,245,255,.90);
}

.qw-choices-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ligne cliquable */
.qw-choice{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  user-select: none;
}

.qw-choice:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(135,181,255,.25);
}

.qw-choice:active{
  transform: translateY(1px);
}

.qw-choice.is-selected{
  background: rgba(135,181,255,.14);
  border-color: rgba(135,181,255,.40);
  box-shadow: 0 0 0 3px rgba(135,181,255,.12);
}

/* Tout sur une seule ligne */
.qw-choice-line{
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.qw-choice-lot,
.qw-choice-exp{
  color: rgba(235,245,255,.88);
}

.qw-choice-stock{
  margin-left: auto; /* Qte à droite */
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  font-weight: 850;
}

.qw-empty{
  color: rgba(235,245,255,.70);
  padding: 6px 0;
}

/* ====== INVENTAIRE — Pane toggle (Liste/Grille/Carte) ====== */
.inv-pane.hidden{ display:none !important; }

/* =========================================================
   CARTE LABO — MVP (16x16 fixed) + Sections panel (clean)
   - Gear dans la box du canvas
   - Sections: 1 colonne par défaut, 2 colonnes via .map-layout.is-two-col
   ========================================================= */

/* Card globale qui contient (carte + sections) */
.map-card{
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.02);
}

/* Layout: carte | sections */
.map-layout{
  display: grid;
  grid-template-columns: 1fr 300px;  /* base: 1 col sections */
  gap: 12px;
  align-items: start;
}

/* Quand on veut 2 colonnes (et panneau plus large) */
.map-layout.is-two-col{
  grid-template-columns: 1fr 460px;
}

/* ---------- Box canvas (cadre de la carte) ---------- */
.map-canvas-wrap{
  width: 100%;
  overflow: auto;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.02);

  display: flex;
  justify-content: center;

  position: relative; /* pour la gear overlay */
}

/* Gear DANS la box de la carte */
.map-gear-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 90;

  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  cursor: pointer;

  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

.map-gear-btn:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}
.map-gear-btn:active{ transform: translateY(1px); }
.map-gear-btn.is-on{
  background: rgba(135,181,255,.14);
  border-color: rgba(135,181,255,.40);
  box-shadow: 0 0 0 3px rgba(135,181,255,.12);
}

/* Canvas (16x16) */
.map-canvas{
  --cell: 34px;
  --n: 16;

  position: relative;
  width: calc(16 * var(--cell));
  height: calc(16 * var(--cell));
  border-radius: 10px;

  background: transparent; /* pas de grille en mode normal */
}

/* Grille uniquement en édition */
.map-canvas.is-edit{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);

  outline: 2px dashed rgba(135,181,255,.35);
  outline-offset: 6px;
}

/* ---------- Toolbar bas ---------- */
.map-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  flex-wrap:wrap;
}
.map-toolbar-bottom{ margin-top: .75rem; }

/* ---------- Segments ---------- */
.map-seg{
  position: absolute;
  opacity: .95;
  cursor: pointer;
  border-radius: 999px;
}

.map-seg.inactive{ background: rgba(255,255,255,0.10); }
.map-seg.active{   background: rgba(0,0,0,0.92); }
.map-seg.assigned{ background: rgba(124,165,255,0.92); }

.map-seg.selected{
  background: rgba(16,185,129,0.95);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.22);
}

/* ---------- Légende ---------- */
.map-legend{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .8rem;
  color: var(--text-dim, rgba(255,255,255,0.65));
  font-size: .9rem;
}
.legend-item{ display:flex; gap:.5rem; align-items:center; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-gray{ background: rgba(255,255,255,0.25); }
.dot-black{ background: rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.15); }
.dot-blue{ background: rgba(124,165,255,0.9); }
.dot-sel{  background: rgba(16,185,129,0.95); }

/* ---------- Panneau Sections (droite) ---------- */
.map-right{
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.map-right-head{
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.map-right-title{
  font-weight: 800;
  color: rgba(235,245,255,.92);
}

/* On veut éviter scroll ici; layout_map.js peut décider 2 colonnes */
.map-right-body{
  padding: 10px 10px 12px;
  overflow: visible;
}

/* Liste sections: 1 colonne par défaut */
#map-assigned-sections.map-sections{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: start;
}

/* Mode 2 colonnes (si .map-layout.is-two-col) */
.map-layout.is-two-col #map-assigned-sections.map-sections{
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

/* Pills compactes (fit ~16 en 1 colonne) */
.map-sec-row{
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.map-sec-name{
  font-size: 0.76rem;
  font-weight: 750;
  color: rgba(235,245,255,.90);
  line-height: 1.1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-sec-row.is-hover{
  border-color: rgba(135,181,255,.35);
  background: rgba(135,181,255,.08);
}

/* Kill-switch: jamais afficher les compteurs */
.map-sec-meta{ display: none !important; }

/* ---------- Responsive: sections sous la carte ---------- */
@media (max-width: 980px){
  .map-layout,
  .map-layout.is-two-col{
    grid-template-columns: 1fr;
  }
  .map-layout.is-two-col #map-assigned-sections.map-sections{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SHELVES — inchangé (clean)
   ========================================================= */

.shelves-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}
.shelves-title{ min-width: 0; }
.shelves-title-main{ font-weight:800; color: rgba(235,245,255,.94); }
.shelves-actions{ display:flex; gap:.5rem; align-items:center; }

.shelves-toolbar{ margin-bottom:.75rem; }
.shelves-search{ position:relative; max-width: 560px; }
.shelves-suggest{
  position:absolute;
  top: calc(100% + 6px);
  left:0; right:0;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,12,18,0.98);
  border-radius: 12px;
  overflow:hidden;
  z-index: 120;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.shelves-suggest.hidden{ display:none !important; }
.sug-row{ padding:10px 12px; cursor:pointer; border-top: 1px solid rgba(255,255,255,0.06); }
.sug-row:first-child{ border-top:0; }
.sug-row:hover{ background: rgba(255,255,255,0.04); }
.sug-name{ font-weight:750; }
.sug-meta{ font-size:.85rem; }

.shelves-content{ display:flex; flex-direction:column; gap:.75rem; }

.shelf-card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.shelf-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.shelf-name{ font-weight:800; }
.shelf-body{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }

.shelf-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;

  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.shelf-item-name{ font-weight:750; }
.shelf-item-actions{ display:flex; gap:6px; }
.btn-xs{ padding:.26rem .5rem; border-radius:10px; font-size:.78rem; }

/* Mini modal map exit */
.map-exit-modal{
  width: min(520px, 96vw);
  max-width: 520px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 18, 0.985);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding: 14px 14px 12px;
}

.map-exit-head{ padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.map-exit-title{ font-weight: 850; color: rgba(235,245,255,.95); }
.map-exit-sub{ margin-top: 4px; font-size: .88rem; color: rgba(180,200,220,.72); }

.map-exit-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
}
.btn-map-assign-top{
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 750;
}
.map-right-head--actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

/* =========================================================
   CARTE LABO — SVG upgrade (v10)
   - support <svg id="map-canvas">
   - toolbar outils (étagère/comptoir/frigo + rotation)
   - hitbox sections plus large + hover lisible
   ========================================================= */

/* Le canvas devient un SVG: on conserve les mêmes dimensions */
.map-canvas.map-canvas--svg{
  --cell: 34px;
  --n: 16;

  width: calc(16 * var(--cell));
  height: calc(16 * var(--cell));
  border-radius: 10px;

  /* “currentColor” des shapes => couleur texte */
  color: rgba(235,245,255,.92);

  display: block;
  overflow: visible;
}

/* Mode édition: outline similaire à ton ancien */
.map-canvas.map-canvas--svg.is-edit{
  outline: 2px dashed rgba(135,181,255,.35);
  outline-offset: 6px;
}

/* Toolbar overlay (dans la box carte) */
.map-tools{
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 95;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 12, 18, 0.86);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.map-tools.hidden{ display:none !important; }

.map-tools .tool-sep{
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.10);
  margin: 0 2px;
}

.map-tools .tool-btn{
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);

  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;

  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}

.map-tools .tool-btn:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}
.map-tools .tool-btn:active{ transform: translateY(1px); }

.map-tools .tool-btn.is-on{
  background: rgba(135,181,255,.14);
  border-color: rgba(135,181,255,.40);
  box-shadow: 0 0 0 3px rgba(135,181,255,.12);
}

/* ---------- SVG classes (v10) ---------- */

/* grille (très subtile) */
.map-canvas .ms-grid{
  pointer-events: none;
  opacity: 1;
}

/* segments legacy (capsules) */
.map-canvas .ms-seg.is-section{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.map-canvas .ms-seg.is-hover{
  filter: drop-shadow(0 0 10px rgba(135,181,255,.18)) drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* éléments (étagères/frigo/comptoir) */
.map-canvas .ms-el.is-section .ms-base{
  opacity: .18;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
}

/* hitbox (clic facile) */
.map-canvas .ms-hit{
  cursor: pointer;
}

/* petit feedback au hover (si tu veux plus “physique”) */
.map-canvas .ms-hit:hover + .ms-base{
  opacity: .16;
}

/* parent direct de #map-canvas => .map-canvas-wrap */
.map-canvas-wrap.is-edit{
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 10px;
  border-radius: 16px;
}


/* hover (lignes et objets) */
.ms-el.is-hovered,
.ms-skin.is-hovered,
.ms-line.is-hovered {
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(59,130,246,.35));
}


/* Hover segment en édition: visible, même avec fill-opacity inline */
.map-canvas-wrap.is-edit .ms-line.is-hovered{
  fill-opacity: 1 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(135,181,255,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Optionnel: si tu veux distinguer hover vs selected */
.map-canvas-wrap.is-edit .ms-line.is-selected{
  fill-opacity: 1 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(16,185,129,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* =========================================================
   MAP — LINES ONLY (V1 STRONG) : hover/ghost + hit-layer
   ========================================================= */

/* La couche de hitboxes doit être cliquable */
.map-canvas-wrap.is-edit .ms-seg-hit-layer { pointer-events: all; }

/* Les hitboxes: invisibles mais capturent bien, et montrent le curseur */
.map-canvas-wrap.is-edit .ms-seg-hit{
  cursor: pointer;
}

/* Hover (actif ou preview) — bien visible */
.map-canvas-wrap.is-edit .ms-line.is-hovered{
  fill-opacity: 1 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(135,181,255,.35))
          drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Selected — encore un peu plus “confirmé” */
.map-canvas-wrap.is-edit .ms-line.is-selected{
  fill-opacity: 1 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(16,185,129,.35))
          drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Ghost = hover sur segment INACTIF (preview) : plus subtil */
.map-canvas-wrap.is-edit .ms-line.is-ghost{
  fill-opacity: .38 !important;  /* subtil mais visible */
  opacity: .95 !important;
  filter: drop-shadow(0 0 8px rgba(135,181,255,.18));
}

/* Lignes AVEC section : plus présentes */
.map-canvas-wrap.is-edit .ms-line.is-section{
  opacity: 0.95;
}

/* Lignes SANS section : plus discrètes */
.map-canvas-wrap.is-edit .ms-line:not(.is-section){
  opacity: 0.65;
}

/* Bouton "Assigner sections" (dans le panneau Sections) */
#btn-map-assign-sections{
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 750;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,0.04);
  color: rgba(235,245,255,.92);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

#btn-map-assign-sections:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(135,181,255,.35);
}

/* État ON (assign-mode) */
#btn-map-assign-sections.is-on{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.40);
  box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}

/* Highlight section bleuté sur la carte */
.map-canvas-wrap.is-edit .ms-line.is-sec-hover{
  fill: rgba(56,189,248,1) !important;        /* bleu */
  fill-opacity: 1 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.35))
          drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Quand on est en mode assign, la liste devient un “picker” */
.map-right.is-assigning .map-sec-row{
  cursor: pointer;
}

.map-right.is-assigning .map-sec-row:hover{
  background: rgba(56,189,248,.10);
  border-color: rgba(56,189,248,.30);
}

/* =========================================================
   MAP — hauteur carte = hauteur sections (fit viewport)
   Objectif:
   - la carte et le panneau sections ont EXACTEMENT la même hauteur
   - on garde ~10% du bas de l'écran libre
   ========================================================= */

.inventory-page{
  /* ajuste si tu veux: plus grand/petit */
  --map-reserve-bottom: 10vh;          /* garde 10% en bas */
  --map-top-offset: 220px;             /* header + top ui approximatif */
  --map-pane-h: clamp(
    520px,
    calc(100vh - var(--map-top-offset) - var(--map-reserve-bottom)),
    820px
  );
}

/* La card map prend une hauteur fixe (viewport slice) */
#inventory-map-pane .map-card{
  height: var(--map-pane-h);
  display: flex;
  flex-direction: column;
}

/* Le layout (carte | sections) s'étire en hauteur */
#inventory-map-pane .map-layout{
  flex: 1 1 auto;
  align-items: stretch; /* IMPORTANT */
}

/* La colonne gauche et droite ont la même hauteur */
#inventory-map-pane .map-left,
#inventory-map-pane .map-right{
  height: 100%;
}

/* La zone canvas (wrap) prend toute la hauteur */
#inventory-map-pane .map-canvas-wrap{
  height: 100%;
  overflow: hidden; /* évite que ça change la hauteur */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMPORTANT: si tu veux garder le scroll pour la map quand trop grand:
   remplace overflow:hidden par overflow:auto */
#inventory-map-pane .map-canvas-wrap{
  overflow: auto;
}

/* Panneau sections: head + body => body prend le reste */
#inventory-map-pane .map-right{
  display: flex;
  flex-direction: column;
}

#inventory-map-pane .map-right-head{
  flex: 0 0 auto;
}

#inventory-map-pane .map-right-body{
  flex: 1 1 auto;
  overflow: hidden;      /* pas de scroll vertical ici */
  display: flex;
  min-height: 0;         /* crucial dans un flex container */
}

/* La grille des sections remplit exactement la hauteur dispo */
#map-assigned-sections.map-sections{
  height: 100%;
  width: 100%;
  display: grid;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr); /* chaque row partage la hauteur */
  gap: 6px;

  /* variables contrôlées par JS */
  --sec-font: 0.76rem;
  --sec-pad-y: 5px;
}

/* Chaque row s'étire, et le texte se centre verticalement */
.map-sec-row{
  display: flex;
  align-items: center;
  padding: var(--sec-pad-y) 8px; /* au lieu de 5px 8px fixe */
  min-height: 0;
}

/* Taille de texte dynamique */
.map-sec-name{
  font-size: var(--sec-font);
  line-height: 1.05;
}

/* =========================================================
   MAP — containment + squeeze top (fix overflow)
   - Empêche les 2 boxes internes de déborder de la grosse card
   - Squeeze header/paddings pour aligner "première section" avec la grille
   ========================================================= */

/* 1) La grosse card devient un vrai conteneur (pas de débordement visuel) */
#inventory-map-pane .map-card{
  overflow: hidden;            /* clé: coupe ce qui dépasse */
  padding: 10px;               /* un peu moins */
  border-radius: 14px;
}

/* 2) Le layout doit pouvoir shrink correctement */
#inventory-map-pane .map-layout{
  height: 100%;
  min-height: 0;               /* CRUCIAL dans un parent avec hauteur fixée */
  align-items: stretch;
}

/* 3) Les 2 colonnes prennent 100% et peuvent shrink */
#inventory-map-pane .map-left,
#inventory-map-pane .map-right{
  height: 100%;
  min-height: 0;
}

/* 4) La box carte: moins de padding en haut, et scroll interne si nécessaire */
#inventory-map-pane .map-canvas-wrap{
  height: 100%;
  min-height: 0;

  padding: 10px;               /* AVANT 14px -> squeeze */
  padding-top: 8px;            /* squeeze top */
  overflow: auto;              /* scroll interne si nécessaire */
}

/* 5) La gear ne doit pas "manger" de hauteur visuelle */
#inventory-map-pane .map-gear-btn{
  top: 8px;                    /* un peu plus haut */
  right: 8px;
}

/* 6) Panneau Sections: structure flex et squeeze top */
#inventory-map-pane .map-right{
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* évite le débordement bas */
}

#inventory-map-pane .map-right-head{
  flex: 0 0 auto;
  padding: 8px 10px 6px;       /* AVANT 12/10 -> squeeze */
}

#inventory-map-pane .map-right-title{
  font-size: .92rem;           /* léger squeeze */
  line-height: 1.1;
}

/* bouton "assign" compact pour gagner 4-6px */
#inventory-map-pane #btn-map-assign-sections{
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: .76rem;
}

/* body prend le reste, sans padding vertical excessif */
#inventory-map-pane .map-right-body{
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 10px 10px;      /* AVANT 10/12 -> squeeze */
  overflow: hidden;            /* pas de scroll, fit only */
  display: flex;
}

/* Liste sections: fill height + rows égales */
#inventory-map-pane #map-assigned-sections.map-sections{
  height: 100%;
  width: 100%;
  min-height: 0;

  display: grid;
  align-content: stretch;
  grid-auto-rows: minmax(0, 1fr);
  gap: 6px;
}

/* Les rows: squeeze vertical + centré */
#inventory-map-pane .map-sec-row{
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 4px 8px;            /* squeeze (AVANT 5px 8px) */
}

#inventory-map-pane .map-sec-name{
  line-height: 1.05;
}

/* Optionnel: si tu veux que la première section commence "plus haut" visuellement */
#inventory-map-pane .map-right-body{
  padding-top: 4px;
}

/* =========================================================
   MAP — Edit highlight "devant" (ne se fait pas clipper)
   Remplace l'outline par un overlay ::after au-dessus.
   ========================================================= */

/* On enlève l'ancien outline (sinon double effet) */
.map-canvas-wrap.is-edit{
  outline: none !important;
}

/* Le wrap sert déjà de conteneur (il est position:relative chez toi) */
.map-canvas-wrap.is-edit::after{
  content: "";
  position: absolute;
  inset: 6px; /* marge intérieure, ajuste 4-10px */
  border-radius: 14px;

  border: 2px solid rgba(59,130,246,.75);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.16),
    0 18px 50px rgba(0,0,0,.35);

  pointer-events: none;
  z-index: 200; /* au-dessus du svg + hit layer + gear */
}

/* Optionnel: un léger glow animé (si tu veux)
@keyframes msPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(59,130,246,.12), 0 18px 50px rgba(0,0,0,.35); }
  50%     { box-shadow: 0 0 0 6px rgba(59,130,246,.18), 0 18px 50px rgba(0,0,0,.35); }
}
.map-canvas-wrap.is-edit::after{ animation: msPulse 1.8s ease-in-out infinite; }
*/

/* =========================================================
   MAP — Hover section BLEU aussi en VIEW mode
   (visuel uniquement, aucune interaction)
   ========================================================= */

/* Hover section en VIEW mode */
.map-canvas-wrap:not(.is-edit) .ms-line.is-sec-hover{
  fill: rgba(56,189,248,1);
  fill-opacity: 1 !important;
  opacity: 1 !important;

  /* même glow que edit, mais un poil plus soft */
  filter:
    drop-shadow(0 0 8px rgba(56,189,248,.30))
    drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

/* View mode: hover seulement, pas de curseur "click" agressif */
.map-canvas-wrap:not(.is-edit) .ms-line{
  cursor: default;
}

/* =========================================================
   MAP — Confirm assign centré (au milieu écran)
   ========================================================= */

#map-assign-confirm{
  position: fixed !important;
  z-index: 5000 !important;

  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;

  width: min(420px, calc(100vw - 28px));
  max-width: 420px;
}

#map-assign-confirm::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: -1;
}


/* En mobile / petit écran, on centre */
@media (max-width: 900px){
  #map-assign-confirm{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 120px;
  }
}



#inventory-shelves-pane .shelves-card-inner{
  padding: 12px;              /* padding interne propre */
}

/* Topbar = header de card */
#inventory-shelves-pane .shelves-topbar{
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}

/* Shelves: titre section plus gros, plus “hero” */
#inventory-shelves-pane #shelves-section-name{
  font-size: 1.35rem;     /* ajuste 1.25–1.5 selon goût */
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}

#inventory-shelves-pane .shelves-title{
  text-align: center;
}

/* =========================================================
   SHELVES — Mode édition (visuel clair, sans bouger les cards)
   ========================================================= */

/* Outline premium sur toute la zone shelves */
#inventory-shelves-pane.is-edit .shelves-card-inner{
  box-shadow: 0 0 0 3px rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.18);
}

/* Les cartes deviennent “non cliquables” visuellement */
#inventory-shelves-pane.is-edit .ms-tablet-card{
  cursor: default !important;
}

/* On réduit le hover/active des cartes en mode edit (si ton navigateur applique un style) */
#inventory-shelves-pane.is-edit .ms-tablet-card:hover{
  filter: none !important;
  transform: none !important;
}

/* On “dé-focus” un peu le contenu (subtil) pour que X/+ ressortent */
#inventory-shelves-pane.is-edit .ms-tablet-card{
  opacity: .92;
}

/* Les boutons overlay (X / +) doivent rester super clairs */
#inventory-shelves-pane.is-edit .ms-tablet-card [data-action="hide-tablet"],
#inventory-shelves-pane.is-edit .ms-tablet-card [data-action="restore-tablet"]{
  cursor: pointer !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}



#inventory-shelves-pane.is-edit .ms-tablets{
  filter: saturate(.95);
}

/* ===== Shelves cards: containment pour éviter que le texte déborde ===== */
#inventory-shelves-pane .ms-tablets{
  width: 100%;
  max-width:none;
}

/* Cards shelves: containment + pas de débordement */
#inventory-shelves-pane .ms-tablet-card{
  min-width: 0;
  overflow: hidden;
  min-height: 108px; /* force même hauteur partout */
}

/* Ellipsis uniquement sur les zones texte */
#inventory-shelves-pane .ms-tt,
#inventory-shelves-pane .ms-sub,
#inventory-shelves-pane .ms-fl span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Ligne first/last : conserve la même hauteur */
#inventory-shelves-pane .ms-fl{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  font-size:.86rem;
  min-height: 20px; /* fixe la hauteur de la ligne */
}
#inventory-shelves-pane .ms-fl .dots{ opacity:.45; flex:0 0 auto; }
#inventory-shelves-pane .ms-fl .left{ max-width:48%; }
#inventory-shelves-pane .ms-fl .right{ max-width:48%; margin-left:auto; text-align:right; }


/* ===== Edit actions: overlay à droite (ne pousse pas le layout) ===== */
#inventory-shelves-pane .shelves-actions{
  position: relative;
}

/* Le groupe +rangée/+colonne devient un overlay à droite du bouton Modifier */


/* Hidden = vraiment caché */
#inventory-shelves-pane #shelves-edit-actions.hidden{
  display: none !important;
}

/* =========================================================
   SHELVES — Ghost add-panel (V12)
   ========================================================= */

/* Sécurise la grille: les colonnes peuvent shrink */
#inventory-shelves-pane .ms-tablets{
  min-width: 0;
}

/* Les cards (incluant ghost) ne doivent jamais overflow */
#inventory-shelves-pane .ms-tablet-card{
  min-width: 0;
}

/* Style premium pour les ghost boxes (+ à droite et + en bas) */
#inventory-shelves-pane .ms-tablet-card[data-action="add-cell-right"],
#inventory-shelves-pane .ms-tablet-card[data-action="add-cell-bottom"]{
  background:
    radial-gradient(800px 220px at 10% 0%, rgba(56,189,248,0.10) 0%, rgba(255,255,255,0.012) 55%),
    rgba(255,255,255,0.012) !important;
  border: 1px dashed rgba(235,245,255,0.22) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 14px 34px rgba(0,0,0,0.28) !important;

  transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

#inventory-shelves-pane .ms-tablet-card[data-action="add-cell-right"]:hover,
#inventory-shelves-pane .ms-tablet-card[data-action="add-cell-bottom"]:hover{
  border-color: rgba(56,189,248,0.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 18px 44px rgba(0,0,0,0.36) !important;
  transform: translateY(-1px);
}

/* Le bouton + de la ghost box: plus net */
#inventory-shelves-pane .ms-tablet-card[data-action="add-cell-right"] span,
#inventory-shelves-pane .ms-tablet-card[data-action="add-cell-bottom"] span{
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* En mode VIEW, cacher les ghost (+) */
#inventory-shelves-pane:not(.is-edit) .ms-tablet-card[data-action="add-cell-right"],
#inventory-shelves-pane:not(.is-edit) .ms-tablet-card[data-action="add-cell-bottom"]{
  display: none !important;
}

/* VIEW mode: on garde les trous pour éviter le "re-pack" de la grille */
#inventory-shelves-pane .ms-tablet-spacer{
  min-height: 108px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
}

.ms-tablet-line1{
  font-weight:900;
  font-size:1rem;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ms-tablet-line2,
.ms-tablet-line3,
.ms-tablet-line4{
  font-size:.86rem;
  color: rgba(180,200,220,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ms-tablet-arrow{ opacity:.55; }

/* Produit dans une tablette */
.ms-tablet-prod{
  margin-top:6px;
  font-size:.95rem;              /* ↑ lisibilité */
  line-height:1.25;
  color: rgba(235,245,255,.92);  /* ↑ contraste */
  display:-webkit-box;
  -webkit-line-clamp:2;          /* MAX 2 lignes */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}

/* Premier produit = plus important visuellement */
.ms-tablet-prod.first{
  font-weight:800;
}

/* Dernier produit = légèrement atténué */
.ms-tablet-prod.last{
  margin-top:2px;
  font-weight:600;
  color: rgba(210,225,240,.82);
}

/* Flèche discrète mais lisible */
.ms-tablet-arrow{
  margin-left:4px;
  opacity:.6;
  font-weight:900;
}

/* =========================================================
   SHELVES — largeur pleine comme mode Grille
   ========================================================= */

#inventory-shelves-pane .shelves-card{
  width: 100%;
  max-width: none;     /* 🔥 clé */
  margin: 0;           /* 🔥 clé */
}

/* SHELVES — la grille doit remplir la card */
#inventory-shelves-pane .ms-tablets{
  width: 100% !important;
  max-width: none !important;
}

/* Si un parent force un centrage, on l'annule */
#inventory-shelves-pane .shelves-card-inner{
  display: block;
}

/* SHELVES — Titre (molécule / section) plus lisible */
#inventory-shelves-pane .shelves-title-main,
#inventory-shelves-pane #shelves-section-name{
  font-size: 1.55rem !important;
  font-weight: 950 !important;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(235,245,255,.96);
}

/* Sous-titre (ex: "A TO Z — A1") plus clair */
#inventory-shelves-pane .shelves-title-sub,
#inventory-shelves-pane #shelves-title-sub{
  font-size: .95rem !important;
  color: rgba(210,225,245,.78) !important;
  font-weight: 650;
}

#inventory-shelves-pane .ms-tablet-prod{
  font-size: 1.02rem !important;
  line-height: 1.22 !important;
}


.ds-col-date,
.ds-col-time{
  width: 64px;
  white-space: nowrap;
  font-size: 12px;
  opacity: .85;
}
.ds-col-time{ width: 58px; }

/* ===============================
   QUICK HISTORY — alignement colonnes
   =============================== */

/* Nom produit : reste à gauche, prend l’espace restant */
.inventory-page .inv-history .inv-quick-table th:nth-child(1),
.inventory-page .inv-history .inv-quick-table td:nth-child(1){
  text-align: left;
  padding-right: 8px;
}

/* Colonnes 2 → 6 tassées à droite */
.inventory-page .inv-history .inv-quick-table th:nth-child(n+2),
.inventory-page .inv-history .inv-quick-table td:nth-child(n+2){
  text-align: right;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 4px;
}

/* Largeurs précises (tight) */
.inventory-page .inv-history .inv-quick-table th:nth-child(2),
.inventory-page .inv-history .inv-quick-table td:nth-child(2){
  width: 54px;   /* Date */
}

.inventory-page .inv-history .inv-quick-table th:nth-child(3),
.inventory-page .inv-history .inv-quick-table td:nth-child(3){
  width: 52px;   /* Heure */
}

.inventory-page .inv-history .inv-quick-table th:nth-child(4),
.inventory-page .inv-history .inv-quick-table td:nth-child(4){
  width: 64px;   /* Format */
}

.inventory-page .inv-history .inv-quick-table th:nth-child(5),
.inventory-page .inv-history .inv-quick-table td:nth-child(5){
  width: 36px;   /* Qté */
}

.inventory-page .inv-history .inv-quick-table th:nth-child(6),
.inventory-page .inv-history .inv-quick-table td:nth-child(6){
  width: 64px;   /* Annuler */
}

.quarantine-table thead th.col-product,
.quarantine-table thead th.col-qty,
.quarantine-table thead th.col-lot,
.quarantine-table thead th.col-exp {
  cursor: pointer;
  user-select: none;
}

/* =========================================================
   INVENTAIRE — FIX ALIGN "Qté" (header = chiffres)
   Cause: padding thead != padding td
   ========================================================= */

.inventory-page .inv-table thead th:nth-child(4),
.inventory-page .inv-table tbody td:nth-child(4){
  text-align: right !important;
  white-space: nowrap !important;

  /* même gouttière visuelle que les chiffres */
  padding-left: .6rem !important;
  padding-right: 32px !important;  /* crée l'espace avant Min/Max */
}

.inventory-page .inv-table thead th:nth-child(4){
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;
}

/* =========================================================
   INVENTAIRE — ALIGN PARFAIT "Qté" au-dessus des chiffres
   + colonne Qté un peu plus "vers DIN" (moins jam-packed)
   (override final, gagne la cascade)
   ========================================================= */

/* 1) Verrouille un layout stable */
.inventory-page .inv-group-body .inv-table{
  table-layout: fixed !important;
}

/* 2) Force des largeurs cohérentes (Qté un peu plus large => respire et "shift" vers DIN) */
.inventory-page .inv-group-body .inv-table th:nth-child(1),
.inventory-page .inv-group-body .inv-table td:nth-child(1){ width: 38% !important; }

.inventory-page .inv-group-body .inv-table th:nth-child(2),
.inventory-page .inv-group-body .inv-table td:nth-child(2){ width: 14% !important; } /* Format */

.inventory-page .inv-group-body .inv-table th:nth-child(3),
.inventory-page .inv-group-body .inv-table td:nth-child(3){ width: 14% !important; } /* DIN */

.inventory-page .inv-group-body .inv-table th:nth-child(4),
.inventory-page .inv-group-body .inv-table td:nth-child(4){ width: 12% !important; } /* Qté (plus large) */

/* 3) IMPORTANT: le header avait un padding différent => on l'aligne sur les cellules */
.inventory-page .inv-group-body .inv-table thead th{
  padding: .55rem .6rem !important;   /* identique à tes td */
  text-align: left;
}

/* 4) Alignements par colonne (header = valeurs) */
.inventory-page .inv-group-body .inv-table th:nth-child(2),
.inventory-page .inv-group-body .inv-table td:nth-child(2){
  text-align: left !important;
  white-space: nowrap !important;
}

.inventory-page .inv-group-body .inv-table th:nth-child(3),
.inventory-page .inv-group-body .inv-table td:nth-child(3){
  text-align: left !important;
  white-space: nowrap !important;
}

/* 5) Qté: EXACTEMENT le même axe pour "Qté" et "0" */
.inventory-page .inv-group-body .inv-table th:nth-child(4),
.inventory-page .inv-group-body .inv-table td:nth-child(4){
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 700 !important;

  /* même gouttière pour TH et TD => "Qté" pile au-dessus du 0 */
  padding-left: .6rem !important;
  padding-right: 40px !important;  /* espace avant Min/Max, sans bouger Min/Max */
}

/* =========================================================
   INVENTAIRE — Qté ALIGNÉ À GAUCHE (titre + chiffres)
   Objectif:
   - "Qté" exactement au-dessus du "0"
   - le "0" à gauche de la zone Qté (pas collé au widget)
   - garder un espace avant Min/Max
   ========================================================= */

.inventory-page .inv-group-body .inv-table th:nth-child(4),
.inventory-page .inv-group-body .inv-table td:nth-child(4){
  text-align: left !important;        /* ✅ clé: 0 aligné à gauche */
  white-space: nowrap !important;
  font-weight: 750 !important;

  /* même padding header/cell => titre pile au-dessus du chiffre */
  padding-left: .6rem !important;
  padding-right: 34px !important;    /* espace avant Min/Max (ajuste 28–44) */

  font-variant-numeric: tabular-nums;
}

/* STOCK V2 — Retrait rapide fixe */
.inventory-page .inv-top{
  display: grid;
  grid-template-columns: 1fr minmax(680px, 820px) 1fr;
  align-items: start;
}

.inventory-page .inv-quick-panel{
  grid-column: 2;
  width: 100%;
  justify-self: center;
}

.inventory-page .inv-badges{
  grid-column: 3;
  justify-self: end;
}

/* HEADER — badges globaux */
.inventory-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

.inv-global-metrics-header{
  margin-left: auto; /* 🔥 push à droite */
  display: flex;
  gap: 8px;
  align-items: center;
}

.inv-global-metrics-header .sec-metric--global{
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
}