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

/* *
 *
 *  Colors
 *
 * */

#city-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;
}

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

#container.highcharts-dark #selection-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;
}

#world-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 #world-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;
    }

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

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

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

    div#description {
        background: #20202c;
        color: #dadae2;
    }

    div#description a {
        color: #fff;
    }
}

/* *
 *
 *  City Chart
 *
 * */

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

#city-chart .highcharts-title {
    fill: var(--color-title);
    font-size: 1.2em;
}

#city-chart .highcharts-axis {
    fill: var(--color-axis);
}

#city-chart .highcharts-axis-line,
#city-chart .highcharts-tick {
    stroke: var(--color-axis);
}

#city-chart .highcharts-axis-labels,
#city-chart .highcharts-axis-title {
    fill: var(--color-axis-labels);
}

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

#city-chart .highcharts-tooltip text {
    fill: var(--color-tooltip-text);
}

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

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

/* *
 *
 *  KPI
 *
 * */

#kpi-layout .highcharts-dashboards-component {
    background-color: var(--highcharts-neutral-color-0);
    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: 28px;
}

#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-series .highcharts-color-0 {
    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;
}

#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;
}

/* *
 *
 *  Selection Grid
 *
 * */

#selection-grid .highcharts-dashboards-component {
    background-color: var(--color-background);
}

#selection-grid .highcharts-dashboards-component-title {
    fill: var(--color-title);
    font-size: 1.2em;
    text-align: center;
}

#selection-grid .highcharts-datagrid-column-header {
    font-size: 12px;
}

#selection-grid .highcharts-datagrid-row.hovered {
    background-color: var(--color-hover-background);
    border-color: var(--color-hover-border);
    color: var(--color-hover-text);
}

/* *
 *
 *  World Map
 *
 * */

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

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

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

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

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

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

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

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

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

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

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

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

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

#world-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;
}

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

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

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

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

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

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

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

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

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

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

/* *
 *
 *  Demo description
 *
 * */

div#description {
    padding: 15px;
}

#world-map,
#kpi-layout,
#selection-grid,
#city-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) {
    #world-map,
    #kpi-layout,
    #selection-grid,
    #city-chart {
        flex: 1 1 100%;
    }
}

/* SMALL */
@media (max-width: 576px) {
    #kpi-temperature,
    #kpi-wind,
    #kpi-precipitation,
    #world-map,
    #kpi-layout,
    #selection-grid,
    #city-chart {
        flex: 1 1 100%;
    }
}