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

@layer components {
    /* Glassmorphism Utilities */
    .glass-card {
        @apply bg-white/70 dark:bg-gray-800/70 backdrop-blur-md border border-white/20 dark:border-gray-700/30 shadow-xl rounded-2xl;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card:hover {
        @apply -translate-y-2 shadow-2xl shadow-indigo-500/10;
    }

    .glass-card-dark {
        @apply bg-gray-900/40 backdrop-blur-xl border border-gray-700/30 shadow-2xl rounded-2xl;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .glass-card-dark:hover {
        @apply -translate-y-2 shadow-purple-500/20;
    }

    .glass-sidebar {
        @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-r border-white/20 dark:border-gray-700/30;
    }

    .glass-header {
        @apply bg-white/60 dark:bg-gray-900/60 backdrop-blur-md border-b border-white/20 dark:border-gray-700/30;
    }

    /* Staggered Animations */
    .animate-stagger-1 { animation: fadeInScale 0.5s ease-out forwards; animation-delay: 0.1s; opacity: 0; }
    .animate-stagger-2 { animation: fadeInScale 0.5s ease-out forwards; animation-delay: 0.2s; opacity: 0; }
    .animate-stagger-3 { animation: fadeInScale 0.5s ease-out forwards; animation-delay: 0.3s; opacity: 0; }
    .animate-stagger-4 { animation: fadeInScale 0.5s ease-out forwards; animation-delay: 0.4s; opacity: 0; }
    .animate-stagger-5 { animation: fadeInScale 0.5s ease-out forwards; animation-delay: 0.5s; opacity: 0; }

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

    /* Premium Gradients */
    .gradient-revenue {
        background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    }

    .gradient-orders {
        background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    }

    .gradient-customers {
        background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    }

    .gradient-items {
        background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400;
    }

    /* Interactive Elements */
    .hover-glow {
        @apply transition-all duration-500 relative overflow-hidden;
    }

    .hover-glow::after {
        content: '';
        @apply absolute inset-0 opacity-0 transition-opacity duration-500 pointer-events-none;
        background: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    }

    .hover-glow:hover::after {
        @apply opacity-100;
    }

    .premium-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    }

    .premium-shadow-hover:hover {
        @apply shadow-2xl shadow-indigo-500/5;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-900;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-700 rounded-full hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors;
}
