/* shell-editor.css — golf 13 stap 2 (12-6-2026): deel 6/7 van het voormalige shell.css
   (regels 4771-6488 in bronvolgorde; NIETS herschikt — cascade-volgorde is heilig).
   Inhoud: flowchart-tekentafel, context-pad, thema-wissel, kleurinstellingen-venster. Laden in dezelfde volgorde als hier genummerd. */
/* ============ 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-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; }

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

/* Schaal-grepen (resize) op een geselecteerde flowchart-shape */
.fc-svg .fc-resize-handle {
  fill: white;
  stroke: var(--editor-selection-color, #0EA5E9);
  stroke-width: 1.5;
  pointer-events: all;
  rx: 1.5;
}
.fc-svg .fc-resize-handle:hover {
  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-input { width:42px; height:32px; border:none; cursor:pointer; padding:0; background:none; }
.cs-row-input::-webkit-color-swatch-wrapper { padding:0; }
.cs-row-input::-webkit-color-swatch { border:1.5px solid #cbd5e1; border-radius:6px; }
.cs-row-pair { display:flex; align-items:center; gap:6px; }
.cs-row-pair-label { font-size:11px; color:#64748b; font-weight:500; }
.cs-modal-actions { display:flex; gap:8px; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid #e2e8f0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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