<div class="flex" style="min-height: {{ $totalPx }}px">

    {{-- Zeit-Labels --}}
    <div class="w-12 shrink-0 relative" style="height: {{ $totalPx }}px">
        @for($h = $hourStart; $h <= $hourEnd; $h++)
            <div class="absolute right-2 text-[10px] text-gray-300 -translate-y-2"
                 style="top: {{ ($h - $hourStart) * $cellPx }}px">
                @if($h < $hourEnd)
                    {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00
                @endif
            </div>
        @endfor
    </div>

    {{-- ── 7 Tagesspalten ── --}}
    @foreach($weekDays as $colIndex => $day)
        @php
            $dayStr    = $day->toDateString();
            $isToday   = $dayStr === $today;
            $dayEvents = $eventsByDay[$colIndex] ?? collect();
        @endphp

        <div class="flex-1 border-l border-gray-100 relative"
             style="height: {{ $totalPx }}px"
             x-on:dragover="onDragOver($event)"
             x-on:dragleave="onDragLeave($event)"
             x-on:drop="onDrop($event, '{{ $dayStr }}')"
             x-on:dblclick.self="onCreateAt($event, '{{ $dayStr }}')"
             x-on:click.self="focusedEventId = null">

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

            {{-- 15-Minuten-Linien (sehr subtil) --}}
            @for($h = $hourStart; $h < $hourEnd; $h++)
                @for($q = 1; $q <= 3; $q++)
                    <div class="absolute left-0 right-0 pointer-events-none"
                         style="top: {{ ($h - $hourStart) * $cellPx + $q * ($cellPx / 4) }}px;
                                        border-top: 1px {{ $q === 2 ? 'dashed #f3f4f6' : 'solid #fafafa' }};"></div>
                @endfor
            @endfor

            {{-- Jetzt-Linie --}}
            @if($isToday)
                @php $nowPx = ($nowLocal->hour + $nowLocal->minute / 60 - $hourStart) * $cellPx; @endphp
                <div class="absolute left-0 right-0 z-20 pointer-events-none flex items-center"
                     style="top: {{ $nowPx }}px">
                    <div class="w-2 h-2 rounded-full bg-indigo-500 shrink-0 -ml-1"></div>
                    <div class="flex-1 border-t-2 border-indigo-500"></div>
                </div>
            @endif

            {{-- Events (timed; ganztägige werden oben im All-Day-Stripe gezeigt) --}}
            @foreach($dayEvents as $event)
                @php
                    $startLocal = $event->starts_local;
                    $endLocal   = $event->ends_local ?? $startLocal->copy()->addHour();

                    // Jeder Tag zeigt denselben Zeitslot (Original-Uhrzeit)
                    $startDec = $startLocal->hour + $startLocal->minute / 60;
                    $endDec   = min($endLocal->hour + $endLocal->minute / 60, 24);

                    $topPx    = ($startDec - $hourStart) * $cellPx;
                    $heightPx = max(($endDec - $startDec) * $cellPx - 2, $cellPx / 4);

                    [$bg, $border, $text] = $resolveColor($event->color);

                    // Stacking: depth=0 → volle Breite, depth>0 → links eingerückt
                    $layout   = $layoutsByDay[$colIndex][$event->id] ?? ['depth' => 0];
                    $depth    = $layout['depth'];
                    $leftPx   = $depth * 12 + 2;   // 12 px Offset pro Ebene
                    $zBase    = 10 + $depth;

                    $endsHere = $endLocal->toDateString() === $dayStr;
                @endphp

                <div class="absolute rounded-md px-2 py-0.5 text-xs cursor-grab overflow-hidden transition-all duration-150"
                     style="top: {{ $topPx }}px; height: {{ $heightPx }}px;
                                    left: {{ $leftPx }}px; right: 4px;
                                    background: {{ $bg }}; border-left: 2px solid {{ $border }}; color: {{ $text }};
                                    z-index: {{ $zBase }};"
                     draggable="true"
                     data-grab-date="{{ $dayStr }}"
                     wire:key="ev-{{ $event->id }}-{{ $dayStr }}"
                     x-bind:class="{
                                     'pointer-events-none': draggingId && draggingId !== '{{ $event->id }}'
                                 }"
                     x-bind:style="focusedEventId === '{{ $event->id }}' ? { zIndex: 50, boxShadow: '0 4px 16px rgba(0,0,0,0.18)' } : {}"
                     x-on:click.stop="focusedEventId = (focusedEventId === '{{ $event->id }}' ? null : '{{ $event->id }}')"
                     x-on:dblclick.stop="$wire.openSidebar('{{ $event->id }}', '{{ $dayStr }}')"
                     x-on:dragstart="onDragStart($event, '{{ $event->id }}')"
                     x-on:dragend="onDragEnd($event)">

                    <div class="flex items-center gap-1 pointer-events-none">
                        <div class="font-medium truncate leading-tight flex-1" style="font-size: 11px">
                            {{ $event->title }}
                        </div>
                        @if($event->recurrence)
                            <svg style="width:10px;height:10px;opacity:0.6;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                                <path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 014-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 01-4 4H3"/>
                            </svg>
                        @endif
                    </div>

                    @if($heightPx >= 28)
                        <div class="leading-tight opacity-60 pointer-events-none" style="font-size: 10px" data-time-display>
                            {{ $startLocal->format('H:i') }}
                            @if($event->ends_local) – {{ $endLocal->format('H:i') }} @endif
                        </div>
                    @endif

                    {{-- Resize-Handle nur am letzten Tag --}}
                    @if($endsHere)
                        <div class="absolute bottom-0 left-0 right-0 flex items-center justify-center cursor-ns-resize"
                             style="height: 8px"
                             x-on:mousedown.stop="onResizeStart($event, '{{ $event->id }}')">
                            <div class="w-5 rounded-full opacity-40 pointer-events-none" style="height: 2px; background: {{ $border }}"></div>
                        </div>
                    @endif
                </div>

            @endforeach
        </div>
    @endforeach

</div>
