/* ETF comparison specific styles */
.comparison-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.comparison-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

/* Additional ETF comparison specific styles */
.comparison-results-container {
  background-color: var(--background-light);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  margin-top: var(--spacing-lg);
}

.selected-etfs-container {
  background-color: var(--background-card);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
}

/* Table styling for ETF comparison tables */
.comparison-container .dash-spreadsheet {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--background-white);
  border: 1px solid var(--border-color);
}

.comparison-container .dash-spreadsheet th {
  background-color: var(--primary-color) !important;
  color: white !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  padding: var(--spacing-md) !important;
}

.comparison-container .dash-spreadsheet td {
  padding: var(--spacing-md) !important;
  color: var(--text-dark) !important;
  background-color: var(--background-white) !important;
  font-size: 0.875rem !important;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-standard);
}

.comparison-container .dash-spreadsheet tr:nth-child(odd) td {
  background-color: var(--background-light) !important;
}

.comparison-container .dash-spreadsheet tr:hover td {
  background-color: rgba(44, 62, 80, 0.05) !important;
}

/* Forza colonne più larghe per ETF/Asset nelle tabelle confronto */
.comparison-container .dash-spreadsheet th[data-dash-column="ETF"],
.comparison-container .dash-spreadsheet td[data-dash-column="ETF"],
.comparison-container .dash-spreadsheet th[data-dash-column="Asset"],
.comparison-container .dash-spreadsheet td[data-dash-column="Asset"] {
  min-width: 200px !important;
  white-space: normal !important;
}

@media (max-width: 768px) {
  .comparison-container .dash-spreadsheet th[data-dash-column="ETF"],
  .comparison-container .dash-spreadsheet td[data-dash-column="ETF"],
  .comparison-container .dash-spreadsheet th[data-dash-column="Asset"],
  .comparison-container .dash-spreadsheet td[data-dash-column="Asset"] {
    min-width: 180px !important;
  }
}