/* ============================================================================
   总览页（v2 改版）
   ----------------------------------------------------------------------------
   结构（从上到下）：
     ① 问候条        —— 日期 / 项目数 + 两个操作
     ② 四张统计卡    —— qianwen 风格：左侧 3px 彩条 + 44px 图标块
     ③ 今日待办      —— 今天要做什么（可勾选/点击进项目）
     ④ 近 7 天计划    —— 接下来几天要开始什么
   刻意不做的：项目进度明细（点进项目页看）、最近动态（进项目动态页看）。
   ========================================================================== */

/* 问候条收紧，避免占掉首屏太多高度 */
.dash-head { margin-bottom: 16px; }
.dash-head .page-title { font-size: 22px; }

/* 四张统计卡：首屏的「全局有数」区，间距比其他网格略小 */
.dash-stats { gap: 14px; margin-bottom: 4px; }

/* 底部两栏：等宽，卡片内部自己滚动 */
.dash-bottom > .card { height: 100%; }

/* ============================================================================
   今日待办
   ========================================================================== */
.today-list { display: flex; flex-direction: column; gap: 8px; }

.today-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; position: relative;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.today-item:hover { border-color: var(--brand-soft-2); background: var(--surface-2); }
/* 左侧状态色条：逾期红 / 今天橙 / 正常绿 */
.today-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  background: var(--ti-color, var(--st-done));
}
.today-item.overdue { --ti-color: var(--st-block); }
.today-item.today { --ti-color: var(--st-review); }
.today-item.soon { --ti-color: var(--brand-1); }
.today-item.normal { --ti-color: var(--st-done); }

.ti-main { flex: 1; min-width: 0; }
.ti-name { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.ti-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11.5px; color: var(--text-3); margin-top: 5px;
}
.ti-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* 日期徽标：逾期/今天/即将开始分色 */
.ti-due {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 10px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.today-item.overdue .ti-due { background: var(--st-block-soft); color: var(--st-block); }
.today-item.today .ti-due { background: var(--st-review-soft); color: #9a3412; }
.today-item.soon .ti-due { background: var(--brand-soft); color: var(--brand-1); }

/* ============================================================================
   近 7 天计划（可勾选）
   ========================================================================== */
.plan-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.plan-row:hover { background: var(--surface-3); }
.plan-row.today .plan-date { background: var(--st-review-soft); }
.plan-row.today .plan-day, .plan-row.today .plan-mon { color: #9a3412; }
/* 已完成：整行退到背景，但保留可读性（不能淡到看不见） */
.plan-row.done { background: var(--st-done-soft); }
.plan-row.done:hover { background: #dcfce7; }
.plan-row.done .plan-name { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
.plan-row.done .plan-date { background: var(--surface); }
.plan-row.done .plan-day, .plan-row.done .plan-mon { color: var(--text-3); }

/* 勾选框：行内第一列，点它不触发行跳转 */
.plan-check {
  display: inline-flex; align-items: center;
  flex-shrink: 0; cursor: pointer; position: relative;
}
.plan-check input { position: absolute; opacity: 0; pointer-events: none; }
.plan-check .box {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  display: grid; place-items: center; color: #fff;
  transition: all var(--dur) var(--ease);
}
.plan-check:hover .box { border-color: var(--brand-1); background: var(--brand-soft); }
.plan-check input:checked + .box { background: var(--st-done); border-color: var(--st-done); }
.plan-check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
/* 只读 / 受阻：勾选框变灰并禁用，同时用 not-allowed 光标表达「不能点」 */
.plan-check.locked { cursor: not-allowed; }
.plan-check.locked .box {
  background: var(--surface-3); border-color: var(--border); color: var(--text-3); opacity: 0.75;
}
.plan-check[data-editable="0"] { cursor: not-allowed; }
.plan-check[data-editable="0"] .box {
  background: var(--surface-3); border-color: var(--border); color: var(--text-3); opacity: 0.7;
}
.plan-check[data-editable="0"]:hover .box { border-color: var(--border); background: var(--surface-3); }
/* 受阻节点的勾选位显示警示色，和「只是没权限」区分开 */
.plan-row .plan-check.locked .box[data-kind="blocked"] {
  background: var(--st-block-soft); color: var(--st-block); opacity: 1;
}
@media (hover: none) {
  /* 触屏没有 hover，勾选框要够显眼才点得到 */
  .plan-check .box { width: 22px; height: 22px; }
}

.plan-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; flex-shrink: 0; padding: 5px 0;
  border-radius: var(--r-sm); background: var(--brand-soft);
}
.plan-day { font-size: 15px; font-weight: 700; color: var(--brand-1); line-height: 1.1; }
.plan-mon { font-size: 10px; color: var(--brand-1); opacity: 0.75; margin-top: 1px; }
.plan-name { transition: color var(--dur) var(--ease); }

/* ============================================================================
   提醒条
   ========================================================================== */
.today-remind {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 11px 14px; border-radius: var(--r-md);
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
}
.today-remind > svg { flex-shrink: 0; }
.today-remind > span { flex: 1; min-width: 0; }
.today-remind.ok { color: #15803d; background: var(--st-done-soft); border-color: transparent; }
.today-remind.warn { color: #9a3412; background: var(--st-review-soft); border-color: transparent; }
.today-remind.bad { color: #991b1b; background: var(--st-block-soft); border-color: transparent; }
@media (max-width: 720px) {
  .today-remind { flex-wrap: wrap; }
  .today-remind .btn { width: 100%; }
}