/* ==========================================================================
   ÉCRAN — Soldes de congés et provision (CNG-02, /app/paie/soldes-conges)

   Feuille d'ÉCRAN : ne porte que ce qui sert à celui-là. Tout le reste vient de
   css/easypaie.css (les seize familles .ep-* de la passation « Design 10 »).
   Aucune couleur en dur — jetons --et-* uniquement, donc bascule sombre gratuite.

   Une classe qui finirait par servir un second écran de paie remonte dans
   easypaie.css et quitte ce fichier ; jamais l'inverse.
   ========================================================================== */

/* Date d'arrêté, dans la barre d'outils de l'en-tête. Le champ est court : on y
   pose une date, pas une phrase. Le libellé l'accompagne au lieu de le
   surmonter — une barre d'outils se lit en ligne. */
.cg-arrete-lbl {
    align-self: center;
    white-space: nowrap;
    margin: 0;
}
.cg-arrete {
    height: 32px;
    width: 148px;
    flex: none;
}

/* Recherche, à droite de la barre de segments du tableau. */
.cg-recherche {
    height: 32px;
    width: 240px;
    max-width: 100%;
    margin-left: auto;
}

/* Interrupteur « inclure les sortis ». Il déclenche un RECHARGEMENT SERVEUR et
   non un filtre d'écran : la provision doit porter sur l'effectif qu'elle
   affiche. Il est donc posé à part des puces de segment, qui elles ne filtrent
   que la lecture. */
.cg-sortis {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-muted);
    white-space: nowrap;
    cursor: pointer;
}
.cg-sortis input { accent-color: var(--et-form-blue); }

/* Liste des réserves, dans le bandeau au-dessus du tableau. Une liste à puces
   plutôt qu'un paragraphe : chaque réserve est une hypothèse distincte, et les
   fondre en un bloc les rend toutes également faciles à ne pas lire. */
.cg-reserves {
    margin: 4px 0 0;
    padding-left: 18px;
}
.cg-reserves li { margin-top: 3px; }

@media (max-width: 720px) {
    .cg-recherche { width: 100%; margin-left: 0; }
    .cg-arrete { width: 100%; }
}