:root {
  --sidebar-width: 260px;
}

.app-grid {
  display: grid;
  height: 100vh;
  /* Mobile: One column, full width */
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.main-area {
  background: #f9fbff;
  overflow-y: auto;
}

@media (min-width: 992px) {
  .app-grid {
    /* Desktop: Sidebar + Content */
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
  }

  .sidebar.offcanvas-lg {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    width: var(--sidebar-width) !important;
  }

  .mobile-header {
    display: none;
  }
}