{# Modal container. Shown/hidden via JS. Usage in page templates. #}
<div id="{{ modal_id|default:'modal' }}" class="hidden fixed inset-0 z-50 overflow-y-auto">
  <div class="flex min-h-full items-center justify-center p-4">
    <div class="fixed inset-0 bg-slate-900/50" onclick="closeModal('{{ modal_id|default:'modal' }}')"></div>
    <div class="relative bg-white rounded-xl shadow-2xl w-full max-w-lg p-6 z-10">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-slate-900">{{ modal_title|default:"" }}</h3>
        <button onclick="closeModal('{{ modal_id|default:'modal' }}')" class="text-slate-400 hover:text-slate-600">&times;</button>
      </div>
      {% block modal_body %}{% endblock %}
    </div>
  </div>
</div>