/* Shared styles for Telerik (Kendo UI) charts. See wwwroot/js/telerik-charts.js */

/* Container for the chart, download button and credits.
   The theme's page background (white in light mode, the chart's dark gray in dark mode), so the parts outside
   the chart drawing (credits, notes, buttons) match the chart even on sections with their own background. */
.telerik-chart {
    position: relative;
    background-color: var(--bs-body-bg);
}

/* Download button, top right like the Highcharts one */
.rc-chart-export {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 2;
}

.rc-chart-export-toggle {
    padding: 2px 6px;
    color: #2598e5;
    font-size: 14px;
}

/* Clickable source line under the chart */
.rc-chart-credits {
    padding-bottom: 6px;
    font-size: 12px;
    text-align: center;
}

/* Line above the range buttons, e.g. "ATTO vs. IPO Index (IPOUSA)" */
.rc-chart-subtitle {
    padding: 6px 40px 0;
    font-size: 14px;
    text-align: center;
}

/* With a subtitle, the range buttons go below it */
.rc-chart-subtitle ~ .rc-range-selector {
    top: 32px;
}

/* Range buttons (3m, 6m, YTD, 1y, All), top left like the Highcharts range selector */
.rc-range-selector {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 2;
    display: flex;
    gap: 3px;
}

/* Flat, light buttons (no border or bevel) */
.rc-range-button {
    padding: 1px 8px;
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: 12px;
}

    .rc-range-button:hover {
        background: var(--bs-secondary-bg);
    }

    .rc-range-button.active {
        background: var(--bs-primary-bg-subtle);
        font-weight: bold;
    }

/* Small note under the credits, e.g. "(IPOs ≥ $50mm Mkt Cap)" */
.rc-chart-note {
    padding-top: 2px;
    padding-bottom: 6px;
    font-size: 11px;
    text-align: center;
}

/* Tuck it under the credits line when there is one */
.rc-chart-credits + .rc-chart-note {
    margin-top: -4px;
    padding-top: 0;
}

@media (max-width: 479.98px) {
    .rc-chart-credits {
        font-size: 10px;
    }
}

/* Pie slices can be clicked (see togglePieSlice in telerik-charts.js) */
.k-chart.rc-pie-chart path {
    cursor: pointer;
}

.rc-tooltip-header {
    font-size: .8em;
}

/* Tooltips: white in light theme, dark gray in dark theme (like Highcharts).
   !important is needed because Kendo sets the point color as an inline style. */
.k-chart-tooltip {
    /* Let the mouse pass through, so the tooltip never blocks moving along the chart */
    pointer-events: none;
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

[data-bs-theme=dark] .k-chart-tooltip {
    background: rgb(57, 57, 57) !important;
    color: #fff !important;
    border-color: rgb(92, 92, 92) !important;
}