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

@layer components {
  .btn {
    @apply inline-block px-6 py-3 bg-blue-600 text-white font-medium rounded-lg transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700;
  }
  
  .btn-success {
    @apply bg-green-600 hover:bg-green-700;
  }
  
  .btn-danger {
    @apply bg-red-600 hover:bg-red-700;
  }
  
  .form-input {
    @apply w-full px-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 mb-6;
  }
  
  .alert-success {
    @apply bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg mb-4;
  }
  
  .alert-error {
    @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg mb-4;
  }
  
  .error-messages {
    @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg mb-4;
  }
  
  .error-messages ul {
    @apply list-none;
  }
  
  .error-messages li {
    @apply mb-1;
  }

  .table-container {
    @apply overflow-x-auto;
  }

  .table {
    @apply w-full bg-white rounded-lg shadow overflow-hidden;
  }

  .table th {
    @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
  }

  .table tr:hover {
    @apply bg-gray-50;
  }

  .text-success {
    @apply text-green-600;
  }

  .text-danger {
    @apply text-red-600;
  }

  .text-warning {
    @apply text-yellow-600;
  }
}