/* P&L investor chart colors — shared between Portal and Client.
   This file is kept identical in both projects (copy-paste safe).
   Used by investor-charts.js via CSS custom properties. */

:root {
    --tooltip-bg: #1a2035;
    --tooltip-title: #e2e8f0;
    --tooltip-body: #94a3b8;
    --tooltip-border: #1e293b;
    --grid-line: rgba(30,41,59,0.5);
    --chart-tick: #94a3b8;
    --pnl-positive: #4ade80;
    --chart-line: #00d4aa;
    --chart-fill-start: rgba(0,212,170,0.3);
    --chart-fill-end: rgba(0,212,170,0);
}

body.light {
    --tooltip-bg: #ffffff;
    --tooltip-title: #1e293b;
    --tooltip-body: #475569;
    --tooltip-border: #cbd5e1;
    --grid-line: rgba(203,213,225,0.5);
    --chart-tick: #475569;
    --pnl-positive: #16a34a;
    --chart-line: #059669;
    --chart-fill-start: rgba(5,150,105,0.2);
    --chart-fill-end: rgba(5,150,105,0);
}

/* P&L custom date range pickers */
.pnl-custom-dates { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; position: relative; }
.pnl-date-wrap { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.pnl-date-wrap input[type="text"] { background: #2a2a3e; border: 1px solid #444; color: #e5e5e5; padding: 4px 26px 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer; width: 100px; }
.pnl-date-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center; }
.pnl-custom-sep { color: #94a3b8; font-size: 12px; }

.pnl-date-wrap input[type="text"]:focus { border-color: var(--accent-green); outline: none; box-shadow: 0 0 0 1px var(--accent-green); }
body.light .pnl-date-wrap input[type="text"] { background: #ffffff; border-color: #cbd5e1; color: #1e293b; }
body.light .pnl-date-icon svg { stroke: #475569; }

@media (max-width: 480px) {
    .pnl-custom-dates { flex-direction: column; gap: 8px; }
    .pnl-date-wrap { width: 70%; }
    .pnl-date-wrap input[type="text"] { width: 100%; }
    .pnl-custom-sep { display: none; }
}