/* ============================
   Tailwind Directives
   ============================ */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================
   Google Fonts Import
   ============================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================
   Base Layer
   ============================ */
@layer base {
  html {
    @apply scroll-smooth antialiased;
  }

  body {
    @apply font-sans text-slate-300 bg-[#0b1120];
    min-height: 100vh;
  }

  ::selection {
    @apply bg-sky-500/30 text-white;
  }

  ::-webkit-scrollbar {
    @apply w-1.5;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-slate-700 rounded-full;
  }
}

/* ============================
   Component Layer
   ============================ */
@layer components {

  /* Glass Card */
  .glass-card {
    @apply bg-slate-800/50 border border-slate-700/50 rounded-xl;
  }

  /* Module Card */
  .module-card {
    @apply glass-card p-5 cursor-pointer transition-all duration-200 ease-out hover:bg-slate-800/80 hover:border-slate-600/60 active:scale-[0.99];
  }

  /* Option Button */
  .option-btn {
    @apply bg-slate-800/40 border border-slate-700/40 rounded-lg p-4 w-full text-left transition-all duration-150 ease-out hover:bg-slate-700/50 hover:border-slate-600/50 cursor-pointer select-none;
  }

  .option-btn.selected {
    @apply bg-sky-500/10 border-sky-500/40 text-sky-100;
  }

  .option-btn.correct {
    @apply bg-emerald-500/10 border-emerald-500/40 text-emerald-200;
  }

  .option-btn.incorrect {
    @apply bg-rose-500/10 border-rose-500/40 text-rose-200;
  }

  .option-btn.missed {
    @apply bg-amber-500/10 border-amber-400/30 text-amber-200;
  }

  .option-btn.disabled {
    @apply pointer-events-none;
  }

  /* Buttons */
  .btn-primary {
    @apply px-5 py-2.5 bg-sky-600 text-white font-medium rounded-lg transition-all duration-150 ease-out hover:bg-sky-500 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-sky-600;
  }

  .btn-secondary {
    @apply px-5 py-2.5 bg-slate-700/60 text-slate-200 font-medium rounded-lg border border-slate-600/40 transition-all duration-150 ease-out hover:bg-slate-700 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply px-3 py-2 text-slate-400 rounded-lg transition-colors duration-150 hover:text-white hover:bg-slate-800;
  }

  /* Badge */
  .badge {
    @apply inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-md;
  }

  .badge-primary {
    @apply badge bg-sky-500/15 text-sky-300 border border-sky-500/20;
  }

  .badge-warning {
    @apply badge bg-amber-500/15 text-amber-300 border border-amber-500/20;
  }

  .badge-success {
    @apply badge bg-emerald-500/15 text-emerald-300 border border-emerald-500/20;
  }

  .badge-danger {
    @apply badge bg-rose-500/15 text-rose-300 border border-rose-500/20;
  }

  /* Progress Bar */
  .progress-bar {
    @apply h-1.5 bg-slate-800 rounded-full overflow-hidden;
  }

  .progress-fill {
    @apply h-full bg-sky-500 rounded-full transition-all duration-500 ease-out;
  }

  /* Stat Card */
  .stat-card {
    @apply glass-card p-4 flex flex-col items-center justify-center text-center gap-1;
  }

  /* Question Navigation Dots */
  .q-nav-dot {
    @apply w-8 h-8 flex items-center justify-center text-xs font-medium rounded-md border border-slate-700/40 bg-slate-800/30 transition-all duration-150 cursor-pointer hover:bg-slate-700/50 text-slate-400;
  }

  .q-nav-dot.active {
    @apply bg-sky-500/15 border-sky-500/40 text-sky-300 font-semibold;
  }

  .q-nav-dot.answered {
    @apply bg-slate-700/40 border-slate-600/40 text-slate-300;
  }

  .q-nav-dot.correct-dot {
    @apply bg-emerald-500/10 border-emerald-500/30 text-emerald-400;
  }

  .q-nav-dot.incorrect-dot {
    @apply bg-rose-500/10 border-rose-500/30 text-rose-400;
  }

  .q-nav-dot.verified-dot {
    @apply bg-sky-500/10 border-sky-500/30 text-sky-400;
  }

  /* Part Card */
  .part-card {
    @apply glass-card p-4 cursor-pointer transition-all duration-200 ease-out hover:bg-slate-800/80 hover:border-slate-600/60 active:scale-[0.99] flex items-center justify-between;
  }
}

/* ============================
   Animations
   ============================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.25s ease-out;
}