/* USER UPDATE: left offcanvas swipe/click edge.
   This is a small adapter around the existing sidebar-offcanvas state. */
.sidebar-swipe-edge,
body[class$="-theme"] .sidebar-swipe-edge {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 42 !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background: transparent !important;
  appearance: none !important;
  touch-action: pan-y !important;
  pointer-events: none !important;
  cursor: ew-resize !important;
}

.app-shell.sidebar-collapsed:not(.sidebar-offcanvas-open) .sidebar-swipe-edge,
.app-shell.sidebar-responsive-collapsed:not(.sidebar-offcanvas-open) .sidebar-swipe-edge,
body[class$="-theme"] .app-shell.sidebar-collapsed:not(.sidebar-offcanvas-open) .sidebar-swipe-edge,
body[class$="-theme"] .app-shell.sidebar-responsive-collapsed:not(.sidebar-offcanvas-open) .sidebar-swipe-edge {
  display: block !important;
  pointer-events: auto !important;
}

.sidebar-swipe-edge::before,
body[class$="-theme"] .sidebar-swipe-edge::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px auto 10px 4px !important;
  width: 1px !important;
  border-left: 1px dashed rgba(100, 116, 139, 0.22) !important;
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}

.sidebar-swipe-edge:focus-visible::before,
.sidebar-swipe-edge:hover::before,
body.sidebar-edge-swipe-active .sidebar-swipe-edge::before,
body[class$="-theme"] .sidebar-swipe-edge:focus-visible::before,
body[class$="-theme"] .sidebar-swipe-edge:hover::before,
body[class$="-theme"].sidebar-edge-swipe-active .sidebar-swipe-edge::before {
  opacity: 1 !important;
}

.sidebar-swipe-edge:focus-visible,
body[class$="-theme"] .sidebar-swipe-edge:focus-visible {
  outline: 2px solid var(--focus-ring, rgba(37, 99, 235, 0.28)) !important;
  outline-offset: -2px !important;
}

html.navigation-offcanvas-open .sidebar-swipe-edge,
.app-shell.sidebar-offcanvas-open .sidebar-swipe-edge,
body[class$="-theme"] .app-shell.sidebar-offcanvas-open .sidebar-swipe-edge {
  display: none !important;
  pointer-events: none !important;
}

/* USER UPDATE: avatar dropdown right-side popout guard.
   The footer account menu should not cover the sidebar navigation rows. */
.app-shell .sidebar[data-slot="sidebar"]:has(.sidebar-avatar-menu[open]),
body[class$="-theme"] .app-shell .sidebar[data-slot="sidebar"]:has(.sidebar-avatar-menu[open]) {
  overflow: visible !important;
  z-index: 320 !important;
}

.sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu,
body[class$="-theme"] .sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu {
  position: relative !important;
  z-index: 330 !important;
}

.sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu[open] > .sidebar-avatar-dropdown,
body[class$="-theme"] .sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu[open] > .sidebar-avatar-dropdown {
  left: calc(100% + 10px) !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  width: min(260px, calc(100vw - 32px)) !important;
  max-height: min(420px, calc(100vh - 32px)) !important;
  overflow: visible !important;
  z-index: 360 !important;
}

.sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu[open] .sidebar-avatar-submenu-panel,
body[class$="-theme"] .sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu[open] .sidebar-avatar-submenu-panel {
  z-index: 370 !important;
}

@media (max-width: 760px) {
  .sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu[open] > .sidebar-avatar-dropdown,
  body[class$="-theme"] .sidebar-account-footer[data-reui-avatar-dropdown="compact"] .sidebar-avatar-menu[open] > .sidebar-avatar-dropdown {
    left: 0 !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;
    width: min(244px, calc(100vw - 28px)) !important;
    max-height: min(420px, calc(100vh - 32px)) !important;
    overflow: visible !important;
  }
}