<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet" />
    <title>@yield('title', 'Admin') - {{ $branding['site_name'] ?? config('app.name') }}</title>
    @if(!empty($branding['favicon_url']))
        <link rel="icon" href="{{ $branding['favicon_url'] }}" />
    @endif

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

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    @php
        $theme = $generalSettings['theme'] ?? [];
        $adminPrimary = $theme['primary'] ?? '#1d4ed8';
        $adminSecondary = $theme['secondary'] ?? '#0f172a';
        $adminAccent = $theme['accent'] ?? '#e1252b';
        $adminSidebar = $theme['admin_sidebar'] ?? '#1e3a8a';
    @endphp

    <style>
        :root {
            --admin-primary: {{ $adminPrimary }};
            --admin-secondary: {{ $adminSecondary }};
            --admin-accent: {{ $adminAccent }};
            --admin-sidebar: {{ $adminSidebar }};
            --admin-sidebar-soft: color-mix(in srgb, var(--admin-sidebar) 85%, #ffffff);
            --admin-primary-soft: color-mix(in srgb, var(--admin-primary) 14%, #ffffff);
            --admin-primary-border: color-mix(in srgb, var(--admin-primary) 28%, #ffffff);
        }

        body {
            font-family: 'Inter', sans-serif;
        }

        .admin-theme .bg-blue-900 { background-color: var(--admin-sidebar) !important; }
        .admin-theme .bg-blue-700,
        .admin-theme .bg-blue-600 { background-color: var(--admin-primary) !important; }
        .admin-theme .bg-blue-100,
        .admin-theme .bg-blue-50 { background-color: var(--admin-primary-soft) !important; }

        .admin-theme .text-blue-900 { color: var(--admin-secondary) !important; }
        .admin-theme .text-blue-700,
        .admin-theme .text-blue-600,
        .admin-theme .text-blue-500,
        .admin-theme .text-blue-400 { color: var(--admin-primary) !important; }
        .admin-theme .text-blue-300 { color: color-mix(in srgb, #ffffff 76%, var(--admin-sidebar)) !important; }
        .admin-theme .text-blue-200 { color: color-mix(in srgb, #ffffff 84%, var(--admin-sidebar)) !important; }
        .admin-theme .text-blue-100 { color: color-mix(in srgb, #ffffff 92%, var(--admin-sidebar)) !important; }

        .admin-theme .border-blue-800,
        .admin-theme .border-blue-600,
        .admin-theme .border-blue-400,
        .admin-theme .border-blue-200,
        .admin-theme .border-blue-100 { border-color: var(--admin-primary-border) !important; }

        .admin-theme .hover\:bg-blue-800:hover,
        .admin-theme .hover\:bg-blue-700:hover { background-color: var(--admin-sidebar-soft) !important; color: #fff !important; }
        .admin-theme .hover\:bg-blue-100:hover,
        .admin-theme .hover\:bg-blue-50:hover { background-color: var(--admin-primary-soft) !important; }

        .admin-theme .hover\:text-blue-600:hover,
        .admin-theme .hover\:text-blue-700:hover { color: var(--admin-primary) !important; }

        .admin-theme .focus\:border-blue-500:focus { border-color: var(--admin-primary) !important; }
        .admin-theme .focus\:ring-blue-500:focus,
        .admin-theme .focus\:ring-blue-400:focus { --tw-ring-color: color-mix(in srgb, var(--admin-primary) 34%, transparent) !important; }
        .admin-theme .ring-blue-500 { --tw-ring-color: color-mix(in srgb, var(--admin-primary) 34%, transparent) !important; }

        .admin-theme .admin-panel-shell {
            max-width: 1280px;
            margin: 0 auto;
        }

        .admin-theme input[type="text"],
        .admin-theme input[type="email"],
        .admin-theme input[type="number"],
        .admin-theme input[type="password"],
        .admin-theme input[type="url"],
        .admin-theme input[type="date"],
        .admin-theme textarea,
        .admin-theme select {
            border-radius: 0.7rem;
            border: 1px solid #dbe2ea;
            box-shadow: none;
        }

        .admin-theme input:focus,
        .admin-theme textarea:focus,
        .admin-theme select:focus {
            border-color: var(--admin-primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-primary) 20%, transparent);
        }

        .admin-theme table thead th {
            font-weight: 700;
            color: #334155;
        }
    </style>

    @stack('styles')
</head>
<body class="admin-theme bg-gray-100 text-gray-800">

<div class="flex h-screen overflow-hidden">
    @include('admin.partials.sidebar')

    <div class="flex flex-col flex-1 overflow-hidden">
        @include('admin.partials.topnav')

        <main class="flex-1 overflow-y-auto p-6">
            <div class="admin-panel-shell">
            @if (session('success'))
                <div class="mb-4 rounded-lg bg-green-100 border border-green-300 text-green-800 px-4 py-3 text-sm">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="mb-4 rounded-lg bg-red-100 border border-red-300 text-red-800 px-4 py-3 text-sm">
                    {{ session('error') }}
                </div>
            @endif

            @yield('content')
            </div>
        </main>
    </div>
</div>

@include('admin.partials.ai-modal')

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