/* =============================================================================
   Intra-RH — Dashboard manager (F26/T-18) : styles dédiés.

   Repose sur les tokens partagés du socle (/assets/style.css) — le THÈME DU
   TENANT est appliqué par /assets/theme.js (D-213 point 4d). Mobile-first :
   grille 1 colonne, passages en grille multi-colonnes dès 60 rem (desktop
   manager — D-095/D-129).
   ============================================================================= */
.dashboard {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
    .dashboard { grid-template-columns: repeat(2, 1fr); padding: 1.5rem; }
    .bloc--large { grid-column: 1 / -1; }
}

.bloc {
    background: var(--couleur-carte, #fff);
    border: 1px solid var(--couleur-bordure, #d8e0e5);
    border-radius: var(--rayon, 0.75rem);
    padding: 1rem;
}

/* Blocs CLAQUABLES (Q146/D-155) : le titre est un lien vers l'écran de détail. */
.bloc > h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.bloc > h2 a { color: var(--couleur-primaire, #132030); text-decoration: none; }
.bloc > h2 a:hover { text-decoration: underline; }
.bloc .source { color: var(--couleur-discret, #6B7280); font-size: .78rem; margin: 0 0 .5rem; }

.badge-compteur {
    display: inline-block; min-width: 1.6rem; text-align: center;
    background: var(--couleur-accent, #2F5496); color: #fff;
    border-radius: 999px; padding: .1rem .5rem; font-weight: 600;
}

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: .35rem 0; border-bottom: 1px solid var(--couleur-bordure, #d8e0e5); }
.liste li:last-child { border-bottom: none; }

.pastille { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; }
.pastille.VERT { background: var(--couleur-ok, #1a7f37); }
.pastille.ORANGE { background: var(--couleur-avertissement, #9a6a00); }
.pastille.ROUGE { background: var(--couleur-ko, #b3261e); }

.bascule-vues { display: flex; gap: .5rem; margin: .25rem 0 .75rem; }
.bascule-vues button {
    border: 1px solid var(--couleur-bordure, #d8e0e5); background: var(--couleur-fond-bloc, #fbfdfd);
    border-radius: 999px; padding: .25rem .8rem; cursor: pointer;
}
.bascule-vues button.actif { background: var(--couleur-accent, #2F5496); color: #fff; border-color: transparent; }

.jauge {
    background: var(--couleur-fond, #F5F6F8); border-radius: 999px; height: 1.1rem; overflow: hidden;
}
.jauge > span { display: block; height: 100%; background: var(--couleur-accent, #2F5496); width: 0; }

.courbe { display: flex; align-items: flex-end; gap: .25rem; min-height: 5rem; }
.courbe .col { flex: 1; background: var(--couleur-accent-clair, #4A90D9); border-radius: 3px 3px 0 0; position: relative; }
.courbe .col .n1 { position: absolute; left: 0; right: 0; bottom: 0; background: var(--couleur-discret, #6B7280); opacity: .35; }
.courbe .col small { position: absolute; top: -1.1rem; left: 0; right: 0; text-align: center; font-size: .65rem; }

/* Top N des écarts par établissement (P1/D-342) — barres horizontales simples. */
.ecarts li.ecart { display: grid; grid-template-columns: 1fr 8rem auto; align-items: center; gap: .5rem; }
.ecart-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecart-barre { background: var(--couleur-fond, #F5F6F8); border-radius: 999px; height: .6rem; overflow: hidden; }
.ecart-barre > span { display: block; height: 100%; background: var(--couleur-accent, #2F5496); }
.ecart-barre > span.depasse { background: var(--couleur-ko, #b3261e); }
.ecart-valeur { font-size: .8rem; color: var(--couleur-discret, #6B7280); white-space: nowrap; }

.bandeau-theme { display: none; padding: .5rem 1rem; font-size: .85rem; }
.bandeau-theme.visible { display: block; background: var(--couleur-mock-fond, #fff7e6); border-bottom: 1px solid var(--couleur-mock-bordure, #e0b34d); }
.chargement { padding: 2rem; text-align: center; color: var(--couleur-discret, #6B7280); }
.refus, .erreur { background: var(--couleur-carte, #fff); border-radius: var(--rayon, .75rem); padding: 1.5rem; }