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

:root {
  --foreground-rgb: 30, 41, 59;
  --background-rgb: 248, 250, 252;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

/* React Flow Customization - n8n style */
.react-flow__node {
  cursor: grab;
}

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

.react-flow__node.selected {
  outline: none;
}

.react-flow__edge-path {
  stroke-linecap: round;
}

.react-flow__controls {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.react-flow__controls-button {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  width: 28px;
  height: 28px;
}

.react-flow__controls-button:hover {
  background: #f1f5f9;
}

.react-flow__controls-button svg {
  fill: #64748b;
}

/* Range input styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
}

input[type="range"]:focus {
  outline: none;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}