<div class="card bg-base-100 shadow-sm">
  <div class="card-body p-3">
    <h3 class="card-title text-sm">{{ title }}</h3>
    {% if item %}
    <dl class="grid grid-cols-2 gap-2">
      {% for col in columns %}
      <dt class="text-xs font-semibold opacity-60">{{ col.label }}</dt>
      <dd class="text-sm">
        {% if col.type == "badge" %}
          <span class="badge badge-sm {{ item[col.key] | badge_class }}">{{ item[col.key] | default("—") }}</span>
        {% elif col.type == "bool" %}
          {{ item[col.key] | bool_icon }}
        {% elif col.type == "date" %}
          {{ item[col.key] | dateformat }}
        {% elif col.type == "currency" %}
          {{ item[col.key] | currency }}
        {% else %}
          {{ item[col.key] | default("—") }}
        {% endif %}
      </dd>
      {% endfor %}
    </dl>
    {% else %}
    <p class="text-sm opacity-50">{{ empty_message | default("No record selected.") }}</p>
    {% endif %}
  </div>
</div>
