/* 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%; }
}

.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: 8px 12px;
    min-width: 200px;
    max-width: min(420px, 90vw);
    /* Évite que la palette dépasse à droite ou en bas du viewport. */
    transform: translate(0, 0);
}

.palette-creneau {
    min-width: 56px;
    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;
}
.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;
}

/* 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;
}

/* 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;
}

/* 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 {
    border-left: 4px solid;
    padding-left: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #263238;
    font-variant-numeric: tabular-nums;
}
.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;
}
@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;
    }
}