/* ─── COMPARISON TAB STYLES ───────────────────────────────────────────────────────── */

.comparison-container{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:16px 0;
}

/* Company selectors */
.comparison-companies{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  border-radius:8px;
}

.company-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:#fff;
  border:1px solid #86efac;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  user-select:none;
}

.company-toggle:hover{
  background:#f0fdf4;
}

.company-toggle input[type="checkbox"]{
  cursor:pointer;
}

/* View mode toggles */
.comparison-view-modes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:8px;
}

.view-mode-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:#fff;
  border:1px solid #fdba74;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  user-select:none;
}

.view-mode-toggle:hover{
  background:#fff7ed;
}

.view-mode-toggle input[type="radio"]{
  cursor:pointer;
}

/* Category toggles */
.comparison-categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px;
  background:#f8f9fa;
  border-radius:8px;
}

.category-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  user-select:none;
}

.category-toggle:hover{
  background:#f5f5f5;
}

.category-toggle input[type="checkbox"]{
  cursor:pointer;
}

/* Metrics selector */
.comparison-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
}

.metric-toggle{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  background:#f8f9fa;
  border:1px solid #e0e0e0;
  border-radius:4px;
  cursor:pointer;
  font-size:11px;
  font-weight:500;
  user-select:none;
  transition:all .15s;
}

.metric-toggle:hover{
  background:#f0f0f0;
}

.metric-toggle input[type="checkbox"]{
  cursor:pointer;
  margin:0;
}

.metric-toggle.checked{
  background:#e8f5e9;
  border-color:#86efac;
  color:#059669;
}

/* Chart container */
.comparison-chart-container{
  position:relative;
  width:100%;
  height:400px;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:8px;
}

/* Legend */
.comparison-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:8px 0;
}

.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
}

.legend-color{
  width:12px;
  height:3px;
  border-radius:2px;
}

/* No data message */
.comparison-no-data{
  text-align:center;
  padding:40px;
  color:#888;
  font-size:14px;
}