/* ═══════════════════════════════════════════════════════════════════════════════
   ONTWERPSYSTEEM "PIJPLIJN" — tokens, Bootstrap-brug, componenten
   Steekwoorden: design tokens, licht/donker thema, data-theme, data-bs-theme,
   kleurmodus, stap-types, pijplijn, knoop, verbinding, badge, tabel, kaart.

   Opzet in drie lagen:
     1. TOKENS      — de enige plek waar kleuren en maten staan.
     2. BOOTSTRAP-BRUG — tokens op Bootstraps eigen --bs-*-variabelen, zodat alle
                      bestaande pagina's de nieuwe stijl erven zonder aanpassing.
     3. COMPONENTEN — wat Bootstrap niet dekt, plus de pijplijn-onderdelen.

   Kleur staat NOOIT hardgecodeerd in een pagina of component: altijd via een token.
   Statuskleur (goed/waarschuwing/fout) staat los van de accentkleur; stap-types
   hebben hun eigen categoriekleuren die met geen van beide botsen.

   Thema's: drie standen. "systeem" zet geen data-theme en volgt prefers-color-scheme;
   een expliciete keuze zet data-theme="light"/"dark". data-bs-theme wordt door het
   script in _Layout.cshtml altijd meegezet, want Bootstrap leest prefers-color-scheme
   niet zelf. Zie de themaschakelaar onderaan _Layout.cshtml.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────── */

:root {
  /* Grond en vlakken — koel grijs met een lichte blauwzweem, geen neutraal grijs */
  --ground:    #eceff3;
  --surface:   #ffffff;
  --panel:     #f7f9fb;
  --dot:       #d8dee6;
  --line:      #ccd5df;
  --line-soft: #e3e9ef;

  /* Tekst */
  --ink:       #131a22;
  --ink-mid:   #4f5b69;
  --ink-soft:  #7d8894;

  /* Eén interactieve kleur */
  --accent:      #0f8b7e;
  --accent-hover:#0c7367;
  --accent-soft: #e3f2f0;
  --on-accent:   #ffffff;

  /* Status — los van het accent */
  --crit:      #c33a30;
  --crit-soft: #fbeae8;
  --warn:      #9a6a10;
  --warn-soft: #fbf2e0;
  --ok:        #237a55;
  --ok-soft:   #e6f2ec;
  --info:      #1f6f9c;
  --info-soft: #e6f1f8;

  /* Categorie — stap-types. Vergelijkbare helderheid, duidelijk verschillende tint. */
  --t-conv:  #0f8b7e;
  --t-lev:   #2563c9;
  --t-oauth: #a9711b;
  --t-api:   #943d7e;
  --t-sftp:  #4f6478;

  /* Codeoppervlak: blijft in beide thema's donker (Monaco, JSON-voorbeelden) */
  --code-bg:  #1e1e1e;
  --code-ink: #d4d4d4;

  /* Dezelfde kleuren als rgb-triplet. Bootstraps kleurutilities (text-*, bg-opacity-*,
     border-*) rekenen met rgba(var(--bs-…-rgb), opacity) en kunnen dus geen hex gebruiken;
     zonder deze tripletten blijven die utilities Bootstraps blauw houden. */
  --accent-rgb: 15, 139, 126;
  --crit-rgb:   195, 58, 48;
  --warn-rgb:   154, 106, 16;
  --ok-rgb:     35, 122, 85;
  --info-rgb:   31, 111, 156;
  --ink-mid-rgb:79, 91, 105;

  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radius:    8px;
  --radius-sm: 6px;
  --radius-pill: 20px;
}

/* Donker via het systeem, tenzij de gebruiker expliciet licht heeft gekozen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #12161b;
    --surface:   #181d24;
    --panel:     #151a20;
    --dot:       #232b34;
    --line:      #2c3540;
    --line-soft: #222a33;

    --ink:       #e7ecf1;
    --ink-mid:   #a6b1bd;
    --ink-soft:  #7b8693;

    --accent:      #3fc4b3;
    --accent-hover:#5ad3c3;
    --accent-soft: #113029;
    --on-accent:   #0b1a17;

    --crit:      #ef7d72;
    --crit-soft: #2e1917;
    --warn:      #dcac57;
    --warn-soft: #2a2314;
    --ok:        #64c295;
    --ok-soft:   #14261d;
    --info:      #6fb6de;
    --info-soft: #12242e;

    --t-conv:  #3fc4b3;
    --t-lev:   #6fa5f0;
    --t-oauth: #d9a961;
    --t-api:   #d580bd;
    --t-sftp:  #93a5b8;

    --accent-rgb: 63, 196, 179;
    --crit-rgb:   239, 125, 114;
    --warn-rgb:   220, 172, 87;
    --ok-rgb:     100, 194, 149;
    --info-rgb:   111, 182, 222;
    --ink-mid-rgb:166, 177, 189;
  }
}

/* Donker expliciet gekozen — wint ook op een licht besturingssysteem */
:root[data-theme="dark"] {
  --ground:    #12161b;
  --surface:   #181d24;
  --panel:     #151a20;
  --dot:       #232b34;
  --line:      #2c3540;
  --line-soft: #222a33;

  --ink:       #e7ecf1;
  --ink-mid:   #a6b1bd;
  --ink-soft:  #7b8693;

  --accent:      #3fc4b3;
  --accent-hover:#5ad3c3;
  --accent-soft: #113029;
  --on-accent:   #0b1a17;

  --crit:      #ef7d72;
  --crit-soft: #2e1917;
  --warn:      #dcac57;
  --warn-soft: #2a2314;
  --ok:        #64c295;
  --ok-soft:   #14261d;
  --info:      #6fb6de;
  --info-soft: #12242e;

  --t-conv:  #3fc4b3;
  --t-lev:   #6fa5f0;
  --t-oauth: #d9a961;
  --t-api:   #d580bd;
  --t-sftp:  #93a5b8;

  --accent-rgb: 63, 196, 179;
  --crit-rgb:   239, 125, 114;
  --warn-rgb:   220, 172, 87;
  --ok-rgb:     100, 194, 149;
  --info-rgb:   111, 182, 222;
  --ink-mid-rgb:166, 177, 189;
}

/* ── 2. BOOTSTRAP-BRUG ─────────────────────────────────────────────────────────
   Eén keer op :root, met var()-indirectie: de waarden volgen daardoor automatisch
   het thema. Deze selector heeft dezelfde gewichtsklasse als Bootstraps eigen
   [data-bs-theme=dark] maar staat later in de laadorde, dus hij wint — precies de
   bedoeling, want onze tokens bepalen de kleur en niet Bootstraps donkere palet.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace:  var(--font-mono);
  --bs-body-font-family: var(--font-sans);

  --bs-body-bg:    var(--ground);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-heading-color:  var(--ink);

  --bs-secondary-color: var(--ink-mid);
  --bs-secondary-bg:    var(--panel);
  --bs-tertiary-color:  var(--ink-soft);
  --bs-tertiary-bg:     var(--panel);

  --bs-border-color:       var(--line);
  --bs-border-color-translucent: var(--line-soft);
  --bs-border-radius:      var(--radius);
  --bs-border-radius-sm:   var(--radius-sm);
  --bs-border-radius-lg:   var(--radius);

  --bs-primary:      var(--accent);
  --bs-link-color:   var(--accent);
  --bs-link-hover-color: var(--accent-hover);

  --bs-code-color:   var(--t-api);
  --bs-highlight-bg: var(--warn-soft);

  /* Hiermee volgen text-primary, text-danger, bg-opacity-* en border-* het thema */
  --bs-primary-rgb:   var(--accent-rgb);
  --bs-success-rgb:   var(--ok-rgb);
  --bs-danger-rgb:    var(--crit-rgb);
  --bs-warning-rgb:   var(--warn-rgb);
  --bs-info-rgb:      var(--info-rgb);
  --bs-secondary-rgb: var(--ink-mid-rgb);
}

/* ── 3. BASIS ──────────────────────────────────────────────────────────────── */

html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  margin-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.01em; }
h1, .h1, h2, .h2, h3, .h3 { text-wrap: balance; }

code, kbd, pre, samp, .font-monospace { font-family: var(--font-mono); }

/* Bootstrap keert kbd om (achtergrond = tekstkleur), wat in het donkere thema een fel wit
   blokje geeft. Toetsen krijgen daarom een eigen, rustige weergave. */
kbd {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: .1em .4em;
  font-size: .85em;
}
kbd kbd { padding: 0; border: 0; background: none; }

/* Cijfers die in kolommen onder elkaar staan uitlijnen */
table, .tabular { font-variant-numeric: tabular-nums; }

/* Zichtbare toetsenbordfocus — één vorm door de hele applicatie */
:focus-visible,
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: none;
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Brede inhoud schuift binnen zijn eigen kader, nooit de hele pagina */
.table-responsive, .scroll-x { overflow-x: auto; }

/* ── 4. UTILITIES DIE EEN VAST THEMA AANNAMEN ──────────────────────────────────
   Deze klassen staan door de pagina's verspreid met een hardgecodeerde aanname
   ("wit", "licht"). Ze naar tokens omleggen scheelt het aanpassen van 20 pagina's
   en voorkomt witte vlakken in het donkere thema.
   ───────────────────────────────────────────────────────────────────────────── */

.bg-white  { background-color: var(--surface) !important; }
.bg-light   { background-color: var(--panel) !important; }
.bg-body    { background-color: var(--surface) !important; }
.table-light { --bs-table-bg: var(--panel); --bs-table-color: var(--ink-mid); }

/* bg-dark blijft bewust donker: het dekt codeoppervlakken (Monaco-balk, JSON) */
.bg-dark { background-color: var(--code-bg) !important; }
.bg-dark, .bg-dark .text-secondary { color: var(--code-ink) !important; }

.text-muted { color: var(--ink-soft) !important; }

/* ── 5. COMPONENTEN ────────────────────────────────────────────────────────── */

/* Navigatiebalk — licht vlak met het accent als merkteken */
.app-navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.app-navbar .navbar-brand { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.app-navbar .nav-link { color: var(--ink-mid); border-radius: var(--radius-sm); padding: .35rem .6rem; }
.app-navbar .nav-link:hover { color: var(--ink); background: var(--panel); }
.app-navbar .nav-link.active, .app-navbar .nav-link[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.app-navbar .navbar-toggler { border-color: var(--line); }
.app-navbar .dropdown-menu { background: var(--surface); border-color: var(--line); }
.app-navbar .dropdown-item { color: var(--ink-mid); }
.app-navbar .dropdown-item:hover, .app-navbar .dropdown-item:focus { background: var(--panel); color: var(--ink); }
.app-navbar .dropdown-item.active { background: var(--accent-soft); color: var(--ink); }

.brand-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}

/* Kaarten */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.card-header[role="button"]:hover { background: var(--panel); }

/* Tabellen */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); border-color: var(--line-soft); }
.table > thead th {
  color: var(--ink-soft);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table > tbody > tr > td { border-color: var(--line-soft); }
.table-hover > tbody > tr:hover > * { background: var(--panel); color: var(--ink); }
.table-danger, .table-danger > * { background: var(--crit-soft) !important; color: var(--ink) !important; }

/* Badges — achtergrond én tekstkleur samen, met genoeg gewicht om een losse
   text-dark/text-light in de opmaak te overrulen (die zit er nog op oude pagina's) */
.badge { font-weight: 500; border-radius: var(--radius-pill); padding: .25em .65em; }
.badge.bg-primary   { background: var(--accent-soft) !important; color: var(--accent) !important; }
.badge.bg-success   { background: var(--ok-soft) !important;   color: var(--ok) !important; }
.badge.bg-danger    { background: var(--crit-soft) !important; color: var(--crit) !important; }
.badge.bg-warning   { background: var(--warn-soft) !important; color: var(--warn) !important; }
.badge.bg-info      { background: var(--info-soft) !important; color: var(--info) !important; }
.badge.bg-secondary { background: var(--panel) !important;     color: var(--ink-soft) !important; border: 1px solid var(--line-soft); }
.badge.bg-light     { background: var(--panel) !important;     color: var(--ink-mid) !important; border: 1px solid var(--line-soft); }
.badge.bg-dark      { background: var(--ink-mid) !important;   color: var(--surface) !important; }
.badge.bg-dark-subtle { background: var(--panel) !important;   color: var(--ink-mid) !important; }

/* Knoppen */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary  { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: var(--panel); border-color: var(--line); color: var(--ink); }
.btn-secondary:hover { background: var(--ground); border-color: var(--ink-soft); color: var(--ink); }

.btn-outline-secondary { color: var(--ink-mid); border-color: var(--line); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--panel); border-color: var(--ink-soft); color: var(--ink); }
.btn-outline-primary { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-outline-danger { color: var(--crit); border-color: var(--crit); background: transparent; }
.btn-outline-danger:hover { background: var(--crit); border-color: var(--crit); color: var(--surface); }
.btn-danger { background: var(--crit); border-color: var(--crit); color: var(--surface); }
.btn-danger:hover { background: var(--crit); border-color: var(--crit); filter: brightness(1.08); color: var(--surface); }
.btn-warning { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.btn-warning:hover { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.btn-outline-success { color: var(--ok); border-color: var(--ok); background: transparent; }
.btn-outline-success:hover { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.btn-outline-dark { color: var(--ink-mid); border-color: var(--ink-soft); background: transparent; }
.btn-outline-dark:hover { background: var(--ink-mid); border-color: var(--ink-mid); color: var(--surface); }
.btn-link { color: var(--accent); }

.btn-xs { font-size: .7rem; padding: 2px 6px; border-radius: 4px; }

/* Formulieren */
.form-control, .form-select {
  background: var(--surface); border-color: var(--line); color: var(--ink);
  border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--ink-soft); }
.form-control:disabled, .form-control[readonly] { background: var(--panel); color: var(--ink-mid); }
.form-label { color: var(--ink-mid); font-size: .82rem; }
.form-text { color: var(--ink-soft); }
.form-check-input { background-color: var(--surface); border-color: var(--line); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.input-group-text { background: var(--panel); border-color: var(--line); color: var(--ink-mid); }

/* Meldingen */
.alert { border-radius: var(--radius); border-width: 1px; }
.alert-success { background: var(--ok-soft);   border-color: transparent; color: var(--ok); }
.alert-danger  { background: var(--crit-soft); border-color: transparent; color: var(--crit); }
.alert-warning { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.alert-info    { background: var(--info-soft); border-color: transparent; color: var(--info); }
.alert-secondary { background: var(--panel); border-color: var(--line-soft); color: var(--ink-mid); }

/* Overlays */
.modal-content, .offcanvas { background: var(--surface); color: var(--ink); border-color: var(--line); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--line-soft); }
.dropdown-menu { background: var(--surface); border-color: var(--line); }
.dropdown-item { color: var(--ink-mid); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--panel); color: var(--ink); }
.dropdown-divider { border-color: var(--line-soft); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-soft); }
.breadcrumb-item.active { color: var(--ink-mid); }

/* Kerncijfers op het dashboard: rustige tegel met één semantische kleur, in plaats van
   een volvlak met witte tekst — dat laatste werkt niet in beide thema's. */
.kpi-tile { border-left: 3px solid var(--kpi); }
.kpi-label {
  margin: 0 0 .15rem; color: var(--ink-soft);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.kpi-value {
  margin: 0; color: var(--kpi);
  font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kpi-icon { color: var(--kpi); opacity: .35; font-size: 2.1rem; }

/* Codeoppervlak (previews, JSON-uitvoer): blijft in beide thema's donker, want het is
   een editor-achtergrond en geen paginavlak. */
.code-surface {
  background: var(--code-bg); color: var(--code-ink);
  max-height: 200px; overflow: auto; font-size: 11px;
  font-family: var(--font-mono);
}
.code-surface.is-error { color: #f48771; }

/* ── 6. PIJPLIJN ───────────────────────────────────────────────────────────────
   De stappenreeks van een definitie: knopen op een rasterveld, met de conditie
   op de verbinding ertussen. Zie renderSteps() in Pages/Definitions/Edit.cshtml.
   ───────────────────────────────────────────────────────────────────────────── */

.flow-wrap {
  padding: 1.5rem 1rem;
  background-color: var(--panel);
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow-x: auto;
}
.flow { display: flex; align-items: stretch; min-width: max-content; }
.flow-empty { color: var(--ink-soft); font-style: italic; text-align: center; padding: 1.25rem; }

.node {
  width: 210px; flex: none; text-align: left; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .7rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: border-color .12s, box-shadow .12s;
}
.node:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.node[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.node.is-inactive { opacity: .55; }
.node.is-broken { border-color: var(--crit); }

.node-top { display: flex; align-items: baseline; gap: .4rem; }
.node-kind {
  font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.node-n { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); }
.node-name { font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.node-target {
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-flags { display: flex; flex-wrap: wrap; gap: .25rem; }
.node-tools {
  display: flex; align-items: center; gap: .2rem;
  margin-top: .15rem; padding-top: .35rem; border-top: 1px solid var(--line-soft);
}

/* Kleur per stap-type: op de bovenrand en op het typelabel */
.node[data-t="conv"]  { border-top-color: var(--t-conv); }
.node[data-t="lev"]   { border-top-color: var(--t-lev); }
.node[data-t="oauth"] { border-top-color: var(--t-oauth); }
.node[data-t="api"]   { border-top-color: var(--t-api); }
.node[data-t="sftp"]  { border-top-color: var(--t-sftp); }
.node[data-t="conv"]  .node-kind { color: var(--t-conv); }
.node[data-t="lev"]   .node-kind { color: var(--t-lev); }
.node[data-t="oauth"] .node-kind { color: var(--t-oauth); }
.node[data-t="api"]   .node-kind { color: var(--t-api); }
.node[data-t="sftp"]  .node-kind { color: var(--t-sftp); }

/* De verbinding draagt de conditie: waar de flow heen gaat staat op de pijl */
.conn {
  flex: none; width: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  padding: 0 .35rem;
}
/* Twee regels toegestaan: één regel met ellipsis maakte "als input.bedrag > 1000"
   onleesbaar, en juist die conditie is het punt van de verbinding. */
.conn-label {
  font-family: var(--font-mono); font-size: .64rem; color: var(--ink-soft);
  text-align: center; line-height: 1.35; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.conn-label .cond { color: var(--warn); }
.conn-line { width: 100%; height: 1px; background: var(--line); position: relative; }
.conn-line::after {
  content: ''; position: absolute; right: 0; top: -3px;
  border-left: 6px solid var(--line);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}

.terminal {
  flex: none; align-self: center;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px dashed var(--line);
  font-size: .75rem; color: var(--ink-soft); white-space: nowrap;
}
.terminal.is-reject { border-color: var(--crit); color: var(--crit); }

.flow-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .6rem; }
.flow-legend span { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ink-mid); }
.flow-legend i { width: 16px; height: 4px; border-radius: 2px; font-style: normal; }

/* Definitieoverzicht: er ligt een concept klaar dat nog niet in de definitie is opgeslagen.
   Waarschuwingskleur, dezelfde als de conceptbanner in de editor. */
.def-concept { color: var(--warn); }
.def-concept:hover, .def-concept:focus-visible { color: var(--warn); opacity: .75; }

/* Bewerk-dialoog in twee breedtes. modal-xl staat op 1140px; de brede stand gaat naar
   bijna het hele scherm. De keuze wordt per gebruiker in localStorage bewaard. */
#stepEditorModal .modal-dialog { transition: max-width .15s ease; }
#stepEditorModal.is-wide .modal-dialog { max-width: 98vw; }

/* Veldenboom en stapvariabelen in de conditie-dialoog */
.cond-explorer { height: 200px; overflow: auto; background: var(--panel); }
.cond-explorer ul { list-style: none; margin: 0; padding: 0; }
.cond-chip { cursor: grab; font-size: .68rem; }
.cond-chip:active { cursor: grabbing; }

/* De conditie- en bestandsnaam-editor openen bovenop de bewerk-dialoog */
#conditionEditorModal, #filenameEditorModal { z-index: 1070; }
#conditionEditorModal + .modal-backdrop, #filenameEditorModal + .modal-backdrop { z-index: 1065; }

/* ── 7. F1-hulppaneel ──────────────────────────────────────────────────────── */

.help-body h6 { margin-bottom: .35rem; color: var(--ink); }
.help-body dl.row { margin-bottom: .5rem; }
.help-body dt { font-weight: 600; color: var(--ink-mid); }
.help-body dd { margin-bottom: .35rem; color: var(--ink-mid); }
.help-body p { color: var(--ink-mid); }
.help-body code { font-size: .85em; }
.help-body kbd { font-size: .8em; }