@php
    $healthStatus = $systemHealth['overall_status'] ?? 'healthy';
    $statusColor = match($healthStatus) {
        'healthy' => 'bg-green-100 text-green-700',
        'degraded' => 'bg-amber-100 text-amber-700',
        'critical' => 'bg-red-100 text-red-700',
        default => 'bg-slate-100 text-slate-700'
    };
    $statusLabel = ucfirst($healthStatus);
@endphp

<!-- Health Grid -->
<div class="flex items-center justify-between mb-4">
    <h3 class="text-sm font-semibold text-slate-900">Overall Status</h3>
    <span class="px-2 py-1 rounded-full text-xs font-semibold {{ $statusColor }}">
        {{ $statusLabel }}
    </span>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
    <div class="rounded-lg bg-slate-50 p-3 border border-slate-200">
        <p class="text-xs text-slate-600 font-medium">Queues</p>
        <p class="mt-1 text-lg font-bold text-slate-900">{{ $systemHealth['queues_pending'] ?? 0 }}</p>
        <p class="text-xs text-slate-500 mt-1">jobs pending</p>
    </div>
    <div class="rounded-lg bg-slate-50 p-3 border border-slate-200">
        <p class="text-xs text-slate-600 font-medium">Errors (24h)</p>
        <p class="mt-1 text-lg font-bold text-slate-900">{{ $systemHealth['errors_24h'] ?? 0 }}</p>
        <p class="text-xs text-slate-500 mt-1">recent issues</p>
    </div>
    <div class="rounded-lg bg-slate-50 p-3 border border-slate-200">
        <p class="text-xs text-slate-600 font-medium">Reports</p>
        <p class="mt-1 text-lg font-bold text-slate-900">{{ $systemHealth['open_reports'] ?? 0 }}</p>
        <p class="text-xs text-slate-500 mt-1">awaiting review</p>
    </div>
</div>