/* Viamart handelsportaal, gedeelde stijl.
   Ontwerptaal overgenomen van het Klimaatregie-portaal (thema "fris"):
   veel wit, hairline randen, gelaagde zachte schaduwen, rustige typografie,
   cijfers in tabular-nums. Eén accentkleur, hieronder als variabele, zodat
   de hele huisstijl met één regel te wisselen is. */

:root {
  --vm-accent: #1f4fd8;
  --vm-accent-donker: #17399f;
  --vm-accent-zacht: #eaefff;

  --vm-inkt: #1d1d1f;
  --vm-grijs: #6e6e73;
  --vm-grijs-licht: #8e8e93;
  --vm-lijn: #e6e8ee;
  --vm-soft: #f2f4f7;
  --vm-bg: #f6f5f2;
  --vm-kaart: #ffffff;
  --vm-zij-bg: #fbfaf8;
  --vm-veld-bg: #ffffff;

  --vm-groen: #17864d;
  --vm-groen-zacht: #e2f5ea;
  --vm-amber: #9a6300;
  --vm-amber-zacht: #fdf0d8;
  --vm-rood: #b3261e;
  --vm-rood-zacht: #fbe6e4;
  --vm-blauw-zacht: #e6f0fb;

  --vm-radius: 14px;
  --vm-radius-klein: 9px;
  --vm-zij-breedte: 246px;

  --vm-schaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
  --vm-schaduw-zweef: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 34px rgba(16, 24, 40, .09);
}

html[data-thema="donker"] {
  --vm-accent: #7b9ef5;
  --vm-accent-donker: #9db6f8;
  --vm-accent-zacht: rgba(84, 118, 224, .18);

  --vm-inkt: #f2f2f4;
  --vm-grijs: #9b9ba2;
  --vm-grijs-licht: #7d7d85;
  --vm-lijn: #2c2f36;
  --vm-soft: #23262c;
  --vm-bg: #15171b;
  --vm-kaart: #1b1e23;
  --vm-zij-bg: #191c21;
  --vm-veld-bg: #23262c;

  --vm-groen: #5fce93;
  --vm-groen-zacht: rgba(35, 170, 95, .18);
  --vm-amber: #e0ae5c;
  --vm-amber-zacht: rgba(210, 150, 40, .16);
  --vm-rood: #f08a82;
  --vm-rood-zacht: rgba(200, 70, 60, .18);
  --vm-blauw-zacht: rgba(70, 130, 210, .16);

  --vm-schaduw: none;
  --vm-schaduw-zweef: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Beweging ----------
   Eén set tijden en curves voor het hele portaal. Alles wat beweegt gebruikt
   deze, zodat het aanvoelt als één programma en niet als losse pagina's.
   De curve is een zachte uitloop: snel op gang, rustig tot stilstand. */

:root {
  --vm-snel: 140ms;
  --vm-normaal: 220ms;
  --vm-traag: 380ms;
  --vm-curve: cubic-bezier(.22, .61, .36, 1);
  --vm-veer: cubic-bezier(.34, 1.3, .64, 1);
}

/* Paginawissels als één doorlopende beweging in plaats van een witte flits.
   Werkt in browsers die dit ondersteunen; elders wisselt de pagina gewoon. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vm-uit var(--vm-snel) var(--vm-curve) both;
}
::view-transition-new(root) {
  animation: vm-in var(--vm-normaal) var(--vm-curve) both;
}

@keyframes vm-uit { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vm-in { from { opacity: 0; transform: translateY(8px); } }

/* De zijbalk blijft staan tijdens een paginawissel, zoals in een echte app. */
.vm-zijbalk { view-transition-name: vm-zijbalk; }

/* Opkomst: kaarten komen kort na elkaar omhoog in plaats van allemaal tegelijk. */
@keyframes vm-opkomst {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.vm-inhoud > .vm-binnen > * {
  animation: vm-opkomst var(--vm-traag) var(--vm-curve) both;
}
.vm-inhoud > .vm-binnen > *:nth-child(1) { animation-delay: 0ms; }
.vm-inhoud > .vm-binnen > *:nth-child(2) { animation-delay: 40ms; }
.vm-inhoud > .vm-binnen > *:nth-child(3) { animation-delay: 80ms; }
.vm-inhoud > .vm-binnen > *:nth-child(4) { animation-delay: 120ms; }
.vm-inhoud > .vm-binnen > *:nth-child(5) { animation-delay: 160ms; }
.vm-inhoud > .vm-binnen > *:nth-child(6) { animation-delay: 200ms; }
.vm-inhoud > .vm-binnen > *:nth-child(n+7) { animation-delay: 240ms; }

/* Tegels binnen een rooster komen ook gespreid op. */
.vm-kpi-rooster .vm-kpi,
.vm-signalen .vm-signaal,
.vm-routekaarten .vm-routekaart {
  animation: vm-opkomst var(--vm-traag) var(--vm-curve) both;
}
.vm-kpi-rooster .vm-kpi:nth-child(2),
.vm-signalen .vm-signaal:nth-child(2),
.vm-routekaarten .vm-routekaart:nth-child(2) { animation-delay: 50ms; }
.vm-kpi-rooster .vm-kpi:nth-child(3),
.vm-signalen .vm-signaal:nth-child(3),
.vm-routekaarten .vm-routekaart:nth-child(3) { animation-delay: 100ms; }
.vm-kpi-rooster .vm-kpi:nth-child(4),
.vm-signalen .vm-signaal:nth-child(4) { animation-delay: 150ms; }
.vm-kpi-rooster .vm-kpi:nth-child(5),
.vm-signalen .vm-signaal:nth-child(5) { animation-delay: 200ms; }
.vm-kpi-rooster .vm-kpi:nth-child(n+6),
.vm-signalen .vm-signaal:nth-child(n+6) { animation-delay: 250ms; }

/* Wie beweging liever niet heeft, krijgt hem niet. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  @view-transition { navigation: none; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--vm-bg);
  color: var(--vm-inkt);
  font-size: 15.5px;
  line-height: 1.6;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Schil: zijbalk plus inhoud ---------- */

.vm-schil { display: flex; min-height: 100vh; align-items: stretch; }

.vm-zijbalk {
  flex: 0 0 var(--vm-zij-breedte);
  width: var(--vm-zij-breedte);
  background: var(--vm-zij-bg);
  border-right: 1px solid var(--vm-lijn);
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.vm-merk { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 10px 16px; text-decoration: none; }
.vm-merk-logo { display: block; height: 26px; width: auto; }
.vm-merk-logo-wit { display: none; }
html[data-thema="donker"] .vm-merk-logo-zwart { display: none; }
html[data-thema="donker"] .vm-merk-logo-wit { display: block; }
.vm-merk-sub { display: block; font-size: 11px; font-weight: 600; color: var(--vm-grijs); letter-spacing: .04em; text-transform: uppercase; padding-left: 2px; }

.vm-nav-kop {
  display: block; font-size: 11.5px; font-weight: 800; color: var(--vm-grijs);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 16px 12px 5px; padding-bottom: 5px; border-bottom: 1px solid var(--vm-lijn);
}
.vm-nav-kop:first-of-type { margin-top: 2px; }

.vm-nav a {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--vm-inkt);
  padding: 7px 11px; border-radius: var(--vm-radius-klein);
  transition: background var(--vm-snel) var(--vm-curve), color var(--vm-snel) var(--vm-curve), transform var(--vm-snel) var(--vm-curve);
}
.vm-nav a:hover { background: var(--vm-accent-zacht); transform: translateX(2px); }
.vm-nav a:active { transform: translateX(2px) scale(.985); }
.vm-nav a.vm-nav-actief { background: var(--vm-accent-zacht); color: var(--vm-accent-donker); }
.vm-nav a svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .78; }
.vm-nav a.vm-nav-actief svg { opacity: 1; }
.vm-nav a .vm-nav-telling {
  margin-left: auto; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--vm-rood-zacht); color: var(--vm-rood);
}
.vm-nav a.vm-nav-straks { color: var(--vm-grijs-licht); cursor: default; }
.vm-nav a.vm-nav-straks:hover { background: transparent; }
.vm-nav a.vm-nav-straks .vm-nav-telling { background: var(--vm-soft); color: var(--vm-grijs); font-weight: 700; }

.vm-zij-voet { margin-top: auto; padding: 12px 11px 2px; border-top: 1px solid var(--vm-lijn); }
.vm-zij-rij { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--vm-grijs); }
.vm-stip { width: 8px; height: 8px; border-radius: 999px; background: var(--vm-groen); flex: 0 0 auto; }
.vm-stip-uit { background: var(--vm-grijs-licht); }

/* Het lampje in de zijbalk. Groen pulserend = alles nagekeken en goed, oranje
   = iets vraagt aandacht, rood = er is iets stuk. Klik erop voor de details. */
.vm-stip-goed { background: var(--vm-groen); }
.vm-stip-let  { background: var(--vm-amber); }
.vm-stip-fout { background: var(--vm-rood); }

.vm-stip-puls { position: relative; }
.vm-stip-puls::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: inherit; animation: vm-puls 2.2s ease-out infinite;
}
@keyframes vm-puls {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3);   opacity: 0; }
  100% { transform: scale(3);   opacity: 0; }
}
/* Wie bewegende dingen liever niet ziet, krijgt gewoon een stille stip. */
@media (prefers-reduced-motion: reduce) {
  .vm-stip-puls::after { animation: none; }
}

.vm-stand-link { color: inherit; text-decoration: none; }
.vm-stand-link:hover { text-decoration: underline; }
.vm-stand-tijd { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .6; }

.vm-thema-knop {
  margin-top: 9px; width: 100%; border: 1px solid var(--vm-lijn); background: var(--vm-kaart);
  color: var(--vm-inkt); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
.vm-thema-knop:hover { border-color: var(--vm-accent); }

.vm-inhoud { flex: 1 1 auto; min-width: 0; padding: 26px 30px 60px; }
.vm-binnen { max-width: 1180px; margin: 0 auto; }

/* ---------- Paginakop ---------- */

.vm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vm-titel { font-size: 29px; font-weight: 800; letter-spacing: -1.1px; }
.vm-sub { font-size: 14.5px; color: var(--vm-grijs); margin-top: 2px; }
.vm-kop-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Demolint ---------- */

.vm-demolint {
  display: flex; align-items: center; gap: 10px;
  background: var(--vm-amber-zacht); color: var(--vm-inkt);
  border-radius: var(--vm-radius); padding: 11px 16px; margin-bottom: 20px;
  font-size: 13.5px; line-height: 1.5;
}
.vm-demolint strong { font-weight: 800; }
.vm-demolint svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--vm-amber); }

/* Draait de pagina op echte gegevens, dan wordt het lint groen in plaats van amber. */
.vm-demolint.vm-lint-live { background: var(--vm-groen-zacht); }
.vm-demolint.vm-lint-live svg { color: var(--vm-groen); }
.vm-lint-reden { display: block; margin-top: 3px; font-size: 12.5px; color: var(--vm-grijs); }

/* ---------- Knoppen ---------- */

.vm-knop {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; border: 1px solid transparent;
  background: var(--vm-accent); color: #fff; text-decoration: none; cursor: pointer;
  transition: transform var(--vm-snel) var(--vm-veer), filter var(--vm-snel) var(--vm-curve), border-color var(--vm-snel) var(--vm-curve), background var(--vm-snel) var(--vm-curve), box-shadow var(--vm-snel) var(--vm-curve);
}
.vm-knop:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31, 79, 216, .22); }
.vm-knop:active { transform: translateY(0) scale(.97); box-shadow: none; }
.vm-knop svg { width: 15px; height: 15px; }
.vm-knop-stil { background: var(--vm-kaart); color: var(--vm-inkt); border-color: var(--vm-lijn); }
.vm-knop-stil:hover { border-color: var(--vm-accent); filter: none; }
.vm-knop-klein { font-size: 12.5px; padding: 5px 12px; }
.vm-knop[disabled] { opacity: .5; cursor: default; filter: none; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--vm-accent); outline-offset: 2px; border-radius: 8px;
}

/* ---------- Signalen (wat vandaag aandacht vraagt) ---------- */

.vm-signalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 13px; margin-bottom: 26px; }

.vm-signaal {
  background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-left: 3px solid var(--vm-grijs-licht);
  border-radius: var(--vm-radius); padding: 15px 17px; box-shadow: var(--vm-schaduw);
  display: flex; flex-direction: column; gap: 7px;
}
.vm-signaal { transition: transform var(--vm-normaal) var(--vm-curve), box-shadow var(--vm-normaal) var(--vm-curve); }
.vm-signaal:hover { transform: translateY(-2px); box-shadow: var(--vm-schaduw-zweef); }
.vm-signaal-hoog { border-left-color: var(--vm-rood); }
.vm-signaal-midden { border-left-color: var(--vm-amber); }
.vm-signaal-laag { border-left-color: var(--vm-accent); }

.vm-signaal-kop { display: flex; align-items: center; gap: 8px; }
.vm-signaal-ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--vm-soft); }
.vm-signaal-ico svg { width: 15px; height: 15px; }
.vm-signaal-hoog .vm-signaal-ico { background: var(--vm-rood-zacht); color: var(--vm-rood); }
.vm-signaal-midden .vm-signaal-ico { background: var(--vm-amber-zacht); color: var(--vm-amber); }
.vm-signaal-laag .vm-signaal-ico { background: var(--vm-accent-zacht); color: var(--vm-accent-donker); }
.vm-signaal-titel { font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.vm-signaal-tekst { font-size: 13.5px; color: var(--vm-grijs); line-height: 1.55; }
.vm-signaal-tekst b { color: var(--vm-inkt); font-weight: 700; }
.vm-signaal-acties { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.vm-signaal-bron { font-size: 11.5px; color: var(--vm-grijs-licht); margin-top: 1px; }
.vm-signaal { position: relative; }
.vm-signaal-af {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  border-radius: 8px; border: 1px solid var(--vm-lijn); background: var(--vm-kaart);
  color: var(--vm-grijs); font-size: 13px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--vm-snel) var(--vm-curve), color var(--vm-snel) var(--vm-curve), border-color var(--vm-snel) var(--vm-curve), transform var(--vm-snel) var(--vm-veer);
}
.vm-signaal-af:hover { background: var(--vm-groen-zacht); color: var(--vm-groen); border-color: var(--vm-groen); }
.vm-signaal-af:active { transform: scale(.88); }

/* ---------- Kengetallen ---------- */

.vm-kpi-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 13px; margin-bottom: 26px; }

.vm-kpi {
  background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-radius: var(--vm-radius);
  padding: 16px 18px 14px; box-shadow: var(--vm-schaduw);
  transition: transform var(--vm-normaal) var(--vm-curve), box-shadow var(--vm-normaal) var(--vm-curve), border-color var(--vm-normaal) var(--vm-curve);
}
.vm-kpi:hover { transform: translateY(-3px); box-shadow: var(--vm-schaduw-zweef); border-color: var(--vm-accent); }
.vm-kpi:active { transform: translateY(-1px); transition-duration: var(--vm-snel); }
.vm-kpi-label { font-size: 12.5px; font-weight: 700; color: var(--vm-grijs); }
.vm-kpi-waarde { font-size: 27px; font-weight: 800; letter-spacing: -1px; margin: 3px 0 1px; }
.vm-kpi-voet { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--vm-grijs); }
.vm-kpi-delta { font-weight: 800; }
.vm-delta-op { color: var(--vm-groen); }
.vm-delta-af { color: var(--vm-rood); }
.vm-delta-vlak { color: var(--vm-grijs); }
.vm-vonk { display: block; width: 100%; height: 26px; margin-top: 9px; }
.vm-vonk-vlak { opacity: .13; stroke: none; }
.vm-vonk-lijn { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vm-vonk-accent .vm-vonk-vlak, .vm-vonk-accent .vm-vonk-lijn { fill: var(--vm-accent); stroke: var(--vm-accent); }
.vm-vonk-accent .vm-vonk-lijn { fill: none; }
.vm-vonk-groen .vm-vonk-vlak, .vm-vonk-groen .vm-vonk-lijn { fill: var(--vm-groen); stroke: var(--vm-groen); }
.vm-vonk-groen .vm-vonk-lijn { fill: none; }
.vm-vonk-amber .vm-vonk-vlak, .vm-vonk-amber .vm-vonk-lijn { fill: var(--vm-amber); stroke: var(--vm-amber); }
.vm-vonk-amber .vm-vonk-lijn { fill: none; }

/* ---------- Kaarten ---------- */

.vm-kaart {
  background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-radius: var(--vm-radius);
  box-shadow: var(--vm-schaduw); margin-bottom: 22px; overflow: hidden;
}
.vm-kaart-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 15px 18px; border-bottom: 1px solid var(--vm-lijn);
}
.vm-kaart-titel { font-size: 16.5px; font-weight: 800; letter-spacing: -.4px; }
.vm-kaart-sub { font-size: 12.5px; color: var(--vm-grijs); margin-top: 1px; }
.vm-kaart-lijf { padding: 16px 18px; }
.vm-kaart-lijf-strak { padding: 0; }
.vm-kaart-voet { padding: 11px 18px; border-top: 1px solid var(--vm-lijn); background: var(--vm-zij-bg); font-size: 12.5px; color: var(--vm-grijs); }

.vm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: start; }

/* ---------- Tabellen ---------- */

.vm-tabelwikkel { width: 100%; overflow-x: auto; }
.vm-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vm-tabel th {
  text-align: left; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vm-grijs); padding: 10px 14px; border-bottom: 1px solid var(--vm-lijn); white-space: nowrap;
  background: var(--vm-zij-bg);
}
.vm-tabel td { padding: 11px 14px; border-bottom: 1px solid var(--vm-lijn); vertical-align: middle; }
.vm-tabel tbody tr:last-child td { border-bottom: 0; }
.vm-tabel tbody tr td { transition: background var(--vm-snel) var(--vm-curve); }
.vm-tabel tbody tr:hover td { background: var(--vm-soft); }
.vm-tabel .vm-num { text-align: right; white-space: nowrap; }
.vm-tabel .vm-artikel { font-weight: 700; }
.vm-tabel .vm-fijn { font-size: 11.5px; color: var(--vm-grijs); font-weight: 500; }
.vm-tabel tr.vm-rij-let td { background: rgba(179, 38, 30, .045); }
html[data-thema="donker"] .vm-tabel tr.vm-rij-let td { background: rgba(240, 138, 130, .07); }

/* ---------- Statuspillen ---------- */

.vm-pil {
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--vm-normaal) var(--vm-curve), color var(--vm-normaal) var(--vm-curve);
  font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 5px;
  background: var(--vm-soft); color: var(--vm-grijs); white-space: nowrap;
}
.vm-pil-groen { background: var(--vm-groen-zacht); color: var(--vm-groen); }
.vm-pil-amber { background: var(--vm-amber-zacht); color: var(--vm-amber); }
.vm-pil-rood { background: var(--vm-rood-zacht); color: var(--vm-rood); }
.vm-pil-blauw { background: var(--vm-accent-zacht); color: var(--vm-accent-donker); }
/* Historie: aanwezig, maar het vraagt niets van je. */
.vm-pil-stil { background: transparent; color: var(--vm-grijs-licht); border: 1px solid var(--vm-lijn); }

/* ---------- Kanaalregels ---------- */

.vm-kanaal { display: flex; align-items: center; gap: 13px; padding: 12px 18px; border-bottom: 1px solid var(--vm-lijn); }
.vm-kanaal:last-child { border-bottom: 0; }
.vm-kanaal-teken {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; background: var(--vm-soft);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: -.3px;
}
.vm-kanaal-naam { font-size: 14px; font-weight: 700; }
.vm-kanaal-sub { font-size: 12px; color: var(--vm-grijs); }
.vm-kanaal-cijfers { margin-left: auto; text-align: right; }
.vm-kanaal-omzet { font-size: 15px; font-weight: 800; }
.vm-kanaal-orders { font-size: 12px; color: var(--vm-grijs); }
.vm-kanaal-aandeel { flex: 0 0 92px; }

/* Dunne verhoudingsbalk */
.vm-balk { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--vm-soft); }
.vm-balk span { display: block; height: 100%; transition: width var(--vm-traag) var(--vm-curve); }
.vm-balk-lokaal { background: var(--vm-accent); }
.vm-balk-tijdvrij { background: #8ea9f0; }
.vm-balk-lvb { background: var(--vm-groen); }
html[data-thema="donker"] .vm-balk-tijdvrij { background: #4c6fd0; }

.vm-legenda { display: flex; gap: 15px; flex-wrap: wrap; font-size: 12px; color: var(--vm-grijs); }
.vm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.vm-legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Invulveld voor voorraadstand in een tabelcel */
.vm-stand {
  width: 68px; font: inherit; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums;
  padding: 5px 8px; border: 1px solid var(--vm-lijn); border-radius: 7px;
  background: var(--vm-veld-bg); color: var(--vm-inkt);
  transition: border-color var(--vm-snel) var(--vm-curve), box-shadow var(--vm-snel) var(--vm-curve);
}
.vm-stand:focus { outline: none; border-color: var(--vm-accent); box-shadow: 0 0 0 3px var(--vm-accent-zacht); }
.vm-stand::-webkit-inner-spin-button { opacity: .4; }

/* ---------- Voorraadmeter in tabel ---------- */

.vm-dekking { display: flex; align-items: center; gap: 9px; min-width: 128px; }
.vm-dekking-baan { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--vm-soft); overflow: hidden; }
.vm-dekking-vul { display: block; height: 100%; background: var(--vm-groen); transition: width var(--vm-traag) var(--vm-curve), background var(--vm-normaal) var(--vm-curve); }
.vm-dekking-krap .vm-dekking-vul { background: var(--vm-amber); }
.vm-dekking-leeg .vm-dekking-vul { background: var(--vm-rood); }
.vm-dekking-tekst { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ---------- Regelkaarten (automatische omschakeling) ---------- */

.vm-regel {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 16px 18px; border-bottom: 1px solid var(--vm-lijn);
}
.vm-regel:last-child { border-bottom: 0; }
.vm-regel-nr {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: var(--vm-accent-zacht);
  color: var(--vm-accent-donker); font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.vm-regel-lijf { flex: 1 1 auto; min-width: 0; }
.vm-regel-titel { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; }
.vm-regel-tekst { font-size: 13px; color: var(--vm-grijs); margin-top: 3px; line-height: 1.55; }
.vm-regel-tekst code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--vm-soft); padding: 1px 6px; border-radius: 5px; color: var(--vm-inkt);
}
.vm-regel-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--vm-grijs-licht); margin-top: 7px; }

/* Schakelaar */
.vm-schakel { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.vm-schakel input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.vm-schakel-baan {
  position: absolute; inset: 0; background: var(--vm-soft); border: 1px solid var(--vm-lijn);
  border-radius: 999px; transition: background 160ms ease, border-color 160ms ease;
}
.vm-schakel-baan::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform 160ms ease;
}
.vm-schakel input:checked + .vm-schakel-baan { background: var(--vm-accent); border-color: var(--vm-accent); }
.vm-schakel input:checked + .vm-schakel-baan::after { transform: translateX(18px); }
.vm-schakel input:focus-visible + .vm-schakel-baan { outline: 2px solid var(--vm-accent); outline-offset: 2px; }

/* ---------- Routekaarten en routekeuze ---------- */

.vm-routekaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; margin-bottom: 24px; }
.vm-routekaart {
  background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-radius: var(--vm-radius);
  padding: 16px 18px; box-shadow: var(--vm-schaduw);
}
.vm-routekaart-kop { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.vm-routekaart-vlag { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.vm-routekaart-naam { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; }
.vm-routekaart-cijfer { font-size: 25px; font-weight: 800; letter-spacing: -.9px; }
.vm-routekaart-sub { font-size: 12.5px; color: var(--vm-grijs); line-height: 1.5; }
.vm-routekaart-lijst { list-style: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vm-lijn); font-size: 12.5px; color: var(--vm-grijs); }
.vm-routekaart-lijst li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.vm-routekaart-lijst b { color: var(--vm-inkt); font-weight: 700; }

.vm-routekeuze { display: inline-flex; border: 1px solid var(--vm-lijn); border-radius: 999px; overflow: hidden; background: var(--vm-kaart); }
.vm-routekeuze button {
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  background: transparent; color: var(--vm-grijs); border: 0; cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--vm-lijn);
}
.vm-routekeuze button:last-child { border-right: 0; }
.vm-routekeuze button:hover { background: var(--vm-soft); color: var(--vm-inkt); }
.vm-routekeuze button.vm-route-aan { background: var(--vm-accent); color: #fff; }
.vm-routekeuze button.vm-route-aan:hover { background: var(--vm-accent); }
.vm-routekeuze button[disabled] { opacity: .35; cursor: default; }
.vm-routekeuze button[disabled]:hover { background: transparent; color: var(--vm-grijs); }

/* ---------- Verkoopdashboard ---------- */

.vm-dash { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-bottom: 24px; }
@media (max-width: 1000px) { .vm-dash { grid-template-columns: 1fr; } }

.vm-dash-groot {
  background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-radius: var(--vm-radius);
  box-shadow: var(--vm-schaduw); padding: 22px 24px 16px; display: flex; flex-direction: column;
}
.vm-dash-label { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--vm-grijs); }
.vm-dash-bedrag { font-size: 42px; font-weight: 800; letter-spacing: -1.8px; margin: 6px 0 2px; line-height: 1.05; }
.vm-dash-sub { font-size: 13px; color: var(--vm-grijs); }
.vm-dash-grafiek { flex: 1 1 auto; min-height: 170px; margin-top: 16px; }

.vm-dash-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .vm-dash-tegels { grid-template-columns: 1fr; } }
.vm-dash-tegel {
  background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-radius: var(--vm-radius);
  box-shadow: var(--vm-schaduw); padding: 16px 18px;
  transition: transform var(--vm-normaal) var(--vm-curve), box-shadow var(--vm-normaal) var(--vm-curve);
}
.vm-dash-tegel:hover { transform: translateY(-2px); box-shadow: var(--vm-schaduw-zweef); }
.vm-dash-waarde { font-size: 27px; font-weight: 800; letter-spacing: -1px; margin: 4px 0 6px; }
.vm-dash-vorig { font-size: 11.5px; color: var(--vm-grijs-licht); text-transform: uppercase; letter-spacing: .05em; }

.vm-verschil {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px; vertical-align: middle;
}
.vm-verschil-op { background: var(--vm-groen-zacht); color: var(--vm-groen); }
.vm-verschil-af { background: var(--vm-rood-zacht); color: var(--vm-rood); }
.vm-verschil-vlak { background: var(--vm-soft); color: var(--vm-grijs); }

/* Periodekiezer */
.vm-periode { display: inline-flex; background: var(--vm-kaart); border: 1px solid var(--vm-lijn); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.vm-periode button {
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--vm-grijs); cursor: pointer; white-space: nowrap;
  transition: background var(--vm-snel) var(--vm-curve), color var(--vm-snel) var(--vm-curve);
}
.vm-periode button:hover { background: var(--vm-soft); color: var(--vm-inkt); }
.vm-periode button.vm-periode-aan { background: var(--vm-accent); color: #fff; }

/* ---------- Mailregels in Bolmate-stijl: een zin met chips ---------- */

.vm-mailregel { border-bottom: 1px solid var(--vm-lijn); }
.vm-mailregel:last-child { border-bottom: 0; }
.vm-mailregel-kop {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px; cursor: pointer;
  transition: background var(--vm-snel) var(--vm-curve);
}
.vm-mailregel-kop:hover { background: var(--vm-soft); }
.vm-mailregel-titel { font-size: 13px; font-weight: 800; color: var(--vm-accent-donker); width: 100%; }

.vm-zin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--vm-grijs); flex: 1 1 auto; min-width: 0; }
.vm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--vm-accent-zacht); color: var(--vm-accent-donker);
  font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 9px;
  white-space: nowrap; transition: transform var(--vm-snel) var(--vm-veer), filter var(--vm-snel) var(--vm-curve);
}
.vm-mailregel-kop:hover .vm-chip { filter: brightness(1.03); }
.vm-chip-stil { background: var(--vm-soft); color: var(--vm-inkt); }

.vm-mailregel-stats {
  flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--vm-grijs);
  background: var(--vm-zij-bg); border: 1px solid var(--vm-lijn); border-radius: 10px;
  padding: 8px 12px; line-height: 1.5;
}
.vm-mailregel-stats b { color: var(--vm-inkt); font-size: 13px; }

.vm-mailregel-pijl { flex: 0 0 auto; color: var(--vm-grijs-licht); transition: transform var(--vm-normaal) var(--vm-curve); }
.vm-mailregel.vm-open .vm-mailregel-pijl { transform: rotate(180deg); }

/* Het uitklapbare voorbeeld: de mail zelf, in een kader */
.vm-mailvoorbeeld {
  max-height: 0; overflow: hidden;
  transition: max-height var(--vm-traag) var(--vm-curve);
}
.vm-mailregel.vm-open .vm-mailvoorbeeld { max-height: 1400px; }
.vm-mailvoorbeeld-binnen { padding: 0 18px 20px; }
.vm-mailvoorbeeld iframe {
  width: 100%; height: 1050px; border: 1px solid var(--vm-lijn); border-radius: 14px;
  background: #f4f5f8; display: block;
}
.vm-mailvoorbeeld-balk { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px; font-size: 12.5px; color: var(--vm-grijs); }

/* ---------- Sjabloonvoorbeeld (mail) ---------- */

.vm-sjabloon {
  border: 1px solid var(--vm-lijn); border-radius: var(--vm-radius-klein);
  background: var(--vm-zij-bg); padding: 14px 16px; font-size: 13.5px; line-height: 1.6;
}
.vm-sjabloon-kop { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--vm-grijs); margin-bottom: 7px; }
.vm-sjabloon-regel { display: flex; gap: 8px; font-size: 12.5px; color: var(--vm-grijs); }
.vm-sjabloon-regel b { color: var(--vm-inkt); font-weight: 700; }
.vm-sjabloon-lijf { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--vm-lijn); white-space: pre-line; }
.vm-sjabloon-veld { background: var(--vm-accent-zacht); color: var(--vm-accent-donker); border-radius: 4px; padding: 0 5px; font-weight: 700; }

/* ---------- Afvinklijst ---------- */

.vm-check { list-style: none; }
.vm-check li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vm-lijn); font-size: 13.5px; line-height: 1.55; }
.vm-check li:last-child { border-bottom: 0; padding-bottom: 0; }
.vm-check-teken {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900;
  background: var(--vm-groen-zacht); color: var(--vm-groen);
}
.vm-check-vraag { background: var(--vm-amber-zacht); color: var(--vm-amber); }
.vm-check-nee { background: var(--vm-rood-zacht); color: var(--vm-rood); }
.vm-check b { font-weight: 700; }
.vm-check .vm-fijn { display: block; font-size: 12px; color: var(--vm-grijs); }

/* Levendige stip bij nieuwe orders */
.vm-nieuw { display: inline-flex; align-items: center; gap: 6px; }
.vm-nieuw::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--vm-groen);
  box-shadow: 0 0 0 0 var(--vm-groen); animation: vm-klop 2.4s ease-out infinite;
}
@keyframes vm-klop {
  0% { box-shadow: 0 0 0 0 rgba(23, 134, 77, .45); }
  70% { box-shadow: 0 0 0 7px rgba(23, 134, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 134, 77, 0); }
}
@media (prefers-reduced-motion: reduce) { .vm-nieuw::before { animation: none; } }

/* ---------- Instelbare parameters ---------- */

.vm-params { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.vm-param { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.vm-param-label { font-size: 12.5px; font-weight: 700; color: var(--vm-grijs); display: flex; justify-content: space-between; gap: 10px; }
.vm-param-label b { color: var(--vm-inkt); font-weight: 800; }
.vm-param input[type="range"] { width: 100%; accent-color: var(--vm-accent); cursor: pointer; }
.vm-param-uitleg { font-size: 11.5px; color: var(--vm-grijs-licht); }

.vm-melding {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  background: var(--vm-inkt); color: var(--vm-bg); font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--vm-schaduw-zweef);
  opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 40;
}
.vm-melding.vm-melding-zicht { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Uitlegblok ---------- */

.vm-uitleg {
  background: var(--vm-accent-zacht); border-radius: var(--vm-radius);
  padding: 14px 18px; margin-bottom: 22px; font-size: 13.5px; line-height: 1.65;
}
.vm-uitleg { transition: background var(--vm-normaal) var(--vm-curve); }
.vm-uitleg summary { transition: color var(--vm-snel) var(--vm-curve); cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--vm-accent-donker); list-style: none; }
.vm-uitleg summary::-webkit-details-marker { display: none; }
.vm-uitleg summary::before { content: "? "; font-weight: 900; }
.vm-uitleg[open] summary { margin-bottom: 7px; }
.vm-uitleg p + p { margin-top: 8px; }
.vm-uitleg ul { margin: 7px 0 0 18px; }
.vm-uitleg li { margin-bottom: 3px; }

/* ---------- Tijdlijn (logboek) ---------- */

.vm-log { list-style: none; }
.vm-log li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--vm-lijn); font-size: 13.5px; }
.vm-log li:last-child { border-bottom: 0; padding-bottom: 0; }
.vm-log-tijd { flex: 0 0 96px; font-size: 12px; color: var(--vm-grijs); padding-top: 1px; }
.vm-log-tekst b { font-weight: 700; }
.vm-log-tekst { line-height: 1.5; }
.vm-log-bron { font-size: 11.5px; color: var(--vm-grijs-licht); }

/* ---------- Lege staat ---------- */

.vm-leeg {
  border: 1.5px dashed var(--vm-lijn); border-radius: var(--vm-radius); background: var(--vm-kaart);
  color: var(--vm-grijs); text-align: center; padding: 34px 20px; font-size: 13.5px;
}

/* ---------- Klein scherm ---------- */

/* ---------- Mobiel: bovenbalk met hamburger, menu klapt eronder open ----------
   Zelfde aanpak als het Klimaatregie-portaal: logo links, hamburger rechts,
   het menu schuift eronder open als paneel. Op desktop verandert er niets. */

.vm-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  border: 1px solid var(--vm-lijn); background: var(--vm-kaart); color: var(--vm-inkt);
  cursor: pointer; padding: 0; margin-left: auto;
  transition: background var(--vm-snel) var(--vm-curve), border-color var(--vm-snel) var(--vm-curve), transform var(--vm-snel) var(--vm-veer);
}
.vm-hamburger:hover { border-color: var(--vm-accent); }
.vm-hamburger:active { transform: scale(.94); }
.vm-hamburger svg { width: 20px; height: 20px; }
.vm-hamburger .vm-ham-dicht { display: none; }
.vm-zijbalk.vm-open .vm-hamburger .vm-ham-open { display: none; }
.vm-zijbalk.vm-open .vm-hamburger .vm-ham-dicht { display: block; }

@media (max-width: 900px) {
  html, body { max-width: 100vw; overflow-x: clip; }

  .vm-schil { flex-direction: column; }

  /* Bovenbalk: blijft bovenaan plakken, één rij hoog. */
  .vm-zijbalk {
    flex: none; width: 100%; height: auto; max-height: none;
    position: sticky; top: 0; z-index: 40;
    border-right: 0; border-bottom: 1px solid var(--vm-lijn);
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0;
    padding: 10px 14px; overflow: visible;
    box-shadow: 0 1px 0 var(--vm-lijn);
    view-transition-name: none;
  }
  .vm-merk { padding: 2px 0; margin-right: auto; flex-direction: row; align-items: center; }
  .vm-merk-logo { height: 22px; }
  .vm-merk-sub { display: none; }
  .vm-hamburger { display: inline-flex; }

  /* Menu: dicht tot je op de hamburger tikt. */
  .vm-nav-kop, .vm-nav, .vm-zij-voet {
    display: none; flex-basis: 100%; width: 100%;
  }
  .vm-zijbalk.vm-open .vm-nav-kop,
  .vm-zijbalk.vm-open .vm-nav,
  .vm-zijbalk.vm-open .vm-zij-voet { display: block; }
  .vm-zijbalk.vm-open .vm-nav { display: flex; flex-direction: column; gap: 2px; }

  .vm-zijbalk.vm-open .vm-nav-kop { margin: 14px 4px 6px; }
  .vm-zijbalk.vm-open .vm-nav-kop:first-of-type { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vm-lijn); }
  .vm-zijbalk.vm-open .vm-nav a { padding: 12px 12px; font-size: 15px; border-radius: 10px; }
  .vm-zijbalk.vm-open .vm-nav a:hover { transform: none; }
  .vm-zijbalk.vm-open .vm-nav a svg { display: inline-block; width: 18px; height: 18px; }
  .vm-zijbalk.vm-open .vm-zij-voet {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 12px 0 0; padding: 12px 4px 4px; border-top: 1px solid var(--vm-lijn);
  }
  .vm-zijbalk.vm-open .vm-zij-voet .vm-zij-rij:nth-child(2) { display: none; }
  .vm-zijbalk.vm-open .vm-thema-knop { margin: 0; width: auto; }

  /* Zacht openklappen */
  .vm-zijbalk.vm-open .vm-nav,
  .vm-zijbalk.vm-open .vm-nav-kop,
  .vm-zijbalk.vm-open .vm-zij-voet { animation: vm-opkomst var(--vm-normaal) var(--vm-curve) both; }

  /* Sluier over de inhoud terwijl het menu open is */
  .vm-sluier {
    position: fixed; inset: 0; background: rgba(16, 24, 40, .28); z-index: 30;
    opacity: 0; pointer-events: none; transition: opacity var(--vm-normaal) var(--vm-curve);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .vm-sluier.vm-zicht { opacity: 1; pointer-events: auto; }
  body.vm-menu-open { overflow: hidden; }

  /* Inhoud compacter */
  .vm-inhoud { padding: 18px 14px 44px; }
  .vm-titel { font-size: 24px; letter-spacing: -.7px; }
  .vm-sub { font-size: 13.5px; }
  .vm-kop { margin-bottom: 14px; }
  .vm-kop-acties { width: 100%; }
  .vm-kop-acties .vm-knop { flex: 1 1 auto; justify-content: center; }
  .vm-demolint { font-size: 13px; padding: 10px 13px; }
  .vm-kpi-rooster { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vm-kpi { padding: 13px 14px 12px; }
  .vm-kpi-waarde { font-size: 22px; }
  .vm-signalen { grid-template-columns: 1fr; }
  .vm-duo { grid-template-columns: 1fr; }
  .vm-routekaarten { grid-template-columns: 1fr; }
  .vm-kaart-kop { padding: 13px 14px; }
  .vm-kaart-lijf { padding: 13px 14px; }
  .vm-kaart-voet { padding: 10px 14px; }
  .vm-tabel th { padding: 8px 10px; font-size: 10.5px; }
  .vm-tabel td { padding: 9px 10px; font-size: 12.5px; }
  .vm-params { gap: 14px; }
  .vm-param { min-width: 100%; }
  .vm-regel { padding: 13px 14px; gap: 11px; }
  .vm-melding { bottom: 16px; left: 14px; right: 14px; transform: translateY(14px); text-align: center; }
  .vm-melding.vm-melding-zicht { transform: translateY(0); }
}

@media print {
  .vm-zijbalk, .vm-kop-acties, .vm-demolint { display: none; }
  .vm-inhoud { padding: 0; }
  .vm-kaart, .vm-kpi, .vm-signaal { box-shadow: none; break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Landsvlag
   Klein en met een haarlijntje eromheen, anders lopen wit en geel weg tegen
   het papier van de kaart.
   --------------------------------------------------------------------------- */

.vm-vlag {
  width: 21px; height: 15px; flex: none; border-radius: 2.5px;
  box-shadow: 0 0 0 1px rgba(15, 22, 40, .12); vertical-align: -2px;
}
.vm-vlag-leeg {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  color: var(--vm-grijs); background: var(--vm-soft);
}

/* ---------------------------------------------------------------------------
   Orderfeed
   De lijst met binnengekomen orders zoals je hem gewend bent: productfoto,
   vlag, klantnaam, tijd. Elke regel is een rij die je kunt aanklikken.
   --------------------------------------------------------------------------- */

.vm-feed { display: flex; flex-direction: column; }

.vm-feed-rij {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--vm-lijn);
  color: inherit;
  transition: background .14s ease;
}

/* De hele rij is klikbaar, maar de knoppen rechts moeten er bovenop liggen.
   Een <button> ín een <a> mag niet, dus de link is een onzichtbaar vlak. */
.vm-feed-link { position: absolute; inset: 0; z-index: 0; }
.vm-feed-rij > *:not(.vm-feed-link) { position: relative; z-index: 1; }
.vm-feed-rij > .vm-feed-mid,
.vm-feed-rij > .vm-feed-foto { pointer-events: none; }
.vm-feed-rij:last-child { border-bottom: 0; }
.vm-feed-rij:hover { background: var(--vm-soft); }

.vm-feed-foto {
  width: 46px; height: 46px; flex: none; border-radius: 11px;
  background: #fff; border: 1px solid var(--vm-lijn);
  object-fit: contain; padding: 3px; box-sizing: border-box;
}
.vm-feed-foto-leeg {
  display: grid; place-items: center; color: var(--vm-grijs); font-size: 15px;
  background: var(--vm-soft);
}

.vm-feed-mid { min-width: 0; flex: 1; }
.vm-feed-naam {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 650; color: var(--vm-inkt); letter-spacing: -.01em;
}
.vm-feed-naam span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vm-feed-onder { margin-top: 3px; font-size: 13px; color: var(--vm-grijs); }

.vm-feed-rechts { text-align: right; flex: none; }
.vm-feed-bedrag { font-size: 15px; font-weight: 650; color: var(--vm-inkt); }
.vm-feed-route { margin-top: 3px; font-size: 12px; color: var(--vm-grijs); }

@media (max-width: 560px) {
  .vm-feed-rij { padding: 12px 14px; gap: 11px; }
  .vm-feed-foto { width: 40px; height: 40px; }
  .vm-feed-naam { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Klant- en artikelcel in tabellen
   Bol-titels zijn lange zoekwoordenrijen. Zonder een maximumbreedte duwen ze
   de tabel uit beeld; met deze cellen blijft alles binnen het scherm en houd je
   de volledige titel als tooltip.
   --------------------------------------------------------------------------- */

.vm-klant { display: flex; align-items: center; gap: 10px; }
.vm-klant > span { display: flex; flex-direction: column; min-width: 0; }
.vm-klant-naam {
  color: var(--vm-inkt); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 165px;
}

.vm-rij-artikel { display: flex; align-items: center; gap: 11px; }
.vm-rij-artikel > span { display: flex; flex-direction: column; min-width: 0; }
.vm-rij-artikel .vm-artikel {
  display: block; max-width: 215px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vm-rij-foto {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  background: #fff; border: 1px solid var(--vm-lijn);
  object-fit: contain; padding: 2px; box-sizing: border-box;
}
.vm-rij-foto-leeg { background: var(--vm-soft); }

@media (max-width: 900px) {
  .vm-rij-artikel .vm-artikel { max-width: 200px; }
  .vm-klant-naam { max-width: 130px; }
}

/* ---------------------------------------------------------------------------
   Factuurdownload in de orderlijst
   --------------------------------------------------------------------------- */

/* Bewust groen en gevuld in plaats van een lichte blauwe pil: hij viel weg
   tussen de andere pillen in dezelfde kolom, terwijl dit het enige is waar je
   op kúnt klikken. Groen zegt bovendien hetzelfde als "gemaakt": hij is er. */
.vm-factuurlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: #fff; background: var(--vm-groen);
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
  transition: filter .14s ease, transform .14s ease;
}
.vm-factuurlink:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vm-factuurlink:active { transform: none; }

/* Naast de PDF-knop: staat hij bij bol? */
.vm-factuurcel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vm-bijbol {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--vm-grijs);
}
.vm-bijbol-goed { color: var(--vm-groen); }
.vm-bijbol-wacht { color: var(--vm-amber); }
.vm-factuurlink svg { flex: none; }

/* ---------------------------------------------------------------------------
   Zakelijke gegevens bij een order
   --------------------------------------------------------------------------- */

.vm-klantbewerk {
  margin-left: 8px; padding: 4px; flex: none;
  border: 0; background: none; cursor: pointer; color: var(--vm-grijs-licht);
  border-radius: 6px; line-height: 0; transition: color .14s, background .14s;
}
.vm-klantbewerk:hover { color: var(--vm-accent); background: var(--vm-accent-zacht); }

.vm-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 20px; background: rgba(15, 22, 40, .38);
}
.vm-venster {
  width: 100%; max-width: 420px; padding: 26px 26px 24px;
  background: var(--vm-kaart); border-radius: var(--vm-radius);
  box-shadow: var(--vm-schaduw-zweef);
}
.vm-venster input[type=text] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  color: var(--vm-inkt); background: var(--vm-veld-bg);
  border: 1px solid var(--vm-lijn); border-radius: 9px; padding: 9px 11px;
}
.vm-venster input[type=text]:focus {
  outline: 0; border-color: var(--vm-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vm-accent) 15%, transparent);
}

/* Bladeren door een lange lijst. */
.vm-bladeren { display: flex; align-items: center; justify-content: center; gap: 14px; }
.vm-bladeren button[disabled] { opacity: .4; cursor: default; }

/* ---------------------------------------------------------------------------
   Tabel wordt kaartjes op een telefoon
   Zes kolommen passen niet op 375 pixels; zijwaarts scrollen door je orders is
   geen doen als je op de inpaktafel even wilt kijken wat er binnen is. Onder de
   700 pixels wordt elke rij daarom een kaartje: naam en bedrag op één regel,
   het artikel eronder, en de pillen onderaan.
   --------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .vm-tabel-kaarten thead { display: none; }
  .vm-tabel-kaarten,
  .vm-tabel-kaarten tbody { display: block; width: 100%; }

  .vm-tabel-kaarten tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px;
    padding: 13px 14px; border-bottom: 1px solid var(--vm-lijn);
  }
  .vm-tabel-kaarten tbody tr:last-child { border-bottom: 0; }
  .vm-tabel-kaarten td { display: block; padding: 0; border: 0; font-size: 13px; }

  /* In de tabel staat het artikel vóór het bedrag; op een kaartje wil je naam
     en bedrag naast elkaar. Met `order` zet je dat recht zonder de tabel zelf
     te herschikken — die moet op een groot scherm gewoon een tabel blijven. */
  .vm-tabel-kaarten td[data-kop="Klant"]   { order: 1; flex: 1 1 auto; min-width: 0; }
  .vm-tabel-kaarten td[data-kop="Bedrag"]  { order: 2; flex: 0 0 auto; margin-left: auto;
                                             font-size: 15.5px; font-weight: 700; }
  .vm-tabel-kaarten td[data-kop="Artikel"] { order: 3; flex: 1 1 100%; }
  .vm-tabel-kaarten td[data-kop="Status"]  { order: 4; flex: 0 0 auto; }
  .vm-tabel-kaarten td[data-kop="Route"]   { order: 5; flex: 0 0 auto; }
  .vm-tabel-kaarten td[data-kop="Factuur"] { order: 6; flex: 0 0 auto; margin-left: auto; }

  /* Op een kaartje is er wél ruimte voor de hele naam en titel. */
  .vm-tabel-kaarten .vm-klant-naam { max-width: none; white-space: normal; }
  .vm-tabel-kaarten .vm-rij-artikel .vm-artikel { max-width: none; white-space: normal; }
  .vm-tabel-kaarten .vm-rij-foto { width: 34px; height: 34px; }

  /* De rijkleur bij "zakelijk, factuur nodig" hoort om het hele kaartje. */
  .vm-tabel-kaarten tr.vm-rij-let { background: rgba(179, 38, 30, .045); }
  .vm-tabel-kaarten tr.vm-rij-let td { background: none; }
  .vm-tabel-kaarten tbody tr:hover td { background: none; }
}

/* Tabellen die niet in kaartjes passen maar wél gestapeld moeten worden:
   elke cel op een eigen regel, met de kolomnaam ervoor. Werkt voor elke tabel
   waarvan de cellen een data-kop hebben. */
@media (max-width: 700px) {
  .vm-tabel-stapel thead { display: none; }
  .vm-tabel-stapel, .vm-tabel-stapel tbody { display: block; width: 100%; }
  .vm-tabel-stapel tbody tr {
    display: block; padding: 12px 14px; border-bottom: 1px solid var(--vm-lijn);
  }
  .vm-tabel-stapel tbody tr:last-child { border-bottom: 0; }
  .vm-tabel-stapel td {
    display: flex; align-items: baseline; gap: 10px;
    padding: 2px 0; border: 0; font-size: 13px;
  }
  .vm-tabel-stapel td::before {
    content: attr(data-kop); flex: 0 0 82px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--vm-grijs);
  }
  /* De eerste cel is de kop van het kaartje; die heeft geen label nodig. */
  .vm-tabel-stapel td:first-child { display: block; margin-bottom: 4px; }
  .vm-tabel-stapel td:first-child::before { display: none; }
  .vm-tabel-stapel tbody tr:hover td { background: none; }
  .vm-tabel-stapel .vm-num { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Omzetgrafiek: staven of lijn
   Het bedrag hoort strak boven zijn eigen staaf of punt te staan, niet op een
   vaste regel bovenaan — anders zweeft het bij een lage staaf ver van waar het
   over gaat. Daarom zit het label ín de staafhouder, absoluut boven de staaf.
   --------------------------------------------------------------------------- */

/* Het bedrag zelf, gedeeld door beide weergaven. */
.vm-punt-bedrag {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 5px; font-size: 11px; font-weight: 700; color: var(--vm-inkt);
  white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  pointer-events: none;
}
.vm-punt-bedrag-stil { opacity: 0; transition: opacity .12s ease; }
.vm-staaf-kolom:hover .vm-punt-bedrag-stil,
.vm-lijn-punt:hover .vm-punt-bedrag-stil { opacity: 1; color: var(--vm-grijs); }

/* --- Staven --- */
.vm-staven { display: flex; align-items: stretch; gap: 3px; height: 100%; min-height: 170px; }
.vm-staaf-kolom { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* De ruimte bovenin is voor de bedragen; percentagehoogtes rekenen daaronder. */
.vm-staaf-baan {
  flex: 1 1 auto; width: 100%; box-sizing: border-box; padding-top: 22px;
  display: flex; align-items: flex-end; justify-content: center;
}
.vm-staaf-houder { position: relative; width: 100%; display: flex; justify-content: center; }
.vm-staaf {
  width: 62%; max-width: 46px; height: 100%; border-radius: 5px 5px 2px 2px;
  background: var(--vm-accent); transition: height .25s ease;
}
.vm-staaf-nu { background: var(--vm-groen); }
.vm-staaf-leeg { background: var(--vm-lijn); }
.vm-staaf-datum { height: 16px; margin-top: 6px; font-size: 10.5px; color: var(--vm-grijs); white-space: nowrap; }

/* --- Lijn --- */
.vm-lijn { display: flex; flex-direction: column; height: 100%; min-height: 170px; }
.vm-lijn-vlak { position: relative; flex: 1 1 auto; margin: 22px 10px 0; }
.vm-lijn-vlak svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vm-lijn-punt { position: absolute; width: 0; height: 0; }
.vm-lijn-stip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vm-kaart); border: 2.5px solid var(--vm-accent);
  transition: transform .12s ease;
}
.vm-lijn-punt:hover .vm-lijn-stip { transform: translate(-50%, -50%) scale(1.35); }
/* Een onzichtbaar vlakje eromheen, anders moet je precies de stip raken. */
.vm-lijn-punt::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 30px;
}
.vm-lijn-datums { display: flex; margin: 8px 10px 0; }
.vm-lijn-datums .vm-staaf-datum { flex: 1 1 0; min-width: 0; margin-top: 0; text-align: center; overflow: hidden; }

/* --- Het knopje om te wisselen --- */
.vm-dash-groot { position: relative; }
.vm-grafiekknop {
  position: absolute; top: 16px; right: 16px; display: flex; gap: 2px; padding: 2px;
  background: var(--vm-soft); border-radius: 999px;
}
.vm-grafiekknop button {
  display: grid; place-items: center; width: 28px; height: 24px; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--vm-grijs-licht);
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.vm-grafiekknop button:hover { color: var(--vm-grijs); }
.vm-grafiekknop button.vm-grafiek-aan { background: var(--vm-kaart); color: var(--vm-accent); box-shadow: var(--vm-schaduw); }

@media (max-width: 700px) {
  .vm-punt-bedrag { font-size: 9.5px; }
  .vm-staaf-datum { font-size: 9px; }
}

/* ---------------------------------------------------------------------------
   Meldingenbalk
   Eén regel die zegt hoeveel er open staat. Klap je hem uit, dan verschijnen
   de kaarten die hier eerst allemaal los stonden.
   --------------------------------------------------------------------------- */

.vm-meldingen { margin-bottom: 20px; }

.vm-meldingen-balk {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 18px; cursor: pointer; list-style: none;
  background: var(--vm-kaart); border-radius: var(--vm-radius);
  box-shadow: var(--vm-schaduw);
  font-size: 14px; font-weight: 600; color: var(--vm-inkt);
  transition: background .14s ease;
}
.vm-meldingen-balk::-webkit-details-marker { display: none; }
.vm-meldingen-balk:hover { background: var(--vm-soft); }

.vm-meldingen-stip { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--vm-lijn); }
.vm-meldingen[data-rang="hoog"]   .vm-meldingen-stip { background: var(--vm-rood); }
.vm-meldingen[data-rang="midden"] .vm-meldingen-stip { background: var(--vm-amber); }
.vm-meldingen[data-rang="leeg"]   .vm-meldingen-stip { background: var(--vm-groen); }

.vm-meldingen-tekst { flex: 1; min-width: 0; }
.vm-meldingen-pijl { flex: none; color: var(--vm-grijs); transition: transform .18s ease; }
.vm-meldingen[open] .vm-meldingen-pijl { transform: rotate(180deg); }
.vm-meldingen[open] .vm-meldingen-balk {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.vm-meldingen > .vm-signalen { margin-top: 14px; }

/* ---------------------------------------------------------------------------
   Als app op het beginscherm
   Met viewport-fit=cover loopt de pagina door tot onder de notch en de
   thuisbalk. Zonder deze marges valt de zijbalk deels achter de camera.
   --------------------------------------------------------------------------- */

.vm-schil {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.vm-inhoud { padding-bottom: env(safe-area-inset-bottom); }
.vm-zijbalk { padding-top: env(safe-area-inset-top); }

@media (display-mode: standalone) {
  /* In de app is er geen browserbalk die de bovenrand vult. */
  .vm-inhoud { padding-top: env(safe-area-inset-top); }
}