/* server/rankings.css — the Rankings tab of the HMS panel (UI code: server/rankings.js).
 *
 * The panel's own stylesheet (inline in panel.html) already styles section/h2, tables, buttons,
 * inputs, pills and the colour variables; this file only adds what the rankings view needs.
 * Every class and id is prefixed `rk-` and the few element rules are scoped to #view-rankings,
 * so nothing here can restyle the Live tab. */

#view-rankings{--rk-gold:#e3b341;padding:16px;display:grid;gap:16px;max-width:1700px;margin:0 auto}
#view-rankings a{color:var(--accent);text-decoration:none}
#view-rankings a:hover{text-decoration:underline}
#view-rankings section > h2{flex-wrap:wrap}
#view-rankings input[type=checkbox]{width:auto;margin:0}
#view-rankings button:disabled,#view-rankings button:disabled:hover{opacity:.55;cursor:default;border-color:var(--line);color:var(--text)}
#view-rankings button.primary:disabled,#view-rankings button.primary:disabled:hover{background:#1f6feb;border-color:#1f6feb;color:#fff}
.rk-hide{display:none !important}
.rk-h2note{text-transform:none;letter-spacing:0}

/* ---- toolbar: credential + queue pills, the global scrape buttons ---- */
.rk-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rk-toolbar .rk-spacer{flex:1}
#rk-notices{display:grid;gap:8px}
#rk-notices:empty{display:none}
#rk-notices .rk-banner{margin-top:0}

/* ---- layout: board list on the left, the selected board on the right ---- */
.rk-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
/* --rk-head is the measured panel header height (rankings.js), so the list sticks just below it. */
#rk-side{position:sticky;top:calc(var(--rk-head,46px) + 16px);display:flex;flex-direction:column;
         max-height:calc(100vh - var(--rk-head,46px) - 32px)}
.rk-search{padding:8px 10px;border-bottom:1px solid var(--line)}
.rk-search input{width:100%}
#rk-board-list{position:relative;overflow-y:auto;flex:1;min-height:0}
.rk-grp{position:sticky;top:0;z-index:1;display:flex;gap:6px;padding:5px 12px;background:var(--panel2);
        border-bottom:1px solid var(--line);color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.rk-grp .rk-spacer{flex:1}
#view-rankings a.rk-brow{display:flex;gap:9px;align-items:flex-start;padding:7px 12px;border-bottom:1px solid #21262d;color:var(--text)}
#view-rankings a.rk-brow:hover{background:#1a2029;text-decoration:none}
#view-rankings a.rk-brow.rk-sel{background:#1c2636;box-shadow:inset 3px 0 0 var(--accent)}
.rk-flag{font-size:16px;line-height:1.25;width:20px;text-align:center;flex:none}
.rk-bmain{min-width:0;flex:1}
.rk-bline{display:flex;align-items:center;gap:6px;min-width:0}
.rk-bline .dot{margin-right:0;flex:none}
.rk-bline b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-bmeta{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-badge{flex:none;font-size:9px;padding:0 4px;border-radius:3px;border:1px solid var(--line);
          letter-spacing:.5px;line-height:15px;text-transform:uppercase}
.rk-badge.rk-daily{color:#d2a8ff;border-color:#8957e5}
.rk-badge.rk-weekly{color:#79c0ff;border-color:#1f6feb}
.rk-badge.rk-unknown{color:var(--dim)}
.rk-mk{flex:none;font-size:10px}
.rk-mk.rk-run{color:var(--accent)} .rk-mk.rk-q{color:var(--warn)} .rk-mk.rk-sch{color:var(--dim)}
.rk-nomatch{padding:14px 12px;color:var(--dim)}

/* ---- the selected board ---- */
/* Scrolled to after picking a board in the stacked layout: land below the sticky panel header. */
#rk-board{scroll-margin-top:calc(var(--rk-head,46px) + 8px)}
#rk-board > h2.rk-btitle{font-size:15px;text-transform:none;letter-spacing:0;color:var(--text)}
#rk-board > h2.rk-btitle .rk-flag{font-size:20px;width:auto}
#rk-b-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.rk-info{display:grid;gap:3px}
.rk-banner{margin-top:10px;border:1px solid rgba(248,81,73,.55);background:rgba(248,81,73,.08);
           border-radius:6px;padding:8px 12px;overflow-wrap:anywhere}
.rk-banner.rk-warn{border-color:rgba(210,153,34,.55);background:rgba(210,153,34,.08)}
.rk-banner.rk-ok{border-color:rgba(63,185,80,.55);background:rgba(63,185,80,.08)}
/* the connection probe: a result card under the toolbar */
#rk-probe{margin-top:12px}
#rk-probe .rk-banner{margin-top:0}
#rk-probe-meta{margin-top:8px}
#rk-t-probe td{white-space:nowrap}
#rk-t-probe td:last-child{white-space:normal;overflow-wrap:anywhere}
.rk-probe-close{padding:0 7px;line-height:1.4;margin-left:8px}
.rk-tools{margin-top:10px}
.rk-settings{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;margin-top:12px}
.rk-box{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-width:0}
.rk-boxh{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:8px}
.rk-sub{margin-top:8px}
.rk-chip{display:inline-flex;align-items:center;gap:2px;padding:1px 2px 1px 8px;border-radius:999px;
         background:var(--bg);border:1px solid var(--line);font-size:11px}
#view-rankings .rk-chip button{border:none;background:none;padding:0 5px;font-size:12px;line-height:1;color:var(--dim)}
#view-rankings .rk-chip button:hover{color:var(--bad)}

/* ---- the top-99 table ---- */
.rk-tablewrap{overflow-x:auto;border-top:1px solid var(--line)}
#rk-t-rank td{padding:4px 8px}
td.rk-rank{width:44px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
tr.rk-rw td.rk-rank{color:var(--rk-gold)}
td.rk-num,th.rk-num{text-align:right;font-variant-numeric:tabular-nums}
td.rk-delta{width:52px}
tr.rk-cut td{padding:3px 8px;background:rgba(227,179,65,.08);border-top:1px dashed var(--rk-gold);
             border-bottom:1px dashed var(--rk-gold);color:var(--rk-gold);font-size:11px;text-align:center;white-space:normal}
tr.rk-cut:hover td{background:rgba(227,179,65,.08)}
.rk-up{color:var(--ok)} .rk-down{color:var(--bad)}
.rk-new{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.4px}
.rk-creator{display:flex;align-items:center;gap:9px;min-width:0}
.rk-who{min-width:0}
.rk-nick{max-width:300px;overflow:hidden;text-overflow:ellipsis}
.rk-av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
       width:28px;height:28px;border-radius:50%;overflow:hidden;font-size:11px;font-weight:600;color:#e6edf3}
.rk-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#view-rankings .rk-live{display:inline-block;background:#da3633;color:#fff;font-size:9px;font-weight:700;padding:0 5px;
         border-radius:3px;letter-spacing:.4px;line-height:15px;margin-left:4px}
#view-rankings a.rk-live:hover{background:var(--bad);text-decoration:none}
td.rk-empty{padding:34px 12px;text-align:center;color:var(--dim);white-space:normal}

/* Stacked at 900px and below: the board list first (scrollable), then the selected board. */
@media (max-width:900px){
  #view-rankings{padding:12px;gap:12px}
  .rk-layout{grid-template-columns:minmax(0,1fr)}
  #rk-side{position:static;max-height:46vh}
  .rk-settings{grid-template-columns:minmax(0,1fr)}
  .rk-nick{max-width:150px}
}
/* Phones: rank, movement, creator and diamonds fit without sideways scrolling. */
@media (max-width:600px){
  .rk-wide{display:none}
  #rk-t-rank td,.rk-tablewrap th{padding-left:5px;padding-right:5px}
  .rk-nick,.rk-who .tiny{max-width:150px;overflow:hidden;text-overflow:ellipsis}
}