/* Adjust navbar position to account for environment band */
.navbar.fixed-top, 
.navbar.sticky-top {
  top: 30px !important; /* Height of the environment band */
}

/* Left menu adjustment - EXACT SELECTOR FROM HTML */
#leftMenu.left-menu {
  top: 110px !important;
  height: calc(100vh - 110px) !important; /* Adjust height to account for band + navbar */
}

/* Main content adjustment - EXACT SELECTOR FROM HTML */
#mainContent {
  margin-top: 30px !important; /* 30px (band) */
}

/* Adjust body scroll padding to account for navbar + environment band */
body {
  scroll-padding-top: 130px !important; /* 100px (original) + 30px (environment band) */
}

.band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--flexup-dark-blue);
}

.band-demo {
  background-color: var(--demo);
}

.band-sandbox {
  background-color: var(--sandbox);
}

.band-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Print styles */
@media print {
  .band {
    position: absolute;
    display: none; /* Hide in print */
  }
  
  .navbar.fixed-top, 
  .navbar.sticky-top {
    top: 0 !important;
  }
  
  #mainContent {
    margin-top: 0 !important;
  }
  
  #leftMenu.left-menu {
    top: 0 !important;
  }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .band {
    font-size: 12px;
  }

  #mainContent {
    margin-top: 30px !important;
  }
  
  #leftMenu.left-menu {
    top: 110px !important;
  }
}