/* CSV import workflow styles
 *
 * Used by Views::CsvImports::Index, New, Show, Review, Failures.
 * The screens share form, banner, and review-row patterns; named classes
 * here replace what was previously utility-class soup in the views.
 */

/* Layout wrappers */

.csv-import-card {
  background: var(--surface-white);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.csv-import-section {
  margin-bottom: 1.5rem;
}

.csv-import-stack {
  display: flex;
  flex-direction: column;
}

.csv-import-row {
  display: flex;
  gap: 0.5rem;
}

/* Headings */

.csv-import-section-heading {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Info banners */

.csv-import-info-banner {
  background: var(--info-bg, #eff6ff);
  border: 1px solid var(--info-border, #bfdbfe);
  border-radius: 0.25rem;
  padding: 0.75rem;
}

.csv-import-info-banner-large {
  background: var(--info-bg, #eff6ff);
  border: 1px solid var(--info-border, #bfdbfe);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.csv-import-info-banner-text {
  font-size: 0.875rem;
  color: var(--info-fg, #1e3a8a);
}

/* Form fields */

.csv-import-bullet-list {
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 1rem;
}

/* Helper / muted text */

.csv-import-helper-text {
  font-size: 0.75rem;
  color: var(--medium-gray);
}

.csv-import-helper-text-faint {
  font-size: 0.75rem;
  color: var(--light-gray);
}

.csv-import-row-meta {
  font-size: 0.875rem;
  color: var(--medium-gray);
}

/* Raw import data pane (Original Import Data card, rendered inside the
 * Import Data tab on the edit-row page). Bounded height with its own
 * scrollbars so hundreds of lines of JSON (or a raw CSV fallback dump)
 * don't run the page on forever.
 */
.csv-import-raw-pane {
  background: var(--surface-light, #f9fafb);
  padding: 1rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto;
}

/* Diagnostic / debug snippets shown alongside review rows */

.csv-import-debug-snippet {
  font-size: 0.75rem;
  background: var(--surface-light, #f9fafb);
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

.csv-import-debug-snippet-alt {
  font-size: 0.75rem;
  background: var(--surface-white);
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
}

/* Horizontal-scroll wrapper for wide tables */

.link-occurrence-modal-row {
  font-size: 0.875rem;
}

.link-modal-columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem;
  align-items: start;
}

.link-modal-candidates {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.link-modal-row {
  position: sticky;
  top: 0;
}

.link-modal-row-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.link-modal-edit {
  white-space: nowrap;
}

.link-suggestion {
  padding: 0.5rem 0;
  border-top: 1px solid var(--medium-gray);
}

.link-suggestion-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.link-suggestion-name {
  font-size: 1rem;
}

.link-suggestion-score {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--surface-white, #fff);
  background: var(--medium-gray);
}

.link-suggestion-score--strong {
  background: var(--success-color);
}

.link-suggestion-score--good {
  background: var(--primary-color);
}

.link-suggestion-reasons {
  display: block;
  margin-top: 0.15rem;
}

.link-suggestion-preview {
  margin: 0.25rem 0;
  font-size: 0.85em;
  white-space: pre-wrap;
}

@media (max-width: 800px) {
  .link-modal-columns {
    grid-template-columns: 1fr;
  }

  .link-modal-row {
    position: static;
  }
}

.link-suggestion-form {
  margin-top: 0.25rem;
}

/* Auto-commit conflict-strategy preview modal. Mirrors the spacing and
 * radio/label alignment of .merge-conflict-row/-option
 * (app/assets/stylesheets/elements.css) so the two conflict-resolution
 * modals read as one family. */
.auto-commit-conflict-section {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--medium-gray);
}

.auto-commit-conflict-section:last-of-type {
  border-bottom: none;
}

.auto-commit-conflict-heading {
  font-weight: 700;
  margin: 0 0 0.375rem;
}

/* Review footer: three labeled action columns (Fix rows / Commit
 * workouts / This import) on .page-footer's black band. The eyebrow title
 * plus a caption under every action carry the explanation, so button
 * labels stay short; vertical rules keep the groups from reading as one
 * strip of interchangeable buttons. */
.csv-import-action-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.5rem 0;
}

.csv-import-action-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  max-width: 20rem;
  padding-right: 2.25rem;
}

.csv-import-action-column + .csv-import-action-column {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 2.25rem;
}

@media (max-width: 56rem) {
  .csv-import-action-column {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .csv-import-action-column + .csv-import-action-column {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 1.25rem;
  }
}

.csv-import-action-column-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--light-gray) 60%, transparent);
}

.csv-import-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.csv-import-action-caption {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--light-gray) 65%, transparent);
}

/* The review footer sits on .page-footer's black band (navigation.css).
 * body's default text color is --light-gray (near-white), which is why
 * plain text already reads fine there (e.g. .csv-import-footer-warning
 * below, which sets no color of its own). */
.csv-import-ai-note {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in oklch, var(--light-gray) 80%, transparent);
}

.csv-import-footer-warning {
  margin: 0;
  font-size: 0.875rem;
}

/* Unknown-elements panel decision grammar: all row actions share the
 * button-small size, with only the top suggestion's accept carrying the
 * filled primary weight. The occurrences count is a fact that navigates
 * (record-card-fact-link in record_cards.css). */

/* Moved from forms.css: csv_imports/failures.rb's retry-with-auto-create row. */
.importer-retry-form {
  background-color: var(--light-gray);
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}