/* ══════════════════════════════════════════════════════════
   LEAGUE HUB — SHARED DESIGN SYSTEM
   ══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;900&family=Barlow:wght@400;500;600&display=swap');

/* ── THEME ───────────────────────────────────────────
   Two themes, one token set. Dark (this block, the default — no
   [data-theme] attribute needed) and light (the override block right
   below). Toggled by app.js's theme switch, which sets
   documentElement.dataset.theme and persists the choice — see
   THEME_KEY in app.js. Everything downstream of this file is written
   against these variables, never a literal color, so both themes stay
   in sync automatically as components change.

   --btn-primary-* exists separately from --accent on purpose: dark
   theme's primary button is an amber fill (pairs with --accent
   directly), but light theme's primary button is a dark slate fill
   with white text — a genuinely different color, not a lighter/darker
   shade of the same one, so it needs its own token rather than
   reusing --accent for two unrelated jobs. */
:root {
  /* Third brightening pass (2026-08-27) — lighter still than the
     previous #2a3142, on direct request ("miss the dark theme" but
     "make it much lighter slate"). Same navy-leaning hue and
     saturation as before, just shifted up in lightness across the
     whole scale — still unmistakably a dark theme, just airier. */
  --bg:      #454e68;
  --surface: #4c5670;
  --card:    #525c7a;
  --card2:   #5a6484;
  --border:  #6b7597;
  --border2: #7883a6;
  --accent:  #f5a623;
  --accent2: #ffbe55;
  --btn-primary-bg:    #f5a623;
  --btn-primary-text:  #111111;
  --btn-primary-hover: #ffbe55;
  --green:   #34d399;
  --red:     #f87171;
  --blue:    #60a5fa;
  --purple:  #a78bfa;
  --orange:  #fb923c;
  --gold:    #fbbf24;
  --silver:  #94a3b8;
  --bronze:  #c2763a;
  --text:    #f5f7fc;
  --text2:   #cdd4e8;
  --muted:   #98a2c2;
  --r: 10px;
  --r2: 14px;
  --shadow-btn: none;
  --shadow-btn-hover: 0 0 0 1px rgba(245,166,35,.4);
  --shadow-card: none;
}

:root[data-theme="light"] {
  /* Warm light grey, not a flat neutral — carries a faint bias toward
     the amber accent so it reads as chosen rather than default. White
     cards give clear separation from the grey page underneath them,
     the way the dark theme's lighter card-vs-bg layering already
     works. --accent is deepened from the dark theme's bright #f5a623
     — that bright amber fails contrast as text/links on a light
     background, so this theme uses a darker amber everywhere accent
     shows up as text (links, badges, active tab), and a separate
     bright fill only for the primary button. Semantic colors
     (green/red/blue/purple/gold/silver/bronze/orange) are similarly
     deepened — the dark theme's pastel-bright versions were tuned for
     text on a dark ground and wash out here. */
  --bg:      #edeae2;
  --surface: #f6f4ee;
  --card:    #ffffff;
  --card2:   #faf8f3;
  --border:  #ddd6c6;
  --border2: #c9c0a9;
  --accent:  #b5700d;
  --accent2: #925c0a;
  --btn-primary-bg:    #2f3648;
  --btn-primary-text:  #f4f2ea;
  --btn-primary-hover: #3c4459;
  --green:   #0d8f5f;
  --red:     #d1392c;
  --blue:    #2563a8;
  --purple:  #7c4fd6;
  --orange:  #c2540c;
  --gold:    #a3790a;
  --silver:  #64708c;
  --bronze:  #96562a;
  --text:    #2b2718;
  --text2:   #6f6a56;
  --muted:   #a39c85;
}
/* Deepened green/blue fills (above) need light text now instead of
   the dark theme's #111 — a light override at the component level,
   not a token, since only these two buttons' text color flips. */
:root[data-theme="light"] .btn-success,
:root[data-theme="light"] .btn-blue { color: #fff; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

h1, h2, h3, h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
h1 em, h2 em { font-style: normal; color: var(--accent); }

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 2px solid var(--accent);
  height: 58px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--accent);
  white-space: nowrap;
}
.logo span { color: var(--text); }
.topbar-spacer { flex: 1; }
.topbar-nav { display: flex; gap: 6px; align-items: center; }

/* ── BUTTONS ─────────────────────────────────────────── */
/* Bright, saturated fills against the dark background do the work
   of "standing out" here — no drop shadow needed the way a light
   background would need one. */
.btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-ghost { background: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--border2); }
.btn-outline { background: transparent; border: 1px solid var(--border2); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-success { background: var(--green); color: #111; }
.btn-danger { background: var(--red); color: #fff; }
.btn-blue { background: var(--blue); color: #111; }
.btn-sm { padding: 7px 14px; font-size: .74rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* ── LAYOUT ──────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 480px; margin: 0 auto; padding: 0 24px; }
main { padding: 40px 0 80px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.flex-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ── CARDS / FORMS ───────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.card2 { background: var(--card2); border: 1px solid var(--border2); border-radius: var(--r); padding: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-fixed { flex: 0 0 auto; }
label { font-size: .68rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text2); }
input, select, textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 11px 13px;
  font-family: 'Barlow', sans-serif;
  font-size: .92rem;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
/* The width:100%/padding above is for text fields — checkboxes and
   radios must opt out or they render as full-width padded boxes on
   mobile Safari/Android (Chrome ignores width on native controls, so
   this bug hides on desktop). .checkbox-row patched this locally; do
   it globally so bare checkboxes (sports-interest pills etc.) are safe. */
input[type=checkbox], input[type=radio] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  flex: none;
  accent-color: var(--accent);
}
.hint { font-size: .76rem; color: var(--muted); margin-top: 4px; }
.tip { font-size: .78rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.error-text { font-size: .78rem; color: var(--red); margin-top: 4px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.checkbox-row input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.checkbox-row label { font-size: .84rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.5; }

/* ── BADGES ──────────────────────────────────────────── */
/* color-mix() ties the tint directly to the CSS variable, so these
   automatically follow the palette instead of being hardcoded to
   whatever hex happened to be picked once (that mismatch was a real
   bug found earlier — fixed here regardless of which theme is live). */
.badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.badge-green  { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.badge-yellow { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.badge-red    { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.badge-blue   { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); }
.badge-purple { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purple); }
.badge-muted  { background: rgba(90,104,136,.2); color: var(--text2); }

/* ── TOAST ───────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--card2); border: 1px solid var(--border2); border-left: 3px solid var(--green); color: var(--text); font-size: .86rem; padding: 12px 16px; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.5); max-width: 340px; animation: toastIn .2s ease; }
.toast.err { border-left-color: var(--red); }
.toast.warn { border-left-color: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state .empty-icon { font-size: 2.6rem; display: block; margin-bottom: 12px; }

/* ── TABS ────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
.tab-btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .84rem; letter-spacing: 1px; text-transform: uppercase; padding: 10px 16px; background: none; border: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── LEAGUE CARD ─────────────────────────────────────── */
.league-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; }
.league-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: 18px; transition: border-color .15s; }
.league-card:hover { border-color: var(--border2); }
.league-card-sport { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.1rem; letter-spacing: .5px; margin-bottom: 4px; }
.league-card-meta { font-size: .8rem; color: var(--text2); margin: 3px 0; }
.league-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }

/* ── AUTH PAGES ──────────────────────────────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-box { width: 100%; max-width: 420px; }
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo .logo { font-size: 2rem; }
.auth-title { text-align: center; font-size: 1.3rem; margin-bottom: 6px; }
.auth-sub { text-align: center; color: var(--text2); font-size: .88rem; margin-bottom: 24px; }
.auth-footer { text-align: center; margin-top: 18px; font-size: .86rem; color: var(--text2); }

/* ── DIVIDER ─────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ── MISC ────────────────────────────────────────────── */
.center { text-align: center; }
.mt { margin-top: 14px; }
.mt2 { margin-top: 24px; }
.gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

footer { border-top: 1px solid var(--border); padding: 24px 0; margin-top: 60px; }
.footer-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — players mostly check schedules/standings from
   a phone, so everything below has to stay usable at ~360px.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .wrap, .wrap-narrow { padding: 0 14px; }
  main { padding: 24px 0 60px; }

  /* Topbar collapses: logo stays, nav wraps underneath */
  .topbar {
    height: auto;
    min-height: 58px;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }
  .logo { font-size: 1.25rem; letter-spacing: 2px; }
  /* flex-wrap here (not just on .topbar above) matters once there are
     5-6 nav items (signed-in + admin) — without it, every button
     gets squeezed into one row and the text goes illegibly small. */
  .topbar-nav { width: 100%; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
  .topbar-nav .btn { flex: 1 1 auto; min-width: 84px; justify-content: center; padding: 8px 10px; font-size: .7rem; }

  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.2rem !important; }

  .card { padding: 15px; }
  .grid2 { grid-template-columns: 1fr; }

  /* Tabs scroll horizontally instead of squashing */
  .tabs { gap: 2px; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: 9px 12px; font-size: .76rem; }

  .league-grid { grid-template-columns: 1fr; }

  /* Touch targets: keep buttons finger-sized */
  .btn { padding: 11px 18px; }
  .btn-sm { padding: 9px 14px; font-size: .74rem; }

  /* Stack the flex-between header rows rather than cramming */
  .flex-between { flex-direction: column; align-items: flex-start; }
  .flex-end { justify-content: stretch; }
  .flex-end .btn { flex: 1; justify-content: center; }

  /* Inputs at 16px prevents iOS Safari auto-zooming on focus */
  input, select, textarea { font-size: 16px; }

  #toast-container { left: 14px; right: 14px; bottom: 14px; }
  .toast { max-width: none; }

  table { font-size: .78rem; }
  table th, table td { padding: 6px 5px !important; }
}

@media (max-width: 420px) {
  .logo { font-size: 1.1rem; letter-spacing: 1px; }
  .empty-state { padding: 32px 12px; }
  .empty-state .empty-icon { font-size: 2.1rem; }
}