{{-- KDS screen mockup --}}
<div class="kds-screen p-4 font-mono text-xs min-h-[280px]">
    <div class="flex items-center justify-between mb-4">
        <div class="text-graphite-300 font-bold">Kitchen Display — Hot Counter</div>
        <div class="text-2xs text-graphite-600">{{ now()->format('h:i A') }}</div>
    </div>
    <div class="grid grid-cols-3 gap-3">
        @php
        $tickets = [
            ['T7', '8 min', 'urgent', ['Paneer Butter Masala', 'Dal Makhani × 2', 'Naan × 4']],
            ['T3', '3 min', 'new',    ['Veg Biryani', 'Raita', 'Papad']],
            ['T11','12 min','ready',  ['Chicken Curry', 'Roti × 3']],
        ];
        @endphp
        @foreach($tickets as [$table, $time, $status, $items])
        @php
        $border = $status === 'urgent' ? 'border-red-600/70' : ($status === 'ready' ? 'border-emerald-500/70' : 'border-teal-600/70');
        $badge  = $status === 'urgent' ? 'bg-red-600 text-white' : ($status === 'ready' ? 'bg-emerald-600 text-white' : 'bg-teal-600 text-white');
        @endphp
        <div class="rounded-lg border {{ $border }} p-3 bg-graphite-900/60">
            <div class="flex items-center justify-between mb-2">
                <span class="font-bold text-white text-sm">{{ $table }}</span>
                <span class="text-2xs {{ $badge }} px-1.5 py-0.5 rounded">{{ $time }}</span>
            </div>
            <ul class="space-y-1">
                @foreach($items as $item)
                <li class="text-2xs text-graphite-300 flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span>
                    {{ $item }}
                </li>
                @endforeach
            </ul>
            <button class="mt-3 w-full bg-graphite-800 hover:bg-teal-600 text-graphite-300 hover:text-white
                           py-1 rounded text-2xs transition-colors">
                Mark Done
            </button>
        </div>
        @endforeach
    </div>
</div>