/* BlackSwan - app.css
   Vernieuwd ontwerp (login, zijbalk-shell, Vandaag, Update). Alle klassenamen die
   app.js en omzet.js genereren blijven bestaan, zodat de schermen blijven werken. */

:root {
  /* Merkkleuren (BlackSwan-handboek). Bestaande variabelenamen behouden,
     waarden herpunt naar het merkpalet zodat de hele app meeschuift. */
  --ink:#1D2D2A; --deep:#182825; --teal:#AF8D33; --teal-700:#A48229; --teal-soft:#ECDCB0;
  --brass:#BE6E1B; --brass-700:#7E4E0E; --brass-soft:#F6E8CF;
  --willow:#3E7B54; --willow-soft:#E4EFE6; --amber:#BE6E1B; --amber-soft:#F6E8CF;
  --coral:#B0463B; --coral-soft:#F3DEDA; --plum:#3E6B79; --plum-soft:#DCEAED;
  --bg:#F6F2E6; --surface:#FFFFFF; --surface-2:#F3EFE3; --line:#DAD3BF; --hair:#E8E2D0;
  --ink-text:#1D2D2A; --muted:#5D6B63; --faint:#8A958C;
  /* merk-specifieke ondersteuning */
  --gold:#AF8D33; --gold-deep:#A48229; --gold-light:#CAAD75;
  --cream:#EFE5CC; --on-dark:#E9E0C8; --on-dark-muted:#A6B0A6;
  /* Focusring-token uit het design system (tokens/colors.css:84; F2/V3,
     geratificeerd 2026-08-13). De ~20 bestaande focus-declaraties sluiten er
     stapsgewijs op aan zodra hun component wordt aangeraakt (fase 2c+). */
  --focus-ring:var(--gold-light);
  --radius:12px; --radius-sm:8px; --radius-lg:18px;
  --top-h:64px; /* sticky .top-hoogte (>=1080); gebruikt door o.a. de bulk-balk */
  --shadow-sm:0 1px 2px rgba(29,45,42,.06);
  --shadow:0 1px 2px rgba(29,45,42,.05),0 14px 34px -22px rgba(29,45,42,.38);
  --shadow-lg:0 24px 60px -30px rgba(24,40,37,.5);
  --disp:"Lora",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- Amount retrofit / herstelde bedragen (sage, koel; bewust != amber aandacht) ----
     Bron: docs/design/amount-retrofit-handoff/01-design-system-updates.md + css/amount-retrofit.css.
     Component-CSS wordt per bouwslice adapted toegevoegd; hier alleen de tokens. */
  --hersteld-hi-bg:#E4EFE6; --hersteld-hi-bd:#C2D8C8; --hersteld-hi-tx:#2E5E45; /* hoog  >=80% */
  --hersteld-md-bg:#EDF2EC; --hersteld-md-bd:#D5DECF; --hersteld-md-tx:#3C5A49; /* middel 50-79% */
  --hersteld-lo-bg:transparent; --hersteld-lo-bd:#C7CDBC; --hersteld-lo-tx:#586156; /* laag <50% */
  --conf-fill:#3E7B54; --conf-fill-mid:#7FA98C; --conf-track:#D7DECF; /* betrouwbaarheids-segmentbalk */
  --bd-hoog:#3E7B54; --bd-middel:#7FA98C; --bd-laag:#B6C3AB; --bd-geen:#DAD3BF; /* bulk-breakdown */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body);
  color: var(--ink-text);
  background: var(--bg);
  line-height: 1.45;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.mono { font-family: var(--mono); font-feature-settings:"tnum"; }
.tnum, td.num, th.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---------------- Login ---------------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login__hero {
  position: relative; overflow: hidden; color: #E9E0C8; padding: 54px 56px;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, var(--ink), #16231F 60%, #12201C);
}
.login__hero:before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(620px 480px at 82% -8%, rgba(175,141,51,.22), transparent 60%),
    radial-gradient(520px 420px at -10% 108%, rgba(126,160,140,.22), transparent 60%);
}
.login__hero > * { position: relative; z-index: 1; }
.login__hero h1 {
  font-family: var(--disp); font-weight: 500; font-size: 44px; line-height: 1.05;
  margin: auto 0 14px; max-width: 15ch; color: #fff;
}
.login__hero h1 em { font-style: italic; color: var(--gold-light); }
.login__hero p { margin: 0 0 30px; max-width: 42ch; color: #A6B0A6; font-size: 15.5px; }
.brandline { display: flex; align-items: center; gap: 13px; }
.brandline b { font-family: var(--disp); font-weight: 500; font-size: 27px; line-height: 1.04; letter-spacing: -.005em; color: #EFE5CC; }
.brandline span { display: block; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #A6B0A6; margin-top: 3px; }
.herofacts { display: flex; gap: 30px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
.herofacts b { font-family: var(--disp); font-size: 25px; color: #fff; display: block; font-variant-numeric: tabular-nums; }
.herofacts span { font-size: 11.5px; color: #A6B0A6; letter-spacing: .04em; }
.login__form { display: flex; align-items: center; justify-content: center; padding: 40px; }
.loginbox { width: 100%; max-width: 360px; }
.loginbox h2 { font-family: var(--disp); font-weight: 600; font-size: 26px; margin: 0 0 4px; color: var(--ink); }
.loginbox .sub { margin: 0 0 24px; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 15px; }
.field span { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); font-weight: 700; }
.field input {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: .15s;
}
.field input:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.primary {
  border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--ink); color: #fff;
  font-weight: 700; padding: 12px 16px; transition: .15s; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.primary:hover { background: #16241F; }
.primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.primary.block { width: 100%; }
.error { margin: 0 0 14px; padding: .6rem .75rem; background: var(--coral-soft); color: #8A352C; border-radius: var(--radius-sm); font-size: .9rem; }
.loginhint { margin-top: 18px; font-size: 12px; color: var(--faint); text-align: center; line-height: 1.6; }

/* ---------------- App shell ---------------- */
.swan { flex: none; }
/* Zijbalkcontract v1: vaste voet, uitsluitend de navigatielijst scrolt. */
.app { --env-band-h: 0px; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: 1fr; min-height: 100vh; }
.app.has-band { --env-band-h: 22px; grid-template-rows: 22px 1fr; }
.env-band { grid-column: 1 / -1; position: sticky; top: 0; z-index: 31; height: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }
.env-band.env-stg { background: var(--coral); }
.env-band.env-dev { background: #4A5A55; }
.env-band .env-host { font-size: 10.5px; opacity: .9; }
.side { background: linear-gradient(184deg, var(--ink), #12201C); color: var(--on-dark); display: flex; flex-direction: column; position: sticky; top: var(--env-band-h); height: calc(100vh - var(--env-band-h)); height: calc(100dvh - var(--env-band-h)); min-width: 0; min-height: 0; padding: 14px 13px 12px; z-index: 7; }
.side__panel { display: contents; }
.side__brand { display: flex; flex: none; align-items: center; gap: 11px; height: 54px; padding: 4px 8px 10px; text-decoration: none; border-radius: var(--radius-sm); }
.brandmark-static { display: block; flex: none; }
.side__brand b { font: 500 20px/1.05 var(--disp); color: var(--cream); letter-spacing: -.005em; display: block; }
.side__brand span { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 3px; }
.scope { position: relative; flex: none; margin: 0 4px 8px; }
.scopepill, .scopeplain { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 0 12px; color: #fff; font: 600 13px/20px var(--body); }
.scopepill { display: flex; align-items: center; gap: 8px; min-height: 40px; text-align: left; cursor: pointer; }
.side:not([data-js]) .scopepill { display: none; }
.scopeplain { padding: 10px 12px; overflow-wrap: anywhere; }
.scopeplain a { display: block; color: inherit; }
.scopepill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--willow); box-shadow: 0 0 0 3px rgba(62,123,84,.28); flex: none; }
.scopepill .val { min-width: 0; flex: 1; }
.side[data-js] .scopepill .val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scopepill .ic { width: 14px; height: 14px; flex: none; transition: transform .14s; }
.scopepill[aria-expanded="true"] .ic { transform: rotate(180deg); }
.scopepop { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; z-index: 10; padding: 12px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow-wrap: anywhere; }
.scopepop .lab { color: var(--faint); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.scopepop dl { margin: 8px 0; font-size: 13px; }
.scopepop dt { color: var(--muted); font-size: 11px; margin-top: 8px; }
.scopepop dd { margin: 0; font-weight: 600; }
.scopepop a { display: flex; align-items: center; min-height: 40px; color: var(--ink); font-size: 12px; font-weight: 600; }
.sidenav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.navgrp { margin: 2px 0 4px; }
.navgrp__hd { width: 100%; min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 4px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--on-dark-muted); }
.navgrp__hd .lab { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 9.5px/1.5 var(--body); letter-spacing: .15em; text-transform: uppercase; }
button.navgrp__hd { cursor: pointer; transition: color .14s, background .14s; }
button.navgrp__hd:hover { background: rgba(255,255,255,.05); color: #fff; }
.navgrp__hd .ic { width: 14px; height: 14px; flex: none; transition: transform .14s; }
.navgrp__hd[aria-expanded="false"] { color: var(--on-dark); }
.navgrp__hd[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.navgrp__mark, .navgrp__badge { display: none; flex: none; }
.navgrp__hd[aria-expanded="false"] .is-on { display: block; }
.navgrp__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.navgrp__items[hidden], .scopepop[hidden], .acctmenu[hidden] { display: none; }
.nav { position: relative; width: 100%; display: flex; align-items: center; gap: 11px; border: 0; background: transparent; color: #C9D2C4; min-height: 34px; padding: 7px 12px; border-radius: 9px; text-align: left; font: 600 13.5px/20px var(--body); text-decoration: none; transition: color .14s, background .14s; }
.nav:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav.on { background: rgba(175,141,51,.18); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav .ic { width: 17px; height: 17px; flex: none; opacity: .92; }
.nav > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbadge, .navgrp__badge { flex: none; margin-left: auto; font: 800 8.5px/1.5 var(--body); letter-spacing: .08em; padding: 2px 6px; border-radius: 999px; background: rgba(175,141,51,.24); color: var(--gold-light); }
.navgrp__badge { padding: 1px 6px; }
.side__foot { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 8px; }
.side__foot .logout { display: flex; flex: none; align-items: center; gap: 9px; min-height: 34px; padding: 0 12px; border-radius: 9px; color: #C9D2C4; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.side__foot .logout .ic { width: 17px; height: 17px; flex: none; }
.side__foot .logout:hover { background: rgba(255,255,255,.05); color: #fff; }
.side__host { min-width: 0; margin-left: auto; font-size: 10px; color: var(--on-dark-muted); }
.side__host.env-ind { flex-wrap: nowrap; }
.side__ver { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: var(--env-band-h); z-index: 6; background: rgba(246,242,230,.86); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border-bottom: 1px solid var(--hair); padding: 12px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top__l { min-width: 0; overflow-wrap: anywhere; }
.top .crumb { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.top h1 { margin: 0; font: 600 20px/1.2 var(--disp); color: var(--ink); }
.top__r { min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.userchip { min-width: 0; max-width: 260px; display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; min-height: 36px; color: var(--ink); }
.userchip:hover { background: var(--surface-2); }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, var(--willow), var(--ink)); color: #fff; font-size: 11px; font-weight: 700; }
.userchip .stack { min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.userchip .nm { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .rl { font-size: 10px; color: var(--muted); }
.userchip .ic { width: 12px; height: 12px; color: var(--muted); flex: none; transition: transform .14s; }
.userchip[aria-expanded="true"] .ic { transform: rotate(180deg); }
.acctmenu { position: absolute; right: 20px; top: calc(100% + 6px); width: 260px; max-width: calc(100vw - 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; overflow-wrap: anywhere; }
.accountplain { max-width: 260px; font-size: 12px; overflow-wrap: anywhere; }
.accountplain a { display: block; min-height: 44px; }
.acctmenu .who { padding: 8px 10px; color: var(--muted); font-size: 12px; }
.acctmenu .who b { display: block; color: var(--ink); font-size: 13px; }
.acctmenu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--hair); }
.acctmenu [role="menuitem"] { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ink); text-decoration: none; }
.acctmenu [role="menuitem"]:hover { background: var(--surface-2); }
.acctmenu .ic { width: 17px; height: 17px; flex: none; }
.acctmenu .envline { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.acctmenu .env-dev .env-code { background: #4A5A55; }
.side :is(a, button):focus-visible, .acctmenu [role="menuitem"]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.side .side__brand:focus-visible, .side .scopepill:focus-visible, .userchip:focus-visible, .langtoggle a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.content { padding: 24px 26px 70px; max-width: 1320px; width: 100%; }

/* ---------------- Gedeeld: tabel vs kaarten -----------------------------------
   S06-contract (R4, gemeten onderbouwing reviewtoets §2.4): de kaart<->tabel-
   grens ligt op 600px. Alleen de boekingenlijst gebruikt dit patroon nog. */
.as-cards { display: none; }
@media (max-width: 599px) {
  .as-table { display: none; }
  .as-cards { display: grid; }
}

/* ---------------- Vandaag: dagkaarten (mobiel/tablet) ---------------- */
.day-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .day-cards { grid-template-columns: 1fr; } }
.day-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 12px 14px; min-width: 0;
}
.day-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-card__time { font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.day-card__name { font-weight: 600; margin: 6px 0 4px; color: var(--ink); overflow-wrap: anywhere; }
.day-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.day-card__amt { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hair); margin-top: 8px; padding-top: 7px; }
.day-card__amt .k { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.day-card__amt .v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.day-card.is-cancelled { opacity: .62; }
/* "nu"-lijn tussen de kaarten: zelfde beeldtaal als .wal-nowline aan de steiger */
/* tekst in brass-700 (4.5:1+ op paper; gold-deep haalde 3.2:1 - review F6); de lijn blijft goud */
.day-now { display: flex; align-items: center; gap: 10px; color: var(--brass-700); font: 700 11px var(--mono); letter-spacing: .05em; margin: 2px 0; }
.day-now::before, .day-now::after { content: ""; flex: 1; border-top: 1px solid var(--gold); opacity: .45; }
.day-cards .day-now { grid-column: 1 / -1; }

/* ---------------- Vandaag: daybar ---------------- */
.daybar { display: flex; align-items: center; gap: .6rem; margin-bottom: 18px; flex-wrap: wrap; }
.daygroup { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.daygroup .ghost { border: 0; border-radius: 0; background: transparent; }
.daygroup .ghost:hover { background: var(--surface-2); color: var(--teal-700); }
.daygroup .bs-field__text { border: 0; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); padding: .5rem .7rem; background: #fff; font-variant-numeric: tabular-nums; }
.daygroup .bs-field__text:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--teal-soft); }
.ghost {
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink-text); font-weight: 600; transition: .14s;
}
.ghost:hover { border-color: var(--teal); color: var(--teal-700); }
.ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.today-btn { font-weight: 700; }
.daybar__spacer { flex: 1; }
a.ghost { text-decoration: none; display: inline-flex; align-items: center; }
.day { width: 100%; }

/* ---------------- KPI strip (today: .summary/.stat) ---------------- */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 15px; margin: 0 0 22px; }
.stat {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 17px;
}
.stat:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--teal); }
.summary .stat:nth-child(2):after { background: var(--brass); }
.summary .stat:nth-child(3):after { background: var(--willow); }
.stat .k { color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; text-transform: none; }
.stat .v { font-family: var(--disp); font-weight: 600; font-size: 30px; line-height: 1.05; color: var(--ink); margin-top: 7px; font-variant-numeric: tabular-nums; }

/* ---------------- Tables ---------------- */
/* overflow-x:auto i.p.v. hidden: een te brede tabel wordt scrollbaar binnen de kaart
   in plaats van geklemd/afgeknipt. Geen sticky thead of uitstekende popovers in deze
   wrap (focusring in de lijst is inset), dus veilig; scrollbar-width dempt de
   permanente Windows-scrollbalk in de onderradius. */
.table-wrap { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-weight: 800; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--hair); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; }
td.time { font-family: var(--mono); white-space: nowrap; color: var(--ink-text); }
.faint { color: var(--faint); }

/* status pills (booking status) */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: .15rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.pill.booked { background: var(--willow-soft); color: #2C5A3D; }
.pill.cancelled { background: var(--coral-soft); color: #8A352C; }
.pill.refunded, .pill.partially_refunded { background: var(--brass-soft); color: #7E4E0E; }

.note { color: var(--muted); padding: 2.2rem .2rem; text-align: center; }

/* ---------------- Update / installer ---------------- */
.panel { display: flex; gap: .8rem; margin: 0 0 18px; flex-wrap: wrap; }
.panel-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 15px;
}
.panel-card .h2, .panel-card h2 { margin: 0 0 .3rem; font-size: 1.05rem; font-family: var(--disp); font-weight: 600; color: var(--ink); }
.muted { color: var(--muted); font-size: .9rem; }
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 32px 28px; text-align: center;
  background: var(--surface-2); margin: 12px 0; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone.dragover { border-color: var(--teal); background: var(--teal-soft); }
.dropzone .di { width: 30px; height: 30px; color: var(--teal); }
.dropzone .dt { font-weight: 700; margin-top: 8px; }
.dropzone input[type=file] { margin-top: 12px; }
.pathnote { background: var(--plum-soft); border: 1px solid #C9DBE0; border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12.5px; color: #2C5360; }
.pathnote code { font-family: var(--mono); background: #fff; padding: 1px 6px; border-radius: 5px; color: #2C5360; }
.ver-line { margin: .8rem 0 .2rem; }
.ver-line strong { font-family: var(--mono); color: var(--ink); }
.filelist { margin: .3rem 0 .2rem; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; }
.filelist li { margin: .12rem 0; }
details summary { cursor: pointer; color: var(--teal-700); font-size: .9rem; font-weight: 600; }

/* ---------------- Omzet ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; margin: 0 0 20px; }
.fld { display: flex; flex-direction: column; gap: .3rem; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 800; }
.fld select, .fld input {
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink-text); font-weight: 500;
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; min-width: 8.5rem;
}
.fld select:focus-visible, .fld input:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.omz-reset { min-height: 44px; }
.omz-reset[hidden] { display: none; }
.apply-btn { padding: .6rem 1.3rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 16px; }
.kpi:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--teal); }
.kpi .k { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.kpi .v { font-family: var(--disp); font-size: 26px; font-weight: 600; margin-top: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-strong { background: var(--ink); border-color: var(--ink); }
.kpi-strong:after { background: var(--brass); }
.kpi-strong .k { color: #A6B0A6; }
.kpi-strong .v { color: #fff; }

.bar-col { width: 38%; }
.bar-track { background: var(--surface-2); border-radius: 999px; height: 10px; width: 100%; overflow: hidden; }
.bar-fill { background: var(--teal); border-radius: 999px; height: 10px; min-width: 2px; }

/* ---------------- Responsive ----------------
   Canon (S06 responsive-contract, BL-0044): mobiel <600 (tabbar onderin,
   kaarten), 600-1023 icoonrail-sidebar 72px, >=1024 volledige sidebar (250px).
   Component-omslagen van oudere pagina's (omzet-grid 900, kolommen 880)
   blijven op hun bestaande punt. */

/* Rail: dezelfde bestemmingen, altijd open, labels zonder hover. */
@media (min-width: 600px) and (max-width: 1023px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .side { padding: 10px 4px 8px; }
  .side__brand { justify-content: center; padding: 0; gap: 0; height: 44px; }
  .side__brand svg { width: 34px; height: 26px; }
  .side__brand > div, .scope, .navgrp__hd { display: none; }
  .navgrp { border-top: 1px solid rgba(255,255,255,.09); padding: 4px 0; }
  .navgrp:first-child { border-top: 0; }
  .navgrp__items[hidden] { display: block; }
  .nav { flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 2px; gap: 3px; }
  .nav .ic { width: 20px; height: 20px; }
  .nav > span:not(.navbadge) { font-size: 9px; line-height: 1.15; text-align: center; max-width: 70px; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .nav .navbadge { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; padding: 0; font-size: 0; background: var(--gold); }
  .side__foot { flex-direction: column; gap: 6px; align-items: stretch; padding-top: 6px; }
  .side__foot .logout { flex-direction: column; justify-content: center; gap: 3px; padding: 0; min-height: 44px; font-size: 9px; line-height: 1.15; }
  .side__foot .logout .ic { width: 20px; height: 20px; }
  .side__host { justify-content: center; margin-left: 0; min-height: 24px; }
  .side__host .env-host { display: none; }
}
@media (max-width: 1023px) {
  .top { position: relative; top: auto; }
  .userchip { min-width: 44px; min-height: 44px; }
  .userchip .stack { display: none; }
  .login { grid-template-columns: 1fr; }
  .login__hero { display: none; }
}
/* De app gebruikt document-scroll; de tabbar blijft onderin het venster. */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); border-top: 1px solid rgba(255,255,255,.1); padding-bottom: env(safe-area-inset-bottom); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tabbar .tab { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 3px 7px; border: 0; background: transparent; text-decoration: none; color: #C9D2C4; font: 600 10px/1.2 var(--body); cursor: pointer; }
.tabbar .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar .tab .ic { width: 20px; height: 20px; flex: none; }
.tabbar .tab.on { color: #fff; box-shadow: inset 0 3px 0 var(--gold); }
.tabbar__more[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.06); }
.tabbar .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.tabbar__more:disabled { display: none; }
@media (max-width: 599px) {
  html { scroll-padding-top: 90px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .app.has-band { grid-template-rows: 22px auto 1fr; }
  .side { height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 6px 10px; z-index: 30; }
  .side__brand { height: 44px; padding: 0 4px 0 2px; }
  .side__brand svg { width: 34px; height: 26px; }
  .side__brand b { font-size: 18px; }
  .side__brand span { display: none; }
  .side__panel { display: flex; flex-direction: column; width: 100%; min-width: 0; height: min(640px, calc(100dvh - var(--env-band-h) - 176px - env(safe-area-inset-bottom))); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(184deg, var(--ink), #12201C); border-top: 1px solid rgba(255,255,255,.09); }
  .side[data-js] .side__panel { display: none; }
  .side[data-js].side--open .side__panel { display: flex; position: absolute; top: 100%; left: 0; right: 0; }
  .scopepill, .navgrp__hd, .side__foot .logout { min-height: 44px; }
  .nav { min-height: 44px; padding: 10px 12px; }
  .side__host { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .side__host .env-host { display: inline; }
  .side__ver { display: inline; font-family: var(--mono); }
  .top h1 { font-size: 18px; }
  .tabbar { display: grid; }
  .app .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .daybar .daygroup { flex: 1 1 auto; display: flex; }
  .daygroup .bs-field__text { flex: 1 1 auto; min-width: 0; }
}
@media (pointer: coarse), (max-width: 1023px) {
  .app .langtoggle a, .scopepop a, .scopeplain a, .acctmenu [role="menuitem"] { min-height: 44px; }
}
@media (pointer: coarse) {
  .nav, button.navgrp__hd, .scopepill, .userchip, .side__foot .logout { min-height: 44px; }
}

/* tablet: KPI-strips in een rustig 2x2-raster (auto-fit geeft hier 3+1-wees) */
@media (min-width: 601px) and (max-width: 859px) {
  .summary, .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .content { padding: 16px 14px 60px; }
  /* blur op een sticky element is duur op mobiel en pre-18-Safari rendert hem
     niet: achtergrond opaker en filter uit. */
  .top { padding: 12px 14px; background: rgba(246,242,230,.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .summary, .kpis { grid-template-columns: 1fr 1fr; }
  /* grote sierbedragen passen anders niet in een halve kolom (knip op "€ 1.490,00") */
  .stat .v { font-size: 24px; }
  .kpi .v { font-size: 22px; }
  .col-product { display: none; }
  .login__form { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------- Topbar: taalschakelaar + gebruiker ---------------- */
.langtoggle { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow-sm); }
.langtoggle a { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); text-decoration: none; letter-spacing: .03em; }
.langtoggle a:hover { color: var(--ink); }
.langtoggle a.on { background: var(--ink); color: #fff; }
.env-ind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.env-code { flex: none; font-weight: 800; font-size: 9.5px; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; color: #fff; line-height: 1.6; }
.env-host { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 10px; }
.env-prd .env-code { background: #3E7B54; }   /* productie: groen */
.env-stg .env-code { background: #B0463B; }   /* staging: rood */
.env-dev .env-code { background: rgba(255,255,255,.16); color: #E9E0C8; }  /* dev/lokaal: neutraal */

/* ---------------- KPI sub-note + vierde accentkleur ---------------- */
.subnote { margin-top: 11px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 9px; font-size: 11.5px; color: var(--muted); }
.summary .stat:nth-child(4):after { background: var(--plum); }

/* ---------------- Dagrooster: boekingsnummer + boottype-chip ---------------- */
.ref { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.boatchip { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.boatchip .bc-code { display: inline-grid; place-items: center; min-width: 23px; height: 22px; padding: 0 5px; border-radius: 6px; font-family: var(--mono); font-weight: 700; font-size: 11px; color: #fff; }
.boatchip.t-A .bc-code { background: var(--teal); }
.boatchip.t-B .bc-code { background: var(--willow); }
.boatchip.t-C .bc-code { background: var(--brass); }
.boatchip.t-W .bc-code { background: var(--plum); }

/* ---------------- Live-indicator bij de dagbalk ---------------- */
.livepill { display: inline-flex; align-items: center; gap: 7px; background: var(--willow-soft); color: #2C5A3D; font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; }
.livepill:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--willow); }
.livepill.hidden { display: none; }

/* S06 responsive-contract: de kanaal-kolom vervalt onder 1280px (lijst). */
@media (max-width: 1279px) {
  .col-channel { display: none; }
}

/* Dropzone: verborgen invoer, gecentreerde knop, bestandsnaam eronder */
.filehidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.filebtn { display: inline-block; margin-top: 14px; padding: 9px 17px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.filebtn:hover { background: #16241F; }
.filehidden:focus-visible + .filebtn { box-shadow: 0 0 0 3px var(--teal-soft); }
.filename { margin-top: 11px; font-size: 12.5px; color: var(--faint); }
.filename.has { color: var(--ink); font-weight: 600; font-family: var(--mono); }

/* Release notes: titel, kopieerknop, scrollbaar (~15 regels) */
.changelog-scroll { max-height: 22rem; overflow-y: auto; margin-top: 6px; padding-right: 6px; }
.changelog-scroll::-webkit-scrollbar { width: 8px; }
.changelog-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.changelog-scroll::-webkit-scrollbar-thumb:hover { background: var(--faint); }
.rel { padding: 12px 2px; border-bottom: 1px solid var(--hair); }
.rel:first-child { padding-top: 4px; }
.rel:last-child { border-bottom: 0; }
.rel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rel__title { font-weight: 700; color: var(--ink); line-height: 1.3; }
.rel__meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.copybtn { flex: none; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 8px; padding: 5px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: .15s; white-space: nowrap; }
.copybtn:hover { border-color: var(--teal); color: var(--teal-700); }
.copybtn.ok { background: var(--willow-soft); border-color: var(--willow); color: #2C5A3D; }

/* ============ Omzet: tegels, overzichten, jaargrafiek ============ */
/* KPI-accentkleuren per tegel */
.kpi--teal:after { background: var(--teal); }
.kpi--brass:after { background: var(--brass); }
.kpi--willow:after { background: var(--willow); }
.kpi--coral:after { background: var(--coral); }

/* twee kolommen voor de overzichtskaarten */
.omzet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.omzet-grid > * { min-width: 0; }

.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card__sub { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }

/* uitsplitsingsrijen (boottype/land/kanaal) */
.brk { display: flex; flex-direction: column; gap: 15px; }
.brk__row { border-radius: 9px; padding: 2px; }
.brk__row--click { cursor: pointer; transition: background .14s; }
.brk__row--click:hover { background: var(--surface-2); }
.brk__row--click:hover .brk__name { color: var(--teal-700); }
.brk__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.brk__lab { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brk__name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brk__vals { display: flex; align-items: baseline; gap: 12px; flex: none; }
.brk__amt { font-family: var(--disp); font-weight: 600; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.brk__pct { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

.badge { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; font-family: var(--mono); font-weight: 700; font-size: 11px; color: #fff; flex: none; }
.badge.t-A { background: var(--teal); }
.badge.t-B { background: var(--willow); }
.badge.t-C { background: var(--brass); }
.badge.t-W { background: var(--plum); }
.badge--country { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* gekleurde balken per boottype */
.bar-fill.f-A { background: var(--teal); }
.bar-fill.f-B { background: var(--willow); }
.bar-fill.f-C { background: var(--brass); }
.bar-fill.f-W { background: var(--plum); }

/* maandgrafiek (verticale balken, horizontaal scrollbaar met pijlen) */
.barchart { position: relative; padding-top: 6px; }
.barchart__view { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding-bottom: 2px; }
.barchart__row { display: flex; align-items: flex-end; gap: 6px; min-height: 214px; padding: 0 2px; }
.bcol { flex: 1 0 36px; min-width: 36px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.bbar { width: 100%; max-width: 40px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--teal), var(--deep)); min-height: 3px; transition: filter .12s; }
.bcol:hover .bbar { filter: brightness(1.1); }
.blab { font-size: 11px; color: var(--muted); margin-top: 8px; white-space: nowrap; }

/* scrollpijlen voor de tijdlijn (alleen zichtbaar als het niet past) */
.chartnav { position: absolute; top: calc(50% - 17px); display: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: var(--shadow); z-index: 2; transition: opacity .14s, transform .12s, background .12s; }
.chartnav svg { width: 16px; height: 16px; display: block; }
.chartnav--prev { left: -8px; }
.chartnav--next { right: -8px; }
.chartnav:hover { transform: scale(1.07); background: var(--surface-2); }
.chartnav:disabled { opacity: .3; cursor: default; transform: none; box-shadow: var(--shadow-sm); }
.barchart--scroll .chartnav { display: inline-flex; }

/* jaartallen boven de grafiek */
.yearpills { display: inline-flex; flex-wrap: wrap; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow-sm); }
.yp { border: 0; background: transparent; color: var(--muted); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .14s; }
.yp:hover { color: var(--ink); }
.yp.on { background: var(--ink); color: #fff; }

@media (max-width: 900px) {
  .omzet-grid { grid-template-columns: 1fr; }
}

/* compacte balkwaarde op touch (title-tooltip is daar onbereikbaar) */
.bval-mini { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* ---- Omzet: mobiele filter-disclosure + responsieve filtergrids ---- */
.omz-filtertoggle { display: none; }
@media (min-width: 601px) and (max-width: 1023px) {
  /* tablet: net 3-koloms raster i.p.v. hoge flex-wrap */
  .filters--omzet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
  .filters--omzet .fld select, .filters--omzet .fld input { width: 100%; min-width: 0; }
  .filters--omzet .omz-reset { grid-column: 1 / 3; justify-self: end; }
  .filters--omzet .apply-btn { grid-column: 3 / -1; justify-self: end; }
}
@media (max-width: 600px) {
  .omz-filtertoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 44px; margin: 0 0 14px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--ink-text); font: 600 14px var(--body); cursor: pointer;
  }
  .omz-filtertoggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
  .omz-filtertoggle .cnt {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: 999px; background: var(--ink); color: var(--cream); font: 700 12px var(--mono);
  }
  .omz-filtertoggle .cnt[hidden] { display: none; } /* author-display verslaat [hidden] anders */
  /* standaard ingeklapt: KPI's direct in beeld; open = raster met van/tot als
     enig paar en alle selects (lange NL/DE-labels) over de volle breedte */
  .filters--omzet { display: none; }
  .filters--omzet.open { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters--omzet .fld select, .filters--omzet .fld input { width: 100%; min-width: 0; }
  .filters--omzet .fld { grid-column: 1 / -1; }
  .filters--omzet .fld:nth-of-type(2) { grid-column: 1 / 2; }
  .filters--omzet .fld:nth-of-type(3) { grid-column: 2 / 3; }
  .filters--omzet .omz-reset { grid-column: 1 / -1; width: 100%; }
  /* alle velden laden automatisch bij wijziging; de terugval-knop is hier ruis */
  .filters--omzet .apply-btn { display: none; }
}

/* selectie-markering: in de overzichten een semitransparante rode balk */
.brk__row--on, .brk__row--on:hover { background: rgba(176, 70, 59, 0.13); }
.brk__row--on .brk__name { color: var(--coral); }
/* in de grafiek: de gekozen balk en maand diep rood, met bedrag en aandeel erboven */
.bcol--on .bbar { background: linear-gradient(180deg, var(--coral), #8A352C); }
.bcol--on .blab { color: var(--coral); font-weight: 700; }
.bval { font-size: 11px; font-weight: 700; color: var(--coral); white-space: nowrap; margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* =============================================================================
   Amount retrofit / herstelde bedragen - componenten. Tokens staan in :root.
   Markup-contract: docs/design/amount-retrofit-handoff/. "Hersteld" is een rustige
   verrijking (sage), bewust anders dan de amber aandacht-chip (.att-chip).
   ========================================================================== */
.amount-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
/* vaste 78px-slots zodat de bubble<->pil-toggle in de lijst niet reflowt */
.amount-cell__marker { width: 78px; display: inline-flex; justify-content: flex-end; align-items: center; }
.amount-cell__value { width: 78px; text-align: right; font-family: var(--mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* het [hidden]-attribuut moet de class-display verslaan (gelijke specificity, anders blijft de pil zichtbaar) */
.hersteld-bubble[hidden], .hersteld-pill[hidden] { display: none; }
.amount-cell__value.muted { color: var(--faint); }
.amount-cell .approx { color: var(--faint); }

/* hersteld-marker (bubble in rust) + pil (uitgevouwen / in de flyout), 3 tinten */
.hersteld-bubble { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--body); cursor: pointer; position: relative;
  background: var(--hersteld-hi-bg); border: 1px solid var(--hersteld-hi-bd); color: var(--hersteld-hi-tx); }
.amount-cell[data-restored="mid"] .hersteld-bubble { background: var(--hersteld-md-bg); border-color: var(--hersteld-md-bd); color: var(--hersteld-md-tx); }
.amount-cell[data-restored="low"] .hersteld-bubble { background: var(--hersteld-lo-bg); border-color: var(--hersteld-lo-bd); color: var(--hersteld-lo-tx); }
.hersteld-bubble:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.hersteld-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 7px; border-radius: 999px;
  font: 700 11.5px var(--body); white-space: nowrap; cursor: pointer;
  background: var(--hersteld-hi-bg); border: 1px solid var(--hersteld-hi-bd); color: var(--hersteld-hi-tx); }
.hersteld-pill::before { content: "\2248"; font-size: 11px; opacity: .85; }
.amount-cell[data-restored="mid"] .hersteld-pill { background: var(--hersteld-md-bg); border-color: var(--hersteld-md-bd); color: var(--hersteld-md-tx); }
.amount-cell[data-restored="low"] .hersteld-pill { background: var(--hersteld-lo-bg); border-color: var(--hersteld-lo-bd); color: var(--hersteld-lo-tx); }
/* Bevestigd hersteld bedrag (Sander 2026-07-11): de herkomst blijft ALTIJD zichtbaar, maar in
   HARD groen i.p.v. het zachtgroen van "nog te bevestigen"; geen "~"/"≈"-schattingsteken meer
   (een bevestigd bedrag is een vastgezette waarde, geen schatting). Vulling = de bestaande
   hersteld-groen --hersteld-hi-tx (#2E5E45) met crème tekst: WCAG-AA-conform (~6:1) voor de kleine
   vette "H"/"hersteld"; het lichtere --willow zou onder 4.5:1 zakken. Bestaande tokens, geen nieuw palet. */
.amount-cell[data-restored="confirmed"] .hersteld-bubble,
.amount-cell[data-restored="confirmed"] .hersteld-pill { background: var(--hersteld-hi-tx); border-color: var(--hersteld-hi-tx); color: var(--cream); }
.amount-cell[data-restored="confirmed"] .hersteld-pill::before { content: none; }

/* kandidaat (geen bedrag, wel herstelbaar) */
.amount-restore { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 9px; border-radius: 999px;
  min-height: 24px; box-sizing: border-box; /* WCAG 2.5.8: min. tikdoel 24px (echte actie) */
  font: 600 11.5px var(--body); background: transparent; border: 1px dashed #C2C9BC; color: var(--muted); cursor: pointer; }
.amount-restore::before { content: "\2248"; opacity: .8; }
.amount-restore:hover { border-color: var(--hersteld-lo-bd); color: var(--hersteld-hi-tx); }

/* betrouwbaarheidsband (flyout + bulk) */
.confidence { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 6px; }
.confidence__label { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font: 700 11.5px var(--body); background: var(--hersteld-hi-bg); border: 1px solid var(--hersteld-hi-bd); color: var(--hersteld-hi-tx); }
.confidence--mid .confidence__label { background: var(--hersteld-md-bg); border-color: var(--hersteld-md-bd); color: var(--hersteld-md-tx); }
.confidence--low .confidence__label { background: var(--hersteld-lo-bg); border-color: var(--hersteld-lo-bd); color: var(--hersteld-lo-tx); }
.confidence__bar { display: inline-flex; gap: 3px; }
.confidence__seg { width: 20px; height: 6px; border-radius: 3px; background: var(--conf-track); }
.confidence__seg.is-on { background: var(--conf-fill); }
.confidence__pct { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* herkomst-kaart (flyout) */
.provenance { background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 2px 14px 12px; }
.provenance__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #E4DEC9; }
.provenance__row:first-child { border-top: 0; }
.provenance__key { color: var(--faint); font: 700 10.5px var(--body); text-transform: uppercase; letter-spacing: .06em; }
.provenance__val { color: var(--ink-text); font-size: 13px; text-align: right; }
.provenance__note { font: 11.5px/1.4 var(--body); color: var(--faint); margin-top: 3px; }
.provenance-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 10px 13px; cursor: pointer; min-height: 44px; }
.provenance-toggle .caret::before { content: "\25B6"; color: var(--faint); font-size: 11px; }
.provenance-toggle[aria-expanded="true"] .caret::before { content: "\25BC"; }

/* bulk-breakdown (dialoog) */
.breakdown__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.breakdown__bar > .s-hoog { background: var(--bd-hoog); }
.breakdown__bar > .s-middel { background: var(--bd-middel); }
.breakdown__bar > .s-laag { background: var(--bd-laag); }
.breakdown__bar > .s-geen { background: var(--bd-geen); }
.breakdown__counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.breakdown__counter { background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 10px 11px; }
.breakdown__counter .n { font-family: var(--mono); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1; }
/* smal scherm: 4 tellers in 2x2 i.p.v. 1x4, zodat lange labels (Geen kandidaat) niet mid-woord breken */
/* handoff bulk-sheet <600: tellers 2x2 (was 420; mobiel-canon is 600) */
@media (max-width: 600px) { .breakdown__counters { grid-template-columns: repeat(2, 1fr); } }

/* drempel-segmented (bulk-dialoog) + meebewegend totaal */
.bk-seg-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.bk-seg-row .k { color: var(--faint); font-size: 12px; }
.bk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bk-seg-btn { appearance: none; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 12.5px var(--body); padding: 6px 13px; cursor: pointer; }
.bk-seg-btn:last-child { border-right: 0; }
.bk-seg-btn.on { background: var(--ink); color: #fff; }
#arBkTotal { font-size: 14px; color: var(--ink); }

/* bulk-knop in de donkere actiebalk (cream-vulling, geen goud) */
.bk-bulkbar .btn-restore-amounts { background: var(--cream); border: 1px solid var(--cream); color: var(--ink);
  font: 600 13.5px var(--body); padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.bk-bulkbar .btn-restore-amounts::before { content: "\2248"; font-size: 14px; }

/* filter "Bedrag" + hersteld-chip (goud raakt alleen de actieve filter-rand) */
.filter--amount.is-active { border: 1px solid var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.chip--restored { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px;
  font: 600 13px var(--body); background: var(--hersteld-hi-bg); border: 1px solid var(--hersteld-hi-bd); color: var(--hersteld-hi-tx); cursor: pointer; }
.chip--restored.is-inactive { background: transparent; border-color: var(--hersteld-lo-bd); color: var(--hersteld-lo-tx); }
.chip--restored .count { font-family: var(--mono); font-size: 12px; background: rgba(46, 94, 69, .16); padding: 1px 7px; border-radius: 999px; }

/* "Gratis": rustige neutrale chip voor een bewust 0-bedrag. Bewust GEEN amber (aandacht)
   en GEEN sage (hersteld): een gratis vaart is geen probleem en geen reconstructie. */
.chip--free { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font: 700 11.5px var(--body); background: var(--surface-2); border: 1px solid var(--hair); color: var(--muted); }

/* ---- Voorstel-blok (flyout, kandidaat) ---------------------------------- */
.amount-proposal { margin: 12px 0 4px; background: #EEF3EC; border: 1px solid #D2E0D4;
  border-radius: var(--radius-sm); padding: 14px; }
.amount-proposal__label { font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .08em; color: #3C6B4E; }
.amount-proposal__amount { font-family: var(--mono); font-size: 27px; font-weight: 600; color: var(--ink);
  margin: 5px 0 12px; letter-spacing: -.01em; }
.amount-proposal__amount .approx { color: var(--faint); }
.amount-proposal .confidence { margin-bottom: 14px; }
.amount-proposal__btn { width: 100%; justify-content: center; }
.amount-proposal__btn::before { content: "\2248"; opacity: .9; }

/* ---- Herkomst: open (voorstel) en harmonica (hersteld) ------------------- */
/* herkomst-titel: kop BINNEN de box (Voorstel), conform ontwerp */
.provenance-title { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 13px 0 2px; }
/* finance-acties: ruimte BOVEN de knoppen (ontwerp margin-top), niet eronder */
.amount-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.prov-tog__title { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--body);
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.prov-tog__title .amount-cell { justify-content: flex-start; }
.prov-tog__right { display: inline-flex; align-items: center; gap: 9px; }
.prov-tog__conf { font: 600 11px var(--body); color: var(--faint); }
.provenance-body { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.provenance-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
/* H-marker in de flyout is decoratief (geen knop): geen pointer-cursor */
/* flyout H-markering compacter (18px); de lijst-bubble blijft 21px */
.bk-card__row .hersteld-bubble, .prov-tog__title .hersteld-bubble { width: 18px; height: 18px; font: 700 10px/1 var(--body); }
/* de H in de disclosure-kop is decoratief (geen toggle); de Betaald-bubble is wel klikbaar */
.prov-tog__title .hersteld-bubble { cursor: default; }

/* Toetsenbordfocus: branded goud-zachte ring, consistent met de app en ook
   zichtbaar op de donkere bulk-balk (.btn-restore-amounts) en het actieve
   segment (.bk-seg-btn.on). De bubble heeft hierboven al een eigen regel. */
.amount-restore:focus-visible, .hersteld-pill:focus-visible, .bk-seg-btn:focus-visible,
.bk-bulkbar .btn-restore-amounts:focus-visible, .chip--restored:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }

@media (prefers-reduced-motion: reduce) { .hersteld-bubble, .hersteld-pill, .amount-restore, .chip--restored { transition: none; } }

/* ---- Migratiescherm (read-only grootboekstatus): statusbadges ---- */
.migr-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--hair); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.migr-badge.is-applied { background: var(--willow-soft); border-color: var(--willow-soft); color: var(--willow); }
.migr-badge.is-open { background: var(--coral-soft); border-color: var(--coral-soft); color: var(--coral); }
.migr-badge.is-extra { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.migr-legend { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

/* ---- Update-pagina: tabs + migratielijst met uitklap-details ---- */
.up-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--hair); margin: 4px 0 16px; }
.up-tab { appearance: none; background: none; border: 0; padding: 9px 2px; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.up-tab.on { color: var(--ink-text); font-weight: 600; border-bottom-color: var(--ink-text); }
.up-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); border-radius: 6px; }

.migr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.migr-env { margin-left: auto; font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.migr-env .env-ind { padding: 2px 9px; border-radius: 8px; }

.migr-list { border: 1px solid var(--hair); border-radius: var(--radius-sm); overflow: hidden; margin-top: 12px; }
.migr-item { border-bottom: 1px solid var(--hair); }
.migr-item:last-child { border-bottom: 0; }
.migr-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--ink-text); }
.migr-row:hover { background: var(--surface-2); }
.migr-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--teal-soft); }
.migr-chev { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--faint); transition: transform .15s ease; flex: 0 0 auto; }
.migr-row[aria-expanded="true"] .migr-chev { transform: rotate(90deg); }
.migr-row .migr-ver { font-family: var(--mono); font-weight: 600; min-width: 42px; font-size: 13px; }
.migr-row .migr-name { font-size: 14px; }
.migr-row .migr-badge { margin-left: auto; }
.migr-row .migr-when { font-size: 12px; color: var(--muted); min-width: 140px; text-align: right; white-space: nowrap; }
.migr-detail { padding: 2px 16px 16px 42px; background: var(--surface-2); border-top: 1px solid var(--hair); }
.migr-sum { font-size: 14px; line-height: 1.6; margin: .6rem 0 .8rem; color: var(--ink-text); }
.migr-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.migr-facts .fact { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 13px; }
.migr-facts .fact .fl { color: var(--muted); }
.migr-facts .fact .ok { color: var(--willow); font-weight: 600; }
.migr-facts .fact .warn { color: var(--coral); font-weight: 600; }
.migr-rollback { font-size: 13px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 10px; }
.migr-file { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 10px; }
.migr-legend .migr-hint { margin-left: auto; font-size: 12px; }

/* Update: versie-stat en cron-envbadge (voorheen inline styles; een media query
   kan inline styles niet overschrijven, dus classes). */
.up-verstat { flex: 0 0 auto; min-width: 210px; }
.cron-envbadge { padding: 1px 8px; border-radius: 6px; font-size: 11px; flex: 0 0 auto; }
@media (max-width: 600px) {
  .up-verstat { flex: 1 1 100%; min-width: 0; }
  .up-tabs { gap: 14px; }
  .up-tab { font-size: 14px; }
  /* migratie-/cronrij: datum zakt als tweede regel onder de naam (min-width:140px
     nowrap knelde de rij); badge blijft rechts op regel 1 */
  .migr-row { flex-wrap: wrap; }
  .migr-row .migr-when { min-width: 0; width: 100%; text-align: left; padding-left: 19px; }
}

/* ---- Update-pagina: Crons-tabblad (hergebruikt de migr-lijst/detail-structuur) ---- */
.cron-ic { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.migr-row .cron-name { font-size: 14px; }
.migr-row .cron-sched { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.cron-mono { font-family: var(--mono); font-size: 12px; word-break: break-all; color: var(--ink-text); }
.migr-legend .cron-legitem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.migr-legend .cron-legitem .cron-ic { width: 15px; height: 15px; }

/* ---------------- Rentarado merklaag (rebrand-handoff §4a/§4b) ----------------
   Lokale, additieve merk-CSS op bestaande tokens; geen component- of tokenwijziging.
   Bron: docs/design/rentarado-rebrand-handoff/HANDOFF.md. */

/* §4a — login-hero: eenmalige intro van het beeldmerk (inline SVG, geen JS). */
.brandline .rmark { display: block; flex: none; }
.rmark .hull-top,
.rmark .hull-bot { transform-box: fill-box; transform-origin: center; }
/* 'both' = houdt de eindstand vast; één keer, geen 'infinite' */
.rmark .hull-top { animation: rmark-in-top .8s cubic-bezier(.2,.7,.2,1) both; }
.rmark .hull-bot { animation: rmark-in-bot .8s cubic-bezier(.2,.7,.2,1) .12s both; }
@keyframes rmark-in-top { from { transform: translateX(-14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes rmark-in-bot { from { transform: translateX(14px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rmark .hull-top, .rmark .hull-bot { animation: none; }
}

/* Login-footer: juridische regel + domein onderaan de formulierkolom. Op korte
   viewports (klein landschap, open toetsenbord) verbergen, zodat hij nooit over
   de loginbox of de submit-knop valt. */
.login__form { position: relative; }
.login__legal { position: absolute; bottom: 14px; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--faint); }
.login__legal a { color: var(--muted); text-decoration: none; }
.login__legal a:hover { text-decoration: underline; }
@media (max-height: 620px) { .login__legal { display: none; } }

/* §4b — laadscherm: de merkdelen schuiven het kader uit en terug; gouden rail. */
.rload { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(175,141,51,.16), transparent 46%),
    radial-gradient(120% 90% at 12% 96%, rgba(120,150,120,.14), transparent 44%),
    linear-gradient(155deg, var(--ink), #14231F); }
.rload-mark { position: relative; width: 92px; height: 69px; overflow: hidden; }
.rload-mark svg { position: absolute; inset: 0; }
.rload-mark .hull-top { animation: rload-top 3.6s cubic-bezier(.85,0,.15,1) infinite; }
.rload-mark .hull-bot { animation: rload-bot 3.6s cubic-bezier(.85,0,.15,1) infinite; }
@keyframes rload-top { 0%,7%{transform:translateX(0)} 50%{transform:translateX(120px)}
  50.01%{transform:translateX(-120px)} 93%,100%{transform:translateX(0)} }
@keyframes rload-bot { 0%,7%{transform:translateX(0)} 50%{transform:translateX(-120px)}
  50.01%{transform:translateX(120px)} 93%,100%{transform:translateX(0)} }
.rload-name { font-family: var(--disp); font-size: 26px; letter-spacing: .02em; color: var(--cream); }
.rload-rail { position: relative; width: 180px; height: 3px; border-radius: 999px;
  background: rgba(239,229,204,.14); overflow: hidden; }
.rload-rail::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), transparent);
  animation: rload-rail 1.7s ease-in-out infinite; }
@keyframes rload-rail { 0%{transform:translateX(-110%)} 100%{transform:translateX(360%)} }
.rload-cap { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: rgba(239,229,204,.62); }
@media (prefers-reduced-motion: reduce) {
  .rload-mark .hull-top, .rload-mark .hull-bot { animation: none; }
  .rload-rail::after { animation: none; width: 55%; }
}

/* §4b — server-foutpagina's (paper-vlak; hergebruikt de bestaande .primary-knop).
   Gedeeld door 404.php en 403.php; alleen de code en de copy verschillen. */
.rerr { min-height: 100dvh; background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 56px 32px; }
.rerr-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; }
.rerr-name { font-family: var(--disp); font-size: 19px; color: var(--ink); }
.rerr-code { font-family: var(--disp); font-weight: 600; font-size: 88px; line-height: 1;
  color: var(--ink); letter-spacing: -.01em; }
.rerr-accent { width: 44px; height: 3px; border-radius: 999px; background: var(--gold); margin: 22px 0; }
.rerr-head { font-family: var(--disp); font-weight: 600; font-size: 24px; margin: 0 0 10px; color: var(--ink); }
.rerr-lead { margin: 0 0 30px; max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--ink-text); }
.rerr-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.rerr-actions a.primary { text-decoration: none; }
.rerr-legal { margin-top: 40px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: #9aa39e; }

/* ================= Touch-basis (plan mobile-tablet-optimization §3c) =================
   Staat ONDERAAN het bestand zodat deze regels bij gelijke specificiteit winnen van
   de basiscomponenten hierboven. Geldt voor touch (pointer:coarse) en smalle
   viewports; desktop met muis blijft pixel-gelijk.
   - form-controls font >=16px: dooft de iOS-zoom-bij-focus;
   - raakdoelen: 44px voor primaire acties, 40px voor kantoor-chrome. */
@media (pointer: coarse), (max-width: 1023px) {
  /* 16px op ALLE form-controls, incl. de paginaspecifieke selectors die anders op
     specificiteit winnen (formgrid/modal 14px, users 14-15px, pm 13-13.5px; review B2). */
  /* generiek vangnet; de module-specifieke overrides staan in het module-css
     ZELF (dat laadt na app.css en wint anders op cascade-orde - review F1) */
  .fld select, .fld input, select, textarea,
  input[type="text"], input[type="date"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"] { font-size: 16px; }
  .ghost { min-height: 44px; }
  .daygroup .ghost { min-width: 44px; }
  .side__brand { min-height: 44px; align-items: center; }
  .langtoggle a { display: inline-flex; align-items: center; min-height: 40px; min-width: 44px; justify-content: center; padding: 0 11px; }
  .chartnav { width: 44px; height: 44px; top: calc(50% - 22px); }
  .yp { min-height: 40px; padding: 6px 13px; }
  .copybtn { min-height: 40px; }
  .up-tab { min-height: 40px; }
  .migr-row { min-height: 44px; }
  /* kandidaat-chip "≈ herstellen": 24px in het handoff-ontwerp; het TIKVLAK moet
     >=44 zijn (::before is bezet door het ≈-glyph, ::after is vrij). */
  .amount-restore { position: relative; }
  .amount-restore::after { content: ""; position: absolute; inset: -10px; }
  /* idem voor de hersteld-pil en de drempel-segmented (handoff 06 §Touch: "óók
     caret, chips en segmented control"); ::before bezet, ::after vrij. */
  .hersteld-pill { position: relative; }
  .hersteld-pill::after { content: ""; position: absolute; inset: -11px; }
  .bk-seg-btn { min-height: 40px; }
}
/* anchors/focus nooit onder de sticky topbar laten schieten (>=1024 is .top sticky) */
@media (min-width: 1024px) {
  html { scroll-padding-top: 72px; }
}

/* Robuust bij vergrote systeemtekst -------------------------------------------
   De bedrag-cel heeft vaste 78px-slots (amount-retrofit-handoff: geen reflow bij
   de bubble<->pil-toggle). Bij vergrote systeemtekst past het bedrag daar niet
   meer in en duwde het de kaart/pagina breder. min-width behoudt de anti-reflow
   (de slot blijft minimaal 78px, dus bij normale tekst verandert er niets) en
   laat de cel alleen groeien als de tekst echt breder is. */
.amount-cell__marker, .amount-cell__value { width: auto; min-width: 78px; }
/* Update-pagina: tabs en kopieerknoppen mogen wikkelen bij grote tekst. */
.up-tabs { flex-wrap: wrap; row-gap: 4px; }
.rel__head { flex-wrap: wrap; }
/* Vergrote systeemtekst: de kandidaat-chip "~ herstellen" is een pil met vaste
   padding; bij grote tekst paste het label niet meer. Laat hem afbreken binnen de
   kaartbreedte i.p.v. de rij op te rekken. */
.amount-restore { max-width: 100%; white-space: normal; height: auto; }
/* Extreme tekstschaling (2x op 360px): grote sierbedragen en de kaartkop mogen
   afbreken/wikkelen i.p.v. hun kolom op te rekken. Bij standaardtekst raakt dit
   niets (de waarden passen dan ruim). */
.stat .v, .kpi .v, .subnote { overflow-wrap: anywhere; }
.day-card__head { flex-wrap: wrap; row-gap: 4px; }
.amount-restore { overflow-wrap: anywhere; }

/* ================= S06 Vandaag-cockpit (BL-0044, markup-contract §2) =================
   KPI-actietegels, readiness-banner, dagstatus-strip, dagtabel/kaarten met
   Nu-lijn. Classnamen volgen het markup-contract; kleuren/typografie via tokens. */

/* -- Readiness-banner (alleen <600px) -- */
.readiness { display: none; }
@media (max-width: 599px) {
  .readiness {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-radius: var(--radius); padding: 11px 13px; margin: 0 0 12px;
    font-weight: 600; font-size: 13.5px;
  }
  .readiness--ok { background: var(--willow-soft); color: #2C5A3D; border: 1px solid var(--willow); }
  .readiness--action { background: var(--brass-soft); color: var(--brass-700); border: 1px solid var(--brass); }
  .readiness p { margin: 0; }
}

/* -- Cockpit-blokken (0.3.93, besluit Sander 2026-08-03): 4 blokken i.p.v. 7 tegels.
   ① Nu op de wal (klok-cluster + Nu vrij + walknop)  ② Aandacht (getal + reden-chips)
   ③ Bezetting vandaag (één tijdsas)  ④ Omzet vandaag (geldrollen, gem. als sublijn).
   Sublabels zijn gewone gedempte tekst (geen chip-look); de pijl staat alleen op
   blokken die naar de boekingenlijst navigeren. -- */
.ckpis { display: grid; grid-template-columns: 1.45fr 1.15fr 1fr 1fr; gap: 12px; align-items: stretch; margin-bottom: 20px; }
.ckb { position: relative; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
       box-shadow: var(--shadow); padding: 13px 15px 12px; color: var(--ink-text); text-align: left; }
.ckb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
               border-radius: var(--radius) 0 0 var(--radius); background: var(--rail, var(--hair)); }
.ckb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ckb__label { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ckb__go { color: var(--faint); }
.ckb__go svg { width: 14px; height: 14px; display: block; }
.ckb__value { display: block; font-family: var(--disp); font-size: 26px; font-weight: 600; margin-top: 6px;
              color: var(--ink); font-variant-numeric: tabular-nums; }
.ckb__vsub { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ckb__sub { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
button.ckb, .ckb button { font: inherit; }
button.ckb { display: block; width: 100%; cursor: pointer; transition: transform .14s, box-shadow .14s; }
button.ckb:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
button.ckb:hover .ckb__go, .ckb__main:hover .ckb__go { color: var(--teal-700); }
button.ckb:focus-visible, .ckb__main:focus-visible, .nu-cell:focus-visible, .att-chips .c:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
/* ① Nu op de wal */
.ckb--nu { --rail: var(--teal); }
.ckb--nu .ckb__wal { font-size: 12px; font-weight: 600; color: var(--teal-700); text-decoration: none; white-space: nowrap; }
.ckb--nu .ckb__wal:hover { text-decoration: underline; }
.nu-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 7px; }
.nu-cell { border: 0; background: none; text-align: left; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.nu-cell:hover { background: var(--surface-2); }
.nu-cell .n { display: block; font-family: var(--disp); font-size: 23px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.nu-cell .t { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; margin-top: 1px; line-height: 1.25; }
.nu-cell--late .n, .nu-cell--late .t.late { color: var(--coral); }
.nu-vrij { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; margin-top: 8px; padding-top: 8px;
           border-top: 1px dashed var(--hair); font-size: 12px; color: var(--muted); }
.nu-vrij b { color: var(--ink); font-family: var(--mono); font-weight: 600; font-size: 12px; }
.nu-vrij .tt { display: inline-flex; align-items: center; gap: 4px; }
.nu-vrij .bc { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px;
               font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #fff; }
.nu-vrij .bc.t-A { background: var(--teal); } .nu-vrij .bc.t-B { background: var(--willow); }
.nu-vrij .bc.t-C { background: var(--brass); } .nu-vrij .bc.t-W { background: var(--plum); }
/* ② Aandacht */
.ckb--att.is-on { --rail: var(--coral); border-color: var(--coral); }
.ckb--att.is-on .ckb__label { color: var(--coral); }
.ckb--att .ckb__main { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 0; cursor: pointer; border-radius: 6px; }
.att-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.att-chips .c { border: 0; cursor: pointer; background: var(--surface-2); border-radius: 999px; padding: 3px 9px;
                font-size: 11.5px; font-weight: 600; color: var(--ink-text); }
.att-chips .c b { font-variant-numeric: tabular-nums; }
.att-chips .c:hover { background: var(--coral-soft); }
.att-chips .c.more { color: var(--muted); font-weight: 500; }
/* snelkoppeling naar bulk-herstel op Boekingen (0.3.94, optie A) */
.ckb__link { display: inline-block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
             color: var(--teal-700); text-decoration: none; }
.ckb__link:hover { text-decoration: underline; }
.ckb__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); border-radius: 4px; }
/* ③ Bezetting vandaag */
.ckb--occ { --rail: var(--willow); }
.occ2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
.occ2 .col { display: block; text-align: center; min-width: 0; }
.occ2 .bar { display: block; height: 34px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--hair); }
.occ2 .lbl { display: block; font-size: 10.5px; font-weight: 700; margin-top: 3px; color: var(--muted); }
.occ2 .cnt { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
/* ④ Omzet vandaag */
.ckb--geld { --rail: var(--brass); }
.ckb--geld .ckb__value { font-size: 24px; }
.geld-sub { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--hair); font-size: 12.5px; color: var(--muted); }
.geld-sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* responsief: 2 kolommen op tablet, stapelen op mobiel (geen snap-strip meer) */
@media (max-width: 1100px) { .ckpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ckpis { grid-template-columns: 1fr; gap: 9px; margin-bottom: 14px; } }
/* mobiel: horizontale snap-strip, compacte tegels (~78px) */
@media (max-width: 599px) {
  .kpis {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 9px;
    margin: 0 -14px 14px; padding: 2px 14px 6px; scrollbar-width: none;
  }
  .kpis::-webkit-scrollbar { display: none; }
  .kpis .kpi { flex: none; scroll-snap-align: start; min-width: 132px; max-width: 190px; padding: 10px 12px; }
  /* (de kpi__/occ__-subregels zijn vervallen met de cockpit-blokken van 0.3.93;
     de .kpis-snap-strip zelf blijft: Omzet gebruikt die container nog) */
}

/* -- Dagstatus-strip -- */
.daystrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.daystrip .pill--status {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  padding: 6px 13px 6px 11px; cursor: pointer; box-shadow: var(--shadow-sm);
  white-space: nowrap; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 600 12.5px var(--body);
}
.daystrip .pill--status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.daystrip .pill--status .pill__count { font-family: var(--mono); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.daystrip .pill--status[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.daystrip .pill--status[aria-pressed="true"] .dot { background: #fff !important; animation: none; }
.daystrip .pill--status:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.daystrip [data-status="expected"] .dot { background: var(--line); }
.daystrip [data-status="checkedin"] .dot { background: var(--plum); }
.daystrip [data-status="issued"] .dot { background: var(--brass); }
.daystrip [data-status="onwater"] .dot { background: var(--willow); animation: s06pulse 2.2s infinite; }
.daystrip [data-status="late"] .dot { background: var(--coral); animation: s06pulse 2.2s infinite; }
.daystrip [data-status="done"] .dot { background: var(--muted); }
.daystrip [data-status="cancelled"] .dot { background: var(--coral); }
.daystrip__reset { border: 0; background: transparent; color: var(--teal-700); font: 600 12.5px var(--body); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.daystrip__reset:hover { background: var(--surface-2); }
@keyframes s06pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* -- Dagtotalen-regel + tabelkop-sortering -- */
.totals-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 0 0 8px; flex-wrap: wrap; }
.totals-line .bk-spacer { flex: 1; }
.th-sort { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--teal-700); }
th[aria-sort="ascending"] .th-sort::after { content: "▲"; font-size: 8px; }
th[aria-sort="descending"] .th-sort::after { content: "▼"; font-size: 8px; }

/* -- Dagtabel: Nu-lijn, aandacht, klant-cel -- */
.s06-cards { display: none; }
@media (max-width: 599px) {
  .s06-table { display: none; }
  .s06-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
}
tr.now-line td { padding: 4px 14px; border-bottom: 1px solid var(--hair); }
tr.now-line .day-now { margin: 0; }
tr[data-booking-id] { cursor: pointer; }
tr[data-booking-id]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--teal-soft); }
tr.is-cancelled td { opacity: .62; }
.cell-time { font-family: var(--mono); white-space: nowrap; }
.cell-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.cell-customer { min-width: 0; }
.cell-customer .cell-ref { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.attn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); margin-right: 7px; flex: none; }
.attn-row {
  display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px;
  color: var(--brass-700); text-decoration: none; font-weight: 600; min-width: 0;
}
.attn-row:hover { color: var(--coral); }
.attn-row .attn-more { color: var(--faint); font-weight: 700; }
.attn-row .chev { flex: none; }

/* -- Dagkaarten (<600px, markup-contract §2.4) -- */
.booking-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 12px 14px; min-width: 0; cursor: pointer;
}
.booking-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft); }
.booking-card.is-cancelled { opacity: .62; }
.booking-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.booking-card header .t { font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.booking-card__who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 600; margin: 6px 0 4px; color: var(--ink); overflow-wrap: anywhere; }
.booking-card__who .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; flex: none; }
.booking-card__what { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.booking-card__qa { margin-top: 9px; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* -- Status-pills: operationele levenscyclus + dock (BL-0049-varianten) -- */
.pill.ph-expected { background: var(--surface-2); color: var(--ink-text); border: 1px solid var(--line); }
.pill.ph-checkedin { background: var(--plum-soft); color: #2C5360; }
.pill.ph-issued { background: var(--brass-soft); color: var(--brass-700); }
.pill.ph-onwater { background: var(--willow-soft); color: #2C5A3D; }
.pill.ph-onwater .dot, .pill.ph-late .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill.ph-onwater .dot { background: var(--willow); animation: s06pulse 2.2s infinite; }
.pill.ph-late { background: var(--coral); color: var(--cream); } /* de ene urgente uitzondering: vol coral */
.pill.ph-late .dot { background: #fff; animation: s06pulse 2.2s infinite; }
.pill.ph-done { background: var(--surface-2); color: var(--muted); border: 1px solid var(--hair); }

/* -- Laden / fout -- */
.skeleton { display: grid; gap: 12px; }
.skeleton .sk {
  border-radius: var(--radius); min-height: 64px;
  background: linear-gradient(100deg, var(--surface-2) 40%, #fff 50%, var(--surface-2) 60%);
  background-size: 200% 100%; animation: s06shimmer 1.4s infinite linear;
  border: 1px solid var(--hair);
}
.skeleton .sk--table { min-height: 220px; }
@keyframes s06shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton .sk, .daystrip .dot, .pill .dot { animation: none !important; } }
.error-card {
  background: var(--coral-soft); border: 1px solid var(--coral); border-radius: var(--radius);
  padding: 16px; color: #8A352C; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.error-card p { margin: 0; font-weight: 600; }

/* -- Cockpit-voet: dag in de lijst -- */
.today-foot { margin-top: 14px; text-align: center; }
.today-foot a { color: var(--teal-700); font-weight: 600; text-decoration: none; }
.today-foot a:hover { text-decoration: underline; }

/* ============================================================
   BSUI - gedeelde overlay-/toast-primitive (settings fase 2a).
   Contract: settings-handoff 05-development-guidelines "Overlays"
   (scrim-fade .15s, dialog-rise 12px, toast-rise, reduced-motion
   uit; modals 440-560px, Wijzigingsplan 760px; toast onder-midden).
   ============================================================ */
.bsui-scrim {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(24, 40, 37, .46);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: bsuiFade .15s ease;
}
.bsui-dialog {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px 22px; max-height: min(86vh, 720px); overflow: auto;
  width: 100%; animation: bsuiRise .15s ease;
}
.bsui-dialog--sm   { max-width: 440px; }
.bsui-dialog--md   { max-width: 560px; }
.bsui-dialog--lg   { max-width: 560px; }
.bsui-dialog--plan { max-width: 760px; }
.bsui-dialog:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bsui-title { margin: 0 0 8px; font-family: var(--disp, Lora, serif); font-size: 20px; }
.bsui-text  { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.bsui-actions { display: flex; justify-content: flex-end; gap: 10px; }
.bsui-actions button { min-height: 44px; }
.bsui-danger {
  background: var(--coral); color: #fff; border: 1px solid var(--coral);
  border-radius: var(--radius-sm); padding: 0 16px; font-weight: 600; cursor: pointer;
}
.bsui-danger:hover { filter: brightness(.94); }
.bsui-danger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bsui-toastwrap {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 260; pointer-events: none; display: none;
}
.bsui-toastwrap--on { display: block; }
.bsui-toast {
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 11px 16px; font-size: 14px; max-width: min(92vw, 520px);
  animation: bsuiToastRise .15s ease;
}
.bsui-toast--error { background: var(--coral); color: #fff; }
@keyframes bsuiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bsuiRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bsuiToastRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bsui-scrim, .bsui-dialog, .bsui-toast { animation: none; }
}

/* Module-uit-pagina (settings-config 3c-2, lib/shell.php render_module_off_page):
   de link naar Instellingen > Modules oogt als de primaire knop, zonder onderstreping. */
.module-off a.primary { display: inline-block; text-decoration: none; }