/* Aanvullingen op de stijl van demo 8 voor de echte app. Kleuren en maten komen uit de variabelen van stijl.css. */
.melding { margin-bottom: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); font-weight: 600; }
.melding.error { border-color: var(--rood, #b3261e); }
.melding.success { border-color: var(--tint); }
.demo-rol a { color: inherit; font-weight: 700; padding: 2px 10px; }
.profielknop { display: inline-flex; text-decoration: none; }
.kal .dag { text-decoration: none; color: inherit; }
form.inline { display: inline; }
.login { display: grid; gap: var(--s4); }
.login label { display: grid; gap: var(--s1); font-weight: 650; }
.login input { min-block-size: 48px; padding: 0 var(--s3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; }
.leeg-staat { color: var(--sub); text-align: center; padding: var(--s6) var(--s4); }
.r10-rrij.ik { outline: 2px solid var(--tint); outline-offset: -2px; }
.r10-rrij a, a.r10-rrij { color: inherit; text-decoration: none; }
.dag-lijst { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.dag-lijst li { display: flex; justify-content: space-between; gap: var(--s3); }
.filterkeuze { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.filterkeuze a { padding: var(--s2) var(--s3); border-radius: var(--r-pil); border: 1px solid var(--border); text-decoration: none; color: inherit; min-block-size: 44px; display: inline-flex; align-items: center; }
.filterkeuze a[aria-current="true"] { background: var(--tint); color: var(--op-tint); border-color: var(--tint); }
a.knop-tekst { display: block; text-align: center; text-decoration: none; min-block-size: 44px; line-height: 44px; }
/* Segment en chips als links of keuzerondjes, met dezelfde look als de knoppen in de demo. */
.segment a, .segment label { min-block-size: 44px; display: grid; place-items: center; border-radius: 9px; color: var(--text); font-size: var(--t-s); font-weight: 550; padding: 0 var(--s1); cursor: pointer; }
.segment a[aria-pressed="true"], .segment label:has(input:checked) { background: var(--segment-aan); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06); }
.segment label:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid var(--tint); outline-offset: 2px; }
label.chip { display: inline-flex; align-items: center; cursor: pointer; }
label.chip:has(input:checked), a.chip[aria-pressed="true"] { background: var(--tint-bg); border-color: var(--tint); color: var(--tint-tekst); }
a.chip { text-decoration: none; display: inline-flex; align-items: center; }
.r10-lrij.gekozen { background: var(--tint-bg); }
a.r10-lrij { color: inherit; text-decoration: none; }
.r10-starter { font-size: var(--t-xs); font-weight: 650; padding: 1px 6px; border-radius: var(--r-pil); background: var(--card2); }
.instel-tabel input[type="text"] { inline-size: 5em; min-block-size: 44px; padding: 0 var(--s2); border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; text-align: right; }
.instel-tabel td, .instel-tabel th { vertical-align: middle; }
.instel-tabel td { position: relative; } /* houdt de verborgen tekst binnen de scrollende tabel, anders schuift de gsm-pagina */
.instel-tabel input[type="time"] { min-block-size: 44px; padding: 0 var(--s2); border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; }

/* Correctie aanvragen en goedkeuren (D28) */
form[data-correctie] fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
form[data-correctie] fieldset[hidden] { display: none; }
form[data-correctie] legend { padding: 0; margin-bottom: var(--s2); }
form[data-correctie] legend h2 { font-size: var(--t-l); }
form[data-correctie] legend h2:focus { outline: none; }
.knop[aria-disabled="true"] { opacity: .5; }
.chip[aria-disabled="true"] { opacity: .6; cursor: default; }
a.chip { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.aanvraag-dag p { margin: 0; overflow-wrap: anywhere; }
.r10-verschil[hidden] { display: none; }
.r10-verschil li.totaal { border-top: 1px solid var(--border); padding-top: 4px; font-weight: 700; }
details.weigeren > summary { list-style: none; cursor: pointer; display: inline-flex; min-block-size: 44px; align-items: center; }
details.weigeren > summary::-webkit-details-marker { display: none; }
.r12-correctie-rij { margin: var(--s3) 0 0; }
.correctie-dag { margin: 0; text-align: start; }
.correctie-dag .knop-tekst { padding-inline: 0; display: inline-flex; inline-size: auto; justify-content: flex-start; }

/* Teams en selecties (D21, D33) */
.r10-nieuw { align-items: flex-end; }
.r10-nieuw .r10-veld { flex: 1 1 14em; }
.vinklijst { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--s2); }
.vinklijst legend { padding: 0; margin-bottom: var(--s2); }
.vinkrooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s2); }
label.vink { display: flex; align-items: flex-start; gap: var(--s3); min-block-size: 44px; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); cursor: pointer; }
label.vink input { inline-size: 22px; block-size: 22px; margin: 2px 0 0; flex: none; accent-color: var(--tint); }
label.vink > span { display: grid; gap: 2px; min-width: 0; }
label.vink b { font-weight: 650; overflow-wrap: anywhere; }
label.vink:has(input:checked) { border-color: var(--tint-rand, var(--tint)); background: var(--tint-bg); }
.r10-veld select { appearance: auto; }
.melding.warning { border-color: var(--gold-tekst); }
.teams-stand { list-style: none; margin: 0; padding: 0; }
.teams-stand li { gap: 6px; }
.teams-stand li.ik b { color: var(--tint-tekst); }
.tabel .status { white-space: nowrap; }

/* Check-in (R-K1 tot R-K3) */
.checkin-kop { display: grid; gap: var(--s3); }
.checkin-dag { align-items: center; }
.checkin-dag b { text-align: center; }
.checkin-lijst li .r10-lrij { grid-template-columns: auto minmax(0, 1fr) auto; }
.checkin-lijst select { min-block-size: 44px; max-inline-size: 11rem; padding: 0 var(--s2); border: 1px solid var(--border2); border-radius: var(--radius-sm); background: var(--card); color: var(--text); font: inherit; font-weight: 650; }
.checkin-lijst li[data-st="te_laat"] { background: var(--gold-bg); }
.checkin-lijst li[data-st="afwezig"], .checkin-lijst li[data-st="ziek"], .checkin-lijst li[data-st="verlof"], .checkin-lijst li[data-st="opleiding"] { background: var(--red-bg); }
.checkin-lijst .wie label { cursor: pointer; }
.groepje { display: grid; gap: var(--s2); }
.groepje h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); }
.groepje h3 .ico { inline-size: 18px; block-size: 18px; }
.groepje .avs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.groepje .avs > span { display: inline-flex; align-items: center; gap: var(--s2); padding: 4px var(--s3) 4px 4px; border-radius: var(--r-pil); background: var(--card2); font-size: var(--t-s); }
.groepje .avs .avatar { inline-size: 28px; block-size: 28px; font-size: 11px; }
.c-aanwezig { color: var(--green-tekst); } .c-te_laat { color: var(--gold-tekst); }
.c-afwezig, .c-ziek, .c-verlof, .c-opleiding { color: var(--red-tekst); } .c-leeg { color: var(--sub); }
.checkin-week th[scope="row"] { font-weight: 500; text-align: left; max-inline-size: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkin-week .m { text-align: center; }
.checkin-week td .ico, .checkin-legende .ico { inline-size: 18px; block-size: 18px; vertical-align: -4px; }
.ci-wie .r10-veld { flex: 1 1 12rem; }
a.r12-rij { text-decoration: none; color: inherit; }
.checkin-taak { margin-bottom: var(--s3); }
.kaart:has(> .r9-scroll) { min-width: 0; }
.kaart > .r9-scroll { overflow-x: auto; max-inline-size: 100%; }
.checkin-week th[scope="row"] { max-inline-size: 9rem; }
.checkin-week th, .checkin-week td { padding-inline: 4px; }
.checkin-lijst select { inline-size: 8.5rem; }
.checkin-lijst .wie b { white-space: normal; overflow-wrap: anywhere; }
.c-lijst h2.ci-titel { font: 700 var(--t-l)/1.25 var(--f-kop); text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; }
.r10-inc { color: var(--gold-tekst); display: inline-flex; vertical-align: -2px; } .r10-inc .ico { inline-size: 14px; block-size: 14px; }
a.inc-kaart { text-decoration: none; color: inherit; gap: var(--s2); } a.inc-kaart b .ico { color: var(--gold-tekst); inline-size: 16px; block-size: 16px; vertical-align: -2px; }
.inc-archief .wie b, .r10-lijst .wie b.wrap { white-space: normal; overflow-wrap: anywhere; }
.inc-lijsten .r10-lrij .wie b { white-space: normal; overflow-wrap: anywhere; }

/* Bovenaan Vandaag: een nieuw bericht (D41), zolang er geen pushmeldingen zijn. */
.ber-melding { min-block-size: 64px; padding-block: var(--s2); }
.ber-melding .wie { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ber-melding .wie b { flex: none; }
.ber-melding .klein { color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Meldingen aanzetten (D17): op Vandaag tot het aan staat of "Later", en altijd in Meer. */
.meldingen-kaart { display: grid; gap: var(--s2); }
.meldingen-kaart[hidden], .meldingen-kaart [hidden] { display: none; }
.meldingen-kop { display: flex; align-items: center; gap: var(--s3); }
.meldingen-kop h2, .c-lijst .meldingen-kop h2 { font: 650 var(--t-m)/1.3 var(--f-tekst); text-transform: none; letter-spacing: 0; color: var(--text); margin: 0; }
.meldingen-titel { font: 650 var(--t-m)/1.3 var(--f-tekst); margin: 0; }
.meldingen-lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.meldingen-lijst li { display: grid; gap: 2px; padding-block: var(--s3); border-top: 1px solid var(--border); }
.meldingen-lijst li:first-child { border-top: 0; padding-top: 0; }
.meldingen-lijst .klein { color: var(--sub); }

/* Nieuwe berichten naast de profielknop (D41): op elk scherm tot ze gelezen zijn. Het doel is 44 px hoog. */
.nieuw-pil { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; border-radius: var(--r-pil); }
.nieuw-pil .pil { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pil);
  background: var(--gold); color: var(--op-podium); font: 650 var(--t-s)/1.2 var(--f-tekst); white-space: nowrap; }
.nieuw-pil .ico { inline-size: 16px; block-size: 16px; flex: none; }
.nieuw-pil:active .pil { transform: scale(.96); }
/* Op de gsm is de kop smal: "1 nieuw" naast de avatar, en de titel die bij het scrollen verschijnt wijkt zolang. */
.kop .nieuw-pil .rest { display: none; }
.kop:has(.nieuw-pil) .titel { visibility: hidden; }

/* Dag toevoegen of corrigeren door een admin (D28) */
.r10-vink { display: flex; align-items: center; gap: var(--s2); min-block-size: 44px; font-weight: 600; cursor: pointer; }
.r10-vink input { inline-size: 22px; block-size: 22px; accent-color: var(--tint); margin: 0; }
[data-tegels][hidden] { display: none; }
.dag-kies input[type="date"] { min-block-size: 44px; padding: 0 var(--s3); border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--text); font: inherit; }

/* Aansporen (D35): je doel per dag, je vooruitgang in de ranking */
.r12-doelregel { margin: var(--s3) 0 0; }
.r12-plaats .r12-vooruit { flex-basis: 100%; color: var(--sub); }
.r12-plaatsgroot .r12-vooruit { color: var(--sub); }
.blad .chip { background: var(--knop-bg); color: var(--knop-tekst); } /* op het witte blad anders onzichtbaar */

/* Welkom: de eerste week van een starter (D34, B10). */
.welkom-kop { display: flex; align-items: center; gap: var(--s4); }
.welkom-kop h2 { font-size: var(--t-l); }
.welkom .r10-kaart h3 { font-size: var(--t-m); }
.welkom .r10-kaart form { display: contents; }
a.r10-tegel { color: inherit; text-decoration: none; }

/* Keuzechips in een formulier: vrij melden (D42), een verkoper verhuizen (R-S3). */
.keuze-veld { border: 0; margin: 0; padding: 0; min-width: 0; }
.keuze-veld legend { padding: 0; margin-bottom: var(--s2); }
.keuze-veld .filterkeuze { margin-bottom: 0; }
.keuze-veld .chip { position: relative; }
.keuze-veld label.chip:has(input:checked) { background: var(--tint); color: var(--op-tint); border-color: var(--tint); }
.keuze-veld .chip input { position: absolute; opacity: 0; pointer-events: none; }
.vrij-gepland { margin-top: var(--s4); }

/* Tweede stap bij het inloggen (D46). */
.login label.onthouden { display: flex; align-items: center; gap: var(--s2); font-weight: 500; }
.login label.onthouden input { min-block-size: 0; inline-size: 22px; block-size: 22px; padding: 0; }
.login + .login { margin-top: var(--s4); gap: var(--s2); justify-items: start; }
.sleutel { font: 600 var(--t-m)/1.4 var(--f-getal); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.stappen-lijst { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s3); }
.code-veld { min-block-size: 44px; inline-size: 9em; padding: 0 var(--s3); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: inherit; font: inherit; letter-spacing: .1em; }

/* WCAG-audit van 2026-10-27. */
/* 1.4.11: de rand van een invoerveld haalt 3:1 tegenover de kaart en de pagina, licht en donker. */
:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):not(.kiezer select, .r12-tokens input),
.r12-tokens { border-color: var(--veld-rand); }
/* 1.4.3: de voorbeeldtekst in een leeg veld haalt 4,5:1, ook in donker. */
::placeholder { color: var(--sub); opacity: 1; }
/* 1.4.10: verborgen schermlezertekst in een tabel blijft binnen het scrollvak. */
.r9-scroll { position: relative; }
/* 1.4.10 en 1.4.12: namen in lijsten lopen door op een volgende regel in plaats van af te breken met "...". */
.lijst-rij .wie b, .r10-lrij .wie b, .r10-kaart .r10-kop .wie b, .r10-rrij .wie b, .r12-taak .wie b, .c-rij .wie b, .plek .naam,
.checkin-week th[scope="row"] { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* 1.3.1: een sectiekop onder de paginatitel is een h2, met de maat van een h3. */
.kop3 { font: 650 var(--t-m)/1.3 var(--f-tekst); }
/* 1.3.1: in de berekening is de eerste kolom de rijkop; ze ziet eruit als een gewone cel. */
.reken th[scope="row"] { font: inherit; color: inherit; text-align: left; white-space: normal; padding: var(--s2); border-bottom: 1px solid var(--border); }
.reken tfoot th[scope="row"] { font-weight: 800; border-top: 2px solid var(--border2); border-bottom: 0; }
.kop4 { font-size: inherit; font-weight: 700; line-height: 1.3; }
/* 1.4.10: de volgende stap van de eerste week loopt door in plaats van af te breken. */
.ber-melding .klein.heel { white-space: normal; overflow: visible; }
/* Klikdoel van 44 px (Apple HIG) voor de vinkjes in de tabellen van Instellingen. */
.instel-tabel label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; cursor: pointer; }
.instel-tabel input[type="checkbox"] { inline-size: 22px; block-size: 22px; margin: 0; }
.afs-upload input[type="file"] { min-block-size: 44px; }