/*
 * NXT Sidebar Scroll Fade Polish
 * Cosmetic-only. Makes long sidebars feel more like a HUD console.
 */

.panel-sidebar-scroll {
  position: relative;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(54, 163, 255, .38) rgba(255, 255, 255, .035);
  -webkit-overflow-scrolling: touch;
}

.panel-sidebar-scroll::-webkit-scrollbar {
  width: 8px;
}

.panel-sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .025);
  border-radius: 999px;
}

.panel-sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(54, 163, 255, .65), rgba(54, 163, 255, .22));
  border-radius: 999px;
  border: 2px solid rgba(5, 10, 18, .9);
}

.panel-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(54, 163, 255, .86), rgba(54, 163, 255, .38));
}

/* Hide old scrollbar arrow buttons in browsers that expose them */
.panel-sidebar-scroll::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

/* Fade top/bottom inside the sidebar without touching markup */
.panel-sidebar .panel-sidebar-scroll::before,
.panel-sidebar .panel-sidebar-scroll::after {
  content: "";
  position: sticky;
  display: block;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
  z-index: 5;
}

.panel-sidebar .panel-sidebar-scroll::before {
  top: 0;
  margin-bottom: -18px;
  background: linear-gradient(180deg, rgba(5, 10, 18, .96), rgba(5, 10, 18, 0));
}

.panel-sidebar .panel-sidebar-scroll::after {
  bottom: 0;
  margin-top: -18px;
  background: linear-gradient(0deg, rgba(5, 10, 18, .96), rgba(5, 10, 18, 0));
}

/* Subtle bottom breathing room so last item is not trapped under fade */
.panel-sidebar .navbar-nav {
  padding-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .panel-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
  }
}