<div class="space-y-6">
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
    <a href="/manager/dashboard?tab=team-work" class="af-metric-card"><div class="text-xs font-semibold uppercase text-slate-500">Open Tasks</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ overview.open_task_count }}</div><div class="mt-1 text-xs text-slate-500">Visible team work</div></a>
    <a href="/manager/dashboard?tab=team-work" class="af-metric-card border-orange-200 bg-orange-50"><div class="text-xs font-semibold uppercase text-orange-700">Unassigned</div><div class="mt-2 text-3xl font-semibold text-orange-700">{{ overview.unassigned_count }}</div><div class="mt-1 text-xs text-orange-700">Allocate first</div></a>
    <a href="/manager/dashboard?tab=team-work" class="af-metric-card border-blue-200 bg-blue-50"><div class="text-xs font-semibold uppercase text-blue-700">In Progress</div><div class="mt-2 text-3xl font-semibold text-blue-700">{{ overview.in_progress_count }}</div><div class="mt-1 text-xs text-blue-700">Being worked</div></a>
    <a href="/manager/dashboard?tab=client-pending" class="af-metric-card border-amber-200 bg-amber-50"><div class="text-xs font-semibold uppercase text-amber-700">Client Pending</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ overview.client_pending_count }}</div><div class="mt-1 text-xs text-amber-700">Needs follow-up</div></a>
    <a href="/manager/dashboard?tab=review-queue" class="af-metric-card border-emerald-200 bg-emerald-50"><div class="text-xs font-semibold uppercase text-emerald-700">Review Queue</div><div class="mt-2 text-3xl font-semibold text-emerald-700">{{ overview.review_pending_count }}</div><div class="mt-1 text-xs text-emerald-700">Review-ready</div></a>
    <a href="/manager/dashboard?tab=escalations" class="af-metric-card border-red-200 bg-red-50"><div class="text-xs font-semibold uppercase text-red-700">Escalations</div><div class="mt-2 text-3xl font-semibold text-red-700">{{ overview.escalation_count }}</div><div class="mt-1 text-xs text-red-700">Combined risk items</div></a>
  </section>

  <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
    <div class="af-card">
      <div class="mb-4 flex items-center justify-between gap-3">
        <div><h3 class="text-lg font-semibold text-slate-900">Attention Required</h3><p class="text-sm text-slate-500">Unassigned, overdue and client-pending work.</p></div>
        <a href="/manager/work" class="af-btn af-btn-primary">Open Work Board</a>
      </div>
      {% set rows = (unassigned + overdue + client_pending)[:12] %}
      {% include 'modules/manager_dashboard/templates/manager_dashboard/partials/_task_table.html' %}
    </div>
    <div class="space-y-4">
      <div class="af-card"><h3 class="font-semibold text-slate-900">Team Snapshot</h3><div class="mt-4 grid grid-cols-2 gap-3 text-sm"><div class="rounded-2xl bg-slate-50 p-3"><div class="text-xs text-slate-500">Staff visible</div><div class="text-2xl font-semibold">{{ overview.staff_count }}</div></div><div class="rounded-2xl bg-slate-50 p-3"><div class="text-xs text-slate-500">Clients visible</div><div class="text-2xl font-semibold">{{ overview.client_count }}</div></div><div class="rounded-2xl bg-slate-50 p-3"><div class="text-xs text-slate-500">Due today</div><div class="text-2xl font-semibold">{{ overview.due_today_count }}</div></div><div class="rounded-2xl bg-slate-50 p-3"><div class="text-xs text-slate-500">Due week</div><div class="text-2xl font-semibold">{{ overview.due_week_count }}</div></div></div></div>
      <div class="af-card"><h3 class="font-semibold text-slate-900">Quick Actions</h3><div class="mt-4 grid gap-2"><a href="/manager/work" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Task Assignment Wizard</a><a href="/manager/dashboard?tab=review-queue" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Review Wizard</a><a href="/manager/dashboard?tab=client-pending" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Client Query Wizard</a><a href="/documents" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Document Checklist</a><a href="/manager/dashboard?tab=due-calendar" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Due Calendar</a><a href="/manager/dashboard?tab=escalations" class="rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold hover:bg-slate-50">Escalation Register</a></div></div>
    </div>
  </section>
</div>
