/* ==============================================================
   DESKTOP (≥ 992 px) — Right-sidebar gets the same purple “pill”
   look as mobile.  No other element is hidden or moved.
   ============================================================== */

@media (min-width: 992px) {
  /* 1. Sidebar panel itself ----------------------------------- */
  #targetElement.side_bar,
  #targetElement.side_bar.active {
    background: #2e0c5e !important; /* deep purple */
    color: #ffffff !important;
    width: 350px !important; /* keep your 350 px width */
    max-width: 100%; /* never overflow large monitors */
    padding: 22px 18px 30px !important;
    overflow-y: auto !important; /* scroll if content grows */
  }

  /* 2. Top-level list items ----------------------------------- */
  #targetElement.side_bar .mobile-main-menu li {
    margin: 8px 0 !important;
  }

  #targetElement.side_bar .mobile-main-menu li > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 22px !important;
    border-radius: 999px !important; /* pill */
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    transition: all .25s ease !important;
  }

  /* hover / open state */
  #targetElement.side_bar .mobile-main-menu li > a:hover,
  #targetElement.side_bar .mobile-main-menu li.active > a {
    background: #facc15 !important; /* yellow pill */
    color: #2e0c5e !important;
    border-color: transparent !important;
  }

  /* 3. Chevron arrows ---------------------------------------- */
  #targetElement.side_bar .mobile-main-menu li > a > i {
    font-size: 14px !important;
    color: currentColor !important;
    transition: transform .25s ease !important;
  }
  #targetElement.side_bar .mobile-main-menu li.active > a > i {
    transform: rotate(180deg) !important;
  }

  /* 4. Sub-menu ---------------------------------------------- */
  #targetElement.side_bar .mobile-sub-menu {
    display: none !important; /* hidden until JS opens it */
    padding: 6px 0 10px !important;
    margin-top: 6px !important;
    background: #40207e !important; /* darker purple strip */
    border-radius: 16px !important;
  }
  #targetElement.side_bar .mobile-main-menu li.active .mobile-sub-menu {
    display: flex !important;
    flex-direction: column !important;
  }
  #targetElement.side_bar .mobile-sub-menu li > a {
    padding: 10px 30px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all .25s ease !important;
  }
  #targetElement.side_bar .mobile-sub-menu li > a:hover {
    background: #facc15 !important;
    color: #2e0c5e !important;
  }

  /* 5. Keep icons/SVGs in sync with text colour --------------- */
  #targetElement.side_bar,
  #targetElement.side_bar * {
    fill: currentColor !important;
  }
}

/* ===========================================================
   DESKTOP off-canvas behaviour (≥ 992 px)
   • sidebar starts off-screen right, slides in when .active
   • all pill / hover styles came from the code you said is working
   =========================================================== */
@media (min-width: 992px) {
  /* keep it parked off-screen until .active is added by JS */
  #targetElement.side_bar {
    transform: translateX(350px); /* width = 350px */
    transition: transform .35s ease;
  }
  #targetElement.side_bar.active {
    transform: translateX(0); /* slide into view */
  }

  /* optional—lock page scroll when panel is open */
  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }
}