/* =====================================================================
   Module NOTIFICATIONS — feuille de style (.ntf-*)
   ---------------------------------------------------------------------
   Aucune couleur en dur pour le châssis : la feuille consomme les jetons
   du thème V3 « Prism » (--t3-*), redéfinis par chaque ambiance et par
   le mode sombre. Elle hérite donc du sombre sans une règle de plus.
   Les replis (2e argument de var()) gardent le module correct si le
   thème V3 est désactivé.

   À CHARGER APRÈS la feuille de thème — elle consomme ses jetons.

   Une échelle de TONS, pas une règle par type : .ntf-item--<ton> pose
   --ntf-ton, tout le reste s'y réfère. Ajouter un type au catalogue PHP
   ne demande donc aucune ligne ici.

   Portage : crm/helpers/PORTAGE_NOTIFICATIONS.md (§10)
   ===================================================================== */

:root {
    --ntf-info:   #2563eb;
    --ntf-succes: #16a34a;
    --ntf-alerte: #d97706;
    --ntf-danger: #dc2626;
    --ntf-neutre: #64748b;

    --ntf-surface:  var(--t3-solid, #ffffff);
    --ntf-surface-2:var(--t3-solid-alt, #f5f8fd);
    --ntf-border:   var(--t3-border-sub, rgba(19, 26, 46, 0.09));
    --ntf-text:     var(--t3-text, #131a2e);
    --ntf-text-2:   var(--t3-text-2, #4c5670);
    --ntf-text-3:   var(--t3-text-3, #5f6883);
    --ntf-accent:   var(--t3-accent, #2563eb);
    --ntf-accent-lo:var(--t3-accent-lo, #1d4ed8);
    --ntf-accent-on:var(--t3-accent-on, #ffffff);
    --ntf-shadow:   var(--t3-sh-3, 0 16px 44px rgba(19, 26, 46, 0.16), 0 4px 12px rgba(19, 26, 46, 0.08));
    --ntf-radius:   var(--t3-radius, 10px);
    --ntf-radius-sm:var(--t3-radius-sm, 7px);

    /* Fonds translucides : posés une fois, éclaircis en sombre plus bas.
       Le reste de la feuille ne connaît que ces trois jetons. */
    --ntf-wash:    rgba(19, 26, 46, 0.04);
    --ntf-wash-2:  rgba(19, 26, 46, 0.08);
    --ntf-hover:   rgba(19, 26, 46, 0.05);
}

body.v2-dark {
    --ntf-info:   #60a5fa;
    --ntf-succes: #4ade80;
    --ntf-alerte: #fbbf24;
    --ntf-danger: #f87171;
    --ntf-neutre: #94a3b8;

    --ntf-wash:   rgba(255, 255, 255, 0.06);
    --ntf-wash-2: rgba(255, 255, 255, 0.11);
    --ntf-hover:  rgba(255, 255, 255, 0.07);
}


/* =====================================================================
   1. LE CARILLON
   ---------------------------------------------------------------------
   Il ne porte AUCUNE règle de taille : ni display, ni font-size, ni
   width. La barre du haut pose déjà min-width:44px et line-height:40px
   sur ses liens ; les contredire refermait la zone de survol sur
   l'icône et le carillon paraissait plus petit que la loupe d'à côté.
   Juste position:relative, pour ancrer la pastille.
   ===================================================================== */

.ntf-bell { position: relative; }

.ntf-bell__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ntf-danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--t3-solid, #ffffff);
}

.ntf-bell.has-unread > i { animation: ntf-swing 2.4s ease-in-out 2; transform-origin: 50% 10%; }

@keyframes ntf-swing {
    0%, 70%, 100% { transform: rotate(0); }
    75% { transform: rotate(11deg); }
    80% { transform: rotate(-9deg); }
    85% { transform: rotate(6deg); }
    90% { transform: rotate(-4deg); }
}


/* =====================================================================
   2. LE TIROIR
   ===================================================================== */

.ntf-overlay {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(9, 14, 28, 0.34);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.ntf-overlay.is-on { opacity: 1; }

.ntf-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    /* Au-dessus du voile, sous la pile de rappels (10060) : un rappel dû
       reste lisible par-dessus le tiroir. */
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: var(--ntf-surface, #ffffff);
    border-left: 1px solid var(--ntf-border);
    box-shadow: var(--ntf-shadow);
    color: var(--ntf-text);
    font-size: 13px;
    transform: translateX(100%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.ntf-drawer.is-on { transform: none; }

.ntf-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--ntf-border);
}

.ntf-drawer__title {
    flex: 1 1 auto;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ntf-text);
}
.ntf-drawer__title > i { color: var(--ntf-accent); }

.ntf-drawer__count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ntf-accent);
    color: var(--ntf-accent-on);
    font-size: 11px;
    font-weight: 700;
}

.ntf-drawer__close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ntf-text-3);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ntf-drawer__close:hover,
.ntf-drawer__close:focus-visible { background: var(--ntf-hover); color: var(--ntf-text); }

.ntf-drawer__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--ntf-border);
    background: var(--ntf-surface-2);
}

.ntf-drawer__body {
    flex: 1 1 auto;
    padding: 8px 12px 16px;
    overflow-y: auto;
    /* Sans contain, la molette arrivée en bout de tiroir emporte la page
       dessous. Le <body> prend overflow:hidden à l'ouverture, mais ceci
       couvre le cas du survol d'une zone non scrollable. */
    overscroll-behavior: contain;
}

.ntf-drawer__foot {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-top: 1px solid var(--ntf-border);
    background: var(--ntf-surface-2);
    text-align: center;
}


/* ---- sections repliables ---- */

.ntf-sec { margin-bottom: 6px; }

.ntf-sec__head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 4px;
    border: 0;
    background: transparent;
    color: var(--ntf-text-3);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.ntf-sec__head:hover { color: var(--ntf-text); }

.ntf-sec__chev { transition: transform 0.18s ease; }
.ntf-sec__head[aria-expanded="false"] .ntf-sec__chev { transform: rotate(-90deg); }
.ntf-sec__head[aria-expanded="false"] + .ntf-sec__body { display: none; }

.ntf-sec__label { flex: 1 1 auto; }

.ntf-sec__count {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--ntf-wash-2);
    color: var(--ntf-text-2);
    font-size: 10.5px;
    letter-spacing: 0;
}


/* =====================================================================
   3. LA LIGNE DE NOTIFICATION
   ---------------------------------------------------------------------
   Un seul gabarit sert le tiroir et la modale ; seule la densité change.
   Deux gabarits pour un même objet finissent toujours par diverger.
   ===================================================================== */

.ntf-item {
    --ntf-ton: var(--ntf-neutre);
    position: relative;
    display: flex;
    gap: 10px;
    padding: 11px 12px 11px 14px;
    margin-bottom: 6px;
    border: 1px solid var(--ntf-border);
    border-radius: var(--ntf-radius);
    background: var(--ntf-surface);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ntf-item:hover { background: var(--ntf-hover); border-color: var(--ntf-ton); }

.ntf-item--info   { --ntf-ton: var(--ntf-info); }
.ntf-item--succes { --ntf-ton: var(--ntf-succes); }
.ntf-item--alerte { --ntf-ton: var(--ntf-alerte); }
.ntf-item--danger { --ntf-ton: var(--ntf-danger); }
.ntf-item--neutre { --ntf-ton: var(--ntf-neutre); }

/* Le non-lu se marque DEUX fois : un filet latéral et un titre plus
   gras. La couleur seule ne suffirait pas à un daltonien ; le gras seul
   se perd dans une liste dense. */
.ntf-item--unread::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ntf-ton);
}
.ntf-item--unread .ntf-item__title { font-weight: 700; color: var(--ntf-text); }
.ntf-item__title { font-weight: 500; color: var(--ntf-text-2); }

.ntf-item__ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ntf-wash);
    color: var(--ntf-ton);
    font-size: 15px;
}
.ntf-item--unread .ntf-item__ico { background: var(--ntf-wash-2); }

.ntf-item__main { flex: 1 1 auto; min-width: 0; }

.ntf-item__title {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}

.ntf-item__txt {
    margin: 3px 0 0;
    color: var(--ntf-text-2);
    font-size: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ntf-item--wide .ntf-item__txt { -webkit-line-clamp: 4; }

.ntf-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 6px;
    color: var(--ntf-text-3);
    font-size: 11px;
}

.ntf-item__tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ntf-wash);
    color: var(--ntf-ton);
    font-weight: 600;
}

.ntf-item__done {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ntf-wash);
    color: var(--ntf-succes);
    font-weight: 600;
}

.ntf-item__acts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ntf-act {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ntf-text-3);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ntf-act:hover, .ntf-act:focus-visible { background: var(--ntf-wash-2); color: var(--ntf-text); }
.ntf-act--done:hover  { color: var(--ntf-succes); }
.ntf-act--del:hover   { color: var(--ntf-danger); }


/* ---- ligne de rappel ---- */

.ntf-recall { --ntf-ton: var(--ntf-alerte); }
.ntf-recall--late { --ntf-ton: var(--ntf-danger); }
.ntf-recall__when { font-weight: 600; color: var(--ntf-ton); }


/* =====================================================================
   4. BOUTONS ET OUTILS
   ===================================================================== */

.ntf-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--ntf-border);
    border-radius: var(--ntf-radius-sm);
    background: var(--ntf-surface);
    color: var(--ntf-text-2);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ntf-tool:hover, .ntf-tool:focus-visible { background: var(--ntf-hover); color: var(--ntf-text); }
.ntf-tool--icon { padding: 4px 8px; margin-left: auto; }

.ntf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: var(--ntf-radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ntf-btn--main {
    background: var(--ntf-accent);
    border-color: var(--ntf-accent);
    color: var(--ntf-accent-on);
}
.ntf-btn--main:hover, .ntf-btn--main:focus-visible {
    background: var(--ntf-accent-lo);
    border-color: var(--ntf-accent-lo);
    color: var(--ntf-accent-on);
}
.ntf-btn--ghost { background: transparent; color: var(--ntf-text-2); }
.ntf-btn--ghost:hover, .ntf-btn--ghost:focus-visible { background: var(--ntf-hover); color: var(--ntf-text); }
.ntf-btn[disabled] { opacity: 0.4; pointer-events: none; }


/* =====================================================================
   5. LA MODALE D'HISTORIQUE
   ===================================================================== */

.ntf-modal {
    border-radius: var(--ntf-radius);
    background: var(--ntf-surface);
    color: var(--ntf-text);
}
.ntf-modal .modal-header { border-bottom-color: var(--ntf-border); }
.ntf-modal .modal-title  { font-size: 17px; color: var(--ntf-text); }
.ntf-modal .modal-title > i { color: var(--ntf-accent); }

.ntf-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ntf-seg {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--ntf-border);
    border-radius: 999px;
    background: var(--ntf-surface-2);
}
.ntf-seg__b {
    padding: 4px 13px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ntf-text-2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ntf-seg__b.is-on { background: var(--ntf-accent); color: var(--ntf-accent-on); }
.ntf-seg__b:not(.is-on):hover { color: var(--ntf-text); }

.ntf-search { position: relative; flex: 1 1 220px; }
.ntf-search > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ntf-text-3);
    font-size: 14px;
}
.ntf-search .form-control { padding-left: 30px; padding-right: 28px; }
.ntf-search__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ntf-text-3);
    cursor: pointer;
}
.ntf-search__clear:hover { background: var(--ntf-wash-2); color: var(--ntf-text); }

.ntf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.ntf-chip {
    --ntf-ton: var(--ntf-neutre);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid var(--ntf-border);
    border-radius: 999px;
    background: var(--ntf-surface);
    color: var(--ntf-text-2);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ntf-chip > i { color: var(--ntf-ton); }
.ntf-chip:hover { background: var(--ntf-hover); }
.ntf-chip.is-on {
    border-color: var(--ntf-ton);
    background: var(--ntf-wash);
    color: var(--ntf-text);
}
.ntf-chip--info   { --ntf-ton: var(--ntf-info); }
.ntf-chip--succes { --ntf-ton: var(--ntf-succes); }
.ntf-chip--alerte { --ntf-ton: var(--ntf-alerte); }
.ntf-chip--danger { --ntf-ton: var(--ntf-danger); }
.ntf-chip--neutre { --ntf-ton: var(--ntf-neutre); }

/* Une puce sans résultat S'EFFACE mais reste cliquable : la masquer
   ferait sauter la rangée à chaque changement de filtre. */
.ntf-chip.is-empty { opacity: 0.42; }

.ntf-chip__n {
    min-width: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ntf-wash-2);
    font-size: 10px;
    text-align: center;
}
.ntf-chip__n:empty { display: none; }

.ntf-modal__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ntf-modal__total { flex: 1 1 auto; color: var(--ntf-text-3); font-size: 11.5px; }

.ntf-list { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }

.ntf-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ntf-border);
}
.ntf-pager__pos { color: var(--ntf-text-3); font-size: 11.5px; }

.ntf-prefs__intro { color: var(--ntf-text-2); font-size: 12.5px; }

.ntf-empty {
    padding: 30px 10px;
    color: var(--ntf-text-3);
    font-size: 12.5px;
    text-align: center;
}
.ntf-empty > i { font-size: 26px; opacity: 0.5; }

.ntf-err {
    padding: 6px 10px;
    border-radius: var(--ntf-radius-sm);
    background: rgba(220, 38, 38, 0.10);
    color: #b91c1c;
    font-size: 12px;
}
body.v2-dark .ntf-err { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }


/* =====================================================================
   6. MENTIONS
   ===================================================================== */

/* Porte le position:relative dont la liste a besoin : elle est absolue,
   sans ancêtre positionné elle se placerait par rapport à la page. */
.ntf-tag-host { position: relative; }

.ntf-mentions {
    position: absolute;
    z-index: 1055;
    width: 310px;
    max-width: calc(100% - 12px);
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--ntf-border);
    border-radius: var(--ntf-radius);
    background: var(--ntf-surface);
    box-shadow: var(--ntf-shadow);
}

.ntf-mentions__list { list-style: none; margin: 0; padding: 4px; }

.ntf-mentions__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: var(--ntf-radius-sm);
    cursor: pointer;
}
/* Le survol n'est PAS la sélection : le clavier garde la main. */
.ntf-mentions__item.is-on { background: var(--ntf-wash-2); }
.ntf-mentions__item:hover { background: var(--ntf-hover); }

.ntf-mentions__txt { flex: 1 1 auto; min-width: 0; }

.ntf-mentions__name {
    display: block;
    color: var(--ntf-text);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ntf-mentions__sub {
    display: block;
    color: var(--ntf-text-3);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ntf-mentions__none { padding: 14px; margin: 0; color: var(--ntf-text-3); font-size: 12px; text-align: center; }

/* Familles de profil : neuf profils feraient neuf couleurs, donc aucune.
   Cinq rôles, cinq teintes. */
.ntf-ava {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 10.5px;
    font-weight: 700;
}
.ntf-ava--direction { background: rgba(10, 147, 150, 0.16);  color: #0a9396; }
.ntf-ava--gestion   { background: rgba(187, 62, 3, 0.14);    color: #bb3e03; }
.ntf-ava--commerce  { background: rgba(37, 99, 235, 0.14);   color: #2563eb; }
.ntf-ava--terrain   { background: rgba(243, 114, 44, 0.16);  color: #f3722c; }
.ntf-ava--externe   { background: rgba(139, 92, 246, 0.16);  color: #8b5cf6; }
.ntf-ava--autre     { background: var(--ntf-wash-2);         color: var(--ntf-text-2); }

.ntf-badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ntf-wash);
    color: var(--ntf-text-3);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.ntf-badge--direction { color: #0a9396; }
.ntf-badge--gestion   { color: #bb3e03; }
.ntf-badge--commerce  { color: #2563eb; }
.ntf-badge--terrain   { color: #f3722c; }
.ntf-badge--externe   { color: #8b5cf6; }

.ntf-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ntf-text-3);
    font-size: 11.5px;
    font-style: italic;
}

/* La mention est une PASTILLE, pas un lien : dans un commentaire de dix
   lignes, « @Nom » en bleu se confond avec un lien cliquable. La
   pastille dit qu'il s'est passé quelque chose — quelqu'un a été
   prévenu — et non qu'il y a quelque chose à cliquer.
   Le « @ » fait partie du TEXTE et non d'un ::before : un commentaire
   copié-collé ailleurs doit garder sa mention lisible. */
.ntf-mention {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--ntf-accent);
    font-weight: 600;
    white-space: nowrap;
}
body.v2-dark .ntf-mention { background: rgba(96, 165, 250, 0.18); }


/* =====================================================================
   7. ÉCRANS ÉTROITS ET MOUVEMENT RÉDUIT
   ===================================================================== */

@media (max-width: 480px) {
    .ntf-drawer { width: 100vw; border-left: 0; }
    .ntf-mentions { width: calc(100vw - 40px); }
}

@media (prefers-reduced-motion: reduce) {
    .ntf-drawer, .ntf-overlay, .ntf-item, .ntf-btn, .ntf-tool, .ntf-chip, .ntf-act {
        transition-duration: 0.01ms !important;
    }
    .ntf-bell.has-unread > i { animation: none; }
}