@charset "UTF-8";

/* ---- /assets/css/alert.css ---- */
/* =========================================================
   alert.css - DutchLine MAX Alerts
   - Default: soft
   - Left rail: ONLY for neutral
   - Works with theme-core.css vars
   ========================================================= */

/* Fallbacks (if a project page misses some vars) */
:root{
  --dl-alert-success: #20c997;
  --dl-alert-warning: #ffc107;
  --dl-alert-danger:  #ff4d4d;
  --dl-alert-info:    #0d6efd;
  --dl-alert-neutral: rgba(11,18,32,.72);
  --dl-alert-accent:  var(--accent, #304DA1);
}

/* Base */
.dl-alert{
  --_a: var(--dl-alert-neutral); /* type color */
  --_bg: color-mix(in srgb, var(--_a) 38%, #fff);
  --_bd: color-mix(in srgb, var(--_a) 55%, transparent);
  --_iconbg: color-mix(in srgb, var(--_a) 44%, #fff);

  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;

  border-radius: var(--r2, 18px);
  border: 1px solid var(--_bd);
  background: var(--_bg);

  padding: 14px 14px;
  box-shadow: var(--shadow2, 0 12px 30px rgba(11,18,32,.10));

  color: var(--text, #0b1220);
}

/* Content */
.dl-alert-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
}

.dl-alert-text{
  margin: 6px 0 0;
  color: var(--muted, rgba(11,18,32,.70));
  line-height: 1.6;
}

.dl-alert-content{ min-width: 0; flex: 1 1 auto; }

.dl-alert-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Acties naar een eigen regel op smal scherm
   .dl-alert is een flexrij zonder wrap, dus een actieblok komt naast de tekst
   te staan en knijpt die samen: op 390px brak "Inschrijven staat uit." af tot
   een woord per regel met de knop ernaast. Onder 576px hoort een knop onder
   de tekst te staan en de volle breedte te vullen. .dl-credit-notice loste dit
   al op met een eigen kopie (flex-direction: column); die blijft werken, maar
   nieuwe alerts hebben hem niet meer nodig. */
.dl-alert{ flex-wrap: wrap; }
@media (max-width: 575.98px){
  .dl-alert > .dl-alert-actions{
    flex: 0 0 100%;
    margin-top: 12px;
  }
  .dl-alert > .dl-alert-actions > .dl-btn{
    width: 100%;
    justify-content: center;
  }
}

/* Icon chip */
.dl-alert-icon{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: var(--_iconbg);
  border: 1px solid color-mix(in srgb, var(--_a) 30%, var(--border, rgba(11,18,32,.10)));
  color: var(--_a);
}

/* Icon SVG defaults */
.dl-alert-icon svg{
  width: 18px;
  height: 18px;
}

/* Dismiss button */
.dl-alert-dismiss{
  flex: 0 0 auto;
  margin-left: 2px;

  width: 38px;
  height: 38px;
  border-radius: 14px;

  border: 1px solid var(--border, rgba(11,18,32,.10));
  background: rgba(255,255,255,.72);

  display: grid;
  place-items: center;

  color: rgba(11,18,32,.72);
  cursor: pointer;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dl-alert-dismiss:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2, rgba(11,18,32,.14));
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
}

.dl-alert-dismiss:focus{
  outline: none;
  box-shadow: 0 0 0 6px var(--focus, rgba(48,77,161,.26));
}

/* =========================================================
   Types (set only the type color)
   ========================================================= */
.dl-alert-neutral{ --_a: var(--dl-alert-neutral); }
.dl-alert-info{    --_a: var(--dl-alert-info); }
.dl-alert-success{ --_a: var(--dl-alert-success); }
.dl-alert-warning{ --_a: var(--dl-alert-warning); }
.dl-alert-danger{  --_a: var(--dl-alert-danger); }
.dl-alert-accent{  --_a: var(--dl-alert-accent); }

/* =========================================================
   Left rail ONLY on neutral
   ========================================================= */
.dl-alert-neutral{
  padding-left: 16px; /* room for rail + nicer alignment */
}

.dl-alert-neutral::before{
  content:"";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent, #304DA1) 70%, rgba(11,18,32,.70)),
    rgba(11,18,32,.14)
  );
  opacity: .85;
}

/* =========================================================
   Variants
   ========================================================= */

/* Outline: for dense UI contexts */
.dl-alert-outline{
  background: #fff;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--_a) 22%, var(--border, rgba(11,18,32,.10)));
}

.dl-alert-outline .dl-alert-icon{
  background: rgba(255,255,255,.92);
}

/* Compact: toolbars, inline system notes */
.dl-alert-compact{
  padding: 10px 12px;
  gap: 10px;
  border-radius: var(--r2, 18px);
}

.dl-alert-compact .dl-alert-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.dl-alert-compact .dl-alert-title{
  font-size: .98rem;
}

.dl-alert-compact .dl-alert-text{
  margin-top: 4px;
  font-size: .94rem;
}

.dl-alert-compact .dl-alert-dismiss{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

/* No shadow: if embedded inside panels already */
.dl-alert-flat{
  box-shadow: none;
}

/* =========================================================
   Animations for dismiss (JS adds classes)
   ========================================================= */
.dl-alert.is-hiding{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

/* =========================================================
   Links inside alerts
   ========================================================= */
.dl-alert a{
  color: color-mix(in srgb, var(--_a) 70%, var(--text, #0b1220));
  font-weight: 850;
  text-decoration: none;
}

.dl-alert a:hover{
  color: var(--accent, #304DA1);
}

/* =========================================================
   Utility: spacing when stacked
   ========================================================= */
.dl-alert + .dl-alert{ margin-top: 10px; }

/* ── Kredietblokkade-balk (inc/credit_notice.php) ─────────────────────────────
   Staat op elke pagina zolang er een factuur te lang openstaat: kijken mag,
   bestellen niet, en de klant hoort te weten waarom. Niet wegklikbaar, dus
   geen dismiss-knop en bewust compact - hij staat boven ELKE pagina. */
.dl-credit-notice{
  margin: 14px 0 0;
  align-items: flex-start;
}
.dl-credit-notice .dl-credit-notice-text{
  margin-top: 4px;
  line-height: 1.5;
}
.dl-credit-notice .dl-credit-notice-hint{
  margin-top: 4px;
  font-size: .875rem;
  opacity: .8;
  line-height: 1.5;
}
.dl-credit-notice .dl-alert-actions{
  margin-top: 0;
  flex: 0 0 auto;
  align-self: center;
}
@media (max-width: 767.98px){
  .dl-credit-notice{ flex-direction: column; }
  .dl-credit-notice .dl-alert-actions{ align-self: stretch; margin-top: 10px; }
  .dl-credit-notice .dl-alert-actions .dl-btn{ width: 100%; justify-content: center; }
}


/* ---- /assets/css/buttons.css ---- */
/* =========================================================
   buttons.css - DutchLine UI (Buttons) ✅ improved
   Fixes:
   - Consistent hover/active/disabled across variants
   - Proper border + focus ring + shadow stacking
   - Correct :before/:after hooks (shimmer + underline) (optional but consistent)
   - Active states (.is-active / [aria-pressed="true"]) supported
   - Colors/size rhythm tuned for B2B header + cards
   ========================================================= */

/* Base */
.dl-btn{
  /* Boven 768px is 36px de ondergrens voor een aanraakvlak. Zonder deze regel
     kwam een ghost-knop op 35,7px uit (10px padding + 1.1 line-height). */
  min-height: 36px;
  /* fallback-safe */
  --dlb-focus: var(--focus, rgba(48,77,161,.18));
  --dlb-border: var(--border, rgba(11,18,32,.12));
  --dlb-border2: var(--border2, rgba(11,18,32,.18));
  --dlb-ink: rgba(11,18,32,.88);

  position: relative;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 850;
  letter-spacing: .01em;
  border: 1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1.1;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  text-decoration:none;
  white-space: nowrap;

  transform: translateY(0);
  box-shadow: none;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease,
    filter .16s ease;
}

 

/* Optional “active underline” hook (only visible when needed) */
.dl-btn::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  pointer-events:none;
  opacity: 0;
  transform: scaleX(.65);
  transition: opacity .16s ease, transform .16s ease;
}

.dl-btn:focus{ outline:none; }
.dl-btn:focus-visible{
  box-shadow: 0 0 0 6px var(--dlb-focus);
}

@media (hover:hover){
  .dl-btn:hover{ transform: translateY(-1px); }
}
.dl-btn:active{ transform: translateY(0); }

/* Active (works for links + buttons) */
.dl-btn.is-active,
.dl-btn[aria-pressed="true"]{
  transform: translateY(0);
}
.dl-btn.is-active::after,
.dl-btn[aria-pressed="true"]::after{
  opacity: .9;
  transform: scaleX(1);
}

/* Disabled */
.dl-btn:disabled,
.dl-btn[aria-disabled="true"],
.dl-btn.is-disabled{
  pointer-events:none;
  opacity: .62;
  transform:none;
  box-shadow:none !important;
  filter: none !important;
}
.dl-btn:disabled::before,
.dl-btn[aria-disabled="true"]::before,
.dl-btn.is-disabled::before{ opacity:0 !important; }

/* Sizes */
.dl-btn-sm{ padding: 9px 12px; border-radius: 12px; font-size: .92rem; }
.dl-btn-md{ padding: 11px 14px; border-radius: 14px; }
.dl-btn-lg{ padding: 13px 16px; border-radius: 16px; font-size: 1.02rem; }

/* Block */
.dl-btn-block{ width: 100%; }

/* Icon-only */
.dl-btn-icon{
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  justify-content:center;
}
/* 38px was onder de 40px die de eis voor een icoonknop stelt. */
.dl-btn-icon.dl-btn-sm{ width: 40px; height: 40px; border-radius: 12px; }
.dl-btn-icon.dl-btn-lg{ width: 48px; height: 48px; border-radius: 16px; }

/* Collapse: label op desktop, alleen icoon op smalle schermen */
@media (max-width: 575.98px){
  .dl-btn-collapse{
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
  }
  .dl-btn-collapse.dl-btn-sm{ width: 40px; height: 40px; border-radius: 12px; }
  .dl-btn-collapse.dl-btn-lg{ width: 48px; height: 48px; border-radius: 16px; }
  .dl-btn-collapse .dl-btn-label{ display: none; }
  .dl-btn-collapse .fa-solid,
  .dl-btn-collapse .fa-regular,
  .dl-btn-collapse .fa-brands,
  .dl-btn-collapse .fa-light{ margin: 0 !important; }
}

/* =========================================================
   Variants (DutchLine blue family)
   ========================================================= */

/* ---------- Primary ---------- */
.dl-btn-primary{
  
  background: #131F3F;
  color:#fff;
}
.dl-btn-primary::before{ opacity:.55; }
.dl-btn-primary::after{
  background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.28));
}
@media (hover:hover){
  .dl-btn-primary:hover{
     background: #233A77;
	color:#fff;
  }
}
.dl-btn-primary:active{
  filter: brightness(.98);
  box-shadow: 0 14px 28px rgba(48,77,161,.18);
}
.dl-btn-primary:focus-visible{
  box-shadow: 0 0 0 6px var(--dlb-focus), 0 22px 44px rgba(48,77,161,.22);
}

/* Active */
.dl-btn-primary.is-active,
.dl-btn-primary[aria-pressed="true"]{
  box-shadow: 0 22px 44px rgba(48,77,161,.22);
}

/* ---------- Ghost ---------- */
.dl-btn-ghost{
  background: rgba(255,255,255,.92);
  border-color: var(--dlb-border);
  color: #131F3F;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.dl-btn-ghost::before{ opacity:.35; }
.dl-btn-ghost::after{
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(6,182,212,.45));
}
@media (hover:hover){
  .dl-btn-ghost:hover{
    background:#131F3F;
    border-color: var(--dlb-border2);
    box-shadow: 0 12px 26px rgba(11,18,32,.08);
	color:#fff;
  }
}
.dl-btn-ghost:active{
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 18px rgba(11,18,32,.06);
}
.dl-btn-ghost.is-active,
.dl-btn-ghost[aria-pressed="true"]{
  border-color: color-mix(in srgb, rgba(48,77,161,.40) 70%, var(--dlb-border));
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* ---------- Soft (accent tint) ---------- */
.dl-btn-soft{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.18);
  color: rgba(11,18,32,.92);
  box-shadow: 0 10px 22px rgba(48,77,161,.10);
}
.dl-btn-soft::before{ opacity:.20; }
.dl-btn-soft::after{
  background: linear-gradient(90deg, rgba(48,77,161,.60), rgba(6,182,212,.45));
}
@media (hover:hover){
  .dl-btn-soft:hover{
    background: rgba(48,77,161,.13);
    border-color: rgba(48,77,161,.24);
    box-shadow: 0 12px 26px rgba(48,77,161,.12);
  }
}
.dl-btn-soft:active{
  background: rgba(48,77,161,.11);
  box-shadow: 0 9px 18px rgba(48,77,161,.10);
}
.dl-btn-soft.is-active,
.dl-btn-soft[aria-pressed="true"]{
  background: rgba(48,77,161,.14);
  border-color: rgba(48,77,161,.28);
}

/* ---------- Neutral (ink) ---------- */
.dl-btn-neutral{
  background: rgba(11,18,32,.06);
  border-color: rgba(11,18,32,.10);
  color: rgba(11,18,32,.90);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.dl-btn-neutral::before{ opacity:.20; }
.dl-btn-neutral::after{
  background: linear-gradient(90deg, rgba(11,18,32,.42), rgba(11,18,32,.18));
}
@media (hover:hover){
  .dl-btn-neutral:hover{
    background: rgba(11,18,32,.08);
    border-color: rgba(11,18,32,.14);
    box-shadow: 0 12px 26px rgba(11,18,32,.08);
  }
}
.dl-btn-neutral:active{
  background: rgba(11,18,32,.07);
  box-shadow: 0 8px 18px rgba(11,18,32,.06);
}
.dl-btn-neutral.is-active,
.dl-btn-neutral[aria-pressed="true"]{
  border-color: rgba(11,18,32,.18);
}

/* ---------- Success / Warning / Danger (light B2B) ---------- */
.dl-btn-success{
  background: rgba(255,255,255,.92);
  border-color: rgba(32,201,151,.22);
  color: rgba(11,18,32,.92);
  box-shadow: 0 10px 22px rgba(32,201,151,.10);
}
.dl-btn-success::after{
  background: linear-gradient(90deg, rgba(32,201,151,.70), rgba(32,201,151,.30));
}
 
.dl-btn-success:hover{
    background: rgba(32,201,151);
    border-color: rgba(32,201,151,.28);
    box-shadow: 0 12px 26px rgba(32,201,151,.12);
	color:#fff;
}
 
.dl-btn-success:active{ background: rgba(32,201,151,.13); }

.dl-btn-warning{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,193,7,.24);
  color: rgba(11,18,32,.92);
  box-shadow: 0 10px 22px rgba(255,193,7,.10);
}
.dl-btn-warning::after{
  background: linear-gradient(90deg, rgba(255,193,7,.70), rgba(255,193,7,.30));
}
@media (hover:hover){
  .dl-btn-warning:hover{
     background: rgba(255,193,7);
    border-color: rgba(255,193,7,.30);
    box-shadow: 0 12px 26px rgba(255,193,7,.12);
	color:#fff;
  }
}
.dl-btn-warning:active{ background: rgba(255,193,7,.15); }

.dl-btn-danger{
  background: rgba(255,255,255,.92);
  border-color: rgba(159, 0, 11);
  color: #131F3F;
  box-shadow: 0 10px 22px rgba(255,77,77,.10);
}
.dl-btn-danger::after{
  background: linear-gradient(90deg, rgba(255,77,77,.70), rgba(255,77,77,.30));
} 
.dl-btn-danger:hover{
  background: rgba(255,77,77);
border-color: rgba(255,77,77);
box-shadow: 0 12px 26px rgba(255,77,77,.12);
color:#fff;
}
 
.dl-btn-danger:active{ background: rgba(255,77,77); }

/* ---------- Outline (optional) ---------- */
.dl-btn-outline{
  background: transparent;
  border-color: var(--dlb-border2);
  color: rgba(11,18,32,.90);
}
.dl-btn-outline::after{
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(6,182,212,.45));
}
@media (hover:hover){
  .dl-btn-outline:hover{
    background: rgba(48,77,161,.06);
    border-color: color-mix(in srgb, rgba(48,77,161,.35) 60%, var(--dlb-border2));
  }
}
.dl-btn-outline:active{ background: rgba(48,77,161,.05); }

/* =========================================================
   Button groups (toolbar look)
   ========================================================= */
 
.dl-btn-group{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--dlb-border);
  background: rgba(255,255,255,1);
  box-shadow: 0 10px 22px rgba(11,18,32,.2);
  overflow: hidden;
}

.dl-btn-group > .dl-btn{
  flex: 0 0 auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  transform: none;
}

.dl-btn-group > .dl-btn + .dl-btn{
  border-left: 1px solid var(--dlb-border);
}

.dl-btn-group > .dl-btn::before,
.dl-btn-group > .dl-btn::after{ display:none; }

.dl-btn-group > .dl-btn.is-active,
.dl-btn-group > .dl-btn[aria-pressed="true"]{
  background: rgba(48,77,161,.12);
  font-weight: 900;
}

/* ---------- FULL WIDTH: group = 100%, buttons = equal width ---------- */
.dl-btn-group.is-fluid{
  display: flex;          /* belangrijk: flex in plaats van inline-flex */
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

.dl-btn-group.is-fluid > .dl-btn{
  flex: 1 1 0;            /* verdeelt automatisch: 2 knoppen = 50/50, 3 = 33/33/33 */
  min-width: 0;           /* voorkomt overflow ellende */
}

/* Optioneel: label netjes inkorten als het te lang is */
.dl-btn-group.is-fluid > .dl-btn{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- FULL WIDTH maar NIET verdelen (handig als je 1 knop hebt) ---------- */
/* Meestal niet nodig, maar als je expliciet wil forceren dat 1 knop 100% is
   en bij 2+ knoppen niet automatisch equal, dan kan je dit gebruiken. */
.dl-btn-group.is-fluid-keep{
  display: flex;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}
.dl-btn-group.is-fluid-keep > .dl-btn{
  flex: 0 0 auto;
}

/* Als je is-fluid-keep gebruikt en je wil alleen de eerste knop laten groeien: */
.dl-btn-group.is-fluid-keep > .dl-btn:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

 

/* =========================================================
   Busy / spinner / progress
   ========================================================= */
.dl-btn .dl-btn-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display:none;
  flex-shrink: 0;
  margin-right: 8px;
  opacity: .92;
  animation: dlBtnSpin .75s linear infinite;
}
@keyframes dlBtnSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.dl-btn.is-busy{ pointer-events:none; }
.dl-btn.is-busy .dl-btn-spinner{ display:inline-block; }
.dl-btn.is-busy .dl-btn-icon-slot{ opacity: .92; }

/* Extra ruimte voor progress bar */
.dl-btn.has-progress{
  padding-bottom: 22px;
}

/* Progress bar inside the button */
.dl-btn .dl-btn-progress{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  overflow:hidden;
  display:none;
  background: rgba(255,255,255,.22);
}
.dl-btn .dl-btn-progress > i{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}
.dl-btn.has-progress .dl-btn-progress{ display:block; }

/* Make progress visible on light variants too */
.dl-btn-ghost.has-progress .dl-btn-progress,
.dl-btn-neutral.has-progress .dl-btn-progress,
.dl-btn-soft.has-progress .dl-btn-progress,
.dl-btn-success.has-progress .dl-btn-progress,
.dl-btn-warning.has-progress .dl-btn-progress,
.dl-btn-danger.has-progress .dl-btn-progress,
.dl-btn-outline.has-progress .dl-btn-progress{
  background: rgba(11,18,32,.08);
}
.dl-btn-ghost.has-progress .dl-btn-progress > i,
.dl-btn-neutral.has-progress .dl-btn-progress > i,
.dl-btn-soft.has-progress .dl-btn-progress > i,
.dl-btn-success.has-progress .dl-btn-progress > i,
.dl-btn-warning.has-progress .dl-btn-progress > i,
.dl-btn-danger.has-progress .dl-btn-progress > i,
.dl-btn-outline.has-progress .dl-btn-progress > i{
  background: rgba(48,77,161,.55);
}

/* Tiny icon label spacing helpers */
.dl-btn .dl-btn-icon-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dl-btn{ transition:none !important; }
  .dl-btn::before, .dl-btn::after{ transition:none !important; }
}
/* Ghost danger variant (matcht ghost buttons) */
.dl-btn.dl-btn-ghost.dl-btn-ghost-danger{
  color: #131F3F;
}

.dl-btn.dl-btn-ghost.dl-btn-ghost-danger:hover{
 background: rgba(255,255,255,.92);
 
 
}

.dl-btn.dl-btn-ghost.dl-btn-ghost-danger:focus{
   box-shadow: 0 10px 22px rgba(255,77,77,.10);
}
 
/* ==========================================================
   Mobile touch target: ensure minimum 44x44px on small screens
   WCAG 2.5.5 / Apple HIG recommendation

   LET OP: dit blok dekte eerder ALLEEN .dl-btn-sm. De basisknop bleef
   daardoor 39,6px hoog (10px padding + 1.1 line-height) en .dl-btn-icon
   42x42 - beide onder de 44px. Nu geldt de correctie voor de hele familie,
   inclusief de icoon- en collapse-varianten.
   ========================================================== */
@media (max-width: 768px) {
  /* 768px zit er BIJ: de eis is 44px tot en met 768, en 767.98 liet precies
     iPad-portret buiten de correctie staan (de cookieknoppen waren daar 36px). */
  .dl-btn {
    min-height: 44px;
  }
  .dl-btn-sm {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .dl-btn-icon,
  .dl-btn-icon.dl-btn-sm {
    width: 44px;
    height: 44px;
  }
  .dl-btn-icon.dl-btn-lg {
    width: 48px;
    height: 48px;
  }
}
@media (max-width: 575.98px) {
  /* De collapse-variant wordt hier een icoonknop; die stond op 42/38px. */
  .dl-btn-collapse,
  .dl-btn-collapse.dl-btn-sm {
    width: 44px;
    height: 44px;
  }
}


/* ---- /assets/css/chat.css ---- */
/* =========================================================
   chat.css - DutchLine Chat (Expanded UI Kit)
   - Inbox layout (sidebar + thread)
   - Search + filters + pinned
   - Message groups, reply, edit, actions menu
   - Attachments (file/image), link preview
   - Unread divider + scroll-to-bottom button
   - Typing indicator + quick replies
   - Empty/loading states
   ========================================================= */

:root{
  --dl-chat-bg: rgba(255,255,255,.88);
  --dl-chat-head: rgba(255,255,255,.92);
  --dl-chat-thread: rgba(255,255,255,.86);

  --dl-success: rgba(32,201,151,.95);
  --dl-danger: rgba(255,77,77,.95);
  --dl-warning: rgba(255,193,7,.95);
  --dl-info: rgba(13,110,253,.95);

  --dl-success-soft: rgba(32,201,151,.12);
  --dl-danger-soft: rgba(255,77,77,.12);
  --dl-warning-soft: rgba(255,193,7,.12);
  --dl-info-soft: rgba(13,110,253,.12);
}

/* =========================================================
   Inbox frame
   ========================================================= */
.dl-chatkit{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--dl-chat-bg);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-chatkit-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  min-height: 600px;
  height: 100%;
}
@media (max-width: 991px){
  .dl-chatkit-grid{ grid-template-columns: 1fr; }
  .dl-chatkit-sidebar{ display:none; }
  .dl-chatkit.is-mobile-list .dl-chatkit-sidebar{ display:block; }
  .dl-chatkit.is-mobile-list .dl-chatkit-thread{ display:none; }
}

/* =========================================================
   Sidebar (conversation list)
   ========================================================= */
.dl-chatkit-sidebar{
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.dl-chatkit-shead{
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--dl-chat-head);
  flex: 0 0 auto;
}

.dl-chatkit-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-chatkit-title h3{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 1.05rem;
}
.dl-chatkit-title .mini{
  color: var(--muted2);
  font-weight: 900;
  font-size: .85rem;
}

.dl-chatkit-search{
  position: relative;
  margin-top: 10px;
}
.dl-chatkit-search input{
  border-radius: 14px !important;
  /* form.css forceert padding:16px met !important - hier overrulen zodat de
     tekst niet onder het zoek-icoon valt */
  padding-left: 42px !important;
}
.dl-chatkit-search svg{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
}

.dl-chatkit-filters{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.dl-chatkit-chip{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: .82rem;
  color: rgba(11,18,32,.80);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.dl-chatkit-chip:hover{ transform: translateY(-1px); background:#fff; border-color: var(--border2); }
.dl-chatkit-chip.is-active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

.dl-chatkit-list{
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.dl-conv{
  display:flex;
  gap: 12px;
  padding: 13px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.dl-conv:hover{
  transform: translateY(-1px);
  border-color: var(--border);
  background: rgba(255,255,255,.72);
}
.dl-conv.is-active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.06);
}
.dl-conv .av{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  font-weight: 950;
  flex: 0 0 auto;
  color: rgba(11,18,32,.78);
}
.dl-conv .m{
  min-width:0;
  flex: 1 1 auto;
}
.dl-conv .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-conv .name{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: .98rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-conv .time{
  color: var(--muted2);
  font-weight: 900;
  font-size: .82rem;
  flex: 0 0 auto;
}
.dl-conv .sub{
  margin: 4px 0 0;
  color: var(--muted2);
  font-size: .88rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-conv .meta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dl-conv .tags{
  display:flex;
  gap: 6px;
  flex-wrap:wrap;
}
.dl-tag{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 900;
  font-size: .78rem;
  color: rgba(11,18,32,.78);
}
.dl-tag.pinned{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}
.dl-unread{
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px;
  background: rgba(48,77,161,.95);
  color: #fff;
  font-weight: 950;
  font-size: .72rem;
  flex: 0 0 auto;
}

/* =========================================================
   Thread header
   ========================================================= */
.dl-chatkit-thread{
  background: var(--dl-chat-thread);
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.dl-thread-head{
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--dl-chat-head);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.dl-thread-title{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.dl-thread-title .av{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.78);
  flex: 0 0 auto;
}
.dl-thread-title .meta{
  min-width:0;
}
.dl-thread-title .name{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-thread-title .sub{
  margin: 2px 0 0;
  color: var(--muted2);
  font-size: .90rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.dl-thread-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex: 0 0 auto;
}
.dl-thread-actions .dl-btn{
  padding: 10px 12px;
}

/* =========================================================
   Thread body (messages)
   ========================================================= */
.dl-thread-body{
  position: relative;
  flex: 1 1 auto;
  overflow:auto;
  padding: 22px 24px;
  background:
    radial-gradient(900px 360px at 8% 0%, rgba(48,77,161,.06), transparent 60%),
    radial-gradient(900px 360px at 92% 0%, rgba(128,160,208,.06), transparent 70%),
    rgba(255,255,255,.86);
}

/* scroll-to-bottom */
.dl-scrollbtn{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(11,18,32,.10);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dl-scrollbtn:hover{ transform: translateY(-1px); border-color: var(--border2); background:#fff; }

/* separators */
.dl-sep{
  display:flex;
  justify-content:center;
  margin: 20px 0;
}
.dl-sep span{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--muted2);
  font-size: .85rem;
  font-weight: 900;
}

/* unread divider */
.dl-unreadline{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 20px 0;
}
.dl-unreadline::before,
.dl-unreadline::after{
  content:"";
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.22), rgba(11,18,32,.08));
  flex: 1 1 auto;
  opacity: .9;
}
.dl-unreadline span{
  border: 1px solid rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
  color: rgba(11,18,32,.84);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 950;
  font-size: .85rem;
}

/* system message */
.dl-system{
  display:flex;
  justify-content:center;
  margin: 10px 0;
}
.dl-system .box{
  max-width: 720px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  background: rgba(48,77,161,.06);
  padding: 10px 12px;
  color: rgba(11,18,32,.78);
  font-weight: 850;
}

/* message group */
.dl-group{
  display:flex;
  gap: 10px;
  margin: 18px 0;
  align-items:flex-end;
}
.dl-group.me{ justify-content:flex-end; }
.dl-group .av{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.70);
  flex: 0 0 auto;
}
.dl-group.me .av{ display:none; }

.dl-stack{ display:flex; flex-direction:column; gap: 10px; min-width:0; }

/* bubble */
.dl-bubble{
  max-width: min(78%, 760px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 12px 16px;
  box-shadow: 0 14px 36px rgba(11,18,32,.06);
  position: relative;
}
.dl-group.me .dl-bubble{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.22);
}
.dl-bubble .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-bubble .who{
  margin: 0;
  font-weight: 950;
  font-size: .92rem;
  color: rgba(11,18,32,.86);
}
.dl-bubble .meta{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted2);
  font-weight: 900;
  font-size: .82rem;
}
.dl-pill-mini{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 950;
  font-size: .76rem;
  color: rgba(11,18,32,.74);
}
.dl-pill-mini.success{ border-color: rgba(32,201,151,.25); background: var(--dl-success-soft); }
.dl-pill-mini.warning{ border-color: rgba(255,193,7,.25); background: var(--dl-warning-soft); }
.dl-pill-mini.danger{ border-color: rgba(255,77,77,.25); background: var(--dl-danger-soft); }
.dl-pill-mini.info{ border-color: rgba(13,110,253,.25); background: var(--dl-info-soft); }

.dl-bubble .text{
  margin: 8px 0 0;
  color: rgba(11,18,32,.78);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dl-bubble .text a{ text-decoration: underline; text-underline-offset: 3px; }
.dl-bubble .text code{
  background: rgba(11,18,32,.06);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 900;
}
.dl-bubble pre{
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #0b1220;
  color: rgba(255,255,255,.92);
  overflow:auto;
  font-size: .92rem;
  line-height: 1.55;
}

/* Reply preview */
.dl-reply{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  padding: 8px 10px;
  color: rgba(11,18,32,.76);
  font-weight: 900;
  font-size: .86rem;
}
.dl-group.me .dl-reply{
  border-color: rgba(48,77,161,.22);
  background: rgba(255,255,255,.78);
}
.dl-reply .k{ color: var(--muted2); font-weight: 950; margin-right: 6px; }
.dl-reply .q{ opacity: .9; }

/* Attachments */
.dl-attach{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  overflow:hidden;
}
.dl-attach .thumb{
  aspect-ratio: 16/9;
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(11,18,32,.70);
  position:relative;
}
.dl-attach .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dl-attach .thumb .badge{
  position:absolute;
  left: 10px;
  bottom: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: .78rem;
}
.dl-attach .meta{ padding: 10px 12px; }
.dl-attach .meta .fn{ margin: 0; font-weight: 950; }
.dl-attach .meta .sz{ margin: 6px 0 0; color: var(--muted2); font-size: .88rem; }

/* Link preview */
.dl-linkprev{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  overflow:hidden;
  display:grid;
  grid-template-columns: 140px 1fr;
}
@media (max-width: 575px){
  .dl-linkprev{ grid-template-columns: 1fr; }
}
.dl-linkprev .img{
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    rgba(255,255,255,.92);
  border-right: 1px solid var(--border);
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(11,18,32,.68);
}
@media (max-width: 575px){
  .dl-linkprev .img{ border-right:0; border-bottom:1px solid var(--border); }
}
.dl-linkprev .m{
  padding: 10px 12px;
}
.dl-linkprev .m .t{ margin:0; font-weight: 950; }
.dl-linkprev .m .d{ margin:6px 0 0; color: var(--muted2); font-size:.88rem; line-height:1.4; }
.dl-linkprev .m .u{ margin:8px 0 0; color: rgba(48,77,161,.88); font-weight: 950; font-size:.86rem; }

/* Bubble footer: time + ticks + actions */
.dl-bubble .foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted2);
  font-size: .82rem;
  font-weight: 900;
}
.dl-status{
  display:flex;
  align-items:center;
  gap: 6px;
}
.dl-tick{
  width: 18px;
  height: 18px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-size: .72rem;
}

/* actions button + dropdown */
.dl-msg-actions{
  position: relative;
}
.dl-actions-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 6px 9px;
  font-weight: 950;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dl-actions-btn:hover{ transform: translateY(-1px); border-color: var(--border2); background:#fff; }
.dl-actions-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 18px 60px rgba(11,18,32,.12);
  padding: 8px;
  display:none;
  z-index: 10;
}
.dl-actions-menu button{
  width: 100%;
  text-align:left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(11,18,32,.84);
  cursor:pointer;
}
.dl-actions-menu button:hover{ background: rgba(48,77,161,.08); }
.dl-actions-menu .danger{ color: rgba(255,77,77,.95); }
.dl-msg-actions.is-open .dl-actions-menu{ display:block; }

/* typing indicator */
.dl-typing{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  margin: 10px 0 0;
}
.dl-typing .av{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.70);
}
.dl-typing .dots{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 10px 12px;
  display:flex;
  gap: 6px;
  align-items:center;
}
.dl-typing .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.55);
  animation: dlTyping 1.05s infinite ease-in-out;
  opacity: .65;
}
.dl-typing .dot:nth-child(2){ animation-delay: .12s; }
.dl-typing .dot:nth-child(3){ animation-delay: .24s; }
@keyframes dlTyping{
  0%,100%{ transform: translateY(0); opacity:.55; }
  50%{ transform: translateY(-4px); opacity: 1; }
}

/* =========================================================
   Composer
   ========================================================= */
.dl-thread-foot{
  border-top: 1px solid var(--border);
  background: var(--dl-chat-head);
  padding: 16px 20px;
  flex: 0 0 auto;
}

.dl-replybar{
  display:none;
  margin-bottom: 10px;
  border-radius: 16px;
  border: 1px solid rgba(48,77,161,.22);
  background: rgba(48,77,161,.06);
  padding: 10px 12px;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-replybar .l{
  min-width:0;
}
.dl-replybar .t{
  margin: 0;
  font-weight: 950;
}
.dl-replybar .q{
  margin: 4px 0 0;
  color: var(--muted2);
  font-weight: 900;
  font-size: .86rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-replybar .x{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 950;
  cursor:pointer;
}

.dl-composer{
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
.dl-composer .left{
  flex: 1 1 auto;
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
.dl-composer textarea{
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding-top: 10px;
}
.dl-composer .actions{
  display:flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* quick replies */
.dl-quick{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.dl-quick .q{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 950;
  cursor:pointer;
  color: rgba(11,18,32,.82);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.dl-quick .q:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2);
}

/* dropzone */
.dl-drop{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  background: rgba(48,77,161,.05);
  padding: 12px;
  display:none;
  font-weight: 950;
  color: rgba(11,18,32,.78);
}
.dl-drop.is-on{ display:block; }

/* empty + loading */
.dl-empty{
  padding: 18px;
  border-radius: var(--r2);
  border: 1px dashed var(--border);
  background: rgba(255,255,255,.82);
  color: rgba(11,18,32,.78);
}
.dl-skel{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  padding: 12px;
}
.dl-skel .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.08);
  margin: 8px 0;
}
.dl-skel .bar.w1{ width: 70%; }
.dl-skel .bar.w2{ width: 44%; }
.dl-skel .bar.w3{ width: 82%; }

/* =========================================================
   Chat component bubbles (Components\Chat\Chat -> .dl-msg)
   Losse berichten-stream zonder de volledige chatkit-shell.
   Spiegelt de .dl-group/.dl-bubble look, met .dl-msg* markup.
   ========================================================= */
.dl-msg{
  display: flex;
  gap: 10px;
  margin: 12px 0;
  align-items: flex-end;
}
.dl-msg-me{ justify-content: flex-end; }

.dl-msg-avatar{
  flex: 0 0 auto;
  align-self: flex-end;
}

.dl-msg-bubble{
  max-width: min(80%, 620px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  padding: 9px 13px;
  box-shadow: 0 10px 28px rgba(11,18,32,.05);
  min-width: 0;
}
.dl-msg-them .dl-msg-bubble{ border-top-left-radius: 6px; }
.dl-msg-me .dl-msg-bubble{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.22);
  border-top-right-radius: 6px;
}

.dl-msg-author{
  font-weight: 900;
  font-size: .84rem;
  color: var(--accent, #304DA1);
  margin-bottom: 3px;
}
.dl-msg-text{
  color: rgba(11,18,32,.82);
  line-height: 1.5;
  font-size: .92rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dl-msg-meta{
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 5px;
  color: var(--muted2);
  font-size: .74rem;
  font-weight: 700;
}
.dl-msg-me .dl-msg-meta{ color: rgba(48,77,161,.72); }
.dl-msg-time{ white-space: nowrap; }

/* System note (gecentreerd, subtiel) */
.dl-msg-system{ justify-content: center; }
.dl-msg-system .dl-msg-bubble{
  max-width: 80%;
  background: rgba(11,18,32,.04);
  border-style: dashed;
  box-shadow: none;
  text-align: center;
}
.dl-msg-system .dl-msg-text{ font-size: .84rem; color: var(--muted2); }

/* Composer input (Chat::composer) */
.dl-composer-input{
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px;
  background: rgba(255,255,255,.96);
  font: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dl-composer-input:focus{
  border-color: rgba(48,77,161,.45);
  box-shadow: 0 0 0 3px rgba(48,77,161,.12);
}
.dl-composer-input::placeholder{ color: var(--muted2); }


/* ---- /assets/css/form.css ---- */
/* =========================================================
   form.css - DutchLine UI (Forms)
   - Premium / calm
   - Future-proof QOL patterns
   - Includes:
     - Inputs / textarea / native select polish
     - DLSelect (custom dropdown, fully styleable)
     - Input with icon + clear button
     - Validation (soft)
     - Choice chips
     - File input panel
     - Inline settings rows
   ========================================================= */

:root{
  --dl-success: #20c997;
  --dl-warning: #ffc107;
  --dl-danger:  #ff4d4d;
  --dl-info:    #0d6efd;

  --dl-success-soft: rgba(32,201,151,.10);
  --dl-warning-soft: rgba(255,193,7,.12);
  --dl-danger-soft:  rgba(255,77,77,.10);
  --dl-info-soft:    rgba(13,110,253,.10);

  --dl-success-border: rgba(32,201,151,.22);
  --dl-warning-border: rgba(255,193,7,.22);
  --dl-danger-border:  rgba(255,77,77,.22);
  --dl-info-border:    rgba(13,110,253,.22);
}

/* =========================================================
   Base controls
   ========================================================= */

.form-label{
  font-weight: 900;
  letter-spacing: -.01em;
}

.form-control,
.form-select,
.form-check-input{
  /* Via een eigen token, anders wint deze !important van de radius-cap in
     enka/sharp-edges.css en blijft een invoerveld op Enka als enige rond
     terwijl de keuzelijst ernaast scherp is. */
  border-radius: var(--dl-input-r, 10px) !important;
  border-color: var(--border);
}

.form-control,
.form-select{
  min-height: 46px;
  padding: 16px 16px !important;
  background: rgba(255,255,255,.92);
}

textarea.form-control{
  min-height: unset;
  padding-top: 12px;
  padding-bottom: 12px;
}

.form-control::placeholder{
  color: rgba(11,18,32,.45);
}

.form-control:focus,
.form-select:focus{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 6px var(--focus);
}

/* iOS Safari zoomt automatisch in wanneer een veld met font-size < 16px focus
   krijgt. Forceer 16px op mobiel zodat het typen niet schokkerig inzoomt. */
@media (max-width: 576px){
  .form-control,
  .form-select,
  textarea.form-control,
  .dl-input .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"]{
    font-size: 16px;
  }
}

.form-control:disabled,
.form-select:disabled{
  opacity: .78;
  background: rgba(11,18,32,.03);
}

/* Native select (closed state only, OS dropdown is not styleable) */
.form-select{
  border-color: var(--border);
}

/* =========================================================
   Help + hint
   ========================================================= */

.dl-help{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  margin-top: 6px;
}

.dl-hint{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

/* =========================================================
   Field wrapper + soft validation
   ========================================================= */

.dl-field{ position: relative; }

.dl-field.is-valid .form-control,
.dl-field.is-valid .form-select{
  border-color: rgba(32,201,151,.35);
  box-shadow: none;
}

.dl-field.is-invalid .form-control,
.dl-field.is-invalid .form-select{
  border-color: rgba(255,77,77,.35);
  box-shadow: none;
}

.dl-field.is-valid .dl-help{ color: rgba(32,201,151,.92); }
.dl-field.is-invalid .dl-help{ color: rgba(255,77,77,.92); }

/* Optional badge inside input */
.dl-field-badge{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 950;
  font-size: .78rem;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  color: rgba(11,18,32,.78);
  pointer-events:none;
}

.dl-field.is-valid .dl-field-badge{
  border-color: var(--dl-success-border);
  background: var(--dl-success-soft);
  color: rgba(11,18,32,.92);
}
.dl-field.is-invalid .dl-field-badge{
  border-color: var(--dl-danger-border);
  background: var(--dl-danger-soft);
  color: rgba(11,18,32,.92);
}

/* =========================================================
   Input with icon + clear button
   ========================================================= */
/* Form spacing: net iets ruimer op desktop */
#categorieFiltersForm{
  --dl-input-h: 44px;
}

/* Input wrapper */
.dl-input{
  position: relative;
  display: flex;
  align-items: center;
}

/* Left icon variant */
.dl-input--with-icon .dl-input-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
  pointer-events: none;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

/* Input field */
.dl-input .form-control{
  position: relative;
  z-index: 1;
  min-height: var(--dl-input-h);
  padding-right: 46px !important;      /* ruimte voor clear */
}

/* Als er icon links is: extra padding */
.dl-input--with-icon .form-control{
  padding-left: 42px !important;
}

/* Clear button: <a> als button */
.dl-clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 10px;

  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  color: inherit;

  z-index: 4;
  display: none;            /* alleen tonen bij has-value */
  align-items: center;
  justify-content: center;

  text-decoration: none;
  line-height: 1;
  opacity: .92;

  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease, transform .18s ease;
}

.dl-input.has-value .dl-clear{ display: inline-flex; }

.dl-clear:hover{
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
  opacity: 1;
  /* GEEN translateY(-1px) -> voorkomt “swipe down” */
  transform: translateY(-50%) scale(1.02);
}

.dl-clear:active{
  transform: translateY(-50%) scale(.98);
  box-shadow: 0 6px 14px rgba(11,18,32,.12);
}

.dl-clear:focus-visible{
  outline: none;
  border-color: var(--border2);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 10px 22px rgba(11,18,32,.10);
}

/* Labels iets consistenter */
#categorieFiltersForm .form-label{
  margin-bottom: .35rem;
}

/* Optioneel: op mobiel knop helemaal full-width (staat al door col-12 + d-grid) */
@media (max-width: 991.98px){
  #categorieFiltersForm .dl-btn{
    min-height: 44px;
  }
}


/* =========================================================
   Check / radio / switch (soft)
   ========================================================= */

.form-check-input{
  width: 18px;
  height: 18px;
  border-color: var(--border2);
  box-shadow: none !important;
}

.form-check-input:checked{
  background-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

.form-check-input:focus{
  box-shadow: 0 0 0 6px var(--focus) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.form-switch .form-check-input{
  width: 44px;
  height: 22px;
  border-radius: 999px;
}

/* =========================================================
   Form panel + settings rows
   ========================================================= */

.dl-form-panel{
  border-radius: calc(var(--r2) + 4px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 18px;
}

.dl-form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.dl-form-row:first-child{
  border-top: 0;
  padding-top: 0;
}

.dl-form-row .meta{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* =========================================================
   Choice chips
   ========================================================= */

.dl-choice-group{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.dl-choice{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.84);
  cursor: pointer;
  user-select:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dl-choice:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
}

.dl-choice[aria-pressed="true"]{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* =========================================================
   DLSelect - Custom dropdown (fully styleable)
   Wrap:
   <div class="dl-select" data-dl-select ...>
     <select>...</select>
   </div>
   ========================================================= */

.dl-select{ position: relative; width: 100%; min-width: 0; }

/* Keep select for form submit, but hide visually */
.dl-select > select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Trigger */
.dl-select-trigger {
    /* Een <button> centreert zijn tekst. Een keuzelijst staat naast gewone
       invoervelden en moet dus net zo links beginnen als die. */
    text-align: left;
    width: 100%;
    min-height: 46px;
    padding: 12px 14px 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dl-select-trigger:hover{
  border-color: var(--border2);
  background: #fff;
}

.dl-select.open .dl-select-trigger{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 6px var(--focus);
}

.dl-select-trigger .value{
  font-weight: 850;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
}

/* In een filterbalk mag de gekozen waarde opvallen, maar in een formulier
   staat hij naast invoervelden van gewicht 400 - op 850 leest de ene helft
   van een rij als kop en de andere als invoer. */
.dl-field .dl-select-trigger .value{ font-weight: 500; }

.dl-select-trigger.is-placeholder .value{
  font-weight: 800;
  color: rgba(11,18,32,.52);
}

/* Chevron button */
.dl-select-trigger .chev{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.dl-select.open .dl-select-trigger .chev{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* Dropdown panel */
.dl-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100%);
    z-index: 1200;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: none;
}

.dl-select.open .dl-select-menu{ display:block; }

/* .dl-card heeft isolation:isolate, dat creeert een stacking context per kaart.
   Daardoor blijft .dl-select-menu opgesloten in zijn eigen kaart en valt het achter
   volgende kaarten. Til de wrapper-elementen op zodra een select open staat zodat
   de kaart met de open dropdown bovenop komt. */
.dl-select.open{
  position: relative;
  z-index: 1300;
}
.dl-field:has(.dl-select.open),
.dl-card:has(.dl-select.open){
  z-index: 1050;
  position: relative;
}

/* .dl-admin-card heeft 'overflow:hidden' voor de afgeronde hoeken; dat klipt
   de open dropdown weg (search-input nog half zichtbaar, items eronder
   onzichtbaar). Bij een open select tijdelijk overflow visible toestaan. */
.dl-admin-card:has(.dl-select.open){
  overflow: visible;
  z-index: 1050;
  position: relative;
}

/* Search bar (optional) */
.dl-select-search{
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

.dl-select-search input{
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  outline: none;
  background: rgba(255,255,255,.92);
}

.dl-select-search input:focus{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 6px var(--focus);
}

/* List */
.dl-select-list{
  max-height: 280px;
  overflow:auto;
}

.dl-select-list::-webkit-scrollbar{ width: 10px; }
.dl-select-list::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}

.dl-select-item{
  padding: 11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor:pointer;
  
  color: rgba(11,18,32,.90);
  border-top: 1px solid rgba(11,18,32,.06);
  background: transparent;
  transition: background .15s ease;
}

.dl-select-item:first-child{ border-top: 0; }
.dl-select-item:hover{ background: rgba(48,77,161,.08); }
.dl-select-item.is-selected{ background: rgba(48,77,161,.10); }

.dl-select-item.is-disabled{
  opacity: .55;
  cursor:not-allowed;
}

.dl-select-item .meta{
  font-weight: 900;
  color: rgba(11,18,32,.55);
  font-size: .92rem;
}

.dl-select-empty{
  padding: 14px 12px;
  color: rgba(11,18,32,.60);
  font-weight: 800;
}

/* =========================================================
   File input (nice container)
   ========================================================= */

.dl-file{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(180deg, rgba(48,77,161,.06), rgba(255,255,255,.86));
  padding: 14px;
}

.dl-file .top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.dl-file .name{
  font-weight: 950;
  letter-spacing: -.01em;
}

.dl-file .sub{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.dl-file .actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
/* =========================================================
   Invalid state (Bootstrap-style .is-invalid)
   - Works with your current markup + JS that adds .is-invalid on inputs
   ========================================================= */

.form-control.is-invalid,
.form-select.is-invalid{
  border-color: var(--dl-danger-border) !important;
  box-shadow: 0 0 0 6px var(--dl-danger-soft) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus{
  border-color: var(--dl-danger) !important;
  box-shadow: 0 0 0 6px var(--dl-danger-soft) !important;
}

/* Checkbox/radio */
.form-check-input.is-invalid{
  border-color: var(--dl-danger-border) !important;
  box-shadow: 0 0 0 6px var(--dl-danger-soft) !important;
}

/* Show feedback when invalid */
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback{
  display: block;
}
/* =========================================================
   Bootstrap input-group polish (icon + input)
   Fix: hoogte/padding/align + 1 nette focus-ring
   ========================================================= */

.input-group{
  --dl-ig-h: 46px;
  --dl-ig-r: var(--dl-input-r, 10px);
  position: relative;
  align-items: stretch; /* zorgt dat children dezelfde hoogte pakken */
}

/* Het "icon" blok, links of rechts.
   --------------------------------------------------------------------------
   Dit blok ging er eerder van uit dat de tekst ALTIJD links staat: het veld
   kreeg onvoorwaardelijk border-left:0 en de tekst border-right:0. Bij een
   achtervoegsel ("stuk", "%") verloor het veld daardoor zijn linkerrand en
   het blokje zijn rechterrand, en zat de ronding aan de verkeerde kant - het
   zag eruit als twee losse stukken. Nu bepaalt de POSITIE welke rand weggaat. */
.input-group > .input-group-text{
  min-height: var(--dl-ig-h);
  padding: 0 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.input-group > .input-group-text:first-child{
  border-right: 0;   /* voorkomt dubbele border in het midden */
  border-radius: var(--dl-ig-r) 0 0 var(--dl-ig-r);
}
.input-group > .input-group-text:last-child{
  border-left: 0;
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0;
}

.input-group > .input-group-text i{
  opacity: .70;
  line-height: 1;
  font-size: .98rem;
}

/* Het veld zelf: alleen de rand weghalen waar een buur tegenaan ligt. */
.input-group > .form-control,
.input-group > .form-select{
  min-height: var(--dl-ig-h);
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child){ border-left: 0; }
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child){ border-right: 0; }

.input-group > .form-control:first-child,
.input-group > .form-select:first-child{
  border-radius: var(--dl-ig-r) 0 0 var(--dl-ig-r) !important;
}
.input-group > .form-control:last-child,
.input-group > .form-select:last-child{
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0 !important;
}
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .form-select:not(:first-child):not(:last-child){
  border-radius: 0 !important;
}

/* Focus-ring netjes om de hele group (niet 2x shadow) */
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select{
  box-shadow: none; /* jouw base .form-control:focus shadow uitzetten binnen group */
}

.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.input-group:focus-within{
  border-radius: var(--dl-ig-r);
  box-shadow: 0 0 0 6px var(--focus);
}

/* Disabled consistent */
.input-group > .form-control:disabled,
.input-group > .form-select:disabled{
  background: rgba(11,18,32,.03);
}
.input-group > .form-control:disabled ~ .input-group-text,
.input-group > .form-select:disabled ~ .input-group-text{
  opacity: .78;
}

/* =========================================================
   Input-group with DL button (prefix + input + dl-btn)
   ========================================================= */

/* Rechter button: DL variant */
.input-group > .dl-btn{
  min-height: var(--dl-ig-h);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-left: 0;                 /* geen dubbele border tussen input en knop */
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

/* Als er rechts een (dl-)button is: input krijgt geen rechter radius */
.input-group:has(> .dl-btn) > .form-control,
.input-group:has(> .dl-btn) > .form-select{
  border-radius: 0 !important;
}

/* Als er links input-group-text is én rechts dl-btn:
   - input blijft vlak
   - links/rechts krijgen de juiste hoeken */
.input-group:has(> .input-group-text):has(> .dl-btn) > .input-group-text{
  border-radius: var(--dl-ig-r) 0 0 var(--dl-ig-r);
}
.input-group:has(> .input-group-text):has(> .dl-btn) > .dl-btn{
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0;
}

/* Hover/active zonder “jump” - geen background override, laat button's eigen hover stijl */
.input-group > .dl-btn:hover{
  border-color: var(--border2);
}
.input-group > .dl-btn:active{
  transform: none;
}

/* Focus: ring om hele group, dl-btn geen eigen shadow */
.input-group:focus-within > .dl-btn{
  box-shadow: none !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}


/* ---- /assets/css/header.css ---- */
/* =========================================================
   header.css - DutchLine Header v4 (B2B)
   Works with your HTML exactly as posted.
   Notes:
   - Uses existing theme vars if present: --border, --border2, --panel, --text, --muted, --accent, --focus, --shadow, --shadow2, --r, --r2
   - Adds fallbacks so it still looks good if some vars don't exist
   - Mega menu opens via: .dl-mega.is-open .dl-mega-menu
   ========================================================= */

/* ---------- Fallback vars (safe) ---------- */
.dl-header-v4{
  --dl-ink: var(--text, rgba(11,18,32,.92));
  --dl-muted: var(--muted, rgba(11,18,32,.68));
  --dl-border: var(--border, rgba(11,18,32,.12));
  --dl-border2: var(--border2, rgba(11,18,32,.18));
  --dl-panel: var(--panel, #ffffff);
  --dl-surface: var(--surface, #ffffff);
  --dl-accent: var(--accent, #131F3F);
  --dl-focus: var(--focus, rgba(48,77,161,.18));
  --dl-shadow: var(--shadow, 0 16px 40px rgba(11,18,32,.12));
  --dl-shadow2: var(--shadow2, 0 10px 26px rgba(11,18,32,.08));
  --dl-r: var(--r, 12px);
  --dl-r2: var(--r2, 14px);
  position: sticky;
  top: 0;
  z-index: 1035;
}

/* subtle shadow when scrolling (toggled by JS: .is-shadow) */
.dl-header-v4.is-shadow .dl-nav-v4{
  box-shadow: 0 10px 26px rgba(11,18,32,.10);
  border-color: color-mix(in srgb, var(--dl-border2) 70%, transparent);
}

/* ---------- TOPBAR ---------- */
.dl-topbar-v4{
  background: linear-gradient(180deg, #131F3F, #131F3F);
  color: rgba(226,232,240,.92);
  font-size: 13px;
}
.dl-topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 9px 0;
}
.dl-topbar-left, .dl-topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.dl-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
  display:inline-block;
  transform: translateY(-1px);
}
/* Aanraakvlak: deze links waren 19,5px hoog. De topbalk groeit niet mee,
   want de negatieve marge compenseert de extra hoogte. */
.dl-toplink{
  color: rgba(226,232,240,.90);
  text-decoration:none;
  font-weight: 650;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  min-width:36px;
  margin-block:-8px;
}
@media (max-width: 768px){
  .dl-toplink{ min-height:44px; min-width:44px; margin-block:-12px; }
}
.dl-toplink:hover{ color:#fff; }
.dl-sep{ opacity:.55; }
/* chat.css definieert ook .dl-sep met margin:20px 0 - die marge maakt de topbar
   te hoog zodra er separators verschijnen (ingelogd). Topbar-scoped resetten. */
.dl-topbar-v4 .dl-sep{ display:inline-flex; margin:0; }

/* ---------- BRANDBAR ---------- */
.dl-brandbar-v4{
  background: rgba(255,255,255);
  border-bottom: 1px solid var(--dl-border);
}
.dl-brandbar-row{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 12px 0;
}
.dl-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--dl-ink);
  flex: 0 0 auto;
}
.dl-brand img{
  height: 70px;
  width: auto;
  display:block;
}

/* Search pill */
.dl-search-pill{
  flex: 1 1 auto;
  /* Vanaf 992px schakelt de header naar de desktopvariant, maar logo (266px)
     + zoekbalk (320px) + knoppen (385px) passen daar nog niet in. De zoekbalk
     kon door deze min-width niet meegeven, dus werd "Inloggen" 19px buiten het
     scherm geduwd en kreeg de pagina horizontale scroll. Onder 1200px mag hij
     krimpen; daarboven is er ruimte genoeg. */
  min-width: 200px;
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 8px 8px 8px 12px;
  background: linear-gradient(180deg,#fff,#f7f9ff);
  box-shadow: 0 10px 26px rgba(11,18,32,.06);
}
.dl-search-ico{
  display:inline-flex;
  color: rgba(11,18,32,.55);
}
.dl-search-input{
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: rgba(11,18,32,.86);
  /* Het veld had geen eigen hoogte en werd dus 24-26px: de pil ziet er groot
     uit, maar het echte aanraakvlak was een strookje. Nu vult het veld de
     volle binnenhoogte van de pil. */
  align-self: stretch;
  min-height: 36px;
}
.dl-search-input::placeholder{ color: rgba(11,18,32,.48); }

.dl-search-btn{
  border: 1px solid var(--dl-border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 850;
  color: rgba(11,18,32,.80);
  /* Tekstknop: minstens 96px breed, zodat hij niet op zijn woord gesnoeid is. */
  min-width: 96px;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.dl-search-btn:hover{
  border-color: var(--dl-border2);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
  background:#131F3F;
  color:#fff;
}
.dl-search-pill:focus-within{
  border-color: color-mix(in srgb, var(--dl-accent) 45%, var(--dl-border));
  box-shadow: 0 0 0 6px var(--dl-focus);
}
@media (min-width: 1200px){
  .dl-search-pill{ min-width: 320px; }
}

/* actions */
.dl-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Burger */
.dl-burger{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--dl-border);
  background: #fff;
  display:none;
  /* Zonder column stonden de drie balkjes naast elkaar. Ze passen dan met
     3x18px + gap niet in een knop van 44px, dus flexbox kneep ze tot streepjes
     van 7px: het icoon oogde kapot in plaats van als hamburger. */
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.dl-burger span{
  display:block;
  width: 18px;
  height: 2px;
  flex: 0 0 2px;
  border-radius: 999px;
  background: rgba(11,18,32,.65);
}

/* ---------- NAVBAR BOTTOM ---------- */
.dl-nav-v4{
  background: linear-gradient(180deg,#ffffff,#fbfcff);
  border-bottom: 1px solid var(--dl-border);
}
.dl-nav-row{
  display:flex;
  align-items:center;
  /* 6px -> 8px: minimale tussenruimte tussen twee aanraakvlakken. */
  gap: 8px;
  padding: 8px 0;
  position: relative;
  /* .dl-navlink heeft 12px zijpadding, waardoor de eerste menutekst 12px
     verder naar binnen begon dan het logo en de zoekbalk erboven. De
     negatieve marge trekt dat recht zonder de klikvlakken te verkleinen. */
  margin-inline: -12px;
}

.dl-navlink{
  appearance:none;
  border: 0;
  background: transparent;
  text-decoration:none;
  color: rgba(18,27,43,.92);
  font-weight: 850;
  padding: 10px 12px;
  border-radius: 5px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
  cursor: pointer;
}
.dl-navlink:hover{
  background: #131F3F;
  color: #fff;
}
.dl-navlink.is-active{
	background: #233A77;
	color:#fff;
}

.dl-caret{
  width: 10px;
  height: 10px;
  display:inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .72;
  /* Geen extra marge: .dl-navlink is flex met gap:8px, alles daarbovenop
     duwt het pijltje uit het midden tussen tekst en rechterrand. */
  margin-left: 0;
}

/* ---------- MEGA MENU ---------- */
.dl-mega{
  position: static;
  display: inline-flex;
  align-items: stretch;
}
.dl-mega-toggle{ user-select:none; }

/* Dropdown wrapper - zelfde display als losse navlinks zodat spacing
   in .dl-nav-row visueel identiek is. Zonder dit gedraagt .dl-dd zich als
   block-element en lijkt het extra ruimte rond de admin-toggles te
   pakken vergeleken met directe <a class="dl-navlink"> items. */
.dl-dd{
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.dl-mega-menu {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--dl-border);
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .16);
    padding: 18px 0 16px;
    overflow: hidden;
    backdrop-filter: blur(12px) saturate(140%);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    position: fixed;
    left: 0;
    right: 0;
    /* width: 100vw; */
    /* max-width: 100vw; */
    top: var(--dl-mega-top, 120px);
}
.dl-mega-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 320px at 10% 0%, rgba(48,77,161,.10), transparent 60%),
    radial-gradient(980px 320px at 90% 0%, rgba(6,182,212,.08), transparent 60%);
  opacity: .70;
}
.dl-mega-inner{
  position: relative;
  z-index: 2;
  /* Volgt --container-max (1440px) zodat de mega menu exact aligneert
     met de top-nav container hierboven. Geen overrides. */
}

.dl-mega.is-open > .dl-mega-toggle{
  background: linear-gradient(90deg, color-mix(in srgb, var(--dl-accent) 14%, transparent), color-mix(in srgb, #06b6d4 8%, transparent));
  color: var(--dl-accent);
}
.dl-mega.is-open > .dl-mega-toggle .dl-caret{
  transform: rotate(-135deg);
}

.dl-mega.is-open > .dl-mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* mega layout */
.dl-mega-grid{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: 16px;
  align-items: start;
}

/* left side */
.dl-mega-side{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--dl-shadow2);
  backdrop-filter: blur(8px) saturate(120%);
}
.dl-mega-side a{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(18,27,43,.92);
  font-weight: 950;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.dl-mega-side a .icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(48,77,161,.10), rgba(6,182,212,.06));
  border: 1px solid rgba(48,77,161,.18);
  color: var(--dl-accent);
  flex: 0 0 auto;
  margin-top: 1px;
}
.dl-mega-side a small{
  display:block;
  font-weight: 700;
  color: rgba(11,18,32,.62);
  margin-top: 3px;
  line-height: 1.2;
}
.dl-mega-side a:hover{
  background: linear-gradient(90deg, rgba(48,77,161,.08), transparent);
  color: var(--dl-accent);
  transform: translateX(1px);
}
.dl-mega-side a.is-active{
  background: linear-gradient(90deg, rgba(48,77,161,.12), rgba(6,182,212,.06));
  border-color: rgba(48,77,161,.18);
  color: var(--dl-accent);
}

/* right panels */
.dl-mega-panels{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--dl-shadow2);
  backdrop-filter: blur(10px) saturate(130%);
}
.dl-mega-panel{ display:none; }
.dl-mega-panel.is-active{ display:block; }

/* CSS Grid met flexibele kolombreedte. auto-fill houdt links-naar-rechts
   leesvolgorde en zorgt dat blokken naast elkaar staan. align-items: start
   voorkomt rare strekkingen bij ongelijke blok-hoogtes. */
.dl-mega-cols{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 24px;
  align-items: start;
}
@media (max-width: 599.98px){ .dl-mega-cols{ grid-template-columns: 1fr; } }
.dl-mega-col{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
/* Leaf-only bundel-blok: iets compacter ogen */
.dl-mega-col-leaf .dl-mega-title{ color: rgba(7,13,24,.70); }

/* Sneak preview grid voor categorieen zonder subcategorieen */
.dl-mega-preview{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.dl-mega-preview-head{
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(7,13,24,.62);
  margin-bottom: 12px;
}
.dl-mega-preview-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1199.98px){ .dl-mega-preview-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  767.98px){ .dl-mega-preview-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  479.98px){ .dl-mega-preview-grid{ grid-template-columns: repeat(2, 1fr); } }
.dl-mega-preview-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--dl-border, rgba(15,23,42,.08));
  border-radius: 12px;
  padding: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dl-mega-preview-card:hover{
  border-color: var(--dl-accent, #304DA1);
  box-shadow: 0 6px 18px rgba(48,77,161,.10);
  transform: translateY(-2px);
}
.dl-mega-preview-img{
  aspect-ratio: 1 / 1;
  background: #f7f8fb;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.dl-mega-preview-img img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.dl-mega-preview-name{
  font-size: .78rem;
  font-weight: 700;
  color: var(--dl-ink, #0b1220);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.dl-mega-preview-price{
  font-size: .82rem;
  font-weight: 800;
  color: var(--dl-accent, #304DA1);
  margin-top: auto;
}

/* Enka brand overrides voor preview */
body.is-enka .dl-mega-preview-head{
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .08em;
}
body.is-enka .dl-mega-preview-card{
  border-radius: 4px;
  border-color: rgba(10,10,10,.10);
}
body.is-enka .dl-mega-preview-card:hover{
  border-color: #0a0a0a;
  box-shadow: 0 4px 12px rgba(10,10,10,.10);
}
body.is-enka .dl-mega-preview-img{ border-radius: 2px; background: #f6f6f6; }
body.is-enka .dl-mega-preview-price{ color: #0a0a0a; }
.dl-mega-title{
  font-weight: 950;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  color: rgba(7,13,24,.95);
  letter-spacing: -.01em;
  font-size: .95rem;
}
.dl-mega-titlelink{
  color: inherit;
  text-decoration: none;
}
.dl-mega-titlelink:hover{ color: var(--dl-accent, #304DA1); }
.dl-mega-list{
  list-style:none;
  padding:0;
  margin:0;
}
.dl-mega-list li{ margin: 0; }
/* Aanraakvlak: deze links waren 24px hoog. Het megamenu staat alleen op
   desktop (>=992px), dus de eis is hier 36px. */
.dl-mega-list a{
  display:flex;
  align-items:center;
  min-height: 36px;
  padding: 5px 0;
  text-decoration:none;
  color: rgba(18,27,43,.78);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 4px;
  transition: color .12s ease, padding-left .12s ease;
}
.dl-mega-list a:hover{
  color: var(--dl-accent, #304DA1);
  padding-left: 4px;
}
.dl-mega-more{
  margin-top: 8px;
  font-size: .82rem;
}
/* Kop- en "bekijk alles"-link in dezelfde kolom: zelfde aanraakvlak als de
   lijst eronder, anders zijn ze de enige twee die eronder blijven. */
.dl-mega-titlelink,
.dl-mega-more a{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.dl-mega-more a{
  font-weight: 800;
  text-decoration: none;
  color: var(--dl-accent, #304DA1);
}
.dl-mega-more a:hover{ text-decoration: underline; }

/* Enka brand-override: scherpere hoeken, Barlow Condensed op titels */
body.is-enka .dl-mega-title{
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom-color: rgba(10,10,10,.10);
}
body.is-enka .dl-mega-list a:hover,
body.is-enka .dl-mega-titlelink:hover,
body.is-enka .dl-mega-more a{ color: #0a0a0a; }

/* bottom CTA row */
.dl-mega-bottom{
  margin-top: 12px;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(48,77,161,.18);
  background: linear-gradient(180deg, rgba(48,77,161,.10), rgba(6,182,212,.06));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dl-mega-bottom .label{
  font-weight: 950;
  color: rgba(7,13,24,.92);
}
.dl-mega-cta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- MOBILE DRAWER ---------- */
.dl-mnav{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(11,18,32,.40);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.dl-mnav.is-open{
  display:block;
  opacity: 1;
  pointer-events: auto;
}
.dl-mnav-card{
  margin: 14px auto;
  background: #fff;
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(11,18,32,.18);
  padding: 14px;
  max-width: 680px;
}
.dl-mnav-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-mnav-search{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.dl-mnav-input{
  flex: 1 1 auto;
  border: 1px solid var(--dl-border);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.dl-mnav-input:focus{
  border-color: color-mix(in srgb, var(--dl-accent) 45%, var(--dl-border));
  box-shadow: 0 0 0 6px var(--dl-focus);
}
.dl-mnav-links{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px){
  .dl-topbar-right{ display:none; }   /* clean mobile */
  /* zoekbalk blijft zichtbaar op mobiel/tablet - layout staat in header-mobile.css */
  .dl-burger{ display:inline-flex; }
  .dl-nav-v4{ display:none; }         /* nav inside drawer for mobile */

  /* Mega menu must be closed on mobile since nav hidden */
  .dl-mega-menu{ display:none !important; }
}

@media (max-width: 575.98px){
  .dl-brand img{ height: 34px; }
  .dl-mnav-card{ margin: 10px; }
  .dl-mnav-search{ flex-direction: column; }
}

/* ---------- Accessibility / motion ---------- */
.dl-header-v4 :where(a,button,input):focus-visible{
  outline: none;
  box-shadow: 0 0 0 6px var(--dl-focus);
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce){
  .dl-mega-menu, .dl-navlink, .dl-search-btn, .dl-mnav{ transition:none !important; }
}


/* ---- /assets/css/main.css ---- */
/* =========================================================
   main.css - DutchLine (site layer)
   Purpose:
   - Page-level polish moved out of inline <style>
   - Small global UX (scroll-to-top button)
   - Keep theme-core.css as foundation; main.css extends it
   ========================================================= */

/* =========================================================
   Home-only components (moved from index.php inline style)
   ========================================================= */
.dl-kicker{
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.78rem;
  color: color-mix(in srgb, var(--accent) 65%, var(--text));
}
.dl-section-title{ font-weight: 900; letter-spacing: -.02em; margin: 0; }
.dl-section-sub{ color: var(--muted); margin: 10px 0 0; line-height: 1.7; }
.dl-divider{ border-top: 1px solid var(--border); }

/* Hero showcase mosaic */
.dl-mosaic{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dl-mosaic .m1{ grid-column: 1 / span 2; }

.dl-mosaic-card{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-mosaic-card:hover{
  transform: translateY(-2px);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
.dl-mosaic-media{
   
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.dl-mosaic-media img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  
}
.dl-mosaic-body{ padding: 14px 16px; }
.dl-mini-title{ font-weight: 900; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.dl-mini-meta{ margin: 6px 0 0; color: var(--muted); line-height: 1.55; font-size: .95rem; }
.dl-mini-tag{
  position:absolute; top: 12px; left: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Showcase grid */
.dl-show-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.dl-show-grid .a{ grid-column: span 4; }
.dl-show-grid .b{ grid-column: span 4; }
.dl-show-grid .c{ grid-column: span 4; }
@media (max-width: 991px){
  .dl-show-grid .a, .dl-show-grid .b, .dl-show-grid .c{ grid-column: span 12; }
}

/* Horizontal bestsellers strip */
.dl-strip{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.dl-strip::-webkit-scrollbar{ height: 10px; }
.dl-strip::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; }
.dl-strip-item{
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
}
@media (max-width: 575px){
  .dl-strip-item{ width: 280px; }
}

/* “How it works” */
.dl-step{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 18px;
  height: 100%;
}
.dl-step-icon{
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--accent-soft);
  display:grid; place-items:center;
  font-weight: 900;
}
.dl-step h3{
  font-weight: 900;
  letter-spacing: -.01em;
  margin: 12px 0 6px;
  font-size: 1.05rem;
}
.dl-step p{ margin: 0; color: var(--muted); line-height: 1.65; }

/* CTA band */
.dl-cta-band{
  border-radius: calc(var(--r2) + 6px);
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 220px at 10% 10%, rgba(48,77,161,.10), transparent 60%),
    radial-gradient(700px 240px at 85% 0%, rgba(128,160,208,.10), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow2);
  padding: 22px;
  overflow:hidden;
  position: relative;
}
.dl-cta-band::after{
  content:"";
  position:absolute; right:-140px; top:-160px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(48,77,161,.16), transparent 62%);
  pointer-events:none;
  filter: blur(1px);
}

/* =========================================================
   Scroll-to-top button (global)
   ========================================================= */
.dl-topbtn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 44px rgba(11,18,32,.12);
  display: grid;
  place-items: center;
  color: rgba(11,18,32,.82);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.dl-topbtn:hover{
  border-color: var(--border2);
  background: #fff;
  transform: translateY(8px);
}
.dl-topbtn.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dl-topbtn:focus{
  outline: none;
  box-shadow: 0 0 0 6px var(--focus), 0 16px 44px rgba(11,18,32,.12);
}
/* De sticky koopbalk op de productpagina ligt op bottom:0 met een lagere
   z-index, dus deze knop dekte precies het rechteruiteinde van "Toevoegen aan
   winkelwagen" af. Zolang die balk in beeld staat, schuift hij erboven. */
body:has(.pdp-sticky-buy.is-visible) .dl-topbtn{
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce){
  .dl-topbtn, .dl-mosaic-card{ transition: none !important; }
}

 /* Hero background image */
 


/* ---- /assets/css/modal.css ---- */
/* =========================================================
   modal.css - DutchLine UI (Modals / Offcanvas overlays)
   - Bootstrap modal/offcanvas enhanced styling
   - Premium, soft, enterprise
   - Variants: neutral/success/danger/warning/info
   ========================================================= */

/* Backdrop: softer + blur */
.modal-backdrop.show{
  opacity: .42;
}
@supports (backdrop-filter: blur(10px)){
  .modal-backdrop.show{
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* Dialog entrance animation */
.modal.fade .modal-dialog{
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease, opacity .22s ease;
}
.modal.show .modal-dialog{
  transform: translateY(0) scale(1);
}

/* DutchLine modal shell */
.dl-modal .modal-content{
  border-radius: calc(var(--r2) + 2px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 90px rgba(11,18,32,.18);
  overflow:hidden;
}

/* Top accent line */
.dl-modal .modal-content::before{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.70), rgba(128,160,208,.25), transparent);
  opacity: .9;
}

/* Header / body / footer */
.dl-modal .modal-header{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px 16px;
}
.dl-modal .modal-title{
  font-weight: 950;
  letter-spacing: -.02em;
}
.dl-modal .modal-body{
  padding: 16px;
  color: rgba(11,18,32,.90);
}
.dl-modal .modal-footer{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px 16px;
  gap: 10px;
}

/* Close button toned down */
.dl-modal .btn-close{
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.dl-modal .btn-close:hover{
  opacity: .85;
  transform: translateY(-1px);
}

/* Optional icon chip inside header/body */
.dl-modal-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  display:grid;
  place-items:center;
  font-weight: 950;
}

/* Variant system (soft only) */
.dl-modal[data-variant="neutral"] .modal-content::before{
  background: linear-gradient(90deg, rgba(11,18,32,.26), rgba(11,18,32,.10), transparent);
}
.dl-modal[data-variant="success"] .modal-content::before{
  background: linear-gradient(90deg, rgba(32,201,151,.75), rgba(32,201,151,.18), transparent);
}
.dl-modal[data-variant="danger"] .modal-content::before{
  background: linear-gradient(90deg, rgba(255,77,77,.75), rgba(255,77,77,.18), transparent);
}
.dl-modal[data-variant="warning"] .modal-content::before{
  background: linear-gradient(90deg, rgba(255,193,7,.80), rgba(255,193,7,.18), transparent);
}
.dl-modal[data-variant="info"] .modal-content::before{
  background: linear-gradient(90deg, rgba(13,110,253,.80), rgba(13,110,253,.18), transparent);
}

/* Variant icon chip backgrounds */
.dl-modal[data-variant="success"] .dl-modal-icon{
  border-color: rgba(32,201,151,.22);
  background: rgba(32,201,151,.10);
}
.dl-modal[data-variant="danger"] .dl-modal-icon{
  border-color: rgba(255,77,77,.22);
  background: rgba(255,77,77,.10);
}
.dl-modal[data-variant="warning"] .dl-modal-icon{
  border-color: rgba(255,193,7,.22);
  background: rgba(255,193,7,.12);
}
.dl-modal[data-variant="info"] .dl-modal-icon{
  border-color: rgba(13,110,253,.22);
  background: rgba(13,110,253,.10);
}

/* Full width modal (within container width) */
.modal-dialog.dl-modal-wide{
  max-width: min(1100px, 92vw);
}

/* “Full width” meaning almost screen-wide */
.modal-dialog.dl-modal-full{
  max-width: min(1320px, 96vw);
}

/* Scrollable modal body polish */
.modal-dialog-scrollable .modal-body{
  scrollbar-gutter: stable;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar{ width: 10px; }
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}

/* Form layout inside modal */
.dl-modal .dl-form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.dl-modal .dl-col-6{ grid-column: span 6; }
.dl-modal .dl-col-12{ grid-column: span 12; }
@media (max-width: 991px){
  .dl-modal .dl-col-6{ grid-column: span 12; }
}

/* Signature pad */
.dl-signature{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.08), transparent 60%),
    var(--surface);
  overflow:hidden;
}
.dl-signature .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.86);
}
.dl-signature canvas{
  width: 100%;
  height: 180px;
  display:block;
  cursor: crosshair;
}
.dl-signature .hint{
  color: var(--muted);
  font-size: .92rem;
}

/* Offcanvas polish (optional, but nice here) */
.offcanvas{
  border-left: 1px solid var(--border);
  background: rgba(255,255,255,.94);
}
.offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas .offcanvas-title{
  font-weight: 950;
  letter-spacing: -.02em;
}


/* ---- /assets/css/pagination.css ---- */
/* =========================================================
   pagination.css - DutchLine UI (Pagination)
   - Styles Bootstrap pagination
   - Premium, soft, enterprise
   - Sizes, compact, input-jump, per-page, meta bar
   ========================================================= */

.dl-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* meta links, controls rechts */
.dl-pager-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin-left:auto; /* = ms-auto effect */
}

.dl-pager-meta{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: .95rem;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

.dl-pager .pagination{
  margin: 0;
  gap: 8px;
}

/* Base link */
.dl-pager .page-link{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: rgba(11,18,32,.86);
  font-weight: 900;
  letter-spacing: .01em;
  padding: 10px 12px;
  min-width: 42px;
  text-align:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
  cursor: pointer;
}

/* Aanraakvlak: 42px min-width maar de hoogte kwam op 40,1px uit. */
.dl-pager .page-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
}
@media (max-width: 768px){
  .dl-pager .page-link{ min-height: 44px; min-width: 44px; }
}
.dl-pager .page-link:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

.dl-pager .page-link:focus{ outline:none; }
.dl-pager .page-link:focus-visible{
  box-shadow: 0 0 0 6px var(--focus), 0 12px 26px rgba(11,18,32,.08);
}

/* Active */
.dl-pager .page-item.active .page-link{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.10);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(48,77,161,.12);
}

/* Disabled */
.dl-pager .page-item.disabled .page-link,
.dl-pager .page-link[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  cursor: default;
  transform:none;
  box-shadow:none;
}

/* Ellipsis */
.dl-pager .page-item .page-link.dl-ellipsis{
  background: rgba(11,18,32,.05);
  border-color: rgba(11,18,32,.08);
  min-width: 46px;
}

/* Compact variant */
.dl-pager.dl-pager-compact .page-link{
  padding: 8px 10px;
  min-width: 38px;
  border-radius: 12px;
  font-size: .92rem;
}

/* Size variants */
.dl-pager.dl-pager-sm .page-link{
  padding: 8px 10px;
  min-width: 38px;
  border-radius: 12px;
  font-size: .92rem;
}
.dl-pager.dl-pager-lg .page-link{
  padding: 12px 14px;
  min-width: 46px;
  border-radius: 16px;
  font-size: 1.02rem;
}

/* Optional variant */
.dl-pager[data-variant="soft"] .page-item.active .page-link{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.18);
  box-shadow: 0 14px 30px rgba(48,77,161,.10);
}

/* Jump / per page controls */
.dl-pager .dl-pager-jump{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dl-pager .dl-pager-jump .form-control{
  width: 92px;
  text-align:center;
}

.dl-pager .dl-pager-perpage{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dl-pager .dl-pager-perpage .form-select{
  width: auto;
  min-width: 120px;
}

/* Little "pill" labels */
.dl-pager .dl-mini{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(11,18,32,.84);
}

/* Loading state (optional, JS toggles) */
.dl-pager.is-loading{
  opacity: .75;
  pointer-events:none;
}
.dl-pager.is-loading .dl-mini::after{
  content:"";
  display:inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 999px;
  border: 2px solid rgba(11,18,32,.35);
  border-right-color: transparent;
  animation: dlPagerSpin .75s linear infinite;
  vertical-align: -2px;
}
@keyframes dlPagerSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.dl-pager{
  width: 100%;
}

.dl-pager-controls{
  margin-left: auto;
  justify-content: flex-end; /* extra duw naar rechts */
}


/* ---- /assets/css/steps.css ---- */
/* =========================================================
   steps.css - DutchLine UI (Steps) v1.0
   Variants:
   - default cards (vertical on mobile)
   - timeline (left border)
   - progress bar (connected)
   - numbered pills (compact)
   - icon steps (circle)
   - status steps (done/active/todo/error)
   - small / dense mode
   ========================================================= */

:root{
  --dl-step-line: rgba(11,18,32,.10);
  --dl-step-soft: rgba(48,77,161,.08);
  --dl-step-soft2: rgba(11,18,32,.04);
}

/* -------------------------
   Layout wrappers
------------------------- */
.dl-steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.dl-steps[data-cols="2"] .dl-step-item{ grid-column: span 6; }
.dl-steps[data-cols="3"] .dl-step-item{ grid-column: span 4; }
.dl-steps[data-cols="4"] .dl-step-item{ grid-column: span 3; }

@media (max-width: 991px){
  .dl-steps .dl-step-item{ grid-column: span 12 !important; }
}

/* -------------------------
   Base step card
------------------------- */
.dl-step{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
  position: relative;
  overflow:hidden;
}

.dl-step:hover{
  border-color: var(--border2);
  box-shadow: var(--shadow);
}

.dl-step-topline{
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(48,77,161,.15));
  opacity: .75;
}

.dl-step-row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.dl-step-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.15;
  font-size: 1.05rem;
}

.dl-step-text{
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.65;
}

/* -------------------------
   Step icon/number
------------------------- */
.dl-step-badge{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.86);
  box-shadow: 0 18px 50px rgba(11,18,32,.08);
}

.dl-step-badge.is-circle{
  border-radius: 999px;
}

.dl-step-badge.is-soft{
  background: var(--dl-step-soft);
  border-color: rgba(48,77,161,.18);
}

.dl-step-badge.is-success{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.22);
}
.dl-step-badge.is-warning{
  background: rgba(255,193,7,.14);
  border-color: rgba(255,193,7,.24);
}
.dl-step-badge.is-danger{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}

/* -------------------------
   Status labels
------------------------- */
.dl-step-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

.dl-step-status .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.35);
}

.dl-step-status.is-active{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.20);
}
.dl-step-status.is-active .dot{ background: rgba(48,77,161,.95); }

.dl-step-status.is-done{
  background: rgba(32,201,151,.10);
  border-color: rgba(32,201,151,.22);
}
.dl-step-status.is-done .dot{ background: rgba(32,201,151,.95); }

.dl-step-status.is-error{
  background: rgba(255,77,77,.10);
  border-color: rgba(255,77,77,.22);
}
.dl-step-status.is-error .dot{ background: rgba(255,77,77,.95); }

/* -------------------------
   Compact "pills" steps
------------------------- */
.dl-steps-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.dl-pillstep{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  font-weight: 900;
  color: rgba(11,18,32,.86);
}

.dl-pillstep .n{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.10);
  font-weight: 950;
}

.dl-pillstep.is-active{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.24);
}
.dl-pillstep.is-done{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.24);
}
.dl-pillstep.is-error{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}

/* -------------------------
   Connected progress steps
------------------------- */
.dl-steps-progress{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.dl-progressbar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.08);
}

.dl-progressbar > .fill{
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease;
}

.dl-steps-track{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
}

.dl-track-step{
  flex: 1 1 0;
  text-align:center;
  min-width: 0;
}

.dl-track-step .bubble{
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  font-weight: 950;
}

.dl-track-step .label{
  font-weight: 900;
  color: rgba(11,18,32,.82);
  font-size: .95rem;
}

.dl-track-step .sub{
  color: var(--muted);
  font-size: .86rem;
  margin-top: 3px;
}

.dl-track-step.is-done .bubble{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.24);
}
.dl-track-step.is-active .bubble{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.24);
}
.dl-track-step.is-error .bubble{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}

/* -------------------------
   Timeline steps (vertical)
------------------------- */
.dl-steps-timeline{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-timeline-item{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid rgba(11,18,32,.06);
}
.dl-timeline-item:first-child{ border-top: 0; }

.dl-timeline-rail{
  position: relative;
  width: 44px;
  flex: 0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.dl-timeline-rail:before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(11,18,32,.10);
}

.dl-timeline-dot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(11,18,32,.18);
  border: 1px solid rgba(11,18,32,.18);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.dl-timeline-item.is-done .dl-timeline-dot{
  background: rgba(32,201,151,.95);
  border-color: rgba(32,201,151,.45);
}
.dl-timeline-item.is-active .dl-timeline-dot{
  background: rgba(48,77,161,.95);
  border-color: rgba(48,77,161,.45);
}
.dl-timeline-item.is-error .dl-timeline-dot{
  background: rgba(255,77,77,.95);
  border-color: rgba(255,77,77,.45);
}

.dl-timeline-title{
  font-weight: 950;
  letter-spacing: -.02em;
}

.dl-timeline-text{
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.65;
}

.dl-timeline-meta{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* -------------------------
   Small / dense mode
------------------------- */
.dl-step.is-dense{ padding: 12px; }
.dl-step.is-dense .dl-step-badge{ width: 40px; height: 40px; border-radius: 14px; }
.dl-step.is-dense .dl-step-title{ font-size: 1rem; }

.dl-wizard{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-wizard-head{
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.dl-wizard-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

.dl-wizard-sub{
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.6;
  font-size: .95rem;
}

/* Step pills in wizard */
.dl-wizard-steps{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

.dl-wstep{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  font-weight: 900;
  color: rgba(11,18,32,.86);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  user-select:none;
}

.dl-wstep:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 28px rgba(11,18,32,.08);
}

.dl-wstep[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

.dl-wstep .n{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.10);
  font-weight: 950;
}

.dl-wstep.is-active{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.24);
}
.dl-wstep.is-active .n{
  background: rgba(48,77,161,.16);
  border-color: rgba(48,77,161,.22);
}

.dl-wstep.is-done{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.24);
}
.dl-wstep.is-done .n{
  background: rgba(32,201,151,.16);
  border-color: rgba(32,201,151,.22);
}

.dl-wstep.is-error{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}
.dl-wstep.is-error .n{
  background: rgba(255,77,77,.16);
  border-color: rgba(255,77,77,.22);
}

/* Body + panels */
.dl-wizard-body{
  padding: 14px;
}

.dl-wpanel{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px;
  box-shadow: 0 16px 50px rgba(11,18,32,.07);
}

.dl-wpanel h3{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.15rem;
}

.dl-wpanel p{
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.65;
}

/* Wizard panel visibility */
.dl-wizard [data-dl-wpanel]{
  display:none;
}
.dl-wizard [data-dl-wpanel].is-active{
  display:block;
}

/* Footer controls */
.dl-wizard-foot{
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.dl-wizard-meta{
  color: var(--muted);
  font-weight: 850;
}

.dl-wizard-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Wizard mini progress */
.dl-wizard-progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.08);
  margin-top: 10px;
}

.dl-wizard-progress .fill{
  height:100%;
  width:0%;
  background: var(--accent);
  transition: width .25s ease;
}

/* Wizard inline errors (optional) */
.dl-wizard-error{
  margin-top: 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(255,77,77,.22);
  background: rgba(255,77,77,.10);
  padding: 10px 12px;
  font-weight: 850;
  color: rgba(11,18,32,.88);
  display:none;
}
.dl-wizard-error.is-visible{ display:block; }


/* ---- /assets/css/tabs.css ---- */
/* =========================================================
   tabs.css - DutchLine .dl-tabs component
   Locatie: /assets/css/tabs.css

   Markup (Components\Tab\Tab):
     <div class="dl-tabs dl-tabs-{line|pills|enclosed}" id="...">
       <ul class="dl-tabs-nav" role="tablist">
         <li role="presentation"><button class="dl-tab is-active">...</button></li>
       </ul>
       <div class="dl-tabs-panels">
         <div class="dl-tab-panel is-active">...</div>
       </div>
     </div>

   Verticale variant (raw markup, demo):
     <div class="dl-vtabs-wrap">
       <div class="dl-vtabs-nav">...</div>
       <div class="dl-vtabs-content">...</div>
     </div>
   ========================================================= */

/* ---- Wrapper -------------------------------------------- */
.dl-tabs {
  display: flex;
  flex-direction: column;
}

/* ---- Nav (tablist) -------------------------------------- */
.dl-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 6px -> 8px: minimale tussenruimte tussen twee aanraakvlakken. */
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-tabs-nav > li {
  margin: 0;
  padding: 0;
}

/* ---- Tab button (basis) --------------------------------- */
.dl-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  padding: 9px 14px;
  border-radius: var(--r, 14px);
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
  white-space: nowrap;
}
.dl-tab:hover {
  color: var(--ink);
  background: rgba(48,77,161,.06);
}
.dl-tab.is-active {
  color: var(--accent);
}
.dl-tab.is-disabled,
.dl-tab:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.dl-tab i { opacity: .7; font-size: .85em; }
.dl-tab.is-active i { opacity: 1; }

/* ---- Panels --------------------------------------------- */
.dl-tabs-panels { margin-top: 16px; }
.dl-tab-panel { display: none; }
.dl-tab-panel.is-active {
  display: block;
  animation: dl-tab-fade .18s ease;
}
@keyframes dl-tab-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Variant: pills (default look in showcase)
   ========================================================= */
.dl-tabs-pills .dl-tab {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: rgba(11,18,32,.78);
}
.dl-tabs-pills .dl-tab:hover {
  border-color: var(--accent);
  background: #fff;
  color: var(--ink);
}
.dl-tabs-pills .dl-tab.is-active {
  border-color: rgba(48,77,161,.22);
  background: var(--accent-soft, rgba(48,77,161,.10));
  color: var(--accent);
}

/* =========================================================
   Variant: line (onderstreping)
   ========================================================= */
.dl-tabs-line .dl-tabs-nav {
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.dl-tabs-line .dl-tab {
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.dl-tabs-line .dl-tab:hover {
  background: rgba(48,77,161,.06);
}
.dl-tabs-line .dl-tab.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
   Variant: enclosed (folder-tabs)
   ========================================================= */
.dl-tabs-enclosed .dl-tabs-nav {
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.dl-tabs-enclosed .dl-tab {
  border-radius: var(--r, 14px) var(--r, 14px) 0 0;
  padding: 10px 14px;
  margin-bottom: -1px;
  border-color: transparent;
}
.dl-tabs-enclosed .dl-tab:hover {
  background: rgba(48,77,161,.06);
}
.dl-tabs-enclosed .dl-tab.is-active {
  color: var(--ink);
  background: var(--bg, #fff);
  border-color: var(--border);
  border-bottom-color: transparent;
}

/* =========================================================
   Verticale tabs (.dl-vtabs-wrap)
   ========================================================= */
.dl-vtabs-wrap {
  display: flex;
  align-items: stretch;
  min-height: 220px;
}
.dl-vtabs-nav {
  flex-shrink: 0;
  width: 220px;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.dl-vtabs-nav .nav { gap: 8px; }
.dl-vtabs-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
}
.dl-vtabs-nav .nav-link i {
  width: 16px;
  text-align: center;
  opacity: .7;
  flex-shrink: 0;
}
.dl-vtabs-nav .nav-link.active i { opacity: 1; }
.dl-vtabs-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
}

/* ---- Mobiel: stapelen -------------------------------- */
@media (max-width: 767px) {
  .dl-vtabs-wrap { flex-direction: column; }
  .dl-vtabs-nav {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .dl-vtabs-nav .nav { flex-direction: row !important; flex-wrap: wrap; }
}

/* =========================================================
   Variant: side-tabs (.dl-side-tabs)
   ---------------------------------------------------------
   Admin-detailpaginas: op desktop een vast menu LINKS naast de inhoud, op
   kleinere schermen een horizontale balk BOVEN de inhoud. Zelfde component en
   dezelfde tabs.js - alleen een andere richting.

   Gebruik:
     Components\Tab\Tab::render([
       'id' => 'invoiceTabs', 'variant' => 'pills', 'class' => 'dl-side-tabs',
       'tabs' => [ ['label' => 'Overzicht', 'icon' => 'fa-file-invoice', 'body' => $html], ... ]
     ]);
   ========================================================= */
.dl-side-tabs .dl-tabs-nav{
  background:#fff; border:1px solid #eef2f6; border-radius:14px;
  padding:8px; gap:8px;
}
.dl-side-tabs .dl-tab{
  border:1px solid transparent; background:transparent;
  color:#475569; font-weight:700;
}
.dl-side-tabs .dl-tab:hover{
  background:var(--accent-soft, rgba(48,77,161,.08));
  color:var(--accent, #304DA1);
}
.dl-side-tabs .dl-tab.is-active{
  background:var(--accent, #304DA1); border-color:var(--accent, #304DA1);
  color:#fff; box-shadow:0 6px 16px rgba(var(--accent-rgb, 48,77,161), .22);
}
.dl-side-tabs .dl-tab.is-active i{ opacity:1; }
.dl-side-tabs .dl-tabs-panels{ margin-top:0; }

@media (min-width: 992px){
  .dl-side-tabs{ flex-direction:row; align-items:flex-start; gap:18px; }
  .dl-side-tabs > .dl-tabs-nav{
    flex:0 0 250px; width:250px; flex-direction:column; flex-wrap:nowrap;
    position:sticky; top:88px;
  }
  .dl-side-tabs > .dl-tabs-nav > li{ width:100%; }
  .dl-side-tabs > .dl-tabs-nav .dl-tab{
    width:100%; justify-content:flex-start; text-align:left;
    padding:11px 13px; white-space:normal;
  }
  .dl-side-tabs > .dl-tabs-nav .dl-tab i{ width:18px; text-align:center; }
  .dl-side-tabs > .dl-tabs-panels{ flex:1 1 auto; min-width:0; }
}

@media (max-width: 991.98px){
  .dl-side-tabs > .dl-tabs-nav{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-bottom:14px;
  }
  .dl-side-tabs > .dl-tabs-nav::-webkit-scrollbar{ height:0; }
}

/* Actielijst binnen een tab: label + omschrijving links, knop rechts. */
.dl-act-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid #f1f5f9;
}
.dl-act-row:last-child{ border-bottom:0; }
.dl-act-row .dl-act-txt{ flex:1 1 260px; min-width:0; }
.dl-act-row .dl-act-txt strong{ display:block; font-size:.95rem; color:#0b1220; }
.dl-act-row .dl-act-txt span{ font-size:.82rem; color:#64748b; }
.dl-act-row .dl-act-btn{ flex:0 0 auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }


/* ---- /assets/css/timeline.css ---- */
/* ==========================================================================
   timeline.css
   --------------------------------------------------------------------------
   .dl-timeline - verticale audittrail / historie.

   Gebruikt door de historie-tabs in /admin/financial/* (orderAudit::timeline).

   Markup:
     <ul class="dl-timeline">
       <li class="dl-tl-item tone-ok">
         <div class="dl-tl-dot"><i class="fa-solid fa-coins"></i></div>
         <div class="dl-tl-body">
           <div class="dl-tl-top">
             <span class="dl-tl-label">Betaling ontvangen: € 65,95</span>
             <span class="dl-tl-time">28-07-2026 14:12</span>
           </div>
           <div class="dl-tl-detail">PAY-123 · ideal</div>
           <div class="dl-tl-meta"><i class="fa-solid fa-user"></i> Mert (Admin)
             <span class="dl-tl-src">payment</span></div>
         </div>
       </li>
     </ul>

   tone-*: ok (groen) | warn (geel) | err (rood) | info (blauw) | muted (grijs)
   ========================================================================== */

.dl-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Verticale lijn door alle punten heen */
.dl-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #eef2f6;
  border-radius: 2px;
}

.dl-tl-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 0;
}
.dl-tl-item:last-child { padding-bottom: 0; }

.dl-tl-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  background: #f1f5f9;
  color: #5a6b7d;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #eef2f6;
}

.dl-tl-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }

.dl-tl-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dl-tl-label {
  font-weight: 700;
  font-size: .92rem;
  color: #0b1220;
  word-break: break-word;
}
.dl-tl-time {
  font-size: .78rem;
  color: #5a6b7d;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dl-tl-detail {
  font-size: .82rem;
  color: #5a6b7d;
  margin-top: 2px;
  word-break: break-word;
}

.dl-tl-meta {
  font-size: .76rem;
  color: #5a6b7d;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dl-tl-src {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #5a6b7d;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Tonen -------------------------------------------------------------- */
.dl-tl-item.tone-ok   .dl-tl-dot { background: rgba(22, 163, 74, .12);  color: #16a34a; box-shadow: 0 0 0 1px rgba(22, 163, 74, .25); }
.dl-tl-item.tone-warn .dl-tl-dot { background: rgba(245, 158, 11, .14); color: #b45309; box-shadow: 0 0 0 1px rgba(245, 158, 11, .28); }
.dl-tl-item.tone-err  .dl-tl-dot { background: rgba(220, 38, 38, .12);  color: #dc2626; box-shadow: 0 0 0 1px rgba(220, 38, 38, .25); }
.dl-tl-item.tone-info .dl-tl-dot { background: rgba(14, 165, 233, .12); color: #0284c7; box-shadow: 0 0 0 1px rgba(14, 165, 233, .25); }

/* ---- Compacte variant --------------------------------------------------- */
.dl-timeline.is-compact .dl-tl-item { padding: 6px 0; }
.dl-timeline.is-compact .dl-tl-dot  { flex-basis: 26px; width: 26px; height: 26px; font-size: .7rem; }
.dl-timeline.is-compact::before     { left: 12px; }
.dl-timeline.is-compact .dl-tl-label { font-size: .86rem; }

@media (max-width: 575.98px) {
  .dl-tl-top { flex-direction: column; gap: 2px; }
}


/* ---- /assets/css/table.css ---- */
/* =========================================================
   table.css - DutchLine UI (Tables) v1.3
   - Premium / calm / admin-ready
   - Backwards compatible with v1.0 + v1.2
   - Fixes common pitfalls:
     * Sticky header + sticky tools offset via CSS var
     * Focus rings not clipped by overflow (uses box-shadow)
     * Reduced motion support
     * color-mix fallback
   ========================================================= */

:root{
  --dl-row-hover: rgba(48,77,161,.06);
  --dl-row-hover-strong: rgba(48,77,161,.10);
  --dl-row-selected: rgba(48,77,161,.13);
  --dl-row-selected-border: rgba(48,77,161,.30);
  --dl-row-focus: rgba(48,77,161,.18);
  --dl-z-sticky: 4;
  --dl-z-tools: 5;

  /* Sticky tools height (override per page if needed)
     Example: .dl-table-wrap{ --dl-sticky-tools-h: 72px; } */
  --dl-sticky-tools-h: 62px;

  /* ✅ Copy tooltip tokens (safe defaults) */
  --dl-copy-tip-bg: rgba(11,18,32,.92);
  --dl-copy-tip-ink: rgba(255,255,255,.96);
  --dl-copy-tip-shadow: 0 14px 30px rgba(11,18,32,.18);
  --dl-copy-tip-radius: 12px;
  --dl-copy-tip-pad: 8px 10px;
  --dl-copy-tip-font: .86rem;
}

/* =========================
   Shell
   ========================= */
.dl-table-wrap{
  border-radius: 10px;
  border: 1px solid rgba(11,18,32,.09);
  background: #fff;
  box-shadow: 0 2px 8px rgba(11,18,32,.06), 0 12px 32px rgba(11,18,32,.07);
  overflow: hidden;
}

/* Allow using dl-table-wrap on .table-responsive too (your usage) */
.table-responsive.dl-table-wrap{
  -webkit-overflow-scrolling: touch;
}

/* =========================
   Header / tools
   ========================= */
.dl-table-head{
  padding: 14px 20px;
  border-bottom: 1px solid rgba(11,18,32,.07);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 58px;
}

.dl-table-title{
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-table-meta{
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

.dl-table-tools{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

/* Sticky tools (opt-in) */
.dl-table-wrap[data-sticky-tools="1"] .dl-table-head{
  position: sticky;
  top: 0;
  z-index: var(--dl-z-tools);
  backdrop-filter: blur(10px);
}

/* =========================
   Search
   ========================= */
.dl-table-search{
  position: relative;
  min-width: 220px;
  flex: 1;
  max-width: 360px;
}
.dl-table-search input{
  padding-left: 38px;
  border-radius: 10px;
  border-color: rgba(11,18,32,.10);
  font-size: .875rem;
}
.dl-table-search input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(48,77,161,.12);
}
.dl-table-search svg{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .45;
  pointer-events: none;
}

/* =========================
   Filters & mini pills
   ========================= */
.dl-mini{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

/* Optional small meta helpers */
.dl-table-count{
  font-weight: 950;
  letter-spacing: -.01em;
}

/* =========================
   Bulk bar
   ========================= */
.dl-bulkbar{
  display: none;
  border-bottom: 1px solid rgba(48,77,161,.14);
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(48,77,161,.07) 0%, rgba(48,77,161,.03) 100%);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dl-bulkbar .left,
.dl-bulkbar .right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.dl-bulkbar .count{
  font-weight: 950;
  letter-spacing: -.01em;
}

/* =========================
   Table base
   ========================= */
.dl-table{
  width: 100%;
  margin: 0;
  --bs-table-bg: transparent;
}

/* Inline code in table cells - override Bootstrap's pinkish code color */
.dl-table code{
  font-size: .80em;
  font-weight: 600;
  color: var(--muted);
  background: rgba(11,18,32,.05);
  padding: .1em .42em;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dl-table thead th{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(11,18,32,.45);
  background: rgba(247,248,251,.98);
  border-bottom: 1px solid rgba(11,18,32,.07);
  white-space: nowrap;
  vertical-align: middle;
  padding: 10px 16px;
}

.dl-table tbody td{
  vertical-align: middle;
  border-top: 1px solid rgba(11,18,32,.055);
  padding: 13px 16px;
  color: var(--ink);
  font-size: .925rem;
}

/* Gutter: eerste en laatste kolom hebben meer lucht links/rechts */
.dl-table thead th:first-child,
.dl-table tbody td:first-child{
  padding-left: 20px;
}
.dl-table thead th:last-child,
.dl-table tbody td:last-child{
  padding-right: 20px;
}

.dl-table tbody tr{
  transition: background .15s ease, outline-color .15s ease;
}

.dl-table tbody tr:hover{
  background: var(--dl-row-hover);
}

.dl-table tbody tr[data-hover="strong"]:hover{
  background: var(--dl-row-hover-strong);
}

.dl-table tbody tr.is-selected{
  background: var(--dl-row-selected);
  outline: 1px solid var(--dl-row-selected-border);
  outline-offset: -1px;
}

.dl-table tbody tr.is-muted{
  opacity: .75;
}

.dl-table .text-num{
  font-variant-numeric: tabular-nums;
}

/* Better focus states (avoid clipping by overflow:hidden via box-shadow, keep outline minimal) */
.dl-table :is(a,button,input,select,textarea):focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px var(--dl-row-focus);
  border-radius: 10px;
}

/* Striped option (opt-in on wrap) */
.dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even){
  background: rgba(11,18,32,.035);
}
/* Fallback first, then modern color-mix when supported */
.dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even):hover{
  background: rgba(48,77,161,.06);
}
@supports (background: color-mix(in srgb, #000 40%, #fff)){
  .dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even):hover{
    background: color-mix(in srgb, rgba(11,18,32,.02) 40%, var(--dl-row-hover));
  }
}

/* =========================
   Density modes
   ========================= */
.dl-table-wrap[data-density="compact"] .dl-table thead th{
  padding-top: 5px;
  padding-bottom: 5px;
}
.dl-table-wrap[data-density="compact"] .dl-table tbody td{
  padding-top: 5px;
  padding-bottom: 5px;
}

.dl-table-wrap[data-density="comfortable"] .dl-table thead th{
  padding-top: 18px;
  padding-bottom: 18px;
}
.dl-table-wrap[data-density="comfortable"] .dl-table tbody td{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* =========================
   Sticky header option
   ========================= */
.dl-table-wrap[data-sticky="1"] .dl-table thead th{
  position: sticky;
  top: 0;
  z-index: var(--dl-z-sticky);
}

/* If sticky tools is enabled, stick header below tools */
.dl-table-wrap[data-sticky="1"][data-sticky-tools="1"] .dl-table thead th{
  top: var(--dl-sticky-tools-h);
}

/* =========================
   Sort indicator (th)
   ========================= */
.dl-sort{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  user-select:none;
}

.dl-sort .ico{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
  opacity: .45;
  transition: transform .14s ease, opacity .14s ease;
}

th[data-sort="asc"] .dl-sort .ico{ opacity: .90; transform: rotate(180deg); }
th[data-sort="desc"] .dl-sort .ico{ opacity: .90; transform: rotate(0deg); }

.dl-table thead th:hover .dl-sort .ico{
  opacity: .75;
}

/* =========================
   Row actions
   ========================= */
.dl-row-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* =========================
   Cell layouts (title/sub, clamp)
   ========================= */
.dl-cell{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0; /* for clamp */
}

.dl-cell-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.dl-cell-sub{
  color: var(--muted);
  font-size: .90rem;
  line-height: 1.45;
  margin-top: 2px;
}

.dl-clamp-1,
.dl-clamp-2{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.dl-clamp-1{ -webkit-line-clamp: 1; }
.dl-clamp-2{ -webkit-line-clamp: 2; }

/* Utilities */
.dl-nowrap{ white-space: nowrap !important; }
.dl-wrap{ white-space: normal !important; }
.dl-muted{ color: var(--muted) !important; }
.dl-kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .82em;
  font-weight: 600;
  padding: .2em .5em;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(11,18,32,.10);
  white-space: nowrap;
}

/* =========================
   Images / thumbs
   ========================= */
.dl-thumb-sm{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}

.dl-thumb-sm img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Helps PhotoSwipe / rowclick coexist */
[data-dl-no-rowclick]{
  cursor: zoom-in;
}

.dl-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(48,77,161,.10);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.82);
  flex: 0 0 auto;
}

/* =========================
   Status / badges inside table
   (uses your dl-pill; adds "dl-badge-soft" variant)
   ========================= */
.dl-badge-soft{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.84);
}

.dl-badge-soft:hover{
  border-color: var(--border2);
  background: #fff;
}

/* Color helpers (soft) - text-color override nodig omdat badges.css color:#fff zet */
.dl-badge-success{ background: rgba(32,201,151,.12); border-color: rgba(32,201,151,.28); color: rgba(14,140,100,.92); }
.dl-badge-warning{ background: rgba(255,193,7,.13); border-color: rgba(255,193,7,.30); color: rgba(148,106,0,.92); }
.dl-badge-danger{  background: rgba(255,77,77,.10); border-color: rgba(255,77,77,.26); color: rgba(200,40,40,.90); }
.dl-badge-info{    background: rgba(13,110,253,.10); border-color: rgba(13,110,253,.24); color: rgba(13,90,220,.90); }
.dl-badge-neutral{ background: rgba(11,18,32,.06); border-color: rgba(11,18,32,.12); color: var(--muted); }
.dl-badge-accent{  background: rgba(48,77,161,.10); border-color: rgba(48,77,161,.22); color: var(--accent); }

/* =========================
   Dropdown (Bootstrap) refinement
   ========================= */
.dl-dd-menu{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 8px;
}

.dl-dd-menu .dropdown-item{
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 10px 10px;
}

.dl-dd-menu .dropdown-item:hover{
  background: rgba(48,77,161,.08);
}

/* =========================
   Row expandable details
   ========================= */
.dl-row-details{
  display:none;
  background: rgba(255,255,255,.92);
}
tr.is-expanded + tr.dl-row-details{
  display: table-row;
}

.dl-details-cell{
  padding: 14px 14px !important;
  border-top: 0 !important;
}

.dl-details-box{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.dl-details-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.dl-details-col-4{ grid-column: span 4; }
.dl-details-col-6{ grid-column: span 6; }
.dl-details-col-12{ grid-column: span 12; }
@media (max-width: 991px){
  .dl-details-col-4,.dl-details-col-6{ grid-column: span 12; }
}

/* =========================
   Empty + error states
   ========================= */
.dl-table-empty,
.dl-table-error{
  display:none;
  padding: 18px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

.dl-empty-box,
.dl-error-box{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 16px;
}

.dl-empty-title,
.dl-error-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}

.dl-empty-text,
.dl-error-text{
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.65;
}

/* EmptyState component (.dl-empty) */
.dl-empty .dl-empty-title{
  font-weight: 700;
  font-size: .925rem;
  margin: 0 0 4px;
  color: var(--ink);
}

.dl-empty .dl-empty-sub{
  font-size: .84rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.dl-empty .dl-empty-action{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================
   Skeleton loader (table)
   ========================= */
.dl-skeleton{
  background: linear-gradient(90deg, rgba(11,18,32,.06), rgba(11,18,32,.03), rgba(11,18,32,.06));
  background-size: 240% 100%;
  animation: dlSkel 1.1s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes dlSkel{
  0%{ background-position: 0% 0; }
  100%{ background-position: 100% 0; }
}

.dl-table-skeleton{
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:none;
}

.dl-skel-row{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 10px 0;
  border-top: 1px solid rgba(11,18,32,.06);
}
.dl-skel-row:first-child{ border-top: 0; }

.dl-skel-box{ height: 14px; }
.dl-skel-w-20{ width: 20%; }
.dl-skel-w-35{ width: 35%; }
.dl-skel-w-50{ width: 50%; }
.dl-skel-w-70{ width: 70%; }

/* =========================
   Column visibility menu (optional)
   ========================= */
.dl-colmenu{
  min-width: 260px;
}
.dl-colmenu .form-check{
  padding: 8px 10px;
  border-radius: 12px;
}
.dl-colmenu .form-check:hover{
  background: rgba(48,77,161,.06);
}

/* =========================
   Responsive column priority (opt-in)
   - Use wrapper: .dl-table-wrap[data-responsive="auto"]
   - Mark th/td with data-dl-priority="1|2|3"
   - Lower number => more important (stays visible longer)
   ========================= */
.dl-table-wrap[data-responsive="auto"] [data-dl-priority]{
  /* no-op by default; rules below apply on breakpoints */
}

@media (max-width: 1199.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="3"]{ display:none !important; }
}
@media (max-width: 991.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="2"]{ display:none !important; }
}
@media (max-width: 767.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="1"]{ display:none !important; }
}

/* =========================
   Mobile cards mode
   - Default: elke .dl-table-wrap wordt op mobiel een stacked cards-layout
     met label/waarde-paren per cel. data-label op td komt uit de
     bijbehorende <th>-tekst (auto-ingevuld door table.js).
   - Opt-out per wrap via data-mobile="scroll" -> horizontaal scrollen
     (voor tabellen met te veel kolommen waar kaart-layout onhandig is).
   - Opt-in per wrap via data-mobile="cards" werkt identiek aan default
     (backwards-compatible met bestaande pagina's).
   ========================= */
@media (max-width: 767.98px){
  /* Default cards-layout */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table{
    display:block;
    width:100%;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table thead{
    display:none;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody,
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tr,
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table td{
    display:block;
    width:100%;
  }

  /* Elke rij wordt een zelfstandige kaart */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody tr{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r, 14px);
    padding: 12px 14px;
    margin: 0 0 12px;
    box-shadow: 0 2px 8px rgba(11,18,32,.04);
    transition: box-shadow .15s, transform .15s;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody tr:hover{
    box-shadow: 0 6px 18px rgba(11,18,32,.08);
    background: #fff;
    transform: translateY(-1px);
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody tr[data-row-href]{
    cursor: pointer;
  }

  /* Cel-layout: label links (vaste breedte), waarde rechts */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td{
    border: 0;
    border-bottom: 1px solid rgba(11,18,32,.06);
    padding: 8px 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: start;
    text-align: left !important;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td:first-child{
    padding-top: 0;
  }

  /* Label als uppercase-pilletje links, compact en rustig */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td[data-label]::before{
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Cellen met leeg data-label (bv checkbox) nemen volle breedte zonder label-kolom */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td[data-label=""]{
    grid-template-columns: 1fr;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td[data-label=""]::before{
    display: none;
  }

  /* Cellen zonder data-label vallen terug op 1-koloms layout (geen label) */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td:not([data-label]){
    grid-template-columns: 1fr;
  }

  /* Actie-cellen: knoppen mogen wrappen zonder text-align strijd */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td .dl-btn-group{
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Text-end op desktop blijft left-aligned in cards mode (label geeft al context) */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td.text-end{
    justify-items: start;
  }

  /* Horizontal-scroll opt-out: keep table intact, allow x-scroll */
  .dl-table-wrap[data-mobile="scroll"]{
    overflow-x: auto;
  }
}

/* =========================
   Row clickable
   ========================= */
.dl-table tbody tr[data-row-href]{
  cursor: pointer;
}

/* If row click is disabled on row or wrap, revert cursor */
.dl-table-wrap[data-dl-rowclick="0"] .dl-table tbody tr[data-row-href]{
  cursor: default;
}
.dl-table tbody tr[data-row-href][data-dl-rowclick="0"]{
  cursor: default;
}

/* =========================================================
   ✅ Copy-to-clipboard UX (data-dl-copy)
   - Non-breaking: only affects elements with [data-dl-copy]
   - Tooltip: uses CSS only (no extra JS)
   - Copy feedback: table.js toggles .is-copied briefly
   ========================================================= */

/* Make copy targets feel intentional */
[data-dl-copy]{
  position: relative;
  cursor: copy;
  user-select: text; /* allow selection too */
  border-radius: 10px;
  padding: 2px 6px;
  margin: -2px -6px; /* keeps layout same but increases hit area */
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

[data-dl-copy]:hover{
  background: rgba(48,77,161,.06);
  box-shadow: 0 0 0 1px rgba(48,77,161,.12) inset;
}

/* Tooltip (default text = "Kopiëren") */
[data-dl-copy]::after{
  content: attr(data-dl-copy-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--dl-copy-tip-bg);
  color: var(--dl-copy-tip-ink);
  padding: var(--dl-copy-tip-pad);
  border-radius: var(--dl-copy-tip-radius);
  font-size: var(--dl-copy-tip-font);
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: var(--dl-copy-tip-shadow);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .14s ease, transform .14s ease;
}

/* If user didn't set a tooltip attribute, show default */
[data-dl-copy]:not([data-dl-copy-tip])::after{
  content: "Kopiëren";
}

/* Small arrow */
[data-dl-copy]::before{
  content:"";
  position:absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  width: 10px;
  height: 10px;
  background: var(--dl-copy-tip-bg);
  rotate: 45deg;
  opacity: 0;
  pointer-events:none;
  z-index: 19;
  transition: opacity .14s ease, transform .14s ease;
}

[data-dl-copy]:hover::after,
[data-dl-copy]:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Copied state (table.js toggles .is-copied) */
[data-dl-copy].is-copied{
  background: rgba(32,201,151,.10);
  box-shadow: 0 0 0 1px rgba(32,201,151,.22) inset;
}

[data-dl-copy].is-copied::after{
  content:"Gekopieerd";
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-dl-copy].is-copied::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: avoid tooltips blocking */
@media (max-width: 575.98px){
  [data-dl-copy]::after,
  [data-dl-copy]::before{
    display:none;
  }
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  .dl-table tbody tr,
  .dl-sort .ico,
  [data-dl-copy],
  [data-dl-copy]::after,
  [data-dl-copy]::before{
    transition: none !important;
  }
  .dl-skeleton{
    animation: none !important;
  }
}

/* =========================
   Mobile stacked layout (opt-in via data-dl-stack)
   Add data-dl-stack to .dl-table-wrap to activate
   ========================= */
@media (max-width: 767px){
  /* Container no longer needs horizontal scroll */
  [data-dl-stack] .table-responsive{
    overflow: visible;
  }

  /* Remove forced min-width */
  [data-dl-stack] .dl-table{
    min-width: 0 !important;
    width: 100%;
  }

  /* Hide column headers */
  [data-dl-stack] .dl-table thead{
    display: none;
  }

  /* Each row is a card block */
  [data-dl-stack] .dl-table tbody tr{
    display: block;
    padding: 6px 0 !important;
    margin-bottom: 6px;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden;
  }
  [data-dl-stack] .dl-table tbody tr:last-child{
    margin-bottom: 0;
  }
  [data-dl-stack] .dl-table tbody tr.is-selected{
    background: var(--dl-row-selected) !important;
    border-color: var(--dl-row-selected-border) !important;
  }

  /* Each cell = label/value flex row */
  [data-dl-stack] .dl-table tbody td{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 16px !important;
    border: none !important;
    font-size: .88rem;
    gap: 12px;
    text-align: left !important;
    min-height: 0 !important;
  }

  /* Label from data-label */
  [data-dl-stack] .dl-table tbody td[data-label]:not([data-label=""])::before{
    content: attr(data-label);
    flex-shrink: 0;
    width: 84px;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: var(--muted);
    opacity: .6;
    line-height: 1.3;
  }

  /* Empty label = action row, no before, right-aligned */
  [data-dl-stack] .dl-table tbody td[data-label=""]{
    justify-content: flex-end !important;
    padding-top: 8px !important;
    gap: 6px;
  }
  [data-dl-stack] .dl-table tbody td[data-label=""]::before{
    display: none;
  }

  /* Hide checkbox cells on mobile */
  [data-dl-stack] .dl-table tbody td.dl-col-check{
    display: none !important;
  }

  /* Row actions always visible */
  [data-dl-stack] .dl-table .dl-row-actions{
    opacity: 1 !important;
  }

  /* Long text (email, etc) can wrap/break */
  [data-dl-stack] .dl-table tbody td a,
  [data-dl-stack] .dl-table tbody td code{
    word-break: break-all;
    font-size: .8rem;
  }
}
}

/* =========================
   Bootstrap-table responsive fallback
   When a Bootstrap .table lives inside a .card-body or .dl-card-body
   without an explicit overflow wrapper, make the container scroll
   so the table doesn't overflow the viewport on small screens.
   Uses CSS :has() - supported in all modern browsers (Chrome 105+,
   Firefox 121+, Safari 15.4+).
   ========================= */
@supports selector(:has(> *)) {
  @media (max-width: 991.98px) {
    .card-body:has(> .table),
    .card-body:has(> .table-responsive),
    .dl-card-body:has(> .table) {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* Utility class for manual table scroll wrappers */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- /assets/css/theme-arctic.css ---- */
/* =========================================================
   theme-arctic.css - Arctic Minimal skin
   - Net iets meer “DutchLine”: crisp whites + clean borders
   ========================================================= */

:root{
  --bg:#ffffff;
  --surface:#f7f8fb;
  --panel:#ffffff;

  --ink:#0b1220;
  --ink2:#121a2b;

  --text:var(--ink);
  --muted:rgba(11,18,32,.70);
  --muted2:rgba(11,18,32,.56);
  --border:rgba(11,18,32,.10);
  --border2:rgba(11,18,32,.14);

  /* slightly crisper accent */
  --accent: var(--dl-blue-700);
  --focus: rgba(48,77,161,.24);
}


/* ---- /assets/css/theme-core.css ---- */
/* =========================================================
   theme-core.css - DutchLine MAX (Core)
   - Bootstrap-friendly
   - Premium, rustig
   - Meer “DutchLine”: ink/white contrast + blauwe sweep + strakke lijnen
   ========================================================= */

:root{
  /* Brand (DutchLine blue family) */
  --dl-blue-900:#1E3375;
  --dl-blue-800:#243C86;
  --dl-blue-700:#304DA1;  /* primary */
  --dl-blue-600:#415FAC;
  --dl-blue-500:#5B78C0;
  --dl-blue-300:#80A0D0;

  /* Neutrals */
  --ink:#0b1220;
  --ink2:#121a2b;
  --bg:#ffffff;
  --surface:#f7f8fb;
  --panel:#ffffff;

  --text:var(--ink);
  --muted:rgba(11,18,32,.70);
  /* .56 gaf 4,29:1 op wit en 4,22:1 op --surface: onder de 4,5:1 die lopende
     tekst nodig heeft. .60 haalt 4,91 / 4,82 / 4,71 (wit / surface / surface-2). */
  --muted2:rgba(11,18,32,.60);
  --border:rgba(11,18,32,.10);
  --border2:rgba(11,18,32,.14);

  /* Shapes & depth (premium, not glass) */
  --r:14px;
  --r2:18px;
  --shadow:0 20px 60px rgba(11,18,32,.12);
  --shadow2:0 12px 30px rgba(11,18,32,.10);

  /* Accent usage */
  --accent:var(--dl-blue-700);
  --accent-ink:rgba(48,77,161,.85);
  --accent-soft:rgba(48,77,161,.10);
  --accent-soft2:rgba(48,77,161,.14);
  --focus:rgba(48,77,161,.26);

  /* Layout rhythm */
  --container-max: 1440px;
  --section-pad: 72px;
  --section-pad-sm: 42px;
  --card-pad: 18px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* System statuses (used in pills/badges) */
  --ok: rgba(32,201,151,1);
  --warn: rgba(255,193,7,1);
  --danger: rgba(255,77,77,1);
  --info: rgba(13,110,253,1);
}

html, body{ height:100%; }
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }

/* Container */
.container-max{ max-width: var(--container-max); }

/* =========================================================
   DutchLine subtle “sheen” + dividers (brand vibe)
   ========================================================= */
.dl-sheen{
  background:
    radial-gradient(900px 260px at 10% 10%, rgba(48,77,161,.10), transparent 62%),
    radial-gradient(700px 240px at 85% 0%, rgba(128,160,208,.10), transparent 62%);
}

.dl-divider{ border-top: 1px solid var(--border); }
.hr-soft{ border-color: var(--border); opacity: 1; }
.dl-hr-accent{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.35), rgba(11,18,32,.10), transparent);
  opacity: 1;
}

/* =========================================================
   Header (Premium minimal, DutchLine-like)
   ========================================================= */
.dl-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.25) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* tiny brand line (very DutchLine) */
.dl-header::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.80), rgba(128,160,208,.40), transparent);
  opacity: .80;
}

.dl-header .navbar{
  padding-top: 14px;
  padding-bottom: 14px;
}
 

.dl-nav{
  gap: 18px;
  font-weight: 650;
  letter-spacing: .01em;
}
.dl-nav .nav-link{
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(11,18,32,.82);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.dl-nav .nav-link:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}
.dl-nav .nav-link.active{
  background: rgba(48,77,161,.10);
  color: var(--ink);
  position: relative;
}
.dl-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,77,161,.70), rgba(128,160,208,.22));
}

.dl-header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.dl-iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dl-iconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
}
 

/* =========================================================
   Sections + typography
   ========================================================= */
.section{ padding: var(--section-pad) 0; }
.section-sm{ padding: var(--section-pad-sm) 0; }

.dl-eyebrow{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--accent) 100%, var(--ink));
}

/* Alias used in demos */
.dl-kicker{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--accent) 100%, var(--text));
}

.dl-section-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}
.dl-section-sub{
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.7;
}

.dl-h1{
  font-weight: 950;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 4vw, 3.45rem);
}
.dl-lead{
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* =========================================================
   Hero (DutchLine-ish: ink + blue sweep, subtle)
   ========================================================= */
/* =========================================================
   HERO - background image override (plaats onderaan main.css)
   ========================================================= */
.dl-hero{
  /* image als basis */
  background: url("/assets/img/hero-background.webp") center/cover no-repeat;
}

/* dot-pattern blijft (theme-core heeft ::before al) */
.dl-hero::before{
  /* laat theme-core settings staan; alleen iets beter zichtbaar */
  opacity: .32;
}

/* theme-core glow blijft (theme-core heeft ::after al),
   maar we maken ’m iets subtieler zodat image zichtbaar blijft */
.dl-hero::after{
  opacity: .75;
}

/* EXTRA overlay voor contrast/leesbaarheid boven de foto,
   maar onder je content */
.dl-hero{
  position: relative;
}
.dl-hero .container{
  position: relative;
  z-index: 3; /* boven overlays */
}

/* nieuwe overlay laag */
.dl-hero .dl-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,13,24,.55) 0%, rgba(7,13,24,.3) 55%, rgba(7,13,24,.20) 100%),
    linear-gradient(180deg, rgba(7,13,24,.25) 0%, rgba(7,13,24,.05) 55%, rgba(7,13,24,0) 100%);
}


.dl-hero-card{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  padding: 18px;
}
 

/* =========================================================
   Cards / Catalog (more DutchLine: topline + crisp border)
   ========================================================= */
.dl-card{
  
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--panel);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.dl-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: var(--border2);
}
.dl-card-topline{
  height: 5px;
  background: linear-gradient(90deg, rgba(48,77,161,.8), rgba(128,160,208,.9), transparent);
}
.dl-card-topline::after{
  content:"";
  display:block;
  height: 2px;
  width: 70%;
  margin-left: 6%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,77,161,.18), transparent);
  opacity: .85;
}
.dl-card-body{ padding: var(--card-pad); }

.dl-thumb{
  width: 100%;
  aspect-ratio: 4 / 4;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 25% 25%, rgba(48,77,161,.08), transparent 62%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
 

.dl-badge{
  position:absolute;
  top: 12px;
  left: 12px;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
}

.dl-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.15;
  font-size: 1.05rem;
  margin: 0 0 8px 0;
}
.dl-meta{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   Locked / Guest-only style (cleaner, more “system”)
   ========================================================= */
.dl-locked{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background:
    linear-gradient(180deg, rgba(48,77,161,.06), transparent 55%),
    rgba(255,255,255,.78);
  padding: 14px;
}
.dl-locked strong{ font-weight: 950; }
.dl-locked small{ color: var(--muted); }

/* =========================================================
   Filters / chips
   ========================================================= */
.dl-filter{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 16px;
}
.dl-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  margin: 6px 6px 0 0;
  font-weight: 750;
  color: rgba(11,18,32,.84);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dl-chip:hover{
  border-color: var(--border2);
  background: #fff;
  transform: translateY(-1px);
}
.dl-chip.active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* =========================================================
   Footer
   ========================================================= */
.dl-footer{
  border-top: 1px solid var(--border);
  padding: 46px 0;
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(48,77,161,.06), transparent 62%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent));
}
.dl-footer a{ color: var(--muted); }
.dl-footer a:hover{ color: var(--ink); }
/* Aanraakvlak: elke link in de voetregel was 17-24px hoog: de kolomlijsten,
   de juridische rij onderaan en de mailto/tel-links in het contactblok. De
   tekstgrootte verandert niet, alleen het klikvlak. */
.dl-footer .d-grid > a,
.dl-footer .dl-footer-links a,
.dl-footer .d-flex.flex-wrap > div > a,
.dl-footer a[href^="mailto:"],
.dl-footer a[href^="tel:"]{
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
@media (max-width: 768px){
  .dl-footer .d-grid > a,
  .dl-footer .dl-footer-links a,
  .dl-footer .d-flex.flex-wrap > div > a,
  .dl-footer a[href^="mailto:"],
  .dl-footer a[href^="tel:"]{
    min-height: 44px;
  }
  /* Korte woorden ("Privacy", "Cookies") gaven een klikvlak van 43px breed. */
  .dl-footer .d-flex.flex-wrap > div > a{
    min-width: 44px;
    justify-content: center;
  }
}
 

/* =========================================================
   Bootstrap components -> DutchLine tone
   ========================================================= */

/* Dropdown */
.dropdown-menu{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 8px;
  /* Boven sticky header (1020), footer en andere chrome.
     Lager dan modal (1055), tooltip (1080), toast (1090). */
  z-index: 1050;
}
.dropdown-item{
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 700;
  color: rgba(11,18,32,.86);
}
.dropdown-item:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}

/* Nav tabs */
.nav-tabs{
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link{
  border: 0;
  border-radius: 14px 14px 0 0;
  font-weight: 900;
  color: rgba(11,18,32,.72);
  padding: 10px 12px;
}
.nav-tabs .nav-link:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}
.nav-tabs .nav-link.active{
  color: var(--ink);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-bottom-color: transparent;
}

/* Nav pills (admin filters etc) */
.nav-pills .nav-link{
  border-radius: 14px;
  border: 1px solid var(--border);
  font-weight: 900;
  color: rgba(11,18,32,.78);
  background: rgba(255,255,255,.86);
}
.nav-pills .nav-link:hover{
  border-color: var(--border2);
  background: #fff;
}
.nav-pills .nav-link.active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
  color: var(--ink);
}

/* Accordion */
.accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow:hidden;
  background: rgba(255,255,255,.90);
}
.accordion-button{
  font-weight: 950;
  color: rgba(11,18,32,.86);
  background: rgba(255,255,255,.90);
}
.accordion-button:not(.collapsed){
  background: rgba(48,77,161,.08);
  color: var(--ink);
  box-shadow: none;
}
.accordion-button:focus{
  box-shadow: 0 0 0 6px var(--focus);
}
.accordion-body{ color: var(--muted); }

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  border-bottom: 1px solid var(--border);
  color: rgba(11,18,32,.72);
  font-weight: 950;
  letter-spacing: -.01em;
}
.table tbody td{
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.table-hover tbody tr:hover{
  background: rgba(48,77,161,.06);
}
 

/* Toast */
.toast{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.toast-header{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

/* Modal */
.modal-content{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.modal-header, .modal-footer{
  border-color: var(--border);
}

/* Offcanvas */
.offcanvas{
  border-color: var(--border);
}
.offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas-body{
  background: rgba(255,255,255,.92);
}

/* Breadcrumbs */
.breadcrumb{
  margin-bottom: 0;
}
.breadcrumb-item a{
  color: rgba(11,18,32,.78);
}
.breadcrumb-item a:hover{
  color: var(--accent);
}
.breadcrumb-item.active{
  color: rgba(11,18,32,.56);
}

/* List groups */
.list-group{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow:hidden;
}
.list-group-item{
  border-color: var(--border);
  padding: 12px 14px;
  background: rgba(255,255,255,.88);
}
.list-group-item:hover{
  background: rgba(48,77,161,.06);
}

/* =========================================================
   DutchLine section accents (drop-in classes)
   ========================================================= */
.dl-sec{
  position: relative;
  overflow: hidden;
}
.dl-sec::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(128,160,208,.18), transparent);
  opacity: .55;
  pointer-events:none;
}
.dl-sec > .container{
  position: relative;
  z-index: 1;
}

.dl-sec-accent::after{
  content:"";
  position:absolute;
  right: -140px;
  top: -160px;
  width: 520px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(48,77,161,.09), transparent 70%);
  opacity: .25;
  pointer-events:none;
  z-index: 0;
}

.dl-sec-grid::after{
  content:"";
  position:absolute;
  right: -70px;
  top: 34px;
  width: 360px;
  height: 280px;
  background-image: radial-gradient(rgba(7, 13, 24, .09) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 24px;
  filter: blur(.2px);
  opacity: .48;
  pointer-events:none;
  z-index: 0;
}

.dl-sec-sheen{
  background:
    radial-gradient(1600px 520px at 12% -10%, rgba(48,77,161,.05), transparent 64%),
    radial-gradient(1400px 520px at 92% -20%, rgba(128,160,208,.06), transparent 66%),
    linear-gradient(180deg, rgba(11,18,32,.015), transparent 44%),
    var(--bg);
}

/* =========================
   DL Panel (standard, everywhere)
   ========================= */

.dl-panel{
  position: relative;
  border-radius: calc(var(--r2) + 4px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 55%,
      rgba(255,255,255,.84) 100%
    );
  box-shadow: var(--shadow2);
  

  /* spacing */
  padding: 14px;

  /* subtle glass (safe default) */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* top “shine” */
.dl-panel::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

/* hover */
.dl-panel:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 62%, rgba(0,0,0,.06));
  box-shadow: var(--shadow2), 0 10px 26px rgba(0,0,0,.08);
}

/* focus (als er inputs/buttons in zitten) */
.dl-panel:focus-within{
  border-color: color-mix(in srgb, var(--primary, #2f6fed) 55%, var(--border));
  box-shadow: var(--shadow2), 0 0 0 4px color-mix(in srgb, var(--primary, #2f6fed) 18%, transparent);
}

/* nette divider */
.dl-panel hr{
  margin: 12px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--border) 85%, transparent),
    transparent
  );
}

/* inputs/selects binnen panel: consistent radius */
.dl-panel .form-control,
.dl-panel .form-select{
  border-radius: calc(var(--r2) + 2px);
}

/* small header row (zoals label + badge) ziet er vanzelf “paneel-headerig” uit */
.dl-panel > .d-flex.align-items-center.justify-content-between{
  padding: 10px 12px;
  margin: -6px -6px 10px -6px;
  border-radius: calc(var(--r2) + 2px);
  background: rgba(255,255,255,.35);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

/* optioneel: scrollbare contentblokken (werkt perfect voor lijsten) */
.dl-panel .dl-panel-scroll{
  max-height: 420px;
  overflow: auto;
  padding: 6px;
  border-radius: calc(var(--r2) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: rgba(255,255,255,.40);
}

/* scrollbar polish (algemeen, alleen waar scrollbars verschijnen) */
.dl-panel *::-webkit-scrollbar{ width: 10px; height: 10px; }
.dl-panel *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.55);
}

/* =========================================================
   Skeletons / loading placeholders (global utility)
   ========================================================= */
.dl-skel{
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(11,18,32,.04), rgba(11,18,32,.08), rgba(11,18,32,.04));
  background-size: 240% 100%;
  animation: dlSkel 1.2s infinite ease-in-out;
}
@keyframes dlSkel{
  0%{ background-position: 0% 0; opacity: .85; }
  50%{ background-position: 100% 0; opacity: 1; }
  100%{ background-position: 0% 0; opacity: .85; }
}

/* Utilities */
.text-muted-2{ color: var(--muted2) !important; }
.fw-black{ font-weight: 950 !important; }
body.dl-body{
  min-height: 100vh;
}

body.dl-body > .dl-header-v4{ flex: 0 0 auto; }
body.dl-body > .dl-main{ flex: 1 1 auto; min-height: 0; }
body.dl-body > footer{ flex: 0 0 auto; }

/* ---- /assets/css/enka/fonts.css ---- */
/* =========================================================
   enka/fonts.css - lokale webfonts voor ENKA
   Gegenereerd uit Google Fonts (Barlow Condensed + Lato).
   Subsets: latin + latin-ext. font-display: swap zodat tekst
   direct zichtbaar is (geen FOIT) - CLS blijft laag doordat de
   fallback-stack qua metriek dicht bij het webfont ligt.
   Bestanden: /assets/fonts/enka/*.woff2
   ========================================================= */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ---- /assets/css/enka/core.css ---- */
/* =========================================================
   enka/core.css - master stylesheet voor ENKA (APP_LINE=enka)
   Locatie: /assets/css/enka/core.css
   Laadt alleen wanneer APP_LINE=enka via inc/header.php
   ---------------------------------------------------------
   Volgorde: tokens > base > componenten.
   Alle selectors zijn gescoped onder .ek-page of .enka-* of
   .ek-co-* zodat dit nooit DutchLine kan beinvloeden.
   ---------------------------------------------------------
   cache-bust: 2026-07-21 (mobiele winkelwagen-FAB in footer.css)
   ========================================================= */

/* 1) Design tokens */

/* ---- @import /assets/css/enka/tokens.css ---- */
/* =========================================================
   tokens.css - ENKA design tokens (single source of truth)
   ---------------------------------------------------------
   Scope: body.is-enka (door inc/header.php gezet op alle
   Enka-pagina's) + .ek-page als fallback. Bewust GEEN :root:
   dit bestand laadt weliswaar alleen bij APP_LINE=enka, maar
   de scope garandeert dat DutchLine nooit geraakt wordt.

   Opbouw:
     1. Semantische kleurrollen (base / hover / subtle)
     2. Inverse tokens voor donkere secties
     3. Spacing (4px-schaal)
     4. Typografie (schaal ~1.2, rem, clamp voor h1-h3)
     5. Radius / Elevation / Motion
     6. Legacy aliases (oude --ek-* namen blijven werken)
     7. Bootstrap 5.3 variabele-mapping

   Contrast (WCAG AA, berekend):
     text          #0a0a0a op #ffffff = 19.80:1
     text          #0a0a0a op #f6f6f6 = 18.32:1
     text-muted    #6a6a6a op #ffffff =  5.41:1
     text-muted    #6a6a6a op #f6f6f6 =  5.00:1
     text-muted-2  #767676 op #ffffff =  4.54:1 (was #9a9a9a = 2.81 FAIL)
     on-primary    #ffffff op #1a1a1a = 17.40:1 | op hover #0a0a0a = 19.80:1
     danger        #c83232 op #ffffff =  5.31:1 | op subtle #faecec = 4.62:1
     success       #1a7f4b op #ffffff =  5.02:1 | op subtle #edf7f1 = 4.59:1
     warning       #8a5b00 op #ffffff =  5.87:1 | op subtle #f9f1e0 = 5.22:1
     info          #22618e op #ffffff =  6.63:1 | op subtle #e8f0f7 = 5.76:1
     on-dark-muted   rgba(255,255,255,.65) op #0a0a0a = 8.42:1
     on-dark-muted-2 rgba(255,255,255,.55) op #0a0a0a = 6.28:1 (was .40 = 3.77 FAIL)
   ========================================================= */

body.is-enka,
.ek-page {
  /* ── 1. Kleuren: semantische rollen ───────────────────── */
  /* Surface */
  --ek-surface:            #ffffff;
  --ek-surface-hover:      #f6f6f6;
  --ek-surface-raised:     #ffffff;   /* gebruik met --ek-shadow-* */
  --ek-surface-sunken:     #ececec;   /* vervangt #ececec/#e8e8e8/#ddd drift */
  --ek-surface-dark:       #0a0a0a;   /* donkere secties: topbar, hero, footer, cta */

  /* Border */
  --ek-border-subtle:      rgba(10,10,10,.06);
  --ek-border:             rgba(10,10,10,.10);  /* vervangt .08/.12 drift */
  --ek-border-strong:      rgba(10,10,10,.16);  /* vervangt .14/.18 drift */

  /* Text */
  --ek-text:               #0a0a0a;   /* vervangt #000/#000000/#111 drift */
  --ek-text-hover:         #000000;
  --ek-text-muted:         #6a6a6a;
  --ek-text-muted-2:       #767676;   /* AA-fix: was #9a9a9a (2.81:1) */

  /* Primary (ENKA = monochroom zwart; base #1a1a1a, hover donkerder) */
  --ek-primary:            #1a1a1a;
  --ek-primary-hover:      #0a0a0a;
  --ek-primary-subtle:     rgba(10,10,10,.06);
  --ek-on-primary:         #ffffff;

  /* Status */
  --ek-success:            #1a7f4b;
  --ek-success-hover:      #14663c;
  --ek-success-subtle:     #edf7f1;
  --ek-on-success:         #ffffff;

  --ek-warning:            #8a5b00;
  --ek-warning-hover:      #6f4900;
  --ek-warning-subtle:     #f9f1e0;
  --ek-on-warning:         #ffffff;

  --ek-danger:             #c83232;
  --ek-danger-hover:       #a32626;
  --ek-danger-subtle:      #faecec;   /* vervangt #f0d0d0 */
  --ek-on-danger:          #ffffff;

  --ek-info:               #22618e;
  --ek-info-hover:         #1b4e73;
  --ek-info-subtle:        #e8f0f7;
  --ek-on-info:            #ffffff;

  /* Scrims (foto-overlays donkere secties) */
  --ek-scrim:              rgba(10,10,10,.55);
  --ek-scrim-strong:       rgba(10,10,10,.80);

  /* Externe merkkleuren (functioneel, geen skin) */
  --ek-whatsapp:           #25d366;
  --ek-ideal:              #cc0066;

  /* ── 2. Inverse: tokens voor donkere secties ──────────── */
  --ek-on-dark:            #ffffff;
  --ek-on-dark-muted:      rgba(255,255,255,.65);
  --ek-on-dark-muted-2:    rgba(255,255,255,.55); /* AA-fix: was .40 (3.77:1) */
  --ek-on-dark-line:       rgba(255,255,255,.10);

  /* ── 3. Spacing: 4px-schaal ───────────────────────────── */
  --ek-sp-1:  4px;
  --ek-sp-2:  8px;
  --ek-sp-3:  12px;
  --ek-sp-4:  16px;
  --ek-sp-5:  24px;
  --ek-sp-6:  32px;
  --ek-sp-7:  48px;
  --ek-sp-8:  64px;

  /* Sectie-ritme, op de 4px-schaal (was 88px/56px off-grid) */
  --ek-sec:     var(--ek-sp-8);
  --ek-sec-sm:  var(--ek-sp-7);

  /* ── 4. Typografie ────────────────────────────────────── */
  --ek-font:         'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ek-font-display: 'Barlow Condensed', 'Arial Black', Arial, sans-serif;

  /* Schaal, ratio 1.2 (basis 1rem = 16px) */
  --ek-fs-xs:    .694rem;   /* ~11.1px - vervangt 9-11px drift */
  --ek-fs-sm:    .833rem;   /* ~13.3px - vervangt 12-13.5px drift */
  --ek-fs-base:  1rem;      /* 16px */
  --ek-fs-lg:    1.2rem;    /* ~19.2px */
  --ek-fs-xl:    1.44rem;   /* ~23px */

  /* Koppen: fluid via clamp (alleen h1-h3) */
  --ek-fs-h1:  clamp(2.074rem, 1.5rem + 2.5vw, 2.986rem);
  --ek-fs-h2:  clamp(1.728rem, 1.35rem + 1.6vw, 2.488rem);
  --ek-fs-h3:  clamp(1.44rem, 1.2rem + 1vw, 2.074rem);

  --ek-lh-body:    1.5;
  --ek-lh-heading: 1.2;

  /* ── 5a. Radius: 3 stappen + pill ─────────────────────── */
  --ek-r-sm:   2px;
  --ek-r:      4px;
  --ek-r-lg:   8px;
  --ek-r-pill: 999px;

  /* ── 5b. Elevation: 3 niveaus ─────────────────────────── */
  --ek-shadow-sm:      0 1px 2px rgba(10,10,10,.04), 0 2px 6px rgba(10,10,10,.04);
  --ek-shadow-md:      0 4px 10px rgba(10,10,10,.06), 0 12px 28px rgba(10,10,10,.06);
  --ek-shadow-lg:      0 10px 24px rgba(10,10,10,.08), 0 24px 56px rgba(10,10,10,.08);
  /* Contextvarianten van sm/md voor donkere secties (geen extra niveau) */
  --ek-shadow-dark-sm: 0 2px 8px rgba(0,0,0,.20);
  --ek-shadow-dark-md: 0 14px 36px rgba(0,0,0,.30);

  /* ── 5c. Motion: 2 duraties + 1 easing ────────────────── */
  --ek-dur-fast:  120ms;
  --ek-dur:       200ms;
  --ek-ease:      cubic-bezier(.2,.8,.2,1);

  /* ── 6. Legacy aliases (niet gebruiken in nieuwe code) ── */
  --ek-ink:        var(--ek-text);
  --ek-ink-2:      var(--ek-primary);
  --ek-muted:      var(--ek-text-muted);
  --ek-muted-2:    var(--ek-text-muted-2);
  --ek-surface-2:  var(--ek-surface-hover);
  --ek-surface-3:  var(--ek-surface-sunken);
  --ek-line:       var(--ek-border);
  --ek-line-2:     var(--ek-border-strong);
  --ek-r-md:       var(--ek-r-lg);  /* was ongedefinieerd (fallback 12px in products.css) */
}

/* ── 7. Bootstrap 5.3 mapping ─────────────────────────────
   Alleen op body.is-enka zodat Bootstrap-componenten de
   ENKA-skin automatisch erven. .ek-page niet nodig: Bootstrap
   leest deze vars op :root/body-niveau. */
body.is-enka {
  --bs-body-bg:              var(--ek-surface);
  --bs-body-color:           var(--ek-text);
  --bs-emphasis-color:       var(--ek-text);
  --bs-secondary-color:      var(--ek-text-muted);
  --bs-tertiary-bg:          var(--ek-surface-hover);
  --bs-secondary-bg:         var(--ek-surface-sunken);
  --bs-border-color:         var(--ek-border);
  --bs-heading-color:        var(--ek-text);

  --bs-body-font-family:     var(--ek-font);
  --bs-body-line-height:     var(--ek-lh-body);

  --bs-border-radius-sm:     var(--ek-r-sm);
  --bs-border-radius:        var(--ek-r);
  --bs-border-radius-lg:     var(--ek-r-lg);
  --bs-border-radius-pill:   var(--ek-r-pill);

  --bs-primary:              #1a1a1a;
  --bs-primary-rgb:          26, 26, 26;
  --bs-primary-bg-subtle:    var(--ek-surface-hover);
  --bs-primary-border-subtle: var(--ek-border-strong);
  --bs-primary-text-emphasis: var(--ek-text);
  --bs-focus-ring-color:     var(--ek-border-strong);

  --bs-success:              #1a7f4b;
  --bs-success-rgb:          26, 127, 75;
  --bs-success-bg-subtle:    var(--ek-success-subtle);
  --bs-success-text-emphasis: var(--ek-success-hover);

  --bs-warning:              #8a5b00;
  --bs-warning-rgb:          138, 91, 0;
  --bs-warning-bg-subtle:    var(--ek-warning-subtle);
  --bs-warning-text-emphasis: var(--ek-warning-hover);

  --bs-danger:               #c83232;
  --bs-danger-rgb:           200, 50, 50;
  --bs-danger-bg-subtle:     var(--ek-danger-subtle);
  --bs-danger-text-emphasis: var(--ek-danger-hover);

  --bs-info:                 #22618e;
  --bs-info-rgb:             34, 97, 142;
  --bs-info-bg-subtle:       var(--ek-info-subtle);
  --bs-info-text-emphasis:   var(--ek-info-hover);

  --bs-link-color:           var(--ek-primary);
  --bs-link-color-rgb:       26, 26, 26;
  --bs-link-hover-color:     var(--ek-primary-hover);
  --bs-link-hover-color-rgb: 10, 10, 10;
}

 /* v-param: @imports zonder versie blijven in browsercache hangen */

/* 2) Layout, sections, typografie */

/* ---- @import /assets/css/enka/base.css ---- */
/* =========================================================
   base.css - Layout, sections, headings, kicker, section-link
   ========================================================= */

.ek-page {
  font-family: var(--ek-font);
  color: var(--ek-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ek-page *, .ek-page *::before, .ek-page *::after { box-sizing: border-box; }
.ek-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--ek-sp-5); }

/* ── Section layout (mobile-first) ────────────────────────────────────────── */
.ek-sec { padding: var(--ek-sec-sm) 0; }
.ek-sec--white { background: var(--ek-surface); }
.ek-sec--gray  { background: var(--ek-surface-2); }
@media (min-width: 768px) { .ek-sec { padding: var(--ek-sec) 0; } }

.ek-sec-head { margin-bottom: var(--ek-sp-6); }
@media (min-width: 768px) { .ek-sec-head { margin-bottom: var(--ek-sp-7); } }

/* ── Section "view all" link ──────────────────────────────────────────────── */
.ek-section-link {
  display: inline-flex; align-items: center; gap: var(--ek-sp-2);
  color: var(--ek-ink-2);
  font-size: var(--ek-fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  padding: var(--ek-sp-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease);
}
.ek-section-link i {
  transition: transform var(--ek-dur) var(--ek-ease);
  font-size: var(--ek-fs-xs);
}
.ek-section-link:hover {
  color: var(--ek-ink);
  border-bottom-color: var(--ek-ink-2);
}
.ek-section-link:hover i { transform: translateX(4px); }

/* ── Kicker ───────────────────────────────────────────────────────────────── */
.ek-kicker {
  display: inline-flex; align-items: center; gap: var(--ek-sp-3);
  font-size: var(--ek-fs-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ek-muted);
  margin-bottom: var(--ek-sp-3);
}
.ek-kicker::before {
  content: ''; display: inline-block;
  width: 32px; height: 1px;
  background: var(--ek-ink-2);
}
.ek-kicker--light { color: var(--ek-on-dark-muted); }
.ek-kicker--light::before { background: var(--ek-on-dark); }

/* ── Section heading ──────────────────────────────────────────────────────── */
.ek-h2 {
  font-family: var(--ek-font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 900;
  color: var(--ek-ink-2);
  line-height: .95;
  letter-spacing: -.015em;
  margin: 0;
}

.ek-sec-lead {
  font-size: var(--ek-fs-base);
  color: var(--ek-muted);
  line-height: 1.65;
  max-width: 520px;
  margin: var(--ek-sp-4) 0 0;
}

/* ── Sectie met verloop ───────────────────────────────────────────────────────
   --white en --gray zijn platte vlakken: de sectie leest als een strook van
   een egale kleur waar de kaarten los op liggen. --tint zet er een verloop
   onder plus een diagonale textuur van ~2% zwart. ENKA is monochroom, dus dat
   verloop loopt door de grijstrap (surface > surface-2 > surface-sunken) en
   niet door een kleur. .is-alt spiegelt de richting zodat opeenvolgende
   secties elkaar niet herhalen. */
.ek-sec--tint {
  position: relative;
  isolation: isolate;
  /* Twee lagen: een gloed die het licht in een hoek zet, daaronder het
     verloop door de grijstrap. Zonder die gloed is een monochroom verloop
     van wit naar #ececec te klein om te zien. */
  background:
    radial-gradient(115% 85% at 8% -10%,
      rgba(255, 255, 255, 1)  0%,
      rgba(255, 255, 255, 0) 62%),
    linear-gradient(157deg,
      var(--ek-surface)        0%,
      var(--ek-surface-2)     38%,
      var(--ek-surface-sunken) 100%);
}
.ek-sec--tint.is-alt {
  background:
    radial-gradient(115% 85% at 92% -10%,
      rgba(255, 255, 255, 1)  0%,
      rgba(255, 255, 255, 0) 62%),
    linear-gradient(203deg,
      var(--ek-surface)        0%,
      var(--ek-surface-2)     38%,
      var(--ek-surface-sunken) 100%);
}
/* Textuur. Los van de achtergrond zodat het verloop en het patroon niet om
   dezelfde background-property vechten. */
.ek-sec--tint::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(10, 10, 10, .03) 0 1px,
    transparent           1px 8px
  );
}
.ek-sec--tint.is-alt::before {
  background: repeating-linear-gradient(
    45deg,
    rgba(10, 10, 10, .03) 0 1px,
    transparent           1px 8px
  );
}



/* 3) UI primitives */

/* ---- @import /assets/css/enka/buttons.css ---- */
/* =========================================================
   buttons.css - .ek-btn + alle varianten
   Stijl: premium, strak, geen accent kleur (zwart/wit/grijs).
   ========================================================= */

.ek-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-3) var(--ek-sp-5);
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ek-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ek-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease),
              opacity var(--ek-dur-fast) var(--ek-ease);
}
.ek-btn i { font-size: var(--ek-fs-xs); }

/* Primary - white-on-dark (op donkere achtergronden) */
.ek-btn-white {
  background: var(--ek-on-dark);
  color: var(--ek-ink);
  border-color: var(--ek-on-dark);
}
.ek-btn-white:hover {
  /* Was var(--ek-ink) = #0a0a0a, precies de achtergrondkleur van de hero en
     de showroombanner waar deze knop op staat. De knop loste bij hover dus op
     in het zwart, rand en al. Hij blijft nu licht en zakt een stap in de
     grijstrap, zodat de reactie zichtbaar is en de knop primair blijft. */
  background: var(--ek-surface-sunken);
  color: var(--ek-ink);
  border-color: var(--ek-surface-sunken);
}
.ek-btn-white:active {
  background: var(--ek-surface-hover);
  border-color: var(--ek-surface-hover);
}

/* Ghost - voor donkere achtergrond */
.ek-btn-ghost {
  background: transparent;
  color: var(--ek-on-dark);
  border-color: var(--ek-on-dark-muted-2);
}
.ek-btn-ghost:hover {
  /* Was alleen border-color van rgba(255,255,255,.55) naar vol wit: een
     opacity-stapje op een lijn van 1px, dat zie je niet. Nu een echte
     vulling, zodat de knop antwoordt zonder de primaire knop te beconcurreren. */
  background: rgba(255, 255, 255, .14);
  border-color: var(--ek-on-dark);
  color: var(--ek-on-dark);
}
.ek-btn-ghost:active {
  background: rgba(255, 255, 255, .22);
}

/* Zichtbare focus op donkere vlakken: de standaardring valt daar weg. */
.ek-btn-white:focus-visible,
.ek-btn-ghost:focus-visible {
  outline: 2px solid var(--ek-on-dark);
  outline-offset: 2px;
}

/* Dark - primary op lichte achtergrond */
.ek-btn-dark {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
.ek-btn-dark:hover {
  background: var(--ek-ink);
  border-color: var(--ek-ink);
}

/* Outline - secondary op lichte achtergrond */
.ek-btn-outline {
  background: transparent;
  color: var(--ek-ink-2);
  border-color: var(--ek-line-2);
}
.ek-btn-outline:hover {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}

/* Full-width binnen flex/grid container */
.ek-btn-block {
  width: 100%;
  justify-content: space-between;
}



/* 4) Homepage componenten (enka.php) */

/* ---- @import /assets/css/enka/hero.css ---- */
/* =========================================================
   hero.css - .ek-hero
   Premium: ruime spacing, rustige typografie, subtiele overlay
   voor leesbaarheid van tekst op foto (geen decoratie).
   ========================================================= */

.ek-hero {
  position: relative;
  min-height: 440px;
  background: var(--ek-ink);
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) { .ek-hero { min-height: 520px; } }

.ek-hero-bg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  display: block;
  opacity: .55;
  filter: grayscale(.15) contrast(1.05);
  transition: opacity var(--ek-dur) var(--ek-ease),
              transform 14s ease-out;
  animation: ek-hero-kenburns 22s ease-in-out infinite alternate;
}
@keyframes ek-hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Functionele overlay voor tekst-leesbaarheid op foto */
.ek-hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: var(--ek-scrim-strong);
}
@media (min-width: 768px) {
  .ek-hero-overlay { background: var(--ek-scrim); }
}

.ek-hero-inner {
  position: relative; z-index: 3;
  width: 100%;
  padding: var(--ek-sp-7) 0;
}
@media (min-width: 768px) { .ek-hero-inner { padding: var(--ek-sp-8) 0; } }

.ek-hero-badge {
  display: inline-flex; align-items: center; gap: var(--ek-sp-2);
  color: var(--ek-on-dark);
  font-size: var(--ek-fs-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: var(--ek-sp-5);
}
.ek-hero-badge::before {
  content: ''; display: inline-block;
  width: 32px; height: 1px;
  background: var(--ek-on-dark-muted-2);
}
.ek-hero-badge i {
  color: var(--ek-on-dark-muted-2);
  font-size: var(--ek-fs-xs);
}

.ek-hero-h1 {
  font-family: var(--ek-font-display);
  font-size: clamp(44px, 6.8vw, 84px);
  font-weight: 900;
  color: var(--ek-on-dark);
  line-height: .94;
  letter-spacing: -.02em;
  margin: 0 0 var(--ek-sp-5);
  max-width: 820px;
}
.ek-hero-h1 em {
  font-style: normal;
  color: var(--ek-on-dark-muted-2);
}

.ek-hero-sub {
  font-size: var(--ek-fs-base);
  color: var(--ek-on-dark-muted);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 0 var(--ek-sp-6);
  font-weight: 400;
}

.ek-hero-actions {
  display: flex;
  gap: var(--ek-sp-3);
  flex-wrap: wrap;
}



/* ---- @import /assets/css/enka/ticker.css ---- */
/* =========================================================
   ticker.css - .ek-ticker (lopende USP banner)
   ========================================================= */

.ek-ticker {
  background: var(--ek-ink);
  overflow: hidden;
  padding: var(--ek-sp-3) 0;
  border-top: 1px solid var(--ek-on-dark-line);
  white-space: nowrap;
}
.ek-ticker-track {
  display: inline-flex;
  animation: ek-tick 38s linear infinite;
}
.ek-ticker-track:hover { animation-play-state: paused; }

.ek-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  color: var(--ek-on-dark-muted);
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 var(--ek-sp-6);
}
.ek-ticker-item i {
  color: var(--ek-on-dark-muted-2);
  font-size: 6px;
}

@keyframes ek-tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



/* ---- @import /assets/css/enka/usp.css ---- */
/* =========================================================
   usp.css - .ek-usps service bar (gratis levering, etc.)
   ========================================================= */

.ek-usps {
  background: var(--ek-surface);
  border-bottom: 1px solid var(--ek-line);
  padding: var(--ek-sp-5) 0;
}

.ek-usps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 768px) {
  .ek-usps-grid { grid-template-columns: repeat(4, 1fr); }
}

.ek-usp {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  position: relative;
}
.ek-usp:nth-child(odd) { border-right: 1px solid var(--ek-line); }
.ek-usp:nth-child(-n+2) {
  border-bottom: 1px solid var(--ek-line);
  padding-bottom: var(--ek-sp-4);
}
.ek-usp:nth-child(n+3) { padding-top: var(--ek-sp-4); }
@media (min-width: 768px) {
  .ek-usp,
  .ek-usp:nth-child(-n+2),
  .ek-usp:nth-child(n+3) {
    padding: var(--ek-sp-2) var(--ek-sp-5);
    border-bottom: none;
  }
  .ek-usp:nth-child(odd) { border-right: none; }
  .ek-usp:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 12px; bottom: 12px;
    width: 1px;
    background: var(--ek-line);
  }
}

.ek-usp-icon {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--ek-fs-lg);
  color: var(--ek-ink-2);
}
.ek-usp-label {
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  color: var(--ek-ink-2);
  line-height: 1.3;
  letter-spacing: .01em;
}
.ek-usp-sub {
  font-size: var(--ek-fs-xs);
  color: var(--ek-muted);
  margin-top: var(--ek-sp-1);
  line-height: 1.4;
}



/* ---- @import /assets/css/enka/products.css ---- */
/* =========================================================
   products.css - .ek-prods grid + .ek-prod cards
   Premium: cleane kaarten met soft shadow, geen harde
   borders, geen glassmorphism.
   ========================================================= */

/* ── Editorial split layout (header links, grid rechts) ───────────────────── */
.ek-prods-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ek-sp-5);
  align-items: start;
}
@media (min-width: 992px) {
  .ek-prods-layout {
    /* Kolom was 220px met de aside als losse tekst. Nu een zwart vlak met
       eigen padding, dus breder zodat de h2 dezelfde regelbreedte houdt. */
    grid-template-columns: 264px 1fr;
    gap: var(--ek-sp-6);
    /* Was 'start': de sticky aside van 150px liet bij twee rijen producten
       ~400px leeg. Het vlak loopt nu mee met de hoogte van het grid. */
    align-items: stretch;
  }
}
@media (min-width: 1200px) {
  .ek-prods-layout {
    grid-template-columns: 288px 1fr;
    gap: var(--ek-sp-7);
  }
}

/* Zwart merkvlak. ENKA is monochroom, dus zwart is hier de enige accentkleur
   die er is; hij vult tegelijk de kolom die anders half leeg stond. */
.ek-prods-aside {
  position: static;
  text-align: left;
  background: var(--ek-surface-dark);
  color: var(--ek-on-dark);
  padding: var(--ek-sp-5);
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .ek-prods-aside {
    padding: var(--ek-sp-6) var(--ek-sp-5);
    max-width: none;
  }
}
.ek-prods-aside .ek-kicker { margin-bottom: var(--ek-sp-3); }
.ek-prods-aside .ek-h2 {
  font-size: clamp(var(--ek-fs-xl), 2.6vw, 32px);
  margin: 0 0 var(--ek-sp-3);
  color: var(--ek-on-dark);
}
.ek-prods-aside .ek-sec-lead {
  margin: 0 0 var(--ek-sp-4);
  max-width: 100%;
  font-size: .92rem;
  color: var(--ek-on-dark-muted);
}


/* ── Product grid (responsive: 4 desktop / 3 tablet / 2 mobile) ───────────── */
.ek-prods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ek-sp-2);
}
@media (min-width: 576px)  { .ek-prods { gap: var(--ek-sp-3); } }
@media (min-width: 768px)  { .ek-prods { grid-template-columns: repeat(3, 1fr); gap: var(--ek-sp-4); } }
@media (min-width: 1200px) { .ek-prods { grid-template-columns: repeat(4, 1fr); } }

/* Query haalt altijd 8 producten op zodat desktop (4 koloms) 2 volle rijen
   krijgt. Op tablet en mobile verbergen we de laatste 2 cards zodat de
   onderste rij niet half gevuld is. */
.ek-prods > .ek-prod:nth-child(n+7) { display: none; }
@media (min-width: 1200px) {
  .ek-prods > .ek-prod:nth-child(n+7) { display: flex; }
}

/* ── Productkaart (compacter) ─────────────────────────────────────────────── */
.ek-prod {
  background: var(--ek-surface);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Was transparent. Op de secties met een witte achtergrond viel de kaart
     daardoor volledig weg tegen de sectie: witte kaart op wit, geen rand. De
     rij producten oogde daar ongestructureerd terwijl dezelfde rij op een
     grijze sectie wel als kaarten las. Bij hover wordt de rand sterker. */
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-r-md);
  overflow: hidden;
  transition: box-shadow var(--ek-dur) var(--ek-ease),
              transform var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease);
}
.ek-prod:hover {
  box-shadow: var(--ek-shadow-md);
  transform: translateY(-2px);
  /* De rustrand is nu --ek-line; hover moet daar zichtbaar bovenuit komen. */
  border-color: var(--ek-line-2);
}
/* De hele kaart is het klikvlak, niet alleen de foto en de naam. */
.ek-prod { cursor: pointer; }

.ek-prod-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ek-surface-2);
  position: relative;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
}
.ek-prod-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .9s var(--ek-ease);
}
.ek-prod:hover .ek-prod-img img { transform: scale(1.04); }

/* NEW badge */
.ek-prod-new {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: var(--ek-sp-1) var(--ek-sp-2);
  border-radius: var(--ek-r-sm);
}

/* ── Productkaart-acties (wishlist + quick view) ──────────────────────────── */
.ek-prod-actions {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-1);
  opacity: 1;
  transform: none;
  transition: opacity var(--ek-dur) var(--ek-ease),
              transform var(--ek-dur) var(--ek-ease);
  pointer-events: auto;
}
@media (min-width: 992px) {
  .ek-prod-actions {
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
  }
  .ek-prod:hover .ek-prod-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Mobiel altijd zichtbaar -> touch target >=44px; desktop hover-reveal compacter */
.ek-prod-action {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-on-dark);
  border: 1px solid var(--ek-line);
  border-radius: 50%;
  color: var(--ek-ink-2);
  font-size: var(--ek-fs-sm);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--ek-shadow-sm);
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prod-action:hover {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
.ek-prod-action.is-active {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
.ek-prod-action.is-active i { font-weight: 900; }
@media (min-width: 992px) {
  .ek-prod-action { width: 30px; height: 30px; }
}

/* ── Productkaart body (compact) ──────────────────────────────────────────── */
.ek-prod-body {
  padding: var(--ek-sp-3) var(--ek-sp-3) var(--ek-sp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
  background: var(--ek-surface);
}
@media (min-width: 768px) { .ek-prod-body { padding: var(--ek-sp-4) var(--ek-sp-4) var(--ek-sp-4); gap: var(--ek-sp-2); } }

.ek-prod-name {
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  color: var(--ek-ink-2);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
@media (min-width: 768px) { .ek-prod-name { min-height: 38px; } }

.ek-prod-meta {
  display: flex;
  align-items: baseline;
  gap: var(--ek-sp-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 0;
}
.ek-prod-price {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 900;
  color: var(--ek-ink-2);
  letter-spacing: -.01em;
  line-height: 1.1;
}

.ek-prod-vars {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  color: var(--ek-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ek-prod-price-vat {
  font-size: var(--ek-fs-xs);
  font-weight: 500;
  color: var(--ek-muted);
  letter-spacing: .02em;
  text-transform: lowercase;
  margin-left: var(--ek-sp-1);
}

/* ── Kleur swatches (kleiner) ─────────────────────────────────────────────── */
.ek-prod-colors {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-1);
  margin: 0;
  flex-wrap: wrap;
  /* Staan sinds de verplaatsing onder de prijs; min-height houdt de kaarten
     in een rij gelijk, ook als een product geen kleuren heeft. */
  min-height: 18px;
}
.ek-prod-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--ek-line);
  display: inline-block;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--ek-on-dark);
  transition: transform var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prod-swatch:hover {
  transform: scale(1.15);
  border-color: var(--ek-ink-2);
}
.ek-prod-swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--ek-sp-2);
  border-radius: var(--ek-r-lg);
  border: 1px solid var(--ek-line-2);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  color: var(--ek-ink-2);
  background: var(--ek-on-dark);
  text-decoration: none;
  letter-spacing: .02em;
  transition: border-color var(--ek-dur-fast) var(--ek-ease),
              background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prod-swatch-more:hover {
  border-color: var(--ek-ink-2);
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

.ek-prod-name-link { color: inherit; text-decoration: none; }
.ek-prod-name-link:hover .ek-prod-name { color: var(--ek-ink); }

/* ── Klikvlak over de hele kaart ──────────────────────────────────────────────
   Een <a> om de kaart heen kan niet: de kaart bevat zelf al links (foto, naam,
   swatches) en een knop, en genest anker is ongeldig. Daarom bedekt de
   naam-link de kaart met een pseudo-element. Alles wat zijn eigen klik heeft
   moet daar met een z-index bovenuit komen. */
.ek-prod-name-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Swatches houden hun eigen link en de hover die de foto wisselt. */
.ek-prod-colors {
  position: relative;
  z-index: 2;
}
/* Focus zichtbaar houden nu de link zelf geen eigen vlak meer heeft. */
.ek-prod-name-link:focus-visible {
  outline: none;
}
.ek-prod:focus-within {
  border-color: var(--ek-ink-2);
  box-shadow: var(--ek-shadow-md);
}

/* ── Bottom-link 'Bekijk product' weg op compact kaartje (subtieler) ──────── */
.ek-prod-link { display: none; }

/* ── Subcategorieen in het zwarte vlak ────────────────────────────────────────
   Elke subcategorie een eigen rij over de volle breedte van het vlak, met de
   naam links en de pijl rechts. Vult de ruimte die tussen de lead en de
   "bekijk alles"-link overbleef en geeft een directe route naar het niveau
   waar de bezoeker heen wil. */
.ek-prods-subs {
  display: flex;
  flex-direction: column;
  margin: var(--ek-sp-4) 0 0;
}
.ek-prods-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ek-sp-3);
  /* Negatieve marge zodat de rij en zijn hoverkleur de volle breedte van het
     zwarte vlak pakken, tot in de padding. */
  margin: 0 calc(var(--ek-sp-5) * -1);
  padding: var(--ek-sp-3) var(--ek-sp-5);
  border-bottom: 1px solid var(--ek-on-dark-line);
  color: var(--ek-on-dark);
  text-decoration: none;
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  line-height: 1.3;
  /* 44px aanraakvlak op mobiel. */
  min-height: 44px;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              padding-left var(--ek-dur) var(--ek-ease);
}
/* Alleen scheidingslijnen TUSSEN de rijen: geen rand aan de boven- of
   onderkant van de lijst. */
.ek-prods-sub:last-child { border-bottom: 0; }

.ek-prods-sub i {
  font-size: var(--ek-fs-xs);
  color: var(--ek-on-dark-muted-2);
  flex-shrink: 0;
  transition: transform var(--ek-dur) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prods-sub:hover,
.ek-prods-sub:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: var(--ek-on-dark);
  padding-left: calc(var(--ek-sp-5) + var(--ek-sp-2));
}
.ek-prods-sub:hover i,
.ek-prods-sub:focus-visible i {
  transform: translateX(3px);
  color: var(--ek-on-dark);
}
@media (min-width: 992px) {
  .ek-prods-sub {
    /* Vlak heeft daar padding var(--ek-sp-6) var(--ek-sp-5). */
    min-height: 0;
    padding: var(--ek-sp-2) var(--ek-sp-5);
  }
}



/* ---- @import /assets/css/enka/banner.css ---- */
/* =========================================================
   banner.css - .ek-banner editorial showroom banner
   Premium: 2-koloms layout, foto rechts, tekst links,
   geen extra effecten.
   ========================================================= */

.ek-banner {
  background: var(--ek-ink);
  overflow: hidden;
  position: relative;
  padding: 0;
}
@media (min-width: 768px) { .ek-banner { padding: var(--ek-sp-8) 0; } }

.ek-banner-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: auto;
  border-radius: 0;
  overflow: hidden;
}
@media (min-width: 992px) {
  /* De bron (2042x530) is al als banner opgemaakt: links een zwart
     gereedschapspatroon als tekstruimte, pas vanaf ~56% de foto van het rek.
     Hij zat hier in een halve kolom van 1.6:1 geperst, waardoor je juist dat
     patroon zag en het rek buiten beeld viel. Daarom ligt het beeld nu over de
     hele sectie en staat de tekst op het patroon, zoals bedoeld. */
  .ek-banner-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 420px;
    border-radius: 0;
    overflow: visible;
    /* Bewust GEEN position hier: het beeld eronder is absolute en moet aan de
       sectie hangen (die is relative), niet aan deze grid binnen .ek-wrap. */
  }
}

.ek-banner-text {
  padding: var(--ek-sp-7) var(--ek-sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ek-ink);
}
@media (min-width: 576px)  { .ek-banner-text { padding: var(--ek-sp-7) var(--ek-sp-6); } }
@media (min-width: 1200px) { .ek-banner-text { padding: var(--ek-sp-8); } }

.ek-banner-h2 {
  font-family: var(--ek-font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
  color: var(--ek-on-dark);
  line-height: .95;
  letter-spacing: -.015em;
  margin: var(--ek-sp-3) 0 var(--ek-sp-4);
  max-width: 480px;
}
.ek-banner-sub {
  font-size: var(--ek-fs-base);
  color: var(--ek-on-dark-muted);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 0 var(--ek-sp-5);
}
.ek-banner-actions {
  display: flex;
  gap: var(--ek-sp-2);
  flex-wrap: wrap;
}

.ek-banner-visual {
  position: relative;
  background: var(--ek-ink-2);
  min-height: 260px;
  overflow: hidden;
}
@media (min-width: 992px) {
  /* Uit de grid gehaald: het beeld beslaat de hele sectie, van schermrand tot
     schermrand. */
  .ek-banner-visual {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
    z-index: 0;
  }
  /* Tekst op het patroon in plaats van in een eigen kolom, en boven het beeld
     dat de sectie vult. */
  .ek-banner-text {
    background: transparent;
    max-width: 48%;
    padding-left: 0;
    position: relative;
    z-index: 1;
  }
}
@media (min-width: 1400px) {
  .ek-banner-text { max-width: 44%; }
}
.ek-banner-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* De bannerbeelden zijn 2042x530 (3.85:1). Het vak was ~1.6:1, waardoor er
     zoveel wegviel dat alleen met object-position 88% nog iets van het
     onderwerp in beeld kwam. Nu het vak doorloopt tot de schermrand is het
     eerder 2.4:1 en hoeft er veel minder af, dus kan de uitsnede terug naar
     het midden en blijft het rek heel. */
  /* Rechts uitlijnen: alles wat bij een smaller scherm wegvalt, gaat er links
     af en dat is het repetitieve patroon. Het rek blijft zo altijd heel. */
  object-position: 100% 50%;
  transition: transform 1s var(--ek-ease);
}
/* Het zwart van de sectie loopt in de foto over, zodat het beeld niet als
   losse rechthoek tegen de tekstkolom botst. */
.ek-banner-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--ek-ink)         0%,
    rgba(10, 10, 10, .94) 34%,
    rgba(10, 10, 10, .60) 50%,
    rgba(10, 10, 10, 0)   68%);
}
@media (max-width: 991.98px) {
  /* Eén kolom: het beeld staat onder de tekst, dus het verloop hoort daar
     bovenlangs te lopen in plaats van van links. */
  .ek-banner-visual::after {
    background: linear-gradient(180deg,
      var(--ek-ink) 0%,
      rgba(10, 10, 10, 0) 28%);
  }
  /* Hier is het vak weer smal (~1.35:1), dus valt er veel weg. Rechts
     uitlijnen zou het rek half afsnijden; deze waarde houdt het rek in beeld
     en laat het patroon links wegvallen. */
  .ek-banner-visual img { object-position: 84% 50%; }
}
.ek-banner:hover .ek-banner-visual img { transform: scale(1.03); }



/* ---- @import /assets/css/enka/lookbook.css ---- */
/* =========================================================
   lookbook.css - .ek-lookbook-grid + cards (showroom mockups)
   Premium: rustige donkere cards met gescheiden body sectie.
   ========================================================= */

.ek-lookbook-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ek-sp-4);
}
@media (min-width: 576px) {
  .ek-lookbook-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ek-lookbook-grid { grid-template-columns: repeat(4, 1fr); }
}

.ek-lookbook-card {
  position: relative;
  display: block;
  background: var(--ek-ink);
  text-decoration: none;
  border-radius: var(--ek-r-lg);
  overflow: hidden;
  box-shadow: var(--ek-shadow-sm);
  transition: transform var(--ek-dur) var(--ek-ease),
              box-shadow var(--ek-dur) var(--ek-ease);
}
.ek-lookbook-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ek-shadow-lg);
}

.ek-lookbook-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ek-ink);
  position: relative;
}
.ek-lookbook-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1s var(--ek-ease);
}
.ek-lookbook-card:hover .ek-lookbook-img img { transform: scale(1.03); }

.ek-lookbook-body {
  padding: var(--ek-sp-5) var(--ek-sp-5) var(--ek-sp-5);
  background: var(--ek-ink);
  border-top: 1px solid var(--ek-on-dark-line);
}
.ek-lookbook-title {
  font-family: var(--ek-font-display);
  font-size: clamp(var(--ek-fs-xl), 2vw, 28px);
  font-weight: 900;
  color: var(--ek-on-dark);
  margin: 0 0 var(--ek-sp-2);
  letter-spacing: -.01em;
  line-height: 1.05;
}
.ek-lookbook-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-on-dark-muted);
  transition: color var(--ek-dur-fast) var(--ek-ease);
}
.ek-lookbook-cta i {
  transition: transform var(--ek-dur) var(--ek-ease);
  font-size: var(--ek-fs-xs);
}
.ek-lookbook-card:hover .ek-lookbook-cta { color: var(--ek-on-dark); }
.ek-lookbook-card:hover .ek-lookbook-cta i { transform: translateX(4px); }



/* ---- @import /assets/css/enka/cta.css ---- */
/* =========================================================
   cta.css - .ek-cta onderaan de pagina (contact)
   Split layout: tekst links, knoppen rechts verticaal gestapeld.
   ========================================================= */

.ek-cta {
  background: var(--ek-surface);
  border-top: 1px solid var(--ek-line);
  padding: var(--ek-sp-8) 0;
  position: relative;
  overflow: hidden;
}

.ek-cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ek-sp-6);
  align-items: center;
  position: relative;
}
@media (min-width: 992px) {
  .ek-cta-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--ek-sp-8);
  }
}

.ek-cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-3);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ek-muted);
  margin-bottom: var(--ek-sp-4);
}
.ek-cta-kicker::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--ek-ink-2);
}

.ek-cta-h2 {
  font-family: var(--ek-font-display);
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 900;
  color: var(--ek-ink-2);
  line-height: .95;
  margin: 0 0 var(--ek-sp-4);
  letter-spacing: -.02em;
}
.ek-cta-sub {
  font-size: var(--ek-fs-base);
  color: var(--ek-muted);
  max-width: 520px;
  line-height: 1.7;
  margin: 0;
}

.ek-cta-btns {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
  min-width: 0;
}
@media (min-width: 576px) {
  .ek-cta-btns { min-width: 260px; }
}



/* 5) Globale Enka componenten */

/* ---- @import /assets/css/enka/menu.css ---- */
/* =========================================================
   menu.css - Enka navigation + mega-menu + account-strip
   Premium: clean wit menu met onderline underline op hover,
   geen gradients of glassmorphism in dropdowns.
   ========================================================= */

/* ── Hoofd-navigatie ──────────────────────────────────────────────────────── */
.enka-nav-wrap {
    background: var(--ek-surface);
    border-top: 1px solid var(--ek-line);
    border-bottom: 1px solid var(--ek-line);
    position: relative;
    z-index: 50;
}
.enka-nav-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 54px;
    overflow: visible;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--ek-sp-1);
}
.enka-nav-row::-webkit-scrollbar { display: none; }

.enka-nav-item {
    position: static;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

/* Mobile-first: horizontaal scrollbaar en compact; vanaf 1200px past alles,
   vanaf 1400px ruime spacing (376px overflow op 1024px was het probleem). */
@media (min-width: 1200px) {
    .enka-nav-row { overflow-x: visible; }
    .enka-nav-item { flex-shrink: 1; }
}

/* De scrollbar staat hierboven bewust uit, maar daardoor zag je op 992-1199px
   alleen een half afgekapt "Wandpanelen" en niet dat het menu te vegen is.
   Deze fade zet dat om in een leesbaar signaal. Overlay, geen mask: een mask op
   .enka-nav-row zou het mega-menu meeknippen. */
@media (max-width: 1199.98px) {
    .enka-nav-wrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 40px;
        background: linear-gradient(to right, rgba(255,255,255,0), var(--ek-surface) 78%);
        pointer-events: none;
        z-index: 2;
    }
}
@media (min-width: 1400px) {
    .enka-nav-link { padding: 0 var(--ek-sp-4); letter-spacing: .08em; }
}

.enka-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: 0 var(--ek-sp-3);
    font-size: var(--ek-fs-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    position: relative;
    transition: color var(--ek-dur-fast) var(--ek-ease);
}
.enka-nav-link::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: 0;
    height: 2px;
    background: var(--ek-ink-2);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ek-dur) var(--ek-ease);
}
.enka-nav-link:hover { color: var(--ek-ink); }
.enka-nav-link:hover::after,
.enka-nav-item:hover .enka-nav-link::after,
.enka-nav-link.is-active::after { transform: scaleX(1); }

.enka-caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .35;
    margin-left: var(--ek-sp-1);
    flex-shrink: 0;
    transition: opacity var(--ek-dur-fast) var(--ek-ease),
                transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-nav-item:hover .enka-caret {
    opacity: .8;
    transform: rotate(180deg);
}

/* ── Dropdown panel ───────────────────────────────────────────────────────── */
.enka-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: 100%;
    background: var(--ek-surface);
    border-top: 1px solid var(--ek-line);
    box-shadow: var(--ek-shadow-md);
    z-index: 200;
    animation: enka-fade var(--ek-dur-fast) var(--ek-ease);
}
@keyframes enka-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.enka-drop-inner {
    padding: var(--ek-sp-6) 0 var(--ek-sp-6);
    min-height: 280px;
    /* Volgt --container-max zodat het aligneert met de top-nav. */
}
.enka-nav-item:hover .enka-drop,
.enka-nav-item:focus-within .enka-drop { display: block; }

/* ── Mega menu grid ───────────────────────────────────────────────────────── */
.enka-mega-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ek-sp-7);
    align-items: stretch;
}
@media (min-width: 992px) {
    .enka-mega-grid { grid-template-columns: 1fr 280px; }
}

/* CSS Grid met flexibele kolombreedte. Links-naar-rechts leesvolgorde,
   geen rare strekkingen bij ongelijke blok-hoogtes. */
.enka-mega-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ek-sp-6) var(--ek-sp-6);
    align-items: start;
}
@media (min-width: 576px) {
    .enka-mega-cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.enka-mega-col { min-width: 0; }
.enka-mega-col-leaf .enka-mega-head { color: var(--ek-muted); }

.enka-mega-head {
    display: block;
    font-size: var(--ek-fs-sm);
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--ek-ink-2);
    text-decoration: none;
    padding-bottom: var(--ek-sp-2);
    margin-bottom: var(--ek-sp-2);
    border-bottom: 1px solid var(--ek-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enka-mega-head:hover { color: var(--ek-ink); }

.enka-mega-item {
    display: block;
    padding: var(--ek-sp-2) 0;
    font-size: var(--ek-fs-sm);
    color: var(--ek-muted);
    text-decoration: none;
    transition: color var(--ek-dur-fast) var(--ek-ease),
                padding-left var(--ek-dur-fast) var(--ek-ease);
    line-height: 1.5;
}
.enka-mega-item:hover {
    color: var(--ek-ink);
    padding-left: var(--ek-sp-1);
}

.enka-mega-viewall {
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    margin-top: var(--ek-sp-3);
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    text-decoration: none;
    transition: gap var(--ek-dur-fast) var(--ek-ease);
}
.enka-mega-viewall::after {
    content: '\2192';
    font-size: var(--ek-fs-sm);
    transition: transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-mega-viewall:hover { color: var(--ek-ink); }
.enka-mega-viewall:hover::after { transform: translateX(3px); }

/* ── Mega-menu featured side panel (geen gradient, solid grijs) ───────────── */
.enka-mega-aside {
    background: var(--ek-surface-2);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-r-lg);
    padding: var(--ek-sp-6) var(--ek-sp-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    position: relative;
    overflow: hidden;
}
.enka-mega-aside-kicker {
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    margin-bottom: var(--ek-sp-2);
    position: relative;
}
.enka-mega-aside-title {
    font-family: var(--ek-font-display);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--ek-ink-2);
    margin: 0 0 var(--ek-sp-2);
    letter-spacing: -.01em;
    position: relative;
}
.enka-mega-aside-text {
    font-size: var(--ek-fs-sm);
    color: var(--ek-muted);
    line-height: 1.6;
    margin: 0 0 var(--ek-sp-4);
    position: relative;
}
.enka-mega-aside-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    align-self: flex-start;
    padding: var(--ek-sp-2) var(--ek-sp-4);
    background: var(--ek-ink-2);
    color: var(--ek-on-dark);
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--ek-r);
    position: relative;
    transition: background var(--ek-dur-fast) var(--ek-ease),
                transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-mega-aside-cta:hover {
    background: var(--ek-ink);
    color: var(--ek-on-dark);
    transform: translateX(2px);
}

/* ── Mobile menu ──────────────────────────────────────────────────────────── */
.enka-mob-header {
    font-family: var(--ek-font-display);
    font-size: var(--ek-fs-xl);
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.enka-mob-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ek-sp-4) var(--ek-sp-5);
    font-size: var(--ek-fs-sm);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ek-line);
    cursor: pointer;
    font-family: inherit;
    color: var(--ek-ink-2);
    transition: background var(--ek-dur-fast) var(--ek-ease);
}
.enka-mob-toggle:hover { background: var(--ek-surface-2); }
.enka-mob-toggle svg {
    transition: transform var(--ek-dur-fast) var(--ek-ease);
    flex-shrink: 0;
    opacity: .5;
}
.enka-mob-toggle.is-open {
    background: var(--ek-surface-2);
}
.enka-mob-toggle.is-open svg {
    transform: rotate(180deg);
    opacity: 1;
}
.enka-mob-subs {
    display: none;
    background: var(--ek-surface-2);
    padding: var(--ek-sp-2) 0;
}
.enka-mob-subs.is-open { display: block; }
.enka-mob-sub {
    display: block;
    padding: var(--ek-sp-3) var(--ek-sp-6);
    font-size: var(--ek-fs-sm);
    color: var(--ek-muted);
    text-decoration: none;
    transition: background var(--ek-dur-fast) var(--ek-ease),
                color var(--ek-dur-fast) var(--ek-ease);
}
.enka-mob-sub:hover {
    color: var(--ek-ink);
    background: var(--ek-surface-3);
}
.enka-mob-viewall {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-3) var(--ek-sp-6);
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    text-decoration: none;
    border-top: 1px solid var(--ek-line);
    margin-top: var(--ek-sp-2);
}
.enka-mob-viewall:hover { color: var(--ek-ink); }

/* ── Account-strip (ingelogd) ─────────────────────────────────────────────── */
.enka-acct-strip {
    background: var(--ek-surface-2);
    border-bottom: 1px solid var(--ek-line);
    padding: var(--ek-sp-2) 0;
}
.enka-acct-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.enka-acct-label {
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    margin-right: var(--ek-sp-4);
    padding: var(--ek-sp-2) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    flex-shrink: 0;
}
.enka-acct-label::before {
    content: '';
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--ek-ink-2);
}
.enka-acct-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-2) var(--ek-sp-4);
    font-size: var(--ek-fs-sm);
    font-weight: 600;
    color: var(--ek-muted);
    text-decoration: none;
    border-radius: var(--ek-r);
    position: relative;
    transition: color var(--ek-dur-fast) var(--ek-ease),
                background var(--ek-dur-fast) var(--ek-ease);
}
.enka-acct-link i {
    font-size: var(--ek-fs-xs);
    opacity: .55;
    transition: opacity var(--ek-dur-fast) var(--ek-ease),
                transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-acct-link:hover {
    color: var(--ek-ink);
    background: var(--ek-surface);
}
.enka-acct-link:hover i {
    opacity: 1;
    transform: scale(1.1);
}

/* Touch targets >=44px op touch-apparaten */
@media (pointer: coarse) {
    .enka-acct-link,
    .enka-mob-sub,
    .enka-nav-link { min-height: 44px; }
}

/* ── Account dropdowns (Shop, Financieel, Settings) ───────────────────────── */
.dl-dd {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
/* Overschrijf ALLE .dl-caret instances op Enka, niet alleen die binnen
 * .dl-dd-toggle. De admin-menu (gerenderd via dutchline-menu.php op Enka voor
 * admin/sales/warehouse) gebruikt .dl-mega-toggle, en zonder deze override
 * krijgen die de blauwe gerotateerde border-square uit header.css - die
 * visueel niet bij de minimalistische Enka-stijl past. */
body.is-enka .dl-caret,
.dl-dd-toggle .dl-caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    border-bottom: 0;
    border-radius: 0;
    transform: none;
    /* .dl-navlink is flex met gap:8px - een extra marge duwt het pijltje
       scheef ten opzichte van de rechter padding. */
    margin-left: 0;
    opacity: .55;
    vertical-align: middle;
    transition: opacity .15s ease, transform .15s ease;
}
body.is-enka .dl-caret:hover,
body.is-enka .dl-mega.is-open > .dl-mega-toggle .dl-caret,
body.is-enka .dl-dd.is-open > .dl-dd-toggle .dl-caret {
    opacity: .9;
    transform: rotate(180deg);
}
.dl-dd-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-top: 2px solid var(--ek-ink-2);
    box-shadow: var(--ek-shadow-md);
    padding: var(--ek-sp-2);
    display: none;
    z-index: 80;
    border-radius: var(--ek-r);
}
.dl-dd.is-open .dl-dd-menu { display: block; }
.dl-dd-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px;
    height: 10px;
}
.dl-dd-item {
    display: block;
    padding: var(--ek-sp-2) var(--ek-sp-4);
    font-size: var(--ek-fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ek-ink-2);
    text-decoration: none;
    border-radius: var(--ek-r-sm);
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
}
.dl-dd-item:hover {
    background: var(--ek-surface-2);
    color: var(--ek-ink);
}
.dl-dd-item.is-active {
    background: var(--ek-surface-2);
    font-weight: 700;
    border-left: 2px solid var(--ek-ink-2);
    padding-left: var(--ek-sp-3);
}

/* ── Mobiel menu: account/gast-blok (voorheen style-attrs in enka-menu.php) ── */
a.enka-mob-toggle { text-decoration: none; }
.enka-mob-caption {
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ek-text-muted);
}
.enka-mob-caption--sub  { padding: var(--ek-sp-2) 28px 2px; }
.enka-mob-caption--acct { margin-bottom: var(--ek-sp-2); padding-left: var(--ek-sp-1); }
.enka-mob-sub--indent { padding-left: 36px; }
.enka-mob-sub--strong { font-weight: 700; color: var(--ek-ink); }
.enka-mob-acct {
    padding: var(--ek-sp-4) var(--ek-sp-4) 0;
    border-top: 1px solid var(--ek-border);
    margin-top: var(--ek-sp-3);
}
.enka-mob-acct-link {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-2) var(--ek-sp-1);
    font-size: var(--ek-fs-sm);
    font-weight: 600;
    color: var(--ek-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--ek-border-subtle);
}
.enka-mob-acct-link i { width: 18px; color: var(--ek-text-muted); font-size: var(--ek-fs-sm); }
.enka-mob-logout {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-4) var(--ek-sp-1) var(--ek-sp-1);
    font-size: var(--ek-fs-sm);
    font-weight: 700;
    color: var(--ek-danger);
    text-decoration: none;
}
.enka-mob-logout i { width: 18px; font-size: var(--ek-fs-sm); }
.enka-mob-guest {
    padding: var(--ek-sp-4) var(--ek-sp-4) 0;
    border-top: 1px solid var(--ek-border);
    margin-top: var(--ek-sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--ek-sp-2);
}
.enka-mob-guest-link { font-size: var(--ek-fs-sm); font-weight: 700; color: var(--ek-ink); text-decoration: none; }
.enka-mob-pwa-wrap { padding: var(--ek-sp-3) var(--ek-sp-4) var(--ek-sp-4); }
.enka-mob-pwa-btn {
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-2);
    font-size: var(--ek-fs-sm);
    font-weight: 700;
    color: var(--ek-ink);
    background: var(--ek-surface-hover);
    border: 1px solid var(--ek-border);
    border-radius: var(--ek-r-lg);
    cursor: pointer;
}

/* --- Instellingen-paneel in het hoofdmenu (Enka) ---------------------------
 * Het paneel zelf staat in inc/dutchline-menu.php - dat is het admin-menu dat
 * ook op Enka draait. Daar staan DutchLine-blauwtinten hardgecodeerd in een
 * inline <style> in de body, die van een gewone stylesheet wint bij gelijke
 * specificiteit. Vandaar de body.is-enka-prefix: die tilt deze zwart-witte
 * Enka-versie er weer overheen. */
body.is-enka .dl-dd-menu.dl-ddp {
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-top: 2px solid var(--ek-ink-2);
    border-radius: var(--ek-r);
}
body.is-enka .dl-ddp-title { color: var(--ek-muted, rgba(0, 0, 0, .5)); }
body.is-enka .dl-ddp-item { border-radius: var(--ek-r-sm); }
body.is-enka .dl-ddp-item:hover { background: var(--ek-surface-2); }
body.is-enka .dl-ddp-item.is-active {
    background: var(--ek-surface-2);
    border-left: 2px solid var(--ek-ink-2);
}
body.is-enka .dl-ddp-ico {
    border-radius: var(--ek-r-sm);
    background: var(--ek-surface-2);
    color: var(--ek-ink-2);
}
body.is-enka .dl-ddp-item.is-active .dl-ddp-ico {
    background: var(--ek-ink-2);
    color: var(--ek-on-primary, #fff);
}
body.is-enka .dl-ddp-label { text-transform: none; letter-spacing: .01em; }
body.is-enka .dl-ddp-deep a {
    border-radius: var(--ek-r-sm);
    background: var(--ek-surface-2);
    color: var(--ek-ink-2);
}
body.is-enka .dl-ddp-deep a:hover {
    background: var(--ek-ink-2);
    color: var(--ek-on-primary, #fff);
}
body.is-enka .dl-ddp-foot { border-top: 1px solid var(--ek-line); color: var(--ek-ink-2); }
body.is-enka .dl-ddp-foot:hover { color: var(--ek-ink, #000); }

/* Instellingen-hub: chips en pijl in Enka-tinten */
body.is-enka .dl-sethub-deep a:hover,
body.is-enka .dl-sethub-card:hover .dl-sethub-arrow {
    color: var(--ek-ink-2);
    border-color: var(--ek-line-2);
}
body.is-enka .dl-sethub-card:hover { border-color: var(--ek-line-2); }
body.is-enka .dl-sethub-searchbox input:focus {
    border-color: var(--ek-ink-2);
    box-shadow: none;
}

 /* v-param: @imports zonder versie blijven in browsercache hangen */

/* ---- @import /assets/css/enka/header.css ---- */
/* =========================================================
   enka/header.css
   ---------------------------------------------------------
   Header-styling voor ENKA (APP_LINE=enka).
   Vroeger inline in inc/header.php - hier verplaatst zodat
   header.php geen ~140 regels CSS meer hoeft mee te sturen.
   Waarden lopen via tokens.css (--ek-*); de remap hieronder
   stuurt de gedeelde DutchLine variabelen (--accent, --dl-*).
   Scope MOET body.is-enka zijn (niet :root): var(--ek-*) wordt
   geresolved op het declarerende element en de tokens bestaan
   alleen binnen body.is-enka.
   ========================================================= */

body.is-enka {
  --accent:        var(--ek-text);
  --accent-soft:   var(--ek-primary-subtle);
  --accent-soft2:  var(--ek-border);
  --accent-ink:    var(--ek-on-primary);
  --dl-blue-700:   var(--ek-text);
  --dl-blue-900:   var(--ek-text);
  --dl-nav-bg:     var(--ek-surface);
  --focus:         var(--ek-border-strong);
  --bg:            var(--ek-surface-hover);
  --ink:           var(--ek-text);
}
body.is-enka { font-family: var(--ek-font); }

/* Topbar - dark strip */
.dl-topbar-v4 {
  background: var(--ek-surface-dark);
  border-bottom: none;
}
.dl-topbar-v4 .dl-toplink,
.dl-topbar-v4 .dl-sep { color: var(--ek-on-dark-muted); font-size: var(--ek-fs-sm); }
.dl-topbar-v4 .dl-toplink:hover { color: var(--ek-on-dark); }

/* Brandbar - clean white */
.dl-brandbar-v4 {
  background: var(--ek-surface);
  border-top: none;
  border-bottom: 1px solid var(--ek-border);
  box-shadow: none;
}

/* Logo text fallback */
.enka-text-logo {
  font-family: var(--ek-font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ek-text);
  text-decoration: none;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.enka-text-logo small {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--ek-text-muted);
  margin-top: 1px;
}

/* Search */
.dl-search-pill {
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-r);
}
.dl-search-btn {
  background: var(--ek-primary);
  color: var(--ek-on-primary);
  border-radius: 0 var(--ek-r) var(--ek-r) 0;
  font-weight: 700;
  font-size: var(--ek-fs-sm);
}
.dl-search-btn:hover { background: var(--ek-primary-hover); }
.dl-search-input:focus {
  border-color: var(--ek-text);
  box-shadow: 0 0 0 2px var(--ek-border);
}

/* Header buttons */
.dl-btn-primary {
  background: var(--ek-primary);
  color: var(--ek-on-primary);
  border-color: var(--ek-primary);
  border-radius: var(--ek-r);
}
.dl-btn-primary:hover { background: var(--ek-primary-hover); border-color: var(--ek-primary-hover); }
.dl-btn-ghost {
  border-color: var(--ek-border);
  color: var(--ek-text);
  border-radius: var(--ek-r);
}
.dl-btn-ghost:hover { background: var(--ek-surface-hover); border-color: var(--ek-border-strong); color: var(--ek-text); }

/* Nav bar */
.dl-nav-v4 {
  background: var(--ek-surface);
  border-top: 1px solid var(--ek-border);
  border-bottom: 1px solid var(--ek-border);
}
/* Een admin krijgt op Enka het DutchLine back-end menu (inc/menu.php), dus
   deze balk draagt daar de maten van: .dl-navlink heeft padding 10px 12px,
   bedoeld voor een gevulde pill met radius. Die pill wordt hieronder een
   onderstreping, maar de padding bleef staan - waardoor de streep 12px aan
   elke kant onder de tekst uitstak en elk item losse ruimte om zich heen
   kreeg. Hoogte komt daarom nu uit de rij en de markering springt in, gelijk
   aan .enka-nav-row / .enka-nav-link in menu.css. */
.dl-nav-row {
  padding: 0;
  min-height: 54px;
  align-items: stretch;
  gap: var(--ek-sp-1);
}
.dl-navlink {
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-text);
  border-radius: 0 !important;
  padding: 0 var(--ek-sp-3);
  border-bottom: 0;
  position: relative;
}
.dl-navlink::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 2px;
  background: var(--ek-text);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ek-dur) var(--ek-ease);
}
.dl-navlink:hover {
  background: transparent !important;
  color: var(--ek-text);
}
.dl-navlink.is-active {
  background: transparent !important;
  color: var(--ek-text) !important;
  font-weight: 800;
}
.dl-navlink:hover::after,
.dl-navlink.is-active::after,
.dl-dd:hover .dl-dd-toggle::after,
.dl-dd.is-open .dl-dd-toggle::after {
  transform: scaleX(1);
}
.dl-dd-toggle { border-radius: 0 !important; }
.dl-dd:hover .dl-dd-toggle,
.dl-dd.is-open .dl-dd-toggle {
  background: transparent !important;
}

/* Mega menu */
.dl-mega-menu { border: 1px solid var(--ek-border); border-top: 2px solid var(--ek-text); box-shadow: var(--ek-shadow-md); }
.dl-mega-sidebtn.is-active { background: var(--ek-surface-hover); outline: 1px solid var(--ek-border); }
.dl-mega-sidebtn:hover { background: var(--ek-surface-hover); }
.dl-mcats-subitem:hover { background: var(--ek-primary); color: var(--ek-on-primary); }
.dl-mcats-more:hover { color: var(--ek-text); }

/* Dropdowns */
.dl-dd-menu { border: 1px solid var(--ek-border); border-top: 2px solid var(--ek-text); box-shadow: var(--ek-shadow-md); }
.dl-dd-item:hover { background: var(--ek-surface-hover); color: var(--ek-text); }
.dl-dd-item.is-active { background: var(--ek-surface-hover); font-weight: 700; outline: none; border-left: 2px solid var(--ek-text); }

/* Mobile */
.dl-mdd-item:hover { background: var(--ek-primary); color: var(--ek-on-primary); }
.dl-mdd-item.is-active { background: var(--ek-surface-hover); outline: 1px solid var(--ek-border); }
.dl-qbtn:hover { background: var(--ek-surface-hover); outline-color: var(--ek-border); }
.dl-qbtn.is-active { background: var(--ek-primary); color: var(--ek-on-primary); }



/* ---- @import /assets/css/enka/footer.css ---- */
/* =========================================================
   footer.css - Enka footer styling
   Premium: rustige donkere footer, geen decoratie.
   ========================================================= */

.enka-footer {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark-muted);
  padding: var(--ek-sp-8) 0 0;
  font-size: var(--ek-fs-sm);
  border-top: 1px solid var(--ek-on-dark-line);
  /* GEEN position: relative - anders blokkeert het z-index van .dropdown-menu */
}
.enka-footer a {
  color: var(--ek-on-dark-muted-2);
  text-decoration: none;
  transition: color var(--ek-dur-fast) var(--ek-ease),
              padding-left var(--ek-dur-fast) var(--ek-ease);
}
.enka-footer-links a:hover {
  color: var(--ek-on-dark);
  padding-left: var(--ek-sp-1);
}
.enka-footer a:hover { color: var(--ek-on-dark); }

.enka-footer-brand {
  font-family: var(--ek-font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ek-on-dark);
  margin-bottom: var(--ek-sp-3);
  position: relative;
  display: inline-block;
}
.enka-footer-logo {
  display: inline-block;
  margin-bottom: var(--ek-sp-4);
  text-decoration: none;
}
.enka-footer-logo img {
  max-height: 70px;
  width: auto;
  height: auto;
  display: block;
  /* Logo is wit met zwarte tekst (JPEG zonder transparantie).
     invert(1) maakt zwarte tekst wit + witte achtergrond zwart.
     mix-blend-mode: lighten laat zwarte delen wegvallen tegen donkere footer
     waardoor alleen de witte tekst zichtbaar blijft, zonder zichtbaar kader. */
  filter: invert(1);
  mix-blend-mode: lighten;
  opacity: .95;
  transition: opacity var(--ek-dur-fast) var(--ek-ease);
}
.enka-footer-logo:hover img { opacity: 1; }

.enka-footer-brand::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 32px; height: 2px;
  background: var(--ek-on-dark);
}
.enka-footer-tagline {
  font-size: var(--ek-fs-sm);
  color: var(--ek-on-dark-muted-2);
  line-height: 1.7;
  max-width: 280px;
  margin-top: var(--ek-sp-4);
}
.enka-footer-heading {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-on-dark);
  margin-bottom: var(--ek-sp-4);
}
.enka-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
  font-size: var(--ek-fs-sm);
}
.enka-footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ek-sp-3);
  margin-bottom: var(--ek-sp-2);
  font-size: var(--ek-fs-sm);
}
.enka-footer-contact-row i {
  color: var(--ek-on-dark-muted-2);
  margin-top: var(--ek-sp-1);
  flex-shrink: 0;
  font-size: var(--ek-fs-sm);
}
.enka-footer-divider {
  border: none;
  border-top: 1px solid var(--ek-on-dark-line);
  margin: var(--ek-sp-7) 0 0;
}
.enka-footer-bottom {
  background: var(--ek-ink);
  padding: var(--ek-sp-4) 0;
  font-size: var(--ek-fs-sm);
  color: var(--ek-on-dark-muted-2);
}
.enka-footer-bottom a {
  color: var(--ek-on-dark-muted-2);
  text-decoration: none;
}
.enka-footer-bottom a:hover { color: var(--ek-on-dark); }

/* Mobiele zwevende winkelwagen-knop (FAB) - alleen Enka, alleen mobiel */
.enka-fab-cart {
  position: fixed;
  right: 18px;
  bottom: 76px; /* boven de 'terug naar boven'-knop (bottom:18px, h:46px) */
  z-index: 1081;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--ek-surface-dark);
  color: var(--ek-on-dark);
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: var(--ek-shadow-dark-md);
  transition: transform .15s ease, background .15s ease;
}
.enka-fab-cart:hover,
.enka-fab-cart:focus { color: var(--ek-on-dark); transform: translateY(-2px); }
.enka-fab-cart:active { transform: translateY(0); }
.enka-fab-cart i { font-size: var(--ek-fs-lg); }
.enka-fab-cart .enka-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--ek-sp-1);
  border-radius: var(--ek-r-pill);
  background: var(--ek-danger);
  color: var(--ek-on-danger);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--ek-on-dark);
}
.enka-fab-cart .enka-fab-badge.is-zero { display: none; }
@media (min-width: 992px) { .enka-fab-cart { display: none; } }
/* Op de productpagina schuift de sticky koopbalk onder de FAB door: twee
   winkelwagenknoppen over elkaar, en de FAB dekt de knop af. Zolang die balk
   zichtbaar is, is de FAB overbodig. */
body:has(.pdp-sticky-buy.is-visible) .enka-fab-cart { display: none; }

/* ── Minicart drawer (voorheen inline in inc/enka-footer.php) ─────────────
   Was DutchLine-inkt (#131F3F / rgba(11,18,32,*)) - nu Enka-tokens. */
.enka-minicart-backdrop{
  position:fixed; inset:0; z-index:1099;
  background:var(--ek-scrim);
  opacity:0; transition:opacity var(--ek-dur) var(--ek-ease);
}
.enka-minicart-backdrop.is-open{ opacity:1; }
.enka-minicart{
  position:fixed; top:0; right:0; bottom:0; z-index:1100;
  width:min(400px, 92vw);
  background:var(--ek-surface); color:var(--ek-text);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--ek-dur) var(--ek-ease);
  box-shadow:var(--ek-shadow-lg);
}
.enka-minicart.is-open{ transform:translateX(0); }
.enka-mc-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--ek-sp-4); border-bottom:1px solid var(--ek-border);
}
.enka-mc-title{ font-weight:900; font-size:var(--ek-fs-base); }
.enka-mc-close{
  width:44px; height:44px; border:0; background:transparent;
  font-size:var(--ek-fs-xl); line-height:1; cursor:pointer; color:var(--ek-text);
}
.enka-mc-items{ flex:1; overflow-y:auto; padding:var(--ek-sp-2) var(--ek-sp-4); }
.enka-mc-item{
  display:flex; gap:var(--ek-sp-3); align-items:flex-start;
  padding:var(--ek-sp-3) 0; border-bottom:1px solid var(--ek-border-subtle);
}
.enka-mc-item:last-child{ border-bottom:0; }
.enka-mc-img{
  width:56px; height:56px; flex-shrink:0;
  border:1px solid var(--ek-border); background:var(--ek-surface);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.enka-mc-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.enka-mc-main{ flex:1; min-width:0; }
.enka-mc-name{
  font-size:var(--ek-fs-sm); font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.enka-mc-meta{ font-size:var(--ek-fs-sm); color:var(--ek-text-muted); margin-top:var(--ek-sp-1); }
.enka-mc-line{ font-size:var(--ek-fs-sm); font-weight:800; margin-top:var(--ek-sp-1); }
.enka-mc-remove{
  border:0; background:transparent; color:var(--ek-text-muted-2);
  cursor:pointer; font-size:var(--ek-fs-base); padding:var(--ek-sp-2); flex-shrink:0;
}
.enka-mc-remove:hover{ color:var(--ek-danger); }
.enka-mc-foot{
  padding:var(--ek-sp-4); border-top:1px solid var(--ek-border);
  display:grid; gap:var(--ek-sp-2);
}
.enka-mc-subtotal{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:var(--ek-fs-sm); margin-bottom:var(--ek-sp-1);
}
.enka-mc-subtotal strong{ font-size:var(--ek-fs-lg); font-weight:900; }
.enka-mc-empty{ padding:var(--ek-sp-7) var(--ek-sp-2); text-align:center; color:var(--ek-text-muted-2); font-size:var(--ek-fs-sm); }

/* ── Kleine hulpsels (voorheen style-attrs) ─────────────────────────────── */
.enka-footer-note { font-size: var(--ek-fs-sm); color: var(--ek-on-dark-muted-2); }
.enka-mc-ph { color: var(--ek-border-strong); }



/* ---- @import /assets/css/enka/checkout.css ---- */
/* =========================================================
   checkout.css - Enka checkout flow styling
   ---------------------------------------------------------
   Lokale CSS vars zijn gescoped naar .ek-co-wrap zodat ze
   niet conflicten met tokens.css (.ek-page scope).
   Premium: rustige cards, helder ritme, geen decoratie.
   ========================================================= */

.ek-co-wrap {
  /* Lokale aliases die mappen op de globale tokens */
  --ek-co-ink:        var(--ek-ink-2);
  --ek-co-muted:      var(--ek-text-muted); /* niet via --ek-muted: die wordt hieronder
                                               geredeclareerd -> cyclus -> invalid */
  --ek-co-border:     var(--ek-line);
  --ek-co-border-2:   var(--ek-line-2);
  --ek-co-bg-soft:    var(--ek-surface-2);
  --ek-co-bg:         var(--ek-surface);

  /* Backward-compatibele aliases (oude naamgeving in HTML/CSS) */
  --ek-ink:      var(--ek-co-ink);
  --ek-muted:    var(--ek-co-muted);
  --ek-border:   var(--ek-co-border);
  --ek-bg-soft:  var(--ek-co-bg-soft);

  max-width: 880px;
  margin: 0 auto;
  padding: var(--ek-sp-4) 0 var(--ek-sp-6);
}
.ek-co-wrap.is-narrow { max-width: 720px; }
@media (min-width: 768px) {
  .ek-co-wrap { padding: var(--ek-sp-6) 0 var(--ek-sp-8); }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ek-co-hero {
  margin-bottom: var(--ek-sp-6);
  text-align: left;
}
.ek-co-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-co-muted);
  margin-bottom: var(--ek-sp-2);
}
.ek-co-kicker::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--ek-co-ink);
}
.ek-co-title {
  font-family: var(--ek-font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  color: var(--ek-co-ink);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 var(--ek-sp-2);
}
.ek-co-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  line-height: 1.6;
  max-width: 600px;
}

/* ── Steps ────────────────────────────────────────────────────────────────── */
.ek-co-steps {
  display: flex;
  gap: 0;
  margin-bottom: var(--ek-sp-6);
  border-bottom: 1px solid var(--ek-co-border);
}
.ek-co-step {
  flex: 1;
  padding: var(--ek-sp-4) var(--ek-sp-2);
  text-align: center;
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ek-muted-2);
  position: relative;
}
.ek-co-step.is-active { color: var(--ek-co-ink); }
.ek-co-step.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ek-co-ink);
}
.ek-co-step.is-done { color: var(--ek-success); }
.ek-co-step .num { display: inline-block; margin-right: var(--ek-sp-2); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ek-co-card {
  background: var(--ek-co-bg);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  margin-bottom: var(--ek-sp-4);
  overflow: hidden;
}
.ek-co-card-head {
  padding: var(--ek-sp-4) var(--ek-sp-5);
  border-bottom: 1px solid var(--ek-co-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ek-co-card-head h2 {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ek-co-ink);
}
.ek-co-card-body { padding: var(--ek-sp-5) var(--ek-sp-5); }
/* -- Samengesteld product: een blok in plaats van losse regels ------------- */
.ek-co-bundle {
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  margin: var(--ek-sp-4) 0;
  overflow: hidden;
}
.ek-co-bundle-head {
  display: flex; align-items: center; gap: var(--ek-sp-3);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  background: var(--ek-co-bg-soft);
  border-bottom: 1px solid var(--ek-co-border);
}
.ek-co-bundle-head i { color: var(--ek-co-ink); }
.ek-co-bundle-title { flex: 1; min-width: 0; }
.ek-co-bundle-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: .6;
}
.ek-co-bundle-name {
  font-size: var(--ek-fs-sm); font-weight: 700; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ek-co-bundle-sum { text-align: right; white-space: nowrap; font-weight: 800; }
.ek-co-bundle-sum small { display: block; font-weight: 500; opacity: .6; font-size: .7rem; }
.ek-co-bundle-skip {
  display: flex; align-items: flex-start; gap: var(--ek-sp-2);
  padding: var(--ek-sp-2) var(--ek-sp-4);
  border-bottom: 1px solid var(--ek-co-border);
  font-size: .8rem; line-height: 1.45; opacity: .8;
}
.ek-co-bundle-skip i { margin-top: 2px; }
.ek-co-bundle-body { padding: 0 var(--ek-sp-4); }
.ek-co-bundle-body .ek-co-item:last-child { border-bottom: none; }

/* ── Item rij in cart/overview ────────────────────────────────────────────── */
.ek-co-item {
  display: flex;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-4) 0;
  border-bottom: 1px solid var(--ek-co-border);
  align-items: flex-start;
}
.ek-co-item:last-child { border-bottom: none; }
.ek-co-item-img {
  width: 72px; height: 72px;
  object-fit: contain;
  background: var(--ek-co-bg-soft);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  flex-shrink: 0;
  padding: var(--ek-sp-1);
}
.ek-co-item-info { flex: 1; min-width: 0; }
.ek-co-item-name {
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  color: var(--ek-co-ink);
  line-height: 1.4;
  margin-bottom: var(--ek-sp-1);
}
.ek-co-item-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  line-height: 1.5;
}
.ek-co-item-price {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 900;
  color: var(--ek-co-ink);
  white-space: nowrap;
  margin-left: auto;
  padding-left: var(--ek-sp-3);
}
.ek-co-item-actions {
  display: flex;
  gap: var(--ek-sp-2);
  align-items: center;
  margin-top: var(--ek-sp-2);
  flex-wrap: wrap;
}
.ek-co-qty {
  width: 64px;
  padding: var(--ek-sp-2) var(--ek-sp-2);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-base); /* >=16px: voorkomt iOS zoom-on-focus */
  text-align: center;
  background: var(--ek-co-bg);
}
/* Touch targets >=44px op touch-apparaten */
@media (pointer: coarse) {
  .ek-co-qty,
  .ek-co-btn-sm { min-height: 44px; }
}
.ek-co-qty:focus {
  outline: none;
  border-color: var(--ek-co-ink);
}

/* ── Totalen ──────────────────────────────────────────────────────────────── */
.ek-co-totals {
  padding-top: var(--ek-sp-4);
  border-top: 1px solid var(--ek-co-border);
  margin-top: var(--ek-sp-2);
}
.ek-co-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--ek-sp-1) 0;
  font-size: var(--ek-fs-sm);
}
.ek-co-total-row.is-main {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-xl);
  font-weight: 900;
  color: var(--ek-co-ink);
  padding-top: var(--ek-sp-2);
  margin-top: var(--ek-sp-1);
}
.ek-co-total-row .lbl { color: var(--ek-co-muted); }
.ek-co-total-row.is-main .lbl {
  color: var(--ek-co-ink);
  font-size: var(--ek-fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ek-co-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-4) var(--ek-sp-6);
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ek-r);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease),
              opacity var(--ek-dur-fast) var(--ek-ease);
  font-family: inherit;
}
.ek-co-btn-dark {
  background: var(--ek-co-ink);
  color: var(--ek-on-dark);
  border-color: var(--ek-co-ink);
}
.ek-co-btn-dark:hover {
  background: var(--ek-ink);
  color: var(--ek-on-dark);
}
.ek-co-btn-dark:disabled { opacity: .4; cursor: not-allowed; }

.ek-co-btn-ghost {
  background: var(--ek-co-bg);
  color: var(--ek-co-ink);
  border-color: var(--ek-co-border);
}
.ek-co-btn-ghost:hover {
  border-color: var(--ek-co-ink);
  color: var(--ek-co-ink);
}
.ek-co-btn-danger {
  background: var(--ek-co-bg);
  color: var(--ek-danger);
  border-color: color-mix(in srgb, var(--ek-danger) 24%, transparent);
}
.ek-co-btn-danger:hover {
  background: var(--ek-danger);
  color: var(--ek-on-dark);
  border-color: var(--ek-danger);
}
.ek-co-btn-sm {
  padding: var(--ek-sp-2) var(--ek-sp-4);
  font-size: var(--ek-fs-xs);
}

/* ── Method picker ────────────────────────────────────────────────────────── */
.ek-co-methods {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
}
.ek-co-method {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-4) var(--ek-sp-5);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  background: var(--ek-co-bg);
  text-decoration: none;
  color: var(--ek-co-ink);
  transition: border-color var(--ek-dur-fast) var(--ek-ease),
              transform var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-method:hover {
  border-color: var(--ek-co-ink);
  transform: translateX(2px);
  color: var(--ek-co-ink);
}
.ek-co-method-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-co-bg-soft);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-lg);
  color: var(--ek-co-ink);
}
.ek-co-method-text { flex: 1; min-width: 0; }
.ek-co-method-label {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.ek-co-method-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  margin-top: var(--ek-sp-1);
}
.ek-co-method-arrow {
  color: var(--ek-muted-2);
  font-size: var(--ek-fs-sm);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.ek-co-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ek-sp-4);
  margin-bottom: var(--ek-sp-4);
}
.ek-co-field { flex: 1 1 200px; }
.ek-co-field.is-full { flex: 1 1 100%; }
.ek-co-field.is-quarter { flex: 1 1 140px; }
.ek-co-field label {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-co-muted);
  margin-bottom: var(--ek-sp-2);
}
.ek-co-field label .req { color: var(--ek-danger); }
/* Referentieveld op de bestelbevestiging: label-toevoeging en hulptekst. */
.ek-co-field label .ek-co-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .75;
}
.ek-co-help {
  margin-top: var(--ek-sp-2);
  font-size: var(--ek-fs-xs);
  color: var(--ek-co-muted);
}
.ek-co-field input,
.ek-co-field select {
  width: 100%;
  padding: var(--ek-sp-3) var(--ek-sp-4);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-base); /* >=16px: voorkomt iOS zoom-on-focus */
  background: var(--ek-co-bg);
  color: var(--ek-co-ink);
  transition: border-color var(--ek-dur-fast) var(--ek-ease);
  font-family: inherit;
}
.ek-co-field input:focus,
.ek-co-field select:focus {
  outline: none;
  border-color: var(--ek-co-ink);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.ek-co-alert {
  padding: var(--ek-sp-4) var(--ek-sp-4);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-sm);
  line-height: 1.55;
  margin-bottom: var(--ek-sp-4);
  background: var(--ek-danger-subtle);
  color: var(--ek-danger-hover);
  border: 1px solid color-mix(in srgb, var(--ek-danger) 24%, transparent);
}

/* ── Payment summary card ─────────────────────────────────────────────────── */
.ek-co-pay-card {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-4) var(--ek-sp-5);
  background: var(--ek-co-bg-soft);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  margin-bottom: var(--ek-sp-5);
}
.ek-co-pay-icon {
  font-size: 28px;
  color: var(--ek-ideal);
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-co-bg);
  border-radius: var(--ek-r);
  border: 1px solid var(--ek-co-border);
}
.ek-co-pay-text strong {
  display: block;
  font-size: var(--ek-fs-base);
  font-weight: 800;
  color: var(--ek-co-ink);
  margin-bottom: var(--ek-sp-1);
}
.ek-co-pay-text span {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
}

/* ── Address summary ──────────────────────────────────────────────────────── */
.ek-co-addr {
  font-size: var(--ek-fs-sm);
  line-height: 1.6;
}
.ek-co-addr .name {
  font-weight: 700;
  color: var(--ek-co-ink);
}
.ek-co-addr .email {
  color: var(--ek-co-muted);
  font-size: var(--ek-fs-sm);
  margin-top: var(--ek-sp-1);
}

/* ── Success ──────────────────────────────────────────────────────────────── */
.ek-co-success {
  text-align: center;
  padding: var(--ek-sp-7) var(--ek-sp-5);
}
.ek-co-success-icon {
  width: 80px; height: 80px;
  margin: 0 auto var(--ek-sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-success-subtle);
  color: var(--ek-success);
  border-radius: 50%;
  font-size: 38px;
}
.ek-co-success-icon.is-pending {
  background: var(--ek-warning-subtle);
  color: var(--ek-warning);
}
.ek-co-success-icon.is-failed {
  background: var(--ek-danger-subtle);
  color: var(--ek-danger);
}
.ek-co-success-title {
  font-family: var(--ek-font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ek-co-ink);
  margin: 0 0 var(--ek-sp-2);
}
.ek-co-success-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  max-width: 480px;
  margin: 0 auto var(--ek-sp-6);
  line-height: 1.6;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ek-co-empty {
  text-align: center;
  padding: var(--ek-sp-7) var(--ek-sp-5);
  color: var(--ek-co-muted);
}
.ek-co-empty i {
  font-size: 38px;
  opacity: .25;
  display: block;
  margin-bottom: var(--ek-sp-4);
}
.ek-co-empty p {
  margin-bottom: var(--ek-sp-5);
  font-size: var(--ek-fs-sm);
}

/* ── Footer actions row ───────────────────────────────────────────────────── */
.ek-co-actions {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--ek-sp-3);
  flex-wrap: wrap;
  margin-top: var(--ek-sp-5);
}
.ek-co-actions .ek-co-btn { width: 100%; }
@media (min-width: 576px) {
  .ek-co-actions {
    flex-direction: row;
    align-items: center;
  }
  .ek-co-actions .ek-co-btn { width: auto; }
}

/* ══ Phase 4: componenten die voorheen handgebouwd in de views zaten ═══════ */

/* ── Warning-card (op rekening n.b. / impersonatie) - was 2x inline amber ── */
.ek-co-card--warning {
  border: 1px solid color-mix(in srgb, var(--ek-warning) 35%, transparent);
  background: var(--ek-warning-subtle);
}
.ek-co-card--warning .ek-co-card-body {
  color: var(--ek-warning-hover);
  font-size: var(--ek-fs-sm);
}

/* ── Waarschuwingstint in item-subregel (lage voorraad) ───────────────────── */
.ek-co-warn { color: var(--ek-warning); font-weight: 600; }

/* ── Notitie-card body (herroepingsrecht) ─────────────────────────────────── */
.ek-co-card-body.is-note {
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
  line-height: 1.6;
}
.ek-co-note-head {
  font-weight: 800;
  color: var(--ek-co-ink);
  margin-bottom: var(--ek-sp-1);
}

/* ── Voorwaarden-checkbox (class bestond al, stijl zat in style-attrs) ────── */
.ek-co-terms {
  display: flex;
  gap: var(--ek-sp-2);
  align-items: flex-start;
  margin: 0 0 var(--ek-sp-4);
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
  cursor: pointer;
}
.ek-co-terms input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--ek-primary);
}
.ek-co-terms a { text-decoration: underline; color: inherit; }

/* ── Verzendmethode-picker (voorheen inline <style> in confirm.php) ───────── */
.ek-co-ship-grid { display: grid; gap: var(--ek-sp-2); grid-template-columns: 1fr; }
@media (min-width: 576px) { .ek-co-ship-grid { grid-template-columns: 1fr 1fr; } }
.ek-co-ship-opt {
  display: flex;
  gap: var(--ek-sp-3);
  padding: var(--ek-sp-4);
  border: 2px solid var(--ek-line-2);
  border-radius: var(--ek-r);
  cursor: pointer;
  background: var(--ek-surface);
  transition: border-color var(--ek-dur-fast) var(--ek-ease),
              background var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-ship-opt:hover { border-color: var(--ek-text-muted-2); }
.ek-co-ship-opt.is-active { border-color: var(--ek-ink); background: var(--ek-primary-subtle); }
.ek-co-ship-opt input[type="radio"] { display: none; }
.ek-co-ship-icon {
  width: 44px; height: 44px;
  border-radius: var(--ek-r-sm);
  background: var(--ek-primary-subtle);
  color: var(--ek-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ek-fs-lg);
  flex-shrink: 0;
}
.ek-co-ship-opt.is-active .ek-co-ship-icon { background: var(--ek-ink); color: var(--ek-on-primary); }
.ek-co-ship-body { flex: 1; min-width: 0; }
.ek-co-ship-title { font-weight: 800; color: var(--ek-ink); font-size: var(--ek-fs-base); }
.ek-co-ship-sub { font-size: var(--ek-fs-sm); color: var(--ek-muted); line-height: 1.45; margin-top: var(--ek-sp-1); }
.ek-co-pickup-info {
  margin-top: var(--ek-sp-4);
  padding: var(--ek-sp-4);
  background: var(--ek-surface-2);
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
}
.ek-co-pickup-head { font-weight: 700; color: var(--ek-ink); font-size: var(--ek-fs-sm); }
.ek-co-pickup-line { margin-top: var(--ek-sp-1); }

/* ── Subtekst/hint onder item (voorheen style-attr) ───────────────────────── */
.ek-co-hint { font-size: var(--ek-fs-sm); color: var(--ek-co-muted); margin-top: var(--ek-sp-2); }

/* =========================================================
   SPLIT-LAYOUT + VOORTGANG  (visuele upgrade 08-09-2026)
   ---------------------------------------------------------
   De checkout stond in een kolom van 720-880px midden op een
   scherm van 1440px: veel dode ruimte en de klant moest naar
   beneden scrollen om te zien wat hij betaalt. Nu links de
   stap zelf, rechts een meelopende samenvatting die op alle
   drie de stappen hetzelfde is.
   ========================================================= */

/* Geen eigen max-width: de checkout volgde 1180px terwijl de rest van de site
   .container-max (1440px) gebruikt, dus stond hij als smal eiland onder een
   navigatie die wel doorliep. */
.ek-co-wrap.is-split { max-width: none; }

.ek-co-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ek-sp-5);
  align-items: start;
}
@media (min-width: 992px) {
  .ek-co-split { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--ek-sp-6); }
}
@media (min-width: 1280px) {
  .ek-co-split { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--ek-sp-7); }
}

/* Lege winkelwagen: dan is er geen zijkolom (zie de aside in cart.php), en
   een kaart die op tweederde van de breedte ophoudt met niets ernaast ziet
   eruit als een renderfout. Bij is-single vervalt de tweede kolom op elke
   breedte. */
.ek-co-split.is-single { grid-template-columns: minmax(0, 1fr); }

.ek-co-main { min-width: 0; }

/* Samenvatting. Op mobiel bovenaan (order: -1 zou de CTA wegduwen,
   dus juist NIET: de klant scrollt op mobiel gewoon door naar de
   knop onder de stap). Op desktop plakt hij mee. */
.ek-co-aside { min-width: 0; }
@media (min-width: 992px) {
  /* NIET de hele kolom laten meeplakken: die kan hoger worden dan het
     scherm en dan blijft de onderkant onbereikbaar. Alleen het blok met
     het totaal en de knop plakt, de artikelenlijst scrolt gewoon mee. */
  /* De sitekop is zelf sticky (~240px op Enka-desktop), dus het blok moet
     daaronder plakken. assets/js/enka-checkout.js meet die hoogte en zet
     --ek-co-sticky-top; de fallback hier houdt het werkbaar zonder JS. */
  .ek-co-sum-totals {
    position: sticky;
    top: var(--ek-co-sticky-top, 260px);
    /* Het artikelenblok staat NA dit blok in de DOM en schuift er dus
       overheen zodra dit blijft plakken. Een eigen stapelcontext plus een
       dekkende achtergrond houdt het leesbaar. */
    z-index: 2;
    background: var(--ek-surface);
  }
}

/* ── Voortgang ────────────────────────────────────────────
   De oude balk toonde "01 1. Gegevens" - twee keer hetzelfde
   nummer - en had geen lijn, dus je zag niet dat het een pad
   was. Nu bolletjes met een verbindingslijn die meekleurt.  */
.ek-co-progress {
  display: flex;
  margin: 0 0 var(--ek-sp-6);
  padding: 0;
  list-style: none;
  counter-reset: ekstep;
}
.ek-co-pstep {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 38px;
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ek-text-muted-2);
  min-width: 0;
}
/* De lijn loopt van het midden van dit bolletje naar het volgende. */
.ek-co-pstep::before {
  content: '';
  position: absolute;
  top: 13px; left: 50%; right: -50%;
  height: 2px;
  background: var(--ek-border-strong);
}
.ek-co-pstep:last-child::before { display: none; }
.ek-co-pstep .dot {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  /* Bewust GEEN cirkel: enka/sharp-edges.css cappt elke radius met !important
     op 4px, dus een pill komt daar toch vierkant uit. Scherpe hoeken zijn de
     Enka-huisstijl, dus vierkant is hier een keuze en geen ongelukje. */
  border: 2px solid var(--ek-border-strong);
  background: var(--ek-surface);
  color: var(--ek-text-muted-2);
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  line-height: 24px;
  z-index: 1;
  transition: background var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease),
              color var(--ek-dur) var(--ek-ease);
}
.ek-co-pstep .lbl { display: block; padding: 0 var(--ek-sp-1); }

.ek-co-pstep.is-done { color: var(--ek-text); }
.ek-co-pstep.is-done::before { background: var(--ek-primary); }
.ek-co-pstep.is-done .dot {
  background: var(--ek-primary);
  border-color: var(--ek-primary);
  color: var(--ek-on-primary);
}
.ek-co-pstep.is-active { color: var(--ek-text); }
.ek-co-pstep.is-active .dot {
  border-color: var(--ek-primary);
  color: var(--ek-text);
  box-shadow: 0 0 0 4px var(--ek-primary-subtle);
}
/* Afgeronde stappen zijn klikbaar terug, actieve/komende niet. */
.ek-co-pstep a { color: inherit; text-decoration: none; display: block; }
.ek-co-pstep a:hover .lbl { text-decoration: underline; }

@media (max-width: 575px) {
  .ek-co-pstep { font-size: var(--ek-fs-xs); letter-spacing: .04em; padding-top: 34px; }
  .ek-co-pstep .dot { width: 24px; height: 24px; line-height: 20px; font-size: var(--ek-fs-xs); }
  .ek-co-pstep::before { top: 11px; }
}

/* ── Samenvattingskaart in de zijkolom ───────────────────── */
.ek-co-sum {
  background: var(--ek-surface);
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-r);
  overflow: hidden;
}
.ek-co-sum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-4) var(--ek-sp-5);
  border-bottom: 1px solid var(--ek-border);
}
.ek-co-sum-head h2 {
  margin: 0;
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-base);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-text);
}
.ek-co-sum-count {
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
  white-space: nowrap;
}
.ek-co-sum-body { padding: var(--ek-sp-3) var(--ek-sp-5); }

/* Compacte regel: thumb, naam + aantal, prijs. */
.ek-co-sum-item {
  display: flex;
  gap: var(--ek-sp-3);
  align-items: center;
  padding: var(--ek-sp-3) 0;
  border-bottom: 1px solid var(--ek-border-subtle);
}
.ek-co-sum-item:last-child { border-bottom: 0; }
.ek-co-sum-thumb {
  position: relative;
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-r);
  background: var(--ek-surface-hover);
  object-fit: contain;
  padding: 3px;
}
.ek-co-sum-info { flex: 1; min-width: 0; }
.ek-co-sum-name {
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ek-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ek-co-sum-qty {
  font-size: var(--ek-fs-xs);
  color: var(--ek-text-muted);
  margin-top: 2px;
}
.ek-co-sum-price {
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  white-space: nowrap;
  color: var(--ek-text);
}
/* ── Totalen in de zijkolom ──────────────────────────────── */
.ek-co-sum .ek-co-totals { margin: 0; padding: var(--ek-sp-4) var(--ek-sp-5); border-top: 1px solid var(--ek-border); }
/* Eerste blok onder de kop: die heeft zelf al een onderrand. */
.ek-co-sum .ek-co-totals.is-first { border-top: 0; }
.ek-co-sum-cta { padding: 0 var(--ek-sp-5) var(--ek-sp-5); }
.ek-co-sum-cta .ek-co-btn { width: 100%; }
.ek-co-sum-cta .ek-co-btn + .ek-co-btn { margin-top: var(--ek-sp-2); }

/* ── Formuliergroepen (stap gegevens) ────────────────────── */
.ek-co-fieldset { border: 0; margin: 0 0 var(--ek-sp-5); padding: 0; }
.ek-co-fieldset:last-of-type { margin-bottom: 0; }
.ek-co-legend {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-2);
  width: 100%;
  margin: 0 0 var(--ek-sp-4);
  padding: 0 0 var(--ek-sp-2);
  border-bottom: 1px solid var(--ek-border-subtle);
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ek-text);
}
.ek-co-legend i { color: var(--ek-text-muted); }

/* ── Akkoordregel: was een kale 13px-checkbox ────────────── */
.ek-co-terms {
  display: flex;
  align-items: flex-start;
  gap: var(--ek-sp-3);
  padding: var(--ek-sp-4);
  margin-bottom: var(--ek-sp-4);
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-r);
  background: var(--ek-surface-hover);
  font-size: var(--ek-fs-sm);
  line-height: 1.45;
  cursor: pointer;
  transition: border-color var(--ek-dur) var(--ek-ease);
}
.ek-co-terms:hover { border-color: var(--ek-border-strong); }
.ek-co-terms:focus-within { border-color: var(--ek-primary); box-shadow: 0 0 0 3px var(--ek-primary-subtle); }
.ek-co-terms input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--ek-primary);
  cursor: pointer;
}
.ek-co-terms a { color: var(--ek-text); text-decoration: underline; }

/* ── Betaalkaart compacter ───────────────────────────────── */
.ek-co-pay-card { align-items: center; }

/* =========================================================
   DONKERE KOPBAND  (feedback Mert 08-09-2026)
   ---------------------------------------------------------
   De kop was kicker + titel + subregel + voortgangsbalk los
   op de grijze pagina-achtergrond: geen vlak, geen scheiding,
   geen hierarchie. Nu een volle band over de paginabreedte,
   in de merkkleur via .dl-hero-dark (Enka = zwart, zie
   assets/css/hero.css) - net als de hero op de andere
   dealer- en adminpagina's.
   ========================================================= */

.ek-co-head {
  /* Full-bleed: de band loopt door tot de rand, de inhoud niet. */
  margin-bottom: var(--ek-sp-6);
  padding: var(--ek-sp-6) 0 0;
}
@media (min-width: 768px) {
  .ek-co-head { padding-top: var(--ek-sp-7); }
}
.ek-co-head .ek-co-hero { margin-bottom: var(--ek-sp-6); }

/* Tekst op donker. .ek-co-kicker/.ek-co-sub gebruiken --ek-text-muted
   rechtstreeks en niet .text-muted, dus hero.css pakt ze niet automatisch. */
.ek-co-head .ek-co-kicker         { color: var(--ek-on-dark-muted); }
.ek-co-head .ek-co-kicker::before { background: var(--ek-on-dark-muted-2); }
.ek-co-head .ek-co-title          { color: var(--ek-on-dark); }
.ek-co-head .ek-co-sub            { color: var(--ek-on-dark-muted); }

/* Voortgangsbalk in inverse. Lijn, markers en labels moeten mee, anders
   staat er een lichtgrijze balk op een zwart vlak. */
.ek-co-head .ek-co-progress { margin-bottom: 0; padding-bottom: var(--ek-sp-6); }
.ek-co-head .ek-co-pstep            { color: var(--ek-on-dark-muted-2); }
.ek-co-head .ek-co-pstep::before    { background: var(--ek-on-dark-line); }
.ek-co-head .ek-co-pstep .dot {
  background: transparent;
  border-color: var(--ek-on-dark-muted-2);
  color: var(--ek-on-dark-muted-2);
}
.ek-co-head .ek-co-pstep.is-done         { color: var(--ek-on-dark); }
.ek-co-head .ek-co-pstep.is-done::before { background: var(--ek-on-dark); }
.ek-co-head .ek-co-pstep.is-done .dot {
  background: var(--ek-on-dark);
  border-color: var(--ek-on-dark);
  color: var(--ek-text);
}
.ek-co-head .ek-co-pstep.is-active { color: var(--ek-on-dark); }
.ek-co-head .ek-co-pstep.is-active .dot {
  background: transparent;
  border-color: var(--ek-on-dark);
  color: var(--ek-on-dark);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.ek-co-head .ek-co-pstep a:hover .lbl { text-decoration-color: var(--ek-on-dark); }

/* De wrap zat op de band vast met eigen bovenpadding - niet meer nodig. */
.ek-co-wrap.is-split { padding-top: 0; }

/* =========================================================
/* =========================================================
   WEBSHOP-PASS  (feedback Mert 08-09-2026)
   ---------------------------------------------------------
   Vorige ronde loste ruimte op door dingen weg te drukken:
   koppen eruit, lijsten inklappen, hoogtes aftoppen. Dat maakt
   het rustig maar leeg. Deze ronde de andere kant op - grotere
   productbeelden, echte plus/min-steppers, voorraadstatus per
   regel, zichtbare USP-band en betaallogo's.
   ========================================================= */
/* ── Productregel: groter beeld, meer lucht ──────────────── */
.ek-co-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--ek-sp-4);
  align-items: start;
  padding: var(--ek-sp-5) 0;
  border-bottom: 1px solid var(--ek-border-subtle);
}
.ek-co-item:last-child { border-bottom: 0; }
@media (max-width: 575px) {
  .ek-co-item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--ek-sp-3); }
}
.ek-co-item-img {
  width: 96px; height: 96px;
  object-fit: contain;
  background: var(--ek-surface-hover);
  border: 1px solid var(--ek-border);
  padding: var(--ek-sp-2);
  transition: border-color var(--ek-dur) var(--ek-ease);
}
@media (max-width: 575px) { .ek-co-item-img { width: 72px; height: 72px; } }
.ek-co-item:hover .ek-co-item-img { border-color: var(--ek-border-strong); }

/* ── Doorgezette bestellingen (Hub) ───────────────────────────────────────────
   Per bestelling een uitklapbaar blok met de artikelen die eraan hangen. Ook
   binnen een bestaande kaart te gebruiken (referentieveld op /checkout/confirm),
   vandaar de losse .ek-co-hub-title. */
.ek-co-hub-title {
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-co-muted);
  margin: var(--ek-sp-4) 0 var(--ek-sp-2);
}
.ek-co-hub-intro {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  margin-bottom: var(--ek-sp-3);
  line-height: 1.5;
}
.ek-co-hub-item {
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  margin-bottom: var(--ek-sp-2);
  background: var(--ek-co-bg);
}
.ek-co-hub-item:last-child { margin-bottom: 0; }
.ek-co-hub-item > summary {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-3);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  cursor: pointer;
  list-style: none;
}
.ek-co-hub-item > summary::-webkit-details-marker { display: none; }
.ek-co-hub-item > summary:focus-visible { outline: 2px solid var(--ek-co-ink); outline-offset: -2px; }
.ek-co-hub-nr {
  font-weight: 700;
  color: var(--ek-co-ink);
  font-size: var(--ek-fs-sm);
}
.ek-co-hub-meta {
  font-size: var(--ek-fs-xs);
  color: var(--ek-co-muted);
  white-space: nowrap;
}
/* Chevron helemaal rechts, en gedraaid zodra het blok open staat. Twee klassen
   in de selector omdat FontAwesome zijn eigen display/transform vanuit een
   inline stylesheet zet - een enkele .fa-chevron-down verliest dat gevecht. */
.ek-co-hub-item .ek-co-hub-chev {
  margin-left: auto;
  font-size: .8em;
  color: var(--ek-co-muted);
  transition: transform var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-hub-item[open] .ek-co-hub-chev { transform: rotate(180deg); }
.ek-co-hub-list {
  margin: 0;
  padding: 0 var(--ek-sp-4) var(--ek-sp-3);
  list-style: none;
  border-top: 1px solid var(--ek-co-border);
}
.ek-co-hub-list li {
  display: flex;
  align-items: baseline;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-2) 0;
  font-size: var(--ek-fs-sm);
  border-bottom: 1px solid var(--ek-co-border);
}
.ek-co-hub-list li:last-child { border-bottom: 0; }
.ek-co-hub-list li:first-child { padding-top: var(--ek-sp-3); }
.ek-co-hub-qty { font-weight: 700; color: var(--ek-co-ink); flex: 0 0 auto; }
.ek-co-hub-name { color: var(--ek-co-ink); }
.ek-co-hub-sku {
  margin-left: auto;
  font-size: var(--ek-fs-xs);
  color: var(--ek-co-muted);
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .ek-co-hub-item > summary { flex-wrap: wrap; gap: var(--ek-sp-2); }
  .ek-co-hub-sku { margin-left: 0; flex-basis: 100%; }
}

/* Herkomst van een regel: het bestelnummer van de shop waarvan de Hub deze
   regel heeft doorgezet. Staat boven de productnaam omdat het de regels van
   twee bestellingen in dezelfde winkelwagen scheidt. */
.ek-co-item-origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ek-sp-2);
  padding: 2px 8px;
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  background: var(--ek-co-bg-soft);
  font-size: var(--ek-fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ek-co-muted);
}
.ek-co-item-origin strong { color: var(--ek-co-ink); letter-spacing: 0; }
.ek-co-item-origin i { font-size: .9em; }

.ek-co-item-name {
  font-size: var(--ek-fs-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ek-text);
  margin-bottom: var(--ek-sp-1);
}
.ek-co-item-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
  line-height: 1.5;
}

/* Voorraadstatus per regel - een webshop vertelt of het er ligt. */
.ek-co-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  margin-top: var(--ek-sp-2);
  font-size: var(--ek-fs-sm);
  font-weight: 600;
}
.ek-co-stock::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: var(--ek-r-pill);
  background: currentColor;
  flex: 0 0 8px;
}
.ek-co-stock.is-ok    { color: var(--ek-success); }
.ek-co-stock.is-low   { color: var(--ek-warning); }
.ek-co-stock.is-none  { color: var(--ek-danger); }

/* ── Aantal-stepper: - [n] + ─────────────────────────────
   Verving een los nummerveld met een "BIJWERKEN"-knop ernaast.
   Dat was de meest gedateerde plek van de hele pagina. */
.ek-co-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-3);
  margin-top: var(--ek-sp-3);
  flex-wrap: wrap;
}
.ek-co-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ek-border-strong);
  background: var(--ek-surface);
  overflow: hidden;
}
.ek-co-stepper button {
  width: 38px;
  border: 0;
  background: none;
  color: var(--ek-text);
  font-size: var(--ek-fs-base);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-stepper button:hover:not(:disabled) { background: var(--ek-surface-hover); }
.ek-co-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.ek-co-stepper .ek-co-qty {
  width: 48px;
  border: 0;
  border-left: 1px solid var(--ek-border);
  border-right: 1px solid var(--ek-border);
  text-align: center;
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  padding: var(--ek-sp-2) 0;
  background: none;
  color: var(--ek-text);
  -moz-appearance: textfield;
}
.ek-co-stepper .ek-co-qty::-webkit-outer-spin-button,
.ek-co-stepper .ek-co-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ek-co-stepper:focus-within { border-color: var(--ek-primary); box-shadow: 0 0 0 3px var(--ek-primary-subtle); }

/* Verwijderen als rustige icoonknop, niet als rode blokknop. */
.ek-co-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  border: 0;
  background: none;
  padding: var(--ek-sp-2);
  color: var(--ek-text-muted);
  font-size: var(--ek-fs-sm);
  cursor: pointer;
  transition: color var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-remove:hover { color: var(--ek-danger); }

/* Prijskolom */
.ek-co-item-price {
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  white-space: nowrap;
  text-align: right;
  color: var(--ek-text);
}
.ek-co-item-price small {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 500;
  color: var(--ek-text-muted);
  margin-top: 2px;
}
@media (max-width: 575px) {
  .ek-co-item-price { grid-column: 2; text-align: left; margin-top: var(--ek-sp-2); }
}
/* ── Mobiele afrekenbalk ─────────────────────────────────
   Op mobiel staat de knop onderaan een lange pagina. Deze balk
   houdt het totaal en de actie altijd binnen duimbereik. */
.ek-co-mobilebar { display: none; }
@media (max-width: 991px) {
  .ek-co-mobilebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--ek-sp-4);
    padding: var(--ek-sp-3) var(--ek-sp-4);
    background: var(--ek-surface);
    border-top: 1px solid var(--ek-border);
    box-shadow: 0 -4px 20px rgba(10,10,10,.08);
    padding-bottom: calc(var(--ek-sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .ek-co-mobilebar-total { flex: 0 0 auto; line-height: 1.15; }
  .ek-co-mobilebar-total .lbl {
    display: block;
    font-size: var(--ek-fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ek-text-muted);
  }
  .ek-co-mobilebar-total .amt {
    font-family: var(--ek-font-display);
    font-size: var(--ek-fs-lg);
    font-weight: 800;
  }
  .ek-co-mobilebar .ek-co-btn { flex: 1; }
  /* Ruimte onder de pagina zodat de balk niets afdekt. */
  body.is-enka .ek-co-wrap.is-split { padding-bottom: 88px; }
}

/* =========================================================
   SAMENVATTING IN TWEE BLOKKEN  (feedback Mert 08-09-2026)
   ---------------------------------------------------------
   Was een kolom met een afgetopte, intern scrollende lijst.
   Een scrollvak binnen een pagina die zelf al scrolt is een
   noodgreep: het verbergt regels en het voelt als een venster
   in een venster. Nu twee losse blokken:

     1. artikelen  - mag zo lang worden als hij is, scrolt mee
     2. totaal+knop - plakt mee, dus altijd bij de hand

   Zo hoeft er niets ingeklapt, afgetopt of weggeschoven te
   worden en blijft de knop toch bereikbaar bij 30 producten.
   ========================================================= */

/* Het artikelenblok staat ONDER het totaalblok, dus de ruimte hoort erboven. */
.ek-co-sum-totals { margin-bottom: var(--ek-sp-4); }

/* De artikelenlijst heeft geen dak meer nodig. */
.ek-co-sum-list .ek-co-sum-items { max-height: none; overflow: visible; }

/* "Winkelwagen aanpassen" onder de lijst: iets vergeten los je op in de
   winkelwagen, niet door hier een tweede winkelwagen na te bouwen. */
.ek-co-sum-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  margin-top: var(--ek-sp-3);
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  color: var(--ek-text-muted);
  text-decoration: none;
  transition: color var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-sum-edit:hover { color: var(--ek-text); text-decoration: underline; }
.ek-co-sum-edit i { font-size: var(--ek-fs-xs); }

/* Het totaalblok heeft geen kop, dus de eerste rand mag weg. */
.ek-co-sum-totals .ek-co-sum-body { padding-bottom: 0; }
.ek-co-sum-totals .ek-co-sum-body:empty { display: none; }

/* =========================================================


/* Niet-beschikbare verzendmethode: omkaderde melding in plaats van de optie
   stil weglaten. Zonder dit vraagt de klant zich af waarom hij niet kan
   kiezen. Rood-getint want het is een beperking, geen tip. */
.ek-co-ship-off {
  display: flex;
  align-items: flex-start;
  gap: var(--ek-sp-3);
  margin-bottom: var(--ek-sp-4);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  border: 1px solid var(--ek-danger);
  background: var(--ek-danger-subtle);
  color: var(--ek-danger);
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  line-height: 1.4;
}
.ek-co-ship-off i { margin-top: 2px; flex: 0 0 auto; }

/* Akkoordregel wordt groen zodra hij is aangevinkt: een bevestiging dat die
   verplichte stap gezet is. :has() werkt in alle huidige browsers; zonder
   ondersteuning blijft de regel simpelweg neutraal, dus geen JS nodig. */
.ek-co-terms:has(input[type="checkbox"]:checked) {
  border-color: var(--ek-success);
  background: var(--ek-success-subtle);
  color: var(--ek-success);
}
.ek-co-terms:has(input[type="checkbox"]:checked) a {
  color: var(--ek-success);
  text-decoration-color: currentColor;
}
.ek-co-terms input[type="checkbox"] { accent-color: var(--ek-primary); }
.ek-co-terms:has(input[type="checkbox"]:checked) input[type="checkbox"] {
  accent-color: var(--ek-success);
}

/* Het losse vinkje rechts. Staat er standaard niet: zonder :has()-ondersteuning
   zou het anders altijd zichtbaar zijn en dus liegen over een vinkje dat de
   klant nog moet zetten.

   De selector is bewust .ek-co-terms .ek-co-terms-tick en niet alleen
   .ek-co-terms-tick: FontAwesome zet `display: var(--fa-display, inline-block)`
   op .fa-solid vanuit een INLINE stylesheet, die dus na onze bundle komt. Bij
   gelijke specificiteit wint FA dan op documentvolgorde en stond het vinkje
   altijd aan. Een tweede klasse ervoor is genoeg; geen !important nodig. */
.ek-co-terms .ek-co-terms-tick {
  display: none;
  margin-left: auto;
  align-self: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ek-success);
}
.ek-co-terms:has(input[type="checkbox"]:checked) .ek-co-terms-tick { display: block; }



/* ---- @import /assets/css/enka/catalog.css ---- */
/* =========================================================
   catalog.css - Enka-specifieke catalogus/PDP overrides
   ---------------------------------------------------------
   Geextraheerd uit de inline <style> blokken van
   assortment.php en assortment_info.php (body.is-enka regels).
   De gedeelde (DutchLine) basis blijft inline in die pagina's.
   Laadt via enka/core.css - alleen bij APP_LINE=enka.
   ========================================================= */
/* ══ Uit assortment.php ═══════════════════════════════════════ */
body.is-enka{
  --dlx-ink:        var(--ek-ink);
  --dlx-ink-2:      var(--ek-text-muted);
  --dlx-ink-3:      var(--ek-text-muted-2);
  --dlx-line:       var(--ek-border-strong);
  --dlx-line-soft:  var(--ek-border);
  --dlx-surface:    var(--ek-surface-hover);
  --dlx-accent:     var(--ek-ink);
  --dlx-accent-soft:var(--ek-primary-subtle);
  --dlx-accent-line:var(--ek-text-muted);
  --dlx-r:          0px;
  --dlx-r-sm:       0px;
  --dlx-pill:       0px;
  --dlx-shadow:     none;
}
body.is-enka .dl-assort-title{
  font-family: var(--ek-font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase; letter-spacing: .01em; font-weight: 700;
  /* De gedeelde basis zet deze kop op maximaal 2.1rem, terwijl .ek-h2 elders
     op Enka tussen 34 en 56px staat. Op de catalogus - de pagina waar de
     meeste bezoekers binnenkomen - was de titel daardoor kleiner dan op elke
     andere pagina van dezelfde site. */
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1;
}
/* Meer lucht om de kop, in lijn met het sectieritme van de rest van Enka. */
body.is-enka .dl-assort-head{
  padding: var(--ek-sp-6) 0 var(--ek-sp-5);
  margin-bottom: var(--ek-sp-5);
}
body.is-enka .dl-assort-sub{
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
  font-weight: 600;
}
body.is-enka .dl-filter-title .t{
  text-transform: uppercase; letter-spacing: .05em; font-size: .8rem;
}
body.is-enka .dl-filter-form .dl-check .form-check-input[type="checkbox"]{ border-radius: 0 !important; }
body.is-enka .dl-swatch{ border-radius: 0; }
body.is-enka .dl-product-card:hover{ transform: none; border-color: var(--dlx-ink); }
@media (min-width: 992px) and (hover: hover){
body.is-enka .dl-hg{ position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
body.is-enka .dl-hg-img{
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: contain; background: var(--dlx-surface);
    opacity: 0; transition: opacity .12s ease;
  }
body.is-enka .dl-product-card:hover .dl-hg-img.is-active{ opacity: 1; }
body.is-enka .dl-hg-bars{
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    display: flex; gap: 4px; z-index: 3; opacity: 0; transition: opacity .15s ease;
  }
body.is-enka .dl-product-card:hover .dl-hg-bars{ opacity: 1; }
body.is-enka .dl-hg-bar{ flex: 1 1 0; height: 3px; background: var(--ek-border-strong); transition: background .12s ease; }
body.is-enka .dl-hg-bar.is-active{ background: var(--ek-ink); }
body.is-enka .dl-card-badges-tr,
  body.is-enka .dl-card-badges-tl{ z-index: 4; }
}
body.is-enka .dl-ov-btn{ border-radius: 0; }
body.is-enka .dl-prod-swatch{ border-radius: 0; }
body.is-enka .dl-pager-inline{ border-radius: 0; }
body.is-enka .dl-product-card,
body.is-enka .dl-product-img-wrap,
body.is-enka .dl-f-block,
body.is-enka .dl-check,
body.is-enka .dl-cat-row,
body.is-enka .dl-search,
body.is-enka .dl-card--soft,
body.is-enka .dl-view-toggle,
body.is-enka .dl-view-toggle button{ border-radius: 0 !important; }
body.is-enka .dl-product-card,
body.is-enka .dl-product-card:hover,
body.is-enka .dl-product-card.is-oos:hover,
body.is-enka .dl-f-block,
body.is-enka .dl-card--soft{ box-shadow: none !important; }

/* ══ Uit assortment_info.php ═══════════════════════════════════════ */
body.is-enka{
  --pdp-accent:       var(--ek-ink, var(--ek-ink));
  --pdp-accent-soft:  var(--ek-border-subtle);
  --pdp-border:       var(--ek-line, var(--ek-border));
}
body.is-enka .pdp-hero{ background:var(--ek-surface, var(--ek-surface)); }
body.is-enka .pdp-title{
  color:var(--ek-ink, var(--ek-ink));
  font-family:var(--ek-font-display, 'Barlow Condensed', sans-serif);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
}
body.is-enka .pdp-subtitle{ color:var(--ek-muted, var(--ek-text-muted)); }
body.is-enka .pdp-meta-chip{
  background:var(--ek-ink, var(--ek-ink));
  color:var(--ek-on-dark, var(--ek-surface));
  border-color:var(--ek-ink, var(--ek-ink));
  border-radius:var(--ek-r, 4px);
  font-family:var(--ek-font, sans-serif);
}
body.is-enka .pdp-order-card{
  border-radius:var(--ek-r-lg, 8px);
  border-color:var(--ek-line-2, var(--ek-border-strong));
  box-shadow:var(--ek-shadow-md);
}
body.is-enka .pdp-order-header{
  background:var(--ek-ink, var(--ek-ink));
  border-bottom:1px solid var(--ek-on-dark-line);
}
body.is-enka .pdp-order-header-label{
  color:var(--ek-on-dark-muted);
  font-family:var(--ek-font-display, sans-serif);
  letter-spacing:.1em;
}
body.is-enka .pdp-tab-btn:hover{ color:var(--pdp-accent); }
body.is-enka .pdp-tab-btn.is-active{
  color:var(--pdp-accent);
  border-bottom-color:var(--pdp-accent);
}
body.is-enka .pdp-tab-count{
  background:var(--pdp-accent-soft);
  color:var(--pdp-accent);
}
body.is-enka .pdp-info-card{
  border-radius:var(--ek-r-lg, 8px);
  border-color:var(--ek-line, var(--ek-border));
  box-shadow:var(--ek-shadow-sm);
}
body.is-enka .pdp-info-title{
  color:var(--ek-ink, var(--ek-ink));
  font-family:var(--ek-font-display, sans-serif);
  text-transform:uppercase;
  letter-spacing:.06em;
}
body.is-enka .pdp-info-title i{ color:var(--pdp-accent); }
body.is-enka .pdp-info-row dt{ color:var(--ek-muted, var(--ek-text-muted)); }
body.is-enka .pdp-info-row dd{ color:var(--ek-ink, var(--ek-ink)); }
body.is-enka .pdp-info-swatch{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  border-color:var(--ek-line-2, var(--ek-border-strong));
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-info-swatch-name{ color:var(--ek-ink, var(--ek-ink)); }
body.is-enka .pdp-gallery{ border-radius:var(--ek-r-lg, 8px); }
body.is-enka .pdp-gallery-zoom{
  border-radius:var(--ek-r, 4px);
  background:var(--ek-ink, var(--ek-ink));
  color:var(--ek-surface);
  border-color:var(--ek-ink, var(--ek-ink));
}
body.is-enka .pdp-gallery-zoom:hover{ background:var(--ek-ink-2, var(--ek-ink-2)); color:var(--ek-surface); }
body.is-enka .dl-thumb.pdp-thumb.is-active{
  border-color:var(--pdp-accent);
  box-shadow:0 0 0 1px var(--pdp-accent);
}
body.is-enka .dl-thumb.pdp-thumb:hover{ border-color:var(--pdp-accent); }
body.is-enka .pdp-share-card{
  border-radius:var(--ek-r-lg, 8px);
  border-color:var(--ek-line, var(--ek-border));
}
body.is-enka .pdp-share-title i,
body.is-enka .pdp-share-btn-copy i{ color:var(--pdp-accent); }
body.is-enka .pdp-share-btn{
  border-radius:var(--ek-r, 4px);
  border-color:var(--ek-line-2, var(--ek-border-strong));
}
body.is-enka .pdp-share-btn:hover{
  border-color:var(--pdp-accent);
  background:var(--pdp-accent-soft);
  transform:none;
}
body.is-enka .pdp-panel-heading{
  font-family:var(--ek-font-display, sans-serif);
  text-transform:uppercase;
  letter-spacing:.04em;
}
body.is-enka .pdp-ph-icon{
  background:var(--pdp-accent-soft);
  color:var(--pdp-accent);
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-desc-empty{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  border-color:var(--ek-line-2, var(--ek-border-strong));
  color:var(--ek-muted, var(--ek-text-muted));
}
body.is-enka .pdp-dealer-banner{
  background:var(--ek-ink, var(--ek-ink));
  border-radius:var(--ek-r-lg, 8px);
}
body.is-enka .pdp-dealer-banner::before,
body.is-enka .pdp-dealer-banner::after{ display:none; }
body.is-enka .pdp-dealer-title{
  font-family:var(--ek-font-display, sans-serif);
  text-transform:uppercase;
  letter-spacing:.02em;
}
body.is-enka .pdp-dealer-chip{
  background:var(--ek-on-dark-line);
  border-color:var(--ek-on-dark-line);
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-dealer-btn{
  background:var(--ek-surface); color:var(--ek-ink, var(--ek-ink));
  border-color:var(--ek-surface); border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-dealer-btn:hover{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  color:var(--ek-ink, var(--ek-ink));
}
body.is-enka .pdp-var-hint{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  border-color:var(--ek-line-2, var(--ek-border-strong));
  color:var(--ek-ink, var(--ek-ink));
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-sticky-price{ color:var(--ek-ink,var(--ek-ink)); }

/* ═══════════════════════════════════════════════════════════
   ENKA PDP redesign (assortment_info.php)
   Premium zwart/wit: Barlow Condensed display, scherpe hoeken,
   hairlines i.p.v. schaduwen, rustige typografie.
   ═══════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────── */
body.is-enka .pdp-hero { padding: 0 0 var(--ek-sp-6); }
body.is-enka .pdp-header { padding: var(--ek-sp-5) 0 var(--ek-sp-4); }
body.is-enka .pdp-title {
  font-family: var(--ek-font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  color: var(--ek-ink);
}
body.is-enka .pdp-subtitle {
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  color: var(--ek-text-muted);
  text-transform: none;
}
body.is-enka .pdp-crumbs { font-size: var(--ek-fs-xs); }
body.is-enka .pdp-meta-row .dl-badge {
  background: var(--ek-surface);
  border: 1px solid var(--ek-border-strong);
  color: var(--ek-ink);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--ek-fs-xs);
}

/* ── Gallery ────────────────────────────────────────────── */
body.is-enka .pdp-gallery.dl-card {
  border: 1px solid var(--ek-border);
  box-shadow: none;
  background: var(--ek-surface);
}
body.is-enka .pdp-gallery.dl-card:hover { box-shadow: none; }
body.is-enka .pdp-gallery-main { background: var(--ek-surface); }
body.is-enka .pdp-gallery-zoom {
  background: var(--ek-surface);
  border: 1px solid var(--ek-border-strong);
  color: var(--ek-ink);
  border-radius: 0;
  width: 44px; height: 44px;
}
body.is-enka .pdp-gallery-zoom:hover {
  background: var(--ek-ink);
  color: var(--ek-on-primary);
  border-color: var(--ek-ink);
}
body.is-enka .pdp-gallery-thumbs { padding: var(--ek-sp-3); gap: var(--ek-sp-2); }
body.is-enka .pdp-thumb {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  background: var(--ek-surface);
  transition: border-color var(--ek-dur-fast) var(--ek-ease);
}
body.is-enka .pdp-thumb:hover { border-color: var(--ek-text-muted-2); }
body.is-enka .pdp-thumb.is-active { border: 2px solid var(--ek-ink); box-shadow: none; }
body.is-enka .pdp-var-hint {
  background: var(--ek-surface-hover);
  border: 1px solid var(--ek-border);
  color: var(--ek-text-muted);
  border-radius: 0;
  font-size: var(--ek-fs-sm);
}

/* ── Buy box ────────────────────────────────────────────── */
body.is-enka .pdp-order-card {
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  box-shadow: none;
  background: var(--ek-surface);
  overflow: hidden;
}
body.is-enka .pdp-order-header {
  background: var(--ek-surface-dark);
  border-bottom: none;
  padding: var(--ek-sp-4) var(--ek-sp-5);
}
body.is-enka .pdp-order-header-label {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ek-on-dark-muted);
}
body.is-enka .pdp-order-price-main {
  font-family: var(--ek-font-display);
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ek-on-dark);
  line-height: 1.05;
}
body.is-enka .pdp-order-price-vat {
  color: var(--ek-on-dark-muted-2);
  font-size: var(--ek-fs-xs);
  letter-spacing: .04em;
}
body.is-enka .pdp-order-body { padding: var(--ek-sp-5); }
body.is-enka .pdp-order-section-label {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
  margin-bottom: var(--ek-sp-2);
}

/* Swatches: strak vierkant met zwarte actieve rand */
body.is-enka .pdp-var-swatches { gap: var(--ek-sp-2); }
body.is-enka .pdp-var-swatches a {
  width: 40px; height: 40px;
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  padding: 3px;
}
body.is-enka .pdp-var-swatches a span { border-radius: 0; }
body.is-enka .pdp-var-swatches a:hover {
  transform: none;
  border-color: var(--ek-ink);
}
body.is-enka .pdp-var-swatches a.is-active {
  border: 2px solid var(--ek-ink);
  box-shadow: none;
  padding: 2px;
}

/* Voorraad */
body.is-enka .pdp-stock-row {
  border: 1px solid var(--ek-border);
  background: var(--ek-surface-hover);
  border-radius: 0;
  padding: var(--ek-sp-2) var(--ek-sp-3);
}
body.is-enka .pdp-stock-dot.in { background: var(--ek-success); box-shadow: none; }
body.is-enka .pdp-stock-dot.out { background: var(--ek-danger); box-shadow: none; }
body.is-enka .pdp-stock-txt { font-weight: 700; color: var(--ek-ink); }
body.is-enka .pdp-stock-qty { color: var(--ek-text-muted); }

/* Aantal-stepper: aaneengesloten groep */
body.is-enka .pdp-qty-wrap {
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  overflow: hidden;
}
body.is-enka .pdp-qty-btn {
  width: 48px; height: 48px;
  border-radius: 0;
  background: var(--ek-surface);
  color: var(--ek-ink);
  font-size: var(--ek-fs-lg);
  font-weight: 700;
}
body.is-enka .pdp-qty-btn:hover {
  background: var(--ek-ink);
  color: var(--ek-on-primary);
}
body.is-enka .pdp-qty-input {
  font-size: var(--ek-fs-base);
  font-weight: 800;
  height: 48px;
}

/* CTA */
body.is-enka #enka-add-to-cart.dl-btn {
  min-height: 52px;
  font-size: var(--ek-fs-sm) !important; /* zelfde specificity-reden als .dl-btn blok in overrides.css */
  letter-spacing: .14em !important;
}
body.is-enka .pdp-subtotal-row {
  border-top: 1px solid var(--ek-border);
  margin-top: var(--ek-sp-4);
  padding-top: var(--ek-sp-3);
}
body.is-enka .pdp-subtotal-lbl {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
}
body.is-enka .pdp-subtotal-val {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-xl);
  font-weight: 900;
  color: var(--ek-ink);
}

/* "Kies een uitvoering" notitie (klasse i.p.v. inline amber) */
body.is-enka .pdp-choose-var-note {
  background: var(--ek-warning-subtle);
  border: 1px solid color-mix(in srgb, var(--ek-warning) 35%, transparent);
  border-radius: 0;
  padding: var(--ek-sp-2) var(--ek-sp-3);
  font-size: var(--ek-fs-sm);
  color: var(--ek-warning-hover);
  margin-bottom: var(--ek-sp-4);
}
body.is-enka .pdp-choose-var-note .text-warning { color: var(--ek-warning) !important; }

/* Specificaties-kaart in sidebar: zelfde taal als buy box */
body.is-enka .pdp-info-list { margin: 0; }
body.is-enka .pdp-info-row {
  border-bottom: 1px solid var(--ek-border-subtle);
  padding: var(--ek-sp-2) 0;
}
body.is-enka .pdp-info-row dt { color: var(--ek-text-muted); font-size: var(--ek-fs-sm); }
body.is-enka .pdp-info-row dd { color: var(--ek-ink); font-weight: 700; font-size: var(--ek-fs-sm); }

/* ── Tabs ───────────────────────────────────────────────── */
body.is-enka .pdp-tabs { border-bottom: 1px solid var(--ek-border); gap: var(--ek-sp-2); }
body.is-enka .pdp-tab-btn {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-base);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
  border-bottom: 2px solid transparent;
  padding: var(--ek-sp-3) var(--ek-sp-4);
}
body.is-enka .pdp-tab-btn:hover { color: var(--ek-ink); }
body.is-enka .pdp-tab-btn.is-active {
  color: var(--ek-ink);
  border-bottom-color: var(--ek-ink);
}
body.is-enka .pdp-tab-count {
  background: var(--ek-surface-sunken);
  color: var(--ek-ink);
  border-radius: var(--ek-r-pill);
  font-family: var(--ek-font);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
}

/* ── Panels / omschrijving / productinformatie ──────────── */
body.is-enka .pdp-panels { padding: var(--ek-sp-6) 0 var(--ek-sp-7); }
body.is-enka .pdp-info-card,
body.is-enka .pdp-share-card {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--ek-surface);
}
body.is-enka .pdp-ph-icon,
body.is-enka .pdp-info-title > i,
body.is-enka .pdp-share-title > i,
body.is-enka .pdp-panel-heading > i { display: none; } /* icoon-chips voor kopjes: weg, rustiger */
body.is-enka .pdp-panel-heading,
body.is-enka .pdp-info-title,
body.is-enka .pdp-share-title {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ek-ink);
  border-bottom: 1px solid var(--ek-border);
  padding-bottom: var(--ek-sp-3);
  margin-bottom: var(--ek-sp-4);
}
body.is-enka .pdp-panel p,
body.is-enka .pdp-panel li {
  font-size: var(--ek-fs-base);
  line-height: 1.7;
  color: var(--ek-ink-2);
}
/* Leesbreedte alleen voor de omschrijvingstekst - niet voor reviews e.d. */
body.is-enka .pdp-desc-content p,
body.is-enka .pdp-desc-content li {
  max-width: 72ch;
}

/* ── Delen: compacte icoonrij i.p.v. hoge knoppenlijst ───── */
body.is-enka .pdp-share-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ek-sp-2);
}
body.is-enka .pdp-share-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  background: var(--ek-surface);
  color: var(--ek-ink);
  font-size: var(--ek-fs-base);
}
body.is-enka .pdp-share-btn span { display: none; }
body.is-enka .pdp-share-btn:hover {
  background: var(--ek-ink);
  color: var(--ek-on-primary);
  border-color: var(--ek-ink);
}

/* ── Reviews ────────────────────────────────────────────── */
body.is-enka .dl-reviews .dl-rev-score-num {
  font-family: var(--ek-font-display);
  font-weight: 900;
  color: var(--ek-ink);
}
body.is-enka .dl-reviews .fa-star,
body.is-enka .dl-reviews .fa-star-half-stroke { color: var(--ek-ink); }
body.is-enka .dl-rev-form-card,
body.is-enka .dl-reviews .dl-card {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  box-shadow: none;
}
body.is-enka .dl-reviews .form-control {
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  font-size: var(--ek-fs-base);
}
body.is-enka .dl-reviews .form-control:focus {
  border-color: var(--ek-ink);
  box-shadow: 0 0 0 2px var(--ek-border);
}
body.is-enka .dl-rev-label {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
}

/* ── Pack-calculator in Enka-stijl ──────────────────────── */
body.is-enka .pdp-pack-calc-card {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  background: var(--ek-surface-hover);
}
body.is-enka .pdp-pack-calc-head { color: var(--ek-ink); font-weight: 800; }
body.is-enka .pdp-pack-calc-card .form-control {
  border-radius: 0;
  font-size: var(--ek-fs-base);
}

/* ── Mobiel ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Uitzondering op mobile-first: dit zijn mobiele verfijningen bovenop de
     gedeelde pdp-basis die niet herschreven mag worden. */
  body.is-enka .pdp-header { padding: var(--ek-sp-4) 0 var(--ek-sp-3); }
  body.is-enka .pdp-panels { padding: var(--ek-sp-5) 0 var(--ek-sp-6); }
  body.is-enka .pdp-order-price-main { font-size: 1.8rem; }
  body.is-enka .pdp-tab-btn { font-size: var(--ek-fs-sm); padding: var(--ek-sp-3) var(--ek-sp-3); }
}

/* ── Sectiemenu: verticaal links (dl-dnav patroon), echte tabs (Enka) ─────── */
body.is-enka .pdp-secnav-wrap { display: flex; flex-direction: column; }
body.is-enka .pdp-secnav {
  display: flex;
  gap: var(--ek-sp-1);
  padding: var(--ek-sp-2);
  background: var(--ek-surface);
  border: 1px solid var(--ek-border);
  margin-bottom: var(--ek-sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.is-enka .pdp-secnav::-webkit-scrollbar { display: none; }
body.is-enka .pdp-secnav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  color: var(--ek-text-muted);
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease);
}
body.is-enka .pdp-secnav-item i { width: 18px; text-align: center; opacity: .8; }
body.is-enka .pdp-secnav-item:hover { color: var(--ek-ink); background: var(--ek-surface-hover); }
body.is-enka .pdp-secnav-item.is-active {
  background: var(--ek-primary);
  border-color: var(--ek-primary);
  color: var(--ek-on-primary);
}
body.is-enka .pdp-secnav-item.is-active i { opacity: 1; }
body.is-enka .pdp-secnav-main { min-width: 0; }

@media (min-width: 992px) {
  body.is-enka .pdp-secnav-wrap { flex-direction: row; align-items: flex-start; gap: var(--ek-sp-4); }
  body.is-enka .pdp-secnav {
    flex: 0 0 232px;
    width: 232px;
    flex-direction: column;
    position: sticky;
    top: var(--ek-sp-4);
    margin-bottom: 0;
  }
  body.is-enka .pdp-secnav-item { width: 100%; justify-content: flex-start; white-space: normal; }
  body.is-enka .pdp-secnav-main { flex: 1 1 auto; }
}

/* Reviews-sectie wordt door JS in de tab-container gezet; binnen de
   container geen dubbele marges */
body.is-enka .pdp-secnav-main .dl-reviews { margin-top: 0; }
body.is-enka .pdp-sec-hidden { display: none !important; } /* tab-switching; moet inline styles en .row verslaan */

/* ── Productinformatie-tab: kolom vol uitvullen + specs in 2 kolommen ─────── */
body.is-enka .pdp-col-full {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
body.is-enka .pdp-info-card .pdp-info-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--ek-sp-7);
}
@media (min-width: 768px) {
  body.is-enka .pdp-col-full .pdp-info-card .pdp-info-list {
    grid-template-columns: 1fr 1fr;
  }
}
body.is-enka .pdp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ek-sp-4);
  min-width: 0;
}
body.is-enka .pdp-info-row dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

 /* Enka-overrides catalogus/PDP (uit assortment*.php) */

/* 6) Overrides voor Bootstrap + DutchLine globals (moet LAATST) */

/* ---- @import /assets/css/enka/overrides.css ---- */
/* =========================================================
   overrides.css - ENKA overrides voor globale CSS
   ---------------------------------------------------------
   Geldt op ALLE pagina's waar APP_LINE=enka actief is
   (homepage, /assortment, /checkout, /account, /pages/*).

   Scope: body.is-enka  - alleen Enka pagina's.
   Strategie: 3 lagen overrules
     1. Bootstrap CSS variables (--bs-*) remap naar Enka
     2. DutchLine variables (--accent, --dl-blue-*) remap
     3. Concrete component-overrides voor edge-cases
   ========================================================= */

/* ──────────────────────────────────────────────────────────────────────────
   1) Bootstrap CSS variabelen remappen naar Enka zwart/wit
   Hierdoor erven ALLE Bootstrap-componenten (.btn-primary, .text-primary,
   .bg-primary, .border-primary, .alert-primary etc.) automatisch Enka.
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka {
  /* --bs-primary/link/focus mapping staat in tokens.css; hier alleen
     de keys die tokens.css niet dekt. */
  --bs-form-valid-color:       var(--ek-primary);
  --bs-form-valid-border-color:var(--ek-primary);

  --bs-btn-bg:                 var(--ek-primary);
  --bs-btn-color:              var(--ek-on-primary);
  --bs-btn-border-color:       var(--ek-primary);
  --bs-btn-hover-bg:           var(--ek-primary-hover);
  --bs-btn-active-bg:          var(--ek-primary-hover);

  /* DutchLine theme-core.css overrules */
  --accent:        var(--ek-ink-2);
  --accent-soft:   var(--ek-border-subtle);
  --accent-soft2:  var(--ek-border);
  --accent-ink:    var(--ek-on-dark);
  --accent-gradient: linear-gradient(135deg, var(--ek-primary-hover), var(--ek-primary));
  --dl-blue-300:   var(--ek-muted-2);
  --dl-blue-500:   var(--ek-muted);
  --dl-blue-600:   var(--ek-ink-2);
  --dl-blue-700:   var(--ek-ink-2);
  --dl-blue-800:   var(--ek-ink);
  --dl-blue-900:   var(--ek-ink);
  --dl-nav-bg:     var(--ek-surface);
  --focus:         var(--ek-border-strong);
}

/* ──────────────────────────────────────────────────────────────────────────
   2) Bootstrap btn varianten (primary/outline) -> Enka
   Sommige Bootstrap regels gebruiken hardcoded waardes en niet --bs-* vars,
   dus expliciet overrulen.
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .btn-primary,
body.is-enka .btn-primary:focus-visible {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}
body.is-enka .btn-primary:hover,
body.is-enka .btn-primary:active,
body.is-enka .btn-primary.active,
body.is-enka .btn-check:checked + .btn-primary {
  background-color: var(--ek-ink);
  border-color: var(--ek-ink);
  color: var(--ek-on-dark);
}
body.is-enka .btn-primary:disabled,
body.is-enka .btn-primary.disabled {
  background-color: var(--ek-muted);
  border-color: var(--ek-muted);
  color: var(--ek-on-dark);
}

body.is-enka .btn-outline-primary {
  background-color: transparent;
  border-color: var(--ek-ink-2);
  color: var(--ek-ink-2);
}
body.is-enka .btn-outline-primary:hover,
body.is-enka .btn-outline-primary:active {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

body.is-enka .btn-secondary {
  background-color: var(--ek-surface-3);
  border-color: var(--ek-line-2);
  color: var(--ek-ink-2);
}
body.is-enka .btn-secondary:hover {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

body.is-enka .btn-light {
  background-color: var(--ek-surface);
  border-color: var(--ek-line);
  color: var(--ek-ink-2);
}
body.is-enka .btn-light:hover {
  background-color: var(--ek-surface-2);
  border-color: var(--ek-line-2);
  color: var(--ek-ink);
}

body.is-enka .btn-dark {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}
body.is-enka .btn-dark:hover {
  background-color: var(--ek-ink);
  border-color: var(--ek-ink);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   3) Bootstrap utility classes (.bg-* / .text-* / .border-*)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .bg-primary,
body.is-enka .text-bg-primary {
  background-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}
body.is-enka .text-primary {
  color: var(--ek-ink-2);
}
body.is-enka .border-primary {
  border-color: var(--ek-ink-2);
}
body.is-enka .bg-primary-subtle {
  background-color: var(--ek-surface-2) !important;
}
body.is-enka .text-primary-emphasis {
  color: var(--ek-ink);
}
body.is-enka .badge.bg-primary,
body.is-enka .badge.text-bg-primary {
  background-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   4) Form elementen - focus en validation
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .form-control:focus,
body.is-enka .form-select:focus,
body.is-enka .form-check-input:focus {
  border-color: var(--ek-ink-2);
  box-shadow: 0 0 0 3px var(--ek-border);
}
body.is-enka .form-check-input:checked {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
}
body.is-enka .form-control:focus-visible,
body.is-enka .form-select:focus-visible {
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   5) Links - alleen Bootstrap utility classes, geen algemene a-reset
   (algemene a { color: inherit } breekt specifieke knop-stijling)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka a.text-primary,
body.is-enka a.link-primary {
  color: var(--ek-ink-2);
}
body.is-enka a.text-primary:hover,
body.is-enka a.link-primary:hover {
  color: var(--ek-ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   6) DutchLine header buttons → Enka typografie + kleur
   (!important nodig omdat de inline <style> in header.php sommige
    properties hard-codeert en later in DOM staat dan core.css)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .dl-btn {
  font-family: var(--ek-font);
  font-size: var(--ek-fs-sm) !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius: var(--ek-r) !important;
  padding: var(--ek-sp-3) var(--ek-sp-4) !important;
}

body.is-enka .dl-btn-primary {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
body.is-enka .dl-btn-primary:hover {
  background: var(--ek-ink);
  border-color: var(--ek-ink);
  color: var(--ek-on-dark);
}

body.is-enka .dl-btn-ghost {
  background: var(--ek-surface);
  color: var(--ek-ink-2);
  border-color: var(--ek-line-2);
}
body.is-enka .dl-btn-ghost:hover {
  background: var(--ek-surface-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-ink);
}

/* Header zoekbalk - Enka stijl */
body.is-enka .dl-search-pill {
  border: 1px solid var(--ek-line-2);
  border-radius: var(--ek-r) !important;
}
body.is-enka .dl-search-input {
  font-family: var(--ek-font);
  font-size: var(--ek-fs-base); /* >=16px: voorkomt iOS zoom-on-focus */
}
body.is-enka .dl-search-input:focus {
  border-color: var(--ek-ink-2);
  box-shadow: 0 0 0 2px var(--ek-border);
}
body.is-enka .dl-search-btn {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  font-family: var(--ek-font);
  font-size: var(--ek-fs-xs) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: var(--ek-sp-2) var(--ek-sp-4) !important;
  border-radius: 0 var(--ek-r) var(--ek-r) 0 !important;
}
body.is-enka .dl-search-btn:hover {
  background: var(--ek-ink);
  color: var(--ek-on-dark);
}

body.is-enka .dl-card:hover {
  border-color: var(--ek-line-2);
}
body.is-enka .dl-card-topline {
  background: var(--ek-ink-2);
}
body.is-enka .dl-card-topline::after {
  background: var(--ek-line);
}

body.is-enka .dl-chip.active {
  border-color: var(--ek-ink-2);
  background: var(--ek-surface-2);
  color: var(--ek-ink-2);
}

body.is-enka .dl-panel:focus-within {
  border-color: var(--ek-ink-2);
  box-shadow: var(--ek-shadow-md), 0 0 0 3px var(--ek-border);
}

body.is-enka .dl-locked {
  border-color: var(--ek-line-2);
  background: var(--ek-surface-2);
}

body.is-enka .dl-filter {
  border-color: var(--ek-line);
}

body.is-enka .dl-iconbtn:hover {
  border-color: var(--ek-line-2);
}

/* DutchLine nav */
body.is-enka .dl-nav .nav-link:hover {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .dl-nav .nav-link.active {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .dl-nav .nav-link.active::after {
  background: var(--ek-ink-2);
}

/* DutchLine "sheen" gradient -> volle Enka kleur */
body.is-enka .dl-sheen,
body.is-enka .dl-sec-sheen {
  background: var(--ek-surface);
}

/* DutchLine accent dividers / hr -> Enka neutraal */
body.is-enka .dl-hr-accent {
  background: var(--ek-line-2);
}

/* DutchLine header bottom accent line */
body.is-enka .dl-header::after,
body.is-enka .dl-header-v4::after {
  background: var(--ek-line);
}

/* ──────────────────────────────────────────────────────────────────────────
   7) Bootstrap accordion / tabs / pills
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .accordion-button:not(.collapsed) {
  background: var(--ek-surface-2);
  color: var(--ek-ink-2);
}
body.is-enka .accordion-button:focus {
  box-shadow: 0 0 0 3px var(--ek-border);
}

body.is-enka .nav-tabs .nav-link.active,
body.is-enka .nav-tabs .nav-link:hover {
  color: var(--ek-ink-2);
  background: var(--ek-surface);
  border-color: var(--ek-line);
}
body.is-enka .nav-pills .nav-link.active {
  background: var(--ek-surface-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-ink-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   8) Tabellen + lists
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .table-hover tbody tr:hover {
  background: var(--ek-surface-2);
}
body.is-enka .list-group-item:hover {
  background: var(--ek-surface-2);
}
body.is-enka .list-group-item.active {
  background: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   9) Breadcrumbs + pagination + dropdown
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .breadcrumb-item a:hover {
  color: var(--ek-ink);
}
body.is-enka .page-link {
  color: var(--ek-ink-2);
}
body.is-enka .page-link:hover {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .page-item.active .page-link {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

body.is-enka .dropdown-item:hover,
body.is-enka .dropdown-item:focus {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .dropdown-item.active {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   10) Misc (spinners, progress, alert)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .spinner-border.text-primary,
body.is-enka .spinner-grow.text-primary {
  color: var(--ek-ink-2);
}
body.is-enka .progress-bar.bg-primary,
body.is-enka .progress-bar {
  background-color: var(--ek-ink-2);
}
body.is-enka .alert-primary {
  background-color: var(--ek-surface-2);
  border-color: var(--ek-line-2);
  color: var(--ek-ink-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   11) Custom dl-* utilities die nog kunnen voorkomen
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .dl-badge {
  border-color: var(--ek-line);
}
body.is-enka .dl-pill,
body.is-enka .dl-pill.active {
  border-color: var(--ek-line-2);
}
body.is-enka .dl-toast {
  border-color: var(--ek-line);
}

/* ──────────────────────────────────────────────────────────────────────────
   12) Assortiment hero (assortment.php .shop-hero) - Enka zwart/wit
   DutchLine toont hier een blauwe afgeronde "Dealer Shop" hero. Enka is B2C
   consument zonder dealers: zwarte balk, scherpe hoeken, Barlow Condensed.
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .shop-hero {
  background: var(--ek-surface-dark);
  border-radius: var(--ek-r-lg);
}
body.is-enka .shop-hero::before { display: none; }
body.is-enka .shop-hero-title {
  font-family: var(--ek-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
}
body.is-enka .shop-hero-btn.is-white {
  color: var(--ek-ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   13) Responsive (Phase 3)
   Uitzondering op mobile-first: onderstaande max-width queries zijn bewuste
   mobiele verrijkingen bovenop GEDEELDE componenten (Bootstrap modal,
   dl-table). De basisstijl van die componenten is DutchLine-breed en mag
   hier niet herschreven worden; alleen het mobiele gedrag wijkt af.
   ────────────────────────────────────────────────────────────────────────── */

/* Modals als full-screen sheet op telefoons (spiegel van Bootstrap's
   eigen .modal-fullscreen-sm-down patroon, zonder markup-wijziging) */
@media (max-width: 575.98px) {
  body.is-enka .modal-dialog {
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch;
  }
  body.is-enka .modal-content {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* Datatabellen (accountpagina's /account/*): scoped horizontale scroll met
   sticky eerste kolom. Stacken kan niet generiek: de dl-table markup is
   gedeeld met DutchLine en heeft geen data-labels per cel. */
@media (max-width: 767.98px) {
  body.is-enka .dl-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.is-enka .dl-table th:first-child,
  body.is-enka .dl-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--ek-surface);
    z-index: 2;
  }
}

/* Touch targets >=44px voor gedeelde iconknoppen op touch-apparaten */
@media (pointer: coarse) {
  body.is-enka .dl-iconbtn,
  body.is-enka .dl-qbtn { min-width: 44px; min-height: 44px; }
}



/* 7) Sharp edges - moet ALLERLAATST omdat het *::-rules bevat */

/* ---- @import /assets/css/enka/sharp-edges.css ---- */
/* =========================================================
   enka/sharp-edges.css
   ---------------------------------------------------------
   Enka heeft een scherper visueel taalgebruik dan DutchLine.
   Deze CSS cappt alle border-radius op 5px en herstelt
   uitzonderingen (circles, pills, full-width sections).
   Voorheen inline in inc/header.php.
   ========================================================= */

/* Cap alle radius op het Enka-token - dekt CSS-bestanden en page-level inline styles.
   DL-tokens --r/--r2 remappen op body-niveau (":root" kan niet: --ek-r bestaat alleen
   binnen body.is-enka). */
body.is-enka { --r: var(--ek-r); --r2: var(--ek-r); --dl-input-r: var(--ek-r); }
*, *::before, *::after { border-radius: var(--ek-r) !important; }

/* Restore circles - these are more specific than * so they win */
.dl-spinner, .dl-dot, .spinner-border, .spinner-grow, .rounded-circle,
*[style*="border-radius:50%"], *[style*="border-radius: 50%"] { border-radius: 50% !important; }

/* Decoratieve cirkel in de admin-hero: als vierkant blok werd dit een zichtbare
   lichte balk rechts in de header. */
.dl-admin-hero::after { border-radius: 50% !important; }

/* Restore pills/progress bars */
.dl-pill, .rounded-pill, .progress-bar,
.dl-bar-fill, .db-bar, .db-bar-fill,
*::-webkit-scrollbar-thumb { border-radius: var(--ek-r-pill) !important; }

/* Full-width sections must stay sharp */
.dl-topbar-v4, .dl-topbar-v4 * { border-radius: 0 !important; }
.dl-topbar-v4 .dl-dot { border-radius: 50% !important; }
.enka-footer, .enka-footer-bottom { border-radius: 0 !important; }

/* Mega menu category heading separator line */
.enka-mega-head { border-radius: 0 !important; }

/* CSS triangle caret - border-radius distorts the triangle shape */
.enka-caret, .dl-caret, .dl-tt-pijl { border-radius: 0 !important; }




/* ---- /assets/css/toast.css ---- */
/* =========================================================
   toast.css - DutchLine Toasts
   - Top-right stacked toasts
   - Same status colors as alerts
   - Progress bar timer (configurable)
   - Soft premium UI (no heavy gradients)
   ========================================================= */

:root{
  /* Fallbacks if theme-core not loaded (still prefer theme-core vars) */
  --dl-toast-z: 1990;
  --dl-toast-gap: 10px;
  --dl-toast-w: 380px;
  --dl-toast-w-sm: calc(100vw - 24px);
  --dl-toast-pad: 14px;
  --dl-toast-r: 18px;
}

/* Container */
.dl-toast-stack{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--dl-toast-z);
  width: min(var(--dl-toast-w), var(--dl-toast-w-sm));
  display: flex;
  flex-direction: column;
  gap: var(--dl-toast-gap);
  pointer-events: none; /* only toast itself clickable */
}

/* Toast base */
.dl-toast{
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--dl-toast-r);
  border: 1px solid var(--border);
  background: rgba(255,255,255);
  box-shadow: var(--shadow);
  padding: var(--dl-toast-pad);
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: start;

  transform: translateY(-6px);
  opacity: 0;
  animation: dlToastIn .22s ease forwards;
}

@keyframes dlToastIn{
  to { transform: translateY(0); opacity: 1; }
}

.dl-toast.is-leaving{
  animation: dlToastOut .16s ease forwards;
}
@keyframes dlToastOut{
  to { transform: translateY(-6px); opacity: 0; }
}

/* Icon */
.dl-toast-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: var(--ink);
  background: rgba(11,18,32,.06);
  border: 1px solid var(--border);
}

/* Content */
.dl-toast-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 1px 0 0;
}
.dl-toast-text{
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
  font-size: .95rem;
}
.dl-toast-text a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(48,77,161,.22);
}
.dl-toast-text a:hover{
  border-bottom-color: rgba(48,77,161,.42);
}

/* Actions (optional) */
.dl-toast-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Close button */
.dl-toast-close{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  color: rgba(11,18,32,.78);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-toast-close:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* Topline (very DutchLine) */
.dl-toast::before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.72), rgba(128,160,208,.26), transparent);
  opacity: .85;
}

/* Progress bar */
.dl-toast-progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(11,18,32,.06);
}
.dl-toast-progress > span{
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform linear;
  background: var(--accent);
   
}

/* Status colors: same logic as alerts (soft) */
.dl-toast-success{
  border-color: rgba(32,201,151,.24);
  background: linear-gradient(180deg, rgba(32,201,151), rgba(255,255,255,.92));
}
.dl-toast-success .dl-toast-icon{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.22);
}
.dl-toast-success .dl-toast-progress > span{ background: rgba(32,201,151,.95); }

.dl-toast-info{
  border-color: rgba(13,110,253,.22);
  background: linear-gradient(180deg, rgba(13,110,253), rgba(255,255,255,.92));
}
.dl-toast-info .dl-toast-icon{
  background: rgba(13,110,253,.7);
  border-color: rgba(13,110,253,.18);
}
.dl-toast-info .dl-toast-progress > span{ background: rgba(13,110,253,.92); }

.dl-toast-warning{
  border-color: rgba(255,193,7,.24);
  background: linear-gradient(180deg, rgba(255,193,7), rgba(255,255,255,.92));
}
.dl-toast-warning .dl-toast-icon{
  background: rgba(255,193,7,.14);
  border-color: rgba(255,193,7,.22);
}
.dl-toast-warning .dl-toast-progress > span{ background: rgba(255,193,7,.95); }

.dl-toast-danger,
.dl-toast-error{
  border-color: rgba(255,77,77,.22);
  background: linear-gradient(180deg, rgba(255,77,77), rgba(255,255,255,.92));
}
.dl-toast-danger .dl-toast-icon,
.dl-toast-error .dl-toast-icon{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.20);
}
.dl-toast-danger .dl-toast-progress > span,
.dl-toast-error .dl-toast-progress > span{ background: rgba(255,77,77,.92); }

/* Neutral: calmer, no brand tint */
.dl-toast-neutral{
  border-color: var(--border);
  background: rgba(255,255,255,.92);
}
.dl-toast-neutral .dl-toast-icon{
  background: rgba(11,18,32,.06);
  border-color: var(--border);
}
.dl-toast-neutral .dl-toast-progress > span{ background: rgba(11,18,32,.45); }

/* Accent: DutchLine brand */
.dl-toast-accent{
  border-color: rgba(48,77,161,.22);
  background: linear-gradient(180deg, rgba(48,77,161), rgba(255,255,255,.92));
}
.dl-toast-accent .dl-toast-icon{
  background: rgba(48,77,161,.12);
  border-color: rgba(48,77,161,.18);
}
.dl-toast-accent .dl-toast-progress > span{ background: rgba(48,77,161,.95); }

/* Compact variant */
.dl-toast-compact{
  padding: 12px;
  grid-template-columns: 38px 1fr auto;
}
.dl-toast-compact .dl-toast-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.dl-toast-compact .dl-toast-text{ margin-top: 4px; }

/* Confirm variant (no auto close unless you close) */
.dl-toast-confirm .dl-toast-progress{ display:none; }

/* Pause hint (when hovering) */
.dl-toast.is-paused .dl-toast-progress > span{
  opacity: .55;
}

/* Mobile: stack width full-ish */
@media (max-width: 575px){
  .dl-toast-stack{
    left: 12px;
    right: 12px;
    width: auto;
  }
}


/* ---- /assets/css/widgets.css ---- */
/* =========================================================
   widgets.css - DutchLine UI Widgets
   - KPI cards, panels, lists, mini charts, tables, states
   - consistent spacing, actions, headers
   - loading skeletons + empty/error blocks
   ========================================================= */

:root{
  --dl-success: #20c997;
  --dl-warning: #ffc107;
  --dl-danger:  #ff4d4d;
  --dl-info:    #0d6efd;

  --dl-success-soft: rgba(32,201,151,.12);
  --dl-warning-soft: rgba(255,193,7,.14);
  --dl-danger-soft:  rgba(255,77,77,.12);
  --dl-info-soft:    rgba(13,110,253,.12);
}

/* Widget shell */
.dl-widget{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-widget-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
}

.dl-widget-title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: 1.05rem;
}

.dl-widget-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: .93rem;
}

.dl-widget-actions{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.dl-widget-body{
  padding: 14px;
}

.dl-widget-foot{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

/* Tiny icon button (for widget head) */
.dl-wiconbtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  cursor:pointer;
  font-weight: 950;
}
.dl-wiconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* KPI widget (single card) */
.dl-kpi{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 14px;
  height: 100%;
}

.dl-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.dl-kpi-label{
  color: var(--muted);
  font-weight: 850;
  letter-spacing: .01em;
  font-size: .93rem;
}

.dl-kpi-value{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 1.75rem;
  line-height: 1.05;
}

.dl-kpi-meta{
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.dl-trend{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: .85rem;
  white-space:nowrap;
}

.dl-trend.up{
  border-color: rgba(32,201,151,.24);
  background: rgba(32,201,151,.12);
}
.dl-trend.down{
  border-color: rgba(255,77,77,.24);
  background: rgba(255,77,77,.12);
}
.dl-trend.neutral{
  background: rgba(11,18,32,.06);
}

/* KPI grid */
.dl-kpi-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.dl-kpi-col-3{ grid-column: span 3; }
.dl-kpi-col-4{ grid-column: span 4; }
.dl-kpi-col-6{ grid-column: span 6; }
.dl-kpi-col-12{ grid-column: span 12; }

@media (max-width: 991px){
  .dl-kpi-col-3,.dl-kpi-col-4,.dl-kpi-col-6{ grid-column: span 12; }
}

/* List widget */
.dl-wlist{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.dl-witem{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-witem:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 16px 40px rgba(11,18,32,.08);
}
.dl-witem-left{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-width: 0;
}
.dl-wdot{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 950;
  border: 1px solid var(--border);
  background: rgba(11,18,32,.06);
  flex: 0 0 auto;
}
.dl-wdot.success{ border-color: rgba(32,201,151,.22); background: rgba(32,201,151,.12); }
.dl-wdot.warning{ border-color: rgba(255,193,7,.22); background: rgba(255,193,7,.14); }
.dl-wdot.danger{  border-color: rgba(255,77,77,.22); background: rgba(255,77,77,.12); }
.dl-wdot.info{    border-color: rgba(13,110,253,.22); background: rgba(13,110,253,.12); }

.dl-witem-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
}
.dl-witem-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dl-witem-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

/* Mini chart placeholder */
.dl-mini-chart{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  height: 86px;
  overflow:hidden;
  position:relative;
}
.dl-mini-chart::after{
  content:"";
  position:absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,18,32,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,18,32,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .28;
  pointer-events:none;
}

/* Progress bar (widget style) */
.dl-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.08);
  overflow:hidden;
}
.dl-progress > span{
  display:block;
  height:100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease;
}

/* Table widget wrapper */
.dl-wtable{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow:hidden;
  background: rgba(255,255,255,.92);
}
.dl-wtable .table{
  margin: 0;
}
.dl-wtable thead th{
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.78);
  background: rgba(255,255,255,.94);
}
.dl-wtable tbody td{
  vertical-align: middle;
}
.dl-wtable tbody tr:hover{
  background: rgba(48,77,161,.05);
}

/* Widget states */
.dl-wstate{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(180deg, rgba(48,77,161,.06), rgba(255,255,255,.88));
  padding: 14px;
}
.dl-wstate .t{
  font-weight: 950;
  margin: 0;
  letter-spacing: -.01em;
}
.dl-wstate .p{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.6;
}
.dl-wstate.error{
  border-color: rgba(255,77,77,.28);
  background: linear-gradient(180deg, rgba(255,77,77,.10), rgba(255,255,255,.92));
}

/* Loading skeleton */
.dl-skel{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(11,18,32,.06) 0%,
    rgba(11,18,32,.06) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(11,18,32,.06) 70%,
    rgba(11,18,32,.06) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: dlSkel 1.4s ease-in-out infinite;
}
@keyframes dlSkel{
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.dl-skel-line{ height: 12px; border-radius: 10px; }
.dl-skel-line.lg{ height: 18px; }
.dl-skel-line.sm{ height: 10px; opacity:.8; }

.dl-hidden{ display:none !important; }
/* =========================
   DutchLine Tooltip (dl-tooltip)
   Gebruik:
   <span data-dl-tooltip="Tooltip tekst">Hover/focus</span>

   Optioneel:
   - data-dl-tooltip-pos="top|bottom|left|right" (default: top)
   - data-dl-tooltip-align="start|center|end"   (default: center)
   ========================= */

[data-dl-tooltip]{
  position: relative;
  z-index: 1;
  isolation: isolate;           /* eigen stacking context */
}

/* basis */
[data-dl-tooltip]::after,
[data-dl-tooltip]::before{
  position: absolute;
  opacity: 0;
  pointer-events: none;
    z-index: 100001;
  transition: opacity .14s ease, transform .14s ease;
}

/* bubble */
[data-dl-tooltip]::after{
  content: attr(data-dl-tooltip);
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: rgba(12, 18, 28, .96);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  white-space: nowrap;
  /* reset properties die buttons.css via ::after zet */
  right: auto;
  height: auto;
  width: auto;
}

/* arrow */
[data-dl-tooltip]::before{
  content: "";
  width: 0;
  height: 0;
}

/* show on hover/focus */
[data-dl-tooltip]:hover::after,
[data-dl-tooltip]:hover::before,
[data-dl-tooltip]:focus-visible::after,
[data-dl-tooltip]:focus-visible::before{
  opacity: 1;
  z-index: 100000;
}

/* =========================
   DEFAULT: top + center
   ========================= */
[data-dl-tooltip]::after{
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, -6px);
}
[data-dl-tooltip]::before{
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translate(-50%, -6px);

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip]:hover::after,
[data-dl-tooltip]:hover::before,
[data-dl-tooltip]:focus-visible::after,
[data-dl-tooltip]:focus-visible::before{
  transform: translate(-50%, 0);
}

/* =========================
   ALIGN (top/bottom): start|center|end
   ========================= */
[data-dl-tooltip][data-dl-tooltip-align="start"]::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]::before{
  left: 0;
  transform: translate(0, -6px);
}
[data-dl-tooltip][data-dl-tooltip-align="start"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-align="start"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]:focus-visible::before{
  transform: translate(0, 0);
}

[data-dl-tooltip][data-dl-tooltip-align="end"]::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]::before{
  left: auto;
  right: 0;
  transform: translate(0, -6px);
}
[data-dl-tooltip][data-dl-tooltip-align="end"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-align="end"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]:focus-visible::before{
  transform: translate(0, 0);
}

/* =========================
   POS: bottom
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]::after{
  top: calc(100% + 10px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]::before{
  top: calc(100% + 4px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 6px);

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(12, 18, 28, .96);
  border-top: 0;
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:focus-visible::before{
  transform: translate(-50%, 0);
}

/* bottom + align start/end */
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]::before{
  left: 0;
  transform: translate(0, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:focus-visible::before{
  transform: translate(0, 0);
}

[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]::before{
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:focus-visible::before{
  transform: translate(0, 0);
}

/* =========================
   POS: left
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="left"]::after{
  right: calc(100% + 10px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-6px, -50%);
}
[data-dl-tooltip][data-dl-tooltip-pos="left"]::before{
  right: calc(100% + 4px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-6px, -50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip][data-dl-tooltip-pos="left"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:focus-visible::before{
  transform: translate(0, -50%);
}

/* =========================
   POS: right
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="right"]::after{
  left: calc(100% + 10px);
  top: 50%;
  bottom: auto;
  transform: translate(6px, -50%);
}
[data-dl-tooltip][data-dl-tooltip-pos="right"]::before{
  left: calc(100% + 4px);
  top: 50%;
  bottom: auto;
  transform: translate(6px, -50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip][data-dl-tooltip-pos="right"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:focus-visible::before{
  transform: translate(0, -50%);
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  [data-dl-tooltip]::after,
  [data-dl-tooltip]::before{
    transition: none;
  }
}
.dl-tooltip-layer,
.dl-card,
.dl-table-wrap,
.dl-form-row{
  overflow: visible;
}
/* =========================================================
   Uitlegtooltip: brede variant + het vraagtekentje
   ---------------------------------------------------------
   De tooltip hierboven is gemaakt voor een kort woord en staat daarom op
   white-space:nowrap. Onze velduitleg is een hele zin - die werd een lint
   van 700px dat half buiten beeld viel. Vandaar de brede variant.

   Hoort bij Components\Tip\Tip.
   ========================================================= */

[data-dl-tooltip][data-dl-tooltip-wide]::after{
  white-space: normal;
  width: max-content;
  max-width: min(300px, 72vw);
  text-align: left;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}

/* Het vraagtekentje zelf. Het is een <button> en geen <span>, want alleen dan
   kun je er met de Tab-toets bij; de aria-label draagt dezelfde tekst als de
   bel, die een schermlezer niet kan zien. */
.dl-tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1;
  cursor: help;
  vertical-align: -2px;
  transition: color .14s ease;
}
.dl-tip:hover,
.dl-tip:focus{ color: var(--accent); }
.dl-tip:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Op een aanraakscherm bestaat zweven niet: daar opent een tik het tooltip,
   omdat een tik de knop focus geeft. :focus-visible alleen is niet genoeg -
   die matcht bij aanwijzen/tikken juist NIET. Uitlijning start, dus dezelfde
   eindstand als de hover-regel hierboven. */
.dl-tip:focus::after,
.dl-tip:focus::before{
  opacity: 1;
  transform: translate(0, 0);
}

/* =========================================================
   Tooltip aan de body (assets/js/tooltip.js)
   ---------------------------------------------------------
   De variant hierboven tekent op het element zelf en verdwijnt daardoor
   achter elke voorouder met overflow: een beheerkaart (overflow:hidden voor
   de ronde hoeken) en vooral een tabelwrapper (overflow-x:auto, en dan klipt
   de browser ook verticaal - een tooltip boven een kolomkop was volledig weg).

   Draait de JS, dan zet die `dl-tt-js` op <html> en nemen deze regels het
   over. Draait hij niet, dan blijft de CSS-variant gewoon werken.
   ========================================================= */

html.dl-tt-js [data-dl-tooltip]::after,
html.dl-tt-js [data-dl-tooltip]::before { content: none !important; }

.dl-tt {
  position: fixed;
  z-index: 100002;
  max-width: min(260px, 88vw);
  padding: 8px 11px;
  background: rgba(12, 18, 28, .96);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}
.dl-tt.is-on { opacity: 1; transform: none; }
.dl-tt[hidden] { display: none; }

/* Een hele zin mag breder dan een los woord. */
.dl-tt.is-wide { max-width: min(320px, 88vw); }

/* De pijl schuift horizontaal mee met de JS, zodat hij het element blijft
   aanwijzen ook als de bel tegen de schermrand is geduwd. */
.dl-tt-pijl {
  position: absolute;
  width: 0; height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(12, 18, 28, .96);
  bottom: -7px;
}
.dl-tt.is-onder .dl-tt-pijl {
  border-top: 0;
  border-bottom: 7px solid rgba(12, 18, 28, .96);
  bottom: auto;
  top: -7px;
}

@media (prefers-reduced-motion: reduce) {
  .dl-tt { transition: none; }
}


/* ---- /assets/css/badges.css ---- */
/* =========================================================
   badges.css - DutchLine UI (Badges) v1.0
   Goals:
   - Non-breaking: supports existing .dl-pill / .dl-badge
   - Future-proof: variants, sizes, dots, icons, clickable, closable
   - Token-based colors (works with your existing CSS vars)
   - Accessible defaults, calm premium styling
   ========================================================= */

/* ---------- Tokens (safe defaults) ---------- */
:root {
    --dl-badge-radius: 999px;
    --dl-badge-radius-sm: 12px;
    --dl-badge-font: 850;
    --dl-badge-letter: .01em;
    --dl-badge-pad-y: 8px;
    --dl-badge-pad-x: 10px;
    --dl-badge-pad-y-sm: 6px;
    --dl-badge-pad-x-sm: 8px;
    --dl-badge-pad-y-lg: 10px;
    --dl-badge-pad-x-lg: 12px;
    --dl-badge-border: var(--border);
    --dl-badge-border-2: var(--border2);
    --dl-badge-bg: rgba(255, 255, 255);
    --dl-badge-ink: rgba(11, 18, 32);
    --dl-badge-muted: var(--muted);
    --dl-accent-bg: var(--accent-soft, rgba(48, 77, 161));
    --dl-accent-bd: rgba(48, 77, 161);
    --dl-accent-ink: rgba(11, 18, 32);
    --dl-success-bg: rgba(32, 201, 151);
    --dl-success-bd: rgba(32, 201, 151);
    --dl-success-ink: rgba(11, 18, 32);
    --dl-danger-bg: rgba(255, 77, 77);
    --dl-danger-bd: rgba(255, 77, 77);
    --dl-danger-ink: rgba(11, 18, 32);
    --dl-warning-bg: rgba(255, 193, 7);
    --dl-warning-bd: rgba(255, 193, 7);
    --dl-warning-ink: rgba(11, 18, 32);
    --dl-info-bg: rgba(13, 110, 253);
    --dl-info-bd: rgba(13, 110, 253);
    --dl-info-ink: rgba(11, 18, 32);
    --dl-neutral-bg: rgba(11, 18, 32);
    --dl-neutral-bd: rgba(11, 18, 32);
    --dl-neutral-ink: rgba(11, 18, 32);
    --dl-soft-shadow: 0 10px 22px rgba(11, 18, 32, .2);
    --dl-soft-shadow-hover: 0 12px 26px rgba(11, 18, 32, .3);
}

/* =========================================================
   Base badge component
   - keep .dl-pill and .dl-badge as aliases
   ========================================================= */
.dl-badge,
.dl-pill{
  position: static;
  top: auto;
  left: auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: var(--dl-badge-pad-y) var(--dl-badge-pad-x);
  border-radius: var(--dl-badge-radius);
  border: 1px solid var(--dl-badge-border);
  background: var(--dl-badge-bg);
  color: var(--dl-badge-ink);
  font-weight: var(--dl-badge-font);
  letter-spacing: var(--dl-badge-letter);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  user-select:none;
}

/* Square-ish "label" style (optional) */
.dl-badge.dl-badge-label{
  border-radius: var(--dl-badge-radius-sm);
}

/* Sizes */
.dl-badge.dl-badge-sm,
.dl-pill.dl-pill-sm{
  padding: var(--dl-badge-pad-y-sm) var(--dl-badge-pad-x-sm);
  font-size: .88rem;
  border-radius: 999px;
}

.dl-badge.dl-badge-lg,
.dl-pill.dl-pill-lg{
  padding: var(--dl-badge-pad-y-lg) var(--dl-badge-pad-x-lg);
  font-size: 1.02rem;
}

/* Muted */
.dl-badge.dl-badge-muted,
.dl-pill.dl-pill-muted{
  color: var(--dl-badge-muted);
}

/* =========================================================
   Variants (soft)
   ========================================================= */
.dl-badge-accent{ background: var(--dl-accent-bg); border-color: var(--dl-accent-bd); color: var(--dl-accent-ink); }
.dl-badge-success{ background: var(--dl-success-bg); border-color: var(--dl-success-bd); color: #fff; }
.dl-badge-danger{  background: var(--dl-danger-bg);  border-color: var(--dl-danger-bd);  color: #fff; }
.dl-badge-warning{ background: var(--dl-warning-bg); border-color: var(--dl-warning-bd); color: #fff; }
.dl-badge-info{    background: var(--dl-info-bg);    border-color: var(--dl-info-bd);   color: #fff; }
.dl-badge-neutral{ background: var(--dl-neutral-bg); border-color: var(--dl-neutral-bd); color: #fff; }

/* Outline variants (no fill) */
.dl-badge-outline{ background: transparent; color: var(--dl-neutral-ink);}
.dl-badge-outline.dl-badge-accent{ border-color: var(--dl-accent-bd); }
.dl-badge-outline.dl-badge-success{ border-color: var(--dl-success-bd); }
.dl-badge-outline.dl-badge-danger{ border-color: var(--dl-danger-bd); }
.dl-badge-outline.dl-badge-warning{ border-color: var(--dl-warning-bd); }
.dl-badge-outline.dl-badge-info{ border-color: var(--dl-info-bd); }
.dl-badge-outline.dl-badge-neutral{ border-color: var(--dl-neutral-bd); }

/* Solid variants (optional; calm) */
.dl-badge-solid{ color: #fff; border-color: transparent; }
.dl-badge-solid.dl-badge-accent{ background: rgba(48,77,161,.88); }
.dl-badge-solid.dl-badge-success{ background: rgba(32,201,151,.88); }
.dl-badge-solid.dl-badge-danger{ background: rgba(255,77,77,.86); }
.dl-badge-solid.dl-badge-warning{ background: rgba(255,193,7,.92); color: rgba(11,18,32,.92); }
.dl-badge-solid.dl-badge-info{ background: rgba(13,110,253,.88); }
.dl-badge-solid.dl-badge-neutral{ background: rgba(11,18,32,.72); }

/* =========================================================
   Dot indicator (status dot)
   ========================================================= */
.dl-badge-dot::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}

.dl-badge-dot.dl-badge-success::before{ background: rgba(32,201,151,.95); }
.dl-badge-dot.dl-badge-danger::before{  background: rgba(255,77,77,.95); }
.dl-badge-dot.dl-badge-warning::before{ background: rgba(255,193,7,.95); }
.dl-badge-dot.dl-badge-info::before{    background: rgba(13,110,253,.95); }
.dl-badge-dot.dl-badge-neutral::before{ background: rgba(11,18,32,.55); }
.dl-badge-dot.dl-badge-accent::before{  background: rgba(48,77,161,.95); }

/* =========================================================
   Icon support
   - Put any <i> or <svg> inside badge
   ========================================================= */
.dl-badge i,
.dl-badge svg,
.dl-pill i,
.dl-pill svg{
  flex: 0 0 auto;
  opacity: .85;
}

/* =========================================================
   Clickable / link badges
   ========================================================= */
a.dl-badge,
a.dl-pill,
button.dl-badge,
button.dl-pill{
  cursor:pointer;
  text-decoration:none;
}

.dl-badge.is-clickable,
.dl-pill.is-clickable{
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: var(--dl-soft-shadow);
}

.dl-badge.is-clickable:hover,
.dl-pill.is-clickable:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--dl-badge-border-2);
  color: var(--ink);
  box-shadow: var(--dl-soft-shadow-hover);
}

.dl-badge:focus,
.dl-pill:focus{ outline:none; }
.dl-badge:focus-visible,
.dl-pill:focus-visible{
  box-shadow: 0 0 0 6px var(--focus), var(--dl-soft-shadow-hover);
}

/* Disabled */
.dl-badge.is-disabled,
.dl-pill.is-disabled,
.dl-badge[aria-disabled="true"],
.dl-pill[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}

/* =========================================================
   Count badge (like notifications)
   ========================================================= */
.dl-badge-count{
  display:inline-grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--dl-badge-border);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: .82rem;
  color: rgba(11,18,32,.90);
}

/* =========================================================
   Closable badge (optional)
   - Add button[data-dl-badge-close]
   ========================================================= */
.dl-badge .dl-badge-close,
.dl-pill .dl-badge-close{
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  opacity: .7;
}

.dl-badge .dl-badge-close:hover,
.dl-pill .dl-badge-close:hover{
  opacity: 1;
  background: rgba(11,18,32,.06);
}

/* =========================================================
   Group helper (optional)
   ========================================================= */
.dl-badge-group{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
/* =========================================================
   Corner counter (notification dot/number on edge)
   Usage:
     <span class="dl-pill dl-badge-accent dl-badge-corner">
       <i class="bi bi-bell"></i> Meldingen
       <span class="dl-badge-corner-count">1</span>
     </span>
   ========================================================= */

.dl-badge-corner,
.dl-pill.dl-badge-corner,
.dl-badge.dl-badge-corner{
  position: relative;
  padding-right: calc(var(--dl-badge-pad-x) + 14px); /* ruimte voor corner */
}

.dl-badge-corner .dl-badge-corner-count{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;
  display: inline-grid;
  place-items: center;

  font-weight: 950;
  font-size: .74rem;
  line-height: 1;

  color: #fff;
  background: rgba(255,77,77,.95); /* default “notif” */
  border: 2px solid rgba(255,255,255,.92); /* ring voor contrast */
  box-shadow: 0 10px 18px rgba(11,18,32,.18);
}

/* Small badge corner */
.dl-badge-sm.dl-badge-corner .dl-badge-corner-count,
.dl-pill-sm.dl-badge-corner .dl-badge-corner-count{
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  font-size: .70rem;
}

/* Large badge corner */
.dl-badge-lg.dl-badge-corner .dl-badge-corner-count,
.dl-pill-lg.dl-badge-corner .dl-badge-corner-count{
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  font-size: .78rem;
}

/* Variant helpers for the corner itself */
.dl-badge-corner .dl-badge-corner-count.is-accent{ background: rgba(48,77,161); }
.dl-badge-corner .dl-badge-corner-count.is-success{ background: rgba(32,201,151,.95); }
.dl-badge-corner .dl-badge-corner-count.is-warning{ background: rgba(255,193,7,.98); color: rgba(11,18,32,.92); }
.dl-badge-corner .dl-badge-corner-count.is-info{ background: rgba(13,110,253,.95); }
.dl-badge-corner .dl-badge-corner-count.is-neutral{ background: rgba(11,18,32); }

/* Dot-only (no number) */
.dl-badge-corner .dl-badge-corner-count.is-dot{
  min-width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
}


/* ---- /assets/css/cards.css ---- */
/* =========================================================
   cards.css - DutchLine Cards (premium extensions)
   Requires: theme-core.css variables ( --r2, --border, --border2, --shadow2, --panel, --surface, --muted, --muted2, --ink )
   ========================================================= */

:root{
  --dl-card-pad: var(--card-pad, 16px);
  --dl-card-gap: 12px;

  --dl-card-ring: rgba(48,77,161,.22);
  --dl-card-ring2: rgba(48,77,161,.34);

  --dl-card-shine: rgba(255,255,255,.72);
  --dl-card-shine2: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------
   Base (non-breaking extension to your .dl-card)
   --------------------------------------------------------- */

.dl-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  isolation: isolate;
}

.dl-card:focus-visible{
  box-shadow:
    0 0 0 4px var(--dl-card-ring),
    var(--shadow2);
  border-color: var(--border2);
}

/* Premium hover sheen overlay */
.dl-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    radial-gradient(520px 220px at 25% 15%, rgba(48,77,161,.10), transparent 60%),
    radial-gradient(600px 220px at 75% 0%, rgba(128,160,208,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 36%);
  mix-blend-mode: normal;
}
.dl-card:hover::before{ opacity: 1; }

/* Optional "clickable" cursor */
.dl-card[data-href]{
  cursor: pointer;
}

/* ---------------------------------------------------------
   Card layout helpers
   --------------------------------------------------------- */

/* Header bar - sits above dl-card-body inside a dl-card */
.dl-card-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--dl-card-pad);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  font-weight: 700;
  font-size: .95rem;
  color: rgba(11,18,32,.86);
  min-height: 46px;
  flex-shrink: 0;
}

/* Round top corners to match parent card */
.dl-card > .dl-card-header:first-child{
  border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;
}

/* Subtle accent line at the very top of the header (mirrors dl-card-topline vibe) */
.dl-card > .dl-card-header:first-child::before{
  display: none; /* opt-in only via .has-accent modifier */
}
.dl-card > .dl-card-header.has-accent{
  background:
    linear-gradient(180deg, rgba(48,77,161,.04), rgba(255,255,255,.96)),
    rgba(255,255,255,.96);
  border-top: 2px solid rgba(48,77,161,.40);
  border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;
}

/* When header is NOT the first child (e.g. after topline) */
.dl-card > .dl-card-topline + .dl-card-header{
  border-radius: 0;
}

.dl-card-body{
  display: grid;
  gap: var(--dl-card-gap);
}

.dl-card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-width: 0;
}

.dl-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px var(--dl-card-pad);
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.82);
}

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

/* Compact density */
.dl-card.is-compact .dl-card-body{ gap: 10px; }
.dl-card.is-compact .dl-card-body{ padding: 14px; }
.dl-card.is-compact .dl-card-footer{ padding: 10px 14px; }

/* ---------------------------------------------------------
   Media (thumb variants)
   --------------------------------------------------------- */

.dl-thumb{
  overflow:hidden;
}

.dl-thumb.is-square{ aspect-ratio: 1 / 1; }
.dl-thumb.is-portrait{ aspect-ratio: 4 / 5; }
.dl-thumb.is-landscape{ aspect-ratio: 16 / 10; }
.dl-thumb.is-wide{ aspect-ratio: 21 / 9; }

.dl-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* Cover variant for real photography */
.dl-thumb.is-cover img{ object-fit: cover; }

/* Subtle inner border for media area */
.dl-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid rgba(11,18,32,.06);
  border-radius: inherit;
  pointer-events:none;
}

/* ---------------------------------------------------------
   Badges & status
   --------------------------------------------------------- */

.dl-badge{
  z-index: 2;
}

.dl-badge.is-soft{
  background: rgba(255,255,255,.92);
}

.dl-badge.is-accent{
  border-color: rgba(48,77,161,.25);
  box-shadow: 0 0 0 6px rgba(48,77,161,.08);
}

.dl-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: .85rem;
  color: rgba(11,18,32,.84);
}
.dl-status .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(48,77,161,.25);
  box-shadow: 0 6px 16px rgba(11,18,32,.10);
}

/* ---------------------------------------------------------
   Meta list (nice for specs)
   --------------------------------------------------------- */

.dl-meta-list{
  display:grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style:none;
  color: var(--muted2);
  font-size: .92rem;
}
.dl-meta-list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  line-height: 1.45;
}
.dl-meta-list .k{
  min-width: 100px;
  color: rgba(11,18,32,.62);
}
.dl-meta-list .v{
  font-weight: 800;
  color: rgba(11,18,32,.88);
}

/* ---------------------------------------------------------
   Selectable cards (optional JS)
   --------------------------------------------------------- */

.dl-card.is-selectable{
  padding-left: 0; /* purely semantic */
}

.dl-card .dl-card-select{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  font-weight: 950;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  z-index: 3;
}
.dl-card:hover .dl-card-select{
  opacity: 1;
  transform: translateY(0);
}
.dl-card.is-selected{
  border-color: rgba(48,77,161,.38);
  box-shadow:
    0 0 0 6px rgba(48,77,161,.12),
    var(--shadow2);
}
.dl-card.is-selected .dl-card-select{
  opacity: 1;
  border-color: rgba(48,77,161,.35);
  box-shadow: 0 10px 22px rgba(11,18,32,.12);
}
.dl-card.is-selected .dl-card-select::after{
  content:"✓";
}

/* ---------------------------------------------------------
   Collapsible card (optional JS)
   --------------------------------------------------------- */

.dl-card .dl-card-collapse{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-card .dl-card-collapse:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}
.dl-card .dl-card-collapse .chev{
  display:inline-block;
  transition: transform .18s ease;
}
.dl-card.is-collapsed .dl-card-collapse .chev{
  transform: rotate(-90deg);
}
.dl-card .dl-card-collapse-target{
  /* this is the content region you collapse */
}
.dl-card.is-collapsed .dl-card-collapse-target{
  display:none !important;
}

/* ---------------------------------------------------------
   Skeleton / loading (pure CSS utility)
   --------------------------------------------------------- */

.dl-skeleton{
  position: relative;
  overflow:hidden;
  border-radius: 12px;
  background: rgba(11,18,32,.06);
}
.dl-skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-55%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: dl_skeleton 1.1s linear infinite;
}
@keyframes dl_skeleton{
  to{ transform: translateX(55%); }
}

/* ---------------------------------------------------------
   Panel (nice spacing helpers - doesn't override your dl-panel)
   --------------------------------------------------------- */

.dl-panel .dl-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.dl-panel .dl-panel-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.15;
  font-size: 1.2rem;
  margin: 0;
}

.dl-panel .dl-panel-sub{
  margin: 6px 0 0;
  color: var(--muted2);
  font-size: .95rem;
  line-height: 1.55;
}
/* =========================================================
   Auto-fix: dropdowns/selects inside cards
   - No extra classes required
   - Uses :has() where supported
   ========================================================= */

@supports selector(.dl-card:has(select)){

  /* If a card contains any form control, allow popovers to escape */
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"], [aria-haspopup="listbox"], [aria-haspopup="menu"], [data-dropdown]){
    overflow: visible; /* key */
  }

  /* Keep only the media area clipped (so rounded card still looks perfect) */
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"], [aria-haspopup="listbox"], [aria-haspopup="menu"], [data-dropdown]) .dl-thumb{
    overflow: hidden;
  }

  /* Prevent transform/stacking weirdness when interacting with form fields */
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"]) :is(select, input, textarea, [role="combobox"]):focus{
    outline: none;
  }
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"]):focus-within{
    transform: none !important;
    z-index: 30;
  }
}
/* Fallback class for browsers without :has() (added by cards.js automatically) */
.dl-card.dl-card--hasform{
  overflow: visible;
}
.dl-card.dl-card--hasform .dl-thumb{
  overflow: hidden;
}
.dl-card.dl-card--hasform:focus-within{
  transform: none !important;
  z-index: 30;
}


/* ---- /assets/css/hero.css ---- */
/* ==========================================================================
   hero.css
   --------------------------------------------------------------------------
   Donkere page-headers (hero-panelen) merkbreed leesbaar maken.

   Probleem: een hero heeft de accentkleur als achtergrond (DutchLine navy of
   Enka zwart). Componenten binnen die hero gebruiken diezelfde accentkleur
   voor hun tekst/vulling - dl-btn-soft, dl-btn-neutral, dl-admin-badge.accent,
   links - waardoor ze onzichtbaar worden (donker op donker).

   Oplossing: elk donker hero-paneel krijgt de class `dl-hero-dark` (of is een
   `dl-admin-hero`) en alle componenten daarbinnen worden geforceerd naar een
   wit paar. Zo hoeft geen enkele pagina dit nog zelf te regelen.

   Gebruik:
     <div class="dl-hero-dark">...</div>          -> merkkleur + witte componenten
     <div class="mijn-eigen-hero dl-hero-dark">   -> eigen layout, wel de fix

   Wordt op ELKE pagina geladen (ook dealers/warehouse), niet alleen admin.
   ========================================================================== */

:root {
  /* Merk-afhankelijke hero-achtergrond. DutchLine = navy, Enka = zwart. */
  --dl-hero-gradient: linear-gradient(135deg, var(--dl-blue-700, #304DA1), var(--dl-blue-900, #1E3375));
}
body.is-enka {
  --dl-hero-gradient: linear-gradient(135deg, #0a0a0a, #1a1a1a);
}

.dl-hero-dark {
  background: var(--dl-hero-gradient);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Gedempte tekst: blijft gedempt, maar wit-transparant i.p.v. donkergrijs.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .text-muted,
:is(.dl-admin-hero, .dl-hero-dark) .cell-muted,
:is(.dl-admin-hero, .dl-hero-dark) .dlac-meta,
:is(.dl-admin-hero, .dl-hero-dark) .form-label,
:is(.dl-admin-hero, .dl-hero-dark) .dl-help,
:is(.dl-admin-hero, .dl-hero-dark) .opacity-75 { color: rgba(255, 255, 255, .78) !important; }

/* Losse links (geen knop) - wit met subtiele underline. */
:is(.dl-admin-hero, .dl-hero-dark) a:not(.dl-btn):not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
}
:is(.dl-admin-hero, .dl-hero-dark) a:not(.dl-btn):not(.btn):hover { text-decoration-color: #fff; }

/* --------------------------------------------------------------------------
   Knoppen: primary = wit gevuld, alle zachte varianten = wit omlijnd.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-primary,
:is(.dl-admin-hero, .dl-hero-dark) .btn-primary {
  background: #fff !important;
  background-image: none !important;
  color: var(--accent-dark, #1E3375) !important;
  border-color: #fff !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-ghost,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-soft,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-neutral,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-outline,
:is(.dl-admin-hero, .dl-hero-dark) .btn-light,
:is(.dl-admin-hero, .dl-hero-dark) .btn-outline-primary,
:is(.dl-admin-hero, .dl-hero-dark) .btn-secondary {
  background: rgba(255, 255, 255, .12) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .45) !important;
}
/* Semantische varianten houden hun kleur, maar met witte tekst. */
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-success,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-danger,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-warning { color: #fff !important; }

:is(.dl-admin-hero, .dl-hero-dark) .dl-btn::before,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn::after { background: none !important; opacity: 0 !important; }

@media (hover:hover) {
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-primary:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .btn-primary:hover { background: rgba(255, 255, 255, .88) !important; }
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-ghost:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-soft:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-neutral:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-outline:hover { background: rgba(255, 255, 255, .24) !important; }
}

/* --------------------------------------------------------------------------
   Badges/pills: neutraal wit-transparant. Statuskleuren blijven herkenbaar
   (groen/geel/rood/blauw) maar in een lichte tint die op donker leesbaar is.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge,
:is(.dl-admin-hero, .dl-hero-dark) .dl-pill,
:is(.dl-admin-hero, .dl-hero-dark) .badge {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.ok,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-success {
  background: rgba(74, 222, 128, .20) !important;
  color: #d1fae5 !important; border-color: rgba(74, 222, 128, .45) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.warn,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-warning {
  background: rgba(250, 204, 21, .20) !important;
  color: #fef9c3 !important; border-color: rgba(250, 204, 21, .45) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.err,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-danger {
  background: rgba(248, 113, 113, .22) !important;
  color: #fee2e2 !important; border-color: rgba(248, 113, 113, .45) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.info,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-info {
  background: rgba(56, 189, 248, .20) !important;
  color: #e0f2fe !important; border-color: rgba(56, 189, 248, .45) !important;
}

/* --------------------------------------------------------------------------
   Formuliervelden in een hero (zoek-/filterbalk in de header).
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .form-control,
:is(.dl-admin-hero, .dl-hero-dark) .form-select {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
:is(.dl-admin-hero, .dl-hero-dark) .form-control::placeholder { color: rgba(255, 255, 255, .65); }
:is(.dl-admin-hero, .dl-hero-dark) .form-control:focus,
:is(.dl-admin-hero, .dl-hero-dark) .form-select:focus {
  background: rgba(255, 255, 255, .18);
  border-color: #fff; color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

/* --------------------------------------------------------------------------
   Alleen .dl-admin-hero: die bevat nooit lichte sub-panelen, dus daar mag
   alle tekst hard op wit. Page-specifieke dl-hero-dark panelen regelen hun
   eigen tekstkleur (sommige hebben een wit onderblok).
   -------------------------------------------------------------------------- */
.dl-admin-hero,
.dl-admin-hero h1, .dl-admin-hero h2, .dl-admin-hero h3, .dl-admin-hero h4,
.dl-admin-hero p, .dl-admin-hero span, .dl-admin-hero strong, .dl-admin-hero b,
.dl-admin-hero small, .dl-admin-hero li, .dl-admin-hero label, .dl-admin-hero i,
.dl-admin-hero time, .dl-admin-hero div { color: #fff; }

/* --------------------------------------------------------------------------
   UITZONDERING: alles BINNEN een knop volgt de knopkleur
   --------------------------------------------------------------------------
   De regel hierboven zet elke <i>, <span> en <div> in de hero op wit. Ghost- en
   primary-knoppen krijgen in de hero juist een WITTE achtergrond met donkere
   tekst - het icoon werd daardoor wit op wit en dus onzichtbaar. Binnen een
   knop erft alles daarom de kleur van de knop zelf.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) :is(.dl-btn, .btn, .dlap-btn) :is(i, span, strong, small, svg, div) {
  color: inherit;
}
/* Badges in de hero houden hun eigen status-kleuren (ok/warn/err/muted). */
:is(.dl-admin-hero, .dl-hero-dark) :is(.dl-admin-badge, .dl-badge) :is(i, span) {
  color: inherit;
}


/* ---- /assets/css/auth.css ---- */
/* Brand-aware kleur-variabelen voor de auth-paginas (login + password reset).
 * Default = DutchLine donkerblauw. Bij APP_LINE=enka krijgt body de class
 * "is-enka" en pakken alle .auth-* elementen automatisch de zwarte Enka-variant. */
:root {
  --auth-ink:        #131F3F;
  --auth-ink-2:      #1E3375;
  --auth-ink-rgb:    19, 31, 63;
  --auth-bg-1:       #f5f7fb;
  --auth-bg-2:       #eef2f8;
}
body.is-enka {
  --auth-ink:        #0a0a0a;
  --auth-ink-2:      #1a1a1a;
  --auth-ink-rgb:    10, 10, 10;
  --auth-bg-1:       #fafafa;
  --auth-bg-2:       #f2f2f2;
}

.auth-page{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(var(--auth-ink-rgb),.22), transparent 28%),
    radial-gradient(circle at left center, rgba(var(--auth-ink-rgb),.14), transparent 26%),
    linear-gradient(180deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 100%);
}

.auth-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.02) 0,
      rgba(15,23,42,.02) 1px,
      transparent 1px,
      transparent 120px
    );
  pointer-events:none;
}

.auth-layout{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 160px);
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(380px, 470px);
  gap:28px;
  align-items:stretch;
  padding:42px 0;
}

.auth-hero{
  position:relative;
  min-height:640px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(244,248,250,.96) 100%);
  box-shadow:0 30px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}

.auth-hero::before{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--auth-ink-rgb),.18) 0%, rgba(var(--auth-ink-rgb),0) 70%);
  pointer-events:none;
}

.auth-hero::after{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--auth-ink-rgb),.10) 0%, rgba(var(--auth-ink-rgb),0) 72%);
  pointer-events:none;
}

.auth-hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:640px;
  padding:34px;
}

.auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(var(--auth-ink-rgb),.08);
  color:var(--auth-ink);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.auth-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 6px rgba(var(--auth-ink-rgb),.10);
}

.auth-title{
  margin:0 0 14px;
  font-size:clamp(2.2rem, 4vw, 3.85rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.04em;
  color:#0f172a;
}

.auth-title span{
  color:var(--auth-ink);
}

.auth-text{
  max-width:620px;
  margin:0;
  font-size:1.05rem;
  line-height:1.8;
  color:#475569;
}

.auth-feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.auth-feature-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 14px 34px rgba(15,23,42,.05);
  backdrop-filter:blur(8px);
}

.auth-feature-card__icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, var(--auth-ink), var(--auth-ink));
  color:#fff;
  font-size:1.08rem;
  box-shadow:0 10px 24px rgba(var(--auth-ink-rgb),.25);
}

.auth-feature-card__body h2{
  /* 5px -> 12px: minimale ruimte tussen een kop en wat eronder staat. */
  margin:0 0 12px;
  font-size:1rem;
  line-height:1.35;
  color:#0f172a;
  font-weight:800;
}

.auth-feature-card__body p{
  margin:0;
  font-size:.94rem;
  line-height:1.6;
  color:#64748b;
}

.auth-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.auth-stat-card{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(248,250,252,.88) 100%);
  border:1px solid rgba(15,23,42,.06);
}

.auth-stat-card strong{
  display:block;
  margin-bottom:4px;
  font-size:1.55rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:#0f172a;
}

.auth-stat-card span{
  display:block;
  font-size:.86rem;
  color:#64748b;
  line-height:1.45;
}

.auth-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.auth-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.06);
  color:#334155;
  font-size:.85rem;
  font-weight:700;
}

.auth-badge i{
  color:var(--auth-ink);
}

.auth-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:640px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 34px 80px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(180deg, var(--auth-ink), var(--auth-ink));
}

.auth-card__body{
  position:relative;
  padding:34px 30px 28px;
}

.auth-card__header{
  margin-bottom:24px;
}

.auth-card__header h2{
  margin:0 0 8px;
  font-size:2rem;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#0f172a;
  font-weight:900;
}

.auth-card__header p{
  margin:0;
  color:#64748b;
  line-height:1.7;
}

.auth-alert{
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:16px;
  font-size:.95rem;
  line-height:1.55;
}

.auth-alert--danger{
  border:1px solid rgba(185,28,28,.14);
  background:#fef2f2;
  color:#991b1b;
}

.auth-alert--success{
  border:1px solid rgba(22,163,74,.14);
  background:#f0fdf4;
  color:#166534;
}

.auth-field{
  margin-bottom:18px;
}

.auth-label{
  display:block;
  margin-bottom:8px;
  font-size:.92rem;
  font-weight:800;
  color:#0f172a;
}

.auth-label--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
/* "Wachtwoord vergeten?" was 21px hoog: te klein om te raken. De label-rij
   groeit niet mee, de link krijgt alleen een groter klikvlak. */
.auth-label--split a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  margin-block:-8px;
}
@media (max-width: 768px){
  .auth-label--split a{ min-height:44px; margin-block:-12px; }
}

.auth-label--split a{
  font-size:.88rem;
  font-weight:700;
  text-decoration:none;
  color:var(--auth-ink);
}

.auth-label--split a:hover{
  text-decoration:underline;
}

.auth-input-wrap{
  position:relative;
}

.auth-input-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#64748b;
  font-size:1rem;
  pointer-events:none;
}

.auth-input{
  width:100%;
  min-height:58px;
  padding:15px 16px 15px 46px;
  border-radius:18px;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#0f172a;
  font-size:1rem;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
  transition:border-color .18s ease, box-shadow .18s ease;
}

.auth-input--password{
  padding-right:58px;
}

.auth-input:focus{
  outline:none;
  border-color:var(--auth-ink);
  box-shadow:0 0 0 4px rgba(var(--auth-ink-rgb),.12);
}

.auth-input.is-invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 4px rgba(220,38,38,.10);
}

.auth-password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#64748b;
}

.auth-password-toggle:hover{
  background:#f8fafc;
  color:#0f172a;
}

.auth-help{
  margin-top:7px;
  font-size:.85rem;
  color:#64748b;
}

.auth-error{
  display:none;
  margin-top:7px;
  font-size:.84rem;
  color:#dc2626;
  font-weight:700;
}

.auth-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:2px 0 22px;
}

.auth-checkbox{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#475569;
  font-size:.94rem;
  user-select:none;
}

.auth-checkbox input{
  width:18px;
  height:18px;
  accent-color:var(--auth-ink);
}

.auth-submit{
  width:100%;
  min-height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:18px;
  background:linear-gradient(180deg, var(--auth-ink), var(--auth-ink));
  color:#fff;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.01em;
  box-shadow:0 18px 36px rgba(var(--auth-ink-rgb),.26);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.auth-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 42px rgba(var(--auth-ink-rgb),.30);
  color:#fff;
}

.auth-submit:disabled{
  opacity:.75;
  cursor:not-allowed;
  transform:none;
}

.auth-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.auth-action-btn{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#0f172a;
  font-weight:700;
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.auth-action-btn:hover{
  transform:translateY(-1px);
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#0f172a;
}

.auth-note{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(15,23,42,.08);
  font-size:.92rem;
  line-height:1.65;
  color:#64748b;
}

.auth-note a{
  color:var(--auth-ink);
  font-weight:700;
  text-decoration:none;
}

.auth-note a:hover{
  text-decoration:underline;
}

@media (max-width: 1199.98px){
  .auth-layout{
    grid-template-columns:minmax(0,1fr) minmax(360px,430px);
  }

  .auth-hero,
  .auth-hero__inner,
  .auth-card{
    min-height:600px;
  }
}

@media (max-width: 991.98px){
  .auth-layout{
    min-height:auto;
    grid-template-columns:1fr;
    padding:26px 0 36px;
  }

  .auth-hero,
  .auth-hero__inner,
  .auth-card{
    min-height:auto;
  }

  .auth-hero__inner{
    padding:28px;
  }
}

@media (max-width: 767.98px){
  .auth-layout{
    padding:18px 0 28px;
  }

  .auth-hero{
    border-radius:22px;
  }

  .auth-hero__inner{
    padding:22px 18px;
  }

  .auth-card{
    border-radius:22px;
  }

  .auth-card__body{
    padding:24px 18px 20px;
  }

  .auth-stat-grid{
    gap:10px;
  }

  .auth-stat-card strong{
    font-size:1.3rem;
  }

  .auth-title{
    font-size:2.15rem;
  }

  .auth-card__header h2{
    font-size:1.7rem;
  }

  .auth-options{
    flex-direction:column;
    align-items:flex-start;
  }

  .auth-label--split{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 479.98px){
  .auth-feature-grid{
    grid-template-columns:1fr;
  }

  .auth-actions{
    grid-template-columns:1fr;
  }

  .auth-stat-grid{
    grid-template-columns:1fr;
  }

  .auth-feature-card{
    padding:14px;
  }

  .auth-card__body{
    padding:20px 14px 16px;
  }
}

/* ---- /assets/css/cookie-consent.css ---- */
/* ============================================================
   DutchLine Cookie Consent Banner
   Stijl: DutchLine design system (--accent / --dl-color-primary)
   ============================================================ */

/* ── Banner: vast onderaan het scherm ── */
.dl-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: #fff;
  border-top: 2px solid var(--accent, #304DA1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
}

/* ── Hoofdbalk ── */
.dl-cookie-banner__bar {
  padding: .85rem 0;
}

.dl-cookie-banner__text strong {
  font-weight: 700;
  color: #131F3F;
  font-size: .9rem;
}

.dl-cookie-banner__text .text-muted-2 {
  font-size: .82rem;
  color: #6b7280;
}

/* ── Uitklapbaar categorieënpaneel ── */
.dl-cookie-panel {
  background: #f8f9fc;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.dl-cookie-cat {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  height: 100%;
}

.dl-cookie-cat .fw-semibold {
  font-size: .875rem;
  color: #131F3F;
}

.dl-cookie-cat p {
  font-size: .8rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* ── "Altijd actief" badge ── */
.dl-cookie-badge-required {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent, #304DA1);
  background: color-mix(in srgb, var(--accent, #304DA1) 10%, transparent);
  border-radius: 20px;
  padding: .2rem .6rem;
  letter-spacing: .02em;
}

/* ── iOS-stijl toggle switch ── */
.dl-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.dl-toggle__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dl-toggle__slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 24px;
  transition: background .2s;
  cursor: pointer;
}

.dl-toggle__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  transition: transform .2s;
}

.dl-toggle__input:checked + .dl-toggle__slider {
  background: var(--accent, #304DA1);
}

.dl-toggle__input:checked + .dl-toggle__slider::before {
  transform: translateX(18px);
}

.dl-toggle__input:focus-visible + .dl-toggle__slider {
  outline: 2px solid var(--accent, #304DA1);
  outline-offset: 2px;
}

/* ── Panel footer ── */
.dl-cookie-panel .d-flex a {
  color: #6b7280;
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dl-cookie-panel .d-flex a:hover {
  color: var(--accent, #304DA1);
}

/* ── "Weigeren" even prominent als "Accepteren" ── */
#dl-cookie-reject {
  background: #fff;
  border: 1.5px solid var(--accent, #304DA1);
  color: var(--accent, #304DA1);
  font-weight: 600;
}
#dl-cookie-reject:hover {
  background: color-mix(in srgb, var(--accent, #304DA1) 8%, #fff);
  color: var(--accent, #304DA1);
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .dl-cookie-banner__bar .container {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem !important;
  }

  .dl-cookie-banner__bar .d-flex.gap-2 {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Knoppen stapelen, volle breedte, minimaal 44px raakvlak */
  .dl-cookie-banner__bar .dl-btn {
    flex: 1 1 100%;
    min-height: 44px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  /* Accepteren bovenaan als primaire keuze, weigeren direct eronder */
  #dl-cookie-accept   { order: 1; }
  #dl-cookie-reject   { order: 2; }
  #dl-cookie-customize{ order: 3; }

  .dl-cookie-panel .dl-btn { min-height: 44px; }

  .dl-cookie-cat {
    margin-bottom: .5rem;
  }
}


/* ---- /assets/css/pwa-install.css ---- */
/* /assets/css/pwa-install.css - install banner + iOS instructie modal */

/* ── Banner (rechtsonder) ───────────────────────────────────────────────────── */
.dl-pwa-banner {
  position: fixed;
  z-index: 1080;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border, rgba(11,18,32,.10));
  border-radius: var(--r, 14px);
  box-shadow: var(--shadow, 0 20px 60px rgba(11,18,32,.18));
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon body"
    "actions actions";
  gap: 10px 12px;
  align-items: start;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s ease, opacity .2s ease;
  font-family: inherit;
}
.dl-pwa-banner.is-visible { transform: translateY(0); opacity: 1; }

.dl-pwa-banner__icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft, rgba(48,77,161,.10));
  color: var(--accent, #304DA1);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.dl-pwa-banner__body  { grid-area: body; min-width: 0; }
.dl-pwa-banner__title { font-weight: 700; color: var(--ink, #0b1220); margin-bottom: 2px; font-size: 14px; }
.dl-pwa-banner__text  { font-size: 13px; color: var(--muted, rgba(11,18,32,.70)); line-height: 1.4; }
.dl-pwa-banner__actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}
.dl-pwa-banner__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted, rgba(11,18,32,.55));
  border-radius: 8px;
  cursor: pointer;
}
.dl-pwa-banner__close:hover { background: rgba(11,18,32,.06); color: var(--ink, #0b1220); }

@media (max-width: 480px) {
  .dl-pwa-banner { right: 8px; bottom: 8px; max-width: none; width: calc(100vw - 16px); }
}

/* ── iOS instructie modal ───────────────────────────────────────────────────── */
.dl-pwa-ios {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.dl-pwa-ios.is-visible { opacity: 1; }

.dl-pwa-ios__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,.55);
}
.dl-pwa-ios__card {
  position: relative;
  background: #fff;
  border-radius: var(--r2, 18px);
  padding: 22px 22px 18px;
  width: min(420px, calc(100vw - 24px));
  box-shadow: var(--shadow, 0 20px 60px rgba(11,18,32,.18));
}
.dl-pwa-ios__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted, rgba(11,18,32,.55));
  cursor: pointer;
}
.dl-pwa-ios__close:hover { background: rgba(11,18,32,.06); color: var(--ink, #0b1220); }

.dl-pwa-ios__title {
  font-weight: 700;
  color: var(--ink, #0b1220);
  font-size: 17px;
  margin: 4px 0 14px;
}
.dl-pwa-ios__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}
.dl-pwa-ios__steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--surface, #f7f8fb);
  border-radius: 10px;
  padding: 10px 12px;
}
.dl-pwa-ios__steps i {
  color: var(--accent, #304DA1);
  font-size: 16px;
}
.dl-pwa-ios__steps span {
  font-size: 14px;
  color: var(--ink, #0b1220);
}

.dl-pwa-ios__ok { margin-top: 4px; }


/* ---- /assets/css/offline-sync.css ---- */
/* /assets/css/offline-sync.css - offline status badge linksonder */

.dl-offline-badge {
  position: fixed;
  z-index: 1075;
  left: 16px;
  bottom: 16px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border, rgba(11,18,32,.10));
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11,18,32,.12);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0b1220);
  font-family: inherit;
}
.dl-offline-badge i {
  font-size: 14px;
  color: var(--accent, #304DA1);
}
.dl-offline-badge.is-pending i {
  animation: dl-spin 1.4s linear infinite;
}
.dl-offline-badge.is-offline {
  background: rgba(255,193,7,.12);
  border-color: rgba(255,193,7,.40);
  color: #7a5a00;
}
.dl-offline-badge.is-offline i {
  color: #b88800;
  animation: none;
}

@keyframes dl-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .dl-offline-badge { left: 8px; bottom: 8px; font-size: 12px; padding: 6px 10px; }
}


/* ---- /assets/css/faq.css ---- */
/* =========================================================
   faq.css - FAQ-blok (inc/faq_block.php)
   ---------------------------------------------------------
   Accordion op <details>/<summary>, dus geen JS nodig. Kleuren
   komen uit de design tokens; body.is-enka maakt de hoeken
   scherp en de accentkleur zwart, net als de rest van Enka.
   ========================================================= */

.dl-faq {
  margin: 32px 0;
}

.dl-faq-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ink, #0b1220);
  margin: 0 0 14px;
}

.dl-faq-title i {
  color: var(--accent, #304DA1);
  font-size: 1rem;
}

.dl-faq-list {
  display: grid;
  gap: 8px;
}

.dl-faq-item {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: #fff;
  overflow: hidden;
}

.dl-faq-item[open] {
  border-color: var(--accent-soft2, rgba(48, 77, 161, .14));
  box-shadow: 0 6px 18px rgba(11, 18, 32, .06);
}

.dl-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink, #0b1220);
  list-style: none;
  user-select: none;
}

/* Standaard driehoekje van <summary> weg, we tekenen zelf een chevron */
.dl-faq-q::-webkit-details-marker { display: none; }
.dl-faq-q::marker { content: ''; }

.dl-faq-q:hover {
  background: var(--accent-soft, rgba(48, 77, 161, .05));
}

.dl-faq-q:focus-visible {
  outline: 2px solid var(--accent, #304DA1);
  outline-offset: -2px;
}

.dl-faq-chev {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--muted, rgba(11, 18, 32, .55));
  transition: transform .18s ease;
}

.dl-faq-item[open] .dl-faq-chev {
  transform: rotate(180deg);
  color: var(--accent, #304DA1);
}

.dl-faq-a {
  padding: 0 16px 16px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--muted, rgba(11, 18, 32, .70));
}

.dl-faq-a > *:first-child { margin-top: 0; }
.dl-faq-a > *:last-child  { margin-bottom: 0; }

.dl-faq-a a {
  color: var(--accent, #304DA1);
  text-decoration: underline;
}

.dl-faq-a ul,
.dl-faq-a ol {
  margin: 8px 0;
  padding-left: 20px;
}

/* ── Enka: scherpe hoeken, zwart accent ── */
body.is-enka .dl-faq-item {
  border-radius: 0;
}

body.is-enka .dl-faq-item[open] {
  border-color: var(--ek-ink, #0a0a0a);
  box-shadow: none;
}

body.is-enka .dl-faq-title {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.5rem;
}

@media (max-width: 575.98px) {
  .dl-faq-q { padding: 12px 14px; font-size: .9rem; }
  .dl-faq-a { padding: 0 14px 14px; }
}


/* ---- /assets/css/richtext.css ---- */
/* =========================================================
   richtext.css - redactionele tekstblokken
   ---------------------------------------------------------
   Voor de velden die via /admin beheerd worden: de uitgebreide
   productbeschrijving (long_description) en de categorieteksten
   (intro_text, bottom_text). De toegestane tags staan vast in
   dl_seo_rich_text() (inc/seo.php): p, h2, h3, ul, ol, li,
   strong, em, a, br en table met zijn onderdelen.

   Kleuren via de tokens, zodat Enka (zwart/wit, scherpe hoeken)
   en DutchLine (blauw) allebei kloppen zonder aparte regels.
   ========================================================= */

.dl-richtext {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--muted, rgba(11, 18, 32, .78));
}

.dl-richtext > *:first-child { margin-top: 0; }
.dl-richtext > *:last-child  { margin-bottom: 0; }

.dl-richtext p { margin: 0 0 1em; }

.dl-richtext h2,
.dl-richtext h3 {
  color: var(--ink, #0b1220);
  font-weight: 800;
  line-height: 1.3;
  margin: 1.6em 0 .6em;
}

.dl-richtext h2 { font-size: 1.15rem; }
.dl-richtext h3 { font-size: 1rem; }

.dl-richtext strong { color: var(--ink, #0b1220); font-weight: 700; }

.dl-richtext a {
  color: var(--accent, #304DA1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dl-richtext ul,
.dl-richtext ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}

.dl-richtext li { margin-bottom: .35em; }

/* Tabellen mogen op mobiel niet de pagina openduwen; vandaar de eigen
   scrollcontainer op het blok zelf. */
.dl-richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: .9rem;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.dl-richtext th,
.dl-richtext td {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.dl-richtext th {
  background: var(--surface, #f7f8fb);
  color: var(--ink, #0b1220);
  font-weight: 700;
  white-space: nowrap;
}

/* ── Categorie-teksten op /assortment ── */
.dl-cat-intro { margin: 0 0 22px; }
.dl-cat-bottom {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border, rgba(11, 18, 32, .10));
}

.dl-cat-bottom .dl-richtext,
.dl-cat-intro .dl-richtext { max-width: 78ch; }

/* ── Enka: scherpe hoeken en zwart accent ── */
body.is-enka .dl-richtext h2,
body.is-enka .dl-richtext h3 {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}

body.is-enka .dl-richtext h2 { font-size: 1.4rem; }
body.is-enka .dl-richtext h3 { font-size: 1.15rem; }

@media (max-width: 575.98px) {
  .dl-richtext { font-size: .9rem; }
  .dl-cat-bottom { margin-top: 26px; padding-top: 20px; }
}


/* ---- /assets/css/reviews.css ---- */
/* =========================================================
   reviews.css - productbeoordelingen
   ---------------------------------------------------------
   Gedeelde functionaliteit: werkt op beide merken. Kleuren en
   radii komen uit de tokens, met een body.is-enka-blok voor de
   scherpe hoeken en de zwart/wit-huisstijl.
   Sterren zijn FontAwesome 6 (fa-star / fa-star-half-stroke).
   ========================================================= */

.dl-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a524;                 /* goud op DutchLine; Enka overschrijft dit onderaan */
  font-size: .82rem;
  line-height: 1;
  flex-shrink: 0;
}

.dl-stars.is-lg { font-size: 1.1rem; gap: 3px; }

.dl-reviews { margin-top: 40px; }

/* ── Samenvatting ── */
.dl-rev-summary {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: #fff;
  margin-bottom: 24px;
}

.dl-rev-score { text-align: center; }

.dl-rev-score-num {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink, #0b1220);
  margin-bottom: 6px;
}

.dl-rev-score-count {
  font-size: .8rem;
  color: var(--muted, rgba(11, 18, 32, .55));
  margin-top: 6px;
}

.dl-rev-bars { display: grid; gap: 6px; }

.dl-rev-bar {
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--muted, rgba(11, 18, 32, .55));
}

.dl-rev-bar-label { white-space: nowrap; }
.dl-rev-bar-label i { color: #f5a524; font-size: .7rem; }

.dl-rev-bar-track {
  height: 7px;
  border-radius: 99px;
  background: var(--surface, #f1f3f8);
  overflow: hidden;
}

.dl-rev-bar-fill {
  display: block;
  height: 100%;
  background: #f5a524;
  border-radius: 99px;
}

.dl-rev-bar-count { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Lijst ── */
.dl-rev-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.dl-rev-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border, rgba(11, 18, 32, .08));
}

.dl-rev-item:last-child { border-bottom: 0; }

.dl-rev-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.dl-rev-author { font-weight: 700; font-size: .88rem; color: var(--ink, #0b1220); }

.dl-rev-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  color: #146c43;
  background: rgba(25, 135, 84, .10);
}

.dl-rev-verified i { font-size: .7rem; }

.dl-rev-date {
  font-size: .76rem;
  color: var(--muted, rgba(11, 18, 32, .45));
  margin-left: auto;
}

.dl-rev-title { font-weight: 700; font-size: .92rem; color: var(--ink, #0b1220); margin-bottom: 3px; }
.dl-rev-body  { font-size: .9rem; line-height: 1.65; color: var(--muted, rgba(11, 18, 32, .72)); }
.dl-rev-empty { font-size: .9rem; color: var(--muted, rgba(11, 18, 32, .6)); margin: 0 0 22px; }

/* ── Paginering ── */
.dl-rev-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }

.dl-rev-page {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink, #0b1220);
  text-decoration: none;
  background: #fff;
}

.dl-rev-page:hover { border-color: var(--accent, #304DA1); color: var(--accent, #304DA1); }

.dl-rev-page.is-current {
  background: var(--accent, #304DA1);
  border-color: var(--accent, #304DA1);
  color: #fff;
}

/* ── Formulier ── */
.dl-rev-form-wrap {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  padding: 20px 22px;
  background: var(--surface, #f7f8fb);
}

.dl-rev-form-title { font-size: 1rem; font-weight: 800; margin: 0 0 16px; color: var(--ink, #0b1220); }
.dl-rev-field { margin-bottom: 14px; }

.dl-rev-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink, #0b1220);
  margin-bottom: 5px;
}

.dl-rev-help { font-size: .76rem; color: var(--muted, rgba(11, 18, 32, .55)); }

/* Sterren kiezen: radio's verstopt, labels in omgekeerde volgorde zodat de
   CSS-sibling-selector alle sterren links van de hover kan inkleuren. */
.dl-rev-stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.dl-rev-star-opt {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(11, 18, 32, .18);
  transition: color .12s;
  margin: 0;
}

.dl-rev-star-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dl-rev-star-opt:hover,
.dl-rev-star-opt:hover ~ .dl-rev-star-opt,
.dl-rev-star-opt:has(input:checked),
.dl-rev-star-opt:has(input:checked) ~ .dl-rev-star-opt {
  color: #f5a524;
}

.dl-rev-star-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent, #304DA1);
  outline-offset: 2px;
  border-radius: 4px;
}

.dl-rev-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* ── Enka: scherpe hoeken, zwarte accenten ──
   Enka voert geen accentkleur. Goud en groen zijn hier dus fout, hoe gangbaar
   sterren-goud elders ook is: alles wordt zwart/wit. De sterren blijven
   herkenbaar door het verschil tussen een volle en een lege ster. */
body.is-enka .dl-stars,
body.is-enka .dl-rev-bar-label i,
body.is-enka .dl-rev-star-opt:hover,
body.is-enka .dl-rev-star-opt:hover ~ .dl-rev-star-opt,
body.is-enka .dl-rev-star-opt:has(input:checked),
body.is-enka .dl-rev-star-opt:has(input:checked) ~ .dl-rev-star-opt {
  color: var(--ek-ink, #0a0a0a);
}

body.is-enka .dl-rev-bar-fill { background: var(--ek-ink, #0a0a0a); }

body.is-enka .dl-rev-verified {
  border-radius: 0;
  color: var(--ek-ink, #0a0a0a);
  background: transparent;
  border: 1px solid var(--ek-border, rgba(0, 0, 0, .22));
}

body.is-enka .dl-rev-summary,
body.is-enka .dl-rev-form-wrap,
body.is-enka .dl-rev-page { border-radius: 0; }

body.is-enka .dl-rev-page.is-current {
  background: var(--ek-ink, #0a0a0a);
  border-color: var(--ek-ink, #0a0a0a);
}

body.is-enka .dl-rev-page:hover {
  border-color: var(--ek-ink, #0a0a0a);
  color: var(--ek-ink, #0a0a0a);
}

body.is-enka .dl-rev-form-title,
body.is-enka .dl-reviews > .pdp-panel-heading {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}

@media (max-width: 575.98px) {
  .dl-rev-summary { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .dl-rev-bars { text-align: left; }
  .dl-rev-date { margin-left: 0; width: 100%; }
  .dl-rev-form-wrap { padding: 16px; }
}

/* ── Enka: formulier en kaarten in huisstijl (PDP-redesign) ── */
body.is-enka .dl-rev-form-wrap,
body.is-enka .dl-rev-summary {
  background: var(--ek-surface, #fff);
  border: 1px solid var(--ek-border, rgba(10, 10, 10, .10));
}
body.is-enka .dl-rev-form-wrap { padding: var(--ek-sp-5, 24px); }
body.is-enka .dl-rev-star-opt { color: var(--ek-border-strong, rgba(10, 10, 10, .16)); }
body.is-enka .dl-rev-form .form-control {
  border: 1px solid var(--ek-border-strong, rgba(10, 10, 10, .16));
  border-radius: 0;
  background: var(--ek-surface, #fff);
  font-size: var(--ek-fs-base, 1rem); /* >=16px: geen iOS zoom-on-focus */
  color: var(--ek-ink, #0a0a0a);
}
body.is-enka .dl-rev-form .form-control:focus {
  border-color: var(--ek-ink, #0a0a0a);
  box-shadow: 0 0 0 2px var(--ek-border, rgba(10, 10, 10, .10));
}
body.is-enka .dl-rev-help {
  color: var(--ek-text-muted, #6a6a6a);
  font-size: var(--ek-fs-xs, .694rem);
}
body.is-enka .dl-rev-field { margin-bottom: var(--ek-sp-4, 16px); }
/* Sterren-kiezer: ruststand licht; catalog.css kleurt .fa-star in .dl-reviews
   zwart voor de weergave-sterren, maar de input-sterren volgen de labelstate. */
body.is-enka .dl-rev-star-opt .fa-star { color: inherit; }

/* ── Enka PDP: volgorde binnen de reviews-tab ──
   Gewenst: sterren-samenvatting bovenaan, dan het formulier, de losse
   beoordelingen onderaan. Markup blijft gedeeld (DutchLine houdt de
   originele volgorde); alleen flex-order binnen de sectie. */
body.is-enka .dl-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-4, 16px);
}
body.is-enka .dl-reviews > .pdp-panel-heading { order: 0; margin-bottom: 0; }
body.is-enka .dl-reviews > .dl-rev-empty     { order: 1; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-summary   { order: 1; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-form-wrap { order: 2; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-list      { order: 3; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-pager     { order: 4; margin: 0; }

/* Losse beoordelingen als rustige kaarten */
body.is-enka .dl-rev-item {
  background: var(--ek-surface, #fff);
  border: 1px solid var(--ek-border, rgba(10, 10, 10, .10));
  padding: var(--ek-sp-4, 16px) var(--ek-sp-5, 24px);
  margin: 0 0 var(--ek-sp-3, 12px);
}
body.is-enka .dl-rev-item:last-child { margin-bottom: 0; }
body.is-enka .dl-rev-author { font-weight: 800; color: var(--ek-ink, #0a0a0a); }
body.is-enka .dl-rev-date { color: var(--ek-text-muted, #6a6a6a); font-size: var(--ek-fs-sm, .833rem); }
body.is-enka .dl-rev-title {
  font-weight: 800;
  color: var(--ek-ink, #0a0a0a);
  margin-top: var(--ek-sp-1, 4px);
}
body.is-enka .dl-rev-body {
  color: var(--ek-ink-2, #1a1a1a);
  line-height: 1.65;
  margin-top: var(--ek-sp-2, 8px);
}


/* ---- /assets/css/kennisbank.css ---- */
/* =========================================================
   kennisbank.css - publieke kennisbank
   ---------------------------------------------------------
   Gedeelde functionaliteit, dus alles via de tokens met een
   body.is-enka-blok voor de scherpe hoeken en de zwart/wit-
   huisstijl. De artikeltekst zelf gebruikt .dl-richtext uit
   richtext.css.
   ========================================================= */

.kb-wrap { min-height: 50vh; }

.kb-crumbs { margin-bottom: 18px; }

/* ── Koppen ── */
.kb-head { margin-bottom: 22px; }

.kb-title {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink, #0b1220);
  margin: 0 0 8px;
}

.kb-sub {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--muted, rgba(11, 18, 32, .65));
  max-width: 70ch;
  margin: 0;
}

/* ── Rubrieken ── */
.kb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}

.kb-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 99px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink, #0b1220);
  text-decoration: none;
  background: #fff;
}

.kb-cat:hover { border-color: var(--accent, #304DA1); color: var(--accent, #304DA1); }

.kb-cat.is-active {
  background: var(--accent, #304DA1);
  border-color: var(--accent, #304DA1);
  color: #fff;
}

.kb-cat-n {
  font-size: .72rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* ── Kaartenraster ── */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.kb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .12s;
}

.kb-card:hover {
  box-shadow: 0 10px 30px rgba(11, 18, 32, .10);
  transform: translateY(-2px);
}

.kb-card-img {
  aspect-ratio: 16 / 10;
  background: var(--surface, #f4f6fb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(11, 18, 32, .18);
  font-size: 1.8rem;
}

.kb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* flex + margin-top:auto op de meta-regel, zodat de datum op elke kaart op
   dezelfde hoogte staat ook als de ene samenvatting een regel korter is. */
.kb-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.kb-card-meta { margin-top: auto; padding-top: 4px; }

.kb-card-cat {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent, #304DA1);
}

.kb-card-title { font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--ink, #0b1220); }
.kb-card-excerpt { font-size: .85rem; line-height: 1.6; color: var(--muted, rgba(11, 18, 32, .65)); }
.kb-card-meta { font-size: .76rem; color: var(--muted, rgba(11, 18, 32, .45)); }

/* ── Paginering ── */
.kb-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }

.kb-page {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 8px;
  font-size: .85rem; font-weight: 700;
  color: var(--ink, #0b1220); text-decoration: none; background: #fff;
}

.kb-page:hover { border-color: var(--accent, #304DA1); color: var(--accent, #304DA1); }
.kb-page.is-current { background: var(--accent, #304DA1); border-color: var(--accent, #304DA1); color: #fff; }

/* ── Artikel ── */
.kb-article-head { margin-bottom: 20px; }

/* Het artikel staat in een smallere, gecentreerde kolom dan de rest van de
   site. De tekstbreedte blijft daarmee leesbaar (zie .kb-article-body) zonder
   dat kop, inhoudsopgave, producten en "verder lezen" links tegen de rand
   geplakt staan met een halve schermbreedte leegte ernaast. */
.kb-article.container { max-width: 980px; }

.kb-article-title {
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink, #0b1220);
  margin: 0 0 12px;
  /* 24ch was te krap: met de condensed display-font van Enka brak de titel al
     na twee woorden af terwijl er ruim plek was. */
  max-width: min(100%, 46ch);
}

.kb-article-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: .82rem; color: var(--muted, rgba(11, 18, 32, .55));
  margin-bottom: 14px;
}

.kb-article-meta i { margin-right: 4px; }

.kb-article-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted, rgba(11, 18, 32, .78));
  max-width: 72ch;
  margin: 0;
}

.kb-hero {
  margin: 0 0 28px;
  border-radius: var(--r2, 18px);
  overflow: hidden;
}

.kb-hero img { width: 100%; height: auto; display: block; }
.kb-hero a { display: block; cursor: zoom-in; }

/* Inhoudsopgave naast de tekst op breed, erboven op smal. */
.kb-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 992px) {
  .kb-article-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .kb-toc { position: sticky; top: 96px; }
}

.kb-toc {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  padding: 14px 16px;
  background: var(--surface, #f7f8fb);
}

.kb-toc-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted, rgba(11, 18, 32, .55));
  margin-bottom: 8px;
}

.kb-toc-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.kb-toc-list a { font-size: .85rem; line-height: 1.45; color: var(--ink, #0b1220); text-decoration: none; }
.kb-toc-list a:hover { color: var(--accent, #304DA1); text-decoration: underline; }

.kb-article-body { max-width: 72ch; }

/* h2's zijn ankerdoelen; wat ruimte zodat de sticky header ze niet afdekt. */
.kb-article-body h2 { scroll-margin-top: 110px; }

/* ── Gekoppelde producten ── */
.kb-section-title {
  font-size: 1.25rem; font-weight: 900; color: var(--ink, #0b1220);
  margin: 40px 0 16px;
}

.kb-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.kb-product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  overflow: hidden; background: #fff;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s;
}

.kb-product-card:hover { box-shadow: 0 8px 24px rgba(11, 18, 32, .10); }

.kb-product-img {
  aspect-ratio: 1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: rgba(11, 18, 32, .18);
}

.kb-product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.kb-product-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.kb-product-name { font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--ink, #0b1220); }
.kb-product-price { font-size: .9rem; font-weight: 900; color: var(--accent, #304DA1); }

.kb-related { margin-bottom: 20px; }

/* ── Enka: scherpe hoeken, zwarte accenten ── */
body.is-enka .kb-card,
body.is-enka .kb-product-card,
body.is-enka .kb-toc,
body.is-enka .kb-hero,
body.is-enka .kb-page { border-radius: 0; }

body.is-enka .kb-cat { border-radius: 0; }

body.is-enka .kb-cat.is-active,
body.is-enka .kb-page.is-current {
  background: var(--ek-ink, #0a0a0a);
  border-color: var(--ek-ink, #0a0a0a);
}

body.is-enka .kb-title,
body.is-enka .kb-article-title,
body.is-enka .kb-section-title {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}

body.is-enka .kb-card-cat,
body.is-enka .kb-product-price { color: var(--ek-ink, #0a0a0a); }

@media (max-width: 575.98px) {
  .kb-title { font-size: 1.6rem; }
  .kb-article-title { font-size: 1.55rem; max-width: none; }
  .kb-grid { grid-template-columns: 1fr; }
}


/* ---- /assets/css/internal-links.css ---- */
/* =========================================================
   internal-links.css - kruimelpaden en interne linkblokken
   ---------------------------------------------------------
   Gedeeld tussen DutchLine en Enka, dus alles via de tokens
   plus een body.is-enka-blok voor de scherpe hoeken en de
   zwart/wit-huisstijl.

   .dl-crumbs wordt op assortment.php nog een keer inline
   overschreven met de --dlx-* variabelen van die pagina.
   Dat is bewust: die inline <style> staat later in de
   cascade en houdt de catalogus exact zoals hij was.
   ========================================================= */

/* ── Kruimelpad ── */
.dl-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--muted, rgba(11, 18, 32, .7));
  margin-bottom: 8px;
}

.dl-crumbs a { color: var(--muted, rgba(11, 18, 32, .7)); text-decoration: none; }
.dl-crumbs a:hover { color: var(--accent, #304DA1); text-decoration: underline; }
.dl-crumbs .sep { opacity: .5; }
.dl-crumbs .is-current { color: var(--ink, #0b1220); font-weight: 700; }

body.is-enka .dl-crumbs a:hover { color: var(--ek-ink, #111); }

/* De pdp-hero begint zonder padding-top; het kruimelpad zet die zelf. */
.pdp-crumbs { padding-top: 16px; }
.pdp-crumbs .dl-crumbs { margin-bottom: 10px; }

/* ── Linkblok ── */
.dl-linkblock {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--surface, #f7f8fb);
  border: 1px solid var(--border, rgba(11, 18, 32, .08));
  border-radius: var(--r, 14px);
}

.dl-linkblock-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink, #0b1220);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}

.dl-linkblock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft, rgba(48, 77, 161, .10));
  color: var(--accent, #304DA1);
  font-size: .85rem;
  flex: 0 0 auto;
}

.dl-linkblock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* De <li> is de pill. Het aantal hoort visueel binnen de pill maar buiten de
   <a>: binnen de link zou "605" onderdeel van de ankertekst worden. */
.dl-linkblock-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 99px;
  line-height: 1.3;
  transition: border-color .12s, color .12s;
}

.dl-linkblock-list a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink, #0b1220);
  text-decoration: none;
}

.dl-linkblock-list li:hover { border-color: var(--accent, #304DA1); }
.dl-linkblock-list li:hover a { color: var(--accent, #304DA1); }
.dl-linkblock-list a:focus-visible { outline: 2px solid var(--accent, #304DA1); outline-offset: 3px; }

.dl-linkblock-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted, rgba(11, 18, 32, .45));
}

/* Variant: gelijkwaardige paginasectie (productpagina, naast FAQ en reviews) */
.dl-linkblock--section {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 30px 0 8px;
}

.dl-linkblock--section .dl-linkblock-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 16px;
}

.dl-linkblock--section .dl-linkblock-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: .95rem;
}

/* Variant: opsomming onder elkaar (kennisbank op de homepage) */
.dl-linkblock--stack .dl-linkblock-list { flex-direction: column; gap: 6px; }

.dl-linkblock--stack .dl-linkblock-list li {
  width: 100%;
  border-radius: var(--r, 14px);
  padding: 10px 14px;
}

/* Variant: transparant, voor gebruik binnen een bestaande kaart of panel */
.dl-linkblock--plain {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ── Homepage: categorieen + kennisbank naast elkaar ── */
.dl-links-home {
  padding: 34px 0 6px;
}

.dl-links-home .dl-linkblock { margin-top: 0; }

@media (min-width: 992px) {
  .dl-links-home-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: start;
  }
  /* Zonder kennisbankartikelen is er maar een blok; dat moet de volle breedte
     krijgen in plaats van 1.6fr met een lege kolom ernaast. */
  .dl-links-home-grid.is-single { grid-template-columns: 1fr; }
}

/* ── Enka: scherpe hoeken, geen accentkleur ── */
body.is-enka .dl-linkblock {
  border-radius: 0;
  background: var(--ek-surface-2, #f5f5f5);
  border-color: var(--ek-border, rgba(0, 0, 0, .12));
}

body.is-enka .dl-linkblock-title {
  font-family: var(--ek-font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  font-size: 1.05rem;
}

body.is-enka .dl-linkblock-list li {
  border-radius: 0;
  border-color: var(--ek-border, rgba(0, 0, 0, .18));
}

body.is-enka .dl-linkblock-list a { color: var(--ek-ink, #111); }

body.is-enka .dl-linkblock-list li:hover {
  background: var(--ek-ink, #111);
  border-color: var(--ek-ink, #111);
}

body.is-enka .dl-linkblock-list li:hover a,
body.is-enka .dl-linkblock-list li:hover .dl-linkblock-count { color: #fff; }

body.is-enka .dl-linkblock--stack .dl-linkblock-list li { border-radius: 0; }

/* Enka kent geen accentkleur: het icoonvlak wordt neutraal in plaats van blauw. */
body.is-enka .dl-linkblock-icon {
  border-radius: 0;
  background: var(--ek-ink, #111);
  color: #fff;
}

body.is-enka .dl-linkblock--section .dl-linkblock-title {
  font-family: var(--ek-font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  font-size: 1.35rem;
}


/* ---- /assets/css/coupon.css ---- */
/* ==========================================================================
   Kortingscode-blok (inc/coupon_form.php)

   Werkt op de DutchLine- en de Enka-checkout. Kleuren komen uit de tokens van
   theme-core.css; op Enka worden die door assets/css/enka/tokens.css
   overschreven, dus hier staan bewust geen vaste hexwaarden.
   ========================================================================== */

.dl-coupon {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--surface, #f7f8fb);
}

.dl-coupon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0b1220);
}

.dl-coupon-label i { color: var(--accent, #304da1); }

.dl-coupon-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-coupon-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--bg, #fff);
  color: var(--ink, #0b1220);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dl-coupon-input:focus {
  outline: none;
  border-color: var(--accent, #304da1);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(48, 77, 161, .10));
}

.dl-coupon-btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r, 14px);
  background: var(--accent, #304da1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-coupon-btn:hover  { opacity: .88; }
.dl-coupon-btn:disabled,
.dl-coupon-btn.is-busy { opacity: .55; cursor: default; }

/* Toegepaste code */
.dl-coupon-active {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dl-coupon-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(48, 77, 161, .10));
  color: var(--accent, #304da1);
}

.dl-coupon-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.dl-coupon-info strong {
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink, #0b1220);
  word-break: break-all;
}

.dl-coupon-info span {
  font-size: 13px;
  color: var(--muted, rgba(11, 18, 32, .70));
}

.dl-coupon-remove {
  margin-left: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: 50%;
  background: var(--bg, #fff);
  color: var(--muted, rgba(11, 18, 32, .70));
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.dl-coupon-remove:hover {
  color: var(--danger, #ff4d4d);
  border-color: var(--danger, #ff4d4d);
}

/* Meldingen */
.dl-coupon-msg        { margin-top: 8px; font-size: 13px; }
.dl-coupon-msg:empty  { display: none; }
.dl-coupon-msg.is-ok  { color: var(--ok, #20c997); }
.dl-coupon-msg.is-err { color: var(--danger, #ff4d4d); }

/* Enka: scherpe hoeken, geen accentkleur - conform de huisstijl */
body.is-enka .dl-coupon,
body.is-enka .dl-coupon-input,
body.is-enka .dl-coupon-btn {
  border-radius: 0;
}

body.is-enka .dl-coupon-ico {
  border-radius: 0;
  background: var(--ek-surface-2, rgba(0, 0, 0, .05));
  color: var(--ek-fg, #0a0a0a);
}

body.is-enka .dl-coupon-remove { border-radius: 0; }

body.is-enka .dl-coupon-btn {
  background: var(--ek-fg, #0a0a0a);
  color: var(--ek-bg, #fff);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}

/* ==========================================================================
   Voortgangsbalk naar gratis verzending (inc/free_shipping_bar.php)
   ========================================================================== */

.dl-freeship {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--bg, #fff);
}

.dl-freeship-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink, #0b1220);
}

.dl-freeship-text i        { color: var(--accent, #304da1); }
.dl-freeship.is-done .dl-freeship-text i { color: var(--ok, #20c997); }

.dl-freeship-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface, #f7f8fb);
  overflow: hidden;
}

.dl-freeship-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #304da1);
  transition: width .3s ease;
}

.dl-freeship.is-done .dl-freeship-fill { background: var(--ok, #20c997); }

/* Enka: scherpe hoeken, zwart/wit */
body.is-enka .dl-freeship,
body.is-enka .dl-freeship-track,
body.is-enka .dl-freeship-fill { border-radius: 0; }

body.is-enka .dl-freeship-text i     { color: var(--ek-fg, #0a0a0a); }
body.is-enka .dl-freeship-fill       { background: var(--ek-fg, #0a0a0a); }

/* ==========================================================================
   Nieuwsbrief-formulier (inc/newsletter_form.php)
   ========================================================================== */

.dl-nlform { margin: 8px 0 0; }

.dl-nlform-head {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: inherit;
}

.dl-nlform-sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  opacity: .75;
}

.dl-nlform-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-nlform-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r, 14px);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 14px;
}

.dl-nlform-input::placeholder { color: currentColor; opacity: .55; }

.dl-nlform-input:focus {
  outline: none;
  border-color: currentColor;
}

/* Honeypot: uit beeld, maar niet display:none - dat slaan bots over. */
.dl-nlform-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dl-nlform-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: var(--r, 14px);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-nlform-btn:hover    { opacity: .75; }
.dl-nlform-btn:disabled { opacity: .5; cursor: default; }

.dl-nlform-msg        { margin-top: 8px; font-size: 13px; }
.dl-nlform-msg:empty  { display: none; }
.dl-nlform-msg.is-ok  { color: var(--ok, #20c997); }
.dl-nlform-msg.is-err { color: var(--danger, #ff4d4d); }

/* Enka: scherpe hoeken */
body.is-enka .dl-nlform-input,
body.is-enka .dl-nlform-btn { border-radius: 0; }

body.is-enka .dl-nlform-btn {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}


/* ---- /assets/css/stock-alert.css ---- */
/* ==========================================================================
   Terug-op-voorraad blok (inc/stock_alert_block.php)

   Verschijnt op de productpagina zodra een artikel op is. Kleuren via de
   tokens, zodat het blok op DutchLine en Enka klopt zonder losse varianten.
   ========================================================================== */

.dl-stockalert {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--surface, #f7f8fb);
}

.dl-stockalert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink, #0b1220);
}

.dl-stockalert-head i { color: var(--accent, #304da1); }

.dl-stockalert-sub {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, rgba(11, 18, 32, .70));
}

.dl-stockalert-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-stockalert-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--bg, #fff);
  color: var(--ink, #0b1220);
  font-size: 14px;
}

.dl-stockalert-input:focus {
  outline: none;
  border-color: var(--accent, #304da1);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(48, 77, 161, .10));
}

.dl-stockalert-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r, 14px);
  background: var(--accent, #304da1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-stockalert-btn:hover     { opacity: .88; }
.dl-stockalert-btn:disabled  { opacity: .55; cursor: default; }

.dl-stockalert-done {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink, #0b1220);
}

.dl-stockalert-done i { color: var(--ok, #20c997); }

.dl-stockalert-msg        { margin-top: 8px; font-size: 13px; }
.dl-stockalert-msg:empty  { display: none; }
.dl-stockalert-msg.is-ok  { color: var(--ok, #20c997); }
.dl-stockalert-msg.is-err { color: var(--danger, #ff4d4d); }

/* Enka: scherpe hoeken, zwart/wit - conform de huisstijl */
body.is-enka .dl-stockalert,
body.is-enka .dl-stockalert-input,
body.is-enka .dl-stockalert-btn {
  border-radius: 0;
}

body.is-enka .dl-stockalert-head i { color: var(--ek-fg, #0a0a0a); }

body.is-enka .dl-stockalert-btn {
  background: var(--ek-fg, #0a0a0a);
  color: var(--ek-bg, #fff);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}


/* ---- /assets/css/progress.css ---- */
/* =========================================================
   progress.css - DutchLine UI
   ========================================================= */

/* ── Wrapper ── */
.dl-progress-wrap{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.dl-progress-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.85rem;
  font-weight:850;
  color:var(--ink);
}
.dl-progress-label-value{ color:var(--muted); }

/* ── Track ── */
.dl-progress{
  width:100%;
  height:8px;
  background:var(--surface,#f7f8fb);
  border-radius:999px;
  border:1px solid var(--border,rgba(11,18,32,.10));
  overflow:hidden;
}

/* ── Bar ── */
.dl-progress-bar{
  height:100%;
  border-radius:999px;
  background:var(--accent,#304DA1);
  transition:width .4s ease;
  min-width:4px;
}

/* ── Color variants ── */
.dl-progress-bar.is-primary{ background:var(--accent,#304DA1); }
.dl-progress-bar.is-success{ background:#20c997; }
.dl-progress-bar.is-warning{ background:#ffc107; }
.dl-progress-bar.is-danger{  background:#ff4d4d; }
.dl-progress-bar.is-info{    background:#0d6efd; }
.dl-progress-bar.is-neutral{ background:rgba(11,18,32,.45); }

/* Gradient fill (DutchLine brand) */
.dl-progress-bar.is-brand{
  background:linear-gradient(90deg,var(--dl-blue-900,#1E3375),var(--dl-blue-700,#304DA1),var(--dl-blue-500,#5B78C0));
  /* Vaste kleur als ondergrond: bij .is-striped wordt background-image
     overschreven door de strepen - zonder deze fallback zou de vulling
     transparant (onzichtbaar) worden tot de balk 100% is. */
  background-color:var(--accent,#304DA1);
}

/* ── Sizes ── */
.dl-progress-sm{ height:4px; }
.dl-progress-lg{ height:12px; }
.dl-progress-xl{ height:18px; }

/* ── Striped ── */
.dl-progress-bar.is-striped{
  background-image:linear-gradient(
    45deg,
    rgba(255,255,255,.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.15) 75%,
    transparent 75%,
    transparent
  );
  background-size:16px 16px;
}

/* ── Animated stripes ── */
.dl-progress-bar.is-animated{
  animation:dl-progress-stripes .6s linear infinite;
}
@keyframes dl-progress-stripes{
  from{ background-position:16px 0; }
  to{   background-position:0 0; }
}

/* ── Multi-bar (stacked) ── */
.dl-progress-multi{
  display:flex;
  gap:0;
  overflow:hidden;
  border-radius:999px;
}
.dl-progress-multi .dl-progress-bar{
  border-radius:0;
  border-right:1px solid rgba(255,255,255,.18);
}
.dl-progress-multi .dl-progress-bar:last-child{
  border-right:0;
}

/* ── Vertical ── */
.dl-progress-vertical{
  display:inline-flex;
  flex-direction:column-reverse;
  width:8px;
  height:80px;
  background:var(--surface);
  border-radius:999px;
  border:1px solid var(--border);
  overflow:hidden;
}
.dl-progress-vertical .dl-progress-bar{
  width:100%;
  height:var(--pct,50%);
  min-height:4px;
  transition:height .4s ease;
  border-radius:0;
}

/* ── Step-based ── */
.dl-progress-steps{
  display:flex;
  gap:4px;
  align-items:center;
}
.dl-progress-step{
  height:6px;
  flex:1;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  transition:background .25s ease, border-color .25s ease;
}
.dl-progress-step.is-done{
  background:var(--accent,#304DA1);
  border-color:var(--accent,#304DA1);
}
.dl-progress-step.is-active{
  background:var(--accent-soft2,rgba(48,77,161,.45));
  border-color:var(--accent-soft2,rgba(48,77,161,.45));
}


/* ---- /assets/vendor/photoswipe/photoswipe.css ---- */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */.pswp{--pswp-bg:#000;--pswp-placeholder-bg:#222;--pswp-root-z-index:100000;--pswp-preloader-color:rgba(79, 79, 79, 0.4);--pswp-preloader-color-secondary:rgba(255, 255, 255, 0.9);--pswp-icon-color:#fff;--pswp-icon-color-secondary:#4f4f4f;--pswp-icon-stroke-color:#4f4f4f;--pswp-icon-stroke-width:2px;--pswp-error-text-color:var(--pswp-icon-color)}.pswp{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--pswp-root-z-index);display:none;touch-action:none;outline:0;opacity:.003;contain:layout style size;-webkit-tap-highlight-color:transparent}.pswp:focus{outline:0}.pswp *{box-sizing:border-box}.pswp img{max-width:none}.pswp--open{display:block}.pswp,.pswp__bg{transform:translateZ(0);will-change:opacity}.pswp__bg{opacity:.005;background:var(--pswp-bg)}.pswp,.pswp__scroll-wrap{overflow:hidden}.pswp__bg,.pswp__container,.pswp__content,.pswp__img,.pswp__item,.pswp__scroll-wrap,.pswp__zoom-wrap{position:absolute;top:0;left:0;width:100%;height:100%}.pswp__img,.pswp__zoom-wrap{width:auto;height:auto}.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,.pswp__img{cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out}.pswp__button,.pswp__container,.pswp__counter,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__item{z-index:1;overflow:hidden}.pswp__hidden{display:none!important}.pswp__content{pointer-events:none}.pswp__content>*{pointer-events:auto}.pswp__error-msg-container{display:grid}.pswp__error-msg{margin:auto;font-size:1em;line-height:1;color:var(--pswp-error-text-color)}.pswp .pswp__hide-on-close{opacity:.005;will-change:opacity;transition:opacity var(--pswp-transition-duration) cubic-bezier(.4,0,.22,1);z-index:10;pointer-events:none}.pswp--ui-visible .pswp__hide-on-close{opacity:1;pointer-events:auto}.pswp__button{position:relative;display:block;width:50px;height:60px;padding:0;margin:0;overflow:hidden;cursor:pointer;background:0 0;border:0;box-shadow:none;opacity:.85;-webkit-appearance:none;-webkit-touch-callout:none}.pswp__button:active,.pswp__button:focus,.pswp__button:hover{transition:none;padding:0;background:0 0;border:0;box-shadow:none;opacity:1}.pswp__button:disabled{opacity:.3;cursor:auto}.pswp__icn{fill:var(--pswp-icon-color);color:var(--pswp-icon-color-secondary)}.pswp__icn{position:absolute;top:14px;left:9px;width:32px;height:32px;overflow:hidden;pointer-events:none}.pswp__icn-shadow{stroke:var(--pswp-icon-stroke-color);stroke-width:var(--pswp-icon-stroke-width);fill:none}.pswp__icn:focus{outline:0}.pswp__img--with-bg,div.pswp__img--placeholder{background:var(--pswp-placeholder-bg)}.pswp__top-bar{position:absolute;left:0;top:0;width:100%;height:60px;display:flex;flex-direction:row;justify-content:flex-end;z-index:10;pointer-events:none!important}.pswp__top-bar>*{pointer-events:auto;will-change:opacity}.pswp__button--close{margin-right:6px}.pswp__button--arrow{position:absolute;top:0;width:75px;height:100px;top:50%;margin-top:-50px}.pswp__button--arrow:disabled{display:none;cursor:default}.pswp__button--arrow .pswp__icn{top:50%;margin-top:-30px;width:60px;height:60px;background:0 0;border-radius:0}.pswp--one-slide .pswp__button--arrow{display:none}.pswp--touch .pswp__button--arrow{visibility:hidden}.pswp--has_mouse .pswp__button--arrow{visibility:visible}.pswp__button--arrow--prev{right:auto;left:0}.pswp__button--arrow--next{right:0}.pswp__button--arrow--next .pswp__icn{left:auto;right:14px;transform:scale(-1,1)}.pswp__button--zoom{display:none}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__zoom-icn-bar-v{display:none}.pswp__preloader{position:relative;overflow:hidden;width:50px;height:60px;margin-right:auto}.pswp__preloader .pswp__icn{opacity:0;transition:opacity .2s linear;animation:pswp-clockwise .6s linear infinite}.pswp__preloader--active .pswp__icn{opacity:.85}@keyframes pswp-clockwise{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.pswp__counter{height:30px;margin-top:15px;margin-inline-start:20px;font-size:14px;line-height:30px;color:var(--pswp-icon-color);text-shadow:1px 1px 3px var(--pswp-icon-color-secondary);opacity:.85}.pswp--one-slide .pswp__counter{display:none}

/* ---- /assets/css/header-mobile.css ---- */
/* =========================================================
   header-mobile.css
   ---------------------------------------------------------
   Mobiele header-spacing fixes (gedeeld DutchLine + Enka).
   Voorheen inline in inc/header.php.
   ========================================================= */

@media (max-width: 991.98px) {
  /* topbar: alles verbergen behalve taalschakelaar */
  .dl-topbar-v4 .dl-topbar-right { display: flex !important; align-items: center; }
  .dl-topbar-v4 .dl-topbar-right > *:not(.dl-lang-switch):not(.dl-lang-sep) { display: none !important; }
  .dl-topbar-v4 .dl-lang-sep { display: none !important; }

  /* brandbar compacter */
  .dl-brandbar-v4 { border-bottom: 1px solid var(--border, rgba(0, 0, 0, .12)); }
  .dl-brandbar-row {
    gap: 12px !important;
    align-items: center !important;
    /* wrappen zodat de zoekbalk een eigen regel krijgt */
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    padding-bottom: 10px;
  }

  /* Zoekbalk blijft op mobiel en tablet staan, als volle regel onder logo +
     burger. Voorheen verborgen ("zit in de drawer"), waardoor je eerst naar het
     assortiment moest navigeren om te kunnen zoeken. */
  .dl-search-pill {
    display: flex !important;
    order: 3;
    flex: 1 0 100% !important;
    min-width: 0 !important;
    width: 100%;
  }
  /* Aanraakvlak: veld en knop minstens 44px hoog. De pil krijgt daarom
     minder eigen padding, zodat de balk niet groeit maar het klikvlak wel. */
  .dl-search-pill { padding: 3px 4px 3px 12px; }
  .dl-search-input { min-width: 0; min-height: 44px; }
  .dl-search-btn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

  /* buttons op mobiel uit (te druk); ze zitten in drawer */
  .dl-actions .dl-btn { display: none !important; }

  /* burger altijd zichtbaar en klikbaar */
  .dl-actions { display: flex !important; align-items: center !important; gap: 10px !important; }
  .dl-burger { display: inline-flex !important; }

  /* Het logo is ook de link naar home: aanraakvlak minstens 44px hoog. */
  .dl-brand { min-height: 44px; }
  /* logo iets kleiner */
  .dl-brand img {
    width: 120px !important;
    height: auto !important;
  }
}

.dl-brandbar-row {
  display: flex;
  align-items: center;
}

.dl-actions {
  margin-left: auto;
}


/* ---- /assets/css/dl-theme.css ---- */
/* =========================================================
   dl-theme.css - design tokens voor de makeover
   Locatie: /assets/css/dl-theme.css
   Geladen als LAATSTE stylesheet in <head> via inc/header.php
   (na Bootstrap, na alle bestaande site-CSS, na enka/core.css
   en na de inline <style id="cms-theme-vars"> uit de DB).
   ---------------------------------------------------------
   DIT BESTAND VERANDERT OP ZICHZELF NIETS ZICHTBAAR.
   Alle namen hier zijn nieuw en met --dlt- geprefixt. Geen
   enkele bestaande selector of custom property wordt
   overschreven, dus de cascade blijft exact zoals hij was.
   Geverifieerd met grep: --dlt- kwam nergens voor in
   assets/, inc/, pages/, components/ of de root-*.php.

   GEBRUIK
   - Nieuwe dl-* componenten consumeren uitsluitend --dlt-*.
   - Bestaande tokens (--accent, --ink, --r, --shadow,
     --dl-blue-700, --ek-*) blijven ongemoeid en leidend voor
     alle bestaande CSS.
   - De ENKA-laag hieronder mapt de tokens naar de bestaande
     --ek-* waarden, zodat een nieuw component in beide merken
     de juiste huisstijl pakt zonder dat er iets kruist.
   ========================================================= */

:root {

  /* ── Kleur: neutrale schaal ──────────────────────────── */
  --dlt-ink:              #0b1220;
  --dlt-ink-2:            rgba(11, 18, 32, .78);
  --dlt-muted:            rgba(11, 18, 32, .62);
  --dlt-muted-2:          rgba(11, 18, 32, .44);

  --dlt-bg:               #ffffff;
  --dlt-surface:          #f7f8fb;
  --dlt-surface-2:        #eef0f6;
  --dlt-surface-3:        #e4e7ef;

  --dlt-line:             rgba(11, 18, 32, .10);
  --dlt-line-2:           rgba(11, 18, 32, .16);
  --dlt-line-strong:      rgba(11, 18, 32, .28);

  /* ── Kleur: op donkere vlakken ───────────────────────── */
  --dlt-on-dark:          #ffffff;
  --dlt-on-dark-muted:    rgba(255, 255, 255, .68);
  --dlt-on-dark-muted-2:  rgba(255, 255, 255, .42);
  --dlt-on-dark-line:     rgba(255, 255, 255, .12);

  /* ── Kleur: merk-accent ──────────────────────────────
     Volgt de bestaande DB-gestuurde --accent wanneer die
     gezet is, met de DutchLine-blauwtint als fallback.
     Zo blijft Admin > Instellingen > kleuren leidend. */
  --dlt-accent:           var(--accent, #304da1);
  --dlt-accent-ink:       #ffffff;
  --dlt-accent-soft:      color-mix(in srgb, var(--dlt-accent) 10%, transparent);
  --dlt-accent-soft-2:    color-mix(in srgb, var(--dlt-accent) 16%, transparent);
  --dlt-accent-line:      color-mix(in srgb, var(--dlt-accent) 32%, transparent);

  /* ── Kleur: status ───────────────────────────────────── */
  --dlt-success:          #1a9f75;
  --dlt-success-soft:     rgba(26, 159, 117, .10);
  --dlt-warning:          #b3730a;
  --dlt-warning-soft:     rgba(179, 115, 10, .10);
  --dlt-danger:           #d33a3a;
  --dlt-danger-soft:      rgba(211, 58, 58, .10);
  --dlt-info:             #0d6efd;
  --dlt-info-soft:        rgba(13, 110, 253, .10);

  /* ── Kleur: data-accenten ────────────────────────────
     Categorie-kleuren voor tegels, KPI-accentbalken en
     statuscijfers. Waarden zijn 1-op-1 overgenomen uit de
     bestaande dashboard-styling, zodat het token-maken geen
     enkele kleur verschuift. */
  --dlt-c-blue:           var(--accent, #304da1);
  --dlt-c-green:          #0ca678;
  --dlt-c-amber:          #f59f00;
  --dlt-c-red:            #e03131;
  --dlt-c-purple:         #7950f2;
  --dlt-c-slate:          #495057;

  /* Leesbare inkt op lichte tinten van bovenstaande kleuren */
  --dlt-c-amber-ink:      #7d5a00;
  --dlt-c-red-ink:        #991f1f;
  --dlt-c-blue-ink:       #1864ab;
  --dlt-c-green-ink:      #1e5c2e;

  /* ── Vlakken en lijnen van de admin-vormtaal ─────────
     1-op-1 de waarden uit assets/css/admin-common.css, zodat
     pagina's die dat bestand NIET laden (alles buiten
     page_admin_* en page_dashboard) er toch identiek uitzien.
     Regelnummers verwijzen naar admin-common.css. */
  --dlt-card-line:        #eef2f6;   /* :146 kaartrand */
  --dlt-row-line:         #f1f5f9;   /* :207 / :231 rij- en kopscheiding */
  --dlt-head-bg:          #fcfdff;   /* :209 kaartkop */
  --dlt-th-bg:            #fafbfc;   /* :235 tabelkop */
  /* Beide waren te licht voor tekst: #64748b haalde 4,18:1 op --dlt-surface-2
     en 4,44:1 op --dlt-field-bg, #94a3b8 zelfs maar 2,56:1 op wit. Een grijs
     dat overal 4,5:1 haalt zit dicht bij elkaar, dus is het nu EEN grijs; het
     verschil tussen label en subtekst zit in kapitalen, gewicht en maat.
     #5a6b7d = 5,48 wit / 5,16 surface / 4,81 surface-2 / 5,11 field. */
  --dlt-label-ink:        #5a6b7d;   /* :151 caps-label */
  --dlt-sub-ink:          var(--dlt-label-ink);   /* :155 subtekst */
  --dlt-strong-ink:       #0b1220;   /* :152 getal en kaarttitel */
  /* Was #cbd5e1 = 1,48:1 op wit: het icoon in de leegstaat was er wel, maar
     je zag het niet. #8290a1 haalt 3,25:1 op wit en 3,06:1 op --dlt-surface
     (de eis voor beeld dat informatie draagt is 3:1). */
  --dlt-empty-ico:        #8290a1;   /* :320 icoon in de leegstaat */
  --dlt-field-bg:         #f5f7fb;   /* :185 invoerveld in de toolbar */
  /* admin-common.css:19 definieert --accent-softer, maar dat bestand
     wordt buiten admin niet geladen. Hier een eigen equivalent. */
  --dlt-accent-softer:    color-mix(in srgb, var(--dlt-accent) 4%, transparent);

  /* Zachte vlakken + lijnen voor inline meldingen */
  --dlt-c-amber-bg:       #fff8e1;
  --dlt-c-red-bg:         #fff0f0;
  --dlt-c-blue-bg:        #e7f5ff;
  --dlt-c-green-bg:       #ebfbee;
  --dlt-c-blue-line:      #339af0;
  --dlt-c-green-line:     #40c057;

  /* ── Spacing schaal (4px basis) ──────────────────────── */
  --dlt-sp-0:             0;
  --dlt-sp-1:             4px;
  --dlt-sp-2:             8px;
  --dlt-sp-3:             12px;
  --dlt-sp-4:             16px;
  --dlt-sp-5:             20px;
  --dlt-sp-6:             24px;
  --dlt-sp-8:             32px;
  --dlt-sp-10:            40px;
  --dlt-sp-12:            48px;
  --dlt-sp-16:            64px;
  --dlt-sp-20:            80px;

  /* Verticaal sectieritme */
  --dlt-section:          72px;
  --dlt-section-sm:       44px;

  /* ── Radius schaal ──────────────────────────────────── */
  --dlt-r-xs:             4px;
  --dlt-r-sm:             8px;
  --dlt-r:                12px;
  --dlt-r-lg:             16px;
  --dlt-r-xl:             22px;
  --dlt-r-pill:           999px;

  /* ── Shadow schaal ──────────────────────────────────── */
  --dlt-shadow-xs:        0 1px 2px rgba(11, 18, 32, .05);
  --dlt-shadow-sm:        0 1px 2px rgba(11, 18, 32, .05), 0 2px 8px rgba(11, 18, 32, .05);
  --dlt-shadow:           0 4px 12px rgba(11, 18, 32, .07), 0 12px 32px rgba(11, 18, 32, .07);
  --dlt-shadow-lg:        0 10px 24px rgba(11, 18, 32, .09), 0 28px 64px rgba(11, 18, 32, .09);
  --dlt-shadow-inset:     inset 0 1px 0 rgba(255, 255, 255, .55);
  --dlt-ring:             0 0 0 3px color-mix(in srgb, var(--dlt-accent) 26%, transparent);

  /* ── Typografie ─────────────────────────────────────── */
  --dlt-font:             system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dlt-font-display:     var(--dlt-font);
  --dlt-font-mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --dlt-fs-2xs:           .6875rem;  /* 11px - alleen voor caps-labels en meta */
  --dlt-fs-xs:            .75rem;    /* 12px */
  --dlt-fs-sm:            .875rem;   /* 14px */
  --dlt-fs:               1rem;      /* 16px */
  --dlt-fs-md:            1.125rem;  /* 18px */
  --dlt-fs-lg:            1.375rem;  /* 22px */
  --dlt-fs-xl:            1.75rem;   /* 28px */
  --dlt-fs-2xl:           2.25rem;   /* 36px */

  --dlt-lh-tight:         1.15;
  --dlt-lh:               1.55;
  --dlt-lh-loose:         1.7;

  --dlt-fw-normal:        400;
  --dlt-fw-medium:        500;
  --dlt-fw-semi:          600;
  --dlt-fw-bold:          700;
  --dlt-fw-black:         800;

  --dlt-track-tight:      -.01em;
  --dlt-track-wide:       .04em;
  --dlt-track-caps:       .1em;

  /* ── Motion ─────────────────────────────────────────── */
  --dlt-ease:             cubic-bezier(.2, .8, .2, 1);
  --dlt-ease-out:         cubic-bezier(.16, 1, .3, 1);
  --dlt-dur-fast:         140ms;
  --dlt-dur:              220ms;
  --dlt-dur-slow:         360ms;
  --dlt-transition:       var(--dlt-dur) var(--dlt-ease);

  /* ── Layout ─────────────────────────────────────────── */
  --dlt-container:        1240px;
  --dlt-control-h:        42px;
  --dlt-control-h-sm:     34px;
  --dlt-control-h-lg:     50px;

  /* ── Z-index ────────────────────────────────────────── */
  --dlt-z-sticky:         20;
  --dlt-z-header:         1030;
  --dlt-z-overlay:        1040;
  --dlt-z-modal:          1055;
  --dlt-z-toast:          1080;
}

/* =========================================================
   ENKA laag - zwart/wit huisstijl, scherpe hoeken.
   Scope is body.is-enka (gezet door inc/header.php) en
   .ek-page, exact zoals assets/css/enka/tokens.css doet.
   Mapt de --dlt-* tokens op de bestaande --ek-* waarden, dus
   er komt geen tweede waarheid naast de Enka-tokens.
   ========================================================= */
body.is-enka,
.ek-page {

  --dlt-ink:              var(--ek-ink, #0a0a0a);
  --dlt-ink-2:            var(--ek-ink-2, #1a1a1a);
  --dlt-muted:            var(--ek-muted, #6a6a6a);
  --dlt-muted-2:          var(--ek-muted-2, #9a9a9a);

  --dlt-bg:               var(--ek-surface, #ffffff);
  --dlt-surface:          var(--ek-surface-2, #f6f6f6);
  --dlt-surface-2:        var(--ek-surface-3, #ececec);
  --dlt-surface-3:        #e2e2e2;

  --dlt-line:             var(--ek-line, rgba(10, 10, 10, .08));
  --dlt-line-2:           var(--ek-line-2, rgba(10, 10, 10, .14));
  --dlt-line-strong:      rgba(10, 10, 10, .26);

  --dlt-on-dark:          var(--ek-on-dark, #ffffff);
  --dlt-on-dark-muted:    var(--ek-on-dark-muted, rgba(255, 255, 255, .65));
  --dlt-on-dark-muted-2:  var(--ek-on-dark-muted-2, rgba(255, 255, 255, .40));
  --dlt-on-dark-line:     var(--ek-on-dark-line, rgba(255, 255, 255, .10));

  /* Enka heeft geen accentkleur: accent = inkt (zwart) */
  --dlt-accent:           var(--ek-ink, #0a0a0a);
  --dlt-accent-ink:       #ffffff;
  --dlt-accent-soft:      rgba(10, 10, 10, .06);
  --dlt-accent-soft-2:    rgba(10, 10, 10, .10);
  --dlt-accent-line:      rgba(10, 10, 10, .22);

  /* Scherpe hoeken */
  --dlt-r-xs:             var(--ek-r-sm, 2px);
  --dlt-r-sm:             var(--ek-r, 4px);
  --dlt-r:                var(--ek-r, 4px);
  --dlt-r-lg:             var(--ek-r-lg, 8px);
  --dlt-r-xl:             var(--ek-r-lg, 8px);
  --dlt-r-pill:           999px;

  --dlt-shadow-xs:        0 1px 2px rgba(10, 10, 10, .04);
  --dlt-shadow-sm:        var(--ek-shadow-sm, 0 1px 2px rgba(10, 10, 10, .04));
  --dlt-shadow:           var(--ek-shadow-md, 0 4px 10px rgba(10, 10, 10, .06));
  --dlt-shadow-lg:        var(--ek-shadow-lg, 0 10px 24px rgba(10, 10, 10, .08));
  --dlt-ring:             0 0 0 3px rgba(10, 10, 10, .16);

  --dlt-font:             var(--ek-font, 'Lato', system-ui, sans-serif);
  --dlt-font-display:     var(--ek-font-display, 'Barlow Condensed', Arial, sans-serif);

  --dlt-ease:             var(--ek-ease, cubic-bezier(.2, .8, .2, 1));
  --dlt-dur-fast:         var(--ek-dur-fast, 180ms);
  --dlt-dur:              var(--ek-dur, 280ms);

  --dlt-section:          var(--ek-sec, 88px);
  --dlt-section-sm:       var(--ek-sec-sm, 56px);
}

/* =========================================================
   Respecteer reduced-motion. Raakt alleen --dlt-* duur-tokens,
   dus geen enkel bestaand component verandert hierdoor.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dlt-dur-fast: 1ms;
    --dlt-dur:      1ms;
    --dlt-dur-slow: 1ms;
  }
}

/* =========================================================
   DASHBOARD - was het <style>-blok in dashboard.php (regel
   276-494 van de oude versie), nu hier.
   ---------------------------------------------------------
   De vormtaal is 1-op-1 overgenomen van
   pages/admin/financial/invoices/detail.php, zodat het
   dashboard er hetzelfde uitziet als de admin-detailpagina's:
     .db-kpi        <- .dl-stat-card       (admin-common.css:145-166)
     .db-kpi-icon   <- .dl-stat-card .ico  (zachte tint, geen vlak)
     .db-kpi-lbl    <- .lbl                (caps-label BOVEN het getal)
     .db-kpi-val    <- .val
     .db-kpi-foot   <- .sub
     .db-card       <- .dl-admin-card      (admin-common.css:201-214)
     .db-table      <- .dl-admin-table     (admin-common.css:227-245)
     .db-empty      <- .dl-admin-empty     (admin-common.css:314-323)
     .db-hero       <- .dl-admin-hero      (admin-common.css:111-132)
   De markup in dashboard.php is niet omgebouwd: het label staat
   in de HTML NA het getal en wordt hier met grid-areas boven
   het getal gezet. Zo blijft de DOM ongewijzigd.
   ---------------------------------------------------------
   ALLES is gescoped onder body.page_dashboard. Dat is nodig,
   niet cosmetisch: db-card, db-table, db-empty en db-avatar
   worden OOK gebruikt door pages/dealers/customers/index.php
   en pages/dealers/projects/{index,create,details}.php. Die
   pagina's stylen die classes in hun eigen <style>-blok en
   mogen hier niets van merken.
   body.page_dashboard komt uit $cPage via $dl_bodyClasses in
   inc/header.php - niet wijzigen.

   Op Enka forceert assets/css/enka/sharp-edges.css alle
   border-radius met !important naar 5px (en db-bar naar
   999px). Dat overrulet de radius hieronder, precies zoals
   het het oude inline blok ook al deed. De accentkleur volgt
   daar automatisch via body.is-enka in admin-common.css:36-45.
   ========================================================= */
/* Ook op de beheerpagina's: de dl-dbk/dl-dbp componenten worden daar nu
   ook gebruikt en hebben deze tokens nodig. */
body.page_dashboard,
body[class*="page_admin"] {
  /* Deze wijzen sinds de account-bestellingen-ronde naar de gedeelde
     --dlt-* tokens hierboven, zodat er een bron is. Waarden ongewijzigd. */
  /* card-line en head-bg zijn in de UI-kit-ronde hieronder opnieuw gezet;
     daar staat de waarde die telt. */
  --dl-db-row-line:   var(--dlt-row-line);
  --dl-db-th-bg:      var(--dlt-th-bg);
  --dl-db-label:      var(--dlt-label-ink);
  --dl-db-sub:        var(--dlt-sub-ink);
  --dl-db-strong-ink: var(--dlt-strong-ink);
  --dl-db-empty-ico:  var(--dlt-empty-ico);

  --dl-db-track:      color-mix(in srgb, var(--dlt-ink) 7%, transparent);
  --dl-db-veil:       color-mix(in srgb, var(--dlt-on-dark) 13%, transparent);
  --dl-db-veil-2:     color-mix(in srgb, var(--dlt-on-dark) 22%, transparent);
  --dl-db-on-hero:    color-mix(in srgb, var(--dlt-on-dark) 90%, transparent);

  /* ── UI-kit vormtaal (components-demo) ───────────────
     Het dashboard was gemodelleerd naar admin/financial/invoices.
     Sinds deze ronde volgt het de showcase op /components-demo:
     een koele paginaondergrond, vlakke witte kaarten met een
     ruimere radius en een lichte hero in plaats van een blauw vlak.
     Alleen vorm en kleur - de grid-opzet, de DOM-volgorde en de
     Enka-uitzonderingen hieronder blijven zoals ze waren. */
  --dl-db-page-bg:    #f4f6fb;
  --dl-db-panel:      #ffffff;
  --dl-db-panel-2:    #fbfcfe;
  --dl-db-card-line:  rgba(11, 18, 32, .09);
  --dl-db-line-2:     rgba(11, 18, 32, .14);
  --dl-db-head-bg:    var(--dl-db-panel-2);

  --dl-db-r:          18px;   /* kaart, hero */
  --dl-db-r-sm:       12px;   /* melding, tegel, knop */

  --dl-db-shadow:     0 1px 2px rgba(11, 18, 32, .05), 0 1px 3px rgba(11, 18, 32, .04);
  --dl-db-shadow-2:   0 4px 12px rgba(11, 18, 32, .06), 0 1px 3px rgba(11, 18, 32, .05);

  /* Hero-mesh. Twee tinten op DutchLine, op Enka allebei de inkt
     (zie de Enka-laag onder deze sectie) zodat daar niets blauws
     of paars binnensluipt. */
  --dl-db-glow-1:     color-mix(in srgb, var(--dlt-c-blue) 22%, transparent);
  --dl-db-glow-2:     color-mix(in srgb, var(--dlt-c-purple) 14%, transparent);
  --dl-db-grid:       color-mix(in srgb, var(--dlt-ink) 7%, transparent);
}

/* De paginaondergrond hoort bij de vormtaal: witte kaarten hebben een
   koele ondergrond nodig om als kaart te lezen. Alleen op het dashboard. */
body.page_dashboard { background: var(--dl-db-page-bg); }

/* Enka: geen blauw en geen paars, dus beide gloeden uit de inkt. */
body.page_dashboard.is-enka {
  --dl-db-glow-1:   color-mix(in srgb, var(--dlt-ink) 10%, transparent);
  --dl-db-glow-2:   color-mix(in srgb, var(--dlt-ink) 6%, transparent);
  --dl-db-page-bg:  var(--dlt-surface);
}

/* ── Hero: lichte mesh, zoals /components-demo ────────── */
/* Het blauwe vlak is vervangen door een licht paneel met een raster dat naar
   onderen wegvalt en twee zachte gloeden erboven. Alles zit in de background
   van de hero zelf, NIET in een ::before. Reden: assets/css/enka/sharp-edges.css:12
   zet `*, *::before, *::after { border-radius: 5px !important }`, en de
   uitzonderingenlijst daar dekt alleen .dl-admin-hero::after. Een ronde
   ::before werd op Enka dus een zichtbaar grijs vierkant blok rechtsboven.
   Om diezelfde reden is het wegvallen van het raster een sluier-laag in de
   stack en geen mask-image: minder krachtig, maar het werkt in beide merken.
   Laagvolgorde: gloed > gloed > sluier > raster > raster > vlak. */
body.page_dashboard .db-hero {
  background:
    radial-gradient(900px 340px at 88% -140px, var(--dl-db-glow-1), transparent 62%),
    radial-gradient(620px 300px at 2% 108%, var(--dl-db-glow-2), transparent 60%),
    linear-gradient(180deg, transparent 0%, var(--dl-db-panel) 74%),
    repeating-linear-gradient(90deg, var(--dl-db-grid) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  var(--dl-db-grid) 0 1px, transparent 1px 46px),
    var(--dl-db-panel);
  color: var(--dlt-ink);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r);
  padding: var(--dlt-sp-8) var(--dlt-sp-8) var(--dlt-sp-6);
  margin-bottom: var(--dlt-sp-6);
  box-shadow: var(--dl-db-shadow-2);
  position: relative;
  overflow: hidden;
}
/* Rolpill: wit blokje met accenttekst en een levend stipje, zoals de
   eyebrow op /components-demo. */
body.page_dashboard .db-hero-role {
  display: inline-flex; align-items: center; gap: var(--dlt-sp-2);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  letter-spacing: var(--dlt-track-caps);
  text-transform: uppercase;
  color: var(--dlt-accent);
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dlt-r-pill);
  padding: var(--dlt-sp-1) var(--dlt-sp-3);
  margin-bottom: var(--dlt-sp-3);
  box-shadow: var(--dl-db-shadow);
}
/* Paginatitel: schaalt vloeiend mee i.p.v. drie harde stappen,
   zodat tablet niet in het gat tussen mobiel en desktop valt. */
body.page_dashboard .db-hero-name {
  font-size: clamp(1.45rem, .8rem + 2.4vw, var(--dlt-fs-2xl));
  font-weight: var(--dlt-fw-black);
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--dlt-ink);
}
body.page_dashboard .db-hero-sub {
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-muted);
  margin-top: var(--dlt-sp-2);
}
body.page_dashboard .db-hero-date {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-muted-2);
  margin-top: var(--dlt-sp-1);
}
/* =========================================================
   Snelmenu = vierkante icoon-blokjes met een tooltip.
   Waarom geen knoppen met tekst: de tegels onder de hero
   linken naar exact dezelfde plekken met exact dezelfde
   labels, dus dat stond er twee keer. De labels leven nu in
   de tooltip (data-bs-title) en in aria-label; de <span>
   blijft in de markup staan maar wordt verborgen.
   Tooltips worden al geinitialiseerd op
   [data-bs-toggle="tooltip"] in beide footers.
   ========================================================= */
body.page_dashboard .db-hero-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--dlt-sp-2);
  margin-top: var(--dlt-sp-5);
}
/* De hero is licht geworden, dus de blokjes zijn witte knoppen met een
   hairline in plaats van een sluier op een gekleurd vlak. */
body.page_dashboard .db-hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  color: var(--dlt-muted);
  border-radius: var(--dl-db-r-sm);
  font-size: var(--dlt-fs);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--dl-db-shadow);
  transition: background var(--dlt-dur-fast) var(--dlt-ease),
              border-color var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease),
              transform var(--dlt-dur-fast) var(--dlt-ease);
}
/* Het label staat in de tooltip en in aria-label. */
body.page_dashboard .db-hero-btn span { display: none; }
body.page_dashboard .db-hero-btn i { font-size: var(--dlt-fs); }
body.page_dashboard .db-hero-btn:hover,
body.page_dashboard .db-hero-btn:focus-visible {
  background: var(--dl-db-panel);
  color: var(--dlt-accent);
  border-color: var(--dl-db-line-2);
  box-shadow: var(--dl-db-shadow-2);
  transform: translateY(-1px);
}
body.page_dashboard .db-hero-btn:focus-visible {
  outline: 2px solid var(--dlt-accent);
  outline-offset: 2px;
}
/* Uitloggen hoort niet bij het snelmenu: apart zetten met een scheiding. */
body.page_dashboard .db-hero-btn.db-hero-btn-out {
  opacity: .6;
  margin-left: auto;
}
body.page_dashboard .db-hero-btn.db-hero-btn-out:hover { opacity: 1; }

/* ── Inline meldingen ─────────────────────────────────── */
body.page_dashboard .db-alert {
  border-radius: var(--dl-db-r-sm);
  padding: var(--dlt-sp-3) var(--dlt-sp-4);
  display: flex; align-items: flex-start; gap: var(--dlt-sp-3);
  font-size: var(--dlt-fs-sm);
  line-height: var(--dlt-lh);
  margin-bottom: var(--dlt-sp-2);
  border: 1px solid transparent;
}
body.page_dashboard .db-alert-warning { background: var(--dlt-c-amber-bg); border-color: var(--dlt-c-amber);      color: var(--dlt-c-amber-ink); }
body.page_dashboard .db-alert-danger  { background: var(--dlt-c-red-bg);   border-color: var(--dlt-c-red);        color: var(--dlt-c-red-ink); }
body.page_dashboard .db-alert-info    { background: var(--dlt-c-blue-bg);  border-color: var(--dlt-c-blue-line);  color: var(--dlt-c-blue-ink); }
body.page_dashboard .db-alert-success { background: var(--dlt-c-green-bg); border-color: var(--dlt-c-green-line); color: var(--dlt-c-green-ink); }

/* =========================================================
   KPI-kaart == .dl-stat-card
   Grid met het icoon links over twee rijen, label boven getal.
   De DOM-orde is icoon > getal > label > voet; grid-areas
   zetten dat recht zonder de markup te verplaatsen.
   ========================================================= */
body.page_dashboard .db-kpi {
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r);
  box-shadow: var(--dl-db-shadow);
  padding: 18px 20px;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "lbl ico"
    "val val"
    "foot foot";
  align-content: start;
  column-gap: 12px;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
/* Was translateY(-2px) met een schaduw van 28px. Een kengetal is niets om op
   te klikken, dus het hoeft ook niet op te veren; gelijkgetrokken met
   .dl-stat-card in admin-common.css. */
body.page_dashboard .db-kpi:hover {
  border-color: var(--dl-db-line-2);
  box-shadow: var(--dl-db-shadow-2);
}

/* De accentbalk verdwijnt: de status zit nu in de tint van het
   icoon, net als bij .dl-stat-card.is-danger / .is-success. De
   div blijft in de markup staan, hij is alleen niet zichtbaar. */
body.page_dashboard .db-kpi-accent { display: none; }

/* Het icoon zat in een gevuld vlak van 44px met een zachte tint, links naast
   label en cijfer. Dat vak trok meer aandacht dan het getal waar de tegel om
   draait, en het duwde het cijfer bij de rand vandaan. Nu staat het klein
   rechtsboven en draagt alleen het glyph de kleur - gelijk aan
   .dl-stat-card .ico in admin-common.css, waar dit al was rechtgezet. */
body.page_dashboard .db-kpi-icon {
  grid-area: ico;
  align-self: start;
  justify-self: end;
  width: auto; height: auto;
  background: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--dlt-fs-sm);
  flex-shrink: 0;
  margin-bottom: 0;
  color: var(--dlt-label-ink);
}
/* Categorie- en statustinten: zacht vlak, gekleurd glyph. Dit
   overschrijft de solide .dbc-* vlakken bewust alleen binnen een
   KPI-icoon; op andere plekken blijven ze vol. */
body.page_dashboard .db-kpi-icon.dbc-blue   { background: color-mix(in srgb, var(--dlt-c-blue) 12%, transparent);   color: var(--dlt-c-blue); }
body.page_dashboard .db-kpi-icon.dbc-green  { background: color-mix(in srgb, var(--dlt-c-green) 14%, transparent);  color: var(--dlt-c-green); }
body.page_dashboard .db-kpi-icon.dbc-amber  { background: color-mix(in srgb, var(--dlt-c-amber) 16%, transparent);  color: var(--dlt-c-amber-ink); }
body.page_dashboard .db-kpi-icon.dbc-red    { background: color-mix(in srgb, var(--dlt-c-red) 12%, transparent);    color: var(--dlt-c-red); }
body.page_dashboard .db-kpi-icon.dbc-purple { background: color-mix(in srgb, var(--dlt-c-purple) 12%, transparent); color: var(--dlt-c-purple); }
body.page_dashboard .db-kpi-icon.dbc-slate  { background: color-mix(in srgb, var(--dlt-c-slate) 12%, transparent);  color: var(--dlt-c-slate); }

/* Label boven het getal, caps en klein - zoals .lbl */
body.page_dashboard .db-kpi-lbl {
  grid-area: lbl;
  align-self: end;
  font-size: var(--dlt-fs-2xs);
  color: var(--dl-db-label);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  line-height: 1.2;
  margin-top: 0;
}
/* Het getal is het zwaarste element in de kaart - zoals .val */
body.page_dashboard .db-kpi-val {
  grid-area: val;
  align-self: start;
  font-size: 1.5rem;
  font-weight: var(--dlt-fw-black);
  line-height: 1.1;
  letter-spacing: var(--dlt-track-tight);
  color: var(--dl-db-strong-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
/* Extra regel onder de kaart - zoals .sub, maar met de scheidingslijn
   die het dashboard al had, want daar staan bedragen en percentages in. */
body.page_dashboard .db-kpi-foot {
  grid-area: foot;
  font-size: var(--dlt-fs-xs);
  color: var(--dl-db-sub);
  margin-top: var(--dlt-sp-3);
  padding-top: var(--dlt-sp-3);
  border-top: 1px solid var(--dl-db-row-line);
}
body.page_dashboard .db-kpi-cta {
  grid-area: foot;
  margin-top: var(--dlt-sp-3);
}

/* ── Categorie-accenten (tegels, balken) ──────────────── */
body.page_dashboard .dbc-blue   { background: var(--dlt-c-blue); }
body.page_dashboard .dbc-green  { background: var(--dlt-c-green); }
body.page_dashboard .dbc-red    { background: var(--dlt-c-red); }
body.page_dashboard .dbc-amber  { background: var(--dlt-c-amber); }
body.page_dashboard .dbc-purple { background: var(--dlt-c-purple); }
body.page_dashboard .dbc-slate  { background: var(--dlt-c-slate); }

/* =========================================================
   Navigatietegels.
   Was een grid van repeat(4, 1fr) met de tegelinhoud verticaal
   gestapeld. Twee problemen: de hoogste tegel (twee regels
   omschrijving) bepaalde de rijhoogte, dus de rest kreeg een
   gat, en een vijfde tegel bleef als kwart-breed blokje alleen
   op rij twee achter.

   Nu flex-wrap met een basis per breakpoint en flex-grow, dus
   het aantal per rij blijft 4 / 3 / 2 zoals het was, maar de
   laatste rij groeit vol in plaats van half leeg te blijven.
   De basis trekt de gap eraf (gap 12px: bij 4 per rij zijn er
   3 gaps, dus 36/4 = 9px per tegel).

   De tegel zelf is horizontaal: icoon links, naam en
   omschrijving in het midden, pijl rechts. Dat haalt de dode
   ruimte eruit en maakt een brede tegel in de laatste rij een
   logische regel in plaats van een uitgerekt blok.
   ========================================================= */
body.page_dashboard .db-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dlt-sp-3);
}
body.page_dashboard .db-tile {
  flex: 1 1 calc(25% - 9px);
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dlt-sp-3);
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r-sm);
  box-shadow: var(--dl-db-shadow);
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease),
              border-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .dl-db-tile-text { min-width: 0; }
body.page_dashboard .db-tile:hover {
  transform: translateY(-2px);
  /* Zachte accentring in plaats van een harde rand: die viel bij
     hover als een zwarte lijn om de tegel. */
  box-shadow: 0 12px 28px rgba(11, 18, 32, .08),
              0 0 0 1px var(--accent-soft, var(--dlt-accent-soft));
  border-color: var(--accent-soft, var(--dlt-accent-soft));
  color: inherit;
}
body.page_dashboard .db-tile-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--dlt-fs-sm); color: var(--dlt-on-dark); flex-shrink: 0;
  /* Lichte binnenrand zodat de volvlakke kleuren niet plat ogen. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 2px 6px rgba(11, 18, 32, .10);
}
body.page_dashboard .db-tile-name {
  font-weight: var(--dlt-fw-bold);
  font-size: var(--dlt-fs-sm);
  color: var(--dl-db-strong-ink);
  letter-spacing: var(--dlt-track-tight);
  line-height: 1.25;
  /* Lange titels afkappen i.p.v. de tegel oprekken. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .db-tile-desc {
  font-size: var(--dlt-fs-xs);
  color: var(--dl-db-label);
  margin-top: 2px;
  line-height: 1.3;
  /* Maximaal een regel: de omschrijving van "Retourverzoeken" liep over
     twee regels en bepaalde daarmee de hoogte van de hele rij. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .db-tile-arrow {
  font-size: var(--dlt-fs-2xs);
  color: var(--dl-db-sub);
  margin-top: 0;
  align-self: center;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .db-tile:hover .db-tile-arrow {
  color: var(--accent, var(--dlt-accent));
  transform: translateX(3px);
}

/* ── Kaarten == .dl-admin-card ────────────────────────── */
body.page_dashboard .db-card {
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r);
  box-shadow: var(--dl-db-shadow);
  overflow: hidden;
}
body.page_dashboard .db-card-head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--dl-db-card-line);
  background: var(--dl-db-head-bg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dlt-sp-2); flex-wrap: wrap;
}
/* Kaartkop = het kleine caps-label uit de showcase. De grote kop op de
   pagina is .db-section-title; die twee mogen niet even zwaar wegen. */
body.page_dashboard .db-card-title {
  font-weight: var(--dlt-fw-black);
  font-size: var(--dlt-fs-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dlt-ink-2);
}
body.page_dashboard .db-card-body { padding: 18px; }

/* ── Tabellen == .dl-admin-table ──────────────────────── */
body.page_dashboard .db-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.page_dashboard .db-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 420px; }
body.page_dashboard .db-table thead th {
  padding: 12px 16px;
  background: var(--dl-db-th-bg);
  text-align: left;
  font-weight: var(--dlt-fw-bold);
  color: var(--dl-db-strong-ink);
  font-size: var(--dlt-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  white-space: nowrap;
  border-bottom: 1px solid var(--dl-db-row-line);
}
body.page_dashboard .db-table tbody tr {
  border-bottom: 1px solid var(--dl-db-row-line);
  transition: background var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .db-table tbody tr:last-child { border-bottom: none; }
body.page_dashboard .db-table tbody tr:hover { background: var(--accent-softer, var(--dlt-surface)); }
body.page_dashboard .db-table td {
  padding: 12px 16px;
  vertical-align: middle;
  line-height: 1.4;
}
/* Getallen uitlijnen op cijferbreedte, zodat kolommen niet dansen. */
body.page_dashboard .db-table .text-end { font-variant-numeric: tabular-nums; }
body.page_dashboard .db-table a.db-link {
  color: var(--accent, var(--dlt-accent));
  font-weight: var(--dlt-fw-bold);
  text-decoration: none;
}
body.page_dashboard .db-table a.db-link:hover { text-decoration: underline; }

/* ── Leegstaat == .dl-admin-empty ─────────────────────── */
body.page_dashboard .db-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--dl-db-label);
  font-size: var(--dlt-fs-sm);
}
body.page_dashboard .db-empty i {
  font-size: 2.5rem;
  color: var(--dl-db-empty-ico);
  margin-bottom: 12px;
  display: block;
}

/* ── Avatar ───────────────────────────────────────────── */
body.page_dashboard .db-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
  border: 1px solid var(--dl-db-card-line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--dlt-fs-md);
  font-weight: var(--dlt-fw-black);
  line-height: 1;
  flex-shrink: 0;
}

/* ── Voortgangsbalk ───────────────────────────────────── */
body.page_dashboard .db-bar {
  height: 6px; border-radius: var(--dlt-r-pill);
  background: var(--dl-db-track); overflow: hidden;
}
body.page_dashboard .db-bar-fill {
  height: 100%; border-radius: var(--dlt-r-pill);
  background: var(--accent, var(--dlt-accent));
  transition: width var(--dlt-dur-slow) var(--dlt-ease);
}
body.page_dashboard .db-bar-fill.is-green { background: var(--dlt-c-green); }
body.page_dashboard .db-bar-fill.is-red   { background: var(--dlt-c-red); }
body.page_dashboard .db-bar-fill.is-amber { background: var(--dlt-c-amber); }

/* =========================================================
   Sectiekop. Was grijze caps-tekst met een streep over de
   volle breedte eronder - dat hing er los bij. Nu een echte
   kop: accentstreepje, donkere caps-tekst, en een hairline
   die naast de tekst uitdooft in plaats van hard doorloopt.
   De hoogte zit in --dl-db-sec-h, want de rechterkolom moet
   diezelfde hoogte als offset gebruiken (zie onder).
   ========================================================= */
/* Ook op de beheerpagina's: de dl-dbk/dl-dbp componenten worden daar nu
   ook gebruikt en hebben deze tokens nodig. */
body.page_dashboard,
body[class*="page_admin"] {
  --dl-db-sec-h: 34px;
}
/* Sectiekop = de grote kop uit /components-demo: geen caps meer, maar een
   echte kop met een accentblokje ervoor. De kleine caps-tekst leeft nu op
   de kaartkop (.db-card-title), zodat de twee niveaus uit elkaar liggen. */
body.page_dashboard .db-section-title {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-3);
  min-height: var(--dl-db-sec-h);
  font-size: 1.12rem;
  font-weight: var(--dlt-fw-black);
  text-transform: none;
  letter-spacing: -.025em;
  color: var(--dlt-ink);
  margin-bottom: var(--dlt-sp-4);
  padding-bottom: 0;
  border-bottom: 0;
}
body.page_dashboard .db-section-title::before {
  content: '';
  flex: 0 0 auto;
  width: 4px; height: 20px;
  border-radius: 3px;
  background: var(--accent, var(--dlt-accent));
}
body.page_dashboard .db-section-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--dl-db-card-line), transparent);
}

/* Ritme tussen de secties: een kop die op inhoud volgt krijgt
   lucht erboven, de eerste kop van de pagina niet. */
body.page_dashboard .row + .db-section-title,
body.page_dashboard .dl-db-tabs + .db-section-title {
  margin-top: var(--dlt-sp-8);
}

/* De accountkaart die rechts naast de tegels stond is verwijderd; de
   tegelkolom houdt zijn col-xl-8 in de markup maar vult nu de volle
   breedte. De regel hieronder hoort bij die verwijderde kaart en staat
   er alleen nog voor het geval dat blok teruggezet wordt. */
body.page_dashboard .dl-db-nav-col {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 1200px) {
  body.page_dashboard aside.col-xl-4 > .db-card {
    margin-top: calc(var(--dl-db-sec-h) + var(--dlt-sp-3));
  }
}

/* ── Accountkaart ─────────────────────────────────────── */
body.page_dashboard .db-account-row {
  display: flex; align-items: center; gap: var(--dlt-sp-3);
  margin-bottom: var(--dlt-sp-4);
}

/* De drie mini-stats stonden als losse cijfers in het niets.
   Nu een zacht paneel met scheidingslijnen ertussen, zodat het
   als een blok leest. De rij is altijd de directe buur van
   .db-account-row, dus dit hoeft niet via :has(). */
body.page_dashboard .db-account-row + .row {
  background: var(--dlt-surface);
  border: 1px solid var(--dl-db-card-line);
  border-radius: 12px;
  padding: var(--dlt-sp-3) 0;
  margin: 0 0 var(--dlt-sp-4);
  --bs-gutter-x: 0;
}
body.page_dashboard .db-account-row + .row > [class*="col-"] + [class*="col-"] {
  border-left: 1px solid var(--dl-db-card-line);
}

/* =========================================================
   Tabs. Structuur en look komen uit Components\Tab\Tab +
   assets/css/tabs.css met de variant .dl-side-tabs, dus exact
   zoals invoices/detail.php: op desktop een sticky menu van
   250px links, onder 992px een horizontaal scrollende balk
   (tabs.css:233-254). Hier alleen wat die referentie niet dekt.
   ========================================================= */
body.page_dashboard .dl-db-tabs { margin-bottom: var(--dlt-sp-6); }

/* De pane is volle breedte, dus de col-xl-7/-5/-6 die op de kaart
   bleef staan mag hier niet meer inperken. De Bootstrap-classes
   blijven in de markup staan, dit zet ze binnen een pane alleen
   buiten werking. */
body.page_dashboard .dl-tab-panel > .row > .dl-db-tab-col {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Aantal tussen haakjes in het tab-label iets rustiger zetten dan
   de labeltekst zelf, zonder de tekst te splitsen (Tab.php escapet
   het label, dus een apart element kan daar niet). */
body.page_dashboard .dl-db-tabs .dl-tab { letter-spacing: 0; }

@media (max-width: 767px) {
  body.page_dashboard .dl-db-tabs .dl-tab { min-height: 40px; }
}

/* =========================================================
   Helpers die de inline style-attributen uit dashboard.php
   vervangen. Namen zijn nieuw en dus dl- geprefixt.
   ========================================================= */
body.page_dashboard .dl-db-role-dot { font-size: .5rem; }

body.page_dashboard .dl-db-alert-icon { margin-top: 1px; flex-shrink: 0; }
body.page_dashboard .dl-db-alert-text { margin-top: var(--dlt-sp-1); font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-db-alert-link { color: inherit; font-weight: var(--dlt-fw-bold); }

body.page_dashboard .dl-db-acct-info { min-width: 0; }
body.page_dashboard .dl-db-acct-name {
  font-weight: var(--dlt-fw-bold); font-size: var(--dlt-fs-sm);
  color: var(--dl-db-strong-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .dl-db-acct-meta {
  font-size: var(--dlt-fs-xs); color: var(--dl-db-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .dl-db-acct-company {
  font-size: var(--dlt-fs-xs); color: var(--dl-db-label);
  font-weight: var(--dlt-fw-semi); margin-top: var(--dlt-sp-1);
}

/* Mini-stats in de accountkaart: zelfde ritme als de KPI-kaarten,
   label in caps onder het getal. data-tone komt uit dashboard.php
   en verving daar de inline kleur. */
body.page_dashboard .dl-db-ministat-val {
  font-size: var(--dlt-fs-md);
  font-weight: var(--dlt-fw-black);
  line-height: 1.1;
  color: var(--dl-db-strong-ink);
  font-variant-numeric: tabular-nums;
}
body.page_dashboard .dl-db-ministat-val-lg { font-size: var(--dlt-fs-lg); }
body.page_dashboard .dl-db-ministat-val[data-tone="warn"]   { color: var(--dlt-c-amber-ink); }
body.page_dashboard .dl-db-ministat-val[data-tone="danger"] { color: var(--dlt-c-red); }
/* 18px/900 is nog GEEN grote tekst (grens 18,66px), dus 4,5:1 vereist:
   --dlt-c-green haalde 3,12:1. De amber-variant hiernaast gebruikte al de
   -ink kleur; groen was de vergeten helft. */
body.page_dashboard .dl-db-ministat-val[data-tone="ok"]     { color: var(--dlt-c-green-ink); }
body.page_dashboard .dl-db-ministat-lbl {
  font-size: var(--dlt-fs-2xs);
  color: var(--dl-db-label);
  font-weight: var(--dlt-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  margin-top: var(--dlt-sp-1);
}

body.page_dashboard .dl-db-progress-row { font-size: var(--dlt-fs-xs); }
body.page_dashboard .dl-db-muted { color: var(--dl-db-label); }
body.page_dashboard .dl-db-strong {
  font-weight: var(--dlt-fw-bold); font-variant-numeric: tabular-nums;
}

/* td-selectors: .db-table td weegt zwaarder dan een losse class,
   dus deze vier moeten het type-element meenemen om te winnen. */
body.page_dashboard .db-table td.dl-db-amount {
  font-weight: var(--dlt-fw-bold); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--dl-db-strong-ink);
}
body.page_dashboard .db-table td.dl-db-id {
  font-weight: var(--dlt-fw-bold); color: var(--dl-db-strong-ink);
}
body.page_dashboard .db-table td.dl-db-cell-meta {
  font-size: var(--dlt-fs-xs); color: var(--dl-db-label);
}
body.page_dashboard .db-table td.dl-db-cell-meta-sm {
  font-size: var(--dlt-fs-2xs); color: var(--dl-db-label); white-space: nowrap;
}
body.page_dashboard .dl-db-cell-name {
  font-weight: var(--dlt-fw-bold); font-size: var(--dlt-fs-sm);
  color: var(--dl-db-strong-ink);
}
body.page_dashboard .dl-db-cell-sub {
  font-size: var(--dlt-fs-2xs); color: var(--dl-db-sub);
}
body.page_dashboard .dl-db-th-progress { min-width: 160px; }

/* Deze staan NA .db-kpi-val en .db-empty i, want gelijke
   specificiteit - de laatste regel wint. */
body.page_dashboard .dl-db-kpi-lbl-sm { font-size: var(--dlt-fs-2xs); }
body.page_dashboard .db-kpi.dl-db-kpi-warn   { border-color: var(--dlt-c-amber); }
body.page_dashboard .db-kpi.dl-db-kpi-danger { border-color: var(--dlt-c-red); }
body.page_dashboard .db-kpi-val.dl-db-val-amber,
body.page_dashboard .db-kpi-val.dl-db-val-warn   { color: var(--dlt-c-amber-ink); }
body.page_dashboard .db-kpi-val.dl-db-val-green  { color: var(--dlt-c-green-ink); }
body.page_dashboard .db-kpi-val.dl-db-val-danger { color: var(--dlt-c-red); }
body.page_dashboard .db-empty i.dl-db-empty-ok   { color: var(--dlt-c-green); }

/* =========================================================
   Responsive. De Bootstrap-kolomklassen in dashboard.php zijn
   niet aangeraakt, dus de omslagpunten 576 / 768 / 992 / 1200
   liggen waar ze lagen en wat stapelde stapelt nog.
   ========================================================= */
@media (max-width: 767px) {
  /* 3 per rij, laatste rij groeit vol. */
  body.page_dashboard .db-tile { flex-basis: calc(33.333% - 8px); }
  body.page_dashboard .db-hero { padding: var(--dlt-sp-5) var(--dlt-sp-4); }
  body.page_dashboard .db-kpi { padding: 14px; column-gap: 10px; }
  body.page_dashboard .db-kpi-val { font-size: var(--dlt-fs-lg); }
  body.page_dashboard .db-kpi-icon { width: 38px; height: 38px; font-size: var(--dlt-fs-sm); }
  body.page_dashboard .db-card-head { padding-left: var(--dlt-sp-4); padding-right: var(--dlt-sp-4); }
  body.page_dashboard .db-card-body { padding-left: var(--dlt-sp-4); padding-right: var(--dlt-sp-4); }
  body.page_dashboard .db-table { min-width: 380px; }
  body.page_dashboard .db-table thead th,
  body.page_dashboard .db-table td { padding-left: var(--dlt-sp-3); padding-right: var(--dlt-sp-3); }
  body.page_dashboard .db-empty { padding: 40px 16px; }
  /* Snelmenu is al 44x44, dus daar is geen touch-correctie nodig. */
  body.page_dashboard .db-card-head .dl-btn,
  body.page_dashboard .db-kpi-cta .dl-btn { min-height: 44px; }
}

@media (max-width: 575px) {
  /* 2 per rij, laatste rij groeit vol. Bij twee smalle tegels naast
     elkaar past icoon + naam + pijl niet meer op een regel, dus daar
     gaat het icoon weer boven de naam staan. */
  body.page_dashboard .db-tile {
    flex-basis: calc(50% - 6px);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--dlt-sp-3);
    gap: var(--dlt-sp-2);
  }
  body.page_dashboard .db-tile-icon { grid-column: 1 / -1; }
  body.page_dashboard .db-tile-desc { display: none; }
  body.page_dashboard .db-hero { padding: var(--dlt-sp-4) var(--dlt-sp-3); }
  /* Blokjes blijven 44x44: dat is de aanraakgrens, niet 40px. */
  body.page_dashboard .db-hero-btn { width: 44px; height: 44px; }
  /* Bij twee KPI's naast elkaar is er geen ruimte voor icoon + getal
     naast elkaar; het icoon gaat dan boven het label staan. */
  body.page_dashboard .db-kpi {
    grid-template-columns: 1fr;
    grid-template-areas: "ico" "lbl" "val" "foot";
    row-gap: 2px;
  }
  body.page_dashboard .db-kpi-icon { margin-bottom: var(--dlt-sp-2); }
  /* overflow-wrap i.p.v. word-break: break-all, dat brak bedragen
     als "€ 1.234,56" midden in het getal af. */
  body.page_dashboard .db-kpi-val { overflow-wrap: anywhere; }
}

/* =========================================================
   BESTELLINGEN-OVERZICHT (body.page_dealer_orders)
   ---------------------------------------------------------
   Route /account/bestellingen (Enka B2C) EN /dealers/orders
   (DutchLine B2B) wijzen naar hetzelfde bestand
   pages/dealers/orders/index.php, dus deze styling geldt voor
   beide merken. Dat kruist geen werelden: alle kleuren lopen
   via --accent / --dlt-*, en die resolven per merk (Enka wordt
   zwart via body.is-enka in enka/tokens.css).

   De vormtaal is dezelfde als het dashboard en
   admin/financial/invoices. Let op: admin-common.css wordt hier
   NIET geladen (inc/header.php:559 laadt dat alleen op
   page_admin_* en page_dashboard), dus --accent-softer en
   --st-* bestaan hier niet. Daarom lopen alle waarden via de
   --dlt-* tokens bovenaan dit bestand.

   $cPage = 'page_dealer_orders' wordt door inc/dutchline-menu.php
   gelezen om het menu-item actief te zetten - niet wijzigen.
   Bestaande classes blijven staan: .dl-card hangt aan cards.js
   en cart.js, .page-item / .page-link aan pagination.js.
   ========================================================= */

/* ── Paginakop ────────────────────────────────────────── */
body.page_dealer_orders .dl-ord-title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}
body.page_dealer_orders .dl-ord-sub {
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-label-ink);
  margin-top: var(--dlt-sp-1) !important;
}

/* ── Filterbalk == .dl-admin-toolbar ──────────────────── */
body.page_dealer_orders .dl-ord-filters {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 14px;
  box-shadow: none;
}
body.page_dealer_orders .dl-ord-filters .dl-card-body { padding: 14px 16px; }
body.page_dealer_orders .dl-ord-filters .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
}
/* Velden zonder harde rand, zoals de zoekbalk in de admin-toolbar. */
body.page_dealer_orders .dl-ord-filters .form-control,
body.page_dealer_orders .dl-ord-filters .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_orders .dl-ord-filters .form-control:focus,
body.page_dealer_orders .dl-ord-filters .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Regelteller, rechts in de paginakop ──────────────── */
body.page_dealer_orders .dl-ord-count {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-label-ink);
  background: var(--dlt-surface);
  border: 1px solid var(--dlt-card-line);
  border-radius: var(--dlt-r-pill);
  padding: var(--dlt-sp-1) var(--dlt-sp-3);
  white-space: nowrap;
}

/* ── Kaart om de tabel == .dl-admin-card ──────────────── */
body.page_dealer_orders .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
  overflow: hidden;
}

/* ── Knoppenrij van het filter ────────────────────────── */
body.page_dealer_orders .dl-ord-actions {
  border-top: 1px solid var(--dlt-row-line);
  padding-top: var(--dlt-sp-3);
  margin-top: var(--dlt-sp-1);
}

/* ── Tabel == .dl-admin-table ─────────────────────────── */
body.page_dealer_orders .dl-ord-table {
  font-size: .9rem;
  /* Vaste layout, zodat de colgroup hieronder ook echt leidend is en de
     browser niet alsnog naar inhoud herverdeelt. */
  table-layout: fixed;
  min-width: 780px;
}
body.page_dealer_orders .dl-ord-c-id    { width: 150px; }
body.page_dealer_orders .dl-ord-c-date  { width: 110px; }
body.page_dealer_orders .dl-ord-c-items { width: 90px; }
body.page_dealer_orders .dl-ord-c-total { width: 130px; }
body.page_dealer_orders .dl-ord-c-act   { width: 110px; }
/* Badges mogen niet afbreken in hun flexibele kolom. */
body.page_dealer_orders .dl-ord-table td .dl-badge,
body.page_dealer_orders .dl-ord-table td .dl-pill { white-space: nowrap; }
body.page_dealer_orders .dl-ord-items { font-variant-numeric: tabular-nums; }
body.page_dealer_orders .dl-ord-table > thead > tr > th {
  padding: 12px 16px;
  background: var(--dlt-th-bg);
  border-bottom: 1px solid var(--dlt-row-line);
  color: var(--dlt-strong-ink);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  white-space: nowrap;
}
body.page_dealer_orders .dl-ord-table > tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--dlt-row-line);
  vertical-align: middle;
  line-height: 1.4;
}
body.page_dealer_orders .dl-ord-table > tbody > tr:last-child > td { border-bottom: 0; }
/* Bootstrap zet de hover via --bs-table-*; die overrulen we zodat de
   rijhover dezelfde zachte accenttint krijgt als in de admin. */
body.page_dealer_orders .dl-ord-table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-state: transparent;
  background-color: var(--dlt-accent-softer);
  color: inherit;
}
body.page_dealer_orders .dl-ord-id {
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page_dealer_orders .dl-ord-date { white-space: nowrap; }
body.page_dealer_orders .dl-ord-amount {
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Leegstaat == .dl-admin-empty ─────────────────────── */
body.page_dealer_orders .dl-empty {
  border: 1px dashed var(--dlt-row-line);
  border-radius: 14px;
  margin: var(--dlt-sp-4);
  color: var(--dlt-label-ink);
}
body.page_dealer_orders .dl-empty i { color: var(--dlt-empty-ico) !important; }

/* ── Paginering == .dl-admin-pager ────────────────────── */
body.page_dealer_orders .pagination { gap: 6px; }
body.page_dealer_orders .page-item .page-link {
  border: 1px solid var(--dlt-card-line);
  border-radius: 8px;
  color: var(--dlt-strong-ink);
  background: var(--dlt-bg);
  padding: 6px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_orders .page-item .page-link:hover {
  border-color: var(--accent, var(--dlt-accent));
  color: var(--accent, var(--dlt-accent));
  background: var(--dlt-accent-softer);
}
body.page_dealer_orders .page-item.active .page-link {
  background: var(--accent, var(--dlt-accent));
  border-color: var(--accent, var(--dlt-accent));
  color: var(--dlt-accent-ink);
}
body.page_dealer_orders .page-item .page-link:focus {
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Mobiel ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page_dealer_orders .dl-ord-table > thead > tr > th,
  body.page_dealer_orders .dl-ord-table > tbody > tr > td {
    padding-left: var(--dlt-sp-3);
    padding-right: var(--dlt-sp-3);
  }
  body.page_dealer_orders .dl-ord-filters .dl-card-body { padding: var(--dlt-sp-3); }
  /* Touch target op de filterknoppen en de paginering. */
  body.page_dealer_orders .dl-ord-filters .dl-btn { min-height: 44px; }
  body.page_dealer_orders .page-item .page-link { min-height: 44px; display: flex; align-items: center; }
}

/* =========================================================
   FACTUUROVERZICHT (.dl-inv-page)
   ---------------------------------------------------------
   Route /account/facturen (Enka B2C) EN /dealers/invoices
   (DutchLine B2B) wijzen naar pages/dealers/invoices/index.php.

   Scope is .dl-inv-page en NIET body.page_dealer_invoices:
   die body-class wordt ook gezet door detail.php, pay.php en
   waiting.php. Bovendien worden .dl-headline, .dl-subtle,
   .dl-mobile-table en .dl-actions gedeeld met de
   warehouse-orderpagina's. Op de body-class scopen zou al die
   pagina's meenemen.

   admin-common.css wordt hier niet geladen (inc/header.php:559),
   dus de dl-admin-tabs look is hieronder nagebouwd op --dlt-*.
   ========================================================= */

/* ── Uit het verplaatste style-blok, 1-op-1 ───────────── */
.dl-inv-page .dl-subtle { color: rgba(15, 23, 42, .68); }

/* ── Paginakop ────────────────────────────────────────── */
.dl-inv-page .dl-headline {
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}
.dl-inv-page > .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line) !important;
  border-radius: 16px;
  box-shadow: none !important;
}

/* =========================================================
   Betaaloverzicht boven de facturenlijst (.dl-inv-kpis).
   Zelfde vormtaal als .dl-stat-card uit admin-common.css, maar
   admin-common.css wordt op klantpagina's niet geladen, dus hier
   nagebouwd op de gedeelde --dlt-* tokens.
   ========================================================= */
.dl-inv-page .dl-inv-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 991px) {
  .dl-inv-page .dl-inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .dl-inv-page .dl-inv-kpis { grid-template-columns: 1fr; }
}
.dl-inv-page .dl-inv-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
}
.dl-inv-page .dl-inv-kpi .ico {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
}
.dl-inv-page .dl-inv-kpi .lbl {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
}
.dl-inv-page .dl-inv-kpi .val {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.dl-inv-page .dl-inv-kpi .val.is-date { font-size: 1.1rem; }
.dl-inv-page .dl-inv-kpi .val.is-danger-txt { color: var(--st-err, #dc3545); }
.dl-inv-page .dl-inv-kpi .sub {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-sub-ink);
  margin-top: 2px;
}
.dl-inv-page .dl-inv-kpi.is-danger  { border-color: color-mix(in srgb, var(--st-err, #dc3545) 35%, transparent); }
.dl-inv-page .dl-inv-kpi.is-danger .ico  { background: var(--st-err-soft, rgba(220,53,69,.12));  color: var(--st-err, #dc3545); }
.dl-inv-page .dl-inv-kpi.is-warning .ico { background: var(--st-warn-soft, rgba(255,193,7,.16)); color: var(--st-warn, #b7791f); }

/* Vervallen factuur: dunne rode markering op de rij. */
.dl-inv-page .dl-inv-table > tbody > tr.dl-inv-row-overdue > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--st-err, #dc3545);
}
.dl-inv-page .dl-inv-overdue-alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   Statustabs == .dl-admin-tabs uit admin-common.css:351-384.
   Links, geen buttons: elke tab is een eigen server-side
   query op ?status= (conventie B uit de Tabs-conventie).
   ========================================================= */
.dl-inv-page .dl-inv-tabs {
  display: flex;
  /* 6px -> 8px: minimale tussenruimte tussen twee aanraakvlakken. */
  gap: 8px;
  padding: 5px;
  background: color-mix(in srgb, var(--dlt-ink) 4%, transparent);
  border-radius: 12px;
  flex-wrap: wrap;
}
.dl-inv-page .dl-inv-tabs .dlatb {
  display: inline-flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: var(--dlt-fs-sm);
  font-weight: var(--dlt-fw-semi);
  color: var(--dlt-label-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease);
}
.dl-inv-page .dl-inv-tabs .dlatb:hover {
  background: color-mix(in srgb, var(--dlt-ink) 6%, transparent);
  color: var(--dlt-strong-ink);
}
.dl-inv-page .dl-inv-tabs .dlatb.is-active {
  background: var(--dlt-bg);
  color: var(--dlt-strong-ink);
  box-shadow: 0 2px 6px rgba(11, 18, 32, .08);
}
.dl-inv-page .dl-inv-tabs .dlatb > i {
  font-size: var(--dlt-fs-xs);
  opacity: .7;
}
.dl-inv-page .dl-inv-tabs .dlatb.is-active > i {
  opacity: 1;
  color: var(--accent, var(--dlt-accent));
}
/* Aantal in een eigen element in plaats van in de labeltekst gebakken
   (verbeterpunt 12 uit de Tabs-conventie). */
.dl-inv-page .dl-inv-tabs .count {
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  padding: 2px 8px;
  border-radius: var(--dlt-r-pill);
  font-variant-numeric: tabular-nums;
}
.dl-inv-page .dl-inv-tabs .dlatb.is-active .count {
  background: var(--accent, var(--dlt-accent));
  color: var(--dlt-accent-ink);
}
/* Bedrag per status: secundair, en op smalle schermen weg zodat de
   balk niet omslaat in drie regels. */
.dl-inv-page .dl-inv-tabs .dl-inv-tab-sum {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-sub-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Filterformulier ──────────────────────────────────── */
.dl-inv-page .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
  margin-bottom: var(--dlt-sp-1);
}
.dl-inv-page .form-control,
.dl-inv-page .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
.dl-inv-page .form-control:focus,
.dl-inv-page .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Tabel == .dl-admin-table ─────────────────────────── */
.dl-inv-page .dl-inv-table > thead > tr > th {
  padding: 12px 16px;
  background: var(--dlt-th-bg);
  border-bottom: 1px solid var(--dlt-row-line);
  color: var(--dlt-strong-ink);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  white-space: nowrap;
}
.dl-inv-page .dl-inv-table > tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--dlt-row-line);
  vertical-align: middle;
}
.dl-inv-page .dl-inv-table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-state: transparent;
  background-color: var(--dlt-accent-softer);
  color: inherit;
}
.dl-inv-page .dl-inv-table .text-end { font-variant-numeric: tabular-nums; }

/* Kolombreedtes: vervangt de inline min-width per th. Alleen boven de
   mobiele kaartweergave, want daaronder wordt de tabel een lijst en
   moeten de breedtes juist NIET gelden. */
@media (min-width: 769px) {
  /* Was 1080px met een actiekolom van 17%: daar pasten drie knoppen met tekst
     niet in, dus die wrapten en liepen de tabel uit. Met icoonknoppen kan de
     tabel smaller en verdwijnt de horizontale scrollbalk. */
  .dl-inv-page .dl-inv-table { min-width: 900px; }
  .dl-inv-page .dl-inv-c-id     { width: 24%; }
  .dl-inv-page .dl-inv-c-date   { width: 10%; }
  .dl-inv-page .dl-inv-c-due    { width: 15%; }
  .dl-inv-page .dl-inv-c-status { width: 12%; }
  .dl-inv-page .dl-inv-c-inc    { width: 13%; }
  .dl-inv-page .dl-inv-c-open   { width: 11%; }
  .dl-inv-page .dl-inv-c-act    { width: 15%; }

  /* Datums en bedragen mogen nooit midden in een getal afbreken. */
  .dl-inv-page .dl-inv-table > tbody > tr > td:nth-child(2),
  .dl-inv-page .dl-inv-table > tbody > tr > td:nth-child(3),
  .dl-inv-page .dl-inv-table > tbody > tr > td:nth-child(5),
  .dl-inv-page .dl-inv-table > tbody > tr > td:nth-child(6) { white-space: nowrap; }
}

/* ── Acties: icoonknoppen ─────────────────────────────── */
.dl-inv-page .dl-inv-acts {
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
}
.dl-inv-page .dl-inv-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 1px solid var(--dlt-row-line, var(--border));
  border-radius: 9px; background: var(--dlt-bg, #fff);
  color: var(--dlt-strong-ink, var(--ink)); text-decoration: none;
  font-size: .82rem; transition: background .12s, border-color .12s, color .12s;
}
.dl-inv-page .dl-inv-act > span { display: none; }
.dl-inv-page .dl-inv-act:hover {
  background: var(--accent-soft, var(--dlt-accent-softer));
  border-color: var(--accent, var(--dl-blue-700));
  color: var(--accent, var(--dl-blue-700));
}
.dl-inv-page .dl-inv-act:focus-visible {
  outline: 2px solid var(--accent, var(--dl-blue-700)); outline-offset: 2px;
}
.dl-inv-page .dl-inv-act.is-pay {
  background: var(--accent, var(--dl-blue-700));
  border-color: var(--accent, var(--dl-blue-700));
  color: #fff;
}
.dl-inv-page .dl-inv-act.is-pay:hover { filter: brightness(1.08); color: #fff; }

/* In de kaartweergave op mobiel is er ruimte zat: labels erbij. */
@media (max-width: 768px) {
  .dl-inv-page .dl-inv-acts { justify-content: flex-start; }
  .dl-inv-page .dl-inv-act {
    width: auto; height: 38px; padding: 0 14px; font-weight: 600;
  }
  .dl-inv-page .dl-inv-act > span { display: inline; }
}

/* ── Paginering + voetregel ───────────────────────────── */
.dl-inv-page .dl-card-body.border-top { border-top-color: var(--dlt-row-line) !important; }
.dl-inv-page .pagination { gap: 6px; }
.dl-inv-page .page-item .page-link {
  border: 1px solid var(--dlt-card-line);
  border-radius: 8px;
  color: var(--dlt-strong-ink);
  background: var(--dlt-bg);
  padding: 6px 12px;
  font-size: var(--dlt-fs-sm);
}
.dl-inv-page .page-item .page-link:hover {
  border-color: var(--accent, var(--dlt-accent));
  color: var(--accent, var(--dlt-accent));
  background: var(--dlt-accent-softer);
}
.dl-inv-page .page-item.active .page-link {
  background: var(--accent, var(--dlt-accent));
  border-color: var(--accent, var(--dlt-accent));
  color: var(--dlt-accent-ink);
}
.dl-inv-page .page-item.disabled .page-link { opacity: .4; }

/* =========================================================
   Mobiele kaartweergave. 1-op-1 uit het verplaatste blok,
   alleen gescoped op .dl-inv-page.
   ========================================================= */
@media (max-width: 768px) {
  .dl-inv-page table.dl-mobile-table thead { display: none; }
  .dl-inv-page table.dl-mobile-table tbody tr {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding: 10px 12px;
  }
  .dl-inv-page table.dl-mobile-table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
  }
  .dl-inv-page table.dl-mobile-table tbody td::before {
    content: attr(data-label);
    color: #6c757d;
    font-size: .85rem;
  }
  .dl-inv-page table.dl-mobile-table tbody td.text-end {
    justify-content: space-between !important;
    text-align: left !important;
  }
  .dl-inv-page table.dl-mobile-table tbody td .dl-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  /* Tabbalk: horizontaal scrollen in plaats van naar drie regels wrappen.
     De schuifbalk is verborgen, dus er was niets dat liet zien dat de strip
     doorloopt: de laatste tab werd gewoon afgekapt door de kaartrand. De
     maskering laat de rechterkant uitvloeien, wat "er is meer" leest.
     Nadeel dat we accepteren: het masker blijft ook staan als je helemaal
     aan het einde bent - dat kost geen tab en vraagt geen JavaScript. */
  .dl-inv-page .dl-inv-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .dl-inv-page .dl-inv-tabs::-webkit-scrollbar { display: none; }
  .dl-inv-page .dl-inv-tabs .dlatb { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  .dl-inv-page .dl-inv-tabs .dl-inv-tab-sum { display: none; }
}

/* =========================================================
   RETOUROVERZICHT (body.page_dealer_returns)
   ---------------------------------------------------------
   Route /account/retour (Enka B2C) EN /dealers/returns
   (DutchLine B2B) wijzen naar pages/dealers/returns/index.php.

   Hier mag WEL op de body-class gescoped worden: $cPage =
   'page_dealer_returns' wordt alleen door dit ene bestand
   gezet. inc/dutchline-menu.php leest de waarde, maar zet hem
   niet. Dat is anders dan bij de facturen, waar detail.php,
   pay.php en waiting.php dezelfde $cPage hebben.

   Was een style-blok van 65 regels in de pagina zelf; hier
   staat het op --dlt-* tokens en in dezelfde vormtaal als het
   dashboard, de bestellingen en de facturen.

   NIET AANRAKEN in de markup: de ID's dlNewReturn*,
   dlCancelReturn*, btnNewReturn en dlRetPhotosGal_{id} hangen
   aan het inline script, net als .dl-ret-cb, .dl-ret-qty,
   .js-cancel-return en .x. .pswp-gallery is van PhotoSwipe.
   ========================================================= */

/* ── Paginakop ────────────────────────────────────────── */
body.page_dealer_returns h1.h4 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}

/* =========================================================
   KPI-strip == .dl-stat-card (admin-common.css:145-166).
   De markup had het icoon al links, dus alleen de maten,
   kleuren en typografie zijn gelijkgetrokken.
   ========================================================= */
body.page_dealer_returns .dl-returns-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
body.page_dealer_returns .dl-returns-kpi {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-returns-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 18, 32, .08);
}
body.page_dealer_returns .dl-returns-kpi .kpi-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-size: 1.05rem;
}
body.page_dealer_returns .dl-returns-kpi .kpi-v {
  font-size: 1.5rem;
  font-weight: var(--dlt-fw-black);
  color: var(--dlt-strong-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Label in caps onder het getal, zoals .dl-stat-card .lbl */
body.page_dealer_returns .dl-returns-kpi .kpi-l {
  font-size: var(--dlt-fs-2xs);
  color: var(--dlt-label-ink);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  margin-top: 2px;
}
/* Statustinten: zacht vlak met gekleurd glyph. */
body.page_dealer_returns .dl-returns-kpi.is-total .kpi-ic {
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
}
body.page_dealer_returns .dl-returns-kpi.is-pending .kpi-ic {
  background: color-mix(in srgb, var(--dlt-c-amber) 16%, transparent);
  color: var(--dlt-c-amber-ink);
}
body.page_dealer_returns .dl-returns-kpi.is-approved .kpi-ic {
  background: color-mix(in srgb, var(--dlt-c-green) 16%, transparent);
  color: var(--dlt-c-green-ink);
}
body.page_dealer_returns .dl-returns-kpi.is-rejected .kpi-ic {
  background: color-mix(in srgb, var(--dlt-c-red) 14%, transparent);
  color: var(--dlt-c-red-ink);
}

/* ── Kaart om de lijst ────────────────────────────────── */
body.page_dealer_returns > .container .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
  overflow: hidden;
}

/* =========================================================
   Retourregels. Dit zijn <details>/<summary>, dus het
   open-/dichtklappen is native - er hangt geen JS aan.
   ========================================================= */
body.page_dealer_returns .dl-return-row summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--dlt-row-line);
  transition: background var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-return-row:first-of-type summary { border-top: 0; }
body.page_dealer_returns .dl-return-row summary::-webkit-details-marker { display: none; }
body.page_dealer_returns .dl-return-row summary:hover { background: var(--dlt-accent-softer); }
/* Chevron via het Font Awesome glyph, zoals het was. */
body.page_dealer_returns .dl-return-row summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--dlt-sub-ink);
  font-size: var(--dlt-fs-xs);
  transition: transform var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-return-row[open] summary::after { transform: rotate(180deg); }
body.page_dealer_returns .dl-return-row[open] summary {
  background: var(--dlt-th-bg);
  border-bottom: 1px solid var(--dlt-row-line);
}
body.page_dealer_returns .dl-return-row .items-box {
  padding: 0 18px 18px;
  background: var(--dlt-head-bg);
}

/* ── Regelitem met thumbnail ──────────────────────────── */
body.page_dealer_returns .dl-return-row .ri-mini {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--dlt-card-line);
  border-radius: 12px;
  background: var(--dlt-bg);
  margin-top: 10px;
}
body.page_dealer_returns .dl-return-row .ri-mini img,
body.page_dealer_returns .dl-return-row .ri-mini .ri-thumb-ph {
  width: 64px; height: 64px;
  object-fit: contain;
  border: 1px solid var(--dlt-card-line);
  border-radius: 10px;
  background: var(--dlt-bg);
  flex: 0 0 auto;
}
body.page_dealer_returns .dl-return-row .ri-mini .ri-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--dlt-sub-ink);
  font-size: 1.2rem;
  background: var(--dlt-th-bg);
}
body.page_dealer_returns .dl-return-row .ri-mini a.ri-thumb-link { display: block; }
body.page_dealer_returns .dl-return-row .ri-mini a.ri-thumb-link:hover img {
  border-color: var(--accent, var(--dlt-accent));
}

/* ── Fotogalerij (PhotoSwipe) ─────────────────────────── */
body.page_dealer_returns .dl-ret-photos {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
body.page_dealer_returns .dl-ret-photos a { display: block; }
body.page_dealer_returns .dl-ret-photos img {
  width: 80px; height: 80px;
  object-fit: cover;
  border: 1px solid var(--dlt-card-line);
  border-radius: 10px;
  background: var(--dlt-bg);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-ret-photos a:hover img {
  border-color: var(--accent, var(--dlt-accent));
}

/* ── Uploadzone in de nieuw-retour modal ──────────────── */
body.page_dealer_returns .dl-ret-upload {
  margin-top: 14px;
  padding: 18px 14px;
  border: 2px dashed var(--dlt-card-line);
  border-radius: 12px;
  background: var(--dlt-th-bg);
  text-align: center;
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-ret-upload:hover {
  border-color: var(--accent, var(--dlt-accent));
  background: var(--dlt-bg);
}
body.page_dealer_returns .dl-ret-upload .upload-hint {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-label-ink);
  margin-top: 6px;
}
body.page_dealer_returns .dl-ret-upload-previews {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center;
}
body.page_dealer_returns .dl-ret-upload-previews .ph {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--dlt-card-line);
}
body.page_dealer_returns .dl-ret-upload-previews .ph img {
  width: 100%; height: 100%; object-fit: cover;
}
/* .x wordt door het inline script aangesproken - naam en gedrag blijven. */
body.page_dealer_returns .dl-ret-upload-previews .ph .x {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ── Leegstaat == .dl-admin-empty ─────────────────────── */
body.page_dealer_returns .dl-ret-empty {
  border: 1px dashed var(--dlt-row-line);
  border-radius: 14px;
  margin: var(--dlt-sp-4);
  color: var(--dlt-label-ink);
}
body.page_dealer_returns .dl-ret-empty > i { color: var(--dlt-empty-ico) !important; }
body.page_dealer_returns .dl-ret-empty p.fw-bold { color: var(--dlt-strong-ink); }

/* ── Modals ───────────────────────────────────────────── */
body.page_dealer_returns .modal-content { border-radius: 16px; }
body.page_dealer_returns .modal-header { border-bottom-color: var(--dlt-row-line); }
body.page_dealer_returns .modal-footer { border-top-color: var(--dlt-row-line); }
body.page_dealer_returns .modal .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
}
body.page_dealer_returns .modal .form-control,
body.page_dealer_returns .modal .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .modal .form-control:focus,
body.page_dealer_returns .modal .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Mobiel ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page_dealer_returns .dl-returns-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dlt-sp-3);
  }
  body.page_dealer_returns .dl-returns-kpi { padding: 14px; gap: 10px; }
  body.page_dealer_returns .dl-returns-kpi .kpi-ic { width: 38px; height: 38px; font-size: var(--dlt-fs-sm); }
  body.page_dealer_returns .dl-returns-kpi .kpi-v { font-size: var(--dlt-fs-lg); }
  body.page_dealer_returns .dl-return-row summary { padding: 12px 14px; }
  body.page_dealer_returns .dl-return-row .items-box { padding: 0 14px 14px; }
  /* Kopknoppen op volle breedte i.p.v. half afgeknepen naast elkaar. */
  body.page_dealer_returns .dl-ret-photos img { width: 64px; height: 64px; }
}

/* Kleine metaregel (datum, bedrag onder een regel). Verving drie losse
   inline font-sizes in de markup. De drie style="display:none" die er nog
   staan blijven: die worden door het inline script gezet en gelezen. */
body.page_dealer_returns .dl-ret-meta {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-label-ink);
}

/* =========================================================
   PROFIEL (body.page_dealer_profile)
   ---------------------------------------------------------
   Route /account/profiel (Enka B2C) EN /dealers/profile
   (DutchLine B2B) wijzen naar pages/dealers/profile/index.php.

   body.page_dealer_profile mag: die $cPage wordt alleen door
   dit bestand gezet (dutchline-menu.php leest hem, zet hem niet).

   De kolomverdeling was hier al goed - 8+4, 6+6, 7+5, 4+8 en
   12 tellen allemaal op - dus alleen de vormtaal is
   gelijkgetrokken met het dashboard, de bestellingen, de
   facturen en de retouren.

   NIET AANRAKEN: de jQuery-haken #dlProfilePersonal/Company/
   Password-Form, -Btn en -Msg, de pf_* veld-ID's,
   #dlPwStrengthBar en #dlPwStrengthLabel, en .is-invalid.
   Op #dlPwStrengthBar mag geen width of background uit CSS
   komen: jQuery zet die inline.
   ========================================================= */

/* ── Paginakop ────────────────────────────────────────── */
body.page_dealer_profile h1.h4 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}

/* ── Kaarten == .dl-admin-card ────────────────────────── */
body.page_dealer_profile .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
}
body.page_dealer_profile .dl-card-header {
  padding: 14px 18px;
  min-height: 0;
  border-bottom: 1px solid var(--dlt-row-line);
  background: var(--dlt-head-bg);
  font-size: 1rem;
  font-weight: var(--dlt-fw-black);
  color: var(--dlt-strong-ink);
}
body.page_dealer_profile .dl-card-header > i {
  color: var(--accent, var(--dlt-accent));
  opacity: .8;
  font-size: var(--dlt-fs-sm);
}
body.page_dealer_profile .dl-card-body { padding: 18px; }

/* ── Formuliervelden ──────────────────────────────────── */
body.page_dealer_profile .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
  margin-bottom: var(--dlt-sp-1);
}
body.page_dealer_profile .form-control,
body.page_dealer_profile .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_profile .form-control:focus,
body.page_dealer_profile .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}
/* .is-invalid komt uit form.css en wordt door het script gezet; hier
   alleen zorgen dat de zachte veldachtergrond de foutrand niet opeet. */
body.page_dealer_profile .form-control.is-invalid,
body.page_dealer_profile .form-select.is-invalid {
  border-color: var(--dlt-c-red);
  background-color: var(--dlt-bg);
}
body.page_dealer_profile .form-text {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-sub-ink);
}

/* ── Wachtwoordmeter ──────────────────────────────────── */
body.page_dealer_profile .dl-pf-pw-track {
  height: 4px;
  border-radius: 4px;
  background: var(--dlt-surface-2);
  overflow: hidden;
}

/* ── Opslaan-regel onder een formulier ────────────────── */
body.page_dealer_profile form .mt-3.d-flex {
  border-top: 1px solid var(--dlt-row-line);
  padding-top: var(--dlt-sp-4);
  margin-top: var(--dlt-sp-4) !important;
}

/* ── Accountoverzicht (list-group) ────────────────────── */
body.page_dealer_profile .list-group-item {
  border-color: var(--dlt-row-line);
  padding: 12px 18px;
  align-items: center;
  background: transparent;
}
body.page_dealer_profile .list-group-item .text-muted {
  color: var(--dlt-label-ink) !important;
  font-size: var(--dlt-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  font-weight: var(--dlt-fw-semi);
}
body.page_dealer_profile .list-group-item .fw-bold,
body.page_dealer_profile .list-group-item span.small:not(.text-muted) {
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Snelkoppelingen ──────────────────────────────────── */
body.page_dealer_profile .dl-card-body.d-grid .dl-btn {
  justify-content: flex-start;
  border: 1px solid var(--dlt-card-line);
  background: var(--dlt-bg);
  min-height: 44px;
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              transform var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_profile .dl-card-body.d-grid .dl-btn:hover {
  border-color: var(--accent, var(--dlt-accent));
  background: var(--dlt-accent-softer);
  transform: translateX(2px);
}

/* ── Mobiel ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page_dealer_profile .dl-card-body { padding: var(--dlt-sp-4); }
  body.page_dealer_profile .dl-card-header { padding: 12px var(--dlt-sp-4); }
  body.page_dealer_profile .list-group-item { padding: 12px var(--dlt-sp-4); }
  /* Opslaan-knop over de volle breedte, met de statusmelding eronder. */
  body.page_dealer_profile form .mt-3.d-flex { flex-wrap: wrap; }
  body.page_dealer_profile form .mt-3.d-flex .dl-btn { width: 100%; }
}

/* Zoektreffers op product onder het factuurnummer (facturenlijst).
   Laat zien waarom een factuur in het resultaat staat als er op SKU, EAN of
   productnaam is gezocht. */
.dl-inv-page .dl-inv-hits {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
  max-width: 340px; /* anders rekt een lange productnaam de hele kolom op */
}
.dl-inv-page .dl-inv-hit {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.dl-inv-page .dl-inv-hit img,
.dl-inv-page .dl-inv-hit-ph {
  width: 32px; height: 32px; flex: 0 0 auto;
  object-fit: contain; border-radius: 5px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--muted); font-size: .7rem;
}
.dl-inv-page .dl-inv-hit-txt { min-width: 0; line-height: 1.25; }
.dl-inv-page .dl-inv-hit-txt b {
  display: block; font-size: .74rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-inv-page .dl-inv-hit-txt span { font-size: .68rem; color: var(--muted); }

/* ── Creditverzoeken-tab op de facturenlijst ──────────── */
.dl-inv-page .dl-cr-list { display: flex; flex-direction: column; }
.dl-inv-page .dl-cr-row { border-bottom: 1px solid var(--dlt-row-line, var(--border)); }
.dl-inv-page .dl-cr-row:last-child { border-bottom: 0; }
.dl-inv-page .dl-cr-sum {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 16px; cursor: pointer; list-style: none;
}
.dl-inv-page .dl-cr-sum::-webkit-details-marker { display: none; }
.dl-inv-page .dl-cr-sum:hover { background: var(--surface); }
.dl-inv-page .dl-cr-chev {
  color: var(--muted); font-size: .78rem; margin-top: 4px; flex: 0 0 auto;
  transition: transform .15s ease;
}
.dl-inv-page .dl-cr-row[open] > .dl-cr-sum .dl-cr-chev { transform: rotate(90deg); }

/* Regels van het verzoek */
.dl-inv-page .dl-cr-items {
  padding: 4px 16px 16px 44px;
  display: flex; flex-direction: column; gap: 6px;
}
.dl-inv-page .dl-cr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.dl-inv-page .dl-cr-item img,
.dl-inv-page .dl-cr-item-ph {
  width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.dl-inv-page .dl-cr-item-txt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.dl-inv-page .dl-cr-item-txt b {
  display: block; font-size: .8rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-inv-page .dl-cr-item-txt span { font-size: .72rem; color: var(--muted); }
.dl-inv-page .dl-cr-item-amt {
  font-weight: 700; font-size: .82rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dl-inv-page .dl-cr-item-empty { font-size: .82rem; color: var(--muted); }
.dl-inv-page .dl-cr-main { flex: 1 1 320px; min-width: 0; }
.dl-inv-page .dl-cr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dl-inv-page .dl-cr-top strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.dl-inv-page .dl-cr-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px; font-size: .78rem; color: var(--muted);
}
.dl-inv-page .dl-cr-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dl-inv-page .dl-cr-meta a { color: inherit; font-weight: 600; }
.dl-inv-page .dl-cr-note {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  border-left: 3px solid var(--border); background: var(--surface);
  font-size: .8rem;
}
.dl-inv-page .dl-cr-note.is-ok { border-left-color: var(--ok, #16a34a); }
.dl-inv-page .dl-cr-note.is-no { border-left-color: var(--danger, #dc2626); }
.dl-inv-page .dl-cr-side {
  display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap;
}
.dl-inv-page .dl-cr-amt {
  font-size: 1.05rem; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dl-inv-page .dl-cr-acts { display: flex; gap: 6px; }

.dl-inv-page .dl-cr-empty {
  display: flex; align-items: center; gap: 16px; padding: 34px 20px; color: var(--muted);
}
.dl-inv-page .dl-cr-empty i { font-size: 1.8rem; opacity: .5; }
.dl-inv-page .dl-cr-empty strong { display: block; color: var(--ink); font-size: .95rem; }
.dl-inv-page .dl-cr-empty p { margin: 4px 0 0; font-size: .84rem; }

@media (max-width: 575.98px) {
  .dl-inv-page .dl-cr-side { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ── Dashboardkop binnen de beheerschil ──────────────────────────────────────
   Buiten de schil is deze kop de enige plek waar staat wie je bent en welke
   rol je hebt; daar blijft hij zoals hij is. Binnen de schil staat je naam al
   rechtsboven in de kopbalk en staan de snelkoppelingen in de zijbalk, dus wat
   overblijft is een vlak van ruim honderd pixels dat alleen je naam herhaalt.
   Hier wordt het een gewone paginakop: dezelfde informatie, een kwart van de
   ruimte, en de rest gaat naar waar het dashboard eigenlijk over gaat. */
body.page_dashboard .adm-main .db-hero {
  background: none;
  color: var(--dlt-ink);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--dlt-sp-5);
  border-bottom: 1px solid var(--dlt-card-line);
  padding-bottom: var(--dlt-sp-4);
}
body.page_dashboard .adm-main .db-hero-name {
  color: var(--dlt-ink);
  font-size: var(--dlt-fs-xl);
}
/* Zelfde pill als buiten de schil, zodat de twee weergaven een taal spreken. */
body.page_dashboard .adm-main .db-hero-role {
  color: var(--dlt-accent);
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  box-shadow: var(--dl-db-shadow);
}
body.page_dashboard .adm-main .db-hero-sub,
body.page_dashboard .adm-main .db-hero-date {
  color: var(--dlt-label-ink);
}
body.page_dashboard .adm-main .dl-db-role-dot { color: var(--dlt-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARDBLOKKEN - alles met het voorvoegsel dl-dbx-
   ---------------------------------------------------------------------------
   Hoort bij inc/dashboard/ (register, render, svg, views). Sectie 4.1 van
   claude-brain/dashboard-bouwplan.md: geen nieuw bestand, want de volgorde van
   $__cssFiles in inc/header.php IS de cascade en dl-theme.css moet de laatste
   blijven.

   ALLES is gescoped onder body.page_dashboard. Dezelfde reden als bij het blok
   hierboven: db-card, db-table en db-empty worden ook door de dealerpagina's
   gebruikt en die mogen hier niets van merken.

   Vormtaal: de --dlt-* tokens en de --dl-db-* tokens die hierboven al staan.
   Geen enkele hex. Op Enka cappt assets/css/enka/sharp-edges.css elke radius
   met !important op 5px; niets hieronder leunt op ronding, en .dl-pill en
   .db-bar staan al in de uitzonderingenlijst daar.

   Breekpunten: 1024px (van 12 koloms naar de md-span) en 768px (naar de
   sm-span en naar de aanraakmaten). 768, niet 767.98.
   ═══════════════════════════════════════════════════════════════════════════ */

body.page_dashboard .dl-dbx {
  --dl-dbx-gap:  var(--dlt-sp-4);
  --dl-dbx-top:  60px;   /* dashboard.php overschrijft dit per omgeving */
}

/* ── 1. Kopregel ─────────────────────────────────────────────────────────────
   Een regel op 1440: wie je bent links, de periodepillen en "bijgewerkt om"
   rechts. Onder 768 wordt het drie regels onder elkaar. */
body.page_dashboard .dl-dbx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--dlt-sp-3) var(--dlt-sp-4);
  margin-bottom: var(--dlt-sp-5);
  padding-bottom: var(--dlt-sp-4);
  border-bottom: 1px solid var(--dlt-card-line);
}
body.page_dashboard .dl-dbx-head-id { min-width: 0; margin-right: auto; }

body.page_dashboard .dl-dbx-hello {
  margin: 0;
  font-size: var(--dlt-fs-xl);
  font-weight: var(--dlt-fw-black);
  line-height: 1.15;
  color: var(--dlt-ink);
}
body.page_dashboard .dl-dbx-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--dlt-sp-3);
  margin: 4px 0 0;
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-label-ink);
}
body.page_dashboard .dl-dbx-head-co   { font-weight: var(--dlt-fw-semi); color: var(--dlt-ink-2); }
body.page_dashboard .dl-dbx-head-date { white-space: nowrap; }

/* Periodewisselaar. Gewone links, dus hij werkt zonder JavaScript. */
body.page_dashboard .dl-dbx-periods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dlt-sp-2);
  margin: 0;
}
body.page_dashboard .dl-dbx-period {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* aanraakmaat, ook op desktop */
  padding: 0 var(--dlt-sp-3);
  border: 1px solid var(--dlt-line);
  border-radius: var(--dlt-r-pill);
  background: var(--dl-db-panel);
  color: var(--dlt-ink-2);
  font-size: var(--dlt-fs-sm);
  font-weight: var(--dlt-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
body.page_dashboard .dl-dbx-period:hover { background: var(--dlt-surface); border-color: var(--dlt-line-2); }
body.page_dashboard .dl-dbx-period:focus-visible { outline: none; box-shadow: var(--dlt-ring); }
body.page_dashboard .dl-dbx-period.is-active {
  background: var(--dlt-accent);
  border-color: var(--dlt-accent);
  color: var(--dlt-accent-ink);
  font-weight: var(--dlt-fw-bold);
}

body.page_dashboard .dl-dbx-fresh {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  margin: 0;
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-muted);
  white-space: nowrap;
}
body.page_dashboard .dl-dbx-head-refresh { min-width: 44px; min-height: 44px; }

body.page_dashboard .dl-dbx-notices { margin-bottom: var(--dlt-sp-4); display: grid; gap: var(--dlt-sp-2); }

/* ── 2. Groep en raster ──────────────────────────────────────────────────────
   Het raster is bewust FLEX en geen CSS-grid. Een sticky grid-item kan alleen
   binnen zijn eigen grid-area plakken - dat is precies de hoogte van de kaart
   zelf, dus de triagestrip zou niet blijven staan. Een sticky flex-item plakt
   wel binnen de hele flexcontainer. De 12-koloms breedtes zijn daarom een
   flex-basis: bij een tussenruimte G is een baan van N kolommen
   N/12*(100%+G)-G breed, zodat twee banen van 6 plus een G precies 100% zijn. */
body.page_dashboard .dl-dbx-group { margin-bottom: var(--dlt-sp-8); }
body.page_dashboard .dl-dbx-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--dlt-sp-2);
  margin-bottom: var(--dlt-sp-3);
}
body.page_dashboard .dl-dbx-group-title {
  margin: 0;
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dlt-label-ink);
}
body.page_dashboard .dl-dbx-group-time { font-size: var(--dlt-fs-xs); color: var(--dlt-muted); }

body.page_dashboard .dl-dbx-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--dl-dbx-gap);
}
body.page_dashboard .dl-dbx-col {
  min-width: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

body.page_dashboard .dl-dbx-lg-1  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  1 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-2  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  2 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-3  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  3 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-4  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  4 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-5  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  5 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-6  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  6 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-7  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  7 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-8  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  8 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-9  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  9 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-10 { flex-basis: calc((100% + var(--dl-dbx-gap)) * 10 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-11 { flex-basis: calc((100% + var(--dl-dbx-gap)) * 11 / 12 - var(--dl-dbx-gap)); }
body.page_dashboard .dl-dbx-lg-12 { flex-basis: 100%; }

@media (max-width: 1024px) {
  body.page_dashboard .dl-dbx-md-1  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  1 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-2  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  2 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-3  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  3 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-4  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  4 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-5  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  5 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-6  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  6 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-7  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  7 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-8  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  8 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-9  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  9 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-10 { flex-basis: calc((100% + var(--dl-dbx-gap)) * 10 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-11 { flex-basis: calc((100% + var(--dl-dbx-gap)) * 11 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-md-12 { flex-basis: 100%; }
}

@media (max-width: 768px) {
  body.page_dashboard .dl-dbx-sm-1  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  1 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-2  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  2 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-3  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  3 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-4  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  4 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-5  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  5 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-6  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  6 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-7  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  7 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-8  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  8 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-9  { flex-basis: calc((100% + var(--dl-dbx-gap)) *  9 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-10 { flex-basis: calc((100% + var(--dl-dbx-gap)) * 10 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-11 { flex-basis: calc((100% + var(--dl-dbx-gap)) * 11 / 12 - var(--dl-dbx-gap)); }
  body.page_dashboard .dl-dbx-sm-12 { flex-basis: 100%; }
}

/* ── 3. De kaart ─────────────────────────────────────────────────────────────
   .dl-card uit cards.css geeft alleen positionering mee; het paneel zelf komt
   uit dezelfde --dl-db-* tokens als .db-card, zodat het oude en het nieuwe
   dashboard een taal spreken. */
body.page_dashboard .dl-dbx-card {
  display: flex;
  flex-direction: column;
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r);
  box-shadow: var(--dl-db-shadow);
  overflow: hidden;
}
/* Geen hover-sheen op een werkblok: dat is geen klikbare kaart. */
body.page_dashboard .dl-dbx-card::before { content: none; }

body.page_dashboard .dl-dbx-card-head {
  flex-wrap: wrap;
  gap: var(--dlt-sp-2) var(--dlt-sp-3);
  padding: var(--dlt-sp-3) var(--dl-card-pad);
  background: var(--dl-db-head-bg);
  border-bottom: 1px solid var(--dl-db-card-line);
}
body.page_dashboard .dl-dbx-card-title {
  margin: 0;
  font-size: var(--dlt-fs-md);
  font-weight: var(--dlt-fw-bold);
  color: var(--dl-db-strong-ink);
  line-height: 1.25;
  min-width: 0;
}
body.page_dashboard .dl-dbx-card-tools {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}
body.page_dashboard .dl-dbx-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--dlt-fs-sm);
  font-weight: var(--dlt-fw-semi);
  color: var(--dlt-accent);
  text-decoration: none;
  white-space: nowrap;
}
body.page_dashboard .dl-dbx-card-link:hover { text-decoration: underline; }
body.page_dashboard .dl-dbx-refresh { min-width: 44px; min-height: 44px; }

/* De verplichte scope-chip plus de telling in de kop. */
body.page_dashboard .dl-dbx-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--dlt-sp-2);
  border: 1px solid var(--dlt-line);
  border-radius: var(--dlt-r-pill);
  background: var(--dlt-surface);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-semi);
  color: var(--dlt-muted);
  white-space: nowrap;
}
body.page_dashboard .dl-dbx-scope.is-period { color: var(--dlt-accent); border-color: var(--dlt-accent-line); background: var(--dlt-accent-soft); }
body.page_dashboard .dl-dbx-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
body.page_dashboard .dl-dbx-count-n   { font-size: var(--dlt-fs-md); font-weight: var(--dlt-fw-black); color: var(--dlt-ink); }
body.page_dashboard .dl-dbx-count-lbl { font-size: var(--dlt-fs-xs); font-weight: var(--dlt-fw-normal); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-count-amt { font-size: var(--dlt-fs-sm); font-weight: var(--dlt-fw-semi); color: var(--dlt-ink-2); }

body.page_dashboard .dl-dbx-card-body {
  padding: var(--dl-card-pad);
  display: grid;
  /* minmax(0,1fr) en niet de impliciete auto-kolom: een gridcel krijgt
     min-width:auto en groeit dan mee met zijn breedste kind. De triagestrip
     (een <nav> met acht chips) werd daardoor 1029px breed in een kaart van
     337px; overflow:hidden op de kaart knipte zes chips weg en de
     overflow-x:auto op de <ul> kreeg nooit een te kleine doos om in te
     scrollen. Gemeten op 390 en 768. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dlt-sp-4);
  min-width: 0;
}

body.page_dashboard .dl-dbx-card-foot {
  flex-wrap: wrap;
  gap: var(--dlt-sp-2) var(--dlt-sp-3);
  padding: var(--dlt-sp-2) var(--dl-card-pad);
  background: var(--dl-db-panel-2);
  border-top: 1px solid var(--dl-db-card-line);
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-muted);
  justify-content: flex-start;
}
body.page_dashboard .dl-dbx-foot-main { display: flex; align-items: center; gap: var(--dlt-sp-3); flex-wrap: wrap; }
body.page_dashboard .dl-dbx-foot-note { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-foot-time { margin-left: auto; white-space: nowrap; }
body.page_dashboard .dl-dbx-updated[data-dlb-cached="1"] { font-style: italic; }
body.page_dashboard .dl-dbx-more {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: var(--dlt-fw-semi);
  color: var(--dlt-accent);
  text-decoration: none;
}
body.page_dashboard .dl-dbx-more:hover { text-decoration: underline; }

/* ── 4. Lege staat, ontbrekende tabel, fout en laadstaat ─────────────────── */
body.page_dashboard .dl-dbx-empty,
body.page_dashboard .dl-dbx-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dlt-sp-2);
  padding: var(--dlt-sp-6) var(--dlt-sp-4);
  text-align: center;
}
body.page_dashboard .dl-dbx-empty-ico { font-size: 1.6rem; color: var(--dl-db-empty-ico); }
body.page_dashboard .dl-dbx-empty.is-ok .dl-dbx-empty-ico { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-error .dl-dbx-empty-ico       { color: var(--dlt-c-amber-ink); }
body.page_dashboard .dl-dbx-empty-text { margin: 0; font-size: var(--dlt-fs-sm); color: var(--dlt-muted); max-width: 52ch; }
body.page_dashboard .dl-dbx-skel { display: grid; gap: var(--dlt-sp-3); align-content: start; }
body.page_dashboard .dl-dbx-skel-row { height: 14px; }

/* ── 5. Triagestrip ─────────────────────────────────────────────────────────
   De ENIGE sticky laag op deze pagina. Twee sticky lagen vreten op een
   1440x900-laptop precies de rij op waar de werklijsten staan. z-index blijft
   onder de winkelheader (1035) en onder de kopbalk van de beheerschil. */
body.page_dashboard #dlb-triage {
  position: sticky;
  top: var(--dl-dbx-top, 60px);
  z-index: var(--dlt-z-sticky);
  background: var(--dl-db-panel);
  box-shadow: var(--dl-db-shadow-2);
}
body.page_dashboard #dlb-triage .dl-dbx-card-head { padding-top: var(--dlt-sp-2); padding-bottom: var(--dlt-sp-2); min-height: 0; }
body.page_dashboard #dlb-triage .dl-dbx-card-body { padding-top: var(--dlt-sp-2); padding-bottom: var(--dlt-sp-2); }
/* De voet zou hier alleen "bijgewerkt om" herhalen; dat staat al in de
   groepskop en elke pixel telt bij een strip die blijft staan. */
body.page_dashboard #dlb-triage .dl-dbx-card-foot { display: none; }

body.page_dashboard .dl-dbx-triage-list {
  display: flex;
  gap: var(--dlt-sp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.page_dashboard .dl-dbx-tchip {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  min-height: 44px;
  padding: var(--dlt-sp-2) var(--dlt-sp-3);
  border: 1px solid var(--dlt-line);
  border-radius: var(--dlt-r);
  background: var(--dlt-surface);
  color: var(--dlt-ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
body.page_dashboard a.dl-dbx-tchip:hover { border-color: var(--dlt-line-strong); }
body.page_dashboard .dl-dbx-tchip:focus-visible { outline: none; box-shadow: var(--dlt-ring); }
body.page_dashboard .dl-dbx-tchip.is-static { cursor: default; }

/* Elke chip had een eigen gevulde pasteltint met bijpassende rand: groen,
   blauw, accent, oranje en rood naast elkaar in een rij van zeven. Als alles
   een kleur draagt vraagt alles even hard om aandacht en valt er niets op -
   en het past niet bij een CMS dat verder wit, grijs en een accentkleur is.

   De chip is nu een gewone kaart. De kleur is verhuisd naar waar hij iets
   zegt: het CIJFER. Een rood getal tussen zes grijze chips zie je meteen,
   zeven pastelvlakjes niet. Een chip zonder werk (0 met een vinkje) wordt
   juist gedempt in plaats van groen gevuld, want "niets te doen" hoort geen
   aandacht te trekken. */
body.page_dashboard .dl-dbx-tchip.is-danger    { border-color: color-mix(in srgb, var(--dlt-danger) 34%, transparent); }
body.page_dashboard .dl-dbx-tchip.is-warn      { border-color: color-mix(in srgb, var(--dlt-warning) 34%, transparent); }
body.page_dashboard .dl-dbx-tchip.is-ok        { background: var(--dlt-bg); }

body.page_dashboard .dl-dbx-tchip-ico   { color: var(--dlt-muted); font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-dbx-tchip.is-warn   .dl-dbx-tchip-ico { color: var(--dlt-warning); }
body.page_dashboard .dl-dbx-tchip.is-danger .dl-dbx-tchip-ico { color: var(--dlt-danger); }
/* Het getal draagt de urgentie. */
body.page_dashboard .dl-dbx-tchip.is-danger .dl-dbx-tchip-val { color: var(--dlt-danger); }
body.page_dashboard .dl-dbx-tchip.is-warn   .dl-dbx-tchip-val { color: var(--dlt-warning); }
/* Niets te doen: gedempt, niet gevierd. */
body.page_dashboard .dl-dbx-tchip.is-ok .dl-dbx-tchip-ico,
body.page_dashboard .dl-dbx-tchip.is-ok .dl-dbx-tchip-val { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-tchip-body  { display: grid; gap: 1px; min-width: 0; }
body.page_dashboard .dl-dbx-tchip-lbl   { font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); white-space: nowrap; }
body.page_dashboard .dl-dbx-tchip-vals  { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
body.page_dashboard .dl-dbx-tchip-val   { font-weight: var(--dlt-fw-bold); }
body.page_dashboard .dl-dbx-tchip-amt,
body.page_dashboard .dl-dbx-tchip-scope { font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); }
/* Het vinkje bij een chip die op nul staat blijft een teken, maar geen groen
   teken: drie groene vinkjes naast elkaar zijn weer decoratie, en "niets te
   doen" hoort de aandacht niet te trekken die het rode getal ernaast nodig
   heeft. */
body.page_dashboard .dl-dbx-tchip-ok    { color: var(--dlt-muted); }

@media (max-width: 768px) {
  /* Op 390 wordt het een scrollstrip: alle chips blijven bereikbaar zonder de
     halve kolom op te eten. De zijgoot is 16px, net als de container. */
  body.page_dashboard .dl-dbx-triage-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Dezelfde maat als de body-padding onder 768 (sp-3), anders steekt de
       strip 4px buiten de kaart en knipt overflow:hidden de chips af. */
    padding-inline: var(--dlt-sp-3);
    margin-inline: calc(var(--dlt-sp-3) * -1);
    -webkit-overflow-scrolling: touch;
  }
  body.page_dashboard .dl-dbx-triage-item { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ── 6. Gedeelde onderdelen in de kaartbody ──────────────────────────────── */
body.page_dashboard .dl-dbx-lede {
  margin: 0 0 var(--dlt-sp-2);
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-muted);
}
/* .dl-dbx-list is twee dingen: een <ul> zonder bolletjes en de wrapper om een
   tabel. In een kaart hoort die wrapper geen eigen rand en geen eigen wit te
   hebben, anders staat er een kader in een kader. min-width:0 blijft nodig. */
body.page_dashboard .dl-dbx-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
body.page_dashboard .dl-admin-table-wrap.dl-dbx-list { background: transparent; border: 0; border-radius: 0; }
body.page_dashboard .dl-dbx-table { width: 100%; }

body.page_dashboard .dl-dbx-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dlt-sp-2) var(--dlt-sp-3);
  min-height: 44px;
  padding: var(--dlt-sp-2) 0;
  border-bottom: 1px solid var(--dl-db-row-line);
}
body.page_dashboard .dl-dbx-item:last-child { border-bottom: 0; }
body.page_dashboard .dl-dbx-item.is-late { border-left: 3px solid var(--dlt-danger); padding-left: var(--dlt-sp-2); }
body.page_dashboard .dl-dbx-item-main  { display: grid; gap: 2px; min-width: 0; flex: 1 1 14rem; }
body.page_dashboard .dl-dbx-item-title { font-weight: var(--dlt-fw-semi); color: var(--dlt-ink); text-decoration: none; }
body.page_dashboard a.dl-dbx-item-title:hover { text-decoration: underline; }
body.page_dashboard .dl-dbx-item-sub,
body.page_dashboard .dl-dbx-item-meta  { font-size: var(--dlt-fs-xs); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-item-meta  { display: flex; align-items: center; gap: var(--dlt-sp-2); flex-wrap: wrap; }
body.page_dashboard .dl-dbx-item-amt   { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-semi); color: var(--dlt-ink-2); }
body.page_dashboard .dl-dbx-item-age   { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.page_dashboard .dl-dbx-item-reason { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-item-act   { margin-left: auto; display: flex; align-items: center; gap: var(--dlt-sp-2); }
body.page_dashboard .dl-dbx-act        { margin: 0; }
body.page_dashboard .dl-dbx-act .dl-btn { min-height: 36px; }
body.page_dashboard .dl-dbx-sep        { color: var(--dlt-muted-2); }
body.page_dashboard .dl-dbx-nil        { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-flag       { color: var(--dlt-c-amber-ink); margin-left: 6px; }
body.page_dashboard .dl-dbx-late       { color: var(--dlt-c-red); font-weight: var(--dlt-fw-semi); }
body.page_dashboard .db-table td.dl-dbx-late,
body.page_dashboard .dl-admin-table td.dl-dbx-late { color: var(--dlt-c-red); font-weight: var(--dlt-fw-semi); }

body.page_dashboard .dl-dbx-line {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  margin: 0;
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-muted);
}
body.page_dashboard .dl-dbx-line.is-ok    { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-line.is-muted { color: var(--dlt-muted); }

/* Actiekolom in een tabel. Zonder can_edit staat hij er niet; hij hoeft dus
   alleen uitgelijnd te worden, niet verborgen. */
body.page_dashboard .dl-dbx-rowactions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
body.page_dashboard .dl-dbx-rowactions .dl-btn { min-height: 36px; }
body.page_dashboard .dl-dbx-rowform { margin: 0; display: inline-flex; }

/* Schermlezertekst. Zelfde recept als .visually-hidden, eigen naam zodat een
   view er niet van afhangt of Bootstrap geladen is.
   LET OP: de selector staat bewust op SPAN. De naam dl-dbx-sr is in twee
   betekenissen in gebruik: registrations zet er zijn verborgen label "Wacht al:"
   in (een <span>), en stock_risk gebruikt hem als wortel van het blok (een
   <div>, sr = stock risk). Zonder die span zou het hele voorraadblok 1 pixel
   hoog worden en leeg lijken. */
body.page_dashboard span.dl-dbx-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) { body.page_dashboard .dl-dbx-hide-sm { display: none; } }
@media (max-width: 600px) { body.page_dashboard .dl-dbx-hide-xs { display: none; } }

/* ── 7. Grafieken (inline SVG uit svg.php) ───────────────────────────────── */
body.page_dashboard .dl-dbx-plot { width: 100%; min-width: 0; }
body.page_dashboard .dl-dbx-chart { display: block; width: 100%; height: auto; overflow: visible; }
body.page_dashboard .dl-dbx-chart [data-dlc-pt] { cursor: pointer; }
body.page_dashboard .dl-dbx-chart [data-dlc-pt]:focus-visible { outline: 2px solid var(--dlt-accent); outline-offset: 2px; }
body.page_dashboard .dl-dbx-seg { transition: opacity .12s; }
body.page_dashboard .dl-dbx-seg:hover { opacity: .85; }
body.page_dashboard .dl-dbx-xlab { font-size: 11px; fill: var(--dlt-muted); }
body.page_dashboard .dl-dbx-spark { width: 120px; height: 32px; }
/* .dl-btn is display:flex, dus als knop in een grid rekt hij over de hele
   baan uit. justify-self houdt hem op zijn eigen breedte. */
body.page_dashboard .dl-dbx-data-toggle { margin-top: var(--dlt-sp-2); justify-self: start; align-self: start; width: auto; }
body.page_dashboard .dl-dbx-data {
  width: 100%;
  margin-top: var(--dlt-sp-2);
  border-collapse: collapse;
  font-size: var(--dlt-fs-sm);
}
body.page_dashboard .dl-dbx-data th,
body.page_dashboard .dl-dbx-data td {
  padding: 6px var(--dlt-sp-2);
  border-bottom: 1px solid var(--dl-db-row-line);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
body.page_dashboard .dl-dbx-data thead th { background: var(--dl-db-th-bg); color: var(--dlt-label-ink); font-size: var(--dlt-fs-2xs); text-transform: uppercase; letter-spacing: .04em; }
body.page_dashboard .dl-dbx-data-caption { caption-side: top; text-align: left; padding: 0 0 6px; font-size: var(--dlt-fs-xs); color: var(--dlt-muted); }

/* ── 8. pipeline ────────────────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-pipe { display: grid; gap: var(--dlt-sp-4); min-width: 0; }
body.page_dashboard .dl-dbx-pipe-funnel { display: grid; gap: var(--dlt-sp-4); align-items: start; }
@media (min-width: 1024px) {
  /* De trechter krijgt een maximumbreedte: de SVG heeft viewBox 640x200 en
     schaalt mee, dus op 1264px zou de tekst in de grafiek anderhalf keer zo
     groot worden als de tekst eromheen. */
  body.page_dashboard .dl-dbx-pipe-funnel { grid-template-columns: minmax(0, 760px) 260px; justify-content: space-between; }
}
body.page_dashboard .dl-dbx-pipe-plot { width: 100%; min-width: 0; }
body.page_dashboard .dl-dbx-pipe-aside { display: grid; gap: var(--dlt-sp-2); align-content: start; }
/* Was een gevuld rood vlak met een volle rode rand. Geannuleerde orders zijn
   een feit om te melden, geen alarm: het getal mag rood zijn, het vlak niet.
   Zelfde lijn als de chips in "Nu aan de beurt" hierboven - kleur zit in het
   cijfer, niet in de achtergrond. */
body.page_dashboard .dl-dbx-pipe-cancel {
  display: grid;
  gap: 2px;
  padding: var(--dlt-sp-3);
  border: 1px solid color-mix(in srgb, var(--dlt-c-red) 30%, transparent);
  border-radius: var(--dlt-r-sm);
  background: var(--dlt-bg);
}
body.page_dashboard .dl-dbx-pipe-cancel-lbl  { font-size: var(--dlt-fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-pipe-cancel-val  { font-size: var(--dlt-fs-lg); font-weight: var(--dlt-fw-black); color: var(--dlt-c-red-ink); font-variant-numeric: tabular-nums; }
body.page_dashboard .dl-dbx-pipe-cancel-amt  { font-size: var(--dlt-fs-sm); color: var(--dlt-c-red-ink); font-variant-numeric: tabular-nums; }
body.page_dashboard .dl-dbx-pipe-cancel-link { font-size: var(--dlt-fs-sm); font-weight: var(--dlt-fw-semi); color: var(--dlt-c-red-ink); }
body.page_dashboard .dl-dbx-pipe-cancel-hint { margin: 0; font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-pipe-note { display: flex; align-items: center; gap: var(--dlt-sp-2); margin: 0; font-size: var(--dlt-fs-sm); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-pipe-note.is-ok   { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-pipe-note.is-hint { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-pipe-stuck { display: grid; gap: var(--dlt-sp-2); min-width: 0; border-top: 1px solid var(--dl-db-card-line); padding-top: var(--dlt-sp-4); }
body.page_dashboard .dl-dbx-pipe-subhead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dlt-sp-2) var(--dlt-sp-3); min-height: 44px; }
body.page_dashboard .dl-dbx-pipe-subtitle { margin: 0; font-size: var(--dlt-fs); font-weight: var(--dlt-fw-bold); color: var(--dlt-ink); }
body.page_dashboard .dl-dbx-pipe-substat { font-size: var(--dlt-fs-sm); color: var(--dlt-muted); font-variant-numeric: tabular-nums; }
body.page_dashboard .dl-dbx-pipe-substat-amt { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-semi); color: var(--dlt-ink-2); }
body.page_dashboard .dl-dbx-pipe-table { min-width: 0; }
body.page_dashboard .dl-dbx-pipe-oid { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-semi); color: var(--dlt-accent); text-decoration: none; }
body.page_dashboard a.dl-dbx-pipe-oid:hover { text-decoration: underline; }
body.page_dashboard .dl-dbx-pipe-since { white-space: nowrap; }
body.page_dashboard .dl-dbx-pipe-since.is-approx { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-pipe-since-days { display: block; font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); }

/* ── 9. paid_unprocessed ─────────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-ordno { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-bold); color: var(--dlt-accent); text-decoration: none; }
body.page_dashboard a.dl-dbx-ordno:hover { text-decoration: underline; }
body.page_dashboard .dl-dbx-ordstatus { margin-left: 6px; }
body.page_dashboard .dl-admin-table td.dl-dbx-wait { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.page_dashboard .dl-dbx-waitword { margin-left: 6px; font-size: var(--dlt-fs-2xs); }
body.page_dashboard .dl-admin-table td.dl-dbx-ship { white-space: nowrap; }
body.page_dashboard .dl-dbx-ship i { margin-right: 6px; color: var(--dlt-muted); }

/* ── 10. receivables ─────────────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-rec { display: grid; gap: var(--dlt-sp-5); }
body.page_dashboard .dl-dbx-rec-sums {
  list-style: none;
  margin: 0 0 var(--dlt-sp-2);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dlt-sp-4);
}
body.page_dashboard .dl-dbx-rec-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page_dashboard .dl-dbx-rec-sum-lbl { font-size: var(--dlt-fs-xs); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-rec-sum-val { font-size: var(--dlt-fs-lg); line-height: 1.2; font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-bold); }
body.page_dashboard .dl-dbx-rec-sum-sub { font-size: var(--dlt-fs-2xs); color: var(--dlt-sub-ink); }
body.page_dashboard .dl-dbx-rec-sum.is-late .dl-dbx-rec-sum-val { color: var(--dlt-c-red); }
/* Zelfde reden als bij de trechter: de gestapelde balk is 640x48, dus over
   de volle 1264px zou hij 95px hoog worden. */
body.page_dashboard .dl-dbx-rec-aging { min-width: 0; max-width: 760px; }
body.page_dashboard .dl-dbx-legend { list-style: none; margin: var(--dlt-sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--dlt-sp-5); }
body.page_dashboard .dl-dbx-legend-link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--dlt-fs-sm); text-decoration: none; color: inherit; min-height: 32px; }
body.page_dashboard a.dl-dbx-legend-link:hover .dl-dbx-legend-lbl { text-decoration: underline; }
body.page_dashboard .dl-dbx-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
body.page_dashboard .dl-dbx-legend-amt { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-semi); }
body.page_dashboard .dl-dbx-legend-cnt { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-legend-item.is-zero { opacity: .55; }
body.page_dashboard .dl-dbx-rec-data { width: 100%; table-layout: fixed; word-break: break-word; }
body.page_dashboard .dl-dbx-rec-cust { min-width: 0; }
body.page_dashboard .dl-dbx-rec-tblwrap { min-width: 0; }
body.page_dashboard .dl-dbx-rec-tbl { width: 100%; }
body.page_dashboard .dl-dbx-rec-sub { display: block; font-size: var(--dlt-fs-2xs); color: var(--dlt-c-red); }
body.page_dashboard .dl-admin-table td.dl-dbx-rec-acts,
body.page_dashboard .db-table td.dl-dbx-rec-acts { white-space: nowrap; }
body.page_dashboard .dl-dbx-rec-acts .dl-dbx-act { display: inline-block; margin: 0; }
body.page_dashboard .dl-dbx-rec-acts > * + * { margin-left: 6px; }
@media (max-width: 600px) {
  body.page_dashboard .dl-dbx-rec-sums { grid-template-columns: 1fr; gap: var(--dlt-sp-3); }
}

/* ── 11. registrations ───────────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-reg-list { list-style: none; margin: 0; padding: 0; }
body.page_dashboard .dl-dbx-reg-item { border-bottom: 1px solid var(--dl-db-row-line); }
body.page_dashboard .dl-dbx-reg-item:last-child { border-bottom: 0; }
body.page_dashboard .dl-dbx-reg { min-width: 0; }
body.page_dashboard .dl-dbx-reg-sum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dlt-sp-2);
  min-height: 44px;
  padding: var(--dlt-sp-2) 0;
  cursor: pointer;
  list-style: none;
}
body.page_dashboard .dl-dbx-reg-sum::-webkit-details-marker { display: none; }
body.page_dashboard .dl-dbx-reg-sum::marker { content: ""; }
body.page_dashboard .dl-dbx-reg-sum:focus-visible { outline: none; box-shadow: var(--dlt-ring); }
body.page_dashboard .dl-dbx-reg-id { display: flex; flex-direction: column; min-width: 0; }
body.page_dashboard .dl-dbx-reg-co { font-weight: var(--dlt-fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page_dashboard .dl-dbx-reg-meta { font-size: var(--dlt-fs-xs); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-reg-wait { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.page_dashboard .dl-dbx-reg-wait.is-late { background: var(--dlt-c-amber-bg); color: var(--dlt-c-amber-ink); }
body.page_dashboard .dl-dbx-reg-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--dlt-accent); font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-dbx-reg-cta i { transition: transform .15s; }
body.page_dashboard .dl-dbx-reg[open] .dl-dbx-reg-cta i { transform: rotate(180deg); }
body.page_dashboard .dl-dbx-reg-body { padding: var(--dlt-sp-3); margin-bottom: var(--dlt-sp-3); background: var(--dlt-surface); border-radius: var(--dlt-r-sm); display: grid; gap: var(--dlt-sp-3); }
body.page_dashboard .dl-dbx-reg-facts { display: grid; gap: var(--dlt-sp-2); margin: 0; }
@media (min-width: 769px) { body.page_dashboard .dl-dbx-reg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.page_dashboard .dl-dbx-reg-fact { min-width: 0; font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-dbx-reg-fact dt { font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); margin: 0; }
body.page_dashboard .dl-dbx-reg-fact dd { margin: 0; color: var(--dlt-ink-2); word-break: break-word; }
body.page_dashboard .dl-dbx-reg-actions { display: flex; flex-wrap: wrap; gap: var(--dlt-sp-2); justify-content: flex-start; }
body.page_dashboard .dl-dbx-reg-actions .dl-btn { min-height: 44px; }
body.page_dashboard .dl-dbx-reg-form { margin: 0; }
body.page_dashboard .dl-dbx-reg-reject { flex: 1 1 100%; display: grid; gap: 6px; }
body.page_dashboard .dl-dbx-reg-lbl { font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-reg-reason { width: 100%; }
body.page_dashboard .dl-dbx-reg-hint { margin: 0; font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); }

/* ── 12. returns (groepen) ───────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-groups { display: grid; gap: var(--dlt-sp-5); min-width: 0; }
body.page_dashboard .dl-dbx-grp { min-width: 0; }
body.page_dashboard .dl-dbx-grp + .dl-dbx-grp { border-top: 1px solid var(--dl-db-card-line); padding-top: var(--dlt-sp-4); }
body.page_dashboard .dl-dbx-grp-title {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  margin: 0 0 var(--dlt-sp-2);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dlt-muted);
}
body.page_dashboard .dl-dbx-grp-ico  { color: var(--dlt-muted-2); }
body.page_dashboard .dl-dbx-grp-name { min-width: 0; }
body.page_dashboard .dl-dbx-grp-meta { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; text-transform: none; letter-spacing: 0; }
body.page_dashboard .dl-dbx-grp-n    { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-bold); color: var(--dlt-ink); }
body.page_dashboard .dl-dbx-grp-amt  { font-variant-numeric: tabular-nums; color: var(--dlt-ink-2); }
body.page_dashboard .dl-dbx-grp-empty,
body.page_dashboard .dl-dbx-grp-note { display: flex; align-items: center; gap: var(--dlt-sp-2); margin: 0; font-size: var(--dlt-fs-sm); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-grp-empty i { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-act-lbl { margin-left: 6px; }
@media (max-width: 480px) {
  body.page_dashboard .dl-dbx-act-lbl { display: none; }
}

/* ── 13. tickets en meldingen ────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-tickets { display: grid; gap: var(--dlt-sp-4); min-width: 0; }
body.page_dashboard .dl-dbx-sub { min-width: 0; }
body.page_dashboard .dl-dbx-sub-notes { border-top: 1px solid var(--dl-db-card-line); padding-top: var(--dlt-sp-3); }
body.page_dashboard .dl-dbx-subhead {
  margin: 0 0 var(--dlt-sp-2);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dlt-muted);
}
body.page_dashboard .dl-dbx-subicon  { color: var(--dlt-muted-2); }
body.page_dashboard .dl-dbx-subcount { font-variant-numeric: tabular-nums; }
body.page_dashboard .dl-dbx-tick-item,
body.page_dashboard .dl-dbx-note-item { padding: var(--dlt-sp-2) 0; min-height: 44px; }
body.page_dashboard .dl-dbx-tick-subject { font-weight: var(--dlt-fw-semi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.page_dashboard .dl-dbx-tick-num    { font-variant-numeric: tabular-nums; color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-tick-name   { color: var(--dlt-ink-2); }
body.page_dashboard .dl-dbx-tick-silent { font-variant-numeric: tabular-nums; white-space: nowrap; }
body.page_dashboard .dl-dbx-note-ico    { width: 1.2rem; text-align: center; color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-note-ico.is-primary   { color: var(--dlt-accent); }
body.page_dashboard .dl-dbx-note-ico.is-success   { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-note-ico.is-info      { color: var(--dlt-info); }
body.page_dashboard .dl-dbx-note-ico.is-warning   { color: var(--dlt-warning); }
body.page_dashboard .dl-dbx-note-ico.is-danger    { color: var(--dlt-danger); }
body.page_dashboard .dl-dbx-note-ico.is-secondary { color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-note-body  { min-width: 0; flex: 1 1 auto; }
body.page_dashboard .dl-dbx-note-title { font-weight: var(--dlt-fw-semi); color: var(--dlt-ink); text-decoration: none; }
body.page_dashboard .dl-dbx-note-msg   { margin: 0; color: var(--dlt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page_dashboard .dl-dbx-note-ago   { color: var(--dlt-muted); white-space: nowrap; }

/* ── 14. stock_risk ──────────────────────────────────────────────────────── */
/* De wortel van het blok. Een DIV, zie de waarschuwing bij span.dl-dbx-sr. */
body.page_dashboard div.dl-dbx-sr { display: grid; gap: var(--dlt-sp-4); min-width: 0; }
body.page_dashboard .dl-dbx-sr-tiles {
  list-style: none;
  display: grid;
  gap: var(--dlt-sp-2);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0;
  padding: 0;
}
body.page_dashboard .dl-dbx-sr-tile-in {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  height: 100%;
  border: 1px solid var(--dlt-line);
  border-left: 3px solid var(--dlt-c-slate);
  border-radius: var(--dlt-r-sm);
  background: var(--dlt-surface);
  text-decoration: none;
  color: inherit;
}
body.page_dashboard a.dl-dbx-sr-tile-in:hover { background: var(--dlt-surface-2); }
body.page_dashboard .dl-dbx-sr-tile.is-red   .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-red); }
body.page_dashboard .dl-dbx-sr-tile.is-amber .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-amber); }
body.page_dashboard .dl-dbx-sr-tile.is-green .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-green); }
body.page_dashboard .dl-dbx-sr-tile.is-blue  .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-blue); }
body.page_dashboard .dl-dbx-sr-tile.is-slate .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-slate); }
body.page_dashboard .dl-dbx-sr-tile-ico { color: var(--dlt-muted); font-size: var(--dlt-fs-xs); }
body.page_dashboard .dl-dbx-sr-tile-val { font-size: var(--dlt-fs-lg); font-weight: var(--dlt-fw-black); font-variant-numeric: tabular-nums; }
body.page_dashboard .dl-dbx-sr-tile-lbl { color: var(--dlt-ink-2); font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-dbx-sr-tile-sub { color: var(--dlt-muted); font-size: var(--dlt-fs-2xs); }

/* Kop en rij delen DEZELFDE vaste banen; elke <li> is een eigen grid, dus met
   auto of 1fr zouden de kolommen niet uitlijnen. */
body.page_dashboard .dl-dbx-sr-head,
body.page_dashboard .dl-dbx-sr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 90px 34px;
  grid-template-areas: "info nums bar act";
  align-items: center;
  column-gap: var(--dlt-sp-2);
}
body.page_dashboard .dl-dbx-sr-info { grid-area: info; min-width: 0; }
body.page_dashboard .dl-dbx-sr-nums { grid-area: nums; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.page_dashboard .dl-dbx-sr-bar  { grid-area: bar; }
body.page_dashboard .dl-dbx-sr-act  { grid-area: act; justify-self: end; }
body.page_dashboard .dl-dbx-sr-rows { list-style: none; margin: 0; padding: 0; }
body.page_dashboard .dl-dbx-sr-rows > li { border-bottom: 1px solid var(--dl-db-row-line); padding: var(--dlt-sp-2) 0; min-height: 44px; }
body.page_dashboard .dl-dbx-sr-rows > li:last-child { border-bottom: 0; }
body.page_dashboard .dl-dbx-sr-name { font-weight: var(--dlt-fw-semi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.page_dashboard .dl-dbx-sr-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--dlt-muted); font-size: var(--dlt-fs-xs); }
body.page_dashboard .dl-dbx-sr-head { color: var(--dlt-muted); font-size: var(--dlt-fs-2xs); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px; }
body.page_dashboard .dl-dbx-sr-stock { font-weight: var(--dlt-fw-bold); }
body.page_dashboard .dl-dbx-sr-min,
body.page_dashboard .dl-dbx-sr-sep,
body.page_dashboard .dl-dbx-sr-sku { color: var(--dlt-muted); }
@media (max-width: 480px) {
  body.page_dashboard .dl-dbx-sr-head { display: none; }
  body.page_dashboard .dl-dbx-sr-row {
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-areas: "info act" "nums nums" "bar bar";
    row-gap: 4px;
  }
  body.page_dashboard .dl-dbx-sr-nums { text-align: left; }
}

/* ── 15. Op 390 ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.page_dashboard .dl-dbx-head { align-items: flex-start; flex-direction: column; }
  body.page_dashboard .dl-dbx-head-id { margin-right: 0; }
  body.page_dashboard .dl-dbx-hello { font-size: var(--dlt-fs-lg); }
  /* De pillenrij scrollt in plaats van over drie regels te vallen. */
  body.page_dashboard .dl-dbx-periods {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.page_dashboard .dl-dbx-periods::-webkit-scrollbar { display: none; }
  body.page_dashboard .dl-dbx-period { flex: 0 0 auto; }
  body.page_dashboard .dl-dbx-card-body { padding: var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-card-head,
  body.page_dashboard .dl-dbx-card-foot { padding-left: var(--dlt-sp-3); padding-right: var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-item-act { margin-left: 0; width: 100%; }

  /* Aanraakvlakken. buttons.css zet .dl-btn hier al op 44px, maar de regels in
     sectie 12/13 hierboven (`body.page_dashboard .dl-dbx-rowactions .dl-btn`,
     0,3,1) winnen op specificiteit EN op volgorde - dl-theme.css is de laatste
     stylesheet. Gemeten op 390 en 768: 41px voor de rijknoppen, 32px voor "Nog
     n meer", de legenda-links en "Cijfers tonen", 21-22px voor het
     ordernummer en "Bekijken". De eis is 44px tot en met 768 (iPad portret);
     zie claude-brain/ui-system.md. */
  body.page_dashboard .dl-dbx-act .dl-btn,
  body.page_dashboard .dl-dbx-rowactions .dl-btn,
  body.page_dashboard .dl-dbx-rec-acts .dl-btn,
  body.page_dashboard .dl-dbx-sr-act .dl-btn,
  body.page_dashboard .dl-dbx-tool.dl-btn,
  body.page_dashboard button.dl-dbx-data-toggle,
  body.page_dashboard .dl-dbx-data-toggle .dl-btn {
    min-height: 44px;
  }
  body.page_dashboard .dl-dbx-sr-act .dl-btn { height: 44px; width: 44px; }
  /* Losse links die als knop dienstdoen: geen vulling erbij, alleen hoogte,
     anders schuift de tekst uit de regel waar hij bij hoort. */
  body.page_dashboard .dl-dbx-more,
  body.page_dashboard .dl-dbx-more-sm,
  body.page_dashboard .dl-dbx-legend-link,
  body.page_dashboard .dl-dbx-pipe-oid,
  body.page_dashboard .dl-dbx-pipe-cancel-link,
  body.page_dashboard .dl-dbx-ordno,
  body.page_dashboard .dl-dbx-sr-name {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* .db-link staat ook midden in een zin (de voetnoot onder openstaand geld);
     daar mag hij niet uit de regel springen. In een tabelcel is hij wel een
     aanraakvlak - de rij is daar 69px, dus er is ruimte. Niet :only-child:
     naast de klantnaam staat soms nog de waarschuwing "mag niet op rekening
     bestellen", en juist die rijen bleven dan op 17px staan. */
  body.page_dashboard .dl-dbx td > a.db-link,
  body.page_dashboard .dl-dbx th > a.db-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── 16. Hoogte: een kaart is een werklijst, geen pagina ─────────────────────
   Gemeten in Chrome op 1920 breed vóór deze sectie:
   pijplijn 1175px, voorraadrisico 999px, openstaand geld 922px, en op 768px
   werd de pijplijnkaart 3081px doordat de tabel daar in de gestapelde
   mobiele weergave staat. Een blok hoort in één blik te lezen; alles daarboven
   is doorklikwerk en staat achter "nog N meer" op de bijbehorende pagina.

   Vier ingrepen, alle vier alleen ruimte - geen rij verdwijnt zonder dat er
   een doorklik voor in de plaats komt:
     a. boven de mobiele breekpunt blijft een tabel een tabel;
     b. celvulling en regelhoogte omlaag op de dashboardtabellen;
     c. de trechter en de lijstregels compacter;
     d. onder 768px staan er nog drie regels plus "alles bekijken".
   ─────────────────────────────────────────────────────────────────────────── */

/* a. De gestapelde weergave hoort bij de TELEFOON en nergens anders.
      admin-common.css stapelt tot 767.98px, dus ook op een tablet in portret.
      Daar kost het meer dan het oplevert: een order werd daar een kaartje van
      ~300px (zeven cellen onder elkaar) en de pijplijnkaart 1650px, terwijl
      dezelfde tabel op 700px breed gewoon leesbaar is en desnoods horizontaal
      schuift - precies wat de notitie boven dat blok in admin-common.css zelf
      zegt ("horizontaal scrollen werkt op een tablet prima").
      Vanaf 640px blijft een dashboardtabel dus een tabel. Alleen de
      dashboardtabellen: de 109 beheerpagina's houden hun eigen gedrag. */
@media (min-width: 640px) {
  body.page_dashboard .dl-admin-table.is-stacked            { display: table; width: 100%; table-layout: auto; }
  body.page_dashboard .dl-admin-table.is-stacked thead      { display: table-header-group; }
  body.page_dashboard .dl-admin-table.is-stacked tbody      { display: table-row-group; padding: 0; }
  body.page_dashboard .dl-admin-table.is-stacked tfoot      { display: table-footer-group; padding: 0; }
  body.page_dashboard .dl-admin-table.is-stacked tr         { display: table-row; margin: 0; border: 0; box-shadow: none; border-radius: 0; }
  body.page_dashboard .dl-admin-table.is-stacked td,
  body.page_dashboard .dl-admin-table.is-stacked td.stack-full,
  body.page_dashboard .dl-admin-table.is-stacked td.stack-actions,
  body.page_dashboard .dl-admin-table.is-stacked td.dl-cell-actions {
    display: table-cell; background: transparent; border-top: 0;
  }
  body.page_dashboard .dl-admin-table.is-stacked td::before { content: none; }
}

/* b. Celvulling. admin-common zet 16px rondom; op een beheerpagina met tien
      rijen is dat rust, in een kaart met acht rijen is het 256px lucht. */
/* 768.02 en niet 768: op precies 768px (iPad portret) matcht een
   min-width:768px-regel EN de max-width:768px-regel uit sectie 15, en
   omdat dit blok later staat wint de compacte maat. Dan is de knop daar
   32px terwijl de eis 44px tot EN MET 768 is (claude-brain/ui-system.md).
   Geldt voor alle vijf de dichtheidsblokken hieronder. */
@media (min-width: 768.02px) {
  body.page_dashboard .dl-dbx-table > thead > tr > th,
  body.page_dashboard .dl-dbx-pipe-table > thead > tr > th { padding: 6px var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-table > tbody > tr > td,
  body.page_dashboard .dl-dbx-pipe-table > tbody > tr > td { padding: var(--dlt-sp-2) var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-rec-tbl > thead > tr > th    { padding: 4px var(--dlt-sp-2); }
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > td,
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > th    { padding: var(--dlt-sp-1) var(--dlt-sp-2); }
  /* De knoppen in een rij zijn 36px hoog; de rij hoeft dan niet 65px te zijn.
     44px blijft het aanraakvlak, dat raken we niet aan - zie 15. */
  body.page_dashboard .dl-dbx-rec-acts .dl-btn,
  body.page_dashboard .dl-dbx-rowactions .dl-btn { min-height: 32px; }
  body.page_dashboard .dl-dbx-rec-acts { display: flex; gap: var(--dlt-sp-2); justify-content: flex-end; flex-wrap: nowrap; }
}

/* c1. De trechter. Het beeld is 640x200 in zijn viewBox, dus elke pixel breedte
       kost 0,31px hoogte: op 760px breed werd hij 238px hoog terwijl de kaart
       1378px breed is en de ruimte ernaast leeg bleef. */
@media (min-width: 1024px) {
  body.page_dashboard .dl-dbx-pipe-funnel { grid-template-columns: minmax(0, 520px) 260px; }
}

/* c2. "In deze status sinds" stond op twee regels (datum, dan het aantal dagen)
       en maakte daarmee in zijn eentje elke rij van de werklijst 21px hoger. */
@media (min-width: 768px) {
  body.page_dashboard .dl-dbx-pipe-since-days { display: inline; }
  body.page_dashboard .dl-dbx-pipe-since-days::before {
    content: "\00B7"; margin: 0 4px; color: var(--dlt-muted-2);
  }
}

/* c3. Voorraadrisico. De tegels stonden in vier lagen onder elkaar en elke
       regel gebruikte twee regels voor naam en artikelnummer. */
body.page_dashboard .dl-dbx-sr-tile-in { padding: var(--dlt-sp-2) var(--dlt-sp-3); }
body.page_dashboard .dl-dbx-sr-tile-val { font-size: var(--dlt-fs-md); }
@media (min-width: 480px) {
  body.page_dashboard .dl-dbx-sr-info {
    display: flex; align-items: baseline; gap: var(--dlt-sp-2); min-width: 0;
  }
  body.page_dashboard .dl-dbx-sr-name {
    display: block; -webkit-line-clamp: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  body.page_dashboard .dl-dbx-sr-meta { flex: 0 0 auto; flex-wrap: nowrap; }
  body.page_dashboard .dl-dbx-sr-rows > li { padding: var(--dlt-sp-1) 0; min-height: 36px; }
}

/* c4. Openstaand geld: de legenda stond op twee regels van 35px. */
@media (min-width: 768px) {
  body.page_dashboard .dl-dbx-rec-sums { gap: var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-legend   { gap: var(--dlt-sp-1) var(--dlt-sp-4); }
}

/* d. Onder de mobiele breekpunt: drie regels en een doorklik. Sectie 1.1 van
      het bouwplan, "elke lijst maximaal drie regels met toon alles" (de bestaande sleutel dashboard.common.view_all, "Alles bekijken"). De rijen
      erna staan wel in de HTML maar niet in beeld; de link eronder gaat naar
      dezelfde pagina als "nog N meer" in de voet, dus er raakt niets zoek. */
body.page_dashboard .dl-dbx-more-sm { display: none; }
body.page_dashboard .dl-dbx-morerow { margin: var(--dlt-sp-2) 0 0; }
@media (max-width: 767.98px) {
  body.page_dashboard .dl-dbx-cap-sm > tr:nth-child(n + 4),
  body.page_dashboard .dl-dbx-cap-sm > li:nth-child(n + 4) { display: none; }
  /* "Nog N meer" telt de rijen die de loader NIET ophaalde. Zodra de drie-
     regelgrens erbij komt klopt dat getal niet meer, dus daar staat op de
     telefoon "alles bekijken" - dezelfde bestemming, geen bewering. */
  body.page_dashboard .dl-dbx-more-lg { display: none; }
  body.page_dashboard .dl-dbx-more-sm {
    display: inline-flex; align-items: center; gap: var(--dlt-sp-2);
    min-height: 44px; margin-top: var(--dlt-sp-2);
    font-size: var(--dlt-fs-sm); font-weight: var(--dlt-fw-semi);
    color: var(--dlt-accent); text-decoration: none;
  }
  body.page_dashboard .dl-dbx-more-sm:hover { text-decoration: underline; }
}

/* e. De triagebalk blijft staan onder de balk die bóven hem blijft staan.
      Met de beheerschil is dat .adm-top (60px); zonder schil is het de
      winkelheader .dl-header-v4, en die is op deze breedte 189px hoog -
      dashboard.php geeft daar 96px door, waardoor de strip voor de helft
      achter de header verdween (header z-index 1035, strip 20).
      De regels hieronder zijn het vangnet; het scriptje onderaan
      inc/dashboard/view/triage.php meet de balk die er echt staat en zet
      --dl-dbx-top daarna exact goed, ook na een resize. */
body.page_dashboard #dlb-triage { --dl-dbx-top: 189px; }
body.page_dashboard .adm-main #dlb-triage { --dl-dbx-top: 60px; }
@media (max-width: 1023.98px) {
  body.page_dashboard #dlb-triage { --dl-dbx-top: 167px; }
  body.page_dashboard .adm-main #dlb-triage { --dl-dbx-top: 60px; }
}

/* ── 16b. Regelhoogte: wat een rij echt hoog maakt ──────────────────────────
   Gemeten na 16a: een rij van de werklijst was nog 58px, en dat kwam niet van
   de tekst (21,6px) maar van drie dingen die op een beheerpagina thuishoren en
   in een kaart te groot zijn: de statuspil (32px), de knop (41px door 12px
   vulling boven en onder) en de ordernummerlink (min-height 36px).
   Onder 768px blijft alles zoals het was - daar is 44px het aanraakvlak en dat
   is geen ruimteverspilling maar een eis. */
@media (min-width: 768.02px) {
  /* De pil is een label, geen knop: hij hoeft geen aanraakvlak te zijn. */
  body.page_dashboard .dl-dbx-table .dl-pill,
  body.page_dashboard .dl-dbx-pipe-table .dl-pill,
  body.page_dashboard .dl-dbx-table .dl-badge,
  body.page_dashboard .dl-dbx-pipe-table .dl-badge {
    padding: 2px var(--dlt-sp-2); font-size: var(--dlt-fs-xs); min-height: 0;
  }
  body.page_dashboard .dl-dbx-pipe-oid { min-height: 0; }
  body.page_dashboard .dl-dbx-table > tbody > tr > td,
  body.page_dashboard .dl-dbx-pipe-table > tbody > tr > td { padding: 6px var(--dlt-sp-3); }
  /* Knoppen in een rij: 34px met de muis. 44px blijft staan onder 768px. */
  body.page_dashboard .dl-dbx-rowactions .dl-btn,
  body.page_dashboard .dl-dbx-rec-acts .dl-btn,
  body.page_dashboard .dl-dbx-sr-act .dl-btn {
    min-height: 34px; padding-top: 2px; padding-bottom: 2px;
  }
  body.page_dashboard .dl-dbx-sr-act .dl-btn { height: 34px; width: 34px; padding: 0; }
  /* "Cijfers tonen" onder een grafiek is een uitklapper, geen hoofdknop. */
  body.page_dashboard .dl-dbx-data-toggle { min-height: 32px; }
  body.page_dashboard .dl-dbx-data-toggle .dl-btn,
  body.page_dashboard button.dl-dbx-data-toggle { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
}

/* De tegels van voorraadrisico stonden in vier lagen onder elkaar (icoon,
   getal, label, bijzin) en waren daarmee 111px hoog voor drie getallen. */
@media (min-width: 480px) {
  body.page_dashboard .dl-dbx-sr-tile-in {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 2px var(--dlt-sp-2); align-content: center;
  }
  body.page_dashboard .dl-dbx-sr-tile-sub { flex: 1 0 100%; }
}

/* De uitklapper onder de trechter zette een hele extra rasterrij open terwijl
   er naast de trechter 260px leeg stond. De cijfertabel zelf blijft over de
   volle breedte staan - vier kolommen in 260px is geen tabel meer. */
@media (min-width: 1024px) {
  body.page_dashboard .dl-dbx-pipe-funnel { align-items: start; }
  body.page_dashboard .dl-dbx-pipe-funnel > .dl-dbx-pipe-plot   { grid-column: 1; grid-row: 1 / span 2; }
  body.page_dashboard .dl-dbx-pipe-funnel > .dl-dbx-pipe-aside  { grid-column: 2; grid-row: 1; }
  body.page_dashboard .dl-dbx-pipe-funnel > .dl-dbx-data-toggle { grid-column: 2; grid-row: 2; justify-self: start; }
  body.page_dashboard .dl-dbx-pipe-funnel > .dl-dbx-data        { grid-column: 1 / -1; grid-row: 3; }
}

/* ── 16c. Twee regels die harder moesten ────────────────────────────────────
   1. De ordernummerlink hield 36px omdat admin-common.css hem via
      `.dl-admin-table td > a:not(.dl-btn):not([class*="badge"])` een
      aanraakvlak geeft. Die selector weegt zwaarder dan een losse klasse, dus
      hier staat hij in dezelfde vorm. Onder 768px blijft 44px staan.
   2. Op ENKA zet enka/overrides.css:180 `padding` met !important op ELKE
      .dl-btn. Dat is daar geschreven voor de knoppen IN DE HEADER (de inline
      <style> van header.php staat later in het document en wint anders), maar
      het raakt ook een knop in een tabelrij: die bleef 41px hoog en maakte de
      rij 54px. Alleen daarvoor staat hier !important terug, zo klein mogelijk
      afgebakend: alleen boven 768px en alleen in een rij van een dashboardkaart.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768.02px) {
  body.page_dashboard .dl-dbx-table td > a:not(.dl-btn):not([class*="badge"]),
  body.page_dashboard .dl-dbx-pipe-table td > a:not(.dl-btn):not([class*="badge"]) { min-height: 0; }

  body.page_dashboard .dl-dbx-rowactions .dl-btn,
  body.page_dashboard .dl-dbx-rec-acts .dl-btn {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > td,
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > th { padding: 3px var(--dlt-sp-2); }
}

/* ── 16d. De laatste tientallen ─────────────────────────────────────────────
   De uitklapknop onder een grafiek en de badges in een lijstregel liepen tegen
   dezelfde ENKA-regel aan als de knoppen hierboven (enka/overrides.css:180,
   padding met !important). Zelfde afbakening: alleen boven 768px, alleen in
   een dashboardkaart. */
@media (min-width: 768.02px) {
  body.page_dashboard .dl-dbx-data-toggle {
    min-height: 30px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body.page_dashboard .dl-dbx-sr-meta .dl-badge {
    padding: 1px var(--dlt-sp-2); font-size: var(--dlt-fs-xs); min-height: 0;
  }
  body.page_dashboard .dl-dbx-sr-act .dl-btn { height: 30px; width: 30px; }
  body.page_dashboard .dl-dbx-sr-rows > li  { min-height: 34px; }
}

/* ── 16e. De laatste veertig pixels per kaart ───────────────────────────────
   Drie kopcijfers boven de ouderdomsbalk stonden in drie lagen (label, bedrag,
   bijzin). Het bedrag en de bijzin horen op één regel: samen zeggen ze
   "EUR 21.481,83 over 25 facturen". Scheelt 21px en leest beter.
   De knop in een rij gaat van 34 naar 30px: dat is de hoogte van de knoppen
   in de rest van het beheer bij een muis, en onder 768px blijft 44px staan. */
@media (min-width: 768.02px) {
  body.page_dashboard .dl-dbx-rec-sum {
    flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--dlt-sp-2);
  }
  body.page_dashboard .dl-dbx-rec-sum-lbl { flex: 1 0 100%; }

  body.page_dashboard .dl-dbx-rowactions .dl-btn,
  body.page_dashboard .dl-dbx-rec-acts .dl-btn { min-height: 30px; }
  body.page_dashboard .dl-dbx-sr-act .dl-btn  { min-height: 30px; height: 30px; width: 30px; }
  body.page_dashboard .dl-dbx-legend-link     { min-height: 28px; }
}

/* Laatste tien pixels van voorraadrisico: de regel heeft geen 34px nodig als
   de inhoud 30px is. Onder 768px staat de aanraakmaat er nog steeds. */
@media (min-width: 768.02px) {
  body.page_dashboard .dl-dbx-sr-rows > li { min-height: 32px; }
}

/* De trechter is een beeld van 640x200: elke pixel breedte kost 0,31px hoogte.
   Op een tablet werd hij 764px breed en daarmee 216px hoog, terwijl hij bij
   520px al alles laat zien wat erin staat. Geldt op elke breedte; op 390 is de
   kaart zelf smaller en verandert er niets. */
body.page_dashboard .dl-dbx-pipe-plot { max-width: 520px; }

/* Het slot uit 16a zet `display: table-cell` op elke cel en woog daarmee
   zwaarder dan .dl-dbx-hide-sm / .dl-dbx-hide-xs (2671-2672): een kolom die op
   een tablet weg hoort te vallen bleef staan en maakte de rij 101px hoog.
   Dezelfde regel, maar nu zwaarder dan het slot. */
@media (max-width: 900px) {
  body.page_dashboard .dl-admin-table.is-stacked td.dl-dbx-hide-sm,
  body.page_dashboard .dl-admin-table.is-stacked th.dl-dbx-hide-sm { display: none; }
}
@media (max-width: 600px) {
  body.page_dashboard .dl-admin-table.is-stacked td.dl-dbx-hide-xs,
  body.page_dashboard .dl-admin-table.is-stacked th.dl-dbx-hide-xs { display: none; }
}

/* ── 16f. Tablet (640-1023px) ───────────────────────────────────────────────
   Twee dingen maakten de pijplijnkaart daar 1033px hoog terwijl er 3 regels
   in stonden:
   1. de trechter en het blokje "geannuleerd" stonden onder elkaar terwijl er
      naast een beeld van 520px nog 200px over is;
   2. het ordernummer en zijn statuspil braken af over twee regels en maakten
      elke rij 101px. Het zijn twee dingen die bij elkaar horen en samen 160px
      breed zijn; de tabel heeft die ruimte. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  body.page_dashboard .dl-dbx-pipe-funnel {
    grid-template-columns: minmax(0, 520px) minmax(0, 240px);
    align-items: start;
    justify-content: space-between;
  }
}
@media (min-width: 640px) {
  body.page_dashboard .dl-dbx-pipe-table td.stack-full { white-space: nowrap; }
  body.page_dashboard .dl-dbx-pipe-since,
  body.page_dashboard .dl-dbx-pipe-since-days { white-space: nowrap; }
}

/* ── 16g. Telefoon (<640px) ─────────────────────────────────────────────────
   Hier is de gestapelde weergave wel de juiste keuze, maar een cel van 40px
   voor "Bedrijf: Smartby B.V" is er een van 32. Bij vijf cellen per order
   scheelt dat 40px per kaartje.
   En de chipstrip scrollt horizontaal in plaats van over twee regels te
   vallen: hij BLIJFT staan, dus elke regel die hij hoog is, is een regel die
   de werklijst eronder kwijt is. Staat zo in sectie 1.1 van het bouwplan. */
@media (max-width: 639.98px) {
  body.page_dashboard .dl-dbx-table.is-stacked td,
  body.page_dashboard .dl-dbx-pipe-table.is-stacked td { padding: 5px var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-table.is-stacked tbody,
  body.page_dashboard .dl-dbx-pipe-table.is-stacked tbody { padding: 0; }
}
@media (max-width: 767.98px) {
  body.page_dashboard .dl-dbx-triage-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.page_dashboard .dl-dbx-triage-list::-webkit-scrollbar { display: none; }
  body.page_dashboard .dl-dbx-triage-item { flex: 0 0 auto; }
}

/* Op 1440 is deze kaart 547px breed (6 van de 12 kolommen) en staan de drie
   tegels in banen van 164px: "Onder minimum" brak daar over twee regels en
   maakte de tegelrij 87px in plaats van 64px. De grens staat op de BREEDTE VAN
   HET SCHERM waarbij die kolom te smal wordt, niet op een tabletmaat: pas
   boven ~1700px is de kaart breed genoeg voor het volle label. */
@media (min-width: 640px) and (max-width: 1699.98px) {
  body.page_dashboard .dl-dbx-sr-tile-lbl { font-size: var(--dlt-fs-xs); }
}

/* ── 16h. Onder 480px ───────────────────────────────────────────────────────
   Twee blokken die op een telefoon in één kolom komen te staan en dan hun
   regels gingen stapelen: de drie tegels van voorraadrisico (3 x 101px) en de
   drie kopcijfers van openstaand geld (3 x 65px). Ze staan dan onder elkaar en
   hebben de volle breedte, dus label en getal kunnen gewoon naast elkaar.
   Geen media query nodig: dit is dezelfde vorm als op een groot scherm, hij
   stond alleen achter een ondergrens van 480px. */
body.page_dashboard .dl-dbx-sr-tile-in {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px var(--dlt-sp-2); align-content: center;
}
body.page_dashboard .dl-dbx-sr-tile-sub { flex: 1 0 100%; }
body.page_dashboard .dl-dbx-rec-sum {
  flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--dlt-sp-2);
}
body.page_dashboard .dl-dbx-rec-sum-lbl { flex: 1 0 100%; }

/* ── 17. Spoor C: de telefoon ───────────────────────────────────────────────
   Gemeten op 390 en 768 (geinjecteerd iframe; het browservenster laat zich niet
   verkleinen). Vijf dingen die daar niet klopten, in dezelfde volgorde als
   hieronder:
     a. de klantentabel van "openstaand geld" stapelde niet mee - 813px breed
        in een doos van 298px, 515px zijwaarts schuiven;
     b. de samenvattingsrij zei hetzelfde als de legenda;
     c. lege ouderdomssegmenten waren klikbare links naar een leeg filter;
     d. een lege kaart was 336px hoog waarvan 176px lege staat;
     e. de kaartkop van "openstaand geld" viel over 187px aan regels.
   b en c zitten in inc/dashboard/view/receivables.php; a, d en e hier.
   ─────────────────────────────────────────────────────────────────────────── */

/* a1. De samenvattingsrij houdt er nog maar een of twee tegels over. Een vast
       raster van drie kolommen liet daar een gat van een derde vallen. */
body.page_dashboard .dl-dbx-rec-sums {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 600px) {
  body.page_dashboard .dl-dbx-rec-sums { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* a2. De legenda draagt nu ook het woord "vervallen": rood bedrag op de vier
       emmers die te laat zijn. Een emmer zonder inhoud is geen link meer (dat
       zit in de view) en hoeft dus ook geen aanraakvlak van 44px te zijn -
       dat waren drie regels van 44px voor "EUR 0,00 / 0 facturen". */
body.page_dashboard .dl-dbx-legend-item.is-late .dl-dbx-legend-amt { color: var(--dlt-c-red); }
/* Weegt zwaarder (0,4,2) dan de aanraakregel uit sectie 15 (0,2,1), dus er
   hoeft geen tweede media-query omheen. */
body.page_dashboard .dl-dbx-legend-item.is-zero > span.dl-dbx-legend-link { min-height: 0; }

/* a3. De klantentabel is nu .dl-admin-table.is-stacked, net als de tabellen van
       pipeline en paid_unprocessed. Drie dingen die die twee niet nodig hebben:

       1. de klantnaam staat in een <th scope="row"> en niet in een <td>, en de
          stapelregels in admin-common.css raken alleen <td>. Zonder dit blijft
          die cel een table-cell in een blok-rij en zet de browser er een
          anonieme tabel omheen;
       2. dezelfde compacte celvulling die sectie 16g aan de andere twee
          dashboardtabellen geeft;
       3. de actiecel heeft geen .dl-row-actions-wrapper, dus de twee knoppen
          worden hier zelf tot gelijke vakken van 44px gemaakt. */
@media (max-width: 767.98px) {
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked > tbody > tr > th {
    display: block;
    width: auto;
    box-sizing: border-box;
    text-align: left;
    /* 4px en niet 8: de klantnaam is een link en die is hier al 44px hoog
       (sectie 15), dus het aanraakvlak komt niet van de celvulling. */
    padding: var(--dlt-sp-1) var(--dlt-sp-3);
    background: var(--dlt-surface);
    border-bottom: 1px solid var(--dl-db-card-line);
  }
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked > tbody > tr > th > * { text-align: left; }

  body.page_dashboard .dl-dbx-rec-tbl.is-stacked td.dl-dbx-rec-acts {
    display: flex;
    gap: var(--dlt-sp-2);
    white-space: normal;
  }
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked td.dl-dbx-rec-acts > * {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked td.dl-dbx-rec-acts .dl-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}
@media (max-width: 639.98px) {
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked td { padding: 5px var(--dlt-sp-3); }
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked tbody { padding: 0; }
  /* Het bedrag mag niet afbreken over twee regels: dat is wat een cel van 30px
     een cel van 52px maakt. */
  body.page_dashboard .dl-dbx-rec-tbl.is-stacked td.num { white-space: nowrap; }
}

/* a4. Wat de klantentabel kwijtraakte toen hij van .db-table naar
       .dl-admin-table ging. Drie stukken stijl hingen aan die oude klassenaam
       en horen mee te verhuizen, anders verandert er op 768 en 1440 van alles
       wat niemand gevraagd heeft:

       1. de cel met de klantnaam is een <th scope="row">, en .dl-admin-table th
          is geschreven voor een KOLOMKOP: kapitalen, spatiering en een grijze
          balk. Een klantnaam in kapitalen op een grijze balk is geen rijkop
          maar een tweede tabelkop halverwege de tabel;
       2. .db-table td.dl-db-amount maakte een bedrag vet en op cijferbreedte;
          voor .dl-admin-table bestond die regel nog niet;
       3. .db-table a.db-link gaf de klantnaam de accentkleur.
       Plus de neutralisatie uit 16c: admin-common geeft elke link in een cel
       een aanraakvlak van 36px, en dat maakt een rij op een muisscherm hoger
       dan hij hoeft te zijn. De twee andere dashboardtabellen stonden daar al;
       deze hoort er nu ook bij. Onder 768px blijft 44px staan. */
body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > th {
  background: transparent;
  color: var(--dl-db-strong-ink);
  font-size: inherit;
  font-weight: var(--dlt-fw-semi);
  text-transform: none;
  letter-spacing: normal;
}
body.page_dashboard .dl-dbx-rec-tbl td.dl-db-amount {
  font-weight: var(--dlt-fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dl-db-strong-ink);
}
body.page_dashboard .dl-dbx-rec-tbl a.db-link {
  color: var(--accent, var(--dlt-accent));
  font-weight: var(--dlt-fw-bold);
  text-decoration: none;
}
body.page_dashboard .dl-dbx-rec-tbl a.db-link:hover { text-decoration: underline; }
@media (min-width: 640px) {
  /* Alleen waar hij ook echt een tabel is: de rijkop krijgt dezelfde
     scheidingslijn als de cellen ernaast, anders trekt hij een donkerder
     streep door de rij. */
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > th,
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > td { border-bottom: 1px solid var(--dl-db-row-line); }
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr:last-child > th,
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr:last-child > td { border-bottom: 0; }
}
@media (min-width: 768.02px) {
  body.page_dashboard .dl-dbx-rec-tbl td > a:not(.dl-btn):not([class*="badge"]) { min-height: 0; }
}
/* Op de tablet (640-768) is hij weer een gewone tabel, maar de dichtheidsregels
   van 16b/16c beginnen pas bij 768.02 - daar zou hij dus de celvulling van een
   beheerpagina krijgen (16px boven en onder) terwijl .db-table er 12 had. De
   knoppen houden hun 44px; alleen de lucht eromheen gaat eruit. */
@media (min-width: 640px) and (max-width: 768px) {
  body.page_dashboard .dl-dbx-rec-tbl > thead > tr > th { padding: var(--dlt-sp-2); }
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > td,
  body.page_dashboard .dl-dbx-rec-tbl > tbody > tr > th { padding: var(--dlt-sp-1) var(--dlt-sp-2); }
}

/* d. De lege staat. Een kaart die zegt dat er niets te doen is, hoort kleiner
      te zijn dan een kaart met acht werkregels - hij was even hoog. Icoon,
      regel en doorklikknop staan nu op EEN rij in plaats van gecentreerd onder
      elkaar, en de telling "0" verdwijnt uit de kop: die zegt precies wat de
      regel eronder ook al zegt. */
body.page_dashboard .dl-dbx-card[data-dlb-state="empty"] .dl-dbx-count { display: none; }
body.page_dashboard .dl-dbx-card[data-dlb-state="empty"] .dl-dbx-card-body { padding: 0; }
body.page_dashboard .dl-dbx-empty {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--dlt-sp-2) var(--dlt-sp-3);
  padding: var(--dlt-sp-3) var(--dl-card-pad);
  text-align: left;
}
body.page_dashboard .dl-dbx-empty .dl-dbx-empty-ico { font-size: 1.15rem; flex: 0 0 auto; }
body.page_dashboard .dl-dbx-empty .dl-dbx-empty-text { flex: 1 1 14ch; min-width: 0; max-width: 60ch; }
body.page_dashboard .dl-dbx-empty > .dl-btn { flex: 0 0 auto; margin-left: auto; }
/* De foutstaat blijft wel gecentreerd: die vraagt om aandacht en om een klik
   op "opnieuw proberen", en staat er hopelijk zelden. */
body.page_dashboard .dl-dbx-error { padding: var(--dlt-sp-5) var(--dlt-sp-4); }

@media (max-width: 768px) {
  body.page_dashboard .dl-dbx-empty { padding: var(--dlt-sp-3); gap: var(--dlt-sp-2); }
  /* Onder 480px past de knop niet meer naast de regel; dan pakt hij de hele
     breedte in plaats van dat het icoon en de tekst eromheen gaan kruipen. */
  body.page_dashboard .dl-dbx-empty > .dl-btn { min-height: 44px; }
}
@media (max-width: 480px) {
  body.page_dashboard .dl-dbx-empty > .dl-btn { flex: 1 0 100%; margin-left: 0; justify-content: center; }
}

/* e. Kop en voet. De kop van "openstaand geld" was op 390 187px hoog: titel,
      scope-chip, telling en de twee knoppen vielen elk over een eigen regel,
      en de knoppenrij zelf brak nog eens doormidden (154px + 188px in 313px).
      Drie ingrepen:
        - de tussenruimte tussen de regels van 8px naar 4px;
        - de knoppenrij blijft EEN regel en schuift desnoods horizontaal, net
          als de periodepillen en de triagestrip hierboven;
        - die rij krimpt NIET meer mee (flex-shrink 0). Dat klinkt tegendraads
          bij een smal scherm, maar het is precies wat hem heel houdt: krimpen
          zou hem in de 81px persen die naast de telling over is en de
          hoofdlink half wegschuiven. Nu past hij of hij valt op een eigen
          regel, en daar is hij 313px breed. Bij een korte telling
          ("0 te behandelen") past hij wel en scheelt dat een hele regel. */
@media (max-width: 768px) {
  body.page_dashboard .dl-dbx-card-head {
    row-gap: var(--dlt-sp-1);
    padding-top: 10px;
    padding-bottom: 10px;
  }
  body.page_dashboard .dl-dbx-card-tools {
    flex: 0 0 auto;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.page_dashboard .dl-dbx-card-tools::-webkit-scrollbar { display: none; }
  body.page_dashboard .dl-dbx-card-tools > * { flex: 0 0 auto; }

  body.page_dashboard .dl-dbx-card-foot { row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  body.page_dashboard .dl-dbx-foot-note { line-height: 1.35; }
}

/* ── 18. Spoor C, tweede ronde: gemeten op 390, 768 en 1440 ─────────────────
   Wat er na sectie 17 nog overbleef, met de gemeten waarde erbij. Alles komt
   uit een statische render van de blokken in een iframe van precies 390, 768
   en 1440 CSS-pixels (scrollbalk uitgezet, anders meet een mediaquery in
   Chrome 15px breder dan de inhoud).
   ─────────────────────────────────────────────────────────────────────────── */

/* 18a. De kolomkop van voorraadrisico liep 32px buiten zijn baan.
        `.dl-dbx-sr-head` deelt de banen van een rij (1fr | 96px | 90px | 34px),
        maar zijn twee cellen kregen geen grid-area en werden dus automatisch
        geplaatst. "Voorraad / Minimum" is 128px breed en stond met
        white-space:nowrap in een baan van 96px: de tekst liep 32px door over de
        voortgangsbalk ernaast (gemeten op 768 EN 1440, dus op elk scherm tussen
        640 en 1700). Bovendien stond de kop links terwijl de getallen eronder
        rechts staan, dus hij wees niet eens naar zijn eigen kolom.
        Drie dingen: de baan is breed genoeg voor het label, de cellen krijgen
        hun area expliciet, en het label mag afbreken in plaats van uitlopen -
        dat laatste is het vangnet voor een langere vertaling. */
@media (min-width: 480.02px) {
  body.page_dashboard .dl-dbx-sr-head,
  body.page_dashboard .dl-dbx-sr-row { grid-template-columns: minmax(0, 1fr) 132px 90px 34px; }
  body.page_dashboard .dl-dbx-sr-head-name { grid-area: info; min-width: 0; }
  body.page_dashboard .dl-dbx-sr-head-num  { grid-area: nums; min-width: 0; text-align: right; }
}

/* 18b. De klantentabel van "Openstaand geld" schoof zijwaarts op alles tussen
        een telefoon en een laptop. Gemeten in de doos waar hij in staat:

          640px  tabel 802 in 588  (+214)
          700px  tabel 802 in 648  (+154)
          768px  tabel 788 in 716  (+72)
          820px  tabel 788 in 756  (+32)
          901px  tabel 871 in 837  (+34)   <- "Laatste betaling" komt terug

        Onder 640px stapelt hij (sectie 17a) en klopt het; vanaf ~1000px is de
        kaart breed genoeg. Daartussen schoven juist de twee KNOPPEN uit beeld,
        terwijl de kolom "Laatste betaling" precies daarvoor al op <= 900px was
        weggehaald. De actiekolom is namelijk de breedste van allemaal: 295px
        voor "Herinnering" (119) en "Betaling boeken" (150).

        Daar zit de ruimte. Tussen 640 en 1000px is een knop hier een vierkant
        icoon: 44px zolang het een aanraakscherm kan zijn (t/m 768), 30px daarna
        - dezelfde maten die sectie 15 en 16e aan deze knoppen geven.

        Het opschrift gaat NIET op display:none. Dan verliest een <button>
        zijn toegankelijke naam en hoort een schermlezer alleen nog "knop". Het
        wordt weggeklipt zoals .visually-hidden dat doet, dus de naam blijft; de
        title op de knop is wat een muisgebruiker er nog van ziet.

        Blijft over: de kolom "Facturen" (87px) op een tablet in portret. Die
        ging er al uit onder 600px; hier gaat hij er tot 768px uit, want anders
        past de rij nog steeds niet (605 in 588 op 640px). Het aantal facturen
        van een klant staat een klik verderop - achter dezelfde euroknop. */
body.page_dashboard .dl-dbx-rec-acts .dl-btn { gap: 6px; }

@media (min-width: 640px) and (max-width: 767.98px) {
  /* Zwaarder dan het slot uit 16a (`.dl-admin-table.is-stacked td`), dezelfde
     opzet als de twee regels bij 16f hierboven. */
  body.page_dashboard .dl-dbx-rec-tbl td.dl-dbx-hide-xs,
  body.page_dashboard .dl-dbx-rec-tbl th.dl-dbx-hide-xs { display: none; }
}

@media (min-width: 640px) and (max-width: 999.98px) {
  body.page_dashboard .dl-dbx-rec-acts .dl-dbx-rec-act-lbl {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.page_dashboard .dl-dbx-rec-acts .dl-btn {
    gap: 0;
    width: 44px;
    /* !important alleen hier: enka/overrides.css:180 zet `padding` met
       !important op elke .dl-btn en drukt het icoon anders uit een vak van
       44px. Zelfde afbakening als 16c. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 768.02px) and (max-width: 999.98px) {
  body.page_dashboard .dl-dbx-rec-acts .dl-btn { width: 30px; }
}

/* 18c. Op 390 stak het opschrift 36px BUITEN zijn eigen knop: "In behandeling
        nemen" wil met zijn icoon 166px, de knop was 99px en .dl-btn staat op
        white-space:nowrap, dus de letters liepen door over de knop ernaast.
        Te zien in de werklijst van "Betaald, nog niets mee gedaan"; dezelfde
        vorm staat in de pijplijn.

        De oorzaak staat in admin-common.css:756-761. In de gestapelde
        weergave krijgen de knoppen in een rij `flex: 1 1 0` EN een vaste
        `height: 44px`. Drie knoppen delen dus 314px in vakken van 99px, en
        omdat de hoogte vastligt kan een te lang opschrift ook niet afbreken -
        het loopt er gewoon uit. Afbreken toestaan hielp dan ook niet: dan
        werd de onderste regel eruit geknipt. Die combinatie is geschreven
        voor TWEE knoppen (dan is een vak 153px en past alles); bij drie
        klapt hij om.

        Wat hier staat is geen vaste maat maar een ondergrens: een vak is 45%
        van de rij, maar nooit smaller dan zijn eigen opschrift. Past het niet
        meer naast elkaar, dan valt de knop op een eigen regel en pakt hij de
        volle breedte. Zelfregelend, dus een langere vertaling of een vierde
        knop gaat niet alsnog stuk, en er staat geen breekpunt in dat op de
        Nederlandse tekst is afgemeten.

        Gemeten op 390: de lange knop 314px, de twee korte 153px, geen letter
        meer buiten zijn knop. Dat kost die kaart 104px hoogte (787 -> 891).
        Rijen met twee knoppen veranderen niet: die kregen ook voor deze regel
        al 153px per stuk (de pijplijn blijft op 1332px staan). */
@media (max-width: 639.98px) {
  body.page_dashboard .dl-admin-table.is-stacked .dl-dbx-rowactions > .dl-btn,
  body.page_dashboard .dl-admin-table.is-stacked .dl-dbx-rowactions > form,
  body.page_dashboard .dl-admin-table.is-stacked .dl-dbx-rowactions > .dropdown {
    flex: 1 1 45%;
    min-width: max-content;
  }
}

/* 18d. `.dl-dbx-act-lbl` (retouren, regel 2858) gaat onder 480px op
        display:none en laat een knop over met alleen een icoon dat
        aria-hidden is. Voor de goedkeurknop is dat opgevangen met een
        aria-label, maar "Afhandelen" en "Beoordelen" zijn <a>'s zonder: die
        heten op een telefoon dus helemaal niets meer. Een schermlezer leest
        "link" en verder niets.
        Wegklippen in plaats van weghalen lost dat op zonder één pixel
        verschil in de weergave: het opschrift blijft in de toegankelijkheids-
        boom staan en dus de naam van de knop. Dezelfde techniek als
        .visually-hidden; .dl-btn staat al op position:relative, dus het
        absolute kadertje blijft binnen zijn knop. */
@media (max-width: 480px) {
  body.page_dashboard .dl-dbx-act-lbl {
    display: inline;
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Onderregel van een voorraadtegel als eigen link: staat BUITEN het tegel-anker,
   want een <a> in een <a> is ongeldig. Zie inc/dashboard/view/stock_risk.php. */
body.page_dashboard .dl-dbx-sr-tile-sublink {
  display: block; text-decoration: none; color: var(--dlt-accent);
  padding: 2px 10px 8px; font-weight: var(--dlt-fw-semi);
}
body.page_dashboard .dl-dbx-sr-tile-sublink:hover { text-decoration: underline; }

/* =========================================================
   CIJFERBLOKKEN - cash_series, margin, tech_health
   ---------------------------------------------------------
   Stap 7 van claude-brain/dashboard-bouwplan.md. De drie
   uitgestelde blokken onder de groepskop "Cijfers".

   Alles loopt via --dlt-*; die tokens wijzen op Enka naar de
   --ek-* waarden (zie de ENKA-laag bovenaan dit bestand), dus
   hier staat geen enkele hex en geen enkele is-enka-regel.
   ========================================================= */

/* ── cash_series ─────────────────────────────────────────── */
body.page_dashboard .dl-dbx-cash-tiles { margin-bottom: var(--dlt-sp-4); }

/* De drie totalen krijgen elk hun eigen kleurrand, zodat de tegel en de lijn
   in de grafiek erboven dezelfde taal spreken. */
body.page_dashboard .dl-dbx-cash-tiles .dl-dbx-sr-tile:nth-child(1) .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-blue); }
body.page_dashboard .dl-dbx-cash-tiles .dl-dbx-sr-tile:nth-child(2) .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-green); }
body.page_dashboard .dl-dbx-cash-tiles .dl-dbx-sr-tile:nth-child(3) .dl-dbx-sr-tile-in { border-left-color: var(--dlt-c-red); }

body.page_dashboard .dl-dbx-cash-delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--dlt-fs-2xs); font-variant-numeric: tabular-nums;
}
body.page_dashboard .dl-dbx-cash-delta.is-up   { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-cash-delta.is-down { color: var(--dlt-danger); }
body.page_dashboard .dl-dbx-cash-delta .dl-dbx-sr-tile-sub { margin-left: 2px; }

body.page_dashboard .dl-dbx-cash-plot { margin-top: var(--dlt-sp-2); }

/* De spookreeks in de legenda: gestippeld, net als in de grafiek, zodat je
   niet hoeft te raden welke lijn de vorige periode is. */
body.page_dashboard .dl-dbx-legend-dot.is-ghost {
  background: repeating-linear-gradient(
    90deg,
    var(--dlt-muted) 0 3px,
    transparent 3px 5px
  );
  border-radius: 0;
}

/* ── margin ──────────────────────────────────────────────── */
body.page_dashboard .dl-dbx-margin { display: grid; gap: var(--dlt-sp-4); }

body.page_dashboard .dl-dbx-margin-big {
  display: flex; align-items: baseline; gap: var(--dlt-sp-2); flex-wrap: wrap;
}
body.page_dashboard .dl-dbx-margin-pct {
  font-size: var(--dlt-fs-2xl); font-weight: var(--dlt-fw-black);
  font-variant-numeric: tabular-nums; line-height: 1;
}
body.page_dashboard .dl-dbx-margin-lbl { color: var(--dlt-ink-2); font-size: var(--dlt-fs-sm); }

body.page_dashboard .dl-dbx-margin-sum {
  margin: 6px 0 0; color: var(--dlt-muted); font-size: var(--dlt-fs-sm);
}
body.page_dashboard .dl-dbx-margin-profit {
  color: var(--dlt-ink); font-weight: var(--dlt-fw-semi);
  font-variant-numeric: tabular-nums; margin-left: 6px;
}

/* Te weinig dekking: geen percentage, wel een reden. */
body.page_dashboard .dl-dbx-margin-none {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  color: var(--dlt-warning); font-size: var(--dlt-fs-sm);
}

body.page_dashboard .dl-dbx-margin-cov-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--dlt-sp-2);
}
body.page_dashboard .dl-dbx-margin-cov-lbl { color: var(--dlt-ink-2); font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-dbx-margin-cov-val {
  font-weight: var(--dlt-fw-semi); font-variant-numeric: tabular-nums;
}
body.page_dashboard .dl-dbx-margin-bar { margin: 6px 0 8px; }

/* De balk kleurt naar BETROUWBAARHEID, niet naar hoogte: dit is een
   dekkingsgraad en geen doelstelling. Zie inc/dashboard/view/margin.php. */
body.page_dashboard .db-bar-fill.is-ok      { background: var(--dlt-c-green); }
body.page_dashboard .db-bar-fill.is-partial { background: var(--dlt-c-amber); }
body.page_dashboard .db-bar-fill.is-low     { background: var(--dlt-c-red); }

body.page_dashboard .dl-dbx-margin-cov-hint {
  margin: 0; color: var(--dlt-muted); font-size: var(--dlt-fs-2xs);
}
body.page_dashboard .dl-dbx-margin-cov-rows { display: block; margin-top: 2px; }

body.page_dashboard .dl-dbx-margin-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0;
  color: var(--dlt-muted); font-size: var(--dlt-fs-2xs);
}

body.page_dashboard .dl-dbx-margin-fix {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dlt-sp-3); flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--dlt-line);
  border-radius: var(--dlt-r-sm);
  background: var(--dlt-surface);
}
body.page_dashboard .dl-dbx-margin-fix-txt { font-size: var(--dlt-fs-sm); color: var(--dlt-ink-2); }

/* ── tech_health ─────────────────────────────────────────── */
body.page_dashboard .dl-dbx-tech-allok {
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--dlt-sp-3);
  color: var(--dlt-success); font-size: var(--dlt-fs-sm);
}

body.page_dashboard .dl-dbx-tech-list { list-style: none; margin: 0; padding: 0; display: grid; }

body.page_dashboard .dl-dbx-tech-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--dlt-sp-2);
  padding: 10px 2px;
  border-top: 1px solid var(--dlt-row-line, var(--dlt-line));
  min-height: 44px;
}
body.page_dashboard .dl-dbx-tech-item:first-child { border-top: 0; }

body.page_dashboard .dl-dbx-tech-ico { font-size: var(--dlt-fs-sm); color: var(--dlt-muted); }
body.page_dashboard .dl-dbx-tech-item.is-ok   .dl-dbx-tech-ico { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-tech-item.is-warn .dl-dbx-tech-ico { color: var(--dlt-warning); }
body.page_dashboard .dl-dbx-tech-item.is-bad  .dl-dbx-tech-ico { color: var(--dlt-danger); }

body.page_dashboard .dl-dbx-tech-body { display: grid; gap: 2px; min-width: 0; }
body.page_dashboard .dl-dbx-tech-lbl  { font-size: var(--dlt-fs-sm); color: var(--dlt-ink); }
body.page_dashboard .dl-dbx-tech-detail {
  color: var(--dlt-muted); font-size: var(--dlt-fs-2xs);
}

body.page_dashboard .dl-dbx-tech-n {
  font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-black);
  font-size: var(--dlt-fs-md);
}
body.page_dashboard .dl-dbx-tech-item.is-ok   .dl-dbx-tech-n { color: var(--dlt-success); }
body.page_dashboard .dl-dbx-tech-item.is-warn .dl-dbx-tech-n { color: var(--dlt-warning); }
body.page_dashboard .dl-dbx-tech-item.is-bad  .dl-dbx-tech-n { color: var(--dlt-danger); }

body.page_dashboard .dl-dbx-tech-gap {
  display: flex; align-items: flex-start; gap: 8px; margin: var(--dlt-sp-3) 0 0;
  color: var(--dlt-muted); font-size: var(--dlt-fs-2xs);
}

/* Op 390 vallen de detailregel en de knop niet weg maar onder elkaar: de
   getallen blijven rechts uitgelijnd zodat je ze kunt scannen. */
@media (max-width: 767px) {
  body.page_dashboard .dl-dbx-margin-fix { align-items: flex-start; }
  body.page_dashboard .dl-dbx-cash-delta { margin-top: 2px; }
}

/* ── Inklapbare groepskop ("Cijfers") ─────────────────────
   De knop draagt de kop zelf, zodat het hele label aanklikbaar is en er geen
   los pijltje van 12 pixels naast staat. Aanraakvlak minimaal 44px hoog.
   Beginstand zet dashboard.js (die hangt van de schermbreedte af). */
body.page_dashboard .dl-dbx-group-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  color: inherit; text-align: left;
}
body.page_dashboard .dl-dbx-group-toggle:focus-visible {
  outline: 2px solid var(--dlt-accent); outline-offset: 3px;
}
body.page_dashboard .dl-dbx-group-caret {
  display: inline-flex; font-size: var(--dlt-fs-2xs); color: var(--dlt-muted);
  transition: transform .18s var(--dlt-ease, ease);
}
body.page_dashboard .dl-dbx-group.is-collapsed .dl-dbx-group-caret { transform: rotate(-90deg); }
body.page_dashboard .dl-dbx-group.is-collapsed .dl-dbx-grid { display: none; }
body.page_dashboard .dl-dbx-group.is-collapsed { margin-bottom: var(--dlt-sp-4); }

@media (prefers-reduced-motion: reduce) {
  body.page_dashboard .dl-dbx-group-caret { transition: none; }
}

/* =========================================================
   CIJFERRIJ BEHEERDASHBOARD (fase 1)
   ---------------------------------------------------------
   Hoort bij inc/dashboard/admin_kpi_view.php. Drie onderdelen:
   de periodekiezer in de hero, de vier kaarten, en de chiprij
   met wat aandacht vraagt.

   Alles via --dlt-* tokens; die wijzen op Enka naar de --ek-*
   waarden (zie de ENKA-laag bovenaan), dus geen hex en geen
   is-enka-regel. De radius volgt --dl-db-r-sm, die op Enka al
   scherp is.
   ========================================================= */

/* -- Periodekiezer --------------------------------------- */
.dl-dbk-periods {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: var(--dlt-sp-4);
}
.dl-dbk-period {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r-sm);
  background: var(--dl-db-panel);
  color: var(--dlt-muted);
  font-size: var(--dlt-fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.dl-dbk-period:hover { color: var(--dlt-ink); border-color: var(--dlt-line-2); }
.dl-dbk-period.is-active {
  background: var(--dlt-accent);
  border-color: var(--dlt-accent);
  color: var(--dlt-accent-ink);
}
.dl-dbk-period:focus-visible {
  outline: 2px solid var(--dlt-accent); outline-offset: 2px;
}

/* -- De vier kaarten ------------------------------------- */
.dl-dbk-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--dlt-sp-3);
  margin-bottom: var(--dlt-sp-6);
}

.dl-dbk-card {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: var(--dlt-sp-4) var(--dlt-sp-4) 0;
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r);
  box-shadow: var(--dl-db-shadow);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  min-height: 132px;
  position: relative;
}
a.dl-dbk-card:hover { border-color: var(--dlt-line-2); }
a.dl-dbk-card:focus-visible {
  outline: 2px solid var(--dlt-accent); outline-offset: 2px;
}

/* Een streep in de toon van de kaart: dezelfde taal als de sparkline eronder,
   zodat je met een blik ziet welke kaart over geld en welke over werk gaat. */
.dl-dbk-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--dlt-c-blue);
}
.dl-dbk-card.is-red::before   { background: var(--dlt-c-red); }
.dl-dbk-card.is-amber::before { background: var(--dlt-c-amber); }
.dl-dbk-card.is-green::before { background: var(--dlt-c-green); }
/* Slate is de TOON VOOR WAT ER NIET IS: uitgeschakeld, leeg, gepauzeerd. Zonder
   deze twee regels viel zo een kaart terug op blauw en leek hij net zo
   belangrijk als de omzet ernaast. */
.dl-dbk-card.is-slate::before { background: var(--dlt-c-slate); }
/* De reeks compleet houden: een toon die hier niet staat valt stil terug op
   blauw, en dan lijkt een kaart net zo belangrijk als de omzet ernaast. */
.dl-dbk-card.is-purple::before { background: var(--dlt-c-purple); }
.dl-dbk-card.is-blue::before   { background: var(--dlt-c-blue); }

.dl-dbk-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dl-dbk-label {
  color: var(--dlt-ink-2); font-size: var(--dlt-fs-sm); font-weight: var(--dlt-fw-medium);
}
.dl-dbk-scope {
  color: var(--dlt-muted); font-size: var(--dlt-fs-2xs);
  border: 1px solid var(--dlt-line); border-radius: var(--dlt-r-pill);
  padding: 1px 8px; white-space: nowrap;
}
.dl-dbk-ico {
  margin-left: auto;
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--dl-db-r-sm);
  background: var(--dlt-accent-soft); color: var(--dlt-accent);
  font-size: var(--dlt-fs-sm);
}
.dl-dbk-card.is-red   .dl-dbk-ico { background: var(--dlt-danger-soft);  color: var(--dlt-danger); }
.dl-dbk-card.is-amber .dl-dbk-ico { background: var(--dlt-warning-soft); color: var(--dlt-warning); }
.dl-dbk-card.is-green .dl-dbk-ico { background: var(--dlt-success-soft); color: var(--dlt-success); }
.dl-dbk-card.is-slate .dl-dbk-ico { background: var(--dlt-surface-2); color: var(--dlt-c-slate); }
.dl-dbk-card.is-purple .dl-dbk-ico { background: var(--dlt-surface-2); color: var(--dlt-c-purple); }

.dl-dbk-val {
  font-size: var(--dlt-fs-xl);
  font-weight: var(--dlt-fw-black);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: 2px;
}

/* Trend: pijl, percentage en waarmee vergeleken wordt. Het pictogram staat
   nooit alleen voor de betekenis - het percentage en het label staan er altijd
   bij, zodat kleur versiering blijft en geen boodschap. */
.dl-dbk-trend {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: var(--dlt-fs-2xs); color: var(--dlt-muted);
  margin-top: 2px;
}
.dl-dbk-trend-pct { font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-semi); }
.dl-dbk-trend.is-good i,
.dl-dbk-trend.is-good .dl-dbk-trend-pct { color: var(--dlt-success); }
.dl-dbk-trend.is-bad  i,
.dl-dbk-trend.is-bad  .dl-dbk-trend-pct { color: var(--dlt-danger); }
.dl-dbk-trend.is-flat i,
.dl-dbk-trend.is-flat .dl-dbk-trend-pct { color: var(--dlt-muted); }

.dl-dbk-sub {
  font-size: var(--dlt-fs-2xs); color: var(--dlt-muted);
  margin-top: 2px;
}
.dl-dbk-sub.is-danger { color: var(--dlt-danger); }
.dl-dbk-sub.is-warn   { color: var(--dlt-warning); }
.dl-dbk-sub.is-ok     { color: var(--dlt-success); }

/* Sparkline en balk lopen tot de rand van de kaart: ze zijn achtergrond, geen
   inhoud, en een marge eromheen maakt er een tweede element van. */
.dl-dbk-spark {
  margin: auto calc(var(--dlt-sp-4) * -1) 0;
  line-height: 0;
  opacity: .9;
}
.dl-dbk-spark .dl-dbx-spark { width: 100%; height: 34px; display: block; }

.dl-dbk-bar {
  margin: auto calc(var(--dlt-sp-4) * -1) 0;
  height: 5px; background: var(--dlt-line);
  display: flex;
}
.dl-dbk-bar-fill { background: var(--dlt-danger); height: 100%; }

/* -- Chiprij --------------------------------------------- */
.dl-dbk-chips {
  display: flex; flex-wrap: wrap; gap: var(--dlt-sp-2);
  margin-bottom: var(--dlt-sp-5);
}
.dl-dbk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px;
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-left: 3px solid var(--dlt-info);
  border-radius: 0 var(--dl-db-r-sm) var(--dl-db-r-sm) 0;
  color: var(--dlt-ink-2);
  font-size: var(--dlt-fs-sm);
  text-decoration: none;
}
a.dl-dbk-chip:hover { border-color: var(--dlt-line-2); color: var(--dlt-ink); }
.dl-dbk-chip:focus-visible { outline: 2px solid var(--dlt-accent); outline-offset: 2px; }

.dl-dbk-chip.is-danger { border-left-color: var(--dlt-danger); }
.dl-dbk-chip.is-warn   { border-left-color: var(--dlt-warning); }
.dl-dbk-chip.is-info   { border-left-color: var(--dlt-info); }
.dl-dbk-chip.is-ok     { border-left-color: var(--dlt-success); }

.dl-dbk-chip.is-danger > i:first-child { color: var(--dlt-danger); }
.dl-dbk-chip.is-warn   > i:first-child { color: var(--dlt-warning); }
.dl-dbk-chip.is-info   > i:first-child { color: var(--dlt-info); }
.dl-dbk-chip.is-ok     > i:first-child { color: var(--dlt-success); }

.dl-dbk-chip-arrow { font-size: var(--dlt-fs-2xs); color: var(--dlt-muted); }

/* Op smalle schermen twee kaarten naast elkaar in plaats van een kolom van
   vier: de cijfers blijven leesbaar en je ziet ze alle vier zonder scrollen. */
@media (max-width: 767px) {
  .dl-dbk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-dbk-card { min-height: 118px; padding: var(--dlt-sp-3) var(--dlt-sp-3) 0; }
  .dl-dbk-val { font-size: var(--dlt-fs-lg); }
  .dl-dbk-ico { display: none; }
  .dl-dbk-spark,
  .dl-dbk-bar { margin-left: calc(var(--dlt-sp-3) * -1); margin-right: calc(var(--dlt-sp-3) * -1); }
  .dl-dbk-periods { gap: 3px; }
  .dl-dbk-period { min-height: 44px; padding: 0 10px; font-size: var(--dlt-fs-2xs); }
}

/* =========================================================
   WERKKAARTEN BEHEERDASHBOARD (fase 2)
   ---------------------------------------------------------
   Hoort bij inc/dashboard/admin_panels_view.php. Vier kaarten
   in een raster van twaalf: de grafiek en de ordertabel nemen
   acht kolommen, de twee lijsten vier.

   Alles via --dlt-* tokens, dus geen hex en geen is-enka-regel.
   ========================================================= */

.dl-dbp-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dlt-sp-4);
  align-items: start;
  margin-bottom: var(--dlt-sp-6);
}

.dl-dbp {
  grid-column: span 4;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--dl-db-panel);
  border: 1px solid var(--dl-db-card-line);
  border-radius: var(--dl-db-r);
  box-shadow: var(--dl-db-shadow);
  overflow: hidden;
}
.dl-dbp-wide { grid-column: span 8; }

/* -- Kop: titel links, doorklik rechts ------------------- */
.dl-dbp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dlt-sp-3);
  padding: var(--dlt-sp-4) var(--dlt-sp-4) var(--dlt-sp-3);
  border-bottom: 1px solid var(--dlt-row-line, var(--dlt-line));
}
.dl-dbp-title {
  margin: 0;
  font-size: var(--dlt-fs-md);
  font-weight: var(--dlt-fw-semi);
  color: var(--dlt-ink);
}
.dl-dbp-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 4px;
  color: var(--dlt-accent);
  font-size: var(--dlt-fs-2xs);
  text-decoration: none;
  white-space: nowrap;
}
.dl-dbp-link:hover { text-decoration: underline; }
.dl-dbp-link i { font-size: var(--dlt-fs-2xs); }
.dl-dbp-link:focus-visible { outline: 2px solid var(--dlt-accent); outline-offset: 2px; }

.dl-dbp-body { padding: var(--dlt-sp-3) var(--dlt-sp-4) var(--dlt-sp-4); }

/* -- Lege staat ------------------------------------------ */
.dl-dbp-empty {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: var(--dlt-sp-5) 0;
  color: var(--dlt-muted); font-size: var(--dlt-fs-sm);
}
.dl-dbp-empty i { font-size: var(--dlt-fs-md); opacity: .7; }

/* -- Grafiek --------------------------------------------- */
.dl-dbp-plot { margin: 0 calc(var(--dlt-sp-2) * -1); }
.dl-dbp-legend {
  display: flex; flex-wrap: wrap; gap: var(--dlt-sp-2) var(--dlt-sp-5);
  margin-top: var(--dlt-sp-3);
  font-size: var(--dlt-fs-2xs); color: var(--dlt-muted);
}
.dl-dbp-leg { display: inline-flex; align-items: center; gap: 6px; }
.dl-dbp-leg b {
  color: var(--dlt-ink); font-variant-numeric: tabular-nums; margin-left: 2px;
}
.dl-dbp-dot { width: 10px; height: 3px; flex: 0 0 auto; }
.dl-dbp-dot.is-accent { background: var(--dlt-accent); }
.dl-dbp-dot.is-ghost {
  background: repeating-linear-gradient(90deg, var(--dlt-muted) 0 3px, transparent 3px 5px);
}

/* -- Lijst (debiteuren, klanten) ------------------------- */
.dl-dbp-list { list-style: none; margin: 0; padding: 0; }
.dl-dbp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--dlt-row-line, var(--dlt-line));
  min-height: 44px;
}
.dl-dbp-row:first-child { border-top: 0; padding-top: 2px; }
.dl-dbp-row.is-wait { background: var(--dlt-warning-soft); margin: 0 calc(var(--dlt-sp-2) * -1); padding-left: var(--dlt-sp-2); padding-right: var(--dlt-sp-2); }

.dl-dbp-avatar {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--dlt-r-pill);
  font-size: var(--dlt-fs-2xs); font-weight: var(--dlt-fw-semi);
  background: var(--dlt-surface-2); color: var(--dlt-ink-2);
}
.dl-dbp-avatar.is-blue   { background: var(--dlt-accent-soft); color: var(--dlt-c-blue); }
.dl-dbp-avatar.is-green  { background: var(--dlt-success-soft); color: var(--dlt-c-green); }
.dl-dbp-avatar.is-amber  { background: var(--dlt-warning-soft); color: var(--dlt-c-amber-ink, var(--dlt-c-amber)); }
.dl-dbp-avatar.is-red    { background: var(--dlt-danger-soft); color: var(--dlt-c-red); }
.dl-dbp-avatar.is-purple { background: var(--dlt-surface-2); color: var(--dlt-c-purple); }
.dl-dbp-avatar.is-slate  { background: var(--dlt-surface-2); color: var(--dlt-c-slate); }

.dl-dbp-main { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.dl-dbp-name {
  font-size: var(--dlt-fs-sm); color: var(--dlt-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-dbp-sub {
  font-size: var(--dlt-fs-2xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-dbp-sub.is-muted  { color: var(--dlt-muted); }
.dl-dbp-sub.is-danger { color: var(--dlt-danger); }

.dl-dbp-amt {
  font-variant-numeric: tabular-nums; font-weight: var(--dlt-fw-semi);
  font-size: var(--dlt-fs-sm); white-space: nowrap; flex: 0 0 auto;
}
.dl-dbp-badge { flex: 0 0 auto; }

/* -- Tabel (laatste bestellingen) ------------------------ */
.dl-dbp-tablewrap { overflow-x: auto; margin: 0 calc(var(--dlt-sp-4) * -1); padding: 0 var(--dlt-sp-4); }
.dl-dbp-table { width: 100%; border-collapse: collapse; font-size: var(--dlt-fs-sm); }
.dl-dbp-table th {
  text-align: left; font-weight: var(--dlt-fw-normal);
  color: var(--dlt-muted); font-size: var(--dlt-fs-2xs);
  padding: 0 10px 8px 0; white-space: nowrap;
}
.dl-dbp-table td {
  padding: 9px 10px 9px 0;
  border-top: 1px solid var(--dlt-row-line, var(--dlt-line));
  vertical-align: middle;
}
.dl-dbp-table th:last-child,
.dl-dbp-table td:last-child { padding-right: 0; }
.dl-dbp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-dbp-muted { color: var(--dlt-muted); font-size: var(--dlt-fs-2xs); white-space: nowrap; }
.dl-dbp-oid {
  color: var(--dlt-accent); text-decoration: none;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dl-dbp-oid:hover { text-decoration: underline; }
.dl-dbp-cell-name {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -- Breekpunten ----------------------------------------- */
@media (max-width: 1199px) {
  .dl-dbp,
  .dl-dbp-wide { grid-column: span 6; }
}
@media (max-width: 767px) {
  .dl-dbp-grid { gap: var(--dlt-sp-3); }
  .dl-dbp,
  .dl-dbp-wide { grid-column: span 12; }
  .dl-dbp-hide-sm { display: none; }
  .dl-dbp-cell-name { max-width: 140px; }
  .dl-dbp-head { padding: var(--dlt-sp-3); }
  .dl-dbp-body { padding: var(--dlt-sp-2) var(--dlt-sp-3) var(--dlt-sp-3); }
  .dl-dbp-tablewrap { margin: 0 calc(var(--dlt-sp-3) * -1); padding: 0 var(--dlt-sp-3); }
}

/* -- Compacte kop voor rol 1 ----------------------------
   De ruime hero is voor rollen zonder cijferrij; daar is hij het enige baken
   op de pagina. Voor een beheerder staat de informatie in de kaarten eronder,
   dus krijgt de kop alleen nog naam, datum en de periodekiezer - op een rij,
   zodat de cijfers meteen in beeld staan. */
body.page_dashboard .db-hero.is-compact {
  padding: var(--dlt-sp-5) var(--dlt-sp-6);
  margin-bottom: var(--dlt-sp-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dlt-sp-3) var(--dlt-sp-5);
}
body.page_dashboard .db-hero.is-compact .db-hero-role { grid-column: 1; margin-bottom: 4px; }
body.page_dashboard .db-hero.is-compact .db-hero-name { grid-column: 1; font-size: var(--dlt-fs-xl); }
body.page_dashboard .db-hero.is-compact .db-hero-date { grid-column: 1; }
body.page_dashboard .db-hero.is-compact .dl-dbk-periods {
  grid-column: 2; grid-row: 1 / span 4;
  margin-top: 0; justify-content: flex-end;
}
/* De uitlogknop is het enige dat van de knoppenrij overblijft; die hoort
   rechtsonder en niet als losse rij van 44 pixels. */
body.page_dashboard .db-hero.is-compact .db-hero-nav {
  grid-column: 2; grid-row: 4; margin-top: 0; justify-content: flex-end;
}
body.page_dashboard .db-hero.is-compact .db-hero-nav:empty { display: none; }

@media (max-width: 767px) {
  body.page_dashboard .db-hero.is-compact {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--dlt-sp-4);
  }
  body.page_dashboard .db-hero.is-compact .dl-dbk-periods,
  body.page_dashboard .db-hero.is-compact .db-hero-nav {
    grid-column: 1; grid-row: auto; justify-content: flex-start;
  }
}

/* =========================================================
   GRAFIEKTOOLTIP
   ---------------------------------------------------------
   Hoort bij de tooltip-listener in assets/js/dashboard.js en
   bij dl_svg_hit() in inc/dashboard/svg.php.

   De tooltip hangt aan de body, niet in de SVG: binnen de
   viewBox zou hij meeschalen (op een brede kaart grotere
   letters dan op een smalle) en overflow:hidden op een kaart
   zou hem afkappen. Vandaar position:absolute met een z-index
   boven de kaarten.
   ========================================================= */

.dl-dbc-tip {
  position: absolute;
  z-index: 1080;
  max-width: 260px;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  /* LICHT, niet donker. Een donkere tooltip lijkt logisch, maar de stippen
     dragen de kleur van hun reeks en op Enka is het accent zwart: die stip
     verdween dan in de achtergrond. Op een lichte kaart is elke datakleur
     zichtbaar, ook de grijze van de spookreeks. */
  background: var(--dlt-bg, #fff);
  color: var(--dlt-ink, #0b1220);
  border: 1px solid var(--dlt-line-2, rgba(11, 18, 32, .16));
  border-radius: var(--dl-db-r-sm, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  font-size: var(--dlt-fs-2xs, .75rem);
  line-height: 1.35;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.dl-dbc-tip[hidden] { display: none; }

.dl-dbc-tip-lbl {
  color: var(--dlt-muted, rgba(11, 18, 32, .62));
  font-size: var(--dlt-fs-2xs, .75rem);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--dlt-line, rgba(11, 18, 32, .10));
  margin-bottom: 2px;
}

.dl-dbc-tip-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}
.dl-dbc-tip-dot {
  width: 8px; height: 8px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(11, 18, 32, .12);
}
.dl-dbc-tip-s {
  color: var(--dlt-muted, rgba(11, 18, 32, .62));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-dbc-tip b { font-weight: var(--dlt-fw-semi, 600); white-space: nowrap; }

/* Het raakvlak zelf is doorzichtig maar moet de muis wel vangen; fill:transparent
   doet dat, fill:none niet. De cursor zegt dat er iets te halen valt. */
.dl-dbc-hit { cursor: crosshair; }

/* De verticale markeerlijn en het dikkere punt: een tooltip zonder aanwijzing in
   de grafiek laat je zoeken waar het getal vandaan komt. */
.dl-dbc-rule { pointer-events: none; transition: opacity .1s linear; }
circle.dl-dbc-on { r: 5; stroke: var(--dlt-bg, #fff); stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .dl-dbc-rule { transition: none; }
}

/* Op een aanraakscherm is er geen zweven: daar verschijnt de tooltip op een tik.
   Een kruisdraadcursor heeft dan geen betekenis. */
@media (hover: none) {
  .dl-dbc-hit { cursor: default; }
}