/* =====================================================================
   Opdrachtgeversportaal Klimaatstarters: één stylesheet.
   Ontwerpvoorstel 24 okt 2026: twee accentkleuren (navy + sage), rood
   alleen voor "Actie nodig" en "Spoed", één kaartstijl zonder schaduw,
   Playfair alleen voor de paginatitel, lichte zijbalk links.
   Regel: geen losse hex-waarden in componenten; alles via de tokens.
   ===================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/portaal/fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/portaal/fonts/playfair.woff2') format('woff2'); }

/* ---- tokens (ontwerpsysteem, ontwerp/systeem/tokens.css) ------------ */
:root {
  --ks-inkt: #0f1d3a; --ks-navy: #1e3256;
  --ks-sage: #5d7d66; --ks-sage-tekst: #496351;
  --ks-rood: #a93f3f; --ks-rood-tint: #f9eeee;
  --ks-grijs-700: #4a5262; --ks-grijs-500: #6b7079; --ks-grijs-400: #8c877c; --ks-grijs-200: #e9e5dd; --ks-grijs-100: #faf9f6;
  --ks-paper: #f6f4ef; --ks-wit: #ffffff;
  --ks-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ks-font-kop: 'Playfair Display', Georgia, serif;
  --ks-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ks-tap: 44px;

  /* portaal: korte namen uit het ontwerpvoorstel (contrast op wit) */
  --bg: var(--ks-paper);
  --surface: var(--ks-wit);
  --surface-2: var(--ks-grijs-100);
  --line: var(--ks-grijs-200);
  --line-2: #d8d3c8;                /* rand van knoppen (decoratief) */
  --line-veld: var(--ks-grijs-400); /* rand van invoervelden: 3,6:1 */
  --ink: var(--ks-navy);            /* 12,6:1 */
  --ink-2: var(--ks-grijs-700);     /* 7,6:1 */
  --ink-3: var(--ks-grijs-500);     /* 4,7:1 (AA op 13 px) */
  --accent: var(--ks-sage);
  --accent-text: var(--ks-sage-tekst); /* 6,4:1 */
  --accent-soft: #eef3ef;
  --signal: var(--ks-rood);         /* 6,0:1, alleen Actie nodig en Spoed */
  --signal-soft: var(--ks-rood-tint);
  --r: 10px; --r-s: 6px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --fs-1: 13px; --fs-2: 14px; --fs-3: 15px; --fs-4: 17px; --fs-5: 22px; --fs-6: 30px;
  --font: var(--ks-font); --font-kop: var(--ks-font-kop);
  --wrap: 1120px;
  --side: 240px;
}
/* Overgang: oude portaalvariabelen wijzen naar de nieuwe tokens (alleen in het portaal laden). */
:root {
  --paper: var(--bg); --cream: var(--bg); --white: var(--surface);
  --navy: var(--ink); --navy-900: var(--ks-inkt); --navy-700: var(--ink); --navy-500: var(--ink-2); --navy-300: var(--ink-3); --navy-200: var(--line-veld); --navy-100: var(--line); --navy-50: var(--surface-2);
  --line-strong: var(--line-veld); --muted: var(--ink-2);
  --sage-600: var(--accent-text); --sage-100: var(--accent-soft); --sage-50: var(--accent-soft);
  --rood: var(--signal); --rood-100: var(--signal-soft);
  --amber-100: var(--surface-2); --amber-700: var(--ink-2);
  --shadow-sm: none; --shadow: 0 8px 24px rgba(15, 29, 58, 0.12); --radius: var(--r);
}

/* ---- basis ---------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: var(--fs-3); line-height: 1.5; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11' 1; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1 { font-family: var(--font-kop); font-weight: 500; font-size: var(--fs-6); line-height: 1.15; color: var(--ink); margin: 0; letter-spacing: -0.005em; }
h2 { font-family: var(--font); font-weight: 600; font-size: var(--fs-3); line-height: 1.35; color: var(--ink); margin: 0; }
h3 { font-family: var(--font); font-weight: 600; font-size: var(--fs-2); color: var(--ink); margin: 0; }
p { margin: 0; }
strong { font-weight: 600; color: var(--ink); }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-1); }
.num, time { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-only { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--r-s); }
.skip:focus { left: 8px; }

/* ---- schil: zijbalk + inhoud --------------------------------------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); }
.side-in { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5) var(--s4) var(--s4); overflow-y: auto; }
.side-merk { display: flex; flex-direction: column; gap: var(--s2); }
.side-ks { display: block; border-top: 1px solid var(--line); padding: var(--s3) var(--s2) 0; }
.side-ks img { display: block; width: 110px; height: auto; }
.side-logo { display: flex; align-items: center; min-height: 52px; padding: 4px var(--s2); color: var(--ink); }
.side-logo:hover { text-decoration: none; }
.side-logo img { display: block; max-height: 44px; max-width: 100%; width: auto; height: auto; }
.side-logo .klantnaam { font-size: var(--fs-4); font-weight: 600; line-height: 1.25; }
.side-logo .klant-letter { display: none; }
.side-in .btn-nieuw { width: 100%; justify-content: center; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-s); color: var(--ink-2); font-size: var(--fs-2); font-weight: 500; }
.side-nav a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-3); }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.side-nav a.is-active { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.side-nav a.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
.side-nav a.is-active svg { color: var(--ink); }
.side-account { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.side-wie { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: 0 var(--s2); }
.side-wie .naam { display: block; font-size: var(--fs-2); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-wie .rol { display: block; font-size: var(--fs-1); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-wie > span:last-child { min-width: 0; }
.side-uit { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 36px; padding: 0 var(--s2); background: none; border: 0; border-radius: var(--r-s); color: var(--ink-2); font-size: var(--fs-2); cursor: pointer; text-align: left; }
.side-uit:hover { background: var(--surface-2); color: var(--ink); }
.side-uit svg { width: 16px; height: 16px; color: var(--ink-3); }
.org-keuze { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--s2); font-size: var(--fs-1); color: var(--ink-3); }
.org-keuze .select { min-height: 36px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; }

.main { min-width: 0; padding: var(--s6) var(--s6) var(--s7); }
.main-in { max-width: var(--wrap); margin: 0 auto; }
.main.is-breed { padding-left: var(--s5); padding-right: var(--s5); }
.main.is-breed .main-in { max-width: none; }

/* mobiele kop en accountmenu (alleen < 760) */
.mtop { display: none; }
.macc { position: relative; }
.macc summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 50%; }
.macc summary::-webkit-details-marker { display: none; }
.macc-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s2); z-index: 60; }
.macc-menu .kop { padding: var(--s2) var(--s3) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); font-size: var(--fs-1); color: var(--ink-3); }
.macc-menu .kop strong { display: block; font-size: var(--fs-2); }
.macc-menu a, .macc-menu button { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: 0 var(--s3); border: 0; background: none; border-radius: var(--r-s); color: var(--ink); font-size: var(--fs-2); cursor: pointer; text-align: left; }
.macc-menu a:hover, .macc-menu button:hover { background: var(--surface-2); text-decoration: none; }
.macc-menu svg { width: 16px; height: 16px; color: var(--ink-3); }
.macc-menu .org-keuze { padding: var(--s2) var(--s3); }

/* ---- knoppen -------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-s); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: var(--fs-2); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { text-decoration: none; border-color: var(--ink-3); }
.btn:disabled { opacity: .6; cursor: default; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #172845; border-color: #172845; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--accent-text); padding: 0 var(--s2); }
.btn-ghost:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn-sm { min-height: 32px; padding: 0 var(--s3); font-size: var(--fs-1); }
.btn-icoon { padding: 0; width: 38px; }
.btn-sm.btn-icoon { width: 32px; }
.link { color: var(--accent-text); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-signal { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }

/* ---- paginakop ------------------------------------------------------ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); }
.page-head > div:first-child { min-width: 0; }
.page-head .lead { margin-top: var(--s2); max-width: 60ch; color: var(--ink-2); }
.page-head .acties { display: flex; gap: var(--s3); flex-shrink: 0; align-items: center; }
.eyebrow { font-size: var(--fs-1); color: var(--ink-3); letter-spacing: 0.02em; margin-bottom: var(--s2); }
.crumb { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--ink-3); margin-bottom: var(--s4); min-height: 24px; }
.crumb svg { width: 14px; height: 14px; }
.crumb:hover { color: var(--ink); }

/* ---- kaart: één stijl ----------------------------------------------- */
.card { background: var(--surface); border-radius: var(--r); border: 1px solid var(--line); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5) 0; }
.card-h .sub { font-size: var(--fs-1); color: var(--ink-3); margin-top: 2px; }
.card-h > a, .card-h > .link { white-space: nowrap; flex-shrink: 0; font-size: var(--fs-1); }
.card-b { padding: var(--s4) var(--s5) var(--s5); }
.card-f { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-1); color: var(--ink-3); }
.card + .card, .grid + .card, .card + .grid, .grid + .grid, .card + .note, .note + .card { margin-top: var(--s5); }
.grid { display: grid; gap: var(--s5); align-items: start; }
.grid > * { min-width: 0; }
.grid > .card, .stack > .card + .card { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.grid-7-5 { grid-template-columns: 7fr 5fr; }
.grid-docs { grid-template-columns: 260px minmax(0, 1fr); }
.sec-title { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); }
.card.actie { border-left: 3px solid var(--signal); }
.card.actie .card-h h2 { color: var(--signal); }
.voorraad-regel { font-size: var(--fs-2); color: var(--ink-2); }
.vraag { margin-top: var(--s2); font-size: var(--fs-2); color: var(--ink-2); max-width: 64ch; }

/* ---- rijen ---------------------------------------------------------- */
.rows { list-style: none; margin: 0; padding: var(--s2) 0; }
.rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.rows li > div:first-child { min-width: 0; }
.rows .t { color: var(--ink); font-weight: 500; }
.rows .s { display: block; font-size: var(--fs-1); color: var(--ink-3); margin-top: 1px; }
.rows .r { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rows .r strong { display: block; }
.card-b + .rows { border-top: 1px solid var(--line); padding-top: 0; }
.leeg { padding: var(--s2) var(--s5) var(--s5); font-size: var(--fs-2); color: var(--ink-2); }
.leeg .sub { display: block; font-size: var(--fs-1); color: var(--ink-3); margin-top: 2px; }
.leeg .btn { margin-top: var(--s3); }
.card-b .leeg, .card-b > .leeg { padding: 0; }

/* ---- status: tekst + kleine vorm ------------------------------------ */
.st { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-2); color: var(--ink-2); white-space: nowrap; }
.st i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; display: inline-block; }
.st-ontvangen i { border-style: dashed; color: var(--ink-3); }
.st-bevestigd i { color: var(--ink); }
.st-ingepland i { background: var(--ink); color: var(--ink); }
.st-uitgevoerd i { background: var(--accent); color: var(--accent); }
.st-afgerond { color: var(--ink-3); }
.st-afgerond i { border: 0; width: 12px; height: 12px; border-radius: 0; background: none; color: var(--accent-text); }
.st-afgerond i::before { content: ''; display: block; width: 7px; height: 4px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg) translate(2px, -1px); }
.st-actie { color: var(--signal); font-weight: 600; }
.st-actie i { background: var(--signal); color: var(--signal); }
.st-geannuleerd { color: var(--ink-3); text-decoration: line-through; }
.st-geannuleerd i { color: var(--ink-3); }
.spoed { display: inline-flex; align-items: center; gap: 4px; color: var(--signal); font-size: var(--fs-1); font-weight: 600; white-space: nowrap; }
.spoed svg { width: 12px; height: 12px; }

/* ---- kerncijfers als tekstregel ------------------------------------- */
.facts { display: flex; flex-wrap: wrap; row-gap: var(--s4); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.facts li { padding: 0 var(--s5) 0 0; margin-right: var(--s5); border-right: 1px solid var(--line); }
.facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts a { display: block; color: inherit; }
.facts a:hover { text-decoration: none; }
.facts a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.facts strong { display: block; font-size: var(--fs-5); font-weight: 600; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.facts span { font-size: var(--fs-1); color: var(--ink-3); }
.facts li.is-signal strong, .facts li.is-signal span { color: var(--signal); }

/* ---- formulier ------------------------------------------------------ */
.input, .select, .textarea { width: 100%; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-veld); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-size: var(--fs-2); }
.textarea { padding: var(--s2) var(--s3); min-height: 72px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .input:focus-within, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5262' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; cursor: pointer; }
.field { margin-bottom: var(--s4); min-width: 0; }
.field > label, .field > .label { display: block; font-size: var(--fs-1); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.hint { display: block; font-size: var(--fs-1); color: var(--ink-3); margin-top: 6px; }
.field-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 34px; }
.keuzelijst { display: flex; flex-direction: column; gap: 2px; }
.keuze { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; cursor: pointer; font-size: var(--fs-2); color: var(--ink); min-height: 40px; }
.keuze input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }
.keuze .s { display: block; font-size: var(--fs-1); color: var(--ink-3); }
.keuzes-rij { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.check { display: inline-flex; gap: var(--s2); align-items: center; font-size: var(--fs-2); cursor: pointer; min-height: 40px; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; }
.dropzone { position: relative; display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border: 1px dashed var(--line-veld); border-radius: var(--r-s); background: var(--surface-2); cursor: pointer; font-size: var(--fs-2); color: var(--ink-2); }
.dropzone svg { width: 20px; height: 20px; color: var(--ink-3); flex-shrink: 0; }
.dropzone > span { display: flex; flex-direction: column; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone.is-over { border-color: var(--ink); background: var(--accent-soft); }
.dropzone:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.formfout { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-size: var(--fs-2); margin-top: var(--s5); }
.formfout svg { width: 16px; height: 16px; color: var(--signal); flex-shrink: 0; margin-top: 3px; }
.knoppen { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.knoppen-eind { justify-content: flex-end; margin-top: var(--s5); }
.status-tekst { font-size: var(--fs-1); color: var(--ink-3); }

/* ---- werkbalk boven lijsten ----------------------------------------- */
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.toolbar .search { flex: 1 1 240px; max-width: 460px; }
.toolbar .select { width: auto; min-width: 170px; }
.toolbar .weergave { margin-left: auto; }
.meer-filters { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s3); padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.meer-filters .select, .meer-filters .input { width: auto; min-width: 160px; }
.actie-strook { margin-bottom: var(--s5); }
.actie-strook .rows { padding: 4px 0; }
.actie-strook h2.st { font-size: var(--fs-2); }
.actie-strook + .card, .actie-strook + .grid { margin-top: 0; }
.meer-filters { flex-basis: 100%; }
.filter-check { white-space: nowrap; }
.toolbar-los { margin-bottom: var(--s5); }
.meer-filters .datum-veld { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--ink-3); }
.meer-filters .datum-veld .input { width: auto; min-width: 0; }
.telling { margin: var(--s3) 0; font-size: var(--fs-1); color: var(--ink-3); }
.filter-knop { display: none !important; }

/* ---- tabs ----------------------------------------------------------- */
.tabs { display: inline-flex; gap: var(--s4); border-bottom: 1px solid var(--line); }
.tabs button, .tabs a { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 2px 10px; font-size: var(--fs-2); font-weight: 500; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover, .tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs .is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tabs svg { width: 15px; height: 15px; }

/* ---- tabel ---------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 14px var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs-2); color: var(--ink-2); }
.table td.nowrap, .table td.num { white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table th:first-child, .table td:first-child { padding-left: var(--s5); }
.table th:last-child, .table td:last-child { padding-right: var(--s5); }
.table .t { color: var(--ink); font-weight: 500; }
.table .s { display: block; font-size: var(--fs-1); color: var(--ink-3); margin-top: 2px; }
.table .right { text-align: right; }
.table .datum { display: block; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.table tr.is-groep td { background: var(--surface-2); font-size: var(--fs-1); color: var(--ink-3); padding-top: var(--s2); padding-bottom: var(--s2); cursor: pointer; }
.table tr.is-groep td strong { color: var(--ink-2); font-weight: 600; }
.table tr.is-groep .link { margin-left: 6px; }
.table tr.is-groeplid td:first-child { box-shadow: inset 3px 0 0 var(--line); }
.table .regel-actie { display: block; margin-top: 4px; font-size: var(--fs-1); }

/* ---- kanban (per fase): vier kolommen als vlakken, kaarten met rand ------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.kol { min-width: 0; display: flex; flex-direction: column; gap: var(--s2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.kol h2 { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-2); padding: var(--s1) var(--s1) 0; }
.kol .n { font-weight: 500; color: var(--ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.kol-sub { font-size: var(--fs-1); color: var(--ink-3); margin: 0 0 var(--s1); padding: 0 var(--s1) var(--s2); border-bottom: 1px solid var(--line); }
.kcard { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; padding: var(--s3) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); color: var(--ink-2); }
.kcard:hover { text-decoration: none; border-color: var(--line-veld); }
.kcard:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.kcard strong { font-size: var(--fs-2); font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kcard .s, .kcard .kmerk { display: block; font-size: var(--fs-1); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kcard .kmerk { margin-top: 2px; }
.kcard .kmerk.is-actie { color: var(--signal); font-weight: 600; }
.kcard .kmerk .spoed { font-size: var(--fs-1); }
.kcard-groep strong { -webkit-line-clamp: 1; }
.kol-leeg { font-size: var(--fs-1); color: var(--ink-3); padding: var(--s2) var(--s1); margin: 0; }

/* ---- stappen (voortgang) -------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.steps li { font-size: var(--fs-1); color: var(--ink-3); padding-top: var(--s3); border-top: 2px solid var(--line); }
.steps li.done { border-top-color: var(--accent); color: var(--ink-2); }
.steps li.now { border-top-color: var(--ink); color: var(--ink); font-weight: 600; }
.steps li span { display: block; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
.steps.is-geannuleerd li { text-decoration: line-through; }
.status-regel { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-2); flex-wrap: wrap; color: var(--ink-2); }
.status-regel strong { white-space: nowrap; }

/* ---- definities ----------------------------------------------------- */
.defs { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px var(--s4); margin: 0; font-size: var(--fs-2); }
.defs dt { color: var(--ink-3); }
.defs dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.defs dd .hint { max-width: 46ch; }
.defs-smal { grid-template-columns: 110px minmax(0, 1fr); }

/* ---- melding (één soort) -------------------------------------------- */
.note { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-2); color: var(--ink-2); }
.note.is-signal { background: var(--signal-soft); border-color: #eccfcf; }
.note > svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--signal); }
.note strong { color: var(--ink); }

/* ---- opdrachtdetail ------------------------------------------------- */
.card.actie h2 { color: var(--signal); }
.spoed-blok { margin-top: var(--s5); }
.spoed-blok > p { margin-top: var(--s2); }
.keuze-groep { border: 0; margin: 0 0 var(--s3); padding: 0; min-width: 0; }
.keuze-groep legend { font-size: var(--fs-1); font-weight: 600; color: var(--ink); margin-bottom: 4px; padding: 0; }
.hint.voor-knoppen { margin: 0 0 var(--s4); }
.chat-acties .hint { margin: 0; }
.eerdere { margin-top: var(--s4); color: var(--ink-3); }
.card-h > button.link { font-size: var(--fs-1); }
.code-rij { display: inline-flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.code { font-family: var(--ks-font-mono); font-size: var(--fs-4); color: var(--ink); letter-spacing: 0.1em; }
.code.is-open { letter-spacing: 0.06em; font-weight: 600; }
.code-tijd { font-size: var(--fs-1); color: var(--ink-3); }
.toegang-blok + .toegang-blok { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.paneel-form { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.chat { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.chat li { padding: var(--s3) var(--s4); border-radius: var(--r-s); background: var(--surface-2); max-width: 85%; font-size: var(--fs-2); color: var(--ink); }
.chat li.ks { background: var(--accent-soft); align-self: flex-end; }
.chat li.ks .wie time, .tree a.is-active .n { color: var(--ink-2); }
.chat li.systeem { background: none; border: 1px solid var(--line); max-width: 100%; }
.chat .wie { display: block; font-size: var(--fs-1); font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.chat .wie time { font-weight: 400; color: var(--ink-3); }
.chat p { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-leeg { font-size: var(--fs-1); color: var(--ink-3); margin-bottom: var(--s4); }
.chat-acties { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.dossier li { padding-top: 10px; padding-bottom: 10px; }
.dossier .t { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); font-size: var(--fs-2); }
.dossier .t svg { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }
.dossier .docs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-1); text-align: right; }
.dossier .docs a { color: var(--accent-text); }
.dossier li.voet { font-size: var(--fs-1); color: var(--ink-3); }
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); font-size: var(--fs-2); padding: 6px 0; color: var(--ink); }
.tijdlijn time { color: var(--ink-3); font-size: var(--fs-1); padding-top: 1px; }
.tijdlijn .wie { color: var(--ink-3); }
.mail-blok { font-size: var(--fs-2); }
.mail-blok pre { white-space: pre-wrap; font-family: var(--font); font-size: var(--fs-2); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s3) var(--s4); margin: var(--s3) 0 0; max-height: 360px; overflow: auto; }

/* ---- documenten ----------------------------------------------------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: var(--s4); }
.tree a { display: flex; justify-content: space-between; gap: var(--s2); padding: 6px var(--s2); margin: 0 calc(-1 * var(--s2)); border-radius: var(--r-s); font-size: var(--fs-2); color: var(--ink-2); }
.tree a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.tree a.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.tree .n { color: var(--ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.tree a.leeg-map { color: var(--ink-3); }
.tree + .sec-title { margin-top: var(--s5); }
.adres-kop { font-size: var(--fs-4); }
.kruimels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-1); color: var(--ink-3); margin-bottom: 4px; }
.kruimels a { color: var(--ink-3); }
.kruimels svg { width: 12px; height: 12px; }
.docs .acties { white-space: nowrap; text-align: right; }
.docs .acties .btn + .btn { margin-left: 6px; }
.leeg-mappen { border-top: 1px solid var(--line); }
.leeg-mappen p { max-width: 70ch; font-size: var(--fs-1); color: var(--ink-3); }

/* ---- welkom (eerste keer) ------------------------------------------- */
.welkom { max-width: 64ch; margin-bottom: var(--s6); }
.welkom h1 { font-size: 36px; }
.welkom .lead { margin-top: var(--s3); font-size: var(--fs-4); color: var(--ink-2); }
.stap { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); color: var(--ink-2); }
.stap:hover { text-decoration: none; border-color: var(--line-2); }
.stap:hover .link { text-decoration: underline; text-underline-offset: 3px; }
.stap .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-1); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.stap h2 { font-size: var(--fs-4); }
.stap p { font-size: var(--fs-2); flex: 1; }
.mail-in { display: flex; gap: var(--s4); align-items: flex-start; }
.mail-in p { margin-top: var(--s2); font-size: var(--fs-2); max-width: 72ch; }
.mail-icoon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mail-icoon svg { width: 18px; height: 18px; }
.welkom-acties { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }

/* ---- nieuwe opdracht ------------------------------------------------ */
.form-lay { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
.form-lay .card + .card { margin-top: var(--s5); }
.samenvatting { position: sticky; top: var(--s5); }
.sectie-nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-size: var(--fs-1); font-weight: 600; margin-right: var(--s2); vertical-align: 1px; }
.suggest { position: relative; }
.suggest-lijst { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: var(--s1) 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--shadow); z-index: 30; max-height: 320px; overflow: auto; }
.suggest-lijst li { padding: 8px var(--s3); font-size: var(--fs-2); color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: var(--s3); }
.suggest-lijst li .s { color: var(--ink-3); font-size: var(--fs-1); }
.suggest-lijst li[role=option]:hover, .suggest-lijst li.is-actief { background: var(--surface-2); }
.suggest-lijst li.kop { font-size: var(--fs-1); font-weight: 600; color: var(--ink-3); cursor: default; padding-top: var(--s2); }
.gekozen { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.gekozen:empty { display: none; }
.gekozen li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--fs-2); color: var(--ink); }
.gekozen li .s { color: var(--ink-3); font-size: var(--fs-1); }
.gekozen li.is-onbekend .s { color: var(--signal); }
.uitslag { margin-top: var(--s4); }
.uitslag > p { font-size: var(--fs-1); color: var(--ink-3); }
.uitslag .table th:first-child, .uitslag .table td:first-child { padding-left: 0; }
.uitslag .table th:last-child, .uitslag .table td:last-child { padding-right: 0; }
.uitslag .table td { padding-top: 10px; padding-bottom: 10px; }
.uitslag .bron-nee { color: var(--signal); }
.uitslag .bron-ok { color: var(--accent-text); }
.bijlagen { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.bijlagen li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: var(--fs-2); }
.tabs-form { margin-bottom: var(--s4); }
.field-rij.na-keuze { margin-top: var(--s3); }
.klaar h2 + p { margin-top: var(--s2); }
.klaar ol { padding-left: 20px; margin: var(--s4) 0; font-size: var(--fs-2); }
.klaar ol li { margin-bottom: 6px; }
.klaar .note { margin-top: var(--s3); }

/* ---- team en instellingen ----------------------------------------- */
.persoon { display: inline-flex; align-items: center; gap: var(--s3); }
.persoon .t, .persoon .s { display: block; }
.instelling { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.instelling .hint { margin-top: 2px; }
.instelling label { cursor: pointer; }

/* ---- schakelaar (instellingen) -------------------------------------- */
.schakel { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--line-veld); border: 0; cursor: pointer; flex-shrink: 0; padding: 0; }
.schakel::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.schakel[aria-checked=true] { background: var(--accent); }
.schakel[aria-checked=true]::after { transform: translateX(18px); }

/* ---- paginering ----------------------------------------------------- */
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-1); color: var(--ink-3); }

/* ---- voettekst ------------------------------------------------------ */
.foot { border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s5); font-size: var(--fs-1); color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.foot img { height: 16px; width: auto; vertical-align: -3px; margin-left: 6px; }
.foot a { color: var(--ink-2); }

/* ---- onderbalk mobiel ----------------------------------------------- */
.bottombar { display: none; }

/* ---- tablet: zijbalk ingeklapt tot iconen --------------------------- */
@media (max-width: 1024px) {
  :root { --side: 76px; }
  .side-in { padding: var(--s4) var(--s3); gap: var(--s4); align-items: center; }
  .side-logo { padding: 0; min-height: 44px; justify-content: center; }
  .side-logo img { max-width: 52px; max-height: 32px; }
  .side-logo .klantnaam { display: none; }
  .side-ks { display: none; }
  .side-logo .klant-letter { display: inline-flex; width: 36px; height: 36px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); align-items: center; justify-content: center; font-weight: 700; color: var(--ink); }
  .side-in .btn-nieuw { width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .side-nav { width: 100%; align-items: center; }
  .side-nav a { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .side-nav a.is-active::before { left: -10px; }
  .side-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-account { width: 100%; align-items: center; }
  .side-wie { padding: 0; }
  .side-wie > span:last-child, .side-account .org-keuze { display: none; }
  .side-uit { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .main { padding: var(--s6) var(--s5) var(--s7); }
  .toolbar .search { flex-basis: 160px; }
  .toolbar .select { min-width: 130px; }
  .grid-docs { grid-template-columns: 220px minmax(0, 1fr); }
  .form-lay { grid-template-columns: 1fr; }
  .samenvatting { position: static; }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) and (min-width: 761px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- mobiel (390) --------------------------------------------------- */
@media (max-width: 760px) {
  .app { display: block; }
  .side { display: none; }
  .m-only { display: revert !important; }
  .btn.m-only { display: inline-flex !important; }
  .d-only { display: none !important; }
  .mtop { display: flex; position: sticky; top: 0; z-index: 50; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding: 0 var(--s3) 0 var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); }
  .mtop .side-logo { min-height: 44px; padding: 0; }
  .mtop .side-logo img { max-height: 32px; }
  .mtop .side-logo .klantnaam { font-size: var(--fs-3); }
  .main { padding: var(--s5) var(--s4) 104px; }
  h1 { font-size: 26px; }
  .page-head { flex-direction: column; align-items: stretch; margin-bottom: var(--s5); gap: var(--s4); }
  .page-head .acties { align-self: flex-start; }
  .grid-2, .grid-3, .grid-7-5, .grid-docs, .field-rij { grid-template-columns: 1fr; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .facts li { padding: 0; margin: 0; border-right: 0; }
  .defs, .defs-smal { grid-template-columns: 1fr; gap: 2px; }
  .defs dt { margin-top: var(--s3); font-size: var(--fs-1); }
  .defs dt:first-child { margin-top: 0; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { display: flex; justify-content: space-between; gap: var(--s3); border-top: 0; border-left: 2px solid var(--line); padding: 6px 0 6px var(--s3); font-size: var(--fs-2); }
  .steps li.done { border-left-color: var(--accent); }
  .steps li.now { border-left-color: var(--ink); }
  .steps li span { margin: 0; font-size: var(--fs-1); text-align: right; }
  .table thead, .table colgroup { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .table tr:last-child { border-bottom: 0; }
  .table td { border: 0; padding: 2px 0 !important; }
  .table td.hide-m { display: none; }
  .table tr.is-groep { padding: var(--s2) var(--s4); background: var(--surface-2); }
  .table tr.is-groep td { padding: 0 !important; }
  .table tbody tr:hover td { background: none; }
  .table td[data-label]::before { content: attr(data-label) ': '; color: var(--ink-3); font-size: var(--fs-1); }
  .rows li { padding: var(--s3) var(--s4); }
  .rows li.wrap-m { flex-wrap: wrap; }
  .rows li.wrap-m .r { width: 100%; text-align: left; }
  .card-h { padding: var(--s4) var(--s4) 0; }
  .card-h.wrap-m { flex-wrap: wrap; }
  .card-b { padding: var(--s4); }
  .leeg { padding: var(--s2) var(--s4) var(--s4); }
  .pager { padding: var(--s3) var(--s4); }
  .toolbar .search { flex: 1 1 100%; max-width: none; }
  .toolbar .select, .toolbar .verberg-m { display: none; }
  .toolbar.is-open .select, .toolbar.is-open .verberg-m { display: block; width: 100%; }
  .filter-knop { display: inline-flex !important; }
  .toolbar .weergave { margin-left: 0; }
  .meer-filters .select, .meer-filters .input { width: 100%; }
  .kanban { grid-template-columns: 1fr; }
  .grid-docs .boom { order: 2; }
  .toolbar-los .select { display: block; width: 100%; }
  .chat li { max-width: 100%; }
  .chat-acties { flex-direction: column; align-items: stretch; }
  .tijdlijn li { grid-template-columns: 1fr; gap: 0; }
  .docs .acties { text-align: left; padding-top: 6px !important; }
  .welkom h1 { font-size: 30px; }
  .mail-in { flex-direction: column; }
  .foot { margin-top: var(--s6); flex-direction: column; align-items: flex-start; }
  /* tapdoelen 44px */
  .btn, .input, .select, .tabs button, .tabs a, .crumb, .check, .keuze { min-height: var(--ks-tap); }
  .btn-sm { min-height: var(--ks-tap); padding: 0 var(--s3); }
  .btn-icoon, .btn-sm.btn-icoon { width: var(--ks-tap); }
  .card-h > a, .card-h > .link, .tree a, .kruimels a, .link-tap { display: inline-flex; align-items: center; min-height: var(--ks-tap); }
  .tree a { display: flex; }
  .table .regel-actie, .dossier .docs a, .dossier li.voet a, .spoed-blok button, .rows .r .link, .welkom-acties .link { display: inline-flex; align-items: center; min-height: var(--ks-tap); }
  .org-keuze .select { min-height: var(--ks-tap); }
  .table a.t, .rows a.t, .table td > a:first-child:not(.btn), .card-f a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .schakel { box-sizing: content-box; border: 9px solid transparent; background-clip: padding-box; }
  .bottombar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 40; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .bottombar a svg { width: 20px; height: 20px; }
  .bottombar a.is-active { color: var(--ink); }
  .bottombar a.is-primary { color: var(--accent-text); }
  .bottombar a:hover { text-decoration: none; }
}

/* ---- inloggen (statische Astro-pagina's) --------------------------- */
.login-body { min-height: 100vh; display: flex; }
.login { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); max-width: 420px; margin: 0 auto; padding: var(--s7) var(--s4); width: 100%; }
.login-logo { height: 34px; width: auto; }
.login-paneel { width: 100%; }
.login-paneel .card-b { padding: var(--s6); }
.login-paneel h1 { font-size: 26px; }
.login-paneel .lead { margin: var(--s2) 0 var(--s5); color: var(--ink-2); }
.login-paneel .input { min-height: var(--ks-tap); font-size: var(--fs-3); }
.login-paneel .code-veld { font-size: var(--fs-5); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.btn.breed { width: 100%; min-height: var(--ks-tap); }
.login-melding { margin: 0 0 var(--s4); }
p.formfout[hidden] { display: none; }
.login-hint { margin-top: var(--s4); }
.login-hint a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.login-onder { font-size: var(--fs-1); color: var(--ink-3); text-align: center; }
.login-onder a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) { .login { justify-content: flex-start; padding-top: var(--s6); } .login-paneel .card-b { padding: var(--s5); } }

@media print {
  .side, .mtop, .bottombar, .foot { display: none !important; }
  .app { display: block; }
}

/* ---- energielabel (EP-online): tekstregel met één gekleurde letter ---- */
.lbl { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.lbl-tekst { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.lbl-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2); font-weight: 700; letter-spacing: .02em; flex-shrink: 0; }
.lbl-regel { color: var(--ink); }
.lbl .lbl-bron { display: block; width: 100%; font-size: var(--fs-1); color: var(--ink-3); margin: 0; }
.lbl-knop { flex-shrink: 0; }
.lbl-compact { display: inline-flex; align-items: center; gap: 8px; }
.lbl-compact .s { display: inline; font-size: var(--fs-1); color: var(--ink-3); margin: 0; white-space: nowrap; }
.lbl-compact .lbl-letter { min-width: 22px; height: 22px; font-size: var(--fs-1); }
.lbl-blok { border-top: 1px solid var(--line); }
.defs dd .lbl { margin: 0; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.defs dd .lbl .lbl-tekst { gap: 4px 8px; }