.cv-alert {
	display: flex;
	align-items: center;
	border-radius: var(--radius-lg);
	padding: calc(var(--spacing) * 4);
	font-size: var(--text-sm);
	box-shadow: var(--shadow-sm);

	&.cv-alert-type-info {
		background-color: var(--color-primary-50);
		border: 1px solid var(--color-primary-300);
		color: var(--color-primary-600);
		box-shadow: var(--shadow-sm);
	}

	&.cv-alert-type-warning {
		background-color: calc(var(--color-status-warning) * 0.1);
		border: 1px solid calc(var(--color-status-warning) * 0.3);
		color: var(--color-status-warning);
		box-shadow: var(--shadow-sm);
	}

	&.cv-alert-type-danger {
		background-color: calc(var(--color-status-error) * 0.1);
		border: 1px solid calc(var(--color-status-error) * 0.3);
		color: var(--color-status-error);
		box-shadow: var(--shadow-sm);
	}

	& .cv-alert-icon-container {
		flex-shrink: 0;
	}

	& .cv-alert-icon {
		font-size: var(--text-xl);

		&.cv-alert-icon-info {
			color: var(--color-primary-500);
		}
		&.cv-alert-icon-warning {
			color: var(--color-status-warning);
		}
		&.cv-alert-icon-danger {
			color: var(--color-status-error);
		}
	}

	& .cv-alert-dismiss-button-container {
		margin-left: calc(var(--spacing) * 3);
		flex-shrink: 0;

		& .cv-alert-dismiss-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: calc(var(--spacing) * 5);
			height: calc(var(--spacing) * 5);
			border-radius: 9999px;
			color: currentColor;
			transition: background-color 0.2s ease-in-out;

			&:hover {
				background-color: color-mix(in srgb, currentColor 10%, transparent);
			}

			& > i {
				font-size: var(--text-sm);
			}
		}
	}
}

.cv-badge {
	padding-left: calc(var(--spacing) * 2);
	padding-right: calc(var(--spacing) * 2);
	padding-top: calc(var(--spacing) * 0.5);
	padding-bottom: calc(var(--spacing) * 0.5);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	border: 1px solid;
	border-radius: var(--radius-sm);
	white-space: nowrap;

	&.cv-badge-success {
		border-color: var(--color-green-400);
		color: var(--color-green-400);
		background-color: var(--color-green-50);
	}

	&.cv-badge-error {
		border-color: var(--color-red-400);
		color: var(--color-red-400);
		background-color: var(--color-red-50);
	}

	&.cv-badge-default {
		border-color: var(--color-gray-400);
		color: var(--color-gray-400);
		background-color: var(--color-gray-50);
	}
}

.cv-breadcrumbs {
	display: flex;
	align-items: center;
	font-size: var(--text-2xl);
	font-weight: var(--font-weight-medium);

	& .cv-breadcrumbs-link-text {
		color: var(--color-gray-600);
		&:hover {
			color: var(--color-gray-800);
		}
	}

	& .cv-breadcrumbs-text {
		color: var(--color-gray-800);
	}

	& .cv-breadcrumbs-divider {
		margin-left: calc(var(--spacing) * 2);
		margin-right: calc(var(--spacing) * 2);
		color: var(--color-gray-400);
	}
}

.cv-button, .cv-icon-button, .cv-button-compound {
	position: relative;
	font-weight: var(--font-weight-medium, 500);
	font-size: var(--text-sm);
	transition: all 0.2s ease-in-out;
	cursor: pointer;

	&:not(.cv-icon-button):not(.cv-button-link) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		line-height: var(--leading-relaxed);
		letter-spacing: var(--tracking-wider);
		text-align: center;
	}

	&.cv-button-link {
		font-family: var(--font-sans);
		line-height: calc(var(--leading) * 4);
		letter-spacing: var(--tracking-wide);
		text-decoration: underline;
		white-space: nowrap;
	}

	&.cv-button-text {
		width: fit-content;
		height: fit-content;
	}

	&.cv-button-normal {
		border-radius: 9999px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&.cv-button-disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	& .cv-button-loading {
		position: absolute;
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 1);
		justify-content: center;
		inset: 0;

		&.cv-button-loading-link {
			min-height: 1.25rem;
		}

		& .cv-button-loading-dot {
			width: calc(var(--spacing) * 1);
			height: calc(var(--spacing) * 1);
			background-color: currentColor;
			border-radius: 9999px;
			animation: pulse 1s infinite;
			&:nth-child(2) {
				animation-delay: 0.333s;
			}
			&:nth-child(3) {
				animation-delay: 0.666s;
			}
		}
	}

	& .cv-button-content {
		&.invisible {
			visibility: hidden;
		}

		& .cv-button-icon {
			&.prefix-icon {
				margin-right: calc(var(--spacing) * 2);
			}
			&.postfix-icon {
				margin-left: calc(var(--spacing) * 2);
			}
		}
	}

	/* Size classes */
	&.cv-button-size-xs {
		height: calc(var(--spacing) * 8);
		padding-left: calc(var(--spacing) * 3);
		padding-right: calc(var(--spacing) * 3);
		gap: calc(var(--spacing) * 1);
		min-width: calc(var(--spacing) * 24);
		font-size: var(--text-xs);
	}

	/* Height is repeated here to expose it to CvButtonCompound */
	&.cv-button-height-xs {
		height: calc(var(--spacing) * 8);
	}

	&.cv-button-size-sm {
		height: calc(var(--spacing) * 10);
		padding-left: calc(var(--spacing) * 4);
		padding-right: calc(var(--spacing) * 4);
		gap: calc(var(--spacing) * 1.5);
		min-width: calc(var(--spacing) * 30);
	}

	&.cv-button-height-sm {
		height: calc(var(--spacing) * 10);
	}

	&.cv-button-size-md {
		height: calc(var(--spacing) * 12);
		padding-left: calc(var(--spacing) * 5);
		padding-right: calc(var(--spacing) * 5);
		gap: calc(var(--spacing) * 1.5);
		min-width: calc(var(--spacing) * 36);
	}

	&.cv-button-height-md {
		height: calc(var(--spacing) * 12);
	}

	&.cv-button-size-lg {
		height: calc(var(--spacing) * 12);
		padding-left: calc(var(--spacing) * 6);
		padding-right: calc(var(--spacing) * 6);
		gap: calc(var(--spacing) * 2);
		min-width: calc(var(--spacing) * 40);
	}

	&.cv-button-height-lg {
		height: calc(var(--spacing) * 12);
	}

	&.cv-button-size-xl {
		height: calc(var(--spacing) * 16);
		padding-left: calc(var(--spacing) * 7);
		padding-right: calc(var(--spacing) * 7);
		gap: calc(var(--spacing) * 3);
	}

	&.cv-button-height-xl {
		height: calc(var(--spacing) * 16);
	}

	/* Color classes */
	&.cv-button-blue {
		&:not(.cv-button-selected):not(.cv-button-outlined):not(.cv-button-text) {
			background-color: var(--color-primary-500);
			color: var(--color-white);
			border: 1px solid transparent;
			&:hover {
				background-color: var(--color-primary-600);
			}
		}

		&.cv-button-selected {
			background-color: var(--color-primary-500);
			color: var(--color-white);
			border: 1px solid var(--color-primary-500);
		}

		&.cv-button-outlined {
			background-color: transparent;
			color: var(--color-primary-500);
			border: 1px solid var(--color-primary-500);

			&:hover {
				background-color: var(--color-hover-light);
			}
		}

		&.cv-button-text {
			color: var(--color-primary-500);
			border: 1px solid transparent;
			&:hover {
				color: var(--color-primary-600);
			}
		}
	}

	&.cv-button-custom-blue {
		&:not(.cv-button-selected):not(.cv-button-outlined):not(.cv-button-text) {
			background-color: var(--color-custom-blue-500);
			color: var(--color-white);
			border: 1px solid transparent;
			&:hover {
				background-color: var(--color-custom-blue-600);
			}
		}

		&.cv-button-selected {
			background-color: var(--color-custom-blue-500);
			color: var(--color-white);
			border: 1px solid var(--color-custom-blue-500);
		}

		&.cv-button-outlined {
			background-color: transparent;
			color: var(--color-custom-blue-500);
			border: 1px solid var(--color-custom-blue-500);
			&:hover {
				background-color: var(--color-hover-light);
			}
		}

		&.cv-button-text {
			color: var(--color-custom-blue-500);
			border: 1px solid transparent;
			&:hover {
				color: var(--color-custom-blue-600);
			}
		}
	}

	&.cv-button-royal-blue {
		&:not(.cv-button-selected):not(.cv-button-outlined):not(.cv-button-text) {
			background-color: var(--color-icon-royal-blue);
			color: var(--color-white);
			border: 1px solid transparent;
			&:hover {
				background-color: calc(var(--color-icon-royal-blue) * 0.8);
			}
		}

		&.cv-button-selected {
			background-color: var(--color-icon-royal-blue);
			color: var(--color-white);
			border: 1px solid var(--color-icon-royal-blue);
		}

		&.cv-button-outlined {
			background-color: transparent;
			color: var(--color-icon-royal-blue);
			border: 1px solid var(--color-icon-royal-blue);
			&:hover {
				background-color: var(--color-hover-light);
			}
		}

		&.cv-button-text {
			color: var(--color-icon-royal-blue);
			border: 1px solid transparent;
			&:hover {
				color: calc(var(--color-icon-royal-blue) * 0.8);
			}
		}
	}

	&.cv-button-gray {
		&:not(.cv-button-selected):not(.cv-button-outlined):not(.cv-button-text) {
			background-color: var(--color-grey-modern-100);
			color: var(--color-primary-500);
			border: 1px solid transparent;
			&:hover {
				background-color: var(--color-grey-modern-300);
			}
		}

		&.cv-button-selected {
			background-color: var(--color-primary-500);
			color: var(--color-white);
			border: 1px solid var(--color-primary-500);
		}

		&.cv-button-outlined {
			background-color: transparent;
			color: var(--color-dark-blue-600);
			border: 1px solid var(--color-dark-blue-600);
			&:hover {
				background-color: var(--color-gray-50);
			}
		}

		&.cv-button-text {
			color: var(--color-grey-modern-500);
			border: 1px solid transparent;
			&:hover {
				color: var(--color-grey-modern-600);
			}
		}
	}

	&.cv-button-error {
		&:not(.cv-button-text) {
			background-color: var(--color-status-error);
			color: var(--color-white);
			border: 1px solid transparent;
			&:hover {
				background-color: calc(var(--color-status-error) * 0.8);
			}
		}

		&.cv-button-text {
			color: var(--color-status-error);
			border: 1px solid transparent;
			&:hover {
				color: calc(var(--color-status-error) * 0.8);
			}
		}
	}

	&.cv-button-green {
		&:not(.cv-button-selected):not(.cv-button-outlined):not(.cv-button-text) {
			background-color: var(--color-secondary-500);
			color: var(--color-white);
			border: 1px solid transparent;
			&:hover {
				background-color: var(--color-secondary-600);
			}
		}

		&.cv-button-selected {
			background-color: var(--color-secondary-500);
			color: var(--color-white);
			border: 1px solid var(--color-secondary-500);
		}

		&.cv-button-outlined {
			background-color: transparent;
			color: var(--color-secondary-500);
			border: 1px solid var(--color-secondary-500);
			&:hover {
				background-color: var(--color-secondary-50);
			}
		}

		&.cv-button-text {
			color: var(--color-secondary-500);
			border: 1px solid transparent;
			&:hover {
				color: var(--color-secondary-600);
			}
		}
	}
}

.cv-button-compound {
	display: inline-flex;
	border-radius: 9999px;
	overflow: hidden;
	&:hover {
		background-color: var(--color-bg-light);
	}

	& .cv-button-compound-main-button {
		padding-left: calc(var(--spacing) * 6);
		padding-right: calc(var(--spacing) * 4);
		padding-top: calc(var(--spacing) * 3);
		padding-bottom: calc(var(--spacing) * 3);
	}

	& .cv-button-compound-no-border {
		border: none !important;
	}

	& .cv-button-divider {
		height: 100%;

		&.cv-button-divider-outlined {
			background-color: var(--color-primary-500);
			width: 1px;
		}

		&.cv-button-divider-compound {
			background-color: var(--color-bg-light);
			width: 2px;
		}
	}

	& .cv-button-compound-dropdown-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding-left: calc(var(--spacing) * 3);
		padding-right: calc(var(--spacing) * 4);
		font-size: var(--text-xs);
		text-decoration: none;
		cursor: pointer;
		transition: all 0.2s ease-in-out;

		&.cv-button-compound-dropdown-button-disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}
	}
}

.cv-checkbox {
	display: inline-flex;
	align-items: center;
	cursor: pointer;

	&:has(md-checkbox[disabled]) {
		cursor: not-allowed;
		opacity: 0.5;
	}

	& .cv-checkbox-container {
		display: flex;
		align-items: flex-start;
		gap: calc(var(--spacing, 0.25rem) * 3);

		& .cv-checkbox-native {
			flex-shrink: 0;
			margin-top: calc(var(--spacing, 0.25rem) * 0.5);
		}

		& .cv-checkbox-label-wrapper {
			flex-grow: 1;
			min-width: 0;

			& .cv-checkbox-label {
				font-size: var(--text-sm);
				font-weight: var(--font-weight-medium, 500);
				cursor: pointer;
				color: var(--color-gray-700);

				&.cv-checkbox-label-disabled {
					color: var(--color-gray-400);
					cursor: not-allowed;
				}

				&.cv-checkbox-label-error {
					color: var(--color-red-600);
				}
			}

			& .cv-checkbox-asterisk {
				color: var(--color-red-500);
				margin-left: calc(var(--spacing, 0.25rem) * 1);
			}

			& .cv-checkbox-supporting-text {
				margin-top: calc(var(--spacing, 0.25rem) * 1);
				font-size: var(--text-xs);
				color: var(--color-gray-500);
			}

			& .cv-checkbox-error-message {
				margin-top: calc(var(--spacing, 0.25rem) * 1);
				font-size: var(--text-xs);
				color: var(--color-red-600);
			}
		}
	}
}

.cv-checkbox-green,
.cv-checkbox {
	--md-sys-color-primary: var(--color-primary-500);
}

.cv-checkbox-blue {
	--md-sys-color-primary: var(--color-primary-300);
}

.cv-checkbox-gray {
	--md-sys-color-primary: var(--color-muted);
}

/* max-width: --breakpoint-md */
@media (max-width: 768px) {
	.cv-checkbox {
		--md-checkbox-selected-container-shape: 3px;
		--md-checkbox-unselected-container-shape: 3px;
		--md-checkbox-focus-ring-shape: 3px;
	}
}

/* max-width: --breakpoint-xs */
@media (max-width: 480px) {
	.cv-checkbox {
		--md-checkbox-selected-container-shape: 2px;
		--md-checkbox-unselected-container-shape: 2px;
		--md-checkbox-focus-ring-shape: 2px;
	}
}

input[type="color"] {
	appearance: none;
	border: none;
	border-radius: 0.3rem;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
	border-radius: 0.3rem;
	border: none;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 0.3rem;
}

input[type="color"]::-moz-color-swatch {
	border: none;
	border-radius: 0.3rem;
}

.cv-color-picker {
	& .cv-color-picker-label-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: calc(var(--spacing, 0.25rem) * 2);

		& .cv-color-picker-label {
			font-size: var(--text-sm);
			font-weight: var(--font-weight-bold, 700);
			color: var(--color-gray-900);
		}

		& .cv-color-picker-tooltip-icon {
			color: var(--color-blue-500);
		}
	}

	& .cv-color-picker-input-wrapper {
		position: relative;

		& .cv-color-picker-input {
			width: 100%;
			min-height: calc(var(--spacing, 0.25rem) * 12);

			&.cv-color-picker-input-disabled {
				cursor: not-allowed;
				opacity: 0.7;
			}
		}

		& .cv-color-picker-value-display {
			position: absolute;
			right: calc(var(--spacing, 0.25rem) * 3);
			top: 45%;
			transform: translateY(-50%);
			color: var(--color-gray-800);

			&.cv-color-picker-value-display-dark {
				color: var(--color-gray-100);
			}
		}
	}
}

.cv-date-wrapper {
	position: relative;
}

/* Calendar icon inside the text field */
.cv-date-wrapper .cv-date-calendar-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
}

.cv-date-wrapper .cv-date-calendar-trigger i {
	font-size: 1.125rem;
}

.cv-date-wrapper .cv-date-clear-button {
	position: absolute;
	right: 2.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-gray-400);
	pointer-events: auto;
	z-index: 10;

	&:hover {
		color: var(--color-gray-600);
	}
}

.cv-date-wrapper .cv-date-hidden-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: hidden;
}

/* Pikaday styling */
.pika-single {
	font-family: var(--font-sans);
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
	width: fit-content;
	box-sizing: border-box;
}

.pika-label {
	color: var(--color-grey-modern-600);
	font-weight: 500;
}

.pika-table th {
	color: var(--color-black);
	font-weight: 400;
}

.pika-button {
	color: var(--color-black);
	background: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;

    &:hover {
		background: var(--color-primary-50);
		color: inherit;
		border-radius: 50%;
	}
}

.is-today .pika-button {
	outline: 1px solid var(--color-primary-500);
	color: inherit;
	font-weight: inherit;
}

.is-selected .pika-button {
	color: var(--color-white);
	background: var(--color-primary-500);
	border-radius: 50%;
	font-weight: inherit;
	box-shadow: none;
}

.is-disabled .pika-button,
.is-inrange .pika-button {
    background: transparent;
}

.is-today.is-selected .pika-button {
	outline: none;
}

.cv-details {
	interpolate-size: allow-keywords;

	summary {
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	&::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.1s ease-out, content-visibility 0.1s ease-out allow-discrete;
	}

	&[open]::details-content {
		height: auto;
	}
}

.cv-icon-button {
	border-radius: 9999px;

	&.cv-icon-button-fit {
		width: fit-content;
		height: fit-content;
	}

	/* Icon button size classes (on same element as .cv-icon-button) */
	&.cv-icon-button-size-xs {
		width: calc(var(--spacing) * 8);
		height: calc(var(--spacing) * 8);
		font-size: var(--text-xs);
	}

	&.cv-icon-button-size-sm {
		width: calc(var(--spacing) * 10);
		height: calc(var(--spacing) * 10);
		font-size: var(--text-sm);
	}

	&.cv-icon-button-size-md {
		width: calc(var(--spacing) * 12);
		height: calc(var(--spacing) * 12);
		font-size: var(--text-sm);
	}

	&.cv-icon-button-size-lg {
		width: calc(var(--spacing) * 12);
		height: calc(var(--spacing) * 12);
		font-size: var(--text-base);
	}

	&.cv-icon-button-size-xl {
		width: calc(var(--spacing) * 16);
		height: calc(var(--spacing) * 16);
		font-size: var(--text-base);
	}
}

.cv-image-deck {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-self: center;
	align-items: center;
	justify-items: center;

	& .cv-image-deck-active-image-container {
		flex: 1;
		padding: calc(var(--spacing) * 1);
		border: 1px solid var(--color-gray-200);
		border-radius: var(--radius-xl);

		& > img {
			object-fit: scale-down;
		}
	}

	& .cv-image-deck-image-controls-container {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 4);
		padding-top: calc(var(--spacing) * 3);

		& .cv-image-deck-image-control-button {
			background-color: transparent;
		}
	}

	& .cv-image-deck-image-description {
		text-align: center;
		font-size: var(--text-md);
		font-weight: var(--font-weight-bold);
		padding-top: calc(var(--spacing) * 2);
		padding-bottom: calc(var(--spacing) * 2);
	}
}

/* Material Design Input Component Theme Overrides */

md-filled-text-field {
	--md-filled-text-field-container-color: var(--color-bg-light);
	--md-filled-text-field-container-shape: 0px;
	--md-filled-text-field-disabled-container-color: var(--color-disabled-bg);
	--md-filled-text-field-focus-active-indicator-color: var(--color-secondary-500);
	--md-filled-text-field-error-active-indicator-color: var(--color-status-error);
	--md-filled-text-field-label-text-color: var(--color-label-default);
	--md-filled-text-field-focus-label-text-color: var(--color-label-floating);
	--md-filled-text-field-error-label-text-color: var(--color-status-error);
	--md-filled-text-field-disabled-label-text-color: var(--color-primary);
	--md-filled-text-field-input-text-size: 14px;
	--md-filled-text-field-input-text-font: 'Montserrat';
	--md-filled-text-field-input-text-weight: 500;
	--md-filled-text-field-input-text-line-height: 150%;
	--md-filled-text-field-input-text-letter-spacing: 0.5px;
	width: 100%;
	min-height: 58px;
	align-self: flex-start;
}

md-filled-text-field::part(container) {
	border-radius: 0px;
	border: none;
	border-bottom: 1px solid var(--color-border-light);
	background: var(--color-bg-light);
	min-height: 58px;
	padding: 16px 12px 8px 12px;
	box-sizing: border-box;
}

md-filled-text-field:focus-within::part(container),
md-filled-text-field[has-value]::part(container) {
	border-bottom: 1px solid var(--color-secondary-500) !important;
}
md-filled-text-field:focus::part(container),
md-filled-text-field.focused::part(container),
md-filled-text-field[data-focused]::part(container) {
	border-bottom: 1px solid var(--color-secondary-500) !important;
}
md-filled-text-field[error]::part(container) {
	border-bottom: 1px solid var(--color-status-error);
}
md-filled-text-field[disabled]::part(container) {
	background: var(--color-disabled-bg);
}
md-filled-text-field[data-state="success"]::part(container) {
	background: var(--color-white);
	border: 1px solid var(--color-border-success);
	border-bottom: 1px solid var(--color-border-success);
}
md-filled-text-field::part(label) {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	letter-spacing: 0.5px;
}
md-filled-text-field::part(input) {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 0.5px;
	color: var(--color-primary);
}
md-filled-text-field::part(supporting-text) {
	display: none;
}
md-filled-text-field::part(error-text) {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 12px;
	line-height: 100%;
	color: var(--color-status-error);
}
md-filled-text-field[error]::part(supporting-text) {
	color: var(--color-status-error);
}
md-filled-text-field::part(outline) {
	display: none;
}
md-filled-text-field::part(active-indicator) {
	background-color: var(--color-secondary-500) !important;
	height: 1px !important;
}
md-filled-text-field[error]::part(active-indicator) {
	background-color: var(--color-status-error) !important;
}

.cv-loading-spinner-container-xs {
	width: 1rem;
}

.cv-loading-spinner-container-sm {
	width: 1.5rem;
}

.cv-loading-spinner-container-md {
	width: 4rem;
}

.cv-loading-spinner-container-lg {
	width: 8rem;
}

.cv-loading-spinner-container-xl {
	width: 16rem;
}

.cv-loading-spinner {
    border-radius: 50%;
    animation: cv-spin 1.618033s linear infinite;
}

.cv-loading-spinner-xs {
	border: 0.125rem solid #0000;
	border-top: 0.125rem solid var(--color-blue-500);
	padding-bottom: calc(100% - 0.16rem);
}

.cv-loading-spinner-sm {
    border: 0.25rem solid #0000;
    border-top: 0.25rem solid var(--color-blue-500);
    padding-bottom: calc(100% - 0.5rem);
}

.cv-loading-spinner-md {
    border: 0.5rem solid #0000;
    border-top: 0.5rem solid var(--color-blue-500);
    padding-bottom: calc(100% - 1rem);
}

.cv-loading-spinner-lg {
    border: 1rem solid #0000;
    border-top: 1rem solid var(--color-blue-500);
    padding-bottom: calc(100% - 1rem);
}

.cv-loading-spinner-xl {
    border: 2rem solid #0000;
    border-top: 2rem solid var(--color-blue-500);
    padding-bottom: calc(100% - 4rem);
}

@keyframes cv-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cv-loading-screen {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100dvh;
}

/* Layout and positioning (migrated from Tailwind; use theme variables where possible) */
.cv-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}

.cv-modal-wrapper {
	display: flex;
	min-height: 100%;
	align-items: flex-end;
	justify-content: center;
	padding: calc(var(--spacing, 0.25rem) * 4);
	text-align: center;
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-modal-wrapper {
		align-items: center;
		padding: 0;
	}
}

.cv-modal-backdrop {
	position: fixed;
	inset: 0;
	background-color: var(--color-black, black);
}

.cv-modal-content {
	position: relative;
	transform: translateZ(0);
	border-radius: var(--radius-md, 0.5rem);
	background-color: var(--color-bg-white, white);
	text-align: left;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	display: flex;
	flex-direction: column;
	max-height: 100dvh;
}
/* --breakpoint-xs */
@media (min-width: 480px) {
	.cv-modal-content {
		&.cv-modal-content-xs {
			width: 100%;
		}
		&.cv-modal-content-sm {
			width: 100%;
		}
		&.cv-modal-content-md {
			width: 100%;
		}
		&.cv-modal-content-lg {
			width: 100%;
		}
	}
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-modal-content {
		max-height: 95dvh;

		&.cv-modal-content-xs {
			width: 75%;
		}
		&.cv-modal-content-sm {
			width: 50%;
		}
	}
}
/* --breakpoint-md */
@media (min-width: 768px) {
	.cv-modal-content {
		&.cv-modal-content-xs {
			width: 50%;
		}
		&.cv-modal-content-sm {
			width: 33.333%;
		}
		&.cv-modal-content-md {
			width: 50%;
		}
		&.cv-modal-content-lg {
			width: 75%;
		}
	}
}
/* --breakpoint-lg */
@media (min-width: 1024px) {
	.cv-modal-content {
		&.cv-modal-content-xs {
			width: 25%;
		}
	}
}

.cv-modal-content-inner {
	text-align: center;
	padding-left: calc(var(--spacing, 0.25rem) * 4);
	padding-bottom: calc(var(--spacing, 0.25rem) * 4);
	padding-top: calc(var(--spacing, 0.25rem) * 5);
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	display: relative;
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-modal-content-inner {
		text-align: left;
		padding: calc(var(--spacing, 0.25rem) * 6);
		padding-bottom: calc(var(--spacing, 0.25rem) * 4);
	}
}

.cv-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: calc(var(--spacing, 0.25rem) * 8);
	margin-bottom: calc(var(--spacing, 0.25rem) * 4);
}

.cv-modal-title {
	font-size: var(--text-lg, 1.125rem);
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--color-primary, #111827);
}

.cv-modal-subtitle {
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-secondary, #4b5563);
	margin-top: calc(var(--spacing, 0.25rem) * 1);
}

.cv-modal-close {
	position: absolute;
	top: calc(var(--spacing, 0.25rem) * 3);
	right: calc(var(--spacing, 0.25rem) * 3);
	border-radius: var(--radius-md, 0.5rem);
	background-color: var(--color-bg-white, white);
	color: var(--color-gray-400, #9ca3af);
	cursor: pointer;
	z-index: 10;
}
.cv-modal-close:hover {
	color: var(--color-gray-500, #6b7280);
}
.cv-modal-close:focus {
	outline: none;
}

.cv-modal-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}
.cv-modal-body.cv-modal-body-visible {
	overflow: visible;
}

.cv-modal-footer {
	padding: calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 3);
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-modal-footer {
		display: flex;
		flex-direction: row-reverse;
		gap: calc(var(--spacing, 0.25rem) * 3);
		padding-left: calc(var(--spacing, 0.25rem) * 6);
		padding-right: calc(var(--spacing, 0.25rem) * 6);
	}
}

.cv-modal-divider {
	border: 0;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: var(--color-border-medium, #e5e7eb);
}

.cv-modal-close-icon {
	font-size: 1.25rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

@keyframes fadeInBackdrop {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.75;
	}
}

@keyframes fadeOutBackdrop {
	from {
		opacity: 0.75;
	}

	to {
		opacity: 0;
	}
}

@keyframes slideInContent {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideOutContent {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-50px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cv-modal-backdrop {
		animation: fadeInBackdrop 200ms ease-in-out forwards;
	}

	.cv-modal.exit {
		.cv-modal-backdrop {
			animation: fadeOutBackdrop 200ms ease-in-out forwards;
		}

		.cv-modal-content {
			animation: slideOutContent 200ms ease-in-out forwards;
		}
	}

	.cv-modal-content {
		animation: slideInContent 200ms ease-in-out forwards;
	}
}

.cv-multi-select {
	position: relative;
}

.cv-multi-select-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	cursor: pointer;
	z-index: 10;
}

.cv-multi-select-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: transparent;
}

.cv-multi-select-suffix {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing, 0.25rem) * 2);
}

.cv-multi-select-chips {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacing, 0.25rem) * 1);
	max-width: 12rem;
}

.cv-multi-select-chip {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing, 0.25rem) * 1);
	padding: calc(var(--spacing, 0.25rem) * 1) calc(var(--spacing, 0.25rem) * 2);
	background-color: var(--color-primary-100);
	color: var(--color-primary-800);
	font-size: var(--text-xs, 0.75rem);
	font-weight: 500;
	border-radius: var(--radius-sm, 0.125rem);
}

.cv-multi-select-chip-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cv-multi-select-chip-remove {
	margin-left: calc(var(--spacing, 0.25rem) * 1);
	color: var(--color-primary-600);
	outline: none;

	& > i {
		font-size: var(--text-xs);
	}
}
.cv-multi-select-chip-remove:hover {
	color: var(--color-primary-800);
}

.cv-multi-select-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: calc(var(--spacing, 0.25rem) * 3);
	font-family: var(--font-sans);
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-primary);
	font-weight: 500;
	width: 100%;
	padding: calc(var(--spacing, 0.25rem) * 3);
	text-align: left;
}

.cv-multi-select {
	md-filled-text-field {
		--md-filled-text-field-container-color: var(--color-bg-light);
		--md-filled-text-field-container-shape: 0px;
		--md-filled-text-field-disabled-container-color: var(--color-disabled-bg);
		--md-filled-text-field-focus-active-indicator-color: var(--color-secondary-500);
		--md-filled-text-field-error-active-indicator-color: var(--color-status-error);
		--md-filled-text-field-label-text-color: var(--color-label-default);
		--md-filled-text-field-focus-label-text-color: var(--color-label-floating);
		--md-filled-text-field-error-label-text-color: var(--color-status-error);
		--md-filled-text-field-disabled-label-text-color: var(--color-primary);
		--md-filled-text-field-input-text-color: var(--color-primary);
		--md-filled-text-field-disabled-input-text-color: var(--color-primary);
		--md-filled-text-field-outline-width: 0px;
		--md-filled-text-field-outline-focus-width: 0px;
		--md-filled-text-field-outline-error-width: 0px;
		--md-filled-text-field-input-text-size: 14px;
		--md-filled-text-field-input-text-font: 'Montserrat';
		--md-filled-text-field-input-text-weight: 500;
		--md-filled-text-field-input-text-line-height: 150%;
		--md-filled-text-field-input-text-letter-spacing: 0.5px;
		width: 100%;
		min-height: 58px;

		&::part(container) {
			border-radius: 0px;
			border: none;
			border-bottom: 1px solid var(--color-border-light);
			background: var(--color-bg-light);
			min-height: 58px;
			padding: 16px 12px 8px 12px;
			box-sizing: border-box;
		}

		&:focus-within::part(container),
		&[has-value]::part(container) {
			border-bottom: 1px solid var(--color-secondary-500) !important;
		}

		&:focus::part(container),
		&.focused::part(container),
		&[data-focused]::part(container) {
			border-bottom: 1px solid var(--color-secondary-500) !important;
		}

		&[error]::part(container) {
			border-bottom: 1px solid var(--color-status-error);
		}

		&[disabled]::part(container) {
			background: var(--color-disabled-bg);
		}

		&[data-state="success"]::part(container) {
			background: var(--color-white);
			border: 1px solid var(--color-border-success);
			border-bottom: 1px solid var(--color-border-success);
		}

		&::part(label) {
			font-family: var(--font-sans);
			font-weight: 400;
			font-size: 12px;
			line-height: 150%;
			letter-spacing: 0.5px;
		}

		&::part(input) {
			font-family: var(--font-sans);
			font-weight: 600;
			font-size: 14px;
			line-height: 150%;
			letter-spacing: 0.5px;
			color: var(--color-primary);
		}

		&::part(supporting-text) {
			display: none;
		}

		&::part(error-text) {
			font-family: var(--font-sans);
			font-weight: 500;
			font-size: 12px;
			line-height: 100%;
			color: var(--color-status-error);
		}

		&[error]::part(supporting-text) {
			color: var(--color-status-error);
		}

		&::part(outline) {
			display: none;
		}

		&::part(active-indicator) {
			background-color: var(--color-secondary-500) !important;
			height: 1px !important;
		}

		&[error]::part(active-indicator) {
			background-color: var(--color-status-error) !important;
		}
	}

	.chip {
		background-color: var(--color-primary-100);
		color: var(--color-primary-800);
		border-radius: 2px;
		font-size: 12px;
		font-weight: 500;
		transition: all 0.2s ease;

		&:hover {
			background-color: var(--color-primary-200);
		}
	}

	.chip-remove {
		color: var(--color-primary-600);
		transition: color 0.2s ease;

		&:hover {
			color: var(--color-primary-800);
		}
	}

	.dropdown-arrow {
		color: var(--color-secondary);
		transition: transform 0.2s ease;

		&.rotated {
			transform: rotate(180deg);
		}
	}

	.dropdown-menu {
		position: absolute;
		z-index: 50;
		width: 100%;
		max-height: 15rem;
		overflow-y: auto;
		margin: 0;
		margin-top: calc(var(--spacing, 0.25rem) * 1);
		background: var(--color-white) !important;
		border: 1px solid var(--color-border-light);
		border-radius: 0px;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		padding: 0 !important;

		button {
			padding: 12px 15px;

			&:hover {
				background-color: var(--color-primary-50);
			}
		}
	}

	.no-options {
		color: var(--color-secondary) !important;
		cursor: default !important;

		&:hover {
			background-color: transparent !important;
		}
	}

	.overlay-button {
		background: transparent;
		cursor: pointer;
		z-index: 10;
	}

	.backdrop {
		background: transparent;
		z-index: 40;
	}

	/* max-width: --breakpoint-md */
	@media (max-width: 768px) {
		md-filled-text-field::part(label),
		md-filled-text-field::part(input),
		md-filled-text-field::part(supporting-text),
		md-filled-text-field::part(error-text) {
			font-size: 14px;
		}
	}

	/* max-width: --breakpoint-xs */
	@media (max-width: 480px) {
		md-filled-text-field::part(label),
		md-filled-text-field::part(input),
		md-filled-text-field::part(supporting-text),
		md-filled-text-field::part(error-text) {
			font-size: 12px;
		}
	}
}

.cv-pagination-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: calc(var(--spacing, 0.25rem) * 4);
	padding: calc(var(--spacing, 0.25rem) * 4);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium, 500);

	& .cv-pagination-nav {
		position: relative;
		display: inline-flex;
		gap: calc(var(--spacing, 0.25rem) * 1);
		align-items: center;

		& .cv-pagination-button-prev-next {
			width: calc(var(--spacing, 0.25rem) * 10);
			height: calc(var(--spacing, 0.25rem) * 10);
			border-radius: var(--radius-full, 9999px);
			font-size: var(--text-xs);

			&:hover {
				background-color: var(--color-primary-50);
				cursor: pointer;
			}

			&.cv-pagination-button-disabled {
				color: var(--color-disabled-bg);

				&:hover {
					cursor: not-allowed;
					background-color: inherit;
				}
			}

			& .cv-pagination-button-icon {
				width: calc(var(--spacing, 0.25rem) * 4);
				height: calc(var(--spacing, 0.25rem) * 4);
			}
		}

		& .cv-pagination-button-numbered {
			width: calc(var(--spacing, 0.25rem) * 10);
			height: calc(var(--spacing, 0.25rem) * 10);
			border-radius: var(--radius-full, 9999px);
			cursor: pointer;

			&:hover {
				background-color: var(--color-primary-50);
			}

			&.cv-pagination-button-numbered-active {
				background-color: var(--color-primary-500);
				color: var(--color-white);
			}

			&.cv-pagination-button-numbered-disabled {
				opacity: 0.5;
				cursor: not-allowed;
				pointer-events: none;
			}
		}

		& .cv-pagination-button-ellipsis {
			padding-left: calc(var(--spacing, 0.25rem) * 4);
			padding-right: calc(var(--spacing, 0.25rem) * 4);
			padding-top: calc(var(--spacing, 0.25rem) * 2);
			padding-bottom: calc(var(--spacing, 0.25rem) * 2);
			width: calc(var(--spacing, 0.25rem) * 12);
		}
	}
}

.cv-password-pair-wrapper {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing, 0.25rem) * 2);

	& .cv-password-pair-input-wrapper {
		position: relative;

		& .cv-password-pair-show-button {
			position: absolute;
			right: calc(var(--spacing, 0.25rem) * 3);
			top: calc(var(--spacing, 0.25rem) * 5);
		}
	}

	& .cv-password-pair-status-container {
		display: flex;
		align-items: center;
		font-size: var(--font-size-sm);
		font-style: italic;

		& .cv-password-pair-reset-button {
			margin-left: calc(var(--spacing, 0.25rem) * 2);
			margin-right: calc(var(--spacing, 0.25rem) * 2);
		}

		& .cv-password-pair-status-wrapper {
			margin-left: calc(var(--spacing, 0.25rem) * 2);
			margin-right: calc(var(--spacing, 0.25rem) * 2);

			&.password-unchanged {
				color: var(--color-gray-500);
			}

			&.password-match {
				color: var(--color-status-success);
			}

			&.password-mismatch {
				color: var(--color-status-error);
			}

			& .cv-password-pair-status-text {
				font-size: var(--font-size-sm);
				font-style: italic;
			}
		}
	}
}

/* Layout and positioning (migrated from Tailwind; use theme variables where possible) */
.cv-popover {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
}

.cv-popover-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: auto;
}

.cv-popover-content {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-white, white);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    z-index: 70;
    pointer-events: auto;
}

.cv-popover-close-wrapper {
    align-self: flex-end;
    margin-top: calc(var(--spacing, 0.25rem) * 2);
    margin-right: calc(var(--spacing, 0.25rem) * 2);
}

@keyframes expandFromTop {
    from {
        transform: scaleY(0.2);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes collapseToTop {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0.2);
    }
}

@keyframes expandFromBottom {
    from {
        transform: scaleY(0.2);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes collapseToBottom {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0.2);
    }
}

@keyframes expandFromLeft {
    from {
        transform: scaleX(0.2);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes collapseToLeft {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0.2);
    }
}

@keyframes expandFromRight {
    from {
        transform: scaleX(0.2);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes collapseToRight {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0.2);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cv-popover-content.position-top {
        transform-origin: bottom center;
        animation: expandFromBottom 50ms ease-out forwards;
    }

    .cv-popover-content.position-bottom {
        transform-origin: top center;
        animation: expandFromTop 50ms ease-out forwards;
    }

    .cv-popover-content.position-left {
        transform-origin: center right;
        animation: expandFromRight 50ms ease-out forwards;
    }

    .cv-popover-content.position-right {
        transform-origin: center left;
        animation: expandFromLeft 50ms ease-out forwards;
    }

    .cv-popover.exit {
        .cv-popover-content.position-top {
            transform-origin: bottom center;
            animation: collapseToBottom 50ms ease-in forwards;
        }

        .cv-popover-content.position-bottom {
            transform-origin: top center;
            animation: collapseToTop 50ms ease-in forwards;
        }

        .cv-popover-content.position-left {
            transform-origin: center right;
            animation: collapseToRight 50ms ease-in forwards;
        }

        .cv-popover-content.position-right {
            transform-origin: center left;
            animation: collapseToLeft 50ms ease-in forwards;
        }
    }
}

.cv-radio {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
}

.cv-radio:not(:has(input:disabled)) {
  cursor: pointer;
}

.cv-radio-label-text {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-gray-900);
}

.cv-radio-label-text.cv-radio-label-text-error {
  color: var(--color-status-error);
}

.cv-radio {
  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .cv-radio-btn {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-700);
    border-radius: 50%;

	&.cv-radio-btn-error {
		border-color: var(--color-status-error);
	}
  }

  input:checked + .cv-radio-btn {
    border-color: var(--color-blue-700);
  }

  input:checked + .cv-radio-btn::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-blue-700);
  }

  input:disabled + .cv-radio-btn {
    border-color: var(--color-gray-300);
  }

  input:checked:disabled + .cv-radio-btn::after {
    background-color: var(--color-gray-300);
  }

  input:focus:not(:disabled) + .cv-radio-btn,
  input:active:not(:disabled) + .cv-radio-btn {
    box-shadow: 0 0 4px 4px var(--color-blue-300);
  }
}

.cv-search-wrapper {
	color: var(--color-grey-modern-500);
	border: 1px solid;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	padding-left: calc(var(--spacing, 0.25rem) * 4);
	padding-right: calc(var(--spacing, 0.25rem) * 4);
	padding-top: calc(var(--spacing, 0.25rem) * 2);
	padding-bottom: calc(var(--spacing, 0.25rem) * 2);
	gap: calc(var(--spacing, 0.25rem) * 2.5);
	transition: background-color 200ms;

	&:hover {
		box-shadow: none;
	}

	& .cv-search-input {
		flex-grow: 1;
		font-family: var(--font-manrope) var(--font-sans);
		font-size: var(--text-sm);
		height: calc(var(--spacing, 0.25rem) * 6);
		border: none;
		outline: none;
		color: var(--color-black);
		&::placeholder {
			color: var(--color-grey-modern-600);
		}
	}

	& .cv-search-icon {
		color: var(--color-grey-modern-500);
	}

	& .cv-search-clear-button {
		cursor: pointer;
		&.invisible {
			visibility: hidden;
		}
	}

	& .cv-search-clear-icon {
		font-size: var(--text-xs);
	}

	&.cv-search-outlined {
		&:focus-within {
			color: var(--color-secondary-500);
			border-color: var(--color-secondary-500);
			box-shadow: var(--shadow-focus);
		}
		background-color: transparent;
		border-color: var(--color-border-medium);
	}

	&.cv-search-filled {
		&:focus-within {
			color: var(--color-primary-500);
			background-color: var(--color-primary-50);
			border: 1px solid var(--color-primary-500);
		}

		background-color: var(--color-grey-modern-100);
		border-color: transparent;
	}
}

.ember-select-wrapper {
	--control-padding-top: 18px;
	--input-padding-top: 6px;

	position: relative;
	display: block;

	.floating-label {
		position: absolute;
		z-index: 10;
		left: 0.625rem;
		transform-origin: top left;
		transition: transform 0.3s ease, color 0.3s ease;
		pointer-events: none;
		padding-left: 8px;
		font-family: var(--md-filled-field-content-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));
		font-weight: 400;
		font-size: 16px;
		line-height: 150%;
		color: var(--color-label-default);
		top: calc(var(--control-padding-top) + var(--input-padding-top) - 7px);
	}

	&.has-value .floating-label,
	&.is-focused .floating-label {
		transform: scale(0.75) translateY(-11px);
		color: var(--color-label-floating);
	}

	&.has-error .floating-label {
		color: var(--color-status-error) !important;
	}

	.es-control {
		background-color: var(--color-bg-light);
		border: 0;
		border-bottom: 1px solid #49454F;
		border-radius: 0;
		padding: var(--control-padding-top) 12px 1px 15px;
		height: auto;
		min-height: 58px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.es-open .es-control {
		background-color: var(--color-bg-light);
	}

	&.is-focused .es-control {
		box-shadow: none !important;
	}

	.es-input {
		flex: 1;

		input {
			padding-top: var(--input-padding-top);
			font-size: 14px;
			font-weight: 500;
		}
	}

	&.hide-clear .es-clear-zone {
		display: none;
	}

	&.has-error .es-control {
		border-bottom: 1px solid var(--color-status-error);
	}

	&.is-disabled .floating-label {
		color: var(--color-muted) !important;
	}

	&.is-disabled .es-control {
		background-color: var(--color-disabled-bg);
		border-bottom: 1px solid #49454F;
		cursor: not-allowed;
		opacity: 0.6;
	}

	&.is-disabled .es-input input {
		background-color: transparent;
	}

	&.is-disabled .es-control:hover {
		border-bottom: 1px solid #49454F;
	}

	&.is-focused:not(.es-open) .es-control {
		border-bottom: 3px solid var(--color-secondary-500);
		outline: none;
	}

	&.is-disabled.is-focused .es-control {
		border-bottom: 1px solid #49454F;
	}

	&.has-error.is-focused .es-control {
		border-bottom: 3px solid var(--color-status-error);
	}

	&.is-multiple .es-input {
		padding-top: 1.5rem;
	}

	.es-options {
		z-index: 50;
	}

	.es-option {
		font-family: var(--font-sans);
		font-size: 14px;
		padding: 12px 15px;
	}

	.es-options .es-highlight {
		background-color: var(--color-primary-50);
		color: var(--color-label-floating);
	}

	.supporting-text {
		color: var(--color-secondary, #49454f);
		font-size: 12px;
		font-family: var(--md-filled-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))), var(--font-sans);
		padding-top: calc(var(--spacing, 0.25rem) * 1);
		padding-left: calc(var(--spacing, 0.25rem) * 4);
		padding-right: calc(var(--spacing, 0.25rem) * 4);
	}

	&.is-disabled .supporting-text {
		opacity: 0.5;
	}

	&.variant-rounded {
		.es-control {
			background-color: var(--color-bg-light);
			border: 1px solid var(--color-grey-modern-200) !important;
			border-radius: 9999px;
			padding: 8px 16px;
			min-height: auto;
			cursor: pointer;
			transition: background-color 200ms;

			&:hover {
				box-shadow: none;
			}
		}

		.es-input > input {
			padding-top: 0;
		}

		.es-options {
			margin-top: 4px;
			min-width: 35rem;
			max-height: 32rem;

			.select-dropdown-org {
				min-width: 100%;
				max-height: 100%;
			}
		}

		&.has-icon .org-select-icon {
			position: absolute;
			left: 16px;
			top: 50%;
			transform: translateY(-50%);
			z-index: 40;
			pointer-events: none;
		}

		&.has-icon.has-value .es-input > input {
			padding-left: 1.5rem;
		}
	}

	& .ember-select-error-message {
		padding-left: calc(var(--spacing, 0.25rem) * 4);
		padding-right: calc(var(--spacing, 0.25rem) * 4);
		padding-top: calc(var(--spacing, 0.25rem) * 1);
		font-size: var(--text-sm);
		color: var(--color-status-error);
	}
}

/* Layout and positioning (migrated from Tailwind; use theme variables where possible) */
.cv-sidebar {
	position: fixed;
	inset: 0;
	z-index: 50;
	overflow-y: auto;
}

.cv-sidebar-backdrop {
	position: fixed;
	inset: 0;
	background-color: var(--color-black, black);
}

.cv-sidebar-content-left {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateZ(0);
	overflow: hidden;
	height: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: var(--radius-lg, 0.5rem);
	border-top-right-radius: var(--radius-lg, 0.5rem);
	border-bottom-right-radius: var(--radius-lg, 0.5rem);
	background-color: var(--color-bg-white, white);
	text-align: left;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	display: flex;
	flex-direction: column;
}
.cv-sidebar-content-right {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	transform: translateZ(0);
	overflow: hidden;
	height: 100%;
	border-top-left-radius: var(--radius-lg, 0.5rem);
	border-bottom-left-radius: var(--radius-lg, 0.5rem);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	background-color: var(--color-bg-white, white);
	text-align: left;
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	display: flex;
	flex-direction: column;
}

.cv-sidebar-inner {
	background-color: var(--color-bg-white, white);
	padding: calc(var(--spacing, 0.25rem) * 4);
	padding-bottom: calc(var(--spacing, 0.25rem) * 4);
	padding-top: calc(var(--spacing, 0.25rem) * 5);
	flex: 1;
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-sidebar-inner {
		padding: calc(var(--spacing, 0.25rem) * 6);
		padding-bottom: calc(var(--spacing, 0.25rem) * 4);
	}
}

.cv-sidebar-inner-wrap {
	display: block;
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-sidebar-inner-wrap {
		display: flex;
		align-items: flex-start;
	}
}

.cv-sidebar-inner-content {
	margin-top: calc(var(--spacing, 0.25rem) * 3);
	text-align: center;
	width: 100%;
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-sidebar-inner-content {
		margin-top: 0;
		text-align: left;
	}
}

.cv-sidebar-header {
	display: flex;
	gap: calc(var(--spacing, 0.25rem) * 4);
	justify-content: space-between;
	align-items: center;
	margin-bottom: calc(var(--spacing, 0.25rem) * 4);
}
.cv-sidebar-header-left {
	flex-direction: row;
}
.cv-sidebar-header-right {
	flex-direction: row-reverse;
}

.cv-sidebar-close {
	border-radius: var(--radius-md, 0.5rem);
	background-color: var(--color-bg-white, white);
	color: var(--color-muted, #9ca3af);
	cursor: pointer;
	outline: none;
}
.cv-sidebar-close:hover {
	color: var(--color-secondary, #6b7280);
}

.cv-sidebar-title {
	font-size: var(--text-lg, 1.125rem);
	font-weight: 600;
	line-height: 1.5rem;
	color: var(--color-primary, #111827);
}

.cv-sidebar-body {
	margin-top: calc(var(--spacing, 0.25rem) * 2);
	max-height: calc(100vh - var(--spacing) * 14 - var(--text-sm, 0.875rem));
	overflow-y: auto;
}

.cv-sidebar-divider {
	border: 0;
	border-top-width: 1px;
	border-top-style: solid;
	border-color: var(--color-border-medium, #e5e7eb);
}

.cv-sidebar-footer {
	background-color: var(--color-gray-50, #f9fafb);
	padding: calc(var(--spacing, 0.25rem) * 4) calc(var(--spacing, 0.25rem) * 3);
}
/* --breakpoint-sm */
@media (min-width: 640px) {
	.cv-sidebar-footer {
		display: flex;
		flex-direction: row-reverse;
		gap: calc(var(--spacing, 0.25rem) * 3);
		padding-left: calc(var(--spacing, 0.25rem) * 6);
		padding-right: calc(var(--spacing, 0.25rem) * 6);
	}
}

.cv-sidebar-close-icon {
	font-size: 1.25rem;
}

.cv-sidebar .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

@keyframes fade-in-backdrop {
	from {
		opacity: 0;
	}

	to {
		opacity: 0.25;
	}
}

@keyframes fade-out-backdrop {
	from {
		opacity: 0.25;
	}

	to {
		opacity: 0;
	}
}

@keyframes slide-in-content-right {
	from {
		opacity: 0;
		transform: translateX(-300px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide-in-content-left {
	from {
		opacity: 0;
		transform: translateX(300px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide-out-content-right {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(-300px);
	}
}

@keyframes slide-out-content-left {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 0;
		transform: translateX(300px);
	}
}

.cv-sidebar-backdrop {
	animation: fade-in-backdrop 200ms ease-in-out forwards;
}

.cv-sidebar-content-left {
	animation: slide-in-content-right 200ms ease-in-out forwards;
}

.cv-sidebar-content-right {
	animation: slide-in-content-left 200ms ease-in-out forwards;
}

.cv-sidebar.exit {
	.cv-sidebar-backdrop {
		animation: fade-out-backdrop 200ms ease-in-out forwards;
	}

	.cv-sidebar-content-left {
		animation: slide-out-content-right 200ms ease-in-out forwards;
	}

	.cv-sidebar-content-right {
		animation: slide-out-content-left 200ms ease-in-out forwards;
	}
}

.cv-tabs {
	display: flex;
	align-items: center;
	height: calc(var(--spacing) * 12);

	& .cv-tabs-tab-button {
		padding-left: calc(var(--spacing) * 4);
		padding-right: calc(var(--spacing) * 4);
		padding-top: calc(var(--spacing) * 3);
		padding-bottom: calc(var(--spacing) * 3);
		font-size: var(--text-sm);
		text-align: center;
		color: var(--color-gray-500);
		letter-spacing: var(--tracking-wide);
		transition: all 0.2s ease-in-out;
		cursor: pointer;

		&:hover {
			color: var(--color-gray-700);
		}

		&.cv-tabs-tab-button-active {
			color: var(--color-gray-900);
			border-bottom: 3px solid var(--color-secondary-500);
			font-weight: var(--font-weight-bold);
		}
	}
}

.cv-textarea-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.cv-textarea-label {
	position: absolute;
	left: 0;
	right: 17px; /* Account for scrollbar width */
	top: 0;
	min-height: 20px;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	letter-spacing: 0.5px;
	color: var(--color-label-default);
	background: var(--color-bg-light);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 1;
	transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cv-textarea-label-floating {
	font-size: 12px;
	padding: 8px 16px 2px;
}

.cv-textarea-label-focused,
.cv-textarea-label-floating {
	color: var(--color-label-floating);
}

.cv-textarea-label-error {
	color: var(--color-status-error);
}

.cv-textarea {
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-primary);
	background: var(--color-bg-light);
	border-bottom: 2px solid var(--color-border-light);
	transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
}

.cv-textarea::placeholder {
	color: var(--color-gray-500);
}

.cv-textarea:focus {
	outline: none;
	border-bottom-width: 3px;
	border-bottom-color: var(--color-secondary-500);
}

.cv-textarea:disabled {
	cursor: not-allowed;
}

.cv-textarea-wrapper:not(:has(.cv-textarea-has-label)) .cv-textarea {
	padding: calc(var(--spacing, 0.25rem) * 3);
}

.cv-textarea-has-label .cv-textarea {
	padding: 16px 8px 8px;
	padding-left: calc(var(--spacing, 0.25rem) * 3);
	padding-right: calc(var(--spacing, 0.25rem) * 3);
}

.cv-textarea-has-label .cv-textarea.cv-textarea-has-value,
.cv-textarea-has-label .cv-textarea.cv-textarea-focused {
	padding: 28px 16px 8px;
}

.cv-textarea-focused {
	border-bottom: 3px solid var(--color-secondary-500) !important;
}

.cv-textarea-error {
	border-bottom-color: var(--color-status-error) !important;
}

.cv-textarea:disabled {
	color: var(--color-muted);
	background: #f5f5f5;
}

.cv-textarea-wrapper:has(.cv-textarea:disabled) .cv-textarea-label {
	color: var(--color-muted);
	background: #f5f5f5;
}

.cv-textarea-wrapper .error-message {
	color: var(--color-status-error);
}

.cv-textarea-wrapper .supporting-text {
	color: var(--color-secondary, #49454f);
	font-size: 12px;
	font-family: var(--md-filled-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))), var(--font-sans);
	padding-left: calc(var(--spacing, 0.25rem) * 4);
	margin-top: calc(var(--spacing, 0.25rem) * -1);
}

.cv-textarea-required-asterisk {
	color: var(--color-status-error);
}

.cv-textarea-wrapper:has(.cv-textarea:disabled) .supporting-text {
	opacity: 0.5;
}

.cv-toggle {
	display: flex;
	flex-direction: column;
}

.cv-toggle label {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.cv-toggle:has(input:disabled) label {
	opacity: 0.5;
	cursor: not-allowed;
}

.cv-toggle label .cv-toggle-label-text {
	font-size: var(--text-sm, 0.875rem);
	font-weight: 500;
	margin-left: calc(var(--spacing, 0.25rem) * 3);
}

.cv-toggle .supporting-text {
	padding-top: calc(var(--spacing, 0.25rem) * 1);
	padding-left: calc(var(--spacing, 0.25rem) * 4);
	padding-right: calc(var(--spacing, 0.25rem) * 4);
}

.cv-toggle:has(input:disabled) .supporting-text {
	opacity: 0.5;
}

.cv-toggle {
	input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	input:checked + .cv-toggle-track {
		background-color: var(--color-blue-700);

		.cv-toggle-dot {
			transform: translate(1.25rem, -50%);
			border-color: white;
		}
	}

	input:checked:disabled + .cv-toggle-track {
		background-color: var(--color-gray-300);
	}

	input:focus:not(:disabled) + .cv-toggle-track .cv-toggle-dot,
	input:active:not(:disabled) + .cv-toggle-track .cv-toggle-dot {
		box-shadow: 0 0 5px 5px var(--color-blue-300);
	}

	.cv-toggle-track {
		width: 2.75rem;
		height: 1.5rem;
		background-color: var(--color-gray-200);
		border-radius: 9999px;
		position: relative;
		transition: background-color 0.2s;
	}

	.cv-toggle-dot {
		position: absolute;
		top: 50%;
		left: 0.125rem;
		transform: translateY(-50%);
		width: 1.25rem;
		height: 1.25rem;
		background-color: var(--color-white);
		border: 1px solid var(--color-gray-300);
		border-radius: 50%;
		transition: transform 0.2s;
	}

	.supporting-text {
		color: #49454f;
		font-size: 12px;
		font-family: var(--md-filled-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))), var(--font-sans);
	}
}

@keyframes fadeInTooltip {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeOutTooltip {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(10px);
	}
}

.cv-tooltip {
	position: fixed;
	z-index: 100;
	background-color: var(--color-gray-900, #111827);
	color: white;
	font-size: var(--text-sm, 0.875rem);
	border-radius: var(--radius-sm, 0.25rem);
	padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	animation: fadeInTooltip 150ms ease-out forwards;
}

.cv-tooltip.fade-out {
	animation: fadeOutTooltip 150ms ease-out forwards;
}

.cv-tooltip--top::after,
.cv-tooltip--bottom::after {
	content: '';
	position: absolute;
	transform: translateX(-50%);
	left: var(--arrow-offset, 50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
}

.cv-tooltip--top::after {
	bottom: -6px;
	border-top: 6px solid var(--color-gray-900);
}

.cv-tooltip--bottom::after {
	top: -6px;
	border-bottom: 6px solid var(--color-gray-900);
}

/* Row and layout (migrated from Tailwind) */
.cv-tree .cv-tree-hoverable {
	display: flex;
	flex-direction: row;
}

.cv-tree-expand-btn {
	align-self: center;
	margin-left: calc(var(--spacing, 0.25rem) * 2);
	margin-right: calc(var(--spacing, 0.25rem) * 2);

	& > i {
		transition: transform 0.2s ease-in-out;

		&.expanded {
			transform: rotate(90deg);
		}
	}
}

.cv-tree-spacer {
	padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
	display: inline-block;
}

.cv-tree-draggable {
	flex: 1 1 0%;
	display: flex;
	flex-direction: row;
}

.cv-tree .cv-tree-context-button {
	display: flex;
	align-items: center;
}

.cv-tree-context-icon {
	color: var(--color-grey-modern-500, var(--color-gray-500));
	background: transparent;
	margin-left: calc(var(--spacing, 0.25rem) * 2);
}

/* "Move to root" drop target */
.cv-tree-move-to-root {
	width: 100%;
	padding: calc(var(--spacing, 0.25rem) * 2) calc(var(--spacing, 0.25rem) * 4);
	text-align: center;
	font-style: italic;
	color: var(--color-gray-500);
}

.cv-tree .tree {

	/*
	 * All branch-levels except the root level are indented.
	 */
	& .tree-branch .tree-branch {
		margin-left: 2rem;
	}

	/*
	 * All leaf-nodes have padding.
	 */

	& .tree-node .content-center {
		padding: calc(var(--spacing) * 2);
	}

	/*
	 * Checkboxes are scaled to fill text-height.
	 */
	& .tree-checkbox {
		padding: calc(var(--spacing) * 2);
		scale: var(--text-sm--line-height);
	}

	/*
	 * Hoverable nodes have a light-gray background on hover.
	 */
	& .cv-tree-hoverable {
		cursor: pointer;
		transition: background-color 0.2s ease-in-out;

		&:hover {
			background-color: var(--color-gray-100);
		}
	}

	/*
	 * Disabled nodes have lower opacity and no hover effect.
	 */
	& .cv-tree-disabled {
		cursor: not-allowed;
		opacity: 0.5;

		&:hover {
			background-color: transparent;
		}
	}

	/*
	 * For hoverable nodes, checkboxes are hidden when neither hovered nor selected.
	 */
	& .cv-tree-hoverable:not(:hover) > div.draggable-object > div > .tree-checkbox:not(.tree-checkbox-show-always) {
		visibility: hidden;
	}

	/*
	 * Context buttons are hidden when not hovered.
	 */
	& .cv-tree-hoverable:not(:hover) .cv-tree-context-button {
		visibility: hidden;
	}

	/*
	 * Active nodes have a blue underline.
	 * Children of active nodes have a light-blue background.
	 */
	& .cv-tree-active {
		transition: background-color 0.2s ease-in-out;
		border-bottom: var(--spacing) solid var(--color-active-blue);
		border-bottom-left-radius: var(--radius-sm);

		& button:hover {
			background-color: var(--color-gray-300);
		}
	}

	& .tree-node:not(:has(.cv-tree-active)):has(.cv-tree-soft-active) {
		background-color: color-mix(in srgb, var(--color-active-blue) 20%, var(--color-gray-100));
	}
}

/*
 * Drag-over nodes have a light-gray background and dashed border.
 */
.cv-tree-drag-over {
	background-color: var(--color-gray-100);
	border-radius: var(--radius-sm);
	border: 2px dashed var(--color-gray-300);
}

/*
 * When the tree is inside an ember select dropdown, hovering over an option
 * applies .cv-tree-active (aids keyboard navigation).
 */
.ember-select-wrapper .cv-tree-hoverable {
	transition: none !important;
	background-color: transparent !important;
}

.ember-select-wrapper .cv-tree-active {
	transition: none !important;
	border: none !important;
	border-radius: 0 !important;
	background-color: var(--color-primary-50) !important;
}

.cv-tree-node-wrapper {
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	align-items: center;

	& .cv-tree-drag-handle > i {
		align-self: center;
		justify-self: center;
		padding-left: calc(var(--spacing, 0.25rem) * 2);
		padding-right: calc(var(--spacing, 0.25rem) * 2);
		padding-top: calc(var(--spacing, 0.25rem) * 4);
		padding-bottom: calc(var(--spacing, 0.25rem) * 4);
	}

	& .cv-tree-node-content {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/*
 * Breakpoints aligned with Tailwind v4 defaults.
 * CSS does not allow var() in @media conditions, so component CSS uses these
 * literal values; keep them in sync with app @theme if you override breakpoints.
 */
:root {
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-xs: 480px;
}

/*
 * Component-specific styles (consuming apps may override via theme variables).
 */

/*
 * Fallback utility rules for classes that Tailwind source scanning can miss
 * when they are generated/composed in JavaScript/TypeScript.
 */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}