/*
 * user-menu.css — user (account) sidebar menu, standardized to the dropdown-menu
 * design tokens (--dd-*). Token-only; loaded after media/com_cloodo/css/menu.css so
 * it overrides the legacy Cloodo styling. Sidebar rules are scoped to
 * .cloodo-sidebar-menu; frontend account-menu rules are scoped below.
 * See tokens.css (--dd-*) and menu-hover-expand.css for the dropdown reference style.
 */

.cloodo-sidebar-menu .navigation.navigation-main{
  background:var(--dd-bg);
  border:1px solid var(--dd-border);
  border-radius:var(--dd-radius);
  box-shadow:var(--dd-shadow);
  padding:var(--dd-pad);
  margin:0;
  list-style:none;
  font-family:var(--font-base);
}

/* top-level + sub items share the dropdown item rhythm */
.cloodo-sidebar-menu .navigation-main .nav-item{list-style:none;margin:0;}
.cloodo-sidebar-menu .navigation-main .nav-item > a{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  padding:var(--dd-item-py) var(--dd-item-px);
  border-radius:var(--dd-radius);
  color:var(--dd-item-color);
  background:transparent;
  font-size:var(--fs-14);
  line-height:var(--lh-base);
  text-decoration:none;
  transition:background var(--dd-transition) var(--ease-standard),
             color var(--dd-transition) var(--ease-standard);
}
.cloodo-sidebar-menu .navigation-main .nav-item > a svg{
  flex-shrink:0;
  color:var(--color-text-muted);
  transition:color var(--dd-transition) var(--ease-standard);
}
.cloodo-sidebar-menu .navigation-main .menu-title,
.cloodo-sidebar-menu .navigation-main .menu-item{
  font-size:var(--fs-14);
  color:inherit;
}

/* hover */
.cloodo-sidebar-menu .navigation-main .nav-item > a:hover{
  background:var(--dd-item-hover-bg);
  color:var(--dd-item-hover-fg);
}
.cloodo-sidebar-menu .navigation-main .nav-item > a:hover svg{color:var(--dd-item-hover-fg);}

/* focus-visible a11y */
.cloodo-sidebar-menu .navigation-main .nav-item > a:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

/* active group / current */
.cloodo-sidebar-menu .navigation-main .nav-item.sidebar-group-active > a,
.cloodo-sidebar-menu .navigation-main .nav-item.active > a{
  background:var(--cm-dashboard-brand-soft, var(--c-brand-50));
  color:var(--c-brand-700);
  font-weight:500;
  box-shadow:none;
}
.cloodo-sidebar-menu .navigation-main .nav-item.sidebar-group-active > a svg,
.cloodo-sidebar-menu .navigation-main .nav-item.active > a svg{color:var(--c-brand-600);}

/* submenu: indent + divider, same item style */
.cloodo-sidebar-menu .navigation-main .menu-content{
  list-style:none;
  margin:var(--sp-4) 0 var(--sp-4);
  padding:0 0 0 var(--sp-12);
  border-left:1px solid var(--dd-divider);
}
.cloodo-sidebar-menu .navigation-main .menu-content .nav-item > a{
  padding-top:var(--sp-4);
  padding-bottom:var(--sp-4);
  color:var(--color-text-muted);
}
.cloodo-sidebar-menu .navigation-main .menu-content .nav-item > a:hover{
  color:var(--dd-item-hover-fg);
  background:var(--dd-item-hover-bg);
}
.cloodo-sidebar-menu .navigation-main .menu-content .nav-item > a svg{width:10px;height:10px;}

/* ============================================================
   Sidebar polish — brand row + icon column alignment
   (paired with profile-modern.css; loaded after menu-hover-expand.css)
   ============================================================ */

/* Drop the default underline browsers add to <a class="navbar-brand">. The
   legacy rule only cleared it on :hover/:focus, so the brand text "CMSMART"
   showed an underline in its resting state. */
.cloodo-sidebar-menu .main-menu .navbar-brand,
.cloodo-sidebar-menu .main-menu a{
  text-decoration:none;
}
.cloodo-sidebar-menu .main-menu .navbar-brand:hover,
.cloodo-sidebar-menu .main-menu .navbar-brand:focus{
  text-decoration:none;
}

/* Brand row: drop any inherited bottom border so the "CMSMART" header sits
   flush against the navigation list (no visible divider line). */
.cloodo-sidebar-menu .main-menu .navbar-header,
.cloodo-sidebar-menu .main-menu .navbar-header .navbar-brand{
  border-bottom:0;
  box-shadow:none;
}

/* (Vuexy uses fixed-left icon anchoring — the link's intrinsic padding
 * + flexbox geometry keep the icon at a consistent x in both collapsed
 * and expanded states. The earlier `justify-content:center` polish broke
 * that anchoring, so it has been removed. The canonical icon/sizing
 * rules now live in profile-shell.css's Vuexy port block.) */

/* Frontend account menu: reuse dashboard topbar markup without restyling pages. */
.nb-header .nav_profile.cm-front-account-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
  min-width:max-content;
}
.nb-header .nav_profile.cm-front-account-nav .login-regis-h{
  display:inline-flex;
  position:static !important;
  float:none !important;
  margin:0 !important;
  transform:none !important;
  flex:0 0 auto;
}
.nb-header .nav_profile.cm-front-account-nav .login-regis-h .button-link--quote{
  margin:0 !important;
  white-space:nowrap;
}
.nb-header .cm-account-menu--frontend{
  position:relative;
  display:inline-flex;
  font-family:var(--font-base, inherit);
  flex:0 0 auto;
  z-index:30;
}
.nb-header .cm-account-menu--frontend button{
  font:inherit;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__user{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:42px;
  min-width:42px;
  min-height:42px;
  padding:4px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__user:hover,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__user[aria-expanded="true"]{
  background:rgba(255,255,255,.2);
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__avatar,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#f4f4f5;
  color:#27272a;
  font-size:13px;
  font-weight:700;
  overflow:hidden;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__avatar img,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__name{
  display:none;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__user-caret{
  display:none;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu[hidden]{
  display:none;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:280px;
  padding:8px;
  border:1px solid rgba(15,23,42,.1);
  border-radius:12px;
  background:#fff;
  box-shadow:0 20px 48px rgba(15,23,42,.18);
  color:#172033;
  text-align:left;
  z-index:1200;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px 12px;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-avatar{
  width:38px;
  height:38px;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-id{
  min-width:0;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-id strong,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-id span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-id strong{
  color:#111827;
  font-size:14px;
  line-height:1.25;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-id span{
  margin-top:3px;
  color:#64748b;
  font-size:12px;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-section{
  padding:6px 0;
  border-top:1px solid rgba(15,23,42,.08);
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:36px;
  padding:8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#172033;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-item svg{
  flex:0 0 auto;
  color:#64748b;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-item:hover,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-item:focus-visible{
  background:#f3f4f6;
  color:#111827;
  outline:none;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-kbd{
  margin-left:auto;
  padding:2px 6px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:5px;
  background:#f8fafc;
  color:#172033;
  font-size:11px;
  font-weight:500;
  line-height:1.2;
}
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-section--danger .cm-shell-topbar__usermenu-item,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-item--danger,
.nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu-item--danger svg{
  color:#ef4444;
}

@media (max-width:767px){
  .nb-header .nav_profile.cm-front-account-nav{
    gap:8px;
  }
  .nb-header .cm-account-menu--frontend .cm-shell-topbar__name{
    display:none;
  }
  .nb-header .cm-account-menu--frontend .cm-shell-topbar__usermenu{
    right:-8px;
    width:min(280px, calc(100vw - 24px));
  }
}