:root {
	--grey-color: rgb(128, 128, 132);
	--grey-color-20: rgba(128, 128, 132, .2);
	--grey-color-50: rgba(128, 128, 132, .5);
	--red-color: rgb(238, 46, 35);
	--yellow-color: rgb(246, 138, 49);
	--white: rgb(255, 255, 255);
	--bs-body-color: rgb(128, 128, 128);
	--black: rgb(0, 0, 0);
	/* 64px logo + 10px top/bottom padding + 1px bottom border (border-box) */
	--site-header-height: 85px;
}


body,
table,
th,
td,
input,
select,
body {
	color: var(--grey-color) !important;
}

.form-floating label {
	color: var(--grey-color-50) !important;
}

header {
	height: var(--site-header-height);
	border-bottom: thin solid var(--grey-color-20);
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--white);
}

#main-content-wrapper {
	margin-top: var(--site-header-height);
	padding-top: 1rem;
	margin-left: 0px;
	margin-right: 0px;
}


#alert-wrapper {
	position: absolute;
	top: 0px;
	padding-top: 30px;
	z-index: 100;
	pointer-events: none;
}

#alert-wrapper .alert {
	pointer-events: all;
}

a {
	color: var(--grey-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


a.btn:hover {
	text-decoration: none !important;
}

.clickable {
	cursor: pointer;
}

.pagination {
	color: var(--grey-color);
}

.pagination a,
.pagination a:hover {
	color: var(--grey-color);
	text-decoration: none;
}

.active>.page-link {
	color: var(--white);
	background-color: var(--red-color);
	border-color: var(--red-color);
}

.page-link:hover {
	background-color: var(--grey-color);
	border-color: var(--grey-color);
	color: var(--white) !important;
}

.min {
	white-space: nowrap;
	width: 1%;
}


.has-error {
	border-color: var(--bs-red);
}

.error-helper-message {
	color: var(--bs-red);
}

a.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s;
	padding: 6px;
}

a.icon:hover {
	background: var(--red-color);
	text-decoration: none;
	color: var(--white);
	font-weight: normal !important;
}

/* Flash toasts: compact corner notifications after redirects */
.flash-toast-container {
	z-index: 1090;
	pointer-events: none;
	max-width: min(24rem, calc(100vw - 1.5rem));
}

.flash-toast-container .flash-toast {
	pointer-events: auto;
	font-size: 0.875rem;
	box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.14);
}

.flash-toast__body {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.65rem 0.35rem 0.65rem 0.75rem;
	color: var(--black) !important;
	line-height: 1.35;
}

.flash-toast__icon {
	flex-shrink: 0;
	margin-top: 0.1rem;
	font-size: 0.95rem;
}

.flash-toast--success {
	background-color: #f3faf5;
	border-left: 3px solid #2e9b55 !important;
}

.flash-toast--success .flash-toast__icon {
	color: #2e9b55;
}

.flash-toast--info {
	background-color: #f6f7f8;
	border-left: 3px solid var(--grey-color) !important;
}

.flash-toast--info .flash-toast__icon {
	color: var(--grey-color);
}

.flash-toast--error {
	background-color: #fff5f4;
	border-left: 3px solid var(--red-color) !important;
}

.flash-toast--error .flash-toast__icon {
	color: var(--red-color);
}

.pre-scrollable {
	max-height: 340px;
	overflow-y: scroll;
}

/* Full-page thinking overlay (search, export, etc.); message set via JS */
.thinking-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
}
.thinking-overlay.show {
	display: flex !important;
}
.thinking-overlay .thinking-overlay-content {
	background: var(--white);
	color: var(--grey-color);
	padding: 1.5rem 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.thinking-overlay .spinner-border {
	color: var(--grey-color);
}

/* Interflex logo: full wordmark on wide screens, vertical mark when narrow. */
.interflex-logo-wrap {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.interflex-logo {
	height: 64px;
	width: auto;
	display: block;
}

.interflex-logo--mark {
	display: none;
}

@media (max-width: 990px) {
	.interflex-logo--full {
		display: none;
	}

	.interflex-logo--mark {
		display: block;
	}
}

/* Admin detail/view page card field grids (matches operator-type detail style). */
.detail-field-grid > div > .text-muted,
.detail-field-grid > .col > .text-muted {
	margin-bottom: 0.25rem;
}

/* Keep database IDs visually quiet (not the default code pink/red). */
code.detail-field__value {
	color: var(--grey-color);
}

.detail-field-grid .detail-field__value {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color);
}

.detail-field__value--wrap {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.detail-logo-preview {
	min-height: 160px;
}

.detail-logo-preview__img {
	max-height: 140px;
	max-width: 100%;
	object-fit: contain;
}

.detail-copy-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.detail-copy-row .detail-field__value {
	flex: 1 1 auto;
	min-width: 0;
}

.detail-copy-btn {
	flex: 0 0 auto;
	padding: 0.2rem 0.45rem;
	line-height: 1;
}

.detail-list-filter {
	width: min(22.5rem, 100%);
	flex: 1 1 14rem;
	max-width: 22.5rem;
}

/* Editable detail-field grids on create/edit pages (mirror view layout). */
.detail-field-grid .form-control,
.detail-field-grid .form-select,
.detail-field-grid .form-check-label,
.detail-field-grid .ts-wrapper,
.detail-field-grid .ts-control,
.detail-field-grid .ts-control input,
.detail-field-grid .ts-wrapper.single .ts-control .item,
.client-account-form .form-control,
.client-account-form .form-select,
.client-account-form .form-check-label,
.client-account-form .ts-wrapper,
.client-account-form .ts-control,
.client-account-form .ts-control input,
.client-account-form .ts-wrapper.single .ts-control .item,
.detail-field-checkbox-group .form-check-label {
	font-size: 1rem;
	color: var(--bs-body-color);
}

.detail-field-grid .form-control,
.detail-field-grid .form-select {
	width: 100%;
}

.detail-field-grid .input-group {
	width: 100%;
	flex-wrap: nowrap;
}

.detail-field-grid .input-group > .form-control,
.detail-field-grid .input-group > .form-select {
	width: 1%;
	flex: 1 1 auto;
}

.detail-field-grid .form-check {
	min-height: 1.5rem;
}

.detail-field-checkbox-group {
	background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.detail-field-grid > small.text-danger,
.detail-field-grid small.text-danger.d-block {
	margin-top: 0.25rem;
}

.detail-field-grid .ts-wrapper {
	width: 100%;
}

/* Tom Select menus (often portaled to body) match edit-form control size/color. */
.ts-dropdown,
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
	font-size: 1rem;
	color: var(--bs-body-color);
}

/* Hide clear (x) until a real single-select value is chosen. */
.ts-wrapper.single.plugin-clear_button:not(.has-items) .clear-button {
	display: none;
}

/* Optional primary/secondary/… badge chips via data-tomselect-badge */
.ts-wrapper.multi .ts-control .item.badge {
	border: 0;
	margin: 0.1rem 0.25rem 0.1rem 0;
	padding: 0.3em 0.55em;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1;
}
.ts-wrapper.multi .ts-control .item.badge.bg-primary {
	background-color: var(--bs-primary) !important;
	color: var(--bs-white, #fff) !important;
}
.ts-wrapper.multi .ts-control .item.badge .remove {
	border-left-color: rgba(255, 255, 255, 0.35);
	color: inherit;
}

/* Client Account form layout helpers */
.client-account-form .client-account-control-slot {
	min-height: calc(1.5em + 0.75rem + 2px);
	display: flex;
	align-items: center;
}

.client-account-form .client-account-uri-textarea {
	min-height: 4.25rem;
	height: 4.25rem;
	resize: vertical;
}

.client-account-form #scopes + .ts-wrapper .ts-control {
	min-height: 4.25rem;
	align-items: flex-start;
}

.client-account-form .client-account-advanced-header {
	text-align: left;
}

.client-account-form .client-account-advanced-header:hover,
.client-account-form .client-account-advanced-header:focus-visible {
	color: inherit !important;
}

.client-account-form .client-account-advanced-chevron {
	transition: transform 0.15s ease;
	font-size: 0.7rem;
	width: 0.85rem;
	text-align: center;
	color: var(--grey-color);
	flex-shrink: 0;
}

.client-account-form .client-account-advanced-chevron--open {
	transform: rotate(90deg);
}

.detail-field-checkbox-group .form-check {
	margin-bottom: 0.35rem;
}

.detail-field-checkbox-group .form-check:last-child {
	margin-bottom: 0;
}

/* Shared list/detail title-bar geometry — keep these in lockstep so the
   heading does not jump when navigating list → detail. */
.admin-list-header,
.detail-page-sticky-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	/* Button height + thin border + top/bottom cushion */
	min-height: calc(2.25rem + 2px + 0.75rem);
	margin: 0 0 0.5rem;
	padding: 0.375rem 0;
}

/* Sticky title + actions bar on admin detail/form pages (parks under fixed header). */
.detail-page-sticky-header {
	position: sticky;
	top: var(--site-header-height);
	z-index: 20;
	background: var(--white);
}

/* Zero-height sentinel used to detect when the sticky bar is stuck. */
.detail-page-sticky-sentinel {
	height: 1px;
	margin-bottom: -1px;
	pointer-events: none;
	visibility: hidden;
}

/* Hairline only while stuck — layout box unchanged. */
.detail-page-sticky-header.is-stuck {
	box-shadow: 0 1px 0 var(--grey-color-20);
}

.detail-page-sticky-header > :not(h3) {
	flex-shrink: 0;
}

.detail-page-sticky-header h3.mb-0 {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--black) !important;
}

.detail-page-sticky-header h3.mb-0 .text-muted {
	font-size: 0.95em;
	font-weight: 500;
	line-height: inherit;
	letter-spacing: inherit;
	color: var(--grey-color) !important;
}

.admin-list-header h3.mb-0 {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Same breadcrumb → title gap on list and detail pages. */
main:has(.detail-page-sticky-header) > #breadcrumb .breadcrumb,
main:has(.detail-page-sticky-header) > nav#breadcrumb .breadcrumb,
main:has(.admin-list-header) > #breadcrumb .breadcrumb,
main:has(.admin-list-header) > nav#breadcrumb .breadcrumb {
	margin-bottom: 0.75rem;
}

/* Detail/list page headings: same scale/weight as the BidAdvantage app. */
#main-content-wrapper > div > main h3.mb-0,
#main-content-wrapper main h3.mb-0,
#main-content-wrapper main .admin-list-header h3.mb-0 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--black) !important;
}

/* Detail/view page cards: translucent outline to match header buttons. */
#main-content-wrapper main .card {
	--bs-card-border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
	border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
}

#main-content-wrapper main .d-flex.align-items-center.justify-content-between .btn-outline-grey,
#main-content-wrapper main .detail-page-sticky-header .btn-outline-grey {
	--bs-btn-border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
}

/* Save / Create — Interflex brand red outline (same as logo / table headers). */
#main-content-wrapper main .detail-page-sticky-header .btn-outline-red,
.profile-form__actions .btn-outline-red {
	--bs-btn-color: var(--red-color);
	--bs-btn-border-color: var(--red-color);
	--bs-btn-hover-color: var(--white);
	--bs-btn-hover-bg: var(--red-color);
	--bs-btn-hover-border-color: var(--red-color);
	--bs-btn-active-color: var(--white);
	--bs-btn-active-bg: var(--red-color);
	--bs-btn-active-border-color: var(--red-color);
	color: var(--red-color);
	border-color: var(--red-color);
}

#main-content-wrapper main .detail-page-sticky-header .btn-outline-red:hover,
#main-content-wrapper main .detail-page-sticky-header .btn-outline-red:focus-visible,
#main-content-wrapper main .detail-page-sticky-header .btn-outline-red:active,
.profile-form__actions .btn-outline-red:hover,
.profile-form__actions .btn-outline-red:focus-visible,
.profile-form__actions .btn-outline-red:active {
	color: var(--white);
	background-color: var(--red-color);
	border-color: var(--red-color);
}

/* Detail action-bar toggle switch (matches operator-type lock switch). */
.op-type-lock-switch-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	min-height: 0;
	border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175));
	border-radius: var(--bs-border-radius);
	line-height: 1.5;
}

.op-type-lock-switch-wrap .form-check-input.op-type-lock-switch,
.op-type-lock-switch-wrap .form-check-input.op-type-enabled-switch {
	margin-left: 0;
	margin-top: 0;
	float: none;
}

.op-type-lock-switch-wrap .form-check-label {
	margin-bottom: 0;
	cursor: pointer;
}

/* Lock toggles mirror the status badge: green track when unlocked (off),
   red track when locked (on), with a white knob in both states for clarity. */
.form-check-input.op-type-lock-switch,
.form-check-input.op-type-enabled-switch {
	cursor: pointer;
	width: 2em;
	min-width: 2em;
	max-width: 2em;
	height: 1em;
	flex-shrink: 0;
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
	background-image: var(--bs-form-switch-bg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.form-check-input.op-type-lock-switch {
	background-color: var(--bs-success);
	border-color: var(--bs-success);
}

.form-check-input.op-type-lock-switch:focus {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input.op-type-lock-switch:checked {
	background-color: var(--bs-danger);
	border-color: var(--bs-danger);
	background-position: right center;
}

/* Enabled toggles mirror the status badge: red track when disabled (off),
   green track when enabled (on). */
.form-check-input.op-type-enabled-switch {
	background-color: var(--bs-danger);
	border-color: var(--bs-danger);
}

.form-check-input.op-type-enabled-switch:focus {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input.op-type-enabled-switch:checked {
	background-color: var(--bs-success);
	border-color: var(--bs-success);
	background-position: right center;
}

/* Scrollable sub-table inside a detail card body (e.g. Client Applications).
   No scrollbar-gutter reservation: it makes the sticky <thead> render one
   scrollbar-width wider than the scrolled body, so right-aligned header content
   (e.g. the Details column) no longer lines up with the rows beneath it. */
.detail-card-table-wrap.detail-card-table-wrap--body-scroll {
	max-height: 15rem;
	width: 100%;
	max-width: 100%;
	overflow-y: auto;
	overflow-x: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.detail-card-table-wrap--body-scroll > .detail-card-table--scrollable {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 0;
}

.detail-card-table-wrap--body-scroll > .detail-card-table--scrollable > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--grey-color);
}

/* A little horizontal cushion on detail sub-table cells (Client Applications, History)
   so the data isn't tucked against the edges. Row height is left at the table-sm default. */
.detail-card-table--scrollable > thead > tr > th,
.detail-card-table--scrollable > tbody > tr > td {
	padding-left: 1rem;
	padding-right: 1rem;
	vertical-align: middle;
}

/* ---- Audit history card (activity list) ---- */

.history-list-scroll {
	max-height: 15rem;
	width: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.history-list > li:not(:last-child) {
	border-bottom: thin solid var(--grey-color-20);
}

.history-list > li:nth-child(even) > .history-entry,
.history-list > li:nth-child(even) > .detail-activity-entry {
	background-color: rgba(128, 128, 132, 0.06);
}

/* Compact detail-card activity row (e.g. Client Applications on user view). */
.detail-activity-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 0.75rem;
	align-items: center;
	column-gap: 0.75rem;
	width: 100%;
	margin: 0;
	padding: 0.55rem 1rem;
	border: 0;
	background: transparent;
	text-align: left;
	text-decoration: none;
	color: var(--grey-color);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.detail-activity-entry:hover {
	background-color: var(--grey-color-20);
	color: var(--grey-color);
	text-decoration: none;
}

.detail-activity-entry:focus {
	outline: none;
}

.detail-activity-entry:focus-visible {
	outline: 2px solid var(--grey-color);
	outline-offset: -2px;
}

.detail-activity-entry-main {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	min-width: 0;
}

.detail-activity-entry-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.detail-activity-entry-meta {
	font-size: 0.8125rem;
	color: var(--grey-color-50);
	white-space: nowrap;
	flex: 0 0 auto;
}

.detail-activity-entry > .history-entry-chevron {
	grid-column: 3;
}

/* Users list on client-application detail: username | name | email | status | chevron */
.detail-activity-entry--user {
	grid-template-columns: minmax(6.5rem, 0.85fr) minmax(8rem, 1.1fr) minmax(10rem, 1.4fr) auto 0.75rem;
	column-gap: 1rem;
}

.detail-activity-entry--user .detail-activity-entry-title,
.detail-activity-entry--user .detail-activity-entry-name,
.detail-activity-entry--user .detail-activity-entry-meta {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.detail-activity-entry--user .detail-activity-entry-name {
	font-size: 1rem;
	font-weight: 500;
	color: var(--grey-color);
}

.detail-activity-entry--user .detail-activity-entry-name--empty {
	color: var(--grey-color-50);
	font-weight: 400;
}

.detail-activity-entry--user .detail-activity-entry-meta {
	flex: unset;
}

.detail-activity-entry--user > .history-entry-chevron {
	grid-column: 5;
}

@media (max-width: 767.98px) {
	.detail-activity-entry--user {
		grid-template-columns: minmax(0, 1fr) auto 0.75rem;
		row-gap: 0.15rem;
	}

	.detail-activity-entry--user .detail-activity-entry-title {
		grid-column: 1;
		grid-row: 1;
	}

	.detail-activity-entry--user .detail-activity-entry-name {
		grid-column: 1;
		grid-row: 2;
		font-size: 0.8125rem;
	}

	.detail-activity-entry--user .detail-activity-entry-meta {
		grid-column: 1;
		grid-row: 3;
	}

	.detail-activity-entry--user > .badge {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
	}

	.detail-activity-entry--user > .history-entry-chevron {
		grid-column: 3;
		grid-row: 1 / span 3;
		align-self: center;
	}
}

.history-entry {
	display: grid;
	grid-template-columns: 11rem minmax(4.5rem, 6.5rem) minmax(9rem, 1.4fr) minmax(5rem, 1fr) 0.75rem;
	align-items: center;
	column-gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 0.55rem 1rem;
	border: 0;
	background: transparent;
	text-align: left;
	color: var(--grey-color);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.history-entry:hover {
	background-color: var(--grey-color-20);
}

.history-entry:focus {
	outline: none;
}

.history-entry:focus-visible {
	outline: 2px solid var(--grey-color);
	outline-offset: -2px;
}

.history-entry-date {
	grid-column: 1;
	font-size: 1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.history-entry-user {
	grid-column: 2;
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.history-entry-change {
	grid-column: 3;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.history-entry-sep {
	flex: 0 0 auto;
	color: var(--grey-color-50);
	line-height: 1;
}

.history-entry-fields {
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.history-entry-fields--muted {
	font-weight: normal;
	color: var(--grey-color-50);
}

.history-entry-preview {
	grid-column: 4;
	font-size: 1rem;
	color: var(--grey-color-50);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	text-align: right;
}

.history-entry-preview--empty {
	visibility: hidden;
}

.history-entry-chevron {
	grid-column: 5;
	font-size: 0.7rem;
	color: var(--grey-color-50);
	justify-self: end;
}

/* Soft "Updated" badge — same greys as the rest of the admin UI. */
.history-badge-updated {
	background-color: var(--grey-color-20);
	color: var(--grey-color);
}

/* Stack when the card gets narrow. */
@media (max-width: 767.98px) {
	.history-entry {
		grid-template-columns: 1fr auto 0.75rem;
		grid-template-rows: auto auto auto;
		row-gap: 0.2rem;
		column-gap: 0.75rem;
		padding-top: 0.65rem;
		padding-bottom: 0.65rem;
	}

	.history-entry-date {
		grid-column: 1;
		grid-row: 1;
	}

	.history-entry-user {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	.history-entry-chevron {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
	}

	.history-entry-change {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.history-entry-preview,
	.history-entry-preview--empty {
		grid-column: 1 / -1;
		grid-row: 3;
		text-align: left;
	}

	.history-entry-preview--empty {
		display: none;
	}
}

.history-modal-dialog {
	width: min(36rem, calc(100% - 1.5rem));
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

.history-modal-dialog .modal-content {
	max-height: min(32rem, 72vh);
}

.history-modal .modal-header {
	align-items: flex-start;
	flex-shrink: 0;
	padding: 0.75rem 1rem;
	background: linear-gradient(180deg, rgba(133, 133, 137, 0.08) 0%, rgba(133, 133, 137, 0.02) 100%);
	border-bottom: 1px solid var(--grey-color-20);
}

.history-modal-heading {
	min-width: 0;
}

.history-modal .modal-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color);
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

.history-modal .modal-title .badge {
	font-size: 0.7rem;
	letter-spacing: 0.02em;
}

.history-modal-meta {
	font-size: 1rem;
	color: var(--grey-color-50);
}

.history-modal .modal-body > .alert {
	margin: 1rem;
}

.history-modal .modal-body > .text-muted {
	padding: 1.5rem 1rem;
}

.history-diff-table {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 0;
	color: var(--grey-color);
}

.history-diff-col-field {
	width: 30%;
}

.history-diff-col-before,
.history-diff-col-after {
	width: 35%;
}

.history-diff-table--initial .history-diff-col-field {
	width: 38%;
}

.history-diff-table--initial .history-diff-col-after {
	width: 62%;
}

.history-diff-table > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0.45rem 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grey-color);
	background: rgba(245, 245, 246, 1);
	border-bottom: 1px solid var(--grey-color-20);
	white-space: nowrap;
}

.history-diff-table > tbody > tr > td {
	padding: 0.4rem 0.75rem;
	font-size: 1rem;
	vertical-align: top;
	border-bottom: thin solid var(--grey-color-20);
}

.history-diff-table > tbody > tr:nth-child(even) > td {
	background-color: rgba(128, 128, 132, 0.06);
}

.history-diff-table > tbody > tr:last-child > td {
	border-bottom: 0;
}

.history-diff-field {
	font-weight: 600;
	color: var(--grey-color);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.history-diff-cell {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.history-diff-empty {
	color: var(--grey-color-50);
}

.history-diff-before {
	color: var(--grey-color-50);
	text-decoration: line-through;
}

.history-diff-after {
	font-weight: 600;
	color: var(--grey-color);
}

.history-diff-pre {
	margin: 0;
	padding: 0.5rem 0.65rem;
	max-height: 12rem;
	overflow: auto;
	font-size: 1rem;
	line-height: 1.45;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	color: var(--grey-color);
	background-color: rgba(128, 128, 132, 0.08);
	border-radius: var(--bs-border-radius);
	white-space: pre-wrap;
	word-break: break-word;
}

.history-diff-pre--before {
	color: var(--grey-color-50);
}

/* Sticky pagination bar at bottom of viewport. z-index below Bootstrap dropdown (1000)
   so dropdowns in the table (e.g. Actions, Per page) are not covered. */
.pagination-controls-sticky {
	position: sticky;
	bottom: 0;
	z-index: 10;
	background: var(--white);
	padding: 0.5rem 0;
	margin: 0 -0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* ==========================================================================
   Admin list pages: shared styling to match the operator-type list look
   (red selectable table, styled checkboxes, clickable rows, kebab actions).
   ========================================================================== */

/* Search + filter strip above list tables — default Bootstrap control/button size (1rem). */
.admin-list-toolbar {
	margin-bottom: 0.75rem;
}

.admin-list-toolbar .input-group .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Row / toolbar actions dropdown — share popup chrome with advanced-filters-menu */
.list-actions-menu {
	min-width: 12.5rem;
	padding: 0.35rem 0;
	border: 1px solid var(--grey-color-20);
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.list-actions-menu .dropdown-header,
.advanced-filters-menu > .dropdown-header {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grey-color);
	padding: 0.35rem 1rem 0.25rem;
	margin-bottom: 0;
}

.list-actions-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	font-size: 1rem;
	line-height: 1.25;
	padding: 0.4rem 1rem;
	color: var(--grey-color);
	background: transparent;
	border: 0;
	border-radius: 0;
	text-align: left;
}

/* Buttons used as dropdown items (toggle/lock/reset) must match <a> items —
   native button styles otherwise look washed-out / disabled. */
.list-actions-menu button.dropdown-item {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.list-actions-menu .dropdown-item:hover,
.list-actions-menu .dropdown-item:focus,
.list-actions-menu .dropdown-item:focus-visible {
	background-color: rgba(133, 133, 137, 0.12);
	color: var(--grey-color);
}

.list-actions-menu .dropdown-item:active {
	background-color: rgba(133, 133, 137, 0.18);
	color: var(--grey-color);
}

.list-actions-menu .dropdown-item > [class*="fa-"]:first-child {
	width: 1.125rem;
	text-align: center;
	flex-shrink: 0;
	color: var(--grey-color);
}

.list-actions-menu .dropdown-item.text-danger,
.list-actions-menu .dropdown-item.text-danger:hover,
.list-actions-menu .dropdown-item.text-danger:focus {
	color: var(--bs-danger);
}

.list-actions-menu .dropdown-item.text-danger > [class*="fa-"]:first-child,
.list-actions-menu .dropdown-item.text-danger:hover > [class*="fa-"]:first-child,
.list-actions-menu .dropdown-item.text-danger:focus > [class*="fa-"]:first-child {
	color: inherit;
}

.list-actions-menu .dropdown-divider {
	margin: 0.35rem 0;
	border-top-color: var(--grey-color-20);
	opacity: 1;
}

.list-actions-menu .list-actions-divider--destructive {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

/* Per-row actions (kebab) toggle */
.list-row-actions {
	display: inline-block;
}

.list-row-actions-toggle {
	border: 0;
	background: transparent;
	color: var(--grey-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	margin-top: -0.5rem;
	margin-bottom: -0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1;
	border-radius: 0.5rem;
	cursor: pointer;
}

.list-row-actions-toggle:hover,
.list-row-actions-toggle:focus-visible,
.list-row-actions-toggle.show {
	background-color: rgba(0, 0, 0, 0.06);
	color: var(--black);
}

.list-row-actions-toggle:focus-visible {
	outline: 2px solid var(--red-color);
	outline-offset: 1px;
}

/* Compact per-row kebab menu — same chrome, slightly tighter width */
.list-row-actions .list-actions-menu {
	min-width: 11.5rem;
}

.list-row-actions .list-actions-menu .dropdown-item {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.list-row-actions .list-actions-menu .dropdown-item > [class*="fa-"]:first-child {
	width: 1.125rem;
	font-size: 1rem;
}

/*
 * custom-bootstrap sets .table { overflow: hidden }, which becomes the sticky
 * containing block — top: site-header-height then parks the red thead mid-table.
 * Keep list tables / wrappers overflow:visible so thead sticks to the viewport
 * under the fixed site nav when the page scrolls.
 */
.table-responsive:has(> table.list-table-selectable) {
	overflow: visible;
}

#main-content-wrapper main table.table-client-red.list-table-selectable {
	overflow: visible;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--bs-border-radius);
}

/*
 * Round corners on the corner cells (overflow:hidden on .table would clip
 * radius but breaks sticky thead — so paint radius on the cells instead).
 */
#main-content-wrapper main table.table-client-red.list-table-selectable > thead > tr > th:first-child {
	border-top-left-radius: var(--bs-border-radius);
}

#main-content-wrapper main table.table-client-red.list-table-selectable > thead > tr > th:last-child {
	border-top-right-radius: var(--bs-border-radius);
}

#main-content-wrapper main table.table-client-red.list-table-selectable > tbody > tr:last-child > td:first-child {
	border-bottom-left-radius: var(--bs-border-radius);
}

#main-content-wrapper main table.table-client-red.list-table-selectable > tbody > tr:last-child > td:last-child {
	border-bottom-right-radius: var(--bs-border-radius);
}

/* Empty list: round the header’s bottom corners too. */
#main-content-wrapper main table.table-client-red.list-table-selectable:not(:has(tbody tr)) > thead > tr > th:first-child {
	border-bottom-left-radius: var(--bs-border-radius);
}

#main-content-wrapper main table.table-client-red.list-table-selectable:not(:has(tbody tr)) > thead > tr > th:last-child {
	border-bottom-right-radius: var(--bs-border-radius);
}

/* Let an open row dropdown escape any remaining clipping. */
.table-responsive.table-responsive--dropdown-open {
	overflow: visible;
}

/* Select column + checkbox cells */
.list-table-select-col {
	width: 2.15rem;
	max-width: 2.15rem;
	padding: 0 !important;
	vertical-align: middle;
	text-align: center;
}

/* Row index (#) — keep narrow next to the select column. */
.list-table-index-col {
	width: 2.15rem;
	max-width: 2.5rem;
	padding-left: 0.3rem !important;
	padding-right: 0.3rem !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.list-table-row-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.35rem;
	margin: 0;
	cursor: pointer;
}

.list-table-row-check--header {
	min-height: 2.5rem;
}

.list-table-selectable .list-table-row-checkbox,
.list-table-selectable .list-table-select-all {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	cursor: pointer;
	opacity: 1;
}

.list-table-selectable tbody .list-table-row-checkbox:hover,
.list-table-selectable tbody .list-table-select-all:hover {
	border-color: var(--grey-color);
}

.list-table-selectable tbody .list-table-row-checkbox:checked,
.list-table-selectable tbody .list-table-select-all:checked {
	background-color: #0d6efd;
	border-color: #0d6efd;
}

/* Select-all checkbox on the red table header: white box + blue check */
.table-client-red.list-table-selectable thead .form-check-input.list-table-row-checkbox,
.table-client-red.list-table-selectable thead .form-check-input.list-table-select-all {
	border: 2px solid var(--white);
	background-color: transparent;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.table-client-red.list-table-selectable thead .form-check-input.list-table-row-checkbox:hover,
.table-client-red.list-table-selectable thead .form-check-input.list-table-select-all:hover {
	border-color: var(--white);
	background-color: rgba(255, 255, 255, 0.28);
}

.table-client-red.list-table-selectable thead .form-check-input.list-table-row-checkbox:checked,
.table-client-red.list-table-selectable thead .form-check-input.list-table-select-all:checked {
	background-color: var(--white);
	border-color: var(--white);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230d6efd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.table-client-red.list-table-selectable thead .form-check-input.list-table-row-checkbox:indeterminate,
.table-client-red.list-table-selectable thead .form-check-input.list-table-select-all:indeterminate {
	background-color: var(--white);
	border-color: var(--white);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230d6efd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.table-client-red.list-table-selectable thead .form-check-input.list-table-row-checkbox:focus-visible,
.table-client-red.list-table-selectable thead .form-check-input.list-table-select-all:focus-visible {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.55);
	outline: none;
}

.list-table-selectable tbody .list-table-row-checkbox:focus-visible,
.list-table-selectable tbody .list-table-select-all:focus-visible {
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
	outline: none;
}

/* Clickable rows + scroll-to highlight */
.list-table-selectable tbody tr.clickable,
.list-table-selectable tbody tr.clickable-row {
	cursor: pointer;
}

.list-table-selectable tbody tr.list-table-row-highlight > td {
	background-color: rgba(133, 133, 137, 0.16) !important;
}

.list-table-selectable tbody tr.clickable:focus {
	outline: 2px solid var(--grey-color);
	outline-offset: -2px;
}

/* Red-header selectable table layout */
#main-content-wrapper main table.table-client-red.list-table-selectable th,
#main-content-wrapper main table.table-client-red.list-table-selectable td {
	padding: 0.625rem 0.75rem;
	vertical-align: middle;
}

#main-content-wrapper main table.table-client-red.list-table-selectable thead {
	--bs-table-bg: var(--red-color);
	--bs-table-color: var(--white);
	--bs-table-accent-bg: transparent;
}

#main-content-wrapper main table.table-client-red.list-table-selectable thead th {
	padding: 0.75rem 0.75rem;
	vertical-align: middle;
	background-color: var(--red-color) !important;
	color: var(--white) !important;
	box-shadow: none !important;
	/* Stick under the fixed site nav whenever the list scrolls past the viewport. */
	position: sticky;
	top: var(--site-header-height);
	z-index: 5;
}

#main-content-wrapper main table.table-client-red.list-table-selectable thead th a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	color: var(--white) !important;
	text-decoration: none;
}

#main-content-wrapper main table.table-client-red.list-table-selectable thead th a:hover {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.85);
}

#main-content-wrapper main table.table-client-red.list-table-selectable tbody td {
	font-weight: 400;
}

/* Long URLs / emails / joined lists — keep row heights even. */
#main-content-wrapper main table.table-client-red.list-table-selectable tbody td.list-table-truncate,
#main-content-wrapper main table.table-client-red.list-table-selectable tbody td.list-table-truncate > a {
	max-width: 16rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* Block avoids inline-block + whitespace strut making client-app URL rows taller. */
#main-content-wrapper main table.table-client-red.list-table-selectable tbody td.list-table-truncate > a {
	display: block;
	max-width: 100%;
	line-height: inherit;
}

#main-content-wrapper main table.table-client-red.list-table-selectable tbody td .badge {
	vertical-align: middle;
	line-height: 1.2;
}

#main-content-wrapper main table.table-client-red.list-table-selectable td.actions-cell {
	overflow: visible;
	width: 3rem;
	padding-left: 0.35rem !important;
	padding-right: 0.35rem !important;
}

/* ==========================================================================
   Advanced filters dropdown panel + toolbar actions menu (matches bidnetwork).
   ========================================================================== */

.advanced-filters-menu {
	width: min(52rem, 96vw);
	/* Match .list-actions-menu vertical rhythm around section headers. */
	padding: 0.35rem 0 0;
	border: 1px solid var(--grey-color-20);
	border-radius: 0.5rem;
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.advanced-filters-menu.advanced-filters-menu--cols-1 {
	width: min(24rem, 96vw);
}

.advanced-filters-menu--cols-1 .advanced-filters-panel .row > [class*="col-"] {
	flex: 0 0 100%;
	max-width: 100%;
}

.advanced-filters-menu.advanced-filters-menu--cols-2 {
	width: min(22rem, 96vw);
}

.advanced-filters-menu--cols-2 .advanced-filters-panel > .row.g-3 > [class*="col-"]:not(.col-12) {
	flex: 0 0 50%;
	max-width: 50%;
}

.advanced-filters-menu--cols-2 .advanced-filters-panel > .row.g-3 > .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

.advanced-filters-panel > .row.g-3 {
	align-items: stretch;
}

.advanced-filters-panel > .row.g-3 > [class*="col-"] {
	display: flex;
	flex-direction: column;
}

.advanced-filters-header,
#main-content-wrapper main .card.shadow-sm > .card-header.bg-transparent.border-bottom {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	background: linear-gradient(180deg, rgba(133, 133, 137, 0.08) 0%, rgba(133, 133, 137, 0.02) 100%);
	border-bottom: 1px solid var(--grey-color-20);
}

.advanced-filters-header-icon {
	flex-shrink: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--red-color) !important;
}

.advanced-filters-header-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color) !important;
	line-height: 1.3;
}

/* Detail/view page card headers: match the BidAdvantage operator-type cards. */
#main-content-wrapper main .card.shadow-sm > .card-header.bg-transparent.border-bottom h5 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--grey-color) !important;
	line-height: 1.3;
}

#main-content-wrapper main .card.shadow-sm > .card-header.bg-transparent.border-bottom h5 > .fa-solid:first-child {
	flex-shrink: 0;
	font-size: 1.125rem;
	color: var(--grey-color) !important;
	margin-right: 0 !important;
}

.advanced-filters-panel {
	padding: 0.5rem 1rem 1rem;
}

.advanced-filters-section-title {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grey-color);
	margin-top: 0;
	margin-bottom: 0.65rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--grey-color-20);
	min-height: 1.75rem;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
}

.advanced-filters-field,
.advanced-filters-panel .mb-2 {
	margin-bottom: 0.5rem;
}

.advanced-filters-field:last-child {
	margin-bottom: 0;
}

.advanced-filters-menu .form-label {
	font-size: 0.75rem;
	margin-bottom: 0.25rem;
	display: block;
}

.advanced-filters-menu .form-control,
.advanced-filters-menu .form-select {
	font-size: 1rem;
	border-color: var(--grey-color-20);
}

.advanced-filters-menu .form-control:focus,
.advanced-filters-menu .form-select:focus {
	border-color: var(--grey-color-50);
	box-shadow: 0 0 0 0.15rem rgba(133, 133, 137, 0.2);
}

.advanced-filters-menu .btn-group.w-100 {
	display: flex;
	width: 100%;
}

.advanced-filters-menu .btn-group.w-100 > .btn {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.advanced-filters-menu .btn-group .btn-outline-grey {
	font-size: 1rem;
}

.advanced-filters-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: var(--white);
	border-top: 1px solid var(--grey-color-20);
}

.advanced-filters-footer .advanced-filters-apply {
	min-width: 5.5rem;
	background-color: var(--red-color);
	border-color: var(--red-color);
	color: var(--white);
}

.advanced-filters-footer .advanced-filters-apply:hover,
.advanced-filters-footer .advanced-filters-apply:focus,
.advanced-filters-footer .advanced-filters-apply:active {
	background-color: rgb(214, 40, 30);
	border-color: rgb(214, 40, 30);
	color: var(--white);
}

/* Toolbar icon buttons when their dropdown is open or advanced criteria are active. */
.advanced-filters-dropdown > .btn.show,
.advanced-filters-dropdown > .btn.advanced-filters-active,
.advanced-filters-dropdown > .btn.advanced-filters-active:hover,
.advanced-filters-dropdown > .btn.advanced-filters-active:focus,
.advanced-filters-dropdown > .btn.advanced-filters-active.show,
.btn-group > .btn.list-actions-toggle.show,
.btn-group > .btn.list-actions-toggle.show:hover,
.btn-group > .btn.list-actions-toggle.show:focus {
	background-color: var(--red-color);
	border-color: var(--red-color);
	color: var(--white) !important;
}

.advanced-filters-dropdown > .btn.show.dropdown-toggle::after,
.btn-group > .btn.list-actions-toggle.show.dropdown-toggle::after {
	border-top-color: var(--white);
}

.advanced-filters-menu .btn-outline-grey.active,
.advanced-filters-menu .btn-outline-grey.active:hover,
.advanced-filters-menu .btn-outline-grey.active:focus {
	background-color: var(--red-color);
	border-color: var(--red-color);
	color: var(--white);
}

/* —— Personal account / profile page —— */
.profile-page {
	max-width: 56rem;
	margin: 0.5rem auto 2.5rem;
}

.profile-sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
}

@media (min-width: 992px) {
	.profile-sections {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem;
	}

	.profile-sections > .profile-section {
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.profile-sections > .profile-section > .profile-panel {
		flex: 1 1 auto;
	}

	.profile-sections > .profile-section-stack {
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.profile-sections > .profile-section-stack > .profile-section {
		margin-bottom: 0;
	}

	/* Edit layout: keep the left column content-height; right stack can be taller */
	.profile-sections:has(> .profile-section-stack) {
		align-items: start;
	}

	.profile-sections:has(> .profile-section-stack) > .profile-section > .profile-panel {
		flex: 0 0 auto;
	}
}

.profile-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: thin solid var(--grey-color-20);
}

.profile-identity--compact {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
}

.profile-identity__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--grey-color) 0%, rgb(90, 90, 96) 100%);
	color: var(--white);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

.profile-identity__avatar--sm {
	width: 3.25rem;
	height: 3.25rem;
	font-size: 1rem;
}

.profile-identity__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.profile-identity__name {
	margin: 0 0 0.2rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--black) !important;
}

.profile-identity__email {
	font-size: 0.95rem;
	color: var(--grey-color);
	word-break: break-word;
}

.profile-identity__edit,
.profile-identity__actions {
	flex-shrink: 0;
}

.profile-identity__actions .btn {
	white-space: nowrap;
}

.profile-section {
	margin-bottom: 1.75rem;
}

.profile-section__header {
	margin-bottom: 0.75rem;
}

.profile-section__title {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--black) !important;
}

.profile-section__subtitle {
	margin: 0;
	font-size: 0.875rem;
	color: var(--grey-color);
}

.profile-panel {
	border: thin solid var(--grey-color-20);
	border-radius: var(--bs-border-radius, 0.375rem);
	background: var(--white);
	overflow: hidden;
}

.profile-panel--form {
	padding: 1.25rem 1.35rem;
}

.profile-row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 0.75rem 1.25rem;
	padding: 0.9rem 1.25rem;
	border-bottom: thin solid var(--grey-color-20);
}

.profile-row--last {
	border-bottom: 0;
}

.profile-row__label {
	font-size: 0.875rem;
	color: var(--grey-color);
}

.profile-row__value {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--black) !important;
	word-break: break-word;
}

.profile-address {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.profile-action-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.95rem 1.15rem;
	border-bottom: thin solid var(--grey-color-20);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.12s ease;
}

.profile-action-row:hover {
	background-color: rgba(128, 128, 132, 0.06);
	color: inherit;
}

.profile-action-row--static {
	cursor: default;
}

.profile-action-row--static:hover {
	background-color: transparent;
}

.profile-action-row--last {
	border-bottom: 0;
}

.profile-action-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(128, 128, 132, 0.12);
	color: var(--grey-color);
	flex-shrink: 0;
	font-size: 0.95rem;
}

.profile-action-row__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.profile-action-row__title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--black) !important;
}

.profile-action-row__meta {
	font-size: 0.85rem;
	color: var(--grey-color);
	word-break: break-word;
}

.profile-action-row__cta {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--grey-color);
	flex-shrink: 0;
}

.profile-action-row:hover .profile-action-row__cta {
	color: var(--red-color);
}

.profile-action-row__chevron {
	font-size: 0.7rem;
	color: var(--grey-color-50);
	flex-shrink: 0;
}

.profile-form__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.65rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: thin solid var(--grey-color-20);
}

.profile-page .form-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--grey-color);
	margin-bottom: 0.35rem;
}

@media (max-width: 575.98px) {
	.profile-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.profile-identity__edit,
	.profile-identity__actions {
		width: 100%;
	}

	.profile-identity__actions {
		justify-content: stretch;
	}

	.profile-identity__actions .btn {
		flex: 1 1 auto;
	}
}