/* ============================================================
   MobileSentrix brand logo + loader.
   Linked directly in index.ejs <head> (not bundled) so the splash is fully
   styled on first paint and shares one definition with the route loader.
   ============================================================ */

/* ----- reusable logo component -----
   .logo-mark-img is the brand mark used everywhere (loader, route error,
   dashboard, shell header). Solid black in light, white in dark. Size is set
   by the context (e.g. .ms-adm-loader-logo), not here. */
.logo-mark-img {
  display: block;
  width: auto;
  flex: 0 0 auto;
  -webkit-user-select: none;
  user-select: none;
  filter: brightness(0);
}
html[data-theme="dark"] .logo-mark-img {
  filter: brightness(0) invert(1);
}

/* ----- full-screen splash wrapper (index.ejs initial load) ----- */
.loader-wrapper {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}
html[data-theme="dark"] .loader-wrapper {
  background: #14171a;
}

/* ----- content-area route loader (single-spa customLoader) ----- */
/* position:fixed offset by --header-h / --sidebar-w so it covers only the
   content region. z-index 50 keeps it below shell chrome (header/sidebar = 100+).
   When the sidebar collapses (.ms-adm-shell.collapsed changes --sidebar-w to --rail-w),
   the loader reflows automatically because it reads the same CSS variables. */
.ms-route-loader {
  position: fixed;
  top: var(--header-h, 60px);
  left: var(--sidebar-w, 262px);
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--page, #f5f5f5); /* --page already flips in theme-dark.css */
  transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- reusable loader body: logo + animated bars ----- */
.ms-adm-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  min-height: 160px;
}
.ms-adm-loader-logo {
  width: 58px;
  animation: msLoaderPulse 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
.ms-adm-loader-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 24px;
}
.ms-adm-loader-bars span {
  width: 5px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #2e9aff, #006fd6);
  animation: msLoaderWave 1s ease-in-out infinite;
}
.ms-adm-loader-bars span:nth-child(2) {
  animation-delay: 0.12s;
}
.ms-adm-loader-bars span:nth-child(3) {
  animation-delay: 0.24s;
}
.ms-adm-loader-bars span:nth-child(4) {
  animation-delay: 0.36s;
}
.ms-adm-loader-bars span:nth-child(5) {
  animation-delay: 0.48s;
}
@keyframes msLoaderWave {
  0%,
  100% {
    height: 8px;
    opacity: 0.5;
  }
  50% {
    height: 24px;
    opacity: 1;
  }
}
@keyframes msLoaderPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.09);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms-adm-loader-logo,
  .ms-adm-loader-bars span {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
  }
}