/* Global loading overlay styles */
#global-loading-overlay {
  position: fixed;
  inset: 0;
  /* Very large z-index to ensure overlay sits above all UI layers (sidebar, offcanvas, modals) */
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  transition: opacity 280ms ease, visibility 280ms ease;
  opacity: 1;
  visibility: visible;
}
#global-loading-overlay.gl-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
#global-loading-overlay .gl-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  min-width: 180px;
  max-width: 420px;
}
.gl-box { -webkit-overflow-scrolling: touch; }
.gl-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: rgba(255,255,255,0.95);
  animation: gl-spin 1s linear infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }
.gl-text { font-weight: 600; font-size: 1rem; }

/* Slight color inversion in dark-mode to keep contrast */
html.dark-mode #global-loading-overlay .gl-box { background: rgba(10,18,28,0.7); }

/* Hide overlay quickly if accessed via reduced motion */
@media (prefers-reduced-motion: reduce) {
  #global-loading-overlay, #global-loading-overlay * { animation: none !important; transition: none !important; }
}