/* =============================================================
   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.
   ============================================================= */

#ap_notifications_panel {
	overflow: hidden;
}

#ap_notifications_panel.modal.left .modal-dialog {
	margin: auto;
	width: 40rem;
	height: 100%;
	max-height: calc(100vh - 10%);
	top: calc((100vh - (100vh - 10%)) / 2);
	margin-left: calc(var(--primarynav-width) - 0.089rem);
	display: flex;
	flex-direction: column;
	justify-content: end;
	-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: auto;
	overflow: auto;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	min-height: 23rem;
}

#ap_notifications_panel.modal.left:not(.is-settings-open) .modal-content:has(.ap-notif-item):not(:has(.ap-notif-item ~ .ap-notif-item ~ .ap-notif-item)),
#ap_notifications_panel.modal.left:not(.is-settings-open) .modal-content:has(.js-notif-initial-spinner) {
	transform: translateY(-10rem);
}

#ap_notifications_panel.modal.left.is-settings-open .modal-dialog {
	max-height: 100vh;
	top: 0;
}

#ap_notifications_panel.modal.left.is-settings-open .modal-content {
	max-height: 100vh;
	height: 100%;
}

#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(--Surface-Surface-highest);
	border: none;
	border-radius: 0;
	border-top-right-radius: var(--Spacing-XL);
	border-bottom-right-radius: var(--Spacing-XL);
	overflow: auto;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	height: auto;
}

#ap_notifications_panel .modal-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--Spacing-2XL) var(--Spacing-L) var(--Spacing-2XL) var(--Spacing-3XL);
	border-bottom: 0.089rem solid var(--Outline-Low);
	background-color: var(--Surface-Surface-highest);
	position: sticky;
	top: 0;
	z-index: 2;
}

.ap-notif-title {
	flex: 1;
	margin: 0;
	font-size: var(--Font-Size-6);
	font-weight: var(--Weight-Regular);
	color: var(--Text-High);
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: var(--Spacing-L);
}

#ap_notifications_panel button.close {
	border-radius: inherit;
	min-width: auto;
	right: 0;
	width: 3.6rem;
	color: var(--Neutral-Colors-Alpha-Neutrals-700);
	display: flex;
	align-items: center;
	justify-content: center;
}

#ap_notifications_panel button.close:hover {
	background-color: var(--Brand-Colors-Primary-100);
	opacity: 0.9;
}

#ap_notifications_panel button.close:hover i {
	color: var(--Brand-Colors-Primary-700) !important;
}

#ap_notifications_panel button.close:hover i.material-icons {
	color: var(--Brand-Colors-Primary-700);
}

.ap-notif-item[data-link=''] {
	pointer-events: none;
}

.ap-notif-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	color: var(--Text-Medium);
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-Regular);
	border-radius: var(--Radius-Null);
	line-height: 1;
}

#ap_notifications_panel button.ap-notif-markall-btn {
	border-radius: inherit;
	min-width: auto;
	width: 3.6rem;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#ap_notifications_panel button.ap-notif-markall-btn:hover {
	background-color: var(--Surface-Primary);
	opacity: 0.9;
}

#ap_notifications_panel button.ap-notif-markall-btn i {
	color: var(--Icons-Low);
	vertical-align: text-bottom;
}

#ap_notifications_panel button.ap-notif-markall-btn.has-unread i {
	color: var(--Brand-Colors-Primary-700);
}

.ap-notif-markall-btn.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.ap-notif-section-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--Spacing-S);
	padding: 0.8rem 1.6rem 0.8rem;
	cursor: pointer;
	user-select: none;
	background: var(--Surface-Surface-background);
	margin-top: var(--Spacing-XL);
}

.ap-notif-section-chevron {
	font-size: var(--Font-Size-8);
	color: var(--Icons-Low);
	transition: transform 0.15s ease;
}

.ap-notif-group.is-collapsed .ap-notif-section-chevron {
	transform: rotate(-90deg);
}

.ap-notif-section-label {
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-Regular);
	color: var(--Text-High);
	letter-spacing: 0.05em;
	text-transform: capitalize;
}

.ap-notif-section-count {
	font-size: var(--Font-Size-4);
	font-weight: var(--Weight-Regular);
	color: var(--Text-Low);
}

.ap-notif-group.is-collapsed .ap-notif-group-body {
	display: none;
}

.ap-notif-group-body {
	position: relative;
	padding-bottom: 1.7rem;
}

.ap-notif-group-body .ap-notif-item:last-of-type {
	padding-bottom: 1.8rem !important;
}

.ap-notif-group-more {
	display: block;
	padding: 0.5rem 1rem;
	border: 0.5px solid var(--Outline-Low);
	background: var(--Surface-Surface-highest);
	color: var(--Text-Low);
	font-size: 1rem;
	text-align: center;
	margin: auto;
	cursor: pointer;
	border-radius: var(--Radius-2XL);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: fit-content;
	text-decoration: none;
	text-transform: capitalize;
	margin-bottom: var(--Spacing-L);
}

.ap-notif-group-more:hover {
	color: var(--Brand-Colors-Primary-700);
}

.ap-notif-group-more.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.ap-notif-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--Spacing-L) 0 var(--Spacing-2XL);
	background-color: var(--Surface-Surface-highest)
}

.ap-notif-list::-webkit-scrollbar {
	width: 0.357rem;
}

.ap-notif-list::-webkit-scrollbar-track {
	background: transparent;
}

.ap-notif-list::-webkit-scrollbar-thumb {
	background: var(--Surface-Surface-high);
	border-radius: var(--Radius-Null);
}

.ap-notif-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
	padding: 1.8rem 1.6rem;
	background: var(--Surface-Surface-highest);
	border-bottom: 0.1rem solid var(--Outline-Low);
	cursor: pointer;
}

.ap-notif-item:last-child {
	margin-bottom: 0;
}

.ap-notif-item-icon {
	position: relative;
	flex-shrink: 0;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: var(--Radius-Null);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 3px 0 var(--Neutral-Colors-Alpha-Neutrals-100);
}

.ap-notif-item.is-unread .ap-notif-item-icon::after {
	content: "";
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--Brand-Colors-Primary-700);
	border: 0.15rem solid var(--Surface-Surface-highest);
	box-sizing: content-box;
	pointer-events: none;
	z-index: 5;
}

.ap-notif-item-icon .material-icons {
	font-size: var(--Font-Size-7);
}

.ap-notif-item-icon img {
	width: 2.6rem;
	height: 2.6rem;
	display: block;
	mix-blend-mode: multiply;
}

/* Dark mode: the status tints flip dark (Error/Success/Warning-100 → dark), so
   multiply would blend the coloured icon into near-black (invisible). Render it
   normally instead so the icon shows on the dark tinted circle. */
html[data-theme="dark"] .ap-notif-item-icon img {
	mix-blend-mode: normal;
}

.ap-notif-item-icon.ap-notif-item-icon--avatar {
	border-radius: 50%;
	background: var(--Surface-Surface-low);
}

.ap-notif-item-icon.ap-notif-item-icon--avatar img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	object-fit: cover;
	mix-blend-mode: normal;
}

.ap-notif-item-icon--primary {
	background: var(--Surface-Surface-highest);
	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(--Status-Colors-Error-100);
}

.ap-notif-item-icon--success {
	background: var(--Status-Colors-Success-100);
}

.ap-notif-item-icon--warning {
	background: var(--Status-Colors-Warning-100);
}

.ap-notif-item-icon--accent {
	background: var(--Brand-Colors-Accent-100);
	color: var(--Brand-Colors-Accent-700);
}

.ap-notif-item-body {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.ap-notif-item-title {
	font-size: 1.4rem;
	font-weight: var(--Weight-Regular);
	color: var(--Text-High);
	line-height: 1.4;
	margin-bottom: 0.3rem;
	padding-right: var(--Spacing-5XL);
	text-transform: capitalize;
}

.ap-notif-item-desc {
	flex: 1;
	min-width: 0;
	font-size: var(--Font-Size-3);
	color: var(--Text-Low);
	line-height: 1.5;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ap-notif-item-meta {
	display: flex;
	align-items: flex-end;
	gap: var(--Spacing-L);
}

.ap-notif-item-time {
	margin-left: auto;
	flex-shrink: 0;
	font-size: var(--Font-Size-2);
	color: var(--Text-Low);
	line-height: 1.4;
	white-space: nowrap;
}

.ap-notif-load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--Spacing-2XL);
}

.ap-notif-load-more--initial {
	min-height: 18rem;
}

.ap-notif-load-more img {
	width: 7rem;
	height: 7rem;
}

.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(--Text-Medium);
	margin-bottom: var(--Spacing-2XL);
	background: var(--Surface-Surface-background);
	border-radius: var(--Radius-2XL);
}

.ap-notif-empty-title {
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-Regular);
	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);
}

#notif_bell_trigger {
	position: relative;
}

#notif_bell_trigger .ap__notif-off-badge {
	position: absolute;
	width: 1.3rem;
	height: 1.3rem;
	left: 45%;
	top: 15%;
	line-height: 0;
	pointer-events: none;
	background: var(--Brand-Colors-Primary-800);
	border-radius: 50%;
	padding: 0.15rem;
}

#notif_bell_trigger .ap__notif-off-badge img {
	width: 100%;
	height: 100%;
	display: block;
}

.ap__siderbar-compact .nav-stacked>li.active #notif_bell_trigger .ap__notif-off-badge {
	background: var(--Base-Colors-Base-White);
}

#ap_notifications_panel button.ap-notif-settings-btn {
	border-radius: inherit;
	min-width: auto;
	width: 3.6rem;
	color: var(--Text-High);
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#ap_notifications_panel button.ap-notif-settings-btn:hover {
	background-color: var(--Surface-Primary);
	opacity: 0.9;
}

#ap_notifications_panel button.ap-notif-settings-btn i {
	color: var(--Text-Low);
	vertical-align: text-bottom;
}

#ap_notifications_panel button.ap-notif-settings-btn img.ap-notif-settings-icon {
	width: 1.6rem;
	height: 1.6rem;
}

#ap_notifications_panel button.ap-notif-settings-btn:hover i {
	color: var(--Brand-Colors-Primary-700);
}

#ap_notifications_panel .modal-content {
	position: relative;
}

.ap-notif-settings {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background-color: var(--Surface-Surface-highest);
}

.ap-notif-settings-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: var(--Spacing-2XL) var(--Spacing-L);
	border-bottom: 0.089rem solid var(--Outline-Low);
}

.ap-notif-settings-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--Text-Medium);
	border-radius: var(--Radius-S);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ap-notif-settings-back:hover {
	background-color: var(--Surface-Primary);
	color: var(--Brand-Colors-Primary-700);
}

.ap-notif-settings-title {
	margin: 0;
	font-size: var(--Font-Size-6);
	font-weight: var(--Weight-Regular);
	color: var(--Text-High);
	line-height: 1.2;
}

.ap-notif-settings-close {
	margin-left: auto;
	margin-right: var(--Spacing-XL);
}

.ap-notif-settings-group-label {
	flex-shrink: 0;
	margin: 0;
	padding: var(--Spacing-2XL) var(--Spacing-5XL);
	font-size: var(--Font-Size-5);
	font-weight: var(--Weight-Regular);
	color: var(--Text-High);
}

.ap-notif-settings-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 var(--Spacing-3XL) var(--Spacing-2XL);
}

.ap-notif-settings-section {
	border-bottom: 1px solid var(--Outline-Low);
	margin: 0 var(--Spacing-XL) 0 var(--Spacing-XL);
	border-left: 0 !important;
	border-right: 0 !important;
	box-shadow: none;
}

.ap-notif-settings-section:last-child {
	border-bottom: none;
}

.ap-notif-settings-advanced,
.ap-notif-settings-general {
	border: 1px solid var(--Outline-Low);
	border-radius: var(--Radius-M);
}

.ap-notif-settings-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--Spacing-L);
	padding: var(--Spacing-3XL) var(--Spacing-L) var(--Spacing-2XL);
	cursor: pointer;
	user-select: none;
	border-radius: var(--Radius-M);
}

.ap-notif-settings-section-label {
	font-size: var(--Font-Size-4);
	font-weight: var(--Weight-Regular);
	color: var(--Neutral-Colors-Alpha-Neutrals-1000);
}

.ap-notif-settings-section-chevron {
	font-size: var(--Font-Size-8);
	color: var(--Text-Low);
}

.ap-notif-settings-section-body {
	padding-bottom: var(--Spacing-M);
	margin-left: var(--Spacing-L);
}

.ap-notif-settings-section .panel-collapse {
	margin: 0 var(--Spacing-L) var(--Spacing-M) var(--Spacing-5XL);
	padding-left: var(--Spacing-M);
}

.ap-notif-settings-row.ba-checkbox {
	display: flex;
	width: 100%;
	padding: var(--Spacing-M) 0;
}

.ap-notif-settings-row .ba-checkbox__label {
	font-size: var(--Font-Size-4);
	color: var(--Text-Medium);
	font-weight: var(--Weight-Regular);
}

.ap-notif-settings-row .ba-checkbox__input:checked+.ba-checkbox__checkmark {
	background: var(--Brand-Colors-Primary-50);
	border-color: var(--Brand-Colors-Primary-700);
}

.ap-notif-settings-row .ba-checkbox__input:checked+.ba-checkbox__checkmark::after {
	color: var(--Brand-Colors-Primary-700);
}

.ap-notif-settings-pref-label {
	margin: var(--Spacing-XL) 0 var(--Spacing-M) var(--Spacing-S);
	font-size: var(--Font-Size-2);
	font-weight: var(--Weight-Regular);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--Brand-Colors-Primary-600);
	border: var(--Outline-Low);
}

.ap-notif-settings-switch-row {
	display: flex;
	align-items: center;
	gap: var(--Spacing-L);
	margin: 0 var(--Spacing-XL);
	padding: var(--Spacing-3XL) 0 var(--Spacing-2XL);
	cursor: pointer;
	border: 1px solid var(--Outline-Low);
}

.ap-notif-settings-body>.ap-notif-settings-switch-row {
	padding: var(--Spacing-2XL) var(--Spacing-L);
	margin: 0;
	border-radius: var(--Radius-M);
}

.ap-notif-settings-general .ap-notif-settings-switch-row {
	border: none;
	border-bottom: 1px solid var(--Outline-Low);
}

.ap-notif-settings-general .ap-notif-settings-switch-row:last-child {
	border: 0;
}

.ap-notif-settings-row-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--Radius-M);
	color: var(--Brand-Colors-Primary-700);
}

.ap-notif-settings-row-icon img {
	width: 2.4rem;
	height: 2.4rem;
	object-fit: contain;
}

.ap-notif-settings-row-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.143rem;
	min-width: 0;
}

.ap-notif-settings-row-title {
	font-size: var(--Font-Size-4);
	font-weight: var(--Weight-Regular);
	color: var(--Text-High);
	line-height: 1.3;
}

.ap-notif-settings-row-desc {
	font-size: var(--Font-Size-3);
	color: var(--Text-Low);
	line-height: 1.3;
	font-weight: var(--Weight-Regular);
}

.ap-notif-settings-switch {
	flex-shrink: 0;
	margin-left: auto;
}

.ap-notif-settings-body .ba-radio__input+.ba-radio__circle {
	width: var(--Spacing-2XL);
	height: var(--Spacing-2XL);
}

.ap-notif-settings-body .ba-radio__input:checked+.ba-radio__circle {
	width: var(--Spacing-2XL);
	height: var(--Spacing-2XL);
}

.ap-notif-settings-body .ba-radio__input:checked+.ba-radio__circle,
.ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track {
	background-color: var(--Brand-Colors-Primary-500);
	border-color: var(--Brand-Colors-Primary-500);
}

.ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track:hover {
	background-color: var(--Brand-Colors-Primary-600);
	border-color: var(--Brand-Colors-Primary-600);
}
/* Checked state. The Primary-500/600 stops do not flip, so in dark they stay a bright
   sky blue (8.46:1 on the panel) and the white thumb reads at only 2.04:1. Drop to the
   platform's interactive blue, which is the convention for checked controls. */
html[data-theme="dark"] .ap-notif-settings-body .ba-radio__input:checked+.ba-radio__circle,
html[data-theme="dark"] .ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track {
	background-color: var(--Primary-Primary);
	border-color: var(--Primary-Primary);
}
/* Hover lifts rather than darkens: --Primary-Hover is a darker stop, which on a dark
   panel would dim the track (2.32:1) instead of highlighting it. */
html[data-theme="dark"] .ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track:hover {
	background-color: var(--Brand-Colors-Primary-600);
	border-color: var(--Brand-Colors-Primary-600);
}

.ap-notif-settings-body .ba-switch__input+.ba-switch__track {
    background: var(--Surface-Surface-high);
    border: var(--Outline-Medium);
}

.ap-notif-settings-body .ba-switch__input+.ba-switch__track,
.ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track {
	height: 1.65rem;
	width: 2.8rem;
	box-shadow: none !important;
}

.ap-notif-settings-body .ba-switch__input+.ba-switch__track .ba-switch__thumb,
.ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track .ba-switch__thumb {
	height: 1rem;
	width: 1rem;
	top: 0.3rem;
}

.ap-notif-settings-body .ba-switch__input:checked+.ba-switch__track .ba-switch__thumb {
	left: calc(100% - 1.2rem);
}

.ap-notif-settings-body .ap-notif-settings-general.is-disabled,
.ap-notif-settings-advanced.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

.ap-notif-settings-section-icon {
	flex-shrink: 0;
	width: 2.3rem;
	height: 2.3rem;
	object-fit: contain;
	margin-right: var(--Spacing-M);
}

.ap-notif-settings-section-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.143rem;
	min-width: 0;
}

.ap-notif-settings-section-desc {
	font-size: var(--Font-Size-3);
	font-weight: var(--Weight-Regular);
	color: var(--Text-Low);
	line-height: 1.3;
	padding-top: var(--Spacing-S);
}

.ap-notif-settings-radio-row.ba-radio {
	display: flex;
	width: 100%;
	padding: var(--Spacing-M) 0;
}

.ap-notif-settings-radio-row .ba-radio__label {
	font-size: var(--Font-Size-4);
	color: var(--Text-High);
	font-weight: var(--Weight-Regular);
}

.ap-notif-settings-radio-default {
	color: var(--Text-Low);
}

.ap-notif-settings-footer {
	flex-shrink: 0;
	display: flex;
	justify-content: flex-end;
	gap: var(--Spacing-L);
	padding: var(--Spacing-XL) var(--Spacing-3XL);
	border-top: 0.089rem solid var(--Outline-Low);
}

.tooltip.ap-notif-tooltip {
	z-index: 100001;
}