/* Modern Grid-based Layout System */

.appGrid {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-card);
  z-index: 9999;
  pointer-events: auto;
}

.main {
  grid-area: main;
  min-height: 100vh;
  max-width: calc(100vw - 16rem);
  overflow-x: hidden;
  background-color: var(--color-background);
  isolation: isolate;
}

.footer {
  grid-area: footer;
  min-height: 3rem;
}

/* Ensure sidebar is always interactive */
.sidebar * {
  pointer-events: auto;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .appGrid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "sidebar"
      "main"
      "footer";
  }

  .sidebar {
    position: relative;
    height: auto;
  }
}