/* =========================================================
   KWL Tooltip — SSoT-Tooltip-System (Frontend + Admin)

   Render-Schicht für die KWLTooltip-Klasse (assets/js/kwl-tooltip.js).
   Trigger-Selektoren werden im JS geprüft; hier nur das eine Popover.

   Top Layer via popover="manual" → kein z-index nötig.
   ========================================================= */

.kwl-tooltip {
	/* Klassisches Render-Modell: position:fixed + hoher z-index. Popover-API
	   wurde bewusst NICHT verwendet — der Hybrid (popover="manual" + position:fixed)
	   führte zu Doppel-Rendering (Top Layer parallel zum normalen Stacking-Context),
	   sichtbar als zwei identische Tooltips am Trigger. */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483647;
	margin: 0;
	border: 0;
	overflow: visible;

	max-inline-size: min(280px, calc(100vw - 2 * var(--kwl-space-md, 1rem)));
	inline-size: max-content;
	padding: var(--kwl-space-xs, 8px) var(--kwl-space-sm, 12px);

	background: var(--kwl-tooltip-bg, #222);
	color: var(--kwl-tooltip-text, #fff);
	font-family: var(--kwl-font-body, system-ui, sans-serif);
	font-size: var(--kwl-fsize-caption, 12px);
	font-weight: var(--kwl-fw-medium, 500);
	line-height: var(--kwl-lh-snug, 1.4);
	letter-spacing: var(--kwl-ls-normal, 0);
	white-space: normal;
	text-align: start;

	border-radius: var(--kwl-radius-sm, 6px);
	box-shadow:
		0 4px 14px color-mix(in srgb, var(--kwl-text, #1a202c) 25%, transparent),
		0 2px 4px color-mix(in srgb, var(--kwl-text, #1a202c) 15%, transparent);

	/* Tooltip ist informativ, nicht interaktiv — Klicks gehen durch. */
	pointer-events: none;

	/* Initial unsichtbar (display:none verhindert Layout-Impact + Visibility). */
	display: none;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 150ms var(--kwl-ease-default, ease), transform 150ms var(--kwl-ease-default, ease);
	transform-origin: center bottom;
}

.kwl-tooltip.is-open {
	display: block;
	opacity: 1;
	transform: scale(1);
}

/* Transform-Origin pro Placement (Mini-Detail für die Scale-Animation). */
.kwl-tooltip[data-placement="top"]      { transform-origin: center bottom; }
.kwl-tooltip[data-placement="bottom"]   { transform-origin: center top; }
.kwl-tooltip[data-placement="left"]     { transform-origin: right center; }
.kwl-tooltip[data-placement="right"]    { transform-origin: left center; }

/* Pfeil — eine Ecke pro Placement.
   border-color folgt --kwl-tooltip-bg, damit Light/Dark automatisch konsistent ist. */
.kwl-tooltip::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
}

.kwl-tooltip[data-placement="top"]::after,
.kwl-tooltip[data-placement="bottom"][data-flipped="true"]::after {
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
	border-top-color: var(--kwl-tooltip-bg, #222);
}

.kwl-tooltip[data-placement="bottom"]::after,
.kwl-tooltip[data-placement="top"][data-flipped="true"]::after {
	left: 50%;
	top: -12px;
	transform: translateX(-50%);
	border-bottom-color: var(--kwl-tooltip-bg, #222);
}

.kwl-tooltip[data-placement="right"]::after,
.kwl-tooltip[data-placement="left"][data-flipped="true"]::after {
	top: 50%;
	left: -12px;
	transform: translateY(-50%);
	border-right-color: var(--kwl-tooltip-bg, #222);
}

.kwl-tooltip[data-placement="left"]::after,
.kwl-tooltip[data-placement="right"][data-flipped="true"]::after {
	top: 50%;
	right: -12px;
	transform: translateY(-50%);
	border-left-color: var(--kwl-tooltip-bg, #222);
}

/* Dark-Mode: Tooltips wirken bei dunklem Theme besser hell auf hellem Grund.
   Frontend nutzt prefers-color-scheme, Admin nutzt .kw-dark-Klasse. Beides abdecken. */
@media (prefers-color-scheme: dark) {
	.kwl-tooltip {
		--kwl-tooltip-bg: #e2e8f0;
		--kwl-tooltip-text: #1a202c;
	}
}

html.kw-dark .kwl-tooltip,
body.kw-dark-body .kwl-tooltip {
	--kwl-tooltip-bg: #e2e8f0;
	--kwl-tooltip-text: #1a202c;
}

/* Forced-Colors / High-Contrast (Windows HC, §321) */
@media (forced-colors: active) {
	.kwl-tooltip {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
		box-shadow: none;
	}
	.kwl-tooltip::after {
		display: none;
	}
}

/* Reduzierte Bewegung: Snap-Show/Hide statt Fade+Scale. */
@media (prefers-reduced-motion: reduce) {
	.kwl-tooltip,
	.kwl-tooltip.is-open {
		transition: none;
		transform: none;
	}
}

/* Progressive Enhancement: CSS Anchor Positioning, wenn Browser unterstützt.
   JS setzt anchor-name am Trigger + position-anchor am Popover.
   Hier nur die deklarative Anchor-Verknüpfung. Fallback: JS-Positioning.

   Wir nutzen es derzeit NICHT als primären Positionierungs-Mechanismus
   (Browser-Support 2026 noch nicht voll Baseline), behalten den Hook
   aber für späteren Ausbau. */
@supports (anchor-name: --x) {
	.kwl-tooltip[style*="position-anchor"] {
		/* Hook reserviert. Wenn wir später JS-Position-Calc entfernen wollen:
		   inset-area / position-try-fallbacks hier ergänzen. */
	}
}