.dashboard-page {
    --dash-blue: #42a9ee;
    --dash-green: #55b987;
    --dash-red: #e06456;
    --dash-amber: #d5a348;
    --dash-yellow: #d99c35;

    width: min(1320px, 100%);
    max-width: 1320px;

    margin-left: 0;
    margin-right: auto;

    padding: 18px 0 44px;

    color: inherit;
}

.dashboard-page *,
.dashboard-page *::before,
.dashboard-page *::after {
    box-sizing: border-box;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.dashboard-actions {
    position: absolute;

    top: 30px;
    right: 34px;

    display: flex;
    justify-content: flex-end;

    margin: 0;

    z-index: 10;
}

.dashboard-customize-button {
    min-height: 40px;

    padding: 0 15px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: inherit;

    border:
        1px solid rgba(127, 127, 127, .20);

    border-radius: 11px;

    background:
        rgba(127, 127, 127, .045);

    cursor: pointer;

    font: inherit;
    font-size: .73rem;
    font-weight: 720;
}

.dashboard-customize-button:hover {
    border-color:
        rgba(127, 127, 127, .34);

    background:
        rgba(127, 127, 127, .08);
}

.dashboard-customize-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   GRIGLIA
   ========================================================== */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    align-items: start;

    gap: 18px;
}

.dashboard-widget-small {
    grid-column: span 4;
}

.dashboard-widget-medium {
    grid-column: span 6;
}

.dashboard-widget-wide {
    grid-column: span 12;
}


/* ==========================================================
   CARD BASE
   ========================================================== */

.dashboard-widget {
    min-width: 0;
    min-height: 0;

    padding: 20px;

    border:
        1px solid rgba(127, 127, 127, .18);

    border-radius: 18px;

    background:
        color-mix(in srgb,
            currentColor 4%,
            transparent);

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .07);
}

.dashboard-widget-header {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 17px;
}

.dashboard-widget-heading {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.dashboard-widget-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(127, 127, 127, .17);

    border-radius: 12px;

    background:
        rgba(127, 127, 127, .045);
}

.dashboard-widget-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-widget-icon-alarm {
    color: var(--dash-green);
}

.dashboard-widget-icon-climate {
    color: var(--dash-blue);
}

.dashboard-widget-icon-lights {
    color: var(--dash-yellow);
}

.dashboard-widget-title-row {
    display: flex;
    align-items: center;

    gap: 8px;
}

.dashboard-widget-title-row h2 {
    margin: 0;

    overflow: hidden;

    font-size: 1rem;
    font-weight: 760;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-widget-heading>div>span {
    display: block;

    margin-top: 4px;

    font-size: .67rem;

    opacity: .52;
}

.dashboard-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #7f8a92;
}

.dashboard-status-dot.online {
    background: var(--dash-green);

    box-shadow:
        0 0 0 4px rgba(85, 185, 135, .08);
}

.dashboard-status-dot.offline,
.dashboard-status-dot.off {
    background: #7f8991;
}

.dashboard-status-dot.heating {
    background: var(--dash-red);

    box-shadow:
        0 0 0 4px rgba(224, 100, 86, .09);
}

.dashboard-widget-open {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    color: inherit;

    border:
        1px solid rgba(127, 127, 127, .16);

    border-radius: 9px;

    text-decoration: none;

    opacity: .58;
}

.dashboard-widget-open:hover {
    opacity: 1;

    border-color:
        rgba(127, 127, 127, .30);
}

.dashboard-widget-open svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   SWITCH BASE
   ========================================================== */

.dashboard-switch {
    position: relative;

    width: 46px;
    height: 27px;

    flex: 0 0 46px;

    padding: 0;

    border:
        1px solid rgba(127, 127, 127, .28);

    border-radius: 999px;

    background:
        rgba(127, 127, 127, .16);

    cursor: pointer;
}

.dashboard-switch>span {
    position: absolute;

    top: 4px;
    left: 4px;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #ffffff,
            #b9c6cf);

    box-shadow:
        0 2px 5px rgba(0, 0, 0, .25);

    transition:
        transform .17s ease;
}

.dashboard-switch.is-on>span {
    transform:
        translateX(19px);
}


/* ==========================================================
   ANTIFURTO
   ========================================================== */

.dashboard-alarm-list {
    display: grid;

    gap: 9px;
}

.dashboard-alarm-row {
    min-height: 64px;

    padding: 9px 10px 9px 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border:
        1px solid rgba(127, 127, 127, .14);

    border-radius: 12px;

    background:
        rgba(127, 127, 127, .025);
}

.dashboard-alarm-row.is-pending {
    opacity: .55;
    pointer-events: none;
}

.dashboard-alarm-row-state {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}

.dashboard-alarm-row-state>div {
    min-width: 0;
}

.dashboard-alarm-row-state strong,
.dashboard-alarm-row-state span {
    display: block;
}

.dashboard-alarm-row-state strong {
    overflow: hidden;

    margin-bottom: 4px;

    font-size: .75rem;
    font-weight: 720;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-alarm-row-state span {
    font-size: .60rem;
    font-weight: 800;

    opacity: .63;
}

.dashboard-alarm-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background: #7f8991;
}

.dashboard-alarm-row.state-disarmed .dashboard-alarm-dot {
    background:
        var(--dash-green);
}

.dashboard-alarm-row.state-armed .dashboard-alarm-dot,
.dashboard-alarm-row.state-alarm .dashboard-alarm-dot {
    background:
        var(--dash-red);
}

.dashboard-alarm-row.state-pending .dashboard-alarm-dot {
    background:
        var(--dash-amber);
}

.dashboard-alarm-row-actions {
    display: flex;

    gap: 6px;

    flex: 0 0 auto;
}

.dashboard-alarm-action {
    min-height: 34px;

    padding: 0 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border-radius: 8px;

    font: inherit;
    font-size: .62rem;
    font-weight: 720;

    cursor: pointer;
}

.dashboard-alarm-action svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-alarm-action.arm {
    color:
        var(--dash-red);

    border:
        1px solid rgba(224, 100, 86, .25);

    background:
        rgba(224, 100, 86, .045);
}

.dashboard-alarm-action.disarm {
    color:
        var(--dash-green);

    border:
        1px solid rgba(85, 185, 135, .25);

    background:
        rgba(85, 185, 135, .045);
}

.dashboard-alarm-action:disabled {
    cursor: default;

    opacity: .20;
}


/* ==========================================================
   TERMOSTATO
   ========================================================== */

.dashboard-climate-widget {
    min-height: 300px;
}

.dashboard-climate-widget.is-pending {
    opacity: .70;
    pointer-events: none;
}

.dashboard-climate-header-right {
    display: flex;
    align-items: center;

    gap: 8px;
}

.dashboard-climate-power.is-on {
    border-color:
        rgba(66, 169, 238, .46);

    background:
        rgba(66, 169, 238, .32);
}

.dashboard-climate-summary {
    min-height: 114px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 12px;
}

.dashboard-climate-temperature,
.dashboard-climate-target {
    padding: 15px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border:
        1px solid rgba(127, 127, 127, .14);

    border-radius: 13px;

    background:
        rgba(127, 127, 127, .025);
}

.dashboard-climate-temperature-label,
.dashboard-climate-target>span {
    margin-bottom: 7px;

    font-size: .63rem;

    opacity: .50;
}

.dashboard-climate-temperature-value {
    display: flex;
    align-items: flex-end;

    gap: 5px;
}

.dashboard-climate-temperature-value strong {
    font-size: 2.15rem;
    font-weight: 760;

    line-height: .95;

    letter-spacing: -.045em;
}

.dashboard-climate-temperature-value span {
    padding-bottom: 3px;

    font-size: .76rem;
    font-weight: 700;

    opacity: .55;
}

.dashboard-climate-target-control {
    display: grid;

    grid-template-columns:
        34px minmax(48px, auto) 21px 34px;

    align-items: center;

    gap: 5px;
}

.dashboard-climate-target-control button {
    width: 34px;
    height: 34px;

    padding: 0;

    display: grid;
    place-items: center;

    color: inherit;

    border:
        1px solid rgba(127, 127, 127, .20);

    border-radius: 9px;

    background:
        rgba(127, 127, 127, .035);

    cursor: pointer;

    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
}

.dashboard-climate-target-control button:hover {
    border-color:
        var(--dash-blue);

    background:
        rgba(66, 169, 238, .08);
}

.dashboard-climate-target-control strong {
    text-align: right;

    font-size: 1.45rem;
    font-weight: 760;
}

.dashboard-climate-target-unit {
    font-size: .67rem;

    opacity: .52;
}

.dashboard-climate-info {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.dashboard-climate-info-item {
    min-height: 62px;

    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border:
        1px solid rgba(127, 127, 127, .14);

    border-radius: 12px;

    background:
        rgba(127, 127, 127, .025);
}

.dashboard-climate-info-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    color:
        var(--dash-blue);

    border:
        1px solid rgba(66, 169, 238, .20);

    border-radius: 10px;

    background:
        rgba(66, 169, 238, .055);
}

.dashboard-climate-info-icon.battery {
    color:
        var(--dash-green);

    border-color:
        rgba(85, 185, 135, .20);

    background:
        rgba(85, 185, 135, .055);
}

.dashboard-climate-info-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-climate-info-item span,
.dashboard-climate-info-item strong {
    display: block;
}

.dashboard-climate-info-item span {
    margin-bottom: 3px;

    font-size: .61rem;

    opacity: .49;
}

.dashboard-climate-info-item strong {
    font-size: .85rem;
    font-weight: 740;
}

.dashboard-climate-widget.is-disabled .dashboard-climate-summary,
.dashboard-climate-widget.is-disabled .dashboard-climate-info {
    filter:
        saturate(.25);

    opacity: .58;
}


/* ==========================================================
   LUCI
   ========================================================== */

.dashboard-lights-widget {
    min-height: 300px;
    max-height: 370px;

    display: flex;
    flex-direction: column;
}

.dashboard-light-scroll {
    min-height: 0;

    flex: 1;

    overflow: hidden;
}

.dashboard-light-list {
    max-height: 255px;

    padding-right: 5px;

    display: grid;

    gap: 7px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(127, 127, 127, .28) transparent;
}

.dashboard-light-list::-webkit-scrollbar {
    width: 5px;
}

.dashboard-light-list::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-light-list::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(127, 127, 127, .28);
}

.dashboard-light-row {
    min-height: 48px;

    padding: 7px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border:
        1px solid rgba(127, 127, 127, .14);

    border-radius: 10px;

    background:
        rgba(127, 127, 127, .025);
}

.dashboard-light-row.is-pending {
    opacity: .55;
}

.dashboard-light-name {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}

.dashboard-light-name strong {
    overflow: hidden;

    font-size: .69rem;
    font-weight: 690;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-light-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #87929a;
}

.dashboard-light-row.state-on .dashboard-light-dot {
    background:
        var(--dash-yellow);

    box-shadow:
        0 0 0 4px rgba(217, 156, 53, .07);
}

.dashboard-light-switch {
    width: 42px;
    height: 25px;

    flex-basis: 42px;
}

.dashboard-light-switch>span {
    width: 15px;
    height: 15px;
}

.dashboard-light-switch.is-on {
    border-color:
        rgba(217, 156, 53, .46);

    background:
        rgba(217, 156, 53, .30);
}

.dashboard-light-switch.is-on>span {
    transform:
        translateX(17px);
}


/* ==========================================================
   EMPTY
   ========================================================== */

.dashboard-empty {
    min-height: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border:
        1px dashed rgba(127, 127, 127, .22);

    border-radius: 16px;

    opacity: .62;
}


/* ==========================================================
   PERSONALIZZA
   ========================================================== */

.dashboard-panel-backdrop {
    position: fixed;

    inset: 0;

    z-index: 9000;

    background:
        rgba(0, 0, 0, .38);

    backdrop-filter:
        blur(2px);
}

.dashboard-panel {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 9001;

    width:
        min(430px,
            100vw);

    padding: 22px;

    display: flex;
    flex-direction: column;

    color: #e9eef2;

    border-left:
        1px solid rgba(127, 127, 127, .18);

    background: #111820;

    box-shadow:
        -20px 0 55px rgba(0, 0, 0, .28);
}

.dashboard-panel[hidden],
.dashboard-panel-backdrop[hidden] {
    display: none !important;
}

.dashboard-panel-backdrop {
    display: none;
}

.dashboard-panel-backdrop.is-open {
    display: block;
}

.dashboard-panel {
    display: none;
}

.dashboard-panel.is-open {
    display: flex;
}

body.dashboard-panel-open {
    overflow: hidden;
}

.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    padding-bottom: 17px;

    border-bottom:
        1px solid rgba(127, 127, 127, .15);
}

.dashboard-panel-header span {
    display: block;

    margin-bottom: 5px;

    color: #7d8e9b;

    font-size: .61rem;
    font-weight: 740;

    letter-spacing: .10em;
    text-transform: uppercase;
}

.dashboard-panel-header h2 {
    margin: 0;

    font-size: 1.12rem;
}

.dashboard-panel-header p {
    margin: 5px 0 0;

    color: #899aa6;

    font-size: .70rem;
}

.dashboard-panel-close {
    width: 35px;
    height: 35px;

    padding: 0;

    color: inherit;

    border:
        1px solid rgba(127, 127, 127, .18);

    border-radius: 9px;

    background:
        rgba(127, 127, 127, .05);

    cursor: pointer;

    font-size: 1.2rem;
}

.dashboard-panel-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 16px 0;

    overflow-y: auto;
}

.dashboard-panel-item {
    display: grid;

    grid-template-columns:
        20px minmax(0, 1fr) 46px 88px;

    align-items: center;

    gap: 9px;

    padding: 11px;

    border:
        1px solid rgba(127, 127, 127, .14);

    border-radius: 10px;

    background:
        rgba(127, 127, 127, .035);
}

.dashboard-panel-item.dragging {
    opacity: .45;
}

.dashboard-panel-handle {
    color: #6f808c;

    cursor: grab;

    user-select: none;
}

.dashboard-panel-copy {
    min-width: 0;
}

.dashboard-panel-copy strong,
.dashboard-panel-copy span {
    display: block;
}

.dashboard-panel-copy strong {
    overflow: hidden;

    font-size: .73rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-panel-copy span {
    margin-top: 3px;

    color: #7f909c;

    font-size: .60rem;
}

.dashboard-panel .dashboard-switch {
    width: 42px;
    height: 25px;
}

.dashboard-panel .dashboard-switch input {
    position: absolute;

    opacity: 0;
}

.dashboard-panel .dashboard-switch>span {
    inset: 0;

    width: auto;
    height: auto;
}

.dashboard-panel .dashboard-switch>span::after {
    content: '';

    position: absolute;

    top: 4px;
    left: 4px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #ffffff,
            #b9c6cf);

    transition:
        transform .17s ease;
}

.dashboard-panel .dashboard-switch input:checked+span {
    border-color:
        rgba(66, 169, 238, .45);

    background:
        rgba(66, 169, 238, .32);
}

.dashboard-panel .dashboard-switch input:checked+span::after {
    transform:
        translateX(17px);
}

.dashboard-size-select {
    width: 88px;
    height: 33px;

    padding: 0 7px;

    color: #e7edf1;

    border:
        1px solid rgba(127, 127, 127, .18);

    border-radius: 8px;

    background: #161f27;

    font: inherit;
    font-size: .62rem;
}

.dashboard-panel-footer {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    padding-top: 15px;

    border-top:
        1px solid rgba(127, 127, 127, .15);
}

.dashboard-panel-secondary,
.dashboard-panel-primary {
    min-height: 38px;

    padding: 0 14px;

    border-radius: 9px;

    cursor: pointer;

    font: inherit;
    font-size: .68rem;
    font-weight: 730;
}

.dashboard-panel-secondary {
    color: inherit;

    border:
        1px solid rgba(127, 127, 127, .20);

    background: transparent;
}

.dashboard-panel-primary {
    color: #ffffff;

    border:
        1px solid #417b9f;

    background: #417b9f;
}


/* ==========================================================
   TOAST
   ========================================================== */

.dashboard-toast {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 10000;

    max-width: 340px;

    padding: 12px 15px;

    color: #a5dfbd;

    border:
        1px solid rgba(85, 185, 135, .25);

    border-radius: 11px;

    background: #12241b;

    box-shadow:
        0 16px 38px rgba(0, 0, 0, .25);

    font-size: .73rem;
    font-weight: 680;
}

.dashboard-toast.is-error {
    color: #f5a1a7;

    border-color:
        rgba(224, 100, 86, .30);

    background: #311b20;
}


/* ==========================================================
   TEMA CHIARO
   ========================================================== */

body.theme-light .dashboard-widget {
    color: #263746;

    border-color: #d7e0e6;

    background: #ffffff;

    box-shadow:
        0 6px 20px rgba(45, 65, 80, .06);
}

body.theme-light .dashboard-alarm-row,
body.theme-light .dashboard-climate-temperature,
body.theme-light .dashboard-climate-target,
body.theme-light .dashboard-climate-info-item,
body.theme-light .dashboard-light-row {
    border-color: #e0e6ea;

    background: #f7f9fa;
}

body.theme-light .dashboard-customize-button {
    border-color: #d7e0e6;

    background: #ffffff;
}

.content {
    position: relative;
}

/* ==========================================================
   WIDGET FOTOVOLTAICO
   ========================================================== */

.dashboard-energy-widget {
    min-height: 300px;
    max-height: 370px;

    display: flex;
    flex-direction: column;
}

.dashboard-energy-icon {
    color: #e5a13d;
}

.dashboard-energy-icon svg {
    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-energy-body {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 14px;

    margin-top: 20px;
}

.dashboard-energy-primary {
    min-height: 110px;

    display: flex;
    align-items: center;

    gap: 17px;

    padding: 17px;

    border:
        1px solid rgba(229, 161, 61, .18);

    border-radius: 14px;

    background:
        rgba(229, 161, 61, .055);
}

.dashboard-energy-primary-icon {
    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: grid;
    place-items: center;

    color: #e5a13d;

    border:
        1px solid rgba(229, 161, 61, .22);

    border-radius: 14px;

    background:
        rgba(229, 161, 61, .08);
}

.dashboard-energy-primary-icon svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-energy-primary-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.dashboard-energy-primary-copy span {
    font-size: .72rem;

    opacity: .52;
}

.dashboard-energy-primary-copy strong {
    font-size: 1.85rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -.045em;
}

.dashboard-energy-secondary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.dashboard-energy-metric {
    min-width: 0;

    padding: 14px 15px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    border:
        1px solid rgba(127, 127, 127, .15);

    border-radius: 13px;

    background:
        rgba(127, 127, 127, .035);
}

.dashboard-energy-metric span {
    font-size: .69rem;

    opacity: .50;
}

.dashboard-energy-metric strong {
    font-size: 1rem;
    font-weight: 760;

    line-height: 1.15;
}


/* TEMA CHIARO */

body.theme-light .dashboard-energy-primary {
    border-color: #ecd9bb;

    background: #fff9f0;
}

body.theme-light .dashboard-energy-primary-icon {
    border-color: #ead2ad;

    background: #fff4e2;
}

body.theme-light .dashboard-energy-metric {
    border-color: #e0e6ea;

    background: #f7f9fa;
}

/* ==========================================================
   FOTOVOLTAICO - HEADER ALLINEATO AGLI ALTRI WIDGET
   ========================================================== */

.dashboard-energy-widget>.dashboard-widget-head {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.dashboard-energy-widget .dashboard-widget-heading {
    min-width: 0;

    flex: 1;

    display: flex;
    align-items: center;

    gap: 12px;
}

.dashboard-energy-widget .dashboard-widget-open {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    margin-left: auto;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid rgba(127, 127, 127, .14);

    border-radius: 10px;

    color: inherit;

    background:
        rgba(127, 127, 127, .025);

    text-decoration: none;

    opacity: .62;
}

.dashboard-energy-widget .dashboard-widget-open svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/* RESPONSIVE */

@media (max-width: 600px) {

    .dashboard-energy-secondary {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1080px) {

    .dashboard-widget-small,
    .dashboard-widget-medium {
        grid-column: span 6;
    }

}

@media (max-width: 760px) {

    .dashboard-widget-small,
    .dashboard-widget-medium,
    .dashboard-widget-wide {
        grid-column: span 12;
    }

    .dashboard-alarm-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-alarm-row-actions {
        width: 100%;
    }

    .dashboard-alarm-action {
        flex: 1;
    }

    .dashboard-actions {
        position: static;

        width: 100%;

        display: flex;
        justify-content: flex-end;

        margin: 0 0 16px;
    }

}

@media (max-width: 520px) {

    .dashboard-widget {
        padding: 15px;

        border-radius: 15px;
    }

    .dashboard-climate-summary,
    .dashboard-climate-info {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-item {
        grid-template-columns:
            20px minmax(0, 1fr) 42px;
    }

    .dashboard-size-select {
        width: 100%;

        grid-column:
            2 / 4;
    }

}

/* ==========================================================
   MOBILE - FOTOVOLTAICO
   La card cresce con il contenuto quando le metriche si impilano
   ========================================================== */

@media (max-width: 600px) {

    .dashboard-energy-widget {
        max-height: none;
    }

}



/* ==========================================================
   DASHBOARD - ABBANDONO
   ========================================================== */

.dashboard-lights-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;
}


.dashboard-abandon-action {
    height: 34px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 0 8px 0 10px;

    border:
        1px solid rgba(255, 255, 255, .08);

    border-radius: 10px;

    color: #b9c5cc;

    background:
        rgba(255, 255, 255, .035);

    font: inherit;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        opacity .18s ease;
}


.dashboard-abandon-action:hover:not(:disabled) {
    color: #e5eaed;

    border-color:
        rgba(255, 255, 255, .15);

    background:
        rgba(255, 255, 255, .06);
}


.dashboard-abandon-action:disabled {
    cursor: wait;
}


.dashboard-abandon-label {
    white-space: nowrap;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .015em;
}


.dashboard-abandon-switch {
    position: relative;

    width: 32px;
    height: 18px;

    flex: 0 0 32px;

    border-radius: 999px;

    background: #34434c;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, .04);

    transition:
        background .18s ease,
        box-shadow .18s ease;
}


.dashboard-abandon-switch > span {
    position: absolute;

    top: 3px;
    left: 3px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #f5f7f8;

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, .32);

    transition:
        transform .2s ease;
}


.dashboard-abandon-action.is-on
.dashboard-abandon-switch {
    background: #c49a36;

    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, .08),
        0 0 10px
        rgba(196, 154, 54, .16);
}


.dashboard-abandon-action.is-on
.dashboard-abandon-switch > span {
    transform:
        translateX(14px);
}


.dashboard-abandon-action.is-pending {
    color: #d6b562;

    border-color:
        rgba(196, 154, 54, .20);

    background:
        rgba(196, 154, 54, .055);
}


/* ----------------------------------------------------------
   LIGHT
   ---------------------------------------------------------- */

body.theme-light
.dashboard-abandon-action {
    color: #617482;

    border-color: #d8e1e6;

    background: #f7f9fa;
}


body.theme-light
.dashboard-abandon-action:hover:not(:disabled) {
    color: #334b5a;

    border-color: #becdd6;

    background: #f1f5f7;
}


body.theme-light
.dashboard-abandon-switch {
    background: #cbd5db;

    box-shadow:
        inset 0 0 0 1px
        rgba(54, 75, 88, .06);
}


body.theme-light
.dashboard-abandon-switch > span {
    background: #ffffff;

    box-shadow:
        0 1px 4px
        rgba(38, 55, 70, .26);
}


body.theme-light
.dashboard-abandon-action.is-on
.dashboard-abandon-switch {
    background: #c49a36;
}


body.theme-light
.dashboard-abandon-action.is-pending {
    color: #8e6b1f;

    border-color: #e2cf9d;

    background: #fff9eb;
}


/* ==========================================================
   LUCI - MOBILE
   Abbandono sotto la testata
   ========================================================== */

@media (max-width: 640px) {

    .dashboard-lights-widget .dashboard-widget-header {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-areas:
            "heading open"
            "abandon abandon";

        align-items: center;

        column-gap: 10px;
        row-gap: 10px;
    }


    .dashboard-lights-widget
    .dashboard-widget-heading {
        grid-area: heading;
        min-width: 0;
    }


    /*
     * Sul mobile eliminiamo solo il wrapper
     * dalla composizione del layout.
     * I suoi elementi diventano direttamente
     * elementi della grid dell'header.
     */
    .dashboard-lights-widget
    .dashboard-lights-header-actions {
        display: contents;
    }


    .dashboard-lights-widget
    .dashboard-widget-open {
        grid-area: open;
        justify-self: end;
    }


    .dashboard-lights-widget
    .dashboard-abandon-action {
        grid-area: abandon;

        justify-self: start;

        margin-top: 2px;
    }

}