/* ============================================================================
   SWUDeck HUD theme — site-wide cyan "targeting-HUD" skin for the SWU Stats pages.
   CSS-only (no JS). Loaded on SWUDeck chrome only (SiteDef head.styles + the SWU
   Stats pages + Sites/SWUDeck/MenuBar). Matches the deck-builder / SWUSim board.

   Scope notes:
   - Brand login buttons are <a class="patreon-button|discord-button"> (anchors), so the
     button rules below (which target <button>/<input>) never touch them.
   - Destructive semantics (red) are preserved via .btn-danger / [data-danger] opt-outs.
   ========================================================================== */

/* ---- Panels: thin cyan frame + faint glow ---- */
.container.bg-black,
.login.container.bg-black {
  border: 1px solid rgba(140,210,255,0.40) !important;
  box-shadow: 0 0 12px rgba(120,200,255,0.15) !important;
}

/* ---- Interface labels — cyan HUD, UPPERCASE, soft glow (matches the deck editor).
   !important so it wins over inline color styles (e.g. Melee's inline color:#000 labels). ---- */
label {
  color: rgba(205,238,255,0.92) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 5px rgba(120,200,255,0.30) !important;
}

/* ---- Form fields, checkboxes, and the Stats ▾ dropdown panel ----
   Now handled by the shared design-system components (SharedUI/css/components.css) driven by
   this theme's role tokens (--surface-sunken/--border/--surface-raised/--check-* in hud.tokens.css).
   The old cyan-HUD input/checkbox/.dropdown-content rules that lived here were migrated there. */

/* ---- Buttons ----
   Buttons are now handled by the shared design-system component (SharedUI/css/components.css)
   driven by this theme's tokens (SharedUI/Sites/SWUDeck/css/hud.tokens.css). The old chamfered
   cyan-HUD button + semantic-tint rules that lived here were migrated there. Semantic variants
   are now .btn-success / .btn-danger (with .hud-green / .hud-red aliases if still referenced). */

/* ---- Top nav — HUD skin (overrides the shared menuStyles.css; SWUDeck-scoped since hud.css
   only loads on SWUDeck pages). ---- */
.nav-bar .NavBarItem {
  color: rgba(205,238,255,0.92) !important;
  text-shadow: 0 0 5px rgba(120,200,255,0.30) !important;
  transition: color 150ms, text-shadow 150ms !important;
}
.nav-bar .NavBarItem:hover {
  color: #fff !important; text-decoration: none !important;
  text-shadow: 0 0 10px rgba(140,215,255,0.70) !important;
}
/* Nav pill containers — subtle cyan edge + glow */
.nav-bar-user, .nav-bar-links {
  border: 1px solid rgba(140,210,255,0.35) !important;
  box-shadow: 0 0 10px rgba(120,200,255,0.12) !important;
}
.dropdown-arrow { color: rgba(150,215,255,0.90) !important; }
/* .dropdown-content (Stats ▾ popup) now uses the shared dropdown component + hud.tokens.css
   (--surface-raised / --border). The old cyan-HUD !important rules were migrated there. */

/* ---- Mobile burger menu — HUD skin ----
   The icon (a blue rounded box in mobile-responsive.css) becomes a chamfered cyan
   HUD chip, matching the buttons. The <div class="burger-menu"> holds three <span>
   lines; we chamfer via negative-z pseudos and recolor the lines cyan. The slide-in
   panel (.nav-bar.active) goes navy — its .NavBarItem links are already cyan above.
   Scoped to .active so the desktop nav pill's translucent look is untouched. */
.burger-menu {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
  filter: drop-shadow(0 0 4px rgba(115,195,255,0.40));
}
.burger-menu::before {
  content: '' !important; position: absolute !important; inset: 0 !important; z-index: -2 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: rgba(140,210,255,0.80) !important;
}
.burger-menu::after {
  content: '' !important; position: absolute !important; inset: 1.5px !important; z-index: -1 !important;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  background: rgba(20,42,70,0.96) !important;
}
.burger-menu span { background-color: rgba(180,228,255,0.95) !important; }

/* Slide-in mobile nav panel — navy HUD (only when the burger is open) */
.nav-bar.active .nav-bar-user,
.nav-bar.active .nav-bar-links {
  background: rgba(14,26,44,0.98) !important;
}

/* ---- Card-browser panel (MainMenu) — the RenderPane card search widget.
   Its base look (rounded pill tabs + rounded filter bar) comes from NextTurn.php; the
   deck-builder overrides it inline in GameLayout.php. MainMenu loads neither of those
   HUD overrides, so mirror the deck-builder recipe here: chamfered cyan tabs + a cyan
   filter bar. Same negative-z pseudo chamfer as the buttons above. ---- */
/* .panelTab (card-browser tabs) now uses the shared .tab/.panelTab component
   (SharedUI/css/components.css), chamfered via this theme's button tokens in hud.tokens.css. */

.filterBar {
  background: rgba(20,42,70,0.60) !important;
  color: rgba(222,240,255,0.95) !important;
  border: 1px solid rgba(140,210,255,0.45) !important;
  border-radius: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.filterBar::placeholder { color: rgba(160,195,225,0.60) !important; }
.filterBar:focus {
  outline: none !important;
  border-color: rgba(160,215,255,0.85) !important;
  box-shadow: 0 0 6px rgba(120,200,255,0.35) !important;
}

/* ---- Home header — "SWU STATS" title + tagline, HUD glow. The title keeps its light
   weight but gains a cyan targeting-HUD glow + tracking; the tagline picks up a matching
   cyan tint + softer glow. (menuStyles.css already uppercases h1 and sets the font.) ---- */
.home-header .title h1,
.home-header h1 {
  color: #eaf7ff !important;
  letter-spacing: 0.06em !important;
  text-shadow:
    0 0 8px rgba(140,210,255,0.55),
    0 0 22px rgba(120,200,255,0.35),
    0 0 46px rgba(90,170,240,0.22) !important;
}
.home-header .title p {
  color: rgba(170,212,246,0.95) !important;
  letter-spacing: 0.10em !important;
  text-shadow: 0 0 8px rgba(120,200,255,0.30) !important;
}