/* Makes `#item-content` fill remaining space in `#item-container` and scroll if needed. */
#item-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
  padding-left: 1.25rem; /* Separation from sidebar */
}

/* Constrain entire app layout (sidebar + content) on large screens */
#main-container:has(#nav-sidebar) {
  max-width: 1200px;
  margin: 0 auto;
}

/* Constrain navbar content to match (only on pages with sidebar) */
body:has(#nav-sidebar) .navbar {
  container-type: inline-size;
}

.navbar-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

body:has(#nav-sidebar) .navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
}

@container (max-width: 1200px) {
  .navbar-inner {
    padding-left: 6px;
    padding-right: 4px;
  }
}

@container (min-width: 1201px) {
  .navbar-inner {
    padding-left: calc(1em + 4px);
    padding-right: 1em;
  }
}

/* Sidebar left border when constrained */
@media (min-width: 1201px) {
  body[data-theme="dark"]:has(#nav-sidebar) #nav-sidebar {
    border-left: 1px solid var(--dm-border-color);
  }

  body[data-theme="light"]:has(#nav-sidebar) #nav-sidebar {
    border-left: 1px solid var(--lm-border-color);
  }
}

/* Remove inner content constraint when parent is constrained */
#main-container:has(#nav-sidebar) #item-inner-content {
  max-width: none;
}

#item-container .sidebar-title {
  margin-bottom: 0; /* Eliminates default margin pushing divider down */
}

#item-content {
  flex: 1;               /* Take remaining vertical space */
  overflow-y: auto;      /* Scroll if content overflows */
  min-height: 0;         /* Fixes scroll issues in flex children */

  padding-top: 70px;     /* Account for fixed navbar */
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 3em;
}