/*
 * Abstimmungen
 * Seite ist dunkel: Farben hier dunkel, editor.css setzt dieselben Variablen hell.
 * Keine Gradients, kein Glow. Bedeutung nie nur über Farbe (Symbol + Text im Badge).
 * Badges Grün/Rot, Kontrast ≥ 4.5:1. Symbol (✓ ✗ –) trägt die Bedeutung auch ohne Farbunterscheidung.
 */

.ab {
	--ab-surface: #151a21;
	--ab-head: #1b222b;
	--ab-text: #c9d1d9;
	--ab-heading: #f0f3f6;
	--ab-muted: #9aa5b1;
	--ab-border: #2a323d;
	--ab-focus: #56b4e9;
	--ab-pro: #15af70;
	--ab-on-pro: #04140d; /* Weiß auf diesem Grün nur 2.8:1 */
	--ab-contra: #cf222e;
	--ab-on-contra: #ffffff;
	--ab-neutral: #4b5563;
	--ab-on-neutral: #ffffff;
	--ab-radius: 10px;
	container-type: inline-size;
	color: var(--ab-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Lange Wörter (Stadtverordnetenversammlung) trennen statt Querscrollen. */
	overflow-wrap: anywhere;
	hyphens: auto;
	color-scheme: dark;
}

.ab-title {
	margin: 0 0 1rem;
	color: var(--ab-heading);
}

/* ---------- Sitzung (einklappbar) ---------- */

/* !important bei Rahmen: Themes setzen details-/Zellrahmen gern selbst (sonst fehlt z. B. der rechte Rand). */
.ab .ab-sitzung {
	margin: 0 0 0.75rem;
	border: 1px solid var(--ab-border) !important;
	border-radius: var(--ab-radius);
	background: var(--ab-surface);
	overflow: hidden;
}

.ab-sitzung > summary,
.ab-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	padding: 0.9rem 1rem;
}

.ab-sitzung > summary {
	/* Theme-Styles für summary (Rahmen, Fläche) raus; Fokus-Rahmen kommt über outline. */
	border: 0 !important;
	background: none !important;
	list-style: none;
	cursor: pointer;
}

.ab-sitzung > summary::-webkit-details-marker {
	display: none;
}

/* Pfeil: zeigt nach rechts (zu) bzw. unten (offen) */
.ab-sitzung > summary::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.15rem;
	border-right: 2px solid var(--ab-muted);
	border-bottom: 2px solid var(--ab-muted);
	rotate: -45deg;
}

.ab-sitzung[open]:not(.is-closing) > summary::before {
	rotate: 45deg;
}

@media (prefers-reduced-motion: no-preference) {
	.ab-sitzung > summary::before {
		transition: rotate 0.28s ease;
	}
}

.ab-sitzung > summary:focus-visible {
	outline: 2px solid var(--ab-focus);
	outline-offset: -2px;
}

.ab-sitzung-title {
	flex: 1 1 16rem;
	margin: 0;
	color: var(--ab-heading);
	font-size: 1.05rem;
	line-height: 1.35;
}

.ab-count {
	color: var(--ab-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* ---------- Tabelle ----------
 * Selektoren mit ".ab .ab-table" und !important bei Farben: Themes stylen table/td oft
 * selbst (Streifen, dunkle Zellen, nowrap) und würden sonst Zeilenfarben überdecken.
 * Zeilenfarbe kommt als --ab-row / --ab-row-text inline am <tr>.
 */

.ab .ab-table {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.95rem;
	line-height: 1.45;
}

.ab .ab-table,
.ab .ab-table :is(thead, tbody, tr) {
	border: 0 !important;
	background: none !important;
}

.ab .ab-table :is(th, td) {
	padding: 0.65rem 0.75rem;
	border: 0 !important;
	border-top: 1px solid var(--ab-border) !important;
	text-align: left;
	vertical-align: top;
	white-space: normal;
}

.ab .ab-table :is(th + th, td + td) {
	border-left: 1px solid var(--ab-border) !important;
}

.ab .ab-table th {
	/* Kopf nur zwischen Wörtern umbrechen ("Mein / Stimmverhalten"), nicht mitten in "TOP". */
	overflow-wrap: normal;
	hyphens: manual;
	background: var(--ab-head) !important;
	color: var(--ab-muted) !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ab .ab-table td {
	/* Ohne eigene Farbe deckend in Flächenfarbe (Editor weiß, Seite dunkel), nie Theme-Farbe. */
	background: var(--ab-row, var(--ab-surface)) !important;
	color: var(--ab-row-text, var(--ab-text)) !important;
}

/* Schmale Spalten so breit wie ihr Inhalt, Antrag bekommt den Rest. */
.ab .ab-table :is(.ab-c-top, .ab-c-stimme, .ab-c-ergebnis) {
	width: 1%;
}

/* Nur Inhalt nicht umbrechen, Spaltenköpfe dürfen. */
.ab .ab-table td:is(.ab-c-top, .ab-c-stimme, .ab-c-ergebnis) {
	white-space: nowrap;
}

.ab .ab-table .ab-c-antragsteller {
	width: 9rem;
}

.ab .ab-table td.ab-c-top {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.ab .ab-c-antrag a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Badges ---------- */

.ab-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.ab-badge.is-pro {
	background: var(--ab-pro);
	color: var(--ab-on-pro);
}

.ab-badge.is-contra {
	background: var(--ab-contra);
	color: var(--ab-on-contra);
}

.ab-badge.is-neutral {
	background: var(--ab-neutral);
	color: var(--ab-on-neutral);
}

/* ---------- Schmal: jede Zeile eine Karte ---------- */

@container (max-width: 720px) {
	.ab .ab-table thead {
		display: none;
	}

	.ab .ab-table,
	.ab .ab-table tbody {
		display: block;
	}

	/* Karte: Farbe auf der ganzen Zeile, Zellen durchsichtig (sonst Lücken zwischen den Zellen). */
	.ab .ab-table tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"top who erg"
			"antrag antrag antrag"
			"stimme stimme stimme";
		gap: 0.4rem 0.75rem;
		padding: 0.85rem 1rem;
		border-top: 1px solid var(--ab-border) !important;
		background: var(--ab-row, var(--ab-surface)) !important;
	}

	.ab .ab-table td {
		width: auto !important;
		padding: 0;
		border: 0 !important;
		background: none !important;
	}

	.ab .ab-table .ab-c-top { grid-area: top; }
	.ab .ab-table .ab-c-antragsteller { grid-area: who; font-weight: 600; }
	.ab .ab-table .ab-c-antrag { grid-area: antrag; }
	.ab .ab-table .ab-c-stimme { grid-area: stimme; }
	.ab .ab-table .ab-c-ergebnis { grid-area: erg; }

	.ab .ab-table td.ab-c-stimme::before {
		content: attr(data-label) ": ";
		font-size: 0.85rem;
	}
}