/* =====================================================================
   Standings Panel
   Uses the standard .overlay-panel base from profile-core.css
   and shared .rp-* structural classes from realm-briefing.css.
   Table rows reuse .mkt-table / .mkt-row / .mkt-td from market-panel.css.
   ===================================================================== */

/* ── Scoped design tokens ─────────────────────────────────────────── */

#standings-panel {
    --rank-1: #ffd700;
    --rank-2: #c0c0c0;
    --rank-3: #cd7f32;
}

#standings-panel .rp-banner {
    background: var(--surface-base) url(/assets/screen-realm-DAWoQNrv.avif) left top / contain no-repeat;
    background-size: auto 315px;
}

#standings-panel.standings-panel--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}

/* ── Controls stack ───────────────────────────────────────────────── */

.standings-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: calc(-1 * var(--space-xs)) 0 var(--space-md);
}

/* ── Filter groups (single Category row) ─────────────────────────── */

.standings-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.standings-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

/* Text button - same height as icon buttons */
.standings-text-btn {
    height: 34px;
}

/* Icon-only skill buttons - square, no text label */
.standings-skill-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.standings-skill-btn .mkt-cat-icon {
    margin-right: 0;
}

.standings-vessel-cat-btn .stnds-vessel-cat-icon {
    width: 2rem;
    height: 1.25rem;
    object-fit: contain;
    opacity: 0.85;
}

.standings-vessel-cat-btn.mkt-cat-btn--active .stnds-vessel-cat-icon {
    opacity: 1;
}

/* ── Table wrapper ────────────────────────────────────────────────── */

.standings-table-wrap {
    margin-bottom: var(--space-sm);
}

.standings-table-wrap .mkt-th--right {
    width: 6rem;
}

.standings-table-wrap .stnds-th-change,
.standings-table-wrap .stnds-td-change {
    width: 3rem;
    text-align: center;
    vertical-align: middle;
}

.stnds-td-change .stnds-move-badge {
    margin-inline: auto;
}

/* ── Rank box - .mkt-item-icon modifier showing rank number ───────── */

.stnds-rank-box {
    font-family: var(--font-heading);
    font-size: var(--font-size-md);
    font-weight: 700;
    cursor: default;
}

.stnds-name-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.stnds-name-wrap .ph-guild-tag {
    flex-shrink: 0;
    font-size: var(--font-size-md);
    letter-spacing: 0.04em;
}

.stnds-name-wrap .mkt-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stnds-name-wrap .mkt-item-type {
    flex-basis: 100%;
}

.stnds-move-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    min-width: 1.75rem;
    padding: 0 var(--space-2xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.stnds-move-glyph,
.stnds-move-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    line-height: 1;
    margin-bottom: -5px;
}

.stnds-move-delta {
    margin-bottom: -3px;
}

.stnds-move-glyph--down {
    transform: translateY(-0.12em);
}

.stnds-move-badge--up {
    color: var(--text-success);
    background: color-mix(in srgb, var(--text-success) 12%, transparent);
    padding: 7px 4px;
    margin-left: 4px;
}

.stnds-move-badge--down {
    color: var(--text-danger);
    background: color-mix(in srgb, var(--text-danger) 12%, transparent);
    padding: 7px 4px;
    margin-left: 4px;
}

.stnds-move-badge--same {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}

.stnds-move-badge--new {
    color: var(--gold);
    background: rgba(197, 160, 89, 0.12);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
}

.stnds-move-badge--dropped-out {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.625rem;
}

.stnds-self-summary {
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--gold);
    text-align: center;
    border: 1px dashed rgba(197, 160, 89, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(197, 160, 89, 0.05);
}

.stnds-rank {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.stnds-rank--1 {
    color: var(--rank-1);
}
.stnds-rank--2 {
    color: var(--rank-2);
}
.stnds-rank--3 {
    color: var(--rank-3);
}

/* ── Top 3 player name accent ─────────────────────────────────────── */

.stnds-top-1 .mkt-item-name {
    color: var(--rank-1);
}
.stnds-top-2 .mkt-item-name {
    color: var(--rank-2);
}
.stnds-top-3 .mkt-item-name {
    color: var(--rank-3);
}

/* ── Current player row highlight ────────────────────────────────── */

.stnds-self {
    background: rgba(197, 160, 89, 0.07);
    box-shadow: inset 2px 0 0 rgba(197, 160, 89, 0.5);
}

.stnds-self-name {
    color: var(--gold) !important;
}

/* ── Finest Vessel table (best_ship) ─────────────────────────────── */

/* ── Quests Completed table (quests_completed) ───────────────────── */

.stnds-table--quests .stnds-th-quests-count,
.stnds-table--quests .stnds-td-quests-count {
    min-width: 10rem;
    width: 10rem;
    text-align: right;
    vertical-align: middle;
}

.stnds-table--quests .stnds-th-quests-count {
    white-space: nowrap;
}

.stnds-table--vessel .stnds-th-vessel,
.stnds-table--vessel .stnds-td-vessel {
    min-width: 5rem;
    text-align: right;
    vertical-align: middle;
}

.stnds-vessel-name {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stnds-table--vessel .stnds-th-ship-art,
.stnds-table--vessel .stnds-td-ship-art {
    width: 2.75rem;
    padding-inline: var(--space-2xs);
    text-align: center;
    vertical-align: middle;
}

.stnds-ship-art {
    width: 4rem;
    height: 2rem;
    object-fit: contain;
    display: block;
    margin-inline: auto;
}

.stnds-table--vessel .stnds-th-class,
.stnds-table--vessel .stnds-td-class {
    width: 7rem;
    text-align: right;
    vertical-align: middle;
}

.stnds-class-tier {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    line-height: 1.2;
}

.stnds-class-tier__label {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .stnds-class-tier {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0;
    }

    .stnds-class-tier__label + .stnds-class-tier__label::before {
        content: '\00a0·\00a0';
        color: var(--text-muted);
    }
}

/* ── Self divider row (shown when outside top N) ─────────────────── */

.standings-self-divider-row {
    pointer-events: none;
}

.standings-self-divider-cell {
    padding: var(--space-md) 0 var(--space-xs);
    border: none;
    position: relative;
}

.standings-self-divider-cell::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(197, 160, 89, 0.3);
}

.standings-self-divider-cell::after {
    content: 'YOUR POSITION';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    color: rgba(197, 160, 89, 0.5);
    background: var(--surface-base);
    padding: 0 var(--space-sm);
    line-height: 1;
}

/* ── Empty / loading state ────────────────────────────────────────── */

.standings-empty {
    padding: var(--space-xl) 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ── Topbar: mode tabs + period toggle ────────────────────────────── */

.stnds-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
}

.stnds-topbar .panel-tabs {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: none;
}

.stnds-topbar__right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    padding-bottom: 10px;
}

/* ── Period toggle (All-Time / Monthly / Weekly) ──────────────────── */

.stnds-period-toggle {
    display: inline-flex;
    gap: var(--space-xs);
    flex: 0 0 auto;
}

/* Inactive periods sit muted; the active one keeps the gold .btn look.
   Scoped to #standings-panel so rules beat inlined .btn from game-*.css
   (inlineCriticalCss places bundled CSS after deferred <link> tags). */
#standings-panel .stnds-period-btn {
    color: var(--text-secondary);
    background: transparent;
    border-color: rgba(197, 160, 89, 0.2);
}

#standings-panel .stnds-period-btn--active,
#standings-panel .stnds-period-btn--active:hover:not(:disabled) {
    color: var(--gold);
    background: rgba(197, 160, 89, 0.14);
    border-color: rgba(197, 160, 89, 0.65);
}

#standings-panel .stnds-period-btn:hover:not(:disabled):not(.stnds-period-btn--active) {
    color: var(--text-secondary);
    background: transparent;
    border-color: rgba(197, 160, 89, 0.3);
}

/* ── Reset countdown line ─────────────────────────────────────────── */

.stnds-reset-row {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-2xs);
    z-index: 1;
}

.stnds-reset-info {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.stnds-reset-info strong {
    color: var(--text-secondary);
    font-weight: 700;
}

.stnds-reset-sep {
    color: var(--text-muted);
    padding: 0 var(--space-xs);
}