{{-- Week Skeleton – gleiche Struktur wie echte Wochenansicht --}}
@php $cellPx = 48; $totalPx = 24 * $cellPx; @endphp
<div class="animate-pulse">

    {{-- Tagesspalten-Header (identisch zu week-canvas: flex mit w-12 spacer + 7 flex-1) --}}
    <div class="flex border-b border-gray-100">
        <div class="w-12 shrink-0"></div>
        @for($i = 0; $i < 7; $i++)
            <div class="flex-1 py-2 flex flex-col items-center {{ $i > 0 ? 'border-l border-gray-100' : '' }}">
                <div class="h-2.5 w-6 bg-gray-100 rounded mb-1.5"></div>
                <div class="w-7 h-7 bg-gray-100 rounded-full"></div>
            </div>
        @endfor
    </div>

    {{-- Scroll-Bereich --}}
    <div class="overflow-y-auto" style="max-height: 560px">
        <div class="flex" style="min-height: {{ $totalPx }}px">

            {{-- Zeit-Labels (w-12 wie echt) --}}
            <div class="w-12 shrink-0 relative" style="height: {{ $totalPx }}px">
                @for($h = 0; $h < 24; $h++)
                    <div class="absolute right-2 -translate-y-2" style="top: {{ $h * $cellPx }}px">
                        <div class="h-2 w-8 bg-gray-100 rounded"></div>
                    </div>
                @endfor
            </div>

            {{-- 7 Tagesspalten (flex-1 wie echt) --}}
            @for($col = 0; $col < 7; $col++)
                <div class="flex-1 border-l border-gray-100 relative" style="height: {{ $totalPx }}px">

                    {{-- Stunden-Linien --}}
                    @for($h = 0; $h < 24; $h++)
                        <div class="absolute left-0 right-0 border-b border-gray-50 pointer-events-none"
                             style="top: {{ $h * $cellPx }}px; height: {{ $cellPx }}px"></div>
                    @endfor

                    {{-- Fake Events (verteilt über verschiedene Spalten & Zeiten) --}}
                    @if($col === 0)
                        <div class="absolute rounded-md mx-1" style="top: {{ 9 * $cellPx }}px; height: {{ 1.5 * $cellPx }}px; left: 2px; right: 4px; background: #EEF2FF; border-left: 2px solid #C7D2FE;"></div>
                    @endif
                    @if($col === 1)
                        <div class="absolute rounded-md mx-1" style="top: {{ 10 * $cellPx }}px; height: {{ 2 * $cellPx }}px; left: 2px; right: 4px; background: #ECFDF5; border-left: 2px solid #A7F3D0;"></div>
                    @endif
                    @if($col === 2)
                        <div class="absolute rounded-md mx-1" style="top: {{ 14 * $cellPx }}px; height: {{ 1 * $cellPx }}px; left: 2px; right: 4px; background: #EEF2FF; border-left: 2px solid #C7D2FE;"></div>
                    @endif
                    @if($col === 3)
                        <div class="absolute rounded-md mx-1" style="top: {{ 8 * $cellPx }}px; height: {{ 1 * $cellPx }}px; left: 2px; right: 4px; background: #ECFDF5; border-left: 2px solid #A7F3D0;"></div>
                        <div class="absolute rounded-md mx-1" style="top: {{ 13 * $cellPx }}px; height: {{ 1.5 * $cellPx }}px; left: 2px; right: 4px; background: #EEF2FF; border-left: 2px solid #C7D2FE;"></div>
                    @endif
                    @if($col === 5)
                        <div class="absolute rounded-md mx-1" style="top: {{ 11 * $cellPx }}px; height: {{ 1 * $cellPx }}px; left: 2px; right: 4px; background: #ECFDF5; border-left: 2px solid #A7F3D0;"></div>
                    @endif
                    @if($col === 6)
                        <div class="absolute rounded-md mx-1" style="top: {{ 15 * $cellPx }}px; height: {{ 2 * $cellPx }}px; left: 2px; right: 4px; background: #EEF2FF; border-left: 2px solid #C7D2FE;"></div>
                    @endif
                </div>
            @endfor

        </div>
    </div>
</div>
