@keyframes bellPulse {
	0%, 100% { transform: scale(1); }
	25% { transform: scale(1.25); color: var(--bs-danger, #dc3545); }
	50% { transform: scale(1.1); }
	75% { transform: scale(1.15); }
}
.bell-pulse i.bi-bell { animation: bellPulse 0.5s ease-in-out 3; }

/* ═══════════════════════════════════════════════════════════════
   Notification Dropdown - Theme-Aware, Symmetrical Styling
   ═══════════════════════════════════════════════════════════════

   Problem: modern-redesign.css sets:
   - #mainNavbar { contain:layout style } → clips dropdown
   - #mainNavbar .dropdown-menu { overflow:hidden } → clips content
   - bg-light-subtle / text-dark → incompatible with dark mode

   Fix: Use CSS variables that adapt to both light and dark themes,
   plus a consistent rem-based grid for the badge/header/items/footer
   so the widget is symmetrical at any root font-size (accessibility
   widget included).
   ═══════════════════════════════════════════════════════════════ */

/* ── Badge - anchored to the bell icon's top-right corner.      ──
   ── left is measured from the nav-link center (icon center),  ──
   ── so the badge hugs the bell regardless of its own width    ──
   ── ("1" vs "99+") and never drifts over adjacent nav items.  ── */
.notification-badge {
	position: absolute !important;
	top: calc(50% - 0.5625rem) !important;
	left: calc(50% + 0.375rem) !important;
	transform: translate(-50%, -50%) !important;
	font-size: 0.46875rem !important;
	min-width: 0.8125rem !important;
	height: 0.8125rem !important;
	padding: 0 0.125rem !important;
	line-height: 0.8125rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 600 !important;
	z-index: 1050 !important;
}

[dir="rtl"] .notification-badge {
	left: auto !important;
	right: calc(50% + 0.375rem) !important;
	transform: translate(50%, -50%) !important;
}

/* ── Bell icon: the global `nav-link i { margin-right:4px }`   ──
   ── rule shifts icon-only links off-center; reset it so the   ──
   ── bell, badge and hover underline share one center axis.    ── */
#notificationBellToggle > i.bi-bell {
	margin-right: 0 !important;
}

/* ── Hover underline - centered under the bell icon.           ──
   ── The generic rule insets by nav-link padding (.75rem),     ──
   ── which centres on the link box, not the glyph; pinning it  ──
   ── to 50% + translateX(-50%) keeps it symmetrical.           ── */
#notificationBellToggle::after {
	left: 50% !important;
	right: auto !important;
	width: 1.375rem !important;
	transform: translateX(-50%) scaleX(0) !important;
	transform-origin: center;
}

#notificationBellToggle:hover::after,
#notificationBellToggle.show::after {
	transform: translateX(-50%) scaleX(1) !important;
}

/* ── Dropdown container - fixed width, escape navbar containment ──
   Uses position:fixed to escape #mainNavbar's `contain:layout style`.
   JS only updates the `top` value on open/scroll/resize; left/right/width
   are handled here so Bootstrap keeps full control of click events. */
#notificationDropdown.notification-dropdown {
	position: fixed !important;
	overflow: visible !important;
	z-index: 2000 !important;
	width: 22.5rem !important;    /* 360px */
	max-width: calc(100vw - 1rem) !important;
	background: var(--bs-body-bg, #fff) !important;
	border: 1px solid var(--ino-border-color, #f0f0f0) !important;
	border-radius: 0.75rem !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
	/* Default: right-aligned to viewport edge; JS overrides top on open */
	right: 0.5rem !important;
	top: 4rem !important;
}

[data-bs-theme="dark"] #notificationDropdown.notification-dropdown {
	background: var(--il-surface, #242526) !important;
	border-color: var(--il-border, #3E4042) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* ── Header - symmetrical padding, vertically centered actions ── */
.notif-header {
	padding: 0.875rem 1.125rem;
	background: var(--ino-bg-soft, #f7f7f7) !important;
	border-bottom: 1px solid var(--ino-border-color, #e0e0e0);
	border-top-left-radius: 0.75rem;
	border-top-right-radius: 0.75rem;
}

[data-bs-theme="dark"] .notif-header {
	background: var(--il-surface-2, #3A3B3C) !important;
	border-bottom-color: var(--il-border, #3E4042);
}

.notif-header-title {
	font-size: 0.9375rem;
	color: var(--bs-body-color, #1a1a2e);
}

[data-bs-theme="dark"] .notif-header-title {
	color: var(--il-text, #E4E6EB);
}

.notif-header-actions {
	gap: 0.875rem;
}

.notif-action-link {
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1;
}

.notif-action-primary {
	color: var(--bs-primary, #0d6efd);
}

.notif-action-danger {
	color: var(--bs-danger, #dc3545);
}

[data-bs-theme="dark"] .notif-action-primary {
	color: var(--il-accent, #6366f1);
}

[data-bs-theme="dark"] .notif-action-danger {
	color: #f87171;
}

.notif-action-link:hover {
	text-decoration: underline;
}

/* ── Notification list scroll area ── */
.notif-list {
	overflow-y: auto !important;
	max-height: 21.25rem; /* 340px */
}

/* ── Notification item - symmetrical 3-column layout:
   icon (fixed, centered) | content (flex-grow) | dot (fixed, centered) ── */
.notification-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem;
	padding: 0.875rem 1.125rem;
	border-bottom: 1px solid var(--ino-border-color, #e0e0e0);
	min-height: 3.5rem;
	color: inherit;
}

.notification-item:last-child {
	border-bottom: none;
}

[data-bs-theme="dark"] .notification-item {
	border-bottom-color: var(--il-border, #3E4042);
}

.notif-icon {
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	/* Isolate the icon glyph from inherited a11y typography: an inherited
	   letter-spacing widens the <i> box so flex centers the box (not the
	   glyph), and an inherited line-height taller than the glyph pushes
	   it up. Both visibly de-center the icon inside the circle. */
	line-height: 1;
	letter-spacing: normal;
	border-radius: 50%;
	background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
	/* Tint the circle with the icon's own semantic color (text-{color}),
	   so a danger icon sits on a red circle, success on green, etc.
	   Falls back to the primary tint above where color-mix is unsupported. */
	background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Bootstrap Icons glyphs carry vertical-align:-.125em for inline text
   alignment - inside a fixed circle that drops them ~2px below center. */
.notif-icon i::before {
	vertical-align: 0;
}

/* The global `#mainNavbar .dropdown-menu .dropdown-item i` rule
   (font-size:.72rem; width:18px; margin-right:6px; opacity:.6) exists for
   icon+label menu items, but it also hits the icon inside the round badge
   of every notification item: the trailing 6px margin widens the flex
   item, so the glyph centers left, and the glyph is shrunk and dimmed.
   Specificity (1,4,1) beats the global rule's (1,3,1). */
#mainNavbar .dropdown-menu .dropdown-item.notification-item .notif-icon i {
	width: auto;
	margin-right: 0;
	font-size: inherit;
	opacity: 1;
}

.notif-content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.notif-title {
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notif-details {
	font-size: 0.75rem;
	color: var(--bs-secondary-color, #6c757d);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
}

.notif-meta {
	font-size: 0.75rem;
	color: var(--bs-secondary-color, #6c757d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notif-meta-primary { color: var(--bs-primary, #0d6efd); }
.notif-meta-success { color: var(--bs-success, #198754); font-weight: 600; }

[data-bs-theme="dark"] .notif-meta-primary { color: var(--il-accent, #6366f1); }

.notif-time {
	font-size: 0.6875rem;
	color: var(--bs-secondary-color, #6c757d);
	margin-top: 0.125rem;
}

/* ── Unread dot - fixed-width column so items stay aligned
   whether the dot is present or not ── */
.notif-dot-wrap {
	flex: 0 0 0.75rem;
	width: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notif-dot {
	display: block;
	width: 0.375rem;   /* 6px */
	height: 0.375rem;  /* 6px */
	border-radius: 50%;
	background-color: var(--bs-primary, #0d6efd);
}

[data-bs-theme="dark"] .notif-dot {
	background-color: var(--il-accent, #6366f1);
}

/* ── Theme-aware unread/read row background ── */
.notification-item.notif-unread {
	background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06) !important;
}

.notification-item.notif-read {
	background: transparent !important;
}

[data-bs-theme="dark"] .notification-item.notif-unread {
	background: rgba(var(--bs-primary-rgb, 99, 102, 241), 0.12) !important;
}

/* ── Title colors - theme-aware ── */
.notif-title-unread {
	color: var(--bs-body-color, #1a1a2e) !important;
}

.notif-title-read {
	color: var(--bs-secondary-color, #6c757d) !important;
	font-weight: 500 !important;
}

[data-bs-theme="dark"] .notif-title-unread {
	color: var(--il-text, #E4E6EB) !important;
}

[data-bs-theme="dark"] .notif-title-read {
	color: var(--il-text-3, #8A8D91) !important;
}

/* ── Hover state ── */
.notification-item:hover,
.notification-item:focus-visible {
	background: var(--ino-bg-hover, #f1f1f1) !important;
	text-decoration: none;
}

[data-bs-theme="dark"] .notification-item:hover,
[data-bs-theme="dark"] .notification-item:focus-visible {
	background: var(--il-surface-2, #3A3B3C) !important;
}

.notification-item:focus-visible {
	outline: 2px solid var(--bs-primary, #0d6efd);
	outline-offset: -2px;
}

/* ── Empty state ── */
.notif-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--bs-secondary-color, #6c757d);
}

.notif-empty i {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 0.5rem;
	opacity: 0.6;
}

[data-bs-theme="dark"] .notif-empty {
	color: var(--il-text-3, #8A8D91);
}

/* ── Footer - centered link ── */
.notif-footer {
	text-align: center;
	padding: 0.75rem 1.125rem;
	border-top: 1px solid var(--ino-border-color, #e0e0e0);
	border-bottom-left-radius: 0.75rem;
	border-bottom-right-radius: 0.75rem;
}

[data-bs-theme="dark"] .notif-footer {
	border-top-color: var(--il-border, #3E4042);
}

.notif-footer-link {
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--bs-primary, #0d6efd);
}

.notif-footer-link:hover {
	text-decoration: underline;
}

[data-bs-theme="dark"] .notif-footer-link {
	color: var(--il-accent, #6366f1);
}

/* ── Mobile: full-width dropdown ── */
@media (max-width: 575.98px) {
	#notificationDropdown.notification-dropdown {
		left: 0.5rem !important;
		right: 0.5rem !important;
		width: calc(100vw - 1rem) !important;
		max-width: calc(100vw - 1rem) !important;
	}
}