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

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

#navbar {
    height: 4rem;
}

#mobile-menu {
    top: 4rem;
}

@layer components {
    .nav-link {
        @apply text-gray-700 dark:text-gray-300;
    }
    
    .nav-link.active {
        @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-gray-700;
    }
    
    .sidebar-link.active {
        @apply bg-primary-50 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
    }
    
    .btn-primary {
        @apply inline-flex items-center px-4 py-2 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition-colors;
    }
    
    .btn-secondary {
        @apply inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
    }
    
    .card {
        @apply bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-100 dark:border-gray-700;
    }
    
    .module-card {
        @apply card p-6 hover:shadow-lg transition-shadow cursor-pointer;
    }
    
    .question-card {
        @apply card p-6 mb-4;
    }
    
    .flashcard {
        @apply perspective-1000 cursor-pointer;
    }
    
    .flashcard-inner {
        @apply relative w-full h-64 transition-transform duration-500 transform-style-3d;
    }
    
    .flashcard.flipped .flashcard-inner {
        @apply rotate-y-180;
    }
    
    .flashcard-front,
    .flashcard-back {
        @apply absolute inset-0 backface-hidden bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex items-center justify-center;
    }
    
    .flashcard-back {
        @apply rotate-y-180;
    }
    
    .collapse-content {
        @apply overflow-hidden transition-all duration-300;
    }
    
    .collapse-content.collapsed {
        @apply max-h-0;
    }
    
    .collapse-content.expanded {
        @apply max-h-[2000px];
    }
}

@layer utilities {
    .perspective-1000 {
        perspective: 1000px;
    }
    
    .transform-style-3d {
        transform-style: preserve-3d;
    }
    
    .backface-hidden {
        backface-visibility: hidden;
    }
    
    .rotate-y-180 {
        transform: rotateY(180deg);
    }
    
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-600;
}

@media print {
    nav, aside, footer, .no-print {
        display: none !important;
    }
    
    main {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

* {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
    .mobile-nav {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.5);
    }
}

.timer-warning {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.35s;
    transform-origin: 50% 50%;
}

.stagger-1 { animation-delay: 100ms; }
.stagger-2 { animation-delay: 200ms; }
.stagger-3 { animation-delay: 300ms; }
.stagger-4 { animation-delay: 400ms; }
.stagger-5 { animation-delay: 500ms; }
.stagger-6 { animation-delay: 600ms; }
.stagger-7 { animation-delay: 700ms; }
.stagger-8 { animation-delay: 800ms; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }