<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#4f46e5">
    <title>Waiter App | {{ config('app.name') }}</title>
    
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="https://img.icons8.com/color/192/000000/waiter.png">

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        [x-cloak] { display: none !important; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        /* Prevent elastic scrolling on iOS */
        body { position: fixed; width: 100%; height: 100%; overflow: hidden; }
        #app-container { height: 100%; display: flex; flex-col; overflow: hidden; }
    </style>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js').then((reg) => {
                    console.log('Service worker registered.', reg);
                }).catch((err) => {
                    console.log('Service worker registration failed.', err);
                });
            });
        }
    </script>
</head>
<body class="bg-zinc-50 font-sans antialiased text-zinc-900 select-none">
    
    <div id="app-container" class="flex flex-col h-full overflow-hidden">
        @yield('content')
    </div>

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