/* ============================================================
   app.lfpl.fr — habillage sombre de la colonne « Agenda ».

   Chargé APRÈS agenda/agenda.css, qui n'est pas modifié : l'agenda
   et son back-office (agenda/admin/) conservent leur feuille de
   style d'origine, et une mise à jour de l'agenda ne perd rien.

   Portée volontairement limitée à la colonne .agenda. Les fenêtres
   modales (#agOverlay, #agMonthOverlay) sont des frères de .agenda
   dans le DOM : elles restent sur fond clair, parfaitement lisibles
   au-dessus du voile sombre, et aucun champ de formulaire n'est
   touché (pas de risque sur les sélecteurs d'heure natifs).
   ============================================================ */

/* Aligne la gouttière du gabarit deux colonnes sur celle de l'en-tête. */
.pf-shell { padding: 0 clamp(16px, 4vw, 24px); }

/* ── Carte de la colonne ── */
.agenda {
    background: var(--verre);
    border-color: var(--verre-trait);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .65);
    color: #fff;
    margin-top: 30px; /* aligné sur le padding haut de .pf-main */
}
.agenda-head { background: linear-gradient(160deg, rgba(45, 66, 123, .92), rgba(11, 23, 51, .92)); }

/* ── Légende ── */
.agenda .legend {
    background: rgba(255, 255, 255, .05);
    border-bottom-color: rgba(255, 255, 255, .14);
}
.agenda .legend .lg { color: rgba(255, 255, 255, .88); }

/* ── Liste des rendez-vous ── */
.agenda .day-label { color: rgba(255, 255, 255, .72); }
.agenda .day-label::after { background: rgba(255, 255, 255, .18); }

.agenda .event {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
}
.agenda .event .title { color: #fff; }
.agenda .event .meta { color: rgba(255, 255, 255, .70); }
.agenda .event .time { color: rgba(255, 255, 255, .88); }
/* La pastille de date reste claire : elle sert de point d'ancrage
   visuel et conserve son contraste d'origine (texte marine sur voile). */

.agenda .event .del, .agenda .event .edit { color: rgba(255, 255, 255, .72); }
.agenda .event .del:hover { background: rgba(216, 23, 28, .28); color: #FFC9CA; }
.agenda .event .edit:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ── États (chargement, erreur, liste vide) ── */
.agenda .ag-state { color: rgba(255, 255, 255, .78); }
.agenda .ag-state svg { color: rgba(255, 255, 255, .38); }
.agenda .ag-state .ag-retry {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .30);
    color: #fff;
}
.agenda .ag-state .ag-retry:hover { background: rgba(255, 255, 255, .20); }
.agenda .ag-spinner { border-color: rgba(255, 255, 255, .20); border-top-color: var(--or-clair); }

/* ── Voile des fenêtres modales : un peu plus dense sur fond animé ── */
.ag-overlay {
    background: rgba(6, 13, 30, .68);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ── Navigateur sans verre dépoli ── */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .agenda { background: rgba(15, 27, 61, .94); }
}

/* ── Légende de la vue mois : agenda.css ne la met en forme que dans
   la colonne (.agenda .legend) ; dans la fenêtre elle collait au bord. ── */
.ag-modal .legend {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line);
}