<div class="space-y-6">
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Visible Engagements</div><div class="mt-2 text-3xl font-semibold">{{ overview.engagement_count }}</div></div>
    <div class="af-metric-card border-red-200 bg-red-50"><div class="text-xs font-semibold uppercase text-red-700">SLA Breached</div><div class="mt-2 text-3xl font-semibold text-red-700">{{ overview.sla_breached_count }}</div></div>
    <div class="af-metric-card border-amber-200 bg-amber-50"><div class="text-xs font-semibold uppercase text-amber-700">SLA Warning</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ overview.sla_warning_count }}</div></div>
    <div class="af-metric-card border-violet-200 bg-violet-50"><div class="text-xs font-semibold uppercase text-violet-700">Heavy Capacity</div><div class="mt-2 text-3xl font-semibold text-violet-700">{{ overview.heavy_capacity_count }}</div></div>
  </section>

  <section class="af-card overflow-x-auto">
    <div class="mb-4 flex items-center justify-between"><div><h3 class="text-lg font-semibold text-slate-900">Engagement Capacity Plan</h3><p class="text-sm text-slate-500">Derived from open task weight, review load and overdue work. Existing assignments remain unchanged.</p></div><a href="/manager/work" class="af-btn af-btn-primary">Assign / Reassign</a></div>
    <table class="min-w-full text-sm"><thead><tr class="border-b text-left text-xs uppercase text-slate-500"><th class="px-3 py-2">Team Member</th><th class="px-3 py-2">Engagements</th><th class="px-3 py-2">Open Tasks</th><th class="px-3 py-2">Weighted Load</th><th class="px-3 py-2">Review</th><th class="px-3 py-2">Overdue</th><th class="px-3 py-2">Capacity</th></tr></thead><tbody>{% for row in capacity_rows %}<tr class="border-b border-slate-100"><td class="px-3 py-3 font-semibold">{{ row.name }}</td><td class="px-3 py-3">{{ row.engagement_count }}</td><td class="px-3 py-3">{{ row.open_tasks }}</td><td class="px-3 py-3">{{ row.open_weight }}</td><td class="px-3 py-3">{{ row.review }}</td><td class="px-3 py-3">{{ row.overdue }}</td><td class="px-3 py-3"><span class="rounded-full px-2 py-1 text-xs font-semibold {% if row.load_status == 'Heavy' %}bg-red-100 text-red-700{% elif row.load_status == 'Balanced' %}bg-emerald-100 text-emerald-700{% else %}bg-blue-100 text-blue-700{% endif %}">{{ row.load_status }}</span></td></tr>{% else %}<tr><td colspan="7" class="px-3 py-8 text-center text-slate-500">No visible workload.</td></tr>{% endfor %}</tbody></table>
  </section>

  <section class="af-card overflow-x-auto"><div class="mb-4"><h3 class="text-lg font-semibold text-slate-900">Engagement Team &amp; Weighted Progress</h3><p class="text-sm text-slate-500">One row per engagement using existing Partner, Manager, Staff and Review Partner assignments.</p></div>
    <table class="min-w-full text-sm"><thead><tr class="border-b text-left text-xs uppercase text-slate-500"><th class="px-3 py-2">Engagement</th><th class="px-3 py-2">Team</th><th class="px-3 py-2">Progress</th><th class="px-3 py-2">SLA</th><th class="px-3 py-2">Status</th></tr></thead><tbody>{% for row in advanced_engagements %}<tr class="border-b border-slate-100"><td class="px-3 py-3"><a class="font-semibold text-brand-700" href="{{ row.href }}">{{ row.client_name }} — {{ row.service_name }}</a><div class="text-xs text-slate-500">{{ row.financial_year }}</div></td><td class="px-3 py-3 text-xs"><div>Staff: {{ row.staff_name }}</div><div>Manager: {{ row.manager_name }}</div><div>Partner: {{ row.partner_name }}</div></td><td class="px-3 py-3"><div class="font-semibold">{{ row.progress_percent }}%</div><div class="mt-1 h-1.5 w-32 overflow-hidden rounded-full bg-slate-100"><div class="h-full bg-brand-600" style="width: {{ row.progress_percent }}%"></div></div><div class="mt-1 text-xs text-slate-500">{{ row.completed_weight }}/{{ row.total_weight }} weighted</div></td><td class="px-3 py-3"><span class="text-xs font-semibold {% if row.sla.status == 'breached' %}text-red-700{% elif row.sla.status in ['critical','warning'] %}text-amber-700{% else %}text-emerald-700{% endif %}">{{ row.sla.label }}</span><div class="text-xs text-slate-500">Age {{ row.sla.age_days }} day(s)</div></td><td class="px-3 py-3"><span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold">{{ row.status.replace('_',' ').title() }}</span></td></tr>{% endfor %}</tbody></table>
  </section>
</div>
