/**
 * Commandes — module Commerce
 *
 * Utilise les composants du back-office : onglets `dev__tabs`, cartes,
 * badges, pagination. Rien n'est réinventé ici.
 */

/* ── Détail ── */

.order-customer {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
}

.order-customer > div { display: flex; flex-direction: column; gap: 2px; }
.order-customer address { font-style: normal; color: var(--text-secondary); }

/* ── Articles ── */

/* ── Ligne de commande ── */

.order-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.order-item:last-child { border-bottom: 0; }

.order-item__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: var(--space-md);
    align-items: baseline;
}

.order-item__title { min-width: 0; }
.order-item__title strong { display: block; }

.order-item__variant {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.order-item__sku { font-size: var(--font-size-xs); color: var(--text-tertiary); }

.order-item__qty { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.order-item__price { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    .order-item__head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .order-item__sku { grid-column: 1; }
    .order-custom__row { grid-template-columns: 1fr; gap: 0; }
}

/* ════════════════════════════════════════════════════════════
   LISTE DES COMMANDES

   Pleine largeur, en colonnes. La vue scindée écrasait les deux
   côtés : trop peu de colonnes pour parcourir, trop peu de largeur
   pour lire.
   ════════════════════════════════════════════════════════════ */

.orders-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.orders-bar__search { flex: 1; min-width: 240px; }
.orders-bar .cselect { width: auto; min-width: 170px; }

/* Compteur de commandes à traiter : discret quand il est à zéro, il
   n'y a alors rien à signaler. */
#orders-todo.is-empty { opacity: 0.5; }
#orders-todo.is-active { background: rgba(var(--primary-rgb), 0.12); color: var(--primary-600); }
#orders-todo .badge { margin-left: 2px; }

.orders-table tbody tr { cursor: pointer; }

.orders-table td { vertical-align: middle; }

/* Deux informations par cellule : la principale, puis son contexte en
   dessous. Une colonne par donnée aurait donné douze colonnes
   illisibles. */
.orders-row__ref,
.orders-row__name {
    display: block;
    line-height: 1.3;
}

.orders-row__date,
.orders-row__mail {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: 1.3;
}

/* Nombre d'articles : aligné à droite comme le total, ce sont les deux
   colonnes qu'on compare d'une ligne à l'autre. */
.orders-row__items { font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }

.orders-row__pay { font-size: var(--font-size-sm); }
.orders-row__pay.is-paid i { color: var(--success, #16a34a); margin-right: 3px; }

.orders-row__nopay { font-size: var(--font-size-sm); color: var(--text-tertiary); }

.orders-row__total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   DÉTAIL D'UNE COMMANDE
   ════════════════════════════════════════════════════════════ */

.order-header .page-header__title { min-width: 0; }

/* Retour au-dessus du titre : c'est le premier geste après avoir
   traité une commande, il doit être là où l'œil revient. */
.order-back { margin-bottom: var(--space-xs); margin-left: -8px; }

#order-ref { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.order-badge { font-size: var(--font-size-xs); vertical-align: middle; }

/* Articles à gauche, contexte à droite : ce qu'il faut fabriquer
   occupe la colonne large. */


.order-customer a, .order-customer span { display: block; font-size: var(--font-size-sm); }
.order-customer address { margin: var(--space-sm) 0 0; font-style: normal; font-size: var(--font-size-sm); color: var(--text-secondary); }

.order-totals__row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--font-size-sm);
}

.order-totals__row span { color: var(--text-secondary); }
.order-totals__row strong { font-variant-numeric: tabular-nums; }

.order-totals__row--total {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
}

.order-totals__row--total strong { font-size: var(--font-size-lg); }

.order-history__row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
}

.order-history__row:last-child { border-bottom: 0; }
.order-history__date { color: var(--text-tertiary); font-size: var(--font-size-xs); }
.order-history__row strong { display: block; }
.order-history__row span { color: var(--text-secondary); }
.order-history__row em { font-style: normal; font-size: var(--font-size-xs); color: var(--text-tertiary); }

@media (max-width: 1100px) {
    }

@media (max-width: 700px) {
    .orders-bar__search { min-width: 100%; }
    .order-history__row { grid-template-columns: 1fr; gap: 2px; }
}

/* Deux écrans dans la même page : la liste est masquée plutôt que
   remplacée, y revenir n'entraîne aucun rechargement et la position de
   défilement est conservée. */
.orders__screen { display: block; }
.orders__screen.d-none { display: none; }

/* Redimensionnement bloqué : une note qu'on étire déplace le bouton
   d'enregistrement hors de vue. */
.form-textarea--fixed { resize: none; }

.card__footer .pagination__info { color: var(--text-secondary); font-size: var(--font-size-sm); }

.pagination__pages { display: flex; gap: 4px; flex-wrap: wrap; }

.card__footer:has(.pagination__pages) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   DÉTAIL — DISPOSITION
   ════════════════════════════════════════════════════════════ */

/* Argent et état à gauche, contexte et contenu à droite.
   
   Ce sont les deux choses sur lesquelles on AGIT : le reste — client,
   facture, note — se consulte. */
.order-grid {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.order-main,
.order-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

/* ── Montant et paiement ── */

.order-money .order-totals { margin-bottom: var(--space-md); }

/* Actions empilées : deux boutons côte à côte dans une colonne de 400
   points se retrouvent à l'étroit. */
.order-pay {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.order-pay__state {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.order-pay__state.is-paid { color: var(--success, #16a34a); }

/* ── Statut ── */

/* Sélecteur dans l'en-tête de l'historique : on change d'état en
   regardant ce qui s'est déjà passé. */
.order-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.order-status-head .cselect { width: auto; min-width: 150px; }

/* ── Widgets de contexte ── */

.order-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-md);
}

.order-widget { padding: var(--space-md); }

.order-widget__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.order-widget__body { font-size: var(--font-size-sm); }

@media (max-width: 1200px) {
    .order-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .order-custom__row { grid-template-columns: 1fr; gap: 0; }
    .order-status-head { flex-direction: column; align-items: stretch; }
}

/* ── Facture ──

   Le document d'abord, les actions en dessous : on veut savoir s'il
   existe avant de savoir ce qu'on peut en faire. */
.invoice-doc {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.invoice-doc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-500);
    font-size: 17px;
    flex-shrink: 0;
}

.invoice-doc__meta { min-width: 0; }

.invoice-doc__meta strong {
    display: block;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.invoice-doc__meta span {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Actions sur la ligne du document, à sa droite.
   
   En dessous, trois icônes occupaient une rangée entière — autant
   qu'un bloc de texte, pour trois clics rares. */
.invoice-doc__actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.invoice-doc__actions .btn {
    width: 28px;
    padding: 0;
    justify-content: center;
}

.order-invoice__wait {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.order-invoice__wait:last-child { margin-bottom: 0; }

/* Bon de commande : séparé de la facture par un filet.
   
   Ce sont deux documents de nature différente — l'un confirme ce qui
   a été commandé, l'autre atteste d'une vente réalisée. */
.invoice-doc--main {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}

.invoice-doc__icon.is-muted {
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
}

.invoice-doc > .btn { flex-shrink: 0; margin-left: auto; width: 28px; padding: 0; justify-content: center; }

/* ── Registre des règlements ──

   Chaque mouvement avec son moyen et sa date. Le montrer permet de
   vérifier plutôt que de croire : l'état de paiement s'en déduit. */

.order-ledger { margin: var(--space-md) 0; }

.ledger {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-sm);
}

.ledger-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto 20px;
    gap: var(--space-sm);
    align-items: baseline;
    padding: 3px 0;
    font-size: var(--font-size-sm);
}

.ledger-row__date { font-size: var(--font-size-xs); color: var(--text-tertiary); }

.ledger-row__method em {
    display: block;
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.ledger-row__amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sortie d'argent en rouge : un remboursement et un encaissement ne
   doivent pas se confondre dans une colonne de chiffres. */
.ledger-row.is-negative .ledger-row__amount { color: var(--danger); }

/* Commission atténuée : elle explique l'écart entre ce que paie le
   client et ce qui arrive, sans concurrencer le montant. */
.ledger-row--fee { padding: 0 0 3px; font-size: var(--font-size-xs); }
.ledger-row--fee .ledger-row__amount,
.ledger-row--fee .ledger-row__method { color: var(--text-tertiary); }

.ledger-row__link { color: var(--text-tertiary); font-size: 11px; }
.ledger-row__link:hover { color: var(--primary-500); }

/* Reste dû : la question qu'on se pose devant un mandat administratif
   ou un acompte. */
.ledger-due {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.ledger-due strong { color: var(--warning-dark, #b45309); font-variant-numeric: tabular-nums; }

/* Reste dû dans la liste, sous le badge de paiement partiel. */
.orders-row__due {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.order-pay .btn { justify-content: center; }

/* Axe concerné par une entrée d'historique : « pending → paid » sans
   dire de quoi il s'agit devient illisible avec deux axes. */
.order-history__axis {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ── Personnalisation ──

   Visible d'emblée, en retrait sous la ligne d'article : repliée, on
   préparait un colis sans avoir lu ce qu'il fallait fabriquer. */

.order-custom {
    margin: 6px 0 0;
    padding: 0 0 0 var(--space-md);
    border-left: 2px solid var(--border-color);
}

/* Hauteur de ligne CONSTANTE : un fichier présenté en bouton faisait
   une ligne deux fois plus haute, et la liste perdait son alignement.
   
   `min-height` et non `height` : un texte long passe sur deux lignes
   plutôt que d'être tronqué. */
.order-custom__row {
    display: grid;
    grid-template-columns: minmax(100px, 160px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: baseline;
    min-height: 22px;
    padding: 1px 0;
    font-size: var(--font-size-sm);
    line-height: 20px;
}

.order-custom__row dt { color: var(--text-tertiary); }
.order-custom__row dd { margin: 0; min-width: 0; word-break: break-word; }

/* Texte multiligne : les retours conservés, mais sur la même hauteur
   de ligne que le reste. */
.order-custom__text {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: 20px;
    white-space: pre-wrap;
}

/* Fichier : un lien, pas un bouton. Il tient sur la hauteur d'une
   ligne de texte.
   
   Nom tronqué au besoin — un nom de trente caractères pousserait la
   colonne et désalignerait tout. */
.order-file {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    color: var(--primary-600);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-file:hover { text-decoration: underline; }
.order-file i { flex-shrink: 0; font-size: 11px; }

/* Plusieurs fichiers : séparés sans passer à la ligne tant que la
   place suffit. */
.order-file + .order-file { margin-left: var(--space-sm); }

@media (max-width: 700px) {
    .order-custom__row { grid-template-columns: 1fr; gap: 0; }
}

/* Adresse identique à la facturation : le dire plutôt que de répéter
   quatre lignes deux fois dans la page. */
.order-shipping__same {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}



/* ── Note interne ──

   Le journal complet, sous les widgets : une note de suivi se lit dans
   l'ordre, et n'en montrer qu'une obligeait à ouvrir une fenêtre pour
   comprendre ce qui s'est passé. */

.order-note { padding: var(--space-md); }

.order-note__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

/* Libellé sobre, sans icône de couleur : une note n'est ni un
   avertissement ni une alerte, la teinter lui donnait un poids qu'elle
   n'a pas. */
.order-note__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.order-note__empty {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* Défilant au-delà de quelques entrées : un suivi de plusieurs
   semaines pousserait les articles hors de l'écran. */
.order-note__log {
    max-height: 200px;
    overflow-y: auto;
}

.order-note__row {
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-light);
}

.order-note__row:first-child { padding-top: 0; border-top: 0; }

.order-note__meta {
    display: block;
    margin-bottom: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.order-note__row p {
    margin: 0;
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Alerte de paiement : elle dit ce qui bloque et ce qu'on peut faire.
   
   Dans la carte du montant plutôt qu'en haut de page : c'est là qu'on
   regarde quand on se demande où en est l'argent. */
.order-pay__alert {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(225, 29, 72, 0.08);
    color: var(--danger-dark, #be123c);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.order-pay__alert i { flex-shrink: 0; line-height: 1.4; }

/* Attente : ce n'est pas un problème, juste un état transitoire. */
.order-pay__alert.is-waiting {
    background: var(--bg-surface-secondary);
    color: var(--text-secondary);
}

/* Lien de paiement : adresse et bouton de copie sur une ligne.
   
   Le champ est en lecture seule mais reste sélectionnable — si le
   presse-papiers est refusé, la sélection permet de copier à la main. */
.paylink { display: flex; gap: 6px; }
.paylink input { flex: 1; min-width: 0; font-size: var(--font-size-xs); }
.paylink .btn { flex-shrink: 0; }


/* Les deux boutons du champ gardent la même largeur : sans cela, la
   flèche et le presse-papiers n'ont pas la même emprise. */
.paylink .btn, .paylink > a.btn { flex-shrink: 0; width: 34px; padding: 0; justify-content: center; }