/*
 * Fortuna UI — bediening 2026: knoppen (aanvulling op .fu-btn), zoekknop, chips, tekstlink met pijl.
 * Vorm: alles wat je aanklikt is een pil. Druk: schaal 0.98. Focus: ring in --fu-c-focus.
 * De basis .fu-btn in button.css blijft voor de live plugins; nieuwe varianten hieronder.
 */

/* Knoppen */
.fu-btn.fu-btn--brand,
.fu-btn.fu-btn--accent,
.fu-btn.fu-btn--quiet,
.fu-btn.fu-btn--outline {
	min-height: var(--fu-control-l);
	padding: 0 var(--fu-space-5);
	border-radius: var(--fu-r-pill);
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-base);
	font-weight: 600;
	transition: background-color var(--fu-beweging-hover), color var(--fu-beweging-hover), border-color var(--fu-beweging-hover), transform var(--fu-beweging-snel);
}

.fu-btn.fu-btn--brand { background: var(--fu-c-brand); color: var(--fu-c-on-brand); }
.fu-btn.fu-btn--brand:hover { background: var(--fu-c-brand-strong); color: var(--fu-c-on-brand); }
.fu-btn.fu-btn--accent { background: var(--fu-c-accent); color: var(--fu-c-on-accent); }
.fu-btn.fu-btn--accent:hover { background: var(--fu-geel-500); color: var(--fu-c-on-accent); }
.fu-btn.fu-btn--quiet { background: var(--fu-c-bg-sub); color: var(--fu-c-fg); }
.fu-btn.fu-btn--quiet:hover { background: var(--fu-zand-100); color: var(--fu-c-fg); }
.fu-btn.fu-btn--outline { border-color: var(--fu-c-line-strong); background: transparent; color: var(--fu-c-fg); }
.fu-btn.fu-btn--outline:hover { border-color: var(--fu-c-fg); color: var(--fu-c-fg); }

.fu-btn.fu-btn--icon { width: var(--fu-control-l); min-width: var(--fu-control-l); padding: 0; }
.fu-btn.fu-btn--sm { min-height: var(--fu-control-s); padding: 0 var(--fu-space-3-5); font-size: var(--fu-fs-sm); }
.fu-btn.fu-btn--sm.fu-btn--icon { width: var(--fu-control-s); min-width: var(--fu-control-s); padding: 0; }

.fu-btn.fu-btn--brand:active,
.fu-btn.fu-btn--accent:active,
.fu-btn.fu-btn--quiet:active,
.fu-btn.fu-btn--outline:active { transform: scale(0.98); }

.fu-btn.fu-btn--brand:focus-visible,
.fu-btn.fu-btn--accent:focus-visible,
.fu-btn.fu-btn--quiet:focus-visible,
.fu-btn.fu-btn--outline:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand); }

.fu-btn.fu-btn .fu-icon { width: var(--fu-icoon-l); height: var(--fu-icoon-l); fill: currentColor; stroke: none; }

/* Zoekknop: opent het bestaande zoekvenster (Filters). Geen invoerveld in de kop. */
.fu-search {
	display: inline-flex;
	align-items: center;
	gap: var(--fu-space-2-5);
	min-height: var(--fu-control-m);
	padding: 0 var(--fu-space-2) 0 var(--fu-space-3-5);
	border: var(--fu-lijn) solid var(--fu-c-line);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-bg-sub);
	color: var(--fu-c-fg-sub);
	font: 500 var(--fu-fs-sm) / 1 var(--fu-font-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fu-beweging-hover), border-color var(--fu-beweging-hover), color var(--fu-beweging-hover);
}

.fu-search:hover { border-color: var(--fu-c-line-strong); background: var(--fu-c-surface); color: var(--fu-c-fg); }
.fu-search:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand); }
.fu-search .fu-icon { width: var(--fu-icoon-m); height: var(--fu-icoon-m); color: var(--fu-c-fg); }
.fu-search__label { padding-right: var(--fu-space-1-5); }

.fu-search kbd[hidden] { display: none; }
.fu-search kbd {
	display: inline-flex;
	align-items: center;
	min-height: var(--fu-tag-h);
	padding: 0 var(--fu-space-2);
	border: var(--fu-lijn) solid var(--fu-c-line);
	border-radius: var(--fu-r-xs);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg-sub);
	font: 500 var(--fu-fs-xs) / 1 var(--fu-font-text);
}

/* Alleen een icoon (telefoon). */
.fu-search--icon { width: var(--fu-control-m); padding: 0; justify-content: center; }
.fu-search--icon .fu-search__label,
.fu-search--icon kbd { display: none; }

/* Op een groene ondergrond. */
.fu-search--on-brand { border-color: var(--fu-op-donker-rand); background: var(--fu-op-donker-vlak); color: var(--fu-op-donker-tekst); }
.fu-search--on-brand:hover { border-color: var(--fu-op-donker-rand-hover); background: var(--fu-op-donker-vlak-hover); color: var(--fu-c-on-brand); }
.fu-search--on-brand .fu-icon { color: var(--fu-c-on-brand); }
.fu-search--on-brand kbd { border-color: var(--fu-op-donker-rand); background: transparent; color: var(--fu-op-donker-tekst-sub); }

/* Chips: filters en sublinks (seizoen, rubriek). */
.fu-chips {
	display: flex;
	gap: var(--fu-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.fu-chips::-webkit-scrollbar { display: none; }
.fu-chips > * { flex: none; scroll-snap-align: start; }

.fu-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--fu-space-1-5);
	min-height: var(--fu-control-m);
	padding: 0 var(--fu-space-4);
	border: var(--fu-lijn) solid transparent;
	border-radius: var(--fu-r-pill);
	background: transparent;
	color: var(--fu-c-fg);
	font: 500 var(--fu-fs-base) / 1 var(--fu-font-text);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--fu-beweging-hover), border-color var(--fu-beweging-hover), color var(--fu-beweging-hover);
}

.fu-chip:hover { background: var(--fu-c-bg-sub); }
.fu-chip:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.fu-chip .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); color: var(--fu-c-fg-sub); }

.fu-chip[aria-pressed="true"],
.fu-chip[aria-current],
.fu-chip.is-active { border-color: var(--fu-c-brand); background: var(--fu-c-brand); color: var(--fu-c-on-brand); }
.fu-chip[aria-pressed="true"] .fu-icon,
.fu-chip[aria-current] .fu-icon,
.fu-chip.is-active .fu-icon { color: currentColor; }

/* Tekstlink met pijl die meeschuift. */
.fu-more {
	display: inline-flex;
	align-items: center;
	gap: var(--fu-space-1-5);
	color: var(--fu-c-link);
	font: 600 var(--fu-fs-sm) / 1.2 var(--fu-font-text);
	text-decoration: none;
}

.fu-more .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); transition: transform var(--fu-beweging-hover); }
.fu-more:hover { color: var(--fu-c-brand-strong); }
.fu-more:hover .fu-icon { transform: translateX(var(--fu-beweeg-s)); }
.fu-more:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand); border-radius: var(--fu-r-xs); }

/* Uitslag-label: W / G / V. */
.fu-result {
	display: inline-grid;
	place-items: center;
	width: var(--fu-badge-h);
	height: var(--fu-badge-h);
	border-radius: var(--fu-r-xs);
	color: var(--fu-c-on-brand);
	font: 700 var(--fu-fs-xs) / 1 var(--fu-font-text);
}

.fu-result--w { background: var(--fu-c-win); }
.fu-result--g { background: var(--fu-c-draw); }
.fu-result--v { background: var(--fu-c-loss); }

/* Tag: competitie, rubriek in data (klein, hoekig). */
.fu-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--fu-space-1);
	min-height: var(--fu-badge-h);
	padding: 0 var(--fu-space-2);
	border-radius: var(--fu-r-xs);
	background: var(--fu-c-bg-sub);
	color: var(--fu-c-fg-sub);
	font: 600 var(--fu-fs-xs) / 1 var(--fu-font-text);
}

/* Pillen: één patroon (seizoenen, soorten, sublinks, socials). Geen rand, alleen de actieve pil is gevuld. Een rij die scrolt staat in een pillbalk:
 * lijn erboven en eronder, zachte rand en pijlen waar nog pillen zijn.
 *   <div class="fu-chipsbar" data-fu-chips><button class="fu-chips__prev" …></button><ul class="fu-chips">…</ul><button class="fu-chips__next" …></button></div>
 * Pijlen links en rechts verschijnen alleen als er meer pillen zijn dan er passen (js/chips.js). */
.fu-chipsbar {
	display: flex;
	align-items: center;
	gap: var(--fu-space-2);
	padding-block: var(--fu-space-2);
	border-block: var(--fu-lijn) solid var(--fu-c-line);
}
.fu-chipsbar[data-fu-filter] {
	position: sticky;
	top: calc(var(--fu-header-h) + var(--fu-sticky-top));
	z-index: var(--fu-z-balk);
	background: var(--fu-c-bg);
}
/* Zoeken + filteren in een tabel (table.js): zelfde balk als de pillen: onder de kop blijven staan, lijnen boven en onder. */
div.fu-table__tools {
	position: sticky;
	top: calc(var(--fu-header-h) + var(--fu-sticky-top));
	z-index: var(--fu-z-balk);
	margin: 0 0 var(--fu-space-6);
	padding-block: var(--fu-space-2);
	border-block: var(--fu-lijn) solid var(--fu-c-line);
	background: var(--fu-c-bg);
}
@media (max-width: 600px) {
	/* Telefoon: zoekveld en aantal op één regel, pillen eronder (de balk blijft laag). */
	div.fu-table__tools .fu-table__search { flex: 1 1 0; min-width: 0; }
	div.fu-table__tools .fu-table__count { order: 2; margin-left: 0; }
	div.fu-table__tools .fu-chips { order: 3; }
}
[data-toon][hidden] { display: none; }
.fu-chipsbar[id] { scroll-margin-top: calc(var(--fu-header-h) + var(--fu-sticky-top) + var(--fu-space-4)); }
.fu-chipsbar .fu-chips { flex: 1; min-width: 0; }
.fu-chips__prev,
.fu-chips__next {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--fu-control-icoon);
	height: var(--fu-control-icoon);
	padding: 0;
	border: 0;
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-bg-sub);
	color: var(--fu-c-fg);
	cursor: pointer;
	transition: background-color var(--fu-beweging-hover);
}
.fu-chips__prev[hidden],
.fu-chips__next[hidden] { display: none; }
.fu-chips__prev:hover,
.fu-chips__next:hover { background: var(--fu-c-line); }
.fu-chips__prev:focus-visible,
.fu-chips__next:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.fu-chips__prev .fu-icon,
.fu-chips__next .fu-icon { width: var(--fu-icoon-s); height: var(--fu-icoon-s); }

/* Er is meer te zien: de rij vervaagt zacht aan de kant waar nog pillen zijn (zet js/chips.js op .fu-chipsbar). */
.fu-chipsbar .fu-chips {
	--fu-fade-l: 0px;
	--fu-fade-r: 0px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--fu-fade-l), black calc(100% - var(--fu-fade-r)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, black var(--fu-fade-l), black calc(100% - var(--fu-fade-r)), transparent 100%);
}
.fu-chipsbar.has-links .fu-chips { --fu-fade-l: var(--fu-fade-breedte); }
.fu-chipsbar.has-rechts .fu-chips { --fu-fade-r: var(--fu-fade-breedte); }