/* =========================================
   Ecotypes Page 专属样式 (极简风仪表盘)
   目的：扣除白底，实现图片自适应等高弹性布局
============================================ */

/* 1. 全局布局主容器 (优化区) */
.charts-section {
    display: flex; /* 【核心】：开启 Flexbox 弹性盒子布局 */
    gap: 25px;      /* 两个图表框之间的固定间距 */
    margin-bottom: 30px; /* 区域下方的留白 */
    
    /* 👇 核心魔法：垂直弹性拉伸，强制左、右两个图表框等高 👇 */
    align-items: stretch; 
}

/* 统一的图表卡片基础样式 (已去除白底) */
.chart-panel {
    background-color: transparent; /* 【核心修复】：彻底扣除白色背景 */
    border: none;                  /* 【核心】：去掉边框 */
    box-shadow: none;              /* 【核心】：去掉阴影 */
    
    /* 内部内容上下堆叠布局 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 2. 左右分配比例控制 */
.pie-panel {
    flex: 4; /* 左侧占 40% */
}

.bar-panel {
    flex: 6; /* 右侧占 60% */
}

/* 4. 其余部分微调 (标题、下拉框) */
.chart-title {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
}

/* 右侧柱状图头部的控制栏布局 */
.bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.bar-header .chart-title {
    margin-bottom: 0; /* 头部的标题不需要下方留白 */
}

/* 下拉框样式 */
.filter-control label {
    font-size: 13px;
    color: #555;
    font-weight: bold;
    margin-right: 8px;
}

.filter-control select {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    font-size: 13px;
    background-color: #f8f9fa;
}