/* shell.css — de schil van Hillmond als intern platform (28/9).

   Referentie: de interne werkomgevingen van een groot audit- en
   adviesbureau. Wat dat register maakt, en wat we hier dus doen:
   - één compacte donkere merkbalk (Hillmond · ISS Dossieranalyse, Bèta),
     accountacties rechts; statuschips en kruimelpad zijn 29/9 geschrapt
     (UX-review): de volgorde is merkbalk, tabs, paginakop;
   - een grijs werkcanvas met witte panelen en haarlijnen, dichte zetting,
     kleine gesperde labels, tabulaire cijfers;
   - een voetbalk die de vragen van de DPO beantwoordt vóór ze gesteld worden.
   Eén letterfamilie: Public Sans (29/9, i.p.v. IBM Plex Sans + Mono — dat
   paar las als een generieke AI-interface), ook voor de gesperde labels,
   met tabulaire cijfers. Lokaal geserveerd.

   Laadt ná app.css en overschrijft daar alleen tokens en de schil. */

:root {
  --sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  /* Labels, chips en id's: dezelfde letter, gesperd en in kapitalen. */
  --mono: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;

  --sys: #0C1C2E;
  --sys-2: #132A42;
  --sys-lijn: #24405E;
  --sys-tekst: #E8EEF4;
  --sys-mut: #9FB1C4;

  --canvas: #F1F3F6;
  --paper: #FFFFFF;
  --tile: #F6F7F9;
  --line: #D3D9E0;
  --line-soft: #E3E7EC;

  --ink: #14202C;
  --ink-soft: #384655;
  --muted: #5A6878;

  --accent: #1B4F8A;
  --accent-ink: #123A66;
  --accent-tint: #EAF1F9;
  --groen: #1D6B4F;
  --amber: #8A5A00;
  --amber-tint: #FFF6E0;

  --maxw: 1200px;
  --pad-x: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(1.75rem, 4vw, 2.75rem);
}

body {
  font-size: 15px;
  line-height: 1.55;
  background: var(--canvas);
  font-feature-settings: 'tnum' 1;
}
body.breedte-blad { --maxw: 236mm; }
body.breedte-breed { --maxw: 1320px; }

.skiplink { position: absolute; left: -9999px; top: 0; }
.skiplink:focus {
  left: 1rem; top: 0.5rem; z-index: 100; background: var(--paper); color: var(--ink);
  padding: 0.5rem 0.8rem; border: 2px solid var(--accent);
}

.sys-in { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x); }

/* ---------- systeembalk ---------- */

.sys { position: sticky; top: 0; z-index: 20; }
.sys-balk { background: var(--sys); color: var(--sys-tekst); border-top: 3px solid var(--accent); }
.sys-balk .sys-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px; flex-wrap: wrap;
}
.sys-links { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; }
.sys-merk {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: inherit; text-decoration: none; white-space: nowrap; min-width: 0;
}
.sys-teken { width: 24px; height: 24px; display: block; flex: none; }
.sys-product { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; }
.sys-punt { color: var(--sys-mut); }
.sys-sub { font-size: 0.9rem; color: var(--sys-tekst); }
/* Klein label, geen chip: 0,66rem kapitalen, #F3D98B op --sys haalt ruim 4,5:1. */
.sys-beta {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #F3D98B;
  border: 1px solid #7A6320; padding: 0.05rem 0.35rem; line-height: 1.5;
}

/* ---------- tabs ---------- */

.sys-tabs { background: var(--paper); border-bottom: 1px solid var(--line); }
.sys-tabs .sys-in { display: flex; gap: 0; overflow-x: auto; }
.sys-tabs a {
  font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none;
  padding: 0.85rem 1rem 0.75rem; border-bottom: 3px solid transparent; white-space: nowrap;
}
.sys-tabs a:first-child { padding-left: 0; }
.sys-tabs a:hover { color: var(--ink); }
.sys-tabs a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- werkvlak ---------- */

main.app-main { padding-top: var(--section-y); padding-bottom: calc(var(--section-y) * 1.4); }

.pagina-kop { margin-bottom: 1.5rem; }
h1.pagina-titel {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.2; letter-spacing: -0.012em;
  max-width: none; margin-top: 0.35rem;
}
p.pagina-intro { font-size: 0.975rem; max-width: 78ch; margin-top: 0.6rem; }
/* Korte regel onder de intro: wat Hillmond niet doet (UX-review 29/9). */
p.pagina-noot { font-size: 0.875rem; color: var(--ink-soft); max-width: 78ch; margin-top: 0.5rem; }
p.pagina-noot span { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.15rem; }

/* Uploadpagina: e-mailmelding compact, teller direct boven de startknop. */
.email-compact { margin-top: 0.75rem; }
.email-compact .veldrij { padding: 0.9rem 1.4rem 1rem; }
.email-compact .veld-hint { margin-top: 0.15rem; }
.email-compact .tekstveld { margin: 0.55rem 0 0; width: 100%; }
.email-compact .veld-fout { margin-left: 0; }
.email-compact .tag { margin-left: 0.4rem; }
.upload-teller { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.6rem; }
.microlabel { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--accent); }

.kaart { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(12, 28, 46, 0.03); }
.kaart-stil { background: var(--paper); border: 1px solid var(--line); }
.knop { font-weight: 500; }

/* Werkblad: formulier links, context rechts. */
.werkblad { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.werkblad-zij { display: grid; gap: 1rem; position: sticky; top: 112px; }
@media (max-width: 960px) {
  .werkblad { grid-template-columns: 1fr; }
  .werkblad-zij { position: static; }
}

.paneel { background: var(--paper); border: 1px solid var(--line); }
.paneel-kop {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-soft); background: var(--tile);
}
.paneel-kop h2 {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.3;
}
.paneel-lijf { padding: 0.9rem 1rem 1rem; font-size: 0.85rem; color: var(--ink-soft); }

.flow-stappen { list-style: none; counter-reset: stap; display: grid; gap: 0; }
.flow-stappen li {
  counter-increment: stap; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem;
  padding: 0.55rem 0; border-top: 1px solid var(--line-soft);
}
.flow-stappen li:first-child { border-top: 0; padding-top: 0; }
.flow-stappen li::before {
  content: counter(stap, decimal-leading-zero); font-family: var(--mono); font-size: 0.7rem;
  color: var(--muted); padding-top: 0.1rem;
}
.flow-stappen strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.flow-stappen span { display: block; font-size: 0.8rem; color: var(--muted); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.08rem 0.35rem; margin-left: 0.3rem; vertical-align: 1px;
  border: 1px solid var(--line); color: var(--muted);
}
.tag-eu { border-color: #B5D8C9; color: var(--groen); background: #EEF7F2; }

.feitenlijst { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; font-size: 0.8rem; }
.feitenlijst dt { color: var(--muted); }
.feitenlijst dd { color: var(--ink); font-weight: 500; }

/* ---------- voetbalk (DPO) ---------- */

.voet { background: var(--sys); color: var(--sys-tekst); margin-top: auto; border-top: 3px solid var(--accent); }
.voet-in { max-width: 1200px; margin: 0 auto; padding: 2.5rem var(--pad-x) 1.5rem; }
.voet-kop {
  display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--sys-lijn);
}
.voet-label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sys-mut);
}
.voet-titel { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.3rem; color: #fff; }
.voet-cta {
  font-size: 0.85rem; font-weight: 500; color: #fff; text-decoration: none;
  border: 1px solid var(--sys-lijn); padding: 0.55rem 0.9rem;
}
.voet-cta:hover { background: var(--sys-2); border-color: var(--sys-mut); }

.voet-raster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border-bottom: 1px solid var(--sys-lijn);
}
.voet-raster section { padding: 1.3rem 1.2rem 1.4rem 0; }
.voet-raster section:not(:nth-child(4n + 1)) { padding-left: 1.2rem; border-left: 1px solid var(--sys-lijn); }
.voet-raster section:nth-child(n + 5) { border-top: 1px solid var(--sys-lijn); }
.voet-raster h3 {
  font-size: 0.78rem; font-weight: 600; color: #fff; margin-bottom: 0.45rem; letter-spacing: 0;
}
.voet-raster p { font-size: 0.78rem; line-height: 1.55; color: var(--sys-mut); }
.voet a { color: #fff; }

.voet-sub { padding: 1.1rem 0; border-bottom: 1px solid var(--sys-lijn); display: grid; grid-template-columns: 140px 1fr; gap: 1rem; }
.voet-sub ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-size: 0.76rem; }
.voet-sub strong { color: #fff; font-weight: 500; }
.voet-sub span { color: var(--sys-mut); }
.voet-docs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.6rem; }
.voet-docs li span { display: block; font-size: 0.7rem; }

.voet-onder {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center;
  padding-top: 1.1rem; font-size: 0.72rem; color: var(--sys-mut);
}
.voet-onder .mono { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; }
.voet-onder .mono:last-child { margin-left: auto; }
.voet-maker { color: var(--sys-tekst); }

@media (max-width: 960px) {
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-raster section { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--sys-lijn); padding-right: 1rem; }
  .voet-sub { grid-template-columns: 1fr; }
  .voet-docs ul { grid-template-columns: 1fr; }
  .voet-onder .mono:last-child { margin-left: 0; }
}
@media (max-width: 560px) {
  .voet-raster { grid-template-columns: 1fr; }
  .sys-balk .sys-in { padding-top: 0.4rem; padding-bottom: 0.4rem; row-gap: 0.3rem; }
}
@media (max-width: 400px) {
  .sys-punt, .sys-sub { display: none; }
}

/* ---------- /gegevensverwerking ---------- */

.dpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: start; }
.dpo-toc { position: sticky; top: 112px; font-size: 0.82rem; }
.dpo-toc ol { list-style: none; border-left: 1px solid var(--line); }
.dpo-toc a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; color: var(--muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.dpo-toc a:hover { color: var(--accent); border-left-color: var(--accent); }
.dpo-secties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dpo-secties > * { min-width: 0; }
.dpo-secties .paneel-lijf { font-size: 0.9rem; }
.dpo-secties .paneel-lijf p + p, .dpo-secties .paneel-lijf p + ul, .dpo-secties .paneel-lijf ul + p { margin-top: 0.6rem; }
.dpo-secties ul.punten { padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.dpo-samenvatting { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-bottom: 1.5rem; }
.dpo-samenvatting div { background: var(--paper); border: 1px solid var(--line); padding: 0.9rem 1rem; margin-left: -1px; }
.dpo-samenvatting dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dpo-samenvatting dd { font-size: 0.95rem; font-weight: 600; margin-top: 0.3rem; color: var(--ink); }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.tabel th { text-align: left; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--line); }
.tabel td { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tabel td:first-child { font-weight: 600; color: var(--ink); }
.tabel small { display: block; color: var(--muted); margin-top: 0.2rem; }
.tabel-wrap { overflow-x: auto; }
@media (max-width: 960px) {
  .dpo { grid-template-columns: minmax(0, 1fr); }
  .dpo > * { min-width: 0; }
  .dpo-toc { position: static; }
  .dpo-samenvatting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .sys, .voet { display: none; } }

.paneel-link { font-size: 0.75rem; color: var(--accent); text-decoration: none; }
.paneel-link:hover { text-decoration: underline; }
/* Voorbeeldrapport in het zijpaneel. Eigen klasse, niet .demo-blok: die
   erft uit app.css lichte tekst voor een donkere achtergrond, en op het witte
   paneel werd dat wit op wit (UX-review 29/9). Tekst --ink-soft op wit: 9,6:1. */
.voorbeeld-blok { padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.voorbeeld-blok h2 { font-size: 0.95rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.voorbeeld-blok p { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.35rem; }
.voorbeeld-blok .knop { margin-top: 0.8rem; font-size: 0.85rem; }
.flow-stappen .tag { display: inline-block; font-size: 0.58rem; }
.mono-klein { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }

/* Statuspagina: één leeskolom, links uitgelijnd op de as van de schil. */
body:not(.breedte-blad):not(.breedte-breed) main.app-main > * { max-width: 860px; }
body:not(.breedte-blad):not(.breedte-breed) main.app-main > .werkblad { max-width: none; }

/* ---------- aanmelden ---------- */

.login { display: grid; place-items: center; min-height: calc(100vh - 200px); }
.login-kaart {
  width: 100%; max-width: 400px; background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); padding: 2rem 2rem 1.6rem;
}
.login-titel { font-size: 1.5rem; margin-top: 0.4rem; letter-spacing: -0.01em; }
.login-uitleg { font-size: 0.9rem; color: var(--muted); margin-top: 0.35rem; }
.login-form { display: grid; gap: 0.5rem; margin-top: 1.4rem; }
.login-label { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.login-form .tekstveld { width: 100%; }
.login-form .knop { margin-top: 0.6rem; width: 100%; justify-content: center; text-align: center; }
.login-fout {
  margin-top: 1rem; padding: 0.55rem 0.75rem; font-size: 0.85rem;
  background: var(--fout-tint); color: var(--fout); border-left: 3px solid var(--fout);
}
.login-voet { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: 0.78rem; color: var(--muted); }
.voet-kaal {
  margin-top: auto; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.1rem var(--pad-x); font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--line);
  background: var(--paper);
}
.voet-kaal a { color: var(--accent); text-decoration: none; }

.sys-sessie { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.4rem; }
.sys-sessie[hidden] { display: none; }
.sys-org-naam { font-size: 0.8rem; color: var(--sys-mut); }
.sys-org-naam::before { content: 'Aangemeld · '; }
@media (max-width: 560px) { .sys-org-naam::before { content: none; } }
.sys-sessie button {
  font: inherit; font-size: 0.78rem; color: var(--sys-tekst); background: transparent;
  border: 1px solid var(--sys-lijn); padding: 0.25rem 0.6rem; cursor: pointer;
}
.sys-sessie button:hover { background: var(--sys-2); }