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

[x-cloak] {
  display: none !important;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply text-slate-800 antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl font-semibold text-white bg-primary-600 hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 shadow-sm hover:shadow;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 focus:ring-2 focus:ring-slate-300 focus:ring-offset-2 transition-all duration-200;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl font-medium text-primary-700 border-2 border-primary-600 hover:bg-primary-50 transition-all duration-200;
  }

  .card {
    @apply bg-white rounded-2xl border border-slate-100 overflow-hidden transition-all duration-300;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  .card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 12px 28px -4px rgba(0, 0, 0, 0.06);
    @apply border-slate-200/80;
  }

  .card-body {
    @apply p-6;
  }

  .input-field {
    @apply block w-full rounded-xl border-slate-300 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 text-slate-900 transition duration-200;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }

  .badge-primary {
    @apply badge bg-primary-100 text-primary-800;
  }

  .badge-success {
    @apply badge bg-emerald-100 text-emerald-800;
  }

  .badge-warning {
    @apply badge bg-amber-100 text-amber-800;
  }

  .section-padding {
    @apply py-16 lg:py-24;
  }

  .section-heading {
    @apply text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight;
  }

  .section-subheading {
    @apply mt-2 text-lg text-slate-600 max-w-2xl;
  }

  .stat-card {
    @apply bg-white rounded-2xl border border-slate-100 p-6 transition-all duration-200;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .stat-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .stat-card .stat-value {
    @apply text-2xl sm:text-3xl font-bold text-slate-900 mt-1;
  }

  .stat-card .stat-label {
    @apply text-sm font-medium text-slate-500 uppercase tracking-wide;
  }

  .course-card {
    @apply block bg-white rounded-2xl border border-slate-100 overflow-hidden transition-all duration-300;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  .course-card:hover {
    @apply border-primary-100 -translate-y-1;
    box-shadow: 0 12px 32px -8px rgba(220, 38, 38, 0.15), 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .admin-table-wrap {
    @apply bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-soft;
  }

  .admin-table thead {
    @apply bg-slate-50/80;
  }

  .admin-table th {
    @apply px-6 py-4 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider;
  }

  .admin-table tbody tr {
    @apply border-b border-slate-100 transition-colors duration-150;
  }

  .admin-table tbody tr:hover {
    @apply bg-slate-50/60;
  }

  .admin-table td {
    @apply px-6 py-4 text-sm text-slate-700;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}