{# Stats cards — mockup .dash-card.span-3 with serif numbers + sparklines.
   Sparklines pulled in by tuskRefreshSparklines() in admin.html scripts. #}
<div class="dash-card span-3">
    <div class="dash-card-h">
        <div class="l">Connections</div>
        <i data-lucide="users" style="width:13px;height:13px;color:var(--accent-violet)"></i>
    </div>
    <div class="dash-card-v">{{ connections }}<span style="font-size:18px;color:var(--fg-3)"> / {{ max_connections }}</span></div>
    <svg class="tusk-sparkline" data-metric="connections" viewBox="0 0 200 36" preserveAspectRatio="none" style="height:36px"></svg>
</div>
<div class="dash-card span-3">
    <div class="dash-card-h">
        <div class="l">Active queries</div>
        <i data-lucide="activity" style="width:13px;height:13px;color:var(--green)"></i>
    </div>
    <div class="dash-card-v" style="color:var(--green)">{{ active_queries }}</div>
    <svg class="tusk-sparkline" data-metric="active_queries" viewBox="0 0 200 36" preserveAspectRatio="none" style="height:36px"></svg>
</div>
<div class="dash-card span-3">
    <div class="dash-card-h">
        <div class="l">Cache hit ratio</div>
        <i data-lucide="zap" style="width:13px;height:13px;color:var(--brand)"></i>
    </div>
    <div class="dash-card-v" style="color:var(--green)">{{ cache_hit_ratio }}<span style="font-size:18px">%</span></div>
    <svg class="tusk-sparkline" data-metric="cache_hit_ratio" viewBox="0 0 200 36" preserveAspectRatio="none" style="height:36px"></svg>
</div>
<div class="dash-card span-3">
    <div class="dash-card-h">
        <div class="l">Database size</div>
        <i data-lucide="hard-drive" style="width:13px;height:13px;color:var(--accent-amber)"></i>
    </div>
    <div class="dash-card-v">{{ db_size_human }}</div>
    <svg class="tusk-sparkline" data-metric="db_size_bytes" viewBox="0 0 200 36" preserveAspectRatio="none" style="height:36px"></svg>
</div>