/* Best Team Page Specific Styles */
/* This page loads styles.css + ui-enhancements.css only, so everything the
   ranking needs beyond the shared chrome lives here. */

/* Back Button */
.back-btn {
    color: var(--text-secondary);
    text-decoration: none;
    margin-right: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.back-btn:hover {
    color: var(--primary-color);
    background: var(--bg-secondary);
}

/* Summary Card */
.page-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.rule-note {
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 70ch;
}

/* The § 8.6 points table, printed once so no place on the page needs a legend.
   Reads as one strip of pairs rather than a table: it is a reference, not data
   the visitor compares. */
.wch-points-table {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
}

.wch-points-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.wch-point {
    padding: 0.15rem 0.45rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wch-point b {
    color: var(--text-primary);
}

.pass-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.pass-mark {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* The admin-chosen category colour, so the three marks are told apart at a
   glance instead of reading as one grey block. */
.pass-mark-category {
    --category-color: var(--primary-color);
    font-weight: 600;
    color: var(--text-primary);
    padding-left: 0.5rem;
    border-left: 3px solid var(--category-color);
}

.pass-mark-phase {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Podium — the frame only; the cards inside come from ui-enhancements.css, and
   the first place scales up on hover, so nothing here may clip them. */
.podium-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

/* Section headings */
.section-heading {
    margin-bottom: 1rem;
}

.section-heading h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-heading h3 i {
    color: var(--primary-color);
}

.section-heading p {
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Ranking */
.ranking-section {
    margin-bottom: 2.5rem;
}

.ranking-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.desktop-ranking {
    display: block;
    overflow-x: auto;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
}

.ranking-table th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.ranking-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: top;
}

.ranking-table tr:last-child td {
    border-bottom: none;
}

.ranking-table tr:hover {
    background: var(--bg-hover);
}

/* The members are the widest cell by far; the rest stay as narrow as their
   content so the ranked team keeps the room it needs. */
.ranking-table .members-cell {
    width: 55%;
}

/* How many positive results the team has, under its name: three is the bar, and
   the number is what changes when a score is corrected. */
.team-positives {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Rank Badge */
.rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
}

.rank-badge.gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.rank-badge.silver {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
}

.rank-badge.bronze {
    background: linear-gradient(135deg, #cd7c2f, #a16207);
}

.rank-badge.default {
    background: var(--primary-color);
}

.team-cell {
    /* Organisation names are short codes, often hyphenated ("FW-RH"). Left to
       itself the browser breaks them at the hyphen and the column reads as two
       different teams, so the cell holds the name on one line and takes the
       width it needs instead. */
    white-space: nowrap;
}

.team-cell strong {
    font-size: 1.0625rem;
}

.country-cell {
    white-space: nowrap;
}

.country-flag {
    font-size: 1.2rem;
    margin-right: 0.4rem;
    display: inline-block;
}

.country-code {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.score-cell {
    text-align: center;
    font-weight: 600;
    min-width: 90px;
}

.score-partial {
    display: block;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
}

.score-total {
    display: block;
    color: var(--primary-color);
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
}

/* Members */
.best-team-members {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.best-team-member {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* A negative or disqualified result scores nothing, so it is marked on the
   member itself, not only in the status chip. The mark is the border: the fill
   changes with the surface the row sits on, the border does not. */
.best-team-member.failed {
    border-color: var(--error-color);
}

/* One of the three that make up the ranked team. The rest of the list is
   context — who else the organisation entered — so the three that actually
   score have to be findable without reading every row. */
.best-team-member.counted {
    border-color: var(--primary-color);
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.member-category {
    --category-color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    padding-left: 0.5rem;
    border-left: 3px solid var(--category-color);
    white-space: nowrap;
}

/* The individual place the WCH points were read off. Tabular figures and a
   fixed minimum so the column stays a column between 1. and 15. */
.member-place {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    min-width: 3ch;
    text-align: right;
}

.member-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-name {
    font-weight: 500;
    color: var(--text-primary);
}

.member-dog {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-style: italic;
}

.member-scores {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.member-score {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.member-score.total {
    color: var(--primary-color);
}

.member-score-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* The outcome of the run, which is what decides whether it scores at all. Set
   in the body colour with only the icon carrying the verdict: the error red is
   too dark against the row background to read at this size in either theme. */
.member-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.member-status.positive i { color: var(--success-color); }
.member-status.negative i,
.member-status.dq i       { color: var(--error-color); }
.member-status.pending i  { color: var(--text-muted); }

.member-counted {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
}

.members-empty {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Mobile team cards */
.mobile-ranking {
    display: none;
    padding: 1rem;
    gap: 1rem;
    flex-direction: column;
}

.mobile-team-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.mobile-team-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mobile-team-identity {
    flex: 1;
    min-width: 0;
}

.mobile-team-name {
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-team-country {
    font-size: 0.875rem;
}

.mobile-team-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.mobile-team-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.mobile-team-phase {
    text-align: center;
}

.mobile-phase-value {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.mobile-phase-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Both card surfaces are --bg-secondary, which is what the member rows use when
   they sit in the table; on a card they take the page background instead, so
   they stay separated from what is behind them in either theme. */
.mobile-team-card .best-team-member,
.excluded-card .best-team-member {
    background: var(--bg-primary);
}

/* Excluded teams */
.excluded-section {
    margin-bottom: 2.5rem;
}

.excluded-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem;
}

.excluded-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.excluded-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.excluded-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.excluded-team {
    font-weight: 600;
    color: var(--text-primary);
}

.excluded-country {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.best-team-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.best-team-status.out {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.best-team-status.out i {
    color: var(--warning-color);
}

.excluded-reason {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.excluded-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.excluded-totals b {
    color: var(--text-primary);
}

.excluded-totals-note {
    color: var(--text-muted);
    font-style: italic;
}

/* Empty and error states (createEmptyState markup) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.empty-state i {
    font-size: 3rem;
    color: var(--text-muted);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ranking-table th,
    .ranking-table td {
        padding: 0.75rem 0.5rem;
    }

    .best-team-member {
        grid-template-columns: auto auto 1fr auto;
    }

    .member-scores {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    /* Hide desktop table, show mobile cards */
    .desktop-ranking {
        display: none;
    }

    .mobile-ranking {
        display: flex;
    }

    .excluded-list {
        grid-template-columns: 1fr;
    }

    .pass-mark {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .best-team-member {
        grid-template-columns: auto 1fr;
        gap: 0.5rem;
    }

    .member-identity {
        grid-column: 1 / -1;
    }

    .member-scores {
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem;
    }

    .member-status {
        grid-column: 1 / -1;
    }

    .mobile-team-card,
    .excluded-card {
        padding: 0.75rem;
    }

    .mobile-team-total {
        font-size: 1.25rem;
    }
}