/* ═══════════════════════════════════════════════════════
   速电平台 v2 增量样式（task-201 子任务B）
   部署方式：index.html 在原 style.css 之后追加引用本文件，不改原样式
   ① 侧边栏：日报绿主题 + 四段分组（像素级参照 menu_v2_mockup.html）
   ② 首页看板 v2：样式全部作用于 .page-dashboard-v2 作用域内
     （像素级参照 dashboard_v3_mockup.html），不影响其他页面
   ═══════════════════════════════════════════════════════ */

/* ═══ 侧边栏 · 日报绿主题（恒绿，不受暗色模式影响）═══ */
.sidebar,
body.dark .sidebar {
  background: linear-gradient(180deg, #064E3B 0%, #065F46 55%, #047857 100%);
}
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.12); }
.sb-icon {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: none;
}

/* 分组小字标题（概览/业务/财务/系统） */
.nav-cap {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: rgba(255,255,255,.42); padding: 14px 14px 6px;
  white-space: nowrap;
}
.sidebar.collapsed .nav-cap { display: none; }

/* 菜单项：圆角加大，选中项白底药丸 + 绿字 */
.sidebar-nav a, .sidebar-nav .group-label {
  padding: 8px 10px; border-radius: 10px; color: rgba(255,255,255,.78);
  font-size: 13.5px;
}
.sidebar-nav a:hover, .sidebar-nav .group-label:hover {
  background: rgba(255,255,255,.10); color: #fff;
}
.sidebar-nav a.active {
  background: #fff; color: #047857; font-weight: 700;
  box-shadow: 0 2px 8px rgba(6,78,59,.25);
}
.sidebar-nav a.active .arrow { color: #047857; }

/* 子菜单：左竖线缩进样式 */
.sidebar-sub {
  padding-left: 0;
  margin: 2px 0 4px 19px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.sidebar-sub a {
  font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
  color: rgba(255,255,255,.62);
}
.sidebar-sub a:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-sub a.active {
  background: rgba(255,255,255,.16); color: #fff;
  font-weight: 600; box-shadow: none;
}

/* 「用户充值端」固定侧边栏底部高亮按钮 */
.sidebar-foot {
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sidebar-foot .recharge-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff; font-size: 13.5px; font-weight: 600;
  text-decoration: none; margin-top: 0; transition: background .15s;
}
.sidebar-foot .recharge-link:hover { background: rgba(255,255,255,.2); }
.sidebar-foot .recharge-link i { font-style: normal; font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-foot .recharge-link small { margin-left: auto; font-size: 10px; opacity: .7; }
.sidebar.collapsed .sidebar-foot span,
.sidebar.collapsed .sidebar-foot small { display: none; }
.sidebar-toggle { border-top: 1px solid rgba(255,255,255,.12); }

/* ═══ 首页看板 v2（.page-dashboard-v2 作用域）═══ */
.page-dashboard-v2 .card {
  background: var(--card); border-radius: 16px; padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(6,78,59,.06), 0 4px 14px rgba(6,78,59,.05);
}

/* Hero 绿色渐变条 */
.page-dashboard-v2 .hero {
  background: linear-gradient(135deg, #047857 0%, #059669 55%, #10B981 100%);
  color: #fff; border-radius: 18px; padding: 24px 26px; margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(5,150,105,.25);
}
.page-dashboard-v2 .hero h1 { font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.page-dashboard-v2 .hero .date { font-size: 13px; opacity: .92; margin-top: 4px; }
.page-dashboard-v2 .chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.page-dashboard-v2 .chip {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: 4px 12px; font-size: 12px;
}

/* 区块标题 */
.page-dashboard-v2 .stitle { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.page-dashboard-v2 .stitle .bar { width: 5px; height: 20px; border-radius: 3px; background: #059669; }
.page-dashboard-v2 .stitle h2 { font-size: 16px; font-weight: 700; color: #064E3B; }
.page-dashboard-v2 .stitle .sub { font-size: 12px; color: #9CA3AF; margin-left: auto; display: flex; align-items: center; }

/* KPI 八卡：桌面 4 列 × 2 行 */
.page-dashboard-v2 .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.page-dashboard-v2 .kpi {
  background: var(--card); border-radius: 16px; padding: 15px 10px; text-align: center;
  box-shadow: 0 1px 3px rgba(6,78,59,.06), 0 4px 14px rgba(6,78,59,.05);
  border-top: 4px solid #10B981;
}
.page-dashboard-v2 .kpi.mint { border-top-color: #34D399; }
.page-dashboard-v2 .kpi .v {
  font-size: 21px; font-weight: 800; color: #047857;
  font-variant-numeric: tabular-nums;
}
.page-dashboard-v2 .kpi .cmp { font-size: 11px; font-weight: 700; margin-top: 2px; }
.page-dashboard-v2 .cmp.up { color: #DC2626; }
.page-dashboard-v2 .cmp.down { color: #059669; }
.page-dashboard-v2 .cmp.flat { color: #9CA3AF; }
.page-dashboard-v2 .kpi .pv {
  font-size: 11px; color: #9CA3AF; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.page-dashboard-v2 .kpi .l { font-size: 12px; color: #6B7280; margin-top: 5px; }
.page-dashboard-v2 .kpi.kpi-center { display: flex; flex-direction: column; justify-content: center; gap: 5px; }

/* 四维卡片（谷平细分 / 场站排行共用） */
.page-dashboard-v2 .quad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.page-dashboard-v2 .qcard {
  background: #F8FBF9; border: 1px solid #E3EDE7;
  border-radius: 12px; padding: 13px 15px;
}
.page-dashboard-v2 .qcard h3 { font-size: 13px; font-weight: 700; color: #064E3B; margin-bottom: 10px; }
.page-dashboard-v2 .qcard .sub2 { float: right; font-size: 11px; color: #059669; font-weight: 600; }
.page-dashboard-v2 .qrow2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.page-dashboard-v2 .qrow2:last-child { margin-bottom: 0; }
.page-dashboard-v2 .qn {
  width: 96px; flex: none; color: #4B5563;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-dashboard-v2 .qt2 { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.page-dashboard-v2 .qf  { height: 7px; border-radius: 99px; background: linear-gradient(90deg, #6EE7B7, #10B981); }
.page-dashboard-v2 .qfb { height: 7px; border-radius: 99px; background: linear-gradient(90deg, #BFDBFE, #93C5FD); }
.page-dashboard-v2 .qv {
  width: 80px; flex: none; text-align: right; font-weight: 700;
  color: #047857; font-variant-numeric: tabular-nums;
}
.page-dashboard-v2 .qvp { display: block; font-size: 10px; color: #93C5FD; font-weight: 400; }
.page-dashboard-v2 .qn.pk { width: 26px; flex: none; color: #059669; font-weight: 700; }
.page-dashboard-v2 .qn.pktime { width: 104px; flex: none; color: #4B5563; white-space: nowrap; }

/* 图例 */
.page-dashboard-v2 .lgd { font-size: 12px; color: #6B7280; }
.page-dashboard-v2 .lgd .g { color: #059669; }
.page-dashboard-v2 .lgd .b { color: #93C5FD; margin-left: 10px; }

/* 「季节推定」黄标 */
.page-dashboard-v2 .tag-fallback {
  background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A;
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600;
}

/* 用电趋势 CSS 柱状图：绿色渐变、底部严格对齐 */
.page-dashboard-v2 .trend {
  display: flex; gap: 2px; height: 190px;
  padding: 4px 2px 0; border-bottom: 2px solid #E5E7EB;
}
.page-dashboard-v2 .tbar {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  min-width: 0; height: 100%;
}
.page-dashboard-v2 .tvv {
  line-height: 12px; font-size: 8px; color: #047857;
  font-weight: 700; white-space: nowrap;
}
.page-dashboard-v2 .tbw {
  flex: 1; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
}
.page-dashboard-v2 .tb {
  width: 100%; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #34D399, #059669);
}
.page-dashboard-v2 .tl {
  height: 16px; line-height: 16px; font-size: 9px;
  color: #9CA3AF; white-space: nowrap;
}

/* tabs（看板内局部样式，不影响全局 .tabs） */
.page-dashboard-v2 .tabs { display: inline-flex; background: #EDF3EF; border-radius: 10px; padding: 3px; gap: 2px; }
.page-dashboard-v2 .tab { font-size: 12px; padding: 4px 14px; border-radius: 8px; color: #6B7280; cursor: pointer; }
.page-dashboard-v2 .tab.active {
  background: #fff; color: #047857; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* 加载 / 空态 / 页脚 */
.page-dashboard-v2 .v2-note { text-align: center; color: #9CA3AF; font-size: 13px; padding: 24px 0; }
.page-dashboard-v2 .footer { text-align: center; font-size: 11px; color: #9CA3AF; padding: 4px 0; line-height: 1.8; }

/* 暗色模式：内容区沿用现有暗色变量，仅微调 v2 新增元素 */
body.dark .page-dashboard-v2 .stitle h2 { color: #6EE7B7; }
body.dark .page-dashboard-v2 .qcard { background: #1e293b; border-color: #334155; }
body.dark .page-dashboard-v2 .qcard h3 { color: #6EE7B7; }
body.dark .page-dashboard-v2 .kpi .v { color: #34D399; }
body.dark .page-dashboard-v2 .tabs { background: #1e293b; }
body.dark .page-dashboard-v2 .tab.active { background: #334155; color: #6EE7B7; }
body.dark .page-dashboard-v2 .trend { border-bottom-color: #334155; }

/* ═══ 移动端（断点 760px，参照 mockup @media 规则）═══ */
@media (max-width: 760px) {
  .page-dashboard-v2 .kpis { grid-template-columns: repeat(2, 1fr); }
  .page-dashboard-v2 .quad { grid-template-columns: 1fr; }
  .page-dashboard-v2 .hero { padding: 18px 16px; }
  .page-dashboard-v2 .hero h1 { font-size: 18px; }
  .page-dashboard-v2 .kpi .v { font-size: 18px; }
  .page-dashboard-v2 .qn { width: 72px; }
  .page-dashboard-v2 .qv { width: 64px; }
}