/**
 * Discovery Page Styles
 * 
 * A clean, modern design for the stock discovery/screener page.
 * Uses CSS custom properties for theming.
 */

/* =============================================================================
   CSS VARIABLES
   ============================================================================= */

:root {
  /* Colors - Clean light theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f3f5;
  --bg-hover: #e9ecef;
  
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #868e96;
  
  --accent-primary: #228be6;
  --accent-secondary: #1971c2;
  --accent-hover: #1c7ed6;
  
  --success: #2f9e44;
  --success-bg: rgba(47, 158, 68, 0.1);
  --danger: #e03131;
  --danger-bg: rgba(224, 49, 49, 0.1);
  --warning: #f59f00;
  
  --border: #dee2e6;
  --border-light: #e9ecef;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* Sizing */
  --sidebar-width: 280px;
  --header-height: 60px;
  
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =============================================================================
   LAYOUT
   ============================================================================= */

.discover-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.discover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  height: var(--header-height);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header-left h1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.back-link {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.back-link:hover {
  color: var(--accent-primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.data-freshness {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.freshness-item {
  white-space: nowrap;
}

.freshness-separator {
  color: var(--border);
}

.last-updated {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Auth container */
.auth-container {
  display: flex;
  align-items: center;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

.discover-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* =============================================================================
   FILTERS PANEL
   ============================================================================= */

.filters-panel {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transition: width 0.2s ease, min-width 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
}

.filters-panel.collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-right: none;
  opacity: 0;
  pointer-events: none;
}

.sidebar-toggle {
  width: 26px;
  min-width: 26px;
  height: 42px;
  margin-top: 12px;
  margin-left: -1px;
  padding: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-left-color: var(--bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-toggle:hover {
  color: var(--accent-primary);
  background: var(--bg-hover);
}

.filters-panel.collapsed + .sidebar-toggle {
  border-left-color: var(--border);
}

.filters-panel h2 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.filter-group {
  margin-bottom: var(--space-md);
}

.filter-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-group .filter-sublabel {
  margin-top: var(--space-sm);
}

.filter-select,
.filter-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.2);
}

.filter-select option {
  background: var(--bg-primary);
}

/* Numeric filter fields use text + decimal inputmode so mouse-wheel and
   arrow-key stepping cannot silently change manually entered values. */
.filter-input[inputmode="decimal"] {
  appearance: textfield;
  -moz-appearance: textfield;
  min-width: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.filter-input[inputmode="decimal"]::-webkit-inner-spin-button,
.filter-input[inputmode="decimal"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* Return/volatility filter rows - range inputs + period dropdown */
#return-filters-list {
  display: grid;
  gap: 0.45rem;
}

.return-filter-row,
.volatility-filter-row {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.return-filter-row .return-input,
.volatility-filter-row .filter-input,
.volatility-filter-row .volatility-input {
  flex: 1;
  min-width: 0;
}

.return-filter-row .return-range-sep,
.volatility-filter-row .volatility-range-sep {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.return-filter-row .return-period-select,
.volatility-filter-row .volatility-period-select {
  width: 58px;
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.return-filter-remove {
  width: 1.2rem;
  height: 1.65rem;
  flex: 0 0 1.2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.return-filter-remove:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.return-filter-remove:disabled {
  visibility: hidden;
}

.return-filter-add {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  color: var(--accent-primary);
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.return-filter-add:disabled {
  color: var(--text-muted);
  cursor: default;
}

.correlation-filter-row {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.correlation-filter-row .correlation-input {
  flex: 1;
  min-width: 0;
}

.correlation-filter-row .correlation-range-sep {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.correlation-filter-row .correlation-period-select {
  width: 58px;
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.filter-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-lg) 0;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.checkbox-grid label,
.checkbox-stack label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
}

.checkbox-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.checkbox-grid input[type="checkbox"],
.checkbox-stack input[type="checkbox"] {
  accent-color: var(--accent-primary);
}

/* Toggle buttons for asset type selection */
.toggle-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.toggle-btn {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}

.toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.toggle-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.filter-hint {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--text-secondary, var(--text-muted));
  cursor: pointer;
  user-select: none;
}

.filter-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent, #4f8cff);
  flex-shrink: 0;
}

.filter-checkbox:hover {
  color: var(--text-primary, inherit);
}

.apply-btn {
  width: 100%;
  padding: var(--space-md);
  margin-top: var(--space-lg);
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.apply-btn:hover {
  background: var(--accent-hover);
}

.apply-btn:active {
  transform: scale(0.98);
}

.hidden {
  display: none !important;
}

/* =============================================================================
   TOM SELECT OVERRIDES
   ============================================================================= */

.ts-wrapper {
  font-size: 0.85rem;
}

.ts-wrapper.multi .ts-control {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.ts-wrapper.multi .ts-control > .item {
  background: var(--accent-primary);
  color: white;
  border-radius: 3px;
  padding: 2px 6px;
  margin: 2px;
  font-size: 0.75rem;
}

.ts-wrapper.single .ts-control {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

.ts-dropdown {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.ts-dropdown .option {
  padding: 8px 12px;
  font-size: 0.85rem;
}

.ts-dropdown .option.active {
  background: var(--bg-hover);
}

.ts-dropdown .option:hover {
  background: var(--bg-hover);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.2);
}

/* =============================================================================
   RESULTS AREA
   ============================================================================= */

.results-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  overflow: hidden;
  position: relative;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.results-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.results-separator {
  margin: 0 var(--space-sm);
  color: var(--text-muted);
}

.sort-status {
  font-weight: 500;
  color: var(--accent-primary);
  cursor: help;
}

.sort-status-sep {
  /* Can be hidden on small screens if needed */
}

.results-actions {
  display: flex;
  gap: var(--space-sm);
}

.action-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}

.action-btn:hover:not(:disabled) {
  background: var(--bg-hover);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================================
   TABLE
   ============================================================================= */

.table-wrapper {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.discover-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.discover-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-tertiary);
}

.discover-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.discover-table th.sortable {
  cursor: pointer;
}

.discover-table th.sortable:hover {
  color: var(--accent-primary);
}

.discover-table th .sort-icon {
  font-size: 0.6rem;
  color: var(--accent-primary);
}

.discover-table th.sorted-asc,
.discover-table th.sorted-desc {
  color: var(--accent-primary);
  background: rgba(29, 155, 240, 0.1);
}

/* Highlight the primary sort column (first in returns list) */
.discover-table th.sorted-column {
  color: var(--accent-primary);
  background: rgba(29, 155, 240, 0.08);
  font-weight: 600;
}

.discover-table th.sorted-column .sort-icon {
  opacity: 1;
}

.discover-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;

  /* -----------------------------------------------------------------------
     Phase 3a: skip rendering of rows that are far off-screen.

     `content-visibility: auto` lets the browser short-circuit layout,
     paint, and hit testing for any row whose box is well outside the
     viewport. The SVG bar charts (5 per row) stay in the DOM, but the
     compositor never has to rasterize them while the user is scrolled
     elsewhere — which is the dominant memory cost on a tall table.

     `contain-intrinsic-size: auto 56px` provides a fallback size so the
     scrollbar stays stable before each row has been rendered once. The
     `auto` keyword tells the browser to remember each row's measured
     height after first paint, so subsequent scrolls don't re-trigger
     layout cost. 56px is a conservative typical row height; real rows
     may be taller (e.g. with 70px volatility chart) and that's fine —
     the size is only used as a placeholder before measurement.

     Sticky <thead> is unaffected because content-visibility lives on
     <tr>, not the table itself. Tooltips (position: fixed) escape row
     containment and continue to work normally.
     ----------------------------------------------------------------------- */
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
}

.discover-table tbody tr:hover {
  background: var(--bg-hover);
}

.discover-table td {
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
}

/* Ticker cell */
.discover-table .ticker-cell {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent-primary);
}

.discover-table .ticker-cell:hover {
  color: var(--accent-secondary);
  cursor: pointer;
}

/* Dense identity cell: ticker + company, metadata, then external links. */
.discover-table .ticker-company-cell {
  min-width: 330px;
  max-width: 440px;
  padding: 6px 12px;
  text-align: left;
  cursor: default;
}

.discover-table .ticker-company-cell:hover {
  color: inherit;
  cursor: default;
}

.ticker-company-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ticker-company-primary .ticker-symbol {
  flex: 0 0 52px;
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.ticker-company-primary .company-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Chart compare button (visible on row hover) */
.chart-compare-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 3px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Show chart button on row hover */
.discover-table tbody tr:hover .chart-compare-btn {
  opacity: 1;
}

.chart-compare-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--accent-primary);
}

.chart-compare-btn:active {
  background: rgba(0, 0, 0, 0.1);
}

/* Chart icon SVG */
.chart-compare-icon {
  width: 14px;
  height: 14px;
}

.discover-table .company-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.discover-table .company-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.discover-table .leveraged-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  color: #b45309;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.4);
  cursor: help;
}

.discover-table .company-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 2px;
}

.discover-table .ticker-company-cell .company-meta {
  padding-left: 58px;
}

.discover-table .company-meta-details {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover-table .asset-type-badge {
  flex-shrink: 0;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discover-table .asset-type-stock {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.12);
}

.discover-table .asset-type-etf {
  color: #047857;
  background: rgba(4, 120, 87, 0.13);
}

.discover-table .asset-type-fund {
  color: #c2410c;
  background: rgba(194, 65, 12, 0.13);
}

/* Yahoo/Google links embedded as the identity cell's third row. */
.discover-table .company-links {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  padding-left: 58px;
  white-space: nowrap;
}

.discover-table .company-links a {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.discover-table .company-links a:hover {
  color: var(--accent-secondary);
}

/* Price cells */
.discover-table .price-cell {
  text-align: right;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 8px 12px;
}

/* Sparkline cells */
.discover-table .sparkline-cell {
  padding: 6px 10px;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  position: relative;
}

.discover-table .sparkline-header {
  text-align: center;
  width: 150px;
}

.sparkline-svg {
  display: block;
  width: 100%;
  height: 40px;
}

.sparkline-empty {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Sparkline tooltip */
.sparkline-tooltip {
  display: none;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 99999;
  min-width: 320px;
  font-size: 0.85rem;
  pointer-events: none;
}

.sparkline-tooltip .tooltip-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.sparkline-tooltip .tooltip-chart {
  margin: 8px 0 12px;
}

.sparkline-tooltip .tooltip-chart svg {
  width: 240px;
  height: 80px;
  display: block;
}

.sparkline-tooltip .sparkline-legend {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.sparkline-tooltip .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sparkline-tooltip .legend-line {
  display: inline-block;
  width: 18px;
  border-top: 2px solid currentColor;
}

.sparkline-tooltip .legend-line.benchmark {
  border-top-style: dashed;
  border-top-color: #6b7280;
}

.sparkline-tooltip .tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  gap: 16px;
}

.sparkline-tooltip .tooltip-label {
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sparkline-tooltip .tooltip-value {
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: right;
}

.sparkline-tooltip .tooltip-value.positive {
  color: var(--success);
}

.sparkline-tooltip .tooltip-value.negative {
  color: var(--danger);
}

/* Range bar visual */
.sparkline-tooltip .range-bar-container {
  margin: 10px 0;
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.sparkline-tooltip .range-bar-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.sparkline-tooltip .range-bar {
  position: relative;
  height: 8px;
  background: linear-gradient(to right, var(--danger), #fbbf24, var(--success));
  border-radius: 4px;
  margin: 4px 0;
}

.sparkline-tooltip .range-bar-marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  background: var(--text-primary);
  border: 2px solid white;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sparkline-tooltip .drawdown-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-top: 6px;
}

.sparkline-tooltip .drawdown-info .drawdown-value {
  font-weight: 600;
  color: var(--danger);
}

/* Performance colors */
.discover-table .performance-positive {
  color: var(--success);
}

.discover-table .performance-negative {
  color: var(--danger);
}

/* Preset columns */
.discover-table .preset-return-cell {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: right;
  white-space: nowrap;
}

/* Ensure consistent width for return values */
.discover-table .return-value {
  display: inline-block;
  min-width: 58px;
  text-align: right;
}

.discover-table .rank-capsule {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  margin-left: 4px;
}

/* Numeric columns alignment (market cap onwards - column 4+) */
.discover-table td:nth-child(n+4) {
  text-align: right;
  font-family: var(--font-mono);
}

.discover-table th:nth-child(n+4) {
  text-align: right;
}

/* Sparkline column should be centered */
.discover-table .sparkline-cell {
  text-align: center;
}

/* Company column should be left-aligned */
.discover-table td:nth-child(3) {
  text-align: left;
}

/* Company info column (name + meta) is text, not numbers — keep it
   left-aligned so the name and the meta line start at the same edge.
   Overrides the nth-child(n+4) right-align rule above (the flex name line
   ignores text-align, so the two lines drifted apart). */
.discover-table td.company-info-cell {
  text-align: left;
  cursor: default;
}

.discover-table .preset-return-header {
  min-width: 70px;
  text-align: right;
}

/* Rank capsule */
.metric-rank-capsule {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 3px;
  border: 1px solid;
}

/* Multi-period summary */
.preset-summary-cell {
  position: relative;
  min-width: 160px;
}

.preset-summary-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  padding: 6px 12px;
}

.preset-summary-bar {
  flex: 1;
  min-width: 6px;
  max-width: 14px;
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
}

.preset-summary-cell:hover .preset-summary-bar {
  opacity: 0.8;
}

.preset-summary-monotonic {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 12px 6px;
}

.preset-summary-monotonic .mono-block {
  flex: 1;
  min-width: 6px;
  max-width: 14px;
  height: 6px;
  border-radius: 2px;
  opacity: 0.9;
}

.mono-up {
  background: var(--success);
}

.mono-down {
  background: var(--danger);
}

/* Era divider for multi-period visuals (separates <1Y | 1Y-5Y | >5Y) */
.preset-era-divider {
  width: 1px;
  height: 100%;
  min-height: 20px;
  border-left: 1px dashed rgba(128, 128, 128, 0.35);
  margin: 0 2px;
  align-self: stretch;
  flex-shrink: 0;
}

/* Era divider in monotonic indicator row */
.preset-summary-monotonic .preset-era-divider {
  min-height: 6px;
  height: 6px;
  margin: 0 1px;
}

/* ===========================================================================
   Phase 2: SVG-based multi-period bar charts
   ---------------------------------------------------------------------------
   Replaces the per-bar <div> + flexbox layout with a single <svg> per cell.
   The visual semantics intentionally mirror the legacy div-based charts so
   the user sees no behavior change — only a much cheaper render path.

   All SVGs share a common geometry contract emitted by `_buildBarChartSvg`:
     - rect.bar           — the main column rectangle
     - rect.bar.overflow  — bar that extends past the chart's "100%" line
     - line.ref-line      — per-column reference tick (benchmark)
     - line.era-divider   — vertical dashed separator between eras
     - rect.track         — per-column background box (current-DD only)
     - line.current-marker / line.drawdown-current-marker — position markers
     - line.baseline-*    — full-width horizontal guides
     - rect.mono-up / rect.mono-down — secondary monotonic strip cells

   Each chart type adds chart-specific rules (sizes, opacity, colors) below.
   The legacy `.preset-summary-chart` / `.preset-summary-bar` rules above
   are kept around since the EasyCompare base table still uses them.
   ========================================================================== */

/* --- Shared SVG primitives (apply to every chart type) -------------------- */
.preset-summary-svg,
.volatility-summary-svg,
.exclusive-returns-svg,
.sharpe-summary-svg,
.max-drawdown-svg,
.current-drawdown-svg,
.drawdown-svg {
  display: block;
  flex-shrink: 0;
  /* Prevent the SVG itself from being a hover target so the cell-level
     lazy tooltip stays the single hover surface. */
  pointer-events: none;
}

/* Re-enable pointer events on bars so the native <title> tooltip still
   fires when the user hovers a specific column. */
.preset-summary-svg .bar,
.volatility-summary-svg .bar,
.exclusive-returns-svg .bar,
.sharpe-summary-svg .bar,
.max-drawdown-svg .bar,
.current-drawdown-svg .bar {
  pointer-events: auto;
  transition: opacity 0.15s;
}

/* Era dividers — same dashed amber-grey across all charts. */
.preset-summary-svg .era-divider,
.volatility-summary-svg .era-divider,
.exclusive-returns-svg .era-divider,
.sharpe-summary-svg .era-divider,
.max-drawdown-svg .era-divider,
.current-drawdown-svg .era-divider {
  stroke: rgba(128, 128, 128, 0.35);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  pointer-events: none;
}

/* Default benchmark tick (amber). Sharpe / drawdown override stroke
   thickness below where they want a more prominent line. */
.preset-summary-svg .ref-line,
.volatility-summary-svg .ref-line,
.exclusive-returns-svg .ref-line,
.sharpe-summary-svg .ref-line-sharpe,
.max-drawdown-svg .ref-line,
.current-drawdown-svg .ref-line {
  stroke: #fbbf24;
  stroke-width: 1;
  pointer-events: none;
}

[data-theme="dark"] .preset-summary-svg .ref-line,
[data-theme="dark"] .volatility-summary-svg .ref-line,
[data-theme="dark"] .exclusive-returns-svg .ref-line,
[data-theme="dark"] .sharpe-summary-svg .ref-line-sharpe,
[data-theme="dark"] .max-drawdown-svg .ref-line,
[data-theme="dark"] .current-drawdown-svg .ref-line {
  opacity: 0.95;
}

/* --- Multi-period returns (rank-based bars + monotonic strip) ------------- */
.preset-summary-cell:hover .preset-summary-svg .bar {
  opacity: 0.8;
}

.preset-summary-svg .mono-up {
  fill: var(--success);
  opacity: 0.9;
}

.preset-summary-svg .mono-down {
  fill: var(--danger);
  opacity: 0.9;
}

/* --- Multi-period volatility (vol-magnitude bars, dashed 100% line) ------- */
.volatility-summary-cell:hover .volatility-summary-svg .bar {
  opacity: 0.8;
}

.volatility-summary-svg .baseline-100 {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  opacity: 0.4;
  pointer-events: none;
}

.volatility-summary-svg .baseline-floor {
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.3;
  pointer-events: none;
}

/* --- Multi-period exclusive returns (rank-based, no strip) ---------------- */
.exclusive-returns-summary-cell:hover .exclusive-returns-svg .bar {
  opacity: 0.8;
}

/* --- Multi-period Sharpe (bars rise/fall from a center baseline) ---------- */
.sharpe-summary-cell:hover .sharpe-summary-svg .bar {
  opacity: 0.8;
}

.sharpe-summary-svg .baseline-dashed {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  opacity: 0.4;
  pointer-events: none;
}

.sharpe-summary-svg .baseline-center {
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.5;
  pointer-events: none;
}

/* --- Drawdown charts (max + current share a few primitives) --------------- */
.max-drawdown-summary-cell:hover .max-drawdown-svg .bar,
.current-drawdown-summary-cell:hover .current-drawdown-svg .bar {
  opacity: 0.85;
}

.max-drawdown-svg .baseline-dashed,
.current-drawdown-svg .baseline-dashed {
  stroke: rgba(128, 128, 128, 0.25);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  pointer-events: none;
}

/* The drawdown reference tick wants to be slightly heavier than the
   default returns/volatility tick — same heuristic the legacy CSS used. */
.max-drawdown-svg .ref-line,
.current-drawdown-svg .ref-line {
  stroke-width: 2;
}

/* Current-DD background "track" — the soft grey box behind each bar. */
.current-drawdown-svg .current-drawdown-track {
  fill: rgba(128, 128, 128, 0.1);
  pointer-events: none;
}

/* Current-position marker on the bar (black on light, white on dark). */
.max-drawdown-svg .drawdown-current-marker,
.current-drawdown-svg .current-drawdown-marker {
  stroke: #1a1a1a;
  stroke-width: 2;
  pointer-events: none;
}

[data-theme="dark"] .max-drawdown-svg .drawdown-current-marker,
[data-theme="dark"] .current-drawdown-svg .current-drawdown-marker {
  stroke: #ffffff;
}

/* Multi-period tooltip (uses core positioning) */
.preset-summary-tooltip {
  display: none;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 99999;
  min-width: 280px;
  max-width: 440px;
  pointer-events: none;
  font-size: 0.8rem;
}

/* Wider tooltip when benchmark columns are present */
.preset-summary-tooltip:has(.has-benchmark) {
  min-width: 480px;
  max-width: 600px;
}

.preset-summary-tooltip .tooltip-header {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-light);
}

/* Ticker name in tooltip header - smaller font for reference */
.tooltip-ticker {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.5rem;
  background: var(--bg-secondary, #f3f4f6);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

.preset-summary-tooltip .tooltip-avg-rank {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
}

.preset-summary-tooltip .tooltip-note {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Legacy tooltip table (base class) */
.preset-summary-tooltip .tooltip-table {
  display: grid;
  grid-template-columns: 18px 38px 65px 45px 14px;
  gap: 2px 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Returns tooltip table with SPY columns (discovery override) */
.preset-summary-tooltip .returns-tooltip-table {
  display: grid;
  grid-template-columns: 18px 42px 65px 50px;
  gap: 1px 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* Avg Trend ATH/ATL hover breakdown — Period | Trend | Rank | Return.
   Uses `display: contents` rows like the existing returns table so the
   header underline aligns with each data row. Sized larger than the
   default preset tooltip so the per-period values are easy to read. */
.preset-summary-tooltip.avg-trend-tooltip {
  font-size: 0.95rem;
  min-width: 360px;
  padding: 0.75rem 1rem;
}

.preset-summary-tooltip.avg-trend-tooltip .tooltip-header {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.preset-summary-tooltip.avg-trend-tooltip .tooltip-ticker {
  font-size: 0.8rem;
}

.preset-summary-tooltip.avg-trend-tooltip .tooltip-avg-rank {
  font-size: 0.9rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.55rem;
}

.preset-summary-tooltip.avg-trend-tooltip .tooltip-note {
  font-size: 0.75rem;
  margin-bottom: 8px;
  line-height: 1.35;
}

.preset-summary-tooltip .avg-trend-tooltip-table {
  display: grid;
  grid-template-columns: 60px 70px 56px 80px;
  gap: 4px 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.preset-summary-tooltip .avg-trend-tooltip-table .tooltip-header-row {
  display: contents;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.preset-summary-tooltip .avg-trend-tooltip-table .tooltip-header-row > span {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}

.preset-summary-tooltip .avg-trend-tooltip-table .tooltip-header-row > span:not(:first-child) {
  text-align: right;
}

.preset-summary-tooltip .avg-trend-tooltip-table .tooltip-data-row {
  display: contents;
}

.preset-summary-tooltip .avg-trend-tooltip-table .tooltip-data-row > span {
  padding: 3px 0;
}

.preset-summary-tooltip .returns-tooltip-table.has-spy {
  grid-template-columns: 18px 42px 65px 50px 60px 65px;
}

.preset-summary-tooltip .returns-tooltip-table .tooltip-header-row {
  display: contents;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.preset-summary-tooltip .returns-tooltip-table .tooltip-header-row > span {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-light);
}

.preset-summary-tooltip .returns-tooltip-table .tooltip-data-row {
  display: contents;
}

.preset-summary-tooltip .returns-tooltip-table .tooltip-data-row > span {
  padding: 1px 0;
}

.preset-summary-tooltip .tooltip-dot {
  text-align: center;
  font-size: 0.8rem;
  line-height: 1;
}

.preset-summary-tooltip .tooltip-period {
  font-weight: 600;
  text-align: left;
  color: var(--text-secondary);
}

.preset-summary-tooltip .tooltip-return {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

.preset-summary-tooltip .tooltip-rank {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.preset-summary-tooltip .tooltip-spy {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.preset-summary-tooltip .tooltip-vs-spy {
  text-align: right;
  font-weight: 600;
  font-size: 0.7rem;
}

.preset-summary-tooltip .vs-spy-good {
  color: var(--success);
}

.preset-summary-tooltip .vs-spy-neutral {
  color: var(--warning, #f59e0b);
}

.preset-summary-tooltip .vs-spy-bad {
  color: var(--danger);
}

.preset-summary-tooltip .tooltip-monotonic {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  justify-self: center;
}

.preset-summary-tooltip .tooltip-row-positive .tooltip-return {
  color: var(--success);
}

.preset-summary-tooltip .tooltip-row-negative .tooltip-return {
  color: var(--danger);
}

/* =============================================================================
   MULTI-PERIOD VOLATILITY CHART
   ============================================================================= */

.volatility-summary-cell {
  position: relative;
  min-width: 260px;
}

.volatility-summary-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 70px;
  padding: 4px 8px;
  padding-top: 12px; /* Extra space for SPY lines that extend above bars */
  position: relative;
  overflow: visible;
}

/* Top reference line at 100% volatility */
.volatility-summary-chart::before {
  content: '';
  position: absolute;
  top: 16px; /* Adjusted for extra top padding */
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px dashed var(--text-muted);
  opacity: 0.4;
  pointer-events: none;
}

/* Bottom floor line */
.volatility-summary-chart::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px solid var(--text-muted);
  opacity: 0.3;
  pointer-events: none;
}

.volatility-summary-bar {
  flex: 1;
  min-width: 8px;
  max-width: 24px;
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
  position: relative;
  overflow: visible; /* Allow SPY line to extend outside bar */
}

.volatility-summary-cell:hover .volatility-summary-bar {
  opacity: 0.8;
}

/* Overflow: bars can extend slightly above the 100% line */
.volatility-summary-bar.overflow {
  /* Just allow the bar to be taller than the chart area - no extra styling needed */
  overflow: visible;
}

/* SPY reference line inside each bar */
.spy-reference-line {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 1px;
  background: #fbbf24;
  pointer-events: none;
  z-index: 2;
}

/* Volatility tooltip */
.volatility-summary-tooltip {
  display: none;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  max-width: 380px;
  pointer-events: none;
  font-size: 0.8rem;
}

/* Wider tooltip when benchmark columns are present */
.volatility-summary-tooltip:has(.has-benchmark) {
  min-width: 450px;
  max-width: 540px;
}

.volatility-summary-tooltip .tooltip-header {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
}

.volatility-summary-tooltip .tooltip-avg-rank {
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.3rem !important;
}

.volatility-tooltip-table {
  display: grid;
  grid-template-columns: 18px 40px 50px 50px 45px 45px;
  gap: 2px 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.volatility-tooltip-table .tooltip-header-row {
  display: contents;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.volatility-tooltip-table .tooltip-header-row > span {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-light);
}

.volatility-tooltip-table .tooltip-data-row {
  display: contents;
}

.volatility-tooltip-table .tooltip-data-row > span {
  padding: 1px 0;
}

.volatility-tooltip-table .tooltip-dot {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
}

.volatility-tooltip-table .tooltip-period {
  font-weight: 600;
  text-align: left;
  color: var(--text-secondary);
}

.volatility-tooltip-table .tooltip-vol {
  text-align: right;
  font-weight: 500;
}

.volatility-tooltip-table .tooltip-rank {
  text-align: right;
  color: var(--text-muted);
}

.volatility-tooltip-table .tooltip-spy {
  text-align: right;
  color: var(--text-muted);
}

.volatility-tooltip-table .tooltip-vs-spy {
  text-align: right;
  font-weight: 600;
}

.volatility-tooltip-table .vs-spy-good {
  color: var(--success);
}

.volatility-tooltip-table .vs-spy-neutral {
  color: var(--warning, #f59e0b);
}

.volatility-tooltip-table .vs-spy-bad {
  color: var(--danger);
}

/* Dark mode */
[data-theme="dark"] .volatility-summary-tooltip {
  background: #161b22;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .spy-reference-line {
  background: #fbbf24;
}

/* Exclusive Returns header */
.discover-table .exclusive-returns-summary-header {
  white-space: nowrap;
  text-align: center;
  min-width: 160px;
}

/* ============================================================================
   EXCLUSIVE RETURNS TOOLTIP
   ============================================================================ */

.exclusive-returns-tooltip {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
  font-size: 0.85rem;
  max-width: 480px;
  min-width: 400px;
}

/* Wider tooltip when benchmark columns are present */
.exclusive-returns-tooltip:has(.has-benchmark) {
  min-width: 540px;
  max-width: 640px;
}

.exclusive-returns-tooltip .tooltip-header {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.exclusive-returns-tooltip .tooltip-avg-rank {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.exclusive-returns-tooltip .tooltip-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-style: italic;
}

.exclusive-tooltip-table {
  display: grid;
  grid-template-columns: 18px 40px 65px 65px 50px 60px 55px;
  gap: 2px 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.exclusive-tooltip-table .tooltip-header-row {
  display: contents;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.exclusive-tooltip-table .tooltip-header-row > span {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}

.exclusive-tooltip-table .tooltip-data-row {
  display: contents;
}

.exclusive-tooltip-table .tooltip-data-row > span {
  padding: 2px 0;
}

.exclusive-tooltip-table .tooltip-dot {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
}

.exclusive-tooltip-table .tooltip-period {
  font-weight: 600;
  text-align: left;
  color: var(--text-secondary);
}

.exclusive-tooltip-table .tooltip-exclusive {
  text-align: right;
  font-weight: 600;
}

.exclusive-tooltip-table .tooltip-total {
  text-align: right;
  color: var(--text-muted);
}

.exclusive-tooltip-table .tooltip-rank {
  text-align: right;
  color: var(--text-muted);
}

.exclusive-tooltip-table .tooltip-spy {
  text-align: right;
  color: var(--text-muted);
}

.exclusive-tooltip-table .tooltip-vs-spy {
  text-align: right;
  font-weight: 600;
}

.exclusive-tooltip-table .vs-spy-good {
  color: var(--success);
}

.exclusive-tooltip-table .vs-spy-neutral {
  color: var(--warning, #f59e0b);
}

.exclusive-tooltip-table .vs-spy-bad {
  color: var(--danger);
}

/* Dark mode */
[data-theme="dark"] .exclusive-returns-tooltip {
  background: #161b22;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Hover to show tooltip */
.exclusive-returns-summary-cell:hover .exclusive-returns-tooltip {
  display: block;
}

/* Volatility header */
/* Trend consistency/smoothness column — hidden for now (kept in DOM so
   table column counts and alignment are unaffected). */
.discover-table th.trend-header,
.discover-table td.trend-cell {
  display: none;
}

/* Inline filter columns (Correlation, Volatility) shown next to Return */
.discover-table .correlation-summary-header,
.discover-table .volatility-filter-header {
  white-space: nowrap;
  text-align: right;
}

.discover-table .correlation-cell,
.discover-table .volatility-filter-cell {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
  cursor: help;
}

.discover-table .correlation-cell .correlation-empty,
.discover-table .volatility-filter-cell .volatility-filter-empty {
  color: var(--text-muted);
}

.correlation-tooltip .tooltip-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.correlation-tooltip .tooltip-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  max-width: 240px;
}

.correlation-tooltip .correlation-tooltip-table {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 16px;
  font-size: 0.8rem;
}

.correlation-tooltip .tooltip-header-row {
  display: contents;
  font-weight: 600;
  color: var(--text-muted);
}

.correlation-tooltip .tooltip-header-row span,
.correlation-tooltip .tooltip-data-row span {
  text-align: right;
}

.correlation-tooltip .tooltip-header-row span:first-child,
.correlation-tooltip .tooltip-data-row span:first-child {
  text-align: left;
}

.correlation-tooltip .tooltip-data-row {
  display: contents;
}

.discover-table .volatility-summary-header {
  white-space: nowrap;
  text-align: center;
  min-width: 240px;
}

/* ============================================================================
   SHARPE RATIO MULTI-PERIOD CHART
   ============================================================================ */

.sharpe-summary-cell {
  position: relative;
  min-width: 260px;
}

.sharpe-summary-chart {
  display: flex;
  align-items: center; /* Center aligned for baseline at middle */
  gap: 3px;
  height: 60px; /* Taller for up/down bars */
  padding: 4px 8px;
  position: relative;
  overflow: visible;
}

/* Top reference line at Sharpe +3.0 */
.sharpe-summary-chart::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px dashed var(--text-muted);
  opacity: 0.4;
  pointer-events: none;
}

/* Center baseline line at Sharpe 0 */
.sharpe-summary-chart .center-baseline {
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px solid var(--text-muted);
  opacity: 0.5;
  pointer-events: none;
}

/* Bottom reference line at Sharpe -3.0 */
.sharpe-summary-chart::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px dashed var(--text-muted);
  opacity: 0.4;
  pointer-events: none;
}

.sharpe-bar-wrapper {
  flex: 1;
  min-width: 8px;
  max-width: 24px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sharpe-summary-bar {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 2px;
  transition: opacity 0.15s;
}

/* Positive Sharpe - bars go UP from center */
.sharpe-summary-bar.positive {
  bottom: 50%;
  border-radius: 2px 2px 0 0;
}

/* Negative Sharpe - bars go DOWN from center */
.sharpe-summary-bar.negative {
  top: 50%;
  border-radius: 0 0 2px 2px;
}

.sharpe-summary-cell:hover .sharpe-summary-bar {
  opacity: 0.8;
}

/* SPY reference line for Sharpe */
.spy-reference-line-sharpe {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 1px;
  background: #fbbf24;
  pointer-events: none;
  z-index: 2;
}

/* Sharpe tooltip */
.sharpe-summary-tooltip {
  display: none;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  max-width: 380px;
  pointer-events: none;
  font-size: 0.8rem;
}

/* Wider tooltip when benchmark columns are present */
.sharpe-summary-tooltip:has(.has-benchmark) {
  min-width: 450px;
  max-width: 540px;
}

.sharpe-summary-tooltip .tooltip-header {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-light);
}

.sharpe-summary-tooltip .tooltip-avg-rank {
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.3rem !important;
}

.sharpe-tooltip-table {
  display: grid;
  grid-template-columns: 18px 40px 55px 50px 55px 50px;
  gap: 2px 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.sharpe-tooltip-table .tooltip-header-row {
  display: contents;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sharpe-tooltip-table .tooltip-header-row > span {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-light);
}

.sharpe-tooltip-table .tooltip-data-row {
  display: contents;
}

.sharpe-tooltip-table .tooltip-data-row > span {
  padding: 1px 0;
}

.sharpe-tooltip-table .tooltip-dot {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
}

.sharpe-tooltip-table .tooltip-period {
  font-weight: 600;
  text-align: left;
  color: var(--text-secondary);
}

.sharpe-tooltip-table .tooltip-sharpe {
  text-align: right;
  font-weight: 500;
}

.sharpe-tooltip-table .tooltip-rank {
  text-align: right;
  color: var(--text-muted);
}

.sharpe-tooltip-table .tooltip-spy {
  text-align: right;
  color: var(--text-muted);
}

.sharpe-tooltip-table .tooltip-vs-spy {
  text-align: right;
  font-weight: 600;
}

.sharpe-tooltip-table .vs-spy-good {
  color: var(--success);
}

.sharpe-tooltip-table .vs-spy-neutral {
  color: var(--warning, #f59e0b);
}

.sharpe-tooltip-table .vs-spy-bad {
  color: var(--danger);
}

/* Sharpe header */
.discover-table .sharpe-summary-header {
  white-space: nowrap;
  text-align: center;
  min-width: 240px;
}

.discover-table .drawdown-range-summary-header {
  white-space: nowrap;
  text-align: center;
  min-width: 240px;
}

/* ============================================================================
   DRAWDOWN RANGE MULTI-PERIOD CHART
   ============================================================================ */

.drawdown-range-summary-cell {
  position: relative;
  min-width: 240px;
}

.drawdown-range-chart {
  display: flex;
  align-items: flex-start; /* Bars hang from top */
  gap: 3px;
  height: 54px;
  padding: 6px 10px;
  position: relative;
}

/* Baseline guides (dashed lines at 0% and 100%) */
.drawdown-range-chart::before,
.drawdown-range-chart::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px dashed rgba(128, 128, 128, 0.25);
  pointer-events: none;
}

.drawdown-range-chart::before {
  top: 6px; /* Top baseline (0% drawdown) */
}

.drawdown-range-chart::after {
  bottom: 6px; /* Bottom baseline (100% drawdown) */
}

.drawdown-range-bar {
  flex: 1;
  min-width: 8px;
  /* No max-width - bars expand to fill available space */
  position: relative;
  border-radius: 0 0 2px 2px; /* Rounded at bottom since bars hang down */
  transition: opacity 0.15s;
  overflow: visible; /* Allow reference line to extend below bar */
}

.drawdown-range-summary-cell:hover .drawdown-range-bar {
  opacity: 0.85;
}

/* Current drawdown marker (black line) - shows where current price is within max DD range */
.drawdown-current-marker {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 1px;
  z-index: 2;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Make SPY reference line more visible in drawdown bars */
.drawdown-range-bar .spy-reference-line {
  height: 2px;
  left: -1px;
  right: -1px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
  bottom: unset; /* Use top positioning since bars hang from top */
}

[data-theme="dark"] .drawdown-current-marker {
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.drawdown-range-track {
  display: none; /* Not needed with new design */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: rgba(31, 35, 40, 0.08);
}

.drawdown-range-drawdown {
  display: none; /* Not needed with new design */
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}

/* Current price marker - visible black line */
.drawdown-range-marker {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 3px;
  background: #1a1a1a;
  border-radius: 1px;
  z-index: 2;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

/* =============================================================================
   CURRENT DRAWDOWN SUMMARY (separate column from Max Drawdown)
   Shows current position relative to period highs
   ============================================================================= */

.current-drawdown-chart {
  display: flex;
  gap: 3px;
  align-items: flex-start;
  height: 54px;
  padding: 6px 10px;
  position: relative;
}

/* Baseline guides for current drawdown (dashed lines at 0% and 100%) */
.current-drawdown-chart::before,
.current-drawdown-chart::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 1px dashed rgba(128, 128, 128, 0.25);
  pointer-events: none;
}

.current-drawdown-chart::before {
  top: 6px; /* Top baseline (0% drawdown) */
}

.current-drawdown-chart::after {
  bottom: 6px; /* Bottom baseline (100% drawdown) */
}

/* Container for each current drawdown bar (fixed 100% height) */
.current-drawdown-bar-container {
  flex: 1;
  min-width: 8px;
  /* No max-width - bars expand to fill available space */
  height: 100%;
  position: relative;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 2px;
  overflow: visible;
}

/* The filled portion showing current drawdown depth */
.current-drawdown-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 2px 2px 0 0;
  transition: height 0.2s ease;
}

/* Current position marker line */
.current-drawdown-marker {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 1px;
  z-index: 3;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .current-drawdown-marker {
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Benchmark reference line for current drawdown */
.current-drawdown-bar-container .spy-reference-line,
.current-drawdown-bar-container .current-dd-ref {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 2px;
  background: #f59e0b;
  z-index: 2;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Hover effect */
.current-drawdown-summary-cell:hover .current-drawdown-bar-container {
  opacity: 0.85;
}

/* Max drawdown summary cell styling */
.max-drawdown-summary-cell {
  position: relative;
  min-width: 240px;
}

/* Current drawdown cell needs same min-width */
.current-drawdown-summary-cell {
  position: relative;
  min-width: 240px;
}

/* Drawdown modal overlay */
.drawdown-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Drawdown modal - polished for social sharing */
.drawdown-modal {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 640px;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  font-size: 0.8rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.drawdown-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-light, #e5e7eb);
}

.drawdown-modal .modal-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawdown-modal .modal-ticker {
  font-weight: 800;
  font-size: 1.1rem;
  color: #1a1a2e;
  letter-spacing: -0.01em;
}

.drawdown-modal .modal-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
}

.drawdown-modal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s;
}

.drawdown-modal .modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
}

.drawdown-modal .tooltip-avg-rank {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}

.drawdown-modal .tooltip-note {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  margin-bottom: 10px;
  text-align: right;
  font-style: italic;
}

.drawdown-modal .tooltip-subtext {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted, #9ca3af);
  margin-top: 2px;
  font-style: italic;
}

/* Range visual header in tooltip */
.tooltip-range-visual {
  background: linear-gradient(135deg, var(--bg-subtle, #f8f9fa) 0%, #eef1f5 100%);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.tooltip-range-title {
  font-size: 0.72rem;
  color: var(--text-secondary, #5a6270);
  margin-bottom: 10px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tooltip-range-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 44px;
  padding: 0 8px;
}

.tooltip-range-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 18px;
  max-width: 28px;
}

.tooltip-range-bar {
  width: 100%;
  height: 32px;
  border-radius: 3px;
  position: relative;
}

.tooltip-range-marker {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 3px;
  background: #1a1a1a;
  border-radius: 1px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

.tooltip-range-bar-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 3px;
  text-align: center;
}

/* New drawdown tooltip table - polished grid */
.drawdown-tooltip-table {
  display: grid;
  gap: 4px 12px;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* =============================================================================
   MAX DRAWDOWN TABLE - Cols: indicator | period | high | low | max dd | rank
   ============================================================================= */
.drawdown-tooltip-table.max-dd-table {
  grid-template-columns: 22px 46px 80px 80px 64px 54px;
}

.drawdown-tooltip-table.max-dd-table.has-benchmark {
  /* + benchmark | bench rank | diff */
  grid-template-columns: 22px 46px 80px 80px 64px 54px 68px 54px 62px;
}

.drawdown-tooltip-table.max-dd-table.has-benchmark.has-spy {
  /* + spy | spy rank | spy diff */
  grid-template-columns: 22px 46px 80px 80px 64px 54px 68px 54px 62px 68px 54px 62px;
}

/* =============================================================================
   CURRENT DRAWDOWN TABLE - Cols: indicator | period | high | current | curr dd | recovery | rank
   ============================================================================= */
.drawdown-tooltip-table.current-dd-table {
  grid-template-columns: 22px 46px 80px 68px 64px 68px 54px;
}

.drawdown-tooltip-table.current-dd-table.has-benchmark {
  /* + benchmark | bench rank | diff */
  grid-template-columns: 22px 46px 80px 68px 64px 68px 54px 68px 54px 62px;
}

.drawdown-tooltip-table.current-dd-table.has-benchmark.has-spy {
  /* + spy | spy rank | spy diff */
  grid-template-columns: 22px 46px 80px 68px 64px 68px 54px 68px 54px 62px 68px 54px 62px;
}

/* =============================================================================
   LEGACY TABLE (fallback) - Old structure with both curr dd and max dd
   ============================================================================= */
.drawdown-tooltip-table:not(.max-dd-table):not(.current-dd-table) {
  /* Cols: indicator | period | high | low | latest | curr dd | max dd | rank */
  grid-template-columns: 22px 46px 80px 80px 68px 64px 64px 54px;
}

.drawdown-tooltip-table:not(.max-dd-table):not(.current-dd-table).has-benchmark {
  grid-template-columns: 22px 46px 80px 80px 68px 64px 64px 54px 68px 54px 62px;
}

.drawdown-tooltip-table:not(.max-dd-table):not(.current-dd-table).has-benchmark.has-spy {
  grid-template-columns: 22px 46px 80px 80px 68px 64px 64px 54px 68px 54px 62px 68px 54px 62px;
}

/* Benchmark column group - light blue background */
.drawdown-tooltip-table .bench-col {
  background: rgba(59, 130, 246, 0.08);
  margin: -3px -6px;
  padding: 3px 6px;
}

.drawdown-tooltip-table .tooltip-header-row .bench-col {
  background: rgba(59, 130, 246, 0.15);
  border-radius: 4px 4px 0 0;
  font-weight: 700;
}

/* SPY column group - light amber background */
.drawdown-tooltip-table .spy-col {
  background: rgba(245, 158, 11, 0.08);
  margin: -3px -6px;
  padding: 3px 6px;
}

.drawdown-tooltip-table .tooltip-header-row .spy-col {
  background: rgba(245, 158, 11, 0.15);
  border-radius: 4px 4px 0 0;
  font-weight: 700;
}

.drawdown-tooltip-table .tooltip-header-row {
  display: contents;
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.drawdown-tooltip-table .tooltip-header-row > span {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--border-light, #e5e7eb);
  white-space: nowrap;
}

.drawdown-tooltip-table .tooltip-data-row {
  display: contents;
}

.drawdown-tooltip-table .tooltip-data-row > span {
  padding: 5px 0;
}

.drawdown-tooltip-table .tooltip-data-row.worst-row {
  font-weight: 600;
}

/* Only highlight the period column for worst row, not all cells */
.drawdown-tooltip-table .tooltip-data-row.worst-row .tooltip-period {
  background: rgba(220, 38, 38, 0.12);
  margin: -3px -6px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #dc2626;
}

.drawdown-tooltip-table .row-indicator {
  font-size: 0.75rem;
  text-align: center;
  opacity: 0.9;
}

.drawdown-tooltip-table .tooltip-period {
  font-weight: 700;
  color: #1a1a2e;
}

.drawdown-tooltip-table .tooltip-high,
.drawdown-tooltip-table .tooltip-low,
.drawdown-tooltip-table .tooltip-latest {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.drawdown-tooltip-table .tooltip-curr-dd,
.drawdown-tooltip-table .tooltip-max-dd,
.drawdown-tooltip-table .tooltip-drawdown,
.drawdown-tooltip-table .tooltip-rank,
.drawdown-tooltip-table .tooltip-bench,
.drawdown-tooltip-table .tooltip-bench-rank,
.drawdown-tooltip-table .tooltip-diff,
.drawdown-tooltip-table .tooltip-spy,
.drawdown-tooltip-table .tooltip-spy-rank,
.drawdown-tooltip-table .tooltip-spy-diff {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Add visual separators between column groups */
.drawdown-tooltip-table .bench-first {
  border-left: 2px solid rgba(59, 130, 246, 0.3);
  padding-left: 10px !important;
  margin-left: 6px;
}

.drawdown-tooltip-table .spy-first {
  border-left: 2px solid rgba(245, 158, 11, 0.3);
  padding-left: 10px !important;
  margin-left: 6px;
}

/* Dark mode for Sharpe */
[data-theme="dark"] .sharpe-summary-tooltip {
  background: #161b22;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .spy-reference-line-sharpe {
  background: #fbbf24;
}

/* Dark mode for Drawdown Range */
[data-theme="dark"] .drawdown-range-marker {
  background: #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .drawdown-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .drawdown-modal {
  background: linear-gradient(180deg, #1a1f2a 0%, #161b22 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .drawdown-modal .modal-ticker {
  color: #f0f0f5;
}

[data-theme="dark"] .drawdown-modal .modal-close {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .drawdown-modal .modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0f0f5;
}

[data-theme="dark"] .drawdown-modal .tooltip-avg-rank {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .drawdown-tooltip-table .bench-col {
  background: rgba(59, 130, 246, 0.12);
}

[data-theme="dark"] .drawdown-tooltip-table .spy-col {
  background: rgba(245, 158, 11, 0.12);
}

[data-theme="dark"] .tooltip-range-visual {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tooltip-range-title {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .tooltip-range-marker {
  background: #ffffff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .drawdown-tooltip-table .tooltip-period {
  color: #f0f0f5;
}

[data-theme="dark"] .drawdown-tooltip-table .tooltip-data-row.worst-row .tooltip-period {
  background: rgba(220, 38, 38, 0.2);
  color: #f87171;
}

/* Generic cell tooltip (core) */
.cell-tooltip {
  display: none;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  white-space: nowrap;
  min-width: 200px;
  pointer-events: none;
}

/* Average columns */
.avg-col {
  background: rgba(34, 139, 230, 0.08);
}

/* Benchmark comparison column */
.benchmark-col {
  background: rgba(139, 69, 180, 0.08);
}

/* Benchmark column header */
.discover-table .benchmark-header {
  white-space: nowrap;
  text-align: center;
}

.benchmark-cell {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  text-align: center;
}

.benchmark-cell .beats-count {
  font-weight: 600;
}

/* Start Date column */
.start-date-cell {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  text-align: center;
  color: var(--text-muted);
}

.discover-table .start-date-header {
  white-space: nowrap;
  text-align: center;
  min-width: 70px;
}

.benchmark-cell .avg-outperf {
  margin-left: 4px;
  font-size: 0.7rem;
}

.benchmark-cell.outperformer {
  color: var(--success);
}

.benchmark-cell.underperformer {
  color: var(--danger);
}

.benchmark-cell.neutral {
  color: var(--text-secondary);
}

/* Win Ratio cells (vs SPY or benchmark) */
.win-ratio-cell {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
  text-align: center;
  position: relative;
}

.win-ratio-cell .beats-count {
  font-weight: 600;
}

.win-ratio-cell.outperformer {
  color: var(--success);
}

.win-ratio-cell.underperformer {
  color: var(--danger);
}

.win-ratio-cell.neutral {
  color: var(--text-secondary);
}

/* Win ratio percentile display */
.win-ratio-percentile {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  margin-top: 2px;
  opacity: 0.85;
}

.win-ratio-percentile.percentile-top {
  color: #16a34a;
}

.win-ratio-percentile.percentile-bottom {
  color: #dc2626;
}

.win-ratio-percentile.percentile-neutral {
  color: #6b7280;
}

.win-ratio-header {
  white-space: nowrap;
  text-align: center;
  min-width: 70px;
}

/* Win Ratio tooltip - polished, social-media ready */
.win-ratio-tooltip {
  display: none;
  position: fixed;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  z-index: 99999;
  min-width: 360px;
  max-width: 480px;
  pointer-events: none;
}

.win-ratio-cell:hover .win-ratio-tooltip {
  display: block;
}

/* Row 1: Header - centered, dark gray */
.win-ratio-tooltip-header {
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #374151;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

/* Row 2: Win ratio summary - centered, large, colored */
.win-ratio-tooltip-summary {
  text-align: center;
  margin-bottom: 1rem;
}

.win-ratio-tooltip-summary .win-ratio-value {
  font-size: 2rem;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.win-ratio-tooltip-summary.verdict-good .win-ratio-value {
  color: #16a34a;
}

.win-ratio-tooltip-summary.verdict-poor .win-ratio-value {
  color: #dc2626;
}

.win-ratio-tooltip-summary.verdict-neutral .win-ratio-value {
  color: #6b7280;
}

/* Row 3: Streak dots - centered */
.win-ratio-streak {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.win-ratio-streak .streak-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.win-ratio-streak .streak-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.win-ratio-streak .streak-item:hover .streak-dot {
  transform: scale(1.15);
}

.win-ratio-streak .streak-dot.win {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.win-ratio-streak .streak-dot.loss {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.win-ratio-streak .streak-dot.neutral {
  background: #9ca3af;
}

.win-ratio-streak .streak-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Table styling */
.win-ratio-tooltip-table {
  display: grid;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.win-ratio-tooltip-table .tooltip-header-row,
.win-ratio-tooltip-table .tooltip-data-row {
  display: grid;
  grid-template-columns: 45px 70px 70px 70px 24px;
  gap: 8px;
  padding: 5px 4px;
  align-items: center;
}

.win-ratio-tooltip-table .tooltip-header-row {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.win-ratio-tooltip-table .tooltip-data-row {
  border-radius: 6px;
  transition: background 0.1s ease;
}

.win-ratio-tooltip-table .tooltip-data-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.02);
}

.win-ratio-tooltip-table .tooltip-data-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.win-ratio-tooltip .win-icon {
  color: #16a34a;
  font-weight: 700;
  font-size: 0.9rem;
}

.win-ratio-tooltip .lose-icon {
  color: #dc2626;
  font-weight: 700;
  font-size: 0.9rem;
}

.win-ratio-tooltip-table .vs-spy-good {
  color: #16a34a;
}

.win-ratio-tooltip-table .vs-spy-bad {
  color: #dc2626;
}

.win-ratio-tooltip-table .vs-spy-neutral {
  color: #6b7280;
}

/* Footer: Comparing periods - at bottom with divider */
.win-ratio-tooltip-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.7rem;
  color: #9ca3af;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Dark mode */
[data-theme="dark"] .win-ratio-tooltip {
  background: linear-gradient(180deg, var(--bg-primary) 0%, #1a1a1a 100%);
  border-color: var(--border);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .win-ratio-tooltip-header {
  color: #e5e7eb;
}

[data-theme="dark"] .win-ratio-streak {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .win-ratio-tooltip-table .tooltip-header-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .win-ratio-tooltip-table .tooltip-data-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .win-ratio-tooltip-table .tooltip-data-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .win-ratio-tooltip-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #6b7280;
}

[data-theme="dark"] .win-ratio-streak .streak-label {
  color: #9ca3af;
}

/* Benchmark tooltip */
.benchmark-tooltip {
  display: none;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 99999;
  min-width: 360px;
  pointer-events: none;
}

.benchmark-tooltip .tooltip-header {
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

/* Benchmark tooltip header section */
.benchmark-tooltip .tooltip-header-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.benchmark-tooltip .tooltip-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.benchmark-tooltip .tooltip-avg-line {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.benchmark-tooltip .avg-outperf-value {
  font-weight: 600;
  font-family: var(--font-mono);
}

.benchmark-tooltip .avg-outperf-value.positive {
  color: var(--success);
}

.benchmark-tooltip .avg-outperf-value.negative {
  color: var(--danger);
}

/* Benchmark tooltip table */
.benchmark-tooltip .tooltip-table {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.benchmark-tooltip .tooltip-table-header,
.benchmark-tooltip .tooltip-table-row {
  display: grid;
  grid-template-columns: 50px 80px 80px 80px 24px;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}

.benchmark-tooltip .tooltip-table-header {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}

.benchmark-tooltip .tooltip-table-row.beat {
  color: var(--success);
}

.benchmark-tooltip .tooltip-table-row.lost {
  color: var(--danger);
}

.benchmark-tooltip .tooltip-table-row.neutral {
  color: var(--text-muted);
}

.benchmark-tooltip .col-period {
  text-align: left;
}

.benchmark-tooltip .col-ticker,
.benchmark-tooltip .col-bench,
.benchmark-tooltip .col-diff {
  text-align: right;
}

.benchmark-tooltip .col-result {
  text-align: center;
  font-size: 0.9rem;
}

/* Rank column (#) - first column, compact */
.rank-header,
.rank-cell {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 4px 6px !important;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--bg-tertiary);
}

.discover-table tbody .rank-cell {
  background: var(--bg-secondary);
}

.discover-table tbody tr:hover .rank-cell {
  background: var(--bg-hover);
}

/* Sticky columns - Rank (left: 0), Favorites (left: 32px), Ticker (left: 68px) */
.fav-cell,
th.fav-header {
  position: sticky;
  left: 32px;
  z-index: 6;
  background: var(--bg-tertiary);
}

.discover-table tbody .fav-cell {
  background: var(--bg-secondary);
}

.discover-table tbody tr:hover .fav-cell {
  background: var(--bg-hover);
}

.sticky-col {
  position: sticky;
  left: 68px; /* Offset by rank (32px) + fav (36px) column widths */
  background: var(--bg-tertiary);
  z-index: 5;
}

.discover-table tbody .sticky-col {
  background: var(--bg-secondary);
}

.discover-table tbody tr:hover .sticky-col {
  background: var(--bg-hover);
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md);
  flex-shrink: 0;
}

.page-btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}

.page-btn:hover:not(:disabled) {
  background: var(--bg-hover);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* =============================================================================
   LOADING & ERRORS
   ============================================================================= */

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.9);
  z-index: 100;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-overlay span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.error-message {
  padding: var(--space-md);
  margin: var(--space-md) 0;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  text-align: center;
}

/* =============================================================================
   QUICK SEARCH (inline in results header)
   ============================================================================= */

.quick-search-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 240px;
  margin: 0 12px;
}

.quick-search-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quick-search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.quick-search-input::placeholder {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.quick-search-count {
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.quick-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.1s ease;
}

.quick-search-clear:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.quick-search-container.has-query .quick-search-clear {
  display: flex;
}

/* Keyword highlight in table */
.keyword-highlight {
  background: rgba(250, 204, 21, 0.4);
  color: inherit;
  border-radius: 2px;
}

/* =============================================================================
   ADD TO WATCHLIST DROPDOWN
   ============================================================================= */

.add-to-watchlist-container {
  display: none; /* Hidden by default, shown when viewing a favorites list */
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

.add-to-watchlist-container.visible {
  display: flex;
}

.add-to-watchlist-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* TomSelect container for add-to-watchlist */
.add-to-watchlist-container .ts-wrapper {
  min-width: 200px;
  max-width: 400px;
  z-index: 1000; /* Above table header */
}

/* Allow the TomSelect control to grow with content */
.add-to-watchlist-container.filter-mode .ts-wrapper {
  max-width: 500px;
}

.add-to-watchlist-container .ts-control {
  flex-wrap: wrap;
  max-height: 80px;
  overflow-y: auto;
}

/* In filter mode, hide the label (placeholder inside input is enough) */
.add-to-watchlist-container.filter-mode .add-to-watchlist-label {
  display: none;
}

/* Always show chips - hidden now since TomSelect shows chips inside */
.always-show-chips {
  display: none !important;
}

.add-to-watchlist-container .ts-dropdown {
  min-width: 360px !important;
  max-height: 480px !important; /* Tall enough for ~10 items */
  z-index: 1001 !important; /* Ensure dropdown is above everything */
}

.add-to-watchlist-container .ts-dropdown-content {
  max-height: 460px !important; /* Account for padding */
}

.add-to-watchlist-container .ts-control {
  font-size: 0.8rem;
  padding: 4px 8px;
  min-height: 32px;
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

/* Custom dropdown option styling - 2-row layout */
.add-watchlist-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}

.add-watchlist-option .option-row-1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.add-watchlist-option .option-row-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}

.add-watchlist-option .ticker-symbol {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent-primary);
  min-width: 52px;
}

.add-watchlist-option .company-name {
  flex: 1;
  font-size: 0.9em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-watchlist-option .market-cap-badge {
  font-size: 0.7em;
  padding: 2px 6px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.add-watchlist-option .sector-industry {
  font-size: 0.75em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected item (tag) styling */
.add-watchlist-item {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* =============================================================================
   ALWAYS SHOW CHIPS (Filter mode)
   ============================================================================= */

.always-show-chips {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.always-show-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-primary);
}

.always-show-chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  margin-left: 2px;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.always-show-chip .chip-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.always-show-clear-all {
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.always-show-clear-all:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--danger);
  color: var(--danger);
}

/* Filter mode: hide label since placeholder is inside TomSelect */
/* (already handled above with display:none) */

/* =============================================================================
   TABLE ROW HIGHLIGHTING (Always Show & Benchmark tickers)
   ============================================================================= */

/* "Always Show" tickers - purple left border indicator */
.discover-table tr.always-show-row {
  position: relative;
}

.discover-table tr.always-show-row .rank-cell,
.discover-table tr.always-show-row td:first-child {
  border-left: 3px solid var(--accent-primary) !important;
  padding-left: 5px !important;
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

/* Benchmark ticker row - amber/gold left border indicator */
.discover-table tr.benchmark-row {
  position: relative;
}

.discover-table tr.benchmark-row .rank-cell,
.discover-table tr.benchmark-row td:first-child {
  border-left: 3px solid #f59e0b !important;
  padding-left: 5px !important;
  box-shadow: inset 3px 0 0 #f59e0b;
}

/* If both always-show and benchmark, show both colors (purple takes priority, gold shadow) */
.discover-table tr.always-show-row.benchmark-row .rank-cell,
.discover-table tr.always-show-row.benchmark-row td:first-child {
  border-left: 3px solid var(--accent-primary) !important;
  box-shadow: inset 3px 0 0 #f59e0b;
}

/* =============================================================================
   NOT FOUND TICKERS BANNER
   ============================================================================= */

.not-found-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--warning);
  background: linear-gradient(135deg, rgba(245, 159, 0, 0.15), rgba(245, 159, 0, 0.08));
  border: 1px solid rgba(245, 159, 0, 0.35);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.not-found-banner.hidden {
  display: none;
}

.not-found-icon {
  font-size: 1.1rem;
}

.not-found-message {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.not-found-message strong {
  color: #c78600;
}

.not-found-dismiss {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.not-found-dismiss:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

/* =============================================================================
   COLUMN NAVIGATION SHORTCUTS
   ============================================================================= */

.column-nav-shortcuts {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 12px;
}

.column-nav-shortcuts .nav-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 4px;
}

.nav-shortcut-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-shortcut-btn:hover {
  background: #f3f4f6;
  border-color: #3b82f6;
  color: #3b82f6;
}

.nav-shortcut-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  font-weight: 600;
}

/* Dark mode */
[data-theme="dark"] .nav-shortcut-btn {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

[data-theme="dark"] .nav-shortcut-btn:hover {
  background: #4b5563;
  border-color: #60a5fa;
  color: #60a5fa;
}

[data-theme="dark"] .nav-shortcut-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

/* =============================================================================
   TREND SMOOTHNESS COLUMN
   ============================================================================= */

.trend-header {
  min-width: 70px;
  text-align: center;
}

.trend-cell {
  padding: 6px 8px;
  text-align: center;
}

.trend-empty {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.trend-bar {
  width: 40px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.trend-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s ease;
}

.trend-low .trend-bar-fill {
  background: var(--danger);
}

.trend-mid .trend-bar-fill {
  background: var(--warning, #f59e0b);
}

.trend-high .trend-bar-fill {
  background: var(--success);
}

.trend-value {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  min-width: 28px;
  text-align: right;
}

.trend-low .trend-value {
  color: var(--danger);
}

.trend-mid .trend-value {
  color: var(--warning, #f59e0b);
}

.trend-high .trend-value {
  color: var(--success);
}

/* =============================================================================
   TREND ATH/ATL COLUMN
   Signed [-1, +1] window-relative new-highs-vs-new-lows score, per preset.
   Color bands match the spec; the sentinel "neutral" band intentionally uses
   muted text so sideways tickers don't visually compete with directional ones.
   ============================================================================= */

.trend-ath-atl-header {
  min-width: 110px;
  text-align: center;
  white-space: nowrap;
}

/* Sort-Period Return column — sits right next to the Chart so the user
   reads shape (sparkline) → magnitude (return) → direction (Trend ATH/ATL)
   for the same window. Header label is rewritten in JS to "Return (1Y)" etc. */
.sort-period-return-header {
  min-width: 80px;
  text-align: right;
  white-space: nowrap;
}

.sort-period-return-cell {
  text-align: right;
  white-space: nowrap;
}

.trend-ath-atl-cell {
  padding: 6px 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.trend-ath-atl-cell .trend-ath-atl-value {
  display: inline-block;
}

.trend-ath-atl-empty {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.75rem;
}

/* Color bands. Background tints stay subtle so the rank capsule keeps
   contrast; the value text carries the directional signal. */
.trend-ath-atl-cell.trend-ath-atl-strong-up {
  background: rgba(34, 197, 94, 0.18);
  color: var(--success);
}

.trend-ath-atl-cell.trend-ath-atl-mild-up {
  background: rgba(34, 197, 94, 0.08);
  color: var(--success);
}

.trend-ath-atl-cell.trend-ath-atl-neutral {
  background: transparent;
  color: var(--text-secondary);
}

.trend-ath-atl-cell.trend-ath-atl-mild-down {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
}

.trend-ath-atl-cell.trend-ath-atl-strong-down {
  background: rgba(239, 68, 68, 0.18);
  color: var(--danger);
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.discover-footer {
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  text-align: center;
}

.discover-footer p {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .discover-main {
    flex-direction: column;
  }

  .sidebar-toggle {
    display: none;
  }
  
  .filters-panel {
    width: 100%;
    min-width: 100%;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  
  .checkbox-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .discover-header {
    flex-direction: column;
    gap: var(--space-sm);
    height: auto;
    padding: var(--space-sm) var(--space-md);
  }
  
  .header-left h1 {
    font-size: 1rem;
  }
  
  .filters-panel {
    padding: var(--space-md);
  }
  
  .results-area {
    padding: var(--space-md);
  }
  
  .results-header {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .quick-search-container {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin: 4px 0 0 0;
  }
  
  .add-to-watchlist-container {
    order: 4;
    flex-basis: 100%;
    margin: 8px 0 0 0;
  }
  
  .add-to-watchlist-container .ts-wrapper {
    min-width: 100%;
    max-width: none;
  }
  
  .checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   HELP TOOLTIPS
   (Shared styles from main app - needed for table header help icons)
   ============================================================================= */

/* Backdrop overlay when tooltip is open */
.help-tooltip-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.help-tooltip-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Custom animated cursor for help tooltips */
.help-cursor {
  position: fixed;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
  background: linear-gradient(135deg, #a8b4f0 0%, #c4a8f7 25%, #ffc4e8 50%, #f0a8d0 75%, #a8b4f0 100%);
  background-size: 200% 200%;
  animation: helpCursorGradient 3s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(168, 180, 240, 0.5),
              0 0 20px rgba(184, 164, 217, 0.3);
}

.help-cursor.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@keyframes helpCursorGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Help label styles */
.has-help-tooltip {
  cursor: none;
}

.has-help-tooltip input,
.has-help-tooltip select,
.has-help-tooltip button {
  cursor: pointer;
}

.has-help-tooltip:hover {
  color: var(--accent-primary);
}

.has-help-tooltip:hover .help-icon {
  background: rgba(34, 139, 230, 0.25);
  border-color: rgba(34, 139, 230, 0.7);
  color: var(--accent-primary);
  transform: scale(1.1);
}

/* Table headers with help */
th[data-help] {
  position: relative;
  white-space: nowrap;
}

th[data-help] .help-icon {
  margin-left: 0.25rem;
  position: relative;
  top: -1px;
}

/* Help icon - matching main app style. The inner Lucide `info` SVG fills
   the badge; the modal modifier is identical to EasyCompare (rounded
   square, slightly larger) since the helpTooltips module that builds
   these is shared between both surfaces. Keep these in sync with style.css's
   .help-icon block — divergence will produce surprising visual gaps when
   one app gets a tweak the other doesn't. */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: rgba(34, 139, 230, 0.12);
  border: 1.5px solid rgba(34, 139, 230, 0.4);
  color: rgba(34, 139, 230, 0.85);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s ease;
  vertical-align: middle;
  line-height: 1;
  padding: 0;
  box-sizing: border-box;
}

.help-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.help-icon.help-icon--modal {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.help-icon:hover {
  background: rgba(34, 139, 230, 0.25);
  border-color: rgba(34, 139, 230, 0.7);
  color: var(--accent-primary);
  transform: scale(1.1);
}

.help-icon.active {
  background: rgba(34, 139, 230, 0.3);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: scale(1.1);
}

/* Help tooltip popup */
.help-tooltip {
  position: fixed;
  top: auto;
  left: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 100000;
  width: 420px;
  max-width: calc(100vw - 40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: left;
  white-space: normal;
  box-sizing: border-box;
}

.help-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Markdown content in tooltips */
.help-tooltip h1,
.help-tooltip h2,
.help-tooltip h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.help-tooltip p {
  margin: 0 0 0.75rem 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.help-tooltip p:last-child {
  margin-bottom: 0;
}

.help-tooltip strong {
  font-weight: 600;
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.help-tooltip ul {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.help-tooltip li {
  margin: 0.35rem 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.help-tooltip code {
  background: var(--bg-secondary);
  padding: 0.125rem 0.35rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.help-tooltip em {
  font-style: italic;
  color: var(--text-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =============================================================================
   FAVORITES (Heart column)
   ============================================================================= */

/* Heart cell */
.fav-cell {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding: 4px !important;
  text-align: center;
  border-right: 1px solid var(--border-light);
  vertical-align: middle;
}

/* Heart button */
.fav-heart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.fav-heart-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.1);
}

.fav-heart-btn:active {
  transform: scale(0.95);
}

/* Heart icon */
.fav-heart-icon {
  fill: none;
  transition: all 0.2s ease;
}

.fav-heart-icon .heart-outline {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  transition: all 0.2s ease;
}

.fav-heart-icon .heart-fill {
  fill: transparent;
  stroke: none;
  transition: all 0.2s ease;
}

.fav-heart-btn:hover .heart-outline {
  stroke: var(--danger);
}

/* Favorited state */
.fav-heart-btn.is-favorited .heart-outline {
  stroke: var(--danger);
  fill: var(--danger);
}

.fav-heart-btn.is-favorited .heart-fill {
  fill: var(--danger);
}

.fav-heart-btn.is-favorited:hover {
  background: var(--danger-bg);
}

/* Badge for multiple lists */
.fav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  color: white;
  background: var(--accent-primary);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Make button position relative for badge positioning */
.fav-heart-btn {
  position: relative;
}

/* Favorites dropdown */
.fav-dropdown {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  max-width: 280px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.fav-dropdown-header {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.fav-dropdown-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.fav-dropdown-lists {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.fav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  transition: background 0.1s ease;
}

.fav-dropdown-item:hover {
  background: var(--bg-hover);
}

.fav-dropdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0; /* Allow text truncation */
  cursor: pointer;
}

.fav-dropdown-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

/* List action buttons (rename, delete) */
.fav-list-actions {
  display: flex;
  gap: 2px;
  width: 50px; /* Fixed width to ensure alignment */
  justify-content: flex-end;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.fav-dropdown-item:hover .fav-list-actions {
  opacity: 1;
}

.fav-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: all 0.1s ease;
}

.fav-action-btn svg {
  fill: var(--text-muted);
}

.fav-action-btn:hover {
  background: var(--bg-tertiary);
}

.fav-action-btn:hover svg {
  fill: var(--text-primary);
}

.fav-delete-btn:hover {
  background: var(--danger-bg);
}

.fav-delete-btn:hover svg {
  fill: var(--danger);
}

.fav-list-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Allow truncation */
}

.fav-list-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 32px; /* Fixed width for alignment */
  text-align: right;
}

.fav-dropdown-footer {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

.fav-new-list-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fav-new-list-btn:hover {
  background: var(--bg-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.fav-new-list-btn svg {
  fill: currentColor;
}

/* Favorites header */
th.fav-header {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 4px !important;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--border-light);
}

.fav-header-icon {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  vertical-align: middle;
}

/* When viewing a watchlist, hide the filter-only controls (asset types,
   sectors, market-cap universe, etc.) — they don't apply when the request
   is keyed off an explicit ticker list. The Active View card itself stays
   visible since it's how the user exits the watchlist. */
.viewing-favorites .filterable-group {
  display: none;
}

/* Sparkline period selector - only visible in watchlist mode */
.watchlist-only-group {
  display: none;
}

.viewing-favorites .watchlist-only-group {
  display: block;
}

/* Sign-in Modal (fallback when Clerk unavailable) */
.fav-signin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(2px);
}

.fav-signin-modal {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fav-signin-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.fav-signin-modal h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.fav-signin-modal p {
  margin: 0 0 1.5rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.fav-signin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fav-signin-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.fav-signin-primary {
  background: var(--accent-primary);
  color: white;
}

.fav-signin-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.fav-signin-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.fav-signin-secondary:hover {
  background: var(--bg-hover);
}

.fav-signin-debug-hint {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.fav-signin-debug-hint code {
  background: var(--bg-secondary);
  padding: 0.125rem 0.35rem;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* ===========================================================================
   FORCED BENCHMARK ROW INDICATOR
   Shows when benchmark was added to results even though it was filtered out
   =========================================================================== */

.benchmark-forced-row {
  background-color: rgba(251, 191, 36, 0.08) !important; /* yellow tint */
}

.benchmark-forced-row:hover {
  background-color: rgba(251, 191, 36, 0.12) !important;
}

.benchmark-forced-row .ticker-cell::after {
  content: " (benchmark)";
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 400;
}

/* ===========================================================================
   BENCHMARK COLUMNS IN TOOLTIPS
   When a custom benchmark is set, tooltips show both SPY and benchmark data
   Grid is applied to the table container (rows use display: contents)
   Column structure when both SPY and benchmark present:
   dot | period | value | rank | SPY | vs SPY | bench | vs bench
   =========================================================================== */

/* Returns tooltip - 9 columns when SPY + benchmark present */
/* Order: dot(18) | period(42) | return(65) | rank(50) | SPY(60) | vsSPY(60) | bench(60) | benchRank(50) | vsBench(60) */
.preset-summary-tooltip .returns-tooltip-table.has-spy.has-benchmark {
  grid-template-columns: 18px 42px 65px 50px 60px 60px 60px 50px 60px;
}

/* Volatility tooltip - 9 columns when benchmark present */
/* Order: dot(18) | period(42) | vol(55) | rank(50) | SPY(50) | vsSPY(50) | bench(50) | benchRank(50) | vsBench(50) */
.volatility-tooltip-table.has-benchmark {
  grid-template-columns: 18px 42px 55px 50px 50px 50px 50px 50px 50px;
}

/* Sharpe tooltip - 9 columns when benchmark present */
/* Order: dot(18) | period(42) | sharpe(55) | rank(50) | SPY(50) | vsSPY(50) | bench(50) | benchRank(50) | vsBench(50) */
.sharpe-tooltip-table.has-benchmark {
  grid-template-columns: 18px 42px 55px 50px 50px 50px 50px 50px 50px;
}

/* Exclusive returns tooltip - 10 columns when benchmark present */
/* Order: dot(18) | period(42) | excl(60) | total(55) | rank(45) | SPY(60) | vsSPY(55) | bench(55) | benchRank(50) | vsBench(55) */
.exclusive-tooltip-table.has-benchmark {
  grid-template-columns: 18px 42px 60px 55px 45px 60px 55px 55px 50px 55px;
}

.tooltip-bench,
.tooltip-vs-bench {
  text-align: right;
  font-size: 0.72rem;
}

/* =============================================================================
   COMPARE CHART BUTTON
   ============================================================================= */

.compare-chart-btn {
  display: flex; /* Always visible */
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-right: 12px;
}

.compare-chart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.compare-chart-btn svg {
  flex-shrink: 0;
}

/* Button disabled state */
.compare-chart-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* =============================================================================
   COMPARISON CHART MODAL
   ============================================================================= */

.compare-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-modal.hidden {
  display: none;
}

.compare-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.compare-modal-content {
  position: relative;
  width: 95vw;
  max-width: none; /* No max width limit */
  height: 95vh;
  max-height: none; /* No max height limit */
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.compare-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-wrap: wrap;
}

.compare-modal-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

/* Preset Dropdown */
.compare-preset-dropdown {
  position: relative;
}

.preset-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  color: white;
  cursor: pointer;
}

.preset-dropdown-trigger:hover {
  filter: brightness(1.1);
}

.preset-dropdown-arrow {
  font-size: 0.6rem;
  opacity: 0.8;
}

.compare-preset-dropdown.open .preset-dropdown-arrow {
  transform: rotate(180deg);
}

.preset-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 10px;
  display: none;
}

.compare-preset-dropdown.open .preset-dropdown-menu {
  display: block;
}

.preset-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preset-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preset-group-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  min-width: 70px;
  flex-shrink: 0;
}

.preset-group-buttons {
  display: flex;
  gap: 4px;
}

.preset-dropdown-menu .preset-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.preset-dropdown-menu .preset-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.preset-dropdown-menu .preset-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.compare-modal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.compare-log-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  user-select: none;
}

.compare-log-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.compare-log-toggle input {
  margin: 0;
  cursor: pointer;
}

.compare-log-toggle span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.compare-log-toggle:has(input:checked) {
  background: var(--accent-light);
  border-color: var(--accent-primary);
}

.compare-log-toggle:has(input:checked) span {
  color: var(--accent-primary);
}

/* Focus dropdown (TomSelect) */
#compare-lock-container {
  flex-shrink: 0;
}

#compare-lock-container .ts-wrapper {
  min-width: 180px;
  max-width: 300px;
}

#compare-lock-container .ts-control {
  padding: 4px 8px;
  min-height: 28px;
  font-size: 12px;
  border-color: #ddd;
  background: white;
}

#compare-lock-container .ts-control input {
  font-size: 12px;
}

#compare-lock-container .ts-dropdown {
  font-size: 12px;
  max-height: 300px;
  z-index: 10001;
}

#compare-lock-container .ts-dropdown .option {
  padding: 6px 10px;
}

#compare-lock-container .ts-dropdown .option:hover {
  background: #f0f0f0;
}

#compare-lock-container .item .remove {
  font-size: 14px;
  margin-left: 4px;
}

.compare-freshness {
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.compare-count {
  font-weight: 500;
}

.compare-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.compare-modal-close:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.compare-modal-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

.compare-chart {
  width: 100%;
  height: 100%;
}

.compare-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.compare-loading.hidden {
  display: none;
}

.compare-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: compare-spin 0.8s linear infinite;
}

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

.compare-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: var(--text-muted);
}

.compare-error span {
  font-size: 1.1rem;
}

.compare-error p {
  font-size: 0.85rem;
  color: var(--danger);
}

/* Responsive */
@media (max-width: 768px) {
  .compare-modal-content {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  
  .compare-modal-header {
    padding: 12px 16px;
  }
  
  .compare-modal-header h2 {
    font-size: 1rem;
  }
  
  .preset-dropdown-trigger {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
  
  .preset-dropdown-menu .preset-btn {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
  
  .preset-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .preset-group-buttons {
    flex-wrap: wrap;
  }
}


/* =============================================================================
 * TICKER SPARKLINE MODAL — moved to css/sparkline-modal.css
 * =============================================================================
 *
 * The ~490 lines of modal CSS that used to live here were extracted into a
 * standalone stylesheet so easycompare's index.html can load just the modal
 * styles without dragging in all of subapps/discover.css. discover.html now
 * loads BOTH files (this one for everything else, sparkline-modal.css for
 * the modal). See `css/sparkline-modal.css` for the actual rules.
 *
 * If you're looking for: .ticker-sparkline-modal*, .sparkline-card*,
 * .sparkline-trend-ath-atl*, .sparkline-summary-content, .summary-verdict*,
 * .streak-dot*, .ticker-sparkline-error/.empty, body.modal-open, or the
 * @keyframes compare-spin used by the modal spinner — they all live there.
 * ============================================================================= */


/* =============================================================================
   ACTIVE VIEW CARD
   ─────────────────────────────────────────────────────────────────────────────
   The unified panel at the top of the Discover sidebar that selects what's
   currently active: Discover All, a watchlist, or a saved view. Replaces the
   old separate watchlist <select> + saved-views block which used to disagree.

   Layout:
     ┌──────────────────────────────┐
     │ Active                    ●  │  header (label + dirty marker)
     │ ┌──────────────────────────┐ │
     │ │ — Discover All —      ▾  │ │  the only mode selector
     │ └──────────────────────────┘ │
     │  [+ New view] [+ New WL]     │  contextual actions per kind
     └──────────────────────────────┘
   ============================================================================= */

.active-view-card {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.active-view-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.active-view-title {
  flex: 1;
}

.active-view-select {
  width: 100%;
}

/* Contextual action row beneath the dropdown. Buttons are added/removed
   per active kind (see activeViewUI.js → renderActions). Empty when the
   kind has no relevant actions, in which case the row collapses. */
.active-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.active-view-actions:empty {
  display: none;
}

.active-view-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  background: var(--bg-secondary, var(--bg-primary));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.active-view-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-dark, var(--border));
}

.active-view-action-btn.danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.active-view-action-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Dirty marker — only meaningful for saved views (current settings have
   diverged from the snapshot). Hidden by default; activeViewUI.js toggles
   inline display:'inline'/'none' on render. */
.dirty-indicator {
  display: none;
  color: var(--warning);
  font-size: 0.65rem;
  animation: pulse-dirty 1.5s ease-in-out infinite;
}

@keyframes pulse-dirty {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Tiny icon shared by some labels in the rest of the sidebar. Kept here
   alongside the card since the saved-views block used to own it. */
.label-icon {
  font-size: 0.8rem;
}