/* 待办事项模块样式（V0.3.11 基础版）
 * 通用外观（卡片 / 网格 / 统计块 / 按钮 / 表单行）直接复用 app.css 的全局类，
 * 这里只写待办特有的类，统一 tk- 前缀，避免与其他模块冲突；配色走全局浅色 token。
 */
.tk-quick-row { display: flex; gap: 8px; margin-bottom: 4px; }
.tk-quick {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14.5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; color: var(--ink); outline: none;
}
.tk-quick:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.tk-bar { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
/* 筛选：与时间记录「记录 / 统计」一致的分段控件 */
.tk-filters { display: flex; gap: 6px; background: #eceff7; border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.tk-filter { background: transparent; border: 0; color: var(--ink2); padding: 5px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; transition: .15s; }
.tk-filter:hover { color: var(--ink); }
.tk-filter.active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(15,23,42,.10); }
.tk-spacer { flex: 1; }
.tk-stats { margin-bottom: 14px; }
.tk-stats .stat { padding: 12px 14px; }

/* 列表 */
.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; box-shadow: var(--shadow);
}
.tk-item.done { background: #fbfcfe; }
.tk-item.done .tk-title { text-decoration: line-through; color: var(--ink2); }
.tk-check { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { font-size: 14.5px; cursor: pointer; word-break: break-word; }
.tk-title:hover { color: var(--accent); }
.tk-note { color: var(--ink2); font-size: 13px; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.tk-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--ink2); }
.tk-pri { font-size: 11px; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); background: #f6f8fc; color: var(--ink2); }
.tk-pri.p-high { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.tk-pri.p-mid  { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.tk-pri.p-low  { background: #f1f5f9; color: #64748b; }
.tk-due { font-weight: 600; }
.tk-due.overdue { color: #dc2626; }
.tk-due.today { color: #b45309; }
.tk-due.soon { color: var(--accent); }
.tk-ops { display: flex; gap: 4px; flex: 0 0 auto; }
.tk-icon-btn { background: transparent; border: 0; color: var(--ink2); cursor: pointer; width: 26px; height: 26px; border-radius: 6px; font-size: 13px; font-family: inherit; }
.tk-icon-btn:hover { background: #fee2e2; color: #dc2626; }

.tk-empty { text-align: center; color: var(--ink2); padding: 44px 20px; background: var(--card); border: 1px dashed #cbd5e1; border-radius: 14px; font-size: 14px; }

/* 弹窗（原生 dialog + 自绘卡片，手机端浏览器不拦原生 confirm/dialog） */
.tk-dlg { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); color: var(--ink); background: transparent; }
.tk-dlg::backdrop { background: rgba(15, 23, 42, .4); }
.tk-modal-card { background: var(--card); border-radius: 16px; box-shadow: 0 24px 64px rgba(15,23,42,.25); padding: 20px; }
.tk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tk-modal-head h2 { margin: 0; font-size: 17px; }
.tk-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* 待办图片（缩略图/预览复用全局 .img-thumb / .img-thumbs，这里只补对齐间距） */
.tk-img-bar { display: flex; align-items: center; gap: 10px; }
.tk-img-preview { margin-top: 6px; }
.tk-item-imgs { margin-top: 6px; }

@media (max-width: 560px) {
  .tk-quick-row { flex-wrap: wrap; }
  .tk-bar { gap: 6px; }
  .tk-item { padding: 10px 11px; }
}