/* ---- 專案任務板（view 1） ---- */
.board-scroll { }
.board { display: flex; flex-direction: column; gap: 16px; }
.board-empty { color: var(--muted); font-size: 14px; padding: 20px; text-align: center; }
.board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

.chain, .standalone {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
}
.chain.done { opacity: 0.6; }
.chain-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.chain-name { font-size: 15px; font-weight: 600; }
.chain-prog { font-size: 12px; color: var(--muted); }
.chain-archive-btn {
  font-size: 12px; padding: 3px 10px; border: 1px solid var(--amber);
  border-radius: 6px; background: var(--amber-soft); color: var(--amber);
}
.chain-confirm { margin-bottom: 8px; }
.chain-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chain-steps .task-card { min-width: 240px; flex: 0 0 auto; }
.chain-steps .task-card.done { min-width: 0; max-width: 180px; }

.task-card {
  border: 1px solid var(--border);
  border-left: 4px solid #5a7fb8;
  border-radius: 8px;
  background: var(--card);
  padding: 8px 10px;
  font-size: 13px;
}
.task-card.status-active { border-left-color: var(--accent); }
/* PENDING（尚未開始／還沒輪到）：容易被忘在角落，用琥珀色跟其他狀態明顯區分（20260904） */
.task-card.status-pending { border-left-color: var(--amber); }
.badge.s-pending { background: var(--amber-soft); color: var(--amber); }
.tc-pending-tag {
  font-size: 12px; color: var(--amber); border: 1px solid var(--amber);
  border-radius: 4px; padding: 0 5px; font-weight: 600;
}
.task-card.done {
  border-left-color: #5a606c;
  background: var(--bg-soft);
  opacity: 0.65;
  padding: 5px 10px; font-size: 12.5px;
}
.task-card .tc-top { display: flex; align-items: center; gap: 6px; }
.task-card .tc-name { font-weight: 700; font-size: 15px; }
.task-card.done .tc-name { font-weight: 500; font-size: 13px; }
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: rgba(110, 160, 246, 0.18); color: var(--accent); font-size: 11px; font-weight: 700; flex: none;
}
.tc-check { color: var(--green); font-weight: 700; }
.tc-note { font-size: 12px; color: var(--muted); margin: 3px 0; }
.tc-meta { font-size: 12px; color: var(--muted); margin: 3px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tc-due { font-weight: 600; color: var(--text); }
/* 逾期：沿用 .practice-card.overdue 同一套語言（紅左框＋淡紅底），逾期比 STATUS 更該被看見，
   所以蓋掉 status-* 的左框顏色；STATUS 本身在卡片內的 badge 仍看得到，資訊沒有消失。 */
.task-card.overdue { border-left-color: var(--red) !important; background: var(--red-soft); }
.tc-due.tc-overdue { color: var(--red); }
.tc-age { color: var(--muted); font-size: 12px; }
.tc-postponed { color: var(--amber); font-size: 12px; font-weight: 600; }
.p-postponed-tag { color: var(--amber); font-size: 12px; font-weight: 600; margin-left: 6px; }
.tc-waiting {
  margin-top: 4px; font-size: 12px; padding: 4px 8px; border-radius: 6px;
  background: var(--amber-soft); color: var(--amber);
}
.tc-waiting-notsent { background: var(--card-soft); color: var(--muted); }
.tc-waiting-over { background: var(--red-soft); color: var(--red); font-weight: 600; }
.tc-outcome { color: var(--muted); font-size: 12px; }
/* 📮 待報告：做完但還沒向上報告結案。用琥珀色跟「已完成」的綠色區分，提醒這件事還沒真的收尾 */
.tc-pending-report {
  font-size: 12px; color: var(--amber); border: 1px solid var(--amber);
  border-radius: 4px; padding: 0 5px;
}
/* 📮 待報告清單（專案頁頂部）：依專案分組，報告時一組一組照著念 */
.pr-panel { margin-bottom: 14px; }
.pr-groups { display: flex; flex-direction: column; gap: 10px; }
.pr-group {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--card);
  background: color-mix(in srgb, var(--proj-color, var(--muted)) 10%, var(--card));
  border-left: 3px solid var(--proj-color, var(--border));
}
.pr-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pr-group-name { font-weight: 700; letter-spacing: 0.5px; }
.pr-group-done {
  margin-left: auto; font-size: 12px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-soft); color: var(--text); cursor: pointer;
}
.pr-group-done:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pr-group-done:disabled { opacity: 0.6; cursor: default; }
.pr-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0; border-top: 1px dashed var(--border); font-size: 13px;
}
.pr-name { flex: 1; min-width: 160px; }
.pr-outcome { color: var(--muted); font-size: 12px; }
.pr-when { color: var(--muted); font-size: 12px; }
.pr-done {
  font-size: 12px; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.pr-done:hover { border-color: var(--accent); color: var(--accent); }
.edit-btn, .more-btn {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card-soft); color: var(--text);
}
.tc-done-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-done-row .more-btn { margin-left: auto; padding: 0 6px; }
/* A2（20260807重構）：完成度%退場，改「最後進展節點」文字＋停滯天數色階 */
.tc-progress-node { margin-top: 4px; font-size: 12px; color: var(--muted); }
.tc-progress-node.tc-stale-amber { color: var(--amber); font-weight: 600; }
.tc-progress-node.tc-stale-red { color: var(--red); font-weight: 600; }
.tc-progress-add { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.tc-progress-input { flex: 1; font-size: 12px; padding: 2px 6px; }
.tc-progress-save {
  font-size: 12px; padding: 2px 8px; border: 1px solid var(--accent);
  border-radius: 6px; background: rgba(110, 160, 246, 0.14); color: var(--accent);
}
.edit-panel {
  margin-top: 6px; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-soft); font-size: 13px;
}
.edit-panel .ep-row, .drawer-body .ep-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.edit-panel .ep-row > label, .drawer-body .ep-row > label { color: var(--muted); font-size: 12px; }
.edit-panel .ep-task, .drawer-body .ep-task { flex: 1; min-width: 160px; }
.edit-panel .ep-note, .drawer-body .ep-note { width: 100%; }
.edit-panel .ep-actions, .drawer-body .ep-actions { display: flex; gap: 8px; }
.edit-panel .ep-save, .drawer-body .ep-save, .drawer-body .oc-save, .drawer-body .fu-save { background: var(--green); color: var(--on-accent); border: none; border-radius: 6px; padding: 5px 14px; font-weight: 600; }
.edit-panel .ep-cancel { background: var(--card-soft); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; }
.edit-panel .ep-delete, .drawer-body .ep-delete { background: var(--red-soft); border: 1px solid var(--red); color: var(--red); border-radius: 6px; padding: 5px 12px; margin-left: auto; }
.edit-panel select, .edit-panel input[type=date], .edit-panel input[type=number],
.drawer-body select, .drawer-body input[type=date], .drawer-body input[type=number], .drawer-body input[type=time] { font-size: 13px; padding: 4px 6px; }
.edit-panel .ep-waiting, .drawer-body .ep-waiting { flex: 1; min-width: 160px; }
.edit-panel .ep-chain, .drawer-body .ep-chain { flex: 1; min-width: 140px; }
.drawer-body textarea { width: 100%; resize: vertical; min-height: 60px; margin-bottom: 8px; }

/* 狀態/優先度小徽章 */
.badge {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: var(--card-soft); color: var(--muted);
}
.badge.s-active { background: rgba(110, 160, 246, 0.18); color: var(--accent); }
.badge.s-done { background: var(--green-soft); color: var(--green); }
.badge.p-high { background: var(--red-soft); color: var(--red); font-weight: 600; }
.badge.p-mid { background: var(--amber-soft); color: var(--amber); }
.badge.p-low { background: var(--card-soft); color: var(--muted); }
/* 任務類型徽章（20260906）：REVIEW 用紅色，代表「需要你親自判斷」；
   其餘三色沿用既有色票，不新增色碼。 */
.badge.type-design { background: var(--purple-soft); color: var(--purple); }
.badge.type-admin { background: var(--card-soft); color: var(--muted); }
.badge.type-comms { background: rgba(110, 160, 246, 0.18); color: var(--accent); }
.badge.type-review { background: var(--red-soft); color: var(--red); font-weight: 600; }
.cb-wait { margin: 4px 0; }
.cb-wait .waiting-input { width: 100%; margin-top: 2px; }

.complete-btn {
  font-size: 12px; padding: 3px 10px; border: none;
  border-radius: 6px; background: var(--green); color: var(--on-accent); font-weight: 600;
}

/* 封存分頁 */
.arc-group { margin-bottom: 18px; padding-left: 8px; border-radius: 4px; }
.arc-title { font-size: 15px; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--border); display: flex; gap: 8px; align-items: baseline; }
.arc-row { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border-soft); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.arc-chain { font-size: 11px; color: var(--accent); background: rgba(110, 160, 246, 0.14); border-radius: 3px; padding: 0 6px; }
.arc-name { font-weight: 500; }
.arc-outcome { color: var(--muted); }
.arc-restore-btn {
  margin-left: auto; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card-soft); color: var(--muted); cursor: pointer;
}
.arc-restore-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---- inline edit + confirm bar ---- */
.edit-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.confirm-bar {
  margin-top: 4px;
  font-size: 12px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: 6px;
  padding: 6px 8px;
}
.confirm-bar button {
  margin-left: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.confirm-bar .confirm-yes { background: var(--green); color: var(--on-accent); border-color: var(--green); font-weight: 600; }
.confirm-bar .confirm-no { background: var(--card-soft); color: var(--text); }
.confirm-bar-danger { background: var(--red-soft); border-color: var(--red); }
.confirm-bar-danger .confirm-yes { background: var(--red); border-color: var(--red); color: var(--on-accent); }

/* ---- 新增表單 ---- */
.create-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}
.create-form .cf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.create-form .cf-row > label { color: var(--muted); }
.create-form input[type=text] { min-width: 200px; }

/* ---- 🎨 專案設定 ---- */
#psAddRow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  padding: 10px 14px; margin-bottom: 12px;
}
.ps-row {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  padding: 8px 12px; margin-bottom: 6px;
}
.ps-row-main { display: flex; align-items: center; gap: 10px; }
.ps-row-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding-top: 6px; border-top: 1px dashed var(--border);
  color: var(--muted); font-size: 13px;
}
.ps-row-status label { display: flex; align-items: center; gap: 6px; }
.ps-row-status input[type=text], .ps-row-status select { width: 140px; }
.ps-row-status input[type=date] { width: 140px; }

.ps-notes-label { flex: 1; min-width: 200px; }
.ps-notes-label textarea { flex: 1; min-width: 160px; resize: vertical; font-family: inherit; font-size: 13px; }
.ps-color { width: 36px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; }
.ps-color-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.ps-color-toggle {
  width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-soft); cursor: pointer; font-size: 12px;
}
.ps-color-toggle:hover { border-color: var(--accent); }
.ps-swatches {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: 130px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 6px;
}
.ps-swatches.ps-swatches-static { position: static; width: auto; background: none; border: none; padding: 0; }
.ps-swatch, .ps-new-swatch {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); cursor: pointer;
}
.ps-name { flex: 1; font-weight: 600; }
.ps-days-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.ps-days { width: 70px; }
.ps-weekly-label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.ps-save {
  font-size: 12px; padding: 4px 12px; border: 1px solid var(--accent);
  border-radius: 6px; background: rgba(110, 160, 246, 0.14); color: var(--accent); font-weight: 600;
}
.create-form .cf-wide { flex: 1; }
.create-form input[type=number] { width: 80px; }
.create-form .cf-check { color: var(--text) !important; }
.cf-check-master {
  font-weight: 700; color: var(--red) !important;
  border: 1px solid var(--red); border-radius: 6px; padding: 2px 8px;
}
.cf-more-toggle {
  font-size: 12px; padding: 3px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card-soft); color: var(--muted); margin-bottom: 8px;
}
.create-form button {
  font-size: 13px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-soft);
  color: var(--text);
}
#newTaskBtn, #newPracticeBtn, #projRenameBtn {
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}
#newTaskBtn:hover, #newPracticeBtn:hover { border-color: var(--accent); }