<div class="space-y-6">
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="af-metric-card border-amber-200 bg-amber-50"><div class="text-xs font-semibold uppercase text-amber-700">Due Today</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ overview.due_today_count }}</div><div class="mt-1 text-xs text-amber-700">Must be controlled today</div></div>
    <div class="af-metric-card border-blue-200 bg-blue-50"><div class="text-xs font-semibold uppercase text-blue-700">Due This Week</div><div class="mt-2 text-3xl font-semibold text-blue-700">{{ overview.due_week_count }}</div><div class="mt-1 text-xs text-blue-700">Upcoming workload</div></div>
    <div class="af-metric-card border-red-200 bg-red-50"><div class="text-xs font-semibold uppercase text-red-700">Overdue</div><div class="mt-2 text-3xl font-semibold text-red-700">{{ overview.overdue_count }}</div><div class="mt-1 text-xs text-red-700">Escalation required</div></div>
    <div 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">Allocation pending</div></div>
  </section>

  <section class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_340px]">
    <div class="space-y-6">
      <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">Due Today</h3><p class="text-sm text-slate-500">Tasks that should be completed or reviewed today.</p></div><a href="/manager/work" class="af-btn af-btn-primary">Work Board</a></div>
        {% set rows = due_today %}
        {% include 'modules/manager_dashboard/templates/manager_dashboard/partials/_task_table.html' %}
      </div>
      <div class="af-card">
        <div class="mb-4"><h3 class="text-lg font-semibold text-slate-900">Due This Week</h3><p class="text-sm text-slate-500">Upcoming work due within the next seven days.</p></div>
        {% set rows = due_week %}
        {% include 'modules/manager_dashboard/templates/manager_dashboard/partials/_task_table.html' %}
      </div>
    </div>
    <aside class="space-y-4">
      <div class="af-card"><h3 class="font-semibold text-slate-900">Overdue Ageing</h3><div class="mt-4 space-y-3">{% for item in age_buckets %}<div><div class="mb-1 flex justify-between text-xs font-semibold text-slate-600"><span>{{ item.label }}</span><span>{{ item.count }}</span></div><div class="h-2 rounded-full bg-slate-100"><div class="h-2 rounded-full bg-brand-600" style="width: {{ [item.count * 10, 100]|min }}%"></div></div></div>{% endfor %}</div></div>
      <div class="af-card"><h3 class="font-semibold text-slate-900">Status Mix</h3><div class="mt-4 space-y-2 text-sm">{% for item in status_summary[:6] %}<div class="flex justify-between rounded-xl bg-slate-50 px-3 py-2"><span>{{ item.label }}</span><span class="font-semibold">{{ item.count }}</span></div>{% else %}<p class="text-sm text-slate-500">No open status data.</p>{% endfor %}</div></div>
    </aside>
  </section>
</div>
