/* ============================================= WEBTRADER PRO — Professional Trading Terminal ============================================= */ :root { /* Core palette */ --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-tertiary: #1a2035; --bg-elevated: #1e2a42; --bg-input: #0f1629; /* Borders and text are MEASURED (WCAG 2.x) against the four surfaces above; they were chosen by eye. Muted text was 2.41-3.24:1 (it has to be 4.5 - nothing here is "large text"), and the panel border was 1.04-1.41:1, which is no visible line at all. */ /* Borders */ --border-primary: #3e5d99; /* 2.21-2.97: a visible divider (was #1e2d4a) */ --border-secondary: #5272b4; /* 3.02-4.07: control boundaries (was #2a3a5c) */ --border-hover: #5c7dc1; /* 3.52-4.74, so hover is a visible change */ /* Text */ --text-primary: #e2e8f0; --text-secondary: #a3aec5; /* 6.43-8.66 (was #8892a8) */ --text-muted: #8892a8; /* 4.59-6.18 (was #5a6478: 2.41-3.24) */ --text-bright: #f8fafc; /* Hover surface — semi-transparent overlay used on tiles, rows, dropdown items. In dark mode this is white-alpha; in light mode we swap to black-alpha (see [data-theme="light"] below). */ --hover-surface: rgba(255, 255, 255, 0.05); --hover-surface-strong: rgba(255, 255, 255, 0.10); /* Accent. --accent is the accent as TEXT and lines (5.64:1 on the darkest surface; #3b82f6 was 3.90). A filled control with a white label uses --accent-fill instead: white on #2563eb is 5.17, white on #3b82f6 was 3.68 - one colour cannot do both on a dark background. */ --accent: #60a5fa; --accent-hover: #2563eb; --accent-glow: rgba(96, 165, 250, 0.15); --accent-fill: #2563eb; --accent-fill-hover: #1d4ed8; /* Semantic */ --green: #10b981; --green-bg: rgba(16, 185, 129, 0.08); --green-bright: #34d399; --red: #f87171; /* 5.18 on the darkest surface (was #ef4444: 3.81) */ --red-bg: rgba(239, 68, 68, 0.08); --red-bright: #f87171; --orange: #f59e0b; --orange-bg: rgba(245, 158, 11, 0.08); /* Sizing */ --topbar-h: 44px; --panel-header-h: 36px; --sidebar-w: 260px; --order-w: 290px; --bottom-h: 220px; --radius: 4px; --radius-lg: 8px; /* Mobile palette */ --bg-deepest: #060709; --bg-base: #0a0b0f; --bg-card: #0d0f17; --bg-surface: #1a1f2a; --border-mob: rgba(255,255,255,0.06); --border-mid: rgba(255,255,255,0.10); --text-1: #ffffff; --text-2: rgba(255,255,255,0.55); --text-3: rgba(255,255,255,0.28); --bull: #26a69a; --bear: #ef5350; --buy: #00e676; --sell: #ff5252; --accent-light: #5b8fff; --gold: #f5a623; /* Header figures and notices that used hard-coded colours: amber LOCKED at #fbbf24 was 1.7:1 on the light theme's white bar. */ --metric-locked: #fbbf24; /* 10.63 */ --metric-ai: #c4b5fd; /* 9.61 */ --text-warn: #ffd54f; /* 11.3-12.6 on the amber notice */ --mkt-open: #4ade80; --mkt-pre: #facc15; --mkt-closed: #f87171; --focus-ring: #93c5fd; /* The purple of the active bottom tab and the chart toolbar. It was #6c5ce7 as text: 3.65:1 on the panel, 4.03:1 even in high contrast. */ --tab-active: #a29bfe; /* 5.91-7.96 */ --tab-active-fill: #6c5ce7; /* white label 4.86 */ } /* ============================================= LIGHT THEME OVERRIDES Toggled by js/theme.js — sets data-theme="light" on . We deliberately override only the chrome surfaces, text and borders. Buy/sell, bull/bear, gold and the chart series keep their dark-mode semantic colors so traders' habits transfer between themes. ============================================= */ html[data-theme="light"] { /* Surfaces — light grey page, white panels, very light blue input wells */ --bg-primary: #f4f6fa; --bg-secondary: #ffffff; --bg-tertiary: #f7f9fc; --bg-elevated: #ffffff; --bg-input: #f4f6fa; /* Borders — soft grey, with a darker tone on hover to stay visible */ --border-primary: #a8b0c2; /* 2.18 on white (was #e2e6ee: 1.25) */ --border-secondary: #cbd2dd; --border-hover: #9aa3b3; /* Text — near-black primary, mid-grey secondary, light grey muted */ --text-primary: #1a2238; --text-secondary: #5a6478; --text-muted: #5f6a84; /* 5.00-5.41 (#6b7590 was 4.24 on the page grey) */ --text-bright: #0a0e17; /* Accent: text 5.17 on white. #3b82f6 was 3.68. */ --accent: #2563eb; --accent-glow: rgba(37, 99, 235, 0.15); /* Hover overlay — black-alpha looks right on a white background */ --hover-surface: rgba(0, 0, 0, 0.04); --hover-surface-strong: rgba(0, 0, 0, 0.08); /* Mobile palette — also flipped so the mobile shell isn't dark when the desktop is light */ --bg-deepest: #ffffff; --bg-base: #f4f6fa; --bg-card: #ffffff; --bg-surface: #f7f9fc; --border-mob: rgba(0, 0, 0, 0.06); --border-mid: rgba(0, 0, 0, 0.10); --text-1: #0a0e17; --text-2: rgba(0, 0, 0, 0.60); --text-3: rgba(0, 0, 0, 0.32); /* Green / red / amber are used as TEXT (P&L, statuses) and under white labels. The dark theme's #10b981 / #f87171 / #f59e0b are 2.5-2.8:1 on white; these keep the hue and read at 4.6-6.5:1 both ways. */ --green: #047857; --red: #b91c1c; --red-bright: #b91c1c; --orange: #b45309; --metric-locked: #92400e; /* 6.55-7.09 */ --metric-ai: #6d28d9; /* 6.57-7.10 */ --text-warn: #92400e; --mkt-open: #047857; --mkt-pre: #854d0e; --mkt-closed: #b91c1c; --focus-ring: #1d4ed8; --tab-active: #5b4bd6; /* 5.67-6.14 */ } /* ============================================= HIGH CONTRAST (on top of dark or light) Set by js/theme.js as data-contrast="high" on - the trader's switch in the account menu, or the OS "increase contrast" setting while they have not chosen. The normal palette is AA (muted text 4.5:1); these two sets are for traders who need more. Every ratio below is WCAG 2.x, measured against the four surfaces of the same set: body and secondary text >= 11:1 muted text >= 10:1 accent as text >= 8:1 white on the accent fill 8.7:1 borders / input outlines >= 5.4:1 (3:1 is the floor for controls) The focus ring (--focus-ring) is drawn on every focusable element, see the element rules at the end of this file. ============================================= */ html[data-contrast="high"] { --bg-primary: #000000; --bg-secondary: #0a0c10; --bg-tertiary: #12151c; --bg-elevated: #181c26; --bg-input: #000000; --border-primary: #8b9bb8; /* 6.07-7.48 */ --border-secondary: #aab8d0; /* 8.50-10.48 */ --border-hover: #ffffff; --text-primary: #ffffff; --text-secondary: #e5e9f0; /* 13.99-17.25 */ --text-muted: #cdd5e2; /* 11.53-14.21 */ --text-bright: #ffffff; --hover-surface: rgba(255, 255, 255, 0.10); --hover-surface-strong: rgba(255, 255, 255, 0.18); --accent: #9cc3ff; /* 9.46-11.66 */ --accent-hover: #1e3a8a; --accent-glow: rgba(156, 195, 255, 0.28); --accent-fill: #1e40af; /* white label 8.72 */ --accent-fill-hover: #1e3a8a; --green: #4ade80; /* 9.77-12.05 */ --green-bg: rgba(74, 222, 128, 0.14); --green-bright: #86efac; --red: #ff9b9b; /* 8.45-10.41 */ --red-bg: rgba(255, 155, 155, 0.14); --red-bright: #ff9b9b; --orange: #fcd34d; /* 11.81-14.56 */ --orange-bg: rgba(252, 211, 77, 0.14); --bg-deepest: #000000; --bg-base: #000000; --bg-card: #0a0c10; --bg-surface: #12151c; --border-mob: rgba(255, 255, 255, 0.45); --border-mid: rgba(255, 255, 255, 0.60); --text-1: #ffffff; --text-2: #e5e9f0; --text-3: #cdd5e2; --metric-locked: #fcd34d; --metric-ai: #ddd6fe; --text-warn: #fde68a; --mkt-open: #4ade80; --mkt-pre: #fde047; --mkt-closed: #ff9b9b; --focus-ring: #ffd60a; /* 12-15:1 on every surface */ --tab-active: #c9c2ff; /* 10.26-12.64 */ --tab-active-fill: #4c3bc9; /* white label 7.56 */ } html[data-contrast="high"][data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #ffffff; --bg-tertiary: #f2f4f8; --bg-elevated: #ffffff; --bg-input: #ffffff; --border-primary: #5b6475; /* 5.41-5.96 */ --border-secondary: #3f4756; /* 8.49-9.35 */ --border-hover: #000000; --text-primary: #000000; --text-secondary: #1c2230; /* 14.44-15.90 */ --text-muted: #2f3747; /* 10.85-11.94 */ --text-bright: #000000; --hover-surface: rgba(0, 0, 0, 0.07); --hover-surface-strong: rgba(0, 0, 0, 0.13); --accent: #1a3fa8; /* 8.22-9.05 */ --accent-hover: #1e3a8a; --accent-glow: rgba(26, 63, 168, 0.25); --accent-fill: #1e40af; /* white label 8.72 */ --accent-fill-hover: #1e3a8a; --green: #064e3b; /* 7.45-9.72, on its tint too */ --green-bg: rgba(6, 78, 59, 0.10); --green-bright: #064e3b; --red: #8a1717; /* 7.21-9.48, on its tint too */ --red-bg: rgba(138, 23, 23, 0.10); --red-bright: #8a1717; --orange: #78350f; /* 8.24-9.07 */ --orange-bg: rgba(120, 53, 15, 0.10); --bg-deepest: #ffffff; --bg-base: #ffffff; --bg-card: #ffffff; --bg-surface: #f2f4f8; --border-mob: rgba(0, 0, 0, 0.50); --border-mid: rgba(0, 0, 0, 0.65); --text-1: #000000; --text-2: #1c2230; --text-3: #2f3747; --metric-locked: #78350f; --metric-ai: #4c1d95; --text-warn: #78350f; --mkt-open: #065f46; --mkt-pre: #713f12; --mkt-closed: #8a1717; --focus-ring: #000000; --tab-active: #3b2a9e; /* 9.48-10.44 */ --tab-active-fill: #3b2a9e; /* white label 10.44 */ } /* Body background already uses var(--bg-primary), but the login backdrop composites two semi-transparent radial gradients ON TOP of it — under light mode those tint the page slightly bluish/green. Override the gradients so the login screen reads as a clean light surface too. */ html[data-theme="light"] .login-backdrop { background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 50%), var(--bg-primary); } /* The user dropdown nudges the language submenu with rgba(0,0,0,0.2) as a "depressed" background — almost invisible on dark, but a stark grey bar on light. Switch to a very faint black-alpha on light mode. */ html[data-theme="light"] #ud-lang-list { background: rgba(0, 0, 0, 0.04) !important; } /* Dropdown items use a hardcoded rgba(41,98,255,0.1) hover that reads as a strong blue tint on a white background — soften it. */ html[data-theme="light"] .ud-item:hover { background: rgba(41, 98, 255, 0.08); } /* Toast notification has a hardcoded dark background — flip on light mode */ html[data-theme="light"] .toast-notification { background: #ffffff; color: #1a2238; border-left-color: #2962FF; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* Market status bar at the very top — hardcoded `#0f1117` made it stay dark even when the trader picked light mode. Flip to a light grey + a subtle border so the pills remain visually separated. */ html[data-theme="light"] #market-status-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); } html[data-theme="light"] .mkt-pill { background: var(--bg-tertiary); } /* Terminal modal panel + fields use hardcoded `#151821` / `#0d1017` / white-alpha text — re-tone to readable light-mode values. */ html[data-theme="light"] .tm-panel { background: var(--bg-secondary); border: 1px solid var(--border-primary); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); } html[data-theme="light"] .tm-header { border-bottom-color: var(--border-primary); } html[data-theme="light"] .tm-header h3 { color: var(--text-primary); } html[data-theme="light"] .tm-close { color: var(--text-muted); } html[data-theme="light"] .tm-close:hover { color: var(--text-primary); } html[data-theme="light"] .tm-field label { color: var(--text-muted); } html[data-theme="light"] .tm-field input, html[data-theme="light"] .tm-field textarea, html[data-theme="light"] .tm-field select { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-primary); } /* AI package card + payment method cards reuse the same dark `#1a1f2e` — flip to white-on-grey for light mode. */ html[data-theme="light"] .tm-pkg-card, html[data-theme="light"] [class*="payment-method-card"] { background: var(--bg-secondary); border-color: var(--border-primary); } /* ============================================= RESET & BASE ============================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; line-height: 1.5; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mono { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace; } .text-right { text-align: right; } .text-center { text-align: center; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* ============================================= LOGIN SCREEN ============================================= */ #login-screen { display: flex; justify-content: center; align-items: center; height: 100vh; position: relative; } .login-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%), var(--bg-primary); } .login-box { position: relative; background: var(--bg-secondary); border: 1px solid var(--border-primary); padding: 40px 36px 36px; border-radius: 12px; display: flex; flex-direction: column; gap: 16px; min-width: 380px; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.05), 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .login-logo { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 18px; color: var(--text-bright); letter-spacing: -0.3px; } .login-logo strong { color: var(--accent); font-weight: 700; } /* The company's own headline. It was left-aligned under a centred logo and sub-heading (the card is a stretch column). */ #login-headline { text-align: center; color: var(--text-bright); } .login-subtitle { text-align: center; color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; } .login-field { display: flex; flex-direction: column; gap: 6px; } .login-field label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .login-box input { background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 10px 12px; border-radius: 6px; font-family: inherit; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .login-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .login-box input::placeholder { color: var(--text-muted); } /* Links on the login card - forgot password, back to sign-in, terms, privacy, support. They had no colour rule and showed the browser's default #0000ee, dimmed further by an inline opacity: about 2:1 on the dark card. The accent follows the brand (branding.js). */ .login-box a { color: var(--accent); text-decoration: none; } .login-box a:hover { text-decoration: underline; } /* The forgot / reset password buttons are the same button: they had no rule and showed as bare browser buttons under the card's fields. */ #login-btn, #forgot-pw-submit, #reset-pw-submit { background: var(--accent-fill); color: white; border: none; padding: 11px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, transform 0.1s; margin-top: 4px; } #login-btn:hover, #forgot-pw-submit:hover, #reset-pw-submit:hover { background: var(--accent-fill-hover); } #login-btn:active, #forgot-pw-submit:active, #reset-pw-submit:active { transform: scale(0.98); } #forgot-pw-submit, #reset-pw-submit { width: 100%; margin-top: 12px; } #forgot-pw-submit:disabled, #reset-pw-submit:disabled { opacity: 0.6; cursor: wait; } #reset-pw-form .login-field + .login-field { margin-top: 12px; } #login-error { color: var(--red); font-size: 12px; text-align: center; min-height: 18px; } /* A phone is narrower than the card's 380px minimum: the sign-in card ran off the side of a 375px screen. */ @media (max-width: 480px) { .login-box { min-width: 0; width: calc(100vw - 32px); padding: 28px 20px 24px; } } /* Sign-up page (signup.html): the sign-in card, with more fields. It is taller than a phone, so the screen scrolls instead of centring it off the top. */ #login-screen.signup-screen { height: auto; min-height: 100vh; padding: 24px 0; box-sizing: border-box; } .signup-box { width: 440px; max-width: calc(100vw - 32px); box-sizing: border-box; } #signup-form { display: flex; flex-direction: column; gap: 14px; } .signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* A text input has an intrinsic width, and a 1fr column will not shrink below it: the second field ran out of the card. */ .signup-row > .login-field { min-width: 0; } .signup-box .login-field input, .signup-box select { width: 100%; min-width: 0; box-sizing: border-box; } .signup-box select { background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 10px 12px; border-radius: 6px; font-family: inherit; font-size: 14px; outline: none; } .signup-box select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .signup-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-secondary); cursor: pointer; } .signup-consent input { margin-top: 2px; accent-color: var(--accent-fill); } /* Clipped, not moved off-screen: a left:-10000px box became 10,000px of sideways scroll in right-to-left languages. */ .signup-hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #login-btn:disabled { opacity: 0.6; cursor: wait; } #signup-error { color: var(--red); font-size: 12px; text-align: center; min-height: 16px; } #signup-done { text-align: center; padding: 8px 0; } #signup-done h3 { margin: 0 0 8px; font-size: 18px; color: var(--text-bright); } #signup-done p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); } .signup-login-link { font-size: 12px; text-align: center; } @media (max-width: 480px) { .signup-row { grid-template-columns: 1fr; gap: 14px; } } /* ============================================= TOP BAR ============================================= */ /* ============================================= MARKET STATUS BAR ============================================= */ #market-status-bar { grid-area: mktbar; background: #0f1117; display: flex; align-items: center; gap: 6px; padding: 4px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; border-bottom: 1px solid rgba(255,255,255,0.04); min-height: 36px; } #market-status-bar::-webkit-scrollbar { display: none; } .mkt-pill { display: flex; flex-direction: column; align-items: flex-start; padding: 3px 10px 3px 8px; border-radius: 6px; background: #0f1117; border: 0.5px solid; white-space: nowrap; flex-shrink: 0; gap: 0; min-width: 90px; } .mkt-pill.mkt-open { border-color: rgba(34,197,94,0.3); } .mkt-pill.mkt-pre { border-color: rgba(234,179,8,0.3); } .mkt-pill.mkt-closed { border-color: rgba(239,68,68,0.25); } .mkt-pill-line1 { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; } .mkt-pill.mkt-open .mkt-pill-line1 { color: var(--mkt-open); } .mkt-pill.mkt-pre .mkt-pill-line1 { color: var(--mkt-pre); } .mkt-pill.mkt-closed .mkt-pill-line1 { color: var(--mkt-closed); } .mkt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .mkt-pill.mkt-open .mkt-dot { background: #22c55e; animation: mkt-pulse 2s ease-in-out infinite; } .mkt-pill.mkt-pre .mkt-dot { background: #eab308; } .mkt-pill.mkt-closed .mkt-dot { background: #ef4444; } @keyframes mkt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); } } .mkt-pill-line2 { font-size: 9px; font-weight: 400; line-height: 1.2; padding-left: 11px; } /* Dimmer than line 1 but still 4.5:1 on the pill: "closed" at 55% was 2.82:1 and "pre" 4.39:1. */ .mkt-pill.mkt-open .mkt-pill-line2 { color: rgba(74,222,128,0.7); } /* 5.72 */ .mkt-pill.mkt-pre .mkt-pill-line2 { color: rgba(250,204,21,0.65); } /* 5.72 */ .mkt-pill.mkt-closed .mkt-pill-line2 { color: rgba(248,113,113,0.85); } /* 5.21 */ /* "Closed · After hours": why a market the node calls open does not trade (US stocks and indices outside the regular session). Its line's colour, a size smaller. */ .mkt-pill-note { font-size: 8px; letter-spacing: 0.02em; } /* Asset row market badge */ .sp-mkt-badge { display: inline-block; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 4px; border-radius: 3px; line-height: 1.3; margin-left: 4px; vertical-align: middle; } .sp-mkt-badge.mkt-open { background: rgba(34,197,94,0.15); color: var(--mkt-open); } .sp-mkt-badge.mkt-pre { background: rgba(234,179,8,0.15); color: var(--mkt-pre); } .sp-mkt-badge.mkt-closed { background: rgba(239,68,68,0.12); color: var(--mkt-closed); } /* On the light theme the pills' second line was the same bright colour at 55-60% - under 2:1 on white. */ html[data-theme="light"] .mkt-pill.mkt-open .mkt-pill-line2 { color: var(--mkt-open); } html[data-theme="light"] .mkt-pill.mkt-pre .mkt-pill-line2 { color: var(--mkt-pre); } html[data-theme="light"] .mkt-pill.mkt-closed .mkt-pill-line2 { color: var(--mkt-closed); } /* ============================================= TOP BAR ============================================= */ #top-bar { grid-area: topbar; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); height: var(--topbar-h); display: flex; align-items: center; padding: 0 12px; gap: 0; z-index: 100; } .topbar-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } /* The chat panel on phones clears the bottom menu (~56px). It sat another 62px higher to clear the floating chat bubble, which is gone: chat opens from the menu sheet. (mobile.css may still take the panel full-screen.) */ @media (max-width: 767px) { #cw-panel { bottom: 72px !important; right: 12px !important; max-width: calc(100vw - 24px); width: calc(100vw - 24px) !important; max-height: calc(100vh - 140px) !important; } } /* Hide the desktop sidebar drag handle on mobile — sidebar is full-width */ @media (max-width: 767px) { #lp-drag-handle { display: none !important; } } /* Standalone Deposit button in the top bar */ .topbar-deposit-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; background: linear-gradient(180deg, #10b981 0%, #059669 100%); color: #ffffff; border: none; border-radius: 6px; font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: filter 0.15s, transform 0.05s; box-shadow: 0 1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.12); flex-shrink: 0; white-space: nowrap; } .topbar-deposit-btn:hover { filter: brightness(1.1); } .topbar-deposit-btn:active { transform: translateY(1px); } .topbar-deposit-btn svg { color: currentColor; } @media (max-width: 900px) { .topbar-deposit-btn span { display: none; } .topbar-deposit-btn { padding: 0 8px; } } .topbar-logo { display: flex; align-items: center; flex-shrink: 0; } .topbar-divider { width: 1px; height: 20px; background: var(--border-primary); flex-shrink: 0; } .topbar-time-block { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .server-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; white-space: nowrap; } .conn-status { display: flex; align-items: center; } .conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 5px var(--orange); transition: background 0.3s, box-shadow 0.3s; } .conn-status.connected .conn-dot { background: var(--green); box-shadow: 0 0 5px var(--green); } .conn-status.disconnected .conn-dot { background: var(--red); box-shadow: 0 0 5px var(--red); } /* Market status indicator */ .market-status { display: flex; align-items: center; } .market-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); transition: background 0.3s, box-shadow 0.3s; } .market-status.open .market-dot { background: var(--green); box-shadow: 0 0 6px var(--green); } .market-status.closed .market-dot { background: var(--red); box-shadow: 0 0 6px var(--red); } /* Metrics strip */ /* The strip fits between the clock and Deposit + the account button. Its blocks come and go (LOCKED, AI INVESTED and the bonus pill only show when > 0) and the labels change length with the language, so a fixed breakpoint could not keep it off the buttons. app.js fitHeaderMetrics() drops MARGIN LEVEL, then MARGIN, then tightens the padding while the strip overflows. The blocks no longer shrink (their text ran into each other) and the strip clips, so whatever still does not fit can never sit on top of the buttons. "safe" keeps BALANCE, the first figure, in view when it overflows; a browser without it keeps plain centring. */ .topbar-metrics { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; justify-content: center; justify-content: safe center; overflow: hidden; } .metric-block { display: flex; flex-direction: column; align-items: center; padding: 2px 12px; min-width: 0; flex-shrink: 0; } .metric-block.metric-fit-hidden { display: none !important; } .topbar-metrics.metrics-compact .metric-block { padding: 2px 6px; } .metric-label { /* 10px, not 8: the BALANCE / EQUITY / MARGIN strip was unreadable. */ font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; line-height: 1; white-space: nowrap; } .metric-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--text-bright); white-space: nowrap; line-height: 1.3; } .metric-value em { font-style: normal; font-size: 9px; color: var(--text-muted); font-weight: 500; } /* LOCKED is loan collateral and AI INVESTED is money in active AI packages. Both carry a tooltip saying so, hence the help cursor. The colours were inline #fbbf24, 1.7:1 on the light theme's white bar. */ .metric-locked, .metric-ai, .metric-bonus { cursor: help; } /* BONUS (not withdrawable): trading credit, in the green the bonus pill beside the balance used (its tokens read at 4.6:1 and up on every theme). */ .metric-bonus .metric-label, .metric-bonus .metric-value { color: var(--green); } /* A balance below zero: losses the bonus is covering. */ .metric-value.metric-negative { color: var(--red); } /* "(not withdrawable)" stays in lower case after the upper-case "LOAN". */ .metric-label-sub { text-transform: none; letter-spacing: 0; font-weight: 600; } .metric-locked .metric-label, .metric-locked .metric-value { color: var(--metric-locked); } .metric-ai .metric-label, .metric-ai .metric-value { color: var(--metric-ai); } @media (max-width: 1380px) { /* Hide MARGIN + MARGIN LEVEL metrics earlier so the Deposit button and user dropdown don't collide with the metric strip in the 1250-1380px window. */ .metric-hide-narrow { display: none !important; } } /* User dropdown */ .topbar-user-wrap { position: relative; } .topbar-user-btn { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border-primary); color: var(--text-secondary); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 11px; transition: all 0.15s; } .topbar-user-btn:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.03); } .topbar-user-btn svg { color: var(--text-muted); flex-shrink: 0; } /* Per-group plan badge in the top bar (Feature #9). Painted by app.js renderPlanBadge() from /api/user planName + planColor. Falls back to a neutral grey when no operator-picked color is set. */ .user-plan-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.06); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.12); font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1; margin-inline-start: 4px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } /* Small help indicator (ⓘ) next to the Order Type label. Shows the 3-option explanation on hover (Feature #10). */ .ow-type-help { display: inline-block; margin-inline-start: 4px; font-size: 11px; color: var(--text-muted); cursor: help; user-select: none; } .ow-type-help:hover { color: var(--text-primary); } #user-name { font-weight: 500; color: var(--text-primary); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { #user-name { max-width: 72px; } } .user-dropdown { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 8px; min-width: 180px; max-width: min(280px, calc(100vw - 16px)); padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 200; box-sizing: border-box; } /* In RTL anchor the dropdown to the left edge of the user button so it doesn't overflow off-screen on the right; items use logical text-align. */ html[dir="rtl"] .user-dropdown, [dir="rtl"] .user-dropdown { right: auto; left: 0; } .user-dropdown.visible { display: block; } .ud-info { padding: 6px 8px; display: flex; align-items: center; gap: 8px; } .ud-name { font-weight: 600; font-size: 12px; color: var(--text-bright); } #user-status-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; background: var(--green); color: white; } #user-status-badge.view_only { background: var(--orange); } #user-status-badge.blocked { background: var(--red); } .ud-divider { height: 1px; background: var(--border-primary); margin: 4px 0; } .ud-logout { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--text-secondary); padding: 6px 8px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; transition: all 0.15s; } .ud-logout:hover { background: var(--red-bg); color: var(--red); } .ud-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; background: none; border: none; color: var(--text-secondary); padding: 6px 8px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 12px; transition: all 0.15s; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ud-item:hover { background: rgba(41,98,255,0.1); color: var(--text-bright); } /* The label span inside a ud-item should be the flexible part that ellipsises if too long — keeps icon + badges visible in any locale. */ .ud-item > span:not([id]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ud-logout { text-align: start; box-sizing: border-box; } /* Language row uses margin-inline-start so it flips correctly in RTL. */ #ud-lang-current { margin-inline-start: auto; margin-left: 0 !important; } /* Unread support-chat count: on the account button and on the menu's "Support Chat" row (chat.js paints both). White on #dc2626 is 4.83:1. */ .ud-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 1; flex: 0 0 auto; margin-inline-start: auto; } .ud-count-badge[hidden] { display: none; } #user-menu-chat-badge { margin-inline-start: 2px; } /* High-contrast switch (account menu and the phone's menu sheet). The state is aria-checked on the row, set by theme.js. */ .ud-switch { position: relative; flex: 0 0 auto; width: 30px; height: 16px; margin-inline-start: auto; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border-secondary); transition: background 0.15s, border-color 0.15s; } .ud-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-secondary); transition: transform 0.15s; } [aria-checked="true"] > .ud-switch { background: var(--accent-fill); border-color: var(--accent-fill); } [aria-checked="true"] > .ud-switch::after { background: #ffffff; transform: translateX(14px); } /* Terminal Modal Overlay */ .tm-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; } /* Tokens throughout, so these panels follow dark, light and high contrast. The text colours were white at 0.35-0.5 alpha on a fixed #151821: .tm-info 3.81:1, .tm-table th 3.23:1 at 10px, .tm-close 3.81:1, and .tm-pkg-price #2962FF 3.35:1. */ .tm-panel { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 12px; width: 460px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.5); font-family: 'Inter', sans-serif; } .tm-header { padding: 16px 20px; border-bottom: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: space-between; } .tm-header h3 { color: var(--text-bright); font-size: 15px; font-weight: 600; margin: 0; } .tm-close { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 2px 6px; line-height: 1; border-radius: 4px; } .tm-close:hover { color: var(--text-bright); background: var(--hover-surface-strong); } .tm-body { padding: 20px; } .tm-field { margin-bottom: 14px; } .tm-field label { display: block; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .tm-field input, .tm-field textarea, .tm-field select { width: 100%; background: var(--bg-input); border: 1px solid var(--border-secondary); border-radius: 6px; padding: 10px 12px; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; outline: none; } .tm-field input:focus, .tm-field textarea:focus, .tm-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .tm-field textarea { resize: none; min-height: 60px; } .tm-btn { background: var(--accent-fill); color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif; width: 100%; transition: background 0.15s; } .tm-btn:hover { background: var(--accent-fill-hover); } .tm-btn:disabled { opacity: 0.5; cursor: default; } .tm-btn-danger { background: #f44336; } .tm-btn-danger:hover { background: #d32f2f; } /* Inline "Edit" / "Cancel" link-style buttons used on the profile modal */ .tm-btn-link { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 6px; font-family: inherit; } .tm-btn-link:hover { color: var(--accent); text-decoration: underline; } .tm-info { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } .tm-balance { font-size: 22px; font-weight: 700; color: var(--text-bright); margin-bottom: 16px; } .tm-success { padding: 16px; text-align: center; color: var(--green); font-size: 14px; } .tm-error { padding: 8px 12px; background: var(--red-bg); border-radius: 4px; color: var(--red); font-size: 12px; margin-bottom: 10px; } .tm-divider { border: none; border-top: 1px solid var(--border-primary); margin: 16px 0; } .tm-table { width: 100%; border-collapse: collapse; font-size: 12px; } /* start, not left: in Arabic (dir=rtl) the headers sat on the far side of their values. */ .tm-table th { text-align: start; font-size: 10px; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border-primary); } .tm-table td { padding: 8px; border-bottom: 1px solid var(--hover-surface-strong); color: var(--text-primary); } .tm-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; } /* Theme colours, not fixed dark chips: "rejected" (#f44336 on #3a1b1b) was 4.22:1 in every mode, and the dark chips sat on the light theme's white panel as black blobs. On light and in high contrast they are outlined (see "Status chips" below). */ .tm-badge-pending { background: var(--orange-bg); color: var(--orange); } .tm-badge-approved, .tm-badge-active { background: var(--green-bg); color: var(--green); } .tm-badge-rejected { background: var(--red-bg); color: var(--red); } .tm-badge-repaid { background: var(--hover-surface-strong); color: var(--text-secondary); } .tm-badge-info { background: var(--accent-glow); color: var(--accent); } .tm-pkg-card { background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: 8px; padding: 14px; margin-bottom: 10px; } .tm-pkg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .tm-pkg-name { font-size: 14px; font-weight: 600; color: var(--text-bright); } .tm-pkg-price { font-size: 16px; font-weight: 700; color: var(--accent); } .tm-pkg-desc { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; } .tm-pkg-btn { background: var(--accent-fill); color: #fff; border: none; border-radius: 4px; padding: 6px 14px; font-size: 11px; cursor: pointer; } .tm-pkg-btn:hover { background: var(--accent-fill-hover); } .tm-disabled-msg { padding: 30px 20px; text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.6; } /* Safety net for colours still written inline by the deposit, withdrawal and KYC screens: white at 0.25-0.45 (2.5-4.3:1 on the dark panel, white-on-white on the light one), #e0e0e0 titles, #4a9eff labels (2.75:1 on white) and two fixed dark boxes that stayed dark on the light theme. Those screens are being rebuilt separately; until then this maps them onto the theme tokens in every mode. Scoped to the modal. */ .tm-panel [style*="color:rgba(255,255,255,0.2"], .tm-panel [style*="color:rgba(255,255,255,0.3"], .tm-panel [style*="color:rgba(255,255,255,0.4"] { color: var(--text-muted) !important; } .tm-panel [style*="color:rgba(255,255,255,0.5"], .tm-panel [style*="color:rgba(255,255,255,0.6"], .tm-panel [style*="color:rgba(255,255,255,0.7"] { color: var(--text-secondary) !important; } .tm-panel [style*="color:#e0e0e0"] { color: var(--text-primary) !important; } .tm-panel [style*="color:#4a9eff"], .tm-panel [style*="color:#2962FF"] { color: var(--accent) !important; } .tm-panel [style*="background:#1a1f2e"], .tm-panel [style*="background:#151821"] { background: var(--bg-tertiary) !important; } /* ============================================= MARGIN CALL BANNER ============================================= */ #margin-call-banner { grid-area: banner; background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08)); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--red-bright); text-align: center; padding: 8px 16px; font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; animation: margin-call-pulse 2s ease-in-out infinite; letter-spacing: 0.5px; } .mc-separator { opacity: 0.3; } @keyframes margin-call-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* ============================================= ALERT POPUP ============================================= */ #alert-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; } #alert-popup { background: var(--bg-secondary); border: 1px solid var(--border-secondary); padding: 32px; border-radius: 12px; text-align: center; min-width: 340px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); } .alert-icon { margin-bottom: 16px; } #alert-content { margin-bottom: 20px; font-size: 14px; line-height: 1.6; color: var(--text-primary); } #alert-close { background: var(--accent-fill); color: white; border: none; padding: 8px 24px; cursor: pointer; border-radius: 6px; font-weight: 500; font-size: 13px; font-family: inherit; transition: background 0.2s; } #alert-close:hover { background: var(--accent-fill-hover); } /* ============================================= MAIN LAYOUT ============================================= */ #app { display: grid; grid-template-areas: "mktbar mktbar" "topbar topbar" "banner banner" "left center" "bottom bottom"; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: auto var(--topbar-h) auto 1fr var(--bottom-h); height: 100vh; gap: 1px; background: var(--border-primary); overflow: hidden; } /* ============================================= PANEL CHROME ============================================= */ .panel { display: flex; flex-direction: column; background: var(--bg-secondary); overflow: hidden; } .panel-header { height: var(--panel-header-h); min-height: var(--panel-header-h); display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-primary); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.8px; user-select: none; } .panel-header svg { color: var(--text-muted); } .panel-body { flex: 1; padding: 12px; overflow-y: auto; } .panel-body-flush { padding: 0; } .panel-grow { flex: 1; } /* ============================================= PANEL TABS (Positions) ============================================= */ .panel-header-tabs { gap: 0; padding: 0; } .panel-tab { height: 100%; padding: 0 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .panel-tab:hover { color: var(--text-secondary); } .panel-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-count { background: var(--bg-elevated); padding: 1px 6px; border-radius: 8px; font-size: 11px; color: var(--text-muted); font-weight: 500; } .panel-tab.active .tab-count { background: var(--accent-glow); color: var(--accent); } .tab-content { display: none; height: 100%; overflow-y: auto; } .tab-content.active { display: block; } /* ============================================= LEFT SIDEBAR ============================================= */ #left-sidebar { grid-area: left; background: var(--bg-secondary); display: flex; flex-direction: column; overflow: hidden; } /* ACCOUNT */ #account-panel { flex-shrink: 0; } .account-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; } .account-row + .account-row { border-top: 1px solid rgba(255, 255, 255, 0.03); } .acc-label { font-size: 11px; color: var(--text-muted); } .acc-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text-primary); } .acc-equity { color: var(--accent); font-weight: 600; } .account-divider { height: 1px; background: var(--border-primary); margin: 6px 0; } /* ============================================= SYMBOL PANEL ============================================= */ #symbol-panel { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; } /* Tabs The panel is 200-600 px wide (the trader drags it; 240 px below a 1100 px window) and the three names run long in other languages ("GEWINNER & VERLIERER", "TODOS LOS SÍMBOLOS"). Kept on one line they overran it - 257 px of English tabs in a 240 px panel, 288-319 px of German, Spanish or Portuguese in the default 260 - and the panel's edge cut the last tab off. A name now wraps between its words instead: the tabs share the row by the length of their names, none narrower than its longest word, all the same height. */ .sp-tabs { display: flex; align-items: stretch; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-primary); padding: 0; flex-shrink: 0; container-type: inline-size; } .sp-tab { flex: 1 1 auto; background: none; border: none; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 4px; cursor: pointer; transition: all 0.15s; border-bottom: 2px solid transparent; white-space: normal; text-align: center; } /* The narrowest panels: the spacing goes before a word would have to. */ @container (max-width: 250px) { .sp-tab { letter-spacing: 0; padding-inline: 3px; } } .sp-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); } .sp-tab.active { color: var(--text-bright); border-bottom-color: var(--accent); } .sp-tab-icon { flex: 0 0 auto; padding: 8px 10px; display: flex; align-items: center; justify-content: center; } /* Search bar */ /* Asset type filter buttons */ .sp-type-filters { display: flex; gap: 3px; padding: 5px 6px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); flex-wrap: nowrap; overflow-x: auto; } .sp-type-btn { background: none; border: 1px solid var(--border-primary); color: var(--text-muted); font-size: 10px; font-weight: 600; font-family: 'Inter', sans-serif; padding: 3px 7px; border-radius: 3px; cursor: pointer; white-space: nowrap; transition: all 0.15s; letter-spacing: 0.3px; } .sp-type-btn:hover { color: var(--text-primary); border-color: var(--accent); } .sp-type-btn.active { background: var(--accent-fill); color: #fff; border-color: var(--accent-fill); } /* Asset class badges */ .sp-class-badge { display: inline-block; width: 18px; height: 14px; line-height: 14px; text-align: center; font-size: 7px; font-weight: 700; border-radius: 2px; flex-shrink: 0; margin-right: 4px; } .sp-class-forex { background: #1a4a8a; color: #8cc8ff; } /* 4.95 (#4da6ff was 3.44) */ .sp-class-stocks { background: #2a2a3a; color: #ccc; } .sp-class-index { background: #3a1a5a; color: #c084fc; } .sp-class-commodity { background: #4a3a1a; color: #fbbf24; } .sp-class-crypto { background: #4a2a1a; color: #f97316; } .sp-search-bar { position: relative; display: flex; align-items: center; padding: 6px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } /* Logical properties throughout, so the icon and the clear button swap sides on the right-to-left (Arabic) page. */ .sp-search-icon { position: absolute; inset-inline-start: 16px; color: var(--text-muted); pointer-events: none; } .sp-search-bar input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: var(--radius); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 11px; padding-block: 5px; padding-inline: 24px 22px; outline: none; -webkit-appearance: none; appearance: none; } /* The browser's own clear cross would sit on top of ours. */ .sp-search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .sp-search-bar input:focus { border-color: var(--accent); } .sp-search-clear { position: absolute; inset-inline-end: 12px; width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; } .sp-search-clear:hover { color: var(--text-primary); background: var(--bg-elevated); } .sp-search-clear[hidden] { display: none; } /* While the box has text its matches replace the open tab's list. */ .sp-search-results { flex: 1; min-height: 0; overflow-y: auto; } .sp-search-results[hidden] { display: none; } #symbol-panel.sp-searching .sp-tab-content { display: none !important; } .sp-row.sp-kbd-active { box-shadow: inset 2px 0 0 var(--accent); background: var(--bg-elevated); } html[dir="rtl"] .sp-row.sp-kbd-active { box-shadow: inset -2px 0 0 var(--accent); } /* Body scroll area */ .sp-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .sp-tab-content { display: none; } .sp-tab-content.active { display: block; flex: 1; min-height: 0; overflow-y: auto; } /* The 'all' tab needs flex layout for virtual scroll */ #sptab-all.active { display: flex; flex-direction: column; overflow: hidden; /* scroll happens on #sp-all-list, not here */ } #sp-all-list { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Group headers */ .sp-group-header { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border-secondary); cursor: pointer; user-select: none; } .sp-group-header:hover { background: rgba(255,255,255,0.04); } .sp-group-arrow { font-size: 8px; transition: transform 0.2s; display: inline-block; } .sp-group-header.collapsed .sp-group-arrow { transform: rotate(-90deg); } .sp-group-count { color: var(--text-muted); font-weight: 500; font-size: 9px; opacity: 0.6; margin-left: auto; } /* Symbol row */ .sp-row { display: flex; align-items: center; padding: 5px 8px; gap: 6px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid rgba(255,255,255,0.02); } /* Virtual-scroll rows: compact layout for narrow panel */ .sp-vs-row { gap: 3px; padding: 0 4px; } .sp-vs-row .sp-price { font-size: 10px; flex-shrink: 0; width: auto; } .sp-vs-row .sp-spread { display: none; /* hide spread in compact view — not enough space */ } .sp-vs-row .sp-change { font-size: 9px; width: 46px; text-align: right; flex-shrink: 0; } .sp-vs-row .sp-star { font-size: 10px; width: 12px; flex-shrink: 0; } .sp-vs-row .sp-class-badge { flex-shrink: 0; } .sp-vs-row .sp-name { flex: 1; min-width: 30px; } .sp-row:hover { background: var(--bg-elevated); } .sp-row.selected { background: var(--accent-glow); } .sp-row.sp-tick { animation: sp-tick-flash 0.35s ease-out; } @keyframes sp-tick-flash { 0% { background: rgba(59,130,246,0.12); } 100% { background: transparent; } } /* A price that has stopped updating while its market is open (js/price-stream.js, app.js paintPriceAge): greyed, not hidden - the last quote stays readable and plainly not live, with "Price delayed" on hover and in the ticket. Opacity and grayscale rather than a colour, so it reads the same on the ticket's red and green buttons as in the lists. */ .wt-stale { opacity: 0.5; filter: grayscale(1); } /* High contrast keeps full contrast: a dotted underline marks it instead. */ html[data-contrast="high"] .wt-stale { opacity: 1; filter: none; text-decoration: underline dotted; text-underline-offset: 2px; } .wt-delayed-tag { color: var(--orange); font-weight: 600; } /* Star */ .sp-star { font-size: 12px; color: var(--text-muted); cursor: pointer; opacity: 0.3; transition: all 0.15s; flex-shrink: 0; width: 14px; text-align: center; } .sp-star:hover { opacity: 0.7; color: var(--orange); } /* var(--orange), not #f59e0b: that was 2.15:1 on the light theme. */ .sp-star.active { opacity: 1; color: var(--orange); } /* Icon */ .sp-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; } /* ===================================================== ASSET ICONS — official logos / flags / commodity glyphs ===================================================== */ /* Wrapper holds the live image + a hidden fallback span. When the img fires onerror, JS hides the img and reveals the fallback. */ .ai-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; position: relative; } .ai-wrap > .ai-img { width: 22px; height: 22px; } /* Stock logos are mostly dark wordmarks on transparency, so on a dark theme they load correctly and render invisibly — which reads as a missing icon. A light plate behind them is what every trading app does, and `contain` keeps a wide wordmark from being cropped to its middle by object-fit:cover. */ .ai-wrap.ai-stock > .ai-img { background: #f4f6fb; object-fit: contain; padding: 2px; } html[data-theme="light"] .ai-wrap.ai-stock > .ai-img { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } /* Stock + crypto company logos */ .ai-img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.04); flex-shrink: 0; display: block; } /* Fallback colored-letter badge (revealed when CDN 404s) */ .ai-fb { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 8px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; position: absolute; inset: 0; } /* Forex pair: two flags overlapping like coins */ .ai-fx { position: relative; display: inline-block; width: 26px; height: 22px; flex-shrink: 0; } .ai-fx img { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #151821; object-fit: cover; background: #1a1f2e; } .ai-fx-base { top: 0; left: 0; z-index: 2; } .ai-fx-quote { bottom: 0; right: 0; z-index: 1; } /* Tadawul ticker — Saudi flag with code overlay */ .ai-saudi { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #006c35; overflow: hidden; flex-shrink: 0; } .ai-saudi-flag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .ai-saudi-code { position: relative; z-index: 1; font-size: 7px; font-weight: 800; color: #ffffff; font-family: 'JetBrains Mono', monospace; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.6); } /* Index — flag + abbreviation */ .ai-index { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1a1f2e; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.06); } .ai-index-flag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; } .ai-index-label { position: relative; z-index: 1; font-size: 7px; font-weight: 800; color: #ffffff; font-family: 'JetBrains Mono', monospace; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.7); } /* Chart header icon — slightly larger than the row icon */ .ai-chart-icon { display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; vertical-align: middle; } .ai-chart-icon .ai-img, .ai-chart-icon .ai-badge, .ai-chart-icon .ai-saudi, .ai-chart-icon .ai-index, .ai-chart-icon .ai-cmdty { width: 28px; height: 28px; } .ai-chart-icon .ai-fx { width: 32px; height: 28px; } .ai-chart-icon .ai-fx img { width: 20px; height: 20px; } .ai-chart-icon .ai-saudi-code, .ai-chart-icon .ai-index-label { font-size: 8px; } /* Commodity badge */ .ai-cmdty { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; flex-shrink: 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15); } .sym-icon-flag { font-size: 14px; line-height: 1; } .sym-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 8px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; } .sym-badge-gold { background: rgba(245,158,11,0.2); color: #fbbf24; } .sym-badge-silver { background: rgba(148,163,184,0.2); color: #94a3b8; } .sym-badge-crypto { background: rgba(139,92,246,0.2); color: #a78bfa; font-size: 10px; } .sym-badge-index { background: rgba(59,130,246,0.15); color: #60a5fa; font-size: 7px; } .sym-badge-stock { background: rgba(16,185,129,0.15); color: #34d399; font-size: 8px; } /* The favourites, movers and search rows share the 260 px sidebar with the same columns as the All list, which already drops the spread: with it the fixed columns took every pixel and the name got two (a favourite showed its flags and no name). The name keeps at least 64 px now. */ #sp-fav-list .sp-spread, #sp-risers .sp-spread, #sp-fallers .sp-spread, #sp-search-list .sp-spread { display: none; } #sp-fav-list .sp-row, #sp-risers .sp-row, #sp-fallers .sp-row, #sp-search-list .sp-row { gap: 4px; padding-inline: 6px; } #sp-fav-list .sp-price, #sp-risers .sp-price, #sp-fallers .sp-price, #sp-search-list .sp-price { width: auto; min-width: 52px; } #sp-fav-list .sp-change, #sp-risers .sp-change, #sp-fallers .sp-change, #sp-search-list .sp-change { width: 54px; } /* The name box is a row of its own: a long name ("Saudi Aramco") is cut with an ellipsis and the market badge beside it stays in view. With the name inline, the badge was the part cut off, so a closed stock in these lists showed no Closed marker. */ #sp-fav-list .sp-name, #sp-risers .sp-name, #sp-fallers .sp-name, #sp-search-list .sp-name { min-width: 64px; display: flex; align-items: center; gap: 4px; } .sp-name-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sp-fav-list .sp-mkt-badge, #sp-risers .sp-mkt-badge, #sp-fallers .sp-mkt-badge, #sp-search-list .sp-mkt-badge { flex-shrink: 0; margin: 0; } /* A search is for finding the instrument, so in a panel under 300 px its matches give the day's change column (54 px) to the name: in the default 260 px panel a match showed "US Doll..." beside its OPEN badge, and at 200 px the rows ran 30 px past the panel's edge. The price stays. */ .sp-search-results { container-type: inline-size; } @container (max-width: 299px) { #sp-search-list .sp-change { display: none; } } /* Name */ .sp-name { flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Price */ .sp-price { width: 68px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--text-primary); flex-shrink: 0; } /* Spread */ .sp-spread { width: 44px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: var(--text-muted); flex-shrink: 0; } /* Change */ .sp-change { width: 62px; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; flex-shrink: 0; } .sp-up { color: var(--green-bright); } .sp-down { color: var(--red-bright); } .sp-flat { color: var(--text-muted); } /* Empty state */ .sp-empty { padding: 20px 12px; text-align: center; color: var(--text-muted); font-size: 11px; line-height: 1.5; } /* Movers divider */ .sp-movers-divider { padding: 6px 8px; font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; border-top: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-secondary); background: rgba(255,255,255,0.02); text-align: center; } /* Legacy compat — keep tick flash classes for trading.js */ .price-up { color: var(--green-bright) !important; } .price-down { color: var(--red-bright) !important; } /* ============================================= CENTER: CHART ============================================= */ #center-area { grid-area: center; display: flex; flex-direction: column; background: var(--bg-primary); overflow: hidden; min-height: 0; /* critical: allow flex child to shrink inside grid */ } #chart-toolbar { min-height: 36px; display: flex; align-items: center; padding: 0 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); gap: 12px; position: relative; /* Allow horizontal scroll instead of clipping when narrow viewports push the toolbar past the chart area width. Symbol label stays sticky on the left so traders always see the active symbol. */ overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin; } #chart-toolbar::-webkit-scrollbar { height: 4px; } #chart-toolbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; } #chart-toolbar > * { flex-shrink: 0; } #chart-symbol-label { position: sticky; left: 0; background: var(--bg-secondary); z-index: 2; padding-right: 4px; } #chart-symbol-label { display: flex; align-items: center; gap: 10px; } #chart-sym-name { font-weight: 700; font-size: 14px; color: var(--text-bright); letter-spacing: -0.3px; } #chart-sym-price { font-size: 13px; color: var(--text-secondary); } /* The pre-market / after-hours price beside the quote (chart.js paintChartExtPrice): for information only, so quieter than the quote. */ #chart-sym-ext { font-size: 11px; color: var(--text-muted); } #chart-sym-ext[hidden] { display: none; } /* chart toolbar flex alignment handled above */ #chart-timeframes { display: flex; gap: 2px; background: var(--bg-input); border-radius: var(--radius); padding: 2px; } .tf-btn { background: rgba(255,255,255,0.05); border: none; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 12px; cursor: pointer; transition: all 0.15s; letter-spacing: 0.3px; } .tf-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-secondary); } .tf-btn.active { background: var(--tab-active-fill); color: white; } /* Chart style menu — replaces the four #chart-type-toggle icon buttons */ .chart-style { position: relative; } .chart-style-btn { display: flex; align-items: center; gap: 5px; padding: 3px 7px; white-space: nowrap; } .chart-style-icon { display: inline-flex; align-items: center; line-height: 0; } .chart-style-label { font-size: 11px; font-weight: 600; } .chart-style-caret { font-size: 8px; opacity: 0.7; } /* Fixed, and lifted to by initChartStyleMenu(). #chart-toolbar is horizontally scrollable, which forces overflow-y to hidden — an absolutely positioned menu inside it is clipped to the toolbar's own height and simply never appears. Position is written by JS from the button's rect. */ .chart-style-menu { display: none; position: fixed; z-index: 4000; min-width: 188px; max-height: 70vh; overflow-y: auto; padding: 4px; background: var(--bg-elevated); border: 1px solid var(--border-primary); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .chart-style-menu.open { display: block; } /* A hairline between groups (Bars / Lines / Areas) instead of headings — the icons already say which family an item belongs to. */ .csm-group + .csm-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-primary); } .csm-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; background: none; border: none; border-radius: 4px; color: var(--text-secondary); font-size: 12px; text-align: start; cursor: pointer; transition: background 0.12s, color 0.12s; } .csm-item:hover { background: var(--bg-input); color: var(--text-primary); } .csm-item.active { color: var(--text-primary); background: var(--bg-input); } .csm-icon { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; } .csm-label { flex: 1; min-width: 0; } .csm-check { font-size: 10px; color: var(--accent); } /* Zoom / candle size */ .chart-zoom-group { display: flex; gap: 2px; align-items: center; } #chart-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-muted); font-size: 12px; display: none; gap: 8px; align-items: center; z-index: 10; } #chart-loading.visible { display: flex; } .spinner { width: 16px; height: 16px; border: 2px solid var(--border-secondary); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #chart-container { flex: 1; min-height: 0; position: relative; width: 100%; overflow: hidden; } #chart-container a[href*="tradingview"] { display: none !important; } /* ============================================= TOOLBAR BUTTONS (fx, drawing tools) ============================================= */ #chart-tools-group { display: flex; align-items: center; gap: 2px; margin-left: 8px; } .toolbar-btn { background: rgba(255,255,255,0.05); border: none; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: all 0.15s; line-height: 1; } .toolbar-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-secondary); } .toolbar-btn.active { background: var(--tab-active-fill); color: white; } .toolbar-btn-danger:hover { background: rgba(239,68,68,0.2); color: var(--red); } .toolbar-divider { width: 1px; height: 16px; background: var(--border-primary); margin: 0 4px; } #fx-btn { font-style: italic; font-weight: 700; font-size: 12px; } /* ============================================= INDICATOR DROPDOWN PANEL ============================================= */ /* ============================================================ INDICATOR PICKER — TradingView-style polished panel ------------------------------------------------------------ * Fixed 420×500 popover anchored under the fx button (right- aligned to the chart pane so it never overflows on smaller screens), instead of the old full-width strip that covered the whole chart toolbar. * Sticky header with title + search input + close button. * "Active indicators" pill row appears below the header when anything is enabled — quick remove without scrolling. * Body uses zebra-striping + hover so the long list scans well. * Parameter inputs sit tight on the right of each row. ============================================================ */ #indicator-panel { display: none; /* Fixed, and lifted to by the chart init — see liftToBody. The old absolute top:40px/right:6px resolved against , not the chart area, so the panel opened underneath #top-bar. Position is written by JS from the fx button's rect. */ position: fixed; width: 420px; max-width: calc(100vw - 16px); max-height: 500px; z-index: 4000; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); overflow: hidden; /* header sticks, body scrolls inside */ display: none; flex-direction: column; } #indicator-panel.visible { display: flex; } .ind-panel-header { flex-shrink: 0; padding: 10px 12px 8px; border-bottom: 1px solid var(--border-primary); background: var(--bg-secondary); display: flex; flex-direction: column; gap: 8px; } .ind-panel-titlebar { display: flex; align-items: center; justify-content: space-between; } .ind-panel-title { font-size: 12px; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; } .ind-panel-close { background: none; border: 0; color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px; } .ind-panel-close:hover { color: var(--text-primary); background: var(--hover-surface); } .ind-panel-search { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 6px; padding: 6px 10px; color: var(--text-primary); font-family: inherit; font-size: 12px; outline: none; } .ind-panel-search:focus { border-color: #6c5ce7; } .ind-active-bar { display: none; /* shown by JS only when there's >=1 active */ flex-wrap: wrap; gap: 4px; padding-top: 4px; } .ind-active-bar.visible { display: flex; } .ind-active-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(108, 92, 231, 0.18); border: 1px solid rgba(108, 92, 231, 0.4); border-radius: 12px; padding: 2px 4px 2px 8px; font-size: 10px; color: var(--text-primary); } .ind-active-chip button { background: none; border: 0; color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; } .ind-active-chip button:hover { color: var(--red); } .ind-panel-body { flex: 1; overflow-y: auto; padding: 6px 4px 8px; } .ind-panel-body::-webkit-scrollbar { width: 6px; } .ind-panel-body::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: 3px; } .ind-section-title { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 10px 12px 4px; position: sticky; top: 0; background: var(--bg-secondary); z-index: 1; } .ind-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; transition: background 0.12s ease; } .ind-row:nth-child(even) { background: rgba(255, 255, 255, 0.015); } .ind-row:hover { background: var(--hover-surface); } .ind-row.ind-active { background: rgba(108, 92, 231, 0.10); } .ind-row.ind-hidden { display: none; } .ind-row label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); cursor: pointer; flex: 1; min-width: 130px; white-space: nowrap; } .ind-toggle { accent-color: #6c5ce7; width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; } .ind-param { width: 48px; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: 3px; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 3px 4px; text-align: center; } .ind-param:focus { border-color: var(--accent); outline: none; } /* ============================================= DRAWING CANVAS ============================================= */ #drawing-canvas-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #drawing-canvas { width: 100%; height: 100%; } /* ============================================= INLINE ORDER WIDGET ============================================= New behaviour: the widget is HIDDEN on page load. Clicking a symbol row injects this widget directly underneath that row (via JS) and reveals it. Clicking the same row again hides it. The body styles below stay identical to before — only the wrapper visibility + inline positioning changes. */ #order-widget-wrap { /* Default state: not shown until the user clicks a symbol row */ display: none; } /* When the widget has been inlined under a row, the wrapper sits inside the scrollable symbol list. Remove the sidebar-bottom flex behaviour and give it a clear separator from the rows above/below. */ #order-widget-wrap.ow-inline { display: block; background: var(--bg-tertiary); border-top: 1px solid var(--accent-primary, #6c5ce7); border-bottom: 1px solid var(--accent-primary, #6c5ce7); box-shadow: inset 0 0 0 1px rgba(108, 92, 231, 0.08); } #order-widget-wrap.ow-inline #order-widget { border-top: none; } /* When inlined inside the virtualised "ALL SYMBOLS" list we have to absolute-position it so it lives in the same coordinate space as the absolutely-positioned rows. JS sets `top` + `width`. */ #order-widget-wrap.ow-inline-vs { position: absolute; left: 0; right: 0; z-index: 2; } #order-widget { flex-shrink: 0; padding: 8px; background: var(--bg-tertiary); border-top: 1px solid var(--border-primary); } .ow-volume-row { display: flex; align-items: center; gap: 0; margin-bottom: 8px; border: 1px solid var(--border-primary); border-radius: var(--radius); overflow: hidden; } .ow-step-btn { width: 32px; height: 32px; background: var(--bg-input); border: none; color: var(--text-secondary); font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; flex-shrink: 0; user-select: none; } .ow-step-btn:hover { background: var(--bg-elevated); color: var(--text-primary); } .ow-step-btn:active { background: var(--accent-fill); color: white; } .ow-vol-center { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 2px 0; background: var(--bg-input); } .ow-vol-label { font-size: 8px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; line-height: 1; } /* Lots | Units: the size's unit, switched on the ticket. */ .ow-unit-toggle { display: inline-flex; gap: 1px; margin-top: 1px; padding: 1px; background: var(--bg-tertiary); border-radius: 3px; } .ow-unit-btn { padding: 1px 7px; background: none; border: none; border-radius: 2px; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.5; cursor: pointer; } .ow-unit-btn:hover { color: var(--text-primary); } .ow-unit-btn.active { background: var(--accent-fill); color: #fff; } .ow-unit-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } #ow-volume { width: 110px; background: transparent; border: none; color: var(--text-bright); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; text-align: center; outline: none; -moz-appearance: textfield; } #ow-volume::-webkit-inner-spin-button, #ow-volume::-webkit-outer-spin-button { -webkit-appearance: none; } .ow-buttons { display: flex; gap: 4px; margin-bottom: 4px; } .ow-btn { flex: 1; border: none; border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 8px 4px 6px; gap: 1px; transition: all 0.12s; position: relative; } .ow-btn-sell { background: #ff4d6a; box-shadow: 0 2px 6px rgba(255, 77, 106, 0.25); } .ow-btn-sell:hover { background: #e6445f; } .ow-btn-buy { background: #00d084; box-shadow: 0 2px 6px rgba(0, 208, 132, 0.25); } .ow-btn-buy:hover { background: #00bb77; } .ow-btn:active { transform: scale(0.98); } .ow-btn-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 1px; } .ow-btn-price { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: white; } .ow-price-flash { animation: ow-flash 0.3s ease-out; } @keyframes ow-flash { 0% { color: #fbbf24; } 100% { color: white; } } .ow-error { color: var(--red); font-size: 10px; min-height: 0; padding: 0 2px; } .ow-error:not(:empty) { margin-bottom: 4px; min-height: 14px; } /* Advanced toggle */ .ow-adv-toggle { display: flex; align-items: center; gap: 4px; width: 100%; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; padding: 4px 0; transition: color 0.15s; } .ow-adv-toggle:hover { color: var(--text-secondary); } .ow-adv-toggle svg { transition: transform 0.2s; } .ow-adv-toggle.open svg { transform: rotate(180deg); } /* Advanced panel with max-height transition */ .ow-advanced { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; } .ow-advanced.open { max-height: 160px; overflow-y: auto; } .ow-field { margin-bottom: 6px; } .ow-field label { display: block; font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; } .ow-field input, .ow-field select { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 5px 8px; border-radius: var(--radius); font-family: 'JetBrains Mono', monospace; font-size: 11px; outline: none; transition: border-color 0.15s; -moz-appearance: textfield; } .ow-field select { font-family: 'Inter', sans-serif; font-size: 11px; cursor: pointer; } .ow-field input:focus, .ow-field select:focus { border-color: var(--accent); } .ow-field input::placeholder { color: var(--text-muted); } /* ============================================= TOAST NOTIFICATIONS ============================================= */ #toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-left: 3px solid #00d084; color: var(--text-primary); padding: 10px 16px; border-radius: 6px; font-size: 12px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,0.4); transform: translateX(120%); transition: transform 0.3s ease-out; pointer-events: auto; } .toast.show { transform: translateX(0); } /* ============================================= BOTTOM: POSITIONS PANEL ============================================= */ #bottom-area { grid-area: bottom; background: var(--bg-secondary); overflow: hidden; position: relative; display: flex; flex-direction: column; } /* Drag handle (horizontal — between chart and bottom positions) */ #bp-drag-handle { height: 4px; cursor: row-resize; background: var(--border-primary); flex-shrink: 0; position: relative; /* 4px is a hard target with a mouse and impossible with a finger. The bar stays 4px; the grab area is padded out either side without moving the layout. */ box-sizing: content-box; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin: -5px 0; background-clip: padding-box; touch-action: none; z-index: 5; } #bp-drag-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 2px; background: var(--border-secondary); border-radius: 1px; } #bp-drag-handle:hover { background: var(--accent); } /* Vertical drag handle (between sidebar and chart) */ #lp-drag-handle { position: absolute; top: var(--topbar-h); bottom: var(--bottom-h); left: calc(var(--sidebar-w) - 2px); width: 6px; cursor: col-resize; z-index: 50; background: transparent; transition: background 0.15s; } #lp-drag-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 30px; background: var(--border-secondary); border-radius: 1px; } #lp-drag-handle:hover, #lp-drag-handle.dragging { background: rgba(60, 130, 246, 0.15); } #lp-drag-handle:hover::after, #lp-drag-handle.dragging::after { background: var(--accent); } body.resizing { cursor: col-resize !important; user-select: none; } body.resizing-row { cursor: row-resize !important; user-select: none; } #positions-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* Tab bar */ .bp-tab { height: 100%; padding: 0 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 10px; font-weight: 700; font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; white-space: nowrap; } .bp-tab:hover { color: var(--text-secondary); } .bp-tab.active { color: var(--tab-active); border-bottom-color: var(--tab-active); } .bp-tab .tab-count { background: var(--bg-elevated); padding: 1px 5px; border-radius: 7px; font-size: 9px; color: var(--text-muted); font-weight: 600; } .bp-tab.active .tab-count { background: rgba(108,92,231,0.2); color: var(--tab-active); } /* Body */ .bp-body { flex: 1; overflow: hidden; position: relative; } .bp-tab-content { display: none; height: 100%; } .bp-tab-content.active { display: flex; flex-direction: column; /* min-height:0 is what lets a flex child shrink below its content and scroll. Without it .bp-table-wrap keeps its full content height, the panel clips it, and the rows past the fold are simply unreachable. */ min-height: 0; /* The tabs WITHOUT a .bp-table-wrap — Loans and AI Packages — render straight into this element. It was overflow:hidden, so their content was cut off at the panel edge with no scrollbar and no way to reach the rest. Tabs that do have a wrap scroll inside it and never reach this. */ overflow: auto; } .bp-table-wrap { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; } /* Tables */ .bp-table { width: 100%; /* table-layout:fixed at width:100% can never overflow, so overflow-x on the wrapper was dead and narrow windows squeezed every column into an ellipsis instead of scrolling. A min-width gives the columns a floor and hands the overflow to the wrapper, which knows how to scroll. */ min-width: 1140px; border-collapse: collapse; table-layout: fixed; } .bp-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-tertiary); /* start, not left: the trader switches Arabic to dir=rtl, where the values sit at the right edge and left-aligned headers were a column away from them. */ text-align: start; color: var(--text-muted); font-size: 9px; font-weight: 700; padding: 6px 8px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-table td { padding: 5px 8px; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.02); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-table tbody tr { transition: background 0.12s; } .bp-table tbody tr:hover { background: var(--bg-elevated); } /* "Total P&L:" sits against its value: at the end of the row in either direction (.text-right would park it on the far side in Arabic). */ .bp-summary-row .text-right { text-align: end; } /* Column widths */ /* 124px: a position id is "#p" + 13 digits, and at 50px it was cut to "#p1774..." on anything narrower than a 1920px screen. 150px for the symbol, which shows the instrument's name now, not its feed code. Time, price and action were measured the same way: a full date-time needs 122px, "Current Price" 94px, the close button 38px - all were clipped. The table's min-width is their sum, so a narrow panel scrolls instead. */ .col-id { width: 124px; } .col-sym { width: 150px; } .col-time { width: 124px; } .col-vol { width: 50px; } .col-side { width: 60px; } .col-price { width: 100px; } .col-num { width: 50px; } .col-pnl { width: 80px; } .col-act { width: 40px; } /* Cell styles */ /* td.bp-id, not .bp-id: ".bp-table td { font-size: 11px }" outranked it, so the id rendered a size larger than intended. */ .bp-table td.bp-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); } .bp-sym { font-weight: 600; color: var(--text-bright); font-size: 11px; } .bp-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); } .bp-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; } .bp-muted { color: var(--text-muted); } .bp-note { font-size: 11px; color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; } /* Badges */ .bp-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .badge-buy { background: rgba(16,185,129,0.15); color: var(--green); } .badge-sell { background: rgba(239,68,68,0.15); color: var(--red); } /* Tokens, like buy/sell next door: #3b82f6 and #f59e0b were 3.68 and 2.15:1 on the light theme and never changed in high contrast. */ .badge-deposit { background: rgba(59,130,246,0.15); color: var(--accent); } .badge-withdrawal { background: rgba(245,158,11,0.15); color: var(--orange); } .badge-trade-profit { background: rgba(16,185,129,0.15); color: var(--green); } .badge-trade-loss { background: rgba(239,68,68,0.15); color: var(--red); } .badge-finance { background: rgba(148,163,184,0.15); color: var(--text-secondary); } .badge-reason-sl { background: rgba(239,68,68,0.15); color: var(--red); } .badge-reason-tp { background: rgba(16,185,129,0.15); color: var(--green); } .badge-reason-user { background: rgba(59,130,246,0.15); color: var(--accent); } .badge-reason-admin { background: rgba(245,158,11,0.15); color: var(--orange); } /* P&L */ .pnl-positive { color: var(--green-bright) !important; font-weight: 600; } .pnl-negative { color: var(--red-bright) !important; font-weight: 600; } .bp-pnl { font-family: 'JetBrains Mono', monospace; } /* Summary row */ .bp-summary-row td { position: sticky; bottom: 0; background: var(--bg-tertiary); border-top: 1px solid var(--border-primary); font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; padding: 5px 8px; } .bp-total-pnl { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; } /* Close / Cancel buttons */ .bp-close-btn, .bp-cancel-btn { width: 22px; height: 22px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.12s; line-height: 1; } .bp-close-btn { background: rgba(239,68,68,0.1); color: var(--red); } .bp-close-btn:hover { background: var(--red); color: white; } .bp-cancel-btn { background: rgba(245,158,11,0.1); color: var(--orange); } .bp-cancel-btn:hover { background: var(--orange); color: white; } /* Close confirmation row */ .bp-confirm-row td { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); } .bp-confirm-cell { padding: 6px 12px !important; font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; } .bp-confirm-yes { background: var(--red); color: white; border: none; padding: 3px 12px; border-radius: 3px; font-size: 10px; font-weight: 700; cursor: pointer; text-transform: uppercase; } .bp-confirm-yes:hover { filter: brightness(1.15); } .bp-confirm-no { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-primary); padding: 3px 10px; border-radius: 3px; font-size: 10px; font-weight: 600; cursor: pointer; } .bp-confirm-no:hover { background: var(--bg-tertiary); } /* Inline edit */ .bp-editable { cursor: pointer; position: relative; } .bp-editable:hover { background: rgba(255,255,255,0.04); border-radius: 2px; } .bp-inline-input { width: 100%; background: var(--bg-input); border: 1px solid var(--accent); color: var(--text-bright); font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 4px; border-radius: 2px; outline: none; -moz-appearance: textfield; } .bp-inline-input::-webkit-inner-spin-button, .bp-inline-input::-webkit-outer-spin-button { -webkit-appearance: none; } .bp-flash-ok { animation: bp-ok-flash 0.6s ease-out; } .bp-flash-err { animation: bp-err-flash 0.6s ease-out; } @keyframes bp-ok-flash { 0% { background: rgba(16,185,129,0.2); } 100% { background: transparent; } } @keyframes bp-err-flash { 0% { background: rgba(239,68,68,0.2); } 100% { background: transparent; } } /* Empty / loading states */ .bp-empty { display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--text-muted); font-size: 12px; flex: 1; } .bp-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; color: var(--text-muted); font-size: 12px; } /* ============================================= MOBILE BACK BUTTON (hidden on desktop) ============================================= */ .mob-back-btn { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0; align-items: center; justify-content: center; transition: all 0.12s; } .mob-back-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-bright); } /* ============================================= MOBILE BOTTOM NAV (hidden on desktop) ============================================= */ #mobile-nav { display: none; } /* ============================================= RESPONSIVE ADJUSTMENTS ============================================= */ @media (max-width: 1100px) { :root { /* Bumped from 220 → 240 so the symbol panel header doesn't get crammed (symbol col previously had 16px left to render names). */ --sidebar-w: 240px; } /* Drop the spread column at this size — symbol/price/change are the three users actually scan. Spread is still inside the cell tooltip if needed. */ .sp-spread { display: none; } } /* ============================================= MARKET CLOSED — GRAY OUT ORDER WIDGET ============================================= (The base #order-widget-wrap rule moved up to be next to the inline styles. We only override the closed state here.) */ #order-widget-wrap.market-closed { opacity: 0.45; pointer-events: none; position: relative; } #order-widget-wrap.market-closed::after { content: 'Market Closed'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; z-index: 5; } .market-status.closed .market-dot { background: #555566; } /* ============================================= MOBILE SYMBOL BAR (hidden on desktop) ============================================= */ #mob-symbol-bar { display: none; } /* ============================================= MOBILE LAYOUT (max-width: 768px) Single scrollable page — no view switching ============================================= */ @media (max-width: 767px) { :root { --topbar-h: 48px; --bottom-h: 0px; --sidebar-w: 100%; } body { overflow-y: auto; overflow-x: hidden; } /* Hide market status bar on mobile */ #market-status-bar { display: none !important; } /* Single scrollable column */ #app { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100vh; overflow-y: auto !important; } /* Top bar: simplified — hide metrics, show logo + user */ .topbar-metrics { display: none !important; } .topbar-time-block { display: none !important; } .topbar-divider { display: none !important; } #market-status { display: none !important; } .topbar-left { gap: 4px; } .topbar-right { margin-left: auto; } #top-bar { padding: 0 10px; order: 0; flex-shrink: 0; } /* Mobile selected symbol bar */ #mob-symbol-bar { display: flex !important; padding: 8px 12px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); gap: 12px; align-items: center; font-size: 13px; order: 1; flex-shrink: 0; } #mob-sym-name { font-weight: 700; color: var(--text-bright); } #mob-sym-price { color: var(--text-bright); font-family: 'JetBrains Mono', monospace; } #mob-sym-change.up { color: var(--green); } #mob-sym-change.down { color: var(--red); } /* Chart area comes after symbol bar */ #center-area { order: 2; position: static !important; transform: none !important; height: auto !important; min-height: 0; flex-shrink: 0; } #chart-container { height: 45vh !important; min-height: 220px; flex: none; } /* Chart toolbar compact */ #chart-toolbar { padding: 0 8px; gap: 6px; height: 34px; order: 3; } /* Hide drawing tools, chart type, indicators on mobile */ #chart-tools-group { display: none !important; } #chart-style { display: none !important; } #chart-zoom-group { display: none !important; } .draw-btn, #indicators-btn { display: none !important; } /* Compact timeframe — show only M1 M5 M15 H1 D1 */ .tf-btn[data-tf="M30"], .tf-btn[data-tf="H4"], .tf-btn[data-tf="W1"], .tf-btn[data-tf="MN"] { display: none !important; } #chart-timeframes { gap: 1px; } .tf-btn { padding: 4px 8px; font-size: 10px; } /* Show mobile back button */ .mob-back-btn { display: flex; } /* Left sidebar moves below chart */ #left-sidebar { order: 4; position: static !important; transform: none !important; width: 100% !important; height: auto !important; display: flex; flex-direction: column; flex-shrink: 0; } /* Order widget: full width */ #order-widget { padding: 6px 8px; } .ow-buttons { gap: 6px; } .ow-btn { padding: 10px 4px 8px; } /* Bottom panel below sidebar */ #bottom-area { order: 5; position: static !important; transform: none !important; height: auto !important; min-height: 0; flex-shrink: 0; } /* Symbol rows: larger tap targets */ .sp-row { padding: 8px 10px; min-height: 48px; } .sp-name { font-size: 13px; } .sp-price { font-size: 12px; } /* Bottom panel drag handle not needed */ #bp-drag-handle { display: none; } /* Mobile collapse sections */ .mob-collapse-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.04); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .mob-collapse-header .mob-arrow { font-size: 10px; transition: transform 0.25s; } .mob-collapse-header.open .mob-arrow { transform: rotate(180deg); } .mob-collapse-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mob-collapse-body.open { max-height: 600px; overflow-y: auto; } /* Mobile bottom nav */ #mobile-nav { display: flex; order: 6; flex-shrink: 0; /* Plus the iPhone home indicator, which otherwise sits on the labels. */ height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px) !important; background: var(--bg-secondary); border-top: 1px solid var(--border-primary); align-items: center; justify-content: space-around; padding: 0 4px; } .mob-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 6px 12px; flex: 1; min-height: 44px; border-radius: 6px; transition: all 0.15s; } .mob-nav-btn:hover { color: var(--text-secondary); } /* The brand's accent, not a fixed purple. */ .mob-nav-btn.active { color: var(--accent); } .mob-nav-btn.active svg { color: var(--accent); } .mob-nav-btn svg { color: var(--text-muted); transition: color 0.15s; } /* Indicator panel: full width on mobile */ #indicator-panel { left: 0; right: 0; } /* Hide margin call banner text on mobile */ .mc-separator, #margin-call-banner span:last-child { display: none; } /* Margin call banner */ #margin-call-banner { order: 0; } #login-screen { z-index: 2000; } } /* ═══════════════════════════════════════════ MOBILE-SMALL (iPhone SE / 375px) ═══════════════════════════════════════════ */ @media (max-width: 480px) { /* Login */ .login-box { min-width: auto !important; width: calc(100vw - 24px); padding: 28px 20px; } .login-logo img { height: 32px; } /* Modals — full width on small screens */ .tm-panel { width: calc(100vw - 16px) !important; max-width: none; border-radius: 10px; max-height: 85vh; } .tm-header { padding: 12px 16px; } .tm-body { padding: 14px 16px; } .tm-header h2 { font-size: 15px; } /* BUY/SELL buttons — 44px min touch target */ .btn-buy, .btn-sell, #btn-buy, #btn-sell { min-height: 44px !important; font-size: 14px !important; } .order-widget button { min-height: 44px; } /* Timeframe buttons — larger touch */ .tf-btn { padding: 6px 10px !important; font-size: 11px !important; min-height: 32px; } /* Font size floor — nothing below 10px */ .market-status-label, .market-pill-label { font-size: 10px !important; } .market-pill-sub { font-size: 9px !important; } /* Symbol panel — readable */ .sp-vs-row { font-size: 11px; min-height: 38px; } .sp-name { font-size: 11px; } .sp-bid, .sp-ask { font-size: 11px; } /* Positions table — horizontal scroll */ .terminal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .terminal-table { min-width: 600px; } /* Account metrics — 2 columns instead of 4 */ .acct-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Chat widget */ #cw-panel { width: calc(100vw - 16px) !important; right: 8px !important; bottom: 70px !important; max-height: 60vh; } /* Username dropdown */ .user-dropdown-panel { width: calc(100vw - 16px) !important; right: 8px !important; } /* Volume input */ .volume-input { font-size: 14px; } /* Scrollbar thinner */ ::-webkit-scrollbar { width: 3px; height: 3px; } } /* ============================================= ORDER TICKET — modes, steps, quote, exits ============================================= */ /* Quick shows every pane at once; step-by-step shows one at a time and the nav/rail appear. One attribute on #order-widget drives all of it, so no pane has to know which mode it is in. */ .ow-mode-row { display: flex; gap: 2px; padding: 2px; margin-bottom: 8px; background: var(--bg-input); border-radius: var(--radius); } .ow-mode-btn { flex: 1; padding: 4px 6px; background: none; border: none; border-radius: 3px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: background 0.15s, color 0.15s; } .ow-mode-btn:hover { color: var(--text-secondary); } .ow-mode-btn.active { background: var(--bg-elevated); color: var(--text-primary); } #order-widget[data-mode="quick"] #ow-steps, #order-widget[data-mode="quick"] .ow-nav, #order-widget[data-mode="quick"] .ow-pane[data-step="4"] { display: none; } #order-widget[data-mode="guided"] .ow-pane { display: none; } #order-widget[data-mode="guided"][data-step="1"] .ow-pane[data-step="1"], #order-widget[data-mode="guided"][data-step="2"] .ow-pane[data-step="2"], #order-widget[data-mode="guided"][data-step="3"] .ow-pane[data-step="3"], #order-widget[data-mode="guided"][data-step="4"] .ow-pane[data-step="4"] { display: block; } /* In guided mode the Advanced toggle is meaningless — step 3 IS the advanced fields — so it only exists in quick mode. */ #order-widget[data-mode="guided"] .ow-adv-toggle { display: none; } .ow-steps { display: flex; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; } .ow-steps li { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; } .ow-step-no { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--bg-input); font-size: 8px; } .ow-steps li.active { color: var(--text-primary); } .ow-steps li.active .ow-step-no { background: var(--accent-fill); color: #fff; } /* Green on a 25% green tint was 4.1:1; on the lighter token tint it is 4.85+. */ .ow-steps li.done .ow-step-no { background: var(--green-bg); color: var(--green); } .ow-nav { display: flex; gap: 6px; margin-top: 8px; } .ow-nav-btn { flex: 1; padding: 7px; background: var(--bg-input); border: 1px solid var(--border-primary); border-radius: var(--radius); color: var(--text-secondary); font-size: 11px; font-weight: 600; cursor: pointer; } .ow-nav-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-secondary); } .ow-nav-btn:disabled { opacity: 0.4; cursor: default; } .ow-nav-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; } /* Direction chosen in step 1 stays marked while the trader moves on. */ .ow-btn.ow-chosen { outline: 2px solid currentColor; outline-offset: -2px; } /* Size presets */ .ow-chips { display: flex; gap: 4px; margin-top: 6px; } .ow-chip { flex: 1; padding: 4px 2px; background: var(--bg-input); border: 1px solid transparent; border-radius: 3px; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; } .ow-chip:hover { color: var(--text-primary); } .ow-chip.active { border-color: var(--accent); color: var(--text-primary); } /* The quote strip. Every figure here is the engine's, not a local guess. */ .ow-quote { margin-top: 8px; padding: 7px 8px; background: var(--bg-input); border-radius: var(--radius); } .ow-quote-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10px; color: var(--text-muted); line-height: 1.7; } .ow-quote-row b { font-size: 11px; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* The one line under "Margin required", shown only when the order cannot be opened (or could not be priced): the reason in full, wrapping if long. */ .ow-quote-warn { justify-content: flex-start; line-height: 1.4; padding-top: 2px; } .ow-quote-row[hidden] { display: none; } .ow-rev-warn { justify-content: flex-end; } /* Waiting for the engine to price the order now on screen. */ .ow-quote.ow-loading b { color: var(--text-muted); } /* --danger does not exist here, so .ow-bad was always #ef4444; the direction row was #10b981 / #ef4444 - 2.54 and 3.76:1 on the light theme, and fixed in high contrast. */ .ow-bad { color: var(--red) !important; } .ow-up { color: var(--green); } .ow-down { color: var(--red); } /* Price / money switch on each exit */ .ow-seg { display: inline-flex; gap: 1px; margin-left: auto; padding: 1px; background: var(--bg-input); border-radius: 3px; } .ow-seg-btn { padding: 2px 6px; background: none; border: none; border-radius: 2px; color: var(--text-muted); font-size: 9px; font-weight: 700; cursor: pointer; } .ow-seg-btn.active { background: var(--bg-elevated); color: var(--text-primary); } .ow-field label { display: flex; align-items: center; gap: 5px; } /* The other side of what was typed: a price shows its money, money shows its price. Without it the trader is converting in their head at a spread they cannot see. */ .ow-hint { margin-top: 3px; font-size: 9px; color: var(--text-muted); min-height: 11px; } /* Review */ .ow-review { padding: 8px; background: var(--bg-input); border-radius: var(--radius); } .ow-rev-row { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--text-muted); line-height: 1.9; } .ow-rev-row b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .ow-sub { color: var(--text-muted); font-weight: 400; } .ow-confirm-btn { width: 100%; margin-top: 8px; padding: 10px; border: none; border-radius: var(--radius); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; } .ow-confirm-buy { background: #10b981; } .ow-confirm-sell { background: #ef4444; } .ow-confirm-btn:disabled { background: var(--bg-input); color: var(--text-muted); cursor: default; } /* ============================================= HIGH CONTRAST - element rules What the tokens alone cannot reach: fills with a hard-coded colour, the focus ring the inputs switch off, and hover-only lines. ============================================= */ /* A focus ring on everything focusable, in the one colour that stands out on that set (yellow on dark, black on light). Several inputs set outline:none and show focus only as a border tint. */ html[data-contrast="high"] :focus-visible, html[data-contrast="high"] input:focus, html[data-contrast="high"] select:focus, html[data-contrast="high"] textarea:focus { outline: 3px solid var(--focus-ring) !important; outline-offset: 2px; } html[data-contrast="high"] ::placeholder { color: var(--text-muted); opacity: 1; } /* Panels and inputs get a firmer edge. */ html[data-contrast="high"] .tm-panel, html[data-contrast="high"] .user-dropdown, html[data-contrast="high"] #cw-panel, html[data-contrast="high"] .login-box { border: 2px solid var(--border-secondary); } html[data-contrast="high"] .tm-overlay { background: rgba(0, 0, 0, 0.85); } html[data-contrast="high"] .tm-field input, html[data-contrast="high"] .tm-field textarea, html[data-contrast="high"] .tm-field select, html[data-contrast="high"] .login-box input, html[data-contrast="high"] .ow-field input, html[data-contrast="high"] .ow-field select { border-color: var(--border-secondary); } /* Row lines were 2-6% white - there, but not seen. */ html[data-contrast="high"] .bp-table td, html[data-contrast="high"] .tm-table td { border-bottom-color: var(--border-primary); } html[data-contrast="high"] .bp-table tbody tr:hover { outline: 1px solid var(--border-secondary); outline-offset: -1px; } /* Filled trade buttons: white on #00d084 / #ff4d6a / #10b981 / #ef4444 is 2.0-3.8:1. Darker fills with a white label are 8.2-9.0:1 in both sets. */ html[data-contrast="high"] .ow-btn-buy, html[data-contrast="high"] .ow-confirm-buy { background: #03543f; box-shadow: none; } html[data-contrast="high"] .ow-btn-sell, html[data-contrast="high"] .ow-confirm-sell { background: #9b1c1c; box-shadow: none; } html[data-contrast="high"] .ow-btn-buy:hover { background: #024332; } html[data-contrast="high"] .ow-btn-sell:hover { background: #7f1616; } html[data-contrast="high"] .ow-btn { outline: 2px solid var(--border-secondary); outline-offset: -2px; } html[data-contrast="high"] .ow-btn-label { color: #ffffff; } html[data-contrast="high"] .topbar-deposit-btn { background: #03543f; } /* Dark set: the semantic colours are bright, so what sits ON them is black (white on #4ade80 would be 1.6:1). In the light set they are dark and the white label already reads. */ html[data-contrast="high"]:not([data-theme="light"]) #user-status-badge, html[data-contrast="high"]:not([data-theme="light"]) .bp-close-btn:hover, html[data-contrast="high"]:not([data-theme="light"]) .bp-cancel-btn:hover, html[data-contrast="high"]:not([data-theme="light"]) .bp-confirm-yes { color: #000000; } /* Market strip: the pill and its second line were tinted to 55-60%. */ html[data-contrast="high"] #market-status-bar { background: var(--bg-primary); border-bottom: 1px solid var(--border-primary); } html[data-contrast="high"] .mkt-pill { background: var(--bg-secondary); border-width: 1px; } html[data-contrast="high"] .mkt-pill.mkt-open .mkt-pill-line2 { color: var(--mkt-open); } html[data-contrast="high"] .mkt-pill.mkt-pre .mkt-pill-line2 { color: var(--mkt-pre); } html[data-contrast="high"] .mkt-pill.mkt-closed .mkt-pill-line2 { color: var(--mkt-closed); } /* Toasts and the plan badge carry their own dark colours. */ html[data-contrast="high"] .toast, html[data-contrast="high"] .toast-notification { background: var(--bg-elevated); color: var(--text-primary); border: 2px solid var(--border-secondary); } html[data-contrast="high"] .user-plan-badge { border-color: var(--border-secondary); } /* Text that was dimmed with opacity instead of a colour. */ html[data-contrast="high"] .tm-btn:disabled, html[data-contrast="high"] #cw-send:disabled { opacity: 1; background: var(--bg-tertiary); color: var(--text-muted); outline: 1px solid var(--border-primary); } /* Status chips. Their tinted fill is fine on dark, but on the light theme it pulled the text under 4.5:1 (withdrawal 4.18, deposit 4.06) and in high contrast under 7:1. There they are outlined instead: no fill, a ring in the text colour (inset, so the chip does not change size). */ html[data-theme="light"] .bp-badge, html[data-theme="light"] .tm-badge, html[data-contrast="high"] .bp-badge, html[data-contrast="high"] .tm-badge { background: transparent; box-shadow: inset 0 0 0 1px currentColor; } /* The tick beside the chosen language and theme is inline #2962FF in the pickers (the language one lives in i18n/picker.js): 3.62:1 on the dark menu. */ .ud-lang-check, .ud-theme-check { color: var(--accent) !important; } /* Symbol badges (Au, Ag, the crypto / index / stock marks) were bright text on a faint tint: 1.4-2.2:1 on the light theme. */ html[data-theme="light"] .sym-badge-gold { color: #92400e; } html[data-theme="light"] .sym-badge-silver { color: #475569; } html[data-theme="light"] .sym-badge-crypto { color: #6d28d9; } html[data-theme="light"] .sym-badge-index { color: #1d4ed8; } html[data-theme="light"] .sym-badge-stock { color: #065f46; } html[data-contrast="high"] .sym-badge-gold { color: #fcd34d; } html[data-contrast="high"] .sym-badge-silver { color: #e2e8f0; } html[data-contrast="high"] .sym-badge-crypto { color: #ddd6fe; } html[data-contrast="high"] .sym-badge-index { color: #bfdbfe; } html[data-contrast="high"] .sym-badge-stock { color: #6ee7b7; } html[data-contrast="high"][data-theme="light"] .sym-badge-gold { color: #78350f; } html[data-contrast="high"][data-theme="light"] .sym-badge-silver { color: #1e293b; } html[data-contrast="high"][data-theme="light"] .sym-badge-crypto { color: #4c1d95; } html[data-contrast="high"][data-theme="light"] .sym-badge-index { color: #1e3a8a; } html[data-contrast="high"][data-theme="light"] .sym-badge-stock { color: #064e3b; } /* The symbol-class chips (FX, STK, IDX...) keep their dark fill in every theme; in high contrast the letters go up to 7:1 on it. */ html[data-contrast="high"] .sp-class-forex { color: #dbeafe; } html[data-contrast="high"] .sp-class-stocks { color: #f1f5f9; } html[data-contrast="high"] .sp-class-index { color: #e9d5ff; } html[data-contrast="high"] .sp-class-commodity { color: #fde68a; } html[data-contrast="high"] .sp-class-crypto { color: #fdba74; }