@scope (.page-layout) {
  :scope {
    display: grid;
    grid-template-columns: var(--spacing-64) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
    height: 100dvh;
  }

  .page-layout__sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    height: 100%;
    overflow-y: auto;
    background: var(--color-surface);
    border-right: none;
    box-shadow: var(--shadow-sm);
  }

  .page-layout__topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: var(--z-10);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .page-layout__main {
    grid-area: main;
    padding: var(--space-lg) var(--space-lg);
    overflow-y: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;

    &:has(.kanban-board, .list-page, .weekly-calendar) {
      overflow-y: hidden;
    }
  }
  .page-layout__mobile-header {
    display: none;
  }

  .page-layout__backdrop {
    display: none;
  }

  .page-layout__right-drawer {
    display: none;
  }

  .page-layout__backdrop--right {
    display: none;
  }

  @media (width < 48rem) {
    :scope {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "mobile-header"
        "main";
    }

    .page-layout__mobile-header {
      grid-area: mobile-header;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-md);
      position: sticky;
      top: 0;
      z-index: var(--z-20);
      padding: var(--space-sm) var(--space-lg);
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
    }

    .mobile-header__account-switcher {
      flex: 1;
      max-width: 240px;
      margin-inline: auto;
      display: flex;
      justify-content: center;
    }

    .mobile-account-select {
      width: 100%;
    }

    .gear-toggle {
      all: unset;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-xs);
      border-radius: var(--radius-md);
      color: var(--color-text);
      cursor: pointer;

      &:hover {
        background: var(--color-surface-muted);
      }

      &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
      }

      .gear-icon {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--color-text-muted);
      }
    }

    .page-layout__topbar {
      display: none;
    }

    .page-layout__sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      width: var(--spacing-64);
      z-index: var(--z-40);
      transform: translateX(-100%);
      transition: transform 0.2s ease;
      border-right: none;
      box-shadow: var(--shadow-md);

      &[data-sidebar-open] {
        transform: translateX(0);
      }
    }

    .page-layout__backdrop {
      position: fixed;
      inset: 0;
      background: var(--color-surface-overlay);
      z-index: var(--z-30);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;

      &[data-sidebar-open] {
        display: block;
        opacity: 1;
        pointer-events: auto;
      }
    }

    .page-layout__right-drawer {
      display: block;
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      width: var(--spacing-64);
      z-index: var(--z-40);
      transform: translateX(100%);
      transition: transform 0.2s ease;
      background: var(--color-surface);
      box-shadow: var(--shadow-md);

      &[data-drawer-open] {
        transform: translateX(0);
      }
    }

    .page-layout__backdrop--right {
      display: block;
      position: fixed;
      inset: 0;
      background: var(--color-surface-overlay);
      z-index: var(--z-30);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;

      &[data-drawer-open] {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }

@scope (.page-layout__mobile-header) {
  .menu-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;

    &:hover {
      background: var(--color-surface-muted);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }
}