/* wgf-leaderboard.css — Modules M31 + M32: Leaderboard Table and Distribution Bars.
   M31 builds on the M29 canonical table pattern (wgf-data-table.css) and adds
   rank accents, character identity cells with class colors, and rating deltas.
   M32 is pure CSS horizontal bars for class/spec/faction distribution.
   Colours/type from _tokens.css. */

/* ════════════════════════════════════════
   M31 — LEADERBOARD TABLE
   Extends wgf-data-table.css; page authors
   include both stylesheets.
   ════════════════════════════════════════ */

/* WoW class identity colors — identity axis, NOT market direction */
.wgf-leaderboard{
  --class-death-knight:#C41E3A;
  --class-demon-hunter:#A330C9;
  --class-druid:#FF7C0A;
  --class-evoker:#33937F;
  --class-hunter:#AAD372;
  --class-mage:#3FC7EB;
  --class-monk:#00FF98;
  --class-paladin:#F48CBA;
  --class-priest:#FFFFFF;
  --class-rogue:#FFF468;
  --class-shaman:#0070DD;
  --class-warlock:#8788EE;
  --class-warrior:#C69B3A;
}

/* Rank column — gold accent for top 3 */
.rank-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  min-width:2ch;
  display:inline-block;
  text-align:right;
}
.rank-num--1{color:var(--wgf-gold-primary);font-weight:700;}
.rank-num--2{color:var(--wgf-gold-muted);}
.rank-num--3{color:var(--wgf-gold-accent);}

/* Character identity cell: portrait + class-colored name + spec + realm */
.char-identity{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
.char-portrait{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid var(--wgf-border-neutral);
  background:var(--wgf-panel-3);
}
/* Class-color ring on portrait — identity, NOT rarity or market direction */
.char-portrait--death-knight{border-color:var(--class-death-knight);}
.char-portrait--demon-hunter{border-color:var(--class-demon-hunter);}
.char-portrait--druid{border-color:var(--class-druid);}
.char-portrait--evoker{border-color:var(--class-evoker);}
.char-portrait--hunter{border-color:var(--class-hunter);}
.char-portrait--mage{border-color:var(--class-mage);}
.char-portrait--monk{border-color:var(--class-monk);}
.char-portrait--paladin{border-color:var(--class-paladin);}
.char-portrait--priest{border-color:var(--class-priest);}
.char-portrait--rogue{border-color:var(--class-rogue);}
.char-portrait--shaman{border-color:var(--class-shaman);}
.char-portrait--warlock{border-color:var(--class-warlock);}
.char-portrait--warrior{border-color:var(--class-warrior);}
.char-info{min-width:0;overflow:hidden;}
.char-name{
  display:block;font-family:var(--font-ui);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Class color on NAME — WoW class system identity, never market direction */
.char-name--death-knight{color:var(--class-death-knight);}
.char-name--demon-hunter{color:var(--class-demon-hunter);}
.char-name--druid{color:var(--class-druid);}
.char-name--evoker{color:var(--class-evoker);}
.char-name--hunter{color:var(--class-hunter);}
.char-name--mage{color:var(--class-mage);}
.char-name--monk{color:var(--class-monk);}
.char-name--paladin{color:var(--class-paladin);}
.char-name--priest{color:var(--class-priest);}
.char-name--rogue{color:var(--class-rogue);}
.char-name--shaman{color:var(--class-shaman);}
.char-name--warlock{color:var(--class-warlock);}
.char-name--warrior{color:var(--class-warrior);}
.char-meta{
  display:block;font-family:var(--font-ui);font-size:var(--text-xs);color:var(--wgf-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Rating delta — market-direction colors (directional score changes ONLY) */
.delta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-xs);}
.delta--up{color:var(--wgf-up);}
.delta--down{color:var(--wgf-down);}
.delta--neutral{color:var(--wgf-neutral-text);}


/* ════════════════════════════════════════
   M31 — WGF LADDER EXTENSIONS (PvP + M+ pages)
   The live leaderboard pages compose the M31 row above but carry richer columns than the
   template preview (rating tier, spec, faction, W/L/Win%). These are the page-specific cells
   + a single-table → stacked-card mobile mode (the lazy-loaded ladder can't use the dual-DOM
   card list — infinite scroll appends <tr> only — so rows collapse via data-label instead).
   Scoped to .wgf-leaderboard so nothing else inherits them.
   ════════════════════════════════════════ */

/* Portrait as a CONTAINER (race face / spec icon / blank), class ring from base .char-portrait--* */
.wgf-leaderboard .char-portrait{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;}
.wgf-leaderboard .char-portrait > img,
.wgf-leaderboard .char-portrait > svg,
.wgf-leaderboard .char-portrait .wgf-pvp-icon,
.wgf-leaderboard .char-portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.wgf-leaderboard .char-portrait--none{border-color:var(--wgf-border-neutral);}

/* Identity links (name + realm) reset to the page link tokens */
.wgf-leaderboard a.char-name{text-decoration:none;}
.wgf-leaderboard a.char-name:hover{text-decoration:underline;}
.wgf-leaderboard a.char-meta{color:var(--wgf-muted);text-decoration:none;}
.wgf-leaderboard a.char-meta:hover{text-decoration:underline;color:var(--wgf-link);}

/* Rating cell: tier shield + mono gold number */
.wgf-lb-rating{display:inline-flex;align-items:center;gap:.35rem;justify-content:flex-end;}
.wgf-lb-rating b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--wgf-gold-bright);font-weight:600;}
.wgf-pvp-tier{display:inline-flex;}

/* Spec cell: icon + class-coloured label */
.wgf-lb-spec{display:inline-flex;align-items:center;gap:.4rem;min-width:0;}
.wgf-lb-spec .wgf-pvp-icon{width:20px;height:20px;border-radius:4px;flex:0 0 auto;}
.wgf-lb-specname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Centered cells (faction) */
.wgf-table__th--center,.wgf-table__td--center{text-align:center;}
.wgf-leaderboard .wgf-pvp-fac{display:inline-flex;align-items:center;justify-content:center;}
.wgf-leaderboard .wgf-pvp-fac img{width:20px;height:20px;}

/* Sortable header — compose the M29 aria-sort visuals; JS toggles .on + aria-sort */
.wgf-leaderboard .wgf-table__th.wgf-pvp-sortable{cursor:pointer;padding-right:calc(var(--space-3) + 14px);}
.wgf-leaderboard .wgf-table__th.wgf-pvp-sortable.on{color:var(--wgf-gold-muted);
  border-bottom:2px solid var(--wgf-gold-accent);}

/* Faction row identity cue — neutral faction tones (NOT market green/red); a left rule so it
   coexists with the zebra striping instead of fighting it. */
.wgf-leaderboard .wgf-pvp-horde td:first-child{box-shadow:inset 3px 0 0 #8b1a1a;}
.wgf-leaderboard .wgf-pvp-alliance td:first-child{box-shadow:inset 3px 0 0 #1a5fa0;}

/* ── Mobile: single table → stacked cards (≤680px) ── */
@media(max-width:680px){
  /* neutralise the desktop table shell so the rows read as standalone cards */
  .wgf-leaderboard .wgf-table-wrap{border:0;background:transparent;box-shadow:none;
    overflow:visible;border-radius:0;}
  .wgf-table--cards thead tr{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0,0,0,0);}
  .wgf-table--cards,.wgf-table--cards tbody,.wgf-table--cards tr,.wgf-table--cards td{
    display:block;width:auto;}
  .wgf-table--cards tr{border:1px solid var(--wgf-border-neutral);border-radius:var(--radius-card);
    background:var(--wgf-panel-1);margin:0 0 var(--space-2);padding:var(--space-2) var(--space-3);}
  .wgf-table--cards tr:nth-child(even){background:var(--wgf-panel-1);}
  .wgf-table--cards td{display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-3);padding:var(--space-1) 0;text-align:right;border:0;box-shadow:none;}
  .wgf-table--cards td::before{content:attr(data-label);font-family:var(--font-display);
    font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--wgf-muted);
    text-align:left;}
  /* the identity cell is the card header — full width, no label, bottom rule */
  .wgf-table--cards td.wgf-table__td--identity{justify-content:flex-start;
    padding:0 0 var(--space-2);margin-bottom:var(--space-2);
    border-bottom:1px solid var(--wgf-border-neutral-soft);}
  .wgf-table--cards td.wgf-table__td--identity::before{display:none;}
  .wgf-table--cards .wgf-lb-rating{justify-content:flex-end;}
}

/* ════════════════════════════════════════
   M32 — DISTRIBUTION / REPRESENTATION BARS
   Pure CSS horizontal bars — no canvas.
   Class/spec bars: WoW class identity colors.
   Faction bars: neutral faction identity colors.
   Green/red RESERVED for market price direction only.
   ════════════════════════════════════════ */

/* Bar chart container */
.bar-chart{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}
.bar-chart__title{
  font-family:var(--font-display);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--wgf-muted);margin:0 0 var(--space-3);
}
.bar-chart__fresh{margin-bottom:var(--space-3);}

/* Single bar row */
.bar-row{
  display:grid;
  grid-template-columns:10rem 1fr max-content;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}
.bar-row:last-child{margin-bottom:0;}

.bar-label{
  font-family:var(--font-ui);font-size:var(--text-sm);
  color:var(--wgf-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:right;
  padding-right:var(--space-2);
}
.bar-track{
  position:relative;
  height:16px;
  background:var(--wgf-panel-3);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
.bar-fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:var(--radius-pill);
}
/* Class colors — identity axis, NOT market direction */
.bar-fill--death-knight{background:var(--class-death-knight);}
.bar-fill--demon-hunter{background:var(--class-demon-hunter);}
.bar-fill--druid{background:var(--class-druid);}
.bar-fill--evoker{background:var(--class-evoker);}
.bar-fill--hunter{background:var(--class-hunter);}
.bar-fill--mage{background:var(--class-mage);}
.bar-fill--monk{background:var(--class-monk);}
.bar-fill--paladin{background:var(--class-paladin);}
.bar-fill--priest{background:var(--class-priest);}
.bar-fill--rogue{background:var(--class-rogue);}
.bar-fill--shaman{background:var(--class-shaman);}
.bar-fill--warlock{background:var(--class-warlock);}
.bar-fill--warrior{background:var(--class-warrior);}
/* Faction identity — neutral tones, not green/red */
.bar-fill--alliance{background:#1a5fa0;}
.bar-fill--horde{background:#8b1a1a;}
/* Category neutral tones */
.bar-fill--neutral{background:var(--wgf-gold-accent);}
.bar-fill--neutral-2{background:var(--wgf-muted);}
.bar-fill--neutral-3{background:color-mix(in srgb,var(--wgf-gold-muted) 60%,var(--wgf-panel-3));}

/* Animate bar fills on load — respects reduced-motion */
@media(prefers-reduced-motion:no-preference){
  .bar-fill{
    animation:bar-grow 0.4s var(--ease-standard) both;
  }
  @keyframes bar-grow{from{width:0 !important}to{}}
}
@media(prefers-reduced-motion:reduce){
  .bar-fill{animation:none;}
}

.bar-value{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);color:var(--wgf-text);
  min-width:3.5rem;text-align:right;
}

/* Compact variant (narrower label) */
.bar-chart--compact .bar-row{
  grid-template-columns:7rem 1fr max-content;
}
.bar-chart--compact .bar-track{height:10px;}

/* Split bar (faction split — two fills in one track) */
.bar-track--split{display:flex;}
.bar-fill-split{height:100%;}
.bar-fill-split--left{border-radius:var(--radius-pill) 0 0 var(--radius-pill);}
.bar-fill-split--right{border-radius:0 var(--radius-pill) var(--radius-pill) 0;}
.bar-track--split .bar-fill-split--left{background:#1a5fa0;}
.bar-track--split .bar-fill-split--right{background:#8b1a1a;}

/* Responsive: shrink label column on narrow screens */
@media(max-width:600px){
  .bar-row{grid-template-columns:6rem 1fr max-content;}
}
@media(max-width:440px){
  .bar-row{grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  .bar-label{text-align:left;padding-right:0;}
  .bar-value{text-align:left;}
}