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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply antialiased text-gray-800 bg-gray-50 flex flex-col min-h-screen;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }
  .btn-secondary {
    @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-primary-500;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
  }

  .nav-link {
    @apply text-gray-600 hover:text-primary-600 font-medium transition-colors px-3 py-2 rounded-md;
  }
  .nav-link.active {
    @apply text-primary-600 bg-primary-50;
  }
}

/* Custom Scrollbar for the output area */
.output-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.output-area::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 4px;
}
.output-area::-webkit-scrollbar-thumb {
  background: #cbd5e1; 
  border-radius: 4px;
}
.output-area::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; 
}