/* =============================================================================
   PLAYERS — Directory grid, player cards, role filters
   Reference: DESIGN_REVAMP.md § 6 Cards
   ============================================================================= */

/* --- Page Wrapper --- */
.players-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6) var(--space-16);
}

/* --- Controls Bar --- */
.players-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.players-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.players-search-wrapper svg {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
}

.players-search {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: var(--text-footnote);
    font-family: var(--font-family);
    transition: border-color var(--duration-fast) var(--ease-standard);
    box-sizing: border-box;
}

.players-search:focus {
    outline: none;
    border-color: var(--color-accent);
}

.players-search::placeholder {
    color: var(--color-text-secondary);
}

/* Role filter pills */
.players-role-filters {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.role-filter-btn {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    font-family: var(--font-family);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}

.role-filter-btn:hover {
    background: var(--color-bg-inset);
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.role-filter-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-base);
}

/* Player count */
.players-count {
    margin-left: auto;
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
    white-space: nowrap;
}

/* --- Sort-by dropdown --- */
.players-sort-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.players-sort-wrapper svg {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    pointer-events: none;
    z-index: 1;
}

.players-sort {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-2) var(--space-6) var(--space-2) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    font-size: var(--text-footnote);
    font-family: var(--font-family);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
}

.players-sort:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* --- View toggle --- */
.players-view-toggle {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.view-btn + .view-btn {
    border-left: 1px solid var(--color-border);
}

.view-btn:hover {
    background: var(--color-bg-inset);
    color: var(--color-text-primary);
}

.view-btn.active {
    background: var(--color-accent);
    color: var(--color-bg-base);
}


/* --- Grid --- */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* --- Tier Color System --- */
.player-card[data-tier="World Class"]  { --tier-bg: #FFB300; --tier-text: #1a1200; }
.player-card[data-tier="Elite"]        { --tier-bg: #DAA520; --tier-text: #1a1200; }
.player-card[data-tier="Strong"]       { --tier-bg: #C0C0D2; --tier-text: #1a1a2e; }
.player-card[data-tier="Competitive"]  { --tier-bg: #A0AAB9; --tier-text: #1a1a2e; }
.player-card[data-tier="Developing"]   { --tier-bg: #B48250; --tier-text: #1a1200; }
.player-card[data-tier="Emerging"]     { --tier-bg: #9B7850; --tier-text: #1a1200; }
.player-card[data-tier="Unrated"]      { --tier-bg: var(--color-bg-inset); --tier-text: var(--color-text-secondary); }

/* --- Player Card (FUT Style) --- */
.player-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    min-height: 260px;
    transition: transform var(--duration-fast) var(--ease-decel),
                box-shadow var(--duration-fast) var(--ease-decel);
}

.player-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Header Band — tier-colored */
.player-card__header {
    height: 52px;
    background: var(--tier-bg, var(--color-bg-inset));
    color: var(--tier-text, var(--color-text-secondary));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-3);
}

/* Power rating (left side of header) */
.player-card__power {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1;
}

.player-card__power-number {
    font-size: var(--text-headline);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-title);
    line-height: 1;
}

/* Role icon badge (right side of header) */
.player-card__role-badge {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-card__role-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

/* Circular Avatar */
.player-card__avatar {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full);
    margin: -20px auto var(--space-2);
    border: 3px solid var(--color-bg-elevated);
    background: var(--color-bg-inset);
    overflow: hidden;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.player-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.player-card__avatar--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
}

/* Identity — centered name block */
.player-card__identity {
    padding: 0 var(--space-3);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-card__ign {
    font-size: var(--text-subhead);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card__realname {
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: var(--weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats Footer — value + team */
.player-card__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-separator);
    margin-top: auto;
    gap: var(--space-2);
}

.player-card__value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.player-card__value-label {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--weight-semibold);
}

.player-card__value-amount {
    font-size: var(--text-subhead);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.player-card__value-amount .currency {
    font-size: var(--text-caption);
    margin-right: 1px;
    color: var(--color-text-secondary);
    font-weight: var(--weight-semibold);
}

.player-card__value-unproven {
    font-size: var(--text-caption);
    color: var(--color-text-tertiary);
    font-style: italic;
    font-weight: var(--weight-regular);
}

.player-card__team {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.player-card__team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.player-card__team-logo-placeholder {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    background: var(--color-border);
    flex-shrink: 0;
}

.player-card__team-name {
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hidden state for filtering */
.player-card.hidden {
    display: none;
}

/* Clickable cursor on all cards */
.player-card {
    cursor: pointer;
}

/* Games played badge inside popup */
.ppc-games-badge {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 2px var(--space-3);
    margin-bottom: var(--space-3);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}


/* ===================================================================
   LIST VIEW
   When .view-list is active, the grid becomes a single-column list
   and each player-card renders as a horizontal row.
   =================================================================== */

/* Grid becomes a single column flex column */
.players-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Row layout */
.view-list .player-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    min-height: 52px;
}

/* Hide card-view elements in list mode */
.view-list .player-card__header {
    display: none;
}

.view-list .player-card__avatar {
    display: none;
}

.view-list .player-card__identity {
    display: none;
}

.view-list .player-card__stats {
    display: none;
}

/* Avatar column */
.player-list__avatar-col {
    display: none; /* hidden in card view — only shown in list view via .view-list */
    flex-shrink: 0;
}

.view-list .player-list__avatar-col {
    display: flex;
}

.player-list__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--color-border);
    display: block;
}

.player-list__avatar--placeholder {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

/* Name column */
.player-list__name-col {
    display: none;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 180px;
    min-width: 0;
}

.view-list .player-list__name-col {
    display: flex;
}

.player-list__ign {
    font-size: var(--text-subhead);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-list__realname {
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Role column */
.player-list__role-col {
    display: none;
    flex: 0 0 110px;
}

.view-list .player-list__role-col {
    display: flex;
    align-items: center;
}

.player-list__role-pill {
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--color-bg-inset);
    border: 1px solid var(--color-border);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
}

/* Power column */
.player-list__power-col {
    display: none;
    flex: 0 0 80px;
    align-items: center;
    font-size: var(--text-footnote);
    color: var(--color-text-secondary);
}

.view-list .player-list__power-col {
    display: flex;
}

/* Inline power badge for list view */
.player-list__power-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--text-footnote);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-title);
}

.player-list__power-badge[data-tier="World Class"] { background: rgba(255,179,0,0.85); color: #1a1200; }
.player-list__power-badge[data-tier="Elite"]       { background: rgba(218,165,32,0.80); color: #1a1200; }
.player-list__power-badge[data-tier="Strong"]      { background: rgba(192,192,210,0.80); color: #1a1a2e; }
.player-list__power-badge[data-tier="Competitive"] { background: rgba(160,170,185,0.75); color: #1a1a2e; }
.player-list__power-badge[data-tier="Developing"]  { background: rgba(180,130,80,0.75); color: #1a1200; }
.player-list__power-badge[data-tier="Emerging"]    { background: rgba(155,120,80,0.70); color: #1a1200; }
.player-list__power-badge[data-tier="Unrated"]     { background: var(--color-bg-inset); color: var(--color-text-secondary); }

.player-list__power-badge.provisional { opacity: 0.7; }

/* Market value column */
.player-list__value-col {
    display: none;
    flex: 0 0 110px;
    align-items: center;
}

.view-list .player-list__value-col {
    display: flex;
}

.player-list__value {
    font-size: var(--text-footnote);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 1px;
}

.player-list__value .unproven {
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
    font-style: italic;
}

.player-list__value .currency {
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
    font-weight: var(--weight-semibold);
    position: relative;
    top: -1px;
}

/* Team column */
.player-list__team-col {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    min-width: 0;
}

.view-list .player-list__team-col {
    display: flex;
}

/* Team logo/name inside list team col inherits from .player-card__team-logo / .player-card__team-name */


/* No-results message */
.players-empty {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-footnote);
}

.players-empty.visible {
    display: block;
}

/* --- Pagination (matches ranking-pagination in tournament.css) --- */
.ranking-pagination {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-8);
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
}

.pg-btn {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: var(--radius-xs);
    padding: 4px var(--space-2);
    font-size: var(--text-caption);
    cursor: pointer;
    min-width: 32px;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.pg-btn:hover:not(:disabled) {
    background: var(--color-bg-inset);
    color: var(--color-text-primary);
}

.pg-btn.pg-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg-base);
    font-weight: var(--weight-bold);
}

.pg-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .players-page {
        padding: var(--space-6) var(--space-4) var(--space-12);
    }

    .players-search-wrapper {
        max-width: 100%;
    }

    .players-count {
        margin-left: 0;
        width: 100%;
    }

    /* Sort and view toggle wrap below filters on small screens */
    .players-sort-wrapper {
        order: 3;
    }

    .players-view-toggle {
        order: 4;
    }

    /* List view on mobile: hide role + value columns to avoid overflow */
    .view-list .player-list__role-col,
    .view-list .player-list__value-col {
        display: none;
    }
}

@media (max-width: 540px) {
    .player-card__avatar {
        width: 72px;
        height: 72px;
        margin-top: -16px;
    }

    .role-filter-btn {
        padding: var(--space-2) var(--space-3);
        min-height: 36px;
    }

    .players-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}