/* ================================================================
   FOOSBALL THEME SYSTEM
   Each theme overrides CSS custom properties.
   Add new themes as [data-theme="name"] { ... }
   ================================================================ */

/* ----------------------------------------------------------------
   DEFAULT — "Night" dark theme
   ---------------------------------------------------------------- */
:root,
[data-theme="default"] {
  color-scheme: dark;

  /* Layout */
  --app-bg:        #0f1117;
  --navbar-bg:     #0a0d13;
  --card-bg:       #1a1d27;
  --card-border:   1px solid #2a2d3e;
  --card-radius:   12px;
  --card-shadow:   0 2px 8px rgba(0,0,0,0.3);
  --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.5);
  --border-color:  #2a2d3e;

  /* Typography */
  --body-font:     system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display-font:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono-font:     'SF Mono', 'Fira Code', monospace;
  --text-primary:  #e2e8f0;
  --text-muted:    #64748b;

  /* Accent colors */
  --accent-primary:  #3b82f6;
  --accent-secondary:#8b5cf6;
  --success-color:   #4ade80;
  --danger-color:    #f87171;
  --warning-color:   #fbbf24;

  /* Player card specific */
  --elo-color:        #60a5fa;
  --elo-font:         var(--body-font);
  --name-color:       #f1f5f9;
  --name-font:        var(--body-font);
  --rank-badge-bg:    #2a2d3e;
  --rank-badge-color: #94a3b8;
  --rank1-border:     #fbbf24;
  --rank1-shadow:     rgba(251,191,36,0.2);
  --rank2-border:     #94a3b8;
  --rank2-shadow:     rgba(148,163,184,0.15);
  --rank3-border:     #f97316;
  --rank3-shadow:     rgba(249,115,22,0.15);
  --rank1-badge-bg:   #fbbf24;
  --rank1-badge-fg:   #000;
  --rank2-badge-bg:   #94a3b8;
  --rank2-badge-fg:   #000;
  --rank3-badge-bg:   #f97316;
  --rank3-badge-fg:   #000;

  /* Win rate bar */
  --track-bg:        #2a2d3e;
  --winrate-fill:    linear-gradient(90deg, #3b82f6, #8b5cf6);
  --winrate-glow:    none;

  /* Stat chips */
  --chip-bg:         #1e2130;
  --chip-border:     #2a2d3e;

  /* H2H */
  --h2h-win-bg:      rgba(74,222,128,0.12);
  --h2h-loss-bg:     rgba(248,113,113,0.12);
  --h2h-draw-bg:     rgba(100,116,139,0.10);
  --h2h-self-bg:     rgba(255,255,255,0.04);

  /* Form inputs */
  --input-bg:           #1a1d27;
  --input-border:       #2a2d3e;
  --input-focus-border: #3b82f6;
  --input-focus-shadow: 0 0 0 3px rgba(59,130,246,0.2);

  /* Submit button */
  --submit-bg:      #3b82f6;
  --submit-border:  #3b82f6;
  --submit-color:   #fff;
  --submit-hover-bg:#2563eb;
  --submit-shadow:  none;
  --submit-font:    var(--body-font);

  /* VS divider */
  --vs-color:       #64748b;
  --vs-font:        var(--body-font);
  --vs-glow:        none;

  /* Section title */
  --section-title-color: #e2e8f0;
  --section-title-font:  var(--body-font);
  --section-title-glow:  none;

  /* Bottom nav */
  --bottom-nav-bg:       #0a0d13;
  --bottom-nav-border:   #2a2d3e;
  --bottom-nav-active:   #3b82f6;
  --bottom-nav-inactive: #64748b;

  /* Champion banner */
  --champion-bg:         #1a1d27;
  --champion-border:     #fbbf24;
  --champion-color:      #fbbf24;
  --champion-crown:      #fbbf24;

  /* Season pills */
  --season-pill-bg:      #1a1d27;
  --season-pill-active-bg:    #3b82f6;
  --season-pill-active-color: #fff;

  /* Quick stat cards */
  --quick-stat-bg:       #1a1d27;
  --quick-stat-border:   #2a2d3e;
  --quick-stat-value-color: #60a5fa;

  /* Match list items */
  --match-item-bg:       #1a1d27;
  --match-item-border:   #2a2d3e;

  /* Chart */
  --chart-grid:          #2a2d3e;
  --chart-text:          #64748b;

  /* Player list */
  --player-list-item-bg: #1a1d27;
  --player-list-hover:   #22253a;

  /* Bootstrap variable overrides */
  --bs-body-bg:          #0f1117;
  --bs-body-color:       #e2e8f0;
  --bs-primary-rgb:      59,130,246;
  --bs-card-bg:          #1a1d27;
  --bs-border-color:     #2a2d3e;
  --bs-secondary-bg:     #1a1d27;
  --bs-tertiary-bg:      #141720;
  --bs-dropdown-bg:      #1a1d27;
  --bs-dropdown-border-color: #2a2d3e;
  --bs-dropdown-link-color:   #e2e8f0;
  --bs-dropdown-link-hover-bg:#2a2d3e;
  --bs-modal-bg:         #1a1d27;
  --bs-navbar-active-color: #f1f5f9;
}

/* ----------------------------------------------------------------
   CYBERPUNK 2077
   ---------------------------------------------------------------- */
[data-theme="cyberpunk"] {
  color-scheme: dark;

  /* Layout */
  --app-bg:        #080010;
  --navbar-bg:     #04000a;
  --card-bg:       #0d0120;
  --card-border:   1px solid #ff2d78;
  --card-radius:   0px;
  --card-shadow:   0 0 10px rgba(255,45,120,0.25), inset 0 0 20px rgba(0,0,0,0.7);
  --card-hover-shadow: 0 0 25px rgba(255,45,120,0.6), 0 0 70px rgba(255,45,120,0.2), inset 0 0 20px rgba(0,0,0,0.7);
  --border-color:  #380050;

  /* Typography */
  --body-font:     'Share Tech Mono', 'Courier New', monospace;
  --display-font:  'Orbitron', sans-serif;
  --mono-font:     'Share Tech Mono', 'Courier New', monospace;
  --text-primary:  #e8d5ff;
  --text-muted:    #9d4edd;

  /* Neon palette (cyberpunk-specific, used below) */
  --neon-cyan:    #00fff5;
  --neon-magenta: #ff2d78;
  --neon-yellow:  #ffe000;
  --neon-orange:  #ff6b35;
  --neon-purple:  #bd00ff;

  /* Accent colors */
  --accent-primary:  #00fff5;
  --accent-secondary:#ff2d78;
  --success-color:   #00ff88;
  --danger-color:    #ff2d78;
  --warning-color:   #ffe000;

  /* Player card specific */
  --elo-color:        #ffe000;
  --elo-font:         'Orbitron', sans-serif;
  --name-color:       #00fff5;
  --name-font:        'Orbitron', sans-serif;
  --rank-badge-bg:    #ff2d78;
  --rank-badge-color: #000;
  --rank1-border:     #ffe000;
  --rank1-shadow:     rgba(255,224,0,0.5);
  --rank2-border:     #00fff5;
  --rank2-shadow:     rgba(0,255,245,0.4);
  --rank3-border:     #ff6b35;
  --rank3-shadow:     rgba(255,107,53,0.4);
  --rank1-badge-bg:   #ffe000;
  --rank1-badge-fg:   #000;
  --rank2-badge-bg:   #00fff5;
  --rank2-badge-fg:   #000;
  --rank3-badge-bg:   #ff6b35;
  --rank3-badge-fg:   #000;

  /* Win rate bar */
  --track-bg:        #1a0035;
  --winrate-fill:    linear-gradient(90deg, #00fff5, #ff2d78);
  --winrate-glow:    0 0 8px rgba(0,255,245,0.5);

  /* Stat chips */
  --chip-bg:         #0d0120;
  --chip-border:     #380050;

  /* H2H */
  --h2h-win-bg:      rgba(0,255,136,0.12);
  --h2h-loss-bg:     rgba(255,45,120,0.15);
  --h2h-draw-bg:     rgba(189,0,255,0.08);
  --h2h-self-bg:     rgba(255,255,255,0.03);

  /* Form inputs */
  --input-bg:           #0d0120;
  --input-border:       #380050;
  --input-focus-border: #00fff5;
  --input-focus-shadow: 0 0 0 2px rgba(0,255,245,0.25), 0 0 15px rgba(0,255,245,0.1);

  /* Submit button */
  --submit-bg:      #ff2d78;
  --submit-border:  #ff2d78;
  --submit-color:   #fff;
  --submit-hover-bg:#ff5294;
  --submit-shadow:  0 0 15px rgba(255,45,120,0.5);
  --submit-font:    'Orbitron', sans-serif;

  /* VS divider */
  --vs-color:       #ff2d78;
  --vs-font:        'Orbitron', sans-serif;
  --vs-glow:        0 0 12px rgba(255,45,120,0.7);

  /* Section title */
  --section-title-color: #ff2d78;
  --section-title-font:  'Orbitron', sans-serif;
  --section-title-glow:  0 0 12px rgba(255,45,120,0.5);

  /* Bottom nav */
  --bottom-nav-bg:       #04000a;
  --bottom-nav-border:   #380050;
  --bottom-nav-active:   #00fff5;
  --bottom-nav-inactive: #9d4edd;

  /* Champion banner */
  --champion-bg:         #0d0120;
  --champion-border:     #ffe000;
  --champion-color:      #ffe000;
  --champion-crown:      #ffe000;

  /* Season pills */
  --season-pill-bg:      #0d0120;
  --season-pill-active-bg:    #ff2d78;
  --season-pill-active-color: #fff;

  /* Quick stat cards */
  --quick-stat-bg:       #0d0120;
  --quick-stat-border:   #380050;
  --quick-stat-value-color: #00fff5;

  /* Match list items */
  --match-item-bg:       #0d0120;
  --match-item-border:   #380050;

  /* Chart */
  --chart-grid:          #380050;
  --chart-text:          #9d4edd;

  /* Player list */
  --player-list-item-bg: #0d0120;
  --player-list-hover:   #160230;

  /* Bootstrap variable overrides */
  --bs-body-bg:             #080010;
  --bs-body-color:          #e8d5ff;
  --bs-body-font-family:    'Share Tech Mono', 'Courier New', monospace;
  --bs-primary-rgb:         0,255,245;
  --bs-secondary-rgb:       255,45,120;
  --bs-success-rgb:         0,255,136;
  --bs-danger-rgb:          255,45,120;
  --bs-card-bg:             #0d0120;
  --bs-border-color:        #380050;
  --bs-secondary-bg:        #0d0120;
  --bs-tertiary-bg:         #09010f;
  --bs-dropdown-bg:         #0d0120;
  --bs-dropdown-border-color: #380050;
  --bs-dropdown-link-color:   #e8d5ff;
  --bs-dropdown-link-hover-bg: rgba(255,45,120,0.12);
  --bs-modal-bg:            #0d0120;
  --bs-navbar-active-color: #ffe000;
}

/* Cyberpunk — clipped card corners + scanline overlay */
[data-theme="cyberpunk"] .player-card {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
[data-theme="cyberpunk"] .player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="cyberpunk"] .player-card > * { position: relative; z-index: 1; }

/* Rank-specific card glow (cyberpunk) */
[data-theme="cyberpunk"] .player-card[data-rank="1"] {
  border-color: var(--rank1-border);
  box-shadow: 0 0 18px var(--rank1-shadow), 0 0 60px rgba(255,224,0,0.12), inset 0 0 20px rgba(0,0,0,0.7);
}
[data-theme="cyberpunk"] .player-card[data-rank="2"] {
  border-color: var(--rank2-border);
  box-shadow: 0 0 14px var(--rank2-shadow), inset 0 0 20px rgba(0,0,0,0.7);
}
[data-theme="cyberpunk"] .player-card[data-rank="3"] {
  border-color: var(--rank3-border);
  box-shadow: 0 0 14px var(--rank3-shadow), inset 0 0 20px rgba(0,0,0,0.7);
}

/* Cyberpunk navbar */
[data-theme="cyberpunk"] .app-navbar { border-bottom: 1px solid #380050 !important; }
[data-theme="cyberpunk"] .navbar-brand {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.12em;
  color: #ffe000 !important;
  text-shadow: 0 0 12px rgba(255,224,0,0.5);
}
[data-theme="cyberpunk"] .nav-link { color: #00fff5 !important; opacity: 0.8; }
[data-theme="cyberpunk"] .nav-link:hover { opacity: 1; color: #00fff5 !important; }
[data-theme="cyberpunk"] .nav-link.active {
  color: #ffe000 !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(255,224,0,0.4);
}

/* Cyberpunk Bootstrap component overrides */
[data-theme="cyberpunk"] .card {
  background: var(--card-bg);
  border-color: #380050;
}
[data-theme="cyberpunk"] .card-header {
  background: rgba(255,45,120,0.07);
  border-bottom-color: #380050;
  color: #ff2d78;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #380050;
  --bs-table-color: #e8d5ff;
  --bs-table-hover-bg: rgba(255,45,120,0.05);
  --bs-table-striped-bg: rgba(255,255,255,0.02);
}
[data-theme="cyberpunk"] thead.table-light th {
  background: rgba(255,45,120,0.08) !important;
  color: #ff2d78 !important;
  border-color: #380050 !important;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] .modal-content {
  border-color: #ff2d78;
  box-shadow: 0 0 30px rgba(255,45,120,0.3);
}
[data-theme="cyberpunk"] .modal-header {
  border-bottom-color: #380050;
  color: #ff2d78;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] .modal-footer { border-top-color: #380050; }
[data-theme="cyberpunk"] .btn-close { filter: invert(1); }

/* Cyberpunk H2H cell text colors */
[data-theme="cyberpunk"] .h2h-win  { color: #00ff88 !important; }
[data-theme="cyberpunk"] .h2h-loss { color: #ff2d78 !important; }

/* Cyberpunk theme switcher button */
[data-theme="cyberpunk"] #themeBtn {
  border-color: #380050;
  color: #9d4edd;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] #themeBtn:hover { border-color: #ff2d78; color: #ff2d78; }

/* Cyberpunk alert */
[data-theme="cyberpunk"] .alert-warning {
  background: rgba(255,224,0,0.08);
  border-color: #ffe000;
  color: #ffe000;
}

/* ----------------------------------------------------------------
   Cyberpunk — Match Entry page
   ---------------------------------------------------------------- */

/* P1 = cyan, P2 = magenta */
[data-theme="cyberpunk"] .match-player-card {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
/* Scanline overlay on match cards */
[data-theme="cyberpunk"] .match-player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="cyberpunk"] .match-player-card > * { position: relative; z-index: 1; }

[data-theme="cyberpunk"] .match-player-card--p1 {
  border-color: #00fff5;
  box-shadow: 0 0 14px rgba(0,255,245,0.28), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="cyberpunk"] .match-player-card--p2 {
  border-color: #ff2d78;
  box-shadow: 0 0 14px rgba(255,45,120,0.28), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="cyberpunk"] .match-player-card--p1:hover {
  box-shadow: 0 0 28px rgba(0,255,245,0.55), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="cyberpunk"] .match-player-card--p2:hover {
  box-shadow: 0 0 28px rgba(255,45,120,0.55), inset 0 0 20px rgba(0,0,0,0.65);
}

/* Per-player badge colours */
[data-theme="cyberpunk"] .match-player-card--p1 .mpc-badge {
  color: #00fff5; opacity: 0.9;
  font-family: 'Orbitron', sans-serif; letter-spacing: 0.15em;
}
[data-theme="cyberpunk"] .match-player-card--p2 .mpc-badge {
  color: #ff2d78; opacity: 0.9;
  font-family: 'Orbitron', sans-serif; letter-spacing: 0.15em;
}

/* Player name per-colour */
[data-theme="cyberpunk"] .mpc-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
[data-theme="cyberpunk"] .match-player-card--p1 .mpc-name {
  color: #00fff5;
  text-shadow: 0 0 8px rgba(0,255,245,0.55);
}
[data-theme="cyberpunk"] .match-player-card--p2 .mpc-name {
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.55);
}

/* Score input per-colour */
[data-theme="cyberpunk"] .match-player-card--p1 .score-input {
  color: #00fff5;
  border-color: rgba(0,255,245,0.25);
  text-shadow: 0 0 12px rgba(0,255,245,0.45);
}
[data-theme="cyberpunk"] .match-player-card--p2 .score-input {
  color: #ff2d78;
  border-color: rgba(255,45,120,0.25);
  text-shadow: 0 0 12px rgba(255,45,120,0.45);
}
[data-theme="cyberpunk"] .match-player-card--p1 .score-input:focus {
  border-color: #00fff5;
  box-shadow: 0 0 0 2px rgba(0,255,245,0.2), 0 0 18px rgba(0,255,245,0.18);
}
[data-theme="cyberpunk"] .match-player-card--p2 .score-input:focus {
  border-color: #ff2d78;
  box-shadow: 0 0 0 2px rgba(255,45,120,0.2), 0 0 18px rgba(255,45,120,0.18);
}

/* Stepper buttons per-colour */
[data-theme="cyberpunk"] .score-btn { font-family: 'Orbitron', sans-serif; }
[data-theme="cyberpunk"] .match-player-card--p1 .score-btn:hover {
  border-color: #00fff5; color: #00fff5;
  box-shadow: 0 0 10px rgba(0,255,245,0.45);
}
[data-theme="cyberpunk"] .match-player-card--p2 .score-btn:hover {
  border-color: #ff2d78; color: #ff2d78;
  box-shadow: 0 0 10px rgba(255,45,120,0.45);
}

/* H2H VS panel */
[data-theme="cyberpunk"] .hvp-vs {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.12em;
}
[data-theme="cyberpunk"] .hvp-w,
[data-theme="cyberpunk"] .hvp-l {
  font-family: 'Orbitron', sans-serif;
}
[data-theme="cyberpunk"] .hvp-title { font-family: 'Orbitron', sans-serif; }
[data-theme="cyberpunk"] .hvp-goals { font-family: 'Share Tech Mono', monospace; }

/* Submit match button */
[data-theme="cyberpunk"] .btn-submit-match {
  letter-spacing: 0.15em;
  box-shadow: 0 0 18px rgba(255,45,120,0.5);
}
[data-theme="cyberpunk"] .btn-submit-match:hover {
  box-shadow: 0 0 30px rgba(255,45,120,0.75);
}

/* Cyberpunk — bottom nav */
[data-theme="cyberpunk"] .bottom-nav {
  border-top-color: #380050;
  box-shadow: 0 -2px 20px rgba(255,45,120,0.15);
}
[data-theme="cyberpunk"] .bottom-nav-tab.active {
  text-shadow: 0 0 10px rgba(0,255,245,0.6);
}
[data-theme="cyberpunk"] .bottom-nav-tab span,
[data-theme="cyberpunk"] .bottom-nav-tab i {
  font-family: 'Orbitron', sans-serif;
}

/* Cyberpunk — season pills */
[data-theme="cyberpunk"] .season-pill {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
}
[data-theme="cyberpunk"] .season-pill.active {
  box-shadow: 0 0 12px rgba(255,45,120,0.5);
}

/* Cyberpunk — champion banner */
[data-theme="cyberpunk"] .champion-banner {
  box-shadow: 0 0 20px rgba(255,224,0,0.25), inset 0 0 30px rgba(0,0,0,0.6);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
[data-theme="cyberpunk"] .champion-name {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 12px rgba(255,224,0,0.5);
}

/* Cyberpunk — quick stat cards */
[data-theme="cyberpunk"] .quick-stat-card {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 8px rgba(0,255,245,0.15);
}
[data-theme="cyberpunk"] .quick-stat-value {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 8px rgba(0,255,245,0.4);
}
[data-theme="cyberpunk"] .quick-stat-label {
  font-family: 'Orbitron', sans-serif;
}

/* Cyberpunk — leaderboard */
[data-theme="cyberpunk"] .lb-name {
  font-family: 'Orbitron', sans-serif;
}
[data-theme="cyberpunk"] .lb-rank {
  font-family: 'Orbitron', sans-serif;
}

/* Cyberpunk — player list */
[data-theme="cyberpunk"] .player-list-item {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* ----------------------------------------------------------------
   FUTURE THEME SLOT — just add [data-theme="retro"] { ... } etc.
   ---------------------------------------------------------------- */