@import "tailwindcss";

@layer base {
  html {
    @apply text-gray-900;
  }

  body {
    @apply bg-gray-50;
  }

  h1 {
    @apply text-2xl font-bold;
  }

  h2 {
    @apply text-xl font-semibold;
  }

  h3 {
    @apply text-lg font-medium;
  }

  a {
    @apply text-blue-600 hover:text-blue-800;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors 
      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 
      disabled:opacity-50 disabled:pointer-events-none;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500;
  }

  .btn-outline {
    @apply border border-gray-300 bg-transparent hover:bg-gray-100 text-gray-900 focus-visible:ring-gray-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500;
  }

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

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .card {
    @apply bg-white shadow rounded-lg overflow-hidden;
  }

  .card-header {
    @apply px-4 py-5 sm:px-6 border-b border-gray-200;
  }

  .card-body {
    @apply px-4 py-5 sm:p-6;
  }

  .card-footer {
    @apply px-4 py-4 sm:px-6 bg-gray-50 border-t border-gray-200;
  }
}

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

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

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

/* For text truncation with multiple lines */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
