{{-- Inner content of one organogram node (icon + name + role + compliance chip). --}}
@php
  $role = auth()->user()->primaryRole();
  $pct = $node['compliance'];
  $isHome = $node['type'] === 'home';
  $chip = $node['total'] == 0 ? 'bg-surface-container-high text-outline'
        : ($node['overdue'] > 0 ? 'bg-error-container text-error'
        : ($pct >= 100 ? 'bg-primary/10 text-primary' : 'bg-gold/20 text-on-surface'));
  $bar = $node['overdue'] > 0 ? 'bg-error' : ($pct >= 100 ? 'bg-primary' : 'bg-gold');
  $icon = match ($isHome ? 'home' : ($node['role_key'] ?? '')) {
    'ceo' => 'workspace_premium', 'coo' => 'manage_accounts', 'head_of_operations' => 'hub',
    'registered_manager' => 'supervisor_account', 'service_manager' => 'badge', 'home' => 'cottage',
    default => 'person',
  };
@endphp
<span class="material-symbols-outlined text-[20px] {{ $isHome ? 'text-primary' : 'text-secondary' }} shrink-0">{{ $icon }}</span>
<div class="min-w-0 flex-1 flex items-baseline gap-1.5 truncate">
  @if($isHome)
    <a href="{{ route($role . '.compliance.index', ['service' => $node['service_id']]) }}" class="font-semibold text-on-surface hover:text-primary truncate">{{ $node['name'] }}</a>
  @else
    <span class="font-semibold text-on-surface truncate">{{ $node['name'] }}</span>
  @endif
  <span class="text-label-md font-label-md text-outline whitespace-nowrap">{{ $node['role'] }}</span>
</div>
<div class="flex items-center gap-2 shrink-0">
  @if($node['overdue'] > 0)
    <span class="text-label-md font-label-md px-2 py-0.5 rounded-full bg-error-container text-error whitespace-nowrap">{{ $node['overdue'] }} overdue</span>
  @endif
  <div class="w-20 h-1.5 bg-surface-container-high rounded-full overflow-hidden hidden md:block">
    <div class="h-full {{ $bar }} rounded-full" style="width: {{ $pct }}%"></div>
  </div>
  <span class="text-label-md font-label-md px-2 py-0.5 rounded-full min-w-[46px] text-center {{ $chip }}">{{ $node['total'] == 0 ? 'n/a' : $node['compliance'] . '%' }}</span>
</div>