/* 全局重置 - 精准匹配浏览器默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

html, body {
    max-width: 750px; /* PC端最大宽度，复刻移动端视觉 */
    margin: 0 auto;   /* PC端居中 */
    min-height: 100vh;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
}

/* 标题+年份选择栏 */
.wave-trend-header {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wave-trend-title {
    font-size: clamp(16px, 3vw, 18px);
    font-weight: bold;
    color: #333;
    padding: 5px 0;
    margin: 0;
}
/* 年份选择按钮样式 */
.year-select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: clamp(12px, 2vw, 14px);
    background-color: #f9f9f9;
    cursor: pointer;
}
.year-select:focus {
    outline: none;
    border-color: #409EFF;
}

/* 🔥 强制GPU加速，彻底解决卡顿 */
.ball, .connection-line {
    transform: translateZ(0);
    will-change: auto;
}

/* ========== 表格核心样式（修复期数列宽度+列挤压问题） ========== */
/* 虚拟滚动容器 - 保留核心属性 */
.chart-container {
    width: 100%;
    overflow: auto;
    border: 1px solid #dddddd;
    height: calc(100vh - 120px); /* 精准计算高度，避免滚动截断 */
    min-height: 400px;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 表格基础样式 - 恢复轻量fixed布局，避免列宽混乱 */
.chart-table {
    border-collapse: collapse;
    width: 100%; /* 固定表格宽度 */
    table-layout: fixed; /* 恢复fixed布局，但精准分配列宽 */
    background-color: #ffffff;
    transform: translateZ(0);
}

/* 表头样式 - 精准分配列宽 */
.chart-table thead tr {
    background-color: #f0f0f0;
}

/* 期数列表头（第一列）- 压缩宽度到40px */
.chart-table th.title-col {
    width: 40px !important; /* 核心：压缩期数列表头宽度 */
    min-width: 40px !important;
    border: 1px solid #cccccc;
    padding: 2px;
    text-align: center;
    height: 20px;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    white-space: nowrap;
    background-color: #e8e8e8;
}

/* 号码列表头 - 统一宽度20px */
.chart-table th:not(.title-col) {
    width: 20px !important; /* 号码列表头固定20px，避免挤压 */
    min-width: 20px !important;
    border: 1px solid #cccccc;
    padding: 2px;
    text-align: center;
    height: 20px;
    position: relative;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    white-space: nowrap;
}

/* 单元格样式 - 精准匹配表头宽度 */
.chart-table td {
    border: 1px solid #cccccc;
    padding: 0;
    text-align: center;
    height: 20px;
    position: relative;
    font-size: 10px;
    color: #666666;
    overflow: visible;
}

/* 期数列单元格（第一列）- 同步压缩到40px，取消!important过度强制 */
.period-col {
    position: sticky;
    left: 0;
    background-color: #f5f5f5;
    font-weight: bold;
    z-index: 3;
    width: 40px; /* 核心：从60px压缩到40px，移除!important */
    min-width: 40px;
    height: 20px;
}

/* 号码列单元格 - 固定20px宽度 */
.chart-table td:not(.period-col) {
    width: 20px;
    min-width: 20px;
}

/* 虚拟滚动tbody - 保留布局 */
#chartBody {
    display: block;
    width: 100%;
    min-height: 100%;
}

#chartBody tr {
    display: table-row;
    width: 100%;
    height: 20px;
}

/* 球的样式 - 精准居中，适配压缩后的单元格 */
.ball {
    width: 18px; /* 轻微缩小球尺寸，适配40px期数列+20px号码列 */
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 11px; /* 轻微缩小字体，避免溢出 */
    /*border: 1px solid #0088cc;*/
    background-color: #00a0e9;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
}
.color1{
    background-color: red;
}
.color2{
    background-color: blue;
}
.color3{
    background-color: green;
}


/* 斜线连线样式 - 适配压缩后的布局 */
.connection-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
    border-top: 1.5px solid #00a0e9;
    transform-origin: 0 0;
}

/* 响应式适配 */
@media (max-width: 750px) {
    .chart-table th {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .chart-table td {
        min-width: 20px;
        height: 20px;
    }
    .ball {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    .period-col {
        width: 60px !important;
    }
    /*body {
        padding-top: 48px;
    }*/
}

@media (max-width: 480px) {
    .chart-table th {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .chart-table td {
        min-width: 40px;
        height: 20px;
    }
    .ball {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
    .period-col {
        width: 60px !important;
    }
}

/* PC端适配 */
@media (min-width: 750px) {
    /*body {
        padding-top: 48px;
    }*/
    .header {
        padding: 0 20px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 小屏手机适配 */
@media (max-width: 375px) {
    .header h1 {
        font-size: 15px;
    }
}

/* 修复：tbody必须是block且高度100%，才能正确计算padding */
#chartBody {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#chartBody tr {
    display: table-row;
    width: 100%;
    height: 20px;
}