/*
 * Workflow visual flow builder (Rete.js canvas).
 *
 * The area plugin only positions empty node holders; these rules style the
 * vanilla-rendered node boxes and the SVG connection layer drawn by
 * WorkflowFlowBuilder. Colors derive from Bootstrap theme variables so light
 * and dark mode both work without extra rules.
 */

[data-wf-visual-canvas],
[data-wf-overview-canvas] {
  position: relative;
  overflow: hidden;
  touch-action: none;
  background-image: radial-gradient(var(--bs-border-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

.wf-flow-node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
  user-select: none;
}

.wf-flow-node:active {
  cursor: grabbing;
}

.wf-flow-node-title {
  font-weight: 600;
}

.wf-flow-node-inactive {
  opacity: 0.45;
}

.wf-flow-node-trigger {
  border-radius: 50%;
  background: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}

.wf-flow-node-condition {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0.75rem 1.5rem;
  background: var(--bs-warning-bg-subtle);
}

.wf-flow-node-action {
  background: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
}

.wf-flow-node-else {
  background: var(--bs-secondary-bg-subtle);
  border-color: var(--bs-secondary-border-subtle);
}

/* Connection layer: below the node holders, never a pointer target. */
.wf-flow-edge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

.wf-flow-edge svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
}

.wf-flow-edge path {
  fill: none;
  stroke: var(--bs-secondary-color);
  stroke-width: 2;
}

.wf-flow-edge text {
  fill: var(--bs-secondary-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-anchor: middle;
}

/* Overlay dialog of the rule editor: opens a section card above the canvas. */
.wf-section-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.375rem;
}

.wf-section-overlay .wf-section-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 780px;
  max-height: 100%;
}

.wf-section-overlay .wf-section-dialog > .card-body {
  overflow: auto;
}