/* ================================================================
   Brokerr — Import Feature
   ================================================================ */

/* ---------- Import ---------- */
.import-dropzone {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-xl);
  padding: var(--sp-12) var(--sp-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.import-dropzone:hover, .import-dropzone.dragover {
  border-color: var(--color-secondary);
  background: rgba(13, 148, 136, 0.04);
}
.import-dropzone__icon {
  color: var(--color-gray-300);
  margin-bottom: var(--sp-3);
}
.import-mapping-table .select { width: 100%; }

/* Unmapped row highlight */
.import-row-unmapped {
  background: #FFFBEB;
}
.import-preview-cell {
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* -- Responsive -- */
@media (max-width: 768px) {
  .import-mapping-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .import-mapping-table table { min-width: 500px; }
  .import-preview > .flex { flex-direction: column; gap: var(--sp-2); }
  .import-preview .flex.gap-2 { flex-wrap: wrap; }
  .import-preview .flex.gap-2 .btn { flex: 1; min-width: 0; }
  .import-dropzone { padding: var(--sp-6) var(--sp-4); }
}