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

@layer base {
  :root {
    --brand: #1a4b8c;
    --brand-light: #e8eef8;
  }

  body {
    @apply text-sm;
  }

  h1 { @apply text-2xl font-bold; }
  h2 { @apply text-xl font-bold; }
  h3 { @apply text-lg font-semibold; }
}

@layer components {
  .btn {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-colors;
  }
  .btn-primary {
    @apply btn bg-brand-500 text-white hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply btn bg-white text-gray-700 border border-gray-200 hover:bg-gray-50;
  }
  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700;
  }

  .card {
    @apply bg-white rounded-xl border border-gray-200 shadow-sm;
  }
  .card-header {
    @apply px-6 py-4 border-b border-gray-100 flex items-center justify-between;
  }
  .card-body {
    @apply px-6 py-4;
  }

  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-blue { @apply badge bg-blue-100 text-blue-700; }
  .badge-green { @apply badge bg-green-100 text-green-700; }
  .badge-yellow { @apply badge bg-yellow-100 text-yellow-700; }
  .badge-red { @apply badge bg-red-100 text-red-700; }
  .badge-gray { @apply badge bg-gray-100 text-gray-700; }

  .input {
    @apply w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent;
  }

  .label {
    @apply block text-xs font-medium text-gray-600 mb-1;
  }

  .table-container {
    @apply overflow-x-auto rounded-lg border border-gray-200;
  }
  .table {
    @apply w-full text-sm text-left;
  }
  .table thead tr {
    @apply bg-brand-500 text-white;
  }
  .table thead th {
    @apply px-4 py-3 font-medium text-xs uppercase tracking-wide;
  }
  .table tbody tr {
    @apply border-b border-gray-100 hover:bg-gray-50 transition-colors;
  }
  .table tbody td {
    @apply px-4 py-3;
  }
}