/*
   themeVariables.css - dark mode PoC palette tokens.
   Light values are extracted from current homepage rules in
   newhomePageStyle.css and CustomMP.css so light mode is visually unchanged.
   Loaded ahead of every other stylesheet via a direct <link> in each layout.
*/

:root {
    /* Surfaces */
    --mp-bg: #ffffff;
    --mp-surface: #ffffff;
    --mp-surface-alt: #f8f8f8;
    /* Text */
    --mp-text: #111111;
    --mp-text-muted: #565656;
    --mp-text-inverse: #ffffff;
    /* Lines, shadows, borders */
    --mp-border: rgba(0, 0, 0, 0.10);
    --mp-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --mp-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.08);
    /* Brand teal (from .featured-left, .button-grid a, nav a) */
    --mp-accent: #007d84;
    --mp-accent-soft: #e0f8f4;
    --mp-accent-contrast: #ffffff;
    /* Stock/option change colors (from CustomMP.css .num_pos/.num_neg) */
    --mp-pos: #006E00;
    --mp-neg: #e60000;
    --mp-na: inherit;
    /*
       Categorical accents used by Homepage Preview v2 alert-category tags.
       Amber = volatility-sell / warning; purple = long-shot / lottery /
       swing-tenor accent. Light-mode values are darker so they stay
       readable on a white surface; dark-mode values match the mockup
       (brighter/more saturated for contrast on dark).
    */
    --mp-warn: #b46a12;
    --mp-highlight: #6b4fa8;
    /* Homepage-specific tokens */
    --mp-pill-bg: #f2f2f2; /* .-top span background on featured pill */
    /*
       Table surface vars are deliberately UNDEFINED in :root (light mode).
       Every rule that consumes them uses var(--mp-table-X, <original-value>)
       so the per-rule fallback reproduces the existing hard-coded color in
       light mode. The vars are only set in [data-theme="dark"] below, so
       dark mode flips while light remains byte-for-byte identical.

       Vars consumed: --mp-table-bg, --mp-table-bg-alt, --mp-table-row-hover,
       --mp-table-header-bg, --mp-table-header-text, --mp-table-text,
       --mp-table-border.
    */
    /* Chart-relevant tokens consumed by window.MPTheme.chartColors */
    --mp-chart-bg: #ffffff;
    --mp-chart-grid: #e0e0e0;
    --mp-chart-text: #333333;
    --mp-chart-axis: #666666;
    --mp-chart-series-1: #007d84;
    --mp-chart-series-2: #1F3A47;
    --mp-chart-series-3: #006E00;
    --mp-chart-series-4: #e60000;
    --mp-chart-series-5: #c14e0b;
}

[data-theme="dark"] {
    /*
       Readability tune (Homepage Preview v2 feedback):
       - Pure/near-white text on very dark backgrounds causes "halation"
         (text appears to glow and read as blurry). Softened primary text
         to a low-contrast off-white and muted text to medium gray.
       - Lifted the page/surface backgrounds slightly so no surface reads
         as pure black. Kept the navy family so brand cohesion stays.
       - Desaturated the bright teal accent ~10-15% so it no longer
         glares against the darker surface.
       Light-mode values (in :root above) are intentionally UNCHANGED.
       All contrast ratios verified >= 4.5:1 for normal text.
    */
    /* Surfaces (lifted from #0b1220 / #1a2733 / #22313f) */
    --mp-bg: #141a24;
    --mp-surface: #1e2733;
    --mp-surface-alt: #263341;
    /* Page background for layouts that write it as an INLINE style on <body> (_PlainLayout: login, register,
       subscription pages). They emit var(--mp-page-bg, <their light color>), so this is the ONLY way to repaint
       them - an inline style outranks any rule here. Undefined in :root, so light mode keeps its own color. */
    --mp-page-bg: #141a24;
    /* Text (softened from #e6eef7 / #9fb3c8) */
    --mp-text: #e4e4e4;
    --mp-text-muted: #b0b0b0;
    --mp-text-inverse: #141a24;
    /* Lines, shadows, borders */
    --mp-border: rgba(255, 255, 255, 0.14);
    --mp-shadow: 0 6px 20px rgba(0, 0, 0, 0.40);
    --mp-shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.25);
    /* Brand teal for dark - desaturated from #3ab9c0 to reduce glare
       while keeping contrast > 4.5:1 against the lifted --mp-bg. */
    --mp-accent: #4db3b9;
    --mp-accent-soft: #143b41;
    --mp-accent-contrast: #141a24;
    /* Change colors shifted for contrast on dark */
    --mp-pos: #4caf50;
    --mp-neg: #ff5252;
    --mp-na: inherit;
    /* Categorical accents (see :root comment). Dark-mode values match
       the Homepage Preview v2 mockup. */
    --mp-warn: #e0a03a;
    --mp-highlight: #a99ae0;
    /* Homepage-specific tokens */
    --mp-pill-bg: #22313f;
    /*
       Table surface scale for dark mode. Layered from darkest (header) to
       lightest (hover) so zebra/hover stand off the base by one step each:
         header < base < bg-alt (zebra) < row-hover
       Light mode is unaffected: these vars are unset in :root, so the
       fallback inside each rule (e.g. var(--mp-table-bg, white)) wins.
    */
    --mp-table-bg: #1a2733;
    --mp-table-bg-alt: #22313f;
    --mp-table-row-hover: #2c3b4d;
    --mp-table-header-bg: #0c1b22;
    --mp-table-header-text: #e6eef7;
    --mp-table-text: #e6eef7;
    --mp-table-border: rgba(255, 255, 255, 0.14);
    /* Chart tokens */
    --mp-chart-bg: #1a2733;
    --mp-chart-grid: #2c3e4e;
    --mp-chart-text: #e6eef7;
    --mp-chart-axis: #9fb3c8;
    --mp-chart-series-1: #3ab9c0;
    --mp-chart-series-2: #9fb3c8;
    --mp-chart-series-3: #4caf50;
    --mp-chart-series-4: #ff5252;
    --mp-chart-series-5: #ffa257;
}

/* Smooth background/colour transitions when toggling without a reload. */
html[data-theme] body,
html[data-theme] .main-container,
html[data-theme] .main-content,
html[data-theme] .hp_sidebar,
html[data-theme] .s-card,
html[data-theme] .section {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/*
   Theme toggle bar — full-width thin bar above .main-container that hosts the
   toggle button right-aligned. Sits between the site header and the article
   grid so it's findable without restructuring the existing layout.
*/
.mp-theme-toggle-bar {
    display: flex;
    justify-content: flex-end;
    width: 94vw;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 1.5vw 0;
    box-sizing: border-box;
}

/*
   Toggle button. Matches .button-grid a aesthetic (white surface, teal accent,
   1px border, 8px rounded, subtle shadow) — just smaller and inline.
*/
.mp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--mp-surface);
    color: var(--mp-accent);
    border: 1px solid var(--mp-accent);
    border-radius: 8px;
    box-shadow: var(--mp-shadow-soft);
    font-family: 'Roboto', Tahoma, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .mp-theme-toggle:hover,
    .mp-theme-toggle:focus {
        background-color: var(--mp-accent);
        color: var(--mp-accent-contrast);
        outline: none;
    }

    .mp-theme-toggle .mp-theme-toggle-icon {
        font-size: 1rem;
    }

.mp-theme-toggle--mobile {
    /* same as base; modifier reserved for future mobile-only tweaks */
}

/*
   ============================================================
   Dark-mode overrides for homepage element rules.

   Light mode is intentionally byte-for-byte unchanged: we DO NOT migrate
   newhomePageStyle.css to var(). Instead, this block targets the same
   selectors with [data-theme="dark"] specificity so dark mode kicks in
   without disturbing the existing hard-coded light palette.

   If we later refactor newhomePageStyle.css to consume var(--mp-*),
   this entire override section can be deleted.
   ============================================================
*/

/* Page background (light mode is set by Site.css body { background: #fff }). */
[data-theme="dark"] body {
    background-color: var(--mp-bg);
    color: var(--mp-text);
}

/*
   Site.css:133 has #full-site-body { background-color: #f8f8f8 } — that's the
   absolutely-positioned wrapper covering the whole viewport below the 77px
   header, with .main-container etc. transparent over it. Without this override
   the page paints gray even with body flipped.
*/
[data-theme="dark"] #full-site-body {
    background-color: var(--mp-bg);
    color: var(--mp-text);
}

    /* Homepage h1 headline (Site.css:156 color #373737). */
    [data-theme="dark"] #full-site-body h1#full-site-heading {
        color: var(--mp-text);
    }

    /*
   Site.css:60 sets every heading to `color: #000` for the whole page body.
   That makes h1-h6 invisible against the dark page background.
*/
    [data-theme="dark"] #full-site-body h1,
    [data-theme="dark"] #full-site-body h2,
    [data-theme="dark"] #full-site-body h3,
    [data-theme="dark"] #full-site-body h4,
    [data-theme="dark"] #full-site-body h5,
    [data-theme="dark"] #full-site-body h6,
    [data-theme="dark"] .whatis_title {
        color: var(--mp-text);
    }

/*
   Learn pages - left navigation (Views/Learn/_LearnNavigation.cshtml, shared by every Learn page).
   LearnStyles.css:147 paints it #d9d9d9 with `lightblue` link dividers (LearnStyles.css:170) and a
   #a1a1a1 top border on narrow screens (LearnStyles.css:237). On the dark page the section headings
   (light via the #full-site-body h1-h6 rule above) disappear into the gray and the teal links lose
   contrast. Re-surface the panel; headings and links then read with their existing dark colors.
*/
[data-theme="dark"] .learnOuter .learnNavigation {
    background-color: var(--mp-surface);
    border-top-color: var(--mp-border);
}

[data-theme="dark"] .learnOuter .learnNavigation > div > p {
    border-bottom-color: var(--mp-border);
}

/*
   "What is This?" info block (CustomMP.css:740-810). The expandable text panel
   uses a light gray surface with orange border + inherited dark text — invisible
   in dark mode. Re-theme the panel; keep the orange `.whatis` button accent
   since it's a recognizable affordance.
*/
[data-theme="dark"] .whatis_text {
    background-color: var(--mp-surface-alt);
    border-color: var(--mp-accent);
    color: var(--mp-text);
}

[data-theme="dark"] .whatis_close span {
    color: var(--mp-accent);
}

[data-theme="dark"] .whatis,
[data-theme="dark"] .whatis_outer._o .whatis,
[data-theme="dark"] .whatis_outer._c .whatis {
    background-color: var(--mp-surface);
    border-color: var(--mp-accent);
    color: var(--mp-accent);
}

[data-theme="dark"] .report_as_of_time {
    color: var(--mp-text-muted);
}

/*
   Screener filter chrome (screenerFilterStyles.css:1). The legacy `.drk-bkgr`
   variant exists but is opt-in via class. Mirror its intent here so the
   filter box flips with the global theme on every page that uses it.
*/
[data-theme="dark"] .filter_collapse_box {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

    [data-theme="dark"] .filter_collapse_box._c a.filter_collapse_btn:after,
    [data-theme="dark"] .filter_collapse_box._o a.filter_collapse_btn:after {
        color: var(--mp-text);
    }

    [data-theme="dark"] .filter_collapse_box select,
    [data-theme="dark"] .filter_collapse_box input[type="text"],
    [data-theme="dark"] .filter_collapse_box input[type="search"],
    [data-theme="dark"] .filter_collapse_box input[type="number"] {
        background-color: var(--mp-surface-alt);
        color: var(--mp-text);
        border-color: var(--mp-border);
    }

/*
   Options time-and-sales filter bars (.opt_time_and_sales_filters, defined in
   symOptionsStyle.css:209). The bar itself gets flex layout but the child
   <select> and <input type="time"> elements have no dark-mode styling, so on
   dark they render with the browser's default white surface + dark text,
   which reads as a bright rectangle strip against the dark page background.
   Same treatment as the .filter_collapse_box block above - token-driven surface
   + text + border so both open (option list background) and closed states are
   coherent with the theme. Applies to every page that uses the shared filter
   bar class (SingleLegOptionTradesNew, SingleLegOptionTradesSummary, the index-
   options equivalents, etc.).
*/
[data-theme="dark"] .opt_time_and_sales_filters select,
[data-theme="dark"] .opt_time_and_sales_filters input[type="text"],
[data-theme="dark"] .opt_time_and_sales_filters input[type="search"],
[data-theme="dark"] .opt_time_and_sales_filters input[type="number"],
[data-theme="dark"] .opt_time_and_sales_filters input[type="time"] {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
}

/* Labels inside the filter bar: default browser label styling would inherit
   from body, but some ancestor rules paint labels darker. Force to --mp-text
   in dark mode so the filter names stay legible above the dropdowns. */
[data-theme="dark"] .opt_time_and_sales_filters label {
    color: var(--mp-text);
}

    [data-theme="dark"] .filter_collapse_box .wl_filter_lbl,
    [data-theme="dark"] .filter_collapse_box table td.wl_filter {
        color: var(--mp-text);
    }

[data-theme="dark"] .filter_clear_btn {
    color: var(--mp-accent);
}

/*
   Save / load preset bar (screenerFilterStyles.css:200-294). Hardcoded
   light-blue surface + green-tinted preset select that clash badly on dark.
   Same intent as the existing .drk-bkgr variants (lines 216, 275, 282)
   but driven by [data-theme="dark"] so it flips automatically.
*/
[data-theme="dark"] .filter_collapse_box._o .filter_save_box {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-top-color: var(--mp-border);
}

[data-theme="dark"] .filter_loadexisting_box > div > span,
[data-theme="dark"] .filter_loadexisting_box > div > select,
[data-theme="dark"] .filter_loadexisting_box > div > a {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
}

[data-theme="dark"] .filter_loadexisting_box select.filter_loadpreset_sel {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border: 1px solid var(--mp-accent);
}

[data-theme="dark"] .filter_savenew_box > div > span,
[data-theme="dark"] .filter_savenew_box > div > input,
[data-theme="dark"] .filter_savenew_box > div > a {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border: 1px solid var(--mp-border);
}

[data-theme="dark"] .filter_save_box div.filter_savenew_explanation {
    color: var(--mp-text);
}

[data-theme="dark"] .filter_clear_btn:hover {
    background-color: var(--mp-accent);
    color: var(--mp-accent-contrast);
}

[data-theme="dark"] .filter_clear_btn._disabled,
[data-theme="dark"] .filter_clear_btn._disabled:hover {
    background-color: var(--mp-surface);
    color: var(--mp-text-muted);
}

[data-theme="dark"] .non-premium-user-notice {
    color: var(--mp-text);
}

/*
   Tab menu (tabLinkMenu.css:62 .tablink_item > span { color: #000 }).
   Black text on dark surface — completely unreadable.
*/
[data-theme="dark"] .tablink_container {
    color: var(--mp-text);
}

    [data-theme="dark"] .tablink_container._bottomborder {
        border-bottom-color: var(--mp-border);
    }

    [data-theme="dark"] .tablink_container .tablink_item {
        border-top-color: var(--mp-border);
        border-bottom-color: var(--mp-border);
        border-left-color: var(--mp-border);
    }

        [data-theme="dark"] .tablink_container .tablink_item:last-child,
        [data-theme="dark"] .tablink_container .tablink_item:first-child:last-child {
            border-right-color: var(--mp-border);
        }

        [data-theme="dark"] .tablink_container .tablink_item > span,
        [data-theme="dark"] .tablink_container .tablink_item._sel > span {
            color: var(--mp-text);
        }

        [data-theme="dark"] .tablink_container .tablink_item.tablink_menu_label,
        [data-theme="dark"] .tablink_container .tablink_item.tablink_menu_label:hover {
            background-color: var(--mp-surface-alt);
            color: var(--mp-text);
        }

        [data-theme="dark"] .tablink_container .tablink_item._sel {
            background-color: var(--mp-surface-alt);
        }

/*
   Site header bar and recent-symbols ticker.
   mpSiteHeader.css:1 has #site-header { background: #d6ede3; border-bottom: 1px solid #ddd }.
   mpSiteHeader.css:784 has #header-recent-syms { background: #ededed; borders #8c8c8c }.
   These are global chrome (shared across the site), but until a dedicated
   header pass lands they need to go dark so the homepage doesn't have a
   bright light strip up top in dark mode.
*/
[data-theme="dark"] #site-header {
    background-color: var(--mp-surface);
    border-bottom-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] #siteheader-inner {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

[data-theme="dark"] #site-header a {
    color: var(--mp-text);
}

    [data-theme="dark"] #site-header a:hover {
        color: var(--mp-accent);
    }

/* Recent-symbols ticker bar */
[data-theme="dark"] #header-recent-syms {
    background-color: var(--mp-surface-alt);
    border-top-color: var(--mp-border);
    border-bottom-color: var(--mp-border);
}

    [data-theme="dark"] #header-recent-syms .recent_item {
        color: var(--mp-text);
    }

        /* mpSiteHeader.css:820 has .recent_item > span:first-child { color: #002eb8 } — same
   deep-blue-on-dark unreadability as a.mplink. */
        [data-theme="dark"] #header-recent-syms .recent_item > span:first-child {
            color: var(--mp-accent);
        }

        [data-theme="dark"] #header-recent-syms .recent_item:hover {
            background-color: var(--mp-surface);
        }

/* Lookup bar sits below the ticker with #ebeae9 background */
[data-theme="dark"] #header-lookup-bar.sym_lookup {
    background-color: var(--mp-surface);
    box-shadow: 0px 5px 5px 2px rgba(0, 0, 0, 0.6);
}

/*
   =========================================================================
   Symbol Overview - shared left menu (symOverviewMenu_v2.css).
   Covers every /Overview/{symbol}/{i}/{si} sub-page.

   Light-mode hard-codes (untouched):
     .ov-main-menu._c            background #e8e8e8, border #595959
     .ov-main-menu._o/._c1       background #dbdbdb, border #262626
     .ov-menu / li.ov-menu-item  color #000 / black
     .ov-menu-heading:hover      background #bbbbbb
     .ov-menu-item.ov-menu-sel > a       background #c0d2dc, border-left #f9bb39
     .ov-menu-item:hover > a             background #9cb9c9
     .ov-menu-ext-item > a               color #09265d
     .ov-menu-heading (borders)          #a6a6a6
     .ov-menu-top ._x span               color #800000 (kept - accent)
     .ov-menu-top/.ov-menu-bot borders   #4d4d4d (dark, already OK)
     div.ov-lbl                          background #1a2532 (already dark, OK)
*/
[data-theme="dark"] .ov-main-menu._c,
[data-theme="dark"] .ov-main-menu._o,
[data-theme="dark"] .ov-main-menu._c1,
[data-theme="dark"] .ov-menu-mob {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
    color: var(--mp-text);
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] ul.ov-menu,
[data-theme="dark"] li.ov-menu-item {
    color: var(--mp-text);
}

[data-theme="dark"] .ov-main-menu .ov-menu-mid ul.ov-menu > li.ov-menu-heading {
    border-top-color: var(--mp-border);
}

[data-theme="dark"] .ov-main-menu._o .ov-menu-mid ul.ov-menu._o > li.ov-menu-heading {
    border-bottom-color: var(--mp-border);
}

[data-theme="dark"] .ov-main-menu ul.ov-menu > li.ov-menu-heading:hover {
    background-color: var(--mp-surface-alt);
}

/* Selected menu ITEM row (accent border + tinted bg) */
[data-theme="dark"] .ov-main-menu li.ov-menu-item.ov-menu-sel > a {
    background-color: var(--mp-surface-alt);
    border-left-color: var(--mp-accent);
}

/* Selected menu HEADING (whole section highlighted) */
[data-theme="dark"] .ov-main-menu ul.ov-menu._sel > li.ov-menu-heading {
    border-left-color: var(--mp-accent);
}

[data-theme="dark"] .ov-main-menu li.ov-menu-item:hover > a,
[data-theme="dark"] .ov-main-menu li.ov-menu-ext-item:hover > a {
    background-color: var(--mp-surface-alt);
}

[data-theme="dark"] .ov-main-menu li.ov-menu-ext-item > a {
    color: var(--mp-accent);
}

[data-theme="dark"] .ov-main-menu .ov-menu-top,
[data-theme="dark"] .ov-main-menu .ov-menu-bot {
    color: var(--mp-text);
    border-color: var(--mp-border);
}

    [data-theme="dark"] .ov-main-menu .ov-menu-top:hover,
    [data-theme="dark"] .ov-main-menu .ov-menu-bot:hover {
        background-color: var(--mp-surface-alt);
    }

/*
   =========================================================================
   Symbol Overview - shared top ticker card (symOverviewHead.css).
   Also appears on every /Overview/{symbol}/... sub-page.

   Light-mode hard-codes (untouched):
     #symov_main_heading.ov-head-outer   background white, border #9c9c9d
     .ov-head-outer._basic               border #9c9c9d
     .ov-head-name/.ov-head-sector       color #404040
     .ov-head-price/.ov-head-prepost text   color black
     .ov-head-price-top/-time             color #404040 (label rows)
     .ov-head-prepost                     background #ffe6cc (premarket peach)
     .symov-vwap-outer                    background #e7f9fe (light cyan)
     .ov-head-stats-outer                 background #daedef (light cyan)
     .ov-head-stats-outer._stockvol       background #dde0ee (light lavender)
     .ov-head-stats-section border-left   #b3b3b3
     .ov-head-stat labels                 color #404040
     .ov-head-stat data                   color #0d0d0d
     .ov-head-sym-halt-alert              background #fccbb5 (peach)
     .ov-head-sym-short-alert             background #ffffb3 (yellow)
     .ov-alert-item                       background #fcc0a7 (peach)
     .ov-alert-item .ov-alert-bot border  #dfdfdf
     .ov-head-takeover                    background #a43d3d (dark red, kept)
*/
[data-theme="dark"] #symov_main_heading.ov-head-outer,
[data-theme="dark"] .ov-head-outer._basic {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
}

[data-theme="dark"] .ov-head-prices-outer .ov-head-sym .ov-head-name,
[data-theme="dark"] .ov-head-prices-outer .ov-head-sym .ov-head-sector,
[data-theme="dark"] .ov-head-prices-outer .ov-head-sym .ov-head-sector .ov-head-sector-lbl {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .ov-head-prices-outer .ov-head-price,
[data-theme="dark"] .ov-head-prices-outer .ov-head-prepost {
    color: var(--mp-text);
}

    [data-theme="dark"] .ov-head-prices-outer .ov-head-price .ov-head-price-top,
    [data-theme="dark"] .ov-head-prices-outer .ov-head-prepost .ov-head-prepost-top,
    [data-theme="dark"] .ov-head-stats-outer .ov-head-stats-section .ov-head-stats-top,
    [data-theme="dark"] .ov-head-prices-outer .ov-head-price .ov-head-price-time,
    [data-theme="dark"] .ov-head-prices-outer .ov-head-prepost .ov-head-prepost-time {
        color: var(--mp-text-muted);
    }

    [data-theme="dark"] .ov-head-prices-outer .ov-head-price .ov-head-price-mid,
    [data-theme="dark"] .ov-head-prices-outer .ov-head-prepost .ov-head-prepost-mid,
    [data-theme="dark"] .ov-head-prices-outer .ov-head-price .ov-head-price-bot,
    [data-theme="dark"] .ov-head-prices-outer .ov-head-prepost .ov-head-prepost-bot {
        color: var(--mp-text);
    }

/* Premarket peach tag - flip to a dark surface with accent text */
[data-theme="dark"] .ov-head-prices-outer .ov-head-prepost {
    background-color: var(--mp-surface-alt);
}

/* VWAP block (light cyan) */
[data-theme="dark"] .ov-head-prices-outer .symov-vwap-outer {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

    [data-theme="dark"] .ov-head-prices-outer .symov-vwap-outer .symov-vwap-title,
    [data-theme="dark"] .ov-head-prices-outer .symov-vwap-outer .symov-vwap-pricetovalue-title {
        color: var(--mp-text-muted);
    }

    [data-theme="dark"] .ov-head-prices-outer .symov-vwap-outer .symov-vwap-value > span._val {
        color: var(--mp-text);
    }

    [data-theme="dark"] .ov-head-prices-outer .symov-vwap-outer .symov-vwap-pricetovalue > div > span._tag {
        color: var(--mp-text-muted);
    }

/* Stats block (Low/Hi, 52-Week, Volume, VWAP, Option Volume, 30-Day IV, IV30 % Rank, Technical) */
[data-theme="dark"] .ov-head-stats-outer,
[data-theme="dark"] .ov-head-prepost._withstats,
[data-theme="dark"] .ov-head-outer._basic .ov-head-details-outer .ov-head-prices-outer > .ov-head-prepost._withstats {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

    [data-theme="dark"] .ov-head-stats-outer._stockvol {
        background-color: var(--mp-surface-alt);
    }

    [data-theme="dark"] .ov-head-stats-outer > .ov-head-stats-section:nth-child(n+2),
    [data-theme="dark"] .ov-head-prepost._withstats > div:nth-child(n+2) {
        border-left-color: var(--mp-border);
    }

    [data-theme="dark"] .ov-head-stats-outer > .ov-head-stats-section > .ov-head-stat > span.labeltag,
    [data-theme="dark"] .ov-head-prepost._withstats > .ov-head-stats-section > .ov-head-stat > span.labeltag {
        color: var(--mp-text-muted);
    }

    [data-theme="dark"] .ov-head-stats-outer > .ov-head-stats-section > .ov-head-stat > span.datatag,
    [data-theme="dark"] .ov-head-prepost._withstats > .ov-head-stats-section > .ov-head-stat > span.datatag {
        color: var(--mp-text);
    }

/* Halt / short-sale alert tags (peach / yellow warning strips) */
[data-theme="dark"] .ov-head-outer .ov-head-sym-halt-alert,
[data-theme="dark"] .ov-head-outer .ov-head-sym-short-alert {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

/* Alert badges (⚠ ALERT) */
[data-theme="dark"] .ov-alert-outer .ov-alert-item {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

    [data-theme="dark"] .ov-alert-outer .ov-alert-item:hover {
        background-color: var(--mp-surface);
    }

    [data-theme="dark"] .ov-alert-outer .ov-alert-item .ov-alert-mid {
        color: var(--mp-text);
    }

    [data-theme="dark"] .ov-alert-outer .ov-alert-item .ov-alert-bot {
        color: var(--mp-text-muted);
        border-top-color: var(--mp-border);
    }

/* .ov-head-takeover kept as-is - already a dark red accent (#a43d3d) that
   reads on both light and dark backgrounds. */

/* Sub-heading H1 style used by the SymbolSummary view */
[data-theme="dark"] h1.sym_sub_heading,
[data-theme="dark"] .sym_sub_heading {
    color: var(--mp-text);
}

/*
   =========================================================================
   Symbol Overview - main content wrapper + inner containers (symOverview.css).

   Root cause of "half the symbol page is still white": symOverview.css:49
   sets #symov_main_content_outer { background-color: white; color: black; }.
   That's the wrapper around every symbol sub-page's body (Summary, Chart,
   Dividends, Options, etc.), so every tab/section rendered inside it sits
   on a hard-coded white surface. Same file also hard-codes white on
   #symov_main_heading, #overview_tab_content and the three news containers.

   Deliberately only setting background-color + border-color (NOT `color`),
   so we don't cascade a light text-color into descendants that have hard-
   coded pastel cell backgrounds (e.g. mp_lightborder ._w0/._b0/._o0).

   NOTE: an earlier session briefly removed this block chasing a phantom
   OptionChain bug that turned out to be Chrome's anti-scraping detection
   in HtmlCrypto.js (unrelated to dark mode). Restored — safe in Firefox
   and Chrome alike; the chain-render issue was environmental, not CSS.
*/
[data-theme="dark"] #symov_main_content_outer,
[data-theme="dark"] #overview_tab_content,
[data-theme="dark"] #symov_main_heading,
[data-theme="dark"] #symov_main_content_headlines,
[data-theme="dark"] #symov_main_content_headlines_prem,
[data-theme="dark"] #symov_main_pr_list_prem {
    background-color: var(--mp-bg);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

/*
   Per-column-group stripe classes in mp_lightborder (Income/Balance/Cash-Flow
   statements): three-column filing groups (_rv / _pctrev / _yoy) alternate
   _w0/_b0/_o0 <-> _w1/_b1/_o1 per filing. Light-mode pastels (base rules in
   mpTables_v2.css:428-445) do not translate to dark - force blocks with black
   text = blinding, and _w0 (background-color: inherit) becomes invisible on
   dark surfaces. Remap the six classes onto the table surface tokens: keep
   the 0/1 zebra distinction (base vs alt), drop the pastel color-grouping.
*/
[data-theme="dark"] table.mp_lightborder > tbody > tr > td._w0,
[data-theme="dark"] table.mp_lightborder > tbody > tr > td._b0,
[data-theme="dark"] table.mp_lightborder > tbody > tr > td._o0 {
    background-color: var(--mp-table-bg);
    color: var(--mp-table-text);
}
[data-theme="dark"] table.mp_lightborder > tbody > tr > td._w1,
[data-theme="dark"] table.mp_lightborder > tbody > tr > td._b1,
[data-theme="dark"] table.mp_lightborder > tbody > tr > td._o1 {
    background-color: var(--mp-table-bg-alt);
    color: var(--mp-table-text);
}
/*
   hlcelltd / _rowhl / simple-hl rows keep their bright pastel highlight bg
   from the base rules (they are intentional attention-grabbers). Force dark
   text so text-on-pastel stays legible when the dark cascade would otherwise
   put var(--mp-text) light-on-light. Covers both mp_lightborder and
   mp_featuretbl carriers of the same highlight classes.
*/
[data-theme="dark"] table.mp_lightborder > tbody > tr > td.hlcelltd,
[data-theme="dark"] table.mp_featuretbl > tbody > tr > td.hlcelltd,
[data-theme="dark"] table.mp_featuretbl > tbody > tr > .hlcelltd,
[data-theme="dark"] table.mp_lightborder > tbody > tr._rowhl > td,
[data-theme="dark"] table.mp_featuretbl > tbody > tr._rowhl > td {
    color: black;
}

/* .simple-hl rows: base `#fdeeb5` (pale yellow) with the old dark override of
   `color: black` felt out of place in dark mode. Repaint the highlight as a
   warm dark amber with light text — still visibly "highlighted" against the
   dark table cascade, but stays inside the dark palette. */
[data-theme="dark"] table.mp_lightborder > tbody > tr.simple-hl,
[data-theme="dark"] table.mp_lightborder > tbody > tr.simple-hl > td,
[data-theme="dark"] table.mp_featuretbl > tbody > tr.simple-hl,
[data-theme="dark"] table.mp_featuretbl > tbody > tr.simple-hl > *,
[data-theme="dark"] tr.simple-hl,
[data-theme="dark"] tr.simple-hl > td {
    background-color: #3d3520 !important;   /* warm dark amber */
    color: var(--mp-text) !important;
}

/*
   .shaderow (subtle-shaded row on featuretbl / lightborder tables). Base rule
   at mpTables_v2.css:853-856 hardcodes #e7f3f3 (near-white cyan); in dark
   mode the dark-text cascade puts light text on light bg = washed out. Remap
   the shaded surface onto --mp-table-bg-alt so it stays one step off the base
   just like the zebra rows above.
*/
[data-theme="dark"] table.mp_featuretbl > tbody > tr.shaderow,
[data-theme="dark"] table.mp_featuretbl > tbody > tr.shaderow > td,
[data-theme="dark"] table.mp_lightborder > tbody > tr.shaderow,
[data-theme="dark"] table.mp_lightborder > tbody > tr.shaderow > td {
    background-color: var(--mp-table-bg-alt);
    color: var(--mp-table-text);
}

/*
   Buy/Sell chips: span._gr / span._red inside td.nopadcelltd. Base rules at
   mpTables_v2.css:411-418 set only pastel bg (no color); the dark td-text
   cascade puts near-white text on pastel pink/green = illegible. Force black
   text on the chips in dark; keep pastel bgs unchanged. Same markup emitted
   by 5 tables site-wide (InsiderTrades, Trades ByOwner/ByDate/Performance,
   Screener) - single override covers all.
*/
[data-theme="dark"] table.mp_lightborder tbody > tr > td.nopadcelltd > span._gr,
[data-theme="dark"] table.mp_lightborder tbody > tr > td.nopadcelltd > span._red {
    color: black;
}

/*
   #indicator_selector_tbl (montage indicator selector: Spot Price /
   1 Standard Dev / Most Active / 20-50-252 MA / High-Low / Avg Up-Down).
   Selected cell paints orange via inline style at click (montagePage.js:681);
   other cells are transparent-bg + no explicit color, so text inherits.
   Force them light in dark mode so unselected tabs stay legible.
*/
[data-theme="dark"] #indicator_selector_tbl > tbody > tr > td,
[data-theme="dark"] #indicator_selector_tbl > tbody > tr > td > span,
[data-theme="dark"] #indicator_selector_tbl > tbody > tr > td > .dis-prem > p {
    color: var(--mp-text);
}

/* Selected cell keeps its orange bg (from JS) — force black text on orange */
[data-theme="dark"] #indicator_selector_tbl > tbody > tr > td[style*="orange"],
[data-theme="dark"] #indicator_selector_tbl > tbody > tr > td[style*="orange"] > span {
    color: black;
}

/*
   .symov_stat_tbl (Summary "Trading Stats" section, Views/symbols/SymbolSummaryTradingStats.cshtml).
   symOverview.css:1234 already uses var(--mp-table-*) with fallbacks, but the
   tables continue to render white in dark on some environments. Add explicit
   dark overrides so surface + hardcoded pastel highlight cells (._divider,
   .hlcelltd, .valuetd) all flip to dark surfaces + light text.
*/
[data-theme="dark"] table.symov_stat_tbl,
[data-theme="dark"] table.symov_stat_tbl > tbody,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > th,
[data-theme="dark"] table.symov_stat_tbl > tfoot > tr > td {
    background-color: var(--mp-table-bg);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

[data-theme="dark"] table.symov_stat_tbl > thead > tr > th {
    background-color: var(--mp-table-bg);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

[data-theme="dark"] table.symov_stat_tbl > thead > tr.main_heading > th {
    background-color: var(--mp-table-header-bg);
    color: var(--mp-table-header-text);
}

[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.labeltag,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.datatag,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.headertag {
    color: var(--mp-text);
}

[data-theme="dark"] table.symov_stat_tbl > tbody > tr:hover,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr:hover > td,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr:hover > th {
    background-color: var(--mp-table-row-hover);
}

/* Highlighted cells (hlcelltd = yellow, valuetd = green) — keep as accent
   tints in dark mode but use darker equivalents so text stays legible. */
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.hlcelltd {
    background-color: var(--mp-surface-alt);
    color: var(--mp-warn, #e0a03a);
    font-weight: bold;
}

[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.valuetd,
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.valuetd.datatag {
    background-color: var(--mp-surface-alt);
    color: var(--mp-pos);
}

/* tfoot has `background: lightgrey; color: black;` hardcoded */
[data-theme="dark"] table.symov_stat_tbl > tfoot,
[data-theme="dark"] table.symov_stat_tbl > tfoot > tr > * {
    background: var(--mp-surface-alt);
    color: var(--mp-text);
}

/* Section title accent (originally #cc4e00 orange, kept as accent) */
[data-theme="dark"] .symov_stat_section_outer .symov_stat_section_title {
    color: var(--mp-accent);
}

/*
   Trade idea cards (.ti-list-item-content) — the inner card wrappers use
   background #232323 (tradeIdeas.css) which blends too closely with the
   lifted --mp-bg #141a24 / --mp-surface #1e2733 in dark. Add a soft border
   so cards stand off the page.
*/
[data-theme="dark"] .ti-list-item-alt > div,
[data-theme="dark"] .ti-list-item-content {
    border: 1px solid var(--mp-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/*
   .fund-dash-insights block (fundamentalsStyle.css:150). Light-mode section
   heads are hardcoded `color: black`; body text `color: #262626`; title
   `color: #02587e`. All read as near-black on a dark surface.
*/
[data-theme="dark"] .fund-dash-report-outer .fund-dash-insights {
    border-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-insights ._title {
    color: var(--mp-accent);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-insights ._sectionhead {
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-insights ._section {
    color: var(--mp-text);
}

/*
   Fair-Value-Price / Relative Valuation page (Views/symbols/RelativeValuationFairValue.cshtml,
   CustomMP.css:2239-2350). Dark text colors: #212121 / #757575 / #3b3b3b /
   #353535 / #55595c / #464646, plus a highlighted `.rel-val-button-sel`
   yellow bg. Sections read as near-black on the dark surface.
*/
[data-theme="dark"] .rel-val-comp-container > p:first-child {
    color: var(--mp-text);
}

[data-theme="dark"] .rel-val-comp-container-descr {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .rel-val-comp-sub-heading {
    color: var(--mp-text);
}

[data-theme="dark"] .rel-val-head-div {
    color: var(--mp-text);
}

[data-theme="dark"] #rel-val-tbl-section {
    border-top-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .rel-val-button-sel,
[data-theme="dark"] #rel-val-norm-ref-pts td.sel-ref {
    background-color: var(--mp-warn, #e0a03a);
    color: var(--mp-accent-contrast);
}

/*
   Cell borders inside the valuation grid + the vertical "Average" rail
   (CustomMP.css:2367-2378) hard-code #838383 — flip to theme border.
*/
[data-theme="dark"] .rel-tbl-cell > div.half-right-bottom,
[data-theme="dark"] .rel-tbl-cell > div.full-bottom-middle,
[data-theme="dark"] .rel-tbl-cell > div.full-right,
[data-theme="dark"] .rel-tbl-cell > div.half-right-top {
    border-color: var(--mp-border);
}

/* Inputs on the normalization form (CustomMP.css:2210-2224) are hardcoded
   white with dark text - unreadable in dark. */
[data-theme="dark"] #rel-val-norm-inputs-tbl input,
[data-theme="dark"] #rel-val-norm-inputs-tbl select {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

/*
   Financial statement tables (#inc-stm-tbl / #bal-sht-tbl / #cashflow-stm-tbl)
   on /Overview/{sym}/Income-Statement, Balance-Sheet, Cash-Flow-Statement.
   Charts on these pages are already wired via MPTheme.applyChartTheme in
   overviewPage.js; here we handle the table body cells that inherit black
   text and the row-header cells that use hardcoded dark greys.
*/
[data-theme="dark"] #inc-stm-tbl,
[data-theme="dark"] #bal-sht-tbl,
[data-theme="dark"] #cashflow-stm-tbl {
    background-color: var(--mp-table-bg);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

[data-theme="dark"] #inc-stm-tbl > thead > tr > th,
[data-theme="dark"] #bal-sht-tbl > thead > tr > th,
[data-theme="dark"] #cashflow-stm-tbl > thead > tr > th,
[data-theme="dark"] #inc-stm-tbl > tbody > tr > td,
[data-theme="dark"] #bal-sht-tbl > tbody > tr > td,
[data-theme="dark"] #cashflow-stm-tbl > tbody > tr > td,
[data-theme="dark"] #inc-stm-tbl > tbody > tr > th,
[data-theme="dark"] #bal-sht-tbl > tbody > tr > th,
[data-theme="dark"] #cashflow-stm-tbl > tbody > tr > th {
    color: var(--mp-text);
    border-color: var(--mp-border);
}

/* .selectlabel color-picker chips on chart color-selection panels use
   hardcoded background colors (from ViewBag.ChartColorScheme); the text
   sits on those colored chips and needs to stay readable — force black
   in dark mode so the mid-brightness chips still work. */
[data-theme="dark"] .selectlabel {
    color: black;
}

/* Chart color-picker outer container has `.iv30_selectlabel_outer`
   with no explicit bg. Ensure inherit. */
[data-theme="dark"] .iv30_selectlabel_outer {
    color: var(--mp-text);
}

/*
   .mp-data-feature-item / .mp-data-feature-tbl (mpDataFeature.css).
   Rendered on Stock-Price-Action sub-pages (Volume by Trader Size, Dark
   Pool Volume, etc.) as feature-cards. Light-mode: bg #f0f3f4, black text,
   dark navy links, gray borders. Force dark surfaces + light text so cards
   stay readable in dark mode.
*/
[data-theme="dark"] .mp-data-feature-outer .mp-data-feature-item {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

[data-theme="dark"] .mp-data-feature-outer .mp-data-feature-item table.mp-data-feature-tbl > tbody > tr > td {
    border-top-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .mp-data-feature-outer .mp-data-feature-item table.mp-data-feature-tbl > thead > tr > th {
    color: var(--mp-text);
}

[data-theme="dark"] .mp-data-feature-outer .mp-data-feature-item table.mp-data-feature-tbl a {
    color: var(--mp-accent);
}

/*
   #event-insights-price-tbl / event-insights-price-outer (eventInsightsStyles.css:32-44).
   Historical Gap-Up-Moves / Gap-Down-Moves / Largest-Historical-Moves pages
   render this table at the bottom. `_avgLast12` row has hardcoded #fceacf
   (peach) bg, `_avgMarker` has #c0e5f2 (light blue). Both use inherited
   black text — flip both to dark surfaces with light text.
*/
[data-theme="dark"] .event-insights-price-outer .event-insights-price-tbl-outer table.mp_lightborder > tbody > tr._avgLast12 > td {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

[data-theme="dark"] .event-insights-price-outer .event-insights-price-tbl-outer table.mp_lightborder > tbody > tr._avgMarker > td {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

[data-theme="dark"] .event-insights-price-outer .event-insights-stock-trends-outer .event-insights-stock-trends-heading {
    color: var(--mp-accent);
}

/*
   .fund-dash-value-item (fundamentalsStyle.css:16-140). Fundamentals
   Dashboard cards. Numbers and labels use dark colors that read black on
   dark surface. Also chart-heading text.
*/
[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-title {
    color: var(--mp-accent);
    border-bottom-color: var(--mp-border);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._title {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._values-outer ._mainval {
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._values-outer ._benchval,
[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._values-outer ._vsbench,
[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._vsbench {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._chart-outer > p {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._history-outer {
    border-top-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._history-outer._top {
    border-bottom-color: var(--mp-border);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._history-outer > div {
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._growth-table > thead > tr > th._mainsym {
    color: var(--mp-text);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._growth-table > thead > tr > th._comparevals,
[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._growth-table > tbody > tr > td._comparevals {
    color: var(--mp-accent);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._growth-table > thead > tr > th._benchsym,
[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._growth-table > thead > tr > th._vsbench {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .fund-dash-report-outer .fund-dash-value-item ._growth-table > tbody > tr > td:nth-child(2) {
    color: var(--mp-text);
}

/*
   .report_descr / .report-subhead (equityReportsStyle.css:1-13). Body
   description text on report pages including Fair-Value-Price. Hardcoded
   `color: black`.
*/
[data-theme="dark"] .report_descr,
[data-theme="dark"] .report-subhead {
    color: var(--mp-text);
}

/*
   .sym-earn-guidance-disp (symOverview.css:1442) — Earnings guidance card
   with border #e2e2e2 + hardcoded black text.
*/
[data-theme="dark"] .sym-earn-guidance-disp {
    color: var(--mp-text);
    border-color: var(--mp-border);
    background-color: var(--mp-surface-alt);
}

/*
   .clickable-cell (CustomMP.css:2437) uses `color: blue !important` which
   is near-black on dark. Route to the accent (with !important to win).
*/
[data-theme="dark"] .clickable-cell {
    color: var(--mp-accent) !important;
}

/*
   Inline color: #3b3b3b on span labels inside .mp_featuretbl (DarkPoolHighlights
   view, "Today's Share:", "vs. Avg:", etc.). Inline styles can only be
   overridden via [style*=...] attribute selector + !important. Force the
   muted text color when in dark mode.
*/
[data-theme="dark"] .mp_featuretbl span[style*="#3b3b3b"],
[data-theme="dark"] .mp_featuretbl span[style*="color: #3b3b3b"],
[data-theme="dark"] .mp_featuretbl span[style*="color:#3b3b3b"] {
    color: var(--mp-text-muted) !important;
}

/*
   Plain <a> links inside .mp_featuretbl (e.g. "View Volume Breakdown History")
   render browser-default blue #0000EE which is unreadable on dark.
*/
[data-theme="dark"] .mp_featuretbl a {
    color: var(--mp-accent);
}

/*
   Watchlist / Price-Alert buttons in the symbol header (userAccountStyles.css:8-48).
   The visible text ("Add to Watchlist", "Create Price Alert") comes from
   CSS `content:` on :after pseudo-elements with hard-coded `color: black`,
   and the buttons have a light grey border. Both invisible on dark.
*/
[data-theme="dark"] a.add_to_watchlist_btn,
[data-theme="dark"] a.add_to_alerts_btn {
    border-color: var(--mp-border);
    background-color: var(--mp-surface-alt);
}

[data-theme="dark"] a.add_to_watchlist_btn:after,
[data-theme="dark"] a.add_to_alerts_btn:after {
    color: var(--mp-text);
}

[data-theme="dark"] a.add_to_watchlist_btn:hover,
[data-theme="dark"] a.add_to_alerts_btn:hover {
    border-color: var(--mp-accent);
    background-color: var(--mp-surface);
}

/*
   Fieldsets used across the site (Earnings option strategy panels, payback
   period, etc.) inherit browser-default black text + browser-default blue
   links. Legend defaults to inheriting text color from container. In dark
   mode both need theming.
*/
[data-theme="dark"] .symbol-section-summ-fieldset fieldset,
[data-theme="dark"] fieldset {
    border-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .symbol-section-summ-fieldset fieldset legend,
[data-theme="dark"] fieldset > legend {
    color: var(--mp-text);
}

[data-theme="dark"] .symbol-section-summ-fieldset fieldset a,
[data-theme="dark"] fieldset a {
    color: var(--mp-accent);
}

[data-theme="dark"] .symbol-section-summ-fieldset fieldset a:hover,
[data-theme="dark"] fieldset a:hover {
    color: var(--mp-accent);
    text-decoration: underline;
}

/*
   flex-slide-menu (flexSlideMenu.css) - the collapsible inner menu used on
   Stock-Price-Action and other sym sub-pages. Light-mode: black text, light
   blue-gray group backgrounds, peach hover. Needs dark surface + light text.
*/
[data-theme="dark"] .flex-slide-menu {
    color: var(--mp-text);
}

[data-theme="dark"] .flex-slide-menu .-mainheading {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .flex-slide-menu .-group {
    background-color: var(--mp-surface-alt);
    border-color: var(--mp-border);
}

[data-theme="dark"] .flex-slide-menu .-group .-heading {
    color: var(--mp-text);
}

[data-theme="dark"] .flex-slide-menu .-group .-heading:hover {
    background-color: var(--mp-surface);
}

[data-theme="dark"] .flex-slide-menu .-group .-inner .-item {
    color: var(--mp-text);
}

[data-theme="dark"] .flex-slide-menu .-group .-inner .-item:hover,
[data-theme="dark"] .flex-slide-menu._hasdirect .-group .-heading.-item:hover {
    background-color: var(--mp-accent);
    color: var(--mp-accent-contrast);
}

/*
   Section-header bars used across symbol sub-pages (.sym_section_heading).
   Light mode paints these an accent red (#bb2f00) - keep the accent but
   tune it for dark readability by shifting to --mp-accent so it doesn't
   clash with the dark navy surface.
*/
[data-theme="dark"] h2.sym_section_heading,
[data-theme="dark"] h3.sym_section_heading {
    color: var(--mp-accent);
}

/*
   Left subnav-menu-* variant (older sidebar style still referenced by some
   sub-pages). Same intent as the .ov-menu-* overrides higher up.
*/
[data-theme="dark"] ul.subnav-menu,
[data-theme="dark"] li.subnav-menu-item,
[data-theme="dark"] li.subnav-menu-ext-item {
    color: var(--mp-text);
}

[data-theme="dark"] li.subnav-menu-selected {
    background-color: var(--mp-accent);
    color: var(--mp-accent-contrast);
    border-color: var(--mp-border);
}

[data-theme="dark"] li.subnav-menu-item:hover {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

/*
   News list (pressReleaseStyles.css) - shown inside the Summary "News" panel
   plus every symbol News/Press-Releases sub-page. Link + tag colors.
*/
[data-theme="dark"] .daily_news_head > a {
    color: var(--mp-text);
}

    [data-theme="dark"] .daily_news_head:hover > a,
    [data-theme="dark"] .daily_news_head > a:hover {
        color: var(--mp-accent);
    }

[data-theme="dark"] .daily_news_tag {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .daily_news_item._hl._feat .daily_news_tag > span:first-child {
    color: var(--mp-accent);
}

/*
   Daily-chart heading label (chartStyles.css:30 "Stock Price & Volume |").
   Muted grey (#404040) in light; needs to be readable on dark surface.
*/
[data-theme="dark"] .daily-chart-heading {
    color: var(--mp-text-muted);
}

/*
   FAQ block at bottom of the Summary page (CustomMP.css:1311-1376).
   Hard-coded near-white surface + very-light-blue zebra rows + black text
   headings and dark navy links. All invisible against a dark page.
*/
[data-theme="dark"] .faq-shared {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border-top-color: var(--mp-border);
}

    [data-theme="dark"] .faq-shared h3,
    [data-theme="dark"] .faq-shared section[itemscope] h4 {
        color: var(--mp-text);
    }

    [data-theme="dark"] .faq-shared section[itemscope] {
        color: var(--mp-text);
    }

        [data-theme="dark"] .faq-shared section[itemscope]:nth-child(2n) {
            background-color: var(--mp-surface-alt);
        }

        [data-theme="dark"] .faq-shared section[itemscope] a {
            color: var(--mp-accent);
        }

            [data-theme="dark"] .faq-shared section[itemscope] a:hover {
                color: var(--mp-accent);
                text-decoration: underline;
            }

/*
   Account dropdown menu (mpSiteHeader.css:616-685, markup in
   Views/Shared/_LoginPartialUserMenu.vbhtml). Triggered by the avatar in
   the top-right of the header. Hardcoded light surfaces:
     #account_view_menu             background #EBEBEB
     .header_account_username       background #fefbf1, border #c1c1c1
     ul.account_view_sublist a/li   color #000
     ul.account_view_sublist li     border-bottom #A1A1A1
     ul.account_view_sublist li:hover  background #5CADFF
*/
[data-theme="dark"] #account_view_menu {
    background-color: var(--mp-surface);
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .header_account_username {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-bottom-color: var(--mp-border);
}

[data-theme="dark"] ul.account_view_sublist a,
[data-theme="dark"] ul.account_view_sublist li,
[data-theme="dark"] ul.account_view_sublist li:last-child {
    color: var(--mp-text);
}

[data-theme="dark"] ul.account_view_sublist li {
    border-bottom-color: var(--mp-border);
}

    [data-theme="dark"] ul.account_view_sublist li:hover {
        background-color: var(--mp-accent);
        color: var(--mp-accent-contrast);
    }

        [data-theme="dark"] ul.account_view_sublist li:hover a {
            color: var(--mp-accent-contrast);
        }

/*
   Market Chameleon Alerts section. Lives above .main-container so it spans
   the full width of the homepage body (article grid + sidebar combined) and
   pushes the two-column layout beneath it. Light-mode .section styles from
   newhomePageStyle.css apply by inheritance; we only add width/centering
   here, plus dark-mode overrides further down for the inner alert rows.
*/
.mc_alerts_section {
    width: 94vw;
    max-width: 1280px;
    margin: 0 auto 1.5rem auto;
    box-sizing: border-box;
}

/* Dark-mode overrides for the alert rows themselves (CustomMP.css:1725-1947). */
[data-theme="dark"] .mc_alerts_section_title {
    color: var(--mp-text);
}

[data-theme="dark"] .mc_alerts_counter {
    background: var(--mp-surface-alt);
    border-left-color: var(--mp-accent);
    color: var(--mp-text);
}

    [data-theme="dark"] .mc_alerts_counter a {
        color: var(--mp-accent);
    }

[data-theme="dark"] .mc_alerts_loading,
[data-theme="dark"] .mc_alerts_empty {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .mc_alerts_time_header {
    color: var(--mp-text-muted);
    border-bottom-color: var(--mp-border);
}

[data-theme="dark"] .mc_alert_row {
    border-color: var(--mp-border);
    background: var(--mp-surface-alt);
}

[data-theme="dark"] .mc_alert_header {
    background: var(--mp-surface-alt);
    color: var(--mp-text);
}

    [data-theme="dark"] .mc_alert_header:hover {
        background: var(--mp-surface);
    }

    [data-theme="dark"] .mc_alert_header.active {
        background: var(--mp-surface);
    }

/* .mc_alert_tag is teal-on-white in light mode; teal-on-dark still reads — leave it. */

[data-theme="dark"] .mc_alert_headline {
    color: var(--mp-text);
}

[data-theme="dark"] .mc_alert_time {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .mc_alert_header .accordion-chevron {
    fill: var(--mp-text-muted);
}

[data-theme="dark"] .mc_alert_body {
    background: var(--mp-surface-alt);
}

[data-theme="dark"] .mc_alert_body_inner,
[data-theme="dark"] .mc_alert_body_teaser {
    color: var(--mp-text);
}

    /*
   The teaser fade-out (CustomMP.css:1867) hard-codes a white->white gradient
   that obscures dark text on dark. Override to fade into the dark surface.
*/
    [data-theme="dark"] .mc_alert_body_teaser::after {
        background: linear-gradient(rgba(26, 39, 51, 0), rgba(26, 39, 51, 1));
    }

/*
   Markdown tables rendered inside alert bodies (CustomMP.css:1859-1885).
   <table class="mc_alert_body_table"> is built by mcAlerts.js:257 from
   the pipe-table the model emits. Its light styles hard-code:
     th { background: #f4f6f7; color: #1a2329 }
     tbody tr:nth-child(even) td { background: #fafbfc }
     border: 1px solid #e0e3e5
   None of which respond to the dark theme, so even-numbered rows + the
   header paint near-white with light text. Override surfaces, borders and
   text under [data-theme="dark"] only; light mode (above, in CustomMP.css)
   is untouched.
*/
[data-theme="dark"] .mc_alert_body_table th,
[data-theme="dark"] .mc_alert_body_table td {
    border-color: var(--mp-table-border, var(--mp-border));
    color: var(--mp-text);
}

[data-theme="dark"] .mc_alert_body_table th {
    background: var(--mp-table-header-bg, var(--mp-surface));
    color: var(--mp-table-header-text, var(--mp-text));
}

/* Odd rows have no explicit background in CustomMP.css; paint them to the
   base table surface so they don't fall through to the surrounding
   .mc_alert_body color (#22313f) and visually merge with the even zebra. */
[data-theme="dark"] .mc_alert_body_table tbody tr td {
    background: var(--mp-table-bg, var(--mp-surface));
}

[data-theme="dark"] .mc_alert_body_table tbody tr:nth-child(even) td {
    background: var(--mp-table-bg-alt, var(--mp-surface-alt));
}

[data-theme="dark"] .mc_alert_chain_link_row {
    border-top-color: var(--mp-border);
}

[data-theme="dark"] .mc_alert_chain_link,
[data-theme="dark"] .mc_alert_upgrade_cta .mc_alert_upgrade_link {
    color: var(--mp-accent);
}

[data-theme="dark"] .mc_alert_upgrade_cta {
    background: var(--mp-surface);
    border-top-color: var(--mp-border);
    color: var(--mp-text);
}

[data-theme="dark"] .blur-symbol {
    color: var(--mp-text);
}

[data-theme="dark"] .mc_alerts_load_more_btn {
    background: var(--mp-surface-alt);
    border-color: var(--mp-accent);
    color: var(--mp-accent);
}

    [data-theme="dark"] .mc_alerts_load_more_btn:hover {
        background: var(--mp-accent);
        color: var(--mp-accent-contrast);
    }

/*
   Links. CustomMP.css:33-38 sets a.mplink, a.mplink_external to #002eb8
   !important — deep blue, near-invisible on dark navy. Hover bg is #fcf8b5
   light cream. Used on every table cell link site-wide; here we re-color
   only when the homepage is in dark mode.
*/
[data-theme="dark"] a.mplink,
[data-theme="dark"] a.mplink_external,
[data-theme="dark"] a.mplink_selectedval {
    color: var(--mp-accent) !important;
}

    [data-theme="dark"] a.mplink:hover,
    [data-theme="dark"] a.mplink_external:hover {
        background-color: var(--mp-surface-alt);
    }

    [data-theme="dark"] a.mplink:active,
    [data-theme="dark"] a.mplink_external:active {
        color: var(--mp-neg) !important;
        background-color: var(--mp-surface-alt);
    }

/*
   Unstyled <a> inside homepage main content (e.g. article-title links in cards,
   read-more links). Browser default blue (#0000EE) is also unreadable on dark.
   Lower specificity than the more-targeted heading/card rules above so those win.
*/
[data-theme="dark"] .main-content a,
[data-theme="dark"] .main-content .s-card a,
[data-theme="dark"] .hp_sidebar a {
    color: var(--mp-accent);
}

/* Sidebar card surface */
[data-theme="dark"] .main-container .hp_sidebar {
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow);
}

/* Sections & cards inside the homepage */
[data-theme="dark"] .section {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
    box-shadow: var(--mp-shadow);
    color: var(--mp-text);
}

[data-theme="dark"] .s-card {
    background: var(--mp-surface-alt);
    border-color: var(--mp-border);
    box-shadow: var(--mp-shadow);
    color: var(--mp-text);
}

    [data-theme="dark"] .s-card p {
        color: var(--mp-text-muted);
    }

[data-theme="dark"] .main-container .section .article-flex-container .s-card:first-child {
    background-color: var(--mp-surface-alt);
}

/* Headings & links inside cards/sections */
[data-theme="dark"] .main-container .s-card h4,
[data-theme="dark"] .main-container .section h3,
[data-theme="dark"] .main-container .s-card h4 > a,
[data-theme="dark"] .main-container .section h3 > a {
    color: var(--mp-accent);
}

    [data-theme="dark"] .main-container .s-card h4 > a:hover,
    [data-theme="dark"] .main-container .section h3 > a:hover {
        color: var(--mp-neg);
    }

[data-theme="dark"] .main-container .s-card table:not(.mp_lightborder):not(.dataTable) > thead > tr > th {
    color: var(--mp-text);
}

/* Featured article (right panel light gradient → dark surface) */
[data-theme="dark"] .featured-right {
    background: linear-gradient(to bottom left, var(--mp-accent-soft), var(--mp-surface));
}

/* .featured-left already uses #007d84 teal with white text — works in dark too,
   but tone it down slightly so it doesn't dominate the page. */
[data-theme="dark"] .featured-left {
    background-color: var(--mp-accent-soft);
}

    [data-theme="dark"] .featured-left .read-more {
        background-color: var(--mp-surface);
        color: var(--mp-text);
    }

/* Top button grid */
[data-theme="dark"] .button-grid a {
    background-color: var(--mp-surface);
    color: var(--mp-accent);
    border-color: var(--mp-accent);
    box-shadow: var(--mp-shadow-soft);
}

    /* The quick-link anchors have no class, so the bare-anchor rule further down
       ([data-theme="dark"] #full-site-body a:not([class]):not([style*="color"]):link / :visited,
       specificity 1,4,1) outranked a plain `.button-grid a:hover` (0,3,1) and kept the text teal
       on the teal hover fill - icon and label disappeared. The #full-site-body selectors are 1,5,1,
       so they win regardless of source order. */
    [data-theme="dark"] .button-grid a:hover,
    [data-theme="dark"] #full-site-body .button-grid a:not([class]):hover:link,
    [data-theme="dark"] #full-site-body .button-grid a:not([class]):hover:visited {
        background-color: var(--mp-accent);
        color: var(--mp-accent-contrast);
    }

/* Market alerts table */
[data-theme="dark"] .main-container .market-alerts-table th,
[data-theme="dark"] .main-container .market-alerts-table td {
    border-bottom-color: var(--mp-border);
    color: var(--mp-text);
}

    [data-theme="dark"] .main-container .market-alerts-table td ._timecol {
        color: var(--mp-text-muted);
    }

[data-theme="dark"] .main-container .market-alerts-table tbody > tr:hover > td,
[data-theme="dark"] .main-container .market-alerts-table tbody > tr:hover > th {
    background-color: var(--mp-surface-alt);
}

/*
   ============================================================
   Table dark-mode overrides — site-wide.

   Strategy:
   - mpTables_v2.css rules whose original color matches a canonical light
     value (white base, #eaf5f7 zebra, #a9e2ff hover, #134166 header,
     #e6e6e6 border) were refactored in-place to use var(--mp-table-*,
     <original>). Those flip automatically when the dark vars are set.
   - Rules with non-canonical light colors (sub_heading #c9c9c9, tfoot
     lightgrey, body-divider #c0e5f2, simple_noborder hover #fbe8c1, etc.)
     stay hard-coded in mpTables_v2.css and are flipped here under
     [data-theme="dark"] selectors so light mode is untouched.
   - The vendor stylesheet (datatables-1.11.5.css, CDN-loaded) is NOT
     edited. All DataTables dark behavior lives in this block.
   - darkBackgroundStyles_v2.css (the .drk-bkgr opt-in system) is
     deliberately untouched. Its selectors are class-based; ours are
     attribute-based; both go dark, and source order (vendor bundle
     loads AFTER themeVariables.css) means .drk-bkgr wins specificity
     ties on opted-in elements — exactly what those 18 view callers
     expect.
   ============================================================
*/

/* ----- mpTables_v2.css residual hard-coded rules ----- */

/* .mp_lightborder sub_heading (#c9c9c9 light gray) */
[data-theme="dark"] table.mp_lightborder > thead > tr.sub_heading > th,
[data-theme="dark"] table.mp_lightborder > thead > tr > th.sub_heading,
[data-theme="dark"] table.mp_lightborder > tbody > tr.sub_heading > th,
[data-theme="dark"] table.mp_lightborder > tbody > tr > th.sub_heading {
    background-color: var(--mp-surface-alt);
    color: var(--mp-table-text, var(--mp-text));
}

/* .th-look / .sublbl (#c9c9c9) */
[data-theme="dark"] table.mp_lightborder > tbody > tr > td.th-look,
[data-theme="dark"] table.mp_lightborder > tbody > tr > td.sublbl {
    background-color: var(--mp-surface-alt);
    color: var(--mp-table-text, var(--mp-text));
}

/* .mp_lightborder tfoot (lightgrey) */
[data-theme="dark"] table.mp_lightborder > tfoot,
[data-theme="dark"] table.mp_lightborder > tfoot > tr > * {
    background: var(--mp-surface-alt);
    color: var(--mp-table-text, var(--mp-text));
}

/* .body-divider / ._avgMarker (#c0e5f2 light blue) */
[data-theme="dark"] table.mp_lightborder > tbody > tr > td.body-divider,
[data-theme="dark"] table.mp_lightborder > tbody > tr._avgMarker > td {
    background-color: var(--mp-surface-alt);
    color: var(--mp-table-text, var(--mp-text));
}

/* .strike_popup_table sub_heading (lightgrey) and border */
[data-theme="dark"] table.strike_popup_table {
    border-color: var(--mp-table-border, var(--mp-border));
}

    [data-theme="dark"] table.strike_popup_table > thead > tr.sub_heading > th {
        background-color: var(--mp-surface-alt);
        color: var(--mp-table-text, var(--mp-text));
    }

/* .simple_noborder hover (#fbe8c1) and thead color */
[data-theme="dark"] table.simple_noborder > thead > tr {
    color: var(--mp-table-text, var(--mp-text));
}

    [data-theme="dark"] table.simple_noborder > thead > tr > th {
        border-bottom-color: var(--mp-table-border, var(--mp-border));
    }

[data-theme="dark"] table.simple_noborder:not(._nohover) > tbody > tr:hover,
[data-theme="dark"] table.simple_noborder:not(._nohover) > tbody > tr:hover > * {
    background-color: var(--mp-table-row-hover, #fbe8c1);
}

/* mpTables_v2.css:3 #full-site-body .dataTables_wrapper { #e0e0e0 } */
[data-theme="dark"] #full-site-body .dataTables_wrapper {
    background-color: var(--mp-table-bg, var(--mp-surface));
    color: var(--mp-table-text, var(--mp-text));
}

    /* mpTables_v2.css:13 .dataTables_length/_filter/_info/_processing/_paginate color #252525 */
    [data-theme="dark"] #full-site-body .dataTables_wrapper .dataTables_length,
    [data-theme="dark"] #full-site-body .dataTables_wrapper .dataTables_filter,
    [data-theme="dark"] #full-site-body .dataTables_wrapper .dataTables_info,
    [data-theme="dark"] #full-site-body .dataTables_wrapper .dataTables_processing,
    [data-theme="dark"] #full-site-body .dataTables_wrapper .dataTables_paginate {
        color: var(--mp-table-text, var(--mp-text));
    }

/* ----- DataTables vendor (datatables-1.11.5.css) overrides ----- */
/*
   The vendor stylesheet is generic; we don't edit it. These selectors mirror
   the vendor's own selectors so specificity matches (vendor's rules win their
   light defaults; ours win under [data-theme="dark"]).
*/

/* Wrapper + chrome */
[data-theme="dark"] .dataTables_wrapper {
    color: var(--mp-table-text, var(--mp-text));
}

    [data-theme="dark"] .dataTables_wrapper .dataTables_length,
    [data-theme="dark"] .dataTables_wrapper .dataTables_filter,
    [data-theme="dark"] .dataTables_wrapper .dataTables_info,
    [data-theme="dark"] .dataTables_wrapper .dataTables_processing,
    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
        color: var(--mp-table-text, var(--mp-text));
    }

/* Header */
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
    background-color: var(--mp-table-bg, var(--mp-surface));
    color: var(--mp-table-text, var(--mp-text));
    border-bottom-color: var(--mp-table-border, var(--mp-border));
}

/* Sort indicator cells (DataTables renders these with a sort_*.png bg-image
   on a transparent background; the image stays visible on dark) */
[data-theme="dark"] table.dataTable thead .sorting,
[data-theme="dark"] table.dataTable thead .sorting_asc,
[data-theme="dark"] table.dataTable thead .sorting_desc {
    background-color: var(--mp-table-bg, var(--mp-surface));
}

/* Body — row defaults + zebra (.dataTable.stripe + .row-border etc.) */
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] table.dataTable tbody th {
    background-color: var(--mp-table-bg, var(--mp-surface));
    color: var(--mp-table-text, var(--mp-text));
    border-color: var(--mp-table-border, var(--mp-border));
}

[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-theme="dark"] table.dataTable.display tbody tr.odd {
    background-color: var(--mp-table-bg, var(--mp-surface));
}

[data-theme="dark"] table.dataTable.stripe tbody tr.even,
[data-theme="dark"] table.dataTable.display tbody tr.even {
    background-color: var(--mp-table-bg-alt, var(--mp-surface-alt));
}

/* Order-column tint: DataTables shades the sorted column slightly */
[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_1,
[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_2,
[data-theme="dark"] table.dataTable.order-column tbody tr > .sorting_3,
[data-theme="dark"] table.dataTable.display tbody tr > .sorting_1,
[data-theme="dark"] table.dataTable.display tbody tr > .sorting_2,
[data-theme="dark"] table.dataTable.display tbody tr > .sorting_3 {
    background-color: var(--mp-table-bg-alt, var(--mp-surface-alt));
}

[data-theme="dark"] table.dataTable.display tbody tr.odd > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: var(--mp-table-bg-alt, var(--mp-surface-alt));
}

[data-theme="dark"] table.dataTable.display tbody tr.even > .sorting_1,
[data-theme="dark"] table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: var(--mp-table-row-hover, var(--mp-surface-alt));
}

/* Row hover */
[data-theme="dark"] table.dataTable.hover tbody tr:hover,
[data-theme="dark"] table.dataTable.display tbody tr:hover,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > .sorting_1,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > .sorting_2,
[data-theme="dark"] table.dataTable.hover tbody tr:hover > .sorting_3,
[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_1,
[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_2,
[data-theme="dark"] table.dataTable.display tbody tr:hover > .sorting_3 {
    background-color: var(--mp-table-row-hover, var(--mp-surface-alt));
}

/* Search input */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_filter input[type="search"] {
    background-color: var(--mp-table-bg-alt, var(--mp-surface-alt));
    color: var(--mp-table-text, var(--mp-text));
    border: 1px solid var(--mp-table-border, var(--mp-border));
}

/* Length select */
[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_length select {
    background-color: var(--mp-table-bg-alt, var(--mp-surface-alt));
    color: var(--mp-table-text, var(--mp-text));
    border: 1px solid var(--mp-table-border, var(--mp-border));
}

/* Paginate buttons — vendor uses gradient + colored borders, hence !important */
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    color: var(--mp-table-text, var(--mp-text)) !important;
    border-color: var(--mp-table-border, var(--mp-border)) !important;
}

    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--mp-table-row-hover, var(--mp-surface-alt)) !important;
        color: var(--mp-table-text, var(--mp-text)) !important;
        border-color: var(--mp-table-border, var(--mp-border)) !important;
    }

    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--mp-accent) !important;
        color: var(--mp-accent-contrast) !important;
        border-color: var(--mp-accent) !important;
    }

    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        background: transparent !important;
        color: var(--mp-text-muted) !important;
        border-color: var(--mp-table-border, var(--mp-border)) !important;
        cursor: default;
    }

/* Symbol pill links inside .-home-pr-item */
[data-theme="dark"] .main-container .hp_sidebar .-home-pr-item span.-top a.-sym,
[data-theme="dark"] .main-container .-home-pr-item span.-top a.-sym {
    color: var(--mp-text);
}

    [data-theme="dark"] .main-container .hp_sidebar .-home-pr-item span.-top a.-sym:hover,
    [data-theme="dark"] .main-container .-home-pr-item span.-top a.-sym:hover {
        color: var(--mp-accent);
    }

/* The featured article's symbol pill keeps its light background (inline #f2f2f2 in Home/Index), so the symbol
   stays dark on it - the light text above made it unreadable (2026-10-07). */
[data-theme="dark"] .main-container .featured-article .-home-pr-item span.-top a.-sym {
    color: #072131;
}

    [data-theme="dark"] .main-container .featured-article .-home-pr-item span.-top a.-sym:hover {
        color: #0d3c59;
    }

    /* ... and the change beside it uses the light theme's red / green, not the pale dark-mode ones. */
    [data-theme="dark"] .main-container .featured-article .-home-pr-item span.-top .num_neg {
        color: #c62828;
    }

    [data-theme="dark"] .main-container .featured-article .-home-pr-item span.-top .num_pos {
        color: #0a7d2e;
    }

/* Top Gainers / Top Decliners rows: the symbol, arrow and change are one link carrying num_pos / num_neg. The dark
   link color was winning over those classes, so every row read teal instead of green / red (2026-10-07). The
   #full-site-body forms outrank the generic dark anchor rules whatever their order. */
[data-theme="dark"] .main-container .-home-top-movers .-home-top-mover-item a.num_pos,
[data-theme="dark"] #full-site-body .main-container .-home-top-movers .-home-top-mover-item a.num_pos:link,
[data-theme="dark"] #full-site-body .main-container .-home-top-movers .-home-top-mover-item a.num_pos:visited {
    color: #4ade80;
}

[data-theme="dark"] .main-container .-home-top-movers .-home-top-mover-item a.num_neg,
[data-theme="dark"] #full-site-body .main-container .-home-top-movers .-home-top-mover-item a.num_neg:link,
[data-theme="dark"] #full-site-body .main-container .-home-top-movers .-home-top-mover-item a.num_neg:visited {
    color: #f87171;
}

/* Top movers section in sidebar */
[data-theme="dark"] .main-container .-home-top-movers h5 {
    color: var(--mp-text);
}

[data-theme="dark"] .main-container .-home-top-movers .-home-mover-item-stockname {
    color: var(--mp-text-muted);
}

/* Free trial CTA */
[data-theme="dark"] .main-container button.-home-free-trial {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-accent);
    border-color: var(--mp-accent);
}

/* Footer */
[data-theme="dark"] .footer {
    background-color: var(--mp-surface);
    color: var(--mp-text-muted);
    border-top-color: var(--mp-border);
}

/* Nav (top of newhomePageStyle.css) */
[data-theme="dark"] nav a,
[data-theme="dark"] .nav_menu a {
    color: var(--mp-text);
}

[data-theme="dark"] .sub_menu {
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow);
}

    [data-theme="dark"] .sub_menu a {
        color: var(--mp-text);
    }

        [data-theme="dark"] .sub_menu a:hover {
            background-color: var(--mp-surface-alt);
        }

[data-theme="dark"] nav .dropdown-panel {
    background-color: var(--mp-surface);
    border-top-color: var(--mp-accent);
    box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .dropdown-column a,
[data-theme="dark"] .dropdown-column p {
    color: var(--mp-text);
}

    [data-theme="dark"] .dropdown-column a:hover {
        color: var(--mp-accent);
    }

[data-theme="dark"] .dropdown-column h5 {
    color: var(--mp-accent);
    border-bottom-color: var(--mp-border);
}

[data-theme="dark"] .dropdown-column h3 {
    color: var(--mp-accent);
}

/*
   ============================================================
   BULK AUDIT overrides — 2026-08 static-analysis pass.

   Rules discovered by scanning every .css under Content/mpCss and every
   .cshtml/.vbhtml under Views for unthemed dark text and light backgrounds.
   The inline-style block below uses attribute selectors so ONE rule covers
   hundreds of hard-coded style="color: …" attributes across the codebase
   without touching the view files. Legend/swatch pairs (color + background
   both set to the same hex) are excluded via :not([style*="background"]).
   ============================================================
*/

/* --- Inline color overrides: dark hex → text/accent tokens.
   Anchor tags EXCLUDED via `:not(a)` so more-specific anchor rules below
   (e.g. Login on light-teal panel) can win. Anchors get their own separate
   dark-mode override further down. --- */
[data-theme="dark"] #full-site-body [style*="color: black"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color:black"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color: #000"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color:#000"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color: #111"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color: #222"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color: #333"]:not([style*="background"]):not([style*="background-color"]):not(a),
[data-theme="dark"] #full-site-body [style*="color:#333"]:not([style*="background"]):not([style*="background-color"]):not(a) {
    color: var(--mp-text) !important;
}

/* Bare anchor with inline `style="color: black"` or similar dark hex — needs
   to still work when NOT inside a light-bg container. Handled by the earlier
   generic anchor rule (`#full-site-body a:not([class]):not([style*="color"])`)
   for classless anchors; for INLINE-color anchors we handle in the specific
   panel rules (`.prem-or-reg-notice a`, `[style*="background: #d8e9e7"] a`, etc.) */

[data-theme="dark"] #full-site-body [style*="color: #444"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #555"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color:#555"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #666"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color:#666"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #3b3b3b"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color:#3b3b3b"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #494848"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #232426"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-text-muted) !important;
}

/* Additional dark greys picked up on second-pass audit */
[data-theme="dark"] #full-site-body [style*="color: #262626"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #3e3e3e"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #404040"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #4a4949"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-text-muted) !important;
}

/* Navy-blue text used inline for headings/links — invisible on dark navy bg */
[data-theme="dark"] #full-site-body [style*="color: #214898"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #000033"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #1F3A47"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color:#14293e"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #14293e"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-accent) !important;
}

/* Additional dark-green pos accents */
[data-theme="dark"] #full-site-body [style*="color: #0a7d2e"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #338533"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: green"]:not([style*="background"]):not([style*="background-color"]):not([style*="darkgreen"]),
[data-theme="dark"] #full-site-body [style*="color:green"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-pos) !important;
}

/* HTML color name "red" used inline for neg change */
[data-theme="dark"] #full-site-body [style*="color: red"]:not([style*="background"]):not([style*="background-color"]):not([style*="darkred"]),
[data-theme="dark"] #full-site-body [style*="color:red"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-neg) !important;
}

/* Brand teal, standard link blue, and dark heading purples that go invisible on dark navy */
[data-theme="dark"] #full-site-body [style*="color: #007d84"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color:#007d84"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #0285e0"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #2f1188"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #245730"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-accent) !important;
}

/* Dark green num_pos used inline — lift to positive semantic token */
[data-theme="dark"] #full-site-body [style*="color: #006e00"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color: #146c1b"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-pos) !important;
}

/* --- Inline background overrides: white/near-white containers --- */
[data-theme="dark"] #full-site-body [style*="background: white"],
[data-theme="dark"] #full-site-body [style*="background-color: white"],
[data-theme="dark"] #full-site-body [style*="background:#fff"],
[data-theme="dark"] #full-site-body [style*="background: #fff"],
[data-theme="dark"] #full-site-body [style*="background-color:#fff"],
[data-theme="dark"] #full-site-body [style*="background-color: #fff"] {
    background-color: var(--mp-surface) !important;
}

/* --- premiumStyles.css / prem-*: subscription / paywall chrome --- */
[data-theme="dark"] .mc-font,
[data-theme="dark"] .prem-sub-name,
[data-theme="dark"] #premsplash_outer a:not(.mplink),
[data-theme="dark"] #premsplash_outer a:not(.mplink):hover,
[data-theme="dark"] .subscribe-outer a:not(.tablink_item),
[data-theme="dark"] .subscribe-outer a:not(.tablink_item):hover,
[data-theme="dark"] .subscribe-outer .subscribe-control-group .subscribe-control-basic {
    color: var(--mp-text);
}

    [data-theme="dark"] .register_overlay_inner {
        background-color: var(--mp-surface);
        color: var(--mp-text);
    }

/* --- mpMontage.css: montage cells that still render light --- */
[data-theme="dark"] #montage_container_message {
    background-color: var(--mp-surface);
    color: var(--mp-text);
}

/* .pricecell (Bid/Ask) and .volcell (Bid IV/Ask IV) on the Option Chain
   `.montage_table` intentionally use the yellow/green-on-dark palette in BOTH
   light and dark modes — the base rules in mpMontage.css:132-142 set
   `background: #18181b` + `color: #ffe14d` (pricecell) / `#1ec889` (volcell).
   Earlier dark override rewrote those to --mp-text — reverted so the columns
   read consistently across themes. */

/* .descriptorcell (base bg #999999 + text #0047A3) and .indicatorcell
   (base bg #CCCCCC + text black) — legible in light mode. In dark mode
   the earlier version of this rule set text to --mp-text (light) but left
   the light-grey backgrounds intact → light text on light bg = illegible.
   Override BOTH so text and background stay contrasting on the strike table
   (`#open_interest_trends_strike_tbl` and any other .montage_table view). */
[data-theme="dark"] table.montage_table > tbody > tr > td.descriptorcell,
[data-theme="dark"] td.descriptorcell,
[data-theme="dark"] table.montage_table > tbody > tr > td.indicatorcell,
[data-theme="dark"] .montage_table td.indicatorcell {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

    [data-theme="dark"] table.montage_table > tbody > tr > td.descriptorcell .montagelink,
    [data-theme="dark"] td.descriptorcell .montagelink {
        color: var(--mp-accent) !important;
    }

/*
   Indicator hot-button strike highlight: montagePage.js:2774 sets an inline
   background-color:orange on the target td.descriptorcell when a hot button
   in #indicator_selector_tbl is clicked (Spot Price / 1SD / Most Active /
   MAs / High-Low / Avg Up-Down). Inline styles lose to the !important rule
   above (:2091), so the highlight vanishes in dark mode. Re-assert with
   higher-specificity + !important, remapping the raw orange onto the brand
   accent (bright teal) - warm-amber was distinctive but clashed with the
   .montagelink child's aqua accent text, leaving the strike number barely
   legible. Bright-teal bg + forced dark text + child-link override gives
   full legibility while still popping against the dark base cells.
   Selector shape ([style*="orange"]) matches the sibling hot-button rule at
   [data-theme="dark"] #indicator_selector_tbl > tbody > tr > td[style*="orange"]
   elsewhere in this file. Light mode is unaffected.
*/
[data-theme="dark"] table.montage_table > tbody > tr > td.descriptorcell[style*="orange"],
[data-theme="dark"] td.descriptorcell[style*="orange"] {
    background-color: var(--mp-accent) !important;
    color: var(--mp-text-inverse) !important;
}
[data-theme="dark"] table.montage_table > tbody > tr > td.descriptorcell[style*="orange"] .montagelink,
[data-theme="dark"] td.descriptorcell[style*="orange"] .montagelink {
    color: var(--mp-text-inverse) !important;
}

/* Sibling montage cells with hard-coded light-green (.oc_indicatorcell) also
   need contrast rebalanced. */
[data-theme="dark"] table.montage_table > tbody > tr > td.oc_indicatorcell,
[data-theme="dark"] .montage_table td.oc_indicatorcell {
    background-color: #1e5a1e !important;
    color: var(--mp-text) !important;
}

[data-theme="dark"] .montage_expsel_h_container > .montage_expsel_h_choices > div:hover,
[data-theme="dark"] .montage_expsel_h_container > .montage_expsel_h_choices > div._sel {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

/* --- CustomMP.css: IV rank badges, general s-link, aclick buttons --- */
[data-theme="dark"] .iv_rank_na,
[data-theme="dark"] .iv_rank_subdued {
    color: var(--mp-text-muted);
}

[data-theme="dark"] a.s-link,
[data-theme="dark"] a.s-link:hover,
[data-theme="dark"] a.s-link:active {
    color: var(--mp-accent);
}

[data-theme="dark"] button.aclick {
    color: var(--mp-accent);
    background-color: transparent;
}

/* --- homePageStyle.css residual (newhomePageStyle.css is the primary) --- */
[data-theme="dark"] #hp_dash_outer .site_content_container {
    background-color: var(--mp-bg);
    color: var(--mp-text);
}

[data-theme="dark"] div.homepage_bar_divider {
    background-color: var(--mp-border);
}

/* --- ideaAlertStyles.css: alert-details headlines and section headings --- */
[data-theme="dark"] #idea-alert-details-outer,
[data-theme="dark"] .idea-alert-details-item .idea-alert-details-headline,
[data-theme="dark"] .idea-alert-details-item .-subhead,
[data-theme="dark"] .site-blog .post.idea-alert-details-item .-section-heading {
    color: var(--mp-text);
}

/* --- BlogStyles.css: blog surfaces used in editorial pages --- */
[data-theme="dark"] .site-blog .post,
[data-theme="dark"] .site-blog .post .post-body,
[data-theme="dark"] .site-blog .post .post-footer,
[data-theme="dark"] .site-blog .widget,
[data-theme="dark"] .site-blog .widget .widget-header,
[data-theme="dark"] .well-global,
[data-theme="dark"] #trackbacks,
[data-theme="dark"] .page-global {
    background-color: var(--mp-surface);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

    [data-theme="dark"] .site-blog .post blockquote {
        background-color: var(--mp-surface-alt);
        color: var(--mp-text);
        border-left-color: var(--mp-accent);
    }

    [data-theme="dark"] .site-blog .comment-item .comment-content.self,
    [data-theme="dark"] .site-blog .comment-form .comment-menu .btn,
    [data-theme="dark"] .site-blog #comment-form .success {
        background-color: var(--mp-surface-alt);
        color: var(--mp-text);
    }

/* --- earnReportsStyles.css / equityReportsStyle.css: chart-frame backgrounds --- */
[data-theme="dark"] #market_etf_rpt #market_etf_opt_chart,
[data-theme="dark"] #market_etf_rpt #market_etf_px_chart {
    background-color: var(--mp-chart-bg);
}

/* --- optionReportsStyle.css: r-block heads --- */
[data-theme="dark"] .r-block > ._head,
[data-theme="dark"] .r-block-joiner > ._head {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

/* --- optionTradesChartingStyle.css --- */
[data-theme="dark"] #option-trades-charting-title {
    color: var(--mp-text);
}

/* --- OptionScreenerStyle.css residual (screener chrome/scrollbars) --- */
[data-theme="dark"] button.screener-btn {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

[data-theme="dark"] a.screener_link_dark:hover {
    color: var(--mp-accent);
}

[data-theme="dark"] .opt_trade_screener_scroll_bars {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
}

[data-theme="dark"] .opt_trade_screener_outer table:not(.trade_alert_details),
[data-theme="dark"] .opt_trade_screener_outer table.dataTable:not(.trade_alert_details) {
    color: var(--mp-text);
    background-color: var(--mp-table-bg, transparent);
}

/* --- adStyles.css: featured-article surfaces (used across landing pages) --- */
[data-theme="dark"] .featured-article-single,
[data-theme="dark"] .featured-article-multi,
[data-theme="dark"] .featured-article-sidebar {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
}

[data-theme="dark"] .featured-article-single .featured-article-tag,
[data-theme="dark"] .featured-article-multi .featured-article-tag,
[data-theme="dark"] .featured-article-sidebar .featured-article-tag {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .featured-article-single .featured-article-headline,
[data-theme="dark"] .featured-article-multi .featured-article-headline,
[data-theme="dark"] .featured-article-sidebar .featured-article-headline {
    color: var(--mp-text);
}

[data-theme="dark"] .register-splash-banner > a div > p._simple,
[data-theme="dark"] .register-splash-banner > a div > p._bold,
[data-theme="dark"] .premium-splash-banner > a div > p._simple {
    color: var(--mp-text);
}

/* --- symVwapStyles.css: hard-coded color: black on session-summary insights paragraph --- */
[data-theme="dark"] #vwap_frame .vwap-hl-insights {
    color: var(--mp-text);
}

/* --- Volume Breakdown History and other Price Action page headers --- */
[data-theme="dark"] .pitchhead,
[data-theme="dark"] .pitchsubhead,
[data-theme="dark"] .sym_sub_heading {
    color: var(--mp-text);
}

/* --- num_pos / num_neg site-wide dark override.
   Base .num_pos is #006e00 (contrast ~2.7 on --mp-bg) and .num_neg is #e60000.
   Lift both to brighter WCAG-passing variants in dark mode. --- */
[data-theme="dark"] .num_pos,
[data-theme="dark"] td.num_pos,
[data-theme="dark"] span.num_pos,
[data-theme="dark"] .datahl.num_pos {
    color: #4ade80;
}

[data-theme="dark"] .num_neg,
[data-theme="dark"] td.num_neg,
[data-theme="dark"] span.num_neg,
[data-theme="dark"] .datahl.num_neg {
    color: #f87171;
}

/*
   symov_stat_tbl return-column color coding: cells rendered as
   <td class="datatag num_pos"> or <td class="datatag num_neg"> (e.g. the
   Performance Comparison table's INTC Return / SPY Return columns at
   Views/symbols/SymbolSummaryPerformanceComparison.cshtml). In dark mode
   the scoped .datatag rule above (:822) has higher specificity (0,1,2,3)
   than the site-wide .num_pos/.num_neg overrides (:2277-2287, 0,1,1,1),
   so the semantic color loses and the number reads as plain --mp-text
   near-white. Match the .datatag rule's shape so specificity ties and
   source order (defined later) wins for the semantic color.
*/
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.datatag.num_pos {
    color: #4ade80 !important;
}
[data-theme="dark"] table.symov_stat_tbl > tbody > tr > td.datatag.num_neg {
    color: #f87171 !important;
}

/* --- Premium-only teaser overlay: lightblue bg + inherited light text = illegible in dark mode.
   Also .prem-or-reg-notice uses a light teal bg. Flip both to surface tokens. --- */
[data-theme="dark"] .prem_only_overlay {
    background-color: var(--mp-surface);
    border-color: var(--mp-border);
    color: var(--mp-text);
}

    [data-theme="dark"] .prem_only_overlay > p {
        color: var(--mp-text);
    }

        [data-theme="dark"] .prem_only_overlay > p > a {
            color: var(--mp-accent);
        }

/* --- OptionOrderSentiment & sibling sentiment views: card/panel visual separation.
   The .sent_sub_block uses a dark drop-shadow for elevation in light mode — invisible
   against the dark bg. Give each block a subtle border + soften the shadow so the
   card structure survives dark mode. Applies site-wide anywhere these classes appear. --- */
[data-theme="dark"] .sent_sub_block,
[data-theme="dark"] .sentiment_container_div > .sent_sub_block {
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

    [data-theme="dark"] .sent_sub_block > p:first-child {
        border-bottom-color: var(--mp-border);
    }

[data-theme="dark"] .sentiment_header_main {
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
}

/* --- Broad "box border in dark mode" pass.
   Many section-like containers rely on box-shadow for elevation. Shadows between two
   dark surfaces don't render visibly, so cards lose their outline. Add a hairline
   border wherever these class patterns show up. --- */
[data-theme="dark"] .s-card,
[data-theme="dark"] .mc-card,
[data-theme="dark"] .info-panel,
[data-theme="dark"] .dashboard-panel,
[data-theme="dark"] .hp_section,
[data-theme="dark"] .side_by_side_report_left,
[data-theme="dark"] .side_by_side_report_right,
[data-theme="dark"] .vwap-highlights-dashboard-outer,
[data-theme="dark"] .fund-dash-value-item {
    border: 1px solid var(--mp-border);
}

/*
   ============================================================
   Wider-sweep audit findings (2026-08). Each block was surfaced
   by the browser audit script and covers a recurring pattern
   that shows up on multiple pages.
   ============================================================
*/

/* Trade-idea "vs" badge: white text on bright teal (#0fbcca) reads 2.3.
   Flip to dark text so it stays crisp on the teal chip. */
[data-theme="dark"] .ti-list-item-vs {
    color: var(--mp-text-inverse, #141a24);
}

/* Trade-idea inline `style="color: #ff1e1e"` [Debit] / [Credit] tags.
   Base color is too dark against the card's dark grey inner bg. */
[data-theme="dark"] #full-site-body [style*="color: #ff1e1e"]:not([style*="background"]):not([style*="background-color"]),
[data-theme="dark"] #full-site-body [style*="color:#ff1e1e"]:not([style*="background"]):not([style*="background-color"]) {
    color: var(--mp-neg) !important;
}

/* Bare <a> without a class or inline color uses browser default #0000EE.
   Route it through --mp-accent site-wide. Scoped to #full-site-body so the
   site header / footer nav (which already has its own colors) is untouched. */
[data-theme="dark"] #full-site-body a:not([class]):not([style*="color"]):link,
[data-theme="dark"] #full-site-body a:not([class]):not([style*="color"]):visited {
    color: var(--mp-accent);
}

/* Screener filter chrome: `.filter_clear_btn` renders as teal-on-white in dark mode
   because its bg wasn't themed. Also .spr-dialog-link default anchor blue. */
[data-theme="dark"] a.filter_clear_btn,
[data-theme="dark"] a.filter_clear_btn._noprem {
    background-color: var(--mp-surface-alt);
    color: var(--mp-accent);
    border-color: var(--mp-border);
}

[data-theme="dark"] a.spr-dialog-link,
[data-theme="dark"] a.spr-dialog-link._dist {
    color: var(--mp-accent);
}

/* <select> option elements: browsers render options with their own compositor.
   The option list background follows the select's computed background; text
   inherits browser default (#6d6d6d-ish) on dark bg is illegible. */
[data-theme="dark"] select option,
[data-theme="dark"] select option._reset,
[data-theme="dark"] select option._any {
    color: var(--mp-text);
    background-color: var(--mp-surface);
}

/* Non-premium orange notice bar: text color inherits dark-theme --mp-text (light)
   on an orange bg, ratio 2.4 - readable but the internal <a> "Log in" is
   dark-blue on orange (2.7). Both need contrast lift. */
[data-theme="dark"] .non-premium-user-notice {
    color: #141a24;   /* dark text on the orange bg reads best */
}

    [data-theme="dark"] .non-premium-user-notice > a,
    [data-theme="dark"] .non-premium-user-notice a {
        color: #141a24;
        text-decoration: underline;
    }

/* News page: <cite> gets a hard-coded dark teal (#006666). Lift for dark mode. */
[data-theme="dark"] cite {
    color: var(--mp-accent) !important;
}

/* Screener "Stock Ideas" tag: dark red (#a9290a) on dark bg. Lift to bright red. */
[data-theme="dark"] #full-site-body span[style*="color: #a9290a"]:not([style*="background"]),
[data-theme="dark"] #full-site-body span[style*="color:#a9290a"]:not([style*="background"]) {
    color: var(--mp-neg) !important;
}

/* "In My Watchlist" tag: hard-coded dark teal (#006166). */
[data-theme="dark"] #full-site-body p[style*="color: #006166"]:not([style*="background"]) {
    color: var(--mp-accent) !important;
}

/* Login CTA anchors on light-yellow (#f9f2cc) hint boxes.
   In dark mode the teal-on-yellow ratio drops to 2.2; darken the anchor. */
[data-theme="dark"] div[style*="background: #f9f2cc"] a,
[data-theme="dark"] div[style*="background-color: #f9f2cc"] a,
[data-theme="dark"] .free-trial-note a {
    color: #141a24 !important;
}

/* Fair-Value-Price step headers are HAMMERED with inline background: lightgray + light text.
   Force darker bg so any inherited light text stays visible. */
[data-theme="dark"] th[style*="lightgray"],
[data-theme="dark"] span[style*="lightgray"],
[data-theme="dark"] [style*="background: lightgrey"],
[data-theme="dark"] [style*="background-color: lightgrey"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* .selectlabel._o pivot toggle background is `#ff9900` orange; my earlier white-text
   fix on the ._o variant went the wrong way. Use dark text on the orange chip. */
[data-theme="dark"] a.selectlabel._o {
    color: #141a24 !important;
}

/* .symbol_search_btn "+" button (add-to-watchlist) — after my earlier bg->accent swap,
   white "+" reads 2.5 on the accent. Keep bg accent but darken the "+" glyph. */
[data-theme="dark"] div.symbol_search_btn {
    color: var(--mp-bg) !important;
}

/* Non-premium orange notice bar "Log in" anchor was hitting the accent from my
   generic `a:not([class])` rule earlier. It IS classless but is inside
   `.non-premium-user-notice` — override to dark text on orange. */
[data-theme="dark"] .non-premium-user-notice a,
[data-theme="dark"] .non-premium-user-notice a:link,
[data-theme="dark"] .non-premium-user-notice a:visited {
    color: #141a24 !important;
    text-decoration: underline;
}

/* DividendReports: the `<td>` background of `#eaeaea` is set via CSS class, not inline
   style — my previous [style*=] selector missed it. Target the `.announcement_row`
   pattern seen in the dividend-announcements table. */
[data-theme="dark"] table td.announcement_row,
[data-theme="dark"] table tr.announcement_row > td,
[data-theme="dark"] table tr.announcement_row {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* REGISTER FREE CTA with inline `background: orange`.
   Both anchor and inner span are flagged, so darken both. */
[data-theme="dark"] a[style*="orange"],
[data-theme="dark"] a[style*="orange"] span,
[data-theme="dark"] a[style*="#FFA500"],
[data-theme="dark"] a[style*="#ffa500"],
[data-theme="dark"] a[style*="#FFA500"] span,
[data-theme="dark"] a[style*="#ffa500"] span {
    color: #141a24 !important;
}

/* --- Second-pass fixes based on CDP-verified specificity chains --- */

/* Upcoming Earnings Analysis summary heading:
   base rule at `#upearn_outer .upearn_sum_heading > p { color: #19334d; }` (spec 1,2,1).
   Match the same chain + [data-theme=dark] to win (spec 1,3,1). */
[data-theme="dark"] #upearn_outer .upearn_sum_heading > p,
[data-theme="dark"] #upearn_outer .upearn_sum_heading > p > span {
    color: var(--mp-text) !important;
}
    [data-theme="dark"] #upearn_outer .upearn_text_descr {
        color: var(--mp-text) !important;
    }

/* Screener "In My Watchlist" filter label uses `.filter_table_flex .wl_filter > p:first-child { color: #006166; }`.
   Also `.filter_collapse_box table td.wl_filter` uses same dark teal. Both lift to accent. */
[data-theme="dark"] .filter_table_flex .wl_filter > p:first-child,
[data-theme="dark"] .filter_collapse_box table td.wl_filter {
    color: var(--mp-accent) !important;
}

/* .dis-prem-pop premium-locked download tooltip: light-yellow (#f9f2cc) bg with
   a "Login" anchor inside. Flip both. */
[data-theme="dark"] .dis-prem-pop,
[data-theme="dark"] .premerrorbox {
    background-color: var(--mp-surface-alt) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
}

    [data-theme="dark"] .dis-prem-pop > p,
    [data-theme="dark"] .dis-prem-pop a,
    [data-theme="dark"] .dis-prem-pop span,
    [data-theme="dark"] .premerrorbox > p,
    [data-theme="dark"] .premerrorbox a,
    [data-theme="dark"] .premerrorbox span {
        color: var(--mp-text) !important;
    }

    [data-theme="dark"] .dis-prem-pop a:link,
    [data-theme="dark"] .dis-prem-pop a:visited,
    [data-theme="dark"] .premerrorbox a:link,
    [data-theme="dark"] .premerrorbox a:visited {
        color: var(--mp-accent) !important;
    }

/* .btn-subscribe 7-Day Free Trial: dark text (#333) on orange (#c14e0b) gives 2.6.
   Lift to white so the CTA reads on dark orange in both light and dark modes. */
[data-theme="dark"] .btn-subscribe,
[data-theme="dark"] .btn-subscribe > span {
    color: #ffffff !important;
}

/* Fair-Value-Price step-3 header: inline `background: #a9e2ff` (light blue) with
   inherited light text = 1.1. Force darker bg so light text stays visible. */
[data-theme="dark"] th[style*="#a9e2ff"],
[data-theme="dark"] th[style*="#A9E2FF"],
[data-theme="dark"] span[style*="#a9e2ff"],
[data-theme="dark"] span[style*="#A9E2FF"],
[data-theme="dark"] [style*="background: #a9e2ff"],
[data-theme="dark"] [style*="background-color: #a9e2ff"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* .selectlabel base color is black; keep for orange (`._o`) and other light
   category backgrounds. My earlier white-text override on `._o` produced
   white-on-orange (r=2.1). No override needed here — base `color: black` gives
   ~10:1 on the orange/gold/light-blue variants. Purple/red variants use
   different modifier classes and can be addressed separately if flagged. */

/* Calendar_Dividend "REGISTER FREE" CTA has parent `<div style="background: orange">`
   with child anchor `<a style="color:black">`. The inline-color-override earlier in
   this file (specificity 1,3,0 due to #full-site-body + 3 :not(...) attr matchers)
   would otherwise clobber the anchor to --mp-text (light) = white-on-orange.
   Match id + 4 attr matchers on the anchor for (1,4,1), which beats the inline
   override. Also cover the inner `<span>` for the "›" chevron. */
[data-theme="dark"] #full-site-body [style*="background:orange"] a[style*="color"][style*="text-decoration"],
[data-theme="dark"] #full-site-body [style*="background: orange"] a[style*="color"][style*="text-decoration"],
[data-theme="dark"] #full-site-body [style*="background-color:orange"] a[style*="color"][style*="text-decoration"],
[data-theme="dark"] #full-site-body [style*="background-color: orange"] a[style*="color"][style*="text-decoration"],
[data-theme="dark"] #full-site-body [style*="background:orange"] a[style*="color"][style*="text-decoration"] span,
[data-theme="dark"] #full-site-body [style*="background: orange"] a[style*="color"][style*="text-decoration"] span,
[data-theme="dark"] #full-site-body [style*="background-color:orange"] a[style*="color"][style*="text-decoration"] span,
[data-theme="dark"] #full-site-body [style*="background-color: orange"] a[style*="color"][style*="text-decoration"] span {
    color: #141a24 !important;
}

/* DividendReports RecentDividendAnnouncements: date-picker buffer row uses
   `.dateselect_table_buffer_row` with bg #eaeaea (light grey). Override to surface. */
[data-theme="dark"] tr.dateselect_table_buffer_row,
[data-theme="dark"] tr.dateselect_table_buffer_row > td,
[data-theme="dark"] tr.dateselect_table_buffer_row > th {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* --- Third-pass batch (2026-08). User-reported items in one pass. --- */

/* Option-Strategy-Benchmarks Summary page titles + "As of" date.
   `.opt_risk_benchmark_title` = #1a3f4c (dark blue) → invisible on dark navy bg. */
[data-theme="dark"] .opt_risk_benchmark_item .opt_risk_benchmark_title,
[data-theme="dark"] .opt_risk_benchmark_item .opt_risk_benchmark_title > span._t1,
[data-theme="dark"] .opt_risk_benchmark_item .opt_risk_benchmark_title > span._t2 {
    color: var(--mp-text) !important;
}
[data-theme="dark"] .report-as-of-datetime {
    color: var(--mp-text-muted) !important;
}

/* Benchmark payoff-diagram PNGs are drawn on a white background. Invert +
   hue-rotate keeps hues (green profit lines stay green) while flipping the
   white paper to a dark surface. Same trick applied to any other diagram set
   under /Static/BenchmarkDiagrams/. */
[data-theme="dark"] img[src*="/Static/BenchmarkDiagrams/"],
[data-theme="dark"] img[src*="/BenchmarkDiagrams/"] {
    filter: invert(0.92) hue-rotate(180deg);
    background-color: var(--mp-surface);
}

/* RiskProtectionStatistics/PutVolume subtitle: hard-coded #333 in its own
   inline style-less <div>. Class-less; override via id. */
[data-theme="dark"] #option-trades-charting-subtitle {
    color: var(--mp-text) !important;
}

/* EventInsights row: inline `background-color: #eeeeee` on a
   `.flex_container_around.flex_center_vertical` container. Force darker bg. */
[data-theme="dark"] .flex_container_around.flex_center_vertical[style*="background-color: #eeeeee"],
[data-theme="dark"] .flex_container_around.flex_center_vertical[style*="background-color:#eeeeee"],
[data-theme="dark"] .flex_container_around.flex_center_vertical[style*="background: #eeeeee"] {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
}

/* IntradayReturns `#intraday-returns-inputs` and any other `.r-block._filters`
   filter panel: base is `border: 1px solid #72b1b0` on a WHITE bg. Force dark. */
[data-theme="dark"] .r-block._filters,
[data-theme="dark"] #intraday-returns-inputs,
[data-theme="dark"] #intraday-returns-summary,
[data-theme="dark"] #intraday-returns-summary > div,
[data-theme="dark"] #intraday-returns-summary > section {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
}

/* Route-level filter-panel base `.r-block { background:white; ... }` needs same treatment. */
[data-theme="dark"] .r-block {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
}

/*
   ============================================================
   Fourth-pass batch: menu-wide audit (139 URLs) remaining
   findings, grouped by shared pattern.
   ============================================================
*/

/* PeerAnalysis comparison pages (`#analysis_by_peers_tabs`) — dividend, straddle,
   volatility, and closed-end-fund comparisons share this wrapper. Base view sets
   `color: #333` and inline `background: white` on tables + explanatory text.
   Force through the dark tokens. */
[data-theme="dark"] #analysis_by_peers_tabs,
[data-theme="dark"] #analysis_by_peers_tabs td,
[data-theme="dark"] #analysis_by_peers_tabs th,
[data-theme="dark"] #analysis_by_peers_tabs p,
[data-theme="dark"] #analysis_by_peers_tabs label,
[data-theme="dark"] #analysis_by_peers_tabs .report_descr,
[data-theme="dark"] #analysis_by_peers_tabs .report_descr > div {
    color: var(--mp-text) !important;
}

    [data-theme="dark"] #analysis_by_peers_tabs .peer_chart_div {
        background-color: var(--mp-surface);
        border-color: var(--mp-border);
    }

    /* jQuery-UI tab anchors on the comparison pages default to #58 5B 5C on the
       dark bg — 2.5 contrast. Lift both the active-tab and inactive-tab text. */
    [data-theme="dark"] #analysis_by_peers_tabs .ui-tabs-anchor,
    [data-theme="dark"] a.custom-tabs.ui-tabs-anchor,
    [data-theme="dark"] a#ui-id-2.custom-tabs,
    [data-theme="dark"] a#ui-id-3.custom-tabs,
    [data-theme="dark"] a#ui-id-4.custom-tabs,
    [data-theme="dark"] a#ui-id-5.custom-tabs {
        color: var(--mp-text) !important;
    }

/* `.pitch1/.pitch2/.pitch3` info boxes have a wrapper with `background: #e9e9e8`
   in some views (OptionVolumeReport, etc.). Also `.pitchhead` uses hard-coded
   `#00403d`/`#ae2d1e`/`#3f3231`. Give the whole thing surface treatment. */
[data-theme="dark"] .pitch1,
[data-theme="dark"] .pitch2,
[data-theme="dark"] .pitch3 {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text);
}

[data-theme="dark"] h1.pitchhead,
[data-theme="dark"] h2.pitchhead,
[data-theme="dark"] h3.pitchhead,
[data-theme="dark"] h4.pitchhead,
[data-theme="dark"] h5.pitchhead,
[data-theme="dark"] h6.pitchhead {
    color: var(--mp-text) !important;
}

/* Two-way slider "Show Contract / Show Volume" choice labels — base color: black. */
[data-theme="dark"] .two-way-slider-outer span.slider-choice,
[data-theme="dark"] .one-way-slider-outer span.slider-choice {
    color: var(--mp-text) !important;
}

/* DividendReports (REITs/MLPs/CEFs/etc.): th cells with hard-coded `lightblue`
   (`#ADD8E6`) and `lightyellow` (`#FFFFE0`) — light-text-on-light in dark mode.
   These are usually set via inline `style="background: lightblue"` on th. */
[data-theme="dark"] th[style*="lightblue"],
[data-theme="dark"] th[style*="LightBlue"],
[data-theme="dark"] th[style*="#ADD8E6"],
[data-theme="dark"] th[style*="#add8e6"],
[data-theme="dark"] th[style*="lightyellow"],
[data-theme="dark"] th[style*="#FFFFE0"],
[data-theme="dark"] th[style*="#ffffe0"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* SP-500 Volume Burst Trades and similar reports where the entire table has an
   inline `background: white` (not caught by mpTables_v2.css theming because the
   bg is inline, not via `.mp_lightborder` class). */
[data-theme="dark"] table[style*="background:white"],
[data-theme="dark"] table[style*="background: white"],
[data-theme="dark"] table[style*="background-color:white"],
[data-theme="dark"] table[style*="background-color: white"],
[data-theme="dark"] table[style*="background:#fff"],
[data-theme="dark"] table[style*="background: #fff"],
[data-theme="dark"] table[style*="background-color:#fff"],
[data-theme="dark"] table[style*="background-color: #fff"] {
    background-color: var(--mp-table-bg) !important;
}

    [data-theme="dark"] table[style*="background: white"] td,
    [data-theme="dark"] table[style*="background: white"] th,
    [data-theme="dark"] table[style*="background-color: white"] td,
    [data-theme="dark"] table[style*="background-color: white"] th {
        background-color: transparent !important;
        color: var(--mp-text) !important;
    }

/* ExpiringOptionsReport: `.datahl` cells with inline `background: #f1f1a7` / `#ffeeb3`
   (near-yellow highlights). Force dark bg. */
[data-theme="dark"] [style*="background: #f1f1a7"],
[data-theme="dark"] [style*="background:#f1f1a7"],
[data-theme="dark"] [style*="background-color: #f1f1a7"],
[data-theme="dark"] [style*="background: #ffeeb3"],
[data-theme="dark"] [style*="background:#ffeeb3"],
[data-theme="dark"] [style*="background-color: #ffeeb3"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* Subscribe CTA anchor on solid red bg (#ca2020) — teal-on-red is 2.3.
   Force white text — passes on the red at 5.2. */
[data-theme="dark"] a[style*="background: #ca2020"],
[data-theme="dark"] a[style*="background-color: #ca2020"],
[data-theme="dark"] a[style*="background:#ca2020"] {
    color: #ffffff !important;
}

/* Dark-blue "I" annotation in ExpiringOptionsReport (color: #1f4c93). */
[data-theme="dark"] #full-site-body [style*="color: #1f4c93"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color:#1f4c93"]:not([style*="background"]) {
    color: var(--mp-accent) !important;
}

/*
   ============================================================
   Fifth-pass batch: remaining 104 audit findings grouped by pattern.
   ============================================================
*/

/* Login anchor teal-on-lightbg (#d8e9e7) — .prem-or-reg-notice panel across
   many pages. My earlier `.prem-or-reg-notice a` rule targets that class
   explicitly but many callers wrap Login in a non-div (section, p, td, etc.)
   with inline `background: #d8e9e7` OR set the bg via a class. Broaden to
   any tag with the inline color, AND to the "This is a Preview" text. */
[data-theme="dark"] [style*="background: #d8e9e7"] a,
[data-theme="dark"] [style*="background-color: #d8e9e7"] a,
[data-theme="dark"] [style*="background:#d8e9e7"] a,
[data-theme="dark"] [style*="background-color:#d8e9e7"] a,
[data-theme="dark"] [style*="background: #d8e9e7"] p,
[data-theme="dark"] [style*="background-color: #d8e9e7"] p,
[data-theme="dark"] [style*="background: #d8e9e7"] span,
[data-theme="dark"] [style*="background-color: #d8e9e7"] span {
    color: #141a24 !important;
}

/* .bfly-dialog-link (butterfly dialog "Open" link) — no class-based color set,
   so browser default #0000ee wins on dark. Route through accent. */
[data-theme="dark"] a.bfly-dialog-link,
[data-theme="dark"] a.bfly-dialog-link:link,
[data-theme="dark"] a.bfly-dialog-link:visited {
    color: var(--mp-accent) !important;
}

/* Various H1 headings (esp. Reports/FastCashBurnReport) rendering as dark grey.
   `#525252` = rgb(82,82,82). Force through --mp-text. */
[data-theme="dark"] #full-site-body h1,
[data-theme="dark"] #full-site-body h2,
[data-theme="dark"] .site-content-container h1,
[data-theme="dark"] .site-content-container h2 {
    color: var(--mp-text);
}

/* Table headers on solid lightseagreen (#20b2aa) — .fund-dash or peer table
   with light text (#e6eef7) becomes low contrast. Force dark text on the teal. */
[data-theme="dark"] th[style*="lightseagreen"],
[data-theme="dark"] th[style*="#20b2aa"],
[data-theme="dark"] th[style*="#20B2AA"] {
    color: #141a24 !important;
}

/* Calendar earnings "Confirmed Future Earnings" (bg #FFDD99 orange-yellow)
   and "Earnings Today" (bg #9FDFBF light green) — light text on light bg. */
[data-theme="dark"] span.nextEarningsConfirmed,
[data-theme="dark"] span.nextEarningsToday {
    color: #141a24 !important;
}

/* Calendar note icon (i in a circle) — hard-coded darkred on dark bg. */
[data-theme="dark"] span.calendar_note_icon {
    color: var(--mp-neg) !important;
}

/* SVG <text> with fill:#333 on chart bg — some charts render inline text
   nodes not caught by applyChartTheme. Target directly. */
[data-theme="dark"] svg text[fill="#333"],
[data-theme="dark"] svg text[fill="#333333"],
[data-theme="dark"] svg text[fill="rgb(51, 51, 51)"] {
    fill: var(--mp-text) !important;
}

/* "Loading.." spinner text — often rendered on white background before content
   loads. Not truly a dark-mode bug (it's transient) but flip anyway. */
[data-theme="dark"] span:not([class]):not([style])[data-loading],
[data-theme="dark"] #main-content-outer span:only-child {
    color: var(--mp-text-muted);
}

/* Article-listing links on light-grey card bg (#EBEBEB). */
[data-theme="dark"] div[style*="background: #ebebeb"] a,
[data-theme="dark"] div[style*="background-color: #ebebeb"] a,
[data-theme="dark"] div[style*="background: #EBEBEB"] a,
[data-theme="dark"] div[style*="background-color: #EBEBEB"] a,
[data-theme="dark"] .article-item[style*="background"] a {
    color: #141a24 !important;
}

/* NAV Premium/Discount table headers on light-blue-grey (#BCE0EB). */
[data-theme="dark"] th[style*="#bce0eb"],
[data-theme="dark"] th[style*="#BCE0EB"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* Non-premium note "Access Full List of..." (`.premalert._noprem`) — base
   color: black on now-dark bg. Force through --mp-text. */
[data-theme="dark"] p.premalert,
[data-theme="dark"] p.premalert._noprem,
[data-theme="dark"] .premalert,
[data-theme="dark"] .premalert._noprem {
    color: var(--mp-text) !important;
}

/* FastCashBurnReport: "Months to Burnout (Runway)" th on hardcoded lightyellow
   (#FFEFA6). Also covers similar highlight-yellow headers. */
[data-theme="dark"] th[style*="#ffefa6"],
[data-theme="dark"] th[style*="#FFEFA6"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* Trade-idea "-main-section-heading" p color #262626 on dark bg. */
[data-theme="dark"] p.-main-section-heading,
[data-theme="dark"] p._main-section-heading {
    color: var(--mp-text) !important;
}

/*
   ============================================================
   Sixth-pass cleanup: last-mile one-offs uncovered by the 5th audit.
   ============================================================
*/

/* NAV Premium/Discount th used `#BCE0EB` (light blue-grey) — my earlier rule
   only matched lowercase. Include the uppercase-hex variant explicitly. */
[data-theme="dark"] th[style*="#BCE0EB"],
[data-theme="dark"] th[style*="rgb(188, 224, 235)"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* h2 with hard-coded `#636363` (rgb 99,99,99) — landing-page subheadings. */
[data-theme="dark"] #full-site-body h2 {
    color: var(--mp-text);
}

/* MarketSnapshot / DailyDashboard "IV30:" span — teal-on-dark (#2d6a6a) is 2.8.
   Base rule uses that dark teal for label text; lift for dark mode. */
[data-theme="dark"] #full-site-body [style*="color: #2d6a6a"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color:#2d6a6a"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color: #2D6A6A"]:not([style*="background"]) {
    color: var(--mp-accent) !important;
}

/* Projected-date footnote asterisk (`* Indicates Projected Date or Amount`) —
   dark burnt-orange (#993D00). */
[data-theme="dark"] #full-site-body [style*="color: #993d00"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color:#993d00"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color: #993D00"]:not([style*="background"]) {
    color: var(--mp-warn) !important;
}

/* "FREE" label on the .btn-subscribe orange bg — dark-red on orange (2.6). */
[data-theme="dark"] .btn-subscribe [style*="color: #aa0c0c"],
[data-theme="dark"] .btn-subscribe [style*="color:#aa0c0c"] {
    color: #ffffff !important;
}

/* Landing-page CTA heading `.-cta-heading` uses dark teal (#004235). */
[data-theme="dark"] p.-cta-heading,
[data-theme="dark"] ._cta-heading,
[data-theme="dark"] .-cta-heading {
    color: var(--mp-text) !important;
}

/* FastCashBurn table dark-orange text (`.-drkorg-txt`) on dark bg. */
[data-theme="dark"] .-drkorg-txt,
[data-theme="dark"] ._drkorg-txt,
[data-theme="dark"] td.-num.-drkorg-txt {
    color: var(--mp-warn) !important;
}

/* "SUBSCRIBE NOW!" white-on-orange (#E68A00) label — text too small for the
   contrast; deepen the orange in dark mode. */
[data-theme="dark"] div[style*="background: #e68a00"],
[data-theme="dark"] div[style*="background:#e68a00"],
[data-theme="dark"] div[style*="background-color: #e68a00"] {
    background-color: var(--mp-accent) !important;
}

/* MarketSnapshot "I" bar-marker still using inline blue `color:blue` — lift. */
[data-theme="dark"] #full-site-body div[style*="color: blue"]:not([style*="background"]),
[data-theme="dark"] #full-site-body div[style*="color:blue"]:not([style*="background"]) {
    color: var(--mp-accent) !important;
}

/*
   ============================================================
   Seventh-pass: specificity-fix + long-tail patterns from 6th audit.
   ============================================================
*/

/* Login anchor on #d8e9e7 — SPECIFICITY FIX: bump to (1,4,1) with extra
   attr matchers on the anchor to beat the (1,3,0) inline-color-override. */
[data-theme="dark"] #full-site-body [style*="background: #d8e9e7"] a[href],
[data-theme="dark"] #full-site-body [style*="background-color: #d8e9e7"] a[href],
[data-theme="dark"] #full-site-body [style*="background:#d8e9e7"] a[href],
[data-theme="dark"] #full-site-body [style*="background-color:#d8e9e7"] a[href] {
    color: #141a24 !important;
}
[data-theme="dark"] #full-site-body [style*="background: #d8e9e7"] p,
[data-theme="dark"] #full-site-body [style*="background-color: #d8e9e7"] p,
[data-theme="dark"] #full-site-body [style*="background:#d8e9e7"] p,
[data-theme="dark"] #full-site-body [style*="background-color:#d8e9e7"] p {
    color: #141a24 !important;
}

/* H1 headings across landing/report pages — SPECIFICITY FIX with !important. */
[data-theme="dark"] #full-site-body h1,
[data-theme="dark"] #full-site-body h2,
[data-theme="dark"] .site-content-container h1,
[data-theme="dark"] .site-content-container h2 {
    color: var(--mp-text) !important;
}

/* PeerAnalysis "◀ Lower Risk" arrow div — inline color: #333 on dark bg,
   inside `#analysis_by_peers_tabs`. Bump specificity. */
[data-theme="dark"] #analysis_by_peers_tabs div[style*="color: #333"],
[data-theme="dark"] #analysis_by_peers_tabs div[style*="color:#333"] {
    color: var(--mp-text) !important;
}

/* nextEarningsConfirmed / nextEarningsToday as DIVs (my earlier rule only
   caught SPAN variants). */
[data-theme="dark"] div.nextEarningsConfirmed,
[data-theme="dark"] div.nextEarningsToday {
    color: #141a24 !important;
}

/* .iv_rank_elevated — hard-coded #a60000 dark red on dark bg. */
[data-theme="dark"] .iv_rank_elevated,
[data-theme="dark"] span.iv_rank_elevated {
    color: var(--mp-neg) !important;
}

/* "Loading.." transient span + em on hidden-white containers. */
[data-theme="dark"] span[style*="background: white"],
[data-theme="dark"] span[style*="background: #fff"],
[data-theme="dark"] em[style*="background: white"],
[data-theme="dark"] .loading,
[data-theme="dark"] .loadingdotdotdot {
    background-color: transparent !important;
    color: var(--mp-text-muted) !important;
}

/* Featured trade-idea "-view-chart" link, econ-calendar-link — hard-coded
   dark navy (#234e90 / #003366) on dark bg. */
[data-theme="dark"] a.-view-chart,
[data-theme="dark"] a._view-chart,
[data-theme="dark"] a.econ-calendar-link {
    color: var(--mp-accent) !important;
}

/* Featured trade ideas mplink anchor + price cells on light-teal (#D6EDE3). */
[data-theme="dark"] [style*="background: #D6EDE3"] a,
[data-theme="dark"] [style*="background: #d6ede3"] a,
[data-theme="dark"] [style*="background-color: #D6EDE3"] a,
[data-theme="dark"] [style*="background-color: #d6ede3"] a,
[data-theme="dark"] [style*="background: #D6EDE3"] td,
[data-theme="dark"] [style*="background-color: #D6EDE3"] td,
[data-theme="dark"] [style*="background: #d6ede3"] td,
[data-theme="dark"] [style*="background-color: #d6ede3"] td {
    color: #141a24 !important;
}

/* News-article anchors on the `#ebebeb` card bg (some pages didn't match
   my `div[style*="background: #ebebeb"] a` rule because the card is a
   `<section>` or `<article>`). Broaden. */
[data-theme="dark"] [style*="background: #ebebeb"] a,
[data-theme="dark"] [style*="background-color: #ebebeb"] a,
[data-theme="dark"] [style*="background: #EBEBEB"] a,
[data-theme="dark"] [style*="background-color: #EBEBEB"] a,
[data-theme="dark"] [style*="background:#ebebeb"] a,
[data-theme="dark"] [style*="background-color:#ebebeb"] a {
    color: #141a24 !important;
}

/* OSB Summary Index Description table headers (color: #333 / #4d4d4d). */
[data-theme="dark"] .opt_risk_benchmark_item th,
[data-theme="dark"] .opt_risk_benchmark_item span._d1,
[data-theme="dark"] .opt_risk_benchmark_item span._d2 {
    color: var(--mp-text) !important;
}

/* Seasonality "Worst" span (color #800020 = darkred). */
[data-theme="dark"] #full-site-body span[style*="color: #800020"]:not([style*="background"]),
[data-theme="dark"] #full-site-body span[style*="color:#800020"]:not([style*="background"]) {
    color: var(--mp-neg) !important;
}

/* PriceAction session-summary "1.3 x" hardcoded #7b0a0a on session bg. */
[data-theme="dark"] #full-site-body span[style*="color: #7b0a0a"]:not([style*="background"]),
[data-theme="dark"] #full-site-body span[style*="color:#7b0a0a"]:not([style*="background"]) {
    color: var(--mp-neg) !important;
}

/* MarketSnapshot "Subdued" cell (color: #007399). */
[data-theme="dark"] #full-site-body td[style*="color: #007399"]:not([style*="background"]) {
    color: var(--mp-accent) !important;
}

/* .con-dialog-link (iron condor open link) — default blue anchor. */
[data-theme="dark"] a.con-dialog-link {
    color: var(--mp-accent) !important;
}

/* Sell/Buy alert spans on dark: #7f0101 (dark red) / #006647 (dark green). */
[data-theme="dark"] #full-site-body span[style*="color: #7f0101"]:not([style*="background"]),
[data-theme="dark"] #full-site-body span[style*="color:#7f0101"]:not([style*="background"]) {
    color: var(--mp-neg) !important;
}
[data-theme="dark"] #full-site-body span[style*="color: #006647"]:not([style*="background"]),
[data-theme="dark"] #full-site-body span[style*="color:#006647"]:not([style*="background"]) {
    color: var(--mp-pos) !important;
}

/* .earnings_date_alert (M/E letter) — hard-coded darkred. */
[data-theme="dark"] span.earnings_date_alert {
    color: var(--mp-neg) !important;
}

/* ATMStraddleScreener "Market Economic Events:" p on white bg (#fdfdfd). */
[data-theme="dark"] [style*="background: #fdfdfd"] p,
[data-theme="dark"] [style*="background-color: #fdfdfd"] p,
[data-theme="dark"] [style*="background: #FDFDFD"] p,
[data-theme="dark"] [style*="background-color: #FDFDFD"] p {
    color: #141a24 !important;
}

/* IntradayReturns .report-insights p + inline "·" bullet — hard-coded black. */
[data-theme="dark"] p.report-insights,
[data-theme="dark"] p.report-insights b {
    color: var(--mp-text) !important;
}

/* SingleLegOptionTradesScreener "Error" strong — hard-coded #ef9a9a on
   .error-red bg (#f44336). Force white for readability on red. */
[data-theme="dark"] .error-bar strong,
[data-theme="dark"] [style*="background: #f44336"] strong,
[data-theme="dark"] [style*="background-color: #f44336"] strong {
    color: #ffffff !important;
}

/* biotech-stock-catalysts "As of Monday Aug 17" — inline color: #262626. */
[data-theme="dark"] #full-site-body p[style*="color: #262626"]:not([style*="background"]),
[data-theme="dark"] #full-site-body p[style*="color:#262626"]:not([style*="background"]) {
    color: var(--mp-text) !important;
}

/* ExpiringOptionsReport th on #C7C7EB (light lavender) — Overestimated/etc. */
[data-theme="dark"] th[style*="#c7c7eb"],
[data-theme="dark"] th[style*="#C7C7EB"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* ExpiringOptionsReport "Underpriced" div (color #ae2d1e on dark). */
[data-theme="dark"] #full-site-body div[style*="color: #ae2d1e"]:not([style*="background"]),
[data-theme="dark"] #full-site-body div[style*="color:#ae2d1e"]:not([style*="background"]) {
    color: var(--mp-neg) !important;
}

/* ExpiringOptionsReport "2 Events" span (color: #810909). */
[data-theme="dark"] #full-site-body span[style*="color: #810909"]:not([style*="background"]),
[data-theme="dark"] #full-site-body span[style*="color:#810909"]:not([style*="background"]) {
    color: var(--mp-neg) !important;
}

/* Income-Statement selectlabel._o on purple #990099 — dark text on purple is
   marginal in every theme. Give the purple a lighter tone in dark mode. */
[data-theme="dark"] a.selectlabel._o,
[data-theme="dark"] [style*="background: #990099"],
[data-theme="dark"] [style*="background-color: #990099"] {
    background-color: #c47ac4 !important;   /* lift purple to work with black text */
    color: #141a24 !important;
}

/* .arrow-link — site-wide anchor style using hard-coded `#002EB8` (dark navy).
   Invisible against --mp-bg (also navy). Route to accent. */
[data-theme="dark"] a.arrow-link,
[data-theme="dark"] .arrow-link,
[data-theme="dark"] a.arrow-link:link,
[data-theme="dark"] a.arrow-link:visited,
[data-theme="dark"] a.arrow-link:hover {
    color: var(--mp-accent) !important;
}

/*
   Screener filter tables (`.screener_filters_tbl`) — the base grid
   (screenerFilterStyles.css:395-401 / 413-416) draws 1px grey borders on
   every td/th. On the dark surface those borders create a heavy grid that
   the user found visually noisy. Strip them in dark mode so the filter
   panel reads as a soft field of controls instead of a table matrix.
   Base padding is preserved so control spacing stays the same. */
[data-theme="dark"] table.screener_filters_tbl,
[data-theme="dark"] table.screener_filters_tbl > thead > tr > th,
[data-theme="dark"] table.screener_filters_tbl > tbody > tr > td,
[data-theme="dark"] table.screener_filters_tbl > tbody > tr > td:nth-child(2n),
[data-theme="dark"] table.screener_filters_tbl > tbody > tr > td:nth-child(2n+1),
[data-theme="dark"] .screener_filters_tbl th,
[data-theme="dark"] .screener_filters_tbl td {
    border: 0 !important;
}

/* Strip top/bottom cell borders (horizontal) sitewide in dark mode. Rows
   are separated by hover only; left/right borders stay as vertical column
   separators. (Zebra rules were removed per user request.) */
[data-theme="dark"] table.mp_lightborder > thead > tr > th,
[data-theme="dark"] table.mp_lightborder > tbody > tr > td,
[data-theme="dark"] table.mp_lightborder > tbody > tr > th,
[data-theme="dark"] table.mp_lightborder > tfoot > tr > td,
[data-theme="dark"] table.dataTable > thead > tr > th,
[data-theme="dark"] table.dataTable > tbody > tr > td,
[data-theme="dark"] table.dataTable > tbody > tr > th {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Cells with inline `style="background-color: yellow"` — injected by JS on
   Fair-Value DDM projected-dividend table (`#fair_value_ddm_hist_data_tbl` /
   `#fair_value_ddm_div_projected_tbl`) and other spots. Light text inherits
   from body → invisible on yellow. Force dark text + soften the yellow. */
[data-theme="dark"] td[style*="background-color: yellow"],
[data-theme="dark"] td[style*="background-color:yellow"],
[data-theme="dark"] th[style*="background-color: yellow"],
[data-theme="dark"] th[style*="background-color:yellow"],
[data-theme="dark"] tr[style*="background-color: yellow"],
[data-theme="dark"] tr[style*="background-color:yellow"] {
    background-color: #6b5a1a !important;   /* muted dark amber */
    color: var(--mp-text) !important;
}

/* .hlcelltd (highlighted table cell) — my earlier row forced `color: black` on
   these cells, but the base has `background: #ffefa6` (pale yellow) in light
   mode and inherits transparent in dark mode. Black-on-transparent-dark reads
   as invisible. Also nested spans like `.num_pos/.num_neg` need to keep their
   semantic color. Give the cell a warm dark-amber bg (matching the "highlight"
   intent) and leave text color to inheritance so num_pos/num_neg tokens win. */
[data-theme="dark"] table.mp_lightborder > tbody > tr > td.hlcelltd,
[data-theme="dark"] table.mp_featuretbl > tbody > tr > td.hlcelltd,
[data-theme="dark"] table.mp_featuretbl > tbody > tr > .hlcelltd {
    background-color: #3d3520 !important;   /* warm dark amber, matches .simple-hl */
    color: var(--mp-text) !important;
}

    /* Preserve num_pos / num_neg semantic colors inside .hlcelltd */
    [data-theme="dark"] table.mp_lightborder > tbody > tr > td.hlcelltd .num_pos,
    [data-theme="dark"] table.mp_lightborder > tbody > tr > td.hlcelltd.num_pos,
    [data-theme="dark"] table.mp_featuretbl > tbody > tr > td.hlcelltd .num_pos,
    [data-theme="dark"] table.mp_featuretbl > tbody > tr > td.hlcelltd.num_pos,
    [data-theme="dark"] table.mp_featuretbl > tbody > tr > .hlcelltd.num_pos {
        color: var(--mp-pos) !important;
    }

    [data-theme="dark"] table.mp_lightborder > tbody > tr > td.hlcelltd .num_neg,
    [data-theme="dark"] table.mp_lightborder > tbody > tr > td.hlcelltd.num_neg,
    [data-theme="dark"] table.mp_featuretbl > tbody > tr > td.hlcelltd .num_neg,
    [data-theme="dark"] table.mp_featuretbl > tbody > tr > td.hlcelltd.num_neg,
    [data-theme="dark"] table.mp_featuretbl > tbody > tr > .hlcelltd.num_neg {
        color: var(--mp-neg) !important;
    }

/* .info-hover:before — the small circled "i" icon appearing next to labels /
   column headers site-wide. Base rule uses `color: #75020e` (dark red) and
   `border: 1px solid black` which both disappear on the dark surface.
   `._small` variant only tweaks size; `._light` is intended for dark-bg cells
   in light mode. Give the whole family a bright-red glyph + soft border
   token treatment in dark mode. Existing `.drk-bkgr .info-hover:before`
   in darkBackgroundStyles_v2.css covers the opt-in system; this handles
   the site-wide `[data-theme="dark"]` path. */
[data-theme="dark"] .info-hover:not(._noinfoicon):before,
[data-theme="dark"] .info-hover._small:before,
[data-theme="dark"] .info-hover._light:before {
    color: var(--mp-neg) !important;
    border-color: var(--mp-border) !important;
    background-color: var(--mp-surface-alt) !important;
}

/* Homepage / cards embedded on other pages: labeltag / datatag on the "Low/Hi:"
   row use hard-coded grey/near-black inline colors. Force through the tokens with
   !important because many high-specificity selectors already colour these classes. */
[data-theme="dark"] span.labeltag,
[data-theme="dark"] .labeltag {
    color: var(--mp-text-muted) !important;
}
[data-theme="dark"] span.datatag,
[data-theme="dark"] .datatag {
    color: var(--mp-text) !important;
}

/* Economic Calendar next-release cells. Base rule lives at
   `table.econ-calendar-list-tbl div._item > p._name` (specificity 0,3,3) so
   !important is the cleanest path. */
[data-theme="dark"] table.econ-calendar-list-tbl div._item > p._name {
    color: var(--mp-text) !important;
}
[data-theme="dark"] table.econ-calendar-list-tbl div._item span._lbl,
[data-theme="dark"] table.econ-calendar-list-tbl div._item span._time {
    color: var(--mp-text-muted) !important;
}
[data-theme="dark"] table.econ-calendar-list-tbl > tbody a._toggleshow {
    color: var(--mp-accent) !important;
}

/* Upcoming Earnings Analysis: dark navy on dark bg for "Currently Overvalued" heading;
   dark green "In My Watchlist" tag; deep red "Undervalued". */
[data-theme="dark"] #full-site-body [style*="color: #19334d"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color:#19334d"]:not([style*="background"]) {
    color: var(--mp-accent) !important;
}

[data-theme="dark"] #full-site-body [style*="color: #006166"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color: #8d1f0c"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color: #0a3443"]:not([style*="background"]),
[data-theme="dark"] #full-site-body [style*="color: #731212"]:not([style*="background"]) {
    color: var(--mp-text) !important;
}

/* Income-Statement pivot-table selectlabel: black text on solid purple `#990099`
   for the "-Any-" toggle. Purple is dark enough that black text reads badly. */
[data-theme="dark"] a.selectlabel._o {
    color: #ffffff;
}

/* Symbol search "+" add-to-watchlist button: white text on light blue (#70b8ff).
   Darken the bg in dark mode so the white "+" still reads. */
[data-theme="dark"] div.symbol_search_btn {
    background-color: var(--mp-accent);
}

/* Fair-Value-Price step headers: light-gray box + light-text = 1.2. Give bg some tone. */
[data-theme="dark"] th[style*="background: lightgray"],
[data-theme="dark"] th[style*="background-color: lightgray"],
[data-theme="dark"] span[style*="background: lightgray"],
[data-theme="dark"] span[style*="background-color: lightgray"],
[data-theme="dark"] [style*="background: #d3d3d3"],
[data-theme="dark"] [style*="background-color: #d3d3d3"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* DividendReports table row hits a light bg (#eaeaea) with light text — the bg
   is set outside my earlier table dark overrides. Force it via the tokens. */
[data-theme="dark"] #full-site-body td[style*="background: #eaeaea"],
[data-theme="dark"] #full-site-body td[style*="background-color: #eaeaea"],
[data-theme="dark"] #full-site-body tr[style*="background: #eaeaea"],
[data-theme="dark"] #full-site-body tr[style*="background-color: #eaeaea"] {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}

/* Calendar "REGISTER FREE" orange CTA: light text on orange (1.6). Dark text works better. */
[data-theme="dark"] a[style*="background: orange"],
[data-theme="dark"] a[style*="background-color: orange"],
[data-theme="dark"] a[style*="background: #FFA500"],
[data-theme="dark"] a[style*="background: #ffa500"] {
    color: #141a24 !important;
}

[data-theme="dark"] .prem-or-reg-notice,
[data-theme="dark"] .no-premium-notice {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-border) !important;
}

    [data-theme="dark"] .prem-or-reg-notice > p,
    [data-theme="dark"] .prem-or-reg-notice > p > a,
    [data-theme="dark"] .no-premium-notice,
    [data-theme="dark"] .no-premium-notice > p,
    [data-theme="dark"] .no-premium-notice a {
        color: var(--mp-text) !important;
    }

    [data-theme="dark"] .prem-or-reg-notice > p:first-child {
        color: var(--mp-warn, #f5a623) !important;
    }

    [data-theme="dark"] .prem-or-reg-notice a:link,
    [data-theme="dark"] .prem-or-reg-notice a:visited,
    [data-theme="dark"] .no-premium-notice a:link,
    [data-theme="dark"] .no-premium-notice a:visited {
        color: var(--mp-accent) !important;
    }

/*
   ============================================================
   Popup dialogs — dark mode.
   These are jQuery UI-driven (fact sheet) or plain-positioned (watchlist)
   panels appended to <body>. They live outside #full-site-body but
   [data-theme="dark"] on <html> still cascades.
   ============================================================
*/

/* --- Fact Sheet dialog (jQuery UI custom-dialog) ---
   Base: .custom-dialog.ui-widget-content bg=#F9F9F9 color=#222222
        .custom-dialog.ui-widget-header bg=#b0de78 (green)
   Dark: dark surface + light text; keep the green header accent muted. */
[data-theme="dark"] #fact_sheet_dialog,
[data-theme="dark"] .custom-dialog.ui-widget,
[data-theme="dark"] .custom-dialog.ui-widget-content {
    background: var(--mp-surface) !important;
    color: var(--mp-text) !important;
    border: 1px solid var(--mp-border) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .custom-dialog.ui-widget-header {
    background: var(--mp-surface-alt) !important;
    border-bottom: 1px solid var(--mp-border) !important;
    color: var(--mp-text) !important;
}

/* jQuery UI button-pane at the bottom (the strip with the CLOSE button) —
   base skin renders white; give it the dark surface + border. */
[data-theme="dark"] .custom-dialog .ui-dialog-buttonpane,
[data-theme="dark"] .ui-dialog.custom-dialog .ui-dialog-buttonpane {
    background: var(--mp-surface-alt) !important;
    border-top: 1px solid var(--mp-border) !important;
    color: var(--mp-text) !important;
}

    [data-theme="dark"] .custom-dialog .ui-dialog-buttonpane .ui-button,
    [data-theme="dark"] .custom-dialog .ui-dialog-buttonpane button {
        background: var(--mp-surface) !important;
        border: 1px solid var(--mp-border) !important;
        color: var(--mp-text) !important;
    }
        [data-theme="dark"] .custom-dialog .ui-dialog-buttonpane .ui-button:hover,
        [data-theme="dark"] .custom-dialog .ui-dialog-buttonpane button:hover {
            background: var(--mp-surface-alt) !important;
            color: var(--mp-accent) !important;
        }

/* Google Chart divs inside the fact-sheet dialog — set their host bg to
   --mp-chart-bg so any transparent chart area shows through consistently. */
[data-theme="dark"] #fact_sheet_dialog #charttabs-1,
[data-theme="dark"] #fact_sheet_dialog #charttabs-2,
[data-theme="dark"] #fact_sheet_dialog #charttabs-3,
[data-theme="dark"] #fact_sheet_dialog #charttabs-4,
[data-theme="dark"] #fact_sheet_dialog #charttabs-5,
[data-theme="dark"] #fact_sheet_dialog #charttabs-6,
[data-theme="dark"] #fact_sheet_dialog [id^="factsheet_"][id$="_chart_div"],
[data-theme="dark"] #fact_sheet_dialog [id^="factsheet_"][id$="_div"] {
    background-color: var(--mp-surface) !important;
}

/* --- Option Chart panel (#ochart_outer): left-nav menu items + right pane
   text. Base has no color, so black-on-transparent shows dark-on-dark. --- */
[data-theme="dark"] #ochart_outer,
[data-theme="dark"] #ochart_menudiv,
[data-theme="dark"] #ochart_menudiv li.slidebox_menu_item,
[data-theme="dark"] #ochart_content,
[data-theme="dark"] #ochart_content p,
[data-theme="dark"] #ochart_content span,
[data-theme="dark"] #ochart_content label,
[data-theme="dark"] #ochart_content h1,
[data-theme="dark"] #ochart_content h2,
[data-theme="dark"] #ochart_content h3,
[data-theme="dark"] #ochart_content h4,
[data-theme="dark"] #ochart_content .oc_flexchart_outer,
[data-theme="dark"] #ochart_content .oc_flexchart_menuouter {
    color: var(--mp-text);
}

    [data-theme="dark"] #ochart_menudiv li.slidebox_menu_item:hover {
        background-color: var(--mp-surface-alt) !important;
        border-bottom-color: var(--mp-accent) !important;
    }
    [data-theme="dark"] #ochart_menudiv li.slidebox_menu_item._sel {
        border-bottom-color: var(--mp-accent) !important;
    }

/* --- ochart Volume tab (`.oc_flexchart_menuouter` "View Option Volume") ---
   The inner anchors use `.ochart_menu_item` which hard-codes `color: #000`
   at oChartStyles.css:53, overriding the parent's --mp-text I set above.
   Route them through --mp-accent (they're clickable links). Hover state
   uses light-grey bg + dark text (from base rule) — that still reads fine. */
[data-theme="dark"] .ochart_menu_item,
[data-theme="dark"] a.ochart_menu_item {
    color: var(--mp-accent) !important;
}

/* .oc_flexchart_menuouter section text (For Symbol:, Total:, Single Expiration:) */
[data-theme="dark"] .oc_flexchart_menuouter,
[data-theme="dark"] .oc_flexchart_menuouter p,
[data-theme="dark"] .oc_flexchart_menuouter span,
[data-theme="dark"] .oc_flexchart_menuouter div {
    color: var(--mp-text);
}

/* --- Expiration selector popup (`.expiration_select_child` / `#*_exp_sel_child`) ---
   Base bg #E6F3FF (light blue) with light-grey borders — invisible + illegible
   on dark. Flip the whole popup to surface tokens. */
[data-theme="dark"] .expiration_select_child,
[data-theme="dark"] [id$="_exp_sel_child"] {
    background-color: var(--mp-surface-alt) !important;
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
}

[data-theme="dark"] td.expiration_select_tablecell,
[data-theme="dark"] .expiration_select_table td {
    border-color: var(--mp-border) !important;
    color: var(--mp-text) !important;
    background-color: transparent !important;
}
    [data-theme="dark"] td.expiration_select_tablecell:hover,
    [data-theme="dark"] .expiration_select_table td:hover {
        background-color: var(--mp-surface) !important;
        color: var(--mp-accent) !important;
    }

/* --- Multi-Leg Screener detail row (`#ml-opt-trades-details-div`) ---
   Row-child injected by DataTables uses white bg from the vendor stylesheet.
   Flip to the surface token so the details panel matches the dark table.
   DataTables also renders a border-top/border-bottom around the child row
   that shows as a bright white line on dark bg — force the border color
   through the token as well. */
[data-theme="dark"] #ml-opt-trades-details-div,
[data-theme="dark"] tr.details-1 > td,
[data-theme="dark"] table.dataTable tbody tr.details-1 > td,
[data-theme="dark"] table.dataTable tbody tr.details > td,
[data-theme="dark"] table.dataTable > tbody > tr.child > td {
    background-color: var(--mp-surface) !important;
    color: var(--mp-text);
    border-color: var(--mp-border) !important;
    border-top-color: var(--mp-border) !important;
    border-bottom-color: var(--mp-border) !important;
}

/* DataTables' row.child() wraps our details div in a <tr><td> whose class
   varies (`.child`, `.details`, `.details-1`, or none) depending on which
   screener wired it up; on the multi-leg screener the parent td also gets
   an INLINE style="background-color: rgb(255, 255, 255)" that the class-
   scoped rules above can't reach reliably. Target the parent td directly
   via :has() and also match the inline style with an attribute selector
   so both browsers with and without :has() get covered. */
[data-theme="dark"] td:has(> #ml-opt-trades-details-div),
[data-theme="dark"] tr:has(> td > #ml-opt-trades-details-div) > td,
[data-theme="dark"] td[style*="background-color: rgb(255, 255, 255)"]:has(#ml-opt-trades-details-div),
[data-theme="dark"] td[style*="background-color:rgb(255,255,255)"]:has(#ml-opt-trades-details-div),
[data-theme="dark"] td[style*="background-color: white"]:has(#ml-opt-trades-details-div),
[data-theme="dark"] td[style*="background-color:#fff"]:has(#ml-opt-trades-details-div) {
    background-color: var(--mp-surface) !important;
    background: var(--mp-surface) !important;
    color: var(--mp-text);
    border-color: var(--mp-border) !important;
}

/* --- StockChart page: "Show Moving Avg:" / "Show VWAP Plot:" labels + the
   `.selectlabel._c` (collapsed / non-hover state) chips lose contrast because
   `._c` sets `background-color: transparent`, so black-on-transparent falls
   through to the dark chart panel bg. Force chip text to --mp-text; on hover
   `._c:hover { background: #E8E8E8 }` kicks in and base black text reads. --- */
[data-theme="dark"] #av_stockchart_maselect,
[data-theme="dark"] #av_stockchart_maselect p,
[data-theme="dark"] #av_stockchart_vwapselect,
[data-theme="dark"] #av_stockchart_vwapselect p,
[data-theme="dark"] #av_stockchart_vwapselectlt,
[data-theme="dark"] #av_stockchart_vwapselectlt p,
[data-theme="dark"] #av_stockchart_chartopts_outer,
[data-theme="dark"] #av_stockchart_chartopts_outer p {
    color: var(--mp-text) !important;
}

/* `.selectlabel._c` — collapsed/unpressed toggle. Base is transparent bg
   with inherited `color: black`. In dark mode force light text on the
   transparent chip; hover state (bg becomes #E8E8E8) will still read black. */
[data-theme="dark"] a.selectlabel._c,
[data-theme="dark"] .selectlabel._c {
    color: var(--mp-text) !important;
}
    [data-theme="dark"] a.selectlabel._c:hover,
    [data-theme="dark"] .selectlabel._c:hover {
        color: #141a24 !important;   /* base #E8E8E8 hover bg → dark text */
    }

/* --- Symbol left-menu icon PNGs (Images/Menu/*.png) — black-on-transparent
   sprites go invisible on the dark sidebar. Invert luminance so they render
   white. `filter: invert(1)` preserves transparency; `opacity(0.9)` softens
   slightly so they don't glare. --- */
[data-theme="dark"] img[src*="/Images/Menu/"],
[data-theme="dark"] .ov-menu-item ._i img,
[data-theme="dark"] .ov-menu-item .expand_toggle_icon img,
[data-theme="dark"] .ov-menu-item span._i img {
    filter: invert(1) opacity(0.9);
}

/* Fact sheet inner surfaces + text */
[data-theme="dark"] #fact_sheet_dialog p,
[data-theme="dark"] #fact_sheet_dialog span,
[data-theme="dark"] #fact_sheet_dialog label,
[data-theme="dark"] #fact_sheet_dialog td,
[data-theme="dark"] #fact_sheet_dialog th,
[data-theme="dark"] #fact_sheet_dialog .symfs_data_table td,
[data-theme="dark"] #fact_sheet_dialog .symfs_price_current,
[data-theme="dark"] #fact_sheet_dialog .symfs_price_prepost {
    color: var(--mp-text);
}

/* Fact-sheet tab strip: nav border + default/active anchor colors */
[data-theme="dark"] #fact_sheet_dialog .custom-tabs .ui-widget-header {
    border-bottom-color: var(--mp-border) !important;
}
[data-theme="dark"] #fact_sheet_dialog .custom-tabs .ui-tabs-nav .ui-state-default a {
    color: var(--mp-text-muted) !important;
}
[data-theme="dark"] #fact_sheet_dialog .custom-tabs .ui-tabs-nav .ui-state-active a {
    color: var(--mp-accent) !important;
}
[data-theme="dark"] #fact_sheet_dialog a.custom-tabs,
[data-theme="dark"] #fact_sheet_dialog li.custom-tabs {
    color: var(--mp-text) !important;
}

/* --- Add-to-Watchlist and Generate-Watchlist dialogs ---
   Base: #e6f7ff (light cyan) bg + black-ish labels + light-grey buttons
   Dark: surface bg + light text + tinted buttons. */
[data-theme="dark"] #add_to_watchlist_dialog,
[data-theme="dark"] #generate_watchlist_dialog {
    background-color: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    color: var(--mp-text) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}

    [data-theme="dark"] #add_to_watchlist_dialog p,
    [data-theme="dark"] #add_to_watchlist_dialog span,
    [data-theme="dark"] #add_to_watchlist_dialog > label,
    [data-theme="dark"] #add_to_watchlist_dialog .add_to_watchlist_newname > label,
    [data-theme="dark"] #generate_watchlist_dialog p,
    [data-theme="dark"] #generate_watchlist_dialog span,
    [data-theme="dark"] #generate_watchlist_dialog > label,
    [data-theme="dark"] #generate_watchlist_dialog .generate_watchlist_name > label {
        color: var(--mp-text) !important;
    }

    /* Close X: keep the red accent (matches the destructive intent) but on
       hover use the token colours instead of hard-coded #7b0606. */
    [data-theme="dark"] #add_to_watchlist_dialog span#add_to_watchlist_close,
    [data-theme="dark"] #generate_watchlist_dialog span#generate_watchlist_close {
        color: var(--mp-neg) !important;
    }
        [data-theme="dark"] #add_to_watchlist_dialog span#add_to_watchlist_close:hover,
        [data-theme="dark"] #generate_watchlist_dialog span#generate_watchlist_close:hover {
            color: #ffffff !important;
            background-color: var(--mp-neg) !important;
        }

    /* Buttons: base #ecece8 grey doesn't read on dark; use surface-alt + text. */
    [data-theme="dark"] #add_to_watchlist_dialog > button,
    [data-theme="dark"] #generate_watchlist_dialog > button {
        background-color: var(--mp-surface-alt) !important;
        border: 1px solid var(--mp-border) !important;
        color: var(--mp-text) !important;
    }
        [data-theme="dark"] #add_to_watchlist_dialog > button._success,
        [data-theme="dark"] #generate_watchlist_dialog > button._success {
            background-color: #1e5a1e !important;   /* muted green for confirmed action */
            border-color: var(--mp-pos) !important;
            color: #ffffff !important;
        }

    /* "already in watchlist" hint + view-my-watchlists link colour cleanup. */
    [data-theme="dark"] #add_to_watchlist_dialog span.already_in_watchlist {
        color: var(--mp-text-muted) !important;
    }
    [data-theme="dark"] #add_to_watchlist_dialog > p.view_my_watchlists a,
    [data-theme="dark"] #generate_watchlist_dialog > p.view_my_watchlists a {
        color: var(--mp-accent) !important;
    }

    /* Inputs (new-name text box) — dark background + light text. */
    [data-theme="dark"] #add_to_watchlist_dialog input[type="text"],
    [data-theme="dark"] #add_to_watchlist_dialog .add_to_watchlist_newname > input,
    [data-theme="dark"] #generate_watchlist_dialog input[type="text"],
    [data-theme="dark"] #generate_watchlist_dialog .generate_watchlist_name > input,
    [data-theme="dark"] #add_to_watchlist_dialog > select,
    [data-theme="dark"] #generate_watchlist_dialog > select {
        background-color: var(--mp-bg) !important;
        color: var(--mp-text) !important;
        border: 1px solid var(--mp-border) !important;
    }

/* ==============================================================
   Multi-Leg Trades detail row — strategy details layout.
   Rules live here (wwwroot CSS) NOT in the view's <style> block
   because MPWebCore precompiles .cshtml into Views.dll at build
   time — style-block edits require a full dotnet build to reach
   the browser, but CSS changes here take effect on next reload.
   Rules are NOT wrapped in [data-theme="dark"] because layout
   applies in both modes.
   ============================================================== */

/* Prevent our inner content from bubbling its intrinsic width into the
   parent screener's child-row <td colspan> (parent uses scrollX and would
   otherwise grow to fit our widest table). overflow:hidden severs the
   min-content propagation; the section inside handles its own scrolling. */
#ml-opt-trades-details-div {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* THE stable box: caps at 1500px, shrinks to viewport on narrow screens.
   One horizontal scrollbar for the whole details block if anything wider
   than 1500px sneaks in. */
#strategy_details_main_section {
    max-width: 1500px;
    width: auto;
    overflow-x: auto;
    box-sizing: border-box;
}
#strategy_details_main_section .sentiment_container_div {
    max-width: 100%;
    box-sizing: border-box;
}
#strategy_details_main_section .opt_trade_screener_outer {
    display: block;
    padding: 8px 12px;
    box-sizing: border-box;
}

/* Density: tighten cell padding + drop the inline `tbody { font-size: 1.3em }`
   the view sets, on every table in this section. */
#strategy_details_main_section table.mp_lightborder > thead > tr > th,
#strategy_details_main_section table.mp_lightborder > tbody > tr > td,
#strategy_details_main_section table.mp_lightborder > tbody > tr > th,
#strategy_details_main_section table.mp_lightborder > tfoot > tr > td,
#strategy_details_main_section table#multileg_grouped_trds_tbl > thead > tr > th,
#strategy_details_main_section table#multileg_grouped_trds_tbl > tbody > tr > td,
#strategy_details_main_section table#multileg_historical_trds_tbl > thead > tr > th,
#strategy_details_main_section table#multileg_historical_trds_tbl > tbody > tr > td {
    padding: 2px 6px;
}
#strategy_details_main_section table.mp_lightborder > thead > tr.main_heading > th,
#strategy_details_main_section table.mp_lightborder > thead > tr > th.main_heading,
#strategy_details_main_section table.mp_lightborder > tbody > tr.main_heading > th {
    padding: 3px 5px;
    font-size: 0.98em;
}
#strategy_details_main_section table.mp_lightborder > tbody,
#strategy_details_main_section table#multileg_grouped_trds_tbl > tbody,
#strategy_details_main_section table#multileg_historical_trds_tbl > tbody {
    font-size: 1.02em;
}

/* Collapse borders on every table so colspan borders share edges with
   single-column borders (fixes the jagged vertical line the DataTables
   default `border-collapse: separate` produced). */
#strategy_details_main_section table.mp_lightborder,
#strategy_details_main_section table#multileg_grouped_trds_tbl,
#strategy_details_main_section table#consolidated_spread_tbl,
#strategy_details_main_section table#multileg_historical_trds_tbl,
#strategy_details_main_section table#related_spreads_tbl,
#strategy_details_main_section table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Force width:auto on every inner table so columns shrink to content.
   `autoWidth: false` in the JS init prevents DataTables from setting
   explicit per-column widths that would otherwise pad each column even
   with the table narrowed. Section overflow-x handles any leftover. */
#strategy_details_main_section table#multileg_grouped_trds_tbl,
#strategy_details_main_section table#consolidated_spread_tbl,
#strategy_details_main_section table#multileg_historical_trds_tbl,
#strategy_details_main_section table#related_spreads_tbl,
#strategy_details_main_section table.dataTable#multileg_grouped_trds_tbl,
#strategy_details_main_section table.dataTable#consolidated_spread_tbl,
#strategy_details_main_section table.dataTable#multileg_historical_trds_tbl,
#strategy_details_main_section table.dataTable#related_spreads_tbl {
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    table-layout: auto !important;
}
/* Wrapper hugs the shrunk table instead of stretching to full width. */
#strategy_details_main_section .dataTables_wrapper {
    width: auto;
    display: inline-block;
}

/* Historical table: keep every cell on one line (dates/times/numbers). */
#strategy_details_main_section table#multileg_historical_trds_tbl > thead > tr > th,
#strategy_details_main_section table#multileg_historical_trds_tbl > tbody > tr > td {
    white-space: nowrap;
}

/* Related Spreads (Connecting Trades tab) has 17 columns and can outgrow
   the 1500px section on its own. Give its wrapper a max-width + local
   horizontal scroll so ONLY this table scrolls — the rest of the details
   stays put and the section-level scrollbar doesn't have to appear. */
#strategy_details_main_section .opt_trade_screener_outer:has(#related_spreads_tbl) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Rolling Connections / Build Up / Rolling-Rolling tables: with the OI change and What happened
   columns they are wider than the tab panel, and the section-level overflow clipped the right-hand
   What happened text (its scrollbar sits far below, out of view). Same local horizontal scroll as
   Related Spreads, so nothing is cut off and the scrollbar sits right under each table. */
#strategy_details_main_section .opt_trade_screener_outer:has(.rc-chain-tbl),
#strategy_details_main_section .opt_trade_screener_outer:has(.bu-tbl),
#strategy_details_main_section .opt_trade_screener_outer:has(.rr-tbl) {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* DataTables info + pagination: un-float so they sit under the table on
   the left edge (default float:right otherwise pushes pagination to the
   far right of a wide section). */
#strategy_details_main_section .dataTables_info,
#strategy_details_main_section .dataTables_paginate,
#strategy_details_main_section .dataTables_length,
#strategy_details_main_section .dataTables_filter {
    float: none !important;
    text-align: left !important;
}
#strategy_details_main_section .dataTables_paginate {
    display: inline-block;
    margin-left: 20px;
}
#strategy_details_main_section .dataTables_info {
    display: inline-block;
}

/* Current-Market summary table: parent flex was space-around → auto-centered.
   Flip to flex-start; drop the table's margin:auto so it left-aligns. */
#strategy_details_main_section .current-market-flex {
    justify-content: flex-start !important;
}
#multileg_trds_spread_current_market_tbl {
    margin: 0 !important;
}

/* --- Option-chain strike popup dialog (`#mstk_popup`, jQuery UI dialog
   appended to body in montagePage.js). Base styles in mpMontage.css hard-
   code light greys (`#D1D1D1` menu bar, `#B8B8B8` tab items, `white`
   content area with `black` text) which are unreadable on dark. Route
   everything through --mp tokens; keep the ._sel orange + hover red since
   those are intentional accent colors that read fine on dark too. */
[data-theme="dark"] #mstk_popup,
[data-theme="dark"] #mstk_popup.ui-dialog-content,
[data-theme="dark"] #mstk_popup.ui-widget-content {
    background: var(--mp-surface) !important;
    background-color: var(--mp-surface) !important;
    color: var(--mp-text) !important;
}

/* Tab bar container (top strip that holds IV GRAPHS / CALL TRADES / etc.) */
[data-theme="dark"] #mstk_popup_menu_outer {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}
[data-theme="dark"] ul.strike_popup_menu {
    color: var(--mp-text) !important;
}

/* Individual tab pill. Default state gets a dark bg + light text. The base
   ._sel rule from mpMontage.css sets orange (#FF9933) — but my !important
   on the base bg above beats its non-important rule, so I have to re-assert
   the selected color here (with !important) or every tab reads as unselected.
   Use --mp-accent so the selected tab has an obviously distinct accent
   color from the flat dark unselected tabs. Border-right uses --mp-border
   so column separators stay visible without shouting. */
[data-theme="dark"] li.strike_popup_menu_item {
    background-color: var(--mp-surface) !important;
    color: var(--mp-text) !important;
    border-right-color: var(--mp-border) !important;
}
[data-theme="dark"] li.strike_popup_menu_item._sel {
    background-color: var(--mp-accent) !important;
    color: #fff !important;
    font-weight: bold;
}
[data-theme="dark"] li.strike_popup_menu_item:hover {
    background-color: var(--mp-surface-alt) !important;
    color: var(--mp-text) !important;
}
[data-theme="dark"] li.strike_popup_menu_item._sel:hover {
    /* Keep the accent color on hover so the selected tab doesn't flip to
       the unselected-hover style when the mouse passes over it. */
    background-color: var(--mp-accent) !important;
    color: #fff !important;
}

/* Content area holding each per-tab panel (`.strike_popup_content`) —
   base is white bg + black text; flip both. Also cover the direct-child
   panels that inherit those in the base rule. */
[data-theme="dark"] .strike_popup_content,
[data-theme="dark"] #mstk_popup_contentdiv {
    background-color: var(--mp-surface) !important;
    color: var(--mp-text) !important;
    border-top-color: var(--mp-border) !important;
}
[data-theme="dark"] .strike_popup_content > div,
[data-theme="dark"] .strike_popup_content > div > div,
[data-theme="dark"] .mstk_popup_suminfo_top,
[data-theme="dark"] .mstk_popup_sumtbl_outer,
[data-theme="dark"] .mstk_popup_tradetbl_outer {
    background-color: transparent !important;
    color: var(--mp-text) !important;
}

/* Text-link tab strip inside the IV GRAPHS panel (`#mstk_popup_graph_select`
   → TextLinkMenuHelper "Current | Historical"). Renders black by default. */
[data-theme="dark"] #mstk_popup_graph_select,
[data-theme="dark"] #mstk_popup_graph_select a,
[data-theme="dark"] #mstk_popup_graph_select span {
    color: var(--mp-text) !important;
}
[data-theme="dark"] #mstk_popup_graph_select a {
    color: var(--mp-accent) !important;
}

/*
   ============================================================
   Login / register pages (_PlainLayout). The page background itself is an INLINE style on <body>, so it is
   repainted through the --mp-page-bg token defined at the top of this file - a rule here could never win.
   These are the remaining light surfaces on that page (Dmitry, 2026-09-17).
   ============================================================
*/

/* Floating-label text inputs (floatingLabelInput.css hardcodes #F7F7F7 with a #DADCE0 border). The
   placeholder chip's own background must match the input, or a light bar shows through as the label floats. */
[data-theme="dark"] .field-wrapper input {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
    border-color: var(--mp-border);
}

[data-theme="dark"] .field-wrapper .field-placeholder {
    color: var(--mp-text-muted);
}

[data-theme="dark"] .field-wrapper .field-placeholder span {
    background-color: var(--mp-surface-alt);
}

/* "Continue with Google" (loginStyles.css .extAuthGButton = #fff bg + #262626 text). In dark the button picked
   up a dark background from the generic surface rules but kept its near-black label - unreadable. Repaint both;
   the white icon tile stays, which is what Google's dark-theme button also does. */
[data-theme="dark"] .extAuthGButton {
    background-color: var(--mp-surface-alt);
    color: var(--mp-text);
}

/* The label takes the button's own background: painting it separately left a darker box behind "Log in" on the
   teal button and a two-tone "Continue with Google" (2026-10-07). */
[data-theme="dark"] .extAuthGButton .extAuthGButtonContents {
    background-color: transparent;
    color: var(--mp-text);
}

/* The <button> wrapper kept the browser's light button face, which showed as a white strip under the Google
   button (its inner tile has a 10px bottom margin). */
[data-theme="dark"] .site-login-btn {
    background-color: transparent;
}

[data-theme="dark"] .extAuthGButton {
    border: 1px solid var(--mp-border);
}