/**
 * Synergy Sports CMS — HUD overlay
 * Load AFTER hud-theme style.css + main.css + arena-hud.css
 * Version: 1.1.0  |  Matches demo.synergysportscms.com tokens
 *
 * Official theme comment: staff desks stay paper.
 * Club request: desks + portals share Arena HUD.
 * This file makes desks HUD without forking the parent theme.
 */

:root,
body.is-hud {
  --hud-navy: #070b14;
  --hud-navy-2: #0a1628;
  --hud-navy-3: #102036;
  --hud-cyan: #5ad4ff;
  --hud-cyan-dim: rgba(90, 212, 255, 0.28);
  --hud-ink: #e8edf4;
  --hud-muted: rgba(232, 237, 244, 0.62);
  --hud-line: rgba(90, 212, 255, 0.28);
  --hud-glass: rgba(7, 11, 20, 0.62);
  --hud-danger: #c44550;
  --hud-danger-hot: #ff5a6a;
  --hud-ok: #3d8b6e;
  --hud-ok-hot: #4ecf9a;
  --hud-warn: #c9a227;
  --hud-warn-ink: #1a1404;
  --hud-pending: #5a7aa0;
  --hud-disp: "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --hud-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --hud-pad: clamp(16px, 3vw, 40px);
  --hud-nav: 64px;
  --hud-radius: 2px;
}

body.is-hud {
  background: var(--hud-navy);
  color: var(--hud-ink);
  font-family: var(--hud-disp), system-ui, sans-serif;
}

/* Wordmark */
body.is-hud .site-wordmark {
  font-family: var(--hud-disp);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hud-ink);
}

/* Hero strip used on every desk/portal mock */
.hud-page-hero {
  padding: 22px var(--hud-pad) 18px;
  border-bottom: 1px solid var(--hud-line);
  background:
    linear-gradient(180deg, rgba(90, 212, 255, 0.06), transparent 70%),
    var(--hud-navy);
}
.hud-page-hero h1 {
  margin: 0;
  font: 900 clamp(28px, 4vw, 42px) / 1 var(--hud-disp);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hud-page-hero p {
  margin: 6px 0 0;
  color: var(--hud-muted);
  max-width: 62ch;
}

/* Cards / glass */
.hud-card,
.card,
.kpi,
.staff,
.player {
  border: 1px solid var(--hud-line);
  background: rgba(10, 22, 40, 0.55);
  border-radius: var(--hud-radius);
}

/* Buttons */
.hud-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--hud-line);
  background: transparent;
  color: var(--hud-ink);
  font: 800 13px/1 var(--hud-disp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.hud-btn-cyan,
.btn-cyan {
  background: var(--hud-cyan);
  border-color: var(--hud-cyan);
  color: #041018;
}
.hud-btn-ok,
.btn-ok,
.btn-accept {
  background: var(--hud-ok);
  border-color: var(--hud-ok);
  color: #fff;
}
.hud-btn-danger,
.btn-danger,
.btn-decline {
  background: var(--hud-danger);
  border-color: var(--hud-danger);
  color: #fff;
}

/* Status chips */
.chip,
.hud-chip {
  display: inline-block;
  padding: 3px 8px;
  font: 800 11px/1 var(--hud-disp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--hud-line);
  color: var(--hud-ink);
}
.chip-ok,
.hud-chip-ok { background: var(--hud-ok); border-color: var(--hud-ok); color: #fff; }
.chip-warn,
.hud-chip-warn { background: var(--hud-warn); border-color: var(--hud-warn); color: var(--hud-warn-ink); }
.chip-bad,
.hud-chip-bad { background: var(--hud-danger); border-color: var(--hud-danger); color: #fff; }
.chip-pending,
.hud-chip-pending { background: var(--hud-pending); border-color: var(--hud-pending); color: #fff; }

/* Forms on navy */
body.is-hud input,
body.is-hud select,
body.is-hud textarea {
  background: #0d1828;
  color: var(--hud-ink);
  border: 1px solid var(--hud-line);
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--hud-radius);
}
body.is-hud input:focus,
body.is-hud select:focus,
body.is-hud textarea:focus {
  outline: 2px solid var(--hud-cyan);
  outline-offset: 1px;
}

/* Desk rail */
.hud-side,
.side {
  background: var(--hud-navy);
  border-right: 1px solid var(--hud-line);
}
.hud-side a,
.side a {
  color: #9eb4c8;
}
.hud-side a.on,
.side a.on,
.hud-side a:hover,
.side a:hover {
  color: var(--hud-cyan);
}

/* Tables */
body.is-hud table {
  width: 100%;
  border-collapse: collapse;
}
body.is-hud th {
  text-align: left;
  font: 800 11px/1 var(--hud-disp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hud-cyan);
  padding: 8px 6px;
  border-bottom: 1px solid var(--hud-line);
}
body.is-hud td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(90, 212, 255, 0.12);
}

/* Mobile */
@media (max-width: 720px) {
  .hud-side,
  .side { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid var(--hud-line); }
  body.is-hud { display: block; }
}

/* Same frame for player / coach / team photos */
.ss-shot,.players img,.coach img,table img,figure.ss-shot img{
  display:block;object-fit:cover;object-position:top center;
  border:1px solid var(--hud-line);border-radius:2px;
  background:#0a1628;
}
.ss-shot{position:relative;overflow:hidden}
.ss-shot::after,.players a,.coach{
  /* overlay lives on the image box */
}
.ss-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 55%,rgba(7,11,20,.55)),
    repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);
  border:1px solid rgba(90,212,255,.15);
}
.ss-shot-sm,.players img,table img{width:40px;height:40px}
.ss-shot-md,.coach img{width:88px;height:110px}
.ss-shot-lg{width:120px;height:150px}
.ss-shot-team,figure.ss-shot img{
  width:100%;aspect-ratio:16/9;height:auto;object-position:center;
}
.ss-shot-round{border-radius:2px} /* never circle — HUD is square-cut */

.ss-shot-missing,.ss-team-ph{
  position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:16/9;min-height:88px;
  border:1px dashed var(--hud-line);border-radius:2px;
  background:
    linear-gradient(180deg,rgba(90,212,255,.06),transparent 60%),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(90,212,255,.07) 31px 32px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(90,212,255,.07) 31px 32px),
    #0a1628;
  color:var(--hud-muted);text-align:center;
  font:800 11px/1.3 "Arial Narrow",Impact,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
}
.ss-shot-missing::before,.ss-team-ph::before{
  content:"Team photo";
}
.ss-shot-missing::after,.ss-team-ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.2) 2px 3px);
}
.ss-shot-missing[data-team]::before{content:attr(data-team) " · photo"}
.ss-shot:has(img[src=""]),.ss-shot:has(img:not([src])),.ss-shot:has(img[src*="missing"]){
  /* empty src still shows the dashed court plate via background */
}
img.ss-shot-missing{display:none}

/* Bleeding-edge HUD 1.2 — desks only */
body.is-hud[data-hub="director"],
body.is-hud[data-hub="coach"],
body.is-hud[data-hub="public"]{
  --hud-vignette:.06;
}
body.is-hud[data-hub="family"]{
  --hud-vignette:0;
}
body.is-hud::after{
  content:"";pointer-events:none;position:fixed;inset:0;z-index:70;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,var(--hud-vignette,0)) 100%);
}
.hud-page-hero{
  background-image:
    linear-gradient(180deg,rgba(90,212,255,.06),transparent 70%),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(90,212,255,.05) 47px 48px),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(90,212,255,.05) 47px 48px);
  background-size:auto, 96px 96px, 96px 96px;
  animation:hud-grid 24s linear infinite;
}
@keyframes hud-grid{to{background-position:0 0, 96px 48px, 48px 96px}}
.ss-tick:hover .ss-track{animation-play-state:paused}
.kpi, .card, .hud-card{
  position:relative;
}
.kpi::before, a.kpi::before{
  content:"";position:absolute;inset:-1px;border-radius:2px;padding:1px;
  background:conic-gradient(from var(--beam,0deg), var(--hud-cyan), transparent 40%, var(--hud-cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.35;pointer-events:none;
  animation:hud-beam 8s linear infinite;
}
@keyframes hud-beam{to{--beam:360deg}}
@property --beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.kpi b, .kpi-num{
  font-variant-numeric:tabular-nums;
  font-family:var(--hud-mono);
}
.kpi[data-pct]::after{
  content:"";position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;
  background:conic-gradient(var(--hud-cyan) calc(var(--pct)*1%), rgba(90,212,255,.12) 0);
}
.mapwrap svg path.lit{
  filter:drop-shadow(0 0 6px rgba(200,16,46,.55));
}
@media (prefers-reduced-motion:reduce){
  .hud-page-hero,.kpi::before,a.kpi::before,.ss-track{animation:none}
}

html[data-scheme="night-court"] .hud-page-hero::before,
html[data-scheme="night-court"] body.is-hud .hud-page-hero::before{opacity:.03}
html[data-scheme="night-court"] .ss-live,
html[data-scheme="night-court"] .ss-tick em{color:#c8ff3d}
html[data-scheme="night-court"] .ss-live b{background:#c8ff3d;box-shadow:0 0 8px #c8ff3d}
html[data-scheme="night-court"] .hud-page-hero h1{border-bottom:2px solid #c8ff3d;padding-bottom:8px;display:inline-block}

html[data-scheme="command-amber"] .ss-live,
html[data-scheme="command-amber"] .ss-tick em,
html[data-scheme="command-amber"] .ss-role{color:#ffb000}
html[data-scheme="command-amber"] .ss-live b{background:#ffb000;box-shadow:0 0 8px #ffb000}
html[data-scheme="command-amber"] .hud-page-hero h1{border-bottom:2px solid #ffb000;padding-bottom:8px;display:inline-block}
html[data-scheme="command-amber"] .kpi b{color:#ffb000}

.qbar{display:flex;gap:3px;margin:10px 0 6px;align-items:center}
.qbar i{flex:1;height:10px;background:#122033;border-radius:1px}
.qbar i.on{background:#c9a227}
.qbar i.me{background:var(--hud-cyan,#5ad4ff);height:14px;box-shadow:0 0 8px color-mix(in srgb,var(--hud-cyan,#5ad4ff) 50%,transparent)}
.qlbl{font-size:12px;opacity:.75;margin:0 0 10px}