/* One persistent overlay outside #app survives renderer DOM replacements.
 * Position the workspace once; only the visual spinner rotates. */
body[data-layout="admin"] .main:has(> #app.is-page-loading) {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body[data-layout="admin"] #app.is-page-loading {
  min-height: 0;
}
body[data-layout="admin"] #app:is(.is-page-loading, .is-page-ready) {
  transform: none;
  animation: none;
  transition: none;
  opacity: 1;
}
/* Retire the legacy independently positioned circle and backdrop. */
body[data-layout="admin"] #app:is(.is-page-loading, .is-page-ready)::before,
body[data-layout="admin"] #app:is(.is-page-loading, .is-page-ready)::after {
  content: none;
}
.admin-route-loader {
  position: fixed;
  inset: var(--admin-topbar-h) 0 0 var(--admin-sidebar-width);
  z-index: 10002;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--admin-text-secondary, #64748b);
  font-size: 14px;
  text-align: center;
}
.admin-route-loader[hidden], body:not([data-layout="admin"]) .admin-route-loader { display: none; }
.admin-route-loader__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.admin-route-loader__spinner {
  box-sizing: border-box;
  flex: none;
  width: 40px;
  height: 40px;
  border-width:3px;border-style:solid;
  border-radius: 50%;
}