/*
 * comtrade.css
 * Scoped Highcharts color palette for COMTRADE waveform charts.
 *
 * Colors match ChannelColors[] in ComtradeChartBuilder.cs:
 *   0  #E22222  red        – V1
 *   1  #22AA22  green      – V2
 *   2  #2255CC  blue       – V3
 *   3  #E88C1A  orange     – I1
 *   4  #8C7B00  dark-yellow– I2
 *   5  #CC22CC  magenta    – I3
 *   6  #1AADCE  cyan
 *   7  #492970  purple
 *   8  #F28F43  light-orange
 *   9  #A6C96A  light-green
 *
 * .hc-comtrade  – multi-series charts (AllCombined, V&I): all 10 colors in sequence.
 * .ct-ch-{n}    – per-channel charts (single series): pins color-0 to channel color n,
 *                 so Highcharts always picks the right color for that single series.
 *
 * Dark-mode variants are lightened for contrast on dark backgrounds.
 * JS (setContainerMode) adds .highcharts-dark to the chart container div.
 */

/* ── Multi-series palette (light) ─────────────────────────────────── */
.hc-comtrade {
    --highcharts-color-0: #E22222;
    --highcharts-color-1: #22AA22;
    --highcharts-color-2: #2255CC;
    --highcharts-color-3: #E88C1A;
    --highcharts-color-4: #8C7B00;
    --highcharts-color-5: #CC22CC;
    --highcharts-color-6: #1AADCE;
    --highcharts-color-7: #492970;
    --highcharts-color-8: #F28F43;
    --highcharts-color-9: #A6C96A;
}

/* ── Multi-series palette (dark) ──────────────────────────────────── */
.highcharts-dark.hc-comtrade {
    --highcharts-color-0: #FF5555;
    --highcharts-color-1: #44CC44;
    --highcharts-color-2: #5588FF;
    --highcharts-color-3: #FFAA44;
    --highcharts-color-4: #C4AA00;
    --highcharts-color-5: #EE44EE;
    --highcharts-color-6: #33D4F0;
    --highcharts-color-7: #7B55AA;
    --highcharts-color-8: #FFAA77;
    --highcharts-color-9: #C8E88A;
}

/* ── Per-channel single-series classes (light) ────────────────────── */
/* Each class pins --highcharts-color-0 to that channel's color so the  */
/* single series in a per-channel chart renders in the correct color.   */
.ct-ch-0 { --highcharts-color-0: #E22222; } /* red        – V1  */
.ct-ch-1 { --highcharts-color-0: #22AA22; } /* green      – V2  */
.ct-ch-2 { --highcharts-color-0: #2255CC; } /* blue       – V3  */
.ct-ch-3 { --highcharts-color-0: #E88C1A; } /* orange     – I1  */
.ct-ch-4 { --highcharts-color-0: #8C7B00; } /* dark-yellow– I2  */
.ct-ch-5 { --highcharts-color-0: #CC22CC; } /* magenta    – I3  */
.ct-ch-6 { --highcharts-color-0: #1AADCE; } /* cyan             */
.ct-ch-7 { --highcharts-color-0: #492970; } /* purple           */
.ct-ch-8 { --highcharts-color-0: #F28F43; } /* light-orange     */
.ct-ch-9 { --highcharts-color-0: #A6C96A; } /* light-green      */

/* ── Per-channel single-series classes (dark) ─────────────────────── */
.highcharts-dark.ct-ch-0 { --highcharts-color-0: #FF5555; }
.highcharts-dark.ct-ch-1 { --highcharts-color-0: #44CC44; }
.highcharts-dark.ct-ch-2 { --highcharts-color-0: #5588FF; }
.highcharts-dark.ct-ch-3 { --highcharts-color-0: #FFAA44; }
.highcharts-dark.ct-ch-4 { --highcharts-color-0: #C4AA00; }
.highcharts-dark.ct-ch-5 { --highcharts-color-0: #EE44EE; }
.highcharts-dark.ct-ch-6 { --highcharts-color-0: #33D4F0; }
.highcharts-dark.ct-ch-7 { --highcharts-color-0: #7B55AA; }
.highcharts-dark.ct-ch-8 { --highcharts-color-0: #FFAA77; }
.highcharts-dark.ct-ch-9 { --highcharts-color-0: #C8E88A; }