/* 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;
}

.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 line-up is the widest cell by far; the rest stay as narrow as their
   content so the three members keep the room they need. */
.ranking-table .members-cell {
    width: 55%;
}

/* 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;
    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 member under the pass mark is the reason the whole team is out, so it is
   marked on the member, not only in the reason line. 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);
}

.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;
}

.bib-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 2ch;
    text-align: right;
}

.bib-cell.empty {
    color: var(--text-muted);
    font-weight: 400;
}

.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 note is the sentence that explains the exclusion, so it is set in the
   body colour and only the icon carries the alarm — the error red is too dark
   against the row background to read at this size in either theme. */
.member-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.member-note i {
    color: var(--error-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;
    }

    .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;
    }

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

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