<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'LEASING PRO') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

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

    <!-- Phase 15: Elite Dark UI Engine (Tailwind CDN Fallback) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                            950: '#020617',
                        },
                        primary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                        }
                    },
                    fontFamily: {
                        sans: ['Outfit', 'sans-serif'],
                        display: ['Outfit', 'sans-serif'],
                    },
                    borderRadius: {
                        '4xl': '2rem',
                        '5xl': '2.5rem',
                        '6xl': '3rem',
                    }
                }
            }
        }
    </script>

    <style>
        [x-cloak] { display: none !important; }
        
        body { 
            font-family: 'Outfit', sans-serif; 
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: auto;
        }

        /* Billion-Dollar Startup Mesh Gradient */
        .mesh-bg {
            background-color: #020617;
            background-image: 
                radial-gradient(at 0% 0%, rgba(124, 58, 237, 0.12) 0, transparent 50%), 
                radial-gradient(at 100% 0%, rgba(94, 234, 212, 0.05) 0, transparent 50%), 
                radial-gradient(at 100% 100%, rgba(124, 58, 237, 0.12) 0, transparent 50%), 
                radial-gradient(at 0% 100%, rgba(94, 234, 212, 0.05) 0, transparent 50%);
            background-attachment: fixed;
        }

        .premium-blur-dark {
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            background: rgba(2, 6, 23, 0.8);
        }

        /* Custom Elite Scrollbar */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: #020617; }
        ::-webkit-scrollbar-thumb { 
            background: #1e293b; 
            border: 3px solid #020617;
            border-radius: 20px; 
        }
        ::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

        /* Sophisticated Text Outline for Display Font */
        .outline-text {
            -webkit-text-stroke: 1px rgba(255,255,255,0.05);
            color: transparent;
        }
        .group:hover .outline-text {
            -webkit-text-stroke: 1px rgba(79, 70, 229, 0.3);
        }

        /* Custom Elite Scrollbar for containers */
        .custom-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

        /* Fade Animations */
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .animate-premium { animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    </style>
</head>
<body x-data="{ isSidebarOpen: false }" class="antialiased mesh-bg text-slate-400 selection:bg-indigo-500/30 selection:text-indigo-300">
    <div class="min-h-screen relative flex">
        <!-- Overlay for Mobile Sidebar -->
        <div x-show="isSidebarOpen" 
             @click="isSidebarOpen = false" 
             class="fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-[105] lg:hidden"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
        </div>

        <!-- Elite Enterprise Sidebar -->
        @include('components.sidebar')

        <!-- Main Content Area -->
        <div class="flex-1 flex flex-col min-h-screen relative z-10 lg:ml-72 transition-all duration-700">
            <!-- Global Intelligence Topbar -->
            @include('layouts.navigation')

            <!-- Core Content Injector -->
            <main class="flex-1 px-4 sm:px-8 lg:px-14 py-12 relative">
                {{ $slot }}
            </main>

            <!-- Corporate Identity Footer -->
            <footer class="px-14 py-12 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-8 opacity-60">
                <div class="flex items-center gap-6">
                    <span class="text-[9px] font-black uppercase tracking-[0.5em] text-slate-600 italic leading-none">{{ config('app.name') }} &copy; {{ date('Y') }}</span>
                    <div class="h-3 w-px bg-white/5 hidden md:block"></div>
                    <span class="text-[8px] font-black uppercase tracking-[0.3em] text-slate-800 italic leading-none">Global Enterprise Edition v2.5.4</span>
                </div>
                <div class="flex items-center gap-8">
                    <span class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-800 italic leading-none">Security: Encrypted Enclave</span>
                    <div class="w-2 h-2 bg-emerald-500/40 rounded-full animate-pulse"></div>
                </div>
            </footer>
        </div>

        <!-- Atmospheric Depth Effects -->
        <div class="fixed top-0 right-0 -z-0 translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] bg-indigo-600/5 blur-[250px] rounded-full pointer-events-none"></div>
        <div class="fixed bottom-0 left-0 -z-0 -translate-x-1/3 translate-y-1/3 w-[1200px] h-[1200px] bg-emerald-500/3 blur-[200px] rounded-full pointer-events-none"></div>
    </div>
</body>
</html>
