/* 手机端全局适配 - 思普报价系统 */

/* ========== 小屏幕（平板/手机横屏） ========== */
@media screen and (max-width: 768px) {
    /* 侧边栏：缩小宽度 */
    .el-menu {
        width: 160px !important;
        min-width: 160px !important;
        font-size: 13px !important;
    }
    
    .el-menu .el-menu-item,
    .el-menu .el-submenu__title {
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
    
    /* 主内容区：扩大 */
    .main-container,
    .app-main,
    .content-wrapper {
        margin-left: 160px !important;
        padding: 10px !important;
    }
    
    /* 表格：缩小字体 */
    .el-table {
        font-size: 12px !important;
    }
    
    .el-table th,
    .el-table td {
        padding: 6px 4px !important;
    }
    
    /* 弹窗：调整宽度 */
    .el-dialog {
        width: 90% !important;
        margin: 5vh auto !important;
    }
    
    .el-dialog__body {
        padding: 15px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    /* 表单元素 */
    .el-input__inner {
        font-size: 14px !important;
        height: 36px !important;
    }
    
    .el-button {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* ========== 超小屏幕（手机竖屏） ========== */
@media screen and (max-width: 480px) {
    /* 侧边栏：隐藏或极窄 */
    .el-menu {
        width: 50px !important;
        min-width: 50px !important;
    }
    
    /* 菜单文字隐藏，只显示图标 */
    .el-menu .el-menu-item span,
    .el-menu .el-submenu__title span {
        display: none !important;
    }
    
    .el-menu .el-menu-item,
    .el-menu .el-submenu__title {
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 18px !important;
    }
    
    /* 主内容区：全宽 */
    .main-container,
    .app-main,
    .content-wrapper {
        margin-left: 50px !important;
        padding: 8px !important;
    }
    
    /* 表格：支持横向滚动 */
    .el-table__body-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .el-table {
        font-size: 11px !important;
        min-width: 100% !important;
    }
    
    .el-table th,
    .el-table td {
        padding: 4px 2px !important;
        white-space: nowrap !important;
    }
    
    /* 弹窗：全屏 */
    .el-dialog {
        width: 95% !important;
        margin: 2vh auto !important;
    }
    
    .el-dialog__header {
        padding: 10px !important;
    }
    
    .el-dialog__title {
        font-size: 14px !important;
    }
    
    .el-dialog__body {
        padding: 10px !important;
        max-height: 75vh !important;
    }
    
    /* 分页组件 */
    .el-pagination {
        padding: 5px !important;
        font-size: 11px !important;
    }
    
    .el-pagination .el-pager li {
        min-width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
    }
    
    .el-pagination button {
        padding: 0 8px !important;
    }
    
    /* 按钮组 */
    .el-button-group .el-button {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* ========== 表格响应式：小屏幕隐藏次要列 ========== */
@media screen and (max-width: 600px) {
    /* 隐藏第3列及之后的列（可按需调整） */
    .el-table td:nth-child(n+4),
    .el-table th:nth-child(n+4) {
        /* 不隐藏，改为支持滚动 */
    }
    
    /* 确保表格容器可滚动 */
    .el-table__body-wrapper,
    .el-table__header-wrapper {
        overflow-x: auto !important;
    }
}

/* ========== 顶部导航栏 ========== */
@media screen and (max-width: 768px) {
    .navbar,
    .el-header {
        height: 50px !important;
        padding: 0 10px !important;
    }
    
    .navbar .el-dropdown,
    .navbar .el-menu--horizontal {
        font-size: 13px !important;
    }
    
    .el-menu--horizontal > .el-menu-item {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 12px !important;
    }
}

/* ========== 搜索栏 ========== */
@media screen and (max-width: 480px) {
    .search-box,
    .filter-container,
    .el-form--inline .el-form-item {
        display: block !important;
        margin-bottom: 8px !important;
    }
    
    .el-form--inline .el-form-item__label {
        float: none !important;
        display: block !important;
        text-align: left !important;
        padding: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .el-form--inline .el-form-item__content {
        margin-left: 0 !important;
    }
}