/* ================================================================
   athletes.css — page-specific styles for athletes.php / athlete.php
   Requires: theme.css
   ================================================================ */

/* ── Narrow single-column layout (duplicated from results.css /
   coming-soon.css per this site's per-page-stylesheet convention —
   neither of those files is loaded on these two pages) ── */
.page-wrap-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}
/* Wider variant for athletes.php's results table specifically (more
   columns than the narrow profile/history layout athlete.php uses) —
   kept as its own class so athlete.php's page-wrap-narrow is untouched. */
.page-wrap-wide {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.page-body-simple {
    padding: 32px 0 60px;
}
.hero-inner-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* ── Hero stats (athlete.php profile header) ── */
.hero-stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-num {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2rem; line-height: 1; color: var(--gold);
}
.hero-stat-label {
    font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 2px;
}

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; color: var(--gold);
    text-decoration: none; margin-top: 20px; transition: opacity 0.12s;
}
.back-link:hover { opacity: 0.75; }

/* ── Filter bar ── */
.filter-bar {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--card-bg);
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
    padding: 14px;
}
.filter-input,
.filter-select {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--rule-mid); border-radius: var(--radius);
    color: var(--ink); font-size: 0.82rem; font-family: var(--font-body);
    padding: 8px 10px; height: 38px;
    /* Tells the browser to render this control's native chrome (the
       select's dropdown popup, in particular) using dark UI colors
       instead of the OS default light popup — better cross-browser
       support than trying to force option colors alone. */
    color-scheme: dark;
}
.filter-select option {
    background: var(--card-bg);
    color: var(--ink);
}
.filter-input:focus,
.filter-select:focus { outline: none; border-color: var(--gold-rule); }
.filter-input::placeholder { color: var(--ink-soft); }
.filter-submit {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase;
    background: var(--gold-btn); color: #0a0900;
    border: none; border-radius: var(--radius);
    padding: 0 20px; height: 38px; cursor: pointer;
    transition: background 0.12s;
}
.filter-submit:hover { background: var(--gold-bright); }

/* ── Results table ── */
.results-table-wrap {
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.results-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
    min-width: 860px;
}
.results-table thead th {
    text-align: left;
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--gold); border-bottom: 1px solid var(--gold-rule);
    padding: 12px 14px; white-space: nowrap;
}
.results-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-mid); vertical-align: middle;
}
.results-table tbody tr:last-child td { border-bottom: none; }
.results-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.row-link:hover { color: var(--gold); }
.row-sub { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }

.col-placing { text-align: right; white-space: nowrap; }
.placing-num { font-family: var(--font-display); font-weight: 700; color: var(--ink-mid); }
.placing-num.placing-top { color: var(--gold); }
.placing-pending { font-size: 0.75rem; color: var(--ink-soft); font-style: italic; }

.col-count { text-align: right; white-space: nowrap; color: var(--ink-soft); }

.overall-badge {
    display: inline-block;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px; white-space: nowrap; vertical-align: middle;
    margin-left: 6px; background: var(--gold-lt); color: var(--gold); border: 1px solid var(--gold-rule);
}
/* Pro Card icon sits to the left of the placing text, inside the same
   right-aligned col-placing cell — since it's the *first* thing in the
   cell rather than the last, the placing text itself (the actual thing
   that needs to line up row to row) still anchors to the same right
   edge whether or not a given row has the icon. */
.pro-card-icon {
    height: 16px; width: auto;
    vertical-align: middle; margin-right: 6px;
}

/* ── Pro Card summary panel (athlete.php only) — the headline achievement
   on this page, so it gets the boldest treatment: a gold gradient card
   with a glow, not just another info box. ── */
.pro-card-panel {
    background: linear-gradient(135deg, rgba(201,168,76,0.24) 0%, rgba(201,168,76,0.05) 100%);
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 28px;
    box-shadow: 0 4px 28px rgba(201,168,76,0.2), var(--shadow);
}
.pro-card-panel-title {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.6rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--gold-bright); margin-bottom: 16px;
}
.pro-card-panel-title .pro-card-icon {
    height: 38px; margin-right: 0;
    filter: drop-shadow(0 0 8px rgba(232,194,96,0.5));
}
.pro-card-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pro-card-list li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    font-size: 0.92rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--gold-rule); border-radius: var(--radius);
    padding: 10px 14px;
}
.pro-card-list li .pro-card-icon { height: 20px; margin-right: 2px; }
.pro-card-category { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.pro-card-sep { color: var(--gold); font-weight: 700; }
.pro-card-list .row-sub { display: inline; margin-top: 0; margin-left: 2px; }

/* Pro Card hero stat gets the gold-bright treatment instead of the
   standard gold hero-stat-num, so it pops among the other stats too. */
.hero-stat-num.pro-card-stat-num { color: var(--gold-bright); }

/* ── Pagination ── */
.pagination-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 18px; flex-wrap: wrap;
}
.page-link {
    font-size: 0.8rem; font-weight: 600; color: var(--gold);
    text-decoration: none; padding: 6px 12px; border-radius: var(--radius);
    border: 1px solid var(--gold-rule); transition: background 0.12s;
}
.page-link:hover { background: var(--gold-lt); }
.page-link-disabled {
    color: var(--ink-soft); border-color: var(--rule); cursor: default;
    opacity: 0.6;
}
.page-status { font-size: 0.78rem; color: var(--ink-soft); }

/* ── Responsive ── */
@media (max-width: 860px) {
    .filter-bar { grid-template-columns: 1fr 1fr; }
    .filter-submit { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .page-wrap-narrow,
    .page-wrap-wide { padding: 0 14px; }
    .filter-bar { grid-template-columns: 1fr; }
}