/* Smash Uitslagen — neemt het lettertype van het thema over */
.smash-u {
	--smash-accent: #0d2b6b;      /* clubblauw */
	--smash-own: #e9effa;         /* rijen eigen club */
	--smash-line: rgba(13, 43, 107, .12);
	--smash-muted: #6b7489;
	--smash-win: inherit;
	--smash-due: #b25b00;
	font-variant-numeric: tabular-nums;
	margin: 0 0 1.5em;
	color: inherit;
}

.smash-u__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .5em;
}
.smash-u__title,
.smash-u__poule {
	margin: 0;
	color: var(--smash-accent);
	line-height: 1.2;
}
.smash-u__poule { margin: 1.2em 0 .4em; font-size: 1em; }
.smash-u__body > .smash-u__poule:first-child { margin-top: 0; }
.smash-u__head:not(:has(.smash-u__title)) { justify-content: flex-end; margin-bottom: 0; }

/* Slotje: bewust onopvallend, alleen wie het weet gebruikt het */
.smash-u__lock {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--smash-muted);
	opacity: .45;
	cursor: pointer;
	transition: opacity .15s, background-color .15s, color .15s;
}
.smash-u__lock:hover { opacity: 1; background: var(--smash-own); }
.smash-u.is-unlocked .smash-u__lock { opacity: 1; background: var(--smash-accent); color: #fff; }

.smash-u__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.smash-u__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: .95em;
	border: 0;
}
.smash-u__table th,
.smash-u__table td {
	padding: .55em .6em;
	border: 0;
	border-bottom: 1px solid var(--smash-line);
	text-align: left;
	vertical-align: middle;
	background: transparent;
}
.smash-u__table thead th {
	border-bottom: 2px solid var(--smash-accent);
	color: var(--smash-accent);
	font-weight: 600;
	font-size: .85em;
	white-space: nowrap;
}
.smash-u__table .num { text-align: right; width: 1%; white-space: nowrap; }
.smash-u__table tr.is-own > td,
.smash-u__table td span.is-own { background: transparent; }
.smash-u__table--stand tr.is-own > td { background: var(--smash-own); }
.smash-u__table--stand tr.is-focus > td { box-shadow: inset 0 -2px 0 var(--smash-accent); }
.smash-u__table--stand tr.is-focus .team { font-weight: 700; }
.smash-u__table--stand .pos { color: var(--smash-muted); }
.smash-u__table--stand .pnt { font-weight: 700; color: var(--smash-accent); font-size: 1.05em; }

/* Wedstrijden */
.smash-u__table--matches .date { white-space: nowrap; color: var(--smash-muted); width: 1%; }
.smash-u__table--matches .match { line-height: 1.35; }
.smash-u__table--matches .match .vs { margin: 0 .3em; color: var(--smash-muted); }
.smash-u__table--matches .match .is-own { color: var(--smash-accent); }
.smash-u__table--matches .match .is-focus { font-weight: 600; }
.smash-u__table--matches .match .is-win { font-weight: 700; }
.smash-u__table--matches .score { text-align: right; white-space: nowrap; width: 1%; }
.smash-u__table--matches tr.is-upcoming .match { color: inherit; }

/* Het scorebord: het ene opvallende element */
.smash-u__score {
	display: inline-flex;
	align-items: baseline;
	gap: .15em;
	min-width: 3.4em;
	justify-content: center;
	padding: .2em .55em;
	border-radius: .35em;
	background: var(--smash-accent);
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
}
.smash-u__score .dash { opacity: .6; font-weight: 400; }
.smash-u__pending { color: var(--smash-due); font-style: italic; font-size: .9em; }

/* Invoer */
.smash-u__edit { display: inline-flex; align-items: center; gap: .3em; }
.smash-u__edit input[type=number] {
	width: 3.2em;
	padding: .3em .2em;
	margin: 0;
	border: 1px solid var(--smash-line);
	border-radius: .3em;
	text-align: center;
	font: inherit;
	font-weight: 700;
	background: #fff;
	color: inherit;
	-moz-appearance: textfield;
}
.smash-u__edit input::-webkit-outer-spin-button,
.smash-u__edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.smash-u__edit input:focus { border-color: var(--smash-accent); outline: 2px solid var(--smash-accent); outline-offset: 0; }
.smash-u__save {
	margin-left: .3em;
	padding: .35em .8em;
	border: 0;
	border-radius: .3em;
	background: var(--smash-accent);
	color: #fff;
	font: inherit;
	font-size: .85em;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
}
.smash-u__save:disabled { opacity: .6; cursor: default; }
.smash-u__table tr.is-saved > td { background: #e6f4ea; transition: background-color .3s; }
.smash-u__table tr.has-error input { border-color: #c62828; }
.smash-u__error { display: block; margin-top: .3em; color: #c62828; font-size: .8em; white-space: normal; text-align: right; }
.smash-u__table--matches.is-edit tr.is-due > td { background: #fff7ea; }

.smash-u__hint {
	margin: 0 0 .6em;
	padding: .5em .75em;
	border-left: 3px solid var(--smash-accent);
	background: var(--smash-own);
	font-size: .88em;
}

.smash-u__empty { color: var(--smash-muted); font-style: italic; margin: .5em 0; }

.smash-u .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.smash-u button:focus-visible { outline: 2px solid var(--smash-accent); outline-offset: 2px; }

/* Wachtwoordvenster */
.smash-u-dialog {
	width: min(22rem, calc(100vw - 2rem));
	padding: 1.4rem;
	border: 0;
	border-radius: .6rem;
	box-shadow: 0 20px 50px rgba(13, 43, 107, .25);
	color: #1c2233;
	background: #fff;
}
.smash-u-dialog::backdrop { background: rgba(13, 43, 107, .35); }
.smash-u-dialog h3 { margin: 0 0 1rem; color: #0d2b6b; font-size: 1.15rem; }
.smash-u-dialog label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.smash-u-dialog input {
	width: 100%;
	box-sizing: border-box;
	padding: .55rem .7rem;
	border: 1px solid #c7cfe0;
	border-radius: .35rem;
	font: inherit;
}
.smash-u-dialog input:focus { outline: 2px solid #0d2b6b; border-color: #0d2b6b; }
.smash-u-dialog__error { margin: .6rem 0 0; color: #c62828; font-size: .85rem; }
.smash-u-dialog__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
.smash-u-dialog__actions button {
	padding: .5rem 1rem;
	border: 0;
	border-radius: .35rem;
	background: #0d2b6b;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.smash-u-dialog__actions button.is-quiet { background: transparent; color: #0d2b6b; }


/* ---------- Clubcompetitie ---------- */
.smash-u [hidden] { display: none !important; }
.smash-u__table--club .of { color: var(--smash-muted); font-size: .8em; }

.smash-u__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5em 1em;
	margin-bottom: .6em;
}
.smash-u__filter {
	font: inherit;
	padding: .35em 2em .35em .6em;
	border: 1px solid var(--smash-line);
	border-radius: .35em;
	background-color: #fff;
	color: inherit;
	max-width: 100%;
}
.smash-u__count { color: var(--smash-muted); font-size: .88em; }

.smash-u__pick {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit;
	padding: 0;
}
.smash-u__pick--row {
	min-width: 5.2em;
	padding: .3em .7em;
	border: 1px dashed var(--smash-accent);
	border-radius: .35em;
	color: var(--smash-accent);
	font-weight: 600;
	font-size: .9em;
}
tr.is-played .smash-u__pick--row { border-style: solid; background: var(--smash-accent); color: #fff; }

/* Kruistabel */
.smash-u__scroll--cross { border: 1px solid var(--smash-line); border-radius: .4em; }
.smash-u__cross {
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	font-size: .82em;
	width: max-content;
	min-width: 100%;
	border: 0;
}
.smash-u__cross th,
.smash-u__cross td {
	padding: 0;
	border: 0;
	border-right: 1px solid var(--smash-line);
	border-bottom: 1px solid var(--smash-line);
	text-align: center;
	vertical-align: middle;
	height: 2.1em;
	min-width: 2.6em;
	background: #fff;
	white-space: nowrap;
}
.smash-u__cross thead th {
	background: var(--smash-accent);
	color: #fff;
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 1;
}
.smash-u__cross tbody th {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: left;
	padding: 0 .7em 0 .4em;
	font-weight: 600;
	background: #fff;
	box-shadow: 2px 0 0 var(--smash-line);
}
.smash-u__cross thead th.corner { left: 0; z-index: 3; background: var(--smash-accent); }
.smash-u__cross .nr {
	display: inline-block;
	min-width: 1.6em;
	margin-right: .35em;
	color: var(--smash-muted);
	font-weight: 400;
	text-align: right;
}
.smash-u__cross td.self { background: repeating-linear-gradient(45deg, var(--smash-line), var(--smash-line) 2px, transparent 2px, transparent 6px); }
.smash-u__cross td.is-win { background: var(--smash-own); color: var(--smash-accent); font-weight: 700; }
.smash-u__cross td.is-loss { color: var(--smash-muted); }
.smash-u__cross .tot { font-weight: 700; color: var(--smash-accent); background: var(--smash-own); }
.smash-u__cross thead th.tot { background: var(--smash-accent); color: #fff; }
.smash-u__cross tbody tr:hover td:not(.self),
.smash-u__cross tbody tr:hover th { background-color: #f3f6fc; }
.smash-u__cross tbody tr:hover td.is-win { background-color: #dbe5f7; }
.smash-u__cross.is-edit .smash-u__pick { display: block; width: 100%; height: 2.1em; }
.smash-u__cross.is-edit td.is-open .smash-u__pick:hover { background: var(--smash-own); }
.smash-u__cross.is-edit td.is-open .smash-u__pick::after { content: '+'; color: var(--smash-line); font-weight: 700; }
.smash-u__cross.is-edit td.is-open .smash-u__pick:hover::after { color: var(--smash-accent); }

/* Uitslag kiezen */
.smash-u-picker h3 { margin-bottom: .8rem; }
.smash-u-picker__who { margin: .8rem 0 .35rem; font-size: .85rem; font-weight: 600; }
.smash-u-picker__row { display: flex; gap: .4rem; }
.smash-u-picker__row button {
	flex: 1;
	padding: .7rem 0;
	border: 1px solid #c7cfe0;
	border-radius: .35rem;
	background: #fff;
	color: #0d2b6b;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}
.smash-u-picker__row button:hover,
.smash-u-picker__row button.is-current { background: #0d2b6b; border-color: #0d2b6b; color: #fff; }
.smash-u-dialog__actions button.is-danger { color: #c62828; margin-right: auto; }
.smash-u-dialog button:disabled { opacity: .5; cursor: default; }


/* ---------- Partijen (regiocompetitie) ---------- */
.smash-u__games {
	margin-left: .6em;
	padding: .15em .55em;
	border: 1px solid var(--smash-accent);
	border-radius: .3em;
	background: transparent;
	color: var(--smash-accent);
	font: inherit;
	font-size: .75em;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
	vertical-align: middle;
}
.smash-u__more {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	margin: 0 0 0 .6em;
	padding: .1em .45em;
	border: 0;
	border-radius: .3em;
	background: var(--smash-own);
	color: var(--smash-accent);
	font: inherit;
	font-size: .75em;
	font-weight: 600;
	cursor: pointer;
	vertical-align: middle;
}
.smash-u__more::after { content: '▾'; font-size: 1.1em; line-height: 1; transition: transform .15s; }
.smash-u__more[aria-expanded="true"]::after { transform: rotate(180deg); }

.smash-u__table tr.smash-u__details > td { padding: 0 0 .8em; background: transparent; }
.smash-u__games-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: .88em;
	background: #fafbfe;
	border: 1px solid var(--smash-line);
	border-radius: .35em;
}
.smash-u__games-table th,
.smash-u__games-table td {
	padding: .35em .6em;
	border: 0;
	border-bottom: 1px solid var(--smash-line);
	text-align: left;
	background: transparent;
}
.smash-u__games-table thead th { color: var(--smash-muted); font-weight: 600; font-size: .9em; border-bottom: 1px solid var(--smash-line); }
.smash-u__games-table tr:last-child td { border-bottom: 0; }
.smash-u__games-table .num { text-align: right; width: 1%; white-space: nowrap; }
.smash-u__games-table .nr { color: var(--smash-muted); }
.smash-u__games-table .is-win { font-weight: 700; color: var(--smash-accent); }
.smash-u__games-table .sets { font-weight: 600; }
.smash-u__games-table .unknown { color: var(--smash-muted); }

/* Venster partijen */
.smash-u-gamesdlg { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); }
.smash-u-gamesdlg__intro { margin: -.4rem 0 1rem; font-size: .85rem; color: #5a6378; }
.smash-u-gamesdlg__players { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
.smash-u-gamesdlg fieldset { margin: 0; padding: .6rem .7rem .7rem; border: 1px solid #dde3ef; border-radius: .4rem; min-width: 0; }
.smash-u-gamesdlg legend { padding: 0 .3rem; font-size: .85rem; font-weight: 700; color: #0d2b6b; }
.smash-u-gamesdlg fieldset label { display: flex; align-items: center; gap: .4rem; margin: .3rem 0 0; font-weight: 400; }
.smash-u-gamesdlg fieldset label span { width: 1.1rem; font-size: .8rem; font-weight: 700; color: #8a93a8; }
.smash-u-gamesdlg input[type=text],
.smash-u-gamesdlg input[type=number] { padding: .4rem .5rem; font-size: .9rem; min-width: 0; }
.smash-u-gamesdlg__list .grow {
	display: grid;
	grid-template-columns: 1.4rem 1fr 1fr auto;
	gap: .35rem;
	align-items: center;
	padding: .2rem 0;
}
.smash-u-gamesdlg__list .grow.is-head { font-size: .75rem; font-weight: 700; color: #8a93a8; padding-bottom: .1rem; }
.smash-u-gamesdlg__list .grow.is-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smash-u-gamesdlg__list .grow.is-double { background: #f3f6fc; border-radius: .35rem; padding: .3rem .2rem; margin: .1rem -.2rem; }
.smash-u-gamesdlg__list .nr { font-size: .8rem; font-weight: 700; color: #8a93a8; text-align: right; }
.smash-u-gamesdlg .gsets { display: inline-flex; align-items: center; gap: .2rem; }
.smash-u-gamesdlg .gsets input { width: 2.6rem; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.smash-u-gamesdlg .gsets input::-webkit-outer-spin-button,
.smash-u-gamesdlg .gsets input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.smash-u-gamesdlg__tally { margin: .8rem 0 0; font-size: .9rem; min-height: 1.3em; }
.smash-u-gamesdlg__tally b { color: #0d2b6b; font-size: 1.05rem; }
@media (max-width: 520px) {
	.smash-u-gamesdlg { padding: 1rem; }
	.smash-u-gamesdlg__players { grid-template-columns: 1fr; }
	.smash-u-gamesdlg__list .grow { grid-template-columns: 1.2rem 1fr 1fr auto; gap: .25rem; }
	.smash-u-gamesdlg .gsets input { width: 2.2rem; }
}

@media (max-width: 480px) {
	.smash-u__table { font-size: .88em; }
	.smash-u__table--matches .match .smash-u__games,
	.smash-u__table--matches .match .smash-u__more { margin: .3em .4em 0 0; }
	.smash-u__table th, .smash-u__table td { padding: .5em .35em; }
	.smash-u__table .opt { display: none; }
	.smash-u__table--matches .match .vs { display: block; height: 0; overflow: hidden; margin: 0; }
	.smash-u__table--matches .match span:not(.vs) { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.smash-u *, .smash-u-dialog { transition: none !important; }
}