/* ============================================================
   compare.css  —  Styles for the Multi-Ticker Comparison page
   (/compare, loaded by compare.html)
   ============================================================ */

/* ── Page-level layout ── */
.compare-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* ── Controls panel ── */
.compare-controls {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.compare-controls h2 {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-primary-bg);
  padding-bottom: var(--spacing-xs);
}

.control-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  align-items: flex-end;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-group label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.control-group input[type="text"],
.control-group select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  min-width: 180px;
}

/* ── Ticker input ── */
#tickerInput {
  width: 320px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-primary);
  box-sizing: border-box;
}

/* ── Slider rows ── */
.slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-row input[type="range"] {
  width: 130px;
}

.slider-val {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary-light);
  min-width: 50px;
}

/* ── Chart height slider value ── */
#chartHeightVal {
  color: var(--color-primary-light);
  font-weight: 700;
}

/* ── Button row ── */
.btn-row {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  align-items: flex-end;
}

.btn-compare {
  padding: 10px 24px;
  background: var(--color-primary-light);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-compare:hover { background: var(--color-primary); }

.btn-compare:disabled {
  background: var(--color-neutral-pale);
  cursor: not-allowed;
}

.btn-clear-all {
  padding: 10px 20px;
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-all:hover {
  background: var(--color-danger-bg);
}

.btn-refresh-all {
  padding: 10px 20px;
  background: transparent;
  color: var(--color-success);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-refresh-all:hover { background: var(--color-success-bg); }

/* ── Auto-refresh row ── */
.auto-refresh-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.auto-refresh-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ── Status bar ── */
#compareStatus {
  margin-top: var(--spacing-sm);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-left: 3px solid var(--color-primary-light);
  min-height: 34px;
}

/* ── Auto-refresh countdown timer ── */
#autoRefreshTimer {
  font-weight: 700;
  color: var(--color-primary-light);
}

/* ── Charts grid ── */
#chartsStack {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}

/* Empty state spans all columns */
#emptyState {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

#emptyState .empty-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-md);
}

/* ── Ticker cards ── */
.ticker-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow 0.2s;
  min-width: 0; /* prevents grid blow-out */
}

.ticker-card:hover { box-shadow: var(--shadow-lg); }

.ticker-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.ticker-card-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.ticker-symbol {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.ticker-badge {
  font-size: var(--font-size-xs);
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 600;
}

.ticker-meta {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.ticker-card-actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* ── Card icon buttons ── */
.btn-icon {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-icon-remove {
  color: var(--color-danger);
  border-color: var(--color-danger-bg);
}

.btn-icon-remove:hover {
  background: var(--color-danger-bg);
}

/* ── Chart wrapper inside card ── */
.ticker-chart-wrap {
  padding: var(--spacing-sm);
}

/* ── Loading / error states ── */
.chart-loading,
.chart-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--spacing-xl);
  min-height: 120px;
}

.chart-error { color: var(--color-danger); }

/* ── Loading spinner ── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--color-primary-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ── Responsive breakpoints ── */
@media (max-width: 700px) {
  .control-grid  { flex-direction: column; }
  #tickerInput   { width: 100%; }
  #chartsStack   { --grid-cols: 1 !important; }
}

@media (max-width: 1100px) {
  /* Cap at 2 cols on medium screens unless user explicitly chose more */
  #chartsStack { --grid-cols: min(var(--grid-cols, 2), 2); }
}