<div class="space-y-6">
  <div class="grid gap-4 md:grid-cols-3">
    <button type="button" onclick="window.loadClientDashboardTab && window.loadClientDashboardTab('pending')" class="af-metric-card border-amber-200 bg-amber-50 text-left hover:border-amber-300"><div class="text-xs font-semibold uppercase text-amber-700">Pending From Me</div><div class="mt-2 text-3xl font-semibold text-amber-700">{{ pending_from_client or 0 }}</div><div class="mt-1 text-xs text-amber-700">Documents / replies required</div></button>
    <button type="button" onclick="window.loadClientDashboardTab && window.loadClientDashboardTab('messages')" class="af-metric-card text-left hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Firm Messages</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ client_visible_comments|length if client_visible_comments else 0 }}</div><div class="mt-1 text-xs text-slate-500">Recent messages</div></button>
    <a href="/client/documents" class="af-metric-card hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Documents</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ recent_documents|length if recent_documents else 0 }}</div><div class="mt-1 text-xs text-slate-500">Recent uploads / shared files</div></a>
  </div>

  <div class="grid gap-6 xl:grid-cols-2">
    <div>{% include "modules/clients/templates/clients/portal_partials/pending.html" %}</div>
    <div>{% include "modules/clients/templates/clients/portal_partials/messages.html" %}</div>
  </div>
</div>
