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

@layer base {
    :root {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 184 100% 50%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 184 100% 50%;
        --radius: 0.5rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
        font-feature-settings: "rlig" 1, "calt" 1;
    }
}

@layer components {
    /* Aceternity-style glassmorphism card */
    .glass-card {
        @apply relative overflow-hidden rounded-xl border border-white/10 bg-white/5 backdrop-blur-xl;
    }

    /* Gradient border effect */
    .gradient-border {
        @apply relative;
        background: linear-gradient(var(--background), var(--background)) padding-box,
                    linear-gradient(135deg, #00d4ff, #9d4edd, #00ff88) border-box;
        border: 1px solid transparent;
    }

    /* Status badge variants */
    .status-online    { @apply bg-green-500/20 text-green-400 border border-green-500/30; }
    .status-offline   { @apply bg-red-500/20 text-red-400 border border-red-500/30; }
    .status-warning   { @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30; }
    .status-unknown   { @apply bg-gray-500/20 text-gray-400 border border-gray-500/30; }
    .status-running   { @apply bg-cyan-500/20 text-cyan-400 border border-cyan-500/30; }
    .status-stopped   { @apply bg-slate-500/20 text-slate-400 border border-slate-500/30; }

    /* Neon glow effects */
    .glow-cyan    { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
    .glow-green   { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
    .glow-purple  { box-shadow: 0 0 20px rgba(157, 78, 221, 0.3); }

    /* Custom scrollbar */
    .custom-scroll::-webkit-scrollbar {
        @apply w-1.5;
    }
    .custom-scroll::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
        @apply rounded-full bg-white/10;
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
        @apply bg-white/20;
    }

    /* Terminal style */
    .terminal {
        @apply font-mono text-sm bg-black/60 text-green-400 p-4 rounded-lg;
    }
}

/* Grid background pattern */
.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Aurora background */
.aurora-bg {
    background: linear-gradient(
        125deg,
        rgba(0, 212, 255, 0.05) 0%,
        rgba(157, 78, 221, 0.05) 33%,
        rgba(0, 255, 136, 0.05) 66%,
        rgba(0, 212, 255, 0.05) 100%
    );
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;
}

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