/**
 * ChartIQ Theme Override - Connected to fin-charts CSS Custom Properties
 * ==========================================================================
 * Verknüpft die ChartIQ Canvas Engine und UI Web Components direkt mit den
 * zentral definierten `--finchart-*` Variablen.
 *
 * Einbindung: Nach `stx-chart.css` und `chartiq.css` laden.
 */

/* ==========================================================================
   1. CHARTIQ UI VARIABLE BRIDGING
   Maps ChartIQ internal CSS variables to fin-charts variables
   ========================================================================== */
:root,
cq-context,
.finchart-root {
    /* Base Surfaces */
    --ciq-background: var(--finchart-bg);
    --ciq-background-primary: var(--finchart-bg);
    --ciq-background-secondary: var(--finchart-grid);
    --ciq-background-card: var(--finchart-bg);
    /* Typography */
    --ciq-text-color: var(--finchart-text);
    --ciq-text-muted: var(--finchart-muted);
    --ciq-text-active: var(--finchart-line);
    /* Borders & Lines */
    --ciq-border-color: var(--finchart-grid);
    --ciq-divider-color: var(--finchart-grid);
    /* Accent & Directional */
    --ciq-primary: var(--finchart-line);
    --ciq-primary-hover: var(--finchart-line);
    --ciq-active-color: var(--finchart-line);
    --ciq-up-color: var(--finchart-up);
    --ciq-down-color: var(--finchart-down);
    --ciq-even-color: var(--finchart-neutral);
    /* Dialogs & Menus */
    --ciq-menu-bg: var(--finchart-bg);
    --ciq-menu-text: var(--finchart-text);
    --ciq-menu-hover-bg: var(--finchart-grid);
    --ciq-dialog-bg: var(--finchart-bg);
    --ciq-dialog-header-bg: var(--finchart-grid);
    --ciq-toolbar-bg: var(--finchart-bg);
}

/* ==========================================================================
   2. CORE CANVAS CONTAINER & BACKGROUNDS
   ========================================================================== */

.chartContainer,
.stx_chart_bg {
    background-color: var(--finchart-bg) !important;
    color: var(--finchart-text);
}

/* Panel-Hintergründe (z. B. für Oszillatoren/Indikatoren unter dem Hauptchart) */
.stx_panel_background {
    background-color: var(--finchart-bg);
}

.stx_panel_border,
.stx_grid_border {
    color: var(--finchart-grid);
    border-color: var(--finchart-grid);
}

/* ==========================================================================
   3. ACHSEN, GITTERLINIEN & CROSSHAIR
   ========================================================================== */

/* Achsenbeschriftungen */
.stx_xaxis,
.stx_yaxis {
    color: var(--finchart-text);
    font-family: inherit;
}

.stx_xaxis_dark,
.stx_yaxis_dark {
    color: var(--finchart-muted);
}

/* Gitterlinien */
.stx_grid {
    color: var(--finchart-grid);
    opacity: 1;
}

.stx_grid_dark {
    color: var(--finchart-muted);
    opacity: 0.4;
}

/* Crosshair (Fadenkreuz) */
.stx_crosshair,
.stx_crosshair_x,
.stx_crosshair_y {
    color: var(--finchart-crosshair);
    border-color: var(--finchart-crosshair);
}

/* Floating Labels / Tooltips an den Achsen */
.stx-float-date,
.stx-float-price {
    background-color: var(--finchart-tooltip-bg) !important;
    color: var(--finchart-tooltip-text) !important;
    border-color: var(--finchart-grid);
}

/* ==========================================================================
   4. CHART-TYPEN & KURSDARSTELLUNG
   ========================================================================== */

/* --- Kerzencharts (Candlesticks) --- */
.stx_candle_up {
    color: var(--finchart-up);
    border-left-color: var(--finchart-up);
    background-color: var(--finchart-up);
}

.stx_candle_down {
    color: var(--finchart-down);
    border-left-color: var(--finchart-down);
    background-color: var(--finchart-down);
}

.stx_candle_even {
    color: var(--finchart-neutral);
    border-left-color: var(--finchart-neutral);
    background-color: var(--finchart-neutral);
}

/* Dochte (Wicks/Shadows) */
.stx_candle_shadow {
    color: var(--finchart-muted);
}

.stx_candle_shadow_up {
    color: var(--finchart-up);
}

.stx_candle_shadow_down {
    color: var(--finchart-down);
}

.stx_candle_shadow_even {
    color: var(--finchart-neutral);
}

/* --- Hohlkerzen (Hollow Candles) --- */
.stx_hollow_candle_up {
    color: transparent;
    border-left-color: var(--finchart-up);
}

.stx_hollow_candle_down {
    color: var(--finchart-down);
    border-left-color: var(--finchart-down);
}

.stx_hollow_candle_even {
    color: transparent;
    border-left-color: var(--finchart-neutral);
}

/* --- Balkencharts (OHLC Bars) --- */
.stx_bar_chart {
    color: var(--finchart-line);
}

.stx_bar_up {
    color: var(--finchart-up);
}

.stx_bar_down {
    color: var(--finchart-down);
}

.stx_bar_even {
    color: var(--finchart-neutral);
}

/* --- Linien- & Mountain/Area-Charts --- */
.stx_line_chart {
    color: var(--finchart-line);
    width: 2px;
}

.stx_line_up {
    color: var(--finchart-up);
}

.stx_line_down {
    color: var(--finchart-down);
}

.stx_line_even {
    color: var(--finchart-neutral);
}

.stx_mountain_chart {
    color: var(--finchart-area-bottom); /* Verlauf unten  */
    background-color: var(--finchart-area-top); /* Verlauf oben */
    border-top-color: var(--finchart-line); /* Hauptlinie */
    width: 2px;
}

/* Baseline Delta Charts */
.stx_baseline {
    color: var(--finchart-muted);
}

.stx_baseline_up {
    color: var(--finchart-up);
}

.stx_baseline_down {
    color: var(--finchart-down);
}

/* Aktueller Preis-Marker (Last Price Tag) */
.stx_current_hr_up {
    background-color: var(--finchart-up);
    color: #ffffff;
    border-color: var(--finchart-up);
}

.stx_current_hr_down {
    background-color: var(--finchart-down);
    color: #ffffff;
    border-color: var(--finchart-down);
}

/* ==========================================================================
   5. VERGLEICHS-SERIEN (Multi-Series / Comparison Lines)
   Nutzt die fin-charts Serien-Matrix (Strong-Tonstufen 1-7)
   ========================================================================== */

.stx_line_series,
.stx_line_1, .stx_series_1 {
    color: var(--finchart-series-strong-1);
    border-color: var(--finchart-series-strong-1);
}

.stx_line_2, .stx_series_2 {
    color: var(--finchart-series-strong-2);
    border-color: var(--finchart-series-strong-2);
}

.stx_line_3, .stx_series_3 {
    color: var(--finchart-series-strong-3);
    border-color: var(--finchart-series-strong-3);
}

.stx_line_4, .stx_series_4 {
    color: var(--finchart-series-strong-4);
    border-color: var(--finchart-series-strong-4);
}

.stx_line_5, .stx_series_5 {
    color: var(--finchart-series-strong-5);
    border-color: var(--finchart-series-strong-5);
}

.stx_line_6, .stx_series_6 {
    color: var(--finchart-series-strong-6);
    border-color: var(--finchart-series-strong-6);
}

.stx_line_7, .stx_series_7 {
    color: var(--finchart-series-strong-7);
    border-color: var(--finchart-series-strong-7);
}

/* ==========================================================================
   6. INDIKATOREN, BÄNDER & VOLUMEN
   ========================================================================== */

/* Volumen Bars */
.stx_volume {
    color: var(--finchart-line);
}

.stx_volume_up {
    color: var(--finchart-up-soft);
    border-left-color: var(--finchart-up-soft);
}

.stx_volume_down {
    color: var(--finchart-down-soft);
    border-left-color: var(--finchart-down-soft);
}

/* Volumen Underlay (Overlay im Hauptchart) */
.stx_volume_underlay_up {
    color: var(--finchart-up-soft);
    opacity: 0.3;
}

.stx_volume_underlay_down {
    color: var(--finchart-down-soft);
    opacity: 0.3;
}

/* Bänder (Bollinger Bänder, Envelopes, Channels) */
.stx_band,
.stx_channel {
    background-color: var(--finchart-band);
    border-color: var(--finchart-line);
}

/* ==========================================================================
   7. MARKER, CALLOUTS & SPECIAL EVENTS
   ========================================================================== */

/* Dividenden-Marker & Ex-Dividenden-Linien */
.stx_marker.dividend,
.stx_dividend_line {
    color: var(--finchart-dividend);
    background-color: var(--finchart-dividend);
    border-color: var(--finchart-dividend);
}

/* Live-Push Indikator */
.stx_live_now,
.stx_marker.live {
    color: var(--finchart-live);
    background-color: var(--finchart-live);
}

/* Annotationen / Callouts */
.stx_annotation {
    color: var(--finchart-text);
}

.stx_annotation_bg {
    background-color: var(--finchart-callout);
}

/* ==========================================================================
   8. WEB COMPONENTS & UI OVERRIDES (Menus, Dialogs, Toolbars)
   ========================================================================== */

cq-dialog {
    background-color: var(--finchart-bg) !important;
    color: var(--finchart-text) !important;
    border-color: var(--finchart-grid) !important;
}

    cq-dialog .cq-dialog-header {
        background-color: var(--finchart-grid) !important;
        color: var(--finchart-text) !important;
    }

cq-menu,
cq-menu-dropdown {
    background-color: var(--finchart-bg) !important;
    color: var(--finchart-text) !important;
    border-color: var(--finchart-grid) !important;
}

cq-item:hover,
.ciq-menu-item:hover {
    background-color: var(--finchart-grid) !important;
}

cq-toolbar,
cq-drawing-toolbar {
    background-color: var(--finchart-bg) !important;
    border-color: var(--finchart-grid) !important;
}

.ciq-btn {
    background-color: var(--finchart-grid);
    color: var(--finchart-text);
    border-color: var(--finchart-grid);
}

    .ciq-btn-primary,
    .ciq-btn.cq-active {
        background-color: var(--finchart-line) !important;
        color: #ffffff !important;
    }

cq-study-legend,
cq-side-nav,
cq-lookup {
    background-color: var(--finchart-bg) !important;
    color: var(--finchart-text) !important;
    border-color: var(--finchart-grid) !important;
}