/* ═══════════════════════════════════════════════════════════════════════════
   Couleur d'une notification dans la cloche, par type d'alerte.

   Partagé par l'administration et le site : la cloche est le même composant
   des deux côtés, et le type vient du même catalogue. D'où un fichier à part
   plutôt qu'une règle écrite deux fois.

   Un liseré à gauche et une pastille, pas un aplat : la ligne reste lisible,
   et le sens se lit d'un coup d'œil sans que la couleur porte le texte.
   Les quatre encres tiennent 4,5:1 sur blanc, la contrainte du backoffice clair.
   ═══════════════════════════════════════════════════════════════════════════ */
.na-item {
    position     : relative;
    border-left  : 3px solid transparent;
    padding-left : 11px;
}

.na-item::before {
    content      : "";
    position     : absolute;
    left         : -3px;
    top          : 50%;
    width        : 3px;
    height       : 0;
    transform    : translateY(-50%);
    transition   : height 200ms ease-out;
}

.na-item--info    { border-left-color: #2c6873; }
.na-item--success { border-left-color: #2D6A4F; }
.na-item--warning { border-left-color: #7d6300; }
.na-item--danger  { border-left-color: #B3261E; }

/* La puce redit le type pour qui ne distingue pas les couleurs : forme et
   position identiques, seule la couleur change — donc un intitulé au survol. */
.na-dot {
    display      : inline-block;
    width        : 7px;
    height       : 7px;
    margin-right : 6px;
    border-radius: 50%;
    flex         : 0 0 7px;
    vertical-align: baseline;
}

.na-item--info    .na-dot { background: #2c6873; }
.na-item--success .na-dot { background: #2D6A4F; }
.na-item--warning .na-dot { background: #7d6300; }
.na-item--danger  .na-dot { background: #B3261E; }

/* Dans l'administration, les couleurs suivent les jetons du socle : un teal
   réglé dans les paramètres graphiques se retrouve donc aussi dans la cloche. */
.main-content .na-item--info,
.bo-admin .na-item--info    { border-left-color: var(--bo-primary); }
.main-content .na-item--success,
.bo-admin .na-item--success { border-left-color: var(--bo-ok); }
.main-content .na-item--warning,
.bo-admin .na-item--warning { border-left-color: var(--bo-warn-ink); }
.main-content .na-item--danger,
.bo-admin .na-item--danger  { border-left-color: var(--bo-danger); }

.main-content .na-item--info    .na-dot, .bo-admin .na-item--info    .na-dot { background: var(--bo-primary); }
.main-content .na-item--success .na-dot, .bo-admin .na-item--success .na-dot { background: var(--bo-ok); }
.main-content .na-item--warning .na-dot, .bo-admin .na-item--warning .na-dot { background: var(--bo-warn-ink); }
.main-content .na-item--danger  .na-dot, .bo-admin .na-item--danger  .na-dot { background: var(--bo-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   Lu / non lu.

   Chaque ligne porte un bouton rond posé sur sa droite, hors de son lien : le
   cliquer ne suit jamais la notification. Une ligne lue perd liseré et puce et
   passe en gris ardoise (#596680 : 5,8:1 sur blanc, 5,3:1 sur le survol du
   site) — atténuée par la couleur, jamais par la taille.

   Les jetons --bo-* n'existent que dans le back-office : sur le site, chaque
   valeur retombe sur celle de la charte.
   ═══════════════════════════════════════════════════════════════════════════ */
.na-row {
    position: relative;
}

/* La place du bouton, réservée pour que le texte ne passe pas dessous */
.na-row .message-user-item-left {
    padding-inline-end: 40px;
}

.na-toggle {
    --na-accent      : var(--bo-primary, var(--navbar-bg-color, #2c6873));
    position         : absolute;
    top              : 50%;
    inset-inline-end : 10px;
    display          : inline-flex;
    align-items      : center;
    justify-content  : center;
    width            : 36px;
    height           : 36px;
    padding          : 0;
    border           : 1px solid transparent;
    border-radius    : 50%;
    background       : transparent;
    color            : var(--bo-text-3, #596680);
    font-size        : 15px;
    line-height      : 1;
    /* Le bloc de typographie généré met tous les <button> en capitales espacées */
    text-transform   : none;
    letter-spacing   : normal;
    transform        : translateY(-50%);
    cursor           : pointer;
    transition       : color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out;
}

.na-toggle:hover {
    color            : var(--na-accent);
    background-color : color-mix(in srgb, var(--na-accent) 10%, #fff);
    border-color     : color-mix(in srgb, var(--na-accent) 28%, #fff);
}

.na-toggle:focus-visible {
    outline        : 2px solid var(--na-accent);
    outline-offset : 2px;
}

.na-toggle:active {
    transform : translateY(-50%) scale(.94);
}

.na-toggle[aria-disabled="true"] {
    opacity : .55;
    cursor  : progress;
}

@media (pointer: coarse) {
    .na-toggle                      { width: 44px; height: 44px; }
    .na-row .message-user-item-left { padding-inline-end: 48px; }
}

/* L'heure en gris du thème (#767588) tombait à 4,50:1 sur blanc et 4,16:1 sur le survol du site */
.na-row .message-user-item .color-gray,
.na-row--read .message-user-item h6,
.na-row--read .message-user-item p {
    color : var(--bo-text-3, #596680);
}

.na-row--read .user-img-wrap img {
    filter  : grayscale(1);
    opacity : .75;
}

/* « Lues récemment » : un intitulé, pas un titre — la typographie générée frappe h1 à h6 */
.na-section-title {
    margin         : 0;
    padding        : 8px 24px 4px;
    color          : var(--bo-text-3, #596680);
    font-size      : 13px;
    font-weight    : 700;
    line-height    : 1.4;
    letter-spacing : .06em;
    text-transform : uppercase;
}

.admin-notification-menu .na-section-title {
    margin-top : 10px;
    padding    : 10px 16px 0;
    border-top : 1px solid var(--bo-border, #E4E6EB);
}

/* Onglet sans non lues mais avec des lues : le message ne prend plus toute la hauteur */
.menu-notification-tab-content .na-empty--compact {
    min-height : 0;
    padding    : 12px 24px 4px;
}

@media (prefers-reduced-motion: reduce) {
    .na-item::before,
    .na-toggle { transition: none; }
}