/* ========================================================================== iGroww — Layout Shell & Analyst Density System -------------------------------------------------------------------------- Loaded AFTER bootstrap.min.css and project.css so it can correct them. Everything here is additive: no existing class is renamed or removed. ========================================================================== */ /* -------------------------------------------------------------------------- 1. WIDTH SHELL Bootstrap's .container hard-caps at 1320px. That single rule is why the app letterboxes on wide monitors. .ts-shell replaces it with a width that the user controls, driven by data-ts-width on . -------------------------------------------------------------------------- */ :root { --ts-shell-max: 100%; --ts-gutter: clamp(0.75rem, 1.5vw, 2rem); --ts-stack: clamp(0.75rem, 1.1vw, 1.25rem); } html[data-ts-width="focused"] { --ts-shell-max: 1320px; } html[data-ts-width="wide"] { --ts-shell-max: 1800px; } html[data-ts-width="full"] { --ts-shell-max: 100%; } .ts-shell { width: 100%; max-width: var(--ts-shell-max); margin-inline: auto; padding-inline: var(--ts-gutter); transition: max-width 180ms ease; } /* Any .container nested INSIDE the shell would re-clamp the width and undo the fix. Neutralise nested containers rather than hunting every template. */ .ts-shell .container, .ts-shell .container-lg, .ts-shell .container-xl, .ts-shell .container-xxl { max-width: 100%; padding-inline: 0; } /* The trading app ships its own stylesheets (ai_trading.css, live_trading_dashboard.css) that cap .ait-wrapper / .ltd-wrapper at 1400px independently of Bootstrap. Those files load from head_libraries, before this one, so an equal-specificity rule here wins. Horizontal padding is dropped because .ts-shell already supplies the gutter; vertical padding is kept so the pages keep their spacing. */ .ts-shell .ait-wrapper, .ts-shell .ltd-wrapper { max-width: 100%; width: 100%; margin-inline: 0; padding-left: 0; padding-right: 0; } /* Used by dashboard drill-down pages that previously wrapped themselves in a second .container, which re-applied the 1320px cap inside the shell. */ .ts-shell-inner { width: 100%; } /* Page-level max-width overrides declared inline by individual prediction pages (.ob-page, .ibs-page, etc.) are released in full/wide mode. */ html[data-ts-width="full"] .ts-shell .ob-page, html[data-ts-width="full"] .ts-shell .ibs-page, html[data-ts-width="wide"] .ts-shell .ob-page, html[data-ts-width="wide"] .ts-shell .ibs-page { max-width: none !important; } /* -------------------------------------------------------------------------- 2. FINANCIAL TYPOGRAPHY Tabular figures are the single highest-value fix for a trading UI: without them every digit has a different advance width, so decimal points wander and columns of prices cannot be scanned vertically. -------------------------------------------------------------------------- */ :root { --ts-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; } .table, .ts-num, .ts-breadth-footer, .ts-breadth-header, .ts-breadth-sub { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Ticker symbols read as identifiers, not prose. */ .ts-ticker { font-family: var(--ts-mono); font-weight: 600; letter-spacing: 0.02em; } /* Numeric cells belong on the right edge so magnitudes line up. */ .ts-num { text-align: right; font-variant-numeric: tabular-nums; } /* Directional semantics, defined once. */ :root { --ts-up: var(--bs-success, #12b886); --ts-down: var(--bs-danger, #ef4444); --ts-flat: var(--bs-secondary-color, #8b98a5); } .ts-up { color: var(--ts-up) !important; } .ts-down { color: var(--ts-down) !important; } .ts-flat { color: var(--ts-flat) !important; } /* -------------------------------------------------------------------------- 3. DATA TABLES Sticky headers, hover targeting and a compact mode. Analysts scroll long result sets; a header that scrolls away costs a round trip every time. -------------------------------------------------------------------------- */ .ts-table-wrap { max-height: var(--ts-table-max-h, none); overflow: auto; border-radius: 0.5rem; } .ts-table-wrap thead th, .table-responsive .ts-sticky-head thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); } .table > :not(caption) > * > * { transition: background-color 120ms ease; } .ts-table-clickable tbody tr { cursor: pointer; } .ts-table-clickable tbody tr:hover > * { background-color: var(--bs-tertiary-bg, rgba(125, 145, 170, 0.09)); } /* Density: toggled via data-ts-density on . */ html[data-ts-density="compact"] .table > :not(caption) > * > * { padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.8125rem; line-height: 1.35; } html[data-ts-density="compact"] .ts-card-main, html[data-ts-density="compact"] .card.rounded-4.p-3 { padding: 0.75rem !important; } html[data-ts-density="compact"] { --ts-stack: 0.6rem; } /* -------------------------------------------------------------------------- 4. RESPONSIVE CHART HEIGHTS Fixed pixel heights (height:460px) waste vertical space on tall monitors and overflow on laptops. Height now tracks the viewport, with guard rails. -------------------------------------------------------------------------- */ .ts-chart { height: clamp(300px, 40vh, 560px); width: 100%; } .ts-chart-sm { height: clamp(220px, 26vh, 360px); width: 100%; } .ts-chart-lg { height: clamp(360px, 56vh, 760px); width: 100%; } .ts-chart-tall { height: clamp(420px, 68vh, 900px); width: 100%; } /* Legacy hook already used in project.css — keep the name, fix the value. */ .ts-chart-height { height: clamp(300px, 40vh, 560px); } /* -------------------------------------------------------------------------- 5. CARD & RHYTHM CONSISTENCY The app currently mixes .card.rounded-4.p-3.shadow, .ts-card, .ts-card-body and inline margin-bottom:2rem. One vertical rhythm, one border language. -------------------------------------------------------------------------- */ .ts-section { margin-bottom: var(--ts-stack); } .ts-shell > .card, .ts-shell > .row > [class*="col-"] > .card, .ts-panel { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: 0.875rem; } /* Softer, less "bootstrap default" elevation. */ .shadow, .ts-card-main { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.10) !important; } .ts-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .ts-panel-title { font-weight: 700; letter-spacing: -0.01em; } .ts-panel-meta { font-size: 0.6875rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 6. BREADTH STRIP — let it use the width it now has Four cards at flex-basis 260px leave dead space on a wide monitor. -------------------------------------------------------------------------- */ .ts-breadth-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.625rem; } .ts-breadth-card { transition: border-color 140ms ease, background-color 140ms ease; } .ts-breadth-card:hover { border-color: var(--bs-primary); } /* -------------------------------------------------------------------------- 7. CHROME: navbar, controls, scrollbars, focus -------------------------------------------------------------------------- */ .navbar .navbar-nav .nav-link { font-size: 0.9375rem; } .ts-toolbar { display: flex; align-items: center; gap: 0.25rem; } .ts-seg { display: inline-flex; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; overflow: hidden; background: var(--bs-body-bg); } .ts-seg button { border: 0; background: transparent; color: var(--bs-secondary-color); padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1.4; cursor: pointer; display: inline-flex; align-items: center; } .ts-seg button:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); } .ts-seg button[aria-pressed="true"] { background: var(--bs-primary); color: #fff; } /* Thin scrollbars so data panes don't lose 15px to chrome. */ .ts-table-wrap, .table-responsive, .ts-scroll { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; } .ts-table-wrap::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .ts-scroll::-webkit-scrollbar { height: 8px; width: 8px; } .ts-table-wrap::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .ts-scroll::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 999px; } /* Keyboard users must be able to see where they are. */ a:focus-visible, button:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 0.25rem; } /* -------------------------------------------------------------------------- 8. MOTION & PRINT -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } @media print { .navbar, footer, .ts-toolbar { display: none !important; } .ts-shell { max-width: 100% !important; padding: 0 !important; } .ts-chart, .ts-chart-lg, .ts-chart-tall { height: 340px !important; } } /* -------------------------------------------------------------------------- 9. SMALL SCREENS The shell is fluid, so phones mostly work already. These stop the dense analyst affordances from becoming unusable below the md breakpoint. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { :root { --ts-gutter: 0.75rem; } .ts-chart, .ts-chart-lg, .ts-chart-tall { height: clamp(260px, 45vh, 420px); } .ts-breadth-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .ts-seg button { padding: 0.25rem 0.4rem; } }