@layer components {

  /* Sidebar keeps hit-testing enabled, but click ownership belongs to menu rows. */

  .sidebar {

    pointer-events: auto;

  }



  /* Hit-testing: chrome/sidebar decoration must never steal clicks. */

  .app.app-layout .sidebar::before,

  .app.app-layout .sidebar::after,

  .sidebar .sidebar-bg,

  .sidebar .sidebar-overlay,

  .sidebar .sidebar-decoration {

    pointer-events: none;

  }



  .sidebar .menu,

  .sidebar #menu {

    position: relative;

    z-index: 20;

    pointer-events: auto;

  }



  .sidebar .sidebar-nav {

    position: relative;

    z-index: 20;

    pointer-events: auto;

  }



  .sidebar .sidebar-item,

  .sidebar .menu-item {

    position: relative;

    z-index: 20;

    width: 100%;

    pointer-events: auto;

    cursor: pointer;

  }



  /* Bottom stack z-index thấp hơn #menu — không dùng pointer-events:none để sau này có hover/copy FX. */

  .sidebar .sidebar-command-card,

  .sidebar .sidebar-bottom-cluster {

    position: relative;

    z-index: 1;

  }



  #sidebarToggle {

    position: relative;

    z-index: 20;

    pointer-events: auto;

    cursor: pointer;

  }



  /* Collapsed: brand/widget chỉ ẩn visually — ép không nhận hit-test */

  body.sidebar-collapsed .sidebar .brand,

  body.sidebar-collapsed .sidebar .sidebar-command-card,

  body.sidebar-collapsed .sidebar .sidebar-footer {

    pointer-events: none;

  }



  body.sidebar-collapsed .sidebar #menu,

  body.sidebar-collapsed .sidebar .sidebar-item,

  body.sidebar-collapsed #sidebarToggle {

    pointer-events: auto;

  }

}