.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100%;
  background: var(--md-surface);
  border-right: 1px solid var(--overlay-bg);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-speed);
  z-index: 100;
}

.sidebar h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--md-primary);
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--md-text);
  padding: 0.4rem 0.8rem;
  border-radius: var(--md-border-radius);
  transition: background-color 0.2s, color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  background-color: var(--overlay-bg);
  color: var(--md-accent);
}

@media (min-width: 801px) {
  main {
    margin-left: var(--sidebar-width);
    padding: 6rem 2rem 3rem 2rem;
  }

  footer {
    margin-left: var(--sidebar-width);
  }
}

@media (max-width: 800px) and (orientation: portrait) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
}

@media (max-width: 800px) and (orientation: landscape) {
  .sidebar {
    display: flex;
    transform: translateX(0);
  }
  
  main {
    margin-left: var(--sidebar-width);
    padding: 2rem 2rem 3rem 2rem;
  }
  
  footer {
    margin-left: var(--sidebar-width);
  }
}