(app.js), and this rule caps + centers that wrapper, matching the narrower centered feel of the original standalone prototype. margin:0 auto centers it as a flex item of .tab-panel (auto margins absorb the extra cross-axis space in a column flex container, so no align-self override is needed). */ .money-flow-wrap { width: 100%; max-width: 1320px; margin: 0 auto; } .progress-row { font-size: 12px; color: #e6e6e6; margin-bottom: 2px; } .progress-bar-track { height: 14px; background-color: #1b1e23; border: 1px solid #2b2f36; border-radius: 4px; overflow: hidden; margin-bottom: 4px; } .progress-bar-fill { height: 100%; width: 0%; background-color: #2f6fed; transition: width 0.2s ease; } .hint { color: #6d7480; font-size: 11px; margin: 0 0 6px 0; } /* Backtest results table win-rate call-outs - a win rate at or below 55% isn't a real edge (the threshold is the user's own call, not just "beats a coin flip" - originally 60%, revised down to 55% by explicit user decision), so those cells fade into the background while anything genuinely above 55% is bolded white to jump out immediately. */ .backtest-edge { color: #ffffff; font-weight: 700; } .backtest-no-edge { color: #8891a3; font-weight: 400; } /* Market results sub-tabs (Backtest tab) - one per market ("US"/"Hong Kong"), each with its own results table - see app.js's buildLayout()/ showMarketResultsTab(). Nested one level deeper than the top-level .tab-btn/.tab-panel pair above, so given its own class names rather than reusing those directly (avoids any risk of showMarketResultsTab() colliding with showTab()'s own top-level tab-switching logic), but styled to look like a natural continuation of the same tab convention. */ .market-tab-bar { display: flex; border-bottom: 1px solid #2b2f36; margin-bottom: 6px; } .market-tab-btn { background: #1b1e23; color: #b7bcc4; border: 1px solid #2b2f36; border-bottom: none; border-radius: 0; padding: 5px 14px; font-size: 12px; } .market-tab-btn.active { background: #23262c; color: #ffffff; } .market-tab-panel { display: none; } .market-tab-panel.active { display: block; } /* Fundamentals tab - a model cell that couldn't compute (see fundamentals_valuation.ModelResult's own docstring) - grey text, matching ui_app.py's FundamentalsTab._model_item() foreground color (#8891a3). The specific reason is available as a native title/tooltip attribute (see fundamentalsModelTd() in app.js), not shown inline. */ td.fundamentals-na { color: #8891a3; } /* Backtest results table wrapper - deliberately its OWN class, not a reuse of .table-wrap above, by explicit user request ("just display in full, no need for a scroll bar on the right"). .table-wrap's flex: 0 0 46% + overflow: auto exist for the live results tables' split view (a table sharing height with a chart panel next to it) - reusing it here forced the Backtest table into a short, independently-scrolling box even though there's no chart panel beside it to share space with. This class carries the same border/background styling for visual consistency, but no height cap and no overflow: auto - the table renders at its full natural height, and the page scrolls normally (via the browser's own document-level scrollbar) if that's taller than the viewport. */ .backtest-table-panel { border: 1px solid #2b2f36; background-color: #1b1e23; } /* -- watchlist tab (2026-09-20 UI revision) ------------------------------ Combined "latest signal per symbol" table + the per-symbol Recent History table below it, both reuse .backtest-table-panel's border/ background (natural height, no forced scroll box - same reasoning as that class's own comment) plus overflow-x:auto here so the 5-column table doesn't force the whole page wider on a narrow/mobile viewport; it scrolls sideways within its own box instead. */ .watchlist-table-panel { overflow-x: auto; } .watchlist-symbol-cell { cursor: pointer; color: #6fa8ff; } .watchlist-symbol-cell:hover { text-decoration: underline; } tr.watchlist-row.selected { background-color: #23262c; } #watchlistAddInput { flex: 0 1 160px; min-width: 100px; } /* Responsive: below 1024px (phones and tablet-portrait, see the shared breakpoint reference at the top of this file) the Watchlist tab's add row stacks instead of clipping, and its table cells get tighter padding so more of each row fits without needing to scroll sideways too (font size itself is handled by the global type scale at the top of this file, not here). Scoped to the Watchlist panel only, by explicit user request - the rest of the app's layout (toolbar, other tabs) is unchanged. */ @media (max-width: 1023px) { .tab-panel[data-tf-panel="__watchlist__"] .watchlist-add-row { align-items: stretch; } .tab-panel[data-tf-panel="__watchlist__"] #watchlistAddInput { flex: 1 1 auto; width: 100%; box-sizing: border-box; } .tab-panel[data-tf-panel="__watchlist__"] #watchlistAddBtn { width: 100%; } .tab-panel[data-tf-panel="__watchlist__"] thead th, .tab-panel[data-tf-panel="__watchlist__"] td { padding: 4px; } } /* Portfolio tab - EXE alert flag (see scan_engine.ScanEngine. check_portfolio_alerts()'s own docstring for what triggers this: a raw bearish EXE bar on a held stock's most recent 2-Day bar). A CSS animation, not a JS setInterval, so the flashing keeps running even if the tab is backgrounded/inactive - genuinely eye-catching, matching ui_app.py's own QTimer-driven blink for the desktop Portfolio tab. */ @keyframes portfolio-alert-blink { 0%, 49% { background-color: #ff3b30; color: #ffffff; } 50%, 100% { background-color: #5c1a17; color: #f2c4c1; } } td.portfolio-alert-cell { animation: portfolio-alert-blink 1s step-end infinite; font-weight: 700; text-align: center; } button.portfolio-ack-btn { padding: 3px 10px; font-size: 11px; } /* Strategy picker (Backtest tab) - a native

disclosure, one checkbox per active strategy, used to scope a backtest run to a subset of strategies. See app.js's buildLayout()/selectedBacktestStrategyKeys(). */ .strategy-picker { position: relative; } .strategy-picker > summary { list-style: none; cursor: pointer; background-color: #23262c; color: #e6e6e6; border: 1px solid #3a3f47; padding: 6px 14px; border-radius: 4px; font-size: 13px; } .strategy-picker > summary:hover { background-color: #2f333b; } .strategy-picker > summary::-webkit-details-marker { display: none; } .strategy-picker-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background-color: #1b1e23; border: 1px solid #2b2f36; border-radius: 6px; padding: 8px 10px; min-width: 220px; max-height: 320px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .strategy-picker-item { display: flex; align-items: center; gap: 6px; padding: 3px 2px; font-size: 12px; white-space: nowrap; } .strategy-picker-actions { display: flex; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #2b2f36; } .strategy-picker-actions button { padding: 3px 8px; font-size: 11px; } .split { flex: 1 1 auto; min-height: 0; display: flex; gap: 8px; } /* -- results table ---------------------------------------------------- */ .table-wrap { flex: 0 0 46%; overflow: auto; border: 1px solid #2b2f36; background-color: #1b1e23; } table { width: 100%; border-collapse: collapse; font-size: 12.5px; } thead th { position: sticky; top: 0; background-color: #23262c; color: #b7bcc4; padding: 6px; border: 1px solid #2b2f36; z-index: 1; } /* Clickable-header sorting (Symbol/Name/Market/Signal/Last/Industry/Market Cap - see state.sort's docstring in app.js). The only non-sortable header is Bar Date, left as plain thead th above, no hover/cursor change. Bid/Ask/Volume columns were removed entirely by explicit user request; Market was added in Volume's place, and Name was later inserted between Symbol and Market (also by explicit user request). Market Cap was added later still, sourced opportunistically from IBKR's reqFundamentalData and also sortable (numeric) from the start. */ thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { background-color: #2b2f36; } .sort-indicator { color: #5bc0de; font-size: 10px; } tbody td { padding: 5px 6px; border: 1px solid #2b2f36; text-align: center; white-space: nowrap; } tbody td.left { text-align: left; } tbody tr:nth-child(even) { background-color: #202329; } tbody tr:hover { background-color: #262a31; cursor: pointer; } /* Backtest-informed PER-STRATEGY coloring for the live per-timeframe results tables (2-Day/1-Week/1-Month) - "only bold the strategy that meets the win-rate criteria for that timeframe" (explicit user request, 2026-09-04, replacing an earlier whole-row edge-row/no-edge-row design: a row's Signal cell can list 2+ matched strategy names, and bolding the WHOLE row just because ONE of them cleared the bar wrongly implied the others did too). Each strategy name in the Signal cell is its own (see renderRow() in app.js). .match-edge (white+bold) when THAT span's own strategy_key cleared BACKTEST_EDGE_WIN_RATE at any horizon for THIS timeframe AND THIS row's own market (state.testedStrategies/ effectiveStrategies are market-scoped too, since the same date - US and HK results are no longer pooled together, matching the Backtest tab's own per-market sub-tabs); .match-no-edge (light grey) when tested but never cleared it. A span with neither class (never backtested for this timeframe/market) stays the plain default text color - unproven-but- untested shouldn't look the same as proven-and-failed. See app.js's applyRowEffectiveness(). */ td.signal-cell span.match-edge { color: #ffffff; font-weight: 700; } td.signal-cell span.match-no-edge { color: #8891a3; font-weight: 400; } /* Row selection (click to view chart) always wins over the backtest-derived per-strategy coloring above. Unlike the old whole-row design, a plain `tr.selected td { color: ... }` rule alone isn't enough here: a span's OWN explicit color (set by the two rules above) beats an inherited value from its parent td regardless of the td rule's specificity, so the spans need their own explicit override too. */ tbody tr.selected td { color: #ffffff; } tbody tr.selected td.signal-cell span.match-edge, tbody tr.selected td.signal-cell span.match-no-edge { color: #ffffff; } tbody tr.selected { background-color: #2f6fed; color: #ffffff; } /* "Last" backfilled from the latest stored bar rather than a live IBKR snapshot (ScanMatch.quote_is_live == false) - italic so it's visually distinct from a real-time quote, independent of whatever color the row's backtest-edge status above already set. See app.js's renderRow() (the Volume column this comment originally also covered was later removed entirely, replaced by a sortable Market column). */ td.stale-quote { font-style: italic; } /* -- chart panel ---------------------------------------------------------*/ .chart-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; /* NEW: contained vertical scroll - .chart-container below is now a fixed height (not flex:1 1 auto) and the 6 indicator panels further below add a further ~1420px on top of that, so the combined content height routinely exceeds this pane's own bounded height (inherited from .split above). Scoping the scrollbar to just this pane (rather than the whole page) keeps the results table/toolbar always visible alongside it - by explicit user request ("If we need to scroll down the screen to see the results of the 6 indicators, so be it"). */ overflow-y: auto; } .chart-title-row { display: flex; align-items: baseline; gap: 10px; padding: 1px 2px 4px 2px; } .chart-title { font-size: 12px; font-weight: 600; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .chart-legend { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; font-size: 10px; color: #9fa6b2; white-space: nowrap; } .legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; } .legend-dot:first-child { margin-left: 0; } .legend-dot.sma20 { background-color: #f2c14e; } .legend-dot.sma50 { background-color: #5bc0de; } .legend-dot.sma200 { background-color: #c77dff; } .legend-dot.swinglow { background-color: #4ade80; } .legend-dot.pastsignal { background-color: #ffff00; } .chart-container { /* CHANGED from flex: 1 1 auto - a fixed height, by explicit user request ("Keep the chart size the same size, and add the indicators below"). Previously this stretched to fill 100% of .chart-wrap's own bounded height; now .chart-wrap holds MORE than just this one element (the 6 indicator panels below it too), so leaving this flexible would let it get squeezed smaller every time content is added beneath it - a fixed 500px keeps it stable and predictable regardless of what's below. flex-shrink: 0 (via the 0 in "0 0 500px") is what actually forces .chart-wrap's total content past its own bounded height, which is what makes the overflow-y: auto scrollbar above actually engage. */ flex: 0 0 500px; min-height: 0; /* NEW: anchors .signal-marker-canvas below, which is absolutely positioned to fill this same box - "the past signals" chart-marker overlay (2026-08-22, see web/static/app.js's renderSignalMarkers()) is drawn on a plain