/* 
 * jQuery UI v1.14.1 Autocomplete 样式修复补丁
 * 解决升级后下拉框文字过于紧凑和悬停抖动的问题
 * 
 * 问题原因：
 * - jQuery UI v1.14.1 引入了新的 .ui-menu-item-wrapper 类
 * - 原有 global.css 样式基于旧版本设计，不适配新DOM结构
 * - 悬停状态样式不一致导致文字抖动
 * 
 * 修复方案：
 * - 同时支持新版本 .ui-menu-item-wrapper 和旧版本 DOM 结构
 * - 统一悬停和默认状态的布局属性，避免重排
 * - 使用 !important 确保样式优先级高于 global.css
 * 
 * 创建日期: 2025-10-09
 * Jira Issue: FMS-54081
 */

/* ==========================================================================
   基础 Autocomplete 容器样式 - 高优先级覆盖
   ========================================================================== */

/* 确保 autocomplete 下拉框有合适的背景和边框 - 使用更高特异性 */
ul.ui-autocomplete.ui-menu {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ui-autocomplete {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   新版本 DOM 结构支持 - jQuery UI v1.14.1
   ========================================================================== */

/* 修复新版本 ui-menu-item-wrapper 的文本间距 */
.ui-autocomplete .ui-menu-item-wrapper {
    padding: 8px 12px !important;  /* 从几乎无padding改为合适间距 */
    line-height: 1.4 !important;   /* 从line-height:1改为1.4，改善垂直间距 */
    display: block !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   旧版本兼容性支持 - 向下兼容
   ========================================================================== */

/* 兼容旧版本结构的文本间距 */
.ui-autocomplete .ui-menu-item a {
    padding: 8px 12px !important;  /* 覆盖原有的 10px .4em */
    line-height: 1.4 !important;   /* 覆盖原有的 line-height: 1 */
    display: block !important;
    background-color: transparent !important;
    border: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* 确保菜单项有正确的背景 - 使用更高特异性覆盖旧版本CSS */
ul.ui-autocomplete.ui-menu .ui-menu-item {
    background-color: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.ui-autocomplete .ui-menu-item {
    background-color: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ==========================================================================
   悬停状态稳定性修复 - 防止文字抖动
   ========================================================================== */

/* 新版本悬停状态 - 保持与默认状态相同的布局属性 */
ul.ui-autocomplete.ui-menu .ui-menu-item:hover .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-hover .ui-menu-item-wrapper,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item:hover .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item.ui-state-hover .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item.ui-state-focus .ui-menu-item-wrapper {
    background-color: #dadada !important;  /* 悬停背景色 */
    background-image: none !important;     /* 移除可能的背景图片 */
    background: #dadada !important;        /* 强制设置背景 */
    color: #212121 !important;             /* 悬停文字颜色 */
    padding: 8px 12px !important;          /* 与默认状态完全一致 */
    line-height: 1.4 !important;           /* 与默认状态完全一致 */
    border: none !important;               /* 与默认状态完全一致 */
    margin: 0 !important;                  /* 与默认状态完全一致 */
    box-sizing: border-box !important;     /* 与默认状态完全一致 */
    display: block !important;             /* 与默认状态完全一致 */
    text-decoration: none !important;      /* 与默认状态完全一致 */
    position: static !important;           /* 防止位置变化 */
}

/* 旧版本悬停状态 - 向下兼容 */
ul.ui-autocomplete.ui-menu .ui-menu-item:hover a,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-hover a,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus a,
.ui-autocomplete .ui-menu-item:hover a,
.ui-autocomplete .ui-menu-item.ui-state-hover a,
.ui-autocomplete .ui-menu-item.ui-state-focus a {
    background-color: #dadada !important;  /* 悬停背景色 */
    background-image: none !important;     /* 移除可能的背景图片 */
    background: #dadada !important;        /* 强制设置背景 */
    color: #212121 !important;             /* 悬停文字颜色 */
    padding: 8px 12px !important;          /* 与默认状态完全一致 */
    line-height: 1.4 !important;           /* 与默认状态完全一致 */
    border: none !important;               /* 与默认状态完全一致 */
    margin: 0 !important;                  /* 与默认状态完全一致 */
    box-sizing: border-box !important;     /* 与默认状态完全一致 */
    display: block !important;             /* 与默认状态完全一致 */
    text-decoration: none !important;      /* 与默认状态完全一致 */
    position: static !important;           /* 防止位置变化 */
}

/* 悬停时的菜单项背景 - 使用更高特异性覆盖旧版本CSS */
ul.ui-autocomplete.ui-menu .ui-menu-item:hover,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-hover,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus {
    background-color: #dadada !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;                  /* 与默认状态完全一致 */
    padding: 0 !important;                 /* 与默认状态完全一致 */
    box-sizing: border-box !important;     /* 与默认状态完全一致 */
    position: relative !important;         /* 与默认状态完全一致 */
    list-style: none !important;           /* 与默认状态完全一致 */
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-hover,
.ui-autocomplete .ui-menu-item.ui-state-focus {
    background-color: #dadada !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;                  /* 与默认状态完全一致 */
    padding: 0 !important;                 /* 与默认状态完全一致 */
    box-sizing: border-box !important;     /* 与默认状态完全一致 */
    position: relative !important;         /* 与默认状态完全一致 */
}

/* 强制覆盖任何可能的边框样式和背景色 - 最高优先级 */
ul.ui-autocomplete.ui-menu .ui-state-focus,
ul.ui-autocomplete.ui-menu .ui-state-hover,
.ui-autocomplete .ui-state-focus,
.ui-autocomplete .ui-state-hover {
    background-color: #dadada !important;
    background-image: none !important;
    background: #dadada !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;                 /* 确保与默认状态一致 */
    box-sizing: border-box !important;
    position: relative !important;
}

/* 额外的高优先级覆盖 - 针对可能的jQuery UI主题样式 */
ul.ui-autocomplete.ui-menu .ui-menu-item:hover,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-hover,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus,
ul.ui-autocomplete.ui-menu .ui-menu-item.ui-state-active {
    background-color: #dadada !important;
    background-image: none !important;
    background: #dadada !important;
    border: none !important;
    outline: none !important;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-hover,
.ui-autocomplete .ui-menu-item.ui-state-focus,
.ui-autocomplete .ui-menu-item.ui-state-active {
    background-color: #dadada !important;
    background-image: none !important;
    background: #dadada !important;
    border: none !important;
    outline: none !important;
}

/* ==========================================================================
   终极覆盖规则 - 最高优先级强制悬停背景色
   ========================================================================== */

/* 使用最高CSS特异性强制覆盖任何jQuery UI主题样式 */
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item:hover,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-hover,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-focus,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-active,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item:hover,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-hover,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-focus,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-active {
    background-color: #dadada !important;
    background-image: none !important;
    background: #dadada !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 针对内部包装元素的终极覆盖 */
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item:hover .ui-menu-item-wrapper,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-hover .ui-menu-item-wrapper,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-focus .ui-menu-item-wrapper,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-active .ui-menu-item-wrapper,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item:hover .ui-menu-item-wrapper,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-hover .ui-menu-item-wrapper,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-focus .ui-menu-item-wrapper,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-active .ui-menu-item-wrapper {
    background-color: #dadada !important;
    background-image: none !important;
    background: #dadada !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 针对旧版本链接元素的终极覆盖 */
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item:hover a,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-hover a,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-focus a,
body ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-active a,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item:hover a,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-hover a,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-focus a,
body .ui-autocomplete.ui-menu.ui-widget.ui-widget-content .ui-menu-item.ui-state-active a {
    background-color: #dadada !important;
    background-image: none !important;
    background: #dadada !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}