<div class="space-y-6">
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Total Firms</div><div class="mt-2 text-3xl font-bold text-slate-900">{{ overview.total_firms }}</div><div class="mt-1 text-xs text-slate-500">{{ overview.active_firms }} active / {{ overview.inactive_firms }} inactive</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Setup Incomplete</div><div class="mt-2 text-3xl font-bold {% if overview.setup_incomplete_firms %}text-amber-700{% else %}text-emerald-700{% endif %}">{{ overview.setup_incomplete_firms }}</div><div class="mt-1 text-xs text-slate-500">Firms needing setup action</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Pending Admin Invites</div><div class="mt-2 text-3xl font-bold {% if overview.pending_invites %}text-amber-700{% else %}text-emerald-700{% endif %}">{{ overview.pending_invites }}</div><div class="mt-1 text-xs text-slate-500">Firm Admin password/invite pending</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Platform SMTP</div><div class="mt-2 text-lg font-bold {% if overview.smtp.configured and overview.smtp.active and overview.smtp.send_auth_emails %}text-emerald-700{% else %}text-amber-700{% endif %}">{% if overview.smtp.configured and overview.smtp.active and overview.smtp.send_auth_emails %}Ready{% else %}Needs Setup{% endif %}</div><div class="mt-1 text-xs text-slate-500">{{ overview.smtp.message }}</div></div>
  </div>

  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Service Catalogue</div><div class="mt-2 text-2xl font-bold text-slate-900">{{ overview.service_count }}</div><div class="mt-1 text-xs text-slate-500">{{ overview.active_service_count }} active services</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Default Task Templates</div><div class="mt-2 text-2xl font-bold text-slate-900">{{ overview.default_task_count }}</div><div class="mt-1 text-xs text-slate-500">{{ overview.services_without_tasks }} services without tasks</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Storage</div><div class="mt-2 text-2xl font-bold {% if overview.storage.storage_root_exists and overview.storage.branding_root_exists %}text-emerald-700{% else %}text-amber-700{% endif %}">{{ overview.storage.status_label }}</div><div class="mt-1 text-xs text-slate-500">{{ overview.storage.used_display }} used</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Billing Readiness</div><div class="mt-2 text-2xl font-bold text-slate-900">{{ overview.billing.active_subscription_count }}</div><div class="mt-1 text-xs text-slate-500">Active platform subscriptions</div></div>
  </div>

  <div class="grid gap-6 xl:grid-cols-3">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft xl:col-span-2">
      <div class="flex items-center justify-between gap-3"><div><h2 class="text-lg font-bold text-slate-900">Needs Attention</h2><p class="text-sm text-slate-500">Action-first list for System Admin.</p></div><a href="/system-admin/dashboard?tab=firm-setup-health" class="text-sm font-semibold text-brand-700">Open setup health</a></div>
      <div class="mt-4 grid gap-3 md:grid-cols-2">
        {% for item in overview.needs_attention %}
        <a href="/system-admin/dashboard?tab={{ item.tab }}" class="rounded-2xl border border-amber-100 bg-amber-50 p-4 hover:border-amber-200"><div class="flex items-center justify-between gap-3"><span class="font-semibold text-amber-900">{{ item.label }}</span><span class="rounded-full bg-white px-2.5 py-1 text-xs font-bold text-amber-700">{{ item.count }}</span></div></a>
        {% else %}
        <div class="rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-semibold text-emerald-700 md:col-span-2">No immediate platform setup issues found.</div>
        {% endfor %}
      </div>
    </div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <h2 class="text-lg font-bold text-slate-900">Quick Actions</h2>
      <div class="mt-4 space-y-3">
        <a href="/wizards/system/firm/new" class="block rounded-2xl bg-brand-600 px-4 py-3 text-sm font-semibold text-white hover:bg-brand-700">+ Create Firm Wizard</a>
        <a href="/email/platform-smtp" class="block rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Platform SMTP Settings</a>
        <a href="/system-admin/dashboard?tab=reports" class="block rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Reports Centre</a>
      </div>
    </div>
  </div>
</div>