/*
 * Stylesheet MijnOverheid Zakelijk (MOZa)
 *
 * Gebruikt design tokens uit twee lagen:
 * - _rijkshuisstijl.css: visuele opties vanuit de Rijkshuisstijl
 * - _toepassing.css: toepassing van die opties op componenten
 *
 * Layout spacing gebruikt --toepassing-space-layout-* tokens via twee mechanismes:
 * - > * + * met margin: voor content flow (geen flex/grid nodig)
 * - gap met flex/grid: voor component-layouts met alignment of richting-wisseling
 *
 * Alle properties gebruiken CSS logical properties (inline/block i.p.v. left/right/top/bottom).
 */

/* Importeer rijkshuisstijl design tokens */
@import "_rijkshuisstijl.css";

/* Importeer toegepaste design tokens */
@import "_toepassing.css";

/* CSS reset */
@import "_reset.css";

/* Rijks Sans webfont */
@font-face {
	font-family: "RijksSansVF";
	font-style: normal;
	font-weight: 100 900;
	src: url("../assets/fonts/RijksSansVF-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "RijksSansVF";
	font-style: italic;
	font-weight: 100 900;
	src: url("../assets/fonts/RijksSansVF-Italic.ttf") format("truetype");
}

/* -- PAGINA-LAYOUT -- */

body {
	color: var(--toepassing-color-text-default);
	display: flex;
	flex-direction: column;
	font-family: var(--toepassing-text-font-family-body), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
	min-block-size: 100vh;
	min-block-size: 100dvh; /* Fallback: vh voor browsers zonder dvh-ondersteuning */
	> * + * {
		margin-block-start: var(--toepassing-space-layout-md);
	}
}

header {
	position: relative;
	.logo {
		margin-block: 0;
		text-align: center;
		img {
			inline-size: var(--toepassing-size-logo-width);
		}
		nav {
			li {
				display: inline-block;
			}
		}
	}
	.user-menu {
		align-items: center;
		display: flex;
		gap: var(--toepassing-space-layout-md);
	}
	/* Toon fallback-naam als accountwisselaar verborgen is, verberg anders */
	.account-switcher-fallback {
		display: none;
	}
	.account-switcher[hidden] ~ .account-switcher-fallback {
		display: inline-flex;
	}
	> * + * {
		margin-block-start: var(--toepassing-space-layout-md);
	}
}
.page-head {
	display: flex;
	justify-content: space-between;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	padding-inline: var(--toepassing-space-padding-md);
	.page-title {
		font: var(--toepassing-text-heading-h2);
	}
}

main {
	flex: 1;
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	@media (min-width: 800px) {
		display: grid;
		grid-template-columns: auto 1fr;
	}
	> article:first-of-type {
		container-type: inline-size;
		inline-size: 100%;
		margin-block-end: var(--toepassing-space-margin-lg);
		padding-inline: var(--toepassing-space-padding-md);
	}
	/* Decoratief (logo) blok onder de content */
	&::after {
		background: var(--toepassing-color-logo-background);
		block-size: var(--toepassing-size-sm);
		content: "";
		display: block;
		grid-column: 1 / -1;
		inline-size: var(--toepassing-size-logo-width);
		margin-inline: auto;
	}
}

aside {
	max-inline-size: min-content;
	@media (min-width: 800px) {
		min-inline-size: var(--toepassing-size-component-subnav-width);
	}
}

footer {
	background: var(--toepassing-color-component-footer-background);
	color: var(--toepassing-color-text-inverse);
	margin-block-start: 0; /* Compensatie voor layout-spacing op body */
	padding: var(--toepassing-space-padding-xl) var(--toepassing-space-padding-md);
}

.skip-link {
	margin-block-start: var(--toepassing-space-margin-sm);
	margin-inline-start: var(--toepassing-space-margin-sm);
	padding: var(--toepassing-space-component-md) var(--toepassing-space-component-lg);
	position: absolute;
	translate: -200% 0%;
	&:focus-visible {
		translate: 0 0;
	}
}

/* MijnOverheid Zakelijk specifiek */
body.moza {
	background: var(--toepassing-color-background-subtle);
}

.moza header {
	background: var(--toepassing-color-background-default);
	border-block-end: var(--toepassing-border-component-pageheader-border);
	box-shadow: var(--toepassing-box-shadow-default);
}

.moza article {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-sm);
	}
}

/* Landing (uitgelogde staat) */
.landing {
	margin-inline: auto;
	max-inline-size: 40rem;
	> * + * {
		margin-block-start: var(--toepassing-space-layout-md);
	}
}
.landing-hero {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-xs);
	}
}
.landing-features {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-xs);
	}
}

/* -- TYPOGRAFIE -- */

hgroup {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-2xs);
	}
}

/* Titels en kopteksten, uitgebreid met heading-stijlklassen: visueel als een ander niveau, semantisch het juiste element */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font: var(--toepassing-text-heading-h1);
	-webkit-line-clamp: 2;
	line-clamp: 2; /* Beperkt titels en kopteksten tot maximaal twee regels tekst */
}
h2, .h2 {
	font: var(--toepassing-text-heading-h2);
}
h3, .h3 {
	font: var(--toepassing-text-heading-h3);
}
h4, .h4 {
	font: var(--toepassing-text-heading-h4);
}
h5, .h5 {
	font: var(--toepassing-text-heading-h5);
}
h6, .h6 {
	font: var(--toepassing-text-heading-h6);
}

p {
	font: var(--toepassing-text-paragraph-default);
	&.intro {
		font: var(--toepassing-text-paragraph-intro);
	}
}

small {
	font: var(--toepassing-text-smalltext-default);
}

strong, b {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}
em, i {
	font-style: italic;
}

a {
	color: var(--toepassing-color-interactive-default-text);
	text-decoration: var(--toepassing-text-text-decoration-hyperlink);
	text-decoration-skip-ink: auto;
	text-underline-offset: 3px;
	transition: var(--toepassing-transition-default);
	&:hover, &:focus-visible {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration: none;
	}
	&:active {
		color: var(--toepassing-color-interactive-active-text);
	}
}

code, kbd, pre, samp, var {
	background: var(--toepassing-color-background-subtle);
	font: var(--toepassing-text-code);
}
pre {
	padding: var(--toepassing-space-padding-sm);
}

.text-muted {
	color: var(--toepassing-color-text-subtle-1);
}
.metadata {
	color: var(--toepassing-color-text-subtle-2);
	font-size: var(--rijkshuisstijl-text-font-size-sm);
}

/* -- TOEGANKELIJKHEID -- */

/* Visueel verborgen maar toegankelijk voor screenreaders */
.visually-hidden {
	block-size: 1px;
	clip: rect(0, 0, 0, 0);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* -- ICONOGRAFIE -- */

.icon-xs {
	inline-size: var(--toepassing-size-icon-xs);
}
.icon-sm {
	inline-size: var(--toepassing-size-icon-sm);
}
.icon-md {
	inline-size: var(--toepassing-size-icon-md);
}
.icon-lg {
	inline-size: var(--toepassing-size-icon-lg);
}
.icon-xl {
	inline-size: var(--toepassing-size-icon-xl);
}

.icon-color-inverse {
	fill: var(--toepassing-color-text-inverse);
}

/* Links en labels voorzien van SVG iconen */
.icon-link, .icon-label {
	align-items: center;
	display: inline-flex;
	gap: var(--toepassing-space-layout-3xs);
	text-decoration: none;
	svg {
		block-size: var(--toepassing-size-icon-sm);
	}
}
.icon-link {
	&:hover {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration: underline !important;
	}
}

/* -- INTERACTIE -- */

/* Generieke hover-interactie op alle interactieve elementen */
:is(a, button, summary, [type="checkbox"], [type="radio"], label:has(input)) {
	transition: var(--toepassing-transition-default);
	&::before, &::after {
		transition: var(--toepassing-transition-default);
	}
	&:hover, &:active, &:focus-visible {
		color: var(--toepassing-color-interactive-hover-text);
		text-decoration: none;
	}
}

/* Opacity i.p.v. specifieke kleuren: past automatisch aan bij donker/licht/hoog-contrast modus */
[aria-disabled], [disabled] {
	opacity: var(--toepassing-opacity-interactive-disabled);
}

/* Focus: zichtbaar voor toetsenbord/spraak/switch, verborgen voor muis */
:focus:not(:focus-visible) {
	outline: none;
}
:focus-visible {
	outline: var(--toepassing-focus-outline);
	outline-offset: var(--toepassing-focus-outline-offset);
	&[aria-disabled] {
		outline-color: var(--toepassing-color-interactive-disabled-border);
	}
	&.negative {
		outline-color: var(--toepassing-color-feedback-error-border);
	}
}

/* Bevestigde opties (niet meer wijzigbaar, gemarkeerd met vinkje) */
li.option--confirmed {
	&::before {
		background-color: var(--toepassing-color-feedback-success-icon);
		block-size: var(--toepassing-size-icon-md);
		content: "";
		display: inline-block;
		inline-size: var(--toepassing-size-icon-md);
		margin-inline-end: var(--toepassing-space-margin-2xs);
		mask-image: url("../assets/icons/icon-succes.svg");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		vertical-align: middle;
	}
}

/* Ongelezen staat */
.is-unread {
	h3, .berichtenbox-row-sender {
		font-weight: var(--toepassing-text-font-weight-semi-bold);
		position: relative;
		&::before {
			background: var(--toepassing-color-feedback-attention);
			block-size: var(--toepassing-size-3xs);
			border-radius: var(--toepassing-border-radius-round);
			content: "";
			flex-shrink: 0;
			inline-size: var(--toepassing-size-3xs);
			inset-block: 0;
			margin-block: auto;
			margin-inline-start: calc(-1 * var(--toepassing-space-margin-xs));
			position: absolute;
		}
	}
	.berichtenbox-row-sender {
		&::before {
			margin-inline-start: calc(-1 * var(--toepassing-space-margin-sm));
		}
	}
}

/* -- FORMULIEREN -- */

form {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-sm);
	}
}
fieldset {
	border: 0;
	padding: 0;
}

/* Formulieren: gedeelde stijlen voor alle invoerelementen */
button, [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea, .btn, .btn-cta {
	align-self: flex-start; /* Voorkomt full-width in flex containers */
	background: var(--toepassing-color-interactive-default-surface);
	border: var(--toepassing-border-width-md) solid var(--toepassing-color-interactive-default-border);
	border-radius: var(--toepassing-border-radius-sm);
	font: inherit;
	min-block-size: var(--toepassing-pointer-target-min-size);
	min-inline-size: var(--toepassing-pointer-target-min-size);
	padding-block: var(--toepassing-space-padding-sm);
	padding-inline: var(--toepassing-space-padding-md);
	transition: var(--toepassing-transition-default);
	&:hover {
		border-color: var(--toepassing-color-interactive-hover-border);
	}
	&:active {
		border-color: var(--toepassing-color-interactive-active-border);
	}
	&[aria-invalid] {
		border-color: var(--toepassing-color-feedback-error-border);
		outline-color: var(--toepassing-color-feedback-error-border);
	}
	&.negative {
		border-color: var(--toepassing-color-feedback-error-border);
	}
}
.btn-cta::after {
	background-color: currentcolor;
	block-size: var(--toepassing-size-icon-xs);
	content: "";
	display: inline-block;
	inline-size: var(--toepassing-size-icon-xs);
	margin-inline-start: var(--toepassing-space-margin-2xs);
	mask: url("../assets/icons/icon-link-intern.svg") no-repeat center / contain;
	vertical-align: middle;
}
a.btn-cta[rel~="external"]::after {
	mask: url("../assets/icons/icon-link-extern.svg") no-repeat center / contain;
	vertical-align: baseline;
}

/* Formulieren: tekst-invoer elementen */
[type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea {
	border: var(--toepassing-border-width-xs) solid var(--toepassing-color-interactive-default-border);
	inline-size: 100%;
	~ .feedback, ~ * .feedback {
		margin-block-start: var(--toepassing-space-margin-2xs);
	}
}
textarea {
	resize: block; /* Alleen verticaal resizen zodat de breedte-layout intact blijft */
}

/* Formulieren: verificatiecode (6-cijferige code-invoer) */
.code-input {
	display: flex;
	gap: var(--toepassing-space-layout-2xs);
	margin-block-end: var(--toepassing-space-margin-xs);
	.verify-digit {
		inline-size: var(--toepassing-size-md);
		text-align: center;
	}
}

/* Formulieren: inline feedback bij invoervelden */
td .feedback {
	font: var(--toepassing-text-smalltext-default);
	margin-block-start: var(--toepassing-space-margin-2xs);
	padding: var(--toepassing-space-padding-sm);
}

.form-field-error {
	color: var(--toepassing-color-feedback-error-icon);
	font: var(--toepassing-text-smalltext-default);
	margin-block-start: var(--toepassing-space-margin-3xs);
	&[hidden] {
		display: none;
	}
}

/* Formulieren: labels */
legend, label {
	display: block;
	font: var(--toepassing-text-label);
	margin-block-end: var(--toepassing-space-margin-3xs);
}

.form-field-helper-text {
	color: var(--toepassing-color-text-subtle-1);
	font: var(--toepassing-text-smalltext-default);
}

/* Formulieren: zoekveld met knop */
[type="search"]:has(+ button) {
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	+ button {
		display: inline-block;
		margin-inline-start: -2px; /* Pixelwaarde om zoek-knop aan te laten sluiten op zoekveld */
	}
}

/* Formulieren: checkboxes en radio's (custom appearance) */
ul.selection {
	list-style: none;
	padding: 0;
	> * + * {
		margin-block-start: var(--toepassing-space-layout-sm);
	}
	.selection {
		padding-inline-start: var(--toepassing-space-padding-md);
	}
}
[type="checkbox"], [type="radio"] {
	appearance: none;
	background: var(--toepassing-color-interactive-default-surface);
	block-size: var(--toepassing-size-icon-md);
	border: var(--toepassing-border-width-md) solid var(--toepassing-color-interactive-default-border);
	border-radius: var(--toepassing-border-radius-md);
	cursor: pointer;
	display: inline-grid;
	inline-size: var(--toepassing-size-icon-md);
	place-content: center;
	transition: var(--toepassing-transition-default);
	vertical-align: top;
	/* Vinkje/bolletje: standaard verborgen via scale(0) */
	&::before, &[data-indeterminate]::before {
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		transform: scale(0);
		transition: var(--toepassing-transition-transform);
	}
	&:checked {
		background: var(--toepassing-color-interactive-default-background);
		border-color: var(--toepassing-color-interactive-default-background);
		&::before {
			transform: scale(1);
		}
	}
	&:hover {
		border-color: var(--toepassing-color-interactive-hover-border);
		&:checked {
			background: var(--toepassing-color-interactive-hover-background);
			border-color: var(--toepassing-color-interactive-hover-background);
		}
	}
	+ label {
		display: inline-block;
		padding-inline: var(--toepassing-space-padding-xs);
	}
	&[aria-disabled] + label {
		color: var(--toepassing-color-interactive-disabled-text);
	}
}
[type="checkbox"] {
	&::before {
		background-color: var(--toepassing-color-text-inverse);
		mask: url("../assets/icons/icon-vink.svg") no-repeat center / contain;
	}
	/* Tri-state: indeterminate (min-icoon) */
	&[data-indeterminate] {
		background: var(--toepassing-color-interactive-default-background);
		border-color: var(--toepassing-color-interactive-default-background);
		&::before {
			mask: url("../assets/icons/icon-minus.svg") no-repeat center / contain;
			transform: scale(1);
		}
	}
}
[type="radio"] {
	border-radius: var(--toepassing-border-radius-round);
	&::before {
		border-radius: var(--toepassing-border-radius-round);
	}
	&:checked {
		background: var(--toepassing-color-interactive-default-background);
		outline: 2px solid var(--toepassing-color-interactive-default-surface);
		outline-offset: -4px; /* Inset ring voor radio-bolletje effect */
		&:hover {
			background: var(--toepassing-color-interactive-hover-background);
		}
	}
}

/* -- KNOPPEN -- */

button, a.btn-cta {
	background: var(--toepassing-color-interactive-default-background);
	color: var(--toepassing-color-text-inverse);
	cursor: pointer;
	transition: var(--toepassing-transition-default);
	@container (max-inline-size: 280px) {
		inline-size: 100%;
		text-align: center;
	}
	span {
		display: inline-block;
	}
	&.secondary, &[type="reset"] {
		background: var(--toepassing-color-interactive-default-surface);
		border-color: var(--toepassing-color-interactive-default-border);
		color: var(--toepassing-color-interactive-default-text);
	}
	&:hover, &:focus {
		background: var(--toepassing-color-interactive-hover-background);
		border-color: var(--toepassing-color-interactive-hover-border);
		color: var(--toepassing-color-text-inverse);
	}
	&:active {
		background: var(--toepassing-color-interactive-active-background);
		border-color: var(--toepassing-color-interactive-active-border);
	}
	&[aria-disabled] {
		cursor: not-allowed;
	}
	&.negative {
		background: var(--toepassing-color-feedback-error-default);
		&:hover, &:focus-visible {
			background: var(--toepassing-color-feedback-error-emphasis);
			border-color: var(--toepassing-color-feedback-error-border);
		}
		&:active {
			background: var(--toepassing-color-interactive-active-background);
			border-color: var(--toepassing-color-interactive-active-border);
		}
	}
}
a.btn-cta {
	display: inline-block;
	text-decoration: none;
}

/* Actiegroep (kolom op mobiel, rij op desktop) */
.action-group {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-xs);
	position: relative;
	button, a.btn-cta {
		inline-size: 100%;
	}
	@media (min-width: 30em) {
		flex-direction: row;
		button, a.btn-cta {
			inline-size: initial;
		}
	}
	.share-topic {
		align-items: center;
		display: inline-flex;
		font: var(--toepassing-text-smalltext);
		gap: var(--toepassing-space-layout-3xs);
		svg {
			block-size: var(--toepassing-size-icon-sm);
			fill: currentcolor;
			inline-size: var(--toepassing-size-icon-sm);
		}
	}
}

/* Knoppen zonder visuele knop-stijl (links en iconen die als button functioneren) */
.link-button, .icon-button {
	background: none;
	border: none;
	color: var(--toepassing-color-interactive-default-text);
	cursor: pointer;
	min-block-size: unset;
	min-inline-size: unset;
	padding: 0;
	&:hover, &:focus, &:focus-visible, &:active {
		background: inherit !important;
		color: inherit !important;
	}
}
.icon-button {
	display: flex;
	&[hidden] {
		display: none;
	}
	svg {
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-end: var(--toepassing-space-margin-2xs);
	}
}
.btn-close {
	display: flex;
	margin-inline-start: auto;
	min-block-size: var(--toepassing-pointer-target-min-size);
	min-inline-size: var(--toepassing-pointer-target-min-size);
	i {
		display: none;
	}
	&::after {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-start: auto;
		mask: url("../assets/icons/icon-sluiten.svg") no-repeat top right / contain;
	}
}

/* -- MEDIA -- */

video {
	aspect-ratio: 16 / 9;
	background: var(--toepassing-color-background-subtle);
	inline-size: 100%;
}

/* -- NAVIGATIE -- */

nav {
	ol, ul {
		list-style: none;
		padding: 0;
	}
}

/* Navigatie: hoofdnavigatie (horizontale balk) */
.main-nav {
	background-color: var(--toepassing-color-interactive-active-background);
	ul {
		margin-inline: auto;
		max-inline-size: var(--toepassing-page-max-inline-size);
	}
	li {
		display: inline-block;
	}
	a {
		color: var(--toepassing-color-text-inverse);
		display: inline-block;
		font: var(--toepassing-text-nav-main-nav);
		padding: var(--toepassing-space-padding-md);
		text-decoration: none;
	}
	[aria-current], a:hover {
		text-decoration: var(--toepassing-text-text-decoration-hyperlink);
		text-underline-offset: 8px;
	}
	[aria-current] {
		font-weight: var(--toepassing-text-font-weight-bold);
	}
}

/* Navigatie: sub-navigatie (sidebar, responsive hamburger op mobiel) */
button.side-nav-toggle {
	align-items: center;
	background: var(--toepassing-color-background-default);
	color: var(--toepassing-color-interactive-default-text);
	cursor: pointer;
	display: none;
	gap: var(--toepassing-space-layout-xs);
	inset-block-start: var(--toepassing-space-padding-sm);
	position: absolute;
	&::before {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-xs);
		content: "";
		inline-size: var(--toepassing-size-icon-sm);
		mask: url("../assets/icons/icon-menu.svg") no-repeat center / contain;
		transition: var(--toepassing-transition-transform);
	}
	&:hover, &:active, &:focus, &:focus-visible, &:focus-within {
		background: inherit;
		color: inherit;
	}
	&[aria-expanded="true"]::before {
		inline-size: var(--toepassing-size-icon-xs);
		mask-image: url("../assets/icons/icon-chevron.svg");
		transform: rotate(180deg);
	}
	@media (max-width: 799px) {
		align-items: baseline;
		display: flex;
	}
}
.side-nav-toggle[aria-expanded="true"] + ul {
	display: block;
}
.side-nav {
	padding-inline: var(--toepassing-space-padding-md);
	ul {
		@media (max-width: 799px) {
			background: var(--toepassing-color-background-default);
			display: none;
			inline-size: 100%;
			margin-block-end: var(--toepassing-space-margin-lg);
			padding: var(--toepassing-space-padding-md);
		}
	}
	> li + li {
		margin-block-start: var(--toepassing-space-layout-xs);
	}
	li {
		inline-size: 100%;
		a {
			align-items: center;
			background: var(--toepassing-color-interactive-alternate-default-background);
			border-radius: var(--toepassing-border-radius-md);
			color: var(--toepassing-color-interactive-alternate-default-text);
			display: flex;
			font: var(--toepassing-text-nav-side-nav);
			gap: var(--toepassing-space-layout-2xs);
			padding-block: var(--toepassing-space-padding-2xs);
			padding-inline: var(--toepassing-space-padding-md);
			text-decoration: none;
			&:hover, &:focus {
				background: var(--toepassing-color-component-side-nav-background-hover);
				color: var(--toepassing-color-interactive-alternate-default-text);
			}
			&:active {
				background: var(--toepassing-color-interactive-alternate-active-background);
				color: var(--toepassing-color-interactive-alternate-active-text);
			}
		}
		[aria-current] {
			background: var(--toepassing-color-interactive-alternate-selected-background);
			color: var(--toepassing-color-interactive-alternate-selected-text);
			font-weight: var(--toepassing-text-font-weight-semi-bold);
		}
		svg {
			align-self: first baseline;
			block-size: var(--toepassing-size-icon-md);
			flex-shrink: 0;
		}
	}
}
.side-nav-group--start {
	margin-block-start: var(--toepassing-space-margin-sm);
}

/* Navigatie: kruimelpad */
.breadcrumb {
	li {
		display: inline-block;
		&:not(:last-child)::after {
			content: " /";
			margin-inline: var(--toepassing-space-padding-2xs);
		}
		&[aria-current="page"] {
			font-weight: var(--toepassing-text-font-weight-semi-bold);
		}
	}
}

/* Navigatie: paginering */
.pagination {
	ol {
		display: flex;
		gap: var(--toepassing-space-padding-xs);
		list-style: none;
		> * + * {
			margin-block-start: 0;
		}
	}
	a, [aria-current="page"] {
		align-items: center;
		border: var(--toepassing-border-width-xs) solid var(--toepassing-color-border-subtle);
		border-radius: var(--toepassing-border-radius-sm);
		display: inline-flex;
		justify-content: center;
		min-block-size: var(--toepassing-pointer-target-min-size);
		min-inline-size: var(--toepassing-pointer-target-min-size);
		padding-inline: var(--toepassing-space-padding-sm);
		text-decoration: none;
	}
	a {
		&:hover {
			background: var(--toepassing-color-interactive-alternate-hover-background);
		}
		&:focus-visible {
			outline: var(--toepassing-focus-outline);
			outline-offset: var(--toepassing-focus-outline-offset);
		}
	}
	[aria-current="page"] {
		background: var(--toepassing-color-interactive-selected-background);
		border-color: var(--toepassing-color-interactive-selected-border);
		color: var(--toepassing-color-text-inverse);
		font-weight: var(--toepassing-text-font-weight-semi-bold);
	}
}

/* Navigatie: Links */
a[href$=".pdf"]::after {
	background-color: currentcolor;
	block-size: var(--toepassing-size-icon-sm);
	content: "";
	display: inline-block;
	inline-size: var(--toepassing-size-icon-sm);
	margin-inline-start: var(--toepassing-space-layout-3xs);
	mask: url("../assets/icons/icon-document-pdf.svg") no-repeat center / contain;
	vertical-align: middle;
}

/* Navigatie: Link terug */
.back-link {
	display: inline-block;
	font-size: var(--rijkshuisstijl-text-font-size-sm);
	&::before {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-xs);
		content: "";
		display: inline-block;
		inline-size: var(--toepassing-size-icon-xs);
		margin-inline-end: var(--toepassing-space-layout-3xs);
		mask: url("../assets/icons/icon-link-intern.svg") no-repeat center / contain;
		transform: rotate(180deg);
		vertical-align: middle;
	}
}

/* Navigatie: footer */
footer {
	a {
		color: inherit !important;
		display: inline-block;
		font: var(--toepassing-text-nav-footer);
		padding-block: var(--toepassing-space-padding-xs);
		text-decoration: none;
		&:hover {
			color: inherit;
			text-decoration: var(--toepassing-text-text-decoration-hyperlink) !important;
		}
	}
}
/* Kolom op mobiel, rij op desktop */
.footer-links {
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-md);
	justify-content: flex-end;
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	@media (min-width: 799px) {
		flex-direction: row;
	}
	nav {
		max-inline-size: 12rem;
		> * + * {
			margin-block-start: var(--toepassing-space-layout-xs);
		}
	}
}

/* -- LIJSTEN -- */

ul, ol {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-2xs);
	}
}
li li {
	margin-block-start: var(--toepassing-space-layout-xs);
}

dt {
	font: var(--toepassing-text-label);
	margin-block-end: var(--toepassing-space-margin-3xs);
}
dd {
	margin-inline-start: 0;
}
dd + dt {
	margin-block-start: var(--toepassing-space-margin-xs);
}

.list-plain {
	list-style: none;
	margin-block-end: var(--toepassing-space-margin-xs);
	padding: 0;
	li {
		border: 0 !important;
	}
}

.list-indent {
	padding-inline-start: 0;
	::marker {
		color: var(--toepassing-color-text-subtle-2);
		font-size: var(--rijkshuisstijl-text-font-size-md);
	}
}

.list-separation {
	inline-size: var(--toepassing-size-3xs);
}

/* -- TABELLEN -- */

table {
	inline-size: 100%;
}
thead {
	color: var(--toepassing-color-text-subtle-1);
}
th {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}
tr {
	vertical-align: top;
}
th, td {
	/* border-block-end: var(--toepassing-border-subtle); */
	padding-block: var(--toepassing-space-padding-xs);
	text-align: start;
	.feedback {
		margin-block-end: var(--toepassing-space-margin-xs);
	}
}
caption {
	caption-side: bottom;
	caption-side: block-end; /* Logical property; caption-side: bottom als fallback */
	padding-block-start: var(--toepassing-space-padding-sm);
	text-align: end;
}

/* -- CARDS -- */

.card {
	background: var(--toepassing-color-background-default);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-border-card-default);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-layout-sm);
	padding: var(--toepassing-space-component-card-padding);
	section {
		> * + * {
			margin-block-start: var(--toepassing-space-layout-xs);
		}
		&:not(:last-of-type) {
			border-block-end: var(--toepassing-border-subtle);
			padding-block-end: var(--toepassing-space-padding-lg);
		}
	}
	h2, h3, h4 {
		font-size: var(--toepassing-text-size-title-2xl);
		a {
			color: var(--toepassing-color-interactive-default-text);
		}
	}
	h3, h4 {
		font-size: var(--toepassing-text-size-title-xl);
	}
	a:not(.btn-cta) {
		text-decoration: none;
		p {
			color: var(--toepassing-color-text-default);
		}
		&:hover {
			h3, h4 {
				color: var(--toepassing-color-interactive-hover-text);
				text-decoration: underline;
			}
		}
		/* Onzichtbare link die de hele card klikbaar maakt */
		&:focus-visible .card-link {
			outline: var(--toepassing-focus-outline);
		}
	}
	.list-content-links {
		list-style: none;
		padding: 0;
		li {
			padding-block-end: var(--toepassing-space-padding-md);
			position: relative;
			&[hidden] {
				display: none;
				margin: 0;
				padding: 0;
			}
			&.remove-item {
				animation: var(--toepassing-animation-fade-fade-out);
			}
			&.restore-item {
				animation: var(--toepassing-animation-fade-fade-in);
			}
			&:not(:last-child) {
				/* border-block-end: var(--toepassing-border-subtle); */
				.content-link {
					padding-block-end: 0;
				}
			}
			> * + * {
				margin-block-start: var(--toepassing-space-layout-2xs);
			}
		}
		.data-overview {
			margin-block: var(--toepassing-space-margin-xs);
		}
		> * + * {
			margin-block-start: var(--toepassing-space-layout-xs);
		}
	}
	/* Extern-link icoon achter headings */
	.content-link {
		&[rel="external"] h3::after {
			background-color: currentcolor;
			block-size: var(--toepassing-size-icon-sm);
			content: "";
			display: inline-block;
			inline-size: var(--toepassing-size-icon-sm);
			margin-inline-start: var(--toepassing-space-margin-2xs);
			mask: url("../assets/icons/icon-link-extern.svg") no-repeat center / contain;
		}
	}
}
.list-content-links > .card-topic + .card-topic:not([hidden]) {
	margin-block-start: var(--toepassing-space-margin-md);
}
.card-topic {
	margin-block-end: var(--toepassing-space-margin-xs);
	padding-block-end: 0 !important;
}
.topic-options {
	background: var(--toepassing-color-background-subtle);
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	font-weight: var(--toepassing-text-font-weight-semi-bold);
	padding: var(--toepassing-space-padding-sm) var(--toepassing-space-padding-md);
}
/* Onzichtbare overlay-link voor klikbare cards */
.card-link {
	block-size: 100%;
	inline-size: 100%;
	inset-block-start: 0;
	outline-offset: var(--toepassing-focus-outline-offset-2);
	position: absolute;
}

/* Tiles: 2-koloms grid, 1 kolom op smal scherm */
.tiles {
	display: grid;
	gap: var(--toepassing-space-layout-sm);
	grid-template-columns: repeat(2, 1fr);
	@container (max-inline-size: 624px) {
		grid-template-columns: 1fr;
	}
	.card {
		.btn-cta {
			margin-block-start: auto; /* Duw CTA naar onderkant van card */
		}
	}
}

/* -- FEEDBACK -- */

.feedback {
	background: var(--toepassing-color-feedback-neutral-subtle);
	border: var(--toepassing-border-subtle);
	border-color: var(--toepassing-color-feedback-neutral-border);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	gap: var(--toepassing-space-layout-2xs);
	padding: var(--toepassing-space-padding-md);
	&[hidden] {
		display: none;
	}
	div {
		display: flex;
		flex-direction: column;
		gap: var(--toepassing-space-layout-2xs);
	}
	h2, h3, h4, h5, h6 {
		font: var(--toepassing-text-heading-h6);
		margin-block-end: var(--toepassing-space-margin-3xs);
	}
	p {
		margin-block: 0;
	}
	.btn-close {
		min-block-size: auto;
	}
	svg {
		align-self: self-start;
		flex-shrink: 0;
		inline-size: var(--toepassing-size-icon-md);
	}
}
.feedback-info {
	background: var(--toepassing-color-feedback-info-subtle);
	border-color: var(--toepassing-color-feedback-info-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-info-icon);
	}
}
.feedback-success {
	background: var(--toepassing-color-feedback-success-subtle);
	border-color: var(--toepassing-color-feedback-success-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-success-icon);
	}
}
.feedback-warning {
	background: var(--toepassing-color-feedback-warning-subtle);
	border-color: var(--toepassing-color-feedback-warning-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-warning-icon);
	}
}
.feedback-error {
	background: var(--toepassing-color-feedback-error-subtle);
	border-color: var(--toepassing-color-feedback-error-border);
	svg path:not(.icon-color-inverse) {
		fill: var(--toepassing-color-feedback-error-icon);
	}
}
.feedback-page-banner {
	inline-size: 100%;
	margin-block-end: var(--toepassing-space-margin-md);
	margin-inline: auto;
	max-inline-size: var(--toepassing-page-max-inline-size);
	padding: var(--toepassing-space-padding-md);
}

dd .feedback {
	margin-block-end: var(--toepassing-space-margin-xs);
}

/* -- BERICHTENBOX -- */
[data-berichtenbox-toolbar] {
	> * + * {
		margin-block-start: var(--toepassing-space-layout-sm);
	}
}
.berichtenbox-search {
	input {
		inline-size: 100%;
	}
}
.berichtenbox-content {
	table {
		border-collapse: collapse;
	}
	th {
		font-weight: var(--toepassing-text-font-weight-semi-bold);
	}
	tr {
		background: var(--toepassing-color-background-default);
		border-block-end: var(--toepassing-border-subtle);
		position: relative;
		transition: var(--toepassing-transition-default);
		a::after {
			content: "";
			inset: 0;
			position: absolute;
		}
		&:hover a {
			text-decoration: var(--toepassing-text-text-decoration-hyperlink);
		}
	}
	tbody {
		tr {
			&:hover {
				background: var(--toepassing-color-interactive-alternate-hover-background);
				transition: var(--toepassing-transition-default);
			}
		}
	}
	th, td {
		padding: var(--toepassing-space-padding-sm);
	}
	.metadata {
		font-size: var(--rijkshuisstijl-text-font-size-sm);
	}
	.action-group {
		font-size: var(--rijkshuisstijl-text-font-size-sm);
		margin-block-end: var(--toepassing-space-margin-md);
	}
}
.berichtenbox-row-sender {
	inline-size: 25%;
}
.berichtenbox-row-subject {
	inline-size: 50%;
}
.berichtenbox-row-date {
	color: var(--toepassing-color-text-subtle-2);
	font-size: var(--toepassing-text-size-body-sm);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.berichtenbox-row-attachment svg {
	fill: var(--toepassing-color-interactive-default-background);
}
.berichtenbox-row-folder-label {
	display: none; /* Tijdelijke de Map kolom verbergen */
}

/* Berichtenbox laadindicator */
.berichtenbox-progress {
	background: var(--toepassing-color-feedback-success-subtle);
	border: var(--toepassing-border-subtle);
	border-color: var(--toepassing-color-feedback-success-border);
	border-radius: var(--toepassing-border-radius-md);
	padding: var(--toepassing-space-lg);
	text-align: center;
}
.berichtenbox-progress-count, .berichtenbox-progress-messages {
	color: var(--toepassing-color-text-subtle-1);
	display: block;
	font-size: var(--toepassing-text-size-body-sm);
	margin-block-start: var(--toepassing-space-2xs);
}
.berichtenbox-progress-bar {
	background: var(--toepassing-color-background-raised);
	block-size: var(--toepassing-size-3xs);
	border-radius: var(--toepassing-border-radius-round);
	margin-block-start: var(--toepassing-space-sm);
	overflow: hidden;
}
.berichtenbox-progress-bar-fill {
	background: var(--toepassing-color-feedback-success-emphasis);
	block-size: 100%;
	inline-size: 0%;
	transition: inline-size 0.2s linear;
}

/* Berichtenbox ongelezen status */
.berichtenbox-row.is-unread .berichtenbox-row-sender, .berichtenbox-row.is-unread .berichtenbox-row-subject {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}

/* Berichtenbox animatie bij nieuw bericht */
@media (prefers-reduced-motion: no-preference) {
	.berichtenbox-row.is-new {
		animation: var(--toepassing-animation-fade-fade-in);
	}
}

.berichtenbox-folder-user {
	a {
		color: var(--toepassing-color-text-subtle-2);
	}
	[aria-selected="true"] {
		color: var(--toepassing-color-interactive-default-text);
	}
}

/* Berichtenbox: bericht-pagina */
.berichtenbox-detail-meta {
	color: var(--toepassing-color-text-subtle-1);
	margin-block-end: var(--toepassing-space-md);
}
.berichtenbox-detail-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--toepassing-space-md);
	margin-block: var(--toepassing-space-md);
}
.berichtenbox-attachments {
	border-block-start: 1px solid var(--toepassing-color-border-subtle);
	margin-block-start: var(--toepassing-space-2xl);
	padding-block-start: var(--toepassing-space-md);
}
.berichtenbox-attachments-loading {
	color: var(--toepassing-color-text-subtle-1);
	font-style: italic;
}

/* Berichtenbox: verplaats bericht naar map paneel */
.berichtenbox-move-panel {
	background: var(--toepassing-color-background-raised);
	border: 1px solid var(--toepassing-color-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	margin-block: var(--toepassing-space-md);
	padding: var(--toepassing-space-md);
	ul {
		list-style: none;
		margin-block: var(--toepassing-space-margin-2xs) var(--toepassing-space-margin-sm);
		padding-inline-start: 0;
	}
	div:not(.action-group) {
		> * {
			display: block;
		}
		> * + * {
			margin-block-start: var(--toepassing-space-layout-2xs);
		}
	}
	[type="text"] {
		inline-size: 40%;
	}
}

/* -- DIGITALE ASSISTENT */

.chat-container {
	gap: var(--toepassing-space-padding-sm);
}
.chat-header {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--toepassing-space-padding-md);
	justify-content: space-between;
}
.chat-status {
	color: var(--toepassing-color-text-subtle-1);
	font: var(--toepassing-text-smalltext);
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--toepassing-space-padding-xs) var(--toepassing-space-padding-md);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li {
		margin: 0;
		&::before {
			display: inline-block;
			margin-inline-end: var(--toepassing-space-padding-2xs);
		}
	}
	.chat-status-connected::before {
		color: var(--toepassing-color-feedback-success-icon);
		content: "\25CF";
	}
	.chat-status-disconnected::before {
		color: var(--toepassing-color-feedback-error-icon);
		content: "\25CF";
	}
	p {
		margin-block-end: var(--toepassing-space-padding-2xs);
	}
}
.chat-status-warning {
	color: var(--toepassing-color-feedback-warning-border);
	font-style: italic;
}
.chat-messages {
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--toepassing-space-padding-sm);
	inline-size: 100%;
	overflow-y: auto;
	padding: var(--toepassing-space-padding-md);
}
.chat-message {
	border-radius: var(--toepassing-border-radius-md);
	max-inline-size: 85%;
	padding: var(--toepassing-space-padding-sm) var(--toepassing-space-padding-md);
	p {
		margin-block-end: 0;
	}
}
.chat-message-assistant, .chat-message-loading {
	align-self: flex-start;
	background: var(--toepassing-color-background-subtle);
}
.chat-message-user {
	align-self: flex-end;
	background: var(--toepassing-color-interactive-default-background);
	color: var(--toepassing-color-text-inverse);
}
.chat-message-error {
	align-self: flex-start;
	background: var(--toepassing-color-feedback-error-subtle);
	border: var(--toepassing-border-width-md) solid var(--toepassing-color-feedback-error-border);
}
.chat-message-loading {
	font-style: italic;
	opacity: var(--toepassing-opacity-interactive-disabled);
}
.chat-message-thinking {
	font-style: italic;
	opacity: var(--toepassing-opacity-interactive-disabled);
	.thinking-text::before {
		animation: spin 0.8s linear infinite;
		block-size: 0.7em;
		border: 2px solid currentcolor;
		border-block-start-color: transparent;
		border-radius: 50%;
		content: "";
		display: inline-block;
		inline-size: 0.7em;
		margin-inline-end: 0.5em;
		vertical-align: middle;
	}
}

.chat-input-form {
	display: flex;
	gap: var(--toepassing-space-padding-sm);
	inline-size: 100%;
	textarea {
		background: var(--toepassing-color-interactive-default-surface);
		border: var(--toepassing-border-width-md) solid var(--toepassing-color-border-default);
		border-radius: var(--toepassing-border-radius-sm);
		flex: 1;
		padding-block: var(--toepassing-space-padding-sm);
		padding-inline: var(--toepassing-space-padding-md);
		resize: none;
	}
	button {
		align-self: flex-end;
	}
}

/* -- OVERIGE COMPONENTEN -- */

/* Uitklapblok (details/summary) */
details {
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	&[open] summary::before {
		transform: rotate(90deg);
		transition: var(--toepassing-transition-transform);
	}
}
summary {
	background: var(--toepassing-color-background-subtle);
	cursor: pointer;
	display: flex;
	gap: var(--toepassing-space-layout-2xs);
	padding: var(--toepassing-space-padding-sm);
	&:hover, &:focus {
		background: var(--toepassing-color-interactive-alternate-hover-background);
	}
	&::before {
		content: url("../assets/icons/icon-chevron.svg");
		flex-shrink: 0;
		inline-size: var(--toepassing-size-icon-xs);
		transform: rotate(0deg);
		transition: var(--toepassing-transition-transform);
	}
}

/* Accordion (o.a. FAQ-lijst met uitklapbare vragen) */
.accordion {
	list-style: none;
	padding: 0;
	h3, h4, h5, h6 {
		font-size: var(--toepassing-text-size-body-md);
	}
	p {
		padding: var(--toepassing-space-padding-sm);
	}
	> * + * {
		margin-block-start: var(--toepassing-space-layout-3xs);
	}
}

/* Tab interface */
[role="tablist"] {
	border-block-end: var(--toepassing-border-component-tabs-tab-inactive);
	box-sizing: border-box;
	padding-inline-start: 0;
	li {
		display: inline-block;
		margin-block-end: calc(-1 * var(--toepassing-border-width-md));
	}
	a {
		border-block-end: var(--toepassing-border-component-tabs-tab-inactive);
		border-start-end-radius: var(--toepassing-border-radius-md);
		border-start-start-radius: var(--toepassing-border-radius-md);
		display: inline-block;
		padding-block: var(--toepassing-space-padding-xs);
		padding-inline: var(--toepassing-space-padding-md);
		&:hover {
			background: var(--toepassing-color-interactive-alternate-hover-background) !important;
			border-block-end: var(--toepassing-border-component-tabs-tab-hover);
		}
		svg {
			margin-inline-end: var(--toepassing-space-margin-3xs);
			vertical-align: text-top;
		}
	}
	[aria-selected="true"] {
		background: var(--toepassing-color-interactive-alternate-selected-background);
		border-block-end: var(--toepassing-border-component-tabs-tab-selected);
	}
}

/* Favoriet toggle (checkbox gestyled als hartje) en optie om topic te verbergen/verwijderen */
.save-favorite, .hide-topic, .delete-topic, .restore-topic {
	align-items: center;
	color: var(--toepassing-color-interactive-default-icon);
	cursor: pointer;
	display: inline-flex;
	font: var(--toepassing-text-smalltext);
	&:has(input:focus-visible) {
		outline: var(--toepassing-focus-outline);
		outline-offset: var(--toepassing-focus-outline-offset);
	}
	input {
		appearance: none;
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-sm);
		border: none;
		cursor: pointer;
		display: inline-block;
		inline-size: var(--toepassing-size-icon-sm);
		margin: 0;
		margin-inline-end: var(--toepassing-space-margin-3xs);
		mask: url("../assets/icons/icon-favoriet-outline.svg") no-repeat center / contain;
		padding: 0;
		transition: var(--toepassing-transition-default);
		vertical-align: middle;
		&:hover {
			background-color: var(--toepassing-color-feedback-favorite-hover);
			color: var(--toepassing-color-feedback-favorite-hover);
			mask-image: url("../assets/icons/icon-favoriet.svg");
		}
		&:checked {
			animation: var(--toepassing-animation-icon-pop);
			background-color: var(--toepassing-color-feedback-favorite-icon);
			color: var(--toepassing-color-feedback-favorite-icon);
			mask-image: url("../assets/icons/icon-favoriet.svg");
			&:hover {
				background-color: var(--toepassing-color-feedback-favorite-hover);
			}
			& ~ .favorite-label {
				font-size: 0;
				&::after {
					content: "Bewaard";
					font: var(--toepassing-text-smalltext);
				}
			}
		}
	}
	&:hover {
		color: var(--toepassing-color-interactive-hover-text);
	}
}
.hide-topic, .delete-topic, .restore-topic {
	&::before {
		background-color: currentcolor;
		block-size: var(--toepassing-size-icon-sm);
		content: "";
		display: inline-block;
		inline-size: var(--toepassing-size-icon-sm);
		margin-inline-end: var(--toepassing-space-margin-2xs);
		mask: url("../assets/icons/icon-verbergen.svg") no-repeat center / contain;
		vertical-align: middle;
	}
	&:active::before {
		animation: var(--toepassing-animation-icon-pop);
	}
}
.delete-topic {
	&::before {
		background-color: var(--toepassing-color-feedback-error-icon);
		mask: url("../assets/icons/icon-verwijderen.svg") no-repeat center / contain;
	}
	&:hover::before {
		background-color: var(--toepassing-color-feedback-error-emphasis);
	}
}
.restore-topic {
	&::before {
		mask: url("../assets/icons/icon-feedback-outline.svg") no-repeat center / contain;
	}
	&:hover {
		color: var(--toepassing-color-feedback-success-icon);
		&::before {
			background-color: var(--toepassing-color-feedback-success-icon);
			mask: url("../assets/icons/icon-feedback.svg") no-repeat center / contain;
		}
	}
}

#saved-groups section {
	/* margin-block-end: var(--toepassing-space-layout-sm); */
	padding-block-end: 0;
}

/* Badge (teller/label naast headings of in navigatie) */
.badge {
	background: var(--toepassing-color-component-badge-background);
	border-radius: var(--toepassing-border-radius-round);
	color: var(--toepassing-color-component-badge-text);
	font: var(--toepassing-text-component-text-badge);
	margin-inline-start: auto;
	padding: 0 var(--toepassing-space-padding-xs);
	text-align: center;
}
h1, h2, h3, h4, h5, h6, a, button {
	.badge {
		/* margin-inline-start: var(--toepassing-space-margin-2xs); */
		vertical-align: text-top;
	}
}

/* Accountwisselaar */
.account-switcher {
	position: relative;
}
.account-switcher-toggle {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	&::after {
		border-block-start: 0.35em solid currentcolor;
		border-inline: 0.3em solid transparent;
		content: "";
		margin-inline-start: var(--toepassing-space-padding-2xs);
	}
	&:hover, &:focus {
		background: none !important;
		color: inherit !important;
	}
}
.account-switcher-label strong {
	font-weight: var(--toepassing-text-font-weight-semi-bold);
}
.account-switcher-menu {
	background: var(--toepassing-color-background-default);
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-box-shadow-default);
	inset-block-start: 100%;
	inset-inline-end: 0;
	list-style: none;
	min-inline-size: 20rem;
	padding: var(--toepassing-space-padding-xs);
	position: absolute;
	z-index: 100;
	a {
		align-items: baseline;
		border-radius: var(--toepassing-border-radius-sm);
		color: inherit;
		display: flex;
		gap: var(--toepassing-space-padding-sm);
		justify-content: space-between;
		padding: var(--toepassing-space-padding-xs) var(--toepassing-space-padding-sm);
		text-decoration: none;
		&:hover {
			background: var(--toepassing-color-interactive-alternate-hover-background);
		}
		&[aria-current="true"] {
			background: var(--toepassing-color-interactive-alternate-selected-background);
		}
	}
	span {
		color: var(--toepassing-color-text-subtle-2);
		font: var(--toepassing-text-smalltext-default);
	}
	> * + * {
		margin-block-start: 0;
	}
	.account-switcher-group-label {
		color: var(--toepassing-color-text-subtle-1);
		font: var(--toepassing-text-heading-h5);
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-sm);
		&:not(:first-child) {
			border-block-start: var(--toepassing-border-subtle);
			margin-block-start: var(--toepassing-space-padding-xs);
			padding-block-start: var(--toepassing-space-padding-sm);
		}
	}
}

/* Voortgangsbalk */
.progress-bar {
	background: var(--toepassing-color-background-raised);
	block-size: var(--toepassing-size-2xs);
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-round);
	overflow: hidden;
}
.progress-bar-fill {
	align-items: center;
	background: var(--toepassing-color-feedback-success-emphasis);
	block-size: 100%;
	border: var(--toepassing-border-subtle);
	border-radius: var(--toepassing-border-radius-round);
	color: var(--toepassing-color-text-inverse);
	display: flex;
	font: var(--toepassing-text-component-text-badge);
	justify-content: center;
	min-inline-size: fit-content;
	white-space: nowrap;
}

/* -- ANIMATIES -- */

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes icon-pop {
	50% {
		scale: 1.25;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		translate: 0 -1rem;
	}
}
@keyframes fade-out {
	to {
		block-size: 0;
		margin-block: 0;
		opacity: 0;
		overflow: hidden;
		padding-block: 0;
		translate: 0 -1rem;
	}
}

/* -- PROTOTYPING-ONLY -- */

/* Feature flags */
.feature-flags-toggle {
	border-start-start-radius: var(--toepassing-border-radius-md);
	inset-block-end: 0;
	inset-inline-end: 0;
	opacity: 0;
	position: fixed;
	transition: var(--toepassing-transition-opacity);
	z-index: 2;
	&:hover {
		opacity: 1;
		transition: var(--toepassing-transition-opacity);
	}
}

/* Feature flags: verborgen elementen moeten altijd hidden respecteren, ook bij expliciete display */
[data-feature][hidden] {
	display: none;
}
.feature-flags-panel {
	background: var(--toepassing-color-background-raised);
	border-radius: var(--toepassing-border-radius-md);
	box-shadow: var(--toepassing-box-shadow-default);
	inset-block-end: 2rem;
	inset-inline-end: var(--toepassing-space-padding-lg);
	max-block-size: 70vh;
	overflow-y: auto;
	padding: var(--toepassing-space-padding-md);
	position: fixed;
	z-index: 1;
	.feature-flags-group-heading {
		border-block-start: var(--toepassing-border-subtle);
		color: var(--toepassing-color-text-subtle-1);
		margin-block: var(--toepassing-space-padding-sm);
		padding-block-start: var(--toepassing-space-padding-sm);
	}
	ul {
		list-style: none;
		padding: 0;
	}
	label {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: var(--toepassing-space-padding-xs);
		padding-block: var(--toepassing-space-padding-2xs);
	}
	.settings-radio-group {
		align-items: center;
		border: none;
		display: flex;
		gap: var(--toepassing-space-padding-xs);
		margin-block: var(--toepassing-space-padding-2xs);
		padding: 0;
		legend {
			font-weight: var(--toepassing-text-font-weight-semi-bold);
			margin-inline-end: var(--toepassing-space-padding-xs);
		}
		.mode-option {
			align-items: center;
			display: flex;
			gap: var(--toepassing-space-padding-2xs);
			padding: 0;
		}
	}
	.settings-field {
		margin-block: var(--toepassing-space-padding-2xs);
		label {
			display: flex;
			flex-direction: column;
			font-weight: var(--toepassing-text-font-weight-semi-bold);
			gap: 2px;
			padding-block: 0;
		}
		input[type="password"], input[type="text"] {
			border: var(--toepassing-border-subtle);
			border-radius: var(--toepassing-border-radius-sm);
			box-sizing: border-box;
			font: inherit;
			font-weight: normal;
			inline-size: 100%;
			padding: var(--toepassing-space-padding-2xs) var(--toepassing-space-padding-xs);
		}
	}
	.feature-flags-fullscreen {
		background: var(--toepassing-color-interactive-default-background);
		border: var(--toepassing-border-default);
		border-radius: var(--toepassing-border-radius-sm);
		color: var(--toepassing-color-text-inverse);
		cursor: pointer;
		font: inherit;
		inline-size: 100%;
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-sm);
		text-align: start;
		&:hover {
			background: var(--toepassing-color-interactive-hover-background);
			color: var(--toepassing-color-text-inverse);
		}
	}
	.feature-flags-clear {
		background: var(--toepassing-color-feedback-error-default);
		border: none;
		border-radius: var(--toepassing-border-radius-sm);
		color: var(--toepassing-color-text-inverse);
		cursor: pointer;
		font: inherit;
		inline-size: 100%;
		margin-block: var(--toepassing-space-padding-md);
		padding-block: var(--toepassing-space-padding-2xs);
		padding-inline: var(--toepassing-space-padding-sm);
		&:hover {
			background: var(--toepassing-color-feedback-error-emphasis);
		}
	}
}

/* Tijdelijk: proof-of-concept banner (roterend lint rechtsboven) */
.temp-moza-poc-banner {
	background: var(--toepassing-color-feedback-success-default);
	color: var(--toepassing-color-text-inverse);
	font-weight: var(--toepassing-text-font-weight-bold);
	inline-size: 280px;
	inset-block-start: 0;
	inset-inline-end: -4rem;
	padding-block: var(--toepassing-space-padding-sm);
	padding-inline: var(--toepassing-space-padding-lg);
	position: fixed;
	text-align: center;
	text-decoration: none;
	transform: rotate(45deg);
	transform-origin: center;
	z-index: 1;
	&:hover {
		background: var(--toepassing-color-feedback-success-emphasis);
		color: var(--toepassing-color-text-inverse);
	}
}

/* Tijdelijke fixes voor gebruikersonderzoeken 2026-04 */
.page-homepage {
	.list-content-links li {
		&:not(:last-of-type) {
			border-block-end: var(--toepassing-border-subtle);
		}
	}
}
.tiles {
	h3 {
		position: relative;
	}
	.badge {
		inset-block-start:0;
		inset-inline-end: 0;
		position: absolute	
	}
}
.temp-badge-feature-release {
	background-color: var(--rijkshuisstijl-color-grijs-300);
	color: var(--rijkshuisstijl-color-grijs-700);
	display: none !important;
	/* flex-shrink: 0; */
}
.temp-navitem-feature-release {
	&:hover, &:focus-visible {
		.temp-badge-feature-release {
			display: inline-block;
		}
	}
}
.temp-navitem-feature-release {
	opacity: 0.5;
}
[data-badge-id="subsidies-count"], [data-badge-id="regelgeving-count"] {
	font-weight: bold;
}

small.interest-industry, small.interest-business {
	color: var(--toepassing-color-text-subtle-2);
	display: inline-block;
	font-size: var(--rijkshuisstijl-text-font-size-sm);
	margin-block: var(--toepassing-space-margin-2xs)  !important;
}

.side-nav {
	a {
		gap: var(--toepassing-space-2xs)
	}
	.badge {
		align-items: center;
		block-size: 24px;
		display: inline-flex;
		padding: var(--toepassing-space-padding-xs);
	}
}
.tiles {
	p a {
		&:hover {
			text-decoration: underline;
		}
	}
}