/*
 * PCTL Dialog: Bestätigungsdialog im Banner-Look (templates/js/dialog.js).
 *
 * Ersetzt das Browserfenster von confirm(). Wie Menü und Banner immer dunkel
 * (Navy, leuchtende Oberkante, Oswald in Versalien), unabhängig vom Theme.
 * Nutzt das native <dialog>, dadurch sind Fokusfalle, Escape und Hintergrund
 * vom Browser geregelt. Alles unter .pctl-dialog gekapselt.
 * Genutzt vom Friendly-Bereich, einbinden mit dialog.js.
 */

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("/templates/fonts/oswald-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --- */

.pctl-dialog {
	--d-accent: #4da3ff;
	--d-text: #e8f0fb;
	--d-muted: #8ea6c4;
	--d-line: rgba(93, 160, 233, 0.22);
	--d-font: "Oswald", "Arial Narrow", Arial, sans-serif;
}

.pctl-dialog--gefahr {
	--d-accent: #ff5a61;
}

/* --- Rahmen --- */

.pctl-dialog {
	width: min(440px, calc(100vw - 32px));
	max-width: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	color: var(--d-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background: linear-gradient(180deg, rgba(16, 32, 58, 0.98) 0%, rgba(6, 13, 26, 0.99) 100%);
	border: 1px solid var(--d-line);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.pctl-dialog::backdrop {
	background: rgba(5, 9, 15, 0.62);
	backdrop-filter: blur(3px);
}

.pctl-dialog[open] {
	animation: pctl-dialog-auf 0.16s ease-out;
}

@keyframes pctl-dialog-auf {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

/* Leuchtende Oberkante wie bei .pctl-card */
.pctl-dialog::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--d-accent), transparent);
}

.pctl-dialog .pctl-dialog__inhalt {
	display: flex;
	gap: 14px;
	padding: 22px 20px 18px;
}

.pctl-dialog .pctl-dialog__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--d-accent);
	font-size: 18px;
	background: rgba(77, 163, 255, 0.1);
	border: 1px solid var(--d-line);
	border-radius: 10px;
}

.pctl-dialog--gefahr .pctl-dialog__icon {
	background: rgba(255, 90, 97, 0.1);
	border-color: rgba(255, 90, 97, 0.35);
}

.pctl-dialog .pctl-dialog__titel {
	margin: 2px 0 6px;
	color: var(--d-text);
	font-family: var(--d-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pctl-dialog .pctl-dialog__text {
	margin: 0;
	color: #c5d4e8;
	font-size: 14px;
	line-height: 1.5;
}

/* --- Knöpfe --- */

.pctl-dialog .pctl-dialog__knoepfe {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
	padding: 12px 20px 16px;
	border-top: 1px solid var(--d-line);
}

.pctl-dialog .pctl-dialog__knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 18px;
	color: var(--d-text);
	font-family: var(--d-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	background: rgba(77, 163, 255, 0.07);
	border: 1px solid rgba(93, 160, 233, 0.35);
	border-radius: 10px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pctl-dialog .pctl-dialog__knopf:hover {
	border-color: var(--d-accent);
}

.pctl-dialog .pctl-dialog__knopf--ja {
	color: #ffffff;
	background: linear-gradient(180deg, #4da3ff 0%, #2f7fe0 52%, #1d5fb4 100%);
	border-color: rgba(154, 204, 255, 0.55);
	box-shadow: 0 6px 16px rgba(47, 127, 224, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pctl-dialog--gefahr .pctl-dialog__knopf--ja {
	background: linear-gradient(180deg, #ff7a80 0%, #e0474e 52%, #b3262d 100%);
	border-color: rgba(255, 170, 174, 0.55);
	box-shadow: 0 6px 16px rgba(224, 71, 78, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pctl-dialog .pctl-dialog__knopf--ja:hover {
	transform: translateY(-1px);
}

.pctl-dialog .pctl-dialog__knopf:active {
	transform: translateY(1px);
}

.pctl-dialog .pctl-dialog__knopf:focus-visible {
	outline: 2px solid #4da3ff;
	outline-offset: 2px;
}

/* --- Handy: Knöpfe untereinander, Bestätigen oben --- */

@media (max-width: 575px) {
	.pctl-dialog .pctl-dialog__knoepfe {
		flex-direction: column-reverse;
	}

	.pctl-dialog .pctl-dialog__knopf {
		width: 100%;
		min-height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pctl-dialog[open] {
		animation: none;
	}

	.pctl-dialog .pctl-dialog__knopf {
		transition: none;
	}

	.pctl-dialog .pctl-dialog__knopf--ja:hover,
	.pctl-dialog .pctl-dialog__knopf:active {
		transform: none;
	}
}