/* ==========================================================================
   ÉCRANS — LES LISTES DU BACK-OFFICE DE CAISSE

   Sa propre feuille, comme le veut la charte : un écran qui s'ajoute à la
   queue de modele-erp.css entre en conflit avec tous les autres sur la
   dernière ligne du fichier et sur la clé de cache, jamais sur le fond.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de
   easytech-theme.css. Cette feuille ne pose que des mesures et un alignement.

   UNE FONCTION, SES ÉCRANS
     Elle sert les écrans de PILOTAGE du POS — le journal des tickets
     (/app/pos/tickets), le choix du ticket à retourner (/app/pos/retours) et le
     suivi des encaissements (/app/pos/encaissements), le rapport Z
     (/app/pos/rapports-z) et le tableau de bord (/app/pos/tableau-bord), les
     créances clients (/app/pos/creances), l'analyse des ventes, les sessions de
     caisse et le paramétrage. Ils portent les mêmes pièces, et aucune n'existait
     dans le gabarit.

     Elle ne sert PAS les tickets en attente (/app/pos/attente) ni la file des
     commandes (/app/pos/commandes) : ces deux écrans ont été portés en parallèle
     sur main, avec leurs propres feuilles. Y ajouter des classes pour eux ferait
     dépendre un écran de la feuille d'un autre — ce que la charte interdit.

     Le jour où l'une de ces classes est reprise par un écran d'un AUTRE
     domaine, elle monte dans le gabarit (modele-erp.css) — jamais l'inverse,
     sous peine qu'un écran dépende de la feuille d'un autre.

   CE QU'ELLE AJOUTE, ET POURQUOI ÇA N'EXISTAIT PAS
     LE BLOC DE PÉRIMÈTRE de l'en-tête de page. Le gabarit sait poser un titre,
     un résumé et des boutons ; il ne savait pas poser des CONTRÔLES DE
     PÉRIMÈTRE — une session, deux bornes de date — c'est-à-dire des champs qui
     ne filtrent pas la liste affichée mais la REDEMANDENT au serveur.

     Ils ne pouvaient pas descendre dans le filtre latéral : celui-ci trie ce
     qui est déjà chargé, instantanément et sans requête. Mélanger les deux
     ferait croire que tout coûte le même prix, et un utilisateur qui déplie une
     facette n'attend pas un aller-retour serveur.

     La mesure suit celle de la barre d'outils du gabarit : contrôles de 42 px,
     alignés sur leur ligne de base, avec un micro-libellé au-dessus. C'est le
     libellé qui manquait : sans lui, trois champs côte à côte dans un en-tête
     ne disent pas lequel est la période et lequel est la session.
   ========================================================================== */

.pos-portee {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-portee-champ {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Micro-libellé mono en capitales — la même graisse que .mx-fait-lbl, dont il
   reprend l'intention : nommer une valeur sans peser autant qu'elle. Il n'est
   PAS .mx-fait-lbl : celui-là appartient à la bande de faits saillants d'une
   page objet, et lui emprunter sa classe attacherait cet en-tête au sort d'une
   pièce qui n'a rien à voir avec lui. */
.pos-portee-lbl {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--et-muted);
    margin-bottom: 3px;
    white-space: nowrap;
}

/* Les champs de périmètre : mêmes 42 px que les boutons de la barre d'outils,
   pour que la rangée ait une seule ligne de base. */
.pos-portee .mx-input,
.pos-portee .mx-select { height: 42px; }

.pos-portee-session { min-width: 250px; }
.pos-portee-date { width: 150px; }


/* Sur écran étroit, le bloc passe sous le titre et prend toute la largeur :
   trois champs de 250 px en ligne dans un en-tête de 480 px se chevauchent. */
@media (max-width: 1100px) {
    .pos-portee { width: 100%; }
    .pos-portee-champ { flex: 1 1 160px; }
    .pos-portee-session,
    .pos-portee-date { min-width: 0; width: 100%; }
}


/* ==========================================================================
   RACCOURCIS DE PÉRIODE

   Aujourd'hui / 7 jours / Ce mois, sous le filet de l'en-tête. Ils ne sont pas
   des .mx-btn : un bouton de barre d'outils DÉCLENCHE une action, ceux-ci
   CHOISISSENT parmi trois états dont un seul est vrai à la fois. La forme suit
   le sens — segmentés, et celui qui est appliqué reste enfoncé.

   POURQUOI L'ÉTAT ACTIF EST INDISPENSABLE
     Sans lui, on reclique le raccourci déjà appliqué en croyant que rien ne
     s'est passé — l'écran recharge les mêmes chiffres, et le doute reste.
   ========================================================================== */

.pos-raccourcis {
    display: flex;
    gap: 0;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pos-raccourci {
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface);
    color: var(--et-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pos-raccourci + .pos-raccourci { border-left: 0; }
.pos-raccourci:first-child { border-radius: var(--et-r-btn) 0 0 var(--et-r-btn); }
.pos-raccourci:last-child { border-radius: 0 var(--et-r-btn) var(--et-r-btn) 0; }

.pos-raccourci:hover:not(.est-actif) { color: var(--et-ink); }

.pos-raccourci.est-actif {
    background: var(--et-tint);
    border-color: var(--et-form-border);
    color: var(--et-form-blue-d);
}

/* ==========================================================================
   CONTREPARTIE D'UN MODE DE RÈGLEMENT

   La ligne grise sous chaque barre du suivi des encaissements : contre quoi la
   ligne se pointe (le tiroir, le relevé de l'opérateur, la banque). C'est la
   seule information que l'écran AJOUTE au chiffre, et celle qui manque
   toujours à qui doit rapprocher — un tableau de montants laisse deviner.

   Le retrait de 178 px l'aligne sur le début des barres (168 px de libellé
   + 10 px de gouttière), de sorte qu'elle se lit comme la suite de sa barre et
   non comme une ligne de plus.
   ========================================================================== */

.pos-contrepartie {
    margin: -2px 0 8px 178px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--et-faint);
}

@media (max-width: 700px) {
    .pos-contrepartie { margin-left: 0; }
}


/* ==========================================================================
   TABLEAU DE BORD — LA GRILLE À DEUX COLONNES

   Sessions ouvertes à gauche, meilleures ventes à droite, puis l'histogramme
   horaire pleine largeur en dessous. Deux colonnes plutôt qu'une rangée de
   quatre cartes : ces deux blocs portent des TABLES, et une table de cinq
   colonnes dans un quart d'écran se lit en défilant latéralement.
   ========================================================================== */

.pos-bord-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
    align-items: start;
}

/* ==========================================================================
   VARIATION PAR RAPPORT À LA VEILLE

   Sous chaque indicateur : la flèche, le pourcentage, ET LA BASE. Un
   pourcentage sans dénominateur est une erreur, pas une approximation —
   « +14 % » ne se vérifie pas et ne se raconte pas si l'on ne dit pas de quoi.
   ========================================================================== */

.pos-variation {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-muted);
}

.pos-variation.est-positif { color: var(--et-succes-ink); }
.pos-variation.est-negatif { color: var(--et-danger-ink); }

.pos-variation-base {
    margin-left: 6px;
    font-weight: 400;
    color: var(--et-faint);
}

/* ==========================================================================
   HISTOGRAMME HORAIRE

   Vingt-quatre colonnes, gouttière fine, défilement latéral sur écran étroit.

   LES HEURES CREUSES RESTENT VISIBLES : une frise qui saute les heures sans
   vente donnerait une journée pleine, alors que c'est justement le creux qu'on
   cherche pour placer une pause ou un renfort. Une colonne à zéro garde donc sa
   place et son étiquette, et n'affiche qu'une barre de hauteur nulle.
   ========================================================================== */

.pos-histo {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--et-hairline);
    overflow-x: auto;
}

.pos-histo-col {
    flex: 1 0 30px;
    min-width: 30px;
    text-align: center;
}

.pos-histo-piste {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 132px;
}

.pos-histo-barre {
    width: 16px;
    min-height: 2px;
    background: var(--et-form-blue);
    transition: height .3s ease;
}

/* L'heure de pointe se distingue : c'est la seule colonne sur laquelle une
   décision se prend — renforcer, ou non. */
.pos-histo-barre.est-pointe { background: var(--et-action); }

.pos-histo-lbl {
    margin-top: 5px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}


/* ==========================================================================
   BALANCE ÂGÉE — UNE BARRE, QUATRE TRANCHES

   La forme de la dette se lit d'un coup, là où quatre chiffres demandent de
   comparer de tête. Les quatre teintes suivent l'ÉCHELLE D'ALERTE de la charte
   et non une palette décorative : ce qui est récent est sain, ce qui a plus de
   quatre-vingt-dix jours est douteux, et l'œil doit le savoir sans lire la
   légende.
   ========================================================================== */

.pos-age-barre {
    display: flex;
    height: 18px;
    border-radius: var(--et-r-pill);
    overflow: hidden;
    background: var(--et-piste);
}

.pos-age-part { height: 100%; }
.pos-age-part.est-recent  { background: var(--et-succes); }
.pos-age-part.est-moyen   { background: var(--et-form-blue); }
.pos-age-part.est-tardif  { background: var(--et-avertissement); }
.pos-age-part.est-douteux { background: var(--et-danger); }

.pos-age-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--et-ink);
}

.pos-age-item { display: inline-flex; align-items: center; gap: 5px; }

.pos-age-pastille {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: none;
}

.pos-age-pastille.est-recent  { background: var(--et-succes); }
.pos-age-pastille.est-moyen   { background: var(--et-form-blue); }
.pos-age-pastille.est-tardif  { background: var(--et-avertissement); }
.pos-age-pastille.est-douteux { background: var(--et-danger); }


/* ==========================================================================
   TUILES DE CAISSE — L'ÉTAT DU COMPTOIR EN UN COUP D'ŒIL

   Une tuile par caisse active, sur l'écran des sessions. Ce n'est pas une
   liste : on ne les trie pas, on ne les cherche pas — on regarde LAQUELLE EST
   OUVERTE, et on agit dessus. D'où des cartes, et un liseré gauche qui porte
   l'état plutôt qu'une pastille seule.

   TROIS ÉTATS, ET LE TROISIÈME EST CELUI QUI COMPTE
     Fermée (neutre), ouverte (vert), et OUVERTE DEPUIS PLUS DE 24 H — un oubli
     de clôture, qui fausse le théorique du lendemain. Le confondre avec une
     session normale fait découvrir le problème à la clôture suivante, quand
     deux journées se sont déjà mélangées.
   ========================================================================== */

.pos-caisses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.pos-caisse {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 3px solid var(--et-hairline);
}

.pos-caisse.est-ouverte { border-left-color: var(--et-succes); background: var(--et-succes-bg); }
.pos-caisse.est-oubliee { border-left-color: var(--et-avertissement-mark); background: var(--et-avertissement-bg); }

.pos-caisse-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

/* min-width:0 sur le bloc d'identité, sans quoi l'ellipse du nom ne se déclenche
   jamais : un enfant de flex prend la largeur de son contenu par défaut, et un
   nom long pousse la pastille d'état hors de la tuile. */
.pos-caisse-ident { min-width: 0; }

.pos-caisse-nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--et-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-caisse-code {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}

.pos-caisse-corps {
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    color: var(--et-ink);
}

/* Les actions restent EN BAS de la tuile quelle que soit la hauteur du corps :
   sans cela, le bouton « Clôturer » d'une caisse verbeuse se retrouve dix pixels
   plus bas que celui de sa voisine, et la rangée devient un escalier. */
.pos-caisse-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

.pos-caisse-actions > * { flex: 1 1 auto; }


/* Le bloc d'identité rétrécit avant le total : c'est la référence qui peut
   s'élider, jamais le montant. */
.min-width-0 { min-width: 0; }


/* ==========================================================================
   MODALE DE DÉTAIL D'UN TICKET  (/app/pos/tickets)

   Mesuré sous Chromium sur les feuilles du dépôt : la modale faisait 892 px de
   haut pour un ticket d'UNE SEULE ligne — elle ne tenait pas sur un portable de
   768 px, et le bloc qu'on vient lire (les lignes) était le plus petit des cinq.
   Trois blocs se resserrent ici ; le quatrième, le règlement, s'allonge exprès
   pour porter le solde.
   ========================================================================== */

/* DEUX COLONNES DE CHAMPS. Cinq valeurs courtes — « Application », « Hôtel Océan »
   — occupaient cinq rangées pleine largeur dans une modale de 760 px : la colonne
   de valeurs faisait 554 px pour onze caractères.

   Le libellé RESTE À DROITE de sa colonne, comme l'exige le gabarit ; seule la
   colonne rétrécit, de 158 à 96 px, parce que ces libellés-là sont courts. Ce
   n'est pas une entorse à la règle des 158 px : celle-ci cale une fiche de saisie
   pleine page, pas deux colonnes dans un dialogue.

   Une seule vis : si un deuxième écran en a besoin, la classe monte en section 11
   de modele-erp.css — jamais l'inverse. */
.pos-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.pos-form-2col .mx-champ { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 10px; }
/* Ce qui ne se coupe pas en deux : une date longue, un avertissement, une
   explication. Le div est posé PAR L'ÉCRAN autour du ChampFiche, le composant
   n'ayant pas à connaître la grille qui l'accueille. */
.pos-champ-large { grid-column: 1 / -1; }

/* Sous 720 px — le palier auquel le gabarit passe déjà .mx-champ en une colonne
   (modele-erp.css) — deux colonnes de 96 px de libellé ne tiennent plus. On rend
   la main au gabarit plutôt que de lutter contre lui. */
@media (max-width: 720px) {
    .pos-form-2col { grid-template-columns: 1fr; }
}

/* LES TOTAUX EN BANDE. .mx-faits est né pour la bande de faits saillants d'une
   page objet, où il s'appuie sur le bord de la page ; dans un corps de modale il
   lui faut son propre contour, sans quoi il flotte entre deux groupes. */
.pos-faits-modale { border: 1px solid var(--et-hairline); }
/* Le total TTC est la valeur qu'on cherche : il pèse plus que les trois autres. */
.pos-faits-modale .mx-fait-val.est-fort { font-size: 15px; font-weight: 800; }