<style>
  .ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
  .ov-stat {
    background: white; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem;
    text-align: center;
  }
  .ov-stat__label { font-size: 0.6875rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; }
  .ov-stat__value { font-size: 1.75rem; font-weight: 800; color: #1E293B; margin-top: 4px; }
  .ov-stat__value--blue { color: #1D4ED8; }
  .ov-alert {
    background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px;
    padding: 12px 16px; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 10px;
    font-size: 0.8125rem; color: #1D4ED8;
  }
  .ov-alert__count { font-weight: 700; font-size: 1.25rem; }
  .ov-activity { background: white; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem; }
  .ov-activity h3 { font-size: 0.9375rem; margin-bottom: 0.75rem; }
  .ov-activity__item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #F1F5F9; font-size: 0.8125rem;
  }
  .ov-activity__item:last-child { border-bottom: none; }
  .ov-activity__note { color: #475569; }
  .ov-activity__delta { font-weight: 600; }
  .ov-activity__delta--neg { color: #DC2626; }
  .ov-activity__delta--pos { color: #16A34A; }
  .ov-activity__time { font-size: 0.6875rem; color: #94A3B8; }
  @media (max-width: 768px) {
    .ov-stats { grid-template-columns: repeat(2, 1fr); }
  }
</style>

{% if supplier.tier in ('growth', 'pro') and new_leads_count > 0 %}
<div class="ov-alert">
  <span class="ov-alert__count">{{ new_leads_count }}</span>
  <span>{{ t.sd_ov_new_leads_text }}
    <a href="{{ url_for('suppliers.dashboard', tab='leads') }}"
       hx-get="{{ url_for('suppliers.dashboard_leads') }}"
       hx-target="#dashboard-content"
       hx-push-url="{{ url_for('suppliers.dashboard', tab='leads') }}"
       style="font-weight:600">{{ t.sd_ov_view_lead_feed }} &rarr;</a>
  </span>
</div>
{% endif %}

<div class="ov-stats">
  <div class="ov-stat">
    <div class="ov-stat__label">{{ t.sd_ov_profile_views }}</div>
    <div class="ov-stat__value">&mdash;</div>
    <div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sd_ov_via_umami }}</div>
  </div>
  {% if supplier.tier == 'basic' %}
  <div class="ov-stat">
    <div class="ov-stat__label">{{ t.sd_ov_enquiries }}</div>
    <div class="ov-stat__value">{{ enquiry_count }}</div>
  </div>
  {% else %}
  <div class="ov-stat">
    <div class="ov-stat__label">{{ t.sd_ov_leads_unlocked }}</div>
    <div class="ov-stat__value">{{ leads_unlocked }}</div>
  </div>
  <div class="ov-stat">
    <div class="ov-stat__label">{{ t.sd_ov_credits_balance }}</div>
    <div class="ov-stat__value ov-stat__value--blue">{{ supplier.credit_balance }}</div>
  </div>
  {% endif %}
  <div class="ov-stat">
    <div class="ov-stat__label">{{ t.sd_ov_directory_rank }}</div>
    <div class="ov-stat__value">&mdash;</div>
    <div style="font-size:0.6875rem;color:#94A3B8;margin-top:2px">{{ t.sd_ov_via_umami }}</div>
  </div>
</div>

{% if supplier.tier == 'basic' %}
<div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:10px;padding:12px 16px;margin-bottom:1.5rem;font-size:0.8125rem;color:#1D4ED8">
  <strong>{{ t.sd_ov_basic_plan_label }}</strong> — {{ t.sd_ov_basic_plan_desc }}
  <a href="{{ url_for('suppliers.signup') }}" style="display:block;font-weight:600;margin-top:4px;color:#1D4ED8">{{ t.sd_ov_upgrade_growth }} &rarr;</a>
</div>
{% endif %}

<div class="ov-activity">
  <h3>{{ t.sd_ov_recent_activity }}</h3>
  {% if recent_activity %}
  {% for item in recent_activity %}
  <div class="ov-activity__item">
    <div>
      <span class="ov-activity__note">{{ item.note or item.event_type }}</span>
      <span class="ov-activity__time">{{ item.created_at[:16] }}</span>
    </div>
    <span class="ov-activity__delta {% if item.delta < 0 %}ov-activity__delta--neg{% else %}ov-activity__delta--pos{% endif %}">
      {{ '%+d' % item.delta }} {{ t.sd_ov_credits }}
    </span>
  </div>
  {% endfor %}
  {% else %}
  <p style="color:#94A3B8;font-size:0.8125rem;text-align:center;padding:1rem 0">{{ t.sd_ov_no_activity }}</p>
  {% endif %}
</div>
