body {
    margin: 0;
    padding: 10px;
    background-color: #f5f5f5;
    box-sizing: border-box;
}

/* 容器样式 */
#mainContainer {
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1120px; /* 允许容器占满可用宽度 */
    box-sizing: border-box;
    margin: 0 auto;
    /* 设置固定高度为768px */
    min-height: 1160px;
    height: auto;
    /* 确保容器正确包裹内容 */
    overflow: visible;
    position: relative;
    display: block;
}

/* 页面标题 */
#pageTitle {
    text-align: center;
    margin-bottom: 30px;
    color: #1E9FFF;
}

/* 数据编辑区域 */
#dataEditArea {
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
    background-color: #f9f9f9;
    width: 100%;
    box-sizing: border-box;
}

/* 数据编辑行 */
.data-edit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

/* 数据编辑组 */
#windowGroup, #serverGroup, #amountGroup, #functionGroup, #datetimeGroup {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: fit-content; /* 使宽度适应内容 */
    min-width: 0; /* 移除最小宽度限制 */
}

/* 标签样式 */
#windowLabel, #serverLabel, #amountLabel, #windowFilterLabel, #serverFilterLabel, #statusFilterLabel,#saleTypeFilterLabel, #shipServerFilterLabel, #diamondFilterLabel, #datetimeLabel, #functionLabel, #functionFilterLabel, #dateFilterLabel {
    width: 60px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 38px;
}

/* 过滤区域 */
#filterForm {
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f0f2f5;
    width: 100%;
    box-sizing: border-box;
}

/* 过滤行 */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

/* 过滤组 */
#windowFilterGroup, #diamondFilterGroup, #serverFilterGroup, #shipServerFilterGroup, #statusFilterGroup, #saleTypeFilterGroup, #filterButtonsGroup, #functionFilterGroup, #dateFilterGroup {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: fit-content; /* 使宽度适应内容 */
    min-width: 0; /* 移除最小宽度限制 */
}

/* 工具栏容器 */
#toolbarContainer {
    display: flex;
    gap: 10px;
}

/* 按钮容器 */
#filterBtn, #resetFilterBtn, #addDataBtn, #importExcelBtn, #batchDeleteBtn, #refreshBtn, #exportAllBtn, #exportNotShippedBtn, #exportShippedBtn, #exportArchiveBtn, #importArchiveBtn, #resetConfigBtn, #rowDeleteBtn {
    margin: 0 2px;
    white-space: nowrap; /* 防止按钮文字换行 */
    height: 38px; /* 与Layui默认按钮高度一致 */
}

/* 输入框容器宽度设置 */
#windowInputContainer, #mainServerContainer, #subServerContainer, #amountInputContainer, #windowFilterContainer, #diamondFilterContainer, #filterMainServerContainer, #filterSubServerContainer, #filterShipMainServerContainer, #filterShipSubServerContainer, #filterShipStatusContainer , #filterSaleTypeContainer{
    width: auto;
    min-width: 100px;
}

/* 输入框宽度设置 */
#dataInput, #amount {
    width: 130px !important;
}

#windowFilter, #diamondFilter {
    width: 150px !important;
}

#mainServer, #subServer, #filterMainServer, #filterSubServer, 
#filterShipMainServer, #filterShipSubServer {
    width: 100% !important;
}

#filterShipStatus, #filterSaleType {
    width: 100px !important;
}

/* 下拉选择框input元素宽度设置 */
#mainServer + .layui-form-select .layui-input,
#mainServer + .layui-form-select .layui-input.layui-unselect,
#subServer + .layui-form-select .layui-input,
#subServer + .layui-form-select .layui-input.layui-unselect,
#filterMainServer + .layui-form-select .layui-input,
#filterMainServer + .layui-form-select .layui-input.layui-unselect,
#filterSubServer + .layui-form-select .layui-input,
#filterSubServer + .layui-form-select .layui-input.layui-unselect,
#filterShipMainServer + .layui-form-select .layui-input,
#filterShipMainServer + .layui-form-select .layui-input.layui-unselect,
#filterShipSubServer + .layui-form-select .layui-input,
#filterShipSubServer + .layui-form-select .layui-input.layui-unselect {
    width: 100% !important;
}

#filterShipStatus + .layui-form-select .layui-input,
#filterShipStatus + .layui-form-select .layui-input.layui-unselect,
#filterSaleType + .layui-form-select .layui-input,
#filterSaleType + .layui-form-select .layui-input.layui-unselect {
    width: 100px !important;
}

/* 功能描述下拉框样式调整 */
#functionDesc + .layui-form-select dl {
    max-height: 360px !important; /* 增加下拉框最大高度 */
    overflow-y: auto !important; /* 允许垂直滚动 */
}

/* 功能过滤下拉框样式调整 */
#functionFilter + .layui-form-select dl {
    max-height: 360px !important; /* 增加下拉框最大高度 */
    overflow-y: auto !important; /* 允许垂直滚动 */
}

/* 导航条样式 */
.layui-nav.layui-bg-blue,
.layui-nav.layui-layout-center {
    background-color: #1E9FFF !important; /* 与页面主色调保持一致 */
    border-radius: 5px;
    padding: 0 20px;
    margin: 0;
    overflow: hidden;
}

/* 移除默认的nav-bar */
.layui-nav-bar {
    display: none !important;
}

/* 导航项样式 */
.layui-nav-item a {
    color: white !important;
    font-weight: 500;
    height: 60px; /* 保持一致的高度 */
    line-height: 60px; /* 垂直居中 */
}

/* 导航项悬停样式 */
.layui-nav-item:hover a {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 当前选中的导航项样式 */
.layui-nav-item.layui-this a {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

/* 表格样式调整 */
/* 修复th后面宽度多出一块的问题 */
.layui-table th,
.layui-table td {
    padding: 9px 15px;
    box-sizing: border-box;
}

/* 确保表格单元格内容不会溢出 */
.layui-table-cell {
    padding: 0 15px !important;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 表格最大高度设置 */
.layui-table-view {
    max-height: 460px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.layui-table-box {
    max-height: 460px !important;
    height: auto !important;
}

.layui-table-body {
    max-height: calc(460px - 50px) !important; /* 50px为表头高度估算值 */
    height: auto !important;
}

/* 表格滚动和容器包裹优化 */
.layui-table-view {
    position: relative !important;
    overflow: visible !important;
}

.layui-table-view .layui-table-box {
    overflow: hidden !important;
    position: relative !important;
}

.layui-table-view .layui-table-body {
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: relative !important;
}

/* 确保表格头部和主体对齐 */
.layui-table-header {
    overflow: hidden !important;
    position: relative !important;
}

.layui-table-header .layui-table-cell {
    height: 40px !important;
    line-height: 40px !important;
}

/* 固定列样式优化 */
.layui-table-fixed-r,
.layui-table-fixed-l {
    z-index: 100 !important;
    overflow: hidden !important;
}

.layui-table-fixed-r .layui-table-body,
.layui-table-fixed-l .layui-table-body {
    overflow: hidden !important;
    height: auto !important;
}

.layui-table-fixed-r .layui-table-cell,
.layui-table-fixed-l .layui-table-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 代卖状态开关颜色（与导出未出按钮颜色一致） */
.layui-form-switch:has(input.sale-type-switch),
.layui-form-switch[name="saleType"] {
    border-color: #FFB800 !important;
    background-color: #FFB800 !important;
}

/* 直收状态开关颜色（蓝色） */
.layui-form-switch.layui-form-onswitch:has(input.sale-type-switch),
.layui-form-switch[name="saleType"].layui-form-onswitch {
    border-color: #1E9FFF !important;
    background-color: #1E9FFF !important;
}

/* 针对不支持:has()选择器的浏览器的兼容方案 */
.layui-form-switch input.sale-type-switch {
    display: none;
}

/* 兼容方案：使用相邻兄弟选择器 */
.layui-form-switch {
    position: relative;
}

.layui-form-switch[lay-filter="saleTypeSwitch"] {
    border-color: #FFB800 !important;
    background-color: #FFB800 !important;
}

.layui-form-switch[lay-filter="saleTypeSwitch"].layui-form-onswitch {
    border-color: #1E9FFF !important;
    background-color: #1E9FFF !important;
}

/* 响应式设计 */
@media screen and (max-width: 650px) {
    #mainContainer {
        padding: 10px;
    }
    
    #dataEditArea, #filterForm {
        padding: 15px;
    }
    
    .data-edit-row, .filter-row {
        gap: 10px;
    }
    
    #windowGroup, #serverGroup, #amountGroup,
    #windowFilterGroup, #serverFilterGroup, #shipServerFilterGroup, #statusFilterGroup, #saleTypeFilterGroup, #filterButtonsGroup {
        min-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        width: 100%; /* 在小屏幕上占满宽度 */
    }
    
    .layui-form-label {
        width: auto !important;
        padding-bottom: 5px;
    }
    
    .layui-input-inline {
        width: 100% !important;
        max-width: none !important;
    }
    
    #dataInput, #amount, #windowFilter,
    #mainServer, #subServer, #filterMainServer, 
    #filterSubServer, #filterShipMainServer, #filterShipSubServer, #filterShipStatus, #filterSaleType {
        width: 100% !important;
    }
    
    #addDataBtn, #importExcelBtn, #filterBtn, #resetFilterBtn {
        width: 100%;
        height: 38px;
        margin-top: 10px;
        margin-left: 0 !important; /* 覆盖内联样式的margin-left */
    }
    
    #toolbarContainer {
        flex-wrap: wrap;
    }
    
    .layui-btn {
        margin-bottom: 5px;
    }
    
    /* 在小屏幕上调整表格高度 */
    .layui-table-view {
        max-height: 300px !important;
    }
    
    .layui-table-box {
        max-height: 300px !important;
    }
    
    .layui-table-body {
        max-height: calc(300px - 50px) !important;
    }
    
    #diamondDataTable + .layui-table-view,
    #accountingDataTable + .layui-table-view {
        max-height: 300px !important;
    }
    
    #diamondDataTable + .layui-table-view .layui-table-box,
    #accountingDataTable + .layui-table-view .layui-table-box {
        max-height: 300px !important;
    }
    
    #diamondDataTable + .layui-table-view .layui-table-body,
    #accountingDataTable + .layui-table-view .layui-table-body {
        max-height: calc(300px - 50px) !important;
    }
}