/*--------------------------------------------------------------
# Desktop Styles (Large Screens)
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  #main,
  #footer {
    margin-left: var(--sidebar-width);
  }

  /* Desktop Slim Sidebar Feature */
  body.toggle-sidebar .sidebar {
    width: 80px;
    left: 0;
  }
  
  body.toggle-sidebar #main,
  body.toggle-sidebar #footer {
    margin-left: 80px;
  }
  
  body.toggle-sidebar .sidebar-nav .nav-link span,
  body.toggle-sidebar .sidebar-nav .nav-link .ms-auto,
  body.toggle-sidebar .sidebar-nav .nav-content {
    display: none;
  }
  
  body.toggle-sidebar .header-logo-wrapper span {
    display: none !important;
  }
  
  body.toggle-sidebar .header-logo-wrapper {
    width: 60px;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Medium and Small Screens
--------------------------------------------------------------*/
@media (max-width: 1199px) {
  .sidebar {
    left: calc(var(--sidebar-width) * -1); /* Hidden by default on tablet/mobile */
  }

  #main,
  #footer {
    margin-left: 0;
  }
  
  /* When Mobile Menu is Active */
  body.toggle-sidebar .sidebar {
    left: 0;
  }
  
  /* Overlay */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 995;
  }
  
  body.toggle-sidebar .sidebar-overlay {
    display: block;
  }

  .header .search-bar {
    display: none; /* Hide desktop search bar */
  }

  .header .search-bar-toggle {
    display: block; /* Show mobile search toggle */
  }
}