/**
 * RSV Spinning — App-Frontend-Styles. Strikt unter `.rsv-spin-app`
 * gescoped (ARCHITECTURE.md §90) — keine globalen Selektoren, keine
 * Konflikte mit Theme-CSS. Eigene, unabhängige Tokens (SECURITY/
 * ARCHITECTURE §63 Theme-Independence) — dieselben Markenwerte wie das
 * RSV-Theme (Navy/Blue/White/Grey/Yellow), aber nicht von dessen
 * tokens.css abhängig, damit das Plugin auch mit einem anderen Theme
 * funktioniert. Etwas dunkler/leistungsorientierter als die übrige
 * Website (spinning-integration-Skill §Design).
 *
 * Mobile First (§60): Referenz 390px, einspaltig, große Touch-Targets.
 */

.rsv-spin-app {
	--rsv-spin-navy: #062b4f;
	--rsv-spin-navy-dark: #031c34;
	--rsv-spin-blue: #075aa7;
	--rsv-spin-yellow: #f4c318;
	--rsv-spin-yellow-dark: #dfaa00;
	--rsv-spin-white: #ffffff;
	--rsv-spin-grey-100: #eff1f2;
	--rsv-spin-grey-200: #e1e4e6;
	--rsv-spin-grey-500: #7b858d;
	--rsv-spin-text: #15232d;
	--rsv-spin-text-muted: #5f6970;
	--rsv-spin-error: #b3261e;
	--rsv-spin-error-bg: #fbeae9;
	--rsv-spin-success: #1e7a46;
	--rsv-spin-success-bg: #e8f4ec;
	--rsv-spin-warning: #8a5a00;
	--rsv-spin-warning-bg: #fdf3d8;
	--rsv-spin-radius: 6px;
	--rsv-spin-focus: 2px solid var(--rsv-spin-blue);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--rsv-spin-text);
	max-width: 480px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}

/* §R: Platz fuer die fixierte Bottom-Nav, damit sie nie Content ueberdeckt --
 * nur auf Seiten, die tatsaechlich eine Bottom-Nav rendern (eingeloggter
 * App-Bereich), nicht auf Login/Register/Token-Ergebnis-Seiten. */
.rsv-spin-app:has(.rsv-spin-bottomnav) {
	padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

/* §P: Desktop darf breiter/grosszuegiger wirken -- kein SPA-Framework,
 * nur groessere Breakpoints fuer denselben server-gerenderten Markup. */
@media (min-width: 900px) {
	.rsv-spin-app {
		max-width: 1100px;
	}
	.rsv-spin-app:has(.rsv-spin-bottomnav) {
		padding-bottom: 1.5rem; /* Bottom-Nav ist ab hier ausgeblendet, siehe unten. */
	}
}

@media (min-width: 1280px) {
	.rsv-spin-app {
		max-width: 1280px;
	}
}

.rsv-spin-app *,
.rsv-spin-app *::before,
.rsv-spin-app *::after {
	box-sizing: border-box;
}

.rsv-spin-app a:focus-visible,
.rsv-spin-app button:focus-visible,
.rsv-spin-app input:focus-visible,
.rsv-spin-app textarea:focus-visible {
	outline: var(--rsv-spin-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Auth Shell / Login Card / Register Form (§59)
 * --------------------------------------------------------------- */
.rsv-spin-auth-shell__brand {
	text-align: center;
	margin-bottom: 1.5rem;
}

.rsv-spin-auth-shell__eyebrow {
	color: var(--rsv-spin-blue);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	margin: 0 0 0.25rem;
}

.rsv-spin-auth-shell__title {
	color: var(--rsv-spin-navy-dark);
	font-size: 1.5rem;
	margin: 0;
}

.rsv-spin-auth-card {
	background: var(--rsv-spin-white);
	border: 1px solid var(--rsv-spin-grey-200);
	border-radius: var(--rsv-spin-radius);
	padding: 1.5rem;
}

.rsv-spin-auth-card__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1.25rem;
	text-align: center;
}

.rsv-spin-auth-card__links a {
	color: var(--rsv-spin-blue);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Forms
 * --------------------------------------------------------------- */
.rsv-spin-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rsv-spin-field-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 600px) {
	.rsv-spin-field-row {
		flex-direction: row;
	}
	.rsv-spin-field-row .rsv-spin-field {
		flex: 1;
	}
}

.rsv-spin-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
}

.rsv-spin-field input[type="text"],
.rsv-spin-field input[type="email"],
.rsv-spin-field input[type="password"],
.rsv-spin-field input[type="tel"],
.rsv-spin-field input[type="date"],
.rsv-spin-field textarea {
	width: 100%;
	min-height: 48px; /* §60: grosse Touch-Targets */
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--rsv-spin-grey-500);
	border-radius: var(--rsv-spin-radius);
	font-size: 1rem;
	background: var(--rsv-spin-white);
	color: var(--rsv-spin-text);
}

.rsv-spin-field input[aria-invalid="true"] {
	border-color: var(--rsv-spin-error);
}

.rsv-spin-field__error {
	color: var(--rsv-spin-error);
	font-size: 0.85rem;
	margin: 0.35rem 0 0;
}

.rsv-spin-form__hint {
	color: var(--rsv-spin-text-muted);
	font-size: 0.85rem;
	margin: -0.5rem 0 0;
}

.rsv-spin-fieldset {
	border: 1px solid var(--rsv-spin-grey-200);
	border-radius: var(--rsv-spin-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.rsv-spin-fieldset legend {
	font-weight: 600;
	padding: 0 0.4rem;
	color: var(--rsv-spin-text-muted);
}

.rsv-spin-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.rsv-spin-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

.rsv-spin-password-field {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.rsv-spin-password-field input {
	flex: 1;
}

.rsv-spin-password-toggle {
	min-height: 48px;
	padding: 0 0.85rem;
	border: 1px solid var(--rsv-spin-grey-500);
	background: var(--rsv-spin-white);
	border-radius: var(--rsv-spin-radius);
	font-size: 0.85rem;
	cursor: pointer;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------- */
.rsv-spin-button {
	display: inline-block;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border-radius: var(--rsv-spin-radius);
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
	width: 100%;
}

.rsv-spin-button--primary {
	background: var(--rsv-spin-navy-dark);
	color: var(--rsv-spin-yellow);
}

.rsv-spin-button--primary:hover,
.rsv-spin-button--primary:focus-visible {
	background: var(--rsv-spin-navy);
}

.rsv-spin-button--secondary {
	background: var(--rsv-spin-white);
	color: var(--rsv-spin-navy-dark);
	border: 1px solid var(--rsv-spin-navy-dark);
}

/* ---------------------------------------------------------------
 * Alerts (Account Status Alert, Verification Notice, §59)
 * --------------------------------------------------------------- */
.rsv-spin-alert {
	padding: 0.85rem 1rem;
	border-radius: var(--rsv-spin-radius);
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.rsv-spin-alert--success {
	background: var(--rsv-spin-success-bg);
	color: var(--rsv-spin-success);
}

.rsv-spin-alert--error {
	background: var(--rsv-spin-error-bg);
	color: var(--rsv-spin-error);
}

.rsv-spin-alert--warning {
	background: var(--rsv-spin-warning-bg);
	color: var(--rsv-spin-warning);
}

/* ---------------------------------------------------------------
 * Dashboard
 * --------------------------------------------------------------- */
.rsv-spin-dashboard__header {
	margin-bottom: 1.5rem;
}

.rsv-spin-dashboard__header h1 {
	color: var(--rsv-spin-navy-dark);
	margin: 0.15rem 0 0.5rem;
	font-size: 1.6rem;
}

.rsv-spin-logout-link {
	color: var(--rsv-spin-blue);
	text-decoration: underline;
	font-size: 0.9rem;
}

.rsv-spin-placeholder-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 1.5rem 0;
}

@media (min-width: 600px) {
	.rsv-spin-placeholder-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.rsv-spin-placeholder-card {
	background: var(--rsv-spin-grey-100);
	border-radius: var(--rsv-spin-radius);
	padding: 1.25rem;
}

.rsv-spin-placeholder-card h2 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	color: var(--rsv-spin-navy-dark);
}

/* ---------------------------------------------------------------
 * Trainingsliste (SPIN-4, §45) — kompakte Zeilen, keine grossen Cards.
 * --------------------------------------------------------------- */
.rsv-spin-sessions-section {
	margin: 1.5rem 0;
}

.rsv-spin-sessions-section h2 {
	font-size: 1.1rem;
	color: var(--rsv-spin-navy-dark);
	margin: 0 0 0.75rem;
}

.rsv-spin-session-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.rsv-spin-session-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.85rem;
	padding: 0.75rem 1rem;
	background: var(--rsv-spin-grey-100);
	border-radius: var(--rsv-spin-radius);
	font-size: 0.9rem;
}

.rsv-spin-session-row__date {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 9rem;
}

.rsv-spin-session-row__meta {
	color: var(--rsv-spin-text-muted);
}

.rsv-spin-session-row__capacity {
	margin-left: auto;
	color: var(--rsv-spin-text-muted);
	font-weight: 600;
}

.rsv-spin-form-card {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rsv-spin-grey-200);
}

.rsv-spin-form-card h2 {
	font-size: 1.1rem;
	color: var(--rsv-spin-navy-dark);
	margin: 0 0 0.5rem;
}

/* ---------------------------------------------------------------
 * Desktop: Auth-Bereich als Split-Layout (§62) — Dashboard/Profil
 * bleiben einspaltig, da sie kein Marketing-Branding brauchen.
 * --------------------------------------------------------------- */
@media (min-width: 900px) {
	.rsv-spin-app:has(.rsv-spin-auth-shell) {
		max-width: 920px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 3rem;
		min-height: 70vh;
	}

	.rsv-spin-auth-shell {
		display: contents;
	}

	.rsv-spin-auth-shell__brand {
		text-align: left;
		background: var(--rsv-spin-navy-dark);
		color: var(--rsv-spin-white);
		padding: 3rem 2.5rem;
		border-radius: var(--rsv-spin-radius);
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.rsv-spin-auth-shell__title {
		color: var(--rsv-spin-white);
		font-size: 2rem;
	}
}

/* ---------------------------------------------------------------
 * App-Navigation (§G, §R): Desktop-Topnav + Mobile-Bottomnav.
 * Dieselbe Markup-Liste, per Media Query jeweils die andere
 * ausgeblendet -- kein doppeltes Rendering/JS noetig.
 * --------------------------------------------------------------- */
.rsv-spin-appnav {
	display: none;
}

/* Mobile Bottom-Nav (§R): sticky/fixed, safe-area, max. 5 Punkte,
 * aktiver Bereich klar erkennbar (Text + Farbe, nicht nur Farbe). Muss
 * VOR dem `@media (min-width:900px)`-Block stehen, der sie ausblendet
 * -- eine spaetere, unconditional Regel mit gleicher Spezifitaet
 * gewinnt sonst unabhaengig von der Media Query per CSS-Kaskade
 * (realer Bug: Bottom-Nav blieb bei 1280px sichtbar, im echten Browser
 * gefunden, siehe TESTING.md). */
.rsv-spin-bottomnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	background: var(--rsv-spin-white);
	border-top: 1px solid var(--rsv-spin-grey-200);
	padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
	box-shadow: 0 -2px 8px rgba(6, 43, 79, 0.08);
}

@media (min-width: 900px) {
	.rsv-spin-appnav {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		margin-bottom: 2rem;
		padding-bottom: 0.75rem;
		border-bottom: 1px solid var(--rsv-spin-grey-200);
	}

	.rsv-spin-appnav__item {
		padding: 0.5rem 0.9rem;
		border-radius: var(--rsv-spin-radius);
		color: var(--rsv-spin-text-muted);
		text-decoration: none;
		font-weight: 600;
		font-size: 0.92rem;
	}

	.rsv-spin-appnav__item:hover,
	.rsv-spin-appnav__item:focus-visible {
		background: var(--rsv-spin-grey-100);
		color: var(--rsv-spin-navy-dark);
	}

	.rsv-spin-appnav__item--active {
		background: var(--rsv-spin-navy-dark);
		color: var(--rsv-spin-yellow);
	}

	.rsv-spin-bottomnav {
		display: none;
	}
}

.rsv-spin-bottomnav__item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.4rem 0.2rem;
	text-decoration: none;
	color: var(--rsv-spin-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--rsv-spin-radius);
	text-align: center;
}

.rsv-spin-bottomnav__item--active {
	color: var(--rsv-spin-navy-dark);
	background: var(--rsv-spin-grey-100);
}

.rsv-spin-bottomnav__item--active .rsv-spin-bottomnav__label::before {
	content: "● ";
	color: var(--rsv-spin-yellow-dark);
}

/* ---------------------------------------------------------------
 * Filter-Tabs (Trainingsuebersicht §I)
 * --------------------------------------------------------------- */
.rsv-spin-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}

.rsv-spin-filter-tabs a {
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--rsv-spin-grey-500);
	color: var(--rsv-spin-text);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 600;
}

.rsv-spin-filter-tabs a[aria-current="page"] {
	background: var(--rsv-spin-navy-dark);
	border-color: var(--rsv-spin-navy-dark);
	color: var(--rsv-spin-yellow);
}

/* ---------------------------------------------------------------
 * Status-Badges (Zahlungen, Buchungshistorie, Karten §J/§K/§M) --
 * Status niemals nur Farbe: Text traegt die Bedeutung, Farbe ist
 * zusaetzliche Verstaerkung (WCAG 2.2 AA).
 * --------------------------------------------------------------- */
.rsv-spin-badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: var(--rsv-spin-grey-100);
	color: var(--rsv-spin-text);
}

.rsv-spin-badge--success {
	background: var(--rsv-spin-success-bg);
	color: var(--rsv-spin-success);
}

.rsv-spin-badge--warning {
	background: var(--rsv-spin-warning-bg);
	color: var(--rsv-spin-warning);
}

.rsv-spin-badge--error {
	background: var(--rsv-spin-error-bg);
	color: var(--rsv-spin-error);
}

.rsv-spin-badge--muted {
	background: var(--rsv-spin-grey-200);
	color: var(--rsv-spin-text-muted);
}

/* ---------------------------------------------------------------
 * Zahlungsart-/Kartentyp-Auswahl (Checkout §L) -- grosse, deutlich
 * anklickbare Radio-Karten statt kleiner Radiobuttons.
 * --------------------------------------------------------------- */
.rsv-spin-option-card {
	display: block;
	border: 2px solid var(--rsv-spin-grey-200);
	border-radius: var(--rsv-spin-radius);
	padding: 1rem;
	cursor: pointer;
}

.rsv-spin-option-card input[type="radio"] {
	width: 20px;
	height: 20px;
	margin-right: 0.6rem;
	vertical-align: middle;
}

.rsv-spin-option-card:has(input:checked) {
	border-color: var(--rsv-spin-navy-dark);
	background: var(--rsv-spin-grey-100);
}

.rsv-spin-option-card--disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------
 * Einfache responsive Tabelle (Zahlungen, Reports §W/§X) --
 * horizontales Scrollen im eigenen Container statt Seiten-Overflow.
 * --------------------------------------------------------------- */
.rsv-spin-table-wrap {
	overflow-x: auto;
	margin: 1rem 0;
	-webkit-overflow-scrolling: touch;
}

.rsv-spin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
	min-width: 480px;
}

.rsv-spin-table th,
.rsv-spin-table td {
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--rsv-spin-grey-200);
}

.rsv-spin-table th {
	color: var(--rsv-spin-text-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

@media (min-width: 1024px) {
	.rsv-spin-placeholder-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}