/* === Mapping UX fixes (responsive, no scrollbar) === */
#mapping .map-header,
#mapping .map-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: center;
}

/* Keine horizontalen Scrollbalken im Mapping-Bereich */
#mapping,
#mapping .mapping-grid,
#mapping .mapping-table,
#mapping .fields-grid,
#mapping .map-wrap {
  overflow-x: hidden !important;
}

/* Spalten dürfen schrumpfen (sonst entstehen Scrollbars) */
#mapping .map-header > *,
#mapping .map-row > * {
  min-width: 0; /* very important for flex/grid shrink */
}

/* Dropdowns füllen die Spaltenbreite */
#mapping select,
#mapping .select,
#mapping .select select {
  width: 100%;
  max-width: 100%;
}

/* Info-Icon ohne Außenrahmen */
#mapping .help-icon,
#mapping [data-icon="info"],
#mapping .info-icon,
#mapping .map-header .info,
#mapping .map-row .info {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
}

/* Auch beim Fokus kein Browser-Outline */
#mapping .help-icon:focus,
#mapping [data-icon="info"]:focus,
#mapping .info-icon:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* === Mapping Table: keine Horizontal-Scrollbars, automatische Umbrüche === */
#mapping .map-table {
  table-layout: fixed;
  width: 100%;
}
#mapping .map-table th,
#mapping .map-table td {
  white-space: normal !important;   /* ui-core.css überschreiben */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Sicherstellen, dass kein Wrapper wieder Scroll erzwingt */
#mapping .table-wrap,
#mapping .map-wrap { overflow-x: hidden !important; }

/* Graue Hintergründe im Mapping entfernen */
#mapping .table-wrap { background: transparent !important; }
#mapping .contacts thead th { background: transparent !important; }

/* Info-Icon (?) ohne Außenrahmen - ui-core.css setzt border auf .map-hint */
#mapping .map-hint {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
