/*
 * Les Stocks prévisionnels (App\Filament\Pages\ProjectedStockPage) : la grille de la maquette de Benjamin du 20/10 — une ligne
 * par SKU, une colonne par semaine, la colonne article et le « manque max » figés pendant le défilement. Filament n'a ni
 * colonne ni en-tête figés : la grille est un tableau à elle, dans un cadre qui défile. Toutes les règles sous .smoon-stock.
 * Publiée comme rail.css par filament:assets (public/css/app/).
 */
.smoon-stock {
    --smoon-stock-line: var(--gray-200);
    --smoon-stock-head: var(--gray-50);
    --smoon-stock-art: #fff;
    --smoon-stock-red: var(--danger-100);
    --smoon-stock-red-text: var(--danger-700);
    --smoon-stock-orange: var(--warning-100);
    --smoon-stock-orange-text: var(--warning-800);
    /* Le vert du texte des appros : success-700, lisible sur blanc et sur rouge pâle (passe visuelle du 22/10 : 2,6:1 en 600). */
    --smoon-stock-green: var(--success-700);
    /* Le gris du besoin d'une case du CBN, au-dessus de son stock de fin : lisible sur blanc et sur l'orange d'un stock négatif. */
    --smoon-stock-out: var(--gray-600);
    font-size: 0.8125rem;
}

.dark .smoon-stock {
    --smoon-stock-line: var(--gray-700);
    --smoon-stock-head: var(--gray-800);
    --smoon-stock-art: var(--gray-900);
    --smoon-stock-red: color-mix(in oklab, var(--danger-500) 30%, transparent);
    --smoon-stock-red-text: var(--danger-300);
    --smoon-stock-orange: color-mix(in oklab, var(--warning-500) 25%, transparent);
    --smoon-stock-orange-text: var(--warning-300);
    --smoon-stock-green: var(--success-400);
    --smoon-stock-out: var(--gray-400);
}

.smoon-stock-note {
    color: var(--gray-500);
    margin: 0.25rem 0;
}

.smoon-stock-error {
    color: var(--danger-600);
    font-weight: 600;
}

.smoon-stock-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0;
}

.smoon-stock-bar label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gray-600);
}

.dark .smoon-stock-bar label {
    color: var(--gray-300);
}

.smoon-stock-bar select,
.smoon-stock-bar input[type='search'] {
    border: 1px solid var(--smoon-stock-line);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--smoon-stock-art);
    color: inherit;
}

.smoon-stock-bar .seg {
    display: inline-flex;
    border: 1px solid var(--smoon-stock-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.smoon-stock-bar .seg button {
    padding: 0.25rem 0.625rem;
    border-inline-start: 1px solid var(--smoon-stock-line);
}

.smoon-stock-bar .seg button:first-child {
    border-inline-start: 0;
}

.smoon-stock-bar .seg button[aria-pressed='true'] {
    background: var(--primary-600);
    color: #fff;
}

.smoon-stock-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.smoon-stock-kpis .kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--smoon-stock-line);
    border-inline-start-width: 4px;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    text-align: start;
    background: var(--smoon-stock-art);
}

.smoon-stock-kpis .kpi.crit {
    border-inline-start-color: var(--danger-500);
}

.smoon-stock-kpis .kpi.warn {
    border-inline-start-color: var(--warning-500);
}

.smoon-stock-kpis .kpi.in {
    border-inline-start-color: var(--success-500);
}

.smoon-stock-kpis .kpi.eos {
    border-inline-start-color: var(--gray-400);
}

.smoon-stock-kpis .kpi.active {
    outline: 2px solid var(--primary-500);
}

.smoon-stock-kpis .l {
    color: var(--gray-500);
}

.smoon-stock-kpis .v {
    font-size: 1.25rem;
    font-weight: 700;
}

.smoon-stock-kpis .h {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.smoon-stock-legend {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.smoon-stock-legend .sw {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.25rem 0 0.75rem;
    vertical-align: -0.1rem;
    border-radius: 0.125rem;
}

.smoon-stock-legend .sw.w {
    background: var(--smoon-stock-orange);
}

.smoon-stock-legend .sw.c {
    background: var(--smoon-stock-red);
}

.smoon-stock-legend .sw.in {
    border-inline-start: 3px solid var(--smoon-stock-green);
    background: var(--smoon-stock-head);
}

/* Le cadre qui défile : l'en-tête figé en haut, l'article à gauche, le manque à droite. */
.smoon-stock-grid {
    max-height: calc(100vh - 14rem);
    min-height: 20rem;
    overflow: auto;
    border: 1px solid var(--smoon-stock-line);
    border-radius: 0.5rem;
}

.smoon-stock-grid table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}

.smoon-stock-grid th,
.smoon-stock-grid td {
    border-bottom: 1px solid var(--smoon-stock-line);
    padding: 0.25rem 0.375rem;
    white-space: nowrap;
}

.smoon-stock-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--smoon-stock-head);
    font-weight: 600;
    text-align: center;
}

.smoon-stock-grid th .sub {
    display: block;
    font-weight: 400;
    color: var(--gray-500);
    font-size: 0.6875rem;
}

.smoon-stock-grid .art {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 15rem;
    background: var(--smoon-stock-art);
    border-inline-end: 1px solid var(--smoon-stock-line);
    text-align: start;
}

.smoon-stock-grid thead .art {
    z-index: 3;
    background: var(--smoon-stock-head);
}

.smoon-stock-grid .gap {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--smoon-stock-art);
    border-inline-start: 1px solid var(--smoon-stock-line);
    text-align: end;
}

.smoon-stock-grid thead .gap {
    z-index: 3;
    background: var(--smoon-stock-head);
}

.smoon-stock-grid td.gap {
    font-variant-numeric: tabular-nums;
}

.smoon-stock-grid td.gap.has {
    color: var(--smoon-stock-red-text);
    font-weight: 600;
}

.smoon-stock-grid tbody tr[data-i] {
    cursor: pointer;
}

.smoon-stock-grid tbody tr:hover td {
    filter: brightness(0.97);
}

.smoon-stock-grid .art .n {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.smoon-stock-grid .art .nm {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.smoon-stock-grid .art .m {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    color: var(--gray-500);
    font-size: 0.75rem;
}

.smoon-stock-grid tr.child .art {
    padding-inline-start: 1.5rem;
}

.smoon-stock-grid tr.grp {
    cursor: pointer;
}

.smoon-stock-grid tr.grp td {
    background: var(--smoon-stock-head);
}

.smoon-stock-grid td.cell {
    position: relative;
    min-width: 3.75rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.smoon-stock-grid td.cell.w {
    background: var(--smoon-stock-orange);
    color: var(--smoon-stock-orange-text);
}

.smoon-stock-grid td.cell.c {
    background: var(--smoon-stock-red);
    color: var(--smoon-stock-red-text);
    font-weight: 600;
}

.smoon-stock-grid td.cell.in {
    box-shadow: inset 3px 0 0 var(--smoon-stock-green);
}

.smoon-stock-grid td.cell.dim {
    opacity: 0.35;
}

.smoon-stock-grid td.mstart,
.smoon-stock-grid th.mstart {
    border-inline-start: 1px dashed var(--smoon-stock-line);
}

.smoon-stock-grid .inq {
    display: block;
    color: var(--smoon-stock-green);
    font-size: 0.6875rem;
    font-weight: 600;
}

/* Le besoin d'une case du CBN, sous sa réception et au-dessus de son stock de fin (la maquette de Benjamin du 20/10). */
.smoon-stock-grid .outq {
    display: block;
    color: var(--smoon-stock-out);
    font-size: 0.6875rem;
    font-weight: 600;
}

.smoon-stock-grid td.empty {
    padding: 2rem;
    text-align: center;
    color: var(--gray-500);
}

.smoon-stock .chip {
    display: inline-block;
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.smoon-stock .chip.c {
    background: var(--smoon-stock-red);
    color: var(--smoon-stock-red-text);
}

.smoon-stock .chip.w {
    background: var(--smoon-stock-orange);
    color: var(--smoon-stock-orange-text);
}

.smoon-stock .chip.o {
    background: var(--smoon-stock-head);
    color: var(--gray-500);
}

.smoon-stock .chip.in {
    color: var(--smoon-stock-green);
    border: 1px solid currentColor;
}

.smoon-stock .chip.late {
    color: var(--smoon-stock-red-text);
    border: 1px solid currentColor;
}

.smoon-stock .chip.eos {
    background: var(--smoon-stock-head);
    color: var(--gray-600);
    border: 1px solid var(--smoon-stock-line);
}

.dark .smoon-stock .chip.eos {
    color: var(--gray-300);
}

.smoon-stock .note {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.smoon-stock-tip {
    position: fixed;
    z-index: 50;
    min-width: 15rem;
    max-width: 24rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--smoon-stock-line);
    border-radius: 0.5rem;
    background: var(--smoon-stock-art);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
    pointer-events: none;
    font-size: 0.75rem;
}

.smoon-stock-tip .r {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.smoon-stock-tip .r.t {
    border-top: 1px solid var(--smoon-stock-line);
    font-weight: 600;
}

.smoon-stock-help {
    margin-top: 1rem;
    color: var(--gray-600);
}

.dark .smoon-stock-help,
.dark .smoon-stock-note,
.dark .smoon-stock-legend {
    color: var(--gray-300);
}

.smoon-stock-help summary {
    cursor: pointer;
    font-weight: 600;
}

.smoon-stock-help ul {
    margin: 0.5rem 0 0 1.25rem;
    list-style: disc;
}

/* Le détail d'un produit : le tiroir de la grille et l'onglet de sa fiche (filament/projected-stock/detail). */
.smoon-stock-detail h3 {
    margin: 1rem 0 0.375rem;
    font-weight: 600;
}

.smoon-stock-detail .reco {
    border-inline-start: 4px solid var(--success-500);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--smoon-stock-head);
}

.smoon-stock-detail .reco.w {
    border-inline-start-color: var(--warning-500);
}

.smoon-stock-detail .reco.c {
    border-inline-start-color: var(--danger-500);
}

.smoon-stock-detail .reco.eos {
    border-inline-start-color: var(--gray-400);
}

.smoon-stock-detail .it {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--smoon-stock-line);
    padding: 0.25rem 0;
}

.smoon-stock-detail .it.t {
    font-weight: 600;
}

.smoon-stock-detail .it small {
    display: block;
    color: var(--gray-500);
}

.smoon-stock-detail .it > span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.smoon-stock-link {
    color: var(--primary-600);
    text-decoration: underline;
}

.dark .smoon-stock-link {
    color: var(--primary-400);
}

.smoon-stock-chart {
    width: 100%;
    max-width: 44rem;
    height: auto;
    font-size: 12px;
}

.smoon-stock-chart text {
    fill: var(--gray-500);
}

.smoon-stock-chart .grid {
    stroke: var(--smoon-stock-line);
    stroke-width: 0.6;
}

.smoon-stock-chart .zero {
    stroke: var(--gray-400);
    stroke-width: 1.2;
}

.smoon-stock-chart .in {
    fill: color-mix(in oklab, var(--smoon-stock-green) 45%, transparent);
}

.smoon-stock-chart .line {
    fill: none;
    stroke: var(--primary-600);
    stroke-width: 2;
}

.smoon-stock-chart .red {
    fill: var(--danger-600);
}

.smoon-stock-grid.mini {
    max-height: none;
    min-height: 0;
}

/* Rien de figé dans le tableau du tiroir : ses cellules figées passaient par-dessus le pied du panneau et son bouton
   « Fermer » (passe visuelle du 22/10). */
.smoon-stock-grid.mini th,
.smoon-stock-grid.mini td {
    position: static;
}

.smoon-stock-grid.mini .art {
    min-width: 4rem;
}

/* Au téléphone : l'article se resserre, sa ligne de détail se replie ; le cadre défile toujours. */
@media (max-width: 640px) {
    .smoon-stock-grid .art {
        min-width: 9.5rem;
        max-width: 9.5rem;
        white-space: normal;
    }

    .smoon-stock-grid .art .m {
        display: none;
    }

    .smoon-stock-grid .art .n {
        flex-wrap: wrap;
    }

    .smoon-stock-grid {
        max-height: calc(100vh - 10rem);
    }

    .smoon-stock-bar .seg {
        flex-wrap: wrap;
    }

    .smoon-stock-bar .seg button {
        padding: 0.25rem 0.5rem;
    }
}

/* Le CBN des composants (ComponentPlanPage) reprend cette grille. Sa colonne article est bornée sur écran large : un nom de
   composant (jusqu'à 80 caractères) l'élargissait à 40 % du cadre ; le nom tronqué garde son infobulle. Sous 641 px, la règle
   mobile ci-dessus garde la main (passes visuelles du 22/10). */
@media (min-width: 641px) {
    .smoon-stock-grid table.cbn .art {
        max-width: 22rem;
    }

    .smoon-stock-grid table.cbn .art .m {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Ses OF proposés et ses achats brouillons, en pointillé. */
.smoon-stock .cbn-dotted {
    font-style: italic;
    text-decoration: underline dotted;
    opacity: 0.8;
}

/* Ce qui s'explique au clic : la case, la pastille (le stock chez Acolyt d'un SKU direct compris), le manque ; un seul arrêt de
   tabulation, le focus se voit. */
.smoon-stock-grid td.cell[data-w],
.smoon-stock-grid td.gap[data-topic],
.smoon-stock .chip[data-topic],
.smoon-stock .chip[data-col] {
    cursor: pointer;
}

.smoon-stock-grid {
    /* Le focus d'une case ne passe pas sous la colonne article, le manque max ni l'en-tête figés. */
    scroll-padding: 3.5rem 5rem 0 15rem;
}

.smoon-stock-grid td:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
}