/* ---------------------------------------------------
   TRENDS TAB STYLING
--------------------------------------------------- */

/* ---------------------------------------------------
   COLORS & TYPOGRAPHY
--------------------------------------------------- */
.trend-up {
  color: var(--theme-trend-up);
}

.trend-down {
  color: var(--theme-trend-down);
}

.trend-neutral {
  color: var(--theme-trend-neutral);
}

.trend-pct {
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 6px;
}

/* Metric label: top-right of card (pin stays absolute top-right; tag sits to its left) */
.trend-card .trend-card-metric-tag {
  position: absolute;
  top: 10px;
  right: 36px;
  z-index: 9;
  font-size: 0.65rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--theme-text-caption);
  text-align: right;
  max-width: calc(100% - 88px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.trend-card .trend-card-price-row.market-value-top {
  text-shadow: none;
}

/* Subcategory trend cards: price on one row, 30d % change centered below */
.trend-card .trend-card-value-stack {
  width: 100%;
}

.trend-card .trend-card-price-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
}

.trend-card .trend-card-change-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
}

/* 30d change: compact pill, tabular numbers, no playful arrow animation */
.trend-card .trend-card-change-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px 6px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.trend-card .trend-card-change-pill.trend-up {
  color: var(--theme-pill-up-color);
  background: var(--theme-pill-up-bg);
  border-color: var(--theme-pill-up-border);
}

.trend-card .trend-card-change-pill.trend-down {
  color: var(--theme-pill-down-color);
  background: var(--theme-pill-down-bg);
  border-color: var(--theme-pill-down-border);
}

.trend-card .trend-card-change-pill.trend-neutral {
  color: var(--theme-pill-neutral-color);
  background: var(--theme-pill-neutral-bg);
  border-color: var(--theme-pill-neutral-border);
  box-shadow: none;
}

.trend-card .trend-card-change-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.95;
  transform: translateY(-0.5px);
}

.trend-card .trend-card-change-pct {
  margin: 0;
  padding: 0;
}

.trend-arrow {
  font-size: 1.2rem;
  font-weight: bold;
  display: inline-block;
  margin-right: 4px;
  animation: arrowPulse 1.2s infinite ease-in-out;
}

/* Context-specific alignment for Trends Focused Header */
/* Margin removed as we are now using container padding/border */
#trendsFocusedTrend .back-button {
  margin-bottom: 0;
}

/* Specific selector for the headers in Trends tab */
#trendsSuperHobbyOverview .market-header h2,
#trendsHobbyOverview .trend-header h2,
#trendsSubcategories .trend-header h2,
#trendsFocusedTrend .trend-header h2 {
  text-align: left;
  font-size: 1.8rem; /* even larger */
  font-weight: 900; /* maximum bold */
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--theme-text-tab-header);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  text-shadow: var(--theme-shadow-tab-header);
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--carolina-blue);
}

/* Ensure container alignment */
#trendsSuperHobbyOverview .market-header,
#trendsHobbyOverview .trend-header {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;
}

/* Headers with Back Button + Title: Apply border to container so it spans everything */
#trendsSubcategories .trend-header,
#trendsFocusedTrend .trend-header {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--carolina-blue);
}

#trendsSuperHobbyOverview .market-header h2 {
  flex: 1;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--theme-text-tab-header);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  text-shadow: var(--theme-shadow-tab-header);
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--carolina-blue);
}

#trendsHobbyOverview .trend-header h2,
#trendsSubcategories .trend-header h2,
#trendsFocusedTrend .trend-header h2 {
  flex: 1;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--theme-text-tab-header);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  text-shadow: var(--theme-shadow-tab-header);
  position: relative;
  display: block;
  width: auto;
  /* padding-bottom and border-bottom moved to container for Subcategories/Focused */
}

/* Explicitly remove border from H2s where container has it */
#trendsSubcategories .trend-header h2,
#trendsFocusedTrend .trend-header h2 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Fix for Back Button pushing Title */
#trendsSubcategories .trend-header .back-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#trendsSubcategories .trend-header .back-button:hover {
    transform: translateY(-50%) scale(1.1);
}

#trendsFocusedTrend .trends-focused-header .back-button {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    z-index: 10;
}

#trendsFocusedTrend .trends-focused-header .back-button:hover {
    transform: scale(1.1);
}

#trendsSubcategories .trend-header h2 {
    width: 100%;
    margin: 0;
    pointer-events: none; /* Let clicks pass through if needed, though title usually isn't clickable */
    padding: 0 50px; /* Reserve space for back button to avoid overlap */
}

#trendsFocusedTrend .trends-focused-header h2 {
    width: auto;
    max-width: min(100%, 85vw);
    margin: 0;
    pointer-events: none;
    padding: 0;
}

@media (max-width: 900px) {
  #trendsFocusedTrend .trend-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom-width: 2px;
  }

  #trendsFocusedTrend .trend-header h2 {
    font-size: clamp(0.85rem, 3.5vw, 1.15rem);
    font-weight: 800;
    letter-spacing: 0.08em;
  }
}

#subcategories h3,
#focusedTrend h3 {
  text-align: left;
  color: var(--theme-text-tab-header);
  font-weight: 700;
  display: block;
  width: 100%;
}
#subcategoriesTitle {
  text-align: left;
  color: var(--theme-text-tab-header);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  display: block;
  width: 100%;
  border-bottom: 2px solid var(--carolina-blue);
  padding-bottom: 8px;
}

/* ---------------------------------------------------
   TREND STATS ROW
--------------------------------------------------- */
.trend-stats-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------
   MARKET CARDS & GRID
--------------------------------------------------- */

#trendsSuperHobbyCardsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 4vw, 50px);
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  min-height: 50vh;
  padding: 16px;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

#trendsSuperHobbyCardsContainer .market-card {
  width: min(250px, calc(100% - 32px));
}

#trendsHobbyCardsContainer,
#trendsSubcategoryCardsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 5vw, 80px);
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
}

/* Compare Layout Rows */
.compare-row {
  display: flex;
  gap: 20px;
  overflow-x: auto; /* Allow horizontal scrolling if many columns */
  padding: 10px 0;
  align-items: flex-start;
  justify-content: flex-start; /* Left-align columns so they stack side-by-side naturally */
  min-height: 0; /* Allow collapse */
  flex-wrap: wrap; /* Allow wrapping if width is constrained */
}

.compare-row:empty {
  display: none;
  padding: 0;
}

/* ---------------------------------------------------
   FILTERS & DROPDOWNS
--------------------------------------------------- */
/* Filter Column styling moved to charts.css for integrated layout */
.metrics-column {
  flex: 0 0 240px; /* Fixed width per category column */
  display: flex;
  flex-direction: column;
}

.metrics-column {
    gap: 8px; /* Spacing between metrics cards */
}

/* Filter Dropdown Styling */
.filter-column-header {
  font-size: 1rem;
  font-weight: 700;
  color: var(--theme-text-heading);
  margin-bottom: 8px;
  text-align: left;
}

.filter-dropdown-container {
  position: relative;
  width: 100%;
}

.filter-dropdown-btn {
  width: 100%;
  padding: 10px;
  background-color: var(--theme-bg-analysis-dropdown);
  border: 1px solid var(--theme-border-metric-select);
  border-radius: 6px;
  color: var(--theme-analysis-dropdown-text);
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
}

.filter-dropdown-btn:hover {
  border-color: var(--theme-border-metric-select-hover);
  background: var(--theme-bg-metric-select-hover);
  color: var(--theme-text-metric-select);
}

.filter-dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background-color: var(--theme-bg-dropdown);
  border: 1px solid var(--theme-border-default);
  border-radius: 6px;
  padding: 10px;
  z-index: 1000;
  box-shadow: var(--theme-shadow-dropdown);
  margin-top: 4px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--theme-text-dropdown);
  cursor: pointer;
  padding: 6px 0;
}

.filter-option:hover {
  background-color: var(--theme-bg-nav-hover-strong);
}

/* ---------------------------------------------------
   METRICS
   (.metric-card.compact base styles live in components.css + theme tokens)
--------------------------------------------------- */
.metric-title-compact {
    font-size: 0.8rem;
    color: var(--theme-text-metric-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    flex: 1; /* Allow title to take available space */
}

.metric-close-btn {
    cursor: pointer;
    color: #666;
    font-size: 1.2rem;
    line-height: 0.8;
    margin-left: 8px;
    padding: 0 4px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.metric-close-btn:hover {
    color: #fff;
}

.metric-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.metric-value-row.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.metric-value.small {
    font-size: 1rem;
    font-weight: 700;
}

.metric-change.small {
    font-size: 0.8rem;
}

/* ---------------------------------------------------
   CHART LEGEND
--------------------------------------------------- */
.custom-chart-legend-container {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    pointer-events: none;
}

.custom-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    pointer-events: auto; /* Re-enable clicks on legend items */
    margin-bottom: 8px;
}

.custom-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 20, 25, 0.85); /* Darker, semi-transparent background */
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s, transform 0.1s;
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.custom-legend-item:hover {
    background: rgba(40, 40, 50, 0.95);
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.3);
}

.legend-color-box {
    width: 8px;
    height: 8px;
    border-radius: 50%; /* Circle looks cleaner */
    flex-shrink: 0;
    box-shadow: 0 0 4px currentColor; /* Glow effect */
}

.legend-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.legend-subcategory {
    display: none; /* Hide subcategory to save space, usually redundant with title or filter */
}

.legend-filter {
    font-size: 0.75rem;
    color: #e0e0e0;
    font-weight: 600;
}

/* ---------------------------------------------------
   COMPARE DROPDOWN
--------------------------------------------------- */
#trendsCompareSelectorContainer,
#homeCompareSelectorContainer {
    position: relative;
    display: inline-block;
}

.compare-main-btn {
    background-color: #2a2a3c;
    color: #fff;
    border: 1px solid #444;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.compare-main-btn:hover {
    background-color: #3e3e5e;
}

.compare-dropdown {
    position: absolute;
    top: 100%;
    right: 0; /* Align to right if it's on the right side */
    width: 220px;
    background-color: #1e1e2f;
    border: 1px solid #444;
    border-radius: 6px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.compare-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    color: #ccc;
    font-size: 0.9rem;
    border-bottom: 1px solid #333;
}

.filter-close-btn:hover {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff4d4d;
    cursor: pointer;
}

.filter-close-btn { 
    color: #888;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}



.hobby-select-container {
    margin-top: 15px;
    width: 100%;
    position: relative;
}


.hobby-select-container {
    margin-top: 15px;
    width: 100%;
    position: relative;
}


.hobby-select-dropdown {
    width: 100%;
    min-width: 0; /* Allow shrinking in flex container */
    box-sizing: border-box; /* Ensure padding is included in height */
    height: 32px; /* Match custom-dropdown-btn */
    padding: 6px 10px; /* Match custom-dropdown-btn */
    padding-right: 30px; /* Space for arrow */
    background-color: var(--theme-bg-hobby-select);
    color: var(--theme-text-hobby-select);
    border: 1px solid var(--theme-border-hobby-select);
    border-radius: 6px;
    font-size: 0.85rem; /* Match custom-dropdown-btn */
    line-height: 1.2; /* Match custom-dropdown-btn */
    text-transform: none; /* Prevent inheritance */
    cursor: pointer;
    outline: none;
    appearance: none; /* remove default arrow */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b9cd3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}
.hobby-select-dropdown:hover {
    background-color: var(--theme-bg-hobby-select-hover);
    border-color: var(--theme-border-hobby-select-hover);
}

.hobby-select-dropdown:focus {
    box-shadow: var(--theme-shadow-hobby-select-focus);
}

.hobby-select-dropdown option {
    background-color: var(--theme-bg-hobby-option);
    color: var(--theme-text-hobby-select);
    padding: 10px;
}
.hobby-select-container {
    margin-top: 15px;
    width: 100%;
    position: relative;
}

/* Specific styling for the Metric Selector to be centered */
.metric-select-dropdown {
    text-align: left;
    appearance: none;
    -moz-appearance: none;
    /* Match Legend Box Style */
    background: var(--theme-bg-metric-select);
    border: 1px solid var(--theme-border-metric-select);
    color: var(--theme-text-metric-select);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600; /* Match Date Range */
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
}

.metric-select-dropdown:hover {
    border-color: var(--theme-border-metric-select-hover);
    background: var(--theme-bg-metric-select-hover);
}

.metric-select-dropdown:focus {
    outline: none;
    border-color: var(--theme-accent-primary);
}

/* Metric selector row: wide enough for full label + Trendline (old 220px caused ellipsis) */
#trendsMetricSelectorContainer,
#homeFocusedMetricSelectorContainer,
#analysisMetricSelectorContainer {
    width: auto;
    min-width: min(280px, 100%);
    max-width: min(720px, 100%);
    flex-shrink: 0;
    justify-self: start; /* Ensure it aligns left in Grid layouts */
}

#trendsCompareSelectorContainer,
#homeCompareSelectorContainer {
    width: 100%; /* Use full width of container */
    max-width: 800px; /* Limit max width for readability */
    flex-shrink: 0;
}

.compare-dropdown-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

/* ---------------------------------------------------
   CHART CONTROLS ROW (Date & Legend)
--------------------------------------------------- */
/* Trends chart panel: unified box like home (header + chart connected) */
.trends-chart-panel {
  background: var(--theme-trends-chart-bg);
  border: 1px solid var(--theme-trends-chart-border);
  border-radius: var(--theme-tab-surface-radius, 12px);
  overflow: hidden;
  box-shadow: var(--theme-trends-chart-shadow);
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Data quality strip: left-aligned, full width, no inner “card” chrome */
.trends-chart-data-quality {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  padding: 4px 12px 5px;
  background: transparent;
  border-bottom: 1px solid var(--theme-trends-chart-header-border);
  box-sizing: border-box;
}

.trends-chart-data-quality:has(.data-quality-badges-container:empty) {
  display: none;
}

.trends-chart-data-quality .data-quality-badges-container {
  flex: 1 1 auto;
  min-width: 260px;
  max-width: 100%;
}

.trends-chart-data-quality .trends-core-signals-strip {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  border-bottom: none;
  background: transparent;
  justify-content: flex-end;
}

.trends-chart-data-quality .trends-core-signal {
  min-width: 120px;
  padding: 4px 6px;
  border-radius: 6px;
}

/* Horizontal stat strip: no panel background/border (flat line of labels) */
.trends-chart-data-quality .data-quality-panel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
}

.trends-chart-data-quality .data-quality-panel-header {
  display: flex;
  align-items: center;
  border: none !important;
  background: transparent !important;
  border-right: 1px solid var(--theme-trends-chart-header-border);
  padding: 0 10px 0 0;
  margin-right: 10px;
  flex-shrink: 0;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--theme-text-caption);
}

.trends-chart-data-quality .data-quality-panel-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 2px 0;
}

.trends-chart-data-quality .data-quality-row {
  border-bottom: none;
  padding: 0;
  gap: 6px;
  font-size: 0.72rem;
}

.trends-chart-data-quality .data-quality-label {
  margin-right: 0;
}

/* Header: compact toolbar — more room for the chart canvas */
.trends-chart-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 6px 12px 7px;
  background: var(--theme-trends-chart-header-bg);
  border-bottom: 1px solid var(--theme-trends-chart-header-border);
  box-sizing: border-box;
}

.trends-chart-header .chart-metric-title {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  color: var(--theme-trends-chart-title);
  line-height: 1.2;
}

.trends-chart-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px 8px;
  width: 100%;
  min-width: 0;
}

.trends-chart-controls #trendsMetricSelectorContainer {
  justify-self: start;
}

.trends-chart-controls #trendsRangeSelector {
  justify-self: center;
  min-width: 0;
  z-index: 100;
}

/* Trends-only: tighter range chips; explicit tokens so light mode never inherits white text */
.trends-chart-panel .time-range-selector {
  gap: 4px;
  margin-bottom: 0;
}

.trends-chart-panel .time-range-selector button {
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  background: var(--theme-bg-time-range);
  border: 1px solid var(--theme-border-time-range);
  color: var(--theme-text-time-range);
  -webkit-font-smoothing: antialiased;
}

.trends-chart-panel .time-range-selector button:hover {
  background: var(--theme-bg-time-range-hover);
  color: var(--theme-text-time-range-hover);
  border-color: var(--theme-border-time-range-hover);
}

.trends-chart-panel .time-range-selector button.active {
  background: var(--theme-bg-time-range-active);
  color: var(--theme-text-time-range-active);
  border-color: var(--theme-border-time-range-active);
  font-weight: 700;
}

/* Light mode: chips use same --theme-*-time-range tokens as home (see theme-variables.css) */
body.light-mode .trends-chart-panel #trendsRangeSelector {
  color: inherit;
}

body.light-mode .trends-chart-data-quality .data-quality-panel-header {
  color: #374151;
}

body.light-mode .trends-chart-data-quality .trends-core-signal-label {
  color: #4b5563;
}

.trends-chart-panel .legend-toggle-btn {
  height: 26px;
  padding: 3px 8px;
  font-size: 0.7rem;
  gap: 4px;
  border-radius: 4px;
}

.trends-chart-panel #trendsMetricSelectorContainer .metric-select-dropdown {
  padding: 3px 8px;
  font-size: 0.7rem;
  line-height: 1.15;
  border-radius: 4px;
}

.trends-chart-panel #trendsMetricSelectorContainer label {
  font-size: 0.7rem;
}

.trends-chart-panel #trendsMetricSelectorContainer input[type="checkbox"] {
  margin-right: 4px;
}

.trends-core-signals-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 2px 0;
  border-bottom: none;
  background: transparent;
}

.trends-core-signal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.trends-core-signal-label {
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--theme-text-caption);
  white-space: nowrap;
}

.trends-core-signal-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.trends-core-signal-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--theme-text-body);
  white-space: nowrap;
}

.trends-core-signal-sub {
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}

.trends-core-signal + .trends-core-signal {
  border-left: 1px solid var(--theme-trends-chart-header-border);
  padding-left: 12px;
}

.trends-core-signal-sub.up { color: var(--theme-success); }
.trends-core-signal-sub.down { color: var(--theme-danger); }
.trends-core-signal-sub.neutral { color: var(--theme-text-muted); }

.trends-chart-controls .legend-wrapper {
  justify-self: end;
  position: relative;
}

.chart-controls-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
}

.chart-controls-spacer {
  width: 1px;
  height: 1px;
}

/* Legend Wrapper - match home styling */
.legend-wrapper {
  position: relative;
  z-index: 10000;
}

.legend-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  height: 32px;
  font-size: 0.85rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--theme-border-legend-toggle);
  color: var(--theme-text-legend-toggle);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
}

.legend-toggle-btn:hover {
  color: var(--theme-text-legend-toggle-hover);
  border-color: var(--theme-border-legend-toggle-hover);
  background: var(--theme-bg-legend-toggle-hover);
}

/* Legend Container - dropdown, matches home */
.trends-chart-legend-container {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--theme-bg-legend);
  border: 1px solid var(--theme-border-legend);
  border-radius: 8px;
  padding: 10px 12px;
  z-index: 10001;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  width: max-content;
  max-width: min(360px, calc(100vw - 48px));
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.legend-wrapper.open .trends-chart-legend-container {
  display: flex;
  flex-direction: column;
}

.trends-chart-legend {
  flex-direction: column !important;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trends-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #e0e0e0;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.trends-legend-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.legend-color-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-text {
    line-height: 1.1;
}


/* Chart Title */
.chart-metric-title {
    text-align: center;
    color: #e0e0e0;
    font-size: 1.1rem;
    margin: 5px 0 10px 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Custom Collapsible Dropdown */
.custom-dropdown-container {
    position: relative;
    width: auto;
    flex: 1;
    min-width: 0;
}

/* Metric dropdown: slightly wider for readability */
.metric-dropdown-container {
    flex: 0 0 520px;
    max-width: 720px;
}

@media (max-width: 768px) {
  /* Mobile: make the metric dropdown fill the row */
  .metric-dropdown-container {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.custom-dropdown-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px; /* Reduced padding */
    background-color: var(--theme-bg-hobby-select);
    color: var(--theme-text-hobby-select);
    border: 1px solid var(--theme-border-hobby-select);
    border-radius: 6px;
    font-size: 0.85rem; /* Reduced font size */
    font-weight: 400; /* Standard font weight */
    font-family: inherit; /* Ensure it inherits the body font family */
    text-transform: none; /* Prevent inheritance from headers */
    cursor: pointer;
    text-align: left;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 30px; /* Space for arrow */
    height: 32px; /* Explicit smaller height */
    line-height: 1.2; /* Better vertical alignment */
}

.custom-dropdown-btn:hover {
    background-color: var(--theme-bg-hobby-select-hover);
    border-color: var(--theme-border-hobby-select-hover);
}

/* Match focus style of select */
.custom-dropdown-container:focus-within .custom-dropdown-btn {
     box-shadow: var(--theme-analysis-dropdown-focus-ring);
}

.custom-dropdown-btn::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b9cd3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.custom-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--theme-bg-dropdown);
    border: 1px solid var(--theme-border-default);
    border-radius: 6px;
    z-index: 1000;
    display: none;
    margin-top: 4px;
    box-shadow: var(--theme-shadow-dropdown);
}

.custom-dropdown-list.open {
    display: block;
}

.custom-dropdown-header {
    padding: 6px 10px; /* Reduced padding */
    background-color: var(--theme-panel-header-bg);
    color: var(--theme-text-heading);
    font-weight: bold;
    cursor: pointer;
    border-bottom: 1px solid var(--theme-border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem; /* Reduced font size */
}

.custom-dropdown-header:hover {
    background-color: var(--theme-bg-glass-strong);
}

.custom-dropdown-header .toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s;
    color: var(--theme-accent-primary);
}

.custom-dropdown-header.expanded .toggle-icon {
    transform: rotate(180deg);
}

.custom-dropdown-item {
    padding: 6px 10px 6px 20px; /* Reduced padding */
    cursor: pointer;
    color: var(--theme-text-dropdown);
    border-bottom: 1px solid var(--theme-border-muted);
    display: none; /* Hidden by default */
    background-color: var(--theme-bg-dropdown);
    font-size: 0.8rem; /* Reduced font size */
}

.custom-dropdown-item:hover {
    background-color: var(--theme-bg-search-result-hover);
    color: var(--theme-text-dropdown);
}

.custom-dropdown-item.visible {
    display: block;
}

/* ---------------------------------------------------
   NEW TRENDS LAYOUT (Chart Top, Metrics Bottom Table)
--------------------------------------------------- */
.trends-content-wrapper {
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 10px; /* Reduced gap */
    align-items: flex-start;
    width: 100%;
    margin-top: 5px; /* Reduced margin */
}

.trends-chart-section {
    width: 100%;
    flex: none;
    min-width: 0;
    /* Ensure height is not collapsed */
    display: flex;
    flex-direction: column;
}

/* Chart container inside panel: no own border/background, fixed height (no flex grow) */
.trends-chart-panel .chart-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  padding: 6px 12px 10px;
  height: 428px;
  min-height: 300px;
  flex: none; /* Don't grow to fill panel */
  width: 100%;
  display: flex;
  flex-direction: column;
}

#trendsFocusedTrendChart {
    width: 100% !important;
    height: 100% !important;
    flex: 1;
    min-height: 0;
    display: block;
}

.trends-metrics-section {
    width: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow-y: visible;
}

/* Ensure compare rows act as table rows */
.trends-metrics-section .compare-row {
    display: flex;
    flex-direction: row; /* Horizontal columns */
    width: 100%;
    gap: 15px;
    overflow-x: auto; /* Scroll if too many columns */
    padding-bottom: 15px;
}

/* Adjust the metrics column inside the side panel */
.trends-metrics-section .metrics-column {
    width: auto;
    flex: 1 1 200px; /* Allow columns to share space */
    max-width: 100%;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1024px) {
    .trends-content-wrapper {
        flex-direction: column;
    }
    
    .trends-metrics-section {
        width: 100%;
        min-width: 0;
    }
}

/* Metric Expansion Styles */
.metric-details {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-card.expanded .metric-details {
    display: block;
}

/* --- Comparison Table Styles --- */
.trends-table-container {
    width: 100%;
    overflow-x: auto;
    background: var(--theme-tab-surface-bg);
    border: 1px solid var(--theme-tab-surface-border);
    box-shadow: var(--theme-tab-surface-shadow);
    border-radius: var(--theme-tab-surface-radius, 12px);
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box; /* Ensure padding doesn't overflow width */
}

#trendsComparisonTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Ensure scrolling on small screens */
    table-layout: fixed;
}

#trendsComparisonTable th,
#trendsComparisonTable td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border-hairline);
    position: relative; /* For dropdowns */
}

/* Header Cells (where filters live) */
.market-header-cell {
    /* Ensure dropdowns can be positioned relative to this */
    position: relative;
    vertical-align: top;
    min-width: 200px; /* Give space for the filter name */
}

.table-controls {
    width: 100%;
    display: flex;
    align-items: center;
}

#trendsComparisonTable .metric-label-header {
    width: 150px;
    color: var(--theme-text-caption);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    vertical-align: top;
    padding-top: 16px; /* Align with market-header-cell text (12px + 4px) */
}

.metric-label-cell {
    color: var(--theme-text-body);
    font-weight: 600;
    background: var(--theme-bg-glass);
}

.metric-value-cell .val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-card);
    margin-bottom: 4px;
}

.metric-value-cell .change {
    font-size: 0.85rem;
    font-weight: 500;
}

.metric-value-cell .change.up { color: #4caf50; }
.metric-value-cell .change.down { color: #f44336; }

/* Primary column (subcategory + Select Categories) vs comparison columns */
.trends-market-column--primary {
    vertical-align: top;
}

.trends-market-column--compare .filter-column-header {
    margin-bottom: 4px;
}

/* Filter Styles in Table Header */
.market-header-cell .filter-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    margin-bottom: 8px;
}

.market-header-cell .filter-column-header span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--theme-text-heading);
}

.market-header-cell .filter-dropdown-btn {
    width: 100%;
    padding: 6px;
    font-size: 0.8rem;
    border: 1px solid var(--theme-border-metric-select);
    border-radius: 4px;
    background: var(--theme-bg-analysis-dropdown);
    color: var(--theme-analysis-dropdown-text);
    cursor: pointer;
    text-align: left;
}

.market-header-cell .filter-dropdown-btn:hover {
    border-color: var(--theme-border-metric-select-hover);
    color: var(--theme-text-metric-select);
    background: var(--theme-bg-metric-select-hover);
}

/* Last data column: anchor wide dropdown to the cell’s right edge (narrow fixed table cols). */
#trendsTableHeaderRow > th.market-header-cell:last-child .filter-dropdown-content {
    left: auto;
    right: 0;
}

/* Responsive Chart Controls */
@media (max-width: 900px) {
  #trendsMetricSelectorContainer,
  #homeFocusedMetricSelectorContainer,
  #analysisMetricSelectorContainer {
    width: 100%;
    max-width: min(720px, 100%);
  }
}

@media (max-width: 768px) {
  .trends-chart-data-quality {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .trends-chart-data-quality .data-quality-badges-container {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .trends-chart-data-quality .trends-core-signals-strip {
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
    padding: 6px 0 4px;
    overflow: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 10px;
    column-gap: 12px;
    scroll-snap-type: none;
  }

  .trends-chart-data-quality .trends-core-signal {
    flex: 1 1 calc(50% - 8px);
    min-width: min(100%, 148px);
    max-width: 100%;
    scroll-snap-align: unset;
    border-left: none !important;
    padding-left: 0 !important;
    padding-bottom: 4px;
    box-sizing: border-box;
  }

  .trends-chart-data-quality .trends-core-signal + .trends-core-signal {
    border-left: none;
    padding-left: 0;
  }

  .trends-chart-data-quality .data-quality-panel {
    flex-direction: column;
    width: 100%;
  }

  .trends-chart-data-quality .data-quality-panel-header {
    border-right: none;
    border-bottom: 1px solid var(--theme-trends-chart-header-border);
    padding: 0 0 8px;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .trends-chart-data-quality .data-quality-panel-body {
    padding: 0;
  }

  .trends-chart-controls {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .trends-chart-controls #trendsMetricSelectorContainer,
  .trends-chart-controls #trendsRangeSelector,
  .trends-chart-controls .legend-wrapper {
    justify-self: start;
  }

  .chart-controls-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .legend-wrapper {
    justify-self: start;
    width: 100%;
  }

  .legend-toggle-btn {
    width: 100%;
    justify-content: flex-start;
  }

  #trendsMetricSelectorContainer,
  #homeFocusedMetricSelectorContainer,
  #analysisMetricSelectorContainer {
    width: 100%;
    max-width: none;
  }

  .metric-select-dropdown {
    width: 100%;
  }
}

/* ---------------------------------------------------
   SPLIT LAYOUT FOR OVERVIEW & SUBCATEGORIES
--------------------------------------------------- */
.trends-split-layout {
    display: flex;
    gap: 0; /* Managed by divider margins */
    align-items: stretch; /* Stretch to make divider full height */
    position: relative;
    margin-top: 40px;
    justify-content: center; /* Center the whole block */
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.trends-layout-divider {
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(75, 156, 211, 0.5), transparent);
    margin: 0 60px;
    align-self: stretch;
}

/* Hobby has only a top-level overview (e.g. Coins & Paper Money): one card, no empty column or divider */
.trends-split-layout.trends-split-layout--overview-only {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 24px;
}

.trends-split-layout.trends-split-layout--overview-only .trends-layout-divider {
    display: none;
}

.trends-split-layout.trends-split-layout--overview-only .trends-main-grid {
    display: none;
}

.trends-split-layout.trends-split-layout--overview-only .trends-sidebar-left {
    flex: none;
    width: 100%;
    max-width: 560px;
    min-height: auto;
    position: static;
}

.trends-sidebar-left {
    flex: 1; /* 50/50 split basis */
    max-width: 500px; /* Cap width */
    position: sticky;
    top: 40px;
    /* Removed box styling */
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically center content */
    min-height: 500px;
}

.trends-sidebar-left::before {
    display: none; /* Hide Title */
}

.trends-main-grid {
    flex: 1; /* 50/50 split */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Vertically center content */
}

.section-subtitle {
    display: none; /* Hide Title */
}

.trends-sidebar-left #trendsAllCategoryContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin: 0;
    justify-content: center;
}

/* Multiple hero overview cards (any hobby) */
.trends-sidebar-left #trendsAllCategoryContainer.trends-overview-heroes--dual {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 920px;
    align-items: stretch;
    justify-content: center;
}

.trends-sidebar-left #trendsAllCategoryContainer.trends-overview-heroes--dual .overview-card {
    flex: 1 1 260px;
    max-width: 420px;
}

/* Long market checkbox lists: keep inputs in DOM for charts; hide visually (see trendsShouldCollapseMarketCheckboxList) */
.trends-filter-market-checkboxes--collapsed {
    display: none;
}

.trends-filter-categories-hint {
    margin: 10px 8px 12px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--theme-text-caption);
    background: var(--theme-bg-glass);
    border-radius: 8px;
    border: 1px solid var(--theme-border-hairline);
}

.trends-main-grid #trendsSubcategoryCardsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center; /* Center grid items */
    align-items: flex-start;
    padding: 0;
    width: 100%;
}

.trends-main-grid .market-card {
    margin: 0;
    /* Ensure regular cards aren't too big */
    width: 260px; 
}

/* Unique Styling for Overview Card (uses theme tokens so light mode matches grid cards) */
.trends-sidebar-left .market-card {
    width: 360px !important; /* Significantly larger */
    height: auto !important;
    min-height: 240px;
    transform: scale(1.0); /* Reset scale */
    border: 3px solid var(--theme-accent-primary);
    background: linear-gradient(
      145deg,
      var(--theme-gradient-card-start) 0%,
      var(--theme-gradient-card-end) 100%
    );
    box-shadow: var(--theme-shadow-card-hover);
    margin-bottom: 0;
    color: var(--theme-text-card);
}

.trends-sidebar-left .market-card h3 {
    font-size: 2rem; /* Larger title */
    margin-bottom: 20px;
    text-align: center;
}

.trends-sidebar-left .market-card .trend-value {
    font-size: 3.5rem; /* Massive value */
}

.trends-sidebar-left .market-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-card-hover);
    border-color: var(--theme-accent-primary);
}

/* Table Sparklines */
.table-sparkline-container {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-sparkline-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ---------------------------------------------------
   MEDIA QUERIES
--------------------------------------------------- */

@media (max-width: 1200px) {
    .trends-split-layout {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .trends-split-layout.trends-split-layout--overview-only {
        gap: 0;
    }
    
    .trends-sidebar-left {
        width: 100%;
        max-width: 600px;
        position: static;
        min-height: auto;
        border: 2px solid rgba(75, 156, 211, 0.2);
    }

    .trends-split-layout.trends-split-layout--overview-only .trends-sidebar-left {
        border: none;
    }
    
    .trends-main-grid {
        width: 100%;
    }
}


/* --- Analysis Column Styles --- */
.analysis-header-cell {
    min-width: 250px;
    border-bottom: 2px solid #666; /* Neutral separation */
    vertical-align: top;
    padding-top: 16px;
    font-weight: 700;
    color: #fff;
}

.analysis-cell {
    vertical-align: top;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #ccc;
    border-left: 1px solid rgba(255,255,255,0.1);
}

.analysis-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analysis-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
}

.analysis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.analysis-entity {
    font-weight: 600;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.analysis-hint {
    font-style: italic;
    color: #888;
}

.analysis-text {
    color: #aaa;
}

.comparison-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.comparison-main {
    font-weight: 700;
    font-size: 1.0rem;
}

.comparison-sub {
    font-size: 0.8rem;
    color: #888;
}

.baseline-label {
    font-weight: 600;
    color: #4b9cd3;
    background: rgba(75, 156, 211, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* ---------------------------------------------------
   ANALYSIS COPY BUTTON
--------------------------------------------------- */
.analysis-copy-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #aaa;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.analysis-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}

.analysis-copy-btn:active {
    transform: scale(0.95);
}

/* ---------------------------------------------------
   COMPARISON METRICS COLUMN
--------------------------------------------------- */
.comparison-header-cell {
    min-width: 260px;
    width: 260px;
    transition: min-width 0.3s ease, width 0.3s ease, padding 0.3s ease;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 4px solid #4b9cd3; /* Matches theme */
}

.comparison-header-cell.collapsed {
    min-width: 50px;
    width: 50px;
    padding: 10px 0;
}

.comparison-cell {
    min-width: 260px;
    width: 260px;
    transition: min-width 0.3s ease, width 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    vertical-align: top;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
}

.comparison-cell.collapsed {
    min-width: 50px;
    width: 50px;
    padding: 0;
}

/* Hide content when collapsed */
.comparison-cell.collapsed .analysis-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 260px; /* Keep layout stable during fade */
}

.comparison-toggle-btn {
    background: transparent;
    border: none;
    color: #4b9cd3;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    margin-right: 8px; /* Left side of title */
    transition: transform 0.3s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-toggle-btn:hover {
    color: #fff;
}

.comparison-header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.collapsed .comparison-header-content {
    justify-content: center;
}

.collapsed .comparison-title-text,
.collapsed .analysis-copy-btn {
    display: none;
}

/* Vertical text for collapsed state */
.comparison-collapsed-label {
    display: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: #888;
    font-size: 0.9rem;
    white-space: nowrap;
    margin: 0 auto;
    padding: 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.collapsed .comparison-collapsed-label {
    display: block;
}

/* Enhancing the Analysis Items for Comparison */
.comparison-metric-title {
    font-size: 0.85rem;
    color: #aaa;
    margin-bottom: 4px;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 2px;
}

.comparison-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* ---------------------------------------------------
   TABLE SPACING FIXES
--------------------------------------------------- */
#trendsComparisonTable {
    border-collapse: collapse;
    width: 100%;
}

/* Hide the unused filter row to remove gap between header and body */
#trendsTableFilterRow {
    display: none;
}