.remove-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.centre-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.info-group {
    max-width: 300px;
    /* optional: limit width */
    width: 100%;
}

.status-value {
    min-width: 70px;
    text-align: right;
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(197, 220, 230, 0.7);
}

.metrics-panel {
    width: fit-content;
    /* shrink-wrap contents */
    margin: 0 auto;
    /* center it horizontally */
}


#metric-location,
#metric-icon {
    display: inline-block;
    width: 10px;
    /* or adjust to 2rem if needed */
    text-align: center;
}

#metric-name {
    display: inline-block;
    padding-left: 0.25rem;
    /* small gap between icon and label */
}

#metric-label {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.total {
    color: rgba(117, 117, 117, 0.5);
}

.battery {
    display: flex;
    justify-content: space-between;
    gap: 2px;
    padding: 5px;
    min-width: 100px;
    /* instead of fixed width */
    max-width: 140px;
    /* optional: prevent oversize */
    border: solid thin #589bff;
    border-radius: 5px;
    position: relative;
}


.critical-battery {
    color: red;
}

.low-battery {
    color: rgba(255, 170, 12, 0.95);
}

.bar {
    display: inline-block;
    width: 8px;
    /* Set a fixed width */
    height: 20px;
    margin: 0 1px;
    /* Add spacing between cells */
    background: rgba(200, 200, 200, 0.3);
    border: solid thin rgba(55, 155, 288, 0.5);
    border-radius: 3px;
    transition: background 1s, transform 0.3s ease, opacity 0.3s ease;
}


.bar.active {
    background: limegreen;
}

.bar.active.low-battery {
    background: red;
}

.bar.zero {
    border: solid thin rgba(255, 0, 0, 0.3);
    background: white;
}

.info-section {
    background-color: #4B515D;
}

.info-panel {
    color: #4B515D;
    border-radius: 30px;
    filter: drop-shadow(3px 3px 4px rgba(20, 20, 20, 0.2));
}

.info-text {
    font-size: 1rem;
    color: #868B94;
}

.info-title {
    color: #1C2331;
}

.low-pressure {
    color: #589bff;
}

.high-pressure {
    color: orange;
}

.high-humidity {
    color: #589bff;
}

.low-humidity {
    color: orange;
}

.very-cold {
    color: rgba(58, 6, 246, 0.7);
}

.cold {
    color: rgba(143, 211, 194, 0.5);
}

.chilly {
    color: rgba(112, 196, 255, 0.75);
}

.pleasant {
    color: rgba(114, 215, 38, 0.95);
}

.warm {
    color: rgba(255, 213, 46, 1.00);
}

.hot {
    color: rgba(255, 170, 12, 0.95);
}

.very-hot {
    color: rgba(188, 48, 28, 0.95);
}

.spacer-icon {
    visibility: hidden;
}

.heating-on {
    color: rgba(188, 48, 28, 0.95)
}

.heating-off {
    color: rgba(112, 196, 255, 0.75);
}

.very-low-pressure {
    color: rgba(23, 78, 197, 0.75);
}


.exporting {
    color: rgba(114, 215, 38, 0.95);
}

.importing {
    color: rgba(188, 48, 28, 0.95);
}


.charging {
    color: rgba(114, 215, 38, 0.95);
}

.discharging {
    color: rgba(188, 48, 28, 0.95);
}


.low-consumption {
    color: rgba(112, 196, 255, 0.75);
}

.medium-consumption {
    color: rgba(114, 215, 38, 0.95);
}

.high-consumption {
    color: rgba(255, 170, 12, 0.95);
}

.very-high-consumption {
    color: rgba(188, 48, 28, 0.95);
}


.very-high-solar {
    color: rgba(122, 250, 24, 0.95);
}

.high-solar {
    color: rgba(114, 215, 38, 0.95);
}

.medium-solar {
    color: rgba(255, 170, 12, 0.95);
}

.low-solar {
    color: rgba(188, 48, 28, 0.95);
}