/* Vital Team Stats — colours + font extracted 1:1 from the Gradio default
   theme (dark mode), so the standalone site matches the Hugging Face Space.
   Resolved Gradio variables (gr.themes.Default, *_dark):
     body_background_fill   = neutral_950           = #0f0f11
     block_background_fill  = neutral_800           = #27272a
     table_even_background  = neutral_950           = #0f0f11
     table_odd_background   = neutral_900           = #18181b
     border_color_primary   = neutral_700           = #3f3f46
     body_text_color        = neutral_100           = #f4f4f5
     body_text_subdued      = neutral_400           = #bbbbc2
     block_label_text       = neutral_200           = #e4e4e7
     color_accent (primary) = primary_500           = #f97316
     button_secondary_bg    = neutral_600           = #52525b
     button_secondary_hover = neutral_700           = #3f3f46
     font                   = 'Source Sans Pro', ui-sans-serif, system-ui   */

/* Gradio ships Source Sans Pro locally; pull the same family from a web font
   so the standalone site renders in the identical typeface. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  --body-background:        #0f0f11;   /* neutral_950 */
  --surface:                #27272a;   /* neutral_800  (blocks) */
  --surface-even:           #0f0f11;   /* neutral_950  (inputs / even rows) */
  --surface-odd:            #18181b;   /* neutral_900  (odd rows) */
  --border:                 #3f3f46;   /* neutral_700 */
  --border-subtle:          rgba(255, 255, 255, 0.09);
  --text:                   #f4f4f5;   /* neutral_100 */
  --text-muted:             #bbbbc2;   /* neutral_400 */
  --text-label:             #e4e4e7;   /* neutral_200 */
  --accent:                 #f97316;   /* primary_500 (orange) */
  --accent-soft:            #3f3f46;   /* color_accent_soft_dark = neutral_700 */
  --btn-secondary:          #52525b;   /* neutral_600 */
  --btn-secondary-hover:    #3f3f46;   /* neutral_700 */
  --hover:                  rgba(255, 255, 255, 0.05);
  --radius:                 4px;       /* radius_sm — blocks/tables/inputs */
  --radius-btn:             6px;       /* radius_md — buttons */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--body-background);
  color: var(--text);
  font-family: 'Source Sans 3', 'Source Sans Pro', ui-sans-serif, system-ui,
               -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

h1 { font-size: 2.1em; margin: 0 0 2px; font-weight: 600; color: var(--text); }
h2 { font-size: 1.45em; margin: 26px 0 10px; font-weight: 600; color: var(--text); }
h3 { font-weight: 600; color: var(--text); }
h5 { font-size: 0.95em; margin: 0; color: var(--text-muted); font-weight: 600; }

.hint { color: var(--text-muted); margin: 4px 0 14px; }
.hint b { color: var(--text); }

/* Header + server picker */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.server-pick { max-width: 240px; min-width: 200px; }
.server-pick label,
.dark-select label {
  display: block;
  font-size: 0.8em;
  color: var(--text-label);
  margin-bottom: 4px;
}
.server-pick select,
.dark-select select {
  width: 100%;
  background: var(--surface-even);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.95em;
  outline: none;
  cursor: pointer;
}
.server-pick select:focus,
.dark-select select:focus { border-color: var(--accent); }

.status { color: var(--text); margin: 4px 0 6px; }
.status .picked { font-style: italic; }
.status .pt-note { color: var(--text-muted); font-style: italic; font-size: 0.9em; }

/* Totals */
.totals-row { display: flex; flex-wrap: wrap; gap: 16px; }
.totals-col { flex: 1 1 200px; min-width: 200px; }

/* Tables */
table.stats {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.92em;
}
table.stats th,
table.stats td {
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
table.stats th:last-child,
table.stats td:last-child {
  border-right: none;
}
table.stats thead th {
  background: var(--surface-even);
  color: var(--text);
  font-weight: 600;
  position: sticky;
  top: 0;
}
/* Header label + fixed-width sort arrow. The arrow column is always reserved
   (even when empty) so toggling a sort never changes the column width. */
.th-label { vertical-align: middle; }
.th-arrow {
  display: inline-block;
  width: 14px;            /* always reserved */
  margin-left: 4px;
  text-align: center;
  font-size: 1.05em;      /* a touch bigger */
  font-weight: 700;       /* a touch thicker */
  line-height: 1;
  color: var(--accent);   /* orange arrow stands out subtly */
  vertical-align: middle;
}
table.stats tbody tr                { background: var(--surface-even); }
table.stats tbody tr:nth-child(odd) { background: var(--surface-odd); }
table.stats tbody tr:last-child td  { border-bottom: none; }

#explorer-col table.stats thead th,
#player-detail table.stats thead th {
  cursor: pointer;
  user-select: none;
}
#explorer-col table.stats thead th:hover,
#player-detail table.stats thead th:hover { background: var(--hover); }

#explorer-col table.stats tbody tr { cursor: pointer; }
#explorer-col table.stats tbody tr:hover { background: var(--accent-soft); }

.table-scroll { overflow-x: auto; }
/* Explorer table: taller capped height with vertical scroll by default, so more
   rows are visible while still fitting on screen. The header row stays stuck to
   the top while scrolling so you always see which column is which. In .expanded
   mode the cap is removed and the header is no longer sticky. */
#explorer-body .table-scroll {
  max-height: 620px;
  overflow-y: auto;
}
#explorer-col:not(.expanded) #explorer-body table.stats thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  /* solid background + bottom border so rows don't show through when scrolling */
  background: var(--surface-even);
  box-shadow: inset 0 -1px 0 var(--border);
}
/* In the expanded (unfolded) view the header just flows with the page. */
#explorer-col.expanded #explorer-body table.stats thead th {
  position: static;
}
/* Transparent, minimal scrollbar — only the draggable thumb is visible,
   matching the Hugging Face look (no white track). */
.table-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.30);
  background-clip: content-box;
  border: 2px solid transparent;
}
.table-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

/* Expand-table button — themed like the refresh button */
.expand-btn {
  margin-top: 10px;
  background: var(--surface-even);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  border-radius: var(--radius-btn);
  padding: 7px 16px;
  font-size: 0.9em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.expand-btn:hover { background: var(--btn-secondary-hover); }

/* Expanded: just remove the height cap so the table unfolds down the page and
   every player is visible at once (stays inline, same width). */
#explorer-col.expanded #explorer-body .table-scroll {
  max-height: none;
  overflow-y: visible;
}

/* Explorer tabs + search */
#explorer-col { position: relative; }
#explorer-search-row {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.explorer-search {
  width: 170px;
  min-width: 170px;
  background: var(--surface-even);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  color: var(--text);
  padding: 2px 9px;
  height: 24px;
  line-height: 20px;
  font-size: 12px;
  outline: none;
}
.explorer-search::placeholder { color: var(--text-muted); }
.explorer-search:focus { border-color: rgba(255, 255, 255, 0.22); }

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding-right: 360px;
  margin-bottom: 0;
}
#detail-tabs { padding-right: 0; }
.tab-nav button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 8px 14px;
  font-size: 0.95em;
  cursor: pointer;
  font-family: inherit;
}
.tab-nav button:hover { color: var(--text); }
.tab-nav button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-body { padding-top: 10px; }

/* Player detail card */
#player-detail {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 14px;
  background: var(--surface-even);
}
#player-detail-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
#player-detail-header h3 { margin: 4px 0 8px; }
#player-detail-header .dl { color: var(--text); }
#player-detail-header .dl b { font-weight: 600; }
#player-detail-header .dl .sep { color: var(--text-muted); padding: 0 4px; }
.detail-close-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  min-width: 28px;
  width: 28px;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
}
.detail-close-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* Pie / timeline controls */
.control-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
.dark-select { min-width: 260px; }
/* Plot stat picker expands to fill the row; refresh sits at the far edge. */
.dark-select.grow { flex: 1 1 auto; max-width: none; }
.refresh-btn {
  flex: 0 0 auto;
  background: var(--surface-even);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  border-radius: var(--radius);          /* match the select's 4px corners */
  padding: 8px 26px;                      /* a bit wider */
  height: 37px;                           /* match select height exactly */
  font-size: 0.95em;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.refresh-btn:hover { background: var(--btn-secondary-hover); }

.plot {
  width: 100%;
  min-height: 440px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}
#timeline-plot { height: 440px; }
.plot .plot-empty { color: var(--text-muted); padding: 40px; text-align: center; }

/* Curve / derivative toggles — the two checkboxes sit side by side, each with
   its label directly to the right, aligned to the control row's bottom edge. */
.curve-toggles {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 18px;
  margin: 0;
  padding-bottom: 6px;
  flex: 0 0 auto;
}
/* Smoothing slider box (sits inline in the control row) */
.smooth-box {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding-bottom: 4px;
  min-width: 150px;
}
.smooth-box label {
  font-size: 0.8em;
  color: var(--text-label);
  white-space: nowrap;
}
.smooth-box input[type=range] {
  width: 150px;
  accent-color: var(--accent);
  cursor: pointer;
}
.curve-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.curve-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-even);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.curve-check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.curve-check input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.curve-check:hover { color: var(--text); }

/* Toasts */
#toast {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-msg {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 0.92em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.18s ease;
}
.toast-msg.warn { border-left-color: #ef4444; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .tab-nav { padding-right: 0; }
  #explorer-search-row { position: static; justify-content: flex-start; margin-bottom: 8px; }
}

/* ── Top-level navigation tabs ──────────────────────────────────────────── */
.top-nav {
  display: flex;
  gap: 6px;
  margin: 14px 0 22px;
  border-bottom: 1px solid var(--border);
}
.top-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 1.02em;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.top-tab:hover { color: var(--text); }
.top-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── Placeholder panels ─────────────────────────────────────────────────── */
.placeholder-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}
.placeholder-card h2 { margin-top: 0; }

/* ── Admin tab ──────────────────────────────────────────────────────────── */
.admin-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.admin-card h2 { margin: 0 0 14px; }
.admin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-card-head h2 { margin: 0; }
.admin-actions { display: flex; gap: 8px; }
.admin-field { margin-bottom: 16px; max-width: 480px; }
.admin-field label {
  display: block;
  font-size: 0.85em;
  color: var(--text-label);
  margin-bottom: 5px;
  font-weight: 600;
}
.admin-input {
  width: 100%;
  background: var(--surface-even);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 9px 11px;
  font-size: 0.95em;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.admin-input:focus { border-color: var(--accent); }
.admin-hint {
  display: block;
  font-size: 0.82em;
  color: var(--text-muted);
  margin-top: 5px;
}

/* Refresh-button "primary" variant for the Save action */
.refresh-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1206;
  font-weight: 600;
}
.refresh-btn.primary:hover { background: #ea6a0d; border-color: #ea6a0d; }

/* Roster editor table */
.admin-table input {
  width: 100%;
  background: var(--surface-even);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.9em;
  font-family: inherit;
  outline: none;
}
.admin-table input:focus { border-color: var(--accent); }
.admin-table td { vertical-align: middle; }
.roster-del {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.roster-del:hover { color: #ef4444; border-color: #ef4444; }

/* ── Admin edit button (top-right of cards) ─────────────────────────────── */
.edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-btn);
  padding: 6px 14px;
  font-size: 0.88em;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.edit-btn:hover { color: var(--text); border-color: var(--text-muted); }
.edit-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

/* Roster table: in VIEW mode, inputs look like plain text (no inner box). In
   EDIT mode (.editing on the table) they get the dark input box + border. */
.admin-table input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.9em;
  font-family: inherit;
  outline: none;
}
.admin-table.editing input {
  background: var(--surface-even);
  border-color: var(--border);
}
.admin-table.editing input:focus { border-color: var(--accent); }

/* Steam/BM id cells: a span shows the value in VIEW mode (only the text is
   clickable), the input is used in EDIT mode. */
.admin-table .id-input { display: none; }
.admin-table.editing .id-input { display: block; }
.admin-table.editing .id-link { display: none; }
.id-link {
  display: inline-block;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  text-underline-offset: 2px;
  padding: 5px 8px;
  font-size: 0.9em;
}
.admin-table:not(.editing) .id-link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ffffff;
}
.admin-table input:read-only { cursor: default; }

/* Delete-row button only matters in edit mode */
.admin-table:not(.editing) .roster-del { visibility: hidden; }

/* ── Live Log ───────────────────────────────────────────────────────────── */
.log-view {
  background: var(--surface-even);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  line-height: 1.5;
  padding: 14px 16px;
  margin: 0;
  max-height: 540px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.log-view::-webkit-scrollbar { width: 10px; }
.log-view::-webkit-scrollbar-track { background: transparent; }
.log-view::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 6px;
  border: 2px solid transparent; background-clip: content-box;
}