{% if variance %}
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold
    {% if variance.direction == 'up' %}
        {% if variance.is_positive %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}
    {% elif variance.direction == 'down' %}
        {% if variance.is_positive %}bg-red-100 text-red-800{% else %}bg-green-100 text-green-800{% endif %}
    {% else %}
        bg-gray-100 text-gray-800
    {% endif %}">
    {% if variance.direction == 'up' %}
        ↑
    {% elif variance.direction == 'down' %}
        ↓
    {% else %}
        →
    {% endif %}
    {{ variance.percentage|floatformat:1 }}%
</span>
{% endif %}