/* Import / export dialog (Teljes repertoár) — js/screens/repertoire/TransferDialog.js */

.modal.modal--wide {
  --modal-max-height: min(48rem, calc(100vh - 2 * var(--space-6)));
  width: min(60rem, calc(100vw - 2 * var(--space-4)));
  /* Only the body scrolls; a sub-pixel rounding must not add a second scrollbar on the dialog */
  overflow: hidden;
}

.transfer {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-3) var(--space-2);
}

.transfer__section + .transfer__section {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.transfer__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.transfer__title:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

.transfer__title--done svg {
  color: var(--color-status-online);
}

.transfer__text {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.transfer__buttons,
.transfer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.transfer__actions {
  justify-content: space-between;
  margin-top: var(--space-2);
}

.transfer .file-pick {
  margin-top: var(--space-3);
}

.transfer .btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Column reference */
.transfer__reference {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.transfer__reference summary {
  cursor: pointer;
  color: var(--color-text);
}

.transfer__column-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 2px var(--space-4);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.transfer__column-list strong {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Steps */
.transfer__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.transfer__step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.transfer__step-number {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.transfer__step--current {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.transfer__step--current .transfer__step-number {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.transfer__step--done {
  color: var(--color-text-muted);
}

.transfer__step--done .transfer__step-number {
  border-color: var(--color-accent-line);
  color: var(--color-accent);
}

.transfer__file {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.transfer__file svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.transfer__file strong {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* Messages (file level) */
.transfer__messages {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  list-style: none;
  font-size: var(--text-sm);
}

.transfer__messages li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.transfer__messages svg {
  flex-shrink: 0;
  margin-top: 3px;
}

.transfer__messages--error {
  border-color: var(--color-status-offline);
}

.transfer__messages--error svg {
  color: var(--color-status-offline);
}

.transfer__messages--warning svg {
  color: var(--color-status-pending);
}

/* Column mapping */
.transfer__mapping {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.transfer__map {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.transfer__map-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.transfer__required {
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}

.transfer__map--missing .field__input {
  color: var(--color-text-subtle);
}

.transfer__map .field__input[aria-invalid='true'] {
  border-color: var(--color-status-offline);
}

/* Preview */
.transfer__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.transfer__chip {
  padding: 2px var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.transfer__chip--new,
.transfer__chip--update {
  border-color: var(--color-accent-line);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.transfer__chip--error {
  border-color: var(--color-status-offline);
  color: var(--color-text);
}

.transfer__bulk {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.transfer__bulk .transfer__text {
  margin: 0;
}

.transfer__bulk-control,
.transfer__filter {
  width: fit-content;
  max-width: 100%;
}

.transfer__rows {
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  list-style: none;
}

.transfer-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 9.5rem 11rem;
  grid-template-areas:
    'number song status action'
    '.      notes notes notes';
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.transfer-row:last-child {
  border-bottom: 0;
}

.transfer-row--error {
  box-shadow: inset 3px 0 0 var(--color-status-offline);
}

.transfer-row--similar {
  box-shadow: inset 3px 0 0 var(--color-status-pending);
}

.transfer-row__number {
  grid-area: number;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.transfer-row__song {
  grid-area: song;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}

.transfer-row__title {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.transfer-row__artist {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.transfer-row__status {
  grid-area: status;
  justify-self: start;
  padding: 1px var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--color-text-muted);
}

.transfer-row__status--new {
  border-color: var(--color-accent-line);
  color: var(--color-text);
}

.transfer-row__status--error {
  border-color: var(--color-status-offline);
  color: var(--color-text);
}

.transfer-row__status--similar {
  border-color: var(--color-status-pending);
  color: var(--color-text);
}

.transfer-row__action {
  grid-area: action;
  min-width: 0;
}

.transfer-row__action .field__input {
  height: 2.25rem;
  font-size: var(--text-sm);
}

.transfer-row__action--fixed {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.transfer__notes {
  grid-area: notes;
  display: grid;
  gap: 2px;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.transfer__note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  overflow-wrap: anywhere;
}

.transfer__note svg {
  flex-shrink: 0;
  align-self: center;
}

.transfer__note strong {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.transfer__note--error svg {
  color: var(--color-status-offline);
}

.transfer__note--warning svg {
  color: var(--color-status-pending);
}

.transfer__from {
  color: var(--color-text-subtle);
  text-decoration: line-through;
}

.transfer__to {
  color: var(--color-text);
}

.transfer__to--cleared {
  font-style: italic;
  color: var(--color-status-offline);
}

.transfer__empty {
  padding: var(--space-6);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text-muted);
}

/* Confirmation */
.transfer__totals {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.transfer__totals strong {
  display: inline-block;
  min-width: 2.5ch;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.transfer__confirm-list {
  font-size: var(--text-sm);
}

.transfer__confirm-list summary {
  cursor: pointer;
}

.transfer__confirm-list ul {
  max-height: 12rem;
  margin: var(--space-2) 0 0;
  overflow-y: auto;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}

.transfer__note-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.transfer__note-line svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-status-pending);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 40rem) {
  .transfer__mapping {
    grid-template-columns: minmax(0, 1fr);
  }

  .transfer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'song   status'
      'number number'
      'action action'
      'notes  notes';
    row-gap: var(--space-1);
  }

  .transfer__buttons .btn,
  .transfer__actions .btn {
    flex: 1 1 auto;
  }

  .transfer__bulk-control,
  .transfer__filter {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .transfer__bulk-control .segmented__label,
  .transfer__filter .segmented__label {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
}