/* Vektor Sports theme — dark backdrop, green accents, red CTAs */
:root {
  --vs-bg: #0a0a0a;
  --vs-bg-2: #141414;
  --vs-bg-3: #1c1c1c;
  --vs-border: #2a2a2a;
  --vs-text: #e8e8e8;
  --vs-text-dim: #9a9a9a;
  --vs-green: #8bc24a;
  --vs-green-dark: #6ea036;
  --vs-red: #d6262b;
  --vs-red-dark: #a91d22;
  --vs-gold: #c9a635;
}

body.vs-theme {
  background-color: var(--vs-bg) !important;
  color: var(--vs-text);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

.vs-theme h1, .vs-theme h2, .vs-theme h3, .vs-theme h4, .vs-theme h5, .vs-theme h6,
.vs-theme .vs-section-title,
.vs-theme .vs-landing-title,
.vs-theme .vs-hero h2 {
  font-family: 'Oswald', 'Inter', 'Segoe UI', sans-serif;
}

.text-vs-green { color: var(--vs-green) !important; }
.text-vs-red   { color: var(--vs-red) !important; }
.text-vs-gold  { color: var(--vs-gold) !important; }

/* ============ Landing hero ============ */
.vs-landing-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--vs-border);
  background:
    linear-gradient(135deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.55) 60%, rgba(139,194,74,.25) 100%),
    url('https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=1600&q=70') center/cover no-repeat;
  min-height: 360px;
  display: flex;
  align-items: center;
}
.vs-landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 80px);
  pointer-events: none;
}
.vs-landing-hero-inner {
  position: relative;
  z-index: 1;
  padding: 3.5rem 2rem;
  width: 100%;
  max-width: 760px;
}
.vs-landing-eyebrow {
  color: var(--vs-green);
  letter-spacing: .25em;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.vs-landing-title {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: .95;
  letter-spacing: .02em;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgba(0,0,0,.7);
}
.vs-landing-sub {
  color: #d8d8d8;
  font-size: 1.1rem;
  max-width: 540px;
  margin-bottom: 1.75rem;
}
.vs-landing-cta .btn { margin-right: .5rem; margin-bottom: .5rem; }

@media (max-width: 576px) {
  .vs-landing-hero { min-height: 280px; }
  .vs-landing-hero-inner { padding: 2rem 1.25rem; }
}

/* ============ Category pills ============ */
.vs-cat-pill {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.vs-cat-pill.vs-cat-ncaa  { background: rgba(139,194,74,.18); color: var(--vs-green); border-color: rgba(139,194,74,.4); }
.vs-cat-pill.vs-cat-nfl   { background: rgba(214,38,43,.18);  color: #ff6a6a;       border-color: rgba(214,38,43,.4); }
.vs-cat-pill.vs-cat-other { background: rgba(201,166,53,.18); color: var(--vs-gold); border-color: rgba(201,166,53,.4); }

.vs-cat-filter .btn-check:checked + .btn-vs-outline {
  background: var(--vs-green);
  color: #000;
  border-color: var(--vs-green);
}

/* ============ Empty state ============ */
.vs-empty-state {
  border: 1px dashed var(--vs-border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--vs-bg-2), var(--vs-bg));
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--vs-text-dim);
}
.vs-empty-state i {
  font-size: 3.5rem;
  color: var(--vs-green);
  opacity: .6;
  display: block;
  margin-bottom: 1rem;
}
.vs-empty-state h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: .5rem;
}
.vs-empty-state p { margin: 0; max-width: 480px; margin-left: auto; margin-right: auto; }

/* ============ Past contest cards ============ */
.vs-past-card {
  transition: transform .15s ease, border-color .15s ease;
}
.vs-past-card:hover {
  transform: translateY(-2px);
  border-color: var(--vs-green) !important;
}

.vs-theme .navbar {
  background-color: #000 !important;
  border-bottom: 1px solid var(--vs-border);
  padding: .6rem 1rem;
}
.vs-theme .navbar .navbar-brand { padding: 0; }
.vs-theme .vs-brand-img { height: 46px; width: auto; display: block; }
@media (max-width: 576px) {
  .vs-theme .vs-brand-img { height: 36px; }
}
.vs-theme .navbar .nav-link { color: #fff !important; text-transform: uppercase; font-size: .92rem; letter-spacing: .05em; }
.vs-theme .navbar .nav-link:hover { color: var(--vs-green) !important; }

.vs-theme .btn-vs-join,
.vs-theme .btn-vs-cta {
  background-color: var(--vs-red);
  border-color: var(--vs-red);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vs-theme .btn-vs-join:hover,
.vs-theme .btn-vs-cta:hover { background-color: var(--vs-red-dark); border-color: var(--vs-red-dark); color: #fff; }

.vs-theme .btn-vs-outline {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vs-theme .btn-vs-outline:hover { background: #fff; color: #000; }

/* Section heading */
.vs-section-title {
  color: var(--vs-green);
  font-weight: 900;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2rem 0 1rem;
}

/* Contest table */
.vs-contest-table {
  width: 100%;
  background: #000;
  color: #fff;
  border: 1px solid var(--vs-border);
}
.vs-contest-table thead th {
  background: var(--vs-green);
  color: #000;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
  padding: .85rem 1rem;
}
.vs-contest-table tbody td {
  padding: 1rem;
  border-top: 1px solid var(--vs-border);
  vertical-align: middle;
}
.vs-contest-table tbody tr:hover { background: var(--vs-bg-2); }
.vs-contest-table .vs-start-time { color: var(--vs-red); font-weight: 700; }

/* Page surfaces */
.vs-theme .card { background-color: var(--vs-bg-2); border-color: var(--vs-border); color: var(--vs-text); }
.vs-theme .list-group-item { background-color: var(--vs-bg-2); border-color: var(--vs-border); color: var(--vs-text); }
.vs-theme .list-group-item-action:hover { background-color: var(--vs-bg-3); }
.vs-theme .form-control, .vs-theme .form-select {
  background-color: var(--vs-bg-2); border-color: var(--vs-border); color: var(--vs-text);
}
/* Native date/time pickers need dark color-scheme so the calendar icon is visible and clickable */
.vs-theme input[type="date"],
.vs-theme input[type="time"],
.vs-theme input[type="datetime-local"] {
  color-scheme: dark;
}
.vs-theme .form-control:focus, .vs-theme .form-select:focus {
  background-color: var(--vs-bg-2); color: var(--vs-text);
  border-color: var(--vs-green); box-shadow: 0 0 0 .2rem rgba(139,194,74,.25);
}
.vs-theme .form-control::placeholder { color: #666; }
.vs-theme .table {
  color: var(--vs-text);
  --bs-table-bg: var(--vs-bg-2);
  --bs-table-color: var(--vs-text);
  --bs-table-border-color: var(--vs-border);
  --bs-table-striped-bg: var(--vs-bg-3);
  --bs-table-striped-color: var(--vs-text);
  --bs-table-hover-bg: var(--vs-bg-3);
  --bs-table-hover-color: #fff;
}
.vs-theme .table > thead { background-color: var(--vs-bg-3); }
.vs-theme .table > thead th {
  color: #fff;
  background-color: var(--vs-bg-3);
  border-color: var(--vs-border);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
}
.vs-theme .table > tbody > tr > td { border-color: var(--vs-border); }
.vs-theme .text-muted { color: #b8b8b8 !important; }   /* brighter than default */
.vs-theme .form-label { color: #fff; font-weight: 600; }
.vs-theme a { color: var(--vs-green); }
.vs-theme a:hover { color: var(--vs-green-dark); }
.vs-theme .alert { font-weight: 500; }
.vs-theme .alert-info    { background-color: #1d3a55; border-color: #2c5378; color: #dceeff; }
.vs-theme .alert-success { background-color: #355c1a; border-color: #4d802a; color: #e9f5d2; }
.vs-theme .alert-warning { background-color: #5a4222; border-color: #7d5a30; color: #f6dca0; }
.vs-theme .alert-danger  { background-color: #5a1f24; border-color: #7d2d33; color: #f7c7c7; }
.vs-theme .alert .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.vs-theme .badge.bg-light { background-color: var(--vs-bg-3) !important; color: var(--vs-text) !important; }
.vs-theme .badge.bg-secondary { background-color: #555 !important; color: #fff !important; }
.vs-theme .badge.bg-success { background-color: var(--vs-green-dark) !important; color: #fff !important; }
.vs-theme .badge.bg-warning { color: #000 !important; }
.vs-theme .badge.bg-danger { background-color: var(--vs-red) !important; color: #fff !important; }
.vs-theme .navbar-toggler { border-color: var(--vs-border); }
.vs-theme h1, .vs-theme h2, .vs-theme h3, .vs-theme h4, .vs-theme h5, .vs-theme h6 { color: #fff; }

/* Hero / how-to-get-started */
.vs-hero {
  background:
    radial-gradient(ellipse at top, rgba(139,194,74,.08), transparent 60%),
    linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.95)),
    #000;
  padding: 4rem 1rem;
  text-align: center;
  border-top: 1px solid var(--vs-border);
  border-bottom: 4px solid var(--vs-green);
}
.vs-hero h2 {
  color: #fff;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 2.5rem;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}
.vs-step {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 2rem 1.25rem 1.5rem;
  background: linear-gradient(180deg, var(--vs-bg-2), var(--vs-bg));
  border: 1px solid var(--vs-border);
  border-radius: 12px;
  height: 100%;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vs-step:hover {
  transform: translateY(-4px);
  border-color: var(--vs-green);
  box-shadow: 0 12px 30px rgba(139,194,74,.15);
}
.vs-step .vs-step-num {
  position: absolute;
  top: .5rem; right: .9rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--vs-bg-3);
  letter-spacing: .04em;
}
.vs-step .vs-step-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,194,74,.18), rgba(139,194,74,.02));
  border: 2px solid var(--vs-green);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--vs-green);
  box-shadow: 0 0 0 6px rgba(139,194,74,.05), inset 0 0 20px rgba(139,194,74,.08);
}
.vs-step .vs-step-title {
  color: var(--vs-gold);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: .5rem;
}
.vs-step .vs-step-desc {
  color: var(--vs-text-dim);
  font-size: .9rem;
  line-height: 1.5;
}

/* Pick card styling override (keeps the green winner highlight) */
.vs-theme .team-btn { background-color: var(--vs-bg-3); border-color: var(--vs-border); color: var(--vs-text); }
.vs-theme .team-btn:hover { background-color: var(--vs-bg-2); }
.vs-theme .team-btn.selected { background-color: var(--vs-green); border-color: var(--vs-green); color: #000; }

/* Pick cards (player picking page) */
.vs-pick-card {
  background: #f3f3f3;
  color: #111;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vs-pick-card.vs-pick-missing {
  border-color: var(--vs-red);
  box-shadow: 0 0 0 2px rgba(214,38,43,.18);
}
.vs-pick-header {
  background: #e7e7e7;
  padding: .55rem 1rem;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600;
  color: #222;
}
.vs-pick-header .vs-pick-game-no { letter-spacing: .04em; }
.vs-pick-header .vs-pick-kickoff { color: #555; font-size: .9rem; }
.vs-pick-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem 1rem;
  background: #fff;
}
.vs-team-tile {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: .75rem;
  cursor: pointer;
  transition: all .12s ease-in-out;
  color: #111;
  font-weight: 700;
  text-align: center;
}
.vs-team-tile:hover { background: #fafafa; border-color: #ccc; }
.vs-team-tile.selected {
  background: rgba(139,194,74,.15);
  border-color: var(--vs-green);
  color: #111;
}
.vs-team-tile.selected .vs-team-name { color: var(--vs-green-dark); }
.vs-team-logo-wrap {
  height: 100px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
}
.vs-team-logo { max-height: 100px; max-width: 140px; object-fit: contain; }
.vs-team-logo-placeholder {
  width: 90px; height: 90px; border-radius: 50%;
  background: #ddd; color: #555;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.6rem;
}
.vs-team-name { font-size: 1.05rem; }
.vs-pick-center { text-align: center; min-width: 90px; }
.vs-pick-center .vs-conf-select {
  display: inline-block;
  min-width: 5.5rem;
  text-align: center;
  font-weight: 700;
  background: #fff;
  color: #111;
  border-color: #c0c0c0;
}

@media (max-width: 576px) {
  .vs-pick-body { grid-template-columns: 1fr auto 1fr; gap: .35rem; padding: 1rem .5rem; }
  .vs-team-logo-wrap { height: 70px; }
  .vs-team-logo { max-height: 70px; max-width: 90px; }
  .vs-team-logo-placeholder { width: 60px; height: 60px; font-size: 1.1rem; }
  .vs-team-name { font-size: .9rem; }
}

/* Contest detail tabs */
.vs-theme .nav-tabs { border-bottom-color: var(--vs-border); }
.vs-theme .nav-tabs .nav-link {
  color: var(--vs-text-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  padding: .6rem 1.25rem;
}
.vs-theme .nav-tabs .nav-link:hover { color: #fff; }
.vs-theme .nav-tabs .nav-link.active {
  color: #fff;
  background: var(--vs-bg-3);
  border-bottom-color: var(--vs-green);
}

/* Matchup card (results view: two logos + VS + score boxes) */
.vs-matchup-card {
  background: #fff;
  color: #111;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  padding: 1rem;
}
.vs-matchup-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
}
.vs-matchup-team { text-align: center; }
.vs-team-name-sm { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.vs-matchup-vs {
  align-self: center;
  font-weight: 800;
  color: #555;
  font-size: 1.1rem;
}
.vs-score-box {
  display: inline-block;
  min-width: 4rem;
  margin-top: .5rem;
  padding: .35rem .75rem;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  font-weight: 700;
  background: #fff;
  color: #111;
}
.vs-matchup-footer { margin-top: .75rem; }

/* Pick grid (per-card pick + points) */
.vs-pick-grid {
  background: var(--vs-bg-2);
  color: var(--vs-text);
}
.vs-pick-grid thead th {
  background: var(--vs-bg-3);
  color: #fff;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .05em;
  border-color: var(--vs-border);
}
.vs-pick-grid tbody td { border-color: var(--vs-border); }
.vs-pick-grid .vs-correct { background: rgba(139,194,74,.18); color: #c8e6a0; font-weight: 700; }
.vs-pick-grid .vs-wrong   { background: rgba(214,38,43,.18); color: #f0a0a0; font-weight: 700; }

/* Stats table */
.vs-stats-table {
  background: var(--vs-bg-2);
  color: var(--vs-text);
  --bs-table-bg: var(--vs-bg-2);
  --bs-table-color: var(--vs-text);
}
.vs-stats-table thead th {
  background: var(--vs-bg-3);
  color: #fff;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  border-color: var(--vs-border);
  vertical-align: bottom;
  padding: .65rem .5rem;
}
.vs-stats-table tbody td { border-color: var(--vs-border); font-weight: 600; }

/* Admin scoreboard (games down, cards across) */
.vs-scoreboard-wrap { background: #fff; padding: .5rem; border-radius: 6px; }
.vs-scoreboard { background: #fff; color: #111; border-collapse: collapse; width: max-content; min-width: 100%; }
.vs-scoreboard th, .vs-scoreboard td { border: 1px solid #d0d0d0; padding: .55rem .85rem; }
.vs-scoreboard thead th { background: #f5f5f5; color: #111; font-weight: 700; }
.vs-scoreboard .vs-sb-corner { background: transparent; border: none; }
.vs-scoreboard .vs-sb-label { background: transparent; border: none; text-align: right; }
.vs-scoreboard .vs-sb-player { white-space: nowrap; text-align: center; }
.vs-scoreboard .vs-sb-gameinfo { background: #fafafa; min-width: 140px; vertical-align: middle; }
.vs-scoreboard .vs-sb-wl { background: var(--vs-green); color: #fff; }
.vs-scoreboard .vs-sb-wl td { background: var(--vs-green); color: #fff; border-color: #6fa235; }
.vs-scoreboard .vs-sb-total { font-weight: 700; }

/* Contingent-delta + confidence pair (in both scoreboard and the front-end results grid) */
.vs-sb-cell { padding: .3rem .55rem; min-width: 56px; vertical-align: middle; }
.vs-sb-contingent { font-size: .68rem; line-height: 1.1; color: var(--vs-text-dim); }
.vs-sb-contingent.pos { color: #2c6fd1; }   /* blue, like the PDF */
.vs-sb-contingent.neg { color: #c62a2a; }   /* red */
.vs-sb-conf { font-size: 1.1rem; font-weight: 800; line-height: 1.1; }
.vs-scoreboard .vs-sb-cell .vs-sb-conf { color: #111; }   /* dark text on light scoreboard */
.vs-pick-grid .vs-sb-cell .vs-sb-conf { color: var(--vs-text); }  /* light text on dark front-end grid */

/* Leaderboard */
.vs-leaderboard {
  background: var(--vs-bg-2);
  color: var(--vs-text);
  --bs-table-bg: var(--vs-bg-2);
  --bs-table-color: var(--vs-text);
}
.vs-leaderboard thead th {
  background: var(--vs-bg-3);
  color: #fff;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .05em;
  border-color: var(--vs-border);
}
.vs-leaderboard tbody td { border-color: var(--vs-border); padding: .85rem .75rem; }
.vs-leaderboard .vs-rank-cell {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--vs-text-dim);
}
.vs-leaderboard .vs-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--vs-bg-3);
  color: var(--vs-green);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  border: 1px solid var(--vs-border);
}
.vs-avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--vs-border);
}
.vs-avatar-img-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--vs-border);
}
.vs-avatar-img-lg {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--vs-green);
}
.vs-avatar-circle-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--vs-bg-3); color: var(--vs-green);
  font-weight: 800; font-size: .85rem;
  border: 1px solid var(--vs-border);
}
.vs-avatar-circle-lg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--vs-bg-3); color: var(--vs-green);
  font-weight: 800; font-size: .95rem;
  border: 2px solid var(--vs-green);
}
/* Top 3 medal rows */
.vs-leaderboard .vs-rank-gold td,
.vs-leaderboard .vs-rank-silver td,
.vs-leaderboard .vs-rank-bronze td { font-size: 1.1rem; }
.vs-leaderboard .vs-rank-gold .vs-rank-cell {
  background: linear-gradient(135deg, #f6d365, #c9a635); color: #000;
}
.vs-leaderboard .vs-rank-silver .vs-rank-cell {
  background: linear-gradient(135deg, #e8e8e8, #b0b0b0); color: #000;
}
.vs-leaderboard .vs-rank-bronze .vs-rank-cell {
  background: linear-gradient(135deg, #e0a37a, #9a5c34); color: #000;
}
.vs-leaderboard .vs-rank-gold .vs-avatar { border-color: var(--vs-gold); color: var(--vs-gold); }

/* Chat */
.vs-chat-messages {
  background: var(--vs-bg-2);
  border: 1px solid var(--vs-border);
  color: var(--vs-text);
}
.vs-chat-messages .msg {
  padding: .45rem .6rem;
  border-radius: 6px;
  background: transparent;
  border-left: 3px solid transparent;
}
.vs-chat-messages .msg:hover {
  background: var(--vs-bg-3);
  border-left-color: var(--vs-green);
}
.vs-chat-messages .msg-author {
  color: var(--vs-green);
  font-weight: 700;
  letter-spacing: .02em;
}
.vs-chat-messages .msg-time {
  color: var(--vs-text-dim);
  margin-left: .35rem;
}
.vs-chat-messages .msg-body {
  color: var(--vs-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: .15rem;
}

/* Footer */
.vs-footer {
  background: #000;
  border-top: 4px solid var(--vs-green);
  padding: 2rem 1rem;
  color: var(--vs-text-dim);
  margin-top: 3rem;
}
.vs-footer h5 { color: #fff; font-weight: 700; }
.vs-footer a { color: var(--vs-text-dim); text-decoration: none; }
.vs-footer a:hover { color: var(--vs-green); }