/* ============================================================================
   CHART GUARD
   ============================================================================
   The containment half of assets/js/vryno-chart-guard.js.

   Everything here is scoped to a class the script adds, and the script only
   adds those classes to a chart it has decided is in trouble. So with the data
   the product ships today this stylesheet changes nothing at all -- no chart
   carries any of these classes, and the selectors match nothing. That is
   deliberate: a global rule on .apexcharts-legend or .card would have quietly
   restyled charts that were perfectly fine.
============================================================================ */

/* --- The scroller ----------------------------------------------------------
   A plot too wide for its card scrolls inside this rather than shrinking to
   fit. The wrapper is created by the script, and `is-on` is what turns the
   overflow on, so a wrapper left behind by a resize behaves like a plain
   div. */
.vr-cg-scroll {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.vr-cg-scroll.is-on {
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    /* Momentum scrolling on a trackpad, and a scrollbar that does not sit on
       top of the axis labels. */
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300, #d0d5dd) transparent;
}

.vr-cg-scroll--y.is-on {
    overflow: hidden auto;
    overscroll-behavior-y: contain;
}

.vr-cg-scroll.is-on::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.vr-cg-scroll.is-on::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--gray-300, #d0d5dd);
    background-clip: content-box;
}

.vr-cg-scroll.is-on::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400, #b3b3bd);
    background-clip: content-box;
}

/* --- Containment -----------------------------------------------------------
   A grid or flex child refuses to shrink below its content by default, so a
   wide plot inside one would push the column -- and the card next to it -- out
   of shape. min-width:0 is what lets the scroller do its job instead. The
   script puts .vr-cg-host on the card and card body of a chart that scrolls,
   and takes it off again when the chart stops needing it. */
.vr-cg-host {
    min-width: 0;
}

/* The plot is allowed to be wider than its card only INSIDE the scroller.
   Anywhere else it stays within its box, whatever the data does. */
.vr-cg-host .apexcharts-canvas {
    max-width: 100%;
}

.vr-cg-scroll.is-on .apexcharts-canvas {
    max-width: none;
}

/* --- Legend ----------------------------------------------------------------
   ApexCharts gives the legend whatever height it asks for and takes it out of
   the plot, so a chart with fifteen series ends up mostly legend. The script
   pins the height once the legend has actually outgrown the cap and marks the
   chart; this makes the overflow reachable rather than cut off. */
.vr-cg-legend-cap .apexcharts-legend {
    max-height: var(--vr-cg-legend-max, 66px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.vr-cg-legend-cap .apexcharts-legend::-webkit-scrollbar {
    width: 6px;
}

.vr-cg-legend-cap .apexcharts-legend::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--gray-300, #d0d5dd);
}

/* A legend series name long enough to wrap pushes the whole legend taller.
   One line each; the full name stays in the title the library already sets. */
.vr-cg-legend-cap .apexcharts-legend-series {
    max-width: 100%;
}

.vr-cg-legend-cap .apexcharts-legend-text {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* --- Tooltip ---------------------------------------------------------------
   Inside a scroller the tooltip is clipped by the overflow, so it is held to
   the visible strip rather than hanging off the edge of it. */
.vr-cg-scroll.is-on .apexcharts-tooltip {
    max-width: 280px;
    white-space: normal;
}

/* --- Small screens ---------------------------------------------------------
   Below this the cards are single-column and narrow, so almost any series
   count needs the scroller. Nothing to change there -- the script measures the
   real width and reaches that conclusion on its own -- but the legend cap
   comes down, because on a short viewport 66px of legend is a large share of
   the card. */
@media (max-width: 767.98px) {
    .vr-cg-legend-cap .apexcharts-legend {
        --vr-cg-legend-max: 52px;
    }

    .vr-cg-legend-cap .apexcharts-legend-text {
        max-width: 120px;
    }
}

@media print {
    .vr-cg-scroll.is-on {
        overflow: visible;
    }
}