/* ═══════════════════════════════════════════════════════════════ 03_Portfolio_Fit/css/styles_comfort.css Plumbline Stage III — Portfolio Fit Brand Migration Phase 2 (dark + light theme) Consumes tokens from /assets/brand-tokens.css ═══════════════════════════════════════════════════════════════ */ /* --- Shared brand tokens (must load before this file in ) --- */ /*@import url('../../assets/brand-tokens.css');*/ /* ══════════════════════════════════════════════════════════════ §2.1 Bridge variables — theme-aware. RULES CONSUME THESE. Never write var(--ws-*) or var(--mkt-*) outside these blocks. ══════════════════════════════════════════════════════════════ */ [data-theme="dark"]{ --bg:var(--ws-bg); --bg2:var(--ws-surface); --card:var(--ws-surface); --card-hover:var(--ws-surface-2); --card-sel:rgba(255,106,26,.08); --border:var(--ws-border); --border-hover:var(--ws-border-hi); --border-sel:var(--pl-orange); --text:var(--ws-text-hi); --text2:var(--ws-text-dim); --text3:var(--ws-text-mute); --accent:var(--pl-orange); --accent2:var(--pl-orange-deep); --glow:rgba(255,106,26,.12); --brass:var(--pl-brass); --brass-deep:var(--pl-brass-deep); --brass-light:var(--pl-brass-light); --brass-glow:rgba(184,150,90,.14); --ok:var(--pl-pass); --ok-bg:rgba(138,191,155,.10); --ok-bd:rgba(138,191,155,.30); --warn:var(--pl-warn); --warn-bg:rgba(214,161,95,.10); --warn-bd:rgba(214,161,95,.30); --err:var(--pl-fail); --err-bg:rgba(201,120,120,.08); --err-bd:rgba(201,120,120,.30); --info:var(--pl-info); --info-bg:rgba(169,200,224,.10); --info-bd:rgba(169,200,224,.30); --scroll-track:var(--ws-bg); --scroll-thumb:var(--ws-border-hi); } [data-theme="light"]{ --bg:var(--mkt-bg); --bg2:var(--mkt-surface); --card:var(--mkt-surface); --card-hover:var(--mkt-surface-2); --card-sel:rgba(255,106,26,.08); --border:var(--mkt-line); --border-hover:#c9c0ac; --border-sel:var(--pl-orange); --text:var(--mkt-text); --text2:var(--mkt-text-dim); --text3:#7a6b55; /* was #8a99a8 (cool blue) — now warm brown */ --accent:var(--pl-orange-deep); --accent2:var(--pl-orange); --glow:rgba(209,78,16,.10); --brass:#6b4a12; /* was pl-brass-deep — now deep readable brown */ --brass-deep:#4a3208; --brass-light:var(--pl-brass); --brass-glow:rgba(255,106,26,.08); /* was cool brass — now orange-tinted */ --ok:#047857; --ok-bg:rgba(5,150,105,.08); --ok-bd:rgba(5,150,105,.25); --warn:#a06d1a; --warn-bg:rgba(214,161,95,.12); --warn-bd:rgba(214,161,95,.35); --err:#a13232; --err-bg:rgba(178,62,62,.08); --err-bd:rgba(178,62,62,.25); --info:#4a6a90; --info-bg:rgba(86,120,160,.08); --info-bd:rgba(86,120,160,.25); --scroll-track:var(--mkt-bg); --scroll-thumb:#c9c0ac; } /* ══════════════════════════════════════════════════════════════ Reset + base ══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{ height:100%; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:14px; line-height:1.5; overflow:hidden; transition:background .18s ease, color .18s ease; } ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:var(--scroll-track)} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px} a{color:var(--brass)} a:hover{color:var(--accent)} /* ══════════════════════════════════════════════════════════════ Layout ══════════════════════════════════════════════════════════════ */ #app{display:flex;flex-direction:column;height:100vh} #header{ background:var(--card); border-bottom:1px solid var(--border); padding:10px 20px; display:flex;align-items:center;justify-content:space-between; flex-shrink:0;gap:12px;flex-wrap:wrap; } /* Header brand cluster: shield + two-line wordmark */ .brand-cluster{display:flex;align-items:center;gap:14px} .brand-shield{width:44px;height:auto;flex-shrink:0} .wordmark{display:flex;flex-direction:column;line-height:1} .wordmark-1{ font-family:var(--font-display); font-weight:900; font-size:22px; letter-spacing:4px; color:var(--text); text-transform:uppercase; } .wordmark-2{ font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:3px; color:var(--brass); text-transform:uppercase; margin-top:2px; } /* Theme-aware shield "P" glyph */ [data-theme="dark"] .pl-p-glyph { fill: #edf2f7; } [data-theme="light"] .pl-p-glyph { fill: #14181D; } /* Subtitle after the wordmark */ #header .subtitle{ font-family:var(--font-mono); font-size:11px; color:var(--text2); letter-spacing:2px; text-transform:uppercase; } .vdiv{width:1px;height:20px;background:var(--border);flex-shrink:0} #header .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap} /* Header input labels */ .header-label{font-size:10px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;font-family:var(--font-mono)} /* Theme toggle button */ .theme-btn{ background:transparent; border:1px solid var(--border); color:var(--brass); width:32px;height:28px; border-radius:var(--radius-sm); cursor:pointer; font-size:14px; line-height:1; display:inline-flex;align-items:center;justify-content:center; transition:border-color .15s, color .15s, background .15s; } .theme-btn:hover{border-color:var(--brass);color:var(--accent);background:var(--brass-glow)} #body{display:flex;flex:1;overflow:hidden} /* ══════════════════════════════════════════════════════════════ Sidebar ══════════════════════════════════════════════════════════════ */ #sidebar{ width:260px; background:var(--card); border-right:1px solid var(--border); display:flex;flex-direction:column;flex-shrink:0;overflow:hidden; } #sidebar-header{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex;justify-content:space-between;align-items:center; flex-shrink:0; } .sidebar-title{ font-family:var(--font-display); font-size:12px; letter-spacing:3px; color:var(--brass); text-transform:uppercase; font-weight:700; } #active-count{ font-family:var(--font-mono); font-size:10px; color:var(--text3); letter-spacing:1.5px; text-transform:uppercase; } #strategy-list{overflow-y:auto;flex:1} .st-row{ display:flex;align-items:center;gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; } .st-row:hover{background:var(--card-hover)} .st-row.active{background:var(--card-sel);border-left:2px solid var(--accent);padding-left:14px} .st-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .st-info{flex:1;min-width:0} .st-name{ font-size:13px; font-weight:600; color:var(--text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .st-meta{ font-family:var(--font-mono); font-size:11px; color:var(--text2); margin-top:2px; display:flex;align-items:center;gap:4px; } .badge{ display:inline-block; padding:2px 7px; border-radius:2px; font-family:var(--font-mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; font-weight:600; } .badge-real{ background:var(--brass-glow); color:var(--brass); border:1px solid var(--brass); } .badge-demo{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); } /* Toggle switches (in strategy row) */ .toggle-btn{ width:28px;height:16px;border-radius:8px; border:none;cursor:pointer;position:relative;flex-shrink:0; transition:background .2s; } .toggle-btn::after{ content:"";position:absolute;top:2px;left:2px; width:12px;height:12px;border-radius:50%; background:var(--bg); transition:left .2s; } .toggle-btn.on{background:var(--accent)} .toggle-btn.on::after{left:14px} .toggle-btn.off{background:var(--border-hover)} .remove-btn{ background:none;border:none; color:var(--err);opacity:.55; cursor:pointer;font-size:16px;line-height:1;padding:0 2px; transition:opacity .15s; } .remove-btn:hover{opacity:1} #alloc-editor{ margin:8px 10px; padding:10px; background:var(--card-hover); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12px; } #alloc-editor label{color:var(--text2);display:block;margin-bottom:6px} #portfolio-summary{ margin:8px 10px 10px; padding:10px; background:var(--card-hover); border:1px solid var(--brass); border-radius:var(--radius-sm); flex-shrink:0; } #portfolio-summary .summ-title{ font-family:var(--font-display); font-size:11px;letter-spacing:2px; color:var(--brass); margin-bottom:8px; text-transform:uppercase; font-weight:700; } #portfolio-summary .summ-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .summ-item .sl{ font-family:var(--font-mono); font-size:11px;color:var(--text2); text-transform:uppercase;letter-spacing:1px; } .summ-item .sv{font-size:14px;font-weight:700;color:var(--text)} /* ══════════════════════════════════════════════════════════════ Main area + tabs ══════════════════════════════════════════════════════════════ */ #main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative} #tabs{ border-bottom:1px solid var(--border); display:flex;padding:0 14px; background:var(--card); flex-shrink:0;overflow-x:auto; } .tab{ background:none;border:none; border-bottom:2px solid transparent; cursor:pointer; padding:12px 18px; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; transition:all .15s; color:var(--text2); white-space:nowrap; } .tab.active{color:var(--accent);border-bottom-color:var(--accent)} .tab:hover:not(.active){color:var(--text)} #content{flex:1;overflow:auto;padding:16px} /* ══════════════════════════════════════════════════════════════ Panels ══════════════════════════════════════════════════════════════ */ .panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:12px; } .panel-header{ padding:12px 18px; border-bottom:1px solid var(--border); font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:2.5px; color:var(--brass); text-transform:uppercase; } .panel-body{padding:16px} /* ══════════════════════════════════════════════════════════════ Stats grid ══════════════════════════════════════════════════════════════ */ .stats-grid{display:grid;gap:8px;margin-bottom:12px} .stat-card{ background:var(--card-hover); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 18px; } .stat-card.accent{ border-color:var(--brass); background:var(--brass-glow); } .stat-label{ font-family:var(--font-mono); font-size:11px;letter-spacing:1.2px; text-transform:uppercase; color:var(--text2); margin-bottom:6px; } .stat-value{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--text); line-height:1.1; letter-spacing:1px; } .stat-sub{ font-family:var(--font-mono); font-size:11px; color:var(--text3); margin-top:4px; } .pos{color:var(--ok)!important} .neg{color:var(--err)!important} /* ══════════════════════════════════════════════════════════════ Buttons ══════════════════════════════════════════════════════════════ */ .btn{ background:var(--card-hover); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 14px; font-family:var(--font-sans); font-size:12px; cursor:pointer; transition:all .15s; letter-spacing:1px; } .btn:hover{border-color:var(--brass);background:var(--brass-glow);color:var(--brass)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn-primary{ background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:10px 20px; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .15s; } .btn-primary:hover{background:var(--accent2);box-shadow:0 0 0 3px var(--glow)} .btn-primary:disabled{background:var(--border);color:var(--text3);cursor:not-allowed;box-shadow:none} /* "+ ADD STRATEGY" drop zone in sidebar */ .add-strategy-zone{ margin:12px; padding:22px 16px; border:2px dashed var(--brass); border-radius:var(--radius-sm); text-align:center; cursor:pointer; transition:background .15s, border-color .15s; color:var(--brass); } .add-strategy-zone:hover, .add-strategy-zone.drag-over{ background:var(--brass-glow); border-color:var(--accent); color:var(--accent); } .add-strategy-zone .add-title{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; } .add-strategy-zone .add-sub{ font-family:var(--font-mono); font-size:10px; color:var(--text3); margin-top:6px; letter-spacing:1px; } /* ══════════════════════════════════════════════════════════════ Inputs ══════════════════════════════════════════════════════════════ */ input[type=date],input[type=number],input[type=text],select{ background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:6px 10px; font-family:var(--font-mono); font-size:13px; } input:focus,select:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 2px var(--brass-glow); } input[type=range]{ -webkit-appearance:none; width:100%;height:3px;border-radius:2px; outline:none;cursor:pointer; background:var(--border); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:12px;height:12px;border-radius:50%; background:var(--accent); cursor:pointer; } /* ══════════════════════════════════════════════════════════════ Tables ══════════════════════════════════════════════════════════════ */ .data-table{width:100%;border-collapse:collapse;font-size:13px} .data-table th{ padding:10px 14px; font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px; color:var(--text2); text-transform:uppercase; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer;user-select:none; background:var(--card); } .data-table th:hover{color:var(--text)} .data-table th.sorted{color:var(--accent)} .data-table td{ padding:12px 16px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--text); } .data-table tr:hover td{background:var(--card-hover)} /* ══════════════════════════════════════════════════════════════ Drop zones (generic — used by CSV import etc.) ══════════════════════════════════════════════════════════════ */ .drop-zone{ border:2px dashed var(--brass); border-radius:var(--radius-sm); padding:30px 20px; text-align:center; transition:all .2s; cursor:pointer; color:var(--text2); } .drop-zone:hover,.drop-zone.drag-over{ border-color:var(--accent); background:var(--brass-glow); color:var(--brass); } /* ══════════════════════════════════════════════════════════════ SVG charts ══════════════════════════════════════════════════════════════ */ .chart-wrap{width:100%;overflow:hidden} svg text{font-family:var(--font-mono);fill:var(--text2)} /* ══════════════════════════════════════════════════════════════ Chart tooltip ══════════════════════════════════════════════════════════════ */ #chart-tooltip{ position:fixed; background:var(--card); border:1px solid var(--brass); border-radius:var(--radius-sm); padding:12px 16px; font-family:var(--font-mono); font-size:12px; color:var(--text); pointer-events:none; display:none;z-index:999;line-height:1.6; box-shadow:0 6px 20px rgba(0,0,0,.35); } /* ══════════════════════════════════════════════════════════════ Spinner ══════════════════════════════════════════════════════════════ */ @keyframes spin{to{transform:rotate(360deg)}} .spinner{ display:inline-block;width:13px;height:13px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle;margin-right:6px; } /* ══════════════════════════════════════════════════════════════ Fade ══════════════════════════════════════════════════════════════ */ @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .fade-in{animation:fadeIn .2s ease forwards} /* ══════════════════════════════════════════════════════════════ Correlation matrix Positive values → brass gradient Negative values → warm red gradient Colors applied by /js/corr-recolor.js after render. ══════════════════════════════════════════════════════════════ */ .corr-cell{ width:58px;height:34px; display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono); font-size:12px; border-radius:2px; margin:2px; color:var(--text); } /* Fallback color band classes (applied by corr-recolor.js) */ .corr-p1{background:var(--pl-brass-light);color:#3b2f14} .corr-p2{background:var(--pl-brass);color:#1d1608} .corr-p3{background:var(--pl-brass-deep);color:#faf7f1} .corr-n1{background:rgba(201,120,120,.30);color:var(--text)} .corr-n2{background:rgba(178,62,62,.55);color:#fff} .corr-n3{background:rgba(140,30,30,.85);color:#fff} .corr-z{background:transparent;color:var(--text3)} .corr-diag{background:var(--card-hover);color:var(--text)} /* Correlation legend swatches */ .corr-legend{ display:inline-flex;align-items:center;gap:2px; font-family:var(--font-mono);font-size:11px;color:var(--text2); } .corr-legend .sw{width:16px;height:14px;border-radius:2px;display:inline-block} /* Slight desaturation of brass in light mode for corr matrix contrast */ [data-theme="light"] .corr-p2{background:#cdb589;color:#3b2f14} [data-theme="light"] .corr-p3{background:var(--pl-brass);color:#faf7f1} /* ══════════════════════════════════════════════════════════════ Month heatmap cells ══════════════════════════════════════════════════════════════ */ .month-cell{ width:34px;height:24px; display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-mono); font-size:11px;border-radius:2px; cursor:default;transition:transform .1s; } .month-cell:hover{transform:scale(1.18);z-index:1;position:relative} /* ══════════════════════════════════════════════════════════════ Pagination ══════════════════════════════════════════════════════════════ */ .pagination{ padding:12px 16px; border-top:1px solid var(--border); display:flex;gap:8px;align-items:center;justify-content:center; } /* ══════════════════════════════════════════════════════════════ Status messages ══════════════════════════════════════════════════════════════ */ .msg-ok{ padding:12px 16px; background:var(--ok-bg); border:1px solid var(--ok-bd); border-radius:var(--radius-sm); margin-bottom:10px;font-size:13px;color:var(--ok); display:flex;justify-content:space-between;align-items:center; } .msg-err{ padding:12px 16px; background:var(--err-bg); border:1px solid var(--err-bd); border-radius:var(--radius-sm); margin-bottom:10px;font-size:13px;color:var(--err); display:flex;justify-content:space-between;align-items:flex-start;gap:10px; } .msg-err pre{white-space:pre-wrap;font-family:var(--font-mono);margin:0;font-size:12px} .close-msg{ background:none;border:none;cursor:pointer; font-size:16px;line-height:1;flex-shrink:0;color:inherit; } /* ══════════════════════════════════════════════════════════════ Allocation bar ══════════════════════════════════════════════════════════════ */ .alloc-bar-wrap{display:flex;align-items:center;gap:6px} .alloc-bar-bg{ width:40px;height:4px; background:var(--border); border-radius:2px;overflow:hidden; } .alloc-bar-fill{height:100%;border-radius:2px;background:var(--brass)} /* ══════════════════════════════════════════════════════════════ Responsive ══════════════════════════════════════════════════════════════ */ @media(max-width:800px){ #sidebar{width:200px} .stats-grid{grid-template-columns:repeat(2,1fr)!important} .wordmark-1{font-size:18px;letter-spacing:3px} .wordmark-2{font-size:12px} } /* ══════════════════════════════════════════════════════════════ Commission toggle (P1-FIX-1) ══════════════════════════════════════════════════════════════ */ .comm-toggle-wrap{display:flex;align-items:center;gap:6px} .comm-toggle-label{ position:relative;display:inline-block; width:28px;height:16px;cursor:pointer; } .comm-toggle-label input{opacity:0;width:0;height:0} .comm-slider{ position:absolute;top:0;left:0;right:0;bottom:0; background:var(--border-hover); border-radius:8px;transition:background .2s; } .comm-slider::before{ content:"";position:absolute;top:2px;left:2px; width:12px;height:12px;border-radius:50%; background:var(--text3); transition:left .2s, background .2s; } .comm-toggle-label input:checked+.comm-slider{background:var(--brass)} .comm-toggle-label input:checked+.comm-slider::before{ left:14px; background:var(--bg); } /* ══════════════════════════════════════════════════════════════ Allocation warning (P1-FIX-2) ══════════════════════════════════════════════════════════════ */ .alloc-warning{ margin:6px 10px; padding:8px 10px; background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:var(--radius-sm); font-size:11px;color:var(--warn); line-height:1.5; display:flex;align-items:flex-start;gap:4px; flex-shrink:0; } /* ══════════════════════════════════════════════════════════════ Export bar (P3-FIX-1) ══════════════════════════════════════════════════════════════ */ .export-bar{ display:flex;align-items:center;gap:8px; margin-bottom:12px; padding:8px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); flex-wrap:wrap; } .export-bar-label{ font-family:var(--font-mono); font-size:11px;letter-spacing:2px; color:var(--text2); text-transform:uppercase; margin-right:4px;flex-shrink:0; } .export-btn{ font-size:12px;padding:5px 12px; display:inline-flex;align-items:center;gap:5px; letter-spacing:1px; } .export-btn:hover{border-color:var(--brass);color:var(--brass)} /* ══════════════════════════════════════════════════════════════ Monte Carlo controls (P3-FIX-2) ══════════════════════════════════════════════════════════════ */ .mc-controls{ display:flex;align-items:center;gap:10px; margin-bottom:12px; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); flex-wrap:wrap; } .mc-controls label{ font-family:var(--font-mono); font-size:11px;letter-spacing:1.5px; color:var(--text2); text-transform:uppercase; } .btn-mc-run{ padding:6px 16px!important; font-size:12px!important; letter-spacing:1.5px!important; } .mc-legend{ display:flex;gap:16px; margin-top:10px; font-family:var(--font-mono); font-size:12px;color:var(--text2); flex-wrap:wrap; } .mc-legend-item{display:flex;align-items:center;gap:6px} .mc-legend-swatch{width:22px;height:10px;border-radius:2px;flex-shrink:0} /* ══════════════════════════════════════════════════════════════ Loading overlay ══════════════════════════════════════════════════════════════ */ #loading-overlay{ position:absolute;top:0;left:0;right:0;bottom:0; background:color-mix(in srgb, var(--bg) 70%, transparent); display:none;align-items:center;justify-content:center; flex-direction:column;gap:8px; z-index:50;backdrop-filter:blur(2px); font-family:var(--font-mono); font-size:13px;letter-spacing:2px;color:var(--text2); } #loading-overlay .spinner{ width:24px;height:24px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; } /* ══════════════════════════════════════════════════════════════ Footer (brand motto) ══════════════════════════════════════════════════════════════ */ #footer-motto{ padding:8px 16px; border-top:1px solid var(--border); background:var(--card); font-family:var(--font-serif); font-style:italic; font-size:12px; color:var(--brass); text-align:center; flex-shrink:0; } /* ══════════════════════════════════════════════════════════════ Print (screen chrome hide only; full print styles in styles_print.css) ══════════════════════════════════════════════════════════════ */ @media print{ #loading-overlay{display:none!important} body{background:#fff!important;color:#111!important;overflow:visible!important;font-size:13px} #header,#sidebar,#tabs,.export-bar,.mc-controls,.btn-primary,.toggle-btn,.remove-btn,.pagination,.drop-zone,.alloc-warning,.comm-toggle-wrap,.theme-btn,#footer-motto{display:none!important} #app{display:block!important;height:auto!important} #body{display:block!important;overflow:visible!important} #main{overflow:visible!important} #content{overflow:visible!important;padding:10px!important} .panel{border:1px solid #ccc!important;break-inside:avoid;page-break-inside:avoid;background:#fff!important} .panel-header{color:#333!important;border-color:#ccc!important;background:#f5f5f5!important} .panel-body{background:#fff!important} .stat-card{border:1px solid #ccc!important;background:#f9f9f9!important} .stat-label{color:#666!important} .stat-value{color:#111!important} .pos{color:#059669!important} .neg{color:#b23e3e!important} .data-table th{color:#333!important;border-color:#ccc!important;background:#f5f5f5!important} .data-table td{border-color:#eee!important;color:#111!important} .data-table tr:hover td{background:transparent!important} svg text{fill:#333!important} .chart-wrap,.panel{margin-bottom:8px!important} #chart-tooltip{display:none!important} } /* Monospace for data values */ .data-table td,.stat-value,.summ-item .sv,#chart-tooltip .val{font-family:var(--font-mono)} /* ═══════════════════════════════════════════════════════════════ LIGHT MODE POLISH — added 2026-07-17 Fixes: pale strategy names, cool blue muted text, dark navy banners leaking through from dark-mode inline styles, and low overall orange presence. Adds orange accents to balance the warm cream palette without touching the dark theme. All rules are [data-theme="light"] scoped — dark mode is untouched. ═══════════════════════════════════════════════════════════════ */ /* ── Strategy name in sidebar — force strong contrast ── NOTE: sidebar.js sets inline style="color:#e0eaf5" or "#7a94b0" on the name element. Inline styles beat regular CSS, so we MUST use !important here. This is a JS-writes-hardcoded-hex problem. */ [data-theme="light"] .st-name{ color:#1a1410 !important; font-weight:700; } [data-theme="light"] .st-row .st-name{color:#1a1410 !important} [data-theme="light"] .st-row.active .st-name{color:var(--accent) !important} /* Disabled strategies — dim but still readable */ [data-theme="light"] .st-row:has(.toggle-btn.off) .st-name{ color:#7a6b55 !important; font-weight:500; } /* ── Links (strategy names in tables render as ) ── */ [data-theme="light"] a{color:var(--accent)} [data-theme="light"] a:hover{color:var(--accent2);text-decoration:underline} /* ── Trade log strategy column: force dark, orange on hover ── */ [data-theme="light"] .data-table td{color:#1a1410} [data-theme="light"] .data-table td a{color:var(--accent);font-weight:600} /* ── Panel headers → orange accent ── */ [data-theme="light"] .panel-header{color:var(--accent)} /* ── Sidebar title, active count, portfolio summary title → orange ── */ [data-theme="light"] .sidebar-title{color:var(--accent)} [data-theme="light"] #portfolio-summary .summ-title{color:var(--accent)} [data-theme="light"] #portfolio-summary{ border-color:var(--accent); background:rgba(255,106,26,.05); } /* ── Wordmark "Stage III:" subtitle → orange for brand pop ── */ [data-theme="light"] .wordmark-2{color:var(--accent)} /* ── Header subtitle "// PORTFOLIO FIT · NT8 MULTI-STRATEGY BACKTESTER" ── */ [data-theme="light"] #header .subtitle{color:#5a4a35} /* ── Header input labels (CAPITAL $, TARGET %) → darker for legibility ── */ [data-theme="light"] .header-label{color:#5a4a35} /* ── Tabs: darker inactive text, orange active (already orange) ── */ [data-theme="light"] .tab{color:#5a4a35} [data-theme="light"] .tab:hover:not(.active){color:#1a1410} /* ── Footer motto → orange ── */ [data-theme="light"] #footer-motto{color:var(--accent)} /* ── "+ ADD STRATEGY" drop zone → orange border/text ── */ [data-theme="light"] .add-strategy-zone{ border-color:var(--accent); color:var(--accent); } /* ── Section labels ("EXPORT", "FILTER:", section h-labels) ── */ [data-theme="light"] .export-bar-label, [data-theme="light"] .mc-controls label{color:#5a4a35} /* ── Dark navy banner override (SPY source, Marginal performance alert) ── benchmark_ui.js uses C.bg = '#0f1520' for banner backgrounds. renderers.js and other files use #1a2535, #0f1520, #101419. Catch them all here. */ [data-theme="light"] [style*="background:#0f1520"], [data-theme="light"] [style*="background: #0f1520"], [data-theme="light"] [style*="background:#101419"], [data-theme="light"] [style*="background: #101419"], [data-theme="light"] [style*="background:#0a0e12"], [data-theme="light"] [style*="background: #0a0e12"], [data-theme="light"] [style*="background:#0f1419"], [data-theme="light"] [style*="background: #0f1419"], [data-theme="light"] [style*="background:#14181d"], [data-theme="light"] [style*="background: #14181d"], [data-theme="light"] [style*="background:#1a2535"], [data-theme="light"] [style*="background: #1a2535"]{ background:rgba(255,106,26,.06)!important; color:#1a1410!important; border:1px solid var(--accent)!important; border-radius:var(--radius-sm)!important; } /* ── Hardcoded dark-mode text colors leaking into light mode ── The JS files (renderers.js, benchmark_ui.js, sidebar.js) set inline style="color:#e0eaf5" etc. These are white/pale-blue values invisible on cream backgrounds. Force them dark in light mode via attribute selector match. Handles both spaced and unspaced formats browsers may normalize inline styles to. */ [data-theme="light"] [style*="color:#e0eaf5"], [data-theme="light"] [style*="color: #e0eaf5"], [data-theme="light"] [style*="color:#c8d6e5"], [data-theme="light"] [style*="color: #c8d6e5"]{ color:#1a1410 !important; } [data-theme="light"] [style*="color:#90a8c0"], [data-theme="light"] [style*="color: #90a8c0"], [data-theme="light"] [style*="color:#7a94b0"], [data-theme="light"] [style*="color: #7a94b0"]{ color:#5a4a35 !important; } /* ── Nested or inside dark-banner-overridden containers ── benchmark_ui.js writes html: 'Reading:' inside dark boxes. Once we recolor the box, the b becomes invisible. Force any bold-inside-anything to a readable orange. */ [data-theme="light"] b[style*="color:#e0eaf5"], [data-theme="light"] b[style*="color: #e0eaf5"]{ color:var(--accent) !important; } /* ── BENCHMARK ANALYSIS header text ── renderBenchmark writes a header
which the generic color override above already catches. This is here for defense in depth if a nested wrapper obscures the match. */ [data-theme="light"] div[style*="letterSpacing"][style*="e0eaf5"], [data-theme="light"] div[style*="letter-spacing"][style*="e0eaf5"]{ color:#1a1410 !important; } /* ── "How to export from NinjaTrader 8" method sections ── Method headers rendered by import.js likely use inline pale colors. Make bold/strong text orange and general panel-body text dark. */ [data-theme="light"] .panel-body{color:#1a1410} [data-theme="light"] .panel-body strong, [data-theme="light"] .panel-body b{color:var(--accent) !important} [data-theme="light"] .panel-body ol, [data-theme="light"] .panel-body ul, [data-theme="light"] .panel-body li, [data-theme="light"] .panel-body p{color:#1a1410 !important} /* ── Sub-note / italic explanation text below method lists ── "This gives the richest data..." lines etc. */ [data-theme="light"] .panel-body em, [data-theme="light"] .panel-body i{color:#5a4a35 !important} /* ── Data table headers → warm dark for readability ── */ [data-theme="light"] .data-table th{color:#5a4a35;background:var(--card)} [data-theme="light"] .data-table th.sorted{color:var(--accent)} /* ── Stat card accent variant → orange border/tint ── */ [data-theme="light"] .stat-card.accent{ border-color:var(--accent); background:rgba(255,106,26,.06); } /* ── Real badge → orange in light mode (was brass) ── */ [data-theme="light"] .badge-real{ background:rgba(255,106,26,.08); color:var(--accent); border-color:var(--accent); } /* ── Drop zones (CSV import) → orange accent ── */ [data-theme="light"] .drop-zone{ border-color:var(--accent); color:var(--brass); } [data-theme="light"] .drop-zone:hover, [data-theme="light"] .drop-zone.drag-over{ border-color:var(--accent2); background:rgba(255,106,26,.06); color:var(--accent); } /* ── Header vertical dividers → subtle orange tint ── */ [data-theme="light"] .vdiv{background:rgba(255,106,26,.20)} /* ── SVG chart tick labels → readable warm gray ── */ [data-theme="light"] svg text{fill:#5a4a35} /* ── Chart tooltip shadow toned down (dark-mode shadow too heavy here) ── */ [data-theme="light"] #chart-tooltip{ box-shadow:0 4px 12px rgba(0,0,0,.12); border-color:var(--accent); } /* ── Toggle knob visibility (--bg is near-white → invisible on brass track) ── */ [data-theme="light"] .toggle-btn::after{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.20); } [data-theme="light"] .comm-toggle-label input:checked+.comm-slider::before{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.20); } /* ── Import banner "✓ Imported ... — 243 trades" ── Rendered as msg-ok class. Already uses --ok-bg, which we brightened. Force the text darker for readability on light green tint. */ [data-theme="light"] .msg-ok{color:#065f4a !important} [data-theme="light"] .msg-err{color:#8b2a2a !important} /* ── Portfolio Summary sidebar block: labels + values ── sidebar.js sets summ-item .sl and .sv via CSS class. The CSS defaults use var(--text2) and var(--text) which are theme-aware already, but any inline color overrides need to be beaten. */ [data-theme="light"] .summ-item .sl{color:#5a4a35 !important} [data-theme="light"] .summ-item .sv{color:#1a1410 !important} /* ── Stat card values in light mode ── The .stat-value class uses var(--text) — should be dark. But some JS renderers add inline color on the stat-value span. Force it. */ [data-theme="light"] .stat-value{color:#1a1410} [data-theme="light"] .stat-value.pos{color:var(--ok) !important} [data-theme="light"] .stat-value.neg{color:var(--err) !important} /* ── Trade log Strategy column dots + name (rendered via inline span) ── The dot uses inline background:{color} which is fine. The strategy name text renders as a plain without explicit color, inheriting from the td. Force td text dark. */ [data-theme="light"] .data-table td span{color:inherit} /* ── Correlation matrix cells: force dark text on light bands ── */ [data-theme="light"] .corr-cell{color:#1a1410} [data-theme="light"] .corr-n2, [data-theme="light"] .corr-n3{color:#fff} /* keep white on deep red */ /* ── Month heatmap cells: hardcoded inline colors need dark override ── */ [data-theme="light"] .month-cell{color:#1a1410} /* ── Correlation legend (bottom of matrix) ── */ [data-theme="light"] .corr-legend{color:#5a4a35 !important} /* ── Loading overlay ("UPDATING…") ── */ [data-theme="light"] #loading-overlay{color:#5a4a35} /* ── Pagination "Page X of Y" text ── */ [data-theme="light"] .pagination span{color:#5a4a35 !important}