/**
 * ContentStock Overlay Manager
 *
 * Allgemeine, fachlich unabhängige Darstellung des Dialogsystems.
 */
body.is-cs-overlay-open {
	overflow: hidden;
}

.cs-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	& form:has(> section) {
		display: grid;
		gap: 1rem;
	}
}

.cs-overlay[hidden] {
	display: none;
}

/* Editor-/Standalone-Hosts laden nicht zwingend den Foundation-Reset. */
.cs-overlay [hidden]:not([hidden="until-found"]) {
	display: none !important;
}

.cs-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .58);
	backdrop-filter: blur(2px);
}

.cs-overlay__dialog[role="alertdialog"] {
	& .cs-overlay__close {
		display: none;
	}

	& .cs-overlay__alert-message {
		font-size: var(--cs-font-size-base, .875rem);
		white-space: pre-line;
	}
}

.cs-overlay__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: min(47.5rem, 100%);
	max-height: calc(100vh - 2.5rem);
	border: 1px solid rgba(148, 163, 184, .4);
	border-radius: .875rem;
	background: var(--cs-color-surface);
	color: var(--cs-color-text-strong);
	box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .3);
}

.cs-overlay--small .cs-overlay__dialog {
	width: min(32.5rem, 100%);
}

.cs-overlay--large .cs-overlay__dialog {
	width: min(65rem, 100%);
}

.cs-overlay--wide .cs-overlay__dialog {
	width: min(80rem, 100%);
}

.cs-overlay--fullscreen {
	padding: 0;
	& .cs-overlay__dialog {
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}
}

.cs-overlay__header {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--cs-color-border-soft);
	background: var(--cs-color-surface);
}

.cs-overlay__heading {
	min-width: 0;
}

.cs-overlay__header-actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: .4rem;
}

.cs-overlay__minimize, .cs-overlay__close {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.35rem;
	font-size: 0;
}

.cs-overlay__minimize {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-width='2' d='M6 12h12'/%3E%3C/svg%3E");
}

.cs-overlay__header h2 {
	margin: 0;
	color: var(--cs-color-text-strong);
	font-size: var(--cs-font-size-xl, 1.125rem);
	line-height: 1.3;
}

.cs-overlay__header p {
	margin: .35rem 0 0;
	color: var(--cs-color-text-soft);
	font-size: var(--cs-font-size-sm, .8125rem);
	line-height: 1.45;
}

.cs-overlay__header p[hidden] {
	display: none;
}

.cs-overlay__close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-width='2' d='m6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.cs-overlay__minimize:focus-visible, .cs-overlay__close:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .25);
	outline-offset: 2px;
}

.cs-overlay__status {
	flex: 1 1 18rem;
	min-width: 0;
	margin: 0;
	padding: .65rem .8rem;
	border: 1px solid transparent;
	border-radius: .5rem;
	font-size: var(--cs-font-size-sm, .8125rem);
	font-weight: bold;
	line-height: 1.4;
	&[hidden] {
		display: none;
	}
}

.cs-overlay__status--info {
	border-color: #bfdbfe;
	background: #eff6ff;
	color: var(--cs-color-primary-hover);
}

.cs-overlay__status--success {
	border-color: #86efac;
	background: var(--cs-color-success-soft);
	color: #166534;
}

.cs-overlay__status--warning {
	border-color: #fde68a;
	background: var(--cs-color-warning-soft);
	color: var(--cs-color-warning-text);
}

.cs-overlay__status--error {
	border-color: #fca5a5;
	background: var(--cs-color-danger-soft);
	color: #b91c1c;
}

.cs-overlay__body {
	flex: 1 1 auto;
	overflow: auto;
	min-height: 2.5rem;
	padding: 1.5rem;
	overscroll-behavior: contain;
}

.cs-overlay__footer {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: .65rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--cs-color-border-soft);
	background: var(--cs-color-surface-muted);
	&:not(.has-status):not(.has-content) {
		display: none;
	}
}

.cs-overlay__footer-content {
	display: flex;
	/* Darf schrumpfen, damit viele Footer-Aktionen umbrechen statt aus dem Dialog zu laufen. */
	flex: 0 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .65rem;
	margin-left: auto;
	&:empty {
		display: none;
	}
}

.cs-overlay__footer-message--success {
	border-color: #86efac;
	background: var(--cs-color-success-soft);
	color: #166534;
}

.cs-overlay__footer-message--error {
	border-color: #fca5a5;
	background: var(--cs-color-danger-soft);
	color: #b91c1c;
}

.cs-overlay__footer-message--warning {
	border-color: #fde68a;
	background: var(--cs-color-warning-soft);
	color: var(--cs-color-warning-text);
}

.cs-overlay__footer-actions {
	display: flex;
	flex: 0 0 auto;
	gap: .65rem;
	align-items: center;
	margin-left: auto;
}

/* cs-button und cs-admin-tab bringen eigene Optik mit; :where() hält die Spezifität für alle übrigen Buttons gleich. */
.cs-overlay button:where(:not(.cs-button, .cs-admin-tab)) {
	min-height: 2.4rem;
	padding: .45rem .8rem;
	border: 1px solid var(--cs-color-border-control);
	border-radius: .5rem;
	background-color: var(--cs-color-surface);
	color: var(--cs-color-text-strong);
	font: inherit;
	font-size: var(--cs-font-size-sm, .8125rem);
	cursor: pointer;
	&.cs-overlay__close, &.cs-overlay__minimize {
		font-size: 0;
	}
}

.cs-overlay button:disabled {
	cursor: not-allowed;
	opacity: .5;
}

.cs-overlay.is-loading .cs-overlay__body, .cs-overlay.is-loading .cs-overlay__footer {
	pointer-events: none;
	opacity: .6;
}

.cs-overlay.is-loading .cs-overlay__dialog::after {
	position: absolute;
	top: 1.75rem;
	right: 4.75rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--cs-color-border-control);
	border-top-color: var(--cs-color-primary);
	border-radius: 50%;
	content: "";
	animation: cs-overlay-loading-spin .75s linear infinite;
}

.cs-overlay.is-loading.is-minimizable .cs-overlay__dialog::after {
	right: 7.65rem;
}

.cs-overlay-tasks {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
	max-width: min(22rem, calc(100vw - 2.5rem));
	&[hidden] {
		display: none;
	}
}

.cs-overlay-task {
	display: flex;
	align-items: center;
	gap: .6rem;
	max-width: 100%;
	min-height: 2.6rem;
	padding: .55rem .85rem;
	border: 1px solid var(--cs-color-border-control);
	border-radius: .65rem;
	background: var(--cs-color-surface);
	color: var(--cs-color-text-strong);
	box-shadow: 0 .4rem 1.25rem rgba(15, 23, 42, .16);
	font: inherit;
	font-size: var(--cs-font-size-sm, .8125rem);
	cursor: pointer;
	&:hover {
		background: var(--cs-color-surface-muted);
	}
	&:focus-visible {
		outline: 3px solid rgba(37, 99, 235, .25);
		outline-offset: 2px;
	}
}

.cs-overlay-task__state {
	flex: 0 0 auto;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--cs-color-text-subtle);
}

.cs-overlay-task__label {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs-overlay-task.is-running .cs-overlay-task__state {
	background: var(--cs-color-primary);
	animation: cs-overlay-task-running 1.4s ease-in-out infinite;
}

.cs-overlay-task.is-success .cs-overlay-task__state {
	background: #16a34a;
}

.cs-overlay-task.is-warning .cs-overlay-task__state {
	background: #d97706;
}

.cs-overlay-task.is-error .cs-overlay-task__state {
	background: var(--cs-color-danger);
}

@keyframes cs-overlay-task-running {
	0%, 100% {
		opacity: .45;
		transform: scale(.85);
	}

	50% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Gut sichtbarer Ladezustand (setLoading, nach 400 ms). Liegt über Body und Footer, der Header bleibt bedienbar. */
.cs-overlay__busy {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cs-space-3, .75rem);
	padding: var(--cs-space-6, 1.5rem);
	background: var(--cs-color-surface-overlay, rgba(255, 255, 255, .9));
	color: var(--cs-color-text, #1d2433);
	font-size: var(--cs-font-size-sm, .8125rem);
	font-weight: 600;
	text-align: center;
	animation: cs-overlay-busy-in .15s ease-out;
}

.cs-overlay__busy-spinner {
	width: 2.25rem;
	height: 2.25rem;
	border: 3px solid var(--cs-color-border-soft, #e2e8f0);
	border-top-color: var(--cs-color-primary, #2563eb);
	border-radius: 50%;
	animation: cs-overlay-loading-spin .8s linear infinite;
}

.cs-overlay__busy-text {
	max-width: 28rem;
	line-height: 1.45;
	&:empty {
		display: none;
	}
}

/* Kleiner Header-Spinner entfällt, sobald die große Anzeige sichtbar ist. */
.cs-overlay.is-busy-visible .cs-overlay__dialog::after {
	display: none;
}

@keyframes cs-overlay-busy-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-overlay__busy-spinner {
		animation-duration: 2.4s;
	}
}

@keyframes cs-overlay-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 48rem) {
	.cs-overlay {
		align-items: flex-end;
		padding: .75rem;
	}

	.cs-overlay__dialog {
		width: 100%;
		max-height: calc(100vh - 1.5rem);
		border-radius: .875rem;
	}

	.cs-overlay__header {
		padding: 1rem;
	}

	.cs-overlay__status {
		margin: .75rem 1rem 0;
	}

	.cs-overlay__body {
		padding: 1rem;
	}

	.cs-overlay__footer {
		align-items: stretch;
		flex-direction: column;
		padding: .875rem 1rem;
		& button {
			width: 100%;
		}
	}

	/* Status im Footer: in der Spaltenanordnung nicht auf 18rem Höhe wachsen, bündig zu den Aktionen. */
	.cs-overlay__footer .cs-overlay__status {
		flex: 0 0 auto;
		margin: 0;
	}

	.cs-overlay__footer-message {
		flex-basis: 100%;
	}

	.cs-overlay__footer-content {
		width: 100%;
		margin-left: 0;
		& button {
			flex: 1 1 auto;
		}
	}

	.cs-overlay__footer-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
		margin-left: 0;
		& button {
			width: 100%;
		}
	}

	.cs-overlay-tasks {
		right: .75rem;
		bottom: .75rem;
		left: .75rem;
		max-width: none;
	}

	.cs-overlay-task {
		width: 100%;
	}
}

/* Fachlich neutrale Floating-Panels auf der vollen Overlay-/Viewport-Ebene. */
.cs-overlay__floating-layer {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}

.cs-overlay-floating {
	position: absolute;
	display: flex;
	flex-direction: column;
	max-width: calc(100% - 2rem);
	max-height: calc(100% - 2rem);
	overflow: hidden;
	border: 1px solid var(--cs-color-border-control);
	border-radius: .75rem;
	background: var(--cs-color-surface);
	box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, .24);
	pointer-events: auto;
	&[hidden] {
		display: none;
	}
}

.cs-overlay-floating__header {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 3rem;
	padding: .55rem .65rem .55rem .9rem;
	border-bottom: 1px solid var(--cs-color-border-soft);
	background: var(--cs-color-surface-muted);
}

.cs-overlay-floating.is-draggable:not(.is-minimized) .cs-overlay-floating__header {
	cursor: move;
	touch-action: none;
}

.cs-overlay-floating.is-dragging {
	user-select: none;
}

.cs-overlay-floating__title {
	overflow: hidden;
	margin: 0;
	font-size: var(--cs-font-size-base, .875rem);
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cs-overlay-floating__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: .25rem;
}

.cs-overlay-floating__minimize, .cs-overlay-floating__close {
	width: 2rem;
	height: 2rem;
	min-height: 2rem !important;
	padding: 0 !important;
	border: 0 !important;
	background-color: transparent !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.1rem;
	font-size: 0 !important;
}

.cs-overlay-floating__minimize {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-width='2' d='M6 12h12'/%3E%3C/svg%3E");
}

.cs-overlay-floating.is-minimized .cs-overlay-floating__minimize {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 14l4-4l4 4M8 18l4-4l4 4'/%3E%3C/svg%3E");
}

.cs-overlay-floating__close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-width='2' d='m6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.cs-overlay-floating__minimize:focus-visible, .cs-overlay-floating__close:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .25);
	outline-offset: 1px;
}

.cs-overlay-floating__body {
	flex: 1 1 auto;
	overflow: auto;
	min-height: 0;
	padding: 1rem;
	overscroll-behavior: contain;
	&[hidden] {
		display: none;
	}
}

.cs-overlay-floating.is-minimized {
	width: min(20rem, calc(100% - 2rem)) !important;
	max-height: none;
}

.cs-overlay-floating.is-minimized .cs-overlay-floating__header {
	border-bottom: 0;
}

@media (max-width: 48rem) {
	.cs-overlay__floating-layer {
		inset: 0;
	}

	.cs-overlay-floating {
		top: auto !important;
		right: .75rem !important;
		bottom: .75rem !important;
		left: .75rem !important;
		width: auto !important;
		max-width: none;
		max-height: calc(100% - 1.5rem);
		&.is-draggable:not(.is-minimized) .cs-overlay-floating__header {
			cursor: default;
		}
	}
}