@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply bg-gray-50;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Custom styles for react-flow */
.react-flow__node {
  @apply shadow-md rounded-md;
  cursor: grab;
  user-select: none;
  pointer-events: auto;
}

.react-flow__node.dragging {
  cursor: grabbing;
}

.react-flow__node-default {
  @apply bg-white border border-gray-200;
}

.react-flow__handle {
  @apply w-3 h-3;
  pointer-events: auto;
}

.react-flow__handle-top {
  @apply top-0 -translate-y-1/2;
}

.react-flow__handle-bottom {
  @apply bottom-0 translate-y-1/2;
}

.react-flow__edge-path {
  @apply stroke-2 stroke-gray-400;
}

.react-flow__controls {
  @apply shadow-md;
}

/* Ensure React Flow pane is properly configured */
.react-flow__pane {
  cursor: default;
}

/* Node types */
.node-webhook {
  @apply border-l-4 border-l-blue-500;
}

.node-http-request {
  @apply border-l-4 border-l-green-500;
}

.node-function {
  @apply border-l-4 border-l-purple-500;
}

.node-delay {
  @apply border-l-4 border-l-amber-500;
}

.node-email {
  @apply border-l-4 border-l-red-500;
}

.node-logger {
  @apply border-l-4 border-l-gray-500;
}