/* Small pieces Tailwind utilities do not cover. Colours come from the design tokens. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    user-select: none;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #303444; border-radius: 4px; }
input[type='date'], input[type='number'], select { color-scheme: dark; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Live indicator states, set from JavaScript. */
.live-on #live-dot, .live-on #live-ping { background-color: #10b981; }
.live-on #live-label { color: #4edea3; }
.live-off #live-dot, .live-off #live-ping { background-color: #ffb4ab; }
.live-off #live-label { color: #ffb4ab; }

/* A device that is offline shows its last known values dimmed, never as live readings. */
.is-stale { opacity: 0.55; filter: grayscale(0.4); }

@keyframes pulse-ring { 0%, 100% { transform: scale(0.9); opacity: 0.9; } 50% { transform: scale(1.3); opacity: 0.2; } }
.beacon-glow { animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@media (prefers-reduced-motion: reduce) {
    .animate-ping, .animate-pulse, .beacon-glow { animation: none !important; }
}