{# Dragover highlight uses an inline data-flag instead of bg-surface-2 (which
   is barely distinguishable from bg-surface in dark mode). On dragover we
   swap the border color to the accent + intensify the background tint so the
   drop target is unambiguous in both themes. #}
<div class="relative border-2 border-dashed rounded-lg p-8 text-center bg-surface transition-colors"
     style="border-color: var(--color-hairline-strong);"
     id="drop-zone"
     hx-post="/imports/preview"
     hx-encoding="multipart/form-data"
     hx-trigger="change from:#csv-input"
     hx-include="#csv-input"
     hx-target="#import-modal-content"
     hx-swap="innerHTML"
     onclick="document.getElementById('csv-input').click()"
     ondragover="event.preventDefault();
                 this.dataset.dragActive='1';
                 this.style.borderColor='var(--color-accent)';
                 this.style.background='var(--color-signature-tint)';"
     ondragleave="if (event.target !== this) return;
                  delete this.dataset.dragActive;
                  this.style.borderColor='var(--color-hairline-strong)';
                  this.style.background='';"
     ondrop="event.preventDefault();
             delete this.dataset.dragActive;
             this.style.borderColor='var(--color-hairline-strong)';
             this.style.background='';
             const dt = new DataTransfer();
             for (const f of event.dataTransfer.files) dt.items.add(f);
             const inp = document.getElementById('csv-input');
             inp.files = dt.files; inp.dispatchEvent(new Event('change', { bubbles: true }));
             document.getElementById('import-modal').classList.remove('hidden');">
  <p>Drop one or more Schwab or Robinhood CSVs here or <a class="text-primary underline cursor-pointer">click to browse</a></p>
  <p class="text-xs text-label-2 mt-1">Transaction History &middot; Realized G/L &middot; max 50 MB each</p>
  <input type="file" id="csv-input" name="files" accept=".csv" multiple required form="import-form" class="hidden"
         data-drop-zone
         onchange="document.getElementById('import-modal').classList.remove('hidden');"/>
  <div data-testid="drop-zone-preview"
       class="hidden absolute inset-x-0 bottom-2 text-center text-[12px] text-label-2 pointer-events-none"></div>
</div>

<div id="import-modal" class="hidden fixed inset-0 bg-overlay-strong z-50 flex items-center justify-center"
     role="dialog"
     aria-modal="true"
     aria-label="Import preview"
     x-data
     x-on:keydown.window.escape="if (!$el.classList.contains('hidden')) $el.classList.add('hidden')"
     onclick="this.classList.add('hidden')">
  <div id="import-modal-content"></div>
</div>