/*
 * SB Admin fija .topnav a height: 3.625rem; contenido más alto dentro del nav queda recortado.
 * Franjas encima del nav (staging y/o modo soporte) + offset del layout (#layoutSidenav_content).
 */
:root {
  --app-topnav-height: 3.625rem;
  --app-staging-strip-min: 0rem;
  --app-impersonation-strip-min: 0rem;
}

body.staging-deployment-active {
  --app-staging-strip-min: 3.25rem;
}

body.impersonation-active {
  /* Franja modo soporte (sin card anidada); móvil con botón debajo necesita más aire */
  --app-impersonation-strip-min: 5rem;
}

@media (max-width: 767.98px) {
  body.impersonation-active {
    --app-impersonation-strip-min: 7.5rem;
  }
}

body.staging-deployment-active.nav-fixed .app-fixed-header-wrap,
body.impersonation-active.nav-fixed .app-fixed-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1039;
  background-color: #fff;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
}

body.staging-deployment-active.nav-fixed .app-fixed-header-wrap .topnav,
body.impersonation-active.nav-fixed .app-fixed-header-wrap .topnav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: var(--app-topnav-height);
}

.app-staging-environment-strip {
  box-sizing: border-box;
  min-height: var(--app-staging-strip-min);
  background-color: #ffc107;
}

.app-impersonation-strip {
  box-sizing: border-box;
  min-height: var(--app-impersonation-strip-min);
}

body.staging-deployment-active.nav-fixed #layoutSidenav #layoutSidenav_content,
body.impersonation-active.nav-fixed #layoutSidenav #layoutSidenav_content {
  top: calc(var(--app-staging-strip-min) + var(--app-impersonation-strip-min) + var(--app-topnav-height));
  min-height: calc(
    100vh - var(--app-staging-strip-min) - var(--app-impersonation-strip-min) - var(--app-topnav-height)
  );
}

body.staging-deployment-active.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav,
body.impersonation-active.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav {
  padding-top: calc(var(--app-staging-strip-min) + var(--app-impersonation-strip-min) + var(--app-topnav-height));
}

@media (max-width: 991.98px) {
  body.staging-deployment-active.nav-fixed #layoutSidenav #layoutSidenav_content,
  body.impersonation-active.nav-fixed #layoutSidenav #layoutSidenav_content {
    top: calc(var(--app-staging-strip-min) + var(--app-impersonation-strip-min) + var(--app-topnav-height));
  }

  body.staging-deployment-active.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav,
  body.impersonation-active.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav {
    padding-top: calc(var(--app-staging-strip-min) + var(--app-impersonation-strip-min) + var(--app-topnav-height));
  }
}

/* Login / auth sin topnav */
body.staging-deployment-active .app-staging-environment-strip--auth {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
}

body.staging-deployment-active #layoutAuthentication {
  padding-top: var(--app-staging-strip-min);
}

/* Super admin */
body.super-admin-layout.staging-deployment-active .super-admin-navbar.fixed-top {
  top: var(--app-staging-strip-min);
}

body.super-admin-layout.staging-deployment-active {
  padding-top: calc(6.75rem + var(--app-staging-strip-min));
}

@media (min-width: 768px) {
  body.super-admin-layout.staging-deployment-active {
    padding-top: calc(5rem + var(--app-staging-strip-min));
  }
}

@media (min-width: 992px) {
  body.super-admin-layout.staging-deployment-active {
    padding-top: calc(4.25rem + var(--app-staging-strip-min));
  }
}

body.super-admin-layout.staging-deployment-active .app-staging-environment-strip--super-admin {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1041;
}