/*
 * Player dashboard (ULTRA-3): the Minecraft stats + inventory viewer on the account
 * profile page. Uses only design tokens (no raw hex), themes with the rest of the app.
 *
 * Class schema:
 *   gtx-statgrid            responsive grid of headline stat tiles
 *   gtx-stat                one tile: label + value
 *   gtx-stat__value / __label
 *   gtx-invgrid             fixed-cell grid of inventory slots
 *   gtx-slot                one item cell (id shown as a mono label + count badge)
 *   gtx-slot--empty         a rendered empty slot
 *   gtx-slot__count         stack-count badge
 *   gtx-slot__id            item id (truncated, full value in title)
 *   gtx-server              a per-server section wrapper
 */

.gtx-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gtx-s3);
    margin-bottom: var(--gtx-s5);
}

.gtx-stat {
    background: var(--gtx-surface);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    padding: var(--gtx-s4);
    box-shadow: var(--gtx-shadow-card);
}

.gtx-stat__value {
    display: block;
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h2);
    line-height: 1.1;
    color: var(--gtx-text);
}

.gtx-stat__label {
    display: block;
    margin-top: var(--gtx-s1);
    font-size: var(--gtx-fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gtx-text-dim);
}

.gtx-server {
    margin-top: var(--gtx-s5);
}

.gtx-server__vitals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    margin-bottom: var(--gtx-s3);
}

.gtx-invgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--gtx-s2);
}

.gtx-slot {
    position: relative;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--gtx-s2);
    background: var(--gtx-surface-2);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
}

.gtx-slot--empty {
    background: transparent;
    border-style: dashed;
    opacity: 0.5;
}

.gtx-slot__id {
    font-family: var(--gtx-font-mono);
    font-size: var(--gtx-fs-meta);
    color: var(--gtx-text);
    word-break: break-word;
    line-height: 1.25;
}

.gtx-slot__count {
    align-self: flex-end;
    min-width: 1.5em;
    text-align: center;
    font-family: var(--gtx-font-mono);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
    color: var(--gtx-on-accent);
    background: var(--gtx-accent-fill);
    border-radius: var(--gtx-r-full);
    padding: 0 var(--gtx-s2);
}

.gtx-slot__slot {
    position: absolute;
    top: var(--gtx-s1);
    right: var(--gtx-s2);
    font-size: var(--gtx-fs-meta);
    color: var(--gtx-text-dim);
}

/* --- Inventory refresh: server tabs + real item icons (ULTRA-1 update) ------ */
.gtx-srv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    margin: var(--gtx-s3) 0;
}
.gtx-srv-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s2) var(--gtx-s3);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface);
    color: var(--gtx-text-dim);
    font-weight: 600;
    cursor: pointer;
}
.gtx-srv-tab[aria-selected="true"] {
    background: var(--gtx-accent-fill);
    color: var(--gtx-on-accent);
    border-color: transparent;
}
.gtx-srv-panel[hidden] { display: none; }

/* Icon-first slot grid: compact square cells with a pixel-crisp texture. */
.gtx-invgrid--icons {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: var(--gtx-s1);
}
.gtx-invgrid--hotbar {
    grid-template-columns: repeat(9, minmax(44px, 1fr));
    max-width: 520px;
    margin-bottom: var(--gtx-s2);
}
.gtx-invgrid--armor {
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    max-width: 240px;
}
.gtx-slot--icon {
    aspect-ratio: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: var(--gtx-s1);
}
.gtx-slot__img {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 40px;
    object-fit: contain;
    image-rendering: pixelated; /* crisp Minecraft textures */
}
.gtx-slot__fallback {
    font-family: var(--gtx-font-mono);
    font-size: 0.6rem;
    line-height: 1.1;
    text-align: center;
    color: var(--gtx-text-dim);
    word-break: break-word;
}
.gtx-slot--icon .gtx-slot__count {
    position: absolute;
    bottom: 1px;
    right: 3px;
    align-self: auto;
    font-size: 0.7rem;
    padding: 0 var(--gtx-s1);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}