/* ============================================================================
ÉCRAN « COMMANDES DE L'APPLICATION » (APP-01) — classes .cmd-*
Sa propre feuille, et son propre dans App.razor : un écran qui s'ajoute
à la queue de modele-erp.css fait collisionner toutes les branches sur la
dernière ligne du fichier et sur la clé de cache partagée — jamais sur la
substance (CLAUDE.md). Une classe reprise par un DEUXIÈME écran remonterait
au gabarit (modele-erp.css §11), jamais l'inverse.
AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de
easytech-theme.css, qui bascule seul en thème sombre. Ce fichier ne redéclare
donc aucune règle sombre.
CE QUE CET ÉCRAN A ET QU'AUCUN AUTRE N'A
Une FILE, pas une liste. Ce qu'un vendeur y cherche n'est pas une ligne
parmi d'autres mais la plus vieille commande sans réponse : le chronomètre
est donc une COLONNE À PART, posée avant le contenu de la commande, et il
change de teinte quand l'attente dépasse le quart d'heure. Le gabarit n'a
rien de tel — ses tableaux comparent des valeurs, ils ne pressent personne.
============================================================================ */
/* ---------------------------------------------------------------------------
BANDE DE FAITS SAILLANTS SOUS L'EN-TÊTE.
Les tuiles sont celles du gabarit (.mx-faits / .mx-fait) : seul le débord est
d'ici. La bande doit toucher les deux bords du bandeau blanc, or .ecran-tete
porte un padding de 12/16 px — sans ces marges négatives, elle flotterait à
l'intérieur avec un liseré blanc de chaque côté et se lirait comme un bloc
posé sur l'en-tête plutôt que comme son pied.
--------------------------------------------------------------------------- */
.cmd-faits { margin: 12px -16px -12px; }
/* ---------------------------------------------------------------------------
LA FILE
--------------------------------------------------------------------------- */
.cmd-file { display: flex; flex-direction: column; gap: 10px; }
/* Trois colonnes : le filet d'état, le chronomètre, la commande. Le filet est
une COLONNE de grille et non une bordure gauche — une bordure aurait décalé
le contenu de 4 px à chaque changement d'état, et surtout elle ne descend pas
jusqu'au bas d'une carte dont le corps grandit avec le nombre de lignes. */
.cmd-carte {
display: grid;
grid-template-columns: 4px 96px minmax(0, 1fr);
background: var(--et-surface);
border: 1px solid var(--et-hairline);
animation: mxUp .22s ease both;
}
/* Une commande close ne réclame plus rien : elle recule d'un ton au lieu de
tenir le même rang visuel qu'une commande qui attend une réponse. */
.cmd-carte.est-close { background: var(--et-surface-3); }
.cmd-rail { grid-row: 1 / -1; background: var(--et-inerte); }
.cmd-carte.est-recue .cmd-rail { background: var(--et-avertissement); }
.cmd-carte.est-acceptee .cmd-rail { background: var(--et-form-blue); }
.cmd-carte.est-prete .cmd-rail { background: var(--et-succes); }
.cmd-carte.est-servie .cmd-rail { background: var(--et-neutre); }
.cmd-carte.est-annulee .cmd-rail { background: var(--et-inerte); }
/* ---------------------------------------------------------------------------
LE CHRONOMÈTRE — l'information principale de l'écran.
En chasse fixe et en chiffres tabulaires : dix cartes empilées donnent alors
une colonne de minutes qu'on lit d'un seul balayage, ce qu'une graisse
proportionnelle interdit. Le libellé est sous le nombre et non à côté : à
côté, il aurait fallu élargir la colonne de 40 px, pris sur la commande.
--------------------------------------------------------------------------- */
.cmd-chrono {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 12px 6px;
background: var(--et-surface-2);
border-right: 1px solid var(--et-hairline);
text-align: center;
}
.cmd-chrono-val {
font-family: var(--et-font-mono); font-size: 25px; font-weight: 500; line-height: 1;
color: var(--et-ink); font-variant-numeric: tabular-nums;
}
.cmd-chrono-unite {
margin-top: 3px;
font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted);
}
.cmd-chrono-lbl {
margin-top: 5px;
font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
text-transform: uppercase; letter-spacing: .14em; color: var(--et-muted);
}
/* LE QUART D'HEURE. Passé ce délai, une commande jamais acceptée laisse un
client devant son téléphone : la case entière passe en rouge pâle, et non le
seul chiffre — c'est ce qui la fait sortir de la pile sans avoir à la lire. */
.cmd-chrono.est-retard { background: var(--et-danger-badge-bg); }
.cmd-chrono.est-retard .cmd-chrono-val,
.cmd-chrono.est-retard .cmd-chrono-unite,
.cmd-chrono.est-retard .cmd-chrono-lbl { color: var(--et-danger-ink); }
/* Servie ou annulée, le compteur n'est plus une alerte mais une date : il dit
depuis combien de temps la commande est arrivée, et rien n'en découle. */
.cmd-chrono.est-close .cmd-chrono-val { color: var(--et-muted); font-size: 19px; }
/* ---------------------------------------------------------------------------
LE CORPS DE LA COMMANDE
--------------------------------------------------------------------------- */
.cmd-corps { min-width: 0; padding: 11px 14px 12px; }
.cmd-tete {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.cmd-tete-id { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* La référence externe est la seule chose que le client cite au téléphone :
mono, pour qu'un caractère ambigu (0/O, 1/l) se distingue à la lecture. */
.cmd-ref {
font-family: var(--et-font-mono); font-size: 14px; font-weight: 500;
color: var(--et-ink); letter-spacing: .02em;
}
/* Sur place / à emporter / livraison — un fait, pas un état : contour et gris,
là où .mx-pastille porte un aplat teinté et un point de couleur. Les
confondre ferait lire « livraison » comme un statut de plus. */
.cmd-jeton {
display: inline-flex; align-items: center; gap: 5px;
padding: 1px 8px;
border: 1px solid var(--et-form-border);
background: var(--et-surface);
color: var(--et-muted);
font-size: 12px; line-height: 17px; white-space: nowrap;
}
.cmd-tete-chiffres { flex: none; text-align: right; }
.cmd-total {
font-family: var(--et-font-mono); font-size: 17px; font-weight: 500;
color: var(--et-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cmd-regle { margin-top: 2px; font-size: 12px; color: var(--et-succes-ink); }
/* Le client sur une seule ligne, séparateurs en points médians : trois lignes
pour un nom, un numéro et une adresse repousseraient les articles hors de vue
sur une file de dix commandes. */
.cmd-client {
margin-top: 5px;
font-size: 13px; line-height: 1.5; color: var(--et-muted);
}
.cmd-client .sep { color: var(--et-inerte); margin: 0 5px; }
.cmd-client .mono { font-family: var(--et-font-mono); font-size: 12px; }
/* ---------------------------------------------------------------------------
ENCARTS — avertissement du serveur, note du client, motif d'annulation.
Un seul dessin, trois tons : le filet gauche porte la nature, le fond ne fait
que la rappeler. Trois blocs différents auraient donné trois grammaires pour
trois phrases.
--------------------------------------------------------------------------- */
.cmd-encart {
display: flex; align-items: flex-start; gap: 7px;
margin-top: 8px; padding: 6px 10px;
border-left: 3px solid;
font-size: 12px; line-height: 1.45;
}
.cmd-encart .bi { flex: none; margin-top: 1px; }
.cmd-encart.est-alerte {
background: var(--et-avertissement-bg); border-color: var(--et-avertissement-mark);
color: var(--et-avertissement-ink);
}
/* --et-info-bg et non --et-tint : le second n'a pas de valeur sombre (il vaut
#EBF3FB dans les deux thèmes), et l'encre de texte du thème sombre posée dessus
serait blanche sur bleu très clair. */
.cmd-encart.est-note {
background: var(--et-info-bg); border-color: var(--et-form-blue); color: var(--et-ink);
}
.cmd-encart.est-motif {
background: var(--et-neutre-bg); border-color: var(--et-inerte); color: var(--et-muted);
}
/* ---------------------------------------------------------------------------
LES ARTICLES À PRÉPARER
Une grille de trois colonnes plutôt qu'un
: la quantité est cadrée à
droite contre son « × », si bien que « 12 × » et « 1 × » se lisent l'un sous
l'autre. La note de ligne passe SOUS le libellé — une consigne de préparation
glissée en fin de ligne se perd derrière un libellé long.
--------------------------------------------------------------------------- */
.cmd-lignes { margin-top: 10px; border-top: 1px solid var(--et-hairline); }
.cmd-ligne {
display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
gap: 10px; align-items: baseline;
padding: 5px 0;
}
.cmd-ligne + .cmd-ligne { border-top: 1px solid var(--et-hairline); }
.cmd-ligne-q {
font-family: var(--et-font-mono); font-size: 13px; text-align: right;
color: var(--et-muted); font-variant-numeric: tabular-nums;
}
.cmd-ligne-lib { font-size: 13px; color: var(--et-ink); }
.cmd-ligne-note {
display: block; margin-top: 1px;
font-size: 12px; line-height: 1.4; color: var(--et-avertissement-ink);
}
.cmd-ligne-mt {
font-family: var(--et-font-mono); font-size: 13px; text-align: right;
color: var(--et-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Les actions sous un filet : elles closent la carte, elles n'en font pas
partie. Boutons blancs du gabarit — l'orange reste au CTA de la modale, et un
écran qui en porterait dix n'en aurait plus aucun. */
.cmd-actions {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 11px; padding-top: 10px;
border-top: 1px solid var(--et-hairline);
}
/* ---------------------------------------------------------------------------
FILE VIDE — la bonne nouvelle de cet écran, et elle mérite d'être dite.
--------------------------------------------------------------------------- */
.cmd-vide {
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 54px 20px;
background: var(--et-surface); border: 1px solid var(--et-hairline);
text-align: center;
}
.cmd-vide > .bi { font-size: 28px; color: var(--et-inerte); }
.cmd-vide-titre { font-size: 14px; font-weight: 600; color: var(--et-muted); }
.cmd-vide p { margin: 0; max-width: 440px; font-size: 13px; line-height: 1.5; color: var(--et-faint); }
/* ---------------------------------------------------------------------------
MODALE D'ENCAISSEMENT
--------------------------------------------------------------------------- */
/* Le sélecteur segmenté du gabarit ne se replie pas : au-delà de quatre modes
de règlement il déborderait de la modale. Il défile donc dans sa boîte —
l'ordre des modes reste stable, ce qu'un retour à la ligne ne garantit pas. */
.cmd-modes { max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
/* LE RENDU DE MONNAIE — le seul chiffre que le caissier annonce à voix haute.
Il vit hors de la grille de formulaire : ce n'est pas une valeur saisie mais
une conséquence de la saisie précédente. */
.cmd-rendu {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin: 10px 18px 0; padding: 9px 12px;
background: var(--et-surface-2); border: 1px solid var(--et-hairline);
}
.cmd-rendu-lbl { font-size: 13px; color: var(--et-muted); }
.cmd-rendu-val {
font-family: var(--et-font-mono); font-size: 19px; font-weight: 500;
color: var(--et-ink); font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------------------------------
REPLI — sous 720 px, le chronomètre passe AU-DESSUS de la commande plutôt que
devant elle : ses 96 px prendraient un tiers de la largeur utile, et le
libellé d'un article se couperait sur trois lignes.
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
.cmd-carte { grid-template-columns: 4px minmax(0, 1fr); }
.cmd-chrono {
grid-column: 2; grid-row: 1;
flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px;
padding: 7px 14px;
border-right: 0; border-bottom: 1px solid var(--et-hairline);
text-align: left;
}
.cmd-chrono-val { font-size: 19px; }
.cmd-chrono-unite, .cmd-chrono-lbl { margin-top: 0; }
.cmd-corps { grid-column: 2; grid-row: 2; }
.cmd-rendu { margin-left: 14px; margin-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.cmd-carte { animation: none; }
}