<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $siteName ?? 'SmartGrocery SaaS' }} - @yield('title')</title>
    @if(!empty($siteFavicon) || !empty($siteLogo))
        <link rel="icon" type="image/png" href="{{ $siteFavicon ?? $siteLogo }}">
    @endif
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Alpine.js for interactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- Chart.js for Analytics -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
        
        :root {
            --brand-color: #3BB77E;
            --brand-color-hover: #29A56C;
            --text-main: #1A1A1A;
            --text-light: #6B7280;
            --border-color: #F3F4F6;
            --bg-light: #F9FAFB;
        }

        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #F9FAFB;
            color: var(--text-main);
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        ::-webkit-scrollbar-track {
            background: transparent; 
        }
        ::-webkit-scrollbar-thumb {
            background: #E5E7EB; 
            border-radius: 20px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #D1D5DB; 
        }

        /* Modern Sidebar */
        .nav-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: #6B7280;
            margin: 4px 12px;
            border-radius: 14px;
        }

        .nav-item.active {
            background-color: #F0FDF4;
            color: var(--brand-color);
            font-weight: 700;
            box-shadow: 0 4px 12px -2px rgba(59, 183, 126, 0.08);
        }
        
        .nav-item:hover:not(.active) {
            background-color: #F3F4F6;
            color: var(--text-main);
            transform: translateX(4px);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        [x-cloak] { display: none !important; }

        .btn-brand {
            background-color: var(--brand-color);
            color: white;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .btn-brand:hover {
            background-color: var(--brand-color-hover);
            transform: translateY(-1px);
            box-shadow: 0 10px 15px -3px rgba(59, 183, 126, 0.2);
        }

        /* Smooth Transitions */
        .page-transition {
            animation: fadeIn 0.4s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-[#F9FAFB] text-[#1A1A1A] antialiased" x-data="{ sidebarOpen: true, userMenuOpen: false, toastOpen: false, toastMessage: '', toastType: 'error' }" @if(session('demo_readonly')) x-init="toastMessage={{ json_encode(session('demo_readonly')) }}; toastOpen=true" @endif>
    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <aside :class="sidebarOpen ? 'w-72' : 'w-24'" class="bg-white flex flex-col shadow-[0_0_40px_0_rgba(0,0,0,0.03)] z-40 transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] relative border-r border-gray-50">
            
            <!-- Logo Area -->
            <div class="h-24 flex items-center px-8">
                <div class="flex items-center gap-4 overflow-hidden">
                    <div class="w-12 h-12 bg-emerald-50 rounded-2xl flex items-center justify-center flex-shrink-0">
                        @if(!empty($siteLogo))
                            <img src="{{ $siteLogo }}" alt="{{ $siteName ?? 'SmartGrocery Panel' }}" class="h-8 max-w-full object-contain">
                        @else
                            <span class="text-lg font-bold text-brand">
                                {{ mb_substr($siteName ?? 'SmartGrocery Panel', 0, 1) }}
                            </span>
                        @endif
                    </div>
                    <div x-show="sidebarOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-x-4" x-transition:enter-end="opacity-100 translate-x-0" class="whitespace-nowrap">
                        <h1 class="text-xl font-extrabold text-[#1A1A1A] tracking-tight">
                            {{ $siteName ?? 'SmartGrocery' }} <span class="text-brand font-medium">Panel</span>
                        </h1>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-[0.2em]">Administration</p>
                    </div>
                </div>
            </div>

            <!-- Toggle Button -->
            <button @click="sidebarOpen = !sidebarOpen" class="absolute -right-4 top-10 bg-white text-gray-400 rounded-xl p-2 shadow-xl border border-gray-50 hover:text-brand hover:border-brand/20 transition-all z-50 flex items-center justify-center w-8 h-8 group">
                <i :class="sidebarOpen ? 'fa-chevron-left' : 'fa-chevron-right'" class="text-[10px] group-hover:scale-110 transition-transform"></i>
            </button>

            <!-- Navigation -->
            <nav id="admin-sidebar-nav" class="flex-1 overflow-y-auto py-4 space-y-1 custom-scrollbar">
                <!-- Dashboard -->
                <a href="{{ route('admin.dashboard') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.dashboard') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-tachometer-alt text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" x-transition class="ml-4 text-sm font-bold tracking-tight">Dashboard</span>
                </a>

                <div x-show="sidebarOpen" class="px-9 mt-10 mb-4">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.25em]">Store Management</span>
                </div>
                <div x-show="!sidebarOpen" class="h-px bg-gray-50 mx-6 my-8"></div>

                <!-- Categories -->
                <a href="{{ route('admin.categories.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.categories.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.categories.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-layer-group text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Categories</span>
                </a>

                <!-- Subcategories -->
                <a href="{{ route('admin.subcategories.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.subcategories.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.subcategories.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-stream text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Subcategories</span>
                </a>

                <!-- Products -->
                @php
                    $productsActive = request()->routeIs('admin.products.index') || request()->routeIs('admin.products.create') || request()->routeIs('admin.products.edit') || request()->routeIs('admin.products.show');
                @endphp
                <a href="{{ route('admin.products.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ $productsActive ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ $productsActive ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-box-open text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Products</span>
                </a>

                <!-- Orders -->
                <a href="{{ route('admin.orders.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.orders.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.orders.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-receipt text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Orders</span>
                </a>

                <!-- Customers -->
                <a href="{{ route('admin.customers.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.customers.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.customers.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-users text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Customers</span>
                </a>

                <!-- Support -->
                <a href="{{ route('admin.support_tickets.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.support_tickets.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.support_tickets.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-headset text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Support</span>
                </a>

                <!-- Newsletter Subscribers -->
                <a href="{{ route('admin.newsletter-subscriptions.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.newsletter-subscriptions.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.newsletter-subscriptions.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-envelope-open-text text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Newsletter</span>
                </a>

                <div x-show="sidebarOpen" class="px-9 mt-10 mb-4">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.25em]">Content Management</span>
                </div>
                <div x-show="!sidebarOpen" class="h-px bg-gray-50 mx-6 my-8"></div>

                <!-- Pages -->
                <a href="{{ route('admin.pages.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.pages.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.pages.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-file-lines text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Pages</span>
                </a>

                <div x-show="sidebarOpen" class="px-9 mt-10 mb-4">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.25em]">Promotions</span>
                </div>

                <!-- Banners -->
                <a href="{{ route('admin.banners.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.banners.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.banners.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-images text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Banners</span>
                </a>

                <!-- Flash Sale -->
                <a href="{{ route('admin.products.flash_sale') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.products.flash_sale') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.products.flash_sale') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-bolt text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Flash Sale</span>
                </a>

                <!-- Special Offers -->
                <a href="{{ route('admin.products.special') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.products.special') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.products.special') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-star text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Special Offers</span>
                </a>

                <!-- Premium Shop -->
                <a href="{{ route('admin.products.premium') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.products.premium') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.products.premium') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-gem text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Premium Shop</span>
                </a>

                <!-- Coupons -->
                <a href="{{ route('admin.coupons.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.coupons.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.coupons.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-ticket-alt text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Coupons</span>
                </a>

                <div x-show="sidebarOpen" class="px-9 mt-10 mb-4">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.25em]">Configuration</span>
                </div>

                <!-- Logistics -->
                <a href="{{ route('admin.delivery-types.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.delivery-types.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.delivery-types.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-truck text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Delivery</span>
                </a>

                <!-- Payments -->
                <a href="{{ route('admin.payment-methods.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.payment-methods.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.payment-methods.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-credit-card text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Payment Methods</span>
                </a>

                <div x-show="sidebarOpen" class="px-9 mt-10 mb-4">
                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.25em]">System Settings</span>
                </div>

                @if(auth('admin')->user()?->isSuperAdmin())
                <a href="{{ route('admin.staff.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.staff.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.staff.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-user-shield text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Staff Management</span>
                </a>
                @endif

                <!-- Settings -->
                <a href="{{ route('admin.settings.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.settings.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.settings.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-cog text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Settings</span>
                </a>
                <!-- AI Assistant -->
                <a href="{{ route('admin.ai.settings.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.ai.settings.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.ai.settings.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-magic text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">AI Assistant</span>
                </a>
                <!-- Push Notifications -->
                <a href="{{ route('admin.notifications.index') }}" class="nav-item flex items-center px-5 py-3.5 group {{ request()->routeIs('admin.notifications.*') ? 'active' : '' }}">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center transition-colors {{ request()->routeIs('admin.notifications.*') ? 'bg-brand/10 text-brand' : 'bg-gray-50 text-gray-400 group-hover:bg-gray-100 group-hover:text-gray-600' }}">
                        <i class="fas fa-bell text-lg"></i>
                    </div>
                    <span x-show="sidebarOpen" class="ml-4 text-sm font-bold tracking-tight">Push Notifications</span>
                </a>
            </nav>

            <!-- Profile Area -->
            <div class="p-6 border-t border-gray-50">
                <div class="bg-gray-50 rounded-[2rem] p-4 flex items-center gap-3">
                    <div class="w-12 h-12 rounded-2xl bg-white shadow-sm flex items-center justify-center text-brand font-bold text-lg border border-gray-100">
                        {{ substr(Auth::user()->name ?? 'A', 0, 1) }}
                    </div>
                    <div x-show="sidebarOpen" class="overflow-hidden text-left">
                        <p class="text-sm font-bold text-gray-900 truncate">{{ Auth::user()->name ?? 'Administrator' }}</p>
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Administrator</p>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col min-w-0 bg-[#F9FAFB] relative overflow-hidden">
            <!-- Top Navbar -->
            <header class="h-24 bg-white/80 backdrop-blur-xl border-b border-gray-50 flex items-center justify-between px-10 sticky top-0 z-30">
                <div class="flex items-center gap-6">
                    <div class="hidden lg:flex items-center gap-2 px-4 py-2 bg-emerald-50 rounded-xl border border-emerald-100/50">
                        <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
                        <span class="text-[10px] font-bold text-emerald-600 uppercase tracking-widest">System Online</span>
                    </div>
                </div>

                <div class="flex items-center gap-6">
                    <!-- Notifications -->
                    <button class="w-12 h-12 rounded-2xl bg-gray-50 flex items-center justify-center text-gray-400 hover:text-brand hover:bg-emerald-50 transition-all relative group">
                        <i class="fas fa-bell"></i>
                        <span class="absolute top-3 right-3 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
                    </button>

                    <div class="h-8 w-px bg-gray-100 mx-2"></div>

                    <!-- User Actions -->
                    <form method="POST" action="{{ route('admin.logout') }}">
                        @csrf
                        <button type="submit" class="flex items-center gap-3 px-6 py-3 bg-zinc-900 hover:bg-zinc-800 text-white rounded-2xl transition-all shadow-xl shadow-zinc-200 group">
                            <span class="text-xs font-bold uppercase tracking-widest">Logout</span>
                            <i class="fas fa-power-off text-[10px] group-hover:rotate-90 transition-transform"></i>
                        </button>
                    </form>
                </div>
            </header>

            <!-- Page Content -->
            <div id="admin-page-scroll" class="flex-1 overflow-y-auto custom-scrollbar">
                <div class="p-10 page-transition">
                    @yield('content')
                </div>
                <!-- Unified Admin Footer -->
                <footer class="px-10 pb-10">
                    <div class="bg-white border border-gray-100 rounded-2xl shadow-sm">
                        <div class="px-6 py-6 md:px-8 md:py-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-leaf text-emerald-500"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-900">{{ $siteName ?? 'SmartGrocery SaaS' }}</p>
                                    <p class="text-xs text-gray-500">Manage your store ecosystem</p>
                                </div>
                            </div>
                            
                            <div class="text-left md:text-right">
                                <p class="text-xs text-gray-500">&copy; {{ date('Y') }} {{ $siteName ?? 'SmartGrocery' }}. All rights reserved.</p>
                                <p class="text-[10px] text-gray-400">v1.0 • Secure Panel</p>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </main>
    </div>
    <div x-cloak x-show="toastOpen" x-transition class="fixed top-6 right-6 z-50">
        <div class="max-w-sm w-full bg-white border border-red-100 shadow-xl rounded-2xl px-4 py-3 flex items-start gap-3">
            <div class="w-9 h-9 flex items-center justify-center rounded-xl bg-red-50 text-red-600">
                <i class="fas fa-ban text-sm"></i>
            </div>
            <div class="flex-1">
                <p class="text-xs font-black uppercase tracking-[0.2em] text-red-500">Demo Mode</p>
                <p class="text-sm font-semibold text-gray-900 mt-1" x-text="toastMessage"></p>
            </div>
            <button type="button" class="text-gray-400 hover:text-gray-600 text-xs font-bold" @click="toastOpen = false">
                ✕
            </button>
        </div>
    </div>
    <script>
        (function () {
            var sidebar = document.getElementById('admin-sidebar-nav');
            if (sidebar) {
                sidebar.style.scrollBehavior = 'auto';
                var key = 'admin.sidebar.scrollTop';
                var saved = sessionStorage.getItem(key);
                if (saved !== null) {
                    var val = parseInt(saved, 10);
                    if (!isNaN(val)) sidebar.scrollTop = val;
                }
                var save = function () { sessionStorage.setItem(key, String(sidebar.scrollTop)); };
                sidebar.addEventListener('scroll', save, { passive: true });
                window.addEventListener('beforeunload', save);
                var links = sidebar.querySelectorAll('a');
                links.forEach(function (a) {
                    a.addEventListener('mousedown', function () { sessionStorage.setItem(key, String(sidebar.scrollTop)); }, { passive: true });
                    a.addEventListener('click', function () { setTimeout(function () { if (document.activeElement) document.activeElement.blur(); }, 0); }, { passive: true });
                });
            }
            var pageScroll = document.getElementById('admin-page-scroll');
            if (pageScroll) {
                pageScroll.style.scrollBehavior = 'auto';
            }
            var btns = document.querySelectorAll('button');
            btns.forEach(function (btn) {
                btn.addEventListener('click', function () { setTimeout(function () { btn.blur(); }, 0); }, { passive: true });
            });
        })();
    </script>
</body>
</html>
