/*!
 * components.css — les briques d'interface partagées par TOUTES les surfaces.
 *
 * Pourquoi un troisième fichier, et pas theme-backoffice.css : la pastille de
 * statut s'affiche sur des surfaces qui ne chargent PAS les mêmes feuilles —
 *
 *   · le back-office          (theme-backoffice.css)
 *   · deux états de rapport   (documents autonomes, reports_print.css)
 *   · l'impression en masse   (document autonome, bulk_print.css)
 *
 * Les trois documents autonomes ne chargent ni Bootstrap ni la charte : la
 * définir dans theme-backoffice.css l'aurait rendue invisible chez eux, et
 * tokens.css ne style rien par convention. D'où ce fichier.
 *
 * Le SITE PUBLIC ne le charge pas : aucune de ses vues ne rend de pastille. Sa
 * page de suivi a sa propre chronologie (`timeline.css`), qui reste à aligner
 * sur la charte — c'est le lot 7, pas celui-ci.
 *
 * ⚠️ Aucun hexadécimal : tout vient de tokens.css.
 */

/* ===========================================================================
   PASTILLE DE STATUT — les sept familles
   Les classes sont émises par App\Services\Parcel\ParcelStage, seule table de
   correspondance entre les 33 codes du backend et ces sept familles.
   =========================================================================== */
.bl-pill {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-weight-heading);
  font-size: var(--bl-size-xs);
  line-height: 1.5;
  padding: 4px 9px;
  border-radius: var(--bl-radius-pill);
  border: 1px solid transparent;
}

/* Les cinq étapes du parcours nominal, en fonds pâles — maquette validée. */
.bl-pill--wait    { background: var(--bl-pill-wait-bg);    color: var(--bl-pill-wait-fg); }
.bl-pill--transit { background: var(--bl-pill-transit-bg); color: var(--bl-pill-transit-fg); }
.bl-pill--hub     { background: var(--bl-pill-hub-bg);     color: var(--bl-pill-hub-fg); }
.bl-pill--assign  { background: var(--bl-pill-assign-bg);  color: var(--bl-pill-assign-fg); }
.bl-pill--done    { background: var(--bl-pill-done-bg);    color: var(--bl-pill-done-fg); }

/* Retour : incident, fond pâle rouge — maquette validée. */
.bl-pill--return  { background: var(--bl-pill-return-bg);  color: var(--bl-pill-return-fg); }

/* Livraison partielle : incident lui aussi, mais la maquette n'avait pas de
   ligne pour lui. Il est le SEUL à fond plein, et ce n'est pas un caprice :
   un fond pâle orange ne se distingue pas du pâle ocre de « transit »
   (1,05:1 entre les deux fonds — deux familles illisibles côte à côte dans une
   même colonne). Le fond plein tranche, et c'est le statut où l'opérateur doit
   agir : le COD encaissé ne correspond pas à la commande. 4,77:1. */
.bl-pill--partial {
  background: var(--bl-pill-partial-bg);
  color: var(--bl-pill-partial-fg);
}

/* ===========================================================================
   À L'IMPRESSION — contours plutôt que fonds pleins
   Les états de rapport partent sur papier. Sept fonds pleins, c'est de l'encre
   pour rien, et en niveaux de gris ils se confondent. Le contour garde la
   distinction sans le remplissage, et le libellé porte l'information de toute
   façon — la couleur ne l'a jamais portée seule.
   =========================================================================== */
@media print {
  .bl-pill {
    background: transparent !important;
    border-color: currentColor;
    padding: 2px 7px;
  }
  .bl-pill--wait    { color: var(--bl-pill-wait-fg); }
  .bl-pill--transit { color: var(--bl-pill-transit-fg); }
  .bl-pill--hub     { color: var(--bl-pill-hub-fg); }
  .bl-pill--assign  { color: var(--bl-pill-assign-fg); }
  .bl-pill--done    { color: var(--bl-pill-done-fg); }
  .bl-pill--return  { color: var(--bl-pill-return-fg); }
  /* Seul l'incident partiel garde du poids : il reste en gras appuyé. */
  .bl-pill--partial { color: var(--bl-pill-partial-fg); font-weight: var(--bl-weight-heading-bold); }
}

/* ===========================================================================
   UTILITAIRES — lot 5
   =========================================================================== */

/* Masqué à l'œil, lu par un lecteur d'écran. Défini ici plutôt que d'emprunter
   `sr-only` (Bootstrap 4) ou `visually-hidden` (Bootstrap 5) : le back-office
   charge les deux aujourd'hui, et le jour où l'un partira, ceci tiendra encore. */
.bl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Champ de période des tableaux de bord. Il portait `style="width: 15%"` d'un
   côté et `30%` de l'autre — un pourcentage sur un champ de saisie donne une
   largeur qui n'a rien à voir avec son contenu. */
.bl-filter-date {
  width: 12rem;
  max-width: 100%;
  display: inline-block;
}