/* ============================================================
   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);
}
.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;
}

/* ============ 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;
}

.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, #4F46E5);
  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: #4f46e5;
}
.export-schema-row.active {
  background: #eef2ff;
  border-color: #4f46e5;
  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: #4f46e5; 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: #4f46e5; }
.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: 28px;
  max-width: 560px;
  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(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.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; }
.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; }

/* ============ 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; }
.pm-controls .processmodel-actions { margin-left: auto; }

/* ============ 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); }

/* ============ 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; }

/* 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 {
  top: 72px !important;
  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;
}