/* Productpagina Kubus Lelystad Zuid (issue #1597). Tokens: design system Dossiercontrole · Kubus, thema
 * Kubus donker; klassen: design/dossiercontrole-kubus/project/components/bundle.css. De website is alleen donker. */
:root{
color-scheme:dark;
--oppervlak:#111827;--oppervlak-2:#1f2937;--oppervlak-3:#1f2937;--inkt:#f3f4f6;--inkt-2:#d1d5db;--gedempt:#9ca3af;--licht:#9ca3af;
--lijn:#374151;--lijn-zacht:#1f2937;--lijn-sterk:#4b5563;--invoer:#111827;--invoer-rand:#6b7280;--white:#ffffff;
--merk-50:#f4f1f7;--merk-100:#e7e2ef;--merk-200:#d0c5de;--merk-300:#b19ec8;--merk-500:#75549e;--merk-600:#623d91;--merk-700:#503277;--merk-800:#40285e;--merk-900:#301e47;
--accent-500:#abd463;--merk:var(--merk-300);--merk-sterk:var(--merk-100);--merk-vlak:var(--merk-900);
--kop:var(--merk-600);--kop-inkt:var(--white);--kop-zacht:var(--merk-100);--kop-hover:var(--merk-700);--kop-actief:var(--merk-800);--kop-rand:var(--merk-500);--kop-logo-vlak:var(--white);
--aandacht-sterk:#fcd34d;--aandacht-vlak-2:rgba(120, 53, 15, 0.4);--goed:#4ade80;--goed-sterk:#86efac;--goed-vlak-2:rgba(20, 83, 45, 0.4);
--site-grond:#111827;--site-vlak:#1F2937;--site-inkt:#F3F4F6;--site-gedempt:#9CA3AF;--site-lijn:#374151;
--site-merk:#B19EC8;--site-op-merk:#111827;--site-kop:#623D91;--site-kop-inkt:#FFFFFF;--site-accent:#A0CE4E;
--site-ruimte-8:64px;
--radius:4px;--radius-full:9999px;--rij-y:0.375rem;--rand-totaal:2px;--rand-kop:4px;--shadow-lg:none;
--font-sans:ui-sans-serif, system-ui, sans-serif
}
html,body{margin:0;background:var(--site-grond)}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--site-merk)}a:hover{color:var(--merk-100)}
img{max-width:100%}

/*
 * Kubus Werkprogramma: de vormtaal als gewone CSS-klassen, met de hand overgenomen uit
 * packages/platform/src/client/components/tabelstijl.ts en de terugkerende Tailwind-klassen in de
 * clienttakken. In de app zelf zijn het Tailwind-klassen op RGB-triplets (`rgb(var(--lijn))`);
 * hier dragen de tokens hun kleur rechtstreeks (`var(--lijn)`). Maten zijn de Tailwind-waarden.
 */

body {
  font-family: var(--font-sans);
  color: var(--inkt);
  background: var(--oppervlak);
}

/* ---- Knoppen (geen component in de app: terugkerende class-strings) ---- */
.knop,
.knop-primair,
.knop-klein {
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
}
.knop-primair {
  border: 0;
  background: var(--merk-600);
  color: var(--white);
}
.knop-primair:hover {
  background: var(--merk-700);
}
.knop-primair:disabled {
  cursor: not-allowed;
  background: var(--lijn-sterk);
}
.knop {
  border: 1px solid var(--lijn-sterk);
  background: transparent;
  color: var(--inkt);
}
.knop:hover {
  background: var(--oppervlak-2);
}
.knop-klein {
  border: 1px solid var(--lijn-sterk);
  background: transparent;
  color: var(--inkt-2);
  font-size: 12px;
  line-height: 16px;
  padding: 2px 8px;
}
.knop-klein:hover {
  background: var(--oppervlak-2);
}
/* LINKKNOP en LINK */
.linkknop,
.link {
  font: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--merk);
  text-decoration: underline dotted;
}
.linkknop:hover {
  color: var(--merk-sterk);
}
.linkknop:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
:where(.knop, .knop-primair, .knop-klein, .linkknop, .subtab, .veld):focus-visible {
  outline: 2px solid var(--merk);
  outline-offset: 2px;
}

/* ---- Invoer ---- */
.veld {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid var(--invoer-rand);
  border-radius: var(--radius);
  background: var(--invoer);
  color: var(--inkt);
  padding: 4px 8px;
}
/* INVOER: in een tabelcel */
.celinvoer {
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  border: 1px solid var(--invoer-rand);
  border-radius: var(--radius);
  background: var(--invoer);
  color: var(--inkt);
  padding: 2px 4px;
}
.veldlabel {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* ---- Meldingen: MELDING, WAARSCHUWING, FOUT, INFO ---- */
.melding,
.waarschuwing,
.fout,
.info {
  border: 1px solid;
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
}
.melding {
  border-color: var(--lijn-sterk);
  background: var(--oppervlak-2);
  color: var(--inkt-2);
}
.waarschuwing {
  border-color: var(--aandacht-rand-sterk);
  background: var(--aandacht-vlak);
  color: var(--aandacht-sterk);
}
.fout {
  border-color: var(--fout-rand);
  background: var(--fout-vlak);
  color: var(--fout-sterk);
}
.info {
  border-color: var(--paars-rand);
  background: var(--paars-vlak);
  color: var(--paars-sterk);
}

/* ---- Labels: LABEL + LABELKLEUR, StatusBadge ---- */
.label {
  display: inline-block;
  white-space: nowrap;
  border-radius: var(--radius);
  padding: 2px 6px;
}
.label-grijs { background: var(--oppervlak-3); color: var(--gedempt); }
.label-groen { background: var(--goed-vlak-2); color: var(--goed-sterk); }
.label-amber { background: var(--aandacht-vlak-2); color: var(--aandacht-sterk); }
.label-blauw { background: var(--info-vlak-2); color: var(--info-sterk); }
.label-paars { background: var(--paars-vlak-2); color: var(--paars-sterk); }
.label-rood { background: var(--fout-vlak-2); color: var(--fout-sterk); }
.statusbadge {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* ---- Tag-pillen (index.css .tag) ---- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}
.tag-accent { background: var(--merk-vlak); color: var(--merk-sterk); }
.tag-neutral { background: var(--oppervlak-3); color: var(--gedempt); }
.tag-outline { border: 1px solid var(--merk-500); color: var(--merk-700); }

/* ---- Subtabbalk ---- */
.subtabbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.subtab {
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  border: 0;
  border-radius: var(--radius);
  padding: 4px 10px;
  background: transparent;
  color: var(--gedempt);
  cursor: pointer;
}
.subtab:hover { background: var(--oppervlak-2); }
.subtab[aria-selected="true"] {
  background: var(--merk-vlak);
  color: var(--merk-sterk);
  font-weight: 500;
}

/* ---- De kop (AppLayout, .kop) ---- */
.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--kop);
  color: var(--kop-inkt);
  border-bottom: var(--rand-kop) solid var(--accent-500);
  padding: 12px 16px;
}
.merkteken { display: flex; align-items: center; gap: 8px; }
.merknaam { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.025em; }
.logo-vlak { background: var(--kop-logo-vlak); }
.kop-zacht { font-size: 14px; line-height: 20px; color: var(--kop-zacht); }
.kop-schakelaar { display: flex; border: 1px solid var(--kop-rand); border-radius: var(--radius); overflow: hidden; }
.kop-schakelaar button {
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  border: 0;
  padding: 4px 8px;
  background: transparent;
  color: var(--kop-zacht);
  cursor: pointer;
}
.kop-schakelaar button:hover { background: var(--kop-hover); }
.kop-schakelaar button[aria-pressed="true"] { background: var(--kop-actief); color: var(--kop-inkt); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-500);
  color: var(--merk-sterk);
}

/* ---- Menu (popover, GebruikersMenu) ---- */
.menu {
  width: 256px;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--oppervlak);
  color: var(--inkt);
  box-shadow: var(--shadow-lg);
}
.menu-kop { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--lijn-zacht); padding: 12px; }
.menu-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  border: 0;
  padding: 6px 12px;
  background: transparent;
  color: var(--inkt-2);
  cursor: pointer;
}
.menu-item:hover { background: var(--oppervlak-2); }
.menu-item[aria-checked="true"] { color: var(--merk); font-weight: 500; }

/* ---- Sectie en tabel: SECTIE, KOPBALK, TITEL, TABEL, … ---- */
.sectie {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  font-size: var(--tekst-tabel, 12px);
  line-height: 1.3333;
  overflow: hidden;
}
.kopbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--lijn-zacht);
  background: var(--oppervlak-2);
  padding: 8px 12px;
}
.titel { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }
.titel-bijzaak { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--gedempt); }
.kopbediening { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.bloktekst { padding: 8px 12px; color: var(--gedempt); margin: 0; }

.rooster { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { padding: var(--rij-y) 12px; }
.tabel thead tr { border-bottom: 1px solid var(--lijn); text-align: left; color: var(--gedempt); }
.tabel th { font-weight: 400; }
.groeprij { border-top: 1px solid var(--lijn); font-weight: 500; cursor: pointer; }
.groeprij:hover { background: var(--oppervlak-2); }
.detailrij { border-bottom: 1px solid var(--lijn-zacht); }
.detailrij td.detaillabel { padding-left: 32px; color: var(--inkt-2); }
.totaalrij { border-top: var(--rand-totaal) solid var(--lijn-sterk); font-weight: 600; }
.getal { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.voetregel { border-top: 1px solid var(--lijn-zacht); padding: var(--rij-y) 12px; color: var(--gedempt); }
.neg { color: var(--neg, currentColor); }
.rijnummer { display: none; }

/* Vormgeving werkboek (index.css :310-340), hier ook op een omhullend element te zetten. */
[data-vormgeving="werkboek"] { --rij-y: var(--rij-y-compact); --neg: var(--fout-sterk); }
[data-vormgeving="werkboek"] .rooster th,
[data-vormgeving="werkboek"] .rooster td { border: 1px solid var(--lijn-zacht); }
[data-vormgeving="werkboek"] .rooster thead { background: var(--oppervlak-2); }
[data-vormgeving="werkboek"] .rooster table { counter-reset: rij; }
[data-vormgeving="werkboek"] .rooster .rijnummer {
  display: table-cell;
  width: 2.5rem;
  padding: 0 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--licht);
  background: var(--oppervlak-2);
  user-select: none;
}
[data-vormgeving="werkboek"] .rooster td.rijnummer::before { counter-increment: rij; content: counter(rij); }

/* ======================================================================
 * Website dossiercontrole.app in de Kubus-huisstijl.
 * Sluit aan op de app: systeemletter, hoek 4px, kop met groene streep. Alleen site-*-tokens.
 * ====================================================================== */
.site{font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--site-inkt);background:var(--site-grond)}
.site *{box-sizing:border-box}
.site :focus-visible{outline:2px solid var(--site-merk);outline-offset:2px}
.site :where(a){color:var(--site-merk)}
.site-naam{font:700 18px/28px var(--font-sans);letter-spacing:-.025em;color:var(--site-kop-inkt);text-decoration:none}

.site-kop{font-family:var(--font-sans);color:var(--site-inkt);margin:0}
.site-kop--display{font-weight:700;font-size:clamp(30px,5vw,44px);line-height:1.08;letter-spacing:-.025em}
.site-kop--2{font-weight:700;font-size:26px;line-height:1.2;letter-spacing:-.015em}

.site-knop{display:inline-flex;align-items:center;font:600 15px/1.2 var(--font-sans);border:0;border-radius:var(--radius);padding:10px 16px;cursor:pointer;text-decoration:none;background:var(--site-merk);color:var(--site-op-merk)}
.site-knop:hover{background:var(--merk-700);color:var(--white)}
.site-knop--secundair{background:none;color:var(--site-inkt);box-shadow:inset 0 0 0 1px var(--invoer-rand)}
.site-knop--secundair:hover{background:var(--site-vlak);color:var(--site-inkt)}
.site-rij{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Kopbalk als in de app: licht wit met paarse tekst, donker vol paars; groene streep eronder */
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 24px;background:var(--site-kop);border-bottom:4px solid var(--site-accent)}
.site-nav__menu{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 0 auto;padding:0;list-style:none}
.site-nav__item{display:block;color:var(--site-kop-inkt);padding:6px 10px;border-radius:var(--radius);font-size:14px;text-decoration:none}
.site-nav__item:hover{background:var(--kop-hover)}
.site-nav__item[aria-current="page"]{background:var(--kop-actief);font-weight:500}
.site-nav .site-knop--secundair{color:var(--site-kop-inkt);box-shadow:inset 0 0 0 1px var(--site-kop-inkt)}

.site-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;padding:var(--site-ruimte-8) 24px}
.site-hero__sub{margin:16px 0 24px;max-width:46ch;color:var(--site-gedempt);font-size:17px}
@media (max-width:720px){.site-hero{grid-template-columns:1fr;padding:48px 16px}}
/* Het voorbeeldscherm is een sectie uit de app */
.site-voorbeeld{background:var(--site-grond);border:1px solid var(--site-lijn);border-radius:var(--radius);font-size:14px;overflow:hidden}
.site-voorbeeld small{display:block;color:var(--site-inkt);font-weight:500;font-size:14px;padding:8px 12px;background:var(--oppervlak-2);border-bottom:1px solid var(--site-lijn)}
.site-voorbeeld__regel{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 12px;border-top:1px solid var(--lijn-zacht)}
.site-voorbeeld__regel:first-of-type{border-top:0}
.site-voorbeeld__ok{color:var(--goed)}
.site-bevinding{font:500 12px/16px var(--font-sans);padding:2px 8px;border-radius:9999px;background:var(--aandacht-vlak-2);color:var(--aandacht-sterk)}

.site-citaat{margin:0;padding:24px 0;border-top:1px solid var(--site-lijn)}
.site-citaat blockquote{margin:0;font:600 20px/1.4 var(--font-sans);letter-spacing:-.01em;color:var(--site-inkt);max-width:44ch}
.site-citaat figcaption{margin-top:12px;font-size:14px;color:var(--site-gedempt)}
.site-citaat figcaption b{color:var(--site-inkt);font-weight:600}

.site-voet{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:24px;border-top:1px solid var(--site-lijn);font-size:14px;color:var(--site-gedempt)}
.site-voet nav{display:flex;flex-wrap:wrap;gap:16px}
.site-voet nav a{color:var(--site-gedempt)}
.site-voet__edm{font-weight:700;color:var(--site-inkt)}