{{-- Dashboard mockup using pure CSS/HTML --}}
<div class="p-5 font-mono text-xs">
    {{-- Top bar --}}
    <div class="flex items-center justify-between mb-4">
        <div class="text-graphite-400">Dashboard — All Outlets</div>
        <div class="flex gap-2">
            <div class="bg-teal-600/20 text-teal-400 px-2 py-0.5 rounded text-2xs">Live</div>
            <div class="bg-graphite-800 text-graphite-400 px-2 py-0.5 rounded text-2xs">Today</div>
        </div>
    </div>

    {{-- Stat cards --}}
    <div class="grid grid-cols-4 gap-3 mb-4">
        @foreach([
            ['Revenue', '₹1,84,250', '+12%', 'text-emerald-400'],
            ['Orders',  '1,024',     '+8%',  'text-teal-400'],
            ['Avg Ticket', '₹360',   '+4%',  'text-amber-400'],
            ['Outlets',   '14/14',   'Live', 'text-graphite-300'],
        ] as [$label, $value, $delta, $color])
        <div class="bg-graphite-800/60 rounded-lg p-3">
            <div class="text-graphite-500 text-2xs mb-1">{{ $label }}</div>
            <div class="font-bold text-sm {{ $color }}">{{ $value }}</div>
            <div class="text-2xs text-graphite-500 mt-0.5">{{ $delta }}</div>
        </div>
        @endforeach
    </div>

    {{-- Chart placeholder --}}
    <div class="bg-graphite-800/40 rounded-lg p-3 mb-4">
        <div class="text-graphite-500 text-2xs mb-2">Hourly revenue — today vs. yesterday</div>
        <div class="flex items-end gap-1 h-14">
            @foreach([40, 55, 70, 60, 85, 90, 75, 100, 95, 80, 65, 50] as $h)
            <div class="flex-1 bg-teal-600/30 rounded-sm relative">
                <div class="absolute bottom-0 left-0 right-0 bg-teal-500 rounded-sm"
                     style="height: {{ $h }}%"></div>
            </div>
            @endforeach
        </div>
        <div class="flex justify-between mt-1 text-2xs text-graphite-600">
            <span>8am</span><span>12pm</span><span>4pm</span><span>8pm</span>
        </div>
    </div>

    {{-- Outlet table --}}
    <div class="bg-graphite-800/40 rounded-lg overflow-hidden">
        <div class="flex text-2xs text-graphite-500 px-3 py-2 border-b border-graphite-700">
            <span class="flex-1">Outlet</span>
            <span class="w-20 text-right">Revenue</span>
            <span class="w-16 text-right">Orders</span>
            <span class="w-12 text-right">Status</span>
        </div>
        @foreach([
            ['MG Road',     '₹28,400', '142', 'Open'],
            ['Koramangala', '₹22,100', '118', 'Open'],
            ['Whitefield',  '₹19,600', '94',  'Open'],
        ] as [$name, $rev, $ord, $status])
        <div class="flex text-2xs px-3 py-2 border-b border-graphite-700/50 hover:bg-graphite-700/20">
            <span class="flex-1 text-graphite-300">{{ $name }}</span>
            <span class="w-20 text-right text-emerald-400">{{ $rev }}</span>
            <span class="w-16 text-right text-graphite-400">{{ $ord }}</span>
            <span class="w-12 text-right text-teal-400">{{ $status }}</span>
        </div>
        @endforeach
    </div>
</div>