/* /portal/assets/css/dropdown.css */
/* 企业级 Dropdown 组件 */

/* 1. 容器：保留 relative，方便其他场景用 absolute */
.ui-dropdown {
  position: relative;
  display: inline-block;
}

/* 触发器：不强加样式，交给外层控制 */
.ui-dropdown-trigger {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* 2. 默认菜单样式（给后台、页面内部 dropdown 用，保持 absolute） */
.ui-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  margin-top: 0;
  min-width: 180px;

  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

  padding: 6px 0;
  z-index: 1300;
}

/* 3. 门户头像专用：固定在导航栏下方，不随页面滚动 */
.portal-user-dropdown-menu .ui-dropdown-menu {
  position: fixed;                 /* ⭐ 固定在屏幕，不跟着内容滚动 */
  top: var(--portal-nav-height);   /* ⭐ 紧贴导航栏底部 */
  /*right: 24px;                     /* ⭐ 和导航栏右侧 padding 对齐（PC） */
  right: 16px; /* ⭐ 从 24px 改成 16px，右边框与箭头对齐 */
  
  width: 180px; /* ⭐ 强制宽度 */
  max-width: 180px; /* ⭐ 防止被内容撑开 */
  min-width: 180px; /* ⭐ 三重保险 */
  
  z-index: 2000;                   /* ⭐ 保证在导航栏之上 */
}

/* 手机端右侧对齐导航栏 padding:16px */
@media (max-width: 768px) {
  .portal-user-dropdown-menu .ui-dropdown-menu {
    /*right: 16px;*/
	right: 12px; /* ⭐ 手机端箭头更靠右，12px 更贴合 */
	width: 180px;
	max-width: 220px; /* ⭐ 手机端也保持一致宽度 */
	width: auto;
  }
}

/* ================================
   Dropdown 动画（下滑 / 上滑 + 淡入）
   ================================ */

/* 高度动画（仅门户用户菜单） */
.portal-user-dropdown-menu .ui-dropdown-menu {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        height 0.25s cubic-bezier(0.33, 1, 0.68, 1),
        opacity 0.2s ease,
        transform 0.25s ease;
}

/* 展开状态（仅门户用户菜单） */
.portal-user-dropdown-menu .ui-dropdown-menu.open {
    opacity: 1;
    transform: translateY(0);
}

/* 对齐方式 */
.ui-dropdown[data-dropdown-align="right"] .ui-dropdown-menu { right: 0; }
.ui-dropdown[data-dropdown-align="left"] .ui-dropdown-menu { left: 0; }

/* 隐藏状态 */
.ui-dropdown-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* 分割线 */
.ui-dropdown-divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(0, 0, 0, 0.06);
}

/* ================================
   大厂级：图标 + 文本对齐布局
   ================================ */

.ui-dropdown-menu a.ui-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 14px;
  color: #2b2b2b !important;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.ui-dropdown-menu a.ui-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* 图标尺寸与对齐 */
.ui-dropdown-menu a.ui-dropdown-item i,
.ui-dropdown-menu a.ui-dropdown-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2;
  stroke: #2b2b2b !important;
  color: #2b2b2b !important;
}

/* 文本行高与对齐 */
.ui-dropdown-menu a.ui-dropdown-item span {
  line-height: 1;
  font-size: 14px;
  color: #2b2b2b !important;
}

/* 覆盖 topbar 的白色图标规则 */
.ui-dropdown-menu i,
.ui-dropdown-menu svg {
  stroke: #2b2b2b !important;
  color: #2b2b2b !important;
}

.portal-user-trigger .arrow {
  font-size: 10px;   /* 默认大约 12–14px，改成 10px 更协调 */
  line-height: 1;    /* 避免上下留白 */
  display: inline-block;
  transform: translateY(1px); /* 轻微下移，让它更贴近文字基线 */
}

/* 让门户下拉菜单显示图标（与后台一致） */
.ui-dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-dropdown-menu-item-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666; /* 可选：图标颜色 */
    font-size: 16px;
}

/* ⭐ 门户专用：禁用后台的 align 对齐规则 */
.portal-user-dropdown-menu[data-dropdown-align="right"] .ui-dropdown-menu {
    right: auto !important;
}

.portal-user-dropdown-menu[data-dropdown-align="left"] .ui-dropdown-menu {
    left: auto !important;
}

/* ================================
   用户菜单触发器激活状态（菜单展开时）
   ================================ */
.portal-user-trigger.active,
.portal-user-trigger.active span,
.portal-user-trigger.active .arrow {
    color: #1677ff !important; /* 阿里云蓝 */
}