:root {
    --bg-top: #e8efe8;
    --bg-bottom: #cfded2;
    --panel-border: rgba(71, 88, 71, 0.18);
    --ink: #243127;
    --shadow: 0 28px 70px rgba(35, 47, 38, 0.18);
    --status-ok: #2f9e44;
    --status-warn: #d9480f;
    --status-wait: #d4a017;
    --canvas-width: min(94vw, 1400px);
    --label-size: clamp(0.62rem, 0.6vw, 0.86rem);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Inter", "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 24%),
        radial-gradient(circle at right 14% bottom 12%, rgba(144, 173, 146, 0.26), transparent 18%),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    padding: 24px 16px 40px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 85%);
}

.status-indicator {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(63, 82, 67, 0.16);
    box-shadow: 0 10px 30px rgba(38, 53, 42, 0.14);
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: opacity 240ms ease, transform 240ms ease, background-color 240ms ease, color 240ms ease;
}

.status-indicator::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-wait);
    box-shadow: 0 0 0 6px rgba(212, 160, 23, 0.14);
}

.status-indicator.connected::before {
    background: var(--status-ok);
    box-shadow: 0 0 0 6px rgba(47, 158, 68, 0.16);
}

.status-indicator.disconnected::before {
    background: var(--status-warn);
    box-shadow: 0 0 0 6px rgba(217, 72, 15, 0.14);
}

.status-indicator.reconnecting::before {
    background: var(--status-wait);
    box-shadow: 0 0 0 6px rgba(212, 160, 23, 0.14);
}

.dashboard-container {
    position: relative;
    width: var(--canvas-width);
    aspect-ratio: 2292 / 1452;
    margin: 44px auto 0;
    padding: 0;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.94), rgba(236, 243, 236, 0.88));
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
}

.dashboard-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 20%, transparent 80%, rgba(36, 49, 39, 0.08));
}

.base-view {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.interactive-element {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
    transform: translate(-50%, -50%);
}

.interactive-element.clickable {
    cursor: pointer;
}

.state-img,
.control-button img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(41, 54, 42, 0.2));
    transition: transform 180ms ease, filter 180ms ease;
}

.interactive-element.clickable:hover .state-img,
.control-button:hover img {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 14px 24px rgba(41, 54, 42, 0.28));
}

.interactive-element.clickable:active .state-img,
.control-button:active img {
    transform: translateY(0) scale(0.98);
}

.element-label {
    /* centered on the device position, overtop the image, with a semi-transparent backdrop for readability */
    position: absolute;
    /* dynamic positioning based on device */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--label-size);
    color: var(--ink);
    /* Hide device names by default */
    opacity: 0;
    transform: scale(2);
    pointer-events: none;
    /* Prevent blocking hover bounds */
    /* Slow fade out when mouse leaves */
    transition: opacity 1s ease 2s, transform 1s ease 2s;
}

.interactive-element:hover .element-label {
    opacity: 0.8;
    transform: scale(2.5);
    /* Delay of 5s on hover, taking 2s to complete fade-in */
    transition: opacity 1s ease 2s, transform 1s ease 2s;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    z-index: 200;
}

/* Pulsing glow for clickable valves to clearly indicate clickability */
@keyframes clickablePulse {
    0% {
        filter: drop-shadow(0 4px 12px rgba(47, 158, 68, 0.3));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 4px 22px rgba(47, 158, 68, 0.75));
        transform: scale(1.03);
    }

    100% {
        filter: drop-shadow(0 4px 12px rgba(47, 158, 68, 0.3));
        transform: scale(1);
    }
}

#valve-municipal.clickable .state-img,
#valve-kitchen.clickable .state-img,
#valve-borehole.clickable .state-img {
    animation: clickablePulse 2.5s infinite ease-in-out;
}

#valve-municipal.clickable:hover .state-img,
#valve-kitchen.clickable:hover .state-img,
#valve-borehole.clickable:hover .state-img {
    animation-play-state: paused;
}


#tank-irrigation {
    top: 79%;
    left: 11.5%;
    width: 20%;
}

#tank-kitchen {
    top: 79%;
    left: 40%;
    width: 20%;
}

#pump-borehole {
    top: 41%;
    left: 28%;
    width: 7%;
}

#pump-pressure {
    top: 89%;
    left: 58%;
    width: 8%;
}

#pump-transfer {
    top: 89%;
    left: 24%;
    width: 7%;
}

#valve-municipal {
    top: 53%;
    left: 67.7%;
    width: 4.7%;
    z-index: 150;
}

#feed-kitchen {
    top: 52.1%;
    left: 37.8%;
    width: 15.3%;
    z-index: 100;
}

#feed-kitchen .state-img {
    object-fit: contain;
}

#valve-kitchen {
    top: 53%;
    left: 61.8%;
    width: 4.7%;
    z-index: 150;
}

#valve-borehole {
    top: 53%;
    left: 73.5%;
    width: 4.7%;
    z-index: 150;
}

#feed-pool {
    top: 58.9%;
    left: 52.5%;
    width: 10.9%;
    z-index: 100;
}

#feed-pool .state-img {
    object-fit: contain;
}

#irrigation-system {
    top: 48%;
    left: 12%;
    width: 15%;
}

.control-panel {
    position: absolute;
    left: 63%;
    top: 12%;
    z-index: 150;
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 390;
    grid-column: 1;
    gap: 18px;
    grid-row: 4;
    padding: 14%;
}

.control-button {
    width: 180;
    height: 100;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    cursor: pointer;
    gap: 15;
}