@php
    // One resolved brand for the whole document. This block used to issue one
    // SettingsService::get() per field — about sixteen SELECTs per render, and
    // again on every Livewire round-trip — each with its own fallback, which is
    // how primary_color came to have three different defaults across three
    // layouts.
    $brand = app(\App\Domain\Shared\Services\BrandingService::class)->forCurrentAcademy();
@endphp
<!DOCTYPE html>
<html dir="rtl" lang="ar" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'El Captain' }} - {{ $brand->academyName }}</title>
    <meta name="theme-color" content="{{ $brand->themeColor }}">
    @if($brand->faviconUrl)
        <link rel="icon" href="{{ $brand->faviconUrl }}">
    @endif
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family={{ urlencode($brand->fontAr) }}:wght@300;400;500;600;700;800&family={{ urlencode($brand->fontEn) }}:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    <style>
        /* x-cloak was used throughout without this rule, so cloaked elements
           flashed visible before Alpine booted. */
        [x-cloak] { display: none !important; }
        :root {
{!! $brand->cssVariableBlock() !!}
        }
        body {
            font-family: var(--brand-font-ar), var(--brand-font-en), sans-serif;
            font-size: var(--brand-font-size);
        }
        /* compact_sidebar was collected by the settings screen and read by
           nothing. It narrows the rail and hides the labels. */
        body.brand-compact-sidebar .app-sidebar { width: 4.5rem; }
        body.brand-compact-sidebar .app-sidebar .sidebar-label { display: none; }
        body.brand-compact-sidebar .app-main { margin-inline-start: 4.5rem; }
    </style>
</head>
<body class="h-full bg-gray-50 @if($brand->compactSidebar) brand-compact-sidebar @endif">
    <div x-data="{ sidebarOpen: false }" class="min-h-full" @keydown.escape.window="sidebarOpen = false">
        <!-- Mobile sidebar overlay -->
        <div x-show="sidebarOpen" x-cloak
             x-transition:enter="transition-opacity ease-linear duration-300"
             x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity ease-linear duration-300"
             x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-30 bg-gray-900/60 backdrop-blur-sm lg:hidden" @click="sidebarOpen = false">
        </div>

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

        <!-- Main content area -->
        <div class="app-main lg:ms-64 min-h-screen flex flex-col">
            <!-- Topbar -->
            @include('components.layouts.topbar')

            <!-- Page content -->
            <main class="flex-1 p-3 sm:p-5 lg:p-8 pb-20 sm:pb-8">
                <!-- Flash messages -->
                {{-- success_color and danger_color were collected and read by
                     nothing; the flash strip is where a tenant expects to see
                     them. --}}
                @if(session('success'))
                    <div class="mb-4 rounded-lg p-3 sm:p-4 border"
                         style="background-color: color-mix(in oklab, var(--brand-success) 10%, white);
                                border-color: color-mix(in oklab, var(--brand-success) 35%, white);">
                        <p class="text-sm" style="color: color-mix(in oklab, var(--brand-success) 80%, black);">{{ session('success') }}</p>
                    </div>
                @endif
                @if(session('error'))
                    <div class="mb-4 rounded-lg p-3 sm:p-4 border"
                         style="background-color: color-mix(in oklab, var(--brand-danger) 10%, white);
                                border-color: color-mix(in oklab, var(--brand-danger) 35%, white);">
                        <p class="text-sm" style="color: color-mix(in oklab, var(--brand-danger) 80%, black);">{{ session('error') }}</p>
                    </div>
                @endif

                {{ $slot }}
            </main>
        </div>
    </div>
    @livewireScripts
</body>
</html>
