/* Loading indicators: top bar for page changes, section overlay for actions. */
:root { --app-busy-color: #d97706; }

.app-nav-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .15s; }
.app-nav-bar.is-active { opacity: 1; }
.app-nav-bar::before { content: ""; position: absolute; top: 0; height: 100%; background: var(--app-busy-color); animation: app-bar-slide 1.1s ease-in-out infinite; }
@keyframes app-bar-slide { 0% { left: -40%; width: 40%; } 60% { left: 60%; width: 45%; } 100% { left: 100%; width: 40%; } }

.app-busy-overlay { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: .6rem; border-radius: inherit;
    background: rgba(255, 255, 255, .78); color: #374151; font-size: .875rem; font-weight: 500; cursor: progress; }
.dark .app-busy-overlay { background: rgba(17, 24, 39, .78); color: #e5e7eb; }
.app-busy-spinner { width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 2px solid rgba(127, 127, 127, .3); border-top-color: var(--app-busy-color); animation: app-spin .7s linear infinite; flex: none; }
@keyframes app-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .app-nav-bar::before { left: 0; width: 100%; animation: app-pulse 1.2s ease-in-out infinite; }
    .app-busy-spinner { animation: app-pulse 1.2s ease-in-out infinite; }
}
@keyframes app-pulse { 50% { opacity: .35; } }