<div class="space-y-6">
  <section class="grid gap-4 md:grid-cols-3">
    <button type="button" onclick="window.loadClientDashboardTab && window.loadClientDashboardTab('billing')" 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">Outstanding</div><div class="mt-2 text-2xl font-semibold text-amber-700">₹ {{ '%.2f'|format(billing_outstanding_amount or 0) }}</div><div class="mt-1 text-xs text-amber-700">{{ billing_open_count or 0 }} open bill(s)</div></button>
    <a href="/client/billing" class="af-metric-card hover:border-brand-200"><div class="text-xs font-semibold uppercase text-slate-500">Total Bills</div><div class="mt-2 text-3xl font-semibold text-slate-900">{{ billing_total_count or 0 }}</div><div class="mt-1 text-xs text-slate-500">Invoices & receipts</div></a>
    <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">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">Firm communication</div></button>
  </section>
  <div class="grid gap-6 xl:grid-cols-2">
    <div>{% include "modules/clients/templates/clients/portal_partials/billing.html" %}</div>
    <div>{% include "modules/clients/templates/clients/portal_partials/messages.html" %}</div>
  </div>
</div>
