/* Loading Overlay Component Styles */
/* Wrapper around Dash Mantine Components LoadingOverlay */

.custom-loading-overlay-container {
  /* Container for full-screen overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* Ensure container doesn't block when overlay is not visible */
/* Note: This is merged with above rule */

/* IMPORTANT: Override fixed positioning for content-area overlays */
/* Mantine creates its own container - we need to position it correctly */
.route-loading-overlay-content .custom-loading-overlay-container {
  position: fixed !important;
  top: 70px !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important; /* Use viewport width */
  height: calc(100vh - 70px) !important;
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
  /* Center spinner in viewport */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Adjust container position when sidebar is open */
.page-content--shifted .route-loading-overlay-content .custom-loading-overlay-container,
.page-content--shifted ~ * .route-loading-overlay-content .custom-loading-overlay-container {
  left: 250px !important;
  width: calc(100vw - 250px) !important; /* Use viewport width */
}

/* When sidebar is closed */
.page-content:not(.page-content--shifted) .route-loading-overlay-content .custom-loading-overlay-container {
  left: 0 !important;
  width: 100vw !important; /* Use viewport width */
}

.custom-loading-overlay-container[style*="pointer-events: auto"] {
  pointer-events: auto !important;
}

.custom-loading-overlay-container > * {
  /* Ensure LoadingOverlay fills the container */
  width: 100%;
  height: 100%;
}

.custom-loading-overlay {
  /* Base styles for the LoadingOverlay component */
  width: 100%;
  height: 100%;
}

/* Ensure loader uses accent-brand color - very aggressive selectors */
.custom-loading-overlay svg,
.custom-loading-overlay-container svg,
.custom-loading-overlay svg *,
.custom-loading-overlay-container svg * {
  color: hsl(23, 90%, 54%) !important;
  fill: hsl(23, 90%, 54%) !important;
  stroke: hsl(23, 90%, 54%) !important;
}

/* Target Mantine Loader classes */
.custom-loading-overlay .mantine-Loader-root,
.custom-loading-overlay-container .mantine-Loader-root,
.custom-loading-overlay [class*="mantine-Loader"],
.custom-loading-overlay-container [class*="mantine-Loader"] {
  color: hsl(23, 90%, 54%) !important;
}

.custom-loading-overlay .mantine-Loader-root svg,
.custom-loading-overlay-container .mantine-Loader-root svg,
.custom-loading-overlay [class*="mantine-Loader"] svg,
.custom-loading-overlay-container [class*="mantine-Loader"] svg {
  color: hsl(23, 90%, 54%) !important;
  fill: hsl(23, 90%, 54%) !important;
  stroke: hsl(23, 90%, 54%) !important;
}

/* Target all SVG elements within the overlay */
.custom-loading-overlay svg circle,
.custom-loading-overlay-container svg circle,
.custom-loading-overlay svg path,
.custom-loading-overlay-container svg path,
.custom-loading-overlay svg line,
.custom-loading-overlay-container svg line,
.custom-loading-overlay svg polyline,
.custom-loading-overlay-container svg polyline {
  color: hsl(23, 90%, 54%) !important;
  fill: hsl(23, 90%, 54%) !important;
  stroke: hsl(23, 90%, 54%) !important;
  stroke-width: 2 !important;
}

/* Override any inline styles */
.custom-loading-overlay svg[style*="color"],
.custom-loading-overlay-container svg[style*="color"],
.custom-loading-overlay svg[style*="fill"],
.custom-loading-overlay-container svg[style*="fill"],
.custom-loading-overlay svg[style*="stroke"],
.custom-loading-overlay-container svg[style*="stroke"] {
  color: hsl(23, 90%, 54%) !important;
  fill: hsl(23, 90%, 54%) !important;
  stroke: hsl(23, 90%, 54%) !important;
}

/* ============================================
   Content Area Loading Overlay (not full-screen)
   ============================================ */

/* Content wrapper inner container */
#page-content-wrapper-inner {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 70px); /* Full height minus navbar */
  /* Prevent duplicate overlays */
  isolation: isolate;
}

/* Content area overlay - use Mantine's LoadingOverlay directly */
/* Position it to cover only content area, not sidebar */
.route-loading-overlay-content {
  position: fixed !important;
  top: 70px !important; /* Below navbar */
  left: 0 !important;
  width: 100vw !important; /* Use viewport width */
  height: calc(100vh - 70px) !important;
  z-index: 999 !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 - CSS fallback if callback doesn't fire */
.page-content-wrapper.page-content--shifted .route-loading-overlay-content {
  left: 250px !important;
  width: calc(100vw - 250px) !important; /* Use viewport width minus sidebar */
}

/* When sidebar is closed - CSS fallback */
.page-content-wrapper:not(.page-content--shifted) .route-loading-overlay-content {
  left: 0 !important;
  width: 100vw !important; /* Use viewport width */
}

/* Prevent duplicate overlays - ensure only one overlay background */
.route-loading-overlay-content .mantine-LoadingOverlay-root {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  /* Ensure only one instance */
  display: block !important;
}

/* Hide any duplicate overlay backgrounds that might appear */
.route-loading-overlay-content .mantine-LoadingOverlay-root > div:first-child ~ div[class*="overlay"],
.route-loading-overlay-content .custom-loading-overlay > div:first-child ~ div[style*="background"] {
  display: none !important;
}

/* Prevent duplicate overlays */
.route-loading-overlay-content ~ .route-loading-overlay-content {
  display: none !important;
}

/* Let Mantine handle the overlay structure - ensure it fills the space and centers spinner */
.route-loading-overlay-content .mantine-LoadingOverlay-root {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Disable scroll on content when loading */
.page-content-wrapper--loading .page-content-inner {
  overflow: hidden !important;
}

.page-content-inner {
  transition: overflow 0.2s ease;
}