/* 当前/历史遗漏 TOP 对比模块 (current_historical_top.css) */

/* 移除模块主容器样式 */
/*
.cht-container {
    padding: 20px;
    margin-bottom: 30px;
    background-color: #2c2c2c; 
    border-radius: 8px;
    color: #e0e0e0; 
}
*/

/* 移除模块主标题样式 */
/*
.cht-module-title {
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.4em;
}
*/

/* --- 新增：整体区域布局 --- */
/* 移除 combined-chart-area 相关样式 */
/*
.combined-chart-area {
    display: flex;
    gap: 20px; 
    margin-bottom: 30px; 
    width: 100%; 
}
*/

/* --- 新增：左侧标题列样式 --- */
/* 移除 chart-titles-column 相关样式 */
/*
.chart-titles-column {
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    flex-shrink: 0; 
    width: 150px; 
}
*/

/* 图表标题 (移动到左侧后调整) */
/* 移除标题样式 */
/*
.cht-chart-title {
    color: #1e90ff;
    font-size: 1.2em; 
    text-align: center;
    margin-bottom: 15px; 
    margin-top: 10px;
}
*/

/* --- 新增：右侧图表列样式 --- */
/* 移除 charts-column 相关样式 */
/*
.charts-column {
    flex-grow: 1; 
}
*/

/* 移除旧的图表容器样式 */
/*
.cht-chart-container {
    margin-bottom: 30px;
    background-color: #3a3a3a; 
    padding: 15px;
    border-radius: 6px;
    position: relative;
}
*/

/* --- 修改：移除柱子包裹层样式 --- */
/*
.chart-bars-wrapper {
    width: 100%;
}
*/

/* --- 修改：将样式直接应用到 ID 选择器 --- */
#current-chart-bars-container,
#historical-chart-bars-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* 强制不换行 */
    padding: 10px 0px;
    height: auto;
    gap: 1px; /* 修改：从 2px 改为 1px */
    box-sizing: border-box;
    width: 100%;
    justify-content: space-around;
    overflow: hidden; /* 修改：从 auto 改回 hidden */
    position: relative; /* 新增：创建定位上下文 */
    z-index: 1; /* 新增：确保在背景文字之上 */
}

/* 移除旧的 .chart-bars-container 规则 */
/*
.chart-bars-container {
    ...
}
*/



/* --- 单个柱子组样式 --- */
.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    flex: 1 1 0; 
    /* min-width: 50px; */ /* 移除：最小宽度 */
    /* 移除 padding-top (已在上一步移除) */
}

/* --- 元素显示 --- */
.bar, .bar-label, .bar-value {
    display: block; 
}
.bar-label { display: block; text-align: center; width: 100%;}

/* --- 柱子本身样式 --- */
.bar {
    width: 100%; /* 保持宽度 */
    min-height: 5px; /* 保持最小高度 */
    background-image: linear-gradient(to bottom, rgba(230, 230, 250, 0.7), rgba(135, 206, 235, 0.7)); /* 修改为浅蓝紫透明渐变 */
    border-radius: 2px; /* 保持圆角 */
    transition: height 0.3s ease-out, background-color 0.2s ease; /* 保持过渡 */
    position: relative; /* 保持相对定位 */
    cursor: pointer; /* 保持鼠标指针 */
    /* 移除 order */
}

.historical-chart .bar {
    background-image: linear-gradient(to top, #36454F, #696969); /* 修改为炭灰色/石灰色渐变 */
    /* 移除 order */
}

/* 新增：柱子悬停效果 */
.bar:hover {
    /* 亮度增加 */
    filter: brightness(1.2);
}

/* --- 柱子内部数值样式 --- */
.bar-value {
    font-size: 1em; /* 恢复：字体大小改回 1em */
    color: white; /* 保持颜色 */
    font-weight: bold; /* 保持粗细 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 设置为主要字体栈 */
    /* 恢复：绝对定位 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* position: relative; */ 
    user-select: none;
    padding: 1px 3px; 
    /* background-color: rgba(0, 0, 0, 0.4); */ /* 移除背景色 */
    border-radius: 3px;
    text-align: center;
    /* width: 100%; */
    width: fit-content; /* 改回 fit-content */
    min-width: 60%; 
    /* 移除：外边距 */
    /* margin-bottom: 3px; */
}

.current-chart .bar-value {
    /* 修改：使用 bottom 定位贴底 */
    bottom: 2px;
    /* 移除 order */
}
.historical-chart .bar-value {
    /* 修改：使用 top 定位贴顶 */
    top: 2px;
    /* 移除 order */
    font-weight: bold;
}
.bar-period {
    display: block; /* 保持显示 */
    font-size: 0.9em; /* 恢复：字体大小改回 0.9em */
    font-weight: normal; /* 保持粗细 */
    margin-top: 2px; /* 保持上边距 */
    line-height: 1; /* 保持行高 */
    color: white; /* 保持颜色 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 设置为主要字体栈 */
}

/* --- 柱子外部标签样式 (号码) --- */
.bar-label {
    white-space: normal; /* 保持换行 */
    word-break: break-all; /* 保持断词 */
    font-size: 1em; /* 修改：从 0.8em 改为 0.9em */
    color: #cccccc; /* 保持颜色 */
    width: 100%; /* 保持宽度 */
    text-align: center; /* 保持居中 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 修改为主要字体栈 */
    line-height: 1.1; /* 保持行高 */
    /* 移除 order */
    margin-top: 4px; /* 保持上边距 */
    margin-bottom: 4px; /* 保持下边距 */
}

/* --- 修改：给图表主容器添加外边距控制间距 --- */
#current-omission-chart,
#historical-omission-chart { /* 新增：同时为两个图表容器添加相对定位 */
    position: relative; /* 新增：为绝对定位的背景文字提供上下文 */
}

#current-omission-chart {
    /* 移除内边距 */
    /* padding-bottom: 35px; */
    margin-bottom: 5px; /* 新增：小的下外边距 */
}

#historical-omission-chart {
    /* 移除内边距 */
    /* padding-top: 35px; */
     /* 新增：移除可能存在的上外边距 */
     margin-top: 0;
}

/* 当前/历史图表标签位置修改 */
.current-chart .bar-group {
    flex-direction: column;
    justify-content: flex-end;
}
.historical-chart .bar-group {
    flex-direction: column;
    justify-content: flex-start;
    /* 移除 padding-top */
    /* padding-top: 35px; */
}

/* 加载提示或无数据提示 */
.cht-loading-placeholder,
.cht-no-data {
    color: #aaaaaa;
    font-style: italic;
    padding: 10px;
    text-align: center;
    width: 100%;
}

/* --- 新增：图表背景透明标题 --- */
.chart-background-title {
    position: absolute; /* 绝对定位，相对于父容器 (.current-chart / .historical-chart) */
    /* top: 50%; */ /* 修改：移除通用 top，在具体类中设置 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中 */
    font-size: 2.5em; /* 保持字体大小 */
    font-weight: bold; /* 加粗 */
    color: rgba(255, 255, 255, 0); /* 修改：初始完全透明 */
    opacity: 0; /* 新增：初始时设置 opacity 为 0 */
    white-space: nowrap; /* 防止文字换行 */
    z-index: 0; /* 默认置于柱状图之后 */
    pointer-events: none; /* 不干扰鼠标事件 */
    transition: opacity 0.3s ease-in-out; /* 保留透明度过渡 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 使用主要字体栈 */
    text-align: center;
    /* --- 修改：初始状态无背景渐变或裁剪 --- */
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

/* 修改：分别设置当前和历史标题的 top 位置 */
.current-title-bg { 
    top: 65%; /* 保持当前标题位置 */
    z-index: 0; /* 保持在柱子下方 */
}
.historical-title-bg { 
    top: 55%; /* 修改：向下移动历史标题 */
    /* z-index 在悬停时设置 */
}

/* 鼠标悬停在当前图表区域时，显示对应的背景标题 (使用当前柱子渐变色，保持在柱子下方) */
.current-chart:hover .current-title-bg {
    opacity: 1; /* 修改：设为完全不透明 */
    color: transparent; /* 使文字透明以显示背景 */
    background-image: linear-gradient(to bottom, rgba(230, 230, 250, 0.7), rgba(135, 206, 235, 0.7)); /* 应用当前柱子的渐变 */
    -webkit-background-clip: text; /* 裁剪背景到文字 (兼容性) */
    background-clip: text; /* 裁剪背景到文字 */
    /* z-index: 0; (默认) */
}

/* 鼠标悬停在历史图表区域时，显示对应的背景标题 (改为清晰的纯色) */
.historical-chart:hover .historical-title-bg {
    opacity: 1; /* 保持完全不透明 */
    color: rgba(255, 255, 255, 0.6); /* 修改：进一步降低透明度至 0.6 */
    background-image: none; /* 移除背景图片 */
    -webkit-background-clip: initial; /* 移除裁剪 */
    background-clip: initial; /* 移除裁剪 */
    z-index: 2; /* 保持置于柱状图之上 */
}

/* --- 新增：超过阈值的当前遗漏柱子样式 --- */
.bar.bar-exceeds-threshold {
    /* 修改：减小亮白色外发光效果的范围 */
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.7); /* 调整模糊和扩散半径 */
}

/* --- 新增：高亮的参数标签背景 --- */
.bar-label.label-highlighted {
    background-color: #32CD32; /* 鲜绿色背景 */
    color: #ffffff; /* 白色文字，确保对比度 */
    padding: 2px 6px; /* 修改：调整内边距，上下少一点，左右多一点 */
    border-radius: 3px !important; /* 修改：确保圆角统一，并使用 !important 提升优先级 */
    display: inline-block; /* 修改：改为行内块，使其宽度适应内容 */
    width: auto; /* 修改：宽度自动 */
    margin-bottom: 4px; /* 保持与柱子的间距 */
    line-height: 1.2; /* 新增：微调行高，改善垂直居中 */
    /* 确保之前的全局 .bar-label 样式中没有覆盖 text-align */
    text-align: center; /* 再次确保文本居中 */
    font-size: 1.1em; /* 新增：略微增大字体大小 */
}

/* 确保全局 .bar-label 的 text-align 不会干扰 */
.bar-label {
    /* ... 其他 .bar-label 样式 ... */
    display: block; 
    text-align: center; /* 确保这个 text-align:center 不会与 label-highlighted 的 inline-block 冲突太多 */
    width: 100%; /* 如果这里是 100%，label-highlighted 的 auto 可能无效，需要进一步处理 */
    /* ... 其他 .bar-label 样式 ... */
}