/* ============================
   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.unsupported-dot {
        @apply bg-amber-500/10 border-amber-500/30 text-amber-300;
    }

    .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;
    }

    /* Explanation Card */
    .explanation-card {
        @apply bg-sky-500/5 border border-sky-500/15;
        animation: slideUp 0.25s ease-out;
    }

    /* Progress Circle */
    .progress-ring {
        transform: rotate(-90deg);
    }

    .progress-ring__circle-bg {
        fill: none;
        stroke: rgb(51 65 85 / 0.5);
        stroke-width: 3;
    }

    .progress-ring__circle {
        fill: none;
        stroke-width: 3;
        stroke-linecap: round;
        transition:
            stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1),
            stroke 0.3s ease;
    }

    .check-badge {
        @apply text-emerald-400;
        animation: fadeIn 0.3s ease-out;
    }

    /* Visual Content (Images & Tables) */
    .visual-item {
        @apply mb-6;
    }

    .visual-item img {
        @apply max-w-full h-auto rounded-lg;
        max-height: 500px;
    }

    .table-container {
        @apply w-full overflow-x-auto mb-6 rounded-lg border border-slate-700/50;
    }

    .exam-table {
        @apply w-full text-sm;
    }

    .exam-table thead {
        @apply bg-slate-800/80 border-b border-slate-700/50;
    }

    .exam-table th {
        @apply px-4 py-3 text-left text-slate-300 font-semibold text-xs uppercase tracking-wider;
    }

    .exam-table tbody tr {
        @apply border-b border-slate-700/30 hover:bg-slate-800/30 transition-colors duration-150;
    }

    .exam-table td {
        @apply px-4 py-3 text-slate-300;
    }

    .exam-table tbody tr:last-child {
        @apply border-b-0;
    }
}

/* ============================
   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;
}