/* ==UserStyle==
@name           semsportal.com
@namespace      github.com/openstyles/stylus
@version        202510302
@description    Custom dark theme styling for GoodWe SEMS Portal
@author         shiftgeist
@license        MIT
@downloadURL none
==/UserStyle== */
@-moz-document url-prefix("https://www.semsportal.com/powerstation/PowerStatusSnMin/") {
    /* DARK THEME */
    body {
        background: #181a1b;
    }

    .station-title,
    h5 {
        color: #beb8b0 !important;
    }

    .station-detail,
    .key-api,
    .info-right:has(> .goodwe-station-charts),
    .dash-board,
    .weather-item {
        /* color of filter invert */
        background: #1e1e1e;
    }

    .dash-board p {
        padding-top: 5px;
        background: rgba(0, 0, 0, 0.1) !important;
    }

    .station-detail li {
        color: white;
    }

    canvas {
        filter: invert(0.75) brightness(1.5) contrast(3);
    }

    .goodwe-power-flow {
        background: transparent !important;
    }

    /* RESET */
    .sn-min-8 {
        width: auto;
        overflow-x: hidden;
        padding: 0 10px;
    }

    div:has(> .el-carousel) {
        display: none;
    }

    /* ROWS */
    .row:has(> .dashboard-con),
    /* .row:has(.station-detail), */
    .row.power-flow {
        height: auto !important;
        margin-top: unset !important;
        padding-top: 0 !important;
        padding-bottom: 10px !important;
    }

    .row:has(.station-detail),
    .dashboard-con,
    .dashboard-con .dash-board,
    .dashboard-con .key-api .kpi-wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Row 1 - Col 1 */
    .dashboard-con,
    .dashboard-con .dash-board,
    .dashboard-con .key-api .kpi-wrapper {
        gap: 10px;
    }

    .dashboard-con {
        margin-left: 0;
        width: 100%;
    }

    .dashboard-con .dash-board {
        height: 100%;
        width: 100%;
        flex: 1;
    }

    .dashboard-con .dash-board #power_div,
    .dashboard-con .dash-board #power_div p,
    .dashboard-con .dash-board #power_div span,
    .dashboard-con .dash-board #power_div canvas,
    .dashboard-con .dash-board #battery_div,
    .dashboard-con .dash-board #battery_div .soc-num,
    .dashboard-con .dash-board #battery_div span {
        position: unset;
    }

    .dashboard-con .dash-board .battery_power_div,
    .dashboard-con .dash-board #battery_div {
        margin-top: 0;
    }

    .dashboard-con .dash-board #battery_div {
        height: auto;
    }

    .dashboard-con .dash-board .battery_power_div {
        display: flex;
        flex-direction: column-reverse;
        margin-left: 0;
        height: unset;
    }

    .dashboard-con .dash-board #power_div p {
        width: unset;
    }

    .dashboard-con .dash-board #power_div p,
    .dashboard-con .dash-board #battery_div .soc-num {
        margin-left: auto;
        margin-bottom: unset !important;
    }

    .dashboard-con .dash-board #battery_div .goodwe-battery-1 {
        margin-top: unset;
    }

    /* Row 1 - Col 2 */
    .dashboard-con .key-api {
        width: 100%;
        flex: 2 0 320px;
        margin-left: 0;
    }

    .dashboard-con .dash-board {
        padding: 24px 16px;
    }

    .dashboard-con .key-api .kpi-wrapper {
        padding: 16px;
    }

    .kpi-item {
        box-shadow: none;
        margin: 0;
    }

    /* Row 2 */
    .goodwe-station-charts__chart {
        margin-top: 8px;
    }

    .row:has(.station-detail) .info-right {
        margin-left: unset;
    }
}