/* =========================================================
   Compare Players page — compare-v4.css
   ========================================================= */

/* Controls card — no overflow:hidden so the autocomplete portal clears */
.compare-controls-surface {
  border-radius: 1.45rem;
  position: relative;
}

.compare-controls-surface::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 36%, transparent), transparent 78%);
  pointer-events: none;
}

/* Results card */
#compare-table-card {
  border-radius: 1.45rem;
}

/* Players bar — chips and search input in one row */
.compare-players-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Player chips */
.compare-chip-container {
  display: contents; /* participates in parent flex directly */
}

.compare-player-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .65rem .2rem .75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--brand-primary, #6f2c91) 80%, transparent);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.compare-chip-remove {
  all: unset;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: .7;
  padding: 0 .1rem;
}

.compare-chip-remove:hover {
  opacity: 1;
}

/* Search input */
.compare-search-wrap {
  flex: 1 1 160px;
  min-width: 140px;
}

.compare-search-input {
  border-radius: 9999px !important;
  padding-left: .9rem;
  padding-right: .9rem;
  background: var(--cs-brand-input-bg, rgba(255,255,255,.06));
  color: var(--brand-body-text, #1a1a2e);
  border-color: var(--bs-border-color, #dee2e6);
}

/* Autocomplete portal — position:fixed via JS */
.compare-autocomplete-dropdown {
  position: fixed;
  z-index: 2000;
  background: var(--cs-surface-strong, #1a2540);
  border: 1px solid var(--cs-border, rgba(255,255,255,.12));
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  max-height: 260px;
  overflow-y: auto;
}

.compare-autocomplete-list {
  list-style: none;
  margin: 0;
  padding: .25rem 0;
}

.compare-autocomplete-item {
  padding: .45rem .9rem;
  cursor: pointer;
  font-size: .875rem;
  color: var(--cs-heading, #fff);
}

.compare-autocomplete-item:hover {
  background: color-mix(in srgb, var(--brand-primary, #6f2c91) 12%, transparent);
}

/* Scope pills */
.compare-scope-shell {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-scope-pills {
  flex-wrap: nowrap;
  min-width: min-content;
}

/* Empty state */
.compare-empty-state {
  color: color-mix(in srgb, var(--brand-card-text, rgba(255,255,255,.88)) 45%, transparent);
}

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}

/* Player name header cells */
.compare-table thead th {
  padding: .75rem .75rem .6rem;
  background: transparent !important;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-card-text, rgba(255,255,255,.88)) 12%, transparent) !important;
}

.compare-table thead th.compare-stat-col {
  width: 150px;
  min-width: 130px;
}

.compare-player-link {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-card-text, rgba(255,255,255,.9)) !important;
  text-decoration: none;
  text-align: right;
}

.compare-player-link:hover {
  color: color-mix(in srgb, var(--brand-primary) 90%, white 10%) !important;
  text-decoration: underline;
}

/* Section divider rows */
.compare-section-row .compare-section-cell {
  padding: .55rem .75rem .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-card-text, rgba(255,255,255,.88)) 50%, transparent) !important;
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent) !important;
  border-top: 1px solid color-mix(in srgb, var(--brand-card-text, rgba(255,255,255,.88)) 8%, transparent) !important;
  border-bottom: 0 !important;
}

.compare-section-row:first-child .compare-section-cell {
  border-top: 0 !important;
}

/* Data cells */
.compare-table tbody td {
  padding: .42rem .75rem;
  color: var(--brand-card-text, rgba(255,255,255,.88)) !important;
  background: transparent !important;
  font-size: .875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-card-text, rgba(255,255,255,.88)) 6%, transparent) !important;
}

.compare-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.compare-table .compare-player-col {
  min-width: 90px;
  text-align: right;
}

.compare-table .compare-stat-label {
  font-weight: 600;
  color: color-mix(in srgb, var(--brand-card-text, rgba(255,255,255,.88)) 60%, transparent) !important;
  font-size: .8rem;
}

/* Colour coding */
.compare-table td.compare-best {
  background: rgba(47, 179, 68, .18) !important;
  color: #5cd679 !important;
  font-weight: 700;
}

.compare-table td.compare-worst {
  background: rgba(220, 53, 69, .13) !important;
  color: #f07a84 !important;
}