/* ============================================================
   产线项目管理 · 主题与新增组件
   在 style.css 之后加载，做两件事：
     ① 把品牌色统一到「中车红」，并修掉 style.css 里写死的旧蓝色
     ② 新增：顶部导航、统计概览独立页、右侧待办栏与任务日历
   ============================================================ */

/* ---------- ① 旧蓝色遗留处统一为中车红 ---------- */
.input:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(192, 17, 26, .12); }
table.grid th {
  background: #fbf1f2;
  color: var(--brand-dark);
  border-bottom-color: var(--brand-line);
}
table.grid tbody tr:hover td { background: #fdf7f7; }
.stage-grid td.cell-edit input:focus,
.stage-grid td.cell-edit textarea:focus,
.stage-grid td.cell-edit select:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(192, 17, 26, .1); }
.tree-input:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(192, 17, 26, .1); }
.panel-title h2 { color: var(--brand-dark); }
.foldbar-btn { color: var(--brand-dark); }
.kpi .kpi-value { color: var(--brand-dark); }
.kpi.accent-doing .kpi-value { color: var(--doing); }
.kpi.accent-done .kpi-value { color: var(--ok); }
.kpi.accent-soon .kpi-value { color: var(--key); }
.kpi.accent-over .kpi-value { color: var(--danger); }
.btn-convert { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.btn-convert:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }

/* 卡片质感 */
.panel { border-radius: var(--radius); }
.kpi { border-radius: var(--radius); transition: transform .12s ease, box-shadow .12s ease, border-color .12s; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); border-color: var(--brand-line); }
.kpi.clickable::after { color: var(--brand); }
.type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }

/* ---------- ② 顶部导航（项目管理 / 统计概览） ---------- */
.topnav { display: flex; gap: 4px; margin-left: 14px; }
.nav-item {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 17px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}
.nav-item:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.nav-item.active {
  background: #fff;
  color: var(--brand);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}

/* ---------- ③ 主视图：左内容 + 右侧栏 ---------- */
.view-split { display: flex; gap: 14px; align-items: stretch; min-height: 0; }
.split-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.split-main > .panel-fill { flex: 1 1 auto; min-height: 0; }
.split-side {
  flex: 0 0 322px;
  width: 322px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 2px;
}
.side-card { border-radius: var(--radius); flex: 0 0 auto; }
.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.side-head h3 { font-size: 13.5px; color: var(--brand-dark); display: flex; align-items: center; gap: 6px; }
.side-badge {
  display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center;
}
.side-body { padding: 9px; max-height: 300px; overflow-y: auto; }
.side-empty { padding: 20px 10px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; }
.side-more { padding: 7px; text-align: center; color: var(--muted); font-size: 11.5px; }

/* 待办条目 */
.todo-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.todo-item:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.ti-icon {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand);
}
.ti-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ti-main b { font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.ti-main span { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.ti-approve { border-left-color: var(--key); }
.ti-approve .ti-icon { background: var(--key-soft); color: var(--key); }
.ti-overdue { border-left-color: #d6453a; }
.ti-overdue .ti-icon { background: var(--danger-soft); color: var(--danger); }
.ti-soon { border-left-color: #e0a01e; }
.ti-soon .ti-icon { background: var(--key-soft); color: var(--key); }
.ti-fill, .ti-progress { border-left-color: var(--doing); }
.ti-fill .ti-icon, .ti-progress .ti-icon { background: var(--doing-soft); color: var(--doing); }

/* 日历 */
.cal-nav { display: inline-flex; align-items: center; gap: 2px; }
.cal-month { font-size: 12px; color: var(--text-2); min-width: 74px; text-align: center; }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding: 9px 12px 0; font-size: 11px; color: var(--text-2);
}
.cal-legend .lg {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; padding: 2px 5px; border-radius: 6px;
  font: inherit; font-size: 11px; color: var(--text-2); cursor: pointer;
}
.cal-legend .lg:hover { background: var(--brand-soft); }
.cal-legend .lg.on { background: #eef2f8; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot.cal-over { background: #d6453a; }
.dot.cal-soon { background: #e0a01e; }
.dot.cal-task { background: #2f7cc4; }
.dot.cal-node { background: #9aa3b2; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head { padding: 7px 8px 2px; }
.cal-head span { text-align: center; font-size: 11px; color: var(--muted); }
.cal-grid { padding: 0 8px 8px; gap: 2px; }
.cal-cell {
  min-height: 36px; padding: 3px 2px;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  font: inherit; cursor: pointer; transition: background .12s, border-color .12s;
}
.cal-cell.blank { visibility: hidden; }
.cal-cell:hover { background: var(--brand-soft); }
.cal-cell.has { background: #fafbfc; border-color: var(--line); }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--brand-2); }
.cal-cell.sel { background: var(--brand-soft); border-color: var(--brand-2); }
.cal-num { font-size: 11.5px; color: var(--text-2); line-height: 1.2; }
.cal-cell.has .cal-num { color: var(--text); font-weight: 600; }
.cal-dots { display: flex; gap: 2px; min-height: 7px; }
.cal-day { padding: 8px 11px 12px; border-top: 1px solid var(--line); }
.cal-day-head { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.cal-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; padding: 6px 9px; margin-bottom: 5px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 7px; background: #fff; font: inherit; font-size: 12px; cursor: pointer;
}
.cal-item:hover { background: var(--brand-soft); border-color: var(--brand-line); }
.cal-item span { font-size: 11px; color: var(--muted); }
.cal-item.cal-over { border-left-color: #d6453a; }
.cal-item.cal-soon { border-left-color: #e0a01e; }
.cal-item.cal-task { border-left-color: #2f7cc4; }
.cal-item.cal-node { border-left-color: #9aa3b2; }

/* ---------- ④ 统计概览独立页 ---------- */
#viewStats { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.stats-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 2px 2px 0;
}
.stats-head h2 { font-size: 18px; color: var(--brand-dark); letter-spacing: .2px; }
.stats-head p { margin: 3px 0 0; }
.stats-bar { background: transparent; border: 0; box-shadow: none; padding: 0 2px; }
.stats-bar .foldbar-summary { white-space: normal; font-size: 12.5px; line-height: 2; }
.stats-charts { flex: 0 0 auto; }
.stats-blocks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px; padding: 15px 17px 18px;
}
.stat-block h4 { margin: 0 0 11px; font-size: 13px; color: var(--brand-dark); }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row {
  display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 9px;
  width: 100%; padding: 3px 5px; border: 0; border-radius: 7px;
  background: transparent; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
}
.bar-row:hover { background: var(--brand-soft); }
.bar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: block; height: 9px; border-radius: 6px; background: #eef0f4; overflow: hidden; }
.bar-track.big { height: 12px; margin: 9px 0 12px; }
.bar-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.bar-value { text-align: right; font-weight: 700; color: var(--brand-dark); }
.stat-big { font-size: 26px; font-weight: 700; color: var(--brand-dark); line-height: 1.2; }
.stat-big span { font-size: 13px; font-weight: 500; color: var(--muted); }
.stat-rows { display: flex; flex-wrap: wrap; gap: 9px; }
.stat-link {
  border: 1px solid var(--brand-line); background: #fff; color: var(--brand);
  border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12px; cursor: pointer;
}
.stat-link:hover { background: var(--brand-soft); }

/* ---------- ⑤ 个人便签（手动添加，只有自己可见）：统一紫色，与系统自动生成的项区分 ---------- */
.todo-item.ti-note { border-left-color: #7c3aed; background: #fbf7ff; }
.todo-item.ti-note .ti-icon { background: #f0e6ff; color: #6d28d9; }
.todo-item.ti-note:hover { background: #f5edff; border-color: #d8c7f7; }
.todo-item .todo-x {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  border: 0; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer;
}
.todo-item .todo-x:hover { background: #f0e6ff; color: #6d28d9; }
.side-acts { display: inline-flex; align-items: center; gap: 2px; }
#btnTodoAddNote { color: #7c3aed; font-weight: 700; }
#btnTodoAddNote:hover { color: #5b21b6; }
.todo-mine.on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.note-add {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px; border-bottom: 1px dashed #d8c7f7; background: #fcfaff;
}
.note-add .input { flex: 1 1 150px; min-width: 0; font-size: 12.5px; padding: 5px 8px; }
.note-add .note-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--muted);
}
.note-add .note-date input {
  font: inherit; font-size: 11.5px; padding: 3px 4px;
  border: 1px solid var(--line-strong); border-radius: 6px;
}
.note-proj-scope { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.note-proj-scope button {
  font: inherit; font-size: 11px; padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted); cursor: pointer;
}
.note-proj-scope button:hover { background: var(--brand-soft); }
.note-proj-scope button.on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.dot.cal-note { background: #7c3aed; }
.cal-item.cal-note {
  border-left-color: #7c3aed; background: #fbf7ff; color: #5b21b6;
  display: flex; flex-direction: row; align-items: center; gap: 6px; cursor: default;
}
.cal-item.cal-note .cal-note-x {
  margin-left: auto; border: 0; background: transparent; color: #8b6bc4;
  font-size: 12px; padding: 1px 6px; border-radius: 6px; cursor: pointer;
}
.cal-item.cal-note .cal-note-x:hover { background: #f0e6ff; color: #5b21b6; }
.cal-day .note-add { border-bottom: 0; border-top: 1px dashed #d8c7f7; padding: 8px 0 0; background: transparent; }

/* 便签原地编辑 */
.note-edit { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.note-edit .input { font-size: 12.5px; padding: 5px 8px; }
.note-btns { display: flex; gap: 6px; }
.todo-item.ti-note.editing { align-items: stretch; cursor: default; background: #fbf7ff; }
.cal-item.cal-note.editing { display: block; cursor: default; }
.cal-item.cal-note .note-text { flex: 1 1 auto; min-width: 0; word-break: break-all; }
.cal-item.cal-note .note-proj { font-size: 10.5px; color: #8b6bc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
/* 便签「关联：项目 · 节点」可点击链接：点它跳到项目并定位到那一行 */
.todo-item .note-link, .cal-item.cal-note .note-link {
  display: inline-block; font-size: 10.5px; color: #6d28d9;
  cursor: pointer; text-decoration: underline dotted;
}
.todo-item .note-link { margin-top: 2px; }
.cal-item.cal-note .note-link {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.note-link:hover { color: #7c3aed; }

/* 快捷键说明表（按 ? 弹出） */
.keys-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.keys-tbl td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.keys-tbl td:first-child { width: 34%; white-space: nowrap; }
.keys-tbl kbd {
  display: inline-block; padding: 1px 6px; border: 1px solid var(--line-2, var(--line));
  border-bottom-width: 2px; border-radius: 5px; background: var(--bg-2, #fafafa);
  font: inherit; font-size: 12px; color: var(--text);
}

/* 便签语音输入：手机上点一下就能说，说完自动建便签 */
.voice-btn { white-space: nowrap; }
.voice-btn.rec { color: #fff; background: var(--brand); border-color: var(--brand);
  animation: voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 17, 26, .45); }
  50% { box-shadow: 0 0 0 6px rgba(192, 17, 26, 0); }
}
@media (max-width: 600px) {
  /* 手机上麦克风是主要入口，给足触摸面积 */
  .voice-btn { min-height: 40px; padding-left: 14px; padding-right: 14px; }
}

/* 便签的「进展流水」：一条备忘分批记录的日志，收起时只占一行 */
.note-prog-bar { margin-top: 3px; }
.note-prog-toggle {
  border: 1px solid #ddc7f7; background: #fbf7ff; color: #6d28d9; font: inherit; font-size: 11px;
  padding: 1px 8px; border-radius: 20px; cursor: pointer; text-align: left;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-prog-toggle:hover { background: #f0e6ff; }
.note-prog-toggle b { color: #5b21b6; }
.note-prog.open { margin-top: 4px; width: 100%; flex-basis: 100%; min-width: 0; }
.cal-item.cal-note { flex-wrap: wrap; }        /* 进展区要另起一行 */
.np-list { border-left: 2px solid #e5d3fb; padding-left: 7px;
  display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.np-row { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; }
.np-d { color: #8b6bc4; flex: none; font-size: 10.5px; }
.np-t { color: #3b2f52; word-break: break-all; }
.np-x { margin-left: auto; flex: none; border: 0; background: transparent; color: #b9a3dd;
  cursor: pointer; font-size: 11px; padding: 0 4px; border-radius: 5px; }
.np-x:hover { background: #f0e6ff; color: #7c3aed; }
.np-empty { font-size: 11px; color: var(--muted); }
.np-add { display: flex; gap: 5px; }
.np-add .input { flex: 1; min-width: 0; font-size: 12px; padding: 4px 7px; }


/* ================= 统计概览：迷你图表 =================
   全部手写（环形用 SVG、趋势条用 div+CSS），不引图表库、不依赖外网 CDN，
   因此内网 / 离线打开也不会出现空白图表。 */
.stat-chart { display: flex; align-items: center; gap: 12px; }
.stat-chart-side { flex: 1; min-width: 0; }
.donut { width: 82px; height: 82px; flex: none; }
.donut-bg { fill: none; stroke: var(--line); }
.donut-fg { fill: none; stroke: var(--brand); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 40px 40px;
  transition: stroke-dashoffset .6s ease; }
.donut-t { text-anchor: middle; font-size: 16px; font-weight: 700; fill: var(--text); }
.donut-s { text-anchor: middle; font-size: 9px; fill: var(--muted); }
.stat-trend { margin: 8px 0 2px; }
.stat-trend-h { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 78px; }
.sp-col { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; min-width: 0; }
.sp-bar { width: 100%; max-width: 16px; background: var(--brand); opacity: .82;
  border-radius: 3px 3px 0 0; min-height: 3px; transition: height .4s ease; }
.sp-bar.sp-zero { background: var(--line-strong); opacity: .45; }
.sp-v { font-size: 9.5px; color: var(--text-2); font-weight: 700; line-height: 1; margin-bottom: 2px; }
.sp-x { font-size: 9.5px; color: var(--muted); line-height: 1; margin-top: 4px; white-space: nowrap; }
.bar-value i { font-style: normal; color: var(--muted); font-size: 10px; margin-left: 5px; }

/* ================= 手机（≤600px） =================
   桌面那套三列矩阵、宽表格在手机上只能挤成一团，这里整体改成单列 + 横向滚动。 */
@media (max-width: 600px) {
  /* 顶栏：品牌压缩，导航与操作区各自横向滚动，不再换行堆叠成一坨 */
  .topbar { padding: 8px 10px; gap: 8px; }
  .brand-text h1 { font-size: 15px; }
  .brand-text p { display: none; }
  .brand-mark { width: 30px; height: 30px; font-size: 12px; }
  .topnav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-item { white-space: nowrap; flex: none; }
  .topbar-actions { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions .btn { flex: none; white-space: nowrap; }
  /* 导入 / 导出备份是低频操作（且手机上没有文件管理场景），藏起来让操作行更短 */
  #btnImport, #btnExportJson { display: none; }
  .topbar-sep, .save-state { display: none; }

  /* 统计页首行：待办 / 日历各占一整行，高度不再被脚本拉平（见 app.js isNarrow） */
  .stats-top2 { grid-template-columns: 1fr !important; gap: 10px; }
  .top-col { min-width: 0; }
  #statsSplit .panel { max-height: none !important; }

  /* 矩阵：单列铺开；项目表横向滚动（列太多，卡片化反而更难读） */
  .stat-matrix { grid-template-columns: 1fr !important; grid-auto-flow: row !important; }
  .mx-col { min-width: 0; }
  .mx-tblwrap { max-height: none !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mx-table { min-width: 520px; }
  .stat-extras { grid-template-columns: 1fr !important; }
  .mx-sum-row { grid-template-columns: 1fr !important; }

  /* 明细弹窗：表格横向滚动，别把文字挤成竖排 */
  .modal .ver-table { min-width: 560px; }
  .modal-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 图表尺寸收一点 */
  .donut { width: 68px; height: 68px; }
  .spark { height: 66px; }

  /* 触摸友好：按钮最小 40px 高，去掉点击时的蓝框 */
  .btn, .nav-item, .icon-btn { min-height: 40px; }
  * { -webkit-tap-highlight-color: transparent; }

  /* 安全区（iPhone 刘海 / 底部横条） */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
}

/* ---------- 窄屏：右栏落到下方 ---------- */
@media (max-width: 1180px) {
  .view-split { flex-direction: column; }
  .split-side { flex: 1 1 auto; width: 100%; max-height: none; }
}

/* ============================================================
   ⑥ UI 统一层（本轮）
   原则：
     ① 饱和色只留给「状态」：已拖期红 / 风险预警黄 / 已完成绿 / 进行中蓝；
     ② 项目名称、类型、图表、链接等回归中性灰，不再一片红；
     ③ 按钮 / 输入 / 卡片的圆角、内边距、边框统一成一套规格。
   ============================================================ */

/* ---- 1) 项目名称：中性深色 + 虚线下划线，悬停才上品牌色 ---- */
.p-link { color: var(--text); border-bottom-color: var(--line-strong); }
.p-link:hover { color: var(--brand); border-bottom-color: var(--brand-2); }

/* ---- 2) 图表条与数值回归中性（原来关键节点 / 按负责人分布 全是亮红） ---- */
.bar-fill { background: linear-gradient(90deg, #9aabc0, #728aa5); }
.bar-value, .stat-big { color: var(--text); }
.stat-link { border-color: var(--line-strong); color: var(--text-2); }
.stat-link:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-soft); }

/* ---- 3) 项目类型标签统一成中性描边（售前/招标/执行 不再各借一个状态色） ---- */
.tag-type, .tag-type-售前, .tag-type-招标, .tag-type-执行, .tag-type-售后 {
  background: #f5f6f8;
  color: var(--text-2);
  border-color: var(--line-strong);
  font-weight: 600;
}

/* ---- 4) 面板 / 弹窗里的次级按钮统一成中性，不再红字 ---- */
.panel .btn-ghost, .modal .btn-ghost, .stats-head .btn-ghost, .side-card .btn-ghost {
  background: #fff;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
}
.panel .btn-ghost:hover:not(:disabled),
.modal .btn-ghost:hover:not(:disabled),
.stats-head .btn-ghost:hover:not(:disabled),
.side-card .btn-ghost:hover:not(:disabled) {
  background: #f5f6f8; color: var(--text); border-color: #c6ccd6;
}
.panel .btn-ghost.danger, .modal .btn-ghost.danger { color: var(--danger); border-color: #e7c6c2; }
.panel .btn-ghost.danger:hover:not(:disabled),
.modal .btn-ghost.danger:hover:not(:disabled) { background: #fdf1f0; border-color: #dda9a3; color: var(--danger); }

/* ---- 5) 顶栏按钮再挤一点：1680 宽也能一行放下 ---- */
.topbar-actions { gap: 6px; }
.topbar-actions .btn { padding: 6px 11px; font-size: 13px; }

/* ---- 6) 搜索框：提示文字要完整显示（原来被切掉）
       注意：<input> 不会像 <select> 那样按内容自适应，只给 max-width 是没用的，
       必须显式给 width，否则它只有浏览器默认的十几字符宽。 ---- */
.filters #fKeyword { flex: 0 1 auto; width: 300px; min-width: 180px; max-width: 300px; }

/* ---- 7) 圆角规格统一：卡片 10、控件 8、小标签胶囊 ---- */
.input, textarea.input, select.input, .note-add .note-date input { border-radius: 8px; }
.mx-col, .side-card, .panel { border-radius: 10px; }
.btn { border-radius: 8px; }

/* ---------- 推进表「显示列」下拉（个人偏好：勾掉就收起来） ---------- */
.colpick-wrap { position: relative; display: inline-flex; }
.colpick {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 158px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
  text-align: left;
}
.colpick label {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 7px;
  font-size: 12.5px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.colpick label:hover { background: #f4f6f9; }
.colpick label input { margin: 0; }
.colpick-reset {
  display: block; width: 100%; margin-top: 4px; padding: 6px 8px;
  border: 0; border-top: 1px solid var(--line); background: transparent;
  font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; text-align: left;
  border-radius: 0 0 6px 6px;
}
.colpick-reset:hover { color: var(--brand); background: var(--brand-soft); }

/* ---------- 统计页首行：左列可纵向叠两张卡片（待办事项 + 我的待办），右列任务日历 ---------- */
.stats-top2 > .top-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stats-top2 > .top-col > .panel { flex: 0 0 auto; }

/* ---------- 表格全屏：把「工具栏 + 表格」的面板整块放大 ----------
   :fullscreen = 浏览器真全屏；.pm-fs = 浏览器不支持时的兜底（固定铺满窗口）。
   表格区在 .panel-fill 下已经是 flex:1 + 独立滚动，这里只补背景与边距。 */
.panel-fill:fullscreen,
.panel-fill:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.panel.pm-fs {
  position: fixed;
  inset: 0;
  /* 压在顶栏（40）之上、弹窗（60+）与提示（90）之下：全屏时弹窗照常显示 */
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.panel-fill:fullscreen .table-wrap,
.panel.pm-fs .table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
/* 全屏按钮：激活时高亮，提示"再点一次即可退出" */
.fs-btn.active { color: var(--brand); border-color: var(--brand-2); background: var(--brand-soft); }

/* ---------- 点亮世界计划 ---------- */
.light-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 4px 16px 8px; }
.light-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 4px; background: #fbfcfe; }
.light-title { margin: 0 0 6px; font-size: 14px; color: var(--brand); }
.light-map { width: 100%; overflow: hidden; }
.light-svg { width: 100%; height: auto; display: block; }
.light-svg path { transition: fill .18s ease, filter .18s ease; cursor: default; }
.light-svg path:hover { filter: brightness(.94); }
.light-legend { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.light-legend .lg-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.light-legend .lg-box {
  min-width: 24px; padding: 1px 5px; border-radius: 5px; font-size: 11px;
  text-align: center; color: #fff; border: 1px solid rgba(0, 0, 0, .06);
}
.light-legend .lg-gold { color: #4a3405; font-weight: 700; }
.light-legend .lg-none { color: var(--muted); }
.light-tip {
  position: fixed; z-index: 10000; pointer-events: none;
  background: rgba(23, 32, 46, .94); color: #fff; border-radius: 7px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.5; max-width: 420px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.light-tip b { display: block; font-size: 13.5px; margin-bottom: 1px; }
.light-tip span { color: #e8edf5; }
.light-tip .light-tip-sum { color: #e8edf5; margin-top: 2px; }
.light-tip .light-tip-tb { margin-top: 6px; border-collapse: collapse; width: 100%; }
.light-tip .light-tip-tb th, .light-tip .light-tip-tb td {
  border-top: 1px solid rgba(255, 255, 255, .18); padding: 4px 8px 4px 0;
  text-align: left; font-size: 12px; vertical-align: top;
}
.light-tip .light-tip-tb th { color: #9fb0c8; font-weight: 600; white-space: nowrap; }
.light-tip .light-tip-tb td { color: #fff; }
.light-tip .light-tip-tb td:last-child, .light-tip .light-tip-tb th:last-child { padding-right: 0; }
.light-unmatched { padding: 6px 16px 14px; font-size: 12.5px; color: var(--text-2); }
.light-chip {
  display: inline-block; margin: 3px 6px 0 0; padding: 2px 8px; border-radius: 20px;
  background: #f2f4f8; border: 1px solid var(--line-strong); color: var(--text-2);
}
.light-warn { color: #b3281c; }

/* ---------- 推进表：前两列锁定（横向滚动时一直可见）----------
   与详细计划表的 .stage-grid 同一套做法：JS 给前两列加 .sticky-1 / .sticky-2，
   并用 --stick-1 传第一列的实际宽度（列宽可拖，所以每次滚动都重算）。
   背景处理：行给一层白底、单元格继承它——这样锁定列是"不透明"的（滚过去的
   内容不会透出来），同时带颜色的行 / 单元格（已拖期、完成、待确认等）照样保持原色
   （它们的规则优先级更高，会盖过这两条兜底）。 */
table.grid tbody tr { background: #fff; }
table.grid tbody td { background: inherit; }
table.grid th.sticky-col, table.grid td.sticky-col {
  position: sticky; z-index: 2;
}
table.grid thead th.sticky-col {
  z-index: 5; background: #eef4fa;
}
table.grid .sticky-last {
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, .12);
}
table.grid tbody tr:hover td.sticky-col {
  background: #f8fbff;
}
/* 推进表列头：拖拽排序 + 锁定列 */
table.grid th[data-colkey] { cursor: grab; }
table.grid th.col-dragging { opacity: .5; }
table.grid th.col-drop-target { box-shadow: inset 2px 0 0 var(--brand); }
table.grid th .col-freeze {
  margin-left: 4px; padding: 0 3px;
  font-size: 10px; line-height: 15px;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; vertical-align: middle;
}
table.grid th .col-freeze:hover { color: var(--brand); border-color: var(--brand); }
table.grid th .col-freeze.on {
  color: #fff; background: var(--brand); border-color: var(--brand);
}
table.grid th .col-freeze.on:hover { background: var(--brand-dark); }
/* 全屏（铺满窗口）时锁住页面滚动，避免背后跟着滚 */
body.pm-fs-on { overflow: hidden; }

/* ---------- 任务日历：除颜色外，再用「形状」区分（图例 / 日期格 / 当天明细一致） ----------
   ● 我主办的任务（圆） · ◆ 我负责的项目节点（菱） · ■ 已拖期（方）
   ▲ 风险预警（三角） · ▬ 我的便签（胶囊） */
.dot { width: 8px; height: 8px; }
.dot.cal-over { border-radius: 1.5px; }                                   /* 方形 */
.dot.cal-soon { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }  /* 三角形 */
.dot.cal-task { border-radius: 50%; }                                     /* 圆形 */
.dot.cal-node { border-radius: 1.5px; transform: rotate(45deg); }         /* 菱形 */
.dot.cal-note { width: 13px; border-radius: 4px; }                        /* 胶囊 */

/* 选中某天后，下方明细里的每条也带一个同形状的小标记（颜色跟着该条的色走） */
.cal-item::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 8px;
  height: 8px;
  background: currentColor;
  opacity: .85;
  border-radius: 50%;
}
.cal-item.cal-over::before { border-radius: 1.5px; }
.cal-item.cal-soon::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cal-item.cal-node::before { border-radius: 1.5px; transform: rotate(45deg); }
.cal-item.cal-note::before { width: 13px; border-radius: 4px; }

/* 点亮世界计划 · 图例里的口径说明与金色提示 */
.light-legend .lg-note { font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.light-legend .lg-gold-txt { color: #8a6207; font-weight: 700; }
#modalAmount .input { width: 100%; margin: 8px 0 4px; }
#modalAmount .modal-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- 统计概览：每个功能列表最多显示约 3 条，超出在块内滚动（像 Excel） ----------
   · 待办事项 / 我的待办（.side-body）· 已拖期块 · 负责人分布 · 矩阵里的项目列表 */
#viewStats .side-body { max-height: 172px; overflow-y: auto; }
#viewStats .catch-body { max-height: 200px; overflow-y: auto; }
#viewStats .bars { max-height: 108px; overflow-y: auto; }
#viewStats .mx-list { max-height: 232px; overflow-y: auto; }
#viewStats .side-body::-webkit-scrollbar,
#viewStats .catch-body::-webkit-scrollbar,
#viewStats .bars::-webkit-scrollbar,
#viewStats .mx-list::-webkit-scrollbar { width: 8px; }
#viewStats .side-body::-webkit-scrollbar-thumb,
#viewStats .catch-body::-webkit-scrollbar-thumb,
#viewStats .bars::-webkit-scrollbar-thumb,
#viewStats .mx-list::-webkit-scrollbar-thumb { background: #d5dbe5; border-radius: 4px; }
#viewStats .side-body::-webkit-scrollbar-thumb:hover,
#viewStats .catch-body::-webkit-scrollbar-thumb:hover,
#viewStats .bars::-webkit-scrollbar-thumb:hover,
#viewStats .mx-list::-webkit-scrollbar-thumb:hover { background: #b9c2d0; }
/* 推进表拖拽手柄：与详细计划一致，鼠标悬停时更明显 */
.plan-row .drag-handle { margin-right: 4px; }

/* ---------- 「项目总数」：标题下单独一整行，四个数字横向排 ---------- */
.mx-sum-row { padding: 12px 16px 0; }
.mx-sum-row .mx-col.mx-sum { flex-direction: row; align-items: stretch; flex-wrap: wrap; }
.mx-sum-row .mx-col.mx-sum .mx-head {
  flex: 1 1 260px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.mx-sum-row .mx-col.mx-sum .mx-row {
  flex: 1 1 130px;
  border-bottom: 0;
  border-right: 1px solid var(--line);
}
.mx-sum-row .mx-col.mx-sum .mx-row:last-child { border-right: 0; }
@media (max-width: 980px) {
  .mx-sum-row .mx-col.mx-sum { flex-direction: column; }
  .mx-sum-row .mx-col.mx-sum .mx-head { border-right: 0; border-bottom: 1px solid var(--line); }
  .mx-sum-row .mx-col.mx-sum .mx-row { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- 项目列表：每块最多显示 5 个项目行，其余块内滚动（像 Excel） ----------
   JS（capMatrixLists）会按前 5 行实际高度精确限定；量不到时用这里的近似值兜底 */
#viewStats .mx-tblwrap { max-height: 238px; overflow-y: auto; }
#viewStats .mx-tblwrap table.mx-table thead th { position: sticky; top: 0; z-index: 2; }
#viewStats .mx-tblwrap::-webkit-scrollbar,
#viewStats .mx-list::-webkit-scrollbar { width: 8px; }
#viewStats .mx-tblwrap::-webkit-scrollbar-thumb,
#viewStats .mx-list::-webkit-scrollbar-thumb { background: #d5dbe5; border-radius: 4px; }
#viewStats .mx-tblwrap::-webkit-scrollbar-thumb:hover,
#viewStats .mx-list::-webkit-scrollbar-thumb:hover { background: #b9c2d0; }