/* ========================================
   LAYOUT.CSS - App layout & grid
   ======================================== */

.app,
.l-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

.sidebar,
.l-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--sp-4);
}

.main,
.l-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar,
.l-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}

.content,
.l-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.view,
.l-view {
  display: none;
}

.view.active,
.l-view.is-active {
  display: block;
}

@media (max-width: 768px) {
  .app,
  .l-app {
    grid-template-columns: 1fr;
  }
  
  .sidebar,
  .l-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    z-index: var(--z-sidebar-mobile);
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  
  .sidebar.open,
  .l-sidebar.is-open {
    transform: translateX(0);
  }
}