/*
 * MODALE DE COMMANDE FOURNISSEUR — `#orderModal` (2026-09-13).
 *
 * Elle existe pour une raison mesurable : la modale portait **32 styles en
 * ligne**, dont six flex écrits à la main pour le seul bloc de totaux. Une
 * déclaration écrite dans un attribut `style` n'est lisible par personne, ne se
 * réutilise pas, et échappe à la cascade — c'est la règle de plateforme
 * « no inline grid/flex styles, ever ».
 *
 * Préfixe `som-` (supplier-order-modal) : ces classes n'ont de sens que dans
 * cette modale, et le préfixe le dit.
 *
 * ⚠ AUCUNE COULEUR EN DUR. Tout vient de `tokens.css`, le vocabulaire du socle.
 */

/* L'accroche : ce que le formulaire fait, en une phrase, avant les champs. */
.som-lead {
    margin: 0 0 var(--space-5);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Un bloc conditionnel (budget de l'affaire, BC existants) : il se replie par
   l'attribut `hidden`, jamais par un `style="display:none"`. */
.som-bloc {
    grid-column: 1 / -1;
}

.som-bloc-titre {
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text);
}

/* La grille de budget de l'affaire : dense, consultative, dans le formulaire. */
.som-budget-table {
    font-size: 0.82rem;
}

.som-budget-focus {
    margin-top: 0.5rem;
}

/* Les deux aides sous le champ « Groupe d'achat ». */
.som-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

/* ── LES TOTAUX ────────────────────────────────────────────────────────────
   Trois lignes « libellé … montant », dont la dernière est le total. Le filet
   se porte par la LIGNE de total, jamais par une adjacence : un bloc
   conditionnel inséré au-dessus casserait `+`. */
.som-totaux {
    display: flex;
    justify-content: flex-end;
}

.som-totaux-corps {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 240px;
    font-size: 0.9rem;
}

.som-totaux-ligne {
    display: flex;
    justify-content: space-between;
}

.som-totaux-ligne--total {
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
    font-weight: 700;
    font-size: 1rem;
}

/* Les lignes de commande : la grille de saisie et son pied. */
.som-lignes {
    margin-bottom: 1rem;
}

.som-lignes-vide {
    padding: var(--space-5);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.875rem;
}

/* ── LA GRILLE DE SAISIE DES LIGNES ────────────────────────────────────────
   Le composant `.line-items-table` vient du socle (`tables.css`) : cellules
   denses, `.line-item-input` avec son anneau de focus et son état `:invalid`,
   largeurs des colonnes de chiffres. Ce bloc n'ajoute que ce qui manque à CETTE
   grille — deux colonnes que le socle ne connaît pas, et l'alignement des
   nombres. ⚠ Le composant lui-même reste dans le socle : l'étendre ici en
   ferait une seconde définition. */

.line-items-table .line-item-ref      { width: 110px; }
.line-items-table .line-item-discount { width: 80px; }

/* ⚠ UN NOMBRE S'ALIGNE À DROITE. Les trois champs de chiffres étaient alignés
   à gauche (`text-align: start` mesuré) pendant que le total de la même rangée
   était à droite : les unités ne tombaient pas sous les unités, et l'œil ne
   pouvait pas comparer deux lignes. */
.line-items-table .line-item-input--num { text-align: right; }

/* La rangée d'invite, quand la commande n'a encore aucune ligne. Un en-tête de
   tableau seul se lit comme un écran qui n'a pas fini de charger. */
.line-items-table .som-ligne-invite td {
    padding: var(--space-5);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.875rem;
}

/* Le retrait d'une ligne : discret au repos, rouge à l'approche. Un bouton
   rouge PLEIN par rangée faisait dix taches d'alerte sur une commande de dix
   lignes — l'alerte perd son sens quand elle est partout. */
.line-items-table .som-retirer {
    color: var(--text-muted);
    background: transparent;
    border-color: transparent;
}

.line-items-table .som-retirer:hover:not(:disabled),
.line-items-table .som-retirer:focus-visible {
    color: var(--error);
    /* ⚠ SANS REPLI : `--state-red-bg` EXISTE (tokens.css:94). Un repli sur un
       jeton défini ne peint jamais — il ment, et devient un second vocabulaire. */
    background: var(--state-red-bg);
}