<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Movex Nigeria Map Accounts')</title>
    <link rel="preconnect" href="https://unpkg.com">
    @stack('styles')
    <style>
        :root {
            --bg: #f5f7fb;
            --card: #ffffff;
            --ink: #162033;
            --muted: #667085;
            --line: #dfe5ef;
            --brand: #1b8f3a;
            --brand-dark: #0f6d2a;
            --warn: #b42318;
            --soft: #eef8f0;
            --shadow: 0 16px 40px rgba(16, 24, 40, .08);
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: var(--bg);
            color: var(--ink);
        }
        a { color: inherit; text-decoration: none; }
        .topbar {
            background: var(--card);
            border-bottom: 1px solid var(--line);
            padding: 14px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            position: sticky;
            top: 0;
            z-index: 40;
        }
        .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; }
        .brand-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 900; }
        .user-chip { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
        .logout-button { border: 0; background: #fff4f4; color: var(--warn); padding: 9px 12px; border-radius: 10px; cursor: pointer; font-weight: 700; }
        .shell { max-width: 1440px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: 1fr 290px; gap: 22px; align-items: start; }
        .sidebar { position: sticky; top: 82px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); }
        .sidebar-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; margin-bottom: 12px; }
        .nav { display: grid; gap: 8px; }
        .nav a { padding: 12px 13px; border-radius: 14px; color: #24324b; font-weight: 700; border: 1px solid transparent; }
        .nav a:hover, .nav a.active { background: var(--soft); border-color: #c6ecd0; color: var(--brand-dark); }
        .content { min-width: 0; }
        .page-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
        .page-title { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.06em; }
        .page-subtitle { color: var(--muted); margin: 8px 0 0; max-width: 780px; line-height: 1.55; }
        .card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 18px; }
        .grid { display: grid; gap: 16px; }
        .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .metric { border-radius: 18px; background: #fbfcff; border: 1px solid var(--line); padding: 16px; }
        .metric strong { font-size: 26px; display: block; letter-spacing: -.04em; }
        .metric span { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
        .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
        table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; }
        th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
        th { background: #f8fafc; color: #475467; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
        tr:last-child td { border-bottom: 0; }
        .row-link { cursor: pointer; }
        .row-link:hover td { background: #f7fff8; }
        .btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--brand); color: white; padding: 10px 14px; border-radius: 12px; font-weight: 800; cursor: pointer; line-height: 1; }
        .btn.secondary { background: #eef2f7; color: #25324a; }
        .btn.danger { background: #b42318; }
        .btn.small { padding: 8px 10px; font-size: 12px; }
        .actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: capitalize; background: #eef2f7; color: #344054; }
        .badge.low { background: #e7f8ec; color: #166534; }
        .badge.medium { background: #fff7ed; color: #9a3412; }
        .badge.high { background: #fff1f2; color: #be123c; }
        .badge.critical { background: #f5f3ff; color: #6d28d9; }
        .alert { padding: 13px 15px; border-radius: 14px; margin-bottom: 14px; border: 1px solid; font-weight: 700; }
        .alert.success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
        .alert.error { background: #fff1f3; border-color: #fecdd6; color: #be123c; }
        label { display: block; font-weight: 800; margin-bottom: 6px; color: #344054; }
        input, select { width: 100%; padding: 11px 12px; border: 1px solid #cfd7e6; border-radius: 12px; font: inherit; background: #fff; }
        .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
        .auth-card { width: min(680px, 100%); background: var(--card); padding: 28px; border-radius: 28px; border: 1px solid var(--line); box-shadow: var(--shadow); }
        .auth-card h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -.06em; }
        .muted { color: var(--muted); }
        .map-box { height: 600px; border-radius: 22px; border: 1px solid var(--line); overflow: hidden; background: #e8eef5; }
        .mini-map { height: 320px; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
        .help { font-size: 12px; color: var(--muted); margin-top: 5px; }
        .inline-form { display: inline; }
        .pagination { margin-top: 16px; }
        @media (max-width: 1100px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; order: -1; } .grid-4, .grid-2, .form-grid, .form-grid.two { grid-template-columns: 1fr; } }
    </style>
</head>
<body>
    @auth
        <header class="topbar">
            <a href="{{ route('dashboard') }}" class="brand">
                <span class="brand-badge">NG</span>
                <span>Movex Nigeria Map Accounts</span>
            </a>
            <div class="user-chip">
                <span>{{ auth()->user()->full_name }} · {{ auth()->user()->user_no }} · {{ ucfirst(auth()->user()->role) }}</span>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="logout-button" type="submit">Logout</button>
                </form>
            </div>
        </header>
        <main class="shell">
            <section class="content">
                @include('layouts.flash')
                @yield('content')
            </section>
            <aside class="sidebar">
                <div class="sidebar-title">Right Dashboard</div>
                <nav class="nav">
                    <a class="{{ request()->routeIs('dashboard') ? 'active' : '' }}" href="{{ route('dashboard') }}">Dashboard</a>
                    @if(auth()->user()->isMonitoring())
                        <a class="{{ request()->routeIs('monitor.index') ? 'active' : '' }}" href="{{ route('monitor.index') }}">Monitor</a>
                        <a class="{{ request()->routeIs('monitor.mapping') || request()->routeIs('monitor.traffic-map') ? 'active' : '' }}" href="{{ route('monitor.mapping') }}">MAP Mapping</a>
                    @endif
                    @if(auth()->user()->isAccount())
                        <a class="{{ request()->routeIs('driver-payouts.*') ? 'active' : '' }}" href="{{ route('driver-payouts.index') }}">Driver Pay Out</a>
                    @endif
                </nav>
            </aside>
        </main>
    @else
        @yield('auth')
    @endauth
    @stack('scripts')
</body>
</html>
