<div class="space-y-6">
  <div class="grid gap-4 md:grid-cols-3 xl:grid-cols-6">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Firms</div><div class="mt-2 text-2xl font-bold">{{ health.total }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Ready</div><div class="mt-2 text-2xl font-bold text-emerald-700">{{ health.ready }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Incomplete</div><div class="mt-2 text-2xl font-bold text-amber-700">{{ health.incomplete }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">No Branch</div><div class="mt-2 text-2xl font-bold">{{ health.missing_branch }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">No FY</div><div class="mt-2 text-2xl font-bold">{{ health.missing_fy }}</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">No Services</div><div class="mt-2 text-2xl font-bold">{{ health.missing_services }}</div></div>
  </div>

  <div class="rounded-3xl border border-slate-200 bg-white shadow-soft">
    <div class="border-b border-slate-100 p-5"><h2 class="text-lg font-bold text-slate-900">Firm Setup Health Checklist</h2><p class="text-sm text-slate-500">A firm is ready when Branch, Firm Admin, FY, selected services and users are available.</p></div>
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-100 text-sm">
        <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500"><tr><th class="px-5 py-3">Firm</th><th class="px-5 py-3">Branch</th><th class="px-5 py-3">Admin</th><th class="px-5 py-3">FY</th><th class="px-5 py-3">Services</th><th class="px-5 py-3">Users</th><th class="px-5 py-3">Branding</th><th class="px-5 py-3">Billing</th><th class="px-5 py-3">Status</th><th class="px-5 py-3">Missing</th></tr></thead>
        <tbody class="divide-y divide-slate-100">
          {% for firm in health.rows %}
          <tr class="hover:bg-slate-50">
            <td class="px-5 py-3"><div class="font-semibold text-slate-900">{{ firm.name }}</div><div class="text-xs text-slate-500">{{ firm.code }}</div></td>
            <td class="px-5 py-3">{% if firm.branch_ok %}<span class="text-emerald-700 font-semibold">Done</span>{% else %}<span class="text-red-700 font-semibold">Missing</span>{% endif %}<div class="text-xs text-slate-500">{{ firm.branch_count }}</div></td>
            <td class="px-5 py-3">{% if firm.admin_ok %}<span class="text-emerald-700 font-semibold">Done</span>{% else %}<span class="text-red-700 font-semibold">Missing</span>{% endif %}<div class="text-xs text-slate-500">{{ firm.primary_admin }}</div></td>
            <td class="px-5 py-3">{% if firm.fy_ok %}<span class="text-emerald-700 font-semibold">Done</span>{% else %}<span class="text-red-700 font-semibold">Missing</span>{% endif %}<div class="text-xs text-slate-500">{{ firm.fy_count }} FY{% if firm.current_fy_ok %} / current set{% endif %}</div></td>
            <td class="px-5 py-3">{% if firm.services_ok %}<span class="text-emerald-700 font-semibold">Done</span>{% else %}<span class="text-red-700 font-semibold">Missing</span>{% endif %}<div class="text-xs text-slate-500">{{ firm.selected_service_count }}</div></td>
            <td class="px-5 py-3">{% if firm.users_ok %}<span class="text-emerald-700 font-semibold">Done</span>{% else %}<span class="text-red-700 font-semibold">Missing</span>{% endif %}<div class="text-xs text-slate-500">{{ firm.user_count }}</div></td>
            <td class="px-5 py-3">{% if firm.branding_ok %}<span class="text-emerald-700 font-semibold">Started</span>{% else %}<span class="text-amber-700 font-semibold">Pending</span>{% endif %}</td>
            <td class="px-5 py-3">{% if firm.billing_ok %}<span class="text-emerald-700 font-semibold">Ready</span>{% else %}<span class="text-amber-700 font-semibold">Pending</span>{% endif %}</td>
            <td class="px-5 py-3"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {% if firm.status == 'Ready' %}bg-emerald-50 text-emerald-700{% else %}bg-amber-50 text-amber-700{% endif %}">{{ firm.status }} {{ firm.score }}/{{ firm.score_total }}</span></td>
            <td class="px-5 py-3 text-slate-600">{{ firm.missing_text }}</td>
          </tr>
          {% else %}
          <tr><td colspan="10" class="px-5 py-8 text-center text-slate-500">No firms found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>