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

@layer base {
  body { @apply bg-gray-50 text-gray-900 font-sans; }
}

@layer components {
  .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors; }
  .btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium transition-colors; }
  .btn-danger { @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-medium transition-colors; }
  .btn-success { @apply bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition-colors; }
  .input-field { @apply w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent; }
  .card { @apply bg-white rounded-xl shadow-sm border border-gray-100 p-6; }
  .table-header { @apply bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wider px-4 py-3; }
  .table-cell { @apply px-4 py-3 text-sm text-gray-700; }
  .table-row { @apply border-b border-gray-100 hover:bg-gray-50 transition-colors; }
  .badge-success { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800; }
  .badge-warning { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800; }
  .badge-danger { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800; }
  .badge-info { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800; }
  .badge-gray { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700; }
  .stat-card { @apply card flex items-center gap-4; }
  .page-header { @apply mb-6 flex items-center justify-between; }
  .page-title { @apply text-2xl font-bold text-gray-900; }
}
