/* ──────────────────────────────────────────────────────────────────────────
   Pre KVK 174 — event ranking (server BXH + player BXH).
   Rendered inside #tab-kvk (sub-tab). Reuses theme tokens + shared components
   (.panel, .cod-surface, .chip, .search-input, .table-wrap) from style.css.
   ────────────────────────────────────────────────────────────────────────── */

#tab-kvk .pk-head { text-align:center; margin-bottom:18px; }
#tab-kvk .pk-head-badge {
  display:inline-block; font-family:'Rajdhani',sans-serif; font-weight:700;
  letter-spacing:3px; font-size:.72rem; color:var(--gold);
  border:1px solid var(--border-gold, rgba(240,180,41,.35)); border-radius:999px;
  padding:3px 14px; margin-bottom:8px; text-transform:uppercase;
  background:linear-gradient(180deg, rgba(240,180,41,.08), transparent);
}
#tab-kvk .pk-title {
  margin:0; font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:1px;
  font-size:1.7rem; color:var(--gold-light, #ffd97d);
  text-shadow:0 2px 18px rgba(240,180,41,.25);
}
#tab-kvk .pk-sub { color:var(--text-dim); font-size:.86rem; margin-top:4px; }
#tab-kvk .pk-updated { color:var(--text-dim); font-size:.74rem; margin-top:4px; opacity:.8; }

#tab-kvk .pk-panel { margin-bottom:16px; }
#tab-kvk .pk-panel-title {
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.5px;
  font-size:1.05rem; color:var(--gold); margin-bottom:12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
#tab-kvk .pk-panel-total {
  margin-left:auto; font-size:.78rem; color:var(--text-dim);
  font-family:'Rajdhani',sans-serif; font-weight:600;
}

/* ── Server ranking (podium bars) ── */
#tab-kvk .pk-srv-list { display:flex; flex-direction:column; gap:8px; }
#tab-kvk .pk-srv-row {
  display:grid; grid-template-columns:38px minmax(84px,auto) 1fr auto;
  align-items:center; gap:12px; padding:8px 12px; border-radius:10px;
  background:var(--bg3, rgba(255,255,255,.02)); border:1px solid var(--border);
  transition:border-color .15s, background .15s;
}
#tab-kvk .pk-srv-row.mine {
  border-color:var(--border-gold, rgba(240,180,41,.4));
  background:linear-gradient(90deg, rgba(240,180,41,.10), rgba(240,180,41,.02));
}
#tab-kvk .pk-srv-rank {
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:8px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.95rem;
  background:rgba(255,255,255,.05); color:var(--text-dim); border:1px solid var(--border);
}
#tab-kvk .pk-srv-rank.g { background:linear-gradient(135deg,#f0b429,#ffd97d); color:#3a2600; border-color:transparent; }
#tab-kvk .pk-srv-rank.s { background:linear-gradient(135deg,#c7ccd6,#eef1f6); color:#2a2f3a; border-color:transparent; }
#tab-kvk .pk-srv-rank.b { background:linear-gradient(135deg,#cd7f32,#e0a066); color:#2a1600; border-color:transparent; }
#tab-kvk .pk-srv-name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem; color:var(--text); white-space:nowrap; }
#tab-kvk .pk-mine-tag {
  font-size:.6rem; letter-spacing:1px; color:var(--gold); border:1px solid var(--border-gold, rgba(240,180,41,.4));
  border-radius:4px; padding:1px 5px; vertical-align:middle; text-transform:uppercase; font-family:'Rajdhani',sans-serif;
}
#tab-kvk .pk-srv-bar { height:10px; border-radius:6px; background:rgba(255,255,255,.05); overflow:hidden; }
#tab-kvk .pk-srv-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,#4fa8ff,#5bc8ff); }
#tab-kvk .pk-srv-fill.mine { background:linear-gradient(90deg,#f0b429,#ffd97d); }
#tab-kvk .pk-srv-score { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.95rem; color:var(--gold-light,#ffd97d); text-align:right; min-width:96px; }

/* ── Player toolbar ── */
#tab-kvk .pk-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
#tab-kvk .pk-search-wrap { flex:1 1 260px; }
#tab-kvk .pk-search-wrap .search-input { width:100% !important; }
#tab-kvk .pk-toolbar-btns { display:flex; gap:6px; flex:0 0 auto; }
#tab-kvk .pk-fmt { font-family:'Rajdhani',sans-serif; }

/* ── Sum bar (search / list total) ── */
#tab-kvk .pk-sumbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 14px; margin-bottom:10px; border-radius:10px;
  background:linear-gradient(90deg, rgba(79,168,255,.10), rgba(79,168,255,.02));
  border:1px solid rgba(79,168,255,.28);
}
#tab-kvk .pk-sumbar-cnt {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.78rem; color:var(--blue,#5bc8ff);
  background:rgba(79,168,255,.12); border-radius:6px; padding:2px 8px;
}
#tab-kvk .pk-sumbar-lbl { color:var(--text-dim); font-size:.82rem; }
#tab-kvk .pk-sumbar-val { margin-left:auto; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.1rem; color:var(--blue,#5bc8ff); }

/* ── Basket (selected accounts) ── */
#tab-kvk .pk-basket {
  padding:11px 14px; margin-bottom:10px; border-radius:10px;
  background:linear-gradient(90deg, rgba(240,180,41,.10), rgba(240,180,41,.02));
  border:1px solid var(--border-gold, rgba(240,180,41,.35));
}
#tab-kvk .pk-basket-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
#tab-kvk .pk-basket-title { font-family:'Rajdhani',sans-serif; font-weight:700; color:var(--gold); font-size:.92rem; }
#tab-kvk .pk-basket-total { font-size:.86rem; color:var(--text-dim); }
#tab-kvk .pk-basket-total b { color:var(--gold-light,#ffd97d); font-family:'Rajdhani',sans-serif; font-size:1.15rem; }
#tab-kvk .pk-basket-clear { margin-left:auto; }
#tab-kvk .pk-basket-chips { display:flex; flex-wrap:wrap; gap:6px; }
#tab-kvk .pk-chip {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:3px 9px; border-radius:999px; font-size:.78rem; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--border); transition:border-color .12s, background .12s;
}
#tab-kvk .pk-chip:hover { border-color:var(--red,#ff6b6b); background:rgba(255,107,107,.08); }
#tab-kvk .pk-chip b { color:var(--gold-light,#ffd97d); font-family:'Rajdhani',sans-serif; }
#tab-kvk .pk-chip-x { color:var(--text-dim); font-size:.72rem; }

/* ── Player table ── */
#tab-kvk .pk-table-wrap { max-height:70vh; overflow:auto; border:1px solid var(--border); border-radius:10px; }
#tab-kvk .pk-table { width:100%; border-collapse:collapse; }
#tab-kvk .pk-table thead th {
  position:sticky; top:0; z-index:2; background:var(--bg2, #141a2c);
  font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  font-size:.7rem; color:var(--text-dim); padding:9px 10px; text-align:left; border-bottom:1px solid var(--border);
}
#tab-kvk .pk-table td { padding:8px 10px; border-bottom:1px solid rgba(42,48,80,.4); font-size:.86rem; }
#tab-kvk .pk-row { cursor:pointer; transition:background .1s; }
#tab-kvk .pk-row:hover { background:rgba(255,255,255,.03); }
#tab-kvk .pk-row.sel { background:linear-gradient(90deg, rgba(240,180,41,.12), rgba(240,180,41,.03)); }
/* Column widths + alignment. Dùng th.x/td.x (specificity đủ) để đè rule căn
   giữa mặc định của td trong theme + rule text-align:left của thead th. */
#tab-kvk .pk-c-sel  { width:34px; }
#tab-kvk .pk-c-stt  { width:46px; }
#tab-kvk .pk-c-rank { width:56px; }
#tab-kvk .pk-c-srv  { width:74px; }
#tab-kvk .pk-c-score{ width:120px; }
#tab-kvk .pk-table th.pk-c-sel,  #tab-kvk .pk-table td.pk-c-sel,
#tab-kvk .pk-table th.pk-c-stt,  #tab-kvk .pk-table td.pk-c-stt,
#tab-kvk .pk-table th.pk-c-rank, #tab-kvk .pk-table td.pk-c-rank,
#tab-kvk .pk-table th.pk-c-srv,  #tab-kvk .pk-table td.pk-c-srv { text-align:center; }
#tab-kvk .pk-table th.pk-c-score,#tab-kvk .pk-table td.pk-c-score { text-align:right; }
#tab-kvk .pk-table th.pk-c-name, #tab-kvk .pk-table td.pk-c-name,
#tab-kvk .pk-table th.pk-c-ally, #tab-kvk .pk-table td.pk-c-ally { text-align:left; }
#tab-kvk .pk-c-stt { color:var(--text-dim); font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.85rem; }
#tab-kvk .pk-check {
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:5px; border:1.5px solid var(--border); color:#1a1200; font-size:.72rem; font-weight:900;
}
#tab-kvk .pk-check.on { background:linear-gradient(135deg,#f0b429,#ffd97d); border-color:transparent; }
#tab-kvk .pk-rankb {
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:24px; padding:0 6px;
  border-radius:6px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.85rem;
  background:rgba(255,255,255,.05); color:var(--text-dim); border:1px solid var(--border);
}
#tab-kvk .pk-rankb.g { background:linear-gradient(135deg,#f0b429,#ffd97d); color:#3a2600; border-color:transparent; }
#tab-kvk .pk-rankb.s { background:linear-gradient(135deg,#c7ccd6,#eef1f6); color:#2a2f3a; border-color:transparent; }
#tab-kvk .pk-rankb.b { background:linear-gradient(135deg,#cd7f32,#e0a066); color:#2a1600; border-color:transparent; }
#tab-kvk .pk-name { color:var(--text); font-weight:600; }
#tab-kvk .pk-ally { color:var(--text-dim); font-size:.8rem; }
#tab-kvk .pk-srv-tag {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.78rem; color:var(--text-dim);
  background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:5px; padding:1px 7px;
}
#tab-kvk .pk-srv-tag.mine { color:var(--gold); border-color:var(--border-gold, rgba(240,180,41,.4)); background:rgba(240,180,41,.08); }
#tab-kvk .pk-c-score { text-align:right; font-family:'Rajdhani',sans-serif; font-weight:700; color:var(--gold-light,#ffd97d); white-space:nowrap; }
#tab-kvk .pk-c-srv, #tab-kvk .pk-c-ally { white-space:nowrap; }

/* ── Skeleton ── */
#tab-kvk .pk-skel { border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04)); background-size:200% 100%; animation:pkShimmer 1.2s infinite; }
#tab-kvk .pk-skel-bar { height:34px; margin-bottom:8px; }
@keyframes pkShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Mobile ── */
@media (max-width:640px) {
  #tab-kvk .pk-title { font-size:1.35rem; }
  #tab-kvk .pk-srv-row { grid-template-columns:32px 1fr auto; grid-template-areas:"rank name score" "bar bar bar"; row-gap:6px; }
  #tab-kvk .pk-srv-rank { grid-area:rank; }
  #tab-kvk .pk-srv-name { grid-area:name; }
  #tab-kvk .pk-srv-score { grid-area:score; }
  #tab-kvk .pk-srv-bar { grid-area:bar; }
  #tab-kvk .pk-c-ally { display:none; }
  #tab-kvk .pk-table td, #tab-kvk .pk-table th { padding:7px 6px; }
}

/* Light theme tweaks */
:root[data-theme="light"] #tab-kvk .pk-table thead th { background:#eef1f6; }
:root[data-theme="light"] #tab-kvk .pk-srv-row { background:rgba(0,0,0,.02); }