{{--
    The top bar (<livewire:layout.navigation>) is itself `sticky top-0` at 64px tall, so
    this sidebar sticks just below it (`top-16`) rather than at the very top — otherwise
    the two would fight over the same sticky offset. Its own height is the viewport minus
    that 64px, so it never scrolls with the page; only its `<nav>` scrolls internally if
    the link list itself overflows, and the main content column scrolls independently.
--}}
<aside class="hidden md:flex md:sticky md:top-16 md:h-[calc(100vh-4rem)] md:w-64 md:flex-col md:shrink-0 border-s border-[var(--panel-border)] bg-[var(--panel-surface-soft)]">
    <div class="flex h-16 shrink-0 items-center border-b border-[var(--panel-border)] px-6">
        <a href="{{ Route::has('dashboard') ? route('dashboard') : '/' }}" class="flex items-center gap-2" wire:navigate>
            <img src="{{ asset('images/limosi-header-logo.png') }}" alt="لیموسی" class="h-9 w-auto object-contain">
        </a>
    </div>

    <nav class="flex-1 space-y-1 overflow-y-auto px-3 py-4">
        <x-nav-links />
    </nav>
</aside>