@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold transition-all duration-200 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-primary text-white hover:bg-primary-light hover:shadow-md;
  }
  .btn-secondary {
    @apply btn bg-secondary text-white hover:bg-secondary/90;
  }
  .btn-outline {
    @apply btn border border-border bg-white text-foreground hover:bg-muted hover:border-primary/30;
  }
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }
  .btn-icon {
    @apply p-2;
  }
  
  /* Layout */
  .page-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
  }
  .page-header {
    @apply mb-8;
  }
  .page-title {
    @apply text-2xl font-bold text-foreground font-heading tracking-tight;
  }
  .page-description {
    @apply text-muted-foreground mt-2;
  }
  
  /* Cards */
  .card {
    @apply bg-card text-card-foreground rounded-xl border border-border shadow-sm overflow-hidden;
  }
  .card-header {
    @apply px-6 py-5 border-b border-border bg-white/50;
  }
  .card-title {
    @apply text-lg font-semibold text-foreground tracking-tight;
  }
  .card-body {
    @apply p-6;
  }

  /* Forms */
  .form-group {
    @apply space-y-1.5;
  }
  .form-label {
    @apply block text-sm font-medium text-foreground;
  }
  .form-input {
    @apply block w-full rounded-lg border border-border bg-white px-3 py-2 text-sm text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary disabled:bg-muted disabled:text-muted-foreground;
  }
  .form-select {
    @apply form-input appearance-none;
  }
  
  /* Badges */
  .badge {
    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold tracking-wide uppercase;
  }
  .badge-primary {
    @apply badge bg-blue-100 text-blue-800 border border-blue-200;
  }
  .badge-success {
    @apply badge bg-green-100 text-green-800 border border-green-200;
  }
  .badge-warning {
    @apply badge bg-yellow-100 text-yellow-800 border border-yellow-200;
  }
  .badge-danger {
    @apply badge bg-red-100 text-red-800 border border-red-200;
  }
  .badge-neutral {
    @apply badge bg-gray-100 text-gray-800 border border-gray-200;
  }

  /* Tables */
  .table-container {
    @apply w-full overflow-x-auto rounded-xl border border-border bg-white shadow-sm;
  }
  .data-table {
    @apply w-full text-left text-sm text-foreground divide-y divide-border;
  }
  .data-table thead {
    @apply bg-muted/40;
  }
  .data-table th {
    @apply px-6 py-3 font-semibold text-muted-foreground uppercase tracking-wider text-xs whitespace-nowrap;
  }
  .data-table td {
    @apply px-6 py-4 align-middle whitespace-nowrap;
  }
  .data-table tbody tr {
    @apply hover:bg-muted/30 transition-colors;
  }
  
  /* Modal */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40 transition-opacity;
  }
  .modal-dialog {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0;
  }
  .modal-content {
    @apply relative bg-white rounded-2xl shadow-xl max-w-lg w-full transform overflow-hidden transition-all;
  }
}