<header class="sticky top-0 z-20 border-b border-[var(--admin-border)] bg-[var(--admin-surface)]/90 backdrop-blur">
    <div class="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
        <div class="flex min-w-0 flex-1 items-center gap-3">
            <button type="button" data-sidebar-toggle class="rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-2 py-1 text-[var(--admin-text)] lg:hidden">
                Menu
            </button>
            <div class="min-w-0">
                <div class="text-xl font-semibold text-[var(--admin-text)]">{{ $heading ?? 'Dashboard' }}</div>
                @if(!empty($subheading ?? ''))
                    <div class="text-xs text-[var(--admin-muted)]">{{ $subheading }}</div>
                @endif
            </div>

            <div class="hidden xl:block">
                <label for="adminGlobalSearch" class="sr-only">Universal search</label>
                <input
                    id="adminGlobalSearch"
                    data-global-search
                    type="search"
                    class="w-80 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm text-[var(--admin-text)] shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-100"
                    placeholder="Search user, mobile, PAN, order, UTR... (Ctrl+K)"
                >
            </div>
        </div>
        <div class="flex flex-wrap items-center justify-end gap-2">
            <button type="button" data-theme-toggle class="rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-xs text-[var(--admin-muted)]">
                Theme: <span data-theme-label>Light</span>
            </button>
            <div
                data-server-clock
                data-timezone="{{ config('akrsera.branding.timezone', 'Asia/Kolkata') }}"
                class="rounded-lg border border-[var(--admin-border)] bg-[var(--admin-bg)] px-3 py-2 text-xs font-semibold text-[var(--admin-muted)]"
            >
                --
            </div>
            <select class="hidden rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-2 py-2 text-xs text-[var(--admin-muted)] md:block">
                <option>INR (Rs)</option>
                <option>USD ($)</option>
                <option>EUR (Euro)</option>
            </select>
            <select class="hidden rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] px-2 py-2 text-xs text-[var(--admin-muted)] md:block">
                <option>English</option>
                <option>Hindi</option>
            </select>
            @if(!empty($quickActions ?? []))
                <div class="hidden items-center gap-2 lg:flex">
                    @foreach($quickActions as $action)
                        <a href="{{ $action['href'] }}" class="rounded-lg border border-[var(--admin-border)] px-3 py-2 text-sm font-semibold text-[var(--admin-text)] hover:bg-[var(--admin-bg)]">
                            {{ $action['label'] }}
                        </a>
                    @endforeach
                </div>
            @endif
            <div class="hidden rounded-full bg-[var(--admin-bg)] px-3 py-1 text-sm text-[var(--admin-muted)] sm:block">
                {{ auth()->user()->name ?? 'Admin' }}
            </div>
        </div>
    </div>
</header>
