.ui-state { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: .375rem; }
.ui-state-error { color: #842029; background: #f8d7da; }
.ui-state-empty { color: #495057; background: #f8f9fa; }
.ui-state-spinner { display: inline-block; width: 1rem; height: 1rem; border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-state-spin .75s linear infinite; }
.ui-state-spinner-sm { width: .8rem; height: .8rem; border-width: .12em; }
.ui-state-retry { margin-left: auto; }
.ui-refreshing { opacity: .7; }
.ui-offline { color: #664d03; background: #fff3cd; }
[hidden] { display: none !important; }
body > .d-flex > .sidebar ~ .flex-grow-1 { min-width: 0; }
@keyframes ui-state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-state-spinner { animation: none; } }
@media (max-width: 768px) {
  .topbar { padding: 12px 16px !important; }
  .topbar > .d-flex:last-child { flex-direction: column; align-items: flex-end !important; gap: 0 !important; }
  .topbar #pageTitle, .topbar #egressIp, .topbar #clock { white-space: nowrap; }
  .content.wide .card-header { flex-direction: column; align-items: stretch !important; gap: .75rem; }
}