#mapping-dialog .dlg {
  width: min(1260px, 96vw) !important;
  max-width: 1260px !important;
  max-height: 90vh !important;
  padding: 20px 20px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#mapping-dialog .mapping-body {
  display: grid !important;
  grid-template-columns: minmax(520px, 1.15fr) minmax(420px, 0.85fr) !important;
  gap: 14px !important;
  min-height: 0;
}

#mapping-dialog .mapping-table-wrap,
#mapping-dialog #mapping-sample-table-wrap {
  max-height: 52vh !important;
  overflow: auto !important;
  border-radius: 12px !important;
}

#mapping-dialog .mapping-table th,
#mapping-dialog .mapping-table td,
#mapping-dialog #mapping-sample-table-wrap th,
#mapping-dialog #mapping-sample-table-wrap td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mapping-dialog .mapping-table td select {
  min-height: 38px !important;
}

#mapping-dialog .dlg-actions {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
  flex-wrap: nowrap !important;
}

#mapping-dialog .dlg-actions .btn {
  min-width: 210px !important;
}

@media (max-width: 1199px) {
  #mapping-dialog .dlg {
    width: min(1020px, 96vw) !important;
  }
  #mapping-dialog .mapping-body {
    grid-template-columns: minmax(420px, 1fr) minmax(320px, 1fr) !important;
  }
}

@media (max-width: 980px) {
  #mapping-dialog .dlg {
    width: min(720px, 96vw) !important;
    max-height: 92vh !important;
  }
  #mapping-dialog .mapping-body {
    grid-template-columns: 1fr !important;
  }
  #mapping-dialog .mapping-sample {
    margin-top: 2px !important;
  }
  #mapping-dialog .mapping-table-wrap,
  #mapping-dialog #mapping-sample-table-wrap {
    max-height: 30vh !important;
  }
}

@media (max-width: 560px) {
  #mapping-dialog {
    padding: 8px !important;
  }
  #mapping-dialog .dlg {
    width: 100% !important;
    max-height: 96dvh !important;
    border-radius: 16px !important;
    padding: 14px 12px 10px !important;
  }
  #mapping-dialog .dlg-title {
    font-size: 22px !important;
  }
  #mapping-dialog .mapping-controls {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #mapping-dialog .mapping-controls select {
    width: 100% !important;
    min-height: 40px !important;
  }
  #mapping-dialog .mapping-table-wrap {
    padding: 8px !important;
  }
  #mapping-dialog .mapping-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
  }
  #mapping-dialog .mapping-table thead {
    display: none !important;
  }
  #mapping-dialog .mapping-table tbody,
  #mapping-dialog .mapping-table tr,
  #mapping-dialog .mapping-table td {
    display: block !important;
    width: 100% !important;
  }
  #mapping-dialog .mapping-table tr {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 8px !important;
  }
  #mapping-dialog .mapping-table td {
    border: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
  }
  #mapping-dialog .mapping-table td:last-child {
    margin-bottom: 0 !important;
  }
  #mapping-dialog .mapping-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
  }
  #mapping-dialog #mapping-sample-table-wrap table {
    min-width: 520px !important;
  }
  #mapping-dialog .dlg-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--surface) !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #mapping-dialog .dlg-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}