/* ==========================================================================
   ÉCRAN — Référentiel de paie versionné (PAR-REF, /app/paie/referentiel)

   Feuille d'ÉCRAN : ne contient que ce qui sert à celui-là. Tout le reste vient
   de css/easypaie.css (les seize familles .ep-* de la passation « Design 10 »),
   dont cet écran est le PREMIER consommateur.

   Aucune couleur en dur : les jetons --et-* du thème, et rien d'autre — c'est ce
   qui fait suivre la bascule sombre sans une ligne de plus.

   Si une de ces classes finit par servir un second écran de paie, elle remonte
   dans easypaie.css (feuille de module) et quitte ce fichier — jamais l'inverse,
   sinon un écran dépend de la feuille d'un autre pour s'afficher.
   ========================================================================== */

/* Marque « brouillon » sur l'onglet d'une version non confirmée, dans le
   sélecteur de versions. Une version préparée n'est pas une version comme les
   autres — elle ne s'applique à rien — et la frise doit le dire sans qu'on ait à
   survoler. */
.rf-brouillon {
    margin-left: 6px;
    font-family: var(--et-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--et-form-blue-d);
}
.ep-vues__btn[aria-pressed="true"] .rf-brouillon { color: var(--et-sur-ardoise); }

/* Pastille « sensible » collée au code du paramètre, dans la colonne Code. */
.rf-sensible { margin-left: 6px; vertical-align: middle; }

/* --------------------------------------------------------------------------
   Modale de saisie des valeurs

   Plus large que la modale ordinaire (620 px) : elle porte les 34 paramètres
   groupés par famille, et une colonne de saisie à 620 px replierait chaque
   libellé sur trois lignes. Hauteur bornée et défilement INTÉRIEUR, pour que le
   pied — où vivent le décompte des valeurs retenues, la confirmation des
   paramètres sensibles et le bouton d'enregistrement — reste visible pendant
   toute la saisie.
   -------------------------------------------------------------------------- */
.rf-modale-large { max-width: 900px; }

.rf-modale-corps {
    max-height: min(60vh, 560px);
    overflow-y: auto;
}

/* Une rangée de saisie : le code, le champ, l'unité. Le champ est court et à
   droite parce qu'on y tape un nombre — un champ pleine largeur pour « 4,2 »
   laisse croire qu'on attend une phrase. */
.rf-saisie-rang {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rf-code {
    flex: none;
    min-width: 82px;
    font-size: 12px;
    color: var(--et-muted);
}
.rf-saisie-val {
    flex: none;
    width: 140px;
    text-align: right;
}
.rf-unite { flex: none; }

/* Case de confirmation des paramètres sensibles, dans le pied de modale. Elle
   n'apparaît que si un tel paramètre est saisi : une case toujours présente
   devient une case toujours cochée. */
.rf-confirmation {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-avertissement-ink);
    white-space: nowrap;
    cursor: pointer;
}
.rf-confirmation input { accent-color: var(--et-avertissement); }

@media (max-width: 720px) {
    .rf-saisie-val { width: 100%; text-align: left; }
}