/***********************************************************************************************************************************************************/
/* Global overrides to standard highcharts styles */
/***********************************************************************************************************************************************************/
.highcharts-title {
    text-transform: uppercase;
    fill: color-mix(in srgb, var(--theme-accent-primary) 78%, var(--modern-text)) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.45px !important;
}

.highcharts-breadcrumbs-group text {
    fill: var(--theme-accent-primary) !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.75px !important;
    cursor: pointer;
    overflow: visible !important;
    background: none !important;
}

.highcharts-breadcrumbs-group g.highcharts-breadcrumbs-button:hover text {
    fill: var(--modern-accent-focus) !important;
    text-decoration: none !important;
    background: none !important;
    opacity: 1 !important;
}

.highcharts-breadcrumbs-group g.highcharts-breadcrumbs-button:last-of-type text {
    fill: var(--bs-gray-700) !important;
    text-decoration: none !important;
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.9 !important;
}

.highcharts-breadcrumbs-separator text {
    fill: var(--bs-gray-700) !important;
    text-decoration: none !important;
    cursor: default !important;
    pointer-events: none !important;
}

.highcharts-breadcrumbs-group rect {
    fill: none !important;
    stroke: none !important;
}

.highcharts-xaxis-labels text {
    fill: color-mix(in srgb, var(--theme-accent-primary) 86%, var(--modern-text)) !important;
    font-size: 0.77rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: none !important;
}

    .highcharts-xaxis-labels text:hover {
        fill: var(--modern-accent-emphasis) !important;
    }

.highcharts-yaxis-labels text {
    fill: color-mix(in srgb, var(--modern-text-muted) 82%, var(--modern-text)) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.highcharts-axis-title {
    fill: color-mix(in srgb, var(--modern-text-muted) 82%, var(--modern-text)) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.highcharts-subtitle {
    fill: color-mix(in srgb, var(--modern-text-muted) 82%, var(--modern-text)) !important;
}

.highcharts-data-label text {
    fill: color-mix(in srgb, var(--theme-accent-primary) 86%, var(--modern-text)) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: none !important;
}

    .highcharts-data-label text:hover {
        fill: var(--modern-accent-emphasis) !important;
    }

.highcharts-point {
    cursor: pointer;
}

.highcharts-focus-border {
    fill: none !important;
    stroke: color-mix(in srgb, var(--modern-accent-focus) 72%, var(--modern-white)) !important;
    stroke-width: 1.5px !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke;
}

/* Default (top-level) */
.highcharts-container:not(.is-drilled) .highcharts-xaxis-labels text {
    fill: var(--theme-accent-primary) !important;
    cursor: pointer;
}

    .highcharts-container:not(.is-drilled) .highcharts-xaxis-labels text:hover {
        fill: var(--modern-accent-emphasis) !important;
    }

/* Drilldown (deeper levels) */
.highcharts-container.is-drilled .highcharts-xaxis-labels text {
    fill: var(--bs-gray-700) !important;
    cursor: default !important;
}

.highcharts-tooltip {
    pointer-events: none;
    z-index: 9999 !important;
}

.highcharts-tooltip-box {
    fill: var(--modern-tooltip-bg) !important;
    stroke: color-mix(in srgb, var(--modern-tooltip-color) 40%, transparent) !important;
    stroke-width: 1 !important;
    shape-rendering: geometricPrecision !important;
    filter: drop-shadow(0 4px 10px var(--modern-shadow-black-20)) !important;
}

.chart-tooltip-header {
    font-size: 0.75rem !important;
    opacity: 0.8;
    font-weight: 600 !important;
    color: color-mix(in srgb, var(--modern-tooltip-color) 85%, transparent) !important;
    letter-spacing: .5px;
    display: block;
    margin-bottom: 3px;
}

.chart-tooltip-body {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--modern-tooltip-color) !important;
}

/* Chart chrome controls (drill-up chevron + context/menu "triple lines"):
   neutral at rest, modern emphasis accent on hover/focus/pressed. */
.highcharts-button .highcharts-button-box {
    fill: transparent !important;
    stroke: transparent !important;
}

.highcharts-button .highcharts-button-symbol {
    fill: var(--modern-text-muted) !important;
    stroke: var(--modern-text-muted) !important;
    transform-box: fill-box;
    transform-origin: center center;
    transition: fill 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}

.highcharts-button:hover .highcharts-button-symbol,
.highcharts-button:focus-visible .highcharts-button-symbol,
.highcharts-button.highcharts-button-hover .highcharts-button-symbol,
.highcharts-button.highcharts-button-pressed .highcharts-button-symbol {
    fill: var(--modern-accent-emphasis) !important;
    stroke: var(--modern-accent-emphasis) !important;
    transform: scale(1.1);
}

.highcharts-contextmenu .highcharts-menu {
    border: 1px solid var(--modern-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px var(--modern-shadow-black-10) !important;
    padding: 8px 0 !important;
}

.highcharts-contextmenu .highcharts-menu hr {
    border-color: var(--modern-border) !important;
    margin: 6px 8px !important;
}

.highcharts-contextmenu .highcharts-menu-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-radius: 6px !important;
    color: var(--modern-text) !important;
    font-size: 1rem !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s !important;
}

    .highcharts-contextmenu .highcharts-menu-item:hover,
    .highcharts-contextmenu .highcharts-menu-item:focus {
        background: var(--modern-row-selected) !important;
        border-color: var(--modern-hover-edge) !important;
        border-left: 3px solid var(--modern-btn-primary-bg) !important;
        border-right: 3px solid var(--modern-btn-primary-bg) !important;
        color: var(--modern-btn-primary-bg) !important;
    }