/* 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;
  --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; }
/* S06 responsive-contract: >=1024px volledige sidebar (250px). */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.side {
  background: linear-gradient(184deg, var(--ink), #12201C); color: #E9E0C8;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 13px;
  /* min-width:0: zonder dit rekt de auto-min grid-track mee met de nav-rij en
     forceert de hele pagina breder dan de viewport (de 955px-overflow-bug). */
  min-width: 0;
}
/* Mobiele kopbalk-elementen (shell.php): alleen zichtbaar <=600px. Het paneel
   is op desktop/tablet display:contents zodat de flex-layout van .side
   (kolom met margin-top:auto op de voet) blijft werken alsof de wrapper niet bestaat. */
.side__quick, .side__menubtn { display: none; }
.side__panel { display: contents; }
.side__brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; }
/* Inline SVG-beeldmerk (strak bijgesneden, aspect 4:3). Sidebar en wal gebruiken dit
   i.p.v. de vroegere vierkante PNG met veel witruimte, zodat de mark zijn kader vult en
   dezelfde verhouding/uitlijning heeft als op het inlogscherm. */
.brandmark-static { display: block; flex: none; }
a.side__brand { text-decoration: none; border-radius: var(--radius-sm); }
a.side__brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.side__brand b { font-family: var(--disp); font-weight: 500; color: #EFE5CC; font-size: 21px; line-height: 1.05; letter-spacing: -.005em; display: block; }
.side__brand span { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #A6B0A6; margin-top: 3px; }
.scopepill {
  margin: 0 4px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px; padding: 10px 12px;
}
.scopepill .lab { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #A6B0A6; font-weight: 700; }
.scopepill .val { display: flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; margin-top: 3px; font-size: 13px; }
.scopepill .val:before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--willow); box-shadow: 0 0 0 3px rgba(62,123,84,.28); flex: none; }
.sidenav { margin-top: 2px; }
.navgrp { margin: 9px 0; }
.navgrp .lab { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: #A6B0A6; font-weight: 700; padding: 6px 12px; }
.nav {
  width: 100%; display: flex; align-items: center; gap: 11px; border: 0; background: transparent;
  color: #C9D2C4; padding: 9px 12px; border-radius: 9px; text-align: left; font-weight: 600;
  font-size: 13.5px; text-decoration: none; transition: .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; }
.side__foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; }
.userchip { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--teal), var(--deep)); color: #fff; font-weight: 700; font-size: 12px;
}
.userchip .stack { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.userchip .nm { font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .rl { font-size: 10.5px; color: #A6B0A6; }
.side__foot .logout {
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: #C9D2C4;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1);
}
.side__foot .logout .ic { width: 16px; height: 16px; flex: none; opacity: .9; }
.side__foot .logout:hover { background: rgba(255,255,255,.06); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 6; background: rgba(234,240,238,.86);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--hair); padding: 15px 26px; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; /* 320px-proof: lange DE-titels + taal + userchip wikkelen i.p.v. overflowen */
}
.top .crumb { font-size: 11.5px; color: var(--faint); font-weight: 600; letter-spacing: .02em; }
.top h1 { font-family: var(--disp); font-weight: 600; font-size: clamp(19px, 4.5vw, 23px); margin: 0; color: var(--ink); line-height: 1.1; }
.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 input[type=date] { 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 input[type=date]: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); }
.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 68px, >=1024 volledige sidebar (250px).
   Component-omslagen van oudere pagina's (omzet-grid 900, kolommen 880)
   blijven op hun bestaande punt. */

/* Tablet 600-1023px: sidebar wordt een verticale icoonrail van 68px. */
@media (min-width: 600px) and (max-width: 1023px) {
  .app { grid-template-columns: 68px 1fr; }
  .side { padding: 14px 8px; }
  .side__brand { justify-content: center; padding: 2px 0 14px; gap: 0; }
  .side__brand svg { width: 34px; height: 26px; }
  .side__brand > div { display: none; }
  .scopepill { display: none; }
  .navgrp .lab { display: none; }
  .nav { justify-content: center; padding: 12px 0; gap: 0; }
  .nav span { display: none; }
  .nav .ic { width: 19px; height: 19px; }
  .side__foot .logout { justify-content: center; padding: 11px 0; }
  .side__foot .logout span { display: none; }
  .userchip { display: none; }
  .side__host { padding: 8px 0 2px; text-align: center; }
  .env-ind { justify-content: center; }
  .env-host { display: none; }
}
@media (max-width: 1023px) {
  /* topbar scrollt mee (niet sticky): bespaart schermhoogte; desktop blijft sticky */
  .top { position: static; }
  .login { grid-template-columns: 1fr; }
  .login__hero { display: none; }
}

/* ---------------- S06-tabbar (markup-contract §1; alleen <600px) ---------------- */
.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: linear-gradient(184deg, #16241F, var(--deep));
  border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 8px 4px 7px; text-decoration: none;
  color: #8FA096; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.tabbar .tab .ic { width: 19px; height: 19px; }
.tabbar .tab.on { color: #fff; box-shadow: inset 0 3px 0 var(--gold); }
.tabbar .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Mobiel <600px: donkere kopbalk (merk + menu-knop) + tabbar onderin. */
@media (max-width: 599px) {
  html { scroll-padding-top: 68px; }
  .app { grid-template-columns: 1fr; }
  .side {
    position: sticky; top: 0; z-index: 30; /* onder drawers/scrims (50+), boven .top (6) */
    height: auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 6px; padding: 8px 10px;
  }
  .side__brand { padding: 0 4px 0 2px; }
  .side__brand svg { width: 34px; height: 26px; }
  .side__brand b { font-size: 18px; }
  .side__brand span { display: none; } /* versienummer staat in het paneel (voet) */
  .side__menubtn {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 44px; min-height: 44px; padding: 0; /* icoon-only: balk blijft één rij op 375px */
    border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: transparent;
    color: var(--on-dark); cursor: pointer;
  }
  .side__menubtn .ic { width: 18px; height: 18px; }
  .side__menubtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .side--open .side__menubtn { background: rgba(255,255,255,.08); }
  /* paneel: dicht = display:none (geen tabvolgorde door onzichtbare links) */
  .side__panel { display: none; flex-basis: 100%; min-width: 0; }
  .side--open .side__panel {
    display: block; overflow-y: auto; overscroll-behavior: contain;
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px);
    padding: 2px 2px calc(8px + env(safe-area-inset-bottom));
  }
  .side--open .scopepill { display: block; margin: 8px 2px 10px; }
  .side--open .sidenav { display: block; flex: none; }
  .side--open .navgrp { display: block; margin: 8px 0; }
  .side--open .navgrp .lab { display: block; }
  .side--open .nav { width: 100%; min-height: 44px; padding: 10px 12px; justify-content: flex-start; }
  .side--open .side__foot {
    display: block; margin: 10px 0 0; width: 100%;
    border-top: 1px solid rgba(255,255,255,.09); padding-top: 10px;
  }
  .side--open .side__foot .logout { display: flex; align-items: center; min-height: 44px; }
  .side--open .side__host { padding: 10px 12px 2px; }
  /* tabbar onderin; content houdt er ruimte voor vrij (96px, prototype-spec) */
  .tabbar { display: flex; }
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* daybar: datumveld vult de rij, knoppen blijven 44px */
  .daybar .daygroup { flex: 1 1 auto; display: flex; }
  .daygroup input[type="date"] { flex: 1 1 auto; min-width: 0; }
}

/* 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(238,242,240,.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; }
  .userchip .nm { display: none; }
  .login__form { padding: 24px 18px; }
}

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

/* ---------------- Topbar: taalschakelaar + gebruiker ---------------- */
.top__r { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.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; }
.top .userchip { padding: 0; gap: 9px; }
.top .userchip .avatar { width: 34px; height: 34px; }
.top .userchip .nm { color: var(--ink); }
.top .userchip .rl { color: var(--muted); }
.side__host { font-size: 10.5px; color: #A6B0A6; padding: 8px 12px 2px; letter-spacing: .02em; }
/* versienummer in de omgevingsregel: alleen op mobiel (in het menu-paneel); op
   desktop/tablet staat de versie al onder het merk. */
.side__ver { display: none; }
@media (max-width: 599px) { .side__ver { display: inline; margin-left: 6px; font-family: var(--mono); } }
.env-ind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.env-code { font-weight: 800; font-size: 9.5px; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; color: #fff; line-height: 1.6; }
.env-host { white-space: nowrap; }
.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 */
@media (max-width: 680px) { .env-host { display: none; } }

/* ---------------- 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 .apply-btn { grid-column: 1 / -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; }
  /* 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; }
}

/* -- KPI-actietegels (BL-0049-component; rail via ::before, kleur via --rail) -- */
.kpi--action {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  color: var(--ink-text); transition: transform .14s, box-shadow .14s;
}
.kpi--action::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rail, var(--teal)); }
.kpi--action:after { display: none; } /* basis-.kpi-rail vervangen door ::before */
.kpi--action:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi--action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--teal-soft), var(--shadow); }
.kpi--action .kpi__go { position: absolute; top: 10px; right: 11px; color: var(--faint); }
.kpi--action .kpi__go svg { width: 14px; height: 14px; display: block; }
.kpi--action:hover .kpi__go { color: var(--teal-700); }
.kpi__label { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.kpi__value { display: block; font-family: var(--disp); font-size: 26px; font-weight: 600; margin-top: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi__note { display: block; margin-top: 11px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 9px; font-size: 12px; color: var(--ink-text); }
/* urgent (retour te laat / aandacht > 0): coral rand + label, note in coral-soft */
.kpi--urgent { border-color: var(--coral); }
.kpi--urgent .kpi__label { color: var(--coral); }
.kpi--urgent .kpi__note { background: var(--coral-soft); border-color: var(--coral); color: var(--ink-text); font-weight: 600; }
/* hero-invert (Omzet, geldrollen): forest vulling, cream tekst */
.kpi--action.kpi-strong { background: var(--ink); border-color: var(--ink); }
.kpi--action.kpi-strong .kpi__label { color: var(--cream); }
.kpi--action.kpi-strong .kpi__value { color: #fff; }
.kpi--action.kpi-strong .kpi__note { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--cream); }
/* bezettingstegel: gevulde lettervakken per boottype + "Nu vrij"-regel */
.occ__row { display: flex; gap: 5px; margin-top: 10px; }
.occ__type { display: inline-flex; align-items: stretch; height: 20px; border-radius: 5px; overflow: hidden; flex: 1; min-width: 0; border: 1px solid var(--hair); }
.occ__type .l { display: inline-grid; place-items: center; width: 16px; flex: none; font-family: var(--mono); font-weight: 700; font-size: 10px; color: #fff; }
.occ__type .f { flex: 1; }
.occ__type[data-type="A"] .l { background: var(--teal); }
.occ__type[data-type="B"] .l { background: var(--willow); }
.occ__type[data-type="C"] .l { background: var(--brass); }
.occ__type[data-type="W"] .l { background: var(--plum); }
.occ__counts { display: flex; gap: 5px; margin-top: 3px; }
.occ__counts span { flex: 1; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.occ__free { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-text); }
.occ__free b { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 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; }
  .kpis .kpi__value { font-size: 21px; margin-top: 3px; }
  .kpis .kpi__note { margin-top: 6px; padding: 4px 7px; font-size: 11px; }
  .kpis .occ__row, .kpis .occ__counts { display: none; } /* compacte tegel: alleen % + vrij-regel */
}

/* -- 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; }