/* assets/css/compare.css */

.compare-filters{
  margin: 18px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
}

.compare-form{
  display: grid;
  grid-template-columns: 220px 240px 160px 220px 1fr;
  gap: 14px;
  align-items: end;
}

.compare-form select,
.compare-form input[type="number"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,20,.55);
  color: #fff;
  outline: none;
}

.compare-players select{
  width: 100%;
  min-width: 320px;
}

.compare-help{
  margin-top: 6px;
  font-size: 13px;
}

.compare-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.compare-actions button{
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff2d2d, #c81e1e);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.compare-clear{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}

.compare-empty{
  padding: 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.8);
}

.compare-chart{
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0.0.0.0,.18);
}

.compare-chart svg{
  width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

.compare-chart-note{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.82);
}

.compare-chart-bg{ fill: rgba(255,255,255,.02); }
.compare-chart-title{
  fill: rgba(255,255,255,.92);
  font-size: 16px;
  font-weight: 700;
}
.compare-chart-label{ fill: rgba(255,255,255,.88); font-size: 13px; }
.compare-chart-value{ fill: rgba(255,255,255,.88); font-size: 13px; font-weight: 700; }

.compare-bar-track{ fill: rgba(255,255,255,.07); }
.compare-bar{ fill: rgba(156,195,255,.85); }

.compare-grid{
  stroke: rgba(255,255,255,.10);
  stroke-width: 1;
}

.compare-axis{
  fill: rgba(255,255,255,.70);
  font-size: 11px;
}

.compare-legend{
  fill: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 600;
}

.compare-sector-card{
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow-x: auto;              /* key: scroll instead of overflowing page */
}

.compare-sector-table{
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  min-width: 720px;              /* keeps columns usable, scroll handles the rest */
}

.compare-sector-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* was min 560px */
  gap: 16px;
  margin-top: 12px;
}


.compare-fastest td{
  background: rgba(246,201,69,.14);
}

.compare-fastest-cell{
  background: rgba(246,201,69,.14);
  font-weight: 700;
}

.compare-race-meta{
  margin: 14px 0 6px 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 14px;
}

@media (max-width: 1100px){
  .compare-form{
    grid-template-columns: 1fr;
  }
  .compare-players select{
    min-width: 0;
  }
}

/* --- Fix: SVG text was inheriting white-on-white --- */
.compare-chart svg{
  background: rgba(0,0,0,.55);
  border-radius: 10px;
}

/* Ensure ALL svg text inside compare charts is readable */
.compare-chart svg text{
  fill: #e9eefb !important;
}

/* But axis labels can be slightly dimmer */
.compare-chart svg text.compare-axis{
  fill: #c9d3ea !important;
}

/* Legend + title */
.compare-chart svg text.compare-legend,
.compare-chart svg text.compare-chart-title{
  fill: #f2f5ff !important;
}

/* Grid slightly visible on dark bg */
.compare-chart svg .compare-grid{
  stroke: rgba(255,255,255,.18) !important;
}

/* Chart background rect in the SVG */
.compare-chart svg .compare-chart-bg{
  fill: rgba(0,0,0,.55) !important;
}