/* =============================================================
   Notifications Panel — built/notifications.css
   Bootstrap modal override — follows the same pattern as
   #new_features_popup in common.css.
   All values use design-token variables from abstract/variables.css.
   Do NOT add hardcoded hex colours here.
   ============================================================= */

/* ── Modal positioning (mirrors #new_features_popup pattern) ── */
#ap_notifications_panel {
	overflow: hidden;
}
#ap_notifications_panel.modal.left .modal-dialog {
	margin: auto;
	width: 40rem;
	height: 100%;
	margin-left: calc(var(--primarynav-width) - 0.089rem);
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}
#ap_notifications_panel.modal.left .modal-content {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
#ap_notifications_panel.modal.left.fade .modal-dialog {
	left: -40rem;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
	        transition: opacity 0.3s linear, left 0.3s ease-out;
}
#ap_notifications_panel.modal.left.fade.in .modal-dialog {
	left: 0;
}
#ap_notifications_panel .modal-content {
	background-color: var(--Base-Colors-Base-White);
	border: none;
	border-radius: 0;
	box-shadow: 0.214rem 0 1.071rem var(--Neutral-Colors-Alpha-Neutrals-200);
}

/* ── Panel header (Bootstrap modal-header handles layout) ─── */
#ap_notifications_panel .modal-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--Spacing-2XL) var(--Spacing-4XL);
	border-bottom: 0.089rem solid var(--Neutral-Colors-Main-Neutrals-100);
	background-color: var(--Base-Colors-Base-White);
	position: sticky;
	top: 0;
	z-index: 2;
}
.ap-notif__title {
	flex: 1;
	margin: 0;
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-SemiBold);
	color: var(--Text-High);
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--Spacing-L);
}
#ap_notifications_panel button.close {
	border-radius: inherit;
	min-width: auto;
	right: 0;
	width: 36px;
	color: var(--Base-Colors-Base-Black);
}
#ap_notifications_panel button.close:hover {
	background-color: var(--Brand-Colors-Primary-100);
	opacity: 0.9;
}
#ap_notifications_panel button.close i.material-icons {
	color: var(--Neutral-Colors-Main-Neutrals-500);
}
#ap_notifications_panel button.close:hover i.material-icons {
	color: var(--Brand-Colors-Primary-700);
}
.ap-notif__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 var(--Spacing-S);
	color: var(--Neutral-Colors-Main-Neutrals-600);
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-SemiBold);
	border-radius: var(--Radius-Null);
	line-height: 1;
}

/* ── Search + filter toolbar ──────────────────────────────── */
.ap-notif__toolbar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--Spacing-L);
	padding: var(--Spacing-XL) var(--Spacing-3XL);
	background-color: var(--Neutral-Colors-Main-Neutrals-25);
}
/* ba-input-group fills the search wrap */
.ap-notif__search-wrap {
	flex: 1;
	min-width: 0;
}
.ap-notif__search-wrap input {
	border: none;
	height: 4rem;
	box-shadow: 0 1px 2px 0 var(--Neutral-Colors-Alpha-Neutrals-100);
}
.ap-notif__search-wrap .ba-input-group {
	width: 100%;
}

/* filter wrap shrinks to button width */
.ap-notif__filter-wrap {
	flex-shrink: 0;
}
.ap-notif__filter-wrap button {
	border: none;
	color: var(--Neutral-Colors-Main-Neutrals-600) !important;
	background-color: var(--Base-Colors-Base-White) !important;
	height: 4rem;
	box-shadow: 0 1px 2px 0 var(--Neutral-Colors-Alpha-Neutrals-100) !important;
}
.ap-notif__filter-wrap .ba-dropdown__menu {
	min-width: 16rem;
	right: 0;
	left: auto;
	border: 0.089rem solid var(--Neutral-Colors-Main-Neutrals-100);
	border-radius: var(--Radius-M);
	box-shadow: 0 var(--Spacing-L) var(--Spacing-3XL) var(--Neutral-Colors-Alpha-Neutrals-200);
	overflow: hidden;
}

/* ── Two-pane (Status / Time) filter — multi-dropdown ─────── */
.ap-notif__filter-wrap.ba-dropdown--multi-dropdown .ba-dropdown__menu {
	min-width: 28rem;
}
.ap-notif__filter-wrap .ba-dropdown__body-wrapper {
	display: flex;
	flex-direction: row;
	gap: 0;
}
.ap-notif__filter-wrap .ba-dropdown__body-wrapper .ba-dropdown__body-items.scroll-thin {
	padding: 0 var(--Spacing-2XL);
}
.ap-notif__filter-wrap .ba-dropdown__body-wrapper .ba-dropdown__body-items .ba-dropdown__item {
	font-weight: var(--Weight-Medium);
}
.ap-notif__filter-wrap .ba-dropdown__sidebar {
	flex: 0 0 11rem;
	border-right: 0.089rem solid var(--Neutral-Colors-Main-Neutrals-100);
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: var(--Spacing-S);
}
.ap-notif__filter-wrap .ba-dropdown__sidebar .ba-dropdown__item {
	font-weight: var(--Weight-Medium);
	color: var(--Neutral-Colors-Alpha-Neutrals-1000);
}
.ap-notif__filter-wrap .ba-dropdown__content {
	flex: 1;
	display: none;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: var(--Spacing-S);
}
/* Hidden radios drive which content pane shows (no JS) */
.ap-notif__filter-wrap .ba-dropdown-input { display: none; }
.ap-notif__filter-wrap .ba-dropdown-input:checked + .ba-dropdown__content { display: flex; }
/* Trailing icons: chevron on categories, check on selected option */
.ap-notif__filter-wrap .ba-dropdown__item > .icon-arrow { margin-left: auto; font-size: var(--Font-Size-4); }
.ap-notif__filter-wrap .ba-dropdown__item > .icon       { margin-left: auto; font-size: var(--Font-Size-4); opacity: 0; }
.ap-notif__filter-wrap .ba-dropdown__item.dropdown-select > .icon { opacity: 1; color: var(--Brand-Colors-Primary-700); }
.ap-notif__filter-wrap .ba-dropdown__item.dropdown-select {
	color: var(--Brand-Colors-Primary-700);
	background: var(--Brand-Colors-Primary-100);
	border-radius: var(--Radius-M);
}
/* ── Section header (TODAY / Mark all as Read) ────────────── */
.ap-notif__section-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--Spacing-XL) var(--Spacing-M) var(--Spacing-L);
}
.ap-notif__section-label {
	font-size: var(--Font-Size-3);
	font-weight: var(--Weight-SemiBold);
	color: var(--Neutral-Colors-Alpha-Neutrals-700);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.ap-notif__mark-all {
	font-size: 1.1rem;
	font-weight: var(--Weight-Medium);
	color: var(--Neutral-Colors-Alpha-Neutrals-700);
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.ap-notif__mark-all:hover {
	opacity: 0.75;
}

/* ── Notification list ────────────────────────────────────── */
.ap-notif__list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--Spacing-L) var(--Spacing-3XL) var(--Spacing-2XL);
	background-color: var(--Neutral-Colors-Main-Neutrals-25);
}
.ap-notif__list::-webkit-scrollbar       { width: 0.357rem; }
.ap-notif__list::-webkit-scrollbar-track { background: transparent; }
.ap-notif__list::-webkit-scrollbar-thumb {
	background: var(--Neutral-Colors-Main-Neutrals-200);
	border-radius: var(--Radius-Null);
}

/* ── Notification item (bordered card) ────────────────────── */
.ap-notif-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--Spacing-XL);
	padding: var(--Spacing-2XL) var(--Spacing-2XL);
	margin-bottom: var(--Spacing-XL);
	background: var(--Base-Colors-Base-White);
	border: 0.089rem solid var(--Neutral-Colors-Main-Neutrals-100);
	border-radius: var(--Radius-L);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	box-shadow: 0 1px 2px 0 var(--Neutral-Colors-Alpha-Neutrals-100);
	cursor: pointer;
}
.ap-notif-item:last-child { margin-bottom: 0; }
.ap-notif-item:hover {
	border-color: var(--Brand-Colors-Primary-300);
	box-shadow: 0 var(--Spacing-S) var(--Spacing-XL) var(--Neutral-Colors-Alpha-Neutrals-100);
}
/* Unread: subtle blue tint + left accent */
.ap-notif-item.is-unread {
	background: var(--Brand-Colors-Primary-100);
	border-color: var(--Brand-Colors-Primary-200);
	cursor: pointer;
}

/* ── Item icon (subtle tinted rounded square) ─────────────── */
.ap-notif-item__icon {
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--Radius-Null);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ap-notif-item__icon .material-icons { font-size: var(--Font-Size-7); }
.ap-notif-item__icon img { width: 1.9rem; height: 1.9rem; display: block; }
.ap-notif-item__icon--primary { 
	background: var(--Base-Colors-Base-White);
	color: var(--Brand-Colors-Primary-700);
	box-shadow: 0 1px 3px 0 var(--Neutral-Colors-Alpha-Neutrals-100);
}
.ap-notif-item__icon--error   { background: var(--Base-Colors-Base-White); box-shadow: 0 1px 3px 0 var(--Neutral-Colors-Alpha-Neutrals-100); }
.ap-notif-item__icon--success { background: var(--Base-Colors-Base-White); box-shadow: 0 1px 3px 0 var(--Neutral-Colors-Alpha-Neutrals-100); }
.ap-notif-item__icon--warning { background: var(--Base-Colors-Base-White); box-shadow: 0 1px 3px 0 var(--Neutral-Colors-Alpha-Neutrals-100); }
.ap-notif-item__icon--accent  { background: var(--Brand-Colors-Accent-100);   color: var(--Brand-Colors-Accent-700); }

/* ── Item body ────────────────────────────────────────────── */
.ap-notif-item__body  { flex: 1; min-width: 0; }
.ap-notif-item__title {
	font-size: 1.3rem;
	font-weight: var(--Weight-SemiBold);
	color: var(--Text-High);
	line-height: 1.4;
	margin-bottom: var(--Spacing-L);
	padding-right: var(--Spacing-5XL);
}
.ap-notif-item__desc {
	font-size: var(--Font-Size-3);
	color: var(--Neutral-Colors-Alpha-Neutrals-900);
	line-height: 1.4;
	margin-bottom: var(--Spacing-L);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: var(--Weight-Medium);
}
/* Context highlights inside the description */
.ap-notif-hl--ok    { color: var(--Status-Colors-Success-600); }
.ap-notif-hl--err   { color: var(--Status-Colors-Error-600); }
.ap-notif-hl--warn  { color: var(--Status-Colors-Warning-600); }
.ap-notif-hl--accent{ color: var(--Brand-Colors-Primary-600); }
.ap-notif-item__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--Spacing-L);
	padding-top: var(--Spacing-S);
}
.ap-notif-item__time {
	font-size: var(--Font-Size-2);
	color: var(--Text-Low);
	line-height: 1;
}
/* Cross icon to remove (delete) a single notification card */
.ap-notif-item__delete {
	position: absolute;
	top: var(--Spacing-XL);
	right: var(--Spacing-XL);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--Neutral-Colors-Main-Neutrals-400);
	border-radius: var(--Radius-S);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	display: none;
}
.ap-notif-item:hover .ap-notif-item__delete {
	display: block;
}
.ap-notif-item__delete .material-icons { font-size: 1.4rem; }
.ap-notif-item__delete:hover {
	background: var(--Neutral-Colors-Main-Neutrals-100);
	color: var(--Neutral-Colors-Main-Neutrals-700);
}
.ap-notif-item__delete:disabled { opacity: 0.4; cursor: default; }

/* ── Loader (Bugasura Loader.gif) ────────────────────────────── */
.ap-notif__load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--Spacing-2XL);
}
/* Initial load — tall area so the gif appears centered in the panel */
.ap-notif__load-more--initial {
	min-height: 18rem;
}
.ap-notif__load-more img {
	width: 7rem;
	height: 7rem;
}

/* ── No matching search results (client-side filter) ──────── */
.ap-notif__no-results {
	padding: var(--Spacing-5XL) var(--Spacing-3XL);
	text-align: center;
	font-size: var(--Font-Size-3);
	color: var(--Text-Low);
}

/* ── Empty state (self-contained, material-icons) ─────────── */
.ap-notif__empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--Spacing-5XL) var(--Spacing-3XL);
}
.ap-notif__empty-icon {
	font-size: 4.286rem;
	padding: var(--Spacing-5XL);
	color: var(--Neutral-Colors-Main-Neutrals-700);
	margin-bottom: var(--Spacing-2XL);
	background: var(--Neutral-Colors-Main-Neutrals-25);
	border-radius: var(--Radius-2XL);
}
.ap-notif__empty-title {
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-SemiBold);
	color: var(--Text-High);
	margin: var(--Spacing-2XL) 0 var(--Spacing-L);
}
.ap-notif__empty-desc {
	font-size: var(--Font-Size-4);
	color: var(--Neutral-Colors-Alpha-Neutrals-900);
	max-width: 30rem;
	line-height: 1.5;
	margin: 0;
}
#notif_bell_trigger .ap__siderbar-compact-dot {
	background-color: var(--Status-Colors-Error-600);
}