{{-- Full company hierarchy tree node (cross-department, recursive up to 4 levels) --}}
@php
    $reports = $allStaff->where('manager_id', $person->id);
    $hasReports = $reports->count() > 0;
    $personColor = $deptColors[$person->department] ?? '#6366f1';
@endphp

<div class="flex flex-col items-center {{ $level > 0 ? 'mt-1' : 'mb-4' }}">
    {{-- Person Card --}}
    <div class="bg-white border rounded-xl p-3 w-48 text-center hover:shadow-md transition-shadow relative" style="border-color: {{ $personColor }}40">
        <div class="flex items-center justify-center mb-1.5">
            <div class="w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold text-white" style="background-color: {{ $personColor }}">
                {{ strtoupper(substr($person->name, 0, 1)) }}
            </div>
        </div>
        <p class="text-xs font-bold text-gray-900 leading-tight">{{ $person->name }}</p>
        <p class="text-[10px] text-gray-500">{{ $person->role ?? '-' }}</p>
        <span class="inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full mt-1" style="background-color: {{ $personColor }}15; color: {{ $personColor }}">
            {{ $person->department ?? '-' }}
        </span>
        <p class="text-[10px] font-semibold mt-0.5 salary-field" style="color: {{ $personColor }}">{{ $person->currency ?? 'PKR' }} {{ number_format($person->salary) }}</p>
        <div class="flex items-center justify-center space-x-1 mt-0.5">
            <span class="w-1.5 h-1.5 rounded-full {{ strtolower($person->status) === 'active' ? 'bg-green-500' : 'bg-amber-500' }}"></span>
            @if($hasReports)
            <span class="text-[10px] text-gray-400">{{ $reports->count() }} report{{ $reports->count() > 1 ? 's' : '' }}</span>
            @endif
        </div>
    </div>

    {{-- Reports below --}}
    @if($hasReports && $level < 4)
    <div class="w-px h-4 bg-gray-300"></div>

    @if($reports->count() <= 4)
    {{-- Few reports: show in a row with connectors --}}
    <div class="relative flex justify-center">
        @if($reports->count() > 1)
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 border-t border-gray-300" style="width: {{ ($reports->count() - 1) * 200 }}px; max-width: 90vw;"></div>
        @endif
    </div>
    <div class="flex flex-wrap justify-center gap-2">
        @foreach($reports as $report)
        <div class="flex flex-col items-center">
            @if($reports->count() > 1)<div class="w-px h-3 bg-gray-300"></div>@endif
            @include('dashboard.org-chart._full-tree-node', ['person' => $report, 'allStaff' => $allStaff, 'deptColors' => $deptColors, 'level' => $level + 1])
        </div>
        @endforeach
    </div>
    @else
    {{-- Many reports (5+): show in a grid instead of one long row --}}
    <div class="relative flex justify-center">
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 border-t border-gray-300" style="width: 80%; max-width: 900px;"></div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 mt-3">
        @foreach($reports as $report)
        <div class="flex flex-col items-center">
            <div class="w-px h-3 bg-gray-300"></div>
            @include('dashboard.org-chart._full-tree-node', ['person' => $report, 'allStaff' => $allStaff, 'deptColors' => $deptColors, 'level' => $level + 1])
        </div>
        @endforeach
    </div>
    @endif
    @elseif($hasReports && $level >= 4)
    <div class="w-px h-3 bg-gray-300"></div>
    <div class="px-2 py-1 bg-gray-100 rounded-full text-[10px] text-gray-500 font-medium">
        +{{ $reports->count() }} more
    </div>
    @endif
</div>