/* ============================================================================
   VRYNO CHART TINT -- the text half
   ============================================================================
   assets/js/vryno-chart-tint.js lightens the colours and writes a dark fill
   onto every label ApexCharts draws on top of a slice. One stylesheet rule
   was quietly undoing that:

       style.css:16583   .apexcharts-pie-label { fill: var(--white) !important; }

   White was the right choice when a slice was solid #10b981. On a pale tint
   it leaves the percentage invisible -- the fill attribute on the <text>
   element said #1f2937 and the rendered colour was still white.

   The rule below wins on specificity (three classes against one), so it holds
   whichever order the stylesheets end up loading in -- this file is injected
   and lands before style.css in the cascade, where !important alone would
   lose.

   It applies in dark mode too. dark-theme-fixes.css turns the same labels
   light there, and for the same reason: the slice underneath is pale in
   either theme, so the text on it is dark in either theme.
============================================================================ */

.apexcharts-canvas .apexcharts-datalabels .apexcharts-pie-label,
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-datalabels .apexcharts-pie-label {
    fill: var(--vr-chart-ink, #1f2937) !important;
}

/* Bar and column labels sit on the bar itself and take the same treatment.
   Apex writes their colour as an attribute, which nothing overrides, so this
   is only here for the pages that set a colour in CSS of their own. */
.apexcharts-canvas .apexcharts-datalabels text.apexcharts-datalabel,
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-datalabels text.apexcharts-datalabel {
    fill: var(--vr-chart-ink, #1f2937) !important;
}

/* A donut's centre total -- the "$8.75M" in the hole of the ring -- is drawn
   on the card rather than on a slice. style.css sets it to --body-color,
   which is a mid grey, and at 20px in the middle of a ring it reads as faded
   rather than as the figure the chart is about. It takes the same dark ink as
   the labels on the slices; its caption above it sits one step back from that
   but is still firmly dark, not light. */
.apexcharts-canvas .apexcharts-datalabel-value {
    fill: var(--vr-chart-ink, #1f2937) !important;
    font-weight: 700;
}

.apexcharts-canvas .apexcharts-datalabel-label {
    fill: var(--vr-chart-ink-soft, #4b5563) !important;
}

[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-datalabel-label,
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-datalabel-value {
    fill: var(--dtf-text, #e5e7eb) !important;
}