/* SENTINEL AI — CHARTS */
.chart-card {
    position: relative;
}

.chart-card .card-body {
    position: relative;
    overflow: hidden;
}

/* Candlestick Chart Styles */
.candlestick-chart-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Chart grid lines */
.chart-grid-line {
    stroke: rgba(255, 255, 255, 0.03);
    stroke-width: 1;
}

.chart-axis-text {
    fill: var(--text-dim);
    font-size: 10px;
    font-family: var(--font-mono);
}

/* Candlestick colors */
.candle-green {
    fill: var(--color-positive);
    stroke: var(--color-positive);
}

.candle-red {
    fill: var(--color-negative);
    stroke: var(--color-negative);
}

.candle-wick {
    stroke-width: 1;
}

/* Volume bars */
.volume-bar-green {
    fill: rgba(0, 200, 150, 0.3);
}

.volume-bar-red {
    fill: rgba(239, 68, 68, 0.3);
}

/* Equity curve */
.equity-line {
    fill: none;
    stroke: var(--accent-cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.equity-area {
    fill: url(#equityGradient);
    opacity: 0.2;
}

.equity-gradient-stop-1 {
    stop-color: var(--accent-cyan);
    stop-opacity: 0.3;
}

.equity-gradient-stop-2 {
    stop-color: var(--accent-cyan);
    stop-opacity: 0;
}

/* Win/Loss pie chart */
.pie-segment-win {
    fill: var(--color-positive);
}

.pie-segment-loss {
    fill: var(--color-negative);
}

/* Monthly bar chart */
.bar-positive {
    fill: var(--color-positive);
    opacity: 0.8;
}

.bar-negative {
    fill: var(--color-negative);
    opacity: 0.8;
}

/* Distribution chart */
.distribution-bar {
    fill: var(--accent-cyan);
    opacity: 0.7;
}

/* Profit chart */
.profit-line {
    fill: none;
    stroke: var(--accent-cyan);
    stroke-width: 2;
    stroke-linecap: round;
}

.profit-area {
    fill: url(#profitGradient);
    opacity: 0.15;
}

/* Sparkline */
.sparkline {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sparkline.positive {
    stroke: var(--color-positive);
}

.sparkline.negative {
    stroke: var(--color-negative);
}

.sparkline-fill {
    opacity: 0.1;
}

.sparkline-fill.positive {
    fill: var(--color-positive);
}

.sparkline-fill.negative {
    fill: var(--color-negative);
}