/* Werkbank — huisstijl Life Experts.
   Normatief document: Automation\Huisstijlgids\07_gids\lifeexperts_huisstijlgids.pdf
   (versie 1.0, juli 2026). De regels die hier gelden:

   §3 Kleuren + verhoudingen — wit is de hoofdkleur (ruim 60% van de drager),
      donkerblauw ca. 25%, lichtblauw + ijsblauw samen ca. 15%. Lichtblauw nooit
      voor lange teksten.
   §4 Typografie — Segoe UI, websafe Arial/Helvetica, maximaal twee gewichten
      (hier: regular 400 en semibold 600). Kop 1 = 24 pt, Kop 2 = 16 pt,
      Kop 3 = 12 pt, lopende tekst 10 pt met regelafstand 1,4 in #333333,
      voetnoot 8 pt in #6E6E6E onder een lichtblauwe lijn van 1 pt.
   §2/§3 Logo — minimaal 120 px breed op scherm (daaronder enkel het beeldmerk);
      vrije zone rondom minstens de hoogte van de kleinste bol; niet vervormen.
   §5 Iconen — lijnstijl, nooit gevuld, ongewijzigd overnemen uit 03_iconen. */

:root {
	--donkerblauw: #093181;
	--middenblauw: #1571B4;
	--lichtblauw: #25AADD;
	--ijsblauw: #DFF2FB;
	--parelgrijs: #B9B9B7;
	--tekstgrijs: #333333;
	--voetgrijs: #6E6E6E;

	/* De gedeelde kopband-spec - BRON VAN WAARHEID: UX-richtlijn 3.1 /
	   A:\kennis\UX-richtlijn\kopband. Vaste pixelmaten, identiek in élke tool.
	   Niet per app wijzigen. */
	--kopband: #093181;
	--kopband-tekst: #fff;
	--kopband-hoogte: 64px;
	--kopband-logo: 46px;          /* breedte ~123px, boven de gids-eis >=120px */
	--kopband-toolnaam: 20px;

	/* Typografische schaal uit §4: lopende tekst 10 pt = 1rem.
	   Kop 1 = 24 pt = 2.4× · Kop 2 = 16 pt = 1.6× · Kop 3 = 12 pt = 1.2× */
	--kop1: 2.4rem;
	--kop2: 1.6rem;
	--kop3: 1.2rem;
	--voetnoot: 0.8rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.4;              /* §4 */
	color: var(--tekstgrijs);
	background: #fff;              /* §3: wit blijft de hoofdkleur */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ---- Kop: de donkerblauwe band (§3: donkerblauw voor logo, koppen, banden) ---- */

/* De gedeelde kopband, exact volgens de canonieke spec (de --kopband-*-tokens
   hierboven). Vaste px, geen em/rem. */
.kop {
	background: var(--kopband);
	color: var(--kopband-tekst);
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--kopband-hoogte);
	padding: 0 24px;
}
/* Merk = logo + scheider + toolnaam, samen één klikbare weg (naar de Werkbank
   als je aangemeld bent, anders ook terug naar de Werkbank). */
.kop-logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex: none;
	line-height: 0;
	text-decoration: none;
	color: var(--kopband-tekst);
}
.kop-logo img {
	height: var(--kopband-logo);
	width: auto;                   /* nooit vervormen */
	display: block;
}
.kop-scheider { width: 1px; height: 32px; flex: none; background: rgba(255, 255, 255, 0.28); }
.kop-toolnaam { color: var(--kopband-tekst); font-weight: 600; font-size: var(--kopband-toolnaam); line-height: 1; white-space: nowrap; }
/* .kop-rechts (gebruiker + afmelden) staat verderop; hier alleen de plaatsing. */
.kop-rechts { margin-left: auto; flex: none; }
.kop-gebruiker { font-size: var(--voetnoot); opacity: 0.9; }

/* ---- Inhoud ---- */

/* Volle paginabreedte: geen kolombegrenzing, alleen marge aan de zijkanten. */
.inhoud {
	flex: 1;
	width: 100%;
	padding: 2.5rem 2rem 3rem;
}

h1 {
	font-size: var(--kop1);
	font-weight: 600;              /* Semibold */
	line-height: 1.2;
	color: var(--donkerblauw);
	margin-bottom: 0.5rem;
}
/* Leesbaarheid: lopende tekst blijft begrensd, ook op een breed scherm. */
.intro { max-width: 48rem; margin-bottom: 2.5rem; }

/* ---- Groepen: tooling en applicaties ---- */

.groep { margin-top: 2.5rem; }
.groep + .groep { margin-top: 3rem; }
.groep h2 {
	font-size: var(--kop2);        /* Kop 2 */
	font-weight: 600;
	color: var(--donkerblauw);
}
.groep-uitleg { color: var(--voetgrijs); margin-bottom: 1.2rem; }

/* ---- Toolkaarten ---- */

.kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.5rem;
}
.kaart {
	background: #fff;
	border: 1px solid var(--ijsblauw);
	border-top: 3px solid var(--lichtblauw);   /* §3: lichtblauw voor lijnen */
	border-radius: 0.5rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.kaart-icoon { width: 2rem; height: 2rem; }
.kaart h3 {
	font-size: var(--kop3);        /* Kop 3 — paginatitel = Kop 1, groep = Kop 2 */
	font-weight: 600;
	color: var(--donkerblauw);
}
.kaart p { flex: 1; }

/* Nog niet beschikbaar: neutraal grijs, geen kleuraccent. */
.kaart-binnenkort { border-top-color: var(--parelgrijs); }

.knop {
	display: inline-block;
	align-self: flex-start;
	margin-top: 0.2rem;
	background: var(--middenblauw); /* §3: secundair voor accenten */
	color: #fff;
	text-decoration: none;
	padding: 0.55rem 1.2rem;
	border-radius: 0.3rem;
}
.knop:hover, .knop:focus { background: var(--donkerblauw); }
.knop-uit { background: var(--parelgrijs); cursor: default; }

/* ---- Formulieren: aanmelden, instellen, codes ----
   §3: wit blijft de drager; lichtblauw alleen als lijn, nooit als vlak achter
   lange tekst. Eén kolom, want dit zijn korte formulieren die ook op een gsm
   moeten werken. */

.smal { max-width: 30rem; }

.formulier {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 1.5rem 0;
}
.formulier label {
	font-weight: 600;
	font-size: var(--kop3);
	color: var(--donkerblauw);
	margin-top: 0.8rem;
}
.formulier input {
	font-family: inherit;
	font-size: 1.1rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--parelgrijs);
	border-radius: 0.3rem;
	color: var(--tekstgrijs);
}
.formulier input:focus {
	outline: 2px solid var(--lichtblauw);
	outline-offset: 1px;
	border-color: var(--lichtblauw);
}
.formulier .knop { margin-top: 1.4rem; border: 0; font: inherit; cursor: pointer; }

/* Meldingen. Rood is geen huisstijlkleur, dus terughoudend: een lijn links en
   donkere tekst, geen gevulde rode balk. */
.melding-fout {
	border-left: 3px solid #C0392B;
	background: #FDF3F2;
	padding: 0.7rem 0.9rem;
	margin: 1rem 0;
}
.melding-let-op {
	border-left: 3px solid var(--lichtblauw);
	background: var(--ijsblauw);
	padding: 0.7rem 0.9rem;
	margin: 1rem 0;
}

.hulp { color: var(--voetgrijs); font-size: var(--voetnoot); margin-top: 1.2rem; }
.hulp code { font-size: 1rem; letter-spacing: 0.05em; }

.stappen { margin: 1.2rem 0 1.2rem 1.2rem; }
.stappen li { margin-bottom: 0.4rem; }

/* Ruim bemeten: dit wordt met een gsm van een beeldscherm gescand, soms van een
   tweede monitor. Te klein is de meest voorkomende reden dat scannen niet lukt. */
.qr {
	display: block;
	width: 16rem;
	max-width: 100%;
	height: auto;
	margin: 1.5rem 0;
	border: 1px solid var(--ijsblauw);
	padding: 0.6rem;
	background: #fff;               /* een QR moet op wit staan om te scannen */
	image-rendering: pixelated;     /* geen vage randen bij het opschalen */
}

/* Herstelcodes: groot en uit elkaar, want ze worden overgetypt van papier. */
.codes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
}
.codes li {
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--ijsblauw);
}

/* ---- Beheerpagina: tabellen ----
   Alleen zichtbaar vanaf het interne netwerk, dus een dichtere opmaak dan de
   collega-schermen mag hier. §3 blijft gelden: wit draagt, lichtblauw lijnt. */

.tabel-rol { overflow-x: auto; margin: 1rem 0 2rem; }

.tabel { border-collapse: collapse; width: 100%; }
.tabel th, .tabel td {
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var(--ijsblauw);
}
.tabel th {
	font-weight: 600;
	color: var(--donkerblauw);
	border-bottom: 2px solid var(--lichtblauw);
	white-space: nowrap;
}
.tabel-klein { font-size: var(--voetnoot); }
.tabel small { color: var(--voetgrijs); display: block; }

.rij-uit { opacity: 0.55; }

.merk {
	display: inline-block;
	font-size: var(--voetnoot);
	background: var(--ijsblauw);
	color: var(--donkerblauw);
	padding: 0.1rem 0.45rem;
	border-radius: 0.2rem;
	margin-left: 0.3rem;
}

.stand-ok    { color: #1E7A3C; font-weight: 600; }
.stand-bezig { color: var(--middenblauw); font-weight: 600; }
.stand-wacht { color: var(--voetgrijs); }
.stand-uit   { color: #C0392B; }

.inline { display: inline-block; margin: 0 0.4rem 0.4rem 0; }
.inline input, .inline select {
	font-family: inherit;
	font-size: var(--voetnoot);
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--parelgrijs);
	border-radius: 0.2rem;
}
.mini { display: block; font-size: var(--voetnoot); color: var(--voetgrijs); }

.knop-klein {
	font: inherit;
	font-size: var(--voetnoot);
	background: var(--middenblauw);
	color: #fff;
	border: 0;
	border-radius: 0.2rem;
	padding: 0.35rem 0.7rem;
	cursor: pointer;
}
.knop-klein:hover { background: var(--donkerblauw); }
.acties { white-space: nowrap; }

/* De losse "Werkbank"-knop in de kopband is vervallen (17-08): het logo draagt nu
   de weg terug naar de Werkbank, gelijk aan de rest van de suite (UX 3.1). */

/* Rechts in de kopband: wie je bent en hoe je weggaat, zoals op de Werkbank. */
.kop-rechts { display: flex; align-items: center; gap: 1rem; }
.kop-afmelden { display: inline-flex; }
.kop-knop {
	font: inherit;
	font-size: var(--voetnoot);
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 0.25rem 0.8rem;
	cursor: pointer;
}
.kop-knop:hover, .kop-knop:focus { background: rgba(255, 255, 255, 0.15); }

/* De offboardingknop: bewust een afwijkende kleur, dit is de enige onomkeerbare
   knop op de pagina (heractiveren kan, maar de toegangen zijn dan al weg). */
.knop-gevaar { background: #C0392B; }
.knop-gevaar:hover { background: #922B21; }

/* Eén formulier op één regel: nieuwe collega, kleurkeuze. */
.formulier-rij { display: flex; gap: 0.6rem; align-items: center; margin: 0.8rem 0 2rem; }
.formulier-rij input[type="text"], .formulier-rij input[type="email"] {
	font: inherit;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--parelgrijs);
	border-radius: 0.2rem;
	min-width: 16rem;
}
/* Breed genoeg voor een volledig adres: een placeholder die afkapt is slordig. */
.formulier-rij input[type="email"] { min-width: 22rem; }
.formulier-rij input[type="color"] {
	width: 3rem; height: 2.2rem; padding: 0;
	border: 1px solid var(--parelgrijs); border-radius: 0.2rem; cursor: pointer;
}

/* De uitnodigingslink: één keer zichtbaar, dus goed selecteerbaar. */
.link-blok {
	background: var(--ijsblauw);
	padding: 0.9rem;
	border-radius: 0.3rem;
	margin: 1rem 0;
	word-break: break-all;
}

@media print {
	.kop, .voet, .knop, .hulp { display: none; }
	.codes { font-size: 1.1rem; }
}

/* ---- Voet (§4: 8 pt grijs onder een lichtblauwe lijn van 1 pt) ---- */

.voet {
	border-top: 1px solid var(--lichtblauw);
	padding: 1rem 2rem;
	font-size: var(--voetnoot);
	color: var(--voetgrijs);
}

@media (max-width: 40rem) {
	.kop, .inhoud, .voet { padding-left: 1.2rem; padding-right: 1.2rem; }
	h1 { font-size: 1.9rem; }
}