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

@layer base {
    * {
        @apply antialiased;
    }
    
    body {
        @apply bg-dark-primary;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    }
    
    ::selection {
        @apply bg-neon-blue/30 text-white;
    }
}

@layer components {
    /* Glassmorphism Effects */
    .glass-card {
        @apply bg-dark-secondary/40 backdrop-blur-xl border border-gray-800/50 shadow-2xl;
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    }
    
    .glass-input {
        @apply bg-dark-accent/30 backdrop-blur-sm border border-gray-700/30 focus:border-neon-blue focus:ring-2 focus:ring-neon-blue/20 focus:outline-none transition-all duration-300;
        background: linear-gradient(135deg, rgba(51, 65, 85, 0.3), rgba(30, 41, 59, 0.3));
    }
    
    /* Button Styles */
    .neon-btn {
        @apply relative overflow-hidden bg-gradient-to-r from-neon-blue to-neon-purple text-white font-semibold py-3 px-6 rounded-xl 
               hover:shadow-xl hover:shadow-neon-blue/20 transform hover:-translate-y-0.5 
               transition-all duration-300 active:translate-y-0;
    }
    
    .neon-btn::before {
        content: '';
        @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full;
        animation: shimmer 2s infinite;
    }
    
    .neon-btn-secondary {
        @apply bg-gradient-to-r from-dark-accent/40 to-gray-800/40 text-gray-300 border border-gray-700/30 
               font-semibold py-3 px-6 rounded-xl hover:border-neon-teal hover:text-white hover:shadow-lg
               transition-all duration-300 backdrop-blur-sm;
    }
    
    /* Card Effects */
    .card-hover {
        @apply transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl;
    }
    
    .tool-card {
        @apply glass-card rounded-3xl p-8 card-hover;
    }
    
    .stat-card {
        @apply bg-gradient-to-br from-dark-accent/30 to-dark-secondary/30 backdrop-blur-sm 
               rounded-2xl p-6 border border-gray-800/30;
    }
    
    .feature-card {
        @apply glass-card p-6 rounded-2xl hover:border-neon-blue/50 transition-all duration-300;
    }
    
    /* Badge Styles */
    .badge {
        @apply inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold backdrop-blur-sm;
    }
    
    .badge-success {
        @apply badge bg-green-500/20 text-green-300 border border-green-500/30;
    }
    
    .badge-warning {
        @apply badge bg-yellow-500/20 text-yellow-300 border border-yellow-500/30;
    }
    
    .badge-danger {
        @apply badge bg-red-500/20 text-red-300 border border-red-500/30;
    }
    
    .badge-info {
        @apply badge bg-neon-blue/20 text-blue-300 border border-neon-blue/30;
    }
    
    /* Custom Scrollbar */
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #4b5563 transparent;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-gray-700/50 rounded-full backdrop-blur-sm;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-600/50;
    }
    
    /* Loading Effects */
    .loading-spinner {
        @apply animate-spin rounded-full border-4 border-transparent;
        border-top-color: #3b82f6;
        background: linear-gradient(white, white) padding-box,
                    linear-gradient(45deg, #3b82f6, #8b5cf6, #0d9488) border-box;
    }
    
    .pulse-ring {
        animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }
    
    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-neon-blue via-neon-purple to-neon-teal bg-clip-text text-transparent;
        background-size: 200% auto;
        animation: gradient 3s ease infinite;
    }
    
    /* Line clamp utilities */
    .line-clamp-1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
    
    .line-clamp-2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    
    .line-clamp-3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    
    /* Progress Bar */
    .progress-bar {
        @apply h-2 bg-dark-accent/30 rounded-full overflow-hidden;
    }
    
    .progress-fill {
        @apply h-full bg-gradient-to-r from-neon-blue to-neon-purple rounded-full transition-all duration-500;
    }
    
    /* Toggle Switch */
    .toggle-switch {
        @apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300;
    }
    
    .toggle-switch-checked {
        @apply bg-neon-teal;
    }
    
    .toggle-switch-unchecked {
        @apply bg-gray-700;
    }
    
    .toggle-switch-thumb {
        @apply inline-block w-4 h-4 transform bg-white rounded-full transition-transform duration-300;
    }
    
    .toggle-switch-checked .toggle-switch-thumb {
        transform: translateX(24px);
    }
    
    /* Code Block */
    .code-block {
        @apply bg-black/30 rounded-xl p-4 font-mono text-sm overflow-x-auto;
    }
    
    /* Alert Box */
    .alert {
        @apply p-4 rounded-2xl border backdrop-blur-sm;
    }
    
    .alert-error {
        @apply bg-red-500/10 border-red-500/30 text-red-300;
    }
    
    .alert-success {
        @apply bg-green-500/10 border-green-500/30 text-green-300;
    }
    
    .alert-warning {
        @apply bg-yellow-500/10 border-yellow-500/30 text-yellow-300;
    }
    
    .alert-info {
        @apply bg-blue-500/10 border-blue-500/30 text-blue-300;
    }
    
    /* Form Elements */
    .form-label {
        @apply block text-sm font-medium text-gray-400 mb-2;
    }
    
    .form-control {
        @apply glass-input w-full px-4 py-3 rounded-xl;
    }
    
    .form-hint {
        @apply text-xs text-gray-500 mt-2;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    80%, 100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

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

@keyframes gradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

@keyframes glow {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        filter: brightness(1.2);
    }
}

/* Particle Background */
.particle-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    opacity: 0.1;
    animation: float 20s infinite linear;
}

/* Notification Toast */
.toast {
    @apply fixed top-4 right-4 z-50 glass-card p-4 rounded-2xl border-l-4 transform transition-all duration-500;
    animation: slideIn 0.5s ease-out;
}

.toast-success {
    @apply border-green-500;
}

.toast-error {
    @apply border-red-500;
}

.toast-info {
    @apply border-neon-blue;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}