/* Resettiamo i margini di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
:root {
	--bg-color: #121214;
        --card-bg: #ffffff;
        --text-color: #ffffff;
        --solar-color: #ffb703;
        --battery-color: #4cc9f0;
        --home-color: #4edf7a;
        --grid-color: #b5179e;
        --line-bg: #ebe8e8;
	--title-color: #7c7c7d;
        }

body {
	font-family: 'Arial', sans-serif;
	background-color: #f4f4f4;
        padding-top: 80px; /* Spazio per non far coprire il contenuto dal ribbon fisso */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
}

.synoptic-container {
	position: relative;
	width: 750px;
        height: 550px;
        background-color: var(--card-bg);
        border-radius: 10px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.6);
        padding: 20px;
 }

        /* Nodi con Icone - crea un quadrato dove inserirli di dimensione "width"*/
        .node {
            position: absolute;
            width: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            text-align: center;
        }

        .icon-wrapper {
            width: 70px;
            height: 70px;
            border-radius: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.4);
            margin-bottom: 8px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .node-title {
            font-size: 13px;
            font-weight: 600;
            opacity: 0.8;
        }

        .node-value {
            font-size: 15px;
            font-weight: bold;
            margin-top: 2px;
        }

        /* Posizionamento Nodi */
        #solar { top: 50px; left: 310px; }
        #solar .icon-wrapper { background-color: rgba(255, 183, 3, 0.1); border-color: var(--solar-color); fill: var(--solar-color); }
        
        #grid { top: 240px; left: 50px; }
        #grid .icon-wrapper { background-color: rgba(181, 23, 158, 0.1); border-color: var(--grid-color); fill: var(--grid-color); }

        #home { top: 240px; right: 50px; }
        #home .icon-wrapper { background-color: rgba(78, 223, 122, 0.1); border-color: var(--home-color); fill: var(--home-color); }

        #battery { bottom: 50px; left: 310px; }
        #battery .icon-wrapper { background-color: rgba(76, 201, 240, 0.1); border-color: var(--battery-color); fill: var(--battery-color); }

        /* Gestione Linee SVG */
        .svg-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .energy-line {
            fill: none;
            stroke: var(--line-bg);
            stroke-width: 6;
            stroke-linecap: round;
        }

        .flow-line {
            fill: none;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 8, 12;
            animation: dash 1.5s linear infinite;
            display: none; /* Nascosta di default, attivata via JS */
        }

        /* Animazioni di movimento flusso */
        @keyframes dash {
            to { stroke-dashoffset: -40; }
        }

        @keyframes dash-reverse {
            to { stroke-dashoffset: 40; }
        }

        .forward { animation: dash 1.5s linear infinite; }
        .reverse { animation: dash-reverse 1.5s linear infinite; }

        .title {
            text-align: center;
            margin: 0 0 10px 0;
            font-size: 18px;
            font-weight: 500;
            color: var(--title-color);
        }