/* ═══════════════════════════════════════════════════════════════
 * Telemetry Design System – Series Comparison Viewer + Two-Column Layout
 * Compiled from:
 *   components/_two-column-container.scss
 *   components/_series-comparison-viewer.scss
 * Token values from _tokens.scss (see comments inline).
 * ═══════════════════════════════════════════════════════════════ */

/* ── Two-column responsive container ──────────────────────────── */

.tds-two-column {
  display: grid;
  /* Ratios are overrideable via --tsc-left / --tsc-right CSS custom properties */
  grid-template-columns: var(--tsc-left, 1fr) var(--tsc-right, 1fr);
  gap: 12px; /* $spacing-xl */
  width: 100%;
  align-items: start;
}

.tds-two-column-left,
.tds-two-column-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Stack vertically on mobile screens */
@media (max-width: 768px) {
  .tds-two-column {
    grid-template-columns: 1fr;
    gap: 10px; /* $spacing-lg */
  }

  .tds-two-column-right {
    order: 2;
  }
}

/* ── Series comparison viewer shell ───────────────────────────── */

.tds-series-comparison-viewer {
  display: grid;
  gap: 10px; /* $spacing-lg */
}

.tds-series-comparison-viewer__title {
  margin: 0;
  font-size: 15px; /* $font-size-lg */
  color: var(--tds-text-heading);
}

/* List and map panes share the same surface treatment */
.tds-series-comparison-viewer__list,
.tds-series-comparison-viewer__map {
  background: var(--tds-bg-surface);
  border: 1px solid var(--tds-border-default);
  border-radius: 12px; /* $radius-xl */
  padding: 8px; /* $spacing-md */
  min-width: 0;
}

/* Telemetry summary strip below the plot */
.tds-series-comparison-viewer__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px; /* $spacing-sm */
}

.tds-series-comparison-viewer__summary > div {
  background: var(--tds-bg-surface);
  border: 1px solid var(--tds-border-default);
  border-radius: 12px; /* $radius-xl */
  padding: 6px; /* $spacing-sm */
}

.tds-series-comparison-viewer__summary span {
  display: block;
  color: var(--tds-text-secondary);
  font-size: 11px; /* $font-size-xs */
}

.tds-series-comparison-viewer__summary strong {
  display: block;
  margin-top: 4px; /* $spacing-xs */
  color: var(--tds-text-primary);
}

.tds-series-comparison-viewer__warnings {
  display: flex;
  gap: 4px; /* $spacing-xs */
  flex-wrap: wrap;
}

/* ── Selected row – strong visual indicator ──────────────────── */

/* Row-level highlight (Radzen data grid) */
.telemetry-grid-wrap .rz-data-row.series-comparison-row--selected,
.telemetry-grid-wrap .rz-data-row.ghostai-grid-row--selected {
  background: rgba(56, 189, 248, 0.22) !important;
  box-shadow: inset 4px 0 0 var(--tds-accent-text, #38bdf8);
  outline: none;
}

.telemetry-grid-wrap .rz-data-row.series-comparison-row--selected td,
.telemetry-grid-wrap .rz-data-row.ghostai-grid-row--selected td {
  color: var(--tds-text-primary);
  font-weight: 500;
}

/* Rank/ordinal chip inside the selected row */
.tds-series-comparison-viewer__list .series-comparison-row--selected,
.tds-series-comparison-viewer__list .ghostai-grid-row--selected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(56, 189, 248, 0.32);
  color: var(--tds-text-primary);
  font-weight: 700;
}

/* Compact mode: single column (e.g. in a modal) */
.tds-series-comparison-viewer--compact .tds-two-column {
  grid-template-columns: 1fr !important;
}