@extends('layouts.app')

@section('title', 'UI Kit')
@section('nav_uikit', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'UI Kit')
@section('page_subtitle', 'Living style guide — the components and class recipes this project actually uses')

@section('content')

@php
    $reservationBadges = [
        'Pending'     => 'bg-amber-50 text-amber-700 border-[0.5px] border-amber-200',
        'Confirmed'   => 'bg-teal-50 text-teal-700 border-[0.5px] border-teal-200',
        'Checked In'  => 'bg-green-50 text-green-700 border-[0.5px] border-green-200',
        'Checked Out' => 'bg-gray-50 text-gray-500 border-[0.5px] border-gray-200',
        'Cancelled'   => 'bg-red-50 text-red-600 border-[0.5px] border-red-200',
        'No Show'     => 'bg-orange-50 text-orange-600 border-[0.5px] border-orange-200',
    ];
    $roomBadges = [
        'Available'    => 'bg-teal-50 text-teal-700 border-[0.5px] border-teal-200',
        'Clean'        => 'bg-green-100 text-green-700 border-[0.5px] border-green-300',
        'Occupied'     => 'bg-teal-700 text-white border-[0.5px] border-teal-700',
        'Dirty'        => 'bg-amber-100 text-amber-700 border-[0.5px] border-amber-300',
        'Maintenance'  => 'bg-orange-100 text-orange-700 border-[0.5px] border-orange-300',
        'Out of Order' => 'bg-red-100 text-red-700 border-[0.5px] border-red-300',
    ];
    $palette = [
        'teal-600 · primary'        => 'bg-teal-600',
        'teal-700 · primary hover'  => 'bg-teal-700',
        'teal-50 · active/soft'     => 'bg-teal-50',
        'amber-500 · pending/dirty' => 'bg-amber-500',
        'green-500 · positive'      => 'bg-green-500',
        'blue-500 · undo/info'      => 'bg-blue-500',
        'orange-500 · warning'      => 'bg-orange-500',
        'red-500 · destructive'     => 'bg-red-500',
        'purple-500 · group'        => 'bg-purple-500',
        'gray-200 · borders'        => 'bg-gray-200',
    ];
@endphp

<div class="space-y-6 max-w-5xl">

    {{-- ===== INTRO ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-600 text-sm leading-relaxed">
            Every sample below is rendered with the exact classes used across NXT-ePMS, with the class recipe underneath for copy-paste.
            Ground rules: <span class="font-semibold text-gray-800">Tailwind v4</span> (no config file — scanning via <code class="text-xs bg-gray-50 border-[0.5px] border-gray-200 rounded px-1 py-0.5">@source</code> in app.css),
            hairline borders (<code class="text-xs bg-gray-50 border-[0.5px] border-gray-200 rounded px-1 py-0.5">border-[0.5px]</code>), teal as the only accent, no gradients or heavy shadows, Alpine.js from CDN.
        </p>
    </div>

    {{-- ===== COLORS ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-4">Color Palette</p>
        <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
            @foreach($palette as $label => $class)
            <div>
                <div class="{{ $class }} h-10 rounded-lg border-[0.5px] border-gray-200"></div>
                <p class="text-[11px] text-gray-500 mt-1.5 leading-tight">{{ $label }}</p>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ===== TYPOGRAPHY ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Typography</p>
        <div class="space-y-3">
            <div>
                <p class="text-2xl font-bold text-gray-900">Page Title</p>
                <code class="text-[11px] text-gray-400">text-2xl font-bold text-gray-900</code>
            </div>
            <div>
                <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Section / Card Label</p>
                <code class="text-[11px] text-gray-400">text-gray-400 text-xs font-semibold uppercase tracking-wider</code>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Tiny Field Label</p>
                <code class="text-[11px] text-gray-400">text-gray-400 text-[10px] uppercase tracking-wider</code>
            </div>
            <div>
                <p class="text-sm text-gray-700">Body text — the default for table cells and paragraphs.</p>
                <code class="text-[11px] text-gray-400">text-sm text-gray-700</code>
            </div>
            <div>
                <p class="text-xs text-gray-400">Muted helper / meta text.</p>
                <code class="text-[11px] text-gray-400">text-xs text-gray-400</code>
            </div>
            <div>
                <p class="text-2xl font-black text-teal-700">₱12,345</p>
                <code class="text-[11px] text-gray-400">text-2xl font-black text-teal-700 — stat numbers; currency via number_format($v, 0)</code>
            </div>
        </div>
    </div>

    {{-- ===== BUTTONS ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Buttons</p>
        <div class="flex flex-wrap items-center gap-3">
            <button type="button" class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">Primary</button>
            <button type="button" class="px-4 py-2.5 text-sm font-medium text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors">Secondary</button>
            <button type="button" class="px-4 py-2.5 text-sm font-semibold text-red-600 bg-red-50 border-[0.5px] border-red-200 hover:bg-red-100 rounded-lg transition-colors">Danger</button>
            <button type="button" class="px-4 py-2.5 text-sm font-semibold text-blue-700 bg-blue-50 border-[0.5px] border-blue-200 hover:bg-blue-100 rounded-lg transition-colors">Undo / Restore</button>
            <button type="button" class="text-xs font-semibold text-teal-600 hover:text-teal-700 transition-colors">Text link →</button>
            <button type="button" disabled class="px-4 py-2.5 text-sm font-semibold bg-gray-100 text-gray-300 rounded-lg cursor-not-allowed">Disabled</button>
        </div>
        <div class="bg-gray-50 border-[0.5px] border-gray-200 rounded-lg p-3 overflow-x-auto">
            <pre class="text-[11px] text-gray-500 leading-relaxed whitespace-pre">Primary   bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition-colors
Secondary text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 (same sizing)
Danger    text-red-600 bg-red-50 border-[0.5px] border-red-200 hover:bg-red-100
Undo      text-blue-700 bg-blue-50 border-[0.5px] border-blue-200 hover:bg-blue-100 — distinct from primary & destructive on purpose</pre>
        </div>
    </div>

    {{-- ===== BADGES ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Status Badges</p>
        <div>
            <p class="text-xs text-gray-500 font-medium mb-2">Reservation statuses</p>
            <div class="flex flex-wrap gap-2">
                @foreach($reservationBadges as $label => $class)
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold {{ $class }}">
                    @if($label === 'Checked In')<span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 animate-pulse"></span>@endif
                    {{ $label }}
                </span>
                @endforeach
            </div>
        </div>
        <div>
            <p class="text-xs text-gray-500 font-medium mb-2">Room statuses</p>
            <div class="flex flex-wrap gap-2">
                @foreach($roomBadges as $label => $class)
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold {{ $class }}">{{ $label }}</span>
                @endforeach
            </div>
        </div>
        <div>
            <p class="text-xs text-gray-500 font-medium mb-2">Special</p>
            <div class="flex flex-wrap gap-2">
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-purple-50 text-purple-700 border-[0.5px] border-purple-200">Group Booking</span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-semibold bg-blue-50 text-blue-700 border-[0.5px] border-blue-200">Charged to Room</span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-semibold bg-green-50 text-green-700 border-[0.5px] border-green-200">GCash</span>
            </div>
        </div>
        <div class="bg-gray-50 border-[0.5px] border-gray-200 rounded-lg p-3 overflow-x-auto">
            <pre class="text-[11px] text-gray-500 whitespace-pre">inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-{color}-50 text-{color}-700 border-[0.5px] border-{color}-200
Rule: badges use border-[0.5px], never ring-1. Live states get the pulsing dot.</pre>
        </div>
    </div>

    {{-- ===== CARDS ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Cards</p>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-4">
                <p class="text-gray-400 text-[10px] uppercase tracking-wider font-semibold">Stat Tile</p>
                <p class="text-2xl font-black text-teal-700 mt-1">42</p>
                <p class="text-gray-400 text-xs mt-1">of 63 total</p>
            </div>
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden sm:col-span-2">
                <div class="px-5 py-3 border-b border-gray-100 bg-gray-50/50">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Card with Header Band</p>
                </div>
                <div class="p-5 text-sm text-gray-600">
                    Body content. Caution: a card with <code class="text-xs bg-gray-50 border-[0.5px] border-gray-200 rounded px-1">overflow-hidden</code> must never contain an Alpine dropdown
                    (it clips) or hold a wide table (wrap the table in <code class="text-xs bg-gray-50 border-[0.5px] border-gray-200 rounded px-1">overflow-x-auto</code> instead).
                </div>
            </div>
        </div>
        <div class="bg-gray-50 border-[0.5px] border-gray-200 rounded-lg p-3 overflow-x-auto">
            <pre class="text-[11px] text-gray-500 whitespace-pre">Card  bg-white border-[0.5px] border-gray-200 rounded-xl p-5
Band  px-5 py-3 border-b border-gray-100 bg-gray-50/50 (apply rounded-t-xl on the band itself if the card can't be overflow-hidden)</pre>
        </div>
    </div>

    {{-- ===== FORMS ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Form Controls</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Text Input</label>
                <input type="text" placeholder="Placeholder"
                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Select</label>
                <select class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    <option>Option one</option>
                    <option>Option two</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Date</label>
                <input type="date" value="{{ today()->toDateString() }}"
                       class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Password + Eye Toggle</label>
                <div class="relative">
                    <input type="password" value="secret123"
                           class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 pr-10 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    <button type="button" class="pw-toggle absolute inset-y-0 right-0 px-3 text-gray-300 hover:text-gray-500 transition-colors" tabindex="-1">
                        <svg class="eye-off w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                        <svg class="eye-on hidden w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    </button>
                </div>
            </div>
            <div class="sm:col-span-2">
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Textarea</label>
                <textarea rows="2" placeholder="Multi-line text…"
                          class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 resize-none"></textarea>
            </div>
            <div class="flex items-center gap-6">
                <label class="flex items-center gap-2.5 cursor-pointer">
                    <input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500">
                    <span class="text-sm text-gray-600 font-medium">Checkbox</span>
                </label>
                <label class="flex items-center gap-2.5 cursor-pointer">
                    <input type="radio" checked class="accent-teal-600">
                    <span class="text-sm text-gray-600 font-medium">Radio</span>
                </label>
            </div>
        </div>
        <div class="bg-gray-50 border-[0.5px] border-gray-200 rounded-lg p-3 overflow-x-auto">
            <pre class="text-[11px] text-gray-500 whitespace-pre">Input  w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400
Rules: CMS checkboxes need a hidden value=0 field before them; field pairs sit in grid grid-cols-1 sm:grid-cols-2 gap-4 (full-width rows get sm:col-span-2)</pre>
        </div>
    </div>

    {{-- ===== ALERTS ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Flash Alerts</p>
        <div class="flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
            <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-teal-700 text-sm font-medium">Success — rendered from session('success').</p>
        </div>
        <div class="flex items-center gap-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl px-5 py-3.5">
            <svg class="w-4 h-4 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            <p class="text-red-700 text-sm font-medium">Error — rendered from session('error'). Views must render both.</p>
        </div>
    </div>

    {{-- ===== TABLE ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-100">
            <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider">Data Table</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full min-w-[560px] text-sm">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Guest</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Room</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                        <th class="px-5 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-gray-50 hover:bg-gray-50/50 transition-colors">
                        <td class="px-5 py-3"><p class="text-gray-700 font-medium">Maria Santos</p><p class="text-gray-400 text-xs">2026-07-000123</p></td>
                        <td class="px-5 py-3 text-gray-500">204 · Deluxe Twin</td>
                        <td class="px-5 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-green-50 text-green-700 border-[0.5px] border-green-200"><span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 animate-pulse"></span>Checked In</span></td>
                        <td class="px-5 py-3 text-right font-semibold text-gray-700">₱1,798</td>
                    </tr>
                    <tr class="hover:bg-gray-50/50 transition-colors">
                        <td class="px-5 py-3"><p class="text-gray-700 font-medium">Jose Reyes</p><p class="text-gray-400 text-xs">2026-07-000124</p></td>
                        <td class="px-5 py-3 text-gray-500">301 · Family Room</td>
                        <td class="px-5 py-3"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-amber-50 text-amber-700 border-[0.5px] border-amber-200">Pending</span></td>
                        <td class="px-5 py-3 text-right font-semibold text-gray-700">₱3,298</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="px-5 py-3 border-t border-gray-100 bg-gray-50/40">
            <code class="text-[11px] text-gray-500">Always: &lt;div class="overflow-x-auto"&gt; wrapper + min-w-[…] on the table. Sort links: request()-&gt;fullUrlWithQuery(['sort' =&gt; …, 'dir' =&gt; …])</code>
        </div>
    </div>

    {{-- ===== DROPDOWN + CONFIRM DIALOG ===== --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
            <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-4">Alpine Dropdown</p>
            <div x-data="{ open: false }" class="relative inline-block">
                <button @click="open = !open" type="button"
                        class="px-4 py-2.5 text-sm font-medium text-gray-600 border-[0.5px] border-gray-200 hover:bg-gray-50 rounded-lg transition-colors inline-flex items-center gap-1.5">
                    Actions
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </button>
                <div x-show="open" x-cloak @click.outside="open = false"
                     class="absolute left-0 mt-1 w-44 bg-white border border-gray-100 rounded-lg shadow-lg py-1 z-50">
                    <a href="#" class="block px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">Edit</a>
                    <a href="#" class="block px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">Duplicate</a>
                    <a href="#" class="block px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">Delete</a>
                </div>
            </div>
            <p class="text-xs text-gray-400 mt-4">x-data + x-show + x-cloak + @click.outside. Never place inside an overflow-hidden card.</p>
        </div>

        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
            <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-4">Global Confirm Dialog</p>
            <div class="flex flex-wrap gap-3">
                <form method="GET" action="{{ route('ui-kit') }}" data-confirm="Proceed with this action?">
                    <button type="submit" class="px-4 py-2.5 text-sm font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">Normal confirm</button>
                </form>
                <form method="GET" action="{{ route('ui-kit') }}" data-confirm="Delete this? This cannot be undone." data-danger="true">
                    <button type="submit" class="px-4 py-2.5 text-sm font-semibold text-red-600 bg-red-50 border-[0.5px] border-red-200 hover:bg-red-100 rounded-lg transition-colors">Danger confirm</button>
                </form>
            </div>
            <p class="text-xs text-gray-400 mt-4">Add <code class="bg-gray-50 border-[0.5px] border-gray-200 rounded px-1">data-confirm="…"</code> (+ <code class="bg-gray-50 border-[0.5px] border-gray-200 rounded px-1">data-danger="true"</code>) to the <span class="font-semibold">form</span>, never the button. These demo buttons just reload this page.</p>
        </div>
    </div>

    {{-- ===== EMPTY STATE ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-2">Empty State</p>
        <div class="px-5 py-10 text-center">
            <svg class="w-10 h-10 text-gray-100 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
            </svg>
            <p class="text-gray-300 text-sm">Nothing here yet. Add the first one above.</p>
        </div>
        <code class="text-[11px] text-gray-400">Icon: w-10 h-10 text-gray-100 · Text: text-gray-300 text-sm · centered, py-10+</code>
    </div>

    {{-- ===== MOBILE RECIPES ===== --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-3">Mobile-Responsive Recipes</p>
        <div class="bg-gray-50 border-[0.5px] border-gray-200 rounded-lg p-3 overflow-x-auto">
            <pre class="text-[11px] text-gray-500 leading-relaxed whitespace-pre">Page header      flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between
Button/filter row  add flex-wrap; date inputs get flex-1 min-w-0
Stat grid        grid grid-cols-1 sm:grid-cols-4 (or grid-cols-2 sm:… for tiny tiles)
Field pairs      grid grid-cols-1 sm:grid-cols-2 gap-4 · full-width rows: sm:col-span-2 (never unprefixed!)
Wide table       &lt;div class="overflow-x-auto"&gt;&lt;table class="w-full min-w-[640px]"&gt;
Tab strips       add overflow-x-auto so tabs scroll instead of clipping
Pasted iframes   wrapper gets [&amp;&gt;iframe]:w-full [&amp;&gt;iframe]:h-full</pre>
        </div>
    </div>

</div>

<script>
document.querySelectorAll('.pw-toggle').forEach(function(btn) {
    btn.addEventListener('click', function() {
        var input = btn.previousElementSibling;
        var isText = input.type === 'text';
        input.type = isText ? 'password' : 'text';
        btn.querySelector('.eye-off').classList.toggle('hidden', !isText);
        btn.querySelector('.eye-on').classList.toggle('hidden', isText);
    });
});
</script>

@endsection