/*
 * SG Basis – Bausteine (Kürzel sgb-). Nur Tokens aus sg-tokens.css, keine festen Farben.
 *
 * Durchsetzung gegen Salient ohne Cascade Layer: jede Regel trägt den Anker :not(#sgb). Er trifft jedes Element
 * und hebt die Spezifität auf 1-1-0, also über alle Salient- und Typo-Ebenen-Regeln ohne ID. !important nur dort,
 * wo Salient oder die Typo-Ebene selbst !important setzen (Polster, Radius, Schrift von Feldern und Labels).
 * Abweichungen nicht per Gegenregel im Plugin, sondern als Variante hier ergänzen.
 */

/* ---------- Fokus: 2 px Ring, 2 px Abstand, nur bei Tastatur ---------- */
.sgb-btn:not(#sgb):focus-visible,
.sgb-icon-btn:not(#sgb):focus-visible,
.sgb-input:not(#sgb):focus-visible,
.sgb-focus:not(#sgb):focus-visible {
	outline: var(--sg-focus-ring) !important;
	outline-offset: var(--sg-focus-offset) !important;
	box-shadow: none;
}
.sgb-btn:not(#sgb):focus:not(:focus-visible),
.sgb-icon-btn:not(#sgb):focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Button ---------- */
.sgb-btn:not(#sgb) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--sg-spacing) * 1.5);
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: var(--sg-control-height);
	margin: 0;
	padding: 0 calc(var(--sg-spacing) * 6) !important;
	border: 1.5px solid transparent;
	border-radius: var(--sg-radius-md) !important;
	background: transparent;
	color: var(--sg-foreground);
	font: var(--sg-text-ui);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	box-shadow: none;
	opacity: 1;
	transform: none;
	transition: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.sgb-btn:not(#sgb) svg { flex: none; width: 18px; height: 18px; }
.sgb-btn--primary:not(#sgb) { background: var(--sg-primary); border-color: var(--sg-primary); color: var(--sg-primary-foreground); }
.sgb-btn--primary:not(#sgb):hover { background: var(--sg-primary-hover); border-color: var(--sg-primary-hover); color: var(--sg-primary-foreground); }
.sgb-btn--secondary:not(#sgb) { background: var(--sg-secondary); border-color: var(--sg-secondary); color: var(--sg-secondary-foreground); }
.sgb-btn--secondary:not(#sgb):hover { background: var(--sg-paper-200); border-color: var(--sg-paper-200); color: var(--sg-secondary-foreground); }
.sgb-btn--outline:not(#sgb) { background: transparent; border-color: var(--sg-primary); color: var(--sg-primary); }
.sgb-btn--outline:not(#sgb):hover { background: var(--sg-accent); border-color: var(--sg-accent-foreground); color: var(--sg-accent-foreground); }
.sgb-btn--compact:not(#sgb) { min-height: var(--sg-control-height-compact); padding: 0 calc(var(--sg-spacing) * 4) !important; }
.sgb-btn--block:not(#sgb) { display: flex; width: 100%; }
.sgb-btn:not(#sgb):disabled,
.sgb-btn:not(#sgb)[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Runder Icon-Knopf 44 px (aria-label Pflicht) ---------- */
.sgb-icon-btn:not(#sgb) {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	flex: none;
	width: var(--sg-control-height-compact);
	min-width: var(--sg-control-height-compact);
	height: var(--sg-control-height-compact);
	min-height: var(--sg-control-height-compact);
	margin: 0;
	padding: 0 !important;
	border: 1.5px solid var(--sg-primary);
	border-radius: var(--sg-radius-full) !important;
	background: var(--sg-background);
	color: var(--sg-primary);
	font-size: 0;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
	transition: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.sgb-icon-btn:not(#sgb) svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; }
.sgb-icon-btn:not(#sgb):hover { background: var(--sg-accent); border-color: var(--sg-accent-foreground); color: var(--sg-accent-foreground); }
.sgb-icon-btn--ghost:not(#sgb) { border-color: transparent; background: transparent; color: var(--sg-muted-foreground); }
.sgb-icon-btn--ghost:not(#sgb):hover { border-color: transparent; background: var(--sg-muted); color: var(--sg-foreground); }

/* Ein gesetztes display überstimmt sonst das hidden-Attribut */
.sgb-btn:not(#sgb)[hidden],
.sgb-icon-btn:not(#sgb)[hidden] { display: none; }

/* ---------- Feld: Label, Eingabe, Hinweis ---------- */
.sgb-field:not(#sgb) { display: grid; gap: var(--sg-spacing); align-content: start; min-width: 0; }
.sgb-label:not(#sgb) {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--sg-foreground);
	font: 500 1rem/1.4 var(--sg-font-sans) !important;
	letter-spacing: 0;
	text-transform: none;
}
.sgb-label:not(#sgb) span { color: inherit; }
.sgb-input:not(#sgb) {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: var(--sg-control-height);
	margin: 0;
	padding: 0 calc(var(--sg-spacing) * 4) !important;
	border: 1px solid var(--sg-input) !important;
	border-radius: var(--sg-radius-md) !important;
	background: var(--sg-popover) !important;
	color: var(--sg-foreground);
	font: 400 1.0625rem/1.3 var(--sg-font-sans) !important;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: var(--sg-shadow-xs);
	transition: none; /* Salient animiert Felder mit „transition: all“ – der Fokusrahmen muss sofort stehen */
	-webkit-appearance: none;
	appearance: none;
}
textarea.sgb-input:not(#sgb) { min-height: 7.5rem; padding: calc(var(--sg-spacing) * 3) calc(var(--sg-spacing) * 4) !important; resize: vertical; }
select.sgb-input:not(#sgb) {
	padding-right: calc(var(--sg-spacing) * 10) !important;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
	background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52% !important;
	background-size: 6px 6px !important;
	background-repeat: no-repeat !important;
}
.sgb-input:not(#sgb)::placeholder { color: var(--sg-muted-foreground); opacity: 1; }
.sgb-input:not(#sgb)[aria-invalid="true"] { border-color: var(--sg-destructive) !important; }
.sgb-input:not(#sgb):disabled { border-color: var(--sg-paper-300) !important; background: var(--sg-muted) !important; color: var(--sg-muted-foreground); cursor: not-allowed; }
.sgb-hint:not(#sgb) { margin: 0; color: var(--sg-muted-foreground); font: var(--sg-text-small); }
.sgb-hint--error:not(#sgb) { color: var(--sg-destructive); }
.sgb-hint--warning:not(#sgb) { color: var(--sg-warning); }
.sgb-hint:not(#sgb) a { color: var(--sg-primary); }

/* ---------- Screenreader-Text ---------- */
.sgb-sr:not(#sgb):not(.sgb-sr--focusable:focus):not(.sgb-sr--focusable:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ---------- Trefferfläche mind. 44 × 44 px, ohne das Layout zu verschieben ---------- */
.sgb-hit:not(#sgb) { position: relative; }
.sgb-hit:not(#sgb)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, var(--sg-control-height-compact));
	height: max(100%, var(--sg-control-height-compact));
	transform: translate(-50%, -50%);
}

/* ---------- Bewegung und erzwungene Farben ---------- */
@media (prefers-reduced-motion: no-preference) {
	.sgb-btn:not(#sgb),
	.sgb-icon-btn:not(#sgb) { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
	.sgb-input:not(#sgb) { transition: border-color 0.15s; }
}
@media (forced-colors: active) {
	.sgb-btn:not(#sgb),
	.sgb-icon-btn:not(#sgb) { border-color: ButtonText; }
	.sgb-btn:not(#sgb):focus-visible,
	.sgb-icon-btn:not(#sgb):focus-visible,
	.sgb-input:not(#sgb):focus-visible,
	.sgb-focus:not(#sgb):focus-visible { outline-color: Highlight !important; }
}