/* ── Light mode — blanket override ────────────────────────────────────── */

.light-mode,
.light-mode #_pages_content,
.light-mode #_pages_content * {
    --tw-bg: #ffffff;
    --tw-bg2: #f0f3fa;
    --tw-bg3: #e0e3eb;
    --tw-text: #131722;
    --tw-dim: #787b86;
    --tw-border: #e0e3eb;
}

/* Blanket: every single element in the app */
.light-mode #_pages_content div,
.light-mode #_pages_content span,
.light-mode #_pages_content p,
.light-mode #_pages_content label,
.light-mode #_pages_content li,
.light-mode #_pages_content h1,
.light-mode #_pages_content h2,
.light-mode #_pages_content h3,
.light-mode #_pages_content h4,
.light-mode #_pages_content pre,
.light-mode #_pages_content code {
    color: #131722 !important;
    border-color: #e0e3eb !important;
}
/* Table cells: only set color if not already colored (accent colors) */
.light-mode #_pages_content table,
.light-mode #_pages_content tr {
    border-color: #e0e3eb !important;
}
.light-mode #_pages_content th {
    color: #787b86 !important;
    border-color: #e0e3eb !important;
}
.light-mode #_pages_content td {
    border-color: #f0f3fa !important;
}
/* td with dark-mode text colors → make readable */
.light-mode #_pages_content td[style*="color: #d1d4dc"],
.light-mode #_pages_content td[style*="color:#d1d4dc"] { color: #131722 !important; }
.light-mode #_pages_content td[style*="color: #c8ccd4"],
.light-mode #_pages_content td[style*="color:#c8ccd4"] { color: #131722 !important; }
.light-mode #_pages_content td[style*="color: #4c525e"],
.light-mode #_pages_content td[style*="color:#4c525e"] { color: #787b86 !important; }
.light-mode #_pages_content td[style*="color: #787b86"],
.light-mode #_pages_content td[style*="color:#787b86"] { color: #9598a1 !important; }
.light-mode #_pages_content td[style*="color: #6a7080"],
.light-mode #_pages_content td[style*="color:#6a7080"] { color: #9598a1 !important; }
.light-mode #_pages_content td:not([style*="color"]) { color: #131722 !important; }
/* Accent colors on td — adjust for light bg */
.light-mode #_pages_content td[style*="#26a69a"] { color: #089981 !important; }
.light-mode #_pages_content td[style*="#ef5350"] { color: #f23645 !important; }
.light-mode #_pages_content td[style*="#4fc3f7"] { color: #2962ff !important; }
.light-mode #_pages_content td[style*="#f9ca24"] { color: #d97706 !important; }
/* Links */
.light-mode #_pages_content a:not([style*="color"]) { color: #2962ff !important; }

/* Backgrounds: reset ALL to white/transparent */
.light-mode #_pages_content div {
    background: transparent !important;
}

/* Main app wrapper */
.light-mode { background: #f0f3fa !important; }
.light-mode #_pages_content { background: #f0f3fa !important; }
.light-mode #_pages_content > div { background: #f0f3fa !important; }
.light-mode #_pages_content > div > div { background: #f0f3fa !important; }

/* Top bar (EURUSD, dates, buttons) */
.light-mode #top-bar { background: #ffffff !important; border-bottom: 1px solid #e0e3eb !important; }
.light-mode #top-bar div { background: transparent !important; }
.light-mode #top-bar span { color: #131722 !important; }
.light-mode #top-bar .Select-control { background: #f0f3fa !important; }

/* Chart container + indicator sub-panels */
.light-mode #upper-section { background: #ffffff !important; }
.light-mode #main-chart-wrap { background: #ffffff !important; }
.light-mode #lw-chart-container { background: #ffffff !important; }
.light-mode #lw-panels-container { background: #ffffff !important; }
.light-mode .tv-lightweight-charts { background: #ffffff !important; }

/* Bottom panels */
.light-mode #panel1 { background: #ffffff !important; }
.light-mode #panel2 { background: #ffffff !important; }
.light-mode #panel2 > div { background: #ffffff !important; }
.light-mode #panel2 div { background: #ffffff !important; }
.light-mode #bottom-row { background: #ffffff !important; }
.light-mode #bottom-collapse-strip { background: #e0e3eb !important; }
.light-mode #drag-corner { background: #e0e3eb !important; }
.light-mode #trade-log-panel { background: #ffffff !important; }

/* Stat cards */
.light-mode .stat-card {
    background: #f7f8fb !important;
    border: 1px solid #e0e3eb !important;
}
.light-mode .stat-card [id^="stat-"] {
    color: #131722 !important;
}
.light-mode .stat-card .stat-label {
    color: #787b86 !important;
}
.light-mode #stat-last-updated {
    background: #f0f3fa !important;
    color: #787b86 !important;
}

/* Trade stats content */
.light-mode #trade-stats-content { background: #ffffff !important; }
.light-mode #trade-stats-content div { background: #ffffff !important; }
.light-mode #trade-stats-content table { background: #ffffff !important; }
.light-mode #trade-stats-content td {
    background: transparent !important;
    color: #131722 !important;
    border-bottom-color: #f0f3fa !important;
}
.light-mode #trade-stats-content th {
    background: transparent !important;
    color: #787b86 !important;
    border-bottom-color: #e0e3eb !important;
}
.light-mode #trade-stats-content tr {
    background: transparent !important;
    border-bottom-color: #f0f3fa !important;
}
/* Highlighted rows */
.light-mode #trade-stats-content tr[style*="#252a38"] {
    background: #f7f8fb !important;
}
.light-mode #stats-table-tt { background: #ffffff !important; }
.light-mode #stats-table-ls { background: #ffffff !important; }
.light-mode #stats-table-tt div { background: #ffffff !important; }
.light-mode #stats-table-ls div { background: #ffffff !important; }

/* Summary strip (net profit, starting capital, ending balance) */
.light-mode #trade-stats-content div[style*="flex"] div[style*="#2a2e39"] {
    background: #f0f3fa !important;
}

/* Live signal card */
.light-mode #live-signal-card { background: #ffffff !important; }
.light-mode #live-signal-card div { background: #ffffff !important; }

/* Deployed models + signal log */
.light-mode #deployed-models-list { background: #f8f9fb !important; }
.light-mode #signal-log-content { background: #f0f2f5 !important; border-color: #dde1e8 !important; }

/* Prediction P&L bar */
.light-mode #pred-pnl-bar { background: #f0f3fa !important; }

/* Stat cards — light grey bg */
.light-mode #stat-total-ret,
.light-mode #stat-sharpe-strat,
.light-mode #stat-mdd,
.light-mode #stat-n-trades {
    font-weight: 600 !important;
}
.light-mode #stat-total-ret + div,
.light-mode #stat-total-ret ~ div,
.light-mode #stat-last-updated {
    color: #787b86 !important;
}

/* Grey panel backgrounds (cards, separators, strips) */
.light-mode #pred-pnl-bar { background: #f0f3fa !important; }

/* ── Rounded containers (Colab-style) ─────────────────────────────── */
#panel1 { border-radius: 8px 0 0 0; }
#panel2 { border-radius: 0 8px 0 0; }
#bottom-collapse-strip { border-radius: 0; }
#drag-corner { border-radius: 0; }
.stat-card { border-radius: 10px !important; }
#trade-log-panel { border-radius: 10px; }
#chat-panel { border-radius: 14px !important; }

/* Tabs — rounded top */
.tab { border-radius: 8px 8px 0 0 !important; }
.tab--selected { border-radius: 8px 8px 0 0 !important; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.light-mode button {
    color: #131722 !important;
    background-color: #f0f3fa !important;
    border-color: #e0e3eb !important;
}
.light-mode button:hover {
    background-color: #e0e3eb !important;
}
/* Colored buttons — keep their colors */
.light-mode #share-open { background: #2962ff !important; color: #fff !important; }
.light-mode #chat-toggle { background: #2962ff !important; color: #fff !important; }
.light-mode #chat-send { background: #2962ff !important; color: #fff !important; }
.light-mode #sb-run-btn { background: #089981 !important; color: #fff !important; }
.light-mode #sb-cancel-btn { background: #f23645 !important; color: #fff !important; }
.light-mode #ind-custom-submit { background: #2962ff !important; color: #fff !important; }
.light-mode #sb-generate-btn { background: #2962ff !important; color: #fff !important; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.light-mode .tab { background: #f0f3fa !important; color: #787b86 !important; }
.light-mode .tab--selected { background: #ffffff !important; color: #131722 !important; border-bottom: 2px solid #2962ff !important; }
.light-mode .tab-container, .light-mode .tab-parent { background: #f0f3fa !important; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.light-mode input,
.light-mode textarea,
.light-mode select {
    background: #ffffff !important;
    color: #131722 !important;
    border: 1px solid #e0e3eb !important;
}
.light-mode input::placeholder,
.light-mode textarea::placeholder { color: #9598a1 !important; }
.light-mode input:focus,
.light-mode textarea:focus { border-color: #2962ff !important; }

/* ── Dropdowns ───────────────────────────────────────────────────────── */
.light-mode .Select-control { background: #ffffff !important; border-color: #e0e3eb !important; }
.light-mode .Select-value-label { color: #131722 !important; }
.light-mode .Select-placeholder { color: #9598a1 !important; }
.light-mode .Select-menu-outer,
.light-mode .Select-menu,
.light-mode .VirtualizedSelectOption { background: #ffffff !important; color: #131722 !important; }
.light-mode .VirtualizedSelectFocusedOption { background: #f0f3fa !important; }
.light-mode .Select-arrow { border-top-color: #787b86 !important; }

/* ── Plotly charts ───────────────────────────────────────────────────── */
.light-mode .js-plotly-plot .plotly .main-svg { background: #ffffff !important; }
.light-mode .js-plotly-plot .plotly .bg { fill: #ffffff !important; }
.light-mode .js-plotly-plot .plotly text { fill: #787b86 !important; }
.light-mode .js-plotly-plot .plotly .gridlayer line { stroke: #f0f3fa !important; }
.light-mode .js-plotly-plot .plotly .zerolinelayer line { stroke: #e0e3eb !important; }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
.light-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
.light-mode ::-webkit-scrollbar-track { background: transparent; }
.light-mode ::-webkit-scrollbar-thumb { background: #c8ccd4; border-radius: 3px; }

/* ── Trade log ───────────────────────────────────────────────────────── */
.light-mode #trade-log-panel { background: #ffffff !important; }
.light-mode #trade-log-panel div { background: #ffffff !important; }
.light-mode #trade-log-table { background: #ffffff !important; }
.light-mode #trade-log-table table { background: #ffffff !important; }
.light-mode #trade-log-table thead { background: #f7f8fb !important; }
.light-mode #trade-log-table thead th {
    background: #f7f8fb !important;
    color: #787b86 !important;
}
.light-mode #trade-log-table tbody tr {
    background: #ffffff !important;
    border-bottom: 1px solid #f0f3fa !important;
}
.light-mode #trade-log-table tbody tr:nth-child(even) {
    background: #f9fafb !important;
}
.light-mode tr.tl-row:hover { background: #f0f3fa !important; }
/* Trade log row accent colors preserved via td:not([style*="color"]) above */

/* ── Chat panel ──────────────────────────────────────────────────────── */
.light-mode #chat-panel {
    background: #ffffff !important;
    border: 1px solid #e0e3eb !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* ── Accent colors — slightly adjusted for light bg ──────────────────── */
.light-mode .dash-cell div { color: #131722 !important; }

/* Green (profit/buy) — darker for light bg readability */
.light-mode [style*="color: #26a69a"],
.light-mode [style*="color:#26a69a"] { color: #089981 !important; }
/* Red (loss/sell) */
.light-mode [style*="color: #ef5350"],
.light-mode [style*="color:#ef5350"] { color: #f23645 !important; }
/* Blue accents */
.light-mode [style*="color: #4fc3f7"],
.light-mode [style*="color:#4fc3f7"] { color: #2962ff !important; }
/* Yellow/gold */
.light-mode [style*="color: #f9ca24"],
.light-mode [style*="color:#f9ca24"] { color: #f59e0b !important; }

/* Dim text — ensure readability */
.light-mode [style*="color: #4c525e"],
.light-mode [style*="color:#4c525e"] { color: #787b86 !important; }
.light-mode [style*="color: #787b86"],
.light-mode [style*="color:#787b86"] { color: #9598a1 !important; }