/* ═══════════════════════════════════════════════════════════════════════════
   MODULE CONGÉS & ABSENCES

   Tout le style de ce module vit ici, et non dans les gabarits : la même
   modale de saisie est rendue depuis deux pages différentes — l'espace
   salarié (`leave/index.html.twig`) et la grille de planification RH
   (`ch/leave/planning.html.twig`). Un style posé dans l'un des deux gabarits
   ne voyageait pas dans l'autre : les jetons d'accent étaient indéfinis et les
   champs tombaient à l'habillage nu du navigateur sur la grille.

   Les gabarits n'ont donc plus que des CLASSES, que ce fichier sert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Accent local ──────────────────────────────────────────────────────────
   Entièrement dérivé de la charte de l'entreprise : la vue n'a plus de teinte
   en propre, elle suit les jetons « --tc-red-* ». En mode sombre, seuls deux
   jetons ont besoin d'une variante — la teinte claire pour l'accent, et
   l'encre de danger ; les fonds et bordures teintés sont déjà redérivés pour
   le thème sombre par App\Service\Branding\BrandPalette.

   Ils sont portés par `.leave-modal` et non par un conteneur de page : la
   modale est un fragment chargé en AJAX dans une page qui n'a aucune
   raison d'être un « espace congés ». Un ancêtre de page la styled, la modale
   n'en hérite pas — c'est exactement ce qui la rendait illisible sur la grille. */
.leave-modal {
    --lv-red: var(--tc-red);
    --lv-red-bg: var(--tc-red-subtle);
    --lv-red-border: var(--tc-red-border);
    --lv-red-ink: var(--tc-accent-ink);
    --lv-error: var(--tc-danger-ink);
}
[data-bs-theme="dark"] .leave-modal {
    --lv-red: var(--tc-red-light);
    --lv-error: var(--tc-danger-ink);
}

/* La même palette sert les éléments posés HORS modale : bandeau du titulaire
   dans le fragment, badges de la liste. Ils sont dans la modale, donc ils
   héritent des jetons ci-dessus. */
.leave-page {
    --lv-red: var(--tc-red);
    --lv-red-bg: var(--tc-red-subtle);
    --lv-red-border: var(--tc-red-border);
    --lv-red-ink: var(--tc-accent-ink);
    --lv-error: var(--tc-danger-ink);
}
[data-bs-theme="dark"] .leave-page {
    --lv-red: var(--tc-red-light);
    --lv-error: var(--tc-danger-ink);
}

/* ─── Chrome de la page employee ───────────────────────────────────────── */
.leave-eyebrow {
    font: 500 12px 'JetBrains Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lv-red);
    margin-bottom: 6px;
}
.leave-chip {
    background: var(--tc-surface-soft);
    color: var(--tc-ink-2);
    font: 600 11px Inter;
    padding: 4px 10px;
    border-radius: 999px;
}
.leave-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font: 600 13px Inter;
    color: var(--tc-on-primary);
    background: var(--tc-red);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.leave-btn:hover { background: var(--tc-red-hover); }

/* ─── Carte de congé ───────────────────────────────────────────────────────
   Elle porte deux liens (le détail, puis la fiche), et c'est la CLASSE — non
   un style en ligne — qui tient la colonne. Le filtre Stimulus réaffiche une
   carte en remettant `display` à vide : une valeur en ligne effacée retomberait
   sur `block`, et le bouton remonterait dans le corps de la carte. */
.leave-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 14px;
}
.leave-card__body { display: block; flex: 1; padding: 18px 20px; text-decoration: none; }
.leave-card__foot { padding: 0 20px 18px; }
.leave-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font: 600 12.5px Inter;
    color: var(--tc-ink-2);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.leave-card-btn:hover {
    background: var(--tc-red-subtle);
    border-color: var(--tc-red-border);
    color: var(--tc-accent-ink);
}

/* ─── Champs ─────────────────────────────────────────────────────────────── */
.leave-label {
    display: block;
    font: 600 12.5px Inter;
    color: var(--tc-ink-2);
    margin-bottom: 7px;
}
.leave-input {
    width: 100%;
    padding: 11px 12px;
    font: 500 13.5px Inter;
    color: var(--tc-ink);
    background-color: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 9px;
    outline: none;
    box-sizing: border-box;
}
.leave-input:focus { border-color: var(--lv-red); }

/* Selects et champs date/heure : forcer le rendu blanc plat de la maquette
   (sinon le navigateur affiche son habillage natif gris) + chevron custom. */
select.leave-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C757D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
input.leave-input[type="date"],
input.leave-input[type="time"] { color-scheme: light; }
[data-bs-theme="dark"] input.leave-input[type="date"],
[data-bs-theme="dark"] input.leave-input[type="time"] { color-scheme: dark; }
.leave-input::placeholder { color: var(--tc-ink-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   MODALES DE DEMANDE — ABSENCE ET CONGÉ

   HAUTEUR. La modale tient en trois bandes : en-tête, contenu, pied. Seul le
   CONTENU défile ; l'en-tête et le pied restent en place. Sans cela, sur
   Bootstrap borne bien la hauteur (`modal-dialog-scrollable`), mais il n'attend
   pas que le contenu s'y comprime : la modale grandissait avec son contenu.

   Les maillons de la chaîne. `min-height: 0` autorise l'enfant à passer sous sa
   hauteur naturelle — sans lui, un conteneur flex refuse de comprimer son
   contenu et c'est la modale qui grandit, pas la zone de défilement.

   LARGEUR. Les largeurs maximales vivent ici, en classes, et non en `style=`
   dans le gabarit : une valeur en ligne l'emporte sur toute règle adaptative,
   et le téléphone n'aurait aucun moyen de la reprendre.
   ═══════════════════════════════════════════════════════════════════════════ */
.leave-modal .modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 20, 26, .3);
}
.leave-modal__dialog { max-width: 560px; }
.leave-modal__dialog--wide { max-width: 820px; }

/* Ici aussi les maillons de la chaîne flex, relayés par l'enveloppe Stimulus :
   `form` et `__shell` s'intercalent entre `.modal-content` et `__body`, et
   chacun doit transmettre la contrainte, sinon elle se rompt et le contenu
   déborde en silence. */
.leave-modal__form,
.leave-modal__shell { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.leave-modal__head,
.leave-modal__foot { flex: 0 0 auto; }
.leave-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Deux colonnes sur écran large : la saisie à gauche, le récapitulatif du solde
   à droite. Sur téléphone la colonne de 300px ne tient pas — elle poussait la
   modale hors de l'écran, et l'on saisissait à l'aveugle en défilant
   horizontalement.

   Empilées, l'ordre compte : la SAISIE d'abord, le récapitulatif ensuite. Le
   solde est une conséquence de ce qu'on tape ; le lire avant d'avoir rien
   saisi n'apprend rien. */
.leave-split { display: grid; grid-template-columns: 1fr 300px; gap: 0; }
.leave-fields { display: flex; gap: 14px; margin-bottom: 16px; }

@media (max-width: 767.98px) {
    .leave-split { grid-template-columns: 1fr; }
    /* Le panneau du solde perd son filet vertical, qui ne sépare plus rien, et
       prend un filet horizontal. */
    .leave-split > div:last-child { border-left: none !important; border-top: 1px solid var(--tc-border); }

    /* Date et nombre de jours passent l'un sous l'autre : côte à côte, le champ
       de date devient trop étroit pour afficher son format. */
    .leave-fields { flex-direction: column; gap: 12px; }
    /* Sauf l'heure de début et celle de fin : elles se lisent comme un intervalle,
       et deux champs d'heure tiennent côte à côte même sur 360px. */
    .leave-fields--inline { flex-direction: row; gap: 12px; }

    .leave-modal .modal-content { border-radius: 14px; }
}

/* Sur écran large, la case « Journée complète » s'aligne sur le bas du champ de
   date ; empilée, cet alignement n'a plus d'objet. */
.leave-fields--end { align-items: flex-end; }
@media (max-width: 767.98px) { .leave-fields--end { align-items: stretch; } }

@media (max-width: 575.98px) {
    /* Les marges intérieures du gabarit sont en ligne : seul `!important` peut
       les reprendre. 26px de chaque côté mangeaient un septième d'un écran de
       360px — autant de largeur en moins pour les champs eux-mêmes. */
    .leave-modal__head,
    .leave-modal__foot,
    .leave-modal__body:not(.leave-split),
    .leave-split > div { padding-left: 16px !important; padding-right: 16px !important; }

    /* Le pied garde ses boutons atteignables au pouce : ils se partagent la
       largeur au lieu de se serrer dans le coin droit. */
    .leave-modal__foot > button { flex: 1 1 0; justify-content: center; text-align: center; }
}

/* Champ dont la valeur est IMPOSÉE (durée légale) : visible, soumis, mais non
   modifiable. Le gris dit « ce n'est pas à vous de le choisir » — un champ
   blanc et inerte se lirait comme un bug. */
.leave-input.is-readonly,
input.is-readonly { background: var(--tc-bg); color: var(--tc-ink-2); cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRILLE DE PLANIFICATION

   Peinture des jours (week-end, férié, chevauchement) et tracé d'une plage au
   pointeur. Ces règles Vivaient dans un bloc `<style>` du gabarit : la grille
   est la seule à les porter, mais rien ne les concernait hors de lui — elles
   sont ici, comme le reste du module.
   ═══════════════════════════════════════════════════════════════════════════ */
.planning-calendar-scroll {
    max-height: min(620px, calc(100vh - 310px));
    overflow: auto;
    overscroll-behavior: contain;
}

.planning-calendar-grid { min-width: 1180px; }

.planning-calendar-head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--tc-surface);
}

.planning-calendar-head > div:first-child { background: var(--tc-surface); }

.planning-day--weekend { background: #EEF1F4; }
.planning-day--holiday { background: var(--tc-amber-bg); }
.planning-day--overlap { box-shadow: inset 0 -2px 0 var(--tc-red); }

[data-bs-theme="dark"] .planning-day--weekend { background: #202B33; }

[data-bs-theme="dark"] .planning-calendar-head,
[data-bs-theme="dark"] .planning-calendar-head > div:first-child { background: var(--tc-surface); }

/* ─── Sélection d'une plage ────────────────────────────────────────────────
   Le trait plein est la plage, le contour marque l'ancre (le jour de départ).
   Deux traits et non un dégradé : sur une grille déjà colorée par les barres
   d'absence, un aplat se confondrait avec une absence déjà enregistrée — et
   c'est précisément la confusion qui ferait croire à une plage déjà posée. */
.lpc-cell--selected { box-shadow: inset 0 0 0 9999px rgba(11, 94, 215, .14); }
.lpc-cell--anchor { box-shadow: inset 0 0 0 2px var(--tc-primary, #0B5ED7); }
.lpc-cell--pending {
    box-shadow: inset 0 0 0 2px var(--tc-primary, #0B5ED7);
    animation: lpc-pulse 1.1s ease-in-out infinite;
}

@keyframes lpc-pulse { 50% { opacity: .45; } }

/* Le pointage ne vaut que là où le gabarit a pose `editable="1"`. Un
   curseur qui reste une flèche ailleurs annonce qu'il n'y a rien à
   faire — sans mot, comme il se doit. */
[data-leave-planning-target="day"][data-editable="1"] { cursor: crosshair; }

@media (prefers-reduced-motion: reduce) { .lpc-cell--pending { animation: none; } }

/* ─── Responsivité mobile pour la grille de planification ──────────────────── */
@media (max-width: 767.98px) {
    .planning-calendar-grid {
        min-width: 100%;
    }

    .planning-calendar-scroll {
        max-height: min(520px, calc(100vh - 300px));
    }

    .planning-calendar-row__identity {
        min-width: 140px;
        padding: 8px 10px !important;
    }

    .planning-calendar-row__avatar {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }

    .planning-calendar-row__name {
        font-size: 11px;
    }

    .planning-calendar-row__role {
        font-size: 10px;
    }

    .planning-calendar-head__day {
        padding: 4px 1px;
    }

    .planning-calendar-head__letter {
        font-size: 8px;
    }

    .planning-calendar-head__num {
        font-size: 10px;
    }
}

@media (max-width: 575.98px) {
    .planning-calendar-row__identity {
        min-width: 120px;
        padding: 6px 8px !important;
    }

    .planning-calendar-row__avatar {
        width: 22px;
        height: 22px;
        font-size: 8px;
    }

    .planning-calendar-row__name {
        font-size: 10.5px;
    }

    .planning-calendar-row__role {
        font-size: 9px;
    }

    .planning-calendar-head__corner {
        font-size: 10px;
        padding: 8px 10px;
    }

    .planning-calendar-head__letter {
        font-size: 7px;
    }

    .planning-calendar-head__num {
        font-size: 9px;
    }

    .planning-calendar-day {
        min-width: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FRAGMENT DE SAISIE — `leave/_conge_form.html.twig` et `leave/_permission_form.html.twig`

   Ce fragment est le seul markup des deux modales, et il est rendu depuis deux
   pages : l'espace salarié et la grille RH. Tout son habillage est donc ici.
   Les rares `style=` qui subsistent dans le gabarit portent une VALEUR calculée
   (la largeur de la barre de solde), pas une mise en forme — c'est la seule
   chose qu'une classe ne peut pas exprimer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── En-tête ──────────────────────────────────────────────────────────────
   La disposition et les marges internes sont ici, et plus dans le gabarit :
   la requête mobile du bas du fichier (`max-width: 575.98px`) ne pouvait les
   reprendre qu'à coups de `!important`. */
.leave-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--tc-border);
}
.leave-modal__head__group { display: flex; align-items: center; gap: 13px; }
.leave-modal__head__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--lv-red-bg);
    color: var(--lv-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.leave-modal__head__title { font: 700 17px Inter; color: var(--tc-ink); }
.leave-modal__head__subtitle { font: 500 12px Inter; color: var(--tc-ink-4); }
.leave-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--tc-ink-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ─── Bandeau du titulaire (saisie pour un tiers) ──────────────────────────
   Il existe sur les deux pages, et sa pastille devait rester habillée partout
   : `.leave-chip` ne vit que dans l'espace salarié, d'où la classe propre. */
.leave-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background: var(--tc-surface-soft);
    border-bottom: 1px solid var(--tc-border);
}
.leave-owner__avatar { width: 36px; height: 36px; font-size: 12px; flex: none; }
.leave-owner__text { min-width: 0; }
.leave-owner__name {
    font: 700 14px Inter;
    color: var(--tc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leave-owner__role { font: 500 11.5px Inter; color: var(--tc-ink-3); }
.leave-owner__badge {
    margin-left: auto;
    flex: none;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    color: var(--tc-ink-2);
    font: 600 11px Inter;
    padding: 4px 10px;
    border-radius: 999px;
}

/* ─── Colonne de saisie ─────────────────────────────────────────────────── */
.leave-form__pad { padding: 24px 26px; }
.leave-form__block { margin-bottom: 18px; }
.leave-form__note { font: 500 11.5px Inter; color: var(--tc-ink-4); margin-bottom: 16px; }
.leave-form__required { color: var(--lv-red); }
.leave-form__resize { resize: vertical; }
.leave-form__sublabel { font: 500 11.5px Inter; color: var(--tc-ink-4); }

/* Colonne d'un champ dans `.leave-fields` : `min-width: 0` autorise le
   rétrécissement sous la largeur naturelle du champ date. */
.leave-fields__col { flex: 1; min-width: 0; }
/* Le champ DATE est plus large que le nombre de jours : sans cette largeur
   majorée, la date affichait « 2026-10-02 » tronqué. */
.leave-fields__col--wide { flex: 1.6; min-width: 0; }
.leave-fields.leave-fields--tight { margin-bottom: 12px; }

/* Ligne d'erreur sous deux champs (date illisible, solde insuffisant). */
.leave-error-line {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 600 11.5px Inter;
    color: var(--lv-error);
    margin-top: -6px;
    margin-bottom: 12px;
}

/* ─── Bandeaux d'avertissement ──────────────────────────────────────────── */
.leave-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--tc-amber-bg);
    border: 1px solid var(--tc-amber-border);
    border-radius: 9px;
    padding: 11px 13px;
    margin-bottom: 12px;
}
.leave-alert--attachment { margin-bottom: 18px; }
.leave-alert__icon { flex: none; margin-top: 1px; color: var(--tc-amber-ink); }
.leave-alert__text { font: 500 11.5px Inter; color: var(--tc-amber-ink); line-height: 1.5; }

/* ─── Sections (EHC-7024, signature) ────────────────────────────────────── */
.leave-section {
    margin: 18px 0 16px;
    padding: 14px 15px;
    background: var(--tc-surface-soft);
    border: 1px solid var(--tc-border);
    border-radius: 10px;
}
.leave-section__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 700 10.5px 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-ink-3);
    margin-bottom: 12px;
}
.leave-section__title--signature { margin: 16px 0 8px; }

/* ─── Signature numérique ───────────────────────────────────────────────── */
.leave-signature__pad {
    width: 100%;
    height: 120px;
    background: #fff;
    border: 1.5px dashed var(--tc-border);
    border-radius: 9px;
    cursor: crosshair;
    touch-action: none;
    display: block;
}
.leave-signature__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.leave-signature__hint { font: 500 11px Inter; color: var(--tc-ink-4); }
.leave-signature__clear {
    font: 600 11px Inter;
    color: var(--tc-ink-3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}
.leave-signature__stored {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tc-green-bg);
    border: 1px solid var(--tc-green-border);
    border-radius: 9px;
    padding: 9px 12px;
    margin-bottom: 10px;
}
.leave-signature__stored img {
    height: 34px;
    max-width: 110px;
    flex: none;
    background: #fff;
    border-radius: 5px;
    padding: 2px;
}
.leave-signature__stored span { font: 500 11.5px Inter; color: var(--tc-green-ink); line-height: 1.45; }
.leave-signature__upload { margin: 12px 0 8px; }
.leave-signature__file { font-size: 11px; padding: 4px 6px; }
.leave-signature__save { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.leave-signature__save label { font: 500 11.5px Inter; color: var(--tc-ink-3); cursor: pointer; }

/* ─── Panneau du solde ──────────────────────────────────────────────────── */
.leave-recap {
    background: var(--tc-surface-soft);
    border-left: 1px solid var(--tc-border);
    padding: 24px 22px;
}
.leave-recap__head {
    text-align: center;
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--tc-border);
    margin-bottom: 16px;
}
.leave-recap__big { font: 800 44px Inter; color: var(--tc-green-ink); line-height: 1; letter-spacing: -.02em; }
.leave-recap__caption { font: 600 12px Inter; color: var(--tc-ink-3); margin-top: 4px; }
.leave-recap__track {
    height: 6px;
    border-radius: 999px;
    background: var(--tc-border);
    margin-top: 12px;
    overflow: hidden;
}
/* La largeur est la SEULE chose que le gabarit écrit en ligne : elle vient de
   `balance` et change à chaque saisie (le contrôleur la réécrit aussi). */
.leave-recap__bar { height: 100%; background: var(--tc-green-ink); }

.leave-recap__rows { display: flex; flex-direction: column; gap: 11px; }
.leave-recap__row { display: flex; justify-content: space-between; align-items: center; }
.leave-recap__row--key { font: 500 12.5px Inter; color: var(--tc-ink-3); }
.leave-recap__row--key-strong { font: 600 12.5px Inter; color: var(--tc-ink-2); }
.leave-recap__row--value { font: 700 13px Inter; color: var(--tc-ink); }
.leave-recap__row--value-accent { font: 700 13px Inter; color: var(--lv-red); }
.leave-recap__row--value-balance { font: 800 14px Inter; color: var(--tc-green-ink); }
.leave-recap__rule { height: 1px; background: var(--tc-border); margin: 3px 0; }

.leave-recap__overtime { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--tc-border); }
.leave-recap__sub { font: 600 11px Inter; color: var(--tc-ink-4); margin-bottom: 8px; }
.leave-recap__hint { font: 500 10px Inter; color: var(--tc-ink-4); margin-top: 6px; line-height: 1.4; }

.leave-recap__card { border-radius: 10px; padding: 13px 14px; margin-top: 16px; }
.leave-recap__card--filled { background: var(--tc-green-bg); }
.leave-recap__card--empty { background: var(--tc-surface-soft); }
.leave-recap__card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 700 10.5px 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.leave-recap__card-title--filled { color: var(--tc-green-ink); margin-bottom: 9px; }
.leave-recap__card-title--empty { color: var(--tc-ink-4); margin-bottom: 6px; }
.leave-recap__label { font: 500 11px Inter; color: var(--tc-ink-3); }
.leave-recap__value { font: 700 13.5px Inter; color: var(--tc-ink); margin-bottom: 8px; }
.leave-recap__value--filled { font: 700 13.5px Inter; color: var(--tc-green-ink); }
.leave-recap__value--empty { font: 600 13px Inter; color: var(--tc-ink-4); }
.leave-recap__note { font: 500 11px Inter; color: var(--tc-ink-4); margin-top: 3px; }
.leave-recap__note--spaced { font: 500 10.5px Inter; color: var(--tc-ink-4); margin-top: 9px; line-height: 1.45; }
.leave-recap__footer { font: 500 11px Inter; color: var(--tc-ink-4); margin-top: 14px; line-height: 1.5; }

/* ─── Pied de modale ──────────────────────────────────────────────────────
   Les deux boutons : l'annulation en surface, l'envoi à l'accent. */
.leave-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px;
    border-top: 1px solid var(--tc-border);
    background: var(--tc-surface-soft);
}
.leave-btn--ghost {
    padding: 11px 18px;
    font: 600 13px Inter;
    color: var(--tc-ink-2);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 9px;
    cursor: pointer;
}
.leave-btn--primary {
    padding: 11px 20px;
    font: 600 13px Inter;
    color: var(--tc-on-primary);
    background: var(--lv-red);
    border: none;
    border-radius: 9px;
    cursor: pointer;
}
.leave-form__hint { font: 500 11px Inter; color: var(--tc-ink-3); margin-top: 5px; line-height: 1.4; }
/* Durée calculée d'une demande d'heures supplémentaires : la valeur remonte
   à chaque frappe sur les champs horaires, la hauteur reste fixe pour que le
   motif ne saute pas quand « -- » devient « 2 h 30 min ». */
.form-hours-display { min-height: 20px; margin: 5px 0 15px; font: 700 16px Inter; color: var(--tc-ink); letter-spacing: -.01em; }
.leave-recap__row--value-green { font: 700 13px Inter; color: var(--tc-green-ink); }

/* ─── Modale permission ─────────────────────────────────────────────────────
   Mêmes Ossature et mêmes boutons que le congé : seules la teinte de l'icône
   (l'ambre pour une absence courte) et la case « Journée complète » changeaient. */
.leave-modal__head__icon--amber { background: var(--tc-amber-bg); color: var(--tc-amber-ink); }
.leave-fields.leave-fields--loose { margin-bottom: 18px; }
.leave-form__check {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 13px Inter;
    color: var(--tc-ink-2);
    padding-bottom: 12px;
    cursor: pointer;
}
.leave-form__check-box { width: 17px; height: 17px; accent-color: var(--tc-red); }
.leave-form__slots {
    background: var(--tc-surface-soft);
    border: 1px solid var(--tc-border);
    border-radius: 9px;
    padding: 10px 13px;
    font: 500 11.5px Inter;
    color: var(--tc-ink-3);
    margin-bottom: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTE DE DEMANDE — `leave/_request_card.html.twig`

   Deux variantes (congé / absence) partagent le même habillage : seule l'icône
   et le pied changent. La pastille d'état garde ses couleurs en ligne, car
   elles sont CHOISIES par l'entité selon le statut (`tones` du gabarit) et
   non fixées par la feuille.
   ═══════════════════════════════════════════════════════════════════════════ */
.leave-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 600 10.5px 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    padding: 5px 9px;
    border-radius: 999px;
}

.leave-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.leave-card__id { display: flex; align-items: center; gap: 11px; }
.leave-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.leave-card__icon--accent { background: var(--lv-red-bg); color: var(--lv-red); }
.leave-card__icon--amber { background: var(--tc-amber-bg); color: var(--tc-amber-ink); }
.leave-card__name { font: 700 15px Inter; color: var(--tc-ink); }
.leave-card__meta { font: 500 11.5px Inter; color: var(--tc-ink-4); margin-top: 1px; }

.leave-card__interim { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.leave-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tc-red);
    color: var(--tc-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px Inter;
}
.leave-card__person { font: 600 13px Inter; color: var(--tc-ink); }
.leave-card__role { font: 500 11px Inter; color: var(--tc-ink-3); }

.leave-card__period { padding: 10px 12px; background: var(--tc-surface-soft); border-radius: 8px; margin-bottom: 12px; }
.leave-card__period-k { font: 500 11px Inter; color: var(--tc-ink-3); margin-bottom: 3px; }
.leave-card__period-v { font: 600 12.5px Inter; color: var(--tc-ink); }
.leave-card__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.leave-card__chips--spaced { margin-bottom: 14px; }

.leave-card--absence { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 14px; padding: 18px 20px; }
.leave-card__line { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--tc-border); }
.leave-card__line--last { display: flex; justify-content: space-between; padding: 6px 0 12px; }
.leave-card__line-k { font: 500 12.5px Inter; color: var(--tc-ink-3); }
.leave-card__line-v { font: 600 12.5px Inter; color: var(--tc-ink); }
.leave-card__line-v--right { text-align: right; }
.leave-card__validators {
    font: 500 10.5px 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tc-ink-4);
    margin-bottom: 7px;
}
.leave-card-btn--block {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    font: 600 12.5px Inter;
    color: var(--lv-red);
    background: var(--tc-surface);
    border: 1px solid var(--lv-red-border);
    border-radius: 8px;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTE DES DEMANDES — `leave/index.html.twig`

   Panneaux (Absence / Congé / Récupération / Mes Titres) : filtres, grille de
   cartes, tuiles de synthèse et tableau des titres.
   ═══════════════════════════════════════════════════════════════════════════ */
.leave-page__title { font: 700 26px Inter; letter-spacing: -.02em; color: var(--tc-ink); }
.leave-page__subtitle { font: 400 14px Inter; color: var(--tc-ink-3); margin: 5px 0 22px; }

.leave-filter { display: flex; align-items: center; gap: 4px; background: var(--tc-surface-soft); border-radius: 9px; padding: 4px; }
.leave-filter__btn {
    font: 600 12.5px Inter;
    color: var(--tc-ink-3);
    padding: 6px 13px;
    border-radius: 7px;
    border: none;
    background: none;
    cursor: pointer;
}
.leave-filter__btn--on { color: var(--tc-on-primary); background: var(--tc-red); }
.leave-filter__period { display: flex; align-items: center; gap: 8px; }
.leave-filter__label { font: 600 12.5px Inter; color: var(--tc-ink-3); }
.leave-filter__select {
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    padding: 8px 11px;
    font: 500 13px Inter;
    color: var(--tc-ink-2);
    background: var(--tc-surface);
}
.leave-filter__search-wrap { display: flex; align-items: center; gap: 8px; background: var(--tc-surface-soft); border: 1px solid var(--tc-border); border-radius: 8px; padding: 8px 12px; }
.leave-filter__search { border: none; background: none; outline: none; font: 500 13px Inter; color: var(--tc-ink); width: 100%; }

.leave-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.overtime-card {
    min-width: 0;
    padding: 18px;
    overflow: hidden;
}
.overtime-card__header {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.overtime-card__date {
    display: flex;
    flex: 0 0 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-radius: 11px;
    background: var(--tc-surface-soft);
}
.overtime-card__day { font: 700 21px Inter; line-height: 1.1; color: var(--tc-ink); }
.overtime-card__month { margin-top: 3px; font: 600 10px Inter; color: var(--tc-ink-3); text-transform: uppercase; }
.overtime-card__info { flex: 1 1 auto; min-width: 0; }
.overtime-card__employee { overflow: hidden; font: 650 14px Inter; color: var(--tc-ink); text-overflow: ellipsis; white-space: nowrap; }
.overtime-card__period { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 5px; font: 500 12px Inter; color: var(--tc-ink-3); }
.overtime-card__hours { padding: 3px 8px; border-radius: 999px; background: var(--tc-red-bg); color: var(--tc-red); font: 700 11px Inter; white-space: nowrap; }
.overtime-card__cost { padding: 3px 8px; border-radius: 999px; background: var(--tc-green-bg); color: var(--tc-green-ink); font: 700 11px Inter; white-space: nowrap; }
.overtime-card__status { flex: 0 0 auto; max-width: 42%; padding: 6px 10px; border-radius: 999px; background: var(--tc-surface-soft); color: var(--tc-ink-2); font: 650 11px Inter; text-align: center; }
.overtime-card__status--approved { background: var(--tc-green-bg); color: var(--tc-green-ink); }
.overtime-card__status--rejected { background: var(--tc-red-bg); color: var(--tc-red); }
.overtime-card__status--pending_manager,
.overtime-card__status--pending_hr { background: var(--tc-amber-bg); color: var(--tc-amber-ink); }
.overtime-card__reason { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tc-border); font: 400 12.5px/1.55 Inter; color: var(--tc-ink-3); overflow-wrap: anywhere; }
.overtime-card__payroll-info { margin-top: 10px; font: 600 11.5px Inter; color: var(--tc-ink-3); }
.overtime-card__footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 15px; }
.overtime-card__link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--tc-border); border-radius: 8px; color: var(--tc-ink-2); font: 600 12px Inter; text-decoration: none; transition: background .12s, border-color .12s; }
.overtime-card__link:hover { background: var(--tc-red-subtle); border-color: var(--tc-red-border); color: var(--tc-accent-ink); }
.overtime-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--tc-border); }
.overtime-tabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tc-ink-3); font: 600 13px Inter; cursor: pointer; }
.overtime-tabs__tab:hover { color: var(--tc-ink); }
.overtime-tabs__tab.is-active { border-bottom-color: var(--tc-red); color: var(--tc-red); }
.overtime-tabs__count { padding: 2px 8px; border-radius: 999px; background: var(--tc-amber-bg); color: var(--tc-amber-ink); font: 700 11px Inter; }
.overtime-detail { max-width: 980px; margin: 0 auto; }
.overtime-detail__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--tc-ink-3); font: 600 13px Inter; text-decoration: none; }
.overtime-detail__back:hover { color: var(--tc-accent-ink); }
.overtime-detail__heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.overtime-detail__title { margin: 3px 0 0; color: var(--tc-ink); font: 700 27px Inter; letter-spacing: -.025em; }
.overtime-detail__subtitle { margin: 5px 0 0; color: var(--tc-ink-3); font: 400 14px Inter; }
.overtime-detail__summary { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; padding: 22px; border: 1px solid var(--tc-border); border-radius: 16px; background: var(--tc-surface); box-shadow: 0 5px 20px rgba(16,20,26,.035); }
.overtime-detail__date { display: flex; flex: 0 0 68px; flex-direction: column; align-items: center; justify-content: center; min-height: 72px; border-radius: 14px; background: var(--tc-red-subtle); color: var(--tc-accent-ink); }
.overtime-detail__date span { font: 750 27px/1 Inter; }
.overtime-detail__date small { margin-top: 5px; font: 700 10px Inter; text-transform: uppercase; }
.overtime-detail__summary-main { flex: 1; min-width: 0; }
.overtime-detail__eyebrow { display: block; margin-bottom: 6px; color: var(--tc-ink-4); font: 650 10px Inter; letter-spacing: .09em; text-transform: uppercase; }
.overtime-detail__hours { color: var(--tc-ink); font: 700 21px Inter; }
.overtime-detail__hours span { padding: 0 3px; color: var(--tc-ink-4); font-weight: 400; }
.overtime-detail__duration { margin-top: 5px; color: var(--tc-accent-ink); font: 700 13px Inter; }
.overtime-detail__cost { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--tc-border); }
.overtime-detail__cost-value { color: var(--tc-ink); font: 700 17px Inter; }
.overtime-detail__cost small { display: block; margin-top: 4px; color: var(--tc-ink-4); font: 500 11.5px/1.45 Inter; }
.overtime-detail__reason { flex: 0 1 36%; min-width: 180px; padding-left: 20px; border-left: 1px solid var(--tc-border); }
.overtime-detail__reason p { margin: 0; color: var(--tc-ink-2); font: 500 13px/1.55 Inter; overflow-wrap: anywhere; }
.overtime-detail__panel { margin-bottom: 18px; padding: 22px; border: 1px solid var(--tc-border); border-radius: 16px; background: var(--tc-surface); }
.overtime-detail__section-title { margin: 0 0 18px; color: var(--tc-ink); font: 700 15px Inter; }
.overtime-detail__timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.overtime-detail__step { position: relative; display: flex; gap: 11px; min-width: 0; }
.overtime-detail__step:not(:last-child)::after { position: absolute; top: 13px; left: 31px; width: calc(100% - 18px); height: 1px; background: var(--tc-border); content: ""; }
.overtime-detail__step-icon { z-index: 1; display: flex; flex: 0 0 27px; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid var(--tc-border); border-radius: 50%; background: var(--tc-surface); color: var(--tc-ink-4); font: 700 11px Inter; }
.overtime-detail__step--done .overtime-detail__step-icon { border-color: var(--tc-green-bg); background: var(--tc-green-bg); color: var(--tc-green-ink); }
.overtime-detail__step--current .overtime-detail__step-icon { border-color: var(--tc-amber-bg); background: var(--tc-amber-bg); color: var(--tc-amber-ink); }
.overtime-detail__step-content { min-width: 0; padding-top: 4px; }
.overtime-detail__step-content h3 { margin: 0 0 6px; color: var(--tc-ink-2); font: 650 12px Inter; }
.overtime-detail__step-content p,
.overtime-detail__step-content blockquote { margin: 0; color: var(--tc-ink-4); font: 400 11.5px/1.5 Inter; }
.overtime-detail__step-content blockquote { margin-top: 6px; color: var(--tc-ink-3); font-style: italic; }
.overtime-detail__payment { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--tc-surface-soft); }
.overtime-detail__payment strong { color: var(--tc-ink); font: 650 13px Inter; }
.overtime-detail__payslip { color: var(--tc-accent-ink); font: 650 12px Inter; text-decoration: none; }
.overtime-detail__rejection { margin-top: 18px; padding: 13px 15px; border-radius: 10px; background: var(--tc-red-subtle); color: var(--tc-danger-ink); font: 600 12px Inter; }
.overtime-detail__rejection p { margin: 5px 0 0; font-weight: 400; }
.overtime-detail__actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border: 1px solid var(--tc-border); border-radius: 16px; background: var(--tc-surface); }
.overtime-detail__actions h2 { margin: 0; color: var(--tc-ink); font: 650 14px Inter; }
.overtime-detail__buttons { display: flex; flex-wrap: wrap; gap: 9px; }
.overtime-action { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; font: 650 12px Inter; cursor: pointer; transition: filter .12s, background .12s; }
.overtime-action:hover { filter: brightness(.96); }
.overtime-action--approve { background: var(--tc-red); color: var(--tc-on-primary); }
.overtime-action--reject,
.overtime-action--delete { border-color: var(--tc-red-border); background: var(--tc-surface); color: var(--tc-danger-ink); }
.overtime-action--cancel { border-color: var(--tc-border); background: var(--tc-surface); color: var(--tc-ink-2); }
.overtime-confirm .modal-content { overflow: hidden; border: 1px solid var(--tc-border); border-radius: 16px; background: var(--tc-surface); }
.overtime-confirm__head { display: flex; align-items: flex-start; gap: 13px; padding: 22px 24px; border-bottom: 1px solid var(--tc-border); }
.overtime-confirm__icon { display: flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--tc-amber-bg); color: var(--tc-amber-ink); font: 800 18px Inter; }
.overtime-confirm__head h2 { margin: 0; color: var(--tc-ink); font: 700 16px Inter; }
.overtime-confirm__head p { margin: 5px 0 0; color: var(--tc-ink-3); font: 400 12.5px/1.5 Inter; }
.overtime-confirm__body { padding: 18px 24px 0; }
.overtime-confirm__body label { display: block; margin-bottom: 7px; color: var(--tc-ink-2); font: 650 12px Inter; }
.overtime-confirm__comment { width: 100%; padding: 10px 12px; border: 1px solid var(--tc-border); border-radius: 9px; background: var(--tc-surface); color: var(--tc-ink); font: 500 13px Inter; resize: vertical; }
.overtime-confirm__footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 24px; margin-top: 18px; border-top: 1px solid var(--tc-border); background: var(--tc-surface-soft); }
@media (max-width: 480px) {
    .leave-list { grid-template-columns: minmax(0, 1fr); }
    .overtime-card { padding: 14px; }
    .overtime-card__header { flex-wrap: wrap; }
    .overtime-card__status { max-width: 100%; margin-left: auto; }
    .overtime-detail__heading,
    .overtime-detail__summary,
    .overtime-detail__actions { align-items: flex-start; flex-direction: column; }
    .overtime-detail__reason { min-width: 0; padding: 13px 0 0; border-top: 1px solid var(--tc-border); border-left: 0; }
    .overtime-detail__timeline { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .overtime-detail__step:not(:last-child)::after { top: 29px; bottom: -14px; left: 13px; width: 1px; height: auto; }
    .overtime-detail__buttons { width: 100%; }
    .overtime-detail__buttons .overtime-action { flex: 1 1 auto; }
}
.leave-list__empty {
    grid-column: 1 / -1;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    padding: 40px;
    text-align: center;
    font: 500 13.5px Inter;
    color: var(--tc-ink-4);
}
.leave-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; }
.leave-summary--loose { margin-bottom: 22px; }

.leave-certificates { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 14px; overflow: hidden; }
.leave-certificates__row { display: flex; align-items: center; gap: 14px; padding: 15px 20px; }
/* Le filet n'est posé qu'entre deux lignes : sans lui, la première en aurait
   un aussi, sous le bord arrondi du conteneur. */
.leave-certificates__row--divided { border-top: 1px solid var(--tc-border); }
.leave-certificates__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--lv-red-bg);
    color: var(--lv-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.leave-certificates__body { flex: 1; min-width: 0; }
.leave-certificates__name { font: 600 13.5px Inter; color: var(--tc-ink); }
.leave-certificates__meta { font: 500 11.5px Inter; color: var(--tc-ink-3); }
.leave-certificates__right { flex: none; text-align: right; }
.leave-certificates__number { font: 600 11px 'JetBrains Mono', monospace; color: var(--tc-ink-4); }
.leave-certificates__date { font: 500 11.5px Inter; color: var(--tc-ink-3); }
.leave-certificates__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    font: 600 12px Inter;
    color: var(--tc-ink-2);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    text-decoration: none;
}

.leave-empty { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 14px; padding: 56px 24px; text-align: center; }
.leave-empty__icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--tc-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.leave-empty__title { font: 700 18px Inter; color: var(--tc-ink); margin-bottom: 7px; }
.leave-empty__body { font: 400 13.5px Inter; color: var(--tc-ink-3); max-width: 420px; margin: 0 auto 20px; }
.leave-btn--lg { padding: 11px 20px; font-size: 13.5px; }

/* Tuile de synthèse des panneaux (solde, en attente, titres). Seule la couleur
   de la valeur est écrite en ligne : `muted` vient de l'appelant, selon qu'il
   affiche une date ou un nombre. */
.leave-stat { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 14px; padding: 20px 22px; }
.leave-stat__value { font: 700 30px Inter; letter-spacing: -.02em; }
.leave-stat__label { font: 600 13px Inter; color: var(--tc-ink-2); margin-top: 4px; }
.leave-stat__hint { font: 500 12px Inter; color: var(--tc-ink-4); margin-top: 2px; }

/* ─── Grille : habillage de la page ───────────────────────────────────────
   La GÉOMÉTRIE (colonnes, placement d'une case, étendue d'une barre) est
   portée par des PROPRIÉTÉS PERSONNALISÉES écrites depuis le gabarit : le
   gabarit ne décrit plus la grille en CSS, il ne fournit que les nombres —
   `--lpc-days`, `--lpc-col`, `--lpc-span`. Une largeur de barre écrite en
   `grid-column` dans le gabarit était la seule règle que l'écran ne pouvait
   pas reprendre sur mobile. */
.planning-month-select { width: auto; }

/* Sélecteur de département. Le libellé est posé à gauche de la liste plutôt
   qu'au-dessus : la liste est basse et alignée sur les deux autres commandes de
   la barre d'outils, et un libellé au-dessus décalerait tout le monde d'une
   ligne pour un mot de deux syllabes. */
.planning-department-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.planning-department-form__label {
    font-size: 12px;
    color: var(--tc-ink-3);
    white-space: nowrap;
}

.planning-department-form__select { width: auto; min-width: 190px; }

/* Recherche par nom.
   Le dessin est celui de la recherche de la barre supérieure (`.app-search` :
   pastille arrondie, loupe, input sans bordure) — une page qui cherche ne
   doit pas avoir l'air d'une autre. Ce que la composante ne règle pas est
   repris ici : elle est `display: none` hors des barres de filtres, et c'est
   sa largeur qui décide de la place qu'elle prend dans celle du planning. */
.planning-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 250px;
    max-width: 100%;
    /* La hauteur est CALCÉE, pas choisie : 5px + 13px×1,4 + 5px + les deux
       bordures donnent la même hauteur que le `form-select-sm` d'à côté. Une
       barre d'outils dont les contrôles n'ont pas la même hauteur se voit
       avant même qu'on la regarde. */
    padding: 5px 14px;
    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: 999px;
    transition: border-color .15s ease;
}
.planning-search__icon {
    flex: none;
    color: var(--tc-ink-4);
    transition: color .15s ease;
}
/* Le focus est porté par la MARQUE (`:focus-within` : c'est le conteneur qui
   l'encadre, pas le champ seul), et la loupe se teinte du même ton — le
   champ entier semble alors réveillé, et pas seulement son curseur clignotant. */
.planning-search:focus-within { border-color: var(--tc-accent-ink); }
.planning-search:focus-within .planning-search__icon { color: var(--tc-accent-ink); }
.planning-search__input {
    min-width: 0;
    width: 100%;
    border: none;
    background: none;
    outline: none;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tc-ink);
}
.planning-search__input::placeholder { color: var(--tc-ink-4); }

/* Aucun nom ne correspond. Plein cadre dans la grille : une ligne vide
   laisserait croire qu'il n'y a personne à suivre dans le service. */
.planning-calendar-empty {
    padding: 48px 16px;
    text-align: center;
    font: 500 13px Inter;
    color: var(--tc-ink-4);
}

/* Alerte de chevauchement, éclatée par département. */
.planning-alert {
    background: var(--tc-red-subtle);
    border: 1px solid var(--tc-red-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.planning-alert__icon { margin-top: 2px; }
.planning-alert__title { font-size: 13.5px; color: var(--tc-red); }
.planning-alert__body { font-size: 12.5px; color: var(--tc-ink-2); }
.planning-alert__group {
    background: var(--tc-surface);
    border: 1px solid var(--tc-red-border);
    border-radius: 8px;
    padding: 10px 12px;
}
.planning-alert__dept { font-size: 12.5px; color: var(--tc-ink); }
.planning-alert__day {
    font-size: 11px;
    color: var(--tc-red);
    background: var(--tc-red-subtle);
    border-radius: 5px;
    padding: 1px 6px;
}
.planning-alert__day-count { opacity: .8; }
.planning-alert__names { font-size: 11.5px; color: var(--tc-ink-2); margin-top: 4px; }

/* Barre de sélection d'une plage. */
.planning-selection__summary { font-size: 13.5px; }
.planning-selection__hint { font-size: 12px; }
.planning-selection__pending { color: var(--tc-primary, #0B5ED7); }

/* Plage irrecevable : le résumé s'excuse de ne pas s'ouvrir. La couleur est
   celle du refus partout ailleurs dans l'application — une plage qui recouvre
   un congé déjà pris n'est pas une plage autorisée, c'est un refus. */
.planning-selection__summary--blocked { color: var(--tc-red); }

/* Infobulle de la sélection : période, durée, repos écartés, refus.
   Elle vit dans le `body` — elle suit la case sous le pointeur, hors de la
   grille — et ne reçoit aucun pointeur : `pointer-events: none` garantit
   qu'elle n'interrompt jamais un glisser. */
.planning-select-tip {
    position: fixed;
    z-index: 1090;
    max-width: 280px;
    background: var(--tc-surface, #fff);
    color: var(--tc-ink, #31343C);
    border: 1px solid var(--tc-border, #E4E7EC);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 20, 26, .16);
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    pointer-events: none;
}
.planning-select-tip[hidden] { display: none; }
.planning-select-tip__row { white-space: nowrap; }
.planning-select-tip__row--muted { color: var(--tc-ink-3); font-size: 11.5px; }
.planning-select-tip__row--block {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--tc-border, #E4E7EC);
    color: var(--tc-red);
    font-weight: 600;
    white-space: normal;
}

.planning-legend__item { font-size: 12px; }
.planning-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

.planning-calendar-head {
    display: grid;
    grid-template-columns: 220px repeat(var(--lpc-days), minmax(30px, 1fr));
    border-bottom: 1px solid var(--tc-border);
}
.planning-calendar-head__corner { padding: 10px 14px; display: flex; align-items: center; }
.planning-calendar-head__day { padding: 6px 2px; }
.planning-calendar-head__letter { font-size: 9px; }
.planning-calendar-head__letter--muted { opacity: .55; }
.planning-calendar-head__num { font-size: 11px; }

.planning-calendar-row {
    display: grid;
    grid-template-columns: 220px repeat(var(--lpc-days), minmax(30px, 1fr));
}
.planning-calendar-row--divided { border-bottom: 1px solid var(--tc-border); }
.planning-calendar-row__identity { padding: 10px 14px; min-width: 0; }
.planning-calendar-row__avatar { width: 28px; height: 28px; font-size: 10px; flex: none; }
.planning-calendar-row__who { min-width: 0; }
.planning-calendar-row__name { font-size: 12.5px; }
.planning-calendar-row__role { font-size: 11px; }

/* Une case du mois : le gabarit ne donne que sa colonne. */
.planning-calendar-day { grid-column: var(--lpc-col); grid-row: 1 / -1; align-self: stretch; }

/* Une barre d'absence : même principe, plus sa couleur de type. */
.planning-calendar-bar {
    grid-column: var(--lpc-col) / span var(--lpc-span);
    grid-row: 1 / -1;
    align-self: center;
    height: 24px;
    border-radius: 6px;
    background: var(--lpc-bar-color);
    font-size: 10.5px;
    padding: 0 6px;
    margin: 0 2px;
    cursor: pointer;
    z-index: 1;
}

/* Carte « Planifier mon congé ». */
.planning-plan__icon { width: 34px; height: 34px; border-radius: 10px; }
.planning-plan__title { font-size: 14px; }
.planning-plan__subtitle { font-size: 12px; }
.planning-plan__label { font-size: 12.5px; }
.planning-plan__date { width: 160px; }
.planning-plan__info { font-size: 12px; }
.planning-plan__note { font-size: 11.5px; }

/* Modale de détail d'une absence, ouverte depuis une barre de la grille. */
.planning-detail__caption { text-transform: uppercase; }
.planning-detail__value { font-size: 13.5px; }
.planning-detail__reason { font-size: 13.5px; white-space: pre-line; color: var(--tc-ink-2); }