/* NXT Commerce · premium en rustig (SPEC.md versie 0.3).
   Plus Jakarta Sans voor alles, mono voor codes. Koele lichte ondergrond, witte kaarten met een
   haarlijn en een héél zachte schaduw, navy voor knoppen en actief, turquoise voor accenten,
   grafieken en focus. Eerst de ontwerpvariabelen, daarna de onderdelen. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plusjakartasans-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ================================================================================================
   Ontwerpvariabelen
   ================================================================================================ */

:root {
  color-scheme: light;

  /* Vlakken */
  --bg: #F7F8FA;
  --surface: #ffffff;
  --panel: #F2F4F7;
  --panel-2: #F9FAFB;
  --hover: #F9FAFB;
  --line: #EAECF0;
  --line-soft: #F2F4F7;
  --line-2: #D0D5DD;

  /* Tekst */
  --heading: #101828;
  --ink-2: #344054;
  --text: #475467;
  --muted: #667085;
  --faint: #98A2B3;

  /* Merk: navy voor knoppen en actief, turquoise voor accenten, grafieken en focus */
  --brand-navy: #0B2454;
  --brand-teal: #00A99D;
  --accent: #0B2454;
  --accent-hover: #15326B;
  --accent-bright: #00A99D;
  --accent-soft: #E6F6F5;
  --accent-line: #A6E1DC;
  --navy-soft: #EEF2F8;

  /* Status: ingetogen, altijd op een zachte achtergrond */
  --ok: #067647;
  --ok-dot: #17B26A;
  --ok-soft: #ECFDF3;
  --ok-line: #ABEFC6;
  --warn: #B54708;
  --warn-dot: #F79009;
  --warn-soft: #FFFAEB;
  --warn-line: #FEDF89;
  --bad: #B42318;
  --bad-dot: #F04438;
  --bad-soft: #FEF3F2;
  --bad-line: #FECDCA;

  /* Zachte tinten voor icoonvlakken en labels */
  --p-blauw: #EEF2F8;  --i-blauw: #0B2454;
  --p-groen: #ECFDF3;  --i-groen: #067647;
  --p-paars: #F4F3FF;  --i-paars: #5925DC;
  --p-oranje: #FFF6ED; --i-oranje: #C4320A;
  --p-rood: #FEF3F2;   --i-rood: #B42318;
  --p-grijs: #F2F4F7;  --i-grijs: #475467;
  --p-teal: #E6F6F5;   --i-teal: #007A72;

  /* Diepte */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-card-hover: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 20px -6px rgba(16, 24, 40, 0.10);
  --shadow-float: 0 30px 60px -40px rgba(16, 24, 40, 0.30), 0 16px 32px -16px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(16, 24, 40, 0.05);
  --ring: 0 0 0 4px rgba(0, 169, 157, 0.18);
  --ring-bad: 0 0 0 4px rgba(240, 68, 56, 0.14);

  /* Vorm en beweging */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-btn: 8px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --t: 160ms var(--ease);
  --t-1: 150ms;   /* hover, kleur */
  --t-2: 220ms;   /* menu's, onderstreping */
  --t-3: 320ms;   /* binnenkomst */
  --field-h: 46px;
  --field-gap-x: 20px;
  --field-gap-y: 22px;
  --gutter: 16px;
  --sidebar: 248px;
  --topbar: 60px;

  /* Letters */
  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ================================================================================================
   Basis
   ================================================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 22px;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; color: var(--heading); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 28px; line-height: 34px; font-weight: 750; letter-spacing: -0.035em; }
h2 { font-size: 16px; line-height: 24px; }
h3 { font-size: 14.5px; line-height: 22px; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--accent-hover); }
strong, .strong { color: var(--heading); font-weight: 650; }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; }
.icon { width: 20px; height: 20px; flex: none; }
table { border-collapse: collapse; }
::selection { background: rgba(0, 169, 157, 0.18); color: var(--heading); }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: var(--radius-btn); border: 1px solid var(--line); box-shadow: var(--shadow-float); transition: top var(--t); }
.skip:focus { top: 12px; }

.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 20px; }
.cell-sub { display: block; color: var(--muted); font-size: 13px; line-height: 20px; font-weight: 450; margin-top: 1px; }
.text-fout { color: var(--bad) !important; }
.text-let-op { color: var(--warn) !important; }
.fineprint { font-size: 13px; color: var(--muted); margin-top: 14px; }
.inline-form { display: inline; margin: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Getallen in gegevens (tabellen, cijfers, tijden) tabular; lopende tekst houdt de gewone cijfers. */
.table td, .facts dd, .g-num, .qty, .qty-box, .event-time, .bell-time, .log-time, .chart-tip, .meter-top strong, .badge, .ks-aftel { font-variant-numeric: tabular-nums; }
/* Codes: ordernummers, EAN, track & trace, bevestigingscodes */
.mono { font-family: var(--mono); font-size: 0.9em; font-weight: 450; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cell-sub .mono, .mono-sub { color: var(--muted); }
/* Label in hoofdletters met een kort streepje ervoor (stijl van Navmigo) */
.label-caps { font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ================================================================================================
   Schil: zijbalk, kopbalk, dok
   ================================================================================================ */

.shell { min-height: 100vh; }
.sidebar { display: none; }
.shell-main { min-width: 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); flex: none; }
.brand:hover { color: var(--heading); }
.logo-mark { width: 26px; height: 26px; flex: none; }
/* Woordmerk zoals het logo: NXT vet, Commerce licht en breed met een turquoise o. */
.brand-name { font-size: 16.5px; white-space: nowrap; color: var(--brand-navy, #0B2454); line-height: 1; }
.wm-nxt { font-weight: 800; letter-spacing: -0.01em; }
.wm-commerce { font-weight: 450; letter-spacing: 0.045em; }
.wm-o { color: var(--brand-teal, #00A99D); }

.side-section { font-size: 11px; line-height: 16px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); padding: 22px 10px 6px; }
.side-nav ul { list-style: none; display: grid; gap: 1px; }
.side-nav a {
  position: relative; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: var(--radius-btn);
  color: var(--ink-2); font-weight: 550; transition: background var(--t), color var(--t);
}
.side-nav a .icon { width: 18px; height: 18px; color: var(--faint); transition: color var(--t); }
.side-nav a:hover { background: var(--hover); color: var(--heading); }
.side-nav a:hover .icon { color: var(--text); }
.side-nav a[aria-current='page'] { color: var(--accent); font-weight: 650; background: var(--navy-soft); }
.side-nav a[aria-current='page'] .icon { color: var(--accent); }
/* De dunne turquoise streep links bij de actieve link, tegen de rand van de zijbalk */
.side-nav a[aria-current='page']::before {
  content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-bright);
}

.side-shop {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); color: var(--heading);
  transition: border-color var(--t), box-shadow var(--t);
}
.side-shop:hover { border-color: var(--line-2); box-shadow: var(--shadow-card-hover); color: var(--heading); }
.side-shop-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-btn); background: var(--navy-soft); color: var(--accent); flex: none; }
.side-shop-icon .icon { width: 17px; height: 17px; }
.side-shop-text { display: grid; min-width: 0; line-height: 18px; }
.side-shop-text strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-shop-text span { font-size: 12px; color: var(--i-teal); font-weight: 600; }
.side-shop-arrow { margin-left: auto; width: 16px; height: 16px; color: var(--faint); }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  height: calc(var(--topbar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-search { display: none; position: relative; flex: 1; max-width: 440px; }
.top-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.top-search input { height: 38px; min-height: 38px; padding-left: 38px; padding-right: 56px; background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-xs); font-size: 13.5px; }
.top-search input:hover { border-color: var(--line-2); }
.kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--panel-2); color: var(--muted);
  font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; transition: opacity var(--t);
}
.top-search:focus-within .kbd { opacity: 0; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-btn);
  color: var(--muted); transition: background var(--t), color var(--t);
}
.icon-btn .icon { width: 19px; height: 19px; }
.icon-btn:hover, .icon-btn.is-active { color: var(--heading); background: var(--panel); }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary.icon-btn { color: var(--heading); background: var(--panel); }
.menu-account { margin-left: 8px; }
.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(11, 36, 84, 0.08); transition: box-shadow var(--t); flex: none;
}
.menu > summary.avatar:hover, .menu[open] > summary.avatar { box-shadow: inset 0 0 0 1px rgba(11, 36, 84, 0.08), 0 0 0 4px var(--panel); }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 280px; z-index: 50;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-float); padding: 6px;
  transform-origin: top right;
}
.menu-who { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-who > div { display: grid; min-width: 0; line-height: 20px; }
.menu-who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-who span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-group + .menu-group { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }
.menu-group form { margin: 0; }
.menu-label { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); padding: 8px 10px 4px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px;
  border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 550; cursor: pointer; text-align: left;
  transition: background var(--t), color var(--t);
}
.menu-item .icon { width: 17px; height: 17px; color: var(--faint); }
.menu-item:hover { background: var(--hover); color: var(--heading); }
.menu-item:hover .icon { color: var(--text); }
.menu-item.is-current { color: var(--heading); font-weight: 650; }
.menu-check { margin-left: auto; color: var(--accent-bright) !important; }

/* Meldingenbel */
.bell-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad-dot); box-shadow: 0 0 0 2px var(--surface); }
.bell-dot.is-let-op { background: var(--warn-dot); }
.bell-panel { width: 360px; padding: 0; overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.bell-head h2 { font-size: 14px; line-height: 20px; }
.bell-head a { font-size: 13px; font-weight: 600; }
.bell-list { list-style: none; max-height: 360px; overflow-y: auto; }
.bell-item { display: grid; grid-template-columns: 8px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.bell-item:first-child { border-top: 0; }
.bell-item .event-dot { margin-top: 7px; }
.bell-text { color: var(--ink-2); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.bell-time { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.bell-empty { display: grid; justify-items: center; text-align: center; padding: 22px 20px 24px; }
.bell-empty .illu { width: 112px; height: 84px; margin-bottom: 6px; }
.bell-empty strong { font-size: 14px; }
.bell-empty p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.bell-foot { display: block; padding: 11px 16px; border-top: 1px solid var(--line-soft); background: var(--panel-2); font-size: 13px; font-weight: 600; text-align: center; }

.dock {
  position: fixed; z-index: 45; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(calc(100% - 20px), 460px);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
}
.dock a {
  display: grid; justify-items: center; gap: 2px; padding: 7px 2px 6px; border-radius: 12px;
  color: var(--muted); font-size: 10.5px; line-height: 14px; font-weight: 600; transition: color var(--t), background var(--t);
}
.dock a .icon { width: 21px; height: 21px; }
.dock a[aria-current='page'] { color: var(--accent); background: var(--navy-soft); }

.main { padding: 20px var(--gutter) calc(112px + env(safe-area-inset-bottom)); max-width: 1440px; }
.main-narrow { max-width: 920px; }

/* ================================================================================================
   Bouwstenen
   ================================================================================================ */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; box-shadow: var(--shadow-card); }
.card-flush { padding: 0; overflow: hidden; }
.card-pad { padding: 18px 20px 0; }
.card-pad-x { padding: 0 20px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-height: 32px; }
.card-head > div > .muted { margin-top: 2px; }
.card-head.card-pad { margin-bottom: 14px; }
.card-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
a.card, .card-link { transition: border-color var(--t), box-shadow var(--t), transform var(--t-2) var(--ease); }
a.card:hover, .card-link:hover { border-color: var(--line-2); box-shadow: var(--shadow-card-hover); }

/* Paginakop: kruimel, titel, één zin uitleg, acties rechts */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 2px 0 24px; }
.page-head-text { min-width: 0; flex: 1 1 380px; }
.page-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs ol { list-style: none; display: flex; flex-wrap: nowrap; min-width: 0; align-items: center; gap: 2px 0; margin-bottom: 10px; font-size: 13px; line-height: 20px; color: var(--muted); font-weight: 500; }
.crumbs li { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
.crumbs li[aria-current='page'] { flex: 0 1 auto; min-width: 0; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--heading); }
.crumbs [aria-current='page'] { display: block; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs li[aria-current='page']::before { display: inline; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--accent-bright); flex: none; }
.lede { color: var(--muted); margin-top: 6px; max-width: 72ch; font-size: 14.5px; line-height: 23px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.back .icon { width: 16px; height: 16px; }
.back:hover { color: var(--heading); }
.link-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; font-size: 13.5px; }
.link-more .icon { width: 16px; height: 16px; transition: transform var(--t); }
.link-more:hover .icon { transform: translateX(2px); }
.link-plain { color: var(--heading); }
.link-plain:hover { color: var(--accent); }

/* Knoppen: strak (radius 8), navy met een lichtrand bovenin, focusring in turquoise */
.btn {
  --h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 16px; border-radius: var(--radius-btn);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; background: none; color: var(--heading);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t-1) var(--ease);
}
.btn .icon { width: 17px; height: 17px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(16, 24, 40, 0.10);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--ring); }
.btn-quiet { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); box-shadow: var(--shadow-xs); }
.btn-quiet:hover { border-color: #B9C0CC; color: var(--heading); background: var(--panel-2); }
.btn-quiet .icon { color: var(--muted); }
.btn-quiet:hover .icon { color: var(--ink-2); }
.btn-quiet:focus-visible { box-shadow: var(--shadow-xs), var(--ring); }
/* Glazen knop (zoals op baaslabz.nl): doorschijnend wit met een lichte rand, voor op een tint of beeld. */
.btn-glas {
  background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.7); color: var(--heading);
  -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 20px -12px rgba(16, 24, 40, 0.25);
}
.btn-glas:hover { background: rgba(255, 255, 255, 0.78); color: var(--heading); }
.btn-text { padding: 0; min-height: 0; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.btn-text:hover { color: var(--bad); }
.btn-sm { --h: 32px; padding: 0 12px; font-size: 13px; }
.btn-sm .icon { width: 15px; height: 15px; }
.btn-lg { --h: 44px; font-size: 15px; padding: 0 20px; }
.btn-block { width: 100%; }
.btn[aria-busy='true'] { pointer-events: none; opacity: 0.75; }
.btn[aria-busy='true'] .icon { display: none; }
.btn .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pillen: klein, zachte achtergrond met bolletje */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 24px; padding: 0 9px 0 8px; border-radius: 999px;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0;
  color: var(--ink-2); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.badge-goed { color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px var(--ok-line); }
.badge-goed .dot { background: var(--ok-dot); }
.badge-let-op { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.badge-let-op .dot { background: var(--warn-dot); }
.badge-fout { color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px var(--bad-line); }
.badge-fout .dot { background: var(--bad-dot); }
.badge-accent { color: var(--i-teal); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.badge-accent .dot { background: var(--accent-bright); }

/* Trend en delta: kleine pil, groen omhoog en rood omlaag */
.trend, .delta {
  display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 999px;
  font-weight: 650; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta svg { width: 10px; height: 10px; }
.trend-up, .delta-up { color: var(--ok); background: var(--ok-soft); }
.trend-down, .delta-down { color: var(--bad); background: var(--bad-soft); }
.trend-flat, .delta-flat { color: var(--muted); background: var(--panel); font-weight: 600; }

/* Icoonvlakken: afgeronde vierkantjes in een zachte tint */
.icon-round { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.04); }
.icon-round .icon { width: 18px; height: 18px; }
.icon-round-lg { width: 48px; height: 48px; border-radius: 12px; }
.icon-round-lg .icon { width: 22px; height: 22px; }
.icon-blauw { background: var(--p-blauw); color: var(--i-blauw); }
.icon-groen { background: var(--p-groen); color: var(--i-groen); }
.icon-paars { background: var(--p-paars); color: var(--i-paars); }
.icon-oranje { background: var(--p-oranje); color: var(--i-oranje); }
.icon-rood { background: var(--p-rood); color: var(--i-rood); }
.icon-grijs { background: var(--p-grijs); color: var(--i-grijs); }
.icon-teal { background: var(--p-teal); color: var(--i-teal); }

/* Meldingen */
.flash {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-card);
}
.flash > .icon { margin-top: 1px; width: 19px; height: 19px; }
.flash p { flex: 1; }
.flash-goed { border-color: var(--ok-line); background: var(--ok-soft); color: #05603A; }
.flash-goed > .icon { color: var(--ok-dot); }
.flash-fout { border-color: var(--bad-line); background: var(--bad-soft); color: #912018; }
.flash-fout > .icon { color: var(--bad-dot); }
.flash-info > .icon { color: var(--accent-bright); }
.flash-close { border: 0; background: none; padding: 2px; margin: -2px -4px -2px 0; color: inherit; opacity: 0.6; cursor: pointer; border-radius: 6px; }
.flash-close:hover { opacity: 1; }
.flash-close .icon { width: 17px; height: 17px; }

.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; padding: 14px 16px 14px 14px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.notice-text { flex: 1 1 320px; min-width: 0; }
.notice-title { color: var(--heading); font-weight: 650; }
.notice-text p + p { margin-top: 1px; color: var(--muted); }
/* De oefenbanner: rustig, met een turquoise tint */
.notice-oefen { background: linear-gradient(90deg, var(--accent-soft), var(--surface) 70%); border-color: var(--accent-line); }

.hint { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 20px; margin: 0 0 16px; max-width: 92ch; }
.hint .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--faint); }
.hint strong { font-weight: 600; color: var(--ink-2); }
.inline-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad); margin-bottom: 16px; font-weight: 550; }
.inline-alert .icon { width: 18px; height: 18px; margin-top: 2px; }

/* Lege toestand met een kleine lijnillustratie */
.empty { display: grid; justify-items: center; text-align: center; padding: 48px 20px 52px; }
.empty .illu { width: 152px; height: 114px; margin-bottom: 14px; }
.empty .icon-round { margin-bottom: 14px; }
.empty-title { font-size: 16px; line-height: 24px; }
.empty-text { color: var(--muted); max-width: 46ch; margin-top: 4px; }
.empty-action { margin-top: 20px; }

/* Tabbladen: gesegmenteerd, het gekozen blad wit */
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); max-width: 100%; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.03); }
.tabs a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 7px; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background var(--t), color var(--t), box-shadow var(--t); }
.tabs a:hover { color: var(--heading); }
.tabs a[aria-current='page'] { background: var(--surface); color: var(--heading); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.04); }
.tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

.search { position: relative; flex: 1 1 240px; max-width: 340px; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--faint); pointer-events: none; }
.search input { padding-left: 38px; height: 36px; min-height: 36px; font-size: 13.5px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pager .muted { font-size: 13px; }

/* ================================================================================================
   Tabellen: rijhoogte 52, kopregel 11px hoofdletters, getallen rechts en tabular, codes in mono
   ================================================================================================ */

.table-wrap { overflow-x: auto; }
.table { width: 100%; }
.table th {
  text-align: left; font-size: 11px; line-height: 16px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); padding: 11px 20px; white-space: nowrap; background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.table td { height: 52px; padding: 12px 20px; border-top: 1px solid var(--line-soft); vertical-align: middle; color: var(--text); }
.table tbody tr:first-child td { border-top: 0; }
.table tfoot th, .table tfoot td { background: none; border-top: 1px solid var(--line); border-bottom: 0; text-transform: none; letter-spacing: -0.01em; font-size: 14px; color: var(--heading); font-weight: 700; padding: 14px 20px; }
.table .num { text-align: right; }
.table td.num, .table td.strong { color: var(--heading); }
.table-compact th { padding: 9px 12px; background: none; }
.table-compact td { height: 48px; padding: 10px 12px; }
.table-compact th:first-child, .table-compact td:first-child { padding-left: 0; }
.table-compact th:last-child, .table-compact td:last-child { padding-right: 0; }
.row-click { position: relative; transition: background var(--t); }
.row-click:hover { background: var(--hover); }
.row-link { color: var(--heading); }
.row-link::after { content: ''; position: absolute; inset: 0; }
.row-link:hover { color: var(--accent); }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--accent-bright); outline-offset: -2px; border-radius: 8px; }
.row-link.mono { font-weight: 500; color: var(--ink-2); }
.row-link.mono:hover { color: var(--accent); }

.ship-items { list-style: none; display: grid; gap: 2px; color: var(--ink-2); }
.qty { font-weight: 650; color: var(--i-teal); margin-right: 6px; font-variant-numeric: tabular-nums; }
.picklist { list-style: none; margin-top: 12px; }
.picklist li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.picklist li:first-child { border-top: 0; }
.qty-box { display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: var(--radius-btn); background: var(--navy-soft); color: var(--accent); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.pick-title { display: grid; min-width: 0; }

/* ================================================================================================
   Vandaag
   ================================================================================================ */

.status-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 2px 0 24px; }
.status-title { display: flex; align-items: center; gap: 14px; font-size: clamp(26px, 3.2vw, 32px); line-height: 1.15; letter-spacing: -0.035em; font-weight: 800; }
.status-title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-title.is-calm::before { background: var(--ok-dot); box-shadow: 0 0 0 5px var(--ok-soft), 0 0 0 6px var(--ok-line); }
.status-title.is-attention::before { background: var(--warn-dot); box-shadow: 0 0 0 5px var(--warn-soft), 0 0 0 6px var(--warn-line); }
@media (prefers-reduced-motion: no-preference) {
  .status-title.is-attention::before { animation: puls 2.4s var(--ease) infinite; }
}
@keyframes puls { 50% { box-shadow: 0 0 0 7px var(--warn-soft), 0 0 0 8px rgba(254, 223, 137, 0.6); } }
.status-meta { margin-top: 10px; color: var(--muted); }
.status-meta a { font-weight: 600; }

.card-tasks { margin-bottom: 16px; }
.tasks { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.task { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.task:first-child { border-top: 0; padding-top: 0; }
.task:last-child { padding-bottom: 0; }
.task-body h3 { margin-top: 0; }
.task-body p { margin-top: 2px; max-width: 72ch; color: var(--muted); }
.task-btn { grid-column: 1 / -1; justify-self: stretch; margin-top: 8px; }

.calm { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.calm h2 { font-size: 16px; }
.calm p { margin-top: 2px; }

.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-main, .dash-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

.period-form { display: flex; gap: 8px; align-items: center; }
.select-soft { height: 34px; min-height: 34px; width: auto; padding-top: 0; padding-bottom: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.js .period-form [data-autosubmit-knop] { display: none; }

/* Kerncijfers: drie vakken met een minigrafiek en een delta-pil */
.kpis { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); gap: 1px; }
.kpi {
  position: relative; display: grid; gap: 6px; padding: 16px 18px; color: var(--text); background: var(--panel-2);
  transition: background var(--t);
}
a.kpi:hover { background: var(--surface); color: var(--text); }
.kpi.is-selected { background: var(--surface); }
.kpi.is-selected::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent-bright); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kpi.is-selected .kpi-label { color: var(--ink-2); }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; }
.kpi-value { margin: 0; color: var(--heading); font-size: 30px; line-height: 36px; font-weight: 750; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.kpi-delta strong { font-weight: 650; }
.kpi-delta strong.up { color: var(--ok); }
.kpi-delta strong.down { color: var(--bad); }
.spark { width: 100%; height: 40px; margin-top: 10px; overflow: visible; }
.kpi:not(.is-selected) .spark { opacity: 0.7; }

/* Kerncijfers zonder keuze (Verzenden, Voorraad, Klantvragen, Inkoop, Beheer) */
.kpis-static { grid-template-columns: repeat(2, minmax(0, 1fr)); background: none; border: 0; border-radius: 0; overflow: visible; gap: 12px; margin-bottom: 16px; }
.kpis-static .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow-card); gap: 4px; }
.kpis-static .kpi-top { margin-bottom: 6px; }
.kpis-static .kpi-value { font-size: 28px; line-height: 34px; }
.kpis-static .icon-round { width: 30px; height: 30px; border-radius: 8px; }
.kpis-static .icon-round .icon { width: 16px; height: 16px; }
.kpis-static .kpi-delta { font-size: 13px; }
@media (max-width: 639px) {
  .kpis-static { gap: 10px; }
  .kpis-static .kpi { padding: 14px; }
  .kpis-static .kpi-value { font-size: 22px; line-height: 28px; }
  .kpis-static .kpi-label { letter-spacing: 0.08em; }
  .kpis-static .icon-round { display: none; }
  .kpis-static .kpi-delta { font-size: 12px; line-height: 17px; }
}

.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 6px; font-size: 13px; color: var(--muted); }
.chart-head strong { color: var(--heading); font-weight: 650; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend::before { content: ''; width: 10px; height: 3px; border-radius: 2px; background: var(--accent-bright); }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; overflow: visible; }
.chart-wide { display: none; }
.chart text { font-family: var(--font); fill: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart-y, .chart-x { font-size: 11.5px; }
.chart-narrow .chart-y, .chart-narrow .chart-x { font-size: 11px; }
.chart-hit { cursor: crosshair; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 14px));
  display: grid; gap: 1px; min-width: 132px; padding: 9px 12px 10px; border-radius: 10px;
  background: var(--surface); box-shadow: var(--shadow-float); white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.chart-tip-kop { font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.chart-tip-waarde { display: flex; align-items: center; gap: 7px; color: var(--heading); font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; }
.chart-tip-waarde::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-soft); }
.chart-tip-sub { font-size: 12px; line-height: 18px; color: var(--muted); }
.chart-empty { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: var(--radius-btn); background: var(--surface); box-shadow: var(--shadow-float); color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; }

.ring-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.big-number { color: var(--heading); font-size: 30px; line-height: 36px; font-weight: 750; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.big-number span { font-size: 14px; color: var(--muted); font-weight: 550; letter-spacing: 0; }
.ring { width: 96px; height: 96px; flex: none; }
.ring-text { font-family: var(--font); font-size: 21px; font-weight: 750; fill: var(--heading); letter-spacing: -0.02em; }
.meter { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line-soft); }
.meter-top { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent-bright); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent-bright); border-radius: 999px; }

.top-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.top-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.top-list li:first-child { border-top: 0; padding-top: 0; }
.top-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-btn); background: var(--panel); color: var(--muted); font-weight: 700; font-size: 12.5px; flex: none; font-family: var(--mono); }
.top-list li:first-child .top-rank { background: var(--accent-soft); color: var(--i-teal); }
.top-main { flex: 1; min-width: 0; }
.top-main .muted { font-size: 13px; line-height: 20px; }
.top-title { color: var(--heading); font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 20px; }

.events { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.event { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 12px; padding: 0 0 14px; }
.event:last-child { padding-bottom: 0; }
.event:not(:last-child)::before { content: ''; position: absolute; left: 5.5px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin: 7px 0 0 2px; box-shadow: 0 0 0 3px var(--surface); }
.event-goed .event-dot { background: var(--ok-dot); }
.event-let-op .event-dot { background: var(--warn-dot); }
.event-fout .event-dot { background: var(--bad-dot); }
.event-text { color: var(--ink-2); font-size: 13.5px; line-height: 20px; }
.event-time { font-size: 12px; line-height: 18px; color: var(--faint); }

/* ================================================================================================
   Bestelling
   ================================================================================================ */

.address { line-height: 24px; color: var(--ink-2); }
.address-mail { margin-top: 10px; overflow-wrap: anywhere; }
.facts { margin: 0; display: grid; }
.facts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); min-height: 44px; }
.facts > div:first-child { border-top: 0; padding-top: 0; min-height: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--heading); font-weight: 600; text-align: right; }

.option { display: flex; gap: 14px; align-items: center; }
.option-main { flex-wrap: wrap; padding: 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.option-body { flex: 1 1 260px; min-width: 0; }
.option-body p { margin-top: 2px; }

.disclosure { margin-top: 12px; }
.disclosure > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 10px 14px 10px 10px;
  border-radius: 12px; border: 1px solid var(--line); color: var(--heading); font-weight: 600; transition: background var(--t), border-color var(--t);
}
.disclosure > summary:hover { background: var(--hover); border-color: var(--line-2); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary > .icon { margin-left: auto; width: 17px; height: 17px; color: var(--muted); transition: transform var(--t); }
.disclosure > summary .icon-round { width: 32px; height: 32px; border-radius: 8px; }
.disclosure > summary .icon-round .icon { width: 16px; height: 16px; }
details[open] > summary > .icon:last-child { transform: rotate(180deg); }
.disclosure > form { margin-top: 16px; }

.list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.list-row:first-child { border-top: 0; padding-top: 0; }
.list-main { flex: 1 1 220px; min-width: 0; }
.list-end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ================================================================================================
   Voorraad: tabel als raster, zodat de bewerkregel eronder past
   ================================================================================================ */

.grid-head, .grid-head.stock-row { display: none; }
.grid-list { list-style: none; }
.grid-row { padding: 16px 20px; border-top: 1px solid var(--line-soft); transition: background var(--t); }
.grid-list .grid-row:first-child { border-top: 0; }
.grid-row:hover { background: var(--hover); }
.stock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; align-items: center; }
.g-product { grid-column: 1 / 3; min-width: 0; }
.g-status { justify-self: end; }
.g-num { display: grid; }
.g-num::before { content: attr(data-label); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.g-num span { color: var(--heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-advice { grid-column: 1 / -1; }
.g-edit { grid-column: 1 / -1; }
.g-edit > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--accent); }
.g-edit > summary::-webkit-details-marker { display: none; }
.g-edit > summary .muted { font-weight: 450; }
.g-edit > summary .icon { width: 15px; height: 15px; transition: transform var(--t); }
.g-edit > summary:hover { color: var(--accent-hover); }
.inset { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); }

/* ================================================================================================
   Logboek
   ================================================================================================ */

.log-day + .log-day { border-top: 1px solid var(--line); }
.log-day-title { position: sticky; top: var(--topbar); z-index: 2; display: flex; align-items: center; gap: 10px; font-size: 11px; line-height: 16px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 12px 20px; background: rgba(249, 250, 251, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.log-day-title::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--accent-bright); }
.log { list-style: none; }
.log-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 60px; padding: 10px 20px; border-top: 1px solid var(--line-soft); transition: background var(--t); }
.log-row:first-child { border-top: 0; }
.log-row:hover { background: var(--hover); }
.log-row .icon-round { width: 32px; height: 32px; border-radius: 8px; }
.log-row .icon-round .icon { width: 16px; height: 16px; }
.log-main { min-width: 0; overflow-wrap: anywhere; }
.log-text { color: var(--ink-2); }
.log-rood .log-text { color: var(--bad); font-weight: 550; }
.log-time { font-size: 12.5px; color: var(--faint); font-family: var(--mono); }

/* ================================================================================================
   Formulieren
   ================================================================================================ */

/* Ruim en overal hetzelfde (v0.4). Velden 46px hoog (48 op de telefoon, met 16px tekst zodat iOS
   niet inzoomt), label met lucht eronder, hulptekst en foutmelding direct onder het veld.

   Bouwstenen voor elk formulier (ook in modules):
     .form-section            blok met kop + uitleg links en de velden rechts (wordt smal: onder elkaar)
       .form-section-head     h2/h3 + p.form-section-text
       .form-section-body     de velden
     .form-grid               raster: twee kolommen als er ruimte is, anders één (kijkt naar de eigen breedte)
       .form-grid-3/-4        drie of vier smalle kolommen (getallen)
     .field                   label + invoer + .help + .field-error
       .field-wide            over de volle breedte (tekstvakken krijgen dat vanzelf)
       .field-short           smal veld voor een getal of bedrag (max. 220px)
       .has-error             rode rand; of zet aria-invalid="true" op het veld
     .label-row               label met iets rechts ervan (.label-link), .optional achter een label
     .check                   vinkje met tekst
     .form-actions            actiebalk onderaan (op groot scherm blijft hij in beeld bij lange formulieren)
       .form-actions-note     korte tekst links in de actiebalk
*/

label { font-weight: 600; color: var(--ink-2); font-size: 13.5px; line-height: 20px; letter-spacing: -0.005em; }
input, select, textarea {
  width: 100%; min-height: var(--field-h); padding: 0 14px;
  font: inherit; font-size: 14.5px; line-height: 22px; font-weight: 450; color: var(--heading);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-btn);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none; appearance: none;
}
textarea { display: block; min-height: 112px; padding: 11px 14px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #B9C0CC; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-bright); box-shadow: var(--shadow-xs), var(--ring); }
select {
  padding-right: 42px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
input[type='radio'], input[type='checkbox'] { width: auto; min-height: 0; padding: 0; -webkit-appearance: auto; appearance: auto; box-shadow: none; accent-color: var(--accent); }
input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type='number'] { font-variant-numeric: tabular-nums; }
input[readonly], textarea[readonly] { background: var(--panel-2); border-color: var(--line); }
input:disabled, select:disabled, textarea:disabled { background: var(--panel); color: var(--muted); cursor: not-allowed; box-shadow: none; }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'],
.has-error input:not([type='checkbox']):not([type='radio']), .has-error select, .has-error textarea { border-color: var(--bad-dot); }
input[aria-invalid='true']:focus, select[aria-invalid='true']:focus, textarea[aria-invalid='true']:focus,
.has-error input:focus, .has-error select:focus, .has-error textarea:focus { box-shadow: var(--shadow-xs), var(--ring-bad); }

/* Raster: hooguit twee kolommen, en alleen als elk veld minstens 17,5rem breed kan zijn. Het kijkt
   naar de breedte van het formulier zelf, dus een formulier in een smalle kaart wordt vanzelf één kolom. */
.form-grid {
  --veld-min: 17.5rem;
  display: grid; gap: var(--field-gap-y) var(--field-gap-x); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--veld-min), calc((100% - var(--field-gap-x)) / 2))), 1fr));
}
.form-grid-3 { --veld-min: 12rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--veld-min), calc((100% - 2 * var(--field-gap-x)) / 3))), 1fr)); }
.form-grid-4 { --veld-min: 11rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--veld-min), calc((100% - 3 * var(--field-gap-x)) / 4))), 1fr)); }
.form-grid-1 { grid-template-columns: minmax(0, 1fr); }
.form-grid > .field-wide, .form-grid > .field:has(> textarea), .form-grid > .field-actions, .form-grid > .form-actions,
.form-grid > fieldset, .form-grid > .switch-row, .form-grid > .hint, .form-grid > .inline-alert { grid-column: 1 / -1; }
.form-grid > .field-short { grid-column: auto; }

.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field > .help, .field > .field-error { margin-top: -1px; }
.field-short { max-width: 220px; }
.field-row { display: flex; gap: 10px; align-items: center; }
.field-row input { flex: 1; min-width: 0; }
.field-row .btn { min-height: var(--field-h); }
.field-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.help { font-size: 13px; line-height: 19px; color: var(--muted); max-width: 68ch; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.label-link { font-size: 13px; font-weight: 600; }
.optional, .label-hint { color: var(--muted); font-weight: 500; }
.field-error { display: flex; gap: 6px; align-items: flex-start; color: var(--bad); font-size: 13px; line-height: 19px; font-weight: 600; }
.field-error .icon { width: 16px; height: 16px; margin-top: 1.5px; flex: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink-2); cursor: pointer; line-height: 21px; }
.check input { width: 18px; height: 18px; margin: 1.5px 0 0; flex: none; accent-color: var(--accent); }
.check-text { display: grid; gap: 2px; }
.check-help { color: var(--muted); font-size: 13px; line-height: 19px; font-weight: 450; }
.btn-link-plain { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; color: var(--accent); }
.btn-link-plain.label-link { font-size: 13px; font-weight: 600; }
.btn-link-plain:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-weight: 500; }
.input-prefix input { padding-left: 32px; font-variant-numeric: tabular-nums; }

/* Secties: kop en uitleg links, velden rechts (zoals instellingen bij Stripe en Linear). Past het
   niet naast elkaar, dan komt de kop vanzelf boven de velden. */
.form-section { display: flex; flex-wrap: wrap; gap: 14px 48px; padding: 28px 0; border-top: 1px solid var(--line-soft); }
.form-section:first-child, .form-section.is-first { padding-top: 0; border-top: 0; }
.form-section:last-child { padding-bottom: 0; }
.form-section-head { flex: 1 1 220px; max-width: 520px; min-width: 0; }
.form-section-head h2, .form-section-head h3 { font-size: 15px; line-height: 22px; font-weight: 650; }
.form-section-text, .form-section-head > p { margin-top: 4px; color: var(--muted); font-size: 13.5px; line-height: 21px; max-width: 46ch; }
.form-section-body { flex: 999 1 420px; min-width: 0; display: grid; gap: var(--field-gap-y); align-content: start; }

/* Actiebalk onderaan. Op groot scherm blijft hij onderin beeld staan zolang het formulier loopt. */
.form-actions, .form-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.form-actions-note { margin-right: auto; color: var(--muted); font-size: 13px; line-height: 19px; }
@media (min-width: 1024px) {
  .form-actions, .form-foot {
    position: sticky; bottom: 0; z-index: 4; background: var(--surface);
    padding-bottom: 20px; margin-bottom: -20px;
  }
  .inset .form-actions, .inset .form-foot, .disclosure .form-foot { background: inherit; }
}

/* ================================================================================================
   Instellingen
   ================================================================================================ */

.settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-nav { display: flex; gap: 2px; padding: 6px; overflow-x: auto; scrollbar-width: none; }
.settings-nav::-webkit-scrollbar { display: none; }
.settings-nav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-btn); color: var(--ink-2); font-weight: 550; white-space: nowrap; transition: background var(--t), color var(--t); }
.settings-nav a .icon { width: 17px; height: 17px; color: var(--faint); }
.settings-nav a:hover { background: var(--hover); color: var(--heading); }
.settings-nav a:hover .icon { color: var(--text); }
.settings-card .card-head { align-items: flex-start; margin-bottom: 24px; }
.settings-card .card-head h2 { font-size: 16px; }
.settings-card .card-head .muted { max-width: 60ch; }
.settings-card { padding: 24px; }
.settings-card > .card-head + .form-section { padding-top: 0; border-top: 0; }

.steps { list-style: none; display: grid; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 16px; position: relative; padding-bottom: 28px; }
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before { content: ''; position: absolute; left: 15.5px; top: 40px; bottom: 6px; width: 1px; background: var(--line); }
.step-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--accent); font-weight: 700; font-size: 13px; font-family: var(--mono); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-xs); }
.step-body { min-width: 0; padding-top: 4px; }
.step-body > h3 { margin-bottom: 2px; }
.step-body > .muted { max-width: 64ch; }
.step-body .form-grid, .step-body .choice-group { margin-top: 14px; }
.step-body > .btn { margin-top: 16px; }
.step-body > .help { margin-top: 8px; }
.mini-steps { margin: 12px 0 0 18px; display: grid; gap: 6px; color: var(--ink-2); }
.mini-steps li::marker { color: var(--faint); font-weight: 600; }

.choice-group { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--t), background var(--t), box-shadow var(--t); font-weight: 450; }
.choice:hover { border-color: var(--line-2); }
.choice:has(input:checked) { border-color: var(--accent-bright); background: linear-gradient(var(--accent-soft), var(--surface)); box-shadow: 0 0 0 3px rgba(0, 169, 157, 0.10); }
.choice input { accent-color: var(--accent); margin: 3px 0 0; width: 16px; height: 16px; flex: none; }
.choice-body { display: grid; gap: 1px; }
.choice-body strong { font-size: 14px; }
.choice-body span { color: var(--muted); font-size: 13px; line-height: 20px; }

.connected { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--ok-soft); border: 1px solid var(--ok-line); }
.connected > div { flex: 1; min-width: 0; }
.connected-title { color: var(--heading); font-weight: 700; font-size: 15px; }
.unlink { margin-top: 18px; }

.switch-row { display: grid; gap: 18px; padding: 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.switch { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; cursor: pointer; font-weight: 450; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 40px; height: 22px; border-radius: 999px; margin-top: 1px; background: var(--line-2); transition: background var(--t); box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.08); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18), 0 1px 2px rgba(16, 24, 40, 0.08); transition: transform var(--t); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch-text { display: grid; gap: 2px; }
.switch-text strong { font-size: 14.5px; }
.switch-text span { color: var(--muted); max-width: 62ch; }
.field-price { max-width: 220px; }
.settings-form > .form-grid, .settings-form > .field { margin-top: 24px; }
.settings-form > .switch-row + .form-grid { margin-top: 24px; }
.is-off-dim { opacity: 0.5; }

/* ================================================================================================
   Welkom en fout
   ================================================================================================ */

.bare { background: var(--bg); }
.bare-main { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 24px; padding: 40px var(--gutter) 56px; }
.bare-main > .flash { width: min(100%, 960px); margin: 0; }
.welcome { width: min(100%, 960px); padding: 0; display: grid; overflow: hidden; }
.welcome-text { padding: 32px 24px 28px; }
.welcome h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.045em; font-weight: 800; }
.welcome .lede { margin-top: 12px; }
.welcome-points { list-style: none; display: grid; gap: 12px; margin: 24px 0; }
.welcome-points li { display: flex; gap: 12px; align-items: center; color: var(--text); }
.welcome .fineprint { text-align: center; }
.welcome-side { display: none; background: var(--panel-2); padding: 32px; border-left: 1px solid var(--line); }
.preview { display: grid; gap: 12px; align-content: center; height: 100%; }
.preview-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-card); }
.preview-card .icon-round { margin-bottom: 10px; }
.preview-status { display: flex; align-items: center; gap: 12px; }
.preview-status .icon-round { margin: 0; }
.preview-title { color: var(--heading); font-weight: 700; }
.preview-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.preview-num { color: var(--heading); font-size: 22px; font-weight: 750; letter-spacing: -0.03em; margin-top: 2px; }
.preview-up { color: var(--ok); font-weight: 650; font-size: 13px; }
.preview-chart { width: 100%; height: auto; }
.dev-login { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); display: grid; gap: 8px; }
.dev-login label { font-size: 13px; color: var(--muted); }

.error-card { width: min(100%, 480px); padding: 40px 28px 30px; text-align: center; display: grid; justify-items: center; }
.main .error-card { margin: 40px auto 0; }
.error-card .icon-round { margin-bottom: 16px; }
.error-card .lede { margin: 8px auto 0; }
.error-actions { margin-top: 22px; }

/* ================================================================================================
   Breder
   ================================================================================================ */

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .top-search { display: block; }
  .top-search-link { display: none; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .task { grid-template-columns: auto 1fr auto; align-items: center; }
  .task-btn { grid-column: auto; margin-top: 0; justify-self: end; }
  .switch-row { grid-template-columns: 1fr auto; }
  .field-price { width: 200px; }
  .stock-row { grid-template-columns: repeat(4, 1fr); }
  .g-product { grid-column: 1 / 4; }
  .kpi { padding: 18px 20px 16px; }
}

@media (max-width: 639px) {
  :root { --field-h: 48px; --field-gap-y: 20px; }
  input:not([type='checkbox']):not([type='radio']), select, textarea { font-size: 16px; }
  .form-actions, .form-foot { justify-content: stretch; }
  .form-actions > .btn, .form-foot > .btn, .form-actions > form, .form-foot > form { flex: 1 1 auto; }
  .settings-card { padding: 20px 16px; }
  /* Kerncijfers onder elkaar: links het getal, rechts de minigrafiek */
  .kpi-value { font-size: 26px; line-height: 32px; }
  .status-title { font-size: 26px; }
  h1 { font-size: 26px; line-height: 32px; }
  .page-head { margin-bottom: 20px; }
  .page-head-actions { width: 100%; }
  .card { padding: 16px; }
  .card-flush { padding: 0; }
  .card-pad { padding: 16px 16px 0; }
  .card-pad-x { padding: 0 16px 16px; }
  .kpi { grid-template-columns: minmax(0, 1fr) 38%; column-gap: 16px; align-items: center; padding: 14px 16px; }
  .kpi > :not(.spark) { grid-column: 1; }
  .kpi .spark { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; height: 44px; }
  .notice-oefen .icon-round { display: none; }
  .table-recent thead { display: none; }
  .table-recent tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'klant bedrag' 'order status'; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
  .table-recent tbody tr:first-child { border-top: 0; padding-top: 0; }
  .table-recent td { height: auto; padding: 0 !important; border: 0; }
  .table-recent .c-klant { grid-area: klant; }
  .table-recent .c-bedrag { grid-area: bedrag; }
  .table-recent .c-order { grid-area: order; font-size: 13px; }
  .table-recent .c-status { grid-area: status; justify-self: end; }
  .table-recent .c-datum { display: none; }
  .bell-panel { position: fixed; left: 10px; right: 10px; top: calc(var(--topbar) + env(safe-area-inset-top) + 6px); width: auto; }
  .menu-account .menu-panel { position: fixed; left: auto; right: 10px; top: calc(var(--topbar) + env(safe-area-inset-top) + 6px); }
}

@media (min-width: 900px) {
  .chart-wide { display: block; }
  .chart-narrow { display: none; }
  .kpis-static { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .welcome { grid-template-columns: 1.1fr 1fr; }
  .welcome-text { padding: 44px 44px 36px; }
  .welcome-side { display: block; }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 344px; }
  .settings { grid-template-columns: 220px minmax(0, 1fr); }
  .settings-nav { position: sticky; top: 84px; flex-direction: column; overflow: visible; padding: 0; }
}

/* Instellingen en account op een breed scherm: per kaart de kop met uitleg links, de inhoud rechts.
   Geldt vanzelf voor elke .settings-card met een .card-head (ook die van modules). */
@media (min-width: 1280px) {
  .settings-card { display: flow-root; padding: 28px; }
  .settings-card > .card-head { float: left; width: 236px; margin: 0; min-height: 0; }
  .settings-card > .card-head h2 { font-size: 15px; line-height: 22px; }
  .settings-card > .card-head .muted { font-size: 13.5px; line-height: 21px; margin-top: 4px; }
  .settings-card > :not(.card-head) { margin-left: 284px; }
  .settings-card > .card-head + * { margin-top: 0; }
}

@media (min-width: 1024px) {
  :root { --gutter: 40px; }
  .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    padding: 0 14px 14px; background: var(--surface); border-right: 1px solid var(--line);
  }
  .sidebar .brand { height: var(--topbar); padding: 0 10px; margin-bottom: 2px; }
  .side-nav { margin-bottom: 16px; }
  .brand-top { display: none; }
  .dock { display: none; }
  .main { padding: 32px var(--gutter) 56px; }

  /* Tabellen in volle breedte: rijen als echte tabel */
  .table-orders td.c-items { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 1200px) {
  .dash { grid-template-columns: minmax(0, 1fr) 360px; }
  .grid-head, .grid-head.stock-row {
    display: grid; padding: 11px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2);
    font-size: 11px; line-height: 16px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  }
  .stock-row { grid-template-columns: minmax(0, 2.2fr) 150px 100px 90px 130px minmax(140px, 1fr); }
  .grid-head.stock-row { gap: 16px; }
  .g-product { grid-column: auto; }
  .g-status { justify-self: start; }
  .g-num { text-align: right; }
  .g-num::before { display: none; }
  .g-advice { grid-column: auto; display: grid; }
  .g-edit { grid-column: 1 / -1; margin-top: -4px; }
  .g-advice, .grid-head.stock-row > :last-child { padding-left: 20px; }
}

/* Telefoon en tablet: tabellen worden kaarten */
@media (max-width: 899px) {
  .table-orders thead, .table-ship thead, .table-sent thead { display: none; }
  .table-orders tr, .table-ship tr, .table-sent tr { display: grid; gap: 4px 12px; padding: 14px 16px; border-top: 1px solid var(--line-soft); }
  .table-orders tbody tr:first-child, .table-ship tbody tr:first-child, .table-sent tbody tr:first-child { border-top: 0; }
  .table-orders td, .table-ship td, .table-sent td { height: auto; padding: 0; border: 0; }
  .table-orders tr { grid-template-columns: 1fr auto; grid-template-areas: 'klant bedrag' 'items items' 'status datum' 'order order'; }
  .table-orders .c-klant { grid-area: klant; }
  .table-orders .c-bedrag { grid-area: bedrag; }
  .table-orders .c-items { grid-area: items; color: var(--ink-2); }
  .table-orders .c-status { grid-area: status; }
  .table-orders .c-datum { grid-area: datum; text-align: right; font-size: 13px; }
  .table-orders .c-datum .cell-sub { display: none; }
  .table-orders .c-order { grid-area: order; font-size: 12.5px; }
  .table-orders .c-order .row-link { color: var(--muted); font-weight: 500; }
  .table-orders .c-klant .cell-sub { display: inline; margin-left: 6px; }
  .table-ship tr, .table-sent tr { grid-template-columns: 1fr auto; grid-template-areas: 'klant status' 'items items' 'actie actie'; }
  .table-ship .c-klant, .table-sent .c-klant { grid-area: klant; }
  .table-ship .c-status, .table-sent .c-status { grid-area: status; }
  .table-ship .c-items, .table-sent .c-items { grid-area: items; }
  .table-ship .c-actie, .table-sent .c-actie { grid-area: actie; text-align: left; }
  .table-ship .c-actie:empty, .table-sent .c-actie:empty { display: none; }
  .table-ship .c-actie .btn, .table-sent .c-actie .btn { margin-top: 6px; }
}


/* ================================================================================================
   Beweging (v0.4): rustig en snel, zoals Linear, Stripe en Vercel
   - Alleen als JavaScript draait (klasse js op <html>, gezet door /assets/js/vroeg.js in de head).
     Zonder JS staat alles er meteen en ongewijzigd; animaties eindigen altijd zichtbaar.
   - Niets bij prefers-reduced-motion: reduce (zie het blok daarvoor verderop).
   - 150-350 ms voor bediening, een tekenende grafiek of oplopend getal mag iets langer.
   ================================================================================================ */

/* Paginaovergang: een korte, rustige overvloeier tussen pagina's (waar de browser dat kan). De
   zijbalk, kopbalk en het dok blijven staan; alleen de inhoud vloeit over. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: nxt-vt-uit 160ms var(--ease) both; }
::view-transition-new(root) { animation: nxt-vt-in 240ms var(--ease) both; }
@keyframes nxt-vt-uit { to { opacity: 0; } }
@keyframes nxt-vt-in { from { opacity: 0; transform: translateY(4px); } }
.sidebar { view-transition-name: nxt-zijbalk; }
.topbar { view-transition-name: nxt-kopbalk; }
.dock { view-transition-name: nxt-dok; }
::view-transition-group(nxt-zijbalk), ::view-transition-group(nxt-kopbalk), ::view-transition-group(nxt-dok) { animation-duration: 0s; }
::view-transition-old(nxt-zijbalk), ::view-transition-old(nxt-kopbalk), ::view-transition-old(nxt-dok) { animation: none; opacity: 0; }
::view-transition-new(nxt-zijbalk), ::view-transition-new(nxt-kopbalk), ::view-transition-new(nxt-dok) { animation: none; }

@keyframes nxt-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes nxt-in-klein { from { opacity: 0; transform: translateY(4px); } }
@keyframes nxt-fade { from { opacity: 0; } }
@keyframes nxt-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes nxt-pop-uit { to { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes nxt-flash-in { from { opacity: 0; transform: translateY(-8px) scale(0.99); } }
@keyframes nxt-teken { from { stroke-dashoffset: 1; } }
@keyframes nxt-onthul { from { clip-path: inset(-4px 100% -4px 0); } to { clip-path: inset(-4px -4px -4px 0); } }
@keyframes nxt-ring { from { stroke-dasharray: 0 400; } }
@keyframes nxt-balk { from { transform: scaleX(0); } }
@keyframes nxt-punt { from { opacity: 0; transform: scale(0.4); } }
@keyframes nxt-ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes nxt-schimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* Volgorde van binnenkomen: elk niveau telt mee (pagina, raster, stapel), max. 9 stappen van 40 ms. */
.main > :nth-child(2) { --a: 1; }
.main > :nth-child(3) { --a: 2; }
.main > :nth-child(4) { --a: 3; }
.main > :nth-child(5) { --a: 4; }
.main > :nth-child(6) { --a: 5; }
.main > :nth-child(7) { --a: 6; }
.main > :nth-child(8) { --a: 7; }
.dash > :nth-child(2), .detail-grid > :nth-child(2), .settings > :nth-child(2), .ik-supplier-grid > :nth-child(2) { --b: 1; }
.dash > :nth-child(3), .detail-grid > :nth-child(3), .settings > :nth-child(3), .ik-supplier-grid > :nth-child(3) { --b: 2; }
.dash > :nth-child(4), .detail-grid > :nth-child(4), .settings > :nth-child(4), .ik-supplier-grid > :nth-child(4) { --b: 3; }
.stack > :nth-child(2), .dash-main > :nth-child(2), .dash-side > :nth-child(2), .kpis-static > :nth-child(2), .welkom-stappen > :nth-child(2) { --c: 1; }
.stack > :nth-child(3), .dash-main > :nth-child(3), .dash-side > :nth-child(3), .kpis-static > :nth-child(3), .welkom-stappen > :nth-child(3) { --c: 2; }
.stack > :nth-child(4), .dash-main > :nth-child(4), .dash-side > :nth-child(4), .kpis-static > :nth-child(4), .welkom-stappen > :nth-child(4) { --c: 3; }
.stack > :nth-child(5), .dash-main > :nth-child(5), .dash-side > :nth-child(5), .kpis-static > :nth-child(5), .welkom-stappen > :nth-child(5) { --c: 4; }
.stack > :nth-child(6), .dash-main > :nth-child(6), .dash-side > :nth-child(6), .kpis-static > :nth-child(6), .welkom-stappen > :nth-child(6) { --c: 5; }
.stack > :nth-child(7), .dash-main > :nth-child(7), .dash-side > :nth-child(7), .kpis-static > :nth-child(7), .welkom-stappen > :nth-child(7) { --c: 6; }
.stack > :nth-child(8), .dash-main > :nth-child(8), .dash-side > :nth-child(8), .kpis-static > :nth-child(8), .welkom-stappen > :nth-child(8) { --c: 7; }
.dash > :nth-child(2) { --b: 2; }

@media (prefers-reduced-motion: no-preference) {
  /* Kaarten en secties komen zacht binnen: fade en 8px omhoog, met een kleine vertraging per item. */
  .js .main > .page-head, .js .main > .status-head, .js .main > .welkom-head, .js .main > .notice, .js .main > .hint,
  .js .main .card, .js .kpis-static > .kpi, .js .main .welkom-rondkijken, .js .main > .ct-counter,
  .js .bare-main > .card, .js .bare-main > .welcome, .js .auth-box, .js .auth-side-inner {
    animation: nxt-in var(--t-3) var(--ease) both;
    animation-delay: calc(min(var(--a, 0) + var(--b, 0) + var(--c, 0), 9) * 40ms);
  }
  .js .welkom-stap { animation: nxt-in-klein var(--t-3) var(--ease) both; }
  .js .kpis-static > .kpi, .js .welkom-stap { animation-delay: calc(min(var(--a, 0) + var(--b, 0) + var(--c, 0), 9) * 40ms + 40ms); }
  .js .auth-side-inner { animation-delay: 120ms; }
  /* Terug op dezelfde pagina (na opslaan of bijwerken): geen binnenkomst, dat voelt rustiger. */
  .js.is-zelfde .main .card, .js.is-zelfde .main > :not(.flash), .js.is-zelfde .kpis-static > .kpi, .js.is-zelfde .welkom-stap { animation: none; }

  /* Grafiek: de lijn tekent zich, het verloop eronder komt daarna, het eindpunt plopt erbij. */
  .js .chart-line { stroke-dasharray: 1 2; animation: nxt-teken 900ms var(--ease-in-out) 150ms both; }
  .js .chart-area { animation: nxt-fade 500ms var(--ease) 650ms both; }
  .js .chart-end { transform-box: fill-box; transform-origin: center; animation: nxt-punt 280ms var(--ease) 1000ms both; }
  .js .chart-empty { animation: nxt-in-klein var(--t-3) var(--ease) 300ms both; }
  /* Minigrafieken onthullen van links naar rechts, één voor één. */
  .js .spark { animation: nxt-onthul 800ms var(--ease-in-out) both; animation-delay: 200ms; }
  .js .kpi:nth-child(2) .spark { animation-delay: 280ms; }
  .js .kpi:nth-child(3) .spark { animation-delay: 360ms; }
  /* Voortgangsring vult, voortgangsbalken lopen vol. */
  .js .ring-fill { animation: nxt-ring 900ms var(--ease) 250ms both; }
  .js progress::-webkit-progress-value { transform-origin: left center; animation: nxt-balk 800ms var(--ease) 250ms both; }
  .js progress::-moz-progress-bar { transform-origin: left center; animation: nxt-balk 800ms var(--ease) 250ms both; }

  /* Meldingen schuiven in; wegvagen gebeurt in app.js (de hoogte loopt dan rustig dicht). */
  .js .flash { animation: nxt-flash-in var(--t-3) var(--ease) both; }
  .js .inline-alert, .js .field-error { animation: nxt-in-klein var(--t-2) var(--ease) both; }

  /* Menu's en de meldingenbel klappen zacht open (en dicht, via .is-sluiten uit app.js). */
  .menu[open] > .menu-panel { animation: nxt-pop var(--t-2) var(--ease); }
  .menu.is-sluiten > .menu-panel { animation: nxt-pop-uit 140ms var(--ease) forwards; pointer-events: none; }
  .menu[open] .bell-item { animation: nxt-in-klein var(--t-2) var(--ease) both; }
  .menu[open] .bell-item:nth-child(2) { animation-delay: 30ms; }
  .menu[open] .bell-item:nth-child(3) { animation-delay: 60ms; }
  .menu[open] .bell-item:nth-child(4) { animation-delay: 90ms; }
  .menu[open] .bell-item:nth-child(5) { animation-delay: 120ms; }
  /* Een vers bolletje op de bel tikt twee keer zacht aan. */
  .js .bell-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: nxt-ping 1.4s var(--ease) 600ms 2 both; }

  /* Uitklappers: de inhoud komt zacht in beeld. */
  .disclosure[open] > :not(summary), .g-edit[open] > :not(summary), details.ct-input[open] > :not(summary) { animation: nxt-in-klein var(--t-2) var(--ease) both; }

  /* Hover: heel subtiel optillen, iets diepere schaduw. Een druk geeft korte feedback. */
  a.card:hover, .card-link:hover, .side-shop:hover { transform: translateY(-1px); }
  .btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); transition-duration: 60ms; }
  .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(16, 24, 40, 0.10), 0 6px 14px -6px rgba(11, 36, 84, 0.45); }
  .btn-quiet:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 10px -6px rgba(16, 24, 40, 0.16); }
  .icon-btn { transition: background var(--t), color var(--t), transform var(--t-1) var(--ease); }
  .icon-btn:active, .menu > summary.avatar:active { transform: scale(0.94); }
  .choice { transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t-1) var(--ease); }
  .choice:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 14px -8px rgba(16, 24, 40, 0.18); }
  .side-nav a .icon, .menu-item .icon, .settings-nav a .icon { transition: color var(--t), transform var(--t-1) var(--ease); }
  .side-nav a:hover .icon, .settings-nav a:hover .icon { transform: translateX(1px); }
  .switch-thumb { transition: transform var(--t-2) var(--ease), width var(--t-1) var(--ease); }
  .switch:active .switch-thumb { width: 21px; }
  .switch input:checked + .switch-track .switch-thumb { transition: transform var(--t-2) var(--ease), width var(--t-1) var(--ease), margin var(--t-1) var(--ease); }
  .switch:active input:checked + .switch-track .switch-thumb { margin-left: -3px; }
  .kpi .spark { transition: opacity var(--t-2) var(--ease); }
  a.kpi:hover .spark { opacity: 1; }
  .table tbody tr, .grid-row, .log-row, .list-row { transition: background var(--t-1) var(--ease); }
}

/* Tabbladen en filters: een glijdend wit vlak onder het gekozen blad (app.js maakt .tabs-glider).
   Zonder JS blijft het gewone witte blad staan. */
.tabs { position: relative; }
.tabs a { position: relative; z-index: 1; }
.tabs-glider {
  position: absolute; z-index: 0; top: 3px; left: 0; height: 30px; width: 0; border-radius: 7px; pointer-events: none;
  background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.04);
  transition: transform var(--t-2) var(--ease), width var(--t-2) var(--ease);
}
.tabs.has-glider a[aria-current='page'] { background: transparent; box-shadow: none; }
.tabs.has-glider a.is-kiezen { color: var(--heading); }

/* Schimmer waar iets laadt: .skeleton op een leeg vlak, of .is-laden op <body> tijdens "Nu bijwerken"
   (dan schimmeren de cijfers en de grafiek tot de nieuwe pagina er is). */
.skeleton, .skeleton-line {
  display: block; border-radius: 6px; color: transparent !important;
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel) 30%, var(--line-soft) 50%, var(--panel) 70%, var(--panel) 100%);
  background-size: 250% 100%;
}
.skeleton-line { height: 12px; margin: 6px 0; }
.is-laden .kpi-value, .is-laden .big-number, .is-laden .kpi-delta > :not(.delta) {
  color: transparent !important; width: fit-content; border-radius: 6px;
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel) 30%, var(--line) 50%, var(--panel) 70%, var(--panel) 100%);
  background-size: 250% 100%;
}
.is-laden .kpi-value *, .is-laden .big-number *, .is-laden .kpi .delta { visibility: hidden; }
.is-laden .chart-wrap, .is-laden .spark, .is-laden .ring { opacity: 0.35; transition: opacity var(--t-2) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .skeleton, .skeleton-line, .is-laden .kpi-value, .is-laden .big-number, .is-laden .kpi-delta > :not(.delta) { animation: nxt-schimmer 1.4s linear infinite; }
}


/* ================================================================================================
   Cookiemelding: klein en rustig, vast onderaan (duwt niets weg), op de telefoon boven het dok
   ================================================================================================ */

.cookiebalk {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom)); width: min(calc(100% - 20px), 640px);
  display: flex; align-items: center; gap: 12px 16px; padding: 10px 10px 10px 16px;
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-radius: 14px; box-shadow: var(--shadow-float); font-family: var(--font);
}
.cookiebalk-tekst { flex: 1; min-width: 0; margin: 0; color: var(--ink-2); font-size: 13px; line-height: 19px; }
.cookiebalk-tekst a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.cookiebalk-form { margin: 0; flex: none; }
.cookiebalk .btn { --h: 34px; padding: 0 16px; font-size: 13px; }
.cookiebalk.is-weg { opacity: 0; transform: translate(-50%, 8px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); pointer-events: none; }
/* In de app op telefoon en tablet staat het dok onderaan: de balk schuift erboven. */
@media (max-width: 1023px) {
  .app:not(.beheer-app) .cookiebalk { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 479px) {
  .cookiebalk { padding: 10px 10px 10px 14px; }
  .cookiebalk-tekst { font-size: 12.5px; line-height: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .cookiebalk:not(.is-weg) { animation: nxt-cookie-in var(--t-3) var(--ease) 600ms both; }
}
@keyframes nxt-cookie-in { from { opacity: 0; transform: translate(-50%, 10px); } }
/* Staat de balk er nog, dan blijft een vaste actiebalk van een formulier er net boven. */
@media (min-width: 1024px) {
  body:has(> .cookiebalk:not(.is-weg)) :is(.form-actions, .form-foot) { bottom: 76px; }
}
@media print { .cookiebalk { display: none; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .menu-panel { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .sidebar, .topbar, .dock, .flash, .page-head-actions, .btn { display: none !important; }
  body { background: #fff; }
  .shell { display: block; }
  .card { box-shadow: none; }
}

/* ================================================================================================
   Voorbeeldgegevens en de lege winkel (welkom met stappenplan)
   ================================================================================================ */

.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.welkom-head { margin: 2px 0 24px; max-width: 760px; }
.welkom-titel { font-size: clamp(30px, 4vw, 40px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 800; }
.welkom-titel span { display: block; color: var(--brand-teal); }
.welkom-head .lede { margin-top: 12px; }

.welkom-kaart { padding: 0; overflow: hidden; margin-bottom: 16px; }
.welkom-kaart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.welkom-voortgang { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.welkom-voortgang progress { width: 140px; }
.welkom-voortgang-tekst { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.welkom-stappen { list-style: none; }
.welkom-stap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; align-items: center; padding: 20px 24px; border-top: 1px solid var(--line-soft); transition: background var(--t); }
.welkom-stap:first-child { border-top: 0; }
.welkom-stap:hover { background: var(--hover); }
.welkom-nr {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--surface); color: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-xs);
}
.welkom-stap:first-child:not(.is-gedaan) .welkom-nr { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 4px var(--navy-soft); }
.welkom-stap.is-gedaan .welkom-nr { background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.welkom-nr .icon { width: 18px; height: 18px; }
.welkom-stap-tekst p { margin-top: 2px; color: var(--muted); max-width: 64ch; }
.welkom-stap.is-gedaan .welkom-stap-tekst h3 { color: var(--muted); }
.welkom-stap-eind { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welkom-stap-eind .btn .icon { transition: transform var(--t); }
.welkom-stap-eind .btn:hover .icon { transform: translateX(2px); }

.welkom-rondkijken {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px;
  border-radius: var(--radius); border: 1px dashed var(--line-2); background: rgba(255, 255, 255, 0.5);
}
.welkom-illu { width: 96px; height: 72px; flex: none; }
.welkom-rondkijken-tekst { flex: 1 1 320px; min-width: 0; }
.welkom-rondkijken-tekst p { margin-top: 2px; max-width: 64ch; }

/* Lege pagina bij een winkel die nog niet gekoppeld is */
.empty-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.btn-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.btn-link .icon { width: 15px; height: 15px; color: var(--accent-bright); }
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* Instellingen › bol koppelen: voorbeeldgegevens aan of weg */
.koppel-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.koppel-keuze.is-voorbeeld { border-color: var(--accent-line); background: linear-gradient(90deg, var(--accent-soft), var(--surface) 80%); }
.koppel-keuze-tekst { flex: 1 1 280px; min-width: 0; }
.koppel-keuze-tekst .muted { font-size: 13px; line-height: 20px; }

@media (min-width: 640px) {
  .welkom-stap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .welkom-stap-eind { grid-column: auto; justify-content: flex-end; gap: 16px; }
}
@media (max-width: 639px) {
  .notice-actions { width: 100%; }
  .notice-actions > * { flex: 1 1 auto; }
  .notice-actions .btn { width: 100%; }
  .welkom-kaart-head, .welkom-stap, .welkom-rondkijken { padding: 16px; }
  .welkom-rondkijken .inline-form, .welkom-rondkijken .btn { width: 100%; }
}