/* 左侧菜单样式优化 */
.layui-side {
    background-color: #20222A !important;
}

.layui-nav-tree {
    background-color: #20222A !important;
}

.layui-nav-tree .layui-nav-item > a {
    height: 45px;
    line-height: 45px;
    font-size: 14px;
}

.layui-nav-tree .layui-nav-child dd a {
    height: 40px;
    line-height: 40px;
    padding-left: 45px;
}

/* 隐藏展开箭头 */
.layui-nav-tree .layui-nav-more {
    display: none;
}

/* 始终展开子菜单 */
.layui-nav-tree .layui-nav-child {
    display: block !important;
}

/* 选中状态 */
.layui-nav-tree .layui-this > a, 
.layui-nav-tree .layui-this > a:hover {
    background-color: #009688;
}

/* 鼠标悬停效果 */
.layui-nav-tree .layui-nav-item a:hover {
    background-color: #2B2E37;
}

/* 子菜单选中状态 */
.layui-nav-tree .layui-nav-child dd.layui-this a, 
.layui-nav-tree .layui-nav-child dd.layui-this {
    background-color: #009688;
}

/* 标签页样式 */
.layui-tab {
    margin: 0;
    height: 100%;
}

.layui-tab-content {
    padding: 0;
    height: calc(100% - 41px);
}

.layui-tab-item {
    height: 100%;
}

.layui-tab-iframe {
    width: 100%;
    height: 100%;
}

/* 标签栏样式优化 */
.layui-tab-title {
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
    padding-right: 40px;
    box-sizing: border-box;
}

.layui-tab-title li {
    padding: 0 15px;
    line-height: 40px;
}

.layui-tab-title .layui-this:after {
    height: 41px;
}

/* 标签页内容区域滚动条美化 */
.layui-tab-content::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.layui-tab-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.1);
}

.layui-tab-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,.05);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    /* 左侧菜单 */
    .layui-layout-admin .layui-side {
        width: 0;
        overflow: hidden;
        transition: all .3s;
        z-index: 1001;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: #20222A;
    }
    
    .layui-layout-admin .layui-side.show {
        width: 200px;
    }
    
    /* 内容区域适应 */
    .layui-layout-admin .layui-body {
        left: 0;
        top: 50px;
    }
    
    /* 头部 */
    .layui-layout-admin .layui-header {
        padding: 0 15px;
        position: fixed;
        width: 100%;
        z-index: 1000;
        height: 50px;
        line-height: 50px;
    }
    
    .layui-layout-admin .layui-logo {
        width: auto;
        line-height: 50px;
    }
    
    /* 菜单按钮 - 修改为左下角半透明箭头 */
    .menu-btn {
        display: block !important;
        position: fixed;
        left: 10px;  /* 改为距离左边10px */
        bottom: 20px;
        width: 25px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        border-radius: 25px;  /* 改为完全圆角 */
        font-size: 14px;
        z-index: 999;
        transition: all .3s;
    }
    
    .menu-btn:before {
        content: "\e65b";  /* layui的向右箭头图标 */
    }
    
    .menu-btn:hover {
        background-color: rgba(0, 0, 0, 0.7);
        width: 30px;
        left: 8px;  /* 悬停时稍微向左移动 */
    }
    
    .menu-btn:active {
        background-color: rgba(0, 0, 0, 0.8);
    }
    
    /* 标签页 */
    .layui-tab {
        margin-top: 60px;  /* 为固定头部留出空间 */
        margin: 0;
    }
    
    .layui-tab-title {
        height: 35px;
        padding-right: 40px;  /* 为可能的滚动按钮留出空间 */
        margin: 0;
    }
    
    .layui-tab-title li {
        line-height: 35px;
        padding: 0 10px;
    }
    
    /* 底部 */
    .layui-layout-admin .layui-footer {
        left: 0;
        padding: 5px;
    }
    
    /* 遮罩层 */
    .mobile-mask {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1000;  /* 确保在菜单按钮之上，菜单之下 */
    }
    
    .mobile-mask.show {
        display: block;
    }
}