#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 1025px) {
  .main-sidebar {
    top: 0 !important;
    height: 100vh !important; /* fallback for browsers without dvh support */
    height: 100dvh !important; /* shrinks when Safari's bottom bar is visible */
    padding-bottom: env(safe-area-inset-bottom) !important;
    width: 85% !important;
    max-width: 85% !important;
    z-index: 1001002 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
  }
  .toggle-sidebar {
    display: inline !important;
  }

  .main-sidebar.active,
  .main-sidebar.collapsed,
  .main-sidebar.open {
    transform: translateX(0) !important;
  }


  .main-sidebar .main-navbar {
    flex: none !important;
    padding: 20px 12px 12px;
    border-bottom: 1px solid var(--pgs-border, #e7e7e7);
  }

  .main-sidebar .main-navbar nav {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: auto !important;
  }

  .main-sidebar .logo-img,
  .main-sidebar #main-logo {
    display: block !important;
    width: 100% !important;
    max-width: 140px !important;
    margin: 0 auto !important;
  }

  .main-sidebar #client-select {
    width: calc(100% - 24px) !important;
    margin: 0 !important;
    min-width: 0;
  }



  #navbar-container {
    min-height: 0;
  }


  main.main-content {
    margin-left: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}