<div class="p-3 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
  <div class="flex items-start justify-between">
    <div class="flex-1">
      <div class="flex items-center gap-2 mb-1">
        {# Severity badge #}
        {% if finding.severity == "critical" %}
          <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-critical); color: #fff;">CRITICAL</span>
        {% elif finding.severity == "high" %}
          <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-high); color: #fff;">HIGH</span>
        {% elif finding.severity == "medium" %}
          <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-medium); color: #fff;">MEDIUM</span>
        {% elif finding.severity == "low" %}
          <span class="px-2 py-0.5 rounded text-xs font-semibold" style="background: var(--cf-low); color: #fff;">LOW</span>
        {% endif %}

        {# Status indicator #}
        {% if finding.status == "MANUAL_REVIEW" %}
          <span class="text-xs px-1 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--text-secondary);">MANUAL_REVIEW</span>
        {% else %}
          <span class="text-xs px-1 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--cf-critical);">FAIL</span>
        {% endif %}
      </div>

      {# Control ID + title #}
      <div class="text-sm font-medium" style="color: var(--text-primary);">
        {{ finding.control_id }} — {{ finding.control_title }}
      </div>

      {# Resource address #}
      <div class="text-xs mt-1" style="color: var(--text-muted);">
        {{ finding.resource }}
      </div>

      {# Framework + cross-mapping chips #}
      <div class="flex flex-wrap items-center gap-1 mt-2">
        {% if finding.cross_mappings %}
          {% for mapping in finding.cross_mappings[:3] %}
          <span class="text-xs px-1.5 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--text-secondary);">
            {{ mapping }}
          </span>
          {% endfor %}
          {% if finding.cross_mappings | length > 3 %}
          <span class="text-xs px-1.5 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--text-muted);">
            +{{ finding.cross_mappings | length - 3 }} more
          </span>
          {% endif %}
        {% endif %}
      </div>

      {# Native ID chips #}
      {% if finding.native_ids %}
      <div class="flex flex-wrap items-center gap-1 mt-1">
        {% for nid in finding.native_ids %}
        <span class="text-xs px-1.5 py-0.5 rounded" style="background: var(--bg-surface-hover); color: var(--text-secondary);">
          {{ nid }}
        </span>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</div>
