<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-slate-100">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {{-- Admin UI is light-only: strip dark class before paint (OS dark / saved pref should not apply here) --}}
    <script>
        document.documentElement.classList.remove('dark');
    </script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <title>@yield('title', 'Admin') - {{ config('app.name', 'ProInvoice') }}</title>

    @php
        $companySettings = \App\Models\CompanySetting::getSettings();
        $faviconUrl = ($companySettings->company_favicon ?? null) && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_favicon)
            ? \Illuminate\Support\Facades\Storage::url($companySettings->company_favicon)
            : asset('favicon.png');
    @endphp
    <link rel="icon" type="image/png" href="{{ $faviconUrl }}">
    <link rel="shortcut icon" type="image/png" href="{{ $faviconUrl }}">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        :root {
            --primary: #340080;
            --primary-hover: #280060;
        }
        .bg-primary { background-color: var(--primary); }
        .text-primary { color: var(--primary); }
        .border-primary { border-color: var(--primary); }
        .ring-primary { --tw-ring-color: var(--primary); }
        .shadow-primary\/30 { --tw-shadow-color: rgb(52 0 128 / 0.3); }
        
        /* Toggle Switch Styles */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #137fec;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #137fec;
        }
        
        /* Sidebar collapse styles */
        #sidebar.sidebar-collapsed {
            width: 4rem !important;
        }
        
        /* Ensure sidebar width classes work with flex */
        @media (min-width: 768px) {
            #sidebar.w-16 {
                width: 4rem !important;
            }
            #sidebar.w-64 {
                width: 16rem !important;
            }
        }
        
        #sidebar.sidebar-collapsed .sidebar-logo-full {
            display: none !important;
        }
        
        #sidebar.sidebar-collapsed .sidebar-logo-collapsed {
            display: block !important;
        }
        
        #sidebar.sidebar-collapsed .sidebar-menu-label,
        #sidebar.sidebar-collapsed .sidebar-section-label,
        #sidebar.sidebar-collapsed .sidebar-menu-chevron,
        #sidebar.sidebar-collapsed .sidebar-menu-arrow,
        #sidebar.sidebar-collapsed .sidebar-user-info {
            display: none !important;
        }

        /*
         * Modal dialogs: margin-top 120px at sm+ (requested .sm\:p-6 behavior, scoped to modals).
         * Targets common admin modal shells; [data-admin-modal] is set on the fixed overlay root.
         */
        @media (min-width: 640px) {
            [data-admin-modal] > div.flex.min-h-full > div.relative.bg-white.sm\:p-6 {
                margin-top: 120px;
            }
            [data-admin-modal] > div.flex.min-h-full > div.relative.bg-white.rounded-xl,
            [data-admin-modal] > div.flex.min-h-full > div.relative.bg-white.rounded-lg,
            [data-admin-modal] > div.bg-white.rounded-xl.shadow-2xl,
            [data-admin-modal] > div.flex.min-h-screen div.inline-block.bg-white.rounded-lg.shadow-xl,
            [data-admin-modal] > div.flex.min-h-screen div.inline-block.bg-white.rounded-xl.shadow-xl,
            [data-admin-modal] > div.bg-white.rounded-xl.max-w-md,
            [data-admin-modal] > div.bg-white.rounded-xl.max-w-2xl,
            [data-admin-modal] > div.bg-white.rounded-xl.max-w-lg {
                margin-top: 120px;
            }
            [data-admin-modal] > div.absolute.inset-0 + div.absolute.bg-white {
                top: 120px;
                height: calc(100vh - 120px) !important;
                max-height: calc(100vh - 120px);
            }
            [data-admin-modal] div.absolute.right-0.top-0.max-w-md.bg-white {
                top: 120px !important;
                height: calc(100vh - 120px) !important;
                max-height: calc(100vh - 120px);
            }
            [data-admin-modal] div.fixed.inset-y-0.right-0.max-w-md.bg-white {
                top: 120px !important;
            }
        }
        
        /* Main container background */
        .min-h-screen.flex {
            background-color: rgba(255, 255, 255, 1) !important;
            color: rgba(255, 255, 255, 1);
        }
        
        /* Ensure html and body take full height */
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        /* Use flex layout - no hardcoded margins needed when sidebar is static */
        @media (min-width: 768px) {
            .min-h-screen.flex {
                display: flex;
                flex-direction: row;
                height: 100vh;
                overflow: hidden;
            }
            
            #sidebar {
                flex-shrink: 0;
                width: 16rem;
                transition: width 0.3s ease-in-out;
                height: 100vh;
                overflow-y: auto;
            }
            
            #sidebar.sidebar-collapsed {
                width: 4rem !important;
            }
            
            #main-content {
                flex: 1;
                min-width: 0;
                width: 100%;
                margin-left: 0 !important;
                padding-left: 0 !important;
                transition: none;
                display: flex;
                flex-direction: column;
                height: 100vh;
                overflow: hidden;
            }
            
            #main-content main {
                width: 100%;
                min-width: 0;
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                display: block;
            }
            
            #main-content footer {
                width: 100%;
                flex-shrink: 0;
            }
        }
        
        /* Mobile: sidebar is fixed, so we need margin */
        @media (max-width: 767px) {
            .min-h-screen.flex {
                height: 100vh;
                overflow: hidden;
            }
            
            #main-content {
                margin-left: 0;
                height: 100vh;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }
            
            #main-content main {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
            }
            
            /* Mobile sidebar - hidden by default, slides in from left */
            #sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease-in-out;
                height: 100vh;
                overflow-y: auto;
            }
            
            #sidebar:not(.-translate-x-full) {
                transform: translateX(0);
            }
            
            /* Prevent body scroll when sidebar is open */
            body.sidebar-open {
                overflow: hidden;
            }
            
            /* Overlay styles */
            #sidebar-overlay {
                z-index: 40;
            }
            
            #sidebar {
                z-index: 50;
            }
        }
        
        /* Sidebar background color */
        #sidebar {
            background-color: #340080 !important;
        }
        
        /* Desktop hover expand - smooth transitions */
        @media (min-width: 768px) {
            #sidebar {
                transition: width 0.3s ease-in-out;
            }
            
            #main-content {
                transition: margin-left 0.3s ease-in-out, padding-left 0.3s ease-in-out;
            }
        }
        
        /* Alpine.js x-cloak */
        [x-cloak] {
            display: none !important;
        }
    </style>
</head>
<body class="h-full bg-slate-100 font-sans text-slate-900 antialiased">
    <div class="flex min-h-screen bg-slate-100">
        <!-- Sidebar -->
        @include('components.sidebars.admin')

        <!-- Main Content -->
        <div id="main-content" class="flex flex-1 flex-col bg-slate-100">
            <!-- Top Navigation -->
            <header class="sticky top-0 z-40 border-b border-gray-200 bg-white shadow-sm">
                <div class="px-6 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-4">
                            <!-- Mobile Sidebar Toggle Button -->
                            <button onclick="toggleSidebar()" class="flex items-center justify-center rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 md:hidden" aria-label="Toggle Sidebar">
                                <span class="material-symbols-outlined text-2xl">menu</span>
                            </button>
                            <h1 class="text-xl font-bold text-gray-900">@yield('page-title', 'Dashboard')</h1>
                            @hasSection('breadcrumbs')
                            <div class="hidden items-center gap-2 text-sm text-gray-500 md:flex">
                                <span class="material-symbols-outlined text-xs">chevron_right</span>
                                @yield('breadcrumbs')
                            </div>
                            @endif
                        </div>
                        <div class="flex items-center gap-4">
                            <!-- Search -->
                            <div class="relative hidden md:block">
                                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
                                <input type="text" placeholder="Search..." class="h-10 w-64 rounded-lg border border-gray-200 bg-gray-50 pl-10 pr-4 text-gray-900 placeholder-gray-500 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20" style="background-color: rgba(245, 245, 245, 1);">
                            </div>
                            <!-- Notifications -->
                            <button type="button" class="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700">
                                    <span class="material-symbols-outlined">notifications</span>
                                <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                                </button>
                            
                            <!-- Language Selector -->
                            @php
                                $languages = [
                                    'en' => ['name' => 'English', 'flag' => '🇬🇧'],
                                    'ar' => ['name' => 'العربية', 'flag' => '🇸🇦'],
                                    'de' => ['name' => 'Deutsch', 'flag' => '🇩🇪'],
                                    'es' => ['name' => 'Español', 'flag' => '🇪🇸'],
                                    'fr' => ['name' => 'Français', 'flag' => '🇫🇷'],
                                    'pt' => ['name' => 'Português', 'flag' => '🇵🇹'],
                                ];
                                $currentLocale = app()->getLocale();
                                $currentLocaleFlag = $languages[$currentLocale]['flag'] ?? '🌐';
                            @endphp
                            <div class="relative" x-data="{ open: false }" style="background-color: rgba(52, 0, 128, 1); color: rgba(0, 0, 0, 1); border-width: 0px; border-color: rgba(0, 0, 0, 0); border-style: none; border-image: none;">
                                <button @click="open = !open" class="flex items-center gap-2 rounded-full border border-gray-300 p-2 transition-colors hover:bg-gray-100" style="background-color: rgba(255, 255, 255, 1); border-color: rgba(143, 143, 143, 1); height: 36px;">
                                    <span class="text-lg">{{ $currentLocaleFlag }}</span>
                                </button>
                                <div x-show="open" @click.away="open = false" x-cloak class="absolute right-0 z-50 mt-2 w-48 rounded-lg border border-gray-200 bg-white py-2 shadow-lg" style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1);">
                                    @foreach($languages as $code => $lang)
                                        <form method="POST" action="{{ route('admin.settings.change-language') }}" class="w-full">
                                            @csrf
                                            <input type="hidden" name="locale" value="{{ $code }}">
                                            <button type="submit" class="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-gray-100 {{ $currentLocale === $code ? 'bg-gray-50' : '' }}" style="{{ $currentLocale === $code ? 'background-color: rgba(21, 127, 237, 1);' : '' }}">
                                                <span class="text-lg">{{ $lang['flag'] }}</span>
                                                <span class="text-sm text-gray-700" style="color: rgba(0, 0, 0, 1);">{{ $lang['name'] }}</span>
                                            </button>
                                        </form>
                                    @endforeach
                                </div>
                            </div>
                            
                            <!-- User Menu -->
                            <div class="relative" x-data="{ open: false }" style="background-color: rgba(52, 0, 128, 1); color: rgba(0, 0, 0, 1);">
                                <button @click="open = !open" class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 transition-colors hover:bg-gray-300" style="background-color: rgba(255, 255, 255, 1);">
                                    <span class="material-symbols-outlined text-gray-700">account_circle</span>
                                </button>
                                <div x-show="open" @click.away="open = false" x-cloak class="absolute right-0 z-50 mt-2 w-48 rounded-lg border border-gray-200 bg-white py-2 shadow-lg">
                                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-4 py-2 transition-colors hover:bg-gray-100">
                                        <span class="material-symbols-outlined text-gray-600">person</span>
                                        <span class="text-sm text-gray-700">Profile</span>
                                    </a>
                                    <a href="{{ route('admin.settings.general') }}" class="flex items-center gap-3 px-4 py-2 transition-colors hover:bg-gray-100">
                                        <span class="material-symbols-outlined text-gray-600">settings</span>
                                        <span class="text-sm text-gray-700">Settings</span>
                                    </a>
                                    <hr class="my-2 border-gray-200">
                                    <form method="POST" action="{{ route('logout') }}" class="w-full">
                                        @csrf
                                        <button type="submit" class="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-gray-100">
                                            <span class="material-symbols-outlined text-gray-600">logout</span>
                                            <span class="text-sm text-gray-700">Logout</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Page Content -->
            <main class="min-w-0 flex-1 overflow-y-auto bg-slate-100 p-6 text-slate-900">
                <!-- Flash Messages -->
                @if(session('success'))
                <div class="mb-6 flex items-center gap-3 rounded-lg border border-green-200 bg-green-100 p-4 text-green-800">
                    <span class="material-symbols-outlined">check_circle</span>
                    <span>{{ session('success') }}</span>
                </div>
                @endif

                @if(session('error'))
                <div class="mb-6 flex items-center gap-3 rounded-lg border border-red-200 bg-red-100 p-4 text-red-800">
                    <span class="material-symbols-outlined">error</span>
                    <span>{{ session('error') }}</span>
                </div>
                @endif

                @if($errors->any())
                <div class="mb-6 rounded-lg border border-red-200 bg-red-100 p-4 text-red-800">
                    <div class="flex items-center gap-3 mb-2">
                        <span class="material-symbols-outlined">error</span>
                        <span class="font-medium">Please fix the following errors:</span>
                    </div>
                    <ul class="list-disc list-inside ml-6">
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                @yield('content')
            </main>

            <!-- Footer -->
            <footer class="mt-auto w-full border-t border-gray-200 bg-white px-6 py-4" style="background-color: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); border-top-color: rgba(143, 143, 143, 1); border-top-width: 1px; border-top-style: solid;">
                <div class="flex items-center justify-between text-sm text-gray-500" style="color: rgba(0, 0, 0, 1);">
                    <p>&copy; {{ date('Y') }} {{ config('app.name', 'ProInvoice') }}. All rights reserved.</p>
                    <p>Version {{ config('version.version', '1.0.0') }}</p>
                </div>
            </footer>
        </div>
    </div>

    {{-- Row ⋮ menus are moved to document.body when opened (see partials.admin.fixed-action-menu) --}}

    <!-- Scripts -->
    <script>
        // Admin uses a fixed light theme only (ignore OS dark / saved dark preference on this layout)
        document.documentElement.classList.remove('dark');
        function toggleDarkMode() {
            document.documentElement.classList.remove('dark');
        }

        // Sidebar hover expand/collapse (Desktop/Tablet only)
        let hoverTimeout;
        let isManuallyCollapsed = false;
        let wasExpandedByHover = false;
        let isHovering = false;
        
        function expandSidebarOnHover() {
            // Only work on desktop/tablet (768px and above)
            if (window.innerWidth < 768) return;
            
            const sidebar = document.getElementById('sidebar');
            if (!sidebar) return;
            
            isHovering = true;
            clearTimeout(hoverTimeout);
            
            // Only expand if sidebar is collapsed (whether manually or by hover)
            if (sidebar.classList.contains('sidebar-collapsed')) {
                wasExpandedByHover = true;
                sidebar.classList.remove('sidebar-collapsed');
                sidebar.classList.remove('w-16');
                sidebar.classList.add('w-64');
                
                // Show full logo, hide collapsed logo
                const fullLogo = sidebar.querySelector('.sidebar-logo-full');
                const collapsedLogo = sidebar.querySelector('.sidebar-logo-collapsed');
                if (fullLogo) {
                    fullLogo.classList.remove('hidden');
                    fullLogo.style.display = 'block';
                }
                if (collapsedLogo) {
                    collapsedLogo.classList.add('hidden');
                    collapsedLogo.style.display = 'none';
                }
                
                // Show menu labels
                const labels = sidebar.querySelectorAll('.sidebar-menu-label, .sidebar-section-label, .sidebar-menu-chevron, .sidebar-menu-arrow, .sidebar-user-info');
                labels.forEach(label => {
                    label.style.display = '';
                });
            }
        }
        
        function collapseSidebarOnHover() {
            // Only work on desktop/tablet (768px and above)
            if (window.innerWidth < 768) return;
            
            const sidebar = document.getElementById('sidebar');
            if (!sidebar) return;
            
            isHovering = false;
            
            // Only collapse if it was expanded by hover (not manually expanded)
            if (wasExpandedByHover) {
                hoverTimeout = setTimeout(() => {
                    // Double check we're not hovering and it was expanded by hover
                    if (!isHovering && wasExpandedByHover && !sidebar.classList.contains('sidebar-collapsed')) {
                        sidebar.classList.add('sidebar-collapsed');
                        sidebar.classList.remove('w-64');
                        sidebar.classList.add('w-16');
                        
                        // Hide full logo, show collapsed logo
                        const fullLogo = sidebar.querySelector('.sidebar-logo-full');
                        const collapsedLogo = sidebar.querySelector('.sidebar-logo-collapsed');
                        if (fullLogo) {
                            fullLogo.classList.add('hidden');
                            fullLogo.style.display = 'none';
                        }
                        if (collapsedLogo) {
                            collapsedLogo.classList.remove('hidden');
                            collapsedLogo.style.display = 'block';
                        }
                        
                        // Hide menu labels
                        const labels = sidebar.querySelectorAll('.sidebar-menu-label, .sidebar-section-label, .sidebar-menu-chevron, .sidebar-menu-arrow, .sidebar-user-info');
                        labels.forEach(label => {
                            label.style.display = 'none';
                        });
                        
                        // Close all submenus
                        const submenus = sidebar.querySelectorAll('[id$="-submenu"]');
                        submenus.forEach(submenu => {
                            submenu.style.display = 'none';
                        });
                        
                        // Reset arrow icons
                        const arrows = sidebar.querySelectorAll('[id$="-arrow"]');
                        arrows.forEach(arrow => {
                            arrow.textContent = 'expand_more';
                            arrow.style.transform = 'rotate(0deg)';
                        });
                        
                        wasExpandedByHover = false;
                    }
                }, 200); // Small delay to prevent flickering
            }
        }

        // Sidebar toggle for mobile and desktop
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            const toggleIcon = document.querySelector('.sidebar-toggle-icon');
            const overlay = document.getElementById('sidebar-overlay');
            
            if (window.innerWidth >= 768) {
                // Desktop/Tablet: toggle sidebar width between collapsed and expanded
                const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
                
                if (isCollapsed) {
                    // Expand sidebar
                    isManuallyCollapsed = false;
                    wasExpandedByHover = false;
                    sidebar.classList.remove('sidebar-collapsed');
                    sidebar.classList.remove('w-16');
                    sidebar.classList.add('w-64');
                    
                    if (toggleIcon) toggleIcon.textContent = 'menu';
                    
                    // Show full logo, hide collapsed logo
                    const fullLogo = sidebar.querySelector('.sidebar-logo-full');
                    const collapsedLogo = sidebar.querySelector('.sidebar-logo-collapsed');
                    if (fullLogo) {
                        fullLogo.classList.remove('hidden');
                        fullLogo.style.display = 'block';
                    }
                    if (collapsedLogo) {
                        collapsedLogo.classList.add('hidden');
                        collapsedLogo.style.display = 'none';
                    }
                    
                    // Show menu labels
                    const labels = sidebar.querySelectorAll('.sidebar-menu-label, .sidebar-section-label, .sidebar-menu-chevron, .sidebar-menu-arrow, .sidebar-user-info');
                    labels.forEach(label => {
                        label.style.display = '';
                    });
                } else {
                    // Collapse sidebar
                    isManuallyCollapsed = true;
                    wasExpandedByHover = false;
                    sidebar.classList.add('sidebar-collapsed');
                    sidebar.classList.remove('w-64');
                    sidebar.classList.add('w-16');
                    
                    if (toggleIcon) toggleIcon.textContent = 'menu_open';
                    
                    // Hide full logo, show collapsed logo
                    const fullLogo = sidebar.querySelector('.sidebar-logo-full');
                    const collapsedLogo = sidebar.querySelector('.sidebar-logo-collapsed');
                    if (fullLogo) {
                        fullLogo.classList.add('hidden');
                        fullLogo.style.display = 'none';
                    }
                    if (collapsedLogo) {
                        collapsedLogo.classList.remove('hidden');
                        collapsedLogo.style.display = 'block';
                    }
                    
                    // Hide menu labels
                    const labels = sidebar.querySelectorAll('.sidebar-menu-label, .sidebar-section-label, .sidebar-menu-chevron, .sidebar-menu-arrow, .sidebar-user-info');
                    labels.forEach(label => {
                        label.style.display = 'none';
                    });
                    
                    // Close all submenus when collapsing
                    const submenus = sidebar.querySelectorAll('[id$="-submenu"]');
                    submenus.forEach(submenu => {
                        submenu.style.display = 'none';
                    });
                    
                    // Reset arrow icons
                    const arrows = sidebar.querySelectorAll('[id$="-arrow"]');
                    arrows.forEach(arrow => {
                        arrow.textContent = 'expand_more';
                        arrow.style.transform = 'rotate(0deg)';
                    });
                }
            } else {
                // Mobile: toggle visibility with proper overlay and body scroll control
                const isOpen = !sidebar.classList.contains('-translate-x-full');
                
                if (isOpen) {
                    // Close sidebar
                    sidebar.classList.add('-translate-x-full');
                    if (overlay) {
                        overlay.classList.add('opacity-0');
                        overlay.classList.add('invisible');
                    }
                    document.body.classList.remove('sidebar-open');
                } else {
                    // Open sidebar
                    sidebar.classList.remove('-translate-x-full');
                    if (overlay) {
                        overlay.classList.remove('opacity-0');
                        overlay.classList.remove('invisible');
                    }
                    document.body.classList.add('sidebar-open');
                }
            }
        }

        // Submenu toggle
        function toggleSubmenu(submenuId) {
            const sidebar = document.getElementById('sidebar');
            // Don't allow submenu toggle when sidebar is collapsed (when hover-expanded, collapsed class is removed)
            if (sidebar && sidebar.classList.contains('sidebar-collapsed')) {
                return;
            }
            
            const submenu = document.getElementById(submenuId + '-submenu');
            const arrow = document.getElementById(submenuId + '-arrow');
            
            if (submenu && arrow) {
                const isHidden = submenu.style.display === 'none' || submenu.classList.contains('hidden');
                
                // Toggle current submenu
                if (isHidden) {
                    submenu.style.display = '';
                    submenu.classList.remove('hidden');
                    arrow.textContent = 'expand_less';
                    arrow.style.transform = 'rotate(0deg)';
                } else {
                    submenu.style.display = 'none';
                    submenu.classList.add('hidden');
                    arrow.textContent = 'expand_more';
                    arrow.style.transform = 'rotate(180deg)';
                }
            }
        }

        // Handle window resize to maintain sidebar state
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                const sidebar = document.getElementById('sidebar');
                const mainContent = document.getElementById('main-content');
                const overlay = document.getElementById('sidebar-overlay');
                
                if (window.innerWidth >= 768) {
                    // Desktop/Tablet: flex layout handles spacing automatically
                    // Remove mobile translate class if present
                    sidebar.classList.remove('-translate-x-full');
                    // Ensure overlay is hidden on desktop
                    if (overlay) {
                        overlay.classList.add('opacity-0');
                        overlay.classList.add('invisible');
                    }
                    // Remove body scroll lock
                    document.body.classList.remove('sidebar-open');
                    // Reset hover state
                    wasExpandedByHover = false;
                    isHovering = false;
                } else {
                    // Mobile: ensure sidebar is hidden by default
                    sidebar.classList.add('-translate-x-full');
                    if (overlay) {
                        overlay.classList.add('opacity-0');
                        overlay.classList.add('invisible');
                    }
                    document.body.classList.remove('sidebar-open');
                    // Reset desktop states
                    wasExpandedByHover = false;
                    isHovering = false;
                }
            }, 250);
        });
        
        // Initialize sidebar state on page load
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            
            if (window.innerWidth < 768) {
                // Mobile: ensure sidebar starts hidden
                if (!sidebar.classList.contains('-translate-x-full')) {
                    sidebar.classList.add('-translate-x-full');
                }
                if (overlay) {
                    overlay.classList.add('opacity-0');
                    overlay.classList.add('invisible');
                }
                document.body.classList.remove('sidebar-open');
            } else {
                // Desktop: ensure sidebar is visible and not translated
                sidebar.classList.remove('-translate-x-full');
                if (overlay) {
                    overlay.classList.add('opacity-0');
                    overlay.classList.add('invisible');
                }
                document.body.classList.remove('sidebar-open');
            }
        });
    </script>

    @include('partials.admin.fixed-action-menu')

    @stack('scripts')
</body>
</html>
