{{-- =====================================================
     ADMIN SIDEBAR — Mobile overlay + Desktop fixed
     ===================================================== --}}

<!-- Mobile Backdrop -->
<div x-show="sidebarOpen"
     x-transition:enter="transition-opacity ease-linear duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition-opacity ease-linear duration-300"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="relative z-50 lg:hidden"
     role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-gray-900/80 backdrop-blur-sm"></div>
</div>

<!-- Mobile Sidebar Panel -->
<div x-show="sidebarOpen"
     x-transition:enter="transition ease-in-out duration-300 transform"
     x-transition:enter-start="-translate-x-full"
     x-transition:enter-end="translate-x-0"
     x-transition:leave="transition ease-in-out duration-300 transform"
     x-transition:leave-start="translate-x-0"
     x-transition:leave-end="-translate-x-full"
     class="fixed inset-0 z-50 flex lg:hidden">
    <div class="relative mr-16 flex w-full max-w-xs flex-1">
        <!-- Close Button -->
        <div class="absolute left-full top-0 flex w-16 justify-center pt-5">
            <button @click="sidebarOpen = false" class="-m-2.5 p-2.5">
                <span class="sr-only">Close sidebar</span>
                <i class="fas fa-times text-white text-xl"></i>
            </button>
        </div>
        @include('admin.layouts._sidebar-content')
    </div>
</div>

<!-- Desktop Fixed Sidebar -->
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
    @include('admin.layouts._sidebar-content')
</div>