/**
 * 模块菜单样式
 * Material Design 3 风格
 * 仅电脑版显示
 */

/* ===== 模块菜单 ===== */
.mdc-module-menu {
    position: fixed;
    top: 94px; /* 顶部栏(30px) + 页头(64px) = 94px */
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    z-index: 100;
    box-sizing: border-box;
    height: 56px; /* 菜单高度，留足空间避免按钮边框被裁切 */
    display: flex;
    align-items: flex-start; /* 改为顶部对齐，让滚动条在底部 */
    padding-top: 0;
    padding-bottom: 0; /* 底部无内边距，让滚动条紧贴下边框 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible; /* 不裁切按钮上边框 */
}

.mdc-module-menu .mdc-container {
    max-width: 100%;
    padding: 8px 8px 8px 8px; /* 左右留出按钮空间后由 nav-wrap 控制内边距 */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    overflow: visible;
}

/* 菜单横向滚动容器：左按钮 + 可滚动区 + 右按钮 */
.mdc-module-menu__nav-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: visible; /* 不裁切按钮上边框 */
}

/* 左右切换按钮（仅在有溢出时显示，由 JS 添加 .menu-scrollable）
   默认隐藏在边缘外；鼠标悬停导航区域时滑入显示 */
.mdc-module-menu__btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.2, 0, 0, 1),
                transform 0.25s cubic-bezier(0.2, 0, 0, 1),
                background-color 0.2s, color 0.2s;
}
/* 左按钮：向左藏 */
.mdc-module-menu__btn--prev {
    transform: translateX(-8px);
}
/* 右按钮：向右藏 */
.mdc-module-menu__btn--next {
    transform: translateX(8px);
}
.mdc-module-menu.menu-scrollable .mdc-module-menu__btn {
    display: inline-flex;
}
/* 鼠标悬停导航区域时按钮滑入 */
.mdc-module-menu__nav-wrap:hover .mdc-module-menu__btn:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
/* 按钮自身 hover 高亮 */
.mdc-module-menu__btn:hover:not(:disabled) {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.mdc-module-menu__btn:disabled {
    opacity: 0 !important;
    pointer-events: none;
    cursor: default;
}
/* 箭头图标在按钮内上下左右居中
 * 左钮 translate(-1px, 2px)、右钮 translate(1px, 2px)，与导航文字行视觉对齐 */
.mdc-module-menu__btn .material-symbols-outlined {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: translateY(2px); /* 默认垂直 2px 下移，与 prev/next 一致 */
}
.mdc-module-menu__btn--prev .material-symbols-outlined {
    transform: translate(-1px, 2px);
}
.mdc-module-menu__btn--next .material-symbols-outlined {
    transform: translate(1px, 2px);
}

/* 可滚动区域（不裁切子元素，横向滚动由 list 的 overflow-x 控制） */
.mdc-module-menu__scroll-inner {
    flex: 1;
    min-width: 0;
    overflow: visible;
    padding: 0 8px;
}

.mdc-module-menu__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible; /* 不裁切按钮上边框 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox - 隐藏滚动条 */
    -ms-overflow-style: none; /* IE and Edge */
    width: 100%;
    scroll-behavior: smooth;
}
.mdc-module-menu__list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera - 隐藏滚动条 */
}

.mdc-module-menu__item {
    flex-shrink: 0;
    position: relative;
}

.mdc-module-menu__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px; /* 增加内边距，更舒适 */
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-family: var(--md-sys-typescale-label-large-font, 'Roboto', sans-serif);
    font-size: 14px; /* 统一字体大小 */
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
    position: relative;
    white-space: nowrap;
    height: 36px; /* 增加高度 */
    min-width: 60px; /* 最小宽度 */
    box-sizing: border-box;
}

.mdc-module-menu__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background-color: transparent;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.mdc-module-menu__link:hover::before {
    background-color: var(--md-sys-color-surface-container-highest);
}

.mdc-module-menu__link:hover {
    color: var(--md-sys-color-on-surface);
    transform: translateY(-1px);
}

.mdc-module-menu__link:active {
    transform: translateY(0);
}

.mdc-module-menu__text {
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 活动状态样式 */
.mdc-module-menu__item--active .mdc-module-menu__link {
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

.mdc-module-menu__item--active .mdc-module-menu__link::before {
    background-color: var(--md-sys-color-primary-container);
    opacity: 0.3;
}

.mdc-module-menu__item--active .mdc-module-menu__link::after {
    content: '';
    position: absolute;
    bottom: 4px; /* 距离底部4px */
    left: 50%;
    transform: translateX(-50%);
    width: 32px; /* 增加宽度，更明显 */
    height: 3px;
    background-color: var(--md-sys-color-primary);
    border-radius: 3px 3px 0 0;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(var(--md-sys-color-primary-rgb, 33, 150, 243), 0.3);
}

.mdc-module-menu__item--active .mdc-module-menu__link:hover::before {
    background-color: var(--md-sys-color-primary-container);
    opacity: 0.4;
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
    .mdc-module-menu {
        background-color: var(--md-sys-color-surface);
        border-bottom-color: var(--md-sys-color-outline-variant);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    /* 系统深色下箭头用深色，在黄色按钮上更清晰 */
    .mdc-module-menu__btn {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container);
    }
    .mdc-module-menu__btn:hover:not(:disabled) {
        background-color: var(--md-sys-color-primary);
        color: var(--md-sys-color-on-primary);
    }
    .mdc-module-menu__link:hover::before {
        background-color: var(--md-sys-color-surface-container-highest);
    }
    .mdc-module-menu__item--active .mdc-module-menu__link::before {
        background-color: var(--md-sys-color-primary-container);
        opacity: 0.2;
    }
    .mdc-module-menu__item--active .mdc-module-menu__link::after {
        box-shadow: 0 2px 4px rgba(255, 235, 59, 0.4); /* 淡黄色阴影 */
    }
}

:root[data-theme="dark"] .mdc-module-menu {
    background-color: var(--md-sys-color-surface);
    border-bottom-color: var(--md-sys-color-outline-variant);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 深色模式：箭头用深色，在黄色按钮上更清晰 */
:root[data-theme="dark"] .mdc-module-menu__btn,
:root.theme-dark .mdc-module-menu__btn {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
:root[data-theme="dark"] .mdc-module-menu__btn:hover:not(:disabled),
:root.theme-dark .mdc-module-menu__btn:hover:not(:disabled) {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

:root[data-theme="dark"] .mdc-module-menu__link:hover::before {
    background-color: var(--md-sys-color-surface-container-highest);
}

:root[data-theme="dark"] .mdc-module-menu__item--active .mdc-module-menu__link::before {
    background-color: var(--md-sys-color-primary-container);
    opacity: 0.2;
}

:root[data-theme="dark"] .mdc-module-menu__item--active .mdc-module-menu__link::after {
    box-shadow: 0 2px 4px rgba(255, 235, 59, 0.4);
}

/* 手机版隐藏 */
@media (max-width: 767px) {
    .mdc-module-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* 调整主内容区域的上边距，为模块菜单留出空间 */
@media (min-width: 768px) {
    body:has(.mdc-module-menu) .mdc-top-app-bar-spacer {
        height: 150px !important; /* 顶部栏(30px) + 页头(64px) + 模块菜单(56px) = 150px */
    }
    
    /* 确保菜单在页头下方正确显示 */
    .mdc-module-menu {
        top: 94px;
    }
}

/* 超大屏幕优化 */
@media (min-width: 1400px) {
    .mdc-module-menu .mdc-container {
        padding: 0 32px;
    }
    
    .mdc-module-menu__list {
        gap: 6px;
    }
    
    .mdc-module-menu__link {
        padding: 10px 24px;
        font-size: 15px;
    }
}