/* =====================================================================
   Système de modale « Organic » — planches 1A à 1P du projet Claude Design
   « GoStan - Commandes (modales) », promu depuis les primitives
   `.sup-dialog-*` de suppliers.css.

   Feuille GLOBALE, chargée dans App.razor : les dialogs sont rendus par
   MudDialogProvider hors de l'arbre de la page, le CSS scopé ne les atteint
   pas.

   Tout est sous `.dlg` : une modale qui ne porte pas la classe garde
   l'habillage MudBlazor par défaut. Aucun hex en dur — rôles clair/sombre
   via var(--mud-palette-*), primitives via var(--g-*).
   ===================================================================== */

/* ── Coque : carte, en-tête, corps, pied (planche 1A) ────────────────── */

.mud-dialog.dlg {
    background: var(--mud-palette-background);
    box-shadow: var(--g-shadow-dialog);
    /* En-tête et pied restent en place : seul le corps défile. */
    overflow: hidden;
}

.mud-dialog.dlg .mud-dialog-title {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-3);
    padding: calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* MudBlazor réserve 64px à droite pour sa croix absolue : on la remet dans le
   flux, le padding d'en-tête redevient symétrique. */
.mud-dialog.dlg .mud-dialog-title:has(.mud-button-close) {
    padding-inline-end: calc(28px * var(--g-scale));
}

.mud-dialog.dlg .mud-dialog-title .mud-button-close {
    position: static;
    flex: none;
    width: 36px;
    height: 36px;
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.mud-dialog.dlg .mud-dialog-title .mud-button-close:hover {
    background: var(--mud-palette-lines-inputs);
}

.mud-dialog.dlg .mud-dialog-content {
    padding: calc(24px * var(--g-scale)) calc(28px * var(--g-scale));
    background: var(--mud-palette-background);
}

.mud-dialog.dlg .mud-dialog-actions {
    padding: calc(20px * var(--g-scale)) calc(28px * var(--g-scale));
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── Quatre tailles, pas plus (planche 1B) ───────────────────────────────
   Les cotes de la DA ne coïncident pas avec les paliers MudBlazor
   (444 / 600 / 960 / 1280) : la classe les fixe, `MaxWidth` reste posé dans
   les DialogOptions pour la sémantique et le repli. Aucun Style="max-width"
   en dur nulle part. */

.mud-dialog.dlg--s {
    max-width: 480px;
}

.mud-dialog.dlg--m {
    max-width: 720px;
}

.mud-dialog.dlg--l {
    max-width: 900px;
}

.mud-dialog.dlg--xl {
    max-width: 1040px;
}

@media (max-width: 900px) {
    .mud-dialog.dlg,
    .mud-dialog.dlg--s,
    .mud-dialog.dlg--m,
    .mud-dialog.dlg--l,
    .mud-dialog.dlg--xl {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }

    .mud-dialog.dlg .mud-dialog-title,
    .mud-dialog.dlg .mud-dialog-content,
    .mud-dialog.dlg .mud-dialog-actions {
        padding-inline: calc(20px * var(--g-scale));
    }

    .dlg-grid {
        grid-template-columns: 1fr;
    }
}

/* ── En-tête : pastille-icône, titre, sous-titre, pastilles d'état ───── */

.dlg-title {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-3);
    flex: 1;
    min-width: 0;
}

.dlg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    color: var(--mud-palette-primary);
}

/* Sage : une action « verte » — valider une réception, mettre en stock. */
.dlg-icon--sage {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

/* Alerte : réservée à l'irréversible. */
.dlg-icon--alert {
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
    color: var(--mud-palette-error);
}

/* Neutre : lecture seule. */
.dlg-icon--neutral {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.dlg-headings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.dlg-heading {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.31rem;
    line-height: 1.25;
    color: var(--mud-palette-text-primary);
}

.dlg-sub {
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
}

.dlg-title-badges {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--g-scale));
    flex-wrap: wrap;
    flex: none;
    padding-top: calc(6px * var(--g-scale));
}

/* ── Corps ───────────────────────────────────────────────────────────── */

.dlg-body {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-4);
}

/* Kicker de section : « ACCUSÉ DU FOURNISSEUR », « DESTINATAIRES »… */
.dlg-rule {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    grid-column: 1 / -1;
}

.dlg-rule-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dlg-rule-line {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.dlg-rule-note {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Formulaire deux colonnes (planches 1C / 1D de Fournisseurs). */
.dlg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-space-4) var(--g-space-6);
}

.dlg-grid-full {
    grid-column: 1 / -1;
}

.dlg-field-label {
    display: block;
    font-size: 0.81rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Carte de rappel : « Montant engagé », produit d'un ajout au panier… */
.dlg-card {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(15px * var(--g-scale)) calc(20px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.dlg-card-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dlg-card-label {
    font-size: 0.81rem;
    color: var(--mud-palette-text-secondary);
}

.dlg-card-value {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--mud-palette-text-primary);
}

/* Prix de vente saisissable au déstockage : champ compact, total calculé à côté. */
.dlg-card-price {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.dlg-price-field {
    width: 130px;
    flex: none;
}

/* Note sous le libellé de la carte (prix estimé au prorata). */
.dlg-card-note {
    font-size: 0.78rem;
    color: var(--g-accent-700);
}

/* Bloc « infos » d'une modale de détail : trois faits côte à côte. */
.dlg-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--g-space-3);
    padding: calc(15px * var(--g-scale)) calc(20px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.dlg-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dlg-fact-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dlg-fact-value {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.dlg-fact-hint {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.dlg-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.dlg-link:hover {
    text-decoration: underline;
}

/* Bloc de notes libres. */
.dlg-note {
    display: flex;
    flex-direction: column;
    gap: calc(4px * var(--g-scale));
}

.dlg-note-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* ── Tableaux de lignes — géométrie de PurchaseListView, jamais MudTable ── */

.dlg-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(8px * var(--g-scale));
    background: var(--mud-palette-drawer-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
    overflow-x: auto;
}

.dlg-line {
    display: grid;
    gap: calc(12px * var(--g-scale));
    align-items: center;
    padding: calc(11px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-md);
    font-size: 0.84rem;
    color: var(--mud-palette-text-primary);
}

.dlg-line--header {
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale)) calc(10px * var(--g-scale));
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dlg-line--total {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    font-weight: 700;
}

.dlg-line--hover:hover {
    background: var(--mud-palette-background);
}

.dlg-line-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dlg-line-name {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlg-line-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlg-cell--right {
    text-align: right;
}

.dlg-cell--center {
    text-align: center;
}

.dlg-cell--muted {
    color: var(--mud-palette-text-secondary);
}

/* Grilles de colonnes du flux commandes. Elles vivent ici et non dans une feuille de
   page : le contenu d'un dialog est rendu par MudDialogProvider, hors de l'arbre de la
   page, donc hors de portee du CSS scope. */

.dlg-lines--receiving .dlg-line {
    grid-template-columns: 2.2fr 0.5fr 0.5fr 0.6fr 0.6fr 0.8fr 0.9fr;
    min-width: 660px;
}

.dlg-lines--receiving-closed .dlg-line {
    grid-template-columns: 2.6fr 0.6fr 0.6fr 0.9fr 0.9fr;
    min-width: 560px;
}

.dlg-lines--order .dlg-line {
    grid-template-columns: 2.2fr 0.5fr 0.5fr 0.7fr 0.8fr 0.9fr;
    min-width: 620px;
}

.dlg-lines--cart .dlg-line {
    grid-template-columns: 2.6fr 0.5fr 0.8fr 0.9fr;
    min-width: 520px;
}

/* Regroupement par fournisseur (planche 1H). */
.dlg-group-head {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale)) calc(8px * var(--g-scale));
}

.dlg-initials {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.69rem;
    font-weight: 800;
}

.dlg-initials--lg {
    width: 38px;
    height: 38px;
    font-size: 0.78rem;
}

.dlg-group-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.dlg-group-line {
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.dlg-group-note {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Ligne d'aperçu de la scission (planche 1I). */
.dlg-split {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: calc(8px * var(--g-scale));
    background: var(--mud-palette-drawer-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--g-radius-card);
}

.dlg-split-row {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--g-scale));
    padding: calc(12px * var(--g-scale)) calc(14px * var(--g-scale));
    border-radius: var(--g-radius-md);
}

.dlg-split-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dlg-split-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.dlg-split-note {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.dlg-split-amount {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 0.94rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* ── Pastilles d'état — les quatre familles de la liste Achats ───────── */

.dlg-badge {
    display: inline-block;
    padding: calc(5px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.dlg-badge--neutral {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.dlg-badge--accent {
    background: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    color: var(--mud-palette-primary);
}

.dlg-badge--sage {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

.dlg-badge--warn {
    background: color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
    color: var(--mud-palette-error);
}

/* ── Bandeau — la pastille ronde porte le signal, le fond reste crème ── */

.dlg-banner {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.dlg-banner--warn {
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

.dlg-banner--sage {
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 35%, transparent);
}

.dlg-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    color: var(--mud-palette-primary);
}

.dlg-banner--warn .dlg-banner-icon {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    color: var(--mud-palette-error);
}

.dlg-banner--sage .dlg-banner-icon {
    background: color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent);
    color: var(--mud-palette-secondary);
}

.dlg-banner-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dlg-banner-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dlg-banner-text {
    font-size: 0.81rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ── État vide — même motif que .purchase-empty ──────────────────────── */

.dlg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-3);
    padding: var(--g-space-8);
    background: var(--mud-palette-drawer-background);
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-card);
}

.dlg-empty-icon {
    width: 56px;
    height: 56px;
    padding: calc(15px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--g-hero-card);
    color: var(--g-accent-600);
    font-size: 26px;
}

.dlg-empty-title {
    font-family: var(--mud-typography-h1-family);
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--mud-palette-text-primary);
}

.dlg-empty-text {
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: center;
    max-width: 420px;
    color: var(--mud-palette-text-secondary);
}

/* ── Barre de progression déterminée (réception d'un bon de commande) ── */

.dlg-progress {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--g-scale));
}

.dlg-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--g-space-3);
    font-size: 0.81rem;
    color: var(--mud-palette-text-secondary);
}

.dlg-progress-track {
    height: 7px;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.dlg-progress-fill {
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-primary);
}

.dlg-progress-fill--sage {
    background: var(--mud-palette-secondary);
}

/* Rangée de liens vers d'autres documents (bons générés, livraisons). */
.dlg-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-3);
}

/* ── Stepper de quantité (planche 1G) ────────────────────────────────── */

.dlg-stepper {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
}

.dlg-stepper-btn {
    border: 1.5px solid var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

.dlg-stepper-unit {
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
}

.dlg-stepper-field {
    width: 108px;
}

/* ── Pied ────────────────────────────────────────────────────────────── */

.dlg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-4);
    width: 100%;
    flex-wrap: wrap;
}

.dlg-foot-note {
    font-size: 0.84rem;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
}

.dlg-foot-actions {
    display: flex;
    gap: var(--g-space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

/* ── Choix parmi quelques options (planche 1C des assistants recette) ──
   Une carte-bouton par option : titre, sous-titre, pastille à droite. */

.dlg-options {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--g-scale));
    margin: 0;
    padding: 0;
    list-style: none;
}

.dlg-option {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--g-scale));
    width: 100%;
    padding: calc(15px * var(--g-scale)) calc(18px * var(--g-scale));
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dlg-option:hover {
    border-color: var(--mud-palette-primary);
}

.dlg-option:focus-visible {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.dlg-option-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dlg-option-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dlg-option-sub {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

/* ── Déstockage rapide (fiche article) : kicker, pilules de motif, pile de champs ── */

/* Kicker au-dessus du titre (« DÉSTOCKER ») */
.dlg-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--g-accent-600);
}

/* Champ et son libellé, empilés */
.dlg-stack {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--g-scale));
    min-width: 0;
}

/* Pilules de choix : motifs courants, « Tous les motifs… » en pointillé */
.dlg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8px * var(--g-scale));
}

.dlg-chip {
    padding: calc(9px * var(--g-scale)) calc(16px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dlg-chip:hover {
    border-color: var(--mud-palette-primary);
}

.dlg-chip--on {
    border: 1.5px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.dlg-chip--more {
    border-style: dashed;
    border-color: var(--g-accent-300);
    background: transparent;
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* Valeur de la carte de rappel, avec une précision atténuée à sa droite */
.dlg-card-value-hint {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ── Référentiel : liaison au central (1E) et sélecteur de maîtres (2D) ── */

/* Choix retenu dans une liste d'options — le sort des articles sans équivalent. */
.dlg-option.cat-option--on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.dlg-option.cat-candidate {
    align-items: flex-start;
}

.dlg-option.cat-candidate--on {
    border-color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--mud-palette-surface));
}

.cat-candidate-line {
    display: flex;
    align-items: baseline;
    gap: calc(10px * var(--g-scale));
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Liaison aux produits POS (projet Claude Design « GoStan - Liaison produits POS »,
   planche 1A « liste dense unique ») ────────────────────────────────────────────────

   Une seule modale, trois temps : parcourir → confirmer → confirmé. L'élément à lier est
   rappelé en permanence dans l'en-tête, le catalogue tient dans une zone défilante unique
   avec les rapprochements automatiques épinglés au-dessus.

   Préfixe `pls-` (pos link selector). Tout ce que le système `dlg` fournit déjà est
   réutilisé tel quel : `.dlg-facts` pour le rappel prix/TVA/nom attendu, `.dlg-banner--warn`
   pour l'avertissement de transfert, `.dlg-options` pour l'alignement de prix, `.dlg-empty`
   pour le catalogue vide, `.dlg-foot` pour le pied. */

/* Barre d'outils : pilule de recherche à gauche, filtres segmentés à droite. */
.pls-toolbar {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    flex-wrap: wrap;
}

.pls-search {
    flex: 1;
    min-width: 220px;
}

/* Le contrôle segmenté vit dans un creux teinté : c'est le fond qui groupe les trois
   pilules, chaque pilule restant transparente tant qu'elle n'est pas active. */
.pls-filters {
    display: flex;
    gap: calc(6px * var(--g-scale));
    padding: calc(4px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.pls-filter {
    padding: calc(7px * var(--g-scale)) calc(15px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.pls-filter:hover {
    color: var(--mud-palette-text-primary);
}

/* Actif : contraste maximal — l'encre, pas l'accent. L'accent est réservé à la sélection
   d'une ligne, qui doit rester le seul point chaud de l'écran. */
.pls-filter--on {
    background: var(--mud-palette-dark);
    /* `dark` reste sombre dans les deux ambiances (cf. design-system.md) : le texte doit donc
       piocher dans la rampe, pas dans un rôle sémantique qui basculerait avec le thème.
       MudBlazor n'expose de toute façon pas de --mud-palette-dark-contrast-text. */
    color: var(--g-neutral-100);
}

/* ── Rapprochements proposés : le rapprochement automatique, jusqu'ici réservé aux outils
   développeur, devient la première proposition. Fond sauge pour le distinguer du
   catalogue sans le faire passer pour une alerte. ── */

.pls-suggests {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.pls-suggest-head {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--g-scale));
    flex-wrap: wrap;
}

.pls-suggest-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary);
}

.pls-suggest-hint {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.pls-suggests .dlg-lines {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 26%, transparent);
}

/* ── Lignes de catalogue ── */

/* Zone défilante unique : l'en-tête de colonnes et le pied restent en place. La hauteur est
   bornée pour que le pied ne sorte jamais de l'écran sur un catalogue de 2 000 produits. */
.pls-scroll {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pls-lines--suggest .dlg-line {
    grid-template-columns: 18px minmax(0, 1fr) 120px 150px;
}

.pls-lines--catalog .dlg-line {
    grid-template-columns: 18px minmax(0, 1fr) 130px 110px 96px 62px 116px;
}

/* La ligne entière est cliquable : c'est un <button>, pas un <div> — le clavier doit pouvoir
   parcourir le catalogue. On neutralise l'habillage natif, la grille fait le reste. */
.pls-row {
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.pls-row:hover {
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-lines-inputs);
}

.pls-row--on {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.pls-row--on:hover {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

/* Pastille de sélection : un anneau creux qui se remplit. Plus lisible qu'une case à cocher
   sur une ligne dense, et cohérent avec les options d'alignement de prix. */
.pls-dot {
    width: 16px;
    height: 16px;
    border-radius: var(--g-radius-pill);
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-lines-inputs);
}

.pls-dot--on {
    background: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 3px var(--mud-palette-surface), 0 0 0 1.5px var(--mud-palette-primary);
}

/* « Lié à X » : le produit est pris. Signal, pas blocage — la ligne reste sélectionnable,
   l'étape de confirmation demandera le transfert. */
.pls-linked {
    display: inline-flex;
    align-items: center;
    gap: calc(5px * var(--g-scale));
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-error);
    min-width: 0;
}

.pls-linked-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prix alternatifs (happy hour, terrasse) portés par le produit en caisse. */
.pls-alt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Score de rapprochement. Trois paliers : sûr (sauge plein), probable (sauge clair),
   incertain (neutre) — le plein n'est donné qu'au-dessus du seuil de confiance. */
.pls-score {
    font-size: 0.75rem;
    font-weight: 800;
    padding: calc(4px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    white-space: nowrap;
}

.pls-score--sure {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-contrast-text);
}

.pls-score--likely {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary-darken);
}

.pls-score--weak {
    background: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.pls-suggest-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(10px * var(--g-scale));
}

/* Écart de prix entre GoStan et la caisse, sur la ligne et dans la confirmation. */
.pls-gap {
    font-size: 0.72rem;
    font-weight: 700;
}

.pls-gap--warn {
    color: var(--mud-palette-error);
}

.pls-gap--ok {
    color: var(--mud-palette-secondary);
}

/* ── Confirmation : les deux fiches face à face ── */

.pls-compare {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    gap: var(--g-space-3);
    align-items: center;
}

.pls-panel {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--g-scale));
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.pls-panel-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pls-panel-kicker--gostan {
    color: var(--mud-palette-primary);
}

.pls-panel-kicker--pos {
    color: var(--mud-palette-secondary);
}

.pls-panel-name {
    font-family: var(--mud-typography-h6-family, inherit);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pls-panel-sub {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.pls-panel-figures {
    display: flex;
    gap: calc(18px * var(--g-scale));
    padding-top: calc(6px * var(--g-scale));
    flex-wrap: wrap;
}

.pls-figure {
    display: flex;
    flex-direction: column;
}

.pls-figure-label {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.pls-figure-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.pls-figure-value--accent {
    color: var(--mud-palette-primary);
}

.pls-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-secondary);
}

/* Bandeau d'écart au-dessus des options d'alignement. */
.pls-gap-head {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--g-scale));
    flex-wrap: wrap;
}

.pls-gap-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: calc(4px * var(--g-scale)) calc(11px * var(--g-scale));
    border-radius: var(--g-radius-pill);
}

.pls-gap-badge--warn {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent);
    color: var(--mud-palette-error);
}

.pls-gap-badge--ok {
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary-darken);
}

/* Option d'alignement sélectionnée : même grammaire que la ligne de catalogue. */
.dlg-option.pls-option--on {
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    border-color: var(--mud-palette-primary);
}

/* ── Temps 3 : la liaison est faite ── */

.pls-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
    padding: calc(22px * var(--g-scale)) 0 calc(6px * var(--g-scale));
    text-align: center;
}

.pls-done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary-darken);
}

.pls-done-title {
    font-family: var(--mud-typography-h6-family, inherit);
    font-size: 1.3125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pls-done-text {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    max-width: 520px;
    text-wrap: pretty;
}

@media (max-width: 900px) {
    /* Sous 900px la grille dense n'a plus la place : on retombe sur nom + prix, le reste
       est déjà présent dans la ligne secondaire. */
    .pls-lines--catalog .dlg-line {
        grid-template-columns: 18px minmax(0, 1fr) 104px;
    }

    .pls-lines--catalog .pls-hide-sm {
        display: none;
    }

    .pls-lines--suggest .dlg-line {
        grid-template-columns: 18px minmax(0, 1fr) 110px;
    }

    .pls-compare {
        grid-template-columns: 1fr;
    }

    .pls-arrow {
        transform: rotate(90deg);
    }
}

/* ── Signaler un bug (planches 2a-2e de « Menu compte & langue ») ──────
   Primitives ajoutées à la feuille commune plutôt qu'à une feuille dédiée :
   contrôle segmenté, dépôt de fichier, contexte technique repliable et écran
   de confirmation servent aussi bien à la prochaine modale qui en aura besoin. */

/* Contrôle segmenté (Type : bug / question / suggestion). La piste est une
   pilule creuse, l'option active une pastille pleine posée dessus. */
.dlg-seg {
    display: flex;
    align-self: flex-start;
    gap: calc(4px * var(--g-scale));
    padding: calc(4px * var(--g-scale));
    border-radius: var(--g-radius-pill);
    background: var(--mud-palette-lines-default);
}

.dlg-seg-opt {
    padding: calc(8px * var(--g-scale)) calc(16px * var(--g-scale));
    border: none;
    border-radius: var(--g-radius-pill);
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dlg-seg-opt:hover {
    background: color-mix(in srgb, var(--mud-palette-background) 60%, transparent);
}

.dlg-seg-opt--on {
    background: var(--mud-palette-background);
    box-shadow: var(--g-shadow-sm);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Zone de dépôt, quand aucun fichier n'est encore joint. */
.dlg-drop {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    width: 100%;
    padding: calc(16px * var(--g-scale)) calc(20px * var(--g-scale));
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: 20px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dlg-drop:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.dlg-drop-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dlg-drop-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.dlg-drop-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Pilule d'ajout, une fois qu'un fichier est là : la zone de dépôt pleine
   largeur reprendrait toute la place au profit d'une action secondaire. */
.dlg-addfile {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: calc(8px * var(--g-scale));
    padding: calc(8px * var(--g-scale)) calc(14px * var(--g-scale));
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--g-radius-pill);
    background: transparent;
    font: inherit;
    font-size: 0.81rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dlg-addfile:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* Ligne de pièce jointe. */
.dlg-file {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(10px * var(--g-scale)) calc(14px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
}

.dlg-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

.dlg-file-texts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.dlg-file-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlg-file-size {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Message d'erreur sous un champ (planche 2c). */
.dlg-field-error {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-error);
}

/* Contexte technique joint, replié par défaut. Rien n'est envoyé qui ne soit
   lisible ici : l'encart est un contrat, pas une décoration. */
.dlg-ctx {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.dlg-ctx-head {
    display: flex;
    align-items: center;
    gap: var(--g-space-2);
    width: 100%;
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    border: none;
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.dlg-ctx-head:hover {
    background: var(--mud-palette-lines-default);
}

.dlg-ctx-icon {
    display: inline-flex;
    color: var(--mud-palette-secondary);
}

.dlg-ctx-label {
    flex: 1;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.dlg-ctx-toggle {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.dlg-ctx-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 9px var(--g-space-4);
    padding: calc(14px * var(--g-scale)) calc(18px * var(--g-scale));
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dlg-ctx-key {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dlg-ctx-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

@media (max-width: 900px) {
    .dlg-ctx-grid {
        grid-template-columns: 1fr;
        gap: 2px var(--g-space-4);
    }
}

/* Écran d'issue : envoi en cours (2d) et confirmation (2e). */
.dlg-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-4) 0;
    text-align: center;
}

.dlg-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--g-radius-pill);
    background: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent);
    color: var(--mud-palette-secondary);
}

.dlg-result-texts {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--g-scale));
    max-width: 420px;
}

.dlg-result-title {
    font-family: var(--mud-typography-h5-family, inherit);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.dlg-result-text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* Référence de correspondance, copiable. */
.dlg-ticket {
    display: flex;
    align-items: center;
    gap: var(--g-space-3);
    padding: calc(10px * var(--g-scale)) calc(20px * var(--g-scale));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
}

.dlg-ticket-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
}

.dlg-ticket-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}