/* ==========================================================================
   Drawflow base (vendored 0.0.60) + Vector dim-light theme
   Loaded only on the workflow editor page via stylesheet_link_tag "drawflow".
   ========================================================================== */

/* --- base (minified, upstream) ------------------------------------------- */
.drawflow,.drawflow .parent-node{position:relative}
.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}
.drawflow{width:100%;height:100%;user-select:none;perspective:0}
.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;width:240px;min-height:40px;z-index:2}
.drawflow .drawflow-node:hover{cursor:move}
/* Handle columns: absolutely anchored to the node edges, full height, so their
   dots sit centered on the node's vertical middle (single or stacked). */
.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{
  position:absolute; top:0; bottom:0; width:0; z-index:3;
  display:flex; flex-direction:column; justify-content:center; gap:11px;
}
.drawflow .drawflow-node .inputs{ left:0; }
.drawflow .drawflow-node .outputs{ right:0; }
.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}
/* Drawflow's input handle uses class "input", which collides with DaisyUI's
   form-input component (display:flex, padding, min-height, width) and turns the
   left handle into an oval. Override those with !important, scoped to the node. */
.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{
  box-sizing:border-box !important;
  display:block !important;
  width:16px !important; height:16px !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; flex:0 0 16px;
  border-radius:50%; cursor:crosshair; position:relative;
}
/* Straddle the node edge — half the dot overlaps the card (positive `right`
   shifts the output left, into the node; negative `left` shifts the input left,
   out of it). */
.drawflow .drawflow-node .input{ left:-8px; }
.drawflow .drawflow-node .output{ right:8px; }
/* Scope to Drawflow's connection wires only — a bare `.drawflow svg` also matches
   the node icon SVGs in `.vec-node__disc`, forcing them `position:absolute` and
   knocking them off-center within their disc. */
.drawflow svg.connection{z-index:0;position:absolute;overflow:visible!important}
.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}
.drawflow .connection .main-path{fill:none;stroke-width:2.5px;pointer-events:all}
.drawflow .connection .main-path:hover{cursor:pointer}
.drawflow .connection .point{cursor:move;stroke-width:2;pointer-events:all}
.drawflow .main-path{fill:none;stroke-width:2.5px}
.drawflow-delete{position:absolute;display:block;width:26px;height:26px;z-index:4;line-height:24px;font-weight:700;text-align:center;border-radius:50%;cursor:pointer}
.parent-node .drawflow-delete{right:-13px;top:-13px}

/* --- canvas: faint dotted "graph paper" ---------------------------------- */
.vec-canvas{
  position:relative;
  background-color: var(--color-base-100);
  background-image: radial-gradient(color-mix(in oklch, var(--color-base-content) 12%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  height:100%;
}
/* The Drawflow container is a bare .parent-drawflow filling the wrapper, so its
   classList[0] stays "parent-drawflow" and Drawflow's pan hit-test works on
   every exposed canvas area. */
.vec-canvas > .parent-drawflow{ width:100%; height:100%; }
.vec-canvas .drawflow{ background:transparent; }

/* --- connections --------------------------------------------------------- */
.drawflow .connection .main-path{
  stroke: color-mix(in oklch, var(--color-base-content) 22%, transparent);
  transition: stroke .15s ease;
}
.drawflow .connection .main-path:hover{ stroke: var(--color-primary); }
.drawflow .connection .main-path.selected{ stroke: var(--color-success); }
.drawflow .connection .point{ stroke: var(--color-base-content); fill: var(--color-base-100); }

/* --- connection handles -------------------------------------------------- */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output{
  background: var(--color-base-100);
  border:2px solid color-mix(in oklch, var(--color-base-content) 35%, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .12s ease, border-color .12s ease;
}
.drawflow .drawflow-node .output{ border-color: var(--vec-accent, var(--color-primary)); }
.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover{ transform: scale(1.25); }

/* --- delete affordance (the "x" on a selected node/connection) ----------- */
.drawflow-delete{
  background: var(--color-error);
  color: var(--color-error-content, #fff);
  border:2px solid var(--color-base-100);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size:14px; line-height:1; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ==========================================================================
   Vector node card — rendered inside each Drawflow node
   ========================================================================== */
.vec-node{
  --vec-accent: var(--color-primary);
  position:relative;
  display:flex; align-items:stretch; gap:0;
  width:240px;
  background: var(--color-base-100);
  border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px -8px rgba(16,24,40,.18);
  transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease;
}
.drawflow-node.selected .vec-node{
  border-color: var(--vec-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vec-accent) 22%, transparent),
              0 10px 24px -10px rgba(16,24,40,.28);
}
.vec-node:hover{ box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 12px 26px -10px rgba(16,24,40,.26); }

.vec-node__body{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; flex:1; min-width:0; }

/* icon disc */
.vec-node__disc{
  flex:0 0 36px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color: var(--vec-accent);
  background: color-mix(in oklch, var(--vec-accent) 12%, var(--color-base-100));
  border:1px solid color-mix(in oklch, var(--vec-accent) 28%, transparent);
}
.vec-node__disc svg{ width:19px; height:19px; }

.vec-node__text{ min-width:0; flex:1; padding-top:1px; }
.vec-node__kicker{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color: var(--vec-accent);
  display:flex; align-items:center; gap:5px;
}
.vec-node__title{
  font-size:14px; font-weight:500; line-height:1.25; color: var(--color-base-content);
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vec-node__sub{
  font-size:11.5px; line-height:1.35; margin-top:3px;
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* branch arm labels, aligned to the two stacked output handles (in-flow so the
   card's overflow:hidden never clips them) */
.vec-node__arms{
  margin-left:auto; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; gap:13px;
  padding-left:8px; pointer-events:none;
}
.vec-node__arm{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  line-height:1; text-align:right;
}
.vec-node__arm--yes{ color: var(--color-success); }
.vec-node__arm--no{ color: var(--color-error); }
.vec-node__arm--approve{ color: var(--color-success); }
.vec-node__arm--reject{ color: var(--color-error); }

/* accent palette by node type */
.vec-node[data-accent="primary"]   { --vec-accent: var(--color-primary); }
.vec-node[data-accent="info"]      { --vec-accent: var(--color-info); }
.vec-node[data-accent="warning"]   { --vec-accent: var(--color-warning); }
.vec-node[data-accent="secondary"] { --vec-accent: var(--color-secondary); }
.vec-node[data-accent="success"]   { --vec-accent: var(--color-success); }
.vec-node[data-accent="neutral"]   { --vec-accent: color-mix(in oklch, var(--color-base-content) 55%, transparent); }

/* ==========================================================================
   Palette chips (drag source)
   ========================================================================== */
.vec-chip{
  --vec-accent: var(--color-primary);
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:11px; cursor:grab;
  border:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
  background: var(--color-base-100);
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.vec-chip:hover{
  border-color: color-mix(in oklch, var(--vec-accent) 45%, transparent);
  box-shadow: 0 4px 12px -6px color-mix(in oklch, var(--vec-accent) 40%, transparent);
}
.vec-chip:active{ cursor:grabbing; transform:scale(.98); }
.vec-chip__disc{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  color: var(--vec-accent);
  background: color-mix(in oklch, var(--vec-accent) 12%, var(--color-base-100));
  border:1px solid color-mix(in oklch, var(--vec-accent) 26%, transparent);
}
.vec-chip__disc svg{ width:16px; height:16px; }
.vec-chip__label{ font-size:13px; font-weight:500; color:var(--color-base-content); }
.vec-chip[data-accent="primary"]   { --vec-accent: var(--color-primary); }
.vec-chip[data-accent="info"]      { --vec-accent: var(--color-info); }
.vec-chip[data-accent="warning"]   { --vec-accent: var(--color-warning); }
.vec-chip[data-accent="secondary"] { --vec-accent: var(--color-secondary); }
.vec-chip[data-accent="success"]   { --vec-accent: var(--color-success); }
.vec-chip[data-accent="neutral"]   { --vec-accent: color-mix(in oklch, var(--color-base-content) 55%, transparent); }