/* Update sidebar styling */
.shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 30% 1fr; /* Change from 240px to 30% */
  overflow: hidden;
}

.sidebar {
  background: var(--sidebar);
  padding: 20px 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto; /* Allow sidebar to scroll if content is too tall */
}

/* Make the main content area scrollable */
.main {
  overflow-y: auto;
  height: 100vh;
}

/* Style the category nav to be scrollable */
.category-nav {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

/* Add some spacing between sidebar sections */
.nav-section {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* First nav-section shouldn't have top margin */
.sidebar-nav > .nav-section:first-child {
  margin-top: 0;
}

/* Push brand block to bottom of sidebar */
.brand-block {
  margin-top: auto;
  padding-top: 20px;
}