/*
 * 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. Scoped to .cloodo-sidebar-menu only.
 * 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(--c-brand-50);
  color:var(--c-brand-700);
  font-weight:var(--fw-semibold);
}
.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.) */