/* ==========================================================================
   TOP 10 (#tab-top10)
   Markup: index.html (toolbar card + #top10-content), render:
   js/modules/top10/index.js (renderTop10History, renderSection).
   Each ranking is its own card; the 14-column history table scrolls inside
   its frame with rank + player pinned on the left. Tokens only.
   ========================================================================== */

/* ---- Toolbar ------------------------------------------------------------ */
.top10-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
}

.top10-toolbar .top10-title {
    margin: 0;
}

/* Title and day controls on the left, scan status + refresh on the right */
.top10-toolbar .top10-meta {
    margin-left: auto;
}

.top10-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.top10-day {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.top10-date-label {
    min-width: 88px;
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.top10-half-toggle > button {
    font-variant-numeric: tabular-nums;
}

.top10-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.top10-status {
    color: var(--text-3);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* ---- Content ------------------------------------------------------------ */
.top10-content {
    min-width: 0;
}

.top10-message--error {
    color: var(--danger);
}

/* One column until two full tables fit side by side */
.top10-grid {
    display: grid;
    /* 2x2 на десктопе: каждая таблица отдельной карточкой; узкие - в одну колонку */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
    gap: var(--space-5);
    align-items: start;
}

.top10-section {
    --card-pad: var(--space-4);
}

.top10-section .top10-section-header {
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
}

/* ---- History table ------------------------------------------------------ */
.top10-table-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.top10-history {
    --col-rank-w: 28px;
    --col-player-w: 128px;
    --col-value-w: 46px;
    width: 100%;
    min-width: calc(var(--col-rank-w) + var(--col-player-w) + var(--col-value-w) * 12);
    table-layout: fixed;
    font-size: var(--text-xs);
}

.top10-history th,
.top10-history td {
    padding: var(--space-2);
    white-space: nowrap;
}

.top10-history th {
    height: 32px;
}

.top10-history .col-rank {
    width: var(--col-rank-w);
    padding-left: var(--space-3);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.top10-history .col-player {
    width: var(--col-player-w);
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--text-sm);
}

.top10-history .col-value {
    width: var(--col-value-w);
    font-variant-numeric: tabular-nums;
}

.top10-history td.col-value {
    color: var(--text);
}

/* Pin rank + player while the hourly columns scroll */
.top10-history .col-rank,
.top10-history .col-player {
    position: sticky;
    z-index: var(--z-base);
    background: var(--surface);
}

.top10-history .col-rank { left: 0; }
.top10-history .col-player {
    left: var(--col-rank-w);
    box-shadow: inset -1px 0 0 var(--border);
}

.top10-history th.col-rank,
.top10-history th.col-player {
    background: var(--surface-2);
}

.top10-history tbody tr:hover > td,
.top10-history tbody tr:hover > td.col-rank,
.top10-history tbody tr:hover > td.col-player {
    background: var(--row-hover);
}

.top10-history .col-player a {
    color: var(--text);
    font-weight: var(--weight-medium);
}

.top10-history .col-player a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.top10-history .col-player a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
}

/* Value moved up / down vs the previous hour */
.top10-history td.top10-val-up {
    color: var(--success);
}

.top10-history td.top10-val-down {
    color: var(--danger);
}

.top10-history td.top10-val-empty {
    color: var(--text-3);
}

/* Tribe icons: _medium.png scaled to 14px (game assets, unchanged) */
.top10-history .col-player i {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -2px;
}

i.tribe1_medium { background-image: url('../img/roman_medium.png'); }
i.tribe2_medium { background-image: url('../img/teuton_medium.png'); }
i.tribe3_medium { background-image: url('../img/gaul_medium.png'); }

/* ---- Phone -------------------------------------------------------------- */
@media (max-width: 599px) {
    .top10-toolbar {
        align-items: stretch;
    }

    .top10-nav,
    .top10-meta {
        width: 100%;
        justify-content: space-between;
    }

    .top10-history {
        --col-rank-w: 34px;
        --col-player-w: 118px;
    }

    .top10-history .col-rank {
        padding-left: var(--space-2);
    }

    /* No hover tooltips on touch: let long names wrap instead of clipping */
    .top10-history td.col-player {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: var(--leading-tight);
    }
}