/* The Import tab (ui/schedule/import/). Tokens only: ui/tokens.css. */

.imp-panel {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.imp-panel__title {
  font-size: var(--t-lg);
  line-height: var(--lh-lg, 1.3);
  font-weight: var(--w-semibold);
}

.imp-panel > .sch-lead {
  margin-top: var(--s-2);
}

.imp-step {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
}

.imp-table th[scope="row"] {
  font-weight: var(--w-medium, 500);
  text-align: left;
}

.imp-table td,
.imp-table th {
  vertical-align: top;
}

.imp-table .field__input {
  min-width: 9rem;
  max-width: 100%;
}

.imp-mapping td:nth-child(3) .field__input {
  min-width: 14rem;
}

.imp-sample {
  max-width: 14rem;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}

/* A long file's rows scroll inside the page, not the page itself. */
.imp-scroll {
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}

.imp-preview tr[data-status="skip"] td,
.imp-preview tr[data-status="heading"] td {
  color: var(--ink-2);
}

.imp-note {
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.imp-counts {
  margin-top: var(--s-2);
  max-width: 46rem;
}

.imp-problems,
.imp-warnings {
  margin-top: var(--s-3);
  padding-left: var(--s-5);
  max-width: 46rem;
}

.imp-problems {
  color: var(--problem);
}

.imp-warnings {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.imp-refusal {
  margin-top: var(--s-3);
  max-width: 46rem;
  padding-left: var(--s-3);
  border-left: 3px solid var(--problem);
  color: var(--problem);
}

.imp-done {
  margin-top: var(--s-3);
  max-width: 46rem;
  padding-left: var(--s-3);
  border-left: 3px solid var(--accent);
}

.imp-clash {
  margin-top: var(--s-3);
}

.imp-clash__all {
  display: grid;
  gap: var(--s-2);
  max-width: 46rem;
  border: 0;
  padding: 0;
  margin: 0;
}

.imp-clash__all legend {
  padding: 0;
  margin-bottom: var(--s-2);
}

.imp-clash__option,
.imp-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 28px;
}

.imp-clash__option input,
.imp-check input {
  margin-top: 0.3em;
  accent-color: var(--accent);
}

.imp-clash > .field__input {
  display: block;
  margin-top: var(--s-3);
  max-width: 20rem;
}

.imp-check {
  margin-top: var(--s-4);
  max-width: 46rem;
}

.imp-go {
  margin-top: var(--s-5);
}

.imp-exports {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 0;
  list-style: none;
}

.imp-export {
  display: grid;
  grid-template-columns: 13rem 1fr;
  align-items: center;
  gap: var(--s-3);
}

.imp-export .btn {
  justify-content: flex-start;
}

.imp-export__what {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

@container (max-width: 520px) {
  .imp-export {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}