/* =====================================================================
   EBT TOURNAMENT TABS — squads, stage leaderboards, final standings
   ---------------------------------------------------------------------
   The components live in Public.Components, which does not ship static web
   assets, so scoped .razor.css never reaches the page. Their styles live
   here and Details.razor links this file like the other tournament sheets.
   ===================================================================== */

/* ---- Squads tab ------------------------------------------------------ */
.squad-booking {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.5rem);
}

.squad-booking h3 {
    margin: 0 0 var(--spacing-sm, .5rem);
    font-size: var(--fs-500, 1.125rem);
    color: var(--text-strong);
}

.squad-booking__muted {
    color: var(--text-muted);
    font-size: var(--fs-300, .875rem);
}

.squad-booking__entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, .5rem);
}

.squad-booking__entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-sm, .5rem) var(--spacing-md, 1rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--surface);
}

.squad-booking__entry div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xs, .25rem) var(--spacing-sm, .5rem);
}

.squad-booking__entry--inactive {
    opacity: .6;
}

.squad-booking__lane {
    font-weight: 600;
    color: var(--accent);
}

.squad-booking__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md, 1rem);
}

.squad-booking__form label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, .25rem);
    font-size: var(--fs-300, .875rem);
    color: var(--text-soft);
}

.squad-booking__form input,
.squad-booking__form select {
    padding: .5rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

/* Signed-out prompt: a soft accent panel with the reason and a sign-in button */
.squad-booking__signin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.squad-booking__signin-icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent);
}

.squad-booking__signin-text {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-strong);
}

.squad-booking__signin-cta {
    flex: none;
    padding: .55rem 1.4rem;
    border-radius: 10px;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .squad-booking__signin-cta {
        flex: 1 1 100%;
        text-align: center;
    }
}

.squad-booking__tag {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: var(--radius-full, 999px);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--fs-100, .75rem);
}

.squad-booking__tag--booked {
    background: var(--accent);
    color: #fff;
}

/* ---- Leaderboards + final standings: shared table details ------------ */
.tournament-leaderboard .ui-table,
.tournament-final-results .ui-table {
    font-variant-numeric: tabular-nums;
}

/* ---- Leaderboards tab ------------------------------------------------- */
.leaderboard-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, .5rem);
}

.tournament-leaderboard .leaderboard-row--qualifying td {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.tournament-leaderboard .leaderboard-row--qualifying .leaderboard-rank {
    color: var(--accent-strong);
}

.tournament-leaderboard .leaderboard-row--tied td {
    background: #fffbeb;
}

/* The cut: a ruled row between the last advancing place and the first one out */
.tournament-leaderboard .leaderboard-cut td {
    padding: .375rem 1rem;
    border-top: 2px solid var(--accent);
    background: var(--surface-3);
    color: var(--accent-strong);
    font-size: .8125rem;
    font-weight: 600;
}

.tournament-leaderboard .leaderboard-cut:hover td {
    background: var(--surface-3);
}

.leaderboard-tag {
    display: inline-block;
    margin-left: .375rem;
    padding: .0625rem .5rem;
    border-radius: var(--radius-full, 999px);
    background: #fef3c7;
    color: #92400e;
    font-size: var(--fs-100, .75rem);
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Final standings tab --------------------------------------------- */
.final-results-note {
    margin: 0 0 var(--spacing-xs, .5rem);
    color: var(--text-muted);
    font-size: .875rem;
}

.tournament-final-results .final-row--podium .final-rank {
    color: var(--accent-strong);
}

/* Each stage's group of places starts on a firmer rule; its later rows mute the repeated stage name */
.tournament-final-results .final-row--stage-start:not(:first-child) td {
    border-top: 2px solid var(--border);
}

.tournament-final-results .final-exit {
    color: var(--text-muted);
}

.tournament-final-results .final-row--stage-start .final-exit {
    color: var(--text);
}

.tournament-final-results .final-exit--winner,
.tournament-final-results .final-row--stage-start .final-exit--winner {
    color: var(--accent-strong);
    font-weight: 700;
}

/* ---- Phones: keep place, name and total on screen --------------------- */
@media (max-width: 640px) {
    .tournament-leaderboard .leaderboard-game {
        display: none;
    }

    .tournament-leaderboard .ui-table--gradient thead th,
    .tournament-leaderboard .ui-table--gradient tbody td,
    .tournament-final-results .ui-table--gradient thead th,
    .tournament-final-results .ui-table--gradient tbody td {
        padding: .625rem .375rem;
    }

    .tournament-leaderboard .leaderboard-cut td {
        padding: .375rem .5rem;
    }
}