/*
菜单样式文件 - menu.css
包含下拉菜单、用户菜单、菜单搜索等相关样式定义
*/

/* 固定 宽度；并填充空白 */
.fixed-width {
    display: inline-block;
    /*width: 200px;*/
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出内容（可选） */
}

    /* 兼容旧浏览器：通过伪元素强制两端对齐 */
    .fixed-width::after {
        content: '';
        display: inline-block;
        /*width: 100%;*/
    }

/* 菜单 光标停留 */
.navbar-brand:hover,
.navbar-nav li:hover + li:not(.NO_Hover) {
    color: black;
    background-color: #1FC7FF; /* 亮浅蓝 */
}

/* 用户弹出菜单 - 基于DropdownTest页面样式 */

.u_menu {
    display: none; /* 默认隐藏 */
    position: absolute;
    z-index: 9999;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: auto;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
}

/* 下拉菜单显示状态 */
.u_menu.show {
    display: block;
}

/* 确保Fill_Right类的菜单不会超出视口 */
.u_menu.Fill_Right {
    right: 0;
}

.u_menu-group {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.u_menu-title {
    width: 100%;
    padding: 8px 10px;
    font-weight: bold;
    color: #333;
    font-size: 13px;
    border-bottom: 2px solid #e9ecef;
    background-color: #f0f0f0;
    text-align: center;
    cursor: pointer;
    margin-bottom: 8px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.u_menu-items {
    flex: 1;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 5px;
    align-content: start;
    overflow: visible;
}

/* 菜单项样式 - 相当于dropdown-group-items的class="dropdown-item" */
.u_menu-items a {
    padding: 6px 8px;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 12px;
    background-color: white;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.u_menu-items a:hover {
    background-color: #e3f2fd;
    border-color: #2196f3;
    color: #2196f3;
}

/* 搜索容器样式 */
.menu-search-container {
    margin-bottom: 15px;
    padding: 10px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 菜单按钮容器样式 */
.menu-buttons-container {
    margin-bottom: 10px;
}

/* 下拉菜单 */
/* 下拉菜单 触发按钮 折叠/展开 */
.dropdown-toggle {
    border: none; /* 边框 无 */
    border-radius: 2px; /* 圆角 */
}

#GoodsToggle:not(hover) {
    background-color: transparent;
}

/* 下拉菜单 容器 */
#GoodsMenu {
    max-height: calc(100vh - var(--bs-body-fixedTop) - var(--bs-body-fixedBottom) - 140px);
}

#MyMenu {
    max-height: calc(100vh - var(--bs-body-fixedTop) - var(--bs-body-fixedBottom) - 80px);
    overflow: auto;
    /* 确保在nav下方定位 */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 9999;
    margin-top: 0;
}

/* 下拉菜单 样式增强 */
.dropdown-menu {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.u_menu-group {
    margin-bottom: 15px;
    padding: 10px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* 菜单内容容器的自定义滚动条样式 */
.menu-content-container::-webkit-scrollbar {
    width: 6px;
}

.menu-content-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.menu-content-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.menu-content-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* 菜单折叠图标动画 */
.menu-collapse-icon {
    transition: transform 0.3s ease;
}

.menu-collapse-icon.collapsed {
    transform: rotate(-90deg);
}