workflow-builder/src/index.css

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

@layer base {
  * {
    @apply border-gray-200;
  }
  body {
    @apply bg-white text-gray-900 font-sans;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
  }
}

@layer components {
  /* React Flow Custom Styles */
  .react-flow__node {
    @apply shadow-lg border-2 border-gray-200 rounded-2xl transition-all duration-300;
  }

  .react-flow__node.selected {
    @apply border-blue-500 shadow-blue-200 ring-2 ring-blue-500 ring-opacity-20;
  }

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

  .react-flow__edge.selected {
    @apply stroke-blue-500;
  }

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

  .react-flow__handle {
    @apply w-4 h-4 border-2 border-white bg-gray-400 hover:bg-gray-500 transition-colors;
  }

  .react-flow__handle-top {
    @apply -top-2;
  }

  .react-flow__handle-bottom {
    @apply -bottom-2;
  }

  .react-flow__handle-left {
    @apply -left-2;
  }

  .react-flow__handle-right {
    @apply -right-2;
  }

  /* Custom Components */
  .gradient-text {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent;
  }

  .glass-effect {
    @apply bg-white/80 backdrop-blur-sm border border-white/20;
  }

  .card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }

  .button-primary {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all duration-200 shadow-lg hover:shadow-xl;
  }

  .button-secondary {
    @apply bg-white text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all duration-200;
  }

  /* Animation Classes */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  .animate-bounce-gentle {
    animation: bounceGentle 0.6s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes bounceGentle {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
    60% {
      transform: translateY(-3px);
    }
  }

  /* Status Indicators */
  .status-idle {
    @apply bg-gray-100 text-gray-600;
  }

  .status-running {
    @apply bg-blue-100 text-blue-700 animate-pulse;
  }

  .status-success {
    @apply bg-green-100 text-green-700;
  }

  .status-error {
    @apply bg-red-100 text-red-700;
  }

  /* Node Type Colors */
  .node-data-input {
    @apply bg-blue-50 border-blue-200 text-blue-700;
  }

  .node-web-scraping {
    @apply bg-green-50 border-green-200 text-green-700;
  }

  .node-llm-task {
    @apply bg-purple-50 border-purple-200 text-purple-700;
  }

  .node-data-output {
    @apply bg-orange-50 border-orange-200 text-orange-700;
  }
}