/* Top Players table (#table_display_players), shared by the public server stats page (gamestats.php) and the
 * admin panel's Stats > Players page (modules/gamestats/players.php). Both pages load their rows from the same
 * controller (display_players), so they share this one stylesheet. Loaded after topfrag-theme.css and uses its
 * tokens. Rows are .pl-row only, so the stats row showFrame() opens below a player keeps its own look.
 * The top three wear the leaderboard's medals and #1 the crown. Self-contained: the medals and the line icons are
 * drawn here, so the admin page needs nothing from gamestats.php. */

.pl-panel { margin-top: 14px; }
#table_display_players { margin: 0; border-bottom: none; border-collapse: separate; border-spacing: 0; }
#table_display_players > thead > tr > th { height: 40px; padding: 0 10px; background: var(--panel-alt, #11152a); border-bottom: 1px solid var(--border, #20253c); }
#table_display_players > thead .ml-ic { width: 14px; height: 14px; color: var(--text-dim, #707a9e); }
#table_display_players tr.pl-row > td { height: 48px; padding: 4px 10px; vertical-align: middle; white-space: nowrap; border-top: 1px solid var(--border, #20253c); transition: background 0.15s ease; }
#table_display_players tr.pl-row:hover { background: none; }
#table_display_players tr.pl-row:hover > td { background: rgba(255, 255, 255, 0.025); }
#table_display_players tr.pl-row:hover > td:first-child { box-shadow: inset 2px 0 0 var(--accent, #00f5c3); }

/* the top three: a faint tint and an edge in their medal's colour */
#table_display_players tr.pl-row--1 > td { background: rgba(245, 196, 81, 0.06); }
#table_display_players tr.pl-row--2 > td { background: rgba(192, 203, 237, 0.045); }
#table_display_players tr.pl-row--3 > td { background: rgba(232, 149, 90, 0.05); }
#table_display_players tr.pl-row--1 > td:first-child,
#table_display_players tr.pl-row--1:hover > td:first-child { box-shadow: inset 3px 0 0 var(--gold, #f5c451); }
#table_display_players tr.pl-row--2 > td:first-child,
#table_display_players tr.pl-row--2:hover > td:first-child { box-shadow: inset 3px 0 0 #c0cbed; }
#table_display_players tr.pl-row--3 > td:first-child,
#table_display_players tr.pl-row--3:hover > td:first-child { box-shadow: inset 3px 0 0 #e8955a; }
#table_display_players tr.pl-row--top { height: 56px; }

.pl-rank {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 24px;
    padding: 0 8px;
    font-family: var(--font-cond, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text, #c8cee8);
    background: var(--panel-2, #161b33);
    border: 1px solid var(--border, #20253c);
    border-radius: 999px;
}
/* the leaderboard's rank medals, the number sitting in the medal's dark centre */
.lb-medal.pl-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    padding-top: 1px;
    font-family: var(--font-cond, 'Rajdhani', sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.pl-medal.lb-medal--1 { background-image: url(../images/leaderboard/rank-1.webp); }
.pl-medal.lb-medal--2 { background-image: url(../images/leaderboard/rank-2.webp); }
.pl-medal.lb-medal--3 { background-image: url(../images/leaderboard/rank-3.webp); }

.pl-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-avatar-wrap { position: relative; flex: none; }
.pl-avatar { display: block; width: 30px; height: 30px; object-fit: cover; background: var(--panel-2, #161b33); border: 1px solid var(--border-soft, #2b3150); border-radius: 50%; }
.pl-row--top .pl-avatar { width: 34px; height: 34px; }
.pl-row--1 .pl-avatar { border-color: rgba(245, 196, 81, 0.7); }
.pl-row--2 .pl-avatar { border-color: rgba(192, 203, 237, 0.6); }
.pl-row--3 .pl-avatar { border-color: rgba(232, 149, 90, 0.6); }
.pl-crown { position: absolute; top: -13px; right: -10px; width: 24px; height: 24px; max-width: none; transform: rotate(18deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); pointer-events: none; }
.pl-flag { flex: none; width: 20px; height: auto; border-radius: 2px; }
.pl-steam { flex: none; font-size: 14px; color: var(--text-dim, #707a9e); }
.pl-name { min-width: 0; max-width: 230px; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; color: var(--text-bright, #eef2ff); }
.pl-name:hover { color: var(--accent, #00f5c3); text-decoration: underline; text-underline-offset: 2px; }
.pl-tags { display: inline-flex; flex: none; align-items: center; gap: 5px; }
.pl-tags:empty { display: none; }
.pl-tag-img { display: block; width: auto; max-height: 17px; }

/* line icons, drawn as masks so they take the text colour */
.ml-ic.pl-banned,
.pl-expand-btn .ml-ic {
    display: inline-block;
    flex: none;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.ml-ic.pl-banned { width: 15px; height: 15px; color: var(--warning, #f5c451); -webkit-mask-image: url(../images/icons/ml-alert.svg); mask-image: url(../images/icons/ml-alert.svg); }

/* admin page only: the server the figures are for, and first / last connect there */
.pl-server { display: block; max-width: 190px; overflow: hidden; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; color: var(--text, #c8cee8); }
.pl-sub { display: block; max-width: 190px; margin-top: 2px; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; color: var(--text-dim, #707a9e); }
.pl-when { display: inline-flex; flex-direction: column; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pl-when b { font-size: 12.5px; font-weight: 600; color: var(--text-bright, #eef2ff); }
.pl-when small { font-size: 11px; color: var(--text-dim, #707a9e); }
.pl-none { color: var(--text-dim, #707a9e); }

.pl-steamid { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; white-space: nowrap; text-decoration: none; color: var(--text-dim, #707a9e); }
a.pl-steamid:hover { color: var(--accent, #00f5c3); }
.pl-num { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-bright, #eef2ff); }
.pl-num--dim { font-weight: 500; color: var(--text, #c8cee8); }

/* round win rate: a thin bar with the figure beside it */
.pl-rwr { display: inline-flex; align-items: center; gap: 8px; }
.pl-rwr-track { width: 70px; height: 6px; overflow: hidden; background: var(--panel-2, #161b33); border-radius: 99px; }
.pl-rwr-track i { display: block; height: 100%; background: var(--warning, #f5c451); border-radius: 99px; }
.pl-rwr b { min-width: 50px; font-size: 12.5px; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; color: var(--text-bright, #eef2ff); }

.pl-weapon { display: block; width: 104px; height: 24px; margin: 0 auto; object-fit: contain; opacity: 0.9; }

/* the stats toggle: a quiet button whose chevron turns over while the stats are open */
#table_display_players td.pl-expand { cursor: pointer; }
.pl-expand-btn {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--text-dim, #707a9e);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-soft, #2b3150);
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pl-expand-btn .ml-ic { width: 14px; height: 14px; -webkit-mask-image: url(../images/icons/ml-chevron.svg); mask-image: url(../images/icons/ml-chevron.svg); transition: transform 0.2s ease; }
.pl-expand-btn.is-open { color: var(--accent, #00f5c3); border-color: rgba(0, 245, 195, 0.4); }
.pl-expand-btn.is-open .ml-ic { transform: rotate(180deg); }
td.pl-expand:hover .pl-expand-btn { color: var(--accent, #00f5c3); background: rgba(0, 245, 195, 0.08); border-color: rgba(0, 245, 195, 0.4); }

/* where the panel is narrower than the table (the admin page beside its search sidebar), the table scrolls sideways */
#table_display_players_wrapper .dt-layout-table > .dt-layout-cell { overflow-x: auto; }

/* count on the left, pages on the right, as on the match list */
#table_display_players_wrapper .dt-layout-row:last-child { padding: 10px 12px 8px; }
#table_display_players_wrapper .dt-info { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim, #707a9e); }
#table_display_players_wrapper .dt-info::before {
    content: "";
    width: 15px;
    height: 15px;
    background-color: var(--text-dim, #707a9e);
    -webkit-mask: url(../images/icons/mt-list.svg) center / contain no-repeat;
    mask: url(../images/icons/mt-list.svg) center / contain no-repeat;
}
#table_display_players_wrapper .dt-paging .dt-paging-button {
    min-width: 32px;
    height: 32px;
    margin-left: 5px;
    padding: 0 10px;
    color: var(--text, #c8cee8) !important;
    background: transparent;
    border: 1px solid var(--border, #20253c);
    border-radius: 8px;
}
#table_display_players_wrapper .dt-paging .dt-paging-button:hover:not(.disabled) { background: var(--panel-2, #161b33); border-color: var(--border-soft, #2b3150); }
#table_display_players_wrapper .dt-paging .dt-paging-button.current,
#table_display_players_wrapper .dt-paging .dt-paging-button.current:hover { font-weight: 700; color: #04140f !important; background: var(--accent, #00f5c3); border-color: var(--accent, #00f5c3); }
#table_display_players_wrapper .dt-paging .dt-paging-button.disabled { opacity: 0.35; }

@media (max-width: 720px) {
    #table_display_players_wrapper .dt-layout-row:last-child { flex-direction: column; gap: 8px; }
    #table_display_players_wrapper .dt-paging .dt-paging-button { min-width: 30px; height: 30px; margin-left: 3px; padding: 0 7px; }
}
@media (prefers-reduced-motion: reduce) {
    #table_display_players tr.pl-row > td, .pl-expand-btn, .pl-expand-btn .ml-ic { transition: none; }
}