/* =========================================================
   PAGE LOADER
   Global page-load and busy overlays used by app shell helpers.

   Sections:
   01. Top loading bar
   02. Full-page busy overlay
   03. Busy panel
   04. Busy state guard
   05. Loading animation
   ========================================================= */

/* ---------------------------------------------------------
   01. Top loading bar
   --------------------------------------------------------- */
.page-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}

.page-loading-bar::before {
  content: "";
  position: absolute;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8, #60a5fa);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.45);
}

.page-loading-bar.is-visible {
  opacity: 1;
}

.page-loading-bar.is-visible::before {
  animation: pageLoadingSlide 1s ease-in-out infinite;
}

/* ---------------------------------------------------------
   02. Full-page busy overlay
   --------------------------------------------------------- */
.page-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.38);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--app-btn-transition);
}

.page-busy-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ---------------------------------------------------------
   03. Busy panel
   --------------------------------------------------------- */
.page-busy-panel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  max-width: min(92vw, 420px);
  padding: 16px 22px;
  border: 1px solid var(--app-help-tooltip-border);
  border-radius: 8px;
  background: var(--app-surface-white);
  color: var(--app-text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 18px 38px rgba(16, 39, 83, 0.16);
}

.page-busy-spinner {
  flex: 0 0 auto;
}

.page-busy-label {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   04. Busy state guard
   --------------------------------------------------------- */
.page-is-busy {
  cursor: wait;
}

.page-is-busy body {
  overflow: hidden;
}

/* ---------------------------------------------------------
   05. Loading animation
   --------------------------------------------------------- */
@keyframes pageLoadingSlide {
  0% {
    left: -35%;
  }
  100% {
    left: 100%;
  }
}