/* ==========================================================================
   App Shell
   Desktop-first grid: sidebar spans the full height on the left, navbar sits
   top-right, main content fills the remaining space, footer sits at bottom.
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width-expanded) 1fr;
  grid-template-rows: var(--navbar-height) 1fr auto;
  grid-template-areas:
    "sidebar navbar"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
  background-color: var(--color-background);
  transition: grid-template-columns var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell {
    transition: none;
  }
}

#sidebar {
  grid-area: sidebar;
}

#navbar {
  grid-area: navbar;
  position: sticky;
  top: 0;
  z-index: 30;
}

#main-content {
  grid-area: main;
  /* Without this, a wide table forces the 1fr grid track (and the whole
     shell) past the viewport instead of scrolling inside .table-scroll. */
  min-width: 0;
  max-width: var(--container-max-width);
  width: 100%;
  margin-inline: auto;
  padding: var(--space-4);
  color: var(--color-text-primary);
}

#footer {
  grid-area: footer;
}

/* JS-driven collapse (desktop/tablet) — see js/core/sidebar.js */
.app-shell.is-sidebar-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* Mobile: sidebar becomes an off-canvas drawer, content stacks full width */
@media (max-width: 767px) {
  .app-shell,
  .app-shell.is-sidebar-collapsed {
    grid-template-columns: 1fr;
    grid-template-areas:
      "navbar"
      "main"
      "footer";
  }
}

/* Locks body scroll while the mobile drawer or a modal is open */
body.no-scroll {
  overflow: hidden;
}