/*Copyright (c) 2026 Gysbert Marthinus Herbst. All rights reserved.
  Unauthorised copying, modification, or distribution of this file is strictly prohibited.
  Version: 1*/

/* ─── Dark / Dusk theme ──────────────────────────────────────────────────────
   Loaded LAST in <head> on every page except the projector board (see
   templates/_theme_head.html). Dark is the app as it ships — this file does
   nothing until theme.js sets <html data-theme="dusk">.

   Dusk is the same navy, lifted to a mid-tone: white text, the same brand red
   and win/loss colours, so no page needs a second set of text colours. It works
   by (1) redefining the colour tokens, (2) laying a blue wash over the
   existing backdrop (body::before) instead of replacing it, so per-school
   glows from _tenant_theme.html survive, and (3) lifting the few surfaces that
   hard-code a near-black fill. Selectors start with html[...] so they beat
   :root tokens and page-local <style> blocks regardless of load order. */

html[data-theme="dusk"] {
  --bg2: rgba(44, 58, 96, 0.78);
  --bg3: rgba(80, 98, 146, 0.40);
  --card: rgba(58, 74, 116, 0.60);
  --border: rgba(255, 255, 255, 0.15);
  --border2: rgba(255, 255, 255, 0.26);
  --accent: #e0112f;
  --accent2: #ff4d5e;
  --accent3: #ff7a8a;
  --text: #ffffff;
  --text2: #ffffff;
  --text3: #9db0d6;
  --win: #4ff08d;
  --loss: #ff6577;
  --draw: #ffd84d;
  --ring: 0 0 0 3px rgba(224, 17, 47, 0.32);
}

/* Backdrop: lift the existing dark photo wash toward navy. Sits above the
   body background (incl. tenant glows) and below all content. */
html[data-theme="dusk"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(110, 140, 220, 0.22), transparent 70%),
    rgba(72, 94, 158, 0.36);
}

/* Live scoring and spectator paint their own photo on html AND body, so the
   body::before wash above would sit underneath body's background. theme.js
   adds .mdxv-own-bg to <html> on those pages; give body the lifted backdrop
   directly. (Per-school glows are not layered here.) */
html[data-theme="dusk"].mdxv-own-bg body {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 17, 47, 0.12), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(110, 140, 220, 0.28), transparent 70%),
    linear-gradient(180deg, rgba(50, 66, 110, 0.62) 0%, rgba(36, 50, 92, 0.78) 100%),
    #2a3552 url('/static/rugby_stadium.webp') center / cover no-repeat !important;
}

/* Pages that paint the photo on their own layers (school picker, access pages) */
html[data-theme="dusk"] .stadium-bg { filter: grayscale(0.3) brightness(1.05) contrast(1.04) saturate(1.1); }
html[data-theme="dusk"] .stadium-veil {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(224, 17, 47, 0.14), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(110, 140, 220, 0.30), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 42%, transparent 40%, rgba(24, 34, 66, 0.55) 100%),
    linear-gradient(180deg, rgba(40, 56, 104, 0.40) 0%, rgba(30, 44, 86, 0.58) 100%);
}

html[data-theme="dusk"] body:has(.stadium-veil) .card {
  background: rgba(60, 78, 124, 0.74);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Sidebar (refresh.css hard-codes a near-black gradient) */
html[data-theme="dusk"] .sidebar {
  background: linear-gradient(180deg, rgba(54, 70, 116, 0.84), rgba(40, 54, 96, 0.84));
  box-shadow: 0 24px 60px -20px rgba(10, 16, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="dusk"] .nav-link { color: #d3dcf2; }
html[data-theme="dusk"] .nav-sec { color: #8ea0cc; }
html[data-theme="dusk"] .select-styled option,
html[data-theme="dusk"] select option { background: #26345c; color: #fff; }

/* ─── The switch (header, top-right) ─────────────────────────────────────── */
.mdxv-theme {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}
.mdxv-theme button {
  display: grid; place-items: center;
  width: 34px; height: 30px; padding: 0;
  border: none; border-radius: 8px;
  background: transparent; color: #9db0d6;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.mdxv-theme button:hover { color: #fff; }
.mdxv-theme button[aria-pressed="true"] {
  background: #d00020; color: #fff;
  box-shadow: 0 2px 8px rgba(208, 0, 32, 0.35);
}
.mdxv-theme button:focus-visible { outline: 2px solid #ff4d5e; outline-offset: 1px; }
.mdxv-theme svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Pages with no header to sit in (login, access pages, live scoring) */
.mdxv-theme.mdxv-theme-fixed {
  position: fixed; top: 14px; right: 14px; z-index: 9999;
  background: rgba(8, 12, 28, 0.55);
  backdrop-filter: blur(8px);
}
html[data-theme="dusk"] .mdxv-theme.mdxv-theme-fixed { background: rgba(44, 58, 96, 0.7); }
/* Wrapper used when a header has several right-hand items (admin, spectator) */
.mdxv-hactions { display: flex; align-items: center; gap: 12px; }

/* ─── Dusk: modals, sticky bars and toasts that hard-code a near-black fill ── */
html[data-theme="dusk"] .modal-overlay { background: rgba(16, 22, 48, 0.62); }
html[data-theme="dusk"] .modal {
  background: linear-gradient(180deg, #36477f, #28376a);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 40px 90px -20px rgba(8, 12, 36, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
html[data-theme="dusk"] .modal-footer { background: rgba(30, 42, 84, 0.55); }
html[data-theme="dusk"] .modal-close { background: rgba(255, 255, 255, 0.10); }
html[data-theme="dusk"] .players-panel-head { background: rgba(48, 62, 104, 0.96); }
html[data-theme="dusk"] body.admin .settings-wrap > .actions { background: rgba(48, 62, 104, 0.88); }
html[data-theme="dusk"] .toast,
html[data-theme="dusk"] body.admin .toast { background: rgba(48, 62, 104, 0.96); }
html[data-theme="dusk"] .jersey-slot.pitch-spot .jersey-clear { background: rgba(40, 54, 96, 0.92); }
/* Live scoring: sit left of the LIVE badge instead of on top of it */
.mdxv-theme.mdxv-theme-live { top: 4px; right: 96px; }