@import "tailwindcss";
@import "./theme-vars.css";

@layer base {
    body {
        @apply font-sans;
    }

    h1, h2, h3, h4, h5, h6, .font-title {
        @apply font-title;
    }

    button, [role="button"], a {
        @apply cursor-pointer;
    }
}

@layer components {
    /* Custom Scrollbar for Cyberpunk feel */
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        @apply bg-rpg-bg;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-white/10 rounded-full hover:bg-rpg-accent/50 transition-colors;
    }

    /* Additional Theme Utilities */
    .rpg-label {
        @apply block text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-2;
    }

    .rpg-input {
        @apply bg-white/5 border border-white/10 text-white rounded-xl focus:border-rpg-accent/50 focus:ring-rpg-accent/20 transition-all px-4 py-3 w-full outline-none;
    }

    .rpg-panel {
        @apply bg-black/40 backdrop-blur-xl border border-white/5 rounded-3xl p-8;
    }

    .text-glow-cyan {
        text-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
    }

    .text-gradient-rpg {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-white via-rpg-accent to-white;
    }

    /* Settings & Nav Styles */
    .rpg-nav-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-widest transition-all border border-transparent;
    }

    .rpg-nav-item-active {
        @apply bg-rpg-accent/10 border-rpg-accent/20 text-rpg-accent shadow-[0_0_15px_rgba(245,158,11,0.1)];
    }

    .rpg-nav-item-inactive {
        @apply text-slate-400 hover:text-white hover:bg-white/5;
    }

    /* Section Headers */
    .rpg-section-header {
        @apply relative py-8 px-8 overflow-hidden rounded-2xl bg-white/5 border border-white/10 mb-8;
    }

    .rpg-section-header-glow {
        @apply absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-64 h-64 bg-rpg-accent/5 blur-[60px] rounded-full;
    }

    /* Flux UI Overrides */
    [data-flux-input], 
    [data-flux-input] input,
    [data-flux-control],
    input:-webkit-autofill {
        background-color: transparent !important;
        background-image: none !important;
        padding-left: 10px !important;
        @apply bg-transparent! border-white/10! text-white! rounded-xl! transition-all!;
    }
    
    [data-flux-input]:focus-within {
        @apply border-rpg-accent/50! ring-rpg-accent/20!;
    }

    [data-flux-label] {
        @apply text-[10px]! font-black! uppercase! tracking-[0.2em]! text-slate-400! mb-2!;
    }

    [data-flux-subheading] {
        @apply text-slate-400! uppercase! text-[10px]! font-bold! tracking-widest!;
    }

    [data-flux-button][data-variant="primary"] {
        @apply bg-rpg-accent! hover:bg-amber-400! text-black! font-bold! uppercase! tracking-[0.2em]! rounded-full! 
               transition-all! transform! hover:scale-105! active:scale-95! shadow-[0_0_20px_rgba(245,158,11,0.3)]! border-none!;
    }

    [data-flux-menu] {
        @apply bg-black/90! backdrop-blur-2xl! border-white/10! rounded-2xl! p-2! shadow-[0_20px_50px_rgba(0,0,0,0.8),0_0_20px_rgba(245,158,11,0.05)]!;
    }

    [data-flux-menu-item] {
        @apply rounded-xl! transition-all! text-slate-400! hover:bg-rpg-accent/10! hover:text-rpg-accent! py-2!;
    }

    [data-flux-menu-item][data-flux-menu-item-danger] {
        @apply text-red-400! hover:bg-red-500/10! hover:text-red-400!;
    }

    [data-flux-menu-separator] {
        @apply border-white/10! my-2!;
    }

    [data-flux-menu] [data-flux-menu-heading] {
        @apply text-[10px]! font-black! uppercase! tracking-[0.2em]! text-slate-400! px-2 py-1!;
    }

    /* Custom classes for the user info block inside the menu */
    .flux-menu-user-info {
        @apply flex items-center gap-3 px-2 py-3 mb-1;
    }

    .flux-menu-user-avatar {
        @apply flex h-9 w-9 items-center justify-center rounded-xl bg-rpg-accent/10 border border-rpg-accent/20 text-rpg-accent font-bold;
    }

    .flux-menu-user-details {
        @apply grid flex-1 text-left leading-tight;
    }

    .flux-menu-user-name {
        @apply truncate font-bold text-white tracking-wide;
    }

    .flux-menu-user-email {
        @apply truncate text-xs text-slate-400;
    }
}