html,
body {
  height: 100%;

}

body {
  font-family: 'Inter', sans-serif;
}

.navbar-app {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.18);
}

.navbar-bottom {
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.navbar, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

.main-layout-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.sidebar-nav {
  width: 250px; 
  flex-shrink: 0;
  background-color: var(--bs-dark);
  color: var(--bs-white);
  height: 100vh; 
  overflow-y: hidden; 
}

.content-area {
  flex-grow: 1; 
  overflow-y: auto; 
  background-color: var(--bs-light);
}

.logo-responsive {
    max-width: 170px;
    width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto;
}

.mobile-nav-container {
    height: 50px;
}

.mobile-nav-container .icon-wrapper i {
    font-size: 1.25rem;
}

@media (min-width: 576px) {
    .mobile-nav-container {
        height: 65px;
    }
    
    .mobile-nav-container .icon-wrapper i {
        font-size: 1.1rem;
    }
    
    .mobile-nav-container .label-text {
        font-size: 0.65rem;
    }
}

.active-pill-mobile {
    color: var(--team-accent-color, #00C9A7) !important;
    position: relative;
}

.active-pill-mobile::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 3px;
    background-color: var(--team-accent-color, #00C9A7);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

@media (max-width: 575.98px) {
    .main-layout-container { padding-bottom: 55px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .main-layout-container { padding-bottom: 70px; }
}