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

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

    body {
        font-family: 'Inter', system-ui, sans-serif;
    }

    ::selection {
        background: #4F46E5;
        color: white;
    }
}

@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-gradient-to-r from-primary to-indigo-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all duration-300 transform hover:-translate-y-0.5;
    }

    .btn-secondary {
        @apply px-6 py-3 bg-white text-gray-800 font-semibold rounded-xl border-2 border-gray-200 hover:border-primary hover:text-primary transition-all duration-300;
    }

    .card {
        @apply bg-white rounded-2xl shadow-xl p-6 border border-gray-100 hover:shadow-2xl transition-all duration-500;
    }

    .card-dark {
        @apply bg-gray-800/80 backdrop-blur-xl rounded-2xl shadow-2xl p-6 border border-gray-700/50;
    }

    /* Glass Effect */
    .glass {
        @apply bg-white/10 backdrop-blur-xl border border-white/20 shadow-xl;
    }

    .glass-dark {
        @apply bg-gray-900/60 backdrop-blur-xl border border-gray-700/50 shadow-2xl;
    }

    /* Gradient Text */
    .gradient-text {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-purple-500 to-secondary;
    }

    /* Input Styling */
    .input-premium {
        @apply w-full px-4 py-3 bg-gray-50 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all duration-300;
    }

    /* Table Enhancements */
    .table-premium thead th {
        @apply px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 text-xs font-bold text-gray-600 uppercase tracking-wider border-b-2 border-gray-200;
    }

    .table-premium tbody tr {
        @apply hover:bg-gradient-to-r hover:from-primary/5 hover:to-transparent transition-all duration-300;
    }

    /* Sidebar Menu Animation */
    .sidebar-link {
        @apply relative overflow-hidden;
    }

    .sidebar-link::before {
        content: '';
        @apply absolute left-0 top-0 w-1 h-full bg-primary transform -translate-x-full transition-transform duration-300;
    }

    .sidebar-link:hover::before,
    .sidebar-link.active::before {
        @apply translate-x-0;
    }
}

@layer utilities {

    /* Floating Animation */
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    /* Pulse Glow */
    .animate-pulse-glow {
        animation: pulse-glow 2s ease-in-out infinite;
    }

    @keyframes pulse-glow {

        0%,
        100% {
            box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
        }

        50% {
            box-shadow: 0 0 40px rgba(79, 70, 229, 0.6);
        }
    }

    /* Shimmer Effect */
    .animate-shimmer {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        background-size: 200% 100%;
        animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    /* Fade In Up */
    .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    /* Scale In */
    .animate-scale-in {
        animation: scaleIn 0.5s ease-out forwards;
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Gradient Border */
    .border-gradient {
        border: 2px solid transparent;
        background: linear-gradient(white, white) padding-box,
            linear-gradient(135deg, #4F46E5, #EC4899) border-box;
    }

    /* Text Shadow Glow */
    .text-glow {
        text-shadow: 0 0 40px rgba(79, 70, 229, 0.5);
    }

    /* Hover Lift */
    .hover-lift {
        @apply transition-all duration-300;
    }

    .hover-lift:hover {
        @apply -translate-y-2 shadow-2xl;
    }
}