/* ============================================
   APPE Custom Styles
   ============================================ */

/* Make mobile navbar scrollable ONLY when expanded */
@media (max-width: 991.98px) {
  /* Only apply scroll when navbar is actually open (.show class) */
  .navbar-collapse.show {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Also apply during the collapse animation */
  .navbar-collapse.collapsing {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
  }
  
  /* Optional: Style the scrollbar */
  .navbar-collapse::-webkit-scrollbar {
    width: 4px;
  }
  .navbar-collapse::-webkit-scrollbar-thumb {
    background: #332678;
    border-radius: 4px;
  }
}