/* ═══════════════════════════════════════════════════════════════════════════
   [fxfilters-20260831] — Fixtures filter section, Live Scores parity

   SCOPE: this sheet is linked from public/index.html ONLY, and every rule in
   it is scoped under .dash-subpage[data-subpage="fixtures"] — the same scoping
   discipline tactix-subpages.css uses for every other .fxp-* rule.

   ⚠ THE STANDALONE PAGE DOES NOT LOAD THIS FILE, ON PURPOSE.
   public/fixtures/index.html is the anonymous/SEO surface (see BARE_INDEX_PATHS
   in backend/server-integrated.js) and it carries its own inline <style> block
   for every .fxp-* rule it uses. It does not load tactix-subpages.css, the
   polish sheet or the cols sheet either. Adding this one file to it would
   still leave the shared control unstyled on the day somebody links the polish
   sheet there and the two definitions disagree, so the pack instead puts the
   same rules inline in that page, beside the rules they belong with. The
   behaviour suite asserts both copies define the same class names.

   The look is copied deliberately, not reinvented: chips, save button and name
   input mirror .lsp-savedfilter-* exactly, so the two pages read as the same
   control rather than as two people's idea of a chip.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the row ─────────────────────────────────────────────────────────────
   grid-column 1/-1 spans the 2-column .fxp-filter grid, matching
   .lsp-savedfilters. min-height 44px is WCAG 2.5.8 (the estate's own target
   size), and it stops the row collapsing to a hairline when the "Saved:"
   label is the only hidden thing in it — the collapse [cols-20260831] had to
   fix on Live Scores after the row stopped being conditional. */
/* [fxtight-20260831 row] The band was MEASURED at 77px holding a 16px
   checkbox — 45% of a 168px filter card. 33px of that was decoration
   around an empty strip: an 8px margin, a 1px rule and 12px of padding,
   plus the control's own 44px box. All three go; the 12px grid row-gap
   stays, because it is what separates this row from the selects and it
   is also the gap between the two selects when they stack under 640px.
   Measured after: 135px. */
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilters {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.dash-subpage[data-subpage="fixtures"] .fxp-savedfilters-label {
  font-family: "Syne", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted2, #8896B3);
}

/* ── chips ───────────────────────────────────────────────────────────── */
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg, #0F1219);
  border: 1px solid var(--rim, #252D42);
  color: var(--white, #EEF2FF);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip:hover {
  border-color: var(--teal, #00D4A8);
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip.is-active {
  background: rgba(0, 212, 168, .12);
  border-color: var(--teal, #00D4A8);
  color: var(--teal, #00D4A8);
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip:focus-visible {
  outline: 2px solid var(--teal, #00D4A8);
  outline-offset: 2px;
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip-x {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--muted2, #8896B3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip-x:hover {
  color: var(--white, #EEF2FF);
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-chip-x:focus-visible {
  outline: 2px solid var(--teal, #00D4A8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── save button and the inline name input ───────────────────────────── */
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-save {
  padding: 6px 10px;
  border-radius: 999px;
  background: none;
  border: 1px dashed var(--rim, #252D42);
  color: var(--muted2, #8896B3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-save:hover {
  color: var(--white, #EEF2FF);
  border-color: var(--white, #EEF2FF);
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-input {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg, #0F1219);
  border: 1px solid var(--teal, #00D4A8);
  color: var(--white, #EEF2FF);
  font-family: inherit;
  font-size: 12px;
  width: 140px;
}
.dash-subpage[data-subpage="fixtures"] .fxp-savedfilter-input:focus { outline: none; }

/* ── "Live matches only" ─────────────────────────────────────────────────
   margin-left:auto pushes it to the right-hand end of the row, which is where
   Chris asked for the Live Scores one — twice — and where [cols-20260831
   R2-move] eventually put it. Same placement, same look, so the two pages do
   not disagree about where a shared control lives.

   The class names are .fxp-liveonly*, NOT the .tx-liveonly* the polish sheet
   defines. That sheet is linked only from public/index.html; reusing its names
   here would make the standalone page's copy of this control depend on a file
   it does not load, and the failure would be invisible on the SPA. */
/* [fxtight-20260831 target] 44px was cited as WCAG 2.5.8; it is not.
   2.5.8 (AA) is 24x24 CSS px — 44x44 is 2.5.5 (AAA). 32px is a third
   above the AA minimum in the constrained dimension, and the label is
   ~150px wide in the other. */
.dash-subpage[data-subpage="fixtures"] .fxp-liveonly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-height: 32px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--white, #EEF2FF);
  cursor: pointer;
  user-select: none;
}
.dash-subpage[data-subpage="fixtures"] .fxp-liveonly input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--teal, #00D4A8);
  cursor: pointer;
}
.dash-subpage[data-subpage="fixtures"] .fxp-liveonly-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF3B5C;
  box-shadow: 0 0 0 3px rgba(255, 59, 92, .18);
  flex: 0 0 auto;
}
.dash-subpage[data-subpage="fixtures"] .fxp-liveonly input:focus-visible + .fxp-liveonly-dot {
  outline: 2px solid var(--teal, #00D4A8);
  outline-offset: 3px;
}

/* On one column the row wraps; the auto margin would otherwise strand the
   checkbox on a line of its own with the chips left-aligned above it. */
@media (max-width: 640px) {
  .dash-subpage[data-subpage="fixtures"] .fxp-liveonly { margin-left: 0; }
}

/* ══ [fxtight-20260831 livescores] the same fix, for the Live Scores row ══

   ⚠ THIS IS AN OVERRIDE, NOT THE DEFINITION. The rule it overrides lives
   in tactix-subpages.css — 94KB on seventeen lines — which public/index.html
   links BEFORE this sheet. The selector below is byte-identical to the one
   there, specificity (0,3,0), so it wins on source order alone. If a future
   pack ever reorders the <link> tags, this stops working silently; the
   behaviour suite measures the rendered height rather than trusting the
   declaration, which is what would catch that.

   The Fixtures equivalents are edited in place above, because this sheet
   owns them. Two mechanisms, one reason each. */
.dash-subpage[data-subpage="livescores"] .lsp-savedfilters {
  min-height: 0;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.dash-subpage[data-subpage="livescores"] .tx-liveonly {
  min-height: 32px;
}