/* Beheer > Workflow: de workflow-editor (stappen-lijst + klikbare diagram-
 * weergave met config-tiles) en de berichtenkant. Global huisstijl: vlakke
 * kaarten met volledige 1px-rand, design-tokens, geen dikke linker-accentbalk.
 * Eerder zat dit als geinjecteerde <style> in de views; nu een echte stylesheet
 * (gelinkt in index.html). */

/* ---- Paginaraster + linker workflow-lijst (de tiles) ---------------------- */
/* BASIS (niet-full-bleed): de Workflow-activiteiten- en Workflow-bouwer-schermen
 * delen de .wf*-klassen maar staan NIET in isFullbleed; zij houden het
 * paginaraster (lijst | detail in een kaart). */
.wf { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; padding: 16px; align-items: start; }
.wf__bar { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wf__bar h1 { font: 600 1.1rem/1.2 var(--font-heading, inherit); margin: 0 auto 0 0; color: var(--ink-900); }
.wf__lijst { display: flex; flex-direction: column; gap: 6px; }
.wf__detail { border: 1px solid var(--lijn, #d9e1ea); border-radius: 12px; background: #fff; padding: 16px; min-height: 200px; }

/* HOOFD-Workflow-scherm = full-bleed (Outlook-model, gelijk aan mail/listgrid):
 * vult het venster, panelen scrollen intern, geen paginakaart-padding. Alleen dit
 * scherm staat in isFullbleed, dus deze overrides raken de andere twee niet. */
.app--fullbleed .wf { display: flex; flex-direction: column; padding: 0; gap: 0; }
/* De paginatitel staat al in de topbar; deze balk houdt alleen de paginabrede
   acties (Importeer / Nieuwe workflow), netjes rechts uitgelijnd. */
.app--fullbleed .wf__bar { flex: 0 0 auto; justify-content: flex-end; padding: 10px 16px; border-bottom: 1px solid var(--lijn, #d9e1ea); }
.app--fullbleed .wf__body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.app--fullbleed .wf__lijst { flex: 0 0 var(--wf-lijst-breedte, 260px); min-width: 0; min-height: 0; overflow-y: auto; padding: 10px; border-right: 1px solid var(--lijn, #d9e1ea); background: var(--bg-50, #f7f9fc); transition: flex-basis .15s ease; }
.app--fullbleed .wf__detail { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 0; border-radius: 0; }
.app--fullbleed .wf__detail > .wf__meta { padding: 12px 16px 0; }
.app--fullbleed .wf__detail > .wf__node-sub { padding: 2px 16px 8px; margin: 0; }
.app--fullbleed .wf__weergave { flex: 1 1 auto; min-height: 0; }
.app--fullbleed .wf__weergave--diagram { display: flex; min-width: 0; overflow: hidden; }
.app--fullbleed .wf__weergave--stappen, .app--fullbleed .wf__weergave--instellingen { overflow-y: auto; padding: 4px 16px 16px; }
/* Inklapbare lijst-rail (alleen het hoofdscherm heeft de lijst-kop + toggle). */
.wf--lijst-dicht .wf__lijst { flex-basis: 48px; }
.wf--lijst-dicht .wf__split--lijst { display: none; }
.wf__lijst-kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.wf__lijst-titel { font: 600 .72rem/1 var(--font-heading, inherit); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500, #5b6b7c); }
.wf--lijst-dicht .wf__lijst-kop { justify-content: center; }
.wf--lijst-dicht .wf__def, .wf--lijst-dicht .wf__lijst-titel, .wf--lijst-dicht .wf__leeg { display: none; }
.wf:not(.wf--lijst-dicht) .wf__lijst-ico-dicht { display: none; }
.wf--lijst-dicht .wf__lijst-ico-open { display: none; }
.wf__def { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px;
  border: 1px solid var(--lijn, #d9e1ea); border-radius: 10px; background: #fff; cursor: pointer; }
.wf__def[aria-current="true"] { border-color: var(--blue-700, #004780); box-shadow: 0 0 0 1px var(--blue-700, #004780); }
.wf__def small { color: var(--ink-500, #5b6b7c); }
.wf__def--uit { opacity: .55; }

/* ---- Detail: kop, chips, weergave-schakelaar ------------------------------ */
/* Eén nette toolbar: links de naam, rechts een uitgelijnde groep (status-chips |
   weergave-schakelaar | acties). Alle bedienelementen op dezelfde hoogte (32px),
   verticaal gecentreerd, met dunne scheidingslijntjes tussen de groepen - zo oogt de
   bovenkant rustig en consistent met de rest van de app i.p.v. losse knoppen overal. */
.wf__meta { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; margin: 0 0 2px; }
.wf__meta-titel { font: 600 1.15rem/1.2 var(--font-heading, inherit); margin: 0 auto 0 0; color: var(--ink-900); min-width: 0; }
.wf__meta-acties { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf__status { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf__meta-sep { flex: 0 0 auto; width: 1px; height: 22px; background: var(--lijn, #d9e1ea); }
.wf__meta-icoacties { display: inline-flex; align-items: center; gap: 4px; }
.wf__chip { display: inline-flex; align-items: center; height: 24px; font-size: .75rem; padding: 0 10px; border-radius: 999px; border: 1px solid var(--lijn, #d9e1ea); color: var(--ink-700, #2b3a49); background: var(--bg-50, #f7f9fc); white-space: nowrap; }
.wf__chip--aan { color: #2f6b46; border-color: #b6dcc4; background: #eaf6ef; }
.wf__chip--uit { color: #8a3b3b; border-color: #e3b7b7; background: #fbeeee; }
.wf__schakel { display: inline-flex; height: 32px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; overflow: hidden; }
.wf__schakel-knop { display: inline-flex; gap: 4px; align-items: center; padding: 0 12px; border: 0; background: #fff; color: var(--ink-700, #2b3a49); font: inherit; font-size: .82rem; cursor: pointer; }
.wf__schakel-knop + .wf__schakel-knop { border-left: 1px solid var(--lijn, #d9e1ea); }
.wf__schakel-knop.is-actief { background: var(--blue-700, #004780); color: #fff; }
.wf__schakel-knop svg { width: 14px; height: 14px; }

/* ---- Stappen-lijst (alternatieve weergave) -------------------------------- */
.wf__stappen-uitleg { color: var(--ink-500, #5b6b7c); font-size: .85rem; margin: 4px 0 12px; }
.wf__kaart-acties { margin-left: auto; display: inline-flex; gap: 2px; }
.wf__tak { margin-top: 4px; font-size: .82rem; color: var(--ink-700, #2b3a49); background: var(--bg-50, #f7f9fc); border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; padding: 3px 8px; display: inline-block; }
.wf__add { margin-top: 12px; }
.wf__add > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; width: max-content; }
.wf__add > summary::-webkit-details-marker { display: none; }
.wf__add-menu { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-width: 340px; }
.wf__add-menu button { display: inline-flex; align-items: center; gap: 8px; text-align: left; padding: 8px 12px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; background: #fff; color: var(--ink-900); font: inherit; cursor: pointer; }
.wf__add-menu button:hover { border-color: var(--blue-700, #004780); }
.wf__add-menu svg { width: 16px; height: 16px; color: var(--blue-700, #004780); }
.wf__flow { display: flex; flex-direction: column; gap: 0; margin-top: 12px; }
.wf__flow--stappen { gap: 0; }
.wf__node { border: 1px solid var(--lijn, #d9e1ea); border-radius: 10px; background: #fff; padding: 12px 14px; }
.wf__node.is-eerste { border-color: var(--blue-700, #004780); }
.wf__node.is-eind { border-color: var(--gold-500, #e8b400); }
.wf__node-kop { display: flex; gap: 8px; align-items: center; }
.wf__node-kop b { color: var(--ink-900); }
.wf__nr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-700, #004780); color: #fff; font-size: .8rem; }
.wf__badge { display: inline-flex; gap: 4px; align-items: center; font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-50, #f7f9fc); border: 1px solid var(--lijn, #d9e1ea); color: var(--ink-700, #2b3a49); white-space: nowrap; }
.wf__badge svg { width: 13px; height: 13px; }
.wf__badge--taak { background: #e8f0f8; border-color: #c4dbef; color: var(--blue-700, #004780); }
.wf__badge--bericht { background: #fdf4d8; border-color: #f0dea0; color: #8a6d00; }
.wf__badge--beslissing { background: #efe7fb; border-color: #d7c6f0; color: #5a3ca8; }
.wf__node-sub { color: var(--ink-500, #5b6b7c); font-size: .82rem; margin-top: 4px; }
.wf__pijl { align-self: center; color: var(--ink-400, #8595a6); margin: 2px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wf__pijl small { background: var(--bg-50, #f7f9fc); border: 1px solid var(--lijn, #d9e1ea); border-radius: 999px; padding: 0 8px; color: var(--ink-700, #2b3a49); }

/* ---- "Daarna"/keuzes-bewerker (gedeeld door lijst en tile) ----------------- */
.wf__daarna { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-50, #f7f9fc); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wf__daarna-kop { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500, #5b6b7c); font-weight: 600; }
.wf__daarna-eind { font-size: .85rem; color: var(--ink-500, #5b6b7c); }
.wf__ovg { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wf__ovg-vw { padding: 5px 8px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; font: inherit; font-size: .85rem; min-width: 150px; }
.wf__ovg-pijl { color: var(--ink-500, #5b6b7c); font-size: .82rem; }
.wf__ovg-naar { padding: 5px 8px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; font: inherit; font-size: .85rem; max-width: 260px; background: #fff; }
.wf__ovg-add { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px dashed var(--lijn, #b9c6d4); border-radius: 8px; background: transparent; color: var(--blue-700, #004780); font: inherit; font-size: .82rem; cursor: pointer; }
.wf__ovg-add:hover { border-style: solid; }
.wf__ovg-add svg { width: 13px; height: 13px; }
.wf__add-plus { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; }
.wf__add-plus::-webkit-details-marker { display: none; }
.wf__add-plus svg { width: 14px; height: 14px; }
.wf__add--tussen { margin: 2px 0; }
.wf__add--tussen > summary.wf__add-plus { color: var(--ink-400, #8595a6); font-size: .78rem; opacity: .7; padding: 2px 0; }
.wf__add--tussen > summary.wf__add-plus:hover { opacity: 1; color: var(--blue-700, #004780); }

/* ---- Inline stap-editor (in de lijst) ------------------------------------- */
.wf__editor { margin-top: 10px; border-top: 1px solid var(--lijn, #d9e1ea); padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.wf__editor label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--ink-700, #2b3a49); }
.wf__editor label.breed { grid-column: 1 / -1; }
.wf__editor input, .wf__editor select { padding: 6px 8px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; font: inherit; }
.wf__editor-acties { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.wf__leeg, .wf__bezig, .wf__fout { color: var(--ink-500, #5b6b7c); padding: 24px; text-align: center; }
.wf__breed { grid-column: 1 / -1; }

/* ---- Platte flow-weergave: canvas (smaller) + config-tile (breder) -------- */
.wf__diagram { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.wf__split { flex: 0 0 6px; }
.wf__canvas-host { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
/* De canvas (read-only viewer of bewerkbare Modeler) vult het middenpaneel. */
.wf__canvas-host > .wfd, .wf__canvas-host > .wfb-werk { flex: 1 1 auto; min-width: 0; min-height: 0; }
.wf__canvas-host .wfd__canvas, .wf__canvas-host .wfb__canvas { flex: 1 1 auto; min-height: 0; height: auto; border-radius: 0; border-width: 0; }
/* Het config-paneel mag MEEKRIMPEN (flex-shrink 1) met een bruikbare minimumbreedte,
   zodat het bij in-/uitklappen van de workflowlijst nooit (deels) buiten beeld valt:
   de canvas geeft eerst ruimte prijs (grote flex-basis), daarna krimpt het paneel tot
   zijn minimum. Eerder stond hier flex: 0 0 (niet-krimpend), waardoor het paneel bij
   een smaller detail rechts uit beeld schoof. */
.wf__config { flex: 0 1 var(--wf-config-breedte, 400px); min-width: 300px; min-height: 0; background: #fff; overflow-y: auto; border-left: 1px solid var(--lijn, #d9e1ea); }
.wf__config-leeg { color: var(--ink-500, #5b6b7c); font-size: .9rem; margin: 0; padding: 22px; text-align: center; }
.wf__config-form { display: flex; flex-direction: column; }
/* Kop: gekleurde badge per soort + de staptitel, zodat duidelijk is welke stap je instelt. */
.wf__cfg-head { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--lijn, #d9e1ea); background: var(--bg-50, #f7f9fc); border-radius: 12px 12px 0 0; }
.wf__cfg-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--blue-700, #004780); color: #fff; flex: none; }
.wf__cfg-badge svg { width: 18px; height: 18px; }
.wf__cfg-head--bericht .wf__cfg-badge { background: var(--gold-500, #e8b400); color: var(--blue-700, #004780); }
.wf__cfg-head--beslissing .wf__cfg-badge { background: #5a3ca8; }
.wf__cfg-head--parallel .wf__cfg-badge { background: #2e7d6b; }
.wf__cfg-head--wacht .wf__cfg-badge, .wf__cfg-head--automatisch .wf__cfg-badge { background: var(--ink-500, #5b6b7c); }
.wf__cfg-head--start .wf__cfg-badge { background: var(--ok, #2e7d52); }
.wf__cfg-head--eind .wf__cfg-badge { background: var(--ink-500, #5b6b7c); }
/* Startmoment-keuze (trigger) op het start-element: radiolijst onder elkaar. */
.wf__startkeuze { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.wf__startradio { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-700, #2b3a49); cursor: pointer; }
.wf__startradio input { width: auto; height: auto; flex: none; margin: 0; }
.wf__cfg-voet--start { display: flex; align-items: center; gap: 10px; padding: 0; flex-wrap: wrap; }
.wf__cfg-voet--start .wf__config-status { margin: 0; }
.wf__cfg-head-tekst { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wf__cfg-head-tekst small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500, #5b6b7c); }
.wf__cfg-head-tekst strong { font: 600 1rem/1.25 var(--font-heading, inherit); color: var(--ink-900); }
/* Genummerde secties: leiden stap voor stap. */
.wf__cfg-sectie { padding: 14px 16px; border-bottom: 1px solid #eef2f6; }
.wf__cfg-sectiekop { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 .82rem/1 var(--font-heading, inherit); color: var(--ink-900); }
.wf__cfg-nr { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-700, #004780); color: #fff; font-size: .72rem; flex: none; }
.wf__cfg-veld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: .82rem; color: var(--ink-700, #2b3a49); }
/* display:flex wint anders van het UA-[hidden]; guard zodat bv. het "Welk bericht?"-veld
   verdwijnt bij een niet-bericht-stap. */
.wf__cfg-veld[hidden] { display: none; }
.wf__cfg-veld:last-child { margin-bottom: 0; }
.wf__cfg-veld input, .wf__cfg-veld select { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; font: inherit; background: #fff; }
.wf__cfg-veld input:focus, .wf__cfg-veld select:focus { outline: 2px solid var(--blue-700, #004780); outline-offset: -1px; border-color: var(--blue-700, #004780); }
.wf__cfg-opt { font-size: .7rem; color: var(--ink-400, #8595a6); font-weight: 400; }
.wf__cfg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Voet: primaire Opslaan (goud) + subtiele Verwijderen. */
.wf__cfg-voet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 16px; }
/* De Opslaan/Verwijderen-voet plakt onderaan het scrollende config-paneel
   (.wf__config, overflow-y auto), zodat de knoppen bij lange stapinstellingen in
   beeld blijven - net als de navigatiestrip die al sticky bovenin staat. De
   start-variant zit middenin een sectie en doet niet mee. */
.wf__cfg-voet:not(.wf__cfg-voet--start) {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid var(--lijn, #d9e1ea);
}
.wf__cfg-verwijder { color: #8a3b3b; }
.wf__cfg-opslaan { margin-left: auto; }
.wf__config-status { color: var(--ink-500, #5b6b7c); font-size: .82rem; margin: 0 16px 14px; }

/* Navigatiestrip in de config-tile: vorige/volgende stap + "Stap X van N" met een
 * spring-naar-lijst. Sticky bovenin, zodat navigeren altijd binnen bereik is. */
.wf__cfg-nav { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--bg-50, #f7f9fc); border-bottom: 1px solid var(--lijn, #d9e1ea); border-radius: 12px 12px 0 0; }
.wf__cfg-nav ~ .wf__config-form .wf__cfg-head { border-top-left-radius: 0; border-top-right-radius: 0; }
.wf__cfg-nav-knop[disabled] { opacity: .35; cursor: default; }
.wf__cfg-spring { position: relative; flex: 1 1 auto; min-width: 0; }
.wf__cfg-spring-knop { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; background: #fff; font: 600 .82rem/1 var(--font-heading, inherit); color: var(--ink-900); white-space: nowrap; }
.wf__cfg-spring-knop::-webkit-details-marker { display: none; }
.wf__cfg-spring-knop svg { width: 14px; height: 14px; color: var(--ink-500, #5b6b7c); }
.wf__cfg-spring[open] .wf__cfg-spring-knop { border-color: var(--blue-700, #004780); }
.wf__cfg-springlijst { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); padding: 4px; }
.wf__cfg-spring-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: .85rem; color: var(--ink-900); cursor: pointer; }
.wf__cfg-spring-item:hover { background: var(--bg-50, #f7f9fc); }
.wf__cfg-spring-item.is-actief { background: #e8f0f8; color: var(--blue-700, #004780); font-weight: 600; }
.wf__cfg-spring-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf__cfg-spring-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-700, #004780); color: #fff; font-size: .72rem; }
/* "Daarna"/keuzes binnen de tile: elke keuze een net kaartje, volle breedte. */
.wf__config-daarna { margin-top: 0; background: transparent; padding: 0; gap: 8px; }
.wf__config-daarna .wf__ovg { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; width: 100%; padding: 8px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; background: var(--bg-50, #f7f9fc); }
.wf__config-daarna .wf__ovg-vw { flex: 1 1 100%; min-width: 0; height: 36px; box-sizing: border-box; }
.wf__config-daarna .wf__ovg-pijl { flex: 0 0 auto; }
/* "ga naar" + keuzelijst + verwijderknop blijven samen op een regel: de select rekt
   op (flex-basis 0, dus zijn lange optietekst duwt de knop niet naar een eigen regel),
   de verwijderknop houdt zijn vaste maat. */
.wf__config-daarna .wf__ovg-naar { flex: 1 1 0; min-width: 0; max-width: none; height: 36px; box-sizing: border-box; }
.wf__config-daarna .wf__ovg .btn-ico { flex: 0 0 auto; height: 36px; width: 36px; }
.wf__config-add { margin-top: 8px; }
/* Outline-kolom (#2): klikbare stappenlijst naast het diagram. */
.wf__outline { flex: 0 0 var(--wf-outline-breedte, 210px); min-width: 0; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-50, #f7f9fc); border-right: 1px solid var(--lijn, #d9e1ea); }
.wf__outline-kop { font: 600 .7rem/1 var(--font-heading, inherit); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500, #5b6b7c); padding: 8px 8px 6px; }
.wf__outline-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: .82rem; color: var(--ink-900); cursor: pointer; }
.wf__outline-item:hover { background: var(--bg-50, #f7f9fc); }
.wf__outline-item.is-actief { background: #e8f0f8; color: var(--blue-700, #004780); font-weight: 600; }
.wf__outline-nr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-50, #f7f9fc); border: 1px solid var(--lijn, #d9e1ea); color: var(--ink-700, #2b3a49); font-size: .7rem; }
.wf__outline-item.is-actief .wf__outline-nr { background: var(--blue-700, #004780); border-color: var(--blue-700, #004780); color: #fff; }
.wf__outline-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

/* Status-stip "nog instellen" (#3): bericht zonder sjabloon, beslissing zonder keuzes. */
.wf__statusdot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500, #e8b400); box-shadow: 0 0 0 2px #fff; }

/* Context-strip (#4): waar kom je vandaan / waar kun je heen, als klikbare chips. */
.wf__ctx { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--lijn, #d9e1ea); background: #fbfdff; }
.wf__ctx-rij { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf__ctx-label { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500, #5b6b7c); font-weight: 600; min-width: 54px; }
.wf__ctx-label svg { width: 13px; height: 13px; }
.wf__ctx-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 999px; background: #fff; font: inherit; font-size: .8rem; color: var(--ink-900); cursor: pointer; }
.wf__ctx-chip:hover { border-color: var(--blue-700, #004780); color: var(--blue-700, #004780); }
.wf__ctx-cond { font-size: .68rem; color: #5a3ca8; background: #efe7fb; border-radius: 4px; padding: 0 5px; }

/* Instellingen-tab (#1): definitie-brede instellingen met de trigger voorop. */
.wf__inst { padding: 4px 2px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.wf__inst-uitleg { color: var(--ink-500, #5b6b7c); font-size: .85rem; margin: 0; }
.wf__inst .wf__cfg-veld textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; font: inherit; resize: vertical; }
.wf__inst .wf__cfg-veld textarea:focus { outline: 2px solid var(--blue-700, #004780); outline-offset: -1px; border-color: var(--blue-700, #004780); }
.wf__inst-actief { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-900); }

/* Outline verbergen op smallere schermen (de spring-lijst in de tile blijft). */
/* Smaller scherm: stappenoverzicht (en zijn splitter) verbergen; canvas + tile
 * blijven. De spring-lijst in de tile blijft als alternatief om te navigeren. */
@media (max-width: 1500px) { .wf__outline, .wf__split--outline { display: none; } }
/* Krap: workflowlijst onder het werkblad stapelen i.p.v. ernaast. */
@media (max-width: 900px) {
  .wf__body { flex-direction: column; }
  .wf__split--lijst { display: none; }
  .wf__lijst { flex: 0 0 auto; max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--lijn, #d9e1ea); }
  .wf--lijst-dicht .wf__lijst { flex-basis: auto; }
}

/* ---- bpmn-js canvas-component (workflow-diagram.js) ------------------------ */
.wfd { display: flex; flex-direction: column; gap: 8px; }
.wfd__bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wfd__hint { color: var(--ink-500, #5b6b7c); font-size: .82rem; }
.wfd__lezen { color: var(--ink-500, #5b6b7c); font-size: .85rem; }
.wfd__canvas { height: 68vh; min-height: 420px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 10px; background: #fff; overflow: hidden; }
.wfd__status { color: var(--ink-500, #5b6b7c); font-size: .85rem; margin: 0; }
.wfd__status.is-fout { color: #8a3b3b; }
/* bpmn-js watermerk dimmen (copyright blijft in de gevendorde bron behouden). */
.wfd__canvas .bjs-powered-by { opacity: .35; }
/* Canvas als nette viewer: het BPMN-palet en de bewerk-context verbergen; alle
 * bewerken gebeurt in de config-tile. Slepen/zoomen blijft. */
.wfd__canvas .djs-palette { display: none !important; }
/* Alleen in de read-only viewer (ontwerp 1) verbergen; de bouwer (ontwerp 3,
 * .wfb__canvas) heeft het verbind-pijltje juist nodig. */
.wfd__canvas .djs-context-pad { display: none !important; }

/* Kleur per staptype in het diagram (zelfde semantiek als de config-badges):
 * Start groen, Einde rood, Taak blauw, Bericht goud, Beslissing paars, Parallel
 * groenteal, Wachten/Automatisch grijs. bpmn-js zet fill/stroke als attribuut,
 * dus een CSS-regel wint zonder !important. We kleuren alleen het hoofdvlak
 * (rect/circle/polygon), niet de binnen-icoontjes (path). */
:is(.wfd__canvas, .wfb__canvas) .djs-element .djs-visual > :where(rect, circle, polygon) { transition: fill .15s ease; }
:is(.wfd__canvas, .wfb__canvas) .wfd--start     .djs-visual > :where(rect, circle, polygon) { fill: #e6f5ec; stroke: #2f8f5b; }
:is(.wfd__canvas, .wfb__canvas) .wfd--eind      .djs-visual > :where(rect, circle, polygon) { fill: #fbeeee; stroke: #b5454a; }
:is(.wfd__canvas, .wfb__canvas) .wfd--taak      .djs-visual > :where(rect, circle, polygon) { fill: #e8f0f8; stroke: var(--blue-700, #004780); }
:is(.wfd__canvas, .wfb__canvas) .wfd--bericht   .djs-visual > :where(rect, circle, polygon) { fill: #fdf4d8; stroke: #b88f00; }
:is(.wfd__canvas, .wfb__canvas) .wfd--auto      .djs-visual > :where(rect, circle, polygon) { fill: #eef1f4; stroke: var(--ink-500, #5b6b7c); }
:is(.wfd__canvas, .wfb__canvas) .wfd--beslissing .djs-visual > :where(rect, circle, polygon) { fill: #efe7fb; stroke: #5a3ca8; }
:is(.wfd__canvas, .wfb__canvas) .wfd--parallel  .djs-visual > :where(rect, circle, polygon) { fill: #e3f3ee; stroke: #2e7d6b; }
:is(.wfd__canvas, .wfb__canvas) .wfd--wacht     .djs-visual > :where(rect, circle, polygon) { fill: #eef1f4; stroke: var(--ink-500, #5b6b7c); }
/* De minimap in de hoek netjes binnen de huisstijl. */
.wfd__canvas .djs-minimap { border-radius: 8px; }

/* ---- Workflow (activiteiten): toestand + benoemde commando's (pagina 2) ----
 * Hergebruikt de .wf-layout en .wf__node-kaarten; alleen de commando-rijen zijn
 * nieuw. Vlakke kaarten, geen accentbalk. */
.wfa__intro { color: var(--ink-500, #5b6b7c); font-size: .85rem; }
.wfa__uitleg { color: var(--ink-700, #2b3a49); font-size: .88rem; margin: 0 0 14px; }
.wfa__states { display: flex; flex-direction: column; gap: 12px; }
.wfa__cmds { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wfa__cmds-kop { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500, #5b6b7c); font-weight: 600; }
.wfa__cmd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-50, #f7f9fc); border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; padding: 6px 8px; }
.wfa__cmd > svg { width: 16px; height: 16px; color: var(--ink-400, #8595a6); flex: none; }
.wfa__cmd select, .wfa__cmd input { height: 32px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 7px; background: #fff; font: inherit; font-size: .85rem; padding: 0 8px; box-sizing: border-box; }
.wfa__cmd select { flex: none; }
.wfa__cmd input { flex: 1 1 150px; min-width: 150px; }
.wfa__cmd select:focus, .wfa__cmd input:focus { outline: 2px solid var(--blue-700, #004780); outline-offset: -1px; border-color: var(--blue-700, #004780); }
.wfa__cmd-door { color: var(--ink-500, #5b6b7c); font-size: .82rem; }
.wfa__cmd-del { margin-left: auto; }
.wfa__cmd--lees { color: var(--ink-700, #2b3a49); font-size: .9rem; }
.wfa__cmd--lees .wfa__cmd-naam b { color: var(--blue-700, #004780); }
.wfa__cmd--lees .wfa__cmd-doel { font-weight: 600; color: var(--ink-900); }
.wfa__cmd-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px dashed var(--lijn, #b9c6d4); border-radius: 8px; background: transparent; color: var(--blue-700, #004780); font: inherit; font-size: .82rem; cursor: pointer; }
.wfa__cmd-add:hover { border-color: var(--blue-700, #004780); background: var(--bg-50, #f7f9fc); }
.wfa__cmd-add svg { width: 15px; height: 15px; }
.wfa__leeg { color: var(--ink-500, #5b6b7c); font-size: .85rem; margin: 2px 0; }

/* ---- Workflow-bouwer (ontwerp 3): drag-and-drop Modeler + vereenvoudigd palet ----
 * Canvas (met het palet links, ingebakken door bpmn-js) naast een compacte
 * config-tile. Vlakke kaarten, geen accentbalk. */
.wfb__werk-grid { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 12px; align-items: start; }
.wfb-werk { display: flex; flex-direction: column; gap: 8px; }
.wfb__bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wfb__hint { color: var(--ink-500, #5b6b7c); font-size: .82rem; }
.wfb__canvas { height: 68vh; min-height: 460px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 10px; background: #fff; overflow: hidden; }
/* Het standaard "Powered by bpmn.io"-logo verbergen in de bouwer. */
.wfb__canvas .bjs-powered-by { display: none; }
.wfb__status { color: var(--ink-500, #5b6b7c); font-size: .85rem; margin: 0; }
.wfb__status.is-fout { color: #8a3b3b; }
/* Het vereenvoudigde palet wat ruimer, zodat de iconen lekker aanklikbaar zijn. */
.wfb__canvas .djs-palette { border-radius: 8px; }
/* Eigen SVG-iconen (WhatsApp) in het palet netjes schalen. */
.wfb__canvas .djs-palette .entry > img { width: 22px; height: 22px; display: block; margin: auto; }
/* Alle palet-iconen even groot (font-glyphs en eigen SVG's gelijk) en gecentreerd;
   position: relative voor de gestileerde tooltip hieronder. */
.wfb__canvas .djs-palette .entry { font-size: 22px; display: flex; align-items: center; justify-content: center; position: relative; }
/* Zichtbare feedback: hover + de actieve/geselecteerde tool duidelijk gemarkeerd. */
.wfb__canvas .djs-palette .entry:hover { background: var(--bg-50, #f7f9fc); border-radius: 7px; }
/* Actieve/ingedrukte palet-knop: duidelijk gevuld met een blauwe rand, zodat je
 * altijd ziet welke tool/blok je hebt gekozen (blijft staan, reset niet bij een
 * klik buiten het diagram). Geldt voor bpmn-js' eigen gereedschapsmarkering
 * (highlighted-entry) en onze persistente klik-status (wfb-palet-actief). */
.wfb__canvas .djs-palette .entry.highlighted-entry,
.wfb__canvas .djs-palette .entry.wfb-palet-actief,
.wfb__canvas .djs-palette .entry:focus-visible {
  background: #d5e6f6; border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--blue-700, #004780);
  outline: none;
}
/* Directe, gestileerde tooltip: bpmn-js zet het title-attribuut al, maar de
 * native tooltip is traag/onopvallend. We tonen hem meteen, in huisstijl, rechts
 * naast de palet-knop (leest attr(title)). */
/* Tooltip alleen op hover-apparaten (iOS-dubbeltik, zie B-122). */
@media (hover: hover) and (pointer: fine) {
.wfb__canvas .djs-palette .entry[title]:hover::after {
  content: attr(title);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ink-900, #1c2a39); color: #fff;
  font: 500 .75rem/1.2 var(--font-sans, inherit);
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  z-index: 1000; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
}
.wfb__config { border: 1px solid var(--lijn, #d9e1ea); border-radius: 12px; background: #fff; align-self: start; max-height: 68vh; overflow: auto; }
.wfb__config-leeg { color: var(--ink-500, #5b6b7c); font-size: .9rem; margin: 0; padding: 18px; text-align: center; }
.wfb__config-kop { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--lijn, #d9e1ea); background: var(--bg-50, #f7f9fc); border-radius: 12px 12px 0 0; }
.wfb__config-kop small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500, #5b6b7c); }
.wfb__config-kop strong { font: 600 1rem/1.25 var(--font-heading, inherit); color: var(--ink-900); }
.wfb__config-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--blue-700, #004780); color: #fff; flex: none; }
.wfb__config-badge svg { width: 18px; height: 18px; }
.wfb__config-kop--bericht .wfb__config-badge { background: var(--gold-500, #e8b400); color: var(--blue-700, #004780); }
.wfb__config-kop--beslissing .wfb__config-badge { background: #5a3ca8; }
.wfb__config-kop--parallel .wfb__config-badge { background: #2e7d6b; }
.wfb__config-kop--wacht .wfb__config-badge, .wfb__config-kop--automatisch .wfb__config-badge { background: var(--ink-500, #5b6b7c); }
.wfb__config-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.wfb__veld { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--ink-700, #2b3a49); }
.wfb__veld select, .wfb__veld input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--lijn, #d9e1ea); border-radius: 8px; font: inherit; background: #fff; }
.wfb__veld select:focus, .wfb__veld input:focus { outline: 2px solid var(--blue-700, #004780); outline-offset: -1px; border-color: var(--blue-700, #004780); }
.wfb__config-voet { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.wfb__config-status { color: var(--ink-500, #5b6b7c); font-size: .82rem; }
@media (max-width: 1100px) { .wfb__werk-grid { grid-template-columns: 1fr; } }