/* Styles du tableau de bord (/tableau-de-bord). Sorti du bloc <style> de Dashboard.razor.
   Global (non scoped) : ces classes sont rendues par Dashboard.razor et par ses composants
   enfants (DashboardSection, DashboardTile), d'où un stylage global plutôt que scoped. */

/* Pleine largeur : on occupe tout l'espace disponible, avec une marge latérale confortable. */
.dashboard-container { padding: 1rem 2rem 2.5rem; max-width: none; }
.dashboard-title { margin-bottom: 1rem; }

@media (max-width: 768px) {
    .dashboard-container { padding: .5rem .5rem 1.5rem; }
}

/* Bandeau KPI = bande de stats bordée, divisée en cellules égales « valeur + libellé »
   (même esprit que les stats du FilteredGrid). */
.dashboard-kpi-banner { margin-bottom: 1rem; }
.dashboard-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
}
.dashboard-kpi-cell {
    flex: 1 1 0;
    min-width: 220px;
    text-align: center;
    padding: 1rem 1.25rem;
    border-left: 1px solid #d0d0d0;
    font-size: 1.1rem;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.dashboard-kpi-cell:first-child { border-left: none; }
.dashboard-kpi-cell strong { font-weight: 700; }

/* Seule la case « sans bail aujourd'hui » est cliquable : curseur + survol + focus visible,
   même vocabulaire visuel que les lignes de tuiles (.dashboard-line). L'outline est en retrait
   (offset négatif) car la cellule est collée aux bords du bandeau (overflow: hidden). */
.dashboard-kpi-cell-clickable { cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.dashboard-kpi-cell-clickable:hover { background-color: #f5f5f5; color: #7f111c; }
.dashboard-kpi-cell-clickable:focus-visible { outline: 2px solid #7f111c; outline-offset: -2px; }

@media (max-width: 768px) {
    /* Empilé : une cellule par ligne, séparateurs horizontaux au lieu de verticaux. */
    .dashboard-kpi-cell { flex-basis: 100%; border-left: none; border-top: 1px solid #d0d0d0; }
    .dashboard-kpi-cell:first-child { border-top: none; }
}

/* Sections = boîtes encadrées à titre centré, éléments en lignes aérées */
.dashboard-box {
    height: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 1.5rem 1.75rem 1.75rem;
}
.dashboard-box-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 1rem;
}
.dashboard-line {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .45rem .6rem;
    margin: 0 -.6rem;            /* la surbrillance s'étend sur toute la largeur de la boîte */
    border-radius: 6px;
    font-size: 1.15rem;
    line-height: 1.45;
    transition: background-color .12s ease, color .12s ease;
}
.dashboard-line-count { font-weight: 700; margin-right: .4rem; }  /* garde l'espace nombre/libellé en flex */
.dashboard-line::after {
    content: "\203A";            /* chevron › */
    margin-left: auto;           /* pousse le chevron à droite */
    padding-left: .75rem;
    color: #b0b0b0;              /* discret au repos, signale « aller vers » */
    font-weight: 700;
    transition: color .12s ease;
}
.dashboard-line:hover { background-color: #f5f5f5; color: #7f111c; }
.dashboard-line:hover::after { color: #7f111c; }
.dashboard-line:focus-visible { outline: 2px solid #7f111c; outline-offset: 2px; }  /* accessibilité (tabindex=0) */

/* État vide : rien à afficher (aucune tuile > 0) */
.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 3rem 1rem;
    color: var(--rz-text-secondary-color, #6b6b6b);
}
.dashboard-empty-icon { font-size: 3rem; color: #9e9e9e; }
.dashboard-empty-title { font-size: 1.3rem; font-weight: 700; color: var(--rz-text-color, #333); }
.dashboard-empty-hint { font-size: 1rem; }