/* ==========================================================================
   POP-OVER navigatie — POC (klant-detailpagina, Tweak "Menu" → "Hover pop-over").
   Compacte hover-fly-out per hoofditem: alleen de benodigde hoogte, als overlay
   naast de sidebar, aansluitend (geen gat). Alles scoped onder body.dd-popnav.
   ========================================================================== */

/* In pop-modus: geen inline subs in de sidebar (alles via de popover) en geen
   volle-hoogte fly-out van dd-v2-nav.js. */
body.dd-popnav .dd-sidebar .dd-nav-sub { display: none; }
body.dd-popnav .dd-flyout-layer { display: none !important; }

/* Chevron blijft naar rechts wijzen (duidt 'klapt naar rechts uit'). */
body.dd-popnav-card .dd-nav-group[open] > summary .dd-nav-chev,
body.dd-popnav .dd-flyout-group > summary .dd-nav-chev { transform: none !important; }

/* Hoofditem gemarkeerd zolang zijn popover open is. */
body.dd-popnav-card .dd-nav-group.is-pop-open > summary {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
body.dd-popnav-card .dd-nav-group.is-pop-open > summary > i:first-child,
body.dd-popnav-card .dd-nav-group.is-pop-open > summary .dd-nav-chev { color: #fff; }

/* ── Popover-laag + kaart ─────────────────────────────────────────────── */
.dd-popnav-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;       /* laag zelf klik-transparant … */
}
.dd-popnav-card {
  position: fixed;
  min-width: 208px;
  max-width: 290px;
  display: none;              /* alleen de open popover toont */
  flex-direction: column;
  pointer-events: auto;       /* … de popover wel interactief */
  /* zelfde paars-getinte tint als de bestaande fly-out, opaak en eigen vlak */
  background: color-mix(in srgb, var(--brand-primary) 80%, #ffffff 20%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20, 14, 35, .30), 0 2px 8px rgba(20, 14, 35, .18);
  overflow: hidden;
}
.dd-popnav-card.is-open { display: flex; }
.dd-popnav-card.is-measuring { display: flex; visibility: hidden; } /* meten vóór tonen */

/* Onzichtbare 'brug' links zodat de diagonaal van item → popover niet sluit. */
.dd-popnav-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -8px;
  width: 8px;
}

.dd-popnav-head {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  font-family: var(--dd-display, "Poppins", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dd-popnav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px;
}

/* Submenu-lijst in de popover (geleidelijn/indent eraf → schone lijst). */
.dd-popnav-card .dd-nav-sub {
  display: flex !important;   /* override body.dd-popnav-card .dd-nav-sub{display:none} */
  margin: 0; padding: 0;
}
.dd-popnav-card .dd-nav-sub::before,
.dd-popnav-card .dd-nav-sub-grouped > .dd-nav-sub-group > details > ul::before { display: none !important; }
.dd-popnav-card .dd-nav-sub-grouped,
.dd-popnav-card .dd-nav-sub-grouped > .dd-nav-sub-group > details > ul { padding-left: 2px; }

.dd-popnav-card .dd-nav-sub-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}
.dd-popnav-card .dd-nav-sub-item:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.dd-popnav-card .dd-nav-sub-item.is-active { background: rgba(255, 255, 255, .22); color: #fff; font-weight: 600; }
.dd-popnav-card .dd-nav-sub-aux { margin-left: auto; color: rgba(255, 255, 255, .6); font-size: 11.5px; }
.dd-popnav-card .dd-nav-sub-item.is-active .dd-nav-sub-aux { color: #fff; }

/* Gegroepeerde submenu's: groepskop = rustig sectielabel, niet inklapbaar. */
.dd-popnav-card .dd-nav-sub-chev { display: none; }
.dd-popnav-card .dd-nav-sub-parent {
  color: rgba(255, 255, 255, .55) !important;
  font-size: 10px;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 9px 11px 3px;
  pointer-events: none;
}
.dd-popnav-card .dd-nav-sub-ai .dd-nav-sub-aux {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  padding: 1px 6px; border-radius: 999px;
}