{# Base modal-card chrome (single-step: header / optional side panel / body / footer).
   A child template extends this and fills the head / side_panel / body / footer blocks,
   so the whole card renders from one shared context in a single render call. Enter
   triggers the footer save button via $refs.next. Mirrors transaction-edit/edit-modal
   (the string-slot version still used by Transaction Edit). #}
<div class="modal-card bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white  modal-content flex flex-col max-h-screen max-w-screen md:w-[950px] md:h-[650px] w-full h-full last-modal-step transition duration-150"
     @keydown.enter.prevent.stop="if ($refs.next) {$refs.next.click()}"
     x-data="">
  <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0">{% block head %}{% endblock %}</div>
  <div class="flex shrink overflow-auto grow">
    {% block side_panel %}{% endblock %}
    <div class="px-6 py-2 space-y-6 overflow-y-scroll w-full shrink grow">{% block body %}{% endblock %}</div>
  </div>
  <div class="p-4 border-t">{% block footer %}{% endblock %}</div>
</div>