/* =====================================================================
   Charte graphique SST
   - Fonds et textes : violet #4A2D89, aubergine #3C1A54
   - Actions / cadres de mise en évidence : framboise #E22B6E, corail #EA534C
   - Boutons principaux : dégradé framboise → corail, inversé au survol
   Valeurs dupliquées dans Components/Partages/Charte.cs (thème MudBlazor).
   ===================================================================== */
:root {
    --sst-violet: #4A2D89;
    --sst-aubergine: #3C1A54;
    --sst-framboise: #E22B6E;
    --sst-corail: #EA534C;
    --sst-fond: #F6F4FA;
    --sst-violet-pale: #EFEAF8;
    --sst-degrade: linear-gradient(90deg, var(--sst-framboise), var(--sst-corail));
    --sst-degrade-inverse: linear-gradient(90deg, var(--sst-corail), var(--sst-framboise));
}

html, body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    color: var(--sst-aubergine);
    background: var(--sst-fond);
}

/* ---------- Barre supérieure ---------- */
.sst-appbar.mud-appbar {
    background: var(--sst-aubergine);
    color: #fff;
    /* Liseré dégradé sous la barre : rappel des couleurs d'action */
    border-bottom: 3px solid transparent;
    border-image: var(--sst-degrade) 1;
}

.sst-appbar-titre {
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Menu latéral ---------- */
.sst-drawer.mud-drawer {
    border-right: 1px solid #E4DEEF;
}

.sst-logo-menu {
    display: block;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid #ECE7F4;
    margin-bottom: 8px;
}

    .sst-logo-menu img {
        display: block;
        width: 100%;
        max-width: 190px;
        height: auto;
    }

.sst-nav .mud-nav-link {
    color: var(--sst-aubergine);
    font-weight: 500;
    border-radius: 0 24px 24px 0;
    margin-right: 12px;
    transition: background-color .15s ease;
}

    .sst-nav .mud-nav-link .mud-nav-link-icon {
        color: var(--sst-violet);
    }

    .sst-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        background-color: var(--sst-violet-pale);
    }

    /* Lien actif : fond violet pâle + barre gauche dégradée (cadre de mise en évidence) */
    .sst-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
        color: var(--sst-violet);
        background-color: var(--sst-violet-pale);
        font-weight: 600;
        border-inline-end-style: none;
        box-shadow: inset 4px 0 0 0 var(--sst-framboise);
    }

        .sst-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
            color: var(--sst-framboise);
        }

.sst-nav .mud-nav-group > .mud-nav-link {
    text-transform: none;
}

/* ---------- Boutons principaux : dégradé, inversé au survol ----------
   Le dégradé fait 200 % de large (framboise → corail → framboise) : décaler sa position
   inverse le sens de façon progressive, sans saut de couleur. */
.mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):not(:disabled) {
    background-color: var(--sst-framboise);
    background-image: linear-gradient(90deg, var(--sst-framboise) 0%, var(--sst-corail) 50%, var(--sst-framboise) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(226, 43, 110, .25);
    transition: background-position .35s ease, box-shadow .2s ease, transform .1s ease;
}

    .mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):not(:disabled):hover,
    .mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):not(:disabled):focus-visible {
        background-color: var(--sst-corail);
        background-position: 100% 50%;
        box-shadow: 0 4px 12px rgba(226, 43, 110, .35);
    }

    .mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):not(:disabled):active {
        transform: translateY(1px);
    }

/* Boutons secondaires (contour / texte) : violet, survol framboise */
.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-primary {
    color: var(--sst-violet);
    border-color: var(--sst-violet);
}

    .mud-button-outlined.mud-button-outlined-default:hover,
    .mud-button-outlined.mud-button-outlined-primary:hover {
        color: var(--sst-framboise);
        border-color: var(--sst-framboise);
        background-color: rgba(226, 43, 110, .06);
    }

/* ---------- Cadres de mise en évidence ---------- */
.sst-cadre {
    position: relative;
    border: 1px solid #ECE7F4;
    border-radius: 8px;
    overflow: hidden;
}

    .sst-cadre::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(180deg, var(--sst-framboise), var(--sst-corail));
    }

.sst-chiffre-cle {
    color: var(--sst-violet);
    font-weight: 700;
}

/* ---------- Titres et tableaux ---------- */
.mud-typography-h4 {
    color: var(--sst-aubergine);
    font-weight: 700;
}

.mud-table-head .mud-table-cell {
    color: var(--sst-aubergine);
    font-weight: 700;
    background: var(--sst-violet-pale);
}

.mud-table-foot .mud-table-cell {
    color: var(--sst-aubergine);
    border-top: 2px solid var(--sst-violet);
}

/* ---------- Grilles (MudDataGrid) : largeur maîtrisée ---------- */
/* Le contenu principal ne peut pas être élargi par un tableau trop large (élément flex : min-width 0). */
.mud-main-content,
.mud-main-content > .mud-container {
    min-width: 0;
    max-width: 100%;
}

/* Le tableau défile horizontalement dans sa zone au lieu de déborder de la page. */
.mud-data-grid {
    max-width: 100%;
}

.mud-data-grid .mud-table-container {
    max-width: 100%;
    overflow-x: auto;
}

/* La barre d'outils des grilles passe à la ligne plutôt que d'élargir le tableau. */
.mud-data-grid .mud-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    row-gap: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ---------- Grilles : en-tête sur deux lignes ----------
   Ligne 1 : intitulé de la colonne (sur une seule ligne) ; ligne 2 : tri, filtre et options.
   Sélecteurs plus précis que ceux de MudBlazor (.mud-data-grid .mud-table-cell .column-header…)
   pour que ces règles s'appliquent réellement. */
.mud-data-grid .mud-table-head th.mud-table-cell {
    padding: 6px 8px 0 8px;
    vertical-align: bottom;
    white-space: nowrap;
}

.mud-data-grid .mud-table-head th.mud-table-cell .column-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
}

/* Ligne 1 : l'intitulé ne revient jamais à la ligne. */
.mud-data-grid .mud-table-head th.mud-table-cell .column-header .sortable-column-header {
    width: auto;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Ligne 2 : boutons de tri, de filtre et d'options, compacts. */
.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    height: 24px;
    margin-left: -4px;
}

.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .mud-icon-button {
    padding: 2px;
}

.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .mud-icon-button .mud-icon-root {
    font-size: 1rem;
}

.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .mud-sort-index {
    font-size: .7rem;
    transform: none;
    margin: 0 2px 0 -2px;
}

/* Icônes discrètes mais toujours visibles (utile sur tablette, sans survol). */
.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .sort-direction-icon,
.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .mud-menu .mud-icon-button-label {
    opacity: .35;
    margin-left: 0;
}

.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .sort-direction-icon.mud-direction-asc,
.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .sort-direction-icon.mud-direction-desc {
    opacity: 1;
    color: var(--sst-framboise);
}

.mud-data-grid .mud-table-head th.mud-table-cell .column-header .column-options .filter-button.filtered .mud-icon-root {
    color: var(--sst-framboise);
}

/* Colonnes numériques : intitulé et icônes alignés à droite. */
.mud-data-grid .mud-table-head th.mud-table-cell.chiffre .column-header {
    align-items: flex-end;
}

.mud-data-grid .mud-table-head th.mud-table-cell.chiffre .column-header .column-options {
    margin-left: 0;
    margin-right: -4px;
}

/* ---------- Écran de connexion ---------- */
.sst-fond-connexion {
    background:
        radial-gradient(circle at 85% 15%, rgba(226, 43, 110, .18), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(234, 83, 76, .14), transparent 45%),
        linear-gradient(160deg, var(--sst-aubergine), var(--sst-violet));
}

.sst-carte-connexion {
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(28, 10, 45, .35) !important;
    border-top: 4px solid transparent;
    border-image: var(--sst-degrade) 1;
}

.sst-logo-connexion {
    display: block;
    width: 220px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 24px auto;
}

/* ---------- Utilitaires existants ---------- */
#blazor-error-ui {
    background: #fff4d6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: var(--sst-aubergine);
        width: 100%;
        z-index: 1;
    }
}

.chiffre {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ligne-exclue td {
    opacity: 0.5;
    text-decoration: line-through;
}

.ligne-alerte td:first-child {
    border-left: 4px solid var(--sst-corail);
}

.ligne-total td {
    font-weight: 600;
    background: var(--sst-violet-pale);
}

.organigramme ul {
    list-style: none;
    padding-left: 1.5rem;
    border-left: 1px dashed #CFC4E3;
    margin: 0;
}

.organigramme li {
    margin: 0.35rem 0;
}

/* Écran de chargement (avant Blazor) */
#app > .chargement-sst {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 16px;
    color: var(--sst-violet);
}

    #app > .chargement-sst img {
        width: 200px;
    }

/* Pastille du menu (ex. nombre de mois à valider) */
.sst-nav-libelle { display: flex; align-items: center; width: 100%; gap: 8px; }
.sst-nav-libelle > span:first-child { flex-grow: 1; }
.sst-pastille {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; line-height: 1; color: #fff;
    background: var(--sst-degrade);
    box-shadow: 0 1px 3px rgba(60, 26, 84, .35);
}

/* Statistiques : ligne « Moyenne / mois » sous le total des tableaux, légende de la ligne de moyenne */
.sst-pied-moyenne {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-style: italic;
    color: var(--sst-violet);
}

.sst-legende-moyenne {
    display: block;
    color: #5f5f5f;
}

/* Dialogues : points d'attention / points bloquants, un par ligne avec symbole */
.sst-dialogue-paragraphe { margin: 0 0 6px 0; }

.sst-points {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 4px solid;
}

.sst-points-attention { background: rgba(234, 83, 76, .08); border-left-color: var(--sst-corail); }
.sst-points-bloquants { background: rgba(226, 43, 110, .10); border-left-color: var(--sst-framboise); }

.sst-points-titre {
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--sst-aubergine);
}

.sst-point {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
}

.sst-point + .sst-point { border-top: 1px dashed rgba(60, 26, 84, .15); }
.sst-point-symbole { flex: 0 0 auto; line-height: 1.4; }