/* ============================================================
   Theme.css - Responsive broadcast-style theme for the public
   consumption pages (Default, DivisionDetails, TeamDetails,
   Schedule, Rules).

   EVERYTHING is scoped under  body.igaa-theme  so the shared
   master page and the shared schedule generator never affect
   the login-protected pages (Results, DivisionScheduler,
   RefSchedulePage, UploadTeamLogos, Restore).

   Design goals:
     - Dark, professional, high-contrast.
     - Mobile-first: NO background photo on phones (readability).
     - Desktop (>=992px): subtle field.jpg behind a dark veil.
     - Neutral GREY accent (--accent) so it never competes with a
       division that may use gold.
     - Each division keeps its own color for panel borders/headers
       (those colors are emitted inline by the generators, so they
       win over these rules automatically).
   ============================================================ */

body.igaa-theme {
    /* ---- Neutral grey accent + dark palette --------------- */
    --accent: #9aa3ad;          /* neutral grey chrome accent      */
    --accent-strong: #c2c9d1;   /* brighter grey for hover/emphasis*/
    --stage-top: #14181f;       /* dark stage gradient (mobile)    */
    --stage-bottom: #0a0d12;
    --panel-bg: rgba(22, 27, 34, 0.82);   /* translucent card bg  */
    --panel-bg-solid: #161b22;
    --panel-border: rgba(154, 163, 173, 0.28);
    --text-main: #e8eaed;       /* near-white body text            */
    --text-muted: #aeb4bd;      /* secondary text                  */
    --win-green: #4ade80;       /* high-contrast win color on dark */

    color: var(--text-main);
    background-color: var(--stage-bottom);
    background-image: linear-gradient(160deg, var(--stage-top) 0%, var(--stage-bottom) 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Desktop only: layer the field photo behind a dark veil so text
   stays readable. Phones intentionally keep the flat dark gradient. */
@media (min-width: 992px) {
    body.igaa-theme {
        background-image:
            linear-gradient(rgba(10, 13, 18, 0.88), rgba(10, 13, 18, 0.93)),
            url('../img/field.jpg');
        background-size: cover;
        background-position: center top;
        background-attachment: fixed;
    }
}

/* ---------- General typography / inherited content ---------- */
body.igaa-theme .body-content {
    color: var(--text-main);
}

body.igaa-theme h1,
body.igaa-theme h2,
body.igaa-theme h3,
body.igaa-theme h4,
body.igaa-theme h5,
body.igaa-theme h6 {
    color: var(--text-main);
}

/* Page-level section title (e.g. "Schedule") gets a grey underline */
body.igaa-theme > .container-fluid + .body-content h2 {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
}

/* ---------------- Navbar / brand band ----------------------- */
/* The navbar already uses bg-dark (#222); add a neutral grey
   accent rule so the public pages read as a polished broadcast
   header without altering the protected pages. */
body.igaa-theme nav.navbar {
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   STANDINGS (Default.aspx)  ->  .flex-container / .flex-item
   The generator emits each division as a .flex-item with an
   inline  border:2px solid <DivisionColor>  and an inner header
   div with the division background color. We only restyle the
   card body so the division color keeps owning the border/header.
   ============================================================ */
body.igaa-theme .flex-container {
    color: var(--text-main);
}

body.igaa-theme .flex-item {
    background-color: var(--panel-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    color: var(--text-main);
}

/* Standings card text inherits near-white by default, but the
   division TITLE bar sets its own color (the division ForeColor)
   on its wrapper, so the title h4 must inherit that instead of
   being forced to near-white. The "Match results" h4 and the team
   h5/h6 rows are direct children of .flex-item and still inherit
   the near-white body text. */
body.igaa-theme .flex-item > div h4 {
    color: inherit;
}

/* Winning result needs a brighter green than forestgreen on dark */
body.igaa-theme .winningteamresult {
    color: var(--win-green);
}

/* ============================================================
   DIVISION DETAILS / TEAM DETAILS  ->  table.table / .table-bordered
   Bootstrap forces dark cell text; override for the dark stage.
   Division-colored <h4> headers are emitted inline, so they win.
   ============================================================ */
body.igaa-theme .table {
    color: var(--text-main);
    background-color: var(--panel-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

body.igaa-theme .table th,
body.igaa-theme .table td {
    color: var(--text-main);
    border-color: var(--panel-border) !important;
}

body.igaa-theme .table thead th {
    background-color: rgba(154, 163, 173, 0.14);
    border-bottom: 2px solid var(--accent);
    color: var(--text-main);
}

body.igaa-theme .table-bordered,
body.igaa-theme .table-bordered th,
body.igaa-theme .table-bordered td {
    border: 1px solid var(--panel-border);
}

/* Subtle zebra striping for readability on dense stat tables */
body.igaa-theme .table tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* The "* Record displays..." footnote text under the tables */
body.igaa-theme .body-content {
    color: var(--text-main);
}

/* ============================================================
   SCHEDULE (Schedule.aspx)  ->  RenderPublicScheduleShow output
   A responsive, rem-based adaptation of the broadcast schedule
   (templates/full_schedule.txt / FritzTVPages\Schedule.htm): the
   same pills, division color key, fonts and colors, but fluid so
   it reads well on phones. Match chips and legend chips carry
   their division color inline, so those colors win automatically.
   ============================================================ */
body.igaa-theme .sched_show {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.igaa-theme .sched_show .panel_fullsched {
    padding: 1.4rem 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
    background: rgba(0, 0, 0, 0.78);
    border: 3px solid var(--accent);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

body.igaa-theme .sched_show .panel_title {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 1.1rem 0;
    color: var(--text-main);
}

/* Horizontal scroll so a wide multi-field grid stays usable on phones */
body.igaa-theme .sched_show .fullsched_scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.igaa-theme .sched_show .fullsched_table {
    width: 100%;
    min-width: 540px;
    border-collapse: separate;
    border-spacing: 0.5rem 0.45rem;
    font-variant-numeric: tabular-nums;
}

body.igaa-theme .sched_show .fullsched_table th {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 0 0.35rem 0.5rem 0.35rem !important;
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
    background: transparent;
}

body.igaa-theme .sched_show .fullsched_table th.col_time {
    width: 4.5rem;
}

body.igaa-theme .sched_show .fullsched_table td {
    text-align: center;
    vertical-align: middle;
    padding: 0 !important;
    border: 0;
}

body.igaa-theme .sched_show .sched_time {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

body.igaa-theme .sched_show .match_chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}

body.igaa-theme .sched_show .match_chip .vs {
    font-weight: 400;
    opacity: 0.7;
    padding: 0 0.2rem;
}

body.igaa-theme .sched_show .match_officials {
    font-size: 0.78rem;
    font-weight: 400;
    opacity: 0.85;
}

body.igaa-theme .sched_show .sched_empty {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
}

body.igaa-theme .sched_show tr.sched_past td {
    opacity: 0.85;
}

body.igaa-theme .sched_show tr.sched_now {
    background: rgba(255, 255, 255, 0.12);
}

body.igaa-theme .sched_show .now_chip {
    display: block;
    width: max-content;
    margin: 0.3rem auto 0;
    padding: 0.05rem 0.7rem;
    border-radius: 999px;
    background: var(--accent);
    color: #1a1408;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
}

body.igaa-theme .sched_show .legend_band {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 0.8rem;
    margin-bottom: 1.2rem;
}

body.igaa-theme .sched_show .legend_chip {
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

body.igaa-theme .sched_show .footer_band {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1rem;
    background: rgba(0, 0, 0, 0.82);
    border-top: 3px solid var(--accent);
    border-radius: 0 0 10px 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* "Show referees" label + schedule heading legibility */
body.igaa-theme label[for='checkbox_refs'] {
    color: var(--text-main);
}

/* ============================================================
   RULES (Rules.aspx)  ->  static markup wrapped in .igaa-panel
   ============================================================ */
body.igaa-theme .igaa-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: var(--text-main);
}

body.igaa-theme .igaa-panel h2,
body.igaa-theme .igaa-panel h3 {
    color: var(--text-main);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px;
}

body.igaa-theme .igaa-panel a {
    color: var(--accent-strong);
}

/* ---------------- Links inside content ---------------------- */
/* .teamlink / .divlink already use color:inherit so they pick up
   the near-white text. Make their underline use the grey accent
   only within the themed pages. */
body.igaa-theme a.teamlink,
body.igaa-theme a.teamlink:link,
body.igaa-theme a.teamlink:visited {
    text-decoration-color: var(--accent) !important;
}

body.igaa-theme a.teamlink:hover {
    text-decoration-color: var(--accent-strong) !important;
}

body.igaa-theme a.divlink:hover {
    text-decoration-color: var(--accent-strong) !important;
}

/* fade_upRank / fade_downRank (live rank changes) already read
   well on the dark stage (solid green/red flashing to transparent)
   so they are intentionally left unchanged. */

/* ============================================================
   BROADCAST-STYLE DETAIL PANELS (DivisionDetails / TeamDetails)
   Adapts templates/division_details.txt (the FritzTVPages look)
   from fixed 4K pixels to responsive rem so the public pages echo
   the broadcast aesthetic. Each panel reads its division color
   from the --division-color custom property the generator emits.
   ============================================================ */
body.igaa-theme .igaa-detail-panel {
    --division-color: var(--accent);
    position: relative;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1.6rem;
    background: rgba(0, 0, 0, 0.78);
    border: 3px solid var(--division-color);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.igaa-theme .igaa-panel-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    color: var(--text-main);
}

/* Horizontal scroll for wide stat tables on narrow phones */
body.igaa-theme .igaa-stats-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Broadcast stats table -------------------------------------- */
body.igaa-theme .igaa-stats {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
    background: transparent;
}

body.igaa-theme .igaa-stats thead th {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: 0.2rem 0.7rem 0.6rem 0.7rem;
    border-bottom: 2px solid var(--division-color);
    white-space: nowrap;
    background: transparent;
}

body.igaa-theme .igaa-stats thead th.col_team {
    text-align: left;
}

/* Override the global td{padding:3px!important} for these tables */
body.igaa-theme .igaa-stats td,
body.igaa-theme .igaa-stats th[scope='row'] {
    font-size: 1.05rem;
    padding: 0.55rem 0.7rem !important;
    margin: 0 !important;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}

body.igaa-theme .igaa-stats tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.05);
}

body.igaa-theme .igaa-stats td.stat_team {
    text-align: left !important;
    white-space: nowrap;
}

/* Rank chips ------------------------------------------------- */
body.igaa-theme .rank_chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

body.igaa-theme .rank_gold {
    background: linear-gradient(135deg, #b08d2f, #e8c869);
    color: #1a1408;
}

body.igaa-theme .rank_silver {
    background: linear-gradient(135deg, #8e9499, #d9dde1);
    color: #15181a;
}

body.igaa-theme .rank_bronze {
    background: linear-gradient(135deg, #8a5a2b, #c98e54);
    color: #190f06;
}

/* Team cell: logo + name (+ champ chip) ---------------------- */
body.igaa-theme .team_cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

body.igaa-theme .team_logo {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    object-fit: contain;
}

body.igaa-theme .team_name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.igaa-theme .champ_chip {
    flex: none;
    margin-left: 0.4rem;
    padding: 0.1rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #b08d2f, #e8c869);
    color: #1a1408;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Signed score-differential coloring ------------------------- */
body.igaa-theme .diff_pos {
    color: #86d986;
}

body.igaa-theme .diff_neg {
    color: #e89090;
}

/* Small footnote under a stats table (e.g. the "* Record..." note) */
body.igaa-theme .igaa-table-footnote {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* "of N" qualifier next to the rank chip on the team status row */
body.igaa-theme .rank_of {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Whole-row rank-change flash on the broadcast-style tables.
   The page JS swaps the Team_<d>_<t>_<r> token on the <tr> for
   fade_upRank / fade_downRank. */
body.igaa-theme .igaa-stats tbody tr.fade_upRank {
    animation: fadeRankUp 3s ease-out forwards;
}

body.igaa-theme .igaa-stats tbody tr.fade_downRank {
    animation: fadeRankDown 3s ease-out forwards;
}

@keyframes fadeRankUp {
    from { background-color: rgba(34, 197, 94, 0.85); }
    to { background-color: transparent; }
}

@keyframes fadeRankDown {
    from { background-color: rgba(239, 68, 68, 0.85); }
    to { background-color: transparent; }
}

/* ============================================================
   TEAM DETAILS HERO (TeamDetails.aspx)
   A polished, professional page header: the team logo sits on a
   clean rounded backplate beside the team name, with a slim
   division-colored accent bar and a breadcrumb back to the
   division. Reads its division color from --division-color.
   ============================================================ */
body.igaa-theme .igaa-team-hero {
    --division-color: var(--accent);
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 100%);
    border: 1px solid var(--panel-border);
    border-left: 8px solid var(--division-color);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.igaa-theme .igaa-team-hero-logo {
    flex: none;
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
}

body.igaa-theme .igaa-team-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

body.igaa-theme .igaa-team-hero-crumb {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.igaa-theme .igaa-team-hero-crumb a {
    color: var(--text-muted);
    text-decoration: none;
}

body.igaa-theme .igaa-team-hero-crumb a:hover {
    color: var(--text-main);
}

body.igaa-theme .igaa-team-hero-name {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.1;
    color: var(--text-main);
}

/* Division-colored section headers inside the detail panels keep
   their inline background color (emitted by the generator) but get
   broadcast spacing/weight here. */
body.igaa-theme .igaa-section-head {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0.5rem 0.9rem;
    border-radius: 10px 10px 0 0;
    margin: 0 0 0.9rem 0;
}

/* On small screens stack the hero so the logo sits above the name */
@media (max-width: 575px) {
    body.igaa-theme .igaa-team-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    body.igaa-theme .igaa-team-hero-name {
        font-size: 1.7rem;
    }
}