/*
 * Analytics charts: the one set of chart colours (docs/CHART-DESIGN-SYSTEM.md §2). Loaded on every UX2 page by
 * ux2HeadTags (engine/ux2.php); the scripts read the same values through appjs/common/ux2/chartTheme.js.
 *   Brand        the workspace's own colour: the main measure, and the sequential (light → dark) heatmaps
 *   Series 2–6   categories (departments, features, sources) in this fixed order; violet also marks AI-attributed use
 *   Status       success / warning / danger: the same on every workspace, never the brand, never a category
 *   Neutral      no data, too few to read, "everything else" — always with a label or tooltip
 */
:root {
    --chart-brand: var(--sko-primary, #1e5f69);
    --chart-series-2: #6938ef;
    --chart-series-3: #2e90fa;
    --chart-series-4: #1baf7a;
    --chart-series-5: #dd2590;
    --chart-series-6: #e0a100;

    --chart-success: #1b8a5a;
    --chart-warning: #b7791f;
    --chart-danger: #c9362b;
    --chart-neutral: #8a8fa3;
    /* Status as small text on white (4.5:1 or more): changes, score differences */
    --chart-success-text: #1f7a52;
    --chart-danger-text: #b42318;

    --chart-brand-soft: color-mix(in srgb, var(--chart-brand) 32%, #fff);
    --chart-purple-soft: #c9bbfb;

    --chart-surface: #fff;
    --chart-grid: #e4e7ec;
    --chart-axis: #6b6f85;
    --chart-label: #3f4254;
    --chart-ink: #181c32;
    --chart-tooltip-bg: #181c32;
    --chart-tooltip-fg: #fff;
}

/* The analytics pages' own variables (hiring-analytics.css: Learning, Hiring and Content Analytics) take the chart
   colours. "html .ha" so this wins whichever stylesheet loads last. The page accent is the brand, not violet. */
html .ha {
    --ha-assess: var(--chart-brand);
    --ha-assess-bg: color-mix(in srgb, var(--chart-brand) 10%, #fff);
    --ha-line: var(--chart-grid);
    --ha-ink: var(--chart-ink);
    --ha-ink-2: var(--chart-label);
    --ha-muted: var(--chart-axis);
    --ha-quiet: var(--chart-neutral);
    --ha-good-fill: var(--chart-success);
    --ha-warn-fill: var(--chart-warning);
    --ha-bad-fill: var(--chart-danger);
}

/* ApexCharts' tooltip: one dark surface, radius and shadow everywhere (§4 Tooltips) */
.apexcharts-tooltip.apexcharts-theme-dark {
    color: var(--chart-tooltip-fg);
    background: var(--chart-tooltip-bg) !important;
    border: 0 !important;
    border-radius: 8px;
    box-shadow: 0 8px 24px -8px rgb(15 23 42 / .35);
}

.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
    background: rgb(255 255 255 / .06) !important;
    border-bottom: 1px solid rgb(255 255 255 / .12) !important;
}

/* Transparent chart area over the card (§4 Background) */
.apexcharts-canvas,
.apexcharts-svg {
    background: transparent !important;
}