/* =========================
   OppScope-style left nav shell
   ========================= */

body.app-shell.app-shell--nav-left {
    overflow-x: hidden;
}

.app-shell--nav-left .app-shell-layout {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
    /* The design lays a barely-there wash under the whole app rather than flat
       white: bg-gradient-to-br from-background via-background to-muted/30. */
    background: linear-gradient(to bottom right, #FFFFFF, #FFFFFF, rgba(245, 240, 250, 0.3)) !important;
}

.app-shell--nav-left .app-shell-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.app-shell--nav-left .app-nav-shell {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 64px !important;
    display: flex !important;
    align-items: stretch !important;
    z-index: 1100 !important;
    background: transparent !important;
    transition: width 0.22s ease !important;
}

.app-shell--nav-left .app-nav-shell.has-open-flyout {
    width: 332px !important;
}

.app-shell--nav-left .app-nav-rail {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 0 16px 0 !important;
    background: #fff !important;
    border-right: 1px solid rgba(230, 219, 240, 0.5) !important;
    position: relative !important;
    z-index: 2 !important;
}

.app-shell--nav-left .app-brand {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

.app-shell--nav-left .app-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
}

.app-shell--nav-left .app-logo {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    display: block !important;
}

.app-shell--nav-left .app-nav {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    /* combined.css gives .app-nav a top border, left over from the old
       horizontal nav. In the rail it draws a rule between the logo and the
       icons, which the design does not have. */
    border-top: 0 !important;
}

.app-shell--nav-left .app-nav-inner {
    width: 100% !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
}

.app-shell--nav-left #primary-menu.wp-menu-shell {
    width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-shell--nav-left #primary-menu > ul.menu.menu--app-shell {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
}

/* Top-level items become rail buttons */
.app-shell--nav-left #primary-menu > ul > li.menu-item--top {
    list-style: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-shell--nav-left #primary-menu > ul > li.menu-item--top > a.menu-link,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top > a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #7E60F6 !important;
    text-decoration: none !important;
    /* Items that only open the flyout carry no href, so they are anchors the
       browser does not treat as links and would show the default arrow. */
    cursor: pointer !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    overflow: hidden !important;
}

/* neutralise old top-nav styling */
.app-shell--nav-left #primary-menu > ul > li.menu-item > a,
.app-shell--nav-left .wp-menu-shell #primary-menu > ul > li.menu-item > a,
.app-shell--nav-left #primary-menu > ul > li > a {
    background: transparent !important;
    border-radius: 12px !important;
    padding: 0 !important;
    color: #7E60F6 !important;
}

/* hover / active / open */
.app-shell--nav-left #primary-menu > ul > li.menu-item--top:hover > a.menu-link,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top:hover > a,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.is-open > a.menu-link,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.menu-active > a.menu-link,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.current-menu-item > a.menu-link,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.current_page_item > a.menu-link,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.menu-active > a,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.current-menu-item > a,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top.current_page_item > a {
    background: rgba(124, 92, 255, 0.10) !important;
    border-color: rgba(124, 92, 255, 0.24) !important;
    box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.10) inset !important;
    color: #7E60F6 !important;
}

/* icon wrapper */
.app-shell--nav-left #primary-menu .menu-item-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    position: relative !important;
    z-index: 2 !important;
}

.app-shell--nav-left #primary-menu > ul > li.menu-item--top > a .menu-item-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
}

.app-shell--nav-left #primary-menu .menu-item-icon img,
.app-shell--nav-left #primary-menu .menu-item-icon-image {
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

.app-shell--nav-left #primary-menu .menu-item-icon-fa,
.app-shell--nav-left #primary-menu .menu-item-icon-lucide,
.app-shell--nav-left #primary-menu .menu-item-icon svg,
.app-shell--nav-left #primary-menu .menu-item-icon i[data-lucide] {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 1 !important;
    stroke-width: 2 !important;
    color: #7E60F6 !important;
}

.app-shell--nav-left #primary-menu .menu-item-icon-fallback {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(124, 92, 255, 0.12) !important;
    color: #7E60F6 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

/* hide labels/badges/carets in rail */
.app-shell--nav-left #primary-menu > ul > li.menu-item--top > a .menu-item-label,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top > a .menu-item-badge,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top > a .menu-item-caret {
    display: none !important;
}

/* top-level submenu sources hidden; JS will read/move/clone them later */
.app-shell--nav-left #primary-menu > ul > li.menu-item--top > ul.sub-menu,
.app-shell--nav-left #primary-menu > ul > li.menu-item--top > ul.sub-menu--flyout-source {
    display: none !important;
}

/* user menu root can remain lower priority for now */
.app-shell--nav-left #primary-menu > ul > li.menu-user-root {
    margin-top: auto !important;
}

/* flyout host */
.app-shell--nav-left .app-nav-flyout-host {
    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;
    background: #fff !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-10px) !important;
    border-right: 1px solid rgba(230, 219, 240, 0.5) !important;
    box-shadow: 12px 0 30px rgba(72, 32, 120, 0.05) !important;
    transition: opacity 0.18s ease, transform 0.22s ease !important;
    overflow: hidden !important;
}

.app-shell--nav-left .app-nav-flyout-host::before {
}

.app-shell--nav-left .app-nav-shell.has-open-flyout .app-nav-flyout-host {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

.app-shell--nav-left .app-nav-shell.has-open-flyout .app-nav-flyout-host {
    display: block !important;
}

/* basic flyout panel styling for injected/cloned content */
.app-shell--nav-left .app-nav-flyout-panel {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    padding: 28px 20px 20px 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.app-shell--nav-left .app-nav-flyout-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.app-shell--nav-left .app-nav-flyout-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #7c3aed 0%, #f97316 100%) !important;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.22) !important;
    color: #fff !important;
    flex: 0 0 54px !important;
}

.app-shell--nav-left .app-nav-flyout-title-wrap {
    min-width: 0 !important;
}

.app-shell--nav-left .app-nav-flyout-title {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #24164a !important;
}

.app-shell--nav-left .app-nav-flyout-subtitle {
    margin: 4px 0 0 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: rgba(36, 22, 74, 0.55) !important;
}

.app-shell--nav-left .app-nav-flyout-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* menu.js clones ul.sub-menu--flyout-source into the flyout body, and the
   clone keeps the .sub-menu class. Under @media (max-width: 700px)
   combined.css styles a bare `.sub-menu` as a stacked accordion panel -
   static, no shadow, 1px border - which is right for the old mobile menu but
   not here: the flyout panel already draws its own frame, so the clone
   rendered as a box inside a box. Neutralise the border the way the
   li.menu-item reset just below already does. */
.app-shell--nav-left .app-nav-flyout-body ul.sub-menu,
.app-shell--nav-left .app-nav-flyout-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.app-shell--nav-left .app-nav-flyout-body li.menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-shell--nav-left .app-nav-flyout-body li.menu-item > a.menu-link,
.app-shell--nav-left .app-nav-flyout-body li.menu-item > a {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: transparent !important;
    color: #25153C !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.app-shell--nav-left .app-nav-flyout-body li.menu-item > a:hover,
.app-shell--nav-left .app-nav-flyout-body li.menu-item.is-active > a,
.app-shell--nav-left .app-nav-flyout-body li.menu-item.menu-active > a,
.app-shell--nav-left .app-nav-flyout-body li.menu-item.current-menu-item > a,
.app-shell--nav-left .app-nav-flyout-body li.menu-item.current_page_item > a {
    background: rgba(124, 92, 255, 0.10) !important;
    color: #7E60F6 !important;
}

.app-shell--nav-left .app-nav-flyout-body .menu-item-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 12px !important;
    background: rgba(245, 240, 250, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-shell--nav-left .app-nav-flyout-body .menu-item-label {
    display: inline-block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: inherit !important;
}

.app-shell--nav-left .app-nav-flyout-body .menu-item-badge {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: rgba(124, 92, 255, 0.10) !important;
    color: #7E60F6 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.app-shell--nav-left .app-nav-flyout-body .menu-item-caret {
    display: none !important;
}

/* content offset */
.app-shell--nav-left .app-content-shell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 64px !important;
    /* bg-muted/10 in the design - just enough for white cards to sit on it
       rather than disappear into it. */
    background: rgba(245, 240, 250, 0.1) !important;
    position: relative !important;
    transition: margin-left 0.22s ease !important;
}

/* Deliberately no margin shift on the open flyout: the design floats the second
   level over the page, so the content stays exactly where it was. The rail's
   84px offset above is all there is. */
.app-shell--nav-left .app-main.contentWrapper,
.app-shell--nav-left .main-content {
    min-width: 0 !important;
}

/* page chrome cleanup */
.app-shell--nav-left .app-page-shell {
    background: transparent !important;
}

.app-shell--nav-left .app-page-content {
    padding-top: 24px !important;
}

/* keep old user popup hidden until later pass if needed */
.app-shell--nav-left #primary-menu .user-sub-menu.userMenu {
    display: none !important;
}

/* Special case hack */
.app-shell--nav-left #primary-menu > ul > li.menu-user-root > .user-sub-menu.userMenu,
.app-shell--nav-left #primary-menu > ul > li.menu-user-root:hover > .user-sub-menu.userMenu,
.app-shell--nav-left #primary-menu > ul > li.menu-user-root:focus-within > .user-sub-menu.userMenu {
    display: none !important;
}


.app-nav-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#primary-menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#primary-menu > ul.menu.menu--app-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

#primary-menu > ul.menu.menu--app-shell > li.flex-grow {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* desktop first: disable this layout on narrow screens for now */
/* No narrow-width transformation for the rail, by design: it stays a fixed
   64px column at every width, as it does in the client's design.

   There used to be a max-width: 991px block here that tried to lay the rail out
   as a full-width bar above the content. It could not work: it set the shell to
   position: relative and width: 100%, but the parent .app-shell-layout is a
   flex row, so the shell stayed beside the content and 100% collapsed to the
   space flex gave it - about 347px. The rail also kept flex-direction: column
   while the list inside it switched to row-wrap, which is what produced the
   wide centred column with the content shoved off to the side. */




/** Top Nav also */

.page-top-menu-section {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Violet-biased hairline, not neutral black - see docs/branding.md. */
  border-bottom: 1px solid rgba(230, 219, 240, 0.5);
}

.page-top-menu-section:empty {
  display: none;
}

.page-top-menu-section .horizontal-menu {
  display: block;
  width: 100%;
  background: transparent;
}

.page-top-menu-section .horizontal-menu__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 0 24px;
  width: 100%;
}

.page-top-menu-section .horizontal-menu__group {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.page-top-menu-section .horizontal-menu__group--primary {
  flex: 1 1 auto;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-top-menu-section .horizontal-menu__group--primary::-webkit-scrollbar {
  display: none;
}

.page-top-menu-section .horizontal-menu__group--secondary {
  flex: 0 0 auto;
  justify-content: flex-end;
  white-space: nowrap;
}

.page-top-menu-section .horizontal-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  flex: 0 0 auto;
}

.page-top-menu-section .horizontal-menu__link:hover {
  color: #111827;
}

.page-top-menu-section .horizontal-menu__link.is-selected {
  color: #111827;
  border-bottom-color: #8b5cf6;
}

.page-top-menu-section .horizontal-menu__label {
  display: inline-block;
}

.page-top-menu-section .horizontal-menu__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9333ea 0%, #f97316 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 800px) {
  .page-top-menu-section .horizontal-menu__inner {
    min-height: 56px;
    padding: 0 16px;
    gap: 12px;
  }

  .page-top-menu-section .horizontal-menu__group {
    gap: 16px;
  }

  .page-top-menu-section .horizontal-menu__link {
    min-height: 56px;
    font-size: 13px;
  }
}


/* Special menu item styles */

/*
 * horizontal-menu-link--button-primary
 * horizontal-menu-link--button-ghost
 */

.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-primary,
.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-primary:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  margin: 10px 0 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: linear-gradient(90deg, #9333ea 0%, #f97316 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 24px rgba(147, 51, 234, 0.18) !important;
  border-bottom: 1px solid transparent !important;
}

.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-primary:hover,
.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-primary:focus {
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.96;
  border-bottom: 1px solid rgba(0,0,0,0.4) !important;
  border-right: 1px solid rgba(0,0,0,0.4) !important;
}

.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-primary.is-selected {
  color: #ffffff !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: 0 14px 28px rgba(147, 51, 234, 0.24) !important;
}

.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-ghost,
.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-ghost:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  margin: 10px 0 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
}

.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-ghost:hover,
.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-ghost:focus {
  color: #111827 !important;
  text-decoration: none !important;
  background: rgba(17, 24, 39, 0.04) !important;
  border-bottom: 1px solid transparent !important;
}

.page-top-menu-section .horizontal-menu__link.horizontal-menu-link--button-ghost.is-selected {
  color: #111827 !important;
  background: rgba(17, 24, 39, 0.06) !important;
  border-bottom: 1px solid transparent !important;
}

.app-shell--nav-left .app-content-shell,
.app-shell--nav-left .app-main,
.app-shell--nav-left .app-page-shell,
.app-shell--nav-left .app-page-content,
.app-shell--nav-left .main-content {
 width: 100% !important;
 max-width: none !important;
 min-width: 0 !important;
}
.page-top-menu-section {
 width: 100%;
 margin: 0;
}

.page-top-menu-section .horizontal-menu,
.page-top-menu-section .horizontal-menu__inner {
 max-width: none;
 width: 100%;
 box-sizing: border-box;
}


app-shell--nav-left .app-footer {
  margin-left: 64px;
  transition: margin-left 0.22s ease;
}

/* Same here - the footer stays put while the flyout is open. */

.app-shell--nav-left .app-footer-inner {
  width: auto;
  max-width: none;
  margin: 0 16px;
}

.app-shell--nav-left .app-footer {
  margin-left: 64px;
  transition: margin-left 0.22s ease;
}

/* The flyout floats over the page in the design, so nothing below it moves.
   The footer used to slide to 352px with it, which made the second level read
   as part of the layout rather than as a panel on top. */

/* Dims and blurs the page behind the open flyout. Sits under .app-nav-shell
   (z-index 1100) and above the content. Clicks land on it and bubble to the
   document, where menu.js's click.menuFlyoutDismiss handler closes the flyout. */
.app-shell--nav-left.app-nav-flyout-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Rail tooltips. tippy ships a dark default; the design uses a light popover
   with the app's border and a soft shadow. */
.tippy-box[data-theme~="oppscope"] {
  background: #FFFFFF;
  color: #25153C;
  border: 1px solid #E6DBF0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.tippy-box[data-theme~="oppscope"] .tippy-content {
  padding: 6px 12px;
}

/* Second-level rows carry a smaller glyph than the rail: 16px in a muted
   36px holder, not the 20px the rail uses. Without this they inherit the
   generic rule and read as heavy next to their label. */
.app-shell--nav-left .app-nav-flyout-body .menu-item-icon svg,
.app-shell--nav-left .app-nav-flyout-body .menu-item-icon i[data-lucide],
.app-shell--nav-left .app-nav-flyout-body .menu-item-icon-fa,
.app-shell--nav-left .app-nav-flyout-body .menu-item-icon-lucide {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
  color: #6C5393 !important;
}