<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 text-slate-500">Setup Score</div><div class="mt-2 text-3xl font-bold {% if overview.setup_percent >= 80 %}text-emerald-700{% else %}text-amber-700{% endif %}">{{ overview.setup_score }}/{{ overview.setup_total }}</div><div class="text-xs text-slate-500">{{ overview.setup_percent }}% firm setup readiness</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">Branches</div><div class="mt-2 text-3xl font-bold text-slate-900">{{ overview.branch_count }}</div><div class="text-xs text-slate-500">{{ overview.active_branch_count }} active</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">Users</div><div class="mt-2 text-3xl font-bold text-slate-900">{{ overview.user_count }}</div><div class="text-xs text-slate-500">{{ overview.firm_admin_count }} firm admin / {{ overview.partner_count }} partner</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">Services Enabled</div><div class="mt-2 text-3xl font-bold text-slate-900">{{ overview.enabled_service_count }}</div><div class="text-xs {% if overview.services_without_templates %}text-amber-700{% else %}text-slate-500{% endif %}">{{ overview.services_without_templates }} without task templates</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 text-slate-500">Clients</div><div class="mt-2 text-2xl font-bold">{{ overview.client_count }}</div><div class="text-xs text-slate-500">Active client master</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">Current FY</div><div class="mt-2 text-2xl font-bold {% if overview.current_fy %}text-emerald-700{% else %}text-amber-700{% endif %}">{{ overview.current_fy.year_code if overview.current_fy else 'Not Set' }}</div><div class="text-xs text-slate-500">{{ overview.fy_count }} financial year(s)</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">Branding</div><div class="mt-2 text-2xl font-bold {% if overview.branding_ready %}text-emerald-700{% else %}text-amber-700{% endif %}">{% if overview.branding_ready %}Started{% else %}Pending{% endif %}</div><div class="text-xs text-slate-500">Logo/contact/colours</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">Billing Settings</div><div class="mt-2 text-2xl font-bold {% if overview.billing_settings_count %}text-emerald-700{% else %}text-amber-700{% endif %}">{{ overview.billing_settings_count }}</div><div class="text-xs text-slate-500">Configured rows</div></div>
  </div>

  <div class="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
      <h2 class="text-lg font-bold text-slate-900">Setup Checklist</h2>
      <p class="mt-1 text-sm text-slate-500">Firm Admin should complete these items before branch operations start.</p>
      <div class="mt-4 grid gap-3 md:grid-cols-2">
        {% for item in setup_checks %}
        <a href="/firm-admin/dashboard?tab={% if item.key == 'branches' or item.key == 'partners' %}branches{% elif item.key == 'firm_admin' %}users{% elif item.key == 'services' or item.key == 'templates' %}services{% elif item.key == 'fy' %}financial-years{% else %}firm-settings{% endif %}" class="rounded-2xl border p-4 {% if item.ok %}border-emerald-100 bg-emerald-50{% else %}border-amber-100 bg-amber-50{% endif %}">
          <div class="flex items-center justify-between gap-3"><span class="font-semibold {% if item.ok %}text-emerald-900{% else %}text-amber-900{% endif %}">{{ item.label }}</span><span class="rounded-full bg-white px-2 py-1 text-xs font-bold {% if item.ok %}text-emerald-700{% else %}text-amber-700{% endif %}">{% if item.ok %}Done{% else %}Pending{% endif %}</span></div>
          <div class="mt-1 text-xs {% if item.ok %}text-emerald-700{% else %}text-amber-700{% endif %}">{{ item.detail }}</div>
        </a>
        {% 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="/system-settings/branches" class="block rounded-2xl bg-brand-600 px-4 py-3 text-sm font-semibold text-white hover:bg-brand-700">+ Add / Manage Branches</a>
        <a href="/system-settings/users" class="block rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Invite Users & Assign Roles</a>
        <a href="/system-settings/branding" class="block rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Firm Branding</a>
        <a href="/services" class="block rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">Select Services</a>
      </div>
    </div>
  </div>
</div>
