@import url("https://code.highcharts.com/css/highcharts.css");
@import url("../../code/css/dashboards.css");
@import url("../../code/css/datagrid.css");

/* Dashboards */

#container {
    container: dashboard / inline-size;
}

.highcharts-dashboards-component-title {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 48px;
    margin-bottom: 8px;
    color: var(--highcharts-neutral-color-100);
}

.highcharts-dashboards-component-subtitle {
    font-weight: 100;
    color: var(--highcharts-neutral-color-60);
}

.highcharts-dashboards-component-kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
}

#rev-chart-kpi,
#cost-chart-kpi,
#res-chart-kpi {
    flex-basis: 25%;
    height: 185px;
}

#rev-chart-kpi .highcharts-dashboards-component-kpi-value,
#cost-chart-kpi .highcharts-dashboards-component-kpi-value,
#res-chart-kpi .highcharts-dashboards-component-kpi-value {
    display: none;
}

#rev-chart-kpi .highcharts-dashboards-component-caption,
#cost-chart-kpi .highcharts-dashboards-component-caption,
#res-chart-kpi .highcharts-dashboards-component-caption {
    padding-bottom: 10px;
    font-size: 12px;
    color: #aaa;
}

@container dashboard (max-width: 992px) {
    #rev-chart,
    #cost-chart,
    #stock-cell {
        flex-basis: 100%;
    }
}

@container dashboard (max-width: 576px) {
    #rev-chart-kpi,
    #cost-chart-kpi,
    #res-chart-kpi {
        flex-basis: 100%;
    }
}

/* Highcharts */

:root,
.highcharts-light {
    --highcharts-color-0: #4689eb;
    --highcharts-color-1: #949494;
    --demo-prediction-color: #d36f00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --highcharts-color-1: #7c7c7c;
        --demo-prediction-color: #debd5b;
    }
}

.highcharts-gauge-chart {
    max-height: 185px;
}

.highcharts-gauge-chart .highcharts-grid-line {
    stroke-width: 0;
}

.highcharts-gauge-chart .highcharts-title {
    font-size: 0.8rem;
}

.highcharts-data-label-box {
    display: none;
}

.highcharts-gauge-series .highcharts-pivot,
.highcharts-gauge-series .highcharts-dial {
    fill: var(--highcharts-neutral-color-60);
    stroke: var(--highcharts-neutral-color-60);
}

.highcharts-plot-band {
    fill-opacity: 1;
}

.highcharts-plot-band.null-band {
    fill: var(--highcharts-neutral-color-20);
}

.highcharts-plot-band.warn-band {
    fill: #ffa92e;
}

.highcharts-plot-band.opt-band {
    fill: #a2efbb;
}

.highcharts-plot-band.high-band {
    fill: #8383e5;
}

.highcharts-plot-line-label {
    fill: var(--highcharts-neutral-color-60);
}

.highcharts-column-chart .highcharts-point {
    cursor: pointer;
}

.highcharts-stock-chart .highcharts-color-1,
.highcharts-stock-chart .highcharts-color-2 {
    fill: var(--demo-prediction-color);
    stroke: var(--demo-prediction-color);
    stroke-dasharray: 1px 6px;
}

/* Custom */

.year-plotline {
    stroke-dasharray: 5px 3px;
    stroke: #a0a0a080;
}

.highcharts-description {
    padding: 0 20px;
}

#csv {
    display: none;
}

/* Popup */

#popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff5;
    display: none;
    align-items: center;
    justify-content: center;
}

#popup .container {
    height: 60%;
    width: 90%;
    max-height: 800px;
    max-width: 900px;
    min-height: 100px;
    min-width: 100px;
    background: #555;
    position: relative;
}

#datagrid-container {
    width: 100%;
    height: 100%;
}

#popup .close {
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    border: 0;
    color: var(--highcharts-neutral-color-100);
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 4px;
}

#popup .close:hover {
    color: #d33;
}