/* =============================================================
   下拉菜单修复（覆盖 app.css / enhancements.css 的冲突规则）
   必须在 app.css、enhancements.css 之后加载
   ============================================================= */

/* 1) 打通头像与菜单之间的空隙
   app.css 里 .dropdown-menu 用 top: calc(100% + var(--space-2)) 定位，
   头像底边到菜单顶边之间有一段没有元素覆盖的空白。鼠标往下移动时
   会先离开 .user-dropdown，:hover 失效，菜单在指针到达之前就消失了。
   改为 top: 100% + 透明 padding-top，让空隙本身属于菜单的命中区域。 */
.dropdown-menu {
    top: 100% !important;
    padding-top: calc(var(--space-2) + var(--space-2)) !important;
}

/* 2) 让 JS 的点击开合真正生效
   ui.js 的 initUserDropdown() 会在 .user-dropdown 上切换 .active，
   但没有任何 CSS 消费这个类，所以点击只是空转（配合下面第 3 条
   就表现为「一点就闪」）。这里补上对应规则。 */
.user-dropdown.active .dropdown-menu {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* 3) 去掉入场动画
   enhancements.css 给 .dropdown-menu 加了 animation: dropdownSlideIn，
   而 app.css 靠 opacity/transform 的 transition 控制显隐。动画在页面
   加载时就播放一次（把菜单从 opacity:0 拉到 1，结束后又回落到
   app.css 的 opacity:0），这就是那一下闪现。显隐统一交给 transition。 */
.dropdown-menu {
    animation: none !important;
}

/* 4) 悬停时不要位移
   enhancements.css 的 .dropdown-menu a:hover { transform: translateX(5px) }
   会让菜单项在指针下方横向抽动，靠近边缘时指针可能落到项外，
   触发反复的 enter/leave。保留背景高亮，去掉位移。 */
.dropdown-menu a:hover {
    transform: none !important;
}

/* 5) 菜单层级要高于导航栏自身的合成层
   enhancements.css 对 .navbar 设了 transform: translateZ(0)，
   这会创建新的层叠上下文。给菜单一个明确的 z-index，
   避免被同层的兄弟元素盖住导致点不中。 */
.user-dropdown {
    position: relative;
    z-index: 1002;
}

.dropdown-menu {
    z-index: 1003;
}

/* 6) 头像不参与文本选中，避免连点时选中图片产生拖拽反馈 */
.user-avatar {
    user-select: none;
    -webkit-user-drag: none;
}