/* PlaniBulle - Styles globaux */

:root {
    --pb-primary: #5C6BC0;
    --pb-secondary: #80CBC4;
    --pb-bg: #F5F5F5;
    --pb-surface: #FFFFFF;
    --pb-radius: 12px;
    --pb-shadow: 0 2px 8px rgba(0,0,0,0.08);

    /* Couleurs gris fréquentes — à utiliser au lieu de #757575/#9E9E9E inline */
    --pb-text-muted: #757575;
    --pb-text-disabled: #9E9E9E;
    --pb-border-light: #ECEFF1;
    --pb-bg-subtle: #FAFAFA;

    /* Espacement courant pour les cellules de tableau dense */
    --pb-cell-padding: 8px 12px;
    --pb-cell-padding-tight: 4px 8px;
}

/* Classes utilitaires pour réduire les styles inline (cf. lot 6 audit) */
.pb-text-muted { color: var(--pb-text-muted); }
.pb-text-disabled { color: var(--pb-text-disabled); }
.pb-cell-padded { padding: var(--pb-cell-padding); }
.pb-cell-padded-tight { padding: var(--pb-cell-padding-tight); }
.pb-bg-subtle { background: var(--pb-bg-subtle); }

* { box-sizing: border-box; }

body {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    background-color: var(--pb-bg);
    margin: 0;
    padding: 0;
}

/* Planning grid */
.planning-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force la largeur fixe : 1 colonne salariée (130px) + 5 colonnes jour égales
   + 1 colonne total (70px). Sans `table-layout: fixed`, MudTable répartit la
   largeur selon le contenu et un jour férié (header sans badge "X créneaux")
   se retrouve plus étroit que les autres. La classe est sur le `<table>` lui-
   même (`.mud-table-root`) en MudBlazor 8 — `.mud-table` est le wrapper div. */
.planning-grid .mud-table-root {
    table-layout: fixed;
    width: 100%;
}
.planning-grid .mud-table-cell.col-salarie,
.planning-grid .mud-table-head .mud-table-cell:first-child {
    width: 130px;
}
.planning-grid .mud-table-cell.col-total,
.planning-grid .mud-table-head .mud-table-cell:last-child {
    width: 70px;
}
.planning-grid .mud-table-cell.col-jour,
.planning-grid .mud-table-head .mud-table-cell:not(:first-child):not(:last-child) {
    /* Largeur explicite dérivée du total : 5 colonnes jours sur (100% - 130px - 70px). */
    width: calc((100% - 200px) / 5);
}

/* ─── Barre de navigation planning (structure à gauche / mois à droite) ──── */
.planning-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 8px;
}
/* Modifier : pas de toggle structure, on aligne le sélecteur mois à droite. */
.planning-nav--right { justify-content: flex-end; }

/* Toggle structure (chip-pill, n structures) */
.structure-toggle {
    display: inline-flex;
    background: #ECEFF1;
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.structure-toggle__btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #455A64;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.structure-toggle__btn:hover:not(.is-active) { background: #CFD8DC; }
.structure-toggle__btn.is-active {
    background: var(--mud-palette-primary);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Navigateur mois (chevrons + label cliquable) */
.month-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Navigateur année (chevrons + label simple) */
.year-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.year-nav__label {
    display: inline-block;
    min-width: 8rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #263238;
    padding: 6px 12px;
}
.month-nav__center {
    position: relative;
}
.month-nav__label {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: inherit;
    color: #263238;
    transition: background 0.15s ease;
}
.month-nav__label:hover { background: #ECEFF1; }
.month-nav__name {
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: capitalize;
}
.month-nav__year {
    color: #757575;
    font-size: 0.95rem;
}

/* Popover de saut rapide (année + grille 12 mois) */
.month-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}
.month-picker-popover {
    position: absolute;
    z-index: 1201;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid #CFD8DC;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    padding: 10px 12px;
    width: 280px;
}
.month-picker__year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.month-picker__year-label {
    font-weight: 700;
    font-size: 1rem;
    flex: 1;
    text-align: center;
}
.month-picker__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.month-picker__btn {
    appearance: none;
    border: 1px solid transparent;
    background: #F5F5F5;
    color: #37474F;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: capitalize;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.month-picker__btn:hover:not(.is-active) { background: #ECEFF1; }
.month-picker__btn.is-today:not(.is-active) {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}
.month-picker__btn.is-active {
    background: var(--mud-palette-primary);
    color: #FFFFFF;
    border-color: var(--mud-palette-primary);
}
.month-picker__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #ECEFF1;
}

/* Navigateur semaine ISO (chevrons + label cliquable + popover MudDatePicker) */
.week-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.week-nav__center { position: relative; }
.week-nav__label {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: inherit;
    color: #263238;
    transition: background 0.15s ease;
}
.week-nav__label:hover { background: #ECEFF1; }
.week-nav__num {
    font-weight: 700;
    font-size: 1.05rem;
}
.week-nav__range {
    color: #757575;
    font-size: 0.95rem;
}
.week-picker-popover {
    position: absolute;
    z-index: 1201;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    border: 1px solid #CFD8DC;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    padding: 6px 6px 4px;
    width: 320px;
}

@media (max-width: 600px) {
    .planning-nav { justify-content: center; }
    .planning-nav--right { justify-content: center; }
    .month-nav__name { font-size: 0.95rem; }
    .month-nav__year { font-size: 0.85rem; }
    .week-nav__num { font-size: 0.95rem; }
    .week-nav__range { font-size: 0.82rem; }
    .structure-toggle__btn { padding: 5px 12px; font-size: 0.8rem; }
    .month-picker-popover { width: min(260px, 92vw); }
    .week-picker-popover { width: min(300px, 92vw); left: 50%; }

    /* Filet de sécurité pour tous les popovers MudBlazor non explicitement
       contraints (Select sans RelativeWidth.Relative, Menu, Tooltip…). Évite
       qu'un popover ouvert près du bord droit ne sorte du viewport mobile.
       Ne s'applique qu'aux popovers ouverts pour ne pas peser pendant l'idle.
       Les pickers (date/time) doivent passer en PickerVariant.Dialog plutôt
       que de compter sur cette règle. */
    .mud-popover.mud-popover-open {
        max-width: 95vw !important;
    }
}

.planning-cell {
    min-width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.planning-cell:hover { opacity: 0.85; }

/* Cartouche d'absence (FE / CP / RTT / AM / EC / CSS / DE / …) — overlay zébré
   diagonal pour distinguer d'un coup d'œil les cellules « absence » des cellules
   « créneau de travail » (toutes deux sont des pavés colorés pleins). Le fond
   coloré arrive en `background-color` inline ; le `background-image` ci-dessous
   pose les rayures par-dessus. Important : côté inline, utiliser `background-color:`
   et JAMAIS le shorthand `background:` — sinon le gradient est écrasé. */
.planning-cell-absence {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 6px,
        rgba(255, 255, 255, 0.55) 6px,
        rgba(255, 255, 255, 0.55) 12px
    );
}

/* Cellule vide cliquable (pour sélection en saisie rapide) */
.planning-cell-empty {
    min-width: 36px;
    height: 36px;
    margin: auto;
    border-radius: 6px;
    border: 1px dashed #CFD8DC;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.planning-cell-empty:hover {
    background: #ECEFF1;
    border-color: #90A4AE;
}

/* Cellule active (sélectionnée en saisie rapide) */
.planning-cell-active {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Cellule verrouillée — bordure dorée + cadenas en surimpression, signale qu'une
   RAZ globale ne supprimera pas cette affectation. Le contenu (code lettre) reste
   centré ; le 🔒 se pose en haut à droite. */
.planning-cell-verrouille {
    position: relative;
    box-shadow: inset 0 0 0 2px #F9A825;
}
.planning-cell-lock {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.6rem;
    line-height: 1;
    background: #fff;
    border-radius: 50%;
    padding: 1px 2px;
    box-shadow: 0 0 0 1px #F9A825;
}

/* Jour de fermeture — fond uni discret. Couvre deux cas : férié national (entrée
   JourFerie + FE auto-générées) ET « toute l'équipe absente » (CP collectif, pont
   posé en CP). Le badge « X créneaux » est masqué sur ces jours puisqu'il n'y a
   rien à planifier. */
.planning-jour-fermeture {
    background: #FFF8E1;
}

/* Saisie HorsTerrain affichée dans la grille admin : rectangle de couleur secondaire
   rayé pour le distinguer d'un créneau Terrain plein. La variable `--couleur-creneau`
   (couleur du type d'heure / saisie) est posée inline sur l'élément. */
.creneau-ht {
    width: 100%;
    height: 12px;
    margin-top: 2px;
    border-radius: 4px;
    background: repeating-linear-gradient(
        45deg,
        var(--couleur-creneau, #BDBDBD),
        var(--couleur-creneau, #BDBDBD) 4px,
        rgba(255, 255, 255, 0.6) 4px,
        rgba(255, 255, 255, 0.6) 8px
    );
}

/* ─── Mon planning (vue salarié, par jour) ───────────────────────────────── */
/* Grille date | contenu : aligne les sous-lignes (réunions, saisies) avec
   le créneau principal sur desktop, et empile date + contenu sur mobile. */
.mp-jour__grid {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.mp-jour__date {
    padding-top: 6px;
    font-size: 0.875rem;
    color: #455A64;
    line-height: 1.3;
    white-space: nowrap;
}

.mp-jour__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Une "entrée" représente un événement du jour : créneau d'origine, amendement,
   réunion, ajout, absence. La bordure gauche colorée (--mp-entry-color) signale
   à l'œil le type/créneau ; chaque entrée est un bloc auto-portant. */
.mp-entry {
    border-left: 4px solid var(--mp-entry-color, #BDBDBD);
    background: var(--pb-bg-subtle, #FAFAFA);
    padding: 6px 8px 6px 10px;
    border-radius: 0 4px 4px 0;
    min-width: 0;
}

.mp-entry__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.mp-entry__time {
    font-weight: 600;
    font-size: 0.95rem;
    color: #263238;
}

.mp-entry__title {
    font-size: 0.95rem;
    color: #263238;
}

.mp-entry__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

.mp-entry__caption {
    font-size: 0.78rem;
    color: var(--pb-text-muted, #757575);
}

.mp-entry__note {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #9E9E9E;
    font-style: italic;
}

.mp-entry__note--erreur {
    color: #E53935;
    font-weight: 600;
    font-style: normal;
}

.mp-entry__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Badge structure compact (code court). La palette CSS est dérivée d'un hash
   du code via StructureBadgeHelper — couleurs pastel, contraste suffisant
   pour être lisible. */
.structure-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
}
.structure-badge--c0 { background: #E3F2FD; color: #0D47A1; }
.structure-badge--c1 { background: #E8F5E9; color: #1B5E20; }
.structure-badge--c2 { background: #FFF3E0; color: #E65100; }
.structure-badge--c3 { background: #F3E5F5; color: #4A148C; }
.structure-badge--c4 { background: #FFEBEE; color: #B71C1C; }
.structure-badge--c5 { background: #E1F5FE; color: #01579B; }
.structure-badge--c6 { background: #FFF9C4; color: #F57F17; }

@media (max-width: 600px) {
    /* Date sur sa propre ligne, créneau et sous-lignes pleine largeur dessous. */
    .mp-jour__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    .mp-jour__date {
        padding-top: 0;
        font-weight: 700;
        color: #263238;
        font-size: 0.95rem;
    }
    .mp-entry__time { font-size: 0.9rem; }
    .structure-badge { font-size: 0.68rem; }
}

/* Palette d'affectation rapide — popover ancré aux coords du curseur */
.palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.palette-popover {
    position: fixed;
    z-index: 1201;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    padding: 10px 14px;
    min-width: 200px;
    max-width: min(420px, 90vw);
    /* Évite que la palette dépasse à droite ou en bas du viewport. */
    transform: translate(0, 0);
}
@media (max-width: 600px) {
    .palette-popover {
        max-width: 95vw;
        min-width: 0;
        width: 95vw;
    }
}

/* Grid uniforme des créneaux pour aligner les cellules en colonnes régulières
   plutôt que d'avoir un flex-wrap qui laisse un gap d'air aléatoire à droite
   sur la 2e ligne. 4 colonnes par défaut, 3 sur mobile pour conserver une
   cellule lisible. */
.palette-creneaux-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 600px) {
    .palette-creneaux-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.palette-creneau {
    min-width: 0;
    height: 56px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-weight: 700;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    user-select: none;
    padding: 0 4px;
    overflow: hidden;
}
.palette-creneau:hover:not(.palette-creneau--disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.palette-creneau--disabled {
    opacity: 0.25;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.palette-creneau--current {
    outline: 3px solid #212121;
    outline-offset: 2px;
}
.palette-creneau .code {
    font-size: 1.2rem;
    line-height: 1;
}
.palette-creneau .horaire {
    font-size: 0.65rem;
    opacity: 0.9;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Bouton "X créneaux ▾" cliquable dans l'en-tête de chaque jour de la grille admin.
   Permet de changer le JourneeType d'un jour ouvré tant que le planning est en Draft. */
.header-jt-btn {
    background: transparent;
    border: 1px dashed #CFD8DC;
    border-radius: 6px;
    padding: 1px 6px;
    color: #607D8B;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.header-jt-btn:hover {
    background: #ECEFF1;
    color: #37474F;
    border-color: #90A4AE;
}
/* Variante read-only (planning publié) — pas de bordure pointillée ni de hover. */
.header-jt-btn--readonly {
    border-style: solid;
    cursor: default;
}
.header-jt-btn--readonly:hover {
    background: transparent;
    color: #607D8B;
    border-color: #CFD8DC;
}
/* États de couverture : orange doux = au moins un créneau pris mais incomplet,
   vert = tous les créneaux du JourneeType sont affectés. Sans modifier =
   blanc / neutre = aucun créneau saisi pour ce jour. Spécificité doublée
   (.header-jt-btn.header-jt-btn--xxx) pour battre la déclaration `border:`
   shorthand de `.header-jt-btn` dans tous les navigateurs. */
.header-jt-btn.header-jt-btn--partial,
.header-jt-btn.header-jt-btn--partial:hover {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFCC80;
}
.header-jt-btn.header-jt-btn--complete,
.header-jt-btn.header-jt-btn--complete:hover {
    background: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}
.header-jt-caret {
    font-size: 0.7rem;
    line-height: 1;
}

/* Badge créneau de fermeture */
.badge-fermeture {
    background: #FFE0E0;
    color: #C62828;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Chip statut planning */
.chip-draft { background: #FFF9C4 !important; color: #F57F17 !important; }
.chip-publie { background: #E8F5E9 !important; color: #2E7D32 !important; }
.chip-cloture { background: #EDE7F6 !important; color: #4527A0 !important; }

/* Quota bar — barre empilée par catégorie d'heures */
.quota-bar-stacked {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 8px;
    background: #EEEEEE;
    overflow: hidden;
}
.quota-bar-segment {
    height: 100%;
    transition: width 0.3s ease;
}

/* Légende du quota — items alignés sur 1 ligne (wrap si la viewport est trop étroite) */
.quota-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}
.quota-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.quota-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}
.quota-legend__label {
    color: #757575;
    font-size: 0.75rem;
}
.quota-legend__value {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Salarié color dot */
.salarie-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Pastille « hors compteur » utilisée sur tables/cartes affichant une salariée
   exclue des totaux d'équipe (compteurs heures, récap planning, fiche salariée). */
.hors-compteur-pastille {
    font-size: 0.7rem;
    font-weight: 700;
    background: #ECEFF1;
    color: #546E7A;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Récap latéral (sticky) — toujours visible à droite de la grille planning */
.recap-lateral-sticky {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 4px;
}

.recap-lateral-card {
    background: var(--pb-surface);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.recap-lateral-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #CFD8DC !important;
}

.recap-lateral-line {
    align-items: center;
    min-height: 22px;
}

/* Puce ultra-compacte du panneau récap (fermetures, vendredi) */
.recap-puce.mud-chip-size-small {
    height: 18px;
    min-width: 22px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .planning-cell {
        min-width: 28px;
        height: 28px;
        font-size: 0.65rem;
    }
}

/* ─── Carte demande (DemandeCard.razor) ─────────────────────────────────────
   Layout responsive partagé entre vue salarié et vue admin :
   - Desktop : nom + chips alignés à droite sur une seule ligne, période dessous
   - Mobile  : nom sur sa propre ligne, chips dessous, période en bas
*/
.demande-card-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
}

.demande-card-name-block {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.demande-card-name {
    font-weight: 700;
    color: #263238;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.demande-card-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.demande-card-chips {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.demande-card-periode {
    flex-basis: 100%;
    color: #455A64;
    font-size: 0.875rem;
}

.demande-card-jours {
    color: #9E9E9E;
    font-size: 0.75rem;
    margin-left: 4px;
}

@media (max-width: 600px) {
    /* Mobile : le bloc nom prend toute la largeur, ce qui force chips et
       période à passer sur leurs propres lignes. */
    .demande-card-name-block { flex-basis: 100%; }
}

/* Scrollbar custom */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #BDBDBD; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9E9E9E; }

/* ─── Planning équipe (vue salarié, lecture seule) ───────────────────────── */
.planning-equipe-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.planning-equipe-table th,
.planning-equipe-table td {
    border: 1px solid #ECEFF1;
    padding: 6px 6px;
    vertical-align: middle;
    text-align: center;
    font-size: 0.85rem;
}
.planning-equipe-table th {
    background: #F5F7FA;
    color: #37474F;
    font-weight: 700;
    padding: 8px 6px;
}
.planning-equipe-table .th-jour-nom {
    font-size: 0.9rem;
    font-weight: 700;
}
.planning-equipe-table .th-jour-date {
    color: #757575;
    font-size: 0.72rem;
    margin-top: 2px;
}
.planning-equipe-table .th-jour-ferie {
    color: #E65100;
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 2px;
}
.planning-equipe-table .th-sub-row th.th-sub {
    background: #FAFBFC;
    font-weight: 500;
    color: #90A4AE;
    font-size: 0.65rem;
    padding: 3px 4px;
    letter-spacing: 0.02em;
}
.planning-equipe-table .th-sub .th-sub-creneau { color: #455A64; font-weight: 600; }
.planning-equipe-table .th-sub .th-sub-reunion { color: #78909C; font-style: italic; }
.planning-equipe-table .th-sub .th-sub-sep { margin: 0 4px; color: #CFD8DC; }

.planning-equipe-table .col-salarie {
    text-align: left;
    width: 150px;
    min-width: 150px;
    background: #FAFBFC;
    padding-left: 12px;
}
.planning-equipe-table .col-jour {
    width: 130px;
    min-width: 130px;
}
.planning-equipe-table .col-total {
    width: 95px;
    min-width: 95px;
    background: #F0F4F7;
    font-weight: 700;
}
.planning-equipe-table .total-week {
    font-size: 0.95rem;
    color: #263238;
}
.planning-equipe-table .cell-salarie {
    display: flex;
    align-items: center;
    gap: 8px;
}
.planning-equipe-table .salarie-prenom {
    font-weight: 700;
    font-size: 0.9rem;
    color: #263238;
}

/* Ligne « créneau » (1ʳᵉ ligne par salariée) */
.planning-equipe-table .row-creneau td.cell-creneau {
    height: 44px;
    padding: 6px 4px;
    background: #FFFFFF;
}
.planning-equipe-table .creneau-hours {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-left: 4px solid #BDBDBD;
    background: #F5F7FA;
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: 600;
    color: #263238;
    white-space: nowrap;
    font-size: 0.85rem;
    min-width: 96px;
    justify-content: center;
}
.planning-equipe-table .creneau-hours-text {
    font-variant-numeric: tabular-nums;
}
.planning-equipe-table .creneau-pill {
    display: inline-block;
    color: white;
    font-weight: 700;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.85rem;
    min-width: 44px;
    letter-spacing: 0.03em;
}
.planning-equipe-table .cell-empty {
    color: #CFD8DC;
    font-size: 1rem;
}

/* Ligne « réunion » (2ᵉ ligne par salariée) */
.planning-equipe-table .row-reunion td.cell-reunion {
    height: 30px;
    padding: 3px 4px;
    background: #FAFBFC;
    border-top: 1px dashed #E0E0E0;
}
.planning-equipe-table .row-reunion td:not(.col-salarie):not(.col-total) {
    border-bottom: 2px solid #CFD8DC;
}
.planning-equipe-table .reunion-tag {
    display: inline-block;
    background: #E8EAF6;
    color: #3949AB;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 1px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.planning-equipe-total-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FAFAFA;
    border: 1px solid #ECEFF1;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.85rem;
}

/* ─── Planning équipe — vue mobile : carte par JOUR avec liste salariées ─ */
.planning-equipe-mobile { display: flex; flex-direction: column; gap: 8px; }

.planning-equipe-day.planning-jour-fermeture {
    background: #FFF8E1;
}

.planning-equipe-day__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #ECEFF1;
    margin-bottom: 6px;
}
.planning-equipe-day__name {
    font-weight: 700;
    color: #263238;
    font-size: 0.95rem;
    text-transform: capitalize;
}
.planning-equipe-day__date {
    color: #607D8B;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.planning-equipe-day__ferie {
    margin-left: auto;
    color: #E65100;
    font-size: 0.75rem;
    font-weight: 700;
}
.planning-equipe-day__fermeture-msg {
    display: block;
    color: #757575;
    font-style: italic;
    font-size: 0.85rem;
    padding: 2px 0 4px;
}

.planning-equipe-day__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}
.planning-equipe-day__row + .planning-equipe-day__row {
    border-top: 1px solid #F5F5F5;
}

.planning-equipe-day__salarie {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 5.5rem;
    flex-shrink: 0;
    font-weight: 600;
    color: #263238;
    font-size: 0.85rem;
}
.planning-equipe-day__salarie .salarie-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

.planning-equipe-day__activity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* Vue mobile admin /admin/planning : bouton "+ ajouter" inline pour une cellule
   vide cliquable. Plus visible que le `cell-empty` du salarié (qui rend juste
   "—") puisqu'on veut signaler une action interactive — pas seulement une
   case sans contenu. */
.planning-mobile-cell-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 4px 10px;
    border: 1px dashed #CFD8DC;
    border-radius: 4px;
    color: var(--mud-palette-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.planning-mobile-cell-empty:hover {
    background: #ECEFF1;
    border-color: #90A4AE;
}
.planning-mobile-cell-empty.planning-cell-active {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Wrapper de la vue mobile admin : juste un gap vertical entre les MudPaper jour. */
.planning-mobile-week {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

/* FAB Menu mobile : position fixed en bas à droite, accessible au pouce.
   Au-dessus de la cible 56 px du Material Design pour confort tactile. z-index
   élevé pour passer au-dessus du contenu scrollé. */
.page-fab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1100;
}

/* Réordonnancement mobile des blocs de la fiche salariée /admin/salaries/{id}.
   En desktop, l'ordre source est conservé (Compteurs Abs + Planning sur la 1ère
   ligne, Compteur Heures + Prochaines absences sur la 2e, etc.) grâce au mix
   md=8 / md=4. En mobile (xs=12), tous les MudItem s'empilent et c'est cet
   `order:` qui détermine l'ordre vertical. Cf. SalarieDetails.razor commentaire
   d'intro du MudGrid. */
@media (max-width: 600px) {
    .salarie-mob-order-1 { order: 1; }
    .salarie-mob-order-2 { order: 2; }
    .salarie-mob-order-3 { order: 3; }
    .salarie-mob-order-4 { order: 4; }
    .salarie-mob-order-5 { order: 5; }
    .salarie-mob-order-6 { order: 6; }
    .salarie-mob-order-7 { order: 7; }
}

/* Réutilisation des pills creneau-hours/creneau-pill/reunion-tag/cell-empty
   définies plus haut (table desktop). Mêmes styles, on évite la duplication. */
.planning-equipe-day .creneau-hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-left: 4px solid;
    padding-left: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #263238;
    font-variant-numeric: tabular-nums;
}
/* Pavé carré coloré portant le code lettre du créneau, devant l'horaire. Aide
   à positionner mentalement l'action (matin/midi/soir/fermeture) sans avoir à
   lire l'horaire complet. */
.planning-equipe-day .creneau-hours__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 5px;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}
.planning-equipe-day .creneau-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.75rem;
    color: #fff;
}
.planning-equipe-day .reunion-tag {
    display: inline-block;
    background: #E8EAF6;
    color: #3949AB;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.planning-equipe-day .cell-empty {
    color: #9E9E9E;
    font-size: 0.85rem;
}

/* ─── Enfants liste — cartes mobile ─────────────────────────────────── */
.enfants-mobile-cards { display: flex; flex-direction: column; gap: 8px; }

.enfant-card {
    cursor: pointer;
    transition: background 0.15s;
}

.enfant-card:hover { background: #FAFAFA; }

.print-only { display: none; }

/* ─── Planning présence enfants ───────────────────────────────────────────── */
.pb-presence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pb-presence-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.pb-presence-mois {
    min-width: 160px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #263238;
}
.pb-presence-legende {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.82rem;
    color: var(--pb-text-muted);
}
.pb-presence-legende-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pb-presence-pastille {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.pb-presence-titre {
    font-size: 14pt;
    font-weight: 700;
    color: #263238;
    margin: 0 0 6mm;
}
.pb-presence-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
    border: 1px solid var(--pb-border-light);
    border-radius: 8px;
    overflow: hidden;
}
.pb-presence-table thead th {
    background: #FAFAFA;
    color: #455A64;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    padding: 8px 6px;
    border-bottom: 1px solid var(--pb-border-light);
}
.pb-presence-table thead th .jour-libelle {
    display: inline-block;
}
.pb-presence-table thead th .jour-count {
    display: inline-block;
    margin-left: 6px;
    background: #ECEFF1;
    color: #455A64;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}
.pb-presence-table thead th.depasse .jour-count {
    background: #FFCDD2;
    color: #B71C1C;
}
.pb-presence-table tbody td {
    height: 30px;
    text-align: center;
    font-size: 0.85rem;
    padding: 3px 6px;
    border-right: 1px solid #F0F2F4;
    border-bottom: 1px solid #F0F2F4;
}
.pb-presence-table tbody td:last-child { border-right: none; }
.pb-presence-table tbody tr:last-child td { border-bottom: none; }
/* Zébrage par ligne pour faciliter la lecture horizontale (suivi d'un enfant
   sur la semaine). Le fond de cellule (cell-enfant / cell-vide / absence)
   surcharge le zébrage là où il a une sémantique propre. */
.pb-presence-table tbody tr:nth-child(odd) td { background: #FAFAFA; }
.pb-presence-table tbody tr:nth-child(even) td { background: #FFFFFF; }

/* Jour non réservé pour cet enfant (= absent du contrat) — bleu-gris froid
   distinct du zébrage neutre. */
.pb-presence-table .cell-vide,
.pb-presence-table tbody tr:nth-child(odd) td.cell-vide,
.pb-presence-table tbody tr:nth-child(even) td.cell-vide {
    background: #E3F2FD;
}

.pb-presence-table .cell-enfant {
    color: #263238;
    font-weight: 500;
    border-radius: 3px;
    text-align: left;
    padding: 4px 8px !important;
    vertical-align: middle;
}
/* Surcharge du zébrage sur les cellules à sémantique forte (allergie / absence) */
.pb-presence-table tbody tr td.cell-enfant.has-allergie { background: #FFEBEE; }

/* Vue semaine : cellules plus larges, layout interne flex (nom à gauche, actions à droite) */
.pb-presence-table--semaine thead th .jour-libelle {
    font-weight: 700;
    text-transform: capitalize;
}
.pb-presence-table--semaine thead th .jour-date {
    display: inline-block;
    margin-left: 4px;
    color: #757575;
    font-weight: 500;
    font-size: 0.78rem;
}

.pb-presence-table .cell-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.pb-presence-table .cell-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pb-presence-table .cell-name.is-absent {
    text-decoration: line-through;
    color: #90A4AE;
}
.pb-presence-table .cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.pb-presence-table .cell-chip {
    font-size: 0.72rem !important;
    height: 22px !important;
    font-weight: 600;
}

/* Chip type-repas — fond + texte colorés via TypeRepasHelper.CouleurFond/CouleurTexte,
   appliqués inline. Présent sur grille planning enfants (admin/salarié), print view
   et fiche enfant. */
.repas-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pb-presence-table .cell-absence-tag {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    color: #90A4AE;
    font-style: italic;
}

/* Absence (programmée ou imprévue) : orange doux uniforme. La distinction
   prog. vs imprévu se fait par le tag textuel sous le nom, pas par la couleur. */
.pb-presence-table tbody tr td.cell-enfant.absence-prog,
.pb-presence-table tbody tr td.cell-enfant.absence-imp {
    background: #FFE0B2;
}
.pb-presence-mobile-item.absence-prog,
.pb-presence-mobile-item.absence-imp { background: #FFE0B2; }
.pb-presence-mobile-item .is-absent {
    text-decoration: line-through;
    color: #90A4AE;
}

.pb-presence-mobile-item {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #263238;
    background: var(--pb-bg-subtle, #FAFAFA);
}
.pb-presence-mobile-item.has-allergie { background: #FFEBEE; }
.pb-presence-mobile-item.is-tappable {
    cursor: pointer;
    min-height: 44px; /* Cible tactile WCAG 2.5.5 — pages /salarie/* */
}

/* Bouton PDF / actions sur entité — garantit 44px en mobile pour le tap */
@media (max-width: 600px) {
    .pb-tappable.mud-button-root { min-height: 44px; }
}

/* Error UI */
#blazor-error-ui {
    background: #B71C1C;
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: 'Nunito', sans-serif;
}
#blazor-error-ui .dismiss { cursor: pointer; color: rgba(255,255,255,0.7); float: right; }

/* ── Notifications (cloche header + page) ───────────────────────────────── */
.notification-bell-panel {
    width: 360px;
    max-width: 92vw;
    max-height: 80vh;
    overflow-y: auto;
}
.notification-bell-list {
    max-height: 60vh;
    overflow-y: auto;
}
.notif-non-lue {
    background: rgba(33, 150, 243, 0.08);
    border-left: 3px solid var(--pb-primary, #1976D2);
}
.notif-lue {
    opacity: 0.78;
}

/* ─── Inputs HTML bruts (auth + profil) — rendu visuel proche de MudTextField ──
   Utilisée sur les formulaires qui POST vers /auth/* (impossible en MudBlazor
   car SignalR ne transporte pas Set-Cookie). font-size: 16px obligatoire pour
   éviter le zoom involontaire iOS sur sélection. */
.form-control-mud {
    font-family: inherit;
    font-size: 16px;
    padding: 0.625rem 0.75rem;
    width: 100%;
    border: 1px solid var(--mud-palette-lines-default, #E0E0E0);
    border-radius: 4px;
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-primary, #212121);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}
.form-control-mud:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #5C6BC0);
    box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.18);
}
.form-control-mud:disabled {
    background: #F5F5F5;
    color: #9E9E9E;
}

.btn-mud-styled {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background: var(--mud-palette-primary, #5C6BC0);
    color: #FFFFFF;
    min-height: 44px;
    transition: filter 0.15s;
}
.btn-mud-styled:hover:not(:disabled) { filter: brightness(1.08); }
.btn-mud-styled:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-mud-styled--secondary {
    background: transparent;
    color: var(--mud-palette-primary, #5C6BC0);
    border: 1px solid currentColor;
}

/* /admin/demandes — grille de cartes au-dessus d'un MudTable (pager natif
   conservé). 3 colonnes ≥960 px, 2 colonnes 600–960 px, 1 colonne <600 px
   — équivalent du MudGrid xs=12 sm=6 md=4 historique. */
.demandes-card-grid tbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 4px 0;
}
.demandes-card-grid tbody tr {
    display: block !important;
    background: transparent !important;
    border: none !important;
    min-width: 0;
}
.demandes-card-grid tbody tr:hover {
    background: transparent !important;
}
.demandes-card-grid tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
}
/* Sous breakpoint mobile, MudBlazor pose .mud-xs-table .mud-table-cell::before
   { content: attr(data-label) } qui devient un flex item invisible — combiné au
   display:flex; justify-content:space-between de la même règle, il pousse la
   MudCard à droite. On neutralise le pseudo-element pour récupérer un layout
   block normal. */
.demandes-card-grid tbody tr td::before {
    content: none !important;
}

/* Hauteur uniforme : en grid, align-items vaut `stretch` par défaut → chaque tr
   prend la hauteur de la rangée. Pour que la carte (MudCard ou MudPaper) à
   l'intérieur remplisse cette hauteur (et que les actions s'alignent en bas,
   peu importe la taille du contenu), on cascade height:100% jusqu'à la card
   + flex-col pour pousser les actions au bottom. Sans ça, une carte au
   contenu court reste petite à côté d'une carte au contenu long.

   Couvre les 2 patterns : MudCard avec MudCardActions, et MudPaper avec une
   dernière MudStack en pied. Si la carte n'a pas de bloc d'actions, le
   contenu reste en haut et le vide tombe en bas — c'est OK visuellement,
   c'est juste l'alignement qui s'uniformise entre cartes voisines. */
.demandes-card-grid tbody tr,
.demandes-card-grid tbody tr td,
.demandes-card-grid tbody tr td > .mud-card,
.demandes-card-grid tbody tr td > .mud-paper {
    height: 100%;
}
.demandes-card-grid tbody tr td > .mud-card,
.demandes-card-grid tbody tr td > .mud-paper {
    display: flex;
    flex-direction: column;
}
.demandes-card-grid tbody tr td > .mud-card > .mud-card-actions,
.demandes-card-grid tbody tr td > .mud-paper > .mud-stack:last-child {
    margin-top: auto;
}

/* Pattern A (CLAUDE.md « Listes responsive ») — liste simple où chaque valeur
   s'auto-explique (nom, chip statut, email…). Pas besoin de DataLabel sur
   chaque MudTd. On neutralise juste le ::before vide et on aligne à gauche
   pour éviter l'effet "tout collé à droite". À poser via Class sur la MudTable. */
.mud-table-mobile-list .mud-table-cell::before {
    content: none !important;
}
.mud-table-mobile-list .mud-table-cell {
    justify-content: flex-start !important;
    text-align: left !important;
}
@media (max-width: 960px) {
    .demandes-card-grid tbody {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .demandes-card-grid tbody {
        grid-template-columns: 1fr;
    }
}