/* ============================================= WEBTRADER PRO — Professional Trading Terminal ============================================= */ :root { /* Core palette */ --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-tertiary: #1a2035; --bg-elevated: #1e2a42; --bg-input: #0f1629; /* Borders */ --border-primary: #1e2d4a; --border-secondary: #2a3a5c; --border-hover: #3a4f7a; /* Text */ --text-primary: #e2e8f0; --text-secondary: #8892a8; --text-muted: #5a6478; --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: #3b82f6; --accent-hover: #2563eb; --accent-glow: rgba(59, 130, 246, 0.15); /* Semantic */ --green: #10b981; --green-bg: rgba(16, 185, 129, 0.08); --green-bright: #34d399; --red: #ef4444; --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; } /* ============================================= 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: #e2e6ee; --border-secondary: #cbd2dd; --border-hover: #9aa3b3; /* Text — near-black primary, mid-grey secondary, light grey muted */ --text-primary: #1a2238; --text-secondary: #5a6478; --text-muted: #8892a8; --text-bright: #0a0e17; /* 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); } /* 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); } /* ============================================= 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; } .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); } #login-btn { background: var(--accent); 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 { background: var(--accent-hover); } #login-btn:active { transform: scale(0.98); } #login-error { color: var(--red); font-size: 12px; text-align: center; min-height: 18px; } /* ============================================= 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: #4ade80; } .mkt-pill.mkt-pre .mkt-pill-line1 { color: #facc15; } .mkt-pill.mkt-closed .mkt-pill-line1 { color: #f87171; } .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; } .mkt-pill.mkt-open .mkt-pill-line2 { color: rgba(74,222,128,0.6); } .mkt-pill.mkt-pre .mkt-pill-line2 { color: rgba(250,204,21,0.55); } .mkt-pill.mkt-closed .mkt-pill-line2 { color: rgba(248,113,113,0.55); } /* 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: #4ade80; } .sp-mkt-badge.mkt-pre { background: rgba(234,179,8,0.15); color: #facc15; } .sp-mkt-badge.mkt-closed { background: rgba(239,68,68,0.12); color: #f87171; } /* ============================================= 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; } /* Chat FAB needs to clear the mobile bottom nav (~56px) so it doesn't sit on top of the right-most nav icon. We adjust the chat.js-generated #cw-btn / #cw-panel by selector since they're injected at runtime. */ @media (max-width: 767px) { #cw-btn { bottom: 72px !important; right: 12px !important; } #cw-panel { bottom: 134px !important; right: 12px !important; max-width: calc(100vw - 24px); width: calc(100vw - 24px) !important; max-height: calc(100vh - 200px) !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 */ .topbar-metrics { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; justify-content: center; } .metric-block { display: flex; flex-direction: column; align-items: center; padding: 2px 12px; min-width: 0; } .metric-label { font-size: 8px; 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; } @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; } /* ============================================= 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); 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-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: 10px; 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; } /* ============================================= CALENDAR / TOP MOVERS ============================================= */ #cal-movers-panel { flex-shrink: 0; max-height: 180px; display: flex; flex-direction: column; border-bottom: 1px solid var(--border-primary); transition: max-height 0.25s ease; position: relative; } /* When the user has dragged the handle we lock max-height to their choice (set inline via JS). We turn off the css transition so dragging feels instant — the transition was there for the collapse animation only. */ #cal-movers-panel.cm-user-sized { transition: none; } /* When collapsed only the tab header is visible (~28px). The symbol panel below grows to absorb the freed space because it has flex:1 / panel-grow. */ #cal-movers-panel.cm-panel-collapsed { max-height: 32px; } #cal-movers-panel.cm-panel-collapsed .cm-resize-handle { display: none; } /* Drag handle at the bottom of the Calendar/Top Movers panel. Sits flush on the bottom border so it doubles as a visual divider against the symbol panel below. */ .cm-resize-handle { height: 6px; flex-shrink: 0; cursor: ns-resize; background: transparent; border-top: 1px solid var(--border-primary); position: relative; } .cm-resize-handle::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 2px; background: var(--text-muted); opacity: 0.4; border-radius: 2px; } .cm-resize-handle:hover::after { opacity: 0.9; } .cm-resize-handle.cm-resizing::after { opacity: 1; background: #6c5ce7; } .cm-tabs { display: flex; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .cm-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: inherit; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 7px 4px; cursor: pointer; transition: all 0.15s; } .cm-tab:hover { color: var(--text-secondary); } .cm-tab.active { color: #6c5ce7; border-bottom-color: #6c5ce7; } .cm-body { flex: 1; overflow-y: auto; min-height: 0; } .cm-tab-content { display: none; } .cm-tab-content.active { display: block; } /* Calendar */ .cal-date-header { padding: 6px 10px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border-secondary); } .cal-events-list { padding: 0; } .cal-event-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.02); font-size: 10px; } .cal-event-row:hover { background: rgba(255,255,255,0.02); } .cal-flag { font-size: 12px; flex-shrink: 0; width: 18px; text-align: center; } .cal-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-muted); flex-shrink: 0; width: 36px; } .cal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 10px; } .cal-impact { display: flex; gap: 2px; flex-shrink: 0; } .cal-sq { width: 8px; height: 8px; border-radius: 1px; background: var(--bg-elevated); } .cal-sq-high { background: #ef4444; } .cal-sq-med { background: #f59e0b; } .cal-sq-low { background: var(--text-muted); } /* ============================================= SYMBOL PANEL ============================================= */ #symbol-panel { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; } /* Tabs */ .sp-tabs { display: flex; align-items: center; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-primary); padding: 0; flex-shrink: 0; } .sp-tab { flex: 1; background: none; border: none; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 4px; cursor: pointer; transition: all 0.15s; border-bottom: 2px solid transparent; white-space: nowrap; } .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: 9px; 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); color: #fff; border-color: var(--accent); } /* 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: #4da6ff; } .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 { display: flex; padding: 6px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .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: 5px 8px; outline: none; } .sp-search-bar input:focus { border-color: var(--accent); } /* Column header row */ .sp-header-row { display: flex; align-items: center; padding: 5px 8px 5px 30px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .sp-hcol { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .sp-hcol-sym { flex: 1; min-width: 0; } .sp-hcol-price { width: 68px; text-align: right; } .sp-hcol-spread { width: 44px; text-align: right; } .sp-hcol-change { width: 62px; text-align: right; } /* 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; } } /* 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: #f59e0b; } .sp-star.active { opacity: 1; color: #f59e0b; } /* 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 + 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; } /* 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); } .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; } /* ============================================= 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); 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; } #ow-volume { width: 80px; 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; } #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: #6c5ce7; border-bottom-color: #6c5ce7; } .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: #6c5ce7; } /* Body */ .bp-body { flex: 1; overflow: hidden; position: relative; } .bp-tab-content { display: none; height: 100%; overflow: hidden; } .bp-tab-content.active { display: flex; flex-direction: column; } .bp-table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; } /* Tables */ .bp-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .bp-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-tertiary); text-align: left; 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); } /* Column widths */ .col-id { width: 50px; } .col-sym { width: 80px; } .col-time { width: 110px; } .col-vol { width: 50px; } .col-side { width: 60px; } .col-price { width: 80px; } .col-num { width: 50px; } .col-pnl { width: 80px; } .col-act { width: 32px; } /* Cell styles */ .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); } .badge-deposit { background: rgba(59,130,246,0.15); color: #3b82f6; } .badge-withdrawal { background: rgba(245,158,11,0.15); color: #f59e0b; } .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: #3b82f6; } .badge-reason-admin { background: rgba(245,158,11,0.15); color: #f59e0b; } /* 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: #8888aa; 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; } /* ============================================= CALENDAR COLLAPSE BUTTON ============================================= */ #cal-collapse-btn { margin-left: auto; background: none; border: none; color: #8888aa; cursor: pointer; font-size: 10px; padding: 2px 6px; transition: transform 0.3s; line-height: 1; } #cal-collapse-btn.collapsed { transform: rotate(180deg); } #cal-movers-body { transition: max-height 0.3s ease; overflow: hidden; } #cal-movers-body.collapsed { max-height: 0 !important; overflow: hidden; } /* ============================================= 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: #e8e8f0; } #mob-sym-price { color: #e8e8f0; 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; } /* 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; } /* Calendar panel: collapsible */ #cal-movers-panel { flex-shrink: 0; } /* 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: #8888aa; } .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; height: 56px; 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: 9px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 6px; transition: all 0.15s; } .mob-nav-btn:hover { color: var(--text-secondary); } .mob-nav-btn.active { color: #6c5ce7; } .mob-nav-btn.active svg { color: #6c5ce7; } .mob-nav-btn svg { color: var(--text-muted); transition: color 0.15s; } /* 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; } /* Hide desktop app when mobile shell is active */ #app { display: none !important; } #login-screen { z-index: 2000; } } /* ============================================= MOBILE SHELL UI (≤768px only, shown via JS) ============================================= */ #mobile-shell { display: none; } @media (max-width: 767px) { #mobile-market-bar { display: flex !important; gap: 5px; padding: 5px 10px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; background: var(--bg-deepest); border-bottom: 1px solid var(--border-mob); } #mobile-market-bar::-webkit-scrollbar { display: none; } .market-pill { display: flex; flex-direction: column; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; gap: 1px; } .market-pill.open { background: rgba(0,200,81,.10); border: 0.5px solid rgba(0,200,81,.28); } .market-pill.closed { background: rgba(255,68,68,.10); border: 0.5px solid rgba(255,68,68,.28); } .market-pill.pre { background: rgba(245,166,35,.10); border: 0.5px solid rgba(245,166,35,.28); } .market-pill-top { display: flex; align-items: center; gap: 3px; } .market-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .market-dot.open { background: #00c851; box-shadow: 0 0 4px #00c851; } .market-dot.closed { background: #ff4444; } .market-dot.pre { background: #f5a623; } .market-pill-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .market-pill.open .market-pill-label { color: #00e676; } .market-pill.closed .market-pill-label { color: #ff6b6b; } .market-pill.pre .market-pill-label { color: #ffc947; } .market-pill-sub { font-size: 7px; color: var(--text-3); padding-left: 8px; } #mobile-account-strip { display: flex !important; flex-direction: column; background: var(--bg-card); border-bottom: 1px solid var(--border-mob); padding: 8px 12px; flex-shrink: 0; } .acct-strip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .acct-username-btn { display: flex; align-items: center; gap: 5px; padding: 3px 10px; background: rgba(255,255,255,.06); border-radius: 14px; border: 0.5px solid var(--border-mid); cursor: pointer; font-size: 10px; font-weight: 600; color: var(--text-2); } .acct-username-btn .dd-arrow { font-size: 8px; color: var(--text-3); } .acct-metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; } .acct-metric { background: var(--bg-base); border-radius: 7px; padding: 5px 6px; border: 0.5px solid var(--border-mob); } .acct-metric-lbl { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); } .acct-metric-val { font-size: 11px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; } .val-white { color: var(--text-1); } .val-green { color: var(--buy); } .val-red { color: var(--sell); } .val-gold { color: var(--gold); } #mobile-symbol-bar-shell { display: flex !important; align-items: center; padding: 7px 12px; gap: 10px; background: var(--bg-base); border-bottom: 1px solid var(--border-mob); flex-shrink: 0; } .sym-info { flex: 1; } .sym-name-lbl { font-size: 14px; font-weight: 700; color: var(--text-1); } .sym-sub-lbl { font-size: 9px; color: var(--text-3); margin-top: 1px; } .sym-price-block { text-align: right; } .sym-live-price { font-size: 14px; font-weight: 700; color: var(--buy); font-variant-numeric: tabular-nums; } .sym-live-change { font-size: 9px; color: var(--buy); } .sym-search-btn { width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,.05); border: 0.5px solid var(--border-mid); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--text-3); } #mobile-tabs { display: flex !important; background: var(--bg-base); border-bottom: 1px solid var(--border-mob); flex-shrink: 0; } .mobile-tab { flex: 1; padding: 8px 4px; font-size: 9px; font-weight: 700; text-align: center; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .mobile-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .mobile-tab-content { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; } .mobile-tab-content.active { display: flex !important; } #mobile-tf-row { display: flex; gap: 2px; padding: 5px 10px; background: var(--bg-base); border-bottom: 1px solid var(--border-mob); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } #mobile-tf-row::-webkit-scrollbar { display: none; } .m-tf-pill { padding: 3px 8px; border-radius: 5px; font-size: 9px; font-weight: 700; color: var(--text-3); cursor: pointer; flex-shrink: 0; white-space: nowrap; } .m-tf-pill.active { background: rgba(41,98,255,.18); color: var(--accent-light); border: 0.5px solid rgba(41,98,255,.40); } #mobile-chart-wrap { flex: 1; min-height: 180px; width: 100%; background: var(--bg-base); overflow: hidden; position: relative; } #mobile-trade-panel { display: flex !important; flex-direction: column; background: var(--bg-elevated); border-top: 1px solid rgba(255,255,255,.08); padding: 8px 12px 7px; flex-shrink: 0; } .bid-ask-row { display: flex; gap: 6px; margin-bottom: 7px; } .bid-box, .ask-box { flex: 1; background: var(--bg-base); border-radius: 8px; padding: 6px 10px; text-align: center; border: 0.5px solid var(--border-mob); } .bid-ask-lbl { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); } .bid-price { font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--sell); font-variant-numeric: tabular-nums; } .ask-price { font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--buy); font-variant-numeric: tabular-nums; } .volume-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .volume-lbl { font-size: 9px; color: var(--text-3); width: 52px; flex-shrink: 0; } .volume-group { display: flex; height: 34px; border-radius: 7px; overflow: hidden; border: 0.5px solid var(--border-mid); flex: 1; } .vol-btn { width: 34px; background: var(--bg-surface); color: var(--text-2); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; user-select: none; } .vol-val { flex: 1; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; } .adv-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; cursor: pointer; } .adv-toggle-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); } .adv-toggle-arrow { font-size: 9px; color: var(--text-3); transition: transform .2s; } .adv-toggle-arrow.open { transform: rotate(180deg); } .adv-content { display: none; flex-direction: column; gap: 5px; background: var(--bg-base); border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; border: 0.5px solid var(--border-mob); } .adv-content.open { display: flex; } .adv-field-row { display: flex; align-items: center; gap: 8px; } .adv-field-lbl { font-size: 9px; color: var(--text-3); width: 70px; flex-shrink: 0; } .adv-field-input { flex: 1; background: var(--bg-surface); border: 0.5px solid var(--border-mid); border-radius: 5px; padding: 6px 8px; font-size: 16px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; min-height: 34px; } .adv-field-input.sl { color: var(--sell); border-color: rgba(255,82,82,.30); } .adv-field-input.tp { color: var(--buy); border-color: rgba(0,230,118,.30); } .adv-field-select { flex: 1; background: var(--bg-surface); border: 0.5px solid var(--border-mid); border-radius: 5px; padding: 6px 8px; font-size: 16px; font-weight: 600; color: var(--text-1); min-height: 34px; appearance: none; } .trade-btns-row { display: flex; gap: 6px; } .mobile-sell-btn, .mobile-buy-btn { flex: 1; height: 44px; border-radius: 9px; border: none; font-size: 13px; font-weight: 800; cursor: pointer; letter-spacing: .06em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; } .mobile-sell-btn { background: rgba(198,40,40,.15); color: var(--sell); border: 0.5px solid rgba(239,83,80,.45); } .mobile-buy-btn { background: rgba(27,94,32,.15); color: var(--buy); border: 0.5px solid rgba(76,175,80,.45); } .btn-price-sub { font-size: 8px; font-weight: 400; opacity: .65; text-transform: none; } #mobile-markets-tab { flex: 1; min-height: 0; } .mobile-search-bar { padding: 8px 12px; border-bottom: 1px solid var(--border-mob); flex-shrink: 0; } .mobile-search-input { width: 100%; background: var(--bg-surface); border-radius: 8px; padding: 8px 12px; font-size: 16px; color: var(--text-2); border: 0.5px solid var(--border-mid); box-sizing: border-box; } .mobile-cat-pills { display: flex; gap: 5px; padding: 7px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-mob); flex-shrink: 0; } .mobile-cat-pills::-webkit-scrollbar { display: none; } .cat-pill { padding: 4px 12px; border-radius: 14px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; cursor: pointer; color: var(--text-3); border: 0.5px solid var(--border-mid); } .cat-pill.active { background: rgba(41,98,255,.15); color: var(--accent-light); border-color: rgba(41,98,255,.40); } #mobile-sym-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } #mobile-sym-list::-webkit-scrollbar { display: none; } .sym-group-hdr { padding: 5px 12px 3px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); border-top: 1px solid var(--border-mob); } .sym-list-row { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; min-height: 52px; -webkit-tap-highlight-color: transparent; } .sym-list-row:active { background: rgba(255,255,255,.04); } .sym-list-row.selected { background: rgba(41,98,255,.08); } .sym-initials { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-surface); border: 0.5px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--accent-light); flex-shrink: 0; } .sym-text { flex: 1; } .sym-ticker { font-size: 12px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 5px; } .sym-fullname { font-size: 9px; color: var(--text-3); margin-top: 1px; } .m-mkt-badge { font-size: 7px; font-weight: 700; padding: 1px 5px; border-radius: 3px; } .m-mkt-badge.open { background: rgba(0,200,81,.12); color: #00e676; } .m-mkt-badge.closed { background: rgba(255,68,68,.12); color: #ff6b6b; } .sym-price-right { text-align: right; flex-shrink: 0; } .sym-price-val { font-size: 12px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; } .sym-change-val { font-size: 9px; font-variant-numeric: tabular-nums; margin-top: 1px; } .sym-change-val.up { color: var(--buy); } .sym-change-val.dn { color: var(--sell); } .sym-spread-val { font-size: 8px; color: var(--text-3); margin-top: 1px; } #mobile-positions-tab { flex: 1; min-height: 0; } #mobile-positions-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; display: flex; flex-direction: column; gap: 8px; } #mobile-positions-content::-webkit-scrollbar { display: none; } .position-card { background: var(--bg-elevated); border-radius: 10px; padding: 12px 14px; border: 0.5px solid var(--border-mid); } .pos-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .pos-sym-badge { display: flex; align-items: center; gap: 7px; } .pos-sym { font-size: 14px; font-weight: 700; color: var(--text-1); } .pos-dir { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; } .pos-dir.buy { background: rgba(0,200,81,.14); color: var(--buy); } .pos-dir.sell { background: rgba(255,82,82,.14); color: var(--sell); } .pos-pnl { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .pos-pnl.pos { color: var(--buy); } .pos-pnl.neg { color: var(--sell); } .pos-details { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 10px; color: var(--text-3); margin-bottom: 10px; } .pos-detail-row { display: flex; justify-content: space-between; } .pos-detail-val { color: var(--text-2); font-variant-numeric: tabular-nums; } .pos-close-btn { width: 100%; height: 38px; border-radius: 8px; background: rgba(239,83,80,.12); color: var(--sell); border: 0.5px solid rgba(239,83,80,.35); font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .05em; text-transform: uppercase; } #mobile-more-tab { flex: 1; min-height: 0; } .more-subtabs { display: flex; border-bottom: 1px solid var(--border-mob); flex-shrink: 0; } .more-subtab { flex: 1; padding: 9px 4px; font-size: 9px; font-weight: 700; text-align: center; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; } .more-subtab.active { color: var(--accent); border-bottom-color: var(--accent); } .more-sub-content { display: none; flex: 1; flex-direction: column; min-height: 0; } .more-sub-content.active { display: flex !important; } .cal-date-hdr { padding: 7px 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border-mob); } #mobile-cal-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } #mobile-cal-list::-webkit-scrollbar { display: none; } .cal-event-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); min-height: 48px; } .cal-event-row.high-impact { border-left: 2px solid var(--sell); background: rgba(239,83,80,.04); } .cal-flag { font-size: 9px; font-weight: 700; color: var(--text-2); width: 18px; flex-shrink: 0; } .cal-time { font-size: 9px; color: var(--text-3); width: 36px; flex-shrink: 0; font-variant-numeric: tabular-nums; } .cal-name { flex: 1; font-size: 10px; color: rgba(255,255,255,.80); } .cal-dots { display: flex; gap: 2px; flex-shrink: 0; } .cal-dot { width: 7px; height: 7px; border-radius: 2px; } .cal-dot.r { background: #ef5350; } .cal-dot.y { background: #f5a623; } .cal-dot.g { background: #26a69a; } #mobile-movers-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } #mobile-movers-list::-webkit-scrollbar { display: none; } .movers-filter-pills { display: flex; gap: 5px; padding: 7px 12px; border-bottom: 1px solid var(--border-mob); flex-shrink: 0; } .mover-filter-pill { padding: 3px 12px; border-radius: 12px; font-size: 9px; font-weight: 700; cursor: pointer; color: var(--text-3); border: 0.5px solid var(--border-mid); } .mover-filter-pill.active { background: rgba(0,200,81,.12); color: #00e676; border-color: rgba(0,200,81,.30); } .mover-row { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; min-height: 52px; } .mover-row:active { background: rgba(255,255,255,.04); } .mover-rank { font-size: 10px; font-weight: 700; color: var(--text-3); width: 18px; } .mover-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-surface); border: 0.5px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--accent-light); flex-shrink: 0; } .mover-info { flex: 1; } .mover-sym { font-size: 12px; font-weight: 700; color: var(--text-1); } .mover-name { font-size: 9px; color: var(--text-3); margin-top: 1px; } .mover-right { text-align: right; } .mover-price { font-size: 11px; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; } .mover-chg-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; margin-top: 2px; font-variant-numeric: tabular-nums; } .mover-chg-badge.up { background: rgba(0,200,81,.14); color: var(--buy); } .mover-chg-badge.dn { background: rgba(255,68,68,.14); color: var(--sell); } #mobile-user-dropdown { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.65); z-index: 9999; align-items: flex-start; justify-content: center; padding-top: 90px; } #mobile-user-dropdown.open { display: flex !important; } .dd-menu { background: var(--bg-elevated); border: 0.5px solid var(--border-mid); border-radius: 12px; overflow: hidden; width: calc(100% - 32px); max-width: 360px; } .dd-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-mob); } .dd-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(41,98,255,.22); border: 1px solid rgba(41,98,255,.40); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--accent-light); flex-shrink: 0; } .dd-user-name { font-size: 13px; font-weight: 700; color: var(--text-1); } .dd-acct-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .dd-acct-num { font-size: 9px; color: var(--text-3); } .dd-live-badge { font-size: 8px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: rgba(0,200,81,.15); color: #00e676; } .dd-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 0.5px solid var(--border-mob); cursor: pointer; min-height: 50px; -webkit-tap-highlight-color: transparent; } .dd-item:last-child { border-bottom: none; } .dd-item:active { background: rgba(255,255,255,.04); } .dd-item-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; color: var(--text-2); } .dd-item-text { flex: 1; } .dd-item-label { font-size: 12px; font-weight: 500; color: var(--text-1); } .dd-item-sub { font-size: 9px; color: var(--text-3); margin-top: 2px; } .dd-item-arrow { font-size: 12px; color: var(--text-3); } .dd-item.danger .dd-item-label { color: var(--sell); } .dd-item.danger .dd-item-icon { color: var(--sell); } .dd-divider { height: 6px; background: var(--bg-deepest); } #mobile-bottom-nav { display: flex !important; background: var(--bg-deepest); border-top: 1px solid var(--border-mob); flex-shrink: 0; } .bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 52px; position: relative; } .bnav-icon { font-size: 16px; color: rgba(255,255,255,.22); } .bnav-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.22); } .bnav-item.active .bnav-icon, .bnav-item.active .bnav-label { color: var(--accent); } .bnav-badge { position: absolute; top: 5px; right: calc(50% - 14px); background: #f44336; border-radius: 8px; min-width: 14px; height: 14px; font-size: 8px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 3px; } @keyframes flashUp { 0% { background-color: rgba(0,230,118,.25); } 100% { background-color: transparent; } } @keyframes flashDown { 0% { background-color: rgba(255,82,82,.25); } 100% { background-color: transparent; } } .flash-up { animation: flashUp .35s ease forwards; border-radius: 4px; } .flash-down { animation: flashDown .35s ease forwards; border-radius: 4px; } } /* end mobile shell media query */ /* ═══════════════════════════════════════════ 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; } /* 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; } /* Font size floor — nothing below 10px */ .market-status-label, .market-pill-label { font-size: 10px !important; } .market-pill-sub { font-size: 9px !important; } .bnav-label { 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; } }