/* ============================================================================
   VRYNO CHART TYPE SWITCHER
   ============================================================================
   Geometry for the chart-type menu (see assets/js/vryno-chart-switch.js).
   The menu itself is the theme's own .dropdown-menu -- these rules only add
   the "this is the one you are looking at" state, which the existing markup
   had no way to express because nothing was ever selected.
============================================================================ */

/* The tick sits at the end of every item and is invisible until that item is
   the current type, so the rows do not shift when the selection moves. */
.vr-chart-tick {
    opacity: 0;
    flex-shrink: 0;
    color: var(--primary);
}

.dropdown-item.is-current .vr-chart-tick {
    opacity: 1;
}

.dropdown-item.is-current {
    background: var(--primary-transparent);
    color: var(--primary);
    font-weight: 600;
}

.dropdown-item.is-current i:not(.vr-chart-tick) {
    color: var(--primary);
}

/* A menu this file adds itself goes at the end of the card header, beside
   whatever controls the card already had. */
.vr-chart-switch {
    margin-inline-start: 6px;
}

/* ApexCharts writes its own text colours into inline SVG attributes at
   render time, so a chart drawn in one theme keeps that theme's ink after a
   switch. These pull the axis and legend text back onto the theme token in
   both themes. */
.apexcharts-text tspan,
.apexcharts-legend-text,
.apexcharts-yaxis-label,
.apexcharts-xaxis-label {
    fill: var(--gray-600);
    color: var(--gray-600) !important;
}

.apexcharts-gridline {
    stroke: var(--border-color);
}

.apexcharts-tooltip {
    background: var(--white) !important;
    border-color: var(--border-color) !important;
    color: var(--heading-color) !important;
}

.apexcharts-tooltip-title {
    background: var(--light) !important;
    border-color: var(--border-color) !important;
}