/* Custom Drawflow Styles for Castelweide */
:root {
  --dfBackgroundColor: #111827; /* Tailwind gray-900 */
  --dfBackgroundGrid: #1f2937; /* Tailwind gray-800 */
  --dfNodeBackgroundColor: #374151; /* Tailwind gray-700 */
  --dfNodeTextColor: #ffffff;
  --dfNodeBorderColor: #4b5563; /* Tailwind gray-600 */
}

#drawflow {
  background: var(--dfBackgroundColor);
  background-size: 25px 25px;
  background-image: linear-gradient(to right, var(--dfBackgroundGrid) 1px, transparent 1px), linear-gradient(to bottom, var(--dfBackgroundGrid) 1px, transparent 1px);
}

.drawflow {
  /* Ensure the inner canvas doesn't mask the parent grid if it has its own bg */
  background: transparent !important;
}

.drawflow .drawflow-node {
  background: var(--dfNodeBackgroundColor);
  color: var(--dfNodeTextColor);
  border: 2px solid var(--dfNodeBorderColor);
  border-radius: 12px;
  padding: 15px;
  width: 250px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.drawflow .drawflow-node.selected {
  border-color: #3b82f6; /* Tailwind blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.drawflow-node .title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  border-bottom: 1px solid var(--dfNodeBorderColor);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.drawflow-node .incomplete-icon {
  color: #ef4444; /* red-500 */
  display: none;
  font-size: 1.2rem;
}

.drawflow-node.incomplete .incomplete-icon {
  display: block;
}

.drawflow .connection .main-path {
  stroke: #9ca3af; /* gray-400 */
  stroke-width: 3px;
}

.drawflow-node .input, .drawflow-node .output {
  background: #60a5fa; /* blue-400 */
  border: 2px solid var(--dfBackgroundColor);
  width: 16px;
  height: 16px;
}

/* Sidebar dragging styles */
.drag-drawflow {
  cursor: grab;
}
.drag-drawflow:active {
  cursor: grabbing;
}