{# Stats cards grid — included from pages/home.html #}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

  {# Total #}
  <div class="bg-white dark:bg-ledger-darkPanel rounded-md border border-ledger-line dark:border-ledger-darkLine p-4 flex items-center gap-4">
    <div class="flex-shrink-0 w-11 h-11 rounded-md bg-primary-50 dark:bg-primary-950 flex items-center justify-center">
      <svg class="w-6 h-6 text-primary-700 dark:text-primary-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
      </svg>
    </div>
    <div>
      <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ t("stats.total") }}</p>
      <p class="text-2xl font-display font-bold text-gray-900 dark:text-white">{{ total }}</p>
    </div>
  </div>

  {# Proposed #}
  <div class="bg-white dark:bg-ledger-darkPanel rounded-md border border-ledger-line dark:border-ledger-darkLine p-4 flex items-center gap-4">
    <div class="flex-shrink-0 w-11 h-11 rounded-md bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
      <svg class="w-6 h-6 text-slate-600 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z" />
      </svg>
    </div>
    <div>
      <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ t("stats.proposed") }}</p>
      <p class="text-2xl font-display font-bold text-gray-900 dark:text-white">{{ status_counts.get('proposed', 0) }}</p>
    </div>
  </div>

  {# In Progress #}
  <div class="bg-white dark:bg-ledger-darkPanel rounded-md border border-ledger-line dark:border-ledger-darkLine p-4 flex items-center gap-4">
    <div class="flex-shrink-0 w-11 h-11 rounded-md bg-primary-50 dark:bg-primary-950 flex items-center justify-center">
      <svg class="w-6 h-6 text-primary-700 dark:text-primary-300" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <div>
      <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ t("stats.in_progress") }}</p>
      <p class="text-2xl font-display font-bold text-gray-900 dark:text-white">{{ status_counts.get('in_progress', 0) }}</p>
    </div>
  </div>

  {# Done #}
  <div class="bg-white dark:bg-ledger-darkPanel rounded-md border border-ledger-line dark:border-ledger-darkLine p-4 flex items-center gap-4">
    <div class="flex-shrink-0 w-11 h-11 rounded-md bg-green-50 dark:bg-green-950/40 flex items-center justify-center">
      <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <div>
      <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ t("stats.done") }}</p>
      <p class="text-2xl font-display font-bold text-gray-900 dark:text-white">{{ status_counts.get('done', 0) }}</p>
    </div>
  </div>

</div>