/* =========================================================
   FILLED STATUS BADGES
   ONLINE  = solid green
   OFFLINE = solid red + full badge blink
   Only status visuals are changed
   ========================================================= */

/* ONLINE ROW */
.monitor-table tbody tr.state-online,
.monitor-table tbody tr.online {
    background-color: #effcf5 !important;
}

.monitor-table tbody tr.state-online .device-cell,
.monitor-table tbody tr.online .device-cell {
    border-left-color: #0b9a49 !important;
}

/* ONLINE BADGE — FULL GREEN */
.status-badge.online,
.state-online .status-badge,
.online .status-badge {
    border: 2px solid #08783a !important;
    background: linear-gradient(180deg, #14a653 0%, #07883f 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(7,136,63,.10),
        0 5px 13px rgba(7,136,63,.24) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
}

.status-badge.online .status-light,
.state-online .status-light,
.online .status-light {
    background: #ffffff !important;
    border: 2px solid rgba(255,255,255,.65) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.16) !important;
}

/* OFFLINE ROW */
.monitor-table tbody tr.state-offline,
.monitor-table tbody tr.offline {
    background-color: #fff0f1 !important;
    animation: filledOfflineRowBlink 1.15s ease-in-out infinite !important;
}

.monitor-table tbody tr.state-offline .device-cell,
.monitor-table tbody tr.offline .device-cell {
    border-left-color: #e10e20 !important;
}

/* OFFLINE BADGE — FULL RED + FULL BADGE BLINK */
.status-badge.offline,
.state-offline .status-badge,
.offline .status-badge {
    border: 2px solid #b90012 !important;
    background: linear-gradient(180deg, #f32638 0%, #d4081b 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(225,14,32,.10),
        0 5px 13px rgba(225,14,32,.26) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.20) !important;
    animation: filledOfflineBadgeBlink .85s ease-in-out infinite !important;
}

.status-badge.offline .status-light,
.state-offline .status-light,
.offline .status-light {
    background: #ffffff !important;
    border: 2px solid rgba(255,255,255,.65) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.15) !important;
}

/* OFFLINE NODE-RED BUTTON */
.node-red-button.offline,
.state-offline .node-red-button,
.offline .node-red-button {
    border: 2px solid #d4081b !important;
    background: #ffffff !important;
    color: #d4081b !important;
    animation: filledOfflineButtonBlink 1s ease-in-out infinite !important;
}

/* ONLINE NODE-RED BUTTON */
.node-red-button.online,
.state-online .node-red-button,
.online .node-red-button {
    border-color: #17649c !important;
    background: #17649c !important;
    color: #ffffff !important;
}

@keyframes filledOfflineRowBlink {
    0%, 100% {
        background-color: #fff0f1;
    }
    50% {
        background-color: #ffd6da;
    }
}

@keyframes filledOfflineBadgeBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        background: linear-gradient(180deg, #f32638 0%, #d4081b 100%);
        box-shadow:
            0 0 0 4px rgba(225,14,32,.10),
            0 5px 13px rgba(225,14,32,.26);
    }
    50% {
        opacity: .38;
        transform: scale(1.04);
        background: linear-gradient(180deg, #ff4c5a 0%, #eb1226 100%);
        box-shadow:
            0 0 0 8px rgba(225,14,32,.16),
            0 7px 18px rgba(225,14,32,.34);
    }
}

@keyframes filledOfflineButtonBlink {
    0%, 100% {
        background-color: #ffffff;
        color: #d4081b;
    }
    50% {
        background-color: #d4081b;
        color: #ffffff;
    }
}

/* Force animations even if OS reduced-motion is enabled */
@media (prefers-reduced-motion: reduce) {
    .monitor-table tbody tr.state-offline,
    .monitor-table tbody tr.offline {
        animation: filledOfflineRowBlink 1.15s ease-in-out infinite !important;
    }

    .status-badge.offline,
    .state-offline .status-badge,
    .offline .status-badge {
        animation: filledOfflineBadgeBlink .85s ease-in-out infinite !important;
    }

    .node-red-button.offline,
    .state-offline .node-red-button,
    .offline .node-red-button {
        animation: filledOfflineButtonBlink 1s ease-in-out infinite !important;
    }
}