/* 强制重置所有可能干扰的样式 - 放在最前面 */
.card-style, .content, .card-body {
    overflow: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* ===== 基础栅格系统 ===== */
.eoe-grid {
    display: flex;
    flex-direction: column;  /* 默认窄屏：上下排列 */
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* 所有列的基础样式 */
.eoe-col {
    width: 100%;  /* 窄屏默认占满 */
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* 列之间的间距 - 窄屏时上下间距 */
.eoe-col:not(:last-child) {
    margin-bottom: 15px !important;
}

/* ===== 两列布局 (左右) ===== */
/* 窄屏：自动上下排列（已由基础样式实现） */

/* 宽屏：左右排列 */
@media (min-width: 992px) {
    /* 两列布局容器 */
    .eoe-grid-2 {
        flex-direction: row !important;
    }
    
    /* 两列布局的列宽 */
    .eoe-grid-2 .eoe-col {
        width: 50% !important;
        margin-bottom: 0 !important;  /* 移除窄屏的底部间距 */
    }
    
    /* 左侧列右间距 */
    .eoe-grid-2 .eoe-col:first-child {
        padding-right: 8px !important;
    }
    
    /* 右侧列左间距 */
    .eoe-grid-2 .eoe-col:last-child {
        padding-left: 8px !important;
    }
}

/* ===== 三列布局 (左中右) ===== */
/* 窄屏：自动上中下排列（由基础样式实现，三个块依次排列） */

/* 宽屏：左中右排列 */
@media (min-width: 992px) {
    /* 三列布局容器 */
    .eoe-grid-3 {
        flex-direction: row !important;
    }
    
    /* 三列布局的列宽 */
    .eoe-grid-3 .eoe-col {
        width: 33.333% !important;
        margin-bottom: 0 !important;  /* 移除窄屏的底部间距 */
    }
    
    /* 列之间的水平间距 */
    .eoe-grid-3 .eoe-col:not(:last-child) {
        padding-right: 8px !important;
    }
    
    /* 如果需要左右两边的间距不同，可以用下面更精确的控制 */
    /* .eoe-grid-3 .eoe-col:first-child {
        padding-right: 8px !important;
    }
    .eoe-grid-3 .eoe-col:nth-child(2) {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .eoe-grid-3 .eoe-col:last-child {
        padding-left: 8px !important;
    } */
}

/* ===== 两列比例布局 (70/30) ===== */
@media (min-width: 992px) {
    .eoe-grid-70-30 {
        flex-direction: row !important;
    }
    
    .eoe-grid-70-30 .eoe-col:first-child {
        width: 70% !important;
        padding-right: 8px !important;
        margin-bottom: 0 !important;
    }
    
    .eoe-grid-70-30 .eoe-col:last-child {
        width: 30% !important;
        padding-left: 8px !important;
        margin-bottom: 0 !important;
    }
}

/* ===== 两列比例布局 (30/70) ===== */
@media (min-width: 992px) {
    .eoe-grid-30-70 {
        flex-direction: row !important;
    }
    
    .eoe-grid-30-70 .eoe-col:first-child {
        width: 30% !important;
        padding-right: 8px !important;
        margin-bottom: 0 !important;
    }
    
    .eoe-grid-30-70 .eoe-col:last-child {
        width: 70% !important;
        padding-left: 8px !important;
        margin-bottom: 0 !important;
    }
}

/* ===== 三列比例布局 (25/50/25) ===== */
@media (min-width: 992px) {
    .eoe-grid-25-50-25 {
        flex-direction: row !important;
    }
    
    .eoe-grid-25-50-25 .eoe-col:first-child {
        width: 25% !important;
        padding-right: 8px !important;
        margin-bottom: 0 !important;
    }
    
    .eoe-grid-25-50-25 .eoe-col:nth-child(2) {
        width: 50% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 0 !important;
    }
    
    .eoe-grid-25-50-25 .eoe-col:last-child {
        width: 25% !important;
        padding-left: 8px !important;
        margin-bottom: 0 !important;
    }
}

/* ===== 可选：自定义间距类 ===== */
/* 如果需要调整间距，可以添加以下辅助类 */
.eoe-gap-small .eoe-col:not(:last-child) {
    margin-bottom: 10px !important;
}

@media (min-width: 992px) {
    .eoe-gap-small.eoe-grid-2 .eoe-col:first-child {
        padding-right: 5px !important;
    }
    .eoe-gap-small.eoe-grid-2 .eoe-col:last-child {
        padding-left: 5px !important;
    }
    
    .eoe-gap-small.eoe-grid-3 .eoe-col:not(:last-child) {
        padding-right: 5px !important;
    }
}

.eoe-gap-large .eoe-col:not(:last-child) {
    margin-bottom: 20px !important;
}

@media (min-width: 992px) {
    .eoe-gap-large.eoe-grid-2 .eoe-col:first-child {
        padding-right: 15px !important;
    }
    .eoe-gap-large.eoe-grid-2 .eoe-col:last-child {
        padding-left: 15px !important;
    }
    
    .eoe-gap-large.eoe-grid-3 .eoe-col:not(:last-child) {
        padding-right: 15px !important;
    }
}

/* ===== 可选：移除列背景色（用于生产环境） ===== */
/* .eoe-col { background: none !important; border: none !important; } */

/* ===== 调试样式（测试完成后可以注释掉） ===== */
.eoe-col {
    background-color: rgba(0,123,255,0.05);
    border: 1px dashed #007bff;
    min-height: 50px;
    padding: 10px !important;  /* 临时内边距，方便查看内容 */
}