@import 'tailwindcss';

@layer base {
  body {
    @apply bg-slate-100 text-slate-800 antialiased;
  }
}

@layer components {
  .auth-page {
    @apply min-h-screen flex items-center justify-center px-4 bg-slate-100;
  }

  .auth-card {
    @apply w-full max-w-md bg-white rounded-xl shadow-md border border-slate-200 p-8;
  }

  .page-shell {
    @apply min-h-screen bg-slate-100 py-8 px-4;
  }

  .page-container {
    @apply max-w-2xl mx-auto;
  }

  .page-title {
    @apply text-2xl font-bold text-slate-800 mb-6;
  }

  .form-card {
    @apply bg-white rounded-xl border border-slate-200 p-5 space-y-4 shadow-sm;
  }

  .input-field {
    @apply w-full border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }

  .label-text {
    @apply block text-sm font-medium text-slate-700 mb-1;
  }

  .btn-primary {
    @apply bg-blue-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors;
  }

  .btn-back {
    @apply inline-block text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg px-4 py-2 hover:bg-slate-50 transition-colors shadow-sm;
  }

  .list-card {
    @apply bg-white border border-slate-200 rounded-lg p-4 shadow-sm;
  }

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

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

  .stat-card {
    @apply bg-white border border-slate-200 rounded-xl p-6 shadow-sm;
  }

  .stat-label {
    @apply text-sm text-slate-500 font-medium;
  }

  .stat-value {
    @apply text-3xl font-bold text-slate-800 mt-1;
  }

  .nav-link {
    @apply block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-white transition-colors;
  }

  .nav-link-active {
    @apply block rounded-lg px-3 py-2.5 text-sm font-medium bg-blue-600 text-white;
  }

  .btn-text-edit {
    @apply text-sm font-medium text-blue-600 hover:text-blue-800;
  }

  .btn-text-delete {
    @apply text-sm font-medium text-red-600 hover:text-red-800;
  }

  .summary-box {
    @apply mt-6 bg-white border border-slate-200 rounded-xl p-5 shadow-sm;
  }
}
