/* styles.css */

/* Custom navbar background and link color */
.navbar-custom {
  background-color: #005e23 !important;
}

/* Set nav link colors to white */
.navbar-custom .nav-link {
  color: #ffffff !important;
}

/* Optional: Change link color on hover */
.navbar-custom .nav-link:hover {
  color: #005e23;
}

/* Custom styles for dropdown menus (if applicable) */
.navbar-custom .dropdown-menu {
  background-color: #005e23;
}

/* Set dropdown items font color to black */
.navbar-custom .dropdown-item {
  color: #ffffff !important;
}

.navbar-custom .dropdown-item:hover {
  background-color: #005e23;
  color: #ffffff;
}

/* at mobile sizes (below lg), when the collapsed menu is open, force it to flex */
@media (max-width: 991.98px) {
  .navbar-collapse.collapse.show {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
  }
}

#player-search-suggestions {
  z-index: 2000;   /* above dropdowns/offcanvas/etc. */
}

/* Update all buttons to have a custom background */
button:not(.lbp-arrow),
input[type="button"],
input[type="submit"],
.btn {
  background-color: #005e23 !important;
  border-color: #005e23 !important;
}

.table thead th {
  background-color: #005e23 !important;
  color: #ffffff !important;
}

/* Make the table container scrollable horizontally */
.table-responsive {
  overflow-x: auto;
  font-weight: normal !important;
}

/* Un-bold headers in responsive tables */
.table-responsive .table thead th,
.table-responsive .table tbody th {
  font-weight: normal !important;
}

/* Leaderboard preview divider */
.leaderboard-preview {
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.leaderboard-preview .players-scroll a {
  color: #000 !important;
  text-decoration: none;   /* already in markup but safe here */
}

/* Container & scroll strip */
.lbp-wrap {
  --lbp-gap: .5rem;
  --lbp-gutter: 48px;
  position: relative;    /* make arrows position against this */
}

.players-scroll {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  gap: var(--lbp-gap);
  padding: .25rem 2.25rem;          /* room for arrows */
  margin-left:  var(--lbp-gutter);
  margin-right: var(--lbp-gutter);        /* breathing room right of last item */
  scroll-behavior: smooth;
  cursor: grab;
  scroll-snap-type: x mandatory;    /* snap to items */
}
/* left/right spacers that behave like items */
.players-scroll:active { cursor: grabbing; }

/* Hide scrollbars (cross-browser) */
.players-scroll { scrollbar-width: none; }
.players-scroll::-webkit-scrollbar { display: none; }

/* Items */
.lbp-item {
  display: inline-block;
  margin-right: var(--lbp-gap);
  scroll-snap-align: start;
}

/* Arrows */
.lbp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: none;                 /* transparent */
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  color: #333;
}
.lbp-arrow i { font-size: 1.25rem; pointer-events: none; } /* for Bootstrap Icons */
.lbp-left  { left: 0px; }
.lbp-right { right: 0px; }

/* Edge fades (hint more content) */
.lbp-fade {
  position: absolute;
  width: 36px;
  pointer-events: none;
  z-index: 3;
}
.lbp-fade-left  { left: 0;  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.lbp-fade-right { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

/* Hide arrows/fades when not needed */
.lbp-wrap.no-overflow .lbp-arrow,
.lbp-wrap.no-overflow .lbp-fade { display: none; }