<div class="card-header mc-panel-header">// DAILY RUN METRICS</div>
<div class="card-body p-3">
  {% if not gitea_available %}
  <div class="mc-muted" style="font-size: 0.85rem; padding: 8px 0;">
    <span style="color: var(--amber);">⚠</span> Gitea API unavailable
  </div>
  {% else %}
  {% set m = metrics %}

  <!-- Sessions summary -->
  <div class="dr-section" style="margin-bottom: 16px;">
    <div class="dr-row" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
      <span class="dr-label" style="font-size: 0.85rem; color: var(--text-dim);">Sessions ({{ m.lookback_days }}d)</span>
      <a href="{{ logbook_url }}" target="_blank" class="dr-link" style="font-size: 0.75rem; color: var(--green); text-decoration: none;">
        Logbook →
      </a>
    </div>
    <div class="dr-stat" style="display: flex; align-items: baseline; gap: 8px;">
      <span class="dr-value" style="font-size: 1.5rem; font-weight: 600; color: var(--text-bright);">{{ m.sessions_completed }}</span>
      <span class="dr-trend" style="font-size: 0.9rem; color: {{ m.sessions_trend_color }};">{{ m.sessions_trend }}</span>
      <span class="dr-prev" style="font-size: 0.75rem; color: var(--text-dim);">vs {{ m.sessions_previous }} prev</span>
    </div>
  </div>

  <!-- Layer breakdown -->
  <div class="dr-section">
    <div class="dr-label" style="font-size: 0.85rem; color: var(--text-dim); margin-bottom: 8px;">Issues by Layer</div>
    <div class="dr-layers" style="display: flex; flex-direction: column; gap: 6px;">
      {% for layer in m.layers %}
      <div class="dr-layer-row" style="display: flex; justify-content: space-between; align-items: center;">
        <a href="{{ layer_urls[layer.name] }}" target="_blank" class="dr-layer-name" style="font-size: 0.8rem; color: var(--text); text-decoration: none; text-transform: capitalize;">
          {{ layer.name.replace('-', ' ') }}
        </a>
        <div class="dr-layer-stat" style="display: flex; align-items: center; gap: 6px;">
          <span class="dr-layer-value" style="font-size: 0.9rem; font-weight: 500; color: var(--text-bright);">{{ layer.current_count }}</span>
          <span class="dr-layer-trend" style="font-size: 0.75rem; color: {{ layer.trend_color }}; width: 18px; text-align: center;">{{ layer.trend }}</span>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Total touched -->
  <div class="dr-section" style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);">
    <div class="dr-row" style="display: flex; justify-content: space-between; align-items: center;">
      <span class="dr-label" style="font-size: 0.8rem; color: var(--text-dim);">Total Issues Touched</span>
      <div class="dr-total-stat" style="display: flex; align-items: center; gap: 6px;">
        <span class="dr-total-value" style="font-size: 1rem; font-weight: 600; color: var(--text-bright);">{{ m.total_touched_current }}</span>
        <span class="dr-total-prev" style="font-size: 0.7rem; color: var(--text-dim);">/ {{ m.total_touched_previous }} prev</span>
      </div>
    </div>
  </div>
  {% endif %}
</div>
