/* Description Nodes Styles */
.description-node {
  cursor: pointer;
  transition: all 0.2s ease;
}

.description-node rect {
  fill: #ffffff;
  stroke: #6b7280;
  stroke-width: 1.5;
  rx: 6;
  ry: 6;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.description-node:hover rect {
  fill: #f3f4f6;
  stroke: #374151;
  stroke-width: 2;
}

.description-node.selected rect {
  fill: #e0f2fe;
  stroke: #0284c7;
  stroke-width: 2.5;
}

.description-node.dragging rect {
  fill: #fef3c7;
  stroke: #d97706;
  stroke-width: 2;
  opacity: 0.8;
}

.description-node text {
  fill: #1f2937;
  /* font-size: 12px; */
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.description-node-text,
.description-node-text tspan {
  text-anchor: start;
  dominant-baseline: text-before-edge;
}

/* Style variations */
.description-node.style-info rect {
  fill: #dbeafe;
  stroke: #3b82f6;
}

.description-node.style-info text {
  fill: #1e3a8a;
}

.description-node.style-warning rect {
  fill: #fef3c7;
  stroke: #f59e0b;
}

.description-node.style-warning text {
  fill: #78350f;
}

.description-node.style-danger rect {
  fill: #fee2e2;
  stroke: #ef4444;
}

.description-node.style-danger text {
  fill: #7f1d1d;
}

.description-node.style-success rect {
  fill: #dcfce7;
  stroke: #22c55e;
}

.description-node.style-success text {
  fill: #14532d;
}

.description-node.style-default rect {
  fill: #f9fafb;
  stroke: #6b7280;
}

/* Responsive adjustments */
/* @media (max-width: 768px) {
  .description-node text {
    font-size: 10px;
  }
} */