<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Salihiya World Cargo')</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        :root {
            --brand-navy:   #2c2860;
            --brand-navy-deep: #1e1b47;
            --brand-gold:   #f4b65a;
            --brand-gold-light: #e9ce9f;
            --brand-gold-dark: #d4952f;
            --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
            --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: #f5f4f9;
            min-height: 100vh;
            color: #1a1a2e;
        }

        h1, h2, h3, .font-display {
            font-family: 'Syne', sans-serif;
        }

        /* Sidebar */
        .sidebar {
            width: 260px;
            background: var(--brand-navy);
            min-height: 100vh;
            position: fixed;
            left: 0; top: 0;
            display: flex;
            flex-direction: column;
            z-index: 50;
        }

        .sidebar-logo {
            padding: 28px 24px 20px;
            border-bottom: 1px solid rgba(244,182,90,0.15);
        }

        .sidebar-logo img {
            height: 48px;
            width: auto;
        }

        .sidebar-nav {
            padding: 16px 12px;
            flex: 1;
        }

        .nav-label {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(233,206,159,0.45);
            padding: 8px 12px 6px;
            font-family: 'Syne', sans-serif;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            color: rgba(255,255,255,0.65);
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            transition: background 150ms var(--ease-out),
                        color 150ms var(--ease-out);
            margin-bottom: 2px;
        }

        .nav-link:hover {
            background: rgba(244,182,90,0.1);
            color: #fff;
        }

        .nav-link.active {
            background: rgba(244,182,90,0.18);
            color: var(--brand-gold);
        }

        .nav-link svg {
            width: 18px; height: 18px;
            flex-shrink: 0;
        }

        .sidebar-footer {
            padding: 16px 12px 24px;
            border-top: 1px solid rgba(244,182,90,0.1);
        }

        .user-chip {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(255,255,255,0.05);
        }

        .avatar {
            width: 34px; height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark));
            display: flex; align-items: center; justify-content: center;
            font-family: 'Syne', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--brand-navy);
            flex-shrink: 0;
        }

        .user-name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            line-height: 1.2;
        }

        .user-role {
            font-size: 11px;
            color: rgba(233,206,159,0.5);
        }

        /* Main content */
        .main-content {
            margin-left: 260px;
            min-height: 100vh;
        }

        .topbar {
            background: #fff;
            border-bottom: 1px solid #ebe9f4;
            padding: 0 32px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 40;
        }
        .menu-btn {
            display: none;
            font-size: 20px;
            background: none;
            border: none;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .menu-btn {
                display: block;
            }
        }
        #overlay { display: none; }

        @media (max-width: 768px) {
            #overlay.active {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.4);
                z-index: 40;
            }
        }

        .topbar-title {
            font-family: 'Syne', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--brand-navy);
        }

        .page-body {
            padding: 32px;
        }

        /* Cards */
        .card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid #ebe9f4;
            overflow: hidden;
        }

        /* Stat cards */
        .stat-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid #ebe9f4;
            padding: 24px;
            position: relative;
            overflow: hidden;
            transition: transform 200ms var(--ease-out),
                        box-shadow 200ms var(--ease-out);
        }

        @media (hover: hover) and (pointer: fine) {
            .stat-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(44,40,96,0.1);
            }
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 80px; height: 80px;
            border-radius: 0 0 0 80px;
            opacity: 0.06;
        }

        .stat-card.navy::before  { background: var(--brand-navy); }
        .stat-card.gold::before  { background: var(--brand-gold); }
        .stat-card.green::before { background: #10b981; }
        .stat-card.amber::before { background: #f59e0b; }

        .stat-icon {
            width: 44px; height: 44px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            margin-bottom: 16px;
        }

        .stat-value {
            font-family: 'Syne', sans-serif;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: var(--brand-navy);
            line-height: 1.1;
        }

        .stat-label {
            font-size: 13px;
            font-weight: 500;
            color: #8b87a8;
            margin-top: 6px;
            letter-spacing: 0.2px;
        }

        /* Shipment cards */
        .shipment-card {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #f0eef8;
            text-decoration: none;
            transition: background 150ms var(--ease-out);
            gap: 16px;
        }

        .shipment-card:last-child { border-bottom: none; }

        @media (hover: hover) and (pointer: fine) {
            .shipment-card:hover { background: #faf9fd; }
        }

        .type-badge {
            width: 40px; height: 40px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .type-badge.air { background: #eff6ff; }
        .type-badge.sea { background: #fffbeb; }

        .progress-bar {
            height: 4px;
            background: #ede9ff;
            border-radius: 99px;
            overflow: hidden;
            margin-top: 8px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--brand-navy), var(--brand-gold));
            border-radius: 99px;
            transition: width 600ms var(--ease-out);
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 99px;
            white-space: nowrap;
        }

        .status-pill::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: currentColor;
        }

        /* Stagger animation */
        .stagger-item {
            opacity: 0;
            transform: translateY(8px);
            animation: fadeUp 300ms var(--ease-out) forwards;
        }

        .stagger-item:nth-child(1) { animation-delay: 0ms; }
        .stagger-item:nth-child(2) { animation-delay: 50ms; }
        .stagger-item:nth-child(3) { animation-delay: 100ms; }
        .stagger-item:nth-child(4) { animation-delay: 150ms; }
        .stagger-item:nth-child(5) { animation-delay: 200ms; }
        .stagger-item:nth-child(6) { animation-delay: 250ms; }

        @keyframes fadeUp {
            to { opacity: 1; transform: translateY(0); }
        }

        /* Flash messages */
        .flash {
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 20px;
            animation: fadeUp 250ms var(--ease-out) forwards;
        }

        @media (prefers-reduced-motion: reduce) {
            .stagger-item, .stat-card, .flash {
                animation: none;
                opacity: 1;
                transform: none;
                transition: none;
            }
        }
        @media (max-width: 768px) {

        .sidebar {
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        .sidebar.open {
            transform: translateX(0);
        }

        .main-content {
            margin-left: 0 !important; /* override desktop push */
        }
    }
    </style>
</head>
<body>

<div class="sidebar">
    <div class="sidebar-logo">
        <img src="/images/logo.webp" alt="Salihiya World Cargo">
    </div>

    <nav class="sidebar-nav">
        <div class="nav-label">Main</div>

        <a href="{{ route('portal.dashboard') }}"
           class="nav-link {{ request()->routeIs('portal.dashboard') ? 'active' : '' }}">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            Dashboard
        </a>

        <a href="#" class="nav-link">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
            </svg>
            My Shipments
        </a>
    </nav>

    <div class="sidebar-footer">
        <div class="user-chip">
            <div class="avatar">
                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
            </div>
            <div>
                <div class="user-name">{{ auth()->user()->name }}</div>
                <div class="user-role">Client</div>
            </div>
        </div>
        <form method="POST" action="{{ route('logout') }}" style="margin-top:8px;">
            @csrf
            <button type="submit" class="nav-link w-full text-left"
                style="background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.4);font-size:13px;">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:16px;height:16px;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                </svg>
                Sign out
            </button>
        </form>
    </div>
</div>
<div id="overlay" onclick="toggleSidebar()"></div>
<div class="main-content">
    <div class="topbar">
        <button onclick="toggleSidebar()" class="menu-btn">☰</button>
        <div class="topbar-title">@yield('page-title', 'Dashboard')</div>
        <div style="display:flex;align-items:center;gap:12px;">
            <a href="{{ route('track.index') }}"
               style="font-size:13px;color:#8b87a8;text-decoration:none;font-weight:500;">
                Track without login →
            </a>
        </div>
    </div>

    <div class="page-body">
        @if(session('success'))
            <div class="flash" style="background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;">
                ✓ {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="flash" style="background:#fef2f2;color:#991b1b;border:1px solid #fecaca;">
                {{ session('error') }}
            </div>
        @endif

        @yield('content')
    </div>
</div>
<script>
    function toggleSidebar() {
        document.querySelector('.sidebar').classList.toggle('open');
        document.getElementById('overlay')?.classList.toggle('active');
    }
</script>
</body>
</html>