/* ============================================
   OVERRIDE OLD TOPBAR - Loaded after layout CSS
   Maximum specificity to override compiled CSS
   ============================================ */

/* Hide old topbar completely - ALL SCREEN SIZES - ULTRA SPECIFIC */
html body .layout-topbar,
html body .layout-topbar *,
html body .layout-wrapper .layout-topbar,
html body .layout-wrapper .layout-main .layout-topbar,
html body .layout-wrapper.layout-wrapper-static .layout-main .layout-topbar,
html body .layout-wrapper.layout-horizontal .layout-main .layout-topbar,
html body .layout-wrapper.layout-sidebar-mobile-active .layout-topbar,
html body .layout-wrapper.layout-topbar-mobile-active .layout-topbar,
html body .layout-wrapper.layout-megamenu-mobile-active .layout-topbar,
html body div.layout-topbar,
html body div.layout-topbar * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
  clip-path: inset(100%) !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Force override for fixed positioning from compiled CSS */
html body .layout-topbar,
html body div.layout-topbar {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -9999 !important;
  background-color: transparent !important;
  background: transparent !important;
}

/* Hide any pseudo-elements */
html body .layout-topbar::before,
html body .layout-topbar::after {
  display: none !important;
  content: none !important;
}

/* Hide all topbar children */
html body .layout-topbar-wrapper,
html body .layout-topbar-wrapper *,
html body .layout-topbar-left,
html body .layout-topbar-left *,
html body .layout-topbar-right,
html body .layout-topbar-right *,
html body .layout-topbar-logo-wrapper,
html body .layout-topbar-logo-wrapper *,
html body .layout-topbar-actions,
html body .layout-topbar-actions *,
html body .layout-topbar-logo,
html body .sidebar-menu-button,
html body .layout-megamenu-button,
html body .layout-megamenu,
html body .topbar-menu-mobile-button,
html body .megamenu-mobile-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  z-index: -9999 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Remove padding-top from layout-main that was for old topbar */
html body .layout-main {
  padding-top: 0 !important;
}

html body .layout-wrapper .layout-main {
  padding-top: 0 !important;
}

html body .layout-wrapper.layout-horizontal .layout-main {
  padding-top: 0 !important;
}

html body .layout-wrapper.layout-wrapper-static .layout-main {
  padding-top: 0 !important;
}

/* Hide old sidebar menu (app-menu) on desktop - we use top-nav instead */
html body .layout-sidebar,
html body app-menu {
  @media (min-width: 991px) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    transform: none !important;
  }
}

/* Extra protection for problematic range (991px - 1025px) */
@media (min-width: 991px) and (max-width: 1025px) {
  /* Hide old sidebar */
  html body .layout-sidebar,
  html body .layout-sidebar *,
  html body app-menu,
  html body app-menu * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    transform: none !important;
  }
  
  html body .layout-topbar,
  html body .layout-topbar *,
  html body .layout-wrapper .layout-topbar,
  html body .layout-wrapper .layout-main .layout-topbar,
  html body .layout-wrapper.layout-wrapper-static .layout-main .layout-topbar,
  html body .layout-wrapper.layout-horizontal .layout-main .layout-topbar,
  html body .layout-wrapper.layout-sidebar-mobile-active .layout-topbar,
  html body .layout-topbar-wrapper,
  html body .layout-topbar-wrapper *,
  html body .layout-topbar-left,
  html body .layout-topbar-left *,
  html body .layout-topbar-right,
  html body .layout-topbar-right *,
  html body .layout-topbar-logo-wrapper,
  html body .layout-topbar-logo-wrapper *,
  html body .layout-topbar-actions,
  html body .layout-topbar-actions *,
  html body .layout-topbar-logo,
  html body .sidebar-menu-button,
  html body .layout-megamenu-button,
  html body .layout-megamenu,
  html body .topbar-menu-mobile-button,
  html body .megamenu-mobile-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  
  html body .layout-topbar {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -9999 !important;
  }
  
  /* Remove padding-top from layout-main in this range */
  html body .layout-main {
    padding-top: 0 !important;
  }
  
  html body .layout-wrapper .layout-main {
    padding-top: 0 !important;
  }
  
  html body .layout-wrapper.layout-horizontal .layout-main {
    padding-top: 0 !important;
  }
  
  html body .layout-wrapper.layout-wrapper-static .layout-main {
    padding-top: 0 !important;
  }
}