/* ── Gedeelde ranking-tabel (RankingTable component) ──────────────────── */
.rt-table-outer { overflow-x:auto; }
.rt-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.rt-table th {
  text-align:left; font-family:'DM Mono',monospace; font-size:0.62rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim);
  padding:0.6rem 1.5rem; border-bottom:1px solid var(--border);
  background:var(--bg2); white-space:nowrap; cursor:pointer; user-select:none;
}
.rt-table th:hover { color:var(--text); }
.rt-table th.sorted { color:#cc2200; }
.rt-table th .sa { margin-left:3px; opacity:0.5; }
.rt-table th.sorted .sa { opacity:1; }
.rt-table th.no-sort { cursor:default; }
.rt-table th.no-sort:hover { color:var(--text-dim); }
.rt-table td {
  padding:0.55rem 1.5rem; border-bottom:1px solid var(--bg3,#1a1a1a);
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:260px; vertical-align:middle;
}
.rt-table tr:hover td { background:var(--bg2); }
.rt-td-rank { color:var(--text-faint) !important; font-family:'DM Mono',monospace; font-size:0.68rem !important; width:2rem; text-align:right; }
.rt-td-name { font-size:0.88rem !important; }
.rt-td-sub  { color:var(--text-dim) !important; font-size:0.78rem !important; }
.rt-td-plays { font-family:'DM Mono',monospace; font-size:0.78rem !important; color:var(--gold-dim,#aaa) !important; }
.rt-td-bar  { width:100px; min-width:80px; }
.rt-bar-wrap { background:var(--bg3); border-radius:2px; height:4px; overflow:hidden; }
.rt-bar-fill { height:100%; background:#cc2200; border-radius:2px; transition:width 0.3s; }
.rt-listeners-dots { display:flex; gap:3px; align-items:center; }
.rt-l-dot { width:7px; height:7px; border-radius:50%; }
.rt-l-dot.on  { background:#cc2200; opacity:0.85; }
.rt-l-dot.off { background:var(--bg3); }

/* ── Pagination ── */
.rt-pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.65rem 1.5rem; border-top:1px solid var(--border); background:var(--bg2);
}
.rt-page-btns { display:flex; gap:4px; align-items:center; }
.rt-pg-btn {
  background:var(--bg2); border:1px solid var(--border); color:var(--text-dim);
  font-family:'DM Mono',monospace; font-size:0.72rem; padding:4px 10px;
  border-radius:3px; cursor:pointer; transition:all 0.15s;
}
.rt-pg-btn:hover:not(:disabled) { border-color:var(--gold-dim,#888); color:var(--gold,#ddd); }
.rt-pg-btn:disabled { opacity:0.3; cursor:not-allowed; }
.rt-pg-btn.cur { background:#cc2200; border-color:#cc2200; color:#fff; }
.rt-pg-ellipsis { font-size:0.72rem; color:var(--text-dim); padding:0 4px; }

/* ── Listener tooltip ── */
.rt-listeners-wrap { position:relative; display:inline-flex; align-items:center; gap:5px; cursor:default; }
.rt-listener-tooltip {
  display:none; position:fixed; z-index:500;
  background:var(--bg2); border:1px solid var(--border); border-radius:6px;
  padding:8px 12px; min-width:160px; box-shadow:0 4px 16px rgba(0,0,0,0.5);
  pointer-events:none;
}
.rt-listener-tooltip.visible { display:block; }
.rt-lt-row { display:flex; justify-content:space-between; gap:16px; font-size:0.78rem; padding:2px 0; }
.rt-lt-name { color:var(--text); font-family:'DM Sans',sans-serif; }
.rt-lt-plays { color:var(--gold-dim,#aaa); font-family:'DM Mono',monospace; font-size:0.72rem; }