@layer layout {
  .app {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  /* Desktop: show sidebar in grid */
  @media (min-width: 768px) {
    .app {
      grid-template-columns: var(--sidebar-width) 1fr;
    }
  }

  /* Mobile sidebar backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
  }

  .sidebar-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
  }

  @media (max-width: 767px) {
    .sidebar-backdrop {
      display: block;
    }
  }
}