:root{
  --bg:#ffffff;
  --text:#222;
  --accent:#007bff;
  --shadow:0 6px 18px rgba(0,0,0,0.08);
}
/* Multi-level dropdown styles (modernized, responsive) */
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--text); background:var(--bg);}

.nav{background:#ffff; padding:0.5rem 1rem; border-bottom:0px solid #e7e9ee}
.menu{list-style:none; margin:0; padding:0; display:flex; gap:0.5rem; align-items:center}
.menu-item{position:relative}
.menu-link, .menu-btn{background:transparent; border:0; font-weight:600; font-size:16px; line-height:2px; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; color:var(--text); padding:0.7rem 1rem 0.7rem 1rem; cursor:pointer; display:inline-flex; align-items:center; gap:0.6rem; border-radius:8px; padding-right:36px /* reserve space for caret/icon */}
.menu-link{ text-decoration:none }
/*.menu-btn:focus, .menu-link:focus{outline:1px solid rgba(0,123,255,0.15); outline-offset:1px}*/

/* Submenu base: hidden and positioned; stronger selector to prevent bootstrap overrides */
.menu .submenu{position:absolute; left:0; top:calc(100% + 8px); min-width:220px; margin:0; padding:0.35rem 0; background:var(--bg); box-shadow:var(--shadow); border-radius:12px; list-style:none; display:none; z-index:9999; transform-origin:top left; transition:opacity 160ms ease, transform 160ms ease}
.menu .submenu .submenu{left:100%; top:0; margin-left:8px}

.menu .submenu li{padding:0}
.menu .submenu a, .menu .submenu .menu-btn{
  display:flex;
  align-items:left;
  justify-content:space-between;
  gap:8px;
  padding:0.7rem 0.7rem; /* reduced horizontal padding */
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  font-size:15px;
  line-height:1.75;
  font-weight:500; /* slightly lighter for submenu links */
}
.menu .submenu a:hover, .menu .submenu .menu-btn:hover{background:#f7fbff}

/* visible state controlled by [data-open] attribute */
.menu-item[data-open] > .submenu{display:block; opacity:1; transform:translateY(0);}
.menu-item > .submenu{opacity:0; transform:translateY(-6px)}
.menu-item .menu-btn[aria-expanded="true"]{background:#eef6ff}

/* caret for items with children */
.menu-btn{position:relative}
/* caret aligned to the far right for clarity */
.menu-item > .menu-btn::after{
  content:'';
  position:absolute;
  right:12px; /* slightly closer to edge */
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid rgba(0,0,0,0.45);
  border-bottom:2px solid rgba(0,0,0,0.45);
  transform:translateY(-50%) rotate(45deg);
  transition:transform 160ms ease, opacity 160ms ease;
  opacity:0.95;
}
.menu-item[data-open] > .menu-btn::after{transform:translateY(-50%) rotate(-135deg)}

/* layout and overlap fixes: force nested submenu to appear within viewport where possible */
.menu .submenu .submenu{left:calc(100% + 22px); right:auto} /* offset so nested submenu doesn't overlap parent */
.menu .submenu img, .menu .submenu svg, .menu .submenu i{max-width:22px; max-height:22px; margin-right:10px; flex:0 0 auto}
.menu .submenu .icon{margin-right:10px; flex:0 0 auto}
.menu .submenu .menu-btn{padding-right:36px} /* ensure submenu items also reserve space for caret */
.menu .submenu .submenu-right{left:auto; right:100%}

/* small screens: stack menu and expand full width */
@media (max-width:768px){
  .menu{flex-direction:column; align-items:stretch}
  .menu-item{width:100%}
  .menu-link, .menu-btn{width:100%; justify-content:flex-start}
  .menu .submenu{position:relative; top:0; left:0; box-shadow:none; margin:0.25rem 0 0 0; min-width:0; border-radius:8px}
  .menu .submenu .submenu{margin-left:0.5rem; left:0}
}

/* ensure submenu is hidden even if Bootstrap's .dropdown-menu is present */
.menu .dropdown-menu{display:none}