/* Paritaet WPCodeBox #100: line-height in em bleibt 1:1. */
/* stylelint-disable declaration-property-unit-allowed-list */

.gn-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	line-height: 1.5em;
	padding: 4px 12px;
	font-weight: 600;
	white-space: nowrap;
}

.gn-status-badge::before {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	content: "";
	background-color: currentcolor;
}

.gn-bg-gray {
	background-color: rgba(101, 117, 140, 0.08);
	color: var(--status-gesendet);
}

/* Ungenutzt (Stand 0.81.0) -- Abgelehnt nutzt jetzt .gn-bg-red fuer besseren
   Kontrast zu Neu/Angenommen. Bewusst nicht geloescht, falls eine neutrale
   Variante spaeter wieder gebraucht wird. */
.gn-bg-neutral {
	background-color: #e5e7eb;
	color: #6b7280;
}

.gn-bg-blue {
	background-color: rgba(2, 133, 199, 0.08);
	color: var(--status-gesehen);
}

.gn-bg-green {
	background-color: rgba(21, 163, 73, 0.08);
	color: var(--status-angenommen);
}

.gn-bg-red {
	background-color: rgba(219, 37, 37, 0.08);
	color: var(--status-abgelehnt);
}

.gn-af-actions {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

/*
 * gn-af-locked / text-xs: bewusst hier definiert statt ueber GenerateBlocks
 * Global Classes / block-spezifisch generiertes CSS admin-seitig in der DB
 * (kein Export nach git) -- .gn-af-locked war sogar in mehreren
 * Block-Instanzen einzeln dupliziert gepflegt (style-35988.css,
 * style-38037.css). Ein Code-Deploy brachte das Layout dieses Blocks damit
 * auf keiner Umgebung zuverlaessig mit (dieselbe Klasse Problem wie zuvor bei
 * der ACF-Choice). .btn-primary/.btn-outline/.btn-sm bleiben dagegen bewusst
 * die sitegweiten Klassen -- die sind echtes, geteiltes Design-System und
 * werden an vielen anderen Stellen verwendet, keine Duplizierung noetig.
 */
.gn-af-locked {
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

.gn-af-locked > span {
	color: var(--text-body);
	text-align: center;
}

.text-xs {
	font-size: 0.8125rem;
	line-height: 1.5em;
}

/* .btn-outline traegt einen 1.5px-Rahmen, .btn-secondary keinen -- ohne
   Ausgleich wirkt "Anfrage annehmen" dadurch niedriger als "Anfrage
   ablehnen". Transparenter Rahmen gleicht die Box-Hoehe an, ohne die
   sitegweiten .btn-secondary/.btn-outline-Klassen selbst anzufassen.
   Farbe bewusst wie der "Angenommen"-Badge (var(--status-angenommen)) --
   vollflaechig statt nur als Tint, damit die Aktion optisch schon auf das
   Ergebnis (angenommen) vorausdeutet. Hover dunkelt dieselbe Gruen-Familie
   ab (analog btn-primary: dunklerer Ton + Schatten + leichtes Anheben),
   statt der sonst ueblichen Tint-zu-Vollton-Bewegung -- die ist hier schon
   der Grundzustand. */
.gn-af-actions .sp-unlock-btn {
	border: 1.5px solid transparent;
	background-color: var(--status-angenommen);
	color: #fff;
	box-shadow: none;
}

.gn-af-actions .sp-unlock-btn:is(:hover, :focus) {
	background-color: #15803d;
	box-shadow: 0 4px 14px rgba(21, 163, 73, 0.35);
	transform: translate3d(0, -1px, 0);
}

/* .btn-outline nutzt sitegweit var(--primary-16)/var(--primary-500) fuer
   Rahmen und Text -- fuer die Ablehnen-Aktion stattdessen durchgaengig die
   Sekundaerrot-Familie (--secondary-500), Rahmen bei fehlender
   --secondary-16-Variante direkt als rgba nachgebaut. */
.gn-af-actions .sp-decline-btn {
	border-color: rgba(244, 69, 69, 0.16);
	color: var(--secondary-500);
}

.gn-af-actions .sp-decline-btn:is(:hover, :focus) {
	border-color: var(--secondary-500);
}