/* power-flow.css */

.flow {
    flex-direction: column;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.energy_flow {
    /* 【修改】移除固定 width，使用 max-width 限制最大宽度，同时允许缩小 */
    width: 100%;
    max-width: 440px;
    position: relative;
    /* 确保内容居中 */
    margin: 0 auto;
}

.energy_flow .path {
    position: absolute;
    /* left: 71px; */
    left: 50%;
    top: 53px;
    width: 300px;
    height: 200px;
    z-index: 1;
    /* 【修改】向左偏移自身宽度的一半，实现绝对居中 */
    transform: translateX(-50%);
}

.row .top {
    margin-bottom: 0;
}

.energy_flow .row>div {
    background: #fff;
    width: 72px;
    height: 72px;
    margin: 15px 0;
    border-radius: 50%;
    border: 1px solid #fff;
    font-size: 72px;
    z-index: 3;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
    position: relative;
    outline: 0 none;
    user-select: none;
}

.energy_flow .row>div>p {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 300%;
    display: block;
    margin-bottom: -24px;
    transform: translate(-50%);
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    /* 【新增】防止文字过长导致溢出 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.energy_flow .row.top>div>p {
    bottom: unset;
    margin-bottom: unset;
    top: 0;
    margin-top: -24px;
}

.energy_flow .row.medium {
    align-items: center;
    justify-content: space-between;
    /* 【修改】减小 padding 以适应更小的屏幕，或者保持原样但确保父级不溢出 */
    /* padding: 0 20px; */
    padding: 0 60px;
}

.energy_flow .row {
    display: flex;
    /* 【修改】移除固定 width，改为 100% 并限制最大宽度 */
    width: 100%;
    max-width: 440px;
    min-width: 440px;
    background: transparent;
    /* 【新增】确保行内容居中 */
    margin: 0 auto;
    box-sizing: border-box; /* 确保 padding 包含在宽度内 */
}

/* 轮播动画核心样式（画布移入移出效果） */
.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* 【新增】确保容器不会被子元素撑开 */
    max-width: 100%;
}

.carousel-items {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 200%; /* 总宽度为两个项的宽度之和 */
    display: flex;
    transition: transform 0.3s ease-out; /* 画布滑动缓动效果 */
}

.carousel-item {
    flex: 0 0 50%; /* 每个项占总宽度的50% */
    height: 100%;
    padding: 10px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center;     /* 水平居中 */
    /* 【新增】防止内容溢出 */
    overflow: hidden;
    width: 100%; /* 确保占满 flex 分配的空间 */
}

/* 确保内部容器占满可用空间或适应内容 */
#today_energy_distributed {
    width: 100%;
    max-width: 550px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 确保 energyMap 图表容器有明确的高度，否则可能无法正确显示 */
#energyMap {
    width: 100%;
    max-width: 550px;
    height: 300px; /* 保持原有高度 */
}

/* ========================================== */
/* 【新增】针对 opt_i_dashboard_head.jsp 中 live-data-content 的修复 */
/* ========================================== */

/*
   注意：这部分样式最好放在 opt_i_dashboard_head.jsp 的 <style> 中，
   但如果只能改这个 css 文件，请确保选择器优先级足够高。
   由于这个 css 文件是被 dashboard data jsp 引用的，而 live-data-content 在 head jsp 定义，
   通常建议直接在 head jsp 的 style 标签里加 min-width: 0。

   如果必须在这里加，可能需要配合具体的类名。
   但在当前的上下文里，最关键的修复是在 head jsp 的 .power-flow 和 .echartCard 上加 min-width: 0。
*/

/* 为了防止 power-flow 和 echartCard 溢出 Grid 容器 */
.power-flow, .echartCard {
    /* 【关键修复】允许 Grid 子项收缩到比内容更小，防止溢出 */
    min-width: 0;
    /* 确保宽度占满 Grid 分配的列 */
    width: 100%;
    box-sizing: border-box;
}

/* 确保 echartCard 内部的图表容器也能正确缩放 */
.echartCard > div {
    width: 100% !important;
    height: 100% !important;
}