/* ───────────────────────────────────────────────────────────────────── Dashboard-new — scoped widget framework styles. All rules are scoped under [data-page="dash"] so they never leak into the rest of the options-analytics app. Re-uses the existing theme tokens declared in styles.css (--bg, --panel, --border, …). ───────────────────────────────────────────────────────────────────── */ /* Page-level viewport fit — mirrors the main Dashboard page so the widget grid uses exactly the available height between topbar and bottom of viewport. Without this, the .page container expands to fit children and the whole tab scrolls vertically. IMPORTANT: only `.active` may declare `display`. Setting `display` on the bare `[data-page="dash"]` selector overrides the global `.page { display: none }` (attribute selector wins on specificity) and the dashboard then renders on every route. Custom properties like --dn-gap and layout properties that don't affect display (height, flex-direction) live on the bare selector and only matter while the page is actually visible. */ .page[data-page="dash"].active { display: flex; flex-direction: column; height: calc(100vh - 44px); /* topbar */ /* Scope any necessary scrolling to the page itself (not the body) so the sticky dashboard title bar has a scrollable ancestor to anchor against. Most desktop viewports fit the whole grid → no scrollbar appears thanks to overflow-y:auto; smaller screens or crowded boards still get an inline scroll instead of a page-wide one, with the title bar pinned. */ overflow-y: auto; overflow-x: hidden; padding: 0 10px 10px; box-sizing: border-box; } body.page-dash .instr-bar { display: none; } body.page-rollatm .instr-bar { display: none; } [data-page="dash"] { --dn-gap: 6px; flex-direction: column; height: 100%; min-height: 0; } /* Theme-aware widget elevation. Each theme gets a brighter border so the widget edge reads against --panel, plus a layered drop shadow that lifts the card off --bg. Dark / blue themes use opaque black shadows (background is already dark, so they need extra punch). Light theme uses tinted navy shadows so the lift doesn't look grey. */ :root[data-theme="dark"] [data-page="dash"] { --dn-w-border: #3a4252; --dn-w-elev: 0 1px 2px rgba(0,0,0,0.32), 0 6px 18px rgba(0,0,0,0.32); --dn-w-elev-hover: 0 1px 2px rgba(0,0,0,0.36), 0 10px 26px rgba(0,0,0,0.40); } :root[data-theme="blue"] [data-page="dash"] { --dn-w-border: #34416a; --dn-w-elev: 0 1px 2px rgba(0,0,0,0.38), 0 6px 20px rgba(0,0,0,0.36); --dn-w-elev-hover: 0 1px 2px rgba(0,0,0,0.42), 0 10px 28px rgba(0,0,0,0.44); } :root[data-theme="light"] [data-page="dash"] { --dn-w-border: #b4becd; --dn-w-elev: 0 1px 2px rgba(13,61,138,0.10), 0 6px 18px rgba(13,61,138,0.12); --dn-w-elev-hover: 0 1px 2px rgba(13,61,138,0.12), 0 10px 26px rgba(13,61,138,0.18); } /* ── control bar (Symbol / Expiry / + Widgets) ─────────────────────── */ /* Sticky against the dashboard page's scroll area. When the grid is tall enough to push the body, the title row + tabs + symbol/expiry + basis seg stay pinned at the top instead of scrolling away. z-index sits above .dn-w so widget headers can't peek through. */ [data-page="dash"] .dn-ctlbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-bottom: 10px; position: sticky; top: 0; /* z-index 10 keeps the bar above the widget grid (which sits at the auto stacking baseline) but below the global .topbar (z-index 30) and its nav dropdowns — otherwise the Analysis / Strategy / Market menus get clipped behind the dashboard title row. */ z-index: 10; background: var(--bg); padding: 8px 0 6px; /* Soft fade so widgets scrolling under the bar don't clash with its bottom edge — borrows the panel-2 token so it reads on every theme without a hard line. */ box-shadow: 0 4px 6px -4px rgba(0,0,0,0.18); } [data-page="dash"] .dn-ctlbar .dn-title { font-size: 16px; font-weight: 600; } [data-page="dash"] .dn-ctlbar .dn-sub { font-size: 11px; color: var(--muted); } [data-page="dash"] .dn-ctl { display: flex; align-items: center; gap: 8px; } [data-page="dash"] .dn-sep { width: 1px; height: 18px; background: var(--border); } [data-page="dash"] .dn-spacer { flex: 1; } /* Multi-board tab strip — sits between the title and the symbol/expiry controls. Each tab is a saved layout. Active tab gets the accent border, hover lifts the muted color, ✕ on hover deletes (only when more than one board exists). */ [data-page="dash"] .dn-tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; max-width: 50vw; scrollbar-width: thin; } [data-page="dash"] .dn-tab { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px 4px 12px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; outline: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color 0.12s, border-color 0.12s, background 0.12s; } [data-page="dash"] .dn-tab:hover { color: var(--text); border-color: var(--accent); } [data-page="dash"] .dn-tab.active { color: var(--text); border-color: var(--accent); font-weight: 600; background: rgba(122,169,240,0.10); } [data-page="dash"] .dn-tab .dn-tab-x { color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 3px; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s; } [data-page="dash"] .dn-tab:hover .dn-tab-x { opacity: 1; } [data-page="dash"] .dn-tab .dn-tab-x:hover { color: var(--red); background: rgba(231,111,111,0.12); } [data-page="dash"] .dn-tab-rename-input { background: var(--panel-2); color: var(--text); border: 1px solid var(--accent); border-radius: 3px; padding: 1px 4px; font: inherit; font-size: 12px; font-weight: 600; outline: none; min-width: 80px; max-width: 160px; } [data-page="dash"] .dn-tab-add { background: transparent; color: var(--muted); border: 1px dashed var(--border); border-radius: 4px; padding: 4px 9px; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; outline: none; transition: color 0.12s, border-color 0.12s; } [data-page="dash"] .dn-tab-add:hover { color: var(--accent); border-color: var(--accent); } [data-page="dash"] .dn-ctlbar select, [data-page="dash"] .dn-ctlbar input.dn-txt { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 5px 9px; font: inherit; font-size: 12px; outline: none; cursor: pointer; } [data-page="dash"] .dn-ctlbar input.dn-txt { cursor: text; } [data-page="dash"] .dn-ctlbar select:hover, [data-page="dash"] .dn-ctlbar input.dn-txt:focus { border-color: var(--accent); } /* `.dn-btn` is used in both the control bar AND the cog popover header. Style it generically so the cog's Reset / Apply buttons get the same theme-aware look (was inheriting browser-default white styling). */ [data-page="dash"] button.dn-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 5px 9px; font: inherit; font-size: 12px; outline: none; cursor: pointer; } [data-page="dash"] button.dn-btn:hover { border-color: var(--accent); color: var(--text); } [data-page="dash"] button.dn-btn.primary { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); color: #ffffff; border-color: #2563eb; font-weight: 600; box-shadow: 0 1px 3px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.18); } [data-page="dash"] button.dn-btn.primary:hover { background: linear-gradient(180deg, #4d8ff8 0%, #2c6ef0 100%); border-color: #2c6ef0; } /* Market-hours badge in the control bar — explains why widgets aren't ticking outside trading hours. */ [data-page="dash"] .dn-market-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-page="dash"] .dn-market-badge[data-tone="green"] { color: var(--green); border-color: rgba(62,207,142,0.35); background: rgba(62,207,142,0.10); } /* Global "Updated …" indicator — same chip styling as the market badge but neutral colours. Tabular-nums keeps the seconds digit from jittering as it ticks each second. */ [data-page="dash"] .dn-last-update { font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Mirrored high/low chart inside the breadth widget. Canvas is responsive but needs an explicit height (Chart.js with maintainAspectRatio=false picks up the parent height). */ [data-page="dash"] .dn-breadth-chart-wrap { margin-top: 10px; height: 220px; position: relative; } [data-page="dash"] .dn-breadth-chart-title { font-size: 11px; font-weight: 600; color: var(--text); padding: 0 0 4px; } [data-page="dash"] .dn-breadth-chart-wrap canvas { width: 100% !important; height: calc(100% - 18px) !important; } /* ── Inline live-price tile in the dashboard control bar ────────────── Replaces the global #instr-bar (which is hidden on the dashboard via body.page-dash). Shows the current underlying's last price + chg in a compact chip, plus a chart icon that pops the main-app intraday modal. */ [data-page="dash"] .dn-instr-tile { display: inline-flex; align-items: center; gap: 8px; padding: 3px 9px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 2px; } [data-page="dash"] .dn-instr-tile[hidden] { display: none; } [data-page="dash"] .dn-instr-lp { font-weight: 600; font-size: 13px; color: var(--text); } [data-page="dash"] .dn-instr-chg { font-size: 11.5px; color: var(--muted); } [data-page="dash"] .dn-instr-chg.up { color: var(--green); } [data-page="dash"] .dn-instr-chg.down { color: var(--red); } [data-page="dash"] .dn-chart-btn { background: transparent; border: 0; padding: 2px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } [data-page="dash"] .dn-chart-btn:hover { color: var(--accent); background: rgba(255,255,255,0.04); } /* ── Change-basis seg (Prev Close / Day Open) in the dn-ctl row ─── */ [data-page="dash"] .dn-basis-seg { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--panel-2); margin-left: 4px; } [data-page="dash"] .dn-basis-seg .seg-btn { background: transparent; border: 0; padding: 3px 10px; font-size: 11.5px; line-height: 1.4; color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); } [data-page="dash"] .dn-basis-seg .seg-btn:last-child { border-right: 0; } [data-page="dash"] .dn-basis-seg .seg-btn:hover { color: var(--text); } [data-page="dash"] .dn-basis-seg .seg-btn.active { background: var(--accent); color: #fff; } /* ── widget picker panel ───────────────────────────────────────────── */ [data-page="dash"] .dn-panel { position: absolute; top: 100px; right: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); z-index: 1000; width: 480px; max-height: 500px; display: flex; flex-direction: column; } [data-page="dash"] .dn-panel[hidden] { display: none; } [data-page="dash"] .dn-panel-hd { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); } [data-page="dash"] .dn-panel-hd button { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px; } [data-page="dash"] .dn-panel-hd button:hover { color: var(--red); } [data-page="dash"] .dn-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; overflow-y: auto; } [data-page="dash"] .dn-panel-cat { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin: 6px 2px 2px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } [data-page="dash"] .dn-panel-cat:first-child { margin-top: 0; } [data-page="dash"] .dn-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 10px; cursor: grab; user-select: none; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.12s, background 0.12s, transform 0.08s; } /* Tile hover — soft accent wash, not a near-black panel. The earlier #232a37 was almost indistinguishable from the picker background on dark theme, making the hovered tile look "lost". */ [data-page="dash"] .dn-tile:hover { border-color: var(--accent); background: rgba(122,169,240,0.10); } [data-page="dash"] .dn-tile:active { cursor: grabbing; transform: scale(0.97); } [data-page="dash"] .dn-tile.dragging { opacity: 0.4; } [data-page="dash"] .dn-tile-row { display: flex; align-items: center; gap: 7px; } [data-page="dash"] .dn-tile-icon { font-size: 16px; line-height: 1; } [data-page="dash"] .dn-tile-title { font-size: 12px; font-weight: 600; } [data-page="dash"] .dn-tile-sub { font-size: 10.5px; color: var(--muted); line-height: 1.3; } /* ── Hover mini-chart (option chain / straddle / strangle tables) A floating LWC chart pinned to the body so it can escape any widget's overflow:hidden. JS positions it next to the hovered row, flipping left/right based on viewport bounds. */ .dn-hover-chart { position: fixed; z-index: 2000; background: var(--panel); color: var(--text); border: 1px solid var(--dn-w-border, var(--border)); border-radius: 6px; box-shadow: var(--dn-w-elev, var(--shadow)); display: flex; flex-direction: column; overflow: hidden; pointer-events: none; /* don't trap mouse events when hovering tables */ } .dn-hover-chart[hidden] { display: none; } .dn-hover-chart .dn-hover-hd { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-2), var(--panel)); flex: 0 0 auto; } .dn-hover-chart .dn-hover-title { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; } .dn-hover-chart .dn-hover-status { font-size: 10.5px; color: var(--muted); font-style: italic; } .dn-hover-chart .dn-hover-body { flex: 1 1 auto; min-height: 0; position: relative; } /* ── grid container ────────────────────────────────────────────────── */ [data-page="dash"] .dn-grid { flex: 1 1 auto; display: grid; grid-template-columns: 1fr; gap: var(--dn-gap); min-height: 0; position: relative; } [data-page="dash"] .dn-rowgroup { display: grid; gap: var(--dn-gap); min-height: 0; min-width: 0; position: relative; } /* Per-column subgrid: each column has its own internal vertical grid so horizontal seams within one column resize that column's stack without touching widgets in other columns (Kite model). */ [data-page="dash"] .dn-col { display: grid; gap: var(--dn-gap); min-height: 0; min-width: 0; position: relative; } [data-page="dash"] .dn-grid:empty::before { content: 'No widgets. Click "+ Widgets" to begin.'; align-self: center; justify-self: center; color: var(--muted); font-size: 14px; } /* ── widget chrome ─────────────────────────────────────────────────── */ /* Widget chrome — slightly brighter border than the page tokens, plus a two-layer drop shadow for depth. Both pieces are theme-aware via the --dn-w-border / --dn-w-elev tokens declared further down. */ [data-page="dash"] .dn-w { background: var(--panel); border: 1px solid var(--dn-w-border, var(--border)); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; box-sizing: border-box; box-shadow: var(--dn-w-elev, var(--shadow)); transition: box-shadow 0.15s, opacity 0.15s, border-color 0.15s, transform 0.15s; } [data-page="dash"] .dn-w:hover { box-shadow: var(--dn-w-elev-hover, var(--dn-w-elev, var(--shadow))); } [data-page="dash"] .dn-w.dragging { opacity: 0.3; } [data-page="dash"] .dn-w::after { content: ''; position: absolute; background: rgba(122,169,240,0.18); border: 2px solid var(--accent); border-radius: 4px; pointer-events: none; opacity: 0; z-index: 4; } [data-page="dash"] .dn-w.drop-left::after { opacity: 1; top: 4px; left: 4px; bottom: 4px; right: 50%; margin-right: 2px; } [data-page="dash"] .dn-w.drop-right::after { opacity: 1; top: 4px; left: 50%; bottom: 4px; right: 4px; margin-left: 2px; } [data-page="dash"] .dn-w.drop-top::after { opacity: 1; top: 4px; left: 4px; bottom: 50%; right: 4px; margin-bottom: 2px; } [data-page="dash"] .dn-w.drop-bottom::after { opacity: 1; top: 50%; left: 4px; bottom: 4px; right: 4px; margin-top: 2px; } [data-page="dash"] .dn-placeholder { position: absolute; background: rgba(122,169,240,0.12); border: 2px dashed var(--accent); border-radius: 4px; pointer-events: none; z-index: 6; } [data-page="dash"] .dn-w-hd { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--panel-2), var(--panel)); cursor: grab; user-select: none; } [data-page="dash"] .dn-w-hd:active { cursor: grabbing; } [data-page="dash"] .dn-w-hd .dn-w-cog, [data-page="dash"] .dn-w-hd .dn-w-close { cursor: pointer; } [data-page="dash"] .dn-w-icon { font-size: 14px; line-height: 1; } [data-page="dash"] .dn-w-title { font-size: 12.5px; font-weight: 600; } [data-page="dash"] .dn-w-sub { font-size: 10.5px; color: var(--muted); } [data-page="dash"] .dn-w-sub.custom { color: var(--amber); } [data-page="dash"] .dn-w-spacer { flex: 1; } [data-page="dash"] .dn-w-cog, [data-page="dash"] .dn-w-close { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 3px; font-size: 14px; line-height: 1; transition: background 0.12s, color 0.12s; } [data-page="dash"] .dn-w-cog:hover { background: rgba(255,255,255,0.06); color: var(--accent); } [data-page="dash"] .dn-w-close { font-size: 16px; } [data-page="dash"] .dn-w-close:hover { background: rgba(255,255,255,0.06); color: var(--red); } [data-page="dash"] .dn-w-body { flex: 1 1 auto; padding: 12px; overflow: auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } /* ── config popover ────────────────────────────────────────────────── */ /* Anchored to the widget chrome's top-right corner. Action row is pinned at the top (sticky) so it remains clickable even when the field body overflows the widget bounds. Body has its own scrollbar. */ [data-page="dash"] .dn-cfg { position: absolute; top: 32px; right: 6px; z-index: 100; background: var(--panel); border: 1px solid var(--border); border-radius: 5px; box-shadow: var(--shadow); min-width: 240px; max-height: calc(100% - 40px); display: flex; flex-direction: column; overflow: hidden; } [data-page="dash"] .dn-cfg-head { display: flex; gap: 6px; justify-content: flex-end; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--panel); flex: 0 0 auto; } [data-page="dash"] .dn-cfg-head button { font-size: 11.5px; padding: 4px 10px; } [data-page="dash"] .dn-cfg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } [data-page="dash"] .dn-cfg-row { display: flex; flex-direction: column; gap: 3px; } [data-page="dash"] .dn-cfg-row label { font-size: 10.5px; color: var(--muted); } [data-page="dash"] .dn-cfg-row select, [data-page="dash"] .dn-cfg-row input { width: 100%; box-sizing: border-box; } /* ── Form-control baseline (theme-aware) ─────────────────────────── Chrome on Windows paints native with the OS system-color background (≈ white) regardless of our CSS background property — until we drop the native chrome with `appearance: none`. This rule applies that drop + a theme-coloured fallback to every form control inside a widget or config popover, wrapped in :where() so specific classes (.dn-pc-sel, .dn-leg-*, .dn-tf-sel) still win without needing !important. */ [data-page="dash"] :where(.dn-w, .dn-cfg, .dn-panel) :where(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) { appearance: none; -webkit-appearance: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 11.5px; outline: none; } [data-page="dash"] :where(.dn-w, .dn-cfg, .dn-panel) :where(select:hover, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover) { border-color: var(--accent); } [data-page="dash"] :where(.dn-w, .dn-cfg, .dn-panel) :where(select:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus) { border-color: var(--accent); } /* Custom chevron — replaces the OS arrow we dropped via appearance:none. Two stacked linear-gradient triangles tinted with --muted so the cue stays visible on both dark and light themes. */ [data-page="dash"] :where(.dn-w, .dn-cfg, .dn-panel) select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) center, calc(100% - 7px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 22px; } /* Native option list — Firefox / Edge honour these; Chrome ignores them on Windows but renders OS-themed lists anyway. Setting them anyway eliminates the bright-white flash in the supported browsers. */ [data-page="dash"] option { background: var(--panel-2); color: var(--text); } /* Theme-aware scrollbars — applies to widget bodies, the picker panel, config popover body, table scrollers, etc. Without this the OS paints chunky white scrollbars on dark themes which break the immersion. Falls back to Firefox `scrollbar-color`. */ [data-page="dash"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-page="dash"] ::-webkit-scrollbar-track { background: var(--bg); border-radius: 5px; } [data-page="dash"] ::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--bg); border-radius: 6px; } [data-page="dash"] ::-webkit-scrollbar-thumb:hover { background: var(--muted); } [data-page="dash"] ::-webkit-scrollbar-corner { background: var(--bg); } [data-page="dash"] * { scrollbar-color: var(--border) var(--bg); scrollbar-width: thin; } /* Strategy-chart toolbar dropdown — inherits the baseline above. The .dn-pc-input alias is kept for the renderer that emits it. */ [data-page="dash"] .dn-pc-input { min-width: 60px; } [data-page="dash"] .dn-pc-lbl { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); font-weight: 600; } [data-page="dash"] .dn-pc-spacer { flex: 1; } /* Strategy legs editor — mirrors the main page's Strategy Builder: B/S · Expiry · Strike · Type · Lots · Price · ×. Fixed 7-col grid so the header labels line up with the inputs across themes / popover widths. Strike column hosts the rich mountStrikePicker (ITM/ATM/OTM tagged), so it needs enough width for the button + the offset chip. */ [data-page="dash"] .dn-w .dn-cfg:has(.dn-cfg-legs) { min-width: 600px; /* Allow the strike picker popover to overflow the cog popover bounds — without this, the rich picker (240px wide × 320px tall) gets clipped by the cog's overflow:hidden. We still keep the body scrollable for the rest of the controls. */ overflow: visible; } [data-page="dash"] .dn-w .dn-cfg:has(.dn-cfg-legs) .dn-cfg-body { overflow: visible; } [data-page="dash"] .dn-cfg-legs { gap: 6px; } [data-page="dash"] .dn-leg-hd, [data-page="dash"] .dn-leg-row { display: grid; grid-template-columns: 60px 1fr 130px 60px 56px 72px 24px; gap: 4px; align-items: center; } /* Strike-host fills its grid column; the picker's own .dn-sp-btn fills the host so it looks like a regular dropdown control in the row. */ [data-page="dash"] .dn-leg-strike-host { position: relative; } [data-page="dash"] .dn-leg-strike-host .dn-sp, [data-page="dash"] .dn-leg-strike-host .dn-sp-btn { width: 100%; box-sizing: border-box; } [data-page="dash"] .dn-leg-strike-host .dn-sp-btn { justify-content: space-between; } [data-page="dash"] .dn-leg-hd { font-size: 10px; color: var(--muted); padding: 0 2px; } [data-page="dash"] .dn-leg-row select, [data-page="dash"] .dn-leg-row input { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 11.5px; outline: none; } [data-page="dash"] .dn-leg-rm { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 0; } [data-page="dash"] .dn-leg-rm:hover { color: var(--red); border-color: var(--red); } [data-page="dash"] .dn-leg-add { align-self: flex-start; margin-top: 4px; font-size: 11px; padding: 4px 10px; } /* ── stub body ────────────────────────────────────────────────────── */ [data-page="dash"] .dn-stub-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 11.5px; align-items: baseline; } [data-page="dash"] .dn-stub-k { color: var(--muted); } [data-page="dash"] .dn-stub-v { color: var(--text); font-weight: 500; } [data-page="dash"] .dn-stub-v.override { color: var(--amber); } [data-page="dash"] .dn-stub-note { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--muted); font-style: italic; } /* ── Option Chain widget body — modern theme ───────────────────── */ [data-page="dash"] .dn-oc-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; border: 1px dashed var(--border); border-radius: 4px; } [data-page="dash"] .dn-oc-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 11px; padding: 0 0 6px; border-bottom: 1px solid var(--border); } [data-page="dash"] .dn-oc-spot { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; } [data-page="dash"] .dn-oc-chg { font-size: 11px; font-weight: 600; } [data-page="dash"] .dn-oc-chg.up { color: var(--green); } [data-page="dash"] .dn-oc-chg.dn { color: var(--red); } [data-page="dash"] .dn-oc-meta { color: var(--muted); font-size: 11px; margin-left: 4px; } [data-page="dash"] .dn-oc-pill { font-size: 10.5px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; line-height: 1.4; font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-oc-pill .dn-oc-pill-k { color: var(--muted); margin-right: 4px; font-weight: 500; } [data-page="dash"] .dn-oc-pill .dn-oc-pill-src { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 2px; } [data-page="dash"] .dn-oc-tbl-wrap { flex: 1 1 auto; overflow: auto; margin-top: 0; min-height: 0; } [data-page="dash"] .dn-oc-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; table-layout: fixed; } /* Sticky header — both rows pinned, fully opaque so scrolling rows can't bleed through. `--panel` is solid in both light/dark themes; forcing it on the th (not the thead row) is what actually paints the background opaquely inside the scroll container. z-index keeps the header above row cells, which would otherwise paint on top during inertial scroll. */ /* Both header rows have explicit matching heights so the second row's sticky top exactly equals the first row's rendered height — no gap between them when the table scrolls. The previous setup used non-uniform paddings (6/2 vs 4/4) and a hard-coded top:26 that didn't match the first row's actual ~21px height. */ [data-page="dash"] .dn-oc-tbl thead .dn-oc-grp th { position: sticky; top: 0; z-index: 3; background-color: var(--panel); padding: 0 4px; height: 22px; line-height: 22px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); box-sizing: border-box; } [data-page="dash"] .dn-oc-tbl thead .dn-oc-grp th.ce { color: var(--accent); text-align: left; } [data-page="dash"] .dn-oc-tbl thead .dn-oc-grp th.pe { color: var(--amber); text-align: right; } [data-page="dash"] .dn-oc-tbl thead .dn-oc-grp th.strike-grp { color: var(--text); text-align: center; } [data-page="dash"] .dn-oc-tbl thead .dn-oc-cols th { position: sticky; top: 22px; z-index: 3; background-color: var(--panel); padding: 0 6px; height: 22px; line-height: 22px; font-size: 10px; font-weight: 600; color: var(--muted); text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; box-shadow: 0 1px 0 var(--border); /* second border so the chg-line below isn't visually clipped */ box-sizing: border-box; } [data-page="dash"] .dn-oc-tbl thead .dn-oc-cols th.strike { text-align: center; } [data-page="dash"] .dn-oc-tbl tbody td { padding: 4px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.025); white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-oc-tbl tbody td.ce { background: var(--ce-tint); } [data-page="dash"] .dn-oc-tbl tbody td.pe { background: var(--pe-tint); } /* In-the-money cells take a soft green (CE ITM) / red (PE ITM) wash so moneyness is readable at a glance — matches the main chain page. */ [data-page="dash"] .dn-oc-tbl tbody td.ce.itm { background: rgba(62,207,142,0.12); } [data-page="dash"] .dn-oc-tbl tbody td.pe.itm { background: rgba(231,111,111,0.12); } [data-page="dash"] .dn-oc-tbl tbody td.strike { text-align: center; color: var(--muted); font-weight: 600; background: var(--panel-2); position: relative; } [data-page="dash"] .dn-oc-tbl tbody td.strike.atm { color: var(--amber); background: var(--row-atm); box-shadow: inset 0 0 0 1px rgba(212,168,87,0.35); } /* Per-cell main value + chg-percent sub-line */ [data-page="dash"] .dn-oc-v { color: var(--text); font-weight: 500; } [data-page="dash"] .dn-oc-chgline { font-size: 9.5px; line-height: 1.2; margin-top: 1px; font-weight: 500; opacity: 0.85; } [data-page="dash"] .dn-oc-chgline.up { color: var(--green); } [data-page="dash"] .dn-oc-chgline.dn { color: var(--red); } /* ATM row gets a faint amber tint on top of whatever moneyness tint the cell already has — so the ATM strip pops without re-coloring the cell. */ [data-page="dash"] .dn-oc-tbl tbody tr.atm td.ce, [data-page="dash"] .dn-oc-tbl tbody tr.atm td.pe { background-image: linear-gradient(0deg, rgba(212,168,87,0.08), rgba(212,168,87,0.08)); } [data-page="dash"] .dn-oc-err { color: var(--red); font-size: 11px; padding: 8px; } [data-page="dash"] .dn-oc-loading { color: var(--muted); font-size: 11px; padding: 8px; font-style: italic; } /* Config popover — column checkbox grid */ [data-page="dash"] .dn-cfg-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; padding: 4px 0; } /* Per-side group (used by straddle / strangle tables — one CALLS, PUTS and STRADDLE/STRANGLE bucket of checkboxes per group). */ [data-page="dash"] .dn-cfg-side { border-top: 1px dashed var(--border); padding: 4px 0 2px; margin-top: 4px; } [data-page="dash"] .dn-cfg-side:first-of-type { border-top: none; margin-top: 0; } [data-page="dash"] .dn-cfg-side-h { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 2px 0 4px; } [data-page="dash"] .dn-cfg-chk { display: flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; user-select: none; } [data-page="dash"] .dn-cfg-chk input { width: auto; } [data-page="dash"] .dn-cfg-chk span { color: var(--text); } /* ── seam handles ─────────────────────────────────────────────────── */ [data-page="dash"] .dn-seam { position: absolute; z-index: 5; } [data-page="dash"] .dn-seam-v { cursor: col-resize; width: 12px; } [data-page="dash"] .dn-seam-h { cursor: row-resize; height: 12px; } [data-page="dash"] .dn-seam::before { content: ''; position: absolute; background: transparent; transition: background 0.12s; border-radius: 2px; } [data-page="dash"] .dn-seam-v::before { left: 5px; width: 2px; top: 0; bottom: 0; } [data-page="dash"] .dn-seam-h::before { top: 5px; height: 2px; left: 0; right: 0; } [data-page="dash"] .dn-seam:hover::before { background: var(--accent); } [data-page="dash"] .dn-seam.active::before { background: #92b9f4; } [data-page="dash"] .dn-seam-v.active::before { width: 3px; } [data-page="dash"] .dn-seam-h.active::before { height: 3px; } /* ── card strip (metric widgets) ────────────────────────────────── */ [data-page="dash"] .dn-card-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; align-content: start; } [data-page="dash"] .dn-card-strip-2c { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } [data-page="dash"] .dn-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } [data-page="dash"] .dn-card-hero { grid-column: 1 / -1; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); } [data-page="dash"] .dn-card-l { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; } [data-page="dash"] .dn-card-v { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; } [data-page="dash"] .dn-card-s { font-size: 10.5px; color: var(--muted); } [data-page="dash"] .dn-card-s.up { color: var(--green); } [data-page="dash"] .dn-card-s.dn { color: var(--red); } [data-page="dash"] .dn-card-amber .dn-card-v { color: var(--amber); } [data-page="dash"] .dn-card-green .dn-card-v { color: var(--green); } [data-page="dash"] .dn-card-red .dn-card-v { color: var(--red); } [data-page="dash"] .dn-card-ce { border-left: 2px solid var(--accent); } [data-page="dash"] .dn-card-pe { border-left: 2px solid var(--amber); } [data-page="dash"] .dn-card-sent { grid-column: span 1; } /* ── chain-metrics-top: full horizontal card strip ────────────── Matches the main option-chain page header. Cards lay out in a single row and scroll horizontally when the widget is narrower than the strip's natural width. Tinted variants signal moneyness (green/red on Spot/Future when up/down, red tint on bearish PCR). */ /* Adaptive strip: - Default: flex-wrap → 1 row when wide enough, wraps to 2+ rows when narrower. - .scroll-mode (toggled by JS via ResizeObserver): single row + horizontal scroll, used only when even 2 rows of min-width cards wouldn't cover the total. So you get: stretch wide → 1 line; narrower → 2 lines; very narrow → 1 line with scroll. */ [data-page="dash"] .dn-mc-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; min-height: 0; } [data-page="dash"] .dn-mc-strip.scroll-mode { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } [data-page="dash"] .dn-mc { flex: 1 1 105px; min-width: 105px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 6px 9px; display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-mc-strip.scroll-mode .dn-mc { flex: 0 0 105px; } /* Open Interest cards — CE OI in green, PE OI in red, mirroring the call/put coloring on the option chain (and CE/PE chart series). */ [data-page="dash"] .dn-mc-ce-oi .dn-mc-v { color: var(--green); } [data-page="dash"] .dn-mc-pe-oi .dn-mc-v { color: var(--red); } /* IV Chart snapshot strip — pinned above the LWC line chart. Shows ATM Strike / ATM IV / CE IV / PE IV / IV Skew at a glance, refreshed from chainCache every minute. */ [data-page="dash"] .dn-iv-strip { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } [data-page="dash"] .dn-iv-card { flex: 1 1 100px; min-width: 100px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-iv-l { font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; } [data-page="dash"] .dn-iv-v { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; line-height: 1.15; } [data-page="dash"] .dn-iv-v.amber { color: var(--amber); } [data-page="dash"] .dn-iv-v.green { color: var(--green); } [data-page="dash"] .dn-iv-v.red { color: var(--red); } [data-page="dash"] .dn-iv-v.ce { color: #26a69a; } [data-page="dash"] .dn-iv-v.pe { color: #ef5350; } [data-page="dash"] .dn-iv-s { font-size: 10px; color: var(--muted); } /* Composite-widget mode segment (Total / Δ Day Open / Δ Prev Close). Matches the main page's .seg-btn.active styling so the dashboard's composite charts feel identical to the Composite tab. */ [data-page="dash"] .dn-comp-mode { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } [data-page="dash"] .dn-comp-mode button { background: transparent; color: var(--muted); border: 0; padding: 4px 10px; font: inherit; font-size: 11px; cursor: pointer; user-select: none; border-right: 1px solid var(--border); } [data-page="dash"] .dn-comp-mode button:last-child { border-right: 0; } [data-page="dash"] .dn-comp-mode button:hover { color: var(--text); } [data-page="dash"] .dn-comp-mode button.active { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); color: #ffffff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } [data-page="dash"] .dn-mc-l { font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 700; } [data-page="dash"] .dn-mc-v { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; line-height: 1.15; } [data-page="dash"] .dn-mc-v.up { color: var(--green); } [data-page="dash"] .dn-mc-v.dn { color: var(--red); } [data-page="dash"] .dn-mc-s { font-size: 10px; color: var(--muted); line-height: 1.25; } [data-page="dash"] .dn-mc-s.up { color: var(--green); } [data-page="dash"] .dn-mc-s.dn { color: var(--red); } /* Tinted variants — Spot / Future tone with their day-change sign; PCR card tones with the bullish/bearish/neutral verdict. */ [data-page="dash"] .dn-mc-spot.up, [data-page="dash"] .dn-mc-fut.up, [data-page="dash"] .dn-mc-bullish { background: rgba(62,207,142,0.10); border-color: rgba(62,207,142,0.35); } [data-page="dash"] .dn-mc-spot.up .dn-mc-v, [data-page="dash"] .dn-mc-fut.up .dn-mc-v { color: var(--green); } [data-page="dash"] .dn-mc-spot.dn, [data-page="dash"] .dn-mc-fut.dn, [data-page="dash"] .dn-mc-bearish { background: rgba(231,111,111,0.10); border-color: rgba(231,111,111,0.35); } [data-page="dash"] .dn-mc-spot.dn .dn-mc-v, [data-page="dash"] .dn-mc-fut.dn .dn-mc-v { color: var(--red); } /* ── compact hero + mini-stat layout (chain-metrics-top) ──────── */ [data-page="dash"] .dn-metric-hero { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 0 0 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } [data-page="dash"] .dn-metric-hero-l { display: flex; gap: 5px; align-items: baseline; min-width: 0; } [data-page="dash"] .dn-metric-hero-r { display: flex; gap: 6px; align-items: baseline; } [data-page="dash"] .dn-metric-hero-sym { font-size: 12px; font-weight: 700; color: var(--text); } [data-page="dash"] .dn-metric-hero-exp { font-size: 10px; color: var(--muted); } [data-page="dash"] .dn-metric-hero .dn-oc-spot { font-size: 14px; } [data-page="dash"] .dn-mini-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 6px; padding: 4px 0 0; } [data-page="dash"] .dn-mini { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 2px 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; font-size: 11px; min-width: 0; } [data-page="dash"] .dn-mini-l { font-size: 9.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); font-weight: 600; } [data-page="dash"] .dn-mini-v { font-size: 11.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-mini-v.amber { color: var(--amber); } [data-page="dash"] .dn-mini-v.green { color: var(--green); } [data-page="dash"] .dn-mini-v.red { color: var(--red); } /* ── chips ─────────────────────────────────────────────────────── */ [data-page="dash"] .dn-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); } [data-page="dash"] .dn-chip-green { color: var(--green); border-color: rgba(62,207,142,0.4); background: rgba(62,207,142,0.10); } [data-page="dash"] .dn-chip-red { color: var(--red); border-color: rgba(231,111,111,0.4); background: rgba(231,111,111,0.10); } [data-page="dash"] .dn-chip-muted { color: var(--muted); } /* ── chart wrap ────────────────────────────────────────────────── */ [data-page="dash"] .dn-chart-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 6px; border-bottom: 1px solid var(--border); font-size: 11px; } [data-page="dash"] .dn-chart-title { font-size: 11.5px; font-weight: 600; color: var(--text); } [data-page="dash"] .dn-chart-wrap { flex: 1 1 auto; min-height: 0; position: relative; } [data-page="dash"] .dn-chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* ── tape (intraday time-and-sales) ────────────────────────────── */ [data-page="dash"] .dn-tape { flex: 1 1 auto; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; margin-top: 6px; font-size: 11px; font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-tape-row { display: grid; grid-template-columns: 64px 1fr 50px 70px 50px; gap: 8px; padding: 3px 6px; background: var(--panel-2); border-radius: 3px; } [data-page="dash"] .dn-tape-t { color: var(--muted); } [data-page="dash"] .dn-tape-side.ce { color: var(--accent); } [data-page="dash"] .dn-tape-side.pe { color: var(--amber); } [data-page="dash"] .dn-tape-bs.up { color: var(--green); font-weight: 600; } [data-page="dash"] .dn-tape-bs.dn { color: var(--red); font-weight: 600; } [data-page="dash"] .dn-tape-px { text-align: right; color: var(--text); } [data-page="dash"] .dn-tape-q { text-align: right; color: var(--muted); } /* ── list (setups, market) ─────────────────────────────────────── */ [data-page="dash"] .dn-list { flex: 1 1 auto; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; } [data-page="dash"] .dn-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; } [data-page="dash"] .dn-list-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; } [data-page="dash"] .dn-list-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } [data-page="dash"] .dn-list-sym { font-size: 12px; font-weight: 700; color: var(--text); } [data-page="dash"] .dn-list-sub { font-size: 10.5px; color: var(--muted); } /* ── breadth bar ───────────────────────────────────────────────── */ [data-page="dash"] .dn-breadth-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--panel-2); margin-top: 6px; } [data-page="dash"] .dn-breadth-adv { background: var(--green); } [data-page="dash"] .dn-breadth-dec { background: var(--red); } /* ── market report ─────────────────────────────────────────────── */ [data-page="dash"] .dn-report { flex: 1 1 auto; overflow: auto; min-height: 0; font-size: 11.5px; line-height: 1.5; color: var(--text); } [data-page="dash"] .dn-report-hd { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } [data-page="dash"] .dn-report h4 { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); margin: 10px 0 4px; } [data-page="dash"] .dn-report ul { padding-left: 18px; margin: 0; } [data-page="dash"] .dn-report li { margin: 2px 0; } [data-page="dash"] .dn-report p { margin: 0 0 6px; color: var(--text); } /* ── strategy builder ──────────────────────────────────────────── */ [data-page="dash"] .dn-strat-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--border); } [data-page="dash"] .dn-strat-tbl { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; font-variant-numeric: tabular-nums; } [data-page="dash"] .dn-strat-row { display: grid; grid-template-columns: 60px 50px 1fr 60px 70px 90px; gap: 6px; padding: 5px 8px; background: var(--panel-2); border-radius: 3px; } [data-page="dash"] .dn-strat-hdrow { background: transparent; color: var(--muted); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; padding: 4px 8px; } [data-page="dash"] .dn-strat-row > .up { color: var(--green); font-weight: 600; } [data-page="dash"] .dn-strat-row > .dn { color: var(--red); font-weight: 600; } [data-page="dash"] .dn-strat-row > .ce-text { color: var(--accent); } [data-page="dash"] .dn-strat-row > .pe-text { color: var(--amber); } /* ── stocks table ──────────────────────────────────────────────── */ /* The shared rule `.dn-oc-tbl thead .dn-oc-cols th` sets `top: 22px` because the option-chain table has a CALLS/PUTS group row above the column headers. The stocks table has no group row, so that 22 px becomes an empty gap between the search bar and the column header. Force `top: 0` on the stocks table's cols row with equal specificity (.dn-oc-tbl + .dn-stk-tbl). */ [data-page="dash"] .dn-oc-tbl.dn-stk-tbl thead .dn-oc-cols th, [data-page="dash"] .dn-stk-tbl thead th { position: sticky; top: 0; background: var(--panel); text-align: right; box-shadow: none; /* the shared cols rule adds a redundant 1px line; clean it */ } [data-page="dash"] .dn-stk-tbl thead th:first-child, [data-page="dash"] .dn-stk-tbl tbody td:first-child { text-align: left; } [data-page="dash"] .dn-stk-tbl tbody tr:hover td { background: rgba(122,169,240,0.06); } [data-page="dash"] .dn-stk-tbl tbody td { background: var(--panel); } /* Sort indicator in column header — small arrow shown only on the active sort column. Keeps header rows compact. */ [data-page="dash"] .dn-stk-tbl thead th .dn-stk-sort-ind { font-size: 9px; color: var(--muted); margin-left: 2px; } [data-page="dash"] .dn-stk-tbl thead th:hover { background: var(--panel-2); } /* Header row: tighter spacing + put the search box on the right of the count pill. The old layout had Title + Count flushed left and the rest of the header strip empty — confusing UX. */ [data-page="dash"] .dn-stk-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 0 0 6px; } [data-page="dash"] .dn-stk-head .dn-chart-title { flex: 0 0 auto; } [data-page="dash"] .dn-stk-head .dn-oc-pill { flex: 0 0 auto; } [data-page="dash"] .dn-stk-head .dn-stk-search { flex: 1 1 auto; min-width: 80px; max-width: 240px; font-size: 11px; padding: 3px 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; outline: none; margin-left: 6px; } [data-page="dash"] .dn-stk-head .dn-stk-search:focus { border-color: var(--accent); } /* Tighten the Symbol column so the LTP cluster doesn't drift right into nowhere. table-layout:fixed on .dn-oc-tbl was distributing the symbol column to fill all extra space — explicit width caps it. */ [data-page="dash"] .dn-stk-tbl { table-layout: auto; } [data-page="dash"] .dn-stk-tbl thead th:first-child, [data-page="dash"] .dn-stk-tbl tbody td:first-child { width: 1%; white-space: nowrap; padding-right: 14px; } /* ── shared up/dn helpers for cell values ──────────────────────── */ [data-page="dash"] .dn-oc-v.up { color: var(--green); } [data-page="dash"] .dn-oc-v.dn { color: var(--red); } /* ── Straddle Table — STRADDLE (CE+PE) group + H-L bar ─────────── */ [data-page="dash"] .dn-oc-tbl tbody td.strad { background: rgba(146,185,244,0.06); } [data-page="dash"] .dn-oc-tbl tbody tr.atm td.strad { background-image: linear-gradient(0deg, rgba(212,168,87,0.08), rgba(212,168,87,0.08)); } [data-page="dash"] .dn-oc-tbl thead .dn-oc-grp th.strike-grp { color: var(--text); } /* Visual day H–L range bar: a 1px track with a small triangle marker sitting at (ltp − low) / (high − low) along the track. */ [data-page="dash"] .dn-hl { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--muted); min-width: 80px; } [data-page="dash"] .dn-hl-l, [data-page="dash"] .dn-hl-h { font-weight: 600; } [data-page="dash"] .dn-hl-track { flex: 1; position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(231,111,111,0.18), rgba(62,207,142,0.18)); } [data-page="dash"] .dn-hl-marker { position: absolute; top: -3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--text); transform: translateX(-4px); } [data-page="dash"] .dn-stradtbl { font-size: 10.5px; } [data-page="dash"] .dn-stradtbl thead .dn-oc-grp th.ce { text-align: center; } [data-page="dash"] .dn-stradtbl thead .dn-oc-grp th.pe { text-align: center; } [data-page="dash"] .dn-stradtbl thead .dn-oc-grp th.strike-grp { text-align: center; } /* ── price-chart: LWC + toolbar ───────────────────────────────── */ [data-page="dash"] .dn-pc-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 6px; border-bottom: 1px solid var(--border); position: relative; font-size: 11px; } /* When the Advanced (TV) chart engine is active, the price-chart * widget's TV iframe carries its own native toolbar with symbol search, * resolution, range, and a bottom timeframe strip (see opts.fullToolbar * passed from RENDERERS['price-chart'] to OAAdvancedChart.mount). The * dashboard's custom .dn-pc-bar row becomes redundant — hide it so the * TV widget takes the full card height and the user isn't confused by * two stacked symbol-search / resolution controls. Scoped to the * price-chart widget type only; other widgets that use .dn-pc-bar * (straddle, strangle) keep their controls because their mounts don't * pass fullToolbar. */ body.chart-engine-tv [data-page="dash"] .dn-w[data-type="price-chart"] .dn-pc-bar { display: none; } /* Also collapse the body padding + chart margin so the TV widget mounts * flush against the card header. The default 12px body padding + 4px * chart margin-top wastes ~16px above the TV toolbar — pointless gap * when the TV widget has its own internal chrome. Side / bottom padding * removed too so the chart canvas fills the card edge-to-edge. */ body.chart-engine-tv [data-page="dash"] .dn-w[data-type="price-chart"] .dn-w-body { padding: 0; gap: 0; } body.chart-engine-tv [data-page="dash"] .dn-w[data-type="price-chart"] .dn-pc-chart { margin-top: 0; } /* CE/PE Σ Greeks — zero the body padding so the Σ strip sits flush right under the widget header (no blank gap). The .dn-greeks-sum panel supplies its own tight padding. */ [data-page="dash"] .dn-w[data-type="chain-greeks-sum"] .dn-w-body { padding: 0; gap: 0; } [data-page="dash"] .dn-pc-sym { font-size: 13px; font-weight: 700; color: var(--text); padding-right: 8px; border-right: 1px solid var(--border); } [data-page="dash"] .dn-pc-sub-meta { font-size: 11px; color: var(--muted); padding-right: 4px; } [data-page="dash"] .dn-pc-search { position: relative; flex: 0 0 180px; } [data-page="dash"] .dn-pc-search-i { width: 100%; box-sizing: border-box; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 11px; outline: none; } [data-page="dash"] .dn-pc-search-i:focus { border-color: var(--accent); } [data-page="dash"] .dn-pc-search-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; z-index: 50; } [data-page="dash"] .dn-pc-search-drop[hidden] { display: none; } /* Result row — symbol on top line, underlying on a smaller line below. */ [data-page="dash"] .dn-pc-search-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); } [data-page="dash"] .dn-pc-search-row:last-child { border-bottom: none; } [data-page="dash"] .dn-pc-search-row:hover { background: rgba(122,169,240,0.10); } [data-page="dash"] .dn-pc-search-msg { padding: 8px 10px; font-size: 11px; font-style: italic; } [data-page="dash"] .dn-pc-search-msg.muted { color: var(--muted); } [data-page="dash"] .dn-pc-search-msg.err { color: var(--red); font-style: normal; } [data-page="dash"] .dn-pc-search-sym { font-size: 11.5px; font-weight: 700; color: var(--text); line-height: 1.15; } [data-page="dash"] .dn-pc-search-desc { font-size: 10px; color: var(--muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rich strike picker — replaces the plain