@import url("../highcharts/code/css/highcharts.css");
@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-pro/css/grid-pro.css");
@import url("../highcharts/code/dashboards/css/dashboards.css");

body {
    background: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
}

/**
 *
 *  Colors
 *
 **/

#forecast-chart {
    --color-axis: #333;
    --color-axis-labels: #333;
    --color-background: #fff;
    --color-title: #2f2b38;
    --color-text: #2f2b38;
    --color-tooltip-background: #5352be;
    --color-tooltip-text: #d9d8e8;
}

#kpi-layout {
    --color-axis-labels: #a7a4b0;
    --color-background: #fff;
    --color-gauge: #4caffe;
    --color-hover: #5352be;
    --color-active: #336;
    --color-hover-text: #fff;
    --color-pane: #eee;
    --color-pane-line: #ccc;
    --color-text: #2f2b38;
}

#container.highcharts-dark #kpi-layout {
    --color-axis-labels: #838394;
    --color-background: #0d0d0d;
    --color-pane: #20202c;
    --color-pane-line: #838394;
    --color-text: #dadae2;
}

#forecast-grid {
    --color-background: #fff;
    --color-hover-background: #5352be;
    --color-hover-border: #e7e7ec;
    --color-hover-text: #e7e7ec;
}

#container.highcharts-dark #forecast-grid {
    --color-background: #20202c;
}

#container.highcharts-dark {
    --color-axis-labels: #e7e7ec;
    --color-background: #0d0d0d;
    --color-grid: #838394;
    --color-handle: #838394;
    --color-mask: #dddbef66;
    --color-mask-line: #838394;
    --color-scroll: #20202c;
    --color-scroll-line: #646479;
    --color-series: #5352be;
    --color-thumb: #5352be;
    --color-thumb-line: #838394;
}

#station-map {
    --color-background: #3c7496;
    --color-map: #dddbef;
    --color-marker-border: #fff;
    --color-title-text: #fff;
    --color-marker-border-active: #336;
    --color-marker-border-hover: #5352be;
    --color-marker-text: #fff;
    --color-marker-text-border: #000;
    --color-navigation: #f7f7f7;
    --color-navigation-line: #838393;
    --color-navigation-text: #20202b;
    --color-text: #000;
    --color-text-border: #fff;
    --color-tooltip-background: #5352be;
    --color-tooltip-text: #fff;
}

#container.highcharts-dark #station-map {
    --color-navigation: #20202b;
    --color-navigation-line: #646478;
    --color-navigation-text: #838393;
}

@media (prefers-color-scheme: dark) {
    /* dark mode */

    #kpi-layout {
        --color-axis-labels: #838394;
        --color-background: #0d0d0d;
        --color-pane: #20202c;
        --color-pane-line: #838394;
        --color-text: #dadae2;
    }

    #forecast-grid {
        --color-background: #20202c;
    }

    #station-map {
        --color-navigation: #20202b;
        --color-navigation-line: #646478;
        --color-navigation-text: #838393;
    }

    #forecast-chart {
        --color-axis: #ccc;
        --color-axis-labels: #ccc;
        --color-background: #20202c;
        --color-title: #dadae2;
        --color-text: #dadae2;
    }
}

/**
 *
 *  Weather Station Chart
 *
 **/

#forecast-chart .highcharts-dashboards-component-content {
    background: var(--color-background);
}

#forecast-chart .highcharts-title {
    font-size: 1.2em;
}

#forecast-chart .highcharts-tooltip {
    fill: none;
    filter: none;
    stroke: none;
}

#forecast-chart .highcharts-tooltip-box {
    fill-opacity: 1;
    stroke: none;
}

.highcharts-legend-item>text {
    fill: #333;
}

/**
 *
 *  KPI
 *
 **/

#kpi-layout .highcharts-dashboards-component {
    background-color: var(--highcharts-background-color);
    color: var(--highcharts-neutral-color-100);
    cursor: pointer;
    border-radius: 10px;
}

#kpi-layout .highcharts-dashboards-component-title {
    white-space: nowrap;
}

#kpi-layout #kpi-data .highcharts-dashboards-component-kpi-value {
    margin: 0.5em 0;
}

#kpi-layout .highcharts-dashboards-component-kpi-content {
    background: none;
}

#kpi-layout .highcharts-dashboards-component-kpi-chart-container .highcharts-axis-labels text {
    fill: var(--color-axis);
}

#kpi-layout .highcharts-dashboards-component-kpi-chart-container .highcharts-background {
    fill: none;
    stroke: none;
}

#kpi-layout .highcharts-dashboards-component-kpi-chart-container .highcharts-label {
    font-size: 24px;
}

#kpi-layout .highcharts-dashboards-component-kpi-chart-container .highcharts-pane {
    fill: var(--highcharts-neutral-color-5);
    fill-opacity: 1;
    stroke: var(--highcharts-neutral-color-20);
}

#kpi-layout .highcharts-dashboards-component-kpi-chart-container .highcharts-color-0 .highcharts-point {
    fill: var(--color-gauge);
    stroke: none;
}

#kpi-layout .highcharts-dashboards-cell-state-active .highcharts-dashboards-component {
    background-color: var(--color-active);
    color: var(--color-hover-text);
}

#kpi-layout .highcharts-dashboards-cell-state-hover:hover .highcharts-dashboards-component {
    background-color: var(--color-hover);
    color: var(--color-hover-text);
}

#kpi-layout .highcharts-dashboards-cell-state-active text {
    fill: var(--color-hover-text);
}

#kpi-layout .highcharts-dashboards-cell-state-hover:hover text {
    fill: var(--color-hover-text);
}

#kpi-layout .highcharts-dashboards-cell-state-active .highcharts-axis-labels text {
    fill: var(--color-hover-text);
}

#kpi-layout .highcharts-dashboards-cell-state-hover:hover .highcharts-axis-labels text {
    fill: var(--color-hover-text);
}

#kpi-layout .highcharts-title {
    font-size: 1em;
}

#kpi-temperature .highcharts-dashboards-component-kpi-value,
#kpi-wind .highcharts-dashboards-component-kpi-value,
#kpi-precipitation .highcharts-dashboards-component-kpi-value {
    display: none;
}

/**
 *
 *  HTML geographical information
 *
 **/

#html-geo-info .highcharts-dashboards-component {
    cursor: default;
    overflow: hidden;
}

#html-geo-info .highcharts-dashboards-component div#geo-info {
    border: 1px dotted #ccc;
    max-width: 200px;
    border-radius: 10px;
    text-align: center;
    margin: auto;
}

#html-geo-info .highcharts-dashboards-component h2 {
    font-size: 1.5em;
    text-align: center;
}

#html-geo-info .highcharts-dashboards-component div#geo-info p {
    font-size: 0.7em;
}

/**
 *
 *  Weather forecast grid
 *
 **/

#forecast-grid {
    min-height: 260px;
}

#forecast-grid .highcharts-dashboards-component-title {
    font-size: 1.1em;
    text-align: center;
}

.hcg-theme-default {
    --hcg-font-size: 0.95em;
    --hcg-padding: 8px 10px;
    --hcg-header-padding: 15px;
    --hcg-cell-hovered-row-background: var(--color-hover-background);
}

/**
 *
 *  Weather Station Map
 *
 **/

#station-map .highcharts-dashboards-component {
    border-radius: 10px;
}

#station-map .highcharts-dashboards-component-content {
    background: var(--color-background);
    border-radius: 5px;
}

#station-map .highcharts-background {
    fill: var(--color-background);
}

#station-map text.highcharts-credits {
    fill: var(--color-map);
}

#station-map text.highcharts-credits a {
    fill: var(--color-map);
}

#station-map .highcharts-halo {
    display: none;
}

#station-map .highcharts-map-navigation {
    fill: var(--highcharts-neutral-color-5);
    font-size: 20px;
    stroke: var(--highcharts-neutral-color-20);
}

#station-map .highcharts-map-navigation text {
    fill: var(--color-navigation-text);
}

#station-map .highcharts-series-0 .highcharts-point {
    fill: var(--color-map);
    stroke: var(--color-background);
}

#station-map .highcharts-series-0.highcharts-series-inactive {
    opacity: 0.6;
}

#station-map .highcharts-series-1 .highcharts-data-label:nth-child(odd) {
    font-size: 12px;
}

#station-map .highcharts-series-1 .highcharts-data-label text {
    fill: var(--color-text);
    paint-order: stroke;
    stroke: var(--color-text-border);
    stroke-width: 2px;
}

#station-map .highcharts-series-1 .highcharts-data-label:nth-child(even) {
    pointer-events: none;
}

#station-map .highcharts-series-1 .highcharts-data-label:nth-child(even) text {
    fill: var(--color-marker-text);
    stroke: var(--color-marker-text-border);
    stroke-width: 1.5px;
}

#station-map .highcharts-series-1 .highcharts-point {
    paint-order: stroke;
    stroke: var(--color-marker-border);
    stroke-width: 2;
    cursor: pointer;
}

#station-map .highcharts-series-1 .highcharts-point-select {
    stroke-width: 8;
    stroke: var(--color-marker-border-active);
}

#station-map .highcharts-series-1 .highcharts-point:hover {
    stroke-width: 4;
    stroke: var(--color-marker-border-hover);
}

#station-map .highcharts-tooltip {
    fill: none;
    filter: none;
    stroke: none;
}

#station-map div.highcharts-tooltip {
    color: var(--color-tooltip-text);
}

#station-map text.highcharts-title {
    fill: var(--color-title-text);
}

#station-map .highcharts-tooltip-box {
    fill: var(--color-tooltip-background);
    fill-opacity: 1;
    stroke: none;
}

#station-map .highcharts-zoom-in text {
    transform: translate(1px, -1px);
}

#station-map .highcharts-zoom-out text {
    transform: translate(2px, -1px);
}

/* Safari fix for manual dark mode */
/* stylelint-disable-next-line max-line-length */
.highcharts-dark #station-map .highcharts-series-1 .highcharts-data-label text {
    paint-order: stroke;
    stroke-width: 2px;
}

/**
 *
 *  Demo description
 *
 **/

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

#station-map,
#kpi-layout,
#forecast-grid,
#forecast-chart {
    flex: 1 1 50%;
}

#kpi-temperature,
#kpi-wind,
#kpi-precipitation {
    height: 204px;
    flex: 1 1 33.333%;
}

#html-geo-info {
    height: 204px;
    flex: 1 1 100%;
}

/* MEDIUM */
@media (max-width: 992px) {

    #station-map,
    #kpi-layout,
    #forecast-grid,
    #forecast-chart {
        flex: 1 1 100%;
    }
}

/* SMALL */
@media (max-width: 576px) {

    #kpi-temperature,
    #kpi-wind,
    #kpi-precipitation,
    #station-map,
    #kpi-layout,
    #forecast-grid,
    #forecast-chart {
        flex: 1 1 100%;
    }
}