/* Page « Notifications et alertes » (/notifications, ouverte par la cloche du menu) : chargée sur toutes les pages
   (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle).
   Aucun grand cadre : chaque bloc est sa propre carte, posée sur le fond de la page — l'en-tête de chaque colonne,
   chaque notification, le calendrier, chaque jour de l'agenda. */
@layer components {

/* Le fil à gauche (un tiers), les alertes à droite (deux tiers) ; une seule colonne sous 1100 px. */
[data-stamina-turbo-region] .notif-page {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 1099.98px) {
    [data-stamina-turbo-region] .notif-page { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
[data-stamina-turbo-region] .notif-column { display: grid; gap: 12px; min-width: 0; }
[data-stamina-turbo-region] .notif-column :is(ol, p) { margin: 0; }
[data-stamina-turbo-region] .notif-column ol { padding: 0; list-style: none; }
/* Les cartes de la page : un filet, sans ombre au repos. */
[data-stamina-turbo-region] .notif-column .card { border: 1px solid var(--color-line); box-shadow: none; }

/* En-tête de colonne : une carte à lui, le nombre en pastille violette, les actions rondes. */
[data-stamina-turbo-region] .notif-head {
    display: flex; align-items: center; min-height: 68px; padding: 12px 14px 12px 18px;
    > .section-header { width: 100%; min-height: 0; }
    .section-header__title { font-weight: 700; }
    .section-header__title > .badge {
        padding: 1px 8px; border-radius: 999px; background: var(--color-accent); color: #fff;
        font-size: 12px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
    }
}
[data-stamina-turbo-region] .notif-round { width: 36px; height: 36px; border-radius: 999px; }

[data-stamina-turbo-region] .notif-note { padding: 0 4px; color: var(--color-muted); font-size: 12.5px; }
[data-stamina-turbo-region] .notif-group__title {
    margin: 0; padding: 8px 4px 0;
    color: var(--color-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
[data-stamina-turbo-region] .notif-read { display: grid; gap: 12px; }
[data-stamina-turbo-region] .notif-cards { display: grid; gap: 12px; }
[data-stamina-turbo-region] .notif-cards--read { gap: 8px; }

/* Couleur de chaque niveau. */
[data-stamina-turbo-region] .notif-item {
    --tone: var(--color-accent); --tone-soft: var(--color-accent-soft);
    &.tone-success { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }
    &.tone-warning { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); }
    &.tone-danger { --tone: var(--color-danger); --tone-soft: var(--color-danger-soft); }
    &.tone-night { --tone: var(--color-night); --tone-soft: var(--color-tile); }
}

/* Non lue : une carte, liseré de son niveau, l'action en bouton. */
[data-stamina-turbo-region] .notif-column .notif-item {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
    padding: 16px 16px 16px 18px; border-left: 3px solid var(--tone);
    transition: box-shadow .15s, transform .15s;
    &:hover { box-shadow: 0 14px 28px -18px rgb(29 21 49 / .45); transform: translateY(-1px); }
    &:focus-within { border-color: var(--tone); }
}
[data-stamina-turbo-region] .notif-item__icon {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--tone-soft); color: var(--tone); font-size: 17px;
    .tone-night & { background: var(--color-night); color: var(--color-surface); }
}
[data-stamina-turbo-region] .notif-item__body { min-width: 0; padding-right: 26px; }
[data-stamina-turbo-region] .notif-item__title {
    color: var(--color-ink); font-size: 14px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere;
}
[data-stamina-turbo-region] .notif-item__content {
    margin-top: 3px; color: var(--color-ink-2); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere;
    p { margin: 0; }
}
[data-stamina-turbo-region] .notif-item__foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px;
}
[data-stamina-turbo-region] .notif-item__link { max-width: 100%; padding: 4px 12px; font-size: 12px; }
[data-stamina-turbo-region] .notif-item__time { color: var(--color-muted); font-size: 11.5px; }
[data-stamina-turbo-region] .notif-item__side { position: absolute; top: 10px; right: 10px; }
[data-stamina-turbo-region] :is(.notif-item__side, .notif-line) form { margin: 0; }

/* Déjà lue : une carte d'une seule ligne. */
[data-stamina-turbo-region] .notif-line {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 8px 0 14px; border-radius: 14px; color: var(--color-ink-2); font-size: 13px;
    transition: border-color .15s;
    &:is(:hover, :focus-within) { border-color: var(--color-accent); }
}
[data-stamina-turbo-region] .notif-line__icon { color: var(--color-muted); font-size: 13px; text-align: center; }
[data-stamina-turbo-region] .notif-line__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-stamina-turbo-region] .notif-line__time { padding-inline: 4px; color: var(--color-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

[data-stamina-turbo-region] .notif-more {
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px;
    border: 1px dashed var(--color-line); border-radius: 14px;
    color: var(--color-accent); font-size: 13px; font-weight: 600; text-decoration: none;
    &:hover { background: var(--color-accent-soft); }
}

/* Actions de ligne : toujours visibles (on doit voir qu'on peut agir), en retrait jusqu'au survol. */
[data-stamina-turbo-region] :is(.notif-item__toggle, .notif-line__open, .notif-alert__tools .btn) { color: var(--color-muted); transition: color .15s, background-color .15s; }
[data-stamina-turbo-region] :is(.notif-item, .notif-line, .notif-alert):is(:hover, :focus-within) :is(.notif-item__toggle, .notif-line__open, .notif-alert__tools .btn) { color: var(--color-ink); }
[data-stamina-turbo-region] :is(.notif-item__toggle, .notif-line__open):hover { background: var(--color-accent-soft); color: var(--color-accent); }
[data-stamina-turbo-region] .notif-alert .notif-alert__delete:hover { background: var(--color-danger-soft); color: var(--color-danger); }

[data-stamina-turbo-region] .notif-empty {
    padding: 40px 16px 34px;
    > i { font-size: 2rem; color: var(--color-success); }
}

/* ===== Mes alertes ===== */
/* Le calendrier : une carte, les trois mois séparés par des filets. */
[data-stamina-turbo-region] .notif-months {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 22px 18px;
    > .mini-calendar { padding: 0 12px; }
    > .mini-calendar:first-child { padding-left: 0; }
    > .mini-calendar:last-child { padding-right: 0; }
    > .mini-calendar + .mini-calendar { border-left: 1px solid var(--color-line); }
}
[data-stamina-turbo-region] .notif-agenda { display: grid; gap: 12px; }
[data-stamina-turbo-region] .notif-agenda__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
[data-stamina-turbo-region] .notif-agenda__all { color: var(--color-accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
[data-stamina-turbo-region] .notif-agenda__all:hover { text-decoration: underline; }
/* L'agenda : une carte par jour, sa date à gauche, sur deux colonnes. */
[data-stamina-turbo-region] .notif-agenda__days { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
[data-stamina-turbo-region] .notif-agenda__day {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 14px 16px 16px;
    transition: box-shadow .15s, transform .15s;
    &:hover { box-shadow: 0 14px 28px -18px rgb(29 21 49 / .45); transform: translateY(-1px); }
    > .date-marker { padding: 6px 0 7px; border-radius: 12px; background: var(--color-accent-soft); }
}
[data-stamina-turbo-region] .notif-alert-list > * + * { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-line); }
[data-stamina-turbo-region] .notif-alert { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
[data-stamina-turbo-region] .notif-alert__body { min-width: 0; }
[data-stamina-turbo-region] .notif-alert__title {
    display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    color: var(--color-ink); font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere;
}
/* « Revenir sur [page] » : la page, lien du titre. */
[data-stamina-turbo-region] .notif-alert__inline {
    color: var(--color-accent); text-decoration: none;
    > i { margin: 0 4px 0 1px; font-size: 12px; }
    &:hover { text-decoration: underline; }
}
/* Le rappel (« Rappel 1 semaine avant, lundi 23 novembre à 9 h ») ; les détails ; la page liée. */
[data-stamina-turbo-region] .notif-alert__when {
    margin-top: 3px !important; color: var(--color-ink-2); font-size: 12.5px; font-weight: 500;
    > i { margin-right: 3px; font-size: 11px; }
}
[data-stamina-turbo-region] .notif-alert__details {
    display: -webkit-box; margin-top: 4px !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    color: var(--color-ink-2); font-size: 13px; line-height: 1.45; white-space: pre-line;
}
[data-stamina-turbo-region] .notif-alert__page {
    display: flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px;
    color: var(--color-accent); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
    > span { overflow: hidden; text-overflow: ellipsis; }
    > i { flex: none; font-size: 11px; }
    &:hover > span { text-decoration: underline; }
}
[data-stamina-turbo-region] .notif-alert__tools { display: flex; gap: 2px; }
[data-stamina-turbo-region] .notif-alert__tools form { margin: 0; }

[data-stamina-turbo-region] .notif-alerts__empty {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px;
    p { flex: 1 1 16rem; color: var(--color-ink-2); font-size: 13px; line-height: 1.45; }
    b { color: var(--color-ink); }
}
[data-stamina-turbo-region] .notif-alerts__buddy { flex: none; width: 44px; height: 44px; }
[data-stamina-turbo-region] .notif-alerts__buddy .buddy-mascot { display: block; width: 100%; height: 100%; }

@media (max-width: 639.98px) {
    [data-stamina-turbo-region] .notif-months {
        grid-template-columns: minmax(0, 1fr); padding: 4px 16px;
        > .mini-calendar { padding: 16px 0; }
        > .mini-calendar + .mini-calendar { border-left: 0; border-top: 1px solid var(--color-line); }
    }
    [data-stamina-turbo-region] .notif-head .section-header__actions { flex-wrap: nowrap; }
    [data-stamina-turbo-region] .notif-agenda__days { grid-template-columns: minmax(0, 1fr); }
    /* La date passe au-dessus (le marqueur se couche en ligne sur téléphone). */
    [data-stamina-turbo-region] .notif-agenda__day {
        grid-template-columns: minmax(0, 1fr); gap: 8px;
        > .date-marker { justify-self: start; padding: 4px 10px; }
    }
}

/* Le formulaire d'une alerte (panneau) : la date du rappel n'apparaît que pour « À une date précise ». */
[data-stamina-turbo-region].alert-form:not(:has(input[value="custom"]:checked)) .alert-form__due,
[data-stamina-turbo-region] .alert-form:not(:has(input[value="custom"]:checked)) .alert-form__due { display: none; }


/* Carte « Alertes » d'une fiche (Notifications/linked_frame.html.twig) : une ligne par alerte, sa date à gauche,
   l'objet et le rappel à droite ; toute la ligne ouvre le panneau de modification. */
[data-stamina-turbo-region] .notif-linked { display: grid; gap: 2px; margin: 0 -8px; }
[data-stamina-turbo-region] .notif-linked__item {
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 10px;
    width: 100%; padding: 6px 8px; border-radius: var(--radius-item); text-align: left; cursor: pointer;
    transition: background-color .15s;
    &:hover, &:focus-visible { background: var(--color-tile); }
    > .date-marker { display: grid; padding: 4px 0; border-radius: 10px; background: var(--color-accent-soft); }
    > .date-marker .date-marker__number { font-size: 1rem; }
    &.is-sent > .date-marker { background: var(--color-tile); }
    &.is-sent strong { color: var(--color-muted); }
}
[data-stamina-turbo-region] .notif-linked__body {
    min-width: 0;
    strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--color-ink); font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
    small { display: block; margin-top: 2px; color: var(--color-muted); font-size: 12px; line-height: 1.4; }
    small > i { margin-right: 2px; font-size: 10.5px; }
}
[data-stamina-turbo-region] .notif-linked__label { margin: 12px 0 4px; }
[data-stamina-turbo-region] .notif-linked__empty { margin: 0 0 10px; color: var(--color-ink-2); font-size: 13px; line-height: 1.45; }
}