/* ═══════════════════════════════════════════════════════════════════
   Notification Center — Bell icon, dropdown, read/unread states
   ═══════════════════════════════════════════════════════════════════ */

/* ── Topbar Clickable Items (Notifications, Need Help) ────────── */
.header-element.sa-topbar-action {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 1rem;
	border-inline: 1px solid rgba(255, 255, 255, 0.15);
	transition: background-color 0.15s ease;
}
.sa-topbar-action:hover {
	background-color: rgba(255, 255, 255, 0.15);
}
.sa-topbar-action-inner {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
}
a.sa-topbar-action-inner {
	color: #fff;
}

/* ── Topbar Date/Time (non-clickable) ─────────────────────────── */
.sa-topbar-datetime {
	display: flex;
	align-items: center;
	padding: 0 1rem;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	gap: 0.25rem;
}

/* ── Topbar role pill — quiet flag for "you're in the admin
   experience right now" (customer sessions don't get one, that's
   the default and needs no callout). Sits beside the date/time.
   .header-element is `display:flex; align-items:stretch` — without an
   explicit align-self this pill stretched to the full topbar height,
   rendering as a tall rounded box instead of a small chip. */
.sa-topbar-role-pill {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.28rem 0.65rem;
	line-height: 1;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #17304f;
	background: var(--sa-secondary-color, #27c8f6);
	border-radius: 999px;
	white-space: nowrap;
}
.sa-topbar-role-pill::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #17304f;
	flex-shrink: 0;
}

/* ── Topbar compliance contact (Active Pharm, entity 2000, only) —
   email + phone must be visible on every page, admin and customer, at
   all times, per regulatory requirement. Unlike the role pill above,
   this must never disappear at any breakpoint, so it deliberately does
   NOT use the d-none/d-xl-flex classes some other topbar items use. The
   mobile override (mobile.css) shrinks the label text to icon-only tap
   targets instead of hiding anything — the mailto:/tel: links stay
   present and functional at every screen size. */
.sa-topbar-contact {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0 1rem;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
}
.sa-topbar-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: #fff;
	opacity: 0.85;
	text-decoration: none;
}
.sa-topbar-contact__link:hover {
	opacity: 1;
	text-decoration: underline;
	color: #fff;
}
.sa-topbar-contact__link i {
	font-size: 0.85rem;
	flex-shrink: 0;
	color: #fff;
}
.sa-topbar-contact__divider {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

/* ── Utility Topbar (Active Pharm, entity 2000, only) ─────────────
   A slim strip fixed above .app-header for Date/Time and the compliance
   Email/Phone contact — both used to live inline in the main header next
   to Search/Cart/Notifications/Account, which overlapped once Active
   Pharm's extra header items (Cart, contact) piled onto the framework's
   defaults. Markup lives in api/views/layouts.php (both header variants),
   gated by $_brandEntityId === 2000; the offset rules below are gated by
   html[data-entity="2000"] (set on <html> by both variants) so every
   other tenant keeps the framework's untouched default positioning. */
html[data-entity="2000"] {
	--sa-utility-bar-h: 28px;
}

/* z-index 101 — above .app-header (100) so it sits in the same row visually,
   but BELOW .app-sidebar (103) so the sidebar's own opaque background
   occludes the utility bar's left edge exactly the way .app-header already
   does (see .app-header's z-index:100 vs .app-sidebar's z-index:103 in
   styles.css) — the sidebar stays at its normal inset-block-start:0/height:
   100%, no pushing it down, so this "let the taller stack occlude the
   lower one" trick works without knowing the sidebar's current width
   (which changes between expanded/collapsed-rail/off-canvas-mobile). */
.sa-utility-topbar {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--sa-utility-bar-h);
	z-index: 101;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--sa-primary-color, #21436c);
	border-block-end: 1px solid rgba(255, 255, 255, 0.1);
	padding-inline: 1rem;
	overflow: hidden;
}
/* Dark mode: the full-brightness brand color read as a light-mode strip
   pasted onto an otherwise near-black UI. Mix it down toward the same
   near-black base the rest of the app uses in dark mode instead of
   showing the raw brand color at full strength — text stays white either
   way, so this only improves contrast. */
[data-theme-mode="dark"] .sa-utility-topbar {
	background: color-mix(in srgb, var(--sa-primary-color, #21436c) 45%, #0d0d0d);
	border-block-end-color: rgba(255, 255, 255, 0.06);
}
.sa-utility-topbar__left,
.sa-utility-topbar__right {
	display: flex;
	align-items: center;
	min-width: 0;
}
.sa-utility-topbar__sep {
	opacity: 0.4;
	margin-inline: 0.5rem;
}
.sa-utility-topbar .sa-topbar-datetime {
	padding: 0;
	font-size: 0.7rem;
	opacity: 0.7;
}
.sa-utility-topbar .sa-topbar-contact {
	padding: 0;
	font-size: 0.7rem;
}

/* Shift the fixed header/content down by the utility bar's height so
   neither overlaps it — entity 2000 only. The sidebar deliberately does
   NOT shift (see the z-index comment on .sa-utility-topbar above) — it
   stays full height from the very top and visually covers the utility
   bar's left edge on its own. */
html[data-entity="2000"] .app-header {
	inset-block-start: var(--sa-utility-bar-h);
}
@media (min-width: 992px) {
	html[data-entity="2000"] .app-content {
		margin-block-start: calc(4rem + var(--sa-utility-bar-h));
		max-height: calc(100vh - 120px - var(--sa-utility-bar-h));
	}
}
@media (max-width: 991.98px) {
	html[data-entity="2000"] .app-content {
		margin-block-start: calc(52px + var(--sa-utility-bar-h)) !important;
	}
	.sa-utility-topbar {
		padding-inline: 0.6rem;
		gap: 0.5rem;
	}
	.sa-utility-topbar .sa-topbar-contact {
		gap: 0.4rem;
		font-size: 0.66rem;
	}
	.sa-utility-topbar .sa-topbar-contact__link i {
		font-size: 0.85rem;
	}
}
@media (max-width: 380px) {
	.sa-utility-topbar .sa-topbar-contact__text {
		font-size: 0;
	}
	.sa-utility-topbar .sa-topbar-contact__link i {
		font-size: 1rem;
	}
}

/* ── Bell Icon ─────────────────────────────────────────────────── */
.sa-notification-bell {
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.sa-notification-bell:hover {
	opacity: 0.8;
}
.sa-notification-badge {
	position: relative;
	top: -6px;
	margin-left: 4px;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	color: #fff;
	background: #dc3545;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ── Dropdown Panel ────────────────────────────────────────────── */
.sa-notification-dropdown {
	width: 475px;
	max-height: 480px;
	padding: 0 !important;
	background: #fff;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
	border-radius: 0 !important;
}
.sa-notification-header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: #fafafa;
	border-bottom: 1px solid #eee;
}
.sa-notification-header h6 {
	font-size: 0.9rem;
}
.sa-notification-header-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}
.sa-notification-header-actions a {
	font-size: 0.75rem;
	color: var(--primary-color, #0d6efd);
	text-decoration: none;
	white-space: nowrap;
}
.sa-notification-header-actions a:hover {
	text-decoration: underline;
}
.sa-notification-body {
	max-height: 360px;
	overflow-y: auto;
}
.sa-notification-footer {
	padding: 0.5rem 1rem;
	border-top: 1px solid #e9ecef;
	text-align: center;
}

/* ── Individual Notification Item ──────────────────────────────── */
.sa-notif-item {
	display: flex;
	align-items: center;
	position: relative;
	border-bottom: 1px solid #f0f1f3;
	transition: background 0.15s ease;
	background: rgba(13, 110, 253, 0.04);
}
.sa-notif-item:hover {
	background: rgba(13, 110, 253, 0.08);
}
.sa-notif-item:last-child {
	border-bottom: none;
}

/* ── Read State ────────────────────────────────────────────────── */
.sa-notif-item--read {
	background: transparent;
}
.sa-notif-item--read:hover {
	background: #f8f9fa;
}
.sa-notif-item--read .sa-notif-title {
	font-weight: 500;
	color: #6c757d;
}
.sa-notif-item--read .sa-notif-message {
	color: #adb5bd;
}
.sa-notif-item--read .sa-notif-meta {
	color: #adb5bd;
}
.sa-notif-item--read .sa-notif-time {
	color: #ced4da;
}

/* ── Unread Dot ────────────────────────────────────────────────── */
.sa-notif-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0d6efd;
	flex-shrink: 0;
	margin-top: 4px;
}
.sa-notif-item--read .sa-notif-dot {
	visibility: hidden;
}

/* Link inside notification item (clickable area) */
.sa-notif-link {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.65rem 2.5rem 0.65rem 0.75rem;
	flex: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.sa-notif-link:hover {
	color: inherit;
}

.sa-notif-content {
	flex: 1;
	min-width: 0;
}
.sa-notif-title {
	font-size: 0.8rem;
	font-weight: 600;
	color: #212529;
	margin-bottom: 0.125rem;
}
.sa-notif-message {
	font-size: 0.75rem;
	color: #6c757d;
	line-height: 1.4;
}
.sa-notif-meta {
	font-size: 0.7rem;
	color: #6c757d;
	margin-top: 0.125rem;
}
.sa-notif-time {
	font-size: 0.65rem;
	color: #adb5bd;
	white-space: nowrap;
	margin-top: 0.125rem;
	flex-shrink: 0;
}

/* ── Dismiss Button (X) ──────────────────────────────────────── */
.sa-notif-dismiss {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	color: #adb5bd;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	transition: all 0.15s ease;
}
.sa-notif-dismiss:hover {
	background: #e9ecef;
	color: #495057;
}

/* ── Notification Checkbox ─────────────────────────────────────── */
.sa-notif-checkbox-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	padding-left: 0.5rem;
	cursor: pointer;
	align-self: center;
}
.sa-notif-checkbox {
	width: 14px;
	height: 14px;
	cursor: pointer;
	accent-color: var(--primary-color, #0d6efd);
}

/* ── Action Buttons ──────────────────────────────────────────── */
.sa-notif-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	background: #fff;
	color: #6c757d;
	font-size: 0.8rem;
	cursor: pointer;
	transition: all 0.15s ease;
	padding: 0;
}
.sa-notif-action-btn--labeled {
	width: auto;
	height: 28px;
	padding: 0 0.5rem;
	gap: 0.3rem;
	font-size: 0.7rem;
	font-weight: 500;
}
.sa-notif-action-btn:hover:not(:disabled) {
	background: #f0f1f3;
	color: #212529;
	border-color: #adb5bd;
}
.sa-notif-action-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.sa-notif-action-btn--danger:hover:not(:disabled) {
	background: #fff5f5;
	color: #dc3545;
	border-color: #dc3545;
}
.sa-notif-action-divider {
	display: inline-block;
	width: 1px;
	height: 20px;
	background: #dee2e6;
	margin: 0 0.25rem;
}

/* ── Row Highlight (notification click-through) ──────────────── */
.sa-row-highlight td {
	background: rgba(13, 110, 253, 0.25) !important;
}
.sa-row-highlight--fade td {
	background: transparent !important;
	transition: background 2.5s ease;
}

/* ─── Dark mode ────────────────────────────────────────────── */
[data-theme-mode="dark"] .sa-notification-dropdown {
	background: #202020 !important;
	border-color: #303030 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme-mode="dark"] .sa-notification-header {
	background: #222222 !important;
	border-bottom-color: #303030 !important;
}
[data-theme-mode="dark"] .sa-notification-footer {
	border-top-color: #303030 !important;
}
[data-theme-mode="dark"] .sa-notif-item {
	border-bottom-color: #303030 !important;
}
[data-theme-mode="dark"] .sa-notif-item:hover,
[data-theme-mode="dark"] .sa-notif-item--unread {
	background: #222222 !important;
}
[data-theme-mode="dark"] .sa-notif-action-btn {
	background: #222222 !important;
	border-color: #303030 !important;
	color: #AAAAAA !important;
}
[data-theme-mode="dark"] .sa-notif-action-btn:hover:not(:disabled) {
	background: #303030 !important;
	color: #E8E8E8 !important;
	border-color: #3E3E3E !important;
}
[data-theme-mode="dark"] .sa-notif-action-btn--danger:hover:not(:disabled) {
	background: rgba(220, 53, 69, 0.15) !important;
	color: #f87171 !important;
	border-color: rgba(220, 53, 69, 0.4) !important;
}
[data-theme-mode="dark"] .sa-notif-action-divider { background: #303030 !important; }