06/01 Implement PDF statement file import 2

app/templates/bank_import/index.html

@@ -12,7 +12,6 @@
   }
   #drop-zone.drag-over { border-color: var(--accent); background: #eff6ff; }
   #drop-zone.has-file  { border-color: #10b981; background: #f0fdf4; }
-  #drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
   #file-name { font-size: 13px; color: var(--muted); margin-top: 8px; }
 
   /* ── Steps ── */
@@ -61,9 +60,11 @@
     <div class="pcard">
       <div class="pcard-title mb-3">Upload Statement</div>
 
-      {# Drop zone #}
+      {# File input lives outside the drop zone so it never overlaps other controls #}
+      <input type="file" id="file-input" accept=".csv,.ofx,.qfx,.txt,.pdf" style="display:none;">
+
+      {# Drop zone — clicking it programmatically triggers the hidden file input #}
       <div id="drop-zone" class="mb-3">
-        <input type="file" id="file-input" accept=".csv,.ofx,.qfx,.txt,.pdf">
         <i class="bi bi-cloud-upload fs-2 text-muted d-block mb-2"></i>
         <div class="fw-medium" style="font-size:13px;">Drag &amp; drop or click to browse</div>
         <div class="text-muted" style="font-size:12px; margin-top:4px;">CSV, OFX, QFX, PDF</div>
@@ -269,6 +270,7 @@
   const dropZone  = $('drop-zone');
   const fileInput = $('file-input');
 
+  dropZone.addEventListener('click',     () => fileInput.click());
   dropZone.addEventListener('dragover',  e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
   dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
   dropZone.addEventListener('drop', e => {