/* Design tokens, taken 1:1 from the admin mockup. One change here restyles
   the whole package. Light is the base; dark overrides tokens only. */
:root {
  --bg:#f7f8fa; --card:#ffffff; --wash:#f3f4f7; --wash2:#f9fafb;
  --line:#e9eaef; --grid:#f1f2f5; --axis:#d9dbe3;
  --ink:#151821; --sub:#5f6b7d; --muted:#949cab;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --btn-bg:#16181f; --btn-ink:#ffffff;
  --data:#2a78d6; --data-wash:rgba(42,120,214,.10);
  --pos:#116329; --neg:#b42318;
  --chip-blue-bg:#eef4fd; --chip-blue-ink:#1a5fb4; --chip-blue-dot:#2a78d6;
  --chip-green-bg:#e9f6ee; --chip-green-ink:#116329; --chip-green-dot:#17984b;
  --chip-orange-bg:#fdf4e7; --chip-orange-ink:#955104; --chip-orange-dot:#e8a13c;
  --chip-gray-bg:#f1f2f4; --chip-gray-ink:#52596b; --chip-gray-dot:#98a1ad;
  --chip-red-bg:#fdeeee; --chip-red-ink:#b42318; --chip-red-dot:#d03b3b;
  --warn:#b2680d;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0d0e12; --card:#16181d; --wash:#1d1f26; --wash2:#1a1c22;
    --line:rgba(255,255,255,.08); --grid:rgba(255,255,255,.05); --axis:rgba(255,255,255,.16);
    --ink:#f2f3f7; --sub:#9aa1ac; --muted:#6f7681;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --btn-bg:#ffffff; --btn-ink:#111318;
    --data:#3987e5; --data-wash:rgba(57,135,229,.14);
    --pos:#0ca30c; --neg:#e66767;
    --chip-blue-bg:rgba(57,135,229,.16); --chip-blue-ink:#8db9f0; --chip-blue-dot:#3987e5;
    --chip-green-bg:rgba(23,152,75,.16); --chip-green-ink:#6fce93; --chip-green-dot:#2ea45c;
    --chip-orange-bg:rgba(232,161,60,.14); --chip-orange-ink:#e5b878; --chip-orange-dot:#d99a3d;
    --chip-gray-bg:rgba(255,255,255,.07); --chip-gray-ink:#aab1bc; --chip-gray-dot:#6f7681;
    --chip-red-bg:rgba(208,59,59,.16); --chip-red-ink:#e69a9a; --chip-red-dot:#d05555;
    --warn:#d99a3d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0d0e12; --card:#16181d; --wash:#1d1f26; --wash2:#1a1c22;
  --line:rgba(255,255,255,.08); --grid:rgba(255,255,255,.05); --axis:rgba(255,255,255,.16);
  --ink:#f2f3f7; --sub:#9aa1ac; --muted:#6f7681;
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --btn-bg:#ffffff; --btn-ink:#111318;
  --data:#3987e5; --data-wash:rgba(57,135,229,.14);
  --pos:#0ca30c; --neg:#e66767;
  --chip-blue-bg:rgba(57,135,229,.16); --chip-blue-ink:#8db9f0; --chip-blue-dot:#3987e5;
  --chip-green-bg:rgba(23,152,75,.16); --chip-green-ink:#6fce93; --chip-green-dot:#2ea45c;
  --chip-orange-bg:rgba(232,161,60,.14); --chip-orange-ink:#e5b878; --chip-orange-dot:#d99a3d;
  --chip-gray-bg:rgba(255,255,255,.07); --chip-gray-ink:#aab1bc; --chip-gray-dot:#6f7681;
  --chip-red-bg:rgba(208,59,59,.16); --chip-red-ink:#e69a9a; --chip-red-dot:#d05555;
  --warn:#d99a3d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Vangrail: een veld wordt nooit breder dan de kaart waarin het woont. */
.card input, .card select, .card textarea { max-width: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 18px 20px;
}
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}

/* ── App shell, straight from the mockup ── */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { border-right: 1px solid var(--line); background: var(--card);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 9px; padding: 2px 8px; }
.logo-beeld { height: 24px; width: auto; display: block; }
.logo-beeld.donker { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-beeld.licht { display: none; }
  :root:not([data-theme="light"]) .logo-beeld.donker { display: block; }
}
:root[data-theme="dark"] .logo-beeld.licht { display: none; }
:root[data-theme="dark"] .logo-beeld.donker { display: block; }
.nav { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px;
  color: var(--sub); text-decoration: none; width: 100%; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--wash); color: var(--ink); }
.nav-item.active { background: var(--wash); color: var(--ink); font-weight: 550; }
.nav-item .chev { margin-left: auto; color: var(--muted); font-size: 10px; }
.nav-group.open > .nav-item { color: var(--ink); font-weight: 550; }
.nav-sub { display: none; flex-direction: column; gap: 1px; padding: 2px 0 8px 16px; }
.nav-group.open .nav-sub { display: flex; }
.nav-sub a { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 8px;
  color: var(--sub); text-decoration: none; font-size: 13px; }
.nav-sub a:hover { background: var(--wash); color: var(--ink); }
.nav-sub a.active { background: var(--wash); color: var(--ink); font-weight: 550; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 10px 28px; border-bottom: 1px solid var(--line); background: var(--card); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--wash);
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; color: var(--sub); }
.content { width: 100%; margin: 0 auto; padding: 26px 40px 40px; }
h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
.page-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ── Forms and buttons ──
   One truth for every button in the admin: two sizes (34px, small 28px),
   links and buttons pixel-identical, always vertically centered in their
   row. Inline styles must never redefine button metrics. */
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; border-radius: 4px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); border-radius: 8px;
  padding: 0 14px; font-weight: 550; font-size: 13.5px; height: 34px; box-sizing: border-box; }
.btn-primary:hover { opacity: .88; }
.ghost { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px;
  padding: 0 13px; font-size: 13.5px; font-weight: 550; box-shadow: var(--shadow); height: 34px; box-sizing: border-box; }
.ghost:hover { background: var(--wash2); }
/* Een knop die iets weggooit. Zelfde vorm als .ghost, alleen de letters
   waarschuwen; een knalrode knop naast Opslaan trekt de aandacht weg van
   wat je eigenlijk komt doen. */
.ghost.gevaar { color: var(--neg); }
.ghost.gevaar:hover { background: var(--neg); color: #fff; border-color: var(--neg); }
a.btn-primary, button.btn-primary, a.ghost, button.ghost, label.btn-primary, label.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; text-decoration: none; }
.btn-primary.small, .ghost.small { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
/* Een tekstvak in de ghost-stijl is een invoerveld, geen knop: het groeit
   met zijn regels mee en schrijft in de gewone letter, nooit monospace. */
textarea { font: inherit; }
textarea.ghost, textarea.ghost.small { height: auto; min-height: 34px; padding: 8px 11px;
  font-size: 13.5px; line-height: 1.4; resize: vertical; }
textarea.ghost.small { min-height: 28px; padding: 6px 9px; font-size: 12.5px; }
input.ghost { font-family: inherit; }
a.btn-primary { color: var(--btn-ink); }
/* Een summary die als knop oogt, gedraagt zich ook zo: geen driehoekje. */
summary.ghost, summary.btn-primary { list-style: none; }
summary.ghost::-webkit-details-marker, summary.btn-primary::-webkit-details-marker { display: none; }
a.ghost { color: var(--ink); }
/* Button rows: same gap everywhere, buttons centered against taller
   neighbours (inputs, selects). */
.btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 550; color: var(--sub); }
.veld-hint { font-size: 12px; color: var(--muted); }
.veld-hint.fout { color: var(--neg); }
.veld-hint.goed { color: var(--pos); }
.field input, .field select, .field textarea { font: inherit; font-size: 13.5px; line-height: 1.35; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; outline: none;
  box-shadow: 0 1px 2px rgba(16,20,28,.04);
  transition: border-color .12s ease, box-shadow .12s ease; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--axis); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.field select, select.ghost { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; padding-right: 30px; }
.form-error { background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--neg);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.form-melding { background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--pos);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

.btn-primary.groot { width: 100%; height: 44px; font-size: 15px; border-radius: 10px; }
.nowrap { white-space: nowrap; }

/* ── Cmd+K palette ── */
.cmdk { position: fixed; inset: 0; background: rgba(9,11,16,.42); z-index: 90; padding: 12vh 16px 0; }
.cmdk-box { max-width: 560px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.28); }
.cmdk-box input { width: 100%; border: 0; outline: none; background: none; font: inherit; font-size: 15px;
  color: var(--ink); padding: 15px 18px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.cmdk-box input::placeholder { color: var(--muted); }
.cmdk-list { max-height: 340px; overflow: auto; padding: 6px; }
.cmdk-item { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; cursor: pointer; color: var(--ink); text-decoration: none; }
.cmdk-item.sel, .cmdk-item:hover { background: var(--wash); }
.cmdk-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── Staafgrafieken: 1 vorm, met een rustige hover ── */
.staven { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 16px 18px; }
.staaf { flex: 1; min-width: 2px; background: var(--data); border-radius: 3px 3px 0 0; opacity: .85; }
.staaf:hover { opacity: 1; }

/* ── KPI band ── */
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.kpi { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi-value { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-meta { font-size: 12.5px; color: var(--muted); }

/* ── Status chips ── */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 8px 2px 7px;
  font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.chip.blue { background: var(--chip-blue-bg); color: var(--chip-blue-ink); }
.chip.blue::before { background: var(--chip-blue-dot); }
.chip.green { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.chip.green::before { background: var(--chip-green-dot); }
.chip.orange { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.chip.orange::before { background: var(--chip-orange-dot); }
.chip.gray { background: var(--chip-gray-bg); color: var(--chip-gray-ink); }
.chip.gray::before { background: var(--chip-gray-dot); }
.chip.red { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.chip.red::before { background: var(--chip-red-dot); }

/* ── Lijstgereedschap ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px; }
/* Head buttons sit on one line; forms around buttons never break the row. */
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.head-actions form { display: contents; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--wash2); }
.seg a { padding: 5px 12px; border-radius: 6px; font-size: 13px; color: var(--sub); text-decoration: none; }
.seg a[aria-current="true"] { background: var(--card); color: var(--ink); font-weight: 550; box-shadow: 0 0 0 1px var(--line); }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fchip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  color: var(--sub); background: var(--card); text-decoration: none; }
.fchip:hover { background: var(--wash2); }
.fchip[aria-current="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 550; }
.fchip .n { opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.searchbox { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 11px; background: var(--card); min-width: 230px; color: var(--muted);
  box-shadow: 0 1px 2px rgba(16,20,28,.04); }
.searchbox:focus-within { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.searchbox input { border: 0; background: none; outline: none; font: inherit; color: var(--ink); width: 100%; }

/* ── Tabellen ── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 10px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--wash2); }
tr.rowlink { cursor: pointer; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { white-space: nowrap; }
th.num { text-align: right; }
.cell-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.table-scroll { overflow-x: auto; }
/* Regeling treffen klapt als klein kaartje onder de knop uit, rechts
   uitgelijnd, zodat het formulier nooit tegen de kaartrand duwt. */
details.regeling { position: relative; display: inline-block; margin-left: 6px; }
details.regeling[open] > form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(21, 24, 33, .12); white-space: nowrap; }
.pagebar { display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 12.5px; color: var(--muted); }
.pagebar .grow { flex: 1; }
.pagebar a { color: var(--sub); }
.card.flush { padding: 0; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-head > a.ghost:last-child, .card-head > button.ghost:last-child,
.card-head > a.btn-primary:last-child, .card-head > button.btn-primary:last-child,
.card-head > form:last-child, .card-head > .seg:last-child { margin-left: auto; }

/* ── Detail layout ── */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.span8 { grid-column: span 8; min-width: 0; }
.span7 { grid-column: span 7; min-width: 0; }
.span6 { grid-column: span 6; min-width: 0; }
.span5 { grid-column: span 5; min-width: 0; }
.span4 { grid-column: span 4; min-width: 0; }
.span12 { grid-column: span 12; min-width: 0; }
.span3 { grid-column: span 3; min-width: 0; }
.grid > aside { align-self: start; }
@media (max-width: 900px) { .span8, .span7, .span6, .span5, .span4, .span3 { grid-column: span 12; } }
table.dense th { padding: 8px 12px; }
table.dense td { padding: 8px 12px; }
/* An editor row carries seven fields; the ordinary cell padding pushes the
   last two off the card, so this table gets tighter gutters. */
table.dense.krap th, table.dense.krap td { padding: 7px 6px; }
/* Rijen met gestapelde invoer lezen van boven af; middenuitlijning maakt
   er een zigzag van. */
table.boven td { vertical-align: top; padding-top: 12px; }
table.dense.krap th:first-child, table.dense.krap td:first-child { padding-left: 14px; }
table.dense.krap th:last-child, table.dense.krap td:last-child { padding-right: 14px; }
.voortgang { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; max-width: 120px; }
.voortgang span { display: block; height: 100%; background: var(--pos); }
.kv-lijst { padding: 10px 0 12px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 5px 18px; font-size: 13.5px; }
.kv .k { color: var(--muted); flex: none; }
.kv .v { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* ── Verloop-tijdlijn ── */
.timeline { padding: 12px 18px 14px; }
.tl { position: relative; padding-left: 22px; padding-bottom: 14px; font-size: 13.5px; }
.tl:last-child { padding-bottom: 2px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: -2px; width: 1px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl::after { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--data); }
.tl .t { color: var(--muted); font-size: 12px; }

/* ── Afdrukken: alleen het factuurdocument ── */
@media print {
  .side, .topbar, .niet-afdrukken, .cmdk { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
  #factuurdoc { border: 0; box-shadow: none; max-width: none !important; }
}

/* hidden must always win, also over inline display styles */
[hidden] { display: none !important; }

/* ── Autocomplete-lijst onder invoervelden ── */
.field { position: relative; }
.ac-lijst { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.ac-item { display: block; width: 100%; text-align: left; padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover { background: var(--wash); }

/* ── Topbar: sticky, one pill style for every control (like the sidebar
   search): soft wash, hairline border, muted ink. Search lives in the
   sidebar only; the topbar has no search field of its own. ── */
.topbar { position: sticky; top: 0; z-index: 80; }
.topbar > .ghost, .topbar > .menuwrap > .ghost, .topbar > .bel > summary.ghost, .topbar > .icon-btn {
  background: var(--wash2); border: 1px solid var(--line); box-shadow: none;
  color: var(--sub); border-radius: 8px; font-size: 13px; font-weight: 500; }
.topbar > .ghost:hover, .topbar > .menuwrap > .ghost:hover, .topbar > .bel > summary.ghost:hover,
.topbar > .icon-btn:hover { background: var(--wash); color: var(--ink); }
.topbar-badge { min-width: 18px; height: 18px; border-radius: 999px; background: var(--data);
  color: #fff; font-size: 11px; font-weight: 650; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 5px; font-variant-numeric: tabular-nums; }
.bel { position: relative; }
.bel summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bel summary::-webkit-details-marker { display: none; }
.bel-paneel { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--card);
  border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 8px 28px rgba(16,24,40,.12);
  padding: 8px 0 6px; z-index: 60; }
.bel-paneel a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px;
  font-size: 13px; color: var(--ink); text-decoration: none; }
.bel-paneel a:hover { background: var(--wash); }
.bel-leeg { padding: 8px 12px; font-size: 13px; color: var(--muted); }

/* ── Kassa: product tiles and the receipt panel ── */
.kassa-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 6px 18px 16px; }
.kassa-tegel { position: relative; }
.kassa-tegel[hidden] { display: none; }
.tegel-klik { display: flex; flex-direction: column; width: 100%; text-align: left; border: 1px solid var(--line);
  border-radius: 11px; background: var(--card); cursor: pointer; padding: 0 0 9px; overflow: hidden;
  font: inherit; color: inherit; gap: 6px; }
.tegel-klik:hover { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.tegel-klik img, .tegel-vlak { width: 100%; height: 76px; object-fit: cover; display: flex; align-items: center;
  justify-content: center; background: var(--wash); color: var(--muted); font-weight: 650; font-size: 19px; }
.tegel-naam { font-size: 12.5px; font-weight: 600; line-height: 1.25; padding: 0 9px; min-height: 31px; }
.tegel-voet { display: flex; align-items: center; gap: 6px; padding: 0 9px; font-size: 12px; }
.tegel-sku { color: var(--muted); font-size: 10.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tegel-voorraad { min-width: 20px; text-align: center; border-radius: 999px; background: var(--chip-blue-bg);
  color: var(--chip-blue-ink); font-size: 10.5px; font-weight: 650; padding: 1px 5px; }
.tegel-ster { position: absolute; top: 5px; right: 5px; border: 0; background: rgba(255,255,255,.85);
  border-radius: 999px; width: 24px; height: 24px; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; }
.kassa-tegel.fav .tegel-ster { color: #e8a13c; }
/* Terwijl de motor de bon opnieuw prijst staan de bedragen even flauw:
   ze kloppen nog niet, en niemand hoort ze in die tussenstand voor te
   lezen. Afrekenen staat dan ook uit. */
.bon-bezig { opacity: 0.45; transition: opacity 120ms ease; }
.bon-regel { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--grid); font-size: 13px; }
.bon-regel .naam { flex: 1; min-width: 0; }
.bon-regel .naam .cell-sub { font-size: 10.5px; }
.bon-regel input[name=aantal] { width: 46px; text-align: right; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; font: inherit; background: var(--card); color: inherit; }
.bon-regel .stap { border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 7px; width: 22px; height: 22px; cursor: pointer; line-height: 1; }
.bon-regel .weg { border: 0; background: none; color: var(--neg); cursor: pointer; font-size: 15px; }
.parkeer-rij { display: flex; align-items: center; gap: 8px; padding: 8px 18px; font-size: 12.5px; border-bottom: 1px solid var(--grid); }

/* ── Pixel parity with the mockup: crumbs, side search, collapse ── */
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--axis); }
.side-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; color: var(--muted); font-size: 13px; background: var(--wash2); width: 100%; text-align: left;
  cursor: pointer; font-family: inherit; }
.side-search kbd { margin-left: auto; font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 5px; color: var(--muted); background: var(--card); }
.icon-btn { position: relative; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  color: var(--sub); border: 0; background: none; cursor: pointer; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
body.zijbalk-dicht .app { grid-template-columns: 1fr; }
body.zijbalk-dicht .side { display: none; }

/* ── The storefront: warm, calm and clearly Shopro ── */
.shop-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: var(--card); }
.shop-header-in { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-zoek { flex: 1; min-width: 220px; max-width: 460px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; background: var(--wash2); }
.shop-zoek input { border: 0; background: none; outline: none; font: inherit; color: var(--ink); width: 100%; }
.shop-wagen { position: relative; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.shop-usp { border-bottom: 1px solid var(--line); background: var(--wash2); }
.shop-usp-in { max-width: 1120px; margin: 0 auto; padding: 7px 20px; display: flex; gap: 26px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--sub); }
.shop-usp-in span::before { content: "✓"; color: var(--pos); margin-right: 6px; font-weight: 700; }
.shop-main { max-width: 1120px; margin: 0 auto; padding: 26px 20px 40px; }
.shop-kaart { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .12s, transform .12s; }
.shop-kaart:hover { box-shadow: 0 10px 26px rgba(16,24,40,.10); transform: translateY(-2px); }
.shop-kaart img, .shop-kaart .foto-leeg { width: 100%; height: 168px; object-fit: cover; display: block; }
.shop-kaart .foto-leeg { background: var(--wash); display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.shop-stappen { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; flex-wrap: wrap; }
.shop-stappen b { color: var(--ink); }
.shop-stappen i { font-style: normal; color: var(--axis); }
.shop-cat a { text-decoration: none; font-size: 13.5px; color: var(--ink); padding: 7px 12px; border-radius: 8px; display: block; }
.shop-cat a:hover { background: var(--wash); }
.shop-cat a.actief { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.shop-footer { border-top: 1px solid var(--line); background: var(--card); margin-top: 30px; }
.shop-footer-in { max-width: 1120px; margin: 0 auto; padding: 30px 20px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; font-size: 13px; color: var(--sub); }
.shop-footer-in a { color: inherit; }
.shop-usp-lijst { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; margin: 14px 0 18px; }
.shop-usp-lijst span::before { content: "✓"; color: var(--pos); margin-right: 8px; font-weight: 700; }

/* ── Shop-lijst en winkelwagen: dezelfde breedte als kop en voet, en op
   een telefoon categorie-chips boven met twee tegels per rij ── */
.shop-lijst { display: flex; gap: 26px; align-items: flex-start; }
.shop-zijbalk { width: 200px; flex-shrink: 0; }
.shop-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.shop-lijstkop { display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wagen-korting-rij { display: flex; justify-content: space-between; color: var(--chip-green-ink); }
.wagen-korting-rij[hidden] { display: none; }
.wagen-regel { display: flex; align-items: center; gap: 12px 14px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.wagen-regel .wagen-kern { flex: 1; min-width: 170px; }
.wagen-regel .wagen-totaal { font-weight: 650; min-width: 80px; text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .shop-lijst { flex-direction: column; gap: 14px; }
  .shop-zijbalk { width: 100%; }
  .shop-zijbalk .shop-cat { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 6px; }
  .shop-zijbalk .shop-cat a { padding: 5px 12px; border: 1px solid var(--line);
    border-radius: 999px; font-size: 12.5px; }
  .shop-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-kaart img, .shop-kaart .foto-leeg { height: 120px; }
}

/* ── Statusstappen op het orderdetail (mockup) ──────────────────────── */
.steps { display: flex; align-items: center; gap: 0; margin: 2px 0 16px; overflow-x: auto; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.step .dot2 { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--axis); background: var(--card);
  display: grid; place-items: center; font-size: 10px; color: var(--card); flex: none; }
.step.done { color: var(--sub); }
.step.done .dot2 { background: var(--data); border-color: var(--data); }
.step.cur { color: var(--ink); font-weight: 600; }
.step.cur .dot2 { border-color: var(--data); color: var(--data); }
.step-line { width: 34px; height: 2px; background: var(--line); margin: 0 8px; flex: none; }
.step.done + .step-line, .step-line.done { background: var(--data); }

/* ── Acties-menu in de paginakop ────────────────────────────────────── */
.menuwrap { position: relative; display: inline-block; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); display: none; }
.menu.open { display: block; }
.menu button, .menu a { display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 7px;
  font-size: 13.5px; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--wash); }
.menu .sep { height: 1px; background: var(--line); margin: 5px 4px; }
.menu .danger { color: var(--neg); }

/* File inputs follow the button system instead of the browser default. */
input[type="file"] { font-size: 12.5px; color: var(--sub); }
input[type="file"]::file-selector-button { border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 7px; height: 28px; padding: 0 10px; font: inherit; font-size: 12.5px; font-weight: 550;
  cursor: pointer; margin-right: 9px; }
input[type="file"]::file-selector-button:hover { background: var(--wash2); }

/* ── Chatwerkplek en topbar-popup (mockup) ──────────────────────────── */
.chat-vlak { height: calc(100vh - 205px); min-height: 460px; align-items: stretch; }
.chat-vlak > aside, .chat-vlak > section { min-height: 0; }
.ch-dagscheider { align-self: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--wash); border-radius: 999px; padding: 3px 12px; margin: 2px 0; }
.cp-rij { display: flex; gap: 10px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--line); align-items: flex-start; }
.cp-rij:hover, .cp-rij.actief { background: var(--wash); }
.cp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--wash2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 650; color: var(--sub); flex: none; position: relative; }
.cp-avatar .on { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip-green-dot); border: 2px solid var(--card); }
.cp-mid { flex: 1; min-width: 0; }
.cp-naam { font-weight: 600; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.cp-naam .tijd { margin-left: auto; font-weight: 400; font-size: 11px; color: var(--muted); white-space: nowrap; }
.cp-laatste { display: block; font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-bubbel { max-width: 78%; padding: 7px 11px; border-radius: 13px; font-size: 13px; line-height: 1.45; white-space: pre-line; }
.cp-bubbel.klant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cp-bubbel.admin { align-self: flex-end; background: var(--btn-bg); color: var(--btn-ink); border-bottom-right-radius: 4px; }
.cp-bubbel .t { display: block; font-size: 10px; opacity: .6; margin-top: 3px; }
.chat-pop { position: fixed; right: 16px; top: 58px; width: 384px; max-width: calc(100vw - 24px);
  height: min(600px, calc(100vh - 80px)); z-index: 70; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 18px 50px rgba(15,17,22,.22); overflow: hidden; }
.chat-pop[hidden] { display: none; }
.cp-kop { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.cp-kop .titel { font-weight: 650; font-size: 14px; }
.cp-x { margin-left: auto; border: 0; background: none; color: var(--sub); font-size: 19px; cursor: pointer; padding: 0 3px; line-height: 1; }
.cp-terug { border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 15px; padding: 0 4px 0 0; }
.cp-lijst { overflow-y: auto; flex: 1; }
.cp-gesprek { display: none; flex-direction: column; flex: 1; min-height: 0; }
.chat-pop.in-gesprek .cp-lijst { display: none; }
.chat-pop.in-gesprek .cp-gesprek { display: flex; }
.cp-berichten { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 8px; background: var(--wash2); }
.cp-invoer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cp-invoer input { flex: 1; min-width: 0; }
.cp-voet { padding: 7px 13px; border-top: 1px solid var(--line); font-size: 12px; display: flex; gap: 10px; }
.cp-voet a { color: var(--sub); text-decoration: none; }
.cp-voet a:hover { color: var(--ink); }
.fchip-n { color: var(--muted); font-size: 11px; margin-left: 4px; }

/* Het uniforme "?"-hulppunt: klikbaar vraagteken met een uitlegkaartje. */
.infopunt { position: relative; display: inline-block; }
.infopunt summary {
  list-style: none; cursor: pointer; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 650; user-select: none;
}
.infopunt summary::-webkit-details-marker { display: none; }
.infopunt[open] summary { background: var(--ink); color: var(--card); border-color: var(--ink); }
.infopunt > div {
  position: absolute; z-index: 40; top: 24px; left: -8px; width: 300px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--sub); font-weight: 400;
}
.infopunt > div.flip { left: auto; right: -8px; }

/* Artikelregels op de invoerschermen: een fotoslot per regel en een
   verzorgde suggestielijst met miniatuur. */
.regel-foto {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--muted);
}
.regel-foto::before { content: "◇"; font-size: 15px; }
.regel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.regel-foto:has(img)::before { content: none; }
.ac-item { display: flex; align-items: center; gap: 10px; text-align: left; }
.ac-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-naam { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px; }
.ac-stip.g { background: var(--chip-green-dot); } .ac-stip.o { background: var(--chip-orange-dot); }
.ac-stip.r { background: var(--chip-red-dot); }
/* De artikelzoeker verdient een bredere kaart dan zijn veld: naam,
   voorraad en barcode moeten leesbaar naast elkaar passen. */
.ac-lijst.breed { right: auto; width: max-content; min-width: 100%; max-width: min(520px, 90vw); }
/* De invoerwerkbank: grote zoekbalk, stappers en naamregels zoals het
   bindende ontwerp. */
.werkbalk { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--wash); }
.werkbalk input, .werkbalk button { height: 36px; }
.werkbalk #werkbank-zoek { flex: 1; min-width: 220px; }
.werkbalk #scanveld { width: 170px; }
.stapper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: 110px; }
.stapper button { border: 0; background: var(--wash); width: 26px; height: 32px; flex: 0 0 26px; font: inherit; cursor: pointer; color: var(--ink); }
.stapper button:hover { background: var(--line); }
.stapper input { border: 0; min-width: 0; flex: 1; text-align: center; border-radius: 0; padding: 6px 2px; -moz-appearance: textfield; }
.stapper input::-webkit-outer-spin-button, .stapper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.regel-naam { font-weight: 600; font-size: 13.5px; line-height: 1.3; cursor: pointer; }
/* Een nootregel (backorder, deellevering) loopt over de volle tabelbreedte
   en plakt aan de artikelregel erboven; bij smal beeld blijft het rustig. */
tr.noot-rij td { border-top: 0; padding-top: 0; }
tbody tr:has(+ tr.noot-rij) td { border-bottom: 0; }
.lijn-foto { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line2);
  background: var(--wash); display: block; }
span.lijn-foto.leeg { display: block; }
.regel-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--muted); }
.regel-meta .chip { font-size: 10.5px; padding: 1px 8px; }
.regel-info { font-size: 11.5px; }
.regel-naam:hover { text-decoration: underline dotted var(--muted); }
/* Na het kiezen draagt de naamregel het artikel; het zoekveld verdwijnt
   tot je op de naam tikt om te wisselen. */
.regel-naam:not([hidden]) ~ input[name=sku] { display: none; }
.regel-naam small { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 6px; }
.regel .regel-chips { display: inline-flex; gap: 5px; margin-right: 6px; vertical-align: 1px; }
#kc-contacten .chip, .kc-chiprij .chip { font-size: 11px; }
.kc-chiprij { display: flex; gap: 5px; flex-wrap: wrap; }

/* Het bladerpaneel op de invoer: fototegels per categorie. */
.blader-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.blader-tegel { border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer;
  text-align: left; font: inherit; color: inherit; padding: 0; overflow: hidden; }
.blader-tegel:hover { border-color: var(--muted); }
.blader-tegel .bt-foto { width: 100%; height: 78px; background: var(--wash); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; overflow: hidden; }
.blader-tegel .bt-foto img { width: 100%; height: 100%; object-fit: cover; }
.blader-tegel .bt-body { padding: 7px 9px 8px; }
.blader-tegel .bt-naam { font-size: 12px; font-weight: 600; line-height: 1.3; min-height: 31px; }
.blader-tegel .bt-prijs { font-size: 12.5px; font-weight: 650; margin-top: 2px; }
.blader-tegel .bt-voorraad { font-size: 10.5px; color: var(--muted); }
.ac-prijs { display: flex; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.35; }
.ac-prijs b { font-weight: 700; }
.ac-prijs s { font-size: 11px; color: var(--muted); }
.ac-prijs em { font-style: normal; font-size: 11px; color: var(--chip-green-ink); white-space: nowrap; }
.ac-item img {
  width: 32px; height: 32px; border-radius: 7px; object-fit: cover;
  flex: 0 0 32px; background: var(--bg); border: 1px solid var(--line);
}
.ac-item .ac-prijs { margin-left: auto; font-weight: 600; white-space: nowrap; }
.invoer-kolomkop {
  display: flex; gap: 8px; font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); padding: 0 0 2px 0;
}

/* ── De gebruikerskaart: rondjes met initialen ── */
.avatar-klein { width: 26px; height: 26px; border-radius: 50%; background: var(--wash);
  border: 1px solid var(--line); display: grid; place-items: center; flex: none;
  font-size: 10.5px; font-weight: 600; color: var(--sub); }
.avatar-groot { width: 46px; height: 46px; border-radius: 50%; background: var(--wash);
  border: 1px solid var(--line); display: grid; place-items: center; flex: none;
  font-size: 15px; font-weight: 600; color: var(--sub); }

/* ── Meekijken: nooit stiekem, dus altijd in beeld ── */
.meekijkbalk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 28px; font-size: 13px; background: var(--chip-orange-bg);
  color: var(--chip-orange-ink); border-bottom: 1px solid var(--line); }

/* ── Mijn bank: koppelingen ── */
.bank-rek-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bank-rek-rij .cell-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bank-zoek { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.bank-zoek input { width: 260px; }
.bank-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bank-tegel { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bank-tegel.uit { background: var(--wash); }
.bank-tegel-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bank-tegel-naam { font-size: 15px; font-weight: 600; }
.bank-tegel-uitleg { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.bank-tegel-waarom { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.bank-tegel .btn-primary { margin-top: auto; text-align: center; }
.bank-kies-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bank-kies-form { display: flex; gap: 8px; align-items: center; }
.bank-kies-voet { margin: 0; padding: 12px 18px; font-size: 12.5px; color: var(--muted); }
.bank-fout { grid-column: 1 / -1; font-size: 12.5px; color: var(--neg); line-height: 1.4; }
.bank-let-op { grid-column: 1 / -1; font-size: 12.5px; color: var(--chip-orange-ink); line-height: 1.4; }
.bank-ritme { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 18px 4px; font-size: 13px; }
.bank-ritme label { color: var(--muted); }
.bank-ritme select { min-width: 130px; }

/* De inkoopcockpit: drie kolommen die blijven staan. Links kies je waar je
   aan werkt, in het midden werk je, rechts groeit de order. */
.cockpit { display: grid; grid-template-columns: 250px 1fr 300px; gap: 16px; align-items: start; }
.cockpit-links, .cockpit-rechts { position: sticky; top: 16px; }
.cockpit-links { max-height: calc(100vh - 40px); overflow: auto; }
.cockpit-lev { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; }
.cockpit-lev:hover { background: var(--wash); }
.cockpit-lev.aan { background: var(--data-wash); box-shadow: inset 3px 0 0 var(--data); }
.cockpit-lev-naam { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.cockpit-nood { background: var(--neg); color: #fff; border-radius: 999px; font-size: 11px;
  font-weight: 700; padding: 0 6px; line-height: 17px; }
.cockpit-groep { padding: 8px 18px; background: var(--wash); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cockpit-regel { display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cockpit-regel-kern { flex: 1; min-width: 190px; }
.cockpit-cijfers { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cockpit-cijfer { display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; }
.cockpit-cijfer i { font-style: normal; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.cockpit-actie { display: flex; align-items: center; gap: 10px; }
.cockpit-advies { display: flex; align-items: center; gap: 4px; }
.cockpit-bedrag { min-width: 74px; text-align: right; font-weight: 600; }
.cockpit-sluimer { display: flex; }
.mand-lev { border-bottom: 1px solid var(--line); }
.mand-kop { display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 18px 4px; font-size: 13.5px; }
.mand-regel { display: flex; align-items: center; gap: 8px; padding: 5px 18px; font-size: 13px; }
@media (max-width: 1200px) {
  .cockpit { grid-template-columns: 1fr; }
  .cockpit-links, .cockpit-rechts { position: static; max-height: none; }
}

/* De instellingen-schil: vast submenu naast de inhoud; op smal scherm
   wordt het submenu een wikkelende chiprij boven de inhoud. */
.inst-schil { display: flex; gap: 22px; align-items: flex-start; max-width: 1160px; }
.inst-nav { width: 212px; flex: 0 0 212px; padding: 8px; display: flex; flex-direction: column; gap: 1px; }

/* ── Smal scherm: de werkplek blijft bruikbaar op tablet en telefoon.
   De zijbalk verdwijnt en komt met de bestaande paneelknop terug als
   overlay (de klasse zijbalk-dicht werkt hier dus als "toon hem even");
   brede tabellen scrollen in hun eigen kaart, nooit de hele pagina. ── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  body.zijbalk-dicht .side { display: flex; position: fixed; top: 0; left: 0; bottom: 0;
    width: 276px; z-index: 60; overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(21, 24, 33, .35), 8px 0 24px rgba(21, 24, 33, .18); }
  .content { padding: 16px 14px 40px; }
  main table { display: block; overflow-x: auto; max-width: 100%; }
  .inst-schil > * { min-width: 0; width: 100%; }
  .steps { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  main form { flex-wrap: wrap; }
  .card-head { flex-wrap: wrap; }
  .kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .inst-schil { flex-direction: column; }
  .inst-nav { width: 100%; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  /* Inline-gestileerde flexrijen en kolomgrids vouwen op smal netjes om;
     het planbord (pb-rij) is een bewust breed dagenraster en scrolt. */
  main [style*="display:flex"] { flex-wrap: wrap; }
  /* Flexkinderen mogen op smal nooit door hun inhoud opgerekt worden;
     de inhoud (tabel, stappenbalk) scrolt dan binnen zijn eigen kaart. */
  main [style*="display:flex"] > * { min-width: 0; }
  /* Kolomflexen worden blokken: een flexlijn kan kaarten anders met een
     onkrimpbaar kind mee de breedte in trekken. De gap wordt marge. */
  main [style*="flex-direction:column"] { display: block !important; }
  main [style*="flex-direction:column"] > * + * { margin-top: 16px; }
  main .btn-primary, main .ghost { white-space: normal; height: auto; min-height: 34px; }
  main .btn-primary.small, main .ghost.small { min-height: 28px; }
  .card-head .card-sub { flex: 1 1 100%; min-width: 0; }
  main [style*="grid-template-columns"]:not(.pb-rij) { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  #pb-bord { overflow-x: auto; }
  .pb-rij { min-width: 720px; }
}

/* De ontvangstcontrole: een regel per artikel met alles wat de vloer
   vastlegt naast elkaar, zodat het met een scanner in de hand werkt. */
.ontvangst-regel { display: flex; align-items: flex-end; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ontvangst-regel .field label { font-size: 11px; }

/* Een waarschuwing die om actie vraagt maar niets kapot maakt. */
.melding-let-op { background: var(--wash); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0;
  padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }

/* Hub-dashboards: klikbare cijfertegels met een rustig hover-signaal. */
.hub-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; margin-bottom: 16px; }
.hub-tegel { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px;
  text-decoration: none; color: inherit; }
.hub-tegel:hover { border-color: var(--axis); }
.hub-nav { display: flex; flex-direction: column; padding: 6px 0 10px; }
.hub-nav a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 18px;
  font-size: 13.5px; color: inherit; text-decoration: none; }
.hub-nav a:hover { background: var(--wash); }
.hub-nav a .pijl { color: var(--muted); }

/* De dagstart: tegels met een getal en een link erachter. */
.start-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.start-tegel { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit; }
.start-tegel:hover { border-color: var(--axis); }
.start-regel { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 13.5px; }
.start-regel:hover { background: var(--wash); }

/* De ouderdomsanalyse: vijf vakken die samen vertellen hoe lang het al
   openstaat. */
.ouderdom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line); }
.ouderdom-vak { background: var(--card); padding: 9px 12px; display: flex;
  flex-direction: column; gap: 2px; font-size: 13.5px; }
.ouderdom-vak.laat .num { color: var(--neg); font-weight: 650; }

/* De bulkbalk staat boven de lijst en blijft staan zolang er iets is
   aangevinkt; hij hoort bij de tabel, niet bij de pagina. */
.bulkbalk {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--wash2);
  font-size: 13px;
}
.bulkbalk .bulk-aantal { font-weight: 650; }
/* Inkomende facturen: het controlescherm. Het document en de velden staan
   naast elkaar, en de markering ligt als laag over de afgebeelde pagina. */
.ifveld input,
.ifveld select {
  margin-top: 3px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  font: inherit;
  font-size: 13.5px;
}
.ifveld input:disabled,
.ifveld select:disabled {
  background: var(--wash2);
  color: var(--muted);
}
.ifveld.span2 { grid-column: span 2; }
#iftabel input,
#iftabel select {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  background: var(--card);
}
#iftabel tr.ifrij:hover { background: var(--wash2); }
.ifblad + .ifblad { border-top: 1px solid var(--line); }
.ifmark { transition: all .12s ease-out; border-radius: 2px; }
#ifzone:hover { border-color: var(--data); }
/* De regeltabel heeft veel kolommen die allemaal invulbaar zijn; hij mag
   liever schuiven dan zichzelf platdrukken. */
/* De beslisbalk: wie, hoeveel, wat houdt het tegen, en de knop. Blijft in
   beeld zodat je tijdens het nakijken nooit hoeft te scrollen om te boeken. */
.ifbalk {
  /* Onder de kopbalk van de schil blijven plakken, niet eronder verdwijnen:
     die staat op sticky top 0 met z-index 80, dus deze balk begint waar hij
     ophoudt en blijft er netjes onder liggen. */
  position: sticky; top: 56px; z-index: 30;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 6px;
  box-shadow: 0 6px 18px -14px rgba(9, 11, 16, .45);
}
.ifbalk-wie { display: flex; flex-direction: column; min-width: 190px; }
.ifbalk-wie strong { font-size: 15px; }
.ifbalk-geld { display: flex; flex-direction: column; }
.ifbalk-bedrag { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ifbalk-stand { display: flex; gap: 6px; flex-wrap: wrap; }
.ifbalk-acties { margin-left: auto; display: flex; gap: 8px; }
.ifsneltoetsen { margin: 0 0 14px; font-size: 12px; color: var(--muted); }

/* De regels: lezen als tekst, bewerken als je erop klikt. */
.ifgemeen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--wash2);
}
.ifgemeen select { max-width: 210px; }
.iflijst { display: flex; flex-direction: column; }
.ifregel + .ifregel { border-top: 1px solid var(--line); }
.ifregel-kop {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 9px 14px; background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.ifregel-kop:hover { background: var(--wash2); }
.ifregel-tekst { flex: 1; min-width: 0; }
.ifregel-naam { display: block; font-weight: 550; font-size: 14px; }
.ifregel-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ifregel-bedrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ifregel-chev { color: var(--muted); transition: transform .12s; }
.ifregel[data-open="1"] .ifregel-chev { transform: rotate(180deg); }
.ifregel[data-open="1"] { background: var(--wash2); }
.ifregel[data-gewijzigd="1"] .ifregel-bedrag { opacity: .45; }
.ifregel-bewerk {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; padding: 4px 14px 14px;
}
.ifregel-bewerk .ifv { display: flex; flex-direction: column; }
.ifregel-bewerk .ifv.breed { grid-column: span 2; }
.ifregel-bewerk .ifv.smal { max-width: 120px; }
.ifregel-bewerk input, .ifregel-bewerk select {
  margin-top: 3px; padding: 5px 7px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--card);
}
.ifkeuze { display: flex; gap: 12px; margin-top: 5px; font-size: 13px; }
.ifkeuze label { display: flex; align-items: center; gap: 4px; }
/* Het document: EEN pagina tegelijk en groot genoeg om te lezen. Een strip
   met drie miniaturen ziet er netjes uit maar je kunt er niets op zien, en
   daar is het hier juist om te doen. */
/* Onder de beslisbalk blijven staan, niet erachter: de balk plakt op 56 en
   is ongeveer 74 hoog, dus het document begint daaronder. Zo zie je tijdens
   het langslopen van de regels altijd allebei. */
.ifdocpaneel { position: sticky; top: 146px; align-self: start; }
#ifdoc { max-height: calc(100vh - 210px); }
.ifpager { display: flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12.5px; }
#ifdoc { position: relative; background: var(--wash); max-height: 74vh; overflow: auto; }
.ifblad { position: relative; }
.ifblad img { width: 100%; display: block; }
.ifmark {
  position: absolute; display: none; border: 2px solid var(--data);
  background: rgba(255, 214, 0, .22); border-radius: 2px; pointer-events: none;
  transition: all .12s ease-out;
}

/* De kopvelden: twee kolommen, labels boven de waarde, alles even breed. */
.ifvelden {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; padding: 14px;
}
.ifmeer summary {
  cursor: pointer; padding: 9px 14px; font-size: 12.5px;
  color: var(--muted); border-top: 1px solid var(--line);
}
.ifmeer[open] summary { border-bottom: 1px solid var(--line); }

/* De voet van de regels, zoals de voet van de factuur zelf: btw links,
   totalen rechts, en wat het document zegt eronder. */
.ifvoet {
  display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between;
  padding: 12px 14px 14px; border-top: 1px solid var(--line);
  background: var(--wash2);
}
.ifbtwvoet td, .iftotalen td { padding: 2px 8px; font-size: 13.5px; }
.ifbtwvoet .cell-sub { display: block; }
.iftotalen { margin-left: auto; min-width: 260px; }
.iftotalen td.num { font-variant-numeric: tabular-nums; }
.iftotalen tr.eind td { border-top: 1px solid var(--axis); font-weight: 650; font-size: 15px; }
.iftotalen tr.cel-flets td { color: var(--muted); }
.iftotalen tr.cel-fout td { color: var(--neg); font-weight: 600; }

.ifalle-controles summary {
  cursor: pointer; padding: 8px 14px; font-size: 12.5px;
  color: var(--muted); border-top: 1px solid var(--line);
}
.ifdockop { flex-wrap: nowrap; white-space: nowrap; }
.ifdockop .card-title { flex: 0 0 auto; }

/* De regel onder de sleepzone: waar facturen vandaan komen als ze niet
   gesleept worden. Zelfde vorm als de rest van de werkbak. */
.ifpostbus { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: -8px 0 16px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--wash); }