workflow-builder/src/index.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  * {
    @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;
  }

  /* Accessibility */
  .sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
  }

  /* Focus styles for better accessibility */
  .focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .react-flow__node {
      @apply border-4;
    }

    .react-flow__edge {
      @apply stroke-4;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-slide-up,
    .animate-bounce-gentle {
      animation: none;
    }

    .transition-all {
      transition: none;
    }
  }

  /* Help system styling */
  .help-icon {
    @apply inline-flex items-center justify-center w-5 h-5 rounded-full border border-gray-300 bg-white hover:bg-blue-50 hover:border-blue-300 transition-colors;
  }

  .help-panel {
    @apply border border-blue-200 rounded-lg shadow-sm;
    animation: slideDown 0.2s ease-out;
  }

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

  .user-friendly-name {
    @apply font-medium text-gray-900;
  }

  .technical-name {
    @apply text-xs text-gray-500;
  }

  .field-group {
    @apply mb-4;
  }

  .field-label {
    @apply text-sm font-medium text-gray-700 mb-1 flex items-center;
  }

  .field-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }
}