/* ══════════════════════════════════════════
   MARKETING ENGINE HEALTH WIDGET
   /ui/css/base/ljh-health-widget.css
══════════════════════════════════════════ */

.mkt-health-widget {
    margin-top: 10px;
    padding: 8px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
}

.mkt-health-lamp {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.4s ease, background 0.4s ease;
}

.mkt-health-ok .mkt-health-lamp {
    background: radial-gradient(circle at 35% 35%,
        #5a1a1a 0%,
        #2a0a0a 60%,
        #1a0505 100%
    );
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.7),
        inset 0 -1px 3px rgba(255,255,255,0.04),
        0 0 0 3px rgba(60,15,15,0.4),
        0 0 0 5px rgba(40,8,8,0.2);
}

.mkt-health-alert .mkt-health-lamp {
    background: radial-gradient(circle at 35% 35%,
        #ff6a6a 0%,
        #cc1111 45%,
        #7a0000 100%
    );
    box-shadow:
        inset 0 2px 8px rgba(255,180,180,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.4),
        0 0 0 3px rgba(180,20,20,0.5),
        0 0 0 6px rgba(140,10,10,0.25),
        0 0 18px rgba(220,30,30,0.6),
        0 0 40px rgba(220,30,30,0.35),
        0 0 70px rgba(220,30,30,0.15);
    animation: mktLampPulse 1.8s ease-in-out infinite;
}

@keyframes mktLampPulse {
    0% {
        box-shadow:
            inset 0 2px 8px rgba(255,180,180,0.3),
            inset 0 -2px 6px rgba(0,0,0,0.4),
            0 0 0 3px rgba(180,20,20,0.5),
            0 0 0 6px rgba(140,10,10,0.25),
            0 0 18px rgba(220,30,30,0.6),
            0 0 40px rgba(220,30,30,0.35),
            0 0 70px rgba(220,30,30,0.15);
    }
    50% {
        box-shadow:
            inset 0 2px 8px rgba(255,180,180,0.4),
            inset 0 -2px 6px rgba(0,0,0,0.4),
            0 0 0 3px rgba(200,30,30,0.7),
            0 0 0 8px rgba(160,10,10,0.35),
            0 0 30px rgba(220,30,30,0.9),
            0 0 60px rgba(220,30,30,0.55),
            0 0 100px rgba(220,30,30,0.25);
    }
    100% {
        box-shadow:
            inset 0 2px 8px rgba(255,180,180,0.3),
            inset 0 -2px 6px rgba(0,0,0,0.4),
            0 0 0 3px rgba(180,20,20,0.5),
            0 0 0 6px rgba(140,10,10,0.25),
            0 0 18px rgba(220,30,30,0.6),
            0 0 40px rgba(220,30,30,0.35),
            0 0 70px rgba(220,30,30,0.15);
    }
}

.mkt-health-lamp-text {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
}

.mkt-health-ok .mkt-health-lamp-text {
    color: #3a1010;
    text-shadow: none;
}

.mkt-health-alert .mkt-health-lamp-text {
    color: #ffe066;
    text-shadow:
        0 0 6px rgba(255,220,80,0.9),
        0 0 14px rgba(255,200,40,0.6),
        0 0 28px rgba(255,180,0,0.3);
}

.mkt-health-detail {
    font-size: 10px;
    text-align: center;
}

.mkt-health-ok .mkt-health-detail {
    color: rgba(255,255,255,0.2);
}

.mkt-health-alert .mkt-health-detail {
    color: #ff9999;
}

.mkt-health-stop-btn,
.mkt-health-resume-btn {
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
}

.mkt-health-stop-btn {
    background: #c0392b;
    color: #fff;
}

.mkt-health-resume-btn {
    background: #27ae60;
    color: #fff;
}

.mkt-health-stop-btn:hover,
.mkt-health-resume-btn:hover {
    opacity: 0.85;
}