/* ============================================================
   能碳平台 · UI/UX 全局基建样式（TASK-031 批次1）
   独立样式文件，仅追加覆盖，不破坏 index.html 内联样式
   主题色：能源蓝 #1A5276 / 生态绿 #27AE60 / 警示橙 #E67E22 / 科技灰 #95A5A6
   ============================================================ */

/* ---------- 1. 按钮即时反馈 / Loading ---------- */
button { transition: transform .18s ease, box-shadow .18s ease, background .2s ease, opacity .2s ease; }
button.pressed { transform: scale(.96); }
button:active { transform: scale(.97); }
button:disabled { opacity: .62; cursor: not-allowed; }

/* spinner（用于按钮内 / 图表遮罩居中） */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: ui-spin .7s linear infinite; vertical-align: -3px; margin-right: 6px; }
.spinner.dark { border-color: rgba(26,32,44,.22); border-top-color: var(--blue,#1d4ed8); }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------- 2. Toast 消息系统（四色 + 堆叠 + 可关闭） ---------- */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 220px; max-width: 320px; padding: 11px 14px; border-radius: 9px; color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 24px rgba(15,23,42,.18); display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateX(24px); animation: ui-toast-in .28s ease forwards; position: relative; }
.toast .t-icon { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; color: #0f172a; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; margin-top: 1px; }
.toast .t-msg { flex: 1; word-break: break-word; }
.toast .t-close { flex-shrink: 0; cursor: pointer; margin-left: 4px; font-size: 15px; opacity: .75; line-height: 1; padding: 0 2px; }
.toast .t-close:hover { opacity: 1; }
.toast.success { background: #178a45; }
.toast.error { background: #d33a3a; }
.toast.warning { background: #e67e22; }
.toast.info { background: #1A5276; }
.toast.leaving { animation: ui-toast-out .28s ease forwards; }
@keyframes ui-toast-in { to { opacity: 1; transform: translateX(0); } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(24px); } }

/* 兼容旧 msg 浮层（保留，不冲突） */
.msg { z-index: 1190; }

/* ---------- 3. Loading 骨架屏（表格区闪烁条） ---------- */
.sk-wrap { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.sk-row { height: 18px; border-radius: 5px; background: linear-gradient(90deg, #eef2f6 25%, #dde4ec 37%, #eef2f6 63%); background-size: 400% 100%; animation: ui-shimmer 1.3s ease infinite; }
.sk-row.w30 { width: 30%; } .sk-row.w50 { width: 50%; } .sk-row.w70 { width: 70%; } .sk-row.w90 { width: 90%; } .sk-row.w100 { width: 100%; }
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* 图表加载遮罩 + 居中 spinner */
.chart-loading { position: relative; }
.chart-loading .chart-mask { position: absolute; inset: 0; background: rgba(255,255,255,.62); display: flex; align-items: center; justify-content: center; border-radius: 10px; z-index: 5; }
.chart-loading .chart-mask .spinner.dark { border-color: rgba(26,32,44,.2); border-top-color: #1d4ed8; width: 22px; height: 22px; }

/* ---------- 4. 页面切换过渡（fadeInUp） ---------- */
#content.page-enter { animation: ui-fadeInUp .3s ease; }
@keyframes ui-fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 5. 通用表格交互优化 ---------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; }
tbody tr { transition: background .15s ease; }
tbody tr:hover td { background: #f0f7f2; }
td, th { transition: background .15s ease; }

/* ---------- 6. 触屏 / 响应式最小点击区 ---------- */
@media (hover: none), (pointer: coarse) {
  button, .menu-item, .badge, a { min-height: 40px; }
  td, th { min-height: 34px; }
}
@media (max-width: 768px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .table-wrap, table { display: block; }
  table { overflow-x: auto; white-space: nowrap; }
  form.rowform { flex-direction: column; align-items: stretch; }
  form.rowform input, form.rowform select, form.rowform button { width: 100% !important; }
  #main { padding: 12px 10px; }
}

/* ================= 7. DataTable 通用表格组件样式（TASK-032） ================= */
.datatable-wrap { width: 100%; }
.datatable-wrap .dt-filter { display: flex; align-items: center; gap: 8px; padding: 6px 2px; }
.datatable-wrap .dt-filter input {
  flex: 0 1 260px; max-width: 100%; padding: 6px 10px;
  border: 1px solid #d4dce6; border-radius: 6px; font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.datatable-wrap .dt-filter input:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.datatable-wrap .dt-filter .dt-clear {
  padding: 6px 12px; border: 1px solid #d4dce6; border-radius: 6px;
  background: #fff; color: #475569; cursor: pointer; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.datatable-wrap .dt-filter .dt-clear:hover { background: #f1f5f9; color: #d33a3a; }

.datatable-wrap .dt-table { overflow-x: auto; margin-bottom: 6px; }
.datatable-wrap table.datatable { width: 100%; border-collapse: collapse; }
.datatable-wrap table.datatable thead th {
  background: #f6f8fb; color: #334155; font-weight: 600; text-align: left;
  padding: 9px 12px; border-bottom: 2px solid #e3e9f1; font-size: 13px; white-space: nowrap;
  user-select: none;
}
.datatable-wrap table.datatable thead th.dt-sortable { cursor: pointer; }
.datatable-wrap table.datatable thead th.dt-sortable:hover { background: #eef3f8; color: #1d4ed8; }
.datatable-wrap table.datatable thead th .dt-arrow { margin-left: 5px; font-size: 10px; color: #1d4ed8; }

.datatable-wrap table.datatable tbody td {
  padding: 8px 12px; border-bottom: 1px solid #eef2f6; font-size: 13px; color: #475569;
  vertical-align: middle;
}
.datatable-wrap table.datatable tbody tr.dt-row { transition: background .15s ease; cursor: pointer; }
.datatable-wrap table.datatable tbody tr.dt-row:hover td { background: #f0f7f2; }
.datatable-wrap table.datatable tbody tr.dt-row.dt-expanded td { background: #eaf7f0; }
.datatable-wrap table.datatable tbody tr.dt-detail td { background: #fbfdfc; padding: 10px 14px; font-size: 12.5px; color: #334155; }
.datatable-wrap table.datatable tbody tr.dt-empty td { text-align: center; color: #94a3b8; padding: 22px 12px; }

.datatable-wrap .dt-pager .dt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.datatable-wrap .dt-pager button.dt-prev,
.datatable-wrap .dt-pager button.dt-next {
  padding: 6px 14px; border: 1px solid #d4dce6; border-radius: 6px; background: #fff;
  color: #334155; cursor: pointer; font-size: 13px; transition: background .15s ease, border-color .15s ease;
}
.datatable-wrap .dt-pager button:hover:not(:disabled) { background: #f1f5f9; border-color: #1d4ed8; color: #1d4ed8; }
.datatable-wrap .dt-pager button:disabled { opacity: .45; cursor: not-allowed; }
.datatable-wrap .dt-pager .dt-status { font-size: 12.5px; color: #64748b; }

@media (max-width: 768px) {
  .datatable-wrap .dt-filter input { flex: 1 1 auto; }
  .datatable-wrap .dt-pager .dt-foot { flex-direction: column-reverse; align-items: stretch; }
  .datatable-wrap .dt-pager button { flex: 1; }
}

/* ================= 8. 表单验证 + 智能输入（TASK-034 批次2） ================= */
/* 错误提示红字（输入框下方） */
.rowform .field { position: relative; }
.rowform.has-error input, .rowform input.input-error,
.rowform select.input-error, .rowform input.input-error:focus {
  border-color: #d33a3a !important;
  box-shadow: 0 0 0 3px rgba(211,58,58,.12);
}
.rowform .form-err {
  display: block; color: #d33a3a; font-size: 11.5px; line-height: 1.4;
  margin-top: 3px; font-weight: 500; padding-left: 2px;
}
.rowform .form-err:empty { display: none; }

/* 千分位输入样式（右下角小额角标提示） */
.rowform input[data-thousands] { font-variant-numeric: tabular-nums; }

/* 下拉搜索过滤包装 */
.searchable-wrap { position: relative; display: inline-flex; flex-direction: column; min-width: 110px; }
.searchable-wrap .searchable-input {
  padding: 5px 8px; border: 1px solid #d4dce6; border-radius: 5px;
  font-size: 12px; width: 100%; box-sizing: border-box; margin-bottom: 4px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.searchable-wrap .searchable-input:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.12); }

@media (max-width: 768px) {
  .searchable-wrap { width: 100%; }
}

/* 图表提示 tooltip 内页占比文本配色 */
.echarts-tooltip-pct { color: #f59e0b; font-weight: 600; }

/* ============ TASK-063：LCA 竖向可编辑建模画布 ============ */
.lca-phase { background: #f1f5f9; border: 1.5px dashed #cbd5e1; border-radius: 10px; box-sizing: border-box; }
.lca-node { position: absolute; box-sizing: border-box; cursor: grab; user-select: none; }
.lca-node:active { cursor: grabbing; }
.lca-mat { background: #ffffff; border: 1.5px solid #38bdf8; border-radius: 8px; padding: 6px 9px; min-width: 96px; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-align: left; }
.lca-mat:hover { border-color: #0284c7; box-shadow: 0 4px 14px rgba(2,132,199,.18); }
.lca-edit { position: absolute; top: -8px; right: -6px; font-size: 10px; background: #e0f2fe; color: #0284c7; padding: 0 5px; border-radius: 8px; cursor: pointer; display: none; }
.lca-del { position: absolute; bottom: -8px; right: -6px; font-size: 10px; background: #fef2f2; color: #dc2626; padding: 0 5px; border-radius: 8px; cursor: pointer; display: none; }
.lca-mat:hover .lca-edit, .lca-mat:hover .lca-del { display: block; }
.lca-prod { background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; border-radius: 12px; padding: 12px 20px; text-align: center; min-width: 170px; box-shadow: 0 6px 16px rgba(22,163,74,.28); z-index: 2; }
.lca-add { position: absolute; font-size: 11px; color: #16a34a; background: #f0fdf4; border: 1px dashed #86efac; border-radius: 8px; padding: 4px 10px; cursor: pointer; user-select: none; top: 24px; }
.lca-add:hover { background: #dcfce7; }
.lca-links { z-index: 0; }
.lca-phase { z-index: 1; }
.lca-node { z-index: 2; }


/* ============ TASK-065：LCA 竖向画布布局重构（flex / 去重 / 连线标签） ============ */
.lca-wrap { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
.lca-stage-col { display:flex; flex-direction:column; gap:14px; padding:2px 2px 10px 2px; }
.lca-flex-row { display:flex; align-items:flex-start; gap:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px; }
.lca-row-title { flex:0 0 auto; min-width:96px; font-size:13px; font-weight:700; border-left:5px solid; padding-left:8px; line-height:1.35; margin-top:6px; white-space:normal; }
.lca-row-cards { flex:1 1 auto; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; min-height:44px; }
.lca-mat { position:relative; box-sizing:border-box; cursor:grab; user-select:none; background:#fff; border:1.5px solid #e2e8f0; border-radius:8px; padding:7px 10px; min-width:132px; max-width:200px; box-shadow:0 2px 8px rgba(0,0,0,.06); text-align:left; }
.lca-mat.active, .lca-mat:active { cursor:grabbing; }
.lca-mat:hover { border-color:#0284c7; box-shadow:0 4px 14px rgba(2,132,199,.16); }
.lca-mat-name { font-size:12px; font-weight:700; color:#0f172a; line-height:1.2; word-break:break-all; }
.lca-mat-sub { font-size:11px; color:#475569; margin-top:1px; }
.lca-mat-emis { font-size:11px; color:#b91c1c; font-weight:600; margin-top:1px; }
.lca-add-inline { font-size:11px; color:#16a34a; background:#f0fdf4; border:1px dashed #86efac; border-radius:8px; padding:6px 10px; cursor:pointer; user-select:none; align-self:flex-start; }
.lca-add-inline:hover { background:#dcfce7; }
.lca-prod { position:relative; margin:20px auto 4px auto; width:max-content; background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; border-radius:12px; padding:12px 22px; text-align:center; min-width:180px; box-shadow:0 6px 16px rgba(22,163,74,.28); }
.lca-links { z-index:1; pointer-events:none; }
.lca-flex-row { z-index:2; position:relative; }


/* ============================================================
   能碳平台 · UI/UX 基建样式批次2（TASK-104 三曲线 + 数据采集优化）
   纯视觉/交互提升，不改业务逻辑与数据；仅追加覆盖。
   主题：生态绿 #16a34a 主色 + 能源蓝 #0ea5e9 + 紫 #7c3aed（曲线区分度）
   ============================================================ */

/* ---------- 7a. 通用筛选面板（视觉分组 + 标题头） ---------- */
.ui-filter { position: relative; padding: 0 16px 14px; background: linear-gradient(180deg,#fbfdfb,#fff); }
.ui-filter-head { display: flex; align-items: center; gap: 8px; margin: -1px -16px 12px; padding: 9px 16px; background: #f0faf3; border-bottom: 1px solid #e0f1e6; border-radius: 10px 10px 0 0; }
.ui-filter-head::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: linear-gradient(180deg,#16a34a,#86efac); }
.ui-filter-title { font-size: 13px; font-weight: 700; color: #14532d; letter-spacing: .5px; }
.ui-filter-sub { margin-left: auto; font-size: 11px; color: #7aa08a; font-weight: 400; }
.ui-filter form.rowform { border: none; box-shadow: none; background: transparent; padding: 0; margin: 0; gap: 6px 4px; }
.ui-filter form.rowform label { font-size: 12.5px; color: #334155; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.ui-filter form.rowform select,
.ui-filter form.rowform input {
  border: 1px solid #dbe5ee; border-radius: 8px; padding: 7px 10px; font-size: 13px;
  background: #fff; color: #1e293b; box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}
.ui-filter form.rowform select:hover { border-color: #94c9a8; }
.ui-filter form.rowform select:focus,
.ui-filter form.rowform input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.14); background: #fbfefc; }
.ui-filter form.rowform button {
  border-radius: 8px; min-width: 86px; font-weight: 600; letter-spacing: 2px;
  background: linear-gradient(135deg,#16a34a,#15803d);
}
.ui-filter form.rowform button:hover { background: linear-gradient(135deg,#15803d,#116530); }
.ui-filter form.rowform button.pressed { transform: scale(.96); }

/* ---------- 7b. 三曲线切换按钮组（当前曲线高亮） ---------- */
.ui-seg { display: inline-flex; background: #eef3f0; border: 1px solid #dbe5ee; border-radius: 9px; padding: 3px; gap: 3px; }
.ui-seg button {
  border: none; background: transparent; color: #64748b; font-size: 12.5px; font-weight: 600;
  padding: 6px 18px; border-radius: 7px; cursor: pointer; transition: all .18s ease; letter-spacing: 1px;
}
.ui-seg button:hover { color: #15803d; background: rgba(22,163,74,.08); }
.ui-seg button.active { background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; box-shadow: 0 3px 8px rgba(22,163,74,.28); }

/* ---------- 7c. KPI 卡片微调（等宽 / 轻阴影 / 悬停微升） ---------- */
.kpis { gap: 12px; }
.kpi {
  position: relative; overflow: hidden; border: 1px solid #e6edf3; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kpi::after { content: ""; position: absolute; right: -18px; top: -18px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle,rgba(22,163,74,.10),transparent 70%); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,23,42,.10); border-color: #cfe8da; }
.kpi.e .n { color: #64748b; letter-spacing: .3px; }
.kpi.e .v { color: #14532d; }
.kpi.c .n { color: #475569; }
.kpi .u { color: #64748b; }

/* ---------- 7d. 图表卡片（标题圆点 + 悬停抬升） ---------- */
.card { border-radius: 12px; border: 1px solid #e6edf3; box-shadow: 0 1px 4px rgba(15,23,42,.05); transition: box-shadow .2s ease, border-color .2s ease; }
.card:hover { border-color: #d5e6dd; box-shadow: 0 6px 18px rgba(15,23,42,.07); }
.card h3 { position: relative; padding-left: 12px; font-size: 14px; color: #14532d; font-weight: 700; letter-spacing: .2px; }
.card h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg,#16a34a,#86efac); }
.card h3 > small { font-weight: 400; color: #94a3b8; font-size: 11px; margin-left: 6px; }

/* ---------- 7e. 顶部说明行 / 底部提示 ---------- */
.ui-banner { display: flex; align-items: flex-start; gap: 8px; background: #f0faf3; border: 1px dashed #bfe3cd; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.6; color: #3f6a50; }
.ui-banner::before { content: "提示"; flex: 0 0 auto; background: #16a34a; color: #fff; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; margin-top: 1px; }
.ui-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
.ui-hint::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.18); flex: 0 0 auto; }

/* ---------- 7f. 数据底座表格（斑马纹 + 表头吸附 + 悬停） ---------- */
.datatable-wrap table.datatable thead th { background: #f0faf3; color: #14532d; border-bottom: 2px solid #cfe8da; }
.datatable-wrap table.datatable tbody tr:nth-child(even) td { background: #fbfdfc; }
.datatable-wrap table.datatable tbody tr.dt-row:hover td { background: #eaf7f0; }
.datatable-wrap table.datatable tbody tr.dt-row.dt-expanded td { background: #e2f4ea; }
.datatable-wrap .dt-filter input:focus { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
.datatable-wrap .dt-pager button:hover:not(:disabled) { border-color: #16a34a; color: #16a34a; }

/* ---------- 7g. 数据采集卡片网格间距 & 加载占位 ---------- */
.grid2 { gap: 14px; }
.grid2 .card { display: flex; flex-direction: column; }
.grid2 .card h3 { margin-bottom: 8px; }
.chart { border-radius: 8px; }
.ui-loading { display: flex; align-items: center; justify-content: center; gap: 8px; color: #94a3b8; font-size: 13px; padding: 40px 0; }

/* ---------- 7h. 响应式 ---------- */
@media (max-width: 768px) {
  .ui-filter { padding: 0 12px 12px; }
  .ui-filter-head { margin: -1px -12px 10px; padding: 9px 12px; }
  .ui-seg { flex-wrap: wrap; }
  .ui-seg button { flex: 1 1 auto; }
}



/* ============================================================
   能碳平台 · UI/UX 基建样式批次3（TASK-118 P0 八项）
   纯视觉/交互提升，不改业务逻辑与数据；仅追加覆盖。
   P0：主题色板 / 语义色带 / 品类分色 / 胶囊Tab / 范围分色 /
       CSS变量 / 统一tooltip / 卡片规格。全部本地无CDN。
   ============================================================ */

/* ---- G1 语义 CSS 变量（新增，逐步替换硬编码色） ---- */
:root {
  --warn:        #EAB308;   /* 临界/注意 */
  --danger:      #DC2626;   /* 超标/危险 */
  --info:        #0B5FCC;   /* 信息/提示 */
  --energy-blue: #0B5FCC;   /* 电-蓝 */
  --gas-orange:  #EA580C;   /* 气-橙 */
  --water-cyan:  #0891B2;   /* 水-青 */
  --steam-purple:#7C3AED;   /* 蒸汽-紫 */

  /* C1 范围1/2/3 固定语义色 */
  --scope-1:     #00C2FF;   /* 范围1-青 */
  --scope-2:     #0C66E4;   /* 范围2-蓝 */
  --scope-3:     #8B7BB5;   /* 范围3-灰紫 */

  /* 卡片统一规格（G3） */
  --card-radius: 12px;
  --card-border: 1px solid var(--line);
  --card-shadow: 0 1px 4px rgba(15,23,42,.05);
  --card-shadow-hover: 0 8px 22px rgba(15,23,42,.12);
}

/* ---- G3 卡片规格统一：圆角 + 1px 描边 + 悬浮轻阴影 ---- */
.card,
.kpi,
.lca-wrap,
.lca-flex-row,
.ui-filter,
.datatable-wrap table.datatable {
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover,
.kpi:hover {
  border-color: #cfe8da;
  box-shadow: var(--card-shadow-hover);
}
.card h3 small { color: #94a3b8; }

/* ---- E1 能源品类分色工具类（供 badge/图例/标记使用） ---- */
.cat-electricity { color: var(--energy-blue); }
.cat-gas         { color: var(--gas-orange); }
.cat-water       { color: var(--water-cyan); }
.cat-steam       { color: var(--steam-purple); }
.cat-energy-line { border-left-width: 4px; border-left-style: solid; }
.cat-energy-line.electricity { border-left-color: var(--energy-blue); }
.cat-energy-line.gas         { border-left-color: var(--gas-orange); }
.cat-energy-line.water       { border-left-color: var(--water-cyan); }
.cat-energy-line.steam       { border-left-color: var(--steam-purple); }

/* ---- C1 范围1/2/3 彩色徽标 ---- */
.scope-tag { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; color: #fff; }
.scope-tag.s1 { background: var(--scope-1); }
.scope-tag.s2 { background: var(--scope-2); }
.scope-tag.s3 { background: var(--scope-3); }

/* ---- E4 筛选面板胶囊 Tab：active 渐变态 ---- */
.tabs { gap: 8px; }
.tabs button {
  border: 1px solid var(--line);
  background: #fff;
  color: #475569;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  transition: all .2s ease;
  cursor: pointer;
}
.tabs button:hover { color: #15803d; border-color: #94c9a8; background: #f0faf3; }
.tabs button.active {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(22,163,74,.28);
}

/* ---- D2 达标分级语义色带（KPI 顶色条 + 进度三档） ---- */
.kpi.threshold { position: relative; }
.kpi.threshold::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
}
.kpi.threshold.ok::after      { background: var(--green); }
.kpi.threshold.warn::after    { background: var(--warn); }
.kpi.threshold.danger::after  { background: var(--danger); }

/* 达标分级进度条：绿/黄/红三档 */
.progress { background: #e2e8f0; border-radius: 6px; height: 8px; overflow: hidden; }
.progress i.level-ok    { background: linear-gradient(90deg,#16a34a,#86efac); }
.progress i.level-warn  { background: linear-gradient(90deg,#EAB308,#FDE68A); }
.progress i.level-danger{ background: linear-gradient(90deg,#DC2626,#FCA5A5); }

/* 语义文字色助手 */
.text-warn   { color: var(--warn); }
.text-danger { color: var(--danger); }
.text-info   { color: var(--info); }


/* ============================================================
   能碳平台 · UI/UX 基建样式批次4（TASK-127 P1 批次）
   P1：KPI环比标注(D3) / 设备迷你sparkline(E2) / 能耗分级(E3) /
       履约评分环(C2) / 因子badge补色(C3) / hover动效(G4) /
       桑基 derived 标注（实测/示意）。纯视觉，不改业务逻辑。
   ============================================================ */

/* ---- C3 补充 amber / orange 语义变量与 badge ---- */
:root {
  --amber:  #F59E0B;   /* 过期/注意-黄橙 */
  --orange: #EA580C;   /* 覆盖/超标-橙 */
}
.badge.amber { background: #FEF3C7; color: #B45309; }
.badge.orange{ background: #FFEDD5; color: #C2410C; }

/* ---- D3 KPI 环比微标注（▲升绿 / ▼降红，复用语义色） ---- */
.kpi .pct { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.kpi .pct.up   { color: var(--green, #16a34a); }
.kpi .pct.down { color: var(--red, #dc2626); }
.kpi .pct.flat { color: var(--sub, #64748b); font-weight: 500; }
.kpi .pct-src { display: block; font-size: 10px; color: #94a3b8; font-weight: 400; margin-top: 2px; }

/* ---- 可再生占位（无绿电数据） ---- */
.kpi .ph-nodata { color: #94a3b8; font-size: 13px; font-weight: 500; }
.kpi .ph-nodata small { font-size: 10px; display: block; font-weight: 400; margin-top: 2px; }

/* ---- G4 hover 动效：按钮 / 卡片 提升 2px + 0.2s 过渡 ---- */
button, .badge, .tabs button { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
button:not(:disabled):hover, .tabs button:hover { transform: translateY(-2px); }
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); }

/* ---- E2 设备列表迷你 sparkline 单元格 ---- */
.sk-cell { width: 120px; height: 34px; position: relative; }
.sk-cell .chart { width: 100%; height: 100%; }
.sk-empty { color: #cbd5e1; font-size: 11px; }

/* ---- E3 能耗分级：进度环容器 + 图例 ---- */
.single-grade { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.grade-ring { width: 44px; height: 44px; }
.grade-tag { display: inline-block; padding: 1px 9px; border-radius: 9px; font-size: 11px; font-weight: 600; color: #fff; }
.grade-tag.ok     { background: var(--green, #16a34a); }
.grade-tag.warn   { background: var(--warn, #EAB308); }
.grade-tag.danger { background: var(--danger, #dc2626); }
.grade-hint { font-size: 11px; color: #94a3b8; }

/* ---- C2 履约评分环容器 ---- */
.comp-gauge { width: 180px; height: 160px; margin: 6px auto 2px; }
.comp-legend { display: flex; gap: 12px; justify-content: center; font-size: 11px; color: #64748b; margin-top: 2px; }
.comp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

/* ---- 桑基 derived 标注：图例 + 虚线灰阶 link 全覆盖 ---- */
.sankey-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sankey-legend { display: inline-flex; gap: 12px; margin-left: auto; font-size: 11px; color: #64748b; }
.sankey-legend i { display: inline-block; width: 16px; height: 3px; margin-right: 4px; vertical-align: middle; }
.sankey-legend i.solid { border-top: 2px solid #16a34a; }
.sankey-legend i.dash  { border-top: 2px dashed #94a3b8; }
.sankey-hint { font-size: 11px; color: #94a3b8; line-height: 1.7; margin-top: 6px; padding: 6px 10px; background: #f8fafc; border-left: 3px solid #cbd5e1; border-radius: 4px; }
.sankey-desc { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 6px; }


/* ---- 通用：软提示徽标（如实测/示意文本） ---- */
.flag-pill { display: inline-block; padding: 0 8px; border-radius: 9px; font-size: 10px; font-weight: 600; }
.flag-pill.measure { background: #dcfce7; color: #15803d; }
.flag-pill.sketch  { background: #f1f5f9; color: #64748b; border: 1px dashed #cbd5e1; }


/* ============================================================
   能碳平台 · 开源借鉴 P0 视觉组（TASK-151）
   纯前端本地 ECharts，不改业务逻辑与数据；仅追加覆盖。
   P0-01 深色大屏主题 / P0-02 指标卡统一组件 / P0-04 时间粒度按钮
   / P0-07 环形占比 + 中央总数 + 图例
   ============================================================ */

/* ---------- P0-01 深色大屏主题：仅驾驶舱/大屏页（.dash-dark 作用域） ---------- */
body.darkdrive { background: #05234A; color: #D7E7F8; }
body.darkdrive #main { background: #05234A; }
.dash-dark { background: #05234A; color: #D7E7F8; }
.dash-dark .charset-fill,
.dash-dark .chart { border: 1px solid #22408C; }
.dash-dark .gadge,
.dash-dark .kpi,
.dash-dark .card { background: linear-gradient(160deg, #0E2E5E, #1D3778); border: 1px solid #22408C; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.dash-dark .kpis { gap: 14px; }
.dash-dark .kpis .kpi { background: linear-gradient(160deg, #0E2E5E, #1D3778); border: 1px solid #22408C; }
.dash-dark .kpis .kpi:hover { border-color: #1976D2; box-shadow: 0 8px 26px rgba(25,118,210,.30); transform: translateY(-2px); }
.dash-dark .kpi .n { color: #8FB3D9; }
.dash-dark .kpi .v { color: #36D3FF; }
.dash-dark .kpi.e .v, .dash-dark .kpi.c .v { color: #36D3FF; }
.dash-dark .kpi .u { color: #6E92B8; }
.dash-dark .card h3 { color: #A9C6E6; }
.dash-dark .card h3::before { background: linear-gradient(180deg,#1976D2,#36D3FF); }
.dash-dark .card h3 > small { color: #6E92B8; }
.dash-dark .card, .dash-dark .grid2 .card, .dash-dark .grid3 .card,
.dash-dark .datatable-wrap table.datatable, .dash-dark .ui-filter { border-radius: 12px; }
.dash-dark .tabs { gap: 8px; }
.dash-dark .tabs button { background: rgba(13,44,94,.55); border: 1px solid #22408C; color: #9DBEE0; }
.dash-dark .tabs button:hover { color: #36D3FF; border-color: #1976D2; background: rgba(25,118,210,.14); }
.dash-dark .tabs button.active,
.dash-dark .seg-pills .seg-btn.active { background: linear-gradient(135deg,#1976D2,#1D6AFF); color: #fff; border-color: transparent; }
.dash-dark .pct.up { color: #4CAF50; }
.dash-dark .pct.down { color: #F44336; }
.dash-dark .pct.flat { color: #8FB3D9; }
.dash-dark .pct-src { color: #6E92B8; }
.dash-dark table th { background: rgba(13,44,94,.55); color: #9DBEE0; }
.dash-dark table td { color: #CBD7E6; }

/* ---------- JSDOM 自测固定色板（深色图表主序列青蓝） ---------- */
.dash-dark .demoChartBox { background: #0E2E5E; }

/* ---------- P0-02 指标卡统一组件（UTILS.kpiCard 输出结构） ---------- */
.ui-kpi { display: inline-flex; flex-direction: column; gap: 4px; }
.ui-kpi .n { font-size: 11px; color: var(--sub); letter-spacing: .3px; }
.dash-dark .ui-kpi .n { color: #8FB3D9; }
.ui-kpi .v { font-size: 26px; font-weight: 800; color: #0f766e; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-dark .ui-kpi .v { color: #36D3FF; }
.ui-kpi .v .u { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: 4px; }
.dash-dark .ui-kpi .v .u { color: #6E92B8; }
.ui-kpi .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.ui-kpi .meta .pct { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.dash-dark .ui-kpi .meta .pct { font-weight: 700; }
.ui-kpi .meta .pct.up   { color: #16a34a; }
.ui-kpi .meta .pct.down { color: #dc2626; }
.ui-kpi .meta .pct.flat { color: #64748b; font-weight: 500; }
.dash-dark .ui-kpi .meta .pct.up   { color: #4CAF50; }
.dash-dark .ui-kpi .meta .pct.down { color: #F44336; }
.dash-dark .ui-kpi .meta .pct.flat { color: #8FB3D9; }
.ui-kpi .meta .note { color: #94a3b8; font-weight: 400; }
.dash-dark .ui-kpi .meta .note { color: #6E92B8; }
.ui-kpi .metric { background: rgba(22,163,74,.10); color: #166534; border-radius: 9px; padding: 1px 8px; font-size: 11px; align-self: flex-start; }
.dash-dark .ui-kpi .metric { background: rgba(53,188,255,.12); color: #36D3FF; }

/* ---------- P0-04 时间粒度按钮组（首尾圆角、激活高亮，挂报表头） ---------- */
.seg-pills { display: inline-flex; background: #eef3f0; border: 1px solid #dbe5ee; border-radius: 10px; padding: 3px; gap: 3px; }
.dash-dark .seg-pills { background: rgba(13,44,94,.55); border-color: #22408C; }
.seg-pills button { border: none; background: transparent; color: #64748b; font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-radius: 7px; cursor: pointer; transition: all .18s ease; }
.dash-dark .seg-pills button { color: #9DBEE0; }
.seg-pills button:first-child { border-radius: 8px 2px 2px 8px; }
.seg-pills button:last-child { border-radius: 2px 8px 8px 2px; }
.seg-pills button:hover { color: #15803d; background: rgba(22,163,74,.08); }
.dash-dark .seg-pills button:hover { color: #36D3FF; background: rgba(25,118,210,.14); }
.seg-pills button.active { background: linear-gradient(135deg,#16a34a,#15803d); color: #fff; box-shadow: 0 3px 8px rgba(22,163,74,.28); }
.dash-dark .seg-pills button.active { background: linear-gradient(135deg,#1976D2,#1D6AFF); color: #fff; }

/* 报表头一行工具条：标题 + 右侧粒度控件 */
.report-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.report-head h3 { margin: 0; }
.report-head .seg-pills { margin-left: auto; }

/* ---------- P0-07 环形占比 + 中央总数 + 右侧图例（UTILS.ringPie 容器） ---------- */
.ringpie-wrap { display: flex; align-items: center; gap: 14px; }
.ringpie-chart { width: 46%; height: 260px; position: relative; }
.ringpie-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; }
.ringpie-center .cnt { font-size: 24px; font-weight: 800; color: #0f766e; font-variant-numeric: tabular-nums; }
.dash-dark .ringpie-center .cnt { color: #36D3FF; }
.ringpie-center .cnt .u { font-size: 12px; font-weight: 500; color: #94a3b8; margin-left: 3px; }
.dash-dark .ringpie-center .cnt .u { color: #6E92B8; }
.ringpie-center .lab { font-size: 11px; color: #64748b; margin-top: 2px; }
.dash-dark .ringpie-center .lab { color: #8FB3D9; }
.ringpie-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 156px; }
.ringpie-legend .item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #334155; }
.dash-dark .ringpie-legend .item { color: #CBD7E6; }
.ringpie-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.ringpie-legend .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ringpie-legend .val { font-variant-numeric: tabular-nums; font-weight: 600; color: #475569; }
.dash-dark .ringpie-legend .val { color: #D7E7F8; }
.ringpie-legend .pct { width: 46px; text-align: right; color: #f59e0b; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .ringpie-wrap { flex-direction: column; }
  .ringpie-chart { width: 100%; }
  .ringpie-legend { width: 100%; }
  .report-head .seg-pills { margin-left: 0; }
}
/* 深色大屏表格细柱基准色 */
.dash-dark .chart { border-radius: 8px; }

/* ============================================================
   能碳平台 · 开源借鉴 P0 修复组（TASK-155，ui）
   纯前端追加覆盖。不改业务逻辑与数据，不删既有规则。
   A. 深色大屏文字可读（.dash-dark 全区域浅色化兜底）
   B. 字体重叠修复（KPI/标题/表格/桑基标签/环形中央）
   ============================================================ */

/* ---------- A. 深色大屏全区域文字浅色化兜底 ----------
   驾驶舱深色模式（body.darkdrive / .dash-dark）下，把所有可能落在
   深色卡片上的文字统一为浅色系，覆盖未显式列出的长文本/标签/输入。 */
body.darkdrive .topbar h2 { color: #D7E7F8; }
body.darkdrive .topbar .user { color: #8FB3D9; }
.dash-dark { color: #D7E7F8; }
.dash-dark .card, .dash-dark .gadge, .dash-dark .kpi {
  color: #D7E7F8;
}
.dash-dark h2, .dash-dark h3, .dash-dark h4 { color: #A9C6E6; }
/* 图表卡片标题一致化 */
.dash-dark .card h3 { color: #A9C6E6; }
/* 表格：表头/单元格浅色 + 长文本不断行省略 */
.dash-dark table th { color: #9DBEE0; }
.dash-dark table td { color: #CBD7E6; word-break: break-word; }
.dash-dark table thead th { white-space: nowrap; }
/* 常用 KPI 数值 / 辅助文字 */
.dash-dark .kpi .n { color: #8FB3D9; }
.dash-dark .kpi .v { color: #36D3FF; }
.dash-dark .kpi .u { color: #6E92B8; }
.dash-dark .ui-kpi .n { color: #8FB3D9; }
.dash-dark .ui-kpi .v { color: #36D3FF; }
.dash-dark .ui-kpi .v .u { color: #6E92B8; }
/* 菜单/提示/说明统一浅色 */
.dash-dark .ui-hint, .dash-dark .ui-banner, .dash-dark .sankey-hint,
.dash-dark .sankey-desc, .dash-dark .flag-pill, .dash-dark .ui-loading { color: #9DBEE0; }

/* ---------- B. 字体重叠修复 ---------- */
/* B1. KPI 数值与单位：禁止折行，单位与数值留出间距 */
.dash-dark .kpi .v, .dash-dark .ui-kpi .v { white-space: nowrap; }
.dash-dark .kpi .v .u, .dash-dark .ui-kpi .v .u { margin-left: 5px; }
.dash-dark .kpi .v .pct, .dash-dark .ui-kpi .meta { display: inline-flex; align-items: baseline; }
/* B2. 环形中央：数字与标签上下分层，不留重叠 */
.dash-dark .ringpie-center .cnt { line-height: 1.15; }
.dash-dark .ringpie-center .lab { margin-top: 6px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* B3. 图例长名：单行省略，数值/百分比右对齐不换行 */
.dash-dark .ringpie-legend .item { white-space: nowrap; }
.dash-dark .ringpie-legend .val, .dash-dark .ringpie-legend .pct { white-space: nowrap; }
/* B4. 桑基标签：长标签省略，避免与节点/其他标签重叠 */
.dash-dark .sankey label, .dash-dark .sankey .label,
.dash-dark g text, .dash-dark text { fill: #CBD7E6 !important; }
.dash-dark .sankey-desc { margin-bottom: 8px; }
/* B5. 图表标题与图例间距：底部图例不挤压标题 */
.dash-dark .chart { overflow: hidden; }
.dash-dark .card h3 > small { margin-left: 8px; }