/* =====================================================================
   FPL Analyzer — Pure Liquid Glass buttons
   Applies a translucent frosted-glass ("liquid glass") material to every
   button across the site: backdrop blur + saturation, a specular top
   highlight, soft inner shadow, and depth. Uses !important on the material
   properties so it also overrides JS-injected inline-styled buttons.

   EXCLUDED (kept as their original flat menu tabs):
     .tab-btn         main navigation menu bar
     .rsnav-btn       results / league sub-navigation bar
     .pos-filter-btn  scout position-filter bar
     .seg-btn         segmented controls
     .ftab            filter-tabs bar
     .pm-tab          player-modal tabs bar
   The top bar (header-nav: .mode-toggle-btn, .auth-btn) is intentionally
   NOT excluded, so it keeps the glass treatment.
   ===================================================================== */

/* Material — applied to all buttons except the excluded menu-bar tabs */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout),
.btn,
.mc-btn,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn),
[class*="btn-"]:not(.fg-glass) {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 18px 0 rgba(255, 255, 255, 0.06),
    0 6px 22px rgba(0, 0, 0, 0.22) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  background-clip: padding-box !important;
  transition: background-color 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, transform 0.12s ease;
}

/* Glossy "liquid" sheen across the top half of the glass. */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout)::after,
.mc-btn::after,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn)::after,
[class*="btn-"]:not(.fg-glass)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
  opacity: 0.7;
  z-index: 0;
}

/* Keep real content above the sheen */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout) > *,
.mc-btn > *,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn) > *,
[class*="btn-"]:not(.fg-glass) > * {
  position: relative;
  z-index: 1;
}

/* Hover — the glass brightens and lifts, like wet glass catching light */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout):hover,
.btn:hover,
.mc-btn:hover,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):hover,
[class*="btn-"]:not(.fg-glass):hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.09) 100%) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.30) !important;
  transform: translateY(-1px);
}

/* Pressed — the glass compresses, highlight dims */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout):active,
.btn:active,
.mc-btn:active,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):active,
[class*="btn-"]:not(.fg-glass):active {
  transform: translateY(0) scale(0.985);
  box-shadow:
    inset 0 1px 2px 0 rgba(0, 0, 0, 0.25),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    0 3px 12px rgba(0, 0, 0, 0.22) !important;
}

/* Selected / active state — tint the glass with the FPL green accent */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout).active,
.btn.active,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn).active,
[class*="btn-"]:not(.fg-glass).active,
button.logged-in,
.mc-btn-primary {
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.26) 0%, rgba(0, 255, 135, 0.10) 100%) !important;
  border-color: rgba(0, 255, 135, 0.45) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.15),
    0 6px 24px rgba(0, 255, 135, 0.20) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

button.active:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):hover,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn).active:hover,
.mc-btn-primary:hover {
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.34) 0%, rgba(0, 255, 135, 0.16) 100%) !important;
  border-color: rgba(0, 255, 135, 0.6) !important;
}

/* Keep SVG icons legible on the glass */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout) svg,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn) svg,
[class*="btn-"]:not(.fg-glass) svg {
  stroke: currentColor;
}

/* Disabled — frostier and faded */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout):disabled,
.btn:disabled,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):disabled,
[class*="btn-"]:not(.fg-glass):disabled {
  opacity: 0.45 !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* Accessible focus ring on top of the glass */
button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout):focus-visible,
.btn:focus-visible,
.mc-btn:focus-visible,
[class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):focus-visible,
[class*="btn-"]:not(.fg-glass):focus-visible {
  outline: 2px solid var(--pl-green, #00ff87);
  outline-offset: 2px;
}

/* ─── Light mode — clear/white frosted glass with dark text ─────────── */
:root.light-mode button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout),
:root.light-mode .btn,
:root.light-mode .mc-btn,
:root.light-mode [class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn),
:root.light-mode [class*="btn-"]:not(.fg-glass) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 100%) !important;
  border: 1px solid rgba(26, 8, 32, 0.10) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05),
    0 6px 18px rgba(0, 0, 0, 0.10) !important;
  color: var(--text-primary, #0d0a14) !important;
  -webkit-text-fill-color: var(--text-primary, #0d0a14);
  text-shadow: none;
}

:root.light-mode button.active:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab),
:root.light-mode [class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn).active,
:root.light-mode .mc-btn-primary {
  background: linear-gradient(135deg, rgba(0, 184, 94, 0.26) 0%, rgba(0, 184, 94, 0.10) 100%) !important;
  border-color: rgba(0, 184, 94, 0.45) !important;
  color: var(--text-primary, #0d0a14) !important;
  -webkit-text-fill-color: var(--text-primary, #0d0a14);
}

:root.light-mode button:not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn):not(.ftab):not(.pm-tab):not(.theme-switch):not(.acct-kit):not(.amc-key):not(.fg-glass):not(.amc-banner-btn):not(.page-help-trigger):not(.page-help-close):not(.dock-strip):not(.lg-switch):not(.lg-button):not(.lg-tab):not(.acct-signout)::after,
:root.light-mode [class*="-btn"]:not(.fg-glass):not(.tab-btn):not(.rsnav-btn):not(.pos-filter-btn):not(.seg-btn)::after,
:root.light-mode [class*="btn-"]:not(.fg-glass)::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 65%);
  mix-blend-mode: normal;
}

/* Respect users who reduce motion / transparency */
@media (prefers-reduced-motion: reduce) {
  button, .btn, .mc-btn, [class*="-btn"], [class*="btn-"]:not(.fg-glass) { transition: none; }
  button:hover, [class*="-btn"]:hover, [class*="btn-"]:not(.fg-glass):hover, .mc-btn:hover { transform: none; }
}

/* ─── Custom Google sign-in button — keep its own branding (no glass) ─────
   It is a <button> whose class matches [class*="-btn"], so the glass rules
   above would otherwise repaint it. Its styling lives in home-redesign.css. */
button.custom-google-signin-btn,
button.custom-google-signin-btn:hover,
button.custom-google-signin-btn:active {
  background: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

button.custom-google-signin-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--pl-green, #00ff87) !important;
}

button.custom-google-signin-btn::after { content: none !important; display: none !important; }

:root.light-mode button.custom-google-signin-btn,
:root.light-mode button.custom-google-signin-btn:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(26, 8, 32, 0.14) !important;
  color: var(--text-primary, #0d0a14) !important;
  -webkit-text-fill-color: var(--text-primary, #0d0a14);
}

/* ── No blur where buttons repeat, or inside the mini-league view ─────────
   The material above gives every button `backdrop-filter: blur(16px)`. That
   is fine for the handful of buttons on a normal screen, but the mini-league
   table renders one Spy button per manager: 105 blurred buttons were live in
   a single view.

   Chrome draws a backdrop-filtered element in two parts — the filtered
   backdrop, then the element's own content above it. Past a certain number
   of these it keeps the backdrops and silently drops the content. The result
   is a row of empty pills: the button paints, its "Spy" label does not. At
   higher pressure whole cells stop painting and the table looks unloaded.

   Verified by screenshotting the same table twice, identical DOM and scroll
   position, with backdrop-filter the only difference: every label that was
   missing came back. The buttons keep their gradient, border and shadow, so
   only the (imperceptible, behind a 49x30 pill) blur is lost.  */
.formation-btn,
button.formation-btn {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The mini-league view scales with the size of the league, so it is the one
   place where element counts are unbounded. Keep it free of backdrop blur
   entirely rather than relying on staying under an invisible limit. */
#viewLeague *,
#viewLeague *::before,
#viewLeague *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}