/* ============================================================
   VIEWS — 数据看板 / 任务四视图 / 每周计划 / 设计排期 / 新建页
   ============================================================ */

/* ============================================================
   1. 数据看板 — 数据表盘（半圆仪表）
   ============================================================ */
.dash-row{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--u3);
}
.gauge-panel .panel-b{ padding:var(--u3); }

.gauge-wrap{
  display:flex; align-items:center; gap:var(--u4);
}
.gauge{ position:relative; width:264px; height:152px; flex:0 0 264px; }
.gauge svg{ display:block; width:264px; height:152px; overflow:visible; }
.gauge .g-track{ fill:none; stroke:var(--panel-3); stroke-width:14; }
.gauge .g-fill{
  fill:none; stroke:var(--acid); stroke-width:14;
  filter:drop-shadow(0 0 6px var(--acid-glow));
  transition:stroke-dashoffset .35s var(--ease);
}
.gauge .g-fill.is-red{ stroke:var(--red); filter:drop-shadow(0 0 6px var(--red-glow)); }
.gauge .g-tick{ stroke:var(--line-3); stroke-width:1; }
.gauge .g-tick.major{ stroke:var(--txt-3); stroke-width:2; }
.gauge-center{
  position:absolute; left:0; right:0; bottom:8px; text-align:center;
}
.gauge-center .gv{ font-family:var(--pixel); font-size:32px; line-height:1; color:var(--acid); }
.gauge-center .gv.is-red{ color:var(--red); }
.gauge-center .gl{ font-size:10px; letter-spacing:.16em; color:var(--txt-3); margin-top:var(--u1); }
.gauge-scale{ display:flex; justify-content:space-between; width:264px; font-size:9px; color:var(--txt-4); margin-top:-16px; }

.gauge-side{
  flex:1; min-width:0;
  display:grid; grid-template-columns:200px 1fr; gap:var(--u4); align-items:start;
}
.gauge-side .gs-stats{
  display:flex; flex-direction:column; gap:var(--u1);
  padding-right:var(--u4); border-right:1px solid var(--line);
}
.gauge-side .gs-break{ min-width:0; }
.gauge-side .gs-row{ display:flex; align-items:baseline; gap:var(--u1); }
.gauge-side .gs-row .k{ font-size:11px; color:var(--txt-2); width:72px; flex:0 0 72px; }
.gauge-side .gs-row .v{ font-family:var(--pixel); font-size:13px; color:var(--txt); }
.gauge-side .gs-row .v.sm{ font-family:var(--mono); font-size:12px; color:var(--txt-2); }

/* 看板右侧：分类完成度列表 */
.break-list{ display:flex; flex-direction:column; gap:var(--u2); }
.break-item{ display:flex; flex-direction:column; gap:6px; }
.break-item .bi-top{ display:flex; align-items:center; gap:var(--u1); font-size:12px; }
.break-item .bi-top .nm{ color:var(--txt); }
.break-item .bi-top .ct{ margin-left:auto; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ============================================================
   2. 任务清单 — 工具条 + 四视图
   ============================================================ */
.toolbar{
  display:flex; align-items:center; gap:var(--u2);
  padding:var(--u2) var(--u3);
  border:1px solid var(--line); background:var(--panel);
  flex-wrap:wrap;
}
.toolbar .tb-l{ display:flex; align-items:center; gap:var(--u1); flex-wrap:wrap; }
.toolbar .tb-r{ margin-left:auto; display:flex; align-items:center; gap:var(--u1); }
.toolbar .divider{ width:1px; height:24px; background:var(--line); }

.view-host{ border:1px solid var(--line); background:var(--panel); }
.view-host > .scroll{ overflow:auto; }

/* ---- 列表视图 ---- */
.list-head{
  display:flex; align-items:center; gap:var(--u2);
  height:32px; padding:0 var(--u2);
  background:var(--panel-2); border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
.list-row{
  display:flex; align-items:center; gap:var(--u2);
  height:48px; padding:0 var(--u2);
  border-bottom:1px solid var(--line);
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.list-row:hover{ background:var(--panel-2); }
.list-row.is-done{ color:var(--txt-4); }
.list-row.is-done .lr-title{ text-decoration:line-through; }
.list-row .lr-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.list-row .lr-cell{ flex:0 0 auto; display:flex; align-items:center; gap:var(--u1); }
.list-row .lr-date{ width:96px; font-size:11px; color:var(--txt-3); }
.list-row .lr-date.late{ color:var(--red); }
.list-row .lr-prog{ width:96px; }
.list-row .lr-cat{ width:72px; }

/* ---- 看板视图 ---- */
.board{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
}
.board-col{ background:var(--panel); display:flex; flex-direction:column; min-height:320px; }
.board-col .bc-h{
  display:flex; align-items:center; gap:var(--u1);
  height:40px; padding:0 var(--u2); border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.board-col .bc-h .dot{ width:8px; height:8px; flex:0 0 8px; }
.board-col .bc-h .nm{ font-size:12px; font-weight:700; }
.board-col .bc-h .ct{
  margin-left:auto; font-family:var(--pixel); font-size:10px; color:var(--txt-3);
}
.board-col .bc-b{
  flex:1; padding:var(--u2); display:flex; flex-direction:column; gap:var(--u2);
  min-height:120px;
}
.board-col.drop-on .bc-b{ background:var(--acid-dim); }

.card{
  background:var(--panel-2); border:1px solid var(--line-2);
  border-left:2px solid var(--c, var(--line-3));
  padding:var(--u2); cursor:grab;
  display:flex; flex-direction:column; gap:var(--u1);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover{ background:var(--panel-3); border-color:var(--line-3); }
.card:active{ cursor:grabbing; }
.card .c-title{ font-size:13px; line-height:1.5; }
.card .c-meta{ display:flex; align-items:center; gap:var(--u1); flex-wrap:wrap; }
.card .c-date{ font-size:10px; color:var(--txt-3); margin-left:auto; }
.card .c-date.late{ color:var(--red); }
.card.is-done .c-title{ color:var(--txt-4); text-decoration:line-through; }

/* ---- 日历视图 ---- */
.cal{ display:flex; flex-direction:column; }
.cal-head{
  display:grid; grid-template-columns:repeat(7,1fr);
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.cal-head div{
  height:32px; display:grid; place-items:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(112px,auto);
  gap:1px; background:var(--line);
}
.cal-cell{
  background:var(--panel); padding:var(--u1);
  display:flex; flex-direction:column; gap:6px;
  min-height:112px; position:relative;
}
.cal-cell.dim{ background:var(--bg-2); }
.cal-cell.dim .cd-num{ color:var(--txt-4); }
.cal-cell.today{ box-shadow:inset 0 0 0 1px var(--acid); }
.cal-cell .cd-num{
  font-family:var(--pixel); font-size:10px; color:var(--txt-2);
  display:flex; align-items:center; gap:6px;
}
.cal-cell.today .cd-num{ color:var(--acid); }
.cal-cell .cd-tag{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:#04120A; background:var(--acid); padding:0 4px; line-height:14px;
}
.cal-chip{
  display:flex; align-items:center; gap:6px;
  padding:0 6px; height:24px;
  background:var(--panel-3); border-left:2px solid var(--c,var(--line-3));
  font-size:11px; cursor:grab; color:var(--txt-2);
}
.cal-chip:hover{ background:var(--raised); color:var(--txt); }
.cal-chip.is-done{ opacity:.45; }
.cal-chip.is-done .cc-t{ text-decoration:line-through; }
.cal-chip .cc-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-cell.drop-on{ background:var(--acid-dim); }

.cal-bar{
  display:flex; align-items:center; gap:var(--u2);
  height:48px; padding:0 var(--u2);
  border-bottom:1px solid var(--line); background:var(--panel-2);
}
.cal-bar .cb-title{ font-size:14px; font-weight:700; letter-spacing:.04em; }
.cal-bar .cb-title .y{ color:var(--txt-3); font-weight:400; margin-left:var(--u1); }

/* ---- 甘特图 ---- */
.gantt{ display:flex; flex-direction:column; background:var(--panel); }
.gantt-bar-tools{
  display:flex; align-items:center; gap:var(--u2);
  height:48px; padding:0 var(--u2); border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.gantt-scroll{ overflow:auto; }
.gantt-inner{ position:relative; min-width:max-content; }

.g-head-row{
  display:flex; position:sticky; top:0; z-index:3;
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.g-left-head{
  width:280px; flex:0 0 280px; position:sticky; left:0; z-index:4;
  background:var(--panel-2); border-right:1px solid var(--line);
  display:flex; align-items:center; padding:0 var(--u2);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
}
.g-timeline{ display:flex; flex-direction:column; }
.g-months{ display:flex; height:24px; border-bottom:1px solid var(--line); }
.g-month{
  font-size:10px; letter-spacing:.12em; color:var(--txt-2);
  display:flex; align-items:center; padding-left:var(--u1);
  border-right:1px solid var(--line); white-space:nowrap; overflow:hidden;
}
.g-days{ display:flex; height:32px; }
.g-day{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:9px; color:var(--txt-3); border-right:1px solid var(--line);
  line-height:1.2; overflow:hidden; white-space:nowrap;
}
.g-day.is-wide{ font-size:11px; letter-spacing:.06em; }
.g-day.wk{ background:rgba(255,61,61,.045); }
.g-day.td{ background:var(--acid-dim); color:var(--acid); }
.g-day .dd{ font-family:var(--pixel); font-size:9px; }
.g-day .dw{ font-size:8px; opacity:.7; }

/* 甘特图：整体作为放置区（任务池 → 甘特图） */
.gantt .g-lanes{ position:relative; }
.gantt.dz-over .g-body{ background:var(--acid-dim); }

.g-body{ position:relative; }
.g-row{
  display:flex; height:40px; border-bottom:1px solid var(--line);
}
.g-row:hover{ background:var(--panel-2); }
.g-left{
  width:280px; flex:0 0 280px; position:sticky; left:0; z-index:2;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; align-items:center; gap:var(--u1); padding:0 var(--u2);
  overflow:hidden;
}
.g-row:hover .g-left{ background:var(--panel-2); }
.g-left .gl-t{ font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.g-lane{ position:relative; flex:1; }
.g-lane .gl-grid{
  position:absolute; inset:0; display:flex; pointer-events:none;
}
.g-lane .gl-grid i{ flex:0 0 auto; border-right:1px solid var(--line); }
.g-lane .gl-grid i.wk{ background:rgba(255,255,255,.012); }

.g-bar{
  position:absolute; top:9px; height:22px;
  background:var(--acid-dim2); border:1px solid var(--acid);
  color:var(--acid); font-size:10px; line-height:20px;
  padding:0 6px; cursor:grab; overflow:hidden; white-space:nowrap;
  display:flex; align-items:center;
  min-width:12px;
  box-shadow:0 0 12px -6px var(--acid-glow);
}
.g-bar:hover{ background:var(--acid-dim); }
.g-bar:active{ cursor:grabbing; }
.g-bar .gb-fill{
  position:absolute; left:0; top:0; bottom:0; background:var(--acid); opacity:.28;
}
.g-bar .gb-t{ position:relative; z-index:1; overflow:hidden; text-overflow:ellipsis; }
.g-bar.is-done{ opacity:.5; }
.g-bar .gb-h{
  position:absolute; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:2;
}
.g-bar .gb-h.l{ left:-1px; }
.g-bar .gb-h.r{ right:-1px; }
.g-bar .gb-h::after{
  content:""; position:absolute; top:6px; bottom:6px; width:2px; background:currentColor;
  left:2px; opacity:.8;
}
.g-bar.dragging{ z-index:10; border-color:#fff; }

.g-today-line{
  position:absolute; top:0; bottom:0; width:1px; background:var(--red); z-index:1;
  pointer-events:none; box-shadow:0 0 8px 0 var(--red-glow);
}

.g-legend{ display:flex; align-items:center; gap:var(--u2); font-size:10px; color:var(--txt-3); }
.g-legend .lg{ display:flex; align-items:center; gap:6px; }
.g-legend .sw{ width:16px; height:8px; border:1px solid; }

/* ============================================================
   3. 每周计划
   ============================================================ */
.week-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:var(--u2);
}
.day-col{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  min-height:320px;
}
.day-col.is-today{ border-color:var(--acid); }
.day-col.weekend .dc-h{ background:var(--panel-3); }
.dc-h{
  display:flex; align-items:center; gap:var(--u1);
  height:48px; padding:0 var(--u2);
  border-bottom:1px solid var(--line); background:var(--panel-2);
}
.dc-h .dw{ font-size:12px; font-weight:700; }
.dc-h .dd{ font-family:var(--pixel); font-size:10px; color:var(--txt-3); }
.dc-h .ct{
  margin-left:auto; font-family:var(--pixel); font-size:9px;
  color:var(--txt-3); border:1px solid var(--line); padding:0 4px; line-height:16px;
}
.day-col.is-today .dc-h{ background:var(--acid-dim); }
.day-col.is-today .dc-h .dw{ color:var(--acid); }
.dc-b{
  flex:1; padding:var(--u1); display:flex; flex-direction:column; gap:var(--u1);
}
.dc-b.drop-on{ background:var(--acid-dim); outline:1px dashed var(--acid); outline-offset:-1px; }
.dc-add{
  margin-top:auto; height:32px; width:100%;
  background:transparent; border:1px dashed var(--line-2); color:var(--txt-4);
  font-size:11px; cursor:pointer; transition:all var(--dur) var(--ease);
}
.dc-add:hover{ border-color:var(--acid); color:var(--acid); background:var(--acid-dim); }

.pool{
  border:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column;
}
.pool-h{
  display:flex; align-items:center; gap:var(--u2);
  height:40px; padding:0 var(--u2); border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.pool-h .t{ font-size:12px; font-weight:700; }
.pool-h .sub{ font-size:11px; color:var(--txt-3); }
.pool-b{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--u2); padding:var(--u2); min-height:96px;
}
.pool-b.drop-on{ background:var(--acid-dim); outline:1px dashed var(--acid); outline-offset:-1px; }

/* ---- 月 / 年计划：进度条 ---- */
.plan-list{ display:flex; flex-direction:column; }
.plan-row{
  display:flex; align-items:center; gap:var(--u3);
  padding:var(--u2) var(--u3);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.plan-row:hover{ background:var(--panel-2); }
.plan-row .pr-idx{
  font-family:var(--pixel); font-size:10px; color:var(--txt-4);
  width:32px; flex:0 0 32px;
}
.plan-row .pr-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.plan-row .pr-top{ display:flex; align-items:center; gap:var(--u1); }
.plan-row .pr-name{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-row .pr-sub{ font-size:10px; color:var(--txt-4); }
.plan-row .pr-bar{ width:320px; flex:0 0 320px; }
.plan-row .pr-val{
  font-family:var(--pixel); font-size:13px; color:var(--acid);
  width:64px; flex:0 0 64px; text-align:right;
}
.plan-row.is-done .pr-val{ color:var(--acid-3); }
.plan-row .pr-act{ display:flex; gap:var(--u1); }

/* ---- 年计划：10 格像素进度条（点击 / 拖拽 / 键盘均可调） ---- */
.pcells{
  display:flex; gap:4px; height:24px;
  cursor:pointer;
  user-select:none; -webkit-user-select:none;
  touch-action:none;               /* 触屏拖动不被滚动打断 */
}
.pcells .pc{
  flex:1;
  background:var(--panel-3); border:1px solid var(--line-2);
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.pcells .pc:hover{ border-color:var(--acid); box-shadow:0 0 0 1px var(--acid-dim2); }
.pcells .pc.ghost{
  background:var(--acid-dim); border-color:var(--acid-3);
}
.pcells .pc.on{
  background:var(--acid); border-color:var(--acid);
  box-shadow:0 0 8px -3px var(--acid-glow);
}
.pcells .pc.on:hover{ filter:brightness(1.1); }
.pcells:focus-visible{
  outline:1px solid var(--acid); outline-offset:3px;
}

/* ---- 月计划：每月 4 周格子（复用周计划布局） ---- */
.week-grid.is-4{ grid-template-columns:repeat(4,1fr); align-items:start; }
/* 格子按内容自适应高度：底部留白与上/左/右一致（不再被拉伸出大块空白） */
.week-grid.is-4 .day-col{ min-height:160px; }
.week-grid.is-4 .dc-h{ height:40px; }

/* ============================================================
   4. 新建任务页
   ============================================================ */
.page-new{ max-width:880px; width:100%; }
.new-head{
  display:flex; align-items:center; gap:var(--u2);
  padding-bottom:var(--u3); border-bottom:1px solid var(--line);
}
.new-head .nh-t{ font-size:20px; font-weight:700; }
.new-head .nh-s{ font-size:11px; color:var(--txt-3); }
.new-foot{
  display:flex; align-items:center; gap:var(--u2);
  padding-top:var(--u3); border-top:1px solid var(--line);
}
.new-foot .nf-hint{ font-size:11px; color:var(--txt-4); }

.req{ color:var(--red); margin-left:4px; }
.err{ font-size:11px; color:var(--red); min-height:16px; }

@media (max-width:1400px){
  .dash-row{ grid-template-columns:1fr; }
  .plan-row .pr-bar{ width:200px; flex-basis:200px; }
}
@media (max-width:1200px){
  .stat-grid{ grid-template-columns:1fr; }
  .week-grid{ grid-template-columns:repeat(4,1fr); }
  .gauge-wrap{ flex-direction:column; align-items:flex-start; }
}

/* ---- 年度总进度条（年计划顶部，像素风文字） ---- */
.year-hero{ padding:var(--u3) var(--u4); display:flex; flex-direction:column; gap:var(--u2); }
.yh-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--u2); }
.yh-label{ font-size:10px; color:var(--txt-3); letter-spacing:.08em; }
.yh-num{ font-size:28px; color:var(--acid); }
.yh-bar .pbar{ height:20px; }

/* ============================================================
   6. 数据总览（完成热区图 + 年度完成数据）
   ============================================================ */
/* ---- 热区图：列 = 周（周一起），行 = 周一→周日；列宽自适应占满面板 ---- */
.heat-wrap{ display:flex; gap:var(--u1); }
.heat-wd{ display:flex; flex-direction:column; gap:3px; flex:0 0 auto; align-self:stretch; }
.heat-wd i{ flex:1 1 0; font-style:normal; width:16px;
  display:flex; align-items:center; justify-content:flex-end;
  font-family:var(--pixel); font-size:8px; color:var(--txt-4); }
.heat-wd i.sp{ flex:0 0 16px; }
.heat-scroll{ overflow-x:auto; flex:1 1 auto; min-width:0; }
.heat-cols{ display:flex; gap:3px; width:100%; }
.heat-col{ flex:1 1 0; min-width:10px; display:flex; flex-direction:column; gap:3px; }
.heat-col .hm{ font-style:normal; height:16px; line-height:16px;
  font-size:9px; color:var(--txt-3); white-space:nowrap; overflow:hidden; }
.hcell{
  width:100%; aspect-ratio:1/1; min-height:8px;
  background:var(--panel-3); border:1px solid var(--line-2);
}
.hcell.hid{ visibility:hidden; }             /* 年份首尾越界的占位 */
.hcell.fut{ background:transparent; border-color:var(--line); opacity:.5; }
.hcell.l1{ background:rgba(57,255,20,.26); border-color:rgba(57,255,20,.4); }
.hcell.l2{ background:var(--acid-3); border-color:var(--acid-3); }
.hcell.l3{ background:var(--acid); border-color:var(--acid); box-shadow:0 0 6px -1px var(--acid-glow); }
.hcell.td{ outline:1px solid var(--txt-2); outline-offset:1px; }
.heat-legend{ display:flex; align-items:center; gap:5px; font-size:10px; color:var(--txt-3); }
.heat-legend .sw{ width:14px; height:14px; }
.stat-grid.g2{ grid-template-columns:repeat(2,1fr); }
.stat-card .sc-sub{ font-size:11px; color:var(--txt-3); }
.yh-bar .pbar i{
  background:repeating-linear-gradient(90deg, var(--acid) 0 8px, transparent 8px 12px);
}
.yh-meta{ font-size:11px; color:var(--txt-3); letter-spacing:.04em; }

/* ---- 卡片右上角编辑图标 ---- */
.card{ position:relative; }
.c-edit{
  position:absolute; top:6px; right:6px; z-index:2;
  width:20px; height:20px; line-height:1;
  display:none; align-items:center; justify-content:center;
  font-size:11px; color:var(--txt-3);
  background:var(--panel-3); border:1px solid var(--line-3);
  cursor:pointer;
}
.card:hover .c-edit{ display:inline-flex; }
.c-edit:hover{ color:var(--acid); border-color:var(--acid); }