/* ═══════════════════════════════════════════════════════════════
   STOCKS
   ═══════════════════════════════════════════════════════════════

   La mise en page de la page Stocks. Les pastilles d'etat, elles, sont
   dans main.css sous .stock-pill : elles servent aussi a la liste des
   commandes et a la fiche d'une commande, et une seconde table de
   couleurs finirait par dire autre chose que la premiere.
   ═══════════════════════════════════════════════════════════════ */

.st-shell{ padding: var(--space-6); }

.st-header{ margin-bottom: var(--space-4); }
.st-th-hint{
    font-size: .6rem; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--grey-300); margin-left: 3px;
}
.st-kicker{
    font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--grey-400);
    margin-bottom: var(--space-1);
}
.st-title{ font-size: 1.6rem; font-weight: 900; color: var(--grey-900); margin: 0; }
.st-sub{
    font-size: .82rem; color: var(--grey-500);
    margin-top: var(--space-2); max-width: 62ch; line-height: 1.5;
}

/* ── Les cartes ──────────────────────────────────────────────── */
/* Copie de .cpt-stats / .cpt-stat (compta.css) : cette page n a pas a en
   apprendre une autre. */

.st-stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.st-stat{ background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; padding: var(--space-4); position: relative; overflow: hidden; }
.st-stat::after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--sa, var(--psg-navy)); opacity: .3; }
.st-stat-label{ font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--grey-500); }
.st-stat-value{ font-size: 1.2rem; font-weight: 800; color: var(--psg-navy); margin-top: 5px; }

/* ── Les onglets ─────────────────────────────────────────────── */
/* Copie de .cmd-stats / .cmd-stat (commandes.css), au caractere pres :
   overflow-y cache et trait actif en ombre INTERNE, jamais en marge
   negative --- c est ce qui evite a la fois le trait coupe et la barre de
   defilement verticale de deux pixels. Seule la marge externe change. */

.st-tabs{ display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 var(--space-5); background: #fff; flex-shrink: 0; margin: 0 0 var(--space-4); border-radius: 10px; border: 1px solid #d9d9d9; }
.st-tabs::-webkit-scrollbar{ height: 5px; }
.st-tabs::-webkit-scrollbar-thumb{ background: var(--grey-200); border-radius: 999px; }
.st-tabs::-webkit-scrollbar-track{ background: transparent; }
.st-tab{ display: inline-flex; align-items: center; gap: 6px; padding: 11px 11px; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s; flex-shrink: 0; white-space: nowrap; color: var(--grey-400); user-select: none; }
.st-tab:hover{ color: var(--grey-700); }
.st-tab.active{ color: var(--psg-navy); box-shadow: inset 0 -2px 0 var(--psg-navy); }
.st-tab svg{ width: 14px; height: 14px; flex-shrink: 0; }
.st-tab-label{ font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.st-tab-count{ font-size: .65rem; font-weight: 800; background: var(--grey-100); border-radius: 999px; padding: 1px 7px; color: var(--grey-500); }
.st-tab.active .st-tab-count{ background: var(--psg-navy); color: #fff; }
.st-tab.urgence{ color: #dc2626; }
.st-tab.urgence .st-tab-count{ background: #fee2e2; color: #dc2626; }
.st-tab.urgence.active{ box-shadow: inset 0 -2px 0 #dc2626; }
.st-tab.urgence.active .st-tab-count{ background: #dc2626; color: #fff; }

/* ── La barre d outils, dans la carte ────────────────────────── */

.st-toolbar{
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--grey-100);
}
.st-toolbar .st-filter{ height: 38px; }

/* ── Les boutons d action, comme sur Profils de cle ───────────── */

.st-actions{ display: flex; gap: 6px; }
.st-actions .btn{ padding: 4px 10px; }
.st-actions svg{ width: 13px; height: 13px; display: block; }

.st-wh-col{ text-align: right; font-variant-numeric: tabular-nums; color: var(--grey-600); }
.st-wh-col b{ color: var(--grey-800); }
.st-fournisseur{ font-size: .76rem; color: var(--grey-600); }

.st-count{
    font-size: .74rem; font-weight: 700; color: var(--grey-400);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Le tableau ──────────────────────────────────────────────── */

.st-table-wrap{ overflow-x: auto; }
.st-table{ width: 100%; border-collapse: collapse; }
.st-table th{
    text-align: left; padding: var(--space-3) var(--space-4);
    font-size: .68rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--grey-400);
    border-bottom: 1px solid var(--grey-200); white-space: nowrap;
}
.st-table td{
    padding: var(--space-3) var(--space-4);
    font-size: .82rem; color: var(--grey-700);
    border-bottom: 1px solid var(--grey-100); vertical-align: middle;
}
.st-table tbody tr:hover{ background: var(--grey-50); }
.st-num{ text-align: right; font-variant-numeric: tabular-nums; }
.st-actions-col{ width: 1%; white-space: nowrap; }

.st-sku{ font-family: var(--font-mono); font-size: .74rem; color: var(--grey-500); }
.st-name{ font-weight: 600; color: var(--grey-800); }

/* Un produit variable est un en-tete de groupe : il ne se stocke pas
   lui-meme, ce sont ses variations qui existent physiquement. */
.st-parent{ background: var(--grey-50); }
.st-parent td{ font-weight: 800; color: var(--grey-800); }
.st-parent-hint{
    font-size: .68rem; font-weight: 600; color: var(--grey-400);
    text-transform: none; letter-spacing: 0;
}
/* Une variation est decalee sous son parent : l'indentation EST ce qui
   la rattache, puisqu'elle ne porte que son attribut (« Laiton »). */
.st-child td:first-child{ padding-left: var(--space-8); }

.st-qte{ font-weight: 800; color: var(--grey-800); font-variant-numeric: tabular-nums; }
.st-qte-zero{ color: var(--psg-red); }
/* Le tiret dit « cette question ne se pose pas ici », la ou un zero
   ferait croire a une rupture. */
.st-qte-na{ color: var(--grey-300); }

.st-consigne{ font-size: .76rem; color: var(--grey-500); }
.st-consigne-fournisseur{ color: var(--info); font-weight: 600; }

.st-alert{
    display: inline-block; margin-left: var(--space-2);
    font-size: .64rem; font-weight: 800; text-transform: uppercase;
    color: var(--warning);
}

.st-empty{ padding: 48px; text-align: center; color: var(--grey-400); font-size: .84rem; }

/* Les pastilles d'etat vivent dans main.css, sous .stock-pill : trois
   ecrans les emploient --- cette page, la liste des commandes et la fiche
   d'une commande --- et deux tables de couleurs finiraient par diverger. */

/* ── La pagination ───────────────────────────────────────────── */

.st-pager{
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-3); padding: var(--space-4);
    border-top: 1px solid var(--grey-100);
}
.st-pager:empty{ display: none; }
.st-pager-info{ font-size: .76rem; color: var(--grey-500); font-variant-numeric: tabular-nums; }

/* ── Les fenetres ────────────────────────────────────────────── */

.st-modal{
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.45); padding: var(--space-4);
}
.st-modal[hidden]{ display: none; }
.st-modal-box{
    background: #fff; border-radius: var(--radius-lg);
    width: 100%; max-width: 520px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 50px rgba(15,23,42,.25);
}
.st-modal-wide{ max-width: 940px; }
.st-modal-head{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); padding: var(--space-5);
    border-bottom: 1px solid var(--grey-200);
}
.st-modal-title{ font-size: 1rem; font-weight: 800; color: var(--grey-900); }
.st-modal-sub{
    font-size: .74rem; color: var(--grey-500);
    margin-top: 2px; max-width: 60ch; line-height: 1.45;
}
.st-modal-body{ padding: var(--space-5); overflow-y: auto; }
.st-modal-foot{
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--grey-200);
}
.st-close{
    background: none; border: 0; cursor: pointer;
    font-size: 1.5rem; line-height: 1; color: var(--grey-400); padding: 0 4px;
}
.st-close:hover{ color: var(--grey-700); }

.st-field{ margin-bottom: var(--space-4); }
.st-field-grow{ flex: 1 1 180px; min-width: 0; }
.st-label{
    display: block; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--grey-500); margin-bottom: var(--space-2);
}
.st-input{
    width: 100%; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--grey-200); border-radius: var(--radius-md);
    font-family: var(--font-sans); font-size: .84rem; color: var(--grey-800);
    background: #fff;
}
.st-input:focus{ outline: 2px solid var(--psg-gold); outline-offset: -1px; }
.st-input-sm{ max-width: 150px; }
.st-input-xs{ max-width: 90px; }

.st-transfer{
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    background: rgba(59,130,246,.06); border-radius: var(--radius-md);
    font-size: .78rem; color: var(--grey-600);
}
.st-transfer[hidden]{ display: none; }
.st-transfer-label{ font-weight: 800; color: var(--grey-700); }
.st-transfer-stock{ margin-left: auto; font-size: .72rem; color: var(--grey-400); font-variant-numeric: tabular-nums; }

.st-wh-add{
    display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
    padding-top: var(--space-4); margin-top: var(--space-4);
    border-top: 1px solid var(--grey-200);
}
.st-wh-add .st-input{ flex: 1 1 140px; }
.st-wh-off{ color: var(--grey-400); }
.st-wh-off td{ text-decoration: line-through; }
.st-hint{
    font-size: .72rem; color: var(--grey-400);
    margin-top: var(--space-2); line-height: 1.45;
}

.st-error{
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    background: rgba(218,41,28,.08); border-radius: var(--radius-md);
    color: var(--psg-red); font-size: .78rem; font-weight: 600; line-height: 1.45;
}
.st-error[hidden]{ display: none; }

.st-move-form{
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--grey-200);
}
.st-move-form .st-field{ margin-bottom: 0; }
.st-table-sm td, .st-table-sm th{ padding: var(--space-2) var(--space-3); font-size: .76rem; }

/* Les colonnes de prix se retirent quand le droit « finance » manque. Sur une
   cellule de tableau, l'attribut [hidden] se fait battre par le display:
   table-cell de la feuille du navigateur des qu'un auteur touche au display —
   on le dit donc explicitement plutot que d'en dependre. */
.st-finance[hidden]{ display: none; }

.st-mvt-plus{ color: #047857; font-weight: 800; }
.st-mvt-moins{ color: var(--psg-red); font-weight: 800; }


@media (max-width: 720px){
    .st-shell{ padding: var(--space-4); }
}

/* ── Regler toute une categorie ────────────────────────────────
 *
 * Presque tout vient du fournisseur au depart : une reference a deja un
 * fournisseur principal avant qu on ait du stock propre. Ce dialogue regle
 * une marque entiere, puis on affine a la main les rares references qu on
 * tient vraiment en rayon.
 */
.st-champ{ display:block; margin-bottom: var(--space-4); }
/* Le champ de seuil porte [hidden] : sans cette ligne, le display ci-dessus
   le battait et le champ restait visible. Meme piege que .st-finance plus
   haut, meme parade. */
.st-champ[hidden]{ display: none; }
.st-champ-label{ display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-500); margin-bottom:4px; }
.st-champ-aide{ display:block; font-size:.7rem; font-weight:600; color:var(--grey-400); line-height:1.45; margin-top:4px; }
.st-case{ display:flex; align-items:flex-start; gap:9px; padding:10px 12px; background:var(--grey-50); border:1px solid var(--grey-200); border-radius:8px; cursor:pointer; }
.st-case input{ width:15px; height:15px; margin-top:2px; flex-shrink:0; cursor:pointer; }
.st-case strong{ display:block; font-size:.78rem; color:var(--grey-800); }
.st-modal-pied{ display:flex; justify-content:flex-end; gap:8px; padding: var(--space-4) var(--space-5); border-top:1px solid var(--grey-100); background:var(--grey-50); }
.st-lot-msg{ margin-top: var(--space-4); padding:10px 12px; border-radius:8px; font-size:.78rem; font-weight:700; }
.st-lot-msg.ok{ background:#f0fdf4; color:#166534; }
.st-lot-msg.ko{ background:#fef2f2; color:#dc2626; }