/* ============================================================
   SCOUT 4.0 — TEAM STATS AND PLAYER STATS

   This stylesheet controls both Scout statistics pages.
   The other pages use styles.css.

   Quick editing guide:
   - Page background: .scout4
   - Small brand label: .scout4 .eyebrow
   - Large page title: .scout4 header h1
   - Navigation buttons: .scout4 .page-nav a
   - Filter panel: .stats-filters
   - Player/team cards: .stats-card

   The brand wording is in templates/scout4_base.html.
   Colors can be names (gray, white) or hex codes (#1f2937).
   ============================================================ */


/* PAGE BACKGROUND AND CONTENT WIDTH */

.scout4 {
    margin: 0;
    background: gray;
    color: #172234;
    font-family: system-ui, -apple-system, sans-serif;
}

.scout4 main {
    max-width: 1250px;
    margin: auto;
    padding: 28px;
}


/* TITLES AND THE SMALL BRAND LABEL ABOVE THEM */

.scout4 .eyebrow {
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: black;
    text-align: center;
}

.scout4 header h1 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    margin: 0 0 30px;
    color: black;
    -webkit-text-stroke: 1px white; /* White outline around the letters. */
    font-weight: bolder;
    font-size: 50px;
    line-height: 1.15;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: black;
}

.scout4 h2 {
    font-size: 21px;
    text-shadow: none;
}


/* NAVIGATION — SAME BUTTON THEME AS THE OTHER PAGES */

.scout4 .page-nav {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap on narrow screens. */
    gap: 8px;
    justify-content: center;
    text-align: center;
    margin: 18px 0;
    margin-bottom: 20px;
}

.scout4 .page-nav a {
    background: #1f2937;
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-decoration: underline;
    text-decoration-color: white;
    text-underline-offset: 6px;
    border: 0.5px solid red;
    border-radius: 8px;
    font-size: 16px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-shadow: none;
}


/* FILTER PANEL — SEASON, TEAM, VENUE, PLAYER AND RANKING */

.stats-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    background: #1f2937;
    padding: 20px;
    border-radius: 12px;
    align-items: end;
}

.stats-filters label {
    display: flex;
    flex-direction: column; /* Places each label above its dropdown. */
    gap: 7px;
    font-weight: 600;
    font-size: 13px;
    min-width: 130px;
}

/* The page-specific selector keeps labels bold and white. */
.scout4 .stats-filters label {
    color: white;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
}

.stats-filters select {
    max-width: 270px;
    padding: 10px;
    border: 1px solid #4b5563;
    border-radius: 7px;
    background: #1f2937;
    color: white;
}

.scout4 .stats-filters select {
    font-weight: 500;
    text-shadow: none;
}

.stats-filters button {
    padding: 11px 20px;
    border: 0;
    border-radius: 7px;
    background: #254965;
    color: white;
    font-weight: 700;
    cursor: pointer;
}


/* INFORMATION PANEL BELOW THE FILTERS */

.stats-note {
    padding: 16px 20px;
    background: #1f2937;
    color: #f1f5f9;
    border-radius: 10px;
    margin: 18px 0;
    font-size: 13px;
}

.stats-note p {
    margin: 7px 0;
    line-height: 1.5;
}


/* TEAM AND PLAYER CARDS — GRID, CLOSED SUMMARY, EXPANDED CONTENT */

.stats-grid {
    display: grid;
    /* Cards fill the available width and stack on smaller screens. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 16px;
}

.stats-card {
    border-radius: 12px;
    background: #253247;
    color: #eef3fa;
    overflow: hidden;
    min-width: 0;
}

.scout4 .stats-card {
    box-shadow: none;
}

.stats-card summary {
    padding: 20px;
    cursor: pointer;
    list-style: none;
}

.stats-card summary::-webkit-details-marker {
    display: none;
}

.scout4 .stats-card summary {
    background: none;
}

.scout4 .stats-card summary:hover {
    background: #2d3e57;
}

.card-title {
    font-size: 20px;
    font-weight: 750;
    display: block;
}

.card-title small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #bfd0e2;
    margin-top: 5px;
}

.stats-inline {
    display: block;
    font-size: 14px;
    margin: 12px 0;
}

.expand-label {
    color: #f8d575;
    font-size: 12px;
}

.card-body {
    padding: 0 20px 20px;
}

.stats-card article,
.stats-card > h3,
.stats-card > p {
    margin: 20px;
}

.stats-card p {
    font-size: 13px;
    line-height: 1.5;
}

.stats-card h3 {
    font-size: 15px;
}

.stats-card small {
    color: #bfd0e2;
}


/* STATISTICS TABLES AND GAME LOGS */

.table-scroll {
    overflow: auto; /* Wide tables scroll inside the card. */
}

.stats-card table {
    width: 100%;
    border-collapse: collapse;
    color: inherit;
    font-size: 12px;
    background: transparent;
}

.stats-card td,
.stats-card th {
    padding: 9px 7px;
    border-bottom: 1px solid #485870;
    text-align: left;
    white-space: nowrap;
    background: transparent;
    color: inherit;
}

.stats-card th {
    color: #cbd7e7;
}

.scout4 .stats-card table,
.scout4 .stats-card th,
.scout4 .stats-card td {
    border-radius: 0;
    text-shadow: none;
}


/* TOP 10 LEADERBOARDS AND PAGE LINKS */

.player-leaderboard {
    margin: 24px 0 32px;
}

.leader-total {
    display: block;
    color: #f8d575;
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
}

.stats-pagination {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}


/* FOOTER */

.scout4 footer {
    font-size: 12px;
    color: #56687c;
    margin-top: 30px;
}


/* SMALL SCREENS — APPLIES AT WIDTHS OF 600px OR LESS */

@media (max-width: 600px) {
    .scout4 main {
        padding: 14px;
    }

    .stats-filters label {
        min-width: calc(50% - 12px);
    }

    .stats-filters select {
        max-width: 100%;
        width: 100%;
    }

    .stats-filters button {
        width: 100%;
    }
}

/* Keep source-note links readable on the shared dark theme. */
.stats-note a { color: #fbbf24; }
.stats-note summary { font-weight: 700; cursor: pointer; }