/* === V30.1: 主界面白底+橙 覆盖层 (D版简洁风格) ===
   说明：仅在 main.css 之后覆盖呈现层，不动 main.css / app.js / HTML 结构。
   风格：参考 D版(dash-d-gray)——白底、浅灰边框、无彩色装饰、克制排版。
   撤回：删除 index.html 中本文件引用 + 删除本文件即可，零影响回归 V28.1 浅色版。 */
:root {
  --bg: #FAFAFA;
  --card: #FFFFFF;
  --border: #E8E8E6;
  --text: #1D1D1F;
  --text-light: #86868B;
  --accent: #E8530A;        /* 传发橙：按钮/数值/导航激活 */
  --accent-light: #F4731E;
  --accent-soft: #FCEDE4;   /* 橙浅底 */
}

/* ========== SVG 图标统一尺寸（替换 emoji） ========== */
.icon-svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  flex-shrink: 0;
}
.search-box .icon-svg {
  width: 16px;
  height: 16px;
  color: #9CA3AF;
}
.nav-icon .icon-svg {
  width: 18px;
  height: 18px;
}

/* ========== 背景 & 全局 ========== */
body { background: var(--bg); }

/* ========== 侧边栏（D版浅灰） ========== */
.sidebar {
  background: #F7F7F5;
  color: #1D1D1F;
  border-right: 1px solid #E8E8E6;
}
.sidebar-header { border-bottom-color: #E8E8E6; }
.sidebar-header .logo {
  color: #1D1D1F;
  font-size: 15px;           /* 调小，避免换行 */
  white-space: nowrap;       /* 强制一行显示 */
  letter-spacing: 0.3px;
}
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

.nav-group-title { color: #4E5969; font-weight: 700; }   /* 加深，提升可读性 */
.nav-group-title:hover { background: #EFEFED; color: #1D1D1F; }
.nav-subgroup-title { color: #6B7280; font-weight: 600; } /* 加深 */
.nav-subgroup-title:hover { background: #EFEFED; color: #1D1D1F; }
.nav-item { color: #4E5969; }                            /* 同步加深 */
.nav-item:hover { background: #EFEFED; color: #1D1D1F; }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ========== 顶栏 ========== */
.topbar {
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E6;
}
.topbar .page-title { color: var(--accent); }
.topbar .search-box {
  background: #FAFAFA;
  border: 1px solid #E8E8E6;
  border-radius: 8px;
}
.topbar .user-avatar { background: var(--accent); }

/* ========== KPI 卡片（D版简洁风） ========== */

/* kpi-accent 改为顶部小色点 */
.kpi-card .kpi-accent {
  display: block !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  margin-bottom: 6px !important;
}

/* 统一卡片样式：白底 + 浅边框 + 微阴影，Steep 方向排列 */
.kpi-card {
  border: 1px solid #E8E8E6 !important;
  border-top: none !important;          /* 覆盖模块红绿灯的 border-top:3px solid 彩色 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
  padding: 8px 10px !important;         /* 给 sparkline 留一点空间 */
  display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
  overflow: visible !important;
}
.kpi-card .kpi-icon { display: none !important; }
.kpi-card .kpi-value { line-height: 1.1 !important; font-size: 24px !important; color: #1f1f1f !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.kpi-card .kpi-label { margin-top: 2px !important; font-size: 12px !important; color: #8a8f98 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.kpi-card .kpi-spark { margin-top: auto; padding-top: 6px; }

/* Steep 风格 KPI 卡（dashboard 第二行，仅作用于该区域，不影响其他页 kpi-card） */
#dashKpiRow .kpi-card {
  display: flex !important; flex-direction: column; justify-content: flex-start;
  padding: 14px 16px !important; border-top: none !important; overflow: visible !important;
}
#dashKpiRow .kpi-value { font-size: 26px !important; font-weight: 700; color: #1f1f1f; line-height: 1.1; margin: 2px 0 4px; white-space: nowrap; }
#dashKpiRow .kpi-label { font-size: 12px; color: #8a8f98; font-weight: 500; }
#dashKpiRow .kpi-mod { font-size: 11px; font-weight: 600; }
#dashKpiRow .kpi-delta-mini { font-size: 12.5px; font-weight: 600; margin: 0; }
#dashKpiRow .kpi-delta-mini.up { color: #16a34a; }
#dashKpiRow .kpi-delta-mini.down { color: #dc2626; }
#dashKpiRow .kpi-delta-mini.flat { color: #8a8f98; }
#dashKpiRow .kpi-vs { font-weight: 400; color: #aab; font-size: 11px; }
.kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: none !important;           /* 去掉悬浮上移效果（D版更稳重） */
}

/* KPI 卡片趋势文字统一弱化 */
.kpi-card .kpi-icon { color: var(--text-light); font-size: 24px; }
.kpi-card .kpi-trend { font-size: 12px; color: var(--text-light); }
.kpi-trend.up { color: var(--accent); }        /* 统一橙，不用绿/红 */
.kpi-trend.down { color: var(--accent); }

/* 模块红绿灯卡片内部：进度条统一浅色，标签弱化 */
.kpi-card .light-bar-track {
  background: #F0F0EE !important;
  height: 6px !important;
  border-radius: 3px;
}
.kpi-card .light-bar-fill {
  background: var(--accent) !important;    /* 进度条统一橙色，不再红/黄/绿 */
  border-radius: 3px;
}
.kpi-card .light-status-dot { display: none !important; }       /* 隐藏圆点指示器 */
.kpi-card .light-status-text {
  font-size: 11px;
  color: var(--text-light) !important;     /* 标签弱化灰色，不再红/黄/绿字 */
  padding: 2px 8px;
  background: #F5F5F3;
  border-radius: 4px;
}
/* 模块名称和指标名 */
.kpi-card .module-name { font-size: 13px; font-weight: 600; color: var(--text); }
.kpi-card .metric-name { font-size: 12px; color: var(--text-light); }
.kpi-card .target-val, .kpi-card .actual-val { font-size: 13px; color: var(--text); }
.kpi-card .achieve-rate { font-size: 12px; color: var(--text-light); }

/* ========== 图表卡片 ========== */
.chart-card {
  border: 1px solid #E8E8E6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.chart-card .chart-title { color: var(--text); font-weight: 600; }

/* ========== 数据表 ========== */
.data-table thead th {
  background: #F7F7F5 !important;         /* 表头改为浅灰底（非橙底），D版克制风格 */
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid #E8E8E6;
  padding: 12px 12px;                     /* 与加大后的td对齐 */
}
.data-table tbody td {
  padding: 14px 12px;                     /* 行间距加大 */
  border-bottom: 1px solid #F4F4F2;
}

/* 模块权限分配：图标放大 */
.data-table tbody td .icon-svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

/* 角色权限矩阵：操作列最小宽度 + 按钮强制不换行 */
.data-table thead th:last-child,
.data-table tbody td:last-child {
  white-space: nowrap;
  min-width: 100px;
}
/* 操作列按钮紧凑化（与 main.css v25 同步：详情/编辑/领用 等按钮压扁到 22px，匹配行高） */
.data-table tbody td:last-child .btn-outline,
.data-table tbody td:last-child .btn {
  white-space: nowrap !important;
  font-size: 12px !important;
  padding: 1px 8px !important;
  line-height: 1.5 !important;
  min-height: 22px !important;
  border-radius: 4px !important;
}

/* ========== 预警卡片（去掉彩色左边框） ========== */
.alert-card {
  border: 1px solid #E8E8E6 !important;
  border-left: 1px solid #E8E8E6 !important;  /* 覆盖 alert-high/mid/low 的彩色左边框 */
}
.alert-high, .alert-mid, .alert-low {
  border-left-color: #E8E8E6 !important;
}

/* ========== 按钮 / 筛选 ========== */
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-light); }
.filter-bar .btn-primary { background: var(--accent); }
.filter-bar select:focus, .filter-bar input:focus { border-color: var(--accent); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ========== 分区标题 ========== */
.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

/* ========== 同步时间标签弱化 ========== */
.sync-time {
  font-size: 11px;
  color: #C0C0BC;
}