/* =========================
   Ranking Lists
   ========================= */

.ranking-list {
  display: flex;
  flex-direction: column;
}

.ranking-user-stack {
  line-height: 1.2;
}

/* Ranking rows using result-card layout */
.ranking-list .result-card {
  justify-content: space-between;
}

.ranking-main-tabs,
.ranking-subtabs {
  border-bottom: 1px solid var(--color-border);
}

.ranking-subtabs .nav-link {
  margin-right: 0.5rem;
}

.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable::after {
  content: " ↕";
  opacity: 0.4;
  font-size: 0.9em;
}

.sortable.sort-active::after {
  opacity: 1;
}

.sortable.sort-desc::after {
  content: " ↓";
}

.sortable.sort-asc::after {
  content: " ↑";
}

/* Highlight own row with a blue tint that works on every striped row color.
   box-shadow override is required because Bootstrap 5 paints stripes via
   inset box-shadow, which would otherwise sit on top of our background-color. */
.table-striped > tbody > tr.ranking-own-row > th,
.table-striped > tbody > tr.ranking-own-row > td,
.ranking-own-row > th,
.ranking-own-row > td {
  --bs-table-accent-bg: rgba(11, 94, 215, 0.25) !important;
  background-color: rgba(11, 94, 215, 0.25) !important;
  box-shadow: inset 0 0 0 9999px rgba(11, 94, 215, 0.25) !important;
}

/* Position change indicators */
.rank-change-wrapper {
  width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
}

.rank-change {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.rank-change-up {
  color: var(--green);
}

.rank-change-down {
  color: var(--color-danger);
}

.rank-change-neutral {
  color: var(--gray);
  font-size: 0.85rem;
}

.ranking-own-entry {
  background: linear-gradient(
    to right,
    transparent 1px,
    rgba(11, 94, 215, 0.48) 20%,
    rgba(11, 94, 215, 0.32) 50%,
    rgba(11, 94, 215, 0.12) 80%,
    rgba(11, 94, 215, 0) 100%
  );
}