.app-container {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      padding: 20px;
    }

  .odds-load-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #d6a033;
  background: #fff7e6;
  color: #5c3a00;
  font-weight: 700;
  border-radius: 6px;
  }

  .match-selector-container {
  display: flex;
  overflow-x: auto;
  margin-bottom: 20px;
  gap: 10px;
  /* Prevent scrollbar from overlapping the content */
  padding-bottom: 20px;
  scrollbar-gutter: stable;
  }

  .match-selector-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 14px 20px;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #ccc;
  font-size: 17px;
  font: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .match-selector-item:hover {
  background: #f5f5f5;
  }
  .match-selector-item.active {
  background: #4a4a4a;
  color: #fff;
  border-color: #4a4a4a;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .match-selector-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  }
  .match-selector-acro {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 700;
  }
  .match-selector-at {
  color: #888;
  font-size: 13px;
  }
  .match-selector-item.active .match-selector-at {
  color: #ccc;
  }

  .odds-noscript-matchups {
  margin: 12px 0 0;
  padding-left: 20px;
  }

  .match-odds-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  }
  .odds-item {
  display: flex;
  flex-direction: column;
  }
  .odds-title {
  font-size: 12px;
  color: #666;
  }
  .odds-value {
  font-size: 14px;
  font-weight: bold;
  }

  .odds-filter-container {
  margin-bottom: 20px;
  }
  .filter-btn {
  margin-right: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  }
  .filter-btn.active {
  background: #ddd;
  font-weight: bold;
  }

  .player-odds-table {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  }

  .table-header, .table-row {
  display: grid;
  /* 4 fixed columns (player, line, payout, best) + 1fr per bookie */
  grid-template-columns: 2fr 1fr 1fr 1fr repeat(var(--bookie-count, 4), 1fr);
  border-bottom: 1px solid #eee;
  }
  .bookie-head {
  padding: 6px 4px;
  }
  .bookie-logo {
  height: 22px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  }

  .header-cell, .cell {
  padding: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  }

  .table-header {
  background: #f0f0f0;
  font-weight: bold;
  }

  .player-col {
  justify-content: flex-start;
  }

  .line-col {
  justify-content: center;
  }

  .odds-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  .best {
    font-weight: bold;
  }
  .over-odds, .under-odds {
  font-size: 13px;
  padding: 3px 0;
  }
  .over-odds.best,
  .under-odds.best {
  min-width: 36px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  }
  .over-odds.best,
  .under-odds.best {
  background: #fef3c7;
  font-weight: 700;
  color: #92400e;
  }
  /* Add the new styles below 
  .over-odds {
  color: #2c7;
  }
  .under-odds {
  color: #e22;
  }*/

  .table-stats {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      margin: 20px 0;
    }

    .table-stats th,
    .table-stats td {
      padding: 6px 8px; /* Reduced padding for uniformity */
      text-align: center;
      border: 1px solid #ddd;
      white-space: nowrap; /* Prevent text wrapping */
    }

    .table-stats th:first-child,
    .table-stats td:first-child {
      width: 10%; /* Make the first column larger */
      text-align: left;
      padding-left: 10px;
    }

    .table-stats th:not(:first-child),
    .table-stats td:not(:first-child) {
      width: auto; /* Remaining columns share the remaining space */
    }

    .table-stats th {
      background-color: #4a4a4a;
      color: #ffffff;
      font-weight: bold;
    }
    .player-link {
      font-weight: bold; /* Default color for links */
      text-decoration: none; /* Remove underline */
      font-size: 14px;
      color:  #4a4a4a;
    }
    
    .player-link:hover,
    .player-link:focus {
      color: #FF5733; /* Replace with a color that indicates interactivity */
      text-decoration: underline; /* Adds underline on hover/focus */
    }

    .highlight {
      background-color: #4a4a4a; /* dark grey */
      color: #fff;             /* white text for contrast */
      padding: 5px;
      border-radius: 3px;
      font-style: bold;
    }
    .filter-icon {
      padding: 5px; /* adjust padding as needed */
    }

/* Interactive styling for sortable header cells */
.table-header .header-cell[data-sort] {
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.table-header .header-cell[data-sort]:hover {
  background-color: #ddd;
}
.statistics-icon {
  display: inline-block;   
  width: 24px;            
  height: 24px;           
  margin-left: 12px;       
  vertical-align: middle; 
}

.player-team_small {
  width: 30px;
  height: auto; 
  vertical-align: middle; 
  margin-right: 5px;
}
/* ────────────────────────────────────────────────────────────────
   Match-odds matrix (per bookie, per market)
   ──────────────────────────────────────────────────────────────── */
.match-odds-board {
  margin: 12px 0 20px;
}
.mob-table {
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.mob-row {
  display: grid;
  grid-template-columns: 1.6fr repeat(var(--bookie-count, 4), 1fr);
  border-bottom: 1px solid #eee;
}
.mob-row:last-child { border-bottom: 0; }
.mob-row--head {
  background: #f5f5f5;
}
.mob-market {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-right: 1px solid #eee;
}
.mob-market__name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}
.mob-market__line {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mob-market__sides {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mob-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-right: 1px solid #f0f0f0;
}
.mob-cell:last-child { border-right: 0; }
.mob-head { padding: 8px 4px; }
.mob-odd {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
  padding: 2px 4px;
  border-radius: 3px;
  color: #333;
}
.mob-odd.best {
  background: #fef3c7;
  font-weight: 700;
  color: #92400e;
}

/* Horizontally-scrolling wrapper for the player-odds grid table.
   Lets the rows keep their 8-column layout on phones without forcing
   the surrounding filter bars / banners to scroll too. */
.player-odds-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive: at narrow widths, let the matrix scroll horizontally */
@media (max-width: 900px) {
  .match-odds-board { overflow-x: auto; }
  .mob-table { min-width: 720px; }
  .player-odds-scroll .table-header,
  .player-odds-scroll .table-row { min-width: 760px; }
}

/* Phone tweaks for the odds tool: shrink the match-selector cards
   (17px text + 14px×20px padding is too tall for phone screens), tighten
   the app-container's padding so the table gets every available pixel,
   and let prop-type filter buttons wrap onto two rows. */
@media (max-width: 640px) {
  .app-container { padding: 12px 8px; }
  .match-selector-container { gap: 8px; padding-bottom: 14px; }
  .match-selector-item {
    padding: 9px 12px;
    font-size: 14px;
    gap: 7px;
    border-radius: 6px;
  }
  .match-selector-logo { width: 28px; height: 28px; }
  .match-selector-at { font-size: 11px; }
  .odds-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .filter-btn {
    margin-right: 0;
    padding: 7px 10px;
    font-size: 13px;
  }
  .table-stats { font-size: 12px; }
  .table-stats th,
  .table-stats td { padding: 4px 5px; }
}

/* ────────────────────────────────────────────────────────────────
   Expandable player rows: alternative lines dropdown
   ──────────────────────────────────────────────────────────────── */
.player-row-group {
  border-bottom: 1px solid #eee;
}
.player-row-group:last-child { border-bottom: 0; }
.player-row-group .table-row {
  border-bottom: 0;
}
.table-row.expandable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.table-row.expandable:hover {
  background-color: #fafafa;
}
.player-row-group.open > .table-row.expandable {
  background-color: #f4f6f8;
}
.row-chevron {
  margin-right: 6px;
  color: #888;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.player-row-group.open .row-chevron {
  transform: rotate(180deg);
  color: #4a4a4a;
}
.alt-line-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #4a4a4a;
  background: #e7eaee;
  border-radius: 10px;
  line-height: 1.4;
}
.player-row-group.open .alt-line-badge {
  background: #d7dde3;
}

/* Smooth expand using grid-template-rows trick (no fixed max-height) */
.alt-lines-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
  background: #fafbfc;
}
.player-row-group.open .alt-lines-panel {
  grid-template-rows: 1fr;
}
.alt-lines-inner {
  overflow: hidden;
  min-height: 0;
}
.alt-lines-table {
  padding: 8px 0 12px;
  border-top: 1px dashed #e1e4e8;
}
.alt-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr repeat(var(--bookie-count, 4), 1fr);
  align-items: center;
  border-radius: 4px;
}
.alt-row + .alt-row {
  margin-top: 2px;
}
.alt-row:not(.alt-row--head):hover {
  background: #f0f2f4;
}
.alt-row--head {
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0 6px;
}
.alt-line-col {
  padding: 6px 10px;
  font-weight: 600;
  color: #333;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.alt-bookie-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.alt-spacer-col {
  min-width: 0;
}
.alt-lines-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: #888;
  font-style: italic;
}

@media (max-width: 900px) {
  .alt-row { min-width: 920px; }
  .alt-lines-table { padding-right: 0; }
}

/* ────────────────────────────────────────────────────────────────
   Auto-refresh toggle bar
   ──────────────────────────────────────────────────────────────── */
.auto-refresh-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
  font-size: 13px;
  color: #555;
}
.auto-refresh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.auto-refresh-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.auto-refresh-toggle__track {
  position: relative;
  width: 34px;
  height: 18px;
  background: #ccc;
  border-radius: 999px;
  transition: background-color 0.18s ease;
  flex-shrink: 0;
}
.auto-refresh-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.auto-refresh-toggle input:checked + .auto-refresh-toggle__track {
  background: #2c7a4b;
}
.auto-refresh-toggle input:checked + .auto-refresh-toggle__track .auto-refresh-toggle__thumb {
  transform: translateX(16px);
}
.auto-refresh-toggle__label { color: #333; }
.auto-refresh-status {
  font-size: 12px;
  color: #777;
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────
   Odds movement arrows
   ──────────────────────────────────────────────────────────────── */
.odds-arrow {
  display: inline-block;
  margin-left: 3px;
  font-size: 9px;
  line-height: 1;
  vertical-align: middle;
  font-variant-numeric: normal;
}
.odds-arrow.up   { color: #2c7a4b; }
.odds-arrow.down { color: #c0392b; }