/* ==========================================================
   Coralina Edge Network
   File: css/gauges.css
   Version: 1.0
   ========================================================== */

.gauge-svg{

    width:100%;
    height:100%;

    overflow:visible;

    transform:rotate(-135deg);

    filter:drop-shadow(0 10px 18px rgba(0,0,0,.08));

}

.gauge-track{

    fill:none;

    stroke:#edf0f4;

    stroke-width:14;

}

.gauge-progress{

    fill:none;

    stroke:var(--primary);

    stroke-width:14;

    stroke-linecap:round;

    stroke-dasharray:553;

    stroke-dashoffset:553;

    transition:

        stroke-dashoffset .8s ease,

        stroke .4s ease;

}

.cache-progress{

    stroke:url(#gradCache);

}

.edge-progress{

    stroke:#f00606;

}

.throughput-progress{

    stroke:#ff4d4d;

}

.latency-progress{

    stroke:#d60000;

}

.connections-progress{

    stroke:#ff3030;

}

.storage-progress{

    stroke:#f45a5a;

}

.needle{

    stroke:#2d333b;

    stroke-width:4;

    stroke-linecap:round;

    transform-origin:110px 110px;

    transition:transform .9s cubic-bezier(.22,1,.36,1);

}

.needle-center{

    fill:#2d333b;

    stroke:#ffffff;

    stroke-width:3;

}

.gauge-card{

    position:relative;

    overflow:hidden;

}

.gauge-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(240,6,6,.06),
            transparent 65%
        );

    opacity:0;

    transition:opacity .35s ease;

    pointer-events:none;

}

.gauge-card:hover::before{

    opacity:1;

}

.gauge-card:hover .gauge-svg{

    transform:
        rotate(-135deg)
        scale(1.03);

}

.gauge-card:hover .needle{

    filter:drop-shadow(0 0 8px rgba(240,6,6,.18));

}

.gauge{

    position:relative;

}

.gauge::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.98) 0%,
            rgba(248,248,248,.95) 72%,
            rgba(240,240,240,.85) 100%
        );

    box-shadow:

        inset 0 3px 10px rgba(255,255,255,.95),

        inset 0 -8px 18px rgba(0,0,0,.04),

        0 2px 10px rgba(0,0,0,.04);

}

.gauge-svg{

    position:relative;

    z-index:2;

}

.gauge-value{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    z-index:3;

}

.gauge-value .number{

    display:block;

    font-size:34px;

    font-weight:700;

    color:var(--text);

}

.gauge-value .unit{

    display:block;

    margin-top:4px;

    font-size:13px;

    color:var(--text-light);

    text-transform:uppercase;

    letter-spacing:1px;

}

.gauge-scale{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.gauge-scale line{

    stroke:#d9dee5;

    stroke-width:2;

    transform-origin:110px 110px;

}

.gauge-scale line.major{

    stroke:#c8ced7;

    stroke-width:3;

}

.gauge-card:hover .gauge-progress{

    filter:

        drop-shadow(0 0 4px rgba(240,6,6,.25))

        drop-shadow(0 0 10px rgba(240,6,6,.15));

}

.gauge-card.warning .gauge-progress{

    stroke:#ff9800;

}

.gauge-card.warning .value{

    color:#ff9800;

}

.gauge-card.danger .gauge-progress{

    stroke:#e53935;

}

.gauge-card.danger .value{

    color:#e53935;

}

.gauge-card.success .gauge-progress{

    stroke:#16b364;

}

.gauge-card.success .value{

    color:#16b364;

}

@keyframes gaugeGlow{

    0%{

        filter:drop-shadow(0 0 2px rgba(240,6,6,.12));

    }

    50%{

        filter:drop-shadow(0 0 10px rgba(240,6,6,.28));

    }

    100%{

        filter:drop-shadow(0 0 2px rgba(240,6,6,.12));

    }

}

.gauge-card.active .gauge-progress{

    animation:gaugeGlow 2.5s infinite;

}