/* ============ 期货手续费页面 ============ */

/* 内容区整体布局：左侧边栏 + 右侧内容 */
.sxf_container {
    display: flex;
    gap: 20px;
    padding: 20px;
    min-height: 72vh;
    box-sizing: border-box;
}

/* 左侧边栏：sticky跟随视口，到表格区底部自然停下 */
.sxf_sidebar {
    width: 320px;
    flex-shrink: 0;
    align-self: flex-start;      /* 禁止stretch拉伸，sticky才有效 */
    position: sticky;
    top: 90px;                   /* 导航栏70px + 20px间距 */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: linear-gradient(180deg, #2a2a2e 0%, #38383d 55%, #45454b 100%);
    border-radius: 16px;
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.18);
    padding: 22px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 侧边栏细滚动条（深色） */
.sxf_sidebar::-webkit-scrollbar {
    width: 6px;
}

.sxf_sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 3px;
}

/* 数值修改面板 */
.sxf_calc_box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 14px 4px;
    margin-bottom: 16px;
}

.sxf_calc_title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sxf_calc_row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sxf_calc_row label {
    flex-shrink: 0;
    color: #c8d0d8;
    font-size: 13px;
    white-space: nowrap;
}

.sxf_calc_input,
.sxf_calc_select {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #e8ecf0;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.sxf_calc_input:focus,
.sxf_calc_select:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}

.sxf_calc_select option {
    background: #ffffff;
    color: #2c3e50;
}

.sxf_calc_select option:checked {
    background: #3498db;
    color: #ffffff;
}

.sxf_calc_hint {
    margin: 0 0 10px;
    color: #9aa5b1;
    font-size: 11px;
}

.sxf_sidebar_title {
    margin: 0 0 16px;
    text-align: center;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 品种搜索框 */
.sxf_search_box {
    position: relative;
    margin-bottom: 10px;
}

.sxf_search {
    width: 100%;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #e8ecf0;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.sxf_search::placeholder {
    color: #9aa5b1;
}

.sxf_search:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.sxf_search:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}

/* 搜索联想下拉面板 */
.sxf_search_tips {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #34495e;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.sxf_search_tips.show {
    display: block;
}

.sxf_tip_item {
    padding: 8px 12px;
    color: #e8ecf0;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.sxf_tip_item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sxf_tip_item.sxf_tip_empty {
    color: #9aa5b1;
    cursor: default;
}

.sxf_tip_item.sxf_tip_empty:hover {
    background: none;
}

/* 当前生效的筛选标签 */
.sxf_active_filter {
    display: none;
    margin-bottom: 12px;
}

.sxf_active_filter.show {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(52, 152, 219, 0.18);
    border: 1px solid rgba(52, 152, 219, 0.45);
    border-radius: 10px;
}

.sxf_chip_text {
    flex: 1;
    color: #7fc4ee;
    font-size: 13px;
    word-break: break-all;
}

.sxf_chip_close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    color: #e8ecf0;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.sxf_chip_close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* 字段列表：流式排列，宽度随文字自适应 */
.sxf_field_list {
    list-style: none;
    margin: 0;
    padding: 4px 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.sxf_field_list::-webkit-scrollbar {
    width: 5px;
}
.sxf_field_list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

/* 字段气泡卡片 */
.sxf_field_item {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: #e8ecf0;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.sxf_field_item:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* 筛选类气泡（非数据列，如"主力合约"）：虚线边框区分 */
.sxf_field_item.sxf_filter_item {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.35);
}

/* 选中态 */
.sxf_field_item.active {
    background: linear-gradient(135deg, #3498db, #2e86c1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(52, 152, 219, 0.45);
}

/* 右侧手续费表格面板 */
.sxf_main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    /* 注意：不能加overflow:hidden，否则表头sticky失效 */
}

/* 面板头：标题 + 数据信息 */
.sxf_panel_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f3;
    background: linear-gradient(90deg, #f8fafc, #ffffff);
}

.sxf_panel_title {
    font-size: 16px;
    font-weight: 700;
    color: #1a5276;
    letter-spacing: 1px;
}

.sxf_panel_meta {
    font-size: 12px;
    color: #8a94a0;
}

/* 头部左右分组 */
.sxf_head_left {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.sxf_head_btns {
    display: flex;
    gap: 10px;
}

/* 导出按钮 */
.sxf_btn {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.sxf_btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.sxf_btn:active:not(:disabled) {
    transform: translateY(0);
}

.sxf_btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sxf_btn_xlsx {
    background: #27ae60;
    color: #ffffff;
}

.sxf_btn_xlsx:hover:not(:disabled) {
    background: #219653;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.35);
}

.sxf_btn_csv {
    background: #ffffff;
    color: #1a5276;
    border: 1px solid #cfd8e0;
}

.sxf_btn_csv:hover:not(:disabled) {
    background: #f2f6fa;
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.15);
}

/* 顶部下载数据按钮 */
.sxf_btn_export {
    background: #1a5276;
    color: #ffffff;
}

.sxf_btn_export:hover:not(:disabled) {
    background: #154663;
    box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
}

/* 导出格式选择弹窗 */
.sxf_modal_mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.sxf_modal_mask.show {
    display: flex;
}

.sxf_modal {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px 24px 18px;
    width: 320px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.sxf_modal_title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #1a5276;
    letter-spacing: 1px;
}

.sxf_radio_row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dfe6ec;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #2c3e50;
    transition: background 0.2s, border-color 0.2s;
}

.sxf_radio_row:hover {
    background: #f5f8fb;
    border-color: #3498db;
}

.sxf_radio_row input {
    accent-color: #3498db;
}

.sxf_modal_btns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* 表格滚动区 */
/* 表格滚动区：整页滚动，内部不做滚动容器（否则表头sticky相对它失效） */
.sxf_table_wrap {
    overflow: visible;
}

.sxf_table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    width: fit-content;   /* 按内容收缩，不强行铺满 */
    min-width: 600px;
    margin: 0 auto;       /* 水平居中 */
    /* 表格外框：原先只有行底线，表格左右与首尾看不出边界；补一圈细边框收住整张表 */
    border: 1px solid #dfe5ec;
    background: #ffffff;
}

.sxf_table th {
    position: sticky;
    top: 71px;            /* 冻结在导航栏(70px)下方1px */
    z-index: 5;
    background: linear-gradient(180deg, #1a5276, #1f618d);
    color: #ffffff;
    font-weight: 600;
    padding: 11px 16px;
    text-align: center;
    white-space: nowrap;
    /* 深蓝底上的列分隔线用半透明白：换成浅灰会看不见 */
    border-left: 1px solid rgba(255, 255, 255, .16);
}

.sxf_table th:first-child { border-left: none; }

.sxf_table td {
    padding: 9px 16px;
    border-bottom: 1px solid #eef0f3;
    border-left: 1px solid #eef0f3;
    color: #2c3e50;
    white-space: nowrap;
    text-align: center;
}

.sxf_table td:first-child { border-left: none; }

/* 末行去掉底线：外框已有底边，两条叠着会粗一档 */
.sxf_table tbody tr:last-child td { border-bottom: none; }

.sxf_table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.sxf_table tbody tr:hover {
    background: #eaf4fc;
}

/* 空数据提示 */
.sxf_empty {
    padding: 60px 20px;
    text-align: center;
    color: #8a94a0;
    font-size: 14px;
}