/* =============================================================================
   BRIDGE - Plotly charts (dcc.Graph) -> theme roles
   -----------------------------------------------------------------------------
   Plotly writes its colors as inline styles on the chart's SVG, so the rules
   here need !important. This is the only file where !important is allowed
   for color (docs/THEMING.md).

   Only the chart's neutral parts are themed here: text, lines, the unified
   hover box and the toolbar. Trace colors, bar value labels and annotations
   keep the figure's colors, since those carry meaning.

   Each rule also resets the opacity, because Plotly splits a color like
   rgba(255,255,255,0.5) into fill + fill-opacity.

   The figure's own colors in Python stay as a fallback: the toolbar's PNG
   download draws from the figure, not from CSS.
   ============================================================================= */

/* ---- Text ------------------------------------------------------------------ */
/* The chart's text: tick labels (every axis has its own group class: xtick,
   x2tick, ytick, y2tick, ..., colorbar ticks ycb<id>tick), axis titles, the
   legend and colorbar titles. One color for all of it, --chart-text (the
   theme files set it to the body text color, 2026-10-04: tick labels used to
   be quieter than the titles), so the gear menu's "Text color" changes all of
   it at once by redefining --chart-text on the card.
   `opacity: 1`: Plotly 6 turns a half-transparent color (the figures' axis
   titles use rgba(255,255,255,0.5)) into opacity on the text, not
   fill-opacity, so the titles drew at half strength in both themes. */
[data-bs-theme] .js-plotly-plot [class^="x"][class$="tick"] text,
[data-bs-theme] .js-plotly-plot [class^="y"][class$="tick"] text,
[data-bs-theme] .js-plotly-plot .angularaxistick text,
[data-bs-theme] .js-plotly-plot .radialaxistick text,
[data-bs-theme] .js-plotly-plot [class^="g-x"][class$="title"] text,
[data-bs-theme] .js-plotly-plot [class^="g-y"][class$="title"] text,
[data-bs-theme] .js-plotly-plot .legend .legendtext,
[data-bs-theme] .js-plotly-plot .legend .legendtitletext,
[data-bs-theme] .js-plotly-plot .cbtitle text {
    fill: var(--chart-text) !important;
    fill-opacity: 1 !important;
    opacity: 1 !important;
}

/* Bar value labels drawn in the figures' neutral fallback (white, from
   DARK_THEME['text_color'] in utilities/inputs.py) follow the chart text, so
   they read on white too. Labels drawn in a trace color keep it. */
[data-bs-theme] .js-plotly-plot .textpoint text[style*="fill: rgb(255, 255, 255)"],
[data-bs-theme] .js-plotly-plot .point > text[style*="fill: rgb(255, 255, 255)"] {   /* bar labels */
    fill: var(--chart-text) !important;
    fill-opacity: 1 !important;
}

/* Chart title */
[data-bs-theme] .js-plotly-plot .gtitle {
    fill: var(--color-text-strong) !important;
    fill-opacity: 1 !important;
}

/* ---- Stand-in colors ------------------------------------------------------- */
/* A figure that should follow the theme draws in a stand-in color from
   utilities/inputs.py; these rules repaint it with a theme role, in markers,
   lines, fills, legend symbols and hover boxes alike. Pure CSS: nothing runs on
   the server when the theme changes. Keep each rgb() equal to its hex there. */

/* CHART_ACCENT #F3A100 -> the highlight color (cross-section wells, single-series charts) */
[data-bs-theme] .js-plotly-plot [style*="fill: rgb(243, 161, 0)"] {
    fill: var(--color-accent-strong) !important;
}

[data-bs-theme] .js-plotly-plot [style*="stroke: rgb(243, 161, 0)"] {
    stroke: var(--color-accent-strong) !important;
}

/* CHART_SURFACE #10171B -> the card (cross-section edge masks) */
[data-bs-theme] .js-plotly-plot [style*="fill: rgb(16, 23, 27)"] {
    fill: var(--color-surface) !important;
}

/* CHART_INK #FEFEFE -> strong text: reference lines and their labels on the plot
   (Diagnostics Pi and decline lines) */
[data-bs-theme] .js-plotly-plot [style*="fill: rgb(254, 254, 254)"] {
    fill: var(--color-text-strong) !important;
}

[data-bs-theme] .js-plotly-plot [style*="stroke: rgb(254, 254, 254)"] {
    stroke: var(--color-text-strong) !important;
}

/* CHART_NOTE #FDFDFD -> the chart text, like the tick labels: notes above a
   chart, e.g. "the 20 groups with the most wells are shown" (add_chart_note
   in modules/benchmarking/functions.py) */
[data-bs-theme] .js-plotly-plot [style*="fill: rgb(253, 253, 253)"] {
    fill: var(--chart-text) !important;
    fill-opacity: 1 !important;
}

/* ---- Lines ----------------------------------------------------------------- */
[data-bs-theme] .js-plotly-plot .gridlayer path,
[data-bs-theme] .js-plotly-plot .angular-grid path,
[data-bs-theme] .js-plotly-plot .radial-grid path {
    stroke: var(--chart-grid) !important;
    stroke-opacity: 1 !important;
}

[data-bs-theme] .js-plotly-plot .zerolinelayer path,
[data-bs-theme] .js-plotly-plot path.xlines-above,
[data-bs-theme] .js-plotly-plot path.ylines-above,
[data-bs-theme] .js-plotly-plot path.xlines-below,
[data-bs-theme] .js-plotly-plot path.ylines-below {
    stroke: var(--chart-axis) !important;
    stroke-opacity: 1 !important;
}

/* ---- Hover spike lines ------------------------------------------------------ */
/* Plotly draws each spike twice: a wide solid "contrast" line (odd) under the
   requested line (even). On a transparent chart the contrast line came out as
   a thick white bar. Keep only the requested line, as a thin muted guide. */
[data-bs-theme] .js-plotly-plot .hoverlayer line.spikeline:nth-of-type(odd) {
    stroke: transparent;
}

[data-bs-theme] .js-plotly-plot .hoverlayer line.spikeline:nth-of-type(even) {
    stroke: var(--color-text-subtle);
    stroke-width: 1px;
}

/* ---- Unified hover box (hovermode "x unified") ------------------------------ */
/* Per-point hover labels keep their trace color, so they aren't restyled. */
[data-bs-theme] .js-plotly-plot .hoverlayer .legend .bg {
    fill: var(--color-surface-raised) !important;
    fill-opacity: 0.96 !important;
    stroke: var(--color-border) !important;
    stroke-opacity: 1 !important;
}

[data-bs-theme] .js-plotly-plot .hoverlayer .legend text {
    fill: var(--color-text-strong) !important;
    fill-opacity: 1 !important;
}

/* ---- Modebar (the chart toolbar) ------------------------------------------ */
/* The map's toolbar rule in 43_module-map.css targets every .modebar, which
   gave chart toolbars a border and shadow (visible on white). Reset them. */
[data-bs-theme] .js-plotly-plot .modebar {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Tools at rest: a quiet icon color that reads on both themes (Plotly's default
   dark gray at 30% was nearly invisible on dark charts). */
[data-bs-theme] .js-plotly-plot .modebar-btn path {
    fill: var(--color-text-subtle) !important;
}

/* The active tool and the hovered tool use the accent, like every other
   highlight. Figures set no activecolor in Python. */
[data-bs-theme] .js-plotly-plot .modebar-btn.active path,
[data-bs-theme] .js-plotly-plot .modebar-btn:hover path {
    fill: var(--color-accent-strong) !important;
}


/* ---- A row of its own for the chart toolbar --------------------------------
   Plotly draws its toolbar (the modebar: camera, zoom, pan...) over the top of
   the plot, where it covered value labels, box outliers and the chart note.
   A chart whose graph has the class `chart-toolbar-row` keeps a thin row
   above the plot for it (Study and Cross-section charts: main_graph_nano /
   main_graph_cross in modules/benchmarking/layout.py; Diagnostics charts:
   modules/diagnostics/layout.py):
     - the graph element (dcc.Graph's outer div) gets top padding, the row;
     - Plotly sizes the chart to the space inside that padding (it measures its
       own element, which fills the graph's content box), so the plot starts
       under the row and the chart's total height doesn't change;
     - the toolbar is moved up into the row. Plotly writes `top: 0` on its
       container inline, hence !important.
   CSS only: nothing runs on the server or in the browser, and every chart with
   the class gets it. The toolbar still shows while the pointer is over the
   chart, and stays while the pointer moves up onto it (it's part of the chart).
   Its left position comes from each module's CSS (left: 50px). */
.chart-toolbar-row {
    --chart-toolbar-h: 26px;
    box-sizing: border-box;
    padding-top: var(--chart-toolbar-h);
}

.chart-toolbar-row .modebar-container {
    top: calc(-1 * var(--chart-toolbar-h)) !important;
}

/* =============================================================================
   Modebar position (was plotly.css)
   ============================================================================= */

/* general plotly modebar */
.js-plotly-plot .plotly .modebar {
	left: 45%;
}