@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =============================================================================
   MainLayout — chrome around every page.

   Targets FluentUI primitives via ::deep so the Fluent shell's defaults give
   way to our token system. The header is a tight, editorial brand strip; the
   nav menu reads as a single quiet column; the body has a deliberate gutter
   and a max-width container so wide screens don't sprawl.
   ============================================================================= */

.pm-layout[b-q6yq4d13zv] {
    background: var(--pm-surface-deep);
    color: var(--pm-ink);
    font-family: var(--pm-font-body);
    min-height: 100vh;
}

/* --- Header ----------------------------------------------------------- */

[b-q6yq4d13zv] .pm-header {
    background: var(--pm-surface);
    border-bottom: 1px solid var(--pm-hairline);
    padding: 0 18px;
    height: 54px;
    box-shadow: 0 1px 0 var(--pm-hairline-soft);
}

[b-q6yq4d13zv] .pm-header-nav-toggle {
    color: var(--pm-ink-soft);
    margin-left: -6px;
}

[b-q6yq4d13zv] .pm-header-nav-toggle:hover {
    color: var(--pm-ink);
}

.pm-header-brand[b-q6yq4d13zv] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding-right: 14px;
    border-right: 1px solid var(--pm-hairline);
    height: 32px;
}

[b-q6yq4d13zv] .pm-header-brand-mark {
    color: var(--pm-accent-ink);
}

.pm-header-brand-text[b-q6yq4d13zv] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--pm-font-display);
    line-height: 1;
}

.pm-header-brand-eyebrow[b-q6yq4d13zv] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pm-ink-faint);
    transform: translateY(-0.4em);
}

.pm-header-brand-name[b-q6yq4d13zv] {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--pm-ink);
    font-feature-settings: "ss01", "cv11";
}

.pm-header-user[b-q6yq4d13zv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--pm-hairline);
    border-radius: 999px;
    background: var(--pm-surface-tint);
    margin-right: 6px;
}

[b-q6yq4d13zv] .pm-header-user-icon {
    color: var(--pm-ink-faint);
}

.pm-header-user-name[b-q6yq4d13zv] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--pm-ink-soft);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-q6yq4d13zv] .pm-header-action {
    color: var(--pm-ink-soft);
}

[b-q6yq4d13zv] .pm-header-action:hover {
    color: var(--pm-ink);
}

[b-q6yq4d13zv] .pm-header-theme {
    margin-left: 2px;
}

/* --- Shell + nav ------------------------------------------------------- */

/* Note: `flex: 1; overflow: hidden;` lives inline on the FluentStack element
   itself. Blazor CSS isolation doesn't propagate the [b-xxx] scope attribute
   to child-component-rendered roots, so a class-based rule wouldn't reliably
   land on FluentStack's output — and the shell collapsed to its natural height,
   which made the footer ride up under the nav. Inline style sidesteps it. */
[b-q6yq4d13zv] .pm-shell {
    background: var(--pm-surface-deep);
}

[b-q6yq4d13zv] .pm-nav {
    background: var(--pm-surface);
    border-right: 1px solid var(--pm-hairline);
    padding-top: 14px;
    font-family: var(--pm-font-body);
}

/* Refine FluentNavMenu's internals — Fluent's defaults are workable but a
   little heavy. Tighter spacing, calmer hover, accent-tinted active state. */
[b-q6yq4d13zv] .pm-nav fluent-nav-link,
[b-q6yq4d13zv] .pm-nav fluent-nav-group {
    font-size: 0.86rem;
}

[b-q6yq4d13zv] .pm-nav fluent-nav-link::part(control) {
    padding-block: 7px;
}

[b-q6yq4d13zv] .pm-nav fluent-nav-link:hover::part(control) {
    background: var(--pm-surface-tint);
}

[b-q6yq4d13zv] .pm-nav fluent-nav-link[active]::part(control) {
    background: var(--pm-accent-soft);
    color: var(--pm-accent-ink);
}

[b-q6yq4d13zv] .pm-nav fluent-nav-group::part(header) {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    padding-block: 8px;
}

/* --- Body content ----------------------------------------------------- */

/* `flex: 1; overflow: auto;` is inline for the same isolation reason as
   .pm-shell — class-based selectors can't always reach a FluentUI component's
   rendered root through Blazor's scope. */
[b-q6yq4d13zv] .pm-body {
    background: var(--pm-surface-deep);
}

.pm-body-inner[b-q6yq4d13zv] {
    padding: 28px 32px 48px;
    max-width: 1800px;
    margin: 0 auto;
}

/* --- Footer ----------------------------------------------------------- */

[b-q6yq4d13zv] .pm-footer {
    padding: 10px 22px;
    background: var(--pm-surface);
    border-top: 1px solid var(--pm-hairline);
    font-size: 0.72rem;
    color: var(--pm-ink-faint);
}

/* Alignment lives on this inner wrapper rather than on FluentFooter itself,
   so it doesn't depend on what FluentFooter's internal markup looks like. */
.pm-footer-inner[b-q6yq4d13zv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.pm-footer-mark[b-q6yq4d13zv] {
    display: inline-flex;
    align-items: center;
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--pm-accent-ink);
    padding: 3px 7px;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--pm-accent) 40%, transparent);
    border-radius: 4px;
    background: var(--pm-accent-ghost);
}

.pm-footer-text[b-q6yq4d13zv] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* =============================================================================
   Blazor reconnect / error UI (host-level — kept as-is, just refreshed look)
   ============================================================================= */

#blazor-error-ui[b-q6yq4d13zv] {
    color-scheme: light only;
    background: #fff7d6;
    color: #2b1a00;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--pm-font-body);
    font-size: 0.85rem;
    border-top: 1px solid #d4a418;
}

#blazor-error-ui .dismiss[b-q6yq4d13zv] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    opacity: 0.7;
}

#blazor-error-ui .dismiss:hover[b-q6yq4d13zv] {
    opacity: 1;
}

/* =============================================================================
   Nav shell + responsive (mobile / narrow viewports).

   Open/collapse AND the mobile drawer are driven entirely off `.pm-nav-shell`,
   the plain wrapper div around FluentNavMenu. That div is authored in
   MainLayout.razor, so it carries the CSS-isolation scope attribute and ordinary
   (non-::deep) selectors land on it reliably. We deliberately do NOT style
   FluentNavMenu's own root for layout: ::deep has no scoped ancestor to anchor to
   here (every parent is a Fluent component), so those rules silently no-op — which
   previously left the hamburger doing nothing on every screen size.

   Desktop: collapsing removes the shell from the flex row (display: none) so the
   body reclaims the full width. At <= 768px the shell becomes a fixed slide-over
   drawer above the body (with a dimming backdrop) so opening it no longer pushes
   the page to the right.
   ============================================================================= */

.pm-nav-shell[b-q6yq4d13zv] {
    height: 100%;
}

.pm-nav-shell.is-collapsed[b-q6yq4d13zv] {
    display: none;
}

.pm-nav-backdrop[b-q6yq4d13zv] { display: none; }

@media (max-width: 768px) {
    /* The shell floats over the page instead of holding a flex column, so the body
       spans the full width whether the drawer is open or shut. */
    .pm-nav-shell[b-q6yq4d13zv] {
        position: fixed;
        top: 54px;            /* sits just below the fixed-height header */
        left: 0;
        bottom: 0;
        z-index: 60;
        width: min(260px, 86vw);
        display: block;       /* override the desktop is-collapsed display: none */
        background: var(--pm-surface);
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.32);
        transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
        will-change: transform;
        overflow-y: auto;
    }

    /* Mobile collapse slides the drawer off-screen rather than removing it, so the
       transform transition can animate it in and out. */
    .pm-nav-shell.is-collapsed[b-q6yq4d13zv] {
        display: block;
        transform: translateX(-100%);
        box-shadow: none;
    }

    .pm-nav-shell.is-open[b-q6yq4d13zv] {
        transform: translateX(0);
    }

    .pm-nav-backdrop[b-q6yq4d13zv] {
        display: block;
        position: fixed;
        inset: 54px 0 0 0;
        background: color-mix(in srgb, #000 42%, transparent);
        z-index: 55;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
    }

    .pm-nav-backdrop.is-open[b-q6yq4d13zv] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Tighter chrome on small screens. */
    [b-q6yq4d13zv] .pm-header { padding: 0 12px; }
    .pm-header-brand[b-q6yq4d13zv] { padding-right: 10px; margin-left: 2px; }
    /* The signed-in username pill is the widest header element and the least useful on a
       phone — without it the whole auth group overflowed the viewport, pushing the theme
       toggle on top of the Sign out button. Drop it so both buttons keep their own space. */
    .pm-header-user[b-q6yq4d13zv] { display: none; }
    /* Collapse Sign in/out to icon-only so it stays a compact button like the theme toggle
       rather than a 100px text button that pushes the row past the screen edge. */
    .pm-action-label[b-q6yq4d13zv] { display: none; }
    .pm-body-inner[b-q6yq4d13zv] { padding: 16px 14px 36px; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* =============================================================================
   ReconnectModal — Blazor framework reconnect UI. CSS class names mirror what
   the framework JS toggles; only the visual treatment is ours.
   ============================================================================= */

.components-reconnect-first-attempt-visible[b-xcp5v6dimu],
.components-reconnect-repeated-attempt-visible[b-xcp5v6dimu],
.components-reconnect-failed-visible[b-xcp5v6dimu],
.components-pause-visible[b-xcp5v6dimu],
.components-resume-failed-visible[b-xcp5v6dimu],
.components-rejoining-animation[b-xcp5v6dimu] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-retrying[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-failed[b-xcp5v6dimu],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xcp5v6dimu] {
    display: block;
}

#components-reconnect-modal[b-xcp5v6dimu] {
    background: var(--pm-surface, white);
    color: var(--pm-ink, #111);
    width: 22rem;
    margin: 22vh auto;
    padding: 28px 32px;
    border: 1px solid var(--pm-hairline, #d4d4d4);
    border-radius: var(--pm-radius-lg, 12px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 60px -20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    font-family: var(--pm-font-body), system-ui, sans-serif;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xcp5v6dimu 0.5s both;
}

#components-reconnect-modal[open][b-xcp5v6dimu] {
    animation: components-reconnect-modal-slideUp-b-xcp5v6dimu 1.4s cubic-bezier(.05, .89, .25, 1.02) 0.2s, components-reconnect-modal-fadeInOpacity-b-xcp5v6dimu 0.5s ease-in-out 0.2s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-xcp5v6dimu]::backdrop {
    background: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    animation: components-reconnect-modal-fadeInOpacity-b-xcp5v6dimu 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xcp5v6dimu {
    0%   { transform: translateY(20px) scale(0.97); }
    100% { transform: translateY(0)    scale(1); }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xcp5v6dimu {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xcp5v6dimu {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.components-reconnect-container[b-xcp5v6dimu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#components-reconnect-modal p[b-xcp5v6dimu] {
    margin: 0;
    text-align: center;
    color: var(--pm-ink, #111);
    font-size: 0.92rem;
    line-height: 1.4;
}

#components-reconnect-modal button[b-xcp5v6dimu] {
    border: 0;
    background: var(--pm-accent, #2563eb);
    color: var(--foreground-on-accent-rest, white);
    padding: 8px 22px;
    border-radius: var(--pm-radius, 6px);
    font-family: var(--pm-font-body), system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}

#components-reconnect-modal button:hover[b-xcp5v6dimu] {
    filter: brightness(1.08);
}

#components-reconnect-modal button:active[b-xcp5v6dimu] {
    filter: brightness(0.95);
}

/* --- rejoining radar animation -------------------------------------- */

.components-rejoining-animation[b-xcp5v6dimu] {
    position: relative;
    width: 64px;
    height: 64px;
}

.components-rejoining-animation div[b-xcp5v6dimu] {
    position: absolute;
    border: 2.5px solid var(--pm-accent, #2563eb);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-xcp5v6dimu 1.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-xcp5v6dimu] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-xcp5v6dimu {
    0% {
        top: 32px; left: 32px;
        width: 0; height: 0;
        opacity: 0;
    }
    4.9% {
        top: 32px; left: 32px;
        width: 0; height: 0;
        opacity: 0;
    }
    5% {
        top: 32px; left: 32px;
        width: 0; height: 0;
        opacity: 1;
    }
    100% {
        top: 0; left: 0;
        width: 64px; height: 64px;
        opacity: 0;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* =============================================================================
   Error page — clearly marked failure state with a development-mode hint.
   ============================================================================= */

.error-page[b-bvkxw5vahe] {
    max-width: 720px;
    margin: 60px auto 0;
    padding: 32px;
    font-family: var(--pm-font-body);
}

.error-page-code[b-bvkxw5vahe] {
    display: inline-block;
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--pm-neg) 40%, transparent);
    border-radius: var(--pm-radius-sm);
    background: var(--pm-neg-soft);
    color: var(--pm-neg);
    margin-bottom: 20px;
}

.error-page-title[b-bvkxw5vahe] {
    margin: 0 0 10px;
    font-family: var(--pm-font-display);
    font-size: 1.8rem;
    font-weight: 650;
    letter-spacing: -0.012em;
    color: var(--pm-ink);
    line-height: 1.15;
}

.error-page-text[b-bvkxw5vahe] {
    margin: 0 0 22px;
    color: var(--pm-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.error-page-rid[b-bvkxw5vahe] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    margin-bottom: 22px;
}

.error-page-rid-label[b-bvkxw5vahe] {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
}

.error-page-rid-code[b-bvkxw5vahe] {
    font-family: var(--pm-font-mono);
    font-size: 0.82rem;
    color: var(--pm-ink);
}

.error-page-dev[b-bvkxw5vahe] {
    border-top: 1px solid var(--pm-hairline);
    padding-top: 18px;
    margin-top: 8px;
}

.error-page-dev-eyebrow[b-bvkxw5vahe] {
    display: inline-block;
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink-faint);
    margin-bottom: 10px;
}

.error-page-dev-text[b-bvkxw5vahe] {
    margin: 0;
    font-size: 0.86rem;
    color: var(--pm-ink-soft);
    line-height: 1.55;
}

.error-page-dev-text code[b-bvkxw5vahe] {
    font-family: var(--pm-font-mono);
    font-size: 0.84em;
    padding: 1px 5px;
    background: var(--pm-surface-tint);
    border: 1px solid var(--pm-hairline-soft);
    border-radius: 3px;
    color: var(--pm-ink);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =============================================================================
   Home page — landing hero with quick links into the main surfaces. Kept
   restrained: this is a utility app, not a marketing site. The mark + title
   lockup provides the only visual moment.
   ============================================================================= */

.home-hero[b-9o0xn3cdst] {
    max-width: 900px;
    margin: 16px auto 0;
    padding: 24px 0;
    font-family: var(--pm-font-body);
}

.home-mark[b-9o0xn3cdst] {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--pm-accent) 40%, transparent);
    border-radius: var(--pm-radius);
    background: var(--pm-accent-ghost);
    margin-bottom: 22px;
}

.home-mark-eyebrow[b-9o0xn3cdst] {
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pm-ink-faint);
}

.home-mark-name[b-9o0xn3cdst] {
    font-family: var(--pm-font-display);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--pm-accent-ink);
}

.home-title[b-9o0xn3cdst] {
    margin: 0 0 8px;
    font-family: var(--pm-font-display);
    font-size: 2.6rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--pm-ink);
    font-feature-settings: "ss01", "cv11";
}

.home-tagline[b-9o0xn3cdst] {
    margin: 0 0 36px;
    font-size: 1rem;
    color: var(--pm-ink-soft);
    line-height: 1.45;
    max-width: 560px;
}

/* --- quick links ---------------------------------------------------- */

.home-links[b-9o0xn3cdst] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.home-link[b-9o0xn3cdst] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    color: var(--pm-ink);
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
    box-shadow: var(--pm-shadow-flat);
}

.home-link:hover[b-9o0xn3cdst] {
    border-color: color-mix(in srgb, var(--pm-accent) 35%, transparent);
    background: color-mix(in srgb, var(--pm-accent) 4%, var(--pm-surface));
    transform: translateY(-1px);
}

.home-link-eyebrow[b-9o0xn3cdst] {
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--pm-accent-ink);
}

.home-link-title[b-9o0xn3cdst] {
    font-family: var(--pm-font-display);
    font-size: 1.1rem;
    font-weight: 650;
    letter-spacing: -0.008em;
    color: var(--pm-ink);
}

.home-link-desc[b-9o0xn3cdst] {
    font-size: 0.82rem;
    color: var(--pm-ink-soft);
    line-height: 1.4;
}

.home-signin-hint[b-9o0xn3cdst] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--pm-ink-soft);
    font-style: italic;
}
/* /Components/Pages/MarketConfigurations/Edit.razor.rz.scp.css */
/* =============================================================================
   Market Configuration editor — form-heavy admin surface. Form sits in a
   card, divided into League / Sportsbooks / Markets sections; each market
   opens a sub-modal that shares chrome with the fixture-config modal.
   ============================================================================= */

.mc-edit-header[b-puax3l7czg] {
    align-items: flex-start;
}

.mc-edit-title-row[b-puax3l7czg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[b-puax3l7czg] .mc-back-btn {
    margin-left: -8px;
    color: var(--pm-ink-soft);
}

.mc-loading[b-puax3l7czg] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

[b-puax3l7czg] .form-card {
    padding: 24px 26px;
    max-width: 760px;
    overflow: visible;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-flat);
    font-family: var(--pm-font-body);
}

[b-puax3l7czg] .form-stack {
    gap: 18px;
}

[b-puax3l7czg] .name-field {
    width: 100%;
}

[b-puax3l7czg] .league-selectors {
    gap: 10px;
    flex-wrap: wrap;
}

[b-puax3l7czg] .league-select {
    min-width: 200px;
}

[b-puax3l7czg] fluent-divider {
    --divider-color: var(--pm-hairline);
    margin: 4px 0;
}

/* --- section labels (FluentLabel Typography.H6 replacement vibe) ----- */

[b-puax3l7czg] fluent-label[typo="h6"] {
    font-family: var(--pm-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink);
}

.section-label-disabled[b-puax3l7czg] {
    opacity: 0.35;
}

.hint[b-puax3l7czg] {
    font-size: 0.78rem;
    color: var(--pm-ink-soft);
    line-height: 1.4;
}

.hint-disabled[b-puax3l7czg] {
    font-size: 0.78rem;
    color: var(--pm-ink-faint);
    opacity: 0.7;
    font-style: italic;
}

/* --- tag list (selected sportsbooks / markets) ------------------------ */

.tag-list[b-puax3l7czg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tag[b-puax3l7czg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent-ink);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    align-self: flex-start;
    border: 1px solid color-mix(in srgb, var(--pm-accent) 25%, transparent);
}

.tag-clickable[b-puax3l7czg] {
    cursor: pointer;
    transition: background-color 100ms ease, border-color 100ms ease;
}

.tag-clickable:hover[b-puax3l7czg] {
    background: color-mix(in srgb, var(--pm-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--pm-accent) 45%, transparent);
}

.tag-remove[b-puax3l7czg] {
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.65;
}

.tag-remove:hover[b-puax3l7czg] {
    opacity: 1;
}

.tag.tag-locked[b-puax3l7czg] {
    background: var(--pm-surface-tint);
    color: var(--pm-ink-soft);
    border-color: var(--pm-hairline);
    cursor: default;
}

/* --- selector box (the dropdown-style multi-pick) -------------------- */

.selector-box[b-puax3l7czg] {
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    overflow: visible;
    background: var(--pm-surface);
}

.selector-header[b-puax3l7czg] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--pm-hairline-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pm-surface-tint);
}

[b-puax3l7czg] .selector-search {
    flex: 1;
    font-size: 0.85rem;
}

[b-puax3l7czg] .selector-search-full {
    width: 100%;
}

.selector-list[b-puax3l7czg] {
    padding: 4px 0;
}

.selector-list-sportsbooks[b-puax3l7czg] {
    max-height: 180px;
    overflow-y: auto;
}

.selector-list-markets[b-puax3l7czg] {
    max-height: 260px;
    overflow-y: auto;
}

.selector-item[b-puax3l7czg] {
    padding: 2px 12px;
}

.market-list-item[b-puax3l7czg] {
    padding: 7px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--pm-ink);
    transition: background-color 80ms ease;
}

.market-list-item:hover[b-puax3l7czg] {
    background: var(--pm-surface-tint);
}

.market-list-item-configured[b-puax3l7czg] {
    font-weight: 600;
    background: var(--pm-accent-ghost);
}

.market-list-name[b-puax3l7czg] {
    flex: 1;
}

.market-list-check[b-puax3l7czg] {
    color: var(--pm-accent-ink);
    font-weight: 700;
    font-size: 0.85em;
}

[b-puax3l7czg] .form-actions {
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--pm-hairline);
}

/* =============================================================================
   Market config sub-modal (one open at a time, per market)
   ============================================================================= */

.modal-overlay[b-puax3l7czg] {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: mc-overlay-fade-b-puax3l7czg 160ms ease-out;
}

@keyframes mc-overlay-fade-b-puax3l7czg { from { opacity: 0; } to { opacity: 1; } }

.modal-panel[b-puax3l7czg] {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-pop);
    max-width: 560px;
    width: 90vw;
    max-height: 84vh;
    overflow-y: auto;
    padding: 0;
    font-family: var(--pm-font-body);
    animation: mc-panel-rise-b-puax3l7czg 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mc-panel-rise-b-puax3l7czg {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.modal-header[b-puax3l7czg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pm-hairline);
}

[b-puax3l7czg] .modal-header fluent-label[typo="h5"] {
    font-family: var(--pm-font-display);
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--pm-ink);
}

.modal-close[b-puax3l7czg] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pm-ink);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: var(--pm-radius);
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.modal-close:hover[b-puax3l7czg] {
    opacity: 1;
    background: var(--pm-surface-tint);
    border-color: var(--pm-hairline);
}

.modal-section[b-puax3l7czg] {
    padding: 16px 26px;
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.modal-section:last-of-type[b-puax3l7czg] {
    border-bottom: none;
}

[b-puax3l7czg] .modal-section fluent-label[typo="h6"] {
    font-family: var(--pm-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink-faint);
    display: block;
    margin-bottom: 6px;
}

.modal-section > .hint[b-puax3l7czg] {
    margin-top: 6px;
}

[b-puax3l7czg] .modal-vig-input {
    width: 120px;
    margin: 4px 0;
}

.modal-sportsbook-row[b-puax3l7czg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

[b-puax3l7czg] .modal-sportsbook-select {
    flex: 1;
    min-width: 140px;
}

[b-puax3l7czg] .modal-weight-input {
    width: 86px;
}

.modal-weight-suffix[b-puax3l7czg] {
    font-family: var(--pm-font-mono);
    font-size: 0.82rem;
    color: var(--pm-ink-faint);
}

.modal-weights-total[b-puax3l7czg] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
}

.modal-weights-total.valid[b-puax3l7czg] {
    background: var(--pm-pos-soft);
    color: var(--pm-pos);
}

.modal-weights-total.invalid[b-puax3l7czg] {
    background: var(--pm-neg-soft);
    color: var(--pm-neg);
}

.modal-weights-hint[b-puax3l7czg] {
    font-family: var(--pm-font-body);
    font-weight: 400;
    opacity: 0.85;
}

[b-puax3l7czg] .modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 26px;
    border-top: 1px solid var(--pm-hairline);
    background: var(--pm-surface-tint);
    margin: 0;
}
/* /Components/Pages/MarketConfigurations/Index.razor.rz.scp.css */
/* =============================================================================
   Market Configurations list — admin-only landing page. Data grid wrapped
   in a hairline frame, matched to the Reports/Fills look so the admin tools
   feel like part of the same family as the analytics surfaces.
   ============================================================================= */

.mc-loading[b-invycvth21] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.mc-grid-wrap[b-invycvth21] {
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    overflow: hidden;
    background: var(--pm-surface);
}

[b-invycvth21] .fluent-data-grid {
    font-family: var(--pm-font-body);
    font-size: 0.86rem;
}

[b-invycvth21] .fluent-data-grid .col-header {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    padding-block: 12px;
    border-bottom: 1px solid var(--pm-hairline);
    background: var(--pm-surface-tint);
}

[b-invycvth21] .fluent-data-grid [role="row"] {
    border-bottom: 1px solid var(--pm-hairline-soft);
    transition: background-color 100ms ease;
}

[b-invycvth21] .fluent-data-grid [role="row"]:hover {
    background: var(--pm-surface-tint);
}

[b-invycvth21] .fluent-data-grid [role="cell"] {
    padding-block: 10px;
    color: var(--pm-ink);
}
/* /Components/Pages/Markets/FixtureCard.razor.rz.scp.css */
/* =============================================================================
   FixtureCard — terminal-precision editorial card for live odds.

   Design notes (so future edits stay coherent):

   • The status of the game drives a single accent token (--fx-accent) at the
     card root. Every accent flourish — left rail, status dot, live-state colour,
     flash pulses, FP column band — pulls from that one variable. To restyle a
     status, change the variable in .fx-status-{live,final,scheduled}.

   • The header is two stacked tiers — a Headline (matchup · score · status)
     and a Meta strip (date · inning · betting · actions). The Headline owns
     the visual weight; the Meta strip is small-caps secondary copy.

   • Market sections render as editorial eyebrows above a hairline rule rather
     than the previous shaded bar — gives the table a magazine-column rhythm
     instead of a spreadsheet feel.

   • The Fair Price column gets a continuous vertical accent band by applying
     `is-fp` to header + every cell. Borders on cells make this look like one
     column-wide gutter rather than a strip of stamped backgrounds.
   ============================================================================= */

.fx-card[b-rjqr6wyvgw] {
    /* Per-card accent tokens; overridden by .fx-status-{live,final,scheduled}.
       Default inherits the global accent (--pm-accent) so the card themes
       correctly inside the host palette without duplicating colour values. */
    --fx-accent:        var(--pm-accent);
    --fx-accent-soft:   var(--pm-accent-soft);
    --fx-accent-ghost:  var(--pm-accent-ghost);
    --fx-accent-ink:    var(--pm-accent-ink);

    --fx-pos:           var(--pm-pos);
    --fx-neg:           var(--pm-neg);
    --fx-pos-soft:      var(--pm-pos-soft);
    --fx-neg-soft:      var(--pm-neg-soft);

    --fx-ink:           var(--pm-ink);
    --fx-ink-soft:      var(--pm-ink-soft);
    --fx-ink-faint:     var(--pm-ink-faint);
    --fx-hairline:      var(--pm-hairline);
    --fx-hairline-soft: var(--pm-hairline-soft);
    --fx-surface:       var(--pm-surface);
    --fx-surface-tint:  var(--pm-surface-tint);

    --fx-font-display:  var(--pm-font-display);
    --fx-font-body:     var(--pm-font-body);
    --fx-font-mono:     var(--pm-font-mono);

    flex: 0 0 auto;
    width: max-content;
    min-width: 460px;

    position: relative;
    background: var(--fx-surface);
    border: 1px solid var(--fx-hairline);
    border-radius: var(--pm-radius-lg);
    padding: 18px 22px 16px;
    box-shadow: var(--pm-shadow-flat);
    color: var(--fx-ink);
    font-family: var(--fx-font-body);
    isolation: isolate;
    overflow: hidden;
}

/* Left status rail — the card's single most prominent piece of branding.
   Sits inside the rounded corners (clipped by overflow:hidden on the card). */
.fx-card[b-rjqr6wyvgw]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--fx-accent);
    opacity: 0.85;
}

.fx-status-live[b-rjqr6wyvgw]    { --fx-accent: #e07c00;  --fx-accent-soft: rgba(224, 124, 0, 0.14); --fx-accent-ghost: rgba(224, 124, 0, 0.07); --fx-accent-ink: #e07c00; }
.fx-status-final[b-rjqr6wyvgw]   { --fx-accent: #6b7280;  --fx-accent-soft: rgba(107, 114, 128, 0.14); --fx-accent-ghost: rgba(107, 114, 128, 0.07); --fx-accent-ink: var(--neutral-foreground-rest); }
.fx-status-final[b-rjqr6wyvgw]::before { opacity: 0.45; }

/* =============================================================================
   Header
   ============================================================================= */

.fx-head[b-rjqr6wyvgw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.fx-headline[b-rjqr6wyvgw] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

/* Title is now a structured pair of [logo · name] blocks separated by "@". The
   button still owns the click target for opening history; team blocks inside
   stay inline so the layout reads as one continuous lockup. */
.fx-title[b-rjqr6wyvgw] {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--fx-font-display);
    font-weight: 650;
    font-size: 1.02rem;
    letter-spacing: -0.005em;
    color: var(--fx-ink);
    line-height: 1.15;
    font-feature-settings: "ss01", "cv11";
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fx-title:hover .fx-team-name[b-rjqr6wyvgw] {
    color: var(--fx-accent-ink);
}

.fx-title:focus-visible[b-rjqr6wyvgw] {
    outline: 2px solid var(--fx-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.fx-team[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fx-team-name[b-rjqr6wyvgw] {
    transition: color 100ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The @ separator between away and home — small, faded, with even space so the
   eye reads the matchup as a single rhythmic unit. */
.fx-vs[b-rjqr6wyvgw] {
    flex: 0 0 auto;
    font-family: var(--fx-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fx-ink-faint);
    letter-spacing: 0;
    transform: translateY(-0.05em);
}

/* Logo chip — fixed square, transparent PNG sits centred via object-fit:contain.
   The chip itself has a soft surface tint and hairline so transparent logos
   don't look like they're floating against the dark surface. */
.fx-team-logo[b-rjqr6wyvgw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--fx-surface-tint);
    border: 1px solid var(--fx-hairline-soft);
    overflow: hidden;
    transition: border-color 140ms ease, transform 140ms ease;
}

.fx-title:hover .fx-team-logo[b-rjqr6wyvgw] {
    border-color: color-mix(in srgb, var(--fx-accent) 40%, transparent);
    transform: scale(1.05);
}

.fx-team-logo img[b-rjqr6wyvgw] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 3px;
}

/* Monogram fallback — used when no logo URL is available. Tracks the same
   square footprint as a real logo so cards line up regardless of which teams
   have art. */
.fx-team-logo-fallback[b-rjqr6wyvgw] {
    font-family: var(--fx-font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--fx-accent-ink);
    background: var(--fx-accent-ghost);
    border-color: color-mix(in srgb, var(--fx-accent) 30%, transparent);
    line-height: 1;
}

/* Score: large tabular numerals with a hairline em-dash beat in the middle.
   The whole block stays vertically aligned to the title's baseline. */
.fx-score[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--fx-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fx-accent-ink);
    letter-spacing: -0.01em;
    padding: 0 2px;
}

.fx-score-num[b-rjqr6wyvgw] {
    min-width: 1.2ch;
    text-align: center;
}

.fx-score-sep[b-rjqr6wyvgw] {
    font-size: 0.85rem;
    opacity: 0.45;
    transform: translateY(-0.05em);
    font-weight: 400;
}

/* Status chip — dot + label, top-right of the headline. Live status gets the
   pulsing dot; final/scheduled stay still. */
.fx-status[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    background: var(--fx-accent-soft);
    color: var(--fx-accent-ink);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.fx-status-dot[b-rjqr6wyvgw] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fx-accent);
    box-shadow: 0 0 0 0 var(--fx-accent-soft);
}

.fx-status-live .fx-status-dot[b-rjqr6wyvgw] {
    animation: fx-pulse-b-rjqr6wyvgw 1.8s ease-in-out infinite;
}

@keyframes fx-pulse-b-rjqr6wyvgw {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx-accent) 70%, transparent);
    }
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-accent) 0%, transparent);
    }
}

.fx-status-label[b-rjqr6wyvgw] {
    transform: translateY(-0.02em);
}

/* Meta strip — date, live-state, betting state, actions. Small-caps, faded. */
.fx-meta[b-rjqr6wyvgw] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 22px;
}

.fx-date[b-rjqr6wyvgw] {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--fx-ink-soft);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Vertical hairline divider between meta items (replaces middot). */
.fx-meta-rule[b-rjqr6wyvgw] {
    width: 1px;
    height: 12px;
    background: var(--fx-hairline);
    flex: 0 0 auto;
}

.fx-livestate[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: center;
}

.fx-meta-spacer[b-rjqr6wyvgw] {
    flex: 1 1 auto;
}

/* Betting chip — separate visual treatment from the status chip so the two
   don't read as the same thing. Smaller, hollow, with a coloured dot. */
.fx-betting[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 7px;
    border: 1px solid var(--fx-hairline);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--fx-ink-soft);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.fx-betting-dot[b-rjqr6wyvgw] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fx-betting.is-on[b-rjqr6wyvgw] {
    color: var(--fx-pos);
    border-color: var(--fx-pos-soft);
    background: var(--fx-pos-soft);
}

.fx-betting.is-on .fx-betting-dot[b-rjqr6wyvgw] {
    background: var(--fx-pos);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fx-pos) 12%, transparent);
}

.fx-betting.is-off[b-rjqr6wyvgw] {
    color: var(--fx-neg);
    border-color: var(--fx-neg-soft);
    background: transparent;
}

.fx-betting.is-off .fx-betting-dot[b-rjqr6wyvgw] {
    background: var(--fx-neg);
}

.fx-betting-label[b-rjqr6wyvgw] {
    transform: translateY(-0.02em);
}

/* Action buttons — uniform icon chrome. Hover bumps opacity and pulls in a
   hairline; configured-override and danger states are distinguishable. */
.fx-actions[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.fx-btn[b-rjqr6wyvgw] {
    appearance: none;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fx-ink-faint);
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.fx-btn:hover:not(:disabled)[b-rjqr6wyvgw] {
    color: var(--fx-ink);
    background: var(--fx-surface-tint);
    border-color: var(--fx-hairline);
}

.fx-btn:focus-visible[b-rjqr6wyvgw] {
    outline: 2px solid var(--fx-accent);
    outline-offset: 1px;
}

.fx-btn:disabled[b-rjqr6wyvgw] {
    opacity: 0.45;
    cursor: not-allowed;
}

.fx-btn.is-active[b-rjqr6wyvgw] {
    color: var(--fx-accent-ink);
    background: var(--fx-accent-soft);
}

.fx-btn-dismiss[b-rjqr6wyvgw] {
    font-size: 0.72rem;
    line-height: 1;
    padding: 4px 6px;
    color: var(--fx-ink-faint);
}

.fx-btn-dismiss:hover:not(:disabled)[b-rjqr6wyvgw] {
    color: var(--fx-neg);
    background: var(--fx-neg-soft);
    border-color: var(--fx-neg-soft);
}

/* =============================================================================
   Empty state
   ============================================================================= */

.fx-empty[b-rjqr6wyvgw] {
    padding: 14px 0 4px;
    font-size: 0.8rem;
    color: var(--fx-ink-faint);
    font-style: italic;
}

/* =============================================================================
   Odds table
   ============================================================================= */

.fx-odds-wrap[b-rjqr6wyvgw] {
    margin: 0 -22px -16px;  /* bleed to card edges so column accents reach the
                                bottom of the card without an awkward inset. */
    padding: 0 22px 16px;
    overflow-x: auto;
}

.fx-odds[b-rjqr6wyvgw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-feature-settings: "tnum", "ss01";
}

/* --- table header ------------------------------------------------------- */

.fx-th-row th[b-rjqr6wyvgw] {
    text-align: center;
    font-weight: 600;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fx-ink-faint);
    padding: 6px 12px 9px;
    border-bottom: 1px solid var(--fx-hairline);
    white-space: nowrap;
    min-width: 80px;
}

.fx-th-selection[b-rjqr6wyvgw] {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
    min-width: 160px !important;
}

.fx-th-fp[b-rjqr6wyvgw] {
    color: var(--accent-foreground-rest) !important;
    background: var(--fx-accent-ghost);
    border-bottom-color: var(--fx-accent) !important;
    letter-spacing: 0.14em !important;
}

.fx-th-pos[b-rjqr6wyvgw] {
    border-left: 1px solid var(--fx-hairline);
    padding-left: 12px !important;
    padding-right: 0 !important;
    text-align: right !important;
    min-width: 60px !important;
}

/* --- market section rule ----------------------------------------------- */

.fx-rule td[b-rjqr6wyvgw] {
    padding: 18px 0 6px;
    border-bottom: 1px solid var(--fx-hairline);
}

.fx-rule:first-of-type td[b-rjqr6wyvgw] {
    padding-top: 12px;
}

.fx-rule-inner[b-rjqr6wyvgw] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.2;
}

.fx-rule-name[b-rjqr6wyvgw] {
    font-family: var(--fx-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fx-ink);
}

.fx-rule-override[b-rjqr6wyvgw] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1px 6px 2px;
    border-radius: 3px;
    background: var(--fx-accent);
    color: var(--foreground-on-accent-rest);
    line-height: 1;
    transform: translateY(-1px);
}

.fx-rule-meta[b-rjqr6wyvgw] {
    font-size: 0.7rem;
    color: var(--fx-ink-faint);
    font-weight: 400;
    letter-spacing: 0;
}

.fx-rule-meta-sep[b-rjqr6wyvgw] {
    margin: 0 4px;
    opacity: 0.5;
}

/* --- price rows --------------------------------------------------------- */

.fx-row td[b-rjqr6wyvgw] {
    padding: 7px 12px;
    border-bottom: 1px solid var(--fx-hairline-soft);
    transition: background-color 80ms ease;
}

.fx-row:last-child td[b-rjqr6wyvgw] {
    border-bottom: none;
}

.fx-row:hover td[b-rjqr6wyvgw] {
    background: var(--fx-surface-tint);
}

/* Subtle alternating band for paired rows — quieter than a uniform fill so
   the eye reads pairings without the stripe fighting the data. */
.fx-row.pair-alt td[b-rjqr6wyvgw] {
    background: color-mix(in srgb, var(--fx-ink) 1.5%, transparent);
}

.fx-row.pair-alt:hover td[b-rjqr6wyvgw] {
    background: color-mix(in srgb, var(--fx-ink) 3.5%, transparent);
}

/* Hairline between pair groups — single 1px line of slightly stronger weight. */
.fx-row.pair-boundary td[b-rjqr6wyvgw] {
    border-top: 1px solid var(--fx-hairline);
}

.fx-cell-selection[b-rjqr6wyvgw] {
    font-family: var(--fx-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--fx-ink);
    white-space: nowrap;
    padding-left: 0 !important;
    letter-spacing: 0.005em;
}

.fx-cell-price[b-rjqr6wyvgw] {
    text-align: center;
    font-family: var(--fx-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    position: relative;
    color: var(--fx-ink);
}

.fx-cell-price.is-pos[b-rjqr6wyvgw] { color: var(--fx-pos); }
.fx-cell-price.is-neg[b-rjqr6wyvgw] { color: var(--fx-neg); }

.fx-cell-price.is-empty[b-rjqr6wyvgw] {
    font-weight: 400;
}

.fx-price-empty[b-rjqr6wyvgw] {
    color: var(--fx-ink-faint);
    opacity: 0.7;
}

.fx-price-value[b-rjqr6wyvgw] {
    display: inline-block;
}

/* "Main" price marker: a thin underline drawn beneath the value. Subtler than
   the previous full-cell bg tint + left bar. */
.fx-cell-price.is-main .fx-price-value[b-rjqr6wyvgw] {
    box-shadow: inset 0 -2px 0 var(--accent-fill-rest);
    padding-bottom: 1px;
}

/* Fair Price column band — runs vertically through every is-fp cell. The left
   rule extends the column header's underline; the soft tint identifies the
   anchor column without shouting. */
.fx-cell-price.is-fp[b-rjqr6wyvgw] {
    background: var(--fx-accent-ghost);
    border-left: 1px solid color-mix(in srgb, var(--accent-fill-rest) 40%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent-fill-rest) 40%, transparent);
}

.fx-row.pair-alt .fx-cell-price.is-fp[b-rjqr6wyvgw] {
    background: var(--fx-accent-soft);
}

/* Kalshi cells: clickable. Hover reveals an inline arrow glyph to make the
   affordance explicit — the cursor change alone wasn't legible in a dense table. */
.fx-cell-price.is-clickable[b-rjqr6wyvgw] {
    cursor: pointer;
}

.fx-cell-price.is-clickable[b-rjqr6wyvgw]::after {
    content: "↗";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-55%);
    font-size: 0.7em;
    font-family: var(--fx-font-body);
    color: var(--fx-accent-ink);
    opacity: 0;
    transition: opacity 100ms ease;
    pointer-events: none;
}

.fx-cell-price.is-clickable:hover[b-rjqr6wyvgw] {
    background: color-mix(in srgb, var(--fx-accent) 8%, transparent);
}

.fx-cell-price.is-clickable:hover[b-rjqr6wyvgw]::after {
    opacity: 0.65;
}

.fx-price-delta[b-rjqr6wyvgw] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.7em;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.fx-price-delta-arrow[b-rjqr6wyvgw] {
    font-size: 0.85em;
    transform: translateY(-0.05em);
}

.fx-price-delta.is-up[b-rjqr6wyvgw]   { color: var(--fx-pos); }
.fx-price-delta.is-down[b-rjqr6wyvgw] { color: var(--fx-neg); }

/* --- position (P&L) column --------------------------------------------- */

.fx-cell-pos[b-rjqr6wyvgw] {
    text-align: right;
    font-family: var(--fx-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    border-left: 1px solid var(--fx-hairline);
    padding: 7px 0 7px 12px !important;
    padding-right: 0 !important;
    white-space: nowrap;
    color: var(--fx-ink-faint);
    position: relative;
    font-size: 0.82rem;
}

.fx-cell-pos.has-pos[b-rjqr6wyvgw] {
    color: var(--fx-ink);
    font-weight: 600;
}

.fx-cell-pos.is-pos[b-rjqr6wyvgw] { color: var(--fx-pos); }
.fx-cell-pos.is-neg[b-rjqr6wyvgw] { color: var(--fx-neg); }

.fx-cell-pos.is-clickable[b-rjqr6wyvgw] {
    cursor: pointer;
}

.fx-cell-pos.is-clickable:hover[b-rjqr6wyvgw] {
    background: var(--fx-surface-tint);
    text-decoration: underline;
}

/* =============================================================================
   Flash highlight — a soft accent pulse, NOT the old yellow wash.
   Used for any cell-or-block that flips fresh ("price changed", "score moved").
   ============================================================================= */

.fx-flash[b-rjqr6wyvgw] {
    animation: fx-flash-fade-b-rjqr6wyvgw 4.5s ease-out forwards;
    border-radius: 3px;
}

.fx-cell-price.fx-flash[b-rjqr6wyvgw],
.fx-cell-pos.fx-flash[b-rjqr6wyvgw] {
    animation: none;
    position: relative;
}

.fx-cell-price.fx-flash[b-rjqr6wyvgw]::before,
.fx-cell-pos.fx-flash[b-rjqr6wyvgw]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--fx-accent) 32%, transparent);
    animation: fx-flash-fade-b-rjqr6wyvgw 4.5s ease-out forwards;
    pointer-events: none;
    z-index: -1;
}

@keyframes fx-flash-fade-b-rjqr6wyvgw {
    0%   { background-color: color-mix(in srgb, var(--fx-accent) 32%, transparent); }
    100% { background-color: transparent; }
}

/* =============================================================================
   Dark mode — tune signal greens/reds upward so they read against a dark surface.
   ============================================================================= */

/* Dark-mode tweaks. The signal palette (pos/neg) and surface tint flip
   automatically via the global --pm-* tokens; we only need to retune the
   status-specific accents here. */
@media (prefers-color-scheme: dark) {
    .fx-status-live[b-rjqr6wyvgw]   { --fx-accent: #fbbf24; --fx-accent-soft: rgba(251, 191, 36, 0.18); --fx-accent-ghost: rgba(251, 191, 36, 0.09); --fx-accent-ink: #fbbf24; }
    .fx-status-final[b-rjqr6wyvgw]  { --fx-accent: #9ca3af; --fx-accent-soft: rgba(156, 163, 175, 0.16); --fx-accent-ghost: rgba(156, 163, 175, 0.08); --fx-accent-ink: var(--neutral-foreground-rest); }
}

/* =============================================================================
   Responsive — small screens. The card drops its 460px min-width to span the
   full viewport width and tightens padding / type so it fits without horizontal
   PAGE scroll; the odds table keeps its own overflow-x: auto so dense column
   sets still scroll WITHIN the card rather than blowing out the layout.
   ============================================================================= */

@media (max-width: 640px) {
    .fx-card[b-rjqr6wyvgw] {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
        padding: 13px 14px 11px;
        border-radius: 10px;
    }

    .fx-odds-wrap[b-rjqr6wyvgw] {
        margin: 0 -14px -11px;
        padding: 0 14px 11px;
    }

    .fx-head[b-rjqr6wyvgw] { gap: 6px; margin-bottom: 10px; }
    .fx-headline[b-rjqr6wyvgw] { gap: 10px; }
    .fx-title[b-rjqr6wyvgw] { font-size: 0.92rem; gap: 7px; }
    .fx-team-logo[b-rjqr6wyvgw] { width: 22px; height: 22px; border-radius: 6px; }
    .fx-score[b-rjqr6wyvgw] { font-size: 1rem; gap: 6px; }

    .fx-odds[b-rjqr6wyvgw] { font-size: 0.76rem; }
    .fx-th-row th[b-rjqr6wyvgw] {
        padding: 5px 8px 7px;
        min-width: 52px;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }
    .fx-th-selection[b-rjqr6wyvgw] { min-width: 96px !important; }
    .fx-th-pos[b-rjqr6wyvgw] { min-width: 48px !important; padding-left: 8px !important; }

    .fx-rule td[b-rjqr6wyvgw] { padding: 13px 0 5px; }
    .fx-rule:first-of-type td[b-rjqr6wyvgw] { padding-top: 9px; }

    .fx-row td[b-rjqr6wyvgw] { padding: 6px 8px; }
    .fx-cell-selection[b-rjqr6wyvgw] { font-size: 0.76rem; }
    .fx-cell-price[b-rjqr6wyvgw] { font-size: 0.78rem; }
    .fx-cell-pos[b-rjqr6wyvgw] { font-size: 0.74rem; padding-left: 8px !important; }
}
/* /Components/Pages/Markets/FixtureHistoryModal.razor.rz.scp.css */
/* =============================================================================
   FixtureHistoryModal — odds-history chart viewer. Wide modal, scrolling
   container, chart sections separated by hairline rules + eyebrow labels.
   ============================================================================= */

.history-overlay[b-on2yg5n06l] {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    overflow-y: auto;
    padding: 40px 20px;
    animation: history-overlay-fade-b-on2yg5n06l 160ms ease-out;
}

@keyframes history-overlay-fade-b-on2yg5n06l { from { opacity: 0; } to { opacity: 1; } }

.history-panel[b-on2yg5n06l] {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-pop);
    width: 96vw;
    max-width: 1400px;
    overflow: visible;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-family: var(--pm-font-body);
    animation: history-panel-rise-b-on2yg5n06l 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes history-panel-rise-b-on2yg5n06l {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.history-header[b-on2yg5n06l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pm-hairline);
}

.history-title-stack[b-on2yg5n06l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.history-title[b-on2yg5n06l] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.008em;
    color: var(--pm-ink);
    font-feature-settings: "ss01", "cv11";
}

.history-close[b-on2yg5n06l] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pm-ink);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: var(--pm-radius);
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.history-close:hover[b-on2yg5n06l] {
    opacity: 1;
    background: var(--pm-surface-tint);
    border-color: var(--pm-hairline);
}

.history-loading[b-on2yg5n06l] {
    display: flex;
    justify-content: center;
    padding: 56px 0;
}

.history-empty[b-on2yg5n06l] {
    font-size: 0.9rem;
    color: var(--pm-ink-faint);
    font-style: italic;
    padding: 36px 26px;
    text-align: center;
}

.history-chart-section[b-on2yg5n06l] {
    padding: 18px 26px;
    border-bottom: 1px solid var(--pm-hairline-soft);
    min-width: 0;
}

.history-chart-section:last-child[b-on2yg5n06l] {
    border-bottom: none;
    padding-bottom: 26px;
}

.history-section-label[b-on2yg5n06l] {
    font-family: var(--pm-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink);
    margin-bottom: 10px;
}
/* /Components/Pages/Markets/GameLogModal.razor.rz.scp.css */
/* Game Log modal — hierarchical activity ledger for one live fixture.
   The .modal-overlay / .modal-panel / .modal-close base classes are also
   defined in Index.razor.css for that page's other modals, but Blazor
   scoped CSS isolates them to that component's tree. This component renders
   its own elements with those classes, so duplicates the base styles here
   to stay self-contained. Keep visually in sync with Index.razor.css. */

.modal-overlay[b-tlpbtk2vte] {
    position: fixed;
    inset: 0;
    background-color: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: gl-overlay-fade-b-tlpbtk2vte 160ms ease-out;
}

@keyframes gl-overlay-fade-b-tlpbtk2vte {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-panel[b-tlpbtk2vte] {
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 24px 60px -20px rgba(0, 0, 0, 0.45);
    max-width: 580px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    animation: gl-panel-rise-b-tlpbtk2vte 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gl-panel-rise-b-tlpbtk2vte {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.modal-close[b-tlpbtk2vte] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.modal-close:hover[b-tlpbtk2vte] {
    opacity: 1;
    background-color: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

.game-log-modal-panel[b-tlpbtk2vte] {
    width: min(96vw, 1400px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.game-log-header[b-tlpbtk2vte] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e5e5);
}

.game-log-title-stack[b-tlpbtk2vte] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.game-log-title[b-tlpbtk2vte] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-foreground-rest, #1a1a1a);
}

.game-log-subtitle[b-tlpbtk2vte] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint, #707070);
}

.game-log-meta-rule[b-tlpbtk2vte] {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--neutral-stroke-divider-rest, #d4d4d4);
}

.game-log-content[b-tlpbtk2vte] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
}

.game-log-loading[b-tlpbtk2vte],
.game-log-empty[b-tlpbtk2vte] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    color: var(--neutral-foreground-hint, #707070);
    font-size: 0.875rem;
}

/* Intermission band — top of the hierarchy */
.gl-intermission[b-tlpbtk2vte] {
    margin-bottom: 0.75rem;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 8px;
    background: var(--neutral-fill-rest, #fafafa);
    overflow: hidden;
}

.gl-intermission-open[b-tlpbtk2vte] {
    background: var(--neutral-fill-secondary-rest, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.gl-intermission-head[b-tlpbtk2vte] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
    transition: background 100ms ease;
}

.gl-intermission-head:hover[b-tlpbtk2vte] {
    background: var(--neutral-fill-input-alt-hover, rgba(0, 0, 0, 0.03));
}

.gl-chevron[b-tlpbtk2vte] {
    display: inline-flex;
    width: 0.85rem;
    color: var(--neutral-foreground-hint, #909090);
    transition: transform 120ms ease;
    flex-shrink: 0;
    font-size: 0.65rem;
}

.gl-chevron-open[b-tlpbtk2vte] {
    transform: rotate(90deg);
}

.gl-intermission-name[b-tlpbtk2vte] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--neutral-foreground-rest, #1a1a1a);
    min-width: 4rem;
}

.gl-intermission-times[b-tlpbtk2vte] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint, #707070);
    font-variant-numeric: tabular-nums;
    flex: 1 1 auto;
}

.gl-arrow[b-tlpbtk2vte] {
    color: var(--neutral-foreground-disabled, #b0b0b0);
}

.gl-duration[b-tlpbtk2vte] {
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    background: var(--neutral-fill-rest, #efefef);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #707070);
}

.gl-time[b-tlpbtk2vte] {
    color: var(--neutral-foreground-rest, #404040);
}

.gl-intermission-count[b-tlpbtk2vte] {
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint, #707070);
    white-space: nowrap;
}

.gl-intermission-body[b-tlpbtk2vte] {
    padding: 0.5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gl-empty-nested[b-tlpbtk2vte] {
    padding: 0.5rem 0.25rem;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-hint, #909090);
    font-style: italic;
}

/* Per-order-row styles (.gl-order, .gl-side, .gl-status-pill, .gl-kv,
   .gl-fills-table, etc.) live in GameLogOrderRow.razor.css because Blazor
   scoped CSS isolates each component's stylesheet to its own rendered tree.
   The order elements are emitted by GameLogOrderRow.razor, not by this
   component, so styles targeting them must be scoped under the order-row
   component to apply. */
/* /Components/Pages/Markets/GameLogOrderRow.razor.rz.scp.css */
/* GameLogOrderRow — one order line in the Game Log modal.
   Styles here target elements rendered by this component, NOT by
   GameLogModal. Blazor scoped CSS isolates each component's stylesheet to
   that component's rendered tree via a unique b-XXXXX attribute. If these
   styles lived in GameLogModal.razor.css they wouldn't match the order
   elements (different scope attribute), and the row would render as raw
   inline text. */

.gl-order[b-v59fa6bq5x] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e8e8e8);
    border-radius: 6px;
    /* Themed surface — `--neutral-layer-1` flips to a dark color under the
       Fluent dark theme. A hardcoded `#fff` here left text invisible because
       the foreground vars below ARE themed (they go light in dark mode). */
    background: var(--neutral-layer-1);
    overflow: hidden;
}

.gl-order-amendment[b-v59fa6bq5x] {
    /* Slightly receded surface so amendments visually nest under the root.
       `--neutral-fill-rest` is themed and a touch darker than layer-1 in light
       mode, a touch lighter than layer-1 in dark mode. */
    background: var(--neutral-fill-rest);
    border-color: var(--neutral-stroke-divider-rest);
}

.gl-order-head[b-v59fa6bq5x] {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    align-items: flex-start;
}

.gl-order-toggle[b-v59fa6bq5x] {
    flex: 0 0 1.25rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.15rem 0;
    align-self: flex-start;
    color: inherit;
}

.gl-order-toggle-empty[b-v59fa6bq5x] {
    cursor: default;
    visibility: hidden;
}

.gl-chevron[b-v59fa6bq5x] {
    display: inline-flex;
    width: 0.85rem;
    color: var(--neutral-foreground-hint, #909090);
    transition: transform 120ms ease;
    flex-shrink: 0;
    font-size: 0.65rem;
}

.gl-chevron-open[b-v59fa6bq5x] {
    transform: rotate(90deg);
}

.gl-order-main[b-v59fa6bq5x] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gl-order-line1[b-v59fa6bq5x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gl-side[b-v59fa6bq5x] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gl-side-yes[b-v59fa6bq5x] {
    background: rgba(34, 139, 34, 0.12);
    color: #1f7a1f;
}

.gl-side-no[b-v59fa6bq5x] {
    background: rgba(192, 32, 32, 0.12);
    color: #a01f1f;
}

.gl-order-desc[b-v59fa6bq5x] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--neutral-foreground-rest, #1a1a1a);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-status-pill[b-v59fa6bq5x] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.gl-status-time[b-v59fa6bq5x] {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    opacity: 0.85;
}

/* Rejection-reason chip rendered next to the Rejected status pill.
   Mono font + muted-red border to match the pill's palette without
   duplicating the heavy fill — keeps the reason scannable on a row
   that already shouts "rejected". Tooltip carries the full message. */
.gl-rejection-code[b-v59fa6bq5x] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: #a01f1f;
    border: 1px solid rgba(192, 32, 32, 0.3);
    background: rgba(192, 32, 32, 0.04);
}

@media (prefers-color-scheme: dark) {
    .gl-rejection-code[b-v59fa6bq5x] {
        color: #f87171;
        border-color: rgba(248, 113, 113, 0.4);
        background: rgba(248, 113, 113, 0.08);
    }
}

/* Light-theme palette: deeper foregrounds on soft tinted backgrounds. */
.gl-status-resting[b-v59fa6bq5x] { background: rgba(0, 120, 215, 0.12); color: #0056a3; }
.gl-status-filled[b-v59fa6bq5x] { background: rgba(34, 139, 34, 0.16); color: #1f7a1f; }
.gl-status-expired[b-v59fa6bq5x] { background: rgba(140, 90, 0, 0.12); color: #8c5a00; }
.gl-status-canceled[b-v59fa6bq5x] { background: rgba(120, 120, 120, 0.15); color: #555; }
.gl-status-takendown[b-v59fa6bq5x] { background: rgba(60, 60, 60, 0.12); color: #303030; }
.gl-status-rejected[b-v59fa6bq5x] { background: rgba(192, 32, 32, 0.14); color: #a01f1f; }
.gl-status-amended[b-v59fa6bq5x] { background: rgba(140, 100, 200, 0.14); color: #6b3fa0; }
.gl-status-default[b-v59fa6bq5x] { background: rgba(0, 0, 0, 0.08); color: #404040; }

/* Dark-theme palette: brighter foregrounds + slightly more opaque backgrounds
   so the pills stand out against the dark surface. Mirrors app.css's
   prefers-color-scheme pattern so the rest of the page's dark theme matches. */
@media (prefers-color-scheme: dark) {
    .gl-status-resting[b-v59fa6bq5x] { background: rgba(96, 165, 250, 0.22); color: #60a5fa; }
    .gl-status-filled[b-v59fa6bq5x] { background: rgba(74, 222, 128, 0.22); color: #4ade80; }
    .gl-status-expired[b-v59fa6bq5x] { background: rgba(251, 191, 36, 0.22); color: #fbbf24; }
    .gl-status-canceled[b-v59fa6bq5x] { background: rgba(190, 190, 190, 0.18); color: #c4c4c4; }
    .gl-status-takendown[b-v59fa6bq5x] { background: rgba(180, 180, 180, 0.14); color: #b0b0b0; }
    .gl-status-rejected[b-v59fa6bq5x] { background: rgba(248, 113, 113, 0.22); color: #f87171; }
    .gl-status-amended[b-v59fa6bq5x] { background: rgba(186, 142, 240, 0.22); color: #ba8ef0; }
    .gl-status-default[b-v59fa6bq5x] { background: rgba(200, 200, 200, 0.14); color: #b0b0b0; }

    .gl-side-yes[b-v59fa6bq5x] { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
    .gl-side-no[b-v59fa6bq5x] { background: rgba(248, 113, 113, 0.18); color: #f87171; }
}

.gl-order-line2[b-v59fa6bq5x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    color: var(--neutral-foreground-rest, #404040);
    font-variant-numeric: tabular-nums;
}

.gl-kv[b-v59fa6bq5x] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}

.gl-k[b-v59fa6bq5x] {
    color: var(--neutral-foreground-hint, #909090);
    font-size: 0.75rem;
    text-transform: lowercase;
}

.gl-v[b-v59fa6bq5x] {
    color: inherit;
}

.gl-kv-ticker[b-v59fa6bq5x] {
    max-width: 16rem;
    overflow: hidden;
}

.gl-kv-ticker .gl-v[b-v59fa6bq5x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

.gl-order-line3[b-v59fa6bq5x] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #707070);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-order-detail[b-v59fa6bq5x] {
    border-top: 1px solid var(--neutral-stroke-divider-rest, #ececec);
    padding: 0.6rem 0.65rem 0.65rem;
    background: rgba(0, 0, 0, 0.015);
}

.gl-detail-label[b-v59fa6bq5x] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint, #707070);
    margin: 0.5rem 0 0.35rem;
}

.gl-detail-label:first-child[b-v59fa6bq5x] {
    margin-top: 0;
}

.gl-amendments[b-v59fa6bq5x] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gl-fills-table[b-v59fa6bq5x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.gl-fills-table th[b-v59fa6bq5x] {
    text-align: left;
    font-weight: 500;
    padding: 0.3rem 0.5rem;
    color: var(--neutral-foreground-hint, #707070);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e8e8e8);
}

.gl-fills-table td[b-v59fa6bq5x] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #f0f0f0);
}

.gl-fills-table tbody tr:last-child td[b-v59fa6bq5x] {
    border-bottom: 0;
}

.gl-fills-table .num[b-v59fa6bq5x] {
    text-align: right;
}

.gl-fills-table .trade-id[b-v59fa6bq5x] {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--neutral-foreground-hint, #707070);
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Markets/Index.razor.rz.scp.css */
/* Markets-page-specific layout — chrome (page header, banners, buttons) lives
   in the global .pm-* utility classes; only the config-section + fixture-grid
   layout remain page-scoped. */

.config-section[b-2gw8dikjus] {
    margin-bottom: 44px;
}

.config-header[b-2gw8dikjus] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pm-hairline);
    flex-wrap: wrap;
}

.config-title[b-2gw8dikjus] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--pm-ink);
    line-height: 1.1;
    font-feature-settings: "ss01", "cv11";
    margin-right: 4px;
}

.fixture-grid[b-2gw8dikjus] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

/* =============================================================================
   Modal chrome — shared base for fixture-config and position modals.
   The .modal-panel-config modifier layers on the terminal-precision treatment
   used by the FixtureCard (eyebrow titles, hairline rules, accent tokens).
   ============================================================================= */

.modal-overlay[b-2gw8dikjus] {
    position: fixed;
    inset: 0;
    background-color: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fc-overlay-fade-b-2gw8dikjus 160ms ease-out;
}

@keyframes fc-overlay-fade-b-2gw8dikjus {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-panel[b-2gw8dikjus] {
    background-color: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 24px 60px -20px rgba(0, 0, 0, 0.45);
    max-width: 580px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    animation: fc-panel-rise-b-2gw8dikjus 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fc-panel-rise-b-2gw8dikjus {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.modal-header[b-2gw8dikjus] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.modal-close[b-2gw8dikjus] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.modal-close:hover[b-2gw8dikjus] {
    opacity: 1;
    background-color: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

/* =============================================================================
   Fixture-config modal — design system mirroring the FixtureCard.

   Tokens declared on the panel so the whole modal recolours by editing one
   block. Header / body / footer is a three-tier layout: sticky-ish footer
   gives the form a clear closing beat instead of free-floating buttons.
   ============================================================================= */

.modal-panel-config[b-2gw8dikjus] {
    /* Inherit global tokens; component-scoped names kept so the rest of the
       file (which references --fc-*) doesn't need a sweeping rename. */
    --fc-accent:        var(--pm-accent);
    --fc-accent-soft:   var(--pm-accent-soft);
    --fc-accent-ghost:  var(--pm-accent-ghost);
    --fc-accent-ink:    var(--pm-accent-ink);

    --fc-pos:           var(--pm-pos);
    --fc-neg:           var(--pm-neg);
    --fc-pos-soft:      var(--pm-pos-soft);
    --fc-neg-soft:      var(--pm-neg-soft);

    --fc-ink:           var(--pm-ink);
    --fc-ink-soft:      var(--pm-ink-soft);
    --fc-ink-faint:     var(--pm-ink-faint);
    --fc-hairline:      var(--pm-hairline);
    --fc-hairline-soft: var(--pm-hairline-soft);
    --fc-surface-tint:  var(--pm-surface-tint);

    --fc-font-display:  var(--pm-font-display);
    --fc-font-body:     var(--pm-font-body);
    --fc-font-mono:     var(--pm-font-mono);

    max-width: 620px;
    padding: 0;
    /* Override .modal-panel's 80vh cap so the config form has room for all three
       expanded markets. The fc-body still scrolls if even 90vh isn't enough on a
       short viewport — see the min-height: 0 fix below for why scrolling works
       at all in this flex layout. */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--fc-font-body);
}

/* --- header ------------------------------------------------------------ */

.fc-modal-header[b-2gw8dikjus] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--fc-hairline);
    flex-shrink: 0;
}

.fc-title-stack[b-2gw8dikjus] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fc-eyebrow[b-2gw8dikjus] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fc-accent-ink);
}

.fc-title[b-2gw8dikjus] {
    margin: 0;
    font-family: var(--fc-font-display);
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--fc-ink);
    font-feature-settings: "ss01", "cv11";
}

/* --- body --------------------------------------------------------------- */

.fc-body[b-2gw8dikjus] {
    padding: 18px 26px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    /* Flex children default to min-height: auto (= content height), which
       prevents overflow-y: auto from kicking in inside a max-height parent.
       Without this the body grows to fit all expanded sections, pushes past
       the panel's max-height, and the bottom of the form (footer included)
       gets clipped instead of scrolling. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- fixture-level enable toggle --------------------------------------- */

.fc-toggle-card[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--fc-hairline);
    border-radius: 9px;
    background: var(--fc-surface-tint);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.fc-toggle-card.is-on[b-2gw8dikjus] {
    border-color: color-mix(in srgb, var(--fc-pos) 35%, transparent);
    background: var(--fc-pos-soft);
}

.fc-toggle-card.is-off[b-2gw8dikjus] {
    border-color: color-mix(in srgb, var(--fc-neg) 30%, transparent);
    background: color-mix(in srgb, var(--fc-neg) 6%, transparent);
}

.fc-toggle-info[b-2gw8dikjus] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fc-toggle-title[b-2gw8dikjus] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--fc-ink);
}

.fc-toggle-desc[b-2gw8dikjus] {
    font-size: 0.76rem;
    color: var(--fc-ink-soft);
    line-height: 1.4;
}

/* --- market section ----------------------------------------------------- */

.fc-market-section[b-2gw8dikjus] {
    position: relative;
    border: 1px solid var(--fc-hairline);
    border-radius: 9px;
    padding: 14px 16px;
    background: var(--neutral-layer-2);
    transition: border-color 140ms ease, box-shadow 140ms ease;
    overflow: hidden;
}

/* Overridden markets get a 2px accent rail on the left + slight surface lift —
   the same status-signaling pattern as live FixtureCards. Instantly readable. */
.fc-market-section.is-overridden[b-2gw8dikjus] {
    border-color: color-mix(in srgb, var(--fc-accent) 35%, transparent);
    box-shadow: 0 0 0 3px var(--fc-accent-ghost);
}

.fc-market-section.is-overridden[b-2gw8dikjus]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--fc-accent);
}

.fc-market-header[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fc-market-eyebrow[b-2gw8dikjus] {
    font-family: var(--fc-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fc-ink);
}

.fc-market-toggle[b-2gw8dikjus] {
    flex-shrink: 0;
    font-size: 0.8rem;
}

.fc-defaults[b-2gw8dikjus] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.76rem;
    line-height: 1.4;
}

.fc-defaults-label[b-2gw8dikjus] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fc-ink-faint);
    flex-shrink: 0;
}

.fc-defaults-content[b-2gw8dikjus] {
    color: var(--fc-ink-soft);
    font-variant-numeric: tabular-nums;
}

.fc-defaults-sep[b-2gw8dikjus] {
    margin: 0 2px;
    opacity: 0.45;
}

/* --- market body (visible when overridden) ----------------------------- */

.fc-market-body[b-2gw8dikjus] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--fc-hairline-soft);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fc-section-header[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.fc-section-title[b-2gw8dikjus] {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-faint);
}

/* --- sportsbook weight rows ------------------------------------------- */

.fc-sportsbook-list[b-2gw8dikjus] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fc-sportsbook-row[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-sportsbook-select[b-2gw8dikjus] {
    flex: 1;
    min-width: 140px;
}

.fc-weight-input-wrap[b-2gw8dikjus] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.fc-weight-input[b-2gw8dikjus] {
    width: 78px;
}

.fc-weight-input-wrap .fc-unit-suffix[b-2gw8dikjus] {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fc-ink-faint);
}

.fc-weights-total[b-2gw8dikjus] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    line-height: 1;
}

.fc-weights-total-label[b-2gw8dikjus] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fc-ink-faint);
}

.fc-weights-total-value[b-2gw8dikjus] {
    font-family: var(--fc-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.fc-weights-total.valid[b-2gw8dikjus] {
    background: var(--fc-pos-soft);
    color: var(--fc-pos);
}

.fc-weights-total.valid .fc-weights-total-label[b-2gw8dikjus] {
    color: color-mix(in srgb, var(--fc-pos) 70%, transparent);
}

.fc-weights-total.invalid[b-2gw8dikjus] {
    background: var(--fc-neg-soft);
    color: var(--fc-neg);
}

.fc-weights-total.invalid .fc-weights-total-label[b-2gw8dikjus] {
    color: color-mix(in srgb, var(--fc-neg) 70%, transparent);
}

.fc-weights-hint[b-2gw8dikjus] {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
    text-transform: none;
    letter-spacing: 0;
}

/* --- vig / volume form grid ------------------------------------------- */

.fc-form-grid[b-2gw8dikjus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 14px;
    margin-top: 2px;
}

.fc-form-field[b-2gw8dikjus] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fc-form-label[b-2gw8dikjus] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fc-ink-soft);
    line-height: 1.2;
}

.fc-form-sub[b-2gw8dikjus] {
    font-weight: 500;
    letter-spacing: 0.06em;
    opacity: 0.65;
    margin-left: 4px;
}

.fc-form-input[b-2gw8dikjus] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fc-num[b-2gw8dikjus] {
    flex: 1 1 auto;
    min-width: 0;
}

.fc-unit-prefix[b-2gw8dikjus],
.fc-unit-suffix[b-2gw8dikjus] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fc-ink-faint);
    font-family: var(--fc-font-mono);
}

/* Legacy hook still referenced elsewhere — keep neutral so it doesn't clash. */
.fc-unit[b-2gw8dikjus] {
    font-size: 0.85em;
    color: var(--fc-ink-faint);
}

/* --- footer ------------------------------------------------------------- */

.fc-footer[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 26px;
    border-top: 1px solid var(--fc-hairline);
    background: var(--fc-surface-tint);
    flex-shrink: 0;
}

/* =============================================================================
   Dark mode tuning — bump signal greens/reds for readability over the
   layered surface, soften the panel shadow.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    .modal-overlay[b-2gw8dikjus] {
        background-color: rgba(0, 0, 0, 0.6);
    }
    /* Signal palette + shadow flip via --pm-* tokens automatically. */
}

@media (prefers-color-scheme: dark) {
    .odds-table .price-cell.positive[b-2gw8dikjus] {
        color: #66bb6a;
    }

    .odds-table .price-cell.negative[b-2gw8dikjus] {
        color: #ef9a9a;
    }

    .price-change.price-up[b-2gw8dikjus] {
        color: #66bb6a;
    }

    .price-change.price-down[b-2gw8dikjus] {
        color: #ef9a9a;
    }

    .fc-weights-total.valid[b-2gw8dikjus] {
        color: #66bb6a;
    }

    .fc-weights-total.invalid[b-2gw8dikjus] {
        color: #ef9a9a;
    }
}

/* Rebalance grouping in the fixture-config modal */
.fc-rebalance-fieldset[b-2gw8dikjus] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    padding: 4px 14px 12px;
    margin: 8px 0;
}

.fc-rebalance-legend[b-2gw8dikjus] {
    padding: 0 8px;
}

/* =============================================================================
   Position-detail modal (clickable position cell → order history + fills)
   ============================================================================= */

.position-modal-panel[b-2gw8dikjus] {
    max-width: 1100px;
    width: 92vw;
    max-height: 88vh;
}

/* Layered chrome — header / body scroll / no footer. Mirrors the config modal
   structure so both modals feel like the same design family. */
.position-modal-panel-redesigned[b-2gw8dikjus] {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--pm-font-body);
}

.position-modal-header[b-2gw8dikjus] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pm-hairline);
    flex-shrink: 0;
}

.position-modal-title-stack[b-2gw8dikjus] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.position-modal-title-row[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.position-modal-title[b-2gw8dikjus] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.008em;
    color: var(--pm-ink);
    font-feature-settings: "ss01", "cv11";
}

/* Status chip — same dot+label vocabulary as the FixtureCard. */
.position-modal-status[b-2gw8dikjus] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

.position-modal-status-dot[b-2gw8dikjus] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.position-modal-status-live[b-2gw8dikjus] {
    background: color-mix(in srgb, #e07c00 14%, transparent);
    color: #e07c00;
}

.position-modal-status-final[b-2gw8dikjus] {
    background: color-mix(in srgb, var(--pm-ink) 8%, transparent);
    color: var(--pm-ink-soft);
}

.position-modal-status-scheduled[b-2gw8dikjus] {
    background: var(--pm-accent-soft);
    color: var(--pm-accent-ink);
}

@media (prefers-color-scheme: dark) {
    .position-modal-status-live[b-2gw8dikjus] {
        background: rgba(251, 191, 36, 0.18);
        color: #fbbf24;
    }
}

.position-modal-meta[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--pm-ink-soft);
    margin-top: 2px;
}

.position-modal-score[b-2gw8dikjus] {
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--pm-accent-ink);
}

.position-modal-clock[b-2gw8dikjus] {
    font-size: 0.78rem;
    color: var(--pm-ink-soft);
    font-variant-numeric: tabular-nums;
}

.position-modal-meta-rule[b-2gw8dikjus] {
    width: 1px;
    height: 12px;
    background: var(--pm-hairline);
    display: inline-block;
}

.position-modal-subtitle[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.82rem;
    margin-top: 4px;
}

.position-modal-market[b-2gw8dikjus] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    color: var(--pm-ink);
    font-family: var(--pm-font-display);
}

.position-modal-selection[b-2gw8dikjus] {
    color: var(--pm-ink-soft);
}

.position-modal-ticker[b-2gw8dikjus] {
    font-family: var(--pm-font-mono);
    font-size: 0.7rem;
    color: var(--pm-ink-soft);
    padding: 2px 7px;
    background: var(--pm-surface-tint);
    border: 1px solid var(--pm-hairline);
    border-radius: 4px;
    letter-spacing: 0.01em;
}

.position-modal-position-badge[b-2gw8dikjus] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 3px 8px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent-ink);
    border-radius: 4px;
    letter-spacing: 0.01em;
}

.position-modal-position-equals[b-2gw8dikjus] {
    opacity: 0.45;
    margin: 0 1px;
}

/* Section heading inside the position modal — used to separate "Order history"
   from the inline-expanded "Fills for order …" block. Eyebrow-style. */
.position-modal-section-title[b-2gw8dikjus] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink-faint);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Section title row hosts the title plus an inline FluentSwitch on the right
   (e.g., "With fills only"). */
.position-modal-section-title-row[b-2gw8dikjus] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pm-hairline-soft);
    margin-bottom: 4px;
}

.position-modal-order-id[b-2gw8dikjus] {
    font-family: monospace;
    font-size: 0.85rem;
    opacity: 0.85;
}

.position-modal-section-close[b-2gw8dikjus] {
    margin-left: auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    padding: 0 6px;
    font-size: 1rem;
    line-height: 1;
    color: var(--neutral-foreground-rest);
    opacity: 0.6;
}

.position-modal-section-close:hover[b-2gw8dikjus] {
    opacity: 1;
    background-color: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

/* Click-to-expand fills count on each Order History row. Matches the Historical
   Data report's hd-count-link styling. */
.position-count-link[b-2gw8dikjus] {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-foreground-rest);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.position-count-link:hover[b-2gw8dikjus] {
    opacity: 0.8;
}

.position-count-zero[b-2gw8dikjus] {
    opacity: 0.4;
}

/* Chevron column on the Orders table — narrow, just enough for the toggle.
   The triangle is a Unicode glyph rotated 90° via CSS when expanded. */
.hd-expand-col[b-2gw8dikjus] {
    width: 24px;
    padding: 0 4px;
    text-align: center;
}

.hd-expand-toggle[b-2gw8dikjus] {
    background: none;
    border: none;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-size: 0.65rem;
    line-height: 1;
    padding: 4px;
    opacity: 0.6;
    transition: transform 0.12s ease, opacity 0.12s ease;
    display: inline-block;
}

.hd-expand-toggle:hover[b-2gw8dikjus] {
    opacity: 1;
}

.hd-expand-toggle-open[b-2gw8dikjus] {
    transform: rotate(90deg);
    opacity: 1;
}

/* Header above each subtable inside an expanded row. */
.hd-detail-label[b-2gw8dikjus] {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.7;
    margin: 8px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Inset the subtables (and their labels) so they begin at the Time Placed
   column's content edge: past the 24px chevron column and its padding plus
   the Time Placed cell's left padding. Visually nests the detail rows under
   the parent order. */
.hd-amendments-row > td[b-2gw8dikjus] {
    padding-left: 72px !important;
}

.position-modal-content[b-2gw8dikjus] {
    overflow: auto;
    max-height: calc(88vh - 220px);
    padding: 18px 26px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.position-modal-empty[b-2gw8dikjus] {
    padding: 32px;
    text-align: center;
    color: var(--pm-ink-faint);
    font-style: italic;
    font-size: 0.85rem;
}

.position-modal-table[b-2gw8dikjus] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-feature-settings: "tnum";
}

.position-modal-table th[b-2gw8dikjus],
.position-modal-table td[b-2gw8dikjus] {
    padding: 7px 11px;
    text-align: left;
    border-bottom: 1px solid var(--pm-hairline-soft);
    white-space: nowrap;
}

.position-modal-table th[b-2gw8dikjus] {
    background: var(--pm-surface);
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pm-ink-faint);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom-color: var(--pm-hairline);
}

.position-modal-table th.num[b-2gw8dikjus],
.position-modal-table td.num[b-2gw8dikjus] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Yes ¢ / No ¢ columns center on header and value so the cents+american-odds
   string ("50¢ (+100)") sits visually balanced above its column heading. */
.position-modal-table th.cents-col[b-2gw8dikjus],
.position-modal-table td.cents-col[b-2gw8dikjus] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.position-modal-table tbody tr:hover td[b-2gw8dikjus] {
    background: var(--pm-surface-tint);
}

.position-modal-table tbody tr:last-child td[b-2gw8dikjus] {
    border-bottom: none;
}

.position-modal-table .order-id[b-2gw8dikjus],
.position-modal-table .trade-id[b-2gw8dikjus] {
    font-family: var(--pm-font-mono);
    font-size: 0.75rem;
    color: var(--pm-ink-soft);
}

.position-modal-table .consensus-odds[b-2gw8dikjus] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pm-ink-soft);
}

/* Event / fill / side chips — small uppercase pills inside data tables.
   Centralised here because they're used by both the position modal and
   (via .pm-* analogues elsewhere) the various reports. */

.event-badge[b-2gw8dikjus] {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.2;
}

.event-placed[b-2gw8dikjus] {
    background: var(--pm-pos-soft);
    color: var(--pm-pos);
}

.event-amended[b-2gw8dikjus] {
    background: var(--pm-warn-soft);
    color: var(--pm-warn);
}

.fill-side[b-2gw8dikjus], .fill-action[b-2gw8dikjus] {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    display: inline-block;
}

.fill-side-yes[b-2gw8dikjus] {
    background: color-mix(in srgb, #3b82f6 16%, transparent);
    color: #3b82f6;
}

.fill-side-no[b-2gw8dikjus] {
    background: var(--pm-neg-soft);
    color: var(--pm-neg);
}

.fill-action-buy[b-2gw8dikjus] {
    background: var(--pm-pos-soft);
    color: var(--pm-pos);
}

.fill-action-sell[b-2gw8dikjus] {
    background: var(--pm-neg-soft);
    color: var(--pm-neg);
}

@media (prefers-color-scheme: dark) {
    .fill-side-yes[b-2gw8dikjus] {
        background: rgba(96, 165, 250, 0.22);
        color: #60a5fa;
    }
}
/* /Components/Pages/Markets/KalshiOrderBookModal.razor.rz.scp.css */
/* =============================================================================
   Kalshi Order Book modal — shares design DNA with the position modal
   (eyebrow + title header, hairline-separated sections, mono numerals).
   Class prefix .ob-* so it never collides with the global .pm-modal-* base.
   ============================================================================= */

.ob-overlay[b-7cviyuuvks] {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: ob-overlay-fade-b-7cviyuuvks 160ms ease-out;
}

@keyframes ob-overlay-fade-b-7cviyuuvks { from { opacity: 0; } to { opacity: 1; } }

.ob-panel[b-7cviyuuvks] {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-pop);
    max-width: 740px;
    width: 92vw;
    max-height: 84vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--pm-font-body);
    animation: ob-panel-rise-b-7cviyuuvks 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ob-panel-rise-b-7cviyuuvks {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.ob-header[b-7cviyuuvks] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pm-hairline);
    flex-shrink: 0;
}

.ob-title-stack[b-7cviyuuvks] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ob-fixture-title[b-7cviyuuvks] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.008em;
    color: var(--pm-ink);
    font-feature-settings: "ss01", "cv11";
}

.ob-market-name[b-7cviyuuvks] {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink-soft);
    margin-top: 4px;
}

.modal-close[b-7cviyuuvks] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pm-ink);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: var(--pm-radius);
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.modal-close:hover[b-7cviyuuvks] {
    opacity: 1;
    background: var(--pm-surface-tint);
    border-color: var(--pm-hairline);
}

.ob-body[b-7cviyuuvks] {
    padding: 18px 26px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- section eyebrow -------------------------------------------------- */

.ob-section-label[b-7cviyuuvks] {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pm-ink-faint);
    margin: 14px 0 6px;
}

.ob-section-label:first-child[b-7cviyuuvks] {
    margin-top: 0;
}

.ob-loading[b-7cviyuuvks] {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-empty[b-7cviyuuvks] {
    font-size: 0.85rem;
    color: var(--pm-ink-faint);
    font-style: italic;
    padding: 8px 0;
}

.ob-empty-error[b-7cviyuuvks] {
    color: var(--pm-neg);
    font-style: normal;
}

/* --- current odds inline table --------------------------------------- */

.odds-table[b-7cviyuuvks] {
    width: auto;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-feature-settings: "tnum";
}

.odds-table .selection-header[b-7cviyuuvks] {
    min-width: 150px;
    text-align: left;
    padding: 4px 8px 6px;
}

.odds-table .sportsbook-header[b-7cviyuuvks] {
    text-align: center;
    padding: 6px 12px 9px;
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    white-space: nowrap;
    border-bottom: 1px solid var(--pm-hairline);
    min-width: 86px;
}

.odds-table .sportsbook-header.fp-header[b-7cviyuuvks] {
    color: var(--pm-accent-ink);
    border-bottom-color: var(--pm-accent);
    letter-spacing: 0.14em;
}

.odds-table .odds-row td[b-7cviyuuvks] {
    border-bottom: 1px solid var(--pm-hairline-soft);
    padding: 7px 10px;
}

.odds-table .odds-row:last-child td[b-7cviyuuvks] {
    border-bottom: none;
}

.odds-table .selection-cell[b-7cviyuuvks] {
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--pm-ink);
}

.odds-table .price-cell[b-7cviyuuvks] {
    text-align: center;
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.85rem;
    position: relative;
}

.odds-table .price-cell.positive[b-7cviyuuvks] { color: var(--pm-pos); }
.odds-table .price-cell.negative[b-7cviyuuvks] { color: var(--pm-neg); }

.odds-table .price-cell.empty[b-7cviyuuvks] {
    color: var(--pm-ink-faint);
    font-weight: 400;
    opacity: 0.6;
}

.odds-table .price-cell.fp-cell[b-7cviyuuvks] {
    background: var(--pm-accent-ghost);
    border-left: 1px solid color-mix(in srgb, var(--pm-accent) 40%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--pm-accent) 40%, transparent);
}

.odds-table .price-cell.is-main[b-7cviyuuvks] {
    box-shadow: inset 0 -2px 0 var(--pm-accent);
}

/* --- order book columns ----------------------------------------------- */

.ob-books-container[b-7cviyuuvks] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 4px;
}

.ob-book-section[b-7cviyuuvks] {
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    padding: 10px 12px 6px;
    background: var(--pm-surface-tint);
}

.ob-book-selection-label[b-7cviyuuvks] {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.ob-book-table[b-7cviyuuvks] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.ob-book-table th[b-7cviyuuvks] {
    text-align: left;
    padding: 4px 8px 8px;
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
}

.ob-book-table th:last-child[b-7cviyuuvks],
.ob-book-table td:last-child[b-7cviyuuvks] {
    text-align: right;
}

.ob-book-table td[b-7cviyuuvks] {
    padding: 5px 8px;
    font-family: var(--pm-font-mono);
    font-weight: 600;
}

.ob-book-aux[b-7cviyuuvks] {
    color: var(--pm-ink-faint);
    font-weight: 400;
    font-family: var(--pm-font-body);
    margin-left: 4px;
}

.ob-book-table td.is-pos[b-7cviyuuvks] { color: var(--pm-pos); }
.ob-book-table td.is-neg[b-7cviyuuvks] { color: var(--pm-neg); }
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* =============================================================================
   NotFound / Error page chrome — restrained, on-brand fail states.
   ============================================================================= */

.status-page[b-2ermt9xdog] {
    max-width: 560px;
    margin: 80px auto 0;
    padding: 32px;
    text-align: center;
    font-family: var(--pm-font-body);
}

.status-page-code[b-2ermt9xdog] {
    display: inline-block;
    font-family: var(--pm-font-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--pm-accent) 40%, transparent);
    border-radius: var(--pm-radius);
    background: var(--pm-accent-ghost);
    color: var(--pm-accent-ink);
    margin-bottom: 26px;
}

.status-page-title[b-2ermt9xdog] {
    margin: 0 0 12px;
    font-family: var(--pm-font-display);
    font-size: 1.8rem;
    font-weight: 650;
    letter-spacing: -0.012em;
    color: var(--pm-ink);
    line-height: 1.1;
}

.status-page-text[b-2ermt9xdog] {
    margin: 0 0 32px;
    color: var(--pm-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.status-page-link[b-2ermt9xdog] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent-ink);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--pm-accent) 35%, transparent);
    border-radius: var(--pm-radius);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background-color 120ms ease;
}

.status-page-link:hover[b-2ermt9xdog] {
    background: color-mix(in srgb, var(--pm-accent) 24%, transparent);
}
/* /Components/Pages/Reports/Fills.razor.rz.scp.css */
/* Filter bar — three deliberate columns: From, To, Actions. The fluent date
   pickers inherit FluentUI chrome; the row gets a hairline frame so it reads
   as a tidy filter strip rather than free-floating inputs. */

.fills-filter-bar[b-ogt0n41fqk] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
}

.fills-filter-actions[b-ogt0n41fqk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

[b-ogt0n41fqk] .fills-date-input {
    min-width: 160px;
}

/* FluentDataGrid uses CSS grid sized by GridTemplateColumns. Without an
   outer overflow:auto wrapper, the page itself scrolls horizontally and the
   pager drifts off-screen. min-width: max-content on the grid plus this
   wrapper keeps the grid as wide as its columns demand and confines the
   horizontal scroll to the table area. */
.fills-grid-scroll[b-ogt0n41fqk] {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
}

/* Refine FluentDataGrid's chrome: tighter header band, hairline row
   separation, hover state, mono numerals on right-aligned cells. */
[b-ogt0n41fqk] .fluent-data-grid {
    font-family: var(--pm-font-body);
    font-size: 0.8rem;
    font-feature-settings: "tnum";
}

[b-ogt0n41fqk] .fluent-data-grid .col-header {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pm-ink-faint);
    padding-block: 10px;
    border-bottom: 1px solid var(--pm-hairline);
    background: var(--pm-surface-tint);
}

[b-ogt0n41fqk] .fluent-data-grid [role="row"] {
    border-bottom: 1px solid var(--pm-hairline-soft);
}

[b-ogt0n41fqk] .fluent-data-grid [role="row"]:hover {
    background: var(--pm-surface-tint);
}

[b-ogt0n41fqk] .fluent-data-grid [role="cell"] {
    padding-block: 7px;
}

/* Right-aligned numeric cells get tabular mono via column alignment + this. */
[b-ogt0n41fqk] .fluent-data-grid [role="cell"][align="end"],
[b-ogt0n41fqk] .fluent-data-grid [role="columnheader"][align="end"] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Reports/HistoricalData.razor.rz.scp.css */
/* =============================================================================
   Historical Data report — filter panel, fixture picker, collapsible market
   activity sections, plus the focused activity modal.
   ============================================================================= */

/* --- filter panel ---------------------------------------------------- */

.hd-filters[b-ob5fh0xc46] {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    padding: 14px 16px;
    margin-bottom: 18px;
}

.hd-row[b-ob5fh0xc46] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.hd-row:last-child[b-ob5fh0xc46] {
    margin-bottom: 0;
}

.hd-row-label[b-ob5fh0xc46] {
    font-family: var(--pm-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    width: 56px;
    flex-shrink: 0;
}

[b-ob5fh0xc46] .hd-date-input {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    color: var(--pm-ink);
    padding: 7px 11px;
    font-size: 0.85rem;
    font-family: var(--pm-font-body);
    font-variant-numeric: tabular-nums;
    color-scheme: dark light;
    transition: border-color 120ms ease;
}

[b-ob5fh0xc46] .hd-date-input:focus,
[b-ob5fh0xc46] .hd-date-input:hover {
    border-color: var(--pm-hairline-bold);
}

[b-ob5fh0xc46] .hd-search-input {
    flex: 1;
    min-width: 280px;
}

/* --- fixture list ---------------------------------------------------- */

.hd-fixture-list[b-ob5fh0xc46] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    margin-top: 4px;
    background: var(--pm-surface);
}

.hd-fixture-row[b-ob5fh0xc46] {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 9px 14px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--pm-hairline-soft);
    color: var(--pm-ink);
    text-align: left;
    cursor: pointer;
    font-family: var(--pm-font-body);
    font-size: 0.86rem;
    transition: background-color 80ms ease;
}

.hd-fixture-row:last-child[b-ob5fh0xc46] {
    border-bottom: none;
}

.hd-fixture-row:hover[b-ob5fh0xc46] {
    background: var(--pm-surface-tint);
}

.hd-fixture-time[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--pm-ink-soft);
}

.hd-fixture-name[b-ob5fh0xc46] {
    font-family: var(--pm-font-display);
    font-weight: 600;
    color: var(--pm-ink);
}

.hd-fixture-meta[b-ob5fh0xc46] {
    font-size: 0.74rem;
    color: var(--pm-ink-faint);
}

.hd-fixture-empty[b-ob5fh0xc46] {
    padding: 24px;
    text-align: center;
    color: var(--pm-ink-faint);
    font-style: italic;
}

.hd-selected-fixture[b-ob5fh0xc46] {
    font-family: var(--pm-font-display);
    font-weight: 600;
    color: var(--pm-ink);
    flex: 1;
}

/* --- selected fixture info bar -------------------------------------- */

.hd-fixture-info[b-ob5fh0xc46] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-left: 3px solid var(--pm-accent);
    border-radius: var(--pm-radius);
    padding: 12px 16px;
    margin-bottom: 14px;
}

.hd-fixture-title[b-ob5fh0xc46] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    color: var(--pm-ink);
}

.hd-fixture-date[b-ob5fh0xc46] {
    color: var(--pm-ink-soft);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.hd-fixture-score[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: 3px 10px;
    background: var(--pm-accent-soft);
    color: var(--pm-accent-ink);
    border-radius: 4px;
    font-size: 0.8rem;
}

/* --- collapsible market-type sections ------------------------------- */

.hd-section[b-ob5fh0xc46] {
    margin-bottom: 8px;
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    overflow: hidden;
    transition: border-color 120ms ease;
    background: var(--pm-surface);
}

.hd-section.hd-section-open[b-ob5fh0xc46] {
    border-color: var(--pm-hairline-bold);
}

.hd-section-header[b-ob5fh0xc46] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: var(--pm-surface);
    border: 0;
    color: var(--pm-ink);
    cursor: pointer;
    font-family: var(--pm-font-body);
    font-size: 0.9rem;
    text-align: left;
    transition: background-color 100ms ease;
}

.hd-section-header:hover[b-ob5fh0xc46] {
    background: var(--pm-surface-tint);
}

.hd-section-open .hd-section-header[b-ob5fh0xc46] {
    background: var(--pm-surface-tint);
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.hd-section-chevron[b-ob5fh0xc46] {
    width: 14px;
    text-align: center;
    color: var(--pm-ink-faint);
    font-size: 0.72rem;
    transition: color 100ms ease;
}

.hd-section-open .hd-section-chevron[b-ob5fh0xc46] {
    color: var(--pm-accent-ink);
}

.hd-section-title[b-ob5fh0xc46] {
    font-family: var(--pm-font-display);
    font-weight: 650;
    flex: 1;
    color: var(--pm-ink);
    letter-spacing: -0.005em;
}

.hd-section-meta[b-ob5fh0xc46] {
    font-size: 0.74rem;
    color: var(--pm-ink-faint);
    font-variant-numeric: tabular-nums;
}

.hd-section-table[b-ob5fh0xc46] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    font-feature-settings: "tnum";
}

.hd-section-table th[b-ob5fh0xc46],
.hd-section-table td[b-ob5fh0xc46] {
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.hd-section-table th[b-ob5fh0xc46] {
    background: var(--pm-surface);
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    border-bottom-color: var(--pm-hairline);
}

.hd-section-table th.num[b-ob5fh0xc46],
.hd-section-table td.num[b-ob5fh0xc46] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hd-section-table th.hd-orders-col[b-ob5fh0xc46],
.hd-section-table td.hd-orders-col[b-ob5fh0xc46] {
    width: 180px;
    white-space: nowrap;
}

.hd-section-table tbody tr:last-child td[b-ob5fh0xc46] {
    border-bottom: none;
}

.hd-section-table tbody tr:hover td[b-ob5fh0xc46] {
    background: var(--pm-surface-tint);
}

.hd-fills-hint[b-ob5fh0xc46] {
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--pm-ink-faint);
    font-weight: 400;
}

.hd-row-name[b-ob5fh0xc46] {
    font-weight: 500;
    color: var(--pm-ink);
    margin-right: 6px;
}

.hd-row-ticker[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-size: 0.72rem;
    color: var(--pm-ink-faint);
    padding: 2px 6px;
    background: var(--pm-surface-tint);
    border: 1px solid var(--pm-hairline);
    border-radius: 4px;
    margin-left: 6px;
}

/* --- clickable count link ------------------------------------------- */

.hd-count-link[b-ob5fh0xc46] {
    background: none;
    border: 0;
    color: var(--pm-accent-ink);
    cursor: pointer;
    font-family: var(--pm-font-mono);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 2px 8px;
    line-height: 1.4;
    border-radius: 4px;
    transition: background-color 100ms ease;
}

.hd-count-link:hover[b-ob5fh0xc46] {
    background: var(--pm-accent-soft);
}

.hd-count-zero[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-weight: 500;
    font-size: 0.88rem;
    padding: 2px 8px;
    color: var(--pm-ink-faint);
}

/* --- expand chevron + amendments subtable --------------------------- */

.hd-expand-col[b-ob5fh0xc46] {
    width: 24px;
    padding: 0 4px;
    text-align: center;
}

.hd-expand-toggle[b-ob5fh0xc46] {
    background: none;
    border: 0;
    color: var(--pm-ink-faint);
    cursor: pointer;
    font-size: 0.65rem;
    line-height: 1;
    padding: 4px;
    transition: transform 0.14s ease, color 0.14s ease;
    display: inline-block;
}

.hd-expand-toggle:hover[b-ob5fh0xc46] {
    color: var(--pm-ink);
}

.hd-expand-toggle-open[b-ob5fh0xc46] {
    transform: rotate(90deg);
    color: var(--pm-accent-ink);
}

.hd-detail-label[b-ob5fh0xc46] {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink-faint);
    margin: 12px 0 6px;
}

.hd-amendments-row > td[b-ob5fh0xc46] {
    padding-left: 72px !important;
    background: var(--pm-surface-deep);
}

.hd-amendments-table[b-ob5fh0xc46] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-bottom: 8px;
}

.hd-amendments-table th[b-ob5fh0xc46],
.hd-amendments-table td[b-ob5fh0xc46] {
    padding: 6px 9px;
    text-align: left;
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.hd-amendments-table th[b-ob5fh0xc46] {
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
}

.hd-amendments-table th.num[b-ob5fh0xc46],
.hd-amendments-table td.num[b-ob5fh0xc46] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--pm-font-mono);
}

.hd-amendments-table th.cents-col[b-ob5fh0xc46],
.hd-amendments-table td.cents-col[b-ob5fh0xc46] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.hd-amendments-table tbody tr:last-child td[b-ob5fh0xc46] {
    border-bottom: none;
}

/* =============================================================================
   Activity modal — wide, scrollable, hairline-segmented like the rest.
   ============================================================================= */

.hd-modal-overlay[b-ob5fh0xc46] {
    position: fixed;
    inset: 0;
    background: rgba(7, 10, 16, 0.55);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: hd-overlay-fade-b-ob5fh0xc46 160ms ease-out;
}

@keyframes hd-overlay-fade-b-ob5fh0xc46 { from { opacity: 0; } to { opacity: 1; } }

.hd-modal-panel[b-ob5fh0xc46] {
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-pop);
    max-width: 1500px;
    width: 96vw;
    max-height: 88vh;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--pm-font-body);
    animation: hd-panel-rise-b-ob5fh0xc46 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes hd-panel-rise-b-ob5fh0xc46 {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.hd-modal-header[b-ob5fh0xc46] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--pm-hairline);
    flex-shrink: 0;
}

.hd-modal-title-stack[b-ob5fh0xc46] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.hd-modal-title-row[b-ob5fh0xc46] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.hd-modal-clock[b-ob5fh0xc46],
.hd-modal-score[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-size: 0.82rem;
    color: var(--pm-ink-soft);
    font-variant-numeric: tabular-nums;
}

.hd-modal-subtitle[b-ob5fh0xc46] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    margin-top: 4px;
}

.hd-modal-ticker[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-size: 0.7rem;
    color: var(--pm-ink-soft);
    padding: 2px 7px;
    background: var(--pm-surface-tint);
    border: 1px solid var(--pm-hairline);
    border-radius: 4px;
}

.hd-modal-close[b-ob5fh0xc46] {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--pm-ink);
    opacity: 0.5;
    padding: 6px 8px;
    border-radius: var(--pm-radius);
    flex-shrink: 0;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.hd-modal-close:hover[b-ob5fh0xc46] {
    opacity: 1;
    background: var(--pm-surface-tint);
    border-color: var(--pm-hairline);
}

.hd-modal-content[b-ob5fh0xc46] {
    overflow: auto;
    max-height: calc(88vh - 200px);
    padding: 18px 26px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hd-modal-empty[b-ob5fh0xc46] {
    padding: 32px;
    text-align: center;
    color: var(--pm-ink-faint);
    font-style: italic;
}

/* --- modal section title row ---------------------------------------- */

.hd-modal-section-title[b-ob5fh0xc46] {
    margin: 0;
    font-family: var(--pm-font-display);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-ink-faint);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hd-modal-section-title-row[b-ob5fh0xc46] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pm-hairline-soft);
    margin-bottom: 4px;
}

.hd-modal-table[b-ob5fh0xc46] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-feature-settings: "tnum";
}

.hd-modal-table th[b-ob5fh0xc46],
.hd-modal-table td[b-ob5fh0xc46] {
    padding: 7px 11px;
    text-align: left;
    border-bottom: 1px solid var(--pm-hairline-soft);
    white-space: nowrap;
}

.hd-modal-table th[b-ob5fh0xc46] {
    background: var(--pm-surface);
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pm-ink-faint);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom-color: var(--pm-hairline);
}

.hd-modal-table th.num[b-ob5fh0xc46],
.hd-modal-table td.num[b-ob5fh0xc46] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.hd-modal-table th.cents-col[b-ob5fh0xc46],
.hd-modal-table td.cents-col[b-ob5fh0xc46] {
    text-align: center;
    font-variant-numeric: tabular-nums;
    width: 78px;
}

.hd-modal-table tbody tr:hover td[b-ob5fh0xc46] {
    background: var(--pm-surface-tint);
}

.hd-modal-table tbody tr:last-child td[b-ob5fh0xc46] {
    border-bottom: none;
}

.hd-modal-table .hd-order-id[b-ob5fh0xc46],
.hd-modal-table .hd-trade-id[b-ob5fh0xc46] {
    font-family: var(--pm-font-mono);
    font-size: 0.74rem;
    color: var(--pm-ink-soft);
}

.hd-modal-table .hd-consensus[b-ob5fh0xc46] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pm-ink-soft);
}

/* --- event / side / action chips ----------------------------------- */

.hd-event-badge[b-ob5fh0xc46],
.hd-fill-side[b-ob5fh0xc46],
.hd-fill-action[b-ob5fh0xc46] {
    display: inline-block;
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.2;
}

.hd-event-placed[b-ob5fh0xc46]   { background: var(--pm-pos-soft);  color: var(--pm-pos); }
.hd-event-amended[b-ob5fh0xc46]  { background: var(--pm-warn-soft); color: var(--pm-warn); }

.hd-fill-side-yes[b-ob5fh0xc46] {
    background: color-mix(in srgb, #3b82f6 16%, transparent);
    color: #3b82f6;
}

.hd-fill-side-no[b-ob5fh0xc46]   { background: var(--pm-neg-soft); color: var(--pm-neg); }
.hd-fill-action-buy[b-ob5fh0xc46]  { background: var(--pm-pos-soft); color: var(--pm-pos); }
.hd-fill-action-sell[b-ob5fh0xc46] { background: var(--pm-neg-soft); color: var(--pm-neg); }

@media (prefers-color-scheme: dark) {
    .hd-fill-side-yes[b-ob5fh0xc46] {
        background: rgba(96, 165, 250, 0.22);
        color: #60a5fa;
    }
}
/* /Components/Pages/Reports/OddsHistory.razor.rz.scp.css */
/* =============================================================================
   Odds History — date + fixture picker, secondary filter row, scrolling grid.
   ============================================================================= */

.oddshistory-filter-bar[b-evflalwa3x] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
}

.oddshistory-filter-spinner[b-evflalwa3x] {
    margin-left: auto;
    align-self: center;
}

[b-evflalwa3x] .oddshistory-date-input {
    width: 200px;
}

.oddshistory-row-count[b-evflalwa3x] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--pm-ink-faint);
    font-variant-numeric: tabular-nums;
    align-self: flex-end;
    padding-bottom: 4px;
}

.oddshistory-row-count-num[b-evflalwa3x] {
    font-family: var(--pm-font-mono);
    font-weight: 600;
    color: var(--pm-ink);
}

.oddshistory-grid-scroll[b-evflalwa3x] {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
}

/* Refine FluentDataGrid chrome (matches the Fills report). */
[b-evflalwa3x] .fluent-data-grid {
    font-family: var(--pm-font-body);
    font-size: 0.8rem;
    font-feature-settings: "tnum";
}

[b-evflalwa3x] .fluent-data-grid .col-header {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pm-ink-faint);
    padding-block: 10px;
    border-bottom: 1px solid var(--pm-hairline);
    background: var(--pm-surface-tint);
}

[b-evflalwa3x] .fluent-data-grid [role="row"] {
    border-bottom: 1px solid var(--pm-hairline-soft);
}

[b-evflalwa3x] .fluent-data-grid [role="row"]:hover {
    background: var(--pm-surface-tint);
}

[b-evflalwa3x] .fluent-data-grid [role="cell"] {
    padding-block: 7px;
}

[b-evflalwa3x] .fluent-data-grid [role="cell"][align="end"],
[b-evflalwa3x] .fluent-data-grid [role="columnheader"][align="end"] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Reports/ProfitLoss.razor.rz.scp.css */
/* =============================================================================
   Profit & Loss report — hierarchical collapsibles: day → fixture → market
   type → market → order → fills. Each level reuses the same section chrome
   (hairline frame, header button, expanded body) for visual consistency.
   ============================================================================= */

/* --- filter bar (same pattern as Fills) -------------------------------- */

.pnl-filter-bar[b-bgz7r4huoi] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
}

.pnl-filter-actions[b-bgz7r4huoi] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

[b-bgz7r4huoi] .pnl-date-input {
    min-width: 170px;
}

/* --- summary card row ------------------------------------------------- */

.pnl-summary[b-bgz7r4huoi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

.pnl-summary-card[b-bgz7r4huoi] {
    padding: 14px 18px 16px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    transition: border-color 120ms ease, transform 140ms ease;
}

.pnl-summary-card:hover[b-bgz7r4huoi] {
    border-color: var(--pm-hairline-bold);
}

.pnl-summary-label[b-bgz7r4huoi] {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    margin-bottom: 6px;
}

.pnl-summary-value[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    color: var(--pm-ink);
    line-height: 1.1;
}

.pnl-summary-value.pnl-positive[b-bgz7r4huoi] { color: var(--pm-pos); }
.pnl-summary-value.pnl-negative[b-bgz7r4huoi] { color: var(--pm-neg); }

/* --- generic collapsible section -------------------------------------- */

.pnl-section[b-bgz7r4huoi] {
    margin-bottom: 8px;
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    overflow: hidden;
    transition: border-color 120ms ease;
}

.pnl-section.pnl-section-open[b-bgz7r4huoi] {
    border-color: var(--pm-hairline-bold);
}

.pnl-section-header[b-bgz7r4huoi] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--pm-font-body);
    color: var(--pm-ink);
    font-size: 0.9rem;
    transition: background-color 100ms ease;
}

.pnl-section-header:hover[b-bgz7r4huoi] {
    background: var(--pm-surface-tint);
}

.pnl-section-open > .pnl-section-header[b-bgz7r4huoi] {
    border-bottom: 1px solid var(--pm-hairline-soft);
    background: var(--pm-surface-tint);
}

.pnl-chevron[b-bgz7r4huoi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    text-align: center;
    color: var(--pm-ink-faint);
    font-size: 0.7rem;
    transition: color 100ms ease;
}

.pnl-section-open .pnl-chevron[b-bgz7r4huoi] {
    color: var(--pm-accent-ink);
}

.pnl-section-spacer[b-bgz7r4huoi] { flex: 1; }

.pnl-section-meta[b-bgz7r4huoi] {
    font-size: 0.74rem;
    color: var(--pm-ink-faint);
    font-variant-numeric: tabular-nums;
}

.pnl-section-pnl[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 100px;
    text-align: right;
    font-size: 0.9rem;
}

/* --- day level (outermost) -------------------------------------------- */

.pnl-day[b-bgz7r4huoi] {
    background: var(--pm-surface);
}

.pnl-day-title[b-bgz7r4huoi] {
    font-family: var(--pm-font-display);
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -0.005em;
    color: var(--pm-ink);
}

.pnl-day-body[b-bgz7r4huoi] {
    padding: 10px 16px 14px;
    background: var(--pm-surface-deep);
}

/* --- fixture level ---------------------------------------------------- */

.pnl-fixture[b-bgz7r4huoi] {
    background: var(--pm-surface);
}

.pnl-fixture-title[b-bgz7r4huoi] {
    font-family: var(--pm-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.003em;
    color: var(--pm-ink);
}

.pnl-fixture-time[b-bgz7r4huoi],
.pnl-fixture-score[b-bgz7r4huoi] {
    font-size: 0.75rem;
    color: var(--pm-ink-faint);
    font-variant-numeric: tabular-nums;
}

.pnl-fixture-body[b-bgz7r4huoi] {
    padding: 10px 16px 14px;
    background: var(--pm-surface);
}

/* --- market-type level ------------------------------------------------ */

.pnl-market-type[b-bgz7r4huoi] {
    margin-top: 8px;
}

.pnl-market-type-title[b-bgz7r4huoi] {
    font-family: var(--pm-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    color: var(--pm-ink);
}

/* --- markets table inside a market type ------------------------------ */

.pnl-market-table[b-bgz7r4huoi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-feature-settings: "tnum";
}

.pnl-market-table th[b-bgz7r4huoi],
.pnl-market-table td[b-bgz7r4huoi] {
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.pnl-market-table th[b-bgz7r4huoi] {
    font-family: var(--pm-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
    background: var(--pm-surface-tint);
    border-bottom-color: var(--pm-hairline);
}

.pnl-market-table th.num[b-bgz7r4huoi],
.pnl-market-table td.num[b-bgz7r4huoi] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--pm-font-mono);
}

.pnl-market-row td[b-bgz7r4huoi] {
    transition: background-color 80ms ease;
}

.pnl-market-row:hover td[b-bgz7r4huoi] {
    background: var(--pm-surface-tint);
}

.pnl-market-row-open td[b-bgz7r4huoi] {
    background: var(--pm-surface-tint);
}

.pnl-expand-col[b-bgz7r4huoi] {
    width: 24px;
    padding: 0 4px;
    text-align: center;
}

.pnl-expand-toggle[b-bgz7r4huoi] {
    background: none;
    border: 0;
    color: var(--pm-ink-faint);
    cursor: pointer;
    font-size: 0.65rem;
    line-height: 1;
    padding: 4px;
    transition: transform 0.14s ease, color 0.14s ease;
    display: inline-block;
}

.pnl-expand-toggle:hover[b-bgz7r4huoi] {
    color: var(--pm-ink);
}

.pnl-expand-toggle-open[b-bgz7r4huoi] {
    transform: rotate(90deg);
    color: var(--pm-accent-ink);
}

.pnl-market-name[b-bgz7r4huoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pm-ink);
}

.pnl-ticker[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-size: 0.72rem;
    color: var(--pm-ink-faint);
    padding: 2px 6px;
    background: var(--pm-surface-tint);
    border: 1px solid var(--pm-hairline);
    border-radius: 4px;
}

.pnl-unsettled-badge[b-bgz7r4huoi] {
    display: inline-block;
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--pm-warn-soft);
    color: var(--pm-warn);
}

/* --- orders sub-row inside an expanded market row -------------------- */

.pnl-orders-row > td[b-bgz7r4huoi] {
    padding: 12px 24px 14px 56px !important;
    background: var(--pm-surface-deep);
}

.pnl-orders-container[b-bgz7r4huoi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pnl-empty[b-bgz7r4huoi] {
    font-size: 0.85rem;
    color: var(--pm-ink-faint);
    font-style: italic;
}

.pnl-order[b-bgz7r4huoi] {
    border: 1px solid var(--pm-hairline-soft);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    overflow: hidden;
    transition: border-color 120ms ease;
}

.pnl-order:hover[b-bgz7r4huoi] {
    border-color: var(--pm-hairline);
}

.pnl-order-header[b-bgz7r4huoi] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--pm-font-body);
    color: var(--pm-ink);
    font-size: 0.82rem;
    transition: background-color 80ms ease;
}

.pnl-order-header:hover[b-bgz7r4huoi] {
    background: var(--pm-surface-tint);
}

.pnl-order-open .pnl-order-header[b-bgz7r4huoi] {
    border-bottom: 1px solid var(--pm-hairline-soft);
    background: var(--pm-surface-tint);
}

.pnl-order-time[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--pm-ink-soft);
    min-width: 84px;
}

.pnl-order-detail[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--pm-ink);
}

.pnl-order-meta[b-bgz7r4huoi] {
    font-size: 0.72rem;
    color: var(--pm-ink-faint);
}

.pnl-order-id[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-size: 0.72rem;
    color: var(--pm-ink-faint);
}

.pnl-fills-container[b-bgz7r4huoi] {
    padding: 10px 14px 14px;
    background: var(--pm-surface);
}

.pnl-fills-table[b-bgz7r4huoi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.pnl-fills-table th[b-bgz7r4huoi],
.pnl-fills-table td[b-bgz7r4huoi] {
    padding: 6px 9px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--pm-hairline-soft);
}

.pnl-fills-table th[b-bgz7r4huoi] {
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pm-ink-faint);
}

.pnl-fills-table th.num[b-bgz7r4huoi],
.pnl-fills-table td.num[b-bgz7r4huoi] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--pm-font-mono);
}

.pnl-fills-table tr:last-child td[b-bgz7r4huoi] {
    border-bottom: none;
}

.pnl-trade-id[b-bgz7r4huoi] {
    font-family: var(--pm-font-mono);
    font-size: 0.7rem;
    color: var(--pm-ink-faint);
}

/* --- side / action chips --------------------------------------------- */

.pnl-fill-side[b-bgz7r4huoi],
.pnl-fill-action[b-bgz7r4huoi] {
    display: inline-block;
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.2;
}

.pnl-fill-side-yes[b-bgz7r4huoi] {
    background: color-mix(in srgb, #3b82f6 16%, transparent);
    color: #3b82f6;
}

.pnl-fill-side-no[b-bgz7r4huoi] {
    background: var(--pm-neg-soft);
    color: var(--pm-neg);
}

.pnl-fill-action-buy[b-bgz7r4huoi] {
    background: var(--pm-pos-soft);
    color: var(--pm-pos);
}

.pnl-fill-action-sell[b-bgz7r4huoi] {
    background: var(--pm-warn-soft);
    color: var(--pm-warn);
}

@media (prefers-color-scheme: dark) {
    .pnl-fill-side-yes[b-bgz7r4huoi] {
        background: rgba(96, 165, 250, 0.22);
        color: #60a5fa;
    }
}

/* --- P&L coloring (used at every aggregation level) ------------------ */

.pnl-positive[b-bgz7r4huoi] { color: var(--pm-pos); }
.pnl-negative[b-bgz7r4huoi] { color: var(--pm-neg); }
/* /Components/Shared/LiveGameStateBaseball.razor.rz.scp.css */
.live-game-state[b-1hy3lsapj1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: middle;
}

.lgs-inning[b-1hy3lsapj1] {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent-foreground-rest);
}

.lgs-diamond[b-1hy3lsapj1] {
    display: block;
    flex-shrink: 0;
}

.lgs-base[b-1hy3lsapj1] {
    /* --accent-stroke-control-rest is a linear-gradient in FluentUI, which SVG's
       stroke property rejects (silently resolves to none → invisible outline).
       Use the same green as the ball dots for both the stroke and the fill so
       empty bases render as a visible green outline and occupied bases as
       solid green. */
    stroke: #16a34a;  /* green-600 — matches .lgs-count-balls */
    stroke-width: 1.25;
}

.lgs-base-off[b-1hy3lsapj1] {
    fill: transparent;
}

.lgs-base-on[b-1hy3lsapj1] {
    fill: #16a34a;
}

.lgs-count[b-1hy3lsapj1] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    font-variant-numeric: tabular-nums;
}

.lgs-count-row[b-1hy3lsapj1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.lgs-count-label[b-1hy3lsapj1] {
    font-weight: 700;
    font-size: 0.65rem;
    opacity: 0.6;
    width: 9px;
    text-align: center;
    /* Keep labels neutral even though the row sets a green/red color for the
       dots — labels inherit from outside the row instead. */
    color: var(--neutral-foreground-rest, inherit);
}

.lgs-dot[b-1hy3lsapj1] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    box-sizing: border-box;
    /* Per-row color comes from .lgs-count-balls / -strikes / -outs below — the
       dot inherits via currentColor for both border and background. Avoid the
       gradient-valued FluentUI stroke variables; they break inside SVG and
       look fine but inconsistent here. */
    border: 1px solid currentColor;
    background: transparent;
}

.lgs-dot-on[b-1hy3lsapj1] {
    background: currentColor;
}

/* Kalshi-style color convention: balls = green, strikes/outs = red. */
.lgs-count-balls[b-1hy3lsapj1] {
    color: #16a34a;  /* green-600 */
}

.lgs-count-strikes[b-1hy3lsapj1],
.lgs-count-outs[b-1hy3lsapj1] {
    color: #dc2626;  /* red-600 */
}
/* /Components/Shared/LiveGameStateTennis.razor.rz.scp.css */
/* Tennis live-state widget — sized + colored to sit alongside the baseball
   widget in the FixtureCard meta row. Aims for visual rhyme: same set marker
   styling as baseball's inning marker, same accent for the current game-score
   column (last column), and a small green dot for the server indicator. */

.live-game-state.lgs-tennis[b-57nqcvra94] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: middle;
}

.lgs-set[b-57nqcvra94] {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent-foreground-rest);
}

.lgs-sets[b-57nqcvra94] {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lgs-sets td[b-57nqcvra94] {
    padding: 2px 5px;
    text-align: center;
    min-width: 14px;
}

.lgs-row-away td[b-57nqcvra94],
.lgs-row-home td[b-57nqcvra94] {
    border-bottom: 1px solid transparent;
}

/* Subtle separator between the two player rows so the eye can track each side. */
.lgs-row-away td[b-57nqcvra94] {
    border-bottom-color: var(--neutral-stroke-rest, rgba(255, 255, 255, 0.1));
}

.lgs-set-cell[b-57nqcvra94] {
    color: var(--neutral-foreground-rest, inherit);
    opacity: 0.85;
}

/* Current game point score gets the accent treatment — it's the "live" number
   that changes the fastest, equivalent to the count dots on baseball. */
.lgs-game-cell[b-57nqcvra94] {
    font-weight: 700;
    color: var(--accent-foreground-rest);
    border-left: 1px solid var(--neutral-stroke-rest, rgba(255, 255, 255, 0.15));
    padding-left: 7px;
}

.lgs-server-cell[b-57nqcvra94] {
    width: 10px;
    padding-left: 0;
    padding-right: 4px;
}

/* Reuse the same green as the baseball balls dots for visual consistency
   across the two sport widgets — they sit side-by-side in the meta row. */
.lgs-server-dot[b-57nqcvra94] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a; /* green-600 */
}
/* /Components/Shared/ReloadingModal.razor.rz.scp.css */
/* =============================================================================
   ReloadingModal — overlay shown while the agent re-fetches its odds snapshot.
   Non-blocking visual: the underlying page stays interactive (pointer-events
   on the overlay is none) while a card in the centre signals what's happening.
   ============================================================================= */

.rl-overlay[b-lwa1t96vva] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rl-fade-b-lwa1t96vva 160ms ease-out;
}

@keyframes rl-fade-b-lwa1t96vva {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rl-card[b-lwa1t96vva] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 26px;
    background: var(--pm-surface);
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-pop);
    font-family: var(--pm-font-body);
    animation: rl-rise-b-lwa1t96vva 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rl-rise-b-lwa1t96vva {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

[b-lwa1t96vva] .rl-ring {
    width: 28px;
    height: 28px;
}

.rl-stack[b-lwa1t96vva] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rl-eyebrow[b-lwa1t96vva] {
    font-family: var(--pm-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pm-accent-ink);
    line-height: 1;
}

.rl-title[b-lwa1t96vva] {
    font-family: var(--pm-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pm-ink);
    line-height: 1.2;
}