/* Sơ đồ luồng live — canvas tối kiểu n8n đặt trong trang CMS sáng. */
#pane-flow {
  --fv-bg: #16161a;
  --fv-dot: #2c2c33;
  --fv-node: #26262c;
  --fv-node-hover: #2e2e35;
  --fv-border: #3f3f48;
  --fv-text: #f2f2f5;
  --fv-muted: #8b8b96;
  --fv-edge: #6b6b78;
  --fv-run: #ff9b3d;
  --fv-ok: #37c28a;
  --fv-bad: #ff5a5f;
  --fv-warn: #f5b93e;
  --fv-accent: #7c8cff;
}

#pane-flow .fv-shell {
  display: flex; flex-direction: column; gap: 12px;
}

#pane-flow .fv-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
}
#pane-flow .fv-toolbar-left, #pane-flow .fv-toolbar-right {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0;
}
#pane-flow .fv-tabs {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #eaecf0;
}
#pane-flow .fv-tab {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  font: 600 13px/1.2 var(--bs-body-font-family); color: #475467; white-space: nowrap;
}
#pane-flow .fv-tab:hover { color: #101828; }
#pane-flow .fv-tab.active { background: #fff; color: #101828; box-shadow: 0 1px 3px rgba(16,24,40,.1); }

#pane-flow .fv-workers { display: inline-flex; flex-wrap: wrap; gap: 6px; }
#pane-flow .fv-worker {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: #fff; border: 1px solid #e4e7ec; color: #344054;
}
#pane-flow .fv-worker i { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; }
#pane-flow .fv-worker.is-on i { background: #12b76a; box-shadow: 0 0 0 3px #d1fadf; }
#pane-flow .fv-worker.is-idle i { background: #f79009; box-shadow: 0 0 0 3px #fef0c7; }
#pane-flow .fv-worker.is-off i { background: #f04438; box-shadow: 0 0 0 3px #fee4e2; }

#pane-flow .fv-meta { font-size: 12px; color: #667085; font-variant-numeric: tabular-nums; }
#pane-flow .fv-select {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #d0d5dd; background: #fff;
  font: 500 13px var(--bs-body-font-family); color: #344054;
}
#pane-flow .fv-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #344054; cursor: pointer; }
#pane-flow .fv-icon-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #d0d5dd; background: #fff; color: #344054; cursor: pointer;
}
#pane-flow .fv-icon-btn:hover { background: #f9fafb; }
#pane-flow .fv-icon-btn.is-spinning svg { animation: fv-spin .8s linear infinite; }
#pane-flow .fv-error {
  padding: 8px 12px; border-radius: 8px; background: #fef3f2; border: 1px solid #fecdca; color: #b42318; font-size: 13px;
}

/* ---- Canvas ---- */
#pane-flow .fv-canvas {
  position: relative; overflow: hidden; height: calc(100vh - 210px); min-height: 520px;
  border-radius: 14px; border: 1px solid #0d0d10; cursor: grab; touch-action: none; user-select: none;
  background-color: var(--fv-bg);
  background-image: radial-gradient(var(--fv-dot) 1.2px, transparent 1.3px);
  background-size: 20px 20px;
}
#pane-flow .fv-canvas.is-panning { cursor: grabbing; }
#pane-flow .fv-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#pane-flow .fv-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

#pane-flow .fv-edge { fill: none; stroke: var(--fv-edge); stroke-width: 2; }
#pane-flow .fv-edge.is-active { stroke: #9a9aac; }
#pane-flow .fv-edge.is-true.is-active { stroke: #3f8f6c; }
#pane-flow .fv-edge.is-false.is-active { stroke: #a3802f; }
#pane-flow .fv-edge.is-error { stroke: #5a3a3d; stroke-dasharray: 4 5; }
#pane-flow .fv-edge.is-error.is-hot { stroke: var(--fv-bad); }
#pane-flow .fv-edge.is-retry, #pane-flow .fv-edge.is-loop { stroke-dasharray: 4 5; }
#pane-flow .fv-edge.is-sub { stroke: #55555f; stroke-dasharray: 3 5; stroke-width: 1.6; }
#pane-flow .fv-edge.is-sub.is-active { stroke: var(--fv-accent); animation: fv-flow 1.2s linear infinite; }
#pane-flow .fv-edge-arrow { fill: none; stroke: var(--fv-edge); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pane-flow .fv-sub-dot { fill: var(--fv-accent); }
#pane-flow .fv-sub-diamond { fill: #e8e8ee; }

#pane-flow .fv-port-label, #pane-flow .fv-edge-label, #pane-flow .fv-edge-count, #pane-flow .fv-sub-port {
  position: absolute; pointer-events: none; white-space: nowrap;
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--fv-muted);
}
#pane-flow .fv-edge-label, #pane-flow .fv-edge-count, #pane-flow .fv-sub-port { transform: translate(-50%, -50%); }
#pane-flow .fv-port-label.is-true { color: #7fd8b0; }
#pane-flow .fv-port-label.is-false { color: #f3cf85; }
#pane-flow .fv-sub-port { transform: translate(-50%, 0); color: #9b9baa; font-size: 10.5px; }
#pane-flow .fv-edge-count {
  padding: 3px 7px; border-radius: 99px; background: #2b2b33; border: 1px solid #45454f; color: #d5d5de;
}

/* ---- Node ---- */
#pane-flow .fv-node {
  position: absolute; display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--fv-node); border: 1.5px solid var(--fv-border); border-radius: 12px;
  color: var(--fv-text); cursor: pointer; font-family: var(--bs-body-font-family);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#pane-flow .fv-node:hover { background: var(--fv-node-hover); border-color: #5b5b67; }
#pane-flow .fv-node:focus-visible { outline: 2px solid var(--fv-accent); outline-offset: 3px; }
#pane-flow .fv-node.kind-trigger { border-radius: 46px 12px 12px 46px; }
#pane-flow .fv-node.kind-sub { border-radius: 50%; }
#pane-flow .fv-node.kind-sink { border-radius: 16px; }
#pane-flow .fv-node.is-selected { border-color: var(--fv-accent); box-shadow: 0 0 0 4px rgba(124,140,255,.22); }

#pane-flow .fv-node.fvs-running { border-color: var(--fv-run); animation: fv-pulse 1.6s ease-in-out infinite; }
#pane-flow .fv-node.fvs-error { border-color: var(--fv-bad); }
#pane-flow .fv-node.fvs-warn { border-color: var(--fv-warn); }
#pane-flow .fv-node.fvs-done { border-color: #2f7a5a; }
#pane-flow .fv-node.fvs-off { opacity: .6; }
#pane-flow .fv-node.fvs-idle .fv-node-icon { filter: saturate(.55); opacity: .85; }

#pane-flow .fv-node-icon {
  width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
#pane-flow .kind-sub .fv-node-icon { width: 38px; height: 38px; border-radius: 50%; }
#pane-flow .kind-sink .fv-node-icon { width: 42px; height: 42px; }
.fv-node-icon.tone-orange, .fv-drawer .tone-orange { background: #e8762b; }
.fv-node-icon.tone-blue, .fv-drawer .tone-blue { background: #2f6fec; }
.fv-node-icon.tone-purple, .fv-drawer .tone-purple { background: #7a4fe0; }
.fv-node-icon.tone-teal, .fv-drawer .tone-teal { background: #0e9f8e; }
.fv-node-icon.tone-pink, .fv-drawer .tone-pink { background: #d6457d; }
.fv-node-icon.tone-indigo, .fv-drawer .tone-indigo { background: #4f5bd5; }
.fv-node-icon.tone-green, .fv-drawer .tone-green { background: #16a34a; }
.fv-node-icon.tone-red, .fv-drawer .tone-red { background: #e0344b; }
.fv-node-icon.tone-amber, .fv-drawer .tone-amber { background: #c98a0c; }
.fv-node-icon.tone-gray, .fv-drawer .tone-gray { background: #5b6170; }

#pane-flow .fv-node-label {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 170px; text-align: center; pointer-events: none;
}
#pane-flow .fv-node-label strong { font-size: 13px; font-weight: 700; color: var(--fv-text); line-height: 1.25; }
#pane-flow .fv-node-label small {
  font: 500 11px/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--fv-muted);
}
#pane-flow .kind-sub .fv-node-label strong { font-size: 12px; font-weight: 600; }
#pane-flow .kind-sub .fv-node-label { width: 78px; }
#pane-flow .fvs-running .fv-node-label small { color: #ffc28a; }
#pane-flow .fvs-error .fv-node-label small { color: #ff9ca0; }

#pane-flow .fv-badge {
  position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11.5px/1 var(--bs-body-font-family); background: #3a3a44; color: #fff; border: 2px solid var(--fv-bg);
  font-variant-numeric: tabular-nums;
}
#pane-flow .fvs-running .fv-badge { background: var(--fv-run); color: #1b1206; }
#pane-flow .fvs-error .fv-badge { background: var(--fv-bad); }
#pane-flow .fvs-waiting .fv-badge { background: #4b5bd6; }
#pane-flow .fv-badge.is-ok { background: var(--fv-ok); color: #06231a; padding: 0; min-width: 20px; height: 20px; }
#pane-flow .fv-badge.is-warn { right: auto; left: -9px; background: var(--fv-warn); color: #231a03; }

#pane-flow .fv-port {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #e8e8ee; border: 2px solid var(--fv-bg);
}
#pane-flow .fv-port.is-in { left: -6px; top: calc(50% - 5.5px); }
#pane-flow .fv-port.is-out { right: -6px; top: calc(50% - 5.5px); }
#pane-flow .fv-port.is-true { right: -6px; top: calc(50% - 25.5px); background: #7fd8b0; }
#pane-flow .fv-port.is-false { right: -6px; top: calc(50% + 14.5px); background: #f3cf85; }

/* ---- Controls ---- */
#pane-flow .fv-controls {
  position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; align-items: center; z-index: 3;
}
#pane-flow .fv-controls button {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 8px; border: 1px solid #3a3a44; background: #232329; color: #d6d6de;
}
#pane-flow .fv-controls button:hover { background: #2e2e36; }
#pane-flow .fv-controls span { font: 500 11px "JetBrains Mono", monospace; color: var(--fv-muted); padding: 0 4px; }
#pane-flow .fv-legend {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px;
  padding: 7px 12px; border-radius: 8px; background: rgba(35,35,41,.9); border: 1px solid #3a3a44;
  font-size: 11.5px; color: #b8b8c4;
}
#pane-flow .fv-legend span { display: inline-flex; align-items: center; gap: 5px; }
#pane-flow .fv-legend i { width: 9px; height: 9px; border-radius: 3px; border: 2px solid; }

/* ---- Drawer ---- */
#pane-flow .fv-drawer {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 380px; max-width: calc(100% - 24px); z-index: 4;
  display: none; flex-direction: column; overflow: hidden; cursor: default; user-select: text;
  background: #1e1e23; border: 1px solid #3a3a44; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  color: var(--fv-text);
}
#pane-flow .fv-drawer.is-open { display: flex; }
#pane-flow .fv-drawer-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #33333c;
}
#pane-flow .fv-drawer-head .fv-node-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
#pane-flow .fv-drawer-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#pane-flow .fv-drawer-head strong { font-size: 15px; }
#pane-flow .fv-drawer-head small { font: 500 11.5px "JetBrains Mono", monospace; color: var(--fv-muted); }
#pane-flow .fv-drawer-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #3a3a44; background: transparent; color: #c8c8d2;
  font-size: 19px; line-height: 1; cursor: pointer;
}
#pane-flow .fv-drawer-close:hover { background: #2c2c34; }
#pane-flow .fv-drawer-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#pane-flow .fv-drawer-body h4 { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fv-muted); }
#pane-flow .fv-desc { margin: 0; font-size: 13px; line-height: 1.5; color: #d4d4dc; }
#pane-flow .fv-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--fv-muted); }
#pane-flow .fv-warn, #pane-flow .fv-err { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
#pane-flow .fv-warn { background: rgba(245,185,62,.12); border: 1px solid rgba(245,185,62,.35); color: #f7d58c; }
#pane-flow .fv-err { background: rgba(255,90,95,.12); border: 1px solid rgba(255,90,95,.35); color: #ffb0b3; word-break: break-word; }
#pane-flow .fv-empty { margin: 0; font-size: 12.5px; color: var(--fv-muted); }
#pane-flow .fv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#pane-flow .fv-chip { padding: 3px 9px; border-radius: 99px; font-size: 12px; background: #2b2b33; border: 1px solid #3f3f48; color: #cfcfd8; }
#pane-flow .fv-chip b { font-variant-numeric: tabular-nums; }
#pane-flow .fv-chip.is-run { border-color: rgba(255,155,61,.5); color: #ffc28a; }
#pane-flow .fv-chip.is-bad { border-color: rgba(255,90,95,.5); color: #ff9ca0; }
#pane-flow .fv-chip.is-ok { border-color: rgba(55,194,138,.5); color: #86e0bb; }
#pane-flow .fv-link-btn {
  align-self: flex-start; padding: 7px 12px; border-radius: 8px; border: 1px solid #4b4b57; background: #2a2a31;
  color: #dcdcff; font: 600 12.5px var(--bs-body-font-family); cursor: pointer;
}
#pane-flow .fv-link-btn:hover { background: #33333c; }
#pane-flow .fv-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#pane-flow .fv-item { padding: 9px 10px; border-radius: 8px; background: #25252b; border: 1px solid #33333c; border-left: 3px solid #4b4b57; }
#pane-flow .fv-item.fvs-running, #pane-flow .fv-item.fvs-UPLOADING { border-left-color: var(--fv-run); }
#pane-flow .fv-item.fvs-failed, #pane-flow .fv-item.fvs-ERROR, #pane-flow .fv-item.fvs-NEEDS_CHECK,
#pane-flow .fv-item.fvs-blocked, #pane-flow .fv-item.fvs-partial, #pane-flow .fv-item.fvs-PARTIAL_FAILED { border-left-color: var(--fv-bad); }
#pane-flow .fv-item.fvs-done, #pane-flow .fv-item.fvs-SUCCESS, #pane-flow .fv-item.fvs-completed, #pane-flow .fv-item.fvs-COMPLETED { border-left-color: var(--fv-ok); }
#pane-flow .fv-item-top { display: flex; justify-content: space-between; gap: 8px; }
#pane-flow .fv-item-title { font-size: 12.5px; font-weight: 600; color: #ececf2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pane-flow .fv-item-status { flex-shrink: 0; font-size: 11px; color: var(--fv-muted); }
#pane-flow .fv-item-sub { margin-top: 3px; font: 500 11px/1.4 "JetBrains Mono", monospace; color: var(--fv-muted); word-break: break-word; }
#pane-flow .fv-item-err { margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: #ff9ca0; word-break: break-word; }
#pane-flow .fv-item-link { display: inline-block; margin-top: 5px; font-size: 11.5px; color: #9fb0ff; }
#pane-flow .fv-log {
  margin: 0; max-height: 220px; overflow: auto; padding: 10px; border-radius: 8px; background: #121215; border: 1px solid #2c2c33;
  font: 11px/1.5 "JetBrains Mono", monospace; color: #b8b8c4; white-space: pre-wrap; word-break: break-word;
}

#pane-flow .fv-dots { pointer-events: none; }

@keyframes fv-flow { to { stroke-dashoffset: -26; } }
@keyframes fv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,155,61,.0); } 50% { box-shadow: 0 0 0 6px rgba(255,155,61,.18); } }
@keyframes fv-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #pane-flow .fv-edge.is-active, #pane-flow .fv-node.fvs-running { animation: none; }
  #pane-flow .fv-dots { display: none; }
}

@media (max-width: 720px) {
  #pane-flow .fv-canvas { height: calc(100vh - 260px); min-height: 440px; }
  #pane-flow .fv-tabs { width: 100%; overflow-x: auto; }
  #pane-flow .fv-tab { flex: 1; }
  #pane-flow .fv-legend { display: none; }
  #pane-flow .fv-drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; height: 62%; }
}