/* Friendlies main page cleanup.
   Historical results and explicit classics now live on their own internal pages. */
.club-friendlies-page > .club-friendlies-history-panel,
.club-friendlies-page > .club-friendlies-classics-panel {
    display: none !important;
}

/* Friendlies always exposes its own internal navigation.
   No more hiding History and Classics under the generic Operate menu. */
.na-club-friendlies-context {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .15rem;
    padding: .42rem;
    border-top: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(6, 24, 43, .62), rgba(22, 15, 50, .5));
}

.na-club-friendlies-context > a {
    min-height: 58px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    padding: .55rem .72rem !important;
    border-color: rgba(80, 206, 255, .12) !important;
    background: rgba(5, 13, 30, .42) !important;
}

.na-club-friendlies-context > a:hover,
.na-club-friendlies-context > a.active {
    border-color: rgba(73, 224, 255, .55) !important;
    background: linear-gradient(135deg, rgba(12, 79, 106, .42), rgba(94, 49, 171, .22)) !important;
}

.na-club-friendlies-context > a.active {
    box-shadow: inset 0 -2px 0 #55e8ff, 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.na-club-friendlies-context-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #8df5ff;
    background: rgba(47, 203, 239, .1);
    font-size: 1rem;
    font-weight: 950;
}

.na-club-friendlies-context strong {
    color: #f4f8ff;
    font-size: .76rem !important;
}

.na-club-friendlies-context small {
    color: #aab8d5 !important;
    font-size: .65rem !important;
}

/* Keep recent activity compact: show at most the ten latest rows and scroll inside the panel. */
.club-friendlies-page > .club-friendlies-requests-panel {
    max-height: 720px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.club-friendlies-page > .club-friendlies-requests-panel > header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 0 14px;
    background: linear-gradient(180deg, rgba(12,23,48,.99) 0%, rgba(15,19,45,.98) 82%, rgba(15,19,45,0) 100%);
}

.club-friendlies-page > .club-friendlies-requests-panel > article.club-friendlies-request-row:nth-of-type(n+11) {
    display: none !important;
}

/* Stable activity-card composition.
   Every accepted series keeps the same left summary / right game-list layout,
   including read-only rows. Previously the read-only badge occupied column 2
   and pushed the game list below the summary. */
.club-friendlies-request-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.club-friendlies-request-row > :first-child {
    grid-column: 1;
    min-width: 0;
}

.club-friendlies-request-row > .status-pending,
.club-friendlies-request-row > .status-accepted,
.club-friendlies-request-row > .status-declined,
.club-friendlies-request-row > .status-cancelled,
.club-friendlies-request-row > .status-finalized {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

.club-friendlies-request-row > a {
    grid-column: 2;
    justify-self: end;
}

.club-friendlies-request-row > .club-friendlies-request-actions,
.club-friendlies-request-row > .club-friendlies-result-state {
    grid-column: 1 / -1;
}

.club-friendlies-result-state > .club-friendlies-series-score {
    grid-column: 1;
    grid-row: 1;
}

.club-friendlies-result-state > .club-friendlies-read-only {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    margin: 0;
}

.club-friendlies-result-state > .club-friendlies-game-list {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    min-width: 0;
}

.club-friendlies-result-state > .club-friendlies-simple-result {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .na-club-friendlies-context {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .22rem;
        padding: .3rem;
    }

    .na-club-friendlies-context > a {
        min-height: 52px !important;
        grid-template-columns: 1fr !important;
        justify-items: center;
        padding: .4rem .25rem !important;
        text-align: center;
    }

    .na-club-friendlies-context-icon {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: .85rem;
    }

    .na-club-friendlies-context small {
        display: none !important;
    }

    .na-club-friendlies-context strong {
        font-size: .62rem !important;
        white-space: normal !important;
        text-align: center;
    }

    .club-friendlies-result-state > .club-friendlies-series-score,
    .club-friendlies-result-state > .club-friendlies-read-only,
    .club-friendlies-result-state > .club-friendlies-game-list,
    .club-friendlies-result-state > .club-friendlies-simple-result {
        grid-column: 1;
        grid-row: auto;
    }

    .club-friendlies-request-row > a {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 620px) {
    .club-friendlies-page > .club-friendlies-requests-panel {
        max-height: 640px;
    }
}