/*
 * Live-updates widget styles. Loaded by <sb-live-updates /> via a <link>
 * referencing the static web asset -- never inlined into a <style> tag.
 *
 * contain: layout style scopes layout / paint invalidation to each widget
 * so a row-height change in one widget cannot cascade reflow up through
 * its ancestors.
 *
 * view-transition-name: none opts every widget out of the browser's view-
 * transition API. The earlier opt-IN with a 160ms cross-fade was perceived
 * by operators as a flash on every SignalR beacon (multiple per second);
 * the right pattern is the two-region contract -- chrome stays put, only
 * the [data-sb-data-region] inner container innerHTML-swaps, and there is
 * nothing to cross-fade.
 */
[data-sb-widget] {
    contain: layout style;
    view-transition-name: none;
}

/*
 * Connection-state status dot. The coordinator (sb-live-updates.js) sets
 * sb-connected / sb-disconnected / sb-connecting / sb-paused on the dot
 * via setStatus(). The dashboard's CSS variables are reused so the dot
 * picks up the active daisyUI theme's colours.
 */
.sb-connected    { background: var(--color-success, #22c55e); }
.sb-disconnected { background: var(--color-error,   #ef4444); }
.sb-connecting   { background: var(--color-warning, #f59e0b); animation: sb-status-pulse 1.5s infinite; }
.sb-paused       { background: rgba(148, 163, 184, 0.55); }

@keyframes sb-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/*
 * Toggle button styles: clear visual difference between live and paused
 * so the operator sees at a glance whether updates are flowing.
 */
#sb-live-toggle[data-state="paused"] {
    background: rgba(148, 163, 184, 0.18);
    color: var(--color-base-content);
    opacity: 0.85;
}
#sb-live-toggle[data-state="live"]:hover { opacity: 1; }