/* ═══════════════════════════════════════════════════════════════════════
   DTISoft — Cloche de notifications (header, à gauche de l'avatar).
   Préfixe notif- (namespacing par feature, convention projet).
   ═══════════════════════════════════════════════════════════════════════ */
.notif-bell { position: relative; display: flex; align-items: center; }

.notif-bell .toolbar-btn { position: relative; }

.notif-badge {
    position: absolute; top: -4px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: #dc2626; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    border-radius: 8px; pointer-events: none;
    box-shadow: 0 0 0 2px var(--gray-50, #f8fafc);
}

@keyframes notifRing {
    0% { transform: rotate(0); } 15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}
.notif-ring i.fa-bell { animation: notifRing .8s ease-in-out; transform-origin: top center; }

.notif-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 9600;
    width: 380px; max-height: min(640px, calc(100vh - 80px));
    background: #fff; border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 8px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    display: flex; flex-direction: column; overflow: hidden;
}
.notif-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; font-weight: 700; font-size: 13px;
    color: var(--gray-700, #334155);
    border-bottom: 1px solid var(--gray-200, #e2e8f0);
    background: var(--gray-50, #f8fafc);
}
.notif-mark-all {
    border: none; background: none; cursor: pointer;
    font-size: 11px; color: var(--primary, #2563eb); padding: 2px 4px;
}
.notif-mark-all:hover { text-decoration: underline; }

/* Liste = ce qui reste sous l'en-tête, avec défilement (2026-11-06 : min-height 0 indispensable dans une colonne flex). */
.notif-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.notif-count { font-weight: 600; font-size: 11px; color: #dc2626; margin-left: 6px; }
.notif-empty { padding: 24px 12px; text-align: center; color: var(--gray-400, #94a3b8); font-size: 12px; font-style: italic; }

.notif-item {
    display: flex; gap: 10px; padding: 9px 12px; cursor: pointer;
    border-bottom: 1px solid var(--gray-100, #f1f5f9);
}
.notif-item:hover { background: var(--blue-pale, #eff6ff); }
.notif-icon { color: var(--primary, #2563eb); font-size: 14px; margin-top: 2px; flex: 0 0 auto; }
.notif-body { min-width: 0; flex: 1; }
.notif-title { font-size: 12.5px; font-weight: 600; color: var(--gray-900, #0f172a); }
/* Message sur 3 lignes au plus (avant : 1 ligne coupée) ; texte entier au survol et au clic d'une notification sans écran. */
.notif-msg { font-size: 12px; color: var(--gray-600, #475569); margin-top: 1px; overflow: hidden;
             display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow-wrap: anywhere; }
.notif-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 10.5px; color: var(--gray-400, #94a3b8); }
.notif-readby { display: inline-flex; align-items: center; gap: 3px; color: var(--gray-500, #64748b); font-weight: 600; }
.notif-readby i { font-size: 9px; color: #16a34a; }

/* Lu = grisé pour TOUT le monde (boîte partagée, traçabilité par code lecteur) */
.notif-item.notif-read { background: var(--gray-50, #f8fafc); }
.notif-item.notif-read .notif-icon { color: var(--gray-300, #cbd5e1); }
.notif-item.notif-read .notif-title { color: var(--gray-500, #64748b); font-weight: 500; }
.notif-item.notif-read .notif-msg { color: var(--gray-400, #94a3b8); }
.notif-item.notif-read:hover { background: var(--gray-100, #f1f5f9); }