/* Responsive contacts CSV mapping, intentionally isolated from wide data-table styles. */
.contact-import-dialog {
  width:min(760px,calc(100% - 24px));
  max-width:760px;
  border-radius:18px;
}
.contact-import-dialog .contact-import-content {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:14px;
  overflow-x:hidden;
  overflow-y:auto;
  min-width:0;
  min-height:0;
}
.contact-import-dialog[open] {
  max-height: min(880px, calc(100dvh - 36px));
}
.contact-import-content > p { margin:0; line-height:1.55; }
.contact-import-content > label { display:grid; gap:7px; min-width:0; font-weight:650; }
.contact-import-content > label input { width:100%; min-width:0; box-sizing:border-box; }
.contact-import-fields {
  display:block;
  flex:0 1 auto;
  min-height:180px;
  height:min(44dvh, 370px);
  min-width:0;
  overflow-x:hidden;
  overflow-y:scroll;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;
  scrollbar-color:#8a8197 transparent;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
}
.contact-import-fields::-webkit-scrollbar { width:9px; }
.contact-import-fields::-webkit-scrollbar-thumb {
  background:#a29aaf;
  border-radius:10px;
  border:2px solid var(--white);
}
.contact-import-field {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(155px,225px);
  align-items:center;
  gap:5px 15px;
  min-width:0;
  padding:12px 15px;
}
.contact-import-field + .contact-import-field { border-top:1px solid var(--line); }
.contact-import-field > span { min-width:0; font-size:13px; font-weight:650; }
.contact-import-field > select {
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.contact-import-field > small {
  grid-column:1 / -1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
}
.contact-import-progress:not(:empty) {
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--canvas);
  border-radius:10px;
}
.contact-import-content .actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:530px) {
  .contact-import-field {grid-template-columns:minmax(0,1fr);gap:7px;padding:12px;}
  .contact-import-field > small {grid-column:1;}
  .contact-import-dialog .contact-import-content {padding:16px;}
  .contact-import-fields {height:min(40dvh,320px);min-height:150px;}
}