/* ============================================================================
 * 主页试版 · 保留青绿色系，以静态边界、排版和留白建立层级。
 * ----------------------------------------------------------------------------
 * 范围：只调整首页呈现；不改变计算、采集、控制和其他工作区。
 * 保留现有分析面板 .70 背景 alpha、独立周期和三视图占位。
 * 用法：本文件在 styles.css 之后引入，靠级联顺序覆盖主页大屏。
 *       确定方案后应合并进 styles.css 并删除本文件。
 * 注意：不改 styles.css 一个字节。
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. 主题变量收敛：绿 → 青绿 teal（作用域仅主页激活时）
 * ------------------------------------------------------------------------ */
body:has(#overviewPage.is-active) {
  --home-canvas: #041f20;
  --home-canvas-deep: #021314;
  --home-surface: #06302e;
  --home-surface-raised: #0a3a37;
  --home-line: rgba(99, 213, 198, .14);
  --home-line-strong: rgba(99, 213, 198, .28);
  --home-accent: #63d5c6;
  --home-accent-strong: #7ef0e2;
  --home-accent-dim: rgba(99, 213, 198, .14);
  --home-text: #ecfbf7;
  --home-text-strong: #f4fffc;
  --home-text-soft: #a6d0cb;
  --home-text-muted: #a6d0cb;
}

/* --------------------------------------------------------------------------
 * 2. 顶栏 / 侧栏（青绿 teal，替换绿色 #47e29d/#138a67/#55dca5 等）
 * ------------------------------------------------------------------------ */
body:has(#overviewPage.is-active) .workspace-header {
  background: #032624;
  border-color: var(--home-line-strong);
  box-shadow: none;
}
body:has(#overviewPage.is-active) .platform-brand-title strong {
  font-weight: 650;
  text-shadow: none;
}
body:has(#overviewPage.is-active) :is(.weather-strip, .status-strip) {
  box-shadow: none;
  background: transparent;
  border-color: var(--home-line);
}
body:has(#overviewPage.is-active) .weather-strip small { color: var(--home-text-soft); }
body:has(#overviewPage.is-active) .sidebar {
  background: #043e39;
  border-right: 1px solid rgba(104, 245, 175, .16);
  box-shadow: none;
}
body:has(#overviewPage.is-active) .sidebar-collapse {
  color: #dffbf3;
  background: rgba(76, 221, 157, .12);
  border: 1px solid rgba(129, 241, 191, .15);
}
body:has(#overviewPage.is-active) .sidebar-collapse:hover {
  color: #fff;
  background: rgba(76, 221, 157, .2);
}
body:has(#overviewPage.is-active) .nav-item {
  color: #b8d8d0;
  border: 1px solid transparent;
  font-weight: 500;
  text-shadow: none;
}
body:has(#overviewPage.is-active) .nav-item .icon { color: #a8d2c8; }
body:has(#overviewPage.is-active) .nav-item:hover {
  color: #fff;
  background: rgba(41, 178, 126, .18);
  border-color: rgba(117, 235, 184, .12);
}
body:has(#overviewPage.is-active) .nav-item.is-active {
  color: #fff;
  background: #0f6e60;
  border-color: transparent;
  box-shadow: none;
  font-weight: 650;
}
body:has(#overviewPage.is-active) .nav-item.is-active .icon { color: #b9ffb1; }
body:has(#overviewPage.is-active) .brand-logo {
  border: 1px solid rgba(169, 255, 213, .28);
  box-shadow: none;
}
body:has(#overviewPage.is-active) .session {
  background: rgba(1, 42, 38, .54);
  border: 1px solid rgba(111, 231, 174, .22);
  border-radius: 10px;
}
body:has(#overviewPage.is-active) .session-avatar {
  color: #fff;
  background: linear-gradient(145deg, #45d98e, #079360);
}

/* --------------------------------------------------------------------------
 * 3. KPI 卡片带
 * ------------------------------------------------------------------------ */
#overviewPage .kpi-strip article,
#overviewPage .kpi-strip article + article,
#overviewPage .kpi-strip article:nth-child(n+3) {
  background: var(--home-surface);
  border: 1px solid var(--home-line);
  box-shadow: none;
  animation: none;
  gap: 16px;
}
#overviewPage .kpi-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
@media (min-width: 1381px) {
  #overviewPage .kpi-icon { flex-basis: 44px; width: 44px; height: 44px; }
}
@media (min-width: 2560px) {
  #overviewPage .kpi-icon { flex-basis: 48px; width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
 * 4. 数字孪生工作区 / 标题栏 / 视图 tabs
 * ------------------------------------------------------------------------ */
#overviewPage .overview-visual-workspace {
  border: 0;
  box-shadow: none;
}
#overviewPage .kpi-strip { box-shadow: none; border: 0; }
#overviewPage .overview-visual-head {
  background: var(--home-canvas);
  border: 0;
  box-shadow: none;
  animation: none;
}
#overviewPage .overview-visual-tabs {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 6px;
}
#overviewPage .overview-visual-tabs button:hover { background: #09574e; }
#overviewPage .overview-visual-tabs button.is-active {
  background: #0f6e60;
  color: var(--home-text-strong);
  box-shadow: none;
}
#overviewPage .overview-visual-tabs button:focus-visible { outline-color: #7ef0e2; }
#overviewPage #overviewVisualTwin { border-color: #174f45; }

/* --------------------------------------------------------------------------
 * 5. 能耗 / 能碳悬浮分析面板
 * ------------------------------------------------------------------------ */
#overviewPage .overview-analysis-overlay {
  background: linear-gradient(155deg, rgba(4, 42, 40, .70), rgba(2, 26, 28, .70));
  border-color: var(--home-line-strong);
  backdrop-filter: none;
  text-shadow: none;
  box-shadow: none;
}
#overviewPage .overview-analysis-overlay-icon {
  padding: 1px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
#overviewPage .overview-analysis-overlay-icon img,
#overviewPage .overview-visual-tab-icon {
  filter: none;
}
#overviewPage .overview-analysis-status.is-live::before { background: #63d5c6; }
#overviewPage .overview-analysis-period {
  background: rgba(0, 18, 19, .54);
  border-color: var(--home-line);
  box-shadow: none;
}
#overviewPage .overview-analysis-period button:hover { background: rgba(99, 213, 198, .14); }
#overviewPage .overview-analysis-period button.is-active {
  color: #f5fff7;
  background: #0f6e60;
  box-shadow: none;
}
#overviewPage .overview-analysis-period button:focus-visible { outline-color: #7ef0e2; }
#overviewPage .overview-analysis-metrics > div {
  border-bottom-color: rgba(122, 211, 162, .18);
  box-shadow: none;
  animation: none;
}

/* --------------------------------------------------------------------------
 * 6. 金黄山组合图配色：电力青绿 / 冷量紫 / 能效浅绿
 * ------------------------------------------------------------------------ */
#overviewPage .metric-dot.is-electricity,
#overviewPage .overview-analysis-legend i.is-electricity { background: #2fb58a; }
#overviewPage .metric-dot.is-cooling,
#overviewPage .overview-analysis-legend i.is-cooling { background: #a08cf0; }
#overviewPage .metric-dot.is-efficiency,
#overviewPage .overview-analysis-legend i.is-efficiency { background: #a6f57e; }
#overviewPage .metric-dot.is-emission { background: #8ee6a8; }
#overviewPage .metric-dot.is-reduction { background: #63d5c6; }
#overviewPage .metric-dot.is-intensity { background: #4eb8ff; }

/* --------------------------------------------------------------------------
 * 7. 趋势图表（网格 / 柱 / 能效线，青绿 teal 收敛）
 * ------------------------------------------------------------------------ */
#overviewPage .overview-analysis-chart .grid { stroke: rgba(99, 213, 198, .16); }
#overviewPage .overview-analysis-chart .bar-electricity { fill: #2fb58a; }
#overviewPage .overview-analysis-chart .bar-cooling { fill: #a08cf0; }
#overviewPage .overview-analysis-chart .efficiency-line { stroke: #a6f57e; }
#overviewPage .overview-analysis-chart .efficiency-point { fill: #041f20; stroke: #a6f57e; }
#overviewPage .overview-analysis-chart text { fill: #a6d0cb; }

/* --------------------------------------------------------------------------
 * 8. 碳价 K 线参照金黄山：涨青绿 / 跌紫；行情数据与方向判断不变
 * ------------------------------------------------------------------------ */
#overviewPage .overview-analysis-chart .carbon-market-candle line { stroke-width: 1; }
#overviewPage .overview-analysis-chart .carbon-market-candle rect { stroke-width: .7; }
#overviewPage .overview-analysis-chart .carbon-market-candle.is-up line,
#overviewPage .overview-analysis-chart .carbon-market-candle.is-up rect { fill: #2fb58a; stroke: #69d9b3; }
#overviewPage .overview-analysis-chart .carbon-market-candle.is-down line,
#overviewPage .overview-analysis-chart .carbon-market-candle.is-down rect { fill: #a08cf0; stroke: #b7a8f4; }

/* --------------------------------------------------------------------------
 * 9. 首页静态边界：运动只用于实际交互，不再循环呼吸。
 * ------------------------------------------------------------------------ */
#overviewPage :is(.fiber-borehole-model, .geothermal-simulation-field,
  .simulation-strategy, .simulation-field-caption, .geothermal-module-footer,
  .ground-temp-detail) {
  animation: none;
  box-shadow: none;
  border-color: var(--home-line);
}
#overviewPage :is(h2, strong, small, dt, dd, button, .overview-analysis-source) { text-shadow: none; }
#overviewPage :is(.overview-visual-tabs, .overview-analysis-period) button {
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
#overviewPage ::selection { background: #0f6e60; color: #f4fffc; }
#overviewPage { scrollbar-color: #38695a #041f20; }

/* --------------------------------------------------------------------------
 * 10. 字体可读性微调（仅主页大屏；其余不变）
 * ------------------------------------------------------------------------ */
#overviewPage .overview-analysis-chart text { font-size: .75rem; font-weight: 500; }
#overviewPage .overview-analysis-metrics dd small,
#overviewPage .overview-analysis-legend,
#overviewPage .overview-analysis-source {
  color: var(--home-text-soft);
  font-size: .75rem;
}

/* --------------------------------------------------------------------------
 * 11. 分析面板：保留占位与数据，统一标题、指标、辅助文字层级。
 * ------------------------------------------------------------------------ */
/* 面板尺寸与内边距 */
#overviewPage .overview-analysis-overlay {
  width: clamp(310px, 21vw, 350px);
  padding: 18px;
  border-radius: 14px;
  animation: none;
}
/* 面板头：标题 + 状态角标 */
#overviewPage .overview-analysis-overlay-head {
  gap: 9px;
  min-height: 42px;
  flex-shrink: 0;
}
#overviewPage .overview-analysis-overlay-head h2 {
  color: var(--home-text-strong);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: 0;
}
#overviewPage .overview-analysis-status {
  color: #dcf6ea;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 周期切换：上下间距 + 按钮高度与字号 */
#overviewPage .overview-analysis-period {
  margin: 16px 0 20px;
  gap: 3px;
  flex-shrink: 0;
  animation: none;
}
#overviewPage .overview-analysis-period button {
  min-height: 36px;
  color: #c6e6d8;
  font-size: .875rem;
  font-weight: 600;
}
#overviewPage .overview-analysis-period button:hover {
  color: var(--home-text-strong);
}
@media (max-width: 640px) {
  #overviewPage .overview-analysis-period button {
    min-height: 44px;
  }
}
/* 分组标题 14px，辅助文字 12px。 */
#overviewPage .overview-analysis-section-label,
#overviewPage .overview-analysis-chart-head {
  min-height: 20px;
  gap: 8px;
  flex-shrink: 0;
}
#overviewPage .overview-analysis-section-label {
  margin: 0 0 7px;
}
#overviewPage .overview-analysis-section-label strong,
#overviewPage .overview-analysis-chart-head strong {
  color: #eafff7;
  font-size: .875rem;
  font-weight: 600;
}
#overviewPage .overview-analysis-section-label span,
#overviewPage .overview-analysis-chart-head span {
  color: #b3d8c8;
  font-size: .75rem;
  font-weight: 400;
}
/* 指标表：名称 14px / 数值 24px / 单位 12px；宽度不足时单位换行。 */
#overviewPage .overview-analysis-metrics > div {
  min-height: 54px;
  gap: 8px;
}
#overviewPage .overview-analysis-metrics { flex-shrink: 0; }
#overviewPage .overview-analysis-metrics dt {
  min-width: 0;
  color: #d9f4e8;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
}
#overviewPage .overview-analysis-metrics dd {
  flex-shrink: 0;
  max-width: 64%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#overviewPage .overview-analysis-metrics .metric-dot { flex-shrink: 0; }
#overviewPage .overview-analysis-metrics dd strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--home-text-strong);
  font-size: 1.5rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#overviewPage .overview-analysis-metrics dd small {
  color: #b6d5c8;
  font-size: .75rem;
  font-weight: 400;
}
/* 趋势/碳价标题：上间距 17px */
#overviewPage .overview-analysis-chart-head {
  margin: 22px 0 10px;
  align-items: flex-start;
}
/* 图例与来源 */
#overviewPage .overview-analysis-legend {
  gap: 18px;
  color: #bfe0d7;
  font-size: .75rem;
  font-weight: 500;
  margin-top: 12px;
  flex-shrink: 0;
}
#overviewPage .overview-analysis-legend i {
  width: 14px;
  height: 7px;
}
#overviewPage .overview-analysis-source {
  margin-top: 12px;
  align-self: flex-end;
  color: #a8c9bf;
  font-size: .75rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * 12. 图表高度对齐金黄山：固定 180-260px（非拉伸）
 * ------------------------------------------------------------------------ */
#overviewPage .overview-analysis-overlay .overview-analysis-chart {
  flex: 0 1 clamp(180px, 21vh, 260px);
  min-height: 120px;
  height: clamp(180px, 21vh, 260px);
  margin-top: 6px;
}
#overviewPage .overview-analysis-overlay .overview-analysis-empty {
  min-height: 0;
  padding: 12px;
  color: #b3d8c8;
  font-size: .8125rem;
  text-align: center;
}
#overviewPage .overview-analysis-overlay .overview-analysis-chart svg {
  min-height: 0;
  height: 100%;
}

/* Keep the complete legend/source visible on laptop-height stages. */
@media (min-width: 1101px) and (max-height: 820px) {
  #overviewPage .overview-analysis-overlay-head { min-height: 36px; }
  #overviewPage .overview-analysis-overlay-head h2 { font-size: 1.125rem; }
  #overviewPage .overview-analysis-period { margin: 10px 0 12px; }
  #overviewPage .overview-analysis-metrics > div { min-height: 40px; }
  #overviewPage .overview-analysis-chart-head { margin-top: 10px; }
  #overviewPage .overview-analysis-overlay .overview-analysis-chart {
    flex-basis: 172px;
    min-height: 96px;
    height: 172px;
  }
}
@media (min-width: 1101px) and (max-height: 620px) {
  #overviewPage .overview-analysis-overlay { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #38695a transparent; }
  #overviewPage .overview-analysis-overlay .overview-analysis-chart { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #overviewPage .overview-analysis-overlay { animation: none; }
}

/* --------------------------------------------------------------------------
 * 13. 碳价「昨日收盘」强调色对齐金黄山（黄绿 #a6f57e，与系统 EER 同色）
 * ------------------------------------------------------------------------ */
#overviewPage #overviewCarbonLatestPrice {
  color: #a6f57e;
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * 14. KPI 卡片与视图 tabs 文字对齐金黄山（标题/数值/单位字号、字重）
 * ------------------------------------------------------------------------ */
#overviewPage .kpi-strip span {
  color: var(--home-text-soft);
  font-size: .875rem;
  font-weight: 400;
}
#overviewPage .kpi-strip strong {
  color: var(--home-text-strong);
  font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: 2.125rem;
  font-weight: 650;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-shadow: none;
}
#overviewPage .kpi-strip small {
  color: var(--home-text-muted);
  font-size: .75rem;
  font-weight: 400;
}
/* Narrow screens prioritize the metric over its decorative illustration. */
@media (max-width: 600px) {
  #overviewPage .kpi-strip { gap: 12px; }
  #overviewPage .kpi-strip article { min-height: 104px; padding: 12px; }
  #overviewPage .kpi-strip article > div { width: 100%; }
  #overviewPage .kpi-icon { display: none; }
  #overviewPage .kpi-strip span { font-size: .8125rem; }
  #overviewPage .kpi-strip strong { font-size: 1.875rem; }
  #overviewPage .kpi-strip small { display: inline-block; white-space: nowrap; }
}
#overviewPage .overview-visual-tabs button {
  color: var(--home-text-soft);
  font-size: .9375rem;
  font-weight: 600;
  background: #063532;
  border: 0;
  box-shadow: none;
}
#overviewPage .overview-visual-tab-icon {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
 * 15. 顶部标题栏已统一由 styles.pages-v2.css「0. 顶部标题栏」提供
 *     （平台品牌双行标题 + 天气/最新数据胶囊，全页面生效）
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * 16. 侧栏收起状态对齐金黄山（隐藏品牌、图标 20px、用户卡片竖排）
 * ------------------------------------------------------------------------ */
@media (min-width: 1101px) {
  body.sidebar-collapsed .sidebar {
    gap: 18px;
    padding-inline: 14px;
  }
  body.sidebar-collapsed .brand { display: none; }
  body.sidebar-collapsed .sidebar-collapse {
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar-collapse .icon { width: 19px; height: 19px; }
  body.sidebar-collapsed .nav-item {
    width: 46px;
    gap: 0;
    padding: 0;
    justify-content: center;
  }
  body.sidebar-collapsed .nav-item .icon { width: 20px; height: 20px; }
  body.sidebar-collapsed .session {
    gap: 8px;
    padding: 10px 6px;
    flex-direction: column;
  }
  body.sidebar-collapsed .session button { color: #d4e5e1; margin-left: 0; }
}

/* --------------------------------------------------------------------------
 * 17. 导航列表间距与图标尺寸对齐金黄山（gap 7px、图标 18px）
 * ------------------------------------------------------------------------ */
body:has(#overviewPage.is-active) .nav-list { gap: 7px; }
body:has(#overviewPage.is-active) .nav-item .icon { width: 18px; height: 18px; }