/* Kopie van shared/ontwerp/css/componenten.css, versie 1.2.0: niet hier wijzigen (python3 shared/ontwerp/bin/kopieer.py kladblok). */
/*
 * Opmaak van de componenten (svelte/*.svelte en het html-sjabloon html/sjabloon.html). Alleen klassen met
 * ow-, in de laag ontwerp.componenten: eigen css van een app zonder laag wint altijd.
 */
@layer ontwerp.componenten {
	/* Pictogram */
	.ow-pictogram {
		flex: none;
	}

	/* Avatar */
	.ow-avatar {
		display: inline-grid;
		place-items: center;
		flex: none;
		border-radius: 50%;
		font-weight: var(--gewicht-vet);
		letter-spacing: 0.02em;
		user-select: none;
	}
	.ow-avatar-sm {
		width: 1.75rem;
		height: 1.75rem;
		font-size: var(--tekst-xs);
	}
	.ow-avatar-md {
		width: 2.25rem;
		height: 2.25rem;
		font-size: var(--tekst-sm);
	}
	.ow-avatar-lg {
		width: 3rem;
		height: 3rem;
		font-size: var(--tekst-lg);
	}

	/* Statuskleuren van Avatar en Statuspil (tekst + zacht vlak) en van de subtekst van Kengetal */
	.ow-avatar.ow-toon-groen,
	.ow-statuspil.ow-toon-groen {
		color: var(--status-groen-tekst);
		background: var(--status-groen-vlak);
	}
	.ow-avatar.ow-toon-amber,
	.ow-statuspil.ow-toon-amber {
		color: var(--status-amber-tekst);
		background: var(--status-amber-vlak);
	}
	.ow-avatar.ow-toon-rood,
	.ow-statuspil.ow-toon-rood {
		color: var(--status-rood-tekst);
		background: var(--status-rood-vlak);
	}
	.ow-avatar.ow-toon-violet,
	.ow-statuspil.ow-toon-violet {
		color: var(--status-violet-tekst);
		background: var(--status-violet-vlak);
	}
	.ow-avatar.ow-toon-grijs,
	.ow-statuspil.ow-toon-grijs {
		color: var(--status-grijs-tekst);
		background: var(--status-grijs-vlak);
	}
	.ow-kengetal-subtekst.ow-toon-groen {
		color: var(--status-groen-tekst);
	}
	.ow-kengetal-subtekst.ow-toon-amber {
		color: var(--status-amber-tekst);
	}
	.ow-kengetal-subtekst.ow-toon-rood {
		color: var(--status-rood-tekst);
	}
	.ow-kengetal-subtekst.ow-toon-violet {
		color: var(--status-violet-tekst);
	}
	.ow-kengetal-subtekst.ow-toon-grijs {
		color: var(--status-grijs-tekst);
	}

	/* Domeinlabel */
	.ow-domeinlabel {
		display: inline-flex;
		align-items: center;
		gap: var(--ruimte-1);
		padding: 0.15rem var(--ruimte-2);
		border-radius: var(--hoek-klein);
		border-left: 4px solid;
		font-size: var(--tekst-xs);
		font-weight: var(--gewicht-half);
		white-space: nowrap;
	}
	.ow-domeinlabel.ow-domein-zakelijk {
		color: var(--domein-zakelijk-tekst);
		background: var(--domein-zakelijk-vlak);
		border-left-color: var(--domein-zakelijk-streep);
	}
	.ow-domeinlabel.ow-domein-prive {
		color: var(--domein-prive-tekst);
		background: var(--domein-prive-vlak);
		border-left-color: var(--domein-prive-streep);
	}

	/* Domeinschakelaar: drie knoppen in een groep; de gekozen is gevuld én vet, met pictogram of het woord Alles. */
	.ow-domeinschakelaar {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ruimte-1) var(--ruimte-3);
		margin: 0;
	}
	.ow-domeinschakelaar-knoppen {
		display: inline-flex;
		overflow: hidden;
		background: var(--kleur-vlak);
		border: 1px solid var(--kleur-rand-sterk);
		border-radius: var(--hoek-pil);
	}
	.ow-domeinknop {
		display: inline-flex;
		align-items: center;
		gap: var(--ruimte-1);
		min-height: 2rem;
		padding: var(--ruimte-1) var(--ruimte-3);
		border: none;
		background: transparent;
		color: var(--kleur-tekst);
		font: inherit;
		font-size: var(--tekst-sm);
		cursor: pointer;
	}
	.ow-domeinknop + .ow-domeinknop {
		border-left: 1px solid var(--kleur-rand-sterk);
	}
	.ow-domeinknop:hover {
		background: var(--kleur-accent-zacht);
	}
	.ow-domeinknop[aria-pressed='true'] {
		font-weight: var(--gewicht-vet);
	}
	.ow-domeinknop-alles[aria-pressed='true'] {
		background: var(--kleur-accent);
		color: var(--kleur-accent-tekst);
	}
	.ow-domeinknop-zakelijk[aria-pressed='true'] {
		background: var(--domein-zakelijk-vlak);
		color: var(--domein-zakelijk-tekst);
		box-shadow: inset 0 -3px 0 var(--domein-zakelijk-streep);
	}
	.ow-domeinknop-prive[aria-pressed='true'] {
		background: var(--domein-prive-vlak);
		color: var(--domein-prive-tekst);
		box-shadow: inset 0 -3px 0 var(--domein-prive-streep);
	}
	.ow-domeinfilter {
		margin: 0;
		font-size: var(--tekst-sm);
		font-weight: var(--gewicht-half);
	}
	.ow-domeinfilter:empty {
		display: none;
	}
	.ow-domeinfilter.ow-domein-zakelijk {
		color: var(--domein-zakelijk-tekst);
	}
	.ow-domeinfilter.ow-domein-prive {
		color: var(--domein-prive-tekst);
	}

	/* Filterpil */
	.ow-filterpil {
		display: inline-flex;
		align-items: center;
		gap: var(--ruimte-1);
		min-height: 2rem;
		padding: var(--ruimte-1) var(--ruimte-3);
		border: 1px solid var(--kleur-rand-sterk);
		border-radius: var(--hoek-pil);
		background: var(--kleur-vlak);
		color: var(--kleur-tekst);
		font: inherit;
		font-size: var(--tekst-sm);
		cursor: pointer;
	}
	.ow-filterpil:hover {
		background: var(--kleur-accent-zacht);
	}
	.ow-filterpil.ow-actief {
		background: var(--kleur-accent);
		border-color: var(--kleur-accent);
		color: var(--kleur-accent-tekst);
		font-weight: var(--gewicht-half);
	}
	.ow-filterpil.ow-actief:hover {
		background: var(--kleur-accent-hover);
	}
	.ow-filterpil-aantal {
		min-width: 1.4rem;
		padding: 0 var(--ruimte-1);
		border-radius: var(--hoek-pil);
		background: var(--status-grijs-vlak);
		color: var(--status-grijs-tekst);
		font-size: var(--tekst-xs);
		font-weight: var(--gewicht-half);
		text-align: center;
	}
	.ow-actief .ow-filterpil-aantal {
		background: var(--kleur-vlak);
		color: var(--kleur-accent);
	}

	/* Kaart */
	.ow-kaart {
		min-width: 0;
		padding: var(--ruimte-5);
		background: var(--kleur-vlak);
		border: 1px solid var(--kleur-rand);
		border-radius: var(--hoek-groot);
		box-shadow: var(--schaduw-kaart);
	}
	.ow-kaart-kop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ruimte-3);
		margin-bottom: var(--ruimte-3);
	}
	.ow-kaart-titel {
		margin: 0;
		font-size: var(--tekst-md);
		font-weight: var(--gewicht-vet);
	}
	.ow-kaart-acties {
		display: flex;
		gap: var(--ruimte-2);
	}

	/* Kengetal */
	.ow-kengetal {
		min-width: 0;
		padding: var(--ruimte-4) var(--ruimte-5);
		background: var(--kleur-vlak);
		border: 1px solid var(--kleur-rand);
		border-radius: var(--hoek-groot);
		box-shadow: var(--schaduw-kaart);
	}
	.ow-kengetal-label,
	.ow-kengetal-waarde,
	.ow-kengetal-subtekst {
		margin: 0;
	}
	.ow-kengetal-label {
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-sm);
		font-weight: var(--gewicht-half);
	}
	.ow-kengetal-waarde {
		margin: var(--ruimte-1) 0;
		font-size: var(--tekst-2xl);
		font-weight: var(--gewicht-vet);
		line-height: 1.15;
		font-variant-numeric: tabular-nums;
		overflow-wrap: anywhere;
	}
	.ow-kengetal-subtekst {
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-sm);
	}

	/* Knop */
	.ow-knop {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--ruimte-2);
		min-height: 2.5rem;
		padding: var(--ruimte-2) var(--ruimte-4);
		border: 1px solid transparent;
		border-radius: var(--hoek);
		font: inherit;
		font-size: var(--tekst-sm);
		font-weight: var(--gewicht-half);
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		white-space: nowrap;
	}
	.ow-knop[data-hoofdactie] {
		min-height: var(--doel-hoofd);
		padding-left: var(--ruimte-5);
		padding-right: var(--ruimte-5);
	}
	.ow-knop-primair {
		background: var(--kleur-accent);
		color: var(--kleur-accent-tekst);
	}
	.ow-knop-primair:hover {
		background: var(--kleur-accent-hover);
	}
	.ow-knop-secundair {
		background: var(--kleur-vlak);
		color: var(--kleur-tekst);
		border-color: var(--kleur-rand-sterk);
	}
	.ow-knop-secundair:hover,
	.ow-knop-stil:hover {
		background: var(--kleur-accent-zacht);
	}
	.ow-knop-stil {
		background: transparent;
		color: var(--kleur-accent);
	}
	.ow-knop:disabled {
		cursor: not-allowed;
		background: var(--status-grijs-vlak);
		color: var(--status-grijs-tekst);
		border-color: var(--kleur-rand);
	}

	/* Leeg: wat hier hoort en de eerste actie */
	.ow-leeg {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--ruimte-2);
		padding: var(--ruimte-6) var(--ruimte-4);
		background: var(--kleur-vlak);
		border: 1px dashed var(--kleur-rand-sterk);
		border-radius: var(--hoek-groot);
		text-align: center;
	}
	.ow-leeg-pictogram {
		color: var(--kleur-accent);
	}
	.ow-leeg-titel {
		margin: 0;
		font-size: var(--tekst-lg);
		font-weight: var(--gewicht-vet);
	}
	.ow-leeg-uitleg {
		max-width: 36rem;
		margin: 0;
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-sm);
	}
	.ow-leeg-acties {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--ruimte-2);
		margin-top: var(--ruimte-2);
	}

	/* Paginakop */
	.ow-paginakop {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--ruimte-3) var(--ruimte-4);
		margin-bottom: var(--ruimte-5);
	}
	.ow-paginakop-tekst {
		min-width: 0;
	}
	.ow-paginakop-titel {
		margin: 0;
		font-size: var(--tekst-xl);
		font-weight: var(--gewicht-vet);
		line-height: 1.2;
	}
	.ow-paginakop-ondertitel {
		margin: var(--ruimte-1) 0 0;
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-sm);
	}
	.ow-paginakop-acties {
		display: flex;
		flex-wrap: wrap;
		gap: var(--ruimte-2);
	}

	/* Statuspil */
	.ow-statuspil {
		display: inline-flex;
		align-items: center;
		gap: var(--ruimte-1);
		padding: 0.15rem var(--ruimte-2);
		border-radius: var(--hoek-pil);
		font-size: var(--tekst-xs);
		font-weight: var(--gewicht-half);
		line-height: 1.4;
		white-space: nowrap;
	}
	.ow-statuspil.ow-alleen-bol {
		padding: 0;
		background: none;
	}
	.ow-statuspil-bol {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: currentColor;
		flex: none;
	}
	.ow-alleen-bol .ow-statuspil-bol {
		width: 0.7rem;
		height: 0.7rem;
	}

	/* Veld: label, hulp, invoer en fout (de fout in tekst, niet alleen een rode rand) */
	.ow-veld {
		display: flex;
		flex-direction: column;
		gap: var(--ruimte-1);
		min-width: 0;
	}
	.ow-veld-label {
		font-size: var(--tekst-sm);
		font-weight: var(--gewicht-half);
	}
	.ow-veld-verplicht {
		color: var(--kleur-tekst-zacht);
		font-weight: var(--gewicht-normaal);
	}
	.ow-veld-hulp {
		margin: 0;
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-sm);
	}
	.ow-veld-invoer {
		min-height: 2.5rem;
		padding: var(--ruimte-2) var(--ruimte-3);
		background: var(--kleur-vlak);
		border: 1px solid var(--kleur-rand-sterk);
		border-radius: var(--hoek);
		color: var(--kleur-tekst);
		font: inherit;
	}
	.ow-veld-invoer[aria-invalid='true'] {
		border: 2px solid var(--status-rood-tekst);
	}
	.ow-veld-fout {
		margin: 0;
		color: var(--status-rood-tekst);
		font-size: var(--tekst-sm);
		font-weight: var(--gewicht-half);
	}

	/* Tabel */
	.ow-tabelvlak {
		overflow-x: auto;
		background: var(--kleur-vlak);
		border: 1px solid var(--kleur-rand);
		border-radius: var(--hoek-groot);
		box-shadow: var(--schaduw-kaart);
	}
	.ow-tabel {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--tekst-sm);
	}
	.ow-tabel-bijschrift {
		padding: var(--ruimte-3) var(--ruimte-4) 0;
		text-align: left;
		font-weight: var(--gewicht-vet);
	}
	.ow-tabel-kop {
		padding: var(--ruimte-3) var(--ruimte-4);
		background: var(--kleur-vlak-zacht);
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-xs);
		font-weight: var(--gewicht-half);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-align: left;
		white-space: nowrap;
		border-bottom: 1px solid var(--kleur-rand);
	}
	.ow-tabel-cel {
		padding: var(--ruimte-3) var(--ruimte-4);
		border-bottom: 1px solid var(--kleur-rand);
		vertical-align: middle;
	}
	.ow-tabel-rij:last-child .ow-tabel-cel {
		border-bottom: none;
	}
	.ow-tabel-rij:hover .ow-tabel-cel {
		background: var(--kleur-vlak-zacht);
	}
	.ow-tabel .ow-soort-bedrag {
		text-align: right;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}
	.ow-tabel .ow-soort-datum {
		white-space: nowrap;
	}
	.ow-tabel-code {
		font-family: var(--font-mono);
		font-size: var(--tekst-sm);
		color: var(--kleur-tekst);
	}
	.ow-afwijkend {
		color: var(--kleur-afwijkend);
		font-weight: var(--gewicht-half);
	}
	.ow-afwijkend small {
		font-size: var(--tekst-xs);
	}
	.ow-persoon {
		display: inline-flex;
		align-items: center;
		gap: var(--ruimte-2);
	}
	.ow-tabel-leeg {
		color: var(--kleur-tekst-zacht);
		text-align: center;
		padding: var(--ruimte-5);
	}
}