/* ============================================================
   Volleybees Spieler360 – Öffentliche Portal-Seiten
   ============================================================
   Nachtrag (Theme-Einbettung): diese Datei gibt den öffentlichen
   Seiten bewusst KEINE eigene visuelle Identität mehr (keine feste
   Hintergrundfarbe, kein eigenes Font-Family, kein "Glass"-Look) -
   nur noch Layout/Abstände/Struktur. Farbe, Schriftart, Button-
   Aussehen etc. werden dadurch automatisch vom aktiven WordPress-
   Theme übernommen, ganz ohne manuelle Konfiguration.

   Die --vb-primary/--vb-text/--vb-border/--vb-surface-Variablen aus
   "Design -> Zusätzliches CSS" werden weiterhin unterstützt (falls
   dort gesetzt, z. B. für eine bewusste Akzentfarbe), sind aber NICHT
   mehr Voraussetzung - die Fallback-Werte (nach dem Komma in var())
   sind jetzt selbst theme-neutral (inherit/transparent/currentColor)
   statt fest auf das frühere Dark-Glass/Honig-Gold-Branding zu zeigen.

   Buttons bekommen bewusst KEIN eigenes Aussehen - normale <button>-
   und <input type="submit">-Elemente, die 1:1 den Style des Themes
   übernehmen. Absagen/Unsicher heben sich nur per dezentem Rahmen +
   Hover-Akzentfarbe vom Standard-Button ab (kein eigener Hintergrund).
   ============================================================ */

.vb-public-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 0;
	/* Sagt dem Browser, dass sowohl helles als auch dunkles natives
	   Aussehen (Formularelemente, Scrollbars, Checkboxen etc.) hier
	   passend ist - reduziert das Risiko dunkler Bedienelemente auf
	   einer dunklen Seite ohne Kontrast, für alles, das wir nicht
	   selbst explizit einfärben. */
	color-scheme: light dark;
}

.vb-public-card {
	/* Leichtes "Anheben" gegenüber dem Hintergrund statt komplett
	   transparent - funktioniert unabhängig davon, ob die Seite hell
	   oder dunkel ist (neutrales Grau mit geringer Deckkraft), und
	   sorgt für sichtbare Kartenränder auch vor einem unruhigen/
	   gemusterten Theme-Hintergrund. */
	background: var(--vb-surface, rgba(127, 127, 127, 0.08));
	border: 1px solid var(--vb-border, rgba(127, 127, 127, 0.3));
	border-radius: 0.5rem;
	padding: 24px;
	margin-bottom: 16px;
}

.vb-public-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.vb-public-form select {
	flex: 1 1 240px;
	min-width: 0;
	/* Explizit gesetzter Hintergrund + geerbte Textfarbe statt dem
	   Browser das native Aussehen zu überlassen - auf dunklen Themes
	   rendern manche Browser sonst ein natives Auswahlfeld mit
	   schlechtem Kontrast (dunkler Text auf dunklem Grund). */
	background: var(--vb-surface, rgba(127, 127, 127, 0.1));
	color: inherit;
	border: 1px solid var(--vb-border, rgba(127, 127, 127, 0.35));
	border-radius: 0.4rem;
	padding: 10px 12px;
}

.vb-team-filter {
	flex: 0 1 180px;
}

.vb-public-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.vb-public-header h2 {
	margin: 0;
}

.vb-public-switch {
	font-size: 14px;
	color: var(--vb-primary, inherit);
	white-space: nowrap;
}

.vb-public-notice {
	padding: 12px 16px;
	border-radius: 0.4rem;
	margin-bottom: 16px;
	border-left: 4px solid transparent;
	background: var(--vb-surface, rgba(127, 127, 127, 0.08));
}

.vb-public-notice-ok {
	border-left-color: #6fcf7c;
}

.vb-public-notice-error {
	border-left-color: #ef8b8b;
}

.vb-event-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.vb-event-date {
	font-weight: 600;
	font-size: 1.05rem;
}

.vb-event-meta {
	font-size: 0.9rem;
	margin-top: 2px;
	opacity: 0.75;
}

.vb-event-notiz {
	font-size: 0.9rem;
	font-style: italic;
	margin-top: 6px;
	max-width: 480px;
}

.vb-event-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.vb-event-actions form {
	margin: 0;
}

/* Absagen/Unsicher heben sich nur per Rahmen + Hover-Akzentfarbe vom
   Standard-Button des Themes ab - kein eigener Hintergrund, keine
   eigene Textfarbe im Ruhezustand (erbt vom Theme). !important nur,
   um gegen eine ggf. global gesetzte Button-Hintergrundfarbe des
   Themes/Additional-CSS anzutreten, ohne die Textfarbe zu erzwingen. */
.vb-btn-absagen,
.vb-btn-unsicher {
	background-color: transparent !important;
	border: 1px solid var(--vb-border, rgba(127, 127, 127, 0.35)) !important;
}

.vb-btn-absagen:hover {
	border-color: #ef8b8b !important;
	color: #ef8b8b !important;
}

.vb-btn-unsicher:hover {
	border-color: #f0ad4e !important;
	color: #f0ad4e !important;
}

/* Bereits gewählter Status: Button deaktiviert, aber weiter lesbar
   statt stark ausgegraut wie der Browser-Standard. */
.vb-event-actions button:disabled {
	opacity: 0.55;
	cursor: default;
}

.vb-status {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	margin-top: 8px;
	border: 1px solid transparent;
}

.vb-status-zugesagt {
	background: rgba(111, 207, 124, 0.16);
	color: #3f9350;
	border-color: rgba(111, 207, 124, 0.4);
}

.vb-status-abgesagt {
	background: rgba(239, 139, 139, 0.16);
	color: #c94f4f;
	border-color: rgba(239, 139, 139, 0.4);
}

.vb-status-offen {
	background: rgba(127, 127, 127, 0.14);
	color: inherit;
	border-color: rgba(127, 127, 127, 0.35);
}

.vb-status-unsicher {
	background: rgba(240, 173, 78, 0.18);
	color: #a86a1d;
	border-color: rgba(240, 173, 78, 0.45);
}

/* ---------- Aufstellungs-Ansicht [vb_aufstellung] ---------- */

.vb-lineup-card h3 {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 1.05rem;
}

.vb-lineup-table {
	width: 100%;
	border-collapse: collapse;
}

.vb-lineup-table th,
.vb-lineup-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--vb-border, rgba(127, 127, 127, 0.25));
}

.vb-lineup-table th {
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.75;
}

.vb-lineup-table tbody tr:last-child td {
	border-bottom: none;
}

/* ---------- Aufstellung je Satz: Court-Raster (2 Reihen à 3 Personen) ---------- */

.vb-lineup-satz-block {
	margin: 0 0 20px;
}

.vb-lineup-satz-block:last-child {
	margin-bottom: 0;
}

.vb-lineup-satz-title {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--vb-primary, inherit);
}

.vb-lineup-court {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 480px;
	margin: 0 0 10px;
}

.vb-lineup-court-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.vb-lineup-court-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 6px;
	min-height: 60px;
	border: 1px dashed var(--vb-border, rgba(127, 127, 127, 0.3));
	border-radius: 6px;
	text-align: center;
}

.vb-lineup-court-cell-filled {
	border-style: solid;
	border-color: var(--vb-primary, rgba(127, 127, 127, 0.5));
	background: var(--vb-surface, rgba(127, 127, 127, 0.06));
}

.vb-lineup-court-position {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.75;
}

.vb-lineup-court-player {
	font-weight: 600;
}

.vb-lineup-court-empty {
	font-weight: 400;
	opacity: 0.6;
}

.vb-lineup-bench {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

/* ---------- Verfügbarkeits-Regeln (Nachtrag v0.7.0) ---------- */

.vb-availability-card h3 {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 1.05rem;
}

.vb-availability-card h4 {
	margin: 20px 0 4px;
	font-weight: 600;
	font-size: 0.92rem;
}

.vb-availability-card h4:first-of-type {
	margin-top: 12px;
}

.vb-availability-weekday-form {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
	margin-top: 10px;
}

.vb-availability-weekday-option {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.9rem;
}

.vb-availability-absence-list {
	list-style: none;
	margin: 10px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vb-availability-absence-list li {
	font-size: 0.9rem;
}

.vb-availability-absence-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
}

.vb-availability-absence-form input[type="date"],
.vb-availability-absence-form input[type="text"] {
	background: var(--vb-surface, rgba(127, 127, 127, 0.1));
	color: inherit;
	border: 1px solid var(--vb-border, rgba(127, 127, 127, 0.35));
	border-radius: 0.4rem;
	padding: 8px 10px;
}

/* ---------- Status-Übersicht [vb_status_uebersicht] (Nachtrag v0.7.0) ---------- */

.vb-status-overview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-weight: 600;
}

.vb-status-overview-header a {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--vb-primary, inherit);
}

.vb-status-overview-empty {
	margin: 0;
	opacity: 0.75;
}

.vb-status-overview-event {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vb-status-overview-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 6px 8px;
	border-radius: 0.4rem;
	background: var(--vb-surface, rgba(127, 127, 127, 0.12));
	color: var(--vb-primary, inherit);
}

.vb-status-overview-weekday {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.vb-status-overview-day {
	font-weight: 700;
	font-size: 1rem;
}

.vb-status-overview-title {
	font-weight: 600;
	font-size: 1.05rem;
}

.vb-status-overview-team {
	display: block;
	font-weight: 400;
	font-size: 0.85rem;
	opacity: 0.75;
}

.vb-status-overview-meta {
	display: flex;
	gap: 16px;
	margin-top: 10px;
	font-size: 0.88rem;
	opacity: 0.75;
}

.vb-status-overview-counts {
	display: flex;
	gap: 18px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--vb-border, rgba(127, 127, 127, 0.25));
}

.vb-status-overview-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	font-size: 0.95rem;
}

.vb-status-overview-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 0.75rem;
}

.vb-status-overview-count-zugesagt {
	color: #3f9350;
}
.vb-status-overview-count-zugesagt .vb-status-overview-icon {
	background: rgba(111, 207, 124, 0.18);
}

.vb-status-overview-count-unsicher {
	color: #a86a1d;
}
.vb-status-overview-count-unsicher .vb-status-overview-icon {
	background: rgba(240, 173, 78, 0.2);
}

.vb-status-overview-count-abgesagt {
	color: #c94f4f;
}
.vb-status-overview-count-abgesagt .vb-status-overview-icon {
	background: rgba(239, 139, 139, 0.18);
}

.vb-status-overview-count-offen {
	opacity: 0.7;
}
.vb-status-overview-count-offen .vb-status-overview-icon {
	background: rgba(127, 127, 127, 0.14);
}

@media (max-width: 480px) {
	.vb-event-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.vb-event-actions {
		width: 100%;
	}

	.vb-event-actions form {
		flex: 1;
	}

	.vb-event-actions button {
		width: 100%;
	}
}