/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD — single source of truth for every ranked table on the site.

   Used by: leaderboard.html, routine_overview.html, team.html,
            ranking.html, stats.html

   Opt in by putting class="lb-table" on the <table>. Nothing here leaks to
   other tables, so ordinary data tables keep their own styling.

   Tweak points:
     --lb-row-height  total height of a body row (includes vertical padding)
     --lb-line        text line box inside a row
     --lb-pad-y/x     cell padding
   Keep (row-height − 2 × pad-y) at 16px or more: that is the height of the
   tallest inline element a row can contain (country flag, Pro/Mod badge).
   Go below it and rows containing those grow taller than the rest, which
   makes paged tables shift.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --lb-row-height: 32px;
  --lb-line:       18px;
  --lb-pad-y:      6px;
  --lb-pad-x:      8px;
  --lb-rule:       #f3f3f3;   /* row divider      */
  --lb-head-rule:  #e8e8e8;   /* header underline */
  --lb-accent:     #2b7a3e;
}

/* ── Table shell ─────────────────────────────────────────────────────────
   width:auto + min-width:100% lets a wide table overflow its wrapper and
   scroll, rather than squeezing columns or wrapping names. */
.lb-table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.lb-table thead th {
  text-align: left;
  padding: 6px var(--lb-pad-x);
  color: #666;
  font-weight: 600;
  border-bottom: 1px solid var(--lb-head-rule);
  white-space: nowrap;
}
.lb-table thead th.num { text-align: center; }

/* Fixed height and line box so a row's height never depends on whether it
   happens to contain a flag, a title badge or a role badge. */
.lb-table tbody td {
  height: var(--lb-row-height);
  line-height: var(--lb-line);
  padding: var(--lb-pad-y) var(--lb-pad-x);
  border-bottom: 1px solid var(--lb-rule);
  color: #333;
  white-space: nowrap;
}
.lb-table tbody td.num { text-align: center; font-variant-numeric: tabular-nums; }
.lb-table tbody tr:last-child td { border-bottom: none; }

/* Centre every inline badge in the line box so none of them can stretch it. */
.lb-table tbody td .country-flag,
.lb-table tbody td .badge,
.lb-table tbody td .title-badge { vertical-align: middle; }
.lb-table tbody td .badge svg { display: block; }

/* ── Ranks, identity ─────────────────────────────────────────────────── */
.lb-table .gold   { color: #c9a227; font-weight: 700; }
.lb-table .silver { color: #8c9198; font-weight: 700; }
.lb-table .bronze { color: #a0522d; font-weight: 700; }
.lb-table .me td  { background: #f0faf3; }
.lb-table tr.me td { background: #f0faf3; }

.lb-table .username-link { color: #333; text-decoration: none; font-weight: 600; }
.lb-table .username-link:hover { color: var(--lb-accent); }

/* ── Blank spacer rows ───────────────────────────────────────────────────
   Pad a short final page so the card keeps one height and the pager below
   it stays put. They keep their bottom border, so a partial page closes
   with a rule in the same place a full page does. */
.lb-table tbody tr.lb-filler td {
  padding: var(--lb-pad-y) var(--lb-pad-x);
  border-bottom: 1px solid var(--lb-rule);
}

/* ── Horizontal scroll wrapper ───────────────────────────────────────────
   The double rotate puts the scrollbar above the table instead of below,
   where it is easier to notice. Drop both rules for a normal bottom bar. */
.lb-scroll { overflow-x: auto; transform: rotateX(180deg); }
.lb-scroll > .lb-table { transform: rotateX(180deg); }

/* ── Pagination ──────────────────────────────────────────────────────── */
.lb-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 14px;
  font-size: 0.82rem; color: #888;
}
.lb-page-btn {
  padding: 4px 12px;
  border: 1.5px solid #ddd; border-radius: 6px;
  background: #fff; color: #555;
  font-size: 0.82rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.lb-page-btn:hover:not(:disabled) { border-color: var(--lb-accent); color: var(--lb-accent); }
.lb-page-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Column legend ───────────────────────────────────────────────────── */
.col-legend {
  display: grid; grid-template-columns: auto 1fr;
  gap: 5px 10px;
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  font-size: 0.76rem; line-height: 1.5;
}
.col-legend dt { font-weight: 700; color: #555; text-align: right; white-space: nowrap; }
.col-legend dd { margin: 0; color: #999; }
.col-legend dd strong { color: #777; font-weight: 700; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.lb-empty { color: #aaa; font-size: 0.88rem; text-align: center; padding: 12px 0; }