{% macro empty_state(icon, heading, description, cta_text="", cta_href="") %}
<div class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 py-12 text-center">
  <div class="text-slate-300 dark:text-slate-600 mb-4 flex justify-center">
    {{ icon | safe }}
  </div>
  <h3 class="text-base font-semibold text-slate-700 dark:text-slate-300 mb-1">{{ heading }}</h3>
  <p class="text-sm text-slate-500 dark:text-slate-400 max-w-md mx-auto">{{ description }}</p>
  {% if cta_text and cta_href %}
  <a href="{{ cta_href }}" class="inline-block mt-4 text-sm font-medium text-accent-600 dark:text-accent-400 hover:text-accent-500 dark:hover:text-accent-300 transition-colors">{{ cta_text }} &rarr;</a>
  {% endif %}
</div>
{% endmacro %}