/* Device status and active-recording cues: distinct from the live-player RSSI bars. */
.device{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.device:has(.stateBadge.online){border-color:color-mix(in srgb,var(--device-online-color,#16885c) 58%,var(--line));background:linear-gradient(118deg,color-mix(in srgb,var(--device-online-color,#16885c) 7%,var(--surface)),var(--surface) 58%)}
.device:has(.stateBadge.offline){border-color:color-mix(in srgb,var(--muted) 24%,var(--line))}
.device:before{content:"";position:absolute;z-index:2;left:-1px;top:14px;bottom:14px;width:5px;border-radius:0 5px 5px 0;background:transparent;pointer-events:none}
.device:has(.stateBadge.online):before{background:var(--device-online-color,#16885c);box-shadow:0 0 14px color-mix(in srgb,var(--device-online-color,#16885c) 58%,transparent)}
.device:has(.stateBadge.offline):before{background:color-mix(in srgb,var(--muted) 48%,var(--line))}
.deviceStateLine{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.device .stateBadge{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em}
.device .stateBadge.online{background:color-mix(in srgb,var(--device-online-color,#16885c) 14%,var(--surface));color:color-mix(in srgb,var(--device-online-color,#16885c) 72%,var(--text));border:1px solid color-mix(in srgb,var(--device-online-color,#16885c) 34%,var(--line))}
.device .stateBadge.offline{background:var(--surface-raised);color:var(--muted)}
.device .stateDot{width:9px;height:9px}
.device:has(.stateBadge.online) .stateDot{background:var(--device-online-color,#16885c);box-shadow:0 0 0 3px color-mix(in srgb,var(--device-online-color,#16885c) 20%,transparent),0 0 8px color-mix(in srgb,var(--device-online-color,#16885c) 50%,transparent)}
.device:has(.stateBadge.offline) .stateDot{width:8px;height:8px}
.device:has(.stateBadge.offline) .deviceGlyph{color:var(--muted);opacity:.78}
.deviceSignal{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;line-height:1.2}
.deviceSignalSegments{display:inline-flex;align-items:center;gap:2px}
.deviceSignalSegments i{display:block;width:5px;height:4px;border-radius:3px;background:var(--line)}
.deviceSignalSegments i.active{background:var(--accent)}
html[data-theme=dark] .device:has(.stateBadge.online){border-color:color-mix(in srgb,var(--device-online-color,#16885c) 64%,var(--line));background:linear-gradient(118deg,color-mix(in srgb,var(--device-online-color,#16885c) 24%,var(--surface)),var(--surface) 62%)}
html[data-theme=dark] .device .stateBadge.online{background:color-mix(in srgb,var(--device-online-color,#16885c) 30%,var(--surface));color:color-mix(in srgb,var(--device-online-color,#16885c) 34%,white);border-color:color-mix(in srgb,var(--device-online-color,#16885c) 55%,var(--line))}
html[data-theme=dark] .device:has(.stateBadge.online) .stateDot{background:color-mix(in srgb,var(--device-online-color,#16885c) 68%,white);box-shadow:0 0 0 3px color-mix(in srgb,var(--device-online-color,#16885c) 25%,transparent),0 0 10px color-mix(in srgb,var(--device-online-color,#16885c) 65%,transparent)}
.device.is-recording{border-color:color-mix(in srgb,var(--danger) 54%,var(--line));box-shadow:0 8px 28px color-mix(in srgb,var(--danger) 9%,transparent)}
.device.is-recording:before{background:var(--danger);box-shadow:0 0 12px color-mix(in srgb,var(--danger) 36%,transparent)}
.device .recordingPill{gap:7px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--danger) 22%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger);font-size:10px;font-weight:600;letter-spacing:.035em}
.device .recordingPill:before{width:7px;height:7px;animation:deviceRecordingPulse 1.6s ease-in-out infinite}
@keyframes deviceRecordingPulse{50%{opacity:.42;transform:scale(.78)}}
@media(prefers-reduced-motion:reduce){.device,.device .recordingPill:before{transition:none;animation:none}}
@media(max-width:560px){.deviceStateLine{gap:6px}.deviceSignal{padding:3px 6px}}
.device .deviceActions button{min-height:40px;padding:8px 10px}
@media(max-width:560px){.device .deviceActions button{min-height:42px;padding:8px 7px}}
/* Compact device cards while keeping status, alarm, recording and actions easy to scan. */
.device .speechAlarmToggle{padding-top:4px;padding-bottom:3px}
.device .deviceAlarmToggles{min-width:94px;transform:translateX(12px)}
.device .speechAlarmHeader .deviceHeader{min-height:0}
.device .deviceHeader{min-height:0;padding:12px 48px 9px 16px}
.device .speechAlarmHeader .deviceHeader{padding:12px 48px 9px 16px}
.device .deviceHeaderInfo{gap:5px}
.device .deviceGlyph{width:29px;height:29px;margin-bottom:0;border-radius:8px}
.device .stateBadge{padding:3px 8px}
.device .deviceSignal{padding:2px 6px}
.device .speechAlarmToggle{min-height:28px;margin:0;gap:6px;font-size:10px}
.device .speechAlarmToggle input[type=checkbox]{width:16px;height:16px;min-height:16px;flex-basis:16px}
.device .speechAlarmInfo{min-height:0;padding:1px 16px 2px}
.device .speechAlarmStatus{font-size:10px;line-height:1.35}
.device .deviceDetails{padding-inline:16px}
.device .deviceActions{margin-top:5px;padding:8px 14px 12px;gap:7px}
@media(max-width:560px){
 .device .deviceHeader,.device .speechAlarmHeader .deviceHeader{padding:10px 44px 8px 14px}
 .device .speechAlarmToggle{min-height:27px;margin:0}
 .device .speechAlarmInfo{padding-inline:14px}
 .device .deviceDetails{padding-inline:14px}
 .device .deviceActions{margin-top:4px;padding:7px 12px 10px;gap:6px}
}

.device .deviceActions button:disabled{opacity:.48;filter:saturate(.35);cursor:not-allowed;box-shadow:none}