/* The town hall's data (enterprises/data_exports, enterprises/imports): download all of it, load spreadsheets */

/* /enterprise's card: the two buttons side by side, wrapping on a narrow aside */
.data-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.data-export__list {
  margin: 0;
  padding-left: var(--space-5);

  li + li {
    margin-top: var(--space-1);
  }
}

/* imports#index: what an import does, in three numbered steps */
.import-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-8);

  li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  li::marker {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
  }
}

.import-steps__title {
  font-weight: var(--weight-medium);
}

/* imports#new: only the columns of the kind ticked in the form (without :has, all of them show) */
.record-layout:has(#import_kind_colonies:checked) .import-format:not([data-kind="colonies"]),
.record-layout:has(#import_kind_shelter_points:checked) .import-format:not([data-kind="shelter_points"]),
.record-layout:has(#import_kind_cats:checked) .import-format:not([data-kind="cats"]) {
  display: none;
}

/* Each column of a kind and what goes in it */
.import-columns {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);

  div {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) 1fr;
    gap: var(--space-3);
  }

  dt code {
    overflow-wrap: anywhere;
  }

  dd {
    margin: 0;
    color: var(--color-text-muted);
  }
}

/* imports#show: three big numbers (new · already there · errors) */
.import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.import-count {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-4) var(--space-5);
}

.import-count__number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.import-count__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.import-count--success .import-count__number {
  color: var(--color-success-text);
}

.import-count--danger .import-count__number {
  color: var(--color-danger-text);
}

/* The spreadsheet's row number, narrow and in digits that line up */
.import-table__line {
  width: 1%;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* New and repeated rows, folded: the card's header is what opens it */
.import-rows__summary {
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  /* A chevron that turns when open */
  &::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid var(--color-text-subtle);
    border-bottom: 2px solid var(--color-text-subtle);
    transform: rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-out);
  }
}

.import-rows[open] .import-rows__summary::after {
  transform: rotate(-135deg);
}

.import-rows__list {
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;

  li {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-1-5) var(--space-5);
  }
}

.import-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

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

  .import-summary {
    gap: var(--space-2);
  }

  .import-count {
    padding: var(--space-3);
  }

  .import-columns div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}