/* ===========================================================================
   ÉCRAN « CONGÉS — DEMANDE & VALIDATION » (/app/paie/conges, CNG-01) — préfixe .cng-*

   Maquette « Congés — demande & validation » (canevas du 2026-09-28, versée dans
   docs/modeles/design_handoff_conges_demandes/). Ce que cette feuille pose, et rien de plus :
     · la période et son échéance (« commence demain », « période passée ») ;
     · l'étiquette « justificatif requis » ;
     · la décision en toutes lettres — « Approuver », « Refuser » ;
     · le bandeau des demandes à trancher d'urgence.
   Les onglets sont au gabarit (.mx-vues), comme la liste en cartes sous 1024 px
   (.mx-liste-cartes). AUCUNE COULEUR EN DUR : tout par --et-*.
   =========================================================================== */

.cng-vues             { margin: 4px 0 16px; }

.cng-nom, .cng-motif, .cng-periode, .cng-etat {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.cng-sous             { font-size: 12px; font-weight: 400; color: var(--et-muted); }
.tbl-alerte .cng-sous { color: var(--et-ink); }

.cng-type             { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Une étiquette NEUTRE : exiger une pièce n'est ni une faute ni un état, c'est une propriété
   du type de congé. */
.cng-etiquette        { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; white-space: nowrap;
                        font-size: 12px; font-weight: 600; color: var(--et-ink);
                        background: var(--et-surface-3); border: 1px solid var(--et-hairline); }

.cng-dates            { white-space: nowrap; }
.cng-echeance         { font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.cng-echeance.est-urgente { font-weight: 700; color: var(--et-avertissement-ink); }
/* Le retour effectif d'un congé (lot 4) : un retard se lit comme une échéance urgente. */
.cng-sous.est-retard   { font-weight: 700; color: var(--et-avertissement-ink); }
/* L'effet paie d'une demande en attente : ce que le bulletin en déduira. */
.cng-sous.est-paie     { font-weight: 600; color: var(--et-avertissement-ink); }
.tbl-alerte .cng-echeance:not(.est-urgente) { color: var(--et-ink); }

/* La décision en toutes lettres : deux coches sans libellé ne disaient pas laquelle
   approuvait. Le vert et le rouge sont des FILETS (charte : un état en bordure, jamais en
   encre) ; le libellé est à l'encre de son rang. */
.cng-decider          { display: inline-flex; gap: 6px; }
.cng-decider .mx-btn  { background: var(--et-surface); }
.cng-approuver        { border-color: var(--et-succes); color: var(--et-succes-ink); }
.cng-refuser          { border-color: var(--et-danger); color: var(--et-danger-ink); }

.cng-carte-seul       { display: none; }

.cng-bandeau          { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 16px; }
.cng-bandeau .mx-blocage-txt { flex: 1 1 320px; }
.cng-bandeau-btn      { flex: none; }

@media (max-width: 1024px) {
    .cng-bandeau-btn  { min-height: 44px; }
    .cng-carte-seul   { display: inline; }
    .cng-nom          { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
    .cng-type         { flex-direction: row; align-items: center; gap: 8px; }
    /* Sur la carte, la décision prend la ligne entière : deux boutons de 44 px, côte à côte. */
    .cng-corps table.tbl > tbody > tr > td:has(.cng-decider) { flex: 1 1 100%; margin-left: 0; }
    .cng-decider      { display: flex; width: 100%; }
    .cng-decider .mx-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
}
@media (max-width: 640px) {
    .cng-bandeau-btn  { flex: 1 1 100%; justify-content: center; }
}

/* LA FENÊTRE « NOUVELLE DEMANDE » (2026-10-02) — sur le gabarit ; seules les largeurs de
   ses champs courts sont propres à l'écran : une date ou un nombre de jours sur toute la
   colonne des valeurs se lit comme un champ de texte libre. */
.cng-date  { max-width: 200px; }
.cng-jours { max-width: 120px; }