/* ===========================================================================
   ÉCRAN SIMULATION BUDGÉTAIRE DE LA MASSE SALARIALE (.sms-*)
   Components/Pages/Paie/SimulationMasseSalariale.razor — lot X5.2, porté de
   « Simulation masse salariale.dc.html ».

   Elle ne porte QUE la mise en page propre à cet écran : bandeaux, tuiles,
   cartes, tables (en cartes par easypaie.css § 18), sélecteur de vues et
   barres viennent d'easypaie.css sans y être redéfinis.

   AUCUNE COULEUR LITTÉRALE. La trajectoire est une SÉRIE : ses segments
   prennent les couleurs d'identité (--et-cat-*), jamais une couleur d'état —
   un mois au-dessus de la référence n'est pas « en alerte » parce que sa
   barre est plus longue ; le retrait sous la référence est un neutre décoratif (--et-inerte).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LA BANDE DU SCÉNARIO ET LES BANDEAUX.
   --------------------------------------------------------------------------- */
.appgrid .sms-outils { margin-bottom: 14px; }
.appgrid .sms-bandeau { margin-bottom: 14px; }
.appgrid .sms-base { font-size: 12px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   2. LES TUILES. Le libellé passe à la ligne au lieu de s'abréger : un
   indicateur dont on ne lit plus le nom n'indique plus rien.
   --------------------------------------------------------------------------- */
.appgrid .sms-indicateurs { margin-bottom: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.appgrid .sms-indicateurs .ep-indicateur__libelle { white-space: normal; overflow: visible; }
.appgrid .sms-indicateur__detail { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   3. LES COLONNES : hypothèses à gauche, recrutements à droite.
   `minmax(0, …)` : sans minimum à zéro, une rangée longue impose sa largeur
   à toute la colonne et pousse la seconde hors champ.
   --------------------------------------------------------------------------- */
.appgrid .sms-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}
.appgrid .sms-bloc { margin-bottom: 14px; }
.appgrid .sms-vide { padding: 18px; text-align: center; font-size: 13px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   4. LES LEVIERS — un curseur, sa valeur, son effet isolé.
   --------------------------------------------------------------------------- */
.appgrid .sms-leviers { padding: 4px 18px 8px; }
.appgrid .sms-levier { padding: 10px 0; border-top: 1px solid var(--et-rang); }
.appgrid .sms-levier:first-child { border-top: 0; }
.appgrid .sms-levier__tete,
.appgrid .sms-levier__pied {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 4px 12px; flex-wrap: wrap;
}
.appgrid .sms-levier__libelle { font-size: 14px; font-weight: 600; color: var(--et-ink); }
.appgrid .sms-levier__valeur {
    font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
    font-size: 13px; color: var(--et-ink);
}
.appgrid .sms-levier__effet-lib { font-size: 12px; color: var(--et-muted); }
.appgrid .sms-levier__effet {
    font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 500; color: var(--et-ink); white-space: nowrap;
}
.appgrid .sms-curseur { display: block; width: 100%; margin: 6px 0 4px; accent-color: var(--et-form-blue); }

/* ---------------------------------------------------------------------------
   5. LES RECRUTEMENTS — un profil par rangée : son nom, puis ses réglages.
   --------------------------------------------------------------------------- */
.appgrid .sms-recrut { padding: 4px 18px 12px; }
.appgrid .sms-recrut__ligne { padding: 10px 0; border-top: 1px solid var(--et-rang); }
.appgrid .sms-recrut__ligne:first-child { border-top: 0; }
.appgrid .sms-recrut__profil { display: flex; align-items: center; gap: 10px; }
.appgrid .sms-recrut__libelle { flex: 1 1 auto; min-width: 0; height: 32px; }
.appgrid .sms-recrut__retirer { flex: none; font-size: 13px; }
.appgrid .sms-recrut__reglages {
    margin-top: 8px;
    display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
}
.appgrid .sms-pas { display: inline-flex; align-items: center; }
.appgrid .sms-pas__btn { min-width: 32px; justify-content: center; padding: 0; }
.appgrid .sms-pas__valeur {
    min-width: 40px; text-align: center;
    font-family: var(--et-font-mono); font-variant-numeric: tabular-nums;
    font-size: 14px; font-weight: 500; color: var(--et-ink);
}
.appgrid .sms-recrut__brut { display: inline-flex; align-items: center; gap: 6px; }
.appgrid .sms-recrut__montant { width: 120px; height: 32px; text-align: right; }
.appgrid .sms-recrut__unite { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.appgrid .sms-recrut__mois { height: 32px; min-width: 0; flex: 1 1 140px; }
.appgrid .sms-recrut__ajout { padding-top: 10px; border-top: 1px solid var(--et-rang); }

/* ---------------------------------------------------------------------------
   6. LA TRAJECTOIRE. La barre se mesure contre le mois le plus long,
   référence comprise : le segment commun, puis ce qui dépasse la référence
   ou ce qui manque pour l'atteindre. La marche de janvier se lit à sa
   longueur, et la rangée la nomme.
   --------------------------------------------------------------------------- */
.appgrid .sms-table-cadre { overflow-x: auto; }
.appgrid .sms-trajectoire__barre { width: 34%; min-width: 120px; }
.appgrid .sms-segment--projete { background: var(--et-cat-1); }
.appgrid .sms-segment--surcout { background: var(--et-cat-3); }
.appgrid .sms-segment--retrait { background: var(--et-inerte); }
.appgrid .sms-mois { font-family: var(--et-font-mono); font-size: 12px; color: var(--et-muted); white-space: nowrap; }
.appgrid .sms-evenement { display: block; margin-top: 2px; font-size: 12px; color: var(--et-ink); white-space: nowrap; }
.appgrid .sms-trajectoire__marche .sms-mois { color: var(--et-ink); font-weight: 600; }
.appgrid .sms-trajectoire__marche > td { border-top: 2px solid var(--et-filet-fort); }

.appgrid .sms-legende { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.appgrid .sms-legende__puce { display: inline-block; width: 10px; height: 10px; margin-left: 6px; }
.appgrid .sms-legende__puce:first-child { margin-left: 0; }
.appgrid .sms-legende__puce--projete { background: var(--et-cat-1); }
.appgrid .sms-legende__puce--surcout { background: var(--et-cat-3); }
.appgrid .sms-legende__puce--retrait { background: var(--et-inerte); }

/* ---------------------------------------------------------------------------
   7. LA DÉCOMPOSITION — l'effet croisé se détache des cinq leviers.
   --------------------------------------------------------------------------- */
.appgrid .sms-decomposition__croise > td { border-top: 1px solid var(--et-filet-fort); background: var(--et-surface-3); }
.appgrid .sms-decomposition td:nth-child(2) { color: var(--et-muted); font-size: 13px; }

/* ---------------------------------------------------------------------------
   8. PALIERS — docs/conventions-responsive.md.
   --------------------------------------------------------------------------- */

/* Sous 1100 px, les deux colonnes s'empilent et les tuiles vont par deux. */
@media (max-width: 1100px) {
    .appgrid .sms-colonnes { grid-template-columns: minmax(0, 1fr); }
    .appgrid .sms-indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Règle tactile (lot 02) : sous 1024 px, aucune cible sous 44 px. La hauteur
   porte sur la BOÎTE du curseur, pas sur le dessin de sa piste. */
@media (max-width: 1024px) {
    .appgrid .sms-curseur { height: 44px; }
    .appgrid .sms-pas__btn { min-width: 44px; }
    .appgrid .sms-recrut__libelle,
    .appgrid .sms-recrut__montant,
    .appgrid .sms-recrut__mois { height: 44px; }
    .appgrid .sms-recrut__retirer { min-height: 44px; padding: 0 8px; }
    /* La trajectoire passe en cartes (.ep-cartes) : la barre y prend la largeur. */
    .appgrid .sms-trajectoire__barre { width: auto; min-width: 0; }
}

/* Sur un téléphone, le sélecteur tient la largeur de la bande : trois parts
   égales, le libellé passe à la ligne plutôt que de sortir de la bande. */
@media (max-width: 559px) {
    .appgrid .sms-scenarios { width: 100%; }
    .appgrid .sms-scenarios .ep-vues__btn {
        flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: normal;
    }
    .appgrid .sms-indicateurs { grid-template-columns: minmax(0, 1fr); }
    .appgrid .sms-leviers,
    .appgrid .sms-recrut { padding-left: 12px; padding-right: 12px; }
    .appgrid .sms-recrut__brut { flex: 1 1 100%; }
    .appgrid .sms-recrut__montant { flex: 1 1 auto; width: auto; min-width: 0; }
}