/* Sinyal — tokens per thema; componenten lezen alleen variabelen. */

.t-light {
  --bg:#F5F6F8; --side:#FFFFFF; --s0:#F8F9FB; --s1:#FFFFFF; --s2:#F1F2F5; --s3:#E9EBEF; --tip:#FFFFFF;
  --line:#E4E6EB; --line2:#D5D8DF; --row:#EEF0F3; --hair:#E6E8EC;
  --text:#0F1115; --t2:#4C5361; --mute:#666D7A; --faint:#9AA1AD; --dash:#C4C8D0;
  --track:#ECEEF2; --track2:#D3D7DE;
  --sig:#C8F03C; --sig-ink:#0B0D06; --mark:#5F8A00; --mark-soft:rgba(95,138,0,.35);
  --link:var(--merk-tx); --link-h:var(--merk-h);
  --sig-bg:rgba(200,240,60,.3); --sig-bd:rgba(95,138,0,.3); --sig-tx:#3D5A00;
  --sel:rgba(236,48,19,.055); --glow:rgba(200,240,60,.28);
  /* Het rood van het logo. `--merk` is de kleur zelf; `--merk-tx` is dezelfde kleur,
     donker genoeg om als tekst te lezen (5,9:1 op wit). */
  --merk:#EC3013; --merk-tx:#C2260C; --merk-h:#9E1D06; --merk-ink:#FFFFFF;
  --merk-bg:rgba(236,48,19,.10); --merk-bd:rgba(236,48,19,.30);
  --emb:#D96A1E; --emb-bg:rgba(255,159,90,.16); --emb-bd:rgba(217,106,30,.3); --emb-tx:#A4480A;
  --crit-bg:rgba(255,92,122,.12); --crit-bd:rgba(181,29,63,.25); --crit-tx:#B51D3F;
  --nl:#1F9AA3; --be:#8A6BEB;
  --card-sh:0 1px 2px rgba(16,24,40,.04); --tip-sh:0 8px 24px rgba(16,24,40,.12);
  --paper:#FFFFFF; --paper-bd:#E4E6EB; --paper-sh:0 10px 30px rgba(16,24,40,.08);
  --nav-on:#F1F2F5; --nav-ring:#E1E4EA; --tog-off:#D5D8DF; --knob-off:#FFFFFF;
  color-scheme: light;
}
.t-dark {
  --bg:#08090C; --side:#0C0D12; --s0:#0C0D12; --s1:#12141A; --s2:#1A1D26; --s3:#222632; --tip:#222632;
  --line:#232733; --line2:#2E3340; --row:#1B1E27; --hair:#191C24;
  --text:#ECEEF2; --t2:#A4AAB8; --mute:#7C8393; --faint:#4A5160; --dash:#3A4050;
  --track:#1C2029; --track2:#343A48;
  --sig:#C8F03C; --sig-ink:#0B0D06; --mark:#C8F03C; --mark-soft:rgba(200,240,60,.55);
  --link:var(--merk-tx); --link-h:var(--merk-h);
  --sig-bg:rgba(200,240,60,.09); --sig-bd:rgba(200,240,60,.28); --sig-tx:#D9F57A;
  --sel:rgba(236,48,19,.06); --glow:rgba(200,240,60,.07);
  --merk:#EC3013; --merk-tx:#FF7A5E; --merk-h:#FF9B85; --merk-ink:#FFFFFF;
  --merk-bg:rgba(236,48,19,.14); --merk-bd:rgba(236,48,19,.38);
  --emb:#FF9F5A; --emb-bg:rgba(255,159,90,.09); --emb-bd:rgba(255,159,90,.3); --emb-tx:#FFB684;
  --crit-bg:rgba(255,92,122,.09); --crit-bd:rgba(255,92,122,.3); --crit-tx:#FF8FA3;
  --nl:#1F9AA3; --be:#8A6BEB;
  --card-sh:none; --tip-sh:0 8px 24px rgba(0,0,0,.4);
  --paper:#F3F1EA; --paper-bd:transparent; --paper-sh:0 18px 40px rgba(0,0,0,.45);
  --nav-on:#161920; --nav-ring:#262B37; --tog-off:#2A2F3B; --knob-off:#A4AAB8;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: var(--bg); color: var(--text); min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-h); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
svg { flex-shrink: 0; }

/* De koppen staan in het schrift van het logo: Archivo, vet, en even smal getrokken.
   De breedte-as op 86% en de letterafstand op -.035em zijn niet gekozen maar gemeten —
   bij die twee waarden vallen de letters van het logo op een paar tienden na samen. */
.disp { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-stretch: 86%; letter-spacing: -.035em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.lbl { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.t2 { color: var(--t2); }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- layout */
.app { display: flex; min-height: 100vh; }
.side {
  width: 248px; flex-shrink: 0; background: var(--side); border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 28px; padding: 20px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; padding: 4px 8px; }
/* Het wordmerk staat er twee keer: de inkt van het lichte logo verdwijnt op de donkere
   zijbalk, dus per thema hangt er één. */
.brand-logo { display: block; height: 28px; width: auto; }
.t-light .brand-logo-dark, .t-dark .brand-logo:not(.brand-logo-dark) { display: none; }
.account { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); }
.account-tile { width: 32px; height: 32px; border-radius: 8px; background: var(--merk-bg); color: var(--merk-tx); border: 1px solid var(--merk-bd); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.account-meta { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.account-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uitlog { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--mute); }
.uitlog:hover { color: var(--merk-tx); background: var(--merk-bg); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group .lbl { padding: 0 12px 8px; }
.nav { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--t2); font-weight: 500; }
.nav:hover { color: var(--text); background: var(--nav-on); }
.nav svg { color: inherit; }
.nav-on { background: var(--nav-on); color: var(--text); box-shadow: inset 0 0 0 1px var(--nav-ring); }
.nav-on svg { color: var(--merk); }
.nav-label { flex: 1; }
.badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--emb-bg); color: var(--emb-tx); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.meetklok { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--s0); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 3px var(--sig-bg); display: inline-block; }
.dot.emb { background: var(--emb); box-shadow: 0 0 0 3px var(--emb-bg); }
.dot.off { background: var(--faint); box-shadow: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 40px; border-bottom: 1px solid var(--hair); background: var(--side);
  position: sticky; top: 0; z-index: 20;
}
.top-right { display: flex; align-items: center; gap: 12px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 32px 40px 24px; }
.head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.head h1 { font-size: 30px; line-height: 1.1; overflow-wrap: anywhere; }
.head p { color: var(--t2); font-size: 15px; max-width: 680px; text-wrap: pretty; }
.head-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.content { padding: 0 40px 48px; display: flex; flex-direction: column; gap: 20px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.split-left { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; }
.split-right { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { margin-left: auto; }

/* ---------------------------------------------------------------- componenten */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--card-sh); }
.card-pad { padding: 24px; }
.card-clip { overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); }
.inset { padding: 14px 16px; border-radius: 12px; background: var(--s0); border: 1px solid var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; transition: filter .15s, background-color .15s, border-color .15s; text-decoration: none;
}
.btn-p { background: var(--merk); color: var(--merk-ink); }
.btn-p:hover { filter: brightness(.93); color: var(--merk-ink); }
.btn-s { background: var(--s2); border-color: var(--line2); color: var(--text); }
.btn-s:hover { border-color: var(--faint); color: var(--text); }
.btn-g { background: transparent; color: var(--t2); }
.btn-g:hover { color: var(--text); background: var(--s2); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; background: var(--s2); color: var(--t2); border: 1px solid var(--line2); white-space: nowrap;
}
.chip-sig { background: var(--sig-bg); color: var(--sig-tx); border-color: var(--sig-bd); }
.chip-emb { background: var(--emb-bg); color: var(--emb-tx); border-color: var(--emb-bd); }
.chip-crit { background: var(--crit-bg); color: var(--crit-tx); border-color: var(--crit-bd); }

.field {
  height: 40px; border-radius: 10px; background: var(--s0); border: 1px solid var(--line2); padding: 0 12px;
  display: flex; align-items: center; gap: 8px; color: var(--mute); white-space: nowrap;
}
.field:focus-within { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-bg); }
.field input, .field select { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; color: var(--text); height: 100%; }
.field select { cursor: pointer; }
.field input::placeholder { color: var(--mute); }
.field input[type="number"] { width: 72px; flex: none; }
.kbd { font-size: 11px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line2); color: var(--mute); }

/* Losse invoervelden. Deze stonden tot nu toe kaal: een onbewerkt browserveld midden
   tussen kaarten die wél een vorm hebben. Ze dragen nu dezelfde hoogte, ronding, rand en
   focuskleur als .field en .btn, zodat een formulier bij de rest van het scherm hoort. */
.inp {
  height: 36px; min-width: 0; max-width: 100%; padding: 0 12px; border-radius: 10px;
  background: var(--s0); border: 1px solid var(--line2); color: var(--text); font: inherit;
  outline: 0; transition: border-color .15s, box-shadow .15s;
}
.inp:hover:not(:disabled):not(:focus) { border-color: var(--faint); }
.inp:focus { border-color: var(--merk); box-shadow: 0 0 0 3px var(--merk-bg); }
.inp::placeholder { color: var(--mute); }
.inp:disabled { opacity: .5; cursor: not-allowed; }
select.inp {
  cursor: pointer; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666D7A' stroke-width='2.5' 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 10px center;
}
.t-dark select.inp {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8393' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Een sjabloon is html: daar hoort het schrift bij dat tekens uit elkaar houdt. */
textarea.inp {
  height: auto; padding: 10px 12px; line-height: 1.55; resize: vertical;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 13px;
}

.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); }
.seg-taal a { min-width: 30px; text-align: center; letter-spacing: .02em; }
.seg a, .seg button {
  display: flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 10px;
  border-radius: 7px; color: var(--mute); border: 0; background: transparent; cursor: pointer; font-size: 12px;
}
.seg .on { background: var(--s1); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg a:hover, .seg button:hover { color: var(--text); }

.check { display: inline-flex; align-items: center; gap: 10px; color: var(--t2); cursor: pointer; user-select: none; }
.check input { appearance: none; margin: 0; width: 34px; height: 20px; border-radius: 99px; background: var(--tog-off); position: relative; cursor: pointer; transition: background-color .15s; }
.check input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob-off); box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: left .15s; }
.check input:checked { background: var(--sig); }
.check input:checked::after { left: 17px; background: var(--sig-ink); }
.box { appearance: none; margin: 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--dash); cursor: pointer; display: inline-grid; place-content: center; vertical-align: middle; }
.box:checked { background: var(--sig); border-color: var(--sig); }
.box:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--sig-ink); border-bottom: 2px solid var(--sig-ink); transform: rotate(-45deg) translate(1px, -1px); }

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); font-weight: 500; padding: 14px 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl th.r { text-align: right; }
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--row); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.sel td { background: var(--sel); }
.tbl tr[data-href] { cursor: pointer; }
.tbl tr[data-href]:hover td { background: var(--sel); }
.tbl th a { color: inherit; }
.tbl th a.on { color: var(--text); }

/* Bestellingen op /facturen: per dag een pil, en achter elke rij een klein menu. De
   tabel scrolt hier niet horizontaal — vijf smalle kolommen passen — zodat het menu niet
   wordt afgeknipt door de rand van de kaart. */
.tbl-wrap:has(.orders-tbl) { overflow: visible; }
.orders-tbl tr.dag-rij td { padding-top: 18px; padding-bottom: 8px; text-align: center; background: var(--s0); }
.dag-pil {
  display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--s1); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t2);
}
.rij-menu { position: relative; display: inline-block; }
.rij-menu summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--mute); font-weight: 700; letter-spacing: 1px; user-select: none;
}
.rij-menu summary::-webkit-details-marker { display: none; }
.rij-menu summary:hover, .rij-menu[open] summary { background: var(--s2); color: var(--text); }
.rij-menu-lijst {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 6px;
  background: var(--tip); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column; text-align: left;
}
.rij-menu-lijst a { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--text); white-space: nowrap; font-size: 13px; }
.rij-menu-lijst a:hover { background: var(--s2); }
@media (max-width: 640px) {
  .orders-tbl th:nth-child(3), .orders-tbl td:nth-child(3) { display: none; }
}

.prod { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 420px; }
.prod-title { color: var(--text); font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.prod-ean { font-size: 12px; color: var(--mute); }

/* Een artikel dat naar bol linkt. Het pijltje verschijnt pas bij hover of focus: bij
   vijftig rijen onder elkaar is een permanent icoontje per regel ruis, maar wie ergens
   naartoe wijst hoort te zien dat het ergens heen gaat. */
.prod-link { display: inline-flex; align-items: flex-start; gap: 6px; color: inherit; text-decoration: none; }
.prod-link:hover .prod-title,
.prod-link:focus-visible .prod-title { color: var(--merk-tx); text-decoration: underline; text-underline-offset: 2px; }
.prod-uit { flex-shrink: 0; margin-top: 2px; color: var(--mute); opacity: 0; transition: opacity .12s ease; }
.prod-link:hover .prod-uit,
.prod-link:focus-visible .prod-uit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .prod-uit { transition: none; } }

.ring { position: relative; flex-shrink: 0; }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mini-score { display: flex; align-items: center; gap: 10px; }
.bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--mark); }
.bar-dash { height: 6px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--line2) 0 5px, transparent 5px 10px); }
.range { position: relative; height: 6px; border-radius: 99px; background: var(--track); }
.range > i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--mark-soft); }
.range > b { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--mark); }
.conf { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.conf-dots { display: flex; gap: 3px; }
.conf-dots i { display: block; width: 6px; height: 6px; border-radius: 2px; background: var(--line2); }
.conf-dots i.on { background: var(--mark); }

.hud { position: relative; }
.hud::before, .hud::after { content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--merk); border-style: solid; pointer-events: none; }
.hud::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; border-radius: 14px 0 0 0; }
.hud::after { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 14px 0; }
.glow { background: radial-gradient(520px 260px at 92% 0%, var(--glow), transparent 70%), var(--s1); }

.notice { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--s0); border: 1px solid var(--line); }
.notice-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--s2); color: var(--t2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notice.emb .notice-icon { background: var(--emb-bg); color: var(--emb-tx); }
.notice.sig .notice-icon { background: var(--sig-bg); color: var(--mark); }
.notice p { flex: 1; color: var(--t2); }

.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat .disp { font-size: 22px; }
.part { display: flex; flex-direction: column; gap: 8px; }
.part-head { display: flex; align-items: baseline; gap: 10px; }
.part-head .score { margin-left: auto; font-size: 15px; font-weight: 600; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 10px 14px; color: var(--t2); display: flex; gap: 8px; align-items: center; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--merk); }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; color: var(--t2); }
.empty svg { color: var(--faint); }
.empty h3 { font-size: 16px; color: var(--text); font-weight: 700; font-stretch: 86%; letter-spacing: -.025em; }

.paper { background: var(--paper); color: #16181D; border: 1px solid var(--paper-bd); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--paper-sh); font-size: 12px; }
.paper .grey { color: #6B6F78; }
.paper .rule { border-top: 1px solid #DAD6CB; }

.chart { position: relative; }
.chart svg { display: block; max-width: 100%; height: auto; }
.chart-tip {
  position: absolute; width: 168px; padding: 10px 12px; border-radius: 10px; background: var(--tip); border: 1px solid var(--line2);
  box-shadow: var(--tip-sh); display: flex; flex-direction: column; gap: 6px; pointer-events: none; transition: left .08s, top .08s;
}
.legend-line { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }

.pager { display: flex; gap: 6px; align-items: center; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 12px 16px; border-radius: 12px; background: var(--tip); border: 1px solid var(--line2); box-shadow: var(--tip-sh); max-width: 420px; }
.toast[hidden] { display: none; }

.rv { animation: rv .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rv { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .rv { animation: none; } * { transition: none !important; } }

/* ---------------------------------------------------------------- smaller schermen */
@media (max-width: 1180px) {
  .side { width: 76px; padding: 20px 12px; }
  .side .lbl, .nav-label, .account-meta, .account > svg, .meetklok { display: none; }
  .brand { justify-content: center; }
  .brand-logo { width: 28px; object-fit: cover; object-position: left center; }
  .nav { justify-content: center; padding: 0; position: relative; }
  .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .account { justify-content: center; padding: 8px; }
  .split, .split-left, .split-right { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .side { display: none; }
  .top { padding: 0 16px; height: 64px; }
  .top .field { width: auto !important; flex: 1; }
  .top .seg-land { display: none; }
  .head { padding: 24px 16px 16px; flex-direction: column; align-items: flex-start; }
  .content { padding: 0 16px 32px; }
  .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .card-pad { padding: 18px; }
}

/* Het voorbeeld van een klantmail. Een eigen kader, want wat erin staat is niet van ons:
   het is de inhoud van de verkoper, in een iframe met zijn eigen, veel strengere slot. */
.mailvoorbeeld { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 10px; background: #fff; resize: vertical; }

/* Kolomkop met uitleg: het uitroepteken, en het blok dat app.js erbij tekent. */
.kop { display: inline-flex; align-items: center; gap: 6px; }
.kop-i {
  display: inline-grid; place-content: center; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--line2); color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: 0;
  cursor: help; flex-shrink: 0;
}
.kop-i:hover, .kop-i:focus-visible { color: var(--text); border-color: var(--mute); outline: none; }
.kop-tip {
  position: fixed; z-index: 50; max-width: 280px; padding: 10px 12px; border-radius: 10px;
  background: var(--tip); border: 1px solid var(--line2); box-shadow: var(--tip-sh);
  color: var(--t2); font-size: 12.5px; line-height: 1.45; text-transform: none; letter-spacing: 0;
  font-family: inherit; font-weight: 400; white-space: normal; pointer-events: none;
}

/* ---- thema volgt het apparaat (gegenereerd uit .t-light / .t-dark hierboven) */
.t-auto {
  --bg:#F5F6F8; --side:#FFFFFF; --s0:#F8F9FB; --s1:#FFFFFF; --s2:#F1F2F5; --s3:#E9EBEF; --tip:#FFFFFF;
  --line:#E4E6EB; --line2:#D5D8DF; --row:#EEF0F3; --hair:#E6E8EC;
  --text:#0F1115; --t2:#4C5361; --mute:#666D7A; --faint:#9AA1AD; --dash:#C4C8D0;
  --track:#ECEEF2; --track2:#D3D7DE;
  --sig:#C8F03C; --sig-ink:#0B0D06; --mark:#5F8A00; --mark-soft:rgba(95,138,0,.35);
  --link:var(--merk-tx); --link-h:var(--merk-h);
  --sig-bg:rgba(200,240,60,.3); --sig-bd:rgba(95,138,0,.3); --sig-tx:#3D5A00;
  --sel:rgba(236,48,19,.055); --glow:rgba(200,240,60,.28);
  /* Het rood van het logo. `--merk` is de kleur zelf; `--merk-tx` is dezelfde kleur,
     donker genoeg om als tekst te lezen (5,9:1 op wit). */
  --merk:#EC3013; --merk-tx:#C2260C; --merk-h:#9E1D06; --merk-ink:#FFFFFF;
  --merk-bg:rgba(236,48,19,.10); --merk-bd:rgba(236,48,19,.30);
  --emb:#D96A1E; --emb-bg:rgba(255,159,90,.16); --emb-bd:rgba(217,106,30,.3); --emb-tx:#A4480A;
  --crit-bg:rgba(255,92,122,.12); --crit-bd:rgba(181,29,63,.25); --crit-tx:#B51D3F;
  --nl:#1F9AA3; --be:#8A6BEB;
  --card-sh:0 1px 2px rgba(16,24,40,.04); --tip-sh:0 8px 24px rgba(16,24,40,.12);
  --paper:#FFFFFF; --paper-bd:#E4E6EB; --paper-sh:0 10px 30px rgba(16,24,40,.08);
  --nav-on:#F1F2F5; --nav-ring:#E1E4EA; --tog-off:#D5D8DF; --knob-off:#FFFFFF;
  color-scheme: light;
}
.t-auto .brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .t-auto {
  --bg:#08090C; --side:#0C0D12; --s0:#0C0D12; --s1:#12141A; --s2:#1A1D26; --s3:#222632; --tip:#222632;
  --line:#232733; --line2:#2E3340; --row:#1B1E27; --hair:#191C24;
  --text:#ECEEF2; --t2:#A4AAB8; --mute:#7C8393; --faint:#4A5160; --dash:#3A4050;
  --track:#1C2029; --track2:#343A48;
  --sig:#C8F03C; --sig-ink:#0B0D06; --mark:#C8F03C; --mark-soft:rgba(200,240,60,.55);
  --link:var(--merk-tx); --link-h:var(--merk-h);
  --sig-bg:rgba(200,240,60,.09); --sig-bd:rgba(200,240,60,.28); --sig-tx:#D9F57A;
  --sel:rgba(236,48,19,.06); --glow:rgba(200,240,60,.07);
  --merk:#EC3013; --merk-tx:#FF7A5E; --merk-h:#FF9B85; --merk-ink:#FFFFFF;
  --merk-bg:rgba(236,48,19,.14); --merk-bd:rgba(236,48,19,.38);
  --emb:#FF9F5A; --emb-bg:rgba(255,159,90,.09); --emb-bd:rgba(255,159,90,.3); --emb-tx:#FFB684;
  --crit-bg:rgba(255,92,122,.09); --crit-bd:rgba(255,92,122,.3); --crit-tx:#FF8FA3;
  --nl:#1F9AA3; --be:#8A6BEB;
  --card-sh:none; --tip-sh:0 8px 24px rgba(0,0,0,.4);
  --paper:#F3F1EA; --paper-bd:transparent; --paper-sh:0 18px 40px rgba(0,0,0,.45);
  --nav-on:#161920; --nav-ring:#262B37; --tog-off:#2A2F3B; --knob-off:#A4AAB8;
  color-scheme: dark;
}
  .t-auto .brand-logo:not(.brand-logo-dark) { display: none; }
  .t-auto .brand-logo-dark { display: block; }
}
/* Het beheerpaneel. Bovenop app.css (de server plakt ze aan elkaar): alleen wat het
   paneel extra nodig heeft, en alles leest dezelfde tokens. Geen eigen kleuren. */

/* ---------------------------------------------------------------- merk en knoppen */
.chip-merk { background: var(--merk-bg); color: var(--merk-tx); border-color: var(--merk-bd); }
.chip svg { margin-left: -2px; }
.btn-gevaar { background: var(--crit-bg); color: var(--crit-tx); border-color: var(--crit-bd); }
.btn-gevaar:hover { border-color: var(--crit-tx); color: var(--crit-tx); }
.btn-vol { width: 100%; height: 44px; }
.uitlog-vorm { margin: 0; display: flex; }
button.uitlog { border: 0; background: transparent; cursor: pointer; padding: 0; }
.notice.crit { background: var(--crit-bg); border-color: var(--crit-bd); }
.notice.crit p { color: var(--crit-tx); }
.notice.crit .notice-icon { background: transparent; color: var(--crit-tx); }
.notice.sig .notice-icon { background: transparent; }
a.extern { display: inline-flex; align-items: center; gap: 4px; }
a.terug { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* ---------------------------------------------------------------- de kop */
.top .lbl { color: var(--t2); }
.kruimel { color: var(--faint); margin: 0 4px; }
.sectie { font-size: 19px; margin-top: 8px; }

/* ---------------------------------------------------------------- klanten */
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 12px; }
@media (max-width: 1180px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tegel-plannen { grid-column: 1 / -1; } }
.tegel { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.tegel .disp { font-size: 28px; line-height: 1; }
.tegel-accent { border-color: var(--merk-bd); background: linear-gradient(0deg, var(--merk-bg), var(--merk-bg)), var(--s1); }
.tegel-accent .disp { color: var(--merk-tx); }
.tegel-plannen { justify-content: space-between; }
.plan-teller { display: inline-flex; align-items: baseline; gap: 6px; color: var(--t2); }
.plan-teller .disp { font-size: 22px; color: var(--text); }
.filters .zoekveld { flex: 1; min-width: 240px; }
.filters select.inp { height: 40px; }
.klant-naam { display: block; font-weight: 600; color: var(--text); }
.klant-naam:hover { color: var(--merk-tx); }
.tbl tr.geblokkeerd td { opacity: .55; }
/* Cellen met twee regels (naam + e-mail, chip + datum) lijnen bovenaan uit; anders
   staat de eerste regel van elke kolom op een andere hoogte. */
.tbl td { vertical-align: top; }
.plan { display: inline-block; text-transform: capitalize; font-weight: 500; }

/* ---------------------------------------------------------------- detail */
.gegevens { display: grid; grid-template-columns: 170px 1fr; gap: 12px 20px; margin: 0; align-items: baseline; }
.gegevens dt { padding-top: 2px; }
.gegevens dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.winkel-kop { padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.winkel-kop h3 { font-size: 18px; }

/* ---------------------------------------------------------------- formulieren */
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld .inp { width: 100%; height: 40px; }
.vorm { display: flex; flex-direction: column; gap: 16px; }
.vorm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: start; border-top: 1px solid var(--line); }
.vorm-voet { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.keuzes { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; }
.keuzes legend { padding: 0 6px; margin-left: -6px; }
/* Vier velden op een rij; de twee keuzeblokken nemen elk een halve rij. */
@media (min-width: 1181px) { .vorm-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .keuzes { grid-column: span 2; } }
.keuze { display: flex; align-items: center; gap: 10px; color: var(--text); cursor: pointer; }
.keuze input[type="radio"] { accent-color: var(--merk); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.inp.smal { width: 72px; height: 32px; }
.nieuw-code summary { cursor: pointer; list-style: none; padding-bottom: 18px; }
.nieuw-code summary::-webkit-details-marker { display: none; }
.nieuw-code summary > svg { color: var(--mute); transition: transform .15s; }
.nieuw-code[open] summary > svg { transform: rotate(180deg); }
.nieuw-code summary .row svg { color: var(--merk); }
.code-naam { font-weight: 600; letter-spacing: .02em; }

/* ---------------------------------------------------------------- beheerders */
.geheim-kaart { display: flex; flex-direction: column; gap: 10px; }
.geheim-kaart h3 { font-size: 19px; }
.geheim { font-size: 22px; letter-spacing: .1em; background: var(--s2); border: 1px solid var(--line2); padding: 14px 18px; border-radius: 10px; word-break: break-all; color: var(--text); }
.breek { word-break: break-all; }

/* ---------------------------------------------------------------- inloggen */
.inlog-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(640px 320px at 50% 0%, var(--merk-bg), transparent 70%), var(--bg); }
.inlog { width: 100%; max-width: 400px; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.inlog-merk { padding: 0; }
/* app.css knipt het wordmerk onder 1180px bij tot het beeldmerk; hier niet. */
.inlog-merk .brand-logo { height: 30px; width: auto; object-fit: initial; }
.inlog-tekst { display: flex; flex-direction: column; gap: 6px; }
.inlog-tekst h1 { font-size: 28px; }
.code-veld { letter-spacing: .3em; font-size: 16px; }

/* ---------------------------------------------------------------- kleine schermen
   app.css verbergt de zijbalk onder 760px; de app heeft dan andere wegen, het paneel
   niet. Hier blijft hij als smalle strook met iconen staan. */
@media (max-width: 760px) {
  .side { display: flex; width: 60px; padding: 16px 8px; gap: 20px; }
  .side .lbl, .nav-label, .account-meta { display: none; }
  .account { flex-direction: column; padding: 6px; background: transparent; border: 0; }
  .brand-logo { width: 28px; object-fit: cover; object-position: left center; }
  .nav { justify-content: center; padding: 0; }
  .top .chip { display: none; }
  .gegevens { grid-template-columns: 1fr; gap: 4px; }
  .gegevens dd { margin-bottom: 10px; }
}