/**
 * Compacte, opgeruimde opmaak voor de wedstrijdplanner.
 * Uitgangspunten: klein genoeg om in één oogopslag op een telefoon te
 * lezen, grote taphitboxen voor de aanmeld-knoppen (dit wordt vrijwel
 * altijd op een telefoon ingevuld, niet achter een bureau).
 */

.gwp-wedstrijden,
.gwp-scherm {
	--gwp-blauw: #0a5c8a;
	--gwp-blauw-donker: #073f5f;
	--gwp-rand: #e2e5e8;
	--gwp-grijs: #6b7280;
	--gwp-groen: #1a7a41;
	--gwp-rood: #b3261e;
	--gwp-oranje: #b45309;
	--gwp-actie-rood: #e0201b;
	--gwp-actie-rood-donker: #b8160f;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	max-width: 420px;
	margin: 1.5em auto;
}

.gwp-scherm {
	padding: 1.75em 1.5em;
	border: 1px solid var(--gwp-rand);
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
	text-align: center;
	background: #fff;
}

.gwp-scherm p {
	margin: 0 0 0.9em;
	color: #1f2937;
}

.gwp-scherm input[type="password"],
.gwp-scherm select {
	display: block;
	width: 100%;
	padding: 0.7em 0.8em;
	margin: 0 0 1em;
	font-size: 1.05em;
	border: 1px solid var(--gwp-rand);
	border-radius: 8px;
	box-sizing: border-box;
	background: #fafafa;
}

.gwp-scherm input[type="password"]:focus,
.gwp-scherm select:focus {
	outline: 2px solid var(--gwp-blauw);
	outline-offset: 1px;
	background: #fff;
}

.gwp-scherm button,
.gwp-rsvp-formulier button {
	width: 100%;
	padding: 0.7em 1.2em;
	font-size: 1em;
	font-weight: 600;
	background: var(--gwp-blauw);
	color: #fff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gwp-scherm button:hover,
.gwp-rsvp-formulier button:hover {
	background: var(--gwp-blauw-donker);
}

.gwp-fout {
	color: var(--gwp-rood);
	font-weight: 600;
	font-size: 0.95em;
}

.gwp-opgeslagen {
	color: var(--gwp-groen);
	font-weight: 600;
	font-size: 0.92em;
	background: #eef8f1;
	border-radius: 8px;
	padding: 0.6em 0.8em;
	margin-bottom: 1em;
}

.gwp-topbalk {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 0.85em;
	color: var(--gwp-grijs);
	margin-bottom: 1em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid var(--gwp-rand);
}

.gwp-topbalk strong {
	color: #1f2937;
}

.gwp-topbalk a {
	color: var(--gwp-blauw);
	text-decoration: none;
}

.gwp-topbalk a:hover {
	text-decoration: underline;
}

/* Wedstrijdkaart */

.gwp-wedstrijd-kaart {
	border: 1px solid var(--gwp-rand);
	border-radius: 12px;
	padding: 1em 1.1em;
	margin-bottom: 0.9em;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.gwp-kaart-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.15em;
}

.gwp-badge {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 0.2em 0.55em;
	border-radius: 999px;
}

.gwp-badge--thuis {
	background: #e7f3ea;
	color: var(--gwp-groen);
}

.gwp-badge--uit {
	background: #fdeeea;
	color: #b3541e;
}

/*
 * Klein "bijzonderheid deze speeldag"-vlaggetje (derby / overlap / dubbel
 * spelen mogelijk / losse speeldag) — secundaire info t.o.v. thuis/uit,
 * daarom met margin-left: auto naar rechts in de header geduwd (of naar
 * een nieuwe regel dankzij flex-wrap als het niet past).
 */
.gwp-badge--vlag {
	margin-left: auto;
}

.gwp-badge--derby {
	background: #f3e8ff;
	color: #7c3aed;
}

.gwp-badge--overlap {
	background: #fff4e0;
	color: #b45309;
}

.gwp-badge--dubbel {
	background: #e8f1fb;
	color: var(--gwp-blauw);
}

.gwp-badge--losse {
	background: #f1f2f4;
	color: var(--gwp-grijs);
}

.gwp-badge--extern {
	background: #e5e7eb;
	color: #4b5563;
}

/*
 * Wordt door een ander team gespeeld (te weinig spelers beschikbaar) —
 * de hele kaart wordt gedimd, niet alleen het vlaggetje, zodat in de
 * lijst meteen duidelijk is welke wedstrijden geen aandacht/reactie van
 * D4/D5-spelers nodig hebben. Blijft wel gewoon leesbaar en werkend
 * (geen velden verborgen) voor het geval iemand er toch bij hoort.
 */
.gwp-wedstrijd-kaart--extern {
	opacity: 0.6;
	background: #fafafa;
}

.gwp-wedstrijd-kaart--extern:hover,
.gwp-wedstrijd-kaart--extern:focus-within {
	opacity: 0.85;
}

.gwp-kaart-header .gwp-team {
	font-weight: 700;
	font-size: 1.05em;
	color: #1f2937;
}

.gwp-kaart-header .gwp-tegenstander {
	color: var(--gwp-grijs);
	font-size: 0.95em;
}

.gwp-datum-tijd {
	color: var(--gwp-grijs);
	font-size: 0.88em;
	margin: 0 0 0.7em;
}

.gwp-tijden {
	list-style: none;
	padding: 0.65em 0.75em;
	margin: 0 0 0.8em;
	background: #f7f8f9;
	border-radius: 8px;
	font-size: 0.92em;
}

.gwp-tijden li {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
	padding: 0.25em 0;
}

.gwp-tijden li:not(:last-child) {
	border-bottom: 1px dashed var(--gwp-rand);
}

.gwp-tijden li strong {
	color: #1f2937;
}

.gwp-tijden li.gwp-fout {
	justify-content: flex-start;
	font-size: 0.95em;
}

/* RSVP-formulier: compacte pil-knoppen i.p.v. losse radiobolletjes */

.gwp-rsvp-formulier fieldset {
	border: none;
	padding: 0;
	margin: 0 0 0.7em;
}

.gwp-rsvp-formulier legend {
	font-weight: 600;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--gwp-grijs);
	margin-bottom: 0.4em;
	padding: 0;
}

.gwp-pil-groep {
	display: flex;
	gap: 0.4em;
}

.gwp-pil {
	flex: 1;
	position: relative;
	text-align: center;
	padding: 0.55em 0.4em;
	border: 1px solid var(--gwp-rand);
	border-radius: 8px;
	font-size: 0.92em;
	font-weight: 600;
	color: #1f2937;
	background: #fafafa;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.gwp-pil input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gwp-pil:has(input:checked) {
	background: var(--gwp-blauw);
	border-color: var(--gwp-blauw);
	color: #fff;
}

/*
 * De "Kan je?"-knoppen krijgen een eigen kleur per antwoord i.p.v. het
 * standaard blauw hierboven, zodat je in één oogopslag ziet hoe je erbij
 * staat: ja = groen, nee = rood, misschien = oranje. Alleen voor
 * gwp_status[...] (dus niet voor "Kan je rijden?", die blijft blauw) —
 * vandaar de specifiekere selector, die de generieke regel hierboven
 * overschrijft.
 */
.gwp-pil:has(input[name^="gwp_status["][value="ja"]:checked) {
	background: var(--gwp-groen);
	border-color: var(--gwp-groen);
	color: #fff;
}

.gwp-pil:has(input[name^="gwp_status["][value="nee"]:checked) {
	background: var(--gwp-rood);
	border-color: var(--gwp-rood);
	color: #fff;
}

.gwp-pil:has(input[name^="gwp_status["][value="misschien"]:checked) {
	background: var(--gwp-oranje);
	border-color: var(--gwp-oranje);
	color: #fff;
}

.gwp-pil:has(input:focus-visible) {
	outline: 2px solid var(--gwp-blauw);
	outline-offset: 2px;
}

.gwp-rsvp-formulier button {
	margin-top: 0.2em;
}

/*
 * Eén "Alles opslaan"-knop onderaan het (nu paginabrede) formulier, sticky
 * zodat 'm altijd binnen handbereik blijft terwijl je door meerdere
 * wedstrijden scrolt om wijzigingen te maken.
 *
 * Zolang er nog niets gewijzigd is (t.o.v. de staat bij het laden van de
 * pagina), blijft de knop bewust ingetogen — gewoon te gebruiken, maar
 * niet opdringerig. Zodra assets/frontend.js een wijziging detecteert
 * krijgt de knop de klasse .gwp-heeft-wijzigingen: fel rood en iets
 * groter, zodat echt opvalt dat er nog iets opgeslagen moet worden.
 * Zonder JS (progressive enhancement) blijft de ingetogen stijl gewoon
 * werken.
 */
.gwp-alles-opslaan {
	position: sticky;
	bottom: 0.8em;
	margin-top: 0.5em;
	opacity: 0.75;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.gwp-alles-opslaan.gwp-heeft-wijzigingen {
	background: var(--gwp-actie-rood);
	opacity: 1;
	transform: scale(1.03);
	box-shadow: 0 4px 18px rgba(224, 32, 27, 0.45);
}

.gwp-alles-opslaan.gwp-heeft-wijzigingen:hover {
	background: var(--gwp-actie-rood-donker);
}

/*
 * "Kan je rijden?" is alleen relevant als iemand ook komt. Puur CSS
 * (geen JS nodig): verborgen totdat bij "Kan je?" de Ja-pil is
 * aangevinkt. De radio's blijven wel gewoon in de pagina staan, dus de
 * standaard-selectie (Rechtstreeks) wordt gewoon meegestuurd ook als dit
 * veld nooit zichtbaar is geworden (bijv. bij "Nee").
 *
 * Sinds alle wedstrijden in één gedeeld formulier staan (i.p.v. elk hun
 * eigen <form>), is deze regel gescoped op de kaart zelf (niet meer op
 * het formulier) en matcht 'ie op het veldnaam-voorvoegsel
 * gwp_status[...], zodat elke kaart z'n eigen "Kan je rijden?"-veld
 * onafhankelijk toont/verbergt.
 */
.gwp-wedstrijd-kaart .gwp-rijden-veld {
	display: none;
}

.gwp-wedstrijd-kaart:has(input[name^="gwp_status["][value="ja"]:checked) .gwp-rijden-veld {
	display: block;
}

/*
 * "Wedstrijden" / "Mijn indeling"-tabjes. Puur CSS (radio-hack), geen
 * JavaScript nodig: de radio's staan verborgen, de labels erna gedragen
 * zich als tabs, en welk paneel getoond wordt hangt af van welke radio
 * is aangevinkt. Vereist wel dat inputs vóór de labels/panelen in de
 * markup staan (zodat de ~ (general sibling)-selector ze kan bereiken).
 */
.gwp-tab-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gwp-tab-labels {
	display: flex;
	gap: 0.4em;
	margin-bottom: 1em;
}

.gwp-tab-label {
	flex: 1;
	text-align: center;
	padding: 0.6em 0.6em;
	border: 1px solid var(--gwp-rand);
	border-radius: 8px;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--gwp-grijs);
	background: #fafafa;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

#gwp-tab-wedstrijden:checked ~ .gwp-tab-labels label[for="gwp-tab-wedstrijden"],
#gwp-tab-indeling:checked ~ .gwp-tab-labels label[for="gwp-tab-indeling"] {
	background: var(--gwp-blauw);
	border-color: var(--gwp-blauw);
	color: #fff;
}

.gwp-tab-paneel {
	display: none;
}

#gwp-tab-wedstrijden:checked ~ .gwp-tab-paneel--wedstrijden,
#gwp-tab-indeling:checked ~ .gwp-tab-paneel--indeling {
	display: block;
}

/* "Mijn indeling"-lijst: welke (aankomende) wedstrijden de admin je
 * definitief heeft toegewezen om te spelen. Elke regel is een <details>
 * (net als "Wie is aangemeld?" bij de wedstrijdkaarten) — erop klikken
 * laat zien wie er nog meer voor die specifieke wedstrijd is ingedeeld
 * en, bij een uitwedstrijd, hoe het daarbinnen met vervoer zit. */
.gwp-indeling-lijst {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gwp-indeling-item {
	padding: 0.5em 0.1em;
	border-bottom: 1px solid var(--gwp-rand);
	font-size: 0.92em;
	line-height: 1.5;
}

.gwp-indeling-item:last-child {
	border-bottom: none;
}

.gwp-indeling-details summary {
	cursor: pointer;
	list-style: none;
	/*
	 * Chrome/Safari zetten standaard een outline op <summary> zodra je
	 * erop klikt, en die blijft (want de klik geeft het element focus)
	 * ook staan nadat je 'm weer dichtklikt — dat zwarte "vierkantje"
	 * waar Marjolein tegenaan liep. outline: none hier, en alleen nog een
	 * outline via :focus-visible hieronder (die verschijnt bij
	 * toetsenbordnavigatie, niet bij een muisklik) zodat het wel
	 * toegankelijk blijft zonder dat gewoon klikken een blijvend randje
	 * geeft.
	 */
	outline: none;
}

.gwp-indeling-details summary:focus-visible {
	outline: 2px solid var(--gwp-blauw);
	outline-offset: 2px;
	border-radius: 4px;
}

.gwp-indeling-details summary::-webkit-details-marker {
	display: none;
}

.gwp-indeling-details summary::after {
	content: "▸";
	display: inline-block;
	width: 0.9em;
	margin-left: 0.3em;
	transition: transform 0.15s ease;
}

.gwp-indeling-details[open] summary::after {
	transform: rotate(90deg);
}

.gwp-indeling-detail-inhoud {
	padding: 0.6em 0 0.2em;
	color: #374151;
}

.gwp-indeling-detail-inhoud p {
	margin: 0.35em 0;
	line-height: 1.4;
}

.gwp-indeling-item .gwp-badge {
	margin-right: 0.3em;
}

/* Uitklapbaar "wie is aangemeld"-overzicht, native <details>/<summary>. */

.gwp-aanmeldingen-overzicht {
	margin: 0 0 0.9em;
	padding-top: 0.6em;
	border-top: 1px dashed var(--gwp-rand);
	font-size: 0.88em;
}

.gwp-aanmeldingen-overzicht summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--gwp-blauw);
	list-style: none;
	/* Zelfde reden als bij .gwp-indeling-details summary hierboven: geen
	 * blijvend randje na een muisklik, wel een outline bij
	 * toetsenbordnavigatie. */
	outline: none;
}

.gwp-aanmeldingen-overzicht summary:focus-visible {
	outline: 2px solid var(--gwp-blauw);
	outline-offset: 2px;
	border-radius: 4px;
}

.gwp-aanmeldingen-overzicht summary::-webkit-details-marker {
	display: none;
}

.gwp-aanmeldingen-overzicht summary::before {
	content: "▸";
	display: inline-block;
	width: 0.9em;
	transition: transform 0.15s ease;
}

.gwp-aanmeldingen-overzicht[open] summary::before {
	transform: rotate(90deg);
}

.gwp-aanmeldingen-inhoud {
	padding: 0.6em 0 0.1em;
	color: #374151;
}

.gwp-aanmeldingen-inhoud p {
	margin: 0.35em 0;
	line-height: 1.4;
}

/*
 * Kleine subkop om het "komen"-stukje (komt/misschien/komt niet/nog niet
 * gereageerd) visueel te scheiden van het "vervoer"-stukje (rijdt mee /
 * rechtstreeks / kan niet rijden) bij uitwedstrijden.
 */
.gwp-aanmeldingen-subkop {
	margin: 0.7em 0 0.3em !important;
	padding-top: 0.5em;
	border-top: 1px dashed var(--gwp-rand);
	font-weight: 700;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--gwp-grijs);
}