/*
 * Centraal kleurensysteem voor hoofdonderdelen.
 * Gebruik altijd de --color-*, --color-*-soft en --color-*-strong tokens;
 * voeg geen losse onderdeelkleuren toe in pagina's of componenten.
 */
:root {
  --color-planning: #6f8794;
  --color-planning-soft: #e7eef1;
  --color-planning-strong: #405d6b;

  --color-budget: #bf816a;
  --color-budget-soft: #f5e5de;
  --color-budget-strong: #8d513d;

  --color-ontwerp: #a87883;
  --color-ontwerp-soft: #f1e3e6;
  --color-ontwerp-strong: #78505a;

  --color-meer-minderwerk: #aa8750;
  --color-meer-minderwerk-soft: #f2e9d9;
  --color-meer-minderwerk-strong: #755a2f;

  --color-afbouw: #758b70;
  --color-afbouw-soft: #e7eee4;
  --color-afbouw-strong: #4d6548;

  --color-oplevering: #c9b89f;
  --color-oplevering-soft: #f0e9df;
  --color-oplevering-strong: #1f1f1f;

  --color-verhuizen: #b47752;
  --color-verhuizen-soft: #f2e3d8;
  --color-verhuizen-strong: #805033;

  --color-documenten: #cf8f86;
  --color-documenten-soft: #f6e6e2;
  --color-documenten-strong: #8f5752;

  --color-taken: #b87572;
  --color-taken-soft: #f3e2e0;
  --color-taken-strong: #854d4a;

  /* Centrale paginabreedte voor het volledige ingelogde platform. */
  --platform-content-width: 1500px;
  --platform-page-gutter: 20px;
  --platform-photo-surface: rgba(255, 252, 248, .83);

  /* Gedeelde headerkleuren: afgeleid van de bestaande Documenten-/huisstijlset. */
  --platform-nav-accent: var(--color-documenten);
  --platform-nav-active: var(--color-taken-soft);
  --platform-nav-hover: var(--color-documenten-soft);
  --platform-nav-accent-strong: var(--color-ontwerp-strong);
  --platform-nav-ink: #34333b;
  --platform-nav-surface: #fffdfb;
  --platform-nav-line: var(--color-documenten-soft);
}

html {
  /* Reserveer op iedere dashboardpagina dezelfde verticale scrollbarruimte.
     Zo blijft de header horizontaal op exact dezelfde plek staan wanneer de
     inhoud van pagina wisselt tussen wel en niet scrollbaar. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body.nbmb-page {
  margin: 0;
}

/* De bovenbalk is viewportbreed en mag nooit door de contentbreedte van een
   afzonderlijke dashboardpagina worden beïnvloed. */
.nbmb-dash-topnav {
  width: 100%;
  box-sizing: border-box;
}

/* Lichtroze acties die extra aandacht vragen. */
.nbmb-attention-action {
  border: 2px solid #e3b5aa !important;
  background: #f3ded8 !important;
  color: var(--nbmb-ink, #1f1f1f) !important;
  box-shadow:
    0 0 0 4px rgba(232, 185, 174, 0.28),
    0 10px 26px rgba(31, 31, 31, 0.08) !important;
  animation: nbmb-attention-float 2.8s ease-in-out infinite;
}

.nbmb-attention-action:hover,
.nbmb-attention-action:focus-visible {
  background: #f6e7e2 !important;
  color: var(--nbmb-ink, #1f1f1f) !important;
  box-shadow:
    0 0 0 5px rgba(232, 185, 174, 0.4),
    0 16px 32px rgba(31, 31, 31, 0.12) !important;
}

.nbmb-attention-action.nbmb-attention-soft {
  background: #f3ded8 !important;
}

.nbmb-attention-action.nbmb-attention-soft:hover,
.nbmb-attention-action.nbmb-attention-soft:focus-visible {
  background: #f6e7e2 !important;
}

@keyframes nbmb-attention-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .nbmb-attention-action {
    animation: none;
  }
}

.nbmb-context-ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #e3aa9e;
  border-radius: 999px;
  background: #f5dfda;
  color: #292523 !important;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  animation: none !important;
  transform: none !important;
}

.nbmb-context-ai-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.nbmb-context-ai-button:hover {
  background: #efcfc7 !important;
  color: #292523 !important;
  transform: none !important;
}
.nbmb-context-ai-button.nbmb-ai-coming-soon,
.nbmb-context-ai-button:disabled {
  opacity: .58;
  cursor: not-allowed;
  filter: saturate(.55);
  box-shadow: none !important;
  transform: none !important;
}
.nbmb-context-ai-button small { font-size: 10px; font-weight: 700; }

/*
 * Alle dashboardonderdelen gebruiken dezelfde rustige, gecentreerde pagina.
 * Deze gedeelde regel vervangt losse breedte-instellingen per onderdeel.
 */
.nbmb-dashboard-app {
  display: grid !important;
  font-family: 'Inter', var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  width: min(calc(100% - (var(--platform-page-gutter) * 2)), var(--platform-content-width)) !important;
  min-width: 0;
  max-width: var(--platform-content-width) !important;
  margin: 0 auto 24px !important;
  border: 1px solid var(--nbmb-line, #ece4de);
  border-radius: 16px;
  overflow: clip;
}

.nbmb-dashboard-app *,
.nbmb-dashboard-app *::before,
.nbmb-dashboard-app *::after {
  box-sizing: border-box;
}

.nbmb-dashboard-main img,
.nbmb-dashboard-main svg,
.nbmb-dashboard-main video,
.nbmb-dashboard-main canvas {
  max-width: 100%;
}

.nbmb-dashboard-main input,
.nbmb-dashboard-main select,
.nbmb-dashboard-main textarea,
.nbmb-dashboard-main button {
  max-width: 100%;
}

.nbmb-dashboard-main > *,
.nbmb-dashboard-main [class*="grid"],
.nbmb-dashboard-main [class*="card"],
.nbmb-dashboard-main [class*="panel"],
.nbmb-dashboard-main [class*="column"] {
  min-width: 0;
}

.nbmb-dashboard-main [class*="table-wrap"],
.nbmb-dashboard-main [class*="table-container"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nbmb-dashboard-main .nbmb-serif,
.nbmb-dashboard-main h1,
.nbmb-dashboard-main h2,
.nbmb-dashboard-main h3 {
  font-family: 'Inter', var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.nbmb-dashboard-main h1,
.nbmb-dashboard-main h2 {
  font-weight: 700 !important;
}

/* De Takenlijst-zijbalk is de vaste maatstaf voor elke dashboardpagina. */
.nbmb-dashboard-app {
  grid-template-columns: 220px minmax(0, 1fr) !important;
}

.nbmb-dashboard-app > .nbmb-dashboard-main {
  grid-column: 2;
  min-width: 0;
  box-sizing: border-box;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar {
  position: sticky;
  z-index: 20;
  top: 0;
  left: auto;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 220px;
  min-width: 220px;
  height: 100vh;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 34px 22px 28px !important;
  border-right: 1px solid #edf0f6;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 190, 176, 0.65) transparent;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav {
  display: grid;
  gap: 4px;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a {
  width: 176px;
  min-height: 42px;
  gap: 11px;
  padding: 11px 14px !important;
  border-radius: 8px;
  font-size: 13.5px !important;
  line-height: 1.35;
  font-weight: 600;
  box-sizing: border-box;
}

/* Subtiele scheiding tussen de algemene hulpmiddelen en de bouwroute. */
.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a.nbmb-nav-section-divider {
  position: relative;
  margin-bottom: 9px;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a.nbmb-nav-section-divider::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -6px;
  width: 32px;
  height: 2px;
  border-radius: 999px;
  background: #cda59d;
  pointer-events: none;
}

/* Echte geneste submenu-groep onder Nieuwbouwroute. */
.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  width: 176px;
  border-radius: 8px;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-heading > a {
  width: 146px;
  font-weight: 700;
}

.nbmb-nav-route-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #815c55;
  cursor: pointer;
}

.nbmb-nav-route-toggle:hover {
  background: #f4dfda;
}

.nbmb-nav-route-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.nbmb-nav-route-toggle.is-expanded svg {
  transform: rotate(180deg);
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav > a.nbmb-nav-primary-after-route {
  font-weight: 650;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu {
  display: grid;
  gap: 2px;
  width: 158px;
  margin: 0 0 2px 18px;
  padding: 2px 0 2px 10px;
  border-left: 1.5px solid #d5b0a7;
  box-sizing: border-box;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu[hidden] {
  display: none;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu a.nbmb-nav-route-child {
  width: 146px;
  min-height: 34px;
  margin: 0;
  padding: 7px 9px !important;
  gap: 8px;
  border-radius: 7px;
  font-size: 12.5px !important;
  line-height: 1.25;
}

/* Terugval voor pagina's waarop de geneste groep nog niet in de DOM staat. */
.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav > a.nbmb-nav-route-child {
  width: 148px !important;
  min-height: 34px;
  margin-left: 28px !important;
  padding: 7px 9px !important;
  gap: 8px;
  border-left: 1.5px solid #d5b0a7;
  border-radius: 0 7px 7px 0;
  font-size: 12.5px !important;
  line-height: 1.25;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav > a.nbmb-nav-route-child .nbmb-nav-dot {
  width: 4px;
  height: 4px;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu a.nbmb-nav-route-child .nbmb-nav-dot {
  width: 4px;
  height: 4px;
  opacity: 0.6;
}

/* Tweede niveau: de vijf ontwerpstappen onder Ontwerp & wensen. */
.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  width: 146px;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-heading > a.nbmb-nav-route-child {
  width: 120px;
}

.nbmb-nav-design-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7d6670;
  cursor: pointer;
}

.nbmb-nav-design-toggle:hover {
  background: #f6e6e2;
}

.nbmb-nav-design-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.nbmb-nav-design-toggle.is-expanded svg {
  transform: rotate(180deg);
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu {
  display: grid;
  gap: 1px;
  width: 132px;
  margin: -1px 0 3px 14px;
  padding: 3px 0 3px 8px;
  border-left: 1px solid #e5c9c2;
  box-sizing: border-box;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu[hidden] {
  display: none;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu a.nbmb-nav-design-child {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  width: 122px;
  min-height: 28px;
  gap: 5px;
  padding: 5px 6px !important;
  border-radius: 6px;
  color: #687189;
  font-size: 10.5px !important;
  font-weight: 600;
  line-height: 1.2;
}

.nbmb-nav-step-number {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #f5dfd9;
  color: #9b5f57;
  font-size: 9px;
  font-weight: 800;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu a.nbmb-nav-design-child.is-active {
  background: #f6e2dd;
  color: #262323;
}

.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a.is-active,
.nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a[aria-current="page"] {
  font-weight: 700;
}

@media (max-width: 900px) {
  :root {
    --platform-page-gutter: 12px;
  }

  .nbmb-dashboard-app {
    grid-template-columns: 1fr !important;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar {
    position: static;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 16px !important;
    border-right: 0;
    border-bottom: 1px solid #edf0f6;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-main {
    grid-column: 1;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav {
    display: flex;
    gap: 4px;
    width: max-content;
    min-width: 100%;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a {
    width: auto;
    min-height: 0;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu {
    display: contents;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu[hidden] {
    display: none;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-heading {
    display: flex;
    width: auto;
    flex: 0 0 auto;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-heading > a {
    width: auto;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu {
    display: contents;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu[hidden] {
    display: none;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-heading {
    display: flex;
    width: auto;
    flex: 0 0 auto;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-heading > a.nbmb-nav-route-child {
    width: auto;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-route-submenu a.nbmb-nav-route-child,
  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav > a.nbmb-nav-route-child {
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 11px 14px !important;
    border-left: 0;
    border-radius: 8px;
    font-size: 13px !important;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav .nbmb-nav-design-submenu a.nbmb-nav-design-child {
    display: inline-flex;
    width: auto;
    min-height: 0;
    padding: 11px 12px !important;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 12px !important;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a.nbmb-nav-section-divider {
    margin: 0 9px 0 0;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-sidebar nav a.nbmb-nav-section-divider::after {
    left: auto;
    right: -7px;
    bottom: 8px;
    width: 2px;
    height: 24px;
  }

  .nbmb-dashboard-main [class*="topbar"],
  .nbmb-dashboard-main [class*="header"] {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .nbmb-dash-topnav {
    min-height: 0;
    padding: 12px 16px !important;
    gap: 10px 16px;
    flex-wrap: wrap;
  }

  .nbmb-dash-topnav .nbmb-logo,
  .nbmb-dash-topnav .nbmb-dash-back {
    min-width: 0;
  }

  .nbmb-dashboard-app {
    width: 100%;
    margin-bottom: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .nbmb-dashboard-app > .nbmb-dashboard-main {
    width: 100%;
    padding: 16px !important;
    overflow-x: hidden;
  }

  .nbmb-dashboard-main [class*="topbar"],
  .nbmb-dashboard-main [class*="header"] {
    gap: 14px;
  }

  .nbmb-dashboard-main [class*="actions"] {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .nbmb-dashboard-main h1 {
    font-size: clamp(26px, 8vw, 34px) !important;
  }

  .nbmb-dashboard-main h2 {
    font-size: clamp(21px, 6vw, 28px) !important;
  }

  .nbmb-dashboard-main h1,
  .nbmb-dashboard-main h2,
  .nbmb-dashboard-main h3,
  .nbmb-dashboard-main p,
  .nbmb-dashboard-main label,
  .nbmb-dashboard-main td,
  .nbmb-dashboard-main th {
    overflow-wrap: anywhere;
  }

  .nbmb-dashboard-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .nbmb-dashboard-main select,
  .nbmb-dashboard-main textarea {
    width: 100%;
    min-width: 0;
  }

  .nbmb-dashboard-main table {
    min-width: 620px;
  }

  .nbmb-dashboard-main [class*="modal"],
  .nbmb-dashboard-main [class*="dialog"] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
}

/* Vaste horizontale navigatie voor de ingelogde omgeving. */
.nbmb-account-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 146px;
  column-gap: clamp(18px, 1.8vw, 34px);
  align-items: center;
  min-height: 72px;
  padding: 9px clamp(16px, 2vw, 34px);
  border-bottom: 1px solid var(--platform-nav-line);
  background: var(--platform-nav-surface);
  box-shadow: 0 5px 22px rgba(56, 43, 38, .035);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  opacity: 1;
  isolation: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}
.nbmb-account-nav::before,
.nbmb-account-nav::after {
  content: none !important;
  display: none !important;
}
/* Het logo is een link; zonder deze regel pakt hij de blauwe linkkleur van de
   browser (de rand bleef wel zwart, want die staat los ingesteld). */
/* Nooit onderstreepte links in de bovenbalk. Niet elke pagina heeft een eigen
   opmaakregel die dat uitzet, waardoor het logo en de menu-items daar anders
   met de standaardstreep van de browser verschijnen. */
.nbmb-account-nav a,
.nbmb-account-nav a:hover {
  text-decoration: none;
}

.nbmb-account-brand {
  justify-self: start;
}
.nbmb-account-nav > nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: clamp(5px, .72vw, 14px);
}
.nbmb-account-nav > nav > * {
  flex: 0 0 auto;
  min-width: 0;
}
.nbmb-account-nav > nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 45px;
  padding: 10px clamp(7px, .55vw, 11px);
  border: 0;
  border-radius: 9px;
  color: var(--platform-nav-ink);
  font-size: clamp(12px, .78vw, 14px);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.nbmb-account-nav > nav a:hover,
.nbmb-account-nav > nav a:focus-visible {
  color: var(--platform-nav-accent-strong);
  background: var(--platform-nav-hover);
  outline: none;
}
.nbmb-account-nav-soon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 6px clamp(7px, .55vw, 11px);
  border-radius: 9px;
  color: var(--platform-nav-ink);
  font-size: clamp(12px, .78vw, 14px);
  font-weight: 500;
  line-height: 1.05;
  white-space: nowrap;
  cursor: default;
}
.nbmb-ai-status,
.nbmb-account-nav-soon small.nbmb-ai-status {
  margin-top: 3px;
  color: var(--platform-nav-accent-strong);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.nbmb-account-nav > nav a.is-active {
  color: var(--platform-nav-accent-strong) !important;
  background: var(--platform-nav-active);
  box-shadow: inset 0 0 0 1px var(--platform-nav-line), 0 7px 18px rgba(168, 120, 131, .10);
}

/* Eenmalige, rustige dashboardrondleiding voor nieuwe accounts. */
.nbmb-tour-overlay{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:rgba(45,36,32,.42);backdrop-filter:blur(5px)}
.nbmb-tour-overlay[hidden]{display:none}
.nbmb-tour-dialog{width:min(720px,100%);max-height:min(88vh,760px);overflow:auto;border:1px solid var(--nbmb-line,#eadbd4);border-radius:22px;background:#fffdfb;box-shadow:0 28px 80px rgba(45,32,27,.25)}
.nbmb-tour-preview{height:220px;background:#f5e5df center/cover no-repeat;border-bottom:1px solid var(--nbmb-line,#eadbd4);position:relative;overflow:hidden}
.nbmb-tour-preview[data-kind="welcome"]{background:linear-gradient(135deg,#f7e2dc,#fff8f5)}
.nbmb-tour-preview[data-kind="planning"]{background-image:linear-gradient(rgba(40,31,28,.18),rgba(40,31,28,.18)),url("images/planning-bouwen-bouwplaats.png")}
.nbmb-tour-preview[data-kind="route"]{background-image:linear-gradient(rgba(40,31,28,.15),rgba(40,31,28,.15)),url("images/nieuwbouwroute-licht.png")}
.nbmb-tour-preview[data-kind="tasks"]::before,.nbmb-tour-preview[data-kind="community"]::before,.nbmb-tour-preview[data-kind="nav"]::before{content:"";position:absolute;inset:28px;border:1px solid #e7cbc3;border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 10px 30px rgba(70,48,41,.08)}
.nbmb-tour-preview[data-kind="tasks"]::after{content:"\2713  Casco\A\25CB  Ruwbouw\A\25CB  Afbouw\A\25CB  Oplevering";white-space:pre;position:absolute;inset:48px 60px;color:#4e403c;font:700 14px/2 Inter,Arial,sans-serif}
.nbmb-tour-preview[data-kind="community"]::after{content:"Vragen en ervaringen uit de community\A\A'Welke vloer past bij vloerverwarming?'\A'Tips voor de oplevering'";white-space:pre;position:absolute;inset:48px 60px;color:#4e403c;font:700 13px/1.7 Inter,Arial,sans-serif}
.nbmb-tour-preview[data-kind="nav"]::after{content:"Overzicht   Planning   Takenlijst   Nieuwbouwroute   Documenten";position:absolute;left:45px;right:45px;top:92px;padding:17px;border-radius:12px;background:#fff;color:#433936;text-align:center;font:700 13px Inter,Arial,sans-serif;box-shadow:0 8px 25px rgba(70,48,41,.09)}
.nbmb-tour-body{padding:26px 30px 28px}
.nbmb-tour-body h2{margin:0 0 9px;font-family:Inter,Arial,sans-serif;font-size:clamp(23px,3vw,31px);letter-spacing:-.025em}
.nbmb-tour-body p{margin:0;color:#665c58;font-size:14px;line-height:1.6}
.nbmb-tour-body .nbmb-tour-sub{margin-top:7px;font-size:12.5px}
.nbmb-tour-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px}
.nbmb-tour-skip{border:0;background:none;color:#776b67;font:650 12px Inter,Arial,sans-serif;cursor:pointer}
.nbmb-tour-next{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 18px;border:1px solid #db9c8d;border-radius:999px;background:#f5d9d2;color:#3e302d;font:800 12.5px Inter,Arial,sans-serif;cursor:pointer}
.nbmb-tour-dots{display:flex;justify-content:center;gap:6px;margin-top:20px}
.nbmb-tour-dot{width:6px;height:6px;border:0;border-radius:50%;background:#dfd0ca}.nbmb-tour-dot.is-active{background:#c97f6f}
@media(max-width:640px){.nbmb-tour-overlay{padding:12px}.nbmb-tour-preview{height:150px}.nbmb-tour-body{padding:21px 20px 23px}.nbmb-tour-preview[data-kind="tasks"]::before,.nbmb-tour-preview[data-kind="community"]::before,.nbmb-tour-preview[data-kind="nav"]::before{inset:18px}.nbmb-tour-preview[data-kind="tasks"]::after,.nbmb-tour-preview[data-kind="community"]::after{inset:31px 34px;font-size:11px}.nbmb-tour-preview[data-kind="nav"]::after{left:25px;right:25px;top:54px;font-size:10px;white-space:nowrap;overflow:hidden}.nbmb-tour-actions{margin-top:18px}}

/* De Rondleiding gebruikt hetzelfde officiële woordmerk, passend geschaald
   boven de donkere tourachtergrond. */
.nbmb-tour-logo{display:block!important;width:88px!important;max-width:24vw!important;padding:0!important;border:0!important;color:inherit!important;text-decoration:none!important}
.nbmb-tour-logo img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:884/366!important;object-fit:contain!important;object-position:left center!important}

/* Eén gedeeld officieel woordmerk voor de volledige website. De aangeleverde
   SVG-verhouding (884×366) blijft altijd intact. */
.nbmb-brand-logo:not(.nbmb-tour-logo),.nbmb-account-brand,.nbmb-logo,.settings-logo,.cm-logo,.contact-brand,a.logo{
  display:inline-flex!important;
  width:clamp(74px,6.3vw,96px)!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  text-decoration:none!important;
}
.nbmb-brand-logo:not(.nbmb-tour-logo) img,.nbmb-account-brand img,.nbmb-logo img,.settings-logo img,.cm-logo img,.contact-brand img,a.logo img{
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  aspect-ratio:884/366!important;
  object-fit:contain!important;
}
.nbmb-brand-logo-dark{display:block!important}
.nbmb-brand-logo-light{display:none!important}

/* De component kent alleen een donkere en een lichte contextvariant. Zo blijft
   de vorm overal identiek en wisselt uitsluitend het contrast op fotografie. */
.nbmb-tour-welcome-photo,.nbmb-tour-finish-photo,.intro,.contact-nav,.nbmb-footer,.nbmb-nav{
  --nbmb-brand-color:#fff;
}
.intro .nbmb-brand-logo-dark,.contact-nav .nbmb-brand-logo-dark,.nbmb-footer .nbmb-brand-logo-dark,.nbmb-nav .nbmb-brand-logo-dark{display:none!important}
.intro .nbmb-brand-logo-light,.contact-nav .nbmb-brand-logo-light,.nbmb-footer .nbmb-brand-logo-light,.nbmb-nav .nbmb-brand-logo-light{display:block!important}
.nbmb-nav.is-scrolled,.nbmb-detail .nbmb-nav{
  --nbmb-brand-color:#2d2825;
}
.nbmb-nav.is-scrolled .nbmb-brand-logo-dark,.nbmb-detail .nbmb-nav .nbmb-brand-logo-dark{display:block!important}
.nbmb-nav.is-scrolled .nbmb-brand-logo-light,.nbmb-detail .nbmb-nav .nbmb-brand-logo-light{display:none!important}
@media(max-width:430px){.nbmb-brand-logo:not(.nbmb-tour-logo),.nbmb-account-brand,.nbmb-logo,.settings-logo,.cm-logo,.contact-brand,a.logo{width:74px!important;max-width:24vw!important}}

/* Mobiele accountnavigatie: alleen de menurij scrolt horizontaal. */
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .nbmb-account-nav{z-index:10050;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:8px 12px;padding:10px 12px 0;overflow:visible}
  .nbmb-account-brand{grid-column:1;grid-row:1}
  .nbmb-account-profile{grid-column:2;grid-row:1;max-width:100%}
  .nbmb-account-nav>nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;width:100%;max-width:100%;padding:0 0 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .nbmb-account-nav>nav a,.nbmb-account-nav-soon{min-height:40px;padding:8px 10px;font-size:13px}
  .nbmb-account-route.is-active,.nbmb-account-nav>nav a.is-active{border-radius:9px}
  .nbmb-account-route-menu{
    position:fixed;
    top:var(--nbmb-route-menu-top,112px);
    right:12px;
    left:12px;
    width:auto;
    max-height:calc(100dvh - var(--nbmb-route-menu-top,112px) - 12px);
    grid-template-columns:1fr;
    z-index:2147483000;
  }
}
@media(max-width:430px){
  .nbmb-account-nav .nbmb-ov-profile span{display:none}
  .nbmb-account-profile{gap:5px}
  .nbmb-account-profile>button{min-height:38px;padding:7px 10px;font-size:12px}
}
/* Geef de actieve Nieuwbouwroute dezelfde visuele nadruk als de rest van de
   bovenbalk en houd ruimte tussen Berichten en het profielmenu. */
.nbmb-account-nav > nav .nbmb-account-route > a.is-active {
  min-height: 46px;
  padding: 10px 8px 10px clamp(7px, .55vw, 11px) !important;
  border-radius: 9px 0 0 9px;
  box-shadow: none;
  font-size: clamp(12px, .78vw, 14px);
}
.nbmb-account-route {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}
.nbmb-account-route.is-active {
  border-radius: 9px;
  background: var(--platform-nav-active);
  box-shadow: inset 0 0 0 1px var(--platform-nav-line), 0 7px 18px rgba(168, 120, 131, .10);
}
.nbmb-account-route > a {
  display: inline-flex;
  align-items: center;
  padding-right: 7px !important;
  min-width: max-content;
}
.nbmb-account-route-toggle {
  appearance: none;
  position: static;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--platform-nav-ink);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 2;
}
.nbmb-account-route.is-active .nbmb-account-route-toggle {
  height: 46px;
  border-radius: 0 9px 9px 0;
  color: var(--platform-nav-accent-strong) !important;
  background: transparent;
}
.nbmb-account-route-toggle:hover,
.nbmb-account-route-toggle:focus-visible {
  background: var(--platform-nav-hover);
  color: var(--platform-nav-accent-strong);
}
.nbmb-account-route.is-active .nbmb-account-route-toggle:hover,
.nbmb-account-route.is-active .nbmb-account-route-toggle:focus-visible {
  background: transparent;
  color: var(--platform-nav-accent-strong) !important;
}
.nbmb-account-nav > nav .nbmb-account-route.is-active > a.is-active,
.nbmb-account-nav > nav .nbmb-account-route.is-active > a.is-active:hover,
.nbmb-account-nav > nav .nbmb-account-route.is-active > a.is-active:focus-visible {
  background: transparent;
}

.nbmb-account-route-toggle svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; transition: transform .18s ease; }
.nbmb-account-route.is-open .nbmb-account-route-toggle svg { transform: rotate(180deg); }
.nbmb-account-route-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: min(500px, calc(100vw - 24px));
  max-height: min(720px, calc(100vh - 92px));
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #ead7d0;
  border-radius: 14px;
  background: #fffdfb;
  box-shadow: 0 18px 45px rgba(56,43,38,.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
  transform: none;
}
.nbmb-account-route-menu[hidden] { display: none !important; }
.nbmb-account-route-menu.is-mobile-portal {
  position: fixed;
  top: var(--nbmb-route-menu-top, 112px);
  right: 12px;
  left: 12px;
  z-index: 2147483000;
  width: auto;
  max-height: calc(100dvh - var(--nbmb-route-menu-top, 112px) - 12px);
  grid-template-columns: 1fr;
}
.nbmb-account-route-menu-column {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
}
.nbmb-account-route-menu a {
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 9px 11px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  color: #34333b;
  white-space: normal !important;
}
.nbmb-account-route-menu a:hover,
.nbmb-account-route-menu a:focus-visible,
.nbmb-account-route-menu a.is-current {
  color: #4c3934;
  background: #f7eae6;
}
.nbmb-account-route-menu a.is-current { font-weight: 750 !important; }
.nbmb-account-route-menu a,
.nbmb-account-route-menu a:hover,
.nbmb-account-route-menu a:focus,
.nbmb-account-route-menu a:focus-visible,
.nbmb-account-route-menu a:active,
.nbmb-account-route-menu a.is-current {
  text-decoration: none !important;
}
.nbmb-account-route-menu a[data-nbmb-section] {
  color: #34333b !important;
  border-color: transparent !important;
  background: transparent !important;
}
.nbmb-account-route-menu a[data-nbmb-section]:hover,
.nbmb-account-route-menu a[data-nbmb-section]:focus-visible,
.nbmb-account-route-menu a[data-nbmb-section].is-current {
  color: #4c3934 !important;
  border-color: transparent !important;
  background: #f7eae6 !important;
}

.nbmb-account-more {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nbmb-account-more[hidden] {
  display: none !important;
}

.nbmb-account-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--platform-nav-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
  cursor: pointer;
}

.nbmb-account-more-toggle:hover,
.nbmb-account-more-toggle:focus-visible,
.nbmb-account-more.is-open .nbmb-account-more-toggle {
  color: var(--platform-nav-accent-strong);
  background: var(--platform-nav-hover);
  outline: none;
}

.nbmb-account-more.contains-active .nbmb-account-more-toggle {
  color: var(--platform-nav-accent-strong);
  background: var(--platform-nav-active);
}

.nbmb-account-more-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform .18s ease;
}

.nbmb-account-more.is-open .nbmb-account-more-toggle svg {
  transform: rotate(180deg);
}

.nbmb-account-more-menu {
  position: absolute;
  z-index: 1120;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  min-width: 230px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 92px);
  padding: 7px;
  overflow-y: auto;
  border: 1px solid #ead7d0;
  border-radius: 14px;
  background: #fffdfb;
  box-shadow: 0 18px 45px rgba(56,43,38,.16);
}

.nbmb-account-more-menu[hidden] {
  display: none !important;
}

.nbmb-account-more-menu > a,
.nbmb-account-more-menu > .nbmb-account-nav-soon {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  padding: 10px 11px;
  font-size: 13px;
}

.nbmb-account-more-menu > .nbmb-account-nav-soon {
  display: flex;
}

.nbmb-account-more-menu > .nbmb-account-nav-soon:focus {
  background: #f8efec;
  outline: 2px solid #b77b6e;
  outline-offset: -2px;
}

@media (max-width: 600px) {
  .nbmb-account-route-menu {
    position: fixed;
    top: 116px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    grid-template-columns: minmax(0, 1fr);
  }
}
.nbmb-account-profile { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; font-size:13px; font-weight:700; }
/* Profielwidget in de bovenbalk: foto + naam + pijltje met opties. */
.nbmb-account-nav .nbmb-ov-profile {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 6px 4px 4px;
  background: var(--platform-nav-hover);
  cursor: pointer;
}
.nbmb-account-nav .nbmb-ov-profile img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}
/* De naam staat al in het uitklapmenu; in de balk volstaat foto + pijltje. */
.nbmb-account-nav .nbmb-ov-profile > span {
  display: none;
}
.nbmb-account-nav .nbmb-ov-profile > svg {
  display: block;
  width: 15px;
  height: 15px;
  min-width: 15px;
  flex: 0 0 15px;
  color: var(--platform-nav-ink);
  opacity: 1;
  stroke-width: 2;
}
.nbmb-account-profile button {
  padding: 9px 12px;
  border: 1px solid #e4d6cf;
  border-radius: 9px;
  background: #fff;
  color: var(--platform-nav-ink);
  cursor: pointer;
  line-height: 1.15;
  white-space: nowrap;
}

/* De uitlogactie is onderdeel van dezelfde gedeelde desktopheader. Deze
   expliciete componentregel voorkomt dat oude paginaspecifieke route-CSS de
   knop nog verbergt of als transparante tekstlink weergeeft. */
.nbmb-account-nav .nbmb-account-profile > button[aria-label="Uitloggen"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-color: var(--platform-nav-line) !important;
  background: var(--platform-nav-surface) !important;
  color: var(--platform-nav-ink) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.nbmb-account-nav .nbmb-account-profile > button[aria-label="Uitloggen"]:hover,
.nbmb-account-nav .nbmb-account-profile > button[aria-label="Uitloggen"]:focus-visible {
  border-color: var(--platform-nav-accent) !important;
  background: var(--platform-nav-hover) !important;
  color: var(--platform-nav-accent-strong) !important;
  outline: none;
}
/* Eén gedeelde paginabreedte voor de hele ingelogde omgeving: gelijk aan de
   foto op de Nieuwbouwroute. Losse pagina's hebben elk hun eigen max-width
   (1380px, 1500px, ...); die worden hier bewust overschreven zodat Documenten,
   Planning, Community en alle subpagina's exact even breed zijn. */
.nbmb-has-account-nav .nbmb-dashboard-app {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: calc(100% - 48px) !important;
  max-width: var(--nbmb-page-width, 1680px) !important;
  margin-inline: auto !important;
}
.nbmb-has-account-nav .nbmb-dashboard-app > .nbmb-dashboard-main {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none;
}
/* MacBook-formaten: compacte maten en alle hoofdonderdelen rechtstreeks in
   beeld. Op smallere schermen loopt de navigatie rustig door op een extra rij. */
@media (max-width: 1560px) {
  .nbmb-account-nav {
    grid-template-columns: 104px minmax(0, 1fr) max-content;
    column-gap: 12px;
    padding-inline: clamp(14px, 1.55vw, 22px);
  }
  .nbmb-account-nav > nav { gap: 4px; }
  .nbmb-account-nav > nav a,
  .nbmb-account-nav-soon {
    padding-inline: 8px;
    font-size: 13px;
  }
  .nbmb-account-route > a { padding-right: 5px !important; }
  .nbmb-account-route-toggle { width: 31px; }
  .nbmb-account-more-toggle { padding-inline: 9px; font-size: 12.5px; }
  .nbmb-account-profile { justify-self: end; gap: 6px; }
  .nbmb-account-profile button { padding-inline: 10px; }
}

@media (max-width: 1180px) {
  .nbmb-account-nav {
    grid-template-columns: 96px minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 5px;
    padding-inline: 12px;
  }
  .nbmb-account-brand { grid-column: 1; grid-row: 1; }
  .nbmb-account-profile { grid-column: 3; grid-row: 1; }
  .nbmb-account-nav > nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 1px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }
  .nbmb-account-nav > nav::-webkit-scrollbar { display: none; }
  .nbmb-account-nav > nav a,
  .nbmb-account-nav-soon,
  .nbmb-account-more-toggle { padding-inline: 6px; font-size: 11.5px; }
  .nbmb-account-profile button { padding-inline: 9px; font-size: 12px; }
}

/* Op smallere tablets krijgt de navigatie een eigen rij. Zo blijven logo,
   profiel en Uitloggen op de bovenste rij stabiel uitgelijnd. */
@media (max-width: 720px) {
  .nbmb-account-nav {
    grid-template-columns: 100px minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    row-gap: 5px;
    min-height: 112px;
    padding-inline: 10px;
  }
  .nbmb-account-brand { grid-column: 1; grid-row: 1; }
  .nbmb-account-profile { grid-column: 3; grid-row: 1; }
  .nbmb-account-nav > nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
  }
  .nbmb-account-nav > nav a { padding:9px 7px; font-size:12px; }
}

@media (max-width: 480px) {
  .nbmb-account-nav {
    grid-template-columns: 74px minmax(0, 1fr) max-content;
    padding-inline: 10px;
  }
  .nbmb-account-profile { position: static; width: max-content; max-width: calc(100vw - 104px); gap: 8px; flex-wrap: nowrap; }
  .nbmb-account-profile > button { min-height: 40px; padding: 8px 10px !important; font-size: 12px; }
  .nbmb-account-nav .nbmb-ov-profile { flex: 0 0 auto; gap: 1px; padding-right: 4px; }
  .nbmb-account-nav > nav a,
  .nbmb-account-more-toggle { padding-inline: 6px; font-size: 11.5px; }
  .nbmb-account-route > a { padding-right: 3px !important; }
  .nbmb-account-route-toggle { width: 28px; }
}

/* Meldingencentrum voor naderende deadlines. */
.nbmb-global-notification-button,
.nbmb-ov-icon-btn[aria-label^="Meldingen"] {
  position: relative;
}

.nbmb-global-notification-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e5d8d2;
  border-radius: 50%;
  background: #fff;
  color: #6f554d;
  cursor: pointer;
}

.nbmb-global-notification-button svg {
  width: 18px;
  height: 18px;
}

.nbmb-global-notification-button:hover,
.nbmb-ov-icon-btn[aria-label^="Meldingen"]:hover {
  border-color: #d89b8d;
  background: #fbefeb;
}

.nbmb-global-notification-button.has-notifications,
.nbmb-ov-icon-btn[aria-label^="Meldingen"].has-notifications {
  color: #9e5f52;
}

.nbmb-global-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e8cbb4;
  color: #76533f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.nbmb-ov-icon-btn[aria-label^="Meldingen"] .nbmb-ov-badge[hidden],
.nbmb-global-notification-badge[hidden],
.nbmb-notification-panel[hidden] {
  display: none !important;
}

.nbmb-notification-panel {
  position: fixed;
  z-index: 10000;
  top: 78px;
  right: clamp(16px, 3vw, 42px);
  width: min(390px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #e5d5ce;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(61, 43, 36, 0.18);
  color: #292523;
}

.nbmb-notification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 15px;
  border-bottom: 1px solid #eee3de;
  background: #fcf8f6;
}

.nbmb-notification-head > div {
  display: grid;
  gap: 3px;
}

.nbmb-notification-head strong {
  font-size: 16px;
}

.nbmb-notification-head span {
  color: #77706c;
  font-size: 11px;
}

.nbmb-notification-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #776c67;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.nbmb-notification-close:hover {
  background: #f2e8e4;
}

.nbmb-notification-list {
  padding: 10px;
}

.nbmb-notification-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border-radius: 13px;
  color: #292523 !important;
  text-decoration: none;
}

.nbmb-notification-item:hover {
  background: #fbefeb;
}

.nbmb-notification-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f5dcd5;
  color: #a35f52;
}

.nbmb-notification-icon svg {
  width: 19px;
  height: 19px;
}

.nbmb-notification-item > span:last-child {
  display: grid;
  gap: 5px;
}

.nbmb-notification-item strong {
  font-size: 13px;
  line-height: 1.35;
}

.nbmb-notification-item small {
  color: #6e6864;
  font-size: 11.5px;
  line-height: 1.5;
}

.nbmb-notification-item em {
  color: #a35f52;
  font-size: 11px;
  font-weight: 700;
}

.nbmb-notification-empty {
  display: grid;
  gap: 5px;
  padding: 24px 18px;
  text-align: center;
}

.nbmb-notification-empty strong {
  font-size: 14px;
}

.nbmb-notification-empty span {
  color: #746e6a;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .nbmb-notification-panel {
    top: 68px;
    right: 12px;
    width: calc(100vw - 24px);
  }
}

/* Klikbaar profielmenu in de bovenbalk. */
.nbmb-ov-profile.is-menu-ready {
  position: relative;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
}

.nbmb-ov-profile.is-menu-ready:hover,
.nbmb-ov-profile.is-menu-ready:focus-visible,
.nbmb-ov-profile.is-menu-ready.is-open {
  background: #f7eeea;
  box-shadow: 0 0 0 5px #f7eeea;
}

.nbmb-ov-profile.is-menu-ready > svg:last-of-type {
  transform-origin: center;
  transition: transform 180ms ease, color 160ms ease;
}

.nbmb-ov-profile.is-menu-ready.is-open > svg:last-of-type {
  transform: rotate(180deg);
}

.nbmb-profile-menu {
  position: absolute;
  z-index: 10020;
  top: calc(100% + 15px);
  right: 0;
  width: 210px;
  overflow: hidden;
  padding: 7px;
  border: 1px solid #e4d7d1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(58, 40, 34, 0.17);
}

.nbmb-profile-menu[hidden] {
  display: none !important;
}

.nbmb-profile-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 4px 7px;
  padding: 10px 9px 12px;
  border-bottom: 1px solid #eee4df;
  color: #332d2a;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease;
}

.nbmb-profile-summary:hover,
.nbmb-profile-summary:focus-visible {
  background: #f8eeea;
  outline: none;
}

.nbmb-profile-summary strong {
  font-size: 13px;
}

.nbmb-profile-summary span {
  overflow: hidden;
  color: #746b67;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbmb-profile-photo-action {
  display: block;
  margin-bottom: 4px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #76534c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.nbmb-profile-photo-action:hover,
.nbmb-profile-photo-action:focus-within {
  background: #f8eeea;
}

.nbmb-profile-photo-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nbmb-profile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 9px;
  color: #332d2a !important;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.nbmb-profile-menu a.nbmb-profile-summary {
  gap: 7px;
}

.nbmb-profile-menu a:hover,
.nbmb-profile-menu a:focus-visible {
  background: #f8eeea;
  outline: none;
}

.nbmb-profile-menu a.is-logout {
  margin-top: 5px;
  border-top: 1px solid #eee4df;
  border-radius: 0 0 9px 9px;
  color: #98594f !important;
}

/* Elk herkend element krijgt dezelfde drie semantische waarden. */
[data-nbmb-section] {
  --section-color: var(--nbmb-section-color);
  --section-soft: var(--nbmb-section-soft);
  --section-strong: var(--nbmb-section-strong);
}

[data-nbmb-section="planning"] {
  --nbmb-section-color: var(--color-planning);
  --nbmb-section-soft: var(--color-planning-soft);
  --nbmb-section-strong: var(--color-planning-strong);
}
[data-nbmb-section="budget"] {
  --nbmb-section-color: var(--color-budget);
  --nbmb-section-soft: var(--color-budget-soft);
  --nbmb-section-strong: var(--color-budget-strong);
}
[data-nbmb-section="ontwerp"] {
  --nbmb-section-color: var(--color-ontwerp);
  --nbmb-section-soft: var(--color-ontwerp-soft);
  --nbmb-section-strong: var(--color-ontwerp-strong);
}
[data-nbmb-section="meer-minderwerk"] {
  --nbmb-section-color: var(--color-meer-minderwerk);
  --nbmb-section-soft: var(--color-meer-minderwerk-soft);
  --nbmb-section-strong: var(--color-meer-minderwerk-strong);
}
[data-nbmb-section="afbouw"] {
  --nbmb-section-color: var(--color-afbouw);
  --nbmb-section-soft: var(--color-afbouw-soft);
  --nbmb-section-strong: var(--color-afbouw-strong);
}
[data-nbmb-section="oplevering"] {
  --nbmb-section-color: var(--color-oplevering);
  --nbmb-section-soft: var(--color-oplevering-soft);
  --nbmb-section-strong: var(--color-oplevering-strong);
}
[data-nbmb-section="verhuizen"] {
  --nbmb-section-color: var(--color-verhuizen);
  --nbmb-section-soft: var(--color-verhuizen-soft);
  --nbmb-section-strong: var(--color-verhuizen-strong);
}
[data-nbmb-section="documenten"] {
  --nbmb-section-color: var(--color-documenten);
  --nbmb-section-soft: var(--color-documenten-soft);
  --nbmb-section-strong: var(--color-documenten-strong);
}
[data-nbmb-section="taken"] {
  --nbmb-section-color: var(--color-taken);
  --nbmb-section-soft: var(--color-taken-soft);
  --nbmb-section-strong: var(--color-taken-strong);
}

/* Navigatie, links en compacte labels. */
a[data-nbmb-section],
button[data-nbmb-section],
[role="button"][data-nbmb-section] {
  color: var(--section-strong);
}

a[data-nbmb-section]:hover,
button[data-nbmb-section]:hover,
[role="button"][data-nbmb-section]:hover {
  color: var(--section-strong);
  border-color: var(--section-color);
}

.nbmb-sidebar-nav a[data-nbmb-section] svg,
.nbmb-dash-nav a[data-nbmb-section] svg,
nav a[data-nbmb-section] svg {
  color: var(--section-strong);
  stroke: currentColor;
}

.nbmb-sidebar-nav a[data-nbmb-section].active,
.nbmb-sidebar-nav a[data-nbmb-section][aria-current="page"],
.nbmb-dash-nav a[data-nbmb-section].active,
.nbmb-dash-nav a[data-nbmb-section][aria-current="page"],
nav a[data-nbmb-section].active,
nav a[data-nbmb-section][aria-current="page"] {
  color: var(--section-strong);
  background: var(--section-soft);
}

/* Badges, statussen en categoriechips. */
:is(.badge, .status, .tag, .chip, [class*="badge"], [class*="status"],
  [class*="tag"], [class*="chip"], [class*="pill"])[data-nbmb-section] {
  color: var(--section-strong) !important;
  background-color: var(--section-soft) !important;
  border-color: color-mix(in srgb, var(--section-color) 45%, transparent) !important;
}

/* Iconen/cirkels en voortgang krijgen het donkere, leesbare accent. */
:is([class*="icon"], [class*="dot"], [class*="circle"])[data-nbmb-section] {
  color: var(--section-strong);
  border-color: var(--section-color);
}

:is([class*="icon"], [class*="dot"], [class*="circle"])[data-nbmb-section] svg {
  stroke: currentColor;
}

/* Alleen echte balkvullingen kleuren. Gebruik hier bewust geen brede
   [class*="progress"]-selector: progress-labels en tellers bevatten ook dat
   woord en mogen nooit een gekleurde tekstachtergrond krijgen. */
.nbmb-ov-bar[data-nbmb-section] > span,
[class*="-progress-bar"][data-nbmb-section] > span,
.nbmb-doc-chip-progress[data-nbmb-section] > span,
.nbmb-ov-bar[data-nbmb-section]::before,
[class*="-progress-bar"][data-nbmb-section]::before {
  background-color: var(--section-color) !important;
}

/* Gedeelde autosave-statusindicator voor pagina's die naar Supabase
   project_state opslaan (nbmb-project-sync.js). Eén stijl voor alle
   modules, zodat "Opslaan…"/"Opgeslagen"/"Opslaan mislukt" er overal
   hetzelfde uitzien. */
.nbmb-sync-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #766b5a;
}
.nbmb-sync-status[hidden] { display: none; }
.nbmb-sync-status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.nbmb-sync-status.is-saving { color: #8d713d; }
.nbmb-sync-status.is-saved { color: #3f7d59; }
.nbmb-sync-status.is-error { color: #a2483e; }
.nbmb-sync-status.is-loading { color: #766b5a; }

/* Tekst rondom balken blijft altijd gewone tekst, zonder markeervlak. */
[class*="progress-label"][data-nbmb-section],
.nbmb-budget-bar-label[data-nbmb-section] > span,
.nbmb-tk-card-progress[data-nbmb-section] > span.label {
  background: transparent !important;
  box-shadow: none !important;
}

/* Semantische kaarten houden hun rustige witte basis en krijgen een zachte hint. */
:is([class*="card"], [class*="tile"], [class*="item"])[data-nbmb-section] {
  border-color: color-mix(in srgb, var(--section-color) 30%, #e9e1db);
}

:is([class*="card"], [class*="tile"])[data-nbmb-section][data-nbmb-tinted="true"] {
  background-color: var(--section-soft);
}

/* Dashboardonderdelen. */
.nbmb-ov-card[data-nbmb-section] > h3,
.nbmb-ov-card[data-nbmb-section] .nbmb-ov-card-head h3,
.nbmb-ov-card[data-nbmb-section] .nbmb-ov-link {
  color: var(--section-strong);
}

.nbmb-ov-card[data-nbmb-section] :is(.nbmb-ov-icon, .nbmb-ov-deadline-icon, .nbmb-ov-doc-icon) {
  color: var(--section-strong);
  background: var(--section-soft);
}

.nbmb-ov-card[data-nbmb-section] .nbmb-ov-bar > span {
  background: var(--section-color) !important;
}

/* Primaire actie binnen Afbouw: één afbouwkleur met voldoende contrast. */
.nbmb-ac-btn-primary[data-nbmb-section="afbouw"] {
  background: var(--color-afbouw) !important;
  color: #ffffff !important;
  border-color: var(--color-afbouw) !important;
}

.nbmb-ac-btn-primary[data-nbmb-section="afbouw"]:hover {
  background: var(--color-afbouw-strong) !important;
  color: #ffffff !important;
  border-color: var(--color-afbouw-strong) !important;
}

/* Planning, roadmap, deadlines en mijlpalen. */
:is([class*="deadline"], [class*="milestone"], [class*="planning"],
  [class*="roadmap"], [class*="timeline"])[data-nbmb-section] {
  --accent: var(--section-color);
  --accent-soft: var(--section-soft);
  --accent-strong: var(--section-strong);
}

:is([class*="deadline"], [class*="milestone"])[data-nbmb-section] {
  color: var(--section-strong);
  border-color: var(--section-color);
}

/* Fallback voor browsers zonder color-mix. */
@supports not (color: color-mix(in srgb, red 50%, white)) {
  :is([class*="card"], [class*="tile"], [class*="item"])[data-nbmb-section] {
    border-color: var(--section-soft);
  }
}

/* Vaste hulpactie bovenaan iedere pagina. */
.nbmb-global-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 17px;
  border: 1.5px solid #dfa596;
  border-radius: 999px;
  background: #f8e2dc;
  color: #292523 !important;
  box-shadow: 0 0 0 4px rgba(223, 165, 150, 0.16), 0 8px 20px rgba(91, 58, 50, 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.nbmb-global-help-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.nbmb-global-help-button:hover {
  color: #292523 !important;
  background: #f4d5cc;
  border-color: #cf8f80;
  box-shadow: 0 0 0 4px rgba(207, 143, 128, 0.2), 0 10px 24px rgba(91, 58, 50, 0.12);
  transform: translateY(-1px);
}

.nbmb-global-help-button:focus-visible {
  outline: 3px solid rgba(174, 104, 91, 0.3);
  outline-offset: 3px;
}

.nbmb-global-help-actions,
.nbmb-global-help-standalone {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.nbmb-global-help-standalone {
  margin: 0 0 18px;
}

/* De Nieuwbouwroute bestaat zelf uit een beeldvullende SVG. Houd algemene
   kopknoppen daarom als compacte overlay buiten de routeberekening. */
.nbmb-rm-main {
  position: relative;
}

.nbmb-rm-main > .nbmb-global-help-standalone {
  position: absolute !important;
  z-index: 60;
  top: 16px;
  right: 16px;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 10px;
}

.nbmb-rm-main .nbmb-global-help-button {
  display: inline-flex !important;
  width: auto !important;
  height: 42px !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.nbmb-rm-main .nbmb-global-help-button svg,
.nbmb-rm-main .nbmb-global-notification-button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}

.nbmb-rm-main .nbmb-global-notification-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  flex: 0 0 42px !important;
}

@media (max-width: 640px) {
  .nbmb-global-help-button {
    min-height: 40px;
    padding: 9px 14px;
  }

  .nbmb-global-help-actions,
  .nbmb-global-help-standalone {
    justify-content: flex-start;
  }
}

/* Compacte juridische voettekst, sitewide toegevoegd door platform-colors.js
   (addLegalFooter) op elke pagina die nog geen eigen <footer> heeft. Losse
   fallbackkleuren i.p.v. uitsluitend var(--nbmb-*): niet elke pagina
   definieert die tokens onder dezelfde naam (bijv. contact/index.html
   gebruikt een eigen tokenset), dus deze footer moet er ook zonder prima
   uitzien. */
.nbmb-legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 40px;
  padding: 18px clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--nbmb-line, #ece4de);
  color: var(--nbmb-muted, #79706a);
  font-size: 12.5px;
}
.nbmb-legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.nbmb-legal-footer a {
  color: inherit;
  text-decoration: none;
}
.nbmb-legal-footer a:hover,
.nbmb-legal-footer a:focus-visible {
  text-decoration: underline;
}

/* Definitieve, volledig dekkende headerlaag.
   Oudere pagina's bevatten nog lokale headerexperimenten met transparante
   gradients en backdrop blur. Deze centrale componentregel staat bewust als
   laatste laag en voorkomt dat die regels de gedeelde navigatie opnieuw
   melkachtig of onscherp maken. */
html body.nbmb-page > header.nbmb-account-nav,
html body.nbmb-page header.nbmb-account-nav {
  background: var(--platform-nav-surface) !important;
  background-color: var(--platform-nav-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--platform-nav-line) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  isolation: auto !important;
  text-rendering: auto;
  font-synthesis: none;
}

html body.nbmb-page header.nbmb-account-nav::before,
html body.nbmb-page header.nbmb-account-nav::after,
html body.nbmb-page header.nbmb-account-nav > nav::before,
html body.nbmb-page header.nbmb-account-nav > nav::after {
  content: none !important;
  display: none !important;
}

html body.nbmb-page header.nbmb-account-nav > nav,
html body.nbmb-page header.nbmb-account-nav > nav > *,
html body.nbmb-page header.nbmb-account-nav .nbmb-account-profile {
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  text-shadow: none !important;
  text-rendering: auto;
  font-synthesis: none;
}

html body.nbmb-page header.nbmb-account-nav > nav a,
html body.nbmb-page header.nbmb-account-nav .nbmb-account-nav-soon {
  color: var(--platform-nav-ink) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html body.nbmb-page header.nbmb-account-nav .nbmb-ai-status,
html body.nbmb-page header.nbmb-account-nav .nbmb-account-nav-soon small.nbmb-ai-status {
  color: var(--platform-nav-accent-strong) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html body.nbmb-page header.nbmb-account-nav .nbmb-account-route.is-active {
  background: var(--platform-nav-active) !important;
  box-shadow: inset 0 0 0 1px var(--platform-nav-line) !important;
  opacity: 1 !important;
  filter: none !important;
}

html body.nbmb-page header.nbmb-account-nav > nav a.is-active,
html body.nbmb-page header.nbmb-account-nav .nbmb-account-route.is-active > a,
html body.nbmb-page header.nbmb-account-nav .nbmb-account-route.is-active .nbmb-account-route-toggle {
  color: var(--platform-nav-accent-strong) !important;
  background: var(--platform-nav-active) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile {
  color: var(--platform-nav-ink) !important;
  background: var(--platform-nav-hover) !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Eén profielicoon voor het volledige platform. Lichtplan is de visuele bron:
   dezelfde pill, profielfoto en compacte chevron op iedere dashboardpagina. */
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile.is-menu-ready,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile:hover,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile:focus-visible,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile.is-open,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile.is-menu-ready:hover,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile.is-menu-ready:focus-visible,
html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile.is-menu-ready.is-open {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 4px 6px 4px 4px !important;
  gap: 1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--platform-nav-hover) !important;
  color: var(--color-taken-strong) !important;
  box-shadow: none !important;
}

html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile > img {
  display: block !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

html body.nbmb-page header.nbmb-account-nav .nbmb-ov-profile > svg {
  display: block !important;
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: var(--platform-nav-ink) !important;
  opacity: 1 !important;
  stroke-width: 2 !important;
}