/* ZigBee Matter Manager — Device Status Enhancements */

/* Status indicator dot (replaces text badges for online/offline) */

.zbm-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

.zbm-status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.zbm-status-dot.offline {
    background: #6b7280;
}

/* Pulsing animation for actively heating devices */
.zbm-status-dot.heating {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
    animation: zbm-pulse 1.5s ease-in-out infinite;
}

@keyframes zbm-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.7); }
}


/* Battery indicator */

.zbm-battery {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
}

.zbm-battery.good {
    color: #22c55e;
}

.zbm-battery.medium {
    color: #eab308;
}

.zbm-battery.low {
    color: #ef4444;
    font-weight: 600;
}

.zbm-battery.critical {
    color: #ef4444;
    font-weight: 700;
    animation: zbm-blink 1.5s ease-in-out infinite;
}

@keyframes zbm-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* Signal strength bars (LQI visual) */

.zbm-signal {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 14px;
    vertical-align: middle;
}

.zbm-signal-bar {
    width: 3px;
    border-radius: 1px;
    transition: background-color 0.3s;
}

.zbm-signal-bar.active.excellent { background: #22c55e; }
.zbm-signal-bar.active.good { background: #84cc16; }
.zbm-signal-bar.active.fair { background: #eab308; }
.zbm-signal-bar.active.poor { background: #ef4444; }
.zbm-signal-bar.inactive { background: #e5e7eb; }

[data-theme="dark"] .zbm-signal-bar.inactive { background: #374151; }


/* Inline device type icons */

.zbm-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.zbm-device-icon.router {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.zbm-device-icon.end-device {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.zbm-device-icon.coordinator {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

[data-theme="dark"] .zbm-device-icon.router { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
[data-theme="dark"] .zbm-device-icon.end-device { background: rgba(156, 163, 175, 0.12); color: #9ca3af; }
[data-theme="dark"] .zbm-device-icon.coordinator { background: rgba(192, 132, 252, 0.12); color: #c084fc; }


/* Status badges column enhancement */

.zbm-status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Heating indicator mini badge */

.zbm-heating-indicator {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
}

.zbm-heating-indicator i {
    font-size: 0.6rem;
}

[data-theme="dark"] .zbm-heating-indicator {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.zbm-heating-off {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    background: rgba(107, 114, 128, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
}

.zbm-heating-off i {
    font-size: 0.6rem;
}

[data-theme="dark"] .zbm-heating-off {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}


/* Temperature mini display */

.zbm-temp-mini {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.zbm-temp-mini i {
    font-size: 0.6rem;
}

.zbm-temp-mini.warm { color: #f59e0b; }
.zbm-temp-mini.hot { color: #ef4444; }
.zbm-temp-mini.cold { color: #3b82f6; }
.zbm-contact-closed { color: #10b981; font-size: 0.7rem; font-weight: 600; }
.zbm-contact-open { color: #ef4444; font-size: 0.7rem; font-weight: 600; }
.zbm-motion-active { color: #ef4444; font-size: 0.7rem; font-weight: 600; }
.zbm-motion-clear { color: #10b981; font-size: 0.7rem; font-weight: 600; }

[data-theme="dark"] .zbm-temp-mini { color: #9ca3af; }
[data-theme="dark"] .zbm-temp-mini.warm { color: #fbbf24; }
[data-theme="dark"] .zbm-temp-mini.hot { color: #f87171; }
[data-theme="dark"] .zbm-temp-mini.cold { color: #60a5fa; }


/* Thermostat / TRV extras */
.zbm-setpoint-mini {
    color: #8b5cf6;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.zbm-setpoint-mini i { font-size: 0.6rem; }

.zbm-mode-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}
.zbm-mode-badge.heat  { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
.zbm-mode-badge.auto  { color: #0891b2; background: rgba(8, 145, 178, 0.1); }
.zbm-mode-badge.cool  { color: #2563eb; background: rgba(37, 99, 235, 0.1); }
.zbm-mode-badge.off   { color: #6b7280; background: rgba(107, 114, 128, 0.1); }
.zbm-mode-badge.other { color: #6b7280; background: rgba(107, 114, 128, 0.08); }

.zbm-demand-mini {
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.zbm-demand-mini i   { font-size: 0.55rem; }
.zbm-demand-mini.low  { color: #6b7280; }
.zbm-demand-mini.med  { color: #f59e0b; }
.zbm-demand-mini.high { color: #ef4444; }

[data-theme="dark"] .zbm-setpoint-mini { color: #a78bfa; }
[data-theme="dark"] .zbm-mode-badge.heat  { background: rgba(220, 38, 38, 0.18); color: #f87171; }
[data-theme="dark"] .zbm-mode-badge.auto  { background: rgba(8, 145, 178, 0.18); color: #22d3ee; }
[data-theme="dark"] .zbm-mode-badge.cool  { background: rgba(37, 99, 235, 0.18); color: #60a5fa; }
[data-theme="dark"] .zbm-mode-badge.off   { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
[data-theme="dark"] .zbm-demand-mini.low  { color: #9ca3af; }
[data-theme="dark"] .zbm-demand-mini.med  { color: #fbbf24; }
[data-theme="dark"] .zbm-demand-mini.high { color: #f87171; }

/* On/Off status mini badges */

.zbm-onoff-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}

.zbm-onoff-badge.on {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.zbm-onoff-badge.off {
    color: #6b7280;
    background: rgba(107, 114, 128, 0.08);
}

.zbm-onoff-badge i {
    font-size: 0.55rem;
}

[data-theme="dark"] .zbm-onoff-badge.on {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .zbm-onoff-badge.off {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
}

/* Cover / blinds status */
.zbm-cover-open    { color: #3b82f6; font-size: 0.7rem; font-weight: 600; }
.zbm-cover-closed  { color: #6b7280; font-size: 0.7rem; font-weight: 600; }
.zbm-cover-partial { color: #f59e0b; font-size: 0.7rem; font-weight: 600; }
.zbm-cover-pos     { color: var(--text-muted, #6b7280); font-size: 0.65rem; margin-left: 2px; }
.zbm-cover-tilt    { color: var(--text-muted, #6b7280); font-size: 0.65rem; margin-left: 4px; }

[data-theme="dark"] .zbm-cover-open    { color: #60a5fa; }
[data-theme="dark"] .zbm-cover-closed  { color: #9ca3af; }
[data-theme="dark"] .zbm-cover-partial { color: #fbbf24; }

/* --- Setup-mode / calibration-needed badge ---
   Pulses amber to draw the user's attention to a TRV that's in E11
   commissioning state or has a non-ready calibration status. The pulse
   uses a separate keyframe (zbm-setup-pulse) so it doesn't share timing
   or colour with the heating-active pulse on the status dot. */

.zbm-setup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    vertical-align: middle;
    cursor: help;
    animation: zbm-setup-pulse 1.6s ease-in-out infinite;
}

.zbm-setup-badge i {
    font-size: 0.75rem;
}

/* "Calibrating" state — softer pulse, blue tint, the device is doing
   the right thing, just hasn't finished. */
.zbm-setup-badge.calibrating {
    color: #1e40af;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    animation: zbm-setup-pulse-blue 2s ease-in-out infinite;
}

/* "Cal error" — solid red, urgent, calibration genuinely failed. */
.zbm-setup-badge.error {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    animation: zbm-setup-pulse-red 1.4s ease-in-out infinite;
}

@keyframes zbm-setup-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
        transform: scale(1.04);
    }
}

@keyframes zbm-setup-pulse-blue {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

@keyframes zbm-setup-pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
        transform: scale(1.05);
    }
}

/* Dark-mode overrides — preserve contrast against dark row backgrounds. */
[data-theme="dark"] .zbm-setup-badge {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
}

[data-theme="dark"] .zbm-setup-badge.calibrating {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
}

[data-theme="dark"] .zbm-setup-badge.error {
    color: #f87171;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.55);
}

/* Respect users who've opted out of motion (battery-saving / accessibility). */
@media (prefers-reduced-motion: reduce) {
    .zbm-setup-badge,
    .zbm-setup-badge.calibrating,
    .zbm-setup-badge.error {
        animation: none;
    }
}

/* Status dots and the critical-battery badge loop forever. Colour and weight
   already carry the state, so reduced motion just stops the throb. */
@media (prefers-reduced-motion: reduce) {
    .zbm-status-dot.heating,
    .zbm-battery.critical {
        animation: none;
    }
}