/* ===== Workflow-automatisering =====
   Eén verticale keten: trigger bovenaan, acties eronder, met een lijntje ertussen.
   De kaarten zijn wit op het warme grijs van de rest van de CRM; alleen de trigger
   krijgt een oranje randje, want dat is het beginpunt van het verhaal. */

.auto-page { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--bg-warm); overflow: hidden; }
.auto-scroll { flex: 1; overflow-y: auto; }
.auto-wrap { max-width: 780px; margin: 0 auto; padding: 26px 24px 90px; }

/* ── Kop ── */
.auto-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--bg-cream); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.auto-head h1 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.auto-head .auto-sub { font-size: 12.5px; color: var(--ink-mute); }
.auto-head-spacer { flex: 1; }

.auto-tabs { display: flex; gap: 2px; padding: 0 24px; background: var(--bg-cream); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.auto-tab { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--ink-mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auto-tab:hover { color: var(--ink); }
.auto-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Lijst met workflows ── */
.auto-list { display: flex; flex-direction: column; gap: 10px; }
.auto-row { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.auto-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.auto-row-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auto-row-main { flex: 1; min-width: 0; }
.auto-row-name { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.auto-row-meta { font-size: 12px; color: var(--ink-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-row-stats { font-size: 11.5px; color: var(--ink-mute); text-align: right; white-space: nowrap; }

.auto-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-warm); color: var(--ink-soft); }
.auto-chip.on { background: rgba(18,164,107,.12); color: var(--success); }
.auto-chip.off { background: var(--bg-warm); color: var(--ink-mute); }
.auto-chip.err { background: rgba(224,72,61,.12); color: var(--danger); }
.auto-chip.warn { background: var(--amber-soft); color: #a05a00; }

.auto-empty { background: var(--white); border: 1px dashed var(--border); border-radius: 12px; padding: 40px 28px; text-align: center; }
.auto-empty h3 { font-size: 15px; font-weight: 650; color: var(--ink); margin: 0 0 6px; }
.auto-empty p { font-size: 13px; color: var(--ink-mute); line-height: 1.6; margin: 0 auto 16px; max-width: 460px; }

/* ── Schakelaar ── */
.auto-switch { position: relative; width: 38px; height: 21px; border-radius: 999px; background: #cfd3d8; cursor: pointer; flex-shrink: 0; transition: background .15s; border: none; padding: 0; }
.auto-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.auto-switch.on { background: var(--success); }
.auto-switch.on::after { transform: translateX(17px); }

/* ── Keten ── */
.auto-chain { display: flex; flex-direction: column; align-items: stretch; }
.auto-connector { height: 22px; display: flex; justify-content: center; position: relative; }
.auto-connector::before { content: ''; width: 2px; background: var(--border); height: 100%; }
.auto-plus { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 1px solid var(--border); color: var(--ink-mute); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s, border-color .12s, color .12s; }
.auto-connector:hover .auto-plus { opacity: 1; }
.auto-plus:hover { border-color: var(--accent); color: var(--accent); }

.auto-card { background: var(--white); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
/* Nieuwe workflow: nog geen trigger, alleen een uitnodiging om er een te kiezen. */
.auto-card.trigger.empty { border-style: dashed; box-shadow: none; cursor: pointer; background: var(--white); }
.auto-card.trigger.empty:hover { background: var(--accent-soft); }
.auto-choose { display: flex; align-items: center; gap: 14px; padding: 20px 18px; }
.auto-choose-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auto-choose-text { flex: 1; min-width: 0; }
.auto-choose-title { font-size: 15px; font-weight: 650; color: var(--ink); margin-top: 1px; }
.auto-choose-sub { font-size: 12px; color: var(--ink-mute); line-height: 1.5; margin-top: 3px; }
.auto-next-hint { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-mute);
  line-height: 1.55; max-width: 460px; align-self: center; }
.auto-card.trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auto-card.invalid { border-color: var(--danger); }
.auto-card-head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; }
.auto-card-head:hover { background: var(--bg-warm); }
.auto-card-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-warm); color: var(--ink-soft); }
.auto-card.trigger .auto-card-icon { background: var(--accent-soft); color: var(--accent); }
.auto-card-main { flex: 1; min-width: 0; }
.auto-card-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.auto-card.trigger .auto-card-kicker { color: var(--accent); }
.auto-card-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.auto-card-summary { font-size: 12px; color: var(--ink-mute); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Uitgeklapt is er ruimte: dan de hele samenvatting laten zien in plaats van "…". */
.auto-card.open .auto-card-summary { white-space: normal; overflow: visible; text-overflow: clip; }
/* Regel die vertelt WELK record een actie pakt — het antwoord op "welk contact dan?" */
.auto-works { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; color: var(--mint-ink);
  margin-top: 4px; line-height: 1.45; }
.auto-works svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }
.auto-works.missing { color: #a05a00; }
.auto-card.trigger .auto-works { color: var(--ink-mute); }

.auto-card-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.auto-icon-btn { width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--ink-mute); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.auto-icon-btn:hover { background: var(--bg-warm); color: var(--ink); }
.auto-icon-btn.danger:hover { background: rgba(224,72,61,.10); color: var(--danger); }
.auto-icon-btn:disabled { opacity: .3; cursor: default; }
.auto-card-body { border-top: 1px solid var(--border-soft); padding: 15px; background: #fcfcfd; }

/* ── Formuliervelden ── */
.auto-field { margin-bottom: 13px; }
.auto-field:last-child { margin-bottom: 0; }
.auto-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.auto-label .req { color: var(--accent); }
.auto-help { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; line-height: 1.5; }
/* Zelfde maten als elk ander formulierveld in de CRM (.form-input / .cs-trigger):
   rand van 1px, hoeken van 8, 9/12 binnenruimte, oranje ring bij focus. */
.auto-input, .auto-textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white);
  transition: border-color .12s, box-shadow .12s;
}
.auto-textarea { min-height: 82px; resize: vertical; line-height: 1.55; }
.auto-input:hover:not([disabled]), .auto-textarea:hover { border-color: var(--ink-mute); }
.auto-input:focus, .auto-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auto-input[disabled] { background: var(--bg-warm); color: var(--ink-mute); cursor: not-allowed; }
/* Keuzelijsten zijn de eigen CRM-dropdown (.cs-select uit components.css); die
   heeft dezelfde maat al, dus hier valt niets bij te stellen. */
.auto-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Velden waarin variabelen mogen staan zijn contenteditable i.p.v. input/textarea,
   zodat een variabele er als chip in staat (.tpl-var, dezelfde als in de mail).
   Het jasje blijft dat van .auto-input / .auto-textarea; alleen wat een <div>
   niet vanzelf doet staat hier. */
.auto-rich { line-height: 15px; min-height: 15px; cursor: text; }
/* De chip zit midden in een regel tekst; iets krapper dan in de e-mailcomposer. */
.auto-rich .tpl-var { padding: 0 6px; }
/* Grijze hint als het veld leeg is. Een leeggemaakt contenteditable houdt vaak een
   <br> over en is dan niet meer ":empty" — vandaar ook de klasse (zie _autoWireRich). */
.auto-rich:empty::before, .auto-rich.leeg::before { content: attr(data-placeholder); color: var(--ink-mute); pointer-events: none; }
/* Eenregelig: niet afbreken maar meeschuiven, zonder zichtbare schuifbalk. De chip
   mag de regel niet hoger maken dan in een gewoon tekstveld. */
.auto-rich[data-rich="line"] { white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.auto-rich[data-rich="line"]::-webkit-scrollbar { height: 0; }
.auto-rich[data-rich="line"] .tpl-var { display: inline; line-height: 1; }
/* Meerregelig: als de textarea, inclusief zelf hoger slepen. */
.auto-rich[data-rich="block"] {
  white-space: pre-wrap; overflow-wrap: anywhere;
  min-height: 82px; max-height: 320px; overflow-y: auto; resize: vertical; line-height: 1.55;
}


.auto-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.auto-chip-opt { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.auto-chip-opt:hover { border-color: var(--accent); }
.auto-chip-opt.sel { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.auto-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.auto-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); cursor: pointer; }

/* Variabele-invoeger bij tekstvelden */
/* Zelfde pil als de variabele-chips in sequences/campagnes (.seq-var-chip). */
.auto-varbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: none; border-radius: 5px; padding: 3px 8px; cursor: pointer; font-family: inherit; }
.auto-varbtn:hover { background: var(--accent); color: #fff; }
/* Zelfde jasje als de dropdown-popup (.cs-popup), zodat elk uitklapdingetje in de
   CRM hetzelfde aanvoelt. */
.auto-varpop { position: absolute; z-index: 3000; background: var(--white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px rgba(57,57,57,.14), 0 2px 6px rgba(57,57,57,.06); width: 280px; max-height: 320px; overflow-y: auto; padding: 6px; }
.auto-varpop-item { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.auto-varpop-item:hover { background: var(--bg-cream); }
.auto-varpop-label { font-size: 12.5px; color: var(--ink); }
.auto-varpop-code { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--ink-mute); }
.auto-varpop-search { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; margin: -6px -6px 4px; background: var(--white); border-bottom: 1px solid var(--border-soft);
  border-radius: 12px 12px 0 0; color: var(--ink-mute); }
.auto-varpop-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 12.5px; color: var(--ink); }
.auto-varpop-empty { padding: 14px 12px; text-align: center; font-size: 12.5px; color: var(--ink-mute); }

/* ── Voorwaarde-bouwer ── */
.auto-filter { border: 1px solid var(--border-soft); border-radius: 9px; padding: 10px; background: var(--white); }
.auto-filter-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-mute); margin-bottom: 8px; }
.auto-rule { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 26px; gap: 6px; margin-bottom: 6px; align-items: center; }
.auto-rule .auto-input { padding: 6px 8px; font-size: 12px; }
.auto-card-body .auto-rule .cs-trigger { padding: 6px 8px; font-size: 12px; gap: 6px; }
/* "Voldoet aan [alle regels]" leest als één zin, dus een pil in plaats van een vak. */
.auto-filter-top .cs-select.chip .cs-trigger { padding: 4px 9px 4px 11px; font-size: 12px; font-weight: 600; }
.auto-addrule { font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 0; }
/* "is één van": de chips staan in de smalle waarde-kolom, dus krapper dan elders. Een
   regel met chips is hoger dan één regel; dan hoort de rest bovenaan uit te lijnen. */
.auto-rule:has(.auto-chips) { align-items: start; }
.auto-rule .auto-chips.rule { gap: 4px; max-height: 96px; overflow-y: auto; }
.auto-rule .auto-chips.rule .auto-chip-opt { font-size: 11.5px; padding: 3px 8px; }
/* Zonder veld valt er niets te vergelijken: het vakje staat er wel, maar doet niets. */
.auto-rule .cs-select.off { pointer-events: none; }
.auto-rule .cs-select.off .cs-trigger { background: var(--bg-warm); color: var(--ink-mute); }
.auto-rule .cs-select.off .cs-chevron { opacity: .4; }

/* ── Waarschuwingen ── */
.auto-warn { background: var(--amber-soft); border: 1px solid rgba(255,157,42,.35); border-radius: 9px; padding: 11px 13px; font-size: 12.5px; color: #7a4a00; line-height: 1.55; margin-bottom: 14px; }
.auto-warn ul { margin: 4px 0 0 16px; padding: 0; }

/* ── Kiezer (paneel rechts) ── */
.auto-picker { position: fixed; top: 56px; right: 0; bottom: 0; width: 470px; max-width: 96vw; background: var(--white); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 1500; transform: translateX(100%); transition: transform .18s ease-out; display: flex; flex-direction: column; }
.auto-picker.open { transform: translateX(0); }
.auto-picker-head { padding: 14px 18px 10px; border-bottom: 1px solid var(--border-soft); }
.auto-picker-top { display: flex; align-items: center; gap: 12px; }
.auto-picker-title { font-size: 16px; font-weight: 650; color: var(--ink); flex-shrink: 0; }
.auto-search { flex: 1; position: relative; }
.auto-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.auto-search input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 10px 7px 29px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-warm); }
.auto-search input:focus { outline: none; border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 3px var(--accent-soft); }
.auto-picker-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.auto-ptab { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--ink-soft); cursor: pointer; }
.auto-ptab:hover { border-color: var(--accent); color: var(--ink); }
.auto-ptab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.auto-picker-body { flex: 1; overflow-y: auto; padding: 12px 14px 24px; }
.auto-pgroup-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); margin: 12px 4px 7px; }
.auto-pgroup-title:first-child { margin-top: 2px; }
.auto-ptile { display: flex; gap: 11px; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 9px; cursor: pointer; margin-bottom: 6px; background: var(--white); }
.auto-ptile:hover { border-color: var(--accent); background: var(--accent-soft); }
.auto-ptile-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-warm); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auto-ptile:hover .auto-ptile-icon { background: var(--white); color: var(--accent); }
.auto-ptile-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.auto-ptile-sub { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; margin-top: 2px; }
.auto-picker-empty { text-align: center; color: var(--ink-mute); font-size: 12.5px; padding: 34px 10px; }
/* Uitleg onder de tabjes: waarmee kun je op deze plek in de keten werken? */
.auto-picker-scope { margin-top: 10px; font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; }
/* Eén rustige regel onder de lijst: wat is er verborgen, en waarom. */
.auto-picker-hidden { margin: 14px 4px 0; padding-top: 10px; border-top: 1px dashed var(--border-soft);
  font-size: 11.5px; color: var(--ink-mute); line-height: 1.5; }

/* ── Logboek ── */
.auto-run { background: var(--white); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.auto-run-head { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; }
.auto-run-head:hover { background: var(--bg-warm); }
.auto-run-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ink-mute); }
.auto-run-dot.done { background: var(--success); }
.auto-run-dot.failed { background: var(--danger); }
.auto-run-dot.skipped { background: var(--ink-mute); }
.auto-run-dot.pending { background: var(--amber); }
.auto-run-dot.running { background: var(--mint); }
.auto-run-main { flex: 1; min-width: 0; }
.auto-run-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.auto-run-meta { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.auto-run-body { border-top: 1px solid var(--border-soft); padding: 10px 14px 12px; background: #fcfcfd; }
.auto-log-line { display: flex; gap: 9px; font-size: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border-soft); }
.auto-log-line:last-child { border-bottom: none; }
/* Status als pil (zoals elke andere status in de CRM) in een vast vakje, zodat de
   meldingen eronder op één lijn blijven staan. Zonder dat vaste vakje liep het
   langste woord — "overgeslagen" — dwars door de melding heen. */
.auto-log-cell { flex: 0 0 106px; }
.auto-log-status { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--bg-warm); color: var(--ink-soft); }
.auto-log-status.ok { background: rgba(18,164,107,.12); color: var(--success); }
.auto-log-status.failed { background: rgba(224,72,61,.12); color: var(--danger); }
.auto-log-status.simulated { background: var(--mint-soft); color: var(--mint-ink); }
.auto-log-status.stopped, .auto-log-status.skipped { background: var(--bg-warm); color: var(--ink-mute); }
.auto-log-status.waiting { background: var(--amber-soft); color: #a05a00; }
.auto-log-msg { color: var(--ink-soft); line-height: 1.5; word-break: break-word; }
.auto-log-msg b { color: var(--ink); font-weight: 600; }

/* ── Hook-URL ── */

/* Sluitknop van het paneel */
.auto-picker-close { width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--ink-mute); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auto-picker-close:hover { background: var(--bg-warm); color: var(--ink); }