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

@layer components {
    .dashboard-card {
        @apply relative overflow-hidden transition-all duration-300;
    }

    .dashboard-card:hover {
        @apply transform -translate-y-1 shadow-lg;
    }

    .stat-icon {
        @apply p-3 rounded-full transition-colors duration-200;
    }

    .score-card {
        @apply relative overflow-hidden;
    }

    .score-card::before {
        @apply absolute inset-0 bg-gradient-to-br from-primary-500/5 to-transparent dark:from-primary-400/5;
        content: '';
    }

    .domain-card {
        @apply relative overflow-hidden transition-all duration-300;
    }

    .domain-card:hover {
        @apply transform -translate-y-1;
    }

    .domain-card::after {
        @apply absolute top-0 right-0 w-24 h-24 -translate-y-12 translate-x-12 
               bg-gradient-to-br from-primary-500/10 to-transparent 
               dark:from-primary-400/10 rounded-full;
        content: '';
    }

    .progress-bar {
        @apply relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden;
    }

    .progress-bar-fill {
        @apply absolute inset-y-0 left-0 bg-primary-500 dark:bg-primary-400 transition-all duration-500;
    }

    .metric-value {
        @apply text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r 
               from-primary-500 to-primary-600 dark:from-primary-400 dark:to-primary-500;
    }

    .custom-scrollbar {
        @apply scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 
               scrollbar-track-gray-100 dark:scrollbar-track-gray-800;
    }
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slideIn 0.6s ease-out forwards;
}