<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<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', 'Holaxis 360') }}</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    {{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}
    <link rel="stylesheet" href="{{ asset('build/assets/app-C_N3uxIS.css') }}">
    <script src="{{ asset('build/assets/app-BMyCXOwf.js') }}" type="module"></script>
    
    @if(app()->getLocale() === 'ar')
        <link href="{{ asset('css/rtl.css') }}?v={{ time() }}" rel="stylesheet">
    @endif

    @stack('styles')
    
    <!-- Livewire Styles -->
    @livewireStyles

    <!-- Theme Overrides (Injected because build is unavailable) -->
    <style>
        :root {
            /* Palette: Dark Blue #124170, Teal #26667F, Green #67C090, Mint #DDF4E7 */
            --mv-primary: #124170 !important;
            --mv-primary-dark: #0e3359 !important;
            --mv-secondary: #26667F !important;
            --mv-success: #67C090 !important;
            --mv-info: #26667F !important;
            --mv-warning: #f59e0b !important;
            --mv-danger: #ef4444 !important;
            --mv-light: #DDF4E7 !important;
            --mv-dark: #124170 !important;
            --bs-primary: #124170 !important;
            --bs-secondary: #26667F !important;
            --bs-success: #67C090 !important;
            --bs-info: #DDF4E7 !important;
        }

        /* Body & Backgrounds */
        body { background-color: #f0f7f4 !important; }
        .bg-light { background-color: #f0f7f4 !important; }
        .bg-white { background-color: #ffffff !important; }

        /* Typography */
        .text-primary { color: var(--mv-primary) !important; }
        .text-secondary { color: var(--mv-secondary) !important; }
        .text-success { color: var(--mv-success) !important; }

        /* Buttons & Components */
        .btn-primary {
            background-color: var(--mv-primary) !important;
            border-color: var(--mv-primary) !important;
        }
        .btn-primary:hover {
            background-color: var(--mv-primary-dark) !important;
            border-color: var(--mv-primary-dark) !important;
        }
        .bg-primary { background-color: var(--mv-primary) !important; }
        .bg-secondary { background-color: var(--mv-secondary) !important; }

        /* Sidebar Styling */
        .sidebar {
            background: linear-gradient(180deg, var(--mv-dark) 0%, #0e3359 100%) !important;
        }
        .sidebar .nav-link.active {
            background-color: var(--mv-secondary) !important; /* Teal for active state */
            color: #ffffff !important;
        }
        .sidebar .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
            color: #ffffff !important;
        }

        /* Override potential hardcoded Tailwind/Bootstrap colors from templates */
        .bg-indigo-600, .bg-purple-600, .bg-blue-600 {
            background-color: var(--mv-primary) !important;
        }
        .bg-indigo-500, .bg-purple-500, .bg-blue-500 {
            background-color: var(--mv-secondary) !important;
        }
        .text-indigo-600, .text-purple-600, .text-blue-600 {
            color: var(--mv-primary) !important;
        }
        
        /* Navbar / Header */
        /* Keep header white as requested for contrast, or update if user wants color */
        
        /* Fix for potential nested layout rendering causing duplicate headers */
        .main-content .main-content .main-header {
            display: none !important;
        }
        .main-content .sidebar {
            display: none !important;
        }
        .main-content .main-content {
            margin-left: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }
    </style>
</head>
<body class="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
    <!-- Toast Container -->
    <div id="toast-container" class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;"></div>

    <!-- Sidebar -->
    @auth
        @include('layouts.partials.sidebar')
    @endauth

    <!-- Main Content -->
    <div class="main-content @guest ms-0 @endguest">
        <!-- Header -->
        @auth
            @include('layouts.partials.header')
        @endauth

        <!-- Main Body -->
        <main class="main-body">
            <!-- Flash Messages -->
            @if (session()->has('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if (session()->has('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if (session()->has('warning'))
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {{ session('warning') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Page Content -->
            {{ $slot }}
        </main>
    </div>

    <!-- Livewire Scripts -->
    @livewireScripts

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