/**
 * IISAUH THEME2026 — Notifications System & Page Stylesheet
 *
 * @package IISAUH_Theme2026
 */

/* ==========================================================================
   1. NOTIFICATION HERO BANNER & BREADCRUMBS
   ========================================================================== */

.notification-page {
	background: #f8fafc;
	min-height: 100vh;
}

.notification-hero {
	position: relative;
	padding: clamp(32px, 3.5vw, 48px) 0 clamp(32px, 3.5vw, 48px);
	background: linear-gradient(135deg, #091a30 0%, #0f2a4a 45%, #0d3859 80%, #07223b 100%);
	color: #ffffff;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notification-hero__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.notification-hero__glow {
	position: absolute;
	top: -30%;
	right: 5%;
	width: clamp(300px, 40vw, 600px);
	height: clamp(300px, 40vw, 600px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 168, 150, 0.28) 0%, rgba(0, 168, 150, 0) 70%);
	filter: blur(40px);
}

.notification-hero__glow--left {
	top: 20%;
	left: -10%;
	background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 70%);
}

.notification-hero__pattern {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 0.7;
}

/* Floating Notification Icons (Slow Drift) */
.notif-floating-icon {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	color: #38bdf8;
	opacity: 0.28;
	filter: drop-shadow(0 0 8px rgba(0, 168, 150, 0.25));
	will-change: transform;
}

.notif-floating-icon svg {
	display: block;
}

.notif-floating-icon--1 {
	top: 18%;
	left: 28%;
	color: #38bdf8;
	opacity: 0.28;
	animation: notifFloatSlow1 24s ease-in-out infinite alternate;
}

.notif-floating-icon--2 {
	top: 52%;
	left: 45%;
	color: #02c4ae;
	opacity: 0.24;
	animation: notifFloatSlow2 28s ease-in-out infinite alternate;
}

.notif-floating-icon--3 {
	top: 20%;
	right: 18%;
	color: #38bdf8;
	opacity: 0.26;
	animation: notifFloatSlow3 26s ease-in-out infinite alternate;
}

.notif-floating-icon--4 {
	bottom: 22%;
	left: 10%;
	color: #00a896;
	opacity: 0.22;
	animation: notifFloatSlow1 30s ease-in-out infinite alternate;
}

.notif-floating-icon--5 {
	top: 66%;
	right: 12%;
	color: #38bdf8;
	opacity: 0.25;
	animation: notifFloatSlow2 22s ease-in-out infinite alternate;
}

.notif-floating-icon--6 {
	top: 14%;
	left: 6%;
	color: #02c4ae;
	opacity: 0.22;
	animation: notifFloatSlow3 25s ease-in-out infinite alternate;
}

@keyframes notifFloatSlow1 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(14px, -18px) rotate(6deg); }
	100% { transform: translate(-10px, 12px) rotate(-4deg); }
}

@keyframes notifFloatSlow2 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(-16px, 15px) rotate(-8deg); }
	100% { transform: translate(12px, -10px) rotate(5deg); }
}

@keyframes notifFloatSlow3 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	50%  { transform: translate(10px, 16px) rotate(5deg); }
	100% { transform: translate(-14px, -12px) rotate(-7deg); }
}

.notification-hero__shell {
	position: relative;
	z-index: 2;
	width: min(100%, var(--container-max, 1680px));
	max-width: var(--container-max, 1680px);
	margin: 0 auto;
	padding: 0 var(--gutter, clamp(16px, 3.5vw, 40px));
	box-sizing: border-box;
}

.notification-hero__breadcrumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 16px;
}

.notification-hero__breadcrumbs a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
}

.notification-hero__breadcrumbs a:hover {
	color: var(--teal, #00a896);
}

.notification-hero__breadcrumbs span.sep {
	opacity: 0.45;
	font-size: 11px;
}

.notification-hero__title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #ffffff;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.notification-hero__title-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #00a896;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.notification-hero__intro {
	font-size: clamp(14px, 1.3vw, 16px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	max-width: 680px;
	margin: 0;
}

/* ==========================================================================
   2. NOTIFICATIONS APP CONTAINER & CONTROLS
   ========================================================================== */

.notification-body-section {
	padding: clamp(36px, 5vw, 64px) 0 clamp(60px, 8vw, 100px);
}

.notification-body-section .container {
	width: min(100%, var(--container-max, 1680px));
	max-width: var(--container-max, 1680px);
	margin: 0 auto;
	padding: 0 var(--gutter, clamp(16px, 3.5vw, 40px));
	box-sizing: border-box;
}

/* App 2-Column Grid Layout: Sidebar on Left, Listing on Right */
.iisauh-notifications-app {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Left Sidebar: Category Navigation
   -------------------------------------------------------------------------- */
.notif-sidebar {
	position: sticky;
	top: 100px;
}

.notif-sidebar__card {
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(15, 42, 74, 0.04);
}

.notif-sidebar__title {
	font-size: 13px;
	font-weight: 700;
	color: #0f2a4a;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 14px 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	gap: 8px;
}

.notif-sidebar__title svg {
	color: var(--teal, #00a896);
}

/* Category Filter Tabs in Sidebar */
.notif-tabs-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.notif-tab {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: #475569;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 13.5px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.notif-tab:hover {
	background: #f8fafc;
	color: #0f2a4a;
}

.notif-tab.is-active {
	background: #0f2a4a;
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(15, 42, 74, 0.15);
}

.notif-tab__label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notif-tab__count {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: #f1f5f9;
	color: #64748b;
	transition: all 0.2s ease;
	flex-shrink: 0;
	margin-left: 8px;
}

.notif-tab.is-active .notif-tab__count {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Right Main Column: Search Header & Listing
   -------------------------------------------------------------------------- */
.notif-main-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	width: 100%;
}

.notif-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin-bottom: 2px;
}

/* Quick Search Input */
.notif-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.notif-search-icon {
	position: absolute;
	left: 12px;
	color: #94a3b8;
	pointer-events: none;
	display: flex;
	align-items: center;
}

.notif-search-input {
	width: 100%;
	appearance: none;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	padding: 8px 36px 8px 38px;
	font-size: 13px;
	font-family: inherit;
	color: #0f2a4a;
	outline: none;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.notif-search-input:focus {
	border-color: var(--teal, #00a896);
	box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.15);
}

.notif-search-clear {
	position: absolute;
	right: 10px;
	background: #e2e8f0;
	border: none;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #475569;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background 0.15s ease;
}

.notif-search-clear:hover {
	background: #cbd5e1;
	color: #0f172a;
}

/* ==========================================================================
   3. NOTIFICATIONS CARDS & LISTING (Compact Modern Strip Design)
   ========================================================================== */

.notif-listing {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.notif-card {
	position: relative;
	background: #ffffff;
	border-radius: 10px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 3px rgba(15, 42, 74, 0.04);
	transition:
		transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.22s ease;
	overflow: hidden;
}

.notif-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--teal, #00a896) 0%, #0f2a4a 100%);
	opacity: 0.85;
	transition: width 0.22s ease, opacity 0.22s ease;
}

.notif-card:hover {
	transform: translateY(-1px);
	border-color: #cbd5e1;
	box-shadow: 0 6px 20px rgba(15, 42, 74, 0.08);
}

.notif-card:hover::before {
	width: 6px;
	opacity: 1;
}

.notif-card__hitbox {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 18px;
	color: inherit;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}

/* Left Icon Column */
.notif-card__icon-col {
	flex-shrink: 0;
}

.notif-pdf-badge {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.notif-card:hover .notif-pdf-badge {
	background: #dc2626;
	color: #ffffff;
	border-color: #dc2626;
	box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25);
}

.notif-pdf-badge svg {
	width: 18px;
	height: 18px;
}

/* Middle Content Column */
.notif-card__content-col {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.notif-card__title {
	font-size: 14.5px;
	font-weight: 600;
	color: #0f2a4a;
	margin: 0;
	line-height: 1.35;
	transition: color 0.15s ease;
}

.notif-card:hover .notif-card__title {
	color: var(--teal, #00a896);
}

.notif-card__meta-tags {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.notif-cat-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(0, 168, 150, 0.1);
	color: #008f80;
	border: 1px solid rgba(0, 168, 150, 0.2);
}

.notif-ref-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 10.5px;
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

.notif-new-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #fef3c7;
	color: #b45309;
	border: 1px solid #fde68a;
}

.notif-filesize {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	color: #94a3b8;
}

/* Right Action Button Column */
.notif-card__action-col {
	flex-shrink: 0;
}

.notif-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 6px;
	background: #f1f5f9;
	color: #0f2a4a;
	font-size: 12.5px;
	font-weight: 600;
	border: 1px solid #e2e8f0;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.notif-card:hover .notif-btn {
	background: #0f2a4a;
	color: #ffffff;
	border-color: #0f2a4a;
	box-shadow: 0 3px 10px rgba(15, 42, 74, 0.18);
}

.notif-btn svg {
	transition: transform 0.2s ease;
}

.notif-card:hover .notif-btn svg {
	transform: translate(2px, -2px);
}

/* Empty States */
.notif-empty-state,
.notif-no-results {
	background: #ffffff;
	border: 1px dashed #cbd5e1;
	border-radius: 16px;
	padding: clamp(40px, 6vw, 64px) 24px;
	text-align: center;
	margin: 20px 0;
}

.notif-empty-state__icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #94a3b8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.notif-empty-state__title {
	font-size: 19px;
	font-weight: 700;
	color: #0f2a4a;
	margin: 0 0 8px;
}

.notif-empty-state__desc {
	font-size: 14px;
	color: #64748b;
	max-width: 440px;
	margin: 0 auto;
	line-height: 1.6;
}

/* ==========================================================================
   4. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 991px) {
	.iisauh-notifications-app {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.notif-sidebar {
		position: static;
	}

	.notif-sidebar__card {
		padding: 14px 16px;
	}

	.notif-tabs-wrap {
		flex-direction: row;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}

	.notif-tab {
		width: auto;
		flex-shrink: 0;
		border: 1px solid #e2e8f0;
		background: #ffffff;
		border-radius: 999px;
		padding: 7px 14px;
		font-size: 12.5px;
	}

	.notif-tab.is-active {
		border-color: #0f2a4a;
	}
}

@media (max-width: 768px) {
	.notif-floating-icon {
		opacity: 0.15;
		transform: scale(0.8);
	}

	.notif-card__hitbox {
		padding: 11px 14px;
		gap: 12px;
		flex-wrap: wrap;
	}

	.notif-card__action-col {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 4px;
	}

	.notif-btn {
		width: 100%;
		justify-content: center;
		padding: 8px 14px;
	}
}