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

    <title>{{ $title ?? config('app.name', 'Laravel') }}</title>

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

    {{-- Apply dark mode before Alpine boots to prevent flash --}}
    <script>
        if (localStorage.getItem('darkMode') === 'true') {
            document.documentElement.classList.add('dark');
        }
    </script>

    @if(isset($themeCssVariables) && is_array($themeCssVariables))
    <style>
        :root {
            @foreach($themeCssVariables as $property => $value)
            {{ $property }}: {{ $value }};
            @endforeach
        }
    </style>
    @endif

    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        /*
         * Pre-Alpine layout styles.
         * These apply before Alpine.js boots so there is no layout flash.
         * Alpine overrides margin-left via :style binding once it initialises.
         */
        [x-cloak] { display: none !important; }

        /*
         * LAYOUT STRUCTURE:
         *
         *  ┌──────────┬──────────────────────────────────────────┐
         *  │          │  SIDE-HEADER (sticky, z-50, h-16)        │
         *  │ SIDEBAR  ├──────────────────────────────────────────┤
         *  │ (fixed,  │                                          │
         *  │ full-    │  PAGE CONTENT                            │
         *  │ height,  │  (scrollable)                            │
         *  │ top-0,   │                                          │
         *  │ z-40)    │                                          │
         *  └──────────┴──────────────────────────────────────────┘
         *
         * The sidebar is fixed, starts at top:0, full 100vh height, z-40.
         * The header is fixed, starts at top:0, left = sidebar width, z-50.
         * The content wrapper has padding-top:4rem to clear the sticky header,
         * and margin-left equal to the sidebar width on desktop.
         */

        /* Content wrapper: clears header height + sidebar width */
        .app-content-wrapper {
            padding-top: 4rem;          /* clear the 64px sticky header */
            margin-left: 16rem;         /* default: sidebar open on desktop */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Mobile: no sidebar margin */
        @media (max-width: 767px) {
            .app-content-wrapper {
                margin-left: 0 !important;
            }
        }

        /* Header left offset tracks sidebar width */
        .side-header-wrapper {
            left: 16rem; /* default: sidebar open on desktop */
            transition: left 0.3s ease-in-out;
        }
        @media (max-width: 767px) {
            .side-header-wrapper {
                left: 0 !important;
            }
        }
    </style>
</head>
<body style="font-family: var(--theme-font-body); color: var(--theme-color-body); background-color: var(--theme-bg-body);" class="antialiased">

    {{--
        Root Alpine scope: appLayoutData()
        Manages sidebarOpen, isMobile, darkMode.
        All child components (sidebar, side-header) read/write state here via $root.
    --}}
    <div x-data="appLayoutData()" x-cloak :class="{'dark': $store.appLayout.darkMode}" class="min-h-screen dark:bg-gray-900">

        {{-- ── SIDEBAR (fixed, full height from top-0, z-40) ─────────────────── --}}
        <x-sidebar />

        {{-- ── SIDE HEADER (fixed, starts beside sidebar, z-50) ──────────────── --}}
        <div
            class="side-header-wrapper fixed top-0 right-0 z-50"
            :style="!$store.appLayout.isMobile ? ($store.appLayout.sidebarOpen ? 'left:16rem' : 'left:5rem') : 'left:0'"
        >
            <x-side-header />
        </div>

        {{-- ── MOBILE OVERLAY BACKDROP ─────────────────────────────────────────── --}}
        <div
            x-show="$store.appLayout.isMobile && $store.appLayout.sidebarOpen"
            x-transition:enter="transition-opacity ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition-opacity ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            @click="$store.appLayout.toggleSidebar()"
            class="fixed inset-0 z-30 bg-black/50"
            style="display:none;"
            aria-hidden="true"
        ></div>

        {{--
            CONTENT WRAPPER
            padding-top: 4rem  — clears the 64px fixed header
            margin-left: 16rem — clears the open sidebar (desktop)
            margin-left: 5rem  — clears the collapsed sidebar (desktop)
            margin-left: 0     — no sidebar on mobile (sidebar overlays)
        --}}
        <div
            :style="!$store.appLayout.isMobile ? ($store.appLayout.sidebarOpen ? 'margin-left:16rem' : 'margin-left:5rem') : 'margin-left:0'"
            class="app-content-wrapper transition-all duration-300 ease-in-out overflow-x-hidden"
        >
            {{-- ── PAGE CONTENT ────────────────────────────────────────────── --}}
            <main class="flex-1 w-full">
                {{ $slot ?? '' }}
                @yield('content')
            </main>

            <x-app-footer />
        </div>

        <x-toast-notifications />
    </div>

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