/* Varial — Plotly chart theme overrides
 *
 * Targets SVG elements generated by Plotly.
 * Must use !important to win over Plotly's inline styles.
 */

/* ── Plot typography ──────────────────────────────── */
.js-plotly-plot .plotly {
  font-family: var(--varial-font-family, 'Inter', sans-serif);
}

/* Transparent backgrounds — let card/page surface show through.
 *
 * Scoped to the plot-area background layer (`.bglayer`, where Plotly draws each
 * subplot's `plot_bgcolor` rect) plus the paper `.main-svg`. It must NOT be a blanket
 * `.js-plotly-plot .bg`: Plotly reuses the bare class `bg` for three unrelated rects —
 * the plot background (in `.bglayer`), the hover label box (in `.hoverlayer`) and every
 * annotation's background chip (in `.infolayer .annotation`). A blanket `!important`
 * transparent was silently blanking annotation `bgcolor`s app-wide — e.g. the payoff
 * ASX market-reference chip rendered as dark text on a see-through box, illegible on
 * both themes (#3281 follow-up). Anchoring to `.bglayer` leaves annotation + hover
 * backgrounds to honour their own inline `bgcolor`. */
.js-plotly-plot .bglayer .bg,
.js-plotly-plot .main-svg {
  fill: transparent !important;
  background: transparent !important;
}

/* The hover label's background rect also uses class `.bg`; give it an explicit themed
 * solid surface (rather than leaving it to Plotly's default) so the unified hover box
 * stays readable over shaded bands. */
.js-plotly-plot .hoverlayer .bg {
  fill: var(--varial-white, #FFFFFF) !important;
  fill-opacity: 1 !important;
  stroke: var(--varial-border, #E7E0CC) !important;
}

[data-bs-theme="dark"] .js-plotly-plot .hoverlayer .bg {
  fill: var(--varial-bg-subtle, #1E293B) !important;
  stroke: var(--varial-border, #334155) !important;
}

/* Let hover tooltips spill outside a chart's own SVG viewport instead of being
   clipped by it. On cramped charts (small-multiple region charts, the VWAP compare
   chart) the unified tooltip is wider than the plot, so the default overflow:hidden
   cut off the right edge of the longer rows ("… $/MW|Wh"). We have to open up every
   Plotly wrapper in the chain — the outer plot element, the svg-container, and the
   layered main-svgs (the hover lives in the top one) — or the innermost clip still
   bites. The plot's own drawing is clipped by Plotly's clipPaths, not by overflow,
   so lines/axes are unaffected. */
.js-plotly-plot,
.js-plotly-plot .plot-container,
.js-plotly-plot .svg-container,
.js-plotly-plot svg,
.js-plotly-plot .main-svg {
  overflow: visible !important;
}

/* …and free the hover layer from Plotly's clip-path. On cramped charts Plotly clips
   the unified hover label to the plot rect, which lopped the ends off the longer
   rows ("Avg TWAP: 52 $/MW|Wh") — a clip CSS overflow can't defeat. Target EVERY
   descendant (`*`), not just the <g> groups: the label text sits in a <g> (freed by
   an earlier, narrower rule) but the tooltip's background box + border is a <rect>/
   <path>, which kept its clip and got cut at the plot edge. The hover layer sits
   above the plot (it does not clip the data lines — those use their own subplot
   clip), so releasing it only lets the whole tooltip render in full. */
.js-plotly-plot .hoverlayer,
.js-plotly-plot .hoverlayer * {
  clip-path: none !important;
}

/* Axis tick labels */
.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text {
  font-family: var(--varial-font-family) !important;
  font-size: 11px !important;
  fill: var(--chart-axis-text, #38352F) !important;
}

/* Axis titles */
.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle {
  font-family: var(--varial-font-family) !important;
  font-size: 12px !important;
  fill: var(--chart-axis-text, #38352F) !important;
}

/* Legend text */
.js-plotly-plot .legend text {
  font-family: var(--varial-font-family) !important;
  font-size: 12px !important;
  fill: var(--chart-axis-text, #38352F) !important;
}

/* Grid lines — the lightest readable warm grid (only the major separators show;
   minor gridlines stay off, which is Plotly's default unless a chart opts in).
   Uses the shared --chart-grid token so the CSS and varial-colors.js plotlyLayout
   agree. The `.gridlayer path` catch-all (mirrored from dark mode below) also
   covers charts whose layout sets no explicit gridcolor and is resilient to
   Plotly's per-version grid sub-class names. Zeroline paths render in their own
   `.zerolinelayer`/`.zl` group (not `.gridlayer`), so they are unaffected. */
.js-plotly-plot .gridlayer .xgrid,
.js-plotly-plot .gridlayer .ygrid,
.js-plotly-plot .gridlayer path {
  stroke: var(--chart-grid, rgba(204, 201, 195, 0.35)) !important;
  stroke-width: 1px !important;
}

/* Zero line — slightly more visible than grid */
.js-plotly-plot .zerolinelayer .xzl,
.js-plotly-plot .zerolinelayer .yzl {
  stroke: var(--varial-gray-300, #CCC9C3) !important;
  stroke-width: 1.5px !important;
}

/* ── Dark mode ────────────────────────────────────── */
/* Axis tick labels / titles / legend flip automatically: the light rules above read
   their fill from the theme-aware --chart-axis-text token (branding.css), which is
   #38352F on cream and #CBD5E1 on navy — the same single source varial-colors.js
   plotlyLayout() uses, so CSS and JS can no longer disagree on the value (#3145
   point 3). No dark-specific tick/title/legend override is needed. */

/* Much more subtle gridlines in dark — standardised across every Plotly chart.
   The generic `.gridlayer path` catch-all covers charts whose layout sets no
   explicit gridcolor (Plotly's default light-grey grid) and is resilient to
   Plotly's per-version grid sub-class names. */
[data-bs-theme="dark"] .js-plotly-plot .gridlayer .xgrid,
[data-bs-theme="dark"] .js-plotly-plot .gridlayer .ygrid,
[data-bs-theme="dark"] .js-plotly-plot .gridlayer path {
  stroke: rgba(148, 163, 184, 0.10) !important;
  stroke-width: 1px !important;
}

/* Zero line a touch more visible than the subtle grid. */
[data-bs-theme="dark"] .js-plotly-plot .zerolinelayer .xzl,
[data-bs-theme="dark"] .js-plotly-plot .zerolinelayer .yzl {
  stroke: rgba(148, 163, 184, 0.22) !important;
}

/* Force every chart's plot/paper background transparent in dark so charts that
   hardcode a light bg in JS inherit the dark card instead of staying light. Scoped to
   the plot-area layer for the same reason as the light rule above — a blanket `.bg`
   would blank annotation/hover chips (which need their own bgcolor). */
[data-bs-theme="dark"] .js-plotly-plot .bglayer .bg {
  fill: transparent !important;
}

/* ── Capped-unified hover "+ N more" pill (#3838) ─────
   On a dense chart the unified tooltip is capped to the top rows by magnitude and
   this pill flags how many series are hidden (never a silent cap). It is a plain
   HTML element appended to the plot div (which we set overflow:visible above), so
   it can sit just under the — possibly overflowing — SVG hover box. Positioned
   inline by varial-colors.js:showHoverMorePill; styling only here. */
.vrl-hover-more {
  position: fixed;
  z-index: 1001; /* above the hover layer */
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--varial-font-family, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  color: var(--varial-gray-600, #6E6A63);
  background: var(--varial-white, #FFFFFF);
  border: 1px solid var(--varial-border, #E7E0CC);
  pointer-events: none;
  white-space: nowrap;
}

[data-bs-theme="dark"] .vrl-hover-more {
  color: var(--varial-gray-300, #CBD5E1);
  background: var(--varial-bg-subtle, #1E293B);
  border-color: var(--varial-border, #334155);
}

/* ── Drag cursor (#2835) ──────────────────────────────
   In pan mode (the default for interactive charts) show a grab/grabbing hand
   instead of Plotly's move cursor, so it reads as "drag to move the chart".
   Scoped to .varial-chart-mode-pan (toggled by varial-colors.js) so box-zoom
   keeps its crosshair. !important is required to beat Plotly's inline cursor
   style on the drag layer. */
.varial-chart-mode-pan .nsewdrag,
.varial-chart-mode-pan .nsewdrag.drag {
  cursor: grab !important;
}

.varial-chart-mode-pan .nsewdrag:active,
.varial-chart-mode-pan .nsewdrag.drag:active {
  cursor: grabbing !important;
}