/* ============================================================
   SFFL — app stylesheet
   Extracted from base.html's inline <style> and extended with a
   small design system. Keeps Tailwind (templates depend on it);
   this layer just modernizes the look and centralizes theming.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root {
  --bg:            #0d1320;
  --bg-elevated:   #1a2233;
  --bg-elevated-2: #232d42;
  --surface:       #1f2937;
  --border:        #313d52;
  --border-soft:   #2a3344;
  --text:          #dde3ec;
  --text-dim:      #95a1b3;
  --text-faint:    #6b7688;
  --accent:        #3b82f6;
  --accent-bright: #60a5fa;
  --accent-soft:   rgba(59, 130, 246, 0.14);
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #f87171;
  --radius:        10px;
  --radius-sm:     7px;
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.22);
}

/* ---- Base ------------------------------------------------- */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(59,130,246,.10), transparent 70%),
    radial-gradient(800px 480px at 100% 0%, rgba(139,92,246,.08), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }

/* Tasteful scrollbars */
* { scrollbar-width: thin; scrollbar-color: #38445c transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #38445c; border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #47566f; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Header / navigation ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 19, 32, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  margin: -0.75rem -0.75rem 1rem;
  padding: 0.6rem 0.9rem;
}
@media (min-width: 640px) {
  .site-header { margin: -1rem -1rem 1.25rem; padding: 0.7rem 1.1rem; }
}
.site-title { letter-spacing: -0.01em; }
.site-logo {
  height: 2.6rem; width: auto; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.nav-pills {
  display: flex; gap: 2px; width: max-content;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 4px;
}
.nav-pill {
  padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--text-dim); transition: all .15s ease;
}
.nav-pill:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-pill.is-active {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 2px 8px rgba(59,130,246,.4);
}

/* ---- Cards / panels --------------------------------------- */
/* Gently lift the gray panels the templates already use. */
.bg-gray-800, .bg-gray-900\/40, .bg-gray-700\/40 {
  box-shadow: var(--shadow-sm);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}

/* ---- Buttons (enhances Tailwind-styled buttons) ----------- */
button, .btn, a[class*="bg-blue-"], a[class*="bg-emerald-"] {
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
button:active, .btn:active { transform: translateY(1px); }
button:not(:disabled):hover, .btn:not(:disabled):hover { filter: brightness(1.08); }

/* ---- Forms ------------------------------------------------ */
input, select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ============================================================
   DataTables — dark theme  (migrated from base.html)
   ============================================================ */
table.dataTable tbody tr { background-color: var(--surface); transition: background-color .12s ease; }
table.dataTable tbody tr:nth-child(even) { background-color: #232c3e; }
table.dataTable tbody tr:hover { background-color: #2f3a4f !important; }

table.dataTable thead th {
  background-color: var(--bg-elevated);
  border-bottom: 2px solid var(--border);
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 11px; letter-spacing: .04em;
  position: sticky; top: 0;
}

.dataTables_wrapper input, .dataTables_wrapper select {
  background-color: var(--bg-elevated-2); color: #f3f4f6;
  border: 1px solid var(--border); padding: 5px 8px; border-radius: var(--radius-sm);
}
.dataTables_wrapper select option { background: var(--bg-elevated-2); color: #f3f4f6; }

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
  color: var(--text-dim) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--accent) !important; color: #fff !important;
  border: 1px solid var(--accent) !important; border-radius: 6px;
}

@media (max-width: 768px) {
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dataTables_wrapper table { min-width: 640px; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  .draft-year-view table { min-width: 920px; }
}

/* ---- Generic table utilities ------------------------------ */
td { border-bottom: 1px solid var(--border-soft); vertical-align: middle; }

.sb-year-view td, .sb-year-view th {
  padding-top: 0.15rem; padding-bottom: 0.15rem;
}
/* Hide legacy scroll hint text in scoreboard header */
.sb-year-view thead span.text-\[10px\].font-normal.text-gray-500 { display: none; }

.nav-active {
  border-bottom: 2px solid var(--accent-bright);
  color: #bfdbfe; font-weight: 700;
  background: var(--accent-soft);
  box-shadow: inset 0 -1px 0 rgba(147, 197, 253, 0.35);
}

/* ---- Charts ----------------------------------------------- */
#winsChart { max-height: 400px; }

/* ---- Live matchup widgets --------------------------------- */
.live-score-bubble { max-width: 100%; }
.live-matchup-header {
  position: sticky;
  top: var(--live-sticky-offset, 0px);
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  margin-left: -0.5rem; margin-right: -0.5rem;
  padding: 0.45rem 0.6rem;
  isolation: isolate;
}
.live-matchup-card { scroll-margin-top: calc(var(--live-sticky-offset, 4.5rem) + 0.75rem); }
.live-team-name { word-break: break-word; }
.live-player-row { min-height: 66px; }
.live-player-meta, .live-player-stats {
  min-height: 12px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .live-score-bubble { max-width: 42vw; padding: 0.4rem 0.7rem; border-radius: 0.45rem; }
  .live-score-values { gap: 0.3rem; }
  .live-score-value { font-size: clamp(0.85rem, 3.6vw, 1.05rem); }
  .live-score-dash { font-size: clamp(0.75rem, 3vw, 0.95rem); }
  .live-score-meta { font-size: 0.5rem; line-height: 1.1; }
  .live-matchup-header { padding: 0.35rem 0.5rem; }
  .live-team-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
  }
  .live-player-row { min-height: 56px; }
}

/* ---- Draft board ------------------------------------------ */
.draft-round-band-even { background: rgba(30, 41, 59, 0.35); }
.draft-round-band-odd  { background: rgba(15, 23, 42, 0.55); }
.draft-round-start td  { border-top: 2px solid rgba(148, 163, 184, 0.25); }
.draft-year-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.draft-year-view table { width: max-content !important; min-width: 100%; table-layout: auto; }
.draft-year-view th, .draft-year-view td { white-space: nowrap; }
.draft-year-view td.draft-player-name { white-space: nowrap; overflow: visible; text-overflow: clip; }