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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply text-gray-900 antialiased;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-xl border border-gray-200 shadow-sm;
  }

  .badge-green  { @apply inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700; }
  .badge-red    { @apply inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700; }
  .badge-amber  { @apply inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700; }
  .badge-blue   { @apply inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-700; }
  .badge-purple { @apply inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-700; }

  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-semibold
           hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply px-4 py-2 border border-gray-200 text-gray-700 rounded-lg text-sm font-medium
           hover:bg-gray-50 transition-colors;
  }
  .btn-danger {
    @apply px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-semibold
           hover:bg-red-700 transition-colors;
  }

  .input {
    @apply w-full border border-gray-200 rounded-lg px-3 py-2 text-sm
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           placeholder:text-gray-400;
  }
}