/* =============================================================================
   [team-hub.css] - styles only the team hub has (team/{tab}/{slug}-t{id}: overview,
   fixtures, results, squad, transfer, trophies). Everything the league hub already
   has (hero, tab bar, cards, tables, pills, tiles, bar/line charts, transfer rows,
   trophy cards) comes from leagues-v1.css + league-hub.css, loaded before this file.
   Prefix: "team-hub-".
   ============================================================================= */

.page-team-hub .team-hub-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Hero: "Seasons [26-27 v]" pill ------------------------------------------------ */

.team-hub-season {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-hub-season__pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(85, 85, 100, .22);
    color: #eee;
    font-weight: 500;
}

/* Star = icons/star.svg / star-active.svg <img> pair toggled by .is-active (FavouriteTeamFootballApp) */
.team-hub-hero-favorite img {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.team-hub-hero-favorite:not(.is-active) .match-card__chip-favorite-icon.active,
.team-hub-hero-favorite.is-active .match-card__chip-favorite-icon:not(.active) {
    display: none;
}

.team-hub-hero-favorite.is-active {
    background: rgba(253, 194, 0, .12);
}

/* Overview: Top 10 valuable players (horizontal bars) --------------------------- */

.team-hub-valuable__chart {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-hub-valuable__row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.team-hub-valuable__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(85, 85, 100, .25);
}

.team-hub-valuable__track {
    position: relative;
    display: flex;
    align-items: center;
    height: 20px;
}

.team-hub-valuable__bar {
    display: block;
    min-width: 4px;
    height: 8px;
    border-radius: 4px;
    background: #1b8cff;
    transition: filter .15s ease;
}

.team-hub-valuable__row:hover .team-hub-valuable__bar,
.team-hub-valuable__row:focus-visible .team-hub-valuable__bar {
    filter: brightness(1.25);
}

.team-hub-valuable__tip {
    position: absolute;
    left: 8px;
    bottom: calc(100% + 2px);
    z-index: 2;
    padding: 4px 8px;
    border-radius: 6px;
    background: #23252b;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.team-hub-valuable__row:hover .team-hub-valuable__tip,
.team-hub-valuable__row:focus-visible .team-hub-valuable__tip {
    opacity: 1;
}

.team-hub-valuable__axis {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0 30px;
    padding: 0;
    list-style: none;
    color: var(--text-muted, #8c8c8e);
    font-size: 11px;
}

/* Transfer lists: green arrow for arrivals, red for departures; "Show more" pill -- */

.team-hub-transfer-arrow--in {
    color: #2fbf71;
}

.team-hub-transfer-arrow--out {
    color: #e5233e;
}

.team-hub-transfer-card .league-hub-transfer-table__club-cell {
    color: #e6e6e8;
    text-decoration: none;
}

.team-hub-show-more {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.team-hub-show-more .show-more-btn__inner {
    text-decoration: none;
}

/* Overview: most recent formation (vertical pitch, positions set inline) --------- */

.team-hub-formation__match {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

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

.team-hub-formation__scoreline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
}

.team-hub-formation__team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.team-hub-formation__team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-hub-formation__team--home {
    justify-content: flex-end;
}

.team-hub-formation__team img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.team-hub-formation__score {
    padding: 2px 10px;
    border: 1px solid #e5233e;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.team-hub-formation__field {
    overflow: hidden;
    border-radius: 12px;
    background: #12141a;
}

.team-hub-formation__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #0b0c10;
    color: #e6e6e8;
    font-size: 13px;
}

.team-hub-formation__bar-team,
.team-hub-formation__coach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.team-hub-formation__bar img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.team-hub-formation__pill {
    padding: 1px 8px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.team-hub-formation__pill--home {
    background: #1b8cff;
}

.team-hub-formation__pill--away {
    background: #e5233e;
}

/* Starting XIs without positions (no x / y from the provider): side-by-side list instead of the pitch, home on the
   left and away on the right, mirrored around the centre like the match page's "Starting Lineups" list
   (.match-lineups-bench in score24h.css: bordered 8px rows, 28px shirt-number rings) */
.team-hub-formation__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-hub-formation__list-row {
    display: flex;
    gap: 16px;
    padding: 8px;
    border: 1px solid #191a1e;
    border-radius: 8px;
    box-sizing: border-box;
}

.team-hub-formation__list-row--head,
.team-hub-formation__list-row--coach {
    border-color: transparent;
    background: rgba(85, 85, 100, .15);
}

.team-hub-formation__list-row--head {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Coach row hangs under the team row as one block */
.team-hub-formation__list-row--coach {
    margin-top: -8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #e6e6e8;
    font-size: 13px;
}

.team-hub-formation__list-side {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 28px;
}

/* Home reads towards the centre: name right-aligned, then the number next to the away column */
.team-hub-formation__list-side--home {
    text-align: right;
}

/* Team and coach rows have no stretching name: pack the home half against the centre, crest / photo innermost */
.team-hub-formation__list-row--head .team-hub-formation__list-side--home,
.team-hub-formation__list-row--coach .team-hub-formation__list-side--home {
    flex-direction: row-reverse;
}

.team-hub-formation__list-row--head .team-hub-formation__list-side,
.team-hub-formation__list-row--coach .team-hub-formation__list-side {
    gap: 8px;
}

.team-hub-formation__list-row--head img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.team-hub-formation__list-row--coach img {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.team-hub-formation__list-row--coach span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DOM order is name, number for both sides; the away side flips it so its number sits by the centre too */
.team-hub-formation__list-side--away .team-hub-formation__list-num {
    order: -1;
}

.team-hub-formation__list-num {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    color: #eee;
    font-size: 12px;
    font-weight: 500;
}

.team-hub-formation__list-num:empty {
    visibility: hidden;
}

.team-hub-formation__list-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted, #8c8c8e);
    font-size: 13px;
    line-height: 16px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-hub-formation__list-name:hover {
    color: #fff;
}

.team-hub-formation__pitch {
    position: relative;
    aspect-ratio: 520 / 620;
    border-top: 1px solid #23252b;
    border-bottom: 1px solid #23252b;
}

.team-hub-formation__line {
    position: absolute;
    border: 1px solid #262932;
    pointer-events: none;
}

.team-hub-formation__line--half {
    left: 0;
    right: 0;
    top: 50%;
    border-width: 1px 0 0;
}

.team-hub-formation__line--circle {
    left: 50%;
    top: 50%;
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.team-hub-formation__line--box-top,
.team-hub-formation__line--box-bottom {
    left: 37%;
    width: 26%;
    height: 7%;
}

.team-hub-formation__line--box-top {
    top: 0;
    border-top: 0;
}

.team-hub-formation__line--box-bottom {
    bottom: 0;
    border-bottom: 0;
}

.team-hub-formation__player {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 84px;
    color: #e6e6e8;
    font-size: 12px;
    text-decoration: none;
    transform: translate(-50%, -50%);
}

.team-hub-formation__avatar {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
}

.team-hub-formation__avatar > img:first-child {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(85, 85, 100, .35);
}

.team-hub-formation__flag {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    object-fit: cover;
}

.team-hub-formation__name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-hub-formation__player:hover .team-hub-formation__name {
    color: #fff;
}

/* Overview rail: team info pie + league grid ------------------------------------ */

.team-hub-info__pie-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.team-hub-info__pie {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: conic-gradient(#1b8cff 0 var(--foreign-pct, 0%), #e5233e var(--foreign-pct, 0%) 100%);
}

.team-hub-info__legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted, #8c8c8e);
    font-size: 13px;
}

.team-hub-info__legend b {
    margin-right: 4px;
    color: #fff;
    font-weight: 600;
}

.team-hub-info__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
}

.team-hub-info__dot--foreign {
    background: #1b8cff;
}

.team-hub-info__dot--local {
    background: #e5233e;
}

.team-hub-leagues__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.team-hub-leagues__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #e6e6e8;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
}

.team-hub-leagues__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    /* CFunction::getLogoLeague() prefers thumb_dark (logo drawn for a dark background): a white tile hid them */
    background: rgba(85, 85, 100, .15);
}

.team-hub-leagues__logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.team-hub-leagues__name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-hub-leagues__season {
    color: var(--text-muted, #8c8c8e);
    font-size: 11px;
}

/* Fixtures / Results: competition heading + 1X2 odds column ---------------------- */

/* The league round heading is centred between two rules; the team list heads each group with its competition,
   left-aligned, like the design */
.team-hub-match-group__head.league-hub-round-head::before,
.team-hub-match-group__head.league-hub-round-head::after {
    content: none;
}

.team-hub-match-group__head .leagues-v1-section__title.league-round {
    color: #eee;
    font-size: 15px !important;
}

.team-hub-match-group__league {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.team-hub-match-group__league img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.team-hub-odds {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    row-gap: 4px;
    text-align: center;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.team-hub-odds__head {
    color: var(--text-muted, #8c8c8e);
}

.team-hub-odds__value {
    color: #e6e6e8;
}

/* Result rows are a 4-lane grid on the league pages (leagues-v1.css: time | teams | score | star): the team hub
   puts the odds in an extra lane before the score. Phones hide the odds, so they keep the 4 lanes. */
@media (min-width: 768px) {
    .page-team-hub.page-league-overview-leagues-v1 .leagues-v1-section--results .schedule-card--result {
        grid-template-columns: 56px minmax(0, 1fr) 132px 40px 28px;
    }

    .page-team-hub.page-league-overview-leagues-v1 .leagues-v1-section--results .schedule-card--result .team-hub-odds {
        grid-column: 3;
        margin: 0;
    }

    .page-team-hub.page-league-overview-leagues-v1 .leagues-v1-section--results .schedule-card--result .schedule-card__score-col--stacked {
        grid-column: 4;
    }
}

.team-hub-standing__row--current {
    border-radius: 8px;
    background: rgba(85, 85, 100, .25);
}

.team-hub-standing__row--current .league-hub-table__col--rank {
    color: #1b8cff;
}

.team-hub-standing .league-hub-table__col--entity {
    text-decoration: none;
}

/* Squad tab: one table per position ------------------------------------------ */

.team-hub-squad {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.team-hub-squad__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px 72px 64px 104px 104px;
    align-items: center;
    column-gap: 8px;
}

.team-hub-squad__grid > span:not(.team-hub-squad__col--player) {
    text-align: center;
}

.team-hub-squad__group-head {
    min-height: 56px;
    padding: 0 12px;
    background: #15171d;
    color: #e6e6e8;
    font-size: 14px;
    font-weight: 500;
}

.team-hub-squad--coach .team-hub-squad__group-head {
    display: flex;
    align-items: center;
}

.team-hub-squad__row {
    min-height: 58px;
    padding: 4px 12px;
    border-top: 1px solid #191a1e;
    color: #e6e6e8;
    font-size: 14px;
}

.team-hub-squad__row--coach {
    display: flex;
    align-items: center;
}

.team-hub-squad__player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.team-hub-squad__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(85, 85, 100, .25);
}

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

.team-hub-squad__name {
    overflow: hidden;
    color: #fff;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-hub-squad__sub {
    color: var(--text-muted, #8c8c8e);
    font-size: 12px;
}

.team-hub-squad__shirt::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2 2 6l3 5 2-1v12h10V10l2 1 3-5-6-4c-.5 1.7-2 3-4 3S8.5 3.7 8 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2 2 6l3 5 2-1v12h10V10l2 1 3-5-6-4c-.5 1.7-2 3-4 3S8.5 3.7 8 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.team-hub-squad__value {
    color: #1b8cff;
    font-weight: 600;
}

/* Trophies tab: long season lists wrap into columns ----------------------------- */

.team-hub-trophy-grid .league-hub-trophy-card__seasons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    flex: 1 1 auto;
    gap: 8px 16px;
}

/* One season: start year | dash | end year. The year cells have a fixed width (4 digits at 16px are 36-42px in this
   font, digits are not all the same width) and the start year is right-aligned, so the dash sits at the same x in
   every row of a column. */
.team-hub-trophy-season {
    display: grid;
    grid-template-columns: 2.8em auto 2.8em;
    column-gap: .35em;
    justify-content: start;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.team-hub-trophy-season__from {
    text-align: right;
}

.team-hub-trophy-season__to {
    text-align: left;
}

.team-hub-trophy-grid .league-hub-trophy-card__title {
    font-size: 15px;
    text-transform: uppercase;
}

.team-hub-trophy-grid .league-hub-trophy-card__title .team-hub-trophy-count {
    margin-left: 6px;
    color: #1b8cff;
}

.team-hub-trophy-crest {
    background: #0b0c10;
}

@media (max-width: 767px) {
    .team-hub-squad__grid {
        grid-template-columns: minmax(0, 1fr) 44px 92px;
    }

    /* phone: name, age, market value */
    .team-hub-squad__grid > :nth-child(3),
    .team-hub-squad__grid > :nth-child(4),
    .team-hub-squad__grid > :nth-child(6) {
        display: none;
    }

    .team-hub-odds {
        display: none;
    }

    /* Phone: taller pitch + 44px player chip (28px avatar, 14px name) so 5 formation lines per half (row pitch
       ~9% of the height, ~46px at 375px wide) do not overlap; the 520/620 desktop ratio gave only ~26px per line */
    .team-hub-formation__pitch {
        aspect-ratio: 520 / 800;
    }

    .team-hub-formation__player {
        width: 64px;
        gap: 2px;
        font-size: 11px;
        line-height: 14px;
    }

    .team-hub-formation__avatar,
    .team-hub-formation__avatar > img:first-child {
        width: 28px;
        height: 28px;
    }

    .team-hub-formation__coach {
        font-size: 12px;
    }
}

/* Team hero crest shown whole: no round grey box (score24h.css .league-overview-hero__logo, kept for the league logo
   and the player photo). The player hub also has .page-team-hub, hence :not(.page-player-hub). */
.page-team-hub:not(.page-player-hub) .league-overview-hero__logo {
    border-radius: 0;
    background: none;
}