/* NAMESPACED (2026-07-28): every rule is scoped under html.zb-collapsed.
   Always loaded now; collapsing toggles the class on <html> instead of
   swapping stylesheet links (standard.css was empty -- the old swap only
   ever turned this file on and off). One-frame class flip, and the rail
   can transition. */

html.zb-collapsed #menu-region {
    display: none;
}

/* untrap fixed descendants (scan-menu bottom sheet): the trap's clients
   (#menu-region etc.) are hidden in collapsed mode anyway */
html.zb-collapsed #sidebarMenu { transform: none !important; }

/* Search results: desktop pins a 400px popover at left:135 (runs off a
   phone screen). Collapsed mode: full-width overlay under the picker row. */
html.zb-collapsed #search-results {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    top: 92px !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

html.zb-collapsed #sectors {
    left: 429px !important;
    top: 60px;
}

html.zb-collapsed .sidebarMenu-multi-scan {
    margin-left: 0px !important;
    margin-top: 5px !important;
}

html.zb-collapsed #sidebarMenu {
    margin-left: -140px;
    margin-top: -4px !important;
}


html.zb-collapsed #show-chart {
    /*display: none;*/
}

html.zb-collapsed #donate-text {
    text-overflow: clip;
    overflow: hidden;
    padding-left: 14px !important;
}

html.zb-collapsed #market-events {
    left: 227px !important;
    top: 53px !important;
}

html.zb-collapsed #import {
    display: none;
}

html.zb-collapsed #user-count {
    display: none;
}

html.zb-collapsed .spinner-container-desktop {
    margin-left: 50px !important;
}

html.zb-collapsed #dark-mode-switch {
    left: 303px !important;
    position: absolute !important;
    top: 53px !important;
    width: 300px !important;
    z-index: 3000;
}

html.zb-collapsed #search-results {
    left: 135px;
    width: 300px !important;
}

html.zb-collapsed #search-results-clear {
    position: absolute !important;
    left: 420px !important;
    top: 90px !important;
    z-index: 2030 !important;
}

html.zb-collapsed .action-button-guide-mobile {
    display: block;
    color: white !important;
    background-color: rgba(56, 132, 255, 1) !important;
    z-index: 2030;
}


html.zb-collapsed .action-button-guide-mobile:hover {
        background-color: white !important;
        color: black !important;
        border-color: black !important;
    }


html.zb-collapsed #user-guide-icon {
    position: relative;
    top: 0px;
    left: 1px;
}

html.zb-collapsed .action-button-patreon-mobile {
    display: block;
    color: white !important;
    border-color: #ff424d;
    background-color: #ff424d;
    z-index: 2030;
}

html.zb-collapsed .action-button-patreon-mobile:hover {
    }

html.zb-collapsed .action-button-discord-mobile {
    display: block;
    color: white;
    border-color: hsla(227, 58%, 65%, 0.78);
    background-color: hsla(227, 58%, 65%, 1.0);
    z-index: 2030;
}

/*
.custom-switch {
    left: 13px;
    bottom: -10px;
}

#switch-text {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 10px;
    cursor: pointer;
    margin-top: -4px;
    margin-left: -29px;
}

*/
html.zb-collapsed #top-menu {
    display: none;
}

html.zb-collapsed #flip-buttons {
    display: none;
}

html.zb-collapsed #grid-heading-buttons {
    margin-left: 136px;
}

html.zb-collapsed .grid-heading-buttons-multi-scan {
    margin-left: -1px !important;
}

html.zb-collapsed #top-menu-mobile {
    visibility: visible !important;
    margin-top: 90px !important;
    margin-left: 1px;
}

html.zb-collapsed #button-add-ticker {
    display: none;
}

html.zb-collapsed #button-clear-flags {
    display: none;
}

html.zb-collapsed #button-help {
    display: none;
}

html.zb-collapsed .modal-footer {
    min-width: 100px;
}

html.zb-collapsed .filter-region-content {
    min-width: 200px;
}

html.zb-collapsed #filter-price {
    width: 382px !important;
}

html.zb-collapsed #filter-region-left-col {
    /*min-width: 270px;*/
    width: 300px !important;
}

html.zb-collapsed #filter-region-right-col {
    width: 480px;
}

html.zb-collapsed #filter-intraday {
    width: 380px !important;
}

html.zb-collapsed #filter-fund {
    width: 380px !important;
}

html.zb-collapsed #filter-price {
    width: 380px !important;
}

html.zb-collapsed #filter-daily {
    width: 380px !important;
}


html.zb-collapsed #filter-sector {
    width: 380px !important;
}

html.zb-collapsed #filter-trend {
    width: 380px !important;
}

html.zb-collapsed #filter-volume {
    width: 380px !important;
}

html.zb-collapsed .filter-modal {
    width: 300px !important;
}

html.zb-collapsed .modal-content {
    /*width: 425px !important;*/
    /*max-width: 425px !important;*/
    /* Capped, not fixed: this sheet also loads on phones (viewport <= 700),
       where a hard 500px content box inside a 417px dialog clipped ~90px off
       every modal's right edge. min() keeps the desktop-collapsed sizing
       exactly as it was and yields to the viewport below it. (2026-07-28) */
    min-width: min(500px, calc(100vw - 24px)) !important;
}

html.zb-collapsed .modal-dialog {
    width: min(417px, calc(100vw - 24px)) !important;
}

html.zb-collapsed .modal {
    /* The fixed container must span the full visible width -- at 95vw even a
       100%-wide dialog stopped 5vw short of the right edge. (2026-07-28) */
    width: 100%;
}

html.zb-collapsed #filter-intro {
    max-width: 500px;
}

html.zb-collapsed .grid-heading-text-long {
}

html.zb-collapsed #desktop-promo {
    display: none;
}

html.zb-collapsed .grid-heading-text {
    /*height: 27px !important;*/
}

html.zb-collapsed .grid-heading-text-long {
}

/*
#header-text {
    display: none;
}*/

html.zb-collapsed #header-center-text {
    font-size: 11px;
}

/*
#header-text-mobile {
    display: block;
    font-size: 14px !important;
    padding-top: 6px !important;
    color: var(--common);
    float: left;
    position: absolute;
    margin-left: 140px;
    width: 430px;
    top: 17px;
    height: 41px;
    vertical-align: middle;
    line-height: 17px;
}*/

html.zb-collapsed .custom-select {
}

html.zb-collapsed #sector-minimized {
    left: 8px !important;
    margin-top: 21px;
    height: 32px !important;
    padding-top: 5px;
    width: 21px;
    padding-left: 4px;
    margin-left: 2px;
    background-color: var(--page-background);
    border: 1px solid #ced4da !important;
    color: var(--common);
}


html.zb-collapsed .sector-bar-close {
}

html.zb-collapsed .grid-heading-text-multiscan {
    margin-left: 0px;
    padding-bottom: 7px;
}

html.zb-collapsed #multi-scan-intro {
    padding-top: 1px;
    margin-left: 355px;
    color: var(--common);
}

html.zb-collapsed .warning-bar-mini-grid {
    margin-left: 2px !important;
    width: 729px !important;
}


html.zb-collapsed .mini-grid-search-container {
    display: none;
}

html.zb-collapsed .mini-grid-search {
    display: none;
}

html.zb-collapsed .filter-search-container {
    /*float:none;*/
}

/* Full width of the account scroll region, no extra band above it (2026-10-04: the 12px
   margin + fixed 89vw left a gap under the menu row and on the right). */
html.zb-collapsed #my-account {
    width: auto;
    margin-top: 0;
}

html.zb-collapsed .account-summary {
    width: 86vw;
}

/* legacy collapsed rail override removed 2026-07-29: pinned the rail to a
   520px box at 144px and cut the shaded background short; the full-width
   rail rules in app.css now apply in collapsed mode too. */

/*
#updated {
    margin-top: 5px;
    position: absolute;
    z-index:1000;
}*/

html.zb-collapsed #updated-time {
    margin-top: -14px !important;
}

html.zb-collapsed #logo {
    top: 19px !important;
}

/* Collapsed mode: the ticker's 40px box has no free band (it landed exactly
   on the picker row); <=600px already hides it -- hide at all collapsed
   widths. The free-tier delay label likewise overlaps What's New. */
html.zb-collapsed #market-ticker-bar { display: none !important; }
html.zb-collapsed #delayed-status { display: none !important; }

/* Small-view header compaction (2026-07-29): the tagline goes (the search box
   sat on top of it at fixed 365/78), the logo clears the 24px rail, and the
   picker row matches production: direction combo | wide scan combo | compact
   search, one grid row, with the clear-X overlaid inside the search box. */
html.zb-collapsed #header-text { display: none !important; }
html.zb-collapsed #logo { display: none !important; }
html.zb-collapsed #top-menu-mobile {
    display: grid !important;
    /* scan combo and search split the rest evenly (Steve 2026-10-05: the combo at about half its
       size, to give search more room; search was capped at 90px) */
    grid-template-columns: fit-content(140px) minmax(0, 1fr) minmax(64px, 1fr);
    align-items: center;
    gap: 6px;
    /* Viewport-absolute like the rest of the header museum: flow margins
       kept collapsing away. 28 clears the 24px rail; the banner-state rule
       below shifts it like the other header pieces. */
    position: absolute;
    top: 24px; /* .main-bg is pinned to 0 now; lands at rail bottom */
    left: 0;
    /* cap to the header/scan column instead of stretching edge to edge
       on wide collapsed windows */
    right: auto;
    width: min(calc(100% - var(--zb-sbw, 0px)), 700px);   /* --zb-sbw: #main-content's scrollbar (zbSyncMenuTop) */
    margin: 0 !important;
    padding: 0 8px 0 2px;
    /* NO z-index here: a stacking context would flatten the picker panels
       (z 1050) below the zbPanel backdrop (z 1049) and eat their clicks. */
}
html.zb-collapsed #warning-bar ~ #main-content #top-menu-mobile { top: 46px; }
/* flow follows: heading tucks under the row (was ~23px adrift) */
html.zb-collapsed #warning-bar ~ #main-content .main-region { margin-top: 77px !important; } /* neutralizes the desktop banner rule's 98 (2 ids outrank the collapsed base) */
/* close the dead zone between the picker row and the green heading: the
   desktop .main-region offset (109) assumes the full logo header */
html.zb-collapsed .main-region { margin-top: 77px !important; }
html.zb-collapsed #menu-mobile-direction {
    grid-column: 1; grid-row: 1;
    float: none !important; width: auto !important; margin: 0 !important; min-width: 0;
}
html.zb-collapsed #menu-mobile-watchlists {
    grid-column: 2; grid-row: 1;
    float: none !important; width: auto !important; margin: 0 !important; min-width: 0;
}
html.zb-collapsed #mobile-ticker-search {
    grid-column: 3; grid-row: 1;
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; margin: 0 !important; box-sizing: border-box;
    padding-right: 22px; /* room for the overlaid clear-X */
}
html.zb-collapsed #search-results-clear {
    /* same cell as the search input, riding its right edge (production look) */
    grid-column: 3; grid-row: 1;
    position: static !important; left: auto !important; top: auto !important;
    justify-self: end;
    margin-right: 6px;
    z-index: 2;
}
html.zb-collapsed #mobile-direction-button,
html.zb-collapsed #mobile-scan-button {
    padding: 4px 8px;
    font-size: 13px;
}

/* Views without a scan combo (multi-scan, alerts, account...): the middle
   1fr column is empty and shoved the search to the far cap. Collapse it so
   the search sits right after the direction combo. */
html.zb-collapsed #top-menu-mobile:not(:has(#mobile-scan-button)) {
    grid-template-columns: fit-content(160px) 0 minmax(120px, 170px);
}


/* ------------------------------------------------------------------------------
   Phone override (2026-08-17). The zb-collapsed width pins above are DESKTOP
   collapsed-sidebar sizing, but this sheet also loads on phones — where the
   sidebar is always collapsed, so html.zb-collapsed is always present. Its
   `html.zb-collapsed #filter-region-left-col { width:300px !important }` out-
   specifies app.css's stacked-layout width:100% rule, which is why the left
   column's cards rendered ~300px while the right column (whose pin here lacks
   !important) went full width. Same selector strength + !important + later in
   the cascade = this block wins on phones; desktop collapsed sizing untouched.
------------------------------------------------------------------------------ */
@media (max-width: 800px) {
    html.zb-collapsed #filter-region-left-col,
    html.zb-collapsed #filter-region-right-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    html.zb-collapsed #filter-fund,
    html.zb-collapsed #filter-price,
    html.zb-collapsed #filter-intraday,
    html.zb-collapsed #filter-daily,
    html.zb-collapsed #filter-sector,
    html.zb-collapsed #filter-trend,
    html.zb-collapsed #filter-volume {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* the header rail stops short of #main-content's vertical scrollbar instead of covering it */
html.zb-collapsed #main-content #header-right-section.header-rail { right: var(--zb-sbw, 0px) !important; }


/* ------------------------------------------------------------------------------
   Phone / collapsed navigation, second design (Steve 2026-10-10: "the mobile menus are just
   drop down combo boxes"). One row: menu button | Long / Short switch | scan pill | search.
   Colours are theme-neutral (grey washes over the page), so one set serves light and dark.
   On phones the menu is a side drawer and the scan list a bottom sheet; on a collapsed desktop
   window both stay the anchored panels they were (hover-open still applies there).
   ------------------------------------------------------------------------------ */
html.zb-collapsed #top-menu-mobile {
    grid-template-columns: auto auto minmax(0, 1.5fr) minmax(64px, 1fr);
}
html.zb-collapsed #top-menu-mobile:not(:has(#mobile-scan-button)) {
    grid-template-columns: auto auto 0 minmax(120px, 170px);
}
html.zb-collapsed #menu-mobile-seg { grid-column: 2; grid-row: 1; }
html.zb-collapsed #menu-mobile-watchlists { grid-column: 3; }
html.zb-collapsed #mobile-ticker-search,
html.zb-collapsed #search-results-clear { grid-column: 4; }
html.zb-collapsed #top-menu-mobile .zen-search { grid-column: 4; grid-row: 1; min-width: 0; }

html.zb-collapsed #mobile-direction-button {
    width: 34px; height: 32px; padding: 0; justify-content: center;
    border: 0; border-radius: 8px; font-size: 15px;
    background: rgba(128, 128, 128, .16); color: var(--page-text, inherit);
}
html.zb-collapsed #mobile-direction-button:active { background: rgba(128, 128, 128, .3); }

#menu-mobile-seg {
    display: inline-flex; height: 32px; padding: 2px; gap: 2px; box-sizing: border-box;
    border-radius: 9px; background: rgba(128, 128, 128, .16);
}
.m-seg-btn {
    border: 0; border-radius: 7px; padding: 0 9px; background: transparent; color: var(--page-text, inherit);
    font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; opacity: .7;
}
.m-seg-btn.m-seg-on { opacity: 1; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.m-seg-long.m-seg-on { background: #16a34a; }
.m-seg-short.m-seg-on { background: #dc2626; }

html.zb-collapsed #mobile-scan-button {
    height: 32px; padding: 0 12px; gap: 7px; justify-content: flex-start;
    border: 0; border-radius: 16px; font-size: 13px; font-weight: 600;
    background: rgba(128, 128, 128, .16); color: var(--page-text, inherit);
}
html.zb-collapsed #mobile-scan-button .mobile-scan-button-label { flex: 1 1 auto; min-width: 0; }
html.zb-collapsed #mobile-scan-button .m-scan-ico { font-size: 11px; opacity: .6; }
html.zb-collapsed #mobile-scan-button .fa-chevron-down { font-size: 10px; opacity: .6; }
html.zb-collapsed #mobile-scan-button:active { background: rgba(128, 128, 128, .3); }

/* Menu rows: icon, label, count; the screen you are on is marked. */
.m-drawer-head { display: none; }
#mobile-direction-menu .m-nav-row { display: flex; align-items: center; gap: 12px; font-weight: 500; }
#mobile-direction-menu .m-nav-row > i { width: 18px; text-align: center; opacity: .7; }
#mobile-direction-menu .m-nav-count {
    margin-left: auto; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600;
    background: rgba(128, 128, 128, .18);
}
#mobile-direction-menu .m-nav-row.m-nav-on {
    font-weight: 700; background: rgba(34, 197, 94, .14); box-shadow: inset 3px 0 0 #22c55e;
}
#mobile-direction-menu .m-nav-row.m-nav-on > i { opacity: 1; color: #22c55e; }

@media (max-width: 700px) {
    /* Side drawer. Always laid out, slid off-screen when closed, so it can animate; the inline
       top that zbPositionPanel writes for the anchored panel is overruled. */
    #mobile-direction-menu.mobile-mini-menu {
        display: block; visibility: hidden;
        top: 0 !important; left: 0; right: auto; bottom: 0;
        width: min(84vw, 320px); max-height: none; padding: 0 0 16px;
        border: 0; border-radius: 0 16px 16px 0;
        transform: translateX(-104%);
        transition: transform .2s ease, visibility 0s linear .2s;
    }
    #mobile-direction-menu.mobile-mini-menu.open {
        visibility: visible; transform: none; transition: transform .2s ease;
    }
    #mobile-direction-menu .m-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 1; padding: 14px 16px; margin-bottom: 4px;
        font-size: 16px; font-weight: 700; background: inherit;
        border-bottom: 1px solid rgba(128, 128, 128, .2);
    }
    #mobile-direction-menu .m-drawer-head i { font-size: 18px; opacity: .6; padding: 4px; }
    #mobile-direction-menu .m-nav-row { padding: 13px 16px; font-size: 15px; border-bottom: 0; }
    /* the menu button must not show through the open drawer (it is lifted above the backdrop) */
    html:has(#mobile-direction-menu.open) #mobile-direction-button,
    html:has(#mobile-direction-menu.open) #mobile-scan-button { z-index: 1 !important; }

    /* Scan list as a bottom sheet. */
    #mobile-mega-menu {
        display: block; visibility: hidden;
        top: auto !important; left: 0; right: 0; bottom: 0; height: 80vh; height: 80dvh;
        padding: 0 6px 10px; border: 0; border-radius: 18px 18px 0 0;
        transform: translateY(104%);
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    #mobile-mega-menu.open { visibility: visible; transform: none; transition: transform .22s ease; }
    #mobile-mega-menu::before {
        content: ""; display: block; position: sticky; top: 0; z-index: 2;
        height: 22px; margin: 0 -6px 2px;
        background: linear-gradient(rgba(128, 128, 128, .55), rgba(128, 128, 128, .55)) center / 40px 4px no-repeat;
        background-color: inherit; border-radius: 18px 18px 0 0;
    }
}
/* Wide collapsed window: the menu is a compact panel under its button, not a full-width slab. */
@media (min-width: 701px) {
    #mobile-direction-menu.mobile-mini-menu { right: auto; width: 300px; }
}

/* Phones: the page never scrolls sideways (Steve 2026-10-10, iPhone SE). The grid's containers
   carry desktop minimum widths (inline min-width from _gridWidth, a 600px #standard-region), so
   the whole page slid sideways and took the logo and the header with it. Held to the screen,
   the Rows table scrolls sideways inside its own box (.ticker-container, which already scrolls
   it up and down) and its toolbar stays put; Cards simply wrap to the screen. */
@media (max-width: 700px) {
    html.zb-collapsed #watchlist { min-width: 0 !important; width: auto !important; max-width: calc(100vw - 5px); box-sizing: border-box; }
    html.zb-collapsed #big-grid-container,
    html.zb-collapsed .mini-grid-full { min-width: 0 !important; }
    html.zb-collapsed #watchlist #standard-region { width: auto !important; max-width: 100%; }
    html.zb-collapsed #grid-region { max-width: calc(100vw + 137px); }
    html.zb-collapsed #main-content { overflow-x: hidden; }
    /* The page area stopped 21px short of the screen's bottom, an empty band under the list:
       it now fills what the banner leaves (zbFitGrid in global.js sizes the list to match). */
    html.zb-collapsed .main-bg { display: flex !important; flex-direction: column; }
    html.zb-collapsed .main-bg > #main-content { flex: 1 1 auto; height: auto !important; min-height: 0; }
    html.zb-collapsed .mini-grid-full .ticker-container > .chart-bar { position: sticky; left: 0; }
    /* slim scrollbars where a browser draws them at all (phones overlay theirs) */
    html.zb-collapsed .ticker-container { scrollbar-width: thin; }
}
/* 375px and under: the top rail ran 9px over and pushed the logo off the left edge. */
@media (max-width: 400px) {
    html.zb-collapsed #header-right-section.header-rail { gap: 5px; padding-left: 4px; padding-right: 6px; }
}
/* no focus box left behind on the Long / Short switch after a tap */
.m-seg-btn:focus { outline: none; }
.m-seg-btn:focus-visible { box-shadow: 0 0 0 2px rgba(79, 142, 247, .6); }

/* Phones, By Sector heading (Steve 2026-10-10 "a little funky"): the desktop gradient fades to
   white (light) or navy (dark) across a wide bar; on a phone that put the white Strength line
   and the heading buttons on a washed-out ground. A solid teal bar here, with room under the
   second line. */
@media (max-width: 700px) {
    html.zb-collapsed .grid-heading-text-sector {
        background: linear-gradient(90deg, rgb(26, 91, 81) 0%, rgb(26, 91, 81) 55%, rgb(58, 124, 113) 100%);
        padding-bottom: 5px;
    }
}

/* Phones: Fast Charts only (Steve 2026-10-10). The mode buttons and the Fast chart's own ways
   into TradingView are hidden; Index.razor.cs (EffectiveChartMode) renders Fast Charts there
   whatever the saved choice. The gear stays. Scoped to the main window's panel (#charts): a narrow
   pop-out window on a desktop keeps its own TradingView button. */
@media (max-width: 700px) {
    #charts .chart-mode-switch > .cpm-btn:not(.chart-settings-gear),
    #charts .static-chart-tv-btn { display: none !important; }
}

/* Phones: the chart overlay covers the whole screen (Steve 2026-10-10). A max-height meant for
   the docked panel capped it about 50px short, so the scan list showed through underneath. */
@media (max-width: 700px) {
    html.zb-m-charts #charts {
        top: 0 !important; bottom: 0 !important; height: auto !important;
        max-height: none !important; margin-top: 0 !important;
    }
}

/* Phones: the "Chart" chip shows only where there is no preview to tap (Steve 2026-10-10): with
   Rows or Cards on, tapping a preview opens the full chart. It always shows while the overlay is
   open, where it is the close button. */
@media (max-width: 700px) {
    html:not(.zb-m-charts) .m-charts-fab.m-fab-has-previews { display: none !important; }
}