/* =============================================================================
   [league-hub.css] - shared styles for everything NEW or CHANGED on the league page
   family (overview today; fixtures/results/standings/... reuse the same tabs bar and
   can pull this file in too once they pick up the same widgets).
   Prefix: "league-hub-" for genuinely new pieces (mirrors the earlier "leagues-v1-"
   redesign pass in leagues-v1.css, kept in its own file instead of editing that one).
   Existing classes (.league-overview-table, .league-overview-stat-row, .league-detail-
   tabs-bar, .sidebar-country-league-item, ...) are reused as-is wherever the shape
   already matched the new design; only additive/override rules for them live here.
   ============================================================================= */

/* Hero: favourite/pin button in the top-right corner --------------------------- */

.league-hub-hero-favorite {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(85, 85, 100, .25);
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-start;
}

.league-hub-hero-favorite:hover {
    background: rgba(255, 255, 255, .12);
}

.league-hub-hero-favorite img {
    display: block;
    pointer-events: none;
}

/* Tabs bar: inert items (no page yet) ------------------------------------------ */

.league-detail-tabs-bar__tab.is-soon {
    cursor: default;
    opacity: .55;
}

/* Generic card wrapper ---------------------------------------------------------
   Same "look" as the existing .chat-panel news card so main-column and right-rail
   cards read as one family; kept as its own class instead of reusing .chat-panel
   because that class also carries chat-panel-specific flex/sticky sizing. */

.league-hub-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    /* Figma league detail: flat #12141b box, no outline (was --bg-card #0f1015 + #191a1e outline) */
    background: var(--bg-box, #12141b);
    box-sizing: border-box;
}

.league-hub-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}

/* One title size for every rail/main card in the league, team and player hubs (design: 14px SemiBold). It was
   15px/500 here while Top Valuable Players overrode it to 14px/600, so neighbouring cards had different titles. */
.league-hub-card__title {
    margin: 0;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #eee;
    text-transform: uppercase;
}

.league-hub-card__see-all {
    flex-shrink: 0;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted, #8c8c8e);
    text-decoration: none;
}

.league-hub-card__see-all:hover {
    color: #eee;
}

/* General information ----------------------------------------------------------- */

.league-hub-general-info__body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.league-hub-general-info__stats {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.league-hub-general-info__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.league-hub-general-info__row dt {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-general-info__row dd {
    margin: 0;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #eee;
    text-align: right;
}

.league-hub-general-info__pct {
    color: #1d8fff;
    font-weight: 500;
}

.league-hub-general-info__market {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--border-color, #191a1e);
    text-align: right;
}

.league-hub-general-info__market-label {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #8c8c8e);
    white-space: nowrap;
}

.league-hub-general-info__market-value {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--blue-accent, #1d8fff);
    white-space: nowrap;
}

.league-hub-general-info__market-updated {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted, #8c8c8e);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .league-hub-general-info__body {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .league-hub-general-info__market {
        align-items: flex-start;
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--border-color, #191a1e);
        text-align: left;
    }
}

/* Generic table (Standings widget + Top Valuable Players) ----------------------- */

.league-hub-table {
    border: 1px solid #191a1e;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card, #0f1015);
}

.league-hub-table__head,
.league-hub-table__row {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.league-hub-table__head {
    min-height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid #191a1e;
    background: var(--bg-second, #202129);
}

.league-hub-table__body {
    display: flex;
    flex-direction: column;
}

.league-hub-table__row {
    min-height: 50px;
    padding: 8px 12px;
    border-bottom: 1px solid #191a1e;
}

.league-hub-table__row:last-child {
    border-bottom: none;
}

/* 14px: design size for names and numbers in hub tables (13px made the rail Standing on fixtures/results
   smaller than the one on the overview) */
.league-hub-table__col {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #8c8c8e);
    text-align: right;
}

.league-hub-table__col--rank {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #eee;
    font-weight: 500;
    text-align: left;
}

.league-hub-table__col--entity {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eee;
    font-weight: 500;
    text-align: left;
}

.league-hub-table__col--num {
    flex: 0 0 30px;
    text-align: center;
}

.league-hub-table__col--highlight {
    color: #eee;
    font-weight: 600;
}

.league-hub-table__col--form {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.league-hub-table__col--value {
    flex: 0 0 auto;
    color: #eee;
    font-weight: 500;
}

.league-hub-table__avatar,
.league-hub-table__logo {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* The class is shared with the player photos of "Top valuable players": those stay round (team crests are shown whole,
   no disc / rounded corners) */
.league-hub-valuable-players .league-hub-table__avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--second-color, rgba(85, 85, 100, .25));
}

.league-hub-table__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-table__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.league-hub-table__sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #8c8c8e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Qualification-zone dot on the rank column, same idea as the existing
   .league-overview-stat-row__zone--blue/--orange (kept as its own token here). */
.league-hub-table__zone {
    flex-shrink: 0;
    width: 6px;
    height: 20px;
    border-radius: 3px;
}

.league-hub-table__zone {
    background: transparent;
}

.league-hub-table__zone--ucl {
    background: var(--pink, #fd0000);
}

.league-hub-table__zone--uel {
    background: #1d8fff;
}

.league-hub-table__zone--relegation {
    background: var(--text-muted, #8c8c8e);
}

/* Standings widget: head and rows share ONE grid template so every header label sits exactly over its column
   (flex + per-cell widths drifted because the Goals cell text is wider than a 30px number cell).
   Columns: rank | team | P W D L | Pts | Goals | FORM (5 chips x 22px + 4 gaps x 4px = 126px). */
.league-hub-standings {
    background: #15171d;
    outline: 0;
}

.league-hub-standings .league-hub-card__title {
    font-weight: 400;
    color: #c4c4c6;
    text-transform: none;
}

.league-hub-table--standings {
    overflow: visible; /* form tooltips hang above the last column */
    border: 0;
    border-radius: 0;
    background: transparent;
}

.league-hub-table--standings .league-hub-table__head,
.league-hub-table--standings .league-hub-table__row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) repeat(4, 36px) 40px 64px 126px;
    column-gap: 8px;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
}

.league-hub-table--standings .league-hub-table__head {
    background: transparent;
    border-bottom: 1px solid #23252b;
}

.league-hub-table--standings .league-hub-table__row {
    min-height: 44px;
    border-bottom: 1px solid #23252b;
}

.league-hub-table--standings .league-hub-table__col {
    min-width: 0;
    font-size: 14px;
}

.league-hub-table--standings .league-hub-table__body .league-hub-table__col--num,
.league-hub-table--standings .league-hub-table__col--goals {
    color: #e6e6e8;
}

.league-hub-table--standings .league-hub-table__col--rank {
    justify-content: center;
}

.league-hub-table--standings .league-hub-table__col--entity {
    font-weight: 400;
}

.league-hub-table--standings .league-hub-table__head .league-hub-table__col--entity {
    color: var(--text-muted, #8c8c8e);
}

.league-hub-table--standings .league-hub-table__col--num,
.league-hub-table--standings .league-hub-table__col--goals {
    text-align: center;
}

.league-hub-table--standings .league-hub-table__col--form {
    justify-content: center;
}

.league-hub-table--standings .league-hub-table__col--highlight {
    color: #fff;
    font-weight: 700;
}

.league-hub-table__league-logo {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Rank inside a ring in the zone colour (--zone-color comes from the promotion of the row; no promotion = plain) */
.league-hub-table__rank-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border: 1px solid var(--zone-color, transparent);
    border-radius: 50%;
    color: var(--zone-color, #e6e6e8);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

/* Legend under the table: one dot + label per promotion/relegation zone */
.league-hub-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 4px 4px 0;
    list-style: none;
}

.league-hub-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-legend__dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

@media (max-width: 767px) {
    /* Phones: keep P | Pts | FORM (drop W/D/L and Goals) so the team name still has room */
    .league-hub-table--standings .league-hub-table__head,
    .league-hub-table--standings .league-hub-table__row {
        grid-template-columns: 30px minmax(0, 1fr) 28px 36px 126px;
    }

    .league-hub-table--standings .league-hub-table__col:nth-child(4),
    .league-hub-table--standings .league-hub-table__col:nth-child(5),
    .league-hub-table--standings .league-hub-table__col:nth-child(6),
    .league-hub-table--standings .league-hub-table__col--goals {
        display: none;
    }
}

/* FORM chips (W/D/L) with a hover/focus tooltip, same show/hide pattern as the
   existing .league-stat-info / .league-stat-info__popover pair. */

.league-hub-form-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    cursor: default;
    outline: 0;
}

.league-hub-form-chip--win {
    background: #1db57a;
}

.league-hub-form-chip--draw {
    background: #a8a8aa;
}

.league-hub-form-chip--loss {
    background: #e5233e;
}

.league-hub-form-chip__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -6px;
    z-index: 5;
    display: none;
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-second, #202129);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    color: #eee;
    font-size: 11px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
}

.league-hub-form-chip__tooltip-line {
    display: block;
    line-height: 16px;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-form-chip__tooltip-line b {
    color: #fff;
    font-weight: 600;
}

.league-hub-form-chip:hover .league-hub-form-chip__tooltip,
.league-hub-form-chip:focus-visible .league-hub-form-chip__tooltip,
.league-hub-form-chip.is-open .league-hub-form-chip__tooltip {
    display: block;
}

/* Players / Goal Teams tables: hide the (placeholder) xG and +/- columns to match
   the simpler design; the underlying rows/data are untouched. */

.league-hub-table--compact .league-overview-table__metrics-head--with-info .league-overview-table__col:not(:first-child),
.league-hub-table--compact .league-stat-info,
.league-hub-table--compact .league-overview-stat-row__metrics--with-info .league-overview-stat-row__metric:not(:first-child),
.league-hub-table--compact .league-overview-stat-row__metric-spacer {
    display: none;
}

.league-hub-table--compact .league-overview-table__metrics-head,
.league-hub-table--compact .league-overview-stat-row__metrics {
    justify-content: flex-end;
}

/* Quick View grid ----------------------------------------------------------------- */

.league-hub-quick-view__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.league-hub-quick-view__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-card, #0f1015);
    outline: 1px solid var(--border-color, #191a1e);
    outline-offset: -1px;
    box-sizing: border-box;
}

.league-hub-quick-view__label {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: #eee;
}

.league-hub-quick-view__chevron {
    flex-shrink: 0;
    opacity: .7;
}

@media (max-width: 767px) {
    .league-hub-quick-view__grid {
        grid-template-columns: 1fr;
    }
}

/* Right rail: new cards stacked above the existing, untouched news panel -------- */

.league-hub-cols {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.league-hub-cols__main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.league-hub-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 300px;
    width: 300px;
    min-width: 0;
}

/* Nested inside .league-hub-rail now, so drop its own flex/sticky (the rail owns
   both) - its size/appearance is otherwise untouched. Scoped to the same width the
   panel is still a normal in-flow column at all (score24h.css switches it to a
   fixed-position drawer at <=900px - must not fight that positioning there). */
@media (min-width: 901px) {
    /* The #home-chat-panel selector is needed to beat score24h.css "#home-chat-panel.chat-panel--home-media
       { flex: 0 0 300px }": in the rail's column flex that 300px basis became the panel HEIGHT, so the news list
       collapsed to 0 and "Latest news" was cut off (league, team and player hubs) */
    .league-hub-rail .chat-panel,
    .league-hub-rail #home-chat-panel.chat-panel {
        position: static;
        top: auto;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
    }
}

/* Trophies & Titles --------------------------------------------------------------- */

.league-hub-trophies__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.league-hub-trophies__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}

/* Rows link to the team hub on the league pages (an <a>, the team Overview keeps a plain <div>) */
a.league-hub-trophies__row {
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

a.league-hub-trophies__row:hover {
    background: rgba(85, 85, 100, .15);
}

.league-hub-trophies__logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.league-hub-trophies__name {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 12px;
    font-weight: 500;
    color: #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-trophies__count {
    flex-shrink: 0;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #eee;
}

/* Latest Transfers ----------------------------------------------------------------- */

.league-hub-transfers__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Fixed columns (avatar | name | clubs | fee): as a flex row the clubs moved with the width of the fee text
   ("End of loan" vs "Signed"), so the crests did not line up from row to row */
.league-hub-transfers__row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto 76px;
    align-items: center;
    column-gap: 8px;
    padding: 6px 4px;
}

.league-hub-transfers__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--second-color, rgba(85, 85, 100, .25));
}

.league-hub-transfers__main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 14px like every player name in the league / team / player hubs (was 12px, smaller than Top Valuable Players) */
.league-hub-transfers__name {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-transfers__deal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.league-hub-transfers__date {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: var(--text-muted, #8c8c8e);
    white-space: nowrap;
}

.league-hub-transfers__clubs {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.league-hub-transfers__club {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.league-hub-transfers__fee {
    max-width: 100%;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: #eee;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Design draws a green "moved to" arrow between the two crests */
.league-hub-transfers__arrow {
    width: 12px;
    color: var(--greencolor, #1eff00);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* <=900px: sidebar and news panel both become drawers (score24h.css), so the rail drops its fixed 300px column and
   stacks below the content, full width. The still-nested .chat-panel keeps disappearing on its own via the
   existing (unscoped) .chat-panel rule. */
@media (max-width: 900px) {
    .league-hub-cols {
        flex-direction: column;
        align-items: stretch;
    }

    .league-hub-rail {
        width: 100%;
        flex: 1 1 auto;
    }
}

/* Players / Goal Teams (existing markup): round chevron button in the head, crests without the round mask ------- */

.league-hub-section--compact .league-overview-section__head .league-expand-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.league-hub-section--compact .league-overview-stat-row__metric.is-highlight {
    color: #fff;
    font-weight: 700;
}

.league-hub-teams .league-overview-stat-row__avatar {
    width: 32px;
    height: 32px;
    border-radius: 0;
    object-fit: contain;
}

.league-hub-teams .league-overview-stat-row__name {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

/* Fixtures / Results: "Round N" separator ------------------------------------------- */

.leagues-v1-section__head.league-hub-round-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.league-hub-round-head::before,
.league-hub-round-head::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    background: #23252b;
}

.league-hub-round-head .leagues-v1-section__title.league-round {
    color: #1d8fff;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 20px;
}

/* Rail "Standing" card (fixtures / results) ------------------------------------------ */

.league-hub-table--rail-standing {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.league-hub-table--rail-standing .league-hub-table__head,
.league-hub-table--rail-standing .league-hub-table__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 30px 36px 52px;
    column-gap: 8px;
    align-items: center;
    padding: 0 8px;
}

.league-hub-table--rail-standing .league-hub-table__head {
    background: transparent;
    border-bottom: 1px solid #23252b;
}

.league-hub-table--rail-standing .league-hub-table__row {
    min-height: 40px;
    border-bottom: 0;
}

.league-hub-table--rail-standing .league-hub-table__col--rank {
    justify-content: center;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-table--rail-standing .league-hub-table__col--num,
.league-hub-table--rail-standing .league-hub-table__col--goals {
    text-align: center;
}

.league-hub-table--rail-standing .league-hub-table__body .league-hub-table__col--num,
.league-hub-table--rail-standing .league-hub-table__col--goals {
    color: #e6e6e8;
}

.league-hub-table--rail-standing .league-hub-table__col--highlight {
    color: #fff;
    font-weight: 700;
}

.league-hub-table--rail-standing .league-hub-table__avatar {
    width: 20px;
    height: 20px;
}

/* Stats tab ------------------------------------------------------------------------------ */

.league-hub-stats-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.league-hub-pills {
    display: flex;
    gap: 8px;
}

/* Same look as the Favourite page tabs (.favorite-tab, favourite.css) and the match / Tables filter pills
   (custom.css): flat grey pill, muted text, red-to-grey gradient outline when active. */
.league-hub-pill {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 16px;
    background: rgba(85, 85, 100, .17);
    color: #8c8c8e;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}

.league-hub-pill:hover {
    color: #eee;
}

.league-hub-pill.is-active {
    background: linear-gradient(#1b1c22, #1b1c22) padding-box,
        linear-gradient(100deg, #fd0000 0%, rgba(253, 0, 0, .55) 35%, rgba(255, 255, 255, .16) 100%) border-box;
    color: #fff;
    font-weight: 500;
}

.league-hub-pill.is-soon {
    cursor: default;
    opacity: .7;
}

/* Existing stat dropdown (.league-stats-dropdown + pages.js) restyled as a right-aligned pill */
.league-hub-stats-filter .league-overview-stats-filter {
    margin: 0;
    padding: 0;
}

.league-hub-stats-filter .league-stats-dropdown {
    width: auto;
    max-width: none;
}

.league-hub-stats-filter .league-stats-dropdown__trigger {
    width: auto;
    min-height: 36px;
    padding: 0 14px;
    gap: 8px;
    border: 1px solid #383845;
    background: transparent;
}

.league-hub-stats-filter .league-stats-dropdown.is-open .league-stats-dropdown__trigger {
    border-color: #fd0000;
    background: transparent;
}

.league-hub-stats-filter .league-stats-dropdown__menu {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 20;
}

.league-hub-stats-table {
    --stats-cols: 56px minmax(0, 1fr) 130px 150px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-card, #0f1015);
}

.league-hub-stats-table__head,
.league-hub-stats-table__row {
    display: grid;
    grid-template-columns: var(--stats-cols);
    align-items: center;
}

.league-hub-stats-table__head {
    min-height: 44px;
    background: #15171d;
    color: #e6e6e8;
    font-size: 14px;
}

.league-hub-stats-table__row {
    min-height: 58px;
    border-bottom: 1px solid #1a1b21;
}

.league-hub-stats-table__col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.league-hub-stats-table__head .league-hub-stats-table__col {
    font-weight: 400;
    color: #d6d6d8;
}

.league-hub-stats-table__col--player {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    border-left: 1px solid #1a1b21;
    border-right: 1px solid #1a1b21;
}

.league-hub-stats-table__col--market {
    border-left: 1px solid #1a1b21;
}

.league-hub-stats-table__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--second-color, rgba(85, 85, 100, .25));
}

.league-hub-stats-table__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.league-hub-stats-table__name {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-stats-table__sub {
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-stats-table__team {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.league-hub-sort-icon {
    flex-shrink: 0;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-stats-section[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .league-hub-stats-table {
        --stats-cols: 44px minmax(0, 1fr) 64px 84px;
    }

    .league-hub-stats-table__team {
        display: none;
    }

    .league-hub-stats-table__col {
        font-size: 12px;
    }

    .league-hub-stats-table__head .league-hub-stats-table__col--value,
    .league-hub-stats-table__head .league-hub-stats-table__col--market {
        font-size: 12px;
    }
}

/* The league pages' <main> now also holds the right rail, so let it take all the space beside the sidebar
   (.home-main itself is flex: 0 1 auto and only grew to its content). */
.home-main.league-overview-main {
    flex: 1 1 0;
    min-width: 0;
}

/* Stats Players/Teams switch: the pill is a button now, and the inactive side must stay hidden even though the
   panel/filter classes set their own display. */
button.league-hub-pill {
    cursor: pointer;
}

[data-stats-switch-target][hidden] {
    display: none !important;
}

.league-hub-stats-table__avatar--team {
    border-radius: 0;
    object-fit: contain;
    background: transparent;
}

/* Stats tab: typography / sizes from Figma "Truescore-All" 4683:151657 (filter bar 4683:151762, table head
   4727:203600, row 4716:195131, metric menu 4727:203895). Font: Be Vietnam Pro everywhere (the only family the site
   loads). The Players / Teams pills use the shared .league-hub-pill look (Favourite tabs), no Stats-only override. */
.league-hub-stats-filter .league-stats-dropdown__trigger {
    min-height: 36px;
    height: 36px;
    padding: 4px 10px;
    gap: 4px;
    border: 0;
    border-radius: 1000px;
    background: rgba(85, 85, 100, .15);
}

.league-hub-stats-filter .league-stats-dropdown.is-open .league-stats-dropdown__trigger {
    border: 0;
    background: rgba(85, 85, 100, .15);
}

.league-hub-stats-filter .league-stats-dropdown__label,
.league-hub-stats-filter .league-stats-dropdown__option {
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #fff;
}

.league-hub-stats-filter .league-stats-dropdown__icon {
    width: 16px;
    height: 16px;
}

.league-hub-stats-filter .league-stats-dropdown__menu {
    padding: 6px;
    gap: 4px;
    border-radius: 12px;
    background: #12141b;
}

.league-hub-stats-filter .league-stats-dropdown__option {
    min-height: 38px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(85, 85, 100, .05);
    text-align: left;
}

.league-hub-stats-filter .league-stats-dropdown__option.is-active {
    background: rgba(85, 85, 100, .1);
}

/* Table: # 50px | Players | value 120px | Market Value 120px; 0.5px #191a1e column rules, head and rows 58px */
.league-hub-stats-table {
    --stats-cols: 50px minmax(0, 1fr) 120px 120px;
    background: #12141b;
}

.league-hub-stats-table__head {
    min-height: 58px;
    background: #12141b;
    border-bottom: .5px solid rgba(85, 85, 100, .1);
}

.league-hub-stats-table__row {
    min-height: 58px;
    border-bottom: .5px solid rgba(85, 85, 100, .1);
}

.league-hub-stats-table__col {
    padding: 0 4px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    color: #fff;
}

.league-hub-stats-table__col--rank,
.league-hub-stats-table__col--value {
    border-right: .5px solid #191a1e;
}

.league-hub-stats-table__col--rank {
    font-weight: 400;
}

.league-hub-stats-table__col--player {
    gap: 8px;
    padding: 0 12px;
    border-left: 0;
    border-right: .5px solid #191a1e;
    font-weight: 400;
}

.league-hub-stats-table__col--market {
    border-left: 0;
}

/* Head: "#" and "Players" regular, the two sortable metric titles medium, all white */
.league-hub-stats-table__head .league-hub-stats-table__col {
    color: #fff;
}

.league-hub-stats-table__head .league-hub-stats-table__col--rank,
.league-hub-stats-table__head .league-hub-stats-table__col--player {
    font-weight: 400;
}

.league-hub-stats-table__head .league-hub-stats-table__col--value,
.league-hub-stats-table__head .league-hub-stats-table__col--market {
    font-weight: 500;
}

.league-hub-stats-table__entity-link {
    gap: 8px;
}

.league-hub-stats-table__name {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.league-hub-stats-table__sub {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.league-hub-stats-table__team {
    border-radius: 4.5px;
}

/* Phones: this second pass redefines --stats-cols without a breakpoint and sits after the first pass's mobile rule,
   so phones got 50 + 120 + 120px fixed columns and the Players column shrank to ~60px (name hidden until the phone
   was turned sideways). Narrow numeric columns here; the header titles may wrap to two lines instead of widening. */
@media (max-width: 767px) {
    .league-hub-stats-table {
        --stats-cols: 36px minmax(0, 1fr) 60px 84px;
    }

    .league-hub-stats-table__col--player {
        padding: 0 8px;
    }

    /* ~110px for the name: long names wrap to a second line instead of ending in "..." */
    .league-hub-stats-table__name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* "[shirt] 10 • Forward • Age 28" is a flex row (no "..." possible): wrap the parts instead of cutting "Age" off */
    .league-hub-stats-table__sub {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .league-hub-stats-table__row {
        padding: 6px 0;
    }

    .league-hub-stats-table__head .league-hub-stats-table__col--value,
    .league-hub-stats-table__head .league-hub-stats-table__col--market {
        font-size: 12px;
        line-height: 16px;
    }

    .league-hub-stats-table__sort-btn {
        text-align: center;
    }
}

/* Rail "Top Valuable Players" card (Figma 5105:146359): title 14/20 semibold uppercase #b6bac3, head 12 / 14 medium
   muted, rows 36px avatar, name + value 14/20 medium white, club + birth date 12/16 muted */
.league-hub-valuable-players {
    padding: 0;
    gap: 0;
    border-radius: 8px;
    background: #15171d;
}

.league-hub-valuable-players .league-hub-card__head {
    padding: 12px;
    border-bottom: 1px solid #23252b;
}

.league-hub-valuable-players .league-hub-card__title {
    color: #b6bac3;
}

.league-hub-table--valuable-players {
    padding: 8px 10px;
}

.league-hub-table--valuable-players .league-hub-table__head,
.league-hub-table--valuable-players .league-hub-table__row {
    min-height: 0;
    padding: 12px 0;
    background: transparent;
    border-bottom: .5px solid #383845;
}

.league-hub-table--valuable-players .league-hub-table__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.league-hub-table--valuable-players .league-hub-table__col--rank {
    flex: 0 0 20px;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-table--valuable-players .league-hub-table__head .league-hub-table__col--entity,
.league-hub-table--valuable-players .league-hub-table__head .league-hub-table__col--value {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-table--valuable-players .league-hub-table__avatar {
    width: 36px;
    height: 36px;
}

.league-hub-table--valuable-players .league-hub-table__text,
.league-hub-table--valuable-players .league-hub-table__body .league-hub-table__col--value {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.league-hub-table--valuable-players .league-hub-table__body .league-hub-table__col--value {
    align-items: flex-end;
}

.league-hub-table--valuable-players .league-hub-table__name,
.league-hub-table--valuable-players .league-hub-table__value {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
}

.league-hub-table--valuable-players .league-hub-table__sub {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--text-muted, #8c8c8e);
}

/* Standings tab (league_standing.php): visual pass only - same markup and data as before ---------------------- */

.page-league-overview-leagues-v1 .league-overview-standings .match-table-box {
    background: #15171d;
    border-color: #1f2026;
}

.page-league-overview-leagues-v1 .league-overview-standings .match-table-row__team {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.page-league-overview-leagues-v1 .league-overview-standings .match-table-row__stat {
    color: #d6d6d8;
}

.page-league-overview-leagues-v1 .league-overview-standings .match-table-row__stat--pts {
    color: #fff;
    font-weight: 700;
}

/* Legend under the table: coloured dot + muted label (the old markup reuses the zone bar element for the swatch) */
.page-league-overview-leagues-v1 .txt-intro-standing {
    display: inline-flex;
    margin: 12px 20px 0 0;
    gap: 8px;
    color: var(--text-muted, #8c8c8e);
    font-size: 13px;
}

.page-league-overview-leagues-v1 .txt-intro-standing .match-table-row__zone {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    min-height: 0;
    align-self: center;
    border-radius: 50%;
    box-shadow: none;
}

/* Transfer tab -------------------------------------------------------------------------------------------- */

[data-flow-target][hidden] {
    display: none !important;
}

.league-hub-switch-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.league-hub-clubs-chart,
.league-hub-spend-chart,
.league-hub-transfer-list {
    background: #15171d;
    outline: 0;
}

/* Bar chart (CSS only): y axis on the left, one column per bar, crest or label underneath */
.league-hub-barchart {
    --plot-h: 190px;
    display: flex;
    gap: 8px;
}

.league-hub-barchart__axis {
    display: flex;
    flex: 0 0 36px;
    flex-direction: column;
    justify-content: space-between;
    height: var(--plot-h);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted, #8c8c8e);
    font-size: 13px;
    text-align: right;
}

.league-hub-barchart__plot {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    background: linear-gradient(to bottom, #23252b 1px, transparent 1px) 0 0 / 100% calc(var(--plot-h) / 4);
    background-repeat: repeat-y;
}

.league-hub-barchart__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.league-hub-barchart__track {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: var(--plot-h);
}

.league-hub-barchart__bar {
    display: block;
    width: 36px;
    max-width: 60%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #1e90ff, #1a5fb4);
}

.league-hub-barchart--grouped .league-hub-barchart__bar {
    width: 28px;
}

.league-hub-barchart__bar--in {
    background: #1e90ff;
}

.league-hub-barchart__bar--out {
    background: #e5233e;
}

.league-hub-barchart__badge {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 4px;
    background: #3a3b44;
    color: #eee;
    font-size: 11px;
    white-space: nowrap;
}

/* Spend chart (_transfer_spend_bars): each bar sits in a grey slot as tall as the taller bar of its season, so the
   grey part above the shorter bar is the net spend; its badge is pinned beside that gap on the outer side */
.league-hub-barchart__slot {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 28px;
    border-radius: 6px 6px 0 0;
    background: #2a2b33;
}

.league-hub-barchart__slot .league-hub-barchart__bar {
    width: 100%;
    max-width: none;
}

.league-hub-barchart__slot .league-hub-barchart__badge {
    top: 0;
    left: auto;
    transform: none;
    z-index: 1;
}

.league-hub-barchart__badge--out {
    right: calc(100% + 6px);
}

.league-hub-barchart__badge--in {
    left: calc(100% + 6px);
}

/* A season column too narrow for a badge beside the bars (narrow page / many seasons): badge on top of the shorter
   bar's slot, centred, so it never covers the next season */
.league-hub-barchart--grouped .league-hub-barchart__col--group {
    container-type: inline-size;
}

/* Beside the bars a badge (~55px) needs col width - 60px of bars - 6px gap >= 55px */
@container (max-width: 124px) {
    .league-hub-barchart__slot .league-hub-barchart__badge {
        top: auto;
        right: auto;
        bottom: calc(100% + 4px);
        transform: translateX(-50%);
        font-size: 10px;
    }

    /* Centred on the season (the pair of bars), not on the shorter bar: slot 28px + gap 4px -> 16px off centre */
    .league-hub-barchart__slot .league-hub-barchart__badge--out {
        left: calc(50% + 16px);
    }

    .league-hub-barchart__slot .league-hub-barchart__badge--in {
        left: calc(50% - 16px);
    }

    /* "2023 - 2024" is wider than the column: wrap it instead of running into the next season's label */
    .league-hub-barchart__col--group .league-hub-barchart__xlabel {
        font-size: 11px;
        text-align: center;
        white-space: normal;
    }
}

.league-hub-barchart__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.league-hub-barchart__xlabel {
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
    white-space: nowrap;
}

/* Club table: header + rows share one grid template */
.league-hub-club-table {
    --club-cols: minmax(0, 1fr) 64px repeat(4, 84px);
    overflow: hidden;
    border-radius: 12px;
    background: #15171d;
}

.league-hub-club-table__head,
.league-hub-club-table__row {
    display: grid;
    grid-template-columns: var(--club-cols);
    align-items: center;
}

.league-hub-club-table__head {
    min-height: 52px;
    background: #1a1c23;
    color: #e6e6e8;
    font-size: 14px;
}

.league-hub-club-table__row {
    min-height: 60px;
    border-top: 1px solid #23252b;
}

.league-hub-club-table__col {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 100%;
    color: #fff;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 500;
}

.league-hub-club-table__col--club {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
    border-right: 1px solid #23252b;
}

.league-hub-club-table__head .league-hub-club-table__col {
    font-weight: 400;
}

/* Sortable headers are links to ?sort=... (the API sorts the clubs server side) */
.league-hub-club-table__head a.league-hub-club-table__col {
    color: inherit;
    text-decoration: none;
}

.league-hub-club-table__head a.league-hub-club-table__col.is-sorted,
.league-hub-club-table__head a.league-hub-club-table__col.is-sorted .league-hub-sort-icon {
    color: #e5233e;
}

/* "Show more" rounds button of the Fixtures / Results tabs while its AJAX call runs */
[data-league-more][aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
}

.league-hub-club-table__rank {
    flex: 0 0 24px;
    text-align: center;
    color: #e6e6e8;
}

.league-hub-club-table__logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.league-hub-club-table__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-club-table__col--total {
    color: #1e90ff;
}

/* Top Players view */
.league-hub-transfer-season {
    margin: 4px 0 0;
    text-align: center;
    color: #e6e6e8;
    font-size: 14px;
}

.league-hub-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.league-hub-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #15171d;
}

.league-hub-tile__label {
    color: var(--text-muted, #8c8c8e);
    font-size: 13px;
}

.league-hub-tile__value {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    /* "+€187.10M" broke after the sign in narrow tiles */
    white-space: nowrap;
}

.league-hub-tile--negative .league-hub-tile__value {
    color: #e5233e;
}

.league-hub-legend--center {
    justify-content: center;
    padding-top: 12px;
}

.league-hub-legend__square {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.league-hub-legend__square--in {
    background: #1e90ff;
}

.league-hub-legend__square--out {
    background: #e5233e;
}

.league-hub-legend__square--net {
    background: #3a3b44;
}

.league-hub-linechart {
    --plot-h: 120px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: var(--plot-h) auto;
    column-gap: 8px;
    margin-top: 20px;
}

.league-hub-linechart .league-hub-barchart__axis {
    grid-row: 1;
}

.league-hub-linechart__svg {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: var(--plot-h);
}

.league-hub-linechart__labels {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
}

.league-hub-linechart__caption {
    margin: 10px 0 0;
    text-align: center;
    color: #e6e6e8;
    font-size: 13px;
}

.league-hub-transfer-list {
    gap: 8px;
}

.league-hub-transfer-table {
    --transfer-cols: minmax(0, 1.1fr) minmax(0, 1.6fr) 110px;
    display: flex;
    flex-direction: column;
}

.league-hub-transfer-table__head,
.league-hub-transfer-table__row {
    display: grid;
    grid-template-columns: var(--transfer-cols);
    align-items: center;
    column-gap: 12px;
}

.league-hub-transfer-table__head {
    min-height: 40px;
    color: var(--text-muted, #8c8c8e);
    font-size: 13px;
}

.league-hub-transfer-table__club {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
    color: #e6e6e8;
    font-size: 13px;
    font-weight: 500;
}

.league-hub-transfer-table__row {
    min-height: 50px;
    padding: 4px 0;
}

.league-hub-transfer-table__player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.league-hub-transfer-table__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--second-color, rgba(85, 85, 100, .25));
}

.league-hub-transfer-table__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.league-hub-transfer-table__name {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-transfer-table__sub {
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
    /* One line like the name: in a narrow card "Center midfield • Age 28" wrapped to 3-4 lines and made rows uneven */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fixed 3-column grid (from | arrow | to): with a centred flex row the arrow and crests moved with the length of
   each row's club names, so rows did not line up */
.league-hub-transfer-table__match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}

.league-hub-transfer-table__head .league-hub-transfer-table__match {
    display: block;
    text-align: center;
}

.league-hub-transfer-table__club-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    color: #e6e6e8;
    font-size: 12px;
    text-align: center;
}

.league-hub-transfer-table__club-cell span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.league-hub-transfer-table__club-cell img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.league-hub-transfer-table__arrow {
    color: #e5233e;
    font-size: 12px;
    text-align: center;
}

/* Fee header sorts the rows (league-hub.js [data-fee-sort]) */
.league-hub-transfer-table__head [data-fee-sort] {
    cursor: pointer;
    user-select: none;
}

.league-hub-transfer-table__head [data-fee-sort].is-sorted,
.league-hub-transfer-table__head [data-fee-sort].is-sorted .league-hub-sort-icon {
    color: #e5233e;
}

.league-hub-transfer-table__fee {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 14px;
}

.league-hub-transfer-table__head .league-hub-transfer-table__fee {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.league-hub-transfer-table__fee strong {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.league-hub-transfer-table__fee small {
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
}

@media (max-width: 767px) {
    .league-hub-barchart__axis {
        flex-basis: 28px;
        font-size: 11px;
    }

    .league-hub-barchart__bar,
    .league-hub-barchart--grouped .league-hub-barchart__bar,
    .league-hub-barchart__slot {
        width: 14px;
    }

    /* Phone columns are always narrow, so the container query above puts the badge on top; with 14px bars the
       pair's centre is (14 + 4) / 2 = 9px off each bar's centre */
    .league-hub-barchart__slot .league-hub-barchart__badge--out {
        left: calc(50% + 9px);
    }

    .league-hub-barchart__slot .league-hub-barchart__badge--in {
        left: calc(50% - 9px);
    }

    .league-hub-barchart__logo {
        width: 18px;
        height: 18px;
    }

    /* Phones: Club | Squad | In | Out (was Club | Market | Total). Three value columns leave less room, so 12px text,
       a 24px crest and a 16px rank: the widest realistic fee ("€999.99M") is ~62px there and fits the 66px columns,
       and a name like "Manchester City" still fits the club column on one line. */
    .league-hub-club-table {
        --club-cols: minmax(0, 1fr) 50px 66px 66px;
    }

    .league-hub-club-table__head,
    .league-hub-club-table__row {
        column-gap: 4px;
        padding-right: 4px;
    }

    .league-hub-club-table__col {
        font-size: 12px;
    }

    .league-hub-club-table__head .league-hub-club-table__col {
        gap: 2px;
    }

    .league-hub-club-table__rank {
        flex-basis: 16px;
    }

    .league-hub-club-table__logo {
        width: 24px;
        height: 24px;
    }

    /* Narrower club column now: less padding / gaps around rank + crest, and a long name ("Brunei Darussalam") takes a
       second line instead of ending in "..." */
    .league-hub-club-table__col--club {
        padding-left: 12px;
        padding-right: 6px;
        gap: 8px;
    }

    .league-hub-club-table__name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        /* break-word, not anywhere: "anywhere" also shrinks the min-content width, which split names mid-word
           ("Manch-ester") once the column got narrower */
        overflow-wrap: break-word;
    }

    /* Market + Total columns: desktop only */
    .league-hub-club-table__col:nth-child(5),
    .league-hub-club-table__col:nth-child(6) {
        display: none;
    }

    .league-hub-tiles {
        grid-template-columns: 1fr;
    }

    .league-hub-transfer-table {
        --transfer-cols: minmax(0, 1fr) 96px;
    }

    /* The head's own rule (".league-hub-transfer-table__head .league-hub-transfer-table__match", display block) is more
       specific than this one, so the "Match" title stayed: three cells in the 2-column grid pushed "Fee" to a second
       line under it. Hide the title with the same specificity. */
    .league-hub-transfer-table__match,
    .league-hub-transfer-table__head .league-hub-transfer-table__match {
        display: none;
    }
}

/* Trophies tab: two-column grid of "club - Winner" cards ---------------------------------------------------- */

.league-hub-trophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.league-hub-trophy-card {
    overflow: hidden;
    border-radius: 12px;
    background: #15171d;
}

.league-hub-trophy-card__title {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #23252b;
    color: #fff;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 16px;
    font-weight: 500;
}

.league-hub-trophy-card__title span {
    color: var(--text-muted, #8c8c8e);
    margin: 0 2px;
}

.league-hub-trophy-card__body {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 16px 16px;
}

.league-hub-trophy-card__crest {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 16px;
    background: rgba(85, 85, 100, .15);
}

.league-hub-trophy-card__crest img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.league-hub-trophy-card__seasons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #e6e6e8;
    font-size: 12px;
}

@media (max-width: 767px) {
    .league-hub-trophy-grid {
        grid-template-columns: 1fr;
    }
}

/* League Trophies tab: "Season | Team" table of every title + the "Record winner" rail card. The cards above are
   still used by the team and player Trophies tabs. ------------------------------------------------------------- */

.league-hub-titles {
    overflow: hidden;
    border-radius: 12px;
    background: #101116;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
}

.league-hub-titles__row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 54px;
    padding: 0 24px;
    color: #eee;
    font-size: 12px;
    font-weight: 500;
}

/* Third column: "Victory coaches" for a league with one title, the honor name ("Title") for a league with several */
.league-hub-titles--honor .league-hub-titles__row {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, auto);
}

.league-hub-titles__row:not(.league-hub-titles__row--head):hover {
    background: rgba(85, 85, 100, .12);
}

.league-hub-titles__season {
    text-align: center;
}

.league-hub-titles__row--head .league-hub-titles__honor,
.league-hub-titles__honor {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The crest + name are inside an <a> when the team has a page, else direct children of the cell */
.league-hub-titles__team,
.league-hub-titles__team > a,
.league-hub-record__row,
.league-hub-record__row > a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.league-hub-titles__team img,
.league-hub-record__row img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.league-hub-titles__team span,
.league-hub-record__row > a > span,
.league-hub-record__row > span:not(.league-hub-record__wins) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Team / coach names: 12px (the season, title and counts keep the 14px of the row) */
.league-hub-titles__coach,
.league-hub-titles__team span,
.league-hub-record__row > a > span,
.league-hub-record__name {
    font-size: 12px;
}

/* Rows past the first 10 wait for "Show more" (hidden attribute; the rows set their own display, so say it again) */
.league-hub-titles__row[hidden],
.league-hub-record__row[hidden] {
    display: none;
}

.league-hub-titles__team > a:hover span,
.league-hub-record__row > a:hover span {
    color: #fff;
    text-decoration: underline;
}

.league-hub-record__list {
    display: flex;
    flex-direction: column;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
}

.league-hub-record__row {
    justify-content: space-between;
    min-height: 38px;
    padding: 0 20px 0 10px;
    border-bottom: 1px solid #1b1d24;
    color: #eee;
    font-size: 14px;
    font-weight: 500;
}

.league-hub-record__row:last-child {
    border-bottom: 0;
}

.league-hub-record__row > a {
    flex: 1 1 0;
}

.league-hub-record__row--head {
    min-height: 32px;
    padding: 0 4px 0 0;
    border-bottom: 0;
    color: var(--text-muted, #8c8c8e);
    font-weight: 400;
}

.league-hub-record__wins {
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}

/* "Victory coaches" card: round photo, and the name is a plain span (a coach has no page to link to) that takes the
   free width so the count stays in the right-hand column */
.league-hub-record__row--coach {
    justify-content: flex-start;
}

.league-hub-record__row--coach img {
    border-radius: 50%;
    object-fit: cover;
    background: rgba(85, 85, 100, .25);
}

.league-hub-record__row--coach .league-hub-record__name {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 767px) {
    .league-hub-titles__row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 8px;
        min-height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }

    .league-hub-titles--honor .league-hub-titles__row {
        grid-template-columns: 40px minmax(0, 1fr) minmax(0, 40%);
    }

    .league-hub-titles__row--head {
        min-height: 36px;
    }

    .league-hub-titles__team img,
    .league-hub-record__row img {
        width: 20px;
        height: 20px;
    }

    .league-hub-record__row {
        min-height: 28px;
        font-size: 12px;
    }
}

/* Player / team cells that link to their hub page: an <a> (same classes) when the id is known, so the look stays the
   same and only the hover changes. Shared by the league pages and the team hub. ---------------------------------- */

a.league-overview-stat-row__entity,
a.league-hub-table__col--entity,
a.league-hub-transfer-table__player,
a.league-hub-transfers__main,
.league-hub-transfers__player-link,
a.league-hub-stats-table__entity-link {
    /* no color override: the cells / name spans carry their own colours (inherit turned the rail names black) */
    text-decoration: none;
}

.league-hub-transfers__player-link {
    display: flex;
    flex-shrink: 0;
}

/* Wrapper of avatar + name inside the Stats table cell (the team crest stays outside, on the right) */
.league-hub-stats-table__entity-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* CFunction::linkTeam() / linkPlayer(): a link around items of grid / flex rows (crest, name) that takes no box of its
   own, so rows keep their columns. color: inherit only matters for bare text put straight in the link (it would get
   the browser's link blue otherwise); wrapped spans keep their own colour. */
.league-hub-link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.league-hub-link:hover [class*="__name"],
.league-hub-link:hover [class*="__team"],
.league-hub-link:hover [class*="__title"],
.league-hub-link:hover > span,
a.league-overview-stat-row__entity:hover .league-overview-stat-row__name,
a.league-hub-table__col--entity:hover .league-hub-table__name,
a.league-hub-transfer-table__player:hover .league-hub-transfer-table__name,
a.league-hub-transfers__main:hover .league-hub-transfers__name,
a.league-hub-stats-table__entity-link:hover .league-hub-stats-table__name {
    color: #1b8cff;
}

/* League Stats tab, second design pass (Figma 4683:151657) -------------------------------------------------------
   Icons are the design's own SVGs in /themes/pc/images/league-stats/. Hero + tabs bar rules are scoped to the hub
   pages (.page-league-overview-leagues-v1) and match the design's shared "League" / "Detail_Tabs" components. */

/* Sort arrows sit right after the column title (no gap), 16px */
.league-hub-stats-table__head .league-hub-stats-table__col--value,
.league-hub-stats-table__head .league-hub-stats-table__col--market {
    gap: 0;
}

.league-hub-stats-table__sort {
    flex-shrink: 0;
    display: block;
}

/* Header title + arrow is one sort button (league-hub.js initStatsSort); it looks like the plain header text */
.league-hub-stats-table__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.league-hub-stats-table__sort-btn:hover,
.league-hub-stats-table__sort-btn.is-sorted {
    color: #fff;
}

/* Column the table is not sorted by: arrow dimmed */
.league-hub-stats-table__sort-btn:not(.is-sorted) .league-hub-stats-table__sort {
    opacity: .5;
}

/* Sub line: [shirt] 10 • Goalkeeper • Age 20 -> 3px between parts, 2px between the shirt and its number */
.league-hub-stats-table__sub {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.league-hub-stats-table__shirt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.league-hub-stats-table__shirt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.league-hub-stats-table__shirt-icon img,
.league-hub-stats-table__dot {
    display: block;
    flex-shrink: 0;
}

/* Metric dropdown: design arrow (arrow-right rotated 90deg in a 16px box), check on the picked option */
.league-hub-stats-filter .league-stats-dropdown__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}

.league-hub-stats-filter .league-stats-dropdown.is-open .league-stats-dropdown__icon {
    transform: rotate(-90deg);
}

.league-hub-stats-filter .league-stats-dropdown__icon img {
    display: block;
}

.league-hub-stats-filter .league-stats-dropdown__option {
    justify-content: space-between;
    gap: 4px;
}

.league-stats-dropdown__check {
    display: none;
    flex-shrink: 0;
}

.league-stats-dropdown__option.is-active .league-stats-dropdown__check {
    display: block;
}

/* Hero (Figma "League" 4683:151726): #12141b with the blurred colour glow, name 16/22 bold white. The frame is 96px
   (24px padding around the 48px logo) and its name + season pill column (62px) overflows it in Figma, so 17px vertical
   padding gives the same 96px box with the column centred.
   No overflow: hidden here: the season menu (.league-season-select__menu) drops out of the hero and was cut off at its
   bottom edge (league and team hubs). The glow is a background, already clipped to the rounded box. */
.page-league-overview-leagues-v1 .leagues-v1-hero {
    gap: 16px;
    min-height: 96px;
    padding: 17px 16px;
    background: url(../images/league-stats/hero-bg.svg) calc(50% + .5px) calc(50% - 3.43px) / 1022px 522px no-repeat, #12141b;
}

.page-league-overview-leagues-v1 .leagues-v1-hero .league-overview-hero__name {
    font-weight: 700;
    color: #fff;
}

/* Pin button (Figma 4442:77132 "View"): 30x30, radius 8, rgba(85,85,100,.25), 18x18 pin glyph. The glyph is the
   <img> football-favourite.js renders for every pin (league-stats/pin.svg, pin-active.svg when pinned); the old
   pin.svg background + pin-active.png swap is gone */
.page-league-overview-leagues-v1 .league-hub-hero-favorite {
    width: 30px;
    height: 30px;
    min-width: 30px;
    align-self: center;
}

.page-league-overview-leagues-v1 .league-hub-hero-favorite img {
    width: 18px;
    height: 18px;
}

/* Season dropdown: "Seasons" 14/18 muted + outlined pill "26-27 v" (14/22 muted, border #191a1e) */
.league-hub-season {
    gap: 6px;
}

.league-hub-season .league-season-select__label {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-season .league-hub-season__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 4px 10px;
    border: 1px solid #191a1e;
    border-radius: 100px;
    background: transparent;
    font-family: var(--font-vn, 'Be Vietnam Pro', sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-season .league-season-select__toggle:hover,
.league-hub-season .league-season-select__toggle[aria-expanded="true"] {
    border-color: #383845;
    background: rgba(85, 85, 100, .1);
}

.league-hub-season .league-season-select__value {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--text-muted, #8c8c8e);
}

.league-hub-season__arrow {
    display: block;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.league-hub-season .league-season-select__toggle[aria-expanded="true"] .league-hub-season__arrow {
    transform: rotate(180deg);
}

/* Tabs bar: same look as the match detail tabs (.match-detail-tabs-bar in score24h.css + custom.css) - 40px bar,
   14/500 muted tabs, active tab on a #1f1f1f->#0f1015 fill with the red->transparent gradient border and 8px top
   corners. The base .league-detail-tabs-bar rules in score24h.css already mirror the match bar; this only adds the
   custom.css active fill, replacing the old solid #fd0000 outline / 12px corners variant */
.page-league-overview-leagues-v1 .league-detail-tabs-bar__tab.is-active {
    background: linear-gradient(#1f1f1f, #0f1015) padding-box, linear-gradient(180deg, #fd0000 3.87%, #191a1e70 95.11%) border-box;
}

/* Overview blocks (Figma 2991:224608): the match list and the Players / Goal Teams / Qualification sections lose
   the #15171d wrapper (background + 12px padding) so the match cards read like the home feed, and the stat tables
   inside are flat #12141b boxes like the cards */
.page-league-overview-leagues-v1 .league-overview-section {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.page-league-overview-leagues-v1 .league-overview-table {
    background: var(--bg-box, #12141b);
}

/* Rail news items (Figma 5065:151952): #12141b cards with a #191a1e border and 8px corners, 80x53 thumb with a
   #7a7ca4 border, headline 14/22 regular #d6d6d6 */
.league-hub-rail .chat-panel .news-panel__card {
    gap: 10px;
    border: 1px solid #191a1e;
    border-radius: 8px;
    background: #12141b;
}

.league-hub-rail .chat-panel .news-panel__thumb {
    box-sizing: border-box;
    border: 1px solid #7a7ca4;
}

.league-hub-rail .chat-panel .news-panel__headline {
    font-weight: 400;
    line-height: 22px;
    color: #d6d6d6;
}

.league-hub-rail .chat-panel .news-panel__title {
    font-weight: 600;
    line-height: 22px;
    color: #fff;
}

/* Standings tab: stage buttons (Division 1 / Division 2...) under All / Home / Away, same pill look as that row
   (.match-table-subtab); only the picked stage's tables show (league-hub.js initStandingStages) */
.league-standings-stages {
    margin-top: 12px;
}

.league-overview-standings[data-stage-hidden] {
    display: none !important;
}