{# Slide-over panel — no Alpine, uses data-dz-slide-over + CSS transitions #}
{# Parameters: panel_id (optional, default: 'slide-over') #}
{% set panel_id = panel_id | default('slide-over') %}
<div data-dz-toggleable data-dz-slide-over id="{{ panel_id }}">

  {# Backdrop #}
  <div data-dz-show="backdrop" data-dz-close
       class="fixed inset-0 bg-black/30 z-40"
       style="display:none;">
  </div>

  {# Panel #}
  <div data-dz-show="panel"
       class="fixed inset-y-0 right-0 z-50 w-full max-w-md bg-base-100 shadow-xl overflow-y-auto"
       style="display:none;">

    {# Header #}
    <div class="flex items-center justify-between p-4 border-b border-base-300">
      <h3 class="text-lg font-semibold" id="{{ panel_id }}-title">Details</h3>
      <button data-dz-close class="btn btn-ghost btn-sm btn-circle">&times;</button>
    </div>

    {# Content - HTMX swaps into here #}
    <div id="{{ panel_id }}-content" class="p-4">
      <p class="text-base-content/50">Select an item to view details.</p>
    </div>
  </div>
</div>