@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

@layer base {
    body {
        @apply bg-[#0a0a0e] text-[#e0e7ff] selection:bg-[#00d4ff]/30 selection:text-white;
        scrollbar-gutter: stable;
    }
}

@layer components {
    .glass {
        @apply bg-white/5 border border-white/10 backdrop-blur-xl;
    }
    .neon-glow {
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
    }
    .text-glow {
        text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    }
    .touch-target {
        @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
    }
    .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 cursor-pointer hover:bg-white/5 group;
    }
    .sidebar-item.active {
        @apply bg-[#00d4ff]/10 text-[#00d4ff] border border-[#00d4ff]/20 shadow-[0_0_15px_rgba(0,212,255,0.1)];
    }
    .sidebar-collapsed .sidebar-text {
        @apply hidden;
    }
    .sidebar-collapsed {
        @apply w-20;
    }
    .sidebar-expanded {
        @apply w-64;
    }
}

.accent-gradient {
    background: linear-gradient(90deg, #00d4ff 0%, #0099cc 50%, #0077aa 100%);
}

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

::-webkit-scrollbar-track {
    background: #0a0a0e;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Sortable ghost class */
.sortable-ghost {
    opacity: 0.4;
    background: rgba(0, 212, 255, 0.1);
}

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

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}