/* 强制容器宽度为 100% 以显示完整表格 */
.container {
    max-width: 100% !important;
    width: 100% !important;
}

/* 确保所有 data-v 容器都使用全宽 */
[class*="container[data-v-"] {
    max-width: 100% !important;
    width: 100% !important;
}

/* 确保主应用区域全宽 */
#app {
    width: 100% !important;
    max-width: none !important;
}

/* 优化表格列宽 - 限制协议相关列的宽度 */
.el-table .el-table__cell {
    min-width: auto !important;
    padding: 8px 5px !important;
}

/* 协议设置、协议端口号、协议 token 列宽度优化 */
.el-table th:nth-child(4),
.el-table td:nth-child(4),
.el-table th:nth-child(5),
.el-table td:nth-child(5),
.el-table th:nth-child(6),
.el-table td:nth-child(6) {
    max-width: 120px !important;
    min-width: 60px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 确保表格可以横向滚动 */
.el-table {
    min-width: 100% !important;
}

/* 确保表格外层容器支持横向滚动 */
.overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 确保表格内容不会被截断 */
.el-table__inner-wrapper {
    min-width: fit-content !important;
}

/* 桌面端优化 */
@media (min-width: 768px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* 优化表格整体宽度，减少不必要的空白 */
.el-table--medium td,
.el-table--medium th {
    padding: 6px 0 !important;
}

/* 移动端表格触摸滑动修复 - 覆盖 Element Plus 默认的 overflow:hidden */
.el-table__body-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
}

.el-table__header-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
}

/* 确保表格外层容器在移动端也能触摸滑动 */
@media (max-width: 768px) {
    .el-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
    }
}