<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'Lauck Dashboard' }}</title>
    
    <!-- VITE: Esto carga tu Tailwind compilado y JS -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body class="bg-dark-bg text-gray-300 font-sans antialiased min-h-screen flex flex-col relative overflow-x-hidden">

    <!-- Fondo grilla global -->
    <div class="inset-0 bg-grid-pattern opacity-[0.15] z-0 pointer-events-none fixed"></div>

    <!-- Navbar Component -->
    <x-navbar />

    <!-- Contenido Principal -->
    <main class="grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
        {{ $slot }}
    </main>

    <!-- Footer Component -->
    <x-footer />

    <!-- Scripts globales -->
    <script>
        // Lógica del menú móvil
        const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
        const menu = document.getElementById('navbar-default');
        if(btn && menu) {
            btn.addEventListener('click', () => menu.classList.toggle('hidden'));
        }
    </script>
    @stack('scripts')

</body>
</html>