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

@layer base {
    body {
        @apply font-sans antialiased bg-[#f8fafc] text-slate-900;
        letter-spacing: -0.015em;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-jakarta tracking-tight;
    }

    /* Custom Selection Color */
    ::selection {
        @apply bg-gold-200/50 text-gold-950;
    }
}

@layer components {
    /* Page Headers Subtle Gold Gradient */
    main h1 {
        background-image: linear-gradient(135deg, #0f172a 0%, #b89047 50%, #0f172a 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }

    /* Premium Glassmorphism */
    .glass-panel {
        @apply bg-white/70 backdrop-blur-xl border border-gold-200/50;
    }

    .glass-card {
        @apply bg-white border border-gold-200/60 rounded-2xl shadow-premium transition-all duration-300;
    }

    .glass-card-hover {
        @apply hover:shadow-2xl hover:-translate-y-1 hover:border-gold-300;
    }

    /* Buttons */
    .btn-premium {
        @apply px-5 py-2.5 bg-slate-900 text-white rounded-xl font-bold text-[13px] transition-all duration-300 active:scale-[0.96] hover:bg-slate-800 shadow-lg shadow-slate-900/5 flex items-center justify-center gap-2;
    }

    .btn-premium:hover {
        @apply shadow-[0_0_8px_rgba(200,157,60,0.3)] border-gold-500/35;
    }

    .btn-secondary {
        @apply px-5 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold text-[13px] transition-all duration-300 hover:bg-slate-50 shadow-sm flex items-center justify-center gap-2;
    }

    .btn-secondary:hover {
        @apply shadow-[0_0_8px_rgba(200,157,60,0.3)] border-gold-500/25;
    }

    .btn-ghost {
        @apply px-4 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-100 rounded-xl transition-all duration-200;
    }

    /* Floating Row & Interaction */
    .row-floating {
        @apply bg-white border border-gold-200/50 rounded-[22px] transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.04),0_0_8px_rgba(200,157,60,0.3)] hover:border-gold-500/55 hover:-translate-y-1.5 relative z-10;
    }

    .btn-premium-glass {
        @apply px-6 py-3 bg-white/40 backdrop-blur-md border border-white/60 text-slate-900 rounded-[14px] font-bold text-[13px] transition-all duration-300 active:scale-[0.96] hover:bg-white/60 shadow-xl shadow-slate-900/5 flex items-center justify-center gap-2.5;
    }

    .btn-premium-glass:hover {
        @apply shadow-[0_0_8px_rgba(200,157,60,0.3)] border-gold-500/25;
    }

    .btn-premium-glass i {
        @apply transition-transform duration-300 group-hover:rotate-12;
    }

    .card-premium {
        @apply bg-white rounded-[24px] p-6 border border-gold-200/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all duration-300 hover:shadow-[0_8px_30px_rgb(0,0,0,0.08),0_0_8px_rgba(200,157,60,0.3)] hover:border-gold-500/35 hover:-translate-y-1 relative overflow-hidden flex flex-col;
    }

    /* Tables */
    .table-container {
        @apply glass-card overflow-hidden;
    }

    .table-header {
        @apply text-[10px] font-black uppercase tracking-[0.15em] text-slate-400 bg-slate-50/50 px-8 py-4 border-b border-slate-100;
    }

    .table-row-premium {
        @apply hover:bg-gold-50/20 transition-all duration-300 border-l-2 border-transparent hover:border-gold-500 hover:translate-x-1;
    }

    /* Animations */
    .progress-bar-fill {
        animation: progressFill 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }

    @keyframes progressFill {
        from { width: 0; }
    }

    .shimmer {
        @apply relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent;
    }

    @keyframes shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
}

/* Custom Scrollbar Premium */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    @apply bg-transparent;
}
::-webkit-scrollbar-thumb {
    @apply bg-slate-200/80 rounded-full hover:bg-slate-300 transition-colors;
}

/* Page Transitions */
.page-fade-in {
    opacity: 0;
    animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

/* Enhanced Login Interactions */
.input-glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 transition-all duration-300;
}

.input-focus-effect:focus-within {
    @apply ring-0 border-gold-500 bg-white scale-[1.01] shadow-[0_0_20px_rgba(200,157,60,0.2)];
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Neon Border Pulse Animation */
.neon-border-pulse:focus-within {
    position: relative;
}

.neon-border-pulse:focus-within::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, #c89d3c, #ecc660, #c89d3c);
    background-size: 200% 200%;
    border-radius: 26px;
    z-index: -1;
    animation: neonFlow 2s linear infinite;
    filter: blur(8px);
    opacity: 0.5;
}

@keyframes neonFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Matrix Flow Animation */
.matrix-flow {
    background: linear-gradient(180deg, 
        rgba(200, 157, 60, 0.05) 0%, 
        rgba(236, 198, 96, 0.05) 50%, 
        rgba(200, 157, 60, 0.05) 100%
    );
    background-size: 100% 200%;
    animation: matrixMove 10s linear infinite;
    transform: translateZ(0);
}

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

/* Button Shimmer/Glare */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.btn-shimmer:hover::after {
    left: 100%;
}

.parallax-layer {
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.2s cubic-bezier(0.03, 0.98, 0.52, 0.99);
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Staggered Scale Entrance */
.scale-in {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
}

[x-cloak] { display: none !important; }

.cubic-bezier-spring {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dashboard Card Gradients */
.grad-indigo { background: linear-gradient(135deg, #ecc660 0%, #c89d3c 100%); }
.grad-emerald { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.grad-rose { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); }
.grad-amber { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

/* Snappy Page Transition */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Hide scrollbar utility class */
@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
}