/* La vue Commandes (ADR-0010) : le carnet de l'atelier, venu de `commande-atelier-ldlc`.
   Ses classes portent le préfixe `sb-cmd-`, à l'intérieur de la famille `sb-` : ce qui n'appartient
   qu'à cette vue ne peut pas déteindre sur la carte, et réciproquement. Les classes vraiment
   partagées — `sb-reglage`, `sb-titre`, `sb-detail`, `sb-refus`, `sb-vide`, `sb-liste`, `sb-ajout`,
   `sb-nombre`, `sb-chips`, `sb-deux`, `sb-sr` — restent celles de `app.css` : la carte les tenait
   déjà du même socle, avec le même sens.

   Sur les jetons du DS, jamais une couleur, un rayon ou une ombre inventés. Les composants du DS
   injectent leur propre CSS. */

/* ── Ce que le carnet ajoute au vocabulaire partagé ─────────────────────────────────────────── */

/* « aucune commande » reste une donnée mesurée, donc encre 2 : l'encre 3 tombe à 3,02:1 sous 18 px
   (axe-core, 4 septembre 2026). La classe `est-absent` demeure : elle dit le cas zéro, elle ne le
   grise plus. */
.sb-liste .sb-nombre.est-absent { color: var(--text-2); }
/* Le nom d'un fournisseur ou d'un technicien est un champ de saisie, le même que ceux du panneau
   de création : on écrit dedans, on clique ailleurs, c'est enregistré. Aucun bouton pour le dire. */
.sb-nom { min-width: 0; }
.sb-reglage .sb-detail.est-absent { color: var(--text-3); }
.sb-reglage .sb-etroit { width: 96px; }
/* Un nombre et son unité : « 2 jours ». */
.sb-unite { display: flex; align-items: center; gap: 8px; }
.sb-unite > span { font: 400 var(--text-sm)/1 var(--font-sans); color: var(--text-2); }

/* La carte « Commandes » des Paramètres tient quatre blocs — fournisseurs, techniciens, rappels,
   export — séparés par des overlines. Chacun a besoin d'air au-dessus, sauf le premier ; sans quoi
   « RAPPELS » se colle au champ d'ajout des techniciens et les deux se lisent comme un seul bloc. */
.sb-cmd-parametres .ds-sechead { margin-top: 20px; }
.sb-cmd-parametres > .ds-card__body > .ds-sechead:first-child { margin-top: 0; }

/* ── La barre de l'outil : les trois compteurs du carnet ────────────────────────────────────── */

/* Dans la barre de la vue (`.sb-barre-outil`, css/app.css), à droite de son titre. Le premier n'a
   pas de filet à sa gauche : le titre lui sert déjà de bord. */
.sb-cmd-compteurs { display: flex; align-items: center; gap: 14px; }
.sb-cmd-compteur { display: flex; align-items: baseline; gap: 5px; padding-left: 14px; border-left: 1px solid var(--border); }
.sb-cmd-compteur:first-child { padding-left: 0; border-left: none; }
.sb-cmd-compteur b { font: 700 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-1); }
.sb-cmd-compteur span { font: 400 12px/1 var(--font-sans); color: var(--text-2); }
.sb-cmd-compteur.est-vide b { color: var(--text-3); font-weight: 600; }

/* ── Les filtres, dans l'en-tête de la table ────────────────────────────────────────────────── */

.sb-cmd-filtres { display: flex; align-items: center; gap: 8px; }
.sb-cmd-filtres .sb-cmd-champ { width: 198px; }
.sb-cmd-filtres .sb-cmd-recherche { width: 160px; }

/* ── La grille des champs, partagée par la création et la fiche ─────────────────────────────── */

.sb-cmd-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.sb-cmd-grille .sb-cmd-large { grid-column: span 2; }
.sb-cmd-grille .sb-cmd-pleine { grid-column: 1 / -1; }
.sb-cmd-champs { display: flex; flex-direction: column; gap: 14px; }
.sb-cmd-champs > .ds-sechead, .sb-cmd-pliage .ds-sechead { margin: 10px 0 -2px; }
.sb-cmd-lien { display: flex; align-items: flex-end; gap: 6px; }
.sb-cmd-lien > div:first-child { flex: 1 1 auto; min-width: 0; }
.sb-cmd-pied { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sb-cmd-pied .sb-cmd-fin { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Dépliage du bloc facultatif : la rangée de grille passe de 0fr à 1fr (accordéon), 210 ms ease-out
   du DS. prefers-reduced-motion est déjà neutralisé par motion.css sur tout .ds-root. */
.sb-cmd-pliage { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.sb-cmd-pliage.est-ouvert { grid-template-rows: 1fr; opacity: 1; }
.sb-cmd-pliage > div { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.sb-cmd-chevron-pliage { display: inline-flex; transition: transform var(--dur) var(--ease-out); }
.sb-cmd-chevron-pliage.est-ouvert { transform: rotate(180deg); }

/* ── La table : code B en encre pleine, dates en tabulaire ──────────────────────────────────── */

.sb-cmd-code { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--text-1); }
.sb-cmd-date { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sb-cmd-echeance { font: 400 12px/1 var(--font-sans); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* L'écran vide de la liste : la phrase partagée `sb-vide`, avec la respiration d'une table —
   elle prend la place du tableau dans une carte `flush`, qui n'a pas de marge à elle. */
.sb-cmd-vide-liste { padding: 28px 20px; }
.sb-cmd-chevron { color: var(--text-3); display: inline-flex; transition: transform var(--dur-fast) var(--ease-out); }
.sb-cmd-ouverte .sb-cmd-chevron { transform: rotate(90deg); color: var(--accent); }
/* La ligne ouverte se dit par son fond et le chevron tourné, sans filet accent (arbitrage de
   Célian du 3 septembre 2026). */
.sb-cmd-ouverte td { background: var(--accent-softer); border-bottom-color: transparent; }

/* ── La fiche dépliée sous sa ligne : champs à gauche, Suivi et Journal à droite ─────────────── */

.sb-cmd-fiche-cellule { white-space: normal !important; padding: 0 !important; background: var(--surface-1); }
.sb-cmd-fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 0; }
.sb-cmd-fiche-champs { padding: 18px 20px 16px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 14px; }
.sb-cmd-fiche-cote { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); }
.sb-cmd-fiche .sb-cmd-pied { grid-column: 1 / -1; margin: 0; padding: 12px 20px; border-top: 1px solid var(--border-subtle); }
.sb-cmd-fiche .sb-cmd-pied .sb-cmd-fin { align-items: flex-end; }
/* La confirmation de suppression prend la place de son bouton, à gauche du pied, sans pousser les
   boutons de droite hors de vue. */
.sb-cmd-fiche .sb-cmd-pied .sb-cmd-suppression { width: 360px; max-width: 100%; box-sizing: border-box; }
.sb-cmd-probleme { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* Le bloc « Par » : le champ, puis le refus en ligne dessous ; dans le pied de la fiche, le refus
   se lit à gauche du champ. Un seul prénom par fiche, partagé par les trois gestes (8 septembre 2026). */
.sb-cmd-par { display: flex; flex-direction: column; gap: 8px; }
.sb-cmd-fin .sb-cmd-par { flex-direction: row-reverse; align-items: flex-end; gap: 10px; }
/* Colonne droite : une fiche de propriétés, libellé à gauche, valeur à droite. */
.sb-cmd-props { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 0; }
.sb-cmd-props dt { margin: 0; font: 500 12px/1.3 var(--font-sans); color: var(--text-2); }
.sb-cmd-props dd { margin: 0; min-width: 0; font: 400 var(--text-sm)/1.3 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; }
.sb-cmd-props dd.est-absent { color: var(--text-3); }
.sb-cmd-props dd .ds-btn { max-width: 100%; }
/* Le journal d'une commande : quand à gauche, quoi à droite. Distinct du journal d'un sujet de la
   carte (`.sb-journal`, css/panneau.css) : deux objets, deux trames. */
.sb-cmd-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-cmd-journal li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-subtle); font: 400 12px/1.4 var(--font-sans); color: var(--text-1); }
.sb-cmd-journal li:first-child { border-top: none; padding-top: 0; }
/* L'instant d'une entrée est une donnée (règle des trois encres) : encre 2, pas encre 3. */
.sb-cmd-journal time { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sb-cmd-journal small { display: block; font: 400 var(--text-2xs)/1.3 var(--font-sans); color: var(--text-2); }

/* ── La fenêtre d'accueil des rappels ───────────────────────────────────────────────────────── */

/* ENTORSE ASSUMÉE à « panneaux en ligne plutôt que modales », décidée par Célian le 3 septembre
   2026 et reconduite le 9 : la permission de notifier n'est accordée par le navigateur que dans un
   geste utilisateur, et ce geste ne doit pas pouvoir être contourné par un clic ailleurs. La règle
   reste entière partout ailleurs.
   La fenêtre était dessinée par le `Modal` du design system, supprimé en amont le 4 septembre. Elle
   est dessinée ici depuis, aux jetons du système et sans rien inventer : les valeurs sont celles
   que `Modal` posait, relevées dans le bundle avant son retrait.
   Elle vit dans le flux de `.sb-app`, pas dans un portail sur <body> : c'est ce qui lui donne le
   thème du poste, l'accent et le socle `.ds-root` par simple héritage. */
.sb-cmd-accueil-voile {
  position: fixed; inset: 0; z-index: var(--z-modal, 10000);
  display: flex; align-items: center; justify-content: center; padding: var(--ds-space-6);
  background: var(--scrim); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  animation: sb-cmd-accueil-fondu var(--dur) var(--ease-out);
}
.sb-cmd-accueil {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--ds-radius-2xl); box-shadow: var(--shadow-3);
  animation: sb-cmd-accueil-entree var(--dur-slow) var(--ease-spring);
}
.sb-cmd-accueil-tete { display: flex; align-items: center; gap: var(--ds-space-3); padding: 18px 18px var(--ds-space-3); }
.sb-cmd-accueil-titre { font: var(--weight-bold) var(--text-lg)/1.2 var(--font-display); color: var(--text-1); letter-spacing: -0.01em; }
.sb-cmd-accueil-corps { padding: var(--ds-space-1) 18px 18px; overflow: auto; color: var(--text-2); font: var(--type-body); }
.sb-cmd-accueil-pied { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border-subtle); }
@keyframes sb-cmd-accueil-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-cmd-accueil-entree { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sb-cmd-accueil-voile, .sb-cmd-accueil { animation: none; }
}
.sb-cmd-accueil-phrase { margin: 0 0 var(--ds-space-4); font: var(--type-body); color: var(--text-2); }
.sb-cmd-accueil-phrase b { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
/* Le refus prend toute la largeur de la rangée : dans la colonne du champ (96 px) il se casse en
   cinq lignes et déforme le réglage. */
.sb-cmd-accueil .sb-reglage > .sb-refus { grid-column: 1 / -1; margin-top: 8px; }