/* Color Scheme Variables - the entire app's palette lives in these variables. Themes (below) re-color everything by overriding them via html[data-theme]. The *-rgb triplets exist so rgba() tints (hover washes, glows, chips) follow the theme too - keep each in sync with its solid-color twin. */ :root { --bg-body: #171b26; --bg-dark: #131722; --bg-card: #1c2030; --bg-chart: #0f1220; --border-color: #2a2e39; --text-muted: #848e9c; --text-light: #d1d4dc; --accent-blue: #2979ff; --accent-blue-rgb: 41, 121, 255; --accent-gold: #dfb15b; --accent-gold-rgb: 223, 177, 91; --win: #2ebd85; --win-rgb: 46, 189, 133; --loss: #f6465d; --loss-rgb: 246, 70, 93; } /* ---- Themes ----------------------------------------------------------- Selected on the Settings > Appearance page; applied as (set pre-paint from localStorage, then synced from the user's saved settings). No attribute = the default Slate palette above. Win/loss greens/reds and chart canvases stay constant across themes - they're semantic, not decorative. */ html[data-theme="midnight"] { --bg-body: #0d1117; --bg-dark: #0a0d13; --bg-card: #151b26; --bg-chart: #0a0e16; --border-color: #253044; --text-muted: #8b95a7; --text-light: #dbe2ec; --accent-blue: #4d9fff; --accent-blue-rgb: 77, 159, 255; } html[data-theme="ocean"] { --bg-body: #0e1a20; --bg-dark: #0a141a; --bg-card: #132630; --bg-chart: #0a151c; --border-color: #21414f; --text-muted: #7f97a1; --text-light: #d3e2e8; --accent-blue: #26b8cf; --accent-blue-rgb: 38, 184, 207; --accent-gold: #e8c06a; --accent-gold-rgb: 232, 192, 106; } html[data-theme="forest"] { --bg-body: #111a14; --bg-dark: #0c140f; --bg-card: #17251c; --bg-chart: #0c1610; --border-color: #27402f; --text-muted: #87988c; --text-light: #d5e0d8; --accent-blue: #43b97a; --accent-blue-rgb: 67, 185, 122; --accent-gold: #d8c06c; --accent-gold-rgb: 216, 192, 108; } html[data-theme="amethyst"] { --bg-body: #151223; --bg-dark: #100d1b; --bg-card: #1e1a32; --bg-chart: #110e1f; --border-color: #332c4f; --text-muted: #948fa8; --text-light: #dcd8ea; --accent-blue: #9d6bff; --accent-blue-rgb: 157, 107, 255; --accent-gold: #e5b566; --accent-gold-rgb: 229, 181, 102; } html[data-theme="ember"] { --bg-body: #1a1412; --bg-dark: #140f0d; --bg-card: #251c18; --bg-chart: #16100d; --border-color: #3d2f27; --text-muted: #a09083; --text-light: #e6dcd3; --accent-blue: #ff8a3d; --accent-blue-rgb: 255, 138, 61; --accent-gold: #f0b45c; --accent-gold-rgb: 240, 180, 92; } html[data-theme="bullion"] { --bg-body: #14120d; --bg-dark: #0f0d09; --bg-card: #1e1a12; --bg-chart: #110f0a; --border-color: #383021; --text-muted: #a39a85; --text-light: #e8e1d0; --accent-blue: #dfb15b; --accent-blue-rgb: 223, 177, 91; --accent-gold: #dfb15b; --accent-gold-rgb: 223, 177, 91; } /* Global Base Rules - Removes default margins, sets a global dark grey background (var(--bg-body)), and enforces a modern, clean system font stack (like San Francisco and Segoe UI).*/ html { height: 100%; } body { margin: 0; padding: 0; height: 100vh; background-color: var(--bg-body); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text-light); } /* Sidebar Framework Layout - Locks the width to 260px and forces it to take up the full height of the screen (100vh). Uses display: flex with a vertical column orientation to stack items neatly. Adds a subtle right-side border line to separate the sidebar from the main content.*/ .sidebar { width: 230px; height: 100vh; background-color: var(--bg-dark); border-right: 1px solid var(--border-color); padding: 18px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; /* Creates clean spacing between the elements */ } /* 1. Brand Heading - Styles the company logo and app title at the top. Formats the main application name in bold white text and positions a bright blue accent icon right next to it.*/ /* Removes default link styling and enables flex layout inside the anchor */ .brand-link { display: flex; align-items: center; justify-content: flex-start; gap: 10px; /* Tighter, logo-icon-to-wordmark spacing */ text-decoration: none; /* Removes any default browser underline */ width: 100%; cursor: pointer; /* 👆 Ensures the mouse pointer changes to a finger */ margin-bottom: 4px; } /* Optional: Slight opacity change on hover to make it feel interactive */ .brand-link:hover { opacity: 0.9; } /* Icon styles for the brand icon Gold icon top left - sized larger than the wordmark text (not matched to it) so the icon reads as its own mark, same proportion as most app logos (icon noticeably taller than the label next to it). */ .brand-icon { font-size: 1.9rem; color: var(--accent-gold); margin-bottom: 0px; } /* The custom gold-bar + book logo (replaces the old generic FontAwesome coins icon) - width/height:1em makes it obey whatever font-size its context sets (.brand-icon, .help-hero-icon, etc), the same way an icon font glyph would, without needing separate sizing rules per page. */ .logo-mark { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } /* This styles the main application title. Bullion Book */ .brand h1 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; } /* Primary Account Switcher (above the Account Balance box) */ .account-switcher { display: flex; flex-direction: column; gap: 6px; } .account-switcher-label { font-size: 0.62rem; color: var(--text-muted); font-weight: bold; text-transform: uppercase; } .account-switcher-select { background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 6px; padding: 6px 8px; font-size: 0.78rem; cursor: pointer; } /* 2. Account & Transaction Box */ /* account box */ .account-box { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; margin-bottom: 0; } /* account title */ .account-title { font-size: 0.68rem; color: var(--text-muted); font-weight: bold; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .transaction-summary { border-top: 1px solid var(--border-color); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--text-muted); } /*space between balance and $0.00*/ .summary-row { display: flex; justify-content: space-between; } /*balance $0.00 text formatting*/ .text-white { color: #ffffff; font-weight: bold; } /*button edit icon next to account balance*/ .btn-edit { background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-muted); padding: 3px 5px; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; /* 👆 Keeps the pointer finger */ user-select: none; /* 🚫 Blocks the text selection "I" cursor */ transition: all 0.2s ease; } /* Single hover effect */ .btn-edit:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } /* 3. Vertical Menu Navigation Links */ /*Turns the menu container into a vertical column stack using Flexbox, spacing each individual link exactly 6px apart.*/ .nav-menu { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; } /*Styles the clickable link rows.*/ .nav-link { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--text-muted); text-decoration: none; padding: 9px 10px; border-radius: 6px; font-weight: 500; transition: all 0.2s ease; } .nav-link-wip { font-size: 0.62rem; font-weight: 600; color: var(--accent-gold); opacity: 0.85; } .news-info-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--accent-gold-rgb), 0.12); border: 1px solid rgba(var(--accent-gold-rgb), 0.35); color: var(--accent-gold); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: filter 0.2s ease; } .news-info-toggle:hover { filter: brightness(1.2); } .news-info-toggle.active { background: var(--accent-gold); color: var(--bg-body); } .news-info-panel { width: 100%; padding: 14px 16px; border-radius: 10px; background: rgba(var(--accent-gold-rgb), 0.06); border: 1px solid rgba(var(--accent-gold-rgb), 0.25); } .news-info-warning { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px 0; color: var(--accent-gold); font-size: 0.82rem; line-height: 1.5; } .news-info-warning i { margin-top: 2px; } .news-info-guide-title { margin: 0 0 8px 0; font-size: 0.82rem; font-weight: 600; color: var(--text-light); } .news-info-guide-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; } /* Targets the font icon inside the link. It gives all icons a fixed width: 20px to prevent layout shifting, ensuring your text lines up perfectly straight even if one icon is naturally wider than another*/ .nav-link i { font-size: 0.95rem; width: 18px; } /* Hover and Focus Item Layout States */ .nav-link:hover { background-color: rgba(255, 255, 255, 0.03); color: #ffffff; } /* This styles the link for the page the user is currently looking at. It turns the text blue, bolds the font, and paints a subtle blue background glow tint behind it.*/ .nav-link.active { background-color: rgba(var(--accent-blue-rgb), 0.1); color: var(--accent-blue); font-weight: 600; } /* Container that pushes actions to the absolute bottom */ .sidebar-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; } /* "Support this platform" widget - pinned toward the bottom of the sidebar, just above the profile section. */ .sidebar-support { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 4px 4px 14px; } .sidebar-support-text { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--text-muted); } .sidebar-support-text i { color: var(--accent-gold); margin-right: 2px; } .sidebar-support-text a { color: var(--accent-blue); text-decoration: none; font-weight: 600; } .sidebar-support-text a:hover { text-decoration: underline; } .sidebar-support-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-blue); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 4px 14px rgba(var(--accent-blue-rgb), 0.4); transition: transform 0.15s ease, filter 0.15s ease; } .sidebar-support-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } /* Logged-in user avatar circle, pinned to the bottom of the sidebar */ .sidebar-profile-wrap { margin-top: 0; } .sidebar-profile { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-color); cursor: pointer; } .sidebar-profile-menu { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .profile-avatar, .profile-avatar-fallback { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .profile-avatar { border: 2px solid var(--border-color); } .profile-avatar-fallback { font-size: 30px; color: var(--text-muted); } .profile-name { color: var(--text-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Base Pill Button Styling */ .btn-action { width: 100%; padding: 12px 16px; border: none; border-radius: 50px; color: #ffffff; font-size: 0.9rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; gap: 12px; transition: transform 0.1s ease, filter 0.2s ease; } /* New Trade and New note buttons Button Color Themes */ .btn-blue{ background-color: #2c4260; margin-top: 8px; /* 🌟 Adds extra physical spacing above this specific button */ } .btn-gold { background-color: #8c734b; margin-top: 8px; /* 🌟 Adds extra physical spacing above this specific button */ } .btn-neutral { background-color: var(--border-color); } /* Align and size the icons inside buttons */ .btn-action i { font-size: 1rem; width: 18px; text-align: center; opacity: 0.85; } /* Sidebar-only: smaller New Trade/New Note/Log In/Log Out pills, without shrinking the same .btn-action class used in modal footers elsewhere. */ .sidebar-actions .btn-action, .sidebar-profile-menu .btn-action { padding: 9px 14px; font-size: 0.8rem; gap: 8px; } .sidebar-actions .btn-action i, .sidebar-profile-menu .btn-action i { font-size: 0.85rem; width: 16px; } .sidebar-actions .btn-blue, .sidebar-actions .btn-gold { margin-top: 6px; } /* Smooth Click & Hover Animations */ .btn-action:hover { filter: brightness(1.15); } .btn-action:active { transform: scale(0.98); } /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* Core Page Layout Organizer (Ensures layout wraps side-by-side with sidebar) */ body { display: flex; background-color: var(--bg-body); overflow: hidden; } .dashboard-main { flex: 1; height: 100vh; padding: 0 24px 24px 24px; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; overflow: hidden; } .view-section { flex: 1; min-height: 0; overflow-y: auto; padding-top: 24px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .view-section::-webkit-scrollbar { width: 8px; } .view-section::-webkit-scrollbar-track { background: transparent; } .view-section::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } .view-section::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } /* The date-range bar sits flush at the very top of these two pages instead - no extra inset above it. */ #page-dashboard, #page-stats { padding-top: 0; } #page-news { overflow: hidden; } /* 📐 Top Stats Section Row Layout LINE CHART ON DASHBOARD */ .stats-row { display: flex; align-items: stretch; gap: 20px; width: 100%; box-sizing: border-box; } /* Standard Base Base Cards */ .dash-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; display: flex; box-sizing: border-box; } /* Performance Graph Container Card Sizing Override */ .chart-card { flex: 3; position: relative; min-height: 110px; flex-direction: column; justify-content: flex-start; margin-right: 15px; } .chart-metric-label { font-size: 0.75rem; color: #647080; flex-shrink: 0; margin-bottom: 4px; } .equity-curve-chart { width: 100%; flex: 1; min-height: 0; } /* Modern rounded crosshair "pill" labels for the equity curve charts (replaces the chart library's native plain-rectangle labels, which can't be rounded). */ .equity-crosshair-label { position: absolute; display: none; background: var(--accent-blue); color: #ffffff; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; box-shadow: 0 2px 8px rgba(var(--accent-blue-rgb), 0.45); pointer-events: none; white-space: nowrap; z-index: 5; } .equity-crosshair-label.price, .equity-crosshair-label.date { transform: translateX(-50%); } .equity-crosshair-label.price { top: 4px; } .equity-crosshair-label.date { bottom: 2px; } /* The "current total" badge (shown when not hovering) is styled distinctly from the hover pill - a dark outlined box rather than a solid blue fill - so it reads as a persistent reference value, not a tooltip. */ .equity-crosshair-label.current { background: rgba(15, 18, 32, 0.92); color: var(--accent-blue); border: 1px solid rgba(var(--accent-blue-rgb), 0.4); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* Price badge pinned to the right price axis, tracking the crosshair's actual price height while hovering (attachCrosshairPillLabels' showAxisPriceLabel option) - mirrors the chart's own native last-value axis badge, but follows whichever bar is currently hovered instead of only the latest one. */ .chart-axis-price-label { position: absolute; display: none; right: 0; transform: translateY(-50%); background: var(--accent-blue); color: #ffffff; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 4px 0 0 4px; white-space: nowrap; pointer-events: none; z-index: 6; } /* Metric Pill Double Stacks */ .metrics-group { display: flex; flex-direction: column; gap: 10px; justify-content: space-between; } .metric-pill { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 30px; /* High value creates oval container tracks */ padding: 8px 18px; display: flex; align-items: center; gap: 14px; min-width: 150px; justify-content: space-between; font-size: 0.85rem; font-weight: 600; } /* Typography States Mapping Styles */ .lbl-muted { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; } .val-green { color: var(--win); font-size: 1rem; font-weight: 700; } .val-red { color: var(--loss); font-size: 1rem; font-weight: 700; } .val-muted { color: var(--text-light); } .pct-muted { color: #647080; font-size: 0.75rem; } /* Mini Progress Percent Indicators - real SVG radial progress (proportional arc), not the old CSS-border trick (which only ever drew a static quarter-circle regardless of the actual percentage). */ .progress-ring { position: relative; height: 36px; width: 36px; flex-shrink: 0; } .progress-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); /* so the arc starts at 12 o'clock, not 3 o'clock */ } .progress-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 3; } .progress-ring-fg { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 97.39; /* 2 * PI * r(15.5) */ stroke-dashoffset: 97.39; transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease; } .progress-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.56rem; font-weight: 700; color: var(--text-light); } .ring-green .progress-ring-fg { stroke: var(--win); } .ring-red .progress-ring-fg { stroke: var(--loss); } .ring-grey .progress-ring-fg { stroke: var(--text-muted); } /* Right PnL Profile Card Styling */ .pnl-card { flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 130px; margin-left: 15px; } .title-pnl { transform: translateY(-4px); } .pnl-value { color: var(--win); font-size: 1.5rem; font-weight: 700; margin: 4px 0; } .pnl-badge-pct { background-color: rgba(var(--win-rgb), 0.1); color: var(--win); font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; font-weight: bold; } /* 📊 Bottom Trade Log Table Layout Header DATE SYMBOL ETC FOR TABLE INSERT BELOW */ .table-container { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 20px; width: 100%; box-sizing: border-box; margin-top: 1px; } .table-header-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-right: 90px; box-sizing: border-box; } .col-head { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; text-align: left; flex: 1; /* Distributes headers into perfect equal table columns spacing tracks */ } .col-head.sortable { display: inline-flex; align-items: center; gap: 6px; color: var(--text-light); cursor: pointer; } .col-head.sortable i { font-size: 0.7rem; color: var(--text-muted); } /* Dashboard trade log rows (mirrors .table-header-row's equal-width flex columns) */ .table-body { display: flex; flex-direction: column; } .table-row { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 90px 12px 0; box-sizing: border-box; border-top: 1px solid var(--border-color); font-size: 0.82rem; cursor: pointer; } .table-row:hover { background-color: rgba(255, 255, 255, 0.03); } .table-cell { flex: 1; text-align: left; color: var(--text-light); } .confidence-col { justify-content: center; text-align: center; } /* Per-row "..." actions menu (Mark as Wash / Delete Trade) */ .trade-row-menu-wrap { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; } .trade-wash-badge { color: var(--accent-gold); font-size: 0.8rem; } /* Tag icon next to the "..." dots - hover reveals the actual tag chip(s) */ .trade-tag-indicator { position: relative; display: inline-flex; align-items: center; } .trade-tag-icon { color: var(--text-muted); font-size: 0.75rem; } .trade-tag-tooltip { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; display: none; align-items: center; gap: 4px; white-space: nowrap; z-index: 10; } .trade-tag-indicator:hover .trade-tag-tooltip { display: flex; } .tag-chip-static { display: inline-flex; align-items: center; background: var(--accent-blue); color: #ffffff; font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); } .trade-row-menu-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; padding: 4px 6px; } .trade-row-menu-btn:hover { color: #ffffff; } .trade-row-menu { position: fixed; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; min-width: 170px; z-index: 2000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); overflow: hidden; } .trade-row-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; color: var(--text-light); padding: 10px 14px; font-size: 0.8rem; text-align: left; cursor: pointer; box-sizing: border-box; } .trade-row-menu-item:hover { background: rgba(255, 255, 255, 0.05); } .trade-row-menu-item.danger { color: var(--loss); } .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 30px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; } .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-win { background: rgba(var(--win-rgb), 0.12); color: var(--win); } .status-loss { background: rgba(var(--loss-rgb), 0.12); color: var(--loss); } .status-open { background: rgba(var(--accent-blue-rgb), 0.12); color: var(--accent-blue); } .status-wash { background: rgba(132, 142, 156, 0.12); color: var(--text-muted); } .value-positive { color: var(--win); font-weight: 600; } .value-negative { color: var(--loss); font-weight: 600; } /*.design-fix { width: 240px; height: 10px; align-items: center; justify-content: space-between; } .card-text-group { display: flex; flex-direction: column; gap: 8px; }*/ /* Custom utility to size and layout the updated cards */ .design-fix { width: 240px; height: 65px; /* Increased slightly from 55px to give text vertical breathing room */ display: flex; /* Ensures horizontal layout distribution */ align-items: center; /* Perfectly centers text stack and circle vertically */ justify-content: space-between; /* Pushes text to the left, ring to the right */ padding: 10px 16px; box-sizing: border-box; border-radius: 14px; transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .design-fix:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } /* Groups the label and value vertically on the left side */ .card-text-group { display: flex; flex-direction: column; /* Stacks label over the numeric value cleanly */ gap: 2px; /* Keeps them close together so they don't break out */ justify-content: center; } /* Ensure font sizing behaves inside small containers */ .lbl-muted { line-height: 1.2; } .val-green, .val-red, .val-muted { line-height: 1.2; } /*============*/ /*NEWS SECTION*/ /*============*/ /* Layout row container for the sub-navigation pills */ .news-header { display: flex; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); width: 100%; flex-shrink: 0; } /* Individual capsule button bases */ .news-tab { background-color: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-muted); padding: 4px 12px; border-radius: 30px; /* High value creates oval pill-shape */ font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } /* Hover feedback animation track */ .news-tab:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--text-light); } /* Bright background state for the active tab */ .news-tab.active { background-color: var(--border-color); color: #ffffff; border-color: #647080; } /* A symbol tab with no chart data fetched for it yet (see mt5_fetch_button.py) */ .news-tab:disabled { opacity: 0.4; cursor: not-allowed; } .news-tab:disabled:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--text-muted); } .event-tabs-toggle { background-color: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-muted); width: 26px; height: 26px; border-radius: 50%; font-size: 0.7rem; cursor: pointer; transition: all 0.2s ease; } .event-tabs-toggle:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--text-light); } /* Padding offset block for inner data lists */ .news-content-area { margin-top: 15px; width: 100%; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .news-content-area::-webkit-scrollbar { width: 8px; } .news-content-area::-webkit-scrollbar-track { background: transparent; } .news-content-area::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } .news-content-area::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } /* CPI table and chart styles */ .cpi-panel { display: flex; flex-direction: column; gap: 16px; width: 100%; } .cpi-chart-toolbar-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cpi-mini-data { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cpi-mini-datetime { display: flex; gap: 6px; } .cpi-mini-events-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .cpi-mini-events { display: flex; flex-direction: column; gap: 1px; } .cpi-mini-events-header { padding-bottom: 1px; } .cpi-mini-col-label { width: 56px; text-align: center; font-size: 0.52rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .cpi-mini-event { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; } .cpi-mini-event-name { width: 68px; font-size: 0.55rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .cpi-mini-event-time { width: 44px; font-size: 0.55rem; color: #5b6271; white-space: nowrap; } /* Matches MT5's own Calendar tab impact colors (see Export_USD_Calendar.mq5) */ .cpi-mini-event-importance-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .cpi-mini-event-importance-dot.importance-high { background: var(--loss); } .cpi-mini-event-importance-dot.importance-moderate { background: var(--accent-gold); } .cpi-mini-event-importance-dot.importance-low { background: var(--text-muted); } .importance-filter-btn { display: inline-flex; align-items: center; gap: 6px; } .cpi-mini-event-importance-dot.importance-none { background: #3a3f4b; } .cpi-mini-event-vals { display: flex; gap: 10px; } .cpi-edit-input.cpi-mini-input { width: 56px; padding: 2px 4px; font-size: 0.65rem; text-align: center; } .cpi-edit-input.cpi-value-up, .cpi-edit-input.cpi-value-down { color: var(--text-light); } .cpi-mini-datetime .cpi-mini-input { width: auto; min-width: unset; } .cpi-edit-input { width: 100%; background: transparent; border: 1px solid transparent; color: var(--text-light); font-size: 0.85rem; padding: 6px 8px; box-sizing: border-box; border-radius: 6px; } .cpi-edit-input:focus { outline: none; border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.08); } .cpi-edit-input[readonly] { cursor: default; } .cpi-edit-input[readonly]:focus { border-color: transparent; background: transparent; } .cpi-edit-input[type="date"], .cpi-edit-input[type="time"] { min-width: 120px; } .xauusd-chart-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .cpi-chart-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .cpi-chart-title { margin: 0; color: var(--text-light); font-size: 1rem; font-weight: 700; } .cpi-chart-subtitle { margin: 2px 0 0; color: var(--text-muted); font-size: 0.8rem; } .interval-toggle-set { display: flex; margin-top: 4px; border: 1px solid var(--border-color); border-radius: 20px; overflow: hidden; width: fit-content; } .interval-toggle-btn { background: rgba(255, 255, 255, 0.04); border: none; border-right: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.65rem; font-weight: 600; padding: 3px 9px; cursor: pointer; } .interval-toggle-set .interval-toggle-btn:last-child { border-right: none; } .interval-toggle-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--text-light); } .interval-toggle-btn.active { background: var(--accent-blue); color: #ffffff; } .interval-toggle-btn:disabled { opacity: 0.3; cursor: not-allowed; } .cpi-chart-caption { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; } .cpi-chart-body { position: relative; min-height: 420px; height: 520px; background: var(--bg-chart); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; } .xauusd-lightweight-chart { width: 100%; height: 100%; } .chart-lock-toggle { position: absolute; bottom: 10px; right: 10px; z-index: 10; width: 30px; height: 30px; border-radius: 50%; background: rgba(15, 18, 32, 0.85); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; } .chart-lock-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-light); } .chart-lock-toggle.locked { border-color: var(--accent-gold); color: var(--accent-gold); } .measure-box { position: absolute; display: none; pointer-events: none; z-index: 5; background: rgba(var(--accent-blue-rgb), 0.15); border: 1px solid var(--accent-blue); } .measure-label { position: absolute; display: none; pointer-events: none; z-index: 6; color: #ffffff; font-size: 0.68rem; font-weight: 600; padding: 6px 10px; border-radius: 6px; white-space: pre-line; line-height: 1.4; } /* Trade Levels overlay: entry/target/stop-loss zones drawn on a chart for any trade entered that day (uses the Target/Stop-Loss fields from the New Trade modal), toggled via the "Trade Levels" button above the chart list. */ .trade-overlay-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 4; } .trade-overlay-box { position: absolute; } .trade-overlay-box.profit { background: rgba(var(--win-rgb), 0.16); border-top: 1px dashed rgba(var(--win-rgb), 0.6); border-bottom: 1px dashed rgba(var(--win-rgb), 0.6); box-sizing: border-box; } .trade-overlay-box.risk { background: rgba(var(--loss-rgb), 0.16); border-top: 1px dashed rgba(var(--loss-rgb), 0.6); border-bottom: 1px dashed rgba(var(--loss-rgb), 0.6); box-sizing: border-box; } .trade-overlay-entry-line { position: absolute; height: 0; border-top: 1px dotted rgba(255, 255, 255, 0.5); } .trade-overlay-exit-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(255, 255, 255, 0.4); } .trade-overlay-label { position: absolute; background: rgba(15, 18, 32, 0.9); font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .trade-overlay-label.profit-label { color: var(--win); } .trade-overlay-label.risk-label { color: var(--loss); } /* Positioned outside the zone's box, on whichever edge faces away from entry - independent of profit/risk color, since either can land above or below entry depending on whether the trade is long or short. */ .trade-overlay-label.above { transform: translateY(-100%); } .trade-overlay-label.below { transform: translateY(0); } /* Stats Page */ .stats-metrics-row { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; } .stats-metric-card { flex: 1; min-width: 140px; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--accent-blue); border-radius: 8px; padding: 10px 14px; box-sizing: border-box; cursor: pointer; transition: border-color 0.15s ease; } .stats-metric-card:hover { border-color: rgba(255, 255, 255, 0.2); } .stats-metric-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.03em; } .stats-metric-value { font-size: 0.95rem; color: #ffffff; font-weight: 700; margin-top: 4px; } .stats-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; width: 100%; box-sizing: border-box; } .stats-panel-title { text-align: center; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em; font-weight: 700; margin-bottom: 14px; } .wl-compare { display: flex; flex-direction: column; gap: 10px; } .wl-compare-row { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; } .wl-compare-label { text-align: center; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; } .wl-compare-value { font-size: 0.95rem; font-weight: 700; } .wl-compare-value.win { text-align: right; padding-right: 20px; color: var(--win); } .wl-compare-value.loss { text-align: left; padding-left: 20px; color: var(--loss); } .wl-compare-value.left { text-align: right; padding-right: 20px; } .wl-compare-value.right { text-align: left; padding-left: 20px; } .wl-compare-header-row .wl-compare-value { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); } .mae-mfe-panel { color: var(--text-muted); font-size: 0.82rem; text-align: center; } .mae-mfe-item { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 32px; } .mae-mfe-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; } .mae-mfe-value { font-size: 1.1rem; font-weight: 700; } .mae-mfe-note { margin: 14px 0 0; font-size: 0.72rem; color: var(--text-muted); } /* Pro Score radar chart + gradient scale */ .pro-score-title-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; } .pro-score-radar { display: flex; justify-content: center; } .pro-score-svg { width: 100%; max-width: 460px; height: auto; max-height: 100%; } .pro-score-grid-ring { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; } .pro-score-axis-line { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; } .pro-score-data-polygon { fill: rgba(124, 92, 255, 0.35); stroke: #7c5cff; stroke-width: 2; stroke-linejoin: round; } .pro-score-vertex { fill: #7c5cff; stroke: #ffffff; stroke-width: 1.5; transition: r 0.15s ease; } .pro-score-vertex.hovered { r: 5.5; } .pro-score-hit { fill: transparent; cursor: pointer; } .pro-score-hit:hover { fill: rgba(124, 92, 255, 0.18); } .stats-bar-tooltip-swatch.pro-score { background: #7c5cff; border-radius: 50%; } .pro-score-axis-label { fill: var(--text-muted); font-size: 8px; font-weight: 600; } .pro-score-empty { color: var(--text-muted); font-size: 0.82rem; text-align: center; padding: 40px 0; } .pro-score-summary { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); } .pro-score-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 4px; } .pro-score-value { font-size: 1.8rem; font-weight: 800; color: #ffffff; margin-bottom: 12px; } .pro-score-gradient-bar { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--loss) 0%, var(--accent-gold) 50%, var(--win) 100%); } .pro-score-marker { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; border: 3px solid var(--bg-card); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); transform: translate(-50%, -50%); } .pro-score-scale-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.68rem; color: var(--text-muted); } .stats-equity-chart { width: 100%; height: 240px; } .stats-charts-row { display: flex; gap: 16px; width: 100%; } .stats-panel-half { flex: 1; min-width: 0; } /* The row's default stretch makes Pro Score match the right column's (Wins vs Losses + MAE/MFE + Performance-vs-Volatility) natural height. This makes the radar chart grow into that extra space and stay centered, instead of leaving a dead gap below the gradient bar. */ .pro-score-panel { display: flex; flex-direction: column; } .pro-score-panel .pro-score-radar { flex: 1; min-height: 0; align-items: center; } /* Stacks Wins vs Losses above a MAE/MFE + Performance-vs-Volatility row, inside the same column width Pro Score occupies. Pro Score is the taller natural-height card, so the row stretches this whole column to match it; the bottom row grows to absorb that leftover height instead of leaving a gap below it. */ .stats-stack-col { display: flex; flex-direction: column; gap: 12px; } .stats-stack-row { display: flex; gap: 12px; flex: 1; } .stats-stack-row .stats-panel { display: flex; flex-direction: column; } /* Centered via auto margins (not flex-direction:column on the content itself) so mae-mfe-panel's own inline-flex items stay side by side instead of being forced into a vertical stack. */ .stats-stack-row .stats-panel > .mae-mfe-panel, .stats-stack-row .stats-panel > .wl-compare { margin-top: auto; margin-bottom: auto; } .stats-bar-chart { display: flex; flex-direction: column; gap: 2px; } .stats-bar-row { display: flex; align-items: center; gap: 10px; padding: 3px 8px; margin: 0 -8px; border-radius: 6px; transition: background 0.15s ease; } .stats-bar-row[data-bar-value]:hover { background: rgba(255, 255, 255, 0.035); } .stats-bar-row-label { width: 64px; font-size: 0.7rem; color: var(--text-muted); text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; } .stats-bar-row-track { flex: 1; display: flex; align-items: center; position: relative; } .stats-bar-half { flex: 1; display: flex; align-items: center; height: 18px; background: rgba(255, 255, 255, 0.035); } .stats-bar-half.negative { justify-content: flex-end; border-radius: 4px 0 0 4px; } .stats-bar-half.positive { justify-content: flex-start; border-radius: 0 4px 4px 0; } .stats-bar-fill { height: 100%; min-width: 2px; transition: filter 0.15s ease; } .stats-bar-fill.negative { background: var(--loss); border-radius: 4px 0 0 4px; } .stats-bar-fill.positive { background: var(--win); border-radius: 0 4px 4px 0; } .stats-bar-row[data-bar-value]:hover .stats-bar-fill { filter: brightness(1.18); } .stats-bar-divider { width: 1px; align-self: stretch; background: var(--border-color); } .stats-bar-ticks-row { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border-color); } .stats-bar-ticks-row:hover { background: none; } .stats-bar-zero { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Hover tooltip for the diverging bar charts (Day of Week / Hour) - a single shared floating element repositioned/repopulated on hover (see bindDivergingBarTooltip in stats.js), styled to match the equity chart's crosshair pill. */ .stats-bar-tooltip { position: fixed; display: none; background: rgba(15, 18, 32, 0.95); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 10px; font-size: 0.72rem; pointer-events: none; white-space: nowrap; z-index: 500; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } .stats-bar-tooltip-label { color: var(--text-light); font-weight: 700; margin-bottom: 3px; } .stats-bar-tooltip-value { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-light); } .stats-bar-tooltip-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .stats-bar-tooltip-swatch.positive { background: var(--win); } .stats-bar-tooltip-swatch.negative { background: var(--loss); } .stats-bar-ticks-half { flex: 1; display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-muted); font-variant-numeric: tabular-nums; opacity: 0.75; } .stats-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .stats-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } .stats-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .stats-table th.sortable:hover { color: var(--text-light); } .stats-table th.sortable i { margin-left: 4px; font-size: 0.65rem; } .stats-table td { padding: 10px 4px; border-bottom: 1px solid var(--border-color); color: var(--text-light); } /* Settings Page */ .settings-layout { display: flex; gap: 24px; width: 100%; align-items: flex-start; } .settings-subnav { width: 220px; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; } .settings-subnav-item { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-color); color: var(--text-muted); padding: 14px 16px; font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left; } .settings-subnav-item:last-child { border-bottom: none; } .settings-subnav-item span { display: flex; align-items: center; gap: 10px; } .settings-subnav-arrow { font-size: 0.7rem; opacity: 0; } .settings-subnav-item.active { color: var(--accent-blue); } .settings-subnav-item.active .settings-subnav-arrow { opacity: 1; } .settings-subnav-item.danger { color: var(--loss); } .settings-subnav-item:hover { background: rgba(255, 255, 255, 0.03); } .settings-content { flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 28px; box-sizing: border-box; } .settings-panel-title { color: var(--text-light); font-size: 1.3rem; margin: 0 0 24px; } .settings-avatar-wrap { position: relative; width: 90px; height: 90px; margin: 0 auto 28px; } .settings-avatar-img, .settings-avatar-fallback { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; } .settings-avatar-fallback { font-size: 90px; color: var(--text-muted); display: block; } .settings-avatar-edit-btn { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-blue); color: #ffffff; border: 2px solid var(--bg-card); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; } .settings-field { max-width: 420px; margin-bottom: 18px; } .settings-save-btn { width: auto; margin-top: 8px; } .settings-status { margin-top: 10px; font-size: 0.8rem; color: var(--text-muted); } .settings-status.error { color: var(--loss); } .settings-status.success { color: var(--win); } .settings-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; } .settings-divider { border: none; border-top: 1px solid var(--border-color); margin: 28px 0; } .settings-subtitle { color: var(--text-light); font-size: 1rem; margin: 0 0 6px; } .settings-share-desc { color: var(--accent-blue); font-size: 0.8rem; margin: 0 0 14px; } .settings-field-hint { color: var(--text-muted); font-size: 0.72rem; margin: 6px 0 0; line-height: 1.5; } .settings-public-link-result { margin-top: 14px; } .settings-public-link-input { width: 100%; max-width: 520px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-light); padding: 8px 10px; border-radius: 6px; font-size: 0.8rem; box-sizing: border-box; } .settings-add-tag-btn { width: auto; margin-bottom: 18px; } .settings-tag-table input, .settings-tag-table select { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-light); padding: 6px 8px; border-radius: 6px; font-size: 0.8rem; width: 100%; box-sizing: border-box; } .settings-danger-title { color: var(--loss); margin: 0 0 20px; } .settings-danger-box { border: 1px solid var(--border-color); border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; } .playbook-card { border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; margin-bottom: 14px; } .playbook-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .playbook-name-input { flex: 1; font-weight: 700; } .playbook-rules-textarea { width: 100%; resize: vertical; font-family: inherit; box-sizing: border-box; } .settings-danger-box-title { color: var(--text-light); font-weight: 700; margin-bottom: 8px; } .settings-danger-box p { color: var(--text-muted); font-size: 0.82rem; margin: 0 0 10px; } .settings-danger-note { color: var(--accent-gold); } .settings-danger-box .btn-action { width: auto; } /* Calendar Page */ .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; width: 100%; } .calendar-toolbar-center { display: flex; gap: 8px; } .calendar-nav-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-light); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; } .calendar-nav-btn:hover { background: rgba(255, 255, 255, 0.06); } .calendar-select { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--accent-blue); border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .calendar-layout { display: flex; gap: 16px; width: 100%; align-items: flex-start; } .calendar-grid-wrap { flex: 1; min-width: 0; } .calendar-weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; text-align: center; color: var(--text-muted); font-size: 0.8rem; height: 20px; margin-bottom: 10px; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendar-day { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; min-height: 95px; padding: 10px; box-sizing: border-box; } .calendar-day.outside-month { opacity: 0.45; } .calendar-day-number { color: var(--text-light); font-size: 0.85rem; } .calendar-day-pnl { margin-top: 14px; font-size: 0.85rem; font-weight: 700; } .calendar-day-count { margin-top: 2px; font-size: 0.72rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; } .calendar-weekly-summary { width: 170px; flex-shrink: 0; } .calendar-weekly-summary-title { color: var(--text-light); font-size: 0.9rem; text-align: center; height: 20px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; } .calendar-weekly-summary-body { display: flex; flex-direction: column; gap: 6px; } .calendar-week-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; min-height: 95px; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; } .calendar-week-pnl { font-size: 0.85rem; font-weight: 700; } .calendar-week-pct { font-size: 0.72rem; } .calendar-week-badges { display: flex; gap: 6px; margin-top: 2px; } .calendar-week-badge { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #ffffff; } .calendar-week-badge.win { background: rgba(var(--win-rgb), 0.25); color: var(--win); } .calendar-week-badge.loss { background: rgba(var(--loss-rgb), 0.25); color: var(--loss); } /* Account & Transactions Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; width: 100%; max-width: 620px; max-height: 85vh; margin: 20px; display: flex; flex-direction: column; overflow: hidden; } .modal-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); font-weight: bold; color: var(--text-light); } .modal-close-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; } .modal-close-btn:hover { color: #ffffff; } .modal-card-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .modal-field-row { display: flex; gap: 16px; align-items: flex-end; } .modal-field { flex: 1; display: flex; flex-direction: column; gap: 6px; } .modal-field-narrow { flex: 0 0 auto; align-items: center; } .modal-label { font-size: 0.75rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } /* Small "?" info button next to a setting's label - see showSettingsInfoTooltip in settings.js. Hover shows the tooltip; click pins it open too (touch devices). */ .settings-info-btn { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 1px solid var(--text-muted); background: transparent; color: var(--text-muted); font-size: 0.62rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: help; flex-shrink: 0; } .settings-info-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .settings-info-tooltip { position: fixed; display: none; max-width: 260px; background: rgba(15, 18, 32, 0.97); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; font-size: 0.75rem; line-height: 1.5; color: var(--text-light); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); z-index: 400; } .modal-input, .modal-select { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-light); padding: 8px 10px; border-radius: 6px; font-size: 0.85rem; box-sizing: border-box; } .modal-input:focus, .modal-select:focus { outline: none; border-color: var(--accent-blue); } .modal-balance-input { color: var(--accent-blue); font-weight: bold; } .modal-primary-checkbox { width: 18px; height: 18px; cursor: pointer; } .modal-section-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: bold; } .modal-section-label-row { display: flex; align-items: center; justify-content: space-between; } .trade-view-confidence-badge { align-items: center; background: var(--accent-gold); color: var(--bg-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 20px; } .modal-transactions-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .modal-transactions-table th { text-align: left; color: var(--text-muted); font-weight: normal; font-size: 0.72rem; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .modal-transactions-table td { padding: 6px 6px 6px 0; border-bottom: 1px solid var(--border-color); } .txn-remove-btn { background: transparent; border: none; color: var(--loss); cursor: pointer; font-size: 0.95rem; } .modal-add-row-btn { align-self: flex-start; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--accent-blue); color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; } .modal-add-row-btn:hover { background: rgba(var(--accent-blue-rgb), 0.8); } .modal-card-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border-color); } .modal-card-footer .btn-action { width: auto; margin-top: 0; } .btn-danger { background-color: var(--loss); } .csv-import-upload-btn { width: auto; display: inline-flex; margin-bottom: 4px; } /* New Trade Modal */ .trade-modal-card { max-width: 760px; } /* Inline validation: a banner explaining what's missing, plus a red ring around the specific field(s) that need it - replaces alert() popups. */ .modal-error-banner { display: flex; align-items: center; gap: 10px; background: rgba(var(--loss-rgb), 0.12); border: 1px solid rgba(var(--loss-rgb), 0.4); color: var(--loss); padding: 10px 14px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 16px; } .modal-error-banner i { font-size: 0.9rem; } .modal-input.field-invalid { border-color: var(--loss); box-shadow: 0 0 0 3px rgba(var(--loss-rgb), 0.25); } .trade-modal-tabs { display: flex; gap: 8px; padding: 0 20px; border-bottom: 1px solid var(--border-color); } .trade-modal-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 12px 4px; font-size: 0.85rem; cursor: pointer; } .trade-modal-tab.active { color: #ffffff; border-bottom-color: var(--accent-blue); } .leg-action-toggle { border: none; border-radius: 30px; padding: 4px 14px; font-size: 0.7rem; font-weight: 700; color: #ffffff; cursor: pointer; text-transform: uppercase; } .leg-action-toggle.buy { background: var(--win); } .leg-action-toggle.sell { background: var(--loss); } .trade-journal-textarea { width: 100%; resize: vertical; font-family: inherit; box-sizing: border-box; } /* Confidence slider (New/Edit Trade > Journal tab) - track/thumb styled to match the app's dark theme, since range inputs have no sane default look. */ .confidence-slider { width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); outline: none; -webkit-appearance: none; appearance: none; margin: 8px 0 4px; } .confidence-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-blue); border: 2px solid #ffffff; cursor: pointer; } .confidence-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-blue); border: 2px solid #ffffff; cursor: pointer; } .confidence-slider-ticks { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-muted); } /* Screenshot upload (New/Edit Trade > Journal tab) */ .trade-screenshot-upload-row { display: flex; align-items: center; gap: 10px; } .trade-screenshot-upload-btn { width: 40px; height: 40px; border: 1px dashed var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; flex-shrink: 0; } .trade-screenshot-upload-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .trade-screenshot-upload-label { font-size: 0.82rem; color: var(--text-muted); cursor: pointer; } .trade-screenshot-upload-label:hover { color: var(--text-light); } .trade-screenshot-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .trade-screenshot-thumb { position: relative; width: 84px; height: 84px; } .trade-screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; } .trade-screenshot-remove-btn { position: absolute; top: -6px; right: -6px; background: var(--bg-dark); border: none; color: var(--loss); border-radius: 50%; width: 18px; height: 18px; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } /* Multi-tag chip input on the New Trade modal's Journal tab */ .tag-chip-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 10px; box-sizing: border-box; cursor: text; } #trade-tag-chips, #filter-tag-chips, #filter-symbol-chips { display: contents; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-blue); color: #ffffff; font-size: 0.78rem; font-weight: 600; padding: 4px 8px 4px 12px; border-radius: 20px; white-space: nowrap; } .tag-chip button { background: transparent; border: none; color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0; } .tag-chip-text-input { flex: 1; min-width: 100px; background: transparent; border: none; color: var(--text-light); font-size: 0.85rem; outline: none; } /* Edit Day Note Modal */ .note-modal-card { max-width: 820px; } .note-toggle-row { display: flex; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; } .note-toggle-group { display: flex; flex-direction: column; gap: 6px; } .note-toggle-set { display: flex; border: 1px solid var(--border-color); border-radius: 30px; overflow: hidden; } .note-toggle-btn { background: rgba(255, 255, 255, 0.04); border: none; border-right: 1px solid var(--border-color); color: var(--text-muted); padding: 8px 16px; cursor: pointer; } .note-toggle-set .note-toggle-btn:last-child { border-right: none; } .note-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); } .note-toggle-btn.active { background: var(--accent-blue); color: #ffffff; } .note-editor-toolbar { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px 10px; } .note-editor-toolbar button { background: transparent; border: none; color: var(--text-muted); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; } .note-editor-toolbar button:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .note-editor-content { min-height: 160px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; padding: 14px; color: var(--text-light); font-size: 0.85rem; overflow-y: auto; } .note-editor-content:focus { outline: none; border-color: var(--accent-blue); } /* Dashboard Day Notes list */ .day-note-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 90px 12px 0; box-sizing: border-box; border-top: 1px solid var(--border-color); cursor: pointer; font-size: 0.82rem; } #trade-log-body > .day-note-row:first-child { border-top: none; } .day-note-row:hover { background: rgba(255, 255, 255, 0.03); } .day-note-bookmark { color: var(--accent-gold); } .day-note-date { color: var(--text-light); width: 80px; flex-shrink: 0; } .day-note-summary { flex: 1; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .day-note-stats { display: flex; gap: 16px; flex-shrink: 0; } .day-note-stat { width: 14px; text-align: center; color: var(--text-light); font-weight: 600; } .day-note-pin-btn { background: transparent; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; flex-shrink: 0; padding: 4px; } .day-note-pin-btn:hover { color: var(--text-light); } .day-note-pin-btn.active { color: var(--accent-gold); } /* Generic centered confirm dialog (e.g. Delete Trade) */ .confirm-modal-card { max-width: 380px; padding: 28px 24px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .confirm-modal-icon { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--accent-gold); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .confirm-modal-title { color: var(--text-light); font-size: 1.1rem; margin: 0; } .confirm-modal-body { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; margin: 0; } .confirm-modal-body strong { color: var(--text-light); } .confirm-modal-actions { display: flex; gap: 12px; width: 100%; margin-top: 8px; } .confirm-modal-actions .btn-action { flex: 1; width: auto; margin-top: 0; justify-content: center; } /* Day Trades Modal */ .day-trades-card { max-width: 640px; } .day-trades-list { display: flex; flex-direction: column; } .day-trade-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 6px; border-top: 1px solid var(--border-color); cursor: pointer; } .day-trades-list .day-trade-row:first-child { border-top: none; } .day-trade-row:hover { background: rgba(255, 255, 255, 0.03); } .day-trade-symbol { color: var(--accent-blue); font-weight: 700; width: 80px; flex-shrink: 0; } .day-trade-side { width: 30px; text-align: center; flex-shrink: 0; } .day-trade-qty { width: 50px; text-align: center; color: var(--text-light); flex-shrink: 0; } .day-trade-return { flex: 1; text-align: right; font-weight: 700; } /* Trade View Modal */ .trade-view-card { max-width: 560px; } /* This modal's overlay can hold up to three flex children side by side (the day chart, the card, and the screenshots panel) - other modals only ever have one, so this gap is scoped here rather than to .modal-overlay generally. */ #trade-view-modal-overlay { gap: 16px; } .trade-view-chart-panel { width: 460px; max-height: 80vh; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; } .trade-view-chart-toolbar { display: flex; align-items: center; justify-content: space-between; } .trade-view-chart-toolbar .modal-section-label { margin: 0; } .trade-view-chart-container { width: 100%; height: 420px; border-radius: 8px; overflow: hidden; position: relative; } .trade-view-chart-empty { color: var(--text-muted); text-align: center; padding-top: 180px; font-size: 0.85rem; } .trade-view-screenshots-panel { width: 380px; max-height: 80vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .trade-view-screenshots-panel::-webkit-scrollbar { width: 8px; } .trade-view-screenshots-panel::-webkit-scrollbar-track { background: transparent; } .trade-view-screenshots-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } .trade-view-screenshots-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } .trade-view-screenshots-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .trade-view-screenshot-thumb { width: 100%; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; transition: border-color 0.15s ease; } .trade-view-screenshot-thumb:hover { border-color: var(--accent-blue); } /* Near-fullscreen viewer opened by clicking a screenshot thumbnail */ .screenshot-lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; z-index: 2000; } .screenshot-lightbox-overlay img { /* width/height (not max-width/max-height) so a smaller stored image (they're capped at 1000px wide on upload to save storage - see resizeImageFileToDataUrl in trades.js) still scales UP to fill the viewport here, not just shrinks large ones down. object-fit preserves its aspect ratio either way. */ width: 92vw; height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } .screenshot-lightbox-close { position: fixed; top: 20px; right: 28px; background: transparent; border: none; color: #ffffff; font-size: 1.6rem; cursor: pointer; z-index: 2001; } .trade-view-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .trade-view-title { display: flex; align-items: baseline; gap: 10px; } .trade-view-symbol { font-size: 1.2rem; font-weight: 700; color: #ffffff; } .trade-view-return { font-size: 0.9rem; font-weight: 600; } .trade-view-badges { display: flex; gap: 8px; } .trade-view-badge { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-color); color: var(--text-light); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .trade-view-badge.long { background: rgba(var(--win-rgb), 0.12); color: var(--win); border-color: transparent; } .trade-view-badge.short { background: rgba(var(--loss-rgb), 0.12); color: var(--loss); border-color: transparent; } .trade-view-timeline { display: flex; align-items: center; gap: 0; padding: 24px 10px 8px; } .trade-view-meta-row { display: flex; gap: 24px; padding: 10px 10px 18px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; } .trade-view-meta-item { display: flex; flex-direction: column; gap: 3px; } .trade-view-meta-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; } .trade-view-meta-value { font-size: 0.85rem; color: var(--text-light); font-weight: 600; } .trade-view-point { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 140px; } .trade-view-point-time, .trade-view-point-detail { font-size: 0.72rem; color: var(--text-muted); text-align: center; white-space: nowrap; } .trade-view-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--bg-card); box-shadow: 0 0 0 2px currentColor; } .trade-view-dot.entry { color: var(--win); background: var(--win); } .trade-view-dot.exit { color: var(--loss); background: var(--loss); } .trade-view-line { flex: 1; height: 2px; background: var(--accent-blue); } /* Help Page */ .help-page { display: flex; flex-direction: column; gap: 28px; width: 100%; padding-bottom: 40px; } .help-hero { text-align: center; padding: 40px 20px 10px; } .help-hero-icon { font-size: 2.2rem; color: var(--accent-gold); margin-bottom: 12px; } .help-hero h1 { margin: 0 0 8px; font-size: 1.8rem; color: #ffffff; } .help-hero p { margin: 0 0 22px; color: var(--text-muted); font-size: 0.95rem; } /* Compact inline search box for the News page's event-name filter tabs - same visual language as .help-search-wrap, just sized for a toolbar row instead of a centered hero search. */ .event-tab-search-wrap { position: relative; width: 220px; } .event-tab-search-wrap i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.75rem; pointer-events: none; } .event-tab-search-wrap input { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-light); padding: 6px 10px 6px 30px; border-radius: 30px; font-size: 0.75rem; box-sizing: border-box; } .event-tab-search-wrap input:focus { outline: none; border-color: var(--accent-blue); } .help-search-wrap { position: relative; max-width: 420px; margin: 0 auto; } .help-search-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem; } .help-search-wrap input { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-light); padding: 12px 14px 12px 40px; border-radius: 30px; font-size: 0.9rem; box-sizing: border-box; } .help-search-wrap input:focus { outline: none; border-color: var(--accent-blue); } .help-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .help-quicklink { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-light); text-decoration: none; padding: 10px 18px; border-radius: 30px; font-size: 0.82rem; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .help-quicklink:hover { border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-2px); } .help-quicklink i { color: var(--accent-blue); } .help-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px; scroll-margin-top: 20px; } .help-section.help-hidden { display: none; } .help-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); } .help-section-header i { font-size: 1.1rem; color: var(--accent-gold); width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--accent-gold-rgb), 0.12); border-radius: 8px; } .help-section-header h2 { margin: 0; font-size: 1.2rem; color: #ffffff; } .help-section-note { display: flex; align-items: center; gap: 8px; background: rgba(var(--accent-gold-rgb), 0.08); border: 1px solid rgba(var(--accent-gold-rgb), 0.25); border-radius: 8px; padding: 10px 14px; margin: -8px 0 16px; font-size: 0.8rem; color: var(--accent-gold); } .help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .help-tile { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px; transition: border-color 0.15s ease, transform 0.15s ease; } .help-tile:hover { border-color: rgba(var(--accent-blue-rgb), 0.4); transform: translateY(-2px); } .help-tile i { font-size: 1.1rem; color: var(--accent-blue); margin-bottom: 10px; display: block; } .help-tile h3 { margin: 0 0 6px; font-size: 0.92rem; color: var(--text-light); } .help-tile p { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } /* Tiles that resolve to an in-app destination (see initHelpTileGoTo in app.js) are clickable - clicking reveals a "Go to" shortcut instead of navigating immediately, so a stray click while reading doesn't yank the user off the Help page. */ .help-tile-actionable { cursor: pointer; } .help-tile-actionable:hover { border-color: rgba(var(--accent-gold-rgb), 0.5); } .help-tile-revealed { border-color: var(--accent-gold); background: rgba(var(--accent-gold-rgb), 0.05); } .help-tile-goto-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 0; margin-top: 0; padding: 0 14px; overflow: hidden; opacity: 0; border: none; border-radius: 8px; background: var(--accent-blue); color: #ffffff; font-size: 0.78rem; font-weight: 700; cursor: pointer; box-sizing: border-box; transition: height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease, background 0.15s ease; } .help-tile-revealed .help-tile-goto-btn { height: 32px; opacity: 1; margin-top: 12px; } .help-tile-goto-btn:hover { background: rgba(var(--accent-blue-rgb), 0.8); } /* Pulsing gold ring pulsed onto whatever element a "Go to" click lands on (see highlightHelpTarget in app.js) - a double pulse reads clearly as "look here" without a jarring single flash. */ .help-target-highlight { animation: helpTargetPulse 1.8s ease-in-out; border-radius: 10px; } @keyframes helpTargetPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-gold-rgb), 0.65); } 20% { box-shadow: 0 0 0 10px rgba(var(--accent-gold-rgb), 0); } 40% { box-shadow: 0 0 0 0 rgba(var(--accent-gold-rgb), 0.65); } 60% { box-shadow: 0 0 0 10px rgba(var(--accent-gold-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-gold-rgb), 0); } } .help-tile p a { color: var(--accent-blue); text-decoration: none; font-weight: 600; } .help-tile p a:hover { text-decoration: underline; } .help-tile-danger i { color: var(--loss); } .help-disclaimer p { color: var(--text-muted); font-size: 0.78rem; line-height: 1.7; margin: 0; } .help-faq-list { display: flex; flex-direction: column; gap: 10px; } .help-faq-item { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 18px; } .help-faq-item summary { cursor: pointer; font-weight: 600; color: var(--text-light); font-size: 0.88rem; list-style: none; } .help-faq-item summary::-webkit-details-marker { display: none; } .help-faq-item summary::before { content: '+'; display: inline-block; width: 18px; color: var(--accent-blue); font-weight: 700; } .help-faq-item[open] summary::before { content: '\2212'; } .help-faq-item p { margin: 10px 0 0 18px; color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; } /* Sidebar toolbar: privacy blur toggle + trade filter trigger */ .sidebar-toolbar { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: -8px; } .sidebar-icon-btn { width: 24px; height: 24px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; transition: all 0.15s ease; } .sidebar-icon-btn:hover { color: var(--text-light); border-color: rgba(255, 255, 255, 0.2); } .sidebar-icon-btn.active { background: rgba(var(--accent-blue-rgb), 0.15); border-color: var(--accent-blue); color: var(--accent-blue); } /* Quick date-range filter bar: one compact row above Dashboard/Stats content */ .page-date-range-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px; width: 100%; box-sizing: border-box; flex-shrink: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .page-date-range-bar::-webkit-scrollbar { height: 6px; } .page-date-range-bar::-webkit-scrollbar-track { background: transparent; } .page-date-range-bar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } .page-date-range-bar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } .date-range-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); border-radius: 5px; padding: 4px 10px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: all 0.15s ease; } .date-range-btn:hover { color: var(--text-light); border-color: rgba(255, 255, 255, 0.2); } .date-range-btn.active { background: rgba(var(--accent-blue-rgb), 0.15); border-color: var(--accent-blue); color: var(--accent-blue); } .date-range-btn.date-range-reset { color: var(--loss); } .date-range-btn.date-range-reset:hover { border-color: var(--loss); } /* Privacy mode: blur every $ figure app-wide */ body.privacy-mode .value-positive, body.privacy-mode .value-negative, body.privacy-mode .sensitive-value, body.privacy-mode #sidebar-account-balance, body.privacy-mode #stat-pnl-value, body.privacy-mode #stat-pnl-pct, body.privacy-mode #stat-avg-win, body.privacy-mode #stat-avg-loss, body.privacy-mode .equity-crosshair-label.price { filter: blur(6px); user-select: none; transition: filter 0.2s ease; } /* Dashboard trade filter flyout */ .custom-date-popover { position: fixed; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 400; box-sizing: border-box; } .custom-date-popover .modal-field { margin-bottom: 0; } .custom-date-popover .modal-input { width: 150px; } .custom-date-popover-btn { box-sizing: border-box; width: 72px; height: 34px; margin-top: 0; padding: 0; border: none; border-radius: 50px; color: #ffffff; font-size: 0.8rem; font-weight: 500; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter 0.2s ease, transform 0.1s ease; } .custom-date-popover-btn:hover { filter: brightness(1.15); } .custom-date-popover-btn:active { transform: scale(0.98); } .custom-date-popover-btn.btn-blue { background-color: #2c4260; } .custom-date-popover-btn.btn-neutral { background-color: var(--border-color); } .trade-filter-panel { position: fixed; top: 70px; left: 16px; width: 480px; max-width: calc(100vw - 32px); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); z-index: 300; box-sizing: border-box; } .trade-filter-counter { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 16px; } .trade-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; } .trade-filter-grid .modal-field { min-width: 0; } .filter-chip-box { position: relative; min-height: 40px; min-width: 0; box-sizing: border-box; } .filter-chip-box .tag-chip-text-input { min-width: 40px; } .filter-suggest-list { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; max-height: 160px; overflow-y: auto; z-index: 10; display: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); box-sizing: border-box; } .filter-suggest-item { padding: 8px 12px; font-size: 0.8rem; color: var(--text-light); cursor: pointer; } .filter-suggest-item:hover { background: rgba(255, 255, 255, 0.06); } /* Theme the native where the dropdown list needs its own styling/scrollbar, since a native select's popup is rendered by the OS and can't be styled from CSS at all. */ .custom-select { position: relative; } .custom-select-trigger { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); color: var(--text-light); padding: 8px 10px; border-radius: 6px; font-size: 0.85rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .custom-select-trigger:hover { border-color: rgba(255, 255, 255, 0.2); } .custom-select-trigger i { font-size: 0.7rem; color: var(--text-muted); } .custom-select-list { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; max-height: 200px; overflow-y: auto; z-index: 20; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .custom-select-list::-webkit-scrollbar { width: 8px; } .custom-select-list::-webkit-scrollbar-track { background: transparent; } .custom-select-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 8px; } .custom-select-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } .custom-select-option { padding: 8px 12px; font-size: 0.8rem; color: var(--text-light); cursor: pointer; } .custom-select-option:hover { background: rgba(255, 255, 255, 0.06); } .custom-select-option.active { background: rgba(var(--accent-blue-rgb), 0.15); color: var(--accent-blue); font-weight: 600; } .trade-filter-actions { display: flex; justify-content: space-between; gap: 12px; } .trade-filter-actions .btn-action { width: auto; margin-top: 0; } /* ---- Settings > Appearance: theme picker ---- */ .theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-width: 560px; } .theme-swatch { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg-dark); border: 2px solid var(--border-color); border-radius: 12px; cursor: pointer; color: var(--text-light); font-family: inherit; font-size: 0.82rem; font-weight: 600; text-align: left; transition: border-color 0.15s ease, transform 0.1s ease; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.active { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(var(--accent-blue-rgb), 0.2); } /* The mini "preview strip": a fake card row in that theme's own colors */ .theme-swatch-preview { display: flex; gap: 5px; padding: 8px; border-radius: 8px; } .theme-swatch-dot { width: 16px; height: 16px; border-radius: 50%; } .theme-swatch-label { display: flex; align-items: center; justify-content: space-between; } .theme-swatch-label i { color: var(--accent-blue); display: none; } .theme-swatch.active .theme-swatch-label i { display: inline; } /* ---- Dashboard risk guardrail banner (Max Daily Loss / Max Trades) ---- */ .risk-banner { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 10px; font-size: 0.86rem; line-height: 1.45; } .risk-banner-line { display: flex; align-items: baseline; gap: 8px; } .risk-banner-line i { flex-shrink: 0; } .risk-banner-warn { background: rgba(var(--accent-gold-rgb), 0.1); border: 1px solid rgba(var(--accent-gold-rgb), 0.4); color: var(--accent-gold); } .risk-banner-breach { background: rgba(var(--loss-rgb), 0.1); border: 1px solid rgba(var(--loss-rgb), 0.45); color: var(--loss); } /* ---- Stats: day x hour P&L heatmap ---- */ .stats-heatmap-grid { display: grid; gap: 4px; align-items: stretch; } .stats-heatmap-hour-label, .stats-heatmap-day-label { color: var(--text-muted); font-size: 0.68rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .stats-heatmap-day-label { justify-content: flex-start; padding-left: 2px; } .stats-heatmap-cell { height: 34px; border-radius: 6px; cursor: default; transition: transform 0.1s ease; } .stats-heatmap-cell:not(.empty):hover { transform: scale(1.08); outline: 1px solid rgba(255, 255, 255, 0.35); } .stats-heatmap-cell.empty { background: rgba(255, 255, 255, 0.03); } /* ---- Weekly Review page ---- */ .review-toolbar { display: flex; align-items: center; gap: 12px; } .review-week-label { font-size: 0.95rem; font-weight: 600; min-width: 240px; text-align: center; } #review-content { display: flex; flex-direction: column; gap: 16px; } .review-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: stretch; } .review-tile { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .review-tile-label { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; } .review-tile-value { font-size: 1.25rem; font-weight: 700; } .review-tile-sub { color: var(--text-muted); font-size: 0.72rem; } .review-takeaways { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; line-height: 1.5; color: var(--text-light); } .review-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .review-stack { display: flex; flex-direction: column; gap: 16px; } .review-trade-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.86rem; } .review-trade-line span:nth-child(2) { flex: 1; } .review-empty { color: var(--text-muted); text-align: center; padding: 60px 20px; font-size: 0.9rem; } .review-empty-inline { color: var(--text-muted); font-size: 0.8rem; } /* ---- Weekly Review v2: grade ring, weeks strip, sparkline, expandable days ---- */ .review-hero { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: stretch; } @media (max-width: 900px) { .review-hero { grid-template-columns: 1fr; } .review-cols { grid-template-columns: 1fr; } } .review-grade-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .review-grade-ring { position: relative; width: 110px; height: 110px; } .review-grade-ring svg { width: 110px; height: 110px; transform: rotate(-90deg); } .review-ring-bg { fill: none; stroke: var(--border-color); stroke-width: 9; } .review-ring-fg { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1); } .review-grade-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: currentColor; } .review-grade-card.grade-a { color: var(--win); } .review-grade-card.grade-b { color: var(--accent-gold); } .review-grade-card.grade-c { color: #ff8a3d; } .review-grade-card.grade-d { color: var(--loss); } .review-grade-title { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; } .review-grade-sub { color: var(--text-muted); font-size: 0.7rem; line-height: 1.4; } .review-record-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 12px; border-radius: 20px; background: rgba(var(--accent-gold-rgb), 0.12); border: 1px solid rgba(var(--accent-gold-rgb), 0.4); color: var(--accent-gold); font-size: 0.7rem; font-weight: 700; } /* Tiles: icons + hover lift */ .review-tile { transition: transform 0.15s ease, border-color 0.15s ease; } .review-tile:hover { transform: translateY(-3px); border-color: rgba(var(--accent-blue-rgb), 0.5); } .review-tile-label i { margin-right: 5px; color: var(--accent-blue); } /* Weeks strip: last 12 weeks as clickable mini diverging bars */ .review-weeks-strip { display: flex; gap: 6px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 12px 8px; overflow-x: auto; } .review-week-cell { flex: 1; min-width: 40px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .review-week-cell:hover { background: rgba(255, 255, 255, 0.04); } .review-week-cell.selected { border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.08); } .review-week-bar-track { position: relative; width: 100%; height: 44px; } /* Zero line through the middle of every track */ .review-week-bar-track::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 1px dashed rgba(255, 255, 255, 0.12); } .review-week-bar { position: absolute; left: 25%; right: 25%; max-height: 50%; border-radius: 3px; } .review-week-bar.pos { bottom: 50%; background: var(--win); } .review-week-bar.neg { top: 50%; background: var(--loss); } .review-week-bar.flat { display: none; } .review-week-cell-label { color: var(--text-muted); font-size: 0.62rem; white-space: nowrap; } /* Week equity sparkline */ .review-spark-svg { width: 100%; height: 150px; display: block; } .review-spark-dot { cursor: pointer; transition: r 0.1s ease; } .review-spark-dot:hover { r: 6; } .review-panel-hint { color: var(--text-muted); font-weight: 400; font-size: 0.66rem; text-transform: none; letter-spacing: 0; margin-left: 8px; } /* Takeaways: icon bullets */ .review-takeaways { list-style: none; padding-left: 4px; } .review-takeaways li { display: flex; align-items: baseline; gap: 10px; } .review-takeaways li > i { color: var(--accent-blue); font-size: 0.8rem; flex-shrink: 0; } /* Expandable day-by-day rows */ .review-day-list { display: flex; flex-direction: column; } .review-day-row { border-bottom: 1px solid var(--border-color); } .review-day-row:last-child { border-bottom: none; } .review-day-head { display: grid; grid-template-columns: 110px 74px 110px 1fr 18px; align-items: center; gap: 10px; padding: 10px 4px; font-size: 0.85rem; } .review-day-row.clickable .review-day-head { cursor: pointer; } .review-day-row.clickable .review-day-head:hover { background: rgba(255, 255, 255, 0.03); } .review-day-count { color: var(--text-muted); font-size: 0.76rem; } .review-day-pnl { font-weight: 600; text-align: right; } .review-day-minibar { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .review-day-minibar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; } .review-day-minibar-fill.pos { background: var(--win); } .review-day-minibar-fill.neg { background: var(--loss); } .review-day-minibar-fill.flat { display: none; } .review-day-chevron { color: var(--text-muted); font-size: 0.7rem; transition: transform 0.2s ease; } .review-day-row.open .review-day-chevron { transform: rotate(90deg); } .review-day-trades { display: none; flex-direction: column; gap: 6px; padding: 2px 4px 12px 14px; } .review-day-row.open .review-day-trades { display: flex; } .review-day-trade-line { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.8rem; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .review-day-trade-line:hover { border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.06); } .review-day-trade-time { color: var(--text-muted); font-size: 0.74rem; min-width: 42px; } .review-day-trade-symbol { font-weight: 600; } .review-day-trade-fill { flex: 1; } .review-day-trade-r { color: var(--text-muted); font-weight: 400; } .review-day-trade-open { color: var(--text-muted); font-size: 0.68rem; } /* Clickable best/worst trade lines */ .review-trade-line.clickable { cursor: pointer; border-radius: 8px; padding: 8px 10px; transition: background 0.12s ease; } .review-trade-line.clickable:hover { background: rgba(255, 255, 255, 0.04); } /* Entrance animation, staggered per tile */ .review-animate { animation: reviewFadeUp 0.45s ease both; } .review-hero .review-tiles .review-tile:nth-child(2) { animation-delay: 0.06s; } .review-hero .review-tiles .review-tile:nth-child(3) { animation-delay: 0.12s; } .review-hero .review-tiles .review-tile:nth-child(4) { animation-delay: 0.18s; } .review-hero .review-tiles .review-tile:nth-child(5) { animation-delay: 0.24s; } .review-hero .review-tiles .review-tile:nth-child(6) { animation-delay: 0.3s; } @keyframes reviewFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .review-animate { animation: none; } .review-ring-fg { transition: none; } .review-tile, .review-day-trade-line { transition: none; } .review-gain-bar-fill, .review-breakdown-bar-fill, .review-tile-summary-bar-fill, .review-tile-pf-bar, .review-tile-donut-wrap .review-tile-donut, .review-spark-area, .review-pie-slice { animation: none; transition: none; } .review-spark-path { animation: none; stroke-dashoffset: 0; } } /* ---- Chart tools: drawing toolbar, indicators menu, object tree ---- */ .chart-tools-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } .chart-tools-bar { position: absolute; top: 8px; left: 8px; z-index: 7; display: flex; flex-direction: column; gap: 2px; background: rgba(15, 18, 32, 0.88); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; } .chart-tools-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .chart-tools-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-light); } .chart-tools-btn.active { background: rgba(var(--accent-blue-rgb), 0.25); color: var(--accent-blue); } .chart-tools-sep { height: 1px; margin: 2px 4px; background: var(--border-color); } .chart-tools-grip { display: flex; align-items: center; justify-content: center; height: 16px; color: var(--text-muted); font-size: 0.6rem; cursor: grab; border-radius: 5px; } .chart-tools-grip:hover { color: var(--text-light); background: rgba(255, 255, 255, 0.06); } .chart-tools-grip:active { cursor: grabbing; } /* While a tool is armed, the whole chart shows a crosshair cursor */ .chart-tools-drawing { cursor: crosshair; } .chart-tools-drawing canvas { cursor: crosshair !important; } .chart-tools-panel { position: absolute; top: 8px; left: 46px; z-index: 8; min-width: 230px; max-width: 290px; max-height: 320px; overflow-y: auto; background: rgba(15, 18, 32, 0.96); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); } .chart-tools-panel-title { color: var(--text-muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 8px; } .chart-tools-section { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid var(--border-color); } .chart-tools-section:first-of-type { border-top: none; padding-top: 0; } .chart-tools-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; font-size: 0.78rem; color: var(--text-light); cursor: pointer; } .chart-tools-row:hover { background: rgba(255, 255, 255, 0.06); } .chart-tools-row.active { color: var(--accent-blue); } .chart-tools-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .chart-tools-row-icon { width: 12px; font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; } .chart-tools-row-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chart-tools-row > i.fa-check { color: var(--win); font-size: 0.7rem; } .chart-tools-row > i.fa-plus { color: var(--text-muted); font-size: 0.7rem; } .chart-tools-row-del { background: transparent; border: none; color: var(--text-muted); font-size: 0.7rem; cursor: pointer; padding: 3px 5px; border-radius: 5px; } .chart-tools-row-del:hover { color: var(--loss); background: rgba(var(--loss-rgb), 0.12); } .chart-tools-empty { color: var(--text-muted); font-size: 0.72rem; padding: 4px 6px 6px; } .chart-tools-clear-all { width: 100%; margin-top: 10px; padding: 7px 10px; background: rgba(var(--loss-rgb), 0.1); border: 1px solid rgba(var(--loss-rgb), 0.4); border-radius: 8px; color: var(--loss); font-size: 0.74rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .chart-tools-clear-all:hover { background: rgba(var(--loss-rgb), 0.2); } /* ---- Weekly Review: notes panel ---- */ .review-notes-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; align-items: stretch; } @media (max-width: 900px) { .review-notes-row { grid-template-columns: 1fr; } } .review-notes-textarea { width: 100%; min-height: 150px; box-sizing: border-box; resize: vertical; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; color: var(--text-light); font-family: inherit; font-size: 0.86rem; line-height: 1.55; } .review-notes-textarea:focus { outline: none; border-color: rgba(var(--accent-blue-rgb), 0.6); } .review-notes-status { color: var(--win); font-size: 0.66rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; } /* ==== Community: Trade Wall + Leaderboard ==== */ .community-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; } .community-tabs { display: flex; gap: 8px; } .community-tab-btn { display: flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-muted); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .community-tab-btn:hover { color: var(--text-light); } .community-tab-btn.active { color: var(--accent-blue); border-color: rgba(var(--accent-blue-rgb), 0.55); background: rgba(var(--accent-blue-rgb), 0.1); } .community-privacy-note { color: var(--text-muted); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 6px; } .community-privacy-note i { color: var(--accent-gold); } .community-loading { color: var(--text-muted); text-align: center; padding: 60px 20px; font-size: 0.9rem; } .community-empty { text-align: center; padding: 60px 24px; color: var(--text-muted); background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 14px; } .community-empty i { font-size: 1.8rem; margin-bottom: 10px; color: var(--accent-gold); } .community-empty h3 { margin: 0 0 6px; color: var(--text-light); font-size: 1rem; } .community-empty p { margin: 0 auto; max-width: 460px; font-size: 0.84rem; line-height: 1.5; } /* ---- Trade Wall cards ---- */ .cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; } .cw-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; animation: reviewFadeUp 0.4s ease both; transition: transform 0.15s ease, border-color 0.15s ease; } .cw-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-blue-rgb), 0.4); } .cw-card-head { display: flex; align-items: center; gap: 10px; } .cw-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cw-avatar-initial { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; } .cw-card-who { display: flex; flex-direction: column; min-width: 0; flex: 1; } .cw-card-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cw-card-when { color: var(--text-muted); font-size: 0.68rem; } .cw-you-chip { display: inline-block; padding: 1px 7px; border-radius: 10px; background: rgba(var(--accent-blue-rgb), 0.15); color: var(--accent-blue); font-size: 0.6rem; font-weight: 700; vertical-align: middle; } .cw-card-del { background: transparent; border: none; color: var(--text-muted); font-size: 0.72rem; cursor: pointer; padding: 5px 7px; border-radius: 6px; } .cw-card-del:hover { color: var(--loss); background: rgba(var(--loss-rgb), 0.12); } /* Trade-type card body */ .cw-trade-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cw-trade-symbol { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; } .cw-side-chip, .cw-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 11px; font-size: 0.64rem; font-weight: 700; } .cw-side-chip.long { background: rgba(var(--win-rgb), 0.12); color: var(--win); } .cw-side-chip.short { background: rgba(var(--loss-rgb), 0.12); color: var(--loss); } .cw-status-chip.win { background: rgba(var(--win-rgb), 0.16); color: var(--win); } .cw-status-chip.loss { background: rgba(var(--loss-rgb), 0.16); color: var(--loss); } .cw-status-chip.wash { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); } .cw-trade-r { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 6px 0 2px; } .cw-trade-r.pos { color: var(--win); } .cw-trade-r.neg { color: var(--loss); } .cw-trade-meta { color: var(--text-muted); font-size: 0.74rem; } /* Week-type card body */ .cw-week-body { display: flex; gap: 14px; align-items: center; } .cw-week-grade { width: 72px; height: 72px; border-radius: 50%; border: 3px solid currentColor; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .cw-week-grade.grade-a { color: var(--win); } .cw-week-grade.grade-b { color: var(--accent-gold); } .cw-week-grade.grade-c { color: #ff8a3d; } .cw-week-grade.grade-d { color: var(--loss); } .cw-week-letter { font-size: 1.5rem; font-weight: 800; line-height: 1; } .cw-week-score { font-size: 0.58rem; color: var(--text-muted); margin-top: 2px; } .cw-week-stats { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cw-week-title { font-size: 0.74rem; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .cw-week-title i { color: var(--accent-blue); } .cw-week-row { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-muted); } .cw-week-row strong { color: var(--text-light); } /* Reactions */ .cw-reactions { display: flex; gap: 8px; border-top: 1px solid var(--border-color); padding-top: 10px; margin-top: auto; } .cw-react-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; border-radius: 14px; color: var(--text-muted); font-size: 0.74rem; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease; } .cw-react-btn:hover { background: rgba(255, 255, 255, 0.08); } .cw-react-btn.reacted { border-color: rgba(var(--accent-blue-rgb), 0.5); background: rgba(var(--accent-blue-rgb), 0.1); color: var(--text-light); } .cw-react-btn.pop { animation: cwReactPop 0.3s ease; } @keyframes cwReactPop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } /* ---- Leaderboard ---- */ .lb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .lb-toolbar-group { display: flex; gap: 8px; } .lb-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: rgba(var(--accent-blue-rgb), 0.06); border: 1px solid rgba(var(--accent-blue-rgb), 0.3); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: 0.84rem; line-height: 1.5; } .lb-cta.on-board { background: rgba(var(--win-rgb), 0.05); border-color: rgba(var(--win-rgb), 0.3); } .lb-cta-text { flex: 1; min-width: 220px; } .lb-cta-actions { display: flex; gap: 8px; } .lb-publish-btn { color: var(--accent-blue) !important; } .lb-remove-btn:hover { color: var(--loss) !important; } .lb-podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 18px; } .lb-podium-slot { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; animation: reviewFadeUp 0.5s ease both; } .lb-podium-slot.empty { visibility: hidden; } .lb-podium-slot.gold { border-color: rgba(var(--accent-gold-rgb), 0.6); box-shadow: 0 8px 28px rgba(var(--accent-gold-rgb), 0.12); padding-top: 26px; padding-bottom: 22px; animation-delay: 0.08s; } .lb-podium-slot.silver { animation-delay: 0.16s; } .lb-podium-slot.bronze { animation-delay: 0.24s; } .lb-podium-slot.me { outline: 2px solid rgba(var(--accent-blue-rgb), 0.5); } .lb-podium-medal { font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; gap: 6px; } .lb-podium-slot.gold .lb-podium-medal { color: var(--accent-gold); font-size: 0.82rem; } .lb-podium-slot.silver .lb-podium-medal { color: #b8c4d4; } .lb-podium-slot.bronze .lb-podium-medal { color: #cd8f5a; } .lb-podium-slot .cw-avatar { width: 44px; height: 44px; font-size: 1.05rem; } .lb-podium-slot.gold .cw-avatar { width: 54px; height: 54px; } .lb-podium-name { font-size: 0.82rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-podium-value { font-size: 1.4rem; font-weight: 800; color: var(--accent-blue); } .lb-podium-slot.gold .lb-podium-value { font-size: 1.7rem; color: var(--accent-gold); } .lb-podium-sub { color: var(--text-muted); font-size: 0.68rem; } .lb-rows { display: flex; flex-direction: column; gap: 8px; } .lb-row { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; } .lb-row.me { border-color: rgba(var(--accent-blue-rgb), 0.55); background: rgba(var(--accent-blue-rgb), 0.05); } .lb-row-rank { color: var(--text-muted); font-weight: 700; width: 34px; } .lb-row .cw-avatar { width: 28px; height: 28px; font-size: 0.75rem; } .lb-row-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-row-sub { color: var(--text-muted); font-size: 0.72rem; flex: 1; text-align: right; } .lb-row-value { font-weight: 800; color: var(--accent-blue); min-width: 64px; text-align: right; } /* ---- Toast ---- */ .community-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 9px; background: var(--bg-card); border: 1px solid rgba(var(--win-rgb), 0.5); color: var(--text-light); border-radius: 12px; padding: 11px 18px; font-size: 0.84rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 900; } .community-toast i { color: var(--win); } .community-toast.error { border-color: rgba(var(--loss-rgb), 0.55); } .community-toast.error i { color: var(--loss); } .community-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Share Week button on the Review grade card */ .review-share-week-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 6px 16px; background: rgba(var(--accent-blue-rgb), 0.1); border: 1px solid rgba(var(--accent-blue-rgb), 0.45); border-radius: 16px; color: var(--accent-blue); font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: background 0.12s ease; } .review-share-week-btn:hover { background: rgba(var(--accent-blue-rgb), 0.2); } @media (max-width: 700px) { .lb-podium { grid-template-columns: 1fr; } .lb-podium-slot.empty { display: none; } } /* ==== Sidebar v2: modern restyle + overflow fix ========================= The overlap bug first: .sidebar is a 100vh flex column, so when its content is taller than the viewport, flex items COMPRESS into each other (that's how the profile row ended up sitting on the Ko-fi link). Children now refuse to shrink and the sidebar scrolls instead. */ .sidebar { gap: 12px; overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-body) 100%); } .sidebar > * { flex-shrink: 0; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); } /* Section micro-labels */ .sidebar-section-label { color: var(--text-muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; margin-bottom: -6px; padding-left: 4px; } /* Nav links: accent bar + slide-in hover */ .nav-link { position: relative; padding: 8px 10px 8px 14px; border-radius: 8px; } .nav-link::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--accent-blue); opacity: 0; transition: opacity 0.18s ease; } .nav-link:hover { background: rgba(255, 255, 255, 0.04); padding-left: 17px; } .nav-link.active { background: linear-gradient(90deg, rgba(var(--accent-blue-rgb), 0.16) 0%, rgba(var(--accent-blue-rgb), 0.04) 100%); } .nav-link.active::before { opacity: 1; } /* Balance card: subtle gold-edged panel */ .account-box { background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-dark) 100%); border: 1px solid var(--border-color); border-radius: 12px; position: relative; overflow: hidden; } .account-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--accent-gold-rgb), 0.7), transparent); } /* Support block: compact single card, flows right after the action buttons (margin-top: 0 overrides the original rule's margin-top: auto, which pinned it - and the profile row after it - to the bottom of the sidebar) */ .sidebar-support { margin-top: 0; padding: 10px; gap: 8px; background: rgba(var(--accent-gold-rgb), 0.05); border: 1px solid rgba(var(--accent-gold-rgb), 0.18); border-radius: 12px; } .sidebar-support-text { margin: 0; font-size: 0.68rem; line-height: 1.45; } .sidebar-support-text > i { display: none; } /* Profile row: its own card with clear separation from the support block */ .sidebar-profile-wrap { margin-top: 2px; padding-bottom: 6px; } .sidebar-profile { border-top: none; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 12px; transition: border-color 0.15s ease, background 0.15s ease; } .sidebar-profile:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--accent-blue-rgb), 0.45); } /* ==== Responsive layer ================================================= The app was designed desktop-first with fixed side-by-side rows; on narrower viewports (tablets, or phones in "Desktop site" mode, which lay out at roughly 980-1280px) those rows crushed their children into each other instead of wrapping. Everything below only kicks in under the breakpoints - wide desktop layout is untouched. */ /* Pages must NEVER scroll sideways as a whole - a too-wide element (like the 16-column trade table) previously made the entire view pan horizontally, dragging the top cards off-screen with it. Wide content now scrolls inside its own container instead. */ .view-section { overflow-x: hidden; } /* The 11 date-preset buttons wrap at any width instead of forcing overflow */ .page-date-range-bar { flex-wrap: wrap; } @media (max-width: 1550px) { /* Trade log: 16 columns can't fit - scroll the table sideways inside its own container instead of letting the cells crush into unreadable slivers. (Scoped so the row ... menu popover is never clipped on large desktop screens, where the table fits anyway.) */ .table-container { overflow-x: auto; max-width: 100%; } .table-header-row, .table-row { min-width: 1150px; } } @media (max-width: 1280px) { /* Dashboard top cards: wrap into rows instead of clipping off-screen */ .stats-row { flex-wrap: wrap; } .stats-row > * { flex: 1 1 220px; } .pnl-card { margin-left: 0; } /* Stats page: stack every side-by-side panel pair */ .stats-charts-row { flex-direction: column; } /* Trade View modal: chart panel + details card + screenshots can't sit three-across - let them wrap and scroll */ #trade-view-modal-overlay { flex-wrap: wrap; overflow-y: auto; align-items: flex-start; } .trade-view-chart-panel { width: 100%; max-width: 620px; } } @media (max-width: 1024px) { /* Sidebar: slightly slimmer so content keeps more room */ .sidebar { width: 200px; padding: 14px 10px; } /* Settings: subnav becomes a wrapping tab row above the content */ .settings-layout { flex-direction: column; } .settings-subnav { width: 100%; display: flex; flex-wrap: wrap; } .settings-subnav-item { flex: 1 1 46%; min-width: 150px; } /* Calendar: weekly-summary rail drops below the month grid */ .calendar-layout { flex-direction: column; } .calendar-weekly-summary { width: 100%; } /* News page: keep chart blocks inside the viewport */ .cpi-chart-toolbar { flex-wrap: wrap; } /* Modals never wider than the screen */ .modal-card { max-width: calc(100vw - 24px); margin: 12px; } } /* ==== Hamburger / drawer sidebar ======================================== html.sidebar-drawer-mode is set pre-paint (head script) from localStorage, then kept in sync by applySidebarMode() in settings.js. In drawer mode the sidebar floats off-canvas and slides in over a scrim; small screens always use it regardless of the saved setting. */ .sidebar-hamburger-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 880; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-light); font-size: 1rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: border-color 0.15s ease, transform 0.1s ease; } .sidebar-hamburger-btn:hover { border-color: rgba(var(--accent-blue-rgb), 0.55); } .sidebar-hamburger-btn:active { transform: scale(0.94); } html.sidebar-drawer-mode .sidebar-hamburger-btn { display: flex; } .sidebar-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 890; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } html.sidebar-drawer-mode .sidebar-scrim.show { opacity: 1; pointer-events: auto; } html.sidebar-drawer-mode .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; height: 100dvh; /* mobile browsers: exclude the URL bar */ width: 262px; z-index: 900; transform: translateX(-105%); transition: transform 0.25s ease; box-shadow: 14px 0 42px rgba(0, 0, 0, 0.45); } html.sidebar-drawer-mode .sidebar.open { transform: translateX(0); } /* Close (X) inside the drawer */ .sidebar-drawer-close { display: none; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; z-index: 2; } .sidebar-drawer-close:hover { color: var(--text-light); border-color: rgba(var(--loss-rgb), 0.5); } html.sidebar-drawer-mode .sidebar-drawer-close { display: flex; } /* Content takes the full width; keep clearance for the floating burger */ html.sidebar-drawer-mode .dashboard-main { padding-left: 66px; } /* ==== True-mobile polish (phone portrait, no desktop-mode toggle) ==== */ @media (max-width: 640px) { .dashboard-main { padding: 0 10px 14px 62px; gap: 12px; } .stats-row { gap: 10px; } .stats-row > * { flex: 1 1 150px; } .review-tiles { grid-template-columns: 1fr; } .community-header { padding-left: 2px; } .cw-grid { grid-template-columns: 1fr; } .settings-subnav-item { flex: 1 1 100%; } .help-hero h1 { font-size: 1.3rem; } /* Popovers/panels never wider than the screen */ .custom-date-popover { max-width: calc(100vw - 20px); flex-wrap: wrap; } .chart-tools-panel { max-width: calc(100vw - 70px); } } /* Sidebar-style picker buttons (Settings > Appearance) */ .sidebar-mode-btns { display: flex; gap: 10px; flex-wrap: wrap; } .sidebar-mode-btn.active { color: var(--accent-blue) !important; border-color: rgba(var(--accent-blue-rgb), 0.55) !important; background: rgba(var(--accent-blue-rgb), 0.1) !important; } /* ==== Phone-portrait trade log: rows become compact cards ============== A 16-column table has no chance on a ~400px screen, and sideways scrolling through it is miserable. Below 640px each trade renders as a two-line card with the fields that matter at a glance (Date / Symbol / Status, then Side / Return / Return %) - tap it for the full Trade View, which still has everything. Cell indexes match buildTradeRowHtml's fixed column order (same as the table header row). */ @media (max-width: 640px) { .table-container { overflow-x: visible; } .table-header-row { display: none; } .table-row { min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 10px; align-items: center; padding: 12px 48px 12px 12px; margin-bottom: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; } /* Hide: Time(2), Qty(6), Entry(7), Exit(8), EntTot(9), ExtTot(10), Pos(11), Hold(12), R(15), Confidence(16) */ .table-row .table-cell:nth-child(2), .table-row .table-cell:nth-child(6), .table-row .table-cell:nth-child(7), .table-row .table-cell:nth-child(8), .table-row .table-cell:nth-child(9), .table-row .table-cell:nth-child(10), .table-row .table-cell:nth-child(11), .table-row .table-cell:nth-child(12), .table-row .table-cell:nth-child(15), .table-row .table-cell:nth-child(16) { display: none; } /* Symbol pops as the card's anchor */ .table-row .table-cell:nth-child(3) { font-weight: 700; } /* Return values right-ish alignment for a tidy money column */ .table-row .table-cell:nth-child(13), .table-row .table-cell:nth-child(14) { font-weight: 600; } } /* ==== Calendar: week labels + narrow-screen layout ==== */ .calendar-week-label { color: var(--text-muted); font-size: 0.62rem; font-weight: 600; white-space: nowrap; } /* Desktop: day cells and weekly-summary cards share one fixed row height (both columns already use the same 6px gap), so every calendar row lines up exactly with its week card. The summary card gets a hard height (not min-) because its content - now including the week label - is what grew past the old shared 95px minimum and caused the drift. */ @media (min-width: 1025px) { .calendar-day { min-height: 106px; } .calendar-week-card { height: 106px; min-height: 0; padding: 8px 10px; gap: 3px; overflow: hidden; } } @media (max-width: 1024px) { /* Weekly summary sits below the grid here (stacked layout): show the week cards as a wrapping grid instead of six full-width stripes, and drop the empty placeholder cards (they only exist to row-align with the month grid when the rail sits beside it). */ #calendar-weekly-summary-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .calendar-weekly-summary .calendar-week-card:empty { display: none; } .calendar-weekly-summary .calendar-week-card { min-height: 80px; } } @media (max-width: 640px) { /* Phone: compact day cells so the 7-column month fits cleanly */ .calendar-grid { gap: 4px; } .calendar-day { min-height: 62px; padding: 5px 4px; border-radius: 6px; } .calendar-day-number { font-size: 0.66rem; } .calendar-day-pnl { font-size: 0.6rem; font-weight: 700; } .calendar-day-count { font-size: 0.56rem; } } /* ==== Stats: Total Account Trades panel ==== */ .total-trades-panel { display: flex; flex-direction: column; } #total-trades-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .tt-number { font-size: 3.4rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, var(--text-light) 30%, var(--text-muted) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tt-seg-bar { display: flex; width: 100%; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; } .tt-seg { min-width: 4px; transition: filter 0.12s ease, transform 0.12s ease; cursor: default; } .tt-seg:hover { filter: brightness(1.35); } .tt-seg.win { background: var(--win); } .tt-seg.loss { background: var(--loss); } .tt-seg.wash { background: #6b7280; } .tt-seg.open { background: var(--accent-blue); } .tt-seg-legend { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; font-size: 0.68rem; color: var(--text-muted); } .tt-legend-item { display: inline-flex; align-items: center; gap: 5px; } .tt-legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .tt-legend-dot.win { background: var(--win); } .tt-legend-dot.loss { background: var(--loss); } .tt-legend-dot.wash { background: #6b7280; } .tt-legend-dot.open { background: var(--accent-blue); } .tt-sub-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 0.74rem; color: var(--text-muted); } .tt-sub-row i { color: var(--accent-blue); margin-right: 4px; } .tt-milestone { width: 100%; } .tt-milestone-track { width: 100%; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .tt-milestone-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(var(--accent-gold-rgb), 0.55), var(--accent-gold)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .tt-milestone-label { margin-top: 5px; font-size: 0.66rem; color: var(--text-muted); } .tt-milestone-label strong { color: var(--accent-gold); } /* Day/hour bars + heatmap cells are click-to-drill-down */ .stats-bar-row[data-bar-label] { cursor: pointer; } .stats-bar-row[data-bar-label]:hover .stats-bar-row-label { color: var(--text-light); } .stats-heatmap-cell:not(.empty) { cursor: pointer; } /* ==== Pro Score panel: radar + always-visible metric breakdown ==== */ .pro-score-flex { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; height: 100%; width: 100%; } .pro-score-flex .pro-score-svg { flex: 1 1 250px; min-width: 230px; max-width: none; } .pro-score-breakdown { flex: 1 1 210px; min-width: 200px; display: flex; flex-direction: column; gap: 10px; } .ps-break-row { display: flex; align-items: center; gap: 10px; font-size: 0.74rem; padding: 3px 6px; border-radius: 6px; cursor: default; } .ps-break-row:hover { background: rgba(124, 92, 255, 0.08); } .ps-break-label { width: 92px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-break-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .ps-break-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(124, 92, 255, 0.55), #7c5cff); } .ps-break-val { width: 26px; text-align: right; font-weight: 700; color: var(--text-light); } /* Score number + gradient bar on one compact line */ .pro-score-summary-row { display: flex; align-items: center; gap: 20px; } .pro-score-summary-left { flex-shrink: 0; } .pro-score-summary-bar { flex: 1; min-width: 0; } /* ==== Pro Score breakdown: click-to-expand improvement tips ==== */ .ps-break-row { cursor: pointer; } .ps-break-chevron { color: var(--text-muted); font-size: 0.58rem; transition: transform 0.2s ease; flex-shrink: 0; } .ps-break-item.open .ps-break-chevron { transform: rotate(90deg); } .ps-break-item.open .ps-break-row { background: rgba(124, 92, 255, 0.1); } .ps-break-tip { display: none; margin: 4px 6px 8px; padding: 10px 12px; border-left: 3px solid #7c5cff; border-radius: 0 8px 8px 0; background: rgba(124, 92, 255, 0.07); color: var(--text-light); font-size: 0.74rem; line-height: 1.55; } .ps-break-tip strong { color: #b39dff; } .ps-break-item.open .ps-break-tip { display: block; animation: reviewFadeUp 0.25s ease both; } /* ==== Day-of-week chart: insights strip filling the leftover space ==== */ .day-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color); } @media (max-width: 640px) { .day-insights { grid-template-columns: 1fr; } } .day-insight { display: flex; align-items: center; gap: 10px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; transition: border-color 0.15s ease, transform 0.15s ease; } .day-insight:hover { transform: translateY(-2px); border-color: rgba(var(--accent-blue-rgb), 0.45); } .day-insight > i { color: var(--accent-gold); font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; } .day-insight-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .day-insight-label { color: var(--text-muted); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .day-insight-day { font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .day-insight-value { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* ==== Support widget v2: steaming, wiggling, heart-bursting coffee ==== */ /* The button: gold-blue gradient, gentle idle bob, and a periodic "hey, I'm here" wiggle every 8 seconds */ .sidebar-support-btn { position: relative; overflow: visible; background: linear-gradient(135deg, var(--accent-blue) 0%, #7c5cff 100%); animation: support-wiggle 8s ease-in-out infinite; transition: transform 0.18s ease, box-shadow 0.18s ease; } .sidebar-support-btn:hover { transform: scale(1.18) rotate(-6deg); box-shadow: 0 6px 22px rgba(var(--accent-blue-rgb), 0.65), 0 0 0 4px rgba(var(--accent-gold-rgb), 0.25); animation-play-state: paused; } .sidebar-support-btn:active { transform: scale(1.05); } @keyframes support-wiggle { 0%, 88%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-10deg) scale(1.06); } 92% { transform: rotate(9deg) scale(1.06); } 94% { transform: rotate(-6deg) scale(1.04); } 96% { transform: rotate(4deg) scale(1.02); } 98% { transform: rotate(0deg); } } /* Steam: three wisps forever rising off the mug */ .support-steam { position: absolute; bottom: 78%; width: 4px; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.75); filter: blur(1.5px); opacity: 0; pointer-events: none; animation: support-steam-rise 2.6s ease-out infinite; } .support-steam.steam-1 { left: 32%; animation-delay: 0s; } .support-steam.steam-2 { left: 50%; animation-delay: 0.9s; height: 15px; } .support-steam.steam-3 { left: 66%; animation-delay: 1.7s; } @keyframes support-steam-rise { 0% { opacity: 0; transform: translateY(4px) scaleY(0.6); } 25% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.3) translateX(3px); } } /* Hearts: burst upward when hovered */ .support-heart { position: absolute; bottom: 60%; font-size: 0.7rem; color: var(--loss); opacity: 0; pointer-events: none; } .support-heart.heart-1 { left: 12%; } .support-heart.heart-2 { right: 8%; font-size: 0.55rem; } .sidebar-support-btn:hover .support-heart.heart-1 { animation: support-heart-float 0.9s ease-out infinite; } .sidebar-support-btn:hover .support-heart.heart-2 { animation: support-heart-float 0.9s ease-out 0.35s infinite; } @keyframes support-heart-float { 0% { opacity: 0; transform: translateY(2px) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1.2) rotate(12deg); } } /* The card itself: warm glow that breathes, brighter on hover */ .sidebar-support { position: relative; animation: support-glow 5s ease-in-out infinite; transition: border-color 0.2s ease; } .sidebar-support:hover { border-color: rgba(var(--accent-gold-rgb), 0.55); } @keyframes support-glow { 0%, 100% { box-shadow: 0 0 0 rgba(var(--accent-gold-rgb), 0); } 50% { box-shadow: 0 0 14px rgba(var(--accent-gold-rgb), 0.14); } } @media (prefers-reduced-motion: reduce) { .sidebar-support-btn, .sidebar-support { animation: none; } .support-steam, .support-heart { display: none; } } /* ==== Light theme ====================================================== Palette override plus a fixup layer: the app was built dark-first, so a handful of rules hardcode white text (invisible on white) or use white-alpha hover washes / tracks (invisible on light backgrounds). Everything here is scoped to html[data-theme="light"], and chart canvases deliberately STAY dark - like TradingView's light UI. */ html[data-theme="light"] { --bg-body: #eef1f6; --bg-dark: #f6f8fb; --bg-card: #ffffff; --bg-chart: #0f1220; --border-color: #dde3ec; --text-muted: #64748b; --text-light: #1e293b; --accent-blue: #2563eb; --accent-blue-rgb: 37, 99, 235; --accent-gold: #a87f24; --accent-gold-rgb: 168, 127, 36; --win: #059669; --win-rgb: 5, 150, 105; --loss: #dc2626; --loss-rgb: 220, 38, 38; } /* -- White text that sat on theme backgrounds -- */ html.light-base .brand h1, html.light-base .text-white, html.light-base .stats-metric-value, html.light-base .pro-score-value, html.light-base .trade-view-symbol, html.light-base .help-hero h1, html.light-base .help-section-header h2, html.light-base .nav-link:hover, html.light-base .btn-edit:hover, html.light-base .trade-row-menu-btn:hover, html.light-base .news-tab.active, html.light-base .modal-close-btn:hover, html.light-base .note-editor-toolbar button:hover, html.light-base .ps-break-val, html.light-base .journal-brand span { color: var(--text-light); } /* -- White-alpha hover washes become dark washes -- */ html.light-base .nav-link:hover { background-color: rgba(0, 0, 0, 0.05); } html.light-base .btn-edit:hover { background-color: rgba(0, 0, 0, 0.07); } html.light-base .sidebar-profile { background: rgba(0, 0, 0, 0.02); } html.light-base .sidebar-profile:hover, html.light-base .review-trade-line.clickable:hover, html.light-base .review-week-cell:hover, html.light-base .cw-react-btn:hover, html.light-base .review-day-row.clickable .review-day-head:hover { background: rgba(0, 0, 0, 0.05); } html.light-base .cw-react-btn { background: rgba(0, 0, 0, 0.04); } /* -- Tracks, grids and empty cells drawn with white-alpha -- */ html.light-base .ps-break-track, html.light-base .tt-milestone-track, html.light-base .review-day-minibar, html.light-base .stats-heatmap-cell.empty { background: rgba(0, 0, 0, 0.06); } html.light-base .pro-score-grid-ring { stroke: rgba(0, 0, 0, 0.1); } html.light-base .pro-score-axis-line { stroke: rgba(0, 0, 0, 0.14); } html.light-base .review-week-bar-track::after { border-top-color: rgba(0, 0, 0, 0.15); } html.light-base .stats-bar-half { background: rgba(0, 0, 0, 0.035); } html.light-base .stats-heatmap-cell:not(.empty):hover { outline-color: rgba(0, 0, 0, 0.4); } /* -- Scrollbars -- */ html.light-base .view-section::-webkit-scrollbar-thumb, html.light-base .news-content-area::-webkit-scrollbar-thumb, html.light-base .sidebar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); } html.light-base .view-section::-webkit-scrollbar-thumb:hover, html.light-base .news-content-area::-webkit-scrollbar-thumb:hover, html.light-base .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); } /* Cards cast a real shadow on light backgrounds for depth */ html.light-base .stats-panel, html.light-base .review-tile, html.light-base .cw-card, html.light-base .account-box { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } /* ==== Neon: near-black with hot pink + violet accents ==== */ html[data-theme="neon"] { --bg-body: #0f0c13; --bg-dark: #0a080e; --bg-card: #181321; --bg-chart: #0b0910; --border-color: #332544; --text-muted: #9b8ba8; --text-light: #eee6f5; --accent-blue: #f43f8e; --accent-blue-rgb: 244, 63, 142; --accent-gold: #c77dff; --accent-gold-rgb: 199, 125, 255; } /* ==== Blossom: soft pink light theme (shares the light-base fixups) ==== */ html[data-theme="blossom"] { --bg-body: #fdf1f5; --bg-dark: #fbe9f0; --bg-card: #ffffff; --bg-chart: #0f1220; --border-color: #f2d7e2; --text-muted: #9d7186; --text-light: #43222f; --accent-blue: #e0447c; --accent-blue-rgb: 224, 68, 124; --accent-gold: #b3688c; --accent-gold-rgb: 179, 104, 140; --win: #059669; --win-rgb: 5, 150, 105; --loss: #dc2626; --loss-rgb: 220, 38, 38; } /* ==== Coach page ==== */ #coach-content { display: flex; flex-direction: column; gap: 16px; } .coach-hero { display: flex; align-items: center; gap: 24px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 24px; flex-wrap: wrap; } .coach-fitness { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 130px; } .coach-fitness-num { font-size: 3rem; font-weight: 800; line-height: 1; color: currentColor; } .coach-fitness-label { color: var(--text-muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; } .coach-fitness-word { font-size: 0.74rem; font-weight: 700; color: currentColor; } .coach-hero-text { flex: 1; min-width: 240px; } .coach-hero-text h2 { margin: 0 0 6px; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; } .coach-hero-text h2 i { color: var(--accent-gold); } .coach-hero-text p { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; } .coach-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .coach-cols { grid-template-columns: 1fr; } } .coach-title-icon.win { color: var(--win); margin-right: 6px; } .coach-title-icon.loss { color: var(--loss); margin-right: 6px; } .coach-title-icon.gold { color: var(--accent-gold); margin-right: 6px; } .coach-finding { display: flex; gap: 12px; padding: 12px; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--border-color); background: var(--bg-dark); transition: transform 0.15s ease, border-color 0.15s ease; } .coach-finding:hover { transform: translateX(3px); } .coach-finding.strength { border-left: 3px solid var(--win); } .coach-finding.weakness { border-left: 3px solid var(--loss); } .coach-finding > i { width: 18px; text-align: center; margin-top: 2px; flex-shrink: 0; } .coach-finding.strength > i { color: var(--win); } .coach-finding.weakness > i { color: var(--loss); } .coach-finding-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .coach-finding-title { font-size: 0.86rem; font-weight: 700; } .coach-finding-detail { color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; } /* Goal panel */ .coach-goal-panel { border: 1px solid rgba(var(--accent-gold-rgb), 0.35); } .coach-goal-suggested { background: linear-gradient(180deg, rgba(var(--accent-gold-rgb), 0.05), transparent 60%), var(--bg-card); } .coach-goal-title { margin: 4px 0 6px; font-size: 1.1rem; } .coach-goal-why { margin: 0 0 10px; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; } .coach-goal-target { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 20px; background: rgba(var(--accent-gold-rgb), 0.1); border: 1px solid rgba(var(--accent-gold-rgb), 0.4); color: var(--accent-gold); font-size: 0.78rem; font-weight: 700; margin-bottom: 14px; } .coach-goal-progress { margin-bottom: 14px; } .coach-goal-progress-track { height: 8px; border-radius: 5px; background: rgba(var(--accent-gold-rgb), 0.12); overflow: hidden; } .coach-goal-progress-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, rgba(var(--accent-gold-rgb), 0.6), var(--accent-gold)); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .coach-goal-progress-label { display: block; margin-top: 6px; color: var(--text-muted); font-size: 0.7rem; } .coach-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .coach-step { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 8px; background: var(--bg-dark); border: 1px solid var(--border-color); font-size: 0.8rem; line-height: 1.45; cursor: pointer; } .coach-step.preview { cursor: default; } .coach-step.preview i { color: var(--accent-gold); font-size: 0.75rem; } .coach-step input[type="checkbox"] { accent-color: var(--accent-gold); cursor: pointer; } .coach-step.done span { text-decoration: line-through; color: var(--text-muted); } .coach-goal-actions { display: flex; gap: 10px; flex-wrap: wrap; } .coach-goal-accept, .coach-goal-complete { color: var(--accent-gold) !important; border-color: rgba(var(--accent-gold-rgb), 0.5) !important; } .coach-goal-abandon:hover { color: var(--loss) !important; } /* ==== Sidebar: compact pass ============================================ With 9 nav items plus the coach/community additions, the sidebar outgrew a typical laptop viewport. Everything shrinks a notch so the whole column fits without scrolling on ~768px-tall screens. */ .sidebar { gap: 8px; padding: 12px 14px; } .brand h1 { font-size: 1rem; } .logo-mark.brand-icon { width: 1.55em; height: 1.55em; } .sidebar-toolbar { margin-bottom: -4px; } .account-switcher-label { font-size: 0.6rem; } .account-switcher-select { padding: 4px 8px; font-size: 0.74rem; } .account-box { padding: 8px 10px; } .account-title { font-size: 0.62rem; } .transaction-summary { font-size: 0.78rem; } .sidebar-section-label { font-size: 0.56rem; margin-bottom: -4px; } .nav-menu { gap: 2px; font-size: 0.82rem; } .nav-link { padding: 6px 8px 6px 12px; } .nav-link:hover { padding-left: 15px; } .nav-link i { font-size: 0.85rem; width: 16px; } .sidebar-actions .btn-action, .sidebar-profile-menu .btn-action { padding: 7px 12px; font-size: 0.76rem; } .sidebar-actions .btn-blue, .sidebar-actions .btn-gold { margin-top: 4px; } .sidebar-support { padding: 8px; gap: 6px; } .sidebar-support-text { font-size: 0.64rem; line-height: 1.4; } .sidebar-support-btn { width: 34px; height: 34px; font-size: 0.85rem; } .sidebar-profile { padding: 6px 8px; } .profile-avatar, .sidebar-profile img { width: 26px; height: 26px; } .profile-avatar-fallback { font-size: 1.5rem; } .profile-name { font-size: 0.8rem; } .sidebar-profile-wrap { padding-bottom: 2px; } /* Coach mascot: the golden bull */ .coach-bull { margin-left: auto; width: 96px; height: 96px; flex-shrink: 0; filter: drop-shadow(0 4px 14px rgba(var(--accent-gold-rgb), 0.35)); animation: coach-bull-float 4s ease-in-out infinite; } .coach-bull svg { width: 100%; height: 100%; } @keyframes coach-bull-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (max-width: 700px) { .coach-bull { display: none; } } @media (prefers-reduced-motion: reduce) { .coach-bull { animation: none; } } /* Bull v2: full-body charging statue. Static by default - it only charges while hovering the bull itself or the sidebar coffee button (see the easter-egg listeners in coach.js). */ .coach-bull { width: 170px; height: 102px; animation: none; transition: filter 0.2s ease; } .coach-bull:hover, .coach-bull.charging { filter: drop-shadow(0 4px 20px rgba(var(--accent-gold-rgb), 0.65)); animation: coach-bull-charge 0.5s ease-in-out infinite; } @keyframes coach-bull-charge { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-7px) rotate(-2.5deg); } 50% { transform: translateX(-2px) rotate(0.5deg); } 75% { transform: translateX(-9px) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .coach-bull:hover, .coach-bull.charging { animation: none; } } /* ==== Donate modal ==== */ .donate-modal-card { max-width: 420px; } .donate-modal-lead { margin: 0 0 14px; color: var(--text-muted); font-size: 0.84rem; line-height: 1.55; } .donate-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; } .donate-preset { padding: 10px 0; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-light); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease; } .donate-preset:hover { transform: translateY(-2px); } .donate-preset.active { border-color: rgba(var(--accent-gold-rgb), 0.6); background: rgba(var(--accent-gold-rgb), 0.12); color: var(--accent-gold); } .donate-custom-row { margin-bottom: 16px; } .donate-custom-input-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .donate-custom-input-wrap > span { color: var(--text-muted); font-weight: 700; } .donate-submit-btn { width: 100%; justify-content: center; } .donate-modal-note { margin: 12px 0 0; color: var(--text-muted); font-size: 0.7rem; line-height: 1.5; display: flex; align-items: baseline; gap: 7px; } .donate-modal-note i { color: var(--win); } /* Donate modal: one-time vs monthly toggle */ .donate-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .donate-mode-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 0; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .donate-mode-btn.active { border-color: rgba(var(--accent-gold-rgb), 0.6); background: rgba(var(--accent-gold-rgb), 0.12); color: var(--accent-gold); } /* Bull v3: photo/render image instead of the hand-drawn SVG */ .coach-bull { width: 165px; height: 110px; } .coach-bull img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Support cup v3: completely still until hovered - then steam, hearts and shaking all at once (overrides the always-on idle animations). */ .sidebar-support-btn { animation: none; } .support-steam { animation: none; } .sidebar-support-btn:hover { animation: support-shake-hover 0.55s ease-in-out infinite; transform: none; } @keyframes support-shake-hover { 0%, 100% { transform: scale(1.15) rotate(0deg); } 25% { transform: scale(1.16) rotate(-8deg); } 50% { transform: scale(1.18) rotate(5deg); } 75% { transform: scale(1.16) rotate(-5deg); } } .sidebar-support-btn:hover .support-steam { animation: support-steam-rise 1.8s ease-out infinite; } .sidebar-support-btn:hover .support-steam.steam-2 { animation-delay: 0.6s; } .sidebar-support-btn:hover .support-steam.steam-3 { animation-delay: 1.2s; } @media (prefers-reduced-motion: reduce) { .sidebar-support-btn:hover { animation: none; transform: scale(1.1); } .sidebar-support-btn:hover .support-steam { animation: none; } } /* Weekday label beside each chart date */ .cpi-caption-day { color: var(--text-muted); font-weight: 600; margin-right: 6px; } .cpi-caption-day.weekend { color: var(--accent-gold); } /* Date-filter popover: stacked layout + weekday chips */ .chart-date-popover-stack { flex-direction: column; align-items: stretch; min-width: 252px; } .chart-date-popover-stack .modal-input { width: 100%; box-sizing: border-box; } .chart-day-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .chart-day-chip { padding: 5px 10px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 14px; color: var(--text-muted); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .chart-day-chip:hover { color: var(--text-light); } .chart-day-chip.active { border-color: rgba(var(--accent-blue-rgb), 0.6); background: rgba(var(--accent-blue-rgb), 0.12); color: var(--accent-blue); } /* LIVE badge on today's chart */ .live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 11px; background: rgba(var(--loss-rgb), 0.12); border: 1px solid rgba(var(--loss-rgb), 0.45); color: var(--loss); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; vertical-align: middle; margin-right: 6px; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--loss); animation: live-pulse 1.4s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* TradingView live widget frame (today's chart) */ .tv-widget-frame { display: block; width: 100%; height: 520px; border: 0; border-radius: 8px; } /* Drawing editing: grab + handle cursors */ .ct-grab { cursor: move; } .ct-handle { cursor: grab; } .ct-handle:active { cursor: grabbing; } /* ==== Per-drawing edit bar + collapsible tool rail ==== */ .ct-edit-bar { position: absolute; z-index: 8; display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: rgba(15, 18, 32, 0.95); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); } .ct-edit-colors { display: flex; gap: 4px; } .ct-edit-color { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.1s ease; } .ct-edit-color:hover { transform: scale(1.2); } .ct-edit-color.active { border-color: #ffffff; } .ct-edit-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--border-color); } .ct-edit-btn { min-width: 30px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 6px; color: #d1d4dc; font-size: 0.7rem; font-weight: 700; cursor: pointer; padding: 0 6px; } .ct-edit-btn:hover { background: rgba(255, 255, 255, 0.1); } .ct-edit-btn.active { color: #dfb15b; } .ct-edit-del:hover { color: #f6465d; background: rgba(246, 70, 93, 0.15); } .ct-style-preview { display: inline-block; width: 22px; border-top: 2px solid #d1d4dc; } .ct-style-preview.dashed { border-top-style: dashed; } .ct-style-preview.dotted { border-top-style: dotted; } /* Collapsed tool rail: only grip + chevron remain */ .chart-tools-bar.collapsed .chart-tools-btn:not(.chart-tools-collapse), .chart-tools-bar.collapsed .chart-tools-sep { display: none; } /* Edit bar in position mode: only lock + delete apply */ .ct-edit-bar.position-mode .ct-edit-colors, .ct-edit-bar.position-mode [data-action="width"], .ct-edit-bar.position-mode [data-action="style"], .ct-edit-bar.position-mode .ct-edit-sep:first-of-type { display: none; } /* ==== Weekly Review tiles: embedded mini visualizations (sparkline/donut) ==== */ .review-tile-viz { width: 100%; height: 26px; margin-top: 4px; display: block; overflow: visible; } .review-tile-donut { width: 30px; height: 30px; margin-top: 2px; } /* ---- Detail modal ---- */ .review-tile-modal-card { max-width: 620px; } .review-detail-note { margin: 0 0 14px; color: var(--text-muted); font-size: 0.82rem; } .review-detail-section-label { color: var(--text-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 16px 0 8px; } .review-detail-section-label:first-of-type { margin-top: 0; } .review-detail-gainers { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; overflow-x: hidden; } /* Top-gainer style rows (Net P&L detail) */ .review-gainer-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.82rem; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .review-gainer-row:hover { border-color: var(--accent-blue); background: rgba(var(--accent-blue-rgb), 0.06); } .review-gainer-symbol { font-weight: 600; min-width: 62px; } .review-gainer-bar-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .review-gainer-bar-fill { height: 100%; border-radius: 3px; } .review-gainer-bar-fill.pos { background: var(--win); } .review-gainer-bar-fill.neg { background: var(--loss); } /* Breakdown bars (Win Rate / Avg Per Trade detail) */ .review-detail-bars { display: flex; flex-direction: column; gap: 10px; } .review-detail-bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; } .review-detail-bar-label { width: 130px; color: var(--text-muted); flex-shrink: 0; } .review-detail-bar-track { flex: 1; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .review-detail-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, rgba(var(--accent-blue-rgb), 0.6), var(--accent-blue)); } .review-detail-bar-val { white-space: nowrap; font-weight: 600; } /* Notes & Lessons card (Best/Worst Day detail) */ .review-detail-note-card { background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .review-detail-note-card p { flex: 1 1 100%; margin: 4px 0 8px; font-size: 0.82rem; color: var(--text-light); line-height: 1.5; } .review-detail-note-card.empty p { color: var(--text-muted); } .review-detail-note-card .news-tab { width: auto; } /* Session breakdown rows (Avg Per Trade detail) */ .review-session-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.82rem; } .review-session-label { flex: 1; } .review-session-count { color: var(--text-muted); font-size: 0.72rem; } @media (max-width: 640px) { .review-detail-bar-label { width: 96px; font-size: 0.72rem; } } /* ==== Weekly Review tiles v3: full content inline (matches the reference dashboard mockup) - each tile shows its complete breakdown directly, with a "+N more" link into the detail modal when a list is truncated. ==== */ .review-tile-rich { gap: 6px; } .review-tile-section-title { color: var(--text-muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 6px; } .review-tile-list { display: flex; flex-direction: column; gap: 4px; } .review-tile-viewall { align-self: flex-start; margin-top: 2px; background: none; border: none; color: var(--accent-blue); font-size: 0.68rem; font-weight: 600; cursor: pointer; padding: 0; } .review-tile-viewall:hover { text-decoration: underline; } /* Net P&L: Top Gainers rows */ .review-gain-row { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; cursor: pointer; } .review-gain-row:hover .review-gain-symbol { color: var(--accent-blue); } .review-gain-symbol { font-weight: 600; min-width: 34px; flex-shrink: 0; } .review-gain-bar-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; min-width: 20px; } .review-gain-bar-fill { height: 100%; border-radius: 2px; background: var(--win); } /* Win Rate: filled pie chart + breakdown */ .review-tile-donut-wrap { width: 64px; height: 64px; margin: 4px 0; } .review-tile-donut-wrap .review-tile-donut { width: 64px; height: 64px; margin: 0; } .review-breakdown-row { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; } .review-breakdown-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .review-breakdown-dot.win { background: var(--win); } .review-breakdown-dot.loss { background: var(--loss); } .review-breakdown-label { color: var(--text-muted); white-space: nowrap; } .review-breakdown-bar-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; min-width: 16px; } .review-breakdown-bar-fill { height: 100%; border-radius: 2px; } .review-breakdown-bar-fill.win { background: var(--win); } .review-breakdown-bar-fill.loss { background: var(--loss); } .review-breakdown-val { font-size: 0.68rem; font-weight: 700; white-space: nowrap; } .review-breakdown-val.win { color: var(--win); } .review-breakdown-val.loss { color: var(--loss); } /* Profit Factor / Avg Per Trade: mini bar-pair chart */ .review-tile-pf-bars { display: flex; align-items: flex-end; gap: 14px; height: 34px; margin: 4px 0 2px; } .review-tile-pf-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; } .review-tile-pf-bar { width: 100%; max-width: 46px; border-radius: 3px 3px 0 0; } .review-tile-pf-bar.win { background: var(--win); } .review-tile-pf-bar.loss { background: var(--loss); } .review-tile-pf-bar-col span { color: var(--text-muted); font-size: 0.6rem; white-space: nowrap; } .review-avg-bars { align-items: center; } .review-avg-bar-label { font-size: 0.64rem; font-weight: 700; } /* Profit Factor table */ .review-tile-table { width: 100%; border-collapse: collapse; font-size: 0.66rem; } .review-tile-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 2px 4px 4px 0; border-bottom: 1px solid var(--border-color); } .review-tile-table td { padding: 3px 4px 3px 0; white-space: nowrap; } .review-tile-table tbody tr { cursor: pointer; } .review-tile-table tbody tr:hover td:first-child { color: var(--accent-blue); } /* Best/Worst Day: performance rows */ .review-perf-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; cursor: pointer; } .review-perf-row:hover .review-perf-symbol { color: var(--accent-blue); } .review-perf-time { color: var(--text-muted); min-width: 40px; } .review-perf-symbol { flex: 1; font-weight: 600; } .review-tile-summary-bar-row { display: flex; align-items: center; gap: 8px; } .review-tile-summary-bar-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .review-tile-summary-bar-fill { height: 100%; border-radius: 3px; background: var(--win); } /* Worst Day: notes / lesson bullets */ .review-tile-bullets { margin: 0; padding-left: 14px; font-size: 0.68rem; color: var(--text-light); line-height: 1.45; } .review-tile-bullets a { color: var(--accent-blue); } /* Avg Per Trade: session rows */ .review-session-mini-row { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; } .review-session-mini-row span:nth-child(2) { flex: 1; color: var(--text-muted); } /* ==== Weekly Review tiles v4: interaction polish - animated fills, hover tooltips on every mini-viz, per-row hover states, and a corner expand button on each tile opening its full-breakdown modal. ==== */ .review-tile { position: relative; } .review-tile:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); } .review-tile-expand { position: absolute; top: 8px; right: 8px; background: none; border: none; padding: 3px 5px; color: var(--text-muted); font-size: 0.72rem; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease; z-index: 1; } .review-tile:hover .review-tile-expand { opacity: 1; } .review-tile-expand:hover { color: var(--accent-blue); transform: scale(1.2); } /* Clickable list rows: flicker-safe background hover (no transform) with a little bleed so the highlight doesn't hug the text. */ .review-gain-row, .review-perf-row, .review-breakdown-row { border-radius: 4px; margin: 0 -5px; padding: 2px 5px; transition: background 0.12s ease; } .review-breakdown-row { cursor: pointer; } .review-gain-row:hover, .review-perf-row:hover, .review-breakdown-row:hover { background: rgba(var(--accent-blue-rgb), 0.08); } .review-tile-table tbody td { transition: background 0.12s ease; } .review-tile-table tbody tr:hover td { background: rgba(var(--accent-blue-rgb), 0.08); } /* Sparkline: line draws in left-to-right, area fades up under it, and each cumulative point is an invisible hover dot feeding the shared tooltip. */ .review-tile-spark { cursor: pointer; } .review-spark-path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: rvDashIn 0.9s ease-out 0.15s forwards; } .review-spark-area { animation: rvFadeIn 0.7s ease 0.55s both; } .review-tile-spark-dot { fill: transparent; } .review-tile-spark-dot:hover { fill: var(--accent-blue); } /* Pie: pops in on render; slices swell out from the pie center on hover. */ .review-tile-donut-wrap { cursor: pointer; } .review-tile-donut-wrap .review-tile-donut { animation: rvPieIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s both; transform-origin: 50% 50%; } .review-pie-slice { transform-box: view-box; transform-origin: center; transition: transform 0.15s ease, filter 0.15s ease; } .review-pie-slice:hover { transform: scale(1.07); filter: brightness(1.15); } .review-tile-donut text { pointer-events: none; } /* Bars grow in from empty (horizontal fills and the vertical bar pairs). */ .review-gain-bar-fill, .review-breakdown-bar-fill, .review-tile-summary-bar-fill { animation: rvGrowW 0.7s cubic-bezier(0.22, 0.8, 0.32, 1) 0.2s both; } .review-tile-pf-bar { animation: rvGrowH 0.7s cubic-bezier(0.22, 0.8, 0.32, 1) 0.2s both; } .review-tile-pf-bar-col[data-heat-label] { cursor: default; } @keyframes rvGrowW { from { width: 0; } } @keyframes rvGrowH { from { height: 0; } } @keyframes rvFadeIn { from { opacity: 0; } } @keyframes rvDashIn { to { stroke-dashoffset: 0; } } @keyframes rvPieIn { from { transform: scale(0.4); opacity: 0; } } @media (max-width: 900px) { .review-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }