/* /Components/AssociatedContacts.razor.rz.scp.css */
.empty-tab[b-gj0g4ri9hh] {
	color: var(--text-light);
	margin-top: 0; /* removed large automatic top margin so content sits higher */
	border: none;
	flex-direction: column;
	text-align: center;
	display: flex;
	align-items: center;
	color: var(--text-muted);
	/* align toward the top of the tab area but keep a small comfortable offset */
	justify-content: flex-start;
	padding: var(--spacing-lg) var(--spacing-md);
	padding-top: calc(var(--spacing-lg) + 10px);
	border-radius: var(--btn-border-radius);
	min-width: 220px;
	white-space: nowrap;
}


/* Add Associated Contacts buttons - match Email button exactly */
.add-associated-center[b-gj0g4ri9hh],
.btn.btn-sm.add-associated-center[b-gj0g4ri9hh],
button.add-associated-center[b-gj0g4ri9hh] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	height: var(--btn-height-fixed) !important;
	min-height: var(--btn-height-fixed) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 var(--spacing-md) !important;
	border-radius: var(--btn-border-radius) !important;
	min-width: var(--btn-min-width);
	width: auto;
	white-space: nowrap !important;
	color: var(--white) !important;
	font-weight: var(--font-weight-medium) !important;
	font-size: var(--font-size-md) !important;
	line-height: 1 !important;
	margin-top: var(--spacing-md);
	opacity: 1 !important;
	transition: var(--transition-all) !important;
	box-shadow: var(--shadow-sm) !important;
}

.contacts-top-row .add-associated-top[b-gj0g4ri9hh],
.btn.btn-sm.add-associated-top[b-gj0g4ri9hh],
button.add-associated-top[b-gj0g4ri9hh] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	height: var(--btn-height-fixed) !important;
	min-height: var(--btn-height-fixed) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 var(--spacing-md) !important;
	border-radius: var(--btn-border-radius) !important;
	min-width: var(--btn-min-width) !important;
	width: auto !important;
	white-space: nowrap !important;
	color: var(--white) !important;
	font-weight: var(--font-weight-medium) !important;
	font-size: var(--font-size-md) !important;
	line-height: 1 !important;
	margin: 0 !important;
	opacity: 1 !important;
	transition: var(--transition-all) !important;
	box-shadow: var(--shadow-sm) !important;
}

/* Email button - same exact styling as Add Contacts */
.email-contacts-button[b-gj0g4ri9hh] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color);
	height: var(--btn-height-fixed) !important;
	min-height: var(--btn-height-fixed) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--spacing-md);
	border-radius: var(--btn-border-radius);
	min-width: var(--btn-min-width);
	width: auto;
	white-space: nowrap;
	color: var(--white) !important;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-md);
	line-height: 1;
	margin: 0;
	opacity: 1;
	transition: opacity var(--transition-fast);
}

.email-contacts-button:hover:not(:disabled)[b-gj0g4ri9hh],
.email-contacts-button:focus:not(:disabled)[b-gj0g4ri9hh],
.email-contacts-button:active:not(:disabled)[b-gj0g4ri9hh] {
	background-color: var(--primary-color-dark) !important;
	color: var(--white) !important;
	border-color: var(--border-hover) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	opacity: 1 !important;
}

.email-contacts-button:disabled[b-gj0g4ri9hh] {
	background: var(--primary-color) !important;
	color: var(--white) !important;
	border-color: var(--border-disabled);
	opacity: 0.5;
	cursor: not-allowed;
}

/* Ensure clicking Email does not show a large focus/active border/shadow */
.email-contacts-button:focus[b-gj0g4ri9hh],
.email-contacts-button:active[b-gj0g4ri9hh] {
	box-shadow: none !important;
	transform: none !important;
	outline: none !important;
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

/* Selected count text styling - align with Volunteers style (darker + base size) */
.selected-count-text[b-gj0g4ri9hh] {
	font-size: var(--font-size-base);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.empty-tab .fa-users[b-gj0g4ri9hh]{
	font-size: var(--font-size-3xl);
	margin-bottom: var(--spacing-sm);
	color: var(--text-muted);
}

.add-associated-icon[b-gj0g4ri9hh] {
	color: var(--white);
	font-size: var(--font-size-md);
	/* ensure icon sits nicely with button height */
	line-height: 1;
	margin-right: var(--spacing-sm);
}

/* Add buttons with same hover effect as Contribution button */
.add-associated-center:hover[b-gj0g4ri9hh],
.btn.btn-sm.add-associated-center:hover[b-gj0g4ri9hh],
button.add-associated-center:hover[b-gj0g4ri9hh],
.contacts-header .add-associated-top:hover[b-gj0g4ri9hh],
.btn.btn-sm.add-associated-top:hover[b-gj0g4ri9hh],
button.add-associated-top:hover[b-gj0g4ri9hh] {
	background-color: var(--primary-color-dark) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
}

.add-associated-center:focus[b-gj0g4ri9hh],
.add-associated-center:active[b-gj0g4ri9hh],
button.add-associated-center:focus[b-gj0g4ri9hh],
button.add-associated-center:active[b-gj0g4ri9hh],
.contacts-header .add-associated-top:focus[b-gj0g4ri9hh],
.contacts-header .add-associated-top:active[b-gj0g4ri9hh],
button.add-associated-top:focus[b-gj0g4ri9hh],
button.add-associated-top:active[b-gj0g4ri9hh] {
	background-color: var(--primary-color-dark) !important;
	box-shadow: var(--shadow-hover) !important;
	outline: none !important;
}

.remove-contact-btn[b-gj0g4ri9hh] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-sm);
	line-height: 1;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--danger-color);
	border: 1px solid var(--danger-color);
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
	cursor: pointer;
}

.remove-contact-btn i[b-gj0g4ri9hh] {
	color: inherit;
}

/* Hover / focus / active: fill with danger color and white icon (NotesDialog behavior) */
.remove-contact-btn:hover[b-gj0g4ri9hh],
.remove-contact-btn:focus[b-gj0g4ri9hh],
.remove-contact-btn:active[b-gj0g4ri9hh] {
	color: var(--text-light);
	background-color: var(--danger-color);
	border-color: var(--danger-color);
	outline: none;
}


/* Contact Items */
.contact-item[b-gj0g4ri9hh] {
	display: flex;
	align-items: center;
	/* Reduced padding to remove excess white space */
	padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-md) - 4px);
	border-bottom: 1px solid var(--gray-100);
	transition: var(--transition-fast);
}



.contact-avatar[b-gj0g4ri9hh] {
	/* Slightly smaller avatar to free vertical space */
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	background: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-sm);
	color: var(--white);
	font-size: var(--font-size-md);
}

.contact-info[b-gj0g4ri9hh] {
	flex-grow: 1;
	min-width: 0; /* allow text truncation if needed */
}

.contact-info h4[b-gj0g4ri9hh] {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-email[b-gj0g4ri9hh] {
	margin: 4px 0 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.remove-contact-btn[b-gj0g4ri9hh] {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-sm);
}


/* ===== Contacts Table Styling ===== */
.contacts-tab-container[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.contacts-body[b-gj0g4ri9hh] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto !important; /* enable vertical scrolling inside Contacts */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

.associated-contacts-table[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto !important; /* ensure vertical scroll inside the table area */
	overflow-x: hidden;
	padding-bottom: var(--spacing-12); /* small padding so the last card isn't flush with footer */
	box-sizing: border-box;
	padding-left: var(--spacing-10) !important;
}

/* Donor name header row */
.contacts-simple-header[b-gj0g4ri9hh] {
	display: grid;
	grid-template-columns: var(--avatar-lg) 1fr; /* match .card-checkbox width so header aligns with rows */
	align-items: center;
	gap: var(--spacing-xxs);
	/* left offset equals the card's internal padding so centers align */
	padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-md);
	margin: 0;
	margin-bottom: -5px !important; /* visually tuck header closer to cards by removing excess space from bottom margin */
	padding-left: var(--spacing-lg) !important;
}

.contacts-simple-header .form-check-input[b-gj0g4ri9hh] {
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	border: 2px solid var(--input-border-variant);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition-quick) ease;
	margin: 0;
	margin-right: var(--spacing-10) !important;
	justify-self: center; /* center the checkbox in the 50px column */
}

.contacts-simple-header .form-check-input:checked[b-gj0g4ri9hh] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.contacts-simple-header .form-check-input:focus[b-gj0g4ri9hh] {
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

/* .contacts-simple-header .form-check-input:hover:not(:checked) {
	border-color: var(--success-color);
} */

.header-label-text[b-gj0g4ri9hh] {
	font-size: var(--font-size-sm);
	color: var(--text-primary); /* match Recent Donations column header color */
	font-weight: var(--font-weight-semibold)
}

.contacts-simple-header .header-label-text[b-gj0g4ri9hh] {
	padding-right: var(--spacing-sm) !important;
}
/* Email button styling */
.email-contacts-button[b-gj0g4ri9hh] {
	background: var(--primary-color);
	color: var(--text-light);
	border: 1px solid var(--primary-color);
	height: var(--btn-height-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--spacing-md);
	border-radius: var(--btn-border-radius);
	min-width: auto;
	white-space: nowrap;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-md);
	line-height: 1;
	transition: var(--transition-quick) ease;
}

.email-contacts-button:hover:not(:disabled)[b-gj0g4ri9hh] {
	background: var(--primary-color);
	color: var(--text-light);
	border-color: var(--border-hover);
}

.email-contacts-button:disabled[b-gj0g4ri9hh] {
	background: var(--primary-color);
	color: var(--text-light);
	border-color: var(--border-disabled);
	opacity: 0.5;
	cursor: not-allowed;
}

/* Ensure email icon matches button text size */
.email-contacts-button i[b-gj0g4ri9hh] {
	font-size: var(--font-size-md);
	line-height: 1;
	margin-right: var(--spacing-sm);
}

.associated-contact-card[b-gj0g4ri9hh] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-xxs) !important;
}

.card-checkbox[b-gj0g4ri9hh] {
	width: var(--avatar-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-checkbox .form-check-input[b-gj0g4ri9hh] {
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	border: 2px solid var(--input-border-variant);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition-quick) ease;
	margin: 0;
}

.card-checkbox .form-check-input:checked[b-gj0g4ri9hh] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.card-checkbox .form-check-input:focus[b-gj0g4ri9hh] {
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

/* .card-checkbox .form-check-input:hover:not(:checked) {
	border-color: var(--success-color);
} */
.associated-contact-card .card-left[b-gj0g4ri9hh] {
	display: flex;
	gap: var(--spacing-md);
	align-items: center;
	flex: 1;
}

.avatar-circle[b-gj0g4ri9hh] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: rgba(var(--white-rgb), 0.85);
	text-transform: uppercase;
	font-size: var(--font-size-md);
}

/* Flat color cycle for associated contacts avatars (no gradients) */
.associated-contact-card:nth-child(6n + 1) .avatar-circle[b-gj0g4ri9hh] { background: var(--accent-color); }
.associated-contact-card:nth-child(6n + 2) .avatar-circle[b-gj0g4ri9hh] { background: var(--metric-blue); }
.associated-contact-card:nth-child(6n + 3) .avatar-circle[b-gj0g4ri9hh] { background: var(--metric-green); }
.associated-contact-card:nth-child(6n + 4) .avatar-circle[b-gj0g4ri9hh] { background: var(--metric-purple); }
.associated-contact-card:nth-child(6n + 5) .avatar-circle[b-gj0g4ri9hh] { background: var(--metric-red); }
.associated-contact-card:nth-child(6n + 6) .avatar-circle[b-gj0g4ri9hh] { background: var(--metric-orange); }

/* Make the contact main area a vertical flex container and center its contents
   so the donor name and donor-type align in the middle next to the avatar */
.contact-main[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start; /* ensure contents (name + pill) are left-aligned */
}

.contact-name[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	align-items: flex-start; /* make sure stacked items start at left edge */
}

.contact-name .name-text[b-gj0g4ri9hh] {
	display: block;
	color: var(--text-primary) !important;
	font-size: var(--font-size-base, 1rem) !important;
	font-weight: var(--font-weight-regular, 400) !important;
}

/* small pill below name that sizes to its text only */
.donor-pill[b-gj0g4ri9hh] {
	/* Compact pill that only sizes to its content */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	padding: var(--spacing-xxs) var(--spacing-sm);
	font-size: var(--font-size-xs);
	border-radius: var(--badge-radius);
	background: rgba(var(--primary-rgb), 0.08);
	color: var(--primary-color-dark);
	align-self: flex-start; /* ensure left aligned */
	width: auto !important; /* prevent unintended full-width overrides */
	max-width: -moz-fit-content;
	max-width: fit-content;
	white-space: nowrap; /* keep text on single line */
}

.donor-pill.donor-type-organization[b-gj0g4ri9hh] { background: rgba(155,89,182,0.08); color: var(--purple-500); }

.donor-type-inline[b-gj0g4ri9hh] {
	display: inline-block;
	margin-left: calc(var(--spacing-xs) + var(--spacing-xxs));
	padding: var(--spacing-xxs) var(--spacing-10);
	border-radius: var(--badge-radius);
	font-size: var(--font-size-xs);
	background: var(--bg-hover);
	color: var(--text-link);
}

.contact-id[b-gj0g4ri9hh] {
	/* Hide the ID from the UI as requested; keep the element for accessibility/data+
	   testing but don't show it visually */
	display: none;
}

.card-right[b-gj0g4ri9hh] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	/* keep action buttons from growing/shrinking */
	flex: 0 0 auto;
}

/* Legacy associated-contacts-list support */
.associated-contacts-list[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	padding-bottom: var(--spacing-2xl);
	box-sizing: border-box;
}

/* ensure the last card isn't visually glued to the container edge */
.associated-contacts-list .associated-contact-card:last-child[b-gj0g4ri9hh],
.associated-contacts-table .associated-contact-card:last-child[b-gj0g4ri9hh] {
	margin-bottom: var(--spacing-12);
}

.remove-associated[b-gj0g4ri9hh] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--font-size-lg);
	padding: var(--spacing-sm) var(--spacing-12);
	border-radius: var(--radius-sm);
	border: none; /* remove border */
	color: var(--danger-color);
	background: transparent;
	opacity: 0.75; /* slightly faded initially */
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.remove-associated i[b-gj0g4ri9hh] { color: inherit; }

.remove-associated:hover[b-gj0g4ri9hh] {
	/* On hover, highlight the text/icon to full opacity and keep background transparent */
	opacity: 1;
	color: var(--danger-color);
	background: transparent;
}

.tab-content-container[b-gj0g4ri9hh] {
	/* Use flex so internal tab panels can manage their own scrolling (contacts only).
	   Remove fixed viewport height and outer overflow to avoid duplicate scrollbars. */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--spacing-sm);
	padding-bottom: 0; /* footer/pinned elements manage their own spacing */
	overflow: visible; /* allow inner panels to handle scrolling */
}

/* Contacts footer layout (moved from inline styles in Activities.razor) */
.contacts-footer-row[b-gj0g4ri9hh] {
	width: 100%;
	gap: var(--spacing-6);
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

/* Footer should not scroll with the list - keep it compact like left panel */
.card-footer.card-footer-compact.contacts-footer-outer[b-gj0g4ri9hh] {
	flex-shrink: 0;
	padding: var(--spacing-6) var(--spacing-10);
	background: var(--bg-light);
	border-top: 1px solid var(--border-light);
}

/* ---------- Attendees tab: mirror Contacts behavior ---------- */
.attendees-tab-container[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	min-height: auto;
	height: auto;
	position: relative; /* containing block for absolute footer */
}

.attendees-tab-container .attendees-list-table[b-gj0g4ri9hh] {
	flex: 0 0 auto;
	min-height: auto;
	overflow: visible;
	box-sizing: border-box;
	padding-bottom: var(--spacing-12);
}

.attendees-tab-container .attendees-footer-outer[b-gj0g4ri9hh],
.attendees-tab-container .attendees-footer-row[b-gj0g4ri9hh] {
	flex-shrink: 0;
	height: var(--size-36) !important;
	padding: var(--spacing-6) var(--spacing-10) !important;
	display: flex !important;
	align-items: center !important;
	background-color: var(--bg-light);
	border-top: 1px solid var(--border-light) !important;
	position: relative;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
}

/* Ensure the attendees footer's text is aligned to match left panel */
.attendees-tab-container .card-footer.card-footer-compact .text-xs[b-gj0g4ri9hh] {
	margin-left: var(--spacing-sm);
}

.contacts-summary[b-gj0g4ri9hh] {
	white-space: nowrap;
	font-size: var(--font-size-sm); /* match left panel font size */
	color: var(--text-secondary);
}

/* Ensure footer content uses full width and pagination stays to the right */
.contacts-footer-row[b-gj0g4ri9hh] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.contacts-footer-left[b-gj0g4ri9hh] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.contacts-footer-right[b-gj0g4ri9hh] {
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
	margin-left: auto; /* push to the far right */
}

.pagination-controls[b-gj0g4ri9hh] {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-6);
}

.pagination-controls .btn-xs[b-gj0g4ri9hh] {
	padding: var(--spacing-xxs) var(--spacing-6);
	min-width: var(--spacing-28, 28px);
	height: 26px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}

.pagination-controls .btn-outline-secondary[b-gj0g4ri9hh] {
	/* Make controls low-contrast like the left panel */
	background: var(--bg-light); /* subtle off-white/gray */
	border: 1px solid var(--border-light);
	color: var(--text-secondary);
	box-shadow: none;
	font-weight: var(--font-weight-medium);
}

.page-indicator[b-gj0g4ri9hh] {
	min-width: var(--spacing-28, 28px);
	text-align: center;
	padding: var(--spacing-xxs) var(--spacing-6);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	background: transparent;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

/* subtle hover for pager buttons */
.pagination-controls .btn-outline-secondary:hover:not(:disabled)[b-gj0g4ri9hh] {
	background: rgba(0,0,0,0.03);
	border-color: var(--border-hover);
	color: var(--text-primary);
}

.pagination-controls button:disabled[b-gj0g4ri9hh],
.pagination-controls .btn-outline-secondary.disabled[b-gj0g4ri9hh] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* make pagination icons a bit smaller so they visually match left panel */
/* removed duplicate hardcoded rules: retained variable-based versions below */
.pagination-controls i[b-gj0g4ri9hh] {
	font-size: var(--font-size-sm);
}

@media (max-width: 768px) {
    .associated-contact-card[b-gj0g4ri9hh] { padding: var(--spacing-sm); }
    .avatar-circle[b-gj0g4ri9hh] { width: 40px; height: 40px; font-size: 0.9rem; }
}

/* Confirm Remove Modal tweaks (component-scoped) */
.confirm-modal[b-gj0g4ri9hh] {
	border-radius: 8px;
	overflow: hidden;
}

.confirm-modal .modal-header[b-gj0g4ri9hh] {
	padding: 0.6rem 1rem;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
	color: var(--text-light);
}

.confirm-modal .modal-title[b-gj0g4ri9hh],
.confirm-modal .modal-header h5[b-gj0g4ri9hh] {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.confirm-modal .modal-body[b-gj0g4ri9hh] {
	padding: 1rem 1.25rem;
	color: var(--text-primary);
	background: var(--bg-primary);
}

.confirm-modal .modal-actions[b-gj0g4ri9hh] {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	padding: 0.75rem 1rem 1rem 1rem;
	background: var(--bg-primary);
	border-top: none;
}

.confirm-modal .modal-actions .btn[b-gj0g4ri9hh] {
	min-width: 110px;
	height: 36px;
	padding: 6px 12px;
	border-radius: 6px;
}

.confirm-modal .modal-actions .btn-secondary[b-gj0g4ri9hh] {
	background: var(--gray-300);
	color: var(--text-primary);
	border: 1px solid var(--gray-300);
}

.confirm-modal .modal-actions .btn-danger[b-gj0g4ri9hh] {
	background: var(--danger-color);
	color: var(--text-light);
	border: 1px solid var(--danger-color);
}

.confirm-modal .btn-close[b-gj0g4ri9hh] {
	width: 36px;
	height: 36px;
	background: transparent;
	color: var(--text-light);
}

@media (max-width: 768px) {
	.confirm-modal .modal-content[b-gj0g4ri9hh] {
		width: 96%;
		max-width: 520px;
	}
	.confirm-modal .modal-actions .btn[b-gj0g4ri9hh] { min-width: 100%; }
}

/* Contacts tab should keep vertical scrolling inside the list body only.
   Horizontal scrolling is owned by the middle tab container on narrower widths. */
.contacts-tab-container[b-gj0g4ri9hh] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}

.contacts-body[b-gj0g4ri9hh] {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.associated-contacts-table[b-gj0g4ri9hh] {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

.contacts-footer-outer[b-gj0g4ri9hh] {
	flex: 0 0 auto !important;
}

/* Match left-panel thin scrollbar: subtle, small width */
.contacts-body[b-gj0g4ri9hh],
.associated-contacts-table[b-gj0g4ri9hh] {
	/* Match left-panel thin scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--border-secondary, #d1d6da) transparent;
}
.contacts-body[b-gj0g4ri9hh]::-webkit-scrollbar,
.associated-contacts-table[b-gj0g4ri9hh]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}
.contacts-body[b-gj0g4ri9hh]::-webkit-scrollbar-track,
.associated-contacts-table[b-gj0g4ri9hh]::-webkit-scrollbar-track {
	background: transparent;
}
.contacts-body[b-gj0g4ri9hh]::-webkit-scrollbar-thumb,
.associated-contacts-table[b-gj0g4ri9hh]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}
.contacts-body[b-gj0g4ri9hh]::-webkit-scrollbar-thumb:hover,
.associated-contacts-table[b-gj0g4ri9hh]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}
/* /Components/AuthGuard.razor.rz.scp.css */
.auth-required-container[b-bsea0pimpz] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.auth-required-card[b-bsea0pimpz] {
    background: var(--card-background, #ffffff);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 400px;
    width: 100%;
    border: 1px solid #e5e7eb;
}

.auth-icon[b-bsea0pimpz] {
    margin-bottom: 1.5rem;
    color: #9ca3af;
}

.auth-required-card h3[b-bsea0pimpz] {
    color: #1f2937;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.auth-required-card p[b-bsea0pimpz] {
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #6b7280;
}

.auth-actions[b-bsea0pimpz] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-bsea0pimpz] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

.btn-primary[b-bsea0pimpz] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover[b-bsea0pimpz] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-outline-secondary[b-bsea0pimpz] {
    background: transparent;
    color: #374151;
    border: 2px solid #d1d5db;
}

.btn-outline-secondary:hover[b-bsea0pimpz] {
    background: #f9fafb;
    border-color: #3b82f6;
    transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 480px) {
    .auth-required-container[b-bsea0pimpz] {
        padding: 1rem;
        min-height: 50vh;
    }

    .auth-required-card[b-bsea0pimpz] {
        padding: 2rem 1.5rem;
    }

    .auth-actions[b-bsea0pimpz] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-bsea0pimpz] {
        width: 100%;
        max-width: 200px;
    }
}
/* /Components/BulkUploadLogCard.razor.rz.scp.css */
.bulk-upload-card[b-nm562pkbug] {
	background-color: var(--bg-card);
	border-radius: var(--card-border-radius);
	padding: 0;
	box-shadow: var(--card-shadow);
	transition: var(--transition-all);
	border-left: 4px solid transparent;
	overflow: hidden;
	position: relative;
}

.bulk-upload-card.highlighted[b-nm562pkbug] {
	animation: highlightPulse-b-nm562pkbug 2s ease-in-out;
	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.3),
		var(--shadow-lg);
	border-left-color: var(--primary-color);
}

@keyframes highlightPulse-b-nm562pkbug {
	0%,
	100% {
		box-shadow:
			0 0 0 0 rgba(37, 99, 235, 0),
			var(--shadow-sm);
	}
	50% {
		box-shadow:
			0 0 0 8px rgba(37, 99, 235, 0.2),
			var(--shadow-xl);
	}
}

.bulk-upload-card[b-nm562pkbug]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--primary-color),
		transparent
	);
	opacity: 0;
	transition: opacity var(--transition-normal);
}

.bulk-upload-card:hover[b-nm562pkbug] {
	box-shadow: var(--shadow-md);
	transform: translateY(calc(-0.5 * var(--spacing-xxs)));
}

.bulk-upload-card:hover[b-nm562pkbug]::before {
	opacity: 1;
}

.bulk-upload-card.status-completed[b-nm562pkbug] {
	border-left-color: var(--success-color);
	background-color: var(--bg-card);
}

.bulk-upload-card.status-processing[b-nm562pkbug] {
	border-left-color: var(--warning-color);
	background-color: var(--bg-card);
}

.bulk-upload-card.status-failed[b-nm562pkbug] {
	border-left-color: var(--danger-color);
	background-color: var(--bg-card);
}

.bulk-upload-card.status-pending[b-nm562pkbug] {
	border-left-color: var(--info-color);
	background-color: var(--bg-card);
}

.bulk-upload-card.status-default[b-nm562pkbug] {
	border-left-color: var(--gray-400);
}

.card-header[b-nm562pkbug] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--bg-light);
	border-bottom: 1px solid var(--border-light);
}

.header-left[b-nm562pkbug] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.serial-badge[b-nm562pkbug] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--spacing-xxs) * 0.6) calc(var(--spacing-xs) * 1.1);
	background: var(--gradient-primary);
	color: var(--white);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xxs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.4px;
	box-shadow: var(--shadow-sm);
}

.status-badge[b-nm562pkbug] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	padding: calc(var(--spacing-xxs) * 0.6) calc(var(--spacing-xs) * 1.1);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xxs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.35px;
	box-shadow: var(--shadow-sm);
}

.status-badge i[b-nm562pkbug] {
	font-size: var(--font-size-xs);
}

.badge-success[b-nm562pkbug] {
	/* Bootstrap-like small pill badge */
	display: inline-block;
	padding: 0.25em 0.4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: var(--white);
	background-color: var(--success-color);
	border-radius: 0.375rem;
}

.badge-warning[b-nm562pkbug] {
	display: inline-block;
	padding: 0.25em 0.4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: var(--warning-text);
	background-color: var(--warning-color);
	border-radius: 0.375rem;
}

.badge-danger[b-nm562pkbug] {
	display: inline-block;
	padding: 0.25em 0.4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: var(--white);
	background-color: var(--danger-color);
	border-radius: 0.375rem;
}

.badge-info[b-nm562pkbug] {
	display: inline-block;
	padding: 0.25em 0.4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: var(--white);
	background-color: var(--info-color);
	border-radius: 0.375rem;
}

.new-badge[b-nm562pkbug] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	padding: calc(var(--spacing-xxs) * 0.6) calc(var(--spacing-xs) * 1.1);
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	color: #000;
	border-radius: var(--radius-full);
	font-size: var(--font-size-xxs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
	animation: shimmer-b-nm562pkbug 2s infinite;
}

.new-badge i[b-nm562pkbug] {
	font-size: var(--font-size-xs);
	animation: sparkle-b-nm562pkbug 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-nm562pkbug {
	0%,
	100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.2);
	}
}

@keyframes sparkle-b-nm562pkbug {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
	50% {
		transform: scale(1.1) rotate(180deg);
		opacity: 0.8;
	}
}

.badge-secondary[b-nm562pkbug] {
	display: inline-block;
	padding: 0.25em 0.4em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: var(--white);
	background-color: var(--gray-600);
	border-radius: 0.375rem;
}

.card-content[b-nm562pkbug] {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.info-row[b-nm562pkbug] {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-lg);
	align-items: flex-start;
	flex-wrap: nowrap;
}

.info-item[b-nm562pkbug] {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-xs);
	flex: 1;
	min-width: 0;
}

.info-icon[b-nm562pkbug] {
	font-size: var(--font-size-sm);
	color: var(--primary-color);
	margin-top: 2px;
	flex-shrink: 0;
}

.info-details[b-nm562pkbug] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
	flex: 1;
	min-width: 0;
}

.info-label[b-nm562pkbug] {
	font-size: var(--font-size-xxs);
	color: var(--text-secondary);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 2px;
}

.info-value[b-nm562pkbug] {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	/* other info values remain single-line by default; file names use a dedicated wrapper */
}

/* Allow file names to wrap and break to avoid horizontal layout shifts */
.info-value .filename-text[b-nm562pkbug] {
	display: inline-block;
	max-width: 20ch; /* show first ~20 chars */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.revertable-indicator[b-nm562pkbug] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	padding: var(--spacing-xxs) var(--spacing-sm);
	background: linear-gradient(
		135deg,
		var(--metric-green) 0%,
		var(--success-color) 100%
	);
	color: var(--white);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	margin-top: auto;
	width: fit-content;
	box-shadow: var(--shadow-sm);
	animation: pulse-b-nm562pkbug 2s infinite;
}

.revertable-indicator i[b-nm562pkbug] {
	font-size: var(--font-size-xs);
}

@keyframes pulse-b-nm562pkbug {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.85;
	}
}

/* Show Details Button */
.btn-show-details[b-nm562pkbug] {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-md);
	background-color: var(--primary-color);
	color: var(--white);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: var(--transition-all);
	box-shadow: var(--shadow-sm);
	white-space: nowrap;
}

.btn-show-details:hover[b-nm562pkbug] {
	transform: translateX(4px);
	box-shadow: var(--shadow-hover);
	background-color: var(--primary-color-dark);
}

.btn-show-details:active[b-nm562pkbug] {
	transform: translateX(2px);
	box-shadow: var(--shadow-sm);
	background-color: var(--primary-color-dark);
}

.btn-show-details i[b-nm562pkbug] {
	font-size: var(--font-size-xs);
	transition: transform var(--transition-normal);
}

.btn-show-details:hover i[b-nm562pkbug] {
	transform: translateX(2px);
}

.btn-show-details span[b-nm562pkbug] {
	font-weight: var(--font-weight-semibold);
}
/* /Components/BulkUploadLogCardCompact.razor.rz.scp.css */
.bulk-upload-card-compact[b-x4f2jm39g5] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	border-left: 4px solid transparent;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-all);
	min-height: 60px;
}

.bulk-upload-card-compact:hover[b-x4f2jm39g5] {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.bulk-upload-card-compact.highlighted[b-x4f2jm39g5] {
	animation: highlightPulse-b-x4f2jm39g5 2s ease-in-out;
	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.3),
		var(--shadow-lg);
	border-left-color: var(--primary-color);
}

@keyframes highlightPulse-b-x4f2jm39g5 {
	0%,
	100% {
		box-shadow:
			0 0 0 0 rgba(37, 99, 235, 0),
			var(--shadow-sm);
	}
	50% {
		box-shadow:
			0 0 0 8px rgba(37, 99, 235, 0.2),
			var(--shadow-xl);
	}
}

.bulk-upload-card-compact.status-completed[b-x4f2jm39g5] {
	border-left-color: var(--success-color);
}

.bulk-upload-card-compact.status-processing[b-x4f2jm39g5] {
	border-left-color: var(--warning-color);
}

.bulk-upload-card-compact.status-failed[b-x4f2jm39g5] {
	border-left-color: var(--danger-color);
}

.bulk-upload-card-compact.status-pending[b-x4f2jm39g5] {
	border-left-color: var(--info-color);
}

.bulk-upload-card-compact.status-default[b-x4f2jm39g5] {
	border-left-color: var(--gray-400);
}

/* Left section: Serial and Status */
.card-left[b-x4f2jm39g5] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-shrink: 0;
}

.serial-badge[b-x4f2jm39g5] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xxs) var(--spacing-xs);
	background: var(--gradient-primary);
	color: var(--white);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	min-width: 32px;
}

.status-badge[b-x4f2jm39g5] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	padding: var(--spacing-xxs) var(--spacing-sm);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.status-badge i[b-x4f2jm39g5] {
	font-size: var(--font-size-xs);
}

.badge-success[b-x4f2jm39g5] {
	background-color: var(--success-color);
	color: var(--white);
}

.badge-warning[b-x4f2jm39g5] {
	background-color: var(--warning-color);
	color: var(--warning-text);
}

.badge-danger[b-x4f2jm39g5] {
	background-color: var(--danger-color);
	color: var(--white);
}

.badge-info[b-x4f2jm39g5] {
	background-color: var(--info-color);
	color: var(--white);
}

.badge-secondary[b-x4f2jm39g5] {
	background-color: var(--gray-600);
	color: var(--white);
}

.new-badge[b-x4f2jm39g5] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	padding: var(--spacing-xxs) var(--spacing-sm);
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	color: #000;
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

/* Center section: Info chips */
.card-center[b-x4f2jm39g5] {
	flex: 1;
	min-width: 0;
}

.info-chips[b-x4f2jm39g5] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.info-chips .badge[b-x4f2jm39g5] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	padding: calc(var(--spacing-xxs) * 1.5) var(--spacing-sm);
	transition: var(--transition-all);
}

.info-chips .badge:hover[b-x4f2jm39g5] {
	transform: scale(1.05);
	box-shadow: var(--shadow-sm);
}

.info-chips .badge i[b-x4f2jm39g5] {
	font-size: var(--font-size-xs);
}

/* Allow filename badges to wrap lines instead of forcing horizontal expansion */
.info-chips .filename-badge[b-x4f2jm39g5] {
	max-width: 20ch; /* show first ~20 chars */
	min-width: 0;
	display: inline-flex;
	align-items: center;
	overflow: hidden;
}

.info-chips .filename-badge .filename-text[b-x4f2jm39g5] {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Right section: Actions */
.card-right[b-x4f2jm39g5] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-shrink: 0;
}

.card-right .badge[b-x4f2jm39g5] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	padding: var(--spacing-xxs) var(--spacing-sm);
}

.card-right .badge i[b-x4f2jm39g5] {
	font-size: var(--font-size-xs);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
	.bulk-upload-card-compact[b-x4f2jm39g5] {
		flex-wrap: wrap;
	}

	.card-center[b-x4f2jm39g5] {
		flex-basis: 100%;
		order: 3;
	}
}

@media (max-width: 768px) {
	.bulk-upload-card-compact[b-x4f2jm39g5] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.info-chips[b-x4f2jm39g5] {
		width: 100%;
	}

	.info-chips .badge[b-x4f2jm39g5] {
		flex: 1;
		min-width: 0;
		justify-content: center;
	}
}
/* /Components/BulkUploadModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-glpm3v54x6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: fadeIn-b-glpm3v54x6 var(--modal-fade-duration) var(--transition-timing-ease-out);
}

@keyframes fadeIn-b-glpm3v54x6 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Container */
.modal-container[b-glpm3v54x6] {
    background-color: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-glpm3v54x6 var(--transition-duration-base) var(--transition-timing-ease-out);
    border: 1px solid var(--border-light);
}

@keyframes slideUp-b-glpm3v54x6 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.modal-header[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--gradient-primary) 100%);
}

.modal-header-content[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

.modal-icon[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--overlay-light);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.modal-icon i[b-glpm3v54x6] {
    color: var(--white);
    font-size: var(--font-size-2xl);
}

.modal-header-text[b-glpm3v54x6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
}

.modal-title[b-glpm3v54x6] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--white);
    margin: 0;
    line-height: var(--line-height-tight);
}

.modal-subtitle[b-glpm3v54x6] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: rgba(var(--white-rgb), 0.9);
    margin: 0;
    line-height: var(--line-height-normal);
}

.modal-close-btn[b-glpm3v54x6] {
    background: var(--overlay-light);
    border: none;
    font-size: var(--font-size-xl);
    color: var(--white);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.modal-close-btn:hover:not(:disabled)[b-glpm3v54x6] {
    background-color: var(--overlay-hover-light);
    color: var(--white);
    transform: scale(1.05);
}

.modal-close-btn:disabled[b-glpm3v54x6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal Body */
.modal-body[b-glpm3v54x6] {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
    background-color: var(--bg-card);
}

/* Form Elements */
.form-section[b-glpm3v54x6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group[b-glpm3v54x6] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-label[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.label-text[b-glpm3v54x6] {
    color: var(--text-primary);
}

.label-required[b-glpm3v54x6] {
    color: var(--danger-color);
    font-size: var(--font-size-base);
    line-height: 1;
}

.form-control[b-glpm3v54x6] {
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-normal);
    background-color: var(--bg-card);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    color: var(--text-primary);
}

.form-control:focus[b-glpm3v54x6] {
    outline: none;
    border-color: var(--input-border-color-focus);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
    background-color: var(--bg-card);
}

.form-control:disabled[b-glpm3v54x6] {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.select-wrapper[b-glpm3v54x6] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-select[b-glpm3v54x6] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: var(--spacing-2xl);
    cursor: pointer;
}

.select-icon[b-glpm3v54x6] {
    position: absolute;
    right: var(--spacing-md);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: var(--font-size-sm);
    transition: var(--transition-all);
}

.form-select:focus + .select-icon[b-glpm3v54x6] {
    color: var(--primary-color);
}

.form-error[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--danger-color);
    font-weight: var(--font-weight-medium);
    animation: slideDown-b-glpm3v54x6 var(--transition-duration-fast) var(--transition-timing-ease-out);
}

.form-error i[b-glpm3v54x6] {
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.form-hint[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.form-hint i[b-glpm3v54x6] {
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    color: var(--info-color);
}

@keyframes slideDown-b-glpm3v54x6 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* File Input */
.file-input-wrapper[b-glpm3v54x6] {
    position: relative;
}

.file-input[b-glpm3v54x6] {
    position: absolute;
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    overflow: hidden;
    z-index: -1;
}

.file-input-display[b-glpm3v54x6] {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-all);
    background-color: var(--bg-secondary);
}

.file-input-display:hover[b-glpm3v54x6] {
    border-color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.05);
    transform: scale(1.01);
}

.file-input:disabled + .file-input-display[b-glpm3v54x6] {
    cursor: not-allowed;
    opacity: 0.6;
}

.file-placeholder[b-glpm3v54x6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    min-height: 140px;
}

.placeholder-icon[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: var(--radius-full);
}

.placeholder-icon i[b-glpm3v54x6] {
    font-size: 2rem;
    color: var(--primary-color);
}

.placeholder-text[b-glpm3v54x6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.placeholder-primary[b-glpm3v54x6] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.placeholder-secondary[b-glpm3v54x6] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.file-selected[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, var(--success-subtle) 0%, rgba(var(--primary-rgb), 0.05) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--success-border);
    min-height: 80px;
}

.file-icon-wrapper[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--success-bg);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.file-icon-wrapper i[b-glpm3v54x6] {
    font-size: var(--font-size-2xl);
    color: var(--success-color);
}

.file-info[b-glpm3v54x6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.file-name[b-glpm3v54x6] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-size[b-glpm3v54x6] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

/* Alert */
.alert[b-glpm3v54x6] {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    animation: slideDown-b-glpm3v54x6 var(--transition-duration-base) var(--transition-timing-ease-out);
}

.alert-icon[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.alert-content[b-glpm3v54x6] {
    flex: 1;
    display: flex;
    align-items: center;
}

.alert-text[b-glpm3v54x6] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
}

.alert-error[b-glpm3v54x6] {
    background-color: var(--error-bg);
    border: 1px solid var(--error-border);
}

.alert-error .alert-icon[b-glpm3v54x6] {
    background-color: rgba(var(--danger-rgb), 0.15);
}

.alert-error .alert-icon i[b-glpm3v54x6] {
    color: var(--danger-color);
    font-size: var(--font-size-lg);
}

.alert-error .alert-text[b-glpm3v54x6] {
    color: var(--danger-color);
}

/* Modal Footer */
.modal-footer[b-glpm3v54x6] {
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-light);
    background: linear-gradient(to top, var(--bg-secondary) 0%, var(--bg-card) 100%);
}

.footer-actions[b-glpm3v54x6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* Buttons */
.btn[b-glpm3v54x6] {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    padding: var(--btn-padding);
    border: 1px solid transparent;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: var(--transition-all);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: center;
    min-width: var(--btn-min-width);
}

.btn:disabled[b-glpm3v54x6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-glpm3v54x6] {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-glpm3v54x6] {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.btn-primary:active:not(:disabled)[b-glpm3v54x6] {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-secondary[b-glpm3v54x6] {
    background-color: var(--white);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-glpm3v54x6] {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn i[b-glpm3v54x6] {
    font-size: var(--font-size-base);
}

/* Spinner */
.spinner-small[b-glpm3v54x6] {
    display: inline-block;
    width: var(--spinner-sm);
    height: var(--spinner-sm);
    border: 2px solid var(--white);
    border-radius: var(--radius-full);
    border-top-color: transparent;
    animation: spin-b-glpm3v54x6 0.6s linear infinite;
}

@keyframes spin-b-glpm3v54x6 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container[b-glpm3v54x6] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-glpm3v54x6] {
        padding: var(--spacing-lg);
    }

    .modal-body[b-glpm3v54x6] {
        padding: var(--spacing-lg);
    }

    .modal-footer[b-glpm3v54x6] {
        padding: var(--spacing-lg);
    }

    .modal-icon[b-glpm3v54x6] {
        width: 40px;
        height: 40px;
    }

    .modal-icon i[b-glpm3v54x6] {
        font-size: var(--font-size-xl);
    }

    .modal-title[b-glpm3v54x6] {
        font-size: var(--font-size-lg);
    }

    .modal-subtitle[b-glpm3v54x6] {
        font-size: var(--font-size-xs);
    }
    
    .footer-actions[b-glpm3v54x6] {
        flex-direction: column;
        width: 100%;
    }

    .btn[b-glpm3v54x6] {
        width: 100%;
        justify-content: center;
    }
    
    .file-input-display[b-glpm3v54x6] {
        padding: var(--spacing-lg);
    }

    .file-selected[b-glpm3v54x6] {
        padding: var(--spacing-md);
    }

    .file-icon-wrapper[b-glpm3v54x6] {
        width: 40px;
        height: 40px;
    }

    .placeholder-icon[b-glpm3v54x6] {
        width: 56px;
        height: 56px;
    }

    .placeholder-icon i[b-glpm3v54x6] {
        font-size: 1.5rem;
    }
}
/* /Components/ConfirmationDialog.razor.rz.scp.css */
/* Confirmation Dialog - Consistent with Campaign Modal Design */

/* Modal overlay */
.modal-campaign-overlay[b-0exjvlt8jl] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--overlay-dark);
	backdrop-filter: blur(var(--modal-backdrop-blur, 2px));
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-modal);
	animation: fadeIn-b-0exjvlt8jl var(--modal-fade-duration, 0.3s) ease-in-out;
}

/* Modal container - smaller for confirmation dialogs */
.campaign-modal-container.confirmation-modal-container[b-0exjvlt8jl] {
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--spacing-lg);
	display: flex;
	justify-content: center;
}

/* Modal card */
.campaign-modal-card[b-0exjvlt8jl] {
	background-color: var(--bg-card) !important;
	/* Remove outer 1px border to eliminate thin outline */
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	animation: slideIn-b-0exjvlt8jl 0.3s ease-out;
}

/* Card header uses gradient background for consistent design */
.campaign-card-header[b-0exjvlt8jl] {
	background: var(--gradient-card);
	color: var(--text-light);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.campaign-card-header-left[b-0exjvlt8jl] {
	display: flex;
	align-items: center;
}

.campaign-header-icon[b-0exjvlt8jl] {
	font-size: var(--font-size-lg);
	color: var(--text-light);
}

.campaign-card-header h2[b-0exjvlt8jl],
.campaign-card-header h5[b-0exjvlt8jl] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	font-family: var(--font-family-primary);
}

/* Card body */
.campaign-card-body[b-0exjvlt8jl] {
	padding: var(--spacing-lg);
	background-color: var(--bg-card) !important;
}

.campaign-form-container[b-0exjvlt8jl] {
	width: 100%;
	background-color: var(--input-bg) !important;
}

/* Confirmation message */
.confirmation-message[b-0exjvlt8jl] {
	margin: 0 0 var(--spacing-lg) 0;
	color: var(--text-primary);
	font-size: var(--font-size-base);
	line-height: 1.5;
	font-weight: var(--font-weight-normal);
}

/* Action buttons */
.campaign-action-buttons[b-0exjvlt8jl] {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--gray-200);
}

/* Button styling */
.campaign-btn[b-0exjvlt8jl] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
	border-radius: var(--radius-sm, 4px);
	font-weight: 600;
	font-size: var(--font-size-sm, 14px);
	font-family: inherit;
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-all, all 0.2s ease);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-min-width);
	gap: 0.5rem;
}

.campaign-btn:disabled[b-0exjvlt8jl] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.campaign-btn-primary[b-0exjvlt8jl] {
	background-color: var(--primary-color, #0066cc);
	color: var(--text-light, #fff);
	border-color: var(--primary-color, #0066cc);
}

.campaign-btn-primary:hover:not(:disabled)[b-0exjvlt8jl] {
	background-color: var(--primary-color-dark, #0056b3);
	border-color: var(--primary-color-dark, #0056b3);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.campaign-btn-primary:active[b-0exjvlt8jl] {
	transform: translateY(0);
}

.campaign-btn-danger[b-0exjvlt8jl] {
	background-color: var(--danger-color, #dc3545);
	color: var(--text-light, #fff);
	border-color: var(--danger-color, #dc3545);
}

.campaign-btn-danger:hover:not(:disabled)[b-0exjvlt8jl] {
	background-color: var(--danger-dark, #c82333);
	border-color: var(--danger-dark, #c82333);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.campaign-btn-danger:active[b-0exjvlt8jl] {
	transform: translateY(0);
}

.campaign-btn-secondary[b-0exjvlt8jl] {
	background-color: var(--gray-500, #6c757d);
	color: var(--text-light, #fff);
	border-color: var(--gray-500, #6c757d);
}

.campaign-btn-secondary:hover:not(:disabled)[b-0exjvlt8jl] {
	background-color: var(--gray-600, #5a6268);
	border-color: var(--gray-600, #5a6268);
	transform: translateY(-1px);
}

.campaign-btn-secondary:active[b-0exjvlt8jl] {
	transform: translateY(0);
}

.campaign-btn-outline[b-0exjvlt8jl] {
	background-color: transparent;
	color: var(--gray-600, #6c757d);
	border-color: var(--gray-400, #ced4da);
}

.campaign-btn-outline:hover:not(:disabled)[b-0exjvlt8jl] {
	background-color: var(--gray-100, #f8f9fa);
	color: var(--gray-700, #495057);
	border-color: var(--gray-500, #adb5bd);
	transform: translateY(-1px);
}

/* Animation keyframes */
@keyframes fadeIn-b-0exjvlt8jl {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn-b-0exjvlt8jl {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Responsive design */
@media (max-width: 768px) {
	.campaign-modal-container.confirmation-modal-container[b-0exjvlt8jl] {
		padding: var(--spacing-md);
		max-height: 95vh;
	}

	.campaign-card-body[b-0exjvlt8jl] {
		padding: var(--spacing-md);
	}

	.campaign-action-buttons[b-0exjvlt8jl] {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.campaign-btn[b-0exjvlt8jl] {
		width: 100%;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.campaign-btn[b-0exjvlt8jl] {
		transition: none;
	}

	.modal-campaign-overlay[b-0exjvlt8jl],
	.campaign-modal-card[b-0exjvlt8jl] {
		animation: none;
	}
}
/* /Components/CreateCampaignModal.razor.rz.scp.css */
/* CreateCampaignModal - Consistent Design with EditCampaignModal */

/* Modal overlay for the main create modal */
.modal-campaign-overlay[b-qwqsej407h] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--overlay-dark);
	/* use design token for backdrop blur */
	backdrop-filter: blur(var(--modal-backdrop-blur));
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-modal);
	animation: fadeIn-b-qwqsej407h var(--modal-fade-duration) ease-in-out;
}

/* Modal overlay for confirmation dialogs */
.modal-overlay[b-qwqsej407h] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--overlay-dark);
	backdrop-filter: blur(var(--modal-backdrop-blur));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal-overlay);
	animation: fadeIn-b-qwqsej407h var(--modal-fade-duration) ease-in-out;
}

.campaign-modal-container[b-qwqsej407h] {
	width: 100%;
	max-width: var(--modal-max-width);
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--spacing-lg);
	display: flex;
	justify-content: center;
}

.campaign-modal-card[b-qwqsej407h] {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--input-border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	animation: slideIn-b-qwqsej407h 0.3s ease-out;
}

.campaign-card-header[b-qwqsej407h] {
	background: var(--gradient-card);
	color: var(--text-light);
	padding: var(--spacing-lg) var(--spacing-xl);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.campaign-card-header h2[b-qwqsej407h] {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	font-family: var(--font-family-primary);
}

.campaign-card-header-left[b-qwqsej407h] {
	display: flex;
	align-items: center;
}

.campaign-header-icon[b-qwqsej407h] {
	font-size: 1.25rem;
	color: var(--text-light);
	margin-right: var(--spacing-xs);
}

.campaign-card-body[b-qwqsej407h] {
	padding: var(--spacing-2xl);
	background-color: var(--bg-card) !important;
}

.campaign-form-container[b-qwqsej407h] {
	width: 100%;
	background-color: var(--input-bg) !important;
}
/* Standard Bootstrap Form Styling - Consistent with CreateDonor */
.campaign-form-group[b-qwqsej407h] {
	margin-bottom: var(--spacing-md);
	position: relative;
}

/* Standard Bootstrap Labels */
.campaign-label[b-qwqsej407h] {
	display: block;
	margin-bottom: var(--spacing-xs, 4px);
	font-weight: 600;
	color: var(--text-primary, #333);
	font-size: var(--font-size-sm, 14px);
	font-family: inherit;
}

/* Standard Bootstrap Input Fields - Force White Background */
.campaign-form-control[b-qwqsej407h],
.campaign-form-control:focus[b-qwqsej407h],
.campaign-form-control:hover[b-qwqsej407h],
.campaign-form-control:active[b-qwqsej407h],
.campaign-form-control:disabled[b-qwqsej407h] {
	width: 100%;
	padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: var(--radius-sm, 4px);
	font-size: var(--font-size-sm, 14px);
	color: var(--text-primary);
	background-color: var(--input-bg) !important;
	background: var(--input-bg) !important;
	transition: var(--transition-all, all 0.2s ease);
	line-height: 1.5;
	font-family: inherit;
}

.campaign-form-control:focus[b-qwqsej407h] {
	outline: none;
	border-color: var(--primary-color, #0066cc);
	box-shadow: var(--shadow-focus, 0 0 0 2px rgba(0, 102, 204, 0.25));
}

.campaign-form-control:hover:not(:focus)[b-qwqsej407h] {
	border-color: var(--gray-400, #ced4da);
}

/* Standard Bootstrap Textarea */
.campaign-textarea[b-qwqsej407h] {
	resize: vertical;
	min-height: 100px;
	font-family: inherit;
}

/* Standard Bootstrap Placeholder */
.campaign-form-control[b-qwqsej407h]::placeholder {
	color: var(--gray-500, #6c757d);
	opacity: 1;
}

.campaign-form-control:focus[b-qwqsej407h]::placeholder {
	opacity: 0.7;
}

/* Required field styling - consistent with CreateDonor */
.campaign-label:has(+ input[required])[b-qwqsej407h]::after,
.campaign-label:has(+ textarea[required])[b-qwqsej407h]::after {
	content: " *";
	color: var(--danger-color, #dc3545);
	font-weight: bold;
}

/* Required asterisk */
.campaign-required-asterisk[b-qwqsej407h] {
	color: var(--danger-color);
	font-weight: var(--font-weight-bold);
	margin-left: var(--spacing-xxs);
}

/* Validation styling */
.campaign-field-error[b-qwqsej407h] {
	color: var(--danger-color);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	margin-top: var(--spacing-xs);
	font-family: var(--font-family-primary);
	display: block;
}

.campaign-field-success[b-qwqsej407h] {
	color: var(--success-color);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	margin-top: var(--spacing-xs);
	font-family: var(--font-family-primary);
	display: block;
}

/* Action buttons - Standard Bootstrap Style */
.campaign-action-buttons[b-qwqsej407h] {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--gray-200);

	align-items: center;
}

/* Standard Bootstrap Button styling */
.campaign-btn[b-qwqsej407h] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
	border-radius: var(--radius-sm, 4px);
	font-weight: 600;
	font-size: var(--font-size-sm, 14px);
	font-family: inherit;
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-all, all 0.2s ease);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-min-width);
}

.campaign-btn > i[b-qwqsej407h] {
	margin-right: var(--spacing-xs);
}

.campaign-btn:disabled[b-qwqsej407h] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.campaign-btn-primary[b-qwqsej407h] {
	background-color: var(--primary-color, #0066cc);
	color: var(--text-light, #fff);
	border-color: var(--primary-color, #0066cc);
}

.campaign-btn-primary:hover:not(:disabled)[b-qwqsej407h] {
	background-color: var(--primary-color-dark, #0056b3);
	border-color: var(--primary-color-dark, #0056b3);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.campaign-btn-primary:active[b-qwqsej407h] {
	transform: translateY(0);
}

.campaign-btn-secondary[b-qwqsej407h] {
	background-color: var(--gray-500, #6c757d);
	color: var(--text-light, #fff);
	border-color: var(--gray-500, #6c757d);
}

.campaign-btn-secondary:hover:not(:disabled)[b-qwqsej407h] {
	background-color: var(--gray-600, #5a6268);
	border-color: var(--gray-600, #5a6268);
	transform: translateY(-1px);
}

.campaign-btn-outline[b-qwqsej407h] {
	background-color: transparent;
	color: var(--gray-600, #6c757d);
	border-color: var(--gray-400, #ced4da);
}

.campaign-btn-outline:hover:not(:disabled)[b-qwqsej407h] {
	background-color: var(--gray-100, #f8f9fa);
	color: var(--gray-700, #495057);
	border-color: var(--gray-500, #adb5bd);
	transform: translateY(-1px);
}

/* Spinner */
.campaign-spinner-sm[b-qwqsej407h] {
	width: 1rem;
	height: 1rem;
}

/* Animation keyframes */
@keyframes fadeIn-b-qwqsej407h {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn-b-qwqsej407h {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Responsive design */
@media (max-width: 768px) {
	.campaign-modal-container[b-qwqsej407h] {
		padding: var(--spacing-md);
		max-height: 95vh;
	}

	.campaign-card-body[b-qwqsej407h] {
		padding: var(--spacing-lg);
	}

	.campaign-action-buttons[b-qwqsej407h] {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.campaign-btn[b-qwqsej407h] {
		width: 100%;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.campaign-floating-input[b-qwqsej407h],
	.campaign-floating-textarea[b-qwqsej407h],
	.campaign-btn[b-qwqsej407h] {
		transition: none;
	}

	.modal-campaign-overlay[b-qwqsej407h],
	.campaign-modal-card[b-qwqsej407h] {
		animation: none;
	}
}

/* Main modal container */
.create-campaign-modal[b-qwqsej407h] {
	background: var(--white);
	/* keep existing border radius token where possible */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2xl);
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	animation: modalSlideIn-b-qwqsej407h 0.3s ease-out;
}

@keyframes modalSlideIn-b-qwqsej407h {
	from {
		opacity: 0;
		transform: translateY(-50px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Modal header */
.modal-header[b-qwqsej407h] {
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-title[b-qwqsej407h] {
	margin: 0;
	color: var(--primary-color);
	font-weight: 600;
}

.btn-close[b-qwqsej407h] {
	background: none;
	border: none;
	font-size: 1.2rem;
	color: var(--text-color-muted);
	cursor: pointer;
	padding: var(--spacing-xs);
	border-radius: var(--border-radius-sm);
	transition: all 0.2s ease;
}

.btn-close:hover[b-qwqsej407h] {
	background-color: var(--background-hover);
	color: var(--text-color);
}

/* Modal body */
.modal-body[b-qwqsej407h] {
	padding: var(--spacing-lg);
}

/* Form groups - matching Donors page styling */
.form-group[b-qwqsej407h] {
	margin-bottom: var(--spacing-lg);
}

/* Form labels */
.form-label[b-qwqsej407h] {
	display: inline-block;
	margin-bottom: var(--spacing-xs);
	font-weight: 500;
	color: var(--text-color);
	font-size: var(--font-size-sm);
}

/* Required asterisk */
.required-asterisk[b-qwqsej407h] {
	color: var(--danger-color);
	font-weight: bold;
	margin-left: 2px;
}

/* Input groups - matching Donors page styling */
.input-group[b-qwqsej407h] {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

.input-group .form-control[b-qwqsej407h] {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
	font-size: var(--font-size-sm);
	padding: var(--spacing-xs) var(--spacing-sm);
}

.input-group .form-control:not(:last-child)[b-qwqsej407h] {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group .form-control:focus[b-qwqsej407h] {
	z-index: 3;
}

.input-group-text[b-qwqsej407h] {
	display: flex;
	align-items: center;
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-color);
	text-align: center;
	white-space: nowrap;
	background-color: var(--background-secondary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
}

/* Form controls - matching Donors page styling */
.form-control[b-qwqsej407h] {
	display: block;
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-color);
	background-color: var(--input-bg);
	background-image: none;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-qwqsej407h] {
	color: var(--text-color);
	background-color: var(--input-bg);
	border-color: var(--primary-color);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

.form-control[b-qwqsej407h]::placeholder {
	color: var(--text-color-muted);
	opacity: 1;
}

.form-control:disabled[b-qwqsej407h],
.form-control[readonly][b-qwqsej407h] {
	background-color: var(--input-disabled-bg);
	opacity: 1;
}

.form-control.is-invalid[b-qwqsej407h] {
	border-color: var(--danger-color);
	padding-right: calc(1.5em + 0.75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6 4.4 4.8m-4.4 0L9.2 3.6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus[b-qwqsej407h] {
	border-color: var(--danger-color);
	box-shadow: 0 0 0 0.2rem rgba(var(--danger-color-rgb), 0.25);
}

/* Textarea specific */
textarea.form-control[b-qwqsej407h] {
	resize: vertical;
	min-height: 100px;
}

/* Character counters */
.character-counters[b-qwqsej407h] {
	margin-top: var(--spacing-xs);
	text-align: right;
}

.character-counters small[b-qwqsej407h] {
	font-size: var(--font-size-xs);
	color: var(--text-color-muted);
}

/* Invalid feedback */
.invalid-feedback[b-qwqsej407h] {
	width: 100%;
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--danger-color);
}

.invalid-feedback.d-block[b-qwqsej407h] {
	display: block;
}

/* Modal footer */
.modal-footer[b-qwqsej407h] {
	padding: var(--spacing-lg);
	border-top: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-sm);
}

/* Button styles */
.btn[b-qwqsej407h] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
	border-radius: var(--border-radius-sm);
	transition: all 0.15s ease-in-out;
}

.btn:disabled[b-qwqsej407h] {
	pointer-events: none;
	opacity: 0.65;
}

.btn-primary[b-qwqsej407h] {
	color: var(--text-light);
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-qwqsej407h] {
	background-color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
	color: var(--text-black) !important; /* Black text on hover */
}

.btn-primary:focus[b-qwqsej407h] {
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.5);
}

.btn-secondary[b-qwqsej407h] {
	color: var(--text-color);
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
}

.btn-secondary:hover:not(:disabled)[b-qwqsej407h] {
	background-color: var(--secondary-color-hover);
	border-color: var(--secondary-color-hover);
}

.btn-secondary:focus[b-qwqsej407h] {
	box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color-rgb), 0.5);
}

.btn-danger[b-qwqsej407h] {
	color: var(--text-light);
	background-color: var(--danger-color);
	border-color: var(--danger-color);
}

.btn-danger:hover:not(:disabled)[b-qwqsej407h] {
	background-color: var(--danger-color-hover);
	border-color: var(--danger-color-hover);
	color: var(--text-black) !important; /* Black text on hover */
}

/* Spinner */
.spinner-border[b-qwqsej407h] {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: -0.125em;
	border: 0.25em solid currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spinner-border-b-qwqsej407h 0.75s linear infinite;
}

.spinner-border-sm[b-qwqsej407h] {
	width: 1rem;
	height: 1rem;
	border-width: 0.125em;
}

@keyframes spinner-border-b-qwqsej407h {
	to {
		transform: rotate(360deg);
	}
}

/* Confirmation dialog */
.confirmation-dialog[b-qwqsej407h] {
	background: var(--white);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	width: 100%;
	max-width: 400px;
	position: relative;
	animation: modalSlideIn-b-qwqsej407h 0.3s ease-out;
}

.dialog-header[b-qwqsej407h] {
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--border-color);
}

.dialog-title[b-qwqsej407h] {
	margin: 0;
	color: var(--primary-color);
	font-weight: 600;
}

.dialog-body[b-qwqsej407h] {
	padding: var(--spacing-lg);
}

.dialog-message[b-qwqsej407h] {
	margin: 0;
	color: var(--text-color);
}

.dialog-actions[b-qwqsej407h] {
	padding: var(--spacing-lg);
	border-top: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-sm);
}

/* Utility classes */
.visually-hidden[b-qwqsej407h] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.text-success[b-qwqsej407h] {
	color: var(--success-color) !important;
}

.text-danger[b-qwqsej407h] {
	color: var(--danger-color) !important;
}

.text-muted[b-qwqsej407h] {
	color: var(--text-color-muted) !important;
}

.me-2[b-qwqsej407h] {
	margin-right: var(--spacing-xs) !important;
}

/* Responsive design */
@media (max-width: 768px) {
	.modal-overlay[b-qwqsej407h] {
		padding: var(--spacing-sm);
	}

	.create-campaign-modal[b-qwqsej407h] {
		max-width: 100%;
	}

	.modal-header[b-qwqsej407h],
	.modal-body[b-qwqsej407h],
	.modal-footer[b-qwqsej407h] {
		padding: var(--spacing-md);
	}

	.modal-footer[b-qwqsej407h] {
		flex-direction: column;
		align-items: stretch;
	}

	.modal-footer .btn[b-qwqsej407h] {
		width: 100%;
		margin-bottom: var(--spacing-xs);
	}

	.modal-footer .btn:last-child[b-qwqsej407h] {
		margin-bottom: 0;
	}
}

/* Confirmation dialog styling */
.confirmation-dialog[b-qwqsej407h] {
	background-color: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	animation: slideIn-b-qwqsej407h 0.3s ease-out;
}

.dialog-header[b-qwqsej407h] {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-bottom: 1px solid var(--gray-200);
	background: var(--gradient-card);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.dialog-title[b-qwqsej407h] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	font-family: var(--font-family-primary);
}

.dialog-header-left[b-qwqsej407h] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.dialog-header-icon[b-qwqsej407h] {
	font-size: 1.125rem;
	color: var(--text-light);
}

.dialog-body[b-qwqsej407h] {
	padding: var(--spacing-xl);
}

.dialog-message[b-qwqsej407h] {
	margin: 0;
	font-size: var(--font-size-base);
	color: var(--text-primary);
	line-height: 1.5;
	font-family: var(--font-family-primary);
}

.dialog-actions[b-qwqsej407h] {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-top: 1px solid var(--gray-200);
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
	background-color: var(--gray-50);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dialog-actions .btn[b-qwqsej407h] {
	min-width: 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dialog-actions .btn > i[b-qwqsej407h] {
	margin-right: var(--spacing-xs);
}

@media (max-width: 768px) {
	.confirmation-dialog[b-qwqsej407h] {
		width: 95%;
		max-width: 400px;
	}

	.dialog-actions[b-qwqsej407h] {
		flex-direction: column;
	}

	.dialog-actions .btn[b-qwqsej407h] {
		width: 100%;
	}
}
/* /Components/DonorSelectionModal.razor.rz.scp.css */
/* Donor Selection Modal Styles */

/* Modal Header - Blue background for consistency */
.donor-modal-header[b-o33hhb0psw] {
    background: var(--gradient-card);
    border-bottom: 1px solid var(--border-light);
    padding: var(--spacing-md);
}

.donor-modal-header .modal-title[b-o33hhb0psw] {
    color: var(--white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
}

.donor-modal-header .modal-title i[b-o33hhb0psw] {
    color: var(--white);
}

/* Back Button Styling */
.donor-modal-header .back-button[b-o33hhb0psw] {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.donor-modal-header .back-button:hover[b-o33hhb0psw] {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(-2px);
}

.donor-modal-header .back-button:active[b-o33hhb0psw] {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateX(-4px);
}

.donor-modal-header .back-button i[b-o33hhb0psw] {
    font-size: var(--font-size-base);
}

/* Modal Body Styles */
.modal-body[b-o33hhb0psw] {
    padding: var(--spacing-lg);
}

/* Search Input Group */
.input-group[b-o33hhb0psw] {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.input-group-text[b-o33hhb0psw] {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}

.input-group .form-control[b-o33hhb0psw] {
    border: 1px solid var(--border-light);
}

.input-group .form-control:focus[b-o33hhb0psw] {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

/* List Group Items */
.list-group-item[b-o33hhb0psw] {
    border: 1px solid var(--border-light);
    transition: var(--transition-all);
    cursor: pointer;
    padding: var(--spacing-md);
}

.list-group-item:hover[b-o33hhb0psw] {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
}

.list-group-item:active[b-o33hhb0psw] {
    background-color: var(--bg-active);
}

.list-group-item h6[b-o33hhb0psw] {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
}

.list-group-item small[b-o33hhb0psw] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Chevron icon */
.list-group-item .fa-chevron-right[b-o33hhb0psw] {
    color: var(--text-muted);
    transition: var(--transition-all);
}

.list-group-item:hover .fa-chevron-right[b-o33hhb0psw] {
    color: var(--primary-color);
    transform: translateX(4px);
}

/* Loading States */
.spinner-border[b-o33hhb0psw] {
    border-color: var(--primary-color);
    border-right-color: transparent;
}

/* Empty State */
.text-muted[b-o33hhb0psw] {
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .donor-modal-header[b-o33hhb0psw] {
        padding: var(--spacing-md);
    }

    .donor-modal-header .modal-title[b-o33hhb0psw] {
        font-size: var(--font-size-base);
    }

    .donor-modal-header .back-button[b-o33hhb0psw] {
        min-width: 32px;
        height: 32px;
        padding: var(--spacing-xxs) var(--spacing-xs);
    }

    .modal-body[b-o33hhb0psw] {
        padding: var(--spacing-md);
    }
}
/* /Components/DownloadTemplate.razor.rz.scp.css */
.download-template-card[b-jf7qp8wxbv] {
	display: flex;
	flex-direction: column;
	background: linear-gradient(
		135deg,
		var(--bg-card) 0%,
		var(--bg-light) 100%
	);
	border-radius: var(--radius-lg);
	padding: 0;
	border-left: 5px solid var(--accent-color);
	box-shadow: var(--shadow-md);
	max-height: calc(100vh - 180px);
	gap: 0;
	transition: var(--transition-all);
	overflow: hidden;
}

.download-template-card:hover[b-jf7qp8wxbv] {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Card Header - Enhanced with gradient */
.card-header[b-jf7qp8wxbv] {
	background: linear-gradient(
		135deg,
		var(--accent-color) 0%,
		var(--primary-color) 100%
	);
	color: var(--white);
	padding: var(--spacing-md);
	border-bottom: none;
	flex-shrink: 0;
}

.header-content[b-jf7qp8wxbv] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.header-action[b-jf7qp8wxbv] {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-shrink: 0;
}

.header-download-btn[b-jf7qp8wxbv] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	cursor: pointer;
	transition: var(--transition-all);
}

.header-download-btn:disabled[b-jf7qp8wxbv] {
	opacity: 0.5;
	cursor: not-allowed;
}

.header-download-btn i[b-jf7qp8wxbv] {
	font-size: 1rem;
}

.logo-section[b-jf7qp8wxbv] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(10px);
	flex-shrink: 0;
}

.logo-icon[b-jf7qp8wxbv] {
	font-size: 1.5rem;
	color: var(--white);
}

.header-text[b-jf7qp8wxbv] {
	flex: 1;
}

.header-text h3[b-jf7qp8wxbv] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--white);
	margin: 0 0 var(--spacing-xs) 0;
}

.header-subtitle[b-jf7qp8wxbv] {
	font-size: var(--font-size-xs);
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	font-weight: var(--font-weight-normal);
}

/* Card Body */
.card-body[b-jf7qp8wxbv] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	flex: 1;
	padding: var(--spacing-md);
	overflow-y: auto;
	min-height: 0;
}

/* Reserve visual space at the bottom so a sticky button doesn't overlap content */
.card-body[b-jf7qp8wxbv]::after {
	content: "";
	display: block;
	height: 0; /* footer moved out of scrollable body */
}

/* Custom scrollbar for card body */
.card-body[b-jf7qp8wxbv]::-webkit-scrollbar {
	width: 6px;
}

.card-body[b-jf7qp8wxbv]::-webkit-scrollbar-track {
	background: var(--gray-100);
	border-radius: var(--radius-md);
}

.card-body[b-jf7qp8wxbv]::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: var(--radius-md);
}

.card-body[b-jf7qp8wxbv]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
}

/* Alert Styling */
.alert[b-jf7qp8wxbv] {
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);
}

.alert-error[b-jf7qp8wxbv] {
	background: var(--error-bg);
	color: var(--error-color);
	border: 1px solid var(--error-border);
}

.alert i[b-jf7qp8wxbv] {
	font-size: var(--font-size-lg);
}

/* Description Section */
.description-section[b-jf7qp8wxbv] {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	background: linear-gradient(
		135deg,
		var(--info-color) 0%,
		var(--primary-color) 100%
	);
	background: rgba(var(--primary-rgb), 0.05);
	border-radius: var(--radius-md);
	border-left: 3px solid var(--info-color);
}

.description-icon[b-jf7qp8wxbv] {
	font-size: var(--font-size-lg);
	color: var(--info-color);
	flex-shrink: 0;
}

.description[b-jf7qp8wxbv] {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	line-height: var(--line-height-normal);
	margin: 0;
}

/* Form Section */
.form-section[b-jf7qp8wxbv] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.form-group[b-jf7qp8wxbv] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.form-label[b-jf7qp8wxbv] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0;
}

.form-label i[b-jf7qp8wxbv] {
	color: var(--primary-color);
	font-size: var(--font-size-base);
}

.required[b-jf7qp8wxbv] {
	color: var(--danger-color);
	font-weight: var(--font-weight-bold);
}

.form-control[b-jf7qp8wxbv] {
	padding: var(--spacing-3) var(--spacing-4);
	font-size: var(--font-size-base);
	font-family: var(--font-family-primary);
	line-height: var(--line-height-normal);
	background-color: var(--bg-card);
	border: 2px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: var(--transition-all);
	color: var(--text-primary);
}

.form-control:focus[b-jf7qp8wxbv] {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-control:disabled[b-jf7qp8wxbv] {
	background-color: var(--bg-muted);
	opacity: 0.6;
	cursor: not-allowed;
}

.form-hint[b-jf7qp8wxbv] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-xs);
}

.form-hint i[b-jf7qp8wxbv] {
	color: var(--info-color);
}

/* Template Features - Modernized */
.template-features[b-jf7qp8wxbv] {
	display: flex;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm);
	background: var(--bg-light);
	border-radius: var(--radius-md);
}

.feature-item[b-jf7qp8wxbv] {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs);
	background: var(--bg-card);
	border-radius: var(--radius-sm);
	transition: var(--transition-all);
	border: 1px solid var(--border-light);
}

.feature-item:hover[b-jf7qp8wxbv] {
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
	border-color: var(--primary-color);
}

.feature-icon[b-jf7qp8wxbv] {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		135deg,
		var(--success-color) 0%,
		var(--info-color) 100%
	);
	border-radius: var(--radius-full);
	color: var(--white);
}

.feature-icon i[b-jf7qp8wxbv] {
	font-size: var(--font-size-base);
}

.feature-item span[b-jf7qp8wxbv] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	text-align: center;
}

/* Download Button - Premium Design */
.btn-download[b-jf7qp8wxbv] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-3) var(--spacing-4);
	background: linear-gradient(
		135deg,
		var(--accent-color) 0%,
		var(--primary-color) 100%
	);
	color: var(--white);
	border: none;
	border-radius: var(--radius-lg);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: var(--transition-all);
	width: 100%;
	box-shadow: var(--shadow-md);
	position: relative;
	bottom: 0;
	z-index: 6;
	overflow: hidden;
}

.btn-download[b-jf7qp8wxbv]::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transition: left 0.5s;
}

.btn-download:hover[b-jf7qp8wxbv]::before {
	left: 100%;
}

.btn-download:hover:not(:disabled)[b-jf7qp8wxbv] {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

.btn-download:active:not(:disabled)[b-jf7qp8wxbv] {
	transform: translateY(-1px);
}

.btn-download:disabled[b-jf7qp8wxbv] {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--gray-400);
}

/* Footer that holds the download button so it stays visible outside the scrollable body */
.card-footer[b-jf7qp8wxbv] {
	padding: var(--spacing-md);
	border-top: 1px solid var(--border-light);
	background: var(--bg-card);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.btn-download i[b-jf7qp8wxbv] {
	font-size: var(--font-size-lg);
}

/* Help Section - Enhanced */
.help-section[b-jf7qp8wxbv] {
	display: flex;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	background: linear-gradient(
		135deg,
		var(--bg-muted) 0%,
		var(--bg-light) 100%
	);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
}

.help-icon[b-jf7qp8wxbv] {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		135deg,
		var(--warning-color) 0%,
		var(--accent-color) 100%
	);
	border-radius: var(--radius-full);
	color: var(--white);
	flex-shrink: 0;
}

.help-icon i[b-jf7qp8wxbv] {
	font-size: var(--font-size-base);
}

.help-content[b-jf7qp8wxbv] {
	flex: 1;
}

.help-title[b-jf7qp8wxbv] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs) 0;
}

.help-text[b-jf7qp8wxbv] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	line-height: var(--line-height-normal);
	margin: 0;
}

.help-link[b-jf7qp8wxbv] {
	color: var(--text-link);
	text-decoration: none;
	font-weight: var(--font-weight-semibold);
	transition: var(--transition-colors);
	border-bottom: 1px solid transparent;
}

.help-link:hover[b-jf7qp8wxbv] {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
	.download-template-card[b-jf7qp8wxbv] {
		padding: 0;
	}

	.card-header[b-jf7qp8wxbv] {
		padding: var(--spacing-md);
	}

	.logo-section[b-jf7qp8wxbv] {
		width: 50px;
		height: 50px;
	}

	.logo-icon[b-jf7qp8wxbv] {
		font-size: 1.5rem;
	}

	.header-text h3[b-jf7qp8wxbv] {
		font-size: var(--font-size-lg);
	}

	.card-body[b-jf7qp8wxbv] {
		padding: var(--spacing-md);
		gap: var(--spacing-md);
	}

	.template-features[b-jf7qp8wxbv] {
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.btn-download[b-jf7qp8wxbv] {
		padding: var(--spacing-3) var(--spacing-4);
		font-size: var(--font-size-base);
		position: relative; /* disable sticky on small screens so button stays in flow */
	}

	.help-section[b-jf7qp8wxbv] {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}
/* /Components/DuplicateDonorConfirmation.razor.rz.scp.css */
/* Duplicate Donor Confirmation Modal - Follows Campaign Modal Design Pattern */

/* Modal overlay */
.modal-campaign-overlay[b-v9d51e6g3h] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--overlay-dark);
	backdrop-filter: blur(var(--modal-backdrop-blur, 2px));
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-modal);
	animation: fadeIn-b-v9d51e6g3h var(--modal-fade-duration, 0.3s) ease-in-out;
}

/* Modal container - smaller for confirmation dialogs */
.campaign-modal-container.duplicate-donor-modal-container[b-v9d51e6g3h] {
	width: 100%;
	max-width: 550px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--spacing-lg);
	display: flex;
	justify-content: center;
}

/* Modal card */
.campaign-modal-card[b-v9d51e6g3h] {
	background-color: var(--bg-card) !important;
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	animation: slideIn-b-v9d51e6g3h 0.3s ease-out;
}

/* Card header - uses warning color to indicate caution */
.campaign-card-header[b-v9d51e6g3h] {
	background: var(--warning-color);
	color: var(--on-warning);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.campaign-card-header h2[b-v9d51e6g3h] {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	color: var(--on-warning);
	font-family: var(--font-family-primary);
}

/* Card body */
.campaign-card-body[b-v9d51e6g3h] {
	padding: var(--spacing-lg);
	background-color: var(--bg-card) !important;
}

.campaign-form-container[b-v9d51e6g3h] {
	width: 100%;
	background-color: var(--bg-card) !important;
}

/* Duplicate message styling */
.duplicate-message[b-v9d51e6g3h] {
	margin: 0 0 var(--spacing-md) 0;
	color: var(--text-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
}

/* Info text */
.duplicate-info[b-v9d51e6g3h] {
	margin: 0 0 var(--spacing-lg) 0;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	line-height: 1.5;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--bg-secondary);
	border-left: 3px solid var(--info-color);
	border-radius: var(--radius-sm);
}

/* Action buttons */
.campaign-action-buttons[b-v9d51e6g3h] {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--border-color);
}

/* Button styling */
.campaign-btn[b-v9d51e6g3h] {
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-base);
	font-family: var(--font-family-primary);
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-all);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;
	gap: var(--spacing-xs);
}

.campaign-btn:disabled[b-v9d51e6g3h] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.campaign-btn:hover:not(:disabled)[b-v9d51e6g3h] {
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

/* Primary button - for confirm action */
.campaign-btn-primary[b-v9d51e6g3h] {
	background-color: var(--primary-color);
	color: var(--on-primary);
	border-color: var(--primary-color);
}

.campaign-btn-primary:hover:not(:disabled)[b-v9d51e6g3h] {
	background-color: var(--primary-dark);
	border-color: var(--primary-dark);
}

/* Outline button - for cancel action */
.campaign-btn-outline[b-v9d51e6g3h] {
	background-color: transparent;
	color: var(--text-secondary);
	border-color: var(--border-color);
}

.campaign-btn-outline:hover:not(:disabled)[b-v9d51e6g3h] {
	background-color: var(--bg-hover);
	border-color: var(--border-dark);
	color: var(--text-primary);
}

/* Animations */
@keyframes fadeIn-b-v9d51e6g3h {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn-b-v9d51e6g3h {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.campaign-modal-container.duplicate-donor-modal-container[b-v9d51e6g3h] {
		max-width: 95%;
		padding: var(--spacing-md);
	}

	.campaign-card-header h2[b-v9d51e6g3h] {
		font-size: var(--font-size-xl);
	}

	.campaign-action-buttons[b-v9d51e6g3h] {
		flex-direction: column-reverse;
		gap: var(--spacing-sm);
	}

	.campaign-btn[b-v9d51e6g3h] {
		width: 100%;
	}
}
/* /Components/EditCampaignModal.razor.rz.scp.css */
/* EditCampaignModal - Consistent Design with CreateCampaignModal */

/* Modal overlay for the main edit modal */
.modal-campaign-overlay[b-at9i3p1exa] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--overlay-dark);
    /* use design token for backdrop blur */
    backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    animation: fadeIn-b-at9i3p1exa var(--modal-fade-duration) ease-in-out;
}

/* Modal overlay for confirmation dialogs */
.modal-overlay[b-at9i3p1exa] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--overlay-dark);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-overlay);
    animation: fadeIn-b-at9i3p1exa var(--modal-fade-duration) ease-in-out;
}

.campaign-modal-container[b-at9i3p1exa] {
    width: 100%;
    max-width: var(--modal-max-width);
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    display: flex;
    justify-content: center;
}

.campaign-modal-card[b-at9i3p1exa] {
    background-color: var(--bg-card);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    animation: slideIn-b-at9i3p1exa 0.3s ease-out;
}

.campaign-card-header[b-at9i3p1exa] {
    background: var(--gradient-card);
    color: var(--text-light);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.campaign-card-header h2[b-at9i3p1exa] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
    font-family: var(--font-family-primary);
}

.campaign-card-body[b-at9i3p1exa] {
    padding: var(--spacing-2xl);
}

.campaign-form-container[b-at9i3p1exa] {
    width: 100%;
}

.campaign-form-group[b-at9i3p1exa] {
    margin-bottom: var(--spacing-xl);
}

/* Standard form label used across Create/Edit modals */
.campaign-label[b-at9i3p1exa] {
    display: block;
    margin-bottom: var(--spacing-xs, 4px);
    font-weight: 600;
    color: var(--text-primary, #333);
    font-size: var(--font-size-sm, 14px);
    font-family: inherit;
}

/* Standard form control sizing (copied from CreateCampaignModal) */
.campaign-form-control[b-at9i3p1exa],
.campaign-form-control:focus[b-at9i3p1exa],
.campaign-form-control:hover[b-at9i3p1exa],
.campaign-form-control:active[b-at9i3p1exa],
.campaign-form-control:disabled[b-at9i3p1exa] {
    width: 100%;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-sm, 14px);
    color: var(--text-primary);
    background-color: var(--input-bg) !important;
    background: var(--input-bg) !important;
    transition: var(--transition-all, all 0.2s ease);
    line-height: 1.5;
    font-family: inherit;
}

.campaign-form-control:focus[b-at9i3p1exa] {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: var(--shadow-focus, 0 0 0 2px rgba(0, 102, 204, 0.25));
}

.campaign-form-control:hover:not(:focus)[b-at9i3p1exa] {
    border-color: var(--gray-400, #ced4da);
}

/* Standard textarea sizing */
.campaign-textarea[b-at9i3p1exa] {
    resize: vertical;
    min-height: var(--textarea-min-height, 100px);
    font-family: inherit;
}

/* Floating Label System - Identical to CreateCampaignModal */
.campaign-floating-group[b-at9i3p1exa] {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.campaign-floating-input[b-at9i3p1exa],
.campaign-floating-textarea[b-at9i3p1exa] {
    width: 100%;
    background-color: var(--white);
    border: 2px solid var(--input-border-variant);
    border-radius: var(--radius-sm);
    /* use textarea padding tokens for consistency */
    padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal) var(--textarea-padding-bottom) var(--textarea-padding-horizontal);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--text-primary);
    transition: all var(--transition-quick) ease-in-out;
    background-color: transparent;
}

.campaign-floating-input:focus[b-at9i3p1exa],
.campaign-floating-textarea:focus[b-at9i3p1exa] {
    outline: none;
    border-color: var(--primary-color);
    /* use a variable for focus outline width */
    box-shadow: 0 0 0 var(--focus-outline-width) var(--primary-color);
}

.campaign-floating-label[b-at9i3p1exa] {
    position: absolute;
    left: var(--textarea-padding-horizontal);
    top: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--floating-label-color);
    transition: all var(--transition-quick) ease-in-out;
    pointer-events: none;
    transform-origin: left top;
    background-color: var(--white);
    padding: 0 0.25rem;
    z-index: 1;
}

/* Animated states */
.campaign-floating-input:focus + .campaign-floating-label[b-at9i3p1exa],
.campaign-floating-input.has-value + .campaign-floating-label[b-at9i3p1exa],
.campaign-floating-textarea:focus + .campaign-floating-label[b-at9i3p1exa],
.campaign-floating-textarea.has-value + .campaign-floating-label[b-at9i3p1exa] {
    top: var(--floating-label-top-focused);
    left: var(--floating-label-left-focused);
    font-size: var(--floating-label-font-size-focused);
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

.campaign-floating-input:focus + .campaign-floating-label[b-at9i3p1exa],
.campaign-floating-textarea:focus + .campaign-floating-label[b-at9i3p1exa] {
    color: var(--primary-color);
}

.campaign-floating-input.has-value + .campaign-floating-label[b-at9i3p1exa],
.campaign-floating-textarea.has-value + .campaign-floating-label[b-at9i3p1exa] {
    color: var(--text-primary);
}

/* Textarea specific */
.campaign-floating-textarea[b-at9i3p1exa] {
    resize: vertical;
    min-height: var(--textarea-min-height);
}

/* Required asterisk */
.campaign-required-asterisk[b-at9i3p1exa] {
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-xxs);
}

/* Validation styling */
.campaign-field-error[b-at9i3p1exa] {
    color: var(--danger-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    font-family: var(--font-family-primary);
    display: block;
}

.campaign-field-success[b-at9i3p1exa] {
    color: var(--success-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    font-family: var(--font-family-primary);
    display: block;
}

/* Action buttons */
.campaign-action-buttons[b-at9i3p1exa] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

/* Button styling */
.campaign-btn[b-at9i3p1exa] {
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-all);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--btn-min-width);
}

.campaign-btn:disabled[b-at9i3p1exa] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.campaign-btn-primary[b-at9i3p1exa] {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.campaign-btn-primary:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.campaign-btn-secondary[b-at9i3p1exa] {
    background-color: var(--gray-500);
    color: var(--text-light);
    border-color: var(--gray-500);
}

.campaign-btn-secondary:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
    transform: translateY(-1px);
}

.campaign-btn-outline[b-at9i3p1exa] {
    background-color: transparent;
    color: var(--gray-600);
    border-color: var(--gray-400);
}

.campaign-btn-outline:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-500);
    transform: translateY(-1px);
}

/* Spinner */
.campaign-spinner-sm[b-at9i3p1exa] {
    width: 1rem;
    height: 1rem;
}

/* Bootstrap Modal Override for Unsaved Changes Dialog */
.modal[b-at9i3p1exa] {
    z-index: calc(var(--z-modal) + 10);
}

.modal-backdrop[b-at9i3p1exa] {
    z-index: calc(var(--z-modal) + 5);
}

.modal-content[b-at9i3p1exa] {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-header[b-at9i3p1exa] {
    background: var(--gradient-card);
    color: var(--text-light);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title[b-at9i3p1exa] {
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
}

.modal-body[b-at9i3p1exa] {
    padding: var(--spacing-xl);
}

.modal-footer[b-at9i3p1exa] {
    border-top: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
}

.dialog-message[b-at9i3p1exa] {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    font-family: var(--font-family-primary);
}

.btn-close[b-at9i3p1exa] {
    background: none;
    border: none;
    color: var(--text-light);
    opacity: 0.8;
    padding: 0.5rem;
}

.btn-close:hover[b-at9i3p1exa] {
    opacity: 1;
}

.btn-danger[b-at9i3p1exa] {
    background-color: var(--danger-color);
    color: var(--text-light);
    border-color: var(--danger-color);
}

.btn-danger:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
}

/* Animation keyframes */
@keyframes fadeIn-b-at9i3p1exa {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-at9i3p1exa {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .campaign-modal-container[b-at9i3p1exa] {
        padding: var(--spacing-md);
        max-height: 95vh;
    }
    
    .campaign-card-body[b-at9i3p1exa] {
        padding: var(--spacing-lg);
    }
    
    .campaign-action-buttons[b-at9i3p1exa] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .campaign-btn[b-at9i3p1exa] {
        width: 100%;
    }
    
    .modal-footer .btn[b-at9i3p1exa] {
        width: auto;
        flex: 1;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .campaign-floating-input[b-at9i3p1exa],
    .campaign-floating-textarea[b-at9i3p1exa] {
        border-width: 2px;
    }
    
    .campaign-field-error[b-at9i3p1exa] {
        font-weight: var(--font-weight-bold);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .campaign-floating-input[b-at9i3p1exa],
    .campaign-floating-textarea[b-at9i3p1exa],
    .campaign-btn[b-at9i3p1exa] {
        transition: none;
    }
    
    .modal-campaign-overlay[b-at9i3p1exa],
    .campaign-modal-card[b-at9i3p1exa] {
        animation: none;
    }
}

.create-campaign-container[b-at9i3p1exa] {
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    display: flex;
    justify-content: center;
}

.create-campaign-card[b-at9i3p1exa] {
    background-color: var(--bg-card);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    animation: slideIn-b-at9i3p1exa 0.3s ease-out;
}

/* Card Header */
.card-header[b-at9i3p1exa] {
    background: var(--gradient-card);
    color: var(--text-light);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-header h2[b-at9i3p1exa] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
    font-family: var(--font-family-primary);
}

/* Card Body */
.card-body[b-at9i3p1exa] {
    padding: var(--spacing-2xl);
}

/* Form Container */
.form-container[b-at9i3p1exa] {
    width: 100%;
}

/* Form Groups */
.form-group[b-at9i3p1exa] {
    margin-bottom: var(--spacing-xl);
}

/* Floating Label Styling - Consistent with CreateCampaign */
.floating-label-group[b-at9i3p1exa] {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.floating-input[b-at9i3p1exa],
.floating-textarea[b-at9i3p1exa] {
    width: 100%;
    background-color: var(--white);
    border: 2px solid var(--input-border-variant);
    border-radius: var(--radius-sm);
    padding: 1.5rem 0.75rem 0.5rem 0.75rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--text-primary);
    transition: all 0.2s ease-in-out;
    background-color: transparent;
}

.floating-input:focus[b-at9i3p1exa],
.floating-textarea:focus[b-at9i3p1exa] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* Floating Label */
.floating-label[b-at9i3p1exa] {
    position: absolute;
    left: 0.75rem;
    top: 1rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--floating-label-color);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    transform-origin: left top;
    background-color: var(--white);
    padding: 0 0.25rem;
    z-index: 1;
}

/* Animated state when focused or has content */
.floating-input:focus + .floating-label[b-at9i3p1exa],
.floating-input.has-value + .floating-label[b-at9i3p1exa],
.floating-textarea:focus + .floating-label[b-at9i3p1exa],
.floating-textarea.has-value + .floating-label[b-at9i3p1exa] {
    top: -0.5rem;
    left: 0.5rem;
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

/* Enhanced floating label states */
.floating-input:focus + .floating-label[b-at9i3p1exa],
.floating-textarea:focus + .floating-label[b-at9i3p1exa] {
    color: var(--primary-color);
}

.floating-input.has-value + .floating-label[b-at9i3p1exa],
.floating-textarea.has-value + .floating-label[b-at9i3p1exa] {
    color: var(--text-primary);
}

/* Textarea specific styling */
.floating-textarea[b-at9i3p1exa] {
    resize: vertical;
    min-height: 120px;
}

/* Required asterisk */
.required-asterisk[b-at9i3p1exa] {
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
    margin-left: 2px;
}

/* Validation Styling */
.field-validation-error[b-at9i3p1exa] {
    color: var(--danger-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    font-family: var(--font-family-primary);
    display: block;
}

.field-validation-success[b-at9i3p1exa] {
    color: var(--success-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    font-family: var(--font-family-primary);
    display: block;
}

/* Character count */
.form-text[b-at9i3p1exa] {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Action Buttons */
.action-buttons[b-at9i3p1exa] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

/* Button Styling */
.btn[b-at9i3p1exa] {
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-all);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}

.btn:disabled[b-at9i3p1exa] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary[b-at9i3p1exa] {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.btn-secondary[b-at9i3p1exa] {
    background-color: var(--gray-500);
    color: var(--text-light);
    border-color: var(--gray-500);
}

.btn-secondary:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
    transform: translateY(-1px);
}

.btn-outline-secondary[b-at9i3p1exa] {
    background-color: transparent;
    color: var(--gray-600);
    border-color: var(--gray-400);
}

.btn-outline-secondary:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-500);
    transform: translateY(-1px);
}

/* Loading Spinner */
.spinner-border-sm[b-at9i3p1exa] {
    width: 1rem;
    height: 1rem;
}

/* Bootstrap Modal Override for Unsaved Changes Dialog */
.modal[b-at9i3p1exa] {
    z-index: calc(var(--z-modal) + 10);
}

.modal-backdrop[b-at9i3p1exa] {
    z-index: calc(var(--z-modal) + 5);
}

.modal-content[b-at9i3p1exa] {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

.modal-header[b-at9i3p1exa] {
    background: var(--gradient-card);
    color: var(--text-light);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title[b-at9i3p1exa] {
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
}

.modal-body[b-at9i3p1exa] {
    padding: var(--spacing-xl);
}

.modal-footer[b-at9i3p1exa] {
    border-top: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
}

.dialog-message[b-at9i3p1exa] {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    font-family: var(--font-family-primary);
}

.btn-close[b-at9i3p1exa] {
    background: none;
    border: none;
    color: var(--text-light);
    opacity: 0.8;
    padding: 0.5rem;
}

.btn-close:hover[b-at9i3p1exa] {
    opacity: 1;
}

.btn-danger[b-at9i3p1exa] {
    background-color: var(--danger-color);
    color: var(--text-light);
    border-color: var(--danger-color);
}

.btn-danger:hover:not(:disabled)[b-at9i3p1exa] {
    background-color: var(--danger-dark);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
}

/* Animation keyframes */
@keyframes fadeIn-b-at9i3p1exa {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-at9i3p1exa {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .create-campaign-container[b-at9i3p1exa] {
        padding: var(--spacing-md);
        max-height: 95vh;
    }
    
    .card-body[b-at9i3p1exa] {
        padding: var(--spacing-lg);
    }
    
    .action-buttons[b-at9i3p1exa] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn[b-at9i3p1exa] {
        width: 100%;
    }
    
    .modal-footer .btn[b-at9i3p1exa] {
        width: auto;
        flex: 1;
    }
}

/* Confirmation Dialog Styling */
.confirmation-dialog[b-at9i3p1exa] {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn-b-at9i3p1exa 0.3s ease-out;
}

.dialog-header[b-at9i3p1exa] {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gradient-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-title[b-at9i3p1exa] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
    font-family: var(--font-family-primary);
}

.dialog-body[b-at9i3p1exa] {
    padding: var(--spacing-xl);
}

.dialog-message[b-at9i3p1exa] {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.5;
    font-family: var(--font-family-primary);
}

.dialog-actions[b-at9i3p1exa] {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    background-color: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dialog-actions .btn[b-at9i3p1exa] {
    min-width: 80px;
}

.btn-close[b-at9i3p1exa] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-light);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
}

.btn-close:hover[b-at9i3p1exa] {
    opacity: 1;
}

/* Animation keyframes */
@keyframes slideIn-b-at9i3p1exa {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .floating-input[b-at9i3p1exa],
    .floating-textarea[b-at9i3p1exa] {
        border-width: 2px;
    }
    
    .field-validation-error[b-at9i3p1exa] {
        font-weight: var(--font-weight-bold);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .floating-input[b-at9i3p1exa],
    .floating-textarea[b-at9i3p1exa],
    .btn[b-at9i3p1exa] {
        transition: none;
    }
    
    .modal-campaign-overlay[b-at9i3p1exa],
    .modal-overlay[b-at9i3p1exa],
    .confirmation-dialog[b-at9i3p1exa] {
        animation: none;
    }
}
/* /Components/EmailRecipientSelectionModal.razor.rz.scp.css */
/* Modal Backdrop */
.modal-backdrop-visible[b-i2kagwqkqj] {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Modal Content */
.modal-content[b-i2kagwqkqj] {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-2xl);
    border: none;
}

/* Modal Header */
.modal-header[b-i2kagwqkqj] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--on-primary);
    border-bottom: none;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-title[b-i2kagwqkqj] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.modal-header .btn-close[b-i2kagwqkqj] {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: var(--transition-opacity);
}

.modal-header .btn-close:hover[b-i2kagwqkqj] {
    opacity: 1;
}

/* Modal Body */
.modal-body[b-i2kagwqkqj] {
    padding: var(--spacing-lg);
    background-color: var(--surface-color);
}

/* Search Input */
.input-group[b-i2kagwqkqj] {
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.input-group-text[b-i2kagwqkqj] {
    background-color: var(--surface-variant);
    border: 1px solid var(--border-color);
    border-right: none;
    color: var(--text-secondary);
}

.input-group .form-control[b-i2kagwqkqj] {
    border-left: none;
    border: 1px solid var(--border-color);
}

.input-group .form-control:focus[b-i2kagwqkqj] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}

/* Alert Info */
.alert-info[b-i2kagwqkqj] {
    background-color: rgba(37, 99, 235, 0.1);
    border: 1px solid var(--primary-light);
    border-radius: var(--border-radius-md);
    color: var(--primary-dark);
}

.alert-info .btn-outline-secondary[b-i2kagwqkqj] {
    border-color: var(--border-dark);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.alert-info .btn-outline-secondary:hover[b-i2kagwqkqj] {
    background-color: var(--surface-variant);
    border-color: var(--text-secondary);
}

/* Donor List */
.donor-list[b-i2kagwqkqj] {
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-md);
    background-color: var(--background-color);
}

/* Donor Item */
.donor-item[b-i2kagwqkqj] {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: var(--transition-colors);
}

.donor-item:last-child[b-i2kagwqkqj] {
    border-bottom: none;
}

.donor-item:hover[b-i2kagwqkqj] {
    background-color: var(--surface-variant);
}

.donor-item.selected[b-i2kagwqkqj] {
    background-color: rgba(37, 99, 235, 0.05);
    border-left: 3px solid var(--primary-color);
}

.donor-item .form-check[b-i2kagwqkqj] {
    margin-bottom: 0;
    cursor: pointer;
}

.donor-item .form-check-input[b-i2kagwqkqj] {
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
}

.donor-item .form-check-input:checked[b-i2kagwqkqj] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.donor-item .form-check-label[b-i2kagwqkqj] {
    cursor: pointer;
    width: 100%;
    padding-left: var(--spacing-3);
}

/* Donor Info */
.donor-info h6[b-i2kagwqkqj] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.donor-info small[b-i2kagwqkqj] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.donor-info .badge[b-i2kagwqkqj] {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0-5) var(--spacing-2);
    border-radius: var(--border-radius-full);
}

/* Scrollbar Styling */
.donor-list[b-i2kagwqkqj]::-webkit-scrollbar {
    width: 8px;
}

.donor-list[b-i2kagwqkqj]::-webkit-scrollbar-track {
    background: var(--surface-variant);
    border-radius: var(--border-radius-base);
}

.donor-list[b-i2kagwqkqj]::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: var(--border-radius-base);
}

.donor-list[b-i2kagwqkqj]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Empty State */
.text-center .fa-search[b-i2kagwqkqj] {
    color: var(--text-tertiary);
}

/* Modal Footer */
.modal-footer[b-i2kagwqkqj] {
    background-color: var(--surface-variant);
    border-top: 1px solid var(--border-light);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.modal-footer .btn[b-i2kagwqkqj] {
    padding: var(--spacing-2-5) var(--spacing-5);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-md);
    transition: var(--transition-all);
}

.modal-footer .btn-secondary[b-i2kagwqkqj] {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modal-footer .btn-secondary:hover[b-i2kagwqkqj] {
    background-color: var(--surface-variant);
    border-color: var(--border-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.modal-footer .btn-primary[b-i2kagwqkqj] {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--on-primary);
}

.modal-footer .btn-primary:hover:not(:disabled)[b-i2kagwqkqj] {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.modal-footer .btn-primary:disabled[b-i2kagwqkqj] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading Spinner */
.spinner-border[b-i2kagwqkqj] {
    width: 3rem;
    height: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-dialog[b-i2kagwqkqj] {
        margin: var(--spacing-2);
    }

    .modal-body[b-i2kagwqkqj] {
        padding: var(--spacing-md);
    }

    .donor-item[b-i2kagwqkqj] {
        padding: var(--spacing-sm);
    }

    .donor-info h6[b-i2kagwqkqj] {
        font-size: var(--font-size-sm);
    }

    .donor-info small[b-i2kagwqkqj] {
        font-size: var(--font-size-xs);
    }
}
/* /Components/EmailValidationAlert.razor.rz.scp.css */
/* Email Validation Alert Component Styles */

.modal-content[b-pv7dw0zj30] {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.modal-header[b-pv7dw0zj30] {
	padding: 1rem 1rem 0.5rem;
}

.modal-body[b-pv7dw0zj30] {
	padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3.5vw, 2rem)
		clamp(1rem, 2.5vw, 2rem);
}

.modal-body h5[b-pv7dw0zj30] {
	color: var(--text-primary);
	font-size: clamp(1rem, 2.5vw, var(--font-size-xl));
	font-weight: var(--font-weight-normal);
	font-family: var(--font-family-primary);
	margin-bottom: var(--spacing-md);
}

.modal-body p[b-pv7dw0zj30] {
	font-size: clamp(0.95rem, 2.2vw, var(--font-size-base));
	color: var(--text-primary);
	line-height: 1.5;
	font-family: var(--font-family-primary);
	font-weight: var(--font-weight-normal);
	margin: 0 0 var(--spacing-md) 0;
}

.btn-secondary[b-pv7dw0zj30] {
	background-color: var(--gray-600);
	border-color: var(--gray-600);
	color: var(--white);
	padding: var(--spacing-sm) var(--spacing-lg);
	font-weight: var(--font-weight-medium);
	font-family: var(--font-family-primary);
	transition: var(--transition-all);
}

.btn-secondary:hover[b-pv7dw0zj30] {
	background-color: var(--gray-700);
	border-color: var(--gray-700);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

.text-warning[b-pv7dw0zj30] {
	color: var(--warning-color) !important;
}

/* Responsive icon sizing (overrides inline size to scale on small screens) */
.modal-body .fa-exclamation-triangle[b-pv7dw0zj30] {
	font-size: clamp(1.6rem, 6vw, 3.5rem) !important;
}

/* Slightly larger dialog to better match confirmation dialog sizing */
.modal-dialog[b-pv7dw0zj30],
.modal.d-block .modal-dialog[b-pv7dw0zj30],
.modal .modal-dialog.modal-dialog-centered[b-pv7dw0zj30] {
	width: min(95%, 550px);
	max-width: 95vw;
}

/* Make action buttons stack on narrow screens for better touch targets */
@media (max-width: 520px) {
	.modal-body[b-pv7dw0zj30] {
		padding: 1rem;
	}

	.modal-body .btn[b-pv7dw0zj30] {
		width: 100%;
		display: block;
		margin-bottom: var(--spacing-sm);
	}

	.btn-secondary[b-pv7dw0zj30] {
		padding: var(--spacing-sm) var(--spacing-md);
	}
}

.btn-close[b-pv7dw0zj30] {
	opacity: 0.5;
}

.btn-close:hover[b-pv7dw0zj30] {
	opacity: 1;
}
/* /Components/ErrorReasonPopup.razor.rz.scp.css */
/* ErrorReasonPopup.razor.css - Styles for error reason popup component */

.error-reason-cell[b-b08qokr1fe] {
	display: flex;
	align-items: center;
	width: 100%;
}

.error-preview[b-b08qokr1fe] {
	color: var(--error-color);
	cursor: pointer;
	padding: var(--spacing-2) var(--spacing-3);
	border-radius: var(--border-radius-md);
	background-color: rgba(239, 68, 68, 0.1);
	transition: var(--transition-colors);
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
}

.error-preview:hover[b-b08qokr1fe] {
	background-color: rgba(239, 68, 68, 0.2);
	color: var(--error-dark);
}

.error-popup-overlay[b-b08qokr1fe] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn-b-b08qokr1fe var(--transition-duration-fast) ease-in;
}

@keyframes fadeIn-b-b08qokr1fe {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.error-popup-container[b-b08qokr1fe] {
	background-color: var(
		--bg-card
	); /* use design token for white card background */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	animation: slideUp-b-b08qokr1fe var(--transition-fast) ease-out;
	position: relative; /* allow absolute positioned close button */
}

@keyframes slideUp-b-b08qokr1fe {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.error-popup-header[b-b08qokr1fe] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-lg);
	/* use campaign modal header gradient */
	background: var(--gradient-card);
	color: var(--text-light);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.error-popup-header h3[b-b08qokr1fe] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
}

.error-popup-header h3 i[b-b08qokr1fe] {
	color: var(--text-light);
	font-size: var(--font-size-lg);
}

.btn-close[b-b08qokr1fe] {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: var(--font-size-lg);
	cursor: pointer;
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	transition:
		background-color var(--transition-fast),
		transform var(--transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.btn-close:hover[b-b08qokr1fe] {
	background-color: var(--overlay-hover-light);
	color: var(--text-primary);
	transform: scale(1.05);
}

.btn-close:focus[b-b08qokr1fe] {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.error-popup-content[b-b08qokr1fe] {
	flex: 1;
	padding: var(--spacing-lg);
	overflow-y: auto;
}

.error-text[b-b08qokr1fe] {
	color: var(--text-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	background-color: var(--surface-variant);
	padding: var(--spacing-md);
	border-radius: var(--border-radius-md);
	border-left: 4px solid var(--error-color);
	word-wrap: break-word;
	white-space: pre-wrap;
}

.error-popup-footer[b-b08qokr1fe] {
	padding: var(--spacing-lg);
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-3);
}

.btn[b-b08qokr1fe] {
	padding: var(--spacing-2-5) var(--spacing-4);
	border-radius: var(--border-radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	border: none;
	transition: var(--transition-all);
}

.btn-primary[b-b08qokr1fe] {
	background-color: var(--primary-color);
	color: var(--on-primary);
}

.btn-primary:hover[b-b08qokr1fe] {
	background-color: var(--primary-light);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-primary:active[b-b08qokr1fe] {
	background-color: var(--primary-dark);
	transform: translateY(0);
}

/* Outline-style close button used in campaign modal - mirror here for consistency */
.error-close-btn[b-b08qokr1fe] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
	border-radius: var(--radius-sm, 4px);
	font-weight: 600;
	font-size: var(--font-size-sm, 14px);
	background-color: transparent;
	color: var(--gray-600, #6c757d);
	border: 1px solid var(--gray-400, #ced4da);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	transition: var(--transition-all, all 0.2s ease);
}

.error-close-btn:hover:not(:disabled)[b-b08qokr1fe] {
	background-color: var(--gray-100, #f8f9fa);
	color: var(--gray-700, #495057);
	border-color: var(--gray-500, #adb5bd);
	transform: translateY(-1px);
}

.error-close-btn:disabled[b-b08qokr1fe] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
	.error-popup-container[b-b08qokr1fe] {
		width: 95%;
		max-height: 90vh;
	}

	.error-popup-header[b-b08qokr1fe],
	.error-popup-content[b-b08qokr1fe],
	.error-popup-footer[b-b08qokr1fe] {
		padding: var(--spacing-md);
	}

	.error-popup-header h3[b-b08qokr1fe] {
		font-size: var(--font-size-lg);
	}

	.error-text[b-b08qokr1fe] {
		font-size: var(--font-size-sm);
	}
}

/* Accessibility */
.btn-close:focus-visible[b-b08qokr1fe] {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* Smooth scrollbar */
.error-popup-content[b-b08qokr1fe]::-webkit-scrollbar {
	width: 8px;
}

.error-popup-content[b-b08qokr1fe]::-webkit-scrollbar-track {
	background: var(--surface-variant);
	border-radius: var(--border-radius-full);
}

.error-popup-content[b-b08qokr1fe]::-webkit-scrollbar-thumb {
	background: var(--border-dark);
	border-radius: var(--border-radius-full);
}

.error-popup-content[b-b08qokr1fe]::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}
/* /Components/GroupManagementModal.razor.rz.scp.css */
/* Group Management Modal Styles */
.group-management-modal[b-ueaej8igvu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
}

.modal-backdrop[b-ueaej8igvu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content[b-ueaej8igvu] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header[b-ueaej8igvu] {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-primary);
}

.modal-header h3[b-ueaej8igvu] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.close-btn[b-ueaej8igvu] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.close-btn:hover[b-ueaej8igvu] {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

.modal-body[b-ueaej8igvu] {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.loading-state[b-ueaej8igvu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.available-groups h4[b-ueaej8igvu] {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.groups-grid[b-ueaej8igvu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.group-card[b-ueaej8igvu] {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    transition: var(--transition-all);
}

.group-card.member[b-ueaej8igvu] {
    border-color: var(--success-color);
    background-color: var(--success-bg);
}

.group-card:hover[b-ueaej8igvu] {
    box-shadow: var(--shadow-hover);
}

.group-avatar[b-ueaej8igvu] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-md);
    flex-shrink: 0;
}

.group-info[b-ueaej8igvu] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-info h5[b-ueaej8igvu] {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.group-actions[b-ueaej8igvu] {
    display: flex;
    gap: var(--spacing-xs);
}

.btn-add[b-ueaej8igvu],
.btn-remove[b-ueaej8igvu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-add[b-ueaej8igvu] {
    background-color: var(--success-color);
    color: white;
}

.btn-add:hover:not(:disabled)[b-ueaej8igvu] {
    background-color: var(--success-color-dark);
}

.btn-remove[b-ueaej8igvu] {
    background-color: var(--danger-color);
    color: white;
}

.btn-remove:hover:not(:disabled)[b-ueaej8igvu] {
    background-color: var(--danger-color-dark);
}

.btn-add:disabled[b-ueaej8igvu],
.btn-remove:disabled[b-ueaej8igvu] {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-message[b-ueaej8igvu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background-color: var(--danger-bg);
    color: var(--danger-color);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content[b-ueaej8igvu] {
        width: 95%;
        max-height: 90vh;
    }

    .groups-grid[b-ueaej8igvu] {
        grid-template-columns: 1fr;
    }

    .group-card[b-ueaej8igvu] {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .group-info[b-ueaej8igvu] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* Modal visibility utility classes */
.group-management-modal.modal-visible[b-ueaej8igvu] {
    display: block;
}

.group-management-modal.modal-hidden[b-ueaej8igvu] {
    display: none;
}
/* /Components/GuidelinesPopup.razor.rz.scp.css */
/* Guidelines Popup Component Styles */

.guidelines-overlay[b-vezfuefo91] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--modal-overlay-bg);
	backdrop-filter: blur(2px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-modal);
	animation: fadeIn-b-vezfuefo91 0.3s ease-in-out;
}

.guidelines-container[b-vezfuefo91] {
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	padding: var(--spacing-lg);
	display: flex;
	justify-content: center;
	animation: slideIn-b-vezfuefo91 0.3s ease-out;
}

.guidelines-card[b-vezfuefo91] {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

/* Header */
.guidelines-header[b-vezfuefo91] {
	background: linear-gradient(
		135deg,
		var(--primary-600) 0%,
		var(--primary-700) 100%
	);
	color: var(--text-light);
	padding: var(--spacing-lg) var(--spacing-xl);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	box-shadow: var(--shadow-sm);
}

.guidelines-header-icon[b-vezfuefo91] {
	font-size: var(--font-size-2xl);
	color: var(--text-light);
}

.guidelines-title[b-vezfuefo91] {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
}

/* Body */
.guidelines-body[b-vezfuefo91] {
	padding: var(--spacing-2xl);
	overflow-y: auto;
	flex: 1;
}

/* Scrollbar styling */
.guidelines-body[b-vezfuefo91]::-webkit-scrollbar {
	width: 8px;
}

.guidelines-body[b-vezfuefo91]::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.guidelines-body[b-vezfuefo91]::-webkit-scrollbar-thumb {
	background: var(--primary-300);
	border-radius: var(--radius-sm);
}

.guidelines-body[b-vezfuefo91]::-webkit-scrollbar-thumb:hover {
	background: var(--primary-500);
}

/* Section Styling */
.guidelines-section[b-vezfuefo91] {
	margin-bottom: var(--spacing-2xl);
	padding: var(--spacing-lg);
	background-color: var(--bg-primary);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--primary-500);
}

.guidelines-section.highlight-section[b-vezfuefo91] {
	background-color: var(--warning-bg);
	border-left-color: var(--warning-color);
}

.guidelines-section.success-section[b-vezfuefo91] {
	background-color: var(--success-bg-subtle);
	border-left-color: var(--success-color);
}

.section-header[b-vezfuefo91] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--primary-700);
	margin: 0 0 var(--spacing-md) 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.highlight-section .section-header[b-vezfuefo91] {
	color: var(--warning-text);
}

.success-section .section-header[b-vezfuefo91] {
	color: var(--green-600);
}

.section-header i[b-vezfuefo91] {
	font-size: var(--font-size-lg);
}

.section-content[b-vezfuefo91] {
	color: var(--text-primary);
	line-height: 1.8;
}

.section-content p[b-vezfuefo91] {
	margin: var(--spacing-xs) 0;
	font-size: var(--font-size-base);
}

/* Step Styling */
.guideline-step[b-vezfuefo91] {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-md);
	background-color: var(--bg-primary);
	border-radius: var(--radius-md);
	transition: var(--transition-all);
}

.guideline-step:hover[b-vezfuefo91] {
	background-color: var(--bg-hover);
	box-shadow: var(--shadow-sm);
}

.step-number[b-vezfuefo91] {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: linear-gradient(
		135deg,
		var(--primary-500) 0%,
		var(--primary-600) 100%
	);
	color: var(--text-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	box-shadow: var(--shadow-sm);
}

.step-content[b-vezfuefo91] {
	flex: 1;
}

.step-title[b-vezfuefo91] {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-sm) 0;
}

.step-content p[b-vezfuefo91] {
	margin: var(--spacing-xs) 0;
	color: var(--text-secondary);
	font-size: var(--font-size-base);
	line-height: 1.6;
}

/* Footer */
.guidelines-footer[b-vezfuefo91] {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: flex-end;
	background-color: var(--bg-secondary);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.btn-done[b-vezfuefo91] {
	background: linear-gradient(
		135deg,
		var(--primary-500) 0%,
		var(--primary-600) 100%
	);
	color: var(--text-light);
	border: none;
	padding: var(--spacing-sm) var(--spacing-xl);
	border-radius: var(--radius-md);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	transition: var(--transition-all);
	box-shadow: var(--shadow-sm);
}

.btn-done:hover[b-vezfuefo91] {
	background: linear-gradient(
		135deg,
		var(--primary-600) 0%,
		var(--primary-700) 100%
	);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.btn-done:active[b-vezfuefo91] {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

.btn-done i[b-vezfuefo91] {
	font-size: var(--font-size-base);
}

/* Animations */
@keyframes fadeIn-b-vezfuefo91 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn-b-vezfuefo91 {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.guidelines-container[b-vezfuefo91] {
		padding: var(--spacing-sm);
		max-height: 95vh;
	}

	.guidelines-header[b-vezfuefo91] {
		padding: var(--spacing-md);
	}

	.guidelines-title[b-vezfuefo91] {
		font-size: var(--font-size-xl);
	}

	.guidelines-body[b-vezfuefo91] {
		padding: var(--spacing-md);
	}

	.guideline-step[b-vezfuefo91] {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.step-number[b-vezfuefo91] {
		width: 32px;
		height: 32px;
		font-size: var(--font-size-base);
	}

	.guidelines-footer[b-vezfuefo91] {
		padding: var(--spacing-md);
	}
}

@media (max-width: 480px) {
	.guidelines-container[b-vezfuefo91] {
		max-height: 98vh;
	}

	.guidelines-header-icon[b-vezfuefo91] {
		font-size: var(--font-size-xl);
	}

	.guidelines-title[b-vezfuefo91] {
		font-size: var(--font-size-lg);
	}

	.section-header[b-vezfuefo91] {
		font-size: var(--font-size-base);
	}
}
/* /Components/ImageResizeDialog.razor.rz.scp.css */
/* Image Resize Dialog - Consistent with Campaign Modal Design */

/* Modal overlay */
.modal-campaign-overlay[b-khi8y8fb2n] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--overlay-dark);
	backdrop-filter: blur(var(--modal-backdrop-blur, 2px));
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-modal);
	animation: fadeIn-b-khi8y8fb2n var(--modal-fade-duration, 0.3s) ease-in-out;
}

/* Modal container - customized for smaller image resize dialog */
.campaign-modal-container.image-resize-modal-container[b-khi8y8fb2n] {
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--spacing-lg);
	display: flex;
	justify-content: center;
}

/* Modal card */
.campaign-modal-card[b-khi8y8fb2n] {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--input-border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 100%;
	animation: slideIn-b-khi8y8fb2n 0.3s ease-out;
}

/* Card header with gradient */
.campaign-card-header[b-khi8y8fb2n] {
	background: var(--gradient-card);
	color: var(--text-light);
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.campaign-card-header h2[b-khi8y8fb2n] {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	font-family: var(--font-family-primary);
}

/* Card body */
.campaign-card-body[b-khi8y8fb2n] {
	padding: var(--spacing-lg);
	background-color: var(--bg-card) !important;
}

.campaign-form-container[b-khi8y8fb2n] {
	width: 100%;
	background-color: var(--input-bg) !important;
}

/* Form group */
.campaign-form-group[b-khi8y8fb2n] {
	margin-bottom: var(--spacing-md);
	position: relative;
}

/* Action buttons */
.campaign-action-buttons[b-khi8y8fb2n] {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--gray-200);
}

/* Button styling */
.campaign-btn[b-khi8y8fb2n] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
	border-radius: var(--radius-sm, 4px);
	font-weight: 600;
	font-size: var(--font-size-sm, 14px);
	font-family: inherit;
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--transition-all, all 0.2s ease);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-min-width);
	gap: 0.5rem;
}

.campaign-btn:disabled[b-khi8y8fb2n] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.campaign-btn-primary[b-khi8y8fb2n] {
	background-color: var(--primary-color, #0066cc);
	color: var(--text-light, #fff);
	border-color: var(--primary-color, #0066cc);
}

.campaign-btn-primary:hover:not(:disabled)[b-khi8y8fb2n] {
	background-color: var(--primary-color-dark, #0056b3);
	border-color: var(--primary-color-dark, #0056b3);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.campaign-btn-primary:active[b-khi8y8fb2n] {
	transform: translateY(0);
}

.campaign-btn-danger[b-khi8y8fb2n] {
	background-color: var(--danger-color, #dc3545);
	color: var(--text-light, #fff);
	border-color: var(--danger-color, #dc3545);
}

.campaign-btn-danger:hover:not(:disabled)[b-khi8y8fb2n] {
	background-color: var(--danger-dark, #c82333);
	border-color: var(--danger-dark, #c82333);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover, 0 4px 8px rgba(0, 0, 0, 0.15));
}

.campaign-btn-danger:active[b-khi8y8fb2n] {
	transform: translateY(0);
}

.campaign-btn-secondary[b-khi8y8fb2n] {
	background-color: var(--gray-500, #6c757d);
	color: var(--text-light, #fff);
	border-color: var(--gray-500, #6c757d);
}

.campaign-btn-secondary:hover:not(:disabled)[b-khi8y8fb2n] {
	background-color: var(--gray-600, #5a6268);
	border-color: var(--gray-600, #5a6268);
	transform: translateY(-1px);
}

.campaign-btn-secondary:active[b-khi8y8fb2n] {
	transform: translateY(0);
}

.campaign-btn-outline[b-khi8y8fb2n] {
	background-color: transparent;
	color: var(--gray-600, #6c757d);
	border-color: var(--gray-400, #ced4da);
}

.campaign-btn-outline:hover:not(:disabled)[b-khi8y8fb2n] {
	background-color: var(--gray-100, #f8f9fa);
	color: var(--gray-700, #495057);
	border-color: var(--gray-500, #adb5bd);
	transform: translateY(-1px);
}

/* Animation keyframes */
@keyframes fadeIn-b-khi8y8fb2n {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn-b-khi8y8fb2n {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Custom input styles for image resize controls */
.image-resize-label[b-khi8y8fb2n] {
	display: block;
	margin-bottom: var(--spacing-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	font-family: var(--font-family-primary);
}

.image-resize-range[b-khi8y8fb2n] {
	width: 100%;
	margin-bottom: var(--spacing-md);
	height: 6px;
	border-radius: var(--radius-sm);
	background: var(--gray-200);
	outline: none;
	appearance: none;
}

.image-resize-range[b-khi8y8fb2n]::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: var(--radius-full);
	background: var(--primary-color);
	cursor: pointer;
	transition: var(--transition-fast);
}

.image-resize-range[b-khi8y8fb2n]::-webkit-slider-thumb:hover {
	background: var(--primary-color-dark);
	transform: scale(1.1);
}

.image-resize-range[b-khi8y8fb2n]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: var(--radius-full);
	background: var(--primary-color);
	cursor: pointer;
	border: none;
	transition: var(--transition-fast);
}

.image-resize-range[b-khi8y8fb2n]::-moz-range-thumb:hover {
	background: var(--primary-color-dark);
	transform: scale(1.1);
}

.image-resize-input-number[b-khi8y8fb2n] {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 2px solid var(--input-border-muted);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-base);
	font-family: var(--font-family-primary);
	color: var(--text-primary);
	background-color: var(--white);
	transition: var(--transition-all);
}

.image-resize-input-number:focus[b-khi8y8fb2n] {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 1px var(--primary-color);
}

.image-resize-meta[b-khi8y8fb2n] {
	display: block;
	margin-top: var(--spacing-sm);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	font-family: var(--font-family-primary);
	font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.image-resize-range[b-khi8y8fb2n] {
		height: 8px;
	}

	.image-resize-range[b-khi8y8fb2n]::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
	}

	.image-resize-range[b-khi8y8fb2n]::-moz-range-thumb {
		width: 20px;
		height: 20px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.image-resize-range[b-khi8y8fb2n]::-webkit-slider-thumb,
	.image-resize-range[b-khi8y8fb2n]::-moz-range-thumb,
	.image-resize-input-number[b-khi8y8fb2n] {
		transition: none;
	}
}
/* /Components/MetricCard.razor.rz.scp.css */
/* Shared Metric Card Styles */
.metric-card[b-ytn2bhka2s] {
    background: var(--bg-card);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2rem; /* move content slightly right by increasing left padding */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    height: var(--metric-card-height, 110px); /* reduced height to make cards smaller */
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    transition: var(--transition-all);
    min-width: var(--metric-min-width, 180px); /* helps keep layout consistent when using custom grid */
}

.metric-card:hover[b-ytn2bhka2s] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.metric-card .metric-icon[b-ytn2bhka2s] {
    color: var(--text-light);
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

/* Per-color backgrounds only (size unified above) */
.metric-card.purple .metric-icon[b-ytn2bhka2s] { background: var(--metric-purple); }
.metric-card.orange .metric-icon[b-ytn2bhka2s] { background: var(--metric-orange); }
.metric-card.green .metric-icon[b-ytn2bhka2s] { background: var(--metric-green); }
.metric-card.blue .metric-icon[b-ytn2bhka2s] { background: var(--metric-blue); }
.metric-card.red .metric-icon[b-ytn2bhka2s] { background: var(--metric-red); }

.metric-content h5[b-ytn2bhka2s] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--metric-title-size, 0.9rem); /* larger title for better readability */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.metric-header[b-ytn2bhka2s] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.metric-content[b-ytn2bhka2s] {
    padding-left: var(--metric-content-indent, 6px); /* nudge title and value a bit to the right */
}

.metric-content h3[b-ytn2bhka2s] {
    font-size: var(--metric-value-size, 1.9rem); /* increased to emphasize the value */
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
    line-height: 1.05;
}

/* Icon and currency sizing inside the avatar circle */
.metric-card .metric-icon i[b-ytn2bhka2s] {
    font-size: var(--metric-icon-size, 2rem);
}

/* Make the $ symbol slightly larger than other icons, but keep avatar circle consistent */
.metric-card .metric-icon .currency-symbol[b-ytn2bhka2s] {
    font-size: var(--metric-currency-size, 1.9rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* Emphasize the $ in the Total Funds Raised (purple) card */
.metric-card.purple .metric-icon .currency-symbol[b-ytn2bhka2s] {
    font-size: var(--metric-currency-purple-size, 1.8rem); /* reduced size to be visually balanced */
    font-weight: 700;
    transform: translateY(-1px);
}

.growth-badge[b-ytn2bhka2s] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--badge-vertical-padding, 4px) var(--badge-horizontal-padding, 8px);
    border-radius: var(--radius-full);
    font-size: var(--badge-font-size, 0.85rem); /* slightly larger badge text */
    font-weight: var(--font-weight-medium);
    margin-top: var(--spacing-xs);
}

.growth-badge.positive[b-ytn2bhka2s] {
    background-color: var(--growth-positive-bg);
    color: var(--growth-positive-text);
}

.growth-badge.negative[b-ytn2bhka2s] {
    background-color: var(--growth-negative-bg);
    color: var(--growth-negative-text);
}

.growth-badge.neutral[b-ytn2bhka2s] {
    background-color: var(--growth-neutral-bg);
    color: var(--growth-neutral-text);
}

.growth-badge i[b-ytn2bhka2s] {
    font-size: var(--font-size-xs);
}

/* Currency Symbol Styling fallback (outside avatar) */
.currency-symbol[b-ytn2bhka2s] {
    font-size: var(--metric-currency-size, 1.6rem);
    font-weight: var(--font-weight-bold);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .metric-card[b-ytn2bhka2s] {
        padding: var(--spacing-md);
        padding-left: 1.125rem; /* ensure content remains shifted on tablet */
        height: auto;
        min-height: var(--metric-min-height-tablet, 120px);
        flex-direction: row;
        margin-bottom: var(--spacing-lg);
    }

    .metric-card .metric-icon[b-ytn2bhka2s] {
        width: var(--avatar-circle-md) !important;
        height: var(--avatar-circle-md) !important;
        margin-right: var(--spacing-sm) !important;
        flex-shrink: 0;
    }

    .metric-content[b-ytn2bhka2s] {
        flex: 1;
        min-width: 0;
        padding-left: var(--metric-content-indent-tablet, 4px); /* reduce nudge on tablet */
    }

    .metric-content h5[b-ytn2bhka2s] {
        font-size: var(--metric-title-size-tablet, 0.85rem);
        margin-bottom: var(--spacing-xs);
    }

    .metric-content h3[b-ytn2bhka2s] {
        font-size: var(--metric-value-size-tablet, 1.4rem);
        margin-bottom: var(--spacing-xs);
    }

    .metric-content[b-ytn2bhka2s] { padding-left: var(--metric-content-indent-tablet-2, 2px); }

    /* Reduce inner icon and currency sizes slightly on tablet */
    .metric-card .metric-icon i[b-ytn2bhka2s] { font-size: var(--metric-icon-size-tablet, 1.4rem); }
    .metric-card .metric-icon .currency-symbol[b-ytn2bhka2s] { font-size: var(--metric-currency-size-tablet, 1.35rem); }

    /* Scale down purple $ on tablet */
    .metric-card.purple .metric-icon .currency-symbol[b-ytn2bhka2s] { font-size: var(--metric-currency-purple-size-tablet, 1.3rem); }

    .growth-badge[b-ytn2bhka2s] {
        font-size: var(--badge-font-size-tablet, 0.65rem);
        padding: var(--badge-vertical-padding-tablet, 2px) var(--spacing-xs);
        margin-top: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .metric-card[b-ytn2bhka2s] {
        padding: var(--spacing-sm);
        padding-left: 0.75rem; /* smaller left padding on very small screens */
        min-height: var(--metric-min-height-mobile, 100px);
    }

    .metric-card .metric-icon[b-ytn2bhka2s] {
        width: var(--avatar-sm) !important;
        height: var(--avatar-sm) !important;
    }

    .metric-content h5[b-ytn2bhka2s] {
        font-size: var(--metric-title-size-mobile, 0.65rem);
    }

    .metric-content h3[b-ytn2bhka2s] {
        font-size: var(--font-size-lg);
    }

    .growth-badge[b-ytn2bhka2s] {
        font-size: var(--badge-font-size-mobile, 0.6rem);
        padding: var(--badge-vertical-padding-mobile, 1px) var(--spacing-xs);
    }

    .growth-badge i[b-ytn2bhka2s] {
        font-size: var(--badge-icon-size-mobile, 0.5rem);
    }

    /* Scale down purple $ on small screens */
    .metric-card.purple .metric-icon .currency-symbol[b-ytn2bhka2s] { font-size: var(--metric-currency-purple-size-mobile, 1.05rem); }
}
/* /Components/ModalPopup.razor.rz.scp.css */
.ft-modal-message[b-kkdqlw4t3y] {
	padding: var(--spacing-lg) var(--spacing-xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
}
.ft-modal-icon img[b-kkdqlw4t3y] {
	display: inline-block;
}
.ft-modal-heading[b-kkdqlw4t3y] {
	margin: var(--spacing-lg) 0 var(--spacing-xs) 0;
	font-size: var(--font-size-lg);
	color: var(--text-primary);
}
.ft-modal-subtext[b-kkdqlw4t3y] {
	color: var(--text-secondary);
	font-size: var(--font-size-base);
}
.ft-modal-fixed-size[b-kkdqlw4t3y] {
	width: 100%;
	max-width: 620px; /* common modal width */
	/* removed forced min-width to be responsive on smaller viewports */
	border-radius: var(--card-border-radius);
	height: 230px; /* enforce fixed height for the entire modal box */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--card-shadow);
	background: var(--ft-card-bg);
	color: var(--text-primary);
	position: relative;
}

.modal-close-btn[b-kkdqlw4t3y] {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	z-index: var(--z-modal);
	opacity: 0.7;
}

.modal-close-btn:hover[b-kkdqlw4t3y] {
	opacity: 1;
}

.modal-text[b-kkdqlw4t3y]{color:var(--text-primary);margin-top:var(--spacing-xs)}
.modal-footer[b-kkdqlw4t3y]{display:flex;justify-content:center;padding:var(--spacing-md);border-top:1px solid var(--ft-border)}
.modal-backdrop[b-kkdqlw4t3y] {
	background-color: var(--overlay-dark) !important; /* darker overlay to emulate earlier dark background */
}

/* Ensure modal content contrasts well on dark backdrop */
.ft-modal-message[b-kkdqlw4t3y],
.ft-modal-fixed-size[b-kkdqlw4t3y] {
	color: var(--text-primary);
}
/* /Components/NotesDialog.razor.rz.scp.css */
/* Notes Dialog Styles */
.note-card[b-efjfvgqjml] {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.note-card:hover[b-efjfvgqjml] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #d0d0d0;
}

.no.icon-large[b-efjfvgqjml] {
  /* Enforce a larger font-size in case fa-4x isn't enough / is overridden */
  font-size: 2em !important;        /* Adjust as needed */
  line-height: 1 !important;         /* So it doesn't get cut off */
}

/* Bright light yellow exclamation triangle for delete confirmation */
.warning-icon-bright-yellow[b-efjfvgqjml] {
    color: #FFD700 !important; /* Even brighter yellow */
}

/* Delete confirmation modal positioning - offset it down */
.modal.fade.show[aria-labelledby="deleteConfirmLabel"] .modal-dialog[b-efjfvgqjml] {
    margin-top: 12rem !important; /* Push the delete confirmation modal down */
    margin-bottom: 2rem !important;
}

/* Alternative: Use a specific class for better targeting */
.delete-confirmation-modal .modal-dialog[b-efjfvgqjml] {
    margin-top: 12rem !important;
    margin-bottom: 2rem !important;
    transform: translateY(20px); /* Additional slight offset */
}

.note-card.pinned[b-efjfvgqjml] {
    border: 1px solid #ffc107;
}

.note-header[b-efjfvgqjml] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.note-title-section[b-efjfvgqjml] {
    display: flex;
    align-items: center;
    flex: 1;
}

.note-title[b-efjfvgqjml] {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.note-actions[b-efjfvgqjml] {
    display: flex;
    gap: 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.note-card:hover .note-actions[b-efjfvgqjml] {
    opacity: 1;
}

.note-actions .btn[b-efjfvgqjml] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.2;
}

.note-body[b-efjfvgqjml] {
    margin-bottom: 12px;
    color: #555;
    line-height: 1.5;
}

.note-preview p[b-efjfvgqjml] {
    margin-bottom: 4px;
    color: #666;
}

.note-full[b-efjfvgqjml] {
    color: #555;
    white-space: pre-line;
    word-break: break-word;
}

.note-footer[b-efjfvgqjml] {
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
    margin-top: 12px;
}

.note-footer small[b-efjfvgqjml] {
    color: #888;
    font-size: 0.75rem;
}

/* Scrollbar styling for notes list */
.notes-list[b-efjfvgqjml]::-webkit-scrollbar {
    width: 6px;
}

.notes-list[b-efjfvgqjml]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.notes-list[b-efjfvgqjml]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.notes-list[b-efjfvgqjml]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Rich Text Toolbar */
.rich-text-toolbar[b-efjfvgqjml] {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #dee2e6 !important;
}

.rich-text-toolbar .btn-group-sm > .btn[b-efjfvgqjml] {
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 3px;
}

.rich-text-toolbar .btn[b-efjfvgqjml] {
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
}

.rich-text-toolbar .btn:hover[b-efjfvgqjml] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.rich-text-toolbar .btn:active[b-efjfvgqjml],
.rich-text-toolbar .btn.active[b-efjfvgqjml] {
    background: #e9ecef;
    border-color: #adb5bd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}

/* Form Styling */
.note-form .form-label[b-efjfvgqjml] {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.note-form .form-control[b-efjfvgqjml] {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 8px 12px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.note-form .form-control:focus[b-efjfvgqjml] {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.note-form textarea.form-control[b-efjfvgqjml] {
    resize: vertical;
    min-height: 120px;
}

.note-form .form-text[b-efjfvgqjml] {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 4px;
}

.note-form .invalid-feedback[b-efjfvgqjml] {
    font-size: 0.8rem;
}

/* Modal Styling */
.modal-dialog.modal-lg[b-efjfvgqjml] {
    max-width: 900px;
    margin: 10vh auto; /* Center vertically */
}

/* Default modal content (for empty state or create note) */
.modal-content[b-efjfvgqjml] {
    display: flex;
    flex-direction: column;
    /* No fixed height - let it size naturally */
}

/* Fixed height modal when notes exist */
.modal-dialog.modal-lg.has-notes .modal-content[b-efjfvgqjml] {
    height: 60vh; /* Fixed height when notes exist */
    min-height: 600px; /* Minimum height for better UX */
    max-height: 80vh; /* Maximum height */
}

.modal-header[b-efjfvgqjml] {
    background: #0973b9;
    border-bottom: 1px solid #0973b9;
    flex-shrink: 0; /* Prevent shrinking */
}

.modal-title[b-efjfvgqjml] {
    font-weight: 600;
    color: white;
}

.modal-body[b-efjfvgqjml] {
    padding: 20px;
    flex: 1; /* Take remaining space */
    overflow-y: auto; /* Allow scrolling when content exceeds */
    display: flex;
    flex-direction: column;
}

/* Make notes view content scrollable when needed */
.notes-view[b-efjfvgqjml] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notes-list[b-efjfvgqjml] {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px; /* Space for scrollbar */
    max-height: 50vh; /* Limit notes list height */
}

/* Ensure form view also fits within height constraints */
.note-form[b-efjfvgqjml] {
    overflow-y: auto;
    padding-right: 8px;
    max-height: 50vh; /* Limit form height */
}

.modal-footer[b-efjfvgqjml] {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 12px 20px;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Empty State Styling */
.text-center .fa-3x[b-efjfvgqjml] {
    opacity: 0.3;
}

.text-center h6[b-efjfvgqjml] {
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 8px;
}

.text-center .text-muted[b-efjfvgqjml] {
    font-size: 0.9rem;
}

/* Loading State */
.spinner-border[b-efjfvgqjml] {
    width: 2rem;
    height: 2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-dialog.modal-lg[b-efjfvgqjml] {
        max-width: 95%;
        margin: 5vh auto; /* Smaller margins on mobile */
    }
    
    /* Fixed height for mobile when notes exist */
    .modal-dialog.modal-lg.has-notes .modal-content[b-efjfvgqjml] {
        height: 90vh; /* Larger max height on mobile */
        min-height: 400px; /* Smaller minimum height on mobile */
        max-height: 90vh; /* Match height */
    }
    
    .notes-list[b-efjfvgqjml],
    .note-form[b-efjfvgqjml] {
        max-height: 60vh; /* More space for content on mobile */
    }
    
    .note-header[b-efjfvgqjml] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .note-actions[b-efjfvgqjml] {
        align-self: flex-end;
    }
    
    .rich-text-toolbar[b-efjfvgqjml] {
        flex-wrap: wrap;
    }
}

/* Animation for modals */
.modal.fade .modal-dialog[b-efjfvgqjml] {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

.modal.show .modal-dialog[b-efjfvgqjml] {
    transform: none;
}

/* Button hover effects */
.btn-outline-warning:hover[b-efjfvgqjml] {
    color: #212529 !important;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-primary:hover[b-efjfvgqjml] {
    color: #fff;
    background-color: #0973b9;
    border-color: #0973b9;
}

/* Custom styling for edit button to match header color */
.note-actions .btn-outline-primary[b-efjfvgqjml] {
    color: #0973b9;
    border-color: #0973b9;
}

.note-actions .btn-outline-primary:hover[b-efjfvgqjml],
.note-actions .btn-outline-primary:focus[b-efjfvgqjml],
.note-actions .btn-outline-primary:active[b-efjfvgqjml] {
    color: #fff !important;
    background-color: #0973b9 !important;
    border-color: #0973b9 !important;
}

.btn-outline-danger:hover[b-efjfvgqjml] {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Pin icon styling */
.fa-thumbtack[b-efjfvgqjml] {
    color: #ffc107;
}

/* Note expansion button */
.btn-link[b-efjfvgqjml] {
    color: #0d6efd;
    text-decoration: none;
    font-size: 0.8rem;
}

.btn-link:hover[b-efjfvgqjml] {
    color: #0a58ca;
    text-decoration: underline;
}


/* Default icon color */
.btn-outline-warning.btn-pin .fa-thumbtack[b-efjfvgqjml] {
    color: #ffc107; /* existing yellow */
}

/* On hover, change icon color to white */
.btn-outline-warning.btn-pin:hover .fa-thumbtack[b-efjfvgqjml],
.btn-outline-warning.btn-pin:focus .fa-thumbtack[b-efjfvgqjml],
.btn-outline-warning.btn-pin:active .fa-thumbtack[b-efjfvgqjml] {
    color: #ffffff !important;
}

/* Also ensure the text (if any) or overall button border/background behave correctly */
.btn-outline-warning.btn-pin:hover[b-efjfvgqjml],
.btn-outline-warning.btn-pin:focus[b-efjfvgqjml],
.btn-outline-warning.btn-pin:active[b-efjfvgqjml] {
    color: #212529 !important;      /* or whatever you want for button text */
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.icon-large[b-efjfvgqjml] {
  /* Enforce a larger font-size in case fa-4x isn’t enough / is overridden */
  font-size: 2em !important;        /* Adjust as needed */
  line-height: 1 !important;         /* So it doesn’t get cut off */
}
/* /Components/Notification.razor.rz.scp.css */
.notification-section[b-lig4or4gfb] {
  position: relative;
  display: inline-block;
}

.notification-icon-wrapper[b-lig4or4gfb] {
  position: relative;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.notification-icon-wrapper:hover[b-lig4or4gfb] {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
}

.notification-icon-wrapper i[b-lig4or4gfb] {
  font-size: 1.2rem;
}

.notification-badge-count[b-lig4or4gfb] {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--accent-color);
  color: var(--text-light);
  border-radius: var(--radius-full);
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(25%, -25%);
}

.notification-dropdown[b-lig4or4gfb] {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: var(--bg-card);
  min-width: 320px;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300);
  margin-top: var(--spacing-xs);
}

.notification-header[b-lig4or4gfb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--gray-300);
}

.notification-header h6[b-lig4or4gfb] {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.mark-all-read[b-lig4or4gfb] {
  color: var(--primary-color);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: var(--transition-all);
}

.mark-all-read:hover[b-lig4or4gfb] {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

.notification-list[b-lig4or4gfb] {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

.notification-item[b-lig4or4gfb] {
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-xs);
  margin: var(--spacing-xs);
  border-bottom: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
  gap: var(--spacing-sm);
}

.notification-item:last-child[b-lig4or4gfb] {
  border-bottom: none;
}

.notification-item:hover[b-lig4or4gfb] {
  background-color: var(--bg-hover);
}

.notification-item.unread[b-lig4or4gfb] {
  background-color: var(--bg-primary);
  border-left: 3px solid var(--primary-color);
}

.notification-icon[b-lig4or4gfb] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--bg-secondary);
}

.notification-icon i[b-lig4or4gfb] {
  font-size: var(--font-size-sm);
}

.notification-content[b-lig4or4gfb] {
  flex: 1;
  min-width: 0;
}

.notification-title[b-lig4or4gfb] {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
}

.notification-message[b-lig4or4gfb] {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  margin-bottom: var(--spacing-xs);
  word-wrap: break-word;
}

.notification-time[b-lig4or4gfb] {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.loading-notifications[b-lig4or4gfb],
.no-notifications[b-lig4or4gfb] {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.loading-notifications i[b-lig4or4gfb] {
  margin-right: var(--spacing-xs);
}

/* Skeleton Loading Styles */
.skeleton[b-lig4or4gfb] {
  animation: skeleton-loading-b-lig4or4gfb 1.5s infinite ease-in-out;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-loading-b-lig4or4gfb {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-circle[b-lig4or4gfb] {
  border-radius: var(--radius-full);
  background: var(--gray-200);
}

.skeleton-line[b-lig4or4gfb] {
  height: 12px;
  border-radius: var(--radius-sm);
  background: var(--gray-200);
  margin-bottom: var(--spacing-xs);
}

.skeleton-line.short[b-lig4or4gfb] {
  width: 60%;
}

.notification-item.skeleton .notification-content .skeleton-line:nth-child(1)[b-lig4or4gfb] {
  width: 80%;
  height: 14px;
}

.notification-item.skeleton .notification-content .skeleton-line:nth-child(2)[b-lig4or4gfb] {
  width: 95%;
  height: 12px;
}

.notification-item.skeleton .notification-content .skeleton-line:nth-child(3)[b-lig4or4gfb] {
  width: 40%;
  height: 10px;
}

/* Load More Button Styles */
.load-more-container[b-lig4or4gfb] {
  display: flex;
  justify-content: center;
  padding: var(--spacing-md);
  border-top: 1px solid var(--gray-200);
}

.load-more-btn[b-lig4or4gfb] {
  background-color: var(--primary-color);
  color: var(--text-light);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-all);
}

.load-more-btn:hover[b-lig4or4gfb] {
  background-color: var(--primary-color-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.load-more-btn:active[b-lig4or4gfb] {
  transform: translateY(0);
}

.loading-more[b-lig4or4gfb] {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  border-top: 1px solid var(--gray-200);
}

.loading-more i[b-lig4or4gfb] {
  margin-right: var(--spacing-xs);
}

/* Scrollbar styling for notification list */
.notification-list[b-lig4or4gfb]::-webkit-scrollbar {
  width: 6px;
}

.notification-list[b-lig4or4gfb]::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.notification-list[b-lig4or4gfb]::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: var(--radius-sm);
}

.notification-list[b-lig4or4gfb]::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Utility classes for dynamic display */
.notification-badge-visible[b-lig4or4gfb] {
  display: flex;
}

.notification-badge-hidden[b-lig4or4gfb] {
  display: none;
}

.notification-dropdown-visible[b-lig4or4gfb] {
  display: block;
}

.notification-dropdown-hidden[b-lig4or4gfb] {
  display: none;
}
/* /Components/PledgePaymentModal.razor.rz.scp.css */
/* Add extra right gap after Balance Amount column for visual separation before Payment Amount */
.balance-amount-gap[b-p2wzod35ij] {
	padding-right: calc(var(--spacing-md) + var(--spacing-md)) !important;
}
/* Add extra right gap after Due Amount column for visual separation */
.due-amount-gap[b-p2wzod35ij] {
	padding-right: calc(var(--spacing-md) + var(--spacing-md)) !important;
}
/* Right-align all amount columns and headers */
.amount-right[b-p2wzod35ij],
.amount-right th[b-p2wzod35ij],
.amount-right td[b-p2wzod35ij],
.amount-right input[b-p2wzod35ij],
.amount-right .form-control[b-p2wzod35ij],
.amount-right .input-group-text[b-p2wzod35ij] {
	text-align: right !important;
	justify-content: flex-end !important;
}
/* Make Payment Amount column and input bold */
.payment-amount-bold[b-p2wzod35ij],
.payment-amount-bold input[b-p2wzod35ij],
.payment-amount-bold .form-control[b-p2wzod35ij] {
	font-weight: bold !important;
}
/* --- OPTIMIZED FOR BLAZOR DESIGN SYSTEM --- */
.pledge-image-container[b-p2wzod35ij] {
	min-height: var(--pledge-image-min-height);
	position: relative;
	width: calc(100% + calc(var(--spacing-lg) * 2));
	height: var(--pledge-image-height, 220px);
	overflow: hidden;
	z-index: 1;
	margin-left: calc(var(--spacing-lg) * -1);
	margin-right: calc(var(--spacing-lg) * -1);
	margin-top: calc(var(--spacing-lg) * -1);
	margin-bottom: var(--spacing-md);
	padding: 0;
	border-bottom: 1px solid var(--primary-color);
}

.pledge-banner-image[b-p2wzod35ij] {
	width: 100%;
	height: 100%;
	min-height: var(--pledge-image-min-height);
	object-fit: cover;
	object-position: center;
	display: block;
	position: relative;
	margin: 0;
	border-radius: 0;
}

.pledge-image-overlay[b-p2wzod35ij] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--overlay-white) 0%,
		var(--overlay-bg) 60%,
		var(--overlay-bg-light) 100%
	) !important;
	z-index: 2;
}

.pledge-logo-row[b-p2wzod35ij] {
	position: absolute;
	left: var(--pledge-logo-left, 24px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: flex-start;
	gap: var(--pledge-logo-gap, 1.2rem);
	z-index: 2;
	width: calc(100% - 48px);
}

.pledge-logo-img[b-p2wzod35ij] {
	width: var(--pledge-logo-size, 100px);
	height: var(--pledge-logo-size, 100px);
	object-fit: contain;
	border-radius: var(--radius-md);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

.pledge-logo-details[b-p2wzod35ij] {
	display: flex;
	flex-direction: column;
}

.pledge-logo-org[b-p2wzod35ij] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--primary-color);
	text-shadow: 0 1px 2px var(--bg-card);
}

.pledge-logo-activity[b-p2wzod35ij] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin-top: var(--spacing-xxs);
	text-shadow: 0 1px 2px var(--bg-card);
}

.modal-backdrop-visible[b-p2wzod35ij] {
	background-color: transparent !important;
	backdrop-filter: none !important;
}

.modal-topbar[b-p2wzod35ij] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--gradient-card);
	color: var(--text-light);
	padding: var(--spacing-md) var(--spacing-lg);
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
}

.modal-topbar-title[b-p2wzod35ij] {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
}

.modal-dialog[b-p2wzod35ij] {
	transition: var(--transition-normal);
}

.modal-content[b-p2wzod35ij] {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	background: var(--bg-card);
}

.modal-header[b-p2wzod35ij] {
	background: linear-gradient(
		135deg,
		var(--primary-color) 0%,
		var(--primary-color-dark) 100%
	);
	color: var(--text-light);
	border-top-left-radius: var(--radius-lg);
	border-top-right-radius: var(--radius-lg);
	padding: var(--spacing-md);
}

.modal-header .modal-title[b-p2wzod35ij] {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-lg);
}

.modal-body[b-p2wzod35ij] {
	padding: var(--spacing-lg);
}

.modal-footer[b-p2wzod35ij] {
	padding: var(--spacing-md);
	background-color: var(--bg-card);
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

.public-payment-box[b-p2wzod35ij] {
	border: 1.5px solid var(--gray-100);
	border-radius: var(--radius-lg, 12px);
	background: var(--bg-card);
	box-shadow: var(--shadow-lg);
	min-height: 52vh;
	display: flex;
	flex-direction: column;
	margin-top: var(--spacing-2xl);
	padding: var(--spacing-3xl);
	position: relative;
	overflow: hidden;
}

.public-payment-box .modal-footer[b-p2wzod35ij] {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: var(--bg-card);
	margin-top: auto;
	border-top: none !important;
	padding-bottom: var(--spacing-md);
}

.public-payment-box .mb-4[b-p2wzod35ij] {
	overflow-y: auto;
}

.form-label[b-p2wzod35ij] {
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.form-control[b-p2wzod35ij],
.form-select[b-p2wzod35ij] {
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	transition: var(--transition-fast);
}

.form-control:focus[b-p2wzod35ij],
.form-select:focus[b-p2wzod35ij] {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
}

.table-responsive[b-p2wzod35ij] {
	border-radius: var(--radius-md);
	overflow: hidden;
}

.table[b-p2wzod35ij] {
	margin-bottom: 0;
	table-layout: fixed;
	width: 100%;
}

.table thead[b-p2wzod35ij] {
	background-color: var(--bg-secondary);
}

.table th[b-p2wzod35ij] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	padding: var(--spacing-sm);
	white-space: nowrap;
	font-size: var(--font-size-sm);
}

.table td[b-p2wzod35ij] {
	padding: var(--spacing-sm);
	vertical-align: middle;
	font-size: var(--font-size-sm);
}

.table td:nth-child(3)[b-p2wzod35ij] {
	width: var(--payment-amount-column-width);
	max-width: var(--payment-amount-column-width);
	min-width: var(--payment-amount-column-width);
}

.input-group[b-p2wzod35ij] {
	width: 100%;
	max-width: 100%;
}

.invalid-feedback[b-p2wzod35ij] {
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	font-size: var(--font-size-sm);
	color: var(--danger-color);
	margin-top: var(--spacing-xs);
}

.spinner-border-sm[b-p2wzod35ij] {
	width: var(--spinner-sm);
	height: var(--spinner-sm);
	border-width: 0.15em;
}

.title-icon[b-p2wzod35ij] {
	display: inline-block;
	margin-right: var(--spacing-sm);
	vertical-align: middle;
	margin-bottom: var(--spacing-xxs);
}

.button-icon[b-p2wzod35ij] {
	display: inline-block;
	margin-right: var(--spacing-6);
	vertical-align: middle;
	margin-bottom: var(--spacing-xxs);
}

.loading-container[b-p2wzod35ij] {
	min-height: 200px;
}

.loading-families[b-p2wzod35ij] {
	height: 38px;
}

.th-installment[b-p2wzod35ij],
.th-pledgeAmount[b-p2wzod35ij] {
	width: var(--btn-min-width-lg);
	max-width: var(--btn-min-width-lg);
}

.td-padded[b-p2wzod35ij] {
	padding-left: var(--spacing-3xl);
	font-size: var(--font-size-sm);
}

.table th:last-child[b-p2wzod35ij],
.table td:last-child[b-p2wzod35ij] {
	width: 150px;
	max-width: 150px;
}
/* /Components/ReceiptDisplay.razor.rz.scp.css */
.receipt-display-wrapper[b-o0cd64z7vb] {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Override Bootstrap's text-success to use custom lighter green */
.receipt-display-wrapper .text-success[b-o0cd64z7vb] {
    color: var(--success-color) !important;
}

.receipt-header-section[b-o0cd64z7vb] {
    border-bottom: var(--spacing-xs) solid var(--success-color);
}

.receipt-title-center[b-o0cd64z7vb] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.receipt-title-center h3[b-o0cd64z7vb] {
    font-size: var(--font-size-2xl);
}

.receipt-logo-image[b-o0cd64z7vb] {
    max-width: calc(var(--spacing-xl) * 3.75);
    max-height: calc(var(--spacing-xl) * 3.75);
    object-fit: contain;
    flex-shrink: 0;
}

/* Target the container holding logo and school info */
.receipt-display-wrapper .receipt-header-section > .d-flex.align-items-start:first-child[b-o0cd64z7vb] {
    max-width: var(--receipt-header-max-width) !important;
}

/* Target the div containing school name and address */
.receipt-display-wrapper .receipt-header-section .d-flex.align-items-start > div:last-child[b-o0cd64z7vb] {
    max-width: var(--receipt-info-max-width) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Force wrapping on all text elements */
.receipt-display-wrapper .receipt-header-section .fw-bold[b-o0cd64z7vb],
.receipt-display-wrapper .receipt-header-section .receipt-small[b-o0cd64z7vb] {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.receipt-logo-placeholder[b-o0cd64z7vb] {
    width: calc(var(--spacing-xl) * 3.75);
    height: calc(var(--spacing-xl) * 3.75);
    border-radius: var(--radius-sm);
    background-color: var(--bs-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--bs-gray-600);
}

.receipt-centering-spacer[b-o0cd64z7vb] {
    width: calc(var(--spacing-xl) * 3.75);
    visibility: hidden;
}

.receipt-header-actions[b-o0cd64z7vb] {
    position: absolute;
    right: var(--spacing-md);
    top: 0;
    z-index: 50;
}

.receipt-header-actions .btn[b-o0cd64z7vb] {
    height: calc(var(--spacing-xl) + var(--spacing-xs));
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    min-width: calc(var(--spacing-xl) * 3.4);
    font-weight: var(--font-weight-normal);
    line-height: 1.2;
    border-width: 1px;
    transition: var(--transition-all);
}

.receipt-header-actions .btn:hover:not(:disabled)[b-o0cd64z7vb] {
    transform: translateY(calc(var(--spacing-xs) * -0.25));
    box-shadow: var(--shadow-sm);
}

.receipt-header-actions .btn i[b-o0cd64z7vb] {
    font-size: var(--font-size-sm);
}

.receipt-header-actions .btn-outline-success[b-o0cd64z7vb] {
    border-color: var(--success-color);
    color: var(--success-color);
    background-color: var(--white);
}

.receipt-header-actions .btn-outline-success:hover:not(:disabled)[b-o0cd64z7vb] {
    background-color: var(--success-color);
    color: var(--white);
    border-color: var(--success-color);
}

.receipt-header-actions .btn-outline-success:disabled[b-o0cd64z7vb] {
    opacity: 0.65;
    cursor: not-allowed;
}

.receipt-header-actions .spinner-border-sm[b-o0cd64z7vb] {
    width: var(--font-size-sm);
    height: var(--font-size-sm);
    border-width: var(--spacing-xxs);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .receipt-header-actions .btn[b-o0cd64z7vb] {
        height: calc(var(--spacing-lg) + var(--spacing-xs));
        padding: calc(var(--spacing-xs) * 0.75) var(--spacing-sm);
        font-size: var(--font-size-xs);
        min-width: calc(var(--spacing-xl) * 2.8);
    }
    
    .receipt-header-actions .btn i[b-o0cd64z7vb] {
        font-size: var(--font-size-xs);
    }
}

.amount-cell[b-o0cd64z7vb] {
    text-align: right;
}
/* /Components/RecentCommunications.razor.rz.scp.css */
.recent-communications[b-zt48klsboa] {
	width: 100%;
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-300);
	box-shadow: var(--shadow-sm);
}

.recent-communications[b-zt48klsboa] {
	max-height: 35vh;
	min-height: 35vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.recent-communications .no-communications[b-zt48klsboa] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	padding: var(--spacing-md);
	gap: var(--spacing-xs);
	flex: 1 1 auto;
}

.communications-list[b-zt48klsboa] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--spacing-xs) 0;
}

.notification-item[b-zt48klsboa] {
	display: flex;
	position: relative;
	align-items: flex-start;
	padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm)
		calc(var(--spacing-sm) + 4px);
	margin: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-lg);
	transition: var(--transition-all);
	gap: var(--spacing-md);
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	box-shadow: 0 1px 2px rgba(var(--black-rgb), 0.03);
	border-left: 4px solid var(--primary-color);
}

.notification-item:hover[b-zt48klsboa] {
	background-color: var(--bg-hover);
	cursor: pointer;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(var(--black-rgb), 0.08);
	border-left: 4px solid var(--primary-color);
}

.notification-item:focus[b-zt48klsboa] {
    outline: none;
    background-color: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--black-rgb), 0.08);
    border-left: 4px solid var(--primary-color);
}

.notification-icon[b-zt48klsboa] {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	background-color: transparent;
	box-shadow: none;
}

.notification-item:hover .notification-icon[b-zt48klsboa] {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(var(--black-rgb), 0.06);
}

.notification-icon i[b-zt48klsboa] {
	font-size: 12px;
	line-height: 1;
	color: var(--text-secondary);
}

.notification-content[b-zt48klsboa] {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.notification-type[b-zt48klsboa] {
	font-size: 0.87rem;
	font-weight: var(--font-weight-semibold);
	color: var(--text-black);
	margin-bottom: calc(var(--spacing-xxs));
}

.notification-content .label[b-zt48klsboa] {
	display: inline-block;
	margin-right: 0.3rem;
	color: var(--text-black);
	font-weight: var(--font-weight-semibold);
	font-size: 0.95rem;
}

.notification-title[b-zt48klsboa] {
	font-weight: var(--font-weight-normal);
	color: var(--text-primary);
	font-size: var(--font-size-base);
	margin-bottom: var(--spacing-xs);
	line-height: var(--line-height-tight);
}

.notification-title[b-zt48klsboa] {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notification-message[b-zt48klsboa] {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	margin-bottom: var(--spacing-xs);
	word-wrap: break-word;
}

.notification-message[b-zt48klsboa] {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.notification-message[b-zt48klsboa],
.notification-title[b-zt48klsboa] {
	text-overflow: ellipsis;
}


.notification-meta[b-zt48klsboa] {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	text-align: right;
	padding-left: calc(var(--spacing-sm));
	gap: calc(var(--spacing-xs));
}

.notification-time[b-zt48klsboa] {
	color: var(--text-black);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-normal);
	margin: 0;
	padding: 5px 4px 0 0;
	white-space: nowrap;
}


/* NOTE: expand/view button markup was removed — clicking the whole .notification-item opens details. */

.notification-title[b-zt48klsboa] {
	margin-bottom: calc(var(--spacing-xxs));
}
.notification-message[b-zt48klsboa] {
	margin-bottom: 0;
}

.communications-list[b-zt48klsboa]::-webkit-scrollbar {
	width: 6px;
}

.communications-list[b-zt48klsboa]::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.communications-list[b-zt48klsboa]::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: var(--radius-sm);
}

.communications-list[b-zt48klsboa]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
}

.registered-event[b-zt48klsboa] {
	max-height: 50vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.registered-event .content-list[b-zt48klsboa] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.modal-content[b-zt48klsboa] {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.modal-header[b-zt48klsboa] {
	padding: var(--spacing-lg);
	border-bottom: none;
}

.modal-header-gradient[b-zt48klsboa] {
	background: var(--gradient-card);
}

.modal-footer[b-zt48klsboa] {
	padding: var(--spacing-md) var(--spacing-lg);
}

.icon-circle[b-zt48klsboa] {
	width: 50px;
	height: 50px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xl);
	flex-shrink: 0;
}

.communication-details .detail-item[b-zt48klsboa] {
	animation: fadeInUp-b-zt48klsboa 0.3s ease-in-out;
}

.communication-details .detail-item label[b-zt48klsboa] {
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.communication-details .description-box[b-zt48klsboa] {
	border: 1px solid var(--border-color);
	min-height: 80px;
	line-height: var(--line-height-relaxed);
	white-space: pre-wrap;
	word-wrap: break-word;
}

.badge[b-zt48klsboa] {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius-sm);
}

@keyframes fadeInUp-b-zt48klsboa {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.modal.show[b-zt48klsboa] {
	backdrop-filter: blur(3px);
}

@media (max-width: 768px) {
	.icon-circle[b-zt48klsboa] {
		width: 40px;
		height: 40px;
		font-size: var(--font-size-base);
	}

	.modal-dialog[b-zt48klsboa] {
		margin: var(--spacing-sm);
	}
}

.modal-content[b-zt48klsboa] {
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.modal-body[b-zt48klsboa] {
	overflow: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.attachment-icon[b-zt48klsboa] {
	color: var(--gray-600);
	font-size: var(--font-size-xs);
	padding-right: 4px;
}

@media (max-width: 576px) {
	.modal-content[b-zt48klsboa] {
		max-height: 90vh;
	}

	.modal-body[b-zt48klsboa] {
		max-height: calc(90vh - 140px);
	}
	/* make notification meta narrower on small screens so subject/body have room */
	.notification-meta[b-zt48klsboa] {
		width: 10px;
	}
}
/* /Components/ReportFilterPanel.razor.rz.scp.css */
/* Report Filter Panel Styles */

.report-filter-panel[b-wys44ma6mw] {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	box-shadow: var(--shadow-sm);
}

.filter-loading[b-wys44ma6mw],
.filter-empty[b-wys44ma6mw] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-md);
	color: var(--text-muted);
}

.filter-container[b-wys44ma6mw] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.filter-fields[b-wys44ma6mw] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-lg);
	align-items: start;
}

.filter-group[b-wys44ma6mw] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.filter-label[b-wys44ma6mw] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.filter-label .required[b-wys44ma6mw] {
	color: var(--danger-color);
	margin-left: var(--spacing-xs);
}

.filter-control[b-wys44ma6mw] {
	width: 100%;
}

.multi-select-list[b-wys44ma6mw] {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 180px;
	max-height: 180px;
	overflow-y: auto;
	padding: var(--spacing-xs);
	background-color: var(--bg-card);
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: var(--radius-md);
}

.multi-select-option[b-wys44ma6mw] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	margin: 0;
	min-height: 2.25rem;
}

.multi-select-option:hover[b-wys44ma6mw] {
	background-color: var(--bg-hover);
}

.multi-select-option.selected[b-wys44ma6mw] {
	background-color: var(--primary-soft, rgba(13, 110, 253, 0.08));
}

.multi-select-option.disabled[b-wys44ma6mw] {
	opacity: 0.65;
	cursor: not-allowed;
}

.multi-select-option .form-check-input[b-wys44ma6mw] {
	margin: 0;
	flex-shrink: 0;
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}

.multi-select-option-text[b-wys44ma6mw] {
	font-size: var(--font-size-base);
	color: var(--text-primary);
	line-height: 1.4;
	word-break: break-word;
}

.multi-select-empty[b-wys44ma6mw] {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: var(--spacing-md);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* Make checked checkboxes in report multi-select use success (green) color like other lists */
.multi-select-option .form-check-input:checked[b-wys44ma6mw] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	/* Ensure checkmark is visible in SVG backgrounds (Bootstrap) */
	background-image: var(--bs-form-check-bg-image, none) !important;
}

.multi-select-option .form-check-input:focus[b-wys44ma6mw] {
	box-shadow: 0 0 0 3px var(--primary-subtle, rgba(9,115,185,0.12));
	border-color: var(--primary-color);
	border-radius: var(--radius-sm);
}

.filter-control[b-wys44ma6mw]  .e-input-group,
.filter-control[b-wys44ma6mw]  .e-dropdownbase,
.filter-control[b-wys44ma6mw]  .e-multi-select-wrapper {
	width: 100%;
}

/* Numeric Range Specific Styles */
.numeric-range[b-wys44ma6mw] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.numeric-range-input[b-wys44ma6mw] {
	flex: 1;
}

.numeric-range-separator[b-wys44ma6mw] {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	padding: 0 var(--spacing-xs);
}

/* Filter Actions */
.filter-actions[b-wys44ma6mw] {
	display: flex;
	gap: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--border-color, #dee2e6);
	justify-content: flex-start;
}

.filter-actions .btn[b-wys44ma6mw] {
	min-width: 120px;
	padding: var(--spacing-sm) var(--spacing-lg);
	font-weight: var(--font-weight-medium);
	border-radius: var(--radius-md);
	transition: var(--transition-all);
}

.filter-actions .btn i[b-wys44ma6mw] {
	margin-right: var(--spacing-xs);
}

.filter-actions .btn-primary[b-wys44ma6mw] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
}

.filter-actions .btn-primary:hover:not(:disabled)[b-wys44ma6mw] {
	background-color: var(--primary-color-dark, #0056b3);
	border-color: var(--primary-color-dark, #0056b3);
	box-shadow: var(--shadow-hover);
}

.filter-actions .btn-primary:disabled[b-wys44ma6mw] {
	background-color: var(--bg-secondary);
	border-color: var(--border-color, #dee2e6);
	color: var(--text-muted);
	cursor: not-allowed;
	opacity: 0.6;
}

.filter-actions .btn-outline-secondary[b-wys44ma6mw] {
	background-color: transparent;
	border-color: var(--border-color, #dee2e6);
	color: var(--text-secondary);
}

.filter-actions .btn-outline-secondary:hover[b-wys44ma6mw] {
	background-color: var(--bg-hover);
	border-color: var(--text-secondary);
	color: var(--text-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
	.filter-fields[b-wys44ma6mw] {
		grid-template-columns: 1fr;
	}

	.filter-actions[b-wys44ma6mw] {
		flex-direction: column;
	}

	.filter-actions .btn[b-wys44ma6mw] {
		width: 100%;
	}
}

/* Syncfusion Component Overrides */
.filter-control[b-wys44ma6mw]  .e-input-group input,
.filter-control[b-wys44ma6mw]  .e-dropdownbase .e-input {
	font-size: var(--font-size-base);
	color: var(--text-primary);
}

.filter-control[b-wys44ma6mw]  .e-input-group input::placeholder,
.filter-control[b-wys44ma6mw]  .e-dropdownbase .e-input::placeholder {
	color: var(--text-muted);
}

.filter-control[b-wys44ma6mw]  .e-input-group:focus-within,
.filter-control[b-wys44ma6mw]  .e-input-focus {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
}

/* Checkbox alignment for filter control */
.filter-control[b-wys44ma6mw]  .e-checkbox-wrapper {
	padding-top: var(--spacing-xs);
}

/* Loading spinner */
.spinner-border-sm[b-wys44ma6mw] {
	width: 1rem;
	height: 1rem;
	border-width: 0.15em;
}
/* /Components/ReportGrid.razor.rz.scp.css */
/* Report Grid Container */

.report-grid-container[b-jntahi9d9w] {
	background-color: var(--bg-card);
	/* border: 1px solid var(--border-color, #dee2e6); */
	border-radius: var(--radius-lg);
	padding: var(--spacing-xs);
	box-shadow: var(--shadow-sm);
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Loading State */
.grid-loading[b-jntahi9d9w] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3xl);
	color: var(--text-secondary);
	font-size: var(--font-size-lg);
}

.grid-loading .spinner-border[b-jntahi9d9w] {
	width: 2rem;
	height: 2rem;
	border-width: 0.25em;
	color: var(--primary-color);
}

/* Empty State */
.grid-empty[b-jntahi9d9w] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3xl);
	text-align: center;
	min-height: 300px;
}

.grid-empty .empty-icon[b-jntahi9d9w] {
	color: var(--text-muted);
	margin-bottom: var(--spacing-lg);
	opacity: 0.5;
}

.grid-empty h5[b-jntahi9d9w] {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-sm);
}

.grid-empty p[b-jntahi9d9w] {
	color: var(--text-muted);
	font-size: var(--font-size-base);
	margin-bottom: 0;
}

/* Drill-Down Links */
.drill-down-link[b-jntahi9d9w] {
	color: var(--primary-color);
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-fast);
	font-weight: var(--font-weight-medium);
}

.drill-down-link:hover[b-jntahi9d9w] {
	color: var(--primary-color-dark, #0056b3);
	text-decoration: underline;
}

.drill-down-link:focus[b-jntahi9d9w] {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Bootstrap Table Customization */
.report-grid-container .table[b-jntahi9d9w] {
	margin-bottom: 0;
	background-color: var(--bg-card);
	color: var(--text-primary);
}

.report-grid-container .table thead th[b-jntahi9d9w] {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	padding: var(--spacing-md);
	border-color: var(--border-color, #dee2e6);
	border-bottom-width: 2px;
	white-space: nowrap;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-grid-container .table tbody td[b-jntahi9d9w] {
	padding: var(--spacing-md);
	border-color: var(--border-color, #dee2e6);
	vertical-align: middle;
}

.report-grid-container .table-striped tbody tr:nth-of-type(odd)[b-jntahi9d9w] {
	background-color: var(--bg-hover, rgba(0, 0, 0, .02));
}

.report-grid-container .table-hover tbody tr:hover[b-jntahi9d9w] {
	background-color: var(--bg-hover, rgba(0, 0, 0, .05));
}

/* Sortable Headers */
.sortable-header[b-jntahi9d9w] {
	cursor: pointer;
	user-select: none;
}

.sortable-header:hover[b-jntahi9d9w] {
	background-color: var(--bg-hover, rgba(0, 0, 0, .05));
}

.sort-icon[b-jntahi9d9w] {
	margin-left: 0.5rem;
	font-size: 0.875rem;
	opacity: 0.6;
}

.sortable-header:hover .sort-icon[b-jntahi9d9w] {
	opacity: 1;
}

/* Pagination */
.pagination-info[b-jntahi9d9w] {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.page-size-selector label[b-jntahi9d9w] {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: 0;
}

.page-size-selector .form-select[b-jntahi9d9w] {
	cursor: pointer;
}

.pagination .page-link[b-jntahi9d9w] {
	color: var(--primary-color);
	border-color: var(--border-color);
	padding: 0.375rem 0.75rem;
}

.pagination .page-link:hover[b-jntahi9d9w] {
	color: var(--primary-color-dark);
	background-color: var(--bg-hover);
	border-color: var(--border-color);
}

.pagination .page-item.active .page-link[b-jntahi9d9w] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: white;
}

.pagination .page-item.disabled .page-link[b-jntahi9d9w] {
	color: var(--text-muted);
	cursor: not-allowed;
}

/* Table Responsive */
.table-responsive[b-jntahi9d9w] {
	flex: 1;
	overflow-x: auto;
	overflow-y: auto;
	max-height: calc(100vh - 400px);
}

/* Utility Classes */
.cursor-pointer[b-jntahi9d9w] {
	cursor: pointer;
	color: var(--text-primary);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-row {
	transition: var(--transition-fast);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-row:hover {
	background-color: var(--bg-hover);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-row .e-rowcell {
	color: var(--text-primary);
	padding: var(--spacing-md);
	border-color: var(--border-color, #dee2e6);
	font-size: var(--font-size-base);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-altrow {
	background-color: var(--bg-primary);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-altrow:hover {
	background-color: var(--bg-hover);
}

/* Pager Styling */
.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager {
	background-color: var(--bg-secondary);
	border-top: 1px solid var(--border-color, #dee2e6);
	padding: var(--spacing-sm) var(--spacing-md);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager .e-pagercontainer {
	color: var(--text-primary);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager .e-numericitem,
.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager .e-currentitem {
	color: var(--text-primary);
	border-color: var(--border-color, #dee2e6);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager .e-currentitem {
	background-color: var(--primary-color);
	color: var(--text-light);
	border-color: var(--primary-color);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager .e-numericitem:hover {
	background-color: var(--bg-hover);
}

.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager .e-pagesizes {
	color: var(--text-primary);
}

/* Sort Icon */
.report-grid-container[b-jntahi9d9w]  .e-grid .e-icon-ascending,
.report-grid-container[b-jntahi9d9w]  .e-grid .e-icon-descending {
	color: var(--primary-color);
}

/* No Records Template */
.report-grid-container[b-jntahi9d9w]  .e-grid .e-emptyrow {
	display: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

	.report-grid-container[b-jntahi9d9w]  .e-grid .e-headercell,
	.report-grid-container[b-jntahi9d9w]  .e-grid .e-rowcell {
		padding: var(--spacing-sm);
		font-size: var(--font-size-sm);
	}

	.grid-empty[b-jntahi9d9w] {
		padding: var(--spacing-xl);
		min-height: 200px;
	}

	.grid-empty .empty-icon i[b-jntahi9d9w] {
		font-size: 2rem;
	}
}

/* Print Styles */
@media print {
	.report-grid-container[b-jntahi9d9w] {
		border: none;
		box-shadow: none;
		padding: 0;
	}

	.report-grid-container[b-jntahi9d9w]  .e-grid .e-gridpager {
		display: none;
	}
}
/* /Components/RequireAuth.razor.rz.scp.css */
.auth-required-container[b-w9k0mffo2d] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.auth-required-card[b-w9k0mffo2d] {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 3rem 2rem;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.auth-icon[b-w9k0mffo2d] {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.auth-required-card h3[b-w9k0mffo2d] {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.auth-required-card p[b-w9k0mffo2d] {
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.5;
}

.auth-actions[b-w9k0mffo2d] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-w9k0mffo2d] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

.btn-primary[b-w9k0mffo2d] {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover[b-w9k0mffo2d] {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.btn-outline-secondary[b-w9k0mffo2d] {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-outline-secondary:hover[b-w9k0mffo2d] {
    background: var(--hover-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 480px) {
    .auth-required-container[b-w9k0mffo2d] {
        padding: 1rem;
        min-height: 50vh;
    }

    .auth-required-card[b-w9k0mffo2d] {
        padding: 2rem 1.5rem;
    }

    .auth-actions[b-w9k0mffo2d] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-w9k0mffo2d] {
        width: 100%;
        max-width: 200px;
    }
}
/* /Components/SessionTimeoutPopup.razor.rz.scp.css */
:root[b-wfditxjdu4] {
	--ft-modal-max-width: 100%;
	--ft-modal-min-height: 220px;
	--ft-modal-padding-vertical: 1.25rem;
}

.session-timeout-modal .modal-dialog[b-wfditxjdu4] {
	width: 90%;
	max-width: 520px; 
	margin: 0 auto; 
	left: 0;
	right: 0;
}

@media (min-width: 992px) {
	.session-timeout-modal .modal-dialog[b-wfditxjdu4] {
		width: 50%;
		max-width: 520px;
	}
}

.session-timeout-modal .modal-content[b-wfditxjdu4] {
	min-height: var(--ft-modal-min-height);
}

.session-timeout-modal .modal-body[b-wfditxjdu4] {
	padding-top: var(--ft-modal-padding-vertical);
	padding-bottom: var(--ft-modal-padding-vertical);
}

.session-timeout-modal.ft-visible[b-wfditxjdu4] {
	display: block; /* when visible */
}

.session-timeout-modal:not(.ft-visible)[b-wfditxjdu4] {
	display: none; /* when hidden */
}
/* /Components/StyledSelect.razor.rz.scp.css */
.styled-select .dropdown-toggle[b-jxiqd7o9er] {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Validation: show red border like other fields */
.styled-select.is-invalid .dropdown-toggle[b-jxiqd7o9er] {
  border-color: var(--bs-form-invalid-border-color) !important;
}

.styled-select.is-invalid:focus-within .dropdown-toggle[b-jxiqd7o9er] {
  border-color: var(--bs-form-invalid-border-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25) !important;
}

/* Focus and active styles to match the app header blue */
.styled-select .dropdown-toggle:focus[b-jxiqd7o9er],
.styled-select .dropdown-toggle:active[b-jxiqd7o9er],
.styled-select:focus-within .dropdown-toggle[b-jxiqd7o9er] {
  border-color: var(--primary-color) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12) !important;
  outline: none !important;
}

.styled-select .dropdown-menu[b-jxiqd7o9er] {
  border: 1px solid var(--gray-300);
  box-shadow: var(--shadow-md);
  margin-top: var(--spacing-xs);
}

.styled-select .dropdown-item[b-jxiqd7o9er] {
  border-bottom: 1px solid var(--gray-200);
  padding: 0.6rem var(--spacing-md);
  color: var(--text-primary);
}

/* When using button elements for items, remove default button styles */
.styled-select .dropdown-item[b-jxiqd7o9er] {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}

.styled-select .dropdown-item:last-child[b-jxiqd7o9er] {
  border-bottom: none;
}
/* Keep dropdown open when focused inside so clicking items works reliably */
.styled-select:focus-within .dropdown-menu[b-jxiqd7o9er] {
  display: block;
}

.styled-select .fa-check[b-jxiqd7o9er] {
  opacity: 0.9;
  color: var(--primary-color) !important; /* ensure selected check uses the exact header blue */
}

/* Hover/active/selected visual for dropdown items */
.styled-select .dropdown-item:hover[b-jxiqd7o9er],
.styled-select .dropdown-item:focus[b-jxiqd7o9er],
.styled-select .dropdown-item.active[b-jxiqd7o9er] {
  background-color: rgba(var(--primary-rgb), 0.08) !important;
  color: var(--text-primary) !important;
}

/* When the item shows the check, make the check and text clearly themed */
.styled-select .dropdown-item .fa-check[b-jxiqd7o9er] {
  color: var(--primary-color) !important;
}

.styled-select .label-text[b-jxiqd7o9er] {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.styled-select .caret-wrap[b-jxiqd7o9er] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Remove default bootstrap caret spacing so icon sits flush to right */
.styled-select .dropdown-toggle[b-jxiqd7o9er]::after { display: none; }
/* /Components/Switch.razor.rz.scp.css */
/* Switch Component Styles - Using CSS Variables from Design System */

.switch[b-g2cy82kuc8] {
    /* Switch Component Variables - Using Design System Variables */
    --switch-width: calc(var(--spacing-xl) + var(--spacing-sm)); /* 3.5em equivalent */
    --switch-height: var(--spacing-xl); /* 2em equivalent */
    --toggle-diameter: calc(var(--spacing-lg) + var(--spacing-xs)); /* 1.5em equivalent */
    --toggle-offset: calc((var(--switch-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: calc(var(--spacing-sm) + var(--spacing-xs)); /* 10px equivalent */
    --toggle-wider: calc(var(--spacing-xl) + var(--spacing-md)); /* 3em equivalent */
    --switch-color-unchecked: var(--gray-400);
    --switch-color-checked: var(--primary-color);
    --switch-color-disabled: var(--gray-300);
    --switch-toggle-color: var(--white);
    --switch-shadow-color: rgba(0, 0, 0, 0.1);

    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;
    font-family: var(--font-family-primary);
    position: relative;
}

.switch input[type="checkbox"][b-g2cy82kuc8] {
    display: none;
}

.slider[b-g2cy82kuc8] {
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
    background-color: var(--switch-color-unchecked);
    border-radius: calc(var(--switch-height) / 2);
    position: relative;
    transition: var(--transition-all);
    border: 1px solid var(--border-color);
}

.slider[b-g2cy82kuc8]::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: var(--switch-toggle-color);
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--toggle-offset);
    transform: translateX(var(--toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) var(--switch-shadow-color);
    transition: var(--transition-all);
    border: 1px solid var(--border-light);
}

/* Checked State */
.switch input[type="checkbox"]:checked + .slider[b-g2cy82kuc8] {
    background-color: var(--switch-color-checked);
    border-color: var(--switch-color-checked);
}

.switch input[type="checkbox"]:checked + .slider[b-g2cy82kuc8]::after {
    transform: translateX(calc(var(--switch-width) - var(--toggle-diameter) - var(--toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) var(--switch-shadow-color);
}

/* Active State - Toggle Wider */
.switch input[type="checkbox"]:active + .slider[b-g2cy82kuc8]::after {
    width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider[b-g2cy82kuc8]::after {
    transform: translateX(calc(var(--switch-width) - var(--toggle-wider) - var(--toggle-offset)));
}

/* Disabled State */
.switch input[type="checkbox"]:disabled + .slider[b-g2cy82kuc8] {
    background-color: var(--switch-color-disabled);
    border-color: var(--border-color);
    opacity: 0.6;
    cursor: not-allowed;
}

.switch:has(input[type="checkbox"]:disabled)[b-g2cy82kuc8] {
    cursor: not-allowed;
    opacity: 0.6;
}

.switch input[type="checkbox"]:disabled + .slider[b-g2cy82kuc8]::after {
    background-color: var(--gray-200);
    border-color: var(--border-color);
}

/* Focus State for Accessibility */
.switch input[type="checkbox"]:focus + .slider[b-g2cy82kuc8] {
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Hover State */
.switch:hover:not(:has(input[type="checkbox"]:disabled)) .slider[b-g2cy82kuc8] {
    box-shadow: var(--shadow-hover);
}

/* Switch Label */
.switch-label[b-g2cy82kuc8] {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Switch Variants */

/* Small Variant */
.switch .slider.small[b-g2cy82kuc8] {
    --switch-width: calc(var(--spacing-lg) + var(--spacing-sm)); /* Smaller width */
    --switch-height: calc(var(--spacing-md) + var(--spacing-xs)); /* Smaller height */
    --toggle-diameter: var(--spacing-md); /* Smaller toggle */
    --toggle-wider: calc(var(--spacing-lg) + var(--spacing-xs)); /* Smaller wider state */
}

/* Large Variant */
.switch .slider.large[b-g2cy82kuc8] {
    --switch-width: calc(var(--spacing-2xl) + var(--spacing-lg)); /* Larger width */
    --switch-height: calc(var(--spacing-xl) + var(--spacing-sm)); /* Larger height */
    --toggle-diameter: calc(var(--spacing-xl) + var(--spacing-xs)); /* Larger toggle */
    --toggle-wider: calc(var(--spacing-2xl) + var(--spacing-md)); /* Larger wider state */
}

/* Color Variants - Extensible for different themes */
.switch .slider.success[b-g2cy82kuc8] {
    --switch-color-checked: var(--success-color);
}

.switch .slider.warning[b-g2cy82kuc8] {
    --switch-color-checked: var(--warning-color);
}

.switch .slider.danger[b-g2cy82kuc8] {
    --switch-color-checked: var(--danger-color);
}

.switch .slider.info[b-g2cy82kuc8] {
    --switch-color-checked: var(--info-color);
}

/* Right-to-Left Support */
.switch[dir="rtl"] input[type="checkbox"]:checked + .slider[b-g2cy82kuc8]::after {
    transform: translateX(calc(-1 * (var(--switch-width) - var(--toggle-diameter) - var(--toggle-offset))));
}

.switch[dir="rtl"] input[type="checkbox"]:checked:active + .slider[b-g2cy82kuc8]::after {
    transform: translateX(calc(-1 * (var(--switch-width) - var(--toggle-wider) - var(--toggle-offset))));
}

/* Responsive Design */
@media (max-width: 768px) {
    .switch[b-g2cy82kuc8] {
        /* Slightly larger touch targets on mobile */
        --switch-width: calc(var(--spacing-2xl) + var(--spacing-xs));
        --switch-height: calc(var(--spacing-xl) + var(--spacing-xs));
        --toggle-diameter: calc(var(--spacing-lg) + var(--spacing-sm));
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .switch .slider[b-g2cy82kuc8] {
        border-width: 2px;
    }
    
    .switch .slider[b-g2cy82kuc8]::after {
        border-width: 2px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .switch .slider[b-g2cy82kuc8],
    .switch .slider[b-g2cy82kuc8]::after {
        transition: none;
    }
}
/* /Components/ToastContainer.razor.rz.scp.css */
/* Custom Toast Styles */

/* Success toast with custom bright green color */
.toast-success-custom[b-gj26tyrs7h] {
    background-color: #26b050 !important; /* Bright green matching reference */
    color: white !important;
}

/* Custom toast styling */
.toast-custom[b-gj26tyrs7h] {
    width: fit-content; /* Dynamic width based on content */
    min-width: 300px; /* Minimum for very short messages */
    max-width: 90vw; /* Responsive cap for small screens */
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Center-aligned toast body */
.toast-custom .toast-body[b-gj26tyrs7h] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 16px; /* Increased from 14px to 16px */
    white-space: nowrap; /* Keep message on one line */
}

/* Icon styling */
.toast-custom .toast-body i[b-gj26tyrs7h] {
    font-size: 18px; /* Increased from 16px to 18px to match larger text */
    margin-right: 8px;
    flex: 0 0 auto;
}

/* Remove any border radius issues */
.toast-custom.show[b-gj26tyrs7h] {
    border-radius: 8px !important;
}

/* Animation improvements */
.toast-custom[b-gj26tyrs7h] {
    animation: slideInUp-b-gj26tyrs7h 0.3s ease-out;
}

@keyframes slideInUp-b-gj26tyrs7h {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Components/Tooltip.razor.rz.scp.css */
/* Modern Tooltip Component Styles */
.tooltip-wrapper[b-mqpvkfyges] {
	position: relative;
	display: inline-block;
	z-index: 1;
}

/* Ensure table cells containing tooltips don't clip */
:global(td) .tooltip-wrapper[b-mqpvkfyges],
:global(th) .tooltip-wrapper[b-mqpvkfyges] {
	position: relative;
	z-index: 10000;
}

.modern-tooltip[b-mqpvkfyges] {
	position: absolute;
	z-index: 999999;
	background: var(--tooltip-bg-dark, #1a1a1a);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	padding: 12px 16px;
	max-width: 300px;
	box-shadow:
		var(--tooltip-shadow, 0 4px 20px rgba(0, 0, 0, 0.3)),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	animation: tooltipFadeIn-b-mqpvkfyges 0.2s ease-out;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
	white-space: normal;
	word-wrap: break-word;
	pointer-events: none;
}

.tooltip-content[b-mqpvkfyges] {
	color: var(--text-light, #ffffff);
	text-align: left;
}

.tooltip-arrow[b-mqpvkfyges] {
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
}

/* Position-based styles */
.modern-tooltip.top[b-mqpvkfyges] {
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}

.modern-tooltip.top .tooltip-arrow[b-mqpvkfyges] {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top-color: var(--tooltip-bg-dark, #1a1a1a);
}

.modern-tooltip.bottom[b-mqpvkfyges] {
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}

.modern-tooltip.bottom .tooltip-arrow[b-mqpvkfyges] {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-color: var(--tooltip-bg-dark, #1a1a1a);
}

.modern-tooltip.left[b-mqpvkfyges] {
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
}

.modern-tooltip.left .tooltip-arrow[b-mqpvkfyges] {
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-left-color: var(--tooltip-bg-dark, #1a1a1a);
}

.modern-tooltip.right[b-mqpvkfyges] {
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
}

.modern-tooltip.right .tooltip-arrow[b-mqpvkfyges] {
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-right-color: var(--tooltip-bg-dark, #1a1a1a);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.modern-tooltip[b-mqpvkfyges] {
		max-width: 250px;
		font-size: 13px;
		padding: 10px 14px;
	}
}

/* Animation */
@keyframes tooltipFadeIn-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.modern-tooltip.bottom[b-mqpvkfyges] {
	animation: tooltipFadeInBottom-b-mqpvkfyges 0.2s ease-out;
}

@keyframes tooltipFadeInBottom-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.modern-tooltip.left[b-mqpvkfyges] {
	animation: tooltipFadeInLeft-b-mqpvkfyges 0.2s ease-out;
}

@keyframes tooltipFadeInLeft-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

.modern-tooltip.right[b-mqpvkfyges] {
	animation: tooltipFadeInRight-b-mqpvkfyges 0.2s ease-out;
}

@keyframes tooltipFadeInRight-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(4px);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.modern-tooltip[b-mqpvkfyges] {
		background: var(--tooltip-bg-dark);
		border: 1px solid var(--tooltip-border);
	}

	.tooltip-arrow[b-mqpvkfyges] {
		border-color: transparent !important;
	}

	.modern-tooltip.top .tooltip-arrow[b-mqpvkfyges] {
		border-top-color: var(--tooltip-bg-dark) !important;
	}

	.modern-tooltip.bottom .tooltip-arrow[b-mqpvkfyges] {
		border-bottom-color: var(--tooltip-bg-dark) !important;
	}

	.modern-tooltip.left .tooltip-arrow[b-mqpvkfyges] {
		border-left-color: var(--tooltip-bg-dark) !important;
	}

	.modern-tooltip.right .tooltip-arrow[b-mqpvkfyges] {
		border-right-color: var(--tooltip-bg-dark) !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.modern-tooltip[b-mqpvkfyges] {
		background: var(--tooltip-bg-light);
		backdrop-filter: blur(10px);
	}

	.tooltip-content[b-mqpvkfyges] {
		color: var(--text-black);
	}

	.modern-tooltip.top .tooltip-arrow[b-mqpvkfyges] {
		border-top-color: var(--tooltip-bg-light);
	}

	.modern-tooltip.bottom .tooltip-arrow[b-mqpvkfyges] {
		border-bottom-color: var(--tooltip-bg-light);
	}

	.modern-tooltip.left .tooltip-arrow[b-mqpvkfyges] {
		border-left-color: var(--tooltip-bg-light);
	}

	.modern-tooltip.right .tooltip-arrow[b-mqpvkfyges] {
		border-right-color: var(--tooltip-bg-light);
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.modern-tooltip[b-mqpvkfyges],
	:global(.modern-tooltip-portal)[b-mqpvkfyges] {
		max-width: 250px;
		font-size: 13px;
		padding: 10px 14px;
	}
}

/* Animation */
@keyframes tooltipFadeIn-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.modern-tooltip.bottom[b-mqpvkfyges] {
	animation: tooltipFadeInBottom-b-mqpvkfyges 0.2s ease-out;
}

@keyframes tooltipFadeInBottom-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.modern-tooltip.left[b-mqpvkfyges] {
	animation: tooltipFadeInLeft-b-mqpvkfyges 0.2s ease-out;
}

@keyframes tooltipFadeInLeft-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

.modern-tooltip.right[b-mqpvkfyges] {
	animation: tooltipFadeInRight-b-mqpvkfyges 0.2s ease-out;
}

@keyframes tooltipFadeInRight-b-mqpvkfyges {
	from {
		opacity: 0;
		transform: translateY(-50%) translateX(4px);
	}
	to {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.modern-tooltip[b-mqpvkfyges],
	:global(.modern-tooltip-portal)[b-mqpvkfyges] {
		background: var(--tooltip-bg-dark);
		border: 1px solid var(--tooltip-border);
	}

	.tooltip-arrow[b-mqpvkfyges],
	:global(.tooltip-arrow)[b-mqpvkfyges] {
		border-color: transparent !important;
	}

	.modern-tooltip.top .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.top .tooltip-arrow)[b-mqpvkfyges] {
		border-top-color: var(--tooltip-bg-dark) !important;
	}

	.modern-tooltip.bottom .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.bottom .tooltip-arrow)[b-mqpvkfyges] {
		border-bottom-color: var(--tooltip-bg-dark) !important;
	}

	.modern-tooltip.left .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.left .tooltip-arrow)[b-mqpvkfyges] {
		border-left-color: var(--tooltip-bg-dark) !important;
	}

	.modern-tooltip.right .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.right .tooltip-arrow)[b-mqpvkfyges] {
		border-right-color: var(--tooltip-bg-dark) !important;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.modern-tooltip[b-mqpvkfyges],
	:global(.modern-tooltip-portal)[b-mqpvkfyges] {
		background: var(--tooltip-bg-light);
		backdrop-filter: blur(10px);
	}

	.tooltip-content[b-mqpvkfyges],
	:global(.tooltip-content)[b-mqpvkfyges] {
		color: var(--text-black);
	}

	.modern-tooltip.top .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.top .tooltip-arrow)[b-mqpvkfyges] {
		border-top-color: var(--tooltip-bg-light);
	}

	.modern-tooltip.bottom .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.bottom .tooltip-arrow)[b-mqpvkfyges] {
		border-bottom-color: var(--tooltip-bg-light);
	}

	.modern-tooltip.left .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.left .tooltip-arrow)[b-mqpvkfyges] {
		border-left-color: var(--tooltip-bg-light);
	}

	.modern-tooltip.right .tooltip-arrow[b-mqpvkfyges],
	:global(.modern-tooltip-portal.right .tooltip-arrow)[b-mqpvkfyges] {
		border-right-color: var(--tooltip-bg-light);
	}
}
/* /Components/UserModal.razor.rz.scp.css */
/* ========================================
   USER MODAL DIALOGUE STYLES
   ======================================== */

.modal-overlay[b-uv1nwenvz0] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  backdrop-filter: blur(4px);
}

.modal-overlay.show[b-uv1nwenvz0] {
  opacity: 1;
  visibility: visible;
  animation: modalFadeIn-b-uv1nwenvz0 var(--transition-normal);
}

.modal-content[b-uv1nwenvz0] {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 900px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(-20px);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.modal-content.show[b-uv1nwenvz0] {
  transform: scale(1) translateY(0);
  animation: modalSlideIn-b-uv1nwenvz0 var(--transition-normal);
}

.modal-header[b-uv1nwenvz0] {
  padding: var(--spacing-lg) var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gradient-primary);
  color: var(--text-light);
  position: relative;
  flex-shrink: 0;
}

.modal-header h3[b-uv1nwenvz0] {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
}

.modal-header h3 i[b-uv1nwenvz0] {
  margin-right: var(--spacing-sm);
}

.btn-close[b-uv1nwenvz0] {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
}

.btn-close:hover[b-uv1nwenvz0] {
  background-color: var(--overlay-light);
}

.modal-body[b-uv1nwenvz0] {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(80vh - 200px);
}

.modal-footer[b-uv1nwenvz0] {
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  background-color: var(--bg-secondary);
  flex-shrink: 0;
}

/* Form Styling within Modal */
.form-label[b-uv1nwenvz0] {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.form-label.required[b-uv1nwenvz0]::after {
  content: ' *';
  color: var(--danger-color);
}

/* Status field specific styling to align with other form controls */
.status-field .form-label[b-uv1nwenvz0] {
  margin-bottom: var(--spacing-sm);
}

.status-field .form-switch[b-uv1nwenvz0] {
  margin-top: 0 !important;
  padding-top: 0;
  padding-left: var(--spacing-2xl);
  /* Match form-control padding for proper alignment */
}

.form-control[b-uv1nwenvz0] {
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-md);
  padding: var(--input-padding);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus[b-uv1nwenvz0] {
  outline: none;
  border-color: var(--input-border-color-focus);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-check[b-uv1nwenvz0] {
  margin-bottom: var(--spacing-sm);
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-check-input[b-uv1nwenvz0] {
  margin-right: 0;
  margin-left: 0;
  margin-top: 0.125rem;
  /* Fine-tune vertical alignment */
  flex-shrink: 0;
}

.form-check-label[b-uv1nwenvz0] {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  cursor: pointer;
  margin-left: 0;
  margin-bottom: 0;
  flex: 1;
}

.form-check-label small[b-uv1nwenvz0] {
  display: block;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

/* Role and Tenant Selection Styling */
.role-selection[b-uv1nwenvz0],
.tenant-selection[b-uv1nwenvz0] {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  background-color: var(--bg-secondary);
  max-height: 180px;
  overflow-y: auto;
}

.role-selection .form-check[b-uv1nwenvz0],
.tenant-selection .form-check[b-uv1nwenvz0] {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.role-selection .form-check:hover[b-uv1nwenvz0],
.tenant-selection .form-check:hover[b-uv1nwenvz0] {
  background-color: var(--bg-hover);
}

.role-selection .form-check:last-child[b-uv1nwenvz0],
.tenant-selection .form-check:last-child[b-uv1nwenvz0] {
  margin-bottom: 0;
}

/* Alert Styling */
.alert[b-uv1nwenvz0] {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
}

.alert-danger[b-uv1nwenvz0] {
  background-color: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-color);
}

.alert-success[b-uv1nwenvz0] {
  background-color: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-color);
}

.alert i[b-uv1nwenvz0] {
  margin-right: var(--spacing-sm);
}

/* Button Styling */
.btn[b-uv1nwenvz0] {
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  font-weight: var(--btn-font-weight);
  font-size: var(--font-size-sm);
  border: none;
  cursor: pointer;
  transition: var(--transition-all);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.btn:disabled[b-uv1nwenvz0] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary[b-uv1nwenvz0] {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.btn-primary:hover:not(:disabled)[b-uv1nwenvz0] {
  background-color: var(--primary-color-dark);
}

.btn-secondary[b-uv1nwenvz0] {
  background-color: var(--gray-500);
  color: var(--text-light);
}

.btn-secondary:hover:not(:disabled)[b-uv1nwenvz0] {
  background-color: var(--gray-600);
}

.spinner-border[b-uv1nwenvz0] {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spinner-rotate-b-uv1nwenvz0 0.75s linear infinite;
}

.spinner-border-sm[b-uv1nwenvz0] {
  width: var(--font-size-sm);
  height: var(--font-size-sm);
  border-width: 2px;
}

/* Form Switch Styling */
.form-switch[b-uv1nwenvz0] {
  padding-left: 0;
  display: flex;
  align-items: center !important;
  /* Override general form-check alignment */
  margin-top: var(--spacing-xs);
  gap: var(--spacing-sm) !important;
  /* Override general form-check gap */
  min-height: 2.375rem;
  /* Match form-control height for better alignment */
}

.form-switch .form-check-input[b-uv1nwenvz0] {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0 !important;
  /* Override general form-check margin-top */
  flex-shrink: 0;
}

.form-switch .form-check-label[b-uv1nwenvz0] {
  margin-left: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex: 1;
}

.form-check-input[type="checkbox"][b-uv1nwenvz0] {
  width: var(--spacing-md);
  height: var(--spacing-md);
  border-radius: var(--radius-sm);
}

.form-switch .form-check-input[b-uv1nwenvz0] {
  width: 2.5rem;
  height: 1.25rem;
  border-radius: 1.25rem;
  background-image: none;
  background-color: var(--gray-300);
  transition: background-color var(--transition-fast);
}

.form-switch .form-check-input:checked[b-uv1nwenvz0] {
  background-color: var(--primary-color);
}

/* Validation Message Styling */
.validation-message[b-uv1nwenvz0] {
  color: var(--danger-color);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
}

.text-danger[b-uv1nwenvz0] {
  color: var(--danger-color);
}

/* Animations */
@keyframes modalFadeIn-b-uv1nwenvz0 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn-b-uv1nwenvz0 {
  from {
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes spinner-rotate-b-uv1nwenvz0 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .modal-content[b-uv1nwenvz0] {
    max-width: 95%;
    width: 95%;
    margin: var(--spacing-xs);
    max-height: 85vh;
  }

  .modal-header[b-uv1nwenvz0],
  .modal-body[b-uv1nwenvz0],
  .modal-footer[b-uv1nwenvz0] {
    padding: var(--spacing-md);
  }

  .modal-footer[b-uv1nwenvz0] {
    flex-direction: column;
  }

  .modal-footer .btn[b-uv1nwenvz0] {
    width: 100%;
  }

  .role-selection[b-uv1nwenvz0],
  .tenant-selection[b-uv1nwenvz0] {
    max-height: 150px;
  }
}

@media (max-width: 576px) {
  .modal-content[b-uv1nwenvz0] {
    max-height: 90vh;
    max-width: 95%;
  }

  .modal-header h3[b-uv1nwenvz0] {
    font-size: var(--font-size-lg);
  }

  .modal-body[b-uv1nwenvz0] {
    padding: var(--spacing-md);
  }

  .modal-footer[b-uv1nwenvz0] {
    padding: var(--spacing-md);
  }

  .role-selection[b-uv1nwenvz0],
  .tenant-selection[b-uv1nwenvz0] {
    max-height: 120px;
    padding: var(--spacing-md);
  }
}

/* ========================================
   TOAST NOTIFICATION STYLES
   ======================================== */

.toast[b-uv1nwenvz0] {
  min-width: 300px;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: toastSlideIn-b-uv1nwenvz0 var(--transition-normal);
}

.toast-header[b-uv1nwenvz0] {
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: var(--font-weight-semibold);
}

.toast-header.bg-success[b-uv1nwenvz0] {
  background-color: var(--success-color) !important;
}

.toast-header.bg-danger[b-uv1nwenvz0] {
  background-color: var(--danger-color) !important;
}

.toast-body[b-uv1nwenvz0] {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background-color: var(--bg-card);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.btn-close-white[b-uv1nwenvz0] {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.btn-close-white:hover[b-uv1nwenvz0] {
  opacity: 1;
}

/* Toast Animation */
@keyframes toastSlideIn-b-uv1nwenvz0 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* /Components/Volunteers.razor.rz.scp.css */

/* Email button styling (match Add Contacts behavior) */
.email-contacts-button[b-upgd5zr7i3] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color);
	height: var(--btn-height-fixed);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border-radius: var(--btn-border-radius);
	min-width: auto;
	white-space: nowrap;
	font-weight: var(--font-weight-medium, 500);
	font-size: var(--font-size-md, 14px);
	color: var(--text-light) !important;
	transition: var(--transition-fast);
	box-shadow: var(--shadow-sm);
}

.email-contacts-button:hover:not(:disabled)[b-upgd5zr7i3],
.email-contacts-button:focus:not(:disabled)[b-upgd5zr7i3],
.email-contacts-button:active:not(:disabled)[b-upgd5zr7i3] {
	background-color: var(--primary-color-dark) !important;
	color: var(--text-light) !important;
	border-color: var(--border-hover) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	opacity: 1 !important;
}

.email-contacts-button:disabled[b-upgd5zr7i3] {
	background: var(--primary-color) !important;
	color: var(--text-light) !important;
	border-color: var(--border-disabled);
	opacity: 0.5;
	cursor: not-allowed;
}

/* Ensure clicking Email does not show an exaggerated focus/active shadow */
.email-contacts-button:focus[b-upgd5zr7i3],
.email-contacts-button:active[b-upgd5zr7i3] {
	box-shadow: none !important;
	transform: none !important;
	outline: none !important;
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

/* Very high-specificity selectors for Email button to match Add Volunteers hover
   (handles combinations like .btn.email-contacts-button inside .contacts-top-row) */
.contacts-top-row button.email-contacts-button:hover[b-upgd5zr7i3],
.contacts-top-row button.email-contacts-button:focus[b-upgd5zr7i3],
.contacts-top-row button.email-contacts-button:active[b-upgd5zr7i3],
button.btn.email-contacts-button:hover[b-upgd5zr7i3],
button.btn.email-contacts-button:focus[b-upgd5zr7i3],
button.btn.email-contacts-button:active[b-upgd5zr7i3] {
	background-color: var(--primary-color-dark) !important;
	border-color: var(--border-hover) !important;
	color: var(--text-light) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* Volunteers tab layout: keep list scrollable and footer pinned within the tab. */
.volunteers-tab-container[b-upgd5zr7i3] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.volunteers-body[b-upgd5zr7i3] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto !important; /* enable vertical scrolling inside Volunteers */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* Component-scoped CSS-only fallback:
   If parent/container prevents the component from receiving a computed height,
   constrain the volunteers list by viewport height so an internal scrollbar appears
   even when the page-level rules are restrictive. Adjust the `320px` offset
   if your header/footer sizes differ. */
.volunteers-tab-container[b-upgd5zr7i3] { position: relative; }
.volunteers-body[b-upgd5zr7i3],
.volunteers-table-body[b-upgd5zr7i3] {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
}

/* Volunteers Table Grid Layout */
.volunteers-table-header[b-upgd5zr7i3] {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: var(--avatar-lg) 1fr 1.2fr 0.8fr 0.6fr var(--col-action-width);
	gap: var(--spacing-md);
	/* align header left padding with Contacts tab */
	padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-semibold, 700);
	font-size: var(--font-size-sm, 0.95rem);
	color: var(--text-primary);
	background: var(--white);
}

.volunteers-table-header .header-checkbox[b-upgd5zr7i3] {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 0;
}

.volunteers-table-header .header-checkbox .form-check-input[b-upgd5zr7i3] {
	width: var(--checkbox-size, 18px);
	height: var(--checkbox-size, 18px);
	border: 2px solid var(--input-border-variant, var(--gray-300));
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all var(--transition-quick, 0.2s) ease;
	margin: 0;
}

.volunteers-table-header .header-checkbox .form-check-input:checked[b-upgd5zr7i3] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.volunteers-table-header .header-checkbox .form-check-input:focus[b-upgd5zr7i3] {
	outline: none;
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

.volunteers-table-header .header-col-action[b-upgd5zr7i3] {
    text-align: right;
}

.volunteers-table-body[b-upgd5zr7i3] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	overflow-y: auto;
	overflow-x: hidden;
	/* match Contacts container left padding */
	padding-left: var(--spacing-10) !important;
	padding-bottom: var(--spacing-12);
}

.header-cols[b-upgd5zr7i3]{
	margin-left: var(--spacing-xs);
}
.volunteers-row[b-upgd5zr7i3] {
	display: grid;
	grid-template-columns: var(--avatar-lg) 1fr 1.2fr 0.8fr 0.6fr var(--col-action-width);
	gap: var(--spacing-md);
	align-items: center;
	padding: var(--spacing-sm) var(--spacing-md) !important;
	/* Match AssociatedContacts computed card height: avatar + vertical padding */
	min-height: calc(var(--avatar-circle-sm) + (var(--spacing-sm) * 3));
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
	margin-bottom: var(--spacing-xxs) !important;
}

.volunteers-row:hover[b-upgd5zr7i3] {
    box-shadow: var(--shadow-sm);
}

.volunteers-row.row-selected[b-upgd5zr7i3] {
    background: transparent;
    border-color: var(--border-color);
}

.vol-checkbox[b-upgd5zr7i3] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vol-checkbox .form-check-input[b-upgd5zr7i3] {
	width: var(--checkbox-size, 18px);
	height: var(--checkbox-size, 18px);
	border: 2px solid var(--input-border-variant, var(--gray-300));
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all var(--transition-quick, 0.2s) ease;
	margin: 0;
}

.vol-checkbox .form-check-input:checked[b-upgd5zr7i3] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.vol-checkbox .form-check-input:focus[b-upgd5zr7i3] {
	outline: none;
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

.vol-name[b-upgd5zr7i3] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	/* make the container neutral; keep avatar bold separately */
	font-weight: var(--font-weight-regular, 400) !important;
	color: var(--text-primary) !important;
}

.vol-name .avatar-circle[b-upgd5zr7i3] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	flex-shrink: 0;
}

.vol-email[b-upgd5zr7i3] {
	color: var(--text-primary) !important;
	font-size: var(--font-size-base, 1rem) !important;
	font-weight: var(--font-weight-regular, 400) !important;

}

.vol-name > span[b-upgd5zr7i3],
.vol-name span[b-upgd5zr7i3] {
	color: var(--text-primary) !important;
	font-size: var(--font-size-base, 1rem) !important;
	font-weight: var(--font-weight-regular, 400) !important;
}

.vol-date[b-upgd5zr7i3] {
	color: var(--text-primary) !important;
	font-size: var(--font-size-base, 1rem) !important;
	margin-left: var(--spacing-xs);
	font-weight: var(--font-weight-regular, 400) !important;
}

.vol-status[b-upgd5zr7i3] {
	display: flex;
	align-items: center;
	margin-left: var(--spacing-xs);
}

.vol-action[b-upgd5zr7i3] {
    display: flex;
    justify-content: flex-end;
}


.associated-contact-card[b-upgd5zr7i3] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-md);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.card-checkbox[b-upgd5zr7i3] {
	width: var(--avatar-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-checkbox .form-check-input[b-upgd5zr7i3] {
	width: var(--checkbox-size, 18px);
	height: var(--checkbox-size, 18px);
	border: 2px solid var(--input-border-variant, var(--gray-300));
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all var(--transition-quick, 0.2s) ease;
	margin: 0;
}

.card-checkbox .form-check-input:checked[b-upgd5zr7i3] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.card-checkbox .form-check-input:focus[b-upgd5zr7i3] {
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

.card-checkbox .form-check-input:hover:not(:checked)[b-upgd5zr7i3] {
	border-color: var(--primary-color);
}

.associated-contact-card .card-left[b-upgd5zr7i3] {
	display: flex;
	gap: var(--spacing-md);
	align-items: center;
	flex: 1;
}

.avatar-circle[b-upgd5zr7i3] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	text-transform: uppercase;
	font-size: 1rem;
}

/* Reuse gradient palette used previously */
.associated-contact-card:nth-child(6n + 1) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-orange); } 
.associated-contact-card:nth-child(6n + 2) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-blue); } 
.associated-contact-card:nth-child(6n + 3) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-green); } 
.associated-contact-card:nth-child(6n + 4) .avatar-circle[b-upgd5zr7i3] { background: var(--purple-500); } 
.associated-contact-card:nth-child(6n + 5) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-red); } 
.associated-contact-card:nth-child(6n + 6) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-orange); } 

/* Volunteers row avatar color cycle */
.volunteers-row:nth-child(5n + 1) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-orange); } 
.volunteers-row:nth-child(5n + 2) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-blue); } 
.volunteers-row:nth-child(5n + 3) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-green); } 
.volunteers-row:nth-child(5n + 4) .avatar-circle[b-upgd5zr7i3] { background: var(--purple-500); } 
.volunteers-row:nth-child(5n + 5) .avatar-circle[b-upgd5zr7i3] { background: var(--metric-red); } 

.donor-type-inline[b-upgd5zr7i3] {
	display: inline-block;
	margin-left: calc(var(--spacing-xs) + 4px);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--badge-radius);
	font-size: 0.8rem;
	background: var(--bg-highlight);
	color: var(--ft-primary);
	white-space: nowrap;
	max-width: fit-content;
	align-self: flex-start;
}

.remove-associated[b-upgd5zr7i3] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: 17px;
	padding: var(--spacing-sm) var(--spacing-12);
	border-radius: var(--radius-sm);
	border: none; /* remove border */
	color: var(--danger-color);
	background: transparent;
	opacity: 0.75; /* slightly faded initially */
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.remove-associated i[b-upgd5zr7i3] {
	color: inherit;
}


/* Volunteer status badges */
.status-badge[b-upgd5zr7i3] {
	display: inline-block;
	margin-left: calc(var(--spacing-xs) + 4px);
	padding: var(--spacing-6) var(--spacing-12);
	border-radius: var(--badge-radius); /* match amount-pill */
	font-size: var(--font-size-base, 1rem) !important;
	min-width: var(--badge-min-width);
	text-align: center;
	text-transform: capitalize;
}

.status-badge.status-active[b-upgd5zr7i3] {
	background-color: var(--success-bg, #d1f4e0);
	color: var(--success-color);
	font-size: var(--font-size-base, 1rem) !important;
	font-weight: var(--font-weight-regular, 400) !important;
}

.status-badge.status-inactive[b-upgd5zr7i3] {
	background-color: var(--activity-red-bg, #ffe6e6);
	color: var(--danger-color);
}

/* Volunteer email and date styling */
.contact-main .contact-email[b-upgd5zr7i3] {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-top: 2px;
}

.contact-main .contact-date[b-upgd5zr7i3] {
	font-size: 0.8rem;
	color: var(--text-tertiary);
	margin-top: 2px;
}

/* Add Volunteers / Add Contacts button base styles (match AssociatedContacts) */
.add-associated-center[b-upgd5zr7i3],
.btn.btn-sm.add-associated-center[b-upgd5zr7i3],
button.add-associated-center[b-upgd5zr7i3] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	height: var(--btn-height-fixed, 35px) !important;
	min-height: var(--btn-height-fixed, 35px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 var(--spacing-md) !important;
	border-radius: var(--btn-border-radius) !important;
	min-width: var(--btn-min-width, 100px) !important;
	width: var(--btn-min-width, 100px) !important;
	white-space: nowrap !important;
	color: var(--white) !important;
	font-weight: var(--font-weight-medium) !important;
	font-size: var(--font-size-md) !important;
	line-height: 1 !important;
	margin-top: var(--spacing-md);
	opacity: 1 !important;
	transition: color 120ms ease, box-shadow 120ms ease, transform 80ms ease !important;
	box-shadow: var(--shadow-sm) !important;
}

.contacts-top-row .add-associated-top[b-upgd5zr7i3],
.btn.btn-sm.add-associated-top[b-upgd5zr7i3],
button.add-associated-top[b-upgd5zr7i3] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color) !important;
	height: var(--btn-height-fixed, 35px) !important;
	min-height: var(--btn-height-fixed, 35px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 var(--spacing-md) !important;
	border-radius: var(--btn-border-radius) !important;
	min-width: var(--btn-min-width, 100px) !important;
	width: auto !important;
	white-space: nowrap !important;
	color: var(--white) !important;
	font-weight: var(--font-weight-medium) !important;
	font-size: var(--font-size-md) !important;
	line-height: 1 !important;
	margin: 0 !important;
	opacity: 1 !important;
	transition: color 120ms ease, box-shadow 120ms ease, transform 80ms ease !important;
	box-shadow: var(--shadow-sm) !important;
}

/* Email button - same exact styling as Add Contacts */
.email-contacts-button[b-upgd5zr7i3] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color);
	height: var(--btn-height-fixed);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--spacing-md);
	border-radius: var(--btn-border-radius);
	min-width: 100px;
	width: 100px;
	white-space: nowrap;
	color: var(--white) !important;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-md);
	line-height: 1;
	margin: 0;
	opacity: 1;
	transition: opacity var(--transition-fast);
}

.email-contacts-button:hover:not(:disabled)[b-upgd5zr7i3] {
	background: var(--primary-color) !important;
	color: var(--white) !important;
	border-color: var(--border-hover);
	opacity: 1;
}

/* Confirm Remove Modal tweaks (match AssociatedContacts styling) */
.confirm-modal[b-upgd5zr7i3] {
	border-radius: 8px;
	overflow: hidden;
}

.confirm-modal .modal-header[b-upgd5zr7i3] {
	padding: 0.6rem 1rem;
	background: var(--primary-color);
	color: var(--text-light);
}

.confirm-modal .modal-title[b-upgd5zr7i3],
.confirm-modal .modal-header h5[b-upgd5zr7i3] {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.confirm-modal .modal-content[b-upgd5zr7i3] {
	background: var(--white);
	box-shadow: var(--shadow-md);
}

.confirm-modal .modal-body[b-upgd5zr7i3] {
	padding: 1rem 1.25rem;
	color: var(--text-primary);
	background: var(--white);
}

.confirm-modal .modal-actions[b-upgd5zr7i3] {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	padding: 0.75rem 1rem 1rem 1rem;
	background: var(--white);
	border-top: 1px solid var(--border-color);
}

.confirm-modal .modal-actions .btn[b-upgd5zr7i3] {
	min-width: 110px;
	height: 36px;
	padding: var(--spacing-6) var(--spacing-12);
	border-radius: var(--radius-6);
}

.confirm-modal .modal-actions .btn-secondary[b-upgd5zr7i3] {
	background: var(--gray-300);
	color: var(--text-primary);
	border: 1px solid var(--gray-300);
}

.confirm-modal .modal-actions .btn-danger[b-upgd5zr7i3] {
	background: var(--danger-color);
	color: var(--text-light);
	border: 1px solid var(--danger-color);
}

.confirm-modal .btn-close[b-upgd5zr7i3] {
	width: 36px;
	height: 36px;
	background: transparent;
	color: var(--text-light);
}

@media (max-width: 768px) {
	.confirm-modal .modal-content[b-upgd5zr7i3] {
		width: 96%;
		max-width: 520px;
	}
	.confirm-modal .modal-actions .btn[b-upgd5zr7i3] { min-width: 100%; }
}


.empty-tab .fa-users[b-upgd5zr7i3] {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--spacing-sm);
	color: var(--text-muted);
}

/* Empty Tab */
.empty-tab[b-upgd5zr7i3] {
	color: var(--text-light);
	margin-top: 0; /* removed large automatic top margin so content sits higher */
	border: none;
	flex-direction: column;
	text-align: center;
	display: flex;
	align-items: center;
	color: var(--text-muted);
	/* align toward the top of the tab area but keep a small comfortable offset */
	justify-content: flex-start;
	padding: var(--spacing-lg) var(--spacing-md);
	padding-top: calc(var(--spacing-lg) + var(--spacing-10));
	border-radius: var(--btn-border-radius);
	min-width: 220px;
	white-space: nowrap;
}
.add-associated-icon[b-upgd5zr7i3] {
	color: var(--white);
	font-size: 1.05rem;
	/* ensure icon sits nicely with 35px height */
	line-height: 1;
	margin-right: 0.4rem;
}

/* Sticky pagination footer for Volunteers to match Activities style */
.volunteers-footer.sticky-pagination[b-upgd5zr7i3] {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: var(--bg-page, #fff);
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 1px solid var(--border-color);
}

.volunteers-footer[b-upgd5zr7i3] {
	flex: 0 0 auto;
	margin-top: 0;
	background: var(--bg-light);
	border-top: 1px solid var(--border-light);
}

.volunteers-footer .btn.btn-xs[b-upgd5zr7i3] {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: 0.85rem;
	line-height: 1;
}

.volunteers-footer .icon-xs[b-upgd5zr7i3] {
	font-size: 0.75rem;
}

.volunteers-footer .disabled[b-upgd5zr7i3] {
	opacity: 0.45;
	pointer-events: none;
}

/* Add buttons hover/focus/active - match Add Contacts / Email behavior */
.add-associated-center:hover[b-upgd5zr7i3],
.btn.btn-sm.add-associated-center:hover[b-upgd5zr7i3],
button.add-associated-center:hover[b-upgd5zr7i3],
.contacts-top-row .add-associated-top:hover[b-upgd5zr7i3],
.btn.btn-sm.add-associated-top:hover[b-upgd5zr7i3],
button.add-associated-top:hover[b-upgd5zr7i3] {
	background-color: var(--primary-color-dark) !important;
	color: var(--white) !important;
	border-color: var(--border-hover) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	opacity: 1 !important;
}

.add-associated-center:focus[b-upgd5zr7i3],
.add-associated-center:active[b-upgd5zr7i3],
.btn.btn-sm.add-associated-center:focus[b-upgd5zr7i3],
.btn.btn-sm.add-associated-center:active[b-upgd5zr7i3],
button.add-associated-center:focus[b-upgd5zr7i3],
button.add-associated-center:active[b-upgd5zr7i3],
.contacts-top-row .add-associated-top:focus[b-upgd5zr7i3],
.contacts-top-row .add-associated-top:active[b-upgd5zr7i3],
.btn.btn-sm.add-associated-top:focus[b-upgd5zr7i3],
.btn.btn-sm.add-associated-top:active[b-upgd5zr7i3],
button.add-associated-top:focus[b-upgd5zr7i3],
button.add-associated-top:active[b-upgd5zr7i3] {
	background-color: var(--primary-color-dark) !important;
	color: var(--white) !important;
	border-color: var(--border-hover) !important;
	box-shadow: var(--shadow-hover) !important;
	outline: none !important;
	transform: translateY(-1px) !important;
	opacity: 1 !important;
}

/* High-specificity overrides so Bootstrap's defaults don't interfere */
.contacts-top-row button.add-associated-top:hover[b-upgd5zr7i3],
button.add-associated-center:hover[b-upgd5zr7i3],
.contacts-top-row button.add-associated-top:focus[b-upgd5zr7i3],
.contacts-top-row button.add-associated-top:active[b-upgd5zr7i3],
button.add-associated-center:focus[b-upgd5zr7i3],
button.add-associated-center:active[b-upgd5zr7i3] {
	background: var(--primary-color-dark) !important;
	color: var(--text-light) !important;
}

/* Very high specificity: when both classes are present on the same button (common usage),
   ensure hover/focus/active use the darker primary color and the same effects as Email */
button.btn.add-associated-top.add-associated-center:hover[b-upgd5zr7i3],
button.btn.add-associated-top.add-associated-center:focus[b-upgd5zr7i3],
button.btn.add-associated-top.add-associated-center:active[b-upgd5zr7i3],
.contacts-top-row button.add-associated-top.add-associated-center:hover[b-upgd5zr7i3],
.contacts-top-row button.add-associated-top.add-associated-center:focus[b-upgd5zr7i3],
.contacts-top-row button.add-associated-top.add-associated-center:active[b-upgd5zr7i3] {
	background-color: var(--primary-color-dark) !important;
	border-color: var(--border-hover) !important;
	color: var(--text-light) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

.remove-contact-btn[b-upgd5zr7i3] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-sm);
	line-height: 1;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--danger-color);
	border: 1px solid var(--danger-color);
	transition: background-color 160ms ease, color 160ms ease,
		border-color 160ms ease;
	cursor: pointer;
}

.remove-contact-btn i[b-upgd5zr7i3] {
	color: inherit;
}

/* Hover / focus / active: fill with danger color and white icon (NotesDialog behavior) */
.remove-contact-btn:hover[b-upgd5zr7i3],
.remove-contact-btn:focus[b-upgd5zr7i3],
.remove-contact-btn:active[b-upgd5zr7i3] {
	color: var(--text-light);
	background-color: var(--danger-color);
	border-color: var(--danger-color);
	outline: none;
}

/* Volunteers tab should match Contacts/Attendees behavior:
   vertical scrolling stays inside the rows area; keep a single
   authoritative rule here so component-scoped scrolling wins. */
.volunteers-tab-container[b-upgd5zr7i3] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	height: 100%;
	/* allow the component to manage its own scrolling */
	overflow: visible;
}

.volunteers-body[b-upgd5zr7i3] {
	flex: 1 1 auto;
	min-height: 0;
	/* authoritative: always allow vertical scroll inside the volunteers list */
	/* overflow-y: auto !important; */
	/* overflow-x: hidden !important; */
	-webkit-overflow-scrolling: touch !important;
}

.volunteers-table-body[b-upgd5zr7i3] {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* High-specificity, component-scoped fallback to force internal scrolling
   when page/ancestor rules prevent the component from receiving a computed height.
   This references common parent wrappers present in Activities markup but lives
   inside the component stylesheet so changes remain scoped here only. */
.tab-content-container > .d-flex.flex-column .volunteers-tab-container .volunteers-body[b-upgd5zr7i3],
.tab-content-container > .d-flex.flex-column .volunteers-tab-container .volunteers-table-body[b-upgd5zr7i3],
.activities-container .tab-content-container .volunteers-tab-container .volunteers-body[b-upgd5zr7i3],
.activities-container .tab-content-container .volunteers-tab-container .volunteers-table-body[b-upgd5zr7i3] {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}
.volunteers-footer[b-upgd5zr7i3] {
	flex: 0 0 auto !important;
}

/* Match left-panel thin scrollbar: subtle, small width */
.volunteers-body[b-upgd5zr7i3],
.volunteers-table-body[b-upgd5zr7i3] {
	/* Match left-panel thin scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--border-secondary, #d1d6da) transparent;
}
.volunteers-body[b-upgd5zr7i3]::-webkit-scrollbar,
.volunteers-table-body[b-upgd5zr7i3]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}
.volunteers-body[b-upgd5zr7i3]::-webkit-scrollbar-track,
.volunteers-table-body[b-upgd5zr7i3]::-webkit-scrollbar-track {
	background: transparent;
}
.volunteers-body[b-upgd5zr7i3]::-webkit-scrollbar-thumb,
.volunteers-table-body[b-upgd5zr7i3]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}
.volunteers-body[b-upgd5zr7i3]::-webkit-scrollbar-thumb:hover,
.volunteers-table-body[b-upgd5zr7i3]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-w12qkq7jgf] {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.top-header[b-w12qkq7jgf] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--white);
	color: var(--text-primary);
	padding: var(--spacing-md) var(--spacing-xl);
	box-shadow: var(--shadow-md);
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
}

.brand[b-w12qkq7jgf] {
	margin-right: var(--spacing-xl);
}

.brand h2[b-w12qkq7jgf] {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
}

.brand i[b-w12qkq7jgf] {
	color: var(--accent-color);
}

.top-nav[b-w12qkq7jgf] {
	display: flex;
	gap: var(--spacing-xl);
	align-items: center;
	flex: 1;
}

.top-nav .header-actions[b-w12qkq7jgf] {
	margin-left: auto;
	display: flex;
	gap: var(--spacing-lg);
	align-items: center;
}

.top-nav .nav-link[b-w12qkq7jgf] {
	color: var(--text-primary);
	text-decoration: none;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	transition: var(--transition-normal);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.top-nav .nav-link:hover[b-w12qkq7jgf] {
	background-color: var(--bg-hover);
	color: var(--gray-600);
}

.top-nav .nav-link.active[b-w12qkq7jgf],
.top-nav .nav-link[aria-current="page"][b-w12qkq7jgf] {
	/* background-color: var(--bg-hover); */
	/* color: var(--gray-600); */
	font-weight: var(--font-weight-medium);
	outline: 2px solid var(--accent-color);
	/* outline-offset: 2px; */
}

.top-nav .nav-link i[b-w12qkq7jgf] {
	font-size: var(--font-size-sm);
}

.header-actions[b-w12qkq7jgf] {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
}

.user-profile[b-w12qkq7jgf] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	cursor: pointer;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	transition: var(--transition-normal);
	color: var(--text-light);
}

.user-profile:hover[b-w12qkq7jgf] {
	background-color: var(--overlay-hover-light);
}

.notification-section[b-w12qkq7jgf] {
	position: relative;
}

.notification-icon-wrapper[b-w12qkq7jgf] {
	position: relative;
	cursor: pointer;
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	transition: var(--transition-normal);
}

.notification-icon-wrapper:hover[b-w12qkq7jgf] {
	background-color: var(--overlay-hover-light);
}

.notification-icon-wrapper i[b-w12qkq7jgf] {
	font-size: var(--font-size-lg);
	color: var(--text-light);
}

.notification-badge-count[b-w12qkq7jgf] {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--primary-color);
	color: var(--text-light);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	padding: var(--spacing-xxs) var(--spacing-xs);
	border-radius: var(--radius-full);
	min-width: var(--spacing-md);
	height: var(--spacing-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(25%, -25%);
	border: 1px solid var(--text-light);
}

.notification-dropdown[b-w12qkq7jgf] {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background-color: var(--bg-card);
	min-width: 350px;
	max-width: 400px;
	box-shadow: var(--shadow-lg);
	z-index: var(--z-dropdown);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	overflow: hidden;
}

.notification-header[b-w12qkq7jgf] {
	padding: var(--spacing-md);
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.notification-header h6[b-w12qkq7jgf] {
	margin: 0;
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.mark-all-read[b-w12qkq7jgf] {
	color: var(--primary-color);
	font-size: var(--font-size-sm);
	cursor: pointer;
	text-decoration: none;
}

.mark-all-read:hover[b-w12qkq7jgf] {
	text-decoration: underline;
}

.notification-list[b-w12qkq7jgf] {
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	overflow-x: hidden;
}

/* Custom scrollbar styling for notifications */
.notification-list[b-w12qkq7jgf]::-webkit-scrollbar {
	width: var(--spacing-xs);
}

.notification-list[b-w12qkq7jgf]::-webkit-scrollbar-track {
	background: var(--bg-tertiary);
	border-radius: var(--radius-xs);
}

.notification-list[b-w12qkq7jgf]::-webkit-scrollbar-thumb {
	background: var(--border-secondary);
	border-radius: var(--radius-xs);
}

.notification-list[b-w12qkq7jgf]::-webkit-scrollbar-thumb:hover {
	background: var(--border-primary);
}

.notification-item[b-w12qkq7jgf] {
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--border-light);
	display: flex;
	gap: var(--spacing-sm);
	transition: var(--transition-normal);
	cursor: pointer;
	min-height: var(--spacing-4xl);
	align-items: flex-start;
	margin: var(--spacing-xs);
}

.notification-item:hover[b-w12qkq7jgf] {
	background-color: var(--bg-hover);
}

.notification-item.unread[b-w12qkq7jgf] {
	background-color: var(--bg-highlight);
	border-left: 3px solid var(--primary-color);
}

.notification-icon[b-w12qkq7jgf] {
	flex-shrink: 0;
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--bg-hover);
	margin-right: var(--spacing-sm);
}

.notification-icon i[b-w12qkq7jgf] {
	font-size: var(--font-size-sm);
	color: inherit;
}

.notification-dropdown .notification-content[b-w12qkq7jgf] {
	flex: 1;
	min-width: 0;
	/* Ensures content doesn't overflow */
}

.notification-dropdown .notification-title[b-w12qkq7jgf] {
	font-weight: var(--font-weight-semibold) !important;
	color: var(--text-primary) !important;
	margin-bottom: var(--spacing-xxs) !important;
	font-size: var(--font-size-sm) !important;
	line-height: 1.2 !important;
	display: block !important;
	text-shadow: none !important;
	background-color: transparent !important;
}

.notification-dropdown .notification-message[b-w12qkq7jgf] {
	color: var(--text-secondary) !important;
	font-size: var(--font-size-xs) !important;
	line-height: 1.4 !important;
	margin-bottom: var(--spacing-xxs) !important;
	display: block !important;
	word-wrap: break-word !important;
	text-shadow: none !important;
	background-color: transparent !important;
}

.notification-dropdown .notification-time[b-w12qkq7jgf] {
	color: var(--text-muted) !important;
	font-size: var(--font-size-xs) !important;
	display: block !important;
	text-shadow: none !important;
	background-color: transparent !important;
}

.loading-notifications[b-w12qkq7jgf],
.notification-error[b-w12qkq7jgf],
.no-notifications[b-w12qkq7jgf] {
	padding: var(--spacing-lg);
	text-align: center;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.notification-error[b-w12qkq7jgf] {
	color: var(--danger-color) !important;
}

/* Debug styles to ensure content is visible */
.notification-dropdown .notification-item *[b-w12qkq7jgf] {
	visibility: visible !important;
	opacity: 1 !important;
	display: block !important;
}

.notification-dropdown .notification-item[b-w12qkq7jgf] {
	background: var(--bg-card) !important;
}

.notification-dropdown .notification-content div[b-w12qkq7jgf] {
	margin: var(--spacing-xxs) 0 !important;
	padding: var(--spacing-xxs) !important;
}

.user-name[b-w12qkq7jgf] {
	font-weight: var(--font-weight-medium);
}

.main-content[b-w12qkq7jgf] {
	flex: 1;
	background-color: var(--bg-secondary);
}

.content[b-w12qkq7jgf] {
	width: 100%;
	padding: var(--spacing-sm);
	background-color: var(--bg-secondary);
	overflow: visible !important;
}

/* Responsive Design */
@media (max-width: var(--breakpoint-md)) {
	.top-header[b-w12qkq7jgf] {
		padding: var(--spacing-md);
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.top-nav[b-w12qkq7jgf] {
		gap: var(--spacing-md);
		flex-wrap: wrap;
		justify-content: center;
	}

	.top-nav .nav-link[b-w12qkq7jgf] {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-sm);
	}

	.notification-section[b-w12qkq7jgf] {
		margin: 0 var(--spacing-md);
	}

	.notification-icon-wrapper[b-w12qkq7jgf] {
		padding: var(--spacing-xs);
	}

	.notification-dropdown[b-w12qkq7jgf] {
		min-width: 300px;
		right: -50px;
	}

	.notification-list[b-w12qkq7jgf] {
		max-height: calc(100vh - 250px);
	}

	.header-actions[b-w12qkq7jgf] {
		gap: var(--spacing-md);
	}

	.content[b-w12qkq7jgf] {
		padding: var(--spacing-md);
	}

	.content[b-w12qkq7jgf] {
		padding: var(--spacing-md);
	}
}

@media (max-width: var(--breakpoint-xs)) {
	.top-header[b-w12qkq7jgf] {
		padding: var(--spacing-sm);
	}

	.brand h2[b-w12qkq7jgf] {
		font-size: var(--font-size-xl);
	}

	.top-nav[b-w12qkq7jgf] {
		gap: var(--spacing-sm);
	}

	.top-nav .nav-link[b-w12qkq7jgf] {
		padding: var(--spacing-xs);
		font-size: var(--font-size-xs);
	}

	.user-profile[b-w12qkq7jgf] {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-sm);
	}

	.notification-list[b-w12qkq7jgf] {
		max-height: calc(100vh - 300px);
	}

	.notification-dropdown[b-w12qkq7jgf] {
		min-width: 280px;
		max-width: 95vw;
	}
}

/* Animation for smooth transitions */
.sidebar[b-w12qkq7jgf],
.content[b-w12qkq7jgf] {
	transition: var(--transition-all);
}

/* Focus styles for accessibility */
.nav-link:focus[b-w12qkq7jgf],
.dashboard-tab:focus[b-w12qkq7jgf],
.user-profile:focus[b-w12qkq7jgf] {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

/* Force notification text visibility - Final override */
#notificationDropdown .notification-title[b-w12qkq7jgf],
.notification-dropdown .notification-title[b-w12qkq7jgf],
.notification-item .notification-title[b-w12qkq7jgf] {
	color: var(--text-primary) !important;
}

#notificationDropdown .notification-message[b-w12qkq7jgf],
.notification-dropdown .notification-message[b-w12qkq7jgf],
.notification-item .notification-message[b-w12qkq7jgf] {
	color: var(--text-secondary) !important;
}

#notificationDropdown .notification-time[b-w12qkq7jgf],
.notification-dropdown .notification-time[b-w12qkq7jgf],
.notification-item .notification-time[b-w12qkq7jgf] {
	color: var(--text-muted) !important;
}

/* Print styles */
@media print {
	.top-header[b-w12qkq7jgf],
	.sidebar[b-w12qkq7jgf] {
		display: none;
	}

	.content[b-w12qkq7jgf] {
		padding: 0;
		box-shadow: none;
	}
}

/* Dropdown Visibility Classes */
.user-dropdown.show[b-w12qkq7jgf],
.dropdown-menu.show[b-w12qkq7jgf] {
	display: block;
}

.user-dropdown.hide[b-w12qkq7jgf],
.dropdown-menu.hide[b-w12qkq7jgf] {
	display: none;
}

/* Navigation Dropdown Styles */
.nav-dropdown-wrapper[b-w12qkq7jgf] {
	position: relative;
	display: inline-block;
}

.user-dropdown-wrapper[b-w12qkq7jgf] {
	position: relative;
	display: inline-block;
}

.user-info[b-w12qkq7jgf] {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	/* padding: var(--spacing-sm) var(--spacing-md); */
	border-radius: var(--radius-sm);
	transition: var(--transition-normal);
	color: var(--text-light);
	text-decoration: none;
}

.user-info:hover[b-w12qkq7jgf] {
	/* background-color: var(--overlay-hover-light); */
	color: var(--text-light);
}

.user-dropdown[b-w12qkq7jgf] {
	position: absolute;
	top: 100%;
	right: 0;
	background-color: var(--bg-card);
	min-width: 180px;
	box-shadow: var(--shadow-lg);
	z-index: var(--z-dropdown);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
}

.dropdown-menu[b-w12qkq7jgf] {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--bg-card);
	min-width: 160px;
	box-shadow: var(--shadow-lg);
	z-index: var(--z-dropdown);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
}

.dropdown-item[b-w12qkq7jgf] {
	color: var(--text-primary);
	padding: var(--spacing-md);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	transition: var(--transition-fast);
}

.dropdown-item i[b-w12qkq7jgf] {
	width: 1.2em;
	text-align: center;
	flex-shrink: 0;
}

.dropdown-item:hover[b-w12qkq7jgf] {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.dropdown-item.active[b-w12qkq7jgf] {
	color: var(--primary-color);
	background-color: transparent;
}

.dropdown-item.active:hover[b-w12qkq7jgf] {
	background-color: var(--bg-hover);
	color: var(--primary-color);
}

.dropdown-divider[b-w12qkq7jgf] {
	height: 1px;
	background-color: var(--border-color);
	margin: var(--spacing-xs) 0;
}

.dropdown-toggle[b-w12qkq7jgf] {
	cursor: pointer;
}

.btn[b-w12qkq7jgf] {
	padding: var(--spacing-sm) var(--spacing-lg);
	border: none;
	border-radius: var(--radius-sm);
	text-decoration: none;
	display: inline-block;
	transition: var(--transition-all);
}

.btn-primary[b-w12qkq7jgf] {
	background-color: var(--primary-color);
	color: var(--text-light);
}

.btn-primary:hover[b-w12qkq7jgf] {
	background-color: var(--primary-color-dark);
}

/* User profile section styling */
.user-profile .user-name[b-w12qkq7jgf] {
	color: var(--text-primary);
}

.user-profile .fas[b-w12qkq7jgf] {
	color: var(--text-primary);
}

.user-info:hover[b-w12qkq7jgf] {
	color: var(--gray-600);
}

/* Notification section styling */
.notification-section[b-w12qkq7jgf] {
	color: var(--text-primary);
}

.notification-section .fas[b-w12qkq7jgf] {
	color: var(--primary-color);
}

/* Header actions general styling */
.header-actions[b-w12qkq7jgf] {
	color: var(--text-primary);
}

.header-actions *[b-w12qkq7jgf] {
	color: var(--text-primary);
}

/* Mobile menu toggle button */
.mobile-menu-toggle[b-w12qkq7jgf] {
	display: none;
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: var(--font-size-xl);
	cursor: pointer;
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	transition: var(--transition-normal);
}

.mobile-menu-toggle:hover[b-w12qkq7jgf] {
	background-color: var(--bg-hover);
}

/* Responsive design */
@media (max-width: 768px) {
	.top-header[b-w12qkq7jgf] {
		padding: var(--spacing-md) var(--spacing-lg);
		flex-wrap: wrap;
	}

	.mobile-menu-toggle[b-w12qkq7jgf] {
		display: block;
	}

	.top-nav[b-w12qkq7jgf] {
		display: none;
		width: 100%;
		flex-direction: column;
		background: var(--white);
		border-top: 1px solid var(--border-color);
		margin-top: var(--spacing-md);
		padding-top: var(--spacing-md);
		gap: var(--spacing-sm);
	}

	.top-nav.mobile-menu-open[b-w12qkq7jgf] {
		display: flex;
	}

	.top-nav .nav-link[b-w12qkq7jgf] {
		padding: var(--spacing-md);
		border-radius: 0;
		border-bottom: 1px solid var(--border-light);
		width: 100%;
		justify-content: flex-start;
	}

	.top-nav .nav-link:last-child[b-w12qkq7jgf] {
		border-bottom: none;
	}

	/* Dropdown adjustments for mobile */
	.nav-dropdown-wrapper[b-w12qkq7jgf] {
		width: 100%;
	}

	.dropdown-menu[b-w12qkq7jgf] {
		position: static;
		box-shadow: none;
		border: none;
		border-left: 2px solid var(--primary-color);
		background: var(--bg-light);
		margin-left: var(--spacing-lg);
	}

	.dropdown-menu.show[b-w12qkq7jgf] {
		display: block;
	}

	.dropdown-item[b-w12qkq7jgf] {
		padding: var(--spacing-sm) var(--spacing-md);
		color: var(--text-secondary);
	}

	/* Header actions adjustments */
	.top-nav .header-actions[b-w12qkq7jgf] {
		margin-left: 0;
		width: 100%;
		justify-content: flex-end;
		padding: var(--spacing-md);
		border-top: 1px solid var(--border-light);
		gap: var(--spacing-sm);
	}

	.user-profile .user-info[b-w12qkq7jgf] {
		font-size: var(--font-size-sm);
	}

	.user-dropdown[b-w12qkq7jgf] {
		right: 0;
		left: auto;
		min-width: 180px;
	}
}

@media (max-width: 480px) {
	.top-header[b-w12qkq7jgf] {
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.brand-logo[b-w12qkq7jgf] {
		height: 28px;
	}

	.top-nav .header-actions[b-w12qkq7jgf] {
		gap: var(--spacing-xs);
	}

	.user-profile .user-name[b-w12qkq7jgf] {
		display: none;
	}

	.mobile-menu-toggle[b-w12qkq7jgf] {
		padding: var(--spacing-xs);
	}
}

/* Tenant Information Styles */
.dropdown-section-header[b-w12qkq7jgf] {
	color: var(--text-secondary);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.025em;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	background-color: var(--bg-subtle);
	border-bottom: 1px solid var(--border-color);
}

.dropdown-section-header i[b-w12qkq7jgf] {
	width: 1.2em;
	text-align: center;
	flex-shrink: 0;
	color: var(--accent-color);
}

.current-tenant-info[b-w12qkq7jgf] {
	padding: var(--spacing-md);
	background-color: var(--bg-subtle);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.current-tenant-info .tenant-name[b-w12qkq7jgf] {
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
}

.current-tenant-info .tenant-slug[b-w12qkq7jgf] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Mobile responsiveness for tenant info */
@media (max-width: 768px) {
	.user-dropdown[b-w12qkq7jgf] {
		min-width: 220px;
		right: -20px;
	}

	.dropdown-section-header[b-w12qkq7jgf] {
		padding: var(--spacing-sm);
		font-size: var(--font-size-xs);
	}

	.current-tenant-info[b-w12qkq7jgf] {
		padding: var(--spacing-sm);
	}
}
/* /Layout/NoNavigationLayout.razor.rz.scp.css */
/* No Navigation Layout Styles */

.no-nav-page[b-2qc9m9lze9] {
	min-height: 100vh;
	padding: 0;
}

.no-nav-content[b-2qc9m9lze9] {
	width: 100%;
	margin: 0 auto;
}

/* Auth form styling */
.auth-card[b-2qc9m9lze9] {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--spacing-xl);
	text-align: center;
}

.auth-header[b-2qc9m9lze9] {
	margin-bottom: var(--spacing-xl);
}

.auth-header h1[b-2qc9m9lze9] {
	color: var(--primary-color);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-sm);
}

.auth-header .brand-subtitle[b-2qc9m9lze9] {
	color: var(--text-muted);
	font-size: var(--font-size-base);
}

.auth-form[b-2qc9m9lze9] {
	text-align: left;
}

.auth-form .form-group[b-2qc9m9lze9] {
	margin-bottom: var(--spacing-md);
}

.auth-form .form-control[b-2qc9m9lze9] {
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	border: 1px solid var(--input-border-color);
	font-size: var(--font-size-base);
}

.auth-form .form-control:focus[b-2qc9m9lze9] {
	border-color: var(--input-border-color-focus);
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.auth-button[b-2qc9m9lze9] {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--gradient-primary);
	border: none;
	border-radius: var(--radius-md);
	color: var(--text-light);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: var(--transition-all);
}

.auth-button:hover[b-2qc9m9lze9] {
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.auth-button:disabled[b-2qc9m9lze9] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.auth-divider[b-2qc9m9lze9] {
	margin: var(--spacing-lg) 0;
	position: relative;
	text-align: center;
	color: var(--text-muted);
}

.auth-divider[b-2qc9m9lze9]::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--border-color);
	z-index: 1;
}

.auth-divider span[b-2qc9m9lze9] {
	background: var(--bg-card);
	padding: 0 var(--spacing-md);
	z-index: 2;
	position: relative;
}

.auth-footer[b-2qc9m9lze9] {
	margin-top: var(--spacing-lg);
	text-align: center;
	color: var(--text-muted);
}

.auth-footer a[b-2qc9m9lze9] {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
}

.auth-footer a:hover[b-2qc9m9lze9] {
	text-decoration: underline;
}

/* Error and success messages */
.auth-alert[b-2qc9m9lze9] {
	margin-bottom: var(--spacing-md);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
}

.auth-alert.error[b-2qc9m9lze9] {
	background: var(--error-bg);
	color: var(--error-color);
	border: 1px solid var(--error-border);
}

.auth-alert.success[b-2qc9m9lze9] {
	background: var(--success-bg);
	color: var(--success-color);
	border: 1px solid var(--success-border);
}

/* Loading state */
.auth-loading[b-2qc9m9lze9] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.auth-loading .spinner[b-2qc9m9lze9] {
	width: var(--spacing-md);
	height: var(--spacing-md);
	border: 2px solid transparent;
	border-top: 2px solid currentColor;
	border-radius: 50%;
	animation: spin-b-2qc9m9lze9 1s linear infinite;
}

@keyframes spin-b-2qc9m9lze9 {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive design */
@media (max-width: var(--breakpoint-sm)) {
	.no-nav-page[b-2qc9m9lze9] {
		padding: var(--spacing-sm);
	}

	.no-nav-content[b-2qc9m9lze9] {
		max-width: 100%;
	}

	.auth-card[b-2qc9m9lze9] {
		padding: var(--spacing-lg);
	}

	.auth-header h1[b-2qc9m9lze9] {
		font-size: var(--font-size-2xl);
	}
}
/* /Pages/Activities.razor.rz.scp.css */
/* Styles specific to Activities.razor */

/* Ensure left, middle and right column card headers match visually
   (same padding and minimum height) so the header background bands align. */
.activities-layout .activities-list-column > .card > .card-header[b-d2fckzg1tk],
.activities-layout .activity-details-column > .card > .card-header[b-d2fckzg1tk],
.activities-layout .communications-panel > .card > .card-header[b-d2fckzg1tk] {
	padding: var(--spacing-sm) var(--spacing-md);
	display: flex;
	align-items: center;
	min-height: var(--card-header-height);
}

/* Keep the forms panel header compact to avoid disturbing the tab layout */
.forms-panel .card-header[b-d2fckzg1tk] {
	padding: 0;
	min-height: unset;
}


.communications-panel .card-header[b-d2fckzg1tk] {
	/* Match middle column header spacing for visual alignment */
	padding: var(--spacing-md) var(--spacing-md);
}

/* Ensure the header text in the right communications card matches
   the middle card-header-gradient styling (size and spacing) */
.communications-panel .card-header h6[b-d2fckzg1tk],
.communications-panel .card-header .header-title[b-d2fckzg1tk] {
	font-size: var(--font-size-lg);
	margin: 0;
	color: inherit;
}

/* Circular add button used in Recent Communications header */
.comm-add-btn[b-d2fckzg1tk] {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.comm-add-btn i[b-d2fckzg1tk] {
	font-size: 0.9rem;
}

/* Donation preview image sizing */
.donation-preview-image[b-d2fckzg1tk] {
	width: 100%;
	max-width: 450px; /* desired display width cap */
	height: auto;
	max-height: 450px;
	object-fit: contain;
	display: block;
	box-sizing: border-box;
}

/* Reserve space on the right inside preview frames so floating icons don't overlap images */
.frame-viewport[b-d2fckzg1tk] {
	padding-right: 72px;
	/* leave room for vertical icon buttons */
	box-sizing: border-box;
}

.frame-viewport img.donation-preview-image[b-d2fckzg1tk] {
	max-width: calc(100% - 12px);
	/* ensure small inner padding remains */
}

/* Slightly narrower variant used for registration preview so it doesn't extend under icons */
.registration-preview-image[b-d2fckzg1tk] {
	max-width: calc(100% - 8px);
	/* reserve small gap for icons */
	width: auto;
	object-fit: contain;
}

/* Larger registration variant + left offset to align image slightly left under the frame */
.registration-frame .registration-preview-image[b-d2fckzg1tk] {
	max-width: calc(100% - 100px);
	max-height: 550px;
	margin-left: -50px;
	/* nudge left */
}

/* Small visual tweak when button appears disabled */
.comm-add-btn.disabled[b-d2fckzg1tk],
.comm-add-btn[disabled][b-d2fckzg1tk] {
	opacity: 0.6;
}

.attendees-tab-container .attendees-actions-bar[b-d2fckzg1tk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.attendees-tab-container .attendees-actions-right[b-d2fckzg1tk] {
	display: flex;
	gap: var(--spacing-12);
	align-items: center;
}

/* Ensure selected-count text in attendees matches Volunteers style (darker + base size) */
.attendees-tab-container .selected-count-text[b-d2fckzg1tk] {
	font-size: var(--font-size-base);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.attendees-tab-container .attendee-row-left[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
}

.attendees-tab-container .attendee-email-col[b-d2fckzg1tk],
.attendees-tab-container .attendee-date-col[b-d2fckzg1tk] {
	color: var(--text-secondary);
}

.attendees-tab-container .attendees-footer-row .text-xs.text-muted[b-d2fckzg1tk] {
	white-space: nowrap;
}

.attendees-tab-container .attendees-footer-row[b-d2fckzg1tk] {
	width: 100%;
	gap: var(--spacing-xxs);
	flex-wrap: nowrap;
	display: flex;
	align-items: center;
}

.attendees-tab-container .pagination-controls[b-d2fckzg1tk] {
	white-space: nowrap;
	margin-left: auto;
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
}

/* Dim disabled buttons within the attendees actions area */
.attendees-tab-container .attendees-actions-bar .btn[disabled][b-d2fckzg1tk] {
	opacity: 0.5;
}

/* Activities page styling - 3-column layout */
.activities-container[b-d2fckzg1tk] {
	padding: var(--spacing-sm);
	/* background-color: var(--bg-primary); */
	height: calc(100vh - 120px);
	/* Fixed frame height; inner columns own scrolling */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 0;
	overflow: hidden;
	/* Prevent container from scrolling */
}
.activities-layout[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: minmax(240px, 380px) 1fr minmax(240px, 480px);
	grid-template-rows: minmax(0, 1fr);
	/* Three columns: list, details, communications */
	gap: var(--spacing-xxs);
	height: 100%;
	width: 100%;
	min-height: 0;
	overflow: hidden;
}

.activities-layout > div:nth-child(1)[b-d2fckzg1tk] {
	width: 100%;
	max-width: 380px;
	min-width: 240px;
}

.activities-layout > div:nth-child(2)[b-d2fckzg1tk] {
	width: auto;
	min-width: 0;
}

.activities-layout > div:nth-child(3)[b-d2fckzg1tk] {
	width: 100%;
	max-width: 480px;
	min-width: 240px;
}

/* Ensure all columns have proper flex behavior and height constraints */
.activities-list-column[b-d2fckzg1tk],
.activity-details-column[b-d2fckzg1tk],
.communications-column[b-d2fckzg1tk] {
	min-width: 0;
	min-height: 0;
	/* Prevent overflow */
	overflow: hidden;
	/* Prevent column overflow */
}

/* Explicit grid placement */
.activities-list-column[b-d2fckzg1tk] {
	grid-column: 1;
	grid-row: 1;
	height: 100%;
	/* Full height */
	width: 380px;
	max-width: 380px;
}

.activity-details-column[b-d2fckzg1tk] {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Fill full height */
	min-height: 0;
	margin-left: var(--spacing-xs);
}

.communications-column[b-d2fckzg1tk] {
	grid-column: 3;
	grid-row: 1;
	height: 100%;
	/* Fill full height */
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	width: 480px;
	max-width: 480px;
	min-height: 0;
}

/* Split the right column into two halves */
.communications-panel[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
	flex: 1;
	min-height: 0;
}

.communications-panel .card[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.communications-panel-content[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	/* Allow the inner RecentCommunications component to provide its own scrolling
	   so we avoid nested/duplicate scrollbars on the right column. */
	overflow: visible;
	display: flex;
	flex-direction: column;
}

.communications-panel .card-body[b-d2fckzg1tk] {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.forms-panel[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
	flex: 1;
	min-height: 0;
}

.forms-panel .card[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.forms-panel .card-body[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

/* Left Panel - Activity List */
.activities-list-column .card[b-d2fckzg1tk] {
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	/* Subtle right stroke to mirror Donors left-sidebar */
	border-right: 1px solid var(--border-color);
}

.activities-list-column .card-body[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.activities-list-column .card-footer[b-d2fckzg1tk] {
	flex-shrink: 0;
	background-color: var(--bg-secondary);
	border-top: 1px solid var(--gray-200);
}

/* Center Panel - Activity Details */
.activity-details-column .card[b-d2fckzg1tk] {
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	position: relative;
	/* contain absolute-positioned footer */
	overflow: hidden;
	/* prevent inner absolute footer from causing page overflow */
}

.activity-details-scroll-region[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Keep the five tabs on one line, but confine horizontal overflow to the tab row itself. */
.nav-tabs-custom[b-d2fckzg1tk] {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
}

/* Hide scrollbar track but keep scrolling usable (cross-browser) */
.nav-tabs-custom[b-d2fckzg1tk] {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
.nav-tabs-custom[b-d2fckzg1tk]::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

.nav-tabs-custom .nav-item[b-d2fckzg1tk],
.nav-tabs-custom .nav-link[b-d2fckzg1tk] {
	flex: 0 0 auto;
	white-space: nowrap;
}

.nav-tabs-custom[b-d2fckzg1tk]::-webkit-scrollbar {
	height: var(--spacing-xs, 8px);
}

.nav-tabs-custom[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: transparent;
}

.nav-tabs-custom[b-d2fckzg1tk]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}

.nav-tabs-custom[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}

/* Right Panel - Communications */
.communications-column .card[b-d2fckzg1tk] {
	gap: var(--spacing-xxs);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

/* Responsive Design */

@media (max-width: 2200px) {
	.activities-layout[b-d2fckzg1tk] {
		grid-template-columns: minmax(220px, 380px) 1fr minmax(220px, 480px);
	}

	.activities-layout > div:nth-child(1)[b-d2fckzg1tk] {
		width: 100%;
		max-width: 380px;
		min-width: 220px;
	}

	.activities-layout > div:nth-child(3)[b-d2fckzg1tk] {
		width: 100%;
		max-width: 480px;
		min-width: 220px;
	}
}
/* Ensure left and center panels can scroll internally on large screens.
	Keep rules minimal and avoid conflicts with other styles. */
@media (min-width: 1000px) {
	/* Left column: make card body a vertical scroller */
	.activities-layout > .activities-list-column .card[b-d2fckzg1tk] {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
	}

	.activities-layout > .activities-list-column .card .card-body[b-d2fckzg1tk] {
		overflow-y: auto;
		min-height: 0;
	}

	/* Center column: ensure card has normal flex layout and the scroll region
	   grows to fill available space without becoming the scroll container. */
	.activity-details-column .card[b-d2fckzg1tk] {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
	}

	.activity-details-column .card .activity-details-scroll-region[b-d2fckzg1tk] {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
		box-sizing: border-box;
		min-width: 0;
	}
}

.activity-details-scroll-region > *[b-d2fckzg1tk] {
	flex-shrink: 0;
	min-width: 0;
}

.nav-tabs-custom[b-d2fckzg1tk] {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	min-width: 0;
}

.nav-tabs-custom .nav-item[b-d2fckzg1tk] {
	flex: 0 0 auto;
	white-space: nowrap;
}

.tab-content-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}

/* Ensure middle panel scroll appearance matches left-panel thin scrollbar */
.activity-details-scroll-region[b-d2fckzg1tk],
.tab-content-container[b-d2fckzg1tk],
.activity-details-column .card .activity-details-scroll-region[b-d2fckzg1tk] {
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: var(--border-secondary, #d1d6da) transparent;
}
.activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar,
.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar,
.activity-details-column .card .activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}
.activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar-track,
.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar-track,
.activity-details-column .card .activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: transparent;
}
.activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar-thumb,
.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar-thumb,
.activity-details-column .card .activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}
.activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover,
.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover,
.activity-details-column .card .activity-details-scroll-region[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}

@media (max-width: 1800px) {
	.activities-layout[b-d2fckzg1tk] {
		grid-template-columns: minmax(200px, 280px) 1fr minmax(200px, 350px);
	}

	.activities-layout > div:nth-child(1)[b-d2fckzg1tk] {
		width: 100%;
		max-width: 280px;
		min-width: 200px;
	}

	.activities-layout > div:nth-child(3)[b-d2fckzg1tk] {
		width: 100%;
		max-width: 350px;
		min-width: 200px;
	}
}

/* Switch to 2-column layout on tablets */
@media (max-width: 1000px) {
	.activities-layout[b-d2fckzg1tk] {
		grid-template-columns: 380px 1fr;
		/* Back to 2-column */
	}

	.activities-list-column[b-d2fckzg1tk] {
		grid-column: 1;
		grid-row: 1;
		height: 100%;
	}

	.activity-details-column[b-d2fckzg1tk] {
		grid-column: 2;
		gap: var(--spacing-xxs);
		height: 100%;
	}

	.communications-column[b-d2fckzg1tk] {
		display: none;
		/* Hide communications on medium screens */
	}
}

/* Stack vertically on small screens */
@media (max-width: 768px) {
	.activities-container[b-d2fckzg1tk] {
		height: auto;
		min-height: 100vh;
	}

	.activities-layout[b-d2fckzg1tk] {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.activities-list-column[b-d2fckzg1tk],
	.activity-details-column[b-d2fckzg1tk] {
		grid-column: 1;
		height: auto;
	}

	.communications-column[b-d2fckzg1tk] {
		display: none;
		/* Hide on mobile */
	}

	.activity-list[b-d2fckzg1tk] {
		max-height: 400px;
		height: auto;
	}

	.tab-content-container[b-d2fckzg1tk] {
		max-height: 300px;
		margin-bottom: var(--spacing-xxs);
	}

	.activity-overview-grid[b-d2fckzg1tk] {
		grid-template-columns: 80px 1fr;
		gap: var(--spacing-md);
	}

	.activity-image-container[b-d2fckzg1tk] {
		width: 80px;
		height: 80px;
	}

	.activity-overview-meta[b-d2fckzg1tk] {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	.activity-actions-overview[b-d2fckzg1tk] {
		grid-column: 1 / -1;
		margin-top: var(--spacing-md);
	}
}

/* Further optimizations for very small screens */
@media (max-width: var(--breakpoint-sm)) {
	.activities-layout[b-d2fckzg1tk] {
		grid-template-columns: 1fr;
		height: auto;
	}

	.activities-container[b-d2fckzg1tk] {
		padding: var(--spacing-xs);
	}
}

/* Search Section - Following Family page pattern */
.input-group[b-d2fckzg1tk] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	/* padding: var(--spacing-sm); */
	margin: var(--spacing-sm);
	width: 95%;
}

/* Activities Header Section */
.activities-header[b-d2fckzg1tk] {
	border-bottom: 1px solid var(--gray-100);
	padding-bottom: var(--spacing-sm);
}

.create-activity-btn[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color),
			var(--primary-color-dark));
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--text-light);
	transition: var(--transition-all);
	box-shadow: var(--shadow-sm);
}

.create-activity-btn:hover[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color-dark),
			var(--primary-color));
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
	color: var(--text-light);
}

.create-activity-btn:active[b-d2fckzg1tk] {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

/* Use global Donors header gradient + light text to match Donors exactly */
.card-header-gradient[b-d2fckzg1tk] {
	background: var(--gradient-card);
	color: var(--text-light);
}

.card-header-gradient .header-title[b-d2fckzg1tk] {
	font-size: var(--font-size-lg);
	margin: 0;
	color: var(--text-light);
}

.create-button[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	padding: var(--spacing-sm) var(--spacing-sm);
	white-space: nowrap;
	border-radius: var(--radius-md);
	/* rely on .btn-primary for colors and border */
}

.create-button .create-icon[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	margin-right: var(--spacing-xs);
}

/* Small adjustments for the activities list header spacing */
.activities-list-column .card-body[b-d2fckzg1tk] {
	padding: var(--spacing-sm);
}

.search-input[b-d2fckzg1tk] {
	border: none;
	border-radius: 0;
	font-size: var(--font-size-sm);
	padding: var(--spacing-sm);
	color: var(--text-primary);
}

.search-input:focus[b-d2fckzg1tk] {
	box-shadow: none;
	border: none;
	/* background-color: var(--bg-primary); */
}

.search-button[b-d2fckzg1tk] {
	border: none;
	border-left: 1px solid var(--border-color);
	background-color: var(--bg-secondary);
	color: var(--text-secondary);
	padding: var(--spacing-xs) var(--spacing-sm);
	transition: var(--transition-all);
}

.search-button:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.search-icon[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
}

/* Filter controls styling */
.px-2.py-1.border-bottom[b-d2fckzg1tk] {
	overflow: visible;
	/* Allow content to overflow for dropdown */
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 100;
	/* Ensure filter container has appropriate z-index */
}

/* Enhanced Filter Group Styling */
.filter-group[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-xs);
	min-width: fit-content;
}

.filter-label[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.filter-select[b-d2fckzg1tk] {
	/* Make the filter select wider to accommodate longer labels like 'Inactive' and improve usability */
	min-width: 180px;
	max-width: 320px;
	width: auto;
}

/* Stronger rule to override Bootstrap's form-select (which often sets width:100%)
   and any layout constraints. Use a fixed comfortable width for filter selects. */
.activities-container .filter-group .filter-select[b-d2fckzg1tk] {
	width: 220px !important;
}

/* Direct high-specificity selectors to ensure the select element itself gets the width */
select.form-select.filter-select[b-d2fckzg1tk],
select.form-select.filter-select.form-select-sm[b-d2fckzg1tk],
select.form-select-sm.filter-select[b-d2fckzg1tk] {
	width: 220px !important;
	min-width: 220px !important;
}

.filter-select-sm[b-d2fckzg1tk] {
	min-width: 80px;
	max-width: 100px;
}

.filter-toggle-btn[b-d2fckzg1tk] {
	margin-top: 18px;
	/* Align with select inputs */
	height: 32px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	transition: var(--transition-all);
}

.filter-toggle-btn:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
	color: var(--primary-color);
}

/* Form select and input styling for filters */
.form-select-sm[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	min-width: 0;
	flex-shrink: 1;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	transition: var(--transition-fast);
}

.form-select-sm:focus[b-d2fckzg1tk] {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
	outline: none;
}

/* Responsive filter improvements */
@media (max-width: 768px) {
	.d-flex.gap-3.justify-content-between[b-d2fckzg1tk] {
		flex-direction: column;
		gap: var(--spacing-md);
		align-items: stretch;
	}

	.d-flex.gap-3.flex-grow-1[b-d2fckzg1tk] {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.filter-group[b-d2fckzg1tk] {
		width: 100%;
	}

	.filter-select[b-d2fckzg1tk],
	.filter-select-sm[b-d2fckzg1tk] {
		width: 100%;
		min-width: unset;
		max-width: unset;
	}

	.filter-toggle-btn[b-d2fckzg1tk] {
		margin-top: 0;
		width: 100%;
		height: 36px;
		justify-content: center;
	}
}

@media (max-width: 576px) {
	.d-flex.gap-2.align-items-center[b-d2fckzg1tk] {
		flex-direction: column;
		gap: var(--spacing-sm);
		width: 100%;
	}
}

/* Accordion Filters - Overlay Style */
.accordion-filters[b-d2fckzg1tk] {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--bg-primary);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
	z-index: 10000;
	/* Very high z-index to appear above everything */
	animation: slideDown-b-d2fckzg1tk 0.3s ease-out;
	max-height: 500px;
	overflow-y: auto;
	margin-top: var(--spacing-xs);
	backdrop-filter: blur(4px);
	width: 100%;
	box-sizing: border-box;
}

/* Ensure activity list has lower z-index */
.activity-list[b-d2fckzg1tk] {
	height: calc(100vh - 300px);
	overflow-y: auto;
	overflow-x: hidden;
	/* Prevent horizontal scrolling */
	/* max-height: 500px; */
	position: relative;
	z-index: 1;
	/* Lower z-index so filters appear above */
}

/* Reusable thin grey scrollbar matching Recent Communications
   Usage: add the `thin-scrollbar` class to any scrollable container */
.thin-scrollbar[b-d2fckzg1tk] {
	/* Firefox */
	scrollbar-width: thin;
	/* use design token for thumb color with transparent track */
	scrollbar-color: var(--border-secondary, #d1d6da) transparent;
}

.thin-scrollbar[b-d2fckzg1tk]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}
.thin-scrollbar[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: transparent;
}
.thin-scrollbar[b-d2fckzg1tk]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}
.thin-scrollbar[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}

.activity-item[b-d2fckzg1tk] {
	cursor: pointer;
	transition: var(--transition-fast);
	/* border: 1px solid var(--gractivity-itemay-200); */
	margin: var(--spacing-xs) var(--spacing-xs) 0 var(--spacing-xs);
	position: relative;
	z-index: 2;
	/* Higher than the list container but lower than filters */
	overflow: hidden;
	/* Prevent content overflow */
	word-wrap: break-word;
	/* Break long words */
}

.activity-item:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
}

.activity-item.selected[b-d2fckzg1tk] {
	color: var(--primary-color);
	font-weight: var(--font-weight-bold);
}

.activity-item.selected .text-muted[b-d2fckzg1tk] {
	color: var(--text-secondary) !important;
}

/* Inactive Activity Styling */
.activity-item.inactive-activity[b-d2fckzg1tk] {
	opacity: 0.7;
	background-color: var(--bg-disabled);
}

.activity-item.inactive-activity .activity-name[b-d2fckzg1tk] {
	color: var(--text-disabled);
}

.activity-item.inactive-activity .text-muted[b-d2fckzg1tk] {
	color: var(--text-disabled);
}

.activity-item.inactive-activity:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
	opacity: 0.8;
}

/* accordion-filters-container kept below first definition */

/* Ensure accordion-filters-container exists and keeps high stacking context */
.accordion-filters-container[b-d2fckzg1tk] {
	position: relative;
	z-index: 10000;
	/* Ensure parent container also has high z-index */
}

@keyframes slideDown-b-d2fckzg1tk {
	from {
		opacity: 0;
		transform: translateY(-15px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.accordion-filters .row[b-d2fckzg1tk] {
	margin: 0;
	/* Remove negative margins from Bootstrap row */
	width: 100%;
}

.accordion-filters .col-6[b-d2fckzg1tk],
.accordion-filters .col-12[b-d2fckzg1tk] {
	padding: 0 var(--spacing-xs);
	/* Smaller gutters */
	margin-bottom: var(--spacing-sm);
}

.accordion-filters .form-label[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
	display: block;
}

.accordion-filters .form-control-sm[b-d2fckzg1tk],
.accordion-filters .form-select-sm[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background-color: var(--bg-card); /* ensure inputs use design token for card/input background */
	color: var(--text-primary);
	width: 100%;
	min-width: 0;
	/* Prevent flex items from overflowing */
	box-sizing: border-box;
	transition: var(--transition-fast);
}

.accordion-filters .form-control-sm:focus[b-d2fckzg1tk],
.accordion-filters .form-select-sm:focus[b-d2fckzg1tk] {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.accordion-filters .form-control-sm[b-d2fckzg1tk]::placeholder {
	color: var(--text-muted);
	font-style: italic;
}

/* Ensure date inputs (and other filter inputs) show the inner white background and
   keep placeholders muted for consistency */
.accordion-filters input[type="text"][b-d2fckzg1tk],
.accordion-filters input[type="date"][b-d2fckzg1tk],
.accordion-filters .form-control-sm[b-d2fckzg1tk],
.accordion-filters .form-select-sm[b-d2fckzg1tk] {
	background-color: var(--bg-card);
	color: var(--text-primary);
}

.accordion-filters input[b-d2fckzg1tk]::placeholder,
.accordion-filters .form-control-sm[b-d2fckzg1tk]::placeholder,
.accordion-filters .form-select-sm[b-d2fckzg1tk]::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

/* Filter action buttons */
.accordion-filters .btn-sm[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-sm);
	transition: var(--transition-all);
	font-weight: var(--font-weight-medium);
}

.accordion-filters .btn-primary[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color),
			var(--primary-color-dark));
	border: none;
	color: var(--text-light);
}

.accordion-filters .btn-primary:hover[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color-dark),
			var(--primary-color));
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

.accordion-filters .btn-outline-secondary[b-d2fckzg1tk] {
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	background: var(--bg-primary);
}

.accordion-filters .btn-outline-secondary:hover[b-d2fckzg1tk] {
	background: var(--bg-hover);
	border-color: var(--border-hover);
	color: var(--text-primary);
}

/* Filter header styling */
.accordion-filters h6[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--primary-color);
	margin: 0;
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--border-light);
}

/* Responsive adjustments for filters */
@media (max-width: 576px) {
	.accordion-filters .col-6[b-d2fckzg1tk] {
		width: 100%;
		flex: 0 0 100%;
	}

	.accordion-filters .d-flex[b-d2fckzg1tk] {
		flex-direction: column;
		align-items: stretch;
	}

	.accordion-filters .d-flex>*[b-d2fckzg1tk] {
		width: 100%;
		margin-bottom: var(--spacing-xs);
	}

	.accordion-filters[b-d2fckzg1tk] {
		max-height: 70vh;
		padding: var(--spacing-sm);
	}
}

/* Style for activity type and amount text */
.activity-item .text-muted[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	width: 100%;
	min-width: 0;
}

/* Container for activity type and goal amount */
.activity-item .text-muted.d-flex[b-d2fckzg1tk] {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-width: 0;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.activities-list-column .activity-item .text-muted.d-flex > div:first-child[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-width: 0;
}

/* Activity type span */
.activity-item .text-muted span:first-child[b-d2fckzg1tk] {
	flex-grow: 1;
	text-align: left;
}

.activity-item.selected .activity-name[b-d2fckzg1tk] {
	color: var(--primary-color);
}

.activity-item-border[b-d2fckzg1tk] {
	border-bottom: 1px solid var(--gray-100);
}

.activity-item-padding[b-d2fckzg1tk] {
	padding: var(--spacing-sm);
}

.activity-avatar[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Activity Actions */
.activity-actions[b-d2fckzg1tk] {
	opacity: 0;
	transition: var(--transition-fast);
	display: none;
	/* Hide the dropdown actions */
}

.activity-item:hover .activity-actions[b-d2fckzg1tk] {
	opacity: 1;
	/* display: flex; */
	/* Commented out to keep hidden */
}

/* Dropdown Menu Styling */
.activity-item .dropdown[b-d2fckzg1tk] {
	position: relative;
	z-index: 1000;
}

.activity-item .dropdown-menu[b-d2fckzg1tk] {
	opacity: 1 !important;
	visibility: visible !important;
	background-color: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	z-index: 1001;
	min-width: 140px;
	padding: var(--spacing-xs) 0;
}

.activity-item .dropdown-item[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	padding: var(--spacing-xs) var(--spacing-md);
	color: var(--text-primary);
	transition: var(--transition-fast);
	border: none;
	background: none;
	width: 100%;
	text-align: left;
}

.activity-item .dropdown-item:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.activity-item .dropdown-item.text-danger[b-d2fckzg1tk] {
	color: var(--danger-color);
}

.activity-item .dropdown-item.text-danger:hover[b-d2fckzg1tk] {
	background-color: var(--danger-color);
	color: var(--text-light);
}

.activity-item .dropdown-toggle[b-d2fckzg1tk] {
	border: 1px solid var(--border-color);
	background-color: var(--bg-primary);
	color: var(--text-secondary);
	padding: var(--spacing-xs);
	font-size: var(--font-size-xs);
	transition: var(--transition-fast);
}

.activity-item .dropdown-toggle:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
	color: var(--text-primary);
	border-color: var(--border-hover);
}

/* Fix: make left panel scrollbar flush to the card edge by moving
   padding from the scrollable container to the inner .activity-list.
   This prevents the scrollbar from appearing inset / centered. */
@media (min-width: 1000px) {
	.activities-layout > .activities-list-column .card .card-body[b-d2fckzg1tk] {
		padding: 0;
		box-sizing: border-box;
	}

	.activities-layout > .activities-list-column .card .card-body .activity-list[b-d2fckzg1tk] {
		padding: var(--spacing-sm);
		box-sizing: border-box;
	}
}

.flex-grow-min[b-d2fckzg1tk] {
	min-width: 0;
	width: 100%;
}

.activity-name[b-d2fckzg1tk] {
	font-size: var(--font-size-md);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xxs);
	overflow-wrap: anywhere;
}

.activity-goal[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--primary-color);
	white-space: nowrap;
	margin-left: 0;
	text-align: left;
	min-width: 0;
	flex: 0 1 auto;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.activity-item > .d-flex[b-d2fckzg1tk] {
	min-width: 0;
	width: 100%;
}

.activities-list-column .activity-item[b-d2fckzg1tk] {
	margin-right: 0;
}

/* Loading State */
.loading-center[b-d2fckzg1tk] {
	padding: var(--spacing-xl);
}

.loading-text[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-top: var(--spacing-xs);
}

/* Empty State */
.empty-state-container[b-d2fckzg1tk] {
	padding: var(--spacing-3xl) var(--spacing-xl);
}

.empty-state-text[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.icon-lg[b-d2fckzg1tk] {
	font-size: var(--font-size-2xl);
	color: var(--text-muted);
}

/* Pagination Footer - Following Family page pattern */
.card-footer[b-d2fckzg1tk] {
	background-color: var(--bg-light);
	border-top: 1px solid var(--border-light);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-footer-compact[b-d2fckzg1tk] {
	padding: var(--spacing-xs) var(--spacing-md);
}

.btn-xs[b-d2fckzg1tk] {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-xs);
	border-radius: var(--radius-sm);
	min-width: 32px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color);
	background-color: var(--bg-primary);
	color: var(--text-secondary);
	transition: var(--transition-all);
}

.btn-xs:hover:not(.disabled)[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
	color: var(--text-primary);
	border-color: var(--border-hover);
}

.btn-xs.disabled[b-d2fckzg1tk] {
	opacity: 0.5;
	cursor: not-allowed;
	background-color: var(--bg-disabled);
	color: var(--text-disabled);
	border-color: var(--border-disabled);
}

.icon-xs[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
}

.text-xs[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

/* Strong alignment for volunteers footer pagination */
.volunteers-footer .pagination-controls[b-d2fckzg1tk] {
	margin-left: auto !important;
	justify-content: flex-end !important;
}

.volunteers-footer .text-xs[b-d2fckzg1tk] {
	margin-right: var(--spacing-md);
}

/* Avatar styling for activity items */
.avatar-xs[b-d2fckzg1tk] {
	width: var(--spacing-xl);
	height: var(--spacing-xl);
	font-size: var(--font-size-xs);
	line-height: var(--spacing-2xl);
	background: var(--gradient-card);
	color: rgba(var(--white-rgb), 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
}

/* Button styling */
.btn-xs[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
}

/* Tab Content Styles - Associated Contacts, Volunteers, Attendees, Students */

/* Tab Content Container */
.tab-content-container[b-d2fckzg1tk] {
	/* Let inner tab panels own scrolling instead of the middle activity panel. */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	padding: var(--spacing-sm);
	padding-bottom: 0;
	overflow: hidden;
}

/* Contacts footer layout (moved from inline styles in Activities.razor) */
.contacts-footer-row[b-d2fckzg1tk] {
	width: 100%;
	gap: var(--spacing-6);
	flex-wrap: nowrap;
}

/* ---------- Attendees tab: mirror Contacts behavior ---------- */
.attendees-tab-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	position: relative;
	/* containing block for absolute footer */
	overflow: hidden;
}

.attendees-body[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.attendees-tab-container .attendees-list-table[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	padding-bottom: var(--spacing-12);
	/* moved from inline style */
}

.attendees-tab-container .attendees-footer-outer[b-d2fckzg1tk],
.attendees-tab-container .attendees-footer-row[b-d2fckzg1tk] {
	flex-shrink: 0;
	height: 40px !important;
	padding: var(--spacing-6) var(--spacing-10) !important;
	display: flex !important;
	align-items: center !important;
	background-color: var(--bg-light);
	border-top: 1px solid var(--border-light) !important;
	position: relative;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
}

/* Ensure the attendees footer's text is aligned to match left panel */
.attendees-tab-container .card-footer.card-footer-compact .text-xs[b-d2fckzg1tk] {
	margin-left: var(--spacing-sm);
}

.contacts-summary[b-d2fckzg1tk] {
	white-space: nowrap;
}

.pagination-controls[b-d2fckzg1tk] {
	white-space: nowrap;
	margin-left: auto;
	/* keep pagination controls aligned to right */
}

/* Loading Tab */
.loading-tab[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* Empty Tab */
.empty-tab[b-d2fckzg1tk] {
	color: var(--text-light);
	margin-top: 0;
	/* removed large automatic top margin so content sits higher */
	border: none;
	flex-direction: column;
	text-align: center;
	display: flex;
	align-items: center;
	color: var(--text-muted);
	/* align toward the top of the tab area but keep a small comfortable offset */
	justify-content: flex-start;
	padding: var(--spacing-lg) var(--spacing-md);
	padding-top: calc(var(--spacing-lg) + 10px);
	border-radius: var(--btn-border-radius);
	min-width: 220px;
	white-space: nowrap;
}

/* Add Associated Contacts buttons */
.add-associated-center[b-d2fckzg1tk] {
	margin-top: var(--spacing-md);
	/* fixed height as requested */
	height: 35px;
	min-width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: var(--primary-color);
	color: var(--text-light);
	border-radius: var(--btn-border-radius);
	border: none;
	white-space: nowrap;
}

/* Selected count text styling */
.selected-count-text[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
}

.empty-tab .fa-users[b-d2fckzg1tk] {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--spacing-sm);
	color: var(--text-muted);
}

/* Ensure Add buttons dim to 50% opacity on hover/focus/active */
.add-associated-center[b-d2fckzg1tk],
.contacts-header .add-associated-top[b-d2fckzg1tk] {
	transition:
		background 160ms ease,
		color 160ms ease,
		opacity 160ms ease;
}

.add-associated-center:hover[b-d2fckzg1tk],
.contacts-header .add-associated-top:hover[b-d2fckzg1tk] {
	opacity: 0.5;
}

.add-associated-center:focus[b-d2fckzg1tk],
.add-associated-center:active[b-d2fckzg1tk],
.contacts-header .add-associated-top:focus[b-d2fckzg1tk],
.contacts-header .add-associated-top:active[b-d2fckzg1tk] {
	opacity: 0.7;
}

/* Higher-specificity button rules to override Bootstrap's default active styles */
.contacts-header button.add-associated-top:hover[b-d2fckzg1tk],
.contacts-header button.add-associated-top:focus[b-d2fckzg1tk],
.contacts-header button.add-associated-top:active[b-d2fckzg1tk],
button.add-associated-center:hover[b-d2fckzg1tk],
button.add-associated-center:focus[b-d2fckzg1tk],
button.add-associated-center:active[b-d2fckzg1tk] {
	background: var(--primary-color) !important;
	color: var(--text-light) !important;
}

.contacts-header button.add-associated-top:hover[b-d2fckzg1tk],
button.add-associated-center:hover[b-d2fckzg1tk] {
	opacity: 0.5 !important;
}

.contacts-header button.add-associated-top:focus[b-d2fckzg1tk],
.contacts-header button.add-associated-top:active[b-d2fckzg1tk],
button.add-associated-center:focus[b-d2fckzg1tk],
button.add-associated-center:active[b-d2fckzg1tk] {
	opacity: 0.7 !important;
	box-shadow: var(--shadow-sm) !important;
	outline: none !important;
}

/* Contact Items */
.contact-item[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	/* Reduced padding to remove excess white space */
	padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-md) - 4px);
	border-bottom: 1px solid var(--gray-100);
	transition: var(--transition-fast);
}

.contact-item:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
}

.contact-avatar[b-d2fckzg1tk] {
	/* Slightly smaller avatar to free vertical space */
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	background: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-sm);
	color: rgba(var(--white-rgb), 0.92);
	font-size: var(--font-size-md);
}

.contact-info[b-d2fckzg1tk] {
	flex-grow: 1;
	min-width: 0;
	/* allow text truncation if needed */
}

.contact-info h4[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.contact-email[b-d2fckzg1tk] {
	margin: 4px 0 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.contact-role[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	background: var(--bg-secondary);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-top: 4px;
}

.contact-actions[b-d2fckzg1tk] {
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
}

/* Volunteer Items */
.volunteer-item[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--gray-100);
	transition: var(--transition-fast);
}

.volunteer-item:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
}

.volunteer-avatar[b-d2fckzg1tk] {
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	background: var(--success-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
	color: rgba(var(--white-rgb), 0.92);
}

.volunteer-info[b-d2fckzg1tk] {
	flex-grow: 1;
}

.volunteer-info h4[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

.volunteer-info p[b-d2fckzg1tk] {
	margin: var(--spacing-xs) 0 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.volunteer-hours[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	background: var(--bg-secondary);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-top: var(--spacing-xs);
}

.volunteer-status .status-badge[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	font-weight: var(--font-weight-medium);
}

.status-badge.active[b-d2fckzg1tk] {
	background: var(--success-color);
	color: var(--text-light);
}

.status-badge.inactive[b-d2fckzg1tk] {
	background: var(--gray-300);
	color: var(--text-muted);
}

/* Attendee Items */
.attendee-item[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--gray-100);
	transition: var(--transition-fast);
}

.attendee-item:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
}

.attendee-avatar[b-d2fckzg1tk] {
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	background: var(--info-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
	color: rgba(var(--white-rgb), 0.92);
}

.attendee-info[b-d2fckzg1tk] {
	flex-grow: 1;
}

.attendee-info h4[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

.attendee-info p[b-d2fckzg1tk] {
	margin: var(--spacing-xs) 0 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.attendee-rsvp[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	background: var(--bg-secondary);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-top: var(--spacing-xs);
}

.checked-in[b-d2fckzg1tk] {
	color: var(--success-color);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
}

/* Student Items */
.student-item[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--gray-100);
	transition: var(--transition-fast);
}

.student-item:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
}

.student-avatar[b-d2fckzg1tk] {
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	background: var(--warning-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
	color: rgba(var(--white-rgb), 0.92);
}

.student-info[b-d2fckzg1tk] {
	flex-grow: 1;
}

.student-info h4[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

.student-info p[b-d2fckzg1tk] {
	margin: var(--spacing-xs) 0 0 0;
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.student-contribution[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--success-color);
	font-weight: var(--font-weight-medium);
	background: var(--success-color-light);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-top: var(--spacing-xs);
}

.student-parent[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	margin-left: var(--spacing-md);
}

/* Tab Navigation */
.nav-tabs-custom[b-d2fckzg1tk] {
	border-bottom: 1px solid var(--gray-200);
}

.nav-tabs-custom .nav-link[b-d2fckzg1tk] {
	border: none;
	background: none;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: 0;
	transition: var(--transition-fast);
}

.nav-tabs-custom .nav-link:hover[b-d2fckzg1tk] {
	color: var(--primary-color);
	background: var(--bg-hover);
}

.nav-tabs-custom .nav-link.active[b-d2fckzg1tk] {
	color: var(--primary-color);
	background: var(--bg-primary);
	border-bottom: 2px solid var(--primary-color);
	font-weight: var(--font-weight-medium);
}

/* Activity header polish */
.activity-header[b-d2fckzg1tk] {
	background: var(--bg-primary);
	border-bottom: 1px solid var(--gray-200);
}

.activity-overview[b-d2fckzg1tk] {
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--gray-200);
}

.activity-overview-grid[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: var(--spacing-lg);
	align-items: start;
}

.activity-image-container[b-d2fckzg1tk] {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--bg-secondary);
	border: 2px solid var(--border-color);
}

.activity-image[b-d2fckzg1tk] {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.activity-image-placeholder[b-d2fckzg1tk] {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg,
			var(--primary-color),
			var(--primary-color-dark));
	color: var(--text-light);
	font-size: var(--font-size-2xl);
}

.activity-overview-details h3[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
}

.activity-overview-meta[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.meta-item[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
}

.meta-label[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--spacing-xs);
}

.meta-value[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
}

.progress-section[b-d2fckzg1tk] {
	margin-top: var(--spacing-md);
}

.progress-header[b-d2fckzg1tk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-sm);
}

.progress-amounts[b-d2fckzg1tk] {
	display: flex;
	gap: var(--spacing-lg);
	align-items: baseline;
}

.achieved-amount[b-d2fckzg1tk] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--success-color);
}

.goal-amount[b-d2fckzg1tk] {
	font-size: var(--font-size-md);
	color: var(--text-secondary);
}

.progress-percentage[b-d2fckzg1tk] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--success-color);
	background-color: var(--bg-light);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-md);
	border: 1px solid var(--gray-200);
	white-space: nowrap;
}

/* Progress percentage color states */
.progress-percentage.progress-low[b-d2fckzg1tk] {
	color: var(--danger-color);
	border-color: var(--danger-color);
}

.progress-percentage.progress-medium[b-d2fckzg1tk] {
	color: var(--warning-color);
	border-color: var(--warning-color);
}

.progress-percentage.progress-high[b-d2fckzg1tk] {
	color: var(--success-color);
	border-color: var(--success-color);
}

.animated-progress-bar[b-d2fckzg1tk] {
	width: 100%;
	height: 12px;
	background-color: var(--gray-200);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: none;
	border: none;
	margin-top: var(--spacing-xs);
}

.progress-fill[b-d2fckzg1tk] {
	height: 100%;
	background: var(--success-color);
	border-radius: var(--radius-lg);
	transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	min-width: 4px;
	/* Ensure visibility even for small percentages */
	box-shadow: none;
}

/* Progress fill color states */
.progress-fill.progress-low[b-d2fckzg1tk] {
	background: var(--danger-color);
}

.progress-fill.progress-medium[b-d2fckzg1tk] {
	background: var(--warning-color);
}

.progress-fill.progress-high[b-d2fckzg1tk] {
	background: var(--success-color);
}

.progress-fill[b-d2fckzg1tk]::after {
	/* Remove the shine animation for a cleaner look */
	display: none;
}

@keyframes progressShine-b-d2fckzg1tk {
	0% {
		left: -100%;
	}

	50% {
		left: 100%;
	}

	100% {
		left: 100%;
	}
}

.activity-actions-overview[b-d2fckzg1tk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-sm);
}

.edit-activity-btn[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--primary-color);
	color: var(--text-light);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: var(--transition-all);
}

.edit-activity-btn:hover[b-d2fckzg1tk] {
	background: var(--primary-color-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

/* Notes button per style guide: white bg, black text, blue stroke; hover to primary bg with white text */
.notes-button[b-d2fckzg1tk] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--text-light);
	/* white */
	color: var(--text-primary);
	/* black-ish */
	border: 1px solid var(--primary-color);
	/* blue stroke */
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		transform 120ms ease,
		box-shadow 180ms ease;
}

.notes-button i[b-d2fckzg1tk] {
	color: inherit;
}

.notes-button:hover[b-d2fckzg1tk] {
	background: var(--primary-color);
	color: var(--text-light);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary-color-dark);
}

.coordinator-section[b-d2fckzg1tk] {
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--bg-light);
	border-bottom: 1px solid var(--gray-200);
}

.coordinator-caption[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.coordinator-card[b-d2fckzg1tk] {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
}

.coordinator-avatar[b-d2fckzg1tk] {
	width: var(--spacing-3xl);
	height: var(--spacing-3xl);
	border-radius: var(--radius-full);
	background: var(--gradient-card);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	flex-shrink: 0;
}

.coordinator-details[b-d2fckzg1tk] {
	flex-grow: 1;
	min-width: 0;
}

.coordinator-details h4[b-d2fckzg1tk] {
	margin: 0 0 var(--spacing-xs) 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.coordinator-contact[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
}

.coordinator-contact span[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

/* Coordinator Dates - Right aligned with circular icon container */
.coordinator-dates[b-d2fckzg1tk] {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	margin-left: auto;
	min-width: 220px;
	flex-shrink: 0;
}

.dates-icon-container[b-d2fckzg1tk] {
	width: var(--spacing-3xl);
	height: var(--spacing-3xl);
	border-radius: var(--radius-full);
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
}

.dates-icon-container i[b-d2fckzg1tk] {
	color: var(--text-light);
	font-size: var(--font-size-lg);
}

.dates-content[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	width: 100%;
	margin-left: 0;
}

.dates-details[b-d2fckzg1tk] {
	flex-grow: 1;
	min-width: 0;
}

.dates-details h4[b-d2fckzg1tk] {
	margin: 0 0 var(--spacing-xs) 0;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.dates-contact[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
}

.dates-heading[b-d2fckzg1tk] {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 var(--spacing-xs) 0;
	text-align: left;
	line-height: 1.2;
}

.dates-row[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xxs);
	margin-top: 0;
}

.date-item[b-d2fckzg1tk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xxs);
}

.date-label[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	font-weight: var(--font-weight-medium);
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: 0;
	text-align: left;
	min-width: 60px;
}

.date-value[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	font-weight: var(--font-weight-medium);
	text-align: right;
	margin-left: var(--spacing-sm);
}

/* Activity Status Toggle Section */
.activity-status-section[b-d2fckzg1tk] {
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-md) 0;
}

.activity-status-header[b-d2fckzg1tk] {
	margin-bottom: var(--spacing-sm);
	color: var(--text-primary);
}

.status-label[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
}

.status-toggle-container[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.status-text[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.status-text.active[b-d2fckzg1tk] {
	color: var(--success-color);
}

.status-text.inactive[b-d2fckzg1tk] {
	color: var(--text-muted);
}

/* Status warning message styling */
.status-warning[b-d2fckzg1tk] {
	background-color: var(--warning-bg);
	border: 1px solid var(--warning-border);
	color: var(--warning-text);
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	margin-top: var(--spacing-sm);
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

/* Integration styling for the Switch component in Activities */
.activity-status-switch[b-d2fckzg1tk] {
	/* Ensure the switch scales appropriately within the status container */
	flex-shrink: 0;
}

/* Apply success color and custom sizing to the activity status switch */
:global(.switch.activity-status-switch .slider.large)[b-d2fckzg1tk] {
	--switch-color-checked: var(--success-color) !important;
	/* Custom size - SIGNIFICANTLY smaller for testing - should be very noticeable */
	--switch-width: calc(var(--spacing-xl) + var(--spacing-sm)) !important;
	/* 32px + 8px = 40px (much smaller than 72px large) */
	--switch-height: calc(var(--spacing-lg) + var(--spacing-xs)) !important;
	/* 24px + 4px = 28px (much smaller than 40px large) */
	--toggle-diameter: calc(var(--spacing-md) + var(--spacing-xs)) !important;
	/* 16px + 4px = 20px (much smaller than 36px large) */
	--toggle-wider: calc(var(--spacing-xl) + var(--spacing-xs)) !important;
	/* 32px + 4px = 36px (much smaller than 64px large) */
}

/* Status Toggle in Activity Actions Overview */
.activity-actions-overview .status-toggle-container[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	/* Increased gap for better spacing with larger switch */
}

.activity-actions-overview .status-text[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	min-width: fit-content;
}

/* Forms Panel Styles */
.forms-tab-nav[b-d2fckzg1tk] {
	display: flex;
	border-bottom: 1px solid var(--gray-200);
	background: var(--bg-light);
}

.forms-tab-nav .nav-link[b-d2fckzg1tk] {
	flex: 1;
	text-align: center;
	padding: var(--spacing-sm);
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
	cursor: pointer;
	transition: var(--transition-fast);
}

.forms-tab-nav .nav-link.active[b-d2fckzg1tk] {
	background: var(--primary-color);
	color: var(--text-light);
	font-weight: var(--font-weight-medium);
	border-radius: 5px;
}

.forms-tab-nav .nav-link:hover:not(.active)[b-d2fckzg1tk] {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.forms-tab-content[b-d2fckzg1tk] {
	/* padding: var(--spacing-sm); */
	text-align: center;
}

.form-placeholder[b-d2fckzg1tk] {
	padding: var(--spacing-lg);
	color: var(--text-muted);
}

.copy-link-section[b-d2fckzg1tk] {
	display: flex;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

.copy-link-input[b-d2fckzg1tk] {
	flex: 1;
	padding: var(--spacing-sm);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
	background: var(--bg-light);
	color: var(--text-muted);
}

.copy-link-btn[b-d2fckzg1tk] {
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--primary-color);
	color: var(--text-light);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
	cursor: pointer;
	transition: var(--transition-all);
}

.copy-link-btn:hover[b-d2fckzg1tk] {
	background: var(--primary-color-dark);
}

/* Forms Inactive Notice */
.forms-inactive-notice[b-d2fckzg1tk] {
	text-align: center;
	padding: var(--spacing-xl) var(--spacing-lg);
	color: var(--text-muted);
}

.forms-inactive-notice i[b-d2fckzg1tk] {
	font-size: 2.5rem;
	color: var(--warning-color);
}

.forms-inactive-notice h6[b-d2fckzg1tk] {
	margin: var(--spacing-md) 0 var(--spacing-sm) 0;
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
}

.forms-inactive-notice p[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-sm);

	/* Visual styling for disabled floating action buttons in the forms preview */
	.frame-viewport+.position-absolute .btn[disabled],
	.position-absolute .btn[disabled] {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
		/* ensure click is ignored */
		box-shadow: none;
	}
}
.activity-meta .color-dot[b-d2fckzg1tk] {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.bg-success-subtle[b-d2fckzg1tk] {
	background-color: var(--success-subtle);
}

.bg-warning-subtle[b-d2fckzg1tk] {
	background-color: var(--warning-subtle);
}

.bg-secondary-subtle[b-d2fckzg1tk] {
	background-color: var(--secondary-subtle);
}

/* Activity Status Badge Styling */
.activity-item .badge.small[b-d2fckzg1tk] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	letter-spacing: 0.3px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xxs);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Compact badge styling with reduced width */
.activity-item .badge.activity-badge[b-d2fckzg1tk] {
	font-size: 0.6rem;
	padding: 0.15rem 0.5rem;
	min-width: 58px;
	max-width: 75px;
	text-align: center;
	border-radius: var(--radius-sm);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	display: inline-block;
	line-height: 1.2;
	flex-shrink: 0;
}

.activity-item .badge.bg-success-subtle[b-d2fckzg1tk] {
	background-color: var(--success-subtle);
	color: var(--success-color);
	border: 1px solid var(--success-border);
}

.activity-item .badge.bg-secondary-subtle[b-d2fckzg1tk] {
	background-color: var(--secondary-subtle);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
}

.activity-item .badge.bg-info-subtle[b-d2fckzg1tk] {
	background-color: var(--info-subtle);
	color: var(--info-color);
	border: 1px solid var(--border-color);
}

.activity-item .badge.bg-warning-subtle[b-d2fckzg1tk] {
	background-color: var(--warning-subtle);
	color: var(--warning-color);
	border: 1px solid var(--warning-border);
}

/* ========================================
   ACTIVITY MODAL DIALOGUE STYLES
   ======================================== */

.modal-overlay[b-d2fckzg1tk] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--overlay-dark);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: var(--z-modal-backdrop);
	padding: var(--spacing-md);
	box-sizing: border-box;
}

.modal-content[b-d2fckzg1tk] {
	background: var(--bg-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	max-width: 650px;
	width: 90%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	transform: scale(1) translateY(0);
	transition:
		transform var(--transition-normal),
		opacity var(--transition-normal);
	border: 1px solid var(--gray-200);
	overflow: hidden;
	animation: modalSlideIn-b-d2fckzg1tk var(--transition-normal) ease-out;
}

.modal-header[b-d2fckzg1tk] {
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--gray-200);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg,
			var(--primary-color),
			var(--primary-color-dark));
	color: var(--text-light);
	position: relative;
}

.modal-header[b-d2fckzg1tk]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg,
			var(--overlay-light),
			var(--overlay-hover-light));
	pointer-events: none;
}

.modal-header h3[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}

.modal-header h3[b-d2fckzg1tk]::before {
	content: "📝";
	margin-right: var(--spacing-sm);
	font-size: var(--font-size-lg);
}

.btn-close[b-d2fckzg1tk] {
	background: transparent;
	border: none;
	color: var(--text-light);
	font-size: var(--font-size-lg);
	cursor: pointer;
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 1;
}

.btn-close:hover[b-d2fckzg1tk] {
	background-color: var(--overlay-hover-light);
	transform: scale(1.05);
}

.btn-close:active[b-d2fckzg1tk] {
	transform: scale(0.95);
}

.modal-body[b-d2fckzg1tk] {
	padding: var(--spacing-lg);
	overflow-y: auto;
	flex: 1;
	background-color: var(--bg-primary);
}

.modal-actions[b-d2fckzg1tk] {
	padding: var(--spacing-md) var(--spacing-lg);
	border-top: 1px solid var(--gray-200);
	display: flex;
	gap: var(--spacing-sm);
	justify-content: flex-end;
	background-color: var(--bg-secondary);
}

/* Form Styling for Modal */
.modal-body .form-group[b-d2fckzg1tk] {
	margin-bottom: var(--spacing-md);
}

.modal-body .form-row[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.modal-body label[b-d2fckzg1tk] {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
}

.modal-body .form-control[b-d2fckzg1tk],
.modal-body .form-select[b-d2fckzg1tk] {
	width: 100%;
	padding: var(--spacing-sm);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	background-color: var(--bg-primary);
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.modal-body .form-control:focus[b-d2fckzg1tk],
.modal-body .form-select:focus[b-d2fckzg1tk] {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
}

.modal-body textarea.form-control[b-d2fckzg1tk] {
	resize: vertical;
	min-height: 100px;
}

/* Button Styling */
.modal-actions .btn[b-d2fckzg1tk] {
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-fast);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.modal-actions .btn-primary[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color),
			var(--primary-color-dark));
	color: var(--text-light);
}

.modal-actions .btn-primary:hover:not(:disabled)[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color-dark),
			var(--primary-color));
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

.modal-actions .btn-primary:disabled[b-d2fckzg1tk] {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

.modal-actions .btn-secondary[b-d2fckzg1tk] {
	background-color: var(--gray-600);
	color: var(--text-light);
	border: 1px solid var(--gray-500);
}

.modal-actions .btn-secondary:hover:not(:disabled)[b-d2fckzg1tk] {
	background-color: var(--gray-700);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

/* Loading Spinner */
.modal-actions .fa-spinner[b-d2fckzg1tk] {
	animation: spin-b-d2fckzg1tk 1s linear infinite;
}

@keyframes spin-b-d2fckzg1tk {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Responsive Design */
@media (max-width: 768px) {
	.modal-content[b-d2fckzg1tk] {
		width: 95%;
		margin: var(--spacing-md);
		max-height: 95vh;
	}

	.modal-header[b-d2fckzg1tk],
	.modal-body[b-d2fckzg1tk],
	.modal-actions[b-d2fckzg1tk] {
		padding: var(--spacing-md);
	}

	.modal-body .form-row[b-d2fckzg1tk] {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	.modal-actions[b-d2fckzg1tk] {
		flex-direction: column-reverse;
		gap: var(--spacing-sm);
	}

	.modal-actions .btn[b-d2fckzg1tk] {
		width: 100%;
		justify-content: center;
	}
	.modal-content[b-d2fckzg1tk] {
		width: 98%;
		margin: var(--spacing-sm);
	}

	.modal-header h3[b-d2fckzg1tk] {
		font-size: var(--font-size-lg);
	}
}

/* Enhanced Animation */
@media (prefers-reduced-motion: no-preference) {
	.modal-overlay[b-d2fckzg1tk] {
		animation: modalFadeIn-b-d2fckzg1tk var(--transition-normal) ease-out;
	}

	.modal-content[b-d2fckzg1tk] {
		animation: modalSlideIn-b-d2fckzg1tk var(--transition-normal) ease-out;
	}
}

/* Donation preview frame and floating action button styles */
.donation-preview-frame .frame-viewport[b-d2fckzg1tk] {
	min-height: 320px;
	max-height: 520px;
	background-color: var(--bg-card, #ffffff);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-md, 0 2px 6px rgba(0, 0, 0, 0.08));
	overflow: hidden;
}

.donation-preview-frame .frame-viewport>div[b-d2fckzg1tk] {
	/* ensure the internal container fills the viewport for consistent sizing */
	height: 100%;
	width: 100%;
}

.donation-preview-frame .position-absolute>.btn[b-d2fckzg1tk] {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

/* Slightly offset the floating buttons for better alignment */
.donation-preview-frame .position-absolute[b-d2fckzg1tk] {
	right: 14px;
}

/* Responsive tweak: stack buttons horizontally on narrow screens */
@media (max-width: 768px) {
	.donation-preview-frame .position-absolute[b-d2fckzg1tk] {
		top: auto;
		bottom: 12px;
		right: 12px;
		transform: none;
		flex-direction: row;
	}

	.donation-preview-frame .position-absolute>.btn[b-d2fckzg1tk] {
		width: 36px;
		height: 36px;
	}
}

@keyframes modalFadeIn-b-d2fckzg1tk {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes modalSlideIn-b-d2fckzg1tk {
	from {
		transform: scale(0.9) translateY(-30px);
		opacity: 0;
	}

	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

/* Attendees Tab Styling */
.attendees-tab-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	/* gap: var(--spacing-md); */
	overflow: visible;
}

/* Force transparent backgrounds within attendees area to remove grey panels,
   but allow attendee badges to retain their background color */
.attendees-tab-container *:not(.attendee-type-badge)[b-d2fckzg1tk] {
	background-color: transparent !important;
	box-shadow: none !important;
	/* margin-bottom: 3px !important; */
}

/* But keep structural borders where helpful */
.attendees-tab-container .card[b-d2fckzg1tk],
.attendees-tab-container .card-body[b-d2fckzg1tk],
.attendees-tab-container .card-footer[b-d2fckzg1tk] {
	background-color: transparent !important;
	box-shadow: none !important;
}

.attendees-actions-bottom[b-d2fckzg1tk] {
	display: flex;
	justify-content: flex-start;
	padding: var(--spacing-md) 0;
	margin-top: var(--spacing-sm);
}

.attendees-actions-bottom .btn[b-d2fckzg1tk] {
	min-width: 150px;
}

/* Top actions bar for attendees (Send Email) */
.attendees-actions-bar[b-d2fckzg1tk] {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-md);
}

.attendees-actions-bar .btn.btn-primary[b-d2fckzg1tk] {
	background: linear-gradient(135deg,
			var(--primary-color),
			var(--primary-color-dark));
	border: none;
	color: var(--text-light);
}

.attendees-list-table[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	width: 100%;
	margin-top: var(--spacing-sm);
	/* make the attendees list stretch and become scrollable inside the tab */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: var(--spacing-12);
	/* small padding so the last card isn't flush with footer */
	box-sizing: border-box;
	padding-left: var(--spacing-sm) !important;
}

.attendees-table-header[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 35px 2fr 2fr 1fr;
	gap: var(--gap-10);
	padding: var(--spacing-12) var(--spacing-20);
	padding-right: var(--spacing-32);
	/* compensate for vertical scrollbar in the rows so columns align */
	background-color: transparent;
	font-weight: 600;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	align-items: center;
	padding-left: var(--spacing-32) !important;
}

/* Ensure header cells align their content the same way rows do */
.attendees-table-header .attendee-checkbox-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.attendees-table-header .attendee-name-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.attendees-table-header .attendee-email-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.attendees-table-header .attendee-date-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 50px !important;
}

.attendees-table-row[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 35px 2fr 2fr 1fr;
	/* match header columns exactly (narrower date column) */
	gap: var(--gap-10);
	align-items: center;
	padding: var(--spacing-12) var(--spacing-20);
	/* match header padding */
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: all 0.12s ease;
	margin-bottom: var(--spacing-xxs) !important;
}

/* Column helpers for grid-based rows */
.attendees-table-row .attendee-checkbox-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.attendees-table-row .attendee-name-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-10);
	min-width: 0;
}

.attendees-table-row .attendee-email-col[b-d2fckzg1tk] {
	min-width: 0;
}

.attendees-table-row .attendee-date-col[b-d2fckzg1tk] {
	text-align: right;
	padding-right: 60px !important;
}

/* Ensure header and row cell text alignment matches exactly */
.attendees-table-header .attendee-name-col[b-d2fckzg1tk],
.attendees-table-row .attendee-name-col[b-d2fckzg1tk] {
	text-align: left;
}

.attendees-table-header .attendee-email-col[b-d2fckzg1tk],
.attendees-table-row .attendee-email-col[b-d2fckzg1tk] {
	text-align: left;
}

/* Make the date column align to the end of its grid cell in both header and rows */
.attendees-table-header .attendee-date-col[b-d2fckzg1tk],
.attendees-table-row .attendee-date-col[b-d2fckzg1tk] {
	justify-self: end;
	text-align: right;
}

/* Remove any default checkbox margins and ensure centered position */
.attendees-table-header .attendee-checkbox-col input[type="checkbox"][b-d2fckzg1tk],
.attendees-table-row .attendee-checkbox-col input[type="checkbox"][b-d2fckzg1tk] {
	margin: 0;
	display: block;
}

/* Keep header date aligned to the right with slight padding */
.attendees-table-header .attendee-date-col[b-d2fckzg1tk] {
	padding-right: 20px;
	text-align: right;
}


.attendees-table-row .attendee-name[b-d2fckzg1tk] {
	transition: color 0.15s ease;
}

.attendee-checkbox-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 0;
}

.attendee-checkbox-col input[type="checkbox"][b-d2fckzg1tk] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* border: 1px solid var(--border-color); */
	border-radius: 4px;
	background-color: transparent;
	display: inline-block;
	vertical-align: middle;
	transition: all 0.12s ease;
}

/* Header checkbox needs a small vertical tweak to perfectly align with row checkboxes */
.attendees-table-header .attendee-checkbox-col input[type="checkbox"][b-d2fckzg1tk] {
	position: relative;
	top: 1px;
	/* nudge down; reduce to 1px or 0px if too low */
}

/* Registered Date header alignment (rows are right-aligned by grid helpers) */
.attendees-table-header .attendee-date-col[b-d2fckzg1tk] {
	text-align: left;
}

.attendee-checkbox-col input[type="checkbox"]:checked[b-d2fckzg1tk] {
	background-color: var(--success-color) !important;
	border-color: var(--success-color) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path fill=%22%23ffffff%22 d=%22M20.285 6.709a1 1 0 00-1.414-1.418L9 15.163l-3.871-3.87a1 1 0 10-1.415 1.414l4.578 4.578a1 1 0 001.414 0L20.285 6.71z%22/></svg>") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 12px 12px !important;
}

.attendee-checkbox-col input[type="checkbox"]:focus[b-d2fckzg1tk] {
	outline: none;
	box-shadow: 0 0 0 4px var(--success-subtle);
	border-color: var(--success-color);
}

.attendee-name-col[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-10);
}

.attendee-name[b-d2fckzg1tk] {
	font-weight: 500;
	color: var(--text-primary);
	/* dark primary text to remain readable on white */
	font-size: 14px;
	transition: color 0.15s ease;
}

/* Make attendees row text (name, email, registered date) match Top Donors/Recent Donations row styles */
.attendees-list-table .attendees-table-row .attendee-name[b-d2fckzg1tk] {
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-regular, 400);
	color: var(--text-primary, #212529) !important;
}

.attendees-list-table .attendees-table-row .attendee-email-col[b-d2fckzg1tk] {
	font-size: var(--font-size-base, 1rem);
	color: var(--text-primary, #212529) !important;
	font-weight: var(--font-weight-regular, 400);
	margin-left: var(--spacing-6) !important;
}

.attendees-list-table .attendees-table-row .attendee-date-col[b-d2fckzg1tk] {
	font-size: var(--font-size-base, 1rem);
	color: var(--text-primary, #212529) !important;
	font-weight: var(--font-weight-regular, 400);
}

/* Avatar for attendee rows to match contact avatars */
.attendee-row-left .avatar-circle[b-d2fckzg1tk],
.attendees-list-table .avatar-circle[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: rgba(var(--white-rgb), 0.85);
	text-transform: uppercase;
	font-size: 0.98rem;
}

/* Fallback background for attendees avatars */
.attendees-table-row .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-blue);
}

/* Use same gradient cycling as associated contacts and recent donations for visual consistency */
.attendees-list-table .attendees-table-row:nth-child(6n + 1) .avatar-circle[b-d2fckzg1tk] {
	background: var(--accent-color) !important;
}

.attendees-list-table .attendees-table-row:nth-child(6n + 2) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-blue) !important;
}

.attendees-list-table .attendees-table-row:nth-child(6n + 3) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-green) !important;
}

.attendees-list-table .attendees-table-row:nth-child(6n + 4) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-purple) !important;
}

.attendees-list-table .attendees-table-row:nth-child(6n + 5) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-red) !important;
}

.attendees-list-table .attendees-table-row:nth-child(6n + 6) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-orange) !important;
}

.attendee-email[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.attendee-date-col[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: right;
}

.attendee-type-badge[b-d2fckzg1tk] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xs) var(--spacing-10);
	border-radius: var(--pill-border-radius);
	font-size: var(--badge-font-size);
	font-weight: 600;
	background-color: rgba(var(--metric-blue), 0.1);
	/* light blue fill */
	color: var(--slate-900);
	/* dark text for contrast */
	margin-top: 6px;
	line-height: 1;
	/* prevent badge from stretching in the flex column */
	align-self: flex-start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: var(--badge-max-width);
	border: 1px solid rgba(var(--metric-blue), 0.16);
}

/* Copy of Volunteers' email-contacts-button styles so Attendees Email matches behavior */
.attendees-actions-bar .email-contacts-button[b-d2fckzg1tk],
.email-contacts-button[b-d2fckzg1tk] {
	background: var(--primary-color) !important;
	border: 1px solid var(--primary-color);
	height: var(--btn-height-fixed);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border-radius: var(--btn-border-radius);
	min-width: auto;
	white-space: nowrap;
	font-weight: var(--font-weight-medium, 500);
	font-size: var(--font-size-md, 14px);
	color: var(--text-light) !important;
	transition: var(--transition-fast);
	box-shadow: var(--shadow-sm);
}

.attendees-actions-bar .email-contacts-button:hover:not(:disabled)[b-d2fckzg1tk],
.attendees-actions-bar .email-contacts-button:focus:not(:disabled)[b-d2fckzg1tk],
.attendees-actions-bar .email-contacts-button:active:not(:disabled)[b-d2fckzg1tk],
.email-contacts-button:hover:not(:disabled)[b-d2fckzg1tk],
.email-contacts-button:focus:not(:disabled)[b-d2fckzg1tk],
.email-contacts-button:active:not(:disabled)[b-d2fckzg1tk] {
	background-color: var(--primary-color-dark) !important;
	color: var(--text-light) !important;
	border-color: var(--border-hover) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	opacity: 1 !important;
}

.attendees-actions-bar .email-contacts-button:disabled[b-d2fckzg1tk],
.email-contacts-button:disabled[b-d2fckzg1tk] {
	background: var(--primary-color) !important;
	color: var(--text-light) !important;
	border-color: var(--border-disabled);
	opacity: 0.5;
	cursor: not-allowed;
}

.attendees-actions-bar .email-contacts-button:focus[b-d2fckzg1tk],
.attendees-actions-bar .email-contacts-button:active[b-d2fckzg1tk],
.email-contacts-button:focus[b-d2fckzg1tk],
.email-contacts-button:active[b-d2fckzg1tk] {
	box-shadow: none !important;
	transform: none !important;
	outline: none !important;
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
}

/* High specificity fallbacks to ensure consistent hover across contexts */
.attendees-actions-bar button.email-contacts-button:hover[b-d2fckzg1tk],
.attendees-actions-bar button.email-contacts-button:focus[b-d2fckzg1tk],
.attendees-actions-bar button.email-contacts-button:active[b-d2fckzg1tk],
button.btn.email-contacts-button:hover[b-d2fckzg1tk],
button.btn.email-contacts-button:focus[b-d2fckzg1tk],
button.btn.email-contacts-button:active[b-d2fckzg1tk] {
	background-color: var(--primary-color-dark) !important;
	border-color: var(--border-hover) !important;
	color: var(--text-light) !important;
	box-shadow: var(--shadow-hover) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

/* Ensure icon inside email button matches Volunteers: same size & vertically centered */
.email-contacts-button i[b-d2fckzg1tk],
.attendees-actions-bar .email-contacts-button i[b-d2fckzg1tk] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-md, 14px);
	line-height: 1;
	margin-top: 0;
}

/* Both individual and organization use the same filled badge style */
/* Variant fills */
.attendee-type-badge.individual[b-d2fckzg1tk] {
	background-color: rgba(var(--metric-blue), 0.12);
	/* light blue */
	border-color: rgba(var(--metric-blue), 0.18);
	color: var(--blue-700);
	/* dark blue text */
}

.attendee-type-badge.organization[b-d2fckzg1tk] {
	background-color: rgba(var(--metric-purple), 0.12);
	/* light purple */
	border-color: rgba(var(--metric-purple), 0.18);
	color: var(--purple-600);
	/* dark purple text */
}

/* Ensure any accidental progress bar elements inside the attendees list are hidden */
.attendees-list-table .progress-fill[b-d2fckzg1tk],
.attendees-list-table .animated-progress-bar[b-d2fckzg1tk],
.attendees-list-table .progress-section[b-d2fckzg1tk] {
	display: none !important;
}

.pagination-controls[b-d2fckzg1tk] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) 0;
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-xl);
	position: relative;
	z-index: 10;
	min-height: 50px;
}

.pagination-controls button[b-d2fckzg1tk] {
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--border-color);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: var(--font-size-sm);
	font-weight: 500;
}

.pagination-controls button:hover:not(:disabled)[b-d2fckzg1tk] {
	background-color: var(--gray-50);
	border-color: var(--gray-300);
}

.pagination-controls button:disabled[b-d2fckzg1tk] {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-controls span[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

/* Move attendees pagination controls to the right side */
.attendees-tab-container .card-footer .pagination-controls[b-d2fckzg1tk] {
	margin-left: auto !important;
	justify-content: flex-end !important;
}

/* Smaller font size for pagination page numbers */
.attendees-tab-container .pagination-controls .btn[b-d2fckzg1tk] {
	font-size: var(--font-size-xs) !important;
}

/* ===== Contacts Table Styling ===== */
.associated-contacts-table[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	/* extra bottom padding so the last contact card is fully visible even when the page container
	   or an overlapping footer is present */
	box-sizing: border-box;
	padding-left: var(--spacing-10) !important;
}

/* Contacts pagination - mirror attendees layout and alignment */
.contacts-tab-container .card-footer .pagination-controls[b-d2fckzg1tk] {
	margin-left: auto !important;
	justify-content: flex-end !important;
}

.contacts-tab-container .pagination-controls .btn[b-d2fckzg1tk] {
	font-size: var(--font-size-xs) !important;
}

/* Stronger overrides in case generic .pagination-controls rules are applied later */
.tab-content-container .contacts-tab-container .card-footer[b-d2fckzg1tk] {
	display: flex !important;
	align-items: center !important;
	gap: var(--spacing-sm) !important;
}

.tab-content-container .contacts-tab-container .card-footer .text-xs[b-d2fckzg1tk] {
	flex: 0 0 auto !important;
}

.tab-content-container .contacts-tab-container .card-footer .pagination-controls[b-d2fckzg1tk] {
	margin-left: auto !important;
	justify-content: flex-end !important;
	width: auto !important;
}

/* Reduce the large gap between the last contact card and the footer specifically for contacts */
.contacts-tab-container[b-d2fckzg1tk] {
	/* Make the contacts tab a column layout so the list can scroll while the footer stays fixed */
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* allow flex children to shrink properly */
	height: 100%;
	position: relative;
	/* create containing block for sticky/absolute footer */
}

.contacts-tab-container .associated-contacts-table[b-d2fckzg1tk] {
	/* Let the contacts list grow and scroll inside the tab */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	box-sizing: border-box;
	/* leave small bottom padding so the last contact card is fully visible above the footer */
	padding-bottom: 12px !important;
	margin-bottom: 0 !important;
}

.contacts-tab-container .associated-contact-card[b-d2fckzg1tk] {
	margin-bottom: 8px !important;
	/* slightly smaller spacing between cards */
}

.contacts-footer-outer[b-d2fckzg1tk] {
	flex: 0 0 auto;
	background-color: var(--bg-light);
	border-top: 1px solid var(--border-light) !important;
	width: 100%;
}

/* compact row inside the footer-outer to match appearance of the left panel */
.contacts-footer-outer .contacts-footer-row[b-d2fckzg1tk] {
	height: 36px;
	padding: var(--spacing-6) var(--spacing-10);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Align the showing text to the left inside the contacts footer so it lines up with left panel */
.contacts-footer-outer .text-xs[b-d2fckzg1tk] {
	margin-left: var(--spacing-sm);
}

/* Donor name header row */
.contacts-simple-header[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
	padding: 8px 0;
	margin: 0;
}

.contacts-simple-header .form-check-input[b-d2fckzg1tk] {
	width: 18px;
	height: 18px;
	border: 2px solid var(--input-border-variant, #d1d5db);
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all 0.2s ease;
	margin-right: 25px !important;
	margin: 0;
	justify-content: center;
}

.contacts-simple-header .form-check-input:checked[b-d2fckzg1tk] {
	background-color: var(--primary-color, #2563eb);
	border-color: var(--primary-color, #2563eb);
}

.contacts-simple-header .form-check-input:focus[b-d2fckzg1tk] {
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.1);
	border-color: var(--primary-color, #2563eb);
}

.contacts-simple-header .form-check-input:hover:not(:checked)[b-d2fckzg1tk] {
	border-color: var(--primary-color, #2563eb);
}

.header-label-text[b-d2fckzg1tk] {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium, 500);
}

/* Email button styling */
.email-contacts-button[b-d2fckzg1tk] {
	background: var(--primary-light, #d4e9fc);
	color: var(--primary-color, #1976d2);
	border: 1px solid var(--primary-light, #d4e9fc);
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	border-radius: var(--btn-border-radius);
	min-width: auto;
	white-space: nowrap;
	font-weight: var(--font-weight-medium, 500);
	font-size: var(--font-size-md, 14px);
	transition: var(--transition-fast);
}

.email-contacts-button:hover:not(:disabled)[b-d2fckzg1tk] {
	background: var(--primary-color, #2563eb);
	color: var(--text-light);
	border-color: var(--primary-color, #2563eb);
}

.email-contacts-button:disabled[b-d2fckzg1tk] {
	background: var(--bg-disabled, #e8f0f7);
	color: var(--text-muted, #a0b8cc);
	border-color: var(--bg-disabled, #e8f0f7);
	opacity: 0.7;
	cursor: not-allowed;
}

/* Volunteers Table Grid Layout */
.volunteers-table-header[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 40px 1fr 1.2fr 0.8fr 0.6fr 100px;
	gap: var(--spacing-md);
	padding: var(--spacing-xs) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-semibold, 600);
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--text-secondary);
}

.volunteers-table-header .header-checkbox[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.volunteers-table-header .header-checkbox .form-check-input[b-d2fckzg1tk] {
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-muted, #d1d5db);
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all 0.2s ease;
	margin: 0;
}

.volunteers-table-header .header-checkbox .form-check-input:checked[b-d2fckzg1tk] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.volunteers-table-header .header-checkbox .form-check-input:focus[b-d2fckzg1tk] {
	outline: none;
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

.volunteers-table-header .header-col-action[b-d2fckzg1tk] {
	text-align: right;
}

.volunteers-table-body[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
}

.volunteers-row[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 40px 1fr 1.2fr 0.8fr 0.6fr 100px;
	gap: var(--spacing-md);
	align-items: center;
	padding: var(--spacing-md) var(--spacing-md);
	min-height: 72px;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
	margin-bottom: 3px !important;
}

.volunteers-row:hover[b-d2fckzg1tk] {
	box-shadow: var(--shadow-sm);
}

.volunteers-row.row-selected[b-d2fckzg1tk] {
	background: transparent;
	border-color: var(--border-color);
}

.vol-checkbox[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vol-checkbox .form-check-input[b-d2fckzg1tk] {
	width: var(--checkbox-size, 18px);
	height: var(--checkbox-size, 18px);
	border: 2px solid var(--input-border-variant, var(--gray-300));
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all var(--transition-quick, 0.2s) ease;
	margin: 0;
}

.vol-checkbox .form-check-input:checked[b-d2fckzg1tk] {
	background-color: var(--primary-color, #2563eb);
	border-color: var(--primary-color, #2563eb);
}

.vol-checkbox .form-check-input:focus[b-d2fckzg1tk] {
	outline: none;
	box-shadow: none;
}

.vol-name[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-weight: var(--font-weight-medium, 500);
}

.vol-name .avatar-circle[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	flex-shrink: 0;
}

.vol-email[b-d2fckzg1tk] {
	color: var(--text-primary);
	font-size: var(--font-size-base, 1rem);
}

.vol-date[b-d2fckzg1tk] {
	color: var(--text-secondary);
	font-size: var(--font-size-sm, 0.9rem);
}

.vol-status[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
}

.vol-action[b-d2fckzg1tk] {
	display: flex;
	justify-content: flex-end;
}

.associated-contact-card[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-md);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
}

.card-checkbox[b-d2fckzg1tk] {
	width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.card-checkbox .form-check-input[b-d2fckzg1tk] {
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	border: 2px solid var(--input-border-variant, #d1d5db);
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: all 0.2s ease;
	margin: 0;
}

.card-checkbox .form-check-input:checked[b-d2fckzg1tk] {
	background-color: var(--success-color);
	border-color: var(--success-color);
}

.card-checkbox .form-check-input:focus[b-d2fckzg1tk] {
	box-shadow: 0 0 0 3px var(--success-subtle);
	border-color: var(--success-color);
}

.card-checkbox .form-check-input:hover:not(:checked)[b-d2fckzg1tk] {
	border-color: var(--primary-color, #2563eb);
}

.associated-contact-card .card-left[b-d2fckzg1tk] {
	display: flex;
	gap: var(--spacing-md);
	align-items: center;
	flex: 1;
}

.avatar-circle[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	text-transform: uppercase;
	font-size: 1rem;
}

/* Fallback flat background when specific nth-child color rules don't match
   This ensures avatars (e.g., attendees rendered as divs) always show a colored circle. */
.avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-blue);
}

/* Reuse gradient palette used previously */
.associated-contact-card:nth-child(6n + 1) .avatar-circle[b-d2fckzg1tk] {
	background: var(--accent-color);
}

.associated-contact-card:nth-child(6n + 2) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-blue);
}

.associated-contact-card:nth-child(6n + 3) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-green);
}

.associated-contact-card:nth-child(6n + 4) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-purple);
}

.associated-contact-card:nth-child(6n + 5) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-red);
}

.associated-contact-card:nth-child(6n + 6) .avatar-circle[b-d2fckzg1tk] {
	background: var(--metric-orange);
}

/* Make the contact main area a vertical flex container and center its contents
   so the donor name and donor-type align in the middle next to the avatar */
.contact-main[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-main .contact-name[b-d2fckzg1tk] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.contact-type-badge[b-d2fckzg1tk] {
    margin-left: calc(var(--spacing-xs) + 4px);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    background: var(--blue-bg-subtle);
    color: var(--blue-600);
    white-space: nowrap;
    max-width: fit-content;
    align-self: flex-start;
}

.contact-id[b-d2fckzg1tk] {
	/* Hide the ID from the UI as requested; keep the element for accessibility/data+
	   testing but don't show it visually */
	display: none;
}

.card-right[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	/* keep action buttons from growing/shrinking */
	flex: 0 0 auto;
}

/* Legacy associated-contacts-list support */
.associated-contacts-list[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-sm);
	padding-bottom: 40px;
	box-sizing: border-box;
}

/* ensure the last card isn't visually glued to the container edge */
/* .associated-contacts-list .associated-contact-card:last-child,
.associated-contacts-table .associated-contact-card:last-child {
	margin-bottom: 12px;
} */

.remove-associated[b-d2fckzg1tk] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: 17px;
	padding: var(--spacing-sm) var(--spacing-12);
	border-radius: var(--radius-sm);
	border: none;
	/* remove border */
	color: var(--danger-color);
	background: transparent;
	opacity: 0.75;
	/* slightly faded initially */
	transition:
		opacity 0.15s ease,
		color 0.15s ease,
		background 0.15s ease;
}

.remove-associated i[b-d2fckzg1tk] {
	color: inherit;
}

.remove-associated:hover[b-d2fckzg1tk] {
	/* On hover, highlight the text/icon to full opacity and keep background transparent */
	opacity: 1;
	color: var(--danger-color);
	background: transparent;
}

@media (max-width: 768px) {
	.associated-contact-card[b-d2fckzg1tk] {
		padding: var(--spacing-sm);
	}

	.avatar-circle[b-d2fckzg1tk] {
		width: var(--avatar-circle-sm);
		height: var(--avatar-circle-sm);
		font-size: 0.9rem;
	}
}

/* ===== Recent Donations Tab Styles ===== */
.recent-donations-table[b-d2fckzg1tk] {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
	/* remove bottom margin to avoid stray line; container has padding for breathing room */
	margin-bottom: 0;
}

.recent-donations-tab .tab-header[b-d2fckzg1tk] {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.recent-donations-tab .make-contribution-btn[b-d2fckzg1tk] {
	background-color: var(--primary-color);
	color: var(--text-light);
	border: none;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: var(--transition-all);
	box-shadow: var(--shadow-sm);
}

.recent-donations-tab .make-contribution-btn:hover:not(:disabled)[b-d2fckzg1tk] {
	background-color: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
}

.recent-donations-tab .make-contribution-btn:disabled[b-d2fckzg1tk] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ===== Attendees Grid Overrides =====
   These rules ensure proper alignment of checkboxes and names. */

.attendee-email-col[b-d2fckzg1tk] {
	color: var(--text-secondary);
	font-size: 14px;
	text-align: left;
}

.attendee-date-col[b-d2fckzg1tk] {
	color: var(--text-secondary);
	font-size: 14px;
	text-align: left;
}

.attendees-table-header .attendee-checkbox-col[b-d2fckzg1tk],
.attendees-table-header .attendee-name-col[b-d2fckzg1tk],
.attendees-table-header .attendee-email-col[b-d2fckzg1tk],
.attendees-table-header .attendee-date-col[b-d2fckzg1tk] {
	text-align: left;
}

.attendee-name[b-d2fckzg1tk] {
	font-weight: 500;
	color: var(--text-primary);
	font-size: 14px;
}

.attendees-table-row .avatar-circle[b-d2fckzg1tk],
.attendees-table-header .avatar-circle[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	font-size: 0.9rem;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: var(--font-weight-bold);
	color: rgba(var(--white-rgb), 0.95);
	text-transform: uppercase;
	flex-shrink: 0;
}

/* Recent Donations Table */
.recent-donations-table-container[b-d2fckzg1tk] {
	overflow-x: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	background-color: var(--bg-card);
	/* allow vertical scrolling inside the tab */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Make the recent donations tab a column so header stays on top and table scrolls */
.recent-donations-tab[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.recent-donations-table[b-d2fckzg1tk] {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
	/* make sure the table has a bottom margin inside the scroll container */
	margin-bottom: 20px;
}

.recent-donations-table thead[b-d2fckzg1tk] {
	background-color: var(--gray-100);
	border-bottom: 2px solid var(--gray-300);
}

.recent-donations-table thead th[b-d2fckzg1tk] {
	padding: var(--spacing-md);
	text-align: left;
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	white-space: nowrap;
}

/* Apply the same column header styling to all tables inside the activity details card
   so Top Donors, Attendees, Contacts table headers look identical to Recent Donations */
.activity-details-column .card .table thead th[b-d2fckzg1tk],
.activity-details-column .card table.recent-donations-table thead th[b-d2fckzg1tk] {
	padding: var(--spacing-md);
	text-align: left;
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	white-space: nowrap;
}

/* Top Donors header row (div-based) */
.activity-details-column .card .top-donors-header .col[b-d2fckzg1tk],
.activity-details-column .card[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	/* match Recent Donations column header color */
	font-weight: var(--font-weight-semibold);
}

/* Attendees header (div-based) */
.activity-details-column .card .attendees-table-header>div[b-d2fckzg1tk],
.activity-details-column .card[b-d2fckzg1tk] {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
}

/* .recent-donations-table tbody tr {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: all 0.12s ease;
	margin-bottom: 12px;
	display: block;
} */

.recent-donations-table tbody tr:hover[b-d2fckzg1tk] {
	background-color: var(--bg-hover);
}

.recent-donations-table tbody tr:last-child[b-d2fckzg1tk] {
	border-bottom: none;
}

.recent-donations-table tbody td[b-d2fckzg1tk] {
	padding: var(--spacing-md);
	vertical-align: middle;
	color: var(--text-primary);
}

/* Donor Info Column */
.donor-info[b-d2fckzg1tk] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-md);
}

.donor-name[b-d2fckzg1tk] {
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
}

/* Donor row avatar inside the Recent Donations table - scoped to avoid
   affecting Top Donors (Top Donors use contact-style avatars). */
.recent-donations-table .donor-avatar[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	text-transform: uppercase;
	font-size: 0.95rem;
}

.donor-row .donor-meta[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
}

/* Reuse gradient palette for table avatars for visual consistency */
.recent-donations-table tbody tr:nth-child(6n + 1) .donor-avatar[b-d2fckzg1tk] {
	background: var(--accent-color);
}

.recent-donations-table tbody tr:nth-child(6n + 2) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-blue);
}

.recent-donations-table tbody tr:nth-child(6n + 3) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-green);
}

.recent-donations-table tbody tr:nth-child(6n + 4) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-purple);
}

.recent-donations-table tbody tr:nth-child(6n + 5) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-red);
}

.recent-donations-table tbody tr:nth-child(6n + 6) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-orange);
}

/* Amount Cell */
.amount-cell[b-d2fckzg1tk] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

/* Amount pill styling to match design */
.amount-pill[b-d2fckzg1tk] {
	display: inline-block;
	background-color: var(--success-subtle);
	/* soft green bg */
	color: var(--success-color);
	/* green text */
	padding: var(--spacing-6) var(--spacing-12);
	border-radius: 8px;
	font-weight: var(--font-weight-semibold);
	min-width: 90px;
	text-align: center;
}

/* Voucher Code */
.voucher-code[b-d2fckzg1tk] {
	/* render voucher as simple inline text (not a pill) to match design */
	font-family: inherit;
	font-size: var(--font-size-sm);
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	color: var(--text-primary);
}

/* Empty State for Recent Donations */
.recent-donations-tab .empty-tab[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3xl) var(--spacing-md);
	text-align: center;
}

.recent-donations-tab .empty-tab i[b-d2fckzg1tk] {
	font-size: 3rem;
	color: var(--gray-400);
	margin-bottom: var(--spacing-md);
}

.recent-donations-tab .empty-tab p[b-d2fckzg1tk] {
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
	font-size: var(--font-size-base);
}

.recent-donations-tab .empty-tab .text-muted[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
}

/* Responsive Design */
@media (max-width: 1200px) {
	.recent-donations-table[b-d2fckzg1tk] {
		font-size: var(--font-size-xs);
	}

	.recent-donations-table thead th[b-d2fckzg1tk],
	.recent-donations-table tbody td[b-d2fckzg1tk] {
		padding: var(--spacing-sm);
	}
}

@media (max-width: 768px) {
	.recent-donations-tab .tab-header[b-d2fckzg1tk] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.recent-donations-tab .make-contribution-btn[b-d2fckzg1tk] {
		width: 100%;
	}

	.recent-donations-table-container[b-d2fckzg1tk] {
		overflow-x: auto;
		padding-bottom: 28px;
		/* allow vertical scrolling when table grows taller than available space */
		max-height: 360px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.recent-donations-table[b-d2fckzg1tk] {
		min-width: 600px;
	}
}

/* Top Donors - minimal, simple avatar + layout */
.top-donors-list[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	max-height: none;
	overflow: visible;
	padding: var(--spacing-sm) var(--spacing-md);
}

/* New container that keeps header fixed and list scrollable */
.top-donors-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	min-height: auto;
	height: auto;
}

/* Recent Donations - use same layout as AssociatedContacts */
.recent-donations-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	min-height: auto;
	height: auto;
}

.recent-donations-simple-header[b-d2fckzg1tk] {
	display: grid;
	/* tighter columns to align data under headers like Top Donors */
	grid-template-columns: 2.1fr 1fr 0.95fr 0.95fr 1fr;
	gap: var(--spacing-sm);
	padding: 6px var(--spacing-sm);
	background: transparent;
	flex: 0 0 auto;
	font-size: var(--font-size-sm);
	margin-bottom: -2px !important;
	color: var(--text-primary);
	/* match Recent Donations column header color */
	font-weight: var(--font-weight-semibold);
}

.recent-donations-simple-header .col-name[b-d2fckzg1tk] {
	padding-left: calc(var(--spacing-md) + 20px) !important;
	/* match Top Donors header */
	box-sizing: border-box;
	transform: translateX(calc(-1 * var(--spacing-sm)));
}

.recent-donations-list[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--spacing-sm);
	box-sizing: border-box;
}

.recent-donations-list .donation-item .card-left[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xxs);
	box-sizing: border-box;
	padding-left: var(--spacing-md);
}

.donation-item[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 2.1fr 1fr 0.95fr 0.95fr 1fr;
	gap: var(--spacing-sm);
	align-items: center;
	padding: var(--spacing-md) var(--spacing-md) !important;
	margin-bottom: var(--spacing-xxs) !important;
	border-radius: var(--radius-6);
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color);

}

.donation-item .contact-main[b-d2fckzg1tk] {
	padding-left: var(--spacing-md);
	/* match Top Donors .card-left */
	box-sizing: border-box;
}

/* Column alignment overrides */
.recent-donations-simple-header .col-date[b-d2fckzg1tk],
.recent-donations-list .col-date[b-d2fckzg1tk] {
	text-align: left;
}

.recent-donations-simple-header .col-amount[b-d2fckzg1tk] {
	text-align: left;
}

.recent-donations-list .col-amount[b-d2fckzg1tk] {
	text-align: right;
	padding-right: 6px;
}

/* Nudge the 4th and 5th columns slightly right so their data lines up
   visually under the corresponding header labels. This corrects a
   small visual shift where Payment Mode and Voucher values started
   a bit left of their headings. */
.donation-item .col-mode[b-d2fckzg1tk] {
	padding-left: var(--spacing-20) !important;
	justify-self: start;
}

.donation-item .col-voucher[b-d2fckzg1tk] {
	padding-left: calc(var(--spacing-20) + var(--spacing-10)) !important;
}

.top-donors-top-row[b-d2fckzg1tk] {
	padding: var(--spacing-xs) var(--spacing-sm);
}

/* Add extra left padding so avatar + name align visually with header
   Keep existing spacing token and apply a small visual nudge */
.top-donors-simple-header .col-name[b-d2fckzg1tk] {
	padding-left: calc(var(--spacing-md) + 20px) !important;
	box-sizing: border-box;
	transform: translateX(calc(-1 * var(--spacing-sm)));
	/* fine-tune to visually align text */
}

.top-donors-list .top-donor-card .card-left[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	/* space between avatar and name */
	padding-left: var(--spacing-md);
	/* visual offset, inside the column */
	box-sizing: border-box;
}

.top-donors-simple-header[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 2.2fr 1.4fr 1fr;
	gap: var(--spacing-sm);
	padding: 8px var(--spacing-sm);
	margin-top: 4px;
	margin-bottom: -2px !important;
	background: transparent;
	flex: 0 0 auto;
}

.top-donors-list .col-amount[b-d2fckzg1tk] {
	margin-right: 10px;
}

.top-donors-list[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--spacing-sm);
	box-sizing: border-box;
}

.top-donor-card[b-d2fckzg1tk] {
	display: grid;
	/* Use the same column widths as the header so values line up under headings */
	grid-template-columns: 2.2fr 1.4fr 1fr;
	gap: var(--spacing-sm);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	border: 1px solid var(--border-color);
}

/* Ensure Recent Donations & Top Donors row heights match Contacts/Volunteers/Attendees
   Use the same padding token as `.contact-item` so rows align visually across tabs. */
.donation-item[b-d2fckzg1tk],
.top-donor-card[b-d2fckzg1tk],
.top-donor-row[b-d2fckzg1tk] {
	padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-md) - 4px) !important;
	box-sizing: border-box;
	align-items: center;
}

/* Stronger selector for the donor name element used in Activities.razor (h4 inside donor-meta) */
.top-donors-list .top-donor-card .card-left .donor-meta h4[b-d2fckzg1tk] {
	margin: 0;
	/* reset default h4 margin */
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-regular, 400);
	color: var(--text-primary, #212529) !important;
	/* ensure not overridden by more generic donor-name rules */
	line-height: 1;
}

/* Ensure donor-since text (div.col-since donor-since) is styled with desired weight/color */
.top-donors-list .top-donor-card .col-since.donor-since[b-d2fckzg1tk] {
	font-size: var(--font-size-base, 1rem);
	color: var(--text-primary, #212529) !important;
	font-weight: var(--font-weight-regular, 400);
}

/* Mirror the Top Donors row styles for Recent Donations rows */
/* Target the Recent Donations markup: .recent-donations-list .donation-item */
.recent-donations-list .donation-item .contact-main .name-text[b-d2fckzg1tk],
.recent-donations-list .donation-item .contact-main .contact-name[b-d2fckzg1tk] {
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-regular, 400);
	color: var(--text-primary, #212529) !important;
}

/* Payment Mode and Voucher columns styling to match other row text */
.recent-donations-list .donation-item .col-mode[b-d2fckzg1tk],
.recent-donations-list .donation-item .col-date[b-d2fckzg1tk],
.recent-donations-list .donation-item .col-voucher[b-d2fckzg1tk],
.recent-donations-list .donation-item .col-voucher .voucher-code[b-d2fckzg1tk] {
	font-size: var(--font-size-base, 1rem);
	color: var(--text-primary, #212529) !important;
	font-weight: var(--font-weight-regular, 400);
}

/* Make Top Donors avatar match the Contacts avatar style (gradient + initials) */
.top-donors-list .top-donor-card .donor-avatar[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	text-transform: uppercase;
	font-size: 1rem;
}

/* Reuse same gradient cycling used by associated contacts to keep avatars consistent */
.top-donors-list .top-donor-card:nth-child(6n + 1) .donor-avatar[b-d2fckzg1tk] {
	background: var(--accent-color);
}

.top-donors-list .top-donor-card:nth-child(6n + 2) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-blue);
}

.top-donors-list .top-donor-card:nth-child(6n + 3) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-green);
}

.top-donors-list .top-donor-card:nth-child(6n + 4) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-purple);
}

.top-donors-list .top-donor-card:nth-child(6n + 5) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-red);
}

.top-donors-list .top-donor-card:nth-child(6n + 6) .donor-avatar[b-d2fckzg1tk] {
	background: var(--metric-orange);
}



/* Ensure the date cell in each donor row matches the header offset and is left aligned */
.top-donors-simple-header .col-since[b-d2fckzg1tk],
.top-donors-list .top-donor-card>.col-since[b-d2fckzg1tk],
.top-donors-list .top-donor-card>.donor-since[b-d2fckzg1tk] {
	justify-self: start;
	text-align: left;
	margin-left: 0;
	/* padding-left: 0; */
}

/* Add spacing between donor cards to match Contacts layout */
.top-donors-list .associated-contact-card[b-d2fckzg1tk],
.top-donors-list .top-donor-card[b-d2fckzg1tk] {
	margin-bottom: 10px !important
}


/* Recent Donations table container: make header sticky and body scrollable
   similar to AssociatedContacts component. */
.recent-donations-table-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	/* allow inner scrolling */
	overflow: hidden;
}

.recent-donations-table-container .recent-donations-table[b-d2fckzg1tk] {
	width: 100%;
	border-collapse: separate;
}

.recent-donations-table thead th[b-d2fckzg1tk] {
	position: sticky;
	top: 0;
	background: var(--bg-primary);
	z-index: 5;
}

.recent-donations-table-container tbody[b-d2fckzg1tk] {
	display: block;
	max-height: 420px;
	/* allow vertical scrolling for the table body */
	overflow-y: auto;
}

.recent-donations-table-container tbody tr[b-d2fckzg1tk] {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.recent-donations-table thead[b-d2fckzg1tk],
.recent-donations-table tbody tr[b-d2fckzg1tk] {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.voucher-code[b-d2fckzg1tk] {
	font-family: var(--font-family-monospace);
	color: var(--text-secondary);
}

/* Make scrollbars visible and thin across browsers */
.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar,
.recent-donations-table-container[b-d2fckzg1tk]::-webkit-scrollbar {
	height: var(--scrollbar-size, var(--spacing-xs, 8px));
	width: var(--scrollbar-size, var(--spacing-xs, 8px));
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-track,
.recent-donations-table-container[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: transparent;
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-thumb,
.recent-donations-table-container[b-d2fckzg1tk]::-webkit-scrollbar-thumb {
	background-color: var(--overlay-dark);
	/* darker thumb */
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid var(--overlay-light);
	/* subtle separation */
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-track,
.recent-donations-table-container[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: var(--overlay-bg);
	/* slightly visible track */
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover,
.recent-donations-table-container[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover {
	background-color: var(--overlay-dark);
}

.top-donors-list[b-d2fckzg1tk],
.recent-donations-table-container[b-d2fckzg1tk] {
	scrollbar-width: thin;
	/* Firefox */
	scrollbar-color: var(--overlay-dark) var(--overlay-bg);
}

/* Header row for Top Donors columns */
.top-donors-header[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 2fr 1.2fr 1fr;
	/* name, since, amount */
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	/* match Recent Donations column header color */
	/* border-bottom: 1px solid var(--gray-100); */
}

.top-donors-header .col[b-d2fckzg1tk] {
	padding: var(--spacing-xs) var(--spacing-6);
	display: flex;
	align-items: center;
}

/* Align the Constituent Since header to match the dates below */
.top-donors-header .col-since[b-d2fckzg1tk] {
	justify-content: flex-start;
	text-align: left;
	padding-left: var(--spacing-xxs);
	transform: translateX(calc(-1 * var(--spacing-6)));
}

.top-donor-row[b-d2fckzg1tk] {
	display: grid;
	grid-template-columns: 2fr 1.2fr 1fr;
	/* name, since, amount */
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) !important;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: all 0.12s ease;
}

/* Simple circular avatar with initials */
.donor-avatar[b-d2fckzg1tk] {
	width: var(--avatar-circle-sm);
	height: var(--avatar-circle-sm);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-base);
}

.donor-meta[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.donor-meta h4[b-d2fckzg1tk] {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	text-align: left;
}

/* Layout inside the name column: avatar left, meta right */
.col-name[b-d2fckzg1tk] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

/* donor type pill to resemble the design */
.donor-type[b-d2fckzg1tk] {
	display: inline-block;
	padding: 6px var(--spacing-sm);
	border-radius: var(--radius-lg);
	background: rgba(var(--blue-500), 0.07);
	/* light blue by default */
	color: var(--text-primary);
	border: 1px solid rgba(var(--blue-500), 0.15);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
}

/* Specific pill colors */
.pill-individual[b-d2fckzg1tk] {
	background: rgba(var(--metric-blue), 0.08);
	color: var(--blue-500);
	border-color: rgba(var(--metric-blue), 0.16);
}

.pill-organization[b-d2fckzg1tk] {
	background: rgba(var(--metric-purple), 0.06);
	color: var(--purple-500);
	border-color: rgba(var(--purple-700), 0.14);
}

.pill-unknown[b-d2fckzg1tk] {
	background: var(--overlay-bg);
	color: var(--gray-600);
	border-color: var(--border-color);
}

.donor-since[b-d2fckzg1tk] {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	text-align: left;
	margin-bottom: 6px;
}

/* Make the "Constituent Since" date visually match the header color (darker) */
.top-donors-list .donor-since[b-d2fckzg1tk] {
	color: var(--text-primary);
	font-weight: 500;
	text-align: center;
	/* ensure date sits directly under the header */
}

.amount-pill[b-d2fckzg1tk] {
	display: inline-block;
	background: var(--growth-positive-bg);
	color: var(--growth-positive-text);
	padding: 6px var(--spacing-sm);
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-medium);
	box-shadow: none;
}

/* Use design tokens for top-donor amount visuals; slightly lighter than primary success text */
.top-donor-row .amount-pill[b-d2fckzg1tk],
.top-donor-row .amount[b-d2fckzg1tk] {
	background: var(--growth-positive-bg);
	color: var(--metric-green);
	font-weight: var(--font-weight-medium);
}

/* Generic amount fallback using tokens */
.amount[b-d2fckzg1tk] {
	color: var(--growth-positive-text);
	font-weight: var(--font-weight-medium);
}

/* Solid color avatar helpers */
.avatar-blue[b-d2fckzg1tk] {
	background: var(--metric-blue, #2563eb);
}

.avatar-green[b-d2fckzg1tk] {
	background: var(--metric-green, #059669);
}

.avatar-red[b-d2fckzg1tk] {
	background: var(--danger-color, #dc2626);
}

.avatar-yellow[b-d2fckzg1tk] {
	background: var(--metric-orange, #f59e0b);
}

.avatar-purple[b-d2fckzg1tk] {
	background: var(--purple-500, #7c3aed);
}

.avatar-orange[b-d2fckzg1tk] {
	background: var(--accent-color, #f97316);
}

.avatar-pink[b-d2fckzg1tk] {
	background: var(--accent-color, #ec4899);
}

.avatar-gray[b-d2fckzg1tk] {
	background: var(--gray-600, #6b7280);
}

/* Volunteer status badges */
.status-badge[b-d2fckzg1tk] {
	display: inline-block;
	margin-left: calc(var(--spacing-xs) + 4px);
	padding: 6px 12px;
	border-radius: 8px;
	/* match amount-pill */
	font-size: 0.85rem;
	font-weight: 600;
	min-width: 72px;
	text-align: center;
	text-transform: capitalize;
}

.status-badge.status-active[b-d2fckzg1tk] {
	background-color: var(--success-bg-subtle);
	color: var(--success-color);
}

.status-badge.status-inactive[b-d2fckzg1tk] {
	background-color: var(--error-bg-subtle);
	color: var(--danger-color);
}

/* Volunteer email and date styling */
.contact-main .contact-email[b-d2fckzg1tk] {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-top: 2px;
}

.contact-main .contact-date[b-d2fckzg1tk] {
	font-size: 0.8rem;
	color: var(--text-tertiary);
	margin-top: 2px;
}

/* Middle column zoom fix: keep the overview visible, and make the active tab area own
	its vertical scrolling so tab data stays accessible when the browser is zoomed in. */
.activity-details-scroll-region[b-d2fckzg1tk] {
	overflow: hidden;
}

.nav-tabs-custom[b-d2fckzg1tk] {
	flex: 0 0 auto;
}

.tab-content-container[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--border-secondary, #d1d6da) transparent;
}

.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}

.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: transparent;
}

.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}

.tab-content-container[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}

/* Volunteers root wrapper uses Bootstrap classes in markup; constrain it here. */
.tab-content-container > .d-flex.flex-column[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

/* Page-owned tabs */
.top-donors-container[b-d2fckzg1tk],
.recent-donations-tab[b-d2fckzg1tk],
.recent-donations-container[b-d2fckzg1tk],
.attendees-tab-container[b-d2fckzg1tk] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.top-donors-top-row[b-d2fckzg1tk],
.top-donors-header[b-d2fckzg1tk],
.tab-header[b-d2fckzg1tk],
.recent-donations-simple-header[b-d2fckzg1tk],
.attendees-actions-bar[b-d2fckzg1tk],
.attendees-table-header[b-d2fckzg1tk],
.attendees-footer-outer[b-d2fckzg1tk] {
	flex: 0 0 auto;
}

.top-donors-list[b-d2fckzg1tk],
.recent-donations-list[b-d2fckzg1tk],
.attendees-body[b-d2fckzg1tk],
.attendees-list-table[b-d2fckzg1tk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #d1d6da transparent;
}

/* Final authoritative middle-panel behavior.
   Keep one source of truth here so pagination remains visible and the
   middle section only gains horizontal scrolling when width gets tighter. */
.activities-container[b-d2fckzg1tk],
.activities-layout[b-d2fckzg1tk],
.activity-details-column[b-d2fckzg1tk],
.activity-details-column .card[b-d2fckzg1tk] {
	overflow-x: hidden !important;
}

.activity-details-scroll-region[b-d2fckzg1tk] {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

.nav-tabs-custom[b-d2fckzg1tk] {
	flex: 0 0 auto !important;
}

.tab-content-container[b-d2fckzg1tk] {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 320px !important;
	min-width: 0 !important;
	width: 100% !important;
	padding: var(--spacing-sm) !important;
	padding-bottom: 0 !important;
	/* allow inner components to control vertical scrolling */
		overflow-y: visible !important;
	overflow-x: hidden !important;
}

/* Volunteers tab: allow the component to manage internal vertical scrolling */
/* .volunteers-tab-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
} */

.volunteers-body[b-d2fckzg1tk],
.volunteers-table-body[b-d2fckzg1tk] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.volunteers-footer[b-d2fckzg1tk] { flex: 0 0 auto !important; }

.contacts-tab-container[b-d2fckzg1tk],
.attendees-tab-container[b-d2fckzg1tk],
.top-donors-container[b-d2fckzg1tk],
.recent-donations-tab[b-d2fckzg1tk],
.recent-donations-container[b-d2fckzg1tk] {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 100% !important;
	/* let each tab control its own overflow (components should set scrolling) */
	/* overflow: visible !important; */
}

.contacts-body[b-d2fckzg1tk],
.attendees-body[b-d2fckzg1tk],
.top-donors-list[b-d2fckzg1tk],
.recent-donations-list[b-d2fckzg1tk],
.attendees-list-table[b-d2fckzg1tk] {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

.contacts-footer-outer[b-d2fckzg1tk],
.volunteers-footer[b-d2fckzg1tk],
.attendees-footer-outer[b-d2fckzg1tk] {
	flex: 0 0 auto !important;
	position: relative !important;
	z-index: 2 !important;
	margin-top: 0 !important;
}

@media (max-width: 1900px) {
	.tab-content-container[b-d2fckzg1tk] {
		overflow-x: auto !important;
	}

	.contacts-tab-container[b-d2fckzg1tk] {
		min-width: 920px !important;
	}

	.attendees-tab-container[b-d2fckzg1tk] {
		min-width: 980px !important;
	}

	.top-donors-container[b-d2fckzg1tk] {
		min-width: 760px !important;
	}

	.recent-donations-tab[b-d2fckzg1tk],
	.recent-donations-container[b-d2fckzg1tk] {
		min-width: 1080px !important;
	}

	.contacts-body[b-d2fckzg1tk],
	.attendees-body[b-d2fckzg1tk],
	.top-donors-list[b-d2fckzg1tk],
	.recent-donations-list[b-d2fckzg1tk],
	.attendees-list-table[b-d2fckzg1tk] {
		overflow-x: hidden !important;
	}
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar,
.recent-donations-list[b-d2fckzg1tk]::-webkit-scrollbar,
.attendees-body[b-d2fckzg1tk]::-webkit-scrollbar,
.attendees-list-table[b-d2fckzg1tk]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-track,
.recent-donations-list[b-d2fckzg1tk]::-webkit-scrollbar-track,
.attendees-body[b-d2fckzg1tk]::-webkit-scrollbar-track,
.attendees-list-table[b-d2fckzg1tk]::-webkit-scrollbar-track {
	background: transparent;
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-thumb,
.recent-donations-list[b-d2fckzg1tk]::-webkit-scrollbar-thumb,
.attendees-body[b-d2fckzg1tk]::-webkit-scrollbar-thumb,
.attendees-list-table[b-d2fckzg1tk]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}

.top-donors-list[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover,
.recent-donations-list[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover,
.attendees-body[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover,
.attendees-list-table[b-d2fckzg1tk]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}
/* /Pages/BulkUpload.razor.rz.scp.css */
.bulk-upload-page[b-stk980bonb] {
	padding: var(--spacing-lg);
	max-width: 1400px;
	margin: 0 auto;
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
}

.page-header[b-stk980bonb] {
	margin-bottom: var(--spacing-lg);
	flex-shrink: 0;
}

.page-header h1[b-stk980bonb] {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.page-description[b-stk980bonb] {
	font-size: var(--font-size-base);
	color: var(--text-secondary);
	margin: 0;
}

/* Section Header with Action Button */
.section-header-with-action[b-stk980bonb] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	flex-wrap: wrap;
}

/* Card Header with Gradient - Following Activities pattern */
.card[b-stk980bonb] {
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.card-header-gradient[b-stk980bonb] {
	background: var(--gradient-card);
	color: var(--text-light);
}

.card-header-gradient .header-title[b-stk980bonb] {
	font-size: var(--font-size-lg);
	margin: 0;
	color: var(--text-light);
}

.create-button[b-stk980bonb] {
	font-size: var(--font-size-sm);
	padding: var(--spacing-xs) var(--spacing-sm);
	white-space: nowrap;
	border-radius: var(--radius-md);
	/* rely on .btn-primary for colors and border */
}

.create-button:hover[b-stk980bonb] {
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

.create-button .create-icon[b-stk980bonb] {
	font-size: var(--font-size-xs);
	margin-right: var(--spacing-xs);
}

.card-body[b-stk980bonb] {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.loading-container[b-stk980bonb] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-3xl);
	gap: var(--spacing-md);
}

.spinner[b-stk980bonb] {
	width: 40px;
	height: 40px;
	border: 4px solid var(--gray-200);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin-b-stk980bonb 0.8s linear infinite;
}

@keyframes spin-b-stk980bonb {
	to {
		transform: rotate(360deg);
	}
}

.alert[b-stk980bonb] {
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.alert-error[b-stk980bonb] {
	background: var(--error-bg);
	color: var(--error-color);
	border: 1px solid var(--error-border);
}

.alert i[b-stk980bonb] {
	font-size: var(--font-size-xl);
}

.bulk-upload-grid[b-stk980bonb] {
	flex: 1;
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: start; /* top-align columns to match other pages */
	gap: var(--spacing-lg);
	overflow: hidden;
	min-height: 0;
}

/* Left column: Latest upload and Previous uploads */
.uploads-column[b-stk980bonb] {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	min-height: 0;
}

/* Right column: Placeholder card */
.sidebar-column[b-stk980bonb] {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.latest-upload-section[b-stk980bonb] {
	flex-shrink: 0;
}

.latest-upload-section .card[b-stk980bonb] {
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.previous-uploads-section[b-stk980bonb] {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.previous-uploads-section .card[b-stk980bonb] {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.previous-uploads-section .card-body[b-stk980bonb] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.section-title[b-stk980bonb] {
	flex-shrink: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-md) 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.section-title i[b-stk980bonb] {
	color: var(--primary-color);
}

.logs-list[b-stk980bonb] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--spacing-xs);
}

/* Custom scrollbar styling */
.logs-list[b-stk980bonb]::-webkit-scrollbar {
	width: 8px;
}

.logs-list[b-stk980bonb]::-webkit-scrollbar-track {
	background: var(--gray-100);
	border-radius: var(--radius-md);
}

.logs-list[b-stk980bonb]::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: var(--radius-md);
}

.logs-list[b-stk980bonb]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
}

.placeholder-content[b-stk980bonb] {
	text-align: center;
	color: var(--text-secondary);
}

.placeholder-content i[b-stk980bonb] {
	font-size: 3rem;
	color: var(--accent-color);
	margin-bottom: var(--spacing-md);
}

.placeholder-content h3[b-stk980bonb] {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.placeholder-content p[b-stk980bonb] {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin: 0;
}

/* Informational label used across Bulk Upload pages */
.info-label[b-stk980bonb] {
	font-size: var(--font-size-sm);
	color: var(
		--ft-muted
	); /* uses variables.css alias aligned with CSS-Variables-Guide */
	font-weight: var(--font-weight-medium);
	margin: 0;
	display: inline-block;
}

.empty-state[b-stk980bonb] {
	text-align: center;
	padding: var(--spacing-3xl);
	color: var(--text-muted);
}

.empty-state i[b-stk980bonb] {
	font-size: 3rem;
	margin-bottom: var(--spacing-md);
	color: var(--gray-400);
}

.empty-state p[b-stk980bonb] {
	font-size: var(--font-size-lg);
	margin: 0;
}

.pagination-controls[b-stk980bonb] {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-lg) 0;
	flex-shrink: 0;
}

.pagination-controls .btn[b-stk980bonb] {
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-medium);
	border: none;
	cursor: pointer;
	transition: var(--transition-all);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.pagination-controls .btn-secondary[b-stk980bonb] {
	background: var(--secondary-color);
	color: var(--white);
}

.pagination-controls .btn-secondary:hover:not(:disabled)[b-stk980bonb] {
	background: var(--primary-color-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.pagination-controls .btn:disabled[b-stk980bonb] {
	opacity: 0.5;
	cursor: not-allowed;
}

.page-info[b-stk980bonb] {
	font-size: var(--font-size-base);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

/* Responsive Design */
@media (max-width: 1200px) {
	.bulk-upload-grid[b-stk980bonb] {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.uploads-column[b-stk980bonb] {
		grid-column: 1;
		grid-row: 1;
	}

	.sidebar-column[b-stk980bonb] {
		grid-column: 1;
		grid-row: 2;
	}
}

@media (max-width: 768px) {
	.bulk-upload-page[b-stk980bonb] {
		padding: var(--spacing-md);
	}

	.page-header h1[b-stk980bonb] {
		font-size: var(--font-size-2xl);
	}

	.section-header-with-action[b-stk980bonb] {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
	}

	.btn[b-stk980bonb] {
		width: 100%;
		justify-content: center;
	}

	.bulk-upload-grid[b-stk980bonb] {
		grid-template-columns: 1fr;
	}

	.uploads-column[b-stk980bonb],
	.sidebar-column[b-stk980bonb] {
		grid-column: 1;
	}

	.pagination-controls[b-stk980bonb] {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.pagination-controls .btn[b-stk980bonb] {
		width: 100%;
		justify-content: center;
	}
}
/* /Pages/BulkUploadDetails.razor.rz.scp.css */
.bulk-upload-details-page[b-z3mltwb5gz] {
    padding: var(--spacing-2xl);
    background: var(--bg-primary);
    min-height: 100vh;
}

/* Page Header */
.page-header[b-z3mltwb5gz] {
    margin-bottom: var(--spacing-2xl);
}

.header-content[b-z3mltwb5gz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.btn-back[b-z3mltwb5gz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-all);
    width: fit-content;
}

.btn-back:hover[b-z3mltwb5gz] {
    background: var(--bg-hover);
    transform: translateX(-4px);
    box-shadow: var(--shadow-md);
}

.btn-back i[b-z3mltwb5gz] {
    font-size: var(--font-size-sm);
    transition: transform var(--transition-normal);
}

.btn-back:hover i[b-z3mltwb5gz] {
    transform: translateX(-2px);
}

.header-info h1[b-z3mltwb5gz] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.header-meta[b-z3mltwb5gz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.meta-item[b-z3mltwb5gz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.meta-item i[b-z3mltwb5gz] {
    color: var(--primary-color);
}

.status-badge[b-z3mltwb5gz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.badge-success[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--success-color) 0%, #10b981 100%);
    color: var(--white);
}

.badge-warning[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--warning-color) 0%, #f59e0b 100%);
    color: var(--white);
}

.badge-danger[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    color: var(--white);
}

.badge-info[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--info-color) 0%, #3b82f6 100%);
    color: var(--white);
}

.badge-secondary[b-z3mltwb5gz] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Summary Cards */
.summary-cards[b-z3mltwb5gz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.summary-card[b-z3mltwb5gz] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.summary-card[b-z3mltwb5gz]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-color);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.summary-card:hover[b-z3mltwb5gz] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.summary-card:hover[b-z3mltwb5gz]::before {
    transform: scaleX(1);
}

.card-indicator[b-z3mltwb5gz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: var(--transition-normal);
}

.card-indicator.active[b-z3mltwb5gz] {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.card-icon[b-z3mltwb5gz] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--white);
}

.card-inserted .card-icon[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--success-color), #10b981);
}

.card-updated .card-icon[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--info-color), #3b82f6);
}

.card-rejected .card-icon[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
}

.card-content[b-z3mltwb5gz] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.card-label[b-z3mltwb5gz] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value[b-z3mltwb5gz] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

/* Records Container */
.records-container[b-z3mltwb5gz] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
    min-height: 400px;
}

.records-container .card[b-z3mltwb5gz] {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card Header with Gradient - Following Activities pattern */
.card-header-gradient[b-z3mltwb5gz] {
    background: var(--gradient-card);
    color: var(--text-light);
}

.card-header-gradient .header-title[b-z3mltwb5gz] {
    font-size: var(--font-size-lg);
    margin: 0;
    color: var(--text-light);
}

.create-button[b-z3mltwb5gz] {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    white-space: nowrap;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    color: var(--text-light);
    border: none;
}

.create-button:hover[b-z3mltwb5gz] {
    background: var(--primary-color-dark);
    color: var(--text-light);
}

.create-button .create-icon[b-z3mltwb5gz] {
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-xs);
}

.loading-overlay[b-z3mltwb5gz] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    z-index: 10;
}

.table-wrapper[b-z3mltwb5gz] {
    overflow-x: auto;
    position: relative;
}

.records-table[b-z3mltwb5gz] {
    width: 100%;
    min-width: 2000px; /* Ensure table can accommodate all CSV columns */
    border-collapse: collapse;
}

.records-table thead[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
}

.records-table th[b-z3mltwb5gz] {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevent header text wrapping */
    min-width: 120px; /* Minimum column width */
}

.records-table tbody tr[b-z3mltwb5gz] {
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-all);
}

.records-table tbody tr:hover[b-z3mltwb5gz] {
    background: var(--bg-hover);
}

.records-table tbody tr:last-child[b-z3mltwb5gz] {
    border-bottom: none;
}

.records-table td[b-z3mltwb5gz] {
    padding: var(--spacing-lg) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap; /* Prevent cell content wrapping */
    min-width: 120px; /* Minimum column width */
}

/* Special styling for wider columns */
.records-table td:has(.name-cell)[b-z3mltwb5gz] {
    min-width: 200px; /* Name column should be wider */
}

.records-table td:has(.error-reason-cell)[b-z3mltwb5gz] {
    min-width: 250px; /* Error reason column should be wider */
}

.name-cell[b-z3mltwb5gz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.avatar[b-z3mltwb5gz] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.name[b-z3mltwb5gz] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.badge[b-z3mltwb5gz] {
    display: inline-block;
    padding: var(--spacing-xxs) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.badge-type[b-z3mltwb5gz] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.badge-action[b-z3mltwb5gz] {
    color: var(--white);
}

.action-insert[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--success-color), #10b981);
}

.action-update[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--info-color), #3b82f6);
}

.action-delete[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
}

.error-reason[b-z3mltwb5gz] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--danger-color);
}

.error-reason i[b-z3mltwb5gz] {
    flex-shrink: 0;
}

/* Pagination */
.pagination-controls[b-z3mltwb5gz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.page-numbers[b-z3mltwb5gz] {
    display: flex;
    gap: var(--spacing-xs);
}

.page-number[b-z3mltwb5gz] {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-all);
}

.page-number:hover[b-z3mltwb5gz] {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.page-number.active[b-z3mltwb5gz] {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    border-color: var(--primary-color);
}

.btn[b-z3mltwb5gz] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-all);
    border: none;
}

.btn-secondary[b-z3mltwb5gz] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-z3mltwb5gz] {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.btn-secondary:disabled[b-z3mltwb5gz] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading & Empty States */
.loading-container[b-z3mltwb5gz],
.empty-state[b-z3mltwb5gz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl);
    gap: var(--spacing-lg);
}

.spinner[b-z3mltwb5gz] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--bg-secondary);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-z3mltwb5gz 1s linear infinite;
}

@keyframes spin-b-z3mltwb5gz {
    to { transform: rotate(360deg); }
}

.empty-state i[b-z3mltwb5gz] {
    font-size: 64px;
    color: var(--text-muted);
}

.empty-state p[b-z3mltwb5gz] {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

.alert[b-z3mltwb5gz] {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.alert-error[b-z3mltwb5gz] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

/* Responsive */
@media (max-width: 768px) {
    .bulk-upload-details-page[b-z3mltwb5gz] {
        padding: var(--spacing-lg);
    }

    .summary-cards[b-z3mltwb5gz] {
        grid-template-columns: 1fr;
    }

    .tab-controls[b-z3mltwb5gz] {
        flex-direction: column;
    }

    .pagination-controls[b-z3mltwb5gz] {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .table-wrapper[b-z3mltwb5gz] {
        overflow-x: scroll;
    }
}

/* Custom scrollbar for table wrapper */
.table-wrapper[b-z3mltwb5gz]::-webkit-scrollbar {
    height: 12px;
}

.table-wrapper[b-z3mltwb5gz]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    margin: 0 var(--spacing-md);
}

.table-wrapper[b-z3mltwb5gz]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-secondary);
}

.table-wrapper[b-z3mltwb5gz]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}
/* /Pages/BulkUploadPreview.razor.rz.scp.css */
.preview-page[b-f6c62xvckc] {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: var(--bg-primary);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: var(--bg-primary);
	overflow: hidden;
}

.page-header[b-f6c62xvckc] {
	background: var(--bg-card);
	border-bottom: 1px solid var(--gray-300);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-sm);
	background: var(--bg-card);
	border-bottom: 1px solid var(--gray-300);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-sm);
}

.header-content[b-f6c62xvckc] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-lg);
}

.header-left[b-f6c62xvckc] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.btn-back[b-f6c62xvckc] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--bg-hover);
	color: var(--text-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-all);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: var(--bg-hover);
	color: var(--text-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-all);
}

.btn-back:hover[b-f6c62xvckc] {
	background: var(--gray-300);
	transform: translateX(-2px);
	background: var(--gray-300);
	transform: translateX(-2px);
}

.header-text h1[b-f6c62xvckc] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.page-description[b-f6c62xvckc] {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.header-actions[b-f6c62xvckc] {
	display: flex;
	gap: var(--spacing-md);
}

.loading-container[b-f6c62xvckc] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: var(--spacing-md);
}

.spinner[b-f6c62xvckc] {
	width: 48px;
	height: 48px;
	border: 4px solid var(--gray-300);
	border-top-color: var(--primary-color);
	border-radius: var(--radius-full);
	animation: spin-b-f6c62xvckc 1s linear infinite;
}

@keyframes spin-b-f6c62xvckc {
	to {
		transform: rotate(360deg);
	}
}

.spinner-small[b-f6c62xvckc] {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--radius-full);
	animation: spin-b-f6c62xvckc 0.6s linear infinite;
}

.alert[b-f6c62xvckc] {
	margin: var(--spacing-lg);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.alert-error[b-f6c62xvckc] {
	background: var(--error-bg);
	color: var(--error-color);
	border: 1px solid var(--error-border);
}

.preview-container[b-f6c62xvckc] {
	flex: 1;
	overflow-y: auto;
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.metadata-card[b-f6c62xvckc] {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-sm);
}

.metadata-grid[b-f6c62xvckc] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--spacing-lg);
}

.metadata-item[b-f6c62xvckc] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--bg-hover);
	border-radius: var(--radius-md);
	border: 1px solid var(--gray-300);
}

.metadata-item i[b-f6c62xvckc] {
	font-size: var(--font-size-xl);
	color: var(--primary-color);
	width: 32px;
	text-align: center;
}

.metadata-content[b-f6c62xvckc] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.metadata-label[b-f6c62xvckc] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.metadata-value[b-f6c62xvckc] {
   font-size: var(--font-size-md);
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);

}

/* Info Banner for Default Values - Compact Single Line */
.info-banner[b-f6c62xvckc] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	background: rgba(33, 150, 243, 0.08);
	border-left: 3px solid var(--info-color);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}

.info-banner i[b-f6c62xvckc] {
	color: var(--info-color);
	font-size: var(--font-size-md);
}

.info-text[b-f6c62xvckc] {
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.default-chip[b-f6c62xvckc] {
	background: var(--bg-card);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--gray-300);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	white-space: nowrap;
}

.default-chip strong[b-f6c62xvckc] {
	color: var(--primary-color);
	font-weight: var(--font-weight-semibold);
}

/* Info Banner for Default Values - Compact Single Line */
.info-banner[b-f6c62xvckc] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	background: rgba(33, 150, 243, 0.08);
	border-left: 3px solid var(--info-color);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}

.info-banner i[b-f6c62xvckc] {
	color: var(--info-color);
	font-size: var(--font-size-md);
}

.info-text[b-f6c62xvckc] {
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.default-chip[b-f6c62xvckc] {
	background: var(--bg-card);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--gray-300);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	white-space: nowrap;
}

.default-chip strong[b-f6c62xvckc] {
	color: var(--primary-color);
	font-weight: var(--font-weight-semibold);
}

.table-card[b-f6c62xvckc] {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

.table-header[b-f6c62xvckc] {
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--gray-300);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.table-header h2[b-f6c62xvckc] {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.preview-note[b-f6c62xvckc] {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	background: var(--info-color);
	color: var(--white);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-md);
}

.table-container[b-f6c62xvckc] {
	flex: 1;
	overflow: auto;
	padding: var(--spacing-lg);
}

.preview-table[b-f6c62xvckc] {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-size-sm);
}

.preview-table thead[b-f6c62xvckc] {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg-card);
}

.preview-table th[b-f6c62xvckc] {
	background: var(--primary-color);
	color: var(--white);
	padding: var(--spacing-sm) var(--spacing-md);
	text-align: left;
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
	border: 1px solid var(--primary-color-dark);
}

.preview-table th:first-child[b-f6c62xvckc] {
	border-top-left-radius: var(--radius-md);
}

.preview-table th:last-child[b-f6c62xvckc] {
	border-top-right-radius: var(--radius-md);
}

.preview-table tbody tr[b-f6c62xvckc] {
	transition: var(--transition-fast);
}

.preview-table tbody tr:hover[b-f6c62xvckc] {
	background: var(--bg-hover);
}

.preview-table td[b-f6c62xvckc] {
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--gray-300);
	border-right: 1px solid var(--gray-300);
	vertical-align: middle;
}

.preview-table td:first-child[b-f6c62xvckc] {
	border-left: 1px solid var(--gray-300);
}

.row-number[b-f6c62xvckc] {
	width: 60px;
	text-align: center;
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
	background: var(--bg-hover);
}

.cell-content[b-f6c62xvckc] {
	display: block;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.metadata-column[b-f6c62xvckc] {
	min-width: 150px;
}

.badge[b-f6c62xvckc] {
	display: inline-block;
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-align: center;
	white-space: nowrap;
}

.badge-type[b-f6c62xvckc] {
	background: rgba(var(--primary-rgb), 0.1);
	color: var(--primary-color);
	border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.badge-association[b-f6c62xvckc] {
	background: var(--warning-subtle);
	color: var(--warning-text);
	border: 1px solid var(--warning-border);
}

/* Confirmation Modal */
.modal-overlay[b-f6c62xvckc] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	backdrop-filter: blur(4px);
}

.confirmation-modal[b-f6c62xvckc] {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	width: 90%;
	max-width: 500px;
	animation: slideIn-b-f6c62xvckc 0.3s ease-out;
}

@keyframes slideIn-b-f6c62xvckc {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.confirmation-modal .modal-header[b-f6c62xvckc] {
	padding: var(--spacing-lg) var(--spacing-xl);
	border-bottom: 1px solid var(--gray-300);
	background: var(--gradient-card);
	color: var(--text-light);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.confirmation-modal .modal-header h2[b-f6c62xvckc] {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.confirmation-modal .modal-header i[b-f6c62xvckc] {
	color: var(--text-light);
}

.confirmation-modal .modal-body[b-f6c62xvckc] {
	padding: var(--spacing-lg);
}

.confirmation-modal .modal-body p[b-f6c62xvckc] {
	margin: 0 0 var(--spacing-md) 0;
	color: var(--text-primary);
}

.warning-text[b-f6c62xvckc] {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.confirmation-modal .modal-footer[b-f6c62xvckc] {
	padding: var(--spacing-lg);
	border-top: 1px solid var(--gray-300);
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
}

/* Ensure the 'Yes, Cancel Import' button in this modal follows the app primary button color
   (scoped here so other danger buttons elsewhere remain unchanged) */
.confirmation-modal .modal-footer .btn-danger[b-f6c62xvckc] {
	background: var(--primary-color);
	color: var(--text-light);
	border: 1px solid var(--primary-color-dark);
}

.confirmation-modal .modal-footer .btn-danger:hover:not(:disabled)[b-f6c62xvckc] {
	background: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
}

/* Button Styles */
.btn[b-f6c62xvckc] {
	padding: var(--spacing-sm) var(--spacing-lg);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	transition: var(--transition-all);
}

.btn:disabled[b-f6c62xvckc] {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-primary[b-f6c62xvckc] {
	background: var(--primary-color);
	color: var(--white);
}

.btn-primary:hover:not(:disabled)[b-f6c62xvckc] {
	background: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
	transform: translateY(-1px);
}

.btn-secondary[b-f6c62xvckc] {
	background: var(--gray-600);
	color: var(--white);
}

.btn-secondary:hover:not(:disabled)[b-f6c62xvckc] {
	background: var(--gray-700);
	box-shadow: var(--shadow-hover);
}

.btn-danger[b-f6c62xvckc] {
	background: var(--danger-color);
	color: var(--white);
}

.btn-danger:hover:not(:disabled)[b-f6c62xvckc] {
	background: #c82333;
	box-shadow: var(--shadow-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
	.header-content[b-f6c62xvckc] {
		flex-direction: column;
		align-items: flex-start;
	}

	.header-actions[b-f6c62xvckc] {
		width: 100%;
		justify-content: stretch;
	}

	.header-actions .btn[b-f6c62xvckc] {
		flex: 1;
	}

	.metadata-grid[b-f6c62xvckc] {
		grid-template-columns: 1fr;
	}

	.table-container[b-f6c62xvckc] {
		padding: var(--spacing-sm);
	}

	.cell-content[b-f6c62xvckc] {
		max-width: 120px;
	}
}

@media (max-width: 480px) {
	.page-header[b-f6c62xvckc] {
		padding: var(--spacing-md);
	}

	.preview-container[b-f6c62xvckc] {
		padding: var(--spacing-md);
	}

	.btn[b-f6c62xvckc] {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}
}
/* /Pages/Campaigns.razor.rz.scp.css */
/* Remove any global overflow issues */
body[b-awqni0yzny],
html[b-awqni0yzny] {
	overflow-x: hidden;
}

/* Campaigns Page Layout - Compact and No Scroll */
.campaigns-page-container[b-awqni0yzny] {
	height: auto;
	max-height: calc(100vh - var(--header-height, 80px));
	overflow: visible;
	padding: var(--spacing-sm);
}

.campaigns-page-container .container-fluid[b-awqni0yzny] {
	height: auto;
	max-height: 100%;
	padding: 0;
	overflow: visible;
}

.campaigns-page-container .row[b-awqni0yzny] {
	height: auto;
	margin: 0;
	overflow: visible;
}

.filters-panel-wrapper[b-awqni0yzny] {
	height: calc(100vh - 120px);
	overflow: visible;
	margin-top: 0px !important;
	padding-left: 0px !important;
}

.campaigns-table-wrapper[b-awqni0yzny] {
	height: calc(100vh - 120px);
	overflow: visible;
	margin-top: 0px !important;
}

.filters-panel-wrapper .card[b-awqni0yzny],
.campaigns-table-wrapper .card[b-awqni0yzny] {
	height: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.campaigns-table-wrapper .card-body[b-awqni0yzny] {
	flex-grow: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 200px);
	--table-max-height: calc(100vh - 230px);
}

.table-responsive[b-awqni0yzny] {
	flex-grow: 0;
	overflow-y: auto;
	overflow-x: auto;
	max-height: var(--table-max-height, calc(100vh - 180px));
	position: relative;
	/* Removed padding-top and negative margin-top that were blocking the header button */
}

/* Ensure table cells can show tooltips */
.table-responsive table[b-awqni0yzny] {
	overflow: visible;
}

.table-responsive tbody[b-awqni0yzny],
.table-responsive tr[b-awqni0yzny] {
	overflow: visible;
}

.table-responsive td[b-awqni0yzny] {
	position: relative;
	overflow: visible;
}

/* Scrolling behavior for different page sizes */
.campaigns-table-wrapper[data-page-size="25"] .table-responsive[b-awqni0yzny],
.campaigns-table-wrapper[data-page-size="30"] .table-responsive[b-awqni0yzny],
.campaigns-table-wrapper[data-page-size="40"] .table-responsive[b-awqni0yzny] {
	max-height: 60vh;
	overflow-y: scroll;
	scrollbar-width: thin;
	/* use design tokens for scrollbar colors */
	scrollbar-color: var(--gray-400) var(--bg-secondary);
}

.campaigns-table-wrapper[data-page-size="40"] .table-responsive[b-awqni0yzny] {
	max-height: 55vh;
}

/* Custom scrollbar styling for webkit browsers */
.table-responsive[b-awqni0yzny]::-webkit-scrollbar {
	width: 8px;
}

.table-responsive[b-awqni0yzny]::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.table-responsive[b-awqni0yzny]::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: var(--radius-sm);
}

.table-responsive[b-awqni0yzny]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
}

/* Original Campaigns Container - Removed duplicate styles */

.campaigns-header[b-awqni0yzny] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
}

.campaigns-header h4[b-awqni0yzny] {
	margin: 0;
	color: var(--text-primary);
	font-weight: 600;
}

/* Filter Panel */
.filters-panel[b-awqni0yzny] {
	background: white;
	height: 100%;
}

.filters-panel .card[b-awqni0yzny] {
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
	height: 100%;
	display: flex;
	flex-direction: column;
}

.filters-panel .card-header[b-awqni0yzny] {
	/* background: var(--bg-secondary), #f8f9fa; */
	border-bottom: 1px solid var(--border-color, #dee2e6);
	/* padding: var(--spacing-md, 16px); */
	/* padding: var(--spacing-sm); */
	min-height: var(--card-header-height);
	flex-shrink: 0;
}
.filters-panel .card-body[b-awqni0yzny] {
	padding: var(--spacing-md, 16px);
	flex-grow: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--gray-400, #ced4da) var(--gray-100, #f8f9fa);
}

/* Custom scrollbar for filter panel */
.filters-panel .card-body[b-awqni0yzny]::-webkit-scrollbar {
	width: 6px;
}

.filters-panel .card-body[b-awqni0yzny]::-webkit-scrollbar-track {
	background: var(--gray-100, #f8f9fa);
	border-radius: 3px;
}

.filters-panel .card-body[b-awqni0yzny]::-webkit-scrollbar-thumb {
	background: var(--gray-400, #ced4da);
	border-radius: 3px;
}

.filters-panel .card-body[b-awqni0yzny]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500, #adb5bd);
}

.filters-panel .form-label[b-awqni0yzny] {
	font-weight: 600;
	color: var(--text-primary, #333);
	margin-bottom: var(--spacing-xs, 4px);
}

.filters-panel .form-control[b-awqni0yzny],
.filters-panel .form-select[b-awqni0yzny] {
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: var(--radius-sm, 4px);
	padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
	font-size: var(--font-size-sm, 14px);
	transition: var(--transition-all, all 0.2s ease);
}

/* Make Syncfusion datepicker inputs match form-control sizing in the filters panel */
.filters-panel .e-custom-style[b-awqni0yzny] {
	width: 100%;
}
.filters-panel .e-custom-style .e-input[b-awqni0yzny],
.filters-panel .e-custom-style input.e-input[b-awqni0yzny] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
	font-size: var(--font-size-sm, 14px) !important;
	height: auto !important;
	min-height: calc(1.5em + 16px) !important; /* approximate .form-control height */
	box-sizing: border-box !important;
}
.filters-panel .e-custom-style .e-datepicker[b-awqni0yzny],
.filters-panel .e-custom-style .e-control[b-awqni0yzny] {
	width: 100% !important;
}

/* Small spacing when stacked */
.filters-panel .mb-3 .mt-2[b-awqni0yzny] {
	margin-top: var(--spacing-sm) !important;
}

/* Fix date input overlapping issue */
.filters-panel input[type="date"][b-awqni0yzny] {
	padding: var(--spacing-sm, 8px) var(--spacing-xs, 4px);
	font-size: var(--font-size-xs, 12px);
	min-width: 0;
	width: 100%;
}

.filters-panel input[type="date"][b-awqni0yzny]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.7;
	padding: 0;
	margin: 0;
}

.filters-panel input[type="date"][b-awqni0yzny]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

.filters-panel .form-control:focus[b-awqni0yzny],
.filters-panel .form-select:focus[b-awqni0yzny] {
	border-color: var(--primary-color, #0066cc);
	box-shadow: var(--shadow-focus, 0 0 0 2px rgba(0, 102, 204, 0.25));
}

/* Campaigns Table Container */
.campaigns-table-container[b-awqni0yzny] {
	background: white;
}

.campaigns-table-container .card[b-awqni0yzny] {
	border: 1px solid var(--border-color, #dee2e6);
	border-radius: var(--radius-md, 8px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.campaigns-table-container .card-header[b-awqni0yzny] {
	/* background: var(--bg-secondary, #f8f9fa); */
	border-bottom: 1px solid var(--border-color, #dee2e6);
	padding: var(--spacing-md, 16px);
}

.campaigns-table-container .card-body[b-awqni0yzny] {
	padding: 0;
}

/* Campaigns Table - Compact */
.campaigns-table[b-awqni0yzny] {
	margin: 0;
	font-size: var(--font-size-sm);
	table-layout: auto;
}

.campaigns-table thead th[b-awqni0yzny] {
	background: var(--bg-secondary);
	border-bottom: 2px solid var(--gray-200);
	color: var(--text-primary);
	font-weight: 600;
	padding: var(--spacing-sm) var(--spacing-xs);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.campaigns-table thead th i[b-awqni0yzny] {
	color: var(--text-secondary);
	font-size: 0.8em;
	margin-left: var(--spacing-xs);
}

.campaigns-table tbody td[b-awqni0yzny] {
	padding: var(--spacing-sm) var(--spacing-xs);
	vertical-align: middle;
	border-bottom: 1px solid var(--gray-100);
}

/* Compact row height */
.campaigns-table tbody tr[b-awqni0yzny] {
	height: 40px;
}

.campaigns-table tbody tr:hover[b-awqni0yzny] {
	background-color: var(--bg-light);
}

.campaigns-table .fas.fa-edit[b-awqni0yzny] {
	color: var(--primary-color);
}

/* Progress Bar Styling */
.progress[b-awqni0yzny] {
	background-color: var(--gray-200, #e9ecef);
	border-radius: var(--radius-sm, 4px);
	overflow: hidden;
}

.campaign-progress[b-awqni0yzny] {
	height: var(--progress-height);
}

.progress-bar[b-awqni0yzny] {
	background: linear-gradient(90deg,
			var(--primary-color) 0%,
			var(--success-color) 100%);
	color: var(--text-light);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-align: center;
	line-height: var(--progress-height);
	transition: width var(--transition-normal);
}

/* Status Badge Styling */
.badge[b-awqni0yzny] {
	font-size: 0.75em;
	padding: 0.35em 0.65em;
	border-radius: var(--radius-sm, 4px);
	font-weight: 600;
}

.badge.bg-success[b-awqni0yzny] {
	background-color: var(--success-color, #28a745) !important;
}

.badge.bg-primary[b-awqni0yzny] {
	background-color: var(--primary-color, #0066cc) !important;
}

.badge.bg-warning[b-awqni0yzny] {
	background-color: var(--warning-color) !important;
	color: var(--text-black) !important;
}

.badge.bg-danger[b-awqni0yzny] {
	background-color: var(--danger-color, #dc3545) !important;
}

.badge.bg-secondary[b-awqni0yzny] {
	background-color: var(--gray-500, #6c757d) !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
	.campaigns-table-container[b-awqni0yzny] {
		overflow-x: auto;
	}

	.campaigns-table[b-awqni0yzny] {
		min-width: 1000px;
	}
}

@media (max-width: 768px) {
	.campaigns-container .row[b-awqni0yzny] {
		flex-direction: column;
	}

	.campaigns-container .col-md-3[b-awqni0yzny],
	.campaigns-container .col-md-9[b-awqni0yzny] {
		max-width: 100%;
		flex: 0 0 100%;
		margin-bottom: var(--spacing-md, 16px);
	}

	.campaigns-table[b-awqni0yzny] {
		min-width: 800px;
	}
}

/* Pagination Styles */
.pagination-controls[b-awqni0yzny] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--border-color);
}

.pagination-info[b-awqni0yzny] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.page-size-selector[b-awqni0yzny] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.page-size-selector select[b-awqni0yzny] {
	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	width: auto;
}

.pagination-nav[b-awqni0yzny] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.pagination-btn[b-awqni0yzny] {
	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid var(--border-color);
	background: var(--bg-primary);
	color: var(--text-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition-all);
	font-size: var(--font-size-sm);
	min-width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination-btn:hover:not(:disabled)[b-awqni0yzny] {
	background: var(--bg-hover);
	border-color: var(--primary-color);
}

.pagination-btn:disabled[b-awqni0yzny] {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-btn.active[b-awqni0yzny] {
	background: var(--primary-color);
	color: var(--text-light);
	border-color: var(--primary-color);
}

.pagination-ellipsis[b-awqni0yzny] {
	padding: var(--spacing-xs) var(--spacing-sm);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
	height: 36px;
}

/* Empty State Styling */
.text-center.py-4[b-awqni0yzny] {
	padding: var(--spacing-3xl) var(--spacing-lg);
	color: var(--text-secondary);
}

.text-center.py-4 .fa-3x[b-awqni0yzny] {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--spacing-lg);
}

.text-center.py-4 h5[b-awqni0yzny] {
	color: var(--text-secondary, #495057);
	margin-bottom: var(--spacing-sm, 0.5rem);
}

.text-center.py-4 p[b-awqni0yzny] {
	color: var(--text-muted, #6c757d);
	margin-bottom: 0;
}

/* Loading State */
.spinner-border[b-awqni0yzny] {
	color: var(--primary-color, #0066cc);
}

/* Alert Styling */
.alert[b-awqni0yzny] {
	border-radius: var(--radius-md, 8px);
	padding: var(--spacing-md, 16px);
	margin-bottom: var(--spacing-lg, 24px);
}

.alert-danger[b-awqni0yzny] {
	background-color: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-color);
}

/* Responsive Design for Pagination */
@media (max-width: 768px) {
	.pagination-controls[b-awqni0yzny] {
		flex-direction: column;
		gap: var(--spacing-md);
		align-items: stretch;
	}

	.pagination-info[b-awqni0yzny] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.pagination-nav[b-awqni0yzny] {
		justify-content: center;
		flex-wrap: wrap;
	}

	.page-size-selector[b-awqni0yzny] {
		justify-content: flex-start;
	}
}

/* Progress Bar Styles */
.campaign-progress[b-awqni0yzny] {
	background-color: var(--progress-bg);
	border-radius: var(--radius-sm);
	height: var(--progress-height);
	overflow: hidden;
}

.campaign-progress .progress-bar[b-awqni0yzny] {
	background-color: var(--progress-bar-bg);
	height: 100%;
	transition: var(--transition-all);
	/* width is set dynamically via inline style based on campaign progress */
}
/* /Pages/Communication.razor.rz.scp.css */
.loading-overlay[b-cft2y5t4zk] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(var(--white-rgb), 0.8);
	backdrop-filter: blur(5px);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-content[b-cft2y5t4zk] {
	text-align: center;
	background: var(--white);
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px rgba(var(--black-rgb), 0.1);
}

.text-truncate[b-cft2y5t4zk] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.table-fixed tbody tr:hover td[b-cft2y5t4zk] {
	background-color: transparent;
}

.table-fixed tbody td:hover[b-cft2y5t4zk] {
	background-color: rgba(var(--black-rgb), 0.03);
}

.table-fixed td[b-cft2y5t4zk] {
	overflow: visible;
	white-space: normal;
	text-overflow: unset;
}

.table-fixed td.action-td[b-cft2y5t4zk] {
	overflow: visible;
	white-space: nowrap;
}

.communication-container .card-header.d-flex[b-cft2y5t4zk] {
	padding: 0.45rem 0.9rem;
}

.communication-container .card[b-cft2y5t4zk] {
	border-radius: var(--radius-md);
}

.communication-container .card-body[b-cft2y5t4zk] {
	padding: 0.6rem;
}

.communication-container h5[b-cft2y5t4zk],
.communication-container h6[b-cft2y5t4zk] {
	margin: 0;
	font-size: 1rem;
}

.communication-container .btn[b-cft2y5t4zk] {
	padding: 0.32rem 0.5rem;
	font-size: 0.9rem;
}

.comm-method-col[b-cft2y5t4zk] {
	width: 16%;
	word-break: break-word;
	white-space: nowrap !important;
}

.communication-container .card.d-flex .card-body.d-flex[b-cft2y5t4zk] {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.communication-container .card.d-flex .card-body .overflow-auto[b-cft2y5t4zk] {
	padding-right: 0.5rem;
}

table.table thead th.comm-method-col[b-cft2y5t4zk],
table.table thead th[style*="Date/Time"][b-cft2y5t4zk],
table.table thead th[style*="Last Modified"][b-cft2y5t4zk],
table.table thead th[style*="Date/Time"][b-cft2y5t4zk] {
	white-space: normal;
}

table.table[b-cft2y5t4zk] {
	table-layout: auto;
	margin: 0;
	font-size: 0.9em;
}

table.table thead th[b-cft2y5t4zk] {
	background: var(--bg-secondary);
	border-bottom: 2px solid var(--gray-200);
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold, 600);
	padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

table.table.table-hover tbody tr[b-cft2y5t4zk] {
	min-height: 48px;
}

table.table.table-hover tbody tr td[b-cft2y5t4zk] {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	vertical-align: middle;
}

.row.align-items-stretch>[class*="col-"][b-cft2y5t4zk] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.row.align-items-stretch>[class*="col-"] .card[b-cft2y5t4zk] {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.communication-container .card.d-flex .card-body[b-cft2y5t4zk] {
	flex: 1 1 auto;
	min-height: 0;
}

.communication-container .card-body .text-center.py-4[b-cft2y5t4zk] {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* Communication Page Styles */
.communication-container[b-cft2y5t4zk] {
	/* Match Contributions page height: allow page to use outer scrollbar */
	padding: var(--spacing-sm);
	height: auto;
	max-height: calc(100vh - 80px);
	overflow: hidden;
}

.communication-container .container-fluid[b-cft2y5t4zk] {
	height: 100%;
	max-height: 100%;
	overflow: hidden;
}

/* Remove left padding for bootstrap containers on Communication page so content stretches to left */
.communication-container .container[b-cft2y5t4zk],
.communication-container .container-fluid[b-cft2y5t4zk] {
    padding-left: 0 !important;
}

/* Communication cards */
.communication-card[b-cft2y5t4zk] {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	margin-bottom: var(--spacing-md);
}

.communication-card-header[b-cft2y5t4zk] {
	background: var(--gradient-card);
	color: var(--text-light);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.communication-card-body[b-cft2y5t4zk] {
	padding: var(--spacing-lg);
}

.row.g-2.align-items-stretch[b-cft2y5t4zk] {
	/* Match Contributions spacing so communications area has same vertical room */
	min-height: calc(100vh - 120px);
}

.row.g-2.align-items-stretch > [class*="col-md-"][b-cft2y5t4zk] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Let the table expand and use the page scrollbar (no internal scroll) */
.row.g-2.align-items-stretch > .col-md-10 .card .card-body .table-responsive[b-cft2y5t4zk] {
	/* Use inner scroll area similar to Contributions so layout matches */
	overflow-y: auto;
	overflow-x: auto;
	max-height: var(--communication-table-max-height, calc(100vh - 180px));
}
/* Constrain the communications column/card so the page doesn't grow when the table has up to the page-size rows.
   The inner scroll area will scroll when needed rather than allowing the card to expand. */


/* Communications panel (right column) */
.row.align-items-stretch>.col-md-10[b-cft2y5t4zk] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}




.row.align-items-stretch>.col-md-10 .card .card-body[b-cft2y5t4zk] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}


/* Remove internal scrolling so the outer page scrollbar is used instead. */
.row.g-2.align-items-stretch > .col-md-10 .card .card-body.overflow-auto[b-cft2y5t4zk],
.row.g-2.align-items-stretch > .col-md-10 .card .card-body.p-0.overflow-auto[b-cft2y5t4zk],
.row.g-2.align-items-stretch > .col-md-10 .card .flex-grow-1.overflow-auto[b-cft2y5t4zk] {
	flex: 1 1 auto;
	min-height: 0;
	overflow: visible;
	/* Match Contributions: give similar inner height */
	max-height: calc(100vh - 200px);
	--communication-table-max-height: calc(100vh - 230px);
}

/* Let the table expand and use the page scrollbar (no internal scroll) */
.row.g-2.align-items-stretch > .col-md-10 .card .card-body .table-responsive[b-cft2y5t4zk] {
	/* Use inner scroll area similar to Contributions so layout matches */
	overflow-y: auto;
	overflow-x: auto;
	max-height: var(--communication-table-max-height, calc(100vh - 180px));
}

/* Modal Enhancements */
.modal-content[b-cft2y5t4zk] {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.modal-header[b-cft2y5t4zk] {
	padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
	border-bottom: none;
}

.modal-header-gradient[b-cft2y5t4zk] {
	background: var(--gradient-card);
}

.modal-body[b-cft2y5t4zk] {
	padding: var(--spacing-md);
}

.modal-footer[b-cft2y5t4zk] {
	padding: var(--spacing-md) var(--spacing-lg);
}

/* Icon Circle */
.icon-circle[b-cft2y5t4zk] {
	width: 50px;
	height: 50px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}

/* Communication Details */
.communication-details .detail-item[b-cft2y5t4zk] {
	animation: fadeInUp-b-cft2y5t4zk 0.3s ease-in-out;
}

.communication-details .detail-item label[b-cft2y5t4zk] {
	font-weight: 600;
	letter-spacing: 0.5px;
}

.communication-details .description-box[b-cft2y5t4zk] {
	border: 1px solid var(--border-color);
	min-height: 80px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Badge Styles */
.badge[b-cft2y5t4zk] {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-weight: 600;
	border-radius: var(--radius-sm);
}

/* Animation */
@keyframes fadeInUp-b-cft2y5t4zk {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Force left and right card headers to match height/padding on Communication page */
.communication-container .col-md-2 > .card > .card-header[b-cft2y5t4zk],
.communication-container .col-md-10 > .card > .card-header[b-cft2y5t4zk] {
	border-bottom: 1px solid var(--border-color, #dee2e6) !important;
	min-height: var(--card-header-height) !important;
	height: var(--card-header-height) !important;
	padding: var(--spacing-md) !important;
	box-sizing: border-box !important;
}

/* Modal Background Overlay */
.modal.show[b-cft2y5t4zk] {
	backdrop-filter: blur(3px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.icon-circle[b-cft2y5t4zk] {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.modal-dialog[b-cft2y5t4zk] {
		margin: var(--spacing-sm);
	}
}

/* Delete Confirmation Modal Styling */
.delete-confirm-modal[b-cft2y5t4zk] {
	border-radius: var(--radius-md, 0.5rem);
	overflow: hidden;
}

.delete-confirm-modal .modal-header[b-cft2y5t4zk] {
	background-color: var(--primary-color);
	color: var(--text-light);
	border-bottom: none;
	padding: 1rem 1.25rem;
}

.delete-confirm-modal .modal-header i[b-cft2y5t4zk] {
	font-size: 1.25rem;
	color: var(--text-light);
}

.delete-confirm-modal .modal-header .modal-title[b-cft2y5t4zk] {
	color: var(--text-light);
	font-weight: 600;
	font-size: 1.1rem;
}

.delete-confirm-modal .modal-body[b-cft2y5t4zk] {
	padding: 1.25rem;
}

.delete-confirm-modal .modal-footer[b-cft2y5t4zk] {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--border-color);
}

/* Pagination Color Styling - Use Primary Blue */
.pagination .page-item.active .page-link[b-cft2y5t4zk] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

.pagination .page-link:hover[b-cft2y5t4zk] {
	background-color: var(--primary-color-light);
	border-color: var(--primary-color-light);
	color: var(--white);
}

.pagination .page-link:focus[b-cft2y5t4zk] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}
/* /Pages/Contributions.razor.rz.scp.css */
.filters-panel .e-custom-style[b-fmuq6y6h0t] {
	width: 100%;
}

.filters-panel .e-custom-style .e-input[b-fmuq6y6h0t],
.filters-panel .e-custom-style input.e-input[b-fmuq6y6h0t] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
	font-size: var(--font-size-sm, 14px) !important;
	height: auto !important;
	min-height: calc(1.5em + 16px) !important;
	/* approximate .form-control height */
	box-sizing: border-box !important;
	color: var(--text-primary, #212529) !important;
}

.filters-panel .e-custom-style .e-datepicker[b-fmuq6y6h0t],
.filters-panel .e-custom-style .e-control[b-fmuq6y6h0t] {
	width: 100% !important;
}

/* Ensure filters header height matches table header on Contributions page */
.filters-panel .card-header[b-fmuq6y6h0t] {
	min-height: var(--card-header-height);
}

.filters-panel .e-custom-style input.e-input[b-fmuq6y6h0t]::placeholder {
	color: var(--text-secondary, #6c757d) !important;
	opacity: 1 !important;
}

/* Tighten filter spacing so paired inputs sit closer together
   and vertical gaps between filter groups are reduced. */
.filters-panel .mb-3[b-fmuq6y6h0t] {
	margin-bottom: 0.5rem !important;
}

.filters-panel .row[b-fmuq6y6h0t] {
	margin-left: calc(-1 * var(--spacing-6, 6px));
	margin-right: calc(-1 * var(--spacing-6, 6px));
}

.filters-panel .row > [class*="col-"][b-fmuq6y6h0t] {
	padding-left: var(--spacing-6, 6px) !important;
	padding-right: var(--spacing-6, 6px) !important;
}

/* Page-scoped styles for Contributions page (variable-driven) */

/* Receipt viewer close button styling */
.receipt-close-btn[b-fmuq6y6h0t] {
	padding: 0.25rem 0.5rem;
	min-width: auto;
	opacity: 0.9;
}

.receipt-close-btn:hover[b-fmuq6y6h0t] {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.2);
}

/* Edit icons use primary */
.contributions-container .fas.fa-edit[b-fmuq6y6h0t],
.contributions-table .fas.fa-edit[b-fmuq6y6h0t] {
	color: var(--primary-color);
}

.contributions-container .btn-outline-secondary .fas.fa-edit[b-fmuq6y6h0t] {
	color: var(--primary-color);
}

/* Layout */
.contributions-container[b-fmuq6y6h0t] {
	padding: var(--spacing-sm, 0.5rem);
	background: var(--bg-primary);
	height: auto;
	max-height: calc(100vh - 80px);
	overflow: hidden;
}

.contributions-container .container-fluid[b-fmuq6y6h0t] {
	height: auto;
	max-height: 100%;
	padding: 0;
	overflow: hidden;
}

.contributions-container .row[b-fmuq6y6h0t] {
	height: auto;
	overflow: hidden;
}

/* Breadcrumb Navigation */
.breadcrumb-nav[b-fmuq6y6h0t] {
	background: var(--bg-secondary);
	padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem);
	margin: 0;
	border-bottom: 1px solid var(--gray-200);
}

.breadcrumb[b-fmuq6y6h0t] {
	margin: 0;
	background: transparent;
	padding: 0;
}

.breadcrumb-item a[b-fmuq6y6h0t] {
	color: var(--text-link);
	text-decoration: none;
}

.breadcrumb-item.active[b-fmuq6y6h0t] {
	color: var(--text-primary, #212529);
}

/* Contributions Header */
.contributions-header[b-fmuq6y6h0t] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg, 1.5rem);
	padding-bottom: var(--spacing-md, 1rem);
	border-bottom: 1px solid var(--gray-200, #e9ecef);
}

.contributions-header h4[b-fmuq6y6h0t] {
	margin: 0;
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold, 600);
}

.contact-info[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 0.5rem);
}

.contact-label[b-fmuq6y6h0t] {
	color: var(--text-secondary, #6c757d);
	font-weight: var(--font-weight-medium, 500);
}

.contact-name[b-fmuq6y6h0t] {
	color: var(--text-primary, #212529);
	font-weight: var(--font-weight-semibold, 600);
}

.view-all-link[b-fmuq6y6h0t] {
	color: var(--text-link, var(--primary-color, #0973b9));
	text-decoration: none;
	font-size: 0.9em;
	margin-left: var(--spacing-md, 1rem);
}

.view-all-link:hover[b-fmuq6y6h0t] {
	text-decoration: underline;
}

/* Filter Section */
.filter-section[b-fmuq6y6h0t] {
	background: var(--bg-secondary, #f8f9fa);
	padding: var(--spacing-md, 1rem);
	border-radius: var(--radius-sm, 4px);
	margin-bottom: var(--spacing-lg, 1.5rem);
	border: 1px solid var(--gray-200, #e9ecef);
}

.filter-buttons[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 0.5rem);
	margin-bottom: var(--spacing-md, 1rem);
}

.filter-logic.active[b-fmuq6y6h0t] {
	background-color: var(--primary-color, #0973b9);
	border-color: var(--primary-color, #0973b9);
}

.filter-or[b-fmuq6y6h0t] {
	color: var(--text-secondary, #6c757d);
	font-weight: var(--font-weight-medium, 500);
	margin: 0 var(--spacing-sm, 0.5rem);
}

.filter-remove[b-fmuq6y6h0t] {
	background-color: var(--gray-200, #e9ecef);
	border-color: var(--gray-300, #dee2e6);
	color: var(--text-primary, #212529);
}

.filter-controls[b-fmuq6y6h0t] {
	margin-bottom: var(--spacing-md, 1rem);
}

.filter-row[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 0.5rem);
	margin-bottom: var(--spacing-sm, 0.5rem);
}

.filter-field[b-fmuq6y6h0t],
.filter-operator[b-fmuq6y6h0t] {
	width: 150px;
}

.filter-value[b-fmuq6y6h0t] {
	flex: 1;
	min-width: 200px;
}

.filter-remove-row[b-fmuq6y6h0t] {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-new-section[b-fmuq6y6h0t] {
	text-align: right;
}

/* Contributions Table */
.contributions-table-container[b-fmuq6y6h0t] {
	background-color: var(--card-background);
	border-radius: var(--border-radius);
	overflow: hidden;
	height: calc(100vh - 120px);
}

/* Make the table container card flexible so empty state can fill vertical space */
.contributions-table-container .card[b-fmuq6y6h0t] {
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow);
	border-radius: var(--border-radius);
	background-color: var(--card-background);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.contributions-table-container .card-body[b-fmuq6y6h0t] {
	flex-grow: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 200px);
	--table-max-height: calc(100vh - 230px);
}

.contributions-table-container .table-responsive[b-fmuq6y6h0t] {
	flex-grow: 0;
	overflow-y: auto;
	overflow-x: auto;
	max-height: var(--table-max-height, calc(100vh - 180px));
	position: relative;
}

.anonymous-toggle-cell[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	min-height: 1.5rem;
}

.anonymous-toggle-cell .form-check-input[b-fmuq6y6h0t] {
	margin-top: 0;
}

/* Custom scrollbar styling for webkit browsers */
.contributions-table-container .table-responsive[b-fmuq6y6h0t]::-webkit-scrollbar {
	width: 8px;
}

.contributions-table-container .table-responsive[b-fmuq6y6h0t]::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.contributions-table-container .table-responsive[b-fmuq6y6h0t]::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: var(--radius-sm);
}

.contributions-table-container
	.table-responsive[b-fmuq6y6h0t]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
}

.contributions-table[b-fmuq6y6h0t] {
	margin: 0;
	font-size: 0.9em;
}

.contributions-table thead th[b-fmuq6y6h0t] {
	background: var(--bg-secondary);
	border-bottom: 2px solid var(--gray-200);
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold, 600);
	padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.contributions-table thead th i[b-fmuq6y6h0t] {
	color: var(--text-muted, #6c757d);
	font-size: 0.8em;
	margin-left: 4px;
}

.contributions-table tbody td[b-fmuq6y6h0t] {
	padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
	vertical-align: middle;
	border-bottom: 1px solid var(--gray-100, #f1f3f4);
}

.contributions-table tbody tr:hover[b-fmuq6y6h0t] {
	background-color: var(--bg-secondary);
}

.contributions-table .fas.fa-file-alt[b-fmuq6y6h0t] {
	color: var(--primary-color, #0973b9);
}

/* Responsive Design */
@media (max-width: 1200px) {
	.contributions-table-container[b-fmuq6y6h0t] {
		overflow-x: auto;
	}

	.contributions-table[b-fmuq6y6h0t] {
		min-width: 1000px;
	}
}

@media (max-width: 768px) {
	.contributions-header[b-fmuq6y6h0t] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md, 1rem);
	}

	.filter-row[b-fmuq6y6h0t] {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-field[b-fmuq6y6h0t],
	.filter-operator[b-fmuq6y6h0t],
	.filter-value[b-fmuq6y6h0t] {
		width: 100%;
	}

	.add-new-section[b-fmuq6y6h0t] {
		text-align: left;
	}
}

/* Pagination Styles */
.pagination-controls[b-fmuq6y6h0t] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-lg, 1.5rem);
	padding-top: var(--spacing-md, 1rem);
	border-top: 1px solid var(--border-color, var(--gray-300));
}

.pagination-info[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 1rem);
	color: var(--text-secondary, #6c757d);
	font-size: var(--font-size-sm, 0.875rem);
}

.page-size-selector[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs, 0.25rem);
}

.page-size-selector select[b-fmuq6y6h0t] {
	padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
	border: 1px solid var(--border-color, var(--gray-300));
	border-radius: var(--radius-sm, 4px);
	background: var(--bg-primary, #e9ecef);
	color: var(--text-primary, #212529);
	font-size: var(--font-size-sm, 0.875rem);
}

.pagination-nav[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs, 0.25rem);
}

.pagination-btn[b-fmuq6y6h0t] {
	padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
	border: 1px solid var(--border-color, var(--gray-300));
	background: var(--bg-primary, #e9ecef);
	color: var(--text-primary, #212529);
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	transition: var(--transition-all, all 0.3s ease);
	font-size: var(--font-size-sm, 0.875rem);
	min-width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pagination-btn:hover:not(:disabled)[b-fmuq6y6h0t] {
	background: var(--bg-hover, #f8f9fa);
	border-color: var(--primary-color, #0973b9);
}

.pagination-btn:disabled[b-fmuq6y6h0t] {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-btn.active[b-fmuq6y6h0t] {
	background: var(--primary-color, #0973b9);
	color: var(--text-light, #ffffff);
	border-color: var(--primary-color, #0973b9);
}

.pagination-ellipsis[b-fmuq6y6h0t] {
	padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
	color: var(--text-muted, #999999);
	font-size: var(--font-size-sm, 0.875rem);
	display: flex;
	align-items: center;
	height: 36px;
}

@media (max-width: 768px) {
	.pagination-controls[b-fmuq6y6h0t] {
		flex-direction: column;
		gap: var(--spacing-md, 1rem);
		align-items: stretch;
	}

	.pagination-info[b-fmuq6y6h0t] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm, 0.5rem);
	}

	.pagination-nav[b-fmuq6y6h0t] {
		justify-content: center;
		flex-wrap: wrap;
	}

	.page-size-selector[b-fmuq6y6h0t] {
		justify-content: flex-start;
	}
}

/* Utility classes */
.page-size-select[b-fmuq6y6h0t] {
	width: auto !important;
	min-width: 80px;
}

/* Page-scoped styles for Contributions page */

/* Make edit icons blue to match primary actions */
.contributions-container .fas.fa-edit[b-fmuq6y6h0t],
.contributions-table .fas.fa-edit[b-fmuq6y6h0t] {
	color: var(--primary-color);
}

/* Ensure buttons with edit icons also reflect primary color */
.contributions-container .btn-outline-secondary .fas.fa-edit[b-fmuq6y6h0t] {
	color: var(--primary-color);
}

/* Contributions Page Uniform Height */
.contributions-container[b-fmuq6y6h0t] {
	min-height: calc(100vh - 125px);
	padding: var(--spacing-sm);
}

/* Make edit icons primary color */
.contributions-container .fas.fa-edit[b-fmuq6y6h0t],
.contributions-table .fas.fa-edit[b-fmuq6y6h0t] {
	color: var(--primary-color, #0973b9);
}

.breadcrumb-nav[b-fmuq6y6h0t] {
	background: var(--bg-secondary, #f8f9fa);
	padding: 8px var(--spacing-md, 16px);
	margin: 0;
	border-bottom: 1px solid var(--gray-200, #e9ecef);

	/* Ensure buttons with edit icons also reflect primary color */
	.contributions-container .btn-outline-secondary .fas.fa-edit {
		color: var(--primary-color, #0973b9);
	}

	background: transparent;
	padding: 0;[b-fmuq6y6h0t]
}

.breadcrumb-item a[b-fmuq6y6h0t] {
	color: var(--primary-color, #0066cc);

	.contributions-container {
		min-height: calc(100vh - var(--header-height, 70px) - 55px);
		/* preserve similar height calculation */
		padding: var(--spacing-sm, 0.5rem);
	}

	text-decoration: none;[b-fmuq6y6h0t]
}

.breadcrumb-item.active[b-fmuq6y6h0t] {
	color: var(--text-dark, #333);
}

/* Contributions Container */
.contributions-container[b-fmuq6y6h0t] {
	padding: var(--spacing-sm, 24px);
	background: var(--bg-card, var(--white));
}

.contributions-header[b-fmuq6y6h0t] {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.breadcrumb-nav {
		background: var(--bg-secondary, #f8f9fa);
		padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem);
		margin: 0;
		border-bottom: 1px solid var(--gray-200, #e9ecef);
	}

	color: var(--text-dark, #333);
	font-weight: 600;[b-fmuq6y6h0t]
}

.contact-info[b-fmuq6y6h0t] {
	display: flex;

	.contributions-container {
		padding: var(--spacing-sm, 0.5rem);
		background: var(--bg-card, var(--white));
		max-height: calc(100vh - var(--header-height, 70px) - 55px);
	}

	align-items: center;
	gap: var(--spacing-sm, 8px);[b-fmuq6y6h0t]
}

.contact-label[b-fmuq6y6h0t] {
	color: var(--text-muted, #6c757d);
	font-weight: 500;
}

.contact-name[b-fmuq6y6h0t] {
	.contributions-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: var(--spacing-lg, 1.5rem);
		padding-bottom: var(--spacing-md, 1rem);
		border-bottom: 1px solid var(--gray-200, #e9ecef);
	}

	color: var(--text-dark, #333);
	font-weight: 600;[b-fmuq6y6h0t]
}

.view-all-link[b-fmuq6y6h0t] {
	color: var(--primary-color, #0066cc);
	text-decoration: none;

	.contributions-header h4 {
		margin: 0;
		color: var(--text-primary, #212529);
		font-weight: var(--font-weight-semibold, 600);
	}

	font-size: 0.9em;
	margin-left: var(--spacing-md, 16px);[b-fmuq6y6h0t]
}

.view-all-link:hover[b-fmuq6y6h0t] {
	text-decoration: underline;
}

/* Center empty-state content in the card body area when there are no records */
.empty-state-full[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	/* allow empty state to grow and fill card body (match pledges) */
	padding: 2.5rem 1rem;
}

.empty-state-full .text-center[b-fmuq6y6h0t] {
	max-width: 640px;
}

/* Empty-state hand+money icon: top/center = secondary color, ends lighter.
   Keep minimal and use existing variables. */
.empty-state-full .fa-hand-holding-usd[b-fmuq6y6h0t],
.empty-state-full .fa-hand-holding-usd[b-fmuq6y6h0t]::before {
	background: linear-gradient(
		180deg,
		var(--secondary-color) 0%,
		var(--secondary-color) 55%,
		var(--primary-light) 55%,
		var(--primary-light) 100%
	) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
	display: inline-block;
	font-size: 4rem;
	/* ~56px */
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* SVG fallback: if icon renders as inline SVG, keep fills using the secondary color */
.empty-state-full .svg-inline--fa[b-fmuq6y6h0t],
.empty-state-full .svg-inline--fa path[b-fmuq6y6h0t] {
	fill: var(--secondary-color) !important;
}

/* Size inline SVG icons to match font icon size */
.empty-state-full .svg-inline--fa[b-fmuq6y6h0t] {
	width: 3.5rem;
	height: 3.5rem;
	display: inline-block;
}

@media (max-width: 768px) {
	.empty-state-full .fa-hand-holding-usd[b-fmuq6y6h0t],
	.empty-state-full .svg-inline--fa[b-fmuq6y6h0t] {
		font-size: 2.5rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Ensure card body is a flex container allowing the empty state to grow */
.contributions-table-container .card .card-body[b-fmuq6y6h0t] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
	/* let empty-state-full control padding */
}

/* give the empty state a bit more room horizontally inside the card */
/* removed extra horizontal padding to match pledges centering */

/* Ensure main container and rows stretch the full viewport height so right panel can expand */
.contributions-container .container-fluid[b-fmuq6y6h0t] {
	min-height: calc(100vh - var(--header-height, 70px) - 55px);
}

.contributions-container .row[b-fmuq6y6h0t] {
	align-items: stretch;
}

.filter-panel .card[b-fmuq6y6h0t],
.filters-panel .card[b-fmuq6y6h0t] {
	height: 100%;
}

/* Filter Section */
.filter-section[b-fmuq6y6h0t] {
	background: var(--bg-light, #f8f9fa);

	.contact-label {
		color: var(--text-secondary, #6c757d);
		font-weight: var(--font-weight-medium, 500);
	}
}

.filter-buttons[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;

	.contact-name {
		color: var(--text-primary, #212529);
		font-weight: var(--font-weight-semibold, 600);
	}

	gap: var(--spacing-sm, 8px);
	margin-bottom: var(--spacing-md, 16px);[b-fmuq6y6h0t]
}

.filter-logic.active[b-fmuq6y6h0t] {
	background-color: var(--primary-color, #0973b9);
	border-color: var(--primary-color, #0973b9);
}

.view-all-link[b-fmuq6y6h0t] {
	color: var(--text-link, var(--primary-color, #0973b9));
	text-decoration: none;
	font-size: 0.9em;
	margin-left: var(--spacing-md, 1rem);
}

.filter-or[b-fmuq6y6h0t] {
	color: var(--text-muted, #6c757d);

	.view-all-link:hover {
		text-decoration: underline;
	}

	font-weight: 500;
	margin: 0 var(--spacing-sm, 8px);[b-fmuq6y6h0t]
}

.filter-remove[b-fmuq6y6h0t] {
	background-color: var(--gray-200, #e9ecef);
	border-color: var(--gray-300, #dee2e6);
	color: var(--text-dark, #333);
}

.filter-section[b-fmuq6y6h0t] {
	background: var(--bg-secondary, #f8f9fa);
	padding: var(--spacing-md, 1rem);
	border-radius: var(--radius-sm, 4px);
	margin-bottom: var(--spacing-lg, 1.5rem);
	border: 1px solid var(--gray-200, #e9ecef);
}

.filter-controls[b-fmuq6y6h0t] {
	margin-bottom: var(--spacing-md, 16px);
}

.filter-row[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;

	.filter-buttons {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm, 0.5rem);
		margin-bottom: var(--spacing-md, 1rem);
	}

	gap: var(--spacing-sm, 8px);
	margin-bottom: var(--spacing-sm, 8px);[b-fmuq6y6h0t]
}

.filter-field[b-fmuq6y6h0t],
.filter-operator[b-fmuq6y6h0t] {
	.filter-logic.active {
		background-color: var(--primary-color, #0973b9);
		border-color: var(--primary-color, #0973b9);
	}

	width: 150px;[b-fmuq6y6h0t]
}

.filter-value[b-fmuq6y6h0t] {
	flex: 1;
	min-width: 200px;
}

.filter-or[b-fmuq6y6h0t] {
	color: var(--text-secondary, #6c757d);
	font-weight: var(--font-weight-medium, 500);
	margin: 0 var(--spacing-sm, 0.5rem);
}

.filter-remove-row[b-fmuq6y6h0t] {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;

	.filter-remove {
		background-color: var(--gray-200, #e9ecef);
		border-color: var(--gray-300, #dee2e6);
		color: var(--text-primary, #212529);
	}

	justify-content: center;[b-fmuq6y6h0t]
}

.add-new-section[b-fmuq6y6h0t] {
	text-align: right;

	.filter-controls {
		margin-bottom: var(--spacing-md, 1rem);
	}
}

/* Contributions Table */
.contributions-table-container[b-fmuq6y6h0t] {
	background: var(--bg-card, var(--white));
	border-radius: var(--border-radius, 4px);
	/* border: 1px solid var(--gray-200, #e9ecef); */
	overflow: hidden;
}

.filter-row[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 0.5rem);
	margin-bottom: var(--spacing-sm, 0.5rem);
}

.contributions-table[b-fmuq6y6h0t] {
	margin: 0;
	font-size: 0.9em;
}

.filter-field[b-fmuq6y6h0t],
.filter-operator[b-fmuq6y6h0t] {
	width: 150px;
}

.contributions-table thead th[b-fmuq6y6h0t] {
	background: var(--bg-secondary, #f8f9fa);
	border-bottom: 2px solid var(--gray-200, #e9ecef);
	color: var(--text-dark, #333);
	font-weight: 600;

	.filter-value {
		flex: 1;
		min-width: 200px;
	}

	padding: var(--spacing-md, 16px) var(--spacing-sm, 8px);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;

	.add-new-section[b-fmuq6y6h0t] {
		text-align: right;
	}
}

.contributions-table thead th i[b-fmuq6y6h0t] {
	color: var(--text-muted, #6c757d);
	font-size: 0.8em;
	margin-left: 4px;
}

.contributions-table-container[b-fmuq6y6h0t] {
	background: var(--bg-card, var(--white));
	border-radius: var(--radius-lg, 10px);
	/* border: 1px solid var(--gray-200, #e9ecef); */
	overflow: hidden;
}

.contributions-table tbody td[b-fmuq6y6h0t] {
	padding: var(--spacing-md, 16px) var(--spacing-sm, 8px);
	vertical-align: middle;
	border-bottom: 1px solid var(--gray-100, #f1f3f4);
}

.contributions-table tbody tr:hover[b-fmuq6y6h0t] {
	background-color: var(--bg-light, #f8f9fa);
}

.contributions-table .fas.fa-file-alt[b-fmuq6y6h0t] {
	color: var(--primary-color, #0973b9);
}

/* Responsive Design */
@media (max-width: 1200px) {
	.contributions-table-container[b-fmuq6y6h0t] {
		.contributions-table thead th {
			background: var(--bg-secondary, #f8f9fa);
			border-bottom: 2px solid var(--gray-200, #e9ecef);
			color: var(--text-primary, #212529);
			font-weight: var(--font-weight-semibold, 600);
			padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
			white-space: nowrap;
			position: sticky;
			top: 0;
			z-index: 1;
		}

		overflow-x: auto;[b-fmuq6y6h0t]
	}

	.contributions-table[b-fmuq6y6h0t] {
		min-width: 1000px;
	}
}

.contributions-table tbody td[b-fmuq6y6h0t] {
	padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
	vertical-align: middle;
	border-bottom: 1px solid var(--gray-100, #f1f3f4);
}

@media (max-width: 768px) {
	.contributions-header[b-fmuq6y6h0t] {
		flex-direction: column;
		align-items: flex-start;

		.contributions-table tbody tr:hover {
			background-color: var(--bg-secondary, #f8f9fa);
		}

		gap: var(--spacing-md, 16px);[b-fmuq6y6h0t]
	}

	.filter-row[b-fmuq6y6h0t] {
		flex-direction: column;

		.contributions-table .fas.fa-file-alt {
			color: var(--primary-color, #0973b9);
		}

		align-items: stretch;[b-fmuq6y6h0t]
	}

	.filter-field[b-fmuq6y6h0t],
	.filter-operator[b-fmuq6y6h0t],
	.filter-value[b-fmuq6y6h0t] {
		width: 100%;
	}

	.add-new-section[b-fmuq6y6h0t] {
		text-align: left;
	}
}

/* Pagination Styles */
.pagination-controls[b-fmuq6y6h0t] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--border-color);
}

.pagination-info[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.page-size-selector[b-fmuq6y6h0t] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.page-size-selector select[b-fmuq6y6h0t] {
	.pagination-controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--spacing-lg, 1.5rem);
		padding-top: var(--spacing-md, 1rem);
		border-top: 1px solid var(--border-color, var(--gray-300));
	}

	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: var(--font-size-sm);[b-fmuq6y6h0t]
}

.pagination-nav[b-fmuq6y6h0t] {
	.pagination-info {
		display: flex;
		align-items: center;
		gap: var(--spacing-md, 1rem);
		color: var(--text-secondary, #6c757d);
		font-size: var(--font-size-sm, 0.875rem);
	}

	display: flex;
	align-items: center;
	gap: var(--spacing-xs);[b-fmuq6y6h0t]
}

.pagination-btn[b-fmuq6y6h0t] {
	padding: var(--spacing-xs) var(--spacing-sm);
	border: 1px solid var(--border-color);
	background: var(--bg-primary);
	color: var(--text-primary);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition-all);
	font-size: var(--font-size-sm);
	min-width: 36px;

	.page-size-selector select {
		padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
		border: 1px solid var(--border-color, var(--gray-300));
		border-radius: var(--radius-sm, 4px);
		background: var(--bg-primary, #e9ecef);
		color: var(--text-primary, #212529);
		font-size: var(--font-size-sm, 0.875rem);
	}

	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;[b-fmuq6y6h0t]
}

.pagination-btn:hover:not(:disabled)[b-fmuq6y6h0t] {
	background: var(--bg-hover);
	border-color: var(--primary-color);
}

.pagination-btn:disabled[b-fmuq6y6h0t] {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-btn.active[b-fmuq6y6h0t] {
	background: var(--primary-color);
	color: var(--text-light);
	border-color: var(--primary-color);
}

.pagination-ellipsis[b-fmuq6y6h0t] {
	padding: var(--spacing-xs) var(--spacing-sm);

	.pagination-btn {
		padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
		border: 1px solid var(--border-color, var(--gray-300));
		background: var(--bg-primary, #e9ecef);
		color: var(--text-primary, #212529);
		border-radius: var(--radius-sm, 4px);
		cursor: pointer;
		transition: var(--transition-all, all 0.3s ease);
		font-size: var(--font-size-sm, 0.875rem);
		min-width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	color: var(--text-muted);
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
	height: 36px;[b-fmuq6y6h0t]
}

.pagination-btn:hover:not(:disabled)[b-fmuq6y6h0t] {
	background: var(--bg-hover, #f8f9fa);
	border-color: var(--primary-color, #0973b9);
}

/* Responsive Design for Pagination */
@media (max-width: 768px) {
	.pagination-controls[b-fmuq6y6h0t] {
		flex-direction: column;
		gap: var(--spacing-md);
		align-items: stretch;

		.pagination-btn.active {
			background: var(--primary-color, #0973b9);
			color: var(--text-light, #ffffff);
			border-color: var(--primary-color, #0973b9);
		}
	}

	.pagination-info[b-fmuq6y6h0t] {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	.pagination-nav[b-fmuq6y6h0t] {
		justify-content: center;
		flex-wrap: wrap;
	}

	.page-size-selector[b-fmuq6y6h0t] {
		justify-content: flex-start;
	}
}

/* Utility classes for inline style removal */
.page-size-select[b-fmuq6y6h0t] {
	width: auto !important;
	min-width: 80px;
}

.heading-text[b-fmuq6y6h0t] {
	display: inline-block;
}

.ms-heading[b-fmuq6y6h0t] {
	margin-left: calc(0.7rem + 1.25em);
	/* adjusts for icon width */
}

/* View All button hover - white background with blue text */
.card-header-gradient .btn-outline-light:hover[b-fmuq6y6h0t] {
	background-color: var(--white, #ffffff) !important;
	color: var(--primary-color, #0973b9) !important;
	border-color: var(--white, #ffffff) !important;
}

.void-modal-header[b-fmuq6y6h0t] {
	background: linear-gradient(
		135deg,
		var(--primary-color) 0%,
		var(--primary-600) 100%
	);
	border-bottom: 1px solid var(--border-light);
	padding: var(--spacing-md);
}

.void-modal-header .modal-title[b-fmuq6y6h0t] {
	color: var(--white);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	margin: 0;
}

.void-modal-header .modal-title i[b-fmuq6y6h0t] {
	color: var(--white);
}

.modal-footer .btn[b-fmuq6y6h0t] {
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.modal-footer .btn i[b-fmuq6y6h0t] {
	font-size: var(--font-size-sm);
}
/* /Pages/CreateActivity.razor.rz.scp.css */
.create-activity-container[b-10fy3p1tan] {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* Page Header */
.page-header[b-10fy3p1tan] {
    background: var(--gradient-card);
    margin-bottom: 1em;
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.header-content[b-10fy3p1tan] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.page-title[b-10fy3p1tan] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.page-title i[b-10fy3p1tan] {
    color: var(--text-light);
    opacity: 0.9;
}

.page-header .btn-light[b-10fy3p1tan] {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

.page-header .btn-light:hover[b-10fy3p1tan] {
    background-color: white;
    border-color: white;
    color: var(--primary-color-dark);
}

.page-header .btn-outline-secondary[b-10fy3p1tan] {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-light);
    background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-10fy3p1tan] {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--text-light);
    color: var(--text-light);
}

/* Card Header Styling - Primary Blue Background */
.card-header[b-10fy3p1tan] {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    font-weight: var(--font-weight-bold) !important;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12) !important;
}

/* Header text and icons should use on-primary / light text */
.card-header h4[b-10fy3p1tan],
.card-header i[b-10fy3p1tan],
.card-header .btn[b-10fy3p1tan],
.card-header .btn-outline-secondary[b-10fy3p1tan] {
    color: var(--text-light) !important;
}

/* Header button styling */
.card-header .btn-outline-secondary[b-10fy3p1tan] {
    border-color: var(--text-light) !important;
    background: transparent !important;
}

.card-header .btn-outline-secondary:hover[b-10fy3p1tan] {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    border-color: var(--text-light) !important;
    color: var(--text-light) !important;
}

.section-card[b-10fy3p1tan] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--card-shadow);
}

/* Purple themed section card */
.section-card.purple[b-10fy3p1tan] {
    border-left: 4px solid var(--metric-purple);
    box-shadow:
        var(--shadow-sm),
        2px 0 8px color-mix(in srgb, var(--metric-purple) 15%, transparent);
}

/* Orange themed section card */
.section-card.orange[b-10fy3p1tan] {
    border-left: 4px solid var(--metric-orange);
    box-shadow:
        var(--shadow-sm),
        2px 0 8px color-mix(in srgb, var(--metric-orange) 15%, transparent);
}

/* Green themed section card */
.section-card.green[b-10fy3p1tan] {
    border-left: 4px solid var(--metric-green);
    box-shadow:
        var(--shadow-sm),
        2px 0 8px color-mix(in srgb, var(--metric-green) 15%, transparent);
}

.section-title[b-10fy3p1tan] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.form-group[b-10fy3p1tan] {
    margin-bottom: var(--spacing-md);
}

.form-label[b-10fy3p1tan] {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

/* Required asterisk styling */
.required-asterisk[b-10fy3p1tan] {
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-xs);
}

/* Character count styling */
.character-count[b-10fy3p1tan] {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Validation Message Styling */
.validation-message[b-10fy3p1tan] {
    display: block;
    width: 100%;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--danger-color);
    animation: fadeIn-b-10fy3p1tan 0.3s ease-in-out;
}

/* Ensure validation messages appear below inputs */
.form-group .validation-message[b-10fy3p1tan],
.form-group .field-validation-error[b-10fy3p1tan] {
    margin-top: var(--spacing-xs);
    display: block;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--danger-color);
    animation: fadeIn-b-10fy3p1tan 0.3s ease-in-out;
}

/* Real-time validation animation */
@keyframes fadeIn-b-10fy3p1tan {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced invalid form control styling */
/* Validation states (consolidated)
   - Invalid states: shown as red border only inside this component (no glows)
   - Valid states: shown as green border only (no glows)
*/
.create-activity-container[b-10fy3p1tan]  :is(
    .form-control.invalid,
    .form-select.invalid,
    .form-control.is-invalid,
    .form-select.is-invalid,
    .e-input.is-invalid,
    .e-input-group.is-invalid,
    .e-date-wrapper.is-invalid,
    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"]
) {
    border-color: var(--danger-color) !important;
    box-shadow: none !important;
    outline: none !important;
}

.create-activity-container[b-10fy3p1tan]  :is(
    .form-control.is-valid,
    .form-select.is-valid,
    .e-input.is-valid
) {
    border-color: var(--success-color) !important;
    box-shadow: none !important;
}

/* Form actions styling */
.form-actions[b-10fy3p1tan] {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Icon colors - make them blue/primary color for all headings EXCEPT the main header */
.section-title i[b-10fy3p1tan],
.form-label i[b-10fy3p1tan],
h4:not(.card-header h4) i[b-10fy3p1tan],
h5 i[b-10fy3p1tan],
h6 i[b-10fy3p1tan],
.text-primary i[b-10fy3p1tan],
i.text-primary[b-10fy3p1tan] {
    color: var(--primary-color) !important;
}

/* Improve button styling */
.btn-outline-primary:hover[b-10fy3p1tan] {
    color: var(--text-light);
}

/* Event registration section styling */
.form-check-input:checked[b-10fy3p1tan] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Image upload styles */
.image-upload-container[b-10fy3p1tan] {
    position: relative;
    width: 100%;
}

/* Enhanced layout for better spacing in the expanded col-md-9 section */
.col-md-9 .row[b-10fy3p1tan] {
    margin-bottom: var(--spacing-sm);
}

.col-md-9 .row:last-child[b-10fy3p1tan] {
    margin-bottom: 0;
}

/* Ensure consistent form group spacing within the reorganized layout */
.col-md-9 .form-group[b-10fy3p1tan] {
    margin-bottom: var(--spacing-md);
}

.image-preview[b-10fy3p1tan] {
    width: 100%;
    height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-all);
    position: relative;
    overflow: hidden;
}

.image-preview:hover[b-10fy3p1tan] {
    border-color: var(--primary-color);
    background-color: var(--bg-hover);
}

.preview-image[b-10fy3p1tan] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.image-overlay[b-10fy3p1tan] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-dark);
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-all);
}

.image-preview:hover .image-overlay[b-10fy3p1tan] {
    opacity: 1;
}

.image-placeholder[b-10fy3p1tan] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.image-placeholder i[b-10fy3p1tan] {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-muted);
}

.image-placeholder small[b-10fy3p1tan] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .create-activity-container[b-10fy3p1tan] {
        padding: var(--spacing-sm);
    }

    .section-card[b-10fy3p1tan] {
        padding: var(--spacing-md);
    }

    .form-actions .d-flex[b-10fy3p1tan] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .form-actions .d-flex .d-flex[b-10fy3p1tan] {
        flex-direction: row;
    }

    .image-preview[b-10fy3p1tan] {
        height: 150px;
    }
}

/* Ensure Syncfusion datepicker inputs match our `.form-control` height and padding
   — use local tokens and :is() to keep rules concise while preserving overrides */
.create-activity-container[b-10fy3p1tan] {
    --ca-field-height: var(--form-control-height, 38px);
    --ca-input-padding-inline: var(--spacing-6) var(--spacing-12);
    --ca-icon-padding: var(--spacing-sm);
}

.create-activity-container[b-10fy3p1tan]  :is(.e-input-group, .e-date-wrapper, .e-control-wrapper, .e-datepicker, .e-datetimepicker, .e-timepicker) {
    display: flex !important;
    align-items: center !important;
    height: var(--ca-field-height) !important;
    min-height: var(--ca-field-height) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

.create-activity-container[b-10fy3p1tan]  :is(.e-input-group, .e-date-wrapper, .e-control-wrapper, .e-datepicker, .e-datetimepicker, .e-timepicker) .e-input {
    display: block !important;
    width: 100% !important;
    padding: var(--ca-input-padding-inline) !important;
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
    height: var(--ca-field-height) !important;
    min-height: var(--ca-field-height) !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-sm) !important;
}

.create-activity-container[b-10fy3p1tan]  :is(.e-input-group .e-input-group-icon, .e-date-wrapper .e-input-group-icon, .e-input-group .e-input + .e-input-group-icon, .e-date-wrapper .e-input + .e-input-group-icon) {
    display: flex !important;
    align-items: center !important;
    height: var(--ca-field-height) !important;
    padding: 0 var(--ca-icon-padding) !important;
}

.create-activity-container[b-10fy3p1tan]  :is(.e-input-group .e-input + .e-input-group-icon, .e-date-wrapper .e-input + .e-input-group-icon) {
    margin-left: var(--spacing-xs) !important;
}

.create-activity-container[b-10fy3p1tan]  :is(.e-date-wrapper.is-invalid .e-input, .e-input-group.is-invalid .e-input, input[aria-invalid="true"]) {
    border-color: var(--danger-color) !important;
}

/* Stronger override: ensure any input or wrapper inside this page shows danger styling
   when marked invalid (covers outlines applied by global rules like `.valid.modified`). */
.create-activity-container[b-10fy3p1tan]  :is(
    .e-date-wrapper.is-invalid,
    .e-input-group.is-invalid,
    .e-control-wrapper.is-invalid,
    .e-input.is-invalid,
    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"]
) {
    outline: none !important;
    border-color: var(--danger-color) !important;
    /* box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--danger-color) 15%, transparent) !important; */
}

/* Field with tooltip container */
.field-with-tooltip[b-10fy3p1tan] {
    position: relative;
}

/* Tooltip icon inside input/textarea */
/* Helper text shown on hover under inputs (grey, italic) */
.field-help-text[b-10fy3p1tan] {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(var(--spacing-sm));
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-sm);
    padding: 0;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    z-index: 1200;
}

.field-help-text.multiline[b-10fy3p1tan] {
    white-space: normal;
    max-width: var(--receipt-text-max-width);
    text-align: left;
}

/* Helper text is shown only when hovering or focusing the icon (handled below) */

/* Adjust padding for inputs with tooltip icons */
.field-with-tooltip .form-control[b-10fy3p1tan],
.field-with-tooltip textarea.form-control[b-10fy3p1tan] {
    /* reserve space for the tooltip icon at the right */
    padding-right: var(--spacing-32);
}

/* Tooltip icon inside input/textarea (right end) */
.field-tooltip-icon[b-10fy3p1tan] {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    z-index: var(--z-tooltip);
}

/* Show helper text only when hovering the icon */
.field-tooltip-icon:hover + .field-help-text[b-10fy3p1tan],
.field-tooltip-icon:focus + .field-help-text[b-10fy3p1tan] {
    display: block;
}
/* /Pages/CreateCampaign.razor.rz.scp.css */
/* Create Campaign Page Styling */

/* Full screen container for expanded layout */
.create-campaign-fullscreen[b-kvq06ahpcw] {
    background-color: var(--bg-primary);
    min-height: calc(100vh - var(--header-height, 80px) - var(--footer-height, 60px));
    padding: var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

.create-campaign-container[b-kvq06ahpcw] {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
}

.create-campaign-card[b-kvq06ahpcw] {
    background-color: var(--bg-card);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: var(--modal-max-width, 900px);
    margin-top: var(--spacing-md);
}

.card-header[b-kvq06ahpcw] {
    background: var(--gradient-card);
    color: var(--text-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-header h2[b-kvq06ahpcw] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
    font-family: var(--font-family-primary);
}

.card-body[b-kvq06ahpcw] {
    padding: var(--spacing-2xl);
}

/* Form Styling */
.form-group[b-kvq06ahpcw] {
    margin-bottom: var(--spacing-xl);
}

/* Floating Label Styling */
.floating-label-group[b-kvq06ahpcw] {
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.floating-input[b-kvq06ahpcw] {
    width: 100%;
    background-color: var(--white);
    border: 2px solid var(--input-border-variant);
    border-radius: var(--radius-sm);
    padding: 1.5rem 0.75rem 0.5rem 0.75rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--text-primary);
    transition: var(--transition-fast);
    background-color: transparent;
}

.floating-input:focus[b-kvq06ahpcw] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 var(--focus-outline-width) var(--primary-color);
}

/* Label positioning - starts in the middle of input like placeholder */
.floating-label[b-kvq06ahpcw] {
    position: absolute;
    left: 0.75rem;
    top: 1rem;
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--floating-label-color);
    transition: var(--transition-fast);
    pointer-events: none;
    transform-origin: left top;
    background-color: var(--white);
    padding: 0 0.25rem;
    z-index: 1;
}

/* Animated state when focused or has content */
.floating-input:focus+.floating-label[b-kvq06ahpcw],
.floating-input.has-value+.floating-label[b-kvq06ahpcw] {
    top: var(--floating-label-top-focused, -0.5rem);
    left: var(--floating-label-left-focused, 0.5rem);
    font-size: var(--floating-label-font-size-focused, 0.75rem);
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

/* Enhanced floating label states */
.floating-input:focus+.floating-label[b-kvq06ahpcw] {
    color: var(--primary-color);
}

.floating-input.has-value+.floating-label[b-kvq06ahpcw] {
    color: var(--text-primary);
}

/* Special positioning for textarea labels */
.floating-input.description-textarea+.floating-label[b-kvq06ahpcw] {
    top: var(--spacing-lg);
}

/* Legacy form styling for backward compatibility */
.form-label[b-kvq06ahpcw] {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
}

.required-asterisk[b-kvq06ahpcw] {
    color: var(--danger-color);
    font-weight: var(--font-weight-bold);
    margin-left: 2px;
}

.form-control[b-kvq06ahpcw] {
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--input-border-muted);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.form-control:focus[b-kvq06ahpcw] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--shadow-focus);
}

/* Special styling for textarea in floating label */
.floating-input.description-textarea[b-kvq06ahpcw] {
    resize: vertical;
    min-height: var(--textarea-min-height);
    padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal) var(--textarea-padding-bottom) var(--textarea-padding-horizontal);
}

/* Label positioning for textarea - same as regular inputs */
.floating-input.description-textarea+.floating-label[b-kvq06ahpcw] {
    top: 1rem;
    left: 0.75rem;
}

.floating-input.description-textarea:focus+.floating-label[b-kvq06ahpcw],
.floating-input.description-textarea.has-value+.floating-label[b-kvq06ahpcw] {
    top: var(--floating-label-top-focused, -0.5rem);
    left: var(--floating-label-left-focused, 0.5rem);
    font-size: var(--floating-label-font-size-focused, 0.75rem);
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
}

/* Validation Error Styling */
.field-validation-error[b-kvq06ahpcw] {
    color: var(--danger-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    font-family: var(--font-family-primary);
    display: block;
}

/* Validation Success Styling */
.field-validation-success[b-kvq06ahpcw] {
    color: var(--success-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-xs);
    font-family: var(--font-family-primary);
    display: block;
}

/* Action Buttons */
.action-buttons[b-kvq06ahpcw] {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--gray-200);
}

.btn[b-kvq06ahpcw] {
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-all);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--btn-min-width);
}

.btn:disabled[b-kvq06ahpcw] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary[b-kvq06ahpcw] {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-kvq06ahpcw] {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    box-shadow: var(--shadow-hover);
}

.btn-secondary[b-kvq06ahpcw] {
    background-color: var(--gray-500);
    color: var(--text-light);
    border-color: var(--gray-500);
}

.btn-secondary:hover[b-kvq06ahpcw] {
    background-color: var(--gray-600);
    border-color: var(--gray-600);
}

/* Loading Spinner */
.spinner-border-sm[b-kvq06ahpcw] {
    width: var(--spinner-sm);
    height: var(--spinner-sm);
}

/* Responsive Design */
@media (max-width: var(--breakpoint-md)) {
    .create-campaign-fullscreen[b-kvq06ahpcw] {
        padding: var(--spacing-md);
        margin-left: 0;
        width: 100%;
    }

    .create-campaign-container[b-kvq06ahpcw] {
        padding: 0;
    }

    .create-campaign-card[b-kvq06ahpcw] {
        margin-top: var(--spacing-md);
        max-width: 100%;
    }

    .card-body[b-kvq06ahpcw] {
        padding: var(--spacing-lg);
    }

    .action-buttons[b-kvq06ahpcw] {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .btn[b-kvq06ahpcw] {
        width: 100%;
        margin-bottom: 0;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .form-control[b-kvq06ahpcw] {
        border-width: 2px;
    }

    .field-validation-error[b-kvq06ahpcw] {
        font-weight: var(--font-weight-bold);
    }
}

/* Confirmation Dialog Styling */
.modal-overlay[b-kvq06ahpcw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-overlay-bg);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-overlay);
    animation: fadeIn-b-kvq06ahpcw var(--modal-fade-duration) ease-in-out;
}

.confirmation-dialog[b-kvq06ahpcw] {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn-b-kvq06ahpcw var(--modal-fade-duration) ease-out;
}

.dialog-header[b-kvq06ahpcw] {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gradient-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dialog-title[b-kvq06ahpcw] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-light);
    font-family: var(--font-family-primary);
}

.dialog-body[b-kvq06ahpcw] {
    padding: var(--spacing-xl);
}

.dialog-message[b-kvq06ahpcw] {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.5;
    font-family: var(--font-family-primary);
}

.dialog-actions[b-kvq06ahpcw] {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    background-color: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dialog-actions .btn[b-kvq06ahpcw] {
    min-width: 80px;
}

/* Animation keyframes */
@keyframes fadeIn-b-kvq06ahpcw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-kvq06ahpcw {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive dialog */
@media (max-width: var(--breakpoint-md)) {
    .confirmation-dialog[b-kvq06ahpcw] {
        width: 95%;
        max-width: 400px;
    }

    .dialog-actions[b-kvq06ahpcw] {
        flex-direction: column;
    }

    .dialog-actions .btn[b-kvq06ahpcw] {
        width: 100%;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .form-control[b-kvq06ahpcw],
    .btn[b-kvq06ahpcw] {
        transition: none;
    }

    .modal-overlay[b-kvq06ahpcw],
    .confirmation-dialog[b-kvq06ahpcw] {
        animation: none;
    }
}
/* /Pages/CreateContribution.razor.rz.scp.css */
/* Create Contribution Page Uniform Height */
.create-contribution-container[b-6l2qphd3pd] {
	min-height: calc(100vh - 180px);
	padding: var(--spacing-sm);
}

.create-contribution-container .container-fluid[b-6l2qphd3pd] {
	min-height: 100%;
}

/* Page Header */
.page-header[b-6l2qphd3pd] {
	background: var(--gradient-card);
	margin-bottom: 1em;
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.header-content[b-6l2qphd3pd] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.page-title[b-6l2qphd3pd] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.page-title i[b-6l2qphd3pd] {
	color: var(--text-light);
	opacity: 0.9;
}

.page-header .btn-light[b-6l2qphd3pd] {
	background-color: rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.95);
	color: var(--primary-color);
	font-weight: var(--font-weight-medium);
}

.page-header .btn-light:hover[b-6l2qphd3pd] {
	background-color: white;
	border-color: white;
	color: var(--primary-color-dark);
}

.page-header .btn-outline-secondary[b-6l2qphd3pd] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-6l2qphd3pd] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

/* Pledge amount input width */
.pledge-amount-input[b-6l2qphd3pd] {
	width: 120px;
}

/* Create Contribution Page Styles */
.card[b-6l2qphd3pd] {
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-lg);
	border: none;
}

.card-header[b-6l2qphd3pd] {
	background: linear-gradient(
		135deg,
		var(--bg-primary) 0%,
		var(--bg-secondary) 100%
	);
	border-bottom: 1px solid var(--border-color);
	padding: var(--spacing-md);
}

/* Ensure pages that opt into the global gradient header use the primary gradient and light text */
.card-header.card-header-gradient[b-6l2qphd3pd] {
	background: linear-gradient(
		45deg,
		var(--primary-color),
		var(--primary-color-dark)
	);
	color: var(--text-light);
	border-bottom: 1px solid var(--border-color);
}

.card-header.card-header-gradient h4[b-6l2qphd3pd] {
	color: var(--text-light);
}

/* Stronger override scoped to this page container so it wins over other rules */
.create-contribution-container .card-header.card-header-gradient[b-6l2qphd3pd] {
	background: linear-gradient(
		45deg,
		var(--primary-color),
		var(--primary-color-dark)
	) !important;
	color: var(--text-light) !important;
	border-bottom: 1px solid var(--border-color) !important;
}

.create-contribution-container .card-header.card-header-gradient h4[b-6l2qphd3pd] {
	color: var(--text-light) !important;
}

.card-header h4[b-6l2qphd3pd] {
	color: var(--text-primary);
	margin: 0;
}

.card-body[b-6l2qphd3pd] {
	padding: var(--spacing-lg);
}

.form-label[b-6l2qphd3pd] {
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.form-control[b-6l2qphd3pd],
.form-select[b-6l2qphd3pd] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm);
	transition: var(--transition-all);
}

.form-control:focus[b-6l2qphd3pd],
.form-select:focus[b-6l2qphd3pd] {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.form-select:disabled[b-6l2qphd3pd] {
	background-color: var(--bg-disabled, #f8f9fa);
	color: var(--text-disabled, #6c757d);
	border-color: var(--border-color-disabled, #dee2e6);
	cursor: not-allowed;
}

/* Contributor locked / readonly styling to match pledge locked appearance */
.create-contribution-container input[readonly][b-6l2qphd3pd],
.create-contribution-container .form-control[readonly][b-6l2qphd3pd] {
	background-color: var(--bg-light);
	border-color: var(--border-color);
	color: var(--text-muted);
	cursor: not-allowed;
}

/* Contributor Name input - keep text black even when readonly */
.create-contribution-container .contributor-name-input[readonly][b-6l2qphd3pd] {
	background-color: var(--white);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

.create-contribution-container .contributor-name-input[readonly]:focus[b-6l2qphd3pd] {
	box-shadow: none;
	outline: none;
}

/* Also apply same visual treatment for disabled inputs (not only readonly) */
.create-contribution-container input[disabled][b-6l2qphd3pd],
.create-contribution-container .form-control[disabled][b-6l2qphd3pd] {
	background-color: var(--bg-light);
	border-color: var(--border-color);
	color: var(--text-muted);
	cursor: not-allowed;
	opacity: 1;
	/* prevent Bootstrap from dimming via opacity */
}

.create-contribution-container input[disabled]:focus[b-6l2qphd3pd],
.create-contribution-container .form-control[disabled]:focus[b-6l2qphd3pd] {
	box-shadow: none;
	outline: none;
}

/* Not-allowed cursor for all disabled / readonly interactive elements in edit mode */
.create-contribution-container input[disabled][b-6l2qphd3pd],
.create-contribution-container textarea[disabled][b-6l2qphd3pd],
.create-contribution-container select[disabled][b-6l2qphd3pd],
.create-contribution-container input[readonly][b-6l2qphd3pd],
.create-contribution-container textarea[readonly][b-6l2qphd3pd],
.create-contribution-container .form-check-input[disabled][b-6l2qphd3pd],
.create-contribution-container input[type="radio"][disabled][b-6l2qphd3pd],
.create-contribution-container input[type="checkbox"][disabled][b-6l2qphd3pd] {
	cursor: not-allowed !important;
}

/* Propagate not-allowed to the surrounding label / wrapper so the full clickable area shows the cursor */
.create-contribution-container
	.form-check:has(.form-check-input[disabled])
	.form-check-label[b-6l2qphd3pd],
.create-contribution-container .form-check:has(input[type="radio"][disabled])[b-6l2qphd3pd],
.create-contribution-container
	.form-check:has(input[type="radio"][disabled])
	label[b-6l2qphd3pd],
.create-contribution-container
	.form-check:has(input[type="checkbox"][disabled])
	.form-check-label[b-6l2qphd3pd] {
	cursor: not-allowed !important;
}

/* SfDatePicker disabled wrapper */
.create-contribution-container .e-input-group.e-disabled[b-6l2qphd3pd],
.create-contribution-container .e-input-group.e-disabled input[b-6l2qphd3pd],
.create-contribution-container .e-input-group.e-disabled .e-input-group-icon[b-6l2qphd3pd] {
	cursor: not-allowed !important;
}

.create-contribution-container label .fa-lock[b-6l2qphd3pd] {
	color: var(--text-muted);
	font-size: 0.9rem;
}

.create-contribution-container small.text-muted[b-6l2qphd3pd] {
	color: var(--text-muted);
}

.form-control.mt-2[b-6l2qphd3pd] {
	margin-top: var(--spacing-sm) !important;
	border-top: 2px solid var(--primary-color-light, #e3f2fd);
	animation: slideDown-b-6l2qphd3pd 0.3s ease-out;
}

@keyframes slideDown-b-6l2qphd3pd {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.btn[b-6l2qphd3pd] {
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-medium);
	transition: var(--transition-all);
}

.btn-primary[b-6l2qphd3pd] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
}

.btn-primary:hover[b-6l2qphd3pd] {
	background-color: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
}

.btn-outline-secondary[b-6l2qphd3pd] {
	border-color: var(--border-color);
	color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-6l2qphd3pd] {
	background-color: var(--bg-hover);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.btn-link[b-6l2qphd3pd] {
	color: var(--text-secondary);
	text-decoration: none;
	padding: var(--spacing-xs);
}

.btn-link:hover[b-6l2qphd3pd] {
	color: var(--primary-color);
}

.alert[b-6l2qphd3pd] {
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.alert-danger[b-6l2qphd3pd] {
	background-color: var(--danger-color-light);
	border-color: var(--danger-color);
	color: var(--danger-color-dark);
}

.bg-light[b-6l2qphd3pd] {
	background-color: var(--bg-secondary) !important;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
}

.text-primary[b-6l2qphd3pd] {
	color: var(--primary-color) !important;
}

.spinner-border-sm[b-6l2qphd3pd] {
	width: 1rem;
	height: 1rem;
}

.input-group-text[b-6l2qphd3pd] {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-secondary);
}

/* Validation Styles */
.field-validation-error[b-6l2qphd3pd] {
	color: var(--danger-color);
	font-size: var(--font-size-sm);
	margin-top: var(--spacing-xs);
}

.validation-message[b-6l2qphd3pd] {
	color: var(--danger-color);
	font-size: var(--font-size-sm);
	margin-top: var(--spacing-xs);
}

/* Enhanced styling for contributor selection */
.form-select option[value="other"][b-6l2qphd3pd] {
	font-style: italic;
	color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.container-fluid[b-6l2qphd3pd] {
		padding: var(--spacing-sm);
	}

	.card-body[b-6l2qphd3pd] {
		padding: var(--spacing-md);
	}
}

/* Confirmation Dialog Styling */
.modal-overlay[b-6l2qphd3pd] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--modal-overlay-bg);
	backdrop-filter: blur(var(--modal-backdrop-blur));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal-overlay);
	animation: fadeIn-b-6l2qphd3pd var(--modal-fade-duration) ease-in-out;
}

.confirmation-dialog[b-6l2qphd3pd] {
	background-color: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2xl);
	max-width: 500px;
	width: 90%;
	/* Use a compact max-height to match other confirmation popups */
	max-height: 320px;
	overflow-y: auto;
	animation: slideIn-b-6l2qphd3pd var(--modal-fade-duration) ease-out;
}

.dialog-header[b-6l2qphd3pd] {
	/* Use same compact header padding as confirmation component */
	padding: var(--spacing-md) var(--spacing-md);
	border-bottom: 1px solid var(--gray-200);
	background-color: var(--primary-color);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dialog-header h5[b-6l2qphd3pd] {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--text-light);
	font-family: var(--font-family-primary);
	display: flex;
	align-items: center;
}

.dialog-header h5 i[b-6l2qphd3pd] {
	color: var(--text-light);
	/* match Activity popup icon size: slightly smaller than 1.2em */
	font-size: 1.4rem;
}

.dialog-body[b-6l2qphd3pd] {
	/* Compact body padding to reduce overall dialog height */
	padding: var(--spacing-md) var(--spacing-md);
}

.dialog-body p[b-6l2qphd3pd] {
	margin: 0;
	font-size: var(--font-size-base);
	color: var(--text-primary);
	line-height: 1.5;
	font-family: var(--font-family-primary);
}

.dialog-actions[b-6l2qphd3pd] {
	/* top/bottom: lg, left/right: md to match other modals */
	padding: var(--spacing-lg) var(--spacing-md);
	border-top: 1px solid var(--gray-200);
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-sm);
	/* 0.5rem = 8px between buttons */
	background-color: var(--gray-50);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dialog-actions .btn[b-6l2qphd3pd] {
	min-width: 80px;
	margin: 0;
	/* rely on gap + padding for spacing */
}

/* Make the destructive "Yes, Discard" action use the primary color to match the header */
.confirmation-dialog .dialog-actions .btn-danger[b-6l2qphd3pd] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
}

.confirmation-dialog .dialog-actions .btn-danger:hover[b-6l2qphd3pd] {
	background-color: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
}

/* Animation keyframes */
@keyframes fadeIn-b-6l2qphd3pd {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideIn-b-6l2qphd3pd {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Responsive dialog */
@media (max-width: var(--breakpoint-md)) {
	.confirmation-dialog[b-6l2qphd3pd] {
		width: 95%;
		max-width: 400px;
	}

	.dialog-actions[b-6l2qphd3pd] {
		flex-direction: column-reverse;
	}

	.dialog-actions .btn[b-6l2qphd3pd] {
		width: 100%;
	}
}
/* /Pages/CreateEmail.razor.rz.scp.css */
/* Create Email Page Styles */

.create-email-container[b-1pi01v1b7k] {
	padding: var(--spacing-md);
	max-width: 1600px;
	margin: 0 auto;
}

/* Page Header */
.page-header[b-1pi01v1b7k] {
	background: var(--gradient-card);
	margin-bottom: 1em;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.header-content[b-1pi01v1b7k] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
}

.page-title[b-1pi01v1b7k] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}

.page-title i[b-1pi01v1b7k] {
	color: var(--text-light);
	opacity: 0.9;
}

.page-subtitle[b-1pi01v1b7k] {
	font-size: var(--font-size-sm);
	color: var(--text-light);
	margin: 0;
	margin-left: 28px;
	opacity: 0.95;
}

.page-header .btn-outline-secondary[b-1pi01v1b7k] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-1pi01v1b7k] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

/* Email Form Card */
.email-form-card[b-1pi01v1b7k] {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: var(--spacing-3);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-light);
}

.form-section[b-1pi01v1b7k] {
	margin-bottom: var(--spacing-3);
}

/* Email Config Container - Activity, Template, Recipients */
.email-config-container[b-1pi01v1b7k] {
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm);
	padding-left: var(--spacing-md);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-light);
	border-left: 4px solid var(--primary-color);
	margin: var(--spacing-sm);
}

/* Email Content Container - Subject, Body, Insert Fields */
.email-content-container[b-1pi01v1b7k] {
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	padding-left: var(--spacing-md);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-light);
	border-left: 4px solid var(--info-color);
	margin: var(--spacing-sm);
}

/* Form Labels */
.form-label[b-1pi01v1b7k] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-1);
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
}

.form-label i[b-1pi01v1b7k] {
	color: var(--primary-color);
}

/* Template Dropdown (Disabled) */
.template-dropdown:disabled[b-1pi01v1b7k] {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: var(--surface-variant);
}

/* Recipients Control */
.recipients-control[b-1pi01v1b7k] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-2);
	padding: var(--spacing-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background-color: var(--white);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-fast);
}

.recipients-control:hover[b-1pi01v1b7k] {
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
}

.recipients-display[b-1pi01v1b7k] {
	flex: 1;
	min-width: 0;
}

.recipients-summary[b-1pi01v1b7k] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
}

.recipients-count[b-1pi01v1b7k] {
	color: var(--success-color);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	display: flex;
	align-items: center;
}

.recipients-preview[b-1pi01v1b7k] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.recipients-preview .badge[b-1pi01v1b7k] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
}

.recipients-more-badge[b-1pi01v1b7k] {
	cursor: help;
	position: relative;
}

.recipients-more-badge:hover[b-1pi01v1b7k] {
	background-color: var(--secondary-color-dark, #5a6268) !important;
	transform: scale(1.05);
	transition: var(--transition-fast);
}

.add-recipients-btn[b-1pi01v1b7k] {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Rich Text Editor */
.rich-text-toolbar[b-1pi01v1b7k] {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-sm);
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rich-text-editor[b-1pi01v1b7k] {
	min-height: 250px;
	max-height: 400px;
	overflow-y: auto;
	padding: var(--spacing-md);
	border: 1px solid var(--border-color);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	background-color: var(--white);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	outline: none;
}

.rich-text-editor:focus[b-1pi01v1b7k] {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

.rich-text-editor.border-warning[b-1pi01v1b7k] {
	border-color: #ffc107 !important;
}

.rich-text-editor.border-warning:focus[b-1pi01v1b7k] {
	border-color: #ffc107 !important;
	box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.rich-text-editor.border-danger[b-1pi01v1b7k] {
	border-color: #dc3545 !important;
}

.rich-text-editor.border-danger:focus[b-1pi01v1b7k] {
	border-color: #dc3545 !important;
	box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.rich-text-editor[data-placeholder]:empty[b-1pi01v1b7k]:before {
	content: attr(data-placeholder);
	color: var(--text-tertiary);
	font-style: italic;
}

.email-body[b-1pi01v1b7k] {
	font-family: var(--font-family-primary);
}

/* Attachments */
.attachments-list[b-1pi01v1b7k] {
	padding: var(--spacing-2);
	background-color: var(--bg-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
}

.attachment-item[b-1pi01v1b7k] {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-1) var(--spacing-2);
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-1);
	transition: var(--transition-fast);
	font-size: var(--font-size-xs);
}

.attachment-item:last-child[b-1pi01v1b7k] {
	margin-bottom: 0;
}

.attachment-item:hover[b-1pi01v1b7k] {
	background-color: var(--bg-hover);
	border-color: var(--border-color);
}

.attachment-item i[b-1pi01v1b7k] {
	color: var(--primary-color);
	font-size: var(--font-size-base);
}

.attachment-name[b-1pi01v1b7k] {
	flex: 1;
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-size[b-1pi01v1b7k] {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}

.attachment-item .btn-remove[b-1pi01v1b7k] {
	background: none;
	border: none;
	color: var(--danger-color);
	cursor: pointer;
	padding: var(--spacing-xxs);
	border-radius: var(--radius-sm);
	transition: var(--transition-fast);
}

.attachment-item .btn-remove:hover[b-1pi01v1b7k] {
	background-color: rgba(var(--danger-rgb), 0.1);
}

/* Insert Fields Panel */
.insert-fields-panel[b-1pi01v1b7k] {
	position: sticky;
	top: var(--spacing-md);
	height: fit-content;
	max-height: calc(100vh - 200px);
}

.insert-fields-scroll[b-1pi01v1b7k] {
	max-height: 340px;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: var(--radius-lg);
	background: var(--white);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
	padding: var(--spacing-sm);
}

.insert-fields-scroll[b-1pi01v1b7k]::-webkit-scrollbar {
	width: 6px;
}

.insert-fields-scroll[b-1pi01v1b7k]::-webkit-scrollbar-track {
	background: var(--gray-50);
	border-radius: var(--radius-lg);
}

.insert-fields-scroll[b-1pi01v1b7k]::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-lg);
	transition: var(--transition-fast);
}

.insert-fields-scroll[b-1pi01v1b7k]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

.field-group[b-1pi01v1b7k] {
	margin-bottom: var(--spacing-lg);
}

.field-group:last-child[b-1pi01v1b7k] {
	margin-bottom: var(--spacing-sm);
}

.field-group-header[b-1pi01v1b7k] {
	padding: var(--spacing-4) var(--spacing-md);
	background: linear-gradient(
		135deg,
		var(--primary-color) 0%,
		var(--primary-color-dark) 100%
	);
	color: var(--white);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-3);
	box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.field-item[b-1pi01v1b7k] {
	padding: var(--spacing-4) var(--spacing-lg);
	background: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	font-size: var(--font-size-base);
	font-family: var(--font-family-primary);
	margin-bottom: var(--spacing-3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	min-height: 44px;
}

.field-item:last-child[b-1pi01v1b7k] {
	margin-bottom: 0;
}

.field-item:hover[b-1pi01v1b7k] {
	background: linear-gradient(135deg, var(--bg-hover) 0%, var(--white) 100%);
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
	transform: translateY(-1px);
}

.field-item:active[b-1pi01v1b7k] {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.2);
}

.field-item i[b-1pi01v1b7k] {
	color: var(--primary-color);
	font-size: var(--font-size-lg);
	margin-right: var(--spacing-4);
	min-width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.field-item:hover i[b-1pi01v1b7k] {
	transform: scale(1.15);
	color: var(--primary-color-dark);
}

.field-name[b-1pi01v1b7k] {
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-base);
	letter-spacing: 0.3px;
	flex: 1;
}

.insert-fields-panel .form-label[b-1pi01v1b7k] {
	margin-bottom: var(--spacing-3);
	color: var(--text-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}

.insert-fields-panel .form-label i[b-1pi01v1b7k] {
	font-size: var(--font-size-lg);
}

.insert-fields-panel .text-muted[b-1pi01v1b7k] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	line-height: 1.4;
	font-style: italic;
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	padding: var(--spacing-2) var(--spacing-1);
}

/* Form Actions */
.form-actions[b-1pi01v1b7k] {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	margin-top: var(--spacing-sm);
}

.back-btn[b-1pi01v1b7k] {
	min-width: 120px;
	padding: var(--spacing-sm) var(--spacing-lg);
}

.send-email-btn[b-1pi01v1b7k] {
	min-width: 150px;
	padding: var(--spacing-sm) var(--spacing-lg);
}

.send-email-btn:disabled[b-1pi01v1b7k] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Unsaved Changes Modal */
.modal.show[b-1pi01v1b7k] {
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop-visible[b-1pi01v1b7k] {
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1050;
}

.modal-dialog[b-1pi01v1b7k] {
	position: relative;
	z-index: 1055;
	margin: 1.75rem auto;
}

.modal-content[b-1pi01v1b7k] {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.modal-header[b-1pi01v1b7k] {
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--border-light);
}

.modal-header.unsaved-changes-header[b-1pi01v1b7k] {
	background-color: var(--primary-color);
	color: var(--text-light);
}

.modal-header.unsaved-changes-header .modal-title[b-1pi01v1b7k] {
	color: var(--text-light);
}

/* Ensure cancel buttons in modals on this page follow the campaign outline standard */
.modal-footer .btn.btn-secondary[b-1pi01v1b7k],
.unsaved-changes-header + .modal-body + .modal-footer .btn.btn-secondary[b-1pi01v1b7k] {
	background-color: transparent;
	color: var(--gray-600, #6c757d);
	border-color: var(--gray-400, #ced4da);
}
.modal-footer .btn.btn-secondary:hover:not(:disabled)[b-1pi01v1b7k] {
	background-color: var(--bg-hover, #f8f9fa);
	color: var(--text-color, #495057);
}

/* Alert Messages */
.alert[b-1pi01v1b7k] {
	position: relative;
	padding: var(--spacing-sm) var(--spacing-md);
	padding-right: var(--spacing-lg); /* Extra space for close button */
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	font-size: var(--font-size-sm);
	border-width: 1px;
	border-style: solid;
}

.alert-success[b-1pi01v1b7k] {
	background-color: var(--success-bg);
	border-color: var(--success-border);
	color: var(--success-color);
}

.alert-danger[b-1pi01v1b7k] {
	background-color: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-color);
}

.alert i[b-1pi01v1b7k] {
	font-size: var(--font-size-base);
}

.alert .btn-close[b-1pi01v1b7k] {
	position: absolute;
	top: 50%;
	right: var(--spacing-sm);
	transform: translateY(-50%);
	margin-left: 0;
	opacity: 0.7;
}

.alert .btn-close:hover[b-1pi01v1b7k] {
	opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
	.create-email-container[b-1pi01v1b7k] {
		padding: var(--spacing-2);
	}

	.page-header[b-1pi01v1b7k] {
		padding: var(--spacing-3) var(--spacing-4);
	}

	.page-title[b-1pi01v1b7k] {
		font-size: var(--font-size-xl);
	}

	.email-form-card[b-1pi01v1b7k] {
		padding: var(--spacing-2);
	}

	.email-config-container[b-1pi01v1b7k],
	.email-content-container[b-1pi01v1b7k] {
		padding: var(--spacing-md);
		padding-left: calc(var(--spacing-md) + 5px);
		border-left-width: 3px;
		margin-left: 3px;
		margin-right: 3px;
	}

	.recipients-control[b-1pi01v1b7k] {
		flex-direction: column;
		align-items: stretch;
	}

	.add-recipients-btn[b-1pi01v1b7k] {
		width: 100%;
	}

	.form-actions[b-1pi01v1b7k] {
		flex-direction: column-reverse;
	}

	.back-btn[b-1pi01v1b7k],
	.send-email-btn[b-1pi01v1b7k] {
		width: 100%;
	}

	.insert-fields-panel[b-1pi01v1b7k] {
		position: static;
		margin-top: var(--spacing-4);
	}

	.insert-fields-scroll[b-1pi01v1b7k] {
		max-height: 400px;
	}
}

/* Resizable Images in Rich Text Editor */
.rich-text-editor .resizable-image[b-1pi01v1b7k] {
	border: 2px solid transparent;
	transition: border-color 0.2s ease;
	cursor: pointer;
}

.rich-text-editor .resizable-image:hover[b-1pi01v1b7k] {
	border-color: var(--primary-color);
	box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

/* Image Resize Dialog */
.image-resize-dialog button:hover[b-1pi01v1b7k] {
	opacity: 0.9;
	transform: translateY(-1px);
}

.image-resize-dialog button:active[b-1pi01v1b7k] {
	transform: translateY(0);
}

@media (max-width: 576px) {
	.rich-text-toolbar[b-1pi01v1b7k] {
		flex-wrap: wrap;
		gap: var(--spacing-1);
	}

	.page-subtitle[b-1pi01v1b7k] {
		font-size: var(--font-size-xs);
	}

	.recipients-preview .badge[b-1pi01v1b7k] {
		max-width: 100px;
	}
}
/* /Pages/CreatePledge.razor.rz.scp.css */
/* CreatePledge.razor.css - Component-specific styles using CSS variables */

/* Page Header */
.page-header[b-7zombgt1pm] {
	background: var(--gradient-card);
	margin-bottom: 1em;
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.header-content[b-7zombgt1pm] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.page-title[b-7zombgt1pm] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.page-title i[b-7zombgt1pm] {
	color: var(--text-light);
	opacity: 0.9;
}

/* Unsaved Changes Modal Header */
.modal-header.unsaved-changes-header[b-7zombgt1pm] {
	background-color: var(--primary-color);
	color: var(--text-light);
}

.modal-header.unsaved-changes-header .modal-title[b-7zombgt1pm] {
	color: var(--text-light);
}

.page-header .btn-light[b-7zombgt1pm] {
	background-color: rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.95);
	color: var(--primary-color);
	font-weight: var(--font-weight-medium);
}

.page-header .btn-light:hover[b-7zombgt1pm] {
	background-color: white;
	border-color: white;
	color: var(--primary-color-dark);
}

.page-header .btn-outline-secondary[b-7zombgt1pm] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-7zombgt1pm] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

.card-header-gradient[b-7zombgt1pm] {
	background: linear-gradient(45deg,
			var(--primary-color),
			var(--primary-color-dark));
	color: var(--text-light);
	border-bottom: 1px solid var(--border-color);
}

.card-header-gradient h4[b-7zombgt1pm] {
	color: var(--text-light);
	font-weight: var(--font-weight-semibold);
}

.form-label[b-7zombgt1pm] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.form-control[b-7zombgt1pm],
.form-select[b-7zombgt1pm] {
	border: 1px solid var(--input-border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm);
	font-size: var(--font-size-sm);
	transition: var(--transition-fast);
}

.form-control:focus[b-7zombgt1pm],
.form-select:focus[b-7zombgt1pm] {
	border-color: var(--input-border-color-focus);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.form-control.is-invalid[b-7zombgt1pm],
.form-select.is-invalid[b-7zombgt1pm] {
	border-color: var(--danger-color);
	box-shadow: 0 0 0 0.2rem rgba(var(--danger-rgb), 0.25);
}

.form-control:read-only[b-7zombgt1pm] {
	background-color: var(--bg-light);
	cursor: not-allowed;
}

.input-group-text[b-7zombgt1pm] {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	font-weight: var(--font-weight-medium);
}

.btn[b-7zombgt1pm] {
	border-radius: var(--btn-border-radius);
	padding: var(--btn-padding);
	font-weight: var(--btn-font-weight);
	transition: var(--transition-fast);
	border: 1px solid transparent;
}

.btn-primary[b-7zombgt1pm] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
}

.btn-primary:hover[b-7zombgt1pm] {
	background-color: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
}

.btn-primary:disabled[b-7zombgt1pm] {
	background-color: var(--text-muted);
	border-color: var(--text-muted);
	cursor: not-allowed;
}

.btn-secondary[b-7zombgt1pm] {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-secondary);
}

.btn-secondary:hover[b-7zombgt1pm] {
	background-color: var(--bg-hover);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.btn-outline-light[b-7zombgt1pm] {
	border-color: var(--outline-light-border);
	color: var(--text-light);
}

.btn-outline-light:hover[b-7zombgt1pm] {
	background-color: var(--overlay-hover-light);
	border-color: var(--text-light);
}

.btn-outline-primary[b-7zombgt1pm] {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.btn-outline-primary:hover[b-7zombgt1pm] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
}

.btn-outline-secondary[b-7zombgt1pm] {
	border-color: var(--border-color);
	color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-7zombgt1pm] {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.btn-outline-danger[b-7zombgt1pm] {
	border-color: var(--danger-color);
	color: var(--danger-color);
}

.btn-outline-danger:hover[b-7zombgt1pm] {
	background-color: var(--danger-color);
	border-color: var(--danger-color);
	color: var(--text-light);
}

.text-danger[b-7zombgt1pm] {
	color: var(--danger-color) !important;
}

.text-info[b-7zombgt1pm] {
	color: var(--info-color) !important;
}

.text-muted[b-7zombgt1pm] {
	color: var(--text-muted) !important;
}

.invalid-feedback[b-7zombgt1pm] {
	color: var(--danger-color);
	font-size: var(--font-size-xs);
	margin-top: var(--spacing-xs);
}

.alert[b-7zombgt1pm] {
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	border: 1px solid transparent;
}

.alert-danger[b-7zombgt1pm] {
	background-color: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-color);
}

.card[b-7zombgt1pm] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	background-color: var(--bg-card);
}

.card-body[b-7zombgt1pm] {
	padding: var(--card-padding);
}

.card-footer[b-7zombgt1pm] {
	background-color: var(--bg-light);
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom-left-radius: var(--radius-lg);
	border-bottom-right-radius: var(--radius-lg);
}

.spinner-border-sm[b-7zombgt1pm] {
	width: var(--spinner-sm);
	height: var(--spinner-sm);
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-md)) {
	.card-body[b-7zombgt1pm] {
		padding: var(--spacing-md);
	}

	.card-footer[b-7zombgt1pm] {
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.btn[b-7zombgt1pm] {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-xs);
	}
}

/* Syncfusion DatePicker and input-group defaults and error overrides (scoped) */
/* Keep the normal / neutral border consistent inside this component */
[b-7zombgt1pm] .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
[b-7zombgt1pm] .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
	border-color: var(--input-border-color, #ced4da);
	height: 38px !important;
}

/* Error / invalid visuals — target wrapper, input and aria-invalid states */
[b-7zombgt1pm] .e-input-group.is-invalid,
[b-7zombgt1pm] .e-input-group.e-control-wrapper.is-invalid,
[b-7zombgt1pm] .e-date-wrapper.is-invalid,
[b-7zombgt1pm] .e-datepicker.is-invalid,
[b-7zombgt1pm] .e-input.is-invalid,
[b-7zombgt1pm] .form-control.is-invalid,
[b-7zombgt1pm] input[aria-invalid="true"] {
	border-color: var(--danger-color, #dc3545) !important;
	box-shadow: 0 0 0 0.2rem rgba(var(--danger-rgb, 220, 53, 69), 0.25) !important;
}

/* Also ensure icons / inner groups don't clip the shadow */
[b-7zombgt1pm] .e-input-group .e-input,
[b-7zombgt1pm] .e-date-wrapper .e-input {
	background-clip: padding-box;
	height: 25px !important;
}
/* /Pages/DonationForm.razor.rz.scp.css */
.required-asterisk[b-3nxf4cbrby] {
	color: var(--ft-error);
	margin-left: 0.15rem;
}

.phone-input-row[b-3nxf4cbrby] {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.phone-country-select[b-3nxf4cbrby] {
	width: 15%;
	min-width: 3rem;
	box-sizing: border-box;
}

.phone-number-input[b-3nxf4cbrby] {
	width: 75%;
	box-sizing: border-box;
}

/* Ensure inputs don't overflow on small screens */
@media (max-width: 640px) {
	.phone-input-row[b-3nxf4cbrby] {
		flex-direction: row;
	}

	.phone-country-select[b-3nxf4cbrby] {
		width: 30%;
	}

	.phone-number-input[b-3nxf4cbrby] {
		width: 70%;
	}
}

/* Increase the size of the donation type icons (one-time and pledge) */
.donation-type-icon svg[b-3nxf4cbrby] {
	width: var(--icon-large);
	height: var(--icon-large);
}

/* Add a bit more spacing between icon and text */
.donation-type-content[b-3nxf4cbrby] {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.donation-form-container[b-3nxf4cbrby] {
	max-width: var(--max-width);
	margin: 1.5rem auto;
	padding: 0 1rem;
}

.header-section .fallback-header[b-3nxf4cbrby] {
	display: flex;
	gap: 1rem;
	background:
		linear-gradient(
			135deg,
			rgba(var(--primary-rgb), 0.95),
			rgba(var(--gradient-primary-rgb), 0.85)
		),
		url("/images/donation_form.png") center/cover;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	margin-bottom: 1rem;
	color: var(--text-light, #ffffff);
}

.fallback-content[b-3nxf4cbrby] {
	padding: 3rem 1.5rem;
	flex: 1 1 320px;
}

.fallback-activity-image[b-3nxf4cbrby] {
	width: 320px;
	flex: 0 0 320px;
}

.form-card[b-3nxf4cbrby] {
	background: var(--ft-card-bg);
	border-radius: calc(var(--border-radius) * 1.3333);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin-bottom: 1rem;
}

.card-header[b-3nxf4cbrby] {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.card-content[b-3nxf4cbrby] {
	padding: 1rem;
}

.form-label[b-3nxf4cbrby] {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	color: var(--ft-subtext);
}

.form-input[b-3nxf4cbrby] {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--ft-input-border);
}

.validation-message[b-3nxf4cbrby] {
	color: var(--ft-error);
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.grid-two-cols[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.grid-three-cols[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.75rem;
}

.anonymous-checkbox-row[b-3nxf4cbrby] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.anonymous-checkbox-row .form-check-input[b-3nxf4cbrby] {
	margin-top: 0;
	flex-shrink: 0;
}

.anonymous-checkbox-row .form-check-label[b-3nxf4cbrby] {
	margin-top: var(--spacing-xs);
	font-weight: 500;
}

.donation-type-grid[b-3nxf4cbrby] {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.donation-type-card[b-3nxf4cbrby] {
	flex: 1 1 320px;
	padding: 0.75rem;
	border-radius: calc(var(--border-radius) * 1.3333);
	cursor: pointer;
	border: 1px solid transparent;
}

.donation-type-card-one-time-selected[b-3nxf4cbrby],
.donation-type-card-pledge-selected[b-3nxf4cbrby] {
	border-color: var(--ft-accent);
	background: rgba(66, 153, 225, 0.06);
}

.donation-type-card-one-time-unselected[b-3nxf4cbrby],
.donation-type-card-pledge-unselected[b-3nxf4cbrby] {
	background: transparent;
}

.donation-type-title[b-3nxf4cbrby] {
	margin: 0;
	font-size: 1rem;
}

.donation-type-description[b-3nxf4cbrby] {
	margin: 0.25rem 0 0 0;
	color: var(--ft-subtext);
}

.submit-container[b-3nxf4cbrby] {
	text-align: center;
	margin: 1rem 0 2rem 0;
}

.submit-button[b-3nxf4cbrby] {
	background: #2b6cb0;
	color: white;
	border: none;
	padding: 0.75rem 1.25rem;
	border-radius: 0.375rem;
	cursor: pointer;
}

@media (max-width: 640px) {
	.grid-two-cols[b-3nxf4cbrby],
	.grid-three-cols[b-3nxf4cbrby] {
		grid-template-columns: 1fr;
	}

	.fallback-activity-image[b-3nxf4cbrby] {
		display: none;
	}
}

.form-banner[b-3nxf4cbrby] {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-radius: 0.375rem;
	margin-bottom: 1rem;
}

.form-banner-success[b-3nxf4cbrby] {
	background: #ecfdf5;
	border: 1px solid #10b981;
	color: #065f46;
}

.form-banner-error[b-3nxf4cbrby] {
	background: #fff5f5;
	border: 1px solid #f56565;
	color: #742a2a;
}

.form-banner-content[b-3nxf4cbrby] {
	flex: 1 1 auto;
}

.form-banner-message[b-3nxf4cbrby] {
	margin-top: 0.25rem;
}

.form-banner-meta[b-3nxf4cbrby] {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: inherit;
}

.form-banner-close[b-3nxf4cbrby] {
	background: transparent;
	border: none;
	font-size: 1rem;
	cursor: pointer;
	color: inherit;
}

.donation-form-container[b-3nxf4cbrby] {
	max-width: 70rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem;
}

.donation-form-container > * + *[b-3nxf4cbrby] {
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.donation-form-container[b-3nxf4cbrby] {
		padding: 1.5rem;
	}
}

.header-section[b-3nxf4cbrby] {
	margin-bottom: 3rem;
}

.mobile-header[b-3nxf4cbrby] {
	display: block;
}

@media (min-width: 768px) {
	.mobile-header[b-3nxf4cbrby] {
		display: none;
	}
}

.mobile-image-container[b-3nxf4cbrby] {
	width: 100%;
	height: 12rem;
	overflow: hidden;
	border-radius: 0.5rem;
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	margin-bottom: 1.5rem;
}

.mobile-image[b-3nxf4cbrby] {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mobile-text-container[b-3nxf4cbrby] {
	text-align: center;
}

.mobile-title[b-3nxf4cbrby] {
	font-size: 1.875rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: #0f172a;
}

.mobile-description[b-3nxf4cbrby] {
	font-size: 1.125rem;
	color: #475569;
	line-height: 1.625;
}

.desktop-header[b-3nxf4cbrby] {
	display: none;
	position: relative;
}

@media (min-width: 768px) {
	.desktop-header[b-3nxf4cbrby] {
		display: block;
	}
}

.desktop-image-container[b-3nxf4cbrby] {
	width: 100%;
	height: 18rem;
	overflow: hidden;
	border-radius: 0.5rem;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (min-width: 1024px) {
	.desktop-image-container[b-3nxf4cbrby] {
		height: 24rem;
	}
}

.desktop-image[b-3nxf4cbrby] {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.desktop-overlay[b-3nxf4cbrby] {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.6),
		rgba(0, 0, 0, 0.2),
		transparent
	);
}

.desktop-content-container[b-3nxf4cbrby] {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
}

.desktop-content-wrapper[b-3nxf4cbrby] {
	width: 100%;
	padding: 2rem;
}

@media (min-width: 1024px) {
	.desktop-content-wrapper[b-3nxf4cbrby] {
		padding: 3rem;
	}
}

.desktop-content-inner[b-3nxf4cbrby] {
	max-width: 56rem;
}

.desktop-title[b-3nxf4cbrby] {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #ffffff;
	line-height: 1.25;
}

@media (min-width: 1024px) {
	.desktop-title[b-3nxf4cbrby] {
		font-size: 3rem;
	}
}

.desktop-description[b-3nxf4cbrby] {
	font-size: 1.25rem;
	color: rgba(255, 255, 255, 0.95);
	max-width: 48rem;
	line-height: 1.625;
}

.fallback-header[b-3nxf4cbrby] {
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background:
		linear-gradient(
			135deg,
			rgba(var(--primary-rgb), 0.95),
			rgba(var(--gradient-primary-rgb), 0.85)
		),
		url("/images/donation_form.png") center/cover;
	border-radius: 0.5rem;
	color: var(--text-light, #ffffff);
	border: none;
	position: relative;
	overflow: hidden;
}

.fallback-content[b-3nxf4cbrby] {
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}

.fallback-header .fallback-title[b-3nxf4cbrby] {
	color: var(--text-light, #ffffff);
}

.fallback-header .fallback-description[b-3nxf4cbrby] {
	color: rgba(255, 255, 255, 0.9);
}

.fallback-icon-container[b-3nxf4cbrby] {
	margin-bottom: 1.5rem;
}

.fallback-title[b-3nxf4cbrby] {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #0f172a;
}

@media (min-width: 1024px) {
	.fallback-title[b-3nxf4cbrby] {
		font-size: 3rem;
	}
}

.fallback-description[b-3nxf4cbrby] {
	font-size: 1.25rem;
	color: #475569;
	line-height: 1.625;
}

.form-card[b-3nxf4cbrby] {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	border: 1px solid #e2e8f0;
	background-color: #ffffff;
	border-radius: 0.5rem;
}

.card-header[b-3nxf4cbrby] {
	border-bottom: 1px solid #f1f5f9;
	background-color: rgba(248, 250, 252, 0.5);
	padding: 1.5rem;
}

.card-header-content[b-3nxf4cbrby] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.card-icon-blue[b-3nxf4cbrby] {
	padding: 0.5rem;
	background-color: #dbeafe;
	border-radius: 0.5rem;
}

.card-icon-emerald[b-3nxf4cbrby] {
	padding: 0.5rem;
	background-color: #d1fae5;
	border-radius: 0.5rem;
}

.card-icon-blue svg[b-3nxf4cbrby] {
	height: 1.25rem;
	width: 1.25rem;
	color: #2563eb;
}

.card-icon-emerald svg[b-3nxf4cbrby] {
	height: 1.25rem;
	width: 1.25rem;
	color: #059669;
}

.card-title[b-3nxf4cbrby] {
	color: #0f172a;
}

.card-subtitle[b-3nxf4cbrby] {
	font-size: 0.875rem;
	color: #475569;
	margin-top: 0.25rem;
}

.card-content[b-3nxf4cbrby] {
	padding: 1.5rem;
}

.card-content > * + *[b-3nxf4cbrby] {
	margin-top: 1.5rem;
}

.form-input[b-3nxf4cbrby] {
	width: 100%;
	height: 2.25rem;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	font-size: 1rem;
	transition: all 0.15s ease-in-out;
	outline: none;
}

.form-input:focus[b-3nxf4cbrby] {
	border-color: #3b82f6;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.donation-form-container[b-3nxf4cbrby]
	
	:is(.e-input-group .e-input-group-icon, .e-input-group .e-input-group-btn) {
	height: var(--form-control-height) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border-left: 1px solid var(--ft-border) !important;
}

.form-label[b-3nxf4cbrby] {
	display: block;
	font-size: 1rem;
	font-weight: 500;
	color: #0f172a;
	margin-bottom: 0.5rem;
}

.validation-message[b-3nxf4cbrby] {
	color: #dc2626;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

.grid-two-cols[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.grid-two-cols[b-3nxf4cbrby] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.grid-three-cols[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.grid-three-cols[b-3nxf4cbrby] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.student-code-help[b-3nxf4cbrby] {
	font-size: 0.875rem;
	color: #64748b;
	margin-top: 0.25rem;
}

.donation-type-grid[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.donation-type-grid[b-3nxf4cbrby] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.donation-type-card[b-3nxf4cbrby] {
	position: relative;
	padding: 1.5rem;
	border: 2px solid;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.donation-type-card-one-time-selected[b-3nxf4cbrby] {
	border-color: #93c5fd;
	background-color: #eff6ff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.donation-type-card-one-time-unselected[b-3nxf4cbrby] {
	border-color: #e2e8f0;
}

.donation-type-card-one-time-unselected:hover[b-3nxf4cbrby] {
	border-color: #bfdbfe;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.donation-type-card-pledge-selected[b-3nxf4cbrby] {
	border-color: #86efac;
	background-color: #ecfdf5;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.donation-type-card-pledge-unselected[b-3nxf4cbrby] {
	border-color: #e2e8f0;
}

.donation-type-card-pledge-unselected:hover[b-3nxf4cbrby] {
	border-color: #bbf7d0;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.donation-type-content[b-3nxf4cbrby] {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.donation-type-icon-one-time-selected[b-3nxf4cbrby] {
	padding: 0.75rem;
	border-radius: calc(var(--border-radius) * 1.3333);
	background-color: var(--ft-primary);
	color: #ffffff;
}

.donation-type-icon-one-time-unselected[b-3nxf4cbrby] {
	padding: 0.75rem;
	border-radius: calc(var(--border-radius) * 1.3333);
	background-color: rgba(241, 245, 249, 1);
	color: var(--ft-subtext);
}

.donation-type-icon-pledge-selected[b-3nxf4cbrby] {
	padding: 0.75rem;
	border-radius: calc(var(--border-radius) * 1.3333);
	background-color: var(--ft-emerald);
	color: #ffffff;
}

.donation-type-icon-pledge-unselected[b-3nxf4cbrby] {
	padding: 0.75rem;
	border-radius: calc(var(--border-radius) * 1.3333);
	background-color: rgba(241, 245, 249, 1);
	color: var(--ft-subtext);
}

.donation-type-icon svg[b-3nxf4cbrby] {
	height: var(--icon-medium);
	width: var(--icon-medium);
}

.donation-type-text[b-3nxf4cbrby] {
	flex: 1;
}

.donation-type-title-container[b-3nxf4cbrby] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.donation-type-title[b-3nxf4cbrby] {
	font-weight: 600;
	color: var(--ft-text);
}

.donation-type-indicator-blue[b-3nxf4cbrby] {
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--ft-primary);
	border-radius: 50%;
}

.donation-type-indicator-emerald[b-3nxf4cbrby] {
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--ft-emerald);
	border-radius: 50%;
}

.donation-type-description[b-3nxf4cbrby] {
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.625;
}

.preset-amounts-grid[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 768px) {
	.preset-amounts-grid[b-3nxf4cbrby] {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.preset-amount-button[b-3nxf4cbrby] {
	height: 3.75rem;
	transition: all 0.18s ease-in-out;
	font-weight: 700;
	border-radius: 0.5rem;
	border: 1px solid;
	padding: 0 1rem;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 1.05rem;
}

.preset-amount-button-selected[b-3nxf4cbrby] {
	background-color: var(--ft-primary);
	color: #ffffff;
	border-color: var(--ft-primary);
}

.preset-amount-button-selected:hover[b-3nxf4cbrby] {
	background-color: var(--ft-primary-700);
}

.preset-amount-button-unselected[b-3nxf4cbrby] {
	border-color: var(--ft-input-border);
	color: #374151;
}

.preset-amount-button-unselected:hover[b-3nxf4cbrby] {
	border-color: var(--ft-primary-400);
	background-color: rgba(239, 246, 255, 1);
}

.custom-amount-input[b-3nxf4cbrby] {
	max-width: 100%;
	width: 100%;
	height: var(--input-height);
	background-color: var(--ft-card-bg);
	border: 1px solid var(--ft-input-border);
	border-radius: var(--border-radius);
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	font-size: 1rem;
	transition: all 0.15s ease-in-out;
	outline: none;
}

.custom-amount-input:focus[b-3nxf4cbrby] {
	border-color: var(--ft-primary-400);
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.grid-five-cols[b-3nxf4cbrby] {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 768px) {
	.grid-five-cols[b-3nxf4cbrby] {
		grid-template-columns: 0.8fr 1fr 1fr 1fr 0.8fr;
	}

	.custom-amount-input[b-3nxf4cbrby] {
		max-width: 50%;
	}

	.preset-amounts-grid[b-3nxf4cbrby] {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.pledge-summary[b-3nxf4cbrby] {
	background-color: var(--ft-bg-light);
	border: 1px solid var(--ft-border);
	padding: 1rem;
	border-radius: calc(var(--border-radius) * 1.3333);
}

.pledge-summary-title[b-3nxf4cbrby] {
	font-weight: 500;
	color: #0f172a;
	margin-bottom: 0.5rem;
}

.pledge-summary-text[b-3nxf4cbrby] {
	font-size: 0.875rem;
	color: #475569;
}

.schedule-header[b-3nxf4cbrby] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.schedule-header svg[b-3nxf4cbrby] {
	height: var(--icon-small);
	width: var(--icon-small);
	color: var(--ft-emerald);
}

.schedule-title[b-3nxf4cbrby] {
	font-weight: 500;
	color: #0f172a;
}

.schedule-table-container[b-3nxf4cbrby] {
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	overflow: hidden;
}

.schedule-table[b-3nxf4cbrby] {
	min-width: 100%;
	border-collapse: collapse;
}

.schedule-table-header[b-3nxf4cbrby] {
	background-color: var(--ft-bg-light);
}

.schedule-table-header th[b-3nxf4cbrby] {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ft-text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--ft-border);
}

.schedule-table-header th:last-child[b-3nxf4cbrby] {
	text-align: right;
}

.schedule-table-body[b-3nxf4cbrby] {
	background-color: var(--ft-card-bg);
}

.schedule-table-body tr[b-3nxf4cbrby] {
	border-bottom: 1px solid #e2e8f0;
}

.schedule-row-even[b-3nxf4cbrby] {
	background-color: #ffffff;
}

.schedule-row-odd[b-3nxf4cbrby] {
	background-color: rgba(248, 250, 252, 0.5);
}

.schedule-cell[b-3nxf4cbrby] {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	white-space: nowrap;
	font-size: 0.875rem;
	color: var(--ft-text);
}

.schedule-cell-number[b-3nxf4cbrby] {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 500;
	color: #0f172a;
}

.schedule-cell-amount[b-3nxf4cbrby] {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ft-text);
	text-align: right;
}

.schedule-total-row[b-3nxf4cbrby] {
	background-color: #f1f5f9;
	border-top: 2px solid #e2e8f0;
}

.schedule-total-label[b-3nxf4cbrby] {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	color: #0f172a;
}

.schedule-total-amount[b-3nxf4cbrby] {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	color: #0f172a;
	text-align: right;
}

.submit-container[b-3nxf4cbrby] {
	display: flex;
	justify-content: center;
	padding-top: 2rem;
	padding-bottom: 1rem;
}

.submit-button[b-3nxf4cbrby] {
	min-width: var(--submit-min-width);
	height: var(--submit-height);
	background-color: var(--ft-primary);
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease-in-out;
	border-radius: var(--border-radius);
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border: none;
	cursor: pointer;
}

.submit-button:hover[b-3nxf4cbrby] {
	background-color: var(--ft-primary-700);
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.footer-text[b-3nxf4cbrby] {
	text-align: center;
	font-size: 0.875rem;
	color: var(--ft-muted);
	padding-bottom: 2rem;
}

.footer-text p[b-3nxf4cbrby] {
	margin-top: 0.25rem;
}

.icon-h5-w5[b-3nxf4cbrby] {
	height: var(--icon-small);
	width: var(--icon-small);
}

.icon-h6-w6[b-3nxf4cbrby] {
	height: var(--icon-medium);
	width: var(--icon-medium);
}

.icon-h16-w16[b-3nxf4cbrby] {
	height: 4rem;
	width: 4rem;
	color: var(--ft-primary);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}
/* /Pages/DonorDetails.razor.rz.scp.css */
/* Page Header */
.page-header[b-ad79dvibnz] {
	background: var(--gradient-card);
	margin-bottom: 1em;
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.header-content[b-ad79dvibnz] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.page-title[b-ad79dvibnz] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.page-title i[b-ad79dvibnz] {
	color: var(--text-light);
	opacity: 0.9;
}

.page-header .btn-light[b-ad79dvibnz] {
	background-color: rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.95);
	color: var(--primary-color);
	font-weight: var(--font-weight-medium);
}

.page-header .btn-light:hover[b-ad79dvibnz] {
	background-color: white;
	border-color: white;
	color: var(--primary-color-dark);
}

.page-header .btn-outline-secondary[b-ad79dvibnz] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-ad79dvibnz] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

.donor-details-container[b-ad79dvibnz] {
	min-height: 100vh;
	background-color: var(--bg-primary);
	padding: var(--spacing-md) 0;
}

.donor-details-container .card[b-ad79dvibnz] {
	border: none;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-lg);
}

.donor-details-container .card-header[b-ad79dvibnz] {
	background-color: var(--bg-card);
	border-bottom: 1px solid var(--border-color);
	padding: var(--spacing-lg);
}

.donor-details-container .card-body[b-ad79dvibnz] {
	padding: var(--spacing-xl);
}

.donor-details-container .form-label[b-ad79dvibnz] {
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
}

.donor-details-container .form-control[b-ad79dvibnz],
.donor-details-container .form-select[b-ad79dvibnz] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	transition: var(--transition-all);
}

.donor-details-container .form-control:focus[b-ad79dvibnz],
.donor-details-container .form-select:focus[b-ad79dvibnz] {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.donor-details-container .btn[b-ad79dvibnz] {
	border-radius: var(--radius-md);
	padding: var(--btn-padding);
	font-weight: var(--btn-font-weight);
	transition: var(--transition-all);
}

.donor-details-container .btn-primary[b-ad79dvibnz] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
}

.donor-details-container .btn-primary:hover[b-ad79dvibnz] {
	background-color: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
}

.donor-details-container .page-header .btn-outline-secondary[b-ad79dvibnz] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
	padding: 0.375rem 0.75rem !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
}

.donor-details-container .page-header .btn-outline-secondary:hover[b-ad79dvibnz] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

.donor-details-container .btn-outline-secondary[b-ad79dvibnz] {
	border-color: var(--border-color);
	color: var(--text-light);
}

.donor-details-container .btn-outline-secondary:hover[b-ad79dvibnz] {
	background-color: var(--bg-hover);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.donor-details-container .btn-outline-warning[b-ad79dvibnz] {
	border-color: var(--warning-color);
	color: var(--warning-color);
}

.donor-details-container .btn-outline-warning:hover[b-ad79dvibnz] {
	background-color: var(--warning-color);
	border-color: var(--warning-color);
	color: var(--text-light);
}

.donor-details-container .alert[b-ad79dvibnz] {
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.donor-details-container .alert-danger[b-ad79dvibnz] {
	background-color: var(--danger-color-light);
	border-color: var(--danger-color);
	color: var(--danger-color-dark);
}

.donor-details-container .modal-content[b-ad79dvibnz] {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.donor-details-container .modal-header[b-ad79dvibnz],
.donor-details-container .modal-footer[b-ad79dvibnz] {
	border-color: var(--border-color);
}

.donor-details-container .table[b-ad79dvibnz] {
	margin-bottom: 0;
}

.donor-details-container .table th[b-ad79dvibnz] {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
}

.donor-details-container .table td[b-ad79dvibnz] {
	border-color: var(--border-color);
	color: var(--text-primary);
}

.donor-details-container .form-check-input:checked[b-ad79dvibnz] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.donor-details-container .text-danger[b-ad79dvibnz] {
	color: var(--danger-color) !important;
}

.donor-details-container .text-muted[b-ad79dvibnz] {
	color: var(--text-muted) !important;
}

.donor-details-container .border-bottom[b-ad79dvibnz] {
	border-bottom: 1px solid var(--border-color) !important;
}

.donor-details-container .spinner-border-sm[b-ad79dvibnz] {
	width: 1rem;
	height: 1rem;
}

/* Organization autocomplete dropdown */
.hover-bg-light:hover[b-ad79dvibnz] {
	background-color: var(--bg-hover);
}

.cursor-pointer[b-ad79dvibnz] {
	cursor: pointer;
}

/* Organization dropdown icon color */
.donor-details-container .input-group .btn-outline-secondary i.fas[b-ad79dvibnz] {
	color: var(--text-black);
}

@media (max-width: 768px) {
	.donor-details-container[b-ad79dvibnz] {
		padding: var(--spacing-sm) 0;
	}

	.donor-details-container .card-body[b-ad79dvibnz] {
		padding: var(--spacing-lg);
	}

	.donor-details-container .col-md-2[b-ad79dvibnz],
	.donor-details-container .col-md-3[b-ad79dvibnz],
	.donor-details-container .col-md-4[b-ad79dvibnz],
	.donor-details-container .col-md-6[b-ad79dvibnz] {
		margin-bottom: var(--spacing-md);
	}
}

/* Ensure Syncfusion date inputs on Donor page match surrounding controls' height.
   Grouped and tokenized to reduce repetition while keeping overrides local to this page. */
.donor-details-container[b-ad79dvibnz] {
	--dd-field-height: var(--btn-height-fixed);
}

.donor-details-container[b-ad79dvibnz]  :is(.e-input-group, .e-date-wrapper, .e-control-wrapper, .e-datepicker, .e-datetimepicker) {
	height: var(--dd-field-height) !important;
	min-height: var(--dd-field-height) !important;
}

.donor-details-container[b-ad79dvibnz]  :is(.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-date-wrapper .e-input) {
	height: var(--dd-field-height) !important;
	min-height: var(--dd-field-height) !important;
	line-height: inherit !important;
}

.donor-details-container[b-ad79dvibnz]  :is(.e-input-group .e-input-group-icon, .e-date-wrapper .e-input-group-icon) {
	height: var(--dd-field-height) !important;
	display: flex !important;
	align-items: center !important;
}
/* /Pages/Donors.razor.rz.scp.css */
/* Contact Page Styles */
.breadcrumb-nav[b-z5vny7yh8k] {
	background: var(--bg-secondary);
	padding: var(--spacing-xs) var(--spacing-md);
	margin: 0;
	border-bottom: 1px solid var(--border-color);
}

/* Ensure search section has lower z-index than header dropdown */
.search-section[b-z5vny7yh8k] {
	position: relative;
	z-index: 1;
}

/* Ensure donor list card body has lower z-index than header dropdown */
.contact-left-panel[b-z5vny7yh8k] {
	position: relative;
	z-index: 1;
}

/* Make the small plus button in Recent Communications round and compact */
.communications-section .section-header[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Right-column card header styling to match Activities page */
.contact-container .container-fluid > .row > div:nth-child(3) .card > .card-header[b-z5vny7yh8k] {
	padding: var(--spacing-sm) var(--spacing-md);
	min-height: var(--card-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Header title font-size to match Activities' large header */
.contact-container .container-fluid > .row > div:nth-child(3) .card > .card-header h6[b-z5vny7yh8k],
.contact-container .container-fluid > .row > div:nth-child(3) .card > .card-header .header-title[b-z5vny7yh8k] {
	font-size: var(--font-size-lg);
	margin: 0;
	color: inherit;
}

/* Circular add button used in Recent Communications header (scoped for Donors) */
.comm-add-btn[b-z5vny7yh8k] {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.comm-add-btn i[b-z5vny7yh8k] {
	font-size: 0.9rem;
}


.communications-section .section-header > button[b-z5vny7yh8k] {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-color);
	color: var(--text-light);
	border: none;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-all);
}

/* Ensure the icon is centered and slightly larger */
.communications-section .section-header > button i[b-z5vny7yh8k] {
	font-size: 0.9rem;
}

/* Hover effect for add button */
.communications-section .section-header > button:hover[b-z5vny7yh8k] {
	background-color: var(--primary-color-dark);
	box-shadow: var(--shadow-hover);
	transform: scale(1.05);
}

/* Accessibility: show focus ring */
.communications-section .section-header > button:focus[b-z5vny7yh8k] {
	box-shadow: var(--shadow-focus);
}

.breadcrumb[b-z5vny7yh8k] {
	margin: 0;
	background: transparent;
}

.breadcrumb-item a[b-z5vny7yh8k] {
	color: var(--primary-color);
	text-decoration: none;
}

.contact-container[b-z5vny7yh8k] {
	height: calc(100vh - 120px);
	/* Allow children to manage their own scrolling instead of clipping */
	overflow: visible;
	padding: var(--spacing-sm);
	/* Use container width (not viewport) to avoid forcing horizontal scroll */
	width: 100%;
	max-width: 100%;
}

.contact-layout[b-z5vny7yh8k] {
	min-height: 100%;
	width: 100%;
	font-size: 0.9rem;
	/* Make text smaller for laptop screens */
}

.contact-layout .container-fluid[b-z5vny7yh8k] {
	min-height: 100%;
	padding: 0;
}

.contact-layout .row[b-z5vny7yh8k] {
	min-height: 100%;
	margin: 0;
}

/* Match Activities 3-column widths precisely and override Bootstrap column sizing
   Only apply to the top-level row (direct child of .container-fluid) so nested
   .row inside components like the advanced filter keep Bootstrap behavior. */
.contact-container .container-fluid > .row[b-z5vny7yh8k] {
	display: grid;
	grid-template-columns: 380px 1fr 480px;
	gap: var(--spacing-xs);
	height: calc(100vh - 120px);
	width: 100%;
	margin: 0;
}

.contact-container .container-fluid > .row > div[b-z5vny7yh8k] {
	min-width: 0;
	overflow: hidden;
}

/* Remove Bootstrap column gutters so grid gap controls spacing exactly (only top-level row) */
.contact-container .container-fluid > .row > [class*="col-"][b-z5vny7yh8k] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Ensure cards inside columns fill the column space */
/* .contact-container .container-fluid .row > [class*="col-"] > .card {
	margin: 0;
	width: 100%;
} */

.contact-container .container-fluid > .row > div:nth-child(1)[b-z5vny7yh8k] {
	width: 380px !important;
	max-width: 380px !important;
	flex: none !important;
}

.contact-container .container-fluid > .row > div:nth-child(2)[b-z5vny7yh8k] {
	width: auto !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.contact-container .container-fluid > .row > div:nth-child(3)[b-z5vny7yh8k] {
	width: 480px !important;
	max-width: 480px !important;
	flex: none !important;
}

/* Responsive grid columns - prioritize middle section on normal screens */
@media (max-width: 2200px) {
	.contact-container .container-fluid > .row[b-z5vny7yh8k] {
		grid-template-columns: 380px 1fr 480px;
	}

	.contact-container .container-fluid > .row > div:nth-child(1)[b-z5vny7yh8k] {
		width: 380px !important;
		max-width: 380px !important;
	}

	.contact-container .container-fluid > .row > div:nth-child(3)[b-z5vny7yh8k] {
		width: 480px !important;
		max-width: 480px !important;
	}
}

@media (max-width: 1800px) {
	.contact-container .container-fluid > .row[b-z5vny7yh8k] {
		grid-template-columns: 280px 1fr 350px;
	}

	.contact-container .container-fluid > .row > div:nth-child(1)[b-z5vny7yh8k] {
		width: 280px !important;
		max-width: 280px !important;
	}

	.contact-container .container-fluid > .row > div:nth-child(3)[b-z5vny7yh8k] {
		width: 350px !important;
		max-width: 350px !important;
	}
}

/* Two column layout for pledges and groups */
.pledges-groups-container[b-z5vny7yh8k] {
	display: flex;
	gap: var(--spacing-md);
	margin: 0;
}

.pledges-column[b-z5vny7yh8k],
.groups-column[b-z5vny7yh8k] {
	flex: 1;
	min-width: 0;
	/* Prevents flex items from overflowing */
}

.pledges-groups-row[b-z5vny7yh8k] {
	margin: 0 !important;
}

.pledges-groups-row > div[b-z5vny7yh8k] {
	padding-left: var(--spacing-sm);
	padding-right: var(--spacing-sm);
}

/* Left Sidebar - Contact List */
.contact-sidebar[b-z5vny7yh8k] {
	background: var(--bg-card);
	border-right: 1px solid var(--border-color);
	padding: var(--spacing-sm);
	/* Make sidebar a column so the search/filter area stays fixed and the list can scroll */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.contact-search .input-group-text[b-z5vny7yh8k] {
	background: var(--bg-secondary);
	border-right: none;
}

.contact-search .form-control[b-z5vny7yh8k] {
	border-left: none;
}

.contact-filter[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
}

.contact-list[b-z5vny7yh8k],
.donor-list[b-z5vny7yh8k] {
	margin-top: var(--spacing-md);
	padding-right: var(--spacing-xs);
	padding-bottom: var(--spacing-xl);
	/* Allow the list itself to scroll within the left column */
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: 100%;
}

/* Custom scrollbar for contact list */
.contact-list[b-z5vny7yh8k]::-webkit-scrollbar {
	width: var(--spacing-xs);
}

.contact-list[b-z5vny7yh8k]::-webkit-scrollbar-track {
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
}

.contact-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb {
	background: var(--border-secondary);
	border-radius: var(--radius-sm);
}

.contact-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb:hover {
	background: var(--border-primary);
}

/* Reusable thin grey scrollbar matching Recent Communications
   Usage: add the `thin-scrollbar` class to any scrollable container */
.thin-scrollbar[b-z5vny7yh8k] {
	/* Firefox */
	scrollbar-width: thin;
	/* use design token for thumb color with transparent track */
	scrollbar-color: var(--border-secondary, #d1d6da) transparent;
}

.thin-scrollbar[b-z5vny7yh8k]::-webkit-scrollbar {
	width: var(--spacing-xs, 8px);
	height: var(--spacing-xs, 8px);
}
.thin-scrollbar[b-z5vny7yh8k]::-webkit-scrollbar-track {
	background: transparent;
}
.thin-scrollbar[b-z5vny7yh8k]::-webkit-scrollbar-thumb {
	background-color: var(--border-secondary, #d1d6da);
	border-radius: var(--radius-sm, 8px);
	border: var(--spacing-xxs, 2px) solid transparent;
	background-clip: padding-box;
}
.thin-scrollbar[b-z5vny7yh8k]::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-primary, #bfc6cc);
}

/* Donor list: keep name and actions on a single line */
.donor-item-padding[b-z5vny7yh8k] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxs);
    min-width: 0;
}

.donor-name[b-z5vny7yh8k] {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	max-width: 100%;
}

.donor-actions[b-z5vny7yh8k] {
 	margin-left: auto;
 	display: flex;
 	gap: var(--spacing-xs);
 	flex-shrink: 0;
}

/* Ensure avatar doesn't push actions down */
.donor-avatar img[b-z5vny7yh8k],
.donor-avatar .avatar-xs[b-z5vny7yh8k] {
 	width: var(--avatar-md);
 	height: var(--avatar-md);
 	flex: 0 0 auto;
}

.contact-item[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
	cursor: pointer;
	transition: var(--transition-fast);
	border: 1px solid transparent;
}

.contact-item:hover[b-z5vny7yh8k] {
	background: var(--bg-hover);
}

.contact-item.active[b-z5vny7yh8k] {
	background: var(--bg-active);
	border-color: var(--info-color);
}

.contact-avatar[b-z5vny7yh8k] {
	position: relative;
	margin-right: var(--spacing-sm);
}

.contact-avatar img[b-z5vny7yh8k] {
	width: var(--avatar-md);
	height: var(--avatar-md);
	border-radius: var(--radius-full);
}

.avatar-placeholder[b-z5vny7yh8k] {
	width: var(--avatar-md);
	height: var(--avatar-md);
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
}

.avatar-placeholder-large[b-z5vny7yh8k] {
	width: var(--avatar-xl);
	height: var(--avatar-xl);
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-2xl);
	text-transform: uppercase;
	margin-right: var(--spacing-lg);
}

.default-avatar[b-z5vny7yh8k] {
	background: var(--bg-muted);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color);
}

.default-avatar-large[b-z5vny7yh8k] {
	width: var(--avatar-xl);
	height: var(--avatar-xl);
	background: var(--bg-muted);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color);
	margin-right: var(--spacing-lg);
}

.contact-status[b-z5vny7yh8k] {
	position: absolute;
	bottom: var(--spacing-xs);
	right: var(--spacing-xs);
	width: var(--spacing-sm);
	height: var(--spacing-sm);
	border-radius: var(--radius-full);
	border: var(--spacing-xxs) solid var(--bg-card);
}

.contact-status.active[b-z5vny7yh8k] {
	background: var(--success-color);
}

.contact-status.inactive[b-z5vny7yh8k] {
	background: var(--text-muted);
}

.contact-info[b-z5vny7yh8k] {
	flex: 1;
}

.contact-name[b-z5vny7yh8k] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
}

.contact-type[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.contact-action[b-z5vny7yh8k] {
	opacity: 0;
	transition: var(--transition-fast);
}

.contact-item:hover .contact-action[b-z5vny7yh8k] {
	opacity: 1;
}

/* Main Content Area */
.contact-main[b-z5vny7yh8k] {
	padding: var(--spacing-xs);
	overflow-y: auto;
	background: var(--bg-card);
	border-right: 1px solid var(--gray-200);
	height: 100%;
	max-height: calc(100vh - 60px);
}

/* Right Sidebar - Communications & Events */
.contact-right-sidebar[b-z5vny7yh8k] {
	background: var(--bg-secondary);
	padding: var(--spacing-sm);
	overflow-y: auto;
	height: 100%;
	max-height: calc(100vh - 100px);
	display: flex;
	flex-direction: column;
}

/* Make communications and events sections equal height */
.communications-section[b-z5vny7yh8k],
.events-section[b-z5vny7yh8k] {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-bottom: var(--spacing-md);
}

.communications-section:last-child[b-z5vny7yh8k],
.events-section:last-child[b-z5vny7yh8k] {
	margin-bottom: 0;
}

.communications-list[b-z5vny7yh8k],
.events-list[b-z5vny7yh8k] {
	flex: 1;
	overflow-y: auto;
}

/* Custom scrollbar for right sidebar */
.contact-right-sidebar[b-z5vny7yh8k]::-webkit-scrollbar {
	width: var(--spacing-xs);
}

.contact-right-sidebar[b-z5vny7yh8k]::-webkit-scrollbar-track {
	background: var(--gray-100);
	border-radius: var(--radius-sm);
}

.contact-right-sidebar[b-z5vny7yh8k]::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-sm);
}

.contact-right-sidebar[b-z5vny7yh8k]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

.no-contact-selected[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
}

.contact-header[b-z5vny7yh8k] {
	margin-bottom: var(--spacing-2xl);
}

.contact-profile[b-z5vny7yh8k] {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-lg);
}

.contact-avatar-large[b-z5vny7yh8k] {
	width: var(--avatar-xl);
	height: var(--avatar-xl);
	border-radius: var(--radius-full);
}

.contact-details[b-z5vny7yh8k] {
	flex: 1;
}

.contact-details h2[b-z5vny7yh8k] {
	margin: 0 0 var(--spacing-sm) 0;
	color: var(--text-primary);
}

.contact-badges[b-z5vny7yh8k] {
	margin-bottom: var(--spacing-md);
}

.contact-badges .badge[b-z5vny7yh8k] {
	margin-right: var(--spacing-sm);
}

.contact-meta p[b-z5vny7yh8k] {
	margin: var(--spacing-xs) 0;
	color: var(--text-muted);
}

.contact-actions[b-z5vny7yh8k] {
	margin-left: auto;
}

.contact-info-tabs[b-z5vny7yh8k] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-2xl);
}

.contact-field[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--text-muted);
}

.contact-field i[b-z5vny7yh8k] {
	width: var(--spacing-md);
	color: var(--primary-color);
}

/* Pledges Section */
.pledges-section[b-z5vny7yh8k] {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	/* restore a balanced outer grey gutter (equal top/bottom) */
	padding: var(--spacing-md) var(--spacing-lg);
	/* margin-bottom: var(--spacing-md); */
	width: 100%;
	max-width: 100%;
}

.section-header[b-z5vny7yh8k] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* margin-bottom: var(--spacing-md); */
}

.section-header h5[b-z5vny7yh8k],
.section-header h6[b-z5vny7yh8k] {
	margin: 0;
	color: var(--text-primary);
}

.section-actions[b-z5vny7yh8k] {
	display: flex;
	gap: var(--spacing-sm);
}

/* Ensure buttons in section headers are properly aligned */
.section-header > .btn[b-z5vny7yh8k] {
	margin-left: auto;
}

.pledges-content[b-z5vny7yh8k] {
	display: flex;
	gap: var(--spacing-lg);
}

.chart-section[b-z5vny7yh8k] {
	/* background: var(--bg-card); */
	border-radius: var(--radius-lg);
	/* moderate inner white padding so content breathes but isn't oversized */
	/* padding: 32px var(--spacing-lg) 32px var(--spacing-lg); */
	/* margin-bottom: var(--spacing-md); */
	/* margin-top: 0; */
}

.chart-header h6[b-z5vny7yh8k] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0 0 var(--spacing-md) 0;
	font-size: var(--font-size-base);
}

.chart-wrapper[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
}

.chart-canvas-container[b-z5vny7yh8k] {
	position: relative;
	width: 200px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.chart-canvas-container canvas[b-z5vny7yh8k] {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.chart-center-label[b-z5vny7yh8k] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

.center-label-title[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--spacing-xs);
}

.center-label-amount[b-z5vny7yh8k] {
	font-size: var(--font-size-xl);
	color: var(--text-primary);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

/* Simple CSS Donut Chart */
.simple-donut-chart[b-z5vny7yh8k] {
	position: relative;
	width: 260px;
	height: 260px;
	border-radius: var(--radius-full);
	background: conic-gradient(
		var(--primary-color) 0deg calc(var(--percentage, 50) * 3.6deg),
		var(--primary-light) calc(var(--percentage, 50) * 3.6deg) 360deg
	);
	display: flex;
	align-items: center;
	justify-content: center;
}

.donut-center[b-z5vny7yh8k] {
	width: 200px;
	height: 200px;
	background: var(--bg-card);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
}

.donut-text[b-z5vny7yh8k] {
	text-align: center;
}

.donut-main[b-z5vny7yh8k] {
	display: block;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	line-height: 1;
}

.donut-sub[b-z5vny7yh8k] {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-top: var(--spacing-xs);
}

.contribution-chart[b-z5vny7yh8k] {
	position: relative;
	display: inline-block;
	margin: var(--spacing-lg) 0;
}

.chart-center[b-z5vny7yh8k] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.chart-center .amount[b-z5vny7yh8k] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.chart-center .label[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.chart-legend[b-z5vny7yh8k] {
	display: flex;
	justify-content: center;
	gap: var(--spacing-xl);
	flex-wrap: wrap;
	width: 100%;
	margin-left: 60px;
}

.legend-item[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--font-size-sm);
}

.legend-dot[b-z5vny7yh8k] {
	width: 12px;
	height: 12px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.legend-label[b-z5vny7yh8k] {
	color: var(--text-secondary);
	font-weight: var(--font-weight-normal);
}

.chart-footer[b-z5vny7yh8k] {
	width: 100%;
	padding-top: var(--spacing-xs);
	padding-bottom: var(--spacing-md);
}

.chart-footer .fw-bold[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: 2px;
	margin-top: 0;
}

.chart-footer .text-muted[b-z5vny7yh8k] {
	color: var(--text-muted);
}

.chart-period[b-z5vny7yh8k] {
	margin-top: var(--spacing-lg);
	text-align: center;
}

/* Groups Section */
.groups-section[b-z5vny7yh8k] {
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	width: 100%;
	max-width: 100%;
}

.groups-list[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.group-item[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	background: var(--bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
}

.group-item .group-avatar[b-z5vny7yh8k] {
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xs);
}

.group-avatar.bg-purple[b-z5vny7yh8k] {
	background-color: var(--purple-500);
}

.group-item span[b-z5vny7yh8k] {
	flex: 1;
	font-weight: var(--font-weight-medium);
}

.communications-section .section-header[b-z5vny7yh8k] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xs);
	flex-shrink: 0;
}

.communications-list[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	/* gap: var(--spacing-md); */
	flex: 1;
	overflow-y: auto;
}

/* Custom scrollbar for communications list */
.communications-list[b-z5vny7yh8k]::-webkit-scrollbar {
	width: var(--spacing-xs);
}

.communications-list[b-z5vny7yh8k]::-webkit-scrollbar-track {
	background: var(--gray-100);
	border-radius: var(--radius-sm);
}

.communications-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-sm);
}

.communications-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

/* Communication items styled like notifications */
.communication-item[b-z5vny7yh8k] {
	display: flex;
	gap: var(--spacing-sm);
	background: var(--bg-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	margin-bottom: var(--spacing-sm);
	transition: var(--transition-all);
	cursor: pointer;
	/* min-height: 60px; */
	align-items: flex-start;
	box-shadow: var(--shadow-sm);
	position: relative;
}

.communication-item:hover[b-z5vny7yh8k] {
	background-color: var(--bg-hover);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.communication-item.unread[b-z5vny7yh8k] {
	background-color: var(--bg-highlight, #f8f9ff);
	border-left: 3px solid var(--primary-color);
}

.communication-item.unread[b-z5vny7yh8k]::after {
	content: "";
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	width: var(--spacing-sm);
	height: var(--spacing-sm);
	background-color: var(--primary-color);
	border-radius: var(--radius-full);
}

.comm-icon[b-z5vny7yh8k] {
	flex-shrink: 0;
	width: var(--avatar-md);
	height: var(--avatar-md);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-sm);
	background: var(--bg-hover);
	color: var(--text-muted);
	margin-right: var(--spacing-sm);
	box-shadow: var(--shadow-sm);
}

.comm-icon.call[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.comm-icon.message[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.comm-icon.email[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.comm-icon.missed[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.comm-details[b-z5vny7yh8k] {
	flex: 1;
	min-width: 0;
	/* Ensures content doesn't overflow */
}

.comm-type[b-z5vny7yh8k] {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
	line-height: var(--line-height-tight);
	display: block;
}

.comm-message[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	line-height: var(--line-height-normal);
	margin-bottom: var(--spacing-xs);
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.comm-time[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	white-space: nowrap;
	font-weight: var(--font-weight-normal);
}

/* Events Section */
.events-section h6[b-z5vny7yh8k] {
	margin-bottom: var(--spacing-md);
	color: var(--text-primary);
}

.events-tabs[b-z5vny7yh8k] {
	display: flex;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--gray-200);
}

.events-tabs[b-z5vny7yh8k] {
	display: flex;
	border-bottom: 1px solid var(--gray-200);
	background: var(--bg-light);
}

.events-tabs .tab-btn[b-z5vny7yh8k] {
	flex: 1;
	text-align: center;
	padding: var(--spacing-sm);
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
	cursor: pointer;
	transition: var(--transition-fast);
}

.events-tabs .tab-btn.active[b-z5vny7yh8k] {
	background: var(--primary-color);
	color: var(--text-light);
	font-weight: var(--font-weight-medium);
	border-radius: 5px;
}

.events-tabs .tab-btn:hover:not(.active)[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-primary);
}

/* Card-like container for tabs to match Recent Communications look */
.events-section .tabs-card[b-z5vny7yh8k] {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.events-section .tabs-card > .events-tabs[b-z5vny7yh8k] {
	border-bottom: none; /* the card itself has border */
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.events-section .tabs-card > .events-tab-content[b-z5vny7yh8k] {
	padding: 0; /* content padding will be inside the tab content area */
}

.events-section .tabs-card[b-z5vny7yh8k] {
	height: 37vh;
	min-height: 37vh;
	max-height: 37vh;
	display: flex;
	flex-direction: column;
}

/* Make lists inside the card scroll if their content overflows */
.events-section .tabs-card .events-list[b-z5vny7yh8k],
.events-section .tabs-card .activities-list[b-z5vny7yh8k] {
	overflow-y: auto;
	flex: 1 1 auto;
	padding: var(--spacing-md);
}

/* Center empty-state icons/messages inside the fixed-height card */
.events-section .tabs-card .text-center[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: var(--spacing-sm);
}

.events-section .tabs-card .text-center i[b-z5vny7yh8k] {
	margin-bottom: 0; /* icon already centered by flex */
}

.events-list[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	max-height: 400px;
	overflow-y: auto;
}

/* Custom scrollbar for events list */
.events-list[b-z5vny7yh8k]::-webkit-scrollbar {
	width: var(--spacing-xs);
}

.events-list[b-z5vny7yh8k]::-webkit-scrollbar-track {
	background: var(--gray-100);
	border-radius: var(--radius-sm);
}

.events-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-sm);
}

.events-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

.event-item[b-z5vny7yh8k] {
	display: flex;
	gap: var(--spacing-sm);
	background: var(--bg-card);
	padding: var(--spacing-md);
	padding-right: 100px; /* Make space for status badge */
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	position: relative;
	align-items: center;
	/* Visual accent: primary color left border */
	border-left: 4px solid var(--primary-color);
}

.event-date[b-z5vny7yh8k] {
	/* hide the large vertical date block to make the layout compact like the mockup
	   the date info will appear inline under the title via .event-dates */
	display: none;
	min-width: 0;
}

.event-date .month[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.event-date .day[b-z5vny7yh8k] {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
}

.event-date .year[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.event-details[b-z5vny7yh8k] {
	flex: 1;
	min-width: 0; /* Allow flex child to shrink below content size */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.event-title[b-z5vny7yh8k] {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
	transition: color 0.2s ease;
	max-width: 100%; /* Prevent overflow */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Add extra padding to ensure text doesn't get too close to status badge */
	padding-right: var(--spacing-sm);
}

.event-title[style*="pointer"][b-z5vny7yh8k] {
	color: var(--primary-color);
}

.event-title[style*="pointer"]:hover[b-z5vny7yh8k] {
	color: var(--primary-dark);
	text-decoration: underline;
}

.event-subtitle[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-bottom: var(--spacing-xs);
}

.event-time[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.event-dates[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}

.event-time-range[b-z5vny7yh8k] {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}

.event-time-range .mx-1[b-z5vny7yh8k] {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.event-time-range .time-icon[b-z5vny7yh8k] {
	color: var(--text-muted);
	margin-right: 0.45rem;
	font-size: 0.9em;
	vertical-align: text-bottom;
	transform: translateY(2px);
}

.event-time-range .time-text[b-z5vny7yh8k] {
	display: inline-block;
	transform: translateY(1px);
	line-height: 1;
}

/* Compact date above the time range (e.g. MAR 25, 2024 | Mon, 25 - Wed, 27 Mar) */
.event-date-compact[b-z5vny7yh8k] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}

.event-date-compact .date-main[b-z5vny7yh8k] {
	color: var(--primary-color);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
}

.event-date-compact .date-sub[b-z5vny7yh8k] {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}

/* Vertical divider between main date and sub-range */
.event-date-compact .date-main[b-z5vny7yh8k]::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 14px;
	background: var(--border-color);
	margin-left: 8px;
	margin-right: 8px;
	vertical-align: middle;
}

@media (max-width: 480px) {
	.event-date-compact[b-z5vny7yh8k] {
		flex-direction: column;
	}
	.event-date-compact .date-main[b-z5vny7yh8k]::after {
		display: none;
	}
}

/* Style first date line as the compact date summary (blue/link-like) */
.event-dates .event-date-line:first-child[b-z5vny7yh8k] {
	color: var(--primary-color);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}

/* Add a clock icon before the time line using FontAwesome (project already uses FA) */
/* Removed watch/clock icon pseudo-element to avoid showing FontAwesome glyph */

/* Make the time line slightly muted */
.event-dates .event-date-line:last-child[b-z5vny7yh8k] {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}

/* Responsive: on very small screens bring back the vertical date block */
@media (max-width: 480px) {
	.event-date[b-z5vny7yh8k] {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		min-width: var(--spacing-2xl);
		margin-right: var(--spacing-sm);
	}
	.event-details[b-z5vny7yh8k] {
		margin-left: 0;
	}
}

.event-date-line[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	display: flex;
	align-items: center;
}

.event-date-line strong[b-z5vny7yh8k] {
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
}

.event-status[b-z5vny7yh8k] {
	/* Position the status badge at the top-right of the card */
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--btn-min-width-xs);
	max-width: 5.625rem; /* 90px - Prevent badge from being too wide */
	height: var(--btn-height-sm);
	padding: 0 var(--spacing-sm);
	border-radius: var(--pill-border-radius);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	box-shadow: none;
	z-index: 10; /* Ensure badge is always on top */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.event-status.ongoing[b-z5vny7yh8k] {
	background: var(--growth-positive-bg);
	color: var(--growth-positive-text);
}

.event-status.upcoming[b-z5vny7yh8k] {
	background: var(--bg-active);
	color: var(--info-color);
}

/* Make the entire event card feel clickable when it has an associated activity */
.event-item.clickable[b-z5vny7yh8k] {
	cursor: pointer;
	transition:
		box-shadow 0.12s ease,
		transform 0.08s ease;
}

.event-item.clickable:hover[b-z5vny7yh8k] {
	box-shadow: var(--shadow-sm);
	transform: translateY(-2px);
}

/* Responsive: on  medium and small screens keep status in-flow to avoid overlap */
@media (max-width: 768px) {
	.event-status[b-z5vny7yh8k] {
		position: static;
		margin-left: auto;
		order: 0;
		align-self: flex-start;
		flex-shrink: 0;
	}
	.event-item[b-z5vny7yh8k] {
		gap: var(--spacing-sm);
		align-items: flex-start;
		padding-right: var(--spacing-md); /* Reset padding on smaller screens */
	}
	.event-title[b-z5vny7yh8k] {
		white-space: normal; /* Allow wrapping on small screens */
	}
}

/* Activities List */
.activities-list[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	max-height: 400px;
	overflow-y: auto;
}

/* Custom scrollbar for activities list */
.activities-list[b-z5vny7yh8k]::-webkit-scrollbar {
	width: var(--spacing-xs);
}

.activities-list[b-z5vny7yh8k]::-webkit-scrollbar-track {
	background: var(--gray-100);
	border-radius: var(--radius-sm);
}

.activities-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-sm);
}

.activities-list[b-z5vny7yh8k]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

.activity-item[b-z5vny7yh8k] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--bg-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	cursor: pointer;
	transition: var(--transition-normal);
}

.activity-item:hover[b-z5vny7yh8k] {
	background: var(--bg-hover);
	border-color: var(--primary-color);
	box-shadow: var(--shadow-hover);
}

.activity-details[b-z5vny7yh8k] {
	flex: 1;
}

.activity-title[b-z5vny7yh8k] {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.activity-date[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.activity-item i.fa-chevron-right[b-z5vny7yh8k] {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* Loading Indicator Styles */
.loading-indicator[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
	text-align: center;
}

.loading-indicator .spinner-border[b-z5vny7yh8k] {
	margin-bottom: var(--spacing-sm);
}

.loading-indicator small[b-z5vny7yh8k] {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* Contact list loading indicators */
.contact-list .loading-indicator[b-z5vny7yh8k] {
	padding: var(--spacing-md);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	background: var(--bg-secondary);
	margin: var(--spacing-sm) 0;
}

.contact-list .loading-indicator .spinner-border-sm[b-z5vny7yh8k] {
	width: 1.5rem;
	height: 1.5rem;
}

/* Contact details loading indicator */
.contact-details-loading[b-z5vny7yh8k] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 300px;
	padding: var(--spacing-3xl);
}

.contact-details-loading .spinner-border[b-z5vny7yh8k] {
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--spacing-md);
}

/* Smooth transition for loading states */
.contact-item[b-z5vny7yh8k] {
	transition: var(--transition-fast);
}

.contact-list.loading .contact-item[b-z5vny7yh8k] {
	opacity: 0.6;
}

/* Loading overlay for search */
.contact-search .loading-overlay[b-z5vny7yh8k] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	z-index: var(--z-dropdown);
}

/* Responsive Design */

/* Laptop optimization - make interface more compact */
@media (min-width: 1024px) and (max-width: 1440px) {
	.contact-container[b-z5vny7yh8k] {
		padding: 0.25rem;
	}

	.donor-item[b-z5vny7yh8k] {
		padding: 0.5rem 0.75rem;
	}

	.btn-sm[b-z5vny7yh8k] {
		font-size: 0.775rem;
		padding: 0.25rem 0.5rem;
	}

	.card-header[b-z5vny7yh8k] {
		padding: 0.75rem 1rem;
	}

	.search-section[b-z5vny7yh8k] {
		padding: 0.75rem !important;
	}

	h5[b-z5vny7yh8k],
	.h5[b-z5vny7yh8k] {
		font-size: 1rem;
	}
}

@media (max-width: 1200px) {
	.contact-right-sidebar[b-z5vny7yh8k] {
		width: 300px;
	}
}

@media (max-width: var(--breakpoint-md)) {
	.contact-layout[b-z5vny7yh8k] {
		flex-direction: column;
	}

	.contact-sidebar[b-z5vny7yh8k],
	.contact-right-sidebar[b-z5vny7yh8k] {
		width: 100%;
		height: auto;
		max-height: 50vh;
	}

	.contact-main[b-z5vny7yh8k] {
		height: auto;
		min-height: var(--spacing-4xl) * 4;
		max-height: calc(100vh - var(--spacing-xl));
	}

	.contact-details-loading[b-z5vny7yh8k] {
		min-height: var(--spacing-4xl);
		padding: var(--spacing-lg);
	}

	.contact-details-loading .spinner-border[b-z5vny7yh8k] {
		width: var(--spacing-xl);
		height: var(--spacing-xl);
	}

	.communications-list[b-z5vny7yh8k],
	.events-list[b-z5vny7yh8k] {
		max-height: var(--spacing-4xl) * 2;
	}
}

/* Utility Classes for Inline Style Removal */
.loading-container[b-z5vny7yh8k] {
	min-height: var(--spacing-4xl);
}

.legend-color-primary[b-z5vny7yh8k] {
	background-color: var(--primary-color);
}

.legend-color-light[b-z5vny7yh8k] {
	background-color: var(--primary-light);
}

/* Group Avatar Styles */
.group-avatar[b-z5vny7yh8k] {
	width: var(--avatar-md);
	height: var(--avatar-md);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	margin-right: var(--spacing-sm);
	flex-shrink: 0;
	/* Note: background-color is set dynamically via inline style based on group.Color */
}

/* Donor List Styles - Added for simplified implementation */
.donor-item[b-z5vny7yh8k] {
	border-bottom: 1px solid var(--gray-200);
	cursor: pointer;
	transition: var(--transition-fast);
	padding: var(--spacing-sm);
}

.donor-item:hover[b-z5vny7yh8k] {
	background-color: var(--bg-hover);
}

.donor-item.selected[b-z5vny7yh8k] {
	background: var(--bg-active);
	border-color: var(--info-color);
	color: var(--text-primary);
}

.donor-item.selected .text-muted[b-z5vny7yh8k] {
	color: var(--text-secondary) !important;
}

.donor-item-border[b-z5vny7yh8k] {
	border-bottom: 1px solid var(--gray-100);
}

.donor-item-padding[b-z5vny7yh8k] {
	padding: var(--spacing-xs) var(--spacing-sm);
}

.donor-avatar[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ensure contribution/creator readonly inputs on Donors page look consistent */
.contact-main input[readonly][b-z5vny7yh8k],
.contact-main .form-control[readonly][b-z5vny7yh8k] {
	background-color: var(--bg-light);
	border-color: var(--border-color);
	color: var(--text-muted);
	cursor: not-allowed;
}

.donor-name[b-z5vny7yh8k] {
	font-size: var(--font-size-md);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-medium);
}

/* Style for donor type and status text */
.donor-item .text-muted[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
}

.donor-actions[b-z5vny7yh8k] {
	opacity: 0;
	transition: var(--transition-fast);
}

.donor-item:hover .donor-actions[b-z5vny7yh8k] {
	opacity: 1;
}

.avatar-xs[b-z5vny7yh8k] {
	width: var(--spacing-xl);
	height: var(--spacing-xl);
	font-size: var(--font-size-xs);
	line-height: var(--spacing-2xl);
	background: var(--gradient-card);
	color: var(--text-light);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
}

.flex-grow-min[b-z5vny7yh8k] {
	min-width: 0;
}

.header-title[b-z5vny7yh8k] {
	font-size: var(--font-size-lg);
}

.search-input[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
	padding: var(--spacing-xs) var(--spacing-sm);
}

.search-button[b-z5vny7yh8k] {
	padding: var(--spacing-xs) var(--spacing-sm);
}

.search-icon[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
}

.create-button[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
	padding: var(--spacing-xs) var(--spacing-sm);
	white-space: nowrap;
}

.create-icon[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
}

.filter-checkbox[b-z5vny7yh8k] {
	margin-left: var(--spacing-xs);
}

.filter-checkbox input[b-z5vny7yh8k] {
	transform: scale(0.9);
}

.filter-label[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
	margin-left: var(--spacing-xs);
}

.loading-center[b-z5vny7yh8k] {
	padding: var(--spacing-md);
}

.loading-text[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
}

.error-alert[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
	padding: var(--spacing-sm);
}

.alert-info[b-z5vny7yh8k] {
	margin-top: 40px;
	min-height: 107px;
}

.retry-button[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
}

.retry-icon[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
}

.btn-xs[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
}

.icon-xs[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
}

.icon-lg[b-z5vny7yh8k] {
	font-size: var(--font-size-xl);
}

.text-xs[b-z5vny7yh8k] {
	font-size: var(--font-size-sm);
}

.empty-state-container[b-z5vny7yh8k] {
	padding: var(--spacing-md);
}

.card-footer-compact[b-z5vny7yh8k] {
	padding: var(--spacing-xs) var(--spacing-sm);
}

.badge-sm[b-z5vny7yh8k] {
	font-size: var(--font-size-xs);
	padding: 0.2rem 0.4rem;
}

/* Enhanced Donor List Styles */
/* Advanced Filter Panel - Overlay Style (matching Activities) */
[b-z5vny7yh8k] .advanced-filter-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--bg-primary);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
	z-index: 999;
	/* Lower than header dropdown (1000) to prevent overlap */
	animation: slideDown-b-z5vny7yh8k 0.3s ease-out;
	max-height: 500px;
	overflow-y: auto;
	margin-top: var(--spacing-xs);
	backdrop-filter: blur(4px);
	width: 100%;
	box-sizing: border-box;
}

@keyframes slideDown-b-z5vny7yh8k {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

[b-z5vny7yh8k] .advanced-filter-panel .form-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xs);
	display: block;
}

[b-z5vny7yh8k] .advanced-filter-panel .form-control-sm,
[b-z5vny7yh8k] .advanced-filter-panel .form-select-sm {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background-color: var(--bg-card); /* ensure inputs use design token for card/input background */
	color: var(--text-primary);
	transition: var(--transition-fast);
}

[b-z5vny7yh8k] .advanced-filter-panel .form-control-sm:focus,
[b-z5vny7yh8k] .advanced-filter-panel .form-select-sm:focus {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
	outline: none;
}

[b-z5vny7yh8k] .advanced-filter-panel .form-control-sm::placeholder {
	color: var(--text-muted);
	font-style: italic;
}

/* Ensure donor advanced filter inputs show the white inner background and muted placeholders */
[b-z5vny7yh8k] .advanced-filter-panel input[type="text"],
[b-z5vny7yh8k] .advanced-filter-panel input[type="date"],
[b-z5vny7yh8k] .advanced-filter-panel .form-control-sm,
[b-z5vny7yh8k] .advanced-filter-panel .form-select-sm {
	background-color: var(--bg-card);
    color: var(--text-primary);
}

[b-z5vny7yh8k] .advanced-filter-panel input::placeholder,
[b-z5vny7yh8k] .advanced-filter-panel .form-control-sm::placeholder,
[b-z5vny7yh8k] .advanced-filter-panel .form-select-sm::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

[b-z5vny7yh8k] .advanced-filter-panel .row {
	margin: 0;
	width: 100%;
}

[b-z5vny7yh8k] .advanced-filter-panel .col-6,
[b-z5vny7yh8k] .advanced-filter-panel .col-12 {
	padding: 0 var(--spacing-xs);
	margin-bottom: var(--spacing-sm);
}

[b-z5vny7yh8k] .donor-item {
	transition: all 0.2s ease-in-out;
	border-radius: 0.25rem;
	margin-bottom: 0.25rem;
	cursor: pointer;
}

[b-z5vny7yh8k] .donor-item:hover {
	background-color: var(--bg-hover);
	transform: translateY(-1px);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

[b-z5vny7yh8k] .donor-item.selected {
	background: var(--bg-active);
	border-color: var(--info-color);
	color: var(--text-primary);
}

[b-z5vny7yh8k] .donor-item.bulk-selected {
	background: var(--bg-active);
	border-color: var(--info-color);
	color: var(--text-primary);
}

[b-z5vny7yh8k] .donor-item.selected .text-muted,
[b-z5vny7yh8k] .donor-item.bulk-selected .text-muted {
	color: var(--text-secondary) !important;
}

[b-z5vny7yh8k] .donor-avatar img {
	width: var(--avatar-md);
	height: var(--avatar-md);
	object-fit: cover;
	border: 2px solid var(--border-color);
	border-radius: 50%;
}

[b-z5vny7yh8k] .donor-avatar .avatar-xs {
	width: var(--avatar-md);
	height: var(--avatar-md);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-primary);
	color: var(--text-light);
	font-weight: 600;
	border-radius: 50%;
	font-size: var(--font-size-xs);
}

[b-z5vny7yh8k] .donor-actions .btn {
	opacity: 0.7;
	transition: opacity 0.2s ease-in-out;
}

[b-z5vny7yh8k] .donor-item:hover .donor-actions .btn {
	opacity: 1;
}

[b-z5vny7yh8k] .donor-name {
	font-size: 0.875rem;
	line-height: 1.25;
}

[b-z5vny7yh8k] .text-xs {
	font-size: 0.75rem;
}

[b-z5vny7yh8k] .empty-state-container {
	padding: 2rem 1rem;
}

[b-z5vny7yh8k] .empty-state-container .icon-lg {
	font-size: 2rem;
	color: var(--text-muted);
}

[b-z5vny7yh8k] .loading-center {
	padding: 2rem 1rem;
}

[b-z5vny7yh8k] .loading-text {
	font-size: 0.875rem;
}

[b-z5vny7yh8k] .error-alert {
	margin: 1rem;
	border-radius: 0.375rem;
}

[b-z5vny7yh8k] .retry-button {
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
}

[b-z5vny7yh8k] .retry-icon {
	font-size: 0.75rem;
}

.card-footer-compact[b-z5vny7yh8k] {
	padding: 0.375rem var(--spacing-sm);
}

[b-z5vny7yh8k] .card-footer-compact {
	padding: 0.375rem 1rem;
	background-color: var(--bg-hover) !important;
}
[b-z5vny7yh8k] .filter-label {
	font-size: 0.875rem;
}

[b-z5vny7yh8k] .donor-list {
	padding-bottom: var(--spacing-sm);
	/* No scrolling - list will expand naturally */
}

/* Left Panel Height Constraints */
[b-z5vny7yh8k] .col-md-3 .card {
	height: calc(100vh - 120px) !important;
	max-height: calc(100vh - 120px) !important;
	position: relative;
	z-index: 1;
}

/* Center Panel (Donor Details) Height Constraints */
[b-z5vny7yh8k] .col-md-6 .card {
	height: calc(100vh - 120px) !important;
	max-height: calc(100vh - 120px) !important;
	position: relative;
	z-index: 1;
}

[b-z5vny7yh8k] .contact-main {
	/* height: calc(100vh - 200px) !important; */
	/* max-height: calc(100vh - 200px) !important; */
	overflow-y: auto !important;
	padding: 1rem !important;
}

/* Make content sections more compact */
.modern-donor-header[b-z5vny7yh8k] {
	margin-bottom: 1rem !important;
}

.contact-details-modern[b-z5vny7yh8k] {
	margin-top: 1rem !important;
}

.activity-groups-modern[b-z5vny7yh8k] {
	margin-top: 1rem !important;
}

[b-z5vny7yh8k] .contact-left-panel {
	height: calc(100vh - 200px) !important;
	max-height: calc(100vh - 200px) !important;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

[b-z5vny7yh8k] .donor-list {
	flex: 1;
	overflow-y: auto;
}

[b-z5vny7yh8k] .search-section {
	background-color: var(--bg-card);
	border-bottom: 1px solid var(--border-color);
	flex-shrink: 0;
	position: relative;
	z-index: 10000;
	/* Ensure parent container has high z-index for advanced filter overlay */
}

/* Ensure contact list has lower z-index than advanced filter */
.contact-list[b-z5vny7yh8k] {
	position: relative;
	z-index: 1;
	/* Lower z-index so filters appear above */
}

.contact-item[b-z5vny7yh8k] {
	position: relative;
	z-index: 2;
	/* Higher than the list container but lower than filters */
}

[b-z5vny7yh8k] .form-check-input:checked {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

[b-z5vny7yh8k] .dropdown-menu {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

[b-z5vny7yh8k] .dropdown-item {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

[b-z5vny7yh8k] .dropdown-item:hover {
	background-color: var(--bg-muted);
}

[b-z5vny7yh8k] .dropdown-item i {
	width: 1rem;
	text-align: center;
}

[b-z5vny7yh8k] .dropdown-header {
	padding: var(--spacing-xs) var(--spacing-md);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

[b-z5vny7yh8k] .dropdown-divider {
	margin: var(--spacing-xs) 0;
	border-color: var(--border-light);
}

[b-z5vny7yh8k] .btn-xs {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	line-height: 1.25;
	border-radius: 0.25rem;
}

[b-z5vny7yh8k] .icon-xs {
	font-size: 0.75rem;
}

/* Mobile Responsiveness Enhancements */
@media (max-width: 768px) {
	[b-z5vny7yh8k] .advanced-filter-panel .row .col-6,
	[b-z5vny7yh8k] .advanced-filter-panel .row .col-12 {
		margin-bottom: 0.5rem;
	}

	[b-z5vny7yh8k] .donor-item {
		margin-bottom: 0.5rem;
	}

	[b-z5vny7yh8k] .donor-actions {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	/* Stack panels vertically on mobile */
	.contact-layout .row > div[b-z5vny7yh8k] {
		margin-bottom: 1rem;
	}
}

/* Enhanced Selection Styles */
[b-z5vny7yh8k] .form-check-input {
	cursor: pointer;
}

[b-z5vny7yh8k] .donor-item .form-check-input {
	margin-top: 0;
}

/* Loading States */
[b-z5vny7yh8k] .spinner-border-sm {
	width: 1rem;
	height: 1rem;
}

[b-z5vny7yh8k] .donor-actions .btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Enhanced Hover Effects */
[b-z5vny7yh8k] .btn-outline-primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

[b-z5vny7yh8k] .btn-outline-secondary:hover {
	transform: translateY(-1px);
	box-shadow: 0 0.25rem 0.5rem rgba(108, 117, 125, 0.25);
}

/* Advanced Filter Enhancements */
[b-z5vny7yh8k] .advanced-filter-panel .btn-sm {
	font-size: var(--font-size-xs);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: var(--radius-sm);
	transition: var(--transition-all);
	font-weight: var(--font-weight-medium);
}

[b-z5vny7yh8k] .advanced-filter-panel .btn-primary {
	background: linear-gradient(
		135deg,
		var(--primary-color),
		var(--primary-color-dark)
	);
	border: none;
	color: var(--text-light);
}

[b-z5vny7yh8k] .advanced-filter-panel .btn-primary:hover {
	background: linear-gradient(
		135deg,
		var(--primary-color-dark),
		var(--primary-color)
	);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

[b-z5vny7yh8k] .advanced-filter-panel .btn-outline-secondary {
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
	background: var(--bg-primary);
}

[b-z5vny7yh8k] .advanced-filter-panel .btn-outline-secondary:hover {
	background: var(--bg-hover);
	border-color: var(--border-hover);
	color: var(--text-primary);
}

/* Filter action buttons container - match Activities layout */
[b-z5vny7yh8k] .advanced-filter-panel .d-flex.gap-2 {
	justify-content: flex-end;
}

[b-z5vny7yh8k] .advanced-filter-panel .mt-3 {
	margin-top: var(--spacing-md) !important;
	padding-top: var(--spacing-sm);
	border-top: 1px solid var(--border-light);
}

/* Bulk Selection Styles - Same as individual selection */
.donor-item.bulk-selected[b-z5vny7yh8k] {
	background: var(--bg-active);
	border-color: var(--info-color);
	color: var(--text-primary);
}

.donor-item.bulk-selected .text-muted[b-z5vny7yh8k] {
	color: var(--text-secondary) !important;
}

.bulk-selection-indicator[b-z5vny7yh8k] {
	font-size: 1.1em;
}

.bulk-selection-indicator i[b-z5vny7yh8k] {
	color: var(--primary-color) !important;
}

/* Event layout styles */
.event-bottom-row[b-z5vny7yh8k] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--spacing-xs);
}

.event-bottom-row .event-time[b-z5vny7yh8k] {
	flex: 1;
}

/* Group avatar styles */
.group-avatar[b-z5vny7yh8k] {
	background-color: var(--group-color);
}

/* Modern Donor Header Styles */
.modern-donor-header[b-z5vny7yh8k] {
	background: var(--bg-card);
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	box-shadow: var(--shadow-lg, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
	margin-bottom: 1.5rem;
}

.profile-header-bg[b-z5vny7yh8k] {
	background: var(--gradient-card);
	padding: 1rem;
	position: relative;
}

.profile-content[b-z5vny7yh8k] {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.profile-avatar-container[b-z5vny7yh8k] {
	position: relative;
}

.profile-avatar[b-z5vny7yh8k] {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.3);
	object-fit: cover;
}

.profile-avatar-default[b-z5vny7yh8k] {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	border: 4px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile-initials[b-z5vny7yh8k] {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-light);
	text-transform: uppercase;
}

.profile-status-indicator[b-z5vny7yh8k] {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--text-light);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-status-indicator.active i[b-z5vny7yh8k] {
	color: var(--metric-green, #10b981);
	font-size: 0.875rem;
}

.profile-status-indicator.inactive i[b-z5vny7yh8k] {
	color: var(--metric-orange, #f59e0b);
	font-size: 0.875rem;
}

.profile-info[b-z5vny7yh8k] {
	flex: 1;
	color: var(--text-light);
}

.profile-name[b-z5vny7yh8k] {
	margin: 0 0 0.5rem 0;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--text-light);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.profile-meta[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	opacity: 0.9;
	flex-wrap: wrap;
}

.status-toggle-inline[b-z5vny7yh8k] {
	margin-top: 0.35rem;
	margin-left: 0.75rem;
}

.status-toggle-inline .form-check-input[b-z5vny7yh8k] {
	background-color: var(--gray-700);
	border-color: var(--gray-600);
}

.status-toggle-inline .form-check-input:checked[b-z5vny7yh8k] {
	background-color: var(--metric-green, #10b981) !important;
	border-color: var(--metric-green, #10b981) !important;
	box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.3);
}

.status-toggle-inline .form-check-label[b-z5vny7yh8k] {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
	margin-left: 0.5rem;
}

.donor-type-chip[b-z5vny7yh8k] {
	background: rgba(255, 255, 255, 0.2);
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	backdrop-filter: blur(10px);
}

/* Distinct Anonymous chip style */
.anonymous-chip[b-z5vny7yh8k] {
	/* darker subtle pill to differentiate from active/association chips */
	background: rgba(var(--black-rgb), 0.18);
	color: var(--text-light);
	padding: var(--spacing-6) var(--spacing-12);
	border-radius: var(--radius-20);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	border: 1px solid var(--overlay-hover-light);
	box-shadow: 0 1px 0 rgba(var(--white-rgb), 0.02) inset;
	display: inline-block;
}

.anonymous-container[b-z5vny7yh8k] {
	margin-top: var(--spacing-xs);
	align-self: flex-end;
	/* no longer used when placed next to name; keep as fallback */
	position: relative;
	top: 0;
	right: var(--spacing-sm);
}

/* When anonymous is displayed next to the name keep it vertically centered */
.anonymous-next-to-name[b-z5vny7yh8k] {
	margin-left: var(--spacing-6);
	transform: translateY(2px);
}

.separator[b-z5vny7yh8k] {
	opacity: 0.6;
}

.status-text[b-z5vny7yh8k] {
	font-weight: 500;
}

.associations-chips[b-z5vny7yh8k] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.association-chip[b-z5vny7yh8k] {
	background: rgba(255, 255, 255, 0.15);
	color: var(--text-light);
	padding: 0.25rem 0.5rem;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 500;
	backdrop-filter: blur(5px);
}

.association-chip.more-chip[b-z5vny7yh8k] {
	background: rgba(255, 255, 255, 0.25);
	font-style: italic;
}

.profile-actions-panel[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}

.profile-actions[b-z5vny7yh8k] {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.btn-action[b-z5vny7yh8k] {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color, #dee2e6);
	background: var(--bg-card);
	color: var(--metric-orange, #f59e0b);
	font-size: 0.875rem;
	transition: all 0.2s ease;
	flex-shrink: 0;
	aspect-ratio: 1 !important;
	min-width: 40px !important;
	max-width: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	padding: 0 !important;
}

.btn-action:hover[b-z5vny7yh8k] {
	background: var(--bg-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
	color: var(--text-secondary, #495057);
	border-color: var(--border-secondary, #adb5bd);
}

.btn-primary.btn-action[b-z5vny7yh8k] {
	background: var(--bg-card);
	color: var(--metric-orange, #f59e0b);
	border-color: var(--border-color, #dee2e6);
}

.btn-primary.btn-action:hover[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-orange, #d97706);
	border-color: var(--border-secondary, #adb5bd);
}

.btn-outline-primary.btn-action[b-z5vny7yh8k] {
	background: var(--bg-card);
	color: var(--metric-blue, #3b82f6);
	border-color: var(--border-color, #dee2e6);
}

.btn-outline-primary.btn-action:hover[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--primary-color-dark, #1d4ed8);
	border-color: var(--border-secondary, #adb5bd);
}

.btn-outline-primary.btn-action:hover[b-z5vny7yh8k] {
	background: var(--bg-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--shadow-sm) !important;
	color: var(--primary-color-dark, #1d4ed8) !important;
	border-color: var(--border-secondary, #adb5bd) !important;
}

/* Additional specificity for edit button hover */
.profile-actions .btn-outline-primary.btn-action:hover[b-z5vny7yh8k],
.profile-actions .btn-outline-primary.btn-action:focus[b-z5vny7yh8k] {
	background: var(--bg-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1)) !important;
	color: var(--primary-color-dark, #1d4ed8) !important;
	border-color: var(--border-secondary, #adb5bd) !important;
}

.metrics-row[b-z5vny7yh8k] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--bg-hover);
}

.metric-card[b-z5vny7yh8k] {
	background: var(--bg-card);
	border-radius: var(--radius-md, 8px);
	padding: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
	transition: all 0.2s ease;
	min-height: 70px;
}

.metric-card:hover[b-z5vny7yh8k] {
	transform: translateY(-1px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.metric-card.primary .metric-icon[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-green, #10b981);
}

.metric-card.secondary .metric-icon[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-blue, #3b82f6);
}

.metric-card.tertiary .metric-icon[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-purple, #8b5cf6);
}

/* Contact metric cards styling */
.metric-card.contact .metric-icon.email[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-orange, #f59e0b);
}

.metric-card.contact .metric-icon.phone[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-teal, #06b6d4);
}

.metric-card.contact .metric-icon.address[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--metric-red, #ef4444);
}

.metric-icon[b-z5vny7yh8k] {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	flex-shrink: 0;
}

.metric-content[b-z5vny7yh8k] {
	flex: 1;
	min-width: 0;
}

.metric-label[b-z5vny7yh8k] {
	font-size: 0.75rem;
	color: var(--text-muted);
	font-weight: 500;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.metric-value[b-z5vny7yh8k] {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary, #1f2937);
	line-height: 1.2;
}

.metric-value-green[b-z5vny7yh8k] {
	color: var(--success-color, #059669) !important;
}

.metric-value-contact[b-z5vny7yh8k] {
	font-size: 0.85rem;
	font-weight: 500;
	word-break: break-word;
}

.address-compact[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.address-compact span[b-z5vny7yh8k] {
	font-size: 0.8rem;
	line-height: 1.1;
}

.metric-card.address-metric[b-z5vny7yh8k] {
	grid-column: span 2;
	min-width: 0;
}

@media (max-width: 768px) {
	.metrics-row[b-z5vny7yh8k] {
		grid-template-columns: 1fr;
	}

	.metric-card.address-metric[b-z5vny7yh8k] {
		grid-column: span 1;
	}
}

/* Responsive adjustments for the modern header */
@media (max-width: 768px) {
	.profile-content[b-z5vny7yh8k] {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.profile-actions[b-z5vny7yh8k] {
		margin-top: 1rem;
	}

	.profile-actions-panel[b-z5vny7yh8k] {
		align-items: center;
	}

	.metrics-row[b-z5vny7yh8k] {
		grid-template-columns: 1fr;
		padding: 1rem;
	}

	.profile-name[b-z5vny7yh8k] {
		font-size: 1.5rem;
	}
}

/* Modern Contact Details Styles */
.contact-details-modern[b-z5vny7yh8k] {
	margin-top: 1.5rem;
}

.section-header-modern[b-z5vny7yh8k] {
	margin-bottom: 1rem;
}

.section-title-modern[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary, #374151);
}

.section-title-modern i[b-z5vny7yh8k] {
	color: var(--text-muted);
}

.contact-cards-grid[b-z5vny7yh8k] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.contact-info-card[b-z5vny7yh8k] {
	background: var(--bg-card);
	border: 1px solid var(--gray-200);
	border-radius: 12px;
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.contact-info-card:hover[b-z5vny7yh8k] {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border-color: var(--input-border-variant, #d1d5db);
}

.contact-info-card.primary[b-z5vny7yh8k] {
	border-left: 4px solid var(--metric-blue, #3b82f6);
}

.contact-info-card.secondary[b-z5vny7yh8k] {
	border-left: 4px solid var(--metric-green, #10b981);
}

.contact-info-card.tertiary[b-z5vny7yh8k] {
	border-left: 4px solid var(--metric-purple, #8b5cf6);
}

.contact-info-card.quaternary[b-z5vny7yh8k] {
	border-left: 4px solid var(--metric-orange, #f59e0b);
}

.contact-card-icon[b-z5vny7yh8k] {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: var(--text-light);
	flex-shrink: 0;
}

.contact-info-card.primary .contact-card-icon[b-z5vny7yh8k] {
	background: linear-gradient(
		135deg,
		var(--metric-blue, #3b82f6) 0%,
		var(--primary-color-dark, #1d4ed8) 100%
	);
}

.contact-info-card.secondary .contact-card-icon[b-z5vny7yh8k] {
	background: linear-gradient(
		135deg,
		var(--metric-green, #10b981) 0%,
		var(--success-color, #059669) 100%
	);
}

.contact-info-card.tertiary .contact-card-icon[b-z5vny7yh8k] {
	background: linear-gradient(
		135deg,
		var(--metric-purple, #8b5cf6) 0%,
		var(--metric-purple-dark, #7c3aed) 100%
	);
}

.contact-info-card.quaternary .contact-card-icon[b-z5vny7yh8k] {
	background: linear-gradient(
		135deg,
		var(--metric-orange, #f59e0b) 0%,
		var(--metric-orange, #d97706) 100%
	);
}

.contact-card-content[b-z5vny7yh8k] {
	flex: 1;
	min-width: 0;
}

.contact-card-label[b-z5vny7yh8k] {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.contact-card-value[b-z5vny7yh8k] {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary, #111827);
}

.contact-link[b-z5vny7yh8k] {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.contact-link:hover[b-z5vny7yh8k] {
	color: var(--metric-blue, #3b82f6);
	text-decoration: none;
}

.contact-card-actions[b-z5vny7yh8k] {
	flex-shrink: 0;
}

.contact-card-actions .btn[b-z5vny7yh8k] {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: 0.75rem;
}

/* Address Card */
.address-card[b-z5vny7yh8k] {
	background: var(--bg-card);
	border: 1px solid var(--gray-200);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
	margin-top: 1rem;
}

.address-card:hover[b-z5vny7yh8k] {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.address-card-header[b-z5vny7yh8k] {
	background: linear-gradient(
		135deg,
		var(--gray-50, #f3f4f6) 0%,
		var(--gray-200) 100%
	);
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-bottom: 1px solid var(--gray-200);
}

.address-card-icon[b-z5vny7yh8k] {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: linear-gradient(
		135deg,
		var(--metric-red, #ef4444) 0%,
		var(--danger-dark, #dc2626) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-size: 0.875rem;
}

.address-card-title[b-z5vny7yh8k] {
	flex: 1;
	font-weight: 600;
	color: var(--text-primary, #374151);
	font-size: 0.875rem;
}

.address-card-actions .btn[b-z5vny7yh8k] {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: 0.75rem;
}

.address-card-content[b-z5vny7yh8k] {
	padding: 1rem;
}

.address-line[b-z5vny7yh8k] {
	margin-bottom: 0.25rem;
	color: var(--text-primary, #374151);
	font-size: 0.875rem;
	line-height: 1.5;
}

.address-line:last-child[b-z5vny7yh8k] {
	margin-bottom: 0;
}

.address-line.country[b-z5vny7yh8k] {
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	font-size: 0.75rem;
	margin-top: 0.5rem;
}

/* Responsive adjustments for contact details */
@media (max-width: 768px) {
	.contact-cards-grid[b-z5vny7yh8k] {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.contact-info-card[b-z5vny7yh8k] {
		padding: 0.75rem;
	}

	.address-card-header[b-z5vny7yh8k] {
		padding: 0.75rem;
	}

	.address-card-content[b-z5vny7yh8k] {
		padding: 0.75rem;
	}
}

/* Modern Activity & Groups Layout */
.activity-groups-modern[b-z5vny7yh8k] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 1.5rem;
	align-items: stretch;
}

.contributions-section-modern[b-z5vny7yh8k],
.groups-section-modern[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
}

.section-card[b-z5vny7yh8k] {
	background: var(--bg-card);
	border: 1px solid var(--gray-200);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.section-card:hover[b-z5vny7yh8k] {
	transform: translateY(-2px);
	box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.15);
}

.section-card-header[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: linear-gradient(
		135deg,
		var(--bg-hover) 0%,
		var(--bg-secondary) 100%
	);
	border-bottom: 1px solid var(--border-color);
}

.section-card-icon[b-z5vny7yh8k] {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-hover);
	color: var(--text-muted);
	font-size: 1.25rem;
	flex-shrink: 0;
}

.section-card-icon.contributions[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.section-card-icon.groups[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.section-card-icon.contributions[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.section-card-icon[b-z5vny7yh8k] {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-hover);
	color: var(--text-muted);
	font-size: 1.25rem;
	flex-shrink: 0;
}

.section-card-icon.contributions[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.section-card-icon.groups[b-z5vny7yh8k] {
	background: var(--bg-hover);
	color: var(--text-muted);
}

.section-card-actions[b-z5vny7yh8k] {
	flex-shrink: 0;
}

.section-card-body[b-z5vny7yh8k] {
	padding: 1.25rem;
}

/* Chart Modern Container */
.chart-modern-container[b-z5vny7yh8k] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.chart-display[b-z5vny7yh8k] {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.chart-placeholder-modern[b-z5vny7yh8k] {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: linear-gradient(
		135deg,
		var(--gray-50, #f3f4f6) 0%,
		var(--gray-200) 100%
	);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--text-muted);
	font-size: 0.875rem;
}

.chart-placeholder-modern i[b-z5vny7yh8k] {
	font-size: 2rem;
}

.chart-summary[b-z5vny7yh8k] {
	width: 100%;
	text-align: center;
}

.chart-stats[b-z5vny7yh8k] {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.stat-item[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.stat-indicator[b-z5vny7yh8k] {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.stat-item.primary .stat-indicator[b-z5vny7yh8k] {
	background: var(--metric-green, #10b981);
}

.stat-item.secondary .stat-indicator[b-z5vny7yh8k] {
	background: var(--gray-200);
}

.stat-content[b-z5vny7yh8k] {
	text-align: left;
}

.stat-label[b-z5vny7yh8k] {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-bottom: 0.125rem;
}

.stat-value[b-z5vny7yh8k] {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary, #1f2937);
}

.chart-period-modern[b-z5vny7yh8k] {
	display: flex;
	justify-content: center;
}

.period-badge[b-z5vny7yh8k] {
	background: linear-gradient(
		135deg,
		var(--metric-purple, #ddd6fe) 0%,
		var(--metric-purple-dark, #c4b5fd) 100%
	);
	color: var(--metric-purple-dark, #5b21b6);
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Groups List Modern */
.group-item-modern[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--bg-hover);
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--radius-lg, 12px);
	transition: all 0.2s ease;
}

.group-item-modern:hover[b-z5vny7yh8k] {
	background: var(--bg-secondary, #f1f5f9);
	border-color: var(--border-secondary, #cbd5e1);
	transform: translateX(2px);
}

.group-avatar-modern[b-z5vny7yh8k] {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-weight: 600;
	font-size: 0.875rem;
	flex-shrink: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.group-info[b-z5vny7yh8k] {
	flex: 1;
	min-width: 0;
}

.group-name[b-z5vny7yh8k] {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary, #1f2937);
	margin-bottom: 0.125rem;
}

.group-type[b-z5vny7yh8k] {
	font-size: 0.75rem;
	color: var(--metric-green, #10b981);
	font-weight: 500;
}

.group-actions[b-z5vny7yh8k] {
	flex-shrink: 0;
}

/* Empty Groups State */
.empty-groups-state[b-z5vny7yh8k] {
	text-align: center;
	padding: 2rem 1rem;
}

.empty-state-icon[b-z5vny7yh8k] {
	width: var(--font-size-3xl);
	height: var(--font-size-3xl);
	border-radius: 50%;
	background: linear-gradient(
		135deg,
		var(--gray-50, #f3f4f6) 0%,
		var(--gray-200) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem auto;
	color: var(--text-muted);
	font-size: 1.5rem;
}

.empty-state-content h6[b-z5vny7yh8k] {
	margin: 0 0 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary, #374151);
}

.empty-state-content p[b-z5vny7yh8k] {
	margin: 0 0 1rem 0;
	font-size: 0.75rem;
	color: var(--text-muted);
	line-height: 1.5;
}

/* Donor-specific styles appended from Donors.razor */
.donor-details-header[b-z5vny7yh8k] {
	background: var(--bg-hover);
	border-radius: var(--radius-md, 8px);
	padding: 1.5rem;
	margin-bottom: 1rem;
}

.donor-picture-container[b-z5vny7yh8k] {
	min-width: var(--avatar-lg);
}

.donor-picture[b-z5vny7yh8k] {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	object-fit: cover;
	border: 3px solid var(--bg-card);
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.donor-avatar-large[b-z5vny7yh8k] {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	background: linear-gradient(
		135deg,
		var(--metric-purple, #667eea) 0%,
		var(--metric-purple-dark, #764ba2) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-weight: 600;
	font-size: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.donor-name[b-z5vny7yh8k] {
	color: var(--text-primary, #2c3e50);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.donor-type-badge[b-z5vny7yh8k] {
	margin-bottom: 1rem;
}

.donor-actions[b-z5vny7yh8k] {
	align-items: flex-start;
}

.associations-container[b-z5vny7yh8k] {
	margin-top: 0.25rem;
}

.associations-container .badge[b-z5vny7yh8k] {
	margin-right: 0.25rem;
	margin-bottom: 0.25rem;
}

.info-card[b-z5vny7yh8k] {
	background: var(--bg-card);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-md, 6px);
	padding: 1rem;
	text-align: center;
}

.info-label[b-z5vny7yh8k] {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 0.25rem;
}

.info-value[b-z5vny7yh8k] {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-primary, #2c3e50);
}

.status-toggle-section[b-z5vny7yh8k] {
	border-top: 1px solid var(--gray-200);
	padding-top: 1rem;
}

.form-check-input:checked[b-z5vny7yh8k] {
	background-color: var(--success-color, #28a745);
	border-color: var(--success-color, #28a745);
}

.section-title[b-z5vny7yh8k] {
	color: var(--text-primary, #2c3e50);
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--gray-200);
	padding-bottom: 0.5rem;
}

.contact-details-section[b-z5vny7yh8k] {
	background: var(--bg-card);
	border-radius: var(--radius-md, 8px);
	padding: 1.5rem;
	border: 1px solid var(--gray-200);
}

.contact-detail-item[b-z5vny7yh8k] {
	display: flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

.detail-label[b-z5vny7yh8k] {
	font-weight: 600;
	color: var(--text-muted);
	margin-right: 0.5rem;
}

.detail-value[b-z5vny7yh8k] {
	color: var(--text-primary, #2c3e50);
}

notes-section[b-z5vny7yh8k] {
	background: var(--bg-card);
	border-radius: var(--radius-md, 8px);
	padding: 1.5rem;
	border: 1px solid var(--gray-200);
}

.notes-content[b-z5vny7yh8k] {
	background: var(--bg-hover);
	border-radius: var(--radius-sm, 4px);
	padding: 1rem;
	color: var(--text-secondary);
	white-space: pre-line;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.donor-details-header[b-z5vny7yh8k] {
		padding: 1rem;
	}

	.donor-picture-container[b-z5vny7yh8k] {
		min-width: 60px;
	}

	.donor-picture[b-z5vny7yh8k],
	.donor-avatar-large[b-z5vny7yh8k] {
		width: 60px;
		height: 60px;
	}

	.donor-actions[b-z5vny7yh8k] {
		flex-direction: column;
		gap: 0.5rem !important;
	}
}

/* Pledge and Contribution Dropdown Button Styles */
.pledges-section .section-header[b-z5vny7yh8k] {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pledge-contribution-dropdown[b-z5vny7yh8k] {
	position: relative;
	display: inline-block;
}

.pledge-contribution-dropdown .dropdown-toggle[b-z5vny7yh8k] {
	width: var(--font-size-3xl);
	/* 32px from variables.css */
	height: var(--font-size-3xl);
	padding: 0;
	font-size: var(--font-size-xs);
	line-height: 1;
	border-radius: 50% !important;
	/* keep circular */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pledge-contribution-dropdown .dropdown-toggle i.fa-xs[b-z5vny7yh8k] {
	font-size: var(--font-size-xs) !important;
	margin: 0;
}

.pledge-contribution-dropdown .dropdown-toggle[b-z5vny7yh8k]::after {
	display: none;
	/* Remove default dropdown arrow */
}

.pledge-contribution-dropdown .dropdown-menu[b-z5vny7yh8k] {
	border: 1px solid var(--border-color);
	border-radius: 0.375rem;
	box-shadow: var(--card-shadow);
	/* use design-system shadow */
	min-width: 140px;
	width: max-content;
	/* place the menu just below the toggle without overlapping */
	margin-top: 0 !important;
	/* use top with a small spacing token so the menu appears just below the button */
	top: calc(100% + var(--spacing-xs)) !important;
	transform: none;
	pointer-events: auto;
	/* ensure the menu receives hover events immediately */
	padding: var(--spacing-sm) 0;
	left: auto !important;
	/* Override default left alignment */
}

/* Force dropdown flush to the right so it doesn't get clipped by the sidebar */
.pledge-contribution-dropdown .dropdown-menu.dropdown-menu-end[b-z5vny7yh8k] {
	position: absolute !important;
	right: 0 !important;
	left: auto !important;
	transform: none !important;
	/* avoid Bootstrap auto-flip translations */
	min-width: 10rem;
	/* sensible width */
}

.pledge-contribution-dropdown .dropdown-menu.show[b-z5vny7yh8k] {
	display: block;
}

.pledge-contribution-dropdown .dropdown-item[b-z5vny7yh8k] {
	display: block;
	padding: 0.5rem 0.75rem;
	/* keep existing padding but consider mapping to spacing tokens if desired */
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	white-space: nowrap;
	text-decoration: none;
}

.pledge-contribution-dropdown .dropdown-item:hover[b-z5vny7yh8k],
.pledge-contribution-dropdown .dropdown-item:focus[b-z5vny7yh8k] {
	background-color: var(--bg-muted, var(--bg-secondary));
	color: var(--primary-color);
	text-decoration: none;
}

/* Make the add (+) button use primary color at 50% when donor is inactive/disabled */
.pledge-contribution-dropdown .dropdown-toggle:disabled[b-z5vny7yh8k],
.pledge-contribution-dropdown .dropdown-toggle[disabled][b-z5vny7yh8k] {
	background-color: rgba(var(--primary-rgb), 0.5) !important;
	/* 50% alpha of primary */
	border-color: rgba(var(--primary-rgb), -0.55) !important;
	color: var(--text-light) !important;
	/* keep the icon readable */
	box-shadow: none !important;
	opacity: 1 !important;
	/* keep full opacity but visibly muted by background alpha */
	cursor: not-allowed;
}

.pledge-contribution-dropdown .dropdown-toggle:disabled i[b-z5vny7yh8k],
.pledge-contribution-dropdown .dropdown-toggle[disabled] i[b-z5vny7yh8k] {
	color: var(--text-light) !important;
}

/* Hover dropdown styles */
.dropdown-hover:hover .dropdown-menu[b-z5vny7yh8k] {
	display: block;
}

.dropdown-hover .dropdown-menu[b-z5vny7yh8k] {
	margin-top: var(--spacing-xxs);
}
/* /Pages/EditTemplate.razor.rz.scp.css */
.create-email-container[b-3jp5mnp1w7] {
	padding: var(--spacing-md);
	max-width: 1600px;
	margin: 0 auto;
}

.page-header[b-3jp5mnp1w7] {
	background: var(--gradient-card);
	margin-bottom: 1em;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.header-content[b-3jp5mnp1w7] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
}

.page-title[b-3jp5mnp1w7] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
}

.page-subtitle[b-3jp5mnp1w7] {
	margin: 0 0 0 28px;
	font-size: var(--font-size-sm);
	color: var(--text-light);
	opacity: 0.95;
}

.page-header .btn-outline-secondary[b-3jp5mnp1w7] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-3jp5mnp1w7] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

.email-form-card[b-3jp5mnp1w7] {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: var(--spacing-3);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-light);
}

.form-section[b-3jp5mnp1w7] {
	margin-bottom: var(--spacing-3);
}

.email-content-container[b-3jp5mnp1w7] {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	padding-left: calc(var(--spacing-md) + 5px);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-light);
	border-left: 4px solid var(--info-color);
	margin: 0 var(--spacing-1) var(--spacing-md) var(--spacing-1);
	padding-inline: var(--spacing-lg);
}

.form-label[b-3jp5mnp1w7] {
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-1);
	font-size: var(--font-size-sm);
}

.form-label i[b-3jp5mnp1w7] {
	color: var(--primary-color);
}

.form-label .text-danger[b-3jp5mnp1w7] {
	margin-left: var(--spacing-xs);
}

.rich-text-toolbar[b-3jp5mnp1w7] {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-sm);
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.rich-text-editor[b-3jp5mnp1w7] {
	min-height: 200px;
	max-height: calc(100vh - 680px);
	overflow-y: auto;
	padding: var(--spacing-md);
	border: 1px solid var(--border-color);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	background-color: var(--white);
	color: var(--text-primary);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	outline: none;
}

.rich-text-editor:focus[b-3jp5mnp1w7] {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

.rich-text-editor[data-placeholder]:empty[b-3jp5mnp1w7]:before {
	content: attr(data-placeholder);
	color: var(--text-tertiary);
	font-style: italic;
}

.email-body[b-3jp5mnp1w7] {
	font-family: var(--font-family-primary);
}

.insert-fields-panel[b-3jp5mnp1w7] {
	position: sticky;
	top: var(--spacing-md);
	height: fit-content;
	max-height: calc(100vh - 200px);
}

.insert-fields-scroll[b-3jp5mnp1w7] {
	max-height: 340px;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	background: var(--white);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
	padding: var(--spacing-sm) var(--spacing-md);
}

.insert-fields-scroll[b-3jp5mnp1w7]::-webkit-scrollbar {
	width: 6px;
}

.insert-fields-scroll[b-3jp5mnp1w7]::-webkit-scrollbar-track {
	background: var(--gray-50);
	border-radius: var(--radius-lg);
}

.insert-fields-scroll[b-3jp5mnp1w7]::-webkit-scrollbar-thumb {
	background: var(--gray-300);
	border-radius: var(--radius-lg);
	transition: var(--transition-fast);
}

.insert-fields-scroll[b-3jp5mnp1w7]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

.field-group[b-3jp5mnp1w7] {
	margin-bottom: var(--spacing-lg);
}

.field-group:last-child[b-3jp5mnp1w7] {
	margin-bottom: var(--spacing-sm);
}

.field-group-header[b-3jp5mnp1w7] {
	padding: var(--spacing-4) var(--spacing-md);
	background: linear-gradient(
		135deg,
		var(--primary-color) 0%,
		var(--primary-color-dark) 100%
	);
	color: var(--white);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.field-item[b-3jp5mnp1w7] {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-4) var(--spacing-lg);
	background: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.18s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	min-height: 44px;
	margin-bottom: var(--spacing-3);
}

.field-item:last-child[b-3jp5mnp1w7] {
	margin-bottom: 0;
}

.field-item:hover[b-3jp5mnp1w7] {
	background: linear-gradient(135deg, var(--bg-hover) 0%, var(--white) 100%);
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.15);
	transform: translateY(-1px);
}

.field-item:active[b-3jp5mnp1w7] {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(var(--primary-rgb), 0.2);
}

.field-item i[b-3jp5mnp1w7] {
	color: var(--primary-color);
	font-size: var(--font-size-lg);
	min-width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease;
}

.field-item:hover i[b-3jp5mnp1w7] {
	transform: scale(1.12);
	color: var(--primary-color-dark);
}

.field-name[b-3jp5mnp1w7] {
	color: var(--text-primary);
	font-weight: var(--font-weight-medium);
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-base);
	letter-spacing: 0.3px;
	flex: 1;
}

.insert-fields-panel .form-label[b-3jp5mnp1w7] {
	margin-bottom: var(--spacing-3);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	display: flex;
	gap: var(--spacing-2);
}

.form-actions[b-3jp5mnp1w7] {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md) var(--spacing-lg);
	border-top: 1px solid var(--border-light);
	margin-top: var(--spacing-sm);
}

.form-actions .btn[b-3jp5mnp1w7] {
	min-width: 120px;
	padding: var(--spacing-sm) var(--spacing-lg);
}

.form-actions .btn:disabled[b-3jp5mnp1w7] {
	opacity: 0.6;
	cursor: not-allowed;
}

.alert[b-3jp5mnp1w7] {
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	font-size: var(--font-size-sm);
	border-width: 1px;
	border-style: solid;
}

.alert-success[b-3jp5mnp1w7] {
	background-color: var(--success-bg);
	border-color: var(--success-border);
	color: var(--success-color);
}

.alert-danger[b-3jp5mnp1w7] {
	background-color: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-color);
}

.alert-info[b-3jp5mnp1w7] {
	background-color: var(--info-bg);
	border-color: var(--info-border);
	color: var(--info-color);
}

.alert i[b-3jp5mnp1w7] {
	font-size: var(--font-size-base);
}

.btn-close[b-3jp5mnp1w7] {
	margin-left: auto;
}

.spinner-border[b-3jp5mnp1w7] {
	width: var(--spacing-md);
	height: var(--spacing-md);
}

.mt-3[b-3jp5mnp1w7] {
	margin-top: var(--spacing-3) !important;
}

.text-muted[b-3jp5mnp1w7] {
	color: var(--text-muted) !important;
}

.small[b-3jp5mnp1w7] {
	font-size: var(--font-size-xs);
}

@media (max-width: 768px) {
	.create-email-container[b-3jp5mnp1w7] {
		padding: var(--spacing-2);
	}

	.page-header[b-3jp5mnp1w7] {
		padding: var(--spacing-3) var(--spacing-4);
	}

	.page-title[b-3jp5mnp1w7] {
		font-size: var(--font-size-xl);
	}

	.email-form-card[b-3jp5mnp1w7] {
		padding: var(--spacing-2);
	}

	.email-content-container[b-3jp5mnp1w7] {
		padding-inline: var(--spacing-md);
		border-left-width: 3px;
		margin: 0 3px var(--spacing-md) 3px;
	}

	.form-actions[b-3jp5mnp1w7] {
		flex-direction: column-reverse;
	}

	.form-actions .btn[b-3jp5mnp1w7] {
		width: 100%;
	}

	.insert-fields-panel[b-3jp5mnp1w7] {
		position: static;
		margin-top: var(--spacing-4);
	}

	.insert-fields-scroll[b-3jp5mnp1w7] {
		max-height: 400px;
		padding-inline-start: calc(var(--spacing-sm) + 8px);
		padding-inline-end: calc(var(--spacing-sm) + 8px);
	}
}

@media (max-width: 576px) {
	.rich-text-toolbar[b-3jp5mnp1w7] {
		flex-wrap: wrap;
		gap: var(--spacing-1);
	}

	.page-subtitle[b-3jp5mnp1w7] {
		font-size: var(--font-size-xs);
	}

	.field-item[b-3jp5mnp1w7] {
		padding-inline: calc(var(--spacing-lg) + 2px);
		padding-inline-end: calc(var(--spacing-lg) + 2px);
	}
}

.modal.show.d-block .modal-dialog[b-3jp5mnp1w7] {
	max-width: 1100px;
	margin: 1.5rem auto;
}

.modal.show.d-block .modal-content[b-3jp5mnp1w7] {
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
}

.modal.show.d-block .modal-body[b-3jp5mnp1w7] {
	overflow-y: auto;
	max-height: calc(100vh - 240px);
}

.modal.show.d-block textarea.form-control[b-3jp5mnp1w7] {
	max-height: calc(100vh - 520px);
	overflow-y: auto;
}
/* /Pages/EmailDetails.razor.rz.scp.css */
/* Email Details Container */
.email-details-container[b-666in2cz2l] {
	padding: var(--spacing-lg);
	width: 100%;
	margin: 0;
}

/* Page Header */
.page-header[b-666in2cz2l] {
	background: var(--gradient-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	margin-bottom: var(--spacing-xl);
	box-shadow: var(--shadow-md);
}

.header-title-wrapper[b-666in2cz2l] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.btn-back[b-666in2cz2l] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.2);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-all);
}

.btn-back:hover[b-666in2cz2l] {
	background-color: rgba(255, 255, 255, 0.3);
}

.page-title[b-666in2cz2l] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: white;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.page-title i[b-666in2cz2l] {
	font-size: var(--font-size-xl);
}

/* Info Cards Row */
.info-cards-row[b-666in2cz2l] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
}

.info-card[b-666in2cz2l] {
	background-color: white;
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	transition: var(--transition-all);
	border: 1px solid var(--border-color);
}

.info-card:hover[b-666in2cz2l] {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.info-icon[b-666in2cz2l] {
	width: 70px;
	height: 70px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: white;
	font-size: var(--font-size-2xl);
}

.info-icon-email[b-666in2cz2l] {
	background-color: var(--success-color);
}

.info-icon-activity[b-666in2cz2l] {
	background-color: var(--info-color);
}

.info-icon-datetime[b-666in2cz2l] {
	background-color: var(--warning-color);
}

.info-content[b-666in2cz2l] {
	flex: 1;
	min-width: 0;
}

.info-label[b-666in2cz2l] {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin-bottom: var(--spacing-xs);
	font-weight: var(--font-weight-medium);
}

.info-value[b-666in2cz2l] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	word-break: break-word;
}

/* Two Column Layout */
.two-column-layout[b-666in2cz2l] {
	display: grid;
	grid-template-columns: 59% 40%;
	gap: var(--spacing-md);
	align-items: start;
}

.left-column[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.right-column[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

/* Content Sections */
.content-sections[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
}

.detail-section[b-666in2cz2l] {
	background-color: white;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	border: 1px solid var(--border-color);
}

.section-header[b-666in2cz2l] {
	background-color: var(--bg-secondary);
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.section-header i[b-666in2cz2l] {
	color: var(--text-secondary);
	font-size: var(--font-size-lg);
}

.section-header span[b-666in2cz2l] {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	letter-spacing: 0.3px;
}

.section-content[b-666in2cz2l] {
	padding: var(--spacing-md);
	background-color: white;
}

/* Recipients List */
.recipients-list[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.recipient-item[b-666in2cz2l] {
	padding: var(--spacing-sm) 0;
	border-bottom: 1px solid var(--border-color);
}

.recipient-item:last-child[b-666in2cz2l] {
	border-bottom: none;
}

.recipient-info[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.recipient-name[b-666in2cz2l] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-md);
}

.recipient-email[b-666in2cz2l] {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

/* Subject Section */
.subject-text[b-666in2cz2l] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	line-height: 1.6;
	margin: 0;
}

/* Body Section */
.body-content[b-666in2cz2l] {
	font-size: var(--font-size-md);
	color: var(--text-primary);
	line-height: 1.8;
}

/* Attachments List */
.attachments-list[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.attachment-item[b-666in2cz2l] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background-color: white;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: var(--transition-all);
	cursor: pointer;
}

.attachment-item:hover[b-666in2cz2l] {
	background-color: var(--bg-hover);
	border-color: var(--primary-color);
	box-shadow: var(--shadow-sm);
}

.attachment-icon[b-666in2cz2l] {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: white;
	border-radius: var(--radius-md);
	font-size: var(--font-size-lg);
	flex-shrink: 0;
}

.attachment-details[b-666in2cz2l] {
	flex: 1;
	min-width: 0;
}

.attachment-name[b-666in2cz2l] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	font-size: var(--font-size-md);
	margin-bottom: var(--spacing-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.attachment-size[b-666in2cz2l] {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.download-icon[b-666in2cz2l] {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: var(--font-size-lg);
	flex-shrink: 0;
	transition: var(--transition-all);
}

.attachment-item:hover .download-icon[b-666in2cz2l] {
	color: var(--primary-color);
	transform: scale(1.1);
}

/* Loading State */
.loading-container[b-666in2cz2l] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	gap: var(--spacing-md);
}

/* Responsive Design */
@media (max-width: 992px) {
	.two-column-layout[b-666in2cz2l] {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.email-details-container[b-666in2cz2l] {
		padding: var(--spacing-md);
	}

	.info-cards-row[b-666in2cz2l] {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.info-icon[b-666in2cz2l] {
		width: 60px;
		height: 60px;
		font-size: var(--font-size-xl);
	}

	.page-header[b-666in2cz2l] {
		padding: var(--spacing-md);
	}

	.page-title[b-666in2cz2l] {
		font-size: var(--font-size-xl);
	}

	.section-content[b-666in2cz2l] {
		padding: var(--spacing-md);
	}
}

@media (max-width: 480px) {
	.info-card[b-666in2cz2l] {
		flex-direction: column;
		text-align: center;
		padding: var(--spacing-lg);
	}

	.info-icon[b-666in2cz2l] {
		width: 56px;
		height: 56px;
		font-size: var(--font-size-lg);
	}
}
/* /Pages/ExternalCommunicationForm.razor.rz.scp.css */
/* ExternalCommunicationForm.razor.css */

/* Container */
.external-communication-container[b-qb4vqn1a57] {
	min-height: 100vh;
	background-color: var(--bg-primary);
	padding: var(--spacing-md) 0;
}

/* Page Header */
.page-header[b-qb4vqn1a57] {
	background: var(--gradient-card);
	margin-bottom: 1em;
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.header-content[b-qb4vqn1a57] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.page-title[b-qb4vqn1a57] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.page-title i[b-qb4vqn1a57] {
	color: var(--text-light);
	opacity: 0.9;
}

.page-subtitle[b-qb4vqn1a57] {
	font-size: var(--font-size-sm);
	color: var(--text-light);
	margin: 0;
	opacity: 0.95;
}

.page-header .btn-outline-secondary[b-qb4vqn1a57] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
}

.page-header .btn-outline-secondary:hover[b-qb4vqn1a57] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

/* Ensure page header button style takes precedence within container */
.external-communication-container .page-header .btn-outline-secondary[b-qb4vqn1a57] {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--text-light);
	background-color: transparent;
	padding: 0.375rem 0.75rem !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
}

.external-communication-container .page-header .btn-outline-secondary:hover[b-qb4vqn1a57] {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: var(--text-light);
	color: var(--text-light);
}

/* Card styles */
.external-communication-container .card[b-qb4vqn1a57] {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	border: none;
}

.external-communication-container .card-body[b-qb4vqn1a57] {
	padding: var(--spacing-xl);
}

/* Form elements */
.form-label[b-qb4vqn1a57] {
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
}

.form-control[b-qb4vqn1a57],
.form-select[b-qb4vqn1a57] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-sm);
	font-size: var(--font-size-sm);
	transition: var(--transition-fast);
}

.form-control:focus[b-qb4vqn1a57],
.form-select:focus[b-qb4vqn1a57] {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
	outline: none;
}

.form-control.is-invalid[b-qb4vqn1a57],
.form-select.is-invalid[b-qb4vqn1a57] {
	border-color: var(--danger-color);
}

/* Button styles */
.btn-primary[b-qb4vqn1a57] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--text-light);
	font-weight: var(--font-weight-medium);
	transition: var(--transition-all);
}

.btn-primary:hover[b-qb4vqn1a57] {
	background-color: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
	color: var(--text-light);
}

.btn-primary:disabled[b-qb4vqn1a57] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Modal styles */
.modal-header.unsaved-changes-header[b-qb4vqn1a57] {
	background-color: var(--primary-color);
	color: var(--text-light);
}

.modal-header.unsaved-changes-header .modal-title[b-qb4vqn1a57] {
	color: var(--text-light);
}

/* Syncfusion datetime input — concise grouped overrides using tokens */
[b-qb4vqn1a57] :is(.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error), .e-datetime-wrapper.e-control-wrapper) {
	/* increase slightly for this form only */
	--input-height: 40px;
	border-color: var(--border-color);
	height: var(--input-height) !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
}

[b-qb4vqn1a57] :is(.e-input-group .e-input, .e-input-group input, .e-datetime-wrapper input) {
	height: 100% !important;
	padding: 0 var(--spacing-xs) !important;
	box-sizing: border-box !important;
}

[b-qb4vqn1a57] :is(.e-input-group .e-input-group-icon, .e-input-group .e-input-group-btn) {
	height: var(--input-height) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border-left: 1px solid var(--border-color) !important;
}

[b-qb4vqn1a57] :is(.e-input-group .e-input-group-icon .e-icons, .e-input-group .e-input-group-btn .e-icons) {
	line-height: 1 !important;
	margin: 0 !important;
	font-size: var(--font-size-sm) !important;
	color: var(--text-secondary) !important;
}

[b-qb4vqn1a57] :is(.e-input-group.is-invalid, .e-input-group.e-control-wrapper.is-invalid, .e-date-wrapper.is-invalid, .e-datepicker.is-invalid, .e-input.is-invalid, .form-control.is-invalid, input[aria-invalid="true"]) {
	border-color: var(--danger-color) !important;
}
/* /Pages/Families.razor.rz.scp.css */
/* Donor List Styles */

/* Utility classes */
.cursor-pointer[b-urbsckreay] {
  cursor: pointer !important;
}

/* Main container with uniform height */
.families-container[b-urbsckreay] {
  min-height: calc(100vh - 300px);
  padding: var(--spacing-sm);
}

/* Panel Header Gradient - Specific to Donor List Family Panel */
[b-urbsckreay] .card .card-header,
.card .card-header[b-urbsckreay] {
  /* background: var(--bg-secondary) !important; */
  border-bottom: 1px solid var(--gray-200) !important;
}

.family-item[b-urbsckreay] {
  border-bottom: 1px solid var(--gray-200);
  cursor: pointer;
  transition: var(--transition-fast);
  padding: var(--spacing-sm);
}

.family-item:hover[b-urbsckreay] {
  background-color: var(--bg-hover);
}

.family-item.selected[b-urbsckreay] {
  color: var(--primary-color);
  font-weight: var(--font-weight-bold);
}

.family-item.selected .text-muted[b-urbsckreay] {
  color: var(--text-secondary) !important;
}

.family-item.selected .family-name[b-urbsckreay] {
  color: var(--primary-color);
}

/* Font sizing for family items */
.family-name[b-urbsckreay] {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-medium);
}

/* Style for family member info text */
.family-item .text-muted[b-urbsckreay] {
  font-size: var(--font-size-xs);
}

/* Family Header Styling */
.family-header-card[b-urbsckreay] {
  background: var(--bg-secondary);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.family-avatar-group[b-urbsckreay] {
  display: flex;
  align-items: center;
  position: relative;
}

.family-avatar-item[b-urbsckreay] {
  position: relative;
  margin-right: -var(--spacing-sm);
  z-index: 1;
}

.family-avatar-img[b-urbsckreay] {
  width: var(--avatar-xl);
  height: var(--avatar-xl);
  border-radius: var(--radius-full);
  border: 3px solid var(--bg-card);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  color: var(--text-light);
  background: var(--gradient-primary);
}

.avatar-placeholder[b-urbsckreay] {
  background: var(--gradient-card);
  color: var(--text-light);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.family-status-badge[b-urbsckreay] {
  background: var(--success-color);
  color: var(--text-light);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--spacing-lg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-left: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.avatar-star-badge[b-urbsckreay] {
  position: absolute;
  top: -var(--spacing-xs);
  right: -var(--spacing-xs);
  background: var(--warning-color);
  color: var(--text-light);
  border-radius: var(--radius-full);
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  border: 2px solid var(--bg-card);
}

.family-name[b-urbsckreay] {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.family-status-row[b-urbsckreay] {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.status-indicator[b-urbsckreay] {
  width: var(--spacing-sm);
  height: var(--spacing-sm);
  border-radius: var(--radius-full);
  display: inline-block;
}

.status-indicator.active[b-urbsckreay] {
  background-color: var(--success-color);
}

.status-indicator.inactive[b-urbsckreay] {
  background-color: var(--danger-color);
}

.donor-info[b-urbsckreay],
.lifetime-label[b-urbsckreay] {
  color: var(--text-secondary);
}

.donor-years[b-urbsckreay],
.lifetime-amount[b-urbsckreay] {
  color: var(--primary-color);
  font-weight: var(--font-weight-semibold);
}

.separator[b-urbsckreay] {
  color: var(--gray-400);
}

/* Donor Information Section */
.donor-info-section[b-urbsckreay] {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--spacing-xl);
}

.donor-item[b-urbsckreay] {
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  margin-right: var(--spacing-2xl);
}

.donor-item i[b-urbsckreay] {
  color: var(--primary-color);
  width: var(--spacing-md);
}

/* Card Styling */
.card[b-urbsckreay] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.card-header[b-urbsckreay] {
  /* background: var(--bg-secondary); */
  border-bottom: 1px solid var(--gray-200);
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  font-weight: var(--font-weight-semibold);
}

/* Table Styling */
.table[b-urbsckreay] {
  margin-bottom: 0;
}

.table-hover tbody tr:hover[b-urbsckreay] {
  background-color: var(--bg-hover);
}

.table thead th[b-urbsckreay] {
  border-bottom: 2px solid var(--gray-200);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.sortable[b-urbsckreay] {
  cursor: pointer;
  user-select: none;
}

.sortable:hover[b-urbsckreay] {
  background-color: var(--bg-hover);
}

/* Member Avatar in Table */
.member-avatar-placeholder[b-urbsckreay] {
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  border-radius: var(--radius-full);
  background: var(--gradient-card);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* Button Styling */
.btn-sm[b-urbsckreay] {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.btn-outline-warning.active[b-urbsckreay],
.btn-warning[b-urbsckreay] {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  color: var(--text-light);
}

/* Empty State Styling */
.text-center i.fa-3x[b-urbsckreay] {
  opacity: 0.3;
}

.text-center p[b-urbsckreay] {
  font-size: var(--font-size-lg);
  margin-bottom: 0;
}

/* Avatar Group Styling for List */
.avatar-group[b-urbsckreay] {
  display: flex;
  align-items: center;
  gap: -var(--spacing-xs);
}

.avatar-sm[b-urbsckreay] {
  font-size: var(--font-size-lg);
  margin-right: -var(--spacing-xs);
  border: 2px solid var(--bg-card);
  border-radius: var(--radius-full);
  background: var(--gradient-card);
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.avatar-sm.starred[b-urbsckreay] {
  border-color: var(--warning-color);
  box-shadow: 0 0 0 2px var(--warning-color);
}

/* Pagination Styling */
.pagination-info[b-urbsckreay] {
  background-color: var(--bg-hover);
  border-top: 1px solid var(--gray-200);
  font-size: var(--font-size-sm);
}

.family-name[b-urbsckreay] {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
}

.family-actions[b-urbsckreay] {
  opacity: 0;
  transition: var(--transition-fast);
}

.family-item:hover .family-actions[b-urbsckreay] {
  opacity: 1;
}

/* Animation for loading states */
.spinner-border-sm[b-urbsckreay] {
  width: 1rem;
  height: 1rem;
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-md)) {
  .family-list[b-urbsckreay] {
    max-height: 50vh;
  }

  .avatar-group .avatar-sm[b-urbsckreay] {
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-base);
  }

  .family-header-card[b-urbsckreay] {
    padding: var(--spacing-md);
  }

  .donor-item[b-urbsckreay] {
    margin-right: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
  }

  .family-avatar-img[b-urbsckreay] {
    width: 48px;
    height: 48px;
  }

  .family-name[b-urbsckreay] {
    font-size: var(--font-size-xl);
  }
}

/* Utility Classes for Inline Style Removal */
.header-title[b-urbsckreay] {
  font-size: var(--font-size-lg);
}

.search-input[b-urbsckreay] {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.search-button[b-urbsckreay] {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.search-icon[b-urbsckreay] {
  font-size: var(--font-size-sm);
}

.create-button[b-urbsckreay] {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  white-space: nowrap;
}

.create-icon[b-urbsckreay] {
  font-size: var(--font-size-xs);
}

.filter-checkbox[b-urbsckreay] {
  margin-left: var(--spacing-xs);
}

.filter-checkbox input[b-urbsckreay] {
  transform: scale(0.9);
}

.filter-label[b-urbsckreay] {
  font-size: var(--font-size-sm);
  margin-left: var(--spacing-xs);
}

.loading-center[b-urbsckreay] {
  padding: var(--spacing-md);
}

.loading-text[b-urbsckreay] {
  font-size: var(--font-size-sm);
}

.error-alert[b-urbsckreay] {
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
}

.retry-button[b-urbsckreay] {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.retry-icon[b-urbsckreay] {
  font-size: var(--font-size-xs);
}

.family-item-border[b-urbsckreay] {
  border-bottom: 1px solid var(--gray-100);
}

.family-item-padding[b-urbsckreay] {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.avatar-xs[b-urbsckreay] {
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  font-size: var(--font-size-xs);
  line-height: var(--spacing-2xl);
  background: var(--gradient-card);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
}

.family-avatar[b-urbsckreay] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-grow-min[b-urbsckreay] {
  min-width: 0;
}

/* Inline style replacements */
.btn-xs[b-urbsckreay] {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
}

.icon-xs[b-urbsckreay] {
  font-size: var(--font-size-xs);
}

.icon-lg[b-urbsckreay] {
  font-size: var(--font-size-xl);
}

.text-xs[b-urbsckreay] {
  font-size: var(--font-size-sm);
}

.empty-state-container[b-urbsckreay] {
  padding: var(--spacing-md);
}

.card-footer-compact[b-urbsckreay] {
  padding: var(--spacing-xs) var(--spacing-sm);
}

.col-width-50[b-urbsckreay] {
  width: var(--spacing-3xl);
}

/* Contributions Section Scrolling */
.contributions-scrollable[b-urbsckreay] {
  max-height: calc(100vh - 400px);
  overflow-y: auto;
}

.contributions-scrollable[b-urbsckreay]::-webkit-scrollbar {
  width: var(--spacing-xs);
}

.contributions-scrollable[b-urbsckreay]::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.contributions-scrollable[b-urbsckreay]::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: var(--radius-sm);
}

.contributions-scrollable[b-urbsckreay]::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* Full screen background image */
.login-background[b-7a2lqq8jk3] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    height: 100%;
    z-index: 1;
}

.login-background-image[b-7a2lqq8jk3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login-content[b-7a2lqq8jk3] {
    position: fixed;
    top: 50%;
    left: 220px;
    transform: translateY(-50%);
    width: 100%;
    max-width: 450px;
    z-index: 10;
    padding: var(--spacing-2xl);
}

.brand-logo[b-7a2lqq8jk3] {
    margin-bottom: var(--spacing-3xl);
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-logo .logo[b-7a2lqq8jk3] {
    height: var(--spacing-3xl);
    width: auto;
}

.login-header[b-7a2lqq8jk3] {
    margin-bottom: var(--spacing-2xl);
}

.login-header h2[b-7a2lqq8jk3] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-align: left;
}

.subtitle[b-7a2lqq8jk3] {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: 0;
    line-height: var(--line-height-normal);
}

/* Form styling */
.login-form[b-7a2lqq8jk3] {
    width: 100%;
}

.form-group[b-7a2lqq8jk3] {
    margin-bottom: var(--spacing-lg);
}

.form-group label[b-7a2lqq8jk3] {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.required[b-7a2lqq8jk3] {
    color: var(--danger-color);
}

.form-control[b-7a2lqq8jk3] {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-2xl);
    background: var(--white);
    transition: var(--transition-normal);
    box-sizing: border-box;
}

.form-control:focus[b-7a2lqq8jk3] {
    outline: none;
    border-color: var(--input-border-color-focus);
    box-shadow: var(--shadow-focus);
}

.form-control[b-7a2lqq8jk3]::placeholder {
    color: var(--text-muted);
}

/* Login/Submit button */
.btn-login[b-7a2lqq8jk3] {
    width: 100%;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-xl);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.btn-login:hover:not(:disabled)[b-7a2lqq8jk3] {
    background: var(--primary-color-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-login:disabled[b-7a2lqq8jk3] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alert messages */
.alert[b-7a2lqq8jk3] {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
}

.alert-success[b-7a2lqq8jk3] {
    background-color: var(--success-color-light);
    color: var(--success-color-dark);
    border: 1px solid var(--success-color);
}

.alert-danger[b-7a2lqq8jk3] {
    background-color: var(--danger-color-light);
    color: var(--danger-color-dark);
    border: 1px solid var(--danger-color);
}

/* Links */
.text-primary[b-7a2lqq8jk3] {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-normal);
}

.text-primary:hover[b-7a2lqq8jk3] {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

/* Responsive design */
@media (max-width: 768px) {
    .login-content[b-7a2lqq8jk3] {
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90%;
        padding: var(--spacing-lg);
    }

    .login-header h2[b-7a2lqq8jk3] {
        font-size: var(--font-size-xl);
    }

    .subtitle[b-7a2lqq8jk3] {
        font-size: var(--font-size-md);
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Component-scoped styles for Home.razor */
.chart-card[b-w751hsk6s1] {
	display: flex;
	flex-direction: column;
}

/* Force neutral grey border for all quick action buttons to match design */
.quick-action-btn[b-w751hsk6s1] {
	border: 1px solid var(--border-color);
}

.chart-card .chart-footer[b-w751hsk6s1] {
	padding: 6px 8px;
	margin-top: 4px;
	border-top: 1px solid var(--border-light);
}

.chart-card .chart-footer small[b-w751hsk6s1] {
	color: var(--text-muted, #6c757d);
}

.chart-header-extra[b-w751hsk6s1] {
    z-index: 5;
    pointer-events: none;
}



.chart-header-extra .fy-inline[b-w751hsk6s1] {
    display: inline-block;
    background: rgba(255,255,255,0.95);
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06));
    color: var(--text-muted, #6c757d);
    font-weight: 500;
	border-bottom: 1px solid var(--border-light);
}

.overdue-pledges-list[b-w751hsk6s1] {
	/* component-scoped variables for icon sizes */
	--pledge-icon-size: calc(var(--btn-height-sm) + 0.5rem);
	--pledge-status-size: calc(var(--avatar-sm) + 0.375rem);

	padding: 0.75rem 1rem;
	/* Limit the height so the card doesn't grow too tall */
	max-height: 320px;
	/* adjust as needed */
	overflow-y: auto;
	margin-left: 10px;
	margin-top: 15px;
}

.overdue-pledges-list[b-w751hsk6s1]::-webkit-scrollbar {
	width: 10px;
}

.pledge-item+.pledge-item[b-w751hsk6s1] {
	border-top: 1px solid var(--bg-hover, #e9ecef);
}

.pledge-status-icon[b-w751hsk6s1] {
	width: var(--pledge-status-size);
	height: var(--pledge-status-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pledge-content[b-w751hsk6s1] {
	flex: 1 1 auto;
}

.pledge-header[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.pledge-meta[b-w751hsk6s1] {
	display: flex;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--text-muted, #6c757d);
}

.pledge-actions-compact[b-w751hsk6s1] {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.btn-icon[b-w751hsk6s1] {
	color: var(--text-primary, #212529);
}

/* Envelope icon sizing uses design tokens from variables.css */
.envelope-icon[b-w751hsk6s1] {
	font-size: var(--font-size-xl);
	line-height: 1;
	padding-right: var(--spacing-xl);
}

@media (max-width: 768px) {
	.overdue-pledges-list[b-w751hsk6s1] {
		max-height: 260px;
	}
}

.home-container[b-w751hsk6s1] {
	padding: var(--spacing-sm);
	padding-bottom: var(--spacing-xl);
	min-height: calc(100vh - 180px);
}

/* User Profile and Tenant Info Row */
.home-container .row.mb-3 .d-flex.align-items-center.justify-content-between[b-w751hsk6s1] {
	min-height: var(--spacing-md);
	align-items: center !important;
}

/* User Avatar Section */
.user-avatar[b-w751hsk6s1] {
	width: var(--avatar-sm);
	height: var(--avatar-sm);
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.avatar-initials[b-w751hsk6s1] {
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

/* Prospect Notification Badge Styles */
.prospect-notification-badge[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	transition: var(--transition-all);
	border: 1px solid var(--border-light);
}

.prospect-notification-badge:hover[b-w751hsk6s1] {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
	border-color: var(--primary-color);
}

.notification-icon-wrapper[b-w751hsk6s1] {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notification-icon[b-w751hsk6s1] {
	font-size: 1.5rem;
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.notification-count-badge[b-w751hsk6s1] {
	position: absolute;
	top: -12px;
	right: -12px;
	background: var(--danger-color);
	color: var(--text-light);
	font-size: 0.7rem;
	font-weight: var(--font-weight-bold);
	min-width: 22px;
	height: 22px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	border: 2px solid var(--bg-card);
}

.notification-text[b-w751hsk6s1] {
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	font-weight: var(--font-weight-normal);
}

@media (max-width: var(--breakpoint-md)) {
	.prospect-notification-badge[b-w751hsk6s1] {
		padding: var(--spacing-xs) var(--spacing-sm);
	}

	.notification-icon[b-w751hsk6s1] {
		font-size: 1.25rem;
	}

	.notification-count-badge[b-w751hsk6s1] {
		min-width: 18px;
		height: 18px;
		font-size: 0.7rem;
	}

	.notification-text[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.notification-text[b-w751hsk6s1] {
		display: none;
	}

	.prospect-notification-badge[b-w751hsk6s1] {
		padding: var(--spacing-xs);
	}
}

@media (max-width: var(--breakpoint-md)) {
	.home-container[b-w751hsk6s1] {
		padding: var(--spacing-sm);
		padding-bottom: var(--spacing-lg);
	}

	.home-container .row.mb-3 .d-flex.align-items-center.justify-content-between[b-w751hsk6s1] {
		min-height: auto;
	}

	.user-avatar[b-w751hsk6s1] {
		width: var(--avatar-md);
		height: var(--avatar-md);
	}

	.avatar-initials[b-w751hsk6s1] {
		font-size: var(--font-size-md);
	}
}

@media (max-width: var(--breakpoint-xs)) {
	.home-container[b-w751hsk6s1] {
		padding: var(--spacing-xs);
		padding-bottom: var(--spacing-md);
	}
}

/* Custom 5-column grid for metrics */
.col-md-2-4[b-w751hsk6s1] {
	flex: 0 0 auto;
	width: 20%;
}

@media (max-width: var(--breakpoint-md)) {
	.col-md-2-4[b-w751hsk6s1] {
		width: 100%;
		margin-bottom: var(--spacing-md);
	}

	.metric-card[b-w751hsk6s1] {
		padding: var(--spacing-md);
		height: auto;
		min-height: calc(var(--spacing-4xl) * 1.5);
		flex-direction: row;
		margin-bottom: var(--spacing-lg);
	}

	.metric-card .metric-icon[b-w751hsk6s1] {
		width: var(--avatar-md) !important;
		height: var(--avatar-md) !important;
		margin-right: var(--spacing-sm) !important;
		font-size: var(--font-size-xs);
		margin-bottom: var(--spacing-xs);
	}

	.metric-content h3[b-w751hsk6s1] {
		font-size: var(--font-size-xl);
		margin-bottom: var(--spacing-xs);
	}

	.growth-badge[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
		padding: var(--spacing-xxs) var(--spacing-xs);
		margin-top: var(--spacing-xs);
	}
}

@media (max-width: var(--breakpoint-xs)) {
	.metric-card[b-w751hsk6s1] {
		padding: var(--spacing-sm);
		min-height: var(--spacing-4xl);
	}

	.metric-card .metric-icon[b-w751hsk6s1] {
		width: var(--avatar-sm) !important;
		height: var(--avatar-sm) !important;
	}

	.metric-content h5[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}

	.metric-content h3[b-w751hsk6s1] {
		font-size: var(--font-size-lg);
	}

	.growth-badge[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
		padding: var(--spacing-xxs) var(--spacing-xs);
	}

	.growth-badge i[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}
}

/* Responsive Design for Charts and Activities */
@media (max-width: var(--breakpoint-md)) {
	.chart-card[b-w751hsk6s1] {
		/* use variable-derived sizing for responsiveness */
		height: calc(var(--spacing-4xl) * 1.5);
		padding: var(--spacing-sm);
		margin-bottom: var(--spacing-md);
	}

	.funds-raised-chart-card[b-w751hsk6s1] {
		padding: var(--spacing-sm);
		margin-bottom: var(--spacing-md);
	}

	.sidebar-activities[b-w751hsk6s1] {
		padding: var(--spacing-sm);
		min-height: calc(var(--spacing-4xl) * 1.5);
	}

	.chart-header h5[b-w751hsk6s1] {
		font-size: var(--font-size-sm);
	}

	.user-avatar[b-w751hsk6s1] {
		width: var(--avatar-md);
		height: var(--avatar-md);
	}

	.avatar-initials[b-w751hsk6s1] {
		font-size: var(--font-size-base);
	}
}

@media (max-width: var(--breakpoint-xs)) {
	.chart-card[b-w751hsk6s1] {
		/* slightly smaller stack on extra-small screens */
		height: calc(var(--spacing-4xl) * 1.3);
		padding: var(--spacing-xs);
	}

	.funds-raised-chart-card[b-w751hsk6s1] {
		padding: var(--spacing-xs);
	}

	.sidebar-activities[b-w751hsk6s1] {
		padding: var(--spacing-xs);
		min-height: var(--spacing-4xl);
	}

	.chart-header h5[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}

	.calendar-day[b-w751hsk6s1] {
		padding: var(--spacing-xs);
		font-size: var(--font-size-xs);
	}

	.activity-item[b-w751hsk6s1] {
		padding: var(--spacing-xs);
		font-size: var(--font-size-xs);
	}

	.activity-item i[b-w751hsk6s1] {
		width: var(--spacing-lg);
		height: var(--spacing-lg);
	}
}

.user-profile-card[b-w751hsk6s1] {
	background: var(--bg-card);
	padding: var(--spacing-lg);
	border-radius: var(--card-border-radius);
	box-shadow: var(--card-shadow);
	height: 100%;
}

.user-avatar[b-w751hsk6s1] {
	width: var(--avatar-md);
	height: var(--avatar-md);
	background: var(--primary-color);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
}

.avatar-initials[b-w751hsk6s1] {
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

.funds-raised-chart-card[b-w751hsk6s1] {
	background: var(--bg-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.chart-container[b-w751hsk6s1] {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--spacing-sm) auto 0;
	height: var(--spacing-4xl);
	width: 100%;
}

.chart-container canvas[b-w751hsk6s1] {
	max-width: var(--spacing-4xl) !important;
	max-height: var(--spacing-4xl) !important;
}

.metric-card[b-w751hsk6s1] {
	background: var(--bg-card);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	/* height: var(--spacing-4xl); */
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing-md);
	transition: var(--transition-all);
}

.metric-card:hover[b-w751hsk6s1] {
	transform: translateY(calc(-1 * var(--spacing-xxs)));
	box-shadow: var(--shadow-hover);
}

.metric-card.purple .metric-icon[b-w751hsk6s1] {
	background: var(--metric-purple);
	color: var(--text-light);
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
}

.metric-card.orange .metric-icon[b-w751hsk6s1] {
	background: var(--metric-orange);
	color: var(--text-light);
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
}

.metric-card.green .metric-icon[b-w751hsk6s1] {
	background: var(--metric-green);
	color: var(--text-light);
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
}

.metric-card.blue .metric-icon[b-w751hsk6s1] {
	background: var(--metric-blue);
	color: var(--text-light);
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
}

.metric-card.red .metric-icon[b-w751hsk6s1] {
	background: var(--metric-red);
	color: var(--text-light);
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: var(--spacing-md);
}

.metric-content h5[b-w751hsk6s1] {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
}

.metric-header[b-w751hsk6s1] {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: var(--spacing-sm);
}

.metric-content h3[b-w751hsk6s1] {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--spacing-sm) 0;
	color: var(--text-primary);
	line-height: var(--line-height-tight);
}

.growth-badge[b-w751hsk6s1] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	margin-top: var(--spacing-xs);
}

.growth-badge.positive[b-w751hsk6s1] {
	background-color: var(--growth-positive-bg);
	color: var(--growth-positive-text);
}

.growth-badge.negative[b-w751hsk6s1] {
	background-color: var(--growth-negative-bg);
	color: var(--growth-negative-text);
}

.growth-badge.neutral[b-w751hsk6s1] {
	background-color: var(--growth-neutral-bg);
	color: var(--growth-neutral-text);
}

.growth-badge i[b-w751hsk6s1] {
	font-size: var(--font-size-xs);
}

.metric-description[b-w751hsk6s1] {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
}

.metric-content small[b-w751hsk6s1] {
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-normal);
}

.chart-card[b-w751hsk6s1] {
	background: var(--bg-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	height: 420px;
}

.chart-card canvas[b-w751hsk6s1] {
	max-height: 360px !important;
	max-width: 100% !important;
}

.funds-raised-chart[b-w751hsk6s1] {
	text-align: center;
}

.funds-raised-chart canvas[b-w751hsk6s1] {
	max-height: 360px !important;
	max-width: calc(var(--spacing-2xl) * 2.5) !important;
}

.chart-header[b-w751hsk6s1] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xs);
	margin-left: 10px;
}

/* Keep h5/h6 chart headers visually consistent across cards */
.chart-header h5[b-w751hsk6s1],
.chart-header h6[b-w751hsk6s1] {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

/* Ensure all main chart headings use the same size across the dashboard */
.chart-header h5[b-w751hsk6s1],
.chart-header h6[b-w751hsk6s1],
.chart-inline-title[b-w751hsk6s1] {
	font-size: var(--font-size-lg); /* unified heading size from variables.css */
	line-height: 1.2;
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
}

.chart-legend-inline[b-w751hsk6s1] { display:flex; align-items:center; gap:12px; margin-left:auto; }
.inline-legend-dot[b-w751hsk6s1] { width:16px; height:16px; border-radius:50%; display:inline-block; flex:0 0 auto; border:2px solid rgba(0,0,0,0.12); }
.inline-legend-label[b-w751hsk6s1] { pointer-events:none; font-size:13px; color:var(--text-secondary,#6c757d); margin-left:6px; }

/* Moved inline styles for Weekly Contributions header */
.weekly-chart-header[b-w751hsk6s1] {
	align-items: flex-start; /* was inline on this element */
	gap: 8px; /* was inline on this element */
}

.weekly-chart-header > div:first-child[b-w751hsk6s1] {
	display: flex; /* was inline on the child */
	flex-direction: column; /* was inline on the child */
	gap: 2px; /* was inline on the child */
	align-items: flex-start; /* was inline on the child */
}

#weeklyContributionsSubtitle[b-w751hsk6s1] {
	margin: 0; /* was inline */
	color: var(--text-secondary,#6c757d); /* was inline */
	font-size: 12px; /* was inline */
	display: block; /* was inline */
	text-align: left; /* was inline */
}

#weeklyChartLegend[b-w751hsk6s1] {
	margin-left: 0; /* was inline */
	display: flex; /* was inline */
	align-items: center; /* was inline */
	gap: 8px; /* was inline */
	flex-shrink: 0; /* was inline */
}

/* Inline legend below weekly contributions chart */
.weekly-inline-legend[b-w751hsk6s1] {
	display: flex;
	justify-content: center;
	padding-top: 8px;
}
.weekly-inline-legend-items[b-w751hsk6s1] {
	display: flex;
	gap: 18px; /* gap between legend items to match screenshot */
	align-items: center;
}
.legend-item[b-w751hsk6s1] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-secondary, #6c757d);
	font-size: 13px;
}
.legend-dot[b-w751hsk6s1] {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
}

/* Using Chart.js built-in legend (small point-style indicators) */

.chart-controls select[b-w751hsk6s1] {
	width: auto;
}

.sidebar-activities[b-w751hsk6s1] {
	background: var(--bg-card);
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	height: auto;
	min-height: 320px;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	display: flex;
	flex-direction: column
}

.date-section[b-w751hsk6s1] {
	flex-shrink: 0;
}

.date-section h6[b-w751hsk6s1] {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-md);
}

.calendar-grid[b-w751hsk6s1] {
	display: flex;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

.calendar-day[b-w751hsk6s1] {
	text-align: center;
	padding: var(--spacing-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	cursor: pointer;
	transition: var(--transition-all);
	border: 1px solid transparent;
}

.calendar-day:hover[b-w751hsk6s1] {
	background: var(--bg-hover);
	color: var(--text-primary);
	border-color: var(--border-color);
}

.calendar-day.active[b-w751hsk6s1] {
	background: var(--secondary-color);
	color: var(--text-light);
	border-color: var(--secondary-color);
}

.calendar-day.active:hover[b-w751hsk6s1] {
	background: var(--primary-color-dark);
	border-color: var(--primary-color-dark);
}

.activities-section[b-w751hsk6s1] {
	flex: 1;
	overflow-y: auto;
	min-height: var(--spacing-4xl);
	max-height: calc(var(--spacing-4xl) * 2.5);
}

.activities-section h6[b-w751hsk6s1] {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-md);
}

.activity-item[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-sm);
}

.activity-item.orange[b-w751hsk6s1] {
	background: var(--activity-orange-bg);
}

.activity-item.red[b-w751hsk6s1] {
	background: var(--activity-red-bg);
}

.activity-item.purple[b-w751hsk6s1] {
	background: var(--activity-purple-bg);
}

.activity-item i[b-w751hsk6s1] {
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
}

.activity-item.orange i[b-w751hsk6s1] {
	background: var(--metric-orange);
}

.activity-item.red i[b-w751hsk6s1] {
	background: var(--metric-red);
}

.activity-item.purple i[b-w751hsk6s1] {
	background: var(--metric-purple);
}

.events-section[b-w751hsk6s1] {
	flex-shrink: 0;
	margin-top: var(--spacing-md);
}

.events-section h6[b-w751hsk6s1] {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	margin-top: var(--spacing-md);
}

/* =====================================================
   Skeleton Loading Styles
   ===================================================== */

.skeleton[b-w751hsk6s1] {
	animation: skeleton-loading-b-w751hsk6s1 1.5s infinite ease-in-out;
	background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
	background-size: 200% 100%;
	border-radius: var(--radius-sm);
}

@keyframes skeleton-loading-b-w751hsk6s1 {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.skeleton-circle[b-w751hsk6s1] {
	border-radius: var(--radius-full);
}

.skeleton-line[b-w751hsk6s1] {
	border-radius: var(--radius-sm);
}

/* Skeleton User Profile */
.skeleton-avatar[b-w751hsk6s1] {
	width: var(--avatar-xl);
	height: var(--avatar-xl);
}

.skeleton-user-name[b-w751hsk6s1] {
	width: 200px;
	height: var(--spacing-lg);
	margin-bottom: var(--spacing-sm);
}

/* Skeleton Metric Cards */
.skeleton-metric-card[b-w751hsk6s1] {
	background: var(--bg-card);
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	height: 140px;
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing-md);
}

.skeleton-metric-card .metric-content[b-w751hsk6s1] {
	flex: 1;
}

.skeleton-metric-icon[b-w751hsk6s1] {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
}

.skeleton-metric-title[b-w751hsk6s1] {
	width: 120px;
	height: var(--font-size-sm);
	margin-bottom: var(--spacing-sm);
}

.skeleton-metric-value[b-w751hsk6s1] {
	width: 80px;
	height: var(--spacing-3xl);
	margin-bottom: var(--spacing-sm);
}

.skeleton-metric-growth[b-w751hsk6s1] {
	width: 150px;
	height: var(--font-size-xs);
}

/* Skeleton Charts */
.skeleton-chart-title[b-w751hsk6s1] {
	width: 140px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-chart-title-wide[b-w751hsk6s1] {
	width: 280px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-chart-title-medium[b-w751hsk6s1] {
	width: 200px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-chart-title-narrow[b-w751hsk6s1] {
	width: 160px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-chart-subtitle[b-w751hsk6s1] {
	width: 120px;
	height: var(--font-size-sm);
	margin-bottom: var(--spacing-md);
}

.skeleton-chart-area[b-w751hsk6s1] {
	width: 100%;
	height: 250px;
	border-radius: var(--radius-md);
}

/* Skeleton Donut Chart */
.skeleton-donut-title[b-w751hsk6s1] {
	width: 180px;
	height: var(--font-size-lg);
	margin: 0 auto var(--spacing-md);
}

.skeleton-donut-chart[b-w751hsk6s1] {
	width: 120px;
	height: 120px;
	margin: 0 auto;
}

/* Skeleton Activities */
.skeleton-date-title[b-w751hsk6s1] {
	width: 120px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-activities-title[b-w751hsk6s1] {
	width: 80px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-events-title[b-w751hsk6s1] {
	width: 180px;
	height: var(--font-size-lg);
}

.skeleton-calendar-day[b-w751hsk6s1] {
	width: 40px;
	height: 60px;
	border-radius: var(--radius-sm);
}

.activity-item-skeleton[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
}

.skeleton-activity-icon[b-w751hsk6s1] {
	width: 30px;
	height: 30px;
}

.skeleton-activity-content[b-w751hsk6s1] {
	flex: 1;
}

.skeleton-activity-title[b-w751hsk6s1] {
	width: 70%;
	height: var(--font-size-sm);
	margin-bottom: var(--spacing-xs);
}

.skeleton-activity-desc[b-w751hsk6s1] {
	width: 90%;
	height: var(--font-size-xs);
}

.skeleton-activity-time[b-w751hsk6s1] {
	width: 40px;
	height: var(--font-size-xs);
}

/* Skeleton Pledge Items */
.skeleton-pledge-title[b-w751hsk6s1] {
	width: 120px;
	height: var(--font-size-lg);
	margin-bottom: var(--spacing-md);
}

.skeleton-pledge-list[b-w751hsk6s1] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs);
	max-height: 400px;
}

.skeleton-pledge-item[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	background: var(--bg-secondary);
	min-height: 44px;
}

.skeleton-pledge-icon[b-w751hsk6s1] {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.skeleton-pledge-content[b-w751hsk6s1] {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.skeleton-pledge-name[b-w751hsk6s1] {
	width: 80%;
	height: var(--font-size-sm);
}

.skeleton-pledge-details[b-w751hsk6s1] {
	width: 60%;
	height: var(--font-size-xs);
}

/* Responsive Skeleton Styles */
@media (max-width: 768px) {
	.skeleton-metric-card[b-w751hsk6s1] {
		padding: var(--spacing-md);
		height: auto;
		min-height: 120px;
	}

	.skeleton-metric-icon[b-w751hsk6s1] {
		width: var(--avatar-md);
		height: var(--avatar-md);
	}

	.skeleton-avatar[b-w751hsk6s1] {
		width: var(--avatar-md);
		height: var(--avatar-md);
	}

	.skeleton-chart-area[b-w751hsk6s1] {
		height: 200px;
	}
}

@media (max-width: 480px) {
	.skeleton-metric-card[b-w751hsk6s1] {
		padding: var(--spacing-sm);
		min-height: 100px;
	}

	.skeleton-metric-icon[b-w751hsk6s1] {
		width: var(--avatar-sm);
		height: var(--avatar-sm);
	}

	.skeleton-chart-area[b-w751hsk6s1] {
		height: 150px;
	}

	.skeleton-user-name[b-w751hsk6s1] {
		width: 150px;
		height: var(--spacing-md);
	}
}

/* =====================================================
   Additional styles can be added here
   ===================================================== */

/* Responsive Utility Classes */
@media (max-width: 992px) {
	.col-md-2-4[b-w751hsk6s1] {
		width: 33.333%;
	}
}

@media (max-width: 768px) {
	.col-md-2-4[b-w751hsk6s1] {
		width: 50%;
	}
}

@media (max-width: 576px) {
	.col-md-2-4[b-w751hsk6s1] {
		width: 100%;
	}
}

/* Enhanced responsive grid for better mobile experience */
@media (max-width: 768px) {
	.row[b-w751hsk6s1] {
		margin-left: calc(var(--spacing-xs) * -1);
		margin-right: calc(var(--spacing-xs) * -1);
	}

	.row>*[b-w751hsk6s1] {
		padding-left: var(--spacing-xs);
		padding-right: var(--spacing-xs);
	}
}

/* Tenant Information Styling */
.tenant-info[b-w751hsk6s1] {
	display: flex !important;
	align-items: center !important;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-light);
	height: fit-content;
	gap: var(--spacing-sm);
}

/* Inner flex container for tenant info content */
.tenant-info .d-flex.align-items-center[b-w751hsk6s1] {
	align-items: center !important;
	gap: var(--spacing-sm);
	margin: 0 !important;
}

/* Remove any margin from me-2 class that might affect alignment */
.tenant-info .me-2[b-w751hsk6s1] {
	margin-right: var(--spacing-sm) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Override Bootstrap text-muted class margins */
.tenant-info .text-muted[b-w751hsk6s1] {
	margin: 0 !important;
}

/* Ensure Font Awesome icons are properly centered */
.tenant-icon .fas[b-w751hsk6s1],
.tenant-icon .far[b-w751hsk6s1],
.tenant-icon .fab[b-w751hsk6s1] {
	display: block !important;
	text-align: center !important;
}

.tenant-icon[b-w751hsk6s1] {
	color: var(--primary-color);
	font-size: 1.1rem;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	line-height: 1 !important;
	margin: 0 !important;
}

.tenant-icon i[b-w751hsk6s1] {
	margin: 0 !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

.tenant-details[b-w751hsk6s1] {
	line-height: 1.2;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-self: center !important;
	margin: 0 !important;
}

.tenant-name[b-w751hsk6s1] {
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	margin-bottom: 2px;
	margin-top: 0 !important;
	line-height: 1.2 !important;
}

.tenant-slug[b-w751hsk6s1] {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 !important;
	line-height: 1.2 !important;
}

/* Mobile responsiveness for tenant info */
@media (max-width: var(--breakpoint-md)) {
	.tenant-info[b-w751hsk6s1] {
		padding: var(--spacing-xs) var(--spacing-sm);
		gap: var(--spacing-xs);
	}

	.tenant-name[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}

	.tenant-slug[b-w751hsk6s1] {
		font-size: var(--font-size-2xs);
	}

	.tenant-icon[b-w751hsk6s1] {
		font-size: 1rem;
		width: 20px;
		height: 20px;
	}

	.tenant-icon i[b-w751hsk6s1] {
		font-size: 1rem;
	}
}

/* Extra small screens - hide slug on very small devices */
@media (max-width: 576px) {
	.tenant-slug[b-w751hsk6s1] {
		display: none;
	}
}

/* Overdue Pledges List Styles - Compact Design */
.overdue-pledges-list[b-w751hsk6s1] {
	/* component-scoped variables for icon sizes */
	--pledge-icon-size: calc(var(--btn-height-sm) + 0.375rem);
	--pledge-status-size: calc(var(--avatar-sm) + 0.25rem);

	max-height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: var(--spacing-xs);
}

.pledge-item[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
	border-radius: var(--radius-md);
	background: var(--surface);
	border-left: 3px solid transparent;
	transition: all 0.2s ease;
	min-height: 44px;
	box-shadow: var(--shadow-sm);
}

.pledge-item:hover[b-w751hsk6s1] {
	background: var(--surface-hover);
	box-shadow: var(--shadow-lg);
}

.pledge-item.overdue[b-w751hsk6s1] {
	border-left-color: var(--danger-color);
}

.pledge-item.soon-overdue[b-w751hsk6s1] {
	border-left-color: var(--warning-color);
}

.pledge-status-icon[b-w751hsk6s1] {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-full);
	font-size: 12px;
}

.pledge-item.overdue .pledge-status-icon[b-w751hsk6s1] {
	color: var(--color-danger);
}

.pledge-item.soon-overdue .pledge-status-icon[b-w751hsk6s1] {
	color: var(--color-warning);
}

.pledge-content[b-w751hsk6s1] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* keep a left offset so content doesn't sit flush against the left border
	   when the status icon is hidden or removed */
	padding-left: calc(10px + var(--spacing-xs));
}

.pledge-header[b-w751hsk6s1] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-xs);
}

.pledge-name[b-w751hsk6s1] {
	font-size: calc(var(--font-size-sm) + 0.1875rem);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.pledge-item.overdue .pledge-name[b-w751hsk6s1] {
	color: var(--color-danger);
}

.pledge-item.soon-overdue .pledge-name[b-w751hsk6s1] {
	color: var(--color-warning);
}

.pledge-header .badge[b-w751hsk6s1] {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	flex-shrink: 0;
}

.pledge-amount[b-w751hsk6s1] {
	font-size: calc(var(--font-size-xs) + 0.1875rem);
	font-weight: var(--font-weight-normal);
	color: var(--text-primary);
	margin-right: var(--spacing-sm);
}

.pledge-amount-label[b-w751hsk6s1] {
	color: var(--text-black);
	font-weight: var(--font-weight-normal);
	margin-right: 6px;
}

.pledge-amount-value[b-w751hsk6s1] {
	color: var(--text-black);
	font-weight: var(--font-weight-normal);
	font-size: calc(var(--font-size-sm) + 0.1875rem);
}

.pledge-meta[b-w751hsk6s1] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.pledge-date[b-w751hsk6s1] {
	white-space: nowrap;
}

.pledge-date[b-w751hsk6s1] {
	font-size: calc(var(--font-size-sm) + 0.125rem);
	color: var(--text-secondary);
	font-weight: var(--font-weight-normal);
}

.pledge-overdue-days[b-w751hsk6s1] {
	color: var(--danger-color);
	font-weight: 500;
	font-size: calc(var(--font-size-xs) + 0.125rem);
}

.pledge-actions-compact[b-w751hsk6s1] {
	display: flex;
	gap: var(--spacing-xxs);
	flex-shrink: 0;
}

.btn-icon[b-w751hsk6s1] {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	transition: all 0.2s ease;
	font-size: 12px;
	text-decoration: none;
}

.btn-icon:hover[b-w751hsk6s1] {
	background: var(--bg-hover);
	border-color: var(--primary-color);
	color: var(--primary-color);
	transform: scale(1.05);
}

.pledge-item.overdue .btn-icon[b-w751hsk6s1] {
	border-color: var(--color-danger);
	color: var(--color-danger);
}

.pledge-item.overdue .btn-icon:hover[b-w751hsk6s1] {
	background: var(--color-danger);
	color: white;
}

.pledge-item.soon-overdue .btn-icon[b-w751hsk6s1] {
	border-color: var(--color-warning);
	color: var(--color-warning);
}

.pledge-item.soon-overdue .btn-icon:hover[b-w751hsk6s1] {
	background: var(--color-warning);
}

/* Mail icon: use dark color by default and quick-actions-like hover shadow */

.pledge-item .pledge-actions-compact .btn-icon[b-w751hsk6s1] {
	color: var(--metric-blue);
	border-color: transparent;
	background: transparent;
	transition: box-shadow 160ms ease, transform 120ms ease, background 120ms ease, color 120ms ease;
}

.pledge-item .pledge-actions-compact .btn-icon:hover:not(:disabled)[b-w751hsk6s1] {
	/* Grey hover like Quick Actions: subtle background, shadow, lift; keep icon blue */
	color: var(--metric-blue);
	border-color: transparent;
}

.pledge-item .pledge-actions-compact .btn-icon:hover:not(:disabled) i[b-w751hsk6s1] {
	/* Increase mail icon size by 3px on hover */
	font-size: 25px;
}

.pledge-item .pledge-actions-compact .btn-icon:disabled[b-w751hsk6s1],
.pledge-item .pledge-actions-compact .btn-icon[disabled][b-w751hsk6s1] {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.overdue-pledges-list[b-w751hsk6s1]::-webkit-scrollbar {
	width: 6px;
}

.overdue-pledges-list[b-w751hsk6s1]::-webkit-scrollbar-track {
	background: var(--surface);
	border-radius: var(--radius-sm);
}

.overdue-pledges-list[b-w751hsk6s1]::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: var(--radius-sm);
}

.overdue-pledges-list[b-w751hsk6s1]::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

@media (max-width: var(--breakpoint-md)) {
	.pledge-item[b-w751hsk6s1] {
		padding: var(--spacing-xs);
	}

	.pledge-name[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}

	.pledge-amount[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}

	/* smaller left offset on medium screens */
	.pledge-content[b-w751hsk6s1] {
		padding-left: calc(20px + var(--spacing-xs));
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.overdue-pledges-list[b-w751hsk6s1] {
		max-height: 300px;
	}

	.pledge-item[b-w751hsk6s1] {
		min-height: 40px;
	}

	.btn-icon[b-w751hsk6s1] {
		width: 24px;
		height: 24px;
		font-size: 10px;
	}

	/* ensure spacing remains on small screens but slightly reduced */
	.pledge-content[b-w751hsk6s1] {
		padding-left: calc(18px + var(--spacing-xxs));
	}
}

/* Quick Actions Component Styles */
.quick-actions-container[b-w751hsk6s1] {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	/* match chart-card padding so headers align vertically */
	padding: var(--spacing-md);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.quick-actions-header[b-w751hsk6s1] {
	margin-bottom: var(--spacing-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 10px;
}

.quick-actions-header h6[b-w751hsk6s1] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0;
}

.quick-actions-list[b-w751hsk6s1] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	margin-left: 10px;
}

.quick-action-btn[b-w751hsk6s1] {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm); /* tighter spacing */
	padding: var(--spacing-sm); /* smaller buttons */
	background: var(--bg-card);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: var(--transition-normal);
	text-align: left;
	width: 100%;
}

.quick-action-btn:hover[b-w751hsk6s1] {
	background: var(--bg-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.quick-action-btn:active[b-w751hsk6s1] {
	transform: translateY(0);
}

.quick-action-btn.blue[b-w751hsk6s1] {
	border-color: var(--metric-blue);
}

.quick-action-btn.green[b-w751hsk6s1] {
	border-color: var(--metric-green);
}

.quick-action-btn.orange[b-w751hsk6s1] {
	border-color: var(--metric-orange);
}

.quick-action-btn.purple[b-w751hsk6s1] {
	border-color: var(--metric-purple);
}

.quick-action-btn.red[b-w751hsk6s1] {
	border-color: var(--metric-red);
}

.quick-action-icon[b-w751hsk6s1] {
	width: 34px; /* smaller */
	height: 34px; /* smaller */
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.quick-action-icon i[b-w751hsk6s1] {
	font-size: var(--font-size-lg);
	color: var(--white);
}

.quick-action-icon.blue[b-w751hsk6s1] {
	background: var(--metric-blue);
}

.quick-action-icon.green[b-w751hsk6s1] {
	background: var(--metric-green);
}

.quick-action-icon.orange[b-w751hsk6s1] {
	background: var(--metric-orange);
}

.quick-action-icon.purple[b-w751hsk6s1] {
	background: var(--metric-purple);
}

.quick-action-icon.red[b-w751hsk6s1] {
	background: var(--metric-red);
}

/* Reduce the glyph size for the red quick-action (Add a Contribution) to match others */
.quick-action-btn.red .quick-action-icon i[b-w751hsk6s1] {
    font-size: calc(var(--font-size-md) * 0.88);
}

.quick-action-text[b-w751hsk6s1] {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	flex: 1;
}

/* Strong override: force a neutral grey border for quick-action buttons inside this component.
   Uses higher specificity and !important to override earlier color rules and compiled scoped CSS. */
.quick-actions-list .quick-action-btn[b-w751hsk6s1],
.quick-actions-list .quick-action-btn.blue[b-w751hsk6s1],
.quick-actions-list .quick-action-btn.green[b-w751hsk6s1],
.quick-actions-list .quick-action-btn.orange[b-w751hsk6s1],
.quick-actions-list .quick-action-btn.purple[b-w751hsk6s1],
.quick-actions-list .quick-action-btn.red[b-w751hsk6s1] {
    border: 1px solid var(--border-color) !important;
}

/* Unsaved Changes Modal Styles */
.modal-backdrop-visible[b-w751hsk6s1]::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlay-dark);
	z-index: -1;
}

.modal.show[b-w751hsk6s1] {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.modal-dialog-centered[b-w751hsk6s1] {
	margin: auto;
}

/* Responsive adjustments */
@media (max-width: 992px) {
	.quick-actions-container[b-w751hsk6s1] {
		margin-bottom: var(--spacing-lg);
	}
}

@media (max-width: 768px) {
	.quick-action-btn[b-w751hsk6s1] {
		padding: var(--spacing-sm);
		gap: var(--spacing-sm);
	}

	.quick-action-icon[b-w751hsk6s1] {
		width: 36px;
		height: 36px;
	}

	.quick-action-icon i[b-w751hsk6s1] {
		font-size: var(--font-size-sm);
	}

	.quick-action-text[b-w751hsk6s1] {
		font-size: var(--font-size-xs);
	}
}
/* /Pages/Login.razor.rz.scp.css */
/* Main container - full screen with background */
.login-container[b-hfr7sgifsp] {
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

/* Full screen background image */
.login-background[b-hfr7sgifsp] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--white);
	height: 100%;
	z-index: 1;
}

.login-background-image[b-hfr7sgifsp] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.login-content[b-hfr7sgifsp] {
	position: fixed;
	top: 50%;
	left: 220px;
	transform: translateY(-50%);
	width: 100%;
	max-width: 450px;
	z-index: 10;
	padding: var(--spacing-2xl);
}

.brand-logo[b-hfr7sgifsp] {
	margin-bottom: var(--spacing-3xl);
	display: flex;
	justify-content: center;
	align-items: center;
}

.brand-logo .logo[b-hfr7sgifsp] {
	height: var(--spacing-3xl);
	width: auto;
}

.login-header[b-hfr7sgifsp] {
	margin-bottom: var(--spacing-2xl);
}

.login-header h2[b-hfr7sgifsp] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	color: var(--primary-color);
	margin-bottom: var(--spacing-sm);
	text-align: left;
}

.subtitle[b-hfr7sgifsp] {
	color: var(--text-secondary);
	font-size: var(--font-size-lg);
	margin-bottom: 0;
	line-height: var(--line-height-normal);
}

/* Form styling */
.login-form[b-hfr7sgifsp] {
	width: 100%;
}

.form-group[b-hfr7sgifsp] {
	margin-bottom: var(--spacing-lg);
}

.form-group label[b-hfr7sgifsp] {
	display: block;
	font-weight: var(--font-weight-medium);
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
	font-size: var(--font-size-lg);
}

.required[b-hfr7sgifsp] {
	color: var(--danger-color);
}

.form-control[b-hfr7sgifsp] {
	width: 100%;
	padding: var(--spacing-lg) var(--spacing-xl);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	font-size: var(--font-size-2xl);
	background: var(--white);
	transition: var(--transition-normal);
	box-sizing: border-box;
}

.form-control:focus[b-hfr7sgifsp] {
	outline: none;
	border-color: var(--input-border-color-focus);
	box-shadow: var(--shadow-focus);
}

.form-control[b-hfr7sgifsp]::placeholder {
	color: var(--text-muted);
}

/* Password input wrapper for show/hide toggle */
.password-input-wrapper[b-hfr7sgifsp] {
	position: relative;
}

.password-input-wrapper .form-control[b-hfr7sgifsp] {
	padding-right: 50px;
}

.password-toggle[b-hfr7sgifsp] {
	position: absolute;
	right: var(--spacing-md);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: var(--spacing-sm);
	transition: var(--transition-fast);
	font-size: var(--font-size-lg);
}

.password-toggle:hover[b-hfr7sgifsp] {
	color: var(--primary-color);
}

/* Remember Me checkbox styling */
.remember-me-group[b-hfr7sgifsp] {
	margin-bottom: var(--spacing-md);
}

.remember-me-label[b-hfr7sgifsp] {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-md);
	color: var(--text-primary);
	user-select: none;
}

.remember-me-checkbox[b-hfr7sgifsp] {
	width: 18px;
	height: 18px;
	margin-right: var(--spacing-sm);
	cursor: pointer;
	accent-color: var(--primary-color);
}

.remember-me-text[b-hfr7sgifsp] {
	color: var(--text-secondary);
}

.remember-me-note[b-hfr7sgifsp] {
	display: block;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	margin-top: var(--spacing-xs);
	margin-left: calc(18px + var(--spacing-sm));
	font-style: italic;
}

.forgot-password[b-hfr7sgifsp] {
	text-align: left;
	margin-bottom: var(--spacing-xl);
}

.forgot-password a[b-hfr7sgifsp] {
	color: var(--text-link);
	text-decoration: none;
	font-size: var(--font-size-lg);
	transition: var(--transition-normal);
}

.forgot-password a:hover[b-hfr7sgifsp] {
	text-decoration: underline;
}

/* Login button */
.btn-login[b-hfr7sgifsp] {
	width: 100%;
	background: var(--primary-color);
	color: var(--white);
	border: none;
	padding: var(--btn-padding);
	border-radius: var(--btn-border-radius);
	font-weight: var(--btn-font-weight);
	font-size: var(--font-size-xl);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-normal);
	box-shadow: var(--shadow-sm);
}

.btn-login:hover:not(:disabled)[b-hfr7sgifsp] {
	background: var(--primary-color-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

.btn-login:disabled[b-hfr7sgifsp] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Alert styling */
.alert[b-hfr7sgifsp] {
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-lg);
}

.alert-danger[b-hfr7sgifsp] {
	background-color: var(--error-bg);
	border: 1px solid var(--error-border);
	color: var(--danger-color);
}

/* Validation message styling */
.validation-message[b-hfr7sgifsp] {
	color: var(--danger-color);
	font-size: var(--font-size-sm);
	margin-top: var(--spacing-xs);
	display: block;
	animation: fadeIn-b-hfr7sgifsp 0.3s ease-in;
}

@keyframes fadeIn-b-hfr7sgifsp {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Spinner styling */
.spinner-border[b-hfr7sgifsp] {
	width: 1rem;
	height: 1rem;
	border: 0.125em solid transparent;
	border-top: 0.125em solid currentColor;
	border-radius: 50%;
	animation: spinner-border-b-hfr7sgifsp 0.75s linear infinite;
}

.spinner-border-sm[b-hfr7sgifsp] {
	width: 0.875rem;
	height: 0.875rem;
	border-width: 0.1em;
}

@keyframes spinner-border-b-hfr7sgifsp {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive design */
@media (max-width: 768px) {
	.login-content[b-hfr7sgifsp] {
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 90%;
		padding: var(--spacing-lg);
	}

	.brand-logo .logo[b-hfr7sgifsp] {
		height: var(--spacing-2xl);
	}
}

@media (max-width: 480px) {
	.login-content[b-hfr7sgifsp] {
		max-width: 95%;
		padding: var(--spacing-md);
	}

	.login-header h2[b-hfr7sgifsp] {
		font-size: var(--font-size-3xl);
	}
}
/* /Pages/NewDonors.razor.rz.scp.css */
/* NewDonors.razor scoped styles */

/* Make heading font weight consistent with other pages */
.card-header h6[b-x8vn86pboa] {
    font-weight: var(--font-weight-semibold);
}

.heading-text[b-x8vn86pboa] {
    font-weight: var(--font-weight-semibold);
}

/* Table styling to match other screens */
.table thead th[b-x8vn86pboa] {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: var(--spacing-md);
}

.table tbody tr:hover[b-x8vn86pboa] {
    background-color: var(--bg-hover);
}

.table tbody tr.table-active[b-x8vn86pboa] {
    background-color: var(--bg-active);
}

.table tbody td[b-x8vn86pboa] {
    padding: var(--spacing-md);
    vertical-align: middle;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* Button styling to match design requirements */
.btn-light[b-x8vn86pboa] {
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
    color: var(--primary-color);
}

.btn-light:hover[b-x8vn86pboa] {
    background-color: var(--bg-hover);
    border-color: var(--bg-hover);
    color: var(--primary-color);
}

.btn-light:disabled[b-x8vn86pboa] {
    background-color: var(--bg-secondary);
    border-color: var(--bg-secondary);
    color: var(--text-muted);
    opacity: 0.65;
}

.btn-light i[b-x8vn86pboa] {
    color: var(--primary-color);
}

.btn-light:disabled i[b-x8vn86pboa] {
    color: var(--text-muted);
}

/* Pagination styling */
.pagination[b-x8vn86pboa] {
    margin-bottom: 0;
}

.pagination .page-link[b-x8vn86pboa] {
    color: var(--primary-color);
    border-color: var(--border-color);
}

.pagination .page-item.active .page-link[b-x8vn86pboa] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.pagination .page-item.disabled .page-link[b-x8vn86pboa] {
    color: var(--text-muted);
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

/* Card footer styling */
.card-footer[b-x8vn86pboa] {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Filter panel styling */
.filters-panel .card[b-x8vn86pboa] {
    box-shadow: var(--shadow-sm);
}

.filters-panel .card-body[b-x8vn86pboa] {
    padding: var(--spacing-lg);
}

/* Modal overlay styling */
.modal-overlay[b-x8vn86pboa] {
    background-color: var(--overlay-dark);
}

.filters-panel .form-label[b-x8vn86pboa] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.filters-panel .form-control[b-x8vn86pboa] {
    font-size: var(--font-size-sm);
}

/* Ensure consistent spacing */
.new-donors-container[b-x8vn86pboa] {
    padding: var(--spacing-sm);
}
/* Checkbox styling */
.form-check-input[b-x8vn86pboa] {
    cursor: pointer;
}

.form-check-input:checked[b-x8vn86pboa] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Modal styling */
.modal-content[b-x8vn86pboa] {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header[b-x8vn86pboa] {
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-lg) var(--spacing-xl);
}

.modal-body[b-x8vn86pboa] {
    padding: var(--spacing-xl);
}

.modal-footer[b-x8vn86pboa] {
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* Modal styling for New Donors - matches Contributions modals */
.modal-overlay[b-x8vn86pboa] {
    background-color: var(--overlay-dark);
}

.modal-header-primary[b-x8vn86pboa] {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header-primary .modal-title[b-x8vn86pboa] {
    color: var(--text-light);
    margin: 0px;
    font-size: var(--font-size-xl);
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-semibold);
}

.modal-footer-compact[b-x8vn86pboa] {
    padding: var(--spacing-md) var(--spacing-md);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.modal-action-btn[b-x8vn86pboa] {
    min-height: var(--form-control-height);
    padding: var(--spacing-sm) var(--spacing-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.modal-action-btn .fas[b-x8vn86pboa] {
    font-size: 1rem;
    vertical-align: middle;
}

/* Force left filters header to match right header height/padding on New Donors page
   Updated to match the responsive column classes used in the razor markup. */
.new-donors-container .filters-panel-wrapper > .card > .card-header[b-x8vn86pboa],
.new-donors-container .filters-panel > .card > .card-header[b-x8vn86pboa],
.new-donors-container .col-xl-10 > .card > .card-header[b-x8vn86pboa],
.new-donors-container .col-lg-9 > .card > .card-header[b-x8vn86pboa],
.new-donors-container .col-md-8 > .card > .card-header[b-x8vn86pboa] {
    border-bottom: 1px solid var(--border-color, #dee2e6) !important;
    min-height: var(--card-header-height) !important;
    height: var(--card-header-height) !important;
    padding: var(--spacing-md) !important;
    box-sizing: border-box !important;
}

/* Use flex layout so left filter card and right donor card match heights
   and their footers align at the bottom on the New Donors page */
.new-donors-container .row[b-x8vn86pboa] {
    align-items: stretch;
}

.new-donors-container .filters-panel-wrapper[b-x8vn86pboa],
.new-donors-container .col-xl-10[b-x8vn86pboa],
.new-donors-container .col-lg-9[b-x8vn86pboa],
.new-donors-container .col-md-8[b-x8vn86pboa] {
    display: flex;
    flex-direction: column;
}

.new-donors-container .filters-panel-wrapper > .card[b-x8vn86pboa],
.new-donors-container .col-xl-10 > .card[b-x8vn86pboa],
.new-donors-container .col-lg-9 > .card[b-x8vn86pboa],
.new-donors-container .col-md-8 > .card[b-x8vn86pboa] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.new-donors-container .card > .card-body[b-x8vn86pboa] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.new-donors-container .card .table-responsive[b-x8vn86pboa] {
    flex: 1 1 auto;
    min-height: 0;
}

.new-donors-container .card .card-footer[b-x8vn86pboa] {
    margin-top: auto;
}
/* /Pages/PaymentSuccess.razor.rz.scp.css */
/* Payment Success Page Uniform Height */
.payment-success-container[b-c788v43jv9] {
    min-height: 100vh;
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--white);
}

/* Override Bootstrap's text-success to use custom lighter green */
.payment-success-container .text-success[b-c788v43jv9] {
    color: var(--success-color) !important;
}

.payment-success-container .container-fluid[b-c788v43jv9] {
    min-height: 100%;
}

/* Responsive padding adjustments */
@media (max-width: 576px) {
    .payment-success-container[b-c788v43jv9] {
        padding: 1rem 0.5rem;
    }
}

/* Breadcrumb styling */
.success-breadcrumb[b-c788v43jv9] {
    background-color: var(--primary-color);
    padding: var(--spacing-md) var(--spacing-md);
    margin: 0;
}

.payment-breadcrumb[b-c788v43jv9] {
    background-color: var(--primary-color) !important;
    padding: var(--spacing-md) var(--spacing-md) !important;
    margin: 0 !important;
}

/* Success icon override */
.success-icon-large[b-c788v43jv9] {
    color: var(--success-color);
    font-size: calc(var(--font-size-3xl) + 2px);
}

/* Table summary row */
.table-summary-row[b-c788v43jv9] {
    background-color: var(--bg-secondary);
}

/* Payment Success Page Styles */
.success-card[b-c788v43jv9] {
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl);
    border: var(--card-border);
    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(var(--white-rgb), 0.9) 100%);
}

.success-icon[b-c788v43jv9] {
    font-size: calc(4rem + 2px);
    color: var(--success-color);
    animation: successPulse-b-c788v43jv9 2s ease-in-out infinite;
}

@keyframes successPulse-b-c788v43jv9 {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.success-title[b-c788v43jv9] {
    color: var(--success-color);
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--font-size-2xl) + 2px);
}

.success-message[b-c788v43jv9] {
    color: var(--text-primary);
    font-size: calc(var(--font-size-lg) + 2px);
    line-height: 1.6;
}

.transaction-details[b-c788v43jv9] {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.detail-item[b-c788v43jv9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child[b-c788v43jv9] {
    border-bottom: none;
}

.detail-label[b-c788v43jv9] {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    /* make labels slightly larger for readability */
    font-size: calc(0.95rem + 2px);
}

/* Make the left-side field labels and right-side voucher labels match table header size */
.payment-success-container .payment-details strong[b-c788v43jv9],
.payment-success-container .payment-details .mb-2 strong[b-c788v43jv9],
.payment-success-container .payment-details .voucher-info strong[b-c788v43jv9],
.payment-success-container .voucher-info[b-c788v43jv9] {
    font-size: calc(1rem + 2px) !important;

    color: var(--text-primary);
}

.payment-success-container .payment-details .mb-2[b-c788v43jv9],
.payment-success-container .voucher-info[b-c788v43jv9] {
    font-size: calc(0.95rem + 2px) !important;
}

.detail-value[b-c788v43jv9] {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-monospace);
    /* ensure values are readable */
    font-size: calc(1rem + 2px);
}

.receipt-note[b-c788v43jv9] {
    background-color: var(--info-color-light);
    color: var(--info-color-dark);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: calc(0.95rem + 2px);
    padding-left: 0;
    /* align left edge with surrounding labels */
}

/* Ensure paragraph inside note is not indented */
.receipt-note p[b-c788v43jv9] {
    margin-left: 0;
}

.action-buttons[b-c788v43jv9] {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-c788v43jv9] {
    padding: var(--spacing-sm) var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    min-width: var(--btn-min-width-lg);
    font-size: calc(1rem);
}

.btn-primary[b-c788v43jv9] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover[b-c788v43jv9] {
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
    box-shadow: var(--shadow-hover);
    transform: translateY(calc(var(--spacing-xxs) * -1));
}

.btn-outline-secondary[b-c788v43jv9] {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-c788v43jv9] {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-link[b-c788v43jv9] {
    color: var(--primary-color);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
}

.btn-link:hover[b-c788v43jv9] {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

.download-section[b-c788v43jv9] {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
}

.info-card[b-c788v43jv9] {
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    border: none;
}

.info-card .card-title[b-c788v43jv9] {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    font-size: calc(1rem + 2px);
}

.info-list[b-c788v43jv9] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li[b-c788v43jv9] {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: calc(0.95rem + 2px);
}

.info-list li i[b-c788v43jv9] {
    color: var(--success-color);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .success-icon[b-c788v43jv9] {
        font-size: calc(3rem + 2px);
    }

    .success-title[b-c788v43jv9] {
        font-size: calc(var(--font-size-xl) + 2px);
    }

    .action-buttons[b-c788v43jv9] {
        flex-direction: column;
        align-items: center;
    }

    .btn[b-c788v43jv9] {
        width: 100%;
        max-width: var(--btn-min-width-xl);
    }

    .detail-item[b-c788v43jv9] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .detail-value[b-c788v43jv9] {
        font-size: calc(var(--font-size-sm) + 2px);
        word-break: break-all;
    }
}

/* Ensure table and receipt text in the transaction area are larger */
.transaction-details[b-c788v43jv9],
.transaction-details table[b-c788v43jv9],
.transaction-details th[b-c788v43jv9],
.transaction-details td[b-c788v43jv9] {
    font-size: calc(0.95rem + 2px);
}

/* Override Bootstrap's .small inside the receipt to ensure larger text */
.payment-success-container .card-body .small[b-c788v43jv9],
.payment-success-container .transaction-details .small[b-c788v43jv9],
.payment-success-container small[b-c788v43jv9] {
    font-size: calc(0.95rem + 2px) !important;
    line-height: 1.4 !important;
}

/* Ensure table header and body text are not reduced by global small rules */
.payment-success-container .transaction-details th[b-c788v43jv9],
.payment-success-container .transaction-details td[b-c788v43jv9] {
    font-size: calc(0.95rem + 2px) !important;
}

/* Custom class to replace Bootstrap's small where we want larger receipt text */
.payment-success-container .receipt-small[b-c788v43jv9],
.payment-success-container table.receipt-small th[b-c788v43jv9],
.payment-success-container table.receipt-small td[b-c788v43jv9] {
    font-size: calc(0.95rem + 2px) !important;
    line-height: 1.4 !important;
}

/* Make address lines in the top header slightly larger than other receipt-small text */
.payment-success-container .receipt-header .receipt-small[b-c788v43jv9],
.payment-success-container .receipt-header .text-muted[b-c788v43jv9] {
    font-size: calc(1.1rem) !important;
    color: var(--text-secondary);
}

/* Logo size in header (kept small to match previous look) */
.payment-success-container .receipt-header .d-flex>.d-flex.align-items-center[b-c788v43jv9] {
    /* left column (logo + school info) */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: var(--spacing-10);
    flex: 0 1 auto;
    min-width: 0;
    /* allow content to shrink/wrap */
    max-width: var(--receipt-header-max-width);
    /* limit width so long text wraps */
}

.payment-success-container .receipt-header img[b-c788v43jv9] {
    max-height: var(--logo-lg-height) !important;
    max-width: var(--logo-xl-width) !important;
    object-fit: contain;
    flex-shrink: 0 !important;
    display: block !important;
}

.payment-success-container .receipt-header .school-info[b-c788v43jv9] {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: block;
}

@media (max-width: 768px) {
    .payment-success-container .receipt-header img[b-c788v43jv9] {
        max-height: var(--logo-md-height) !important;
        max-width: var(--logo-xl-width) !important;
    }
}

.payment-success-container .receipt-header h5[b-c788v43jv9] {
    font-size: calc(1.15rem + 2px) !important;
    font-weight: var(--font-weight-bold) !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Right-align all amount cells by default for readability */
.payment-success-container table.receipt-small th.amount-cell[b-c788v43jv9],
.payment-success-container table.receipt-small td.amount-cell[b-c788v43jv9] {
    text-align: right !important;
    /* Use tabular numbers for better visual alignment of decimals */
    font-variant-numeric: tabular-nums;
}

/* Keep the top header visually centered regardless of left column length.
   Make left column wrap and limit its max width so the center stays centered. */
.payment-success-container .receipt-header .d-flex.align-items-start[b-c788v43jv9] {
    position: relative;
}

/* Header position helper to remove inline styles */
.payment-success-container .header-position[b-c788v43jv9] {
    position: relative;
    padding-top: var(--spacing-6);
}

.payment-success-container .receipt-header .text-center.flex-grow-1[b-c788v43jv9] {
    /* center title: absolute centered to viewport of header */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: var(--spacing-6);
    z-index: 20;
    width: auto;
    text-align: center;
    pointer-events: none;
    /* so floating buttons remain clickable */
}

/* Corner buttons containers replacing inline styles */
.corner-buttons-desktop[b-c788v43jv9] {
    position: absolute;
    right: var(--spacing-sm);
    top: var(--spacing-6);
    z-index: 50;
}

.corner-buttons-mobile[b-c788v43jv9] {
    position: absolute;
    right: var(--spacing-6);
    top: var(--spacing-6);
    z-index: 50;
}

.corner-buttons-row[b-c788v43jv9] {
    display: flex;
    gap: var(--spacing-6);
    align-items: center;
}

/* Button sizing variants */
.btn-download-desktop[b-c788v43jv9] {
    height: var(--spacing-xl);
    padding: var(--spacing-xs) var(--spacing-6);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-13);
    min-width: var(--btn-min-width-md);
}

.btn-print-mobile[b-c788v43jv9],
.btn-download-mobile[b-c788v43jv9] {
    height: var(--btn-height-sm);
    padding: 3px var(--spacing-6);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-12);
}

.btn-print-mobile[b-c788v43jv9] {
    min-width: var(--btn-min-width-xs);
}

.btn-download-mobile[b-c788v43jv9] {
    min-width: var(--btn-min-width-sm);
}

/* Utility italic class */
.italic[b-c788v43jv9] {
    font-style: italic;
}

.payment-success-container .receipt-header .text-center.flex-grow-1 h1[b-c788v43jv9] {
    pointer-events: auto;
    /* allow selection/interaction if needed */
}

/* Right spacer and floating buttons remain above background */
.payment-success-container .receipt-header>.d-flex .me-2[b-c788v43jv9],
.payment-success-container .receipt-header>.d-flex .me-3[b-c788v43jv9] {
    z-index: 10;
}

/* Small screens: revert to normal flow so layout stacks naturally */
@media (max-width: 768px) {
    .payment-success-container .receipt-header .text-center.flex-grow-1[b-c788v43jv9] {
        position: static;
        transform: none;
        top: auto;
        width: 100%;
        margin-top: var(--spacing-sm);
        pointer-events: auto;
    }

    .payment-success-container .receipt-header .d-flex>.d-flex.align-items-center[b-c788v43jv9] {
        max-width: 100%;
    }
}

/* Animation for card entrance */
.success-card[b-c788v43jv9] {
    animation: slideInUp-b-c788v43jv9 0.6s ease-out;
}

@keyframes slideInUp-b-c788v43jv9 {
    from {
        opacity: 0;
        transform: translateY(var(--spacing-30));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/PledgePaymentPublic.razor.rz.scp.css */
.pledge-payment-public-container[b-bh6clvqjz2] {
	height: 100vh;
	background: var(--bg-card);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.loading-spinner[b-bh6clvqjz2] {
	text-align: center;
	color: var(--text-primary);
	background: var(--bg-card);
	padding: var(--spacing-2xl);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.alert[b-bh6clvqjz2] {
	max-width: 600px;
	width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.alert-danger[b-bh6clvqjz2] {
	background-color: var(--danger-bg);
	border-color: var(--danger-color);
	color: var(--danger-color);
}

/* Make the modal full screen but leave breathing room around it */
[b-bh6clvqjz2] .modal {
	padding: 0 !important;
}

/* Remove the default grey backdrop and let the page background show through */
[b-bh6clvqjz2] .modal-backdrop {
	background-color: transparent !important;
}

[b-bh6clvqjz2] .modal-dialog {
	/* Match the donation form width tokens for a consistent public UI */
	max-width: var(--max-width) !important;
	width: 100% !important;
	/* Extend dialog to fill screen height with minimal margins */
	max-height: calc(100vh - 2rem) !important;
	height: calc(100vh - 2rem) !important;
	margin: 1rem auto !important; /* minimal top/bottom margin, centered horizontally */
	display: flex !important;
	align-items: stretch !important;
	justify-content: center !important;
}

[b-bh6clvqjz2] .modal-content {
	/* Fill the dialog height completely */
	height: 100% !important;
	max-height: 100% !important;
	border-radius: var(--radius-md) !important;
	border: none !important;
	background: var(--bg-card) !important;
	display: flex !important;
	flex-direction: column !important;
}

[b-bh6clvqjz2] .modal-header {
	border-bottom: 1px solid var(--border-color);
	background: var(--bg-card);
	padding: var(--spacing-lg);
}

[b-bh6clvqjz2] .modal-body {
	overflow-y: auto;
	flex: 1 1 auto;
}

[b-bh6clvqjz2] .modal-footer {
	border-top: 1px solid var(--border-color);
	background: var(--bg-card);
	padding: var(--spacing-lg);
}

/* Notes textarea uses default sizing; hidden on public pages via component */

@media (max-width: 768px) {
	.pledge-payment-public-container[b-bh6clvqjz2] {
		padding: 0;
	}
}
/* /Pages/Pledges.razor.rz.scp.css */
/* Page-scoped styles for Pledges page */

/* Color edit icons blue */
.pledges-container .fas.fa-edit[b-rmhaujeeh6],
.pledges-table .fas.fa-edit[b-rmhaujeeh6] {
	color: var(--primary-color);
}

/* Make activity names in pledges table bold */
.pledges-table tbody tr td:nth-child(2)[b-rmhaujeeh6] {
	/* Activity column (second column) should be bold */
	font-weight: var(--font-weight-semibold);
}

/* Pledges Page Styles */
.pledges-container[b-rmhaujeeh6] {
	padding: var(--spacing-sm, 0.5rem);
	height: auto;
	max-height: calc(100vh - 80px);
	overflow: hidden;
}

.pledges-container .container-fluid[b-rmhaujeeh6] {
	height: auto;
	max-height: 100%;
	padding: 0;
	overflow: hidden;
}

.pledges-container .row[b-rmhaujeeh6] {
	height: auto;
	overflow: hidden;
}

.filters-panel .card[b-rmhaujeeh6] {
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

/* Ensure filters header height matches table header on Pledges page */
.filters-panel .card-header[b-rmhaujeeh6] {
	min-height: var(--card-header-height);
}

.pledges-table-container[b-rmhaujeeh6] {
	background-color: var(--card-background);
	border-radius: var(--border-radius);
	overflow: hidden;
	height: calc(100vh - 120px);
}

.pledges-table-container .card[b-rmhaujeeh6] {
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	height: 100%;
	/* allow card to stretch to parent height */
	overflow: hidden;
}

.pledges-table-container .card-body[b-rmhaujeeh6] {
	flex-grow: 0;
	overflow: visible;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 200px);
	--table-max-height: calc(100vh - 230px);
}

.pledges-table-container .table-responsive[b-rmhaujeeh6] {
	flex-grow: 0;
	overflow-y: auto;
	overflow-x: auto;
	max-height: var(--table-max-height, calc(100vh - 180px));
	position: relative;
	-webkit-overflow-scrolling: touch;
}

/* Custom scrollbar styling for webkit browsers */
.pledges-table-container .table-responsive[b-rmhaujeeh6]::-webkit-scrollbar {
	width: 8px;
}

.pledges-table-container .table-responsive[b-rmhaujeeh6]::-webkit-scrollbar-track {
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
}

.pledges-table-container .table-responsive[b-rmhaujeeh6]::-webkit-scrollbar-thumb {
	background: var(--gray-400);
	border-radius: var(--radius-sm);
}

.pledges-table-container .table-responsive[b-rmhaujeeh6]::-webkit-scrollbar-thumb:hover {
	background: var(--gray-500);
}

.pledges-table[b-rmhaujeeh6] {
	margin-bottom: 0 !important;
	table-layout: auto;
	width: 100%;
	min-width: 100%;
}

.pledges-table th[b-rmhaujeeh6] {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	border-bottom: 2px solid var(--border-color);
	position: sticky;
	top: 0;
	z-index: 10;
	padding: var(--spacing-12) var(--spacing-sm);
	font-size: var(--font-size-sm);
	vertical-align: middle;
	white-space: nowrap;
}

.pledges-table td[b-rmhaujeeh6] {
	vertical-align: middle;
	border-bottom: 1px solid var(--border-color);
	padding: var(--spacing-12) var(--spacing-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

/* Allow contributor and activity names to wrap if needed */
.pledges-table td:nth-child(2)[b-rmhaujeeh6],
.pledges-table td:nth-child(3)[b-rmhaujeeh6] {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.pledges-table tbody tr:hover[b-rmhaujeeh6] {
	background-color: var(--bg-hover);
}

.pledges-table .btn-group .btn[b-rmhaujeeh6] {
	padding: var(--spacing-xs) var(--spacing-sm);
	margin: 0 var(--spacing-xxs);
	border: 1px solid var(--border-color);
}

.pledges-table .btn-group .btn:hover[b-rmhaujeeh6] {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

/* Summary stats cards */
.pledges-container .card[b-rmhaujeeh6] {
	transition: transform var(--transition-quick) ease-in-out;
}

.pledges-container .card:hover[b-rmhaujeeh6] {
	/* transform: translateY(-2px); */
	box-shadow: var(--shadow-lg);
}

/* Table column styling */
.pledges-table th:nth-child(1)[b-rmhaujeeh6] {
	/* Contributor */
	min-width: 120px;
	max-width: 180px;
}

.pledges-table th:nth-child(2)[b-rmhaujeeh6] {
	/* Activity */
	min-width: 120px;
	max-width: 150px;
}

.pledges-table th:nth-child(4)[b-rmhaujeeh6] {
	/* Pledge Date */
	min-width: 100px;
	width: 110px;
}

.pledges-table th:nth-child(5)[b-rmhaujeeh6] {
	/* Pledge Amount */
	min-width: 110px;
	width: 120px;
	text-align: right;
}

.pledges-table th:nth-child(6)[b-rmhaujeeh6] {
	/* Instalment Amount */
	min-width: 120px;
	width: 140px;
	text-align: right;
}

.pledges-table th:nth-child(7)[b-rmhaujeeh6] {
	/* Due Date */
	min-width: 100px;
	width: 110px;
}

.pledges-table th:nth-child(8)[b-rmhaujeeh6] {
	/* Due Amount */
	min-width: 100px;
	width: 115px;
	text-align: right;
}

.pledges-table th:nth-child(9)[b-rmhaujeeh6] {
	/* Balance Amount */
	min-width: 110px;
	width: 130px;
	text-align: right;
}

.pledges-table th:nth-child(10)[b-rmhaujeeh6] {
	/* End Date */
	min-width: 100px;
	width: 110px;
}

.pledges-table th:nth-child(11)[b-rmhaujeeh6] {
	/* Status */
	min-width: 80px;
	width: 90px;
}

.pledges-table th:nth-child(12)[b-rmhaujeeh6] {
	/* Progress */
	min-width: 100px;
	width: 110px;
}

.pledges-table th:nth-child(13)[b-rmhaujeeh6] {
	/* Actions */
	min-width: 140px;
	width: 150px;
}

.amount-col[b-rmhaujeeh6] {
	width: 120px;
}

.progress-col[b-rmhaujeeh6] {
	width: 200px;
}

.page-size-select[b-rmhaujeeh6] {
	width: auto;
}

/* Progress bar styling */
.progress[b-rmhaujeeh6] {
	background-color: var(--gray-200);
	border-radius: var(--radius-sm, 4px);
	overflow: hidden;
}

.progress-bar[b-rmhaujeeh6] {
	background: linear-gradient(
		90deg,
		var(--primary-color) 0%,
		var(--success-color) 100%
	);
	color: var(--text-light);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-semibold);
	background-color: var(--gray-200);
	line-height: 20px;
	transition: width var(--transition-normal) ease;
}

.pledge-progress[b-rmhaujeeh6] {
	height: 20px;
}

.badge[b-rmhaujeeh6] {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}

/* Overdue row highlighting */
.table-warning[b-rmhaujeeh6] {
	background-color: var(--warning-subtle, rgba(255, 193, 7, 0.1)) !important;
	border-left: 3px solid var(--warning-color, #ffc107);
}

/* Family ID badge */
.badge.bg-secondary[b-rmhaujeeh6] {
	background-color: var(--gray-600) !important;
	color: var(--text-light);
	font-family: var(--font-family-monospace);
	font-size: var(--font-size-10);
}

/* Payment modal styling */
.modal-lg[b-rmhaujeeh6] {
	max-width: 50rem;
}

.modal-content[b-rmhaujeeh6] {
	border-radius: var(--radius-lg);
	border: none;
	box-shadow: var(--shadow-2xl);
}

.modal-header[b-rmhaujeeh6] {
	background-color: var(--primary-color);
	color: var(--white);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header .btn-close[b-rmhaujeeh6] {
	filter: invert(1);
}

/* Filter form styling */
.filters-panel .form-control[b-rmhaujeeh6],
.filters-panel .form-select[b-rmhaujeeh6] {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	transition:
		border-color var(--transition-fast) ease-in-out,
		box-shadow var(--transition-fast) ease-in-out;
}

.filters-panel .form-control:focus[b-rmhaujeeh6],
.filters-panel .form-select:focus[b-rmhaujeeh6] {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

/* Pagination styling */
.pagination-nav .page-link[b-rmhaujeeh6] {
	color: var(--primary-color);
	border: 1px solid var(--border-color);
	padding: var(--spacing-6) var(--spacing-12);
}

.pagination-nav .page-link:hover[b-rmhaujeeh6] {
	background-color: var(--bg-hover);
	border-color: var(--primary-color);
}

.pagination-nav .page-item.active .page-link[b-rmhaujeeh6] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

.pagination-nav .page-item.disabled .page-link[b-rmhaujeeh6] {
	color: var(--text-muted);
	background-color: var(--bg-disabled);
	border-color: var(--border-color);
}

/* Selection checkbox styling */
.form-check-input[b-rmhaujeeh6] {
	border: 2px solid var(--border-color);
	border-radius: var(--radius-sm);
}

.form-check-input:checked[b-rmhaujeeh6] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.pledges-container[b-rmhaujeeh6] {
		padding: var(--spacing-sm);
	}

	.filters-panel[b-rmhaujeeh6] {
		margin-bottom: var(--spacing-20);
	}

	.pledges-table-container .d-flex[b-rmhaujeeh6] {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.pledges-table th[b-rmhaujeeh6],
	.pledges-table td[b-rmhaujeeh6] {
		padding: var(--spacing-sm) var(--spacing-xs);
		font-size: 0.8rem;
	}

	.btn-group .btn[b-rmhaujeeh6] {
		padding: var(--spacing-xxs) var(--spacing-xs);
		font-size: 0.7rem;
	}
}

/* Text color utilities for amounts */
.text-success[b-rmhaujeeh6] {
	color: var(--success-color, #26b050) !important;
}

.text-info[b-rmhaujeeh6] {
	color: var(--info-color, #0dcaf0) !important;
}

.text-warning[b-rmhaujeeh6] {
	color: var(--warning-color, #ffc107) !important;
}

.text-danger[b-rmhaujeeh6] {
	color: var(--danger-color, #dc3545) !important;
}

.text-primary[b-rmhaujeeh6] {
	color: var(--primary-color) !important;
}

/* Modal backdrop */
.modal-backdrop-visible[b-rmhaujeeh6] {
	background-color: var(--overlay-dark);
}

/* Summary stats specific styling */
.pledges-container .row.mb-4 .card[b-rmhaujeeh6] {
	border: none;
	border-left: var(--spacing-xs) solid transparent;
}

.pledges-container .card.border-primary[b-rmhaujeeh6] {
	border-left-color: var(--primary-color) !important;
}

.pledges-container .card.border-success[b-rmhaujeeh6] {
	border-left-color: var(--success-color, #26b050) !important;
}

.pledges-container .card.border-warning[b-rmhaujeeh6] {
	border-left-color: var(--warning-color, #ffc107) !important;
}

.pledges-container .card.border-info[b-rmhaujeeh6] {
	border-left-color: var(--info-color, #0dcaf0) !important;
}

/* Progress Bar Styles */
.pledge-progress[b-rmhaujeeh6] {
	background-color: var(--gray-200, #e9ecef);
	border-radius: var(--radius-sm, 4px);
	height: 20px;
	overflow: hidden;
}

.pledge-progress .progress-bar[b-rmhaujeeh6] {
	background: linear-gradient(
		90deg,
		var(--primary-color) 0%,
		var(--success-color) 100%
	);
	color: var(--white);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-semibold);
	text-align: center;
	line-height: 20px;
	height: 100%;
	transition: width var(--transition-normal) ease;
	/* width is set dynamically via inline style based on pledge progress */
}

/* Sortable Header Styles */
.sortable-header[b-rmhaujeeh6] {
	cursor: pointer;
	user-select: none;
	transition: var(--transition-all, all 0.3s ease);
	position: relative;
}

.sortable-header span[b-rmhaujeeh6] {
	margin-right: var(--spacing-xs, 4px);
}

.sortable-header i[b-rmhaujeeh6] {
	font-size: var(--font-size-sm, 14px);
	opacity: 0.7;
	transition: var(--transition-fast, all 0.15s ease);
}

.sortable-header:hover i[b-rmhaujeeh6] {
	opacity: 1;
}

.sortable-header.active-sort i[b-rmhaujeeh6] {
	opacity: 1;
	color: var(--primary-color, #0973b9);
}

.heading-text[b-rmhaujeeh6] {
	display: inline-block;
}

.ms-heading[b-rmhaujeeh6] {
	margin-left: calc(0.7rem + 1.25em);
	/* adjusts for icon width */
}

/* View All button hover - white background with blue text */
.card-header-gradient .btn-outline-light:hover[b-rmhaujeeh6] {
	background-color: white !important;
	color: var(--primary-color, #0973b9) !important;
	border-color: white !important;
}

.pledges-table-container .card .card-header .btn[b-rmhaujeeh6] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	/* fixed height that matches btn-sm with icon padding */
	padding: var(--spacing-6) var(--spacing-12);
	/* override to ensure consistent vertical padding */
	line-height: 1;
	/* avoid extra height from line-height differences */
}

/* Empty state full-height centered container */
.empty-state-full[b-rmhaujeeh6] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	/* allow empty state to grow and fill card body */
	padding: var(--spacing-2xl) var(--spacing-md);
}

.empty-state-full .text-center[b-rmhaujeeh6] {
	max-width: 40rem;
}

/* Handshake icon: lighter edges, solid secondary center. Kept minimal and scoped.
   Applies to font glyphs (background-clip) and provides an SVG size fallback. */
.empty-state-full .fa-handshake[b-rmhaujeeh6],
.empty-state-full .fa-handshake[b-rmhaujeeh6]::before {
	--empty-edge-color: var(--primary-light);
	background: linear-gradient(
		90deg,
		var(--empty-edge-color) 0%,
		var(--empty-edge-color) 25%,
		var(--secondary-color) 25%,
		var(--secondary-color) 75%,
		var(--empty-edge-color) 75%,
		var(--empty-edge-color) 100%
	) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
	display: inline-block;
	font-size: 60px !important;
	line-height: 1 !important;
	margin-bottom: 12px !important;
}

.empty-state-full .svg-inline--fa[b-rmhaujeeh6] {
	display: inline-block;
	width: 4.5rem;
	height: 4.5rem;
}

/* Ensure the card body uses flex so .empty-state-full can expand */
.pledges-table-container .card .card-body[b-rmhaujeeh6] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
	/* card-body padding managed by .empty-state-full */
}

/* Ensure main container and rows stretch the full viewport height so right panel can expand */
.pledges-container .container-fluid[b-rmhaujeeh6] {
	min-height: calc(100vh - var(--header-height, 70px) - 55px);
}

.pledges-container .row[b-rmhaujeeh6] {
	align-items: stretch;
}

.filter-panel .card[b-rmhaujeeh6],
.filters-panel .card[b-rmhaujeeh6] {
	height: 100%;
}

.filters-panel .e-custom-style[b-rmhaujeeh6] {
	width: 100%;
}
.filters-panel .e-custom-style .e-input[b-rmhaujeeh6],
.filters-panel .e-custom-style input.e-input[b-rmhaujeeh6] {
	padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
	font-size: var(--font-size-sm, 14px) !important;
	height: auto !important;
	min-height: calc(
		1.5em + 16px
	) !important; /* approximate .form-control height */
	box-sizing: border-box !important;
	color: var(--text-primary, #212529) !important;
}
.filters-panel .e-custom-style .e-datepicker[b-rmhaujeeh6],
.filters-panel .e-custom-style .e-control[b-rmhaujeeh6] {
	width: 100% !important;
}
.filters-panel .e-custom-style input.e-input[b-rmhaujeeh6]::placeholder {
	color: var(--text-secondary, #6c757d) !important;
	opacity: 1 !important;
}

/* Tighten filter spacing so paired inputs sit closer together
   and vertical gaps between filter groups are reduced. */
.filters-panel .mb-3[b-rmhaujeeh6] {
	margin-bottom: 0.5rem !important;
}
.filters-panel .row[b-rmhaujeeh6] {
	margin-left: calc(-1 * var(--spacing-6, 6px));
	margin-right: calc(-1 * var(--spacing-6, 6px));
}
.filters-panel .row > [class*="col-"][b-rmhaujeeh6] {
	padding-left: var(--spacing-6, 6px) !important;
	padding-right: var(--spacing-6, 6px) !important;
}

/* Payment History Modal Table Styling */
.payment-history-table th[b-rmhaujeeh6],
.payment-history-table td[b-rmhaujeeh6] {
	padding: var(--spacing-sm) var(--spacing-md) !important;
}

.payment-history-table td[b-rmhaujeeh6] {
	white-space: nowrap;
}

/* Right-align Amount column (3rd column) */
.payment-history-table td:nth-child(3)[b-rmhaujeeh6] {
	text-align: right;
}

.payment-history-table td:last-child[b-rmhaujeeh6] {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
/* /Pages/Profile.razor.rz.scp.css */
.profile-container[b-p0zt0kuae6] {
    min-height: calc(100vh - 180px);
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.profile-card[b-p0zt0kuae6] {
    background: var(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.profile-header[b-p0zt0kuae6] {
    background: var(--primary-color);
    color: white;
    padding: 2rem;
    text-align: center;
}

.profile-header h2[b-p0zt0kuae6] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 600;
}

.profile-header p[b-p0zt0kuae6] {
    margin: 0;
    opacity: 0.9;
}

.profile-info[b-p0zt0kuae6] {
    padding: 2rem;
}

.info-section[b-p0zt0kuae6] {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.info-section h4[b-p0zt0kuae6] {
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.info-item[b-p0zt0kuae6] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.info-item label[b-p0zt0kuae6] {
    font-weight: 600;
    color: var(--text-secondary);
    width: 140px;
    flex-shrink: 0;
}

.info-item span[b-p0zt0kuae6] {
    color: var(--text-primary);
}

.edit-section h4[b-p0zt0kuae6] {
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.update-form[b-p0zt0kuae6] {
    max-width: 500px;
}

.form-group[b-p0zt0kuae6] {
    margin-bottom: 1.5rem;
}

.form-group label[b-p0zt0kuae6] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-control[b-p0zt0kuae6] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--background-color);
    color: var(--text-primary);
}

.form-control:focus[b-p0zt0kuae6] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.form-actions[b-p0zt0kuae6] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn[b-p0zt0kuae6] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-p0zt0kuae6] {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-p0zt0kuae6] {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-p0zt0kuae6] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-p0zt0kuae6] {
    background: var(--secondary-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-p0zt0kuae6] {
    background: var(--hover-color);
    transform: translateY(-1px);
}

.alert[b-p0zt0kuae6] {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
}

.alert-success[b-p0zt0kuae6] {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger[b-p0zt0kuae6] {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.loading[b-p0zt0kuae6] {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.spinner-border[b-p0zt0kuae6] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-p0zt0kuae6 0.75s linear infinite;
}

.spinner-border-sm[b-p0zt0kuae6] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

@keyframes spinner-border-b-p0zt0kuae6 {
    to {
        transform: rotate(360deg);
    }
}

.validation-message[b-p0zt0kuae6] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .profile-container[b-p0zt0kuae6] {
        margin: 1rem;
        padding: 0;
    }

    .profile-header[b-p0zt0kuae6] {
        padding: 1.5rem;
    }

    .profile-header h2[b-p0zt0kuae6] {
        font-size: 1.5rem;
    }

    .profile-info[b-p0zt0kuae6] {
        padding: 1.5rem;
    }

    .info-item[b-p0zt0kuae6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-item label[b-p0zt0kuae6] {
        width: auto;
        margin-bottom: 0.25rem;
    }

    .form-actions[b-p0zt0kuae6] {
        flex-direction: column;
    }

    .btn[b-p0zt0kuae6] {
        text-align: center;
        justify-content: center;
    }
}
/* /Pages/ReceiptPage.razor.rz.scp.css */
/* Styles for ReceiptPage - moved from inline styles in ReceiptPage.razor */
.receipt-page-container[b-uuvm2v216m] {
    padding: var(--spacing-sm) var(--spacing-md);
    max-width: none;
    width: 100%;
    margin: 0;
}

.receipt-page-container .card[b-uuvm2v216m] {
    width: 100%;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--gray-200);
    border-radius: var(--card-border-radius);
    background: var(--bg-card);
}

.receipt-page-fullwidth[b-uuvm2v216m] {
    margin: 0 calc(-1 * var(--spacing-md)); /* extend to edges of page content area */
}

.card-header-gradient[b-uuvm2v216m] {
    background: var(--gradient-card);
    color: var(--text-light);
}

@media (max-width: var(--breakpoint-md)) {
    .receipt-page-container[b-uuvm2v216m] {
        padding: var(--spacing-sm);
    }
}
/* /Pages/Register.razor.rz.scp.css */
.register-container[b-oa4a9rzvvj] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color, #0066cc) 0%, var(--secondary-color, #004499) 100%);
    padding: var(--spacing-lg, 24px);
}

.register-card[b-oa4a9rzvvj] {
    background: var(--bg-card, white);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
    padding: var(--spacing-xl, 32px);
    width: 100%;
    max-width: 400px;
}

.register-header[b-oa4a9rzvvj] {
    text-align: center;
    margin-bottom: var(--spacing-xl, 32px);
}

.register-header h2[b-oa4a9rzvvj] {
    color: var(--text-primary, #333);
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    margin: 0 0 var(--spacing-sm, 8px) 0;
}

.register-header p[b-oa4a9rzvvj] {
    color: var(--text-secondary, #666);
    font-size: var(--font-size-sm, 0.875rem);
    margin: 0;
}

.register-form[b-oa4a9rzvvj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 24px);
}

.form-group[b-oa4a9rzvvj] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
}

.form-group label[b-oa4a9rzvvj] {
    color: var(--text-primary, #333);
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
}

.form-control[b-oa4a9rzvvj] {
    padding: var(--spacing-md, 16px);
    border: 1px solid var(--border-color, #ddd);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-base, 1rem);
    transition: var(--transition-all, all 0.2s ease);
    background: var(--bg-primary, white);
    color: var(--text-primary, #333);
}

.form-control:focus[b-oa4a9rzvvj] {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-control[b-oa4a9rzvvj]::placeholder {
    color: var(--text-muted, #999);
}

.btn-register[b-oa4a9rzvvj] {
    padding: var(--spacing-md, 16px);
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--primary-color, #0066cc);
    color: var(--text-light, white);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    cursor: pointer;
    transition: var(--transition-all, all 0.2s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 8px);
}

.btn-register:hover:not(:disabled)[b-oa4a9rzvvj] {
    background: var(--primary-hover, #0052a3);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.btn-register:disabled[b-oa4a9rzvvj] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.register-footer[b-oa4a9rzvvj] {
    text-align: center;
    margin-top: var(--spacing-xl, 32px);
    padding-top: var(--spacing-lg, 24px);
    border-top: 1px solid var(--border-color, #eee);
}

.register-footer p[b-oa4a9rzvvj] {
    color: var(--text-secondary, #666);
    font-size: var(--font-size-sm, 0.875rem);
    margin: 0;
}

.register-footer a[b-oa4a9rzvvj] {
    color: var(--primary-color, #0066cc);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
}

.register-footer a:hover[b-oa4a9rzvvj] {
    text-decoration: underline;
}

.alert[b-oa4a9rzvvj] {
    padding: var(--spacing-md, 16px);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--spacing-lg, 24px);
    font-size: var(--font-size-sm, 0.875rem);
}

.alert-danger[b-oa4a9rzvvj] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #721c24;
}

.spinner-border[b-oa4a9rzvvj] {
    width: 1rem;
    height: 1rem;
    border: 0.125em solid transparent;
    border-top: 0.125em solid currentColor;
    border-radius: 50%;
    animation: spinner-border-b-oa4a9rzvvj 0.75s linear infinite;
}

.spinner-border-sm[b-oa4a9rzvvj] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.1em;
}

@keyframes spinner-border-b-oa4a9rzvvj {
    to {
        transform: rotate(360deg);
    }
}

.validation-message[b-oa4a9rzvvj] {
    color: #dc3545;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Responsive Design */
@media (max-width: 480px) {
    .register-container[b-oa4a9rzvvj] {
        padding: var(--spacing-md, 16px);
    }

    .register-card[b-oa4a9rzvvj] {
        padding: var(--spacing-lg, 24px);
    }
}
/* /Pages/RegistrationForm.razor.rz.scp.css */
.registration-page[b-pn1n4q69y6] {
	font-family: var(--font-family-primary);
	background: var(--bg-secondary);
	min-height: 100vh;
	padding-top: 2rem;
}

/* Hero Section with Background Image */
.hero[b-pn1n4q69y6] {
	position: relative;
	background: var(--bg-secondary);
	padding: 60px 20px;
	color: var(--text-light);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
}

.hero-overlay[b-pn1n4q69y6] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	max-width: 1100px;
	height: 280px;
	background:
		linear-gradient(135deg,
			rgba(var(--primary-rgb), 0.95),
			rgba(var(--gradient-primary-rgb), 0.85)),
		url("https://images.unsplash.com/photo-1511578314322-379afb476865?w=1600") center/cover;
	border-radius: 16px;
	z-index: 1;
}

.hero-content[b-pn1n4q69y6] {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
}

.hero-title[b-pn1n4q69y6] {
	font-size: 48px;
	font-weight: 700;
	margin: 0 0 16px 0;
	color: var(--text-light);
	text-shadow: 0 2px 4px rgba(var(--black-rgb), 0.2);
}

.hero-subtitle[b-pn1n4q69y6] {
	font-size: 20px;
	color: rgba(var(--white-rgb), 0.95);
	margin: 0;
	line-height: 1.6;
}

/* Main Container */
.page-body.container[b-pn1n4q69y6] {
	max-width: 1120px;
	margin: 40px auto 40px;
	padding: 0 20px;
}

/* All Cards Container */
.page-body.container>form>fieldset[b-pn1n4q69y6] {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Guest Information Card */
.guest-info-card[b-pn1n4q69y6] {
	background: var(--bg-card);
	border-radius: 12px;
	box-shadow: var(--card-shadow);
	padding: 32px;
	margin-bottom: 24px;
	border: 1px solid var(--ft-border);
	width: 100%;
	max-width: 1100px;
}

.card-header-with-icon[b-pn1n4q69y6] {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	/* tighten spacing so the receipt banner sits closer to subtitle */
	margin-bottom: 12px;
}

.icon-circle[b-pn1n4q69y6] {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg,
			var(--ft-primary-400),
			var(--ft-primary-700));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-size: 20px;
	flex-shrink: 0;
}

.card-title[b-pn1n4q69y6] {
	font-size: 24px;
	font-weight: 700;
	color: var(--ft-text);
	margin: 0 0 4px 0;
}

.card-subtitle[b-pn1n4q69y6] {
	font-size: 14px;
	color: var(--ft-muted);
	margin: 0;
}

/* Guest Section */
.guest-section[b-pn1n4q69y6] {
	background: var(--bg-secondary);
	border: 1px solid var(--ft-border);
	border-radius: 20px;
	padding: 20px 24px;
	margin-bottom: 16px;
}

.guest-section.current-guest[b-pn1n4q69y6] {
	background: var(--bg-card);
	border: 2px solid var(--ft-primary-400);
}

.guest-header[b-pn1n4q69y6] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

.guest-badge[b-pn1n4q69y6] {
	/* match the light-blue pill style from the screenshot */
	background: var(--blue-bg-light);
	/* very light blue */
	color: var(--blue-600);
	/* darker blue text */
	padding: 6px 12px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	border: 1px solid var(--border-blue-light);
	/* subtle border */
	box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.6);
	display: inline-block;
}

.price-badge[b-pn1n4q69y6] {
	background: var(--metric-green);
	color: var(--text-light);
	padding: 6px 14px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
}

/* Edit button placed before delete button in header */
.btn-edit-guest[b-pn1n4q69y6] {
	background: var(--bg-card);
	border: 1px solid rgba(var(--primary-rgb), 0.12);
	color: var(--primary-color);
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.btn-edit-guest i[b-pn1n4q69y6] {
	font-size: 14px;
}

.btn-edit-guest:hover[b-pn1n4q69y6] {
	background: var(--ft-primary-50);
}

/* Summary value styling for saved guests */
.summary-value[b-pn1n4q69y6] {
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--bg-secondary);
	color: var(--ft-text);
	min-height: 40px;
	display: flex;
	align-items: center;
}

.guest-section.saved-guest[b-pn1n4q69y6] {
	cursor: default;
}

.guest-section.saved-guest:focus[b-pn1n4q69y6] {
	outline: 2px solid rgba(var(--indigo-600), 0.12);
}

/* Form Fields */
.form-row-two[b-pn1n4q69y6] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 18px;
}

.form-row-three[b-pn1n4q69y6] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	margin-bottom: 18px;
}

.form-row-single[b-pn1n4q69y6] {
	display: block;
	margin-bottom: 18px;
}

.form-field[b-pn1n4q69y6] {
	display: flex;
	flex-direction: column;
}

.form-field label[b-pn1n4q69y6] {
	font-size: 14px;
	font-weight: 600;
	color: var(--ft-text);
	margin-bottom: 8px;
	display: block;
}

.validation-message[b-pn1n4q69y6] {
	color: var(--metric-red);
	font-size: 12px;
	margin-top: 6px;
	font-weight: 500;
	display: block;
}
/* Validation border overrides are handled globally in `app.css`.
   Component-scoped overrides were removed to avoid duplication and
   CSS-cascade conflicts. Keep field-level messages here only. */

/* Unified input/select styling so text inputs match the phone input appearance */
.form-control[b-pn1n4q69y6],
.form-select[b-pn1n4q69y6],
.input[b-pn1n4q69y6] {
	padding: 12px 14px;
	/* slightly taller for visual parity with select */
	border: 1px solid var(--input-border-color);
	/* softer border to match phone control */
	border-radius: 10px;
	font-size: 15px;
	transition: var(--transition-fast);
	background: var(--bg-card);
	color: var(--ft-text);
	width: 100%;
	box-shadow: var(--shadow-sm);
	line-height: 1.4;
}

.form-control:hover[b-pn1n4q69y6],
.form-select:hover[b-pn1n4q69y6],
.input:hover[b-pn1n4q69y6] {
	border-color: var(--input-border-color-hover);
}

.form-control:focus[b-pn1n4q69y6],
.form-select:focus[b-pn1n4q69y6],
.input:focus[b-pn1n4q69y6] {
	outline: none;
	border-color: var(--input-border-color-focus);
	/* subtle blue edge */
	box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.06);
	z-index: 2;
}

.form-control[b-pn1n4q69y6]::placeholder,
.input[b-pn1n4q69y6]::placeholder {
	color: var(--placeholder-color);
	font-size: 14px;
}

/* Use Bootstrap's .input-group / .form-select / .form-control for phone inputs.
   Keep a small helper for the country select width. */
.phone-country-select[b-pn1n4q69y6] {
	max-width: 120px;
}

/* Guest Summary (for saved guests) */
.guest-summary[b-pn1n4q69y6] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.summary-item[b-pn1n4q69y6] {
	display: flex;
	gap: 8px;
}

.summary-label[b-pn1n4q69y6] {
	font-weight: 600;
	color: var(--ft-muted);
	min-width: 80px;
}

.summary-value[b-pn1n4q69y6] {
	color: var(--ft-text);
}

.btn-remove-guest[b-pn1n4q69y6] {
	align-self: flex-start;
	background: transparent;
	border: 1px solid var(--metric-red);
	color: var(--metric-red);
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-fast);
	margin-top: 8px;
}

.btn-remove-guest:hover[b-pn1n4q69y6] {
	background: var(--ft-danger-50);
}

.btn-delete-guest[b-pn1n4q69y6] {
	background: var(--bg-card);
	border: 1px solid rgba(var(--metric-red-rgb), 0.15);
	color: var(--metric-red);
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.btn-delete-guest i[b-pn1n4q69y6] {
	font-size: 14px;
}

/* Small utility for header controls (delete/price grouping) */
.inline-controls[b-pn1n4q69y6] {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Add Guest Button */

.add-guest-section[b-pn1n4q69y6] {
	text-align: center;
	padding: 16px 0;
	border-top: 2px dashed var(--ft-border);
	margin-top: 8px;
}

.btn-add-guest[b-pn1n4q69y6] {
	background: var(--ft-primary-50);
	border: 2px dashed var(--ft-primary-400);
	color: var(--ft-primary-700);
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-fast);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-add-guest:hover[b-pn1n4q69y6] {
	background: var(--ft-primary-100);
	border-color: var(--ft-primary-700);
}

.btn-add-guest i[b-pn1n4q69y6] {
	font-size: 18px;
}

/* Two-column responsive grid for guest cards */
.guest-list[b-pn1n4q69y6] {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	width: 100%;
}

/* Make each guest card full width inside the grid cell */
.guest-list .guest-section[b-pn1n4q69y6] {
	margin-bottom: 0;
	/* grid gap handles spacing */
	width: 100%;
}

/* On narrow screens, stack vertically */
@media (max-width: 900px) {
	.guest-list[b-pn1n4q69y6] {
		grid-template-columns: 1fr;
	}
}

/* Make guest cards visually match the second screenshot: white card with light header */
.guest-section.saved-guest[b-pn1n4q69y6] {
	background: var(--bg-card);
	border: 1px solid rgba(var(--black-rgb), 0.06);
	box-shadow: 0 6px 18px rgba(var(--black-rgb), 0.04);
}

.saved-guest-form .form-field label[b-pn1n4q69y6] {
	font-size: 13px;
	color: var(--ft-muted);
	margin-bottom: 6px;
}

.saved-guest-form .summary-value[b-pn1n4q69y6] {
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--bg-secondary);
	color: var(--ft-text);
	min-height: 40px;
	display: flex;
	align-items: center;
}

.guest-section.saved-guest .guest-header+.guest-form[b-pn1n4q69y6] {
	margin-top: 6px;
}

/* Ensure two-column rows use equal width and full-width rows span the card */
.form-row-two[b-pn1n4q69y6] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 18px;
}

.form-row-one[b-pn1n4q69y6] {
	display: block;
	margin-bottom: 18px;
}

.form-row-one .form-field[b-pn1n4q69y6] {
	width: 100%;
}

@media (max-width: 900px) {
	.form-row-two[b-pn1n4q69y6] {
		grid-template-columns: 1fr;
	}
}

/* Info banners at top of guest card */
.info-banner[b-pn1n4q69y6] {
	background: linear-gradient(90deg,
			var(--gradient-primary),
			var(--ft-primary-700));
	color: var(--text-light);
	padding: 10px 14px;
	border-radius: 6px;
	font-weight: 600;
	margin-bottom: 18px;
}

.info-banner-primary[b-pn1n4q69y6] {
	background: linear-gradient(90deg,
			var(--gradient-primary),
			var(--ft-primary));
}

/* Small helper classes used by the razor markup */
.required-asterisk[b-pn1n4q69y6] {
	color: var(--metric-red);
	font-weight: 700;
	margin-left: 4px;
}

.receipt-banner[b-pn1n4q69y6] {
	/* prominent blue rounded banner (matching screenshot) */
	background: linear-gradient(90deg,
			var(--primary-color),
			var(--gradient-primary));
	color: white;
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 600;
	/* slightly pull up so it sits snugly under the subtitle */
	margin: 6px 0 12px 0;
	/* remove background shadow for a flatter look */
	box-shadow: none;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
}

.receipt-banner .receipt-icon[b-pn1n4q69y6] {
	font-size: 22px;
	opacity: 0.98;
	/* remove background ring so icon appears cleaner */
	padding: 4px 6px 2px 6px;
	border-radius: 50%;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ensure the receipt banner following a saved guest has extra spacing */
.guest-section+.info-banner-primary[b-pn1n4q69y6] {
	display: block;
	margin-top: 12px !important;
	margin-bottom: 18px !important;
	/* ensure gap before next guest */
}

/* Ensure the guest block following any banner has extra spacing (prevent touching) */
.info-banner+.guest-section[b-pn1n4q69y6],
.info-banner-primary+.guest-section[b-pn1n4q69y6] {
	margin-top: 10px !important;
}

/* Disabled add button visual */
.btn-add-guest[disabled][b-pn1n4q69y6] {
	opacity: 0.5;
	cursor: not-allowed;
	filter: grayscale(10%);
}

/* Registration Summary Card: white card with a light-green header strip (matches donor UI) */
.registration-summary-card[b-pn1n4q69y6] {
	background: var(--bg-card);
	border-radius: 12px;
	padding: 0;
	/* header contains its own padding */
	margin-bottom: 24px;
	box-shadow: var(--card-shadow-lg);
	border: 1px solid rgba(var(--black-rgb), 0.04);
	width: 100%;
	max-width: 1100px;
	overflow: hidden;
}

/* top header strip */
.registration-summary-card .summary-header[b-pn1n4q69y6] {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(90deg, var(--green-50), var(--green-100));
	/* light green header */
	padding: 18px 24px;
}

.summary-icon[b-pn1n4q69y6] {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--metric-green);
	/* green circle */
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 18px;
}

.summary-header h3[b-pn1n4q69y6] {
	font-size: 20px;
	font-weight: 700;
	color: var(--green-600);
	margin: 0;
}

.summary-content[b-pn1n4q69y6] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 24px 24px 24px;
}

.summary-line[b-pn1n4q69y6] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--ft-text);
	/* neutral dark */
	font-size: 15px;
}

.summary-value-bold[b-pn1n4q69y6] {
	font-weight: 700;
	color: var(--ft-text);
}

.summary-divider[b-pn1n4q69y6] {
	height: 1px;
	background: linear-gradient(to right,
			transparent,
			rgba(var(--black-rgb), 0.06),
			transparent);
	margin: 12px 0;
}

.summary-total-line[b-pn1n4q69y6] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 800;
	color: var(--ft-text);
	padding-top: 8px;
}

.total-price[b-pn1n4q69y6] {
	font-size: 28px;
	font-weight: 900;
	color: var(--indigo-600);
	/* bright blue */
}

.summary-message[b-pn1n4q69y6] {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-info-50);
	/* subtle pale background */
	padding: 12px 16px;
	border-radius: 8px;
	color: var(--ft-text);
	font-size: 14px;
	margin-top: 12px;
}

.summary-message i[b-pn1n4q69y6] {
	color: var(--metric-red);
	font-size: 16px;
}

/* Submit Button */
.submit-section[b-pn1n4q69y6] {
	text-align: center;
	margin-bottom: 40px;
	width: 100%;
	max-width: 1100px;
}

.btn-complete-registration[b-pn1n4q69y6] {
	background: linear-gradient(135deg, var(--indigo-600), var(--blue-800));
	color: white;
	border: none;
	padding: 18px 48px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 16px rgba(var(--indigo-600), 0.3);
	transition: all 0.3s;
	width: 100%;
	max-width: 500px;
}

.btn-complete-registration:hover:not(:disabled)[b-pn1n4q69y6] {
	background: linear-gradient(135deg, var(--blue-800), var(--blue-900));
	box-shadow: 0 12px 24px rgba(var(--indigo-600), 0.4);
	transform: translateY(-2px);
}

.btn-complete-registration:disabled[b-pn1n4q69y6] {
	background: var(--gray-400);
	cursor: not-allowed;
	box-shadow: none;
}

/* Fieldset Reset */
.no-border[b-pn1n4q69y6] {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
	.hero-title[b-pn1n4q69y6] {
		font-size: 32px;
	}

	.hero-subtitle[b-pn1n4q69y6] {
		font-size: 16px;
	}

	.guest-info-card[b-pn1n4q69y6] {
		padding: 20px;
	}

	.form-row-two[b-pn1n4q69y6],
	.form-row-three[b-pn1n4q69y6] {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.phone-country-select[b-pn1n4q69y6] {
		width: 120px;
		min-width: 120px;
	}

	.btn-complete-registration[b-pn1n4q69y6] {
		padding: 16px 32px;
		font-size: 16px;
	}
}
/* /Pages/RegistrationFormPublic.razor.rz.scp.css */

.modal-body.ft-modal-message[b-jq7rv95zae] {
    min-height: 12.5rem; /* restore taller popup height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    gap: var(--spacing-md);
}

.modal-body.ft-modal-message h5[b-jq7rv95zae] {
    margin: 0;
    font-size: var(--font-size-lg); /* larger title for readability */
    font-weight: var(--font-weight-medium);
    text-align: center;
    white-space: nowrap; /* keep title on one line */
    overflow: visible; /* do not truncate */
    max-width: calc(var(--modal-max-width) - 220px);
}

.modal-body.ft-modal-message p[b-jq7rv95zae] {
    margin: 0;
    font-size: var(--font-size-base); /* base body size - can increase if needed */
    text-align: center;
    white-space: normal; /* allow wrapping */
}

.ft-modal-icon[b-jq7rv95zae] {
    width: var(--avatar-md); /* smaller icon to match earlier visuals (~40px) */
    height: var(--avatar-md);
    border-radius: var(--radius-full);
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

/* Ensure text block fits the dialog width */
.modal-body.ft-modal-message .ft-modal-text[b-jq7rv95zae] {
    max-width: 480px; /* keep text block comfortable inside dialog */
    padding: 0 var(--spacing-sm);
}

/* Modal dialog width controlled by design token */
.modal-dialog[b-jq7rv95zae] {
    /* Use design token for overall modal cap but keep a comfortable dialog width */
    max-width: min(var(--modal-max-width), 520px);
    width: calc(100% - 48px);
    margin: 0 auto;
}
/* /Pages/Reports.razor.rz.scp.css */
/* Reports Page Styles */
.reports-container[b-35sfziq1iu] {
    min-height: calc(100vh - 180px);
    padding: var(--spacing-sm);
}

/* Use the global page layout classes */
.reports-container .container-fluid[b-35sfziq1iu] {
    min-height: 100%;
}

/* Metric cards styling */
.metric-card[b-35sfziq1iu] {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease;
}

.metric-card:hover[b-35sfziq1iu] {
    transform: translateY(-2px);
}

.metric-card.purple[b-35sfziq1iu] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.metric-card.orange[b-35sfziq1iu] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.metric-card.green[b-35sfziq1iu] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.metric-card.blue[b-35sfziq1iu] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

/* Progress Bar Styles - matching Campaigns page */
.campaign-progress[b-35sfziq1iu] {
    height: 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.campaign-progress .progress-bar[b-35sfziq1iu] {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--success-color) 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    transition: width 0.3s ease;
    height: 100%;
}

/* Tables */
.reports-table[b-35sfziq1iu] {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.reports-table th[b-35sfziq1iu] {
    /* background: var(--gradient-card);
    color: var(--text-light); */
    font-weight: 600;
    padding: var(--spacing-md);
}

.reports-table td[b-35sfziq1iu] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--gray-200);
}

/* Progress column specific styling */
.reports-table td:nth-child(4)[b-35sfziq1iu] {
    width: 120px !important;
    /* Fixed width for Progress column */
    text-align: center;
}

.reports-table tbody tr:hover[b-35sfziq1iu] {
    background-color: var(--gray-50);
}

/* =====================================================
   Skeleton Loading Styles
   ===================================================== */

.skeleton[b-35sfziq1iu] {
    animation: skeleton-loading-b-35sfziq1iu 1.5s infinite ease-in-out;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading-b-35sfziq1iu {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-circle[b-35sfziq1iu] {
    border-radius: var(--radius-full);
}

.skeleton-line[b-35sfziq1iu] {
    border-radius: var(--radius-sm);
}

/* Skeleton Page Elements */
.skeleton-page-title[b-35sfziq1iu] {
    width: 250px;
    height: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
}

/* Skeleton Metric Cards */
.skeleton-metric-icon[b-35sfziq1iu] {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--spacing-md);
}

.skeleton-metric-value[b-35sfziq1iu] {
    width: 80px;
    height: var(--spacing-xl);
    margin: 0 auto var(--spacing-sm);
}

.skeleton-metric-title[b-35sfziq1iu] {
    width: 120px;
    height: var(--font-size-sm);
    margin: 0 auto;
}

/* Skeleton Charts */
.skeleton-chart-title[b-35sfziq1iu] {
    width: 180px;
    height: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.skeleton-chart-title-wide[b-35sfziq1iu] {
    width: 280px;
    height: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.skeleton-chart-title-narrow[b-35sfziq1iu] {
    width: 160px;
    height: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.skeleton-chart-area[b-35sfziq1iu] {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-md);
}

.skeleton-chart-area-large[b-35sfziq1iu] {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-md);
}

/* Skeleton Table Elements */
.skeleton-table-title[b-35sfziq1iu] {
    width: 150px;
    height: var(--font-size-lg);
}

.skeleton-table-header[b-35sfziq1iu] {
    width: 80px;
    height: var(--font-size-sm);
}

.skeleton-table-cell[b-35sfziq1iu] {
    width: 90px;
    height: var(--font-size-sm);
}

/* Skeleton Button */
.skeleton-button[b-35sfziq1iu] {
    width: 80px;
    height: 32px;
    border-radius: var(--radius-sm);
}

/* Skeleton Donor List */
.skeleton-donor-name[b-35sfziq1iu] {
    width: 140px;
    height: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.skeleton-donor-type[b-35sfziq1iu] {
    width: 80px;
    height: var(--font-size-xs);
}

.skeleton-donor-amount[b-35sfziq1iu] {
    width: 70px;
    height: var(--font-size-sm);
}

/* Skeleton Export Buttons */
.skeleton-export-button[b-35sfziq1iu] {
    width: 100%;
    height: 38px;
    border-radius: var(--radius-sm);
}
/* /Pages/ReportsList.razor.rz.scp.css */
.reports-container[b-gdo0qfhnzf] {
	padding: var(--spacing-md);
	max-width: 1400px;
	margin: 0 auto;
}

/* Page Header - Following standard pattern from other pages */
/* Use negative margins to extend full width within the container */
.page-header[b-gdo0qfhnzf] {
	background: var(--gradient-card);
	margin-left: calc(-0.75 * var(--spacing-md));
	margin-right: calc(-0.75 * var(--spacing-md));
	margin-bottom: 1em;
	padding: var(--spacing-md);
	border-radius: var(--border-radius);
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-content[b-gdo0qfhnzf] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.page-title[b-gdo0qfhnzf] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.page-title i[b-gdo0qfhnzf] {
	color: var(--text-light);
	opacity: 0.9;
}

.page-description[b-gdo0qfhnzf] {
	font-size: var(--font-size-base);
	color: var(--text-light);
	margin: 0;
	opacity: 0.9;
}

/* Loading State */
.loading-container[b-gdo0qfhnzf] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xxl);
	gap: var(--spacing-md);
}

.spinner[b-gdo0qfhnzf] {
	width: 48px;
	height: 48px;
	border: 4px solid var(--border-color);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin-b-gdo0qfhnzf 1s linear infinite;
}

@keyframes spin-b-gdo0qfhnzf {
	to {
		transform: rotate(360deg);
	}
}

/* Error State */
.error-message[b-gdo0qfhnzf] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-lg);
	background-color: var(--error-background, #ffebee);
	border: 1px solid var(--error-color, #f44336);
	border-radius: var(--border-radius);
	color: var(--error-color, #f44336);
}

.error-message i[b-gdo0qfhnzf] {
	font-size: var(--font-size-xl);
}

.retry-button[b-gdo0qfhnzf] {
	margin-left: auto;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-weight: var(--font-weight-medium);
	transition: background-color 0.2s;
}

.retry-button:hover[b-gdo0qfhnzf] {
	background-color: var(--primary-hover);
}

/* Reports Section */
.reports-section[b-gdo0qfhnzf] {
	margin-bottom: var(--spacing-xxl);
	margin-top: var(--spacing-md);
	background: var(--card-background, white);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.reports-section:first-of-type[b-gdo0qfhnzf] {
	margin-top: 0;
}

.section-header[b-gdo0qfhnzf] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-sm);
	background: var(--background-primary);
	border-bottom: 1px solid var(--border-color);
}

.section-header i[b-gdo0qfhnzf] {
	font-size: var(--font-size-xl);
	color: var(--primary-color);
}

.section-header h2[b-gdo0qfhnzf] {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	margin: 0;
}

.report-count[b-gdo0qfhnzf] {
	margin-left: auto;
	padding: var(--spacing-xs) var(--spacing-sm);
	background-color: var(--badge-background, #e3f2fd);
	color: var(--badge-color, #1976d2);
	border-radius: var(--border-radius);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

/* Grid Styling */
.reports-grid[b-gdo0qfhnzf] {
	padding: var(--spacing-sm);
}

/* Syncfusion Grid Header Styling - Match Contributions table headers */
.reports-grid[b-gdo0qfhnzf]  .e-grid .e-columnheader .e-headercell {
	background: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
	border-bottom: 2px solid var(--gray-200) !important;
}

.reports-grid[b-gdo0qfhnzf]  .e-grid .e-headercell {
	font-weight: var(--font-weight-semibold, 600) !important;
}

.report-icon-cell[b-gdo0qfhnzf] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.report-icon-cell i[b-gdo0qfhnzf] {
	font-size: var(--font-size-xl);
	color: var(--primary-color);
}

/* Run Button */
.run-button[b-gdo0qfhnzf] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: transparent;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all 0.2s;
}

.run-button:hover[b-gdo0qfhnzf] {
	background-color: var(--primary-color);
	color: white;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.run-button:hover i[b-gdo0qfhnzf],
.run-button:hover span[b-gdo0qfhnzf] {
	color: white !important;
	opacity: 1 !important;
}

.run-button:active[b-gdo0qfhnzf] {
	transform: translateY(0);
}

.run-button i[b-gdo0qfhnzf] {
	font-size: var(--font-size-md);
	color: var(--primary-color);
	opacity: 1;
	transition: color 0.2s;
}

.run-button:hover i[b-gdo0qfhnzf] {
	color: white;
}

/* Empty State */
.empty-state[b-gdo0qfhnzf] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* padding: var(--spacing-xxl); */
	text-align: center;
	color: var(--text-secondary);
}

.empty-state i[b-gdo0qfhnzf] {
	font-size: 64px;
	color: var(--border-color);
	margin-bottom: var(--spacing-md);
}

.empty-state p[b-gdo0qfhnzf] {
	font-size: var(--font-size-lg);
	margin: 0 0 var(--spacing-xs) 0;
}

.empty-state small[b-gdo0qfhnzf] {
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
	.reports-container[b-gdo0qfhnzf] {
		padding: var(--spacing-md);
	}

	/* Maintain negative margins for full-width header on mobile */
	.page-header[b-gdo0qfhnzf] {
		margin-left: calc(-1 * var(--spacing-md));
		margin-right: calc(-1 * var(--spacing-md));
	}

	.section-header[b-gdo0qfhnzf] {
		flex-wrap: wrap;
	}

	.report-count[b-gdo0qfhnzf] {
		order: 3;
		width: 100%;
		text-align: center;
		margin-top: var(--spacing-sm);
	}

	.run-button span[b-gdo0qfhnzf] {
		display: none;
	}

	.run-button[b-gdo0qfhnzf] {
		padding: var(--spacing-sm);
	}
}
/* /Pages/ReportViewer.razor.rz.scp.css */
.report-viewer-container[b-iwb9yzbzhp] {
	padding: var(--spacing-md);
	max-width: 1600px;
	margin: 0 auto;
}

/* Loading State */
.loading-container[b-iwb9yzbzhp] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xxl);
	gap: var(--spacing-md);
	min-height: 400px;
}

.spinner[b-iwb9yzbzhp] {
	width: var(--spacing-2xl);
	height: var(--spacing-2xl);
	border: 0.25rem solid var(--border-color);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin-b-iwb9yzbzhp 1s linear infinite;
}

@keyframes spin-b-iwb9yzbzhp {
	to {
		transform: rotate(360deg);
	}
}

/* Error State */
.error-message[b-iwb9yzbzhp] {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-lg);
	background-color: var(--error-background, #ffebee);
	border: 1px solid var(--error-color, #f44336);
	border-radius: var(--border-radius);
	color: var(--error-color, #f44336);
	margin-bottom: var(--spacing-lg);
}

.error-message i[b-iwb9yzbzhp] {
	font-size: var(--font-size-xl);
}

/* Report Header */
.report-header[b-iwb9yzbzhp] {
	background: var(--gradient-card);
	margin-bottom: var(--spacing-md);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
}

.header-content[b-iwb9yzbzhp] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-1);
	flex: 1;
	margin-left: var(--spacing-xs);
}

.report-title[b-iwb9yzbzhp] {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-light);
	margin: 0;
	display: flex;
	align-items: center;
	/* Use a defined spacing token so the icon and title have consistent gap */
	gap: var(--spacing-sm);
}

.report-title i[b-iwb9yzbzhp] {
	color: var(--text-light);
	opacity: 0.9;
}

.report-subtitle[b-iwb9yzbzhp] {
	font-size: var(--font-size-sm);
	color: var(--text-light);
	margin: 0;
	margin-left: var(--spacing-32);
	opacity: 0.95;
}

.report-header-back-button[b-iwb9yzbzhp] {
	width: var(--form-control-height);
	height: var(--form-control-height);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: transparent;
	color: var(--text-light);
	border: 1px solid var(--outline-light-border);
	/* Match Activity/Edit modal back button radius for visual consistency */
	border-radius: var(--radius-md); /* 8px */
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
	flex-shrink: 0;
}

.report-header-back-button:hover[b-iwb9yzbzhp] {
	background-color: var(--overlay-hover-light);
	border-color: var(--overlay-white);
}

.report-header-back-button:focus-visible[b-iwb9yzbzhp] {
	outline: 2px solid var(--overlay-white);
	outline-offset: 2px;
}

.report-header-back-button i[b-iwb9yzbzhp] {
	font-size: var(--font-size-sm);
}

/* Back Button */
.back-button[b-iwb9yzbzhp] {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--overlay-light);
	color: var(--text-light);
	border: 1px solid var(--outline-light-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all 0.2s;
	white-space: nowrap;
}

.back-button:hover[b-iwb9yzbzhp] {
	background-color: var(--overlay-hover-light);
	border-color: var(--overlay-white);
}

.back-button i[b-iwb9yzbzhp] {
	font-size: var(--font-size-md);
}

/* Retry Button */
.retry-button[b-iwb9yzbzhp] {
	margin-left: auto;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--primary-color);
	color: white;
	border: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	font-weight: var(--font-weight-medium);
	transition: background-color 0.2s;
}

.retry-button:hover[b-iwb9yzbzhp] {
	background-color: var(--primary-hover);
}

/* Filter Section */
.filter-section[b-iwb9yzbzhp] {
	margin-bottom: var(--spacing-lg);
}

/* Grid Section */
.grid-section[b-iwb9yzbzhp] {
	background: var(--card-background, white);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
	.report-viewer-container[b-iwb9yzbzhp] {
		padding: var(--spacing-md);
	}

	.header-content[b-iwb9yzbzhp] {
		flex-direction: column;
		align-items: flex-start;
		margin-left: 0;
	}

	.report-title[b-iwb9yzbzhp] {
		font-size: var(--font-size-xl);
	}

	.back-button span[b-iwb9yzbzhp] {
		display: none;
	}

	.back-button[b-iwb9yzbzhp] {
		padding: var(--spacing-sm);
	}
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* Reset Password Component Styles - Matching Login Page Design */

/* Full screen background image */
.login-background[b-i14yvn92mq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    height: 100%;
    z-index: 1;
}

.login-background-image[b-i14yvn92mq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login-content[b-i14yvn92mq] {
    position: fixed;
    top: 50%;
    left: 220px;
    transform: translateY(-50%);
    width: 100%;
    max-width: 450px;
    z-index: 10;
    padding: var(--spacing-2xl);
}

.brand-logo[b-i14yvn92mq] {
    margin-bottom: var(--spacing-3xl);
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-logo .logo[b-i14yvn92mq] {
    height: var(--spacing-3xl);
    width: auto;
}

.reset-icon-container[b-i14yvn92mq] {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary-color-light) 0%, var(--primary-color) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.reset-icon-container i[b-i14yvn92mq] {
    font-size: 2.5rem;
    color: var(--white);
}

.login-header[b-i14yvn92mq] {
    margin-bottom: var(--spacing-2xl);
}

.login-header h2[b-i14yvn92mq] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-align: left;
}

.subtitle[b-i14yvn92mq] {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: 0;
    line-height: var(--line-height-normal);
}

/* Form styling */
.login-form[b-i14yvn92mq] {
    width: 100%;
}

.form-group[b-i14yvn92mq] {
    margin-bottom: var(--spacing-lg);
}

.form-group .form-label[b-i14yvn92mq],
.form-group label[b-i14yvn92mq] {
    display: block;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-lg);
}

.required[b-i14yvn92mq] {
    color: var(--danger-color);
}

.form-control[b-i14yvn92mq] {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-2xl);
    background: var(--white);
    transition: var(--transition-normal);
    box-sizing: border-box;
}

.form-control:focus[b-i14yvn92mq] {
    outline: none;
    border-color: var(--input-border-color-focus);
    box-shadow: var(--shadow-focus);
}

.form-control[b-i14yvn92mq]::placeholder {
    color: var(--text-muted);
}

.form-control[readonly][b-i14yvn92mq],
.form-control:read-only[b-i14yvn92mq],
input.form-control[readonly][b-i14yvn92mq] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
    opacity: 1 !important;
}

.form-control:disabled[b-i14yvn92mq],
.form-control.readonly-field[b-i14yvn92mq],
input.form-control:disabled[b-i14yvn92mq] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #dee2e6 !important;
    opacity: 1 !important;
}

.password-input-wrapper[b-i14yvn92mq] {
    position: relative;
}

.password-input-wrapper .form-control[b-i14yvn92mq] {
    padding-right: 50px;
}

.password-toggle[b-i14yvn92mq] {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    transition: var(--transition-fast);
    font-size: var(--font-size-lg);
}

.password-toggle:hover[b-i14yvn92mq] {
    color: var(--primary-color);
}

.password-criteria-container[b-i14yvn92mq] {
    margin-top: var(--spacing-sm);
    position: relative;
}

.criteria-info[b-i14yvn92mq] {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.criteria-label[b-i14yvn92mq] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.weak-text[b-i14yvn92mq] {
    color: var(--danger-color);
    font-weight: var(--font-weight-semibold);
}

.criteria-tooltip-right[b-i14yvn92mq] {
    position: absolute;
    left: calc(100% + var(--spacing-md));
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    z-index: 1000;
    min-width: 350px;
    max-width: 400px;
}

.criteria-tooltip-right[b-i14yvn92mq]::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: var(--white);
    margin-right: -1px;
}

.criteria-tooltip-right[b-i14yvn92mq]::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 9px solid transparent;
    border-right-color: var(--border-color);
}

.tooltip-header-right[b-i14yvn92mq] {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
}

.tooltip-header-right strong[b-i14yvn92mq] {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.criteria-list-right[b-i14yvn92mq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.criteria-list-right li[b-i14yvn92mq] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.criteria-list-right li.met[b-i14yvn92mq] {
    color: var(--success-color);
}

.criteria-list-right li.met i[b-i14yvn92mq] {
    color: var(--success-color);
    font-size: var(--font-size-md);
    margin-top: 2px;
}

.criteria-list-right li.not-met[b-i14yvn92mq] {
    color: var(--danger-color);
}

.criteria-list-right li.not-met i[b-i14yvn92mq] {
    color: var(--danger-color);
    font-size: var(--font-size-md);
    margin-top: 2px;
}

.criteria-list-right li span[b-i14yvn92mq] {
    flex: 1;
    color: var(--text-primary);
}

/* Responsive: Show tooltip below on smaller screens */
@media (max-width: 1200px) {
    .criteria-tooltip-right[b-i14yvn92mq] {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + var(--spacing-sm));
        transform: none;
        min-width: auto;
    }

    .criteria-tooltip-right[b-i14yvn92mq]::before,
    .criteria-tooltip-right[b-i14yvn92mq]::after {
        display: none;
    }
}

/* Login/Submit button */
.btn-login[b-i14yvn92mq] {
    width: 100%;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--font-size-xl);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
    margin-top: var(--spacing-md);
}

.btn-login:hover:not(:disabled)[b-i14yvn92mq] {
    background: var(--primary-color-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-login:disabled[b-i14yvn92mq] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Alert messages */
.alert[b-i14yvn92mq] {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
}

.alert-success[b-i14yvn92mq] {
    background-color: var(--success-color-light);
    color: var(--success-color-dark);
    border: 1px solid var(--success-color);
}

.alert-danger[b-i14yvn92mq] {
    background-color: var(--danger-color-light);
    color: var(--danger-color-dark);
    border: 1px solid var(--danger-color);
}

/* Loading State */
.loading-state[b-i14yvn92mq] {
    text-align: center;
    padding: var(--spacing-2xl) 0;
}

.loading-state p[b-i14yvn92mq] {
    margin-top: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

/* Error State */
.error-state[b-i14yvn92mq] {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.error-state .alert[b-i14yvn92mq] {
    text-align: left;
    margin-bottom: var(--spacing-lg);
}

.error-state .btn-secondary[b-i14yvn92mq] {
    background: var(--gray-600);
    color: var(--white);
    border: none;
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    cursor: pointer;
    transition: var(--transition-normal);
}

.error-state .btn-secondary:hover[b-i14yvn92mq] {
    background: var(--gray-700);
}

/* Success State */
.success-state[b-i14yvn92mq] {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.success-icon[b-i14yvn92mq] {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    background: var(--success-color-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon i[b-i14yvn92mq] {
    font-size: 3rem;
    color: var(--success-color);
}

.success-state h3[b-i14yvn92mq] {
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.success-state .success-message[b-i14yvn92mq] {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xl);
}

/* Responsive design */
@media (max-width: 768px) {
    .login-content[b-i14yvn92mq] {
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90%;
        padding: var(--spacing-lg);
    }

    .login-header h2[b-i14yvn92mq] {
        font-size: var(--font-size-xl);
    }

    .subtitle[b-i14yvn92mq] {
        font-size: var(--font-size-md);
    }

    .form-control[b-i14yvn92mq] {
        font-size: var(--font-size-lg);
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .password-toggle[b-i14yvn92mq] {
        font-size: var(--font-size-md);
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* Limit dropdown height to show max 5 options */
.form-select[b-umbiwv8dex] {
    max-height: 200px !important;
    overflow-y: auto;
}

.form-select option[b-umbiwv8dex] {
    padding: var(--spacing-sm) var(--spacing-md);
}

/*
  Add visible separators between dropdown items. Note: styling of native <option>
  elements is limited and varies between browsers. This CSS is a best-effort
  approach that works in many modern browsers. For pixel-perfect, cross-browser
  control consider replacing native <select> with a custom dropdown component.
*/
.form-select option[b-umbiwv8dex] {
    display: block;
    background-color: var(--white);
    border-bottom: 1px solid var(--gray-300);
}

.form-select option:last-child[b-umbiwv8dex] {
    border-bottom: none;
}

/* Ensure the focused select has a clear border and shadow that matches the theme */
.form-select:focus[b-umbiwv8dex] {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.12) !important;
    outline: none !important;
}

/* Payment Settings disabled field styling */
.form-control:disabled[b-umbiwv8dex] {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-300) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* Settings sections height alignment */
.settings-card[b-umbiwv8dex] {
    height: 100%;
    min-height: 450px;
}

.settings-card .card-body[b-umbiwv8dex] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.settings-form-wrapper[b-umbiwv8dex] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.settings-actions[b-umbiwv8dex] {
    margin-top: auto;
    padding-top: var(--spacing-md);
}

/* Button styling to match design - specific to this page */
.btn-primary[b-umbiwv8dex], .btn-secondary[b-umbiwv8dex] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    font-weight: 500;
}

.btn-primary:hover[b-umbiwv8dex], .btn-secondary:hover[b-umbiwv8dex],
.btn-primary:focus[b-umbiwv8dex], .btn-secondary:focus[b-umbiwv8dex],
.btn-primary:active[b-umbiwv8dex], .btn-secondary:active[b-umbiwv8dex] {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
    color: var(--text-light) !important;
}

/* Radio button styling to match blue color */

/* Prefer using accent-color where available so the inner dot and border match the theme */
.form-check-input[b-umbiwv8dex] {
    /* Use CSS variable if available; fallback to bootstrap primary */
    accent-color: var(--primary-color);
}

/* Fallbacks for browsers that don't support accent-color */
.form-check-input:checked[b-umbiwv8dex] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.form-check-input:focus[b-umbiwv8dex] {
    border-color: color-mix(in srgb, var(--primary-color) 60%, #86b7fe) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.18) !important;
}

.form-check-input:checked:focus[b-umbiwv8dex] {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.notification-toast[b-umbiwv8dex] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--spacing-xl);
    min-width: 320px;
    max-width: 90%;
    z-index: var(--z-modal);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    animation: slideUp-b-umbiwv8dex 0.3s ease-out;
}

/* Custom notification colors - using CSS variables from variables.css */
.notification-success[b-umbiwv8dex] {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--text-light) !important;
}

.notification-error[b-umbiwv8dex] {
    background-color: var(--error-color) !important;
    border-color: var(--error-color) !important;
    color: var(--text-light) !important;
}

@keyframes slideUp-b-umbiwv8dex {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}
/* Settings Page Styles */
.settings-container[b-umbiwv8dex] {
  min-height: calc(100vh - 180px);
  padding: var(--spacing-sm);
}

.settings-container .container-fluid[b-umbiwv8dex] {
  min-height: 100%;
}

/* Settings cards */
.settings-card[b-umbiwv8dex] {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-md);
}

.settings-card-header[b-umbiwv8dex],
.card-header[b-umbiwv8dex] {
  background: var(--gradient-primary);
  color: var(--text-light);
  padding: var(--spacing-sm);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}


.settings-card-body[b-umbiwv8dex] {
  padding: var(--spacing-lg);
}

/* Use the exact header/primary color for Save buttons so they match visually */
.btn-save-header[b-umbiwv8dex] {
    background: var(--gradient-primary) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--gradient-primary) !important;
    box-shadow: 0 4px 10px rgba(var(--gradient-primary-rgb), 0.12);
}
.btn-save-header:hover[b-umbiwv8dex],
.btn-save-header:focus[b-umbiwv8dex] {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.btn-save-header:active[b-umbiwv8dex] {
  transform: translateY(0);
}

/* Improve spacing for section headers (icon vs text and left edge) */
.card-header h5[b-umbiwv8dex] {
    display: flex;
    align-items: center; /* vertically center the heading content */
    gap: var(--spacing-sm); /* ensure icon and text have a consistent gap */
    padding-left: var(--spacing-md); /* add breathing room from the card edge */
    margin: 0; /* remove default margin to help vertical centering */
}

.card-header h5 i[b-umbiwv8dex] {
    margin-left: 0; /* keep icon flush within the header, gap above handles spacing */
}

/* File Input Styles - Logo Upload */
.file-input-wrapper[b-umbiwv8dex] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.file-input-box[b-umbiwv8dex] {
    display: flex;
    align-items: center;
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    height: 44px; /* match bootstrap form-control height */
    width: 100%;
    box-sizing: border-box;
    background-color: var(--white);
}

/* Validation: show red border like other fields */
.file-input-box.is-invalid[b-umbiwv8dex] {
    border-color: var(--bs-form-invalid-border-color) !important;
}

.file-input-box .choose-label[b-umbiwv8dex] {
    background: var(--gray-200);
    border-radius: var(--radius-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.file-input-box .filename[b-umbiwv8dex] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    flex: 1 1 auto;
}

.file-input-box .clear-btn[b-umbiwv8dex] {
    background: transparent;
    border: none;
    color: var(--danger-color);
    font-size: var(--font-size-lg) !important;
    padding: 0 var(--spacing-xs);
    margin-left: var(--spacing-sm);
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    z-index: 3 !important;
}

.file-input-box .clear-btn:hover[b-umbiwv8dex] {
    color: var(--danger-color);
    opacity: 0.8;
}



.logo-preview-img[b-umbiwv8dex] {
    height: 44px; 
    width: 44px; 
    object-fit: contain; 
    border-radius: var(--radius-sm);
}

/* Minimal: ensure datepicker inputs on Settings page match form heights */
/* Minimal: ensure Syncfusion date inputs in Settings are same height
   Use ::deep so Blazor CSS isolation doesn't block the rule. */
.settings-container[b-umbiwv8dex]  :is(.e-datepicker .e-input, .e-input-group .e-input, input.e-datepicker, .e-input-group .e-input-group-icon, .e-input-group .e-input-group-btn) {
    height: var(--form-control-height) !important;
}
/* /Pages/SettingsFinacs.razor.rz.scp.css */
:root[b-z2savozjtp] {
    /* fallbacks in case global variables not available */
    --ft-gl-color: #0d6efd;
    /* blue */
    --ft-ar-color: #198754;
    /* green */
    --ft-fund-color: #6f42c1;
    /* purple */
}

.ft-section[b-z2savozjtp] {
    border-left: 6px solid transparent;
    background-color: var(--bs-body-bg, #fff);
}

.ft-section .ft-icon[b-z2savozjtp] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.ft-section--gl[b-z2savozjtp] {
    border-left-color: var(--ft-gl-color);
}

.ft-section--ar[b-z2savozjtp] {
    border-left-color: var(--ft-ar-color);
}

.ft-section--fund[b-z2savozjtp] {
    border-left-color: var(--ft-fund-color);
}

/* small responsiveness */
@media (max-width: 576px) {
    .ft-section[b-z2savozjtp] {
        padding: .5rem !important;
    }

    .ft-section .ft-icon[b-z2savozjtp] {
        width: 22px;
        height: 22px;
    }
}

/* Added to support the section-card/section-title styling used in CreateActivity.razor */
.section-card[b-z2savozjtp] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--card-border-radius, .25rem);
    padding: var(--card-padding, 1rem);
    margin-bottom: var(--spacing-lg, 1rem);
    box-shadow: var(--card-shadow, none);
}

.section-card.purple[b-z2savozjtp] {
    border-left: 4px solid var(--ft-fund-color, #6f42c1);
}

.section-card.blue[b-z2savozjtp] {
    border-left: 4px solid var(--ft-gl-color, #0d6efd);
}

.section-card.green[b-z2savozjtp] {
    border-left: 4px solid var(--ft-ar-color, #198754);
}

.section-title[b-z2savozjtp] {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-md, .75rem);
}

/* Icon coloring inside section cards */
.section-card.purple .section-title i[b-z2savozjtp] {
    color: var(--ft-fund-color, #6f42c1) !important;
}

.section-card.blue .section-title i[b-z2savozjtp] {
    color: var(--ft-gl-color, #0d6efd) !important;
}

.section-card.green .section-title i[b-z2savozjtp] {
    color: var(--ft-ar-color, #198754) !important;
}

/* Ensure a fallback primary color for title icons */
.section-title i[b-z2savozjtp] {
    color: var(--primary-color, #0d6efd) !important;
}
/* /Pages/Shared/SelectContacts.razor.rz.scp.css */
/* SelectContacts.razor.css - Scoped styles for contact selection feature */

.select-contacts-container[b-l7yojjr5ih] {
    padding: var(--spacing-md);
    max-width: 1800px;
    margin: 0 auto;
}

.page-header[b-l7yojjr5ih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.page-header h3[b-l7yojjr5ih] {
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
}

.filter-and-results-section[b-l7yojjr5ih] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

.filters-and-results[b-l7yojjr5ih] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.card[b-l7yojjr5ih] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.card-header-gradient[b-l7yojjr5ih] {
    background: linear-gradient(135deg, var(--primary-color), var(--gradient-primary));
    color: var(--white);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-sm);
}

.card-header-gradient h5[b-l7yojjr5ih] {
    display: flex;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.card-body[b-l7yojjr5ih] {
    padding: var(--spacing-md);
}

/* Filter Header Row - Category and Add Filter Button */
.filter-header-row[b-l7yojjr5ih] {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
}

.category-section[b-l7yojjr5ih] {
    flex: 0 0 250px;
    min-width: 250px;
}

.add-filter-section[b-l7yojjr5ih] {
    flex: 0 0 auto;
}

.category-section .form-label[b-l7yojjr5ih] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* Filter Dropdown Styles */
.dropdown-menu[b-l7yojjr5ih] {
    max-height: 400px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.dropdown-header[b-l7yojjr5ih] {
    color: var(--primary-color);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-secondary);
}

.dropdown-item[b-l7yojjr5ih] {
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-fast);
}

.dropdown-item:hover:not(.disabled)[b-l7yojjr5ih] {
    background-color: var(--bg-hover);
}

.dropdown-item.disabled[b-l7yojjr5ih] {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Active Filters Grid - 3 Columns */
.active-filters-grid[b-l7yojjr5ih] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.filter-card[b-l7yojjr5ih] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.filter-card:hover[b-l7yojjr5ih] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.filter-card-header[b-l7yojjr5ih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-light);
}

.filter-label[b-l7yojjr5ih] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.btn-remove[b-l7yojjr5ih] {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    padding: 0;
    font-size: var(--font-size-base);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.btn-remove:hover[b-l7yojjr5ih] {
    background-color: var(--error-bg);
    transform: scale(1.1);
}

.filter-card-body[b-l7yojjr5ih] {
    width: 100%;
}

.filter-card-body .form-control[b-l7yojjr5ih],
.filter-card-body .form-select[b-l7yojjr5ih] {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
}

.results-list[b-l7yojjr5ih] {
    max-height: 500px;
    overflow-y: auto;
}

.result-item[b-l7yojjr5ih] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

.result-item:hover[b-l7yojjr5ih] {
    background-color: var(--bg-hover);
}

.result-item:last-child[b-l7yojjr5ih] {
    border-bottom: none;
}

.result-item.selected-item[b-l7yojjr5ih] {
    background-color: var(--success-bg);
}

.form-check-input:disabled[b-l7yojjr5ih] {
    cursor: not-allowed;
    opacity: 0.5;
}

.donor-info[b-l7yojjr5ih] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.donor-details[b-l7yojjr5ih] {
    margin-top: 4px;
}

.donor-details small[b-l7yojjr5ih] {
    color: var(--text-muted);
}

.donor-details span[b-l7yojjr5ih] {
    margin-right: var(--spacing-sm);
}

.selected-panel-card[b-l7yojjr5ih] {
    position: sticky;
    top: 20px;
}

.selected-donors-list[b-l7yojjr5ih] {
    max-height: 600px;
    overflow-y: auto;
}

.selected-donor-item[b-l7yojjr5ih] {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
}

.selected-donor-item:hover[b-l7yojjr5ih] {
    background-color: var(--bg-hover);
}

.selected-donor-item:last-child[b-l7yojjr5ih] {
    border-bottom: none;
}

.donor-info-full[b-l7yojjr5ih] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.donor-header[b-l7yojjr5ih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.donor-meta[b-l7yojjr5ih] {
    padding-left: var(--spacing-sm);
}

.donor-meta small div[b-l7yojjr5ih] {
    margin-bottom: 2px;
}

.pagination-section[b-l7yojjr5ih] {
    background-color: var(--bg-light);
}

.pagination .page-link[b-l7yojjr5ih] {
    color: var(--primary-color);
    border-color: var(--border-color);
}

.pagination .page-item.active .page-link[b-l7yojjr5ih] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination .page-item.disabled .page-link[b-l7yojjr5ih] {
    color: var(--text-muted);
    cursor: not-allowed;
}

.badge[b-l7yojjr5ih] {
    font-size: 0.75rem;
    padding: 0.25em 0.6em;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .active-filters-grid[b-l7yojjr5ih] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .filter-and-results-section[b-l7yojjr5ih] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .filter-and-results-section[b-l7yojjr5ih] {
        grid-template-columns: 1fr;
    }

    .selected-panel-card[b-l7yojjr5ih] {
        position: relative;
        top: 0;
    }

    .selected-donors-list[b-l7yojjr5ih] {
        max-height: 400px;
    }

    .active-filters-grid[b-l7yojjr5ih] {
        grid-template-columns: 1fr;
    }

    .filter-header-row[b-l7yojjr5ih] {
        flex-direction: column;
        align-items: stretch;
    }

    .category-section[b-l7yojjr5ih] {
        flex: 1 1 auto;
        min-width: 100%;
    }

    .add-filter-section[b-l7yojjr5ih] {
        width: 100%;
    }

    .add-filter-section .btn[b-l7yojjr5ih] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .select-contacts-container[b-l7yojjr5ih] {
        padding: var(--spacing-sm);
    }

    .page-header[b-l7yojjr5ih] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .page-header button[b-l7yojjr5ih] {
        width: 100%;
    }

    .card-body[b-l7yojjr5ih] {
        padding: var(--spacing-sm);
    }

    .result-item[b-l7yojjr5ih] {
        padding: var(--spacing-sm);
    }

    .selected-donor-item[b-l7yojjr5ih] {
        padding: var(--spacing-sm);
    }

    .donor-info[b-l7yojjr5ih] {
        flex-direction: column;
        align-items: flex-start;
    }

    .donor-details span[b-l7yojjr5ih] {
        display: block;
        margin-top: 4px;
    }

    .filter-card[b-l7yojjr5ih] {
        padding: var(--spacing-xs);
    }

    .filter-card-body .form-control[b-l7yojjr5ih],
    .filter-card-body .form-select[b-l7yojjr5ih] {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 576px) {
    .select-contacts-container[b-l7yojjr5ih] {
        padding: var(--spacing-xs);
    }

    .results-list[b-l7yojjr5ih] {
        max-height: 350px;
    }

    .selected-donors-list[b-l7yojjr5ih] {
        max-height: 300px;
    }

    .pagination .page-link[b-l7yojjr5ih] {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Loading and Empty States */
.text-center[b-l7yojjr5ih] {
    text-align: center;
}

.text-muted[b-l7yojjr5ih] {
    color: var(--text-muted) !important;
}

.spinner-border[b-l7yojjr5ih] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

.spinner-border-sm[b-l7yojjr5ih] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* Custom Scrollbar */
.results-list[b-l7yojjr5ih]::-webkit-scrollbar,
.selected-donors-list[b-l7yojjr5ih]::-webkit-scrollbar {
    width: 8px;
}

.results-list[b-l7yojjr5ih]::-webkit-scrollbar-track,
.selected-donors-list[b-l7yojjr5ih]::-webkit-scrollbar-track {
    background: var(--bg-light);
}

.results-list[b-l7yojjr5ih]::-webkit-scrollbar-thumb,
.selected-donors-list[b-l7yojjr5ih]::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.results-list[b-l7yojjr5ih]::-webkit-scrollbar-thumb:hover,
.selected-donors-list[b-l7yojjr5ih]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-dark);
}
/* /Pages/Templates.razor.rz.scp.css */
.templates-container[b-90zdqf1f90] {
	padding: var(--spacing-sm);
}

.page-header[b-90zdqf1f90] {
	margin-bottom: var(--spacing-md);
}

.page-header h3[b-90zdqf1f90] {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	margin: 0;
}

.card-header-gradient[b-90zdqf1f90] {
	background: var(--gradient-primary);
	color: var(--text-light);
	padding: var(--spacing-md);
}

.card-header-gradient .card-title[b-90zdqf1f90] {
	margin: 0;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
}

.default-template[b-90zdqf1f90] {
	background-color: var(--bg-highlight, #f8f9ff);
}

.default-template:hover[b-90zdqf1f90] {
	background-color: var(--bg-hover);
}

.form-check-input:disabled[b-90zdqf1f90] {
	opacity: 0.7;
}

.btn-xs[b-90zdqf1f90] {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}

/* Table column styling */
.table[b-90zdqf1f90] {
	margin: 0;
	font-size: 0.9em;
}

.table thead th:first-child[b-90zdqf1f90],
.table tbody td:first-child[b-90zdqf1f90] {
	padding-left: var(--spacing-md) !important;
}

.table thead th[b-90zdqf1f90] {
	background: var(--bg-secondary);
	border-bottom: 2px solid var(--gray-200);
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold, 600);
	padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.table thead th:last-child[b-90zdqf1f90],
.table tbody td:last-child[b-90zdqf1f90] {
	padding-right: var(--spacing-md) !important;
}

.table thead th:nth-child(2)[b-90zdqf1f90],
.table tbody td:nth-child(2)[b-90zdqf1f90] {
	max-width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Type pill styling */
.type-pill[b-90zdqf1f90] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px; /* fixed height to give a square/box feel */
	min-width: 56px; /* ensure a comfortable width for short text */
	padding: 0 10px;
	border-radius: 6px; /* small radius for slight rounding */
	background-color: rgba(153, 102, 255, 0.12); /* light purple */
	color: #6f42c1; /* purple text */
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-transform: none;
}

/* Sticky header styling */
.table thead.sticky-top[b-90zdqf1f90] {
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure table scrolls within container */
.card-body[b-90zdqf1f90] {
	overflow: hidden;
}

/* Footer styling */
.card-footer[b-90zdqf1f90] {
	background-color: white;
	border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.type-pill-default[b-90zdqf1f90] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px; /* fixed height to give a square/box feel */
	min-width: 56px; /* ensure a comfortable width for short text */
	padding: 0 10px;
	border-radius: 6px; /* small radius for slight rounding */
	background-color: rgba(
		var(--primary-rgb),
		0.12
	); /* subtle primary-blue background */
	color: var(--primary-color); /* primary blue text */
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-transform: none;
}

/* Pagination Color Styling - Use Primary Blue */
.pagination .page-item.active .page-link[b-90zdqf1f90] {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

.pagination .page-link:hover[b-90zdqf1f90] {
	background-color: var(--primary-color-light);
	border-color: var(--primary-color-light);
}



/* Templates page: the left filter card does not use .filters-panel class, target its column explicitly */
.templates-container .col-md-2 > .card > .card-header[b-90zdqf1f90] {
	border-bottom: 1px solid var(--border-color, #dee2e6) !important;
	min-height: var(--card-header-height) !important;
	height: var(--card-header-height) !important;
	padding: var(--spacing-md) !important;
	box-sizing: border-box !important;
}

/* Templates page: force right column header to match left header height/padding */
.templates-container .col-md-10 > .card > .card-header[b-90zdqf1f90] {
	border-bottom: 1px solid var(--border-color, #dee2e6) !important;
	min-height: var(--card-header-height) !important;
	height: var(--card-header-height) !important;
	padding: var(--spacing-md) !important;
	box-sizing: border-box !important;
}
/* /Pages/TenantSelection.razor.rz.scp.css */
.tenant-selection-container[b-s5uq7g0n8a] {
  min-height: 100vh;
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.tenant-selection-content[b-s5uq7g0n8a] {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-3xl);
  max-width: 800px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border-color);
}

.brand-header[b-s5uq7g0n8a] {
  margin-bottom: var(--spacing-xl);
}

.brand-header .logo[b-s5uq7g0n8a] {
  height: 48px;
  margin-bottom: var(--spacing-md);
}

.brand-header h2[b-s5uq7g0n8a] {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-2xl);
}

.brand-header .subtitle[b-s5uq7g0n8a] {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
}

.loading-container[b-s5uq7g0n8a] {
  padding: var(--spacing-3xl) 0;
  color: var(--text-secondary);
}

.no-tenants-container[b-s5uq7g0n8a] {
  padding: var(--spacing-xl) 0;
}

.tenants-grid[b-s5uq7g0n8a] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.tenant-card[b-s5uq7g0n8a] {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  cursor: pointer;
  transition: var(--transition-all);
  background: var(--bg-card);
  position: relative;
}

.tenant-card:hover[b-s5uq7g0n8a] {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.tenant-card.selected[b-s5uq7g0n8a] {
  border-color: var(--primary-color);
  background: var(--bg-highlight);
  box-shadow: var(--shadow-md);
}

.tenant-avatar[b-s5uq7g0n8a] {
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
}

.tenant-info h4[b-s5uq7g0n8a] {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-lg);
}

.tenant-slug[b-s5uq7g0n8a] {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.tenant-actions[b-s5uq7g0n8a] {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
}

.continue-section[b-s5uq7g0n8a] {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.btn-primary[b-s5uq7g0n8a] {
  color: var(--text-light);
  background-color: var(--primary-color);
  border: none;
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  font-weight: var(--btn-font-weight);
  transition: var(--transition-all);
  font-size: var(--font-size-base);
}

.btn-primary:hover[b-s5uq7g0n8a] {
  background-color: var(--primary-color-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.btn-primary:disabled[b-s5uq7g0n8a] {
  background-color: var(--gray-400);
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.secondary-actions .btn-link[b-s5uq7g0n8a] {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: var(--transition-fast);
}

.secondary-actions .btn-link:hover[b-s5uq7g0n8a] {
  color: var(--text-primary);
  text-decoration: underline;
}

.alert[b-s5uq7g0n8a] {
  border-radius: var(--radius-md);
  border: none;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.alert-warning[b-s5uq7g0n8a] {
  background-color: var(--warning-color);
  color: var(--white);
}

.alert-danger[b-s5uq7g0n8a] {
  background-color: var(--danger-color);
  color: var(--white);
}

@media (max-width: var(--breakpoint-md)) {
  .tenant-selection-container[b-s5uq7g0n8a] {
    padding: var(--spacing-lg);
  }

  .tenant-selection-content[b-s5uq7g0n8a] {
    padding: var(--spacing-xl);
    margin: var(--spacing-md);
  }

  .tenants-grid[b-s5uq7g0n8a] {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .tenant-card[b-s5uq7g0n8a] {
    padding: var(--spacing-lg);
  }
}

@media (max-width: var(--breakpoint-sm)) {
  .tenant-selection-container[b-s5uq7g0n8a] {
    padding: var(--spacing-md);
  }

  .tenant-selection-content[b-s5uq7g0n8a] {
    padding: var(--spacing-lg);
    margin: var(--spacing-sm);
  }

  .brand-header h2[b-s5uq7g0n8a] {
    font-size: var(--font-size-xl);
  }

  .brand-header .subtitle[b-s5uq7g0n8a] {
    font-size: var(--font-size-base);
  }
}
/* /Pages/UserManagement.razor.rz.scp.css */
/* User Management Page Styles */
.user-management-container[b-vzxe94k97f] {
  padding: var(--spacing-sm);
}

/* Remove left padding from bootstrap containers inside User Management
   so the panel stretches to the left edge as requested. */
.user-management-container .container[b-vzxe94k97f],
.user-management-container .container-fluid[b-vzxe94k97f] {
  padding-left: 0 !important;
}
/* Card styling consistent with campaigns */
.card-header-gradient[b-vzxe94k97f] {
  background: var(--gradient-primary);
  color: var(--text-light);
  border-bottom: none;
}

.card-header-gradient h6[b-vzxe94k97f] {
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

/* Filter panel styling */
.filters-panel .card[b-vzxe94k97f] {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.filters-panel .form-label[b-vzxe94k97f] {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.filters-panel .form-control[b-vzxe94k97f],
.filters-panel .form-select[b-vzxe94k97f] {
  border: 1px solid var(--input-border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.filters-panel .form-control:focus[b-vzxe94k97f],
.filters-panel .form-select:focus[b-vzxe94k97f] {
  border-color: var(--input-border-color-focus);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Users table container */
.users-table-container .card[b-vzxe94k97f] {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

/* Table styling */
.table-hover tbody tr:hover[b-vzxe94k97f] {
  background-color: var(--bg-highlight);
}

.table th[b-vzxe94k97f] {
  background-color: var(--bg-secondary);
  border-bottom: var(--spacing-xxs) solid var(--border-color);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
}

.table td[b-vzxe94k97f] {
  padding: var(--spacing-sm);
  vertical-align: middle;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
}

/* Badge styling */
.badge[b-vzxe94k97f] {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
}

.badge.bg-secondary[b-vzxe94k97f] {
  background-color: var(--text-secondary) !important;
}

.badge.bg-success[b-vzxe94k97f] {
  background-color: var(--success-color) !important;
}

.badge.bg-danger[b-vzxe94k97f] {
  background-color: var(--danger-color) !important;
}

.badge.bg-primary[b-vzxe94k97f] {
  background-color: var(--primary-color) !important;
}

/* Role Pills - Clean design similar to donor type pills */
.role-pill[b-vzxe94k97f] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xxs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary-color-dark);
  white-space: nowrap;
}

/* Individual role colors with subtle backgrounds */
.role-pill.role-admin[b-vzxe94k97f] {
  background: rgba(232, 62, 140, 0.08);
  color: #c7254e;
}

.role-pill.role-auditor[b-vzxe94k97f] {
  background: rgba(23, 162, 184, 0.08);
  color: #117a8b;
}

.role-pill.role-people-manager[b-vzxe94k97f] {
  background: rgba(0, 123, 255, 0.08);
  color: #0056b3;
}

.role-pill.role-donation-manager[b-vzxe94k97f] {
  background: rgba(40, 167, 69, 0.08);
  color: #1e7e34;
}

.role-pill.role-activity-manager[b-vzxe94k97f] {
  background: rgba(255, 193, 7, 0.12);
  color: #d39e00;
}

.role-pill.role-campaign-manager[b-vzxe94k97f] {
  background: rgba(108, 117, 125, 0.08);
  color: #495057;
}

.role-pill.role-application-manager[b-vzxe94k97f] {
  background: rgba(111, 66, 193, 0.08);
  color: #5a32a3;
}

.role-pill.role-fundraiser-manager[b-vzxe94k97f] {
  background: rgba(253, 126, 20, 0.08);
  color: #dc6502;
}

.role-pill.role-user[b-vzxe94k97f] {
  background: rgba(52, 58, 64, 0.08);
  color: #343a40;
}

/* Role text - plain blue text without background */
.role-text[b-vzxe94k97f] {
  color: var(--primary-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-right: var(--spacing-xs);
}

/* Active user count - no background */
.active-user-count[b-vzxe94k97f] {
  color: var(--text-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Button group styling */
.btn-group-sm .btn[b-vzxe94k97f] {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-xs);
}

.btn-outline-primary:hover[b-vzxe94k97f] {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Pagination styling */
.pagination-sm .page-link[b-vzxe94k97f] {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.pagination .page-item.active .page-link[b-vzxe94k97f] {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Empty state styling */
.text-center.py-5[b-vzxe94k97f] {
  padding: var(--spacing-2xl) 0;
}

.text-center.py-5 i[b-vzxe94k97f] {
  opacity: 0.5;
}

/* Breadcrumb styling */
.breadcrumb-nav .breadcrumb[b-vzxe94k97f] {
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
}

.breadcrumb-nav .breadcrumb-item+.breadcrumb-item[b-vzxe94k97f]::before {
  content: ">";
  color: var(--text-secondary);
}

.breadcrumb-nav .breadcrumb-item a[b-vzxe94k97f] {
  color: var(--primary-color);
  text-decoration: none;
}

.breadcrumb-nav .breadcrumb-item a:hover[b-vzxe94k97f] {
  text-decoration: underline;
}

.breadcrumb-nav .breadcrumb-item.active[b-vzxe94k97f] {
  color: var(--text-secondary);
}

/* Modal styling */
.modal-overlay[b-vzxe94k97f] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--spacing-md);
}

.modal-content[b-vzxe94k97f] {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header[b-vzxe94k97f] {
  background: var(--gradient-primary);
  color: var(--text-light);
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h3[b-vzxe94k97f] {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.modal-header .btn-close[b-vzxe94k97f] {
  filter: invert(1);
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--spacing-xs);
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.modal-header .btn-close:hover[b-vzxe94k97f] {
  background: var(--overlay-hover-light);
}

.modal-body[b-vzxe94k97f] {
  padding: var(--spacing-lg);
  background: var(--bg-card);
}

.modal-body .card-header[b-vzxe94k97f] {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.modal-body .fw-bold.text-muted[b-vzxe94k97f] {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-xs);
}

.modal-actions[b-vzxe94k97f] {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Force left and right card headers to match height/padding on User Management page */
.user-management-container .col-md-2 > .card > .card-header[b-vzxe94k97f],
.user-management-container .col-md-10 > .card > .card-header[b-vzxe94k97f] {
  border-bottom: 1px solid var(--border-color, #dee2e6) !important;
  min-height: var(--card-header-height) !important;
  height: var(--card-header-height) !important;
  padding: var(--spacing-md) !important;
  box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-md)) {
  .user-management-container .row[b-vzxe94k97f] {
    margin: 0;
  }

  .col-md-2[b-vzxe94k97f],
  .col-md-10[b-vzxe94k97f] {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: var(--spacing-md);
  }

  .col-md-2[b-vzxe94k97f] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .col-md-10[b-vzxe94k97f] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .d-flex.justify-content-between[b-vzxe94k97f] {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .pagination[b-vzxe94k97f] {
    justify-content: center;
  }

  /* Modal responsive */
  .modal-content[b-vzxe94k97f] {
    margin: var(--spacing-sm);
    max-width: calc(100% - var(--spacing-md));
    max-height: calc(100vh - var(--spacing-md));
  }

  .modal-actions[b-vzxe94k97f] {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .modal-actions .btn[b-vzxe94k97f] {
    width: 100%;
  }

  .modal-body .row>.col-md-6[b-vzxe94k97f] {
    margin-bottom: var(--spacing-md);
  }
}

/* Ensure left filter column and right content column stretch to same height
   so the card footers align on the User Management page */
.user-management-container .row[b-vzxe94k97f] {
  align-items: stretch;
}

.user-management-container .col-md-2[b-vzxe94k97f],
.user-management-container .col-md-10[b-vzxe94k97f] {
  display: flex;
  flex-direction: column;
}

.user-management-container .col-md-2 > .card[b-vzxe94k97f],
.user-management-container .col-md-10 > .card[b-vzxe94k97f] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.user-management-container .card > .card-body[b-vzxe94k97f] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.user-management-container .card .table-responsive[b-vzxe94k97f] {
  flex: 1 1 auto;
  min-height: 0;
}

.user-management-container .card .card-footer[b-vzxe94k97f] {
  margin-top: auto;
}