<!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>{{ config('app.name', 'TrueTrucker') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
        <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=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/css/theme.css', 'resources/js/app.js'])

        <style>
            .portal-card {
                border-radius: 1rem;
                border: 1px solid rgba(186, 230, 253, 0.95);
                background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
                box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
            }

            .portal-soft-card {
                border-radius: 1rem;
                border: 1px solid rgba(191, 219, 254, 0.9);
                background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
                box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
            }

            .portal-note {
                border-radius: 0.9rem;
                border: 1px solid rgba(191, 219, 254, 0.95);
                background: linear-gradient(135deg, #ecfeff 0%, #eff6ff 100%);
                color: #0f3d7a;
            }

            .portal-primary-btn,
            .portal-secondary-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                padding: 0.72rem 1.15rem;
                border: 0;
                border-radius: 0.9rem;
                font-weight: 700;
                text-decoration: none;
                transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
            }

            .portal-primary-btn {
                background: linear-gradient(135deg, #11d5be 0%, #00bfa5 100%);
                color: #003d7a !important;
                box-shadow: 0 14px 30px rgba(0, 191, 165, 0.24);
            }

            .portal-primary-btn:hover,
            .portal-primary-btn:focus {
                color: #003d7a !important;
                filter: brightness(1.03);
                transform: translateY(-1px);
            }

            .portal-secondary-btn {
                background: linear-gradient(135deg, #0f3d7a 0%, #2563eb 100%);
                color: #fff !important;
                box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
            }

            .portal-secondary-btn:hover,
            .portal-secondary-btn:focus {
                color: #fff !important;
                filter: brightness(1.03);
                transform: translateY(-1px);
            }
        </style>
    </head>
    <body class="antialiased overflow-x-hidden" style="font-family: 'Poppins', system-ui, sans-serif; background: linear-gradient(135deg, #003D7A 0%, #1a2332 100%);">
        <div class="min-h-screen lg:flex">
            @include('layouts.partials.sidebar')

            <div class="flex-1 flex flex-col bg-slate-50/95 backdrop-blur-sm">
                @if (isset($header))
                    <header class="border-b border-sky-100 bg-white/85 backdrop-blur">
                        <div class="px-6 py-6 sm:px-8 lg:px-10">
                            {{ $header }}
                        </div>
                    </header>
                @endif

                <main class="flex-1 bg-gradient-to-br from-slate-50 to-white p-6 lg:p-8">
                    @if (isset($slot))
                        {{ $slot }}
                    @else
                        @yield('content')
                    @endif
                </main>
            </div>
        </div>
        @stack('scripts')
    </body>
</html>

