/* ==========================================================================
   Notifications — History page with filters and preferences panel
   ========================================================================== */

.notifications-page {
	max-width: var(--sc-content-max);
	margin: 0 auto;
}

.notifications-unread-badge {
	display: inline-block;
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-xs);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-accent);
	background: var(--sc-accent-subtle);
	padding: 2px 8px;
	border-radius: var(--sc-radius-full);
	vertical-align: middle;
	margin-left: var(--sc-space-xs);
}

.notifications-actions {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
}

/* ── Filters ────────────────────────────────────────────────────────────── */

.notifications-filters {
	display: flex;
	gap: var(--sc-space-xs);
	margin-bottom: var(--sc-space-lg);
	flex-wrap: wrap;
}

/* ── Empty State ────────────────────────────────────────────────────────── */

.notifications-empty {
	padding: var(--sc-space-3xl) var(--sc-space-md);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Notification Items ─────────────────────────────────────────────────── */

.notification-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sc-space-md);
	padding: var(--sc-space-md);
	border-bottom: var(--sc-border-width) solid var(--sc-border-subtle);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--sc-transition-fast) var(--sc-ease-default);
}

.notification-item:hover {
	background: var(--sc-cream-dark);
}

.notification-item--unread {
	background: rgba(193, 122, 58, 0.04);
}

.notification-item__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--sc-radius-full);
	color: var(--sc-text-inverse);
}

.notification-item__icon svg {
	width: 1rem;
	height: 1rem;
}

.notification-item__body {
	flex: 1;
	min-width: 0;
}

.notification-item__text {
	font-family: var(--sc-font-body);
	font-size: var(--sc-text-sm);
	color: var(--sc-text-primary);
	line-height: 1.5;
}

.notification-item__time {
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-xs);
	color: var(--sc-text-tertiary);
	margin-top: 2px;
}

.notification-item__unread-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--sc-radius-full);
	background: var(--sc-accent);
	flex-shrink: 0;
	margin-top: var(--sc-space-xs);
}

/* ── Day Group Headers ──────────────────────────────────────────────────── */

.notification-day-header {
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-xs);
	font-weight: var(--sc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sc-tracking-wide);
	color: var(--sc-text-tertiary);
	padding: var(--sc-space-sm) var(--sc-space-md);
	background: var(--sc-cream-dark);
	position: sticky;
	top: var(--sc-nav-height);
	z-index: 1;
}