@import './components/main_navigation.css';
@import './components/netflix_rail.css?v=20261002railhover1';
@import './components/sidebar.css';
@import './components/dropdown_component.css';
@import './components/player_card.css';
@import './components/favorites_table.css';
@import './components/formation_grid.css';
@import './components/formation_pitch.css?v=20260830formgrid1';
@import './components/empty_state.css?v=20260620empty3';
@import './components/button.css?v=20260902batch2';
@import './components/input.css';
@import './components/dropdown.css?v=20260627bulkdd1';
@import './components/checkbox.css';
@import './components/toggle.css?v=20260606rank2';
@import './components/tabs.css?v=20260606rank2';
@import './components/banner.css';
@import './components/badge.css?v=20260909pillfix1';
@import './components/player_status.css?v=20260703gridhover4';
@import './components/card.css';
@import './components/table.css';
@import './components/menu.css';
@import './components/tooltip.css?v=20260630pitchtip1';
@import './components/single_video_controls.css?v=20260903speedmenu1';
@import './components/match_data_bar.css';
@import './components/player_detail_panel.css?v=20261103qa10';
@import './components/hvr_score.css?v=20260620comparehi1';
@import './components/notifications_panel.css?v=20260619notif1';
@import './components/cart_modal.css?v=20260902batch2';
@import './components/favorite_accent.css?v=20260619fav1';
@import './components/team_picker_modal.css?v=20260620teams3';
@import './components/manage_player_teams_modal.css?v=20260820manageteams1';
@import './components/compare_picker_modal.css?v=20260627panelopen1';
@import './components/create_team_modal.css?v=20260620empty1';
@import './components/add_players_modal.css?v=20260629wizardcards1';
@import './components/buy_tokens_modal.css?v=20260808balancealign1';
@import './components/player_order_modal.css?v=20261002interest2';
@import './components/settings_modal.css?v=20260902batch6';
@import './theme.css?v=20260627switcherbg1';

#excelrate-router-log {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* SPA route swap: short entrance fade on the freshly injected page (class is
   re-applied per injection by spa-router.js's injectPage) so navigation reads
   as a transition instead of a hard content pop. */
#spa-outlet.spa-page-enter {
  animation: spa-page-enter 0.16s ease;
}
@keyframes spa-page-enter {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

 :root {
  --color-primary: #6c47ff;
  --color-secondary: #13132a;
  --color-bg: #0d0d1a;
  --color-surface: #0f0f22;
  --color-text: #ffffff;
  --color-text-muted: #b8b8cb;
  --color-border: #1e1e3a;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
}

:root {
  --bg: #0d0d1a;
  --surface: #13132a;
  --surface-2: #0f0f22;
  --border: #1e1e3a;
  --text: #ffffff;
  --text-muted: #b8b8cb;

  /* ── Accent: the prominent brand colour. Primary CTAs, active states,
        key highlights, focus rings. This is the ONE purple. ── */
  --accent: #6c47ff;
  --accent-hover: #7d5bff;
  --accent-dim: rgba(108, 71, 255, 0.13);

  /* ── Primary: neutral slate, less prominent than the accent. General UI
        chrome, secondary buttons, default text emphasis. ── */
  --primary: #c6c6da;
  --primary-hover: #dadaec;
  --radius: 10px;
  --s1: #151529;
  --s2: #1b1b33;
  --s3: #222242;
  --bd: #2a2a45;
  --bd2: #3a3a5c;
  --header-divider: color-mix(in srgb, var(--bd) 90%, #000);
  --t1: #f4f4ff;
  --t2: #d6d6eb;
  --t3: #9d9dbf;
  /* Legacy purple aliases → accent, so all existing component CSS stays on one purple. */
  --purple: var(--accent);
  --purple-d: var(--accent-dim);
  --purple-h: var(--accent-hover);
  --green: #22c55e;
  --green-d: #22c55e22;
  --amber: #f59e0b;
  --amber-d: #f59e0b22;
  --red: #ef4444;
  --red-d: #ef444422;
  --yellow: #ffa55f;
  --score-accent: var(--yellow);
  --rb: 8px;
  --rg: 999px;
  --rc: 14px;
  --nav-width-expanded: 195px;
  --nav-width-collapsed: 68px;
  /* Tint applied to monochrome line-SVG icons; flips to a dark slate in light mode. */
  --icon-muted: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(506%) hue-rotate(201deg) brightness(90%) contrast(91%);
  /* Orange tint for HVR lightning / favourite stars; light mode uses pastel peach washes. */
  --icon-gold: brightness(0) saturate(100%) invert(73%) sepia(53%) saturate(685%) hue-rotate(321deg) brightness(102%) contrast(105%);
  --gold-border: rgba(255, 165, 95, 0.55);
  --gold-border-hover: rgba(255, 165, 95, 0.75);
  --gold-border-soft: rgba(255, 165, 95, 0.25);
  --gold-border-ring: rgba(255, 165, 95, 0.2);
  --gold-border-ring-hover: rgba(255, 165, 95, 0.3);
  --gold-shadow: rgba(255, 165, 95, 0.12);
  --gold-dim: rgba(255, 165, 95, 0.15);
  --tooltip-bg: var(--s1);
  --tooltip-border: var(--bd2);
  --tooltip-text: var(--t2);
  --tooltip-title: var(--t1);
  --tooltip-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  /* Chip buttons (Similar Players pattern): muted idle → lavender + purple ring on hover. */
  --btn-chip-bg: var(--s2);
  --btn-chip-border: var(--bd2);
  --btn-chip-color: var(--t2);
  --btn-chip-icon-filter: var(--icon-muted);
  --btn-chip-hover-bg: var(--purple-d);
  --btn-chip-hover-border: var(--purple);
  --btn-chip-hover-color: var(--t1);
  --btn-chip-hover-icon-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(233deg) brightness(104%) contrast(103%);

  /* ════════════════════════════════════════════════════════════════
     RESPONSIVE FOUNDATION — proportions hold from 13" laptops to 32"
     monitors. Spacing/gaps grow fluidly with viewport width; content is
     capped + centered on very large screens so dense tables/rails don't
     stretch edge-to-edge or look sparse.
     ════════════════════════════════════════════════════════════════ */
  /* Max readable width for the scrollable content column. On a 32" QHD
     (~2560px) content fills nicely; only native 4K+ gets side gutters. */
  --content-max: 2560px;
  /* Fluid page padding: tighter on 13" (~1280px), roomier on big screens. */
  --page-pad-x: clamp(16px, 1.6vw, 40px);
  --page-pad-y: clamp(16px, 1.4vw, 32px);
  /* Fluid gaps for grids/stacks. */
  --gap-fluid: clamp(12px, 1.1vw, 24px);
  --gap-fluid-sm: clamp(8px, 0.7vw, 16px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ── Scrollbars: THE one app-wide style. Thin rounded thumb, no track, no
      native arrow buttons -- replaces both the default OS chrome and the
      per-page one-offs that used to coexist with it. Carousels that hide
      their scrollbar entirely (scrollbar-width: none / display: none on the
      element) still win over these defaults. Standalone iframe documents
      (components/player_card.html, components/favorites_table.html) don't
      load this file and carry a copy of this block -- keep them in sync.
      Firefox gets the closest equivalent via scrollbar-width/-color -- but
      ONLY Firefox: in Chromium, setting the standard properties disables
      ::-webkit-scrollbar styling outright, so they must stay scoped to
      engines without ::-webkit-scrollbar support. ── */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--bd2) transparent;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bd2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/*
 * Cross-document view transitions (full page loads). Hash SPA disables names below — instant DOM swap only.
 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  #main-navigation {
    view-transition-name: excelrate-sidebar;
  }

  .shell .main,
  .page-shell .main {
    view-transition-name: excelrate-main;
  }

  ::view-transition-group(excelrate-sidebar),
  ::view-transition-group(excelrate-main) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  ::view-transition-old(excelrate-main),
  ::view-transition-new(excelrate-main) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* SPA: #spa-outlet wraps route markup; .shell / .page-shell expect filters+main (etc.) as direct flex children */
html[data-excelrate-spa='1'] #spa-outlet {
  display: contents;
}

html[data-excelrate-spa='1'] #main-navigation,
html[data-excelrate-spa='1'] .shell .main,
html[data-excelrate-spa='1'] .page-shell .main,
html[data-excelrate-spa='1'] #spa-page-extras {
  view-transition-name: none !important;
}

/*
 * Hash SPA: page stylesheets (e.g. favorites) use html,body { overflow:hidden } while others do not,
 * which toggles the window scrollbar and shifts the layout (~15px). Lock shell scroll behavior.
 */
html[data-excelrate-spa='1'] {
  height: 100%;
  scrollbar-gutter: stable;
}
html[data-excelrate-spa='1'] body.excelrate-app {
  height: 100%;
  max-height: 100%;
  margin: 0;
  overflow: hidden !important;
}
html[data-excelrate-spa='1'] #app-root.page-shell {
  height: 100%;
  max-height: 100%;
}

/* Before the nav component loads, reserve the column so the layout does not jump. */
#main-navigation:empty {
  width: var(--nav-width-expanded);
  min-width: var(--nav-width-expanded);
  flex-shrink: 0;
  min-height: 100vh;
  align-self: stretch;
  background: #1a1a38;
  border-right: 1px solid var(--bd);
}

/* Keep left navigation width consistent across all routes (Favorites baseline). */
#main-navigation {
  width: var(--nav-width-expanded);
  min-width: var(--nav-width-expanded);
}

#main-navigation.is-collapsed {
  width: var(--nav-width-collapsed);
  min-width: var(--nav-width-collapsed);
}

/* Page-level .sidebar rules (favorites/scouting CSS) also match the injected nav; keep inner column stable. */
#main-navigation > .sidebar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding-bottom: 24px;
}

/* Logo block — global so it applies in SPA (nav HTML is cached after first load). */
#main-navigation .sb-logo {
  padding: 24px 12px 16px !important;
}

#main-navigation.is-collapsed .sb-logo {
  padding: 24px 8px 16px !important;
}

/* User block — inset pill highlight on .urow (expanded + collapsed) */
#main-navigation .sb-user {
  padding: 10px !important;
  margin-top: 0 !important;
  border-top: none !important;
  background: transparent;
}

#main-navigation .sb-user:hover,
#main-navigation .sb-user.is-open {
  background: transparent !important;
}

#main-navigation .sb-user .urow {
  padding: 6px 8px !important;
  border-radius: var(--rb, 8px);
  transition: background 0.15s ease;
}

#main-navigation .sb-user:hover .urow,
#main-navigation .sb-user.is-open .urow {
  background: var(--purple-d);
}

#main-navigation.is-collapsed .sb-user {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 10px 0 !important;
}

#main-navigation.is-collapsed .sb-user .urow {
  justify-content: center !important;
  width: auto !important;
  max-width: 100%;
}

#main-navigation.is-collapsed .sb-user .u-meta {
  display: none !important;
}

#main-navigation.is-collapsed .sb-footer {
  align-items: center !important;
  gap: 10px !important;
}

#main-navigation .nl {
  padding-top: 16px !important;
  padding-bottom: 8px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#main-navigation.is-collapsed .nl {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#main-navigation.is-collapsed .nav {
  padding-top: 0 !important;
}

#main-navigation .sb-collapse {
  padding-right: 16px !important;
  gap: 8px !important;
}

#main-navigation.is-collapsed .sb-collapse {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 0 4px !important;
}

#main-navigation .sb-user-menu {
  padding: 4px !important;
  margin: 0 !important;
  list-style: none !important;
}

#main-navigation .sb-user-menu li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#main-navigation .sb-user-option {
  padding: 7px 8px !important;
  gap: 8px !important;
}

#main-navigation .sb-user .urow {
  gap: 9px !important;
}

#main-navigation .sb-user .ur {
  margin-top: 1px !important;
}

/* Normalize nav button sizing across routes (match Favorites). */
#main-navigation .ni {
  min-height: 36px !important;
  display: flex;
  align-items: center;
  gap: 9px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

#main-navigation .ni img {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

a {
  color: inherit;
}

.page-title {
  margin: 0;
  font-family: "Montserrat", "Inter", system-ui, sans-serif;
  /* 13" (~1280px) ≈ 31px → 32" (2560px) ≈ 40px. */
  font-size: clamp(26px, 1.2vw + 16px, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--t1, #fff);
}

/*
 * One row: nav (col 1) | main (col 2). Do not let auto-placement put <main> on a second row below a 100vh nav.
 */
.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.page-shell > #main-navigation {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  min-height: 0;
  min-width: 0;
}

.page-shell > #dropdown:empty {
  display: none;
}

.page-shell > .main,
.page-shell > #spa-outlet > .main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.page-shell--simple {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Global content sizing (13"→32") ──────────────────────────────
   Cap + center the scrollable content column on very large screens and
   apply fluid padding. Higher specificity than the per-page `.content`
   rules (which load after shared.css) so it applies everywhere; pages
   keep their own grids/flex inside. */
.shell > .main > .content,
.page-shell > .main > .content,
.page-shell > #spa-outlet > .main > .content,
.shell > #spa-outlet > .main > .content,
.shell > .main > .scroll-wrap > .content,
.shell > #spa-outlet > .main > .scroll-wrap > .content,
.page-shell > .main > .scroll-wrap > .content,
.page-shell > #spa-outlet > .main > .scroll-wrap > .content {
  max-width: var(--content-max);
  margin-inline: auto;
  width: 100%;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 0 0 16px;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.sidebar__logo-image {
  width: 132px;
  height: auto;
  display: block;
  margin: 16px 0;
}

.sidebar__nav {
  display: grid;
  gap: 6px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
}

.sidebar__icon {
  width: 16px;
  height: 16px;
  opacity: 0.9;
  /* tint black line SVGs to muted text color */
  filter: var(--icon-muted);
}

.sidebar__link:hover .sidebar__icon,
.sidebar__link.is-active .sidebar__icon {
  opacity: 1;
  /* bright tint for active/hover states */
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(233deg) brightness(104%) contrast(103%);
}

.sidebar__link:hover,
.sidebar__link.is-active {
  background: #6c47ff22;
  color: var(--text);
}

.main {
  min-width: 0;
}

.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.topbar__title {
  font-weight: 600;
}

.topbar__meta {
  color: var(--text-muted);
  font-size: 13px;
}

.content {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.heading-xl {
  margin: 0 0 10px;
  font-size: 24px;
}

.heading-lg {
  margin: 0 0 8px;
  font-size: 20px;
}

.text-muted {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-ghost:hover {
  border-color: var(--primary-hover);
  color: var(--primary-hover);
}

img[src*="icons/filled/images/lightning.svg"] {
  /* Score contexts use currentColor mask in hvr_score.css; fallback elsewhere. */
  filter: var(--icon-gold);
}

.score-cell img[src*="lightning.svg"],
.kc:has(.kay) .kv img[src*="lightning.svg"],
.tt-score img[src*="lightning.svg"],
.featured-player-card__score img[src*="lightning.svg"],
.player-panel__score-main img[src*="lightning.svg"] {
  filter: none !important;
}

/* Favorited players — gold card border (locked + favourites share this state) */
.featured-player-card:not(.is-favorited) {
  border-color: var(--bd);
  box-shadow: none;
}

/* Favourite star + border tokens live in favorite_accent.css */
/* Segmented toggles — inlined so they always ship with the versioned shared.css bundle. */
.foot-toggle,
.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rb, 8px);
  overflow: visible;
  box-sizing: border-box;
  min-height: 30px;
}

.foot-toggle button,
.view-toggle__btn {
  border: 1px solid transparent;
  border-radius: calc(var(--rb, 8px) - 2px);
  background: transparent;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    box-shadow 0.16s ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.foot-toggle button {
  height: 26px;
  padding: 0 10px;
}

.view-toggle__btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggle__btn img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) saturate(100%) invert(79%) sepia(10%) saturate(340%) hue-rotate(199deg)
    brightness(91%) contrast(93%);
}

.foot-toggle button.is-active,
.view-toggle__btn.is-active {
  background: var(--purple-d);
  border-color: var(--purple);
  color: var(--t1);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(108, 71, 255, 0.25);
}

.view-toggle__btn.is-active img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1668%) hue-rotate(226deg)
    brightness(92%) contrast(94%);
}

.foot-toggle button:active,
.view-toggle__btn:active {
  transform: scale(0.92);
}

/* Country flags render as an image, not emoji -- Windows has no glyphs for
   regional-indicator pairs and draws them as plain letters ("GH"). Sized in em
   so each host keeps the font-size it already declared. */
.excelrate-flag {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -0.14em;
  border-radius: 2px;
  object-fit: cover;
}