#pos-posNavbar,
  #pos-posNavbar .container-fluid {
    background: #fff !important;
    padding: 0 !important;
  }

  /* 2) logo flush top/left, fill height */
  #pos-posNavbar .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    height: 48px;           /* adjust to your desired bar height */
  }
  #pos-posNavbar .navbar-brand img {
    display: block;
    height: 100%;
    width: auto;
  }

  /* 3) “Main Menu” pill */
  #pos-posNavbar .main-menu-btn {
    background: linear-gradient(180deg,#1d7cf3 0%,#0a55c4 100%);
    color: #fff !important;
    padding: .25rem 2.2rem;
    min-width: 7.5rem;
    border-radius: 9999px;
    border: 1px solid #084da9;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #pos-posNavbar .main-menu-btn:hover,
  #pos-posNavbar .main-menu-btn:focus {
    background: linear-gradient(180deg,#176fe0 0%,#084da9 100%);
  }

  /* 4) nested submenu positioning */
  #pos-posNavbar .dropdown-submenu {
    position: relative;
  }
  #pos-posNavbar .dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 0; left: 100%;
    margin-left: .1rem;
    z-index: 1051;
  }

/* target only our POS navbar */
#pos-posNavbar .navbar-toggler-icon {
  /* use the Bootstrap “light” icon (black strokes at 50% opacity) */
  background-image: url("data:image/svg+xml;charset=utf8,\
<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'>\
<path stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' \
stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
/* ─── stylised blue pill for Main Menu ───────────────────────── */
/* ─── Main-Menu pill with gradient & wider width ───────────── */

.main-menu-btn{
    /* 🔵 vertical gradient */
    background:linear-gradient(180deg,#1d7cf3 0%,#0a55c4 100%);
    color:#fff !important;

    /* ⬆︎ taller width  ➜ increase L/R padding OR set min-width */
    padding:.25rem 2.2rem;        /* top/bot , left/right  */
    min-width:13rem;             /* keeps pill wide even if text shrinks */
    max-height: 2rem;
    border-radius:9999px;
    border:1px solid #084da9;     /* subtle edge on darker blue */
    font-weight:600; line-height:1;

    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* white arrow */
.main-menu-btn::after{ color:#fff; }

/* hover / focus – slightly darker gradient */
.main-menu-btn:hover,
.main-menu-btn:focus{
    background:linear-gradient(180deg,#176fe0 0%,#084da9 100%);
    color:#fff;
}


/* ───── nested dropdown positioning ───── */
.dropdown-submenu {          /* the li that holds the 2nd-level menu   */
    position: relative;      /* becomes new positioning context        */
}
.dropdown-submenu > .dropdown-menu {
    position: absolute;      /* take out of normal flow                */
    top: 0;                  /* align with parent item                 */
    left: 100%;              /* 100 % to the right of parent           */
    margin-left: .1rem;      /* tiny gap so borders don’t touch        */
    margin-right: 0;
    z-index: 1051;           /* sit above first menu                   */
    border-radius: .25rem;   /* optional: same Bootstrap radius        */
}
/* submenu-toggle arrow for all levels */
#pos-posNavbar .dropdown-submenu > a {
  position: relative;            /* establish positioning context */
  padding-right: 1.6rem !important;  /* room for the arrow */
}

#pos-posNavbar .dropdown-submenu > a::after {
  content: "\27A4";              /* ▶ unicode triangle */
  position: absolute;
  top: 50%;
  right: .6rem;                  /* space from right edge */
  transform: translateY(-50%);   /* vertical centering */
  font-size: .7rem;              /* size of the arrow */
  color: #6c757d;                /* same grey as your dropdown text */
}


/* ─── ensure all nested menus are hidden by default ───────── */
#pos-posNavbar .dropdown-submenu > .dropdown-menu {
  display: none;
}

/* ─── show any submenu when you hover its parent (desktop) ─── */
/*@media (min-width: 768px) {
  #pos-posNavbar .dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
  }
}
*/

/* ─── On mobile, stack submenus inline below their parent ───────── */
@media (max-width: 767.98px) {
  #pos-posNavbar .dropdown-submenu > .dropdown-menu {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    display: none;            /* start hidden, JS will toggle */
    width: 100%;              /* full width under parent */
    border: none;             /* remove side borders if you like */
    box-shadow: none;         /* remove shadow for inline look */
  }
}