/* ============================================================================
   Shared, site-wide polish layer. Every template still keeps its own
   <style> block for page-specific layout -- this file only holds things
   that are genuinely cross-cutting: smoother interaction states (hover/
   focus/transitions) and the .star-btn favorites component, which appears
   on multiple pages (team_page, player_page, rankings.html, favorites.html)
   and would otherwise mean copy-pasting the same CSS into each one.

   Linked once from _navbar.html so every page that includes the navbar
   gets it automatically, the same way the navbar's own CSS/JS already
   works.
============================================================================ */

:root {
    --cream: #faf8f4; --cream-dark: #f0ece3; --paper: #ffffff;
    --rule: #ddd8ce; --rule-dark: #c8c2b4; --navy: #1a2744; --navy-mid: #2e3f6e;
    --maroon: #8b1a2a; --gold: #b8860b;
    --text: #1c1b18; --text-mid: #4a4740; --text-muted: #928e85;
    --green-soft: #e9f7ee; --green-text: #1e6b3a;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Defensive safety net: no page should ever show a page-level horizontal
   scrollbar. Every legitimate wide-content case on this site (stat
   tables, the sim's box scores, etc.) already scrolls inside its own
   .table-responsive/overflow-x:auto wrapper, not by letting <body> itself
   grow wider than the viewport -- so clipping overflow at the body level
   here can only hide something that was already a layout bug (like the
   navbar overflow this was written to guard against), never a feature. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Smoother, consistent interaction states -- applied broadly via element/
   class selectors so pages don't need to opt in per element. Scoped to
   properties that are cheap to animate (color/background/border/transform/
   box-shadow), never layout-affecting ones, so this can't introduce jank. */
a, button, .btn, select, input[type="text"], input[type="range"] {
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
                color 0.15s var(--ease), box-shadow 0.15s var(--ease),
                transform 0.12s var(--ease), opacity 0.15s var(--ease);
}

button:not(:disabled), .btn:not(:disabled), a[href] {
    cursor: pointer;
}

.btn:not(:disabled):active, button:not(:disabled):active {
    transform: scale(0.97);
}

/* Table rows already get page-specific hover backgrounds; this just adds a
   consistent, subtle lift so hover feedback feels the same everywhere. */
tbody tr { transition: background-color 0.12s var(--ease); }

/* ── Star / favorite button ──────────────────────────────────────────────
   Usage: <button class="star-btn" data-league="MBB" data-entity-type="team"
   data-entity-name="Duke Blue Devils">☆</button>
   favorites.js toggles the .favorited class and swaps the glyph on click. */
.star-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--rule-dark); background: var(--paper);
    color: var(--text-muted); font-size: 1.1rem; line-height: 1;
    padding: 0; cursor: pointer;
}
.star-btn:hover { border-color: var(--gold); color: var(--gold); }
.star-btn.favorited { border-color: var(--gold); color: var(--gold); background: #fff8e6; }
.star-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.star-btn.star-btn-sm { width: 26px; height: 26px; font-size: 0.9rem; }

/* Loading-state hook: fetch()-driven pages (rankings.html, game_sim.html)
   can add this class to a container while a request is in flight for a
   consistent, subtle "working" cue instead of an abrupt content swap. */
.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s var(--ease); }

/* ── Season multi-select filter dropdown ─────────────────────────────────
   Usage (see season_filter.js for the behavior it wires up):
   <div class="season-filter" id="someUniqueId">
     <button type="button" class="season-filter-trigger">
       <span class="season-filter-label">...</span> ▾
     </button>
     <div class="season-filter-menu">
       <label class="season-filter-option">
         <input type="checkbox" class="season-filter-all"> All Seasons
       </label>
       <div class="season-filter-divider"></div>
       <div class="season-filter-list">
         <label class="season-filter-option">
           <input type="checkbox" class="season-filter-item" name="..." value="2025"> 2025
         </label>
         ...
       </div>
       <input type="hidden" class="season-filter-all-hidden" name="..." value="All" disabled>
       <button type="submit" class="btn-apply-filters season-filter-apply">Apply</button>
     </div>
   </div>
   Used on performances.html and index.html (team rankings) -- both pages
   keep their own <button>/label styling via .btn-apply-filters, already
   defined per-page, so only the dropdown mechanics live here. */
.season-filter { position: relative; }
.season-filter-trigger {
    appearance: none; -webkit-appearance: none;
    background: var(--cream); border: 1.5px solid var(--rule-dark); border-radius: 5px;
    color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 500;
    padding: 7px 12px; cursor: pointer; min-width: 130px; text-align: left;
}
.season-filter-trigger:hover { border-color: var(--navy-mid); }
.season-filter-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    min-width: 200px; background: var(--paper); border: 1.5px solid var(--rule-dark); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.12); padding: 10px;
}
.season-filter-menu.open { display: block; }
.season-filter-option {
    display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500;
    text-transform: none; letter-spacing: normal; color: var(--text); padding: 4px 2px; cursor: pointer;
}
.season-filter-option input[type="checkbox"] { cursor: pointer; margin: 0; }
.season-filter-option:has(input:disabled) { color: var(--text-muted); }
.season-filter-divider { height: 1px; background: var(--rule); margin: 6px 0; }
.season-filter-list { max-height: 200px; overflow-y: auto; }
.season-filter-apply { width: 100%; margin-top: 8px; }

/* Shared "Apply" button styling for filter-bar forms (performances.html's
   stat filters, the season-filter dropdown's own Apply). Pages that
   already defined this locally (performances.html) keep working the same
   since the rule is identical -- this just means a page that ONLY uses the
   season-filter dropdown (index.html) doesn't need to redefine it. */
.btn-apply-filters {
    padding: 7px 16px; border-radius: 5px; font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border: none;
    background: var(--navy); color: #fff;
}
.btn-apply-filters:hover { background: var(--navy-mid); }
