/* ─── AR Football Games v2 ────────────────────────────────────────────────── */

.arfg-app {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Dark header ─────────────────────────────────────────────────────────── */
.arfg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    color: #fff;
    padding: 14px 20px;
    border-radius: 6px 6px 0 0;
}
.arfg-header-icon  { font-size: 26px; line-height: 1; }
.arfg-header-title { font-size: 22px; font-weight: 800; flex: 1; }
.arfg-header-count { font-size: 13px; color: #aaa; white-space: nowrap; }

/* ── Controls bar ────────────────────────────────────────────────────────── */
.arfg-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: #1a1a1a;
    border-bottom: 2px solid #333;
}

.arfg-search {
    flex: 1;
    min-width: 200px;
    padding: 9px 14px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background: #2a2a2a;
    color: #eee;
    outline: none;
    box-sizing: border-box;
}
.arfg-search::placeholder { color: #777; }
.arfg-search:focus { background: #333; }

.arfg-class-select {
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    color: #eee;
    cursor: pointer;
    outline: none;
}

/* ── Programs table wrapper ──────────────────────────────────────────────── */
.arfg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Main programs table ─────────────────────────────────────────────────── */
.arfg-programs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.arfg-programs-table thead th {
    background: #f0f2f5;
    color: #444;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 9px 12px;
    border-bottom: 2px solid #d0d6e0;
    border-right: 1px solid #dde4f0;
    text-align: left;
    white-space: nowrap;
    user-select: none;
}
.arfg-programs-table thead th:last-child { border-right: none; }

th.sortable { cursor: pointer; }
th.sortable:hover { background: #e0e6f5; color: #1a4b8c; }
th.sort-asc, th.sort-desc { background: #d4dffa; color: #0d2f60; }

.sort-arrow { display: inline-block; margin-left: 3px; font-size: 10px; opacity: .5; }
th.sort-asc .sort-arrow, th.sort-desc .sort-arrow { opacity: 1; }

/* ── Column widths ───────────────────────────────────────────────────────── */
.col-code   { width: 80px; color: #888; font-size: 12px; }
.col-school { min-width: 160px; }
.col-nick   { min-width: 120px; color: #555; }
.col-coach  { min-width: 150px; }
.col-cls    { width: 60px; text-align: center; color: #555; }
.col-w      { width: 46px; text-align: center; font-weight: 600; }
.col-l      { width: 46px; text-align: center; font-weight: 600; }
.col-t      { width: 36px; text-align: center; color: #888; }
.col-pct    { width: 60px; text-align: center; }
.col-diff   { width: 60px; text-align: right; font-weight: 700; padding-right: 14px !important; }

/* ── Program rows ────────────────────────────────────────────────────────── */
.arfg-prog-row td {
    padding: 7px 12px;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
    vertical-align: middle;
    border-right: 1px solid #f0f2f5;
}
.arfg-prog-row td:last-child { border-right: none; }
.arfg-prog-row:nth-child(4n+3) td { background: #f9fafc; }
.arfg-prog-row:hover td,
.arfg-prog-row.is-open td { background: #edf3ff !important; }

/* ── School name button ──────────────────────────────────────────────────── */
.arfg-school-btn {
    background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700;
    color: #1a4b8c; padding: 0; text-align: left;
    transition: color .12s;
}
.arfg-school-btn:hover { color: #0d2f60; text-decoration: underline; }

/* Coach green color */
.col-coach { color: #1a6b2a; }

/* Diff +/- colors */
.diff-pos { color: #1a6b2a; }
.diff-neg { color: #c0392b; }

/* ── Detail row ──────────────────────────────────────────────────────────── */
.arfg-detail-row[hidden] { display: none; }
.arfg-detail-row > td {
    padding: 0;
    border-bottom: 3px solid #1a4b8c;
    background: #f0f4fb;
}
.arfg-detail-inner { padding: 0; }

.arfg-loading, .arfg-no-games {
    color: #888; font-style: italic; font-size: 13px; padding: 14px 20px;
}

/* ── Footer count ────────────────────────────────────────────────────────── */
.arfg-footer {
    padding: 8px 12px;
    font-size: 12px;
    color: #888;
    border-top: 1px solid #dde4f0;
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEAM DETAIL PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.arfp-wrap { background: #fff; }

.arfp-header {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 12px; padding: 14px 20px 10px;
    border-bottom: 1px solid #e0e6f0;
}
.arfp-title  { font-size: 20px; font-weight: 800; color: #0d2f60; }
.arfp-record { font-size: 15px; font-weight: 700; color: #1a4b8c; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.arfp-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 16px; background: #f5f7fc; border-bottom: 1px solid #dde4f0;
}
.arfp-tab {
    padding: 5px 14px; font-size: 12px; font-weight: 700;
    border: none; border-radius: 4px;
    background: #1a4b8c; color: #fff;
    cursor: pointer; transition: background .12s;
}
.arfp-tab:hover  { background: #163f7a; }
.arfp-tab.active { background: #0d2f60; }

/* ── Panels ──────────────────────────────────────────────────────────────── */
.arfp-panel[hidden]  { display: none; }
.arfp-scroll-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Season / summary table ──────────────────────────────────────────────── */
.arfp-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.arfp-summary-table thead th {
    background: #f0f4fb; color: #333;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; padding: 9px 12px;
    border-bottom: 2px solid #dde4f0; text-align: left; white-space: nowrap;
    user-select: none;
}
th.sortable-sum          { cursor: pointer; }
th.sortable-sum:hover    { background: #dde8f8; color: #1a4b8c; }
th.sort-asc, th.sort-desc { background: #d0dff7; color: #0d2f60; }

.arfp-th-exp { width: 36px; }
.arfp-th     {}

.arfp-summary-row td {
    padding: 8px 12px; border-bottom: 1px solid #eef0f5;
    background: #fff; vertical-align: middle;
}
.arfp-summary-row:nth-child(4n+3) td { background: #f9fafc; }
.arfp-summary-row:hover td { background: #f0f5ff !important; }

.arfp-expand-cell { width: 36px; text-align: center; }
.arfp-expand-btn {
    background: none; border: 1px solid #bbb; border-radius: 3px;
    cursor: pointer; font-size: 8px; color: #555;
    padding: 2px 5px; line-height: 1.4; transition: all .12s;
}
.arfp-expand-btn:hover { background: #e8f0fd; border-color: #1a4b8c; color: #1a4b8c; }

.arfp-season-cell { font-weight: 700; color: #1a4b8c; font-size: 14px; }
.arfp-coach-cell  { color: #1a6b2a; font-weight: 500; }
.arfp-name        { color: #1a6b2a; }
.arfp-region-cell { color: #444; }

.arfp-w   { text-align: center; font-weight: 600; }
.arfp-l   { text-align: center; font-weight: 600; }
.arfp-t   { text-align: center; color: #888; }
.arfp-pts { text-align: right;  font-variant-numeric: tabular-nums; padding-right: 20px !important; }
.arfp-champ {}

.badge-champ    { display:inline-block; background:#0d2f60; color:#fff; font-size:11px; font-weight:700; padding:2px 10px; border-radius:3px; }
.badge-playoffs { display:inline-block; font-size:12px; font-weight:700; color:#0d2f60; }

/* ── Sub rows ────────────────────────────────────────────────────────────── */
.arfp-sub-row[hidden] { display: none; }
.arfp-sub-row > td    { padding: 0; border-bottom: 2px solid #dde4f0; background: #edf3ff; }
.arfp-sub-inner       { padding: 14px 16px 18px; }

/* ── Individual game table ───────────────────────────────────────────────── */
.arfg-games-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
    background: #fff; border: 1px solid #dde4f0;
}
.arfg-games-table thead th {
    background: #1a4b8c; color: #fff;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; padding: 7px 10px; text-align: left; white-space: nowrap;
}
.arfg-games-table tbody tr   { border-bottom: 1px solid #eef0f5; }
.arfg-games-table tbody tr:last-child { border-bottom: none; }
.arfg-games-table tbody tr:nth-child(even) { background: #f8fafc; }
.arfg-games-table tbody tr:hover { background: #edf3ff; }
.arfg-games-table td { padding: 6px 10px; vertical-align: middle; }

.c-year   { width: 44px; color: #888; font-size: 12px; }
.c-week   { width: 80px; color: #555; font-size: 12px; }
.c-date   { min-width: 100px; white-space: nowrap; color: #555; font-size: 12px; }
.c-opp    { min-width: 150px; font-weight: 600; color: #111; }
.c-score  { width: 70px; font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.c-result { width: 42px; text-align: center; }
.c-loc    { width: 40px; text-align: center; }
.c-type   { min-width: 80px; }

.res-w { display:inline-block; background:#1a6b2a; color:#fff; font-weight:700; font-size:11px; padding:2px 7px; border-radius:3px; }
.res-l { display:inline-block; background:#c0392b; color:#fff; font-weight:700; font-size:11px; padding:2px 7px; border-radius:3px; }

.loc-h { color:#1a4b8c; font-weight:700; font-size:12px; }
.loc-a { color:#888;    font-weight:600; font-size:12px; }
.loc-n { color:#b8860b; font-weight:600; font-size:12px; }

.badge-playoff { display:inline-block; background:#7b0000; color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; white-space:nowrap; }
.badge-reg     { color:#aaa; font-size:11px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .col-code, .arfg-programs-table thead th.col-code { display: none; }
    .col-t,    .arfg-programs-table thead th.col-t    { display: none; }
    .col-cls,  .arfg-programs-table thead th.col-cls  { display: none; }
}
@media (max-width: 560px) {
    .col-nick, .arfg-programs-table thead th.col-nick { display: none; }
    .c-date,   .arfg-games-table thead th.c-date      { display: none; }
    .arfg-header-title { font-size: 17px; }
}