/* Device tiles and headers: status shown by a coloured left edge. */
.device-tile, [data-device-header] { border-left: 4px solid #adb5bd; transition: border-color .3s, opacity .3s; }
.tile-online  { border-left-color: #198754 !important; }
.tile-offline { border-left-color: #dc3545 !important; }
.tile-inactive { border-left-color: #6c757d !important; opacity: .65; }
.device-tile:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }
.device-name { color: #212529; }
.device-location, .device-meta { color: #6c757d; font-size: .85rem; }
.tile-divider { opacity: .15; }
.text-orange { color: #fd7e14 !important; }

/* Activity feed */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #198754;
            margin-right: 4px; animation: live-pulse 1.6s infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.event-new { animation: event-flash 2s ease-out; }
@keyframes event-flash { from { background-color: #d1e7dd; } to { background-color: transparent; } }

/* Busy overlay while a lock action is in progress */
.lock-busy { position: fixed; inset: 0; background: rgba(255,255,255,.65); z-index: 2000;
             display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.lock-busy-box { background: #fff; border-radius: .75rem; padding: 1.5rem 2rem; text-align: center;
                 box-shadow: 0 .5rem 2rem rgba(0,0,0,.15); max-width: 320px; }

/* Honest live status (set by realtime.js) */
.live-off .live-dot { background: #c3ccd5 !important; animation: none !important; }
.live-off .live-label { color: #8a99a8; }