<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }} - @yield('title', 'Dashboard')</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=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <!-- Vite Assets (Tailwind 4) -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Legacy Theme Support -->
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard-theme.css') }}">

    @stack('styles')

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        [x-cloak] { display: none !important; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

        body {
            background-color: var(--bg-dark);
            color: var(--text-primary);
            font-family: 'Instrument Sans', 'Inter', sans-serif;
        }
    </style>
</head>
<body class="antialiased selection:bg-[var(--accent-green)] selection:text-black">
    <div class="flex h-screen overflow-hidden bg-[var(--bg-dark)]">
        <!-- Sidebar -->
        @include('components.sidebar')
        
        <!-- Main Content Wrapper -->
        <div class="flex flex-col flex-grow overflow-hidden">
            <!-- Header -->
            @include('components.header')
            
            <!-- Scrollable Content Area -->
            <main class="flex-grow overflow-y-auto px-6 py-8">
                <div class="max-w-[1600px] mx-auto">
                    @if(session('success'))
                        <div class="mb-6 p-4 bg-green-500/10 border border-green-500/20 text-[var(--accent-green)] rounded-xl flex items-center gap-3">
                            <i class="bi bi-check-circle-fill"></i>
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @yield('content')
                </div>
            </main>

            <!-- Sticky Footer -->
            <footer class="flex-shrink-0 py-4 px-6 border-t border-[var(--border-color)] bg-[var(--bg-dark)]">
                <div class="max-w-[1600px] mx-auto flex justify-between items-center text-[10px] uppercase tracking-widest text-[var(--text-secondary)] font-bold">
                    <div>&copy; 2026 Flowieons &mdash; Engineering Intelligence</div>
                    <div class="flex gap-4">
                        <span>Platform v1.2.4</span>
                        <span class="text-[var(--accent-green)]">System Stable</span>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <!-- Theme Initializer -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('flowieons-theme') || 'dark';
            document.documentElement.setAttribute('data-theme', savedTheme);
            document.documentElement.classList.toggle('dark', savedTheme === 'dark');
            
            const toggler = document.getElementById('theme-toggler');
            if (toggler) {
                const updateTogglerIcon = (theme) => {
                    toggler.innerHTML = theme === 'dark' ? '<i class="bi bi-moon-stars"></i>' : '<i class="bi bi-brightness-high"></i>';
                };
                
                updateTogglerIcon(savedTheme);
                
                toggler.addEventListener('click', () => {
                    const current = document.documentElement.getAttribute('data-theme');
                    const next = current === 'dark' ? 'light' : 'dark';
                    
                    document.documentElement.setAttribute('data-theme', next);
                    document.documentElement.classList.toggle('dark', next === 'dark');
                    localStorage.setItem('flowieons-theme', next);
                    updateTogglerIcon(next);
                    
                    window.dispatchEvent(new Event('theme-changed'));
                });
            }
        });
    </script>
    @stack('scripts')
</body>
</html>

