/* ===========================================================================
   ÉCRAN « LIVRAISONS » D'EASYPOS (/app/pos/livraisons) — préfixe .livp-*

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css : la règle du dépôt est
   « un écran, une feuille » (voir l'en-tête d'App.razor). Ce que cet écran pose
   ici est de la GÉOMÉTRIE et rien d'autre — il n'invente aucun objet, il
   resserre ceux du gabarit :

     · le sélecteur segmenté des étapes est un .mx-seg, pas une rangée de
       boutons maison ; cette feuille lui donne seulement la pleine largeur ;
     · le bouton d'étape d'une rangée est un .mx-btn .mx-btn-blanc ; cette
       feuille le descend à la hauteur d'une cellule de tableau ;
     · le navigateur de jour est une .mx-outils ; cette feuille aligne ses
       32 px sur les 34 px du champ de date, faute de quoi la rangée boite.

   AUCUNE COULEUR EN DUR : tout par --et-*, sans quoi le thème sombre de la
   coquille EasyPOS (ShellModule ThemeToggleActive) laisserait ici des îlots
   clairs. Un seul préfixe pour un seul écran — .livp-* et non .liv-*, le suivi
   des livraisons du stock (Pages/Stock/SuiviLivraisons.razor) étant un autre
   écran, qui prendra un jour sa propre feuille.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   NAVIGATEUR DE JOUR — « ‹ 20/08/2026 › · Aujourd'hui · Rafraîchir ».
   Les flèches existent pour le geste du matin : reculer d'un jour pour solder
   les courses de la veille, sans ouvrir un calendrier pour y cliquer une date
   qu'on connaît déjà.
   --------------------------------------------------------------------------- */
.livp-jour { gap: 6px; }

/* Le champ de date du gabarit fait 34 px, les boutons d'en-tête 32 : posés dans
   la même rangée, ils décalent leurs bords de 1 px en haut et en bas. On aligne
   sur le bouton, mesure de la barre d'outils d'en-tête de la passation. */
.livp-jour .mx-input,
.livp-jour .mx-btn { height: 32px; }

/* Largeur juste : le champ natif porte son propre bouton de calendrier, et sous
   150 px Chrome tronque « 20/08/2026 » avant l'année. */
.livp-date { width: 152px; font-family: var(--et-font-mono); font-size: 13px; }

/* Carré et sans intitulé — un pas de navigation, pas une action nommée. Les
   4 px d'arrondi de la barre d'outils restent, ils viennent de .mx-btn. */
.livp-pas { width: 32px; padding: 0; }

/* ---------------------------------------------------------------------------
   SEGMENTÉ DE LA FILE — le compte accolé à chaque segment.
   Il est là pour qu'on sache ce qu'on va trouver AVANT de cliquer : « Livrées »
   sans son compte oblige à changer de segment pour découvrir qu'il est vide, et
   à revenir. Discret et en chasse fixe : c'est un chiffre, pas un libellé.
   --------------------------------------------------------------------------- */
.livp-seg-n {
    margin-left: 6px;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    color: var(--et-muted);
}
/* Sur le segment actif, l'ardoise est pleine : le gris du repos y disparaîtrait.
   L'encre est HÉRITÉE du bouton et seulement atténuée — écrire un blanc ici
   ferait une couleur en dur, et le pendant sombre du gabarit (#e5edf5) la
   contredirait. */
.mx-seg > button.est-actif .livp-seg-n { color: inherit; opacity: .72; }

/* ---------------------------------------------------------------------------
   ADRESSE — la colonne la plus longue de la file, et celle qu'on lit le plus.
   Deux lignes au maximum : au-delà, une seule adresse de quatre lignes double la
   hauteur de sa rangée et casse le balayage vertical de la colonne d'heures.
   L'adresse entière reste lisible dans le panneau d'aperçu, qui ne la coupe pas.
   --------------------------------------------------------------------------- */
.livp-adr {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   BOUTON D'ÉTAPE DE RANGÉE — « Faire partir », puis « Livrée ».
   Le seul geste porté par la rangée, parce que c'est celui des cent fois par
   jour. Il descend à 26 px : un bouton de 32 px dans une cellule de tableau
   creuse la rangée et désaligne la colonne d'à côté.
   --------------------------------------------------------------------------- */
.livp-acte {
    height: 26px; padding: 0 9px;
    font-size: 12px; font-weight: 600;
}

/* ---------------------------------------------------------------------------
   PANNEAU D'APERÇU — affectation du livreur, puis avancement.
   --------------------------------------------------------------------------- */

/* Le champ prend la place, le bouton garde la sienne : un « Affecter » qui
   s'étire avec le panneau se lit comme une bannière et non comme une action. */
.livp-affect { display: flex; align-items: center; gap: 8px; }
.livp-affect .mx-input { flex: 1; min-width: 0; }
.livp-affect .mx-btn { flex: none; }

/* Les trois étapes occupent la largeur du panneau, à parts égales : elles
   forment une progression, et une progression dont les crans n'ont pas la même
   largeur se lit comme un classement. */
.livp-etapes { display: flex; width: 100%; }
.livp-etapes > button {
    flex: 1; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 8px;
}