/* Notifications (web/notifications.js) : cloche, liste, alertes en direct, écran « Mes notifications ».
   Couleurs par variables uniquement : le thème sombre (web/css/dark.css) les redéfinit. */

/* ---- cloche : rouge et animée tant qu'une mention ou une assignation n'est pas lue ---- */
.iconbtn.bell.hot { color: var(--danger); }
.topbar.on-board .iconbtn.bell.hot { color: #fff; }
.iconbtn.bell.hot .icon { animation: bell-ring 2.4s ease-in-out 3; transform-origin: 50% 10%; }
.badge-dot.hot { box-shadow: 0 0 0 0 var(--danger); animation: bell-pulse 1.8s ease-out infinite; }
@keyframes bell-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 80% { transform: rotate(-12deg); } 85% { transform: rotate(8deg); } 90% { transform: rotate(-6deg); } 95% { transform: rotate(3deg); } }
@keyframes bell-pulse { 0% { box-shadow: 0 0 0 0 #c9372c99; } 70% { box-shadow: 0 0 0 7px #c9372c00; } 100% { box-shadow: 0 0 0 0 #c9372c00; } }
@media (prefers-reduced-motion: reduce) { .iconbtn.bell.hot .icon, .badge-dot.hot { animation: none; } }

/* ---- liste de la cloche ---- */
.notif-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 -12px 8px; padding: 0 12px; }
.notif-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 8px; font-size: 13px; color: var(--subtle); cursor: pointer; border-radius: 0; }
.notif-tab:hover { color: var(--text); background: none; }
.notif-tab.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.notif-tools { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.notif-tools .btn { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.notif-tools .icon { width: 14px; height: 14px; }
.pop .notif { display: flex; gap: 10px; align-items: flex-start; position: relative; }
.pop .notif.important.unread { background: var(--tint-red); box-shadow: inset 3px 0 0 var(--danger); }
.notif-av { position: relative; flex: none; }
.notif-kind { position: absolute; right: -6px; bottom: -6px; font-size: 11px; line-height: 1; background: var(--surface); border-radius: 50%; padding: 2px; box-shadow: 0 0 0 1px var(--line); }
.notif-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-text { overflow-wrap: anywhere; }
.pop .notif.unread .notif-text { font-weight: 600; }
.notif-flag { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-red); }
.notif-more { font-weight: 400; font-size: 12px; color: var(--muted); white-space: nowrap; }
.notif-dot { flex: none; width: 10px; height: 10px; padding: 0; margin-top: 6px; border: 0; border-radius: 50%; background: var(--primary); cursor: pointer; }
.notif-dot:hover { outline: 3px solid var(--tint-blue-2); }
.notif.important .notif-dot { background: var(--danger); }
.notif-empty { margin: 8px 0; }
.notif-hint { margin: 10px -12px -12px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--subtle); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ---- alertes en direct (mention, assignation) ---- */
#notifAlerts { position: fixed; top: calc(var(--header-h) + 8px); right: 12px; z-index: 90; display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: calc(100vw - 24px); pointer-events: none; }
.nalert { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: var(--surface); color: var(--text); border-radius: 10px; padding: 12px 36px 12px 12px; position: relative;
  border: 1px solid var(--line); border-left: 5px solid var(--danger); box-shadow: 0 12px 28px #091e4240, 0 0 1px #091e424f; animation: nalert-in .25s ease-out; }
.nalert.k-assigned { border-left-color: var(--primary); }
.nalert-icon { font-size: 22px; line-height: 1; flex: none; }
.nalert-body { min-width: 0; flex: 1; }
.nalert-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-red); margin-bottom: 2px; }
.nalert.k-assigned .nalert-kind { color: var(--text-blue); }
.nalert-text { font-weight: 600; overflow-wrap: anywhere; }
.nalert-actions { display: flex; gap: 6px; margin-top: 8px; }
.nalert-actions .btn { margin: 0; }
.nalert-close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
@keyframes nalert-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nalert { animation: none; } }

/* ---- écran « Mes notifications » (#/notifications) ---- */
.notif-page .hero .muted { max-width: 760px; }
.np-hero { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; background: var(--tint-blue); color: var(--primary); flex: none; }
.np-hero .icon { width: 26px; height: 26px; }
.notif-page .panel { margin-bottom: 16px; }
.notif-page .cols { margin-bottom: 0; }
.np-grid td { vertical-align: middle; }
.np-grid .np-cell { text-align: center; width: 92px; }
.np-grid .np-cell .toggle { justify-content: center; }
.np-grid .np-section td { background: var(--surface-2); color: var(--subtle); font-weight: 700; font-size: 12px; padding-top: 10px; }
.np-grid tr.np-important td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.np-grid input:disabled { opacity: .35; cursor: not-allowed; }
.np-icon { display: inline-block; width: 22px; text-align: center; }
.np-slack-off { margin-top: 8px; }
.np-quick { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.np-quick .btn, .notif-page .panel > .btn { margin: 0; }
.np-opt { align-items: flex-start; margin-bottom: 12px; }
.np-opt input { flex: none; margin-top: 2px; }
.np-link { display: flex; align-items: center; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.np-link > div { flex: 1; min-width: 200px; }
.np-link .np-hero { width: 40px; height: 40px; } .np-link .np-hero .icon { width: 20px; height: 20px; }

@media (max-width: 640px) {
  #notifAlerts { right: 8px; left: 8px; width: auto; }
  /* La grille tient dans l'écran : pas de défilement horizontal (règle générale des tableaux de .agent-page). */
  .agent-page table.np-grid { display: table; white-space: normal; table-layout: fixed; }
  .np-grid th:first-child { width: auto; }
  .np-grid .np-cell { width: 50px; padding: 8px 0; }
  .np-grid th.np-cell { font-size: 9px; letter-spacing: 0; }
  .np-grid .toggle input { transform: scale(.8); }
  .np-grid .np-section td { white-space: normal; }
}