{# Stat-card component.

   Replaces the open-coded
       <div class="ui-stat-card p-4">
         <p class="ui-card-label">...</p>
         <p class="mt-2 ui-card-value text-...">...</p>
         <p class="ui-card-meta">...</p>
       </div>
   pattern (25+ duplicates across the dashboard, opportunities,
   layout, and failures pages) with a single macro.

   Usage:

       {% from "components/_stat_card.html" import stat_card %}
       {{ stat_card("Total Spend", totals.total_cost_usd | format_usd,
                    meta="across 7,027 jobs") }}
       {{ stat_card("Affected downstreams", "17",
                    meta="models with active issues",
                    accent="rose") }}
       {{ stat_card("Bytes Processed", value_html,
                    accent="brand", padding="p-6") }}

   Parameters:
     - label       (str) uppercase caption above the value
     - value       (str | safe HTML) main value; pass already-formatted
     - meta        (str, optional) caption below the value
     - accent      (str) value colour: default | brand | emerald | rose
                                       | amber | teal | slate
     - padding     (str) Tailwind padding class, defaults to "p-4"
     - tooltip     (str, optional) hover popover text. Renders an info
                                   icon to the right of the label and
                                   a hidden box that shows on hover.
                                   Supports HTML (caller is trusted).
#}
{% macro stat_card(label, value, meta=None, accent="default", padding="p-4", tooltip=None) -%}
  {%- set _accent_class = {
        "default": "text-slate-900 dark:text-slate-100",
        "brand":   "text-brand-500 dark:text-brand-300",
        "emerald": "text-emerald-600 dark:text-emerald-400",
        "rose":    "text-rose-600 dark:text-rose-400",
        "amber":   "text-amber-600 dark:text-amber-300",
        "teal":    "text-teal-700 dark:text-teal-300",
        "slate":   "text-slate-400",
      }.get(accent, "text-slate-900 dark:text-slate-100") -%}
  <div class="ui-stat-card {{ padding }}">
    {%- if tooltip %}
    <div class="relative group flex items-center gap-1.5">
      <p class="ui-card-label">{{ label }}</p>
      <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300" aria-label="Info">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01"/><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
      </button>
      <div class="hidden group-hover:block absolute z-20 bottom-full left-0 mb-2 w-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3 text-sm text-slate-600 dark:text-slate-300 shadow-lg leading-relaxed">
        {{ tooltip | safe }}
      </div>
    </div>
    {%- else %}
    <p class="ui-card-label">{{ label }}</p>
    {%- endif %}
    <p class="mt-2 ui-card-value {{ _accent_class }}">{{ value }}</p>
    {%- if meta %}
    <p class="ui-card-meta">{{ meta }}</p>
    {%- endif %}
  </div>
{%- endmacro %}