:root{
  --topbar-h: 48px;   /* match your nav height */
  --sidebar-w: 260px; /* left column width */
}

/* Reset body so nothing overlaps */
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); }

/* Top bar stays above */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* Two-column app shell */
.shell{
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

/* Left rail */
.sidebar{
  /* Kill any old “full-width/fixed” behavior */
  position: sticky !important;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow: auto;
  width: var(--sidebar-w) !important;
  max-width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 40;
}

/* Main content */
.content{
  min-width: 0;          /* prevents overflow in grids */
  padding: 1rem;
  background: var(--bg);
}

/* Mobile: collapse sidebar off-canvas (optional) */
@media (max-width: 900px){
  .shell{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed !important;
    inset: var(--topbar-h) auto 0 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    height: calc(100vh - var(--topbar-h));
    z-index: 70;
  }
  .sidebar.is-open{ transform: translateX(0); }
  .content{ padding: .85rem; }
}