/*
 * Styles propres aux ecrans metier : tableau de bord, tableau des plannings,
 * audit, contrats et documents.
 */

/* Tableau de bord -------------------------------------------------------- */

.hero {
    display: flex;
    align-items: center;
    gap: var(--rh-space-5);
    flex-wrap: wrap;
    padding: var(--rh-space-6);
    border: 1px solid var(--rh-primary-line);
    border-radius: var(--rh-radius-lg);
    background:
        radial-gradient(600px 200px at 100% 0%, var(--rh-primary-soft) 0%, transparent 70%),
        var(--rh-surface);
    box-shadow: var(--rh-shadow-sm);
}

.hero-mark {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    background-image: var(--rh-logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.hero-identity {
    display: flex;
    align-items: center;
    gap: var(--rh-space-3);
    margin-bottom: var(--rh-space-2);
}

.hero-identity .page-eyebrow {
    margin: 0;
}

.hero-copy {
    flex: 1 1 28rem;
    min-width: min(100%, 20rem);
}

.hero-copy h1 {
    margin-bottom: var(--rh-space-2);
}

.hero-copy p {
    max-width: 68ch;
    margin: 0;
    color: var(--rh-muted);
}

/* Tableau des plannings -------------------------------------------------- */

.board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--rh-space-4);
}

.board-day {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-lg);
    background: var(--rh-surface);
    box-shadow: var(--rh-shadow-sm);
}

.board-day > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rh-space-2);
    padding: var(--rh-space-3) var(--rh-space-4);
    border-bottom: 1px solid var(--rh-line);
    background: var(--rh-surface-muted);
}

.board-weekday {
    color: var(--rh-ink);
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: capitalize;
}

.board-date {
    color: var(--rh-muted);
    font-family: var(--rh-font-mono);
    font-size: 0.76rem;
    font-weight: 600;
}

.board-day-body {
    display: grid;
    gap: var(--rh-space-2);
    padding: var(--rh-space-3);
}

/* Une affectation. La couleur du poste est injectee en style inline sur
   `--entry-color` : la barre laterale et la pastille la reprennent, ce qui
   evite une regle CSS par poste. */
.entry {
    --entry-color: var(--rh-primary);

    display: grid;
    gap: var(--rh-space-1);
    padding: var(--rh-space-3);
    border: 1px solid var(--rh-line);
    border-left: 3px solid var(--entry-color);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface-muted);
}

.entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rh-space-2);
}

.entry-post {
    color: var(--rh-ink);
    font-size: 0.86rem;
    font-weight: 650;
}

.entry-hours {
    color: var(--rh-ink-soft);
    font-family: var(--rh-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.entry-who {
    color: var(--rh-ink-soft);
    font-size: 0.84rem;
}

.entry-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rh-space-2);
    margin-top: var(--rh-space-1);
    color: var(--rh-muted);
    font-size: 0.74rem;
}

.entry-foot a {
    font-size: 0.76rem;
}

/* Nature de l'affectation. Les fonds restent tres desaturés pour ne pas
   concurrencer la couleur du poste. */

.entry-absence,
.entry-vacant {
    border-top-color: var(--rh-warning-line);
    border-right-color: var(--rh-warning-line);
    border-bottom-color: var(--rh-warning-line);
    background: var(--rh-warning-soft);
}

.entry-holiday_worked {
    border-top-color: var(--rh-accent-line);
    border-right-color: var(--rh-accent-line);
    border-bottom-color: var(--rh-accent-line);
    background: var(--rh-accent-soft);
}

.entry-holiday_not_worked {
    border-top-color: var(--rh-line-strong);
    border-right-color: var(--rh-line-strong);
    border-bottom-color: var(--rh-line-strong);
    background: var(--rh-surface-strong);
    opacity: 0.85;
}

.entry-vacant .entry-who {
    color: var(--rh-warning);
    font-weight: 650;
}

.board-day-empty {
    padding: var(--rh-space-4) var(--rh-space-3);
    color: var(--rh-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Legende du tableau. */

.legend {
    display: flex;
    align-items: center;
    gap: var(--rh-space-4);
    flex-wrap: wrap;
    color: var(--rh-muted);
    font-size: 0.8rem;
}

.legend > span {
    display: inline-flex;
    align-items: center;
    gap: var(--rh-space-2);
    font-weight: 600;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border: 1px solid var(--rh-line-strong);
    border-radius: 3px;
}

.color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--rh-space-2);
    border: 1px solid var(--rh-line-strong);
    border-radius: 3px;
    vertical-align: -2px;
}

/* Compteurs d'anomalies -------------------------------------------------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--rh-space-3);
}

.stat {
    display: grid;
    gap: 2px;
    padding: var(--rh-space-3) var(--rh-space-4);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-surface-muted);
}

.stat-value {
    color: var(--rh-ink);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stat-label {
    color: var(--rh-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stat-blocking {
    border-color: var(--rh-danger-line);
    background: var(--rh-danger-soft);
}

.stat-blocking .stat-value,
.stat-blocking .stat-label {
    color: var(--rh-danger);
}

.stat-warning {
    border-color: var(--rh-warning-line);
    background: var(--rh-warning-soft);
}

.stat-warning .stat-value,
.stat-warning .stat-label {
    color: var(--rh-warning);
}

.stat-information {
    border-color: var(--rh-info-line);
    background: var(--rh-info-soft);
}

.stat-information .stat-value,
.stat-information .stat-label {
    color: var(--rh-info);
}

/* Anomalies d'audit ------------------------------------------------------ */

/* La severite est portee par une barre laterale plutot qu'un fond colore :
   sur un tableau dense, quatre lignes rouges pleines rendent le texte
   illisible et masquent le survol. */
tr.severity-blocking td:first-child {
    box-shadow: inset 3px 0 0 var(--rh-danger);
}

tr.severity-warning td:first-child {
    box-shadow: inset 3px 0 0 var(--rh-warning);
}

tr.severity-information td:first-child {
    box-shadow: inset 3px 0 0 var(--rh-info);
}

.finding-message {
    max-width: 34rem;
    white-space: normal;
}

.finding-values {
    display: grid;
    gap: 2px;
    font-family: var(--rh-font-mono);
    font-size: 0.78rem;
}

.finding-values span:first-child {
    color: var(--rh-muted);
}

/* Rappel juridique / donnee sensible ------------------------------------- */

.callout {
    display: grid;
    gap: var(--rh-space-2);
    padding: var(--rh-space-4);
    border: 1px solid var(--rh-warning-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-warning-soft);
}

.callout strong {
    color: color-mix(in srgb, var(--rh-warning) 82%, var(--rh-ink));
}

.callout p {
    margin: 0;
    color: var(--rh-ink-soft);
    font-size: 0.86rem;
}

.callout-danger {
    border-color: var(--rh-danger-line);
    background: var(--rh-danger-soft);
}

.callout-danger strong {
    color: color-mix(in srgb, var(--rh-danger) 82%, var(--rh-ink));
}

/* Valeur secrete affichee une seule fois (clef TOTP, codes de secours). */

.secret-value {
    display: block;
    padding: var(--rh-space-3) var(--rh-space-4);
    border: 1px solid var(--rh-line-strong);
    border-radius: var(--rh-radius-md);
    background: var(--rh-surface-muted);
    color: var(--rh-ink);
    font-family: var(--rh-font-mono);
    font-size: 1rem;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
    text-align: center;
}

.code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--rh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.code-grid li {
    padding: var(--rh-space-3);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface-muted);
    font-family: var(--rh-font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-align: center;
}

/* Etapes numerotees (enrolement TOTP). */

.steps {
    display: grid;
    gap: var(--rh-space-3);
    margin: 0;
    padding: 0;
    counter-reset: step;
    list-style: none;
}

.steps > li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: var(--rh-space-3);
    align-items: start;
    color: var(--rh-ink-soft);
    font-size: 0.88rem;
}

.steps > li::before {
    display: grid;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
    content: counter(step);
    counter-increment: step;
    font-size: 0.78rem;
    font-weight: 700;
    place-items: center;
}

/* Liste de fichiers produits (Word, apercu PDF, PDF definitif). */

.file-links {
    display: flex;
    align-items: center;
    gap: var(--rh-space-2);
    flex-wrap: wrap;
}

.file-link {
    display: inline-flex;
    align-items: center;
    gap: var(--rh-space-1);
    padding: 2px var(--rh-space-2);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-sm);
    background: var(--rh-surface-muted);
    color: var(--rh-ink-soft);
    font-size: 0.78rem;
    font-weight: 620;
    text-decoration: none;
}

.file-link:hover {
    border-color: var(--rh-primary-line);
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
}

/* Apercu de generation --------------------------------------------------- */

/* Liste compacte des salariés ------------------------------------------- */

.employee-list-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--rh-space-4);
    padding: var(--rh-space-4);
    border-bottom: 1px solid var(--rh-line);
}

.employee-list-toolbar h2,
.employee-list-toolbar p {
    margin: 0;
}

.employee-search {
    width: min(20rem, 100%);
}

.employee-search input {
    width: 100%;
}

/* Filtres cumulables de la liste des salariés (retour MOA 07/09/2026). */
.employee-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rh-space-2);
    padding: var(--rh-space-2) var(--rh-space-4);
    border-bottom: 1px solid var(--rh-line);
}

.employee-filter-chip[aria-pressed="true"] {
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
    box-shadow: inset 0 0 0 1px var(--rh-primary-line);
}

.employee-table tbody td {
    padding-top: var(--rh-space-2);
    padding-bottom: var(--rh-space-2);
}

.table-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--rh-space-1);
    margin: calc(-1 * var(--rh-space-2));
    padding: var(--rh-space-2);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.table-sort:hover,
.table-sort:focus-visible {
    color: var(--rh-primary);
}

.table-sort-indicator {
    width: 1em;
    color: var(--rh-muted);
    font-size: 0.9em;
    text-align: center;
}

.employee-row {
    cursor: pointer;
}

.employee-row:focus-visible {
    outline: 2px solid var(--rh-primary);
    outline-offset: -2px;
}

.employee-name {
    color: var(--rh-ink);
    font-weight: 700;
    text-decoration: none;
}

.employee-name:hover {
    color: var(--rh-primary);
    text-decoration: underline;
}

.quick-data-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--rh-primary);
    font-weight: 750;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--rh-primary) 35%, transparent);
    text-underline-offset: 2px;
}

.quick-data-link:hover,
.quick-data-link:focus-visible {
    color: var(--rh-primary-hover);
    text-decoration-color: currentColor;
}

.quick-data-link small,
.quick-data-missing {
    display: block;
    margin-top: 2px;
    color: var(--rh-muted);
    font-size: 0.68rem;
    font-weight: 500;
    text-decoration: none;
}

.employee-table .text-muted {
    color: var(--rh-muted);
}

.quick-view-dialog {
    width: min(70rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--rh-line-strong);
    border-radius: var(--rh-radius-lg);
    background: var(--rh-surface);
    color: var(--rh-ink);
    box-shadow: var(--rh-shadow-lg);
}

.quick-view-dialog::backdrop {
    background: rgb(15 23 42 / 55%);
    backdrop-filter: blur(2px);
}

.quick-view-shell {
    position: relative;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.quick-view-close {
    position: absolute;
    top: var(--rh-space-3);
    right: var(--rh-space-3);
    z-index: 2;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--rh-line);
    border-radius: 50%;
    background: var(--rh-surface);
    color: var(--rh-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    place-items: center;
}

.quick-view-close:hover,
.quick-view-close:focus-visible {
    border-color: var(--rh-primary-line);
    color: var(--rh-primary);
}

.quick-view-header {
    padding: var(--rh-space-5) 4rem var(--rh-space-3) var(--rh-space-5);
    border-bottom: 1px solid var(--rh-line);
    background: var(--rh-surface-muted);
}

.quick-view-header .page-eyebrow {
    margin-bottom: var(--rh-space-1);
}

.quick-view-header h2,
.quick-view-header p,
.quick-view-titleline h3,
.quick-view-titleline p,
.quick-view-notes p {
    margin: 0;
}

.quick-view-header h2 {
    font-size: 1.25rem;
}

.quick-view-header > p:last-child,
.quick-view-titleline p {
    margin-top: 3px;
    color: var(--rh-muted);
    font-size: 0.78rem;
}

.quick-view-switcher {
    display: grid;
    grid-template-columns: auto minmax(12rem, 28rem) auto;
    justify-content: center;
    gap: var(--rh-space-2);
    padding: var(--rh-space-3) var(--rh-space-5) 0;
}

.quick-view-switcher select {
    min-height: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.quick-view-panel {
    padding: var(--rh-space-4) var(--rh-space-5);
}

.quick-view-titleline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rh-space-3);
    margin-bottom: var(--rh-space-3);
}

.quick-view-titleline h3 {
    font-size: 1rem;
}

.quick-view-badges {
    display: flex;
    justify-content: flex-end;
    gap: var(--rh-space-2);
    flex-wrap: wrap;
}

.quick-view-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-line);
}

.quick-view-data > div {
    padding: var(--rh-space-3);
    background: var(--rh-surface);
}

.quick-view-data dt {
    margin-bottom: 3px;
    color: var(--rh-muted);
    font-size: 0.7rem;
}

.quick-view-data dd {
    margin: 0;
}

.quick-view-notes {
    margin-top: var(--rh-space-3);
    padding: var(--rh-space-3);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-surface-muted);
}

.quick-view-notes p {
    margin-top: var(--rh-space-1);
    color: var(--rh-ink-soft);
}

.schedule-quick-scroll {
    overflow-x: auto;
}

.schedule-quick-table {
    width: 100%;
    min-width: 760px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.72rem;
}

.schedule-quick-table th,
.schedule-quick-table td {
    padding: 5px 3px;
    border: 1px solid var(--rh-line);
    border-radius: 4px;
    text-align: center;
}

.schedule-quick-table thead th {
    background: var(--rh-surface-muted);
    color: var(--rh-ink);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.schedule-quick-table thead th:first-child,
.schedule-quick-table tbody th {
    width: 74px;
}

.schedule-quick-table tbody th {
    background: var(--rh-surface-muted);
    color: var(--rh-ink-soft);
    font-size: 0.66rem;
}

.schedule-quick-table td.is-worked {
    border-color: var(--rh-success-line);
    background: var(--rh-success-soft);
    color: var(--rh-success);
}

.schedule-quick-table td.is-rest {
    background: var(--rh-surface-muted);
    color: var(--rh-muted);
    font-size: 0.62rem;
    line-height: 1.1;
}

.schedule-quick-table .is-sunday {
    box-shadow: inset 0 0 0 1px var(--rh-primary-line);
}

.schedule-quick-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rh-space-2);
    margin-top: var(--rh-space-3);
}

.schedule-quick-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rh-space-2);
    padding: var(--rh-space-3);
    border: 1px solid var(--rh-line);
    border-radius: var(--rh-radius-md);
    background: var(--rh-surface-muted);
}

.schedule-quick-totals span {
    color: var(--rh-muted);
    font-size: 0.72rem;
}

.schedule-quick-totals .is-balanced {
    border-color: var(--rh-success-line);
    background: var(--rh-success-soft);
}

.schedule-quick-totals .has-difference {
    border-color: var(--rh-warning-line);
    background: var(--rh-warning-soft);
}

.quick-view-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rh-space-3);
    padding: var(--rh-space-3) var(--rh-space-5);
    border-top: 1px solid var(--rh-line);
    color: var(--rh-muted);
    font-size: 0.72rem;
}

.quick-view-loading,
.quick-view-error,
.quick-view-empty {
    padding: var(--rh-space-7);
    text-align: center;
}

@media (max-width: 640px) {
    .quick-view-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .quick-view-data,
    .schedule-quick-totals {
        grid-template-columns: 1fr;
    }

    .quick-view-titleline,
    .quick-view-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .quick-view-badges {
        justify-content: flex-start;
    }
}

.completion {
    display: grid;
    grid-template-columns: 3.25rem minmax(4.5rem, 7rem);
    align-items: center;
    gap: var(--rh-space-2);
    width: max-content;
}

.completion-value {
    color: var(--rh-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-align: right;
}

.completion-track {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--rh-line);
}

.completion-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--rh-danger);
}

.completion-partial .completion-track > span { background: var(--rh-warning); }
.completion-complete .completion-track > span { background: var(--rh-success); }

.employee-completeness-note {
    margin: 0;
    padding: var(--rh-space-3) var(--rh-space-4);
    border-top: 1px solid var(--rh-line);
    color: var(--rh-muted);
    font-size: 0.78rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Planning annuel des absences ------------------------------------------ */

.absence-calendar-panel {
    padding: 0;
    overflow: hidden;
}

.employee-contract-filter {
    display: grid;
    gap: var(--rh-space-2);
    margin-bottom: var(--rh-space-4);
}

.employee-contract-filter .button { justify-self: start; }
.employee-contract-filter .section-hint { max-width: 46rem; margin: 0; }

.absence-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--rh-space-4);
    padding: var(--rh-space-4);
    border-bottom: 1px solid var(--rh-line);
}

.absence-period-nav,
.absence-filters,
.absence-legend {
    display: flex;
    align-items: center;
    gap: var(--rh-space-2);
}

.absence-period-nav > div {
    display: grid;
    min-width: 13rem;
    text-align: center;
}

.absence-period-nav strong {
    color: var(--rh-ink);
    font-size: 0.9rem;
}

.absence-filters {
    align-items: end;
    flex-wrap: wrap;
}

.absence-filters .field {
    gap: var(--rh-space-1);
    min-width: 13rem;
}

.absence-filters select {
    min-height: 34px;
    padding-top: var(--rh-space-1);
    padding-bottom: var(--rh-space-1);
}

.absence-legend {
    padding: var(--rh-space-2) var(--rh-space-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--rh-line);
    color: var(--rh-ink-soft);
    font-size: 0.76rem;
    white-space: nowrap;
}

.absence-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.absence-legend small { color: var(--rh-muted); }

.absence-swatch,
.calendar-key {
    display: inline-block;
    width: 18px;
    height: 10px;
    border: 1px solid var(--rh-line-strong);
    border-radius: 3px;
}

.absence-paid { background: var(--rh-primary-soft); color: var(--rh-primary); border-color: var(--rh-primary-line); }
.absence-medical { background: var(--rh-danger-soft); color: var(--rh-danger); border-color: var(--rh-danger-line); }
.absence-training { background: var(--rh-info-soft); color: var(--rh-info); border-color: var(--rh-info-line); }
.absence-recovery { background: var(--rh-success-soft); color: var(--rh-success); border-color: var(--rh-success-line); }
.absence-other { background: var(--rh-warning-soft); color: var(--rh-warning); border-color: var(--rh-warning-line); }
.absence-alternance-school { background: var(--rh-alternance-soft); color: var(--rh-alternance); border-color: var(--rh-alternance-line); }
.absence-alternance-company {
    border-color: color-mix(in srgb, var(--rh-alternance-line) 62%, var(--rh-info-line));
    background: color-mix(in srgb, var(--rh-alternance-soft) 68%, var(--rh-info-soft));
    color: color-mix(in srgb, var(--rh-alternance) 72%, var(--rh-info));
}
.calendar-key-weekend { background: var(--rh-surface-strong); }
.calendar-key-holiday { background: repeating-linear-gradient(135deg, var(--rh-warning-soft) 0 3px, var(--rh-surface) 3px 6px); }
.calendar-key-today { border: 2px solid var(--rh-primary); background: var(--rh-primary-soft); }

.annual-calendar-scroll {
    max-height: min(68vh, 48rem);
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

.annual-calendar {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.72rem;
}

.annual-calendar th,
.annual-calendar td {
    box-sizing: border-box;
    border-right: 1px solid var(--rh-line);
    border-bottom: 1px solid var(--rh-line);
}

.annual-calendar thead th {
    position: sticky;
    z-index: 4;
    height: 28px;
    padding: 3px 0;
    background: var(--rh-surface-muted);
    text-align: center;
}

.calendar-months th {
    top: 0;
    height: 29px;
    color: var(--rh-ink-soft);
    letter-spacing: 0.02em;
    text-transform: none;
}

.calendar-days th {
    top: 29px;
    width: 27px;
    min-width: 27px;
    color: var(--rh-muted);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.annual-calendar .calendar-employee-head {
    left: 0;
    z-index: 7;
    width: 190px;
    min-width: 190px;
    padding-left: var(--rh-space-3);
    text-align: left;
}

.annual-calendar tbody .calendar-employee {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 190px;
    min-width: 190px;
    height: 29px;
    padding: 3px var(--rh-space-3);
    background: var(--rh-surface);
    color: var(--rh-ink);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.calendar-cell {
    position: relative;
    width: 27px;
    min-width: 27px;
    height: 29px;
    padding: 2px;
    background: var(--rh-surface);
}

.annual-calendar .is-weekend { background: var(--rh-surface-strong); }
.annual-calendar .is-holiday { background: repeating-linear-gradient(135deg, var(--rh-warning-soft) 0 3px, var(--rh-surface) 3px 6px); }
.annual-calendar .is-today { box-shadow: inset 2px 0 var(--rh-primary), inset -2px 0 var(--rh-primary); }

.calendar-add-absence {
    display: grid;
    width: 100%;
    height: 23px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: transparent;
    font-size: 0.8rem;
    font-weight: 800;
    place-items: center;
    text-decoration: none;
}

.calendar-cell:hover .calendar-add-absence,
.calendar-add-absence:focus-visible {
    border-color: var(--rh-primary-line);
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
    outline: none;
}

.absence-block {
    display: grid;
    width: 100%;
    height: 23px;
    border: 1px solid;
    border-radius: 3px;
    font-size: 0.61rem;
    font-weight: 800;
    line-height: 1;
    place-items: center;
    text-decoration: none;
}

.absence-block:hover,
.absence-block:focus-visible {
    position: relative;
    z-index: 2;
    filter: saturate(1.25);
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.absence-block sup {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 0.48rem;
}

.absence-help {
    margin: 0;
    padding: var(--rh-space-2) var(--rh-space-4);
    color: var(--rh-muted);
    font-size: 0.76rem;
}

/* Vue principale du planning hebdomadaire ------------------------------- */

.weekly-planning-panel {
    padding: 0;
    overflow: hidden;
}

.week-toolbar,
.planning-summary,
.planning-week-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rh-space-3);
    padding: var(--rh-space-3) var(--rh-space-4);
    border-bottom: 1px solid var(--rh-line);
}

.week-navigation,
.week-jump,
.week-jump form,
.planning-summary > div,
.planning-alert-counts,
.planning-week-legend {
    display: flex;
    align-items: center;
    gap: var(--rh-space-2);
}

.week-navigation > strong {
    display: grid;
    min-width: 14rem;
    color: var(--rh-ink);
    font-size: 0.92rem;
    text-align: center;
}

.week-navigation > strong > span {
    color: var(--rh-primary);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.week-jump {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.week-jump form label {
    color: var(--rh-ink-soft);
    font-size: 0.76rem;
    font-weight: 650;
}

.week-jump input[type="date"] {
    width: 9.3rem;
    min-height: 34px;
    padding-top: var(--rh-space-1);
    padding-bottom: var(--rh-space-1);
}

.planning-summary {
    padding-top: var(--rh-space-2);
    padding-bottom: var(--rh-space-2);
    background: var(--rh-surface-muted);
}

.weekly-table-scroll {
    max-height: calc(100vh - 290px);
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}

.planning-day-headings th {
    position: sticky;
    top: 0;
    z-index: 4;
}

.planning-half-headings th {
    position: sticky;
    top: 43px;
    z-index: 4;
}

.weekly-planning-table {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
    font-size: 0.73rem;
}

.weekly-planning-table thead th {
    padding: var(--rh-space-2);
    text-align: center;
}

.weekly-planning-table .planning-day-headings > th:first-child {
    width: 165px;
    text-align: left;
}

.planning-half-headings th {
    padding: 3px 1px;
    color: var(--rh-muted);
    font-size: 0.56rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.weekly-planning-table thead th > span,
.weekly-planning-table thead th > strong,
.weekly-planning-table thead th > small {
    display: block;
}

.weekly-planning-table thead th > strong {
    color: var(--rh-ink);
    font-size: 0.77rem;
}

.weekly-planning-table thead th > small {
    color: var(--rh-primary);
    font-size: 0.58rem;
    letter-spacing: 0;
    text-transform: none;
}

.weekly-planning-table tbody th {
    padding: var(--rh-space-2) var(--rh-space-3);
    border-bottom: 1px solid var(--rh-line);
    color: var(--rh-ink);
    vertical-align: top;
    text-align: left;
}

.weekly-planning-table tbody th > span {
    display: inline-grid;
    margin-left: var(--rh-space-1);
}

.weekly-planning-table .planning-family-row th {
    position: static;
    padding: 4px var(--rh-space-3);
    border-top: 2px solid color-mix(in srgb, var(--family-color) 70%, var(--rh-line-strong));
    border-bottom: 1px solid color-mix(in srgb, var(--family-color) 55%, var(--rh-line));
    background: color-mix(in srgb, var(--family-color) 22%, var(--rh-surface));
    color: var(--rh-ink);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.weekly-planning-table .planning-family-row th span {
    display: block;
    margin: 0;
}

.weekly-planning-table .planning-post-row th {
    padding-left: var(--rh-space-4);
}

.weekly-planning-table tbody th small {
    color: var(--rh-muted);
    font-family: var(--rh-font-mono);
    font-size: 0.62rem;
}

.post-color-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-top: 3px;
    border: 1px solid color-mix(in srgb, var(--post-color) 70%, var(--rh-ink));
    border-radius: 50%;
    background: var(--post-color);
    vertical-align: top;
}

.weekly-planning-table tbody td {
    height: 42px;
    padding: 3px;
    border-left: 1px solid var(--rh-line);
    vertical-align: top;
}

.weekly-planning-table tbody td:nth-of-type(2n) {
    border-right: 2px solid var(--rh-line-strong);
}

.weekly-planning-table .is-today {
    background: color-mix(in srgb, var(--rh-primary-soft) 72%, var(--rh-surface));
    box-shadow: inset 2px 0 var(--rh-primary), inset -2px 0 var(--rh-primary);
}

.planning-assignment {
    display: grid;
    gap: 1px;
    min-height: 23px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--post-color) 45%, var(--rh-line));
    border-left: 4px solid var(--post-color);
    border-radius: var(--rh-radius-sm);
    background: color-mix(in srgb, var(--post-color) 12%, var(--rh-surface));
    color: var(--rh-ink);
    line-height: 1.2;
    text-decoration: none;
}

.planning-assignment + .planning-assignment {
    margin-top: 3px;
}

a.planning-assignment:hover,
a.planning-assignment:focus-visible {
    border-color: var(--post-color);
    box-shadow: var(--rh-shadow-sm);
    outline: none;
}

.assignment-time {
    color: var(--rh-ink-soft);
    font-family: var(--rh-font-mono);
    font-size: 0.61rem;
}

.planning-assignment strong {
    overflow-wrap: anywhere;
    font-size: 0.58rem;
    line-height: 1.15;
}

.planning-assignment strong span {
    font-size: 0.54rem;
}

.planning-assignment small {
    color: var(--rh-muted);
    font-size: 0.6rem;
}

.weekly-planning-table .planning-assignment.entry-vacant {
    border-color: var(--rh-danger-line);
    border-left-color: var(--rh-danger);
    background: var(--rh-danger-soft);
    color: var(--rh-danger);
}

.weekly-planning-table .planning-assignment.entry-absence {
    border-color: var(--rh-warning-line);
    border-left-color: var(--rh-warning);
    background: var(--rh-warning-soft);
    color: var(--rh-warning);
}

.weekly-planning-table .planning-assignment.entry-holiday_not_worked {
    border-color: var(--rh-line-strong);
    border-left-color: var(--rh-muted);
    background: var(--rh-surface-strong);
    opacity: 0.8;
}

.planning-empty-cell {
    display: block;
    padding-top: var(--rh-space-2);
    color: var(--rh-line-strong);
    text-align: center;
}

.planning-add-slot {
    display: grid;
    min-height: 18px;
    margin-top: 2px;
    border: 1px dashed transparent;
    border-radius: 3px;
    color: transparent;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    place-items: center;
    text-decoration: none;
}

.planning-slot:hover .planning-add-slot,
.planning-add-slot:focus-visible {
    border-color: var(--rh-primary-line);
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
    outline: none;
}

.planning-slot > .planning-add-slot:first-child:last-child {
    height: 100%;
    min-height: 34px;
    margin-top: 0;
}

.planning-week-legend {
    justify-content: flex-start;
    overflow-x: auto;
    border-top: 1px solid var(--rh-line);
    border-bottom: 0;
    color: var(--rh-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.planning-week-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.planning-week-legend i {
    display: inline-block;
    width: 16px;
    height: 9px;
    border: 1px solid var(--rh-line-strong);
    border-radius: 2px;
}

.legend-post { border-left: 4px solid var(--rh-primary) !important; background: var(--rh-primary-soft); }
.legend-vacant { border-color: var(--rh-danger-line) !important; background: var(--rh-danger-soft); }
.legend-absence { border-color: var(--rh-warning-line) !important; background: var(--rh-warning-soft); }
.legend-holiday { background: var(--rh-surface-strong); }

/* Densité élevée de la vue hebdomadaire. */
.planning-page-header {
    align-items: center;
    gap: var(--rh-space-2);
}

.planning-page-header .page-eyebrow,
.planning-page-header .page-lead {
    display: none;
}

.planning-page-header .page-header-copy {
    min-width: 8rem;
    flex: 0 1 auto;
}

.planning-page-header h1 {
    font-size: 1.35rem;
}

.page > .planning-page-header + .weekly-planning-panel {
    margin-top: var(--rh-space-2);
}

.weekly-planning-panel .week-toolbar,
.weekly-planning-panel .planning-summary,
.weekly-planning-panel .planning-week-legend {
    gap: var(--rh-space-2);
    padding: 4px var(--rh-space-3);
}

.weekly-planning-panel .week-navigation > strong {
    min-width: 10rem;
    font-size: 0.76rem;
}

.weekly-planning-panel .week-navigation > strong > span {
    font-size: 0.55rem;
}

.weekly-planning-panel .week-jump {
    flex-wrap: nowrap;
}

.weekly-planning-panel .week-jump input[type="date"] {
    width: 8.4rem;
    min-height: 28px;
    padding: 2px 5px;
}

.weekly-planning-panel .weekly-table-scroll {
    max-height: calc(100vh - 205px);
}

.weekly-planning-panel .planning-half-headings th {
    top: 31px;
}

.weekly-planning-table {
    min-width: 920px;
    font-size: 0.64rem;
}

.weekly-planning-table thead th {
    padding: 3px 1px;
}

.weekly-planning-table .planning-day-headings > th:first-child {
    left: 0;
    z-index: 6;
    width: 150px;
}

.weekly-planning-table .planning-half-headings th {
    padding: 2px 1px;
}

.weekly-planning-table thead th > strong {
    font-size: 0.68rem;
}

.weekly-planning-table tbody th {
    padding: 2px 5px;
    vertical-align: middle;
}

.weekly-planning-table .planning-post-row th {
    position: sticky;
    left: 0;
    z-index: 2;
    padding-left: 5px;
    background: color-mix(in srgb, var(--post-color) 9%, var(--rh-surface));
}

.weekly-planning-table .planning-family-start > * {
    border-top: 2px solid color-mix(in srgb, var(--family-color) 65%, var(--rh-line-strong));
}

.planning-family-label {
    display: block;
    overflow: hidden;
    margin-bottom: 1px;
    color: color-mix(in srgb, var(--family-color) 55%, var(--rh-ink));
    font-size: 0.48rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.weekly-planning-table .planning-post-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    margin-left: 0;
}

.planning-post-label strong {
    display: block;
    overflow: hidden;
    font-size: 0.57rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekly-planning-table .post-color-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 0;
}

.weekly-planning-table tbody td {
    position: relative;
    height: 26px;
    padding: 1px;
}

.weekly-planning-table .planning-assignment {
    display: block;
    min-height: 17px;
    padding: 2px 2px 1px;
    border-left-width: 3px;
    border-radius: 3px;
    line-height: 1.05;
}

.weekly-planning-table .planning-assignment + .planning-assignment {
    margin-top: 1px;
}

.weekly-planning-table .planning-assignment strong {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 2px;
    overflow: hidden;
    font-size: 0.54rem;
    line-height: 1.05;
    white-space: nowrap;
}

.weekly-planning-table .assignment-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weekly-planning-table .assignment-duration {
    flex: 0 0 auto;
    color: var(--rh-ink-soft);
    font-size: 0.5rem;
    font-weight: 800;
}

.weekly-planning-table .planning-add-slot {
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 1;
    width: 15px;
    min-height: 15px;
    margin: 0;
}

.weekly-planning-table .planning-slot > .planning-add-slot:first-child:last-child {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    min-height: 22px;
}

.weekly-planning-panel .planning-week-legend {
    font-size: 0.62rem;
}

@media (max-width: 1180px) {
    .planning-nav-label {
        display: none;
    }

    .weekly-planning-panel .planning-summary .section-hint {
        display: none;
    }
}

.planning-no-week {
    margin: var(--rh-space-6);
}

/* Horaires individuels ------------------------------------------------- */

.individual-schedule-header { margin-bottom: var(--rh-space-3); }
.individual-schedule-panel { overflow: hidden; }

.individual-schedule-toolbar,
.individual-schedule-filters,
.individual-schedule-legend {
    display: flex;
    align-items: center;
    gap: var(--rh-space-2);
}

.individual-schedule-toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--rh-space-3);
    border-bottom: 1px solid var(--rh-line);
}

.individual-schedule-filters label {
    color: var(--rh-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.individual-schedule-filters input,
.individual-schedule-filters select {
    min-height: 30px;
    padding: 3px 7px;
}

.individual-schedule-legend {
    flex-wrap: wrap;
    padding: 6px var(--rh-space-3);
    border-bottom: 1px solid var(--rh-line);
    color: var(--rh-muted);
    font-size: 0.72rem;
}

.individual-week + .individual-week { border-top: 3px solid var(--rh-bg); }
.individual-week > header { padding: 6px var(--rh-space-3); background: var(--rh-surface-strong); }
.individual-week h2 { margin: 0; font-size: 0.88rem; }
.individual-week-scroll { overflow-x: auto; }

.individual-schedule-table {
    width: 100%;
    min-width: 1240px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.68rem;
}

.individual-schedule-table th,
.individual-schedule-table td {
    padding: 3px 4px;
    border: 1px solid var(--rh-line);
    vertical-align: middle;
    text-align: center;
}

/* Les six jours du lundi au samedi restent de largeur égale ; le dimanche
   est volontairement plus étroit (retour MOA 08/09/2026). */
.individual-schedule-table .individual-col-employee { width: 142px; }
.individual-schedule-table .individual-col-day { width: calc((100% - 664px) / 6); }
.individual-schedule-table .individual-col-sunday { width: 72px; }
.individual-schedule-table .individual-col-total { width: 104px; }
.individual-schedule-table .individual-col-status { width: 146px; }
.individual-schedule-table .individual-col-actions { width: 200px; }
.individual-schedule-table th:first-child { text-align: left; }

.individual-schedule-table thead th {
    background: var(--rh-surface-muted);
    color: var(--rh-ink-soft);
    white-space: nowrap;
}

/* Les pastilles (absence, jour férié, état) peuvent être plus larges que
   leur colonne fixe : sans passage à la ligne elles débordaient sur les
   cellules voisines (retour MOA 07/09/2026). */
.individual-schedule-table .badge {
    white-space: normal;
    text-align: left;
}

.individual-schedule-table .is-weekend { background: var(--rh-surface-muted); }
.individual-schedule-table .is-today { box-shadow: inset 0 0 0 2px var(--rh-info); }

.individual-time {
    display: block;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--rh-primary-soft);
    color: var(--rh-primary);
    font-weight: 750;
    white-space: nowrap;
}

.individual-time + .individual-time { margin-top: 2px; }
.individual-empty { color: var(--rh-muted); font-size: 0.62rem; }
.individual-total strong,
.individual-total span,
.individual-total small { display: block; white-space: nowrap; }
.individual-total .is-balanced { color: var(--rh-success); }
.individual-total .is-unbalanced { color: var(--rh-warning); }

@media (max-width: 900px) {
    .individual-schedule-toolbar,
    .individual-schedule-filters { align-items: stretch; flex-direction: column; }
}

.preview-week-ok {
    color: var(--rh-success);
    font-weight: 650;
}

.preview-week-missing {
    color: var(--rh-danger);
    font-weight: 650;
}

@media (max-width: 640px) {
    .week-toolbar,
    .planning-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .week-navigation {
        justify-content: space-between;
    }

    .week-navigation .button span { display: none; }
    .week-navigation > strong { min-width: 0; }
    .week-jump { justify-content: flex-start; }
    .planning-alert-counts { flex-wrap: wrap; }

    .absence-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .absence-period-nav { justify-content: center; }
    .absence-filters .field { min-width: 100%; }
    .absence-filters .button { flex: 1; }

    .employee-list-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-search {
        width: 100%;
    }

    .board {
        grid-template-columns: 1fr;
    }

    .hero {
        padding: var(--rh-space-5);
    }

    .hero-mark {
        width: 52px;
        height: 52px;
    }

    .collection-row {
        align-items: stretch;
        flex-direction: column;
    }
}