:root {
  --brand-navy: #1b3358;
  --brand-navy-dark: #0d1a30;
  --brand-red: #c0392b;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }
.tab-body { min-height: 60vh; }
.nav-link { cursor: pointer; }
table { font-size: 0.92rem; }
.stat-pill { font-variant-numeric: tabular-nums; }
.matchup-card .win { color: #4ade80; font-weight: 600; }
.roster-card .starter { font-weight: 600; }
.roster-card .bench { opacity: 0.7; }
.pos-QB { color:#f87171; } .pos-RB { color:#4ade80; }
.pos-WR { color:#60a5fa; } .pos-TE { color:#fbbf24; }
.pos-K  { color:#c084fc; } .pos-DEF{ color:#94a3b8; }

/* ---- Brand ---- */
.text-brand { color: var(--brand-red); }
.nav-tabs .nav-link.active { border-color: var(--brand-red); border-bottom-color: transparent; color: var(--brand-red); }
.nav-tabs .nav-link:hover { border-color: var(--brand-red); color: var(--brand-red); }
a { color: var(--brand-red); }
a:hover { color: #e0574a; }

.btn-outline-brand {
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
  background: transparent;
}
.btn-outline-brand:hover {
  background: var(--brand-red);
  color: #fff;
}

/* ---- Responsive widths that used to be fixed inline styles ---- */
.league-select { min-width: 90px; max-width: 100%; }
@media (min-width: 480px) { .league-select { min-width: 160px; } }
@media (min-width: 576px) { .league-select { min-width: 240px; } }
#navToggle { flex: 0 0 auto; padding-left: 0.55rem; padding-right: 0.55rem; }

/* ---- Narrow phones: let the league select + menu toggle drop to their own
   row instead of clipping off-screen next to the brand ---- */
@media (max-width: 480px) {
  .navbar .container-fluid { flex-wrap: wrap; row-gap: 0.5rem; }
  .navbar .container-fluid > .ms-auto {
    margin-left: 0 !important;
    flex: 1 1 100%;
    justify-content: flex-end;
  }
}
.player-search-group { max-width: 100%; }
@media (min-width: 576px) { .player-search-group { max-width: 420px; } }

/* ---- Desktop: horizontally-scrollable tab strip instead of overflowing/wrapping ---- */
.nav-tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nav-tabs-scroll .nav-tabs { flex-wrap: nowrap; }
.nav-tabs-scroll .nav-link { white-space: nowrap; }

.navbar-brand#brandHome { cursor: pointer; }

/* ---- Mobile: tab strip collapses into a hamburger-triggered vertical menu ---- */
@media (max-width: 991.98px) {
  .nav-tabs-scroll {
    display: none;
    overflow-x: visible;
    margin-bottom: 0.75rem;
  }
  .nav-tabs-scroll.show { display: block; }
  .nav-tabs-scroll .nav-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    border-bottom: none;
  }
  .nav-tabs-scroll .nav-link {
    white-space: normal;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 0.375rem;
  }
  .nav-tabs-scroll .nav-link.active {
    background: rgba(192, 57, 43, 0.1);
  }
  /* Dropdown becomes an inline expand (not a popup) inside the stacked
     mobile menu -- the popup's fixed positioning is desktop-only, see the
     openDataDropdown() comment in app.js. */
  .nav-tabs-scroll .dropdown-menu {
    position: static;
    display: none;
    float: none;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 1rem;
    margin: 0;
  }
  .nav-tabs-scroll .dropdown-menu.show { display: block; }
}

/* ---- "Data" nav dropdown ---- */
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--brand-red);
  color: #fff;
}

/* ---- Home hero ---- */
.hero {
  padding: 3rem 1rem 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(160deg, #0b1220 0%, var(--brand-navy-dark) 55%, var(--brand-navy) 140%);
  border: 1px solid rgba(192, 57, 43, 0.35);
}
/* logo art has a white background/no transparency; a chip keeps it legible on the dark hero/navbar */
.navbar-brand img, .hero-logo {
  background: #fff;
  border-radius: 0.4rem;
  padding: 2px 6px;
}
.hero-logo { height: 90px; width: auto; margin-bottom: 1rem; padding: 8px 14px; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.hero-wordmark {
  font-family: 'Muli', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 2.75rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
.hero-tagline {
  font-family: 'Lato', sans-serif;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.hero-blurb {
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 575.98px) {
  .hero-logo { height: 64px; }
  .hero-wordmark { font-size: 2rem; }
  .hero-tagline { font-size: 1.1rem; }
}

.quick-links .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; }

/* ---- Collapsible section headers (Keepers, Dashboard KPIs, History) ---- */
.section-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.section-toggle-icon {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 0.8em;
}
.section-toggle[aria-expanded="true"] .section-toggle-icon { transform: rotate(90deg); }

/* ---- Dashboard KPI stat tiles (superlatives) ---- */
.stat-tile {
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  height: 100%;
}
.stat-tile .stat-tile-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
}
.stat-tile .stat-tile-value {
  font-size: 1.15rem;
  font-weight: 700;
}
.stat-tile .stat-tile-sub {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}
/* .stat-tile assumes a light background; override for use inside the dark
   .hero banner (Draft Weekend), where the default dark-on-navy text was
   unreadable. */
.hero .stat-tile {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}
.hero .stat-tile-label { color: rgba(255, 255, 255, 0.65); }
.hero .stat-tile-value, .hero .stat-tile-sub { color: #fff; }

/* ---- Export CSV links ---- */
.export-link { white-space: nowrap; }

.history-heading { font-family: 'Muli', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-red); }
.history-content p, .history-content li { line-height: 1.6; }
.history-list li { margin-bottom: 1rem; }

/* ---- Power Rankings (placeholder) ---- */
.power-rankings-placeholder,
.bylaws-placeholder {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px dashed rgba(192, 57, 43, 0.4);
  border-radius: 0.75rem;
  color: var(--bs-secondary-color);
}

/* ---- By-Laws: rendered markdown (Constitution + Dynasty proposal) ---- */
.markdown-content { line-height: 1.65; overflow-wrap: break-word; }
.markdown-content h1 { font-size: 1.75rem; margin-top: 0; }
.markdown-content h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(192, 57, 43, 0.25);
  color: var(--brand-red);
}
.markdown-content h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.markdown-content h2:first-child, .markdown-content h3:first-child { margin-top: 0; }
.markdown-content hr { border-color: rgba(192, 57, 43, 0.2); margin: 2rem 0; }
.markdown-content blockquote {
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--brand-red);
  background: rgba(192, 57, 43, 0.06);
  border-radius: 0 0.375rem 0.375rem 0;
  font-size: 0.92rem;
  color: var(--bs-secondary-color);
}
.markdown-content blockquote p { margin-bottom: 0.4rem; }
.markdown-content blockquote p:last-child { margin-bottom: 0; }
.markdown-content table {
  width: 100%;
  font-size: 0.88rem;
  border-collapse: collapse;
  margin: 1rem 0;
}
.markdown-content th, .markdown-content td {
  border: 1px solid rgba(var(--bs-body-color-rgb), 0.15);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.markdown-content th { background: rgba(192, 57, 43, 0.08); }
/* wide tables scroll on mobile instead of squeezing/overflowing the page */
.markdown-content table { display: block; overflow-x: auto; white-space: normal; }
.markdown-content code { font-size: 0.9em; }

/* ---- Dynasty proposal banner ---- */
.proposal-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(192, 57, 43, 0.4);
  border-radius: 0.5rem;
  background: rgba(192, 57, 43, 0.08);
}
.proposal-banner-title { font-weight: 700; }
.proposal-banner-sub { font-size: 0.85rem; color: var(--bs-secondary-color); }

/* ---- Draft Weekend 2026 (reuses .hero/.stat-tile/.history-heading/
   .btn-outline-brand -- these rules only cover what those don't) ---- */
.dw-rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin-bottom: 1rem;
}
.dw-countdown { margin-left: auto; color: #fff; font-weight: 700; }
.dw-countdown b { color: var(--brand-red); }
.dw-hero-title {
  font-family: 'Muli', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; font-size: 2.25rem; margin-bottom: 0.5rem;
}
@media (min-width: 576px) { .dw-hero-title { font-size: 2.75rem; } }
.dw-hero-sub { font-family: 'Lato', sans-serif; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; max-width: 40rem; margin-bottom: 0; }

.dw-day-btn { min-width: 5.5rem; }
.btn-outline-brand.active { background: var(--brand-red); color: #fff; }

.dw-events { border-top: 1px solid rgba(var(--bs-body-color-rgb), 0.12); }
.dw-event {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.15rem 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
}
.dw-event-time { font-size: 0.78rem; color: var(--bs-secondary-color); padding-top: 0.1rem; font-variant-numeric: tabular-nums; }
.dw-event-title { font-weight: 600; }
.dw-event-anchor .dw-event-time, .dw-event-anchor .dw-event-title { color: var(--brand-red); font-weight: 700; }
.dw-event-open .dw-event-title { color: #16a34a; }

.dw-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; }

.dw-readout { font-family: 'Muli', sans-serif; font-weight: 700; font-size: 2.75rem; line-height: 1; color: var(--brand-navy); }
.dw-card-tier { letter-spacing: 0.05em; }