/* 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;
  /* Storefront tokens: a theme overrides these four and the whole shop
     follows. The defaults are exactly what the shop shows today. */
  --site-breedte:1120px; --hoek:13px; --hoek-klein:8px;
  --winkel-letter:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --winkel-accent:var(--btn-bg); --winkel-accent-ink:var(--btn-ink);
  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: 8px; padding: 7px 11px; outline: none;
  box-shadow: inset 0 1px 1px rgba(16,24,40,.03);
  transition: border-color .12s ease, box-shadow .12s ease; }
.field input:not([type=checkbox]):not([type=radio]), .field select { height: 34px; box-sizing: border-box; }
.field input::placeholder, .veld-eenheid input::placeholder, .zoekveld input::placeholder { color: var(--muted); }
.field label .opt { color: var(--muted); font-weight: 400; margin-left: 4px; }
.field input:disabled, .field select:disabled { background: var(--wash); color: var(--muted); box-shadow: none; }
.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); }
/* Naast de rode fout en de groene melding hoort een derde: iets dat geen
   fout is maar wel je aandacht vraagt. Zelfde vorm, andere kleur. */
.form-let-op { background: var(--wash); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  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: var(--site-breedte); 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; }
/* De knoppen rechts in de kop vormen één groep. */
.shop-kop-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.shop-usp { border-bottom: 1px solid var(--line); background: var(--wash2); }
.shop-usp-in { max-width: var(--site-breedte); 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: var(--site-breedte); margin: 0 auto; padding: 26px 20px 40px; }
/* De voettekst hoort ALTIJD onderaan de pagina te staan, ook op een korte
   pagina met weinig erop. De winkel is daarom een kolom van minstens een
   schermhoogte waarin het middendeel meegroeit; de voettekst zakt dan
   vanzelf naar beneden in plaats van halverwege te blijven hangen. */
body.shop-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.shop-page > .shop-main { flex: 1 0 auto; width: 100%; }
body.shop-page > .shop-footer { flex-shrink: 0; }
.shop-kaart { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--hoek); 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: var(--hoek-klein); display: block; }
.shop-cat a:hover { background: var(--wash); }
.shop-cat a.actief { background: var(--winkel-accent); color: var(--winkel-accent-ink); font-weight: 600; }
.shop-footer { border-top: 1px solid var(--line); background: var(--card); margin-top: 30px; }
.shop-footer-in { max-width: var(--site-breedte); 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-fill, 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); }

/* ── Het inlogscherm ──
   Links een rustig vlak met fijne streepjes en een blauwe gloed, rechts de
   kaart. Alle maten komen uit de tokens hierboven; er is niets nieuws
   verzonnen behalve de invoervelden, die hier 38 hoog zijn omdat er maar
   twee van staan. */
.inlog { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); min-height: 100vh; }
.inlog-paneel {
  background: #12141a; color: #f2f3f7; padding: 38px 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 34px;
  position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.07);
}
.inlog-paneel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 100%;
}
.inlog-paneel::after {
  content: ""; position: absolute; width: 520px; height: 520px; right: -230px; top: -190px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(42,120,214,.30), rgba(42,120,214,0) 68%);
}
.inlog-paneel > * { position: relative; }
.inlog-logo { height: 22px; width: auto; display: block; align-self: flex-start; }
.inlog-midden { display: flex; flex-direction: column; gap: 22px; }
.inlog-paneel h2 {
  font-size: 24px; line-height: 1.22; font-weight: 600; letter-spacing: -.02em;
  max-width: 16ch; margin: 0;
}
.inlog-lead { font-size: 13.5px; color: #8d94a1; max-width: 36ch; margin: 10px 0 0; line-height: 1.55; }
.inlog-storing {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  font-size: 12.5px; line-height: 1.5; color: #8d94a1;
}
.inlog-storing .stip {
  width: 6px; height: 6px; border-radius: 50%; flex: none; margin-top: 6px;
  background: #e8a13c; box-shadow: 0 0 0 3px rgba(232,161,60,.18);
}
.inlog-paneelvoet {
  display: flex; align-items: center; gap: 0 12px; flex-wrap: wrap; line-height: 2;
  font-size: 12px; color: #8d94a1; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10);
}
.inlog-paneelvoet a { color: #8d94a1; text-decoration: none; }
.inlog-paneelvoet a:hover { color: #f2f3f7; text-decoration: underline; }
.inlog-paneelvoet .scheef { opacity: .35; }
.inlog-stand { display: inline-flex; align-items: center; gap: 7px; }
.inlog-stand i {
  width: 7px; height: 7px; border-radius: 50%; background: #17984b; display: block;
  box-shadow: 0 0 0 3px rgba(23,152,75,.20);
}
.inlog-vlak { display: grid; place-items: center; padding: 40px 28px; min-width: 0; }
.inlog-kolom { width: 100%; max-width: 392px; display: flex; flex-direction: column; gap: 18px; }
.inlog-omgeving {
  display: flex; align-items: center; gap: 9px; align-self: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px 5px 8px; font-size: 12.5px; color: var(--sub); box-shadow: var(--shadow);
}
.inlog-omgeving .bol {
  width: 19px; height: 19px; border-radius: 50%; background: var(--data-wash); color: var(--data);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.inlog-omgeving b { color: var(--ink); font-weight: 550; }
.inlog-kaart { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 16px; }
.inlog-titel { display: flex; flex-direction: column; gap: 5px; }
.inlog-titel h1 { margin: 0; }
.inlog-onder { font-size: 13px; color: var(--sub); line-height: 1.5; margin: 0; }
.inlog-labelrij { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inlog-klein { font-size: 12.5px; color: var(--sub); text-decoration: none; }
.inlog-klein:hover { color: var(--ink); text-decoration: underline; }
.inlog-kaart .field input { height: 38px; width: 100%; }
.inlog-ww { position: relative; }
.inlog-ww input { padding-right: 62px; }
/* Staat het paneel er, dan staat de naam er al: dan hoeft hij niet nog een
   keer als kopje boven de kaart. */
@media (min-width: 861px) { .inlog .inlog-merk { display: none; } }
.inlog-toon {
  position: absolute; right: 5px; top: 5px; height: 28px; padding: 0 9px; border-radius: 6px;
  font-size: 12px; font-weight: 550; color: var(--sub);
}
.inlog-toon:hover { background: var(--wash); color: var(--ink); }
.inlog-vink { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.inlog-vink input { width: 15px; height: 15px; accent-color: var(--data); margin: 0; }
.inlog-uitwegen { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.inlog-uitwegen a { font-size: 12.5px; color: var(--sub); text-decoration: none; }
.inlog-uitwegen a:hover { color: var(--ink); text-decoration: underline; }
.inlog-voet {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.inlog-voet .punt { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); display: block; }
.inlog-qr {
  align-self: center; width: 180px; height: 180px; border-radius: 12px;
  padding: 10px; background: #fff; border: 1px solid var(--line); image-rendering: pixelated;
}
.inlog-wacht { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px;
  font-size: 13.5px; color: var(--sub); }
.inlog-ring { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--data); }
@media (prefers-reduced-motion: no-preference) {
  .inlog-ring { animation: inlog-draai 1s linear infinite; }
}
@keyframes inlog-draai { to { transform: rotate(360deg); } }

/* De zes hokjes van de tweede stap. Zes losse velden met dezelfde naam:
   zonder javascript stuurt het formulier ze gewoon alle zes mee. */
.cijfers { display: flex; gap: 8px; }
.cijfers input {
  flex: 1; min-width: 0; height: 50px; text-align: center; font: inherit; font-size: 21px;
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
}
.cijfers input:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); outline: none; }

/* De sterktemeter bij een zelfgekozen wachtwoord. */
.meter { display: flex; gap: 5px; margin-top: 2px; }
.meter i { height: 4px; flex: 1; border-radius: 2px; background: var(--line); }
.meter i.zwak { background: var(--neg); }
.meter i.matig { background: var(--warn); }
.meter i.aan { background: var(--pos); }
.eisen { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.eisen span.ok { color: var(--pos); }

.herstelcodes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: var(--wash); border-radius: 10px; padding: 14px;
}
.herstelcodes code { font-size: 13px; letter-spacing: .04em; }

.keuzes { display: flex; flex-direction: column; gap: 8px; }
.keuze {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card);
  padding: 11px 13px; color: var(--ink); font-size: 13.5px; font-weight: 550;
}
.keuze:hover { background: var(--wash); border-color: var(--data); }
.keuze .letter {
  width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--wash);
  color: var(--sub); display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.keuze .pijl { margin-left: auto; color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
  .inlog { grid-template-columns: minmax(0,1fr); }
  .inlog-paneel { display: none; }
  .inlog-vlak { padding: 26px 18px; }
}
.keuze .keuzetekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.keuze .naam { font-size: 13.5px; font-weight: 550; }
.keuze .plaats { font-size: 12px; font-weight: 400; color: var(--muted); }

/* ── De kassadag: tellen en afsluiten ── */
/* Een regel in een kaart: naam links, bedrag rechts, met een haarlijn
   ertussen. De laatste regel houdt zijn lijn niet, anders dubbelt hij met
   de rand van de kaart. */
/* Een eigen naam, geen verbreding van .regel: die klasse wordt ook in de
   winkelpagina's gebruikt en die hoort hier niets van te merken. */
.dagregel {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.dagregel:last-child { border-bottom: 0; }
.dagregel > .num { white-space: nowrap; }

.telkop {
  display: grid; grid-template-columns: 78px 1fr 100px; gap: 10px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.telkop span:last-child { text-align: right; }
.telrij {
  display: grid; grid-template-columns: 78px 1fr 100px; gap: 10px;
  align-items: center; padding: 4px 0;
}
.telrij .coupure { font-weight: 600; font-variant-numeric: tabular-nums; }
.telrij input { width: 100%; text-align: right; }
.telrij .telsom { color: var(--sub); font-variant-numeric: tabular-nums; }

/* De uitkomst van de telling: klopt het, of niet, en met hoeveel. Groen
   en oranje dragen de betekenis; de tekst zegt hem er in woorden bij,
   want kleur alleen is geen boodschap. */
.uitkomst {
  border-radius: 10px; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--wash2);
}
.uitkomst.klopt { background: var(--chip-green-bg); border-color: transparent; }
.uitkomst.klopt .uitkomst-kop { color: var(--chip-green-ink); }
.uitkomst.wijkt { background: var(--chip-orange-bg); border-color: transparent; }
.uitkomst.wijkt .uitkomst-kop { color: var(--chip-orange-ink); }
.uitkomst-kop { font-weight: 600; margin-bottom: 2px; }
.uitkomst-tekst { font-size: 13px; color: var(--sub); }

/* ── Thema van de winkel ────────────────────────────────────────────────
   Alleen binnen de winkel (body.winkel): het beheer houdt zijn eigen
   huisstijl. Een thema zet de tokens hierboven en de winkel volgt. */
body.winkel { font-family: var(--winkel-letter); }
body.winkel .btn-primary { background: var(--winkel-accent); color: var(--winkel-accent-ink);
  border-radius: var(--hoek-klein); }
body.winkel a.btn-primary { color: var(--winkel-accent-ink); }
body.winkel .card { border-radius: var(--hoek); }
body.winkel .ghost { border-radius: var(--hoek-klein); }
body.winkel input, body.winkel select, body.winkel textarea { border-radius: var(--hoek-klein); }

/* ── Vormen: elk onderdeel van de winkel kan er anders uitzien ──────────
   Een thema kiest per onderdeel een vorm; zonder keuze blijft alles zoals
   het pakket het toont. Een nieuwe vorm is één regel hier plus één regel
   in het register. */
/* Zoeken in het midden: de zoekbalk neemt alle ruimte tussen het logo en
   de knoppen, en de rij breekt niet meer af zodat de knoppen rechts
   blijven staan. Op een smal scherm mag hij weer afbreken. */
.shop-header.vorm-zoek-midden .shop-header-in { flex-wrap: nowrap; }
.shop-header.vorm-zoek-midden .shop-zoek { max-width: none; flex: 1 1 auto; min-width: 0; }
.shop-header.vorm-zoek-midden .ghost, .shop-header.vorm-zoek-midden .shop-wagen { flex: none; }
@media (max-width: 1000px) {
  .shop-header.vorm-zoek-midden .shop-header-in { flex-wrap: wrap; }
  .shop-header.vorm-zoek-midden .shop-zoek { min-width: 200px; }
}
.shop-header.vorm-compact .shop-header-in { padding: 7px 20px; gap: 12px; }
.shop-header.vorm-compact .logo-beeld { height: 20px; }

.shop-usp.vorm-punten .shop-usp-in span::before { content: "·"; margin-right: 7px; color: var(--muted); }
.shop-usp.vorm-punten .shop-usp-in span:first-child::before { content: none; }
.shop-usp.vorm-gecentreerd .shop-usp-in { justify-content: center; }

.shop-kaart.vorm-rustig { box-shadow: none; }
.shop-kaart.vorm-rustig:hover { box-shadow: none; transform: none; border-color: var(--winkel-accent); }
.shop-kaart.vorm-groot-beeld img, .shop-kaart.vorm-groot-beeld .foto-leeg { height: 230px; }

.shop-tegels.vorm-ruim { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.shop-tegels.vorm-dicht { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

.shop-footer.vorm-smal { margin-top: 18px; }
.shop-footer.vorm-smal .shop-footer-in { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px; font-size: 12.5px; }
.shop-footer.vorm-smal .shop-footer-in > div > div:first-child { margin-bottom: 4px; }
.shop-footer.vorm-smal .shop-footer-in > div > div:last-child { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
@media (max-width: 760px) {
  .shop-tegels.vorm-ruim, .shop-tegels.vorm-dicht { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-kaart.vorm-groot-beeld img, .shop-kaart.vorm-groot-beeld .foto-leeg { height: 150px; }
}

/* ── Menubalk, tweede rij en het uitklapmenu ────────────────────────────
   De winkelier stelt deze menu's zelf samen. Zonder eigen menu blijven ze
   weg en toont de winkel wat het pakket zelf doet. */
.shop-menu { border-bottom: 1px solid var(--line); background: var(--card); }
.shop-menu-in { max-width: var(--site-breedte); margin: 0 auto; padding: 0 20px;
  display: flex; gap: 4px; flex-wrap: wrap; }
.shop-menu-item { position: relative; }
.shop-menu-item > a, .shop-menu-item > summary { display: inline-block; padding: 11px 12px;
  font-size: 13.5px; font-weight: 550; color: var(--ink); text-decoration: none;
  cursor: pointer; list-style: none; }
.shop-menu-item > summary::-webkit-details-marker { display: none; }
.shop-menu-item > a:hover, .shop-menu-item > summary:hover { color: var(--winkel-accent); }
.shop-menu-item.heeft-onder > summary::after {
  content: "▾"; font-size: 10px; margin-left: 5px; color: var(--muted); }
.shop-menu-lade { position: absolute; left: 0; top: 100%; z-index: 45; min-width: 220px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek-klein);
  box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 6px; display: none; }
/* Aanwijzen met de muis klapt open zonder klik; aantikken en Enter doen
   het via het open-kenmerk van het element zelf. */
.shop-menu-item:hover .shop-menu-lade, .shop-menu-item[open] .shop-menu-lade { display: block; }
/* De laatste regel in de lade gaat naar de categorie zelf, zodat het hele
   assortiment altijd één klik weg is. */
.shop-menu-lade .shop-menu-alles { font-weight: 650; border-top: 1px solid var(--line);
  border-radius: 0; margin-top: 4px; padding-top: 8px; }
.shop-menu-lade .shop-menu-alles::after { content: " ›"; color: var(--muted); }
.shop-menu-lade a, .shop-menu-lade .shop-menu-kop-tekst { display: block; padding: 7px 10px;
  border-radius: var(--hoek-klein); font-size: 13.5px; color: var(--ink); text-decoration: none; }
.shop-menu-lade a:hover { background: var(--wash); }
.shop-menu2 { border-bottom: 1px solid var(--line); background: var(--wash2); }
.shop-menu2-in { max-width: var(--site-breedte); margin: 0 auto; padding: 6px 20px;
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; }
.shop-menu2-in a { color: var(--sub); text-decoration: none; }
.shop-menu2-in a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .shop-menu-in { overflow-x: auto; flex-wrap: nowrap; }
  .shop-menu-item > a, .shop-menu-item > summary { white-space: nowrap; padding: 10px 10px; }
  /* Op een smal scherm schuift de lade gewoon onder de rij open in plaats
     van eroverheen te zweven. */
  .shop-menu-in { overflow: visible; flex-wrap: wrap; }
  .shop-menu-item[open] { width: 100%; }
  .shop-menu-item:hover .shop-menu-lade { display: none; }
  .shop-menu-item[open] .shop-menu-lade { position: static; display: block;
    box-shadow: none; border: 0; padding: 0 0 8px; }
}
.shop-voet-onder { border-top: 1px solid var(--line); }
.shop-voet-onder-in { max-width: var(--site-breedte); margin: 0 auto; padding: 10px 20px;
  font-size: 12px; color: var(--muted); }

/* ── De lade op een telefoon ────────────────────────────────────────────
   Hetzelfde menu als op een groot scherm, maar als scherm-vullend paneel
   met een verdieping per categorie. Op een breed scherm bestaat hij niet. */
.shop-lade-knop { display: none; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--hoek-klein); width: 36px; height: 34px; align-items: center; justify-content: center; cursor: pointer; }
.shop-lade { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto; }
.shop-lade[hidden] { display: none; }
.shop-lade-kop { position: sticky; top: 0; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.shop-lade-titel { font-weight: 650; font-size: 15px; flex: 1; }
.shop-lade-sluit, .shop-lade-terug { border: 0; background: none; color: var(--ink); font-size: 26px;
  line-height: 1; cursor: pointer; padding: 0 6px; }
.shop-lade-lijst { display: flex; flex-direction: column; }
.shop-lade-regel { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: none; border-left: 0; border-right: 0;
  border-top: 0; font: inherit; font-size: 15px; color: var(--ink); text-align: left; text-decoration: none;
  width: 100%; cursor: pointer; }
.shop-lade-regel:active { background: var(--wash); }
.shop-lade-pijl { color: var(--muted); font-size: 20px; }
/* De scheiding tussen de categorieën en de vaste links moet ook zichtbaar
   blijven in een thema waarin achtergrond en vlakken dicht bij elkaar
   liggen; vandaar een echte lijn boven en onder de strook. */
.shop-lade-scheiding { height: 10px; background: var(--wash);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .shop-lade-knop { display: inline-flex; }
  .shop-menu, .shop-menu2 { display: none; }
}

/* ── Het brede assortimentspaneel ───────────────────────────────────────
   Links de categorieën, rechts wat erin zit. Alleen op een groot scherm;
   op een telefoon doet de lade dit werk. */
.shop-paneel-knop { display: none; align-items: center; gap: 7px; }
/* Vast aan het venster, niet aan de pagina: de kop blijft plakken bij het
   scrollen, dus een paneel dat aan de pagina hangt opent boven het scherm.
   De bovenkant zet het script gelijk aan de onderkant van de kop. */
.shop-paneel { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: var(--card);
  border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.10);
  max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.shop-paneel[hidden] { display: none; }
.shop-paneel-in { max-width: var(--site-breedte); margin: 0 auto; display: flex; gap: 0;
  padding: 0 20px; min-height: 260px; }
.shop-paneel-links { width: 240px; flex: none; border-right: 1px solid var(--line);
  padding: 10px 10px 14px 0; display: flex; flex-direction: column; }
.shop-paneel-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink);
  text-align: left; border-radius: var(--hoek-klein); cursor: pointer; }
.shop-paneel-cat:hover, .shop-paneel-cat.actief { background: var(--wash); }
.shop-paneel-pijl { color: var(--muted); }
.shop-paneel-meer { padding: 8px 12px; font-size: 12px; color: var(--muted); }
.shop-paneel-rechts { flex: 1; padding: 14px 0 18px 20px; min-width: 0; }
.shop-paneel-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.shop-paneel-kop { display: block; font-weight: 650; font-size: 13.5px; color: var(--ink);
  text-decoration: none; margin-bottom: 8px; }
.shop-paneel-kop:hover { color: var(--winkel-accent); }
.shop-paneel-artikel { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 13px; color: var(--sub); text-decoration: none; }
.shop-paneel-artikel:hover { color: var(--ink); }
.shop-paneel-artikel img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--hoek-klein);
  border: 1px solid var(--line); flex: none; }
.shop-paneel-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-paneel-alles { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--winkel-accent); text-decoration: none; }
.shop-paneel-alles::after { content: " ›"; }
@media (min-width: 761px) {
  .shop-paneel-knop { display: inline-flex; }
}
/* Inklapbare kaarten in het beheer: het driehoekje van de browser weg, en
   een eigen pijl die meedraait. */
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 11px;
  transition: transform .12s; }
details.card[open] > summary::after { transform: rotate(180deg); }

/* ── Eigen pagina's (blok G) ─────────────────────────────────────────────
   Een pagina is een stapel blokken binnen de winkelschil. De blokken
   dragen de tokens van het thema, dus een pagina ziet er in elke winkel
   uit alsof hij daar hoort. */
.site-pagina { display: flex; flex-direction: column; }
.site-blok > section { padding: 34px 20px; }
.site-blok:first-child > section { padding-top: 26px; }
.site-pagina h2 { font-size: 24px; margin: 0 0 14px; letter-spacing: -.01em; }
.site-pagina h3 { font-size: 17px; margin: 18px 0 6px; }
.site-pagina p { margin: 0 0 10px; max-width: 68ch; line-height: 1.62; }
.site-pagina ul { margin: 0 0 12px; padding-left: 20px; max-width: 68ch; line-height: 1.62; }
.site-pagina li { margin: 3px 0; }
.site-knop { display: inline-flex; margin-top: 12px; text-decoration: none; }

.site-kop { position: relative; overflow: hidden; border-radius: var(--hoek);
  background: var(--wash); padding: 52px 20px; }
.site-kop-foto { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .30; }
.site-kop-in { position: relative; max-width: var(--site-breedte); margin: 0 auto; }
.site-kop h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.site-kop-tekst { font-size: 16.5px; color: var(--muted); max-width: 60ch; }

.site-tekst, .site-punten, .site-vraag { max-width: var(--site-breedte); margin: 0 auto; width: 100%; }

.site-fototekst { max-width: var(--site-breedte); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.site-fototekst.foto-rechts .site-fototekst-foto { order: 2; }
.site-fototekst-foto { width: 100%; height: auto; border-radius: var(--hoek); display: block; }
@media (max-width: 760px) {
  .site-fototekst { grid-template-columns: 1fr; gap: 18px; }
  .site-fototekst.foto-rechts .site-fototekst-foto { order: 0; }
}

.site-punten-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.site-punt { background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek-klein);
  padding: 14px 16px; font-weight: 600; }

.site-vraag-regel { border-bottom: 1px solid var(--line); }
.site-vraag-regel summary { cursor: pointer; padding: 13px 0; font-weight: 600; list-style: none; }
.site-vraag-regel summary::-webkit-details-marker { display: none; }
.site-vraag-regel summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
.site-vraag-regel[open] summary::after { content: "\2212"; }
.site-vraag-antwoord { padding: 0 0 14px; color: var(--muted); max-width: 68ch; line-height: 1.62; }

.site-oproep { background: var(--wash); }
.site-oproep-in { max-width: var(--site-breedte); margin: 0 auto; text-align: center; }
.site-oproep-in p { margin-left: auto; margin-right: auto; }

/* Het beheerscherm: een blok is een kaartje met zijn eigen velden. */
.pagina-blok { border-bottom: 1px solid var(--line); padding: 14px 18px; }
.pagina-blok-kop { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pagina-blok-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pagina-blok-velden label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pagina-blok-erbij { display: flex; gap: 12px; align-items: flex-end; padding: 14px 18px; flex-wrap: wrap; }
.pagina-blok-erbij label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
/* De stand van een pagina in één oogopslag: live, nog een concept, of live
   met werk dat nog niet gepubliceerd is. */
.chip.stand-live { color: var(--pos); border-color: currentColor; }
.chip.stand-concept { color: var(--muted); }
.chip.stand-wijziging { color: var(--neg); border-color: currentColor; }
/* De kaart met naam, adres en SEO: velden onder elkaar met hun label, net
   als bij de blokken zelf. */
.pagina-kaartvelden { display: grid; gap: 12px; padding: 14px 18px; }
.pagina-kaartvelden label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px; color: var(--muted); }
/* Kopjes boven de groepen in een submenu, zoals de mockup ze zet. Een
   regel met "buiten" woont ergens anders in het beheer: hij hoort er wel
   bij, maar hij is niet van deze hoek alleen. */
.subnav-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 12px 12px 4px; }
.inst-nav > .subnav-kop:first-child { padding-top: 6px; }
.inst-nav a.buiten::after { content: "↗"; margin-left: 5px; color: var(--muted); font-size: 11px; }

/* ── De blokken van blok H ───────────────────────────────────────────── */
.site-conceptbalk { background: var(--wash); border-bottom: 1px solid var(--line);
  padding: 9px 20px; text-align: center; font-size: 13px; color: var(--sub); }

/* De hero met een foto is de foto, met de tekst eronderin. Niet een vlak
   met een vage foto erdoorheen: dan lees je de foto door de letters heen en
   allebei half. Vandaar de volle foto, een donkere waas onderaan, en witte
   letters daarop. Zonder foto blijft het een rustig vlak met gewone
   letterkleur. */
.site-hero { position: relative; overflow: hidden; border-radius: var(--hoek);
  background: var(--wash); padding: 62px 20px; }
.site-hero.smal { padding: 34px 20px; }
.site-hero-in { position: relative; max-width: var(--site-breedte); margin: 0 auto; }
.site-hero h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -.02em; text-wrap: balance; }
.site-hero.smal h1 { font-size: 26px; }
.site-hero-tekst { font-size: 16.5px; color: var(--muted); max-width: 60ch; }

.site-hero.metfoto { display: flex; padding: 0; }
.site-hero-foto { width: 100%; height: 352px; object-fit: cover; display: block; }
.site-hero.metfoto.smal .site-hero-foto { height: 232px; }
.site-hero-waas { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(17, 18, 22, .74) 0%,
    rgba(17, 18, 22, .42) 34%, rgba(17, 18, 22, 0) 66%); }
.site-hero.metfoto .site-hero-in { position: absolute; inset: 0; max-width: none;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 14px; padding: 30px; color: #fff; }
.site-hero.metfoto h1 { color: #fff; margin: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, .34); }
.site-hero.metfoto .site-hero-tekst { color: rgba(255, 255, 255, .92); margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .34); }
.site-hero-knop { display: inline-flex; align-items: center; gap: 8px;
  background: var(--winkel-accent); color: #fff; text-decoration: none;
  border-radius: var(--hoek-klein); padding: 11px 18px; font-weight: 600; }
.site-hero-knop:hover { filter: brightness(1.08); color: #fff; }
.site-hero:not(.metfoto) .site-hero-knop { margin-top: 4px; }
@media (max-width: 700px) {
  .site-hero-foto { height: 268px; }
  .site-hero.metfoto .site-hero-in { padding: 20px; gap: 11px; }
}

.site-tekstfoto { max-width: var(--site-breedte); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.site-tekstfoto .site-tekstfoto-foto { order: 2; }
.site-tekstfoto.foto-links .site-tekstfoto-foto { order: 0; }
.site-tekstfoto-foto { width: 100%; height: auto; border-radius: var(--hoek); display: block; }
@media (max-width: 760px) {
  .site-tekstfoto { grid-template-columns: 1fr; gap: 18px; }
  .site-tekstfoto .site-tekstfoto-foto { order: 0; }
}

.site-knoppen-in, .site-merken-in { max-width: var(--site-breedte); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px; }
.site-merken-in { gap: 8px 22px; align-items: center; }
.site-merk { color: var(--muted); font-weight: 600; letter-spacing: .02em; }

.site-snelstart, .site-team, .site-fototegels, .site-merken, .site-producten,
.site-categorien, .site-contact, .site-formulier, .site-video {
  max-width: var(--site-breedte); margin: 0 auto; width: 100%; }
.site-snelstart-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.site-snelstart-tegel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--hoek-klein); padding: 15px 16px; font-weight: 600; text-decoration: none; }
.site-snelstart-tegel:hover { border-color: var(--winkel-accent); color: var(--winkel-accent); }

.site-team-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.site-teamlid img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--hoek-klein); margin-bottom: 8px; }
.site-teamnaam { font-weight: 650; }
.site-teamrol { color: var(--muted); font-size: 13px; }

.site-fototegels-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.site-fototegels-in img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--hoek-klein); display: block; }

.site-video-vlak { background: var(--wash); border: 1px solid var(--line);
  border-radius: var(--hoek); padding: 26px 20px; text-align: center; }
.site-video-uitleg { color: var(--muted); font-size: 13px; max-width: 56ch;
  margin: 12px auto 0; }
.site-video-vlak iframe { width: 100%; aspect-ratio: 16/9; border: 0;
  border-radius: var(--hoek-klein); display: block; }

.site-producten-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.site-product { display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek);
  padding: 12px; color: inherit; }
.site-product:hover { border-color: var(--winkel-accent); }
.site-product img { width: 100%; aspect-ratio: 1; object-fit: contain;
  border-radius: var(--hoek-klein); }
.site-product-naam { font-weight: 600; font-size: 13.5px; }
.site-product-prijs { color: var(--muted); font-size: 13px; }
.site-leeg { color: var(--muted); }

/* De categorietegel: foto boven, naam en aantal eronder, en rechts een
   rond pijltje. Dat pijltje is er niet als versiering; het is het teken dat
   de hele tegel aanklikbaar is, wat aan een foto met een woord eronder niet
   te zien is. */
.site-categorien-in { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.site-categorie { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--hoek); background: var(--card);
  text-decoration: none; color: inherit; }
.site-categoriefoto { display: block; aspect-ratio: 16/9; overflow: hidden;
  background: var(--wash); }
.site-categoriefoto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease; }
.site-categorie:hover .site-categoriefoto img { transform: scale(1.05); }
.site-categorienaam { display: block; padding: 14px 16px; }
.site-categorienaam b { display: block; font-weight: 650; }
.site-categorienaam small { display: block; padding-top: 4px; font-size: 12px;
  color: var(--muted); }
.site-categoriepijl { display: none; }
.site-categorie:hover { border-color: var(--winkel-accent); }
.site-categorie:hover .site-categorienaam b { color: var(--winkel-accent); }

.site-cta { background: var(--wash); }
.site-cta-in { max-width: var(--site-breedte); margin: 0 auto; text-align: center; }
.site-cta-in p { margin-left: auto; margin-right: auto; }

.site-contact-in { display: grid; grid-template-columns: max-content 1fr;
  gap: 7px 18px; margin: 0; max-width: 60ch; }
.site-contact-in dt { color: var(--muted); }
.site-contact-in dd { margin: 0; }

.site-formulier-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; max-width: 720px; }
.site-formulier-in label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted); }
.site-formulier-in label.breed, .site-formulier-in button { grid-column: 1 / -1; }
.site-formulier-in button { justify-self: start; }

.site-terugbel { background: var(--wash); }
.site-terugbel-in { max-width: var(--site-breedte); margin: 0 auto; text-align: center; }
.site-terugbel-form { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 12px; }
.site-terugbel-form input { min-width: 220px; }
.alleen-voorlezen { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

.pagina-blok-velden .taalcode { text-transform: uppercase; font-size: 10.5px;
  letter-spacing: .05em; background: var(--wash); border-radius: 4px; padding: 1px 4px;
  margin-right: 4px; }
/* De bevestiging na een formulier op een eigen pagina. */
.site-melding { max-width: var(--site-breedte); margin: 16px auto 0; width: 100%;
  padding: 12px 16px; border-radius: var(--hoek-klein); font-size: 14px; }
.site-melding.goed { background: var(--wash); border-left: 3px solid var(--pos); }
.site-melding.fout { background: var(--wash); border-left: 3px solid var(--neg); }
/* De aan-uitregels van de winkelpagina's. */
.wp-regel { display: flex; gap: 8px; align-items: center; padding: 9px 18px;
  border-bottom: 1px solid var(--line); }
/* De cockpit: vier tegels met wat aandacht vraagt. */
.site-cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.site-tegel { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek);
  text-decoration: none; color: inherit; }
.site-tegel:hover { border-color: var(--ink); }
.site-tegel-getal { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--pos);
  font-variant-numeric: tabular-nums; }
.site-tegel.vraagt-aandacht .site-tegel-getal { color: var(--neg); }
.site-tegel-naam { font-weight: 650; }
/* De kaarten naast elkaar houden hun eigen hoogte: een lege lijst hoort
   niet net zo lang te worden als een volle. */
.site-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; align-items: start; }
/* Wat zoeken op een eigen pagina vond, boven de artikelen. */
.shop-zoekpaginas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--wash); border-radius: var(--hoek); padding: 12px 16px; margin-bottom: 14px; }
.shop-zoekpaginas .eyebrow { margin-right: 4px; }
.shop-zoekpaginas a { font-weight: 600; }
/* Blog: de kop van een bericht, de tegels en de reacties. */
.site-berichtkop { max-width: var(--site-breedte); margin: 0 auto; width: 100%; padding: 26px 20px 0; }
.site-berichtkop h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.02em; text-wrap: balance; }
.site-berichtfoto { width: 100%; height: auto; border-radius: var(--hoek); margin-top: 16px; display: block; }
.site-berichten { max-width: var(--site-breedte); margin: 0 auto; width: 100%; }
.site-berichten-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.site-bericht { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; }
.site-bericht img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--hoek); }
.site-bericht-naam { font-weight: 650; }
.site-bericht:hover .site-bericht-naam { color: var(--winkel-accent); }
.site-reacties { max-width: var(--site-breedte); margin: 0 auto; width: 100%; padding: 30px 20px; }
.site-reactie { border-top: 1px solid var(--line); padding: 12px 0; }
.site-reactie-wie { font-weight: 600; }
.site-reactie-tekst { color: var(--muted); white-space: pre-line; margin-top: 3px; }
.site-reactie-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; max-width: 640px; margin-top: 18px; }
.site-reactie-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.site-reactie-form label.breed, .site-reactie-form button { grid-column: 1 / -1; }
.site-reactie-form button { justify-self: start; }
.site-reactie-rij { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line); }
/* De schrijfhulp: de knop staat bij het label, de melding erachter. */
.schrijfrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schrijfmelding { font-size: 12px; color: var(--muted); }
.schrijfmelding.fout { color: var(--neg); }

/* De lade met suggesties onder de zoekbalk. */
.shop-zoek { position: relative; }
.shop-sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--hoek);
  box-shadow: 0 18px 40px rgba(0,0,0,.12); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.shop-sug[hidden] { display: none; }
.shop-sug-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px 4px; }
.shop-sug-regel, .shop-sug-artikel, .shop-sug-alles {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  text-decoration: none; color: inherit; font-size: 13.5px; }
.shop-sug-regel:hover, .shop-sug-artikel:hover, .shop-sug-alles:hover,
.shop-sug a.sug-aan { background: var(--wash); }
.shop-sug-artikel img, .shop-sug-geenfoto { width: 34px; height: 34px; flex: none;
  object-fit: contain; border-radius: var(--hoek-klein); background: var(--wash); }
.shop-sug-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-sug-prijs { color: var(--muted); }
.shop-sug-alles { border-top: 1px solid var(--line); font-weight: 600; color: var(--winkel-accent); }
.shop-sug-leeg { padding: 12px 14px; color: var(--muted); font-size: 13.5px; }

/* De kop: telefoon met openingstijden, en de btw-schakelaar. */
.shop-koptel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: inherit; white-space: nowrap; }
.shop-koptel-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.shop-koptel-tekst b { font-size: 13.5px; }
.shop-koptel-tekst small { font-size: 11px; color: var(--muted); font-weight: 400; }
.shop-btw { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  color: inherit; font-size: 13.5px; white-space: nowrap; }
.shop-btw-schakel { width: 38px; height: 21px; border-radius: 999px; background: #b9bfba;
  position: relative; flex: none; transition: background .15s; }
.shop-btw-schakel::after { content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.shop-btw.aan .shop-btw-schakel { background: var(--ink); }
.shop-btw.aan .shop-btw-schakel::after { left: 19px; }

/* ── Retour aan de balie ── */
/* De twee kaarten groeien met hun inhoud mee in plaats van elkaars hoogte
   over te nemen. Een bon met een regel liet anders een half scherm wit
   onder de lijst staan. */
#retourvorm > .card { align-self: start; }

.retourkop {
  display: grid; grid-template-columns: 1fr 76px 90px 96px; gap: 10px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.retourkop span:not(:first-child) { text-align: right; }
.retourrij {
  display: grid; grid-template-columns: 1fr 76px 90px 96px; gap: 10px;
  align-items: center; padding: 8px 0;
}
.retourrij .naam { font-size: 13.5px; }
.retourrij .naam small { display: block; color: var(--muted); font-size: 12px; }
.retourrij input { width: 100%; text-align: right; }
.retourrij .retour-som { color: var(--sub); font-variant-numeric: tabular-nums; }
/* Het vinkje hoort bij de regel erboven en staat daarom ingesprongen, niet
   als losse regel in de lijst. */
.retourdefect {
  display: flex; gap: 7px; align-items: center; font-size: 12.5px;
  color: var(--muted); padding: 0 0 10px 2px; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.retourdefect input { width: auto; }

/* De bevestiging na "in de winkelwagen": onderin, kort, zonder de pagina te
   verschuiven. */
.shop-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: #1f2937; color: #fff; border-radius: 10px; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 90; max-width: calc(100vw - 32px); }
.shop-toast.zichtbaar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.shop-toast-vink { display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
  align-items: center; justify-content: center; background: var(--winkel-accent, #16a34a); color: #fff; font-size: 12px; font-weight: 700; }
.shop-toast a { color: #fff; font-weight: 600; text-decoration: underline; margin-left: 4px; }
.nova-inwagen.bezig, .pdp-koopknop.bezig { opacity: .7; }
.nova-inwagen.gelukt { background: #16a34a !important; }
@media (prefers-reduced-motion: reduce) { .shop-toast { transition: none; } }

/* ── De chat: een paneel rechtsonder, zoals een goede winkelchat eruitziet.
   Maten van het voorbeeld (houtjansok): paneel 380 x 650, hoek 13, schaduw
   0 5px 40px 15%; kop 67 hoog op een licht vlak; tabs 54 hoog; ronde knop
   van 50 rechtsonder. ── */
.chat-widget { position: fixed; right: 21.6px; bottom: calc(16px + var(--koopbalk-h, 0px)); z-index: 60; transition: bottom .25s ease; }
.chat-paneel { position: fixed; right: 21.6px; bottom: calc(94px + var(--koopbalk-h, 0px)); width: 380px; height: 650px;
  max-height: calc(100vh - 110px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--card, #fff); color: var(--ink, #37352f); border-radius: 13px;
  box-shadow: 0 5px 40px rgba(0, 0, 0, .15); font-size: 13.5px; line-height: 1.5; }
.chat-paneel[hidden] { display: none; }
.chat-kop { display: flex; align-items: center; gap: 10.8px; padding: 14.4px 18px; background: var(--wash, #f7f6f3); min-height: 67px; }
.chat-kop-icoon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card, #fff); color: var(--ink, #333); flex: none; }
.chat-kop-tekst { display: flex; flex-direction: column; min-width: 0; }
.chat-kop-tekst b { font-size: 15.3px; font-weight: 700; line-height: 1.3; }
.chat-kop-tekst small { font-size: 11.7px; color: var(--muted, #71717a); }
.chat-sluit { margin-left: auto; width: 29px; height: 29px; border: 0; background: transparent; color: var(--muted, #71717a);
  font-size: 22px; line-height: 1; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.chat-sluit:hover { background: rgba(0, 0, 0, .06); color: var(--ink, #333); }
.chat-lijf { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-zicht { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-zicht[hidden] { display: none; }
.chat-zicht[data-chat-view="home"], .chat-zicht[data-chat-view="help"] { align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 6px; }
.chat-hallo-icoon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--wash, #f4f4f5); color: var(--ink, #333); margin-bottom: 14px; }
.chat-hallo { font-size: 18px; font-weight: 700; }
.chat-zicht p { margin: 0 0 14px; color: var(--muted, #71717a); font-size: 13.5px; max-width: 30ch; }
.chat-start { display: inline-flex; align-items: center; gap: 7.2px; padding: 9px 18px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--winkel-accent, #16a34a); color: #fff; font: 600 12.6px/18.9px inherit; font-family: inherit; }
.chat-start:hover { filter: brightness(1.08); }
.chat-help-links { display: flex; flex-direction: column; gap: 8px; }
.chat-help-links a { font-weight: 600; color: var(--winkel-accent, #16a34a); }
.chat-berichten { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.chat-bel { background: var(--wash, #f4f4f5); border-radius: 12px 12px 12px 3px; padding: 8px 12px; max-width: 85%; align-self: flex-start; word-wrap: break-word; }
.chat-bel.van-mij { align-self: flex-end; background: var(--winkel-accent, #16a34a); color: #fff; border-radius: 12px 12px 3px 12px; }
.chat-form { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-intro { display: flex; flex-direction: column; gap: 6px; }
.chat-intro input { height: 38px; border: 1px solid var(--line, #e4e4e7); border-radius: 6px; padding: 0 12px; font-size: 12.6px; background: var(--card, #fff); color: inherit; }
.chat-invoer { position: relative; display: flex; align-items: center; border: 1px solid var(--line, #e4e4e7); border-radius: 999px; padding: 4px 4px 4px 14.4px; background: var(--card, #fff); }
.chat-invoer:focus-within { border-color: var(--ink, #333); }
.chat-invoer input { flex: 1; min-width: 0; border: 0; background: transparent; height: 36px; font-size: 12.6px; color: inherit; outline: none; padding: 0; }
.chat-stuur { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--line, #e4e4e7); color: var(--muted, #71717a); display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-invoer:focus-within .chat-stuur, .chat-stuur:hover { background: var(--winkel-accent, #16a34a); color: #fff; }
.chat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); height: 54px; background: var(--wash, #fafafa); border-top: 1px solid var(--line, #eee); }
.chat-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent;
  color: var(--muted, #a1a1aa); font-size: 10.8px; font-family: inherit; cursor: pointer; }
.chat-tab.aan { color: var(--ink, #18181b); }
.chat-tab.aan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--winkel-accent, #16a34a); }
.chat-knop { width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--winkel-accent, #16a34a); color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, .15); padding: 0; }
.chat-knop .chat-knop-dicht { display: none; font-size: 26px; line-height: 1; }
html.chat-open .chat-knop { background: var(--wash, #f7f6f3); color: var(--ink, #37352f); width: 54px; height: 54px; }
html.chat-open .chat-knop .chat-knop-open { display: none; }
html.chat-open .chat-knop .chat-knop-dicht { display: block; }
@media (max-width: 480px) {
  .chat-paneel { right: 0; left: 0; bottom: 0; width: auto; height: 100vh; max-height: none; border-radius: 0; }
}

/* ── Website-beheer: koppen bovenaan, tabbladen eronder, geen linkerkolom ── */
.web-schil { max-width: 1160px; }
.web-koppen { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 12px; flex-wrap: wrap; }
.web-kop { padding: 10px 14px; font-weight: 600; color: var(--sub); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13.5px; border-radius: 6px 6px 0 0; }
.web-kop:hover { color: var(--ink); background: var(--wash2); }
.web-kop.aan { color: var(--ink); border-bottom-color: var(--ink); }
.web-kop-rechts { margin-left: auto; color: var(--muted); }
.web-winkelkeuze { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 4px 0 6px; }
.web-winkelkeuze label { font-size: 12px; color: var(--muted); }
.web-winkelkeuze select { font-weight: 600; min-width: 160px; }
.web-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--wash2); margin: 0 0 16px; }
.web-tabs a { padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--sub); text-decoration: none; }
.web-tabs a.aan { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.web-tabs a.buiten::after { content: "↗"; margin-left: 5px; color: var(--muted); font-size: 11px; }
.web-tabs a.web-tab-rechts { margin-left: 12px; color: var(--muted); }
.web-inhoud { min-width: 0; }
@media (max-width: 720px) { .web-kop-rechts { margin-left: 0; } .web-winkelkeuze { width: 100%; margin-left: 0; } }

/* ── Uiterlijk: één scherm per winkel ── */
.ui-vorm { margin-bottom: 18px; }
.ui-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 14px 18px; }
.ui-raster .ui-breed { grid-column: 1 / -1; }
.ui-scheiding { border-top: 1px solid var(--line); }
.ui-vink { display: flex; align-items: center; gap: 8px; font-size: 13.5px; align-self: end; padding: 8px 0; }
.ui-vinkjes { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 18px 16px; }
.ui-meer { border-top: 1px dashed var(--line); margin: 4px 0 0; }
.ui-meer > summary { cursor: pointer; padding: 12px 18px; font-weight: 600; font-size: 13px; color: var(--sub); list-style: none; }
.ui-meer > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.ui-meer[open] > summary::before { transform: rotate(90deg); }
.ui-knoppen { display: flex; gap: 10px; align-items: center; padding: 4px 18px 16px; }
.ui-tijden { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; padding: 14px 18px; }
.ui-tijden .field span { font-size: 12px; color: var(--muted); }
.ui-uitzondering { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.ui-voorbeeld { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 14px; background: #fff; color: #333; font-size: 12px; }
.ui-vb-usp { background: #f6f6f6; padding: 6px 14px; display: flex; gap: 22px; justify-content: center; font-size: 11px; }
.ui-vb-usp span::before { content: "✓ "; color: #45523c; font-weight: 700; }
.ui-vb-kop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ui-vb-kop img { height: 30px; width: auto; }
.ui-vb-logo { font-weight: 800; font-size: 15px; }
.ui-vb-knop { background: #45523c; color: #fff; border-radius: 6px; padding: 7px 12px; font-weight: 600; }
.ui-vb-zoek { flex: 1; max-width: 260px; border: 1px solid #e5e6e5; border-radius: 6px; background: #f6f6f6; padding: 7px 10px; color: #888; }
.ui-vb-rechts { margin-left: auto; display: flex; gap: 14px; align-items: center; }

/* ── Instellingen in vijf groepen ── */
.inst-groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.inst-groepen .card { margin: 0; }
.inst-onderwerp { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.inst-onderwerp:last-child { border-bottom: 0; }
.inst-onderwerp:hover { background: var(--wash2); }
@media (max-width: 900px) { .inst-groepen { grid-template-columns: 1fr; } }
.stip-aandacht { width: 8px; height: 8px; border-radius: 50%; background: #d9a21b; flex: none; }

/* ── Menuregels in het beheer: compact, formulier klapt open ── */
.mr-rij { display: flex; align-items: flex-start; gap: 8px; padding: 0 18px 0 12px; border-bottom: 1px solid var(--line); }
.mr-rij.onder { padding-left: 44px; background: var(--wash2); }
.mr-rij.onder .mr-rij { padding-left: 76px; }
.mr { flex: 1; min-width: 0; }
.mr > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 6px; min-height: 40px; }
.mr > summary::-webkit-details-marker { display: none; }
.mr > summary::before { content: "›"; color: var(--muted); width: 10px; transition: transform .15s; }
.mr[open] > summary::before { transform: rotate(90deg); }
.mr-naam { font-size: 13.5px; font-weight: 600; }
.mr-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-bewerk { font-size: 12px; color: var(--muted); }
.mr > summary:hover .mr-bewerk { color: var(--ink); text-decoration: underline; }
.mr-vorm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 6px 12px 22px; }
.mr-knoppen { display: flex; gap: 4px; align-items: center; padding: 6px 0; margin: 0; flex: none; }
.mt { border-bottom: 1px solid var(--line); }
.mt.onder { padding-left: 32px; background: var(--wash2); }
.mt > summary { list-style: none; cursor: pointer; padding: 8px 18px; font-size: 12.5px; color: var(--muted); }
.mt > summary::-webkit-details-marker { display: none; }
.mt > summary:hover { color: var(--ink); }
.mt-vorm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 18px 12px; }

/* ── Opmaak per blok: de omlijsting draagt vlak, breedte, ruimte en kolommen ── */
.site-blok { width: 100%; }
.site-blok.opm-breedte-smal { --site-breedte: 820px; }
.site-blok.opm-breedte-vol { --site-breedte: 100%; }
.site-blok.opm-vlak-grijs { background: var(--nova-vlak, var(--wash, #f6f6f6)); }
.site-blok.opm-vlak-accent { background: var(--winkel-accent); color: #fff; }
.site-blok.opm-vlak-accent h1, .site-blok.opm-vlak-accent h2, .site-blok.opm-vlak-accent h3,
.site-blok.opm-vlak-accent p, .site-blok.opm-vlak-accent li, .site-blok.opm-vlak-accent a { color: #fff; }
.site-blok.opm-vlak-accent .btn-primary, .site-blok.opm-vlak-accent .site-knop { background: #fff; color: var(--winkel-accent); }
.site-blok.opm-vlak-grijs > section, .site-blok.opm-vlak-accent > section { padding-block: 34px; }
.site-blok.opm-ruimte-ruim > section { padding-block: 64px; }
.site-blok.opm-ruimte-krap > section { padding-block: 8px; }
.site-blok.opm-kol-1 .site-punten-in, .site-blok.opm-kol-1 .site-snelstart-in, .site-blok.opm-kol-1 .site-team-in, .site-blok.opm-kol-1 .site-fototegels-in, .site-blok.opm-kol-1 .site-categorien-in, .site-blok.opm-kol-1 .site-merken-in { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.site-blok.opm-kol-2 .site-punten-in, .site-blok.opm-kol-2 .site-snelstart-in, .site-blok.opm-kol-2 .site-team-in, .site-blok.opm-kol-2 .site-fototegels-in, .site-blok.opm-kol-2 .site-categorien-in, .site-blok.opm-kol-2 .site-merken-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-blok.opm-kol-3 .site-punten-in, .site-blok.opm-kol-3 .site-snelstart-in, .site-blok.opm-kol-3 .site-team-in, .site-blok.opm-kol-3 .site-fototegels-in, .site-blok.opm-kol-3 .site-categorien-in, .site-blok.opm-kol-3 .site-merken-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-blok.opm-kol-4 .site-punten-in, .site-blok.opm-kol-4 .site-snelstart-in, .site-blok.opm-kol-4 .site-team-in, .site-blok.opm-kol-4 .site-fototegels-in, .site-blok.opm-kol-4 .site-categorien-in, .site-blok.opm-kol-4 .site-merken-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-blok.opm-kol-2 .site-tekst, .site-blok.opm-kol-3 .site-tekst, .site-blok.opm-kol-4 .site-tekst { column-gap: 40px; }
.site-blok.opm-kol-2 .site-tekst { column-count: 2; }
.site-blok.opm-kol-3 .site-tekst { column-count: 3; }
.site-blok.opm-kol-4 .site-tekst { column-count: 4; }
.site-blok[class*="opm-kol-"] .site-tekst > h2 { column-span: all; }
@media (max-width: 720px) {
  .site-blok[class*="opm-kol-"] .site-punten-in, .site-blok[class*="opm-kol-"] .site-snelstart-in, .site-blok[class*="opm-kol-"] .site-team-in,
  .site-blok[class*="opm-kol-"] .site-fototegels-in, .site-blok[class*="opm-kol-"] .site-categorien-in, .site-blok[class*="opm-kol-"] .site-merken-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-blok[class*="opm-kol-"] .site-tekst { column-count: 1; }
}

/* ── Website-beheer: één veldstijl voor alles onder Website ── */
.web-schil input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.ghost):not(.btn-primary),
.web-schil select:not(.ghost), .web-schil 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; max-width: 100%;
  box-shadow: 0 1px 2px rgba(16,20,28,.04); transition: border-color .12s ease, box-shadow .12s ease; }
.web-schil input:not([type="checkbox"]):not([type="radio"]):hover, .web-schil select:hover, .web-schil textarea:hover { border-color: var(--axis); }
.web-schil input:not([type="checkbox"]):not([type="radio"]):focus, .web-schil select:focus, .web-schil textarea:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.web-schil select:not(.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; }
.web-schil textarea { resize: vertical; min-height: 64px; }
.web-schil input[type="date"] { min-height: 36px; }
.web-schil [hidden] { display: none !important; }

/* ── De paginabewerker ── */
.pe-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.pe-titel { font-size: 20px; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.pe-kop-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pe-kop-rechts form { margin: 0; display: inline-flex; }
.pe-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.pe-zij { position: sticky; top: 14px; display: grid; gap: 12px; }
.pe-zij .card { margin: 0; }
.pe-velden { display: grid; gap: 10px; padding: 12px 16px 14px; }
.pe-velden .field input, .pe-velden .field select, .pe-velden .field textarea { width: 100%; }
.pe-stand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pe-taalstand { font-size: 12.5px; }
.pe-acties { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-acties form { margin: 0; }
.pe-meer > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--sub); list-style: none; display: flex; gap: 8px; align-items: center; min-height: 28px; }
.pe-meer > summary::-webkit-details-marker { display: none; }
.pe-meer > summary::before { content: "›"; display: inline-block; transition: transform .15s; color: var(--muted); }
.pe-meer[open] > summary::before { transform: rotate(90deg); }
.pe-meer .field { margin-top: 10px; }
.pe-details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.pe-details > summary { cursor: pointer; padding: 11px 16px; font-weight: 600; font-size: 13px; color: var(--sub); list-style: none; }
.pe-details > summary::-webkit-details-marker { display: none; }
.pe-details > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.pe-details[open] > summary::before { transform: rotate(90deg); }
.pe-details > .card { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: none; margin: 0; }
.pe-blokken, .pe-zij, .pe-voorbeeld { min-width: 0; }
.pe-lijst { display: grid; gap: 8px; margin: 0 0 12px; min-width: 0; }
.pe-lijst > .pb { min-width: 0; }
.pb { border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 1px 2px rgba(16,20,28,.04); }
.pb.sleept { opacity: .45; }
.pb.licht { box-shadow: 0 0 0 3px var(--data-wash); border-color: var(--data); }
.pb-kop { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; min-height: 46px; min-width: 0; }
.pb-kop::-webkit-details-marker { display: none; }
.pb-kop:hover { background: var(--wash2); border-radius: 10px; }
.pb[open] > .pb-kop:hover { border-radius: 10px 10px 0 0; }
.pb-greep { color: var(--muted); letter-spacing: -2px; cursor: grab; font-size: 15px; user-select: none; width: 14px; flex: none; }
.pb-icoon { width: 22px; height: 22px; border-radius: 6px; background: var(--wash2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sub); flex: none; font-weight: 700; }
.pb-naam { font-weight: 650; font-size: 13.5px; white-space: nowrap; flex: none; }
.pb-sam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.pb-rechts { display: flex; gap: 6px; align-items: center; flex: none; }
.pb-taal { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pb-taal button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; padding: 4px 8px; color: var(--muted); cursor: pointer; line-height: 1; }
.pb-taal button + button { border-left: 1px solid var(--line); }
.pb-taal button.aan { background: var(--ink); color: var(--card); }
.pb-pijl { width: 28px; padding: 0; justify-content: center; }
.pb-chevron { color: var(--muted); transition: transform .15s; display: inline-block; width: 12px; text-align: center; font-size: 16px; }
.pb[open] .pb-chevron { transform: rotate(90deg); }
.pb-lijf { border-top: 1px solid var(--line); padding: 12px; background: var(--wash); border-radius: 0 0 10px 10px; }
.pb-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 12px; }
.pb-velden:empty { display: none; }
.pb-velden .pb-breed { grid-column: 1 / -1; }
.pb-velden .field label { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.pb-velden .field label .schrijfknop { margin-left: auto; height: 24px; padding: 0 8px; font-size: 11.5px; }
.pb-velden .field input, .pb-velden .field select, .pb-velden .field textarea { width: 100%; }
.pb-velden .taalcode { text-transform: uppercase; font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.pb-opmaak { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pb-opmaak-kop { font-size: 11px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .06em; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--card); vertical-align: middle; }
.seg-k { position: relative; display: inline-flex; }
.seg-k input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.seg-k span, .seg > button { display: inline-block; padding: 4px 10px; font-size: 12.5px; color: var(--sub); cursor: pointer; border: 0; background: none; font-family: inherit; line-height: 1.4; }
.seg-k input:checked + span, .seg > button.aan { background: var(--wash2); color: var(--ink); font-weight: 650; }
.seg-k input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--data); }
.seg-k + .seg-k, .seg > button + button { border-left: 1px solid var(--line); }
.pb-acties { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.pb-weg { color: var(--neg); }
.pe-kiezer .card-head { border-bottom: 1px solid var(--line); }
.pe-kiezer-familie { display: flex; gap: 10px; align-items: baseline; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pe-kiezer-familie:last-child { border-bottom: 0; }
.pe-kiezer-naam { width: 160px; flex: none; font-size: 12px; color: var(--muted); }
.pe-kiezer-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-chip { border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 3px 11px; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; line-height: 1.4; }
.pe-chip:hover { border-color: var(--ink); }
.opslaanbalk { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 14px 0 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(16,20,28,.14); font-size: 13px; }
.opslaanbalk-knoppen { margin-left: auto; display: flex; gap: 8px; }
.pe-voorbeeld { display: none; }
.pe-voorbeeld iframe { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: 10px; background: #fff; display: block; }
.pe[data-modus="naast"] .pe-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pe[data-modus="naast"] .pe-zij { display: none; }
.pe[data-modus="naast"] .pe-voorbeeld { display: block; position: sticky; top: 14px; }
.pe[data-modus="voorbeeld"] .pe-raster { grid-template-columns: 1fr; }
.pe[data-modus="voorbeeld"] .pe-blokken, .pe[data-modus="voorbeeld"] .pe-zij { display: none; }
.pe[data-modus="voorbeeld"] .pe-voorbeeld { display: block; }
@media (max-width: 980px) { .pe-raster, .pe[data-modus="naast"] .pe-raster { grid-template-columns: 1fr; } .pe-zij { position: static; } .pe-kiezer-naam { width: 100%; } }

/* ── De fotokiezer ── */
.fk-label { font-size: 12.5px; font-weight: 550; color: var(--sub); display: block; margin-bottom: 5px; }
.fk-rij { display: flex; gap: 10px; align-items: center; }
.fk-thumb { width: 72px; height: 50px; border-radius: 7px; border: 1px solid var(--line); background: var(--wash2); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; }
.fk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk.leeg .fk-thumb::before { content: "geen"; font-size: 11px; color: var(--muted); }
.fk-knoppen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.fk-dialoog { border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(920px, 94vw); max-height: 86vh; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.fk-dialoog::backdrop { background: rgba(16,20,28,.45); }
.fk-dialoog-kop { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.fk-dialoog-kop input[type="search"] { flex: 1; font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; background: var(--card); color: var(--ink); }
.fk-upload { cursor: pointer; }
.fk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px 16px; max-height: calc(86vh - 62px); overflow: auto; }
.fk-tegel { border: 1px solid var(--line); border-radius: 9px; background: var(--card); padding: 0; cursor: pointer; overflow: hidden; text-align: left; font: inherit; color: var(--ink); }
.fk-tegel:hover, .fk-tegel:focus-visible { border-color: var(--ink); outline: none; }
.fk-tegel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--wash2); }
.fk-tegel-naam { display: block; padding: 6px 8px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-meer { grid-column: 1 / -1; justify-self: center; }
.fk-leeg { grid-column: 1 / -1; color: var(--muted); padding: 20px; text-align: center; }
/* De bewerker heeft zijn eigen kopregel; de kop van de schil is dan dubbel. */
.web-inhoud:has(> .pe) > .page-head { display: none; }

/* ── Lijsten onder Website: filterknoppen, zoekveld, knoppen per rij ── */
.pl-balk { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.pl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--sub); text-decoration: none; background: var(--card); }
.pl-filter:hover { border-color: var(--ink); color: var(--ink); }
.pl-filter.aan { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pl-tel { font-size: 11px; opacity: .75; }
.pl-zoek { margin-left: auto; }
.pl-zoek input { width: 220px; }
.pl-nieuw { display: flex; gap: 8px; align-items: center; margin: 0; }
.pl-nieuw input[name="titel"] { width: 230px; }
.pl-tabel td { vertical-align: middle; }
.pl-naam { font-weight: 600; color: var(--ink); text-decoration: none; }
.pl-naam:hover { text-decoration: underline; }
.pl-tabel .chip { margin-left: 6px; }
.pl-acties { text-align: right; white-space: nowrap; }
.pl-acties form { display: inline-flex; margin: 0; }
.pl-acties > * + * { margin-left: 6px; }
.pl-thumb { width: 56px; padding-right: 0 !important; }
.pl-thumb img, .pl-thumb-leeg { display: block; width: 48px; height: 34px; object-fit: cover; border-radius: 6px; background: var(--wash2); border: 1px solid var(--line); }
@media (max-width: 900px) { .pl-zoek { margin-left: 0; } .pl-zoek input, .pl-nieuw input[name="titel"] { width: 160px; } }
.chip.stand-live { background: var(--chip-green-bg); color: var(--chip-green-ink); border-color: transparent; }
.chip.stand-live::before { background: var(--chip-green-dot); }
.chip.stand-wijziging { background: var(--chip-orange-bg); color: var(--chip-orange-ink); border-color: transparent; }
.chip.stand-wijziging::before { background: var(--chip-orange-dot); }
.chip.stand-concept { background: var(--chip-gray-bg); color: var(--chip-gray-ink); border-color: transparent; }
.chip.stand-concept::before { background: var(--chip-gray-dot); }

/* ── Voet: drie kolommen naast elkaar, zoals de voet zelf ── */
.vk-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 18px 8px; }
.vk-kolom { border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; min-height: 120px; }
.vk-kop { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.vk-naam { font-weight: 650; font-size: 13px; }
.vk-tel { margin-left: auto; font-size: 11.5px; }
.vk-lijst { flex: 1; min-height: 40px; }
.vk-leeg { padding: 12px; font-size: 12.5px; }
.vk-item { cursor: grab; }
.vk-item.sleept { opacity: .45; }
.vk-kolom .mr-rij { padding-left: 8px; padding-right: 8px; }
.vk-kolom .mr-rij.onder { padding-left: 28px; }
.vk-kolom .mr > summary { padding: 7px 4px; min-height: 36px; }
.vk-kolom .mr-vorm { padding-left: 10px; }
.vk-kolom .mt { border-bottom: 0; border-top: 1px solid var(--line); }
.vk-kolom .mt > summary { padding: 8px 12px; }
.vk-kolom .mt-vorm { padding: 4px 12px 12px; }
.vk-kolom .mt-vorm input[name="url"], .vk-kolom .mt-vorm select[name="taxon"] { width: 100%; }
.vk-uitleg { padding: 0 18px 14px; font-size: 12.5px; }
.ui-adressen { padding-top: 0; }
.ui-tijden-kop { padding: 10px 18px 0; }
.ui-tijden .field.uit { display: none; }
form.heeft-balk .ui-knoppen { display: none; }
@media (max-width: 980px) { .vk-raster { grid-template-columns: 1fr; } }
/* In een smalle voetkolom: naam op één regel, geen chip en geen "Bewerken"-tekst; de pijl zegt genoeg. */
.vk-kolom .mr > summary .chip, .vk-kolom .mr > summary .mr-sub, .vk-kolom .mr > summary .mr-bewerk { display: none; }
.vk-kolom .mr-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; font-weight: 600; }
.vk-kolom .mr[open] > summary .mr-sub { display: block; }
.vk-kolom .mr-knoppen .ghost.small { height: 24px; width: 24px; padding: 0; font-size: 12px; }
.vk-kolom .mr-knoppen { gap: 2px; }

/* ── Thema's: kaarten om uit te kiezen ── */
.tk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tk-kaart { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tk-kaart.aan { border-color: var(--accent, var(--ink)); box-shadow: 0 0 0 3px var(--data-wash); }
.tk-strook { height: 36px; display: flex; }
.tk-strook i { flex: 1; }
.tk-lijf { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tk-naam { font-weight: 650; font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-sub { font-size: 12px; }
.tk-knoppen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.tk-knoppen form { margin: 0; display: inline-flex; }
.tk-nieuw { border-style: dashed; padding: 14px 12px; gap: 8px; justify-content: center; align-items: flex-start; }
.tk-nieuw input { width: 100%; }
.tk-link:hover { border-color: var(--ink); }

/* ── Thema bewerken: vier groepen en een groot voorbeeld ── */
.tv-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 18px; padding: 14px 18px 6px; align-items: start; }
.tv-groepen { display: grid; gap: 14px; }
.tv-groep { display: grid; gap: 8px; }
.tv-kop { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); display: flex; gap: 8px; align-items: baseline; }
.tv-kop .cell-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tv-kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tv-kleurrij { display: flex; gap: 6px; align-items: center; }
.tv-kleurrij input[type="text"], .tv-kleurrij input:not([type]) { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.tv-swatch { width: 36px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; flex: none; }
.tv-letter .field { max-width: 320px; }
.tv-aa { font-size: 26px; font-weight: 650; letter-spacing: -.01em; color: var(--tv-tekst); }
.tv-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tv-getallen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv-getallen .field > span:first-child { font-size: 12.5px; font-weight: 550; color: var(--sub); }
.tv-eenheid { display: flex; align-items: center; gap: 6px; }
.tv-eenheid input { width: 100%; }
.tv-eenheid em { font-style: normal; font-size: 12px; color: var(--muted); }
.tv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; padding: 0 0 8px; }
.tv .ui-meer { margin: 0; }
.tv .ui-meer > summary { padding: 10px 0; }
.tv-voorbeeld { position: sticky; top: 14px; display: grid; gap: 8px; }
.tvb { border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); background: var(--tv-achtergrond); color: var(--tv-tekst); padding: 12px; display: grid; gap: 10px; font-family: inherit; }
.tvb-kop { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); background: var(--tv-kaart); font-size: 13px; }
.tvb-kop b { font-size: 14px; }
.tvb-zoek { flex: 1; border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek-klein); background: var(--tv-vlak); padding: 5px 8px; font-size: 11.5px; opacity: .75; }
.tvb-icoontjes { font-size: 11.5px; white-space: nowrap; }
.tvb-menu { display: flex; gap: 14px; padding: 6px 10px; border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); background: var(--tv-kaart); font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.tvb-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tvb-kaart, .tvb-vlak { border: 1px solid var(--tv-lijn); border-radius: var(--tv-hoek); padding: 10px; }
.tvb-kaart { background: var(--tv-kaart); }
.tvb-vlak { background: var(--tv-vlak); display: grid; gap: 4px; align-content: start; }
.tvb-foto { height: 64px; border-radius: calc(var(--tv-hoek) - 4px); background: var(--tv-vlak); margin-bottom: 8px; }
.tvb-titel { font-weight: 650; font-size: 13px; }
.tvb-sub { font-size: 11.5px; opacity: .7; }
.tvb-onder { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.tvb-knop { background: var(--tv-accent); color: var(--tv-accent-ink); border-radius: var(--tv-hoek-klein); padding: 5px 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tvb-knop2 { display: inline-block; border: 1px solid var(--tv-accent); color: var(--tv-accent); border-radius: var(--tv-hoek-klein); padding: 4px 10px; font-size: 11.5px; font-weight: 600; justify-self: start; margin-top: 6px; }
.tvb-breedte { font-size: 11.5px; opacity: .65; }
@media (max-width: 980px) { .tv-raster { grid-template-columns: 1fr; } .tv-voorbeeld { position: static; } .tv-twee { grid-template-columns: 1fr; } }
.tv-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.tv-swatch::-webkit-color-swatch { border: 0; border-radius: 6px; }

/* ── Schakelaars: een vinkje dat eruitziet als een schuifje ── */
input.schakel { appearance: none; -webkit-appearance: none; width: 32px; height: 18px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; vertical-align: middle; border: 0; outline: none; }
input.schakel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
input.schakel:checked { background: var(--accent, #45523c); }
input.schakel:checked::after { left: 16px; }
input.schakel:focus-visible { box-shadow: 0 0 0 3px var(--data-wash); }
input.schakel.klein { width: 26px; height: 15px; }
input.schakel.klein::after { width: 11px; height: 11px; }
input.schakel.klein:checked::after { left: 13px; }
.wp-schakel-label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; flex: 1; min-width: 0; }
.wp-schakel-label .cell-sub { font-size: 12px; }

/* ── Winkel: schakelaars links, schets rechts ── */
.wp-vorm { display: block; }
.wp-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 14px; align-items: start; }
.wp-raster.wp-gelijk { grid-template-columns: 1fr 1fr; }
.wp-links, .wp-rechts { display: grid; gap: 14px; min-width: 0; }
.wp-links .card, .wp-rechts .card, .wp-gelijk .card { margin: 0; }
.wp-lijst { display: flex; flex-direction: column; }
.wp-regel { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); min-height: 44px; }
.wp-regel:last-child { border-bottom: 0; }
.wp-regel.sleepbaar { cursor: grab; }
.wp-regel.sleept { opacity: .45; }
.wp-regel-onder { padding-left: 46px; background: var(--wash); }
.wp-pijlen { display: inline-flex; gap: 2px; }
.wp-velden { display: grid; gap: 12px; padding: 12px 14px 14px; }
.wp-velden-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.wp-label { font-size: 12.5px; font-weight: 550; color: var(--sub); display: block; margin-bottom: 5px; }
.wp-velden .field input, .wp-velden .field select, .wp-velden .field textarea { width: 100%; }
.wp-knoppen { display: grid; gap: 10px; padding: 12px 14px 14px; }
.wp-vorm .ui-knoppen { padding: 14px 0 0; }
.schets { border: 1px dashed var(--line); border-radius: 10px; padding: 12px; background: var(--wash); position: sticky; top: 14px; display: grid; gap: 6px; }
.schets-kop { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.schets-boven { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.schets-kolom { display: grid; gap: 6px; align-content: start; }
.schets-zone { border: 1px solid var(--line); background: var(--card); border-radius: 6px; padding: 7px 9px; font-size: 12px; display: flex; gap: 8px; align-items: center; transition: opacity .15s; }
.schets-zone i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--card); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.schets-zone.uit { opacity: .3; }
.schets-zone.uit i { background: var(--muted); }
.schets-foto { min-height: 92px; align-items: flex-start; }
.schets-knoppen { display: flex; gap: 4px; flex-wrap: wrap; }
.schets-knop { background: var(--ink); color: var(--card); border-radius: 5px; padding: 4px 8px; font-size: 10.5px; font-weight: 600; }
.schets-knop.licht { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.schets-knop.uit { display: none; }
.schets-onder { display: grid; gap: 6px; }
@media (max-width: 980px) { .wp-raster, .wp-raster.wp-gelijk { grid-template-columns: 1fr; } .schets { position: static; } }
.wp-velden .field input.schakel, .web-schil input.schakel { width: 32px; padding: 0; border-radius: 999px; box-shadow: none; }
.wp-velden .field input.schakel.klein, .web-schil input.schakel.klein { width: 26px; }

/* ── Bezoek ── */
.mk-nieuw { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mk-nieuw .field input { width: 100%; }
.mk-adres { font-size: 12px; word-break: break-all; }
.zm-nieuw { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.zm-nieuw input { flex: 1; min-width: 120px; }
.zm-oms { display: flex; gap: 8px; align-items: center; }
.zm-oms input { flex: 1; }
.gz-lijst > summary { cursor: pointer; padding: 10px 16px; font-size: 12.5px; color: var(--sub); list-style: none; border-top: 1px solid var(--line); }
.gz-lijst > summary::-webkit-details-marker { display: none; }
.gz-lijst > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.gz-lijst[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 900px) { .mk-nieuw { grid-template-columns: 1fr 1fr; } }

/* ── Sites en talen: een kaart per site, landen als chips ── */
.st-kaart { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 12px; overflow: hidden; }
.st-kop { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; min-height: 48px; flex-wrap: wrap; }
.st-kop::-webkit-details-marker { display: none; }
.st-kop .st-naam { font-weight: 650; font-size: 14px; }
.st-kop .st-sub { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-kop .st-chevron { color: var(--muted); transition: transform .15s; font-size: 16px; width: 12px; text-align: center; }
.st-kaart[open] .st-chevron { transform: rotate(90deg); }
.st-lijf { border-top: 1px solid var(--line); padding: 12px 14px 14px; display: grid; gap: 12px; }
.st-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; }
.st-velden .field input, .st-velden .field select { width: 100%; }
.st-magazijnen { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; display: grid; gap: 8px; }
.st-magazijn { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.st-magazijn .cell-sub input { width: 64px; margin-left: 4px; }
.st-magazijn form { margin: 0; display: inline-flex; }
.st-koppel { display: flex; gap: 8px; align-items: center; }
.st-nieuw { display: flex; gap: 8px; align-items: center; padding: 12px 14px; flex-wrap: wrap; }
.st-nieuw input { flex: 1; min-width: 140px; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12.5px; background: var(--ink); color: var(--card); }
.st-chip form { margin: 0; display: inline-flex; }
.st-chip button { border: 0; background: rgba(255,255,255,.18); color: inherit; border-radius: 50%; width: 18px; height: 18px; line-height: 1; cursor: pointer; font-size: 12px; padding: 0; }
.st-chip button:hover { background: rgba(255,255,255,.35); }
.st-uit { border-top: 1px dashed var(--line); }
.st-uit > summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; color: var(--sub); list-style: none; }
.st-uit > summary::-webkit-details-marker { display: none; }
.st-uit > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.st-uit[open] > summary::before { transform: rotate(90deg); }
.st-uitlijst { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.st-uitlijst form { margin: 0; }
.st-uitlijst button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; color: var(--sub); cursor: pointer; }
.st-uitlijst button:hover { border-color: var(--ink); color: var(--ink); }
.st-landnieuw { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.st-landnieuw input[name="code"] { width: 64px; text-transform: uppercase; }
.st-landnieuw input[name="naam"] { flex: 1; min-width: 140px; }

/* ── Start ── */
.st-snel { margin-bottom: 14px; }
.st-snel-nieuw { display: flex; gap: 6px; align-items: center; margin: 0; }
.st-snel-nieuw input { width: 170px; }
.site-tegel.toon-ok .site-tegel-getal { color: var(--pos); }
.site-tegel.toon-warn.vraagt-aandacht .site-tegel-getal { color: #b26a12; }
.site-tegel.toon-mut .site-tegel-getal { color: var(--muted); }
.site-tegel.toon-ok:not(.vraagt-aandacht) .site-tegel-getal, .site-tegel.toon-warn:not(.vraagt-aandacht) .site-tegel-getal { color: var(--muted); }
.st-rooster { grid-template-columns: 3fr 2fr; }
@media (max-width: 980px) { .st-rooster { grid-template-columns: 1fr; } }
/* De extra themaknoppen: koppenletter en lettergrootte lopen via variabelen. */
body.winkel h1, body.winkel h2, body.winkel h3, body.winkel .site-hero-kaart h1, body.winkel .shop-catkop-titel { font-family: var(--winkel-koppen-letter, var(--winkel-letter)); }

/* ── Indelingskeuzes: kleine plaatjes met een radioknop ── */
.ki-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; padding: 12px 18px 14px; }
.ki-raster.ki-drie { padding: 12px 14px 14px; }
.ki-keuze { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 4px; cursor: pointer; background: var(--card); }
.ki-keuze:hover { border-color: var(--ink); }
.ki-keuze.aan, .ki-keuze:has(input:checked) { border-color: var(--accent, var(--ink)); box-shadow: 0 0 0 3px var(--data-wash); }
.ki-keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ki-keuze b { font-size: 12.5px; }
.ki-keuze .cell-sub { font-size: 11.5px; line-height: 1.35; }
.ki-plaatje { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 18px 12px; gap: 4px; height: 44px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--wash); margin-bottom: 4px; }
.ki-plaatje i { display: block; border-radius: 3px; background: var(--line); }
.ki-plaatje .ki-logo { background: var(--ink); width: 60%; }
.ki-plaatje .ki-zoek { background: var(--card); border: 1px solid var(--line); }
.ki-plaatje .ki-knop { background: var(--accent, #45523c); width: 60%; justify-self: end; }
.ki-plaatje .ki-menu { grid-column: 1 / -1; height: 6px; align-self: center; }
.ki-plaatje.ki-midden { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 12px 18px; }
.ki-plaatje.ki-midden .ki-logo { grid-column: 2; justify-self: center; height: 10px; width: 70%; }
.ki-plaatje.ki-midden .ki-zoek { grid-column: 1 / 3; grid-row: 2; }
.ki-plaatje.ki-midden .ki-knop { grid-column: 3; grid-row: 2; }
.ki-plaatje.ki-midden .ki-menu { display: none; }
.ki-plaatje.ki-compact { grid-template-rows: 14px 6px; height: 36px; }
.ki-plaatje.ki-compact .ki-logo { width: 45%; }
.ki-plaatje.ki-compact .ki-menu { height: 4px; }
.ki-plaatje.ki-zoekgroot { grid-template-columns: 1fr 3fr 1fr; }
.ki-plaatje.ki-zoekgroot .ki-zoek { border-color: var(--accent, #45523c); }
.ki-plaatje.ki-pdp { grid-template-columns: 1fr 1fr; grid-template-rows: 20px 14px; }
.ki-plaatje.ki-pdp .ki-foto { background: var(--line); }
.ki-plaatje.ki-pdp .ki-koop { background: var(--card); border: 1px solid var(--accent, #45523c); }
.ki-plaatje.ki-pdp .ki-rest { grid-column: 1 / -1; height: 8px; align-self: center; }
.ki-plaatje.ki-pdp-plak { grid-template-rows: 20px 14px; }
.ki-plaatje.ki-pdp-plak .ki-koop { grid-row: 1 / 3; }
.ki-plaatje.ki-pdp-plak .ki-rest { grid-column: 1; }
.ki-plaatje.ki-pdp-tabs .ki-rest { background: repeating-linear-gradient(90deg, var(--ink) 0 22%, transparent 22% 30%); height: 6px; }
.vk-kolommen { display: flex; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--wash); }
.vk-kolommen .cell-sub { font-size: 12px; }
.pl-nieuw select { max-width: 200px; }

/* ══ Het veldsysteem van de verkoopschermen ═══════════════════════════════
   Drie hoogtes (40 zoekbalk, 34 formulier, 30 in een tabelregel), rand 1 px,
   hoek 8 px, en één focusring overal. De eenheid staat IN het veld: € links,
   % rechts. Aantal is een stepper met min en plus in het veld. Bindend
   ontwerp: de mockup Verkoopschermen, tabblad Invoervelden. */
.veld-eenheid { position: relative; display: inline-flex; align-items: center; }
.veld-eenheid > i { position: absolute; font-style: normal; font-size: 13px; color: var(--muted); pointer-events: none; left: 9px; }
.veld-eenheid > i.na { left: auto; right: 9px; }
.veld-eenheid > input { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 10px; outline: none;
  box-shadow: inset 0 1px 1px rgba(16,24,40,.03); box-sizing: border-box; font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, box-shadow .12s ease; }
.veld-eenheid > i + input, .veld-eenheid.voor > input { padding-left: 24px; text-align: right; }
.veld-eenheid.na > input { padding-right: 24px; text-align: right; }
.veld-eenheid > input:hover { border-color: var(--axis); }
.veld-eenheid > input:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.veld-eenheid.klein > input { height: 30px; font-size: 13px; padding-top: 0; padding-bottom: 0; }
/* De stepper: min en plus in het veld, met een haarlijn ertussen. */
.stapper { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  width: auto; height: 34px; background: var(--card); box-shadow: inset 0 1px 1px rgba(16,24,40,.03);
  transition: border-color .12s ease, box-shadow .12s ease; }
.stapper button { border: 0; background: var(--wash2); width: 30px; height: auto; flex: 0 0 30px; font: inherit;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--sub); padding: 0; }
.stapper button:first-child { border-right: 1px solid var(--line); }
.stapper button:last-child { border-left: 1px solid var(--line); }
.stapper button:hover { background: var(--wash); color: var(--ink); }
.stapper input { border: 0; min-width: 0; width: 42px; flex: 0 0 42px; text-align: center; border-radius: 0; padding: 0 2px;
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card); outline: none;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stapper:focus-within { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.stapper.klein { height: 30px; }
.stapper.klein button { width: 26px; flex-basis: 26px; font-size: 15px; }
.stapper.klein input { width: 36px; flex-basis: 36px; font-size: 13px; }
/* De zoekbalk: icoon links, sneltoets rechts, 40 hoog. Eén per scherm. */
.zoekveld { position: relative; display: flex; align-items: center; flex: 1; min-width: 230px; }
.zoekveld > svg { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.zoekveld > input { width: 100%; height: 40px; font: inherit; font-size: 14px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; padding: 0 58px 0 36px; outline: none; box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(16,24,40,.03); transition: border-color .12s ease, box-shadow .12s ease; }
.zoekveld > input:hover { border-color: var(--axis); }
.zoekveld > input:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.zoekveld > kbd { position: absolute; right: 9px; font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px;
  padding: 3px 5px; color: var(--muted); background: var(--wash2); pointer-events: none; }
.zoekveld .ac-lijst { top: 100%; }
/* Het scanveld: klein, naast de zoekbalk, met eigen focus zodat een
   scanner nooit in de suggestielijst belandt. */
.zoekveld.scan { flex: 0 0 150px; min-width: 150px; }
.zoekveld.scan > input { padding-right: 12px; }
/* Sneltoetsen onder een tabel: klein, grijs, met de toets als toetsje. */
.sneltoetsen { display: flex; gap: 14px; font-size: 12px; color: var(--muted); padding: 2px 4px; flex-wrap: wrap; }
.sneltoetsen kbd { font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;
  background: var(--card); margin-right: 4px; }
/* Een vinkje en een schakelaar in dezelfde taal als de velden. */
.vink { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.vink input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--btn-bg); }
/* Keuze uit weinig: tot vier opties naast elkaar, één zwart. */
.keuze { display: flex; gap: 6px; }
.keuze > * { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 8px; height: 34px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 13px; color: var(--sub);
  background: var(--card); cursor: pointer; }
.keuze > [aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); font-weight: 550; }
.keuze > *:focus-visible { outline: none; border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }

/* ══ Eén verkoopscherm-skelet: bestelling, offerte en kassa ═══════════════
   Links wat je verkoopt, rechts een vaste samenvatting van 340 px met het
   totaal en de hoofdknop altijd in beeld. */
.verkoop { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 0; }
.verkoop-zij { display: flex; flex-direction: column; gap: 12px; }
.verkoop-zij .plak { position: sticky; top: 66px; z-index: 5; }
/* Onder 1380 px past de regeltabel niet meer naast de samenvatting: dan
   komt de samenvatting eronder, en de artikelkolom houdt zijn ruimte. */
@media (max-width: 1380px) { .verkoop { grid-template-columns: minmax(0, 1fr); } .verkoop-zij .plak { position: static; } }
.invoer-tabel .regel-art { min-width: 0; }
.werkbalk { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
  background: var(--wash2); align-items: center; }
.werkbalk .ghost { height: 40px; border-radius: 9px; }
/* De regeltabel: kolomkop en regels delen één raster, zodat alles onder
   elkaar staat. Velden 30 hoog op één lijn, de marge hangt eronder. */
.invoer-tabel .invoer-kolomkop, .invoer-tabel .regel { display: grid; grid-template-columns: minmax(0, 1fr) 104px 106px 78px 98px 30px;
  gap: 0 8px; align-items: start; }
.invoer-tabel.met-keuze .invoer-kolomkop, .invoer-tabel.met-keuze .regel { grid-template-columns: minmax(0, 1fr) 96px 98px 66px 134px 90px 26px; }
.invoer-tabel.met-keuze .stapper.klein input { width: 32px; flex-basis: 32px; }
.invoer-tabel .invoer-kolomkop { padding: 9px 14px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.invoer-tabel .invoer-kolomkop .num { text-align: right; }
.invoer-tabel #regels { display: flex; flex-direction: column; gap: 0; padding: 0; }
.invoer-tabel .regel { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.invoer-tabel .regel:last-child { border-bottom: 0; }
.invoer-tabel .regel > .breed { grid-column: 1 / -1; }
.regel-art { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.regel-art > div { min-width: 0; flex: 1; padding-top: 6px; }
.invoer-tabel .regel-foto { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; font-size: 12px; }
.invoer-tabel .regel-foto::before { font-size: 13px; }
.invoer-tabel .regel-naam { font-weight: 600; font-size: 13.5px; line-height: 1.25; cursor: pointer; }
.invoer-tabel .regel-naam small { display: none; }
.regel-onder { display: flex; gap: 8px; align-items: center; margin-top: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.regel-onder .regel-meta { flex: none; flex-wrap: nowrap; }
.regel-onder .regel-info { flex: 1; min-width: 0; }
.invoer-tabel .regel-meta { display: flex; gap: 2px 8px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted);
  margin-top: 2px; line-height: 1.3; white-space: nowrap; }
.regel-meta .vr { display: inline-flex; align-items: center; gap: 4px; }
.regel-meta .vr::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--chip-green-dot); }
.regel-meta .vr.laag::before { background: var(--chip-orange-dot); }
.regel-meta .vr.op::before { background: var(--chip-red-dot); }
.regel-meta .vr.op { color: var(--chip-red-ink); }
.regel-meta .stil { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.regel-info { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.invoer-tabel .regel-staffel { font-size: 12px; color: var(--chip-green-ink); padding: 4px 0 0 40px; }
.regel-marge { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
.regel-marge.laag { color: var(--warn); }
.regel-totaal { display: inline-block; width: 100%; text-align: right; line-height: 30px; font-weight: 600; font-size: 13.5px;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.regel-weg { width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer;
  border-radius: 6px; line-height: 1; padding: 0; }
.regel-weg:hover { background: var(--wash); color: var(--ink); }
.invoer-tabel .regel-doos { margin-top: 4px; height: 22px; font-size: 10.5px; padding: 0 6px; }
/* Het zoekveld in een lege regel: pas na het kiezen wisselt het voor de naamregel. */
.regel-art input[name=sku] { width: 100%; height: 30px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; outline: none; box-sizing: border-box; margin-top: -6px;
  transition: border-color .12s ease, box-shadow .12s ease; }
.regel-art input[name=sku]:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); }
.regel-art .field { flex: 1; min-width: 0; }
.regel-art .field input { height: 30px; padding: 0 10px; margin-top: -6px; }
.onder-regels { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.onder-regels .rechts { margin-left: auto; }
.onder-regels .ghost { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.onder-regels input::placeholder { text-transform: none; }
.invoer-leeg { padding: 20px 14px; color: var(--muted); font-size: 13px; text-align: center; }
/* Samenvatting rechts: totaalregels en de hoofdknop eronder. */
.tot { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tot .r { display: flex; justify-content: space-between; gap: 10px; color: var(--sub); }
.tot .r.groot { color: var(--ink); font-size: 17px; font-weight: 650; padding-top: 6px; margin-top: 3px; border-top: 1px solid var(--line); }
.knoppen { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 14px; }
.knoppen .btn-primary, .knoppen .ghost { width: 100%; height: 44px; font-size: 15px; border-radius: 10px; }
.knoppen .ghost { height: 40px; font-size: 14px; }
.knoppen .hint { font-size: 12px; color: var(--muted); text-align: center; }
/* Het klantkaartje: wie het is, waar het heen moet, wat er open staat. */
.klantkaart { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.klantkaart .kop { display: flex; align-items: center; gap: 10px; }
.klantkaart .kop .naam { font-weight: 600; }
.klantkaart .kop .bedrijf { font-size: 12.5px; color: var(--muted); }
.klantkaart .feit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; }
.klantkaart .feit > span { color: var(--muted); }
.klantkaart .feit b { font-weight: 550; font-variant-numeric: tabular-nums; display: block; color: var(--ink); }
.klantkaart .feit b.let { color: var(--warn); }
/* Een inklapbaar blok: de kop vat samen wat erin staat. */
details.klap > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; border-top: 1px solid var(--line); }
details.klap:first-child > summary, details.klap.eerste > summary { border-top: 0; }
details.klap > summary::-webkit-details-marker { display: none; }
details.klap > summary .stand { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.klap > summary .chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); flex: none; margin-left: 4px; transition: transform .12s ease; }
details.klap[open] > summary .chev { transform: rotate(45deg); }
details.klap > .klap-body { padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ══ De kassa op het skelet ══════════════════════════════════════════════
   Ladestrook boven de tegels, productgroepen als chips, de bon met het
   totaal en de knop, betalen als twee knoppen die de betaalwijze zetten. */
.lade-strook { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); box-shadow: var(--shadow); font-size: 13.5px; margin-bottom: 16px; flex-wrap: wrap; }
.lade-strook .stip { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.lade-strook .stip.groen { background: var(--chip-green-dot); }
.lade-strook .stip.oranje { background: var(--chip-orange-dot); }
.lade-strook .stip.grijs { background: var(--chip-gray-dot); }
.lade-strook .m { color: var(--muted); }
.lade-strook .tekst { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.lade-strook .tekst .m { font-size: 12.5px; }
.lade-strook .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lade-strook.dicht { background: var(--chip-orange-bg); border-color: transparent; }
.lade-strook a.ghost, .lade-strook a.btn-primary { text-decoration: none; }
.cat-rij { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 14px 6px; margin-bottom: 0; align-items: center; scrollbar-width: none; }
.cat-rij::-webkit-scrollbar { display: none; }
.cat-rij .fchip { white-space: nowrap; flex: none; padding: 4px 11px; cursor: pointer; font: inherit; font-size: 12.5px; }
.cat-rij .sep { width: 1px; height: 18px; background: var(--line); margin: 0 6px; flex: none; }
.kassa .kassa-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 14px 14px; }
.tegel-klik { border-radius: 11px; }
.tegel-klik img, .tegel-vlak { height: 64px; font-size: 19px; }
.tegel-voorraad.op { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.bon-tabs { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bon-tabs .t { font-weight: 600; font-size: 14px; margin-right: 4px; }
.bon-tabs .fchip { cursor: pointer; font: inherit; font-size: 12.5px; }
.bon-tabs .fchip .topbar-badge { margin-left: 4px; }
.bon-regel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px 10px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bon-regel .naam { min-width: 0; }
.bon-regel .naam .naam-tekst { font-weight: 550; line-height: 1.25; display: block; }
.bon-regel .naam .cell-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bon-regel .stapper { height: 28px; }
.bon-regel .stapper button { width: 24px; flex-basis: 24px; font-size: 14px; }
.bon-regel .stapper input { width: 30px; flex-basis: 30px; font-size: 12.5px; }
.bon-regel .bon-som { min-width: 64px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bon-regel .weg { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; width: 24px; height: 24px;
  border-radius: 6px; line-height: 1; padding: 0; }
.bon-regel .weg:hover { background: var(--wash); color: var(--neg); }
.bon-extra { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.bon-extra .rij { display: flex; gap: 8px; align-items: center; }
.betaling { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 4px; border-top: 1px solid var(--line); }
.betaling .keuze > button { flex-direction: column; gap: 4px; height: auto; padding: 10px 6px; border-radius: 10px; font-weight: 550; }
.coupures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.coupures .biljet { border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 550;
  background: var(--card); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.coupures .biljet:hover { background: var(--wash2); }
.coupures .biljet[aria-pressed="true"] { background: var(--wash); border-color: var(--sub); }
.wissel { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wissel .r { display: flex; justify-content: space-between; align-items: baseline; }
.wissel .r.groot { font-size: 17px; font-weight: 650; }
.wissel .r.groot .num { font-size: 22px; letter-spacing: -.01em; }

/* ══ Dashboard: snel starten, cijfers met verloop, aandacht per groep ═══ */
.snel { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: stretch; margin-bottom: 14px; }
.snel .start { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.snel .start:hover { background: var(--wash2); border-color: var(--axis); }
.snel .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; flex: none; }
.snel .ic svg { width: 18px; height: 18px; }
.snel .start > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.snel .t { font-weight: 600; font-size: 13.5px; }
.snel .s { font-size: 12px; color: var(--muted); }
.snel .lade { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--wash2); min-width: 220px; text-decoration: none; color: var(--ink); }
.snel .lade:hover { border-color: var(--axis); }
.snel .lade .r { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; }
.snel .lade .s { font-size: 12px; color: var(--muted); }
.stip { width: 8px; height: 8px; border-radius: 999px; flex: none; display: inline-block; }
.stip.rood { background: var(--chip-red-dot); } .stip.oranje { background: var(--chip-orange-dot); }
.stip.grijs { background: var(--chip-gray-dot); } .stip.blauw { background: var(--chip-blue-dot); } .stip.groen { background: var(--chip-green-dot); }
@media (max-width: 1100px) { .snel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 4px 10px; padding: 14px 16px 12px; }
.kpi .eyebrow, .kpi .kpi-meta { grid-column: 1 / 3; }
.kpi .spark { width: 72px; height: 26px; align-self: center; }
.kpi .spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.op { color: var(--pos); } .delta.neer { color: var(--neg); }
.staven { height: 150px; padding: 12px 14px 0; }
.staaf { border-radius: 3px 3px 0 0; }
.staaf.top { opacity: 1; box-shadow: 0 0 0 4px var(--data-wash); }
.graf-as { display: flex; justify-content: space-between; padding: 6px 14px 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-onder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .dash-onder { grid-template-columns: minmax(0, 1fr); } }
.aandacht { display: flex; flex-direction: column; padding-bottom: 4px; }
.aandacht .groep { padding: 10px 16px 3px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.aandacht a.kv { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 13.5px; }
.aandacht a.kv:hover { background: var(--wash2); }
.aandacht a.kv .k { color: var(--ink); flex: 1; }
.aandacht a.kv .v { font-weight: 650; font-variant-numeric: tabular-nums; }
.aandacht a.kv .pijl { color: var(--muted); font-size: 14px; }
.aandacht .groep + a.kv { border-top: 0; }
table.recent th, table.recent td { padding-left: 10px; padding-right: 10px; }
table.recent th:first-child, table.recent td:first-child { padding-left: 16px; }
table.recent .chip { font-size: 11px; }

/* ══ Volledig scherm: alle ruimte voor het werk ══════════════════════════
   Eén knop in de bovenbalk of F11: de zijbalk gaat weg, de bovenbalk wordt
   een smalle balk met het logo, de klok en de knop terug. Esc brengt alles
   terug. De stand wordt per apparaat onthouden (app.js). */
.topbar > .icon-btn { width: 32px; height: 32px; }
#volledig-knop .aan { display: none; }
.logo-vol { display: none; align-items: center; order: -1; margin-right: 4px; }
.logo-vol .logo-beeld { height: 20px; }
.klok-vol { display: none; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; margin-right: 4px; }
body.volledig .side { display: none; }
body.volledig .app { grid-template-columns: 1fr; }
body.volledig .topbar { padding: 6px 16px; gap: 10px; }
/* Het menu blijft bereikbaar: de paneelknop opent de zijbalk als overlay
   over het werk heen, en sluit weer bij een klik ernaast of Esc. */
body.volledig #zijbalk-knop { display: grid; }
body.volledig.menu-open .side { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 276px; z-index: 95;
  overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(21, 24, 33, .35), 8px 0 24px rgba(21, 24, 33, .18); }
body.volledig .logo-vol { display: flex; }
body.volledig .klok-vol { display: inline; }
body.volledig #volledig-knop .uit { display: none; }
body.volledig #volledig-knop .aan { display: block; }
body.volledig .content { padding: 16px 20px 24px; }
body.volledig .crumbs { display: none; }
body.volledig .verkoop { grid-template-columns: minmax(0, 1fr) 380px; }
body.volledig .dash-onder { grid-template-columns: minmax(0, 1fr) 380px; }
body.volledig .kassa .kassa-tegels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
body.volledig .kassa .tegel-klik img, body.volledig .kassa .tegel-vlak { height: 84px; font-size: 22px; }
body.volledig .kassa .tegel-naam { font-size: 13.5px; min-height: 34px; }
body.volledig .kassa .knoppen .btn-primary { height: 52px; font-size: 16px; }
body.volledig .kassa .tot .r.groot { font-size: 22px; }

/* ══ De voorraadkaart ════════════════════════════════════════════════════
   Klapt uit onder het voorraadbolletje. Eén getal bovenaan, per magazijn
   fysiek/uitgaand/vrij, inkomend per inkooporder, en het verloop van vrij. */
[data-voorraadkaart] { cursor: pointer; }
.regel-meta .vr.klik { border-radius: 999px; padding: 1px 7px 1px 6px; margin: -1px 0; transition: background .12s ease; }
.regel-meta .vr.klik:hover { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.regel-meta .vr.klik.laag:hover { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.regel-meta .vr.klik.op:hover { background: var(--chip-red-bg); }
.tegel-voorraad[data-voorraadkaart]:hover { box-shadow: 0 0 0 2px var(--data-wash); }
.vk-zweef { position: fixed; inset: 0; z-index: 85; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; background: rgba(16,24,40,.38); }
.vk-zweef .vk { width: min(860px, 100%); pointer-events: auto; }
/* De donkere laag is alleen zichtbaar; een klik erop gaat door naar de pagina en sluit de kaart. */
.vk-zweef { pointer-events: none; }
.vk-zweef .vk-pijl { display: none; }
body.vk-open { overflow: hidden; }
.vk { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  box-shadow: 0 20px 50px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); font-size: 13px; }
.vk-pijl { position: absolute; top: -7px; left: 150px; width: 12px; height: 12px; background: var(--card);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.vk-kop { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.vk-foto { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.vk-vlak { display: grid; place-items: center; background: var(--wash); color: var(--sub); font-weight: 650; font-size: 13px; }
.vk-titel { min-width: 0; }
.vk-titel > a { font-weight: 650; font-size: 15px; text-decoration: none; color: var(--ink); }
.vk-titel .m { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vk-titel .m a { color: var(--data); font-weight: 500; text-decoration: none; }
.vk-stand { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px; padding-right: 8px; flex: none; }
.vk-stand b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vk-stand b.neg, .vk-tabel b.neg, .vk-tabel .neg { color: var(--neg); }
.vk-stand .m { font-size: 12px; color: var(--muted); }
.vk-sluit { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); font-size: 18px;
  border: 1px solid var(--line); background: none; cursor: pointer; flex: none; }
.vk-sluit:hover { background: var(--wash); color: var(--ink); }
.vk-blok { border-bottom: 1px solid var(--line); }
.vk-blokkop { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px 6px; font-size: 13.5px; font-weight: 600; }
.vk-blokkop .m { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.vk-blokkop .r { margin-left: auto; }
.vk-tabel { font-size: 13px; }
.vk-tabel th { padding: 7px 18px; }
.vk-tabel td { padding: 8px 18px; }
.vk-tabel a { text-decoration: none; font-weight: 550; color: var(--ink); }
.vk-tabel a:hover { text-decoration: underline; }
.vk-tabel .uit { color: var(--chip-orange-ink); font-variant-numeric: tabular-nums; font-weight: 550; }
.vk-tabel tfoot td { border-top: 1px solid var(--line); border-bottom: 0; background: var(--wash2); font-weight: 600; color: var(--sub); }
.vk-tabel tfoot td b { color: var(--ink); }
.vk-tabel .m { color: var(--muted); font-weight: 400; }
.vk-tabel .cell-sub.neg { color: var(--neg); }
.vk-uitleg { padding: 6px 18px 12px; font-size: 12px; color: var(--muted); }
details.vk-uit > summary { list-style: none; cursor: pointer; padding: 8px 18px 10px; font-size: 12.5px; color: var(--sub); }
details.vk-uit > summary::-webkit-details-marker { display: none; }
details.vk-uit > summary::before { content: "\203A"; display: inline-block; margin-right: 6px; transition: transform .12s ease; }
details.vk-uit[open] > summary::before { transform: rotate(90deg); }
details.vk-uit .vk-tabel { border-top: 1px solid var(--line); }
.vk-tijd { display: flex; align-items: center; gap: 10px; padding: 8px 18px 16px; overflow-x: auto; }
.vk-stap { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
  min-width: 120px; background: var(--card); flex: none; }
.vk-stap .d { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vk-stap b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vk-stap .m { font-size: 12px; color: var(--muted); }
.vk-stap .m.op { color: var(--pos); }
.vk-stap.nu { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.vk-stap.nu .d, .vk-stap.nu .m { color: var(--btn-ink); opacity: .75; }
.vk-stap.laat { border-style: dashed; border-color: var(--chip-red-dot); }
.vk-stap.laat b { color: var(--neg); }
.vk-lijn { flex: 1; height: 2px; background: var(--axis); min-width: 16px; border-radius: 2px; }
.vk-voet { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 12.5px; flex-wrap: wrap; }
.vk-voet .m { color: var(--muted); }
.vk-voet .r { margin-left: auto; display: flex; gap: 8px; }
.vk-voet a { text-decoration: none; }

/* ══ Op een telefoon: niets scrolt zijwaarts ══════════════════════════════
   Onder 600 px wordt elke rij een kolom: de snelstartknoppen onder elkaar,
   de cijfers zonder verloop, de regeltabel als losse kaartjes per regel. */
@media (max-width: 600px) {
  .snel { grid-template-columns: minmax(0, 1fr); }
  .snel .lade { min-width: 0; }
  .zoekveld { min-width: 0; }
  .zoekveld.scan { flex: 1 1 100%; }
  .kpi .spark { display: none; }
  .kpi { grid-template-columns: 1fr; }
  .invoer-tabel .invoer-kolomkop { display: none; }
  .invoer-tabel .regel, .invoer-tabel.met-keuze .regel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .invoer-tabel .regel > .regel-art { flex: 1 1 100%; }
  .invoer-tabel .regel > .regel-totaal { width: auto; margin-left: auto; }
  .kassa .kassa-tegels, body.volledig .kassa .kassa-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lade-strook .r { margin-left: 0; }
  .coupures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vk-tijd { flex-wrap: wrap; }
  .vk-lijn { display: none; }
}

/* ══ Het lijstsysteem ════════════════════════════════════════════════════
   Elk overzicht is hetzelfde opgebouwd: kop, cijferband, werkbalk,
   actieve filters, statuschips, tabel met bulkbalk en totalen, voet. */
.lijst-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lijst-kop .r { display: flex; gap: 8px; align-items: center; }
.lijst-kpis { margin-bottom: 14px; }
.lijst-kpis .kpi { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; padding: 14px 16px 12px; }
.lijst-kpis .kpi:hover { background: var(--wash2); }
.lijst-kpis .kpi.actief { box-shadow: inset 0 -3px 0 var(--data); }
.lijst-filterform { display: contents; }
.lijst .werkbalk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0; border: 0; background: transparent; margin-bottom: 10px; }
.lijst .werkbalk .zoekveld { flex: 1; min-width: 260px; max-width: 460px; }
.lijst .werkbalk .zoekveld > input { height: 34px; border-radius: 8px; font-size: 13.5px; padding-left: 34px; }
.lijst .werkbalk .zoekveld > svg { left: 11px; width: 16px; height: 16px; }
.lijst .werkbalk .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lijst .werkbalk .ghost { height: 34px; border-radius: 8px; }
.lijst .werkbalk .ghost svg { width: 14px; height: 14px; }
.lijst .werkbalk .ghost .tel { min-width: 18px; height: 18px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
  font-size: 11px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: 2px; }
.lijst .werkbalk .live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lijst .werkbalk .live i { width: 7px; height: 7px; border-radius: 999px; background: var(--chip-green-dot); box-shadow: 0 0 0 3px var(--chip-green-bg); }
details.lijst-menu { position: relative; }
details.lijst-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
details.lijst-menu > summary::-webkit-details-marker { display: none; }
details.lijst-menu[open] > summary.ghost { background: var(--wash); }
.lijst-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 20px 50px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06); font-size: 13px; }
.lijst-pop .kop { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.lijst-pop .kop .m { font-weight: 400; color: var(--muted); font-size: 12px; }
.lijst-pop .kop .wis { margin-left: auto; color: var(--data); font-weight: 500; font-size: 12.5px; text-decoration: none; }
.lijst-pop .voet { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.lijst-pop .voet .btn-primary { margin-left: auto; }
.lijst-fp { width: 560px; }
.lijst-fp .raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 16px; }
.lijst-fp .raster .breed { grid-column: 1 / -1; }
.lijst-fp .presets { display: flex; gap: 5px; flex-wrap: wrap; }
.lijst-fp .presets .fchip { padding: 3px 10px; font-size: 12px; }
.lijst-wg { width: 300px; }
.lijst-wg .item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; text-decoration: none; color: var(--ink); }
.lijst-wg .item a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.lijst-wg .item:hover { background: var(--wash2); }
.lijst-wg .item.aan { background: var(--wash); font-weight: 600; }
.lijst-wg .item .m { font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.lijst-wg .item .weg { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 2px; }
.lijst-wg .item .weg:hover { color: var(--neg); }
.lijst-wg-opslaan { display: none; }
.lt td.vast a.nr, .lt td.vast b { white-space: nowrap; }
.lt td.vast .sub { white-space: normal; overflow-wrap: anywhere; max-width: 260px; }
.lt .celfoto { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lt .vr.klik { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px 0 6px; line-height: 20px; font-variant-numeric: tabular-nums; }
.lt .vr.klik::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--chip-green-dot); flex: none; }
.lt .vr.klik.laag::before { background: var(--chip-orange-dot); }
.lt .vr.klik.op::before { background: var(--chip-red-dot); }
.lt .vr.klik:hover { border-color: var(--axis); }
.lt .celfoto img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; background: var(--wash); }
.lijst-wg .opslaan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.lijst-wg .opslaan .ghost.small { margin-left: auto; }
.lijst-wg .opslaan input[name=naam] { flex: 1 1 100%; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; }
.lijst-wg .opslaan .vink { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.lijst-kk { width: 340px; right: auto; }
.lijst-kk .lijst { max-height: 380px; overflow: auto; padding: 6px 0; }
.lijst-kk .kol { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 12px; cursor: grab; }
.lijst-kk .kol:hover { background: var(--wash2); }
.lijst-kk .kol.sleept { opacity: .4; }
.lijst-kk .kol .greep { color: var(--axis); font-size: 14px; letter-spacing: -2px; }
.lijst-kk .kol .naam { flex: 1; }
.lijst-kk .kol .naam small { display: block; color: var(--muted); font-size: 11px; }
.lijst-kk .kol .pin { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.lijst-kk .kol.uit .naam { color: var(--sub); }
.lijst-kk .kol input.sch { appearance: none; -webkit-appearance: none; width: 30px; height: 18px; border-radius: 999px; background: var(--axis); position: relative; flex: none; margin: 0; cursor: pointer; }
.lijst-kk .kol input.sch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .12s ease; }
.lijst-kk .kol input.sch:checked { background: var(--btn-bg); }
.lijst-kk .kol input.sch:checked::after { left: 14px; }
.lijst-kk .kol input[disabled] { display: none; }
.lijst-actief { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; margin-bottom: 10px; }
.lijst-actief .lab { color: var(--muted); }
.lijst-actief .fchip { display: inline-flex; align-items: center; gap: 6px; background: var(--wash); border-color: transparent; color: var(--ink); }
.lijst-actief .fchip b { font-weight: 600; }
.lijst-actief .fchip .x { color: var(--muted); font-size: 13px; }
.lijst-actief .wis { color: var(--data); font-weight: 500; text-decoration: none; }
.lijst-chips { margin-bottom: 10px; }
.lijst-kaart { padding: 0; }
.lt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.lt th { position: sticky; top: 0; background: var(--card); z-index: 2; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lt th a { color: inherit; text-decoration: none; }
.lt th a:hover { color: var(--ink); }
.lt th.sort a { color: var(--ink); }
.lt th.sort a::after { content: ""; display: inline-block; margin-left: 5px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lt th.sort.op a::after { transform: rotate(-135deg) translateY(-1px); }
.lt th.num, .lt td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lt td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lt td.num, .lt td.kies, .lt td.acties, .lt td .chip, .lt td.vast { white-space: nowrap; }
.lt th.vast, .lt td.vast { width: 1%; }
.lt tbody tr:last-child td { border-bottom: 0; }
.lt tbody tr:hover td { background: var(--wash2); }
.lt tbody tr.actief td { background: var(--data-wash); }
.lt tbody tr:has(input[name=bulk]:checked) td { background: var(--data-wash); }
.lt .sub { font-size: 12px; color: var(--muted); margin-top: 1px; font-weight: 400; }
.lt td a { color: inherit; text-decoration: none; }
.lt td a.nr { font-weight: 600; }
.lt td a:hover { text-decoration: underline; }
.lt .kies, .lt th.kies { width: 30px; padding-left: 14px; padding-right: 4px; }
.lt .kies input { width: 15px; height: 15px; margin: 0; accent-color: var(--btn-bg); vertical-align: middle; }
.lt .rij-acties { display: inline-flex; gap: 4px; opacity: 0; transition: opacity .1s; }
.lt tr:hover .rij-acties, .lt tr.actief .rij-acties { opacity: 1; }
.lt .rij-acties .ghost { height: 28px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.lt td.acties { width: 0; padding: 0; position: relative; }
.lt th.acties { width: 0; padding: 0; }
.lt td.acties .rij-acties { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: var(--card); box-shadow: -12px 0 10px -6px var(--card); padding-left: 4px; z-index: 1; }
.lt tfoot td { background: var(--wash2); font-weight: 600; color: var(--sub); border-top: 1px solid var(--line); border-bottom: 0; padding: 9px 8px; }
.lt tfoot td.vast { white-space: normal; }
.lt tfoot td b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lt .balk { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.lt .balk i { display: block; height: 5px; border-radius: 99px; background: var(--wash); overflow: hidden; }
.lt .balk i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--chip-green-dot); }
.lt .balk span { font-size: 11.5px; color: var(--muted); }
.lt .lijst-leeg { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }
.lt .lijst-leeg b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.lt .lijst-leeg span { display: block; margin-bottom: 10px; }
.lijst-kaart.compact .lt td { padding: 5px 10px; font-size: 13px; }
.lijst-kaart.compact .lt .sub { display: none; }
.bulk { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 10px; font-size: 13px; margin: 10px 14px 4px; }
.bulk b { font-weight: 650; }
.bulk .vink { width: 15px; height: 15px; border-radius: 4px; background: var(--btn-ink); position: relative; }
.bulk .vink::after { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 2px; background: var(--btn-bg); }
.bulk .r { margin-left: auto; display: flex; gap: 6px; }
.bulk .ghost { background: transparent; color: var(--btn-ink); border-color: rgba(255,255,255,.28); box-shadow: none; height: 28px; font-size: 12.5px; padding: 0 10px; }
.bulk .ghost.hoofd { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.lijst-voet { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.lijst-voet .r { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.lijst-voet .pg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-left: 4px; vertical-align: middle; }
.lijst-voet .pg a, .lijst-voet .pg span { padding: 4px 10px; font-size: 12.5px; color: var(--sub); border-right: 1px solid var(--line); text-decoration: none; }
.lijst-voet .pg a:last-child, .lijst-voet .pg span:last-child { border-right: 0; }
.lijst-voet .pg a.aan { background: var(--btn-bg); color: var(--btn-ink); }
.lijst-voet .pg .uit { color: var(--axis); }
.lijst-voet kbd { font: 500 11px/1 inherit; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; background: var(--card); margin: 0 2px; }
@media (max-width: 1300px) { .lt td.acties, .lt th.acties { display: none; } }
@media (max-width: 900px) { .lijst-voet .toetsen { display: none; } .lijst-fp { width: min(560px, 92vw); } }
@media (max-width: 600px) {
  .lt thead, .lt tfoot { display: none; }
  .lt, .lt tbody, .lt tr, .lt td { display: block; }
  .lt tr { border-bottom: 1px solid var(--line); padding: 8px 14px; }
  .lt td { padding: 2px 0; border: 0; white-space: normal; }
  .lt td.kies { display: inline-block; margin-right: 6px; }
  .lt td::before { content: attr(data-label); display: inline-block; width: 110px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .lt td.vast::before, .lt td.acties::before { display: none; }
  .lt td.num { text-align: left; }
}

/* ── Het kaartsysteem: elke detailpagina dezelfde opbouw ─────────────── */
.kaart-terug { display: inline-block; font-size: 12.5px; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.kaart-terug:hover { color: var(--ink); }
.kkop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.kkop .foto { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--wash); color: var(--sub); font-weight: 650; font-size: 18px; display: grid; place-items: center; flex: none; }
.kkop .titel { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 320px; }
.kkop .titel h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kkop .titel .sub { font-size: 13px; color: var(--muted); margin-top: 0; }
.kkop .titel .sub a { color: var(--data); text-decoration: none; }
.kkop .r { margin-left: auto; }
.kkop .menuwrap .pijl { font-size: 10px; margin-left: 2px; }
.ktabs { margin: 0 0 14px; }
.kraster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.kkol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1180px) { .kraster { grid-template-columns: minmax(0, 1fr); } }
.stappen { display: flex; align-items: center; gap: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 14px; font-size: 13px; overflow-x: auto; }
.stap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.stap:last-child { flex: none; }
.stap .bol { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--axis); display: grid; place-items: center; font-size: 11px; color: var(--muted); background: var(--card); flex: none; }
.stap.done .bol { background: var(--chip-green-dot); border-color: var(--chip-green-dot); color: #fff; }
.stap.cur .bol { border-color: var(--btn-bg); color: var(--btn-bg); font-weight: 700; }
.stap .tekst { display: flex; flex-direction: column; line-height: 1.25; }
.stap .naam { font-weight: 550; white-space: nowrap; color: var(--muted); }
.stap.done .naam { color: var(--ink); }
.stap.cur .naam { font-weight: 650; color: var(--ink); }
.stap .wanneer { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.stap .lijn { flex: 1; height: 2px; background: var(--line); margin: 0 10px; min-width: 14px; }
.stap.done .lijn { background: var(--chip-green-dot); }
.volgende { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--btn-bg); color: var(--btn-ink); margin-bottom: 14px; flex-wrap: wrap; }
.volgende .t { font-weight: 600; }
.volgende .m { opacity: .7; font-size: 12.5px; }
.volgende .r { margin-left: auto; display: flex; gap: 8px; }
.volgende .ghost { background: transparent; color: var(--btn-ink); border-color: rgba(255,255,255,.28); box-shadow: none; height: 34px; }
.volgende .ghost:hover { background: rgba(255,255,255,.08); }
.volgende .ghost.hoofd { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.verloop { display: flex; flex-direction: column; padding: 6px 16px 12px; }
.verloop .leeg { padding: 12px 0; color: var(--muted); font-size: 13px; }
.vl-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; position: relative; font-size: 13px; align-items: start; }
.vl-item::before { content: ""; position: absolute; left: 8px; top: 26px; bottom: -8px; width: 1px; background: var(--line); }
.vl-item:last-child::before { display: none; }
.vl-bol { width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--data); background: var(--card); margin-top: 1px; }
.vl-bol.groen { border-color: var(--chip-green-dot); }
.vl-bol.grijs { border-color: var(--axis); }
.vl-bol.oranje { border-color: var(--chip-orange-dot); }
.vl-bol.rood { border-color: var(--chip-red-dot); }
.vl-item .wat b { font-weight: 600; }
.vl-item .wat a { color: inherit; text-decoration: none; }
.vl-item .wat a:hover { text-decoration: underline; }
.vl-item .wat .m { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.vl-item .wan { color: var(--muted); font-size: 12px; white-space: nowrap; }
.notitie-rij { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.notitie-rij .avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--wash); color: var(--sub); font-size: 11px; font-weight: 650; display: grid; place-items: center; flex: none; }
.notitie-rij input { flex: 1; min-width: 0; }
/* Inline bewerken: een waarde is een waarde tot je erop klikt. */
form[data-inline] .inline { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; }
form[data-inline] .inline:hover { border-color: var(--line); background: var(--card); padding-left: 10px; padding-right: 10px; }
form[data-inline] .inline:focus { border-color: var(--data); background: var(--card); padding-left: 10px; padding-right: 10px; box-shadow: 0 0 0 3px var(--data-wash); }
form[data-inline] .inline.gewijzigd { border-color: var(--data); background: var(--card); padding-left: 10px; padding-right: 10px; }
.opslaanbalk { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--wash2); font-size: 12.5px; color: var(--muted); }
.opslaanbalk .r { margin-left: auto; display: flex; flex-direction: row-reverse; gap: 8px; }
.opslaanbalk b { color: var(--ink); }
.kaart-lijst { display: flex; flex-direction: column; }
.kaart-rij { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kaart-rij:last-child { border-bottom: 0; }
.kaart-rij .wat { flex: 1; min-width: 0; }
.kaart-rij .wat .m { color: var(--muted); font-size: 12.5px; }
.kaart-rij .bedrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kaart-rij a { color: inherit; text-decoration: none; }
.kaart-rij a:hover { text-decoration: underline; }
.kaart-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 18px; }
.kaart-velden .breed { grid-column: 1 / -1; }
.totalen { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 18px 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
.totalen .totaal { display: flex; justify-content: space-between; gap: 24px; width: 320px; max-width: 100%; color: var(--sub); }
.totalen .totaal .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.totalen .totaal.groot { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; font-weight: 650; color: var(--ink); font-size: 14.5px; }
.kaart .lt td .vr.klik { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px 0 6px; line-height: 18px; font-size: 12px; color: var(--sub); }
.kaart .lt td .vr.klik::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--chip-green-dot); }
.bijlage-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bijlage-form input[type=file] { flex: 1 1 160px; min-width: 0; font-size: 12.5px; }
.mini-vk .vk { border: 0; border-radius: 0; box-shadow: none; }
.mini-vk .vk-pijl, .mini-vk .vk-sluit { display: none; }
.kaart-velden .field label.vink { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); text-transform: none; letter-spacing: 0; }
form[data-inline] textarea.inline { border-color: transparent; background: transparent; padding-left: 0; padding-right: 0; font: inherit; font-size: 13.5px; color: var(--ink); border: 1px solid transparent; border-radius: 8px; padding: 6px 0; resize: vertical; width: 100%; }
form[data-inline] textarea.inline:hover, form[data-inline] textarea.inline:focus, form[data-inline] textarea.inline.gewijzigd { border-color: var(--line); background: var(--card); padding: 6px 10px; }
form[data-inline] textarea.inline:focus { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-wash); outline: none; }
form[data-inline] select.inline { text-align: left; }
.mini-vk .vk { width: 100%; max-width: 100%; }
.mini-vk .vk-blok, .mini-vk .vk-kop { max-width: 100%; }
.mini-vk .vk-blok { overflow-x: auto; }
.mini-vk .vk-tabel { width: 100%; }
.mini-vk .vk-kop { flex-wrap: wrap; }
.mini-vk .vk-titel { flex: 1 1 140px; }
.mini-vk .vk-tabel th, .mini-vk .vk-tabel td { padding-left: 10px; padding-right: 10px; }
.mini-vk .vk-kop, .mini-vk .vk-blokkop { padding-left: 16px; padding-right: 16px; }
.boom .tak { padding: 9px 18px; border-bottom: 1px solid var(--line); }
.boom .tak.gekozen { background: var(--data-wash); }
.boom .tak-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.boom .tak-naam { font-weight: 600; color: inherit; text-decoration: none; }
.boom .tak-naam:hover { text-decoration: underline; }
.boom .tak-adres { color: var(--muted); font-size: 12px; }
.boom .tak-knoppen { margin-left: auto; display: inline-flex; gap: 4px; }
.boom .tak-acties { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12.5px; }
.boom .tak-groep { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.lijst-pop .voet .btn-primary, .lijst-pop .voet .ghost { height: 34px; }
.lijst-pop .voet .ghost.small, .lijst-pop .voet .btn-primary.small { height: 28px; }
.lijst-wg .opslaan .ghost.small { height: 28px; }

/* ── Mediabibliotheek ──────────────────────────────────────────────── */
.mraster { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.mraster.zonder-lade { grid-template-columns: 210px minmax(0, 1fr); }
.mrail { display: flex; flex-direction: column; gap: 12px; }
.boomlijst { display: flex; flex-direction: column; padding: 6px 0; }
.boomlijst a { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13px; color: var(--ink); text-decoration: none; }
.boomlijst a:hover { background: var(--wash2); }
.boomlijst a.aan { background: var(--data-wash); font-weight: 600; }
.boomlijst a .telr { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.boomlijst a.aan .telr { color: var(--data); }
.boomlijst a.stil { color: var(--muted); }
.boomlijst a.waarschuw { color: var(--warn); }
.snel { display: flex; flex-direction: column; padding: 6px 0; }
.snel a { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12.5px; white-space: nowrap; color: var(--ink); text-decoration: none; }
.snel a:hover { background: var(--wash2); }
.snel a.aan { background: var(--data-wash); font-weight: 600; }
.snel a .telr { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.mwerkbalk { display: flex; gap: 8px; align-items: center; padding: 10px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.mwerkbalk .zoekveld { flex: 1; min-width: 200px; }
.mwerkbalk .seg { flex: none; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.mgrid.groot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mtile { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.mtile.sel, .mtile:has(input:checked) { box-shadow: 0 0 0 2px var(--data); }
.mtile .beeld { aspect-ratio: 1 / 1; display: block; width: 100%; object-fit: cover; background: var(--wash); }
.mtile .beeld-leeg { aspect-ratio: 1 / 1; display: grid; place-items: center; color: var(--muted); background: var(--wash); font-size: 12px; }
.mtile .kies { position: absolute; top: 8px; left: 8px; margin: 0; width: 18px; height: 18px; accent-color: var(--data); }
.mtile .hoofd { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; background: #fff; color: var(--ink); border-radius: 999px; padding: 2px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mtile .onder { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.mtile .onder a.naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.mtile .onder .m { color: var(--muted); font-size: 11.5px; display: flex; justify-content: space-between; gap: 6px; min-width: 0; }
.mtile .onder .m span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtile .onder .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chipje { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--wash); color: var(--sub); white-space: nowrap; }
.chipje.groen { background: var(--chip-green-bg); color: var(--chip-green-ink); }
.chipje.oranje { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.chipje.rood { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.mtile.drop { border: 2px dashed var(--axis); background: var(--wash2); color: var(--muted); display: grid; place-items: center; text-align: center; font-size: 12.5px; padding: 14px; min-height: 190px; cursor: pointer; }
.mtile.drop.over { border-color: var(--data); background: var(--data-wash); }
.mlade .voorbeeld { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--wash); border-radius: 12px 12px 0 0; }
.mlade .koppel { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mlade .koppel .naam { flex: 1; min-width: 0; }
.mlade .koppel .naam small { display: block; color: var(--muted); font-size: 11.5px; }
.mlade .koppel .pos { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.mlade .knoppen { display: flex; gap: 6px; padding: 12px 16px; flex-wrap: wrap; }
.mlade form.knoppen-vorm { display: contents; }
.bulk2 { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--btn-bg); color: var(--btn-ink); border-radius: 10px; font-size: 13px; margin: 12px 12px 0; flex-wrap: wrap; }
.bulk2 .r { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bulk2 .ghost { background: transparent; color: var(--btn-ink); border-color: rgba(255,255,255,.3); white-space: nowrap; }
.bulk2 .ghost.hoofd { background: var(--btn-ink); color: var(--btn-bg); border-color: var(--btn-ink); }
.bulk2 input, .bulk2 select { height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: var(--btn-ink); padding: 0 8px; font-size: 12.5px; }
.bulk2 input::placeholder { color: rgba(255,255,255,.55); }
.dropzone { border: 2px dashed var(--axis); border-radius: 14px; padding: 22px; text-align: center; color: var(--sub); font-size: 13.5px; background: var(--wash2); margin: 12px; cursor: pointer; }
.dropzone.over { border-color: var(--data); background: var(--data-wash); }
.dropzone b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.mlijst .lt td { white-space: normal; }
.mlijst .lt td .thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin-right: 8px; background: var(--wash); }
@media (max-width: 1180px) { .mraster, .mraster.zonder-lade { grid-template-columns: 190px minmax(0, 1fr); } .mlade { grid-column: 1 / -1; } }
@media (max-width: 760px) { .mraster, .mraster.zonder-lade { grid-template-columns: minmax(0, 1fr); } .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mlade .knoppen .ghost { height: 28px; }