/*
 * calculator-chart.css
 * Shared mobile-responsive styles for ApexCharts in calculator pages.
 * Add the 'calculator-chart' class to the chart container <div> to opt in.
 *
 * Works with CalculatorUtils.apex helpers in calculator-utils.js which set
 * the --mobile-tooltip-top CSS custom property at runtime.
 */

@media (max-width: 767px) {
    .calculator-chart .apexcharts-legend {
        overflow: visible !important;
        white-space: normal !important;
        justify-content: center !important;
        row-gap: 4px;
    }

    .calculator-chart .apexcharts-legend-series {
        margin: 2px 6px !important;
    }

    /* Keep tooltip inside mobile viewport and avoid chart layout overflow */
    .calculator-chart .apexcharts-tooltip {
        min-width: min(70vw, 300px) !important;
        white-space: normal !important;
        word-break: normal;
        font-size: 12px !important;
        overflow: visible !important;
        top: var(--mobile-tooltip-top, 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .calculator-chart .apexcharts-tooltip-series-group {
        padding: 4px 8px !important;
    }

    .calculator-chart .apexcharts-tooltip-text-y-value {
        white-space: nowrap !important;
        font-variant-numeric: tabular-nums;
    }
}