/* Final sidebar styling, including its internal scrolling.
 *
 * Layer 09 of the stylesheet. ORDER IS SIGNIFICANT: this file's rules
 * are overridden by every later layer and override every earlier one, exactly as
 * when they were one file. See docs/frontend-architecture.md. */

/* ===== FINAL SIDEBAR STYLE ===== */

.sidebar {

  width: 240px;

  background:
    radial-gradient(
      circle at top left,
      rgba(0,255,153,.12),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      #0b141b,
      #05090d
    ) !important;

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 22px;

  padding: 26px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.03);

  backdrop-filter: blur(18px);
  position: sticky;
  top: 22px;
  align-self: start;
}

/* The sidebar is sticky AND was min-height:100vh, so once its own content (nav
   items + account chip + the Community/About/Pricing links in its footer) grew
   past the viewport, the footer links could only be reached by scrolling the
   entire dashboard to the very bottom. Give the sidebar its own scroll instead.
   The max-height stops short of the fixed disclaimer bar at the bottom. */
.sidebar {
  min-height: 0;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}
.sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); }

.nav-item {
  height: 50px;

  display: flex;
  align-items: center;

  padding: 0 16px;

  border-radius: 14px;

  font-size: 15px;
  font-weight: 600;

  color: #94a3ad;

  transition: .18s ease;
}

.nav-item:hover {
  background: rgba(0,255,153,.08);

  color: #ffffff;

  transform: translateX(2px);
}

.nav-item.active {
  color: #ffffff !important;

  background:
    linear-gradient(
      90deg,
      rgba(0,255,153,.22),
      rgba(0,255,153,.06)
    ) !important;

  border: 1px solid rgba(0,255,153,.35);

  box-shadow:
    inset 3px 0 0 #00ff99,
    0 0 22px rgba(0,255,153,.10);
}