/* kNect-hub – opmaak van de hubpagina's (inloggen, kop, gebruikers). Alleen tokens, net als de componenten.
 * Ontwerp: mockup kNect-hub (inloggen, tweestap, home, gebruikers) en besluit 03-11-2026 over de kop. */
html { background: var(--kn-achtergrond); }
/* In de hub zijn kaarten en blokken wit op een grijze pagina (achtergrond-2). Kalkwit naast grijs leest roze;
 * kalkwit blijft de achtergrond van de merksites (voorstel 04-11-2026, zie docs/BESLUITEN.md). */
.hub { --kn-achtergrond: var(--kn-wit); }
body { margin: 0; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.aanmeld h1, .aanmeld p, .hub h1, .hub h2, .hub p, .hub-paneel p { margin: 0; }

/* ---------- Inloggen, tweestap, wachtwoord: merkpaneel links, formulier rechts ---------- */
.aanmeld { min-height: 100vh; display: flex; flex-wrap: wrap; }
.aanmeld__merk { flex: 1 1 440px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: 40px clamp(24px, 4vw, 64px); background: var(--kn-donker); color: var(--kn-op-donker); }
.aanmeld__logo { height: 48px; width: auto; align-self: flex-start; }
.aanmeld__belofte { display: grid; gap: 24px; max-width: 520px; }
.aanmeld__bovenkop { font: var(--kn-type-label-klein); text-transform: uppercase; letter-spacing: 0.08em; }
.aanmeld__merk .aanmeld__bovenkop { color: var(--kn-label-as); }
.aanmeld__titel { font: var(--kn-type-kop-1); letter-spacing: -0.02em; }
.aanmeld__tekst { font: var(--kn-type-tekst-groot); color: var(--kn-op-donker-2); }
.aanmeld .kn-vinkjes { gap: 12px; font: var(--kn-type-tekst); }
.aanmeld .kn-vinkje .vlak { fill: var(--kn-primair); }
.aanmeld .kn-vinkje .haak { fill: var(--kn-op-primair); }
.aanmeld__strepen { display: flex; gap: 4px; height: 8px; max-width: 240px; }
.aanmeld__strepen span { flex: 1; }
.aanmeld__strepen span:nth-child(1) { background: var(--kn-label-ad); }
.aanmeld__strepen span:nth-child(2) { background: var(--kn-label-cs); }
.aanmeld__strepen span:nth-child(3) { background: var(--kn-label-as); }
.aanmeld__voet { display: grid; gap: 16px; font: var(--kn-type-tekst-klein); color: var(--kn-op-donker-2); }

.aanmeld__form { flex: 1 1 380px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px;
  padding: 56px clamp(16px, 5vw, 80px); }
.aanmeld__form > * { width: 100%; max-width: 440px; }
.aanmeld__kop { display: grid; gap: 8px; }
.aanmeld__kop .aanmeld__bovenkop { color: var(--kn-link); }
.aanmeld__kop h1 { font: var(--kn-type-kop-1); letter-spacing: -0.02em; hyphens: manual; }
.aanmeld__kop p { color: var(--kn-tekst-2); }
.aanmeld .kn-form { width: 100%; gap: 28px; }
.aanmeld__labelrij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.aanmeld__labelrij label { font: var(--kn-type-label); }
.aanmeld__labelrij a { font: var(--kn-type-tekst-klein); color: var(--kn-link); }
.kn-veld input.aanmeld__code { height: 64px; font: var(--kn-type-kop-3); letter-spacing: 0.3em; }
.aanmeld__qr { display: grid; justify-items: start; gap: 12px; }
.aanmeld__qr img { width: 200px; height: 200px; background: var(--kn-wit); border: 1px solid var(--kn-rand-kaart); }
.aanmeld__geheim { font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); overflow-wrap: anywhere; }
.aanmeld__geheim code { font: var(--kn-type-tekst-klein-vet); color: var(--kn-tekst); }
.aanmeld__privacy { padding-top: 16px; border-top: 1px solid var(--kn-lijn); font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.aanmeld__privacy a, .aanmeld__terug { color: var(--kn-link); }
.aanmeld__terug { justify-self: start; font: var(--kn-type-knop); }
.aanmeld__hulp { font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }

@media (max-width: 640px) {
  .aanmeld__merk { flex-basis: 100%; gap: 24px; padding: 24px 16px; }
  .aanmeld__logo { height: 40px; }
  .aanmeld__belofte, .aanmeld__voet { display: none; } /* op mobiel direct naar het formulier */
  .aanmeld__form { padding: 32px 16px 48px; justify-content: flex-start; }
  .aanmeld__kop h1 { font: var(--kn-type-kop-2); }
}

/* ---------- Kop van de hub (besluit 03-11-2026) ----------
 * Bovenbalk met logo en accountknop scrolt weg; de menubalk blijft bovenin staan. */
.hub { min-height: 100vh; display: flex; flex-direction: column; background: var(--kn-achtergrond-2); }
.hub-kop { background: var(--kn-achtergrond); }
.hub-kop__binnen, .hub-menu__binnen, .hub-main, .hub-voet__binnen { width: 100%; max-width: var(--kn-breedte-inhoud); margin: 0 auto;
  padding-left: clamp(16px, 3vw, 40px); padding-right: clamp(16px, 3vw, 40px); }
.hub-kop__binnen { position: relative; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hub-kop__links { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hub-kop__logo { height: 40px; width: auto; flex: none; }
.hub-omgeving { padding: 3px 8px; border: 1.5px solid var(--kn-link); color: var(--kn-link);
  font: var(--kn-type-label-klein); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.hub-account { flex: none; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  background: var(--kn-donker); color: var(--kn-op-donker); font: var(--kn-type-label-klein);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.hub-account:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; clip-path: none; }
.hub-paneel { position: absolute; z-index: 30; top: 66px; right: clamp(16px, 3vw, 40px); width: min(320px, calc(100% - 32px));
  display: grid; gap: 16px; padding: 20px; background: var(--kn-achtergrond); border: 1px solid var(--kn-rand-kaart);
  border-radius: var(--kn-afronding-kaart); box-shadow: 0 12px 32px color-mix(in srgb, var(--kn-donker) 16%, transparent); }
.hub-paneel__naam { display: block; font: var(--kn-type-kop-5); }
.hub-paneel__email { display: block; font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); overflow-wrap: anywhere; }
.hub-paneel dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding-top: 14px; border-top: 1px solid var(--kn-lijn);
  font: var(--kn-type-tekst-klein); }
.hub-paneel dt { color: var(--kn-tekst-2); }
.hub-paneel dd { margin: 0; font-weight: 600; }
.hub-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-paneel .kn-knop { justify-content: center; }

.hub-menu { position: sticky; top: 0; z-index: 20; background: var(--kn-achtergrond); border-top: 1px solid var(--kn-rand-kop); border-bottom: 1px solid var(--kn-lijn); }
.hub-menu__binnen { display: flex; gap: 28px; overflow-x: auto; }
.kn .hub-menu a { padding: 14px 0 12px; border-bottom: 3px solid transparent; color: var(--kn-tekst-2); font: var(--kn-type-tekst); text-decoration: none; white-space: nowrap; }
.kn .hub-menu a:hover { color: var(--kn-tekst); }
.kn .hub-menu a[aria-current="page"] { border-bottom-color: var(--kn-interactie); color: var(--kn-tekst); font-weight: 600; }
.hub-menu a:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: -3px; }

.hub-main { flex: 1; display: grid; align-content: start; gap: 40px; padding-top: 48px; padding-bottom: 64px; }
.hub-titel { display: grid; gap: 8px; }
.hub-titel h1 { font: var(--kn-type-kop-1); letter-spacing: -0.02em; }
.hub-titel p { font: var(--kn-type-tekst-groot); color: var(--kn-tekst-2); max-width: 760px; }
/* Kruimelpad boven de titel van een pagina dieper in de hub; de pagina begint dan wat hoger */
.hub-pad { margin-bottom: 4px; font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.hub-pad a { color: var(--kn-link); }
.hub-main:has(.hub-pad) { padding-top: 24px; }
.hub-voet { background: var(--kn-achtergrond); border-top: 1px solid var(--kn-lijn); }
.hub-voet__binnen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px;
  font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.hub-voet a { color: var(--kn-tekst-2); }

@media (max-width: 640px) {
  .hub-main { padding-top: 32px; gap: 32px; }
  .hub-titel h1 { font: var(--kn-type-kop-2); }
  .hub-titel p { font: var(--kn-type-tekst); }
}

/* ---------- Blok (wit vlak met rand) ---------- */
.hub-sectie { display: grid; gap: 16px; }
.hub-sectie__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.hub-sectie h2 { font: var(--kn-type-kop-4); }
.hub-aantal { font-weight: 400; color: var(--kn-tekst-2); }
.hub-blok { display: grid; gap: 24px; padding: clamp(20px, 3vw, 32px); background: var(--kn-achtergrond); border: 1px solid var(--kn-lijn); }
.hub-blok--accent { border-top: 8px solid var(--kn-donker); }
.hub-leeg { color: var(--kn-tekst-2); }

/* ---------- Gebruikers ---------- */
.uitnodigen { display: grid; gap: 28px; }
.uitnodigen__velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; gap: 24px; }
.rolkeuze > legend, .merkkeuze > legend { margin-bottom: 10px; }
.uitnodigen__keuzes { display: flex; flex-wrap: wrap; gap: 32px; }
.uitnodigen__keuzes > fieldset { flex: 1 1 260px; }
.uitnodigen__keuzes > fieldset:first-child { flex: 2 1 420px; }
.uitnodigen .kn-veld { width: 100%; }
.uitnodigen__acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 24px; border-top: 1px solid var(--kn-lijn); }

.rolkeuze { display: grid; gap: 10px; }
.kn-veld.rolkeuze > label { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font: var(--kn-type-tekst); cursor: pointer; background: var(--kn-achtergrond);
  border: 1.5px solid var(--kn-rand-knop); }
.kn-veld.rolkeuze > label:has(input:checked) { background: var(--kn-wit); border-color: var(--kn-interactie); box-shadow: inset 0 0 0 1px var(--kn-interactie); }
.kn-veld.rolkeuze > label:has(input:focus-visible) { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-veld.rolkeuze input, .kn-veld.merkkeuze input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border: 0;
  background: none; accent-color: var(--kn-interactie); }
.rolkeuze strong { display: block; font: var(--kn-type-label); }
.rolkeuze span span { display: block; color: var(--kn-tekst-2); }

.merkkeuze { display: grid; gap: 10px; }
.kn-veld.merkkeuze > label { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 16px; font: var(--kn-type-tekst); cursor: pointer; background: var(--kn-wit);
  border: 1.5px solid var(--kn-rand-knop); }
.kn-veld.merkkeuze > label:has(input:checked) { border-color: var(--kn-interactie); box-shadow: inset 0 0 0 1px var(--kn-interactie); }
.kn-veld.merkkeuze > label:has(input:focus-visible) { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
@media (hover: hover) { /* zelfde hover als de keuzes in de componenten */
  .kn-veld.rolkeuze > label:hover:not(:has(input:checked)), .kn-veld.merkkeuze > label:hover:not(:has(input:checked)) {
    border-color: var(--kn-interactie); box-shadow: inset 0 0 0 1px var(--kn-interactie); }
}
.kn-veld.merkkeuze > label:has(input:disabled) { cursor: default; color: var(--kn-tekst-2); border-color: var(--kn-lijn); box-shadow: none; }
.merkkeuze__naam { flex: 1; }

.hub-uitleg { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--kn-achtergrond-2); color: var(--kn-tekst-2); }

.hub-tabel-wrap { overflow-x: auto; background: var(--kn-achtergrond); border: 1px solid var(--kn-lijn); }
.hub-tabel { width: 100%; border-collapse: collapse; font: var(--kn-type-tekst); }
.hub-tabel thead tr { background: var(--kn-achtergrond-2); text-align: left; }
.hub-tabel th[scope="col"] { padding: 14px 16px; font: var(--kn-type-tekst-klein-vet); color: var(--kn-tekst-2); white-space: nowrap; }
.hub-tabel tbody tr { border-top: 1px solid var(--kn-lijn); }
.hub-tabel td, .hub-tabel th[scope="row"] { padding: 16px; vertical-align: middle; text-align: left; font-weight: 400; }
.hub-tabel th:first-child, .hub-tabel td:first-child { padding-left: 20px; }
.hub-tabel th:last-child, .hub-tabel td:last-child { padding-right: 20px; text-align: right; }
.hub-tabel__naam { display: block; font-weight: 600; }
.hub-tabel__sub { display: block; font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); overflow-wrap: anywhere; }
.hub-tabel__klein { color: var(--kn-tekst-2); white-space: nowrap; }
.hub-status { display: inline-block; padding: 3px 10px; border: 1.5px solid var(--kn-tekst); font: var(--kn-type-label-klein); white-space: nowrap; }
.hub-status--geblokkeerd { border-color: var(--kn-fout); color: var(--kn-fout); }
.hub-link { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--kn-link); font: var(--kn-type-knop); text-decoration: underline; }
.hub-link:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }

/* Wijzigen van een gebruiker: dialoog */
.hub-dialoog { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--kn-rand-kaart);
  border-radius: var(--kn-afronding-kaart); background: var(--kn-achtergrond); color: var(--kn-tekst); }
.hub-dialoog::backdrop { background: color-mix(in srgb, var(--kn-donker) 40%, transparent); }
.hub-dialoog form { display: grid; gap: 24px; padding: clamp(20px, 3vw, 32px); }
.hub-dialoog h2 { font: var(--kn-type-kop-4); }

@media (max-width: 760px) {
  /* Tabel als kaartjes: geen horizontaal scrollen op de telefoon */
  .hub-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-tabel, .hub-tabel tbody, .hub-tabel tr, .hub-tabel td, .hub-tabel th[scope="row"] { display: block; }
  .hub-tabel tbody tr { padding: 16px; }
  .hub-tabel td, .hub-tabel th[scope="row"], .hub-tabel th:first-child, .hub-tabel td:first-child,
  .hub-tabel td:last-child { padding: 4px 0; text-align: left; }
  .hub-tabel td[data-kop] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .hub-tabel td[data-kop]::before { content: attr(data-kop) ":"; color: var(--kn-tekst-2); }
}
.hub-status--uitgenodigd { border-color: var(--kn-link); color: var(--kn-link); }
.hub-dialoog .kn-form { width: 100%; }
/* De focusring staat op de hele keuze (label), niet nog eens op het rondje of vinkje */
.kn-veld.rolkeuze input:focus, .kn-veld.merkkeuze input:focus { outline: none; }

/* ---------- Homescreen: tools als tegels ---------- */
.tools-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tools-kop .hub-titel { flex: 1 1 420px; }
.kn-veld.tools-zoek { flex: 0 1 360px; min-width: 240px; }
.tools-zoek input { background: var(--kn-wit); }
.tools-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.tools-filter__knop { min-height: 44px; padding: 8px 16px; cursor: pointer; font: var(--kn-type-knop); color: var(--kn-tekst);
  background: var(--kn-achtergrond); border: 1.5px solid var(--kn-rand-knop); }
.tools-filter__knop[aria-pressed="true"] { background: var(--kn-donker); border-color: var(--kn-donker); color: var(--kn-op-donker); }
.tools-filter__knop:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.tools-filter__aantal { font-weight: 400; }
.tools-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }

.tool-tegel { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 28px; background: var(--kn-achtergrond);
  border: 1px solid var(--kn-lijn); border-top: 8px solid var(--kn-donker); }
.tool-tegel--cs { border-top-color: var(--kn-label-cs); }
.tool-tegel--ad { border-top-color: var(--kn-label-ad); }
.tool-tegel--as { border-top-color: var(--kn-label-as); }
.tool-tegel__boven { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tool-tegel__groep { align-self: center; margin-left: 4px; font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.hub .tool-tegel h2 { font: var(--kn-type-kop-3); }
.tool-tegel__tekst { flex: 1; color: var(--kn-tekst-2); }
.hub .tool-tegel__meta { font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.tool-tegel__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.tool-tegel__volgt { display: inline-flex; align-items: center; min-height: var(--kn-hoogte-knop-neutraal); padding: 0 16px;
  border: 1.5px dashed var(--kn-tekst-2); color: var(--kn-tekst-2); font: var(--kn-type-knop); }
.tool-status { padding: 3px 10px; border: 1.5px solid var(--kn-tekst); font: var(--kn-type-label-klein); white-space: nowrap; }
.tool-status--test { border-color: var(--kn-link); color: var(--kn-link); }
.tool-status--gepland { border-color: var(--kn-tekst-2); color: var(--kn-tekst-2); }