/* =================================================================
   MySetMatch — Per-Sport Theme System
   Each sport overrides CSS custom properties defined in :root.
   The body carries data-sport="<slug>" set by _Layout.cshtml.
   ================================================================= */

/* ---------------------------------------------------------------
   Smooth transition when the sport cookie changes and the page
   reloads. Also used for in-page class swaps if needed.
--------------------------------------------------------------- */
body {
  transition:
    background-color 0.35s ease,
    color 0.2s ease;
}

/* ---------------------------------------------------------------
   TABLE TENNIS (default — defined in site.css :root)
   Listed here for completeness / easy comparison.
--------------------------------------------------------------- */
[data-sport="table-tennis"],
:root {
  --sport-primary:        #1A365D;   /* deep navy          */
  --sport-secondary:      #2B4C8C;   /* medium blue         */
  --sport-accent:         #FF9F1C;   /* ball orange         */
  --sport-accent-light:   rgba(255, 159, 28, 0.15);
  --sport-accent-glow:    rgba(255, 159, 28, 0.45);
  --sport-secondary-glow: rgba(43,  76, 140, 0.4);
  --sport-page-bg:        #F4F6F7;
  --sport-page-bg-tint:   #EBF4FF;   /* subtle blue wash    */
  --sport-icon-gradient:  linear-gradient(135deg, #FF9F1C 0%, #2B4C8C 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #0f2044 0%, #1a365d 35%, #2b4c8c 65%, #1e3a6e 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #0f2044 0%, #1a365d 50%, #2b4c8c 100%);
  --sport-feature-bg:     rgba(43, 76, 140, 0.1);
  --sport-table-hover:    rgba(43, 76, 140, 0.04);
}

/* ---------------------------------------------------------------
   TENNIS  —  lush court green + tennis ball yellow
--------------------------------------------------------------- */
[data-sport="tennis"] {
  --sport-primary:        #1B5E20;   /* dark court green    */
  --sport-secondary:      #2E7D32;   /* medium green        */
  --sport-accent:         #CDDC39;   /* lime / ball yellow  */
  --sport-accent-light:   rgba(205, 220, 57, 0.15);
  --sport-accent-glow:    rgba(205, 220, 57, 0.5);
  --sport-secondary-glow: rgba(46, 125, 50, 0.4);
  --sport-page-bg:        #F1F8E9;
  --sport-page-bg-tint:   #E8F5E9;
  --sport-icon-gradient:  linear-gradient(135deg, #CDDC39 0%, #2E7D32 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #0a2a0c 0%, #1b5e20 35%, #2e7d32 65%, #1a6b25 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #0a2a0c 0%, #1b5e20 50%, #2e7d32 100%);
  --sport-feature-bg:     rgba(46, 125, 50, 0.1);
  --sport-table-hover:    rgba(46, 125, 50, 0.04);
}

/* ---------------------------------------------------------------
   BADMINTON  —  deep purple + vivid magenta accent
--------------------------------------------------------------- */
[data-sport="badminton"] {
  --sport-primary:        #4A148C;   /* deep purple         */
  --sport-secondary:      #6A1B9A;   /* medium purple       */
  --sport-accent:         #D500F9;   /* neon magenta        */
  --sport-accent-light:   rgba(213, 0, 249, 0.12);
  --sport-accent-glow:    rgba(213, 0, 249, 0.45);
  --sport-secondary-glow: rgba(106, 27, 154, 0.4);
  --sport-page-bg:        #F5F0FF;
  --sport-page-bg-tint:   #EDE7F6;
  --sport-icon-gradient:  linear-gradient(135deg, #D500F9 0%, #6A1B9A 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #1a0038 0%, #4a148c 35%, #6a1b9a 65%, #38006b 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #1a0038 0%, #4a148c 50%, #6a1b9a 100%);
  --sport-feature-bg:     rgba(106, 27, 154, 0.1);
  --sport-table-hover:    rgba(106, 27, 154, 0.04);
}

/* ---------------------------------------------------------------
   SQUASH  —  burnt amber + deep orange
--------------------------------------------------------------- */
[data-sport="squash"] {
  --sport-primary:        #7A1F00;   /* dark burnt orange   */
  --sport-secondary:      #C94C12;   /* vivid orange        */
  --sport-accent:         #FFB74D;   /* warm amber          */
  --sport-accent-light:   rgba(255, 183, 77, 0.15);
  --sport-accent-glow:    rgba(255, 183, 77, 0.5);
  --sport-secondary-glow: rgba(201, 76, 18, 0.4);
  --sport-page-bg:        #FFF8F5;
  --sport-page-bg-tint:   #FBE9E7;
  --sport-icon-gradient:  linear-gradient(135deg, #FFB74D 0%, #C94C12 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #3d0e00 0%, #7a1f00 35%, #c94c12 65%, #6e1a00 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #3d0e00 0%, #7a1f00 50%, #c94c12 100%);
  --sport-feature-bg:     rgba(201, 76, 18, 0.1);
  --sport-table-hover:    rgba(201, 76, 18, 0.04);
}

/* ---------------------------------------------------------------
   RACQUETBALL  —  dark crimson + hot pink
--------------------------------------------------------------- */
[data-sport="racquetball"] {
  --sport-primary:        #7A0035;   /* deep crimson        */
  --sport-secondary:      #B0003A;   /* vivid red           */
  --sport-accent:         #FF4081;   /* hot pink / coral    */
  --sport-accent-light:   rgba(255, 64, 129, 0.12);
  --sport-accent-glow:    rgba(255, 64, 129, 0.5);
  --sport-secondary-glow: rgba(176, 0, 58, 0.4);
  --sport-page-bg:        #FFF5F8;
  --sport-page-bg-tint:   #FCE4EC;
  --sport-icon-gradient:  linear-gradient(135deg, #FF4081 0%, #B0003A 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #3d0018 0%, #7a0035 35%, #b0003a 65%, #6b0030 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #3d0018 0%, #7a0035 50%, #b0003a 100%);
  --sport-feature-bg:     rgba(176, 0, 58, 0.1);
  --sport-table-hover:    rgba(176, 0, 58, 0.04);
}

/* ---------------------------------------------------------------
   PADEL  —  deep teal + seafoam green
--------------------------------------------------------------- */
[data-sport="padel"] {
  --sport-primary:        #004D40;   /* dark teal           */
  --sport-secondary:      #00796B;   /* medium teal         */
  --sport-accent:         #64FFDA;   /* bright seafoam      */
  --sport-accent-light:   rgba(100, 255, 218, 0.12);
  --sport-accent-glow:    rgba(100, 255, 218, 0.45);
  --sport-secondary-glow: rgba(0, 121, 107, 0.4);
  --sport-page-bg:        #F0FAFA;
  --sport-page-bg-tint:   #E0F2F1;
  --sport-icon-gradient:  linear-gradient(135deg, #64FFDA 0%, #00796B 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #001a15 0%, #004d40 35%, #00796b 65%, #00453b 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #001a15 0%, #004d40 50%, #00796b 100%);
  --sport-feature-bg:     rgba(0, 121, 107, 0.1);
  --sport-table-hover:    rgba(0, 121, 107, 0.04);
}

/* ---------------------------------------------------------------
   PICKLEBALL  —  warm amber + golden yellow
--------------------------------------------------------------- */
[data-sport="pickleball"] {
  --sport-primary:        #7A3D00;   /* dark caramel        */
  --sport-secondary:      #C46C00;   /* warm amber          */
  --sport-accent:         #FFD740;   /* golden yellow       */
  --sport-accent-light:   rgba(255, 215, 64, 0.15);
  --sport-accent-glow:    rgba(255, 215, 64, 0.5);
  --sport-secondary-glow: rgba(196, 108, 0, 0.4);
  --sport-page-bg:        #FFFBF0;
  --sport-page-bg-tint:   #FFF8E1;
  --sport-icon-gradient:  linear-gradient(135deg, #FFD740 0%, #C46C00 100%);
  --sport-hero-gradient:  linear-gradient(135deg, #3d1e00 0%, #7a3d00 35%, #c46c00 65%, #6b3400 100%);
  --sport-hero-mobile:    linear-gradient(135deg, #3d1e00 0%, #7a3d00 50%, #c46c00 100%);
  --sport-feature-bg:     rgba(196, 108, 0, 0.1);
  --sport-table-hover:    rgba(196, 108, 0, 0.04);
}

/* =================================================================
   GLOBAL SPORT-AWARE OVERRIDES
   These rules use the CSS vars above and apply to all sports.
   They come AFTER site.css in the <head>, so they win specificity.
   ================================================================= */

/* Body background tint */
body {
  background-color: var(--sport-page-bg, #F4F6F7);
}

/* Headings use sport primary */
h1, h2, h3, h4, h5, h6 {
  color: var(--sport-primary);
}

/* Link colors */
a {
  color: var(--sport-secondary);
}
a:hover {
  color: var(--sport-accent);
}

/* Navbar */
.navbar {
  background-color: var(--sport-primary, #1A365D) !important;
  border-bottom: 3px solid var(--sport-accent, #FF9F1C) !important;
  box-shadow: 0 2px 12px var(--sport-secondary-glow, rgba(43,76,140,0.3)) !important;
}

.navbar-icon-box {
  background: var(--sport-icon-gradient) !important;
  box-shadow: 0 4px 12px var(--sport-accent-glow) !important;
}

.navbar-brand:hover .navbar-icon-box {
  box-shadow: 0 6px 16px var(--sport-accent-glow) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--sport-accent) !important;
}

.navbar .dropdown-menu {
  background-color: color-mix(in srgb, var(--sport-primary) 90%, black 10%) !important;
}

/* Footer */
.footer {
  background-color: var(--sport-primary, #1A365D) !important;
  border-top: 4px solid var(--sport-accent, #FF9F1C) !important;
}
.footer a:hover {
  color: var(--sport-accent) !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--sport-secondary) 0%, var(--sport-primary) 100%) !important;
  box-shadow: 0 4px 15px var(--sport-secondary-glow) !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px var(--sport-secondary-glow) !important;
}

.btn-gradient {
  background: linear-gradient(135deg, var(--sport-secondary), var(--sport-primary)) !important;
}
.btn-gradient:hover {
  box-shadow: 0 4px 15px var(--sport-secondary-glow) !important;
}

.btn-accent {
  background: linear-gradient(135deg, var(--sport-accent) 0%, color-mix(in srgb, var(--sport-accent) 75%, black 25%) 100%) !important;
  color: var(--sport-primary) !important;
  box-shadow: 0 4px 15px var(--sport-accent-glow) !important;
}
.btn-accent:hover {
  box-shadow: 0 6px 20px var(--sport-accent-glow) !important;
  color: var(--sport-primary) !important;
}

/* Hero primary button */
.hero-btn-primary {
  background: linear-gradient(135deg, var(--sport-accent), color-mix(in srgb, var(--sport-accent) 80%, black 20%)) !important;
  box-shadow: 0 8px 24px var(--sport-accent-glow) !important;
  color: var(--sport-primary) !important;
}
.hero-btn-primary:hover {
  box-shadow: 0 14px 32px var(--sport-accent-glow) !important;
  color: var(--sport-primary) !important;
}

/* Hero section */
.hero-section {
  background: var(--sport-hero-gradient) !important;
}
@media (max-width: 768px) {
  .hero-section {
    background: var(--sport-hero-mobile) !important;
  }
}

/* Hero orbs tinted to sport secondary */
.hero-orb-1 {
  background: radial-gradient(circle, color-mix(in srgb, var(--sport-secondary) 70%, transparent 30%) 0%, transparent 70%) !important;
}

/* Page header */
.page-header {
  background: linear-gradient(135deg, var(--sport-secondary) 0%, var(--sport-primary) 100%) !important;
}
.page-header::before {
  background: radial-gradient(circle, var(--sport-accent-light) 0%, transparent 70%) !important;
}
.page-header .header-btn.primary {
  color: var(--sport-secondary) !important;
}

/* Content card gradient headers */
.content-card .card-header-gradient,
.table-card .card-header {
  background: linear-gradient(135deg, var(--sport-secondary), var(--sport-primary)) !important;
}

/* Stat card icon */
.stat-card .stat-icon.blue {
  background: linear-gradient(135deg, var(--sport-secondary), var(--sport-primary)) !important;
}

/* Stat card value */
.stat-card .stat-value {
  color: var(--sport-primary) !important;
}

/* Form focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--sport-secondary) !important;
  box-shadow: 0 0 0 4px var(--sport-accent-light) !important;
}

/* Form modern */
.form-modern .form-control:focus,
.form-modern .form-select:focus {
  border-color: var(--sport-secondary) !important;
  box-shadow: 0 0 0 3px var(--sport-accent-light) !important;
}

/* Score card */
.score-card {
  border-left-color: var(--sport-secondary) !important;
}

/* Features section */
.features-label {
  background: var(--sport-feature-bg) !important;
  color: var(--sport-secondary) !important;
}
.features-title {
  color: var(--sport-primary) !important;
}
.feature-card-icon--blue {
  background: var(--sport-feature-bg) !important;
  color: var(--sport-secondary) !important;
}
.feature-card:hover {
  box-shadow: 0 16px 40px color-mix(in srgb, var(--sport-primary) 12%, transparent 88%) !important;
}
.feature-card--accent {
  border-color: var(--sport-secondary) !important;
}

/* Step numbers */
.step-num {
  background: var(--sport-secondary) !important;
}

/* Feature list icons */
.feature-list-icon {
  background: var(--sport-feature-bg) !important;
  color: var(--sport-secondary) !important;
}

/* Badge primary */
.badge-primary {
  background-color: var(--sport-secondary) !important;
}

/* Table hover */
.table-card .table tbody tr:hover {
  background: var(--sport-table-hover) !important;
}

/* Sport selector button — border tracks sport accent */
.btn-sport-selector {
  border-color: rgba(255,255,255,0.28) !important;
}
.btn-sport-selector:hover,
.btn-sport-selector.show {
  border-color: var(--sport-accent) !important;
  box-shadow: 0 2px 14px var(--sport-accent-glow) !important;
}

/* Active sport left border in picker panel */
.sport-pick-btn--active {
  border-left-color: var(--sport-accent) !important;
}
.sport-pick-btn--active .sport-pick-name {
  color: #fff !important;
}
.sport-pick-check {
  color: var(--sport-accent) !important;
}

/* Sport context bar — accent-tinted left edge */
.sport-context-bar {
  background: linear-gradient(90deg, var(--sport-accent-light) 0%, transparent 70%) !important;
  border-bottom-color: color-mix(in srgb, var(--sport-accent) 15%, transparent 85%) !important;
}
.sport-ctx-name {
  color: var(--sport-primary) !important;
}
.sport-ctx-switch {
  color: var(--sport-secondary) !important;
  border-color: var(--sport-secondary) !important;
}

/* Sport badge */
.sport-badge {
  background: var(--sport-feature-bg) !important;
  color: var(--sport-secondary) !important;
}

/* Sport grid selector (Tournament Create) */
.sport-grid-selector .btn-check:checked + .btn-outline-primary {
  background: var(--sport-primary) !important;
  border-color: var(--sport-primary) !important;
}

/* =================================================================
   PER-SPORT ICON BUBBLE COLORS
   These are STATIC classes (not driven by data-sport) because the
   picker panel shows ALL sports at once — each needs its own color.
   ================================================================= */

/* Selector button pill */
.sport-sel-pill--table-tennis { background: linear-gradient(135deg, #FF9F1C 0%, #2B4C8C 100%); }
.sport-sel-pill--tennis       { background: linear-gradient(135deg, #CDDC39 0%, #2E7D32 100%); }
.sport-sel-pill--badminton    { background: linear-gradient(135deg, #D500F9 0%, #6A1B9A 100%); }
.sport-sel-pill--squash       { background: linear-gradient(135deg, #FFB74D 0%, #C94C12 100%); }
.sport-sel-pill--racquetball  { background: linear-gradient(135deg, #FF4081 0%, #B0003A 100%); }
.sport-sel-pill--padel        { background: linear-gradient(135deg, #64FFDA 0%, #00796B 100%); }
.sport-sel-pill--pickleball   { background: linear-gradient(135deg, #FFD740 0%, #C46C00 100%); }

/* Dropdown icon bubbles (38×38 rounded squares) */
.sport-pick-icon--table-tennis { background: linear-gradient(135deg, #FF9F1C 0%, #2B4C8C 100%); }
.sport-pick-icon--tennis       { background: linear-gradient(135deg, #CDDC39 0%, #1B5E20 100%); }
.sport-pick-icon--badminton    { background: linear-gradient(135deg, #D500F9 0%, #4A148C 100%); }
.sport-pick-icon--squash       { background: linear-gradient(135deg, #FFB74D 0%, #7A1F00 100%); }
.sport-pick-icon--racquetball  { background: linear-gradient(135deg, #FF4081 0%, #7A0035 100%); }
.sport-pick-icon--padel        { background: linear-gradient(135deg, #64FFDA 0%, #004D40 100%); }
.sport-pick-icon--pickleball   { background: linear-gradient(135deg, #FFD740 0%, #7A3D00 100%); }

/* Context bar icon (small 22px version reuses same classes) */

/* Bootstrap primary overrides */
:root {
  --bs-primary: var(--sport-secondary);
  --bs-primary-rgb: 43, 76, 140;
  --bs-link-color: var(--sport-secondary);
  --bs-link-hover-color: var(--sport-accent);
}