/* ==========================================================================
   Bulk Import — Tools

   Three screens: the hub that offers the templates and lists what has been
   imported, the upload form, and the check of one uploaded file.

   The hub and the upload form scroll as pages, because both are prose and
   panels rather than a table filling the viewport — which is what .index-page
   otherwise arranges for (see components/table). `.bulk-import__scroll` is how
   they opt out of it. The check screen does not opt out: it is a listing, and
   behaves like every other one.
   ========================================================================== */
.bulk-import__scroll {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Inside a scrolling page the tables size to their rows rather than fighting
   each other for the height the flex chain is handing out. */
.bulk-import__scroll .table-container {
  flex: 0 0 auto;
  min-height: 0;
  margin-bottom: 0;
}

/* == The hub: one block per kind of import == */
.bulk-import__kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1100px) {
  .bulk-import__kinds {
    grid-template-columns: 1fr;
  }
}

.bulk-import__kind,
.bulk-import__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.bulk-import__kind-header {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.bulk-import__kind-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-primary-dark);
  background-color: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}

.bulk-import__kind-icon svg {
  width: 22px;
  height: 22px;
}

.bulk-import__kind-title {
  font-size: var(--font-size-large);
  margin-bottom: var(--space-1);
}

.bulk-import__kind-summary,
.bulk-import__lead {
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

.bulk-import__kind-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
}

/* == The column reference, folded away until it is wanted == */
.bulk-import__columns-summary {
  cursor: pointer;
  font-size: var(--font-size-medium);
  font-family: var(--font-family-bold);
  font-weight: 600;
  color: var(--color-primary-dark);
  padding: var(--space-2) 0;
}

.bulk-import__columns-summary:hover {
  color: var(--color-primary-green);
}

.bulk-import__columns[open] .bulk-import__columns-summary {
  margin-bottom: var(--space-3);
}

.bulk-import__columns-note {
  margin-top: var(--space-3);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.bulk-import__requirement {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.bulk-import__requirement--required {
  color: var(--color-warning-dark);
}

.bulk-import__requirement--optional {
  color: var(--color-text-faint);
}

/* == The check: the numbers that decide what happens next == */
.bulk-import__summary {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.bulk-import__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.bulk-import__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bulk-import__figure-value {
  font-size: var(--font-size-xlarge);
  font-family: var(--font-family-bold);
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1;
}

.bulk-import__figure--good .bulk-import__figure-value {
  color: var(--color-success-dark);
}

.bulk-import__figure--bad .bulk-import__figure-value {
  color: var(--color-danger);
}

.bulk-import__figure-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.bulk-import__state,
.bulk-import__note {
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

.bulk-import__blocker {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-medium);
  color: var(--color-danger);
  background-color: var(--color-danger-light);
  border-radius: var(--radius-lg);
}

/* == Waiting on a job ==
   Checking a file and writing it both happen in the background, so this is what
   the page shows in the place the rows will be. Same shape as the report
   generator's own wait (see .report-run__progress in reports.css). */
.bulk-import__progress {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-green);
  border-radius: var(--radius-lg);
  background: var(--tint-green-10);
  font-size: var(--font-size-medium);
}

.bulk-import__progress-message {
  margin: 0;
}

.bulk-import__progress-spinner {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary-green);
  border-radius: 50%;
  animation: bulk-import-spin 0.9s linear infinite;
}

@keyframes bulk-import-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The page reloads itself every few seconds regardless, so the spin is
   decoration — nothing is lost by holding it still. */
@media (prefers-reduced-motion: reduce) {
  .bulk-import__progress-spinner {
    animation: none;
  }
}

/* == All rows / rows with problems == */
.bulk-import__row-toolbar {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.bulk-import__row-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.bulk-import__row-tab:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-border-strong);
}

.bulk-import__row-tab--active {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.bulk-import__row-number {
  width: 72px;
  color: var(--color-text-muted);
}

/* Everything wrong with one row, one line each. A row with four problems is
   shown with four, because the person fixing the file is doing it in another
   window and one problem per upload is how a morning disappears. */
.bulk-import__problems {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-small);
  color: var(--color-danger);
}