/* ==========================================================================
   Hoitsema Leerportaal
   --------------------------------------------------------------------------
   Alles hangt aan de kleur- en typografievariabelen uit theme.json van het
   Hoitsema-thema. Daardoor volgt het portaal de huisstijl automatisch, en
   werkt de donkere modus mee zonder dat hier iets extra's voor nodig is: die
   zet dezelfde variabelen om.

   De waarden achter de komma zijn terugvaloptie voor het geval de plugin
   onder een ander thema draait.
   ========================================================================== */

.hlms {
	--lms-wit:      var(--wp--preset--color--base, #ffffff);
	--lms-vlak:     var(--wp--preset--color--base-alt, #f4f5f6);
	--lms-tekst:    var(--wp--preset--color--contrast, #1b1d1f);
	--lms-grijs:    var(--wp--preset--color--contrast-2, #4a5560);
	--lms-accent:   var(--wp--preset--color--accent, #12bbd8);
	--lms-accent-2: var(--wp--preset--color--accent-2, #0e7391);
	--lms-navy:     var(--wp--preset--color--navy, #022d41);
	--lms-lijn:     var(--wp--preset--color--border, #e3e6e8);

	--lms-kop:      var(--wp--preset--font-family--heading, Outfit, 'Helvetica Neue', Arial, sans-serif);
	--lms-body:     var(--wp--preset--font-family--body, Outfit, 'Helvetica Neue', Arial, sans-serif);

	/* Invoervelden hebben in de huisstijl een donkerder rand dan de kaartlijn:
	   anders is een leeg veld nauwelijks te zien. */
	--lms-veldlijn: #7d858d;
	--lms-veldhover: #5f676f;

	--lms-radius:   var(--hoi-radius, 6px);
	--lms-overgang: var(--hoi-transition, 180ms cubic-bezier(.2, .6, .3, 1));
	--lms-schaduw:  var(--wp--preset--shadow--soft, 0 1px 2px rgba(27,29,31,.04), 0 8px 24px rgba(27,29,31,.06));

	/* Statuskleuren. Niet in het merkpalet, want ze betekenen iets: af, bezig,
	   niet begonnen, verlopen. Wel afgestemd op de rest. */
	--lms-af-vlak:      #e3f4ea;
	--lms-af-tekst:     #12603a;
	--lms-bezig-vlak:   #fdf3d8;
	--lms-bezig-tekst:  #7a5200;
	--lms-rust-vlak:    #f0f2f4;
	--lms-rust-tekst:   #50575e;
	--lms-stop-vlak:    #fbeaea;
	--lms-stop-tekst:   #8c2426;

	max-width: 820px;
	margin: 0 auto;
	font-family: var(--lms-body);
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	line-height: var(--wp--custom--line-height--normal, 1.65);
	color: var(--lms-tekst);
}
.hlms * { box-sizing: border-box; }

/* Statuskleuren in de donkere stand. Het thema zet zijn eigen palet om via
   dezelfde twee selectors; die volgen we hier. */
:root[data-theme="dark"] .hlms,
:root[data-theme="dark"] .hlms-nav {
	--lms-af-vlak:     rgba(46, 160, 100, .24);
	--lms-af-tekst:    #a8e6c4;
	--lms-bezig-vlak:  rgba(205, 155, 40, .24);
	--lms-bezig-tekst: #f3daa4;
	--lms-rust-vlak:   rgba(255, 255, 255, .09);
	--lms-rust-tekst:  #d3d6d8;
	--lms-stop-vlak:   rgba(205, 70, 70, .26);
	--lms-stop-tekst:  #f6bcbc;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .hlms,
	:root:not([data-theme="light"]) .hlms-nav {
		--lms-af-vlak:     rgba(46, 160, 100, .24);
		--lms-af-tekst:    #a8e6c4;
		--lms-bezig-vlak:  rgba(205, 155, 40, .24);
		--lms-bezig-tekst: #f3daa4;
		--lms-rust-vlak:   rgba(255, 255, 255, .09);
		--lms-rust-tekst:  #d3d6d8;
		--lms-stop-vlak:   rgba(205, 70, 70, .26);
		--lms-stop-tekst:  #f6bcbc;
	}
}

/* --- Navigatie in de themaheader ---------------------------------------- */
.hlms-nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--heading, Outfit, sans-serif);
	font-size: var(--wp--preset--font-size--small, .9375rem);
	font-weight: 600;
}
.hlms-nav__link {
	color: var(--wp--preset--color--contrast, #1b1d1f);
	text-decoration: none;
}
/* Menu-items: alleen kleurwissel bij hover, geen onderstreping. */
.hlms-nav__link:hover { color: var(--wp--preset--color--accent-2, #0e7391); text-decoration: none; }
.hlms-nav__link--stil { color: var(--wp--preset--color--contrast-2, #4a5560); font-weight: 400; }
.hlms-nav__knop {
	background: var(--lms-knop-vlak);
	color: var(--lms-knop-tekst);
	border: 1px solid var(--lms-knop-lijn);
	border-radius: var(--hoi-radius, 6px);
	padding: .55rem 1.15rem;
	text-decoration: none;
	letter-spacing: .01em;
}
.hlms-nav__knop:hover { background: var(--lms-knop-hover); color: var(--lms-knop-tekst); border-color: var(--lms-knop-lijn); }

/* --- Koppen -------------------------------------------------------------- */
.hlms h2, .hlms h3 {
	font-family: var(--lms-kop);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug, 1.2);
	letter-spacing: -.02em;
	color: var(--lms-tekst);
}
.hlms-kop { margin-bottom: var(--wp--preset--spacing--30, 1.75rem); }
.hlms-kop h1, .hlms-kop h2 { margin: 0; font-size: var(--wp--preset--font-size--xx-large, 2.5rem); }
.hlms-eyebrow {
	font-family: var(--lms-kop);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lms-accent-2);
	margin: 0 0 .5rem;
}
.hlms-sub { color: var(--lms-grijs); font-size: var(--wp--preset--font-size--small, .9375rem); margin: 0; }
.hlms-hint { color: var(--lms-grijs); font-size: var(--wp--preset--font-size--small, .9375rem); }
.hlms a { color: var(--lms-accent-2); }

/* --- Kaarten ------------------------------------------------------------- */
.hlms-kaart {
	background: var(--lms-wit);
	border: 1px solid var(--lms-lijn);
	border-radius: var(--lms-radius);
	padding: var(--wp--preset--spacing--30, 1.75rem);
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}
.hlms-kaart h2, .hlms-kaart h3 { margin-top: 0; }

/* --- Cursusoverzicht ----------------------------------------------------- */
.hlms-lijst { display: grid; gap: 1rem; }
.hlms-cursus {
	display: block;
	background: var(--lms-wit);
	border: 1px solid var(--lms-lijn);
	border-radius: var(--lms-radius);
	padding: 1.25rem 1.4rem;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--lms-overgang), box-shadow var(--lms-overgang), transform var(--lms-overgang);
}
.hlms-cursus:hover, .hlms-cursus:focus-within {
	border-color: var(--lms-accent);
	box-shadow: var(--lms-schaduw);
	transform: translateY(-2px);
}
.hlms-cursus:hover h3 { color: var(--lms-accent-2); }
.hlms-cursus__kop { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.hlms-cursus h3 { margin: 0; font-size: var(--wp--preset--font-size--large, 1.25rem); }

.hlms-balk { height: 6px; background: var(--lms-vlak); border-radius: 3px; overflow: hidden; margin: .85rem 0 .6rem; }
.hlms-balk span { display: block; height: 100%; background: var(--lms-accent); transition: width var(--lms-overgang); }

/* --- Status -------------------------------------------------------------- */
.hlms-status {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	font-family: var(--lms-kop);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
}
.hlms-status--afgerond     { background: var(--lms-af-vlak);    color: var(--lms-af-tekst); }
.hlms-status--bezig        { background: var(--lms-bezig-vlak); color: var(--lms-bezig-tekst); }
.hlms-status--niet_gestart { background: var(--lms-rust-vlak);  color: var(--lms-rust-tekst); }
.hlms-status--verlopen     { background: var(--lms-stop-vlak);  color: var(--lms-stop-tekst); }

/* --- Modules ------------------------------------------------------------- */
/* ==========================================================================
   Scrollen
   --------------------------------------------------------------------------
   Na "Ik heb dit bekeken" stuurt de server terug naar #module-N (zie
   HLMS_Progress::afronden). Zonder deze regel klapt de pagina in een keer
   naar dat onderdeel en moet je zelf terugzoeken waar je gebleven was.

   Uit voor wie zijn systeem op bewegingsarm heeft staan: een pagina die uit
   zichzelf beweegt maakt sommige mensen letterlijk draaierig.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Ruimte onder de meeschuivende header (.hoi-plakbalk), anders komt de kop
   van het onderdeel er precies achter te liggen. Het thema regelt dit voor
   :target, maar dat is een themabestand en dus weg na thema-bijwerken.sh;
   hier staat het bij de rest van de portaalstijlen. */
.hlms-module { scroll-margin-top: 6rem; }
/* De cursuspagina breder dan de 760px tekstkolom van het thema: een dia of A4
   was daarin te klein om te lezen. Via de variabele van de constrained layout,
   zodat titel, kaarten en PDF dezelfde breedte houden en op elkaar aansluiten. */
body.single-lms_cursus main { --wp--style--global--content-size: 1100px; }
body.single-lms_cursus main .wp-block-post-content .hlms { max-width: none; }
/* Ruimte tussen titel en inleiding: de themaspatiëring kwam op ~11px uit en dan
   plakt de tekst tegen de grote titel aan. Onder de titel, want de inleiding
   krijgt zijn marge als inline style uit het sjabloon. */
body.single-lms_cursus main > .wp-block-post-title { margin-bottom: 1.25rem; }
/* Titel links, statuslabel rechts op dezelfde hoogte (zie titel_met_status()). */
.hlms-titelrij { max-width: var(--wp--style--global--content-size, 1100px); display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hlms-titelrij .wp-block-post-title { margin: 0; }
.hlms-titelrij .hlms-status { flex-shrink: 0; }

.hlms-modules { display: grid; gap: 1rem; margin: var(--wp--preset--spacing--30, 1.75rem) 0; }
.hlms-module {
	background: var(--lms-wit);
	border: 1px solid var(--lms-lijn);
	border-radius: var(--lms-radius);
	padding: 1.4rem;
}
.hlms-module.is-af { border-color: var(--lms-accent); }
.hlms-module h3 {
	margin: 0 0 .85rem;
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}
.hlms-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--lms-navy);
	color: #fff;
	font-size: .8125rem;
	font-weight: 600;
	flex: none;
}
.hlms-module.is-af .hlms-nummer { background: var(--lms-accent); color: var(--lms-knop-tekst); }
.hlms-vink {
	margin-left: auto;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--lms-af-tekst);
}
/* De PDF-viewer wordt door lms.js in .hlms-pdfplek gezet. Zie daar waarom hij
   niet gewoon in de HTML staat. */
.hlms-pdf__vak { position: relative; margin-bottom: .6rem; }
.hlms-pdf { display: block; width: 100%; height: 85vh; min-height: 520px; border: 1px solid var(--lms-lijn); border-radius: var(--lms-radius); }

/* Doorzichtige knop over de viewer: zolang die er ligt gaat het scrollwiel
   naar de pagina en niet naar de PDF. */
.hlms-pdf__vanger {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: .9rem;
	margin: 0;
	background: none;
	border: 0;
	border-radius: var(--lms-radius);
	cursor: pointer;
	font: inherit;
	color: var(--lms-tekst);
}
/* De uitleg staat er pas als je er bent; anders dekt hij de onderste regels
   van de werkinstructie af. */
.hlms-pdf__vanger span {
	background: var(--lms-wit);
	border: 1px solid var(--lms-lijn);
	border-radius: var(--lms-radius);
	box-shadow: var(--lms-schaduw);
	padding: .35rem .7rem;
	font-size: var(--wp--preset--font-size--small, .9375rem);
	opacity: 0;
	transition: opacity var(--lms-overgang);
}
.hlms-pdf__vanger:hover span,
.hlms-pdf__vanger:focus-visible span { opacity: 1; }
.hlms-pdf__vanger:focus-visible {
	outline: 2px solid var(--lms-accent-2);
	outline-offset: 2px;
}
/* De display hierboven wint van de standaardregel voor [hidden]; zonder deze
   regel blijft de knop na een klik gewoon staan. */
.hlms-pdf__vanger[hidden] { display: none; }
.hlms-video { width: 100%; border-radius: var(--lms-radius); background: #000; }
.hlms-afbeelding { display: block; max-width: 100%; height: auto; border-radius: var(--lms-radius); }

/* --- Toets --------------------------------------------------------------- */
.hlms-vraag { border: 0; border-top: 1px solid var(--lms-lijn); padding: 1.1rem 0 .3rem; margin: 0; }
.hlms-vraag legend { font-family: var(--lms-kop); font-weight: 600; padding: 0; }
.hlms-optie { display: block; padding: .5rem 0; cursor: pointer; }
.hlms-optie input { margin-right: .6rem; }

/* --- Formulieren --------------------------------------------------------- */
.hlms label {
	display: block;
	margin: 1.1rem 0 .35rem;
	font-family: var(--lms-kop);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--lms-tekst);
}
.hlms input[type=text],
.hlms input[type=email],
.hlms input[type=tel],
.hlms input[type=password],
.hlms input[type=number],
.hlms select,
.hlms textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	font: 400 1.0625rem/1.5 var(--lms-body);
	color: var(--lms-tekst);
	background-color: var(--lms-wit);
	border: 1px solid var(--lms-veldlijn);
	border-radius: var(--lms-radius);
	transition: border-color var(--lms-overgang);
}
.hlms input::placeholder,
.hlms textarea::placeholder { color: var(--lms-grijs); opacity: 1; }
.hlms input:hover,
.hlms select:hover,
.hlms textarea:hover { border-color: var(--lms-veldhover); }
.hlms input:focus,
.hlms select:focus,
.hlms textarea:focus {
	border-color: var(--lms-accent-2);
	outline: 2px solid var(--lms-accent-2);
	outline-offset: 1px;
}
.hlms button:focus-visible,
.hlms a:focus-visible {
	outline: 2px solid var(--lms-accent-2);
	outline-offset: 2px;
}

/* --- Knoppen: gelijk aan de knopstijl uit theme.json --------------------- */
.hlms-knop {
	display: inline-block;
	margin: 1.15rem .5rem 0 0;
	padding: .9rem 1.6rem;
	border: 1px solid var(--lms-knop-lijn);
	border-radius: var(--lms-radius);
	background: var(--lms-knop-vlak);
	color: var(--lms-knop-tekst);
	font-family: var(--lms-kop);
	font-size: var(--wp--preset--font-size--small, .9375rem);
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--lms-overgang), border-color var(--lms-overgang);
}
.hlms-knop:hover { background: var(--lms-knop-hover); border-color: var(--lms-knop-lijn); color: var(--lms-knop-tekst); }
/* Een knop is geen tekstlink: nooit onderstreept. De themaregel voor links in lopende
   tekst (main :where(p, li) a:not(...), specificiteit 0,2,2) pakt anders ook een
   knop-link binnen een <p>; :is() tilt deze regel daar net boven. */
.hlms a.hlms-knop:is(:link, :visited, :hover, :focus, :active) { text-decoration: none; }
.hlms-knop--licht {
	background: transparent;
	color: var(--lms-tekst);
	border-color: var(--lms-lijn);
}
.hlms-knop--licht:hover { background: var(--lms-vlak); border-color: var(--lms-grijs); color: var(--lms-tekst); }
.hlms-knop--gevaar {
	background: transparent;
	color: var(--lms-stop-tekst);
	border-color: var(--lms-stop-tekst);
}
.hlms-knop--gevaar:hover { background: var(--lms-stop-vlak); }

/* --- Meldingen ----------------------------------------------------------- */
.hlms-melding {
	padding: .85rem 1.1rem;
	border-radius: var(--lms-radius);
	margin-bottom: 1.15rem;
	font-size: var(--wp--preset--font-size--small, .9375rem);
}
.hlms-melding--goed { background: var(--lms-af-vlak);   color: var(--lms-af-tekst); }
.hlms-melding--fout { background: var(--lms-stop-vlak); color: var(--lms-stop-tekst); }
.hlms-melding--test {
	background: var(--lms-vlak);
	color: var(--lms-tekst);
	border: 1px dashed var(--lms-accent);
}

@media (max-width: 600px) {
	.hlms-cursus__kop { flex-direction: column; align-items: flex-start; }
	.hlms-pdf { height: 70vh; min-height: 0; }
	.hlms-knop { display: block; text-align: center; margin-right: 0; }
}

/* ==========================================================================
   Beheerpagina
   Cursussen maken, deelnemers goedkeuren en de rapportage. Breder dan het
   portaal, want de statusmatrix heeft ruimte nodig.
   ========================================================================== */

/* De beheerpagina gebruikt het sjabloon "Pagina zonder titel": dat legt geen
   breedte en geen ruimte op, dus dat regelen we hier zelf. */
.hlms--breed {
	max-width: 1280px;
	padding: var(--wp--preset--spacing--40, 3rem) 1.25rem var(--wp--preset--spacing--50, 4rem);
}
.hlms-titel {
	font-family: var(--lms-kop);
	font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 1.25rem;
}
.hlms--breed h2 { font-size: var(--wp--preset--font-size--x-large, 1.75rem); margin-top: 0; }
.hlms--breed h3 { font-size: var(--wp--preset--font-size--large, 1.25rem); margin: 1.75rem 0 .75rem; }
/* Bovenaan een kaart geen extra ruimte, anders staan kaarten naast elkaar scheef. */
.hlms--breed .hlms-kaart > h3:first-child { margin-top: 0; }

/* --- Tabbladen ----------------------------------------------------------- */
.hlms-tabs {
	display: flex;
	align-items: center;
	gap: .25rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--lms-lijn);
	margin-bottom: var(--wp--preset--spacing--30, 1.75rem);
}
.hlms-tab {
	padding: .7rem 1.1rem;
	font-family: var(--lms-kop);
	font-size: var(--wp--preset--font-size--small, .9375rem);
	font-weight: 600;
	color: var(--lms-grijs);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.hlms-tab:hover { color: var(--lms-tekst); }
.hlms-tab.is-actief { color: var(--lms-tekst); border-bottom-color: var(--lms-accent); }
.hlms-bel {
	margin-left: auto;
	padding: 3px 12px;
	border-radius: 20px;
	background: var(--lms-bezig-vlak);
	color: var(--lms-bezig-tekst);
	font-size: .75rem;
	font-weight: 600;
}

/* --- Tabellen ------------------------------------------------------------ */
.hlms-tabelwrap { overflow-x: auto; margin-bottom: var(--wp--preset--spacing--20, 1rem); }
.hlms-tabel {
	width: 100%;
	border-collapse: collapse;
	background: var(--lms-wit);
	border: 1px solid var(--lms-lijn);
	border-radius: var(--lms-radius);
	font-size: var(--wp--preset--font-size--small, .9375rem);
}
.hlms-tabel th,
.hlms-tabel td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lms-lijn); }
.hlms-tabel thead th {
	font-family: var(--lms-kop);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lms-grijs);
	background: var(--lms-vlak);
	white-space: nowrap;
}
.hlms-tabel tbody tr:last-child td { border-bottom: 0; }
/* Rapportagematrix: altijd op schermbreedte, ook met veel cursussen. Vaste indeling:
   medewerker en afdeling een vast deel, de cursussen delen de rest gelijk; lange
   cursustitels breken af in plaats van de tabel buiten beeld te duwen. */
/* Ondergrens voor een telefoon: daar liever zijwaarts scrollen dan kolommen van een paar letters breed. */
.hlms-matrix { table-layout: fixed; min-width: 720px; }
.hlms-matrix th:nth-child(1) { width: 20%; }
.hlms-matrix th:nth-child(2) { width: 10%; }
.hlms-tabel.hlms-matrix thead th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; vertical-align: bottom; letter-spacing: .03em; }
.hlms-matrix th,
.hlms-matrix td { padding: .5rem .6rem; overflow-wrap: anywhere; }
.hlms-klein { color: var(--lms-grijs); font-size: .75rem; }

.hlms-vlag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: .6875rem;
	font-weight: 600;
	white-space: nowrap;
}
.hlms-vlag--afgerond     { background: var(--lms-af-vlak);    color: var(--lms-af-tekst); }
.hlms-vlag--bezig        { background: var(--lms-bezig-vlak); color: var(--lms-bezig-tekst); }
.hlms-vlag--niet_gestart { background: var(--lms-rust-vlak);  color: var(--lms-rust-tekst); }
.hlms-vlag--verlopen     { background: var(--lms-stop-vlak);  color: var(--lms-stop-tekst); }

/* Badge vóór de naam van een behaalde training op /mijn-account/. */
.hlms-badge .hlms-badge__icoon {
	width: 1.5rem;
	height: auto;
	float: left;
	margin-right: .5rem;
	color: var(--lms-knop-lijn);
}
/* Eigen blokcontext: een lange naam loopt door naast de badge, niet eronder. */
.hlms-badge > a { display: block; overflow: hidden; }
.hlms-badge.is-verlopen .hlms-badge__icoon { color: var(--lms-grijs); opacity: .6; }

/* --- Tegels en filters --------------------------------------------------- */
.hlms-tegels { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hlms-tegel {
	flex: 1 1 130px;
	background: var(--lms-wit);
	border: 1px solid var(--lms-lijn);
	border-left: 4px solid var(--lms-lijn);
	border-radius: var(--lms-radius);
	padding: .85rem 1.1rem;
}
.hlms-tegel strong { display: block; font-family: var(--lms-kop); font-size: 1.75rem; line-height: 1.1; }
.hlms-tegel span { color: var(--lms-grijs); font-size: .75rem; }
.hlms-tegel--afgerond     { border-left-color: #1a7f4b; }
.hlms-tegel--bezig        { border-left-color: #9a6700; }
.hlms-tegel--niet_gestart { border-left-color: var(--lms-grijs); }
.hlms-tegel--verlopen     { border-left-color: #b32d2e; }

.hlms-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hlms-filters select { width: auto; min-width: 190px; }
.hlms-tabel select { width: auto; min-width: 140px; padding: .35rem .5rem; font-size: .9375rem; }
.hlms-knop--klein { margin-top: 0; padding: .55rem 1.1rem; }
.hlms-inline { display: inline; }
.hlms-inline .hlms-knop { margin: 0 .3rem .3rem 0; }

/* Deelnemers: alles op één lijn per rij, acties naast elkaar. */
.hlms-deelnemers td { vertical-align: middle; }
.hlms-deelnemers .hlms-inline { display: inline-flex; align-items: center; gap: .4rem; }
.hlms-deelnemers .hlms-inline .hlms-knop { margin: 0; }
.hlms-acties { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }

/* Schuifje voor actief/geblokkeerd bij Beheer > Deelnemers. */
.hlms .hlms-schuif { display: inline-flex; align-items: center; gap: .45rem; margin: 0; cursor: pointer; font-size: .9rem; white-space: nowrap; }
.hlms .hlms-schuif input {
	appearance: none; position: relative; flex-shrink: 0; width: 2.4rem; height: 1.35rem; margin: 0;
	border: 1px solid var(--lms-veldlijn); border-radius: 999px; background: var(--lms-rust-vlak);
	cursor: pointer; transition: background var(--lms-overgang), border-color var(--lms-overgang);
}
.hlms .hlms-schuif input::before {
	content: ""; position: absolute; top: 50%; left: 2px; width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transform: translateY(-50%);
	transition: left var(--lms-overgang);
}
.hlms .hlms-schuif input:checked { background: var(--lms-accent); border-color: var(--lms-accent); }
.hlms .hlms-schuif input:checked::before { left: calc(100% - 1.05rem - 2px); }
.hlms .hlms-schuif input:focus-visible { outline: 2px solid var(--lms-accent-2); outline-offset: 2px; }

/* --- Cursusbouwer -------------------------------------------------------- */
.hlms-verplicht { font-weight: 400; font-size: .75rem; color: #b4232a; }
.hlms-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
/* Kaarten naast elkaar: zelfde tussenruimte als tussen gestapelde kaarten. */
.hlms-tweekolom--kaarten { gap: var(--wp--preset--spacing--20, 1rem); margin-bottom: var(--wp--preset--spacing--20, 1rem); }
.hlms-tweekolom--kaarten > .hlms-kaart { margin-bottom: 0; }
.hlms-keuzes { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .3rem; }
.hlms-keuze { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; }
.hlms-keuze input { width: auto; }
.hlms input[type=number] { width: auto; min-width: 110px; }
.hlms input[type=file] { width: 100%; font-size: .9375rem; }

.hlms-onderdeel {
	border: 1px solid var(--lms-lijn);
	border-left: 4px solid var(--lms-accent);
	border-radius: var(--lms-radius);
	padding: 0 1.1rem 1.1rem;
	margin-bottom: 1rem;
	background: var(--lms-vlak);
}
.hlms-onderdeel__kop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .9rem 0 .3rem;
	font-family: var(--lms-kop);
}
.hlms-verwijder {
	background: none;
	border: 0;
	padding: 0;
	color: #b32d2e;
	font-size: .8125rem;
	cursor: pointer;
	text-decoration: underline;
}
.hlms-onderdeel label { margin-top: .8rem; }

.hlms-optie-rij { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.hlms-optie-rij input[type=radio] { width: auto; flex-shrink: 0; }
.hlms-optie-rij input[type=text] { width: auto; flex: 1; min-width: 0; margin: 0; }
.hlms-optie-rij .hlms-verwijder { flex-shrink: 0; }

@media (max-width: 600px) {
	.hlms-tweekolom { grid-template-columns: 1fr; }
	.hlms-bel { margin-left: 0; }
}

/* ==========================================================================
   Huisstijl per bedrijf
   --------------------------------------------------------------------------
   Het portaal is er voor medewerkers van Royal Hoitsema Labels en van Scholma
   Print & Media. Klikken op een van de twee beeldmerken zet de kleuren om.
   Dat gebeurt door dezelfde variabelen te overschrijven die theme.json uitzet,
   dus alles volgt automatisch: knoppen, links, voortgangsbalken, de voettekst.

   De selectors staan opzettelijk dubbel ([data-merk="x"][data-merk]). Daarmee
   winnen ze van de regels van het thema en van de donkere modus, ongeacht in
   welke volgorde de stylesheets geladen worden.

   Contrastcontrole (eis 4,5 voor normale tekst):
     Scholma rood #e02028 met witte tekst        4,8
     Scholma accent-2 #a8121a op wit             7,6
     Scholma accent-2 #ffc2c4 op donker #545557  4,9
     Scholma navy #1f2545 met witte tekst       14,9
   ========================================================================== */

:root {
	/* Hoitsema, de standaard. */
	--lms-knop-vlak:  var(--wp--preset--color--accent, #12bbd8);
	--lms-knop-tekst: #0d1b21;
	--lms-knop-lijn:  #0d90a6;
	--lms-knop-hover: #0e9cb5;
}

html[data-merk="scholma"][data-merk] {
	--wp--preset--color--accent:   #e02028;
	--wp--preset--color--accent-2: #a8121a;
	--wp--preset--color--navy:     #1f2545;

	--lms-knop-tekst: #ffffff;
	--lms-knop-lijn:  #b4131a;
	--lms-knop-hover: #c8151c;
}

/* In de donkere stand moet accent-2 juist lichter, net als bij Hoitsema. */
html[data-merk="scholma"][data-theme="dark"] {
	--wp--preset--color--accent-2: #ffc2c4;
}
@media (prefers-color-scheme: dark) {
	html[data-merk="scholma"][data-merk]:not([data-theme="light"]) {
		--wp--preset--color--accent-2: #ffc2c4;
	}
}

/* ==========================================================================
   De twee beeldmerken
   Naast elkaar met een haarlijn ertussen, "Leerportaal" gecentreerd eronder.
   Beide zijn knoppen: ze wisselen de huisstijl. Naar de startpagina ga je via
   "Mijn trainingen" in de navigatie.
   ========================================================================== */

.hlms-merken { display: inline-flex; flex-direction: column; gap: .3em; line-height: 1; }
.hlms-merken__rij { display: flex; align-items: center; gap: .95rem; flex-wrap: wrap; }

.hlms-merken__lijn {
	width: 1px;
	align-self: stretch;
	min-height: 2rem;
	background: var(--wp--preset--color--border, #e3e6e8);
}
.hoi-footer .hlms-merken__lijn { background: rgba(255, 255, 255, .28); }

/* .hoi-logo__since uit het thema lijnt rechts uit en is even specifiek. Met
   twee klassen hangt de uitkomst niet af van de laadvolgorde. */
.hlms-merken .hlms-merken__sub {
	margin: .1rem 0 0;
	text-align: center;
	width: 100%;
}

/* --- De knoppen ---------------------------------------------------------- */
.hlms-merk {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .25rem .3rem;
	margin: 0;
	background: none;
	border: 0;
	border-radius: var(--hoi-radius, 6px);
	cursor: pointer;
	color: inherit;
	font: inherit;
	transition: opacity var(--hoi-transition, 180ms ease);
}

/* Alleen de schakelaars in de header dimmen. In de voettekst zijn het gewone
   beeldmerken; daar zou dimmen ze op het navy onleesbaar maken. */
.hlms-merk[aria-pressed] { opacity: .6; }
.hlms-merk[aria-pressed="true"] { opacity: 1; }
.hlms-merk[aria-pressed="false"]:hover { opacity: .85; }
.hlms-merk--stil { cursor: default; opacity: 1; }

.hlms-merk:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2, #0e7391);
	outline-offset: 2px;
}

.hlms-merk--hoitsema .hoi-logo__mark { width: 1.85em; margin: 0; }

/* Het beeldmerk van Hoitsema is een logo en geen accentkleur: het blijft
   cyaan, ook als het portaal in de Scholma-kleuren staat. Het thema kleurt
   de stippen met --wp--preset--color--accent, en die zet de merkwissel om;
   zonder deze regel staat er dus een rood Hoitsema-logo in de header.
   De waarde staat er vast in. Een verwijzing naar de variabele helpt niet:
   die wordt op hetzelfde html-element opgelost en levert alsnog het rood. */
.hlms-merk--hoitsema .hoi-logo__mark { color: #12bbd8; }

.hlms-merk__beeld {
	display: block;
	width: auto;
	height: clamp(1.9rem, 4vw, 2.45rem);
}

/* Twee varianten van het Scholma-logo: zwarte tekst voor een lichte
   achtergrond, witte tekst voor een donkere. De regel "PRINT & MEDIA" zou
   anders wegvallen tegen het grijs van de donkere modus. */
.hlms-merk__beeld--donker { display: none; }
html[data-theme="dark"] .hlms-merk__beeld--licht { display: none; }
html[data-theme="dark"] .hlms-merk__beeld--donker { display: block; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .hlms-merk__beeld--licht { display: none; }
	html:not([data-theme="light"]) .hlms-merk__beeld--donker { display: block; }
}
/* In de navy voettekst altijd de negatieve versie. */
.hoi-footer .hlms-merk__beeld--licht { display: none; }
.hoi-footer .hlms-merk__beeld--donker { display: block; }

@media (max-width: 600px) {
	.hlms-merken__rij { gap: .55rem; }
	.hlms-merken__lijn { display: none; }
	.hlms-merk__beeld { height: 1.7rem; }
}