/* Kopie van shared/ontwerp/css/schil.css, versie 1.2.0: niet hier wijzigen (python3 shared/ontwerp/bin/kopieer.py kladblok). */
/*
 * De schil (Schil.svelte en het html-sjabloon html/sjabloon.html): zijbalk, bovenbalk, inhoud,
 * voet, tabbalk en hoofdactie. Alleen klassen met ow-, in de laag ontwerp.schil.
 *
 * Profiel standaard: vanaf 761 px een vaste donkere zijbalk; tot 760 px wordt de zijbalk een lade
 * achter de menuknop (44 px) links in de bovenbalk, en blijft de bovenbalk één regel hoog. Zonder
 * JavaScript opent de lade met een link naar #ow-zijbalk (:target).
 * Profiel gsm (1.1.0): op de desktop gelijk aan standaard; tot 760 px de lade, of met de navigatie
 * tabbalk (ow-nav-tabbalk, 1.2.0: de keuze in de nuance) een tabbalk onderaan met hoogstens vier
 * items plus Meer (opent de lade), doelen van 44 px en de hoofdactie vast rechtsonder.
 * Profiel editor (1.1.0): vanaf 761 px een inklapbare zijbalk (ow-ingeklapt: een strook van 64 px
 * met alleen pictogrammen) en een compacte bovenbalk (48 px) rond een tekenvlak; tot 760 px de lade.
 */
@layer ontwerp.schil {
	.ow-naar-inhoud {
		position: absolute;
		left: var(--ruimte-2);
		top: -10rem;
		z-index: 30;
		padding: var(--ruimte-2) var(--ruimte-4);
		background: var(--kleur-vlak);
		color: var(--kleur-accent);
		border-radius: var(--hoek);
		box-shadow: var(--schaduw-zwevend);
		font-weight: var(--gewicht-half);
	}
	.ow-naar-inhoud:focus {
		top: var(--ruimte-2);
	}
	.ow-schil {
		display: grid;
		grid-template-columns: var(--zijbalk-breedte) minmax(0, 1fr);
		min-height: 100vh;
		/* De donkere kolom loopt door tot onderaan, ook als de inhoud langer is dan het scherm. */
		background: linear-gradient(to right, var(--kleur-zijbalk) var(--zijbalk-breedte), transparent 0);
	}
	.ow-zijbalk {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow-y: auto;
		padding: var(--ruimte-5) var(--ruimte-3);
		background: var(--kleur-zijbalk);
		color: var(--kleur-zijbalk-tekst);
	}
	.ow-domein-zakelijk .ow-zijbalk {
		box-shadow: inset 4px 0 0 var(--domein-zakelijk-streep);
	}
	.ow-domein-prive .ow-zijbalk {
		box-shadow: inset 4px 0 0 var(--domein-prive-streep);
	}
	/* Een actief domeinfilter: ook de bovenbalk krijgt de streep van het domein (het woord staat in de schakelaar). */
	.ow-domein-zakelijk .ow-bovenbalk {
		box-shadow: inset 0 3px 0 var(--domein-zakelijk-streep);
	}
	.ow-domein-prive .ow-bovenbalk {
		box-shadow: inset 0 3px 0 var(--domein-prive-streep);
	}
	.ow-zijbalk :focus-visible {
		outline-color: var(--kleur-focus-donker);
	}
	.ow-zijbalk-kop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ruimte-2);
	}
	.ow-merk {
		display: block;
		padding: 0 var(--ruimte-3) var(--ruimte-5);
		color: var(--kleur-zijbalk-actief-tekst);
		font-size: var(--tekst-lg);
		font-weight: var(--gewicht-vet);
		text-decoration: none;
	}
	.ow-menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--ruimte-1);
	}
	.ow-menu-link {
		position: relative;
		display: flex;
		align-items: center;
		gap: var(--ruimte-3);
		padding: var(--ruimte-2) var(--ruimte-3);
		border-radius: var(--hoek);
		color: var(--kleur-zijbalk-tekst);
		font-size: var(--tekst-sm);
		text-decoration: none;
	}
	.ow-menu-link:hover {
		background: var(--kleur-zijbalk-actief);
		color: var(--kleur-zijbalk-actief-tekst);
	}
	.ow-menu-link[aria-current='page'] {
		background: var(--kleur-zijbalk-actief);
		color: var(--kleur-zijbalk-actief-tekst);
		font-weight: var(--gewicht-half);
	}
	.ow-menu-link[aria-current='page']::before {
		content: '';
		position: absolute;
		left: calc(-1 * var(--ruimte-3) + 2px);
		top: var(--ruimte-2);
		bottom: var(--ruimte-2);
		width: 3px;
		border-radius: var(--hoek-pil);
		background: var(--kleur-zijbalk-markering);
	}
	/* Alleen op de gsm: menuknop, sluitknop, merk in de bovenbalk en de achtergrond van de lade. */
	.ow-menuknop,
	.ow-lade-sluiten,
	.ow-merk-klein,
	.ow-lade-achtergrond {
		display: none;
	}
	.ow-menuknop,
	.ow-lade-sluiten,
	.ow-inklapknop {
		place-items: center;
		flex: none;
		width: var(--doel-hoofd);
		height: var(--doel-hoofd);
		padding: 0;
		border: none;
		border-radius: var(--hoek);
		background: transparent;
		font: inherit;
		text-decoration: none;
		cursor: pointer;
	}
	.ow-menuknop {
		color: var(--kleur-tekst);
	}
	/* Profiel editor: de zijbalk in- en uitklappen (alleen vanaf 761 px). */
	.ow-inklapknop {
		display: none;
		width: var(--doel-hoofd);
		height: var(--doel-hoofd);
		color: var(--kleur-zijbalk-tekst);
	}
	.ow-inklapknop:hover {
		background: var(--kleur-zijbalk-actief);
		color: var(--kleur-zijbalk-actief-tekst);
	}
	.ow-menuknop:hover {
		background: var(--kleur-accent-zacht);
	}
	.ow-lade-sluiten {
		color: var(--kleur-zijbalk-actief-tekst);
	}
	.ow-lade-sluiten:hover {
		background: var(--kleur-zijbalk-actief);
	}
	.ow-rechts {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.ow-bovenbalk {
		display: flex;
		align-items: center;
		gap: var(--ruimte-4);
		min-height: var(--bovenbalk-hoogte);
		padding: var(--ruimte-2) var(--ruimte-5);
		background: var(--kleur-vlak);
		border-bottom: 1px solid var(--kleur-rand);
	}
	.ow-zoeken {
		display: flex;
		align-items: center;
		gap: var(--ruimte-2);
		flex: 0 1 24rem;
		min-width: 0;
		padding: 0 var(--ruimte-3);
		background: var(--kleur-vlak-zacht);
		border: 1px solid var(--kleur-rand-sterk);
		border-radius: var(--hoek);
		color: var(--kleur-tekst-zacht);
	}
	.ow-zoeken:focus-within {
		outline: 3px solid var(--kleur-focus);
		outline-offset: 1px;
	}
	.ow-zoeken-veld {
		flex: 1;
		min-width: 0;
		min-height: 2.4rem;
		border: none;
		background: transparent;
		color: var(--kleur-tekst);
		font: inherit;
		font-size: var(--tekst-sm);
	}
	/* De rand staat op het hele zoekvak (:focus-within hierboven). */
	.ow-zoeken-veld:focus-visible {
		outline: none;
	}
	.ow-zoeken-veld::placeholder {
		color: var(--kleur-tekst-zacht);
	}
	.ow-rechtsboven {
		display: flex;
		align-items: center;
		gap: var(--ruimte-3);
		margin-left: auto;
	}
	.ow-bel {
		position: relative;
		display: inline-grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		color: var(--kleur-tekst);
	}
	.ow-bel:hover {
		background: var(--kleur-accent-zacht);
	}
	.ow-teller {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 1.2rem;
		padding: 0 0.25rem;
		border-radius: var(--hoek-pil);
		background: var(--status-rood-tekst);
		color: var(--kleur-vlak);
		font-size: var(--tekst-xs);
		font-weight: var(--gewicht-vet);
		line-height: 1.2rem;
		text-align: center;
	}
	.ow-inhoud {
		width: 100%;
		max-width: var(--inhoud-max);
		margin: 0 auto;
		padding: var(--ruimte-5);
	}
	.ow-inhoud:focus {
		outline: none;
	}
	.ow-voet {
		width: 100%;
		max-width: var(--inhoud-max);
		margin: 0 auto;
		padding: 0 var(--ruimte-5) var(--ruimte-5);
		color: var(--kleur-tekst-zacht);
		font-size: var(--tekst-sm);
	}
	/* De hoofdactie: de ene grote knop (44 px) van de app; op de gsm vast rechtsonder. */
	.ow-hoofdactie {
		display: inline-flex;
		align-items: center;
		gap: var(--ruimte-2);
		flex: none;
		min-height: var(--doel-hoofd);
		padding: 0 var(--ruimte-4);
		border-radius: var(--hoek-pil);
		background: var(--kleur-accent);
		color: var(--kleur-accent-tekst);
		font-size: var(--tekst-sm);
		font-weight: var(--gewicht-half);
		text-decoration: none;
		white-space: nowrap;
	}
	.ow-hoofdactie:hover {
		background: var(--kleur-accent-hover);
	}
	/* De tabbalk (profiel gsm met navigatie tabbalk) staat alleen op een smal scherm in beeld. */
	.ow-tabbalk {
		display: none;
	}
	/* Het tekenvlak van een editor: neemt de ruimte die de schil laat. */
	.ow-tekenvlak {
		min-height: 60vh;
		background: var(--kleur-vlak);
		border: 1px solid var(--kleur-rand);
		border-radius: var(--hoek-groot);
	}
	/* Breed scherm: de editor met een inklapbare zijbalk en een compacte bovenbalk. */
	@media (min-width: 761px) {
		/* Zonder JavaScript blijft de knop van het html-sjabloon verborgen (hidden): ze zou niets doen. */
		.ow-profiel-editor .ow-inklapknop:not([hidden]) {
			display: inline-grid;
		}
		.ow-profiel-editor .ow-bovenbalk {
			min-height: var(--bovenbalk-hoogte-editor);
			padding-top: 0;
			padding-bottom: 0;
		}
		.ow-profiel-editor.ow-ingeklapt {
			grid-template-columns: var(--zijbalk-smal) minmax(0, 1fr);
			background: linear-gradient(to right, var(--kleur-zijbalk) var(--zijbalk-smal), transparent 0);
		}
		.ow-ingeklapt .ow-zijbalk {
			padding-left: var(--ruimte-2);
			padding-right: var(--ruimte-2);
		}
		.ow-ingeklapt .ow-zijbalk-kop {
			justify-content: center;
		}
		.ow-ingeklapt .ow-merk {
			display: none;
		}
		.ow-ingeklapt .ow-menu-link {
			justify-content: center;
			padding-left: 0;
			padding-right: 0;
			min-height: var(--doel-hoofd);
		}
		/* Alleen het pictogram in beeld; het woord blijft de naam van de link voor schermlezers. */
		.ow-ingeklapt .ow-menu-label {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
		.ow-ingeklapt .ow-menu-link[aria-current='page']::before {
			left: 0;
		}
	}
	/* Smal scherm (gsm): de zijbalk wordt een lade achter de menuknop. */
	@media (max-width: 760px) {
		.ow-schil {
			grid-template-columns: minmax(0, 1fr);
			background: none;
		}
		.ow-zijbalk {
			position: fixed;
			inset: 0 auto 0 0;
			z-index: 20;
			width: var(--lade-breedte);
			height: auto;
			padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-5);
			box-shadow: var(--schaduw-zwevend);
			transform: translateX(-100%);
			/* Dicht: niet zichtbaar en niet met Tab bereikbaar (pas na het dichtschuiven). */
			visibility: hidden;
			transition:
				transform 0.2s ease,
				visibility 0s linear 0.2s;
		}
		.ow-lade-open .ow-zijbalk,
		.ow-zijbalk:target {
			transform: none;
			/* Open: meteen zichtbaar, zodat de focus naar de sluitknop kan. */
			visibility: visible;
			transition:
				transform 0.2s ease,
				visibility 0s;
		}
		.ow-merk {
			padding: var(--ruimte-2) var(--ruimte-3);
		}
		.ow-menuknop,
		.ow-lade-sluiten {
			display: inline-grid;
		}
		.ow-merk-klein {
			display: inline-flex;
			align-items: center;
			min-height: var(--doel-min);
			flex: none;
			color: var(--kleur-tekst);
			font-weight: var(--gewicht-vet);
			text-decoration: none;
		}
		.ow-lade-open .ow-lade-achtergrond,
		.ow-zijbalk:target ~ .ow-lade-achtergrond {
			display: block;
			position: fixed;
			inset: 0;
			z-index: 15;
			background: var(--kleur-lade-achtergrond);
		}
		.ow-menu-link {
			min-height: var(--doel-hoofd);
		}
		.ow-bovenbalk {
			gap: var(--ruimte-2);
			padding-left: var(--ruimte-2);
			padding-right: var(--ruimte-3);
		}
		.ow-inhoud {
			padding-left: var(--ruimte-3);
			padding-right: var(--ruimte-3);
		}
		/* De hoofdactie blijft rechtsonder in beeld; de inhoud krijgt eronder plaats. */
		.ow-hoofdactie {
			position: fixed;
			right: var(--ruimte-4);
			bottom: var(--ruimte-4);
			z-index: 12;
			box-shadow: var(--schaduw-zwevend);
		}
		.ow-met-hoofdactie .ow-inhoud {
			padding-bottom: calc(var(--doel-hoofd) + var(--ruimte-6));
		}
		/* Navigatie tabbalk (profiel gsm): geen menuknop, wel de tabbalk onderaan (Meer opent de lade). */
		.ow-nav-tabbalk .ow-menuknop {
			display: none;
		}
		/* Plaats voor de hele tabbalk: haar hoogte, de rand van 1 px en de veilige zone onderaan. */
		.ow-nav-tabbalk .ow-rechts {
			padding-bottom: calc(var(--tabbalk-hoogte) + 1px + env(safe-area-inset-bottom, 0px));
		}
		.ow-nav-tabbalk .ow-hoofdactie {
			bottom: calc(var(--tabbalk-hoogte) + var(--ruimte-3));
		}
		.ow-nav-tabbalk .ow-tabbalk {
			display: block;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			padding-bottom: env(safe-area-inset-bottom, 0);
			background: var(--kleur-vlak);
			border-top: 1px solid var(--kleur-rand);
		}
		.ow-tabbalk-lijst {
			display: flex;
			margin: 0;
			padding: 0 var(--ruimte-1);
			list-style: none;
		}
		.ow-tabbalk-item {
			flex: 1 1 0;
			min-width: 0;
		}
		.ow-tab {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 2px;
			width: 100%;
			min-width: var(--doel-hoofd);
			min-height: var(--tabbalk-hoogte);
			padding: var(--ruimte-1);
			border: none;
			background: transparent;
			color: var(--kleur-tekst-zacht);
			font: inherit;
			font-size: var(--tekst-xs);
			text-decoration: none;
			cursor: pointer;
		}
		.ow-tab:hover {
			background: var(--kleur-accent-zacht);
		}
		/* Het actieve item: kleur, vet én een streep bovenaan (niet alleen kleur). */
		.ow-tab[aria-current='page'],
		.ow-tab.ow-actief {
			color: var(--kleur-accent);
			font-weight: var(--gewicht-half);
		}
		.ow-tab[aria-current='page']::before,
		.ow-tab.ow-actief::before {
			content: '';
			position: absolute;
			top: 0;
			left: 25%;
			right: 25%;
			height: 3px;
			border-radius: var(--hoek-pil);
			background: var(--kleur-accent);
		}
		.ow-tab-label {
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}