/* ============================================================================
   BLUE MONKEY SUMMER RACE 2026 — Full Competition Theme
   ----------------------------------------------------------------------------
   Drop-in theme for all competition pages. Pairs with main.css + page CSS.
   Requires bmsr-background.png and bmsr-logo.png in /static/.

   Color palette sampled directly from the official BMSR logo:
     - Gorilla body   → periwinkle  #6e86c9  (--bm-blue)
     - "BLUE"         → near-white  #f4f4f4  (--bm-white)
     - "MONKEY"       → sky cyan    #70d3fa  (--bm-cyan)
     - "SUMMER"       → hot pink    #ff6ba8  (--bm-pink)
     - "RACE"         → neon yellow #f8e765  (--bm-yellow)
     - Ring transition → coral      #ffa497  (--bm-coral)
     - Rainbow ring   → pink-coral-yellow-cyan-blue (conic)

   Background: retro-80s tropical sunset (bmsr-background.png)
     Deep black night sky, neon-pink road trails left, yellow/cyan right,
     palm silhouettes, gold sun on horizon. High contrast, zero compromise.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS  (identical names to bmsr-2026.css — safe to chain-load)
   ---------------------------------------------------------------------------- */
:root {
  /* --- Raw brand palette --- */
  --bm-black:   #000000;
  --bm-ink:     #0a0a0d;
  --bm-ink-2:   #131318;
  --bm-line:    #26262e;
  --bm-white:   #f4f4f4;

  --bm-blue:    #6e86c9;
  --bm-cyan:    #70d3fa;
  --bm-pink:    #ff6ba8;
  --bm-yellow:  #f8e765;
  --bm-coral:   #ffa497;

  /* --- Gradients --- */
  --bm-rainbow: linear-gradient(
      100deg,
      var(--bm-pink)   0%,
      var(--bm-coral)  22%,
      var(--bm-yellow) 42%,
      var(--bm-cyan)   68%,
      var(--bm-blue)   100%);

  --bm-ring-gradient: conic-gradient(
      from 200deg,
      var(--bm-pink),
      var(--bm-coral),
      var(--bm-yellow),
      var(--bm-cyan),
      var(--bm-blue),
      var(--bm-pink));

  /* --- Glass surfaces: semi-transparent so background bleeds through --- */
  --bm-glass:         rgba(7,  7, 10, 0.72);
  --bm-glass-hover:   rgba(14, 14, 20, 0.82);
  --bm-glass-border:  rgba(255, 255, 255, 0.07);
  --bm-glass-blur:    blur(14px);

  /* --- Semantic tokens (override base main.css values) --- */
  --color-bg:        var(--bm-black);
  --color-surface:   var(--bm-glass);
  --color-surface-2: var(--bm-glass-hover);
  --color-border:    var(--bm-glass-border);
  --color-text:      var(--bm-white);
  --color-text-dim:  #9b9ba6;
  --color-primary:   var(--bm-cyan);
  --color-accent:    var(--bm-yellow);
  --color-highlight: var(--bm-yellow);
  --color-muted:     #6c6c78;

  /* --- Neon glows --- */
  --glow-cyan:   0 0 22px rgba(112, 211, 250, .50);
  --glow-pink:   0 0 22px rgba(255, 107, 168, .50);
  --glow-yellow: 0 0 22px rgba(248, 231, 101, .50);
  --glow-blue:   0 0 22px rgba(110, 134, 201, .50);
  --glow-coral:  0 0 22px rgba(255, 164, 151, .45);

  /* --- Typography --- */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body:    "Archivo", system-ui, sans-serif;

  /* --- Radius --- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;
}


/* ----------------------------------------------------------------------------
   2. BODY — fixed background with dark veil for legibility
   ---------------------------------------------------------------------------- */
body {
  background-color: var(--bm-black);
  background-image: url('/static/bmsr-background.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Dark overlay: keeps vivid background readable, lets it glow through edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, .72) 0%,
    rgba(0, 0, 0, .55) 50%,
    rgba(0, 0, 0, .68) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* All page content sits above the overlay */
body > * {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------------------
   3. GLOBAL ADMIN FLOATING BUTTON
   ---------------------------------------------------------------------------- */
.ga-floating-logout,
.ga-floating-login {
  background: var(--bm-glass);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
  border-color: var(--bm-glass-border);
  color: var(--color-muted);
}

.ga-floating-logout:hover {
  color: var(--bm-white);
  border-color: var(--bm-cyan);
  box-shadow: var(--glow-cyan);
}

.ga-floating-login {
  color: var(--bm-cyan);
  border-color: rgba(112, 211, 250, .30);
}

.ga-floating-login:hover {
  color: var(--bm-white);
  box-shadow: var(--glow-cyan);
}


/* ============================================================================
   4. HOME PAGE
   ============================================================================ */

.home-container {
  align-items: center;
}

.home-title h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bm-yellow);
  text-shadow: var(--glow-yellow);
}

.home-location {
  color: var(--color-muted);
  letter-spacing: .14em;
}

/* Nav buttons: glassmorphism base */
.nav-btn {
  font-family: var(--font-body);
  background: var(--bm-glass);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
  border: 1.5px solid var(--bm-glass-border);
  border-radius: var(--r-md);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease,
              border-color .16s ease;
}

.nav-btn__label { letter-spacing: .08em; }

.nav-btn:hover {
  transform: translateY(-3px);
  background: var(--bm-glass-hover);
}

/* Per-button BMSR brand color mapping */
.nav-btn--athlete {
  border-color: rgba(255, 107, 168, .30);
  color: var(--bm-pink);
}
.nav-btn--athlete:hover {
  border-color: var(--bm-pink);
  box-shadow: var(--glow-pink);
}

.nav-btn--leaderboard {
  border-color: rgba(248, 231, 101, .30);
  color: var(--bm-yellow);
}
.nav-btn--leaderboard:hover {
  border-color: var(--bm-yellow);
  box-shadow: var(--glow-yellow);
}

.nav-btn--admin {
  border-color: rgba(255, 164, 151, .30);
  color: var(--bm-coral);
}
.nav-btn--admin:hover {
  border-color: var(--bm-coral);
  box-shadow: var(--glow-coral);
}

.nav-btn--judge {
  border-color: rgba(110, 134, 201, .30);
  color: var(--bm-blue);
}
.nav-btn--judge:hover {
  border-color: var(--bm-blue);
  box-shadow: var(--glow-blue);
}

.nav-btn--pictures {
  border-color: rgba(255, 107, 168, .18);
  color: rgba(255, 107, 168, .75);
}
.nav-btn--pictures:hover {
  border-color: rgba(255, 107, 168, .60);
  box-shadow: var(--glow-pink);
}

.nav-btn--heats {
  border-color: rgba(255, 164, 151, .30);
  color: var(--bm-coral);
}
.nav-btn--heats:hover {
  border-color: var(--bm-coral);
  box-shadow: var(--glow-coral);
}

.nav-btn--athletes {
  border-color: rgba(112, 211, 250, .20);
  color: rgba(112, 211, 250, .80);
}
.nav-btn--athletes:hover {
  border-color: var(--bm-cyan);
  box-shadow: var(--glow-cyan);
}

.nav-btn--categories {
  border-color: rgba(110, 134, 201, .25);
  color: var(--bm-blue);
}
.nav-btn--categories:hover {
  border-color: var(--bm-blue);
  box-shadow: var(--glow-blue);
}

.nav-btn--stations {
  border-color: rgba(248, 231, 101, .20);
  color: rgba(248, 231, 101, .80);
}
.nav-btn--stations:hover {
  border-color: var(--bm-yellow);
  box-shadow: var(--glow-yellow);
}

.nav-btn--settings {
  border-color: rgba(112, 211, 250, .15);
  color: rgba(112, 211, 250, .65);
}
.nav-btn--settings:hover {
  border-color: var(--bm-cyan);
  box-shadow: var(--glow-cyan);
}

/* ============================================================================
   5. LEADERBOARD PAGE
   ============================================================================ */

.lb-header,
.roster-header,
.ath-header {
  background: var(--bm-glass);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
  border-bottom: 2px solid transparent;
  border-image: var(--bm-rainbow) 1;
}

.lb-header h1,
.ath-header h1 {
  font-family: var(--font-display);
  letter-spacing: .08em;
  color: var(--bm-yellow);
  text-shadow: var(--glow-yellow);
}

.lb-tabs {
  background: rgba(0, 0, 0, .40);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
  border-bottom: 1px solid var(--bm-glass-border);
  padding-inline: 1.2rem;
}

.lb-tab { color: var(--color-muted); }
.lb-tab:hover { color: var(--bm-white); }
.lb-tab.is-active {
  color: var(--bm-yellow);
  border-bottom-color: var(--bm-yellow);
}

.lb-table thead tr {
  color: var(--bm-cyan);
  border-bottom-color: var(--bm-glass-border);
}

.lb-row {
  border-bottom-color: var(--bm-glass-border);
  transition: background .1s;
}
.lb-row:hover { background: rgba(112, 211, 250, .04); }

/* Podium — remap to BMSR brand glows */
.lb-row--gold   td:first-child { color: var(--bm-yellow); }
.lb-row--silver td:first-child { color: #b0b0c0; }
.lb-row--bronze td:first-child { color: var(--bm-coral); }

.lb-row--gold   { background: rgba(248, 231, 101, .05); }
.lb-row--silver { background: rgba(176, 176, 192, .03); }
.lb-row--bronze { background: rgba(255, 164, 151, .04); }

.lb-row--gold   .lb-time { color: var(--bm-yellow); text-shadow: var(--glow-yellow); }
.lb-row--silver .lb-time { color: #c0c0d0; }
.lb-row--bronze .lb-time { color: var(--bm-coral); text-shadow: var(--glow-coral); }

.lb-splits-cell { background: rgba(0, 0, 0, .55); }

.lb-split-item {
  background: var(--bm-glass);
  border-color: var(--bm-glass-border);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
}

.lb-penalty__amount { color: var(--bm-coral); }

.lb-back:hover { color: var(--bm-cyan); }

.lb-row--expandable:hover .lb-col-team { color: var(--bm-cyan); }


/* ============================================================================
   6. GENERIC GLASS PANELS (admin, judge, athlete, display pages)
   ============================================================================ */

/* Any section/panel that uses background from main.css */
.section,
.panel,
.card,
[class*="-header"]:not(.lb-header),
[class*="-panel"],
[class*="-wrap"],
[class*="-container"] {
  background: var(--bm-glass);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
  border-color: var(--bm-glass-border);
}

/* Sticky/fixed bars on all pages */
.sticky-bar,
.page-header,
.top-bar {
  background: var(--bm-glass);
  backdrop-filter: var(--bm-glass-blur);
  -webkit-backdrop-filter: var(--bm-glass-blur);
  border-bottom: 1px solid var(--bm-glass-border);
}

/* Tables: glass rows */
table { border-collapse: collapse; }
thead tr { color: var(--bm-cyan); }
tbody tr { border-color: var(--bm-glass-border); }
tbody tr:hover { background: rgba(112, 211, 250, .04); }


/* ============================================================================
   7. FORM INPUTS
   ============================================================================ */

input, select, textarea {
  background: rgba(10, 10, 13, .85);
  color: var(--bm-white);
  border: 1.5px solid var(--bm-glass-border);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bm-cyan);
  box-shadow: var(--glow-cyan);
}

input::placeholder { color: var(--color-muted); }


/* ============================================================================
   8. BUTTONS (primary action)

   The theme only styles OPT-IN buttons: classless <button>, the .btn class and
   submit/button inputs. App control buttons carry their own classes (and CSS in
   main.css/admin.css/judge.css/...), so they must NOT inherit the cyan pill look
   -- targeting only `button:not([class])` keeps the theme out of their way.
   ============================================================================ */

button:not([class]),
.btn,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .18s ease, filter .18s ease, transform .15s ease;
}

/* Primary: cyan */
button:not([class]),
.btn,
input[type="submit"] {
  background: var(--bm-cyan);
  color: #000;
  border: none;
  padding: .6em 1.4em;
  border-radius: var(--r-pill);
}

button:not([class]):hover,
.btn:hover,
input[type="submit"]:hover {
  box-shadow: var(--glow-cyan);
  filter: brightness(1.08);
}

/* Danger / warning buttons */
.btn--danger,
button.danger { background: var(--bm-pink); color: #000; }
.btn--danger:hover, button.danger:hover { box-shadow: var(--glow-pink); }

/* Secondary: outlined */
.btn--ghost,
button.ghost {
  background: transparent;
  color: var(--bm-cyan);
  border: 1.5px solid rgba(112, 211, 250, .40);
}
.btn--ghost:hover, button.ghost:hover {
  border-color: var(--bm-cyan);
  box-shadow: var(--glow-cyan);
}


/* ============================================================================
   9. ACCENT DIVIDERS & DECORATIVE ELEMENTS
   ============================================================================ */

/* Rainbow horizontal rule (same as bmsr-2026.css .bm-rule) */
hr,
.divider {
  height: 2px;
  border: 0;
  background: var(--bm-rainbow);
  border-radius: 2px;
  margin-block: 1rem;
}

/* Headings: display font with yellow glow for top-level */
h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bm-yellow);
  text-shadow: var(--glow-yellow);
  letter-spacing: .06em;
}

h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bm-white);
  letter-spacing: .04em;
}

/* Selection */
::selection { background: var(--bm-pink); color: #000; }


/* ============================================================================
   10. SCROLLBAR (Webkit)
   ============================================================================ */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #070709; }
::-webkit-scrollbar-thumb {
  background: var(--bm-glass-border);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: rgba(112, 211, 250, .30); }


/* ============================================================================
   11. MOTION — respect user preferences
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}