/* Top bar loading indicator styling */
.topbar-loading-indicator {
  position: relative;
}

/* Hidden by default; we'll toggle visibility when app is loading */
.topbar-loading-indicator::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #58c0c2; /* SECONDARY_COLOR */
  border-top-color: transparent;
  display: inline-block;
  animation: topbar-spin 0.9s linear infinite;
  visibility: hidden;
}

.topbar-loading-indicator span {
  visibility: hidden;
}

/* Show spinner and text when any Dash callback is running.
   Dash injects a div._dash-loading while callbacks are active.
   Use :has to detect presence and toggle visibility. */
body:has(div._dash-loading) .topbar-loading-indicator::before,
body:has(div._dash-loading) .topbar-loading-indicator span,
body.app-loading .topbar-loading-indicator::before,
body.app-loading .topbar-loading-indicator span {
  visibility: visible;
}

@keyframes topbar-spin {
  to { transform: rotate(360deg); }
}