/* ============================================================
   Procestoppers Wizard Shell
   Loads AFTER styles.css to override.
   ============================================================ */

:root {
  --primary: #3300FF;
  --primary-light: #4d65ff;
  --primary-dark: #2200cc;
  --primary-soft: rgba(var(--primary-rgb, 51, 0, 255), 0.06);
  --primary-soft-2: rgba(var(--primary-rgb, 51, 0, 255), 0.12);
  --accent: #00E640;
  --accent-dark: #00b832;
  --accent-soft: rgba(0,230,64,0.08);
  --bg-dark: #0a0a1a;
  --bg-sidebar: #f8f9fc;
  --bg-canvas: #f5f6fa;
  --bg: #f5f6fa;
  --bg-elev: #ffffff;
  --text: #1a1a2e;
  --text-light: #6b7280;
  --text-soft: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e7f0;
  --border-light: #f0f1f5;
  --border-soft: #f0f1f5;
  --success: #00E640;
  --warning: #f59e0b;
  --error: #ef4444;
  --danger: #ef4444;
  --card-shadow: 0 1px 3px rgba(var(--primary-rgb, 51, 0, 255), 0.04), 0 1px 2px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 4px 16px rgba(var(--primary-rgb, 51, 0, 255), 0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 40px rgba(10,10,31,0.12);
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-sm: 8px;

  /* ----- AI Brand Scanner v2 — fundering (chunk 1) -----
     applyTheme() in branding.js zet deze variabelen runtime per organisatie.
     Fallbacks hier matchen exact de huidige hardcoded waarden zodat pagina's
     er identiek uitzien wanneer applyTheme nog niet gedraaid heeft of een
     v1-thema (zonder de v2-velden) actief is. */
  --brand-bg:             #f5f6fa;        /* page/canvas — = oude --bg */
  --brand-surface:        #ffffff;        /* cards, modals, topbar */
  --brand-border:         #e5e7f0;        /* = oude --border */
  --brand-primary-hover:  #2200cc;        /* = oude --primary-dark fallback */
  --brand-radius:         10px;           /* knoppen + form-inputs (= huidige .btn radius) */
  --brand-radius-sm:      6px;
  --brand-radius-lg:      20px;           /* grote modals (= huidige .login-modal radius) */
  --brand-logo-url:       none;           /* light variant — gebruikt op witte achtergronden */
  --brand-logo-dark-url:  none;           /* donkere variant — voor banners/donkere headers */
  --brand-hero-image:     none;           /* login-scherm hero-foto (chunk 4) */
  --brand-banner-image:   none;           /* dashboard banner-strook (chunk 4) */
  /* Auto-contrast tekstkleuren — readableTextOn() in branding.js bepaalt
     of zwart of wit beter leesbaar is op de bijbehorende achtergrond. */
  --on-primary:           #ffffff;        /* tekst/icoon op primary-vlak */
  --on-accent:            #0a0a1a;        /* tekst/icoon op accent-vlak */
  --on-surface:           #1a1a2e;        /* tekst op surface */
}

/* AI Brand Scanner v2 — universele btn-radius sweep (chunk 5).
   Reden: in chunk 4 bleek dat één .btn op pm-scan-form op 10px bleef ondanks
   dat .btn { border-radius: var(--brand-radius) !important } in shell.css én
   redesign.css staat. Vermoedelijke oorzaak: een regel in een @media of layer
   die cssRules-iteratie oversloeg. Deze hogere-specificity selector
   (button.btn = 0,0,1,1) wint van naked .btn (0,0,1,0) en houdt alle
   btn-elementen consistent op de klant-radius. */
button.btn,
button.btn-primary,
button.btn-secondary,
button.btn-accent,
button.btn-danger,
button.btn-warning {
  border-radius: var(--brand-radius, 10px) !important;
}

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

body {
  font-family: var(--font) !important;
  background: var(--bg-canvas);
  height: 100vh;
  display: flex !important;
  flex-direction: column !important;
  color: var(--text);
  font-weight: 400;
  overflow: hidden;
}

body > .toolbar { display: none !important; }

/* ============ TOP BAR ============ */
.topbar {
  background: #ffffff;
  color: var(--text);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 56px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-logo {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: white;
  position: relative;
  transition: width 0.2s ease;
}
/* Procestoppers-puntje: alleen bij de default 'P'-letter-logo; verberg zodra
   er een custom upload actief is (dan heeft het element class .has-custom-logo). */
.topbar-logo::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.topbar-logo.has-custom-logo::after { display: none; }
/* Custom logo: groter weergeven (klantlogo is meestal liggend, dus breed toelaten).
   Let op: gebruik NIET de background-shorthand met !important — die reset ook
   background-image die branding.js inline zet. Daarom splitsen we color/image/etc. */
.topbar-logo.has-custom-logo {
  width: auto;
  min-width: 64px;
  max-width: 180px;
  height: 44px;
  padding: 4px 8px !important;
  background-color: white !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05);
  /* text-indent verbergt eventuele fallback-letter in het element */
  text-indent: -9999px;
  color: transparent;
}

.topbar-left h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}

.subtitle {
  font-size: 11px;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-weight: 500;
  border: 1px solid rgba(0,230,64,0.2);
}

.topbar-nav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}

.topbar-nav button,
.mode-btn {
  padding: 7px 16px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(17,24,39,0.7) !important;
  cursor: pointer;
  font-size: 13px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  transition: all 0.15s;
}

.topbar-nav button:hover,
.mode-btn:hover {
  background: rgba(17,24,39,0.06) !important;
  color: var(--text) !important;
}

.topbar-nav button.active,
.mode-btn.active {
  background: var(--primary) !important;
  color: var(--on-primary, white) !important;
}

.topbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  background: rgba(17,24,39,0.04);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
  border: 1px solid rgba(17,24,39,0.08);
}

.user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

.admin-switch {
  padding: 7px 14px !important;
  border: 1px solid rgba(17,24,39,0.12) !important;
  border-radius: 8px !important;
  background: rgba(17,24,39,0.04) !important;
  color: var(--text) !important;
  cursor: pointer;
  font-size: 12px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-switch:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.admin-switch.active {
  background: var(--accent) !important;
  color: var(--bg-dark) !important;
  border-color: var(--accent) !important;
}

/* ============ MAIN ============ */
.main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ============ SIDEBAR ============ */
.sidebar {
  width: 280px;
  background: white;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-header h2 {
  font-size: 14px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.2px;
}

.sidebar-header p {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

.progress-bar {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s ease;
  border-radius: 2px;
  width: 0%;
}

.step-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 22px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  position: relative;
}
.step-item:hover { background: var(--primary-soft); }
.step-item.active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.step-item.completed .step-number {
  background: var(--accent);
  color: white;
}
.step-item.completed .step-number::before {
  content: '✓';
  font-size: 14px;
}
.step-item.completed .step-number span { display: none; }

.step-number {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #e5e7f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  flex-shrink: 0;
  transition: all 0.2s;
}
.step-item.active .step-number {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 51, 0, 255), 0.3);
}

.step-info h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.1px;
}
.step-info p {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 1px;
}

.step-connector {
  position: absolute;
  left: 37px; top: 44px;
  width: 1px;
  height: calc(100% - 28px);
  background: var(--border);
}
.step-item:last-child .step-connector { display: none; }
.step-item.completed .step-connector { background: var(--accent); }

/* ============ CONTENT ============ */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-canvas);
}

.view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.view.active { display: flex; }

/* ============ PROCES VIEW (wizard) ============ */
.view-proces {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.view-proces.active { display: flex; }

.wizard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.step-panel {
  display: none;
  padding: 32px 36px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
}
.step-panel.active { display: block; flex: 1; }

.step-panel > h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.4px;
}

.step-panel .step-desc {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.6;
  max-width: 760px;
}

/* Canvas step fills the screen */
.step-panel-canvas {
  max-width: none;
  padding: 18px 24px 8px;
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: auto;  /* scrollt zodat werkvoorraad-kaart onder canvas zichtbaar is */
}
.step-panel-canvas.active { display: flex; }

.step-panel-canvas > .editor-header {
  flex-shrink: 0;
  margin-bottom: 6px;
}

.step-panel-canvas .editor-header h2 {
  font-size: 20px;
  margin-bottom: 2px;
}
.step-panel-canvas .editor-header .step-desc {
  font-size: 13px;
  margin-bottom: 10px;
}

/* ============ CARDS ============ */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--card-shadow-hover); }
.card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}
.card p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
}

.interview-launch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.interview-launch > div { flex: 1; }

.saved-list-placeholder {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.saved-interviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.saved-interview-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.15s;
}
.saved-interview-card:hover {
  border-color: var(--primary);
  background: white;
  box-shadow: var(--card-shadow);
}

.saved-interview-info { flex: 1; min-width: 0; }
.saved-interview-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-interview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-light);
  align-items: center;
}

.phase-pill {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.saved-interview-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-danger-text { color: var(--error) !important; }
.btn-danger-text:hover { background: #fee2e2 !important; }

.empty-state-inline {
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.muted-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.schema-name-setup {
  margin-top: 20px;
  max-width: 520px;
}
.schema-name-setup label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.schema-name-setup input {
  width: 100%;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  background: white !important;
  color: var(--text) !important;
}
.schema-name-setup input:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

/* ============ BUTTONS ============ */
.btn {
  padding: 10px 20px !important;
  border-radius: var(--brand-radius, 10px) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.15s;
  border: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: var(--primary) !important;
  color: var(--on-primary, white) !important;
}
.btn-primary:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 51, 0, 255), 0.25);
}
.btn-accent {
  background: var(--accent) !important;
  color: var(--bg-dark) !important;
  font-weight: 600 !important;
}
.btn-accent:hover { background: var(--accent-dark) !important; }
.btn-secondary {
  background: white !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.btn-warning {
  background: var(--warning) !important;
  color: white !important;
}
.btn-warning:hover { background: #d97706 !important; }

/* ============ OPTION CARDS ============ */
.option-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.option-card {
  background: white;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  box-shadow: var(--card-shadow);
  position: relative;
}
.option-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary);
  text-transform: uppercase;
}
.option-card-badge.badge-flowchart {
  background: #fff4e6;
  color: #c2410c;
  border-color: #c2410c;
}
.option-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb, 51, 0, 255), 0.12);
  transform: translateY(-2px);
}
.option-card.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.option-card .icon {
  font-size: 40px;
  margin-bottom: 14px;
}
.option-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.option-card p {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.4;
}

/* ============ APPROACH-GRID (Stap 2 — twee-kolommen BPMN vs Flowchart) ============ */
/* Stap 1 (Procesmodel genereren), stap 2 (Proces uitwerken) en stap 4
   (Concept Schema) mogen breder zijn dan de standaard 1200px om de content
   evenwichtig naast de zijbalk te plaatsen — anders oogt het rechts
   uitgelijnd en blijft er onnodig veel witruimte aan de linkerkant. */
.step-panel[data-panel="0"],
.step-panel[data-panel="1"],
.step-panel[data-panel="3"] {
  max-width: 1600px;
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.approach-col {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 22px;
  box-shadow: var(--card-shadow);
}
.approach-col-bpmn { border-top: 4px solid var(--primary); }
.approach-col-flowchart { border-top: 4px solid #c2410c; }
.approach-col-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.approach-col-icon { font-size: 26px; line-height: 1; }
.approach-col-headtext { display: flex; flex-direction: column; gap: 4px; }
.approach-col-headtext strong { font-size: 16px; font-weight: 700; color: var(--text); }
.approach-col-headtext em { font-size: 12px; color: var(--text-light); font-style: normal; line-height: 1.45; }

/* Tegels in een approach-kolom: 2 per rij, compact maar leesbaar */
.option-cards-track {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}
.option-cards-track .option-card {
  padding: 20px 16px !important;
  border-radius: 12px !important;
}
.option-cards-track .option-card .icon {
  font-size: 30px !important;
  margin-bottom: 10px !important;
}
.option-cards-track .option-card h3 {
  font-size: 13px !important;
  margin-bottom: 4px !important;
  line-height: 1.3;
}
.option-cards-track .option-card p {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.option-cards-track .option-card-badge {
  font-size: 9px !important;
  padding: 2px 6px !important;
  top: 8px !important;
  right: 8px !important;
}

/* "In ontwikkeling"-tegel — visueel uitgegrijsd, niet klikbaar-voelend */
.option-card.option-card-dev {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-sidebar, #f7f7fb);
}
.option-card.option-card-dev:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: var(--card-shadow);
}
.option-card-dev-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fde68a;
  color: #78350f;
  border: 1px solid #f59e0b;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .approach-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .option-cards-track { grid-template-columns: 1fr !important; }
}

/* Concept-variant: compactere kolommen voor de stap-4 empty-state.
   Zelfde 2-koloms structuur, maar kleinere padding/typografie zodat het
   binnen de concept-preview-box past zonder dat de gebruiker hoeft te scrollen. */
.approach-grid.approach-grid-concept {
  gap: 16px;
  margin-top: 12px;
  text-align: left;
}
/* Concept-empty-msg moet de volle breedte vullen zodat de approach-grid
   niet door de flex-center-parent (.concept-preview) wordt ingesnoerd. */
.concept-preview .concept-empty-msg:has(.approach-grid-concept) {
  width: 100%;
}

/* ============ AI-HELPER (universele assistent) ============ */
.topbar-ai-helper-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.topbar-ai-helper-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(99, 102, 241, 0.38);
}
.topbar-ai-helper-icon { font-size: 15px; line-height: 1; }

.ai-helper-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.ai-helper-modal.hidden { display: none; }
.ai-helper-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
}
.ai-helper-modal-card {
  position: relative;
  width: min(440px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 48px));
  margin: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ai-helper-slide-in 0.22s ease-out;
}
@keyframes ai-helper-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ai-helper-modal-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ai-helper-modal-titlewrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ai-helper-modal-sparkle { font-size: 22px; line-height: 1; margin-top: 2px; }
.ai-helper-modal-header h3 { font-size: 16px; font-weight: 700; color: white; margin: 0; }
.ai-helper-modal-context {
  font-size: 11.5px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.85);
}
.ai-helper-modal-headbtns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ai-helper-modal-close,
.ai-helper-modal-reset {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.ai-helper-modal-close { font-size: 18px; }
.ai-helper-modal-close:hover,
.ai-helper-modal-reset:hover { background: rgba(255, 255, 255, 0.28); }

.ai-helper-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-helper-welcome h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.ai-helper-welcome p {
  font-size: 12.5px;
  color: var(--text-light);
  margin: 0 0 12px;
  line-height: 1.5;
}
.ai-helper-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-helper-suggestion {
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ai-helper-suggestion:hover {
  border-color: #8b5cf6;
  color: #6366f1;
  background: #f5f3ff;
}

.ai-helper-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-helper-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 92%;
  word-wrap: break-word;
}
.ai-helper-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-bottom-right-radius: 4px;
}
.ai-helper-msg-assistant {
  align-self: flex-start;
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ai-helper-msg.is-pending { font-style: italic; color: var(--text-light); }
.ai-helper-msg.is-error { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }

.ai-helper-modal-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: white;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
.ai-helper-modal-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  min-height: 38px;
  max-height: 120px;
  outline: none;
}
.ai-helper-modal-input-row textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ai-helper-send-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-helper-send-btn:hover { transform: translateY(-1px); }
.ai-helper-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ============ PROCESMODEL-ACTIONS — toolbar-stijl ============
   Knoppen-rij is links-uitgelijnd als één toolbar — Exporteren komt
   natuurlijk na Mavim export, niet aan de rechter-viewport-rand geplakt.
   Binnen een groep gap 8px; tussen groepen subtiele verticale scheidings-
   streepjes. Alle knoppen exact 38px hoog ongeacht variant. */
.processmodel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 2px;
}
.pm-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pm-actions-sep {
  display: inline-block;
  width: 1px;
  height: 26px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Knoppen-uniformiteit: alle knoppen in deze rij krijgen dezelfde
   afmetingen ongeacht of ze btn-secondary / btn-primary / btn-ai-agent zijn. */
.processmodel-actions .btn {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid transparent !important;
  margin: 0 !important;
}
.processmodel-actions .btn.btn-secondary {
  border-color: var(--border) !important;
}

/* Band-filters-rij krijgt de zoom-controls er rechts in zodat hij niet onnodig
   plek inneemt in de drukke actiebalk eronder. */
.pm-band-filters { gap: 8px; align-items: center; flex-wrap: wrap; }
.pm-band-filters .pm-zoom-group { margin-left: auto; }

/* ============ PROCESMODEL-ZOOM (controls + compact-modus) ============ */
.pm-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: #f1f5f9;
  border-radius: 10px;
}
.pm-zoom-group .btn.pm-zoom-btn {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  min-height: 0;
}
.pm-zoom-level {
  display: inline-block;
  min-width: 42px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}
.pm-zoom-btn#btn-pm-compact.is-active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: white !important;
  border-color: transparent !important;
}

/* Compactmodus — laat beschrijvingen weg + verklein tegels zodat het hele
   procesmodel in 1 oogopslag zichtbaar is. */
.processmodel-content.pm-compact .pm-cluster-desc,
.processmodel-content.pm-compact .pm-detail-desc,
.processmodel-content.pm-compact .pm-werkproces-desc,
.processmodel-content.pm-compact .pm-bp-textwrap .pm-bp-levelpill,
.processmodel-content.pm-compact .pm-werkproces-levelpill,
.processmodel-content.pm-compact .pm-cluster-levelpill {
  display: none !important;
}
.processmodel-content.pm-compact .pm-cluster {
  padding: 10px 12px !important;
}
.processmodel-content.pm-compact .pm-cluster-head {
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
}
.processmodel-content.pm-compact .pm-cluster-title {
  font-size: 13px !important;
}
.processmodel-content.pm-compact .pm-cluster-body {
  padding: 8px 0 0 !important;
}
.processmodel-content.pm-compact .pm-bp-list {
  gap: 6px !important;
}
.processmodel-content.pm-compact .pm-bp-item {
  padding: 6px 10px !important;
  min-height: 0 !important;
}
.processmodel-content.pm-compact .pm-bp-item-wrap .pm-bp-name {
  font-size: 12px !important;
}
.processmodel-content.pm-compact .pm-completeness {
  margin: 4px 0 6px !important;
}
.processmodel-content.pm-compact .pm-completeness-label { display: none; }
.processmodel-content.pm-compact .pm-werkproces {
  padding: 8px 10px !important;
}

/* Smooth animatie op zoom */
#processmodel-content {
  transition: transform 0.18s ease-out;
}

/* ============ AI-ONBOARDING modal (eerste login) ============ */
.ai-onboarding-modal {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ai-helper-slide-in 0.3s ease-out;
}
.ai-onboarding-modal.hidden { display: none; }
.ai-onboarding-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(51, 0, 255, 0.32), rgba(139, 92, 246, 0.32)), rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.ai-onboarding-card {
  position: relative;
  background: white;
  border-radius: 18px;
  width: min(580px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 38px 28px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.35);
}
.ai-onboarding-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  color: var(--text-light);
}
.ai-onboarding-close:hover { background: #e2e8f0; color: var(--text); }
.ai-onboarding-hero { text-align: center; margin-bottom: 20px; }
.ai-onboarding-hero-icon { font-size: 36px; margin-bottom: 4px; }
.ai-onboarding-hero h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.ai-onboarding-hero p { font-size: 14px; color: var(--text-light); margin: 0; }

.ai-onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-onboarding-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid var(--border);
}
.ai-onboarding-step-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.ai-onboarding-steps strong {
  display: block;
  font-size: 13.5px;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 2px;
}
.ai-onboarding-steps p { font-size: 12px; color: var(--text-light); margin: 0; line-height: 1.5; }

.ai-onboarding-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ai-onboarding-btn {
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: white;
  color: #475569;
  font-family: inherit;
}
.ai-onboarding-btn-skip:hover { background: #f8fafc; }
.ai-onboarding-btn-ask {
  border-color: transparent;
  background: #eef2ff;
  color: #4338ca;
}
.ai-onboarding-btn-ask:hover { background: #e0e7ff; }
.ai-onboarding-btn-start {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-color: transparent;
}
.ai-onboarding-btn-start:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35);
}
.ai-onboarding-foot {
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
  margin: 18px 0 0;
}

/* ============ TM-BTN ACCENT (AI-knoppen in toolbar) ============ */
.tm-btn.tm-btn-accent {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: white !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
.tm-btn.tm-btn-accent:hover {
  filter: brightness(1.05);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.32);
}

/* ============ AI-CANVAS-CHECK paneel (zijbalk rechts) ============ */
.ai-check-panel {
  position: fixed;
  right: 18px;
  top: 90px;
  bottom: 110px;
  width: 360px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  animation: ai-helper-slide-in 0.22s ease-out;
}
.ai-check-panel.hidden { display: none; }
.ai-check-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
  border-bottom: 1px solid var(--border);
}
.ai-check-sparkle { font-size: 20px; flex-shrink: 0; }
.ai-check-headtext { flex: 1; }
.ai-check-headtext h4 { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
.ai-check-headtext p { font-size: 11.5px; color: var(--text-light); margin: 0; line-height: 1.45; }
.ai-check-close {
  width: 26px;
  height: 26px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-light);
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.ai-check-close:hover { background: var(--bg-sidebar); color: var(--text); }

.ai-check-actions { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.ai-check-btn {
  width: 100%;
  padding: 9px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ai-check-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(99, 102, 241, 0.32);
}
.ai-check-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.ai-check-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-check-loading,
.ai-check-empty,
.ai-check-error {
  text-align: center;
  padding: 28px 16px;
  font-size: 13px;
  color: var(--text-light);
}
.ai-check-error { color: #991b1b; }
.ai-check-allgood {
  text-align: center;
  padding: 24px 16px;
}
.ai-check-allgood-icon { font-size: 38px; margin-bottom: 8px; }
.ai-check-allgood strong {
  display: block;
  font-size: 14px;
  color: #16a34a;
  margin-bottom: 4px;
}
.ai-check-allgood p { font-size: 12px; color: var(--text-light); line-height: 1.5; margin: 0; }

.ai-check-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f9fafb;
  border-left: 3px solid #cbd5e1;
}
.ai-check-item.ai-check-sev-error { border-left-color: #dc2626; background: #fef2f2; }
.ai-check-item.ai-check-sev-warning { border-left-color: #f59e0b; background: #fffbeb; }
.ai-check-item.ai-check-sev-info { border-left-color: #6366f1; background: #eef2ff; }
.ai-check-sev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-light);
}
.ai-check-item-body strong { display: block; font-size: 12.5px; color: var(--text); font-weight: 600; }
.ai-check-item-body p { font-size: 11.5px; color: var(--text-light); margin: 3px 0 0; line-height: 1.45; }

/* ============ COMPLEETHEIDSMETER (procesmodel) ============ */
.pm-completeness {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
  font-size: 12px;
  color: var(--text-light);
}
.pm-completeness-bar {
  flex: 1;
  height: 8px;
  background: #eef0f5;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.pm-completeness-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pm-completeness.is-complete .pm-completeness-fill {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}
.pm-completeness.is-low .pm-completeness-fill {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.pm-completeness-label {
  font-weight: 500;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-light);
}
.pm-completeness-label strong { color: var(--text); }

/* Inline-variant binnen pm-bp-item: kleine balk met getallen */
.pm-completeness.pm-completeness-inline {
  margin: 4px 0 0;
  gap: 6px;
  font-size: 10.5px;
}
.pm-completeness.pm-completeness-inline .pm-completeness-bar { height: 5px; flex: 0 0 70px; }
.pm-completeness-num {
  font-weight: 600;
  color: var(--text-light);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.pm-completeness.is-complete .pm-completeness-num { color: #16a34a; }
.approach-grid-concept .approach-col { padding: 14px 14px 16px; }
.approach-grid-concept .approach-col-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  gap: 10px;
}
.approach-grid-concept .approach-col-icon { font-size: 20px; }
.approach-grid-concept .approach-col-headtext strong { font-size: 14px; }
.approach-grid-concept .approach-col-headtext em { font-size: 11px; }
.approach-grid-concept .option-cards-track { gap: 10px !important; }
.approach-grid-concept .option-cards-track .option-card {
  padding: 14px 12px !important;
  border-radius: 10px !important;
}
.approach-grid-concept .option-cards-track .option-card .icon {
  font-size: 24px !important;
  margin-bottom: 6px !important;
}
.approach-grid-concept .option-cards-track .option-card h3 {
  font-size: 12px !important;
  line-height: 1.3;
}
.approach-grid-concept .option-cards-track .option-card p {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}
.approach-grid-concept .option-cards-track .option-card-badge {
  font-size: 8.5px !important;
  padding: 1px 5px !important;
  top: 6px !important;
  right: 6px !important;
}
.approach-grid-concept .option-cards-track .option-card-dev-badge {
  font-size: 8.5px !important;
  padding: 1px 6px !important;
  top: 6px !important;
  left: 6px !important;
}

/* Compactere variant voor de "Geen concept schema"-state in stap 4.
   Drie kolommen, kleinere padding + icoon zodat de tegels in beeld passen
   en mooi uitlijnen (3 + 2 layout voor 5 tegels). */
.option-cards-concept {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-top: 8px !important;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.option-cards-concept .option-card {
  padding: 18px 14px !important;
  border-radius: 12px !important;
}
.option-cards-concept .option-card .icon {
  font-size: 26px !important;
  margin-bottom: 8px !important;
}
.option-cards-concept .option-card h3 {
  font-size: 13px !important;
  margin-bottom: 4px !important;
}
.option-cards-concept .option-card p {
  font-size: 11px !important;
  line-height: 1.35 !important;
}
.option-cards-concept .option-card-badge {
  font-size: 9px !important;
  padding: 2px 6px !important;
  top: 8px !important;
  right: 8px !important;
}
@media (max-width: 720px) {
  .option-cards-concept { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============ CANVAS STEP (step 4) ============ */
.toolbar-mini {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: white;
  border-radius: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  flex-shrink: 0;
}
.tm-btn {
  padding: 7px 12px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  background: var(--bg-sidebar) !important;
  font-size: 12px !important;
  cursor: pointer;
  /* BPMN/Flowchart-toolbar: tekst ALTIJD zwart, ongeacht huisstijl */
  color: #000 !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  transition: all 0.15s;
}
.tm-btn:hover {
  background: var(--primary-soft) !important;
  /* Hover-kleur blijft óók zwart zodat het leesbaar blijft bij elke huisstijl */
  color: #000 !important;
  border-color: var(--primary-light) !important;
}
.tm-sep {
  width: 1px;
  background: var(--border);
  margin: 0 4px;
  align-self: stretch;
}

/* ---- Logische groepen in het bewerk-lint (Nieuw, Weergave, etc.) ----- */
.tm-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  position: relative;
  border-right: 1px solid var(--border);
}
.tm-group:last-child { border-right: none; }
.tm-group::before {
  content: attr(data-tm-label);
  position: absolute;
  top: -16px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-transform: uppercase;
  pointer-events: none;
}
.toolbar-mini { padding-top: 22px; }

/* Toggle-state voor scroll-zoom-knop (en eventuele andere toggles) */
.tm-btn-on {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}
.tm-btn-on:hover {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #1e293b !important;
}

.canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 360px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.canvas-wrap-max {
  min-height: 560px;
  height: calc(100vh - 320px);
  max-height: calc(100vh - 320px);
  flex-shrink: 0;  /* niet krimpen zodat canvas altijd werkbare hoogte heeft */
  background: var(--editor-canvas-bg, transparent);
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.canvas-wrap-max .bpmn-canvas,
.canvas-wrap-max #canvas {
  background: var(--editor-canvas-bg, transparent);
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
/* Dark-thema: bpmn-js SVG-elementen krijgen lichtere kleur zodat ze zichtbaar blijven */
body[data-editor-theme="dark"] .djs-container .djs-visual > :not(text) {
  stroke: #7dd3fc;
}
body[data-editor-theme="dark"] .djs-container .djs-visual text,
body[data-editor-theme="dark"] .djs-container text.djs-label {
  fill: #e2e8f0 !important;
}
body[data-editor-theme="dark"] .djs-container {
  background: #0a0f1e;
}
body[data-editor-theme="dark"] .djs-palette {
  background: #111827 !important;
  border-color: #1f2937 !important;
}
body[data-editor-theme="dark"] .djs-palette .entry {
  color: #e2e8f0 !important;
}
body[data-editor-theme="dark"] .djs-context-pad .entry {
  background: #1e293b;
  color: #e2e8f0;
}
.editor-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 8px;
}
.editor-header-compact h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}
.step-panel-canvas {
  padding: 10px 18px 6px !important;
}

.tm-btn-primary {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
  font-weight: 600 !important;
}
.tm-btn-primary:hover {
  background: var(--primary-dark) !important;
  color: white !important;
}

.save-indicator {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 500;
  margin-left: 4px;
  align-self: center;
  white-space: nowrap;
  transition: all 0.2s;
}
.save-indicator.dirty {
  background: #fef3c7;
  color: #92400e;
  animation: pulse-dirty 1.6s ease-in-out infinite;
}
.save-indicator.saved {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
@keyframes pulse-dirty {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* In-progress drawer */
.in-progress-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: white;
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(10,10,31,0.1);
  z-index: 50;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.in-progress-drawer.hidden {
  transform: translateX(100%);
  pointer-events: none;
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
}
.drawer-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Walk-through drawer */
.walkthrough-drawer {
  width: 440px;
}
.walkthrough-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
}
.walkthrough-blocks {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.wt-block {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.wt-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wt-block-header strong {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.wt-block-type {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wt-block-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
}
.wt-block-locate {
  padding: 2px 6px !important;
  font-size: 12px !important;
}
.wt-block-input-row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.wt-mic-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border) !important;
  background: white !important;
  border-radius: 6px !important;
  cursor: pointer;
  color: var(--text-light) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: all 0.12s;
}
.wt-mic-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.wt-mic-btn.recording {
  background: var(--error) !important;
  border-color: var(--error) !important;
  color: white !important;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
.wt-block-text {
  flex: 1;
  width: 100%;
  padding: 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  background: white !important;
  resize: vertical;
  line-height: 1.4;
}
.wt-block.is-custom {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wt-block.is-empty {
  opacity: 0.85;
}
.wt-block-badge-ai {
  background: var(--bg-sidebar) !important;
  color: var(--text-light) !important;
}
.wt-block-badge-empty {
  background: var(--bg-sidebar) !important;
  color: var(--text-muted) !important;
  border: 1px dashed var(--border) !important;
}
.wt-ai-btn {
  font-size: 11px !important;
  color: var(--primary) !important;
}
.wt-ai-btn:hover {
  background: var(--primary-soft) !important;
}
.wt-clear {
  font-size: 11px !important;
}
.wt-block-text:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.wt-block-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Archive viewer modal */
.archive-viewer-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 31, 0.6);
  z-index: 600;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive-viewer-modal.hidden { display: none; }
.archive-viewer {
  background: white;
  border-radius: 16px;
  max-width: 1400px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.archive-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
}
.archive-viewer-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.archive-viewer-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.archive-viewer-schema {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.archive-viewer-schema .concept-zoom-controls {
  margin: 8px 12px;
  align-self: flex-start;
}
.archive-schema-wrap {
  flex: 1;
  overflow: auto;
  background: white;
  padding: 12px;
}
.archive-schema-wrap svg {
  display: block;
  transform-origin: top left;
  transition: transform 0.15s;
}
.archive-viewer-walkthrough {
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--bg-sidebar);
}
.archive-viewer-walkthrough h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}
.av-walkthrough-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.av-wt-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.av-wt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.av-wt-head strong { font-size: 13px; }
.av-wt-item p {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 900px) {
  .archive-viewer-body { grid-template-columns: 1fr; }
  .archive-viewer-walkthrough { border-top: 1px solid var(--border); }
}

#canvas, .bpmn-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: white;
}

/* ============ ACTION BAR (bottom) ============ */
.action-bar {
  padding: 14px 36px;
  background: white;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.action-bar .btn-back {
  padding: 10px 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: white !important;
  cursor: pointer;
  font-size: 13px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  color: var(--text-light) !important;
}
.action-bar .btn-back:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.action-bar .btn-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.action-bar .btn-next {
  padding: 10px 28px !important;
  background: var(--primary) !important;
  color: white !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-size: 13px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  transition: all 0.15s;
}
.action-bar .btn-next:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 51, 0, 255), 0.25);
}
.step-indicator {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}
.step-indicator strong { color: var(--primary); }

/* ============ CONCEPT PREVIEW (step 3) ============ */
.concept-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.concept-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}

.concept-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.concept-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--bg-sidebar);
  border-radius: 8px;
}
.concept-zoom-controls .cv-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  background: white !important;
  border: 1px solid var(--border) !important;
}
.concept-zoom-controls .cv-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.zoom-level {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.concept-preview-wrap {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  /* VASTE hoogte zodat children met height:100% een referentie hebben.
     -360px = topbar (65) + page-title (120) + toolbar (80) + footer (95).
     Anders past de wrap niet in viewport en wordt schema-bottom afgekapt. */
  height: calc(100vh - 360px);
  min-height: 480px;
  position: relative;
}

.concept-preview {
  padding: 18px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concept-preview.empty {
  /* empty-state stays top-aligned via override below */
}
.concept-preview.empty {
  background: repeating-linear-gradient(45deg, white, white 20px, var(--bg-sidebar) 20px, var(--bg-sidebar) 21px);
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.concept-preview svg {
  display: block;
  max-width: none; /* Allow full width, scroll horizontally */
  height: auto;
  transition: transform 0.15s ease-out;
}
.concept-empty-msg {
  text-align: center;
  color: var(--text-light);
  padding: 40px 20px;
}
.concept-empty-msg p { color: var(--text-light); font-size: 14px; }

/* ============ LOGIN MODAL ============ */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 51, 0, 255), 0.15), rgba(0,230,64,0.15)), rgba(10,10,31,0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.login-modal-overlay.hidden { display: none; }
.login-modal {
  background: white;
  border-radius: 20px;
  padding: 36px 40px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(10,10,31,0.3);
  text-align: center;
}

/* ----- AI Brand Scanner v2 — dashboard banner-strook (chunk 4) ----- */
/* Smalle foto-band bovenaan het dashboard. Default verborgen — branding.js
   zet .has-banner zodra theme.bannerImageUrl gevuld is. */
.dash-brand-banner {
  display: none;
  position: relative;
  width: 100%;
  height: 120px;
  margin: -16px 0 24px;
  border-radius: 14px;
  overflow: hidden;
  background-image: var(--brand-banner-image, none);
  background-size: cover;
  background-position: center;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.06));
}
.dash-brand-banner.has-banner { display: block; }
/* Lichte overlay zodat het logo erop altijd leesbaar blijft, ongeacht foto-helderheid */
.dash-brand-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0) 100%);
}
.dash-brand-banner-logo {
  position: absolute;
  left: 24px; top: 50%;
  transform: translateY(-50%);
  width: 76px; height: 52px;
  padding: 6px 10px;
  /* Witte semi-transparante chip achter het logo zodat het zowel op een
     donkere als een lichte banner-foto altijd leesbaar is. Auto-contrast op
     achtergrond is moeilijk zonder echte image-analyse — een vaste lichte
     chip met blur is de pragmatische oplossing. */
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--brand-radius, 10px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  box-sizing: border-box;
}
.dash-brand-banner-logo::before {
  content: '';
  position: absolute;
  inset: 6px 10px;
  background-image: var(--brand-logo-url, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* Performance: skip rendering wanneer banner buiten viewport — deze strook
   staat boven de fold maar als de gebruiker scrolled blijft hij niet onnodig
   geverfd worden. content-visibility doet weinig kwaad als hij wel zichtbaar is. */
.dash-brand-banner.has-banner {
  content-visibility: auto;
  contain-intrinsic-size: 120px;
}

/* ----- AI Brand Scanner v2 — login hero + welkomstzin (chunk 4) ----- */
/* Hero-foto-band bovenin de login-card, ALLEEN getoond bij .has-hero op de overlay
   (auth.js zet die class wanneer theme.heroImageUrl gevuld is). De foto komt uit
   --brand-hero-image die door applyTheme wordt gezet. */
.login-modal-overlay.has-hero .login-modal {
  padding-top: 0;
  overflow: hidden;
}
.auth-login-hero {
  width: calc(100% + 80px);     /* trek door tot de modal-rand (compenseer .login-modal padding 40px) */
  height: 140px;
  margin: 0 -40px 24px;
  background-image: var(--brand-hero-image, none);
  background-size: cover;
  background-position: center;
  background-color: var(--primary-soft, #f5f6fa);
  position: relative;
}
/* Subtiele gradient onderaan zodat het logo erbovenop niet verdrinkt in een drukke foto */
.auth-login-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.85) 100%);
  pointer-events: none;
}
/* Welkomstzin: kort, premium, boven de standaard "Welkom bij ..." */
.auth-login-welcome {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary, #3D2EFF);
  margin: 0 0 6px;
  opacity: 0.9;
}
.login-logo {
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary, white);
  font-size: 28px;
  font-weight: 800;
  margin: 0 auto 14px;
  position: relative;
}
.login-logo::after {
  content: '';
  position: absolute;
  bottom: 6px; right: 6px;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid white;
}

/* ---------- Auth user-menu ---------- */
.auth-user-menu {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 240px;
  padding: 4px;
  font-family: var(--font);
}
.auth-menu-section {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.auth-menu-section:last-child { border-bottom: none; }
.auth-menu-email {
  font-size: 12px;
  color: var(--text-light, #6b7280);
  padding: 4px 10px;
  word-break: break-all;
}
.auth-menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light, #6b7280);
  padding: 4px 10px;
  margin-bottom: 2px;
}
.auth-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text, #111827);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.auth-menu-item:hover { background: #f3f4f6; }
.auth-menu-role {
  font-size: 11px;
  color: var(--text-light, #6b7280);
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}
.auth-menu-danger { color: #b91c1c; }
.auth-menu-danger:hover { background: #fef2f2; }
.auth-menu-active { background: #eef2ff; font-weight: 600; }
.auth-menu-active:hover { background: #e0e7ff !important; }

/* Demo-mode banner */
/* Export-stap schema-kiezer */
.export-schema-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 280px; overflow-y: auto;
}
.export-schema-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.export-schema-row:hover {
  background: #f9fafb;
  border-color: #3D2EFF;
}
.export-schema-row.active {
  background: #eef2ff;
  border-color: #3D2EFF;
  box-shadow: 0 0 0 2px rgba(79,70,229,0.15);
}
.export-schema-name { font-weight: 600; font-size: 14px; color: #111827; }
.export-schema-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.export-schema-status {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: #374151;
}
.export-schema-status.definitief { background: #dcfce7; color: #166534; }
.export-schema-status.archived { background: #e0e7ff; color: #3730a3; }
.export-schema-check { color: #3D2EFF; font-weight: 700; font-size: 16px; }
.export-selected-info {
  margin-top: 14px;
  padding: 10px 14px;
  background: #ecfdf5;
  border: 1px solid #86efac;
  border-radius: 8px;
  font-size: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.export-selected-label { color: #047857; font-weight: 500; }

.demo-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
body:has(.demo-banner) { padding-top: 34px; }
body:has(.demo-banner) .topbar { top: 34px; }

.auth-invite-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #047857; color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font-family: var(--font); font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999; pointer-events: none;
  max-width: 420px;
}
.auth-invite-toast.visible {
  opacity: 1; transform: translateY(0);
}

/* ---------- Leden & uitnodigingen (main app settings) ---------- */
.leden-list {
  display: flex; flex-direction: column; gap: 6px;
}
.leden-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
}
.leden-row-email { font-weight: 500; color: #111827; word-break: break-all; }
.leden-row-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.leden-role-select {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
}
.leden-row-action {
  background: transparent; border: none;
  color: #b91c1c; cursor: pointer;
  font-size: 12px; padding: 4px 8px;
  font-family: inherit;
}
.leden-row-action:hover { text-decoration: underline; }
.leden-row-action.neutral { color: #3D2EFF; }
.leden-row-action:disabled { color: #9ca3af; cursor: not-allowed; text-decoration: none; }
.login-modal h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.login-modal .set-hint {
  margin-bottom: 20px;
  line-height: 1.5;
}
.login-modal .form-field {
  text-align: left;
  margin-bottom: 12px;
}
.login-modal .form-field input {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--brand-radius, 10px) !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
}
.login-modal .form-field input:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.login-actions {
  margin-top: 16px;
}
.login-actions .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 13px 20px !important;
  font-size: 14px !important;
}
.login-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--error);
  min-height: 16px;
}

/* ============ SYNC STATUS ============ */
.sync-status {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  z-index: 500;
  box-shadow: var(--card-shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s;
  pointer-events: none;
}
.sync-status.visible {
  opacity: 1;
  transform: translateY(0);
}
.sync-status.sync-ok {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid var(--accent);
}
.sync-status.sync-syncing {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary);
}
.sync-status.sync-error {
  background: #fee2e2;
  color: var(--error);
  border: 1px solid var(--error);
}
.sync-status.sync-neutral {
  background: var(--bg-sidebar);
  color: var(--text-light);
  border: 1px solid var(--border);
}

.sync-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============ PROGRESS OVERLAY ============ */
.pt-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 31, 0.55);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.pt-progress-overlay.hidden { display: none; }
.pt-progress-box {
  background: white;
  border-radius: 16px;
  padding: 32px 40px;
  min-width: 320px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
  margin: 0 auto 16px;
}
.pt-progress-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.pt-progress-sub {
  font-size: 13px;
  color: var(--text-light);
  min-height: 20px;
}

/* ============ IMPORT CHOOSER MODAL ============ */
.import-chooser-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 31, 0.5);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.import-chooser-modal.hidden { display: none; }
.import-chooser-content {
  background: white;
  border-radius: 16px;
  padding: 36px 40px;
  max-width: 800px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.import-chooser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.import-chooser-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.import-chooser-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.import-chooser-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  padding: 24px 14px !important;
  min-height: 150px;
  background: var(--bg-sidebar) !important;
  border: 2px solid var(--border) !important;
  border-radius: 14px !important;
  cursor: pointer;
  font-family: var(--font) !important;
  text-align: center;
  color: var(--text) !important;
  transition: all 0.15s;
}
.import-chooser-btn:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-2px);
}
.import-chooser-btn strong {
  font-size: 15px;
  font-weight: 700;
}
.import-chooser-btn span {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.35;
}
/* "In ontwikkeling"-badge bij Visio-import: nog niet 100% layout-stabiel,
 * maar we willen 'm wel beschikbaar maken voor early-testers. */
.import-chooser-dev-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #fff3cd;
  color: #8a6500;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* ============ LOGO UPLOAD ============ */
.logo-upload-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}
.logo-preview {
  width: 120px;
  height: 120px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-upload-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============ MIC DEVICE SELECTOR ============ */
.mic-device-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 280px;
  max-width: 400px;
  z-index: 500;
}
.mic-device-menu.hidden { display: none; }
.mic-device-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px 8px;
}
.mic-device-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
}
.mic-device-item:hover { background: var(--bg-sidebar); }
.mic-device-item.selected {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.mic-device-item .check {
  width: 14px;
  display: inline-block;
  color: var(--primary);
}
.mic-device-actions {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}
.mic-device-actions button {
  flex: 1;
  padding: 6px 10px !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  background: white !important;
  border-radius: 6px !important;
  cursor: pointer;
  color: var(--text-light) !important;
}
.mic-device-actions button:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.mic-btn-wrapper {
  position: relative;
  display: inline-block;
}
.mic-level-bar {
  height: 8px;
  background: var(--bg-sidebar);
  border-radius: 4px;
  margin: 8px;
  overflow: hidden;
}
.mic-level-bar.hidden { display: none; }
.mic-level-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  width: 0%;
  transition: width 0.05s linear;
}
.mic-device-toggle {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: 2px solid white;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* ============ VALIDATION STATUS ============ */
.validation-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.validation-status.approved {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.validation-status .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.validation-status .dot.pending { background: var(--warning); }
.validation-status .dot.approved { background: var(--accent); }

/* ============ EXPORT GRID ============ */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.export-card {
  padding: 28px 20px;
  border: 2px solid var(--border);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
  box-shadow: var(--card-shadow);
}
.export-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb, 51, 0, 255), 0.1);
}
.export-card .icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.export-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.export-card p {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
}
.export-card.primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.export-card.primary:hover { background: var(--primary-dark); }
.export-card.primary h4 { color: white; }
.export-card.primary p { color: rgba(255,255,255,0.7); }

/* ============ EXPORT COMPATIBILITY MATRIX ============ */
.export-compat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.export-compat-table th,
.export-compat-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.export-compat-table th {
  font-weight: 600;
  color: var(--text);
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04));
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.export-compat-table td:first-child,
.export-compat-table th:first-child {
  text-align: left;
}
.export-compat-table td.ok { color: #15803d; font-weight: 600; }
.export-compat-table td.no { color: #b91c1c; }
.export-compat-table td.partial { color: #ca8a04; }
.export-compat-table td.na { color: var(--text-light); }
.export-compat-table tbody tr:hover { background: rgba(0,0,0,0.02); }
.export-compat-table .muted-hint {
  display: block;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}

/* ============ CHECKLIST ============ */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.checklist label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.checklist input { accent-color: var(--primary); }

/* ============ PROJECT SWITCHER ============ */
.project-switcher { position: relative; margin-left: 14px; }
.project-switcher-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  max-width: 240px;
}
.project-switcher-btn:hover { border-color: var(--primary); background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04)); }
.project-switcher-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.project-switcher-caret { font-size: 10px; color: var(--text-light); }
.project-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 8px;
}
.project-switcher-header {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.8px;
}
.project-switcher-list { max-height: 320px; overflow-y: auto; }
.project-switcher-empty { padding: 10px; font-size: 12px; color: var(--text-light); margin: 0; }
.project-switcher-item {
  display: flex; align-items: center;
  width: 100%;
  border-radius: 8px;
  transition: background 0.15s;
}
.project-switcher-item:hover { background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04)); }
.project-switcher-item.active { background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.08)); }
.project-switcher-item:hover .project-switcher-item-edit { opacity: 0.7; }
.project-switcher-item-main-btn {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  text-align: left;
  cursor: pointer;
}
.project-switcher-item-edit {
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.15s;
}
.project-switcher-item:hover .project-switcher-item-edit { opacity: 0.7; }
.project-switcher-item-edit:hover { opacity: 1 !important; background: rgba(0,0,0,0.06); }
.project-switcher-item:hover { background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04)); }
.project-switcher-item.active { background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.08)); }
.project-switcher-item:hover .project-switcher-item-edit { opacity: 0.7; }
.project-switcher-item-icon { font-size: 18px; }
.project-switcher-item-main { flex: 1; display: flex; flex-direction: column; }
.project-switcher-item-name { font-weight: 600; font-size: 13px; color: var(--text); }
.project-switcher-item-klant { font-size: 11px; color: var(--text-light); }
.project-switcher-item-check { color: var(--primary); font-weight: 700; }

/* Delete-knop per project — symmetrisch met edit-knop, alleen zichtbaar bij hover. */
.project-switcher-item-delete {
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.project-switcher-item:hover .project-switcher-item-delete { opacity: 0.7; }
.project-switcher-item-delete:hover {
  opacity: 1 !important;
  background: rgba(220, 38, 38, 0.10);
}

/* Klant-groep header — collapsable per klant in de project-switcher.
   Actieve klant krijgt een lichte primary-tint zodat duidelijk is welke
   klant momenteel actief is. */
.project-switcher-klant-group { margin-bottom: 4px; }
.project-switcher-klant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light, #6b7280);
  text-align: left;
}
.project-switcher-klant-header:hover { background: rgba(17, 24, 39, 0.04); }
.project-switcher-klant-group.is-active .project-switcher-klant-header {
  color: var(--primary);
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.06));
}
.project-switcher-klant-chev {
  display: inline-block;
  width: 12px;
  font-size: 10px;
  color: var(--text-light, #6b7280);
}
.project-switcher-klant-name { flex: 1; }
.project-switcher-klant-count {
  background: rgba(17, 24, 39, 0.06);
  color: var(--text);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
.project-switcher-klant-group.is-active .project-switcher-klant-count {
  background: var(--primary);
  color: var(--on-primary, #fff);
}
.project-switcher-add {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
}
.project-switcher-add:hover { background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04)); }

/* ============ PROJECT MODAL ============ */
.project-modal-content { max-width: 620px; }
.project-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
/* Taal-keuze in "Nieuw project"-modal (Fase A van content-meertaligheid) */
.lang-pick {
  display: flex; gap: 8px; margin-top: 4px;
}
.lang-pick-opt {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 2px solid var(--border, #e2e8f0);
  border-radius: 8px; cursor: pointer; background: white;
  font-size: 13px; transition: all 0.15s;
}
.lang-pick-opt:hover { border-color: var(--primary, #6366f1); background: #f8fafc; }
.lang-pick-opt input[type="radio"] { margin: 0; cursor: pointer; }
.lang-pick-opt:has(input:checked) {
  border-color: var(--primary, #6366f1);
  background: var(--primary-soft, #eef2ff);
  font-weight: 600;
}

.project-form-fieldset {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.project-form-fieldset legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}
.project-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.project-form .form-field label { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 4px; font-weight: 600; }
.project-form .form-field input,
.project-form .form-field select,
.project-form .form-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.project-form .form-field textarea { resize: vertical; min-height: 70px; }
.project-form .modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ============ PROCESMODEL GENEREREN (STAP 1) ============ */
.processmodel-empty {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.processmodel-empty-inner {
  max-width: 720px;
  width: 100%;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
}
.processmodel-empty-icon { font-size: 48px; margin-bottom: 14px; }
.processmodel-empty h3 { margin-top: 0; }
.processmodel-form { text-align: left; margin-top: 18px; }
.processmodel-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.processmodel-form .form-field label { display: block; font-size: 12px; color: var(--text-light); margin-bottom: 4px; font-weight: 600; }
.processmodel-form .form-field input,
.processmodel-form .form-field select,
.processmodel-form .form-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.processmodel-form .form-field textarea { resize: vertical; min-height: 90px; }
.processmodel-form .form-actions { display: flex; justify-content: center; margin-top: 16px; }
.processmodel-progress {
  margin-top: 20px;
  padding: 20px;
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04));
  border-radius: 12px;
  text-align: center;
}
.processmodel-progress-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: pm-spin 0.8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
.processmodel-progress-text { font-weight: 600; font-size: 14px; margin-bottom: 4px; }

/* ============ STAGE FLOW (scan / scanning / review / generating) ============ */
.pm-stage { width: 100%; }
.pm-scan-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 560px;
  margin: 20px auto 0;
}
.pm-scan-form input {
  flex: 1 1 280px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
}
.pm-scan-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 51, 0, 255), 0.12);
}
.pm-scan-form button {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 14px;
}
.link-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { color: var(--primary-dark, #2200cc); }

/* Activity-lijst tijdens scan */
.pm-activity {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  margin: 20px auto 0;
  text-align: left;
}
.pm-activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.pm-activity-item.done { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.pm-activity-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(var(--primary-rgb, 51, 0, 255), 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pm-spin 0.8s linear infinite;
}

/* Sources-lijstje onder review-form */
.pm-sources {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  font-size: 12px;
}
.pm-sources ul { margin: 6px 0 0; padding-left: 20px; }
.pm-sources a { color: var(--primary); text-decoration: none; }
.pm-sources a:hover { text-decoration: underline; }

/* AI-bevindingen-blok in review-stage — uitgebreide samenvatting van scan */
.pm-ai-summary {
  margin-top: 18px;
  padding: 16px 18px;
  background: #f7f8fa;
  border: 1px solid var(--border, #e5e7f0);
  border-radius: 8px;
}
.pm-ai-summary h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text, #111827);
}
.pm-ai-block {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.pm-ai-block:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.pm-ai-block > strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1f2937);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.pm-ai-list { margin: 0; padding-left: 20px; font-size: 13px; color: #374151; }
.pm-ai-list li { margin-bottom: 3px; }
.pm-ai-value { font-size: 13px; color: #374151; }
.pm-ai-mvd { font-size: 13px; color: #374151; }
.pm-ai-mvd p { margin: 0 0 6px; }
.pm-ai-stake { font-size: 13px; color: #374151; }
.pm-ai-stake p { margin: 0 0 4px; }
.pm-ai-empty { color: #9ca3af; font-style: italic; font-size: 12px; }
.pm-ai-summary textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7f0);
  border-radius: 6px;
  resize: vertical;
}
.pm-ai-select {
  width: 100%;
  max-width: 360px;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border, #e5e7f0);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

/* ============ PROCESMODEL HERO (nieuwe stijl, Human in the Lead-achtig) ============ */
.pm-hero {
  padding: 22px 26px 20px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: var(--hero-gradient, linear-gradient(135deg, rgba(var(--primary-rgb, 51, 0, 255), 0.08) 0%, rgba(var(--accent-rgb, 139, 92, 246), 0.06) 55%, rgba(var(--primary-rgb, 51, 0, 255), 0.04) 100%));
  border: 1px solid var(--border);
}
.pm-hero-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.pm-hero-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text);
}
.pm-hero-actions-top { display: flex; gap: 6px; }
.pm-export-mini {
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.pm-export-mini:hover { border-color: var(--primary); color: var(--primary); }
.pm-export-mini.pm-ai-icons {
  background: linear-gradient(135deg, #ff8a00, #e52e71);
  color: white;
  border: none;
}
.pm-export-mini.pm-ai-icons:hover {
  background: linear-gradient(135deg, #ff7a00, #d52060);
  color: white;
}
.pm-export-mini.pm-ai-icons:disabled { opacity: 0.7; cursor: wait; }

/* Toggle-knop "Iconen tonen/verbergen" — active state wanneer iconen uit staan */
#btn-toggle-icons.active {
  background: rgba(0,0,0,0.08);
  color: var(--text);
  border-color: rgba(0,0,0,0.15);
}

/* Cleane-view: alle iconen in het procesmodel verbergen */
.pm-hide-icons .pm-cluster-icon,
.pm-hide-icons .pm-bp-icon,
.pm-hide-icons .pm-werkproces-icon,
.pm-hide-icons .pm-detail-icon {
  display: none !important;
}
/* Layout-compensatie: zonder cluster-icon krijgt de titel meer ruimte */
.pm-hide-icons .pm-cluster-head { padding-left: 14px; }
.pm-hide-icons .pm-detail-hero { gap: 0; }
.pm-hide-icons .pm-werkproces-head { gap: 0; }
.pm-hero-title {
  margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--text);
}
.pm-hero-meta { font-size: 12px; color: var(--text-light); margin-bottom: 14px; }
.pm-hero-counters {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.pm-counter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  font-size: 13px;
  color: var(--text);
}
.pm-counter strong { font-weight: 700; color: var(--primary); }
.pm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.pm-dot-gov  { background: #3b82f6; }
.pm-dot-prim { background: var(--primary); }
.pm-dot-supp { background: #f97316; }
.pm-progress-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; }
.pm-progress-label { color: var(--text-light); }
.pm-progress-value { font-weight: 600; color: var(--text); }
.pm-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.6);
  border-radius: 3px;
  overflow: hidden;
}
.pm-progress-fill {
  height: 100%;
  background: var(--primary-gradient, linear-gradient(90deg, var(--primary), var(--accent, #8b5cf6)));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ============ PROCESMODEL CONTROLS (view-toggle + filters + actions) ============ */
.pm-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 18px;
}
.pm-view-toggle {
  display: inline-flex;
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.05));
  padding: 3px;
  border-radius: 10px;
}
.pm-view-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.15s;
}
.pm-view-btn.active {
  background: var(--primary-gradient, linear-gradient(135deg, var(--primary), var(--accent, #8b5cf6)));
  color: white;
}
.pm-band-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pm-band-filters-label { font-size: 12px; color: var(--text-light); margin-right: 4px; }
.pm-band-chip {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.55;
}
.pm-band-chip.active { opacity: 1; color: white; }
.pm-band-chip-gov.active  { background: #3b82f6; }
.pm-band-chip-prim.active { background: var(--primary); }
.pm-band-chip-supp.active { background: #f97316; }
/* margin-left: auto verwijderd — duwde de hele actiebalk naar de rechterzijde
   van pm-controls (wrap-rij 2), waardoor Exporteren tegen de viewport-rand
   plakte en Praat-met-AI ergens in het midden begon. Nu staat de rij links
   uitgelijnd net als de filter-rij erboven. */
.pm-controls .processmodel-actions { width: 100%; margin-left: 0; }

/* ============ E2E-KETENS VIEW ============ */
.pm-e2e-wrap { display: flex; flex-direction: column; gap: 18px; }
.pm-e2e-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 4px;
}
.pm-e2e-header-main h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.pm-e2e-header-main .set-hint { margin: 0; }

.pm-e2e-empty {
  background: white;
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 50px 30px;
  text-align: center;
  max-width: 640px;
  margin: 40px auto;
}
.pm-e2e-empty-icon { font-size: 48px; margin-bottom: 12px; }
.pm-e2e-empty h3 { margin: 0 0 10px 0; font-size: 18px; font-weight: 700; color: var(--text); }
.pm-e2e-empty p { margin: 0 0 20px 0; color: var(--text-light); font-size: 13px; line-height: 1.55; }

.pm-e2e-list { display: flex; flex-direction: column; gap: 14px; }

.pm-e2e-chain {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s;
}
.pm-e2e-chain:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

.pm-e2e-chain-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pm-e2e-chain-title { display: flex; align-items: center; gap: 12px; }
.pm-e2e-chain-num {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.pm-e2e-chain-title h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.pm-e2e-chain-trigout {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.pm-e2e-pill {
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
}
.pm-e2e-pill strong { font-weight: 600; margin-right: 3px; }
.pm-e2e-pill-trigger { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.pm-e2e-pill-outcome { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.pm-e2e-arrow-sm { color: var(--text-light); font-weight: 600; }

.pm-e2e-chain-desc {
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
}

.pm-e2e-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pm-e2e-arrow {
  display: flex;
  align-items: center;
  color: var(--text-light);
  font-weight: 700;
  font-size: 16px;
}
.pm-e2e-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 160px;
  max-width: 240px;
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  text-align: left;
  font-family: inherit;
}
.pm-e2e-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.pm-e2e-step-n {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6;
  color: var(--text);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pm-e2e-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-e2e-step-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pm-e2e-step-ref {
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-e2e-step-level {
  display: inline-block;
  background: #f3f4f6;
  color: var(--text-light);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 3px;
  text-transform: lowercase;
}
.pm-e2e-part-gov  { border-left-color: #3b82f6; }
.pm-e2e-part-prim { border-left-color: var(--primary); }
.pm-e2e-part-supp { border-left-color: #f97316; }
.pm-e2e-part-missing { border-left-color: #d1d5db; opacity: 0.6; }

/* ============ SCHEMA-VIEW: banners + cluster-cards ============ */
.pm-schema { display: flex; flex-direction: column; gap: 18px; }
.pm-band {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.pm-band-governing  { background: rgba(59,130,246,0.04);  border-color: rgba(59,130,246,0.18); }
.pm-band-primary    { background: rgba(var(--primary-rgb, 51, 0, 255), 0.03);    border-color: rgba(var(--primary-rgb, 51, 0, 255), 0.14); }
.pm-band-supporting { background: rgba(249,115,22,0.04);  border-color: rgba(249,115,22,0.18); }
.pm-band-header {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.pm-band-title {
  padding: 7px 22px;
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.pm-band-governing  .pm-band-title { background: #3b82f6; }
.pm-band-primary    .pm-band-title { background: var(--primary); }
.pm-band-supporting .pm-band-title { background: #f97316; }
.pm-band-add {
  padding: 7px 14px;
  background: white;
  border: 1px dashed var(--border);
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
}
.pm-band-add:hover { border-color: var(--primary); color: var(--primary); }
.pm-cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.pm-cluster {
  display: flex; flex-direction: column;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pm-cluster-head {
  padding: 12px 14px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Vaste min-height zodat alle cluster-headers in een rij even hoog zijn,
     ongeacht of de naam op 1, 2 of 3 regels valt. 104px dekt comfortabel
     pill (~20px) + 3 regels titel (~55px) + verticale padding (24px) +
     wat lucht. Op smallere viewports (~280px breed) wraps een lange naam
     soms naar 3 regels — die zat boven de oude 84px en gaf ongelijkheid. */
  min-height: 104px;
  box-sizing: border-box;
}
.pm-band-governing  .pm-cluster-head { background: #3b82f6; }
.pm-band-primary    .pm-cluster-head { background: var(--primary); }
.pm-band-supporting .pm-cluster-head { background: #f97316; }
.pm-cluster-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
}
.pm-cluster-titlewrap { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-cluster-levelpill {
  display: inline-block;
  width: fit-content;
  padding: 2px 8px;
  background: rgba(255,255,255,0.22);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
}
.pm-cluster-title { line-height: 1.3; }
.pm-cluster-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; }
.pm-cluster-desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0 0 12px;
}
.pm-bp-list { display: flex; flex-direction: column; gap: 6px; }
.pm-bp-item {
  display: flex;
  align-items: flex-start;       /* icoon + pijl bovenaan als naam wrapt */
  gap: 10px;
  padding: 9px 10px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
  font-family: 'Outfit', sans-serif;
  /* Button-text wrapt default niet — daarom expliciet aanzetten zodat lange
     bedrijfsproces-namen ("Dienstritmanagementen voertuiginzet") netjes
     binnen de card-rand blijven en op meerdere regels mogen breken. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.pm-bp-item:hover {
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.06));
  border-color: var(--primary);
  transform: translateX(2px);
}
.pm-bp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.1));
  color: var(--primary);
  border-radius: 5px;
  font-size: 11px;
  flex-shrink: 0;
}
.pm-band-governing .pm-bp-icon { background: rgba(59,130,246,0.14); color: #3b82f6; }
.pm-band-supporting .pm-bp-icon { background: rgba(249,115,22,0.14); color: #f97316; }
.pm-bp-textwrap { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.pm-bp-levelpill {
  display: inline-block;
  width: fit-content;
  padding: 1px 7px;
  background: rgba(0,0,0,0.07);
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-light);
}
.pm-bp-name {
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pm-bp-arrow {
  color: var(--text-light);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;               /* lijn licht uit met de pill bovenaan */
}
.pm-cluster-add-bp {
  margin-top: 10px;
  padding: 9px;
  background: transparent;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--text-light);
  cursor: pointer;
}
.pm-cluster-add-bp:hover { border-color: var(--primary); color: var(--primary); }

/* ============ BEDRIJFSPROCES-DETAIL-PAGINA ============ */
.pm-detail-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 13px; color: var(--text-light);
  margin-bottom: 16px;
}
.pm-detail-breadcrumb a { color: var(--primary); text-decoration: none; }
.pm-detail-breadcrumb a:hover { text-decoration: underline; }
.pm-detail-breadcrumb .sep { color: rgba(0,0,0,0.25); }
.pm-detail-breadcrumb strong { color: var(--text); font-weight: 600; }
.pm-detail-hero {
  padding: 26px 28px;
  margin-bottom: 28px;
  border-radius: 18px;
  background: var(--hero-gradient-detail, linear-gradient(135deg, rgba(var(--primary-rgb, 51, 0, 255), 0.10) 0%, rgba(var(--accent-rgb, 139, 92, 246), 0.08) 100%));
  display: flex; gap: 18px;
  align-items: flex-start;
}
.pm-detail-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--primary-gradient, linear-gradient(135deg, var(--primary), var(--accent, #8b5cf6)));
  color: white;
  border-radius: 12px;
  font-size: 24px;
  flex-shrink: 0;
}
.pm-detail-main { flex: 1; min-width: 0; }
.pm-detail-pills { display: flex; gap: 6px; margin-bottom: 8px; }
.pm-detail-pill {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: white;
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.06);
}
.pm-detail-title { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--text); }
.pm-detail-desc { color: var(--text-light); font-size: 14px; line-height: 1.6; }
.pm-detail-count {
  padding: 7px 16px;
  background: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
.pm-detail-count strong { color: var(--primary); font-size: 16px; }

.pm-werkproces-section-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin: 0 0 14px;
}
.pm-werkproces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.pm-werkproces {
  padding: 18px 20px;
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.pm-werkproces-head { display: flex; align-items: flex-start; gap: 12px; }
.pm-werkproces-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--primary-gradient, linear-gradient(135deg, var(--primary), var(--accent, #8b5cf6)));
  color: white;
  border-radius: 9px;
  font-size: 16px;
  flex-shrink: 0;
}
.pm-werkproces-headtext { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-werkproces-levelpill {
  display: inline-block;
  width: fit-content;
  padding: 2px 8px;
  background: rgba(var(--primary-rgb, 51, 0, 255), 0.1);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary);
}
.pm-werkproces-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  display: flex;
  align-items: flex-start;       /* edit-knop blijft bovenaan als titel wrapt */
  gap: 6px;
  min-width: 0;                  /* sta toe dat flex-child kleiner wordt dan content */
}
/* Klikbare proces-namen — voelen als een link, drillen door naar volgend niveau.
   white-space + overflow-wrap zorgen dat lange procesnamen netjes wrappen
   binnen de card-breedte i.p.v. door de rand heen te schieten. min-width:0
   + flex:1 zorgen dat de button mag krimpen tot de beschikbare ruimte. */
.pm-title-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;       /* breekt ook in zeer lange woorden zonder spaties */
}
.pm-title-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.pm-title-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Bp-name binnen schema-view: onderstrepen bij hover voor klikbare cue */
.pm-bp-item:hover .pm-bp-name { text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; }
/* Cluster-title-link: zit op gekleurde header, dus witte hover */
.pm-title-link-dark:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.8);
}
.pm-werkproces-desc { margin: 0; font-size: 13px; color: var(--text-light); line-height: 1.5; }
.pm-werkproces-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.pm-werkproces-status {
  padding: 3px 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
}
.pm-werkproces-status.vrij { background: rgba(0,0,0,0.05); color: var(--text-light); }
.pm-werkproces-status.uitgewerkt { background: rgba(34,197,94,0.12); color: #15803d; }
.pm-werkproces-action {
  background: transparent; border: none;
  color: var(--primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pm-werkproces-action:hover { text-decoration: underline; }

/* ============ INLINE EDIT-KNOPPEN in procesmodel ============ */
.pm-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  vertical-align: middle;
}
/* Alle edit-knoppen verschijnen pas bij hover op de parent-container */
.pm-cluster:hover .pm-edit-btn,
.pm-bp-item-wrap:hover .pm-edit-btn,
.pm-detail-hero:hover .pm-edit-btn,
.pm-werkproces:hover .pm-edit-btn,
.pm-desc-empty .pm-edit-btn {
  opacity: 0.65;
}
.pm-edit-btn:hover {
  opacity: 1 !important;
  background: rgba(0,0,0,0.08);
}
/* Edit-knop in cluster-header (witte tekst op gekleurde background) */
.pm-edit-on-dark {
  filter: brightness(1.3);
}
.pm-cluster:hover .pm-edit-on-dark { opacity: 0.85; }
.pm-edit-on-dark:hover { background: rgba(255,255,255,0.2) !important; }

/* Edit-knop rechts naast een bp-item */
.pm-bp-item-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pm-bp-item-wrap .pm-bp-item { flex: 1; }
.pm-edit-on-item {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
}
.pm-bp-item-wrap:hover .pm-edit-on-item { opacity: 0.7; }

/* "Beschrijving toevoegen"-knop wanneer description leeg is */
.pm-desc-empty {
  margin: 6px 0 0 !important;
  font-size: 11px !important;
  color: var(--text-light) !important;
  font-style: italic;
}
.pm-desc-empty .pm-edit-btn {
  width: auto;
  padding: 3px 10px;
  background: rgba(0,0,0,0.04);
  font-size: 11px;
  font-style: normal;
  color: var(--text-light);
}
.pm-desc-empty .pm-edit-btn:hover { color: var(--primary); background: var(--primary-soft); }

/* ============ PROCESMODEL — TOEVOEGEN & VERWIJDEREN ============ */
/* Prullenbak-knop: zelfde patroon als pm-edit-btn (verschijnt bij hover) */
.pm-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  vertical-align: middle;
}
.pm-cluster:hover .pm-delete-btn,
.pm-bp-item-wrap:hover .pm-delete-btn,
.pm-detail-hero:hover .pm-delete-btn,
.pm-werkproces:hover .pm-delete-btn {
  opacity: 0.65;
}
.pm-delete-btn:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.15);
}
.pm-delete-on-dark {
  filter: brightness(1.3);
}
.pm-cluster:hover .pm-delete-on-dark { opacity: 0.85; }
.pm-delete-on-dark:hover { background: rgba(255,255,255,0.2) !important; }
.pm-delete-on-item {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
}
.pm-bp-item-wrap:hover .pm-delete-on-item { opacity: 0.7; }

/* Gestippeld "+ Cluster toevoegen"-blok in de cluster-grid */
.pm-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  padding: 24px;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  color: var(--text-light);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pm-add-card:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.pm-add-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.pm-add-card:hover .pm-add-card-icon {
  background: var(--primary);
  color: white;
}
.pm-add-card-label {
  font-size: 13px;
}

/* Inline "+ Bedrijfsproces toevoegen"-rij onderaan de bp-list binnen een cluster */
.pm-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.pm-add-row:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.pm-add-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
}
.pm-add-row:hover .pm-add-row-icon {
  background: var(--primary);
  color: white;
}

/* Werkproces-add-card iets compacter dan cluster-add-card */
.pm-add-card-wp {
  min-height: 140px;
}

/* ============ BROWN PAPER SESSIE MODAL ============ */
.bp-modal-content { max-width: 780px; }
.bp-upload-area {
  margin-top: 14px;
  padding: 30px 20px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.bp-upload-area.drag-over { border-color: var(--primary); background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04)); }
.bp-upload-btn {
  padding: 10px 22px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.bp-upload-btn:hover { background: var(--primary-dark, #2200cc); }
.bp-preview {
  margin-top: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
  text-align: center;
}
.bp-preview img { max-width: 100%; max-height: 260px; border-radius: 8px; object-fit: contain; }
.bp-preview-info { font-size: 12px; color: var(--text-light); margin-top: 8px; }

.bp-summary {
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.05));
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.bp-warn-banner {
  padding: 10px 14px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 8px;
  font-size: 13px;
  color: #9a3412;
  margin-bottom: 12px;
}
.bp-meta {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.bp-postits-table {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
.bp-postit-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.bp-postit-row.low-conf { background: #fff7ed; border-color: #fdba74; }
.bp-color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); }
.bp-text-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  background: rgba(0,0,0,0.02);
}
.bp-text-input:focus { outline: none; background: white; border-color: var(--primary); }
.bp-col-select, .bp-row-select {
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  max-width: 140px;
}
.bp-low-badge {
  padding: 3px 8px;
  background: #fb923c;
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.bp-ok-badge {
  padding: 3px 8px;
  background: rgba(34,197,94,0.15);
  color: #15803d;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.bp-del-btn {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-light);
}
.bp-del-btn:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }

.bp-standalone { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.bp-note {
  padding: 8px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  font-size: 13px;
  display: flex; justify-content: space-between; gap: 10px;
}
.bp-note.low-conf { background: #fff7ed; border: 1px solid #fdba74; }
.bp-note-text { flex: 1; }

/* ============ WORKSHOP-FEATURE ============ */

/* Workshop-knoppen in procesmodel */
.pm-werkproces-actions { display: flex; gap: 6px; align-items: center; }
.pm-werkproces-workshop {
  padding: 4px 10px;
  background: var(--primary-soft);
  border: 1px solid rgba(var(--primary-rgb, 51, 0, 255), 0.2);
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.pm-werkproces-workshop:hover { background: var(--primary); color: white; }

.pm-detail-sidecol { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; align-items: flex-end; }
.pm-detail-workshop {
  padding: 8px 14px;
  background: var(--primary-gradient, linear-gradient(135deg, var(--primary), var(--accent)));
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pm-detail-workshop:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25); }

/* Setup-modal */
.ws-modal-content { max-width: 780px; max-height: 88vh; overflow-y: auto; }
.ws-form fieldset {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ws-form legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ws-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ws-form .form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-light); margin-bottom: 4px; }
.ws-form .form-field input,
.ws-form .form-field select,
.ws-form .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.ws-form .form-field textarea { resize: vertical; min-height: 60px; }

/* Preview */
.ws-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
}
.ws-slide-thumb {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ws-slide-thumb:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); transition: all 0.15s; }
.ws-thumb-header {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  color: white;
}
.ws-thumb-logo { max-height: 20px; max-width: 50px; background: white; padding: 2px; border-radius: 3px; }
.ws-thumb-nr { font-size: 10px; font-weight: 700; opacity: 0.8; }
.ws-thumb-body { padding: 10px; flex: 1; min-height: 140px; }
.ws-thumb-body h4 { margin: 0 0 6px; font-size: 12px; line-height: 1.3; }
.ws-thumb-body ul, .ws-thumb-body ol { margin: 0 0 6px 14px; padding: 0; font-size: 10px; line-height: 1.4; }
.ws-thumb-body li { margin-bottom: 2px; }
.ws-prompts { display: flex; flex-direction: column; gap: 3px; }
.ws-prompt { background: #f3f4f6; padding: 4px 6px; border-radius: 4px; font-size: 10px; }
.ws-agenda, .ws-action { width: 100%; font-size: 10px; border-collapse: collapse; }
.ws-agenda th, .ws-action th { background: var(--primary-soft); padding: 3px 5px; text-align: left; color: var(--primary); }
.ws-agenda td, .ws-action td { padding: 3px 5px; border-bottom: 1px solid #eee; }
.ws-thumb-kind {
  padding: 4px 8px;
  font-size: 9px;
  color: var(--text-light);
  background: #fafafa;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-top: 1px solid var(--border);
}
.ws-slide-cover .ws-cover {
  background: #0A1F44 !important;
  color: white;
  padding: 24px 14px;
  min-height: 140px;
  border-left: 4px solid var(--primary);
  position: relative;
}
.ws-cover-label { font-size: 9px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; }
.ws-slide-cover .ws-cover h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.ws-slide-cover .ws-cover p { margin: 0; font-size: 11px; opacity: 0.8; }

/* Chapter-divider preview */
.ws-slide-chapter_divider .ws-divider {
  background: #0A1F44 !important;
  color: white;
  min-height: 140px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 4px solid var(--primary);
}
.ws-divider-num { font-size: 56px; font-weight: 800; line-height: 1; opacity: 0.55; }
.ws-divider-info { flex: 1; }
.ws-divider-label { font-size: 8px; font-weight: 700; letter-spacing: 2px; margin-bottom: 4px; }
.ws-divider-info h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: white; }
.ws-divider-info p { margin: 0; font-size: 10px; opacity: 0.75; line-height: 1.35; }

/* Pauze preview */
.ws-slide-break .ws-break {
  background: #fafafa;
  min-height: 140px;
  padding: 30px 14px;
  text-align: center;
}
.ws-slide-break .ws-break h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: 8px; color: #0A1F44; font-weight: 800; }
.ws-slide-break .ws-break p { margin: 0; font-size: 12px; color: #6B7280; }

/* Top-strip op content-slides */
.ws-thumb-topstrip { height: 3px; margin: -10px -10px 8px; }

/* Takeaway-regel */
.ws-takeaway {
  padding: 4px 8px;
  margin: 0 0 8px;
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  background: rgba(0,0,0,0.02);
}

/* Rules met icons */
.ws-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ws-rule {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 5px 6px;
  background: #f4f5f7;
  border-radius: 4px;
  font-size: 10px;
}
.ws-rule-icon { font-size: 13px; line-height: 1; flex-shrink: 0; }
.ws-rule-text { line-height: 1.3; font-weight: 500; color: #0A1F44; }

/* Reflection 2-kolom */
.ws-reflection { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ws-reflection-col { border: 1px solid #e5e7eb; border-radius: 4px; overflow: hidden; }
.ws-reflection-head { color: white; padding: 3px 6px; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.ws-reflection-col:nth-child(2) .ws-reflection-head { background: #0A1F44 !important; }
.ws-reflection-col ul { margin: 4px 0 4px 14px !important; font-size: 9px !important; }

/* Action-list tabel — blauwe header */
.ws-action th { color: white !important; padding: 4px 6px !important; font-size: 10px; }

/* ============ BREADCRUMB STAP 2 "PROCES UITWERKEN" ============ */
.pm-uitwerken-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border: 1px solid rgba(var(--primary-rgb, 51, 0, 255), 0.14);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
}
.pm-uitwerken-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.pm-uitwerken-breadcrumb a:hover { background: white; text-decoration: underline; }
.pm-uitwerken-breadcrumb .pm-ub-sep { color: rgba(0,0,0,0.3); }
.pm-uitwerken-breadcrumb .pm-ub-current { color: var(--text); font-weight: 600; }
.pm-uitwerken-breadcrumb .pm-ub-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.pm-uitwerken-breadcrumb .pm-ub-clear:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* ============ NOTATIE-PICKER (Stap 2) ============ */
.notation-picker-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--card-shadow);
}
.notation-picker-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.notation-picker-header strong { font-size: 13px; font-weight: 700; color: var(--text); }
.notation-picker-hint { font-size: 12px; color: var(--text-light); }
.notation-picker-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notation-pick-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  background: var(--bg-sidebar);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}
.notation-pick-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.notation-pick-btn.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0, 60, 113), 0.08);
}
.notation-pick-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.notation-pick-label { display: flex; flex-direction: column; gap: 3px; }
.notation-pick-label strong { font-size: 14px; font-weight: 700; color: var(--text); }
.notation-pick-label em { font-size: 12px; color: var(--text-light); font-style: normal; line-height: 1.4; }

/* Flowchart-placeholder (Stap 4 + 5 bij notation=flowchart) */
.notation-placeholder {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px dashed #fcd34d;
  border-radius: 14px;
  padding: 40px 30px;
  margin: 20px 0;
  text-align: center;
  max-width: 680px;
}
.notation-placeholder-icon { font-size: 42px; margin-bottom: 12px; }
.notation-placeholder h3 { margin: 0 0 12px; font-size: 18px; color: #78350f; }
.notation-placeholder p { margin: 0 0 12px; font-size: 13px; color: #78350f; line-height: 1.55; }
.notation-placeholder ul { margin: 0 0 18px 20px; font-size: 13px; color: #78350f; line-height: 1.6; }
.notation-placeholder-actions { margin-top: 8px; }

/* Inline notatie-picker (compact, voor in empty-states) */
.notation-picker-inline {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 6px auto 20px;
  max-width: 520px;
}
.notation-picker-inline .notation-pick-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
}
.notation-picker-inline .notation-pick-icon { font-size: 18px; }
.notation-picker-inline .notation-pick-label strong { font-size: 13px; }
.notation-picker-inline .notation-pick-label em { font-size: 11px; }

/* Notatie-badges op werkvoorraad-kaarten */
.notation-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.6px;
  margin-left: 6px;
  vertical-align: middle;
}
.notation-badge.notation-bpmn { background: #e0e7ff; color: #3730a3; }
.notation-badge.notation-flowchart { background: #fef3c7; color: #92400e; }

/* ============================================================
 * EDITOR-THEMA'S — 4 smaken voor flowchart + BPMN editor
 * Gebruikt via <body data-editor-theme="clean|dark|colorful|handdrawn">
 * Elk thema definieert een set CSS-variabelen die onder in de flowchart/
 * BPMN-CSS gebruikt worden. Scope blijft ALLEEN de editor — de rest van
 * de app (wizard / procesmodel / workshop) erft het NIET.
 * ============================================================ */

/* CLEAN — default, licht, Figma/Linear-achtig */
body[data-editor-theme="clean"] {
  --editor-canvas-bg: #fafbfc;
  --editor-canvas-grid: #e5e7eb;
  --editor-panel-bg: #ffffff;
  --editor-panel-border: #e5e7eb;
  --editor-text: #0f172a;
  --editor-text-muted: #64748b;
  --editor-accent: #0ea5e9;
  /* Moderne soft drop-shadow (single-layer voor SVG filter-compat) */
  --editor-shape-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  --editor-shape-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.14);
  --editor-selection-color: #0ea5e9;
  --editor-selection-glow: 0 0 0 3px rgba(14, 165, 233, 0.2);
  --editor-edge-color: #475569;
  --editor-edge-width: 2;
  --editor-anim-duration: 180ms;
  --editor-anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --editor-font: 'Outfit', 'Inter', -apple-system, system-ui, sans-serif;
  --editor-shape-font: inherit;
  --editor-shape-radius: 10px;
}

/* DARK — deep navy canvas, neon accents, glow on selection */
body[data-editor-theme="dark"] {
  --editor-canvas-bg: #0a0f1e;
  --editor-canvas-grid: #1e293b;
  --editor-panel-bg: #111827;
  --editor-panel-border: #1f2937;
  --editor-text: #e2e8f0;
  --editor-text-muted: #94a3b8;
  --editor-accent: #38bdf8;
  --editor-shape-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  --editor-shape-shadow-hover: 0 0 18px rgba(56, 189, 248, 0.35);
  --editor-selection-color: #38bdf8;
  --editor-selection-glow: 0 0 0 3px rgba(56, 189, 248, 0.35), 0 0 20px rgba(56, 189, 248, 0.5);
  --editor-edge-color: #7dd3fc;
  --editor-edge-width: 2;
  --editor-anim-duration: 150ms;
  --editor-anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --editor-font: 'Outfit', 'Inter', system-ui, sans-serif;
  --editor-shape-font: inherit;
  --editor-shape-radius: 3px;
}

/* COLORFUL — Miro-achtig, pastels, expressief */
body[data-editor-theme="colorful"] {
  --editor-canvas-bg: #fdf4f9;
  --editor-canvas-grid: #fbcfe8;
  --editor-panel-bg: #ffffff;
  --editor-panel-border: #f5d0e0;
  --editor-text: #312e81;
  --editor-text-muted: #6b21a8;
  --editor-accent: #a855f7;
  --editor-shape-shadow: 0 6px 20px rgba(168, 85, 247, 0.2);
  --editor-shape-shadow-hover: 0 12px 28px rgba(168, 85, 247, 0.3);
  --editor-selection-color: #a855f7;
  --editor-selection-glow: 0 0 0 4px rgba(168, 85, 247, 0.3);
  --editor-edge-color: #7c3aed;
  --editor-edge-width: 2.5;
  --editor-anim-duration: 250ms;
  --editor-anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1);  /* bounce */
  --editor-font: 'Outfit', 'Inter', system-ui, sans-serif;
  --editor-shape-font: inherit;
  --editor-shape-radius: 14px;
}

/* HANDDRAWN — Excalidraw-achtig, warme tinten, schetserig */
body[data-editor-theme="handdrawn"] {
  --editor-canvas-bg: #fdf6e3;
  --editor-canvas-grid: #e8d9ae;
  --editor-panel-bg: #faf3d9;
  --editor-panel-border: #d4b896;
  --editor-text: #3d2f1f;
  --editor-text-muted: #7a5a3f;
  --editor-accent: #c2703a;
  --editor-shape-shadow: 2px 3px 0 rgba(61, 47, 31, 0.15);
  --editor-shape-shadow-hover: 3px 5px 0 rgba(61, 47, 31, 0.22);
  --editor-selection-color: #c2703a;
  --editor-selection-glow: 0 0 0 3px rgba(194, 112, 58, 0.3);
  --editor-edge-color: #6b4423;
  --editor-edge-width: 2.5;
  --editor-anim-duration: 220ms;
  --editor-anim-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --editor-font: 'Caveat', 'Kalam', cursive;
  --editor-shape-font: 'Caveat', 'Kalam', cursive;
  --editor-shape-radius: 8px;
}

/* ============ FLOWCHART EDITOR ============ */
.fc-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;  /* laat children scrollen/krimpen ipv overflow */
  background: var(--editor-panel-bg, white);
  border: 1px solid var(--editor-panel-border, var(--border));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--editor-font, inherit);
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-editor.fc-connect-mode .fc-canvas-wrap { cursor: crosshair; }

.fc-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--editor-panel-border, var(--border));
  background: var(--editor-panel-bg, #fafafa);
  flex-shrink: 0;
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-tb-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s;
  /* Flowchart-toolbar: tekst ALTIJD zwart, nooit veranderen */
  color: #000 !important;
}
.fc-tb-btn:hover { background: var(--primary-soft); border-color: var(--primary); color: #000 !important; }
.fc-tb-sep { width: 1px; background: var(--border); align-self: stretch; margin: 4px 4px; }

/* Primary action-button in flowchart-toolbar (Opslaan) */
.fc-tb-btn.fc-tb-btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.fc-tb-btn.fc-tb-btn-primary:hover {
  background: var(--primary-dark, #000) !important;
  color: #fff !important;
}

/* Save-indicator (toont wel/niet opgeslagen) */
.fc-save-indicator {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 500;
  white-space: nowrap;
  color: #000 !important;
}
.fc-save-indicator.dirty {
  background: #fef3c7;
  color: #92400e !important;
}
.fc-save-indicator.saved {
  background: #d1fae5;
  color: #065f46 !important;
}
.fc-tool-hint {
  font-size: 12px;
  color: var(--editor-text-muted, var(--text-light));
  margin-left: auto;
  font-style: italic;
}
body[data-editor-theme="dark"] .fc-tb-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
body[data-editor-theme="dark"] .fc-tb-btn:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #fff !important;
}
body[data-editor-theme="handdrawn"] .fc-tb-btn {
  font-family: 'Caveat', cursive !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.fc-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.fc-palette {
  width: 140px;
  flex-shrink: 0;
  border-right: 1px solid var(--editor-panel-border, var(--border));
  background: var(--editor-panel-bg, #fafafa);
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--editor-canvas-bg, white);
  border: 1px solid var(--editor-panel-border, var(--border));
  border-radius: var(--editor-shape-radius, 6px);
  cursor: grab;
  text-align: center;
  user-select: none;
  transition: all var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
  color: var(--editor-text, inherit);
}
.fc-palette-item:hover {
  border-color: var(--editor-accent, var(--primary));
  box-shadow: var(--editor-shape-shadow-hover, 0 2px 6px rgba(0,0,0,0.08));
  transform: translateY(-1px);
}
.fc-palette-item:active { cursor: grabbing; }
.fc-palette-preview { display: flex; align-items: center; justify-content: center; height: 36px; }
.fc-palette-label { font-size: 10px; font-weight: 600; color: var(--editor-text, var(--text)); line-height: 1.2; }

/* Palette-separator (tussen shapes en tools) */
.fc-palette-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}
/* Tool-item (Relatie tool) — iets andere accent-kleur */
.fc-palette-item.fc-palette-tool {
  border-style: dashed;
  cursor: pointer;
}
.fc-palette-item.fc-palette-tool:hover {
  background: #eff6ff;
  border-color: #0ea5e9;
}
.fc-palette-item.fc-palette-tool.active {
  background: #dbeafe;
  border-color: #0284c7;
  border-style: solid;
}

.fc-canvas-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--editor-canvas-bg, #fcfcfc);
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-svg {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: grab;   /* hint: klik-en-sleep pannen */
  background: var(--editor-canvas-bg, transparent);
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-svg:active { cursor: grabbing; }
/* Grid-dots krijgen thema-kleur via override op de pattern-cirkel */
body[data-editor-theme="clean"] #fc-grid circle { fill: #e5e7eb; }
body[data-editor-theme="dark"] #fc-grid circle { fill: #1e293b; }
body[data-editor-theme="colorful"] #fc-grid circle { fill: #fbcfe8; }
body[data-editor-theme="handdrawn"] #fc-grid circle { fill: #e8d9ae; }

/* Shape-effecten per thema: node-drop-shadow, selectie-glow, hover-lift */
.fc-svg .fc-node {
  cursor: move;
  filter: drop-shadow(var(--editor-shape-shadow, 0 1px 2px rgba(0,0,0,0.06)));
  transition: filter var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-svg .fc-node:hover {
  filter: drop-shadow(var(--editor-shape-shadow-hover, 0 2px 6px rgba(0,0,0,0.1)));
}
body[data-editor-theme="dark"] .fc-svg .fc-node:hover {
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}

/* Shape-label-font per thema (Hand-drawn krijgt Caveat) */
.fc-svg .fc-node-label { font-family: var(--editor-shape-font, inherit) !important; }
body[data-editor-theme="handdrawn"] .fc-svg .fc-node-label {
  font-family: 'Caveat', 'Kalam', cursive !important;
  font-size: 16px !important;
  font-weight: 700;
}
body[data-editor-theme="handdrawn"] .fc-svg text { font-family: 'Caveat', 'Kalam', cursive !important; }

/* Donker-thema tekst-contrast binnen shapes */
body[data-editor-theme="dark"] .fc-svg .fc-node-label {
  font-weight: 600;
}
.fc-svg .fc-node {
  cursor: move;
}
.fc-svg .fc-node.fc-selected > *:first-child {
  filter: drop-shadow(0 0 0 3px rgba(14, 165, 233, 0.4));
  outline: 2px dashed #0EA5E9;
  outline-offset: 2px;
}
.fc-svg .fc-node.fc-connect-source > *:first-child {
  outline: 2px dashed #F59E0B;
  outline-offset: 2px;
}
.fc-svg .fc-node-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  padding: 6px 10px;
  box-sizing: border-box;
  pointer-events: none;
  word-break: break-word;
  letter-spacing: -0.1px;
}
.fc-svg .fc-edge { cursor: pointer; }
.fc-svg .fc-edge .fc-edge-hit { cursor: pointer; }
.fc-svg .fc-edge.fc-selected .fc-edge-visible {
  stroke: #0EA5E9 !important;
  stroke-width: 3 !important;
}

/* ============ CONTEXT-PAD (bpmn-js-stijl: klik shape → kies volgende) ============ */
.fc-context-pad {
  position: absolute;
  z-index: 15;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 10px;
  padding-right: 30px;  /* ruimte voor close-knop */
  min-width: 260px;
  max-width: 280px;
  font-size: 12px;
  animation: fc-pad-pop 0.18s ease-out;
}
.fc-ctx-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #6b7280 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.fc-ctx-close:hover {
  background: #f3f4f6;
  color: #111827 !important;
}
@keyframes fc-pad-pop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.fc-ctx-group { margin-bottom: 10px; }
.fc-ctx-group:last-child { margin-bottom: 0; }
.fc-ctx-group-label {
  font-size: 10px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.fc-ctx-group-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.fc-ctx-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  /* Tekst altijd zwart — nooit afwijken */
  color: #000 !important;
}
.fc-ctx-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
  color: #000 !important;
}
.fc-ctx-btn-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  pointer-events: none;
}
.fc-ctx-btn-preview svg { width: 36px; height: 22px; }
.fc-ctx-btn-label {
  font-size: 9px;
  font-weight: 600;
  color: #000 !important;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}

.fc-ctx-dir-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.fc-ctx-dir-btn {
  padding: 6px 0;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #000 !important;
  transition: all 0.12s;
  font-family: inherit;
}
.fc-ctx-dir-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}
.fc-ctx-dir-btn.active {
  background: #0ea5e9;
  border-color: #0284c7;
  color: white !important;
}

/* Relatie-knop in context-pad */
.fc-ctx-connect-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: #fafafa;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: #000 !important;
  transition: all 0.12s;
}
.fc-ctx-connect-btn:hover {
  background: #dbeafe;
  border-color: #0ea5e9;
  border-style: solid;
}
.fc-ctx-connect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc-ctx-connect-label { flex: 1; font-weight: 600; }

/* Hover-anchors op shapes — drag-to-connect handles */
.fc-svg .fc-anchor {
  fill: #10B981;
  stroke: white;
  stroke-width: 2;
  cursor: crosshair;
  opacity: 0;
  transition: opacity 0.15s, r 0.12s;
  pointer-events: all;
}
.fc-editor:not(.fc-dragging-connect) .fc-svg .fc-anchor {
  opacity: 0.95;
}
.fc-svg .fc-anchor:hover {
  fill: #059669;
}

/* Target-highlight tijdens drag-to-connect */
.fc-svg .fc-node.fc-connect-target > *:first-child {
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
  outline: 2px solid #10B981;
  outline-offset: 2px;
}

/* Target-anchors — getoond tijdens connect, op de target-shape, zodat
   de gebruiker visueel ziet aan welke kant de pijl gaat aansluiten. */
.fc-svg .fc-target-anchor {
  fill: #10B981;
  stroke: white;
  stroke-width: 2;
  pointer-events: none;
  opacity: 0.75;
  transition: r 0.12s, opacity 0.12s;
}
.fc-svg .fc-target-anchor-active {
  fill: #047857;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(5, 150, 105, 0.85));
}

/* Smart-alignment-guides — stippellijntjes tijdens drag wanneer een shape
   uitgelijnd is met een andere shape (X-center of Y-center) */
.fc-svg .fc-align-guide {
  stroke: #06B6D4;
  stroke-width: 1;
  stroke-dasharray: 5 4;
  pointer-events: none;
  opacity: 0.85;
}

/* Relatie-inspector */
.fc-insp-relation {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fc-insp-relation-from, .fc-insp-relation-to {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
  color: var(--text);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fc-insp-relation-arrow { color: var(--primary); font-weight: 700; }
.fc-insp-hint {
  font-size: 11px;
  color: var(--text-light);
  font-style: italic;
  margin: -6px 0 12px;
  line-height: 1.4;
}
.fc-insp-field select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  background: white;
}

.fc-inspector {
  width: 240px;
  flex-shrink: 0;
  border-left: 1px solid var(--editor-panel-border, var(--border));
  background: var(--editor-panel-bg, #fafafa);
  color: var(--editor-text, inherit);
  padding: 14px;
  overflow-y: auto;
  font-size: 13px;
  transition: background-color var(--editor-anim-duration, 150ms) var(--editor-anim-easing, ease);
}
.fc-inspector h4 { color: var(--editor-text, var(--text)) !important; }
.fc-inspector-empty { color: var(--editor-text-muted, var(--text-light)) !important; }
.fc-insp-field > span { color: var(--editor-text-muted, var(--text-light)) !important; }
.fc-insp-field input[type="text"],
.fc-insp-field select,
.fc-insp-field textarea {
  background: var(--editor-canvas-bg, white) !important;
  border-color: var(--editor-panel-border, var(--border)) !important;
  color: var(--editor-text, inherit) !important;
}
.fc-insp-field textarea {
  width: 100%;
  min-height: 200px;  /* ~10 regels — groeit auto via JS bij meer tekst */
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Rich-text editor — gebruikt voor "Omschrijving" in BPMN-properties-panel
   en in flowchart-inspector. Toolbar met vet/cursief/onderstreept/opsomming.
   contenteditable div eronder die meegroeit met de tekst. */
.rich-editor {
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  overflow: hidden;
  background: white;
}
.rich-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.rich-toolbar button {
  background: white;
  color: #111827;
  border: 1px solid #d1d5db;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  min-width: 28px;
  transition: background 0.1s;
}
.rich-toolbar button:hover { background: #eef2f7; }
.rich-toolbar button:active { background: #ddd; }
.rich-toolbar select.rich-select {
  background: white;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 3px 6px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  max-width: 130px;
}
/* Inline tekst-styling binnen toolbar-knoppen — tegen sneltoets-CSS-resets
   die anders B/I/U onzichtbaar maken */
.rich-toolbar button strong { font-weight: 700; color: inherit; }
.rich-toolbar button em { font-style: italic; color: inherit; }
.rich-toolbar button u { text-decoration: underline; color: inherit; }
.rich-sep {
  display: inline-block;
  width: 1px;
  background: #e5e7eb;
  margin: 0 3px;
}
.rich-content {
  min-height: 200px;  /* ~10 regels */
  padding: 10px 12px;
  outline: none;
  line-height: 1.5;
  font-size: 13px;
  overflow-wrap: break-word;
}
.rich-content:focus { background: #fcfdff; }
.rich-content ul, .rich-content ol { margin: 6px 0; padding-left: 22px; }
.rich-content p { margin: 0 0 6px; }
.rich-content p:last-child { margin-bottom: 0; }
body[data-editor-theme="dark"] .fc-insp-relation { background: #0a0f1e; }
body[data-editor-theme="dark"] .fc-insp-relation-from,
body[data-editor-theme="dark"] .fc-insp-relation-to {
  background: #1e293b;
  color: #e2e8f0;
}
.fc-inspector h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fc-inspector-empty {
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  padding: 30px 10px;
}
.fc-insp-field {
  display: block;
  margin-bottom: 12px;
}
.fc-insp-field > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fc-insp-field input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
.fc-color-picker { display: flex; gap: 5px; flex-wrap: wrap; }
.fc-color-swatch {
  width: 28px;
  height: 28px;
  border: 2px solid;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.12s;
  padding: 0;
}
.fc-color-swatch:hover { transform: scale(1.1); }
.fc-color-swatch.active {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* .fc-wrap = de flowchart-pagina-wrapper binnen de bewerken-stap (data-panel="4")
   De step-panel-canvas is flex-column + flex:1 dus we erven alle beschikbare
   hoogte. fc-wrap zelf moet óók flex-column zijn zodat de editor-container
   de overgebleven ruimte pakt (onder de status-rij). */
.fc-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;   /* zodat flex-child kan krimpen i.p.v. overflow */
  width: 100%;
}
.fc-editor-container {
  width: 100%;
  flex: 1;
  min-height: 560px;  /* fallback als de step-panel niet groot genoeg is */
  display: flex;
  flex-direction: column;
}

/* ============ EDITOR-THEME SWITCHER ============ */
.editor-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000 !important;
}
.editor-theme-btn-label { font-size: 12px; }

.editor-theme-popover {
  position: absolute;
  z-index: 1000;
  width: 320px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: etp-popin 0.15s ease-out;
}
@keyframes etp-popin {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.editor-theme-option {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: white;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: #1a1a1a;
  transition: all 0.12s;
}
.editor-theme-option:hover {
  background: #f8fafc;
  border-color: #e5e7eb;
}
.editor-theme-option.active {
  background: #f0f9ff;
  border-color: #0ea5e9;
}
.editor-theme-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.editor-theme-option-text strong { font-size: 13px; font-weight: 600; color: #0f172a; }
.editor-theme-option-text span { font-size: 11px; color: #64748b; line-height: 1.3; }
.editor-theme-option-check { color: #0ea5e9; font-weight: 700; font-size: 16px; }

/* Mini-preview in dropdown */
.editor-theme-preview {
  width: 64px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  position: relative;
  flex-shrink: 0;
}
.editor-theme-preview .etp-header {
  height: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.editor-theme-preview .etp-body {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 5px;
}
.editor-theme-preview .etp-shape {
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.editor-theme-preview .etp-arrow {
  flex: 1;
  height: 1.5px;
  margin: 0 2px;
}

/* Clean preview */
.editor-theme-preview-clean { background: #fafbfc; }
.editor-theme-preview-clean .etp-header { background: #ffffff; }
.editor-theme-preview-clean .etp-shape-a { background: #dbeafe; border: 1px solid #93c5fd; }
.editor-theme-preview-clean .etp-shape-b { background: #fef3c7; border: 1px solid #fcd34d; }
.editor-theme-preview-clean .etp-arrow { background: #475569; }

/* Dark preview */
.editor-theme-preview-dark { background: #0a0f1e; }
.editor-theme-preview-dark .etp-header { background: #111827; border-bottom-color: #1f2937; }
.editor-theme-preview-dark .etp-shape-a { background: #1e40af; border: 1px solid #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.5); }
.editor-theme-preview-dark .etp-shape-b { background: #7e22ce; border: 1px solid #c084fc; box-shadow: 0 0 6px rgba(192,132,252,0.5); }
.editor-theme-preview-dark .etp-arrow { background: #7dd3fc; }

/* Colorful preview */
.editor-theme-preview-colorful { background: #fdf4f9; }
.editor-theme-preview-colorful .etp-header { background: #ffffff; border-bottom-color: #f5d0e0; }
.editor-theme-preview-colorful .etp-shape-a { background: #c7d2fe; border-radius: 6px; }
.editor-theme-preview-colorful .etp-shape-b { background: #fbcfe8; border-radius: 6px; }
.editor-theme-preview-colorful .etp-arrow { background: #a855f7; }

/* Handdrawn preview */
.editor-theme-preview-handdrawn { background: #fdf6e3; }
.editor-theme-preview-handdrawn .etp-header { background: #faf3d9; border-bottom-color: #d4b896; }
.editor-theme-preview-handdrawn .etp-shape-a { background: #fff7d6; border: 1.5px solid #6b4423; border-radius: 4px; transform: rotate(-1deg); }
.editor-theme-preview-handdrawn .etp-shape-b { background: #fde9c1; border: 1.5px solid #6b4423; border-radius: 4px; transform: rotate(1deg); }
.editor-theme-preview-handdrawn .etp-arrow { background: #6b4423; height: 2px; }

/* Expressive animations voor Colorful en Handdrawn */
body[data-editor-theme="colorful"] .fc-svg .fc-node {
  transition: filter 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body[data-editor-theme="colorful"] .fc-svg .fc-node:hover { transform: translate(0, -2px); }

body[data-editor-theme="handdrawn"] .fc-svg .fc-node {
  transition: filter 200ms ease-out, transform 200ms ease-out;
}
body[data-editor-theme="handdrawn"] .fc-svg .fc-node:nth-child(odd) { transform: rotate(-0.5deg); }
body[data-editor-theme="handdrawn"] .fc-svg .fc-node:nth-child(even) { transform: rotate(0.4deg); }
body[data-editor-theme="handdrawn"] .fc-svg .fc-node:hover {
  transform: rotate(0deg) translate(0, -1px);
}

/* Selectie-glow per thema */
.fc-svg .fc-node.fc-selected > *:first-child {
  filter: drop-shadow(var(--editor-selection-glow, 0 0 0 3px rgba(14,165,233,0.3)));
  outline: 2px dashed var(--editor-selection-color, #0EA5E9);
  outline-offset: 2px;
}
/* Alternatieve generate-knop (Flowchart) — paars/accent i.p.v. blauw */
.ai-gen-generate-alt {
  background: #a855f7 !important;
}
.ai-gen-generate-alt:hover {
  background: #9333ea !important;
}

/* Multi-selected (shift+klik) — dunnere outline, nog steeds zichtbaar */
.fc-svg .fc-node.fc-multi-selected > *:first-child {
  outline: 2px dashed var(--editor-selection-color, #0EA5E9);
  outline-offset: 2px;
  opacity: 0.95;
}

/* Rechtermuisknop-menu — snelle type-wissel op shape */
.fc-right-menu {
  position: fixed;
  z-index: 1001;
  min-width: 240px;
  max-width: 280px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 4px;
  font-family: inherit;
  animation: fc-right-menu-pop 0.12s ease-out;
}
@keyframes fc-right-menu-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.fc-right-menu-header {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 12px 4px;
}
.fc-right-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #000 !important;
  text-align: left;
  transition: background 0.1s;
}
.fc-right-menu-item:hover {
  background: #eff6ff;
}
.fc-right-menu-item.active {
  background: #dbeafe;
  font-weight: 600;
}
.fc-right-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}
.fc-right-menu-icon svg { width: 36px; height: 22px; }
.fc-right-menu-label { flex: 1; }
.fc-right-menu-check { color: #0ea5e9; font-weight: 700; }
.fc-right-menu-sep {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 8px;
}
.fc-right-menu-danger {
  color: #b91c1c !important;
}
.fc-right-menu-danger:hover {
  background: #fee2e2 !important;
}

/* Bend-handle op edges: drag-punt voor het middensegment */
.fc-svg .fc-edge-bend-handle {
  fill: white;
  stroke: var(--editor-selection-color, #0EA5E9);
  stroke-width: 2;
  pointer-events: all;
  transition: r 0.12s ease;
  cursor: move;
}
.fc-svg .fc-edge-bend-handle:hover {
  r: 8;
  fill: var(--editor-selection-color, #0EA5E9);
}

/* ==== Color-settings modal (standaardkleuren BPMN aanpassen) ==== */
.cs-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.cs-modal.hidden { display:none; }
.cs-modal-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.5); backdrop-filter:blur(2px); }
.cs-modal-card { position:relative; background:white; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.25); padding:24px; width:min(560px, 92vw); max-height:88vh; overflow:auto; }
.cs-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cs-modal-header h2 { margin:0; font-size:18px; }
.cs-close { background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:#64748b; padding:4px 10px; border-radius:6px; }
.cs-close:hover { background:#f1f5f9; color:#0f172a; }
.cs-modal-desc { color:#475569; font-size:13px; margin:4px 0 16px; line-height:1.4; }
.cs-rows { display:flex; flex-direction:column; gap:10px; }
.cs-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.cs-row-label { flex:1; font-weight:600; font-size:13px; color:#0f172a; }
.cs-row-swatch { width:48px; height:32px; border-radius:6px; border:1.5px solid #cbd5e1; }
.cs-row-input { width:42px; height:32px; border:none; cursor:pointer; padding:0; background:none; }
.cs-row-input::-webkit-color-swatch-wrapper { padding:0; }
.cs-row-input::-webkit-color-swatch { border:1.5px solid #cbd5e1; border-radius:6px; }
.cs-row-pair { display:flex; align-items:center; gap:6px; }
.cs-row-pair-label { font-size:11px; color:#64748b; font-weight:500; }
.cs-modal-actions { display:flex; gap:8px; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid #e2e8f0; }

/* ---------- Mavim Import modal (Procesmodel Herijken — fase 1) ---------- */
.mim-card { width:min(640px, 94vw); }
.mim-body { min-height:200px; }
.mim-drop {
  border:2px dashed #cbd5e1; border-radius:12px; padding:36px 20px;
  text-align:center; transition:background .15s, border-color .15s;
  background:#f8fafc;
}
.mim-drop-active { border-color:#6366f1; background:#eef2ff; }
.mim-drop-icon { font-size:36px; margin-bottom:8px; }
.mim-drop-text { color:#475569; margin:8px 0 16px; line-height:1.4; }
.mim-help { color:#64748b; font-size:12px; margin-top:14px; line-height:1.5; }
.mim-loading { padding:48px 12px; text-align:center; color:#475569; }
.mim-spinner {
  width:36px; height:36px; border-radius:50%;
  border:3px solid #e2e8f0; border-top-color:#6366f1;
  margin:0 auto 14px; animation:mim-spin 0.9s linear infinite;
}
@keyframes mim-spin { to { transform:rotate(360deg); } }
.mim-error { padding:24px 12px; text-align:center; }
.mim-error-icon { font-size:36px; margin-bottom:6px; }
.mim-error h3 { margin:0 0 8px; color:#b91c1c; }
.mim-error p { color:#475569; margin:0; line-height:1.5; word-break:break-word; }
.mim-preview h3 { margin:0 0 10px; color:#0f172a; font-size:18px; }
.mim-preview-files { color:#64748b; font-size:12px; margin:0 0 14px; word-break:break-all; }
.mim-cat-list { margin:6px 0 16px; padding-left:20px; }
.mim-cat-list li { margin-bottom:6px; line-height:1.4; }
.mim-counts { color:#64748b; font-size:12px; display:block; margin-top:2px; }
.mim-totals {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin:16px 0;
}
.mim-totals > div {
  background:#f1f5f9; border-radius:10px; padding:12px 8px;
  text-align:center;
}
.mim-totals-num { display:block; font-size:22px; font-weight:600; color:#1e293b; }
.mim-totals-lbl { display:block; font-size:11px; color:#64748b; margin-top:2px; }
.mim-tussenlaag-note {
  background:#fefce8; border-left:3px solid #eab308;
  padding:10px 12px; border-radius:6px; font-size:13px; color:#713f12;
  line-height:1.5; margin:14px 0;
}
.mim-warning {
  background:#fef2f2; border-left:3px solid #ef4444;
  padding:10px 12px; border-radius:6px; font-size:13px; color:#7f1d1d;
  margin:0 0 14px; line-height:1.5;
}
.mim-warning ul { margin:6px 0 4px; padding-left:18px; }
.mim-warnings { margin-top:14px; font-size:12px; }
.mim-warnings summary { cursor:pointer; color:#64748b; }
.mim-warnings ul { margin:6px 0 0; padding-left:18px; color:#475569; }
.mim-footer { justify-content:flex-end; }
.mim-footer .btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ---------- Boomstructuur van geïmporteerde Mavim-export ---------- */
.mim-boom-wrap {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
.mim-boom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mim-boom-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.mim-boom-acties { display: flex; gap: 6px; }
.mim-boom-btn {
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
}
.mim-boom-btn:hover { border-color: #1e3a8a; color: #1e3a8a; }
.mim-boom {
  max-height: 360px;
  overflow-y: auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
}
.mim-boom details { margin: 2px 0; }
.mim-boom summary {
  list-style: none;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.mim-boom summary::-webkit-details-marker { display: none; }
.mim-boom summary::before {
  content: '▶';
  font-size: 9px;
  color: #94a3b8;
  width: 12px;
  display: inline-block;
  text-align: center;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}
.mim-boom details[open] > summary::before {
  transform: rotate(90deg);
}
.mim-boom summary:hover { background: #eef2ff; }
.mim-tree-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 13px;
  flex-shrink: 0;
}
.mim-tree-icon-cat { color: #ca8a04; }
.mim-tree-icon-cluster { color: #1e3a8a; }
.mim-tree-icon-bp { color: #475569; }
.mim-tree-naam { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mim-tree-meta { font-size: 10px; color: #94a3b8; flex-shrink: 0; }
.mim-tree-clusters,
.mim-tree-bps {
  margin: 2px 0 4px 22px;
  padding-left: 6px;
  border-left: 1px dashed #cbd5e1;
}
.mim-tree-wps {
  list-style: none;
  margin: 2px 0 6px 28px;
  padding: 0 0 0 6px;
  border-left: 1px dashed #cbd5e1;
}
.mim-tree-wp,
.mim-tree-leeg {
  padding: 2px 6px;
  font-size: 12px;
  color: #475569;
}
.mim-tree-leeg { font-style: italic; color: #94a3b8; }
.mim-tree-wp:hover { background: #eef2ff; border-radius: 3px; }
.mim-tree-cat > summary { font-weight: 600; color: #0f172a; }
.mim-boom-leeg { padding: 14px; text-align: center; color: #94a3b8; font-style: italic; }

/* ---------- RAW Mavim-boom (v288/289): toont alle iconen + kinds ---------- */
.mim-raw-tellingen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.mim-raw-tel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.mim-raw-tel strong { color: #0f172a; font-weight: 700; }
.mim-raw-tel-categorie { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mim-raw-tel-cluster { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.mim-raw-tel-bedrijfsproces { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.mim-raw-tel-werkproces { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.mim-raw-tel-tussenlaag { background: #fef9c3; color: #854d0e; border-color: #fde047; }
.mim-raw-tel-onbekend { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.mim-raw-onbekend-detail {
  font-size: 11px;
  color: #991b1b;
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.mim-raw-onbekend-detail code { background: #fff; padding: 1px 6px; border-radius: 3px; border: 1px solid #fecaca; font-size: 11px; color: #b91c1c; }
.mim-raw-note {
  background: #fefce8;
  border-left: 3px solid #eab308;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #713f12;
  margin: 8px 0 10px;
}
.mim-raw-note strong { color: #854d0e; }

/* Kind-tag chip naast naam */
.mim-tree-kindtag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.mim-tree-kindtag-categorie { background: #fef3c7; color: #92400e; }
.mim-tree-kindtag-cluster { background: #dbeafe; color: #1e40af; }
.mim-tree-kindtag-bedrijfsproces { background: #e0e7ff; color: #3730a3; }
.mim-tree-kindtag-werkproces { background: #e5e7eb; color: #374151; }
.mim-tree-kindtag-tussenlaag { background: #fef9c3; color: #854d0e; }
.mim-tree-kindtag-onbekend { background: #fee2e2; color: #991b1b; }

.mim-tree-iconno {
  font-size: 9px;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  background: #f8fafc;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

/* Iconen per kind */
.mim-tree-icon-categorie { color: #ca8a04; }
.mim-tree-icon-cluster { color: #1e40af; }
.mim-tree-icon-bedrijfsproces { color: #3730a3; }
.mim-tree-icon-werkproces { color: #475569; }
.mim-tree-icon-tussenlaag { color: #ca8a04; }
.mim-tree-icon-onbekend { color: #b91c1c; }

/* Nested generic node */
.mim-tree-node > summary { padding: 3px 4px; }
.mim-tree-node-tussenlaag > summary {
  background: #fef9c3;
  border-left: 3px solid #eab308;
  border-radius: 3px;
}
.mim-tree-node-onbekend > summary {
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  border-radius: 3px;
}
.mim-tree-childs {
  margin: 2px 0 4px 22px;
  padding-left: 6px;
  border-left: 1px dashed #cbd5e1;
}

/* Leaf-rij (bp/wp zonder kinderen) — geen <details>, gewoon rij */
.mim-tree-leaf { padding: 0; }
.mim-tree-leaf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 3px;
}
.mim-tree-leaf-row:hover { background: #eef2ff; }
.mim-tree-leaf-tussenlaag .mim-tree-leaf-row {
  background: #fef9c3;
  border-left: 3px solid #eab308;
}
.mim-tree-leaf-onbekend .mim-tree-leaf-row {
  background: #fef2f2;
  border-left: 3px solid #ef4444;
}

/* Banner voor lopende sessie in upload-modal (fase 3b) */
.mim-resume-banner {
  display:flex; align-items:center; gap:14px; padding:14px;
  background:#eef2ff; border:1px solid #c7d2fe; border-radius:10px;
  margin-bottom:18px;
}
.mim-resume-icon { font-size:28px; line-height:1; flex-shrink:0; }
.mim-resume-text { flex:1; color:#0f172a; line-height:1.4; }
.mim-resume-text strong { display:block; font-size:14px; margin-bottom:2px; }
.mim-resume-detail { font-size:12px; color:#475569; word-break:break-word; }
.mim-resume-actions { flex-shrink:0; }

/* Opnieuw-beginnen-knop in overlay-topbar */
.mv-tool-btn-restart {
  background:white; border-color:#cbd5e1; color:#475569;
  margin-right:4px;
}
.mv-tool-btn-restart:hover { background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }

/* Eind-export-knop (Mavim.xml) — prominentere stijl, primaire actie */
.mv-tool-btn-eindexport {
  background:#0f172a; color:white; border-color:#0f172a;
  font-weight:600;
}
.mv-tool-btn-eindexport:hover { background:#1e293b; color:white; border-color:#1e293b; }

/* Eind-export-dialog (fase 3d) */
.mv-eind-stats {
  display:flex; gap:8px; margin:10px 0 14px;
}
.mv-eind-pill {
  font-size:11px; padding:3px 9px; border-radius:10px; font-weight:500;
}
.mv-eind-green { background:#dcfce7; color:#166534; }
.mv-eind-red   { background:#fee2e2; color:#b91c1c; }
.mv-eind-grey  { background:#f1f5f9; color:#475569; }
.mv-eind-warning {
  background:#fef9c3; border-left:3px solid #ca8a04;
  padding:10px 12px; border-radius:6px; font-size:12px;
  color:#713f12; line-height:1.5; margin-bottom:14px;
}
.mv-eind-warning strong { color:#854d0e; }
.mv-eind-section { margin-top:14px; }
.mv-eind-section strong { font-size:13px; color:#0f172a; }
.mv-eind-hint { font-size:11px; color:#94a3b8; margin:2px 0 8px; }
.mv-eind-cats { display:flex; flex-direction:column; gap:6px; }
.mv-eind-cat {
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  border:1px solid #e2e8f0; border-radius:6px; cursor:pointer;
  background:white; transition:background .12s;
}
.mv-eind-cat:hover { background:#f8fafc; }
.mv-eind-cat input { margin:3px 0 0; flex-shrink: 0; }
.mv-eind-cat-info { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.mv-eind-cat-naam { font-size:13px; color:#0f172a; font-weight:600; }
.mv-eind-cat-cijfers { font-size:11px; color:#64748b; }
.mv-eind-cat-geacc {
  font-size:11px; color:#047857;
  padding:4px 8px; background:#d1fae5; border-radius:6px;
  display:inline-block; margin-top:2px;
}
.mv-eind-checkbox {
  display:flex; align-items:center; gap:8px; font-size:13px; color:#475569;
  cursor:pointer;
}
.mv-eind-checkbox input { margin:0; }

/* ---------- Mavim Vergelijking — full-screen overlay (fase 2a) ---------- */
.mv-overlay {
  position:fixed; inset:0; z-index:9998;
  background:#f8fafc; display:flex; flex-direction:column;
}
.mv-overlay.hidden { display:none; }
body.mv-overlay-open { overflow:hidden; }

.mv-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; background:white; border-bottom:1px solid #e2e8f0;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.mv-topbar-title { display:flex; align-items:center; gap:10px; }
.mv-topbar-icon { font-size:22px; }
.mv-topbar h1 { margin:0; font-size:18px; font-weight:600; color:#0f172a; }
.mv-close {
  background:none; border:none; font-size:26px; line-height:1; cursor:pointer;
  color:#64748b; padding:4px 12px; border-radius:8px;
}
.mv-close:hover { background:#f1f5f9; color:#0f172a; }

.mv-legenda { background:white; border-bottom:1px solid #e2e8f0; }
.mv-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:12px; color:#475569; padding:8px 24px;
}
.mv-row + .mv-row { border-top:1px dashed #e2e8f0; }
.mv-row-label {
  font-size:10px; font-weight:700; letter-spacing:0.08em; color:#94a3b8;
  margin-right:4px;
}
.mv-legenda-chips { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.mv-row-acties { display:flex; gap:6px; align-items:center; margin-left:auto; }
.mv-zoek-wrap { flex:1; max-width:340px; }
.mv-zoek {
  border:1px solid #cbd5e1; border-radius:6px; padding:5px 10px;
  font-size:12px; width:100%; min-width:0; outline:none;
}
.mv-zoek:focus { border-color:#6366f1; }

/* Bulk-acties dropdown (fase 3-opschoning) */
.mv-bulk-dropdown { position:relative; }
.mv-bulk-menu {
  position:absolute; top:calc(100% + 4px); right:0;
  background:white; border:1px solid #e2e8f0; border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08); padding:4px;
  min-width:200px; z-index:50;
  display:flex; flex-direction:column; gap:2px;
}
.mv-bulk-menu[hidden] { display:none; }
.mv-bulk-item {
  border:none; background:transparent; text-align:left;
  padding:7px 10px; border-radius:5px; cursor:pointer;
  font-size:12px; color:#0f172a; white-space:nowrap;
}
.mv-bulk-item:hover { background:#f1f5f9; }
.mv-bulk-sep { height:1px; background:#e2e8f0; margin:2px 0; }

/* Icon-only knop in topbar (compacte Nieuwe-sessie) */
.mv-icon-btn {
  border:1px solid #cbd5e1; background:white; color:#475569;
  width:32px; height:32px; padding:0; border-radius:8px;
  cursor:pointer; font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.mv-icon-btn:hover { background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }
.mv-tool-btn {
  border:1px solid #cbd5e1; background:white; border-radius:6px;
  padding:5px 10px; font-size:12px; cursor:pointer; color:#475569;
  transition:background .12s, border-color .12s;
}
.mv-tool-btn:hover { background:#f1f5f9; border-color:#94a3b8; color:#0f172a; }
.mv-tool-btn-reset { color:#64748b; }
.mv-chip {
  border:1px solid transparent; border-radius:14px; padding:4px 10px;
  font-size:12px; cursor:pointer; white-space:nowrap;
  background:white; transition:opacity .12s, filter .12s;
}
.mv-chip.mv-chip-on  { opacity:1; }
.mv-chip.mv-chip-off { opacity:0.35; filter:grayscale(0.7); text-decoration:line-through; }
.mv-chip.mv-leg-green  { border-color:#86efac; background:#f0fdf4; color:#166534; }
.mv-chip.mv-leg-yellow { border-color:#fde047; background:#fefce8; color:#854d0e; }
.mv-chip.mv-leg-orange { border-color:#fdba74; background:#fff7ed; color:#9a3412; }
.mv-chip.mv-leg-blue   { border-color:#93c5fd; background:#eff6ff; color:#1e40af; }
.mv-chip.mv-leg-grey   { border-color:#cbd5e1; background:#f8fafc; color:#475569; }
.mv-chip.mv-leg-tussenlaag { border-color:#eab308; background:#fefce8; color:#713f12; }
.mv-chip.mv-leg-warn   { border-color:#f87171; background:#fef2f2; color:#991b1b; }
.mv-chip.mv-leg-alleen { border-color:#cbd5e1; background:#f1f5f9; color:#475569; }
.mv-count-filtered { color:#6366f1; font-weight:600; }

.mv-grid {
  flex:1; display:grid; grid-template-columns:1fr 1fr; gap:0;
  overflow:hidden;
}
.mv-pane {
  display:flex; flex-direction:column; overflow:hidden;
  background:white; border-right:1px solid #e2e8f0;
}
.mv-pane:last-child { border-right:none; }
.mv-pane-header {
  padding:14px 20px 10px; border-bottom:1px solid #e2e8f0;
  background:#fafbfc;
}
.mv-pane-eyebrow {
  display:block; font-size:10px; font-weight:600; letter-spacing:0.08em;
  color:#94a3b8; margin-bottom:4px;
}
.mv-pane-header h2 { margin:0; font-size:16px; color:#0f172a; }
.mv-pane-meta { margin:4px 0 0; font-size:12px; color:#64748b; }
.mv-tree { flex:1; overflow:auto; padding:14px 20px; }
.mv-empty { color:#94a3b8; font-style:italic; padding:20px; text-align:center; }

/* Node-styling per niveau */
.mv-node { margin-bottom:6px; }
.mv-node-row {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-radius:6px; transition:background .12s;
}
.mv-node-row:hover { background:#f1f5f9; }
.mv-node-label {
  display:inline-block; font-size:9px; font-weight:600; letter-spacing:0.06em;
  padding:2px 6px; border-radius:4px; text-transform:uppercase;
  flex-shrink:0;
}
.mv-label-cat { background:#1e293b; color:white; }
.mv-label-cluster { background:#6366f1; color:white; }
.mv-label-bp { background:#0ea5e9; color:white; }
.mv-label-wp { background:#94a3b8; color:white; }
.mv-node-name { font-size:13px; color:#0f172a; flex:1; }
.mv-node-count { font-size:10px; color:#94a3b8; flex-shrink:0; }
.mv-node-warn { font-size:14px; flex-shrink:0; cursor:help; }
.mv-children { margin-left:18px; border-left:1px dashed #e2e8f0; padding-left:10px; margin-top:2px; }

/* Categorie krijgt extra ruimte */
.mv-cat { margin-bottom:18px; }
.mv-cat > .mv-node-row .mv-node-name { font-weight:600; font-size:14px; }
.mv-cluster > .mv-node-row .mv-node-name { font-weight:500; }

/* Tussenlaag-banner bovenaan Mavim-pane */
.mv-tussenlaag-banner {
  background:#fefce8; border:1px solid #eab308; border-radius:8px;
  padding:8px 12px; margin-bottom:14px; font-size:12px; color:#713f12;
}
.mv-tussenlaag-banner summary {
  cursor:pointer; font-size:13px; line-height:1.4;
}
.mv-tussenlaag-banner[open] summary { margin-bottom:8px; }
.mv-tl-help { margin:0 0 10px; color:#713f12; line-height:1.5; font-size:12px; }
.mv-tl-groep { margin-bottom:10px; }
.mv-tl-groep ul { margin:4px 0 0; padding-left:18px; }
.mv-tl-groep li { margin-bottom:2px; line-height:1.4; }
.mv-tl-groep li em { color:#92400e; font-style:italic; }
/* Impliciet bedrijfsproces (Mavim zonder icoon, door heuristiek opgepakt) */
.mv-impliciet-badge {
  display:inline-block; font-size:9px; font-weight:600;
  background:#fef3c7; color:#92400e; padding:1px 5px;
  border-radius:3px; letter-spacing:0.04em;
}

/* Legenda kleur-mini-blokjes alvast gedefinieerd voor fase 2b */
.mv-leg-green::before, .mv-leg-yellow::before, .mv-leg-orange::before,
.mv-leg-blue::before, .mv-leg-grey::before, .mv-leg-tussenlaag::before,
.mv-leg-warn::before { content:''; }

.mv-bottom-info {
  background:#f1f5f9; border-top:1px solid #e2e8f0;
  padding:8px 24px; font-size:12px; color:#64748b;
  text-align:center;
}
.mv-phase-note { font-style:italic; }

/* ---------- Mavim Vergelijking — fase 2b: AI-matching ---------- */
.mv-topbar-actions { display:flex; align-items:center; gap:14px; }
.mv-match-status {
  font-size:12px; color:#475569; padding:6px 12px;
  border-radius:6px; background:#f1f5f9;
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.mv-status-loading { background:#dbeafe; color:#1e40af; animation:mv-pulse 1.4s ease-in-out infinite; }
.mv-status-success { background:#dcfce7; color:#166534; }
.mv-status-error   { background:#fee2e2; color:#991b1b; }
@keyframes mv-pulse { 0%, 100% { opacity:1; } 50% { opacity:0.6; } }

/* Driekoloms-grid wanneer sidebar zichtbaar is */
.mv-grid { grid-template-columns:1fr 1fr 320px; }
.mv-sidebar {
  background:#fafbfc; border-left:1px solid #e2e8f0;
  overflow:auto; padding:14px 16px; font-size:13px;
}
.mv-sidebar-empty { color:#94a3b8; font-style:italic; padding:30px 8px; text-align:center; line-height:1.5; }
.mv-sb-card { background:white; border-radius:8px; padding:14px; border:1px solid #e2e8f0; }
.mv-sb-card hr { border:none; border-top:1px solid #e2e8f0; margin:10px 0; }
.mv-sb-eyebrow { font-size:10px; font-weight:700; letter-spacing:0.08em; color:#94a3b8; margin-bottom:4px; }
.mv-sb-eyebrow-secondary { margin-top:10px; }
.mv-sb-path { font-size:13px; color:#0f172a; font-weight:500; margin-bottom:4px; line-height:1.4; }
.mv-sb-niveau { font-size:10px; font-weight:600; color:#64748b; letter-spacing:0.05em; }
.mv-sb-status-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.04em; padding:6px 10px; border-radius:6px; margin-bottom:8px; }
.mv-sb-uitleg { font-size:12px; color:#475569; line-height:1.5; margin-top:8px; }
.mv-sb-help { font-size:11px; color:#94a3b8; font-style:italic; margin-top:8px; }
.mv-sb-suggestie { padding:8px 0; border-bottom:1px solid #f1f5f9; }
.mv-sb-suggestie:last-of-type { border-bottom:none; }
.mv-sb-suggestie-soort {
  display:inline-block; font-size:10px; font-weight:600;
  background:#e2e8f0; color:#0f172a; padding:1px 6px;
  border-radius:3px; letter-spacing:0.04em; margin-right:6px;
}
.mv-sb-suggestie-text { font-size:12px; color:#475569; line-height:1.5; }
.mv-sb-green  { background:#dcfce7; color:#166534; }
.mv-sb-yellow { background:#fef9c3; color:#854d0e; }
.mv-sb-orange { background:#fed7aa; color:#9a3412; }
.mv-sb-blue   { background:#dbeafe; color:#1e40af; }
.mv-sb-grey   { background:#f1f5f9; color:#475569; }
.mv-sb-raw {
  background:#fff; border:1px solid #e2e8f0; border-radius:6px;
  padding:8px; font-size:11px; line-height:1.4;
  white-space:pre-wrap; word-break:break-all;
  max-height:160px; overflow:auto; color:#1e293b;
  font-family:Consolas,Monaco,monospace;
}

/* Mavim-zijde statusstippen (fase 2c — bidirectionele zichtbaarheid) */
.mv-mavim-green  > .mv-node-row { background:rgba(34, 197, 94, 0.10); }
.mv-mavim-yellow > .mv-node-row { background:rgba(234, 179, 8, 0.10); }
.mv-mavim-orange > .mv-node-row { background:rgba(249, 115, 22, 0.10); }
.mv-mavim-alleen > .mv-node-row { background:rgba(148, 163, 184, 0.06); }
.mv-mv-status-emoji { font-size:13px; flex-shrink:0; }
.mv-mv-status-emoji.mv-mv-grey { color:#cbd5e1; font-size:10px; }

/* Counterpart-highlight (de andere zijde van een selectie) */
.mv-ft-counterpart > .mv-node-row {
  outline:2px dashed #6366f1; outline-offset:1px;
}
.mv-mv-counterpart > .mv-node-row {
  outline:2px dashed #6366f1; outline-offset:1px;
}

/* Flash-animatie bij scroll-into-view, zodat het oog de gevonden node ziet */
@keyframes mv-flash {
  0%   { background:rgba(99, 102, 241, 0.35); }
  100% { background:transparent; }
}
.mv-mavim-flash > .mv-node-row, .mv-status-flash > .mv-node-row {
  animation:mv-flash 1.6s ease-out;
}

/* Match-rijen in zijbalk bij Mavim-klik (kan meerdere FT-matches per Mavim) */
.mv-sb-match-row {
  display:flex; gap:8px; align-items:flex-start;
  padding:8px; border-radius:6px; margin-bottom:6px;
  background:#fff; border:1px solid #e2e8f0;
}
.mv-sb-match-row.mv-sb-green  { border-left:3px solid #16a34a; }
.mv-sb-match-row.mv-sb-yellow { border-left:3px solid #ca8a04; }
.mv-sb-match-row.mv-sb-orange { border-left:3px solid #ea580c; }
.mv-sb-match-row.mv-sb-blue   { border-left:3px solid #2563eb; }
.mv-sb-match-emoji { font-size:14px; flex-shrink:0; }
.mv-sb-match-info  { flex:1; min-width:0; }
.mv-sb-match-path  { font-size:12px; color:#0f172a; line-height:1.4; word-break:break-word; }
.mv-sb-match-uitleg { font-size:11px; color:#475569; margin-top:3px; line-height:1.4; }

/* ---------- Mavim Vergelijking fase 3a — accept/reject ---------- */
.mv-decision-summary {
  font-size:12px; color:#475569; padding:5px 10px;
  background:#f1f5f9; border-radius:6px; white-space:nowrap;
}
.mv-decision-tray { display:inline-flex; gap:2px; margin-left:8px; }
.mv-dec-btn {
  border:1px solid #cbd5e1; background:white; border-radius:4px;
  width:22px; height:20px; line-height:1; padding:0;
  cursor:pointer; font-size:11px; color:#94a3b8;
  display:inline-flex; align-items:center; justify-content:center;
}
.mv-dec-btn:hover { background:#f1f5f9; }
.mv-dec-accept.mv-dec-on  { background:#16a34a; color:white; border-color:#16a34a; }
.mv-dec-reject.mv-dec-on  { background:#dc2626; color:white; border-color:#dc2626; }
.mv-dec-pending.mv-dec-on { background:#e2e8f0; color:#475569; border-color:#94a3b8; }

/* Bulk-knoppen op cluster-rij */
.mv-cluster-bulk { display:inline-flex; gap:3px; margin-left:8px; }
.mv-bulk-btn {
  border:1px solid #cbd5e1; background:white; border-radius:4px;
  padding:1px 6px; font-size:11px; cursor:pointer;
  color:#475569; line-height:1.4;
}
.mv-bulk-btn:hover { background:#f1f5f9; }
.mv-bulk-accept:hover { background:#dcfce7; color:#15803d; border-color:#86efac; }
.mv-bulk-reject:hover { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }

/* Geaccepteerd: dunne groene rand */
.mv-decision-accepted > .mv-node-row {
  outline:2px solid #16a34a; outline-offset:-1px; border-radius:4px;
}
/* Afgewezen: doorgehaald + vager */
.mv-decision-rejected > .mv-node-row .mv-node-name {
  text-decoration:line-through;
}
.mv-decision-rejected > .mv-node-row {
  opacity:0.55;
}

/* Inline-edit */
.mv-naam-bewerkbaar { cursor:text; }
.mv-naam-bewerkbaar:hover { background:rgba(99, 102, 241, 0.08); border-radius:3px; }
.mv-naam-aangepast-door-klant { font-weight:600; color:#1e40af; }
.mv-naam-edit-input {
  font-size:13px; padding:2px 6px; border:1px solid #6366f1;
  border-radius:4px; outline:none; min-width:200px;
}

/* Voortgangsbalk onderaan */
.mv-bottom-info { display:flex; align-items:center; gap:12px; }
.mv-progress-track {
  flex:1; height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden;
}
.mv-progress-fill {
  height:100%; background:linear-gradient(90deg, #6366f1, #22c55e);
  transition:width .25s ease-out;
}
.mv-progress-tekst { font-size:12px; color:#475569; white-space:nowrap; min-width:240px; text-align:right; }

/* Tools-balk: scheiding voor decision-bulk */
.mv-tool-sep {
  display:inline-block; width:1px; height:18px; background:#cbd5e1; margin:0 2px;
}
.mv-tool-bulk { font-weight:500; }

/* ---------- Kaartjes-view (fase 3a primaire weergave) ---------- */
.mv-view-tabs { display:inline-flex; gap:4px; margin-left:14px; padding:2px; background:#f1f5f9; border-radius:8px; }
.mv-view-tab {
  border:none; background:transparent; padding:5px 12px; font-size:13px;
  border-radius:6px; cursor:pointer; color:#475569;
}
.mv-view-tab:hover { background:#e2e8f0; }
.mv-view-tab.mv-view-tab-on { background:white; color:#0f172a; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.06); }

.mv-views { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.mv-view-kaarten { flex:1; overflow:auto; padding:14px 24px; background:#fafbfc; }
.mv-kaarten-toolbar {
  display:flex; gap:8px; align-items:center; margin-bottom:14px;
  font-size:12px; color:#475569;
}
.mv-kaarten-label { font-weight:600; color:#0f172a; margin-right:4px; }
.mv-sort-btn {
  border:1px solid #cbd5e1; background:white; border-radius:6px;
  padding:4px 10px; font-size:12px; cursor:pointer; color:#475569;
}
.mv-sort-btn:hover { background:#f1f5f9; }
.mv-sort-btn.mv-sort-on { background:#0f172a; color:white; border-color:#0f172a; }
.mv-kaarten-lijst { display:flex; flex-direction:column; gap:10px; }

.mv-kaart {
  background:white; border:1px solid #e2e8f0; border-radius:10px;
  padding:14px 16px; transition:box-shadow .12s, opacity .12s;
}
.mv-kaart:hover { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.mv-kaart-yellow { border-left:4px solid #eab308; }
.mv-kaart-orange { border-left:4px solid #f97316; }
.mv-kaart-blue   { border-left:4px solid #3b82f6; }
.mv-kaart-accepted { background:#f0fdf4; border-color:#86efac; }
.mv-kaart-accepted .mv-kaart-status::after { content:' ✓ geaccepteerd'; color:#15803d; font-size:11px; margin-left:6px; }
.mv-kaart-rejected { background:#fef2f2; border-color:#fca5a5; opacity:0.7; }
.mv-kaart-rejected .mv-kaart-naam { text-decoration:line-through; }
.mv-kaart-rejected .mv-kaart-status::after { content:' ✗ afgewezen'; color:#b91c1c; font-size:11px; margin-left:6px; }

.mv-kaart-kop {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.mv-kaart-status {
  font-size:11px; font-weight:700; letter-spacing:0.05em;
  padding:3px 9px; border-radius:4px;
}
.mv-kaart-yellow .mv-kaart-status { background:#fef9c3; color:#854d0e; }
.mv-kaart-orange .mv-kaart-status { background:#fed7aa; color:#9a3412; }
.mv-kaart-blue   .mv-kaart-status { background:#dbeafe; color:#1e40af; }
.mv-kaart-spacer { flex:1; }

.mv-kaart-koppels {
  display:grid; grid-template-columns:1fr 32px 1fr; gap:10px; align-items:stretch;
}
.mv-kaart-zijde {
  background:#f8fafc; border-radius:6px; padding:10px 12px; min-width:0;
}
.mv-kaart-zijde-label {
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  color:#64748b; margin-bottom:6px;
}
.mv-kaart-pad { font-size:11px; color:#94a3b8; line-height:1.4; word-break:break-word; }
.mv-pad-leeg { color:#cbd5e1; }
.mv-kaart-naam {
  font-size:14px; color:#0f172a; font-weight:500; line-height:1.4;
  margin-top:4px; word-break:break-word;
}
.mv-kaart-naam-leeg { color:#94a3b8; font-style:italic; font-size:13px; margin-top:4px; }
.mv-kaart-pijl {
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#6366f1; font-weight:600;
}
.mv-kaart-uitleg {
  background:#fafbfc; border-left:3px solid #cbd5e1;
  padding:8px 12px; margin-top:10px; border-radius:0 6px 6px 0;
  font-size:12px; color:#475569; line-height:1.5;
}
.mv-kaart-toelichting {
  margin-top:10px; padding-top:10px; border-top:1px dashed #e2e8f0;
}
.mv-toel-label {
  display:block; font-size:10px; font-weight:700; letter-spacing:0.06em;
  color:#94a3b8; margin-bottom:4px;
}
.mv-toel-input {
  width:100%; box-sizing:border-box; resize:vertical;
  font:inherit; font-size:12px; line-height:1.4;
  padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px;
  background:white; color:#0f172a; outline:none;
  transition:border-color .12s;
}
.mv-toel-input:focus { border-color:#6366f1; }
.mv-toel-input::placeholder { color:#cbd5e1; font-style:italic; }

.mv-kaarten-extra { margin-top:24px; display:flex; flex-direction:column; gap:6px; }
.mv-extra-block {
  background:white; border:1px solid #e2e8f0; border-radius:8px;
  padding:0 14px;
}
.mv-extra-block summary {
  cursor:pointer; padding:10px 0; font-size:13px; color:#475569; line-height:1.4;
}
.mv-extra-block summary strong { color:#0f172a; }
.mv-extra-block[open] summary { padding-bottom:8px; border-bottom:1px solid #e2e8f0; }
.mv-extra-body { padding:10px 0 12px; font-size:12px; color:#475569; }
.mv-extra-row { padding:4px 0; line-height:1.5; word-break:break-word; }
.mv-extra-mavim { color:#0f172a; font-weight:500; }
.mv-extra-ft    { color:#0f172a; font-weight:500; }
.mv-extra-arrow { color:#94a3b8; margin:0 6px; }
.mv-extra-tekst { color:#475569; }
.mv-extra-tekst-mut { color:#94a3b8; font-style:italic; }
.mv-extra-soort {
  display:inline-block; font-size:10px; font-weight:600;
  background:#e2e8f0; color:#0f172a; padding:1px 6px;
  border-radius:3px; letter-spacing:0.04em; margin-right:6px;
}

/* Bomen-view valt nu binnen mv-view-bomen wrapper */
.mv-view-bomen { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.mv-view-bomen > .mv-grid { flex:1; }

/* Statuskleuren op FlowTopper-nodes */
.mv-status-green  > .mv-node-row { background:#dcfce7; }
.mv-status-yellow > .mv-node-row { background:#fef9c3; }
.mv-status-orange > .mv-node-row { background:#fed7aa; }
.mv-status-blue   > .mv-node-row { background:#dbeafe; }
.mv-status-emoji { font-size:13px; flex-shrink:0; }
.mv-status-selected > .mv-node-row {
  outline:2px solid #6366f1; outline-offset:1px;
}
.mv-mavim-selected > .mv-node-row {
  outline:2px solid #94a3b8; outline-offset:1px;
}
.mv-has-suggestie > .mv-node-row { background:#f8fafc; }
.mv-suggestie-emoji { font-size:11px; flex-shrink:0; cursor:help; }

/* Klikbare nodes */
[data-mv-dcv], [data-mv-sid] { cursor:pointer; }
[data-mv-dcv] .mv-node-row, [data-mv-sid] .mv-node-row { transition:background .12s; }

/* Edge-hover-feedback: maak pijl dikker zodat user weet dat ze klikbaar is.
   Dit lost het verwarrings-issue op waar user niet doorheeft dat hij eerst
   op de pijl moet klikken om hem te kunnen verslepen (analoog aan BPMN). */
.fc-svg .fc-edge-hit {
  cursor: pointer;
}
.fc-svg .fc-edge:hover .fc-edge-visible {
  stroke-width: 4 !important;
  filter: drop-shadow(0 0 2px rgba(14, 165, 233, 0.4));
}

/* Endpoint-handles op edges: drag om eindpunt naar andere kant/shape te slepen */
.fc-svg .fc-edge-endpoint-handle {
  fill: var(--editor-selection-color, #0EA5E9);
  stroke: white;
  stroke-width: 2;
  cursor: move;
  pointer-events: all;
  transition: r 0.12s ease;
}
.fc-svg .fc-edge-endpoint-handle:hover {
  r: 9;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.6));
}
.fc-editor.fc-dragging-endpoint { cursor: crosshair; }
.fc-editor.fc-dragging-endpoint .fc-svg { cursor: crosshair; }

/* ============ FEEDBACK-BANNER (Bewerken + Interview) ============ */
.feedback-banner {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 2px solid #ef4444;
  border-left: 6px solid #dc2626;
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 18px 0;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
}
.feedback-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.feedback-banner-icon {
  font-size: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.feedback-banner-head h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #991b1b;
  letter-spacing: -0.2px;
}
.feedback-banner-close {
  background: white;
  border: 1px solid #fca5a5;
  color: #991b1b;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.feedback-banner-close:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}
.feedback-banner-sub {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
}
.feedback-banner-body {
  background: white;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #450a0a;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.feedback-banner-divider {
  height: 1px;
  background: #fecaca;
  margin: 14px 0 10px;
}
.feedback-banner-subhead {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: #991b1b;
}
.feedback-banner-questions {
  margin: 0;
  padding-left: 20px;
  color: #450a0a;
  font-size: 13px;
  line-height: 1.6;
}
.feedback-banner-questions li { margin-bottom: 3px; }

/* ============ BEWERKEN EMPTY-STATE ============ */
.edit-empty-state {
  padding: 60px 40px;
  background: white;
  border: 1px dashed var(--border);
  border-radius: 14px;
  text-align: center;
  margin: 20px 0;
}
.edit-empty-state .edit-empty-icon { font-size: 42px; margin-bottom: 12px; }
.edit-empty-state h3 { margin: 0 0 6px; }
.edit-empty-state .edit-empty-sub { color: var(--text-light); font-size: 13px; margin-bottom: 18px; }
.edit-empty-state .edit-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ============ PROCESMODEL TREE VIEW (legacy, voor Lijst-toggle) ============ */
.processmodel-view { }
.processmodel-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}
.processmodel-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.processmodel-tab {
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.processmodel-tab:hover { border-color: var(--primary); }
.processmodel-tab.active { background: var(--primary); color: white; border-color: var(--primary); }
.processmodel-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}
.processmodel-tab.active .processmodel-badge { background: rgba(255,255,255,0.25); color: white; }
.processmodel-actions { display: flex; gap: 8px; }
.processmodel-content {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.processmodel-overview h3 { margin-top: 0; }
.processmodel-overview-desc { color: var(--text-light); font-size: 13px; line-height: 1.5; }
.processmodel-stats { display: flex; gap: 16px; margin: 18px 0; flex-wrap: wrap; }
.processmodel-stat {
  flex: 1 1 120px;
  background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.04));
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.processmodel-stat strong { display: block; font-size: 24px; color: var(--primary); }
.processmodel-stat span { font-size: 11px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }

/* Tree nodes */
.pm-tree { display: flex; flex-direction: column; gap: 10px; }
.pm-node {
  padding: 10px 12px;
  border-left: 3px solid var(--border);
  border-radius: 6px;
  background: rgba(0,0,0,0.01);
}
.pm-node.depth-0 { border-left-color: var(--primary); background: rgba(var(--primary-rgb, 51, 0, 255), 0.03); padding: 14px 16px; }
.pm-node.depth-1 { border-left-color: var(--accent, #8b5cf6); margin-left: 20px; }
.pm-node.depth-2 { border-left-color: #eab308; margin-left: 40px; }
.pm-node.depth-3 { border-left-color: #ec4899; margin-left: 60px; }
.pm-node-head { display: flex; justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-node-name { font-weight: 600; font-size: 14px; color: var(--text); flex: 0 1 auto; }
.pm-node.depth-0 .pm-node-name { font-size: 15px; }
.pm-node-head .pm-node-action { margin-left: auto; }

/* Niveau-label pill achter elke naam */
.pm-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.06);
  color: var(--text-light);
  white-space: nowrap;
}
/* Kleurcodering per diepte — subtiel, volgt depth-kleuren van pm-node */
.pm-level-badge.depth-0 { background: rgba(var(--primary-rgb, 51, 0, 255), 0.12); color: var(--primary); }
.pm-level-badge.depth-1 { background: rgba(var(--accent-rgb, 139, 92, 246), 0.14); color: var(--accent-dark, #7c3aed); }
.pm-level-badge.depth-2 { background: rgba(234,179,8,0.18); color: #a16207; }
.pm-level-badge.depth-3 { background: rgba(236,72,153,0.14); color: #be185d; }
.pm-node.is-leaf { cursor: pointer; transition: background 0.15s; }
.pm-node.is-leaf:hover { background: var(--primary-soft, rgba(var(--primary-rgb, 51, 0, 255), 0.06)); }
.pm-node.is-leaf .pm-node-name { cursor: pointer; }
.pm-node-action {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}
.pm-node-action:hover { background: var(--primary); color: white; border-color: var(--primary); }
.pm-node-desc { margin: 6px 0 0; font-size: 12px; color: var(--text-light); line-height: 1.5; }
.pm-node-children { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* Roles tab */
.pm-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pm-role { padding: 12px 14px; background: rgba(0,0,0,0.02); border-radius: 10px; }
.pm-role h4 { margin: 0 0 4px; font-size: 14px; }
.pm-role p { margin: 0; font-size: 12px; color: var(--text-light); line-height: 1.4; }

/* ============ FLEX HELPERS ============ */
.flex { display: flex; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* ============ DASHBOARD ============ */
.view-dashboard {
  overflow-y: auto;
  display: none;
}
.view-dashboard.active { display: block; }

.dash-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
  width: 100%;
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}

.dash-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.dash-sub {
  font-size: 14px;
  color: var(--text-light);
}

.dash-header-actions {
  display: flex;
  gap: 8px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
}
.kpi-alert::before { background: var(--error); }

.kpi-label {
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
  letter-spacing: -0.8px;
}
.kpi-trend {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
}
.kpi-trend-up { color: var(--accent-dark); }
.kpi-trend-down { color: var(--error); }
.kpi-alert .kpi-value { color: var(--error); }

.dash-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-light);
}
.dash-card-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.dash-card-half { margin-bottom: 0; }

.dash-filter { display: flex; gap: 8px; }

.dash-search, .dash-select {
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: white !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
}
.dash-search:focus, .dash-select:focus {
  outline: none;
  border-color: var(--primary) !important;
}

.schema-list { padding: 8px 0; }

.schema-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-light);
}
.schema-row:hover { background: var(--bg-sidebar); }
.schema-row:last-child { border-bottom: none; }

.schema-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.schema-row-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.schema-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--bg-sidebar);
  padding: 2px 8px;
  border-radius: 4px;
}

.deadline-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}
.deadline-ok { background: var(--accent-soft); color: var(--accent-dark); }
.deadline-soon { background: #fff3d6; color: #b76e00; }
.deadline-urgent { background: #ffe0cc; color: #c14a00; }
.deadline-overdue { background: #fee2e2; color: var(--error); }

.schema-tracker {
  display: flex;
  align-items: center;
  margin: 12px 0;
  max-width: 520px;
}
.tr-step {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.tr-step.done { background: var(--accent); border-color: var(--accent); }
.tr-step.active {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.tr-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 2px;
}
.tr-step.done + .tr-line { background: var(--accent); }

.schema-row-meta {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.meta-dot { color: var(--text-muted); }
.stage-label { font-weight: 600; color: var(--primary); }

.schema-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.assignee {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 32px; height: 32px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.assignee-name { font-size: 13px; font-weight: 600; color: var(--text); }
.assignee-email { font-size: 11px; color: var(--text-light); }

.schema-actions { display: flex; gap: 4px; }

/* Agenda */
.agenda-list { padding: 12px 22px 22px; }

.agenda-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.agenda-item:last-child { border-bottom: none; }

.agenda-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 8px;
  padding: 6px;
}
.agenda-date strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.agenda-date span {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

.agenda-content { flex: 1; }
.agenda-title { font-size: 13px; font-weight: 600; color: var(--text); }
.agenda-when { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.ag-overdue .agenda-date { background: #fee2e2; color: var(--error); }
.ag-overdue .agenda-title { color: var(--error); }

/* Team */
.team-list { padding: 12px 22px 22px; }

.team-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.team-row:last-child { border-bottom: none; }
.team-info { flex: 1; }
.team-name { font-size: 13px; font-weight: 600; color: var(--text); }
.team-role { font-size: 11px; color: var(--text-light); }

.team-load { text-align: right; }
.load-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  display: block;
  line-height: 1;
}
.load-label {
  font-size: 10px;
  color: var(--text-light);
  text-transform: uppercase;
  font-weight: 600;
}

/* Forms */
.assignment-form-grid { padding: 22px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-field { display: flex; flex-direction: column; }

.form-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: white !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  width: 100% !important;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.btn-text {
  background: transparent !important;
  border: none !important;
  color: var(--primary) !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  cursor: pointer;
  border-radius: 4px !important;
}
.btn-text:hover { background: var(--primary-soft) !important; }

.empty-state {
  text-align: center;
  color: var(--text-light);
  padding: 32px;
  font-size: 13px;
}

/* ============ SETTINGS ============ */
.view-settings {
  overflow-y: auto;
  display: none;
}
.view-settings.active { display: block; }

.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  gap: 24px;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
  position: sticky;
  top: 32px;
}

.set-tab {
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-light) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  text-align: left !important;
  border-radius: 8px !important;
  cursor: pointer;
}
.set-tab:hover {
  background: white !important;
  color: var(--text) !important;
}
.set-tab.active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

.settings-content {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--card-shadow);
}

.set-panel { display: none; }
.set-panel.active { display: block; }

.set-panel h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 24px;
}

.set-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-light);
}
.set-section:last-child { border-bottom: none; }

.set-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}

.set-hint {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 12px;
  line-height: 1.5;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.check-row input { accent-color: var(--primary); }

.brand-scanner-section {
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
  padding: 20px;
  border-radius: 14px;
  border-bottom: none;
  border: 2px dashed var(--primary);
}

.scanner-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.scan-result {
  background: white;
  padding: 16px;
  border-radius: 10px;
  margin-top: 12px;
}
.scan-result.hidden { display: none; }
.scan-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-light); }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 600px;
}
.color-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--bg-sidebar);
  border-radius: 8px;
}
.color-input span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.color-input input[type="color"] {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

.shape-colors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  max-width: 600px;
}
.shape-color-row {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-sidebar);
  border-radius: 8px;
}
.shape-label { font-size: 13px; font-weight: 600; color: var(--text); }
.shape-color-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-light);
}
.shape-color-field input[type="color"] {
  width: 32px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.users-list { display: flex; flex-direction: column; gap: 8px; }

.user-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-sidebar);
  border-radius: 8px;
}
.user-info { min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-email { font-size: 11px; color: var(--text-light); }
.user-role {
  padding: 5px 8px !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  background: white !important;
}
.user-delete {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 18px !important;
  padding: 0 8px !important;
  cursor: pointer;
}
.user-delete:hover { color: var(--error) !important; }

.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }

/* ============ Properties panel (canvas step) ============ */
.properties-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 320px;
  background: white;
  border-left: 1px solid var(--border) !important;
  z-index: 40;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -4px 0 20px rgba(10,10,31,0.08);
}
.properties-panel.open { display: flex; }

.properties-header {
  background: var(--bg-sidebar) !important;
  border-bottom: 1px solid var(--border) !important;
}

.properties-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: white !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  color: var(--text-light) !important;
  padding: 0 !important;
}
.properties-toggle:hover {
  background: var(--bg-sidebar) !important;
  color: var(--primary) !important;
}
.properties-toggle.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

/* Status bar */
.status-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

/* AI / Interview / Walker panels need higher z-index than action bar */
.ai-gen-panel,
.interview-panel {
  z-index: 300 !important;
  font-family: var(--font) !important;
}
.interview-panel {
  top: 56px !important;
  height: calc(100vh - 56px) !important;
}
.ai-gen-panel {
  /* Full-screen modal (positionering geregeld in styles.css);
     hier alleen het project-font afdwingen. */
  font-family: var(--font) !important;
}

/* Stencil menu */
.stencil-menu {
  top: 40px !important;
  background: white !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 40px rgba(10,10,31,0.12) !important;
  border-radius: 10px !important;
}

/* BPMN palette inside canvas */
.djs-palette {
  top: 12px !important;
  left: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: var(--card-shadow) !important;
  background: white !important;
}

/* Modal */
.modal {
  font-family: var(--font);
}
.modal-content {
  border-radius: 14px;
}

.toast { font-family: var(--font); }

/* Scrollbars */
.sidebar::-webkit-scrollbar,
.wizard-body::-webkit-scrollbar,
.view-dashboard::-webkit-scrollbar,
.view-settings::-webkit-scrollbar,
.settings-content::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-thumb,
.wizard-body::-webkit-scrollbar-thumb,
.view-dashboard::-webkit-scrollbar-thumb,
.view-settings::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 1100px) {
  .dash-row { grid-template-columns: 1fr; }
  .schema-row { grid-template-columns: 1fr; }
  .schema-row-side { align-items: flex-start; }
}

@media (max-width: 900px) {
  .sidebar { width: 200px; }
  .option-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
}

/* ================================================================
   Klant-admin onboarding — huisstijl-instellingen banner + popup
   (branding-admin.js v121)
   ================================================================ */

/* Banner bovenaan body. Schuift de hele app naar beneden via padding-top
   op body wanneer de banner zichtbaar is. */
.brand-setup-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 1px solid #f59e0b;
  font-size: 13px;
  color: #78350f;
  z-index: 10001;        /* boven de topbar (1000) en demo-banner (10000) */
  font-family: var(--font);
}
body.has-brand-setup-banner { padding-top: 40px; }
body.has-brand-setup-banner .topbar { top: 40px; }

.brand-setup-banner-icon { font-size: 16px; }
.brand-setup-banner-text { flex: 1; font-weight: 500; }
.brand-setup-banner-cta {
  display: inline-block;
  padding: 5px 14px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  text-decoration: none;
  border-radius: var(--brand-radius, 8px);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  transition: filter 0.15s;
}
.brand-setup-banner-cta:hover { filter: brightness(1.08); }
.brand-setup-banner-close {
  background: transparent;
  border: none;
  color: #78350f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}
.brand-setup-banner-close:hover {
  opacity: 1;
  background: rgba(120, 53, 15, 0.1);
}

/* Pop-up modal — overlay vult viewport, kaart in het midden */
.brand-setup-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 31, 0.55);
  backdrop-filter: blur(3px);
  z-index: 10002;        /* boven de banner */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: brandPopupFadeIn 0.2s ease-out;
}
@keyframes brandPopupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.brand-setup-popup-card {
  background: white;
  border-radius: 16px;
  padding: 32px 36px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(10, 10, 31, 0.35);
  text-align: center;
  font-family: var(--font);
  animation: brandPopupSlideUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes brandPopupSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.brand-setup-popup-icon {
  font-size: 44px;
  margin-bottom: 12px;
}
.brand-setup-popup-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}
.brand-setup-popup-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0 0 18px;
}
.brand-setup-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.brand-setup-popup-later {
  padding: 11px 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--brand-radius, 8px);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.brand-setup-popup-later:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
}
.brand-setup-popup-go {
  padding: 11px 22px;
  background: var(--primary);
  color: var(--on-primary, #fff);
  border-radius: var(--brand-radius, 8px);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: filter 0.15s;
}
.brand-setup-popup-go:hover { filter: brightness(1.08); }
.brand-setup-popup-note {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin: 18px 0 0 !important;
}

/* bpmn-js plaatst standaard een "powered by bpmn.io"-logo rechts onderin
 * de canvas. Voor onze app is dat onwenselijk (eigen branding). De selector
 * dekt zowel de officiële .bjs-powered-by als oudere varianten. */
.bjs-powered-by,
a.bjs-powered-by,
.bjs-container > a:last-child[href*="bpmn.io"] {
  display: none !important;
}

/* ============================================================================
 * WORKSHOP-MODUS — derde tab in Procesmodel Herijken
 * Alle classes prefix `ws-`. Themes via [data-ws-theme] op de container.
 * ============================================================================ */

/* In workshop-modus: verberg legenda (filter-chips + zoek + bulk + Workshop-PDF)
 * en de progress-footer onderaan — die horen bij de Wijzigingen-tab, niet bij
 * de Workshop. Workshop heeft eigen broodkruimel, voortgangsbalk en PDF-knop. */
.mv-overlay.mv-overlay-workshop-active .mv-legenda,
.mv-overlay.mv-overlay-workshop-active .mv-bottom-info {
  display: none !important;
}
.mv-overlay.mv-overlay-workshop-active .mv-views {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.mv-overlay.mv-overlay-workshop-active [data-mv-view-content="workshop"] {
  height: 100%;
}

[data-mv-view-content="workshop"] {
  --ws-bg: #f8fafc;
  --ws-surface: #ffffff;
  --ws-surface-soft: #f1f5f9;
  --ws-border: #e2e8f0;
  --ws-border-strong: #cbd5e1;
  --ws-text: #0f172a;
  --ws-text-soft: #475569;
  --ws-text-mute: #94a3b8;
  --ws-accent: #1e3a8a;
  --ws-accent-soft: #dbeafe;
  --ws-accent-strong: #1e40af;
  --ws-status-akkoord: #16a34a;
  --ws-status-akkoord-soft: #dcfce7;
  --ws-status-aangepast: #d97706;
  --ws-status-aangepast-soft: #fef3c7;
  --ws-status-geparkeerd: #6366f1;
  --ws-status-geparkeerd-soft: #e0e7ff;
  --ws-status-afgewezen: #dc2626;
  --ws-status-afgewezen-soft: #fee2e2;
  --ws-status-pending: #94a3b8;
  --ws-status-pending-soft: #f1f5f9;
  --ws-radius: 10px;
  --ws-radius-small: 6px;
  --ws-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ws-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --ws-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  height: 100%;
  background: var(--ws-bg);
  color: var(--ws-text);
  font-family: var(--ws-font-stack);
  overflow: hidden;
}

/* ---------- Theme: Strak (Linear/Notion-stijl) ---------- */
[data-mv-view-content="workshop"][data-ws-theme="strak"] {
  --ws-bg: #fafafa;
  --ws-surface: #ffffff;
  --ws-surface-soft: #f5f5f5;
  --ws-border: #ececec;
  --ws-border-strong: #d4d4d4;
  --ws-text: #18181b;
  --ws-text-soft: #525252;
  --ws-accent: #18181b;
  --ws-accent-soft: #f4f4f5;
  --ws-accent-strong: #000000;
  --ws-radius: 6px;
  --ws-radius-small: 4px;
  --ws-shadow: none;
  --ws-shadow-md: 0 1px 4px rgba(0,0,0,0.04);
}

/* ---------- Theme: Kleurrijk (Miro/dashboard-stijl) ---------- */
[data-mv-view-content="workshop"][data-ws-theme="kleurrijk"] {
  --ws-bg: #fef3ec;
  --ws-surface: #ffffff;
  --ws-surface-soft: #fff7ed;
  --ws-border: #fed7aa;
  --ws-border-strong: #fb923c;
  --ws-text: #1c1917;
  --ws-text-soft: #57534e;
  --ws-accent: #ea580c;
  --ws-accent-soft: #ffedd5;
  --ws-accent-strong: #c2410c;
  --ws-status-akkoord: #15803d;
  --ws-status-aangepast: #ca8a04;
  --ws-status-geparkeerd: #7c3aed;
  --ws-status-afgewezen: #dc2626;
  --ws-radius: 14px;
  --ws-radius-small: 10px;
  --ws-shadow: 0 2px 6px rgba(234, 88, 12, 0.12);
  --ws-shadow-md: 0 8px 24px rgba(234, 88, 12, 0.18);
}

/* ---------- Theme: Formeel (Mavim-look) ---------- */
[data-mv-view-content="workshop"][data-ws-theme="formeel"] {
  --ws-bg: #ffffff;
  --ws-surface: #ffffff;
  --ws-surface-soft: #f9fafb;
  --ws-border: #d1d5db;
  --ws-border-strong: #9ca3af;
  --ws-text: #111827;
  --ws-text-soft: #4b5563;
  --ws-accent: #1f2937;
  --ws-accent-soft: #f3f4f6;
  --ws-accent-strong: #111827;
  --ws-radius: 2px;
  --ws-radius-small: 2px;
  --ws-shadow: none;
  --ws-shadow-md: none;
  --ws-font-stack: Georgia, 'Times New Roman', serif;
}
[data-mv-view-content="workshop"][data-ws-theme="formeel"] .ws-card,
[data-mv-view-content="workshop"][data-ws-theme="formeel"] .ws-tile,
[data-mv-view-content="workshop"][data-ws-theme="formeel"] .ws-side-item {
  border-width: 1px;
  border-style: solid;
  border-color: var(--ws-border-strong);
}

/* ---------- Shell layout ---------- */
.ws-shell {
  display: flex;
  height: 100%;
  width: 100%;
}
.ws-sidebar {
  width: 280px;
  flex: 0 0 280px;
  background: var(--ws-surface);
  border-right: 1px solid var(--ws-border);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: width 0.18s ease, flex-basis 0.18s ease;
  overflow: hidden;
}
.ws-sidebar.ws-sidebar-collapsed {
  width: 36px;
  flex-basis: 36px;
}
.ws-sidebar.ws-sidebar-collapsed .ws-sidebar-inner { display: none; }
.ws-sidebar-toggle {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ws-border-strong);
  background: var(--ws-surface);
  color: var(--ws-text-soft);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}
.ws-sidebar-toggle:hover { background: var(--ws-surface-soft); }
.ws-sidebar-inner {
  padding: 36px 12px 16px;
  overflow-y: auto;
  flex: 1;
}
.ws-tree-header { margin-bottom: 12px; padding: 0 4px; }
.ws-tree-band { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ws-accent); }
.ws-tree-band-hint { font-size: 10px; color: var(--ws-text-mute); margin-top: 2px; }

.ws-tree-overview {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  cursor: pointer;
  text-align: left;
  margin-bottom: 12px;
  font-family: inherit;
  color: inherit;
}
.ws-tree-overview:hover { background: var(--ws-accent-soft); border-color: var(--ws-accent); }
.ws-tree-overview.ws-tree-active { background: var(--ws-accent-soft); border-color: var(--ws-accent); }
.ws-tree-overview-icon { font-size: 16px; }
.ws-tree-overview-title { font-size: 13px; font-weight: 600; }
.ws-tree-overview-meta { font-size: 11px; color: var(--ws-text-soft); margin-top: 2px; }

.ws-tree-clusters { display: flex; flex-direction: column; gap: 2px; }
.ws-tree-cluster {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ws-radius-small);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.ws-tree-cluster:hover { background: var(--ws-surface-soft); }
.ws-tree-cluster.ws-tree-cluster-active { background: var(--ws-accent-soft); border-color: var(--ws-accent); }
.ws-tree-cluster-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ws-tree-cluster-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.ws-tree-cluster-meta { font-size: 10px; color: var(--ws-text-soft); margin-top: 2px; }

.ws-tree-bps {
  margin: 4px 0 8px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--ws-border);
  padding-left: 8px;
}
.ws-tree-bp { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ws-text-soft); padding: 2px 0; }
.ws-tree-bp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ws-tree-empty { font-size: 11px; color: var(--ws-text-mute); padding: 8px; }
.ws-tree-empty-small { font-size: 10px; color: var(--ws-text-mute); padding: 4px 0; }

/* Statussen — kleurpunt en achtergronden */
.ws-tree-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--ws-status-pending-soft);
  color: var(--ws-status-pending);
  border: 1px solid transparent;
}
.ws-status-akkoord { background: var(--ws-status-akkoord-soft); color: var(--ws-status-akkoord); border-color: var(--ws-status-akkoord); }
.ws-status-aangepast { background: var(--ws-status-aangepast-soft); color: var(--ws-status-aangepast); border-color: var(--ws-status-aangepast); }
.ws-status-geparkeerd { background: var(--ws-status-geparkeerd-soft); color: var(--ws-status-geparkeerd); border-color: var(--ws-status-geparkeerd); }
.ws-status-afgewezen { background: var(--ws-status-afgewezen-soft); color: var(--ws-status-afgewezen); border-color: var(--ws-status-afgewezen); }
.ws-status-pending { background: var(--ws-status-pending-soft); color: var(--ws-status-pending); }

/* ---------- Main content ---------- */
.ws-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }
.ws-subtopbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--ws-surface);
  border-bottom: 1px solid var(--ws-border);
  flex-shrink: 0;
}
.ws-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.ws-crumb { color: var(--ws-text-soft); white-space: nowrap; }
.ws-crumb-sep { color: var(--ws-text-mute); }
.ws-crumb-current { color: var(--ws-text); font-weight: 600; }
.ws-crumb-link {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--ws-accent); text-decoration: underline; text-underline-offset: 2px;
}
.ws-crumb-link:hover { color: var(--ws-accent-strong); }

.ws-progress-wrap { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 380px; }
.ws-progress-bar { flex: 1; height: 6px; background: var(--ws-surface-soft); border-radius: 3px; overflow: hidden; }
.ws-progress-fill { height: 100%; background: var(--ws-accent); transition: width 0.3s ease; }
.ws-progress-text { font-size: 11px; color: var(--ws-text-soft); white-space: nowrap; }

.ws-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-small);
  font-size: 12px;
  font-family: inherit;
  color: var(--ws-text);
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}
.ws-action-btn:hover { background: var(--ws-surface-soft); border-color: var(--ws-accent); }
.ws-action-pdf { background: var(--ws-accent); color: #fff; border-color: var(--ws-accent); }
.ws-action-pdf:hover { background: var(--ws-accent-strong); color: #fff; }
.ws-action-icon { font-size: 13px; }

/* ---------- Band segmented control (Best./Prim./Onderst.) ---------- */
.ws-band-segmented {
  display: inline-flex;
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-small);
  padding: 2px;
  gap: 2px;
}
.ws-seg-btn {
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--ws-radius-small) - 1px);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-text-soft);
  cursor: pointer;
}
.ws-seg-btn:hover { background: var(--ws-surface); color: var(--ws-text); }
.ws-seg-btn.ws-seg-btn-active {
  background: var(--ws-surface);
  color: var(--ws-accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* ---------- View tabs (2e sub-topbar): grote zichtbare knoppen ---------- */
.ws-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 18px;
  background: var(--ws-surface-soft);
  border-bottom: 1px solid var(--ws-border);
  flex-shrink: 0;
}
.ws-viewbar-section { display: flex; align-items: center; gap: 8px; }
.ws-viewbar-section-right { margin-left: auto; }
.ws-viewbar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-text-soft); }
.ws-view-tabs { display: inline-flex; gap: 4px; }
.ws-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-small);
  font-family: inherit;
  font-size: 12px;
  color: var(--ws-text);
  cursor: pointer;
  white-space: nowrap;
}
.ws-view-tab:hover { border-color: var(--ws-accent); }
.ws-view-tab.ws-view-tab-active {
  background: var(--ws-accent);
  color: #fff;
  border-color: var(--ws-accent);
  font-weight: 600;
}
.ws-view-tab-icon { font-size: 13px; }

/* ---------- Theme tabs: ronde swatches met label ---------- */
.ws-theme-tabs { display: inline-flex; gap: 4px; }
.ws-theme-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: 16px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ws-text-soft);
  cursor: pointer;
  white-space: nowrap;
}
.ws-theme-tab:hover { border-color: var(--ws-accent); color: var(--ws-text); }
.ws-theme-tab.ws-theme-tab-active {
  background: var(--ws-accent-soft);
  color: var(--ws-accent);
  border-color: var(--ws-accent);
  font-weight: 600;
}
.ws-theme-tab-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

/* ---------- Content area ---------- */
.ws-content { flex: 1; overflow: auto; padding: 24px; }
.ws-empty, .ws-empty-view {
  padding: 60px 20px; text-align: center; color: var(--ws-text-soft); font-size: 14px;
}

/* ---------- Overzicht: Voorstel + spoor ---------- */
.ws-overzicht-intro { margin-bottom: 20px; max-width: 720px; }
.ws-overzicht-intro h2 { margin: 0 0 6px; font-size: 22px; color: var(--ws-text); }
.ws-overzicht-intro p { margin: 0; color: var(--ws-text-soft); font-size: 13px; }

.ws-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ws-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 16px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  box-shadow: var(--ws-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  min-height: 180px;
}
.ws-tile:hover { transform: translateY(-1px); box-shadow: var(--ws-shadow-md); border-color: var(--ws-accent); }
.ws-tile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ws-tile-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ws-accent-soft); color: var(--ws-accent);
  font-size: 11px; font-weight: 700;
}
.ws-tile-status { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.ws-tile-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ws-text); }
.ws-tile-meta { font-size: 11px; color: var(--ws-text-soft); margin-bottom: 12px; }
.ws-tile-spoor { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ws-border); }
.ws-tile-spoor-label { font-size: 10px; color: var(--ws-text-mute); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ws-tile-spoor-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-tile-spoor-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ws-accent-soft);
  color: var(--ws-accent);
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
}
.ws-tile-spoor-chip.ws-tile-spoor-alleen { background: var(--ws-status-afgewezen-soft); color: var(--ws-status-afgewezen); }
.ws-tile-spoor-leeg { font-size: 11px; color: var(--ws-text-mute); font-style: italic; }
.ws-tile-onderbouwing { margin-top: 8px; font-size: 11px; color: var(--ws-text-soft); font-style: italic; }

.ws-tile-status-akkoord { border-left: 3px solid var(--ws-status-akkoord); }
.ws-tile-status-aangepast { border-left: 3px solid var(--ws-status-aangepast); }
.ws-tile-status-geparkeerd { border-left: 3px solid var(--ws-status-geparkeerd); }
.ws-tile-status-afgewezen { border-left: 3px solid var(--ws-status-afgewezen); }
.ws-tile-status-pending { border-left: 3px solid transparent; }

.ws-overzicht-alleen {
  margin-top: 28px;
  padding: 14px 16px;
  background: var(--ws-status-afgewezen-soft);
  border: 1px solid var(--ws-status-afgewezen);
  border-radius: var(--ws-radius);
}
.ws-overzicht-alleen-title { font-size: 12px; font-weight: 600; color: var(--ws-status-afgewezen); margin-bottom: 8px; }
.ws-overzicht-alleen-list { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Overzicht: Naast elkaar ---------- */
.ws-naast-elkaar {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 12px;
  align-items: stretch;
}
.ws-naast-col {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-naast-col-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-text-soft); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ws-border); }
.ws-side-item {
  padding: 10px 12px;
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-small);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: default;
}
.ws-side-item-ft { cursor: pointer; background: var(--ws-surface); }
.ws-side-item-ft:hover { border-color: var(--ws-accent); }
.ws-side-item-name { font-size: 13px; font-weight: 600; }
.ws-side-item-path, .ws-side-item-mavim { font-size: 11px; color: var(--ws-text-soft); margin-top: 2px; }
.ws-side-item-status-akkoord { border-left: 3px solid var(--ws-status-akkoord); }
.ws-side-item-status-aangepast { border-left: 3px solid var(--ws-status-aangepast); }
.ws-side-item-status-geparkeerd { border-left: 3px solid var(--ws-status-geparkeerd); }
.ws-side-item-status-afgewezen { border-left: 3px solid var(--ws-status-afgewezen); }
.ws-naast-arrows { display: flex; align-items: center; justify-content: center; }
.ws-naast-arrow-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; color: var(--ws-text-mute); white-space: nowrap; }
.ws-side-empty { font-size: 12px; color: var(--ws-text-mute); padding: 12px; text-align: center; }

/* ---------- Overzicht: Sankey ---------- */
.ws-sankey-wrap { background: var(--ws-surface); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); padding: 18px; }
.ws-sankey-intro h2 { margin: 0 0 4px; font-size: 18px; }
.ws-sankey-intro p { margin: 0 0 14px; color: var(--ws-text-soft); font-size: 12px; }
.ws-sankey-svg { width: 100%; height: auto; max-height: 70vh; }

/* ---------- Overzicht: Matrix ---------- */
.ws-matrix-wrap { background: var(--ws-surface); border: 1px solid var(--ws-border); border-radius: var(--ws-radius); padding: 18px; overflow: auto; }
.ws-matrix-intro h2 { margin: 0 0 4px; font-size: 18px; }
.ws-matrix-intro p { margin: 0 0 14px; color: var(--ws-text-soft); font-size: 12px; }
.ws-matrix { border-collapse: collapse; width: 100%; font-size: 11px; }
.ws-matrix th, .ws-matrix td { border: 1px solid var(--ws-border); padding: 0; }
.ws-matrix-corner { width: 160px; height: 120px; background: var(--ws-surface-soft); }
.ws-matrix-coltitle { vertical-align: bottom; height: 120px; padding: 6px 4px; background: var(--ws-surface-soft); }
.ws-matrix-coltitle-inner { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 600; }
.ws-matrix-rowtitle { padding: 8px 10px; font-weight: 600; background: var(--ws-surface-soft); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ws-matrix-cell { width: 48px; height: 36px; text-align: center; cursor: pointer; font-weight: 600; color: var(--ws-text); }
.ws-matrix-cell:hover { outline: 2px solid var(--ws-accent); outline-offset: -2px; }

/* ---------- Drilldown ---------- */
.ws-drilldown-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ws-border);
}
.ws-back-btn {
  background: transparent;
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-small);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ws-text-soft);
  cursor: pointer;
  white-space: nowrap;
}
.ws-back-btn:hover { background: var(--ws-surface-soft); color: var(--ws-text); }
.ws-drilldown-title { flex: 1; }
.ws-drilldown-title h2 { margin: 0; font-size: 22px; }
.ws-drilldown-sub { font-size: 12px; color: var(--ws-text-soft); margin-top: 2px; }
.ws-next-btn {
  background: var(--ws-status-akkoord);
  border: none;
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--ws-radius-small);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ws-next-btn:hover { filter: brightness(1.05); }

/* ---------- Werkblad-modus ---------- */
.ws-werkblad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ws-werkblad-col {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-werkblad-col-header { padding-bottom: 8px; border-bottom: 1px solid var(--ws-border); margin-bottom: 4px; }
.ws-werkblad-col-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-text-soft); }
.ws-werkblad-col-header h3 { margin: 4px 0 0; font-size: 14px; }
.ws-werkblad-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-werkblad-item {
  padding: 10px 12px;
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-small);
  font-size: 13px;
}
.ws-werkblad-item-name { font-weight: 600; }
.ws-werkblad-item-meta { font-size: 10px; color: var(--ws-text-mute); display: block; margin-top: 2px; }
.ws-werkblad-leeg { font-style: italic; color: var(--ws-text-mute); padding: 12px; text-align: center; }

.ws-werkblad-bp { background: var(--ws-surface); }
.ws-werkblad-item-row { display: flex; align-items: center; gap: 8px; }
.ws-werkblad-item-row .ws-werkblad-item-name { flex: 1; }
.ws-werkblad-item-actions { display: flex; gap: 4px; }
.ws-werkblad-sublist { list-style: none; padding: 0; margin: 8px 0 0 22px; display: flex; flex-direction: column; gap: 4px; }
.ws-werkblad-wp {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-small);
  font-size: 12px;
}
.ws-werkblad-wp-name { flex: 1; }
.ws-werkblad-wp-actions { display: flex; gap: 4px; }

.ws-werkblad-new-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--ws-status-aangepast-soft);
  border: 1px dashed var(--ws-status-aangepast);
  border-radius: var(--ws-radius-small);
}

.ws-add-btn {
  background: transparent;
  border: 1px dashed var(--ws-border-strong);
  border-radius: var(--ws-radius-small);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ws-text-soft);
  cursor: pointer;
  margin-top: 8px;
  width: 100%;
}
.ws-add-btn:hover { background: var(--ws-accent-soft); color: var(--ws-accent); border-color: var(--ws-accent); }
.ws-add-btn-small { width: auto; padding: 4px 10px; margin-top: 6px; font-size: 11px; }

/* ---------- Decision-knoppen ---------- */
.ws-decide-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border-strong);
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-text-soft);
  font-family: inherit;
  padding: 0;
}
.ws-decide-btn:hover { transform: scale(1.08); }
.ws-decide-accept:hover, .ws-decide-accept.ws-decide-active { background: var(--ws-status-akkoord); color: #fff; border-color: var(--ws-status-akkoord); }
.ws-decide-park:hover, .ws-decide-park.ws-decide-active { background: var(--ws-status-geparkeerd); color: #fff; border-color: var(--ws-status-geparkeerd); }
.ws-decide-reject:hover, .ws-decide-reject.ws-decide-active { background: var(--ws-status-afgewezen); color: #fff; border-color: var(--ws-status-afgewezen); }

/* Status-achtergrond op rijen */
.ws-status-bg-akkoord { box-shadow: inset 4px 0 0 var(--ws-status-akkoord); }
.ws-status-bg-aangepast { box-shadow: inset 4px 0 0 var(--ws-status-aangepast); }
.ws-status-bg-geparkeerd { box-shadow: inset 4px 0 0 var(--ws-status-geparkeerd); }
.ws-status-bg-afgewezen { box-shadow: inset 4px 0 0 var(--ws-status-afgewezen); }
.ws-status-bg-pending { box-shadow: none; }

/* ---------- Kaarten-modus ---------- */
.ws-kaarten-stack { display: flex; flex-direction: column; gap: 14px; max-width: 920px; margin: 0 auto; }
.ws-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-text-soft); margin: 12px 0 -4px; padding: 0 4px; }
.ws-section-label-small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-text-soft); margin: 8px 0 4px; }

.ws-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  padding: 16px 18px;
  box-shadow: var(--ws-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-card-cluster { border-left: 4px solid var(--ws-accent); }
.ws-card-bedrijfsproces { border-left: 4px solid var(--ws-accent-strong); }
.ws-card-werkproces { border-left: 4px solid var(--ws-text-mute); padding: 12px 14px; }
.ws-card-status-akkoord { background: linear-gradient(to right, var(--ws-status-akkoord-soft) 0%, var(--ws-surface) 60%); }
.ws-card-status-aangepast { background: linear-gradient(to right, var(--ws-status-aangepast-soft) 0%, var(--ws-surface) 60%); }
.ws-card-status-geparkeerd { background: linear-gradient(to right, var(--ws-status-geparkeerd-soft) 0%, var(--ws-surface) 60%); }
.ws-card-status-afgewezen { background: linear-gradient(to right, var(--ws-status-afgewezen-soft) 0%, var(--ws-surface) 60%); }

.ws-card-header { display: flex; justify-content: space-between; align-items: center; }
.ws-card-niveau { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-text-soft); }
.ws-card-naam { font-size: 17px; font-weight: 600; line-height: 1.3; }
.ws-card-werkproces .ws-card-naam { font-size: 14px; }
.ws-card-naam-oud { color: var(--ws-text-mute); text-decoration: line-through; font-weight: normal; font-size: 14px; }
.ws-card-naam-pijl { color: var(--ws-text-mute); margin: 0 6px; }
.ws-card-naam-nieuw { cursor: text; }
.ws-card-naam-nieuw:hover { background: var(--ws-accent-soft); border-radius: 3px; padding: 0 4px; }

.ws-card-onderbouwing {
  background: var(--ws-surface-soft);
  border-radius: var(--ws-radius-small);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-card-onderbouwing-empty { color: var(--ws-text-mute); font-style: italic; padding: 12px; }
.ws-onderbouwing-veld { display: flex; flex-direction: column; gap: 1px; }
.ws-onderbouwing-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ws-accent); }
.ws-onderbouwing-tekst { font-size: 12px; color: var(--ws-text); line-height: 1.45; }

.ws-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-card-note { margin-top: 4px; }
.ws-card-note summary { font-size: 11px; color: var(--ws-text-soft); cursor: pointer; user-select: none; padding: 4px 0; }
.ws-card-note-area {
  width: 100%;
  min-height: 60px;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-small);
  font-family: inherit;
  font-size: 12px;
  color: var(--ws-text);
  resize: vertical;
}

.ws-card-children {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--ws-surface-soft);
  border-radius: var(--ws-radius-small);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ws-card-new {
  border-style: dashed;
  border-color: var(--ws-status-aangepast);
}

.ws-rename-input,
.ws-new-input {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-small);
  background: var(--ws-surface);
  color: var(--ws-text);
  width: 100%;
  max-width: 460px;
}
.ws-new-input-card { font-size: 16px; font-weight: 600; }
.ws-new-input:focus, .ws-rename-input:focus { outline: 2px solid var(--ws-accent); outline-offset: 1px; }
.ws-icon-btn {
  background: transparent;
  border: 1px solid var(--ws-border-strong);
  border-radius: var(--ws-radius-small);
  width: 24px; height: 24px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ws-text-soft);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.ws-icon-btn:hover { background: var(--ws-status-afgewezen-soft); color: var(--ws-status-afgewezen); border-color: var(--ws-status-afgewezen); }


/* ============================================================================
 * BOOMWEERGAVE — Mavim-stijl tree-vergelijking
 * Twee bomen naast elkaar (Mavim links, FlowTopper rechts) met expand/collapse
 * en 4 kleuren (groen/oranje/rood/grijs-doorgestreept). Classes prefix `bm-`.
 * ============================================================================ */

[data-mv-bomen-mavimstijl] {
  --bm-bg: #ffffff;
  --bm-surface-soft: #f8fafc;
  --bm-border: #e2e8f0;
  --bm-text: #0f172a;
  --bm-text-soft: #475569;
  --bm-text-mute: #94a3b8;
  --bm-accent: #1e3a8a;
  --bm-status-ongewijzigd: #16a34a;
  --bm-status-ongewijzigd-soft: #dcfce7;
  --bm-status-gewijzigd: #d97706;
  --bm-status-gewijzigd-soft: #fef3c7;
  --bm-status-toegevoegd: #dc2626;
  --bm-status-toegevoegd-soft: #fee2e2;
  --bm-status-alleenmavim: #6b7280;
  --bm-status-alleenmavim-soft: #f3f4f6;

  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bm-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--bm-text);
  overflow: hidden;
}

.bm-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--bm-surface-soft);
  border-bottom: 1px solid var(--bm-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bm-legenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bm-legenda-titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bm-text-soft); }
.bm-legenda-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--bm-text); }
.bm-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid transparent; }
.bm-dot-ongewijzigd { background: var(--bm-status-ongewijzigd); }
.bm-dot-gewijzigd { background: var(--bm-status-gewijzigd); }
.bm-dot-toegevoegd { background: var(--bm-status-toegevoegd); }
.bm-dot-alleenmavim { background: var(--bm-status-alleenmavim); }

.bm-toolbar-acties { margin-left: auto; display: flex; gap: 6px; }
.bm-toolbar-btn {
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid var(--bm-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--bm-text);
  cursor: pointer;
}
.bm-toolbar-btn:hover { border-color: var(--bm-accent); color: var(--bm-accent); }

.bm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1200px) {
  .bm-grid { grid-template-columns: 1fr 1fr 280px; }
}
.bm-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bm-bg);
  border-right: 1px solid var(--bm-border);
  overflow: hidden;
}
.bm-pane:last-child { border-right: none; }
.bm-pane-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bm-border);
  background: var(--bm-surface-soft);
  flex-shrink: 0;
}
.bm-pane-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bm-text-soft);
  margin-bottom: 2px;
}
.bm-pane-header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.bm-pane-meta { font-size: 11px; color: var(--bm-text-soft); margin-top: 3px; }

.bm-tree {
  flex: 1;
  overflow: auto;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.bm-empty, .bm-empty-small { padding: 24px; text-align: center; color: var(--bm-text-mute); font-size: 12px; }

/* ---------- Node + rij ---------- */
.bm-node { margin: 0; }
.bm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: default;
  user-select: none;
}
.bm-row:hover { background: var(--bm-surface-soft); }
.bm-twisty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 9px;
  color: var(--bm-text-soft);
  cursor: pointer;
  flex-shrink: 0;
}
.bm-twisty-leaf { cursor: default; color: var(--bm-text-mute); opacity: 0.4; }
.bm-twisty:hover:not(.bm-twisty-leaf) { color: var(--bm-accent); }

.bm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 13px;
  flex-shrink: 0;
}
.bm-icon-cat { color: #ca8a04; }
.bm-icon-cluster { color: #1e3a8a; }
.bm-icon-bp { color: #475569; }
.bm-icon-wp { color: var(--bm-text-mute); }

.bm-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-count, .bm-status-tag {
  font-size: 10px;
  color: var(--bm-text-soft);
  flex-shrink: 0;
  white-space: nowrap;
}
.bm-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

/* Indenting via geneste containers */
.bm-children {
  margin-left: 18px;
  border-left: 1px dashed var(--bm-border);
  padding-left: 6px;
}

/* ---------- Statuskleuren per node ---------- */
.bm-status-ongewijzigd .bm-label { color: var(--bm-text); }
.bm-status-ongewijzigd > .bm-row { border-left: 3px solid var(--bm-status-ongewijzigd); }
.bm-status-ongewijzigd .bm-status-tag-ongewijzigd { background: var(--bm-status-ongewijzigd-soft); color: var(--bm-status-ongewijzigd); border-color: var(--bm-status-ongewijzigd); }

.bm-status-gewijzigd > .bm-row { border-left: 3px solid var(--bm-status-gewijzigd); background: var(--bm-status-gewijzigd-soft); }
.bm-status-gewijzigd .bm-label { color: #92400e; font-weight: 600; }
.bm-status-gewijzigd .bm-status-tag-gewijzigd { background: var(--bm-status-gewijzigd); color: #fff; border-color: var(--bm-status-gewijzigd); }

.bm-status-toegevoegd > .bm-row { border-left: 3px solid var(--bm-status-toegevoegd); background: var(--bm-status-toegevoegd-soft); }
.bm-status-toegevoegd .bm-label { color: #991b1b; font-weight: 600; }
.bm-status-toegevoegd .bm-status-tag-toegevoegd { background: var(--bm-status-toegevoegd); color: #fff; border-color: var(--bm-status-toegevoegd); }

.bm-status-alleenmavim > .bm-row { border-left: 3px solid var(--bm-status-alleenmavim); }
.bm-status-alleenmavim .bm-label {
  color: var(--bm-status-alleenmavim);
  text-decoration: line-through;
  text-decoration-color: var(--bm-status-alleenmavim);
}

/* Groep (icon 15) = organisatorische tussenmap in Mavim — niet aanvinkbaar */
.bm-node-groep > .bm-row-groep {
  background: #f8fafc;
  border-left: 3px dashed #cbd5e1;
  cursor: default;
}
.bm-node-groep > .bm-row-groep:hover { background: #f1f5f9; }
.bm-icon-groep { color: #94a3b8; }
.bm-label-groep {
  color: #64748b;
  font-style: italic;
  font-weight: 400;
}
.bm-kindtag-mini {
  display: inline-block;
  padding: 0 6px;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde047;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.bm-status-alleenmavim .bm-status-tag-alleenmavim { background: var(--bm-status-alleenmavim-soft); color: var(--bm-status-alleenmavim); border-color: var(--bm-status-alleenmavim); }
.bm-status-alleenmavim .bm-icon { opacity: 0.6; }

/* Onbekend = AI heeft deze node niet beoordeeld. Neutraal, geen accent. */
.bm-status-onbekend > .bm-row { border-left: 3px solid transparent; }
.bm-status-onbekend .bm-label { color: var(--bm-text-soft); }
.bm-status-onbekend .bm-status-tag-onbekend { background: transparent; color: var(--bm-text-mute); border-color: var(--bm-border); }

/* Selectie + cross-highlight */
.bm-row[data-bm-row-key] { cursor: pointer; }
.bm-row[data-bm-row-key]:hover { background: #eff6ff; }
.bm-row-selected {
  background: #dbeafe !important;
  outline: 2px solid var(--bm-accent);
  outline-offset: -2px;
}
.bm-row-mate {
  background: #fef3c7 !important;
  outline: 2px dashed #d97706;
  outline-offset: -2px;
}

/* Detail-paneel (3e kolom) */
.bm-detail {
  background: var(--bm-surface-soft);
  border-left: 1px solid var(--bm-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bm-detail-header {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bm-text-soft);
  background: var(--bm-bg);
  border-bottom: 1px solid var(--bm-border);
  flex-shrink: 0;
}
.bm-detail-empty {
  padding: 20px 16px;
  color: var(--bm-text-soft);
  font-size: 13px;
  line-height: 1.55;
}
.bm-detail-empty p { margin: 0 0 10px; }
.bm-detail-empty-hint { font-size: 12px; color: var(--bm-text-mute); font-style: italic; }
.bm-detail-titel {
  padding: 14px 16px;
  background: var(--bm-bg);
  border-bottom: 1px solid var(--bm-border);
}
.bm-detail-pane-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.bm-detail-pane-tag-mavim { background: #fce7f3; color: #be185d; }
.bm-detail-pane-tag-flowtopper { background: var(--bm-status-ongewijzigd-soft); color: var(--bm-status-ongewijzigd); }
.bm-detail-titel h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.3; }
.bm-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  width: auto;
  height: auto;
  border-radius: 12px;
}
.bm-detail-pad { font-size: 11px; color: var(--bm-text-soft); margin-top: 6px; }

.bm-detail .bm-match-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--bm-border);
  overflow-y: auto;
}
.bm-match-statustag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
  background: var(--bm-surface-soft);
}
.bm-mv-status-green { background: var(--bm-status-ongewijzigd-soft); color: var(--bm-status-ongewijzigd); }
.bm-mv-status-yellow { background: #fef9c3; color: #854d0e; }
.bm-mv-status-orange { background: var(--bm-status-gewijzigd-soft); color: var(--bm-status-gewijzigd); }
.bm-mv-status-blue { background: #dbeafe; color: var(--bm-accent); }

.bm-match-pad { font-size: 11px; color: var(--bm-text-soft); margin-bottom: 8px; }
.bm-match-pad-leeg { font-style: italic; color: var(--bm-text-mute); }
.bm-match-uitleg {
  font-size: 12px;
  line-height: 1.5;
  color: var(--bm-text);
  background: var(--bm-bg);
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 3px solid var(--bm-accent);
  margin-bottom: 10px;
}
.bm-onderbouwing { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.bm-onderbouwing-veld {
  background: var(--bm-bg);
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--bm-border);
}
.bm-onderbouwing-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bm-accent); margin-bottom: 2px; }
.bm-onderbouwing-tekst { font-size: 12px; color: var(--bm-text); line-height: 1.45; }

.bm-jump-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--bm-accent);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bm-jump-btn:hover { background: #1e40af; }

.bm-detail-no-match {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--bm-text-soft);
  background: var(--bm-bg);
  border-bottom: 1px solid var(--bm-border);
  font-style: italic;
}

/* Beslissings-knoppen in detail-pane (Akkoord / Geparkeerd / Afwijzen) */
.bm-beslis-rij {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bm-border);
}
.bm-beslis-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bm-text-soft);
  margin-bottom: 6px;
}
.bm-beslis-knoppen { display: flex; gap: 6px; }
.bm-beslis-btn {
  flex: 1;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid var(--bm-border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--bm-text);
  cursor: pointer;
  white-space: nowrap;
}
.bm-beslis-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.bm-beslis-accept:hover, .bm-beslis-accept.bm-beslis-active {
  background: var(--bm-status-ongewijzigd);
  color: #fff;
  border-color: var(--bm-status-ongewijzigd);
}
.bm-beslis-park:hover, .bm-beslis-park.bm-beslis-active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.bm-beslis-reject:hover, .bm-beslis-reject.bm-beslis-active {
  background: var(--bm-status-toegevoegd);
  color: #fff;
  border-color: var(--bm-status-toegevoegd);
}