<aside class="w-full lg:w-72 lg:min-h-screen bg-slate-950 text-slate-100 border-r border-slate-800 relative overflow-hidden">
    <div class="absolute -top-16 -left-10 h-40 w-40 rounded-full bg-sky-500/20 blur-2xl pointer-events-none float-slower"></div>
    <div class="absolute bottom-0 -right-10 h-40 w-40 rounded-full bg-blue-700/20 blur-2xl pointer-events-none float-slow"></div>
    <div class="absolute top-1/3 left-1/2 h-28 w-28 rounded-full bg-cyan-300/10 blur-2xl pointer-events-none pulse-glow"></div>

    <div class="px-4 py-5 border-b border-slate-800/80 flex items-center gap-3 relative z-10">
        <a href="{{ route('dashboard') }}" class="flex items-center gap-3 transition hover:scale-[1.01]">
            <x-application-logo class="h-12 w-auto drop-shadow-md" />
        </a>
    </div>

    <nav class="p-4 space-y-2 relative z-10">
        <a href="{{ route('dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm {{ request()->routeIs('dashboard') ? 'bg-sky-500/20 text-sky-100 ring-1 ring-sky-500/30' : 'text-slate-200 hover:bg-slate-800/80' }} transition">
            <svg class="h-4 w-4 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="1.8" d="M3 12h18M12 3v18"/></svg>
            Dashboard
        </a>
        <a href="{{ route('cases.index') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm {{ request()->routeIs('cases.*') ? 'bg-sky-500/20 text-sky-100 ring-1 ring-sky-500/30' : 'text-slate-200 hover:bg-slate-800/80' }} transition">
            <svg class="h-4 w-4 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="1.8" d="M5 6h14M5 12h14M5 18h14"/></svg>
            Cases
        </a>
        @can('clients.manage')
            <a href="{{ route('admin.home') }}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm {{ request()->routeIs('admin.*') ? 'bg-sky-500/20 text-sky-100 ring-1 ring-sky-500/30' : 'text-slate-200 hover:bg-slate-800/80' }} transition">
                <svg class="h-4 w-4 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-width="1.8" d="M4 7h16v10H4z"/><path stroke-width="1.8" d="M9 11h6"/></svg>
                Admin
            </a>
            <div class="pt-2 pl-3 space-y-1.5 text-xs text-slate-400">
                <a href="{{ route('admin.users.index') }}" class="block hover:text-slate-100 transition">Manage Users</a>
                <a href="{{ route('admin.roles.index') }}" class="block hover:text-slate-100 transition">Roles & Permissions</a>
                <a href="{{ route('admin.clients.index') }}" class="block hover:text-slate-100 transition">Manage Clients</a>
                <a href="{{ route('admin.labels.index') }}" class="block hover:text-slate-100 transition">Manage Labels</a>
                <a href="{{ route('admin.assignments.index') }}" class="block hover:text-slate-100 transition">Assignments</a>
                <a href="{{ route('admin.report-rules.index') }}" class="block hover:text-slate-100 transition">Report Rules</a>
            </div>
        @endcan
    </nav>

    <div class="mt-6 px-4 pb-6 border-t border-slate-800/80 pt-4 relative z-10">
        <div class="text-sm font-medium text-slate-100">{{ Auth::user()->name }}</div>
        <div class="text-xs text-slate-400 mb-3 truncate">{{ Auth::user()->email }}</div>
        <a href="{{ route('profile.edit') }}" class="w-full justify-center mb-2 inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-slate-700 text-slate-200 hover:bg-slate-800 transition">Profile</a>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="w-full justify-center inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white transition bg-sky-600 hover:bg-sky-500">Log Out</button>
        </form>
    </div>
</aside>
