@import 'tailwindcss';

body {
  @apply bg-gray-100 text-gray-900;
}

@layer components {
  .input-field {
    @apply w-full rounded border border-gray-300 px-3 py-2 focus:border-teal-700 focus:outline-none;
  }

  .btn-primary {
    @apply rounded bg-teal-700 px-4 py-2 text-white hover:bg-teal-800 disabled:opacity-50;
  }

  .btn-secondary {
    @apply rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 hover:bg-gray-50;
  }

  .btn-link {
    @apply text-blue-600 hover:underline;
  }

  .btn-danger {
    @apply text-red-600 hover:underline;
  }

  .box {
    @apply rounded border border-gray-300 bg-white p-4;
  }

  .alert-success {
    @apply mb-4 rounded border border-green-300 bg-green-50 px-3 py-2 text-sm text-green-800;
  }

  .alert-error {
    @apply mb-4 rounded border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700;
  }

  .nav-link {
    @apply block rounded px-3 py-2 text-sm text-gray-200 hover:bg-teal-800;
  }

  .nav-link-active {
    @apply bg-blue-700 text-white hover:bg-blue-700;
  }

  .data-table {
    @apply w-full border-collapse text-left text-sm;
  }

  .data-table th {
    @apply border border-gray-300 bg-gray-50 px-3 py-2 font-medium;
  }

  .data-table td {
    @apply border border-gray-300 px-3 py-2;
  }
}
