.chart-date{
    font-size: 12px;
    color: #333;
    display: block;
    text-align: right;
    margin-top: 10px;
}
.chart-header-1{
    margin-bottom: 0px;
}

/* CaseOverview 国家下拉：右侧箭头垂直居中（与全局 .el-input__inner 高度联动） */
.chart-header .el-select.form-chart .el-input__suffix {
    top: 0 !important;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.chart-header .el-select.form-chart .el-input__suffix-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.chart-header .el-select.form-chart .el-select__caret {
    line-height: 1;
}

.chart-category{
    width: 100%;
    height: 260px;
    position: relative;
}

/* 表格部分样式 */
.table-container-wap {
    margin-top: 20px;
    background: #fff;
    border-radius: 6px;
    padding: 25px 35px;
    border: 1px solid #e0e0e0;
    /* 优化渲染性能 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}


.table-subtitle {
    padding: 0 10px;
    padding-bottom: 10px;
    font-size: 12px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border-bottom: 3px solid #be133d; */
}

.table-date,.table-subtitle-text {
    font-size: 12px;
    color: #333;
}

.table-container {
    padding: 0;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 800px;
    background: #fff;
}



.data-table th {
 height: 33px;
 background: #82b8d4;
 text-align: center;
 font-size: 14px;
 color: #333333;
 /* font-weight: bold; */
 border-bottom: 1px solid #82b8d4;
 font-weight: 500;
}
.segmentedData-total-row{
    /* background: #f3f3f3; */
    height: 50px;
    /* border-bottom: 2px solid #be133d; */
    font-weight: bold;
    text-align: center;
    font-size: 12px;
    background: #F4FCFF;
}
.segmentedData-total-row td{
    border-bottom: 1px solid #82b8d4;
}
.segmentedData-category-row-text{
    background: #e2eff5;
    color: #333333;
}
.segmentedData-country-row td{
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #82b8d4;
    text-align: center;
    font-size: 14px;
    color: #333;
}
.segmentedData-country-row td:first-child,.segmentedData-total-row td:first-child{
    background: #e2eff5;
    color: #333333;
}

/* 2025财年各季度外籍劳工i-140 移民申请表 */
/* I-140表格筛选器样式 */

.filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.filter-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
}

.filter-select {
    width: 115px;
}

.filter-select-category{
    width: 200px;
}
.filter-select-year{
    width: 80px;
}
.filter-select-quarter{
    width: 80px;
}

/* I-140 筛选区 el-select：右侧箭头与输入框垂直居中（与全局 .el-input__inner 高度联动） */
.filter-item .el-select.filter-select .el-input__suffix {
    top: 0 !important;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.filter-item .el-select.filter-select .el-input__suffix-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.filter-item .el-select.filter-select .el-select__caret {
    line-height: 1;
}

.query-btn{
    width: 70px;
    height: 31px;
    background: #06c3f5;
    color: #fff;
    text-align: center;
    line-height: 32px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

/* I-140数据表格样式 */
.segmentedData-i140-data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-top: 25px;
    /* border-top: 3px solid #be133d; */
    table-layout: fixed; /* 固定表格布局，确保列宽稳定 */
}

.segmentedData-i140-data-table th {
    height: 50px;
    background: #82b8d4;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    /* border: 1px solid #e0e0e0; */
    vertical-align: middle;
}



/* 表头宽度平均分配 */
.segmentedData-i140-data-table th:first-child {
    width: 200px; /* 类别列宽度 */
}

.segmentedData-i140-data-table th:not(:first-child) {
    width: calc((100% - 200px) / 8); /* 其他8列平均分配剩余宽度 */
}










.segmentedData-total-row {
    height: 50px;
    font-weight: bold;
    /* border-bottom: 2px solid #be133d; */
}
.segmentedData-total-row-text{
    text-align: center;
    font-size: 12px;
    color: #333;
    font-weight: bold   ;
}
.segmentedData-category-row,.segmentedData-subcategory-row{
    height: 50px;
    border-bottom: 1px solid #82b8d4;
    text-align: center;
    font-size: 12px;
    color: #333;
    background: #F4FCFF;
}


/* 表格单元格宽度平均分配 */
.i140-data-table td:first-child {
    width: 200px; /* 类别列宽度 */
}

.i140-data-table td:not(:first-child) {
    width: calc((100% - 200px) / 8); /* 其他8列平均分配剩余宽度 */
}

/* 新增图表样式 */
.round-cake-data{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.round-cake-header{
    margin-bottom: 0;
}
.round-cake-header .chart-title{
   margin-bottom: 15px;
}
.round-cake-data-item{
    width: 100%;
    padding: 25px 30px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    /* width: 49%; */
}
.round-cake-chart{
    position: relative;
    padding-top: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    /* border-top: 1px solid #e0e0e0; */
}
.round-cake-chart:after{
    content: '';
    position: absolute;
    transform: translate(-50%,-50%);
    top: 0%;
    left: 50%;
    height: 1px;
    width: 105%;
    background: #e0e0e0;
}
.round-chart{
    width: 80px;
}
.round-chart-select{
    width: 70px;
}
.chart-category {
    width: 100%;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 全球 I-140 职业类别柱状图：占满容器，勿用 flex 居中饼图布局（高度与等待池 #chart-category 一致） */
.chart-category.chart-category--bar {
    display: block;
    height: 260px;
    justify-content: initial;
    align-items: initial;
}

/* 与 CaseOverview #chart-category 图表区高度一致（等待池优先类别柱状图） */
.chart-category.chart-category--bar#global-occupation-chart {
    width: 100%;
    height: 260px;
    min-height: 260px;
}

.no-data{
    font-size: 14px;
    color: #666;
    text-align: center;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 趋势图样式 */
.trend-charts-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.trend-chart-item {
    flex: 1;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    padding: 25px 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trend-chart-header {
    position: relative;
    margin-bottom: 15px;
}
.trend-chart-header:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 105%;
    height: 1px;
    background: #e0e0e0;
}

.trend-chart-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: left;
    padding-bottom: 15px;
    position: relative;
    display: inline-block;
}







.tooltip-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
    padding: 12px 16px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tooltip-content {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

.tooltip-content p {
    margin: 0;
    text-align: justify;
}

.tooltip-arrow {
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}

.tooltip-arrow::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #e0e0e0;
}

.trend-chart-content {
    margin-bottom: 10px;
}

.trend-chart-content .chart-category {
    height: 260px;
}

.trend-chart-description {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}

.trend-chart-description p {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0px;
    text-align: justify;
    flex: 1;
}

.view-details {
    display: block;
    /* width: 76px; */
    color: #0012ff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.3s;
}

.view-details:hover {
    color: #0012ff;
    text-decoration: none;
}

/* O类工作签证表格样式 */
.o-visa-table {
    margin-top: 20px;
}

.o-visa-table .chart-header.o-visa-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.o-visa-table .o-visa-chart-header .chart-title {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.o-visa-table-chart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.o-visa-table-chart-chart {
    width: 80px;
}

/* O 类表头下拉：箭头与输入框垂直居中（与全局 .el-input__inner 高度一致） */
.o-visa-table-chart .el-select.o-visa-table-chart-chart .el-input__suffix {
    top: 0 !important;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
}
.o-visa-table-chart .el-select.o-visa-table-chart-chart .el-input__suffix-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.o-visa-table-chart .el-select.o-visa-table-chart-chart .el-select__caret {
    line-height: 1;
}




.o-visa-data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-top: 10px;
    /* border-top: 3px solid #be133d; */
}

.o-visa-data-table th {
    height: 33px;
    background: #82b8d4;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.o-visa-data-table td {
    height: 50px;
    background: #F4FCFF;
    border-bottom: 1px solid #82b8d4;
    text-align: center;
    font-size: 12px;
    color: #333;
    vertical-align: middle;
}

.o-visa-total-row {
    background: #f3f3f3 !important;
    font-weight: bold;
}

.o-visa-total-row td {
    background: #F4FCFF !important;
    font-weight: bold;
}

.o-visa-data-table td:first-child{
    background: #e2eff5 !important;
    color: #333333;
}


.o-visa-note {
    margin-top: 12px;
    text-align: left;
}

.o-visa-note p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* 家庭移民环形图样式 */
.family-immigra {
    margin-top: 20px;
   
}
.family-immigration{
    position: relative;
}
.family-immigration-header{
    position: relative;
    display: flex;
    padding-bottom: 10px;
    align-items: flex-end;
    justify-content: space-between
}
.family-immigration-header:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 105%;
    height: 1px;
    background: #e0e0e0;
}
.family-immigration-title{
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: left;
    padding-bottom: 3px;
}
.family-immigration-date{
    font-size: 12px;
    color: #666;
    text-align: right;
}
.family-immigra-cake-chart{
    /* position: absolute; */
    /* top: 75px; */
    right: 30px;
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    height: 32px;
}

.family-immigration .chart-category {
    height: 230px;
    margin-top: 50px;
}

/* 家庭签证总数分布表格样式 */
.family-visa-table {
    margin-top: 20px;
    /* 优化渲染性能 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.family-visa-table-title{
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding-bottom: 20px;
    /* 优化文本渲染 */
    will-change: contents;
}

.family-visa-table-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.family-visa-table-subtitle-text, .family-visa-table-table-date{
    font-size: 14px;
    color: #666;
    /* 优化文本渲染 */
    will-change: contents;
}


.family-visa-data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-top: 10px;
    /* border-top: 3px solid #be133d; */
    /* 优化渲染性能 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.family-visa-data-table th {
    height: 50px;
    background: #be133d;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
    padding: 0 8px;
    transition: opacity 0.15s ease;
    /* 优化渲染性能 */
    will-change: contents;
}

.family-visa-data-table td {
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    font-size: 12px;
    color: #333;
    vertical-align: middle;
    padding: 0 8px;
    transition: opacity 0.15s ease;
    /* 优化渲染性能 */
    will-change: contents;
}

.family-visa-data-table tbody tr {
    transition: opacity 0.15s ease;
    /* 优化渲染性能 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.family-visa-data-table td:first-child{
    background: #002768;
    color: #fff;
}

.family-visa-total-row {
    background: #f3f3f3 !important;
    font-weight: bold;
    /* border-bottom: 2px solid #be133d !important; */
}

.family-visa-total-row td {
    /* background: #f3f3f3 !important; */
    font-weight: bold;
}

/* 移动端 */
@media (max-width: 1200px) {
   .chart-section{
    width: 100%;
   }
    .chart-date-employment,.segmentedData-i140-data-table{
        width: 1138px;
    }
    .table-container-wap{
        padding: 0 1.333rem;
        border: none;
    }
    .table-container-wap .chart-title{
        font-size: 0.960rem;
        padding-top: 1.6rem;
    }
    .table-container-wap .table-container .data-table{
        width: 1100px;
        

         /* width: 100%; */
    }
    .filter-row{
        justify-content: flex-start;
        gap: 10px;
    }
    .filter-row .filter-select-category{
        width: 200px;
    }

    .filter-row .query-btn{
        width: 4rem;
        height: 1.860rem;
        line-height: 1.860rem;
        font-size: 0.853rem;
    }
    .segmentedData-table-container{
        overflow: auto;
        padding-bottom: 10px;
    }

    .round-cake-data{
        flex-direction: column;
    }
    .round-cake-data-item{
        width: 100%;
        padding: 0;
        border: none;
        padding-top: 20px;
        padding-left: 1.333rem;
        padding-right: 1.333rem;
    }
    
    /* 移动端图表样式优化 */
    .chart-category {
        width: 100% !important;
        height: 260px !important;
    }

    .chart-category.chart-category--bar {
        height: 260px !important;
    }
    
    .trend-charts-container{
        flex-direction: column;
        
    }
    .trend-chart-item{
        border:none;
        padding: 0 1.333rem;
        box-shadow: none;
    }
    .trend-chart-title,.chart-title{
        font-size: 0.960rem;
    }
    .trend-chart-title{
        margin-top: 20px;
    }
    .trend-chart-content-container{
        overflow: auto;
       
    }
    .trend-charts-container .trend-chart-item .trend-chart-content{
        /* width: 1100px; */
        width: 100%;
    }
    .trend-chart-description{
        gap: 15px;
    }
    .table-container{
        overflow: auto;
    }
    .o-visa-data-table{
        width: 1100px;
    }
    .o-visa-table{
        padding-bottom: 15px;
    }
    .family-immigration-title{
        font-size: 0.960rem;
    }
    .family-immigration .chart-category{
        margin-top: 0;
    }
    .family-visa-table-title{
        font-size: 0.960rem;
        padding-top: 1.6rem;
    }
    .table-container{
        overflow: auto;
        /* 优化移动端滚动性能 */
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    .family-visa-data-table{
        width: 1100px;
        /* 移动端优化：减少重绘 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    .family-visa-data-table th,
    .family-visa-data-table td {
        /* 移动端优化：更快的过渡 */
        transition: opacity 0.1s ease;
    }
    .family-visa-data-table tbody tr {
        /* 移动端优化：启用硬件加速 */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}