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

    <title><?php echo e(config('app.name', 'TrueTrucker')); ?> - <?php echo $__env->yieldContent('title', 'Dashboard'); ?></title>

    <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@300;400;500;600;700&display=swap" rel="stylesheet">

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/css/theme.css', 'resources/js/app.js']); ?>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Poppins', system-ui, sans-serif;
            background: linear-gradient(135deg, #003D7A 0%, #1a2332 100%);
            color: #0f172a;
        }

        .portal-shell {
            min-height: 100vh;
        }

        @media (min-width: 1024px) {
            .portal-shell {
                display: flex;
            }
        }

        .portal-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: rgba(248, 250, 252, 0.96);
            backdrop-filter: blur(10px);
        }

        .portal-header {
            border-bottom: 1px solid #e0f2fe;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(8px);
        }

        .portal-header-inner {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1.5rem;
        }

        .page-eyebrow {
            margin: 0 0 0.35rem 0;
            color: #0f766e;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.18em;
        }

        .page-title {
            margin: 0;
            color: #003D7A;
            font-size: 1.9rem;
            font-weight: 700;
        }

        .page-subtitle {
            margin: 0.4rem 0 0 0;
            color: #64748b;
            font-size: 0.95rem;
        }

        .user-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            border-radius: 999px;
            border: 1px solid #dbeafe;
            background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
            padding: 0.45rem 0.85rem;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
        }

        .user-chip-avatar {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #003D7A 0%, #00BFA5 100%);
            color: white;
            font-weight: 700;
        }

        .portal-content {
            flex: 1;
            padding: 1.5rem;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, #ffffff 100%);
        }

        .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);
        }

        @media (min-width: 768px) {
            .portal-header-inner,
            .portal-content {
                padding: 2rem;
            }
        }

        @media (min-width: 1024px) {
            .portal-header-inner {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 1.5rem 2rem;
            }

            .portal-content {
                padding: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="portal-shell">
        <?php echo $__env->make('layouts.partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <div class="portal-main">
            <header class="portal-header">
                <div class="portal-header-inner">
                    <div>
                        <p class="page-eyebrow">TrueTrucker portal</p>
                        <h1 class="page-title"><?php echo $__env->yieldContent('title', 'Dashboard'); ?></h1>
                        <?php if (! empty(trim($__env->yieldContent('subtitle')))): ?>
                            <p class="page-subtitle"><?php echo $__env->yieldContent('subtitle'); ?></p>
                        <?php endif; ?>
                    </div>

                    <div class="user-chip">
                        <div class="user-chip-avatar"><?php echo e(substr(auth()->user()->name, 0, 1)); ?></div>
                        <div>
                            <div style="font-weight: 600; font-size: 0.9rem;"><?php echo e(auth()->user()->name); ?></div>
                            <div style="font-size: 0.75rem; color: #64748b; text-transform: capitalize;"><?php echo e(auth()->user()->role); ?></div>
                        </div>
                    </div>
                </div>
            </header>

            <main class="portal-content">
                <?php echo $__env->yieldContent('content'); ?>
            </main>
        </div>
    </div>

    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH D:\true-trucker\web\resources\views/layouts/themed-app.blade.php ENDPATH**/ ?>