<div class="space-y-6">
  <div class="af-card">
    <h3 class="text-lg font-semibold text-slate-900">My Reports</h3>
    <p class="mt-1 text-sm text-slate-500">Client-facing report shortcuts. Detailed exports continue through the existing pages.</p>
    <div class="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      <a href="/client/compliance" class="rounded-2xl border border-slate-200 p-5 hover:border-brand-200 hover:bg-brand-50"><div class="font-semibold text-slate-900">Compliance Status Report</div><p class="mt-2 text-sm text-slate-500">Status of GST, ITR, TDS, audit, notice and other active services.</p></a>
      <a href="/client/compliance" class="rounded-2xl border border-slate-200 p-5 hover:border-brand-200 hover:bg-brand-50"><div class="font-semibold text-slate-900">Pending Document Report</div><p class="mt-2 text-sm text-slate-500">Items where your input or documents are required.</p></a>
      <a href="/client/documents" class="rounded-2xl border border-slate-200 p-5 hover:border-brand-200 hover:bg-brand-50"><div class="font-semibold text-slate-900">Document Register</div><p class="mt-2 text-sm text-slate-500">Permanent and engagement documents visible to your login.</p></a>
      <a href="/client/billing" class="rounded-2xl border border-slate-200 p-5 hover:border-brand-200 hover:bg-brand-50"><div class="font-semibold text-slate-900">Invoice Outstanding Report</div><p class="mt-2 text-sm text-slate-500">Open bills, receipts and payment history.</p></a>
      <a href="/client/messages" class="rounded-2xl border border-slate-200 p-5 hover:border-brand-200 hover:bg-brand-50"><div class="font-semibold text-slate-900">Messages & Clarifications</div><p class="mt-2 text-sm text-slate-500">Firm messages and clarification history.</p></a>
      <a href="/client/profile" class="rounded-2xl border border-slate-200 p-5 hover:border-brand-200 hover:bg-brand-50"><div class="font-semibold text-slate-900">Profile Details</div><p class="mt-2 text-sm text-slate-500">Contact and statutory details maintained in the firm.</p></a>
    </div>
  </div>
</div>
