/**
 * @ownership ui-core
 *
 * dsp-ui-core.css
 * ----------------
 * Allowed selectors:
 *   .dsp-ui*
 *   .dsp-focus*
 *   .dsp-sr*
 *   body.dsp-*
 *   [data-dsp-*]
 *   .dsp-calculator*
 *
 * Forbidden:
 *   body
 *   html
 *   main
 *   .dsp-product-card*
 *   .dsp-home*
 */

/* -------------------------------------------------------------------------
 * Toast
 * ------------------------------------------------------------------------- */
.dsp-ui-toast-region {
	position: fixed;
	z-index: var(--dsp-z-toast, 600);
	inset: auto var(--dsp-space-4) var(--dsp-space-4) auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--dsp-space-2);
	pointer-events: none;
}

.dsp-ui-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--dsp-space-2);
	max-width: min(22rem, calc(100vw - 2rem));
	padding: var(--dsp-space-3) var(--dsp-space-4);
	font-size: var(--dsp-font-size-sm);
	font-weight: var(--dsp-font-weight-medium);
	line-height: var(--dsp-line-height-relaxed);
	color: var(--dsp-color-text-primary);
	background: var(--dsp-elevation-1-bg, var(--dsp-color-bg-elevated));
	border: 1px solid var(--dsp-color-border-subtle);
	border-radius: var(--dsp-radius-lg);
	box-shadow: var(--dsp-elevation-2-shadow, 0 12px 32px rgb(0 0 0 / 14%));
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: auto;
}

.dsp-ui-toast--success {
	border-color: color-mix(in srgb, var(--dsp-color-success) 35%, var(--dsp-color-border-subtle));
}

.dsp-ui-toast--error {
	border-color: color-mix(in srgb, var(--dsp-color-error) 35%, var(--dsp-color-border-subtle));
	background: color-mix(in srgb, var(--dsp-color-error) 6%, var(--dsp-elevation-1-bg, var(--dsp-color-bg-elevated)));
}

.dsp-ui-toast--warning {
	border-color: color-mix(in srgb, var(--dsp-color-warning) 35%, var(--dsp-color-border-subtle));
}

.dsp-ui-toast--info {
	border-color: color-mix(in srgb, var(--dsp-color-info) 35%, var(--dsp-color-border-subtle));
}

.dsp-ui-toast--visible {
	opacity: 1;
	transform: translateY(0);
}

.dsp-ui-toast--hiding {
	opacity: 0;
	transform: translateY(0.5rem);
}

.dsp-ui-toast__dismiss {
	flex: 0 0 auto;
	margin: -0.25rem -0.25rem -0.25rem 0;
	padding: 0.125rem 0.375rem;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

/* Legacy calculator toast classes map to ui-core when both present */

/* -------------------------------------------------------------------------
 * Loading
 * ------------------------------------------------------------------------- */
.dsp-ui-spinner {
	display: inline-flex;
	animation: dsp-ui-spin 0.8s linear infinite;
}

.dsp-ui-spinner svg {
	display: block;
}

@keyframes dsp-ui-spin {
	to { transform: rotate(360deg); }
}

.dsp-ui-button--loading,
.dsp-calculator__button--loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dsp-space-2);
}

.dsp-ui-section--loading {
	position: relative;
}

.dsp-ui-section__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--dsp-color-bg-base) 55%, transparent);
	z-index: 2;
}

.dsp-ui-section__overlay[hidden] {
	display: none !important;
}

.dsp-ui-section__overlay-inner {
	display: inline-flex;
	align-items: center;
	gap: var(--dsp-space-2);
	color: var(--dsp-color-text-primary);
}

.dsp-ui-fullscreen-loading {
	position: fixed;
	inset: 0;
	z-index: calc(var(--dsp-z-modal, 500) + 20);
	display: grid;
	place-items: center;
	background: var(--dsp-color-bg-overlay);
}

.dsp-ui-fullscreen-loading[hidden] {
	display: none !important;
}

.dsp-ui-fullscreen-loading__inner {
	display: inline-flex;
	align-items: center;
	gap: var(--dsp-space-3);
	color: var(--dsp-color-text-primary);
	font-size: var(--dsp-font-size-sm);
}

body.dsp-ui-loading-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Confirm dialog
 * ------------------------------------------------------------------------- */
.dsp-ui-confirm__header {
	display: flex;
	align-items: center;
	gap: var(--dsp-space-3);
}

.dsp-ui-confirm__icon {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--dsp-radius-full);
	background: var(--dsp-color-accent-subtle);
	color: var(--dsp-color-accent);
	font-weight: var(--dsp-font-weight-bold);
}

.dsp-ui-confirm__description {
	margin: 0;
	color: var(--dsp-color-text-secondary);
}

.dsp-ui-confirm__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--dsp-space-2);
}

/* -------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------- */
.dsp-ui-field--error {
	border-color: var(--dsp-color-error) !important;
}

.dsp-ui-field__error {
	margin: var(--dsp-space-1) 0 0;
	font-size: var(--dsp-font-size-sm);
	color: var(--dsp-color-error);
}

.dsp-ui-form__success {
	margin: 0 0 var(--dsp-space-3);
	padding: var(--dsp-space-2) var(--dsp-space-3);
	border-radius: var(--dsp-radius-md);
	background: color-mix(in srgb, var(--dsp-color-success) 12%, transparent);
	color: var(--dsp-color-text-primary);
}

/* -------------------------------------------------------------------------
 * Dropdown
 * ------------------------------------------------------------------------- */
.dsp-ui-dropdown {
	position: relative;
}

.dsp-ui-dropdown__menu,
[data-dsp-ui-dropdown-menu] {
	position: absolute;
	top: calc(100% + var(--dsp-space-1));
	left: 0;
	z-index: var(--dsp-z-dropdown, 100);
	min-width: 12rem;
	padding: var(--dsp-space-1);
	background: var(--dsp-elevation-1-bg, var(--dsp-color-bg-elevated));
	border: 1px solid var(--dsp-color-border-subtle);
	border-radius: var(--dsp-radius-md);
	box-shadow: var(--dsp-elevation-2-shadow, 0 8px 24px rgb(0 0 0 / 18%));
}

/* -------------------------------------------------------------------------
 * Wizard scaffold
 * ------------------------------------------------------------------------- */
.dsp-ui-wizard--busy {
	pointer-events: none;
	opacity: 0.72;
}

@media (max-width: 640px) {
	.dsp-ui-toast-region {
		inset: auto var(--dsp-space-3) var(--dsp-space-3) var(--dsp-space-3);
		align-items: stretch;
	}

	.dsp-ui-toast {
		max-width: none;
	}
}