/* Shared by the pre-JavaScript placeholder and every generic React fallback. */
.page-loading {
  --loading-sidebar: 0px;
  --loading-top: 0px;
  --loading-bottom: 0px;
  min-height: calc(100dvh - var(--loading-top) - var(--loading-bottom) - 4rem);
}
.page-loading--fullscreen { min-height: 100dvh; background: hsl(var(--background, 0 0% 100%)); }
.page-loading__spinner {
  position: fixed;
  z-index: 1;
  left: calc(var(--loading-sidebar) + (100% - var(--loading-sidebar)) / 2);
  top: calc(var(--loading-top) + (100dvh - var(--loading-top) - var(--loading-bottom)) / 2);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid hsl(var(--muted-foreground, 0 0% 45%) / .2);
  border-top-color: hsl(var(--primary, 0 0% 45%));
  border-radius: 9999px;
  pointer-events: none;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .page-loading__spinner { animation: page-loading-spin 1s linear infinite; }
}
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
  .page-loading[data-loading-shell="admin"] { --loading-sidebar: 16rem; }
  .page-loading[data-loading-shell="admin"][data-loading-collapsed="true"] { --loading-sidebar: 4rem; }
  .page-loading[data-loading-shell="customer"] { --loading-sidebar: 18rem; }
  main[data-loading-collapsed="false"] .page-loading { --loading-sidebar: 16rem; }
  main[data-loading-collapsed="true"] .page-loading { --loading-sidebar: 4rem; }
  main[data-loading-banner="true"] .page-loading,
  .page-loading[data-loading-demo="true"] { --loading-top: 3rem; }
}
@media (max-width: 767px) {
  .page-loading[data-loading-shell="admin"],
  .page-loading[data-loading-shell="customer"] {
    --loading-top: 4rem;
    --loading-bottom: 4rem;
  }
  .page-loading[data-loading-shell="admin"] { --loading-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  main[data-loading-banner="true"] .page-loading,
  .page-loading[data-loading-demo="true"] { --loading-top: 6rem; }
}