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

/* Custom Components */
@layer components {
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out;
  }
  
  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }
  
  .btn-secondary {
    @apply btn bg-soft-100 text-soft-700 hover:bg-soft-200 focus:ring-soft-500 border-soft-300;
  }
  
  .btn-success {
    @apply btn bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
  }
  
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }
  
  .btn-warning {
    @apply btn bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-soft border border-soft-200;
  }
  
  .card-header {
    @apply px-6 py-4 border-b border-soft-200;
  }
  
  .card-body {
    @apply px-6 py-4;
  }
  
  .card-footer {
    @apply px-6 py-4 border-t border-soft-200 bg-soft-50 rounded-b-xl;
  }
  
  .form-input {
    @apply block w-full px-3 py-2 border border-soft-300 rounded-lg shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition duration-150 ease-in-out;
  }
  
  .form-select {
    @apply form-input pr-10 bg-white;
  }
  
  .form-textarea {
    @apply form-input resize-none;
  }
  
  .form-checkbox {
    @apply h-4 w-4 text-primary-600 focus:ring-primary-500 border-soft-300 rounded;
  }
  
  .form-radio {
    @apply h-4 w-4 text-primary-600 focus:ring-primary-500 border-soft-300;
  }
  
  .sidebar-item {
    @apply flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-150 ease-in-out;
  }
  
  .sidebar-item-active {
    @apply sidebar-item bg-primary-100 text-primary-900;
  }
  
  .sidebar-item-inactive {
    @apply sidebar-item text-soft-600 hover:bg-soft-100 hover:text-soft-900;
  }
  
  .table {
    @apply min-w-full divide-y divide-soft-200;
  }
  
  .table-header {
    @apply bg-soft-50;
  }
  
  .table-header-cell {
    @apply px-6 py-3 text-left text-xs font-medium text-soft-500 uppercase tracking-wider;
  }
  
  .table-body {
    @apply bg-white divide-y divide-soft-200;
  }
  
  .table-row {
    @apply hover:bg-soft-50 transition-colors duration-150 ease-in-out;
  }
  
  .table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-soft-900;
  }
  
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-success {
    @apply badge bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800;
  }
  
  .badge-danger {
    @apply badge bg-red-100 text-red-800;
  }
  
  .badge-info {
    @apply badge bg-blue-100 text-blue-800;
  }
  
  .badge-secondary {
    @apply badge bg-soft-100 text-soft-800;
  }
  
  .alert {
    @apply p-4 rounded-lg border;
  }
  
  .alert-success {
    @apply alert bg-green-50 border-green-200 text-green-800;
  }
  
  .alert-warning {
    @apply alert bg-yellow-50 border-yellow-200 text-yellow-800;
  }
  
  .alert-danger {
    @apply alert bg-red-50 border-red-200 text-red-800;
  }
  
  .alert-info {
    @apply alert bg-blue-50 border-blue-200 text-blue-800;
  }
}

/* Custom Utilities */
@layer utilities {
  .text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .bg-gradient-soft {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .bg-gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }
  
  .shadow-soft-colored {
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.15);
  }
}