/* ============================================================
   AME.Blazor.Controls - Chart styles
   Canvas-based chart with HTML tooltip and legend overlays.
   CSS variables allow theming via the consuming application.
   ============================================================ */

/* ── Chart chrome — theme-reactive (Wave 15·i4 dark-mode fix) ──────────────────
   The chart's NEUTRAL chrome derives from the Radzen base scale (--rz-*) that
   AMEThemeProvider re-emits on :root for the active variant (see
   AMECssTheme.BuildRootVariables, which maps the AME neutrals onto these vars).
   Chaining the chart tokens to --rz-* is what lets the dark flip REACH the canvas /
   SVG engine: the old `.theme-*-dark` class block (removed below) NEVER matched —
   the provider sets no such class — so the chart stayed frozen-light (the white-plot
   seed, B01-B06 + B15). The mapping mirrors the cross-stack AMEChartChrome
   (AME.Design): bg/floor = Surface, gridlines = Border, tick labels = TextMuted,
   axis frame + axis titles + legend = Text. In LIGHT each --rz-* resolves to its prior literal
   (base-50 = #fff, base-200 = #e5e7eb) so the light chart is byte-identical for the
   seed + grid; the off-token axis/label/legend grays are corrected to the canonical
   neutrals (= the desktop light chrome). The bright series palette
   (--ame-chart-series-*) stays theme-invariant and is defined in _tokens.designer.css. */
:root {
    --ame-chart-bg:              var(--rz-base-50, #ffffff);             /* Surface  — plot + export bg; un-freezes the white-plot seed & drives detectTheme (B01/B02/B03/B06/B15) */
    --ame-chart-grid:            var(--rz-base-200, #e5e7eb);            /* Border   — value-tick gridlines (B04) */
    --ame-chart-axis:            var(--rz-text-color, #1f2937);          /* Text     — axis frame line + ticks; kept bold (was off-token #374151 ≈ Text) (B04) */
    --ame-chart-label:           var(--rz-text-tertiary-color, #8b9e9e); /* TextMuted — tick value labels (was off-token #6b7280) (B04) */
    --ame-chart-axis-title:      var(--rz-text-color, #1f2937);          /* Text — axis TITLES (X/Y name), DISTINCT from the tick labels above (TextMuted). The single --ame-chart-label used to drive both, so a dark axis title rendered TextMuted; this token tracks Text so it follows the variant. Matches the desktop AMEChart (titles=Text, ticks=TextMuted). Wave 15·15.5 axis-title parity */
    --ame-chart-text:            var(--rz-text-color, #1f2937);          /* Text — foreground for chart-surface CHROME text (the V1 loading-veil message). Distinct from --ame-chart-label (TextMuted, tick values): TextMuted over the 72% veil measures ~2.8:1, below the 4.5:1 AA floor. */
    --ame-chart-crosshair:       #6366f1;                              /* indigo accent — legible on light AND dark; theme-invariant like the series palette (not a flagged defect) */
    --ame-chart-selection:       var(--rz-primary, #4361EE);             /* T7 — accent ring for the SELECTED point highlight (Primary); only drawn when SelectedPoint is set */
    --ame-chart-tooltip-bg:      #1f2937;                                /* deliberate dark bubble — legible on BOTH themes (a classic dark tooltip; confirmed non-defect) */
    --ame-chart-tooltip-border:  #374151;                                /* dark-bubble border (pairs with the dark bg above) */
    --ame-chart-tooltip-text:    #f3f4f6;                                /* light text paired with the dark bubble above */
    --ame-chart-legend-text:     var(--rz-text-color, #1f2937);          /* Text — the legend sits on the PAGE bg, so it must follow the theme (was #374151) (B05) */
    /* Phosphor restyle (SP-C #4): glow blur + grid alpha. These are NOT colours (no
       --rz-* to chain to), so they stay here as the de-facto values that always
       shipped — the dark overrides in the removed class block never applied. The
       light/dark CHOICE (opaque glow on dark vs muted on light) is made in JS from
       detectTheme(), which now resolves correctly because --ame-chart-bg flips (B06). */
    --ame-chart-glow-blur:  3;
    --ame-chart-grid-alpha: 0.6;
}

/* The former per-theme class-gated dark block (keyed on the body `<theme>-dark` classes —
   the AME / Material / Fluent / Software dark variants) was REMOVED: AMEThemeProvider
   re-skins via --rz-* overrides on :root and never adds such a class, so that block was
   dead and the chart froze light. Its colour values are now obtained for free through the
   --rz-* chains above; its phosphor dark numerics (blur 8 / alpha .4) never went live and
   are intentionally not restored (the opaque-vs-muted glow choice is the visible part of
   B06, and that is handled in JS via the now-correct detectTheme). */

/* ── Chart container ─────────────────────────────────────── */
.ame-chart-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--ame-chart-grid);
    background: var(--ame-chart-bg);
    /* Subtle inset shadow to give chart panel depth */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ame-chart-container:focus-visible {
    outline: 2px solid var(--ame-chart-crosshair);
    outline-offset: 2px;
}

.ame-chart-container canvas {
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Tooltip ─────────────────────────────────────────────── */
.ame-chart-tooltip {
    background: var(--ame-chart-tooltip-bg);
    border: 1px solid var(--ame-chart-tooltip-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--ame-chart-tooltip-text);
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    font-size: 11.5px;
    line-height: 1.65;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.18);
    min-width: 150px;
    white-space: nowrap;
    /* GPU-composited layer for smooth repositioning */
    will-change: transform;
}

.ame-chart-tooltip-header {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ame-chart-tooltip-border);
    opacity: 0.85;
}

.ame-chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 1px 0;
}

.ame-chart-tooltip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Subtle inner glow matching the series color */
    box-shadow: 0 0 4px currentColor;
}

.ame-chart-tooltip-val {
    margin-left: auto;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ── Legend ───────────────────────────────────────────────── */
/* ── Chart title (T1) ────────────────────────────────────
   Heading above the canvas. Token-driven: tracks the axis-TITLE
   color (= Text, theme-reactive) like the desktop chart title. */
.ame-chart-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ame-chart-axis-title);
    text-align: center;
    padding: 4px 0 6px;
}

/* ── Loading veil (surface overlay while the host prepares data) ──
   Token-driven: the veil is the chart surface at 72% over the last frame, the
   text is TextMuted — both follow the theme. The rgba line is a light-theme
   fallback for engines without color-mix; evergreen browsers take the mix. */
.ame-chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.72);
    background: color-mix(in srgb, var(--ame-chart-bg) 72%, transparent);
    /* Match the container's rounded frame — the veil is a SIBLING at inset:0, so without this its
       square corners paint over the 8px radius. */
    border-radius: 8px;
}

/* V1: the message uses the full Text token, not TextMuted. TextMuted over the 72% veil measured
   ~2.8:1 — below the 4.5:1 AA floor for 13px text — and this line is the only textual explanation
   of what is loading. Raising the veil opacity instead would hide the last frame underneath. */
.ame-chart-loading-text {
    font-size: 13px;
    color: var(--ame-chart-text);
}

/* ── Legend placement (T1) ───────────────────────────────
   The outer container lays out canvas + legend. Default (column,
   legend last) is visually identical to the pre-T1 stacked layout. */
.ame-chart-outer {
    display: flex;
    flex-direction: column;
}
.ame-chart-outer > .ame-chart-wrap { flex: 1 1 auto; min-width: 0; }
/* Top: legend block ABOVE the canvas (reverse the column order). */
.ame-chart-legend--top { flex-direction: column-reverse; }
/* Bottom (default): column, legend below — the untouched baseline. */
.ame-chart-legend--bottom { flex-direction: column; }
/* Left / Right: legend flexed to the side; the chips wrap into a column. */
.ame-chart-legend--left  { flex-direction: row-reverse; align-items: center; }
.ame-chart-legend--right { flex-direction: row;         align-items: center; }
.ame-chart-legend--left  > .ame-chart-legend,
.ame-chart-legend--right > .ame-chart-legend {
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
}

.ame-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 8px 0 4px;
    flex-wrap: wrap;
}

.ame-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ame-chart-legend-text);
    cursor: pointer;
    user-select: none;
}

.ame-chart-legend-item.is-hidden {
    opacity: .4;
    text-decoration: line-through;
}

.ame-chart-legend-color {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

/* ── Zoom reset button ───────────────────────────────────── */
.ame-chart-zoom-reset {
    position: absolute;
    top: 6px;
    right: 8px;
    background: var(--ame-chart-tooltip-bg);
    color: var(--ame-chart-tooltip-text);
    border: 1px solid var(--ame-chart-tooltip-border);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    opacity: 0.80;
    z-index: 5;
    transition: opacity 0.15s, box-shadow 0.15s;
}

.ame-chart-zoom-reset:hover {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* SP-1: when the in-chart export overlay is present, drop the engine's Reset-Zoom
   button below it (both anchor top-right) so they don't collide once a chart is
   zoomed. Scoped via :has so non-export charts keep the button at its original top. */
.ame-chart-wrap:has(.ame-chart-export) .ame-chart-zoom-reset {
    top: 46px;
}

/* ── Empty state ─────────────────────────────────────────── */
.ame-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ame-chart-label);
    font-size: 14px;
    border: 1px dashed var(--ame-chart-grid);
    border-radius: 8px;
}

/* Multi-pane host (Wave 12 w12-i1). A plain block wrapper around the ONE AMEChart
   whose internal engine lays out the stacked panes (the inter-pane gap is the engine's
   lane gap, NOT a CSS gap). The host only owns the group box + its sizing; the panes,
   axes, legend and X labels all come from the single chart inside. Tokens only. */
.ame-multipane-chart {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: var(--ame-chart-legend-text);
}

/* ── Gauge ─────────────────────────────────────────────── */
.ame-gauge-container {
    position: relative;
    display: inline-block;
}

.ame-gauge-container canvas {
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

/* ── SP-C #4: rewritten ex-SVG primitives get the same theme-following canvas ── */
.ame-radialgauge-container {
    position: relative;
    display: inline-block;
    background: var(--ame-chart-bg);
    border-radius: 8px;
}
.ame-radialgauge-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.ame-donut-container {
    position: relative;
    display: inline-block;
    background: var(--ame-chart-bg);
    border-radius: 8px;
}
.ame-donut-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}
/* Wave 17.1: pointer affordance, emitted only when Selectable (the input gate) */
.ame-donut-selectable {
    cursor: pointer;
}
/* Wave 17.1: keyboard focus ring for the selectable donut, mirroring the chart container ring shape. */
.ame-donut-selectable:focus-visible {
    outline: 2px solid var(--ame-focus-ring, var(--rz-primary));
    outline-offset: 2px;
}

/* SP-C #3a: visually-hidden live region for the keyboard-cursor screen-reader announce. */
.ame-chart-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}