/* ===== KMS — Global Stylesheet ===== */

[hidden] { display: none !important; }

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

html { font-size: 16px; }

/* Theme fade — alle elementen transitioneren mee bij thema-wissel */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color .3s ease,
    color            .3s ease,
    border-color     .3s ease,
    box-shadow       .3s ease !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1; }
body > .admin-wrap { flex: 1; }

a { color: var(--kms-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }

/* ===== FRONTEND LAYOUT ===== */
.kms-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---- Topbar (UserHeader) ---- */
.kms-topbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--kms-topbar-height);
  background: var(--kms-topbar-bg, var(--bg-card));
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
}
body.topbar-dark .kms-topbar { border-bottom-color: rgba(255,255,255,0.12); }
body.topbar-dark .kms-brand-name { color: #fff; }
body.topbar-dark .kms-brand-sub  { color: rgba(255,255,255,0.7); }
body.topbar-dark .kms-nav a { color: rgba(255,255,255,0.85); }
body.topbar-dark .kms-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
body.topbar-dark .kms-nav a.active { color: #fff; border-bottom-color: #fff; background: transparent; }
body.topbar-dark .kms-nav .mega-menu-item { color: var(--text-primary); }
body.topbar-dark .kms-nav .mega-menu-item:hover { background: var(--bg-subtle); color: var(--text-primary); }
body.topbar-dark .account-dropdown-trigger {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #fff;
}
body.topbar-dark .account-dropdown-trigger:hover {
  border-color: rgba(255,255,255,0.4); box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
body.topbar-dark .account-dropdown-chevron { color: rgba(255,255,255,0.7); }
body.topbar-dark .company-switcher-trigger {
  background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.2) !important; color: #fff;
}
body.topbar-dark .kms-hamburger-btn { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); }
body.topbar-dark .kms-hamburger-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
/* Dark theme: negeer de bedrijfskleur en gebruik de thema achtergrond */
[data-theme="dark-v2"] body.shop-theme { --kms-topbar-bg: var(--bg-card); }
[data-theme="dark-v2"] body.topbar-dark .kms-topbar { border-bottom-color: var(--border-color); }
[data-theme="dark-v2"] body.topbar-dark .kms-brand-name { color: var(--text-heading); }
[data-theme="dark-v2"] body.topbar-dark .kms-brand-sub  { color: var(--text-muted); }
[data-theme="dark-v2"] body.topbar-dark .kms-nav a { color: var(--text-secondary); }
[data-theme="dark-v2"] body.topbar-dark .kms-nav a:hover { background: var(--bg-subtle); color: var(--text-primary); }
[data-theme="dark-v2"] body.topbar-dark .kms-nav a.active { color: var(--kms-primary); border-bottom-color: var(--kms-primary); background: transparent; }
[data-theme="dark-v2"] body.topbar-dark .account-dropdown-trigger { background: var(--bg-subtle); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark-v2"] body.topbar-dark .account-dropdown-trigger:hover { border-color: var(--border-input); box-shadow: 0 0 0 3px rgba(255,255,255,0.06); }
[data-theme="dark-v2"] body.topbar-dark .account-dropdown-chevron { color: var(--text-muted); }
[data-theme="dark-v2"] body.topbar-dark .company-switcher-trigger { background: var(--bg-subtle) !important; border-color: var(--border-color) !important; color: var(--text-primary); }
[data-theme="dark-v2"] body.topbar-dark .kms-hamburger-btn { border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark-v2"] body.topbar-dark .kms-hamburger-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.kms-topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 16px;
}
.kms-brand {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none;
}
.kms-brand-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--kms-primary); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.kms-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.kms-brand-logo-placeholder {
  font-size: 16px; font-weight: 700; color: #fff;
}
.kms-brand-full-logo { max-height: 36px; width: auto; display: block; }
.kms-brand-text { line-height: 1.2; }
.kms-brand-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.kms-brand-sub  { font-size: 11px; color: var(--text-muted); }

.kms-nav { display: flex; align-items: stretch; flex: 1; }
.kms-nav > a, .kms-nav > .has-mega-menu { display: flex; align-items: stretch; }
.kms-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; transition: color .15s, border-color .15s, background .15s;
}
.kms-nav a:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.kms-nav a.active { color: var(--kms-primary); font-weight: 600; border-bottom-color: var(--kms-primary); background: transparent; }

/* ---- Mega-menu (catalogus hover) ---- */
.has-mega-menu { position: relative; }
.mega-menu {
  position: absolute; top: 100%; left: 0;
  min-width: 260px; z-index: 300;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg); box-shadow: var(--kms-shadow-lg);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events: none;
  /* EEN DICHT MENU MOET NUL HOOG ZIJN. `visibility:hidden` haalt het wel van het
     scherm maar niet uit de scrollable overflow van de pagina: het menu hangt
     absoluut onder de topbar, dus op een korte pagina rekte het de scrollhoogte
     op tot honderden pixels ónder de footer. Dat leest als een lege witruimte
     waar niets te inspecteren valt, want het element is onzichtbaar. */
  max-height: 0; overflow: hidden;
  /* padding + border tellen bij box-sizing:border-box óók mee in max-height:0,
     dus die er ook af — anders blijft er 18px staan. */
  padding-top: 0; padding-bottom: 0; border-width: 0;
  /* Past het menu niet in beeld, dan scrollt het in zichzelf in plaats van
     onder de vouw te verdwijnen. */
  overscroll-behavior: contain;
}
.mega-menu.open {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all;
  max-height: calc(100vh - var(--kms-topbar-height) - var(--bars-h, 0px) - 24px);
  overflow-y: auto;
  padding-top: 8px; padding-bottom: 8px; border-width: 1px;
}
.mega-menu-item {
  display: flex; align-items: center;
  padding: 10px 16px; border-radius: var(--kms-radius);
  font-size: 14px; color: var(--text-primary); text-decoration: none;
  transition: background .15s;
}
.mega-menu-item:hover { background: var(--bg-subtle); text-decoration: none; }
.mega-menu-divider { height: 1px; background: var(--border-color); margin: 6px 8px; }

/* ---- Account dropdown ---- */
.account-dropdown { position: relative; }
.account-dropdown-trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border-color); border-radius: 24px;
  background: var(--bg-card); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.account-dropdown-trigger:hover { border-color: var(--kms-primary); box-shadow: 0 0 0 3px var(--kms-primary-light); }
.account-dropdown-naam { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown-chevron { color: var(--text-muted); transition: transform .2s; }
.account-dropdown.open .account-dropdown-chevron { transform: rotate(180deg); }
.account-dropdown-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; z-index: 400;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg); box-shadow: var(--kms-shadow-lg);
  padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  /* Nul hoog als hij dicht is — zie de toelichting bij .mega-menu. */
  max-height: 0; overflow: hidden;
  padding-top: 0; padding-bottom: 0; border-width: 0;
}
.account-dropdown.open .account-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  max-height: none; overflow: visible;
  padding-top: 6px; padding-bottom: 6px; border-width: 1px;
}
.account-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--kms-radius);
  font-size: 13px; color: var(--text-primary); text-decoration: none;
  transition: background .15s; cursor: pointer;
  border: none; background: none; width: 100%; text-align: left;
}
.account-dropdown-item:hover { background: var(--bg-subtle); text-decoration: none; }
.account-dropdown-item svg { color: var(--text-muted); flex-shrink: 0; }
.account-dropdown-item-danger { color: var(--pill-rose-text); }
.account-dropdown-item-danger svg { color: var(--pill-rose-text); }
.account-dropdown-item-danger:hover { background: var(--pill-rose-bg); }
.account-dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
.account-dropdown-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; font-size: 12px; color: var(--text-muted);
}

.kms-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ===== MOBILE HAMBURGER + NAV PANEL ===== */
.kms-hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-color); border-radius: var(--kms-radius);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  flex-shrink: 0;
}
.kms-hamburger-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.kms-mobile-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 699;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.kms-mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.kms-mobile-nav-panel {
  position: fixed; top: 0; right: 0;
  width: min(320px, 88vw); height: 100vh;
  background: var(--bg-card); z-index: 700;
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.18); overflow-y: auto;
}
.kms-mobile-nav-panel.open { transform: translateX(0); }
.kms-mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}
.kms-mobile-nav-title { font-size: 15px; font-weight: 600; color: var(--text-heading); }
.kms-mobile-nav-body { flex: 1; padding: 8px; }
.kms-mobile-nav-item {
  display: block; padding: 12px 14px; border-radius: var(--kms-radius);
  font-size: 14px; color: var(--text-primary); text-decoration: none;
  transition: background .15s;
}
.kms-mobile-nav-item:hover { background: var(--bg-subtle); text-decoration: none; }
.kms-mobile-nav-item.active { color: var(--kms-primary); font-weight: 600; background: var(--kms-primary-light); }
.kms-mobile-nav-item-danger { color: var(--pill-rose-text); }
.kms-mobile-nav-item-danger:hover { background: var(--pill-rose-bg); }
.kms-mobile-nav-footer {
  padding: 12px 16px; border-top: 1px solid var(--border-color);
  display: flex; flex-direction: column; gap: 8px;
}
.kms-mobile-nav-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}

@media (max-width: 768px) {
  .kms-nav { display: none; }
  .account-dropdown { display: none; }
  .kms-hamburger-btn { display: flex; }
  .kms-topbar-desktop-only { display: none !important; }
}

/* ---- Thema-schakelaar (gesegmenteerd) ---- */
.theme-switcher {
  display: flex; align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--bg-subtle);
  padding: 2px;
  gap: 2px;
}
.theme-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 16px;
  background: transparent; border: none;
  color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s;
  flex-shrink: 0;
}
.theme-btn-text { width: auto; padding: 0 12px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.theme-btn:hover { color: var(--text-primary); }
.theme-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ---- Points chip ---- */
.points-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--kms-radius-full);
  border: 1px solid var(--kms-accent-border);
  background: var(--kms-accent-light);
  font-size: 13px; font-weight: 600; color: var(--kms-accent);
  white-space: nowrap;
}
.points-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--kms-radius);
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-decoration: none; cursor: pointer; line-height: 1;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }
.btn-icon { padding: 7px; }

.btn-primary {
  background: var(--kms-primary); color: #fff; border-color: var(--kms-primary);
  box-shadow: var(--kms-shadow-sm);
}
.btn-primary:hover { background: var(--kms-primary-hover); border-color: var(--kms-primary-hover); text-decoration: none; }

.btn-outline {
  background: var(--bg-card); color: var(--text-primary);
  border-color: var(--border-color); box-shadow: var(--kms-shadow-sm);
}
.btn-outline:hover { background: var(--bg-subtle); text-decoration: none; }
.btn-outline:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Zelfde knop als .btn-secondary in OMS: doorzichtig met een rand, tekst in de
   secundaire kleur. Voor een actie die naast de inhoud staat en er niet
   bovenuit hoort te steken — de knop "Bewerken" in de kop van een detailkaart. */
.btn-secondary {
  background: transparent; color: var(--text-secondary);
  border-color: var(--border-color);
}
.btn-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); text-decoration: none; }

.btn-ghost {
  background: transparent; color: var(--text-secondary); border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }

.btn-danger {
  background: var(--color-danger); color: #fff; border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger-hover); text-decoration: none; }

.btn-accent {
  background: var(--kms-accent); color: #fff; border-color: var(--kms-accent);
  box-shadow: var(--kms-shadow-sm);
}
.btn-accent:hover { background: color-mix(in srgb, var(--kms-accent) 82%, black); border-color: color-mix(in srgb, var(--kms-accent) 82%, black); text-decoration: none; }
.btn-accent:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-accent-full { width: 100%; justify-content: center; padding: 12px; font-size: 15px; font-weight: 600; }

/* ---- Cards ---- */
.card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg); padding: 20px;
  box-shadow: var(--kms-shadow-sm);
}
.card-sm { padding: 16px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; }
.card-sub   { font-size: 12px; color: var(--text-muted); }

/* ---- Form inputs ---- */
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 7px 12px;
  border: 1px solid var(--border-input); border-radius: var(--kms-radius);
  background: var(--bg-input); color: var(--text-primary);
  font-size: 13px; font-family: inherit; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--kms-primary); box-shadow: 0 0 0 2px var(--kms-primary-light);
}
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.form-group { margin-bottom: 16px; }

/* ---- Search ---- */
.search-wrap { position: relative; }
.search-wrap .form-input { padding-left: 34px; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; width: 14px; height: 14px;
}

/* ---- Password toggle (oogje) — auto-toegepast door js/app.js op alle input[type=password] ---- */
.password-wrap { position: relative; }
.password-wrap .form-input { padding-right: 38px; }
.password-toggle-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0;
}
.password-toggle-btn:hover { color: var(--text-primary); }
.password-toggle-btn svg { width: 17px; height: 17px; }

/* ---- Status pills ---- */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--kms-radius); font-size: 11px; font-weight: 600; border: 1px solid;
}
.pill-amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text);  border-color: var(--pill-amber-border);  }
.pill-blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text);   border-color: var(--pill-blue-border);   }
.pill-green  { background: var(--pill-green-bg);  color: var(--pill-green-text);  border-color: var(--pill-green-border);  }
.pill-rose   { background: var(--pill-rose-bg);   color: var(--pill-rose-text);   border-color: var(--pill-rose-border);   }
.pill-purple { background: var(--pill-purple-bg); color: var(--pill-purple-text); border-color: var(--pill-purple-border); }
.pill-gold   { background: color-mix(in srgb, var(--kms-accent) 16%, transparent); color: var(--kms-accent); border-color: color-mix(in srgb, var(--kms-accent) 45%, transparent); gap: 4px; }
.pill-grey   { background: var(--bg-subtle);      color: var(--text-muted);       border-color: var(--border-color);       }

/* Typekleuren bewust buiten het statuspalet: een typepill mag niet als status gelezen worden. */
.pill-type    { background: color-mix(in srgb, var(--pill-type) 14%, transparent); color: var(--pill-type); border-color: color-mix(in srgb, var(--pill-type) 40%, transparent); }
.pill-type-voorraad     { --pill-type: #0891b2; }
.pill-type-uitvoorraad  { --pill-type: #c026d3; }
.pill-type-locatie      { --pill-type: #ea580c; }
.pill-type-toewijzing   { --pill-type: var(--kms-accent); }
.pill-type-namens       { --pill-type: #6366f1; }

/* ---- Chip selector (maat / kleur) ---- */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 12px; border-radius: var(--kms-radius);
  border: 1px solid var(--border-color); background: var(--bg-card);
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer; transition: all .15s; user-select: none;
}
.chip:hover { border-color: var(--kms-primary); color: var(--kms-primary); }
.chip.active {
  background: var(--kms-primary); color: #fff; border-color: var(--kms-primary);
}
.chip.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Kruisje in een chip die iets voorstelt wat je weer weg kunt halen (een gekozen
   product in een toewijzingsregel). Bewust een <button> en geen span: het is een
   actie en hoort met tab bereikbaar te zijn. */
.chip-x {
  border: 0; background: none; padding: 0; margin-left: 2px;
  font-size: 15px; line-height: 1; color: var(--text-muted);
  cursor: pointer; transition: color .15s;
}
.chip-x:hover { color: var(--color-danger); }

/* Een chip die alleen iets TOONT — geen keuze, dus geen hover-cue. */
.chip-group .chip:has(.chip-x):hover,
.chip.is-statisch:hover { border-color: var(--border-color); color: var(--text-secondary); }

/* ---- Color chip (legacy) ---- */
.color-chip {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border-color); cursor: pointer; transition: all .15s;
}
.color-chip:hover  { transform: scale(1.15); border-color: var(--kms-primary); }
.color-chip.active { border-color: var(--kms-primary); outline: 2px solid var(--kms-primary); outline-offset: 2px; }

/* ---- Maten: over meerdere rijen ---- */
/* Niet nowrap: een product met 20 maten maakte de kolom anders zo breed dat de
   productafbeeldingen ernaast weggedrukt werden. */
.chip-group-maten {
  flex-wrap: wrap;
  padding-bottom: 2px;
}
.chip-maat { padding: 4px 10px; font-size: 12px; white-space: nowrap; }

/* ---- Kleur swatch (blokje + naam) ---- */
/* ── Kleurswatch: vlak met de naam eronder ──
   Eén maatvoering voor de hele app (productpagina, voorraadcorrectie,
   toewijzing). Drie plekken zetten hiervoor elk hun eigen breedte en
   witruimte-regels inline, met als gevolg dat dezelfde kleurkeuze er per scherm
   anders uitzag.

   De NAAM BREEKT AF over meerdere regels en wordt niet afgekapt: met een vaste
   breedte plus ellipsis werd "Donkerblauw" een streepje, en twee blauwtinten
   zijn dan niet meer uit elkaar te houden. De breedte staat op .kleur-swatch, zodat
   het vlak en de naam altijd even breed zijn en een rij swatches uitlijnt.

   Afwijken van de maat gaat via --swatch-maat op de groep — niet met een inline
   width op het vlak, want dan loopt de naam eronder er niet meer mee in de pas. */
.kleur-swatch-group {
  display: flex; flex-wrap: wrap; gap: 8px;
  --swatch-maat: 40px;
}
.kleur-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; padding: 4px; border-radius: var(--kms-radius);
  border: 2px solid transparent; transition: border-color .15s;
  width: calc(var(--swatch-maat) + 16px);
}
.kleur-swatch:hover { border-color: var(--border-color); }
.kleur-swatch.active { border-color: var(--kms-primary); }
.kleur-swatch-blok {
  width: var(--swatch-maat); height: var(--swatch-maat);
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.15);
  background: var(--bg-muted);
  background-clip: padding-box; /* gradient binnen de rand houden — zie .kleur-dot */
  flex-shrink: 0;
}
.kleur-swatch-naam {
  font-size: 10px; font-weight: 500; color: var(--text-secondary);
  text-align: center; width: 100%;
  white-space: normal; overflow-wrap: anywhere;
  line-height: 1.2;
}

/* ---- Badge (categorie) ---- */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--kms-radius-sm); font-size: 11px; font-weight: 600;
  border: 1px solid;
}
.badge-outline { background: transparent; border-color: var(--border-color); color: var(--text-secondary); }
.badge-primary { background: var(--kms-primary-light); border-color: transparent; color: var(--kms-primary); }

/* ===== CATALOG ===== */
.catalog-kop { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.catalog-titel { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: var(--text-heading); }
.catalog-sub { font-size: 13px; color: var(--text-muted); }

.catalog-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; padding-bottom: 40px; align-items: start; }
.catalog-main { min-width: 0; }

/* Nooit hoger dan het venster: anders kom je pas bij de onderste filters als je
   de hele productlijst voorbij bent gescrold. De rail scrolt dan zelf. */
.filter-rail {
  position: sticky; top: calc(var(--kms-topbar-height) + 16px);
  max-height: calc(100vh - var(--kms-topbar-height) - 32px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-xl); box-shadow: var(--kms-shadow-sm);
}
.filter-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.filter-panel + .filter-panel { border-top: 1px solid var(--border-color); }
.filter-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.filter-rail .search-wrap .form-input { height: 38px; background: var(--bg-page); }
.filter-rail .search-wrap .form-input:focus { background: var(--bg-card); }
.filter-rail-voet { position: sticky; bottom: 0; padding: 12px 18px 14px; background: var(--bg-card); border-top: 1px solid var(--border-color); }

.filter-option-lijst { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.filter-option {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 5px 8px;
  border: 0; border-radius: var(--kms-radius); background: transparent;
  color: var(--text-secondary); font-family: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; transition: background .12s, color .12s;
}
.filter-option:hover { color: var(--text-primary); background: var(--bg-subtle); }
.filter-option.active { color: var(--kms-primary); font-weight: 600; background: var(--kms-primary-light); }
.filter-count { margin-left: auto; flex-shrink: 0; font-size: 11.5px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.filter-option.active .filter-count { color: var(--kms-primary); }

/* ---- Categorieboom in de filterrail ---- */
.filter-option .cat-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; padding: 0;
  border: none; background: none; border-radius: 4px;
  color: var(--text-muted); cursor: pointer; transition: transform .15s, background .12s, color .12s;
}
.cat-toggle:hover { background: var(--bg-subtle); color: var(--text-primary); }
.cat-groep.open > .filter-option .cat-toggle { transform: rotate(90deg); }
/* Categorieën zonder subs lijnen uit met de rest, anders springt de tekst heen en weer. */
.cat-toggle-spacer { width: 16px; flex-shrink: 0; }
.cat-subs { display: flex; flex-direction: column; gap: 2px; padding-left: 24px; }
.filter-option.cat-sub { font-size: 13px; }

/* De catalogusfilter-swatch. Eigen klasse, want .kleur-dot is de (ronde, 28px)
   swatch van de kleur-picker in de admin — die twee liepen elkaar in de weg. */
.filter-kleur-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border-color);
  /* Zonder padding-box loopt een meerkleurige gradient onder de rand door en
     komt de kleurscheiding tot buiten de cirkel uit. */
  background-clip: padding-box;
  display: block;
}

.filter-maten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.filter-maten .toon-meer-btn { grid-column: 1 / -1; justify-self: start; }
.filter-maat {
  height: 34px; padding: 0 4px; border-radius: var(--kms-radius); border: 1px solid var(--border-color);
  background: var(--bg-card); color: var(--text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-maat:hover { border-color: var(--kms-primary); }
.filter-maat.active { background: var(--kms-primary); border-color: var(--kms-primary); color: #fff; }

.filter-merken { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-merk {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: var(--kms-radius-full); border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-merk:hover { border-color: var(--kms-primary); color: var(--text-primary); }
.filter-merk.active { background: var(--kms-primary); border-color: var(--kms-primary); color: #fff; }
.chip-count { font-size: 11px; font-weight: 500; opacity: .6; font-variant-numeric: tabular-nums; }

.filter-rail input[type=range] { accent-color: var(--kms-accent); }

/* ---- Bedieningsrij boven het raster ---- */
.products-header { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; min-height: 36px; margin-bottom: 16px; }
.products-count { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.products-count strong { color: var(--text-primary); font-weight: 600; }
.catalog-actief { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-actief:empty { display: none; }
.catalog-actief-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 11px;
  border: 0; border-radius: var(--kms-radius-full); background: var(--kms-primary-light); color: var(--kms-primary);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.catalog-actief-chip:hover { box-shadow: inset 0 0 0 1px var(--kms-primary); }
.catalog-sorteer { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.catalog-sorteer .form-select { width: auto; height: 36px; font-size: 13px; }

#catalogGrid { transition: opacity .15s ease; }
#catalogGrid.is-laden { opacity: .35; pointer-events: none; }

.catalog-leeg {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 56px 20px; border: 1px dashed var(--border-color); border-radius: var(--kms-radius-xl);
  color: var(--text-muted); font-size: 13px;
}
.catalog-leeg-titel { font-size: 15px; font-weight: 600; color: var(--text-heading); }
.catalog-leeg .btn { margin-top: 6px; }

/* ---- Product grid + card (ook ?p=pakketten) ---- */
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.product-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-xl); overflow: hidden;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover {
  transform: translateY(-2px); box-shadow: var(--kms-shadow-md); text-decoration: none;
  border-color: color-mix(in srgb, var(--kms-primary) 35%, var(--border-color));
}
.product-card-img { position: relative; aspect-ratio: 1; max-width: 100%; overflow: hidden; background: var(--bg-subtle); }
/* contain, geen cover: cover snijdt mouwen en kragen weg. */
.product-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; box-sizing: border-box; transition: transform .25s ease; }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-geen-img { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); }
.product-card-badge { position: absolute; top: 10px; left: 10px; }
.product-card-cat {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px);
  padding: 3px 9px; border-radius: var(--kms-radius-full);
  background: var(--bg-card); color: var(--text-secondary); box-shadow: var(--kms-shadow-sm);
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card-vorige {
  position: absolute; left: 10px; bottom: 10px;
  padding: 3px 9px; border-radius: var(--kms-radius-full);
  background: var(--pill-amber-bg); border: 1px solid var(--pill-amber-border); color: var(--pill-amber-text);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.product-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.product-card-eyebrow { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 11px; }
.product-card-merk { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kms-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card-sku { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-card-titel {
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-heading);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-kleur { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.product-card-kleurnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card-bollen { display: inline-flex; gap: 4px; flex-shrink: 0; }
.product-card-bol {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border-color); background-clip: padding-box;
}
.product-card-bol.is-deze { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--kms-primary); }
.product-card-voet { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.product-card-prijs { font-size: 16px; font-weight: 700; color: var(--kms-accent); font-variant-numeric: tabular-nums; }
.product-card-maten { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* Oude kaartopbouw, nog in gebruik op ?p=pakketten */
.product-card-name { font-size: 15px; font-weight: 600; color: var(--text-heading); line-height: 1.3; }
.product-card-price { margin-top: auto; }

@media (max-width: 520px) {
  .catalog-titel { font-size: 25px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card-img img { padding: 10px; }
  .product-card-body { padding: 12px; }
  .product-card-titel { font-size: 13.5px; }
  .product-card-prijs { font-size: 14.5px; }
  .product-card-maten, .product-card-sku { display: none; }
  .catalog-sorteer > span { display: none; }
}

/* ===== MOBILE CATALOGUS FILTER ===== */
.filter-mobile-header { display: none; align-items: center; gap: 10px; margin-bottom: 12px; }
.filter-mobile-header .search-wrap { flex: 1; min-width: 0; }
.catalog-filter-knop {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 38px; padding: 0 14px;
  border-radius: var(--kms-radius); border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.catalog-filter-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--kms-accent); }
.filter-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 599;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  pointer-events: none;
}
.filter-drawer-overlay.open { opacity: 1; visibility: visible; pointer-events: all; }
.filter-mobile-close-row {
  display: none;
  position: sticky; top: 0; background: var(--bg-card); z-index: 2;
  padding: 14px 16px; border-bottom: 1px solid var(--border-color);
  align-items: center; justify-content: space-between;
}
.filter-mobile-title { font-size: 14px; font-weight: 600; color: var(--text-heading); }

@media (max-width: 900px) {
  .catalog-kop { margin: 20px 0 14px; }
  .filter-mobile-header { display: flex; }
  .filter-mobile-close-row { display: flex; }
  .catalog-layout { grid-template-columns: 1fr; gap: 0; }
  .catalog-layout > aside {
    position: fixed; left: 0; top: 0;
    width: min(320px, 92vw); height: 100vh; height: 100dvh;
    z-index: 600; overflow-y: auto;
    background: var(--bg-card);
    transform: translateX(-100%); transition: transform .3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .catalog-layout > aside.filter-drawer-open { transform: translateX(0); }
  /* In de lade scrolt de lade zelf; de rail is daar gewoon een kolom. */
  .catalog-layout > aside .filter-rail {
    position: static; max-height: none; overflow: visible;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .filter-maten { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

/* ===== PRODUCT DETAIL ===== */
/* Breder dan de rest van de webshop; de topbalk gaat mee zodat de randen blijven uitlijnen. */
.kms-wrap:has(.product-detail),
body:has(.product-detail) .kms-topbar-inner { max-width: 1480px; padding-left: 32px; padding-right: 32px; }
@media (max-width: 768px) {
  .kms-wrap:has(.product-detail),
  body:has(.product-detail) .kms-topbar-inner { padding-left: 16px; padding-right: 16px; }
}
.product-terug {
  display: inline-flex; align-items: center; gap: 6px; margin: 20px 0 4px;
  font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none;
  transition: color .15s;
}
.product-terug:hover { color: var(--text-primary); text-decoration: none; }

.product-detail {
  display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: 64px; padding: 20px 0 8px; align-items: start;
}
/* Sticky alleen naast elkaar: gestapeld zou de foto over de keuzes heen schuiven. */
.product-galerij {
  position: sticky; top: calc(var(--kms-topbar-height) + 20px);
  display: flex; gap: 14px; align-items: flex-start;
}
/* Ook begrensd op vensterhoogte: anders valt de onderkant van de foto uit beeld. */
.product-galerij .product-carousel {
  flex: 1; min-width: 0;
  max-width: calc(100vh - var(--kms-topbar-height) - 80px);
}

.product-thumbs { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.product-thumb {
  width: 72px; height: 72px; border-radius: var(--kms-radius-lg); overflow: hidden;
  border: 1px solid var(--border-color); cursor: pointer; background: var(--bg-card);
  padding: 6px; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.product-thumb:hover { border-color: var(--kms-primary); }
.product-thumb.active { border-color: var(--kms-primary); box-shadow: 0 0 0 1px var(--kms-primary); }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* min-width:0 → brede inhoud (chips, lange SKU) mag de gridkolom niet oprekken */
.product-info { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

.product-kop { display: flex; flex-direction: column; gap: 10px; }
.product-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.product-merk { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kms-primary); }
[data-theme="dark-v2"] .product-merk { color: var(--text-primary); }
.product-eyebrow-rest { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.product-titel-rij { display: flex; align-items: flex-start; gap: 12px; }
.product-titel-rij .btn { flex-shrink: 0; margin-top: 6px; }
.product-title {
  flex: 1; margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.025em;
  color: var(--text-heading); line-height: 1.12; text-wrap: balance;
}
.product-prijs { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.product-prijs-bedrag { font-size: 26px; font-weight: 700; color: var(--kms-accent); font-variant-numeric: tabular-nums; }
.product-prijs-euro { font-size: 13px; color: var(--text-muted); }
.product-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; max-width: 62ch; }

.product-bewerkingen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.product-bewerkingen-label { font-size: 12px; color: var(--text-muted); }
.product-bewerking-pil {
  display: inline-flex; padding: 3px 10px; border-radius: var(--kms-radius-full);
  background: var(--kms-primary-light); color: var(--kms-primary);
  font-size: 12px; font-weight: 600;
}
[data-theme="dark-v2"] .product-bewerking-pil { background: var(--bg-subtle); color: var(--text-primary); }

.product-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; }

/* ── Bestellen in stappen ── */
.product-stappen { display: flex; flex-direction: column; gap: 24px; }
.product-stap { display: flex; flex-direction: column; gap: 12px; }
.product-stap-kop { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-heading); }
.product-stap-nr {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-color);
  transition: background .2s, color .2s, border-color .2s;
}
.product-stap-nr.is-klaar { background: var(--kms-primary); border-color: var(--kms-primary); color: #fff; }
.product-stap-body { padding-left: 34px; display: flex; flex-direction: column; gap: 10px; }

.kleur-pil-groep { display: flex; flex-wrap: wrap; gap: 8px; }
.kleur-pil {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px;
  border-radius: var(--kms-radius-full); border: 1px solid var(--border-color);
  background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.kleur-pil:hover { border-color: var(--kms-primary); }
.kleur-pil.active { border-color: var(--kms-primary); box-shadow: inset 0 0 0 1px var(--kms-primary); font-weight: 600; }
.kleur-pil-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.15); background: var(--bg-muted);
  background-clip: padding-box; /* gradient binnen de cirkel houden — zie .kleur-dot */
}

.maat-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.maat-raster .chip-maat { height: 46px; padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); font-family: inherit; }
.maat-raster .chip-maat.active { color: #fff; }

.product-koop-rij { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.product-koop-rij .btn-accent-full { flex: 1; width: auto; min-width: 200px; padding: 14px 18px; }
.product-koop-rij .btn-accent-full.is-onvolledig { background: var(--bg-subtle); border-color: var(--border-color); color: var(--text-muted); box-shadow: none; }
.product-koop-rij .qty-stepper button { width: 44px; }
.product-koop-rij .qty-stepper input[type=number] { width: 48px; font-size: 15px; }
.product-koop-hint:empty { display: none; }
.product-koop-hint { font-size: 12px; color: var(--text-muted); }

.product-saldo-kaart:empty { display: none; }
.product-saldo-kaart {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg);
  background: var(--bg-card);
}
.saldo-kaart-regel { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.saldo-kaart-regel strong { color: var(--text-primary); }
.saldo-balk { display: flex; height: 8px; border-radius: var(--kms-radius-full); background: var(--bg-subtle); overflow: hidden; }
.saldo-balk span { display: block; height: 100%; transition: width .3s ease; }
.saldo-balk-rest { background: var(--kms-accent); border-radius: inherit; }

/* Fade bij wisselen enkel/bulk-bestelmodus */
.product-mode-fade { transition: opacity .2s ease; }

.product-bulk-hint {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border: 1px dashed var(--border-input); border-radius: var(--kms-radius-lg);
  background: var(--bg-card); color: var(--text-secondary); line-height: 1.5;
}
.product-bulk-hint > span:first-child { font-size: 18px; line-height: 1.2; color: var(--kms-primary); }

/* ── Productinformatie in tabbladen ── */
.product-tabs {
  margin: 48px 0 40px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--kms-radius-xl); overflow: hidden;
}
.product-tabs-balk { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--border-color); overflow-x: auto; }
.product-tab {
  border: 0; background: transparent; padding: 16px 14px 14px; margin-bottom: -1px;
  font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.product-tab:hover { color: var(--text-primary); }
.product-tab.is-actief { color: var(--text-heading); font-weight: 600; border-bottom-color: var(--kms-primary); }
.product-tab-paneel { padding: 26px 28px; }
.product-tab-tekst { max-width: 72ch; }
.product-spec-lijst { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 40px; }
.product-spec-rij { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.product-spec-rij dt { color: var(--text-muted); }
.product-spec-rij dd { margin: 0; color: var(--text-primary); font-weight: 500; text-align: right; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .product-detail { grid-template-columns: 1fr; gap: 28px; }
  .product-galerij { position: static; flex-direction: column-reverse; }
  .product-galerij .product-carousel { width: 100%; max-width: 560px; }
  .product-thumbs { flex-direction: row; flex-wrap: wrap; }
  .product-title { font-size: 28px; }
}
@media (min-width: 901px) {
  .product-galerij .carousel-dots { display: none; }
}
@media (max-width: 480px) {
  .product-stap-body { padding-left: 0; }
  .product-tab-paneel { padding: 20px 16px; }
}

/* ── Pakketpagina (?p=pakket) — bouwt voort op de .product-*-opmaak hierboven ── */
.pakket-carousel-label,
.pakket-carousel-korting {
  position: absolute; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--kms-radius-full); font-size: 12px; font-weight: 700;
}
.pakket-carousel-label { left: 14px; background: var(--kms-primary-light); color: var(--kms-primary); }
.pakket-carousel-korting {
  right: 14px; background: var(--kms-accent-light); border: 1px solid var(--kms-accent-border);
  color: var(--kms-accent); font-variant-numeric: tabular-nums;
}
[data-theme="dark-v2"] .pakket-carousel-label { background: var(--bg-subtle); color: var(--text-primary); }
button.product-thumb { display: block; }

.pakket-prijs-bruto { font-size: 15px; color: var(--text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.pakket-prijs-besparing { font-size: 12px; font-weight: 600; color: var(--color-secondary); }

.pakket-inhoud-pil { align-items: center; gap: 6px; }
.pakket-inhoud-pil:has(.kleur-pil-dot) { padding-left: 4px; }
.pakket-inhoud-pil .kleur-pil-dot,
.pakket-artikel-kleur .kleur-pil-dot { width: 16px; height: 16px; }

.pakket-stap-gekozen { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--color-secondary); }

.pakket-artikel {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg); background: var(--bg-card);
}
.pakket-artikel-img {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--kms-radius); background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); overflow: hidden;
}
.pakket-artikel-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pakket-artikel-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pakket-artikel-titel { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.pakket-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.pakket-artikel-kleur {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 4px;
  border: 1px solid var(--border-color); border-radius: var(--kms-radius-full);
  font-weight: 500; color: var(--text-primary);
}
.pakket-artikel-aantal { font-weight: 700; color: var(--kms-primary); font-variant-numeric: tabular-nums; }
[data-theme="dark-v2"] .pakket-artikel-aantal { color: var(--text-primary); }
.pakket-artikel-prijs { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pakket-spec-groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 40px; }
.pakket-spec-titel { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text-heading); }
.pakket-spec-lijst { display: block; }

.pakket-opbouw { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pakket-opbouw td { padding: 10px 0; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.pakket-opbouw td:last-child { text-align: right; white-space: nowrap; padding-left: 16px; }
.pakket-opbouw-sub, .pakket-opbouw .pakket-opbouw-sub td { color: var(--text-muted); }
.pakket-opbouw td.pakket-opbouw-min { color: var(--color-secondary); }
.pakket-opbouw-totaal td { border-bottom: 0; padding-top: 14px; font-size: 15px; font-weight: 700; }
.pakket-opbouw-totaal td:last-child { color: var(--kms-accent); }

/* ── Gedeelde WYSIWYG-opmaak (beschrijving + materiaal/wasadvies) ── */
.product-desc-html,
.product-html-block-content {
  font-size: 14px; line-height: 1.65;
}
.product-desc-html { color: var(--text-secondary); }
.product-html-block-content { color: var(--text-secondary); }

.product-desc-html p,
.product-html-block-content p { margin: 0 0 0.45em; }
.product-desc-html p:last-child,
.product-html-block-content p:last-child { margin-bottom: 0; }

.product-desc-html strong,
.product-html-block-content strong { font-weight: 700; color: var(--text-primary); }

.product-desc-html em,
.product-html-block-content em { font-style: italic; }

.product-desc-html u,
.product-html-block-content u { text-decoration: underline; }

.product-desc-html s,
.product-html-block-content s { text-decoration: line-through; }

.product-desc-html ul,
.product-html-block-content ul {
  list-style-type: disc; padding-left: 1.5em; margin: 0.2em 0 0.45em;
}
.product-desc-html ol,
.product-html-block-content ol {
  list-style-type: decimal; padding-left: 1.5em; margin: 0.2em 0 0.45em;
}
.product-desc-html li,
.product-html-block-content li { display: list-item; margin-bottom: 0.2em; }

.product-desc-html a,
.product-html-block-content a { color: var(--kms-primary); text-decoration: underline; }
.product-desc-html a:hover,
.product-html-block-content a:hover { text-decoration: none; }

.product-html-block { display: flex; flex-direction: column; gap: 6px; }

/* ===== BESTELLINGEN =====
   Opmaak van de productpagina: eyebrow in --kms-primary, groot ordernummer als
   titel, totaal in accent-goud, bewerkingen als .product-bewerking-pil en de
   maten als chips. Het statusfilter hergebruikt .mode-btn (zie BULK-BESTELLING). */
.orders-list { display: flex; flex-direction: column; gap: 24px; padding: 26px 0 0; }
.order-card  {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg); box-shadow: var(--kms-shadow-sm); overflow: hidden;
}
.order-card-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 20px 22px 16px; }
.order-kop-links { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.order-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.order-eyebrow-label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kms-primary); }
.order-eyebrow-rest  { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.order-nummer { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* Ordergegevens als dt/dd-lijst — .product-spec-rij zonder scheidslijnen: de
   kaartrand doet dat werk al. */
.order-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 13px; }
.order-meta dt { color: var(--text-muted); }
.order-meta dd { margin: 0; color: var(--text-primary); font-weight: 500; overflow-wrap: anywhere; }
.order-meta dd.is-opmerking { color: var(--color-danger); font-weight: 600; }

.order-kop-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; }
.order-totaal { display: flex; flex-direction: column; align-items: flex-end; }
.order-totaal-bedrag { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--kms-accent); font-variant-numeric: tabular-nums; }
.order-totaal-euro   { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Eén regel per product + kleur; de maten zitten als chips in die regel. */
.order-regels { display: flex; flex-direction: column; border-top: 1px solid var(--border-color); }
.order-regel  { display: flex; gap: 14px; padding: 16px 22px; }
.order-regel + .order-regel { border-top: 1px solid var(--border-color); }
.regel-thumb {
  width: 68px; height: 68px; flex-shrink: 0;
  border: 1px solid var(--border-color); border-radius: var(--kms-radius);
  background: var(--bg-subtle); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.regel-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; box-sizing: border-box; }
.regel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.regel-kop  { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.regel-merk { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kms-primary); margin-bottom: 1px; }
.regel-naam { font-size: 15px; font-weight: 600; color: var(--text-heading); }
.regel-prijs { font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.regel-prijs em { display: block; margin-top: 1px; font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-muted); text-align: right; }
.regel-kleur { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); }
.regel-kleur .kleur-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex-shrink: 0; }
.regel-los { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.order-bewerkingen { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.order-bewerkingen-label { font-size: 12px; color: var(--text-muted); }

/* Maat met het aantal als gevuld blokje — poort van .maat-pill in de lijsttabellen. */
.order-maat-rij { display: flex; gap: 6px; flex-wrap: wrap; }
.order-maat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 5px 4px 11px; border-radius: var(--kms-radius);
  border: 1px solid var(--border-color); background: var(--bg-card);
  font-size: 12px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.order-maat-chip-aantal {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--kms-radius-sm);
  background: var(--kms-primary); color: #fff; font-size: 11px; font-weight: 700;
}

.order-voet {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 22px; border-top: 1px solid var(--border-color);
  background: var(--bg-subtle); font-size: 12.5px; color: var(--text-secondary);
}
.order-voet svg { color: var(--text-muted); }
.order-voet-adres { overflow-wrap: anywhere; }
.order-voet-track { margin-left: auto; font-weight: 600; color: var(--kms-primary); text-decoration: none; }
.order-voet-track:hover { text-decoration: underline; }

.order-filter-aantal { font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.order-filter-btn.mode-btn--active .order-filter-aantal { color: var(--kms-primary); font-weight: 600; }

@media (max-width: 640px) {
  .order-card-kop { flex-direction: column; padding: 18px 16px 14px; }
  .order-kop-rechts { margin-left: 0; width: 100%; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .order-totaal { align-items: flex-start; }
  .order-regel { padding: 14px 16px; }
  .regel-prijs em { text-align: left; }
  .order-voet { padding: 12px 16px; }
  .order-voet-track { margin-left: 0; }
}

/* ===== ACCOUNT ===== */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 768px) { .account-grid { grid-template-columns: 1fr; } }

.profile-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg); padding: 24px; }
.profile-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--kms-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 16px;
}
.profile-name { font-size: 20px; font-weight: 700; color: var(--text-heading); }
.profile-role { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-detail { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-top: 12px; }
.profile-detail svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.saldo-card {
  background: linear-gradient(135deg, var(--kms-accent-light), rgba(200,150,42,.05));
  border: 1px solid var(--kms-accent-border);
  border-radius: var(--kms-radius-lg); padding: 24px;
  display: flex; flex-direction: column;
}
.email-openstaand {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 12px;
  font-size: 12px; line-height: 1.45; color: var(--pill-amber-text, #92400e);
  background: var(--pill-amber-bg, #fef3c7); border-radius: var(--kms-radius);
}
.email-openstaand[hidden] { display: none; }
.email-openstaand .btn { flex-shrink: 0; }
.saldo-card--unlimited {
  background: linear-gradient(135deg, var(--pill-purple-bg), rgba(124,58,237,.05));
  border-color: var(--pill-purple-border);
}
.saldo-card--unlimited .saldo-amount,
.saldo-card--unlimited .saldo-unit { color: var(--pill-purple-text); }
.saldo-card--unlimited .saldo-icoon { background: var(--pill-purple-bg); border-color: var(--pill-purple-border); color: var(--pill-purple-text); }
.saldo-icoon {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--kms-accent-light); border: 2px solid var(--kms-accent-border); color: var(--kms-accent);
}
.saldo-label  { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; }
.saldo-amount { font-size: 52px; font-weight: 800; color: var(--kms-accent); line-height: 1; }
.saldo-unit   { font-size: 18px; font-weight: 600; color: var(--kms-accent); margin-left: 4px; }
.saldo-stats  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 20px; }
.saldo-stat-label { font-size: 11px; color: var(--text-muted); }
.saldo-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }

.mutations-list { margin-top: 32px; }
.mutation-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 12px; }
.mutation-item  { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.mutation-icon  {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mutation-icon.credit  { background: #d1fae5; color: #065f46; }
.mutation-icon.debit   { background: #ffe4e6; color: #9f1239; }
.mutation-icon svg { width: 14px; height: 14px; }
.mutation-info { flex: 1; }
.mutation-desc { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.mutation-date { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.mutation-amount { font-size: 14px; font-weight: 700; }
.mutation-amount.credit { color: #059669; }
.mutation-amount.debit  { color: #dc2626; }

/* ===== ADMIN LAYOUT ===== */
.admin-wrap { display: flex; min-height: 100vh; }

/* ---- Admin Sidebar ---- */
.admin-sidebar {
  width: var(--kms-sidebar-width); flex-shrink: 0;
  background: var(--bg-card); border-right: 1px solid var(--border-color);
  display: flex; flex-direction: column;
  position: fixed; top: var(--bars-h, 0); left: 0; bottom: 0; z-index: 100;
  transition: width .25s;
}
.admin-sidebar.collapsed { width: var(--kms-sidebar-width-collapsed); }

.admin-sidebar-brand {
  height: var(--kms-topbar-height); padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border-color); flex-shrink: 0; overflow: hidden;
}
.admin-sidebar-brand .brand-logo {
  width: 32px; height: 32px; border-radius: 6px; background: var(--kms-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #fff; font-size: 14px; font-weight: 700; overflow: hidden;
}
.admin-sidebar-brand .brand-logo.has-logo { background: transparent; }
.admin-sidebar-brand .brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.admin-sidebar-brand .brand-name { font-size: 14px; font-weight: 700; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.sidebar-switcher-wrap { padding: 8px 8px 0; flex-shrink: 0; }
.sidebar-switcher-wrap .company-switcher-trigger { max-width: none; width: 100%; }
.sidebar-switcher-wrap .company-switcher-panel { width: 100%; left: 0; }

/* ---- Ingeklapte sidebar: brand + company-switcher compact ---- */
.admin-sidebar.collapsed .admin-sidebar-brand { padding: 0; justify-content: center; }
.admin-sidebar.collapsed .brand-name { display: none; }

.admin-sidebar.collapsed .sidebar-switcher-wrap { padding: 8px 6px 0; }
.admin-sidebar.collapsed .company-switcher-text,
.admin-sidebar.collapsed .company-switcher-trigger > svg { display: none; }
.admin-sidebar.collapsed .company-switcher-trigger { justify-content: center; padding: 6px; gap: 0; }
/* Flyout-panel toch bruikbaar houden: vaste breedte, klapt over de hoofdcontent uit */
.admin-sidebar.collapsed .sidebar-switcher-wrap .company-switcher-panel { width: 240px; }

.admin-sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; }
/* Groepsscheiding in het hoofdmenu. Vervangt de tekstkoppen ("Gebruikersbeheer",
   "Beheer", "Mijn bedrijf"): die kostten elk ~30px, en blijven in de ingeklapte
   sidebar als een leeg gat achter. Een lijntje leest daar wél. Zelfde vorm als
   .nav-sep in OMS: gedempt via opacity op --text-sidebar, want --text-muted
   keert in het donkere thema juist om naar licht. */
.nav-sep {
  height: 1px;
  margin: 8px 10px;
  background: var(--text-sidebar, var(--text-muted));
  opacity: .14;
}

/* Nog in gebruik in de instellingen-sidenav (.settings-sidenav), waar de koppen
   wél inhoud dragen; in het hoofdmenu zijn ze vervangen door .nav-sep. */
.nav-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); padding: 0 8px; margin: 12px 0 6px;
}
.admin-sidebar.collapsed .nav-group-label { opacity: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--kms-radius);
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  text-decoration: none; margin-bottom: 2px; transition: background .15s, color .15s;
  overflow: hidden; white-space: nowrap;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover  { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.nav-item.active { background: var(--kms-primary-light); color: var(--kms-primary); font-weight: 600; }
.nav-item span   { overflow: hidden; }
.admin-sidebar.collapsed .nav-item span { display: none; }

/* Padding 0 en items over de volle breedte, net als de sidebar-footer in OMS. Met
   een binnenmarge én de eigen marge van een .nav-item stapelde de witruimte rond
   Uitloggen op tot bijna het dubbele van een gewoon menu-item — de knop leek
   daardoor los te zweven onder de streep in plaats van erbij te horen. */
.admin-sidebar-footer {
  padding: 0; border-top: 1px solid var(--border-color); flex-shrink: 0;
}
.admin-sidebar-footer .nav-item {
  height: 42px; padding: 0 14px; margin: 0; border-radius: 0;
}
.admin-sidebar.collapsed .admin-sidebar-footer .nav-item { justify-content: center; padding: 0; }

/* ---- Sidebar disabled state (geen bedrijf geselecteerd) ---- */
.nav-item.is-disabled { opacity: .4; pointer-events: none; cursor: not-allowed; }
.admin-sidebar.is-disabled .nav-group-label { opacity: .5; }

/* ---- Feedback knop ---- */

button.nav-item.nav-feedback-btn {
  width: 100%;
  margin-bottom: 6px;
  color: #ef4444;
  border: 1.5px dashed #ef4444;
  background: transparent;
}

button.nav-item.nav-feedback-btn:hover {
  color: #ef4444;
  background: rgba(239,68,68,.1);
}

.feedback-type-btn { display: inline-flex; align-items: center; }

.btn.feedback-type-bug {
  color: var(--color-danger, #e03131);
  border-color: var(--color-danger, #e03131);
}

.btn.feedback-type-bug.active,
.btn.feedback-type-bug:hover {
  background: var(--color-danger, #e03131);
  border-color: var(--color-danger, #e03131);
  color: #fff;
}

.btn.feedback-type-btn:not(.feedback-type-bug).active {
  background: var(--kms-primary);
  color: #fff;
  border-color: var(--kms-primary);
}

/* ---- Admin Main ---- */
.admin-main {
  margin-left: var(--kms-sidebar-width); flex: 1;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left .25s;
  /* GEEN overflow-x hier: dat maakt .admin-main zelf een scroll-container, waardoor de
     position:sticky-topbar niet meer t.o.v. de viewport plakt maar t.o.v. .admin-main —
     bij een info-balk (--bars-h > 0) telt de top-offset dan dubbel. De overflow-fix
     staat daarom alleen op .admin-content (geen voorouder van .admin-topbar). */
}
.admin-sidebar.collapsed ~ .admin-main { margin-left: var(--kms-sidebar-width-collapsed); }

.admin-topbar {
  height: var(--kms-topbar-height); background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  position: sticky; top: var(--bars-h, 0); z-index: 50;
}
/* De paginatitel is uit de balk gehaald (zie index.php). Wat overblijft is de
   duwer die het gebruikersmenu rechts houdt. */
.admin-topbar-spacer { flex: 1; }
.admin-topbar-actions { display: flex; align-items: center; gap: 8px; }

.admin-content { padding: 12px; background: var(--bg-page); flex: 1; overflow-x: hidden; min-width: 0; }

/* ---- Admin KPI tegels ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg); padding: 20px; box-shadow: var(--kms-shadow-sm); }
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; }
.kpi-value { font-size: 32px; font-weight: 800; color: var(--text-heading); line-height: 1; }
.kpi-sub   { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.kpi-icon  { float: right; width: 36px; height: 36px; border-radius: var(--kms-radius); display: flex; align-items: center; justify-content: center; }
.kpi-icon-blue   { background: var(--kms-primary-light); color: var(--kms-primary); }
.kpi-icon-amber  { background: var(--kms-accent-light);  color: var(--kms-accent); }
.kpi-icon-green  { background: #d1fae5; color: #059669; }
.kpi-icon-purple { background: #ede9fe; color: #7c3aed; }
/* Rose volgt de pill-tokens en niet een vaste hex zoals green/purple hierboven:
   dit is de variant voor "er is iets mis", en die moet in het donkere thema
   meebewegen — een vaste #ffe4e6 wordt daar een lichtvlek. */
.kpi-icon-rose   { background: var(--pill-rose-bg); color: var(--pill-rose-text); }
.kpi-icon svg { width: 18px; height: 18px; }

/* ---- Admin data table ---- */
/* Een losse .data-table-wrap IS de tabelkaart — zelfde rand, radius en schaduw
   als .card, zodat een pagina die hem zonder omhulsel gebruikt er niet anders
   uitziet dan een die het lijstpagina-patroon volgt. Binnen een .table-card
   wordt dit kader er weer afgehaald (zie de .table-card-regels onderaan). */
.data-table-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg); overflow: hidden; box-shadow: var(--kms-shadow-sm); }
/* Zelfde maatvoering als .table-card-head, zodat een kaart met deze kop naast
   een kaart met .table-card-head niet uit de pas loopt. */
.data-table-header { padding: 14px 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; }
.data-table-title  { font-size: .95rem; font-weight: 600; color: var(--text-heading); flex: 1; display: flex; align-items: center; gap: 8px; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table th { padding: 10px 16px; text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); }
table.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--bg-table-row-hover); }
table.data-table-compact th { padding: 7px 16px; }
table.data-table-compact td { padding: 5px 16px; }

/* ── Sorteerbare kolomkoppen (.data-table[data-sorteerbaar]) ────────────────
   Poort van dezelfde koppen in OMS. Het pijltje staat er ALLEEN op de kolom
   waarop gesorteerd is: een kolom met een permanent grijs pijltje leest als een
   kolom die al gesorteerd staat, en dan wijzen er zes tegelijk. Bij hover komt
   hij gedempt tevoorschijn — dat is wat de kolom aanklikbaar maakt. */
table.data-table th.is-sorteerbaar {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.data-table th.is-sorteerbaar:hover { color: var(--text-primary); }
table.data-table th.is-sorteerbaar::after {
  content: '↓';
  margin-left: 6px;
  font-size: 10px;
  opacity: 0;
  transition: opacity .12s, transform .12s;
  display: inline-block;
}
table.data-table th.is-sorteerbaar:hover::after { opacity: .35; }
table.data-table th.is-gesorteerd { color: var(--text-primary); }
table.data-table th.is-gesorteerd::after { opacity: 1; }
table.data-table th.is-gesorteerd[aria-sort="ascending"]::after { transform: scaleY(-1); }
table.data-table th.is-sorteerbaar:focus-visible {
  outline: 2px solid var(--kms-primary);
  outline-offset: -2px;
}

/* ── Groepskop binnen een lijst (splitsen per status) ───────────────────────
   Een volle rij in DEZELFDE tabel en geen tabel per groep: dan zouden de
   kolommen per groep op hun eigen inhoud uitlijnen, en juist het naast elkaar
   leggen is waarvoor je groepeert. Lichter dan de kolomkop erboven — dit is een
   tussenkop bínnen de lijst, geen tweede tabelkop. */
table.data-table tr.kms-groep-rij > td {
  background: color-mix(in srgb, var(--bg-subtle) 55%, var(--bg-card));
  border-top: 1px solid var(--border-color);
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
table.data-table tbody tr.kms-groep-rij:first-child > td { border-top: none; }
table.data-table tbody tr.kms-groep-rij:hover { background: none; }
.kms-groep-inhoud { display: flex; align-items: center; gap: 8px; }
/* Het aantal is een telling, geen status — gedempte tekst en geen tweede pill
   naast de pill die de groep al benoemt. */
.kms-groep-aantal { font-weight: 500; color: var(--text-muted); }

/* ---- Avatar initialen ---- */
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--kms-primary);
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }

/* ═════════════════════════════ MODALS ═════════════════════════════
   Opening en sluiten gaat via de klasse `.open` (kmsOpenModal/kmsCloseModal in
   js/app.js) — dat blijft zo. Wat wél veranderd is: de overlay stond op
   `display: none` en klapte daardoor hard in beeld. Nu dezelfde in-animatie als
   in OMS: de overlay vervaagt, de modal komt van onderen omhoog. Geen
   `display`-wissel meer, want een element dat van `none` naar `flex` springt
   heeft geen beginstand om vanaf te animeren.

   `visibility: hidden` staat er NAAST `opacity: 0`: zonder dat blijven de velden
   van een dichte modal bereikbaar met Tab. De vertraging (`.2s`) laat de
   uitvloei-animatie eerst aflopen — bij het openen gaat hij meteen mee. */
.modal-overlay {
  display: flex; position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-overlay); align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.modal-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .2s ease, visibility 0s;
}
body.modal-open { overflow: hidden; }
.modal {
  background: var(--bg-modal); border-radius: var(--kms-radius-xl);
  box-shadow: var(--kms-shadow-lg); border: 1px solid var(--border-color);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(.99);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { transition: none; }
}
.modal-sm   { max-width: 440px; }
.modal-lg   { max-width: 760px; }
.modal-890  { max-width: 890px; }
.modal-xl   { max-width: 960px; }
.modal-xxl  { max-width: 1280px; }
/* Voor modals die naast de inhoud een navigatiekolom hebben (Webharvester-picker). */
.modal-xxxl { max-width: 1520px; }
.modal-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.modal-title  { font-size: 17px; font-weight: 700; color: var(--text-heading); flex: 1; display: flex; align-items: center; gap: 9px; }
.modal-title svg { flex-shrink: 0; opacity: .8; }
.modal-body   { padding: 18px 22px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: var(--kms-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; line-height: 1; }
.modal-close:hover { color: var(--text-primary); background: var(--bg-hover); }

/* ===== Alerts ===== */
.alert { padding: 13px 16px; border-radius: var(--kms-radius); margin-bottom: 16px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; border-left: 3px solid transparent; }
.alert-success { background: #D1FAE5; color: #065F46; border-left-color: var(--color-secondary); }
.alert-error   { background: #FEE2E2; color: #991B1B; border-left-color: var(--color-danger); }
.alert-warning { background: #FEF3C7; color: #78350F; border-left-color: var(--color-warning); }
[data-theme="dark-v2"] .alert-success { background: rgba(16,185,129,.08); color: #6EE7B7; border-left-color: #10B981; }
[data-theme="dark-v2"] .alert-error   { background: rgba(239,68,68,.08);  color: #FCA5A5; border-left-color: #EF4444; }
[data-theme="dark-v2"] .alert-warning { background: rgba(245,158,11,.08); color: #FBB040; border-left-color: #F59E0B; }

/* ===== LOGIN ===== */
/* De publieke schermen (inloggen, wachtwoord vergeten) VULLEN het venster en
   scrollen NIET: het is één kaart met één handeling, en een pagina die
   meeschuift laat die kaart half onder de vouw beginnen. Past de kaart niet op
   een laag scherm, dan scrollt de kaart zelf — nooit de pagina eromheen.
   100dvh ná 100vh: op mobiel telt 100vh de in-/uitschuivende URL-balk niet mee.
   Oudere browsers houden de 100vh-regel. */
.login-page {
  /* --bars-h eraf: de dev-/onderhouds-/demobalk duwt de body met een
     padding-top omlaag (zie index.php). Zonder die aftrek steekt de pagina er
     precies die hoogte onderuit en scrolt hij alsnog. */
  height: calc(100vh - var(--bars-h, 0px));
  height: calc(100dvh - var(--bars-h, 0px));
  display: flex; align-items: center; justify-content: center; padding: 24px;
  position: relative; overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 52% 58% at 88% 7%,  #e8711a 0%, rgba(175,48,0,0.50) 36%, transparent 62%),
    radial-gradient(ellipse 42% 44% at 64% 30%,  rgba(90,25,195,0.45) 0%, transparent 54%),
    linear-gradient(148deg, #1e45eb 0%, #1b3bcc 22%, #1630a2 48%, #102280 74%, #0b1760 100%);
  z-index: 0;
}
.login-page::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(4, 10, 40, 0.28);
  z-index: 1;
}

/* ---- Tweekoloms inlogkaart (branding links, formulier rechts) ----
   Zelfde opzet als OMS. De kaart blijft in beide thema's licht, net als
   .login-box: de achtergrond eromheen is al donker, en een donkere kaart op een
   donkere achtergrond laat de vorm verdwijnen. */
.login-split {
  position: relative; z-index: 3;
  display: flex; align-items: stretch;
  width: 940px; max-width: 100%;
  max-height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--kms-radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.18);
}
/* Merkstreep bovenlangs: blauw → goud, de twee kleuren van het icoon. */
.login-split-streep {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, #1e2d6e 0%, #35478f 45%, #c8962a 100%);
}

.login-split-left {
  width: 392px; flex: 0 0 auto;
  padding: 46px 36px 32px;
  display: flex; flex-direction: column;
  border-right: 1px solid #e9ecf3;
  background: linear-gradient(165deg, #f7f9fd 0%, #ffffff 55%);
}
.login-split-left .login-logo { justify-content: flex-start; margin-bottom: 32px; }
.login-split-left .login-logo img { max-width: 180px; max-height: 56px; }
.login-split-tagline {
  font-size: 26px; font-weight: 700; line-height: 1.25;
  color: #17224f; margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.login-split-sub {
  font-size: 14px; line-height: 1.55; color: #5b6577; margin: 0 0 32px;
}
.login-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.login-feature { display: flex; align-items: flex-start; gap: 12px; }
.login-feature-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  background: rgba(30,45,110,0.07);
  display: flex; align-items: center; justify-content: center;
  color: #1e2d6e;
}
.login-feature:nth-child(2) .login-feature-icon {
  background: rgba(200,150,42,0.14); color: #a8791c;
}
.login-feature-text strong {
  display: block; font-size: 13.5px; font-weight: 650; color: #1a2540; margin-bottom: 2px;
}
.login-feature-text span { font-size: 12.5px; line-height: 1.45; color: #6b7488; }
.login-split-footer {
  margin-top: auto; padding-top: 28px;
  font-size: 11.5px; color: #9aa2b4;
}

.login-split-right {
  flex: 1; min-width: 0;
  padding: 46px 40px 40px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.login-split-right .login-title { text-align: left; font-size: 22px; margin-bottom: 5px; }
.login-split-right .login-sub   { text-align: left; margin-bottom: 26px; }
.login-split-right .form-label  { color: #4b5563; }
.login-split-right .form-input {
  background: #f8f9fb; border-color: #e2e5eb; color: #1a1a2e;
}
.login-split-right .form-input::placeholder { color: #9aa3af; }
.login-split-right .form-input:focus {
  background: #ffffff; border-color: var(--kms-primary);
  box-shadow: 0 0 0 3px rgba(30,45,110,0.15);
}
.login-split-right a { color: var(--kms-primary) !important; }

/* Wachtwoord tonen/verbergen */
.login-veld { position: relative; }
.login-veld .form-input { padding-right: 40px; }
.login-oog {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; padding: 5px; cursor: pointer;
  color: #9aa3af; display: flex; align-items: center; border-radius: var(--kms-radius-sm);
}
.login-oog:hover { color: #4b5563; }

/* Mobiel: stapelen. Het linkerpaneel houdt logo + kop; de features en de
   voettekst vallen weg, anders staat het formulier onder de vouw. */
@media (max-width: 860px) {
  .login-split { flex-direction: column; width: 100%; max-width: 440px; }
  .login-split-left {
    width: 100%; padding: 28px 26px 0;
    border-right: none;
    background: #ffffff;
  }
  .login-features, .login-split-footer, .login-split-sub { display: none; }
  .login-split-left .login-logo { margin-bottom: 16px; }
  .login-split-tagline { font-size: 20px; margin-bottom: 0; }
  .login-split-right { padding: 22px 26px 30px; }
}
/* canvas (#loginBgCanvas) sits at z-index: 2 — injected by login-bg.js */
.login-box {
  position: relative; z-index: 3;
  width: 100%; max-width: 400px;
  /* Nooit hoger dan het venster; wat er niet in past scrollt binnen de kaart. */
  max-height: 100%; overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--kms-radius-xl); padding: 40px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.15);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.login-logo img { max-width: 140px; max-height: 60px; object-fit: contain; }
.login-logo-placeholder {
  width: 60px; height: 60px; border-radius: 12px; background: var(--kms-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff;
}
.login-title { text-align: center; font-size: 20px; font-weight: 700; color: #1a1a2e; margin-bottom: 6px; }
.login-sub   { text-align: center; font-size: 13px; color: #6b7280; margin-bottom: 28px; }
.login-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; border-radius: var(--kms-radius); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.login-box .form-label { color: #4b5563; }
.login-box .form-input {
  background: #f8f9fb;
  border-color: #e2e5eb;
  color: #1a1a2e;
}
.login-box .form-input::placeholder { color: #9aa3af; }
.login-box .form-input:focus {
  background: #ffffff;
  border-color: var(--kms-primary);
  box-shadow: 0 0 0 3px rgba(30,45,110,0.15);
}
.login-box a { color: var(--kms-primary) !important; }

/* ===== PAGE HEADER ===== */
.shop-page   { padding: 20px 0 32px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.page-title  { font-size: 24px; font-weight: 700; color: var(--text-heading); }
.page-sub    { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ===== SETTINGS LAYOUT ===== */
.admin-content:has(.settings-layout) { display: flex; flex-direction: column; }
.settings-layout { display: flex; gap: 24px; align-items: stretch; flex: 1; }
.settings-sidenav {
  width: 240px; flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius); overflow: hidden;
}
.settings-sidenav .nav-group-label { padding: 12px 12px 6px; margin: 0; }
.settings-sidenav .nav-item { border-radius: 0; margin-bottom: 0; padding: 10px 12px; }
.settings-content { flex: 1; min-width: 0; }

/* ---- Uitklap-knop voor de tab-nav (alleen zichtbaar op mobiel, zie media query) ---- */
.settings-sidenav-toggle {
  display: none;
  width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius);
  font-size: 14px; font-weight: 600; color: var(--text-heading);
  cursor: pointer;
}
.settings-sidenav-toggle-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.settings-sidenav-toggle-label svg { flex-shrink: 0; color: var(--kms-primary); }
.settings-sidenav-toggle-chevron { flex-shrink: 0; transition: transform .2s; color: var(--text-muted); }
.settings-sidenav-toggle.open .settings-sidenav-toggle-chevron { transform: rotate(180deg); }

/* ===== TOAST / ALERTS =====
 * Korte bevestiging RECHTSONDER voor acties waarbij verder niets zichtbaar
 * verandert. Stond eerst rechtsboven en dekte daar telkens de knop af die je net
 * had ingedrukt — op ?p=admin-product-bewerk precies de knop Opslaan.
 *
 * Vorm overgenomen van .oms-toast in OMS: een neutrale kaart met een gekleurde
 * streep links in plaats van een volledig gekleurd vlak. Een groen of rood vlak
 * schreeuwt even hard bij "opgeslagen" als bij een echte fout; de streep laat de
 * kleur het onderscheid maken zonder de melding zelf te laten domineren.
 *
 * `column-reverse` laat nieuwe meldingen van onder naar boven stapelen, zodat de
 * nieuwste altijd op dezelfde plek verschijnt. `pointer-events: none` op de host
 * houdt de pagina eronder klikbaar.
 */
.toast-container {
  position: fixed; right: 16px; bottom: 16px; top: auto; z-index: 10000;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: 340px;
  padding: 10px 14px;
  border-radius: var(--kms-radius);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-success, #10b981);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  animation: toastIn .18s ease;
  transition: opacity .25s ease, transform .25s ease;
  /* De host staat op `pointer-events: none`; de melding zelf moet wél klikbaar
     zijn — er zit soms een knop in (.toast-action-btn). */
  pointer-events: auto;
}
.toast-success { border-left-color: var(--color-success, #10b981); }
.toast-error   { border-left-color: var(--color-danger, #e11d48); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===== EMPTY STATE ===== */
.empty-state { text-align: center; padding: 64px 24px; }
.empty-state-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--text-muted); }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-heading); }
.empty-state-sub   { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text-heading); margin: 0; }
.empty-state p  { font-size: 13px; color: var(--text-muted); max-width: 440px; margin: 6px auto 0; }
.empty-state > .btn { margin-top: 20px; }

/* ===== CHART ===== */
.chart-wrap { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg); padding: 20px; box-shadow: var(--kms-shadow-sm); }
.chart-title { font-size: 14px; font-weight: 700; color: var(--text-heading); margin-bottom: 4px; }
.chart-sub   { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

/* ===== RANGE SLIDER ===== */
.range-wrap { padding: 4px 0; }
input[type=range] { width: 100%; accent-color: var(--kms-primary); height: 4px; }
.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ===== CAROUSEL ===== */
.product-carousel {
  position: relative; border-radius: var(--kms-radius-xl); overflow: hidden;
  border: 1px solid var(--border-color); background: var(--bg-card);
  aspect-ratio: 1; box-shadow: var(--kms-shadow-sm);
}
.carousel-track {
  display: flex; height: 100%;
  transition: transform .35s ease;
}
.carousel-slide {
  flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; padding: 28px 28px 40px; }
.carousel-slide-leeg { color: var(--text-muted); background: var(--bg-subtle); }
.carousel-arrow { opacity: 0; }
.product-carousel:hover .carousel-arrow,
.carousel-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .carousel-arrow { opacity: 1; } }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-primary); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; transition: background .15s, box-shadow .15s, opacity .2s;
  box-shadow: var(--kms-shadow-sm);
}
.carousel-arrow:hover { background: var(--bg-subtle); box-shadow: var(--kms-shadow-md); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.25); border: none; cursor: pointer;
  transition: background .15s, transform .15s; padding: 0;
}
[data-theme="dark-v2"] .carousel-dot { background: rgba(255,255,255,.25); }
.carousel-dot.active { background: var(--kms-primary); transform: scale(1.3); }

/* ===== QTY STEPPER ===== */
.qty-stepper {
  display: inline-flex; align-items: stretch; gap: 0; align-self: stretch;
  border: 1px solid var(--border-color); border-radius: var(--kms-radius); overflow: hidden;
  background: var(--bg-card);
}
.qty-stepper button {
  width: 34px; height: 100%; min-height: 34px; border: none; background: transparent;
  color: var(--text-secondary); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
  border-radius: 0;
}
.qty-stepper button:hover { background: var(--bg-subtle); color: var(--text-primary); }
.qty-stepper input[type=number] {
  width: 48px; height: 100%; min-height: 34px; border: none; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
  background: var(--bg-card); color: var(--text-primary); font-size: 14px; font-weight: 600;
  text-align: center; outline: none; font-family: inherit; padding: 0;
  -moz-appearance: textfield;
}
.qty-stepper input[type=number]::-webkit-outer-spin-button,
.qty-stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ===== CART TOPBAR ICON ===== */
.cart-wrap { position: relative; }
.cart-trigger {
  position: relative;
  width: 34px; height: 34px; border-radius: 50% !important;
  background: var(--kms-primary) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
}
.cart-trigger:hover { background: var(--kms-primary-dark, #162252) !important; }
.cart-trigger svg { stroke: #fff; }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--kms-accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; padding: 0 3px;
  pointer-events: none;
}
@keyframes cartBadgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.4); } }
.cart-badge.pulse { animation: cartBadgePulse .3s ease; }

/* ===== CART DROPDOWN ===== */
.cart-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; z-index: 500;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-xl); box-shadow: var(--kms-shadow-lg);
  overflow: hidden;
}
.cart-dropdown-header {
  padding: 14px 16px; font-size: 13px; font-weight: 700; color: var(--text-heading);
  border-bottom: 1px solid var(--border-color);
}
.cart-dropdown-items { max-height: 280px; overflow-y: auto; padding: 8px 0; }
.cart-dropdown-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.cart-dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  transition: background .12s;
}
.cart-dropdown-item:hover { background: var(--bg-subtle); }
.cart-dropdown-item-img {
  width: 56px; height: 56px; border-radius: var(--kms-radius); overflow: hidden;
  background: var(--bg-subtle); flex-shrink: 0; border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
}
.cart-dropdown-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-dropdown-item-info { flex: 1; min-width: 0; }
.cart-dropdown-item-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-dropdown-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.cart-dropdown-item-price { font-size: 12px; font-weight: 700; color: var(--kms-accent); flex-shrink: 0; }
.cart-dropdown-footer {
  padding: 12px 16px; border-top: 1px solid var(--border-color);
  display: flex; flex-direction: column; gap: 10px;
}
.cart-dropdown-total {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.cart-dropdown-total span:last-child { color: var(--kms-accent); }
.cart-dropdown-saldo-na { font-size: 12px; }
.cart-dropdown-cta { width: 100%; justify-content: center; }

/* Highlight van zojuist toegevoegd item in de winkelmand-dropdown */
@keyframes cartItemFlash {
  0%   { background: rgba(200,150,42,.22); box-shadow: inset 3px 0 0 var(--kms-accent); }
  65%  { background: rgba(200,150,42,.22); box-shadow: inset 3px 0 0 var(--kms-accent); }
  100% { background: transparent;          box-shadow: inset 3px 0 0 transparent; }
}
.cart-dropdown-item.cart-item-flash,
.cart-dropdown-pakket.cart-item-flash {
  animation: cartItemFlash 2s ease-out forwards;
}

/* ===== COMPANY SWITCHER ===== */
.company-switcher { position: relative; }

.company-switcher-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; border-radius: var(--kms-radius);
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  color: var(--text-primary); cursor: pointer;
  transition: background .15s, border-color .15s;
  max-width: 220px;
}
.company-switcher-trigger:hover { background: var(--bg-card); border-color: var(--kms-primary); }
.company-switcher-trigger svg { color: var(--text-muted); flex-shrink: 0; }

.company-switcher-avatar { flex-shrink: 0; }

/* Logo-vierkant voor bedrijfskiezer: vervangt de ronde avatar zodra een bedrijf
   een logo heeft — grijze achtergrond zodat witte/transparante logo's ook
   zichtbaar blijven. Grootte vult het grootste deel van de rij, met marge. */
.company-switcher-logo {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: #f0f1f4;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.company-switcher-logo img { max-width: 76%; max-height: 76%; object-fit: contain; }
.company-switcher-logo-fallback {
  width: 100%; height: 100%;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
}

.company-switcher-text {
  flex: 1; min-width: 0; text-align: left; line-height: 1.2;
}
.company-switcher-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--text-muted);
}
.company-switcher-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.company-switcher-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 260px; z-index: 500;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-xl); box-shadow: var(--kms-shadow-lg);
  overflow: hidden;
}
.company-switcher-panel.open { display: block; }

.company-switcher-header {
  padding: 10px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted); border-bottom: 1px solid var(--border-color);
}

.company-switcher-list { max-height: 280px; overflow-y: auto; padding: 6px 0; }

.company-switcher-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  background: transparent; border: none;
  color: var(--text-primary); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.company-switcher-item:hover { background: var(--bg-subtle); }
.company-switcher-item.is-active { background: var(--kms-primary-light); color: var(--kms-primary); font-weight: 600; }
.company-switcher-item.is-active svg { color: var(--kms-accent); stroke-width: 2.5; }
.company-switcher-item svg { margin-left: auto; flex-shrink: 0; color: var(--text-muted); }

.company-switcher-item-naam { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.company-switcher-empty { padding: 16px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

.company-switcher-footer { border-top: 1px solid var(--border-color); padding: 6px; }

.company-switcher-new {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 10px; border-radius: var(--kms-radius);
  background: transparent; border: 1px dashed var(--border-color);
  color: var(--kms-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.company-switcher-new:hover { background: var(--kms-primary-light); border-color: var(--kms-primary); }

/* ---- Saldo na bestelling ---- */
.saldo-na {
  font-size: 12px; color: var(--text-muted);
}
.saldo-na--tekort {
  color: var(--color-danger, #dc2626); font-weight: 600;
}

/* ===== CART FLY ANIMATION ===== */
.cart-fly-clone {
  position: fixed; z-index: 9999; pointer-events: none;
  border-radius: var(--kms-radius); overflow: hidden;
  transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .55s ease, width .55s ease, height .55s ease;
  will-change: transform, opacity;
}

/* ===== TOAST ACTION ===== */
.toast-info { border-left-color: var(--kms-primary); }
.toast-action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toast-action-btn {
  background: var(--kms-primary); color: #fff; border: none;
  padding: 4px 10px; border-radius: var(--kms-radius-sm);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.toast-action-btn:hover { background: var(--kms-primary-hover); text-decoration: none; color: #fff; }
.toast-success .toast-action-btn { background: #059669; }
.toast-success .toast-action-btn:hover { background: #047857; }

/* ===== CART PAGE ===== */
.cart-page { padding: 20px 0 32px; max-width: 1200px; margin: 0 auto; }
.cart-page-header { margin-bottom: 16px; }
.cart-page-title { font-size: 24px; font-weight: 700; color: var(--text-heading); }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.cart-main { display: grid; gap: 12px; min-width: 0; }
.cart-main .cart-pakket-group { margin-bottom: 0; }
.cart-side { position: sticky; top: calc(var(--kms-topbar-height) + 16px); display: grid; gap: 12px; min-width: 0; }
.cart-side .cart-totals { margin-top: 0; }
.cart-side-kop { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text-heading); margin-bottom: 10px; }
.cart-side-sectie { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); margin-bottom: 14px; }

.cart-prod {
  display: flex; gap: 14px; padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg);
}
.cart-prod-img {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--kms-radius); overflow: hidden;
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
}
.cart-prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-prod-body { flex: 1; min-width: 0; }
.cart-prod-top { display: flex; gap: 10px; align-items: flex-start; }
.cart-prod-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cart-prod-naam { font-size: 14px; font-weight: 600; color: var(--kms-accent); text-decoration: none; }
.cart-prod-naam:hover { color: color-mix(in srgb, var(--kms-accent) 82%, black); text-decoration: underline; }
.cart-prod-meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cart-kleur-chip { display: inline-flex; align-items: center; gap: 5px; }
.cart-prod-subtotaal,
.cart-pakket-header-prijs { font-size: 14px; font-weight: 700; color: var(--kms-accent); white-space: nowrap; text-align: right; }
.cart-prod-del {
  background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--kms-radius-sm);
  color: var(--text-muted); line-height: 0; flex-shrink: 0; transition: color .15s, background .15s;
}
.cart-prod-del:hover { color: var(--color-danger); background: var(--pill-rose-bg); }
.cart-maten { margin-top: 10px; display: grid; gap: 6px; }
.cart-maat-rij {
  display: grid; grid-template-columns: 62px auto minmax(0, 1fr) auto 26px; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--kms-radius); background: var(--bg-subtle);
}
/* Vaste eerste kolom: elke maatrij is zijn eigen grid, dus zonder die breedte
   staan de steppers per rij op een andere plek. De pil vult hem niet, vandaar
   justify-self. */
.cart-maat-naam { justify-self: start; }
.cart-maat-rij .qty-stepper button { width: 28px; min-height: 28px; font-size: 15px; }
.cart-maat-rij .qty-stepper input[type=number] { width: 40px; min-height: 28px; font-size: 13px; }
.cart-maat-per { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.cart-maat-sub { font-size: 13px; font-weight: 700; color: var(--kms-accent); white-space: nowrap; text-align: right; }
.cart-item-bewerking { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 4px; }

/* Pulserende waarschuwingsbadge (! bij ontbrekend Design ID / kleur) */
@keyframes kmsPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  70%  { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(220,38,38,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.kms-pulse { animation: kmsPulse 1.6s ease-out infinite; }

/* Tijdelijke highlight na "Nu oplossen" in de aandachtspunten-modal */
@keyframes kmsHighlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0);   outline-color: var(--color-danger); }
  15%      { box-shadow: 0 0 0 6px rgba(220,38,38,.30); }
  50%      { box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
}
.kms-highlight {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
  border-radius: 6px;
  animation: kmsHighlight 1.1s ease-out 2;
}
.cart-totals {
  margin-top: 20px; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg); padding: 20px;
}
.cart-totals-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: var(--text-secondary); }
.cart-totals-row.total { font-size: 18px; font-weight: 700; color: var(--text-heading); }
.cart-totals-row.total span:last-child { color: var(--kms-accent); }
.cart-saldo-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: var(--kms-radius); background: var(--pill-rose-bg); color: var(--pill-rose-text); border: 1px solid var(--pill-rose-border); font-size: 13px; }
.cart-saldo-warn svg { flex-shrink: 0; margin-top: 3px; }
.cart-sum-regels { display: grid; gap: 2px; margin-bottom: 6px; }
.cart-sum-regel { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.cart-sum-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-sum-regels:not(:empty) + .cart-totals-row.total { border-top: 1px solid var(--border-color); padding-top: 10px; margin-top: 4px; }
.cart-saldo-blok { margin-top: 10px; }
.cart-saldo-cap { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.cart-saldo-balk { margin: 6px 0 2px; }
.cart-empty-state { text-align: center; padding: 80px 24px; }

@media (max-width: 960px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-side { position: static; }
}
@media (max-width: 640px) {
  .cart-dropdown { width: 300px; }
  .cart-prod,
  .cart-pakket-header { padding: 12px; gap: 12px; }
  .cart-prod-img,
  .cart-pakket-header-img { width: 56px; height: 56px; }
  .cart-pakket-children { padding: 10px 12px 12px; }
  .cart-maat-rij { grid-template-columns: 56px auto minmax(0, 1fr) 26px; }
  .cart-maat-per { display: none; }
  /* Vijf kolommen passen hier niet: de maatpil zakt onder de naam en de prijs
     per stuk valt weg, net als .cart-maat-per hierboven. De plaatsing is
     expliciet — een weggevallen kolom schuift bij automatische plaatsing alles
     een plek op. */
  .cart-pakket-child { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 4px; }
  .cart-pakket-child-img { width: 40px; height: 40px; grid-row: 1 / span 2; }
  .cart-pakket-child-info { grid-column: 2; grid-row: 1; }
  .cart-pakket-child-prijs { grid-column: 3; grid-row: 1; }
  .cart-pakket-child-maat { grid-column: 2 / span 2; grid-row: 2; }
  .cart-pakket-child-per { display: none; }
}

/* ===== KMS FOOTER ===== */
.kms-footer { background: var(--kms-footer-bg, #1a2744); margin-top: 56px; }
[data-theme="dark-v2"] .kms-footer { background: color-mix(in srgb, var(--kms-footer-bg, #1a2744) 55%, black); }

.kms-footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 40px 24px 32px;
  display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px;
}
.kms-footer-brand { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.kms-footer-brand img {
  display: block; align-self: flex-start;
  max-height: 76px; max-width: 260px; object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: .85;
}
.kms-footer-brand-icon {
  width: 36px; height: 36px; border-radius: var(--kms-radius);
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
}
.kms-footer-brand-name { font-size: 14px; font-weight: 600; color: #fff; margin-top: 4px; }
.kms-footer-brand-tag  { font-size: 12px; color: rgba(255,255,255,0.4); }
.kms-footer-nav { display: flex; flex-direction: column; gap: 6px; }
.kms-footer-nav-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,0.38); margin-bottom: 6px;
}
.kms-footer-nav a {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.62);
  transition: color .12s;
}
.kms-footer-nav a:hover  { color: #fff; text-decoration: none; }
.kms-footer-contact > div {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.62);
}
.kms-footer-contact > div svg { opacity: .5; flex-shrink: 0; margin-top: 3px; }
.kms-footer-contact a { overflow-wrap: anywhere; }
.kms-footer-nav a svg    { opacity: .5; flex-shrink: 0; }
.kms-footer-bar {
  max-width: 1280px; margin: 0 auto;
  padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: rgba(255,255,255,0.32);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
}
.kms-footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.kms-footer-legal a { color: inherit; transition: color .12s; }
.kms-footer-legal a:hover { color: #fff; text-decoration: none; }
@media (max-width: 900px) {
  .kms-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kms-footer-inner { gap: 28px 20px; padding: 28px 20px 20px; }
  .kms-footer-brand, .kms-footer-contact { grid-column: 1 / -1; }
  .kms-footer-bar { flex-direction: column; padding: 16px 20px; }
}

/* ===== IMAGE EDITOR MODAL ===== */
.ie-section { padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); }
.ie-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 8px; }
.ie-label { display: block; font-size: 11px; color: var(--text-primary); margin-top: 8px; margin-bottom: 2px; }
.ie-section input[type=range] { width: 100%; }
.ie-stepper-row { display: flex; gap: 4px; margin-top: 5px; }
.ie-step { flex: 1; padding: 2px 0; font-size: 11px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-subtle); color: var(--text-primary); cursor: pointer; line-height: 1.6; }
.ie-step:hover { background: var(--bg-card); border-color: var(--kms-primary); }

/* ===== UTILS ===== */
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 12px; }
.text-xs    { font-size: 11px; }
.font-bold  { font-weight: 700; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.flex  { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.w-full { width: 100%; }

/* ===== THEMA PRESET CARDS ===== */
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.theme-preset-card {
  border: 1.5px solid var(--border-color);
  border-radius: var(--kms-radius);
  padding: 12px 10px 10px;
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s, transform .1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.theme-preset-card:hover { transform: translateY(-1px); border-color: var(--kms-primary); }
.theme-preset-card.active {
  border-color: var(--kms-primary);
  box-shadow: 0 0 0 3px var(--kms-primary-light);
}
.theme-swatch-row { display: flex; gap: 5px; }
.theme-swatch-row span {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
}
.theme-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.theme-color-item { display: flex; flex-direction: column; gap: 6px; }
.theme-color-item label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.theme-color-inputs { display: flex; align-items: center; gap: 6px; }
.theme-color-inputs input[type="color"] {
  width: 36px; height: 36px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--kms-radius-sm);
  padding: 2px;
  background: var(--bg-card);
  cursor: pointer;
  flex-shrink: 0;
}
.theme-color-inputs input[type="text"] {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  text-transform: uppercase;
}

/* ===== UPLOAD DROPZONE ===== */
.upload-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--kms-radius);
  padding: 16px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 120px;
  position: relative;
  user-select: none;
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: var(--kms-primary);
  background: var(--kms-primary-light);
}
.upload-dropzone-icon { opacity: .4; line-height: 0; display: flex; justify-content: center; margin-bottom: 8px; }
.upload-dropzone-text { font-size: 13px; font-weight: 500; color: var(--text-heading); }
.upload-dropzone-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.upload-dropzone-formats {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: .75;
  margin-top: 8px;
}
.upload-dropzone-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
}
.upload-dropzone-preview img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  border-radius: var(--kms-radius-sm);
  background-color: #fff;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
                    linear-gradient(-45deg, #ddd 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #ddd 75%),
                    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.upload-dropzone-filename { font-size: 12px; color: var(--text-secondary); word-break: break-all; text-align: center; }
.upload-dropzone-remove {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ef4444; color: #fff;
  border: 2px solid var(--bg-card);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 0;
}
.upload-dropzone-remove:hover { background: #dc2626; }
.logo-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ===== THEME MODE PICKER ===== */
.theme-mode-picker { display: flex; gap: 12px; }
.theme-mode-btn {
  border: 1.5px solid var(--border-color);
  border-radius: var(--kms-radius);
  padding: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  width: 130px;
  transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.theme-mode-btn:hover { border-color: var(--kms-primary); }
.theme-mode-btn.active {
  border-color: var(--kms-primary);
  box-shadow: 0 0 0 3px var(--kms-primary-light);
}
.theme-mode-preview {
  width: 100%; height: 62px;
  border-radius: var(--kms-radius-sm);
  overflow: hidden;
}
.theme-mode-preview--light { background: #f0f0f8; border: 1px solid #dde0ed; }
.theme-mode-preview--dark  { background: #16161e; border: 1px solid #2a2a36; }
.theme-mode-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.theme-mode-btn--wide { width: 200px; }
.theme-mode-desc { font-size: 11px; color: var(--text-muted); text-align: center; margin: 0; line-height: 1.4; }

/* ===== THEMA-GENERATOR MODAL ===== */
.thema-gen-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  height: 520px;
}
.thema-gen-grid.has-preview {
  grid-template-columns: 320px 1fr 340px;
}
.thema-gen-left  { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.thema-gen-right { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
#genCanvasWrap {
  position: relative;
  background-color: #fff;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
                    linear-gradient(-45deg, #ddd 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #ddd 75%),
                    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--kms-radius);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#logoCanvas {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: crosshair;
}
#genCanvasHint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.58);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
#genCanvasWrap:hover #genCanvasHint { opacity: 1; }
#genRemoveLogoBtn {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
#genCanvasWrap:hover #genRemoveLogoBtn { opacity: 1; }
#genRemoveLogoBtn:hover { background: rgba(200,30,30,.8); }
.gen-logo-swap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--kms-radius);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
}
.gen-logo-swap:hover,
.gen-logo-swap.drag-over {
  border-color: var(--kms-primary);
  background: var(--kms-primary-light, rgba(30,45,110,.05));
  color: var(--kms-primary);
}
.gen-logo-swap svg { flex-shrink: 0; }
.thema-gen-dominant label,
.thema-gen-seed label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 700;
}
#dominantSwatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 32px;
  align-items: center;
}
#dominantSwatches button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .12s, border-color .15s;
}
#dominantSwatches button:hover { transform: scale(1.15); }
#dominantSwatches button.active {
  border-color: var(--kms-primary);
  box-shadow: 0 0 0 3px var(--kms-primary-light);
}
#paletteList, #paletteDetail {
  flex: 1;
  min-height: 0;
}
#paletteList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 4px 2px 0;
}
.pd-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  flex-shrink: 0;
}
.pd-row { display: flex; flex-direction: column; gap: 5px; }
.palette-toon-meer {
  background: none;
  border: 1.5px dashed var(--border-color);
  border-radius: var(--kms-radius);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--kms-primary);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.palette-toon-meer:hover { border-color: var(--kms-primary); background: var(--kms-primary-light); }
.kms-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.kms-toggle input { display: none; }
.kms-toggle-track {
  position: relative; width: 36px; height: 20px; border-radius: 10px; flex-shrink: 0;
  background: var(--border-color);
  transition: background .2s;
}
.kms-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.kms-toggle input:checked + .kms-toggle-track { background: var(--kms-primary); }
.kms-toggle input:checked + .kms-toggle-track .kms-toggle-thumb { transform: translateX(16px); }
.kms-toggle-label { font-size: 12px; color: var(--text-secondary); user-select: none; }
.palette-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--kms-radius);
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.palette-card:hover { transform: translateY(-1px); border-color: var(--kms-primary); }
.palette-card.active {
  border-color: var(--kms-primary);
  box-shadow: 0 0 0 3px var(--kms-primary-light);
}
.swatch-trio { display: flex; gap: 4px; flex-shrink: 0; }
.swatch-trio span {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  display: inline-block;
}
.palette-meta    { flex: 1; min-width: 0; }
.palette-name    { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.palette-desc    { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.palette-hexes   { font-family: monospace; font-size: 10px; color: var(--text-muted); margin-top: 3px; opacity: .7; }

/* ===== Webshop mini-preview ===== */
.gen-preview {
  --gp-primary: #1e2d6e;
  --gp-accent:  #c8962a;
  --gp-topbar:  #ffffff;
  --gp-footer:  #1a2744;
  border: 1px solid var(--border-color);
  border-radius: var(--kms-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  font-family: inherit;
  background: var(--bg-page, #f3f4f8);
  user-select: none;
}
/* — Topbar — */
.gp-topbar {
  background: var(--gp-topbar);
  border-bottom: 1px solid color-mix(in srgb, var(--gp-topbar) 80%, #000 20%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  gap: 6px;
  flex-shrink: 0;
}
.gp-brand {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gp-brand-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--gp-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gp-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.gp-brand-name {
  font-size: 9px;
  font-weight: 700;
  color: var(--gp-primary);
}
.gp-brand-sub {
  font-size: 7.5px;
  color: #999;
}
.gp-topbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gp-points-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--gp-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gp-accent) 30%, transparent);
  border-radius: 20px;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 700;
  color: var(--gp-accent);
}
.gp-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gp-primary) 12%, transparent);
  color: var(--gp-primary);
  font-size: 7px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* — Page body — */
.gp-page {
  flex: 1;
  padding: 8px;
  overflow: hidden;
}
.gp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gp-card {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .15s;
}
.gp-card-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #edf0f7 0%, #dde1ed 100%);
  position: relative;
  overflow: hidden;
}
.gp-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c8d0e0' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.gp-card-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp-card-name {
  font-size: 8.5px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--gp-accent) 12%, transparent);
  color: var(--gp-accent);
  border: 1px solid color-mix(in srgb, var(--gp-accent) 28%, transparent);
  border-radius: 20px;
  padding: 1px 5px;
  font-size: 7.5px;
  font-weight: 700;
  align-self: flex-start;
}
/* — Footer — */
.gp-footer {
  background: var(--gp-footer);
  flex-shrink: 0;
}
.gp-footer-inner {
  display: flex;
  gap: 12px;
  padding: 8px 10px 6px;
}
.gp-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.gp-footer-name {
  font-size: 8px;
  font-weight: 700;
  color: #fff;
}
.gp-footer-sub {
  font-size: 7px;
  color: rgba(255,255,255,.4);
}
.gp-footer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gp-footer-nav span {
  font-size: 7.5px;
  color: rgba(255,255,255,.6);
}
.gp-footer-bar {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 4px 10px;
  font-size: 7px;
  color: rgba(255,255,255,.35);
}

/* ===== TOON-MEER filter ===== */
.filter-meer { display: contents; }
.toon-meer-btn {
  background: none; border: none; padding: 4px 0;
  font-size: 12px; color: var(--kms-primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.toon-meer-btn:hover { color: var(--kms-primary-hover); }

/* ===== MOBILE NAV EXTRAS ===== */
.kms-mobile-nav-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); padding: 12px 14px 4px;
}
.kms-mobile-nav-divider { height: 1px; background: var(--border-color); margin: 8px 0; }
.kms-mobile-nav-item-admin {
  display: flex; align-items: center; gap: 8px;
  background: var(--pill-green-bg); color: var(--pill-green-text);
  border-radius: var(--kms-radius); padding: 10px 14px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: filter .15s;
}
.kms-mobile-nav-item-admin:hover { filter: brightness(.95); text-decoration: none; }
.kms-mobile-nav-item-logout {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--kms-radius);
  color: var(--pill-rose-text); font-size: 14px; font-weight: 500;
  border: 1.5px solid var(--pill-rose-text); text-decoration: none;
  transition: background .15s;
}
.kms-mobile-nav-item-logout:hover { background: var(--pill-rose-bg); text-decoration: none; }

/* ===== ADMIN MOBILE SIDEBAR ===== */
@media (max-width: 900px) {
  .admin-sidebar {
    transform: translateX(-100%);
    width: var(--kms-sidebar-width) !important;
    transition: transform .25s;
    z-index: 201;
  }
  .admin-sidebar.mobile-open { transform: translateX(0); }
  .admin-main { margin-left: 0 !important; }
  .admin-mobile-overlay {
    display: none;
    position: fixed; top: var(--bars-h, 0); right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.45); z-index: 200;
    cursor: pointer;
  }
  .admin-mobile-overlay.open { display: block; }
  .admin-topbar { padding: 0 16px; }
}

/* ===== TABLE RESPONSIVE (tablet) ===== */
@media (max-width: 900px) {
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data-table { min-width: 700px; }
}

/* ===== Row action menu (3-dot / kms-row-menu) ===== */
.kms-row-menu-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  /* 30px, gelijk aan .row-menu-btn in OMS. */
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.kms-row-menu-btn:hover, .kms-row-menu-btn.active {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
.kms-row-menu-dots { display:flex; gap:3px; align-items:center; }
.kms-row-menu-dots span { width:4px; height:4px; border-radius:50%; background:currentColor; display:block; }

.kms-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  min-width: 220px;
  padding: 6px;
  animation: kmsDropFadeIn .12s ease;
}
@keyframes kmsDropFadeIn {
  from { opacity:0; transform:translateY(-6px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
/* Maatvoering gelijk aan .row-dropdown-item in OMS. */
.kms-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background .1s;
  user-select: none;
  white-space: nowrap;
}
.kms-dropdown-item:hover { background: var(--bg-card-hover, var(--bg-hover, #f5f5f5)); }
/* Het eerste item had een grijze achtergrond — dat las als "geselecteerd"
   terwijl er niets geselecteerd is, en OMS kent die uitzondering niet. Weg. */
.kms-dropdown-item svg { flex-shrink:0; opacity:.65; }
.kms-dropdown-item.is-disabled { color: var(--text-muted); cursor: default; opacity: .6; }
.kms-dropdown-item.is-disabled:hover { background: transparent; }
a.kms-dropdown-item { text-decoration: none; }
a.kms-dropdown-item:hover { text-decoration: none; color: var(--text-primary); }
button.kms-dropdown-item { width: 100%; background: none; border: 0; font-family: inherit; text-align: left; }
.kms-dropdown-divider { height:1px; background:var(--border-color, #e5e7eb); margin:4px 0; }
.kms-dropdown-danger { color: var(--color-danger, #e11d48) !important; }
.kms-dropdown-danger svg { opacity:1; color: var(--color-danger, #e11d48); }

/* ===== KLIK-EN-HOUD-VAST (kmsInitHoldActie in js/app.js) =====
   Letterlijke poort van .hold-knop uit OMS. De balk loopt ACHTER de inhoud langs
   en kleurt mee met de knop (currentColor), zodat dezelfde klasse op een rood
   menu-item én op een neutrale knop werkt. `touch-action: none` houdt het
   vasthouden op mobiel bij de knop in plaats van dat het als scroll geldt. */
.hold-knop {
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.hold-knop > * { position: relative; z-index: 1; }
.hold-vulling {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 0;
  width: 0;
  background: currentColor;
  opacity: .18;
  border-radius: inherit;
  pointer-events: none;
  transition: width 140ms linear;
}
.hold-knop.is-bezig { background: color-mix(in srgb, currentColor 8%, transparent); }
.hold-hint {
  margin-left: auto;
  padding-left: 10px;
  font-size: 11.5px;
  opacity: .7;
  white-space: nowrap;
}
/* Bewust GÉÉN prefers-reduced-motion-uitzondering: de balk is geen versiering
   maar de voortgang zelf — zonder animatie staat hij meteen vol terwijl de
   actie nog niet bevestigd is. */

/* ===== ADMIN MOBILE (≤768px — telefoon + iPad portrait) ===== */
@media (max-width: 768px) {

  /* --- Content padding --- */
  .admin-content { padding: 14px 12px !important; }

  /* --- Topbar: verberg naam (avatar blijft zichtbaar) --- */
  .admin-topbar-actions > div > span { display: none; }

  /* --- KPI-grid: forceer 2-koloms op telefoon (overschrijft inline repeat(5,1fr)) --- */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .kpi-value { font-size: 20px; }

  /* --- Inline 2-koloms grids in modals/forms collapsen naar 1 kolom --- */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:3fr 2fr"],
  div[style*="grid-template-columns: 3fr 2fr"],
  div[style*="grid-template-columns:1fr 360px"],
  div[style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Tabel → kaart-stack --- */
  .data-table-wrap { overflow-x: visible !important; }
  table.data-table {
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  table.data-table thead { display: none; }
  table.data-table tbody { display: block; }
  table.data-table tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--kms-radius);
    padding: 10px 14px;
    margin-bottom: 10px;
  }
  /* Lege-state rij (colspan) niet als kaart stylen */
  table.data-table tr:has(td[colspan]) {
    border: none;
    background: transparent;
    padding: 0;
  }
  table.data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: none !important;
    text-align: right;
    font-size: 13px;
  }
  table.data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    flex: 0 0 auto;
    max-width: 45%;
  }
  /* Cel zonder label (checkbox, afbeelding) of met leeg label: geen ::before */
  table.data-table td[data-label=""]::before,
  table.data-table td:not([data-label])::before { content: none; }
  /* Colspan-cel (leeg resultaat): volledige breedte, tekst gecentreerd */
  table.data-table td[colspan] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 24px 0 !important;
  }
  table.data-table td[colspan]::before { content: none !important; }
  /* Acties-cel: rechts uitlijnen met scheidingslijn */
  table.data-table td.cell-actions {
    justify-content: flex-end;
    padding-top: 10px !important;
    margin-top: 6px;
    border-top: 1px solid var(--border-color) !important;
  }
  /* Afbeelding in eerste cel klein houden */
  table.data-table td[data-label=""] > div { width: 52px !important; height: 52px !important; }
  table.data-table td[data-label=""] img { width: 100% !important; height: 100% !important; }

  /* --- Filter-bars: altijd wrappen --- */
  .data-table-filters,
  div[style*="display:flex"][style*="margin-bottom:16px"],
  div[style*="display:flex"][style*="margin-bottom: 16px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* --- Instellingen sidenav → uitklapbaar menu i.p.v. vaste zijbalk --- */
  .settings-layout { flex-direction: column !important; gap: 0 !important; }
  .settings-sidenav-toggle { display: flex !important; }
  .settings-sidenav {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 0;
    margin-bottom: 14px;
  }
  .settings-sidenav.open { display: flex !important; }
  .settings-sidenav .nav-item { font-size: 13px; }
  .settings-content { padding: 0 !important; }

  /* --- Events-log: IP-kolom op mobiel verbergen --- */
  table.data-table td[data-label="IP"] { display: none !important; }

  /* --- Chart wrapper op mobiel wat compacter --- */
  .chart-wrap { padding: 14px !important; }

  /* --- Page-header (product-bewerk, pakket-bewerk): knoppenrij wrapt --- */
  .page-header { flex-wrap: wrap !important; row-gap: 10px !important; }
  .page-header-actions { flex-wrap: wrap !important; row-gap: 8px !important; }

  /* --- Instellingen · Thema-tab: grids/knoppen stacken op mobiel --- */
  .theme-color-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .logo-upload-grid { grid-template-columns: 1fr !important; }
  .theme-mode-picker { flex-wrap: wrap !important; }
  .theme-mode-btn, .theme-mode-btn--wide { width: 100% !important; max-width: 220px; }
  .thema-gen-grid, .thema-gen-grid.has-preview {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .thema-gen-left, .thema-gen-right { overflow: visible !important; }

  /* --- Instellingen · PDF-Preview-tab: typelijst boven preview --- */
  .pdf-preview-grid { grid-template-columns: 1fr !important; }

  /* --- Instellingen · Kleuren-tab: header wrapt, zoekveld schaalt mee --- */
  .kleuren-tab-header { flex-wrap: wrap !important; row-gap: 10px !important; }
  .kleuren-tab-header-actions { flex-wrap: wrap !important; width: 100% !important; row-gap: 10px !important; }
  .kleuren-tab-search-wrap { flex: 1 !important; min-width: 160px; }
  .kleuren-tab-search-wrap .form-input { width: 100% !important; }

  /* --- Product-bewerk · Webharvester-picker: zoekbalk wrapt ---
     Onder deze breedte past een vast zoekveld naast de filterknoppen niet meer;
     dan wikkelt de balk en groeit het veld weer mee over de volle regel. */
  .wh-picker-searchbar { flex-wrap: wrap !important; }
  .wh-picker-searchbar .search-wrap { flex: 1 1 100% !important; }

  /* Het filterpaneel draagt twee kolommen van 268px naast elkaar; die passen
     hier niet meer, dus ze komen onder elkaar te staan. De scheidingslijn moet
     dan mee van links naar boven. */
  .wh-fg-kolommen { flex-direction: column !important; }
  .wh-fg-kolom { width: auto !important; }
  .wh-fg-kolom + .wh-fg-kolom {
    border-left: none !important;
    border-top: 1px solid var(--border-color) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   BULK-BESTELLING — product-pagina
   ═══════════════════════════════════════════════════════ */
/* Ook het statusfilter op ?p=mijn-bestellingen hangt hieraan (.order-filter /
   .order-filter-btn) — daar zijn de segmenten links, geen knoppen. */
.product-order-mode-toggle,
.order-filter {
  display: flex; gap: 3px; padding: 3px; width: fit-content; max-width: 100%;
  background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 10px;
  overflow-x: auto;
}
.mode-btn,
.order-filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; border-radius: 8px; text-decoration: none;
  padding: 7px 16px; font-size: 13px; font-weight: 500; white-space: nowrap;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.order-filter-btn { padding: 7px 14px; }
.order-filter-btn:hover { color: var(--text-primary); text-decoration: none; }
.mode-btn--active { background: var(--bg-card); color: var(--text-heading); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.product-bulk {
  margin-top: 40px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--kms-radius-xl); overflow: hidden;
}
.product-bulk + .product-tabs { margin-top: 32px; }
.product-bulk-kop {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--border-color);
}
.product-bulk-kop h2 { margin: 0; font-size: 17px; color: var(--text-heading); }
.product-bulk-kop span { font-size: 13px; color: var(--text-muted); }
.bulk-matrix-scroll { overflow-x: auto; }

.bulk-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.bulk-matrix thead th {
  padding: 10px 6px; text-align: center; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-subtle);
}
.bulk-matrix thead th.bulk-kleur-col,
.bulk-matrix thead th.bulk-som-col {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.bulk-matrix thead th.bulk-kleur-col { text-align: left; padding-left: 22px; min-width: 150px; }
.bulk-matrix thead th.bulk-som-col  { text-align: right; padding-right: 22px; }
.bulk-matrix tbody tr { border-top: 1px solid var(--border-color); }
.bulk-matrix tbody th.bulk-kleur-header {
  padding: 8px 12px 8px 22px; text-align: left; white-space: nowrap;
  font-weight: 500; color: var(--text-primary);
}
.bulk-kleur-naam { display: inline-flex; align-items: center; gap: 10px; }
.bulk-matrix tbody td { padding: 8px 4px; text-align: center; }
.bulk-matrix tbody td.bulk-rij-som {
  padding-right: 22px; text-align: right; white-space: nowrap;
  font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.bulk-qty {
  width: 56px; height: 38px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid var(--border-color); border-radius: 8px;
  font-size: 14px; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--bg-card); color: var(--text-primary);
  -moz-appearance: textfield;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.bulk-qty::placeholder { color: var(--text-muted); }
.bulk-qty::-webkit-outer-spin-button,
.bulk-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bulk-qty:focus { outline: none; border-color: var(--kms-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kms-primary) 18%, transparent); }
.bulk-qty.has-value { border-color: var(--kms-accent); background: var(--kms-accent-light); font-weight: 700; }
.bulk-na { color: var(--text-muted); font-size: 18px; }
.bulk-kleur-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  background-clip: padding-box; /* gradient binnen de cirkel houden — zie .kleur-dot */
  flex-shrink: 0;
  vertical-align: middle;
}
.bulk-matrix-foot {
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--border-color); background: var(--bg-subtle);
}
.bulk-totaal { display: flex; flex-direction: column; gap: 2px; }
.bulk-totaal-stuks { font-size: 12px; color: var(--text-muted); }
.bulk-totaal-bedrag { font-size: 20px; font-weight: 700; color: var(--kms-accent); font-variant-numeric: tabular-nums; }
.bulk-totaal-euro { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.bulk-saldo-na:empty { display: none; }
.bulk-acties { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   WINKELMAND — euro-hint
   ═══════════════════════════════════════════════════════ */
.cart-euro-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }

/* ── Pakket-groepen in winkelmand ──────────────────────────────────────────── */
.cart-pakket-group {
  border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 12px;
}
.cart-pakket-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.cart-pakket-header-img {
  width: 72px;
  height: 72px;
  border-radius: var(--kms-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-pakket-header-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.cart-pakket-header-info { flex: 1; min-width: 0; }
.cart-pakket-header-naam { font-weight: 600; font-size: 14px; color: var(--text-heading); }
.cart-pakket-group.is-ongeldig { border-color: var(--color-orange); box-shadow: 0 0 0 1px var(--color-orange); }
.cart-pakket-group.is-ongeldig .cart-pakket-children { opacity: .55; }
.cart-pakket-melding {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px;
  font-size: 13px; line-height: 1.45; color: var(--pill-amber-text);
  background: var(--pill-amber-bg); border-bottom: 1px solid var(--border-color);
}
.cart-pakket-melding span { flex: 1; min-width: 0; }
.cart-pakket-melding .btn { flex-shrink: 0; }
.cart-pakket-badge { font-size: 10px; vertical-align: middle; }
.cart-pakket-bruto { font-size: 12px; font-weight: 400; color: var(--text-muted); text-decoration: line-through; }
.cart-pakket-children { padding: 10px 14px 14px; display: grid; gap: 6px; }
/* Dezelfde kolomlogica als .cart-maat-rij bij een los product: de maatkolom is
   62px breed zodat de pillen over alle regels onder elkaar staan. Prijs per stuk
   en subtotaal zijn `auto` en niet vast — de admin-weergave zet er een euro-hint
   achter, en in een vaste kolom loopt die eruit. */
.cart-pakket-child {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 62px auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: var(--kms-radius);
  background: var(--bg-subtle);
}
.cart-pakket-child-img {
  width: 48px; height: 48px; border-radius: var(--kms-radius-sm); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.cart-pakket-child-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.cart-pakket-child-info { min-width: 0; display: grid; gap: 2px; }
.cart-pakket-child-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-pakket-child-meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cart-pakket-child-maat { justify-self: start; }
.cart-pakket-child-per { font-size: 11px; color: var(--text-muted); white-space: nowrap; text-align: right; }
.cart-pakket-child-prijs { font-size: 13px; font-weight: 700; color: var(--kms-accent); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Pakket-groepen in cart-dropdown ───────────────────────────────────────── */
/* Kop is een gewone .cart-dropdown-item; de regels springen in tot onder de naam (16px + 56px beeld + 10px gap). */
.cart-dropdown-pakket-lines {
  margin: -2px 16px 6px 82px; padding-left: 10px;
  border-left: 2px solid var(--border-color);
}
.cart-dropdown-pakket-line { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 11px; }
.cart-dropdown-pakket-line-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.cart-dropdown-pakket-line-meta { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.cart-kleur-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--border-color); background-clip: padding-box; /* zie .kleur-dot */
}

/* ===== Quill-inhoud (publieke weergave, o.a. juridische documenten) ===== */
.ql-view p { margin: 0 0 0.8em; }
.ql-view p:last-child { margin-bottom: 0; }
.ql-view ul, .ql-view ol { padding-left: 1.4em; margin: 0 0 0.8em; }
.ql-view li { margin: 0 0 0.3em; }
.ql-view h2 { font-size: 17px; margin: 24px 0 8px; }

/* ===== PAGE TOOLBAR (filterbalk patroon) ===== */
.mb-4 { margin-bottom: 16px; }
.card-body { padding: 0; }
/* VERVALLEN — gebruik .table-card-head.table-card-toolbar (zie het
   lijstpagina-patroon onderaan dit bestand). Blijft staan zolang er nog een
   view op staat; zet hem niet op nieuwe pagina's. */
.page-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-search { position: relative; flex: 1; min-width: 180px; max-width: 340px; }
.toolbar-search .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.toolbar-search .form-input  { padding-left: 32px; }
.btn-toolbar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius); cursor: pointer; color: var(--text-primary); transition: background .12s, border-color .12s; }
.btn-toolbar:hover { background: var(--bg-subtle); border-color: var(--border-color); }
.filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--kms-primary); color: #fff; font-size: 10px; font-weight: 700; }

/* Filter dropdown panel (admin toolbar variant) */
.filter-panel-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 300; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--kms-radius-lg); box-shadow: 0 6px 20px rgba(0,0,0,.12); min-width: 240px; padding: 12px; display: none; }
.filter-panel-dropdown.open { display: block; }
.filter-section { margin-bottom: 12px; }
.filter-section:last-child { margin-bottom: 0; }
.filter-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.filter-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-color); margin-top: 4px; }
.results-label { font-size: 12px; color: var(--text-muted); }

/* View toggle pill */
.bk-view-toggle { display: inline-flex; align-items: center; background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 999px; padding: 3px; gap: 2px; }
.bk-view-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: none; background: transparent; border-radius: 999px; cursor: pointer; color: var(--text-muted); transition: background .15s, color .15s; }
.bk-view-btn:hover { background: var(--border-color); color: var(--text-primary); }
.bk-view-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── Sectiekop boven een tabel (.bk-section-hdr) ────────────────────────────
   Gelijk aan `.orders-blok-kop` op OMS' ?page=orders: dezelfde maatvoering als
   .table-card-head, zodat een kaart met een sectiekop en een kaart met een
   bedieningskop op dezelfde pagina niet uit de pas lopen.

   BEWUST GEEN GRIJZE VULLING meer. Die had de kop even zwaar gemaakt als de
   kolomkoprij eronder (die is óók grijs), waardoor er twee koppen op elkaar
   leken te staan en de sectiekop als een tweede tabelkop las. De streep eronder
   is genoeg om te zeggen dat hier een lijst begint.

   De telling staat NAAST de naam en wordt niet met `margin-left:auto` naar de
   overkant geduwd: hij hoort bij die naam ("Wachten op goedkeuring 3"), en aan
   de rechterrand van een brede tabel is de afstand zo groot dat je hem er niet
   meer bij leest. Zelfde keuze als de badge in orders-blok-kop. */
.bk-section-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.bk-section-hdr h3 { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.bk-section-hdr > svg { flex-shrink: 0; opacity: .8; }
.bk-section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px; font-weight: 700;
}

/* Bestel-voor switch (winkelmand) + toggle-switches in modals */
.bestel-voor-switch { display: flex; border: 1px solid var(--border-color); border-radius: var(--kms-radius); overflow: hidden; }
.bestel-voor-switch-btn { flex: 1; padding: 8px 6px; border: none; border-right: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: background .15s, color .15s; }
.bestel-voor-switch-btn:last-child { border-right: none; }
.bestel-voor-switch-btn:hover { background: var(--bg-subtle); }
.bestel-voor-switch-btn.active { background: var(--kms-primary); color: #fff; font-weight: 600; }

/* Toggle switch */
.kms-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.kms-toggle input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.kms-toggle-track { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--border-color); transition: background .2s; flex-shrink: 0; }
.kms-toggle input:checked + .kms-toggle-track { background: var(--kms-primary); }
.kms-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.kms-toggle input:checked + .kms-toggle-track .kms-toggle-thumb { transform: translateX(16px); }
.kms-toggle-label { font-size: 13px; color: var(--text-secondary); }

/* Wachtwoord-validatie outline (overschrijft ook :focus) */
.form-input.ww-valid,
.form-input.ww-valid:focus   { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.25) !important; }
.form-input.ww-invalid,
.form-input.ww-invalid:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.22) !important; }

/* Bootstrap-stijl pagination */
.pagination { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
.page-item .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 0; margin-left: -1px; background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s, border-color .15s; cursor: pointer; position: relative; }
.page-item .page-link:hover { background: var(--bg-subtle); color: var(--text-primary); z-index: 1; }
.page-item.active .page-link { background: var(--kms-primary); color: #fff; border-color: var(--kms-primary); font-weight: 600; cursor: default; z-index: 2; }
.page-item.disabled .page-link { opacity: .45; pointer-events: none; cursor: default; }
.page-item:first-child .page-link { border-radius: var(--kms-radius) 0 0 var(--kms-radius); margin-left: 0; }
.page-item:last-child .page-link { border-radius: 0 var(--kms-radius) var(--kms-radius) 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Zoekbare select-dropdown (js/select-dropdown.js)

   Letterlijke poort uit OMS/css/style.css, waar het component al de standaard
   is. Gebruik dit voor elke select met veel opties — een kale <select> met
   honderden merken is niet doorzoekbaar. Bij een wijziging: neem hem mee in
   OMS en PMS, anders lopen de drie kopieën uit elkaar.

   Markup-contract staat in js/select-dropdown.js.
   ══════════════════════════════════════════════════════════════════════════ */
.artikel-dropdown { position: relative; }
.artikel-dropdown-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; border-radius: var(--kms-radius);
    border: 1px solid var(--border-input); background: var(--bg-input);
    color: var(--text-primary); cursor: pointer; font-size: .875rem;
    min-height: 36px; user-select: none;
}
.artikel-dropdown-toggle:hover { border-color: var(--kms-primary); }
.artikel-dropdown-toggle .artikel-caret {
    width: 14px; height: 14px; opacity: .5; flex-shrink: 0; margin-left: 6px;
    transition: transform .15s;
}
.artikel-dropdown.open .artikel-caret { transform: rotate(180deg); }
.artikel-dropdown-toggle.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.artikel-dropdown-toggle.is-invalid { border-color: var(--color-danger); }
.artikel-dropdown-panel {
    display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--border-input);
    border-radius: var(--kms-radius); box-shadow: 0 4px 16px rgba(0,0,0,.12);
    z-index: 200; overflow: hidden;
}
.artikel-dropdown.open .artikel-dropdown-panel { display: block; }
.artikel-list { max-height: 220px; overflow-y: auto; }
.combi-search-wrap { padding: 8px; border-bottom: 1px solid var(--border-color); }
.combi-search-input {
    width: 100%; padding: 5px 8px; border-radius: var(--kms-radius);
    border: 1px solid var(--border-input); background: var(--bg-input);
    color: var(--text-primary); font-size: .85rem; box-sizing: border-box;
}
.combi-search-input:focus { outline: none; border-color: var(--kms-primary); }
.combi-search-input::placeholder { color: var(--text-muted); }
.combi-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; font-size: .875rem;
    color: var(--text-primary); transition: background .1s;
}
.combi-item:hover, .combi-item.focused { background: var(--bg-table-header); }
.combi-item.selected { background: rgba(30, 45, 110, .10); font-weight: 600; }
.combi-empty { padding: 10px 12px; font-size: .85rem; color: var(--text-muted); font-style: italic; }

/* ============================================================= */
/* Kleur-picker (geport uit OMS css/style.css)                   */
/* ============================================================= */
.kleur-picker { display: flex; flex-direction: column; gap: 6px; }
.kleur-picker.is-invalid .kleur-dots {
    outline: 2px solid var(--color-danger);
    outline-offset: 3px;
    border-radius: var(--kms-radius-sm);
}
/* Padding zodat de selected/hover box-shadow-ring + scale van het eerste/laatste
   bolletje niet tegen (en door) de rand van een clippende container wordt afgekapt. */
.kleur-dots { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 4px; }
.kleur-dot {
    position: relative;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    /* De achtergrond mag niet ónder de 2px-rand doorlopen: bij een meerkleurige
       gradient (Zwart/Rood) ligt de kleurscheiding dan tot in de randzone en
       loopt de kleur zichtbaar buiten het bolletje. */
    background-clip: padding-box;
    cursor: pointer; padding: 0; flex-shrink: 0;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    outline: none;
}
.kleur-dot:hover { transform: scale(1.18); border-color: var(--kms-primary); }
.kleur-dot.selected {
    border-color: var(--kms-primary);
    box-shadow: 0 0 0 3px var(--kms-primary-light);
    transform: scale(1.1);
}
.kleur-combo-badge {
    position: absolute; top: -5px; right: -5px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--kms-primary); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 1.5px var(--bg-card);
}
.kleur-dot-wit { border-color: var(--border-color) !important; }
.kleur-dot-wit.selected { border-color: var(--kms-primary) !important; }
.kleur-dot-meer {
    background: var(--bg-table-header) !important;
    border: 2px dashed var(--border-color) !important;
    color: var(--text-secondary);
    font-size: 17px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.kleur-dot-meer:hover { border-color: var(--kms-primary) !important; color: var(--kms-primary); transform: scale(1.12); }
.kleur-gekozen-dot {
    display: inline-block; width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid var(--kms-primary); box-shadow: 0 0 0 3px var(--kms-primary-light); flex-shrink: 0;
    background-clip: padding-box;
}
.kleur-gekozen { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.kleur-gekozen-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border-color); flex-shrink: 0; background-clip: padding-box; }
.kleur-modal-dot { width: 34px; height: 34px; }
#kleurDotTooltip {
    position: fixed;
    background: #1e293b; color: #fff;
    font-size: 11px; font-weight: 500;
    padding: 3px 8px; border-radius: 4px;
    pointer-events: none; opacity: 0; transition: opacity .12s;
    z-index: 10000; white-space: nowrap; line-height: 1.5;
}
/* Algemene tooltip van js/tooltip.js (data-tip). Verschijnt direct, waar de
   native title-tooltip ongeveer een seconde wacht. pre-line houdt de
   regelovergangen van een opsomming intact. */
#kmsTip {
    position: fixed;
    background: #1e293b; color: #fff;
    font-size: 11px; font-weight: 500;
    padding: 5px 9px; border-radius: 4px;
    pointer-events: none; opacity: 0; transition: opacity .1s;
    z-index: 10000; white-space: pre-line; line-height: 1.5;
    max-width: 320px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Paneelvariant van de tooltip (data-tip-stijl="paneel"): dezelfde witte kaart
   als het actiemenu (.kms-dropdown). Voor een tooltip die een LIJSTJE toont — een
   donker labeltje met vijf productnamen erin leest als een foutmelding. */
#kmsTip.is-paneel {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    padding: 10px 12px;
    font-size: 12.5px;
    white-space: normal;
    max-width: 280px;
}
.kms-tip-titel {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.kms-tip-regel {
    display: flex; align-items: baseline; gap: 6px;
    padding: 3px 0;
    color: var(--text-primary); line-height: 1.4;
    overflow-wrap: anywhere;
}
.kms-tip-regel + .kms-tip-regel { border-top: 1px solid var(--border-color); }

/* De kleur-modal opent bóvenop de bulk-varianten-modal → hogere z-index. */
#kleurPickerModal { z-index: 2000; }

/* Variant-kleurknop in de variantentabel: swatch + naam + caret, zelfde vorm als
   de maat-kiezer ernaast. */
.kleur-trigger-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--border-color); flex-shrink: 0;
}

/* Toegevoegde kleuren (enkel of combinatie) in de bulk-modal. */
.kleur-combi-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 8px 4px 6px; border-radius: 9999px;
    border: 1px solid var(--border-color); background: var(--bg-subtle);
    font-size: 12px; color: var(--text-primary);
}
.kleur-combi-chip-swatch {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid var(--border-color); flex-shrink: 0;
}
.kleur-combi-chip-x {
    border: none; background: none; cursor: pointer; padding: 0;
    color: var(--text-muted); font-size: 14px; line-height: 1;
}
.kleur-combi-chip-x:hover { color: var(--color-danger); }

/* ── Positie-dropdown ───────────────────────────────────────────────
   Geport uit PMS/css/style.css, samen met js/positie-dropdown.js. Bij
   wijzigingen aan het uiterlijk: PMS, OMS en KMS gelijk houden, anders
   voelt dezelfde kiezer in elk systeem anders.
   ─────────────────────────────────────────────────────────────────── */
.positie-dropdown-wrap {
  position: relative;
}

.positie-dropdown-trigger {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  font-family: inherit;
}
/* Compacte variant voor in een tabelrij (de maatkiezer in de variantentabel).
   Zonder dit is de trigger 38px hoog met 14px tekst, terwijl de kleur- en
   SKU-velden ernaast op 13px en krappe padding staan — dat geeft ongelijke
   rijhoogtes. */
.positie-dropdown-compact .positie-dropdown-trigger {
  padding: 5px 8px;
  font-size: 13px;
  min-height: 30px;
}
/* Een waarde die niet (meer) in de stamdata staat. */
.positie-dropdown-ongeldig .positie-dropdown-trigger {
  border-color: var(--color-danger);
}

.positie-dropdown-trigger:hover,
.positie-dropdown-trigger:focus {
  border-color: var(--color-primary);
  outline: none;
}
.positie-dropdown-trigger.positie-dropdown-placeholder .positie-dropdown-label {
  color: var(--text-muted);
}

/* Hoofd dropdown panel */
.positie-dropdown-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  z-index: 110;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Zoekbalk bovenin het positie-panel (vaste header) */
.positie-dropdown-search {
  flex-shrink: 0;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-card);
}
.positie-dropdown-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
}
.positie-dropdown-search-input:focus {
  border-color: var(--color-primary);
}
.positie-dropdown-search-input::placeholder {
  color: var(--text-muted);
}

/* Scrollbare lijst onder de zoekbalk */
.positie-dropdown-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}

.positie-dropdown-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.positie-dropdown-item.focused {
  background: var(--bg-table-row-hover);
}

.positie-dropdown-group {
  padding: 5px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-table-header);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  /* Zonder z-index schilderen de items die later in de DOM staan over deze
     sticky kop heen — de achtergrond is wél dekkend, maar hij ligt eronder.
     Zichtbaar als "de lijst loopt door de kop" tijdens het scrollen. */
  z-index: 2;
}

.positie-dropdown-separator {
  height: 1px;
  background: var(--border-color);
  margin: 2px 0;
}

.positie-dropdown-item {
  padding: 7px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
  white-space: nowrap;
}

/* Mobiel: panel mag niet breder zijn dan het scherm — lange positienamen
   wikkelen dan i.p.v. buiten het paneel te lopen.
   Let op: bewust een vaste `width` (geen `max-content`) — Safari/iOS clamt
   `max-content`-breedte niet altijd betrouwbaar op `max-width`, waardoor het
   paneel alsnog buiten het scherm kon lopen. */
@media (max-width: 640px) {
  .positie-dropdown-panel {
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .positie-dropdown-item {
    white-space: normal;
    word-break: break-word;
  }
}
.positie-dropdown-item:hover {
  background: var(--bg-table-row-hover);
}
.positie-dropdown-item.selected {
  color: var(--color-primary);
  font-weight: 600;
}
/* Terug-knop in de positie-kiezer (touch drill-down) */
.positie-dropdown-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-color);
}
.positie-dropdown-back:hover {
  background: var(--bg-table-row-hover);
}
.positie-dropdown-back svg {
  flex-shrink: 0;
}

/* Parent item met children: relative voor flyout positionering */
.positie-dropdown-item.has-children {
  position: relative;
  padding-right: 28px;
  color: var(--text-secondary);
  font-weight: 500;
}
.positie-dropdown-item.has-children > .pd-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}

/* Touch: los tikbaar "meer"-label (zoomt in op subposities) — de rest van de
   rij selecteert de hoofdpositie zelf. Alleen tekst + pijltje, geen pil. */
.positie-dropdown-item.has-children > .pd-drill-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  color: var(--color-primary);
}
.positie-dropdown-item.has-children > .pd-drill-btn:active {
  opacity: 0.6;
}
.pd-drill-btn-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .positie-dropdown-item.has-children {
    padding-right: 68px;
  }
}

/* Flyout submenu — via JS gepositioneerd als sibling van het panel */
.positie-dropdown-flyout {
  position: absolute;
  z-index: 115;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.positie-dropdown-flyout .positie-dropdown-item {
  padding: 7px 14px;
  font-size: 13px;
}

/* Panel dat aan <body> hangt (fixedPanel-optie): moet bóven de modal-overlay
   (z-index 1000) uitkomen, anders staat de lijst er onzichtbaar achter. De
   variant binnen de container houdt zijn lagere z-index — die concurreert
   alleen met pagina-inhoud. */
body > .positie-dropdown-panel,
body > .positie-dropdown-flyout {
  z-index: 2100;
}

/* ── Feedback-sleepzone (screenshot) ──────────────────────────────────────
   Zelfde opzet als de DTF-uploadzone: gestippelde rand, oplichten bij hover
   en tijdens slepen. De formaten en maximale grootte staan in de zone zelf,
   zodat je niet pas ná het kiezen een foutmelding krijgt. */
.fb-drop {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-page);
    transition: border-color 150ms, background 150ms;
}

.fb-drop:hover,
.fb-drop.drag-over {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

/* Toetsenbordgebruikers zien dezelfde focusring als elders in de app. */
.fb-drop:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.fb-drop svg {
    width: 26px;
    height: 26px;
    color: var(--text-secondary);
    display: block;
    margin: 0 auto 6px;
}

.fb-drop-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.fb-drop-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.fb-drop-formats {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-top: 6px;
    opacity: .7;
}

/* Regel onder de voorbeeldafbeelding: bestandsnaam + grootte links, knop rechts. */
.fb-drop-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-secondary);
    word-break: break-all;
}

/* ═══════════════════════════════════════════════════════
   WEBHARVESTER-PICKER — leveranciers- en categorieboom
   ═══════════════════════════════════════════════════════ */
/* De bomen stonden als vaste kolommen links van de resultaten; sinds het
   gecombineerde filtervak zitten ze in de zoekbalk (.wh-fg-kolom, verderop).
   De klassen hieronder tekenen de lijst zelf en gelden in beide opstellingen. */

.wh-boom-zoek {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.wh-boom-zoek .form-input {
    width: 100%;
    font-size: 12.5px;
    padding: 7px 10px;
}

.wh-boom-lijst {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.wh-boom-leeg {
    padding: 20px 12px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

/* Knoppen in de boom delen één basis; de varianten verschillen alleen in
   inspringing en gewicht, zodat de hiërarchie uit de vorm blijkt. */
.wh-boom-alles,
.wh-boom-lev-naam,
.wh-boom-merk {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    border-radius: var(--kms-radius, 8px);
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.3;
    overflow: hidden;
}

.wh-boom-alles {
    padding: 8px 10px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.wh-boom-groep { margin-bottom: 2px; }

.wh-boom-lev {
    display: flex;
    align-items: center;
    border-radius: var(--kms-radius, 8px);
}

.wh-boom-lev-naam {
    padding: 7px 10px 7px 2px;
    font-size: 12.5px;
    font-weight: 600;
    min-width: 0;
}

.wh-boom-merk {
    padding: 6px 10px 6px 34px;
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 0;
}

/* De LEVERANCIERSKOLOM is een PLATTE LIJST en geen boom: er staat geen chevron
   voor de namen, dus de linkerinspringing van .wh-boom-lev-naam — die juist
   ruimte maakt voor die knop — zou de namen tegen de rand duwen. Hover hoort
   hier op de knop zelf, want er is geen rij-element omheen. */
.wh-lev-regel { padding-left: 10px; }
.wh-lev-regel:hover { background: var(--bg-card-hover); }
.wh-lev-regel.is-actief:hover { background: var(--kms-primary, #1e2d6e); }

/* De naam mag afkappen, het aantal nooit — dat is de reden dat de kolom er is. */
.wh-boom-lev-naam,
.wh-boom-merk { white-space: nowrap; text-overflow: ellipsis; }

.wh-boom-aantal {
    float: right;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(127, 127, 127, .16);
    border-radius: 999px;
    padding: 1px 7px;
}

/* Hover op de hele leveranciersrij, niet op de naam-knop erbinnen: de chevron
   is een eigen knop en viel anders buiten de gemarkeerde vlakte. */
.wh-boom-alles:hover,
.wh-boom-lev:hover,
.wh-boom-merk:hover { background: var(--bg-card-hover); }

/* `.wh-boom-lev-naam.is-actief` is de gemarkeerde regel in de leverancier- én de
   merkkolom: allebei zijn het platte lijsten waarin de knop zelf de aanwijzing
   draagt, want er zit geen rij-element omheen dat hem kan dragen. */
.wh-boom-alles.is-actief,
.wh-boom-lev.is-actief,
.wh-boom-lev-naam.is-actief,
.wh-boom-merk.is-actief {
    background: var(--kms-primary, #1e2d6e);
    color: #fff;
}

.wh-boom-lev.is-actief .wh-boom-lev-naam,
.wh-boom-lev.is-actief .wh-boom-klap { color: #fff; }

.wh-boom-alles.is-actief .wh-boom-aantal,
.wh-boom-lev.is-actief .wh-boom-aantal,
.wh-boom-lev-naam.is-actief .wh-boom-aantal,
.wh-boom-merk.is-actief .wh-boom-aantal {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.wh-boom-klap {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--text-muted);
    padding: 0;
    margin-left: 4px;
    border-radius: 4px;
}

/* Als <span> is dit alleen een plaatshouder voor de uitlijning (leverancier
   zonder aparte merken) — die hoort niet klikbaar te lijken. */
button.wh-boom-klap { cursor: pointer; }

.wh-boom-klap svg {
    width: 12px;
    height: 12px;
    transition: transform .15s ease;
}

.wh-boom-klap.is-open svg { transform: rotate(90deg); }
.wh-boom-klap:hover { color: var(--text-primary); }

/* Aantal kleuren op de productkaart — iets nadrukkelijker dan merk en SKU,
   want dit stuurt de keuze; het is de eerste vraag bij een artikel. */
.wh-kleuren {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Welke leverancierskleur er op de foto staat, bij een actief kleurfilter. */
.wh-kleur-variant { font-weight: 600; color: var(--text-secondary); }

/* "uit 2 bronnen" — het product staat bij meerdere databronnen en de gegevens
   zijn per veld van de rijkste bron genomen. Gedempt: het is een verantwoording,
   geen eigenschap van het product, en het mag de naam en het artikelnummer niet
   wegdrukken. Alleen zichtbaar als groeperen aanstaat (zie de picker-JS). */
.wh-bronnen { color: var(--text-muted); font-size: 11px; opacity: .8; }

/* Verkoopadvies van de leverancier onderaan het kaartje, met een lijn erboven:
   dit is een ander soort informatie dan de naam en het artikelnummer. */
.wh-prijzen {
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border-color);
    display: flex; flex-direction: column; gap: 2px;
}
.wh-prijs { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.wh-prijs-label  { color: var(--text-muted); }
.wh-prijs-bedrag { font-weight: 600; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════
   WEBHARVESTER-PICKER — modal, zoekbalk en filtervak
   ═══════════════════════════════════════════════════════ */
/* Vaste hoogte: kop → zoekbalk → chiprij blijven staan, alleen de
   resultatenkolom scrollt. De basis-.modal is al een flexkolom met
   `overflow: hidden`, dus alleen de hoogte hoeft hier gezet te worden. */
#productPickerModal .modal {
    height: 90vh;
    /* Grens voor de lijsten in het filterpaneel: de modal knipt af wat er
       buiten valt (overflow: hidden), dus een paneel dat langer is dan de
       modal zou verdwijnen in plaats van te scrollen. */
    --wh-fg-lijst-max: calc(90vh - 190px);
}

/* ALLES IN DE BALK IS EVEN HOOG. Een .form-input is met zijn padding ruim 40px
   terwijl een .wh-filter-knop rond de 30 blijft; naast elkaar leest dat als een
   invoerveld dat uit de rij valt. */
.wh-picker-searchbar {
    flex-shrink: 0; display: flex; gap: 10px; align-items: center;
    padding: 12px 20px; border-bottom: 1px solid var(--border-color);
    --wh-bar-h: 32px;
}
/* Het zoekveld houdt zijn eigen maat en staat LINKS, met de filters ernaast.
   Een meegroeiend veld wordt over de volle breedte een baan van duizend pixels
   voor een woord of drie — en dan staan de filters ergens in het niemandsland
   tussen de zoekterm en de rand. */
.wh-picker-searchbar .search-wrap { position: relative; flex: 0 0 300px; max-width: 100%; }
.wh-picker-searchbar .search-wrap .form-input {
    width: 100%; padding: 0 0 0 34px;
    height: var(--wh-bar-h); font-size: 13px;
}
.wh-picker-searchbar .search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none; width: 14px; height: 14px;
}
.wh-picker-searchbar .wh-filter-knop { height: var(--wh-bar-h); }

/* Geen kolommen meer naast de resultaten: de bomen zitten in de balk erboven,
   dus de kaartjes krijgen de volle breedte. */
.wh-picker-main    { flex: 1; min-height: 0; display: flex; }
.wh-picker-results { min-height: 200px; flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ── Dropdownknop + menu ─────────────────────────────────────────────────── */
.wh-filter { position: relative; flex-shrink: 0; }
.wh-filter[hidden] { display: none; }
.wh-filter-knop {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px; font-family: inherit; font-size: 12.5px; line-height: 1.2;
    border: 1px solid var(--border-input); border-radius: var(--radius-md);
    background: var(--bg-input); color: var(--text-primary); cursor: pointer;
    white-space: nowrap;
}
.wh-filter-knop:hover { background: var(--bg-card-hover); }
/* Een gezet filter moet opvallen: anders zoek je je scheel naar waarom er maar
   twaalf producten staan. */
.wh-filter.is-gezet .wh-filter-knop {
    border-color: var(--color-primary);
    color: var(--color-primary); font-weight: 600;
}
.wh-filter-chevron { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-muted); }
.wh-filter-icoon   { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
.wh-filter.is-gezet .wh-filter-icoon { color: inherit; }
.wh-filter-swatch {
    width: 13px; height: 13px; flex-shrink: 0;
    border-radius: 3px; border: 1px solid rgba(127, 127, 127, .35);
    display: inline-block;
}
/* Het aantal actieve filters. Alleen zichtbaar als er iets aanstaat — de JS
   houdt hem verborgen bij nul, want een "0" leest als een uitkomst. */
.wh-filter-teller {
    min-width: 17px; height: 17px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--color-primary); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1;
}
.wh-filter-teller[hidden] { display: none; }

.wh-filter-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
    min-width: 200px; max-height: 320px; overflow-y: auto;
    padding: 6px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.wh-filter-menu[hidden] { display: none; }
.wh-filter-optie {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 9px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; text-align: left;
    color: var(--text-primary); border-radius: var(--radius-sm);
}
.wh-filter-optie:hover { background: var(--bg-card-hover); }
.wh-filter-optie.is-actief { background: var(--color-primary); color: #fff; }
.wh-filter-optie.is-actief .wh-boom-aantal { background: rgba(255, 255, 255, .22); color: #fff; }
/* De naam mag afkappen, het aantal nooit — daar staat het voor. */
.wh-filter-optie-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-filter-optie .wh-boom-aantal { float: none; margin-left: 0; }
/* Zoekveld boven een lange kleurenlijst. Blijft staan terwijl de opties eronder
   scrollen — anders scroll je je eigen zoekveld uit beeld. */
.wh-filter-zoek {
    position: sticky; top: -6px; z-index: 1;
    margin: -6px -6px 4px; padding: 6px;
    background: var(--bg-card); border-bottom: 1px solid var(--border-color);
}
.wh-filter-zoek .form-input { width: 100%; font-size: 12.5px; padding: 6px 9px; }
.wh-filter-leeg { padding: 12px 9px; font-size: 12px; color: var(--text-muted); text-align: center; }

/* ── ÉÉN filtervak: leverancier en categorie naast elkaar ────────────────────
   Twee losse dropdowns lieten je per stuk kijken wat er aanstond; hier staan ze
   naast elkaar in één paneel. Het generieke .wh-filter-menu is een kort
   keuzelijstje en kapt zichzelf op 320px af met een eigen scrollbalk — precies
   fout voor dit paneel, want de kolommen scrollen hier zélf. MET DE ID ERVOOR,
   want `.wh-filter-menu` hierboven wint anders op volgorde bij gelijke
   specificiteit. */
#productPickerModal .wh-filter-menu-groot {
    padding: 0; overflow: hidden; max-height: none;
    width: max-content; max-width: calc(100vw - 32px);
}
.wh-fg-kolommen { display: flex; align-items: stretch; }
/* Vaste kolomBREEDTE (de bomen mogen niet meebewegen met de langste
   leveranciersnaam, anders verspringt het paneel bij elke zoekterm), maar GEEN
   vaste hoogte: het paneel is zo hoog als zijn inhoud. */
.wh-fg-kolom {
    width: 268px; flex-shrink: 0;
    display: flex; flex-direction: column; min-height: 0;
}
.wh-fg-kolom + .wh-fg-kolom { border-left: 1px solid var(--border-color); }
.wh-fg-kolom[hidden] { display: none; }
/* De leveranciersnamen zijn korter dan merk- en categorienamen en er staat geen
   inspringing voor; een even brede kolom zou daar alleen witruimte van maken. */
.wh-fg-kolom-lev { width: 230px; }
.wh-fg-kop {
    display: flex; align-items: baseline; gap: 6px;
    margin: 0; padding: 10px 12px 0;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
}
/* De actieve keuze naast de kop — dat is wat er ná het dichtklappen nog van te
   zien is. Mag afkappen; de kop zelf nooit. */
.wh-fg-waarde {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-transform: none; letter-spacing: 0;
    font-size: 11.5px; font-weight: 600; color: var(--color-primary);
}
.wh-fg-waarde:empty { display: none; }
.wh-fg-kolom .wh-boom-zoek { padding: 8px 12px; border-bottom: none; }
/* `max-height` en niet `height`: de lijst is zo lang als hij is, en gaat pas
   scrollen als hij écht niet meer past — bij dertig leveranciers, niet bij
   acht. Daarvóór zou de schuifbalk alleen maar in de weg staan. */
.wh-fg-kolom .wh-boom-lijst {
    flex: 0 1 auto; min-height: 0; padding: 0 8px 8px;
    max-height: var(--wh-fg-lijst-max, 60vh);
    overflow-y: auto;
}

/* HET PANEEL WORDT AFGEKNIPT ALS HET NIET PAST. De modal draagt
   `overflow: hidden`, dus een paneel dat rechts buiten de kaart valt verdwijnt
   zonder schuifbalk. Dan verankert het aan de ZOEKBALK in plaats van aan zijn
   knop: de wrapper wordt `static`, de balk het referentievlak, en het paneel
   begint tegen de linkerpadding. Rechts uitlijnen kan hier niet — dan schuift
   het juist voorbij de linkerrand naar buiten. */
@media (max-width: 1250px) {
    #productPickerModal .wh-picker-searchbar { position: relative; }
    #productPickerModal #whFiltersWrap { position: static; }
    #productPickerModal .wh-filter-menu-groot { left: 20px; }
}

/* ── Actieve filters als chips, met "Filters wissen" ─────────────────────────
   De rij zit tussen de zoekbalk en de resultaten omdat ze samen één mededeling
   zijn: dit is de selectie waar de kaartjes eronder uit komen. */
.wh-actieve-filters {
    flex-shrink: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-subtle);
}
.wh-actieve-filters[hidden] { display: none; }
/* "Gefilterd op" zegt wat de rij is; zonder dat leest hij als een rij knoppen
   waarvan je moet raden of je er iets mee AANzet of UITzet. */
.wh-chip-kop {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin-right: 2px;
}
.wh-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 3px 3px 9px;
    border: 1px solid var(--border-color); border-radius: 999px;
    background: var(--bg-card); font-size: 12.5px; line-height: 1.6;
    max-width: 100%;
}
/* De SOORT gedempt, de WAARDE zwart: je leest de waarden af en gebruikt de
   soort alleen om te weten waar hij bij hoort. */
.wh-chip-kop-in { color: var(--text-muted); }
.wh-chip-waarde {
    font-weight: 600; color: var(--text-primary);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Het kruisje is een eigen doelwit binnen de chip: de chip zelf doet niets bij
   een klik — dat zou een filter kunnen wissen terwijl je alleen wilde lezen. */
.wh-chip-x {
    flex-shrink: 0;
    width: 19px; height: 19px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 999px; background: transparent;
    color: var(--text-muted); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.wh-chip-x svg { width: 11px; height: 11px; }
.wh-chip-x:hover { background: var(--color-danger); color: #fff; }
/* Wissen is geen primaire actie maar de weg terug: een tekstknop, geen knop met
   vlak — anders trekt hij meer aandacht dan de filters waar het om gaat. */
.wh-chip-alles {
    margin-left: 2px; padding: 3px 6px;
    border: none; background: transparent;
    font-size: 12.5px; font-weight: 600; color: var(--color-primary);
    cursor: pointer; border-radius: var(--radius-sm);
}
.wh-chip-alles:hover { text-decoration: underline; background: var(--bg-card-hover); }
.wh-actieve-filters .wh-filter-swatch { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   WEBHARVESTER-PICKER — resultatenraster
   ═══════════════════════════════════════════════════════ */
.wh-picker-count { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.wh-picker-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
/* Liften bij hover in plaats van een randkleur, zodat het raster als één vlak
   leest en niet als losse vakjes — zelfde kaart als .product-card. */
.wh-picker-card {
    position: relative; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--bg-card);
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.wh-picker-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wh-picker-card-img {
    aspect-ratio: 1; background: var(--bg-subtle);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* contain, niet cover: leveranciersfoto's zijn zelden vierkant en met cover valt
   het kledingstuk deels buiten het kaartje. */
.wh-picker-card-img img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; padding: 10px; box-sizing: border-box;
}
.wh-picker-noimg { width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 32px; color: var(--text-muted); }
.wh-picker-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
/* Titels wrappen (geen ellipsis): het onderscheid tussen twee producten van
   dezelfde lijn zit vaak juist in het staartje van de naam. */
.wh-picker-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.wh-picker-card-sub  { font-size: 11px; color: var(--text-muted); }
.wh-picker-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.wh-picker-pageinfo   { font-size: 13px; color: var(--text-muted); }
.wh-picker-empty { text-align: center; padding: 40px; color: var(--text-muted); }
.wh-picker-error { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════
   WEBHARVESTER-PICKER — laadweergave
   ═══════════════════════════════════════════════════════ */

/* Korte fade bij het wisselen van merk: het raster komt op en schuift 4px
   omhoog, in plaats van er hard in te knipperen. */
.wh-resultaten {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .28s ease, transform .28s ease;
}
.wh-resultaten.is-zichtbaar { opacity: 1; transform: none; }

/* Losse laadmelding (product ophalen na een klik) */
.wh-laadmelding {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 40px; color: var(--text-muted); font-size: 13px;
}
.wh-spinner {
    width: 16px; height: 16px; flex-shrink: 0;
    border: 2px solid var(--border-color);
    border-top-color: var(--kms-primary, #1e2d6e);
    border-radius: 50%;
    animation: wh-draai .7s linear infinite;
}
@keyframes wh-draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .wh-spinner { animation: none; }
    .wh-resultaten { transition: none; }
}

/* ---- Toewijzingen: het passcherm (?p=admin-toezeggingen) ---- */
/* Links een regeloverzicht dat stil staat, rechts per regel de producten met
   maatchips. Niet .modal-body scrolt maar elke kolom zelf: met sticky in één
   scrollende body schoof de rail-achtergrond toch mee. */
.tz-pas .modal-body.tz-pas-body {
    padding: 0; overflow: hidden; min-height: 0;
    display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
}
.tz-pas-kop { align-items: flex-start; gap: 14px; padding: 18px 22px 16px; }
.tz-pas-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--kms-primary-light); color: var(--kms-primary);
    font-weight: 700; font-size: 16px; text-transform: uppercase;
}
.tz-pas-kop-tekst { flex: 1; min-width: 0; }
.tz-pas-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tz-pas-naam { margin: 2px 0 4px; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--text-heading); }
.tz-pas-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--text-secondary); }
.tz-pas-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.tz-pas-saldo {
    padding: 2px 10px; border-radius: var(--kms-radius-full);
    border: 1px solid var(--border-color); background: var(--bg-subtle);
    font-size: 12px; font-weight: 600;
}
.tz-pas-opmerking { flex-basis: 100%; margin-top: 4px; color: var(--text-secondary); }

.tz-pas-rail { background: var(--bg-subtle); border-right: 1px solid var(--border-color); padding: 16px 10px; overflow-y: auto; }
.tz-pas-rail-binnen { display: grid; gap: 4px; }
.tz-pas-rail-kop { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0 10px 6px; }
#tzPasRail { display: grid; gap: 4px; }
.tz-rail-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 10px; text-align: left;
    background: none; border: 1px solid transparent; border-radius: var(--kms-radius);
    color: var(--text-primary);
}
.tz-rail-item:hover { background: var(--bg-card); border-color: var(--border-color); }
.tz-rail-item.is-actief { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--kms-shadow-sm); }
.tz-rail-naam { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-rail-status { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tz-rail-status.is-klaar { color: var(--pill-green-text); }
.tz-rail-status.is-open  { color: var(--pill-amber-text); }

.tz-pas-hoofd { min-width: 0; overflow-y: auto; }
#tzPasRegels { padding: 18px 22px 4px; display: grid; gap: 14px; }
.tz-pas-hint { padding: 4px 22px 18px; font-size: 12px; color: var(--text-muted); }

.tz-regel {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--kms-radius-lg); box-shadow: var(--kms-shadow-sm);
    scroll-margin-top: 14px;
}
.tz-regel.is-open { border-color: var(--pill-amber-border); }
.tz-regel-kop {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
}
.tz-regel-titel { flex: 1; min-width: 200px; }
.tz-regel-naam { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.tz-regel-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.tz-regel-status { display: flex; align-items: center; gap: 10px; }
.tz-regel-status .pill { font-variant-numeric: tabular-nums; }
.tz-wis {
    background: none; border: 0; padding: 4px 6px; border-radius: 6px;
    font-size: 12px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px;
}
.tz-wis:hover { color: var(--text-primary); }

.tz-optie { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; padding: 14px 16px; }
.tz-optie + .tz-optie { border-top: 1px solid var(--border-color); }
/* `flex-start` en niet `center`: de naam mag over twee regels lopen en moet dan
   bovenaan de foto blijven staan. */
.tz-optie-kop { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.tz-optie-thumb { width: 64px; height: 64px; }
.tz-optie-tekst { min-width: 0; }
.tz-optie-naam { font-weight: 600; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.tz-optie-kleur { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.tz-optie-telling { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tz-optie-telling.heeft { color: var(--kms-primary); }
.tz-swatch {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid var(--border-color); flex-shrink: 0;
}
.tz-optie-maten { min-width: 0; display: grid; gap: 10px; align-content: start; }
.tz-maatgroep { display: grid; gap: 6px; }
.tz-maatgroep-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tz-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Maatchip: tik = één stuk erbij, het minknopje haalt er één af. Het
   minknopje ligt BOVEN de chip (absolute) — als kind van de chipknop zou elke
   klik erop ook een plus afvuren. */
.tz-chip { position: relative; display: inline-flex; }
.tz-chip-knop {
    min-width: 52px; height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--border-input); border-radius: var(--kms-radius);
    background: var(--bg-card); color: var(--text-primary);
    font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background .12s, border-color .12s, color .12s;
}
.tz-chip-knop:hover { border-color: var(--kms-primary); }
.tz-chip-knop:focus-visible { outline: 2px solid var(--kms-primary); outline-offset: 2px; }
.tz-chip-n { display: none; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--kms-radius-full); background: rgba(255,255,255,.22); }
.tz-chip.heeft .tz-chip-knop { background: var(--kms-primary); border-color: var(--kms-primary); color: #fff; padding-right: 36px; }
.tz-chip.heeft .tz-chip-n { display: inline-block; }
/* De vorige maat is een voorstel en geen keuze: goud gestippeld, nooit gevuld. */
.tz-chip.vorige:not(.heeft) .tz-chip-knop { border-style: dashed; border-color: var(--kms-accent); }
.tz-chip.vorige .tz-chip-knop::after {
    content: ""; position: absolute; top: -3px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--kms-accent); border: 2px solid var(--bg-card);
}
.tz-chip.vol:not(.heeft) .tz-chip-knop { opacity: .38; cursor: not-allowed; }
.tz-chip.vol:not(.heeft) .tz-chip-knop:hover { border-color: var(--border-input); }
.tz-chip-knop:disabled { cursor: default; }
.tz-chip-min {
    display: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border: 0; border-radius: 7px;
    background: rgba(255,255,255,.18); color: #fff;
    place-items: center; font-size: 16px; line-height: 1;
}
.tz-chip-min:hover { background: rgba(255,255,255,.32); }
.tz-chip.heeft .tz-chip-min { display: grid; }

.tz-vorige { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-secondary); }
.tz-vorige::before {
    content: ""; width: 8px; height: 8px; margin-top: 4px; flex-shrink: 0;
    border-radius: 50%; background: var(--kms-accent);
}

.tz-vast {
    display: flex; align-items: center; gap: 10px; width: fit-content;
    padding: 10px 12px; border-radius: var(--kms-radius);
    background: var(--bg-subtle); font-size: 13px; color: var(--text-secondary);
}
.tz-vast strong { color: var(--text-primary); }

.tz-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-input); border-radius: var(--kms-radius); overflow: hidden; width: fit-content; }
.tz-stepper button { width: 40px; height: 40px; border: 0; background: var(--bg-card); color: var(--text-primary); font-size: 18px; }
.tz-stepper button:hover { background: var(--bg-subtle); }
.tz-stepper span { min-width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.tz-pas-voet { flex-wrap: wrap; gap: 12px 20px; }
.tz-pas-voortgang { flex: 1; min-width: 240px; display: grid; gap: 6px; }
.tz-pas-voortgang-tekst { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.tz-pas-opgeslagen { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tz-pas-opgeslagen.is-vuil { color: var(--pill-amber-text); }
.tz-pas-balk { height: 6px; border-radius: var(--kms-radius-full); background: var(--bg-subtle); overflow: hidden; }
.tz-pas-balk i { display: block; height: 100%; border-radius: inherit; background: var(--kms-accent); transition: width .2s, background .2s; }
.tz-pas-balk.is-klaar i { background: var(--color-secondary); }
.tz-pas-acties { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
    .tz-pas .modal-body.tz-pas-body { grid-template-columns: minmax(0, 1fr); }
    .tz-pas-rail { display: none; }
    .tz-optie { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 520px) {
    #tzPasRegels, .tz-pas-hint { padding-inline: 12px; }
    .tz-regel-kop, .tz-optie { padding-inline: 12px; }
    .tz-pas-acties { width: 100%; }
    .tz-pas-acties .btn-primary { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .tz-chip-knop, .tz-pas-balk i { transition: none; }
}

/* ---- "Vorige keer besteld" op de productpagina ---- */
/* De chip wordt gemarkeerd maar NIET geselecteerd: er zit hier geen mens naast
   die het nakijkt, en een verkeerde maat kost een retour. Een stippellijn en
   niet de gevulde .active-stijl, zodat het onderscheid met een echte keuze
   zichtbaar blijft. */
.chip-maat.is-vorige {
    border-style: dashed;
    border-color: var(--kms-accent);
}
.chip-maat.is-vorige.active {
    border-style: solid;
    border-color: var(--kms-primary);
}
.maat-vorige {
    margin-top: -4px; font-size: 12px;   /* staat in .product-stap-body met gap: 10px */
    color: var(--text-muted);
}

/* ═════════════════════════════════════════════════════════════════════════════
   BEHEER-MENU, GEBRUIKERSMENU EN BEKIJKEN ALS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Bekijken als: balk bovenaan ----
   Dezelfde balk-boven-alles als de dev-, onderhouds- en demomelding, en om
   dezelfde reden: de stand geldt voor het HELE scherm, dus hij hoort niet in een
   hoekje waar je langs kunt kijken. Deze is wél aanklikbaar (geen
   pointer-events:none): de weg terug moet altijd in beeld staan, ook als de
   zijbalk ingeklapt of het gebruikersmenu dicht is. */
.bekijk-als-balk {
  position: fixed; left: 0; right: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 4px 12px;
  background: #7c3aed; color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.bekijk-als-balk svg { flex-shrink: 0; }
.bekijk-als-balk strong { font-weight: 800; }
.bekijk-als-balk-terug {
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 10px; cursor: pointer;
  transition: background .15s;
}
.bekijk-als-balk-terug:hover { background: rgba(255,255,255,.26); }

/* ---- Onderste blok van de zijbalk: Beheer + Feedback ----
   Staat BUITEN .admin-sidebar-nav (die scrollt) en boven de footer: zo plakt het
   onderaan zonder dat de menu-items eronder wegvallen zodra de lijst langer is
   dan de zijbalk hoog. */
.sidebar-onderaan { padding: 0 8px 4px; flex-shrink: 0; }

button.nav-item.nav-beheer-btn {
  width: 100%; margin-bottom: 6px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit;
}
.nav-beheer-btn .nav-chevron {
  width: 14px; height: 14px; margin-left: auto; flex-shrink: 0;
  color: var(--text-muted); transition: transform .15s;
}
.nav-beheer-btn[aria-expanded="true"] { background: var(--bg-subtle); color: var(--text-primary); }
.nav-beheer-btn[aria-expanded="true"] .nav-chevron { transform: translateX(2px); }
.admin-sidebar.collapsed .nav-beheer-btn .nav-chevron { display: none; }

/* ---- Zwevend paneel (Beheer + submenu Bekijken als) ----
   position:fixed met een door JS berekende plek (kmsPlaatsFlyout in js/app.js).
   Het paneel hangt buiten <aside>: op mobiel krijgt .admin-sidebar een transform,
   en dan verankert een fixed kind zich aan de zijbalk in plaats van aan het
   venster — het zou met de weggeschoven zijbalk mee naar buiten beeld gaan. */
.kms-flyout {
  position: fixed; z-index: 600; min-width: 210px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg, 12px); box-shadow: var(--kms-shadow-lg);
  padding: 6px;
  animation: kmsDropIn .12s ease;
}

/* Dezelfde opkomst als de actiemenu's in OMS (@keyframes rowDropIn): kort, en net
   genoeg beweging om te laten zien wáár het paneel vandaan komt.
   Let op: kmsPlaatsFlyout() zet de animatie even uit terwijl het paneel gemeten
   wordt — een lopende transform zit in getBoundingClientRect() en zou het paneel
   een paar pixels naast zijn knop plaatsen. */
@keyframes kmsDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.kms-flyout-kop {
  padding: 6px 10px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
}
.kms-flyout-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px; border-radius: var(--kms-radius);
  font-size: 13px; color: var(--text-primary); text-decoration: none;
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: inherit; transition: background .15s;
  white-space: nowrap;
}
.kms-flyout-item:hover { background: var(--bg-subtle); text-decoration: none; }
.kms-flyout-item svg { flex-shrink: 0; color: var(--text-muted); }
.kms-flyout-item.is-actief { background: var(--kms-primary-light); color: var(--kms-primary); font-weight: 600; }
.kms-flyout-item.is-actief svg { color: var(--kms-primary); }
.kms-flyout-item:disabled { opacity: .5; cursor: not-allowed; }
.kms-flyout-item:disabled:hover { background: none; }
.kms-flyout-divider { height: 1px; background: var(--border-color); margin: 5px 4px; }
.kms-flyout-chevron { margin-left: auto; color: var(--text-muted); }

/* Rol-regel in het submenu: de rol groot, de uitleg klein eronder — je kiest een
   stand, niet een persoon, dus de gevolgen horen bij de keuze te staan. */
.ba-rol-item { align-items: flex-start; }
.ba-rol-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ba-rol-naam { font-weight: 600; }
.ba-rol-hint { font-size: 11px; color: var(--text-muted); white-space: normal; max-width: 230px; line-height: 1.35; }

/* ---- Gebruikersmenu in de admin-topbar ----
   Eigen klassen en niet .account-dropdown: die wordt onder 768px verborgen (de
   webshop heeft daar een hamburgermenu), en in het beheerpaneel is dit menu juist
   de enige plek waar uitloggen en het thema staan. */
.gebruiker-menu { position: relative; }
.gebruiker-menu-knop {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border-color); border-radius: 24px;
  background: var(--bg-card); cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  transition: border-color .15s, box-shadow .15s;
}
.gebruiker-menu-knop:hover { border-color: var(--kms-primary); box-shadow: 0 0 0 3px var(--kms-primary-light); }
.gebruiker-menu-naam { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebruiker-menu-chevron { color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.gebruiker-menu.open .gebruiker-menu-chevron { transform: rotate(180deg); }

.gebruiker-menu-paneel {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 260px; z-index: 500;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--kms-radius-lg, 12px); box-shadow: var(--kms-shadow-lg);
  padding: 6px;
}
.gebruiker-menu.open .gebruiker-menu-paneel { display: block; animation: kmsDropIn .12s ease; }

/* De kop toont wie het scherm NU is. Tijdens bekijken-als staat de bekeken ROL
   eronder — de vraag "op wiens rechten draait dit en wie ben ik echt" moet in één
   blik te beantwoorden zijn, anders is de stand gevaarlijk. */
/* Eén linkerkant voor het hele paneel: kop, themaregel en de knoppen staan
   allemaal op 12px, net als in OMS. Stond de knop op een andere inspring dan de
   naam erboven, dan leest het paneel als twee losse blokjes. */
.gm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border-radius: var(--kms-radius);
  font-size: 13.5px; color: var(--text-primary); text-decoration: none;
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.gm-item:hover { background: var(--bg-subtle); text-decoration: none; }
.gm-item svg { flex-shrink: 0; }

.gm-kop { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.gm-kop-tekst { display: flex; flex-direction: column; min-width: 0; }
.gm-kop-naam { font-size: 13px; font-weight: 700; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; }
.gm-kop-rol  { font-size: 11.5px; color: var(--text-muted); }
.gm-echt {
  padding: 0 12px 8px;
  font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
}
.gm-echt strong { color: var(--text-primary); font-weight: 600; }
/* De themaregel is geen menu-ITEM: er valt niets aan te klikken behalve de
   schakelaar zelf, dus hij krijgt ook geen hoverstand die een handeling belooft. */
.gm-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 12px; font-size: 13.5px; color: var(--text-primary);
}
/* Dezelfde kleurtaal als in OMS: geel = je komt terug, rood = de sessie is voorbij.
   Kleur op de TEKST én het icoon, en een gewone hover — een gevulde rode achtergrond
   maakt van uitloggen de nadrukkelijkste knop in het paneel, terwijl het de knop is
   die je het minst vaak bedoelt.

   Terug naar beheerder staat bewust niet náást uitloggen: twee knoppen die allebei
   "hier weg" zeggen is de plek waar je de verkeerde indrukt. */
.gm-terug { color: var(--color-warning); }
.gm-terug svg { color: var(--color-warning); }
.gm-uitloggen { color: var(--color-danger); }
.gm-uitloggen svg { color: var(--color-danger); }

@media (max-width: 768px) {
  .gebruiker-menu-naam { display: none; }
  .gebruiker-menu-paneel { min-width: 240px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIJSTPAGINA-PATROON (overgenomen uit OMS — zie OMS/CLAUDE.md)

   Eén taal voor elke overzichtspagina in het beheerpaneel, zodat KMS, OMS en
   PMS er hetzelfde uitzien:

     <div class="card table-card mb-4">            ← horizontale bedieningskaart
       <div class="table-card-head table-card-toolbar">
         <div class="toolbar-search">…</div>
         <div class="table-card-acties">…knoppen, snelfilters, tellers…</div>
       </div>
     </div>
     <div class="card table-card">                 ← de tabelkaart
       <div class="data-table-wrap"><table class="data-table">…</table></div>
     </div>

   ER STAAT GEEN PAGINATITEL MEER op een beheerpagina: het sidebar-item dat
   aanstaat wijst de pagina al aan, en dezelfde naam in de topbar én in een
   .page-header erboven zegt niets extra's. De <h1> blijft wél in de DOM
   (.page-title-verborgen in index.php) — een pagina zonder kop is voor een
   schermlezer niet te overzien.

   Alles wat RECHTS hoort gaat in .table-card-acties; dat is de enige plek met
   `margin-left: auto`. Zet er geen tweede naast — twee auto-marges delen de
   vrije ruimte en parkeren het element midden in de balk.
   ══════════════════════════════════════════════════════════════════════════ */
.table-card { padding: 0; overflow: hidden; box-shadow: var(--kms-shadow-sm); }
.table-card-head { padding: 14px 16px; }
/* De streep hoort ONDER de kop, dus alleen als er nog iets volgt. In de
   bedieningskaart is de kop het enige kind en zou een streep vlak boven de
   kaartrand een dubbele lijn geven. `:last-child` en niet `:only-child`: op
   pagina's waar een <form> om de kop heen staat is de kop het laatste kind van
   dát formulier, niet van de kaart. */
.table-card-head:not(:last-child) { border-bottom: 1px solid var(--border-color); }
.table-card-head h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-heading);
}
.table-card-head h3 svg { flex-shrink: 0; opacity: .8; }
/* De kop ALS filterbalk: zoekvak links, acties rechts. */
.table-card-head.table-card-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.table-card-toolbar .toolbar-search { flex-shrink: 1; min-width: 200px; }
.table-card-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
/* De tabel loopt flush met de kaartrand: .data-table-wrap is binnen een
   table-card alleen nog het scrollgebied, niet meer een tweede kader. */
.table-card > .data-table-wrap {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Een brede tabel (veel kolommen) moet BINNEN de kaart kunnen schuiven en niet
     tegen de rand afgeknipt worden: de basisregel hierboven staat op
     `overflow: hidden`, en dat is voor de afgeronde hoeken van een lósse
     tabelkaart bedoeld, niet voor de inhoud. Vervangt de handgemaakte
     `<div style="overflow-x:auto">` die hier en daar om een tabel stond. */
  overflow-x: auto;
}
.table-card .data-table { margin: 0; }
/* Een uitklappaneel (filterdropdown) mag niet door de afgeronde hoeken van de
   kaart worden afgeknipt. */
.table-card:has(.filter-panel-dropdown) { overflow: visible; }

/* Meldingsrij in een verder lege tabelkaart. */
.table-card-leeg { padding: 26px 16px; font-size: 13px; text-align: center; color: var(--text-muted); }

/* Verborgen paginatitel — blijft in de DOM voor schermlezers, staat niet in beeld. */
.page-title-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Productminiatuur in een lijsttabel ──
   Eén maat en één kader voor élke productlijst (?p=admin-producten,
   ?p=bedrijf-catalogus). `object-fit: contain` en niet `cover`: een productfoto
   is een uitgeknipt kledingstuk op een vlakke ondergrond, en bijsnijden hakt
   daar mouwen of een kraag af. De ondergrond vult dan de rest van het vierkant. */
.tabel-thumb {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border-color); background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center;
}
.tabel-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* Zonder foto: hetzelfde vierkant met een silhouet, zodat de kolom niet
   verspringt en een ontbrekende foto als ontbrekend te herkennen is. */
.tabel-thumb-leeg { border-color: transparent; color: var(--text-muted); }

/* ── Kleurbolletje in een lijsttabel ──
   Zelfde maat en rand als kleurBolletjeHtml() in OMS (php/kleuren_helpers.php):
   18px, één haarlijn in de themarand. De eerdere KMS-variant was 20px met een
   vaste zwarte rand op 15% — die bleef in het donkere thema als een lichte ring
   om elk bolletje staan. De achtergrond (hex of gradient) komt van
   kleurNaarBg() en staat als inline style op het element. */
.kleur-bolletje {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  vertical-align: middle;
}
/* Kleiner, voor een bolletje dat NAAST tekst in dezelfde regel staat (de kolom
   Kleur op ?p=admin-voorraad, de variantkop in de bestellingmodal): daar mag het
   de regelhoogte niet oprekken. */
.kleur-bolletje-sm { width: 15px; height: 15px; }
.kleur-bolletjes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Bolletje MÉT naam eronder. Een rij kale bolletjes dwingt je te hoveren voor de
   kleurnaam, en op een tabelrij met acht kleuren doet niemand dat acht keer. */
.kleur-bolletje-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  max-width: 74px;
}
.kleur-bolletje-naam {
  font-size: 10px; line-height: 1.2; color: var(--text-muted);
  text-align: center; word-break: break-word;
}

/* ── Maatpil (.maat-pill) ──
   Poort van .maat-pill uit OMS (css/style.css): de maat als tekst, het aantal als
   gevuld rondje erachter, alles in één ronde pil. De KMS-variant was een rechthoek
   met twee gelijkwaardige helften (.vr-maat-chip) — daar moest je bij elke chip
   opnieuw lezen wélke helft de maat was en welke het aantal.

   `min-width: 22px` op het eerste deel houdt een rij S/M/L/XL/XXL netjes onder
   elkaar uitgelijnd. De statusklasse kleurt de pil én het rondje mee. */
.maat-pillen { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.maat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 4px 1px 8px;
  margin: 1px 3px 1px 0;
  border-radius: var(--kms-radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  vertical-align: middle;
}
/* Zonder aantal blijft het een gewone pil: dan is er rechts geen rondje dat de
   extra ruimte opvult. */
.maat-pill:not(:has(.maat-pill-aantal)) { padding: 1px 8px; }
.maat-pill > :first-child { min-width: 22px; }
.maat-pill-aantal {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: var(--kms-radius-full);
  background: var(--kms-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Zelfde ladder en kleuren als ?page=order-detail in OMS: rood = besteld maar
   niets binnen (of in de min) · oranje = onderweg, het rondje toont dan "3/8" ·
   groen = ligt er. */
.maat-pill.is-open   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.maat-pill.is-open   .maat-pill-aantal { background: #dc2626; }
.maat-pill.is-deels  { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.maat-pill.is-deels  .maat-pill-aantal { background: #d97706; padding: 1px 7px; }
.maat-pill.is-binnen { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.maat-pill.is-binnen .maat-pill-aantal { background: #16a34a; }
[data-theme="dark-v2"] .maat-pill.is-open   { background: rgba(127,29,29,.3); border-color: rgba(220,38,38,.5); color: #fecaca; }
[data-theme="dark-v2"] .maat-pill.is-open   .maat-pill-aantal { background: #b91c1c; color: #fff; }
[data-theme="dark-v2"] .maat-pill.is-deels  { background: rgba(120,53,15,.3); border-color: rgba(180,83,9,.5); color: #fde68a; }
[data-theme="dark-v2"] .maat-pill.is-deels  .maat-pill-aantal { background: #b45309; color: #fff; }
[data-theme="dark-v2"] .maat-pill.is-binnen { background: rgba(20,83,45,.3); border-color: rgba(22,163,74,.5); color: #bbf7d0; }
[data-theme="dark-v2"] .maat-pill.is-binnen .maat-pill-aantal { background: #15803d; color: #fff; }
.vr-hist-verwacht td { background: var(--bg-subtle); color: var(--text-secondary); }
.maat-pill.is-leeg   { color: var(--text-muted); }
.maat-pill.is-leeg   .maat-pill-aantal { background: var(--text-muted); }

/* ── Modal met een VASTE hoogte (poort van .modal-vaste-hoogte in OMS) ──
   Voor een modal waarvan de inhoud tijdens het gebruik van hoogte verandert:
   de voorraadhistorie laadt zijn regels na, en bij het afboeken groeit en krimpt
   de maatlijst bij elke klik. Met een meegroeiende hoogte springt het hele
   venster dan onder je muis vandaan — de knop die je net indrukte staat na de
   eerste klik ergens anders.

   De basis-.modal is al een flexkolom met een scrollende .modal-body, dus alleen
   de hoogte hoeft hier gezet te worden. 88vh past binnen de 2×16px padding van
   .modal-overlay; het plafond houdt hem op een hoog scherm binnen leesbare
   proporties. */
.modal-vaste-hoogte { height: 88vh; max-height: 900px; }

/* ══════════════════════════════════════════════════════════════════════════
   BESTELLING-DETAILMODAL (views/_bestelling_modal.php)

   Stond als inline <style> in views/admin/bestellingen.php en is hieruit
   gehaald toen ?p=bedrijf-bestellingen dezelfde modal kreeg: de bedrijfsadmin
   zag daar een kale tabel terwijl de superadmin de tweekolomsweergave had, en
   twee implementaties lopen bij de eerste wijziging uiteen.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Bestelling detail modal ─────────────────────────────────────────────── */
.best-modal-body { padding:0 !important; overflow:hidden !important; display:flex; flex-direction:column; }
.best-modal-cols { display:grid; grid-template-columns:280px 1fr 320px; flex:1; min-height:0; overflow:hidden; }
@media (max-width:1100px) {
  .best-modal-cols { grid-template-columns:260px 1fr; }
  .best-modal-verloop { grid-column:1 / -1; border-left:none !important; border-top:1px solid var(--border-color); }
}
@media (max-width:820px) {
  .best-modal-cols { grid-template-columns:1fr; overflow-y:auto; }
  .best-modal-left { border-right:none !important; border-bottom:1px solid var(--border-color); }
}
.best-modal-left {
  padding:20px; border-right:1px solid var(--border-color);
  display:flex; flex-direction:column; gap:14px;
  overflow-y:auto; background:var(--bg-subtle);
}
.best-modal-right { padding:20px; overflow-y:auto; }
.best-info-group { display:flex; flex-direction:column; gap:3px; }
.best-info-lbl {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:600;
}
.best-info-val { font-size:13.5px; color:var(--text-primary); word-break:break-word; }
.best-modal-divider { border:none; border-top:1px solid var(--border-color); margin:2px 0; }
/* Producten (read-only cart-group-card stijl) */
.best-pcard {
  border:1px solid var(--border-color); border-radius:var(--kms-radius);
  overflow:hidden; background:var(--bg-card); margin-bottom:10px;
}
.best-pcard:last-child { margin-bottom:0; }
.best-pcard-hdr {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--border-color);
}
.best-pcard-img {
  width:80px; height:80px; border-radius:8px;
  border:1px solid var(--border-color); background:var(--bg-subtle);
  flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.best-pcard-img img { width:100%; height:100%; object-fit:contain; }
.best-pcard-title { font-weight:600; font-size:13px; color:var(--text-heading); }
.best-pcard-sub { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.best-pcard-totaal { margin-left:auto; text-align:right; font-weight:700; font-size:14px; color:var(--text-heading); white-space:nowrap; }
.best-pcard-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.best-pcard-tbl th {
  text-align:left; padding:5px 14px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--text-muted); font-weight:600;
  border-bottom:1px solid var(--border-color);
}
.best-pcard-tbl td { padding:7px 14px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.best-pcard-tbl tbody tr:last-child td { border-bottom:none; }
.best-pcard-tbl .col-r { text-align:right; font-weight:600; white-space:nowrap; }
.best-pcard-tbl .col-muted { color:var(--text-muted); }
/* Single item (geen tabel) */
.best-pitem {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid var(--border-color); border-radius:var(--kms-radius);
  background:var(--bg-card); margin-bottom:10px;
}
.best-pitem:last-child { margin-bottom:0; }
.best-pitem-info { flex:1; min-width:0; }
.best-pitem-name { font-weight:600; font-size:13px; color:var(--text-heading); }
.best-pitem-sub { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.best-pitem-prijs { text-align:right; white-space:nowrap; flex-shrink:0; }
.best-pitem-sub2 { font-size:11px; color:var(--text-muted); }
.best-pitem-main { font-weight:700; font-size:14px; color:var(--text-heading); }
.best-pt { font-size:11px; font-weight:600; color:var(--kms-accent); white-space:nowrap; }
/* Pakket blok */
.best-pakket-hdr { background:rgba(30,45,110,.05); }
[data-theme="dark-v2"] .best-pakket-hdr { background:rgba(24,153,255,.06); }
.best-pakket-badge { font-size:10px; vertical-align:middle; margin-left:4px; }
.best-modal-totaal { margin-top:auto; padding-top:14px; border-top:1px solid var(--border-color); }
.best-modal-acties { display:flex; flex-direction:column; gap:6px; }
.best-goedkeur-acties {
  display:flex; flex-direction:column; gap:8px;
  padding-bottom:14px; border-bottom:1px solid var(--border-color);
}
.best-goedkeur-acties .btn { width:100%; justify-content:center; }
.best-btn-afwijzen { color:var(--color-danger); }
.best-btn-afwijzen:hover { color:var(--color-danger); }
.best-annuleer-melding {
  font-size:12.5px; line-height:1.45; padding:8px 10px; border-radius:6px;
  background:var(--pill-amber-bg); color:var(--pill-amber-text); border:1px solid var(--pill-amber-border);
}
.best-annuleer-melding.is-afgewezen { background:var(--bg-subtle); color:var(--text-secondary); border-color:var(--border-color); }
/* Orderverloop (rechterkolom), vorm van .ow-verloop-* in OMS */
.best-modal-verloop { padding:20px; overflow-y:auto; border-left:1px solid var(--border-color); display:flex; flex-direction:column; }
.best-verloop-kop {
  font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:600; margin-bottom:14px;
}
.best-verloop-leeg { font-size:13px; color:var(--text-muted); margin:0; }
/* De lijn op een wrapper, de bolletjes schuiven er met een negatieve marge overheen. */
.best-verloop-lijn { border-left:2px solid var(--border-color); margin-left:13px; flex:1 0 auto; }
.best-verloop-item { display:flex; gap:10px; margin:0 0 14px -14px; }
.best-verloop-item:last-child { margin-bottom:0; }
.best-verloop-bol {
  width:26px; height:26px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.best-verloop-tekst { min-width:0; flex:1; padding-top:2px; }
.best-verloop-titel { font-size:11.5px; font-weight:700; text-transform:uppercase; color:var(--text-primary); }
.best-verloop-omschr { font-size:12px; color:var(--text-secondary); line-height:1.4; margin-top:1px; word-break:break-word; }
.best-verloop-opmerking {
  font-size:12px; color:var(--text-secondary); line-height:1.5; margin-top:5px;
  padding:6px 9px; border-radius:6px; background:var(--bg-subtle); white-space:pre-wrap; word-break:break-word;
}
.best-verloop-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }
/* Gebruiker-detailmodal (?p=admin-gebruikers): zelfde kolommen als de bestelling-modal */
/* Groter dan de bestelling-modal (xxl, 88vh): die opent erbovenop en moet de rand van de details zichtbaar laten. */
.gu-detail-modal { height:94vh; max-height:980px; }
.gu-best-tbl tbody tr.is-clickable { cursor:pointer; }
.gu-best-tbl tbody tr.is-clickable:hover td { background:var(--bg-subtle); }
.gu-saldo-vorm .form-group { margin-bottom:12px; }
.gu-saldo-richting { display:flex; width:100%; margin-bottom:12px; }
.gu-saldo-richting .bk-view-btn { flex:1; width:auto; font-size:12.5px; font-weight:600; }
/* Gebruiker bewerken */
.gu-edit .modal-header { gap:12px; }
.gu-edit-titel { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.gu-edit-sub { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gu-edit .modal-body { padding-top:4px; padding-bottom:4px; }
.gu-edit-sectie { padding:18px 0; }
.gu-edit-sectie + .gu-edit-sectie { border-top:1px solid var(--border-color); }
.gu-edit-kop {
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px;
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--text-muted);
}
.gu-edit-kop .gu-edit-hint { text-transform:none; letter-spacing:0; font-weight:400; margin:0; }
.gu-edit-hint { font-size:12px; color:var(--text-muted); margin-top:4px; }
.gu-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.gu-edit-grid .form-group { margin-bottom:0; }
.gu-verplicht { color:var(--color-danger); }
@media (max-width:640px) { .gu-edit-grid { grid-template-columns:1fr; } }
/* Gelijke kolommen over de volle breedte (2 of 3 kaarten, afhankelijk van de rol van de kijker). */
.gu-rol-keuze { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.gu-rol-keuze .theme-mode-btn, .gu-rol-keuze .theme-mode-btn--wide { width:auto !important; max-width:none !important; }
@media (max-width:640px) { .gu-rol-keuze { grid-auto-flow:row; } }
.gu-rol-keuze.is-vergrendeld .theme-mode-btn { cursor:default; }
.gu-rol-keuze.is-vergrendeld .theme-mode-btn:not(.active) { opacity:.4; }
.gu-edit-schakel { margin-top:14px; }
.gu-ww-rij { display:flex; gap:8px; align-items:stretch; }
.gu-ww-rij .btn { flex-shrink:0; }
/* Iconen in een eigen flexgroep: losse absolute knoppen lijnen per browser anders uit. */
.gu-ww-veld { position:relative; flex:1; min-width:0; }
.gu-ww-veld .form-input { padding-right:72px; }
.gu-ww-iconen { position:absolute; top:0; right:6px; bottom:0; display:flex; align-items:center; gap:2px; }
.gu-ww-icoon {
  width:28px; height:28px; padding:0; margin:0; border:none; border-radius:6px; background:none; cursor:pointer;
  color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center;
}
.gu-ww-icoon:hover { color:var(--text-primary); background:var(--bg-subtle); }
.gu-ww-icoon svg { display:block; }
.gu-ww-criteria { margin:8px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 12px; }
.gu-ww-criteria li { font-size:11.5px; display:none; align-items:center; gap:4px; color:var(--text-muted); }
.gu-ww-criteria .crit-icon { font-size:12px; width:12px; text-align:center; }
.gu-btn-deactiveer { color:var(--color-danger); }
.gu-btn-deactiveer.is-activeer { color:var(--text-primary); }
.form-input.veld-mis { border-color:var(--color-danger); box-shadow:0 0 0 1px var(--color-danger) inset; }
.veld-fout { font-size:12px; font-weight:600; color:var(--color-danger); margin-top:5px; }
.gu-mutatie { padding:9px 0; border-bottom:1px solid var(--border-color); }
.gu-mutatie:last-child { border-bottom:none; }
.gu-mutatie-kop { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-primary); }
/* ── PDF-preview (pdf.js-canvasviewer, js/pdf-viewer.js) ──
   Letterlijke port van de .ob-*-opmaak in OMS (css/order-detail.css). Zelfde
   toolbar en dezelfde viewer, zodat een orderbevestiging er in KMS en OMS
   hetzelfde uitziet. */
.ob-preview-toolbar { display:flex; align-items:center; gap:6px; padding:0 0 10px; flex-wrap:wrap; }
.ob-tb-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-size:12px; font-weight:600;
    border:1px solid var(--border-color); border-radius:6px; background:var(--bg-card); color:var(--text-primary);
    cursor:pointer; text-decoration:none; line-height:1; }
.ob-tb-btn:hover { background:var(--bg-subtle); }
/* De twee zoomknoppen vierkant. Op de class en niet op een id: elke viewer heeft
   zijn eigen id-paar en die zouden er anders stuk voor stuk bij moeten. */
.ob-tb-zoom { width:30px; justify-content:center; font-size:16px; padding:4px 0; }
.ob-tb-pct { font-size:12px; color:var(--text-secondary); min-width:44px; text-align:center; }
/* Canvas-viewer. flex:1 + min-height:0 binnen een kolom-flex modal-body: zonder
   die twee klapt de viewer dicht en blijft de PDF onzichtbaar. */
.ob-pdf-viewer { flex:1; min-height:0; overflow:auto; padding:14px; box-sizing:border-box;
    border:1px solid var(--border-color); border-radius:8px; background:var(--bg-pdf-viewer); text-align:center;
    touch-action:pan-x pan-y; }
.ob-pdf-viewer canvas { display:block; margin:0 auto 14px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.ob-pdf-viewer canvas:last-child { margin-bottom:0; }
.ob-pdf-status { padding:40px 16px; font-size:13px; color:var(--text-secondary); }

/* ── Tabelkaart die de resterende pagina VULT ──
   Voor een lijst die de inhoud van de pagina ís (?p=bedrijf-saldo): hij loopt
   tot onderaan het venster door in plaats van af te kappen op een vaste hoogte,
   en de tabel scrollt binnenin. `.admin-content` wordt daarvoor een flexkolom —
   dezelfde truc als bij `.settings-layout` hierboven.

   `min-height: 0` is nodig op allebei: zonder dat mag een flex-item niet kleiner
   worden dan zijn inhoud en scrollt de héle pagina alsnog. */
.admin-content:has(.table-card-vullend) {
  display: flex; flex-direction: column; min-height: 0;
  /* Een VASTE hoogte, niet alleen flex:1 — .admin-main heeft `min-height: 100vh`
     maar geen bovengrens, dus zonder deze regel groeit de kaart gewoon mee met de
     tabel en scrollt de hele pagina in plaats van de tabel. Zelfde aftrek als
     .toast-container: de topbar plus de eventuele dev-/demobalk (--bars-h). */
  height: calc(100vh - var(--kms-topbar-height) - var(--bars-h, 0px));
  overflow: hidden;
}
.table-card-vullend { flex: 1; min-height: 240px; display: flex; flex-direction: column; }
.table-card-vullend > .data-table-wrap { flex: 1; min-height: 0; overflow-y: auto; }
/* Kop blijft staan bij het scrollen: een lijst van tweehonderd mutaties is
   zonder kolomkoppen niet te lezen zodra je halverwege bent. */
.data-table-wrap-sticky thead th {
  position: sticky; top: 0; z-index: 2;
  /* De thead-achtergrond is normaal doorzichtig genoeg om de rijen eronder te
     laten doorschemeren; hier moet hij dekken. */
  background: var(--bg-subtle);
}

/* Rij die als geheel klikbaar is (de bestellijsten). Zelfde klasse als in OMS. */
.data-table tbody tr.is-clickable { cursor: pointer; }

/* ── Filterknop met uitklappaneel (kmsInitFilterPaneel in js/app.js) ──
   `position: relative` zodat het paneel eronder hangt; `.filter-panel-dropdown`
   staat verderop in dit bestand en doet de rest. De kaart eromheen staat op
   `overflow: hidden` voor de afgeronde tabelhoeken — `.table-card:has(…)`
   hierboven zet dat uit zodra er een paneel in zit, anders wordt het bij een
   korte tabel onderaan afgeknipt. */
.filter-knop-wrap { position: relative; }
.filter-knop-wrap > .btn { display: inline-flex; align-items: center; gap: 6px; }
.filter-badge[hidden] { display: none; }
/* Het paneel opent standaard naar LINKS uit, maar in .table-card-acties staat de
   knop rechts in de balk — daar zou het paneel buiten de kaart vallen. */
.table-card-acties .filter-panel-dropdown { left: auto; right: 0; }
/* Losse regels in het paneel: een keuzelijst met een label erboven. */
.filter-veld { display: block; margin-bottom: 10px; }
.filter-veld:last-child { margin-bottom: 0; }
.filter-veld > .filter-section-title { display: block; }

/* ── Tabbalk in de kop van een kaart (.dtf-tab-bar) ──
   Poort van dezelfde balk in OMS (css/klanten.css, css/orders.css). Voor een
   pagina die twee lijsten van dezelfde entiteit toont — Medewerkers en hun
   Saldomutaties — en waar een tweede menu-item alleen een extra plek zou zijn om
   te zoeken. De balk loopt tot de kaartranden door; de negatieve marges zijn de
   padding van .table-card-head. De JS zet `.active`; hier staat alleen de opmaak. */
.dtf-tab-bar {
  display: flex;
  /* stretch en niet center: een tab met een teller is iets hoger dan een tab
     zonder, en bij center zou de onderstreping van de actieve tab dan niet meer
     op één lijn liggen met de rand van de balk. */
  align-items: stretch;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin: -14px -16px 12px;
  padding: 0 16px;
}
.dtf-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
/* Een tab mag ook een <a> zijn: op een pagina die server-side filtert is elke
   weergave gewoon een URL — deelbaar, en met de terugknop te verlaten. */
.dtf-tab-btn { text-decoration: none; }
.dtf-tab-btn:hover:not(:disabled) { color: var(--text-primary); }
.dtf-tab-btn.active { color: var(--text-primary); border-bottom-color: var(--kms-primary); }
.dtf-tab-btn:disabled { opacity: .45; cursor: default; }
.dtf-tab-count { margin-left: 6px; font-weight: 500; opacity: .7; }
/* De bedieningskaart draagt de tabs ÉN de toolbar eronder; dan moet de kop zich
   als kolom gedragen in plaats van als één rij. */
.table-card-head.heeft-tabs { display: block; }
.table-card-head.heeft-tabs .table-card-toolbar-rij {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* De tabbalk als kop van de TABELKAART zelf (niet in de bedieningskaart): dan is
   de 2px-onderrand van de balk al de scheidslijn, dus de kop krijgt geen eigen
   rand en geen ruimte eronder. Anders staan er twee lijnen onder elkaar. */
.table-card-head.is-tabkop { padding-bottom: 0; border-bottom: none; }
.table-card-head.is-tabkop .dtf-tab-bar { margin-bottom: 0; }

/* ── Kaarttitel (OMS-stijl) ──
   Poort van .order-card-title uit OMS (css/order-detail.css): klein, in
   kapitalen en in de secundaire tekstkleur. De kaarten in KMS droegen elk een
   eigen inline `font-size:14px;font-weight:700;color:var(--text-primary)` — dat
   las als een kop die met de invoervelden eronder concurreerde, terwijl een
   kaarttitel juist een labeltje boven een blok hoort te zijn. */
.kaart-titel {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
/* Een kop met een knop of toelichting ernaast: titel links, actie rechts. */
.kaart-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.kaart-kop .kaart-titel { margin-bottom: 0; }
.kaart-uitleg { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.5; }

/* ── Read-only gegevensrijen in een kaart (OMS-stijl) ──
   Poort van .info-row / .info-label / .info-value uit OMS (css/style.css). Voor
   een detailkaart die zijn gegevens TOONT en het bewerken achter een knop +
   modal zet: dan leest de pagina als een overzicht in plaats van als een
   formulier van dertig velden. */
.info-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  /* 170px in plaats van 140: de labels op ?p=admin-product-bewerk zijn langer
     ("Wasvoorschriften", "Artikelnummer") en de waarden stonden er daardoor
     vlak tegenaan, zonder herkenbare tweede kolom. */
  min-width: 170px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.info-value { font-size: 13.5px; color: var(--text-primary); flex: 1; min-width: 0; }
.info-value-leeg { color: var(--text-muted); }
/* Een waarde die uit rijke tekst bestaat (Quill-inhoud) mag over meerdere
   regels lopen; de bovenuitlijning houdt het label dan op de eerste regel. */
.info-row-blok { align-items: flex-start; }
.info-row-blok .info-value { font-size: 13px; line-height: 1.5; }

/* Een .kms-row-menu-btn draagt normaal de drie puntjes; met een icoon erin is
   het dezelfde vierkante knop voor een ándere betekenis (toevoegen in plaats van
   "meer acties"). Het icoon krijgt hier zijn maat, want .btn svg geldt alleen
   binnen .btn. */
.kms-row-menu-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Variantentabel flush met de kaartrand (?p=admin-product-bewerk) ──
   De tabel stopte 20px voor elke kaartrand, waardoor de rijstreepjes midden in
   de kaart begonnen en eindigden. Nu loopt hij tot de rand door, zoals de
   orderregels op ?page=order-detail in OMS. De negatieve marges zijn de padding
   van .card; de buitenste cellen dragen die padding zelf (in de inline styles
   bij de tabel en in renderVariantTable), zodat de kolomtekst op één lijn blijft
   met de titel erboven. */
#variantenCard { overflow: hidden; }
.varianten-wrap { margin: 0 -20px -20px; overflow-x: auto; }
/* De laatste rij draagt geen streep meer: daar is de kaartrand zelf de lijn. */
#variantenTabel tbody tr:last-child td { border-bottom: none; }

/* Kop van de productkaart: de naam groot, de bron-URL klein eronder. */
.kaart-kop-naam {
  font-size: 15px; font-weight: 700; color: var(--text-heading);
  line-height: 1.3; overflow-wrap: anywhere;
}
.kaart-kop-bron {
  display: block; margin-top: 2px;
  font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kaart-kop-bron:hover { color: var(--kms-primary); text-decoration: underline; }
.kaart-kop-bron[hidden] { display: none; }

/* ── Keuzegroep-tab op ?p=admin-product-bewerk (.pg-*) ──
   De lijst stond volledig op inline styles met een `border-top` per rij: dat gaf
   een losse streep vlak onder de knopbalk en liet de laatste rij juist zonder
   afsluiting. Hier staat de opmaak één keer, met de streep ONDER elke rij behalve
   de laatste — zoals elke andere lijst in de app. */
.pg-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border-color);
}
.pg-laden { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; }
.pg-lijst { display: flex; flex-direction: column; }
.pg-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--kms-radius);
  transition: background .12s;
}
.pg-rij:last-child { border-bottom: none; }
.pg-rij:hover { background: var(--bg-subtle); }
.pg-info { flex: 1; min-width: 0; }
.pg-titel { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.pg-meta  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pg-tag   { margin-left: 6px; font-size: 10px; vertical-align: middle; }
/* De acties staan ALTIJD in beeld. Ze verschenen eerst pas bij hover, maar dan
   moet je een rij aanwijzen om te ontdekken dat je er iets mee kunt — en op een
   aanraakscherm bestaat hover helemaal niet. Ze zijn gedempt (btn-ghost) zodat ze
   de productnaam ernaast niet overstemmen. */
.pg-actie { flex: none; }
.pg-los { color: var(--color-danger); }

.pg-leeg {
  border: 1px dashed var(--border-color);
  border-radius: var(--kms-radius);
  padding: 22px 18px;
  margin-top: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.pg-leeg-titel { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }

/* Miniatuur in de lijst met gekoppelde producten: kleiner dan de 72px van een
   tabelrij, maar groot genoeg om een polo van een T-shirt te onderscheiden. */
.pg-thumb { width: 56px; height: 56px; }

/* ── Kettingicoon: dit product zit in een keuzegroep (?p=admin-producten) ──
   Het aantal ernaast is het TOTAAL aantal leden (dit product meegeteld), want
   dat is de vraag die je stelt: uit hoeveel kan de medewerker kiezen. De tooltip
   noemt de andere producten bij naam. */
.groep-icoon {
  display: inline-flex; align-items: center; gap: 3px;
  flex-shrink: 0; cursor: help;
  padding: 1px 6px 1px 5px;
  border-radius: var(--kms-radius-full);
  background: var(--kms-primary-light);
  color: var(--kms-primary);
}
.groep-icoon-telling { font-size: 10px; font-weight: 700; line-height: 1.4; }

/* ── Bestelling geplaatst (?p=bestelling-geplaatst) — regels via .order-regel uit Mijn bestellingen ── */
.bevestiging { max-width: 720px; margin: 28px auto 0; display: grid; gap: 22px; }
.bevestiging-kop { text-align: center; }
.bevestiging-vink {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pill-green-bg); color: var(--pill-green-text);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--pill-green-bg) 45%, transparent);
}
.bevestiging-titel { font-size: 26px; font-weight: 700; color: var(--text-heading); margin: 0; }
.bevestiging-sub { font-size: 14px; color: var(--text-secondary); margin: 8px 0 0; }
.bevestiging-kaart { overflow: hidden; }
.bevestiging-kaart-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 16px; }
.bevestiging-nummer { font-size: 20px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; margin-top: 2px; }
.bevestiging-datum { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.bevestiging-gegevens { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; padding: 0 22px 16px; font-size: 13px; }
.bevestiging-gegevens dt { color: var(--text-muted); }
.bevestiging-gegevens dd { margin: 0; color: var(--text-primary); }
.bevestiging-regel-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bevestiging-totalen { border-top: 1px solid var(--border-color); padding: 14px 22px; display: grid; gap: 6px; background: var(--bg-subtle); }
.bevestiging-totaal-rij { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bevestiging-totaal-rij.is-totaal { font-size: 16px; font-weight: 700; color: var(--text-heading); }
.bevestiging-totaal-rij.is-totaal span:last-child { color: var(--kms-accent); }
.bevestiging-acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 640px) {
  .bevestiging-kaart-kop { flex-direction: column; }
  .bevestiging-acties .btn { flex: 1 1 100%; justify-content: center; }
}
.cart-bekijkt-als {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--kms-radius);
  font-size: 13px; line-height: 1.45; color: var(--pill-amber-text); background: var(--pill-amber-bg);
}

/* ── Legenda (.of-legenda) — poort uit OMS css/orderflow.css; de stippen volgen de .maat-pill-ladder ── */
.of-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.of-leg { display: inline-flex; align-items: center; gap: 6px; }
.of-leg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--border-color); }
.of-leg-dot.is-done    { background: #22c55e; }
.of-leg-dot.is-warning { background: #f59e0b; }
.of-leg-dot.is-danger  { background: #ef4444; }
.vr-legenda { margin-left: auto; justify-content: flex-end; }