{{-- Recursive person tree node --}}
@php
    $reports = $allStaff->where('manager_id', $person->id);
    $isLead = $reports->count() > 0;
@endphp

<div class="flex flex-col items-center mb-6">
    {{-- Leader Card (larger if has reports) --}}
    @if($isLead)
    <div class="bg-white border-2 rounded-xl p-4 w-52 text-center hover:shadow-lg transition-shadow" style="border-color: {{ $color }}40; background: linear-gradient(135deg, {{ $color }}08, white)">
        <div class="flex items-center justify-center space-x-2 mb-2">
            <div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white" style="background-color: {{ $color }}">
                {{ strtoupper(substr($person->name, 0, 1)) }}
            </div>
        </div>
        <p class="text-sm font-bold text-gray-900">{{ $person->name }}</p>
        <div class="flex items-center justify-center space-x-1 mt-0.5">
            <span class="px-1.5 py-0.5 text-xs font-semibold rounded text-white" style="background-color: {{ $color }}">LEAD</span>
            <span class="w-1.5 h-1.5 rounded-full {{ $person->status === 'Active' ? 'bg-green-500' : 'bg-red-500' }}"></span>
        </div>
        <p class="text-xs text-gray-500 mt-1">{{ $person->role ?? '-' }}</p>
        <p class="text-xs font-semibold mt-1" style="color: {{ $color }}">{{ $person->currency ?? 'PKR' }} {{ number_format($person->salary) }}</p>
        <p class="text-xs text-gray-400">{{ $reports->count() }} reports</p>
    </div>
    @else
    @include('dashboard.org-chart._person-card', ['person' => $person, 'color' => $color])
    @endif

    {{-- Reports --}}
    @if($isLead)
    {{-- Connector line --}}
    <div class="w-px h-6 bg-gray-300"></div>

    {{-- Check if any reports also have sub-reports --}}
    @php
        $reportsWithSubs = $reports->filter(fn($r) => $allStaff->where('manager_id', $r->id)->count() > 0);
        $reportsWithoutSubs = $reports->filter(fn($r) => $allStaff->where('manager_id', $r->id)->count() === 0);
    @endphp

    {{-- Sub-leaders (recursive) --}}
    @foreach($reportsWithSubs as $subLeader)
        @if($level < 3)
        @include('dashboard.org-chart._person-tree', ['person' => $subLeader, 'allStaff' => $allStaff, 'color' => $color, 'level' => $level + 1])
        @endif
    @endforeach

    {{-- Leaf reports (grid) --}}
    @if($reportsWithoutSubs->count() > 0)
    <div class="flex flex-wrap justify-center gap-3 mt-2">
        @foreach($reportsWithoutSubs as $report)
        @include('dashboard.org-chart._person-card', ['person' => $report, 'color' => $color])
        @endforeach
    </div>
    @endif
    @endif
</div>