/* 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-section-tight {
  margin-bottom: 1rem;
}

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

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

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

.csv-import-stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.csv-import-stat-row-loose {
  display: flex;
  justify-content: space-between;
}

.csv-import-empty-state {
  text-align: center;
  padding: 2rem 0;
}

/* Headings */

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

.csv-import-summary-stat {
  font-size: 1.125rem;
  font-weight: 600;
}

/* 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-form-label {
  display: block;
  font-weight: 500;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.csv-import-file-input {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background: var(--surface-light, #f9fafb);
  color: var(--dark-gray);
  border: 1px solid var(--medium-gray);
  border-radius: 0.5rem;
}

.csv-import-file-input:focus {
  outline: none;
}

.csv-import-file-input-clickable {
  cursor: pointer;
}

.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);
}

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

/* 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;
}

/* Tab navigation (review screen) */

.csv-import-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--medium-gray);
  margin-bottom: 1.5rem;
}

/* Horizontal-scroll wrapper for wide tables */

.csv-import-scroll-x {
  overflow-x: auto;
}

.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-modal-row-description {
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  font-size: 0.85em;
  white-space: pre-wrap;
  background: var(--light-gray);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.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;
  }
}

/* Manual alias assignment folded under an unknown-element card's actions. */
.unknown-element-manual-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.unknown-element-manual-label {
  font-size: 0.75rem;
  font-weight: 500;
}

.unknown-element-manual-input {
  flex: 1 1 12rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem;
  border: 1px solid var(--medium-gray-light);
  border-radius: 4px;
}

.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;
}

.auto-commit-conflict-option {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0;
  cursor: pointer;
}

/* Review page footer
 *
 * Three meaning-based clusters (reprocess variants, commit actions,
 * destructive/navigation) instead of one fused eight-button strip. Basecoat's
 * `.button-group` is `inline-flex` with no wrapping and `width: fit-content`,
 * which is exactly what caused the old strip to overflow the viewport, so we
 * let groups wrap onto new lines here and let the reprocess set's segmented
 * control wrap internally too.
 */
.csv-import-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

/* 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). .action-link hard-codes mid/dark
 * tones tuned for the white cards elsewhere on this page, so on black it
 * reads as barely visible. Scope light-band overrides to just this
 * footer's note rather than changing the class globally. */
.csv-import-ai-note {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: color-mix(in oklch, var(--light-gray) 80%, transparent);
}

.csv-import-ai-note .action-link {
  color: var(--light-gray);
}

.csv-import-ai-note .action-link:hover,
.csv-import-ai-note .action-link:focus-visible {
  color: white;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Basecoat applies a generic `summary { border-radius; padding; width:
 * 100%; ... }` rule meant for its sidebar collapsible sections to every
 * `<summary>` element, which is what made this read as a light-gray
 * rounded pill instead of a quiet disclosure line. Reset it back to
 * text sized to its content, and use the same light-band color as the
 * action-link above so it's readable on the black footer. The caret is a
 * literal character in the label (see review_summary.rb's "▼" precedent)
 * because Basecoat also suppresses the native `::-webkit-details-marker`. */
.csv-import-advanced-toggle {
  display: inline-flex;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--light-gray);
  opacity: 0.8;
  font-size: 0.75rem;
  cursor: pointer;
}

.csv-import-advanced-toggle:hover,
.csv-import-advanced-toggle:focus-visible {
  background: none;
  color: var(--light-gray);
  opacity: 1;
  text-decoration: underline;
}

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

/* Compact review-summary band (review screen)
 *
 * Replaces the old three-tiled-card layout (Import Overview / Parse Status /
 * Processing Pipeline) with a single stat strip + meta line. It sits
 * directly on the page's dark band, like the h1/h2 above it, rather than
 * inside a white .card, so "Processing details" below can reuse
 * .csv-import-advanced-toggle (tuned for light text on a dark surface)
 * unmodified.
 */
.review-summary-band {
  margin-bottom: 1.5rem;
}

.review-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-bottom: 0.5rem;
}

.review-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.review-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--light-gray);
}

.review-stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--medium-gray);
}

.review-stat--success .review-stat-value {
  color: var(--success-color);
}

.review-stat--danger .review-stat-value {
  color: var(--danger-color);
}

.review-stat--warning .review-stat-value {
  color: var(--badge-warning);
}

.review-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--medium-gray);
}

.review-meta-item + .review-meta-item::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: var(--medium-gray);
}

/* .text-success/.text-danger/.text-warning have no global definition
 * anywhere in the app (dead classes carried over from an earlier markup
 * convention) - scope real color here rather than defining them globally,
 * which would also restyle every other latent usage across the app. */
.review-meta-line .text-success {
  color: var(--success-color);
}

.review-meta-line .text-danger {
  color: var(--danger-color);
}

.review-meta-line .text-warning {
  color: var(--badge-warning);
}

.review-meta-warning-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  background-color: color-mix(in oklch, var(--badge-warning) 25%, transparent);
  color: var(--badge-warning);
}

/* Basecoat's global <details> accordion reset (basecoat.css) animates via
 * `::details-content { block-size: calc-size(auto, size); ... }`. calc-size()
 * is a very new, Chromium-only CSS function; a browser that recognizes
 * `::details-content` as a selector but not the calc-size() value drops
 * that one declaration and falls back to the base rule's `block-size: 0`,
 * so the open content paints at full size but reserves zero height in the
 * layout - it visually overlaps the tabs/panel that follow it instead of
 * pushing them down. Force a universally-supported `auto` height and no
 * transition, scoped to this disclosure only (not a global <details> fix),
 * with the #review-summary id giving enough specificity to win regardless
 * of calc-size() support.
 */
#review-summary details[open] {
  height: auto;
}

#review-summary details[open]::details-content {
  block-size: auto;
  opacity: 1;
  transition: none;
}

.review-processing-details-content {
  margin-top: 0.75rem;
  /* The moved-verbatim content assumed it sat inside a white .card (which
   * sets color: var(--dark-gray)); now it's directly on the page's dark
   * band, so give it a readable base color and lighten the two muted
   * classes it uses for timestamps, following the same footer-scoped
   * override approach as .csv-import-ai-note .action-link above -
   * scoped here, not a global restyle of .text-muted/.csv-import-row-meta-offset. */
  color: var(--light-gray);
}

.review-processing-details-content .text-muted {
  color: color-mix(in oklch, var(--light-gray) 65%, transparent);
}

.review-processing-details-content .csv-import-row-meta-offset {
  color: color-mix(in oklch, var(--light-gray) 65%, transparent);
}

/* .csv-import-debug-snippet keeps its own light background (transformation
 * rules box) - force dark text back on inside it, since the container
 * override above would otherwise leave light-on-light text. */
.review-processing-details-content .csv-import-debug-snippet {
  color: var(--dark-gray);
}

/* Parse Status / Processing Pipeline / Auto-commit side by side on wide
 * screens instead of one narrow stacked column wasting the rest of the
 * band's width. minmax(260px, 420px) keeps each column readable without
 * letting a lone section stretch to the full band width, and auto-fit
 * collapses empty tracks naturally when a section has no data to render -
 * no placeholder columns to account for. */
.review-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
  gap: 1.5rem;
  align-items: start;
}

.review-detail-column {
  min-width: 0;
}

.review-detail-row {
  margin-bottom: 0.375rem;
}

.review-detail-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* Attached tabs (review screen)
 *
 * A dedicated .review-tab-bar/.review-tab pair rather than reusing
 * .tabs-nav/.tab-button (Components::Tabs' floating segmented-pill look,
 * which tabs.css hides below the 768px breakpoint in favor of a mobile
 * <select> this page doesn't render). These stay visible at every width,
 * and read as fused to the panel below rather than floating above it: the
 * wrapper carries the same solid dark background as the active tab, so the
 * seam between tab and panel disappears.
 */
.csv-import-review-tabs {
  background: var(--dark-gray);
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem 0.75rem 0;
  margin-bottom: 1.5rem;
}

.review-tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--medium-gray);
}

.review-tab {
  /* Basecoat's global `button { appearance: button }` reset leaves native
     platform chrome in control of the button face on some renderers, which
     silently wins over an author `background-color` - reset it so the
     active-state fill below actually paints instead of falling back to a
     native white button. */
  appearance: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--light-gray);
  opacity: 0.6;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
  cursor: pointer;
  margin-bottom: -2px;
}

.review-tab:hover {
  opacity: 0.9;
}

.review-tab:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--primary-color) 40%, transparent);
  outline-offset: 1px;
}

.review-tab.active,
.review-tab[aria-selected="true"] {
  opacity: 1;
  background-color: var(--dark-gray);
  border-color: var(--medium-gray);
  border-bottom-color: var(--dark-gray);
}

.csv-import-review-tabs [data-tabs-target="panel"] {
  padding: 0.75rem 0 1rem;
}

/* Unknown-elements count badge. Lives on the elements-tab-count span
 * itself (not a wrapper) because the Turbo Stream that updates the count
 * (`turbo_stream.update("elements-tab-count", ...)`) replaces that span's
 * innerHTML, which would wipe out any child element on every update. */
.tab-count-badge--warning {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: var(--badge-warning);
  color: white;
}

/* Unknown-elements panel decision grammar: the occurrences count is a
 * NAVIGATION (link look, persistent underline so it reads clickable in a
 * table); all row actions share the .btn-small size, with only the top
 * suggestion's accept carrying the filled affirm weight. */
.review-rows-link {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.review-rows-link:hover,
.review-rows-link:focus-visible {
  color: color-mix(in oklch, var(--primary-color) 75%, black 25%);
}

/* Quiet text disclosure for white cards: resets Basecoat's bare-element
 * summary pill (width/padding/radius) that otherwise renders every
 * <summary> as a gray button. */
.panel-disclosure-toggle {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
}

.panel-disclosure-toggle:hover,
.panel-disclosure-toggle:focus-visible {
  color: var(--dark-gray);
  text-decoration: underline;
}

/* Basecoat styles details[open] > summary with its own background at
 * higher specificity than a lone class; mirror the reset for the open
 * state so the toggle stays a quiet text line while expanded. */
details[open] > .panel-disclosure-toggle {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-secondary, #6b7280);
}