/* State Loading Overlay Component Styles */
/* A loading overlay for state changes (not routing changes) */
/* Breaks out of Container constraints to cover viewport */

/* Base state loading overlay - fixed positioning to cover viewport */
.state-loading-overlay.mantine-LoadingOverlay-root,
[id$="-state-loading-overlay"].mantine-LoadingOverlay-root,
#state-loading-overlay.mantine-LoadingOverlay-root {
  position: fixed !important;
  top: 70px !important; /* Below navbar */
  left: 0 !important;
  width: 100% !important;
  height: calc(100vh - 70px) !important;
  z-index: 1000 !important;
  /* Center the loader */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  /* Smooth transition when sidebar opens/closes */
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Adjust position when sidebar is open */
#page-content-wrapper.page-content--sidebar-expanded .state-loading-overlay.mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--sidebar-expanded [id$="-state-loading-overlay"].mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--sidebar-expanded #state-loading-overlay.mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--shifted .state-loading-overlay.mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--shifted [id$="-state-loading-overlay"].mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--shifted #state-loading-overlay.mantine-LoadingOverlay-root {
  left: var(--sidebar-width-expanded) !important;
  width: calc(100% - var(--sidebar-width-expanded)) !important;
}

/* Adjust position when sidebar is collapsed */
#page-content-wrapper.page-content--sidebar-collapsed .state-loading-overlay.mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--sidebar-collapsed [id$="-state-loading-overlay"].mantine-LoadingOverlay-root,
#page-content-wrapper.page-content--sidebar-collapsed #state-loading-overlay.mantine-LoadingOverlay-root {
  left: var(--sidebar-width-collapsed) !important;
  width: calc(100% - var(--sidebar-width-collapsed)) !important;
}

/* When sidebar is hidden or no class is applied */
#page-content-wrapper:not(.page-content--shifted):not(.page-content--sidebar-expanded):not(.page-content--sidebar-collapsed) .state-loading-overlay.mantine-LoadingOverlay-root,
#page-content-wrapper:not(.page-content--shifted):not(.page-content--sidebar-expanded):not(.page-content--sidebar-collapsed) [id$="-state-loading-overlay"].mantine-LoadingOverlay-root,
#page-content-wrapper:not(.page-content--shifted):not(.page-content--sidebar-expanded):not(.page-content--sidebar-collapsed) #state-loading-overlay.mantine-LoadingOverlay-root {
  left: 0 !important;
  width: 100% !important;
}