/*-------------------------------------
zTree Mobile Optimization Styles

针对移动端优化的zTree样式
解决手机上展开/折叠按钮太小不好点击的问题

version: 1.0
date: 2025-11-03
-------------------------------------*/

/* 移动端优化：增大树形组件的展开/折叠按钮点击区域 */
@media only screen and (max-width: 768px) {
    /* 放大开关按钮并扩大点击区域 */
    .ztree li span.button.switch {
        position: relative !important;
        width: 36px !important;
        height: 36px !important;
        /* 按比例放大背景图（原始160x97，放大2倍到320x194） */
        background-size: 320px 194px !important;
        margin: 0 15px 0 5px !important;
    }
    
    /* 创建更大的点击区域 */
    .ztree li span.button.switch::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        z-index: 1 !important;
    }
    
    /* 调整背景位置以适应放大后的尺寸（所有位置都乘以2） */
    .ztree li span.button.switch.root_open {
        background-position: -184px -108px !important;
    }
    .ztree li span.button.switch.root_close {
        background-position: -148px -108px !important;
    }
    .ztree li span.button.switch.roots_open {
        background-position: -184px 0 !important;
    }
    .ztree li span.button.switch.roots_close {
        background-position: -148px 0 !important;
    }
    .ztree li span.button.switch.center_open {
        background-position: -184px -36px !important;
    }
    .ztree li span.button.switch.center_close {
        background-position: -148px -36px !important;
    }
    .ztree li span.button.switch.bottom_open {
        background-position: -184px -72px !important;
    }
    .ztree li span.button.switch.bottom_close {
        background-position: -148px -72px !important;
    }
    .ztree li span.button.switch.noline_open {
        background-position: -184px -144px !important;
    }
    .ztree li span.button.switch.noline_close {
        background-position: -148px -144px !important;
    }
    
    /* 其他图标按钮也适当放大 */
    .ztree li span.button.chrom_ico_docu,
    .ztree li span.button.chrom_ico_open,
    .ztree li span.button.chrom_ico_close,
    .ztree li span.button.user_ico_docu,
    .ztree li span.button.user_ico_open,
    .ztree li span.button.user_ico_close,
    .ztree li span.button.ico_open,
    .ztree li span.button.ico_close,
    .ztree li span.button.ico_docu {
        width: 28px !important;
        height: 28px !important;
        background-size: 280px 170px !important;
        margin-right: 8px !important;
    }
    
    /* 增加每一行的高度，让整体更易于操作 */
    .ztree li {
        line-height: 40px !important;
        padding: 5px 0 !important;
    }
    
    .ztree li a {
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .ztree li span {
        line-height: 40px !important;
    }
    
    /* 调整图标按钮的尺寸 */
    .ztree li span.button.chrom_ico_docu,
    .ztree li span.button.chrom_ico_open,
    .ztree li span.button.chrom_ico_close,
    .ztree li span.button.user_ico_docu,
    .ztree li span.button.user_ico_open,
    .ztree li span.button.user_ico_close {
        width: 28px !important;
        height: 28px !important;
        background-size: 20px 20px !important;
        background-position: center !important;
    }
    
    /* 增大字体以配合更大的行高 */
    .ztree * {
        font-size: 14px !important;
    }
    
    /* 调整缩进以适应更大的按钮 */
    .ztree li ul {
        padding: 0 0 0 30px !important;
    }
    
    /* 为展开/折叠按钮添加更明显的点击反馈 */
    .ztree li span.button.switch:active {
        opacity: 0.6;
        transform: scale(0.95);
        transition: all 0.1s ease;
    }
    
    /* 优化树形容器的滚动体验 */
    .ztree {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: auto;
    }
}

/* 针对更小的手机屏幕（如iPhone SE）进一步优化 */
@media only screen and (max-width: 480px) {
    /* 在小屏手机上进一步放大开关按钮 */
    .ztree li span.button.switch {
        width: 44px !important;
        height: 44px !important;
        /* 放大2.4倍 */
        background-size: 384px 233px !important;
        margin: 0 20px 0 8px !important;
    }
    
    /* 调整背景位置（所有位置都乘以2.4） */
    .ztree li span.button.switch.root_open {
        background-position: -221px -130px !important;
    }
    .ztree li span.button.switch.root_close {
        background-position: -178px -130px !important;
    }
    .ztree li span.button.switch.roots_open {
        background-position: -221px 0 !important;
    }
    .ztree li span.button.switch.roots_close {
        background-position: -178px 0 !important;
    }
    .ztree li span.button.switch.center_open {
        background-position: -221px -43px !important;
    }
    .ztree li span.button.switch.center_close {
        background-position: -178px -43px !important;
    }
    .ztree li span.button.switch.bottom_open {
        background-position: -221px -86px !important;
    }
    .ztree li span.button.switch.bottom_close {
        background-position: -178px -86px !important;
    }
    .ztree li span.button.switch.noline_open {
        background-position: -221px -173px !important;
    }
    .ztree li span.button.switch.noline_close {
        background-position: -178px -173px !important;
    }
    
    .ztree li {
        line-height: 48px !important;
        padding: 8px 0 !important;
    }
    
    .ztree li a {
        height: 48px !important;
        line-height: 48px !important;
    }
    
    .ztree li span {
        line-height: 48px !important;
    }
    
    /* 更大的字体以提高可读性 */
    .ztree * {
        font-size: 16px !important;
    }
}

/* 平板设备优化（768px - 1024px） */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .ztree li span.button.switch {
        width: 28px !important;
        height: 28px !important;
        /* 放大1.56倍 */
        background-size: 250px 151px !important;
        margin: 0 12px 0 6px !important;
    }
    
    /* 调整背景位置（所有位置都乘以1.56） */
    .ztree li span.button.switch.root_open {
        background-position: -144px -84px !important;
    }
    .ztree li span.button.switch.root_close {
        background-position: -115px -84px !important;
    }
    .ztree li span.button.switch.roots_open {
        background-position: -144px 0 !important;
    }
    .ztree li span.button.switch.roots_close {
        background-position: -115px 0 !important;
    }
    .ztree li span.button.switch.center_open {
        background-position: -144px -28px !important;
    }
    .ztree li span.button.switch.center_close {
        background-position: -115px -28px !important;
    }
    .ztree li span.button.switch.bottom_open {
        background-position: -144px -56px !important;
    }
    .ztree li span.button.switch.bottom_close {
        background-position: -115px -56px !important;
    }
    .ztree li span.button.switch.noline_open {
        background-position: -144px -112px !important;
    }
    .ztree li span.button.switch.noline_close {
        background-position: -115px -112px !important;
    }
    
    .ztree li {
        line-height: 32px !important;
        padding: 4px 0 !important;
    }
    
    .ztree li a {
        height: 32px !important;
        line-height: 32px !important;
    }
    
    .ztree li span {
        line-height: 32px !important;
    }
}