{{-- =====================================================
     ADMIN TOPBAR — Hamburger + Page Title + User Menu
     ===================================================== --}}
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">

    {{-- Mobile Menu Button (left side) --}}
    <button @click="sidebarOpen = true" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
        <span class="sr-only">Open sidebar</span>
        <i class="fas fa-bars text-xl"></i>
    </button>

    {{-- Divider --}}
    <div class="h-6 w-px bg-gray-200 lg:hidden" aria-hidden="true"></div>

    {{-- Page Title / Breadcrumb --}}
    <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
        <div class="flex items-center gap-x-4">
            <h1 class="text-lg font-bold text-gray-900">@yield('page-title', 'Dashboard')</h1>
        </div>
    </div>

    {{-- Right Side Items --}}
    <div class="flex items-center gap-x-4 lg:gap-x-6">

        {{-- Notification Bell (optional) --}}
        {{-- <button type="button" class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500 relative">
            <span class="sr-only">View notifications</span>
            <i class="fas fa-bell text-xl"></i>

            <span class="absolute top-1 right-1 w-2 h-2 rounded-full bg-primary-600"></span>
        </button> --}}

        {{-- Separator --}}
        {{-- <div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-200" aria-hidden="true"></div> --}}

        {{-- User Menu Dropdown --}}
        <div class="relative" x-data="{ open: false }">
            <button @click="open = !open" class="-m-1.5 flex items-center p-1.5 hover:bg-gray-100 rounded-full transition-colors">
                <span class="sr-only">Open user menu</span>
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
                     style="background:#027fc5;">
                    {{ strtoupper(substr(auth()->user()->name ?? 'A', 0, 1)) }}
                </div>
                <span class="hidden lg:flex lg:items-center ml-2">
                    <span class="text-sm font-semibold leading-6 text-gray-900">{{ auth()->user()->name ?? 'Admin' }}</span>
                    <i class="ml-2 fas fa-chevron-down text-xs text-gray-400"></i>
                </span>
            </button>

            {{-- Dropdown Menu --}}
            <div x-show="open"
                 @click.away="open = false"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="transform opacity-0 scale-95"
                 x-transition:enter-end="transform opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
                 class="absolute right-0 z-10 mt-2.5 w-56 origin-top-right rounded-xl bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
                 style="display: none;">
                <div class="p-2">
                    <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm leading-6 text-gray-900 hover:bg-gray-50 transition-colors">
                        <i class="fas fa-gauge-high text-primary-600 w-5"></i>
                        Dashboard
                    </a>
                    <a href="{{ route('home') }}" target="_blank" class="flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm leading-6 text-gray-900 hover:bg-gray-50 transition-colors">
                        <i class="fas fa-external-link-alt text-secondary-600 w-5"></i>
                        View Website
                    </a>
                    <div class="my-1 h-px bg-gray-200"></div>
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="w-full flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm leading-6 text-red-600 hover:bg-red-50 transition-colors">
                            <i class="fas fa-right-from-bracket w-5"></i>
                            Sign out
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>