/* Continuous Surface Wave Layer Animations */

.dashboard-wrapper {
    width: 100%;
    max-width: 345px;
    height: 315px;
    box-sizing: border-box;
    border-radius: 5px;
}

.svg-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    color: #38bdf8;
    font-family: 'Segoe UI', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
}

.wave-anim {
    animation: waveSwipe 3s linear infinite;
}

.wave-anim-fast {
    animation: waveSwipe 2.2s linear infinite reverse;
}

@keyframes waveSwipe {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Typography Matrix */
.lbl-header {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 800;
    fill: #38bdf8;
    letter-spacing: 1px;
}

.lbl-sub {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    fill: #64748b;
}

.txt-val {
    font-family: 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    fill: #38bdf8;
}

.txt-val-hot {
    font-family: 'Consolas', monospace;
    font-size: 16px;
    font-weight: 700;
    fill: #f43f5e;
}

.txt-inside {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    fill: #ffffff;
    text-anchor: middle;
}

.txt-inside-sub {
    font-family: 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    fill: #cbd5e1;
    text-anchor: middle;
}

/* Plumbing Infrastructure Flow Graphics */
.pipe {
    fill: none;
    stroke: #1e293b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pipe-live {
    stroke: #0ea5e9;
    stroke-dasharray: 4, 3;
    animation: flow 0.8s linear infinite;
}

.pipe-out-ot2 {
    stroke: #10b981;
    stroke-dasharray: 4, 3;
    animation: flow 0.9s linear infinite;
}

.pipe-out-ot3 {
    stroke: #a855f7;
    stroke-dasharray: 4, 3;
    animation: flow 1.1s linear infinite;
}

@keyframes flow {
    to {
        stroke-dashoffset: -7;
    }
}

.dot-green {
    fill: #10b981;
    filter: drop-shadow(0 0 2px #10b981);
}

.solar-tube {
    stroke: #38bdf8;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.9;
}

/* Smooth JavaScript Transition Adjustments */
.fluid-body, .fluid-wave {
    transition: y 0.4s ease-out, height 0.4s ease-out;
}