.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur est survenue."
    }

/* ── Agenda ──────────────────────────────────────────────────────────────────
   Grille horaire. Deux couches par colonne : les cases du fond portent le clic
   (et, plus tard, le dépôt), les cartes flottent au-dessus en position absolue,
   proportionnelles à leur durée. Les couleurs viennent des variables MudBlazor,
   jamais d'un hex, pour suivre le thème.

   Deux variables sont posées en style inline par le composant :
     --agenda-slot-h  hauteur d'un créneau
     --agenda-cols    nombre de colonnes
   ------------------------------------------------------------------------- */

.agenda {
    --agenda-gutter-w: 52px;
    --agenda-line: var(--mud-palette-lines-default);
    width: 100%;
    overflow-x: auto;
}

.agenda-headrow,
.agenda-body {
    display: flex;
    /* Les colonnes ne descendent pas sous 132 px : en dessous, un nom de patient
       n'est plus lisible et mieux vaut faire défiler la grille. */
    min-width: calc(var(--agenda-gutter-w) + var(--agenda-cols) * 132px);
}

.agenda-headrow {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--agenda-line);
}

.agenda-gutter-head {
    flex: 0 0 var(--agenda-gutter-w);
}

.agenda-colhead {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    text-align: center;
    border-left: 1px solid var(--agenda-line);
}

.agenda-colhead--today {
    background: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

.agenda-colhead-main {
    font-size: .875rem;
    line-height: 1.2;
    /* Un nom trop long tronque au lieu de pousser la colonne. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-colhead-sub {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.agenda-gutter {
    flex: 0 0 var(--agenda-gutter-w);
}

.agenda-hour {
    height: var(--agenda-slot-h);
    font-size: .7rem;
    line-height: 1;
    text-align: right;
    padding-right: 6px;
    color: var(--mud-palette-text-secondary);
    /* Le libellé chevauche la ligne qu'il désigne plutôt que de flotter en dessous. */
    transform: translateY(-.35em);
}

.agenda-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px solid var(--agenda-line);
}

.agenda-cell {
    height: var(--agenda-slot-h);
    border-top: 1px dotted var(--agenda-line);
    cursor: pointer;
}

.agenda-cell--hour {
    border-top-style: solid;
}

.agenda-cell:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Heure qui n'existe pas ce jour-là (passage à l'heure d'été) : pas une cible. */
.agenda-cell--void {
    cursor: not-allowed;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        var(--agenda-line) 4px,
        var(--agenda-line) 5px);
}

.agenda-cell--void:hover {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        var(--agenda-line) 4px,
        var(--agenda-line) 5px);
}

/* MudBlazor anime chaque zone (transition: all 300ms) : sur 168 cases, c'est du
   scintillement pur. */
.agenda-cell {
    transition: none;
}

/* Retour visuel pendant un glisser. */
.agenda-cell--ok {
    background: var(--mud-palette-primary-hover);
}

.agenda-cell--ko {
    cursor: not-allowed;
}

/* La case entière est la cible du clic, pas seulement son liseré. */
.agenda-cell-hit {
    width: 100%;
    height: 100%;
}

/* La couche des cartes laisse passer les clics : ce sont les cases du fond qui
   les reçoivent, sauf sur une carte elle-même. */
.agenda-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* inset:0 suffit à la caler sur la colonne, et « absolute » la sort du flux : lui
       donner height:0 écraserait le référentiel des pourcentages des cartes, qui se
       retrouveraient toutes empilées en haut de la colonne. */
    transition: none;
}

/* Pendant un glisser, les cartes cessent de capter le pointeur : sans cela elles
   voleraient les dragenter des cases situées dessous, et la cible serait fausse. */
.agenda--dragging .agenda-card {
    pointer-events: none;
}

.agenda-card {
    position: absolute;
    pointer-events: auto;
    overflow: hidden;
    /* Une carte de 5 min resterait illisible au prorata : plancher de lisibilité. */
    min-height: 18px;
    padding: 1px 4px;
    border-radius: 3px;
    border-left: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    font-size: .72rem;
    line-height: 1.25;
    cursor: pointer;
}

.agenda-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.agenda-card-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.agenda-card-inner:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.agenda-card--muted {
    opacity: .55;
}

.agenda-card--pending {
    opacity: .5;
    cursor: progress;
}

.agenda-card-head {
    display: flex;
    gap: 4px;
    align-items: baseline;
}

.agenda-card-time {
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

.agenda-card-name {
    flex: 1 1 auto;
    min-width: 0;
}

.agenda-card-name,
.agenda-card-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-card-meta {
    color: var(--mud-palette-text-secondary);
}