/* ===========================================================================
   FEUILLE D'ÉCRAN — Correction des pointages
   Écran : Components/Pages/App/CorrectionPointages.razor — /app/correction-pointages
           et sa modale de correction, CorrectionPointageFiche.razor

   POURQUOI CE FICHIER EXISTE, ET PAS UN BLOC DE PLUS DANS modele-erp.css
   Voir l'en-tête d'ecran-cycles.css : une feuille par écran donne à chacun sa
   fin de fichier et sa clé de cache, et deux branches ouvertes le même jour
   cessent de se télescoper sur l'une comme sur l'autre.

   CE QUI N'EST PAS ICI, ET POURQUOI
   Tout ce qui porte un préfixe de gabarit partagé reste dans la feuille de sa
   famille : .fx-* (fiche.css) pour la modale, .mx-* (modele-erp.css) pour la
   grille de formulaire dense, .tbl-* (easytime-shell.css) pour la liste. Ce qui
   suit porte au contraire le préfixe .cpt-*, propre à cet écran, et n'a de sens
   que pour lui.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-* de
   easytech-theme.css. Une teinte écrite ici échapperait à la bascule de charte,
   et se retrouverait seule d'une couleur le jour où elle change.

   Chargée APRÈS modele-erp.css : ses règles peuvent affiner le gabarit à
   spécificité égale, l'inverse n'est pas vrai.
   =========================================================================== */

/* ===========================================================================
   LE CONSTAT — quatre valeurs en lecture, en tête de la modale.

   Entrée lue, sortie lue, heures calculées, HEURES DUES. La quatrième est celle
   qu'on oublie : sans elle, l'écart affiché n'est pas vérifiable, et c'est
   pourtant l'écart qu'on vient arbitrer. Un mi-temps doit 4,50 h — mesuré
   contre 8 h, son écart serait faux de moitié.

   Quatre colonnes séparées par un filet d'un pixel, comme la bande de
   faits-saillants du gabarit : ce sont des CONSTATS, pas des champs, et ils ne
   doivent pas se lire comme une saisie qu'on aurait oublié de remplir.
   =========================================================================== */
.cpt-constat {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--et-hairline);
    border: 1px solid var(--et-hairline);
}
.cpt-constat > div {
    padding: 9px 12px;
    background: var(--et-surface);
    min-width: 0;
}
.cpt-constat span {
    display: block;
    font-size: 12px;
    color: var(--et-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cpt-constat strong {
    display: block;
    margin-top: 3px;
    font-family: var(--et-font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--et-form-text);
}

/* Une borne ABSENTE se voit sur la case, pas seulement dans son texte : c'est
   elle qui commande le geste — il n'y a rien à corriger d'autre. */
.cpt-constat > div.est-manquant { background: var(--et-avertissement-bg); }
.cpt-constat > div.est-manquant strong { color: var(--et-amber-ink); }

/* Sur un écran étroit, quatre colonnes de 13,5 px en mono deviennent illisibles
   avant de devenir étroites. Deux valeurs par rangée gardent les chiffres
   comparables, ce qui est tout l'intérêt de la mono. */
@media (max-width: 640px) {
    .cpt-constat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===========================================================================
   LES QUATRE NATURES — des boutons, pas une liste déroulante.

   Ce sont quatre décisions de NATURE différente, pas quatre valeurs d'un même
   champ : trois touchent une heure, la quatrième n'y touche pas et atteste. Une
   liste déroulante les mettrait sur le même plan et laisserait choisir la
   dernière par inadvertance — celle, précisément, qui ne corrige rien.

   Même dessin que .tra-choix (traitement des absences) : c'est le même geste,
   et deux dessins pour un geste durent aussi longtemps que le produit. La
   classe reste distincte parce que la teinte, elle, diffère — voir plus bas.
   =========================================================================== */
.cpt-nature {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    background: var(--et-surface);
    border: 1px solid var(--et-form-border);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--et-form-text);
    cursor: pointer;
    white-space: nowrap;
}
.cpt-nature:hover:not(:disabled) { border-color: var(--et-form-blue); background: var(--et-surface-3); }
.cpt-nature:disabled { opacity: .55; cursor: not-allowed; }
.cpt-nature:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

/* Le choix retenu prend le BLEU D'INTERFACE, et non la couleur d'une
   conséquence comme sur le traitement des absences : ici les quatre natures
   sont des gestes également légitimes — aucune n'est « la mauvaise ». Ce qui
   coûte, sur cet écran, ce n'est pas la nature choisie, c'est l'absence de
   motif ; c'est donc lui qui porte le rouge. */
.cpt-nature.est-actif {
    border-color: var(--et-form-blue);
    background: var(--et-info-bg);
    color: var(--et-form-blue-d);
}

/* ===========================================================================
   LES DEUX BORNES ET L'APERÇU — sur une seule rangée.

   L'aperçu est COLLÉ aux champs, et c'est délibéré : il change à la frappe, et
   c'est ce qui permet de voir l'écart se refermer avant d'enregistrer. Rangé
   plus bas, il faudrait le chercher pour vérifier ce qu'on vient de taper.
   =========================================================================== */
.cpt-bornes {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.cpt-bornes > label {
    display: block;
    min-width: 0;
}
.cpt-bornes > label > span {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--et-muted);
}
.cpt-bornes .mx-input { width: 128px; }

.cpt-apercu {
    flex: 1 1 160px;
    min-width: 160px;
    padding: 7px 12px;
    border: 1px solid var(--et-hairline);
    background: var(--et-surface-3);
}
.cpt-apercu span {
    display: block;
    font-size: 12px;
    color: var(--et-muted);
}
.cpt-apercu strong {
    display: block;
    margin-top: 2px;
    font-family: var(--et-font-mono);
    font-size: 14px;
    font-weight: 500;
}

/* L'aperçu se teinte de son RÉSULTAT : vert quand la correction referme l'écart,
   ambre quand elle en laisse un. Ce n'est pas un jugement — un écart peut être
   juste, des heures supplémentaires par exemple — c'est l'information qu'on
   cherchait en ouvrant la modale, et la lire suppose sinon de soustraire deux
   nombres de tête. */
.cpt-apercu.est-juste {
    background: var(--et-succes-bg);
    border-color: var(--et-form-ok);
}
.cpt-apercu.est-juste strong { color: var(--et-form-ok); }
.cpt-apercu.est-ecart {
    background: var(--et-avertissement-bg);
    border-color: var(--et-hairline);
}
.cpt-apercu.est-ecart strong { color: var(--et-amber-ink); }

/* ===========================================================================
   CE QUE L'ENREGISTREMENT PRODUIT — la liste de l'encart.

   Quatre phrases, dont deux que personne ne devine : la journée attend un
   second regard, et rien ne bouge en paie avant une régénération. Une liste à
   puces plutôt qu'un paragraphe, parce que ce sont quatre effets distincts et
   qu'on doit pouvoir en retrouver un.
   =========================================================================== */
.cpt-effets {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cpt-effets li {
    font-size: 13px;
    line-height: 1.55;
    color: var(--et-form-text);
}