{{-- One box card: icon + name + designation on the left, 3 values on the right. --}}
@php
  $role = auth()->user()->primaryRole();
  $type = $node['type'];
  $pct = $node['compliance'];
  $none = $node['total'] == 0;
  $accent = $none ? '#8A9199' : ($node['overdue'] > 0 ? '#C1473A' : ($pct >= 100 ? '#0E7C7B' : '#B08D57'));
  $flag = ! $none && $pct < 80; // non-compliant when below 80%
  $showToggle = ($showToggle ?? false) && ! empty($node['children']);
  $icon = match ($type === 'home' ? '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
<div class="org-box" style="--accent: {{ $accent }}">
  @if($flag)
    <span class="org-flag"><span class="material-symbols-outlined">flag</span> Non-Compliant</span>
  @endif
  <div class="org-box-main">
    <span class="material-symbols-outlined text-[26px] shrink-0" style="color: {{ $accent }}">{{ $icon }}</span>
    <div class="min-w-0">
      @if($type === 'home')
        <a href="{{ route($role . '.compliance.index', ['service' => $node['service_id']]) }}" class="org-name hover:text-primary">{{ $node['name'] }}</a>
      @else
        <span class="org-name">{{ $node['name'] }}</span>
      @endif
      <span class="org-role">{{ $node['role'] }}</span>
    </div>
  </div>
  <div class="org-box-stats">
    <span class="org-pct" style="color: {{ $accent }}">{{ $none ? 'n/a' : $node['compliance'] . '%' }}</span>
    @if($none)
      <span class="org-sub">no courses</span>
    @else
      <span class="org-sub">{{ $node['completed'] }}/{{ $node['total'] }} done</span>
      @if($node['overdue'] > 0)
        <span class="org-sub-error">{{ $node['overdue'] }} overdue</span>
      @else
        <span class="org-sub">0 overdue</span>
      @endif
    @endif
  </div>
  @if($showToggle)
    <button type="button" class="org-toggle" aria-label="Toggle branch"><span class="material-symbols-outlined text-[16px] text-outline">expand_more</span></button>
  @endif
</div>