<div class="space-y-5">
  <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><h2 class="text-lg font-bold text-slate-900">Staff Reports</h2><p class="mt-1 text-sm text-slate-500">Quick report cards based on your assigned work.</p></div>
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    {% for card in reports %}
    <a href="{{ card.href }}" class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft transition hover:-translate-y-0.5 hover:shadow-lg">
      <p class="text-xs font-semibold uppercase tracking-wide text-brand-600">{{ card.group }}</p>
      <h3 class="mt-2 text-base font-bold text-slate-900">{{ card.title }}</h3>
      <p class="mt-2 text-sm text-slate-500">{{ card.desc }}</p>
      <p class="mt-4 text-sm font-semibold text-brand-700">View report →</p>
    </a>
    {% endfor %}
  </div>
</div>
