
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑", sans-serif;
}
body {
    padding: 20px;
    background-color: #f5f5f5;
}
.container {
    max-width: 1500px;
    margin: 0 auto;
    background: white;
    padding: 20px 50px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.city-select {
    /*margin-bottom: 25px;*/
    padding: 12px 0;
    display: flex; /* 行内对齐 */
    align-items: center; /* 垂直居中 */
    gap: 12px; /* 统一间距 */
}

.city-select label {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    margin: 0; /* 清除默认margin */
}

.city-select select {
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 100px;
}

.pay-select {
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 100px;
    width: auto;
}

.table-box {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    position: relative;
    max-height: 800px;
    background: #fff;
    /* 新增：隐藏纵向滚动条的头部空白 */
    border: 1px solid #adb5bd;
}

.cost-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px;
    min-width: 1500px;
    border: none;
    position: relative;
}


.cost-table th, .cost-table td {
    padding: 0 5px;
    border: 1px solid #adb5bd;
    text-align: center;
    vertical-align: middle;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    white-space: nowrap;
    position: relative;
    border-right: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}


.cost-table thead th {
    background-color: #fff;
    font-weight: bold;
    white-space: nowrap;
    border-collapse: separate !important;
    /* 核心：表头固定 - sticky + top:0 + 层级 */
    position: sticky;
    top: 0;
    z-index: 2;
    /* 新增：防止表头边框被遮挡 */
    border-top: none;
    background-clip: padding-box;
}

/* 第一行表头（最外层大分组：建造成本/管理成本等） */
.cost-table thead tr:nth-child(1) th {
    top: 0;          /* 固定在最顶部 */
    z-index: 4;      /* 层级最高，避免被覆盖 */
    border-bottom: 1px solid #adb5bd;
}

/* 第二行表头（子分组：基站差旅费/基站招待费等） */
#costTable thead tr:nth-child(2) th {
    top: 36px;       /* 跟在第一行下面（等于第一行高度） */
    z-index: 3;      /* 层级次之 */
    border-top: none !important;
    border-bottom: 1px solid #adb5bd !important;
}

/* 第三行表头（内容/金额） */
.cost-table thead tr:nth-child(3) th {
    top: 72px;       /* 跟在第二行下面（36+36） */
    z-index: 2;      /* 层级最低但高于内容 */
    border-top: none !important;
    border-bottom: 2px solid #a8abaf !important; /* 加粗底边框区分内容 */
}


#costTotalTable thead tr:nth-child(2) th {
    top: 36px;       /* 跟在第一行下面（等于第一行高度） */
    z-index: 3;      /* 层级次之 */
    border-top: none !important;
    border-bottom: 2px solid #adb5bd !important;
}

/* 核心：月份列固定 */
.cost-table th.fixed-col,
.cost-table td.fixed-col {
    position: sticky;
    left: 0;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    z-index: 3;
    background-color: #fff;
    /* 新增：边框区分固定列 */
    border-right: 1px solid #adb5bd !important;
    border-left: none !important;
}


.cost-table th.fixed-col-2,
.cost-table td.fixed-col-2 {
    position: sticky;
    left: 60px;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    z-index: 3;
    background-color: #fff;
    /* 新增：边框区分固定列 */
    border-right: 1px solid #adb5bd !important;
    border-left: none !important;
}

.cost-table th.fixed-col-3,
.cost-table td.fixed-col-3 {
    position: sticky;
    left: 160px;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    z-index: 3;
    background-color: #fff;
    /* 新增：边框区分固定列 */
    border-right: 1px solid #adb5bd !important;
    border-left: none !important;
}

.cost-table th.fixed-col-4,
.cost-table td.fixed-col-4 {
    position: sticky;
    left: 340px;
    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;
    z-index: 3;
    background-color: #fff;
    /* 新增：边框区分固定列 */
    border-right: 1px solid #adb5bd !important;
    border-left: none !important;
}

.cost-table th.fixed-station-col {
    position: sticky;
    left: 60px;
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    z-index: 3;
    background-color: #fff;
    /* 新增：边框区分固定列 */
    border-right: 1px solid #adb5bd !important;
    border-left: none !important;
}
.cost-table th.fixed-station-col {
    z-index: 5 !important;
}

/* 表头的月份列层级更高 */
.cost-table th.fixed-col {
    z-index: 5 !important;
    border-bottom: 2px solid #a8abaf !important;
}

.cost-table th.fixed-col-2 {
    z-index: 5 !important;
    border-bottom: 2px solid #a8abaf !important;
}

.cost-table th.fixed-col-3 {
    z-index: 5 !important;
    border-bottom: 2px solid #a8abaf !important;
}

.cost-table th.fixed-col-4 {
    z-index: 5 !important;
    border-bottom: 2px solid #a8abaf !important;
}

/* 右侧操作列（表头+单元格）：高度统一 */
#costTable .fixed-op-col,
#costTable thead .fixed-op-col {
    position: sticky;
    right: 0;
    min-width: 55px;
    width: 55px !important;
    max-width: 55px !important;
    height: inherit !important; /* 继承高度，和普通表头一致 */
    line-height: inherit !important;
}


#costTable .i-col-last,
#costTable thead .i-col-last {
    min-width: 75px;
    width: 75px !important;
    max-width: 75px !important;
}



#costTotalTable .fixed-op-col,
#costTotalTable thead .fixed-op-col {
    position: sticky;
    right: 0;
    min-width: 80px;
    width: 80px !important;
    max-width: 80px !important;
    height: inherit !important; /* 继承高度，和普通表头一致 */
    line-height: inherit !important;
}





.table.report-fixed-table th.fixed-op-col,
.table.report-fixed-table td.fixed-op-col {
    border-left: 1px solid #a8abaf !important;
}


.cost-table th.i-col-2,
.cost-table td.i-col-2 {
    border-left: none !important;
}

.cost-table th.fixed-op-col,
.cost-table td.fixed-op-col {
    border-right: 1px solid #adb5bd !important;
}


.cost-table th.i-col-last{
    border-bottom: 2px solid #a8abaf !important;
}

.cost-table th.fixed-op-col{
    border-bottom: 2px solid #a8abaf !important;
}

.cost-table td {
    background-color: #fff;
    font-weight: 400;
    border-top: none !important;
}

.cost-table td.fixed-col {
    background-color: #ffffff;
}


.cost-table .total-month-row td{
    background-color:  #d8dbdd;
}

.cost-table .total-year-row td{
    background-color: #c7d1df;
}


/* 滚动条 */
.table-box::-webkit-scrollbar { width: 17px; height: 17px; }
.table-box::-webkit-scrollbar-thumb { background:#ccc; border-radius:8px; border:4px solid #f8f8f8; }
.table-box::-webkit-scrollbar-track { background:#f8f8f8; }
.table-box::-webkit-scrollbar-corner { background:#f8f8f8; }
