/* Tasks Module Styles (Home Page) */
/* 命名空间: .hf-task-*  避免与其他列表冲突 */

#hf-tasks-wrapper {
  --task-gap: 6px;
  --task-radius: 6px;
  --task-bg: var(--color-bg-soft, #f7f8fa);
  --task-border: var(--color-border, #e2e8f0);
  --task-progress-bg: var(--color-bg-alt, #eceff3);
  --task-progress-fill: var(--color-accent, #3b82f6);
  --task-text-light: var(--color-text-light, #6b7280);
  --task-text: var(--color-text, #222);
  position: relative;
}

/* 头部区域通用样式 */
.hf-block-head,
#hf-tasks-wrapper .hf-block-head,
.tasks-center-card .hf-block-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* 恢复水平居中 */
}

#hf-tasks-wrapper .hf-block-head {
  gap: 8px;
  /* margin-top 和 margin-bottom 移除，实现完全垂直水平居中 */
}

.tasks-center-card .hf-block-head {
  margin: -7px 0 4px;
  padding-top: 2px;
  min-height: 22px;
}

.task-refresh-btn {
  appearance: none;
  background: var(--task-bg);
  color: var(--task-text-light);
  border: 1px solid var(--task-border);
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.task-refresh-btn:hover {
  background: var(--task-progress-fill);
  color: #fff;
  border-color: var(--task-progress-fill);
}
.task-refresh-btn:active {
  transform: scale(0.92);
}
.task-refresh-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 基础任务列表样式 - 可被 #hf-tasks-wrapper 和 .tasks-center-card 共用 */
.hf-task-list,
.tasks-center-card .hf-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.hf-task-list {
  gap: var(--task-gap);
}

.tasks-center-card .hf-task-list {
  gap: 8px;
  overflow: visible;
}

/* 自适应填充模式（<=3 条时触发）：让任务块均分容器高度 */
.hf-task-list.tasks-fill {
  /* height 由 JS 注入 */
  /* 占位属性避免空规则 lint 警告 */
  --tasks-fill: 1;
}
.hf-task-list.tasks-fill .hf-task-item {
  display: flex;
  flex-direction: column;
}

/* 新：flex 均分模式（<=3 条且自然高度不足时启用） */
.hf-task-list.tasks-flex-grow {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.hf-task-list.tasks-flex-grow .hf-task-item {
  flex: 1 1 auto;
  min-height: var(--auto-min, auto);
  display: flex;
  flex-direction: column;
  transition: min-height 0.35s ease, padding 0.25s ease;
}
.hf-task-list.tasks-flex-grow .hf-task-item .task-progress-bar {
  margin-top: auto;
}

/* 固定高度映射模式 */
.hf-task-list.tasks-fixed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--task-gap);
}
.hf-task-list.tasks-fixed .task-fixed-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 14px;
  gap: 8px;
  transition: min-height 0.3s ease, padding 0.25s ease;
}
/* 确保进度条始终在底部 */
.hf-task-list.tasks-fixed .task-fixed-item .task-progress-bar {
  margin-top: auto;
}
/* 单任务特殊样式 */
.hf-task-list.tasks-fixed-single {
  min-height: 110px;
  align-items: stretch;
}
.hf-task-list.tasks-fixed-single .task-fixed-item {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 14px 16px;
}
/* 双任务和三任务样式 */
.hf-task-list.tasks-fixed:not(.tasks-fixed-single) .task-fixed-item {
  padding: 10px 12px;
}

/* 单任务置中显示 */
.hf-task-list.tasks-single-center {
  min-height: 180px;
  display: flex;
  justify-content: center;
}
.hf-task-list.tasks-single-center .hf-task-item {
  justify-content: center;
  align-items: flex-start;
  min-height: auto !important;
  transition: transform 0.3s ease;
}
.hf-task-list.tasks-single-center .hf-task-item .task-updated-line {
  display: none;
}

.hf-task-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 下调底部 padding 1px 以替代 JS 中的 +1 高度补偿 */
  padding: 10px 12px 10px;
  background: var(--task-bg);
  border: 1px solid var(--task-border);
  border-radius: var(--task-radius);
}

/* 新：单行头部：标题在左，进度+状态在右 */
.hf-task-item .task-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0; /* 允许文本截断 */
}
.hf-task-item .task-head-row .task-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hf-task-item .task-head-meta {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 8px;
  font-size: 12px;
  color: var(--task-text-light);
  white-space: nowrap;
}
.hf-task-item .task-head-meta .task-progress-text {
  font-variant-numeric: tabular-nums;
}

/* 更新时间细行（若存在） */
.hf-task-item .task-updated-line {
  font-size: 10px;
  line-height: 1.2;
  color: var(--task-text-light);
  margin-top: -2px; /* 进一步压缩垂直空间 */
}

/* 紧凑模式：空间不足时缩小前三条任务高度 */
.hf-task-list.tasks-compact {
  --task-gap: 4px;
}
.hf-task-list.tasks-compact .hf-task-item {
  /* bottom -1 */
  padding: 6px 8px 6px;
  gap: 3px;
}
.hf-task-list.tasks-compact .task-title {
  font-size: 12px;
  line-height: 1.35;
}
.hf-task-list.tasks-compact .task-meta {
  font-size: 10px;
  gap: 8px;
}
.hf-task-list.tasks-compact .task-progress-bar {
  height: 5px;
}

/* 第二级压缩：进一步减小内边距 / 字号 / 间距 */
.hf-task-list.tasks-compact.tasks-compact-2 .hf-task-item {
  /* bottom -1 */
  padding: 5px 7px 5px;
  gap: 2px;
}
.hf-task-list.tasks-compact.tasks-compact-2 .task-title {
  font-size: 11.5px;
  line-height: 1.3;
}
.hf-task-list.tasks-compact.tasks-compact-2 .task-meta {
  font-size: 9.5px;
  gap: 6px;
}
.hf-task-list.tasks-compact.tasks-compact-2 .task-progress-bar {
  height: 4px;
}

/* 第三级压缩：极限模式（保证完全可见，不考虑轻微观感损失） */
.hf-task-list.tasks-compact.tasks-compact-2.tasks-compact-3 .hf-task-item {
  /* bottom -1 */
  padding: 4px 6px 4px;
  gap: 1px;
}
.hf-task-list.tasks-compact.tasks-compact-2.tasks-compact-3 .task-title {
  font-size: 11px;
  line-height: 1.25;
}
.hf-task-list.tasks-compact.tasks-compact-2.tasks-compact-3 .task-meta {
  font-size: 9px;
  gap: 4px;
}
.hf-task-list.tasks-compact.tasks-compact-2.tasks-compact-3 .task-progress-bar {
  height: 3px;
}

/* 第四级极限压缩：合并 meta 行距，最小可读尺寸 */
.hf-task-list.tasks-compact-4 .hf-task-item {
  /* bottom -1 */
  padding: 3px 5px 3px;
  gap: 0;
}
.hf-task-list.tasks-compact-4 .task-title {
  font-size: 10.5px;
  line-height: 1.22;
}
.hf-task-list.tasks-compact-4 .task-meta {
  font-size: 8.5px;
  gap: 3px;
  line-height: 1.1;
}
.hf-task-list.tasks-compact-4 .task-progress-bar {
  height: 3px;
  margin-top: 2px;
}
.hf-task-item[data-status="done"] {
  opacity: 0.72;
}
.hf-task-item[data-status="done"] .task-title {
  text-decoration: line-through;
}

.task-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--task-text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 旧 .task-meta 样式已不再使用（保留以防缓存旧 DOM） */
.task-meta {
  display: none !important;
}

/* Progress bar */
.task-progress-bar {
  position: relative;
  height: 8px;
  background: var(--task-progress-bg);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0; /* 防止被压缩 */
}
.task-progress-bar span {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--task-progress-fill),
    var(--task-progress-fill)
  );
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.4, 0.1, 0, 1);
}
.hf-task-item[data-status="done"] .task-progress-bar span {
  width: 100% !important;
}
/* 固定模式下进度条样式增强 */
.hf-task-list.tasks-fixed .task-fixed-item .task-progress-bar {
  height: 8px;
  min-height: 8px;
}

/* 任务悬停时进度条光效 */
.hf-task-list.tasks-fixed .hf-task-item:hover .task-progress-bar > span {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 0 6px -1px rgba(var(--color-primary-rgb, 91, 143, 249), 0.85),
    0 0 14px -2px rgba(var(--color-primary-rgb, 91, 143, 249), 0.55);
}

[data-theme="dark"]
  .hf-task-list.tasks-fixed
  .hf-task-item:hover
  .task-progress-bar
  > span {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 6px -1px rgba(var(--color-primary-rgb, 91, 143, 249), 0.9),
    0 0 16px -2px rgba(var(--color-primary-rgb, 91, 143, 249), 0.65);
}

/* skeleton loading */
.hf-task-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hf-task-skel-row {
  height: 14px;
  background: var(--task-progress-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.hf-task-skel-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 40%,
    transparent 80%
  );
  animation: task-shimmer 1.1s linear infinite;
}

@keyframes task-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* 空状态通用样式 */
.hf-task-empty,
#task-empty-hint,
.tasks-center-card .hf-task-empty {
  font-size: 12px;
  color: var(--task-text-light);
  margin-top: 6px;
  text-align: center;
}

#task-empty-hint {
  margin-top: 2px;
  padding: 10px 4px 4px;
}

#task-empty-hint strong {
  color: var(--task-text);
}

.tasks-center-card .hf-task-empty {
  font-size: 0.75rem;
}

/* 错误提示 */
.hf-task-error {
  color: #b42318;
  background: #feeceb;
  border: 1px solid #f3b2ae;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}
.dark .hf-task-error {
  color: #ffb4ad;
  background: #3a0f0c;
  border-color: #5a1b17;
}

/* 暗色模式适配 */
.dark #hf-tasks-wrapper {
  --task-bg: rgba(255, 255, 255, 0.05);
  --task-border: rgba(255, 255, 255, 0.13);
  --task-progress-bg: rgba(255, 255, 255, 0.08);
  --task-progress-fill: var(--color-accent, #3b82f6);
  --task-text-light: #9ca3af;
  --task-text: #eef2f7;
}
.dark .task-refresh-btn {
  background: var(--task-bg);
  border-color: var(--task-border);
  color: var(--task-text-light);
}
.dark .task-refresh-btn:hover {
  background: var(--task-progress-fill);
  color: #fff;
}

/* 自适应 */
@media (max-width: 780px) {
  .hf-task-item {
    padding: 8px 8px 9px;
  }
  .task-title {
    font-size: 13px;
  }
  .hf-task-item .task-head-meta {
    font-size: 11px;
  }
}

/* ============================================================
 * 任务中心卡片样式 (tasks-center-card)
 * 从 main.css 迁移而来
 * ============================================================ */
.tasks-center-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

/* .hf-block-head 基础样式已在第16-36行定义 */
/* .hf-task-list 基础样式已在第50-67行定义 */

.tasks-center-card .hf-task-list.is-scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.tasks-center-card .hf-task-list.is-scrollable::-webkit-scrollbar {
  width: 8px;
}

.tasks-center-card .hf-task-list.is-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.tasks-center-card .hf-task-list.is-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

/* .hf-task-empty 基础样式已在第366-387行定义 */

/* 徽章标签 */
.tasks-center-card .hf-block-head .hf-mini-label {
  background: transparent; /* 去掉背景色 */
  color: var(--color-text-secondary, #666); /* 使用次要文字颜色 */
  border: none;
  font-weight: 600; /* 增加字重使其更突出 */
  letter-spacing: 0.5px;
  padding: 0; /* 去掉内边距 */
  font-size: 12px; /* 稍微增大字号 */
  border-radius: 0;
  line-height: 1.1;
  margin: 0;
  box-shadow: none; /* 去掉阴影 */
}

/* 暗色模式 - 任务中心卡片 */
[data-theme="dark"] .tasks-center-card {
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    )
    var(--color-background);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

[data-theme="dark"] .tasks-center-card .hf-block-head .hf-mini-label {
  background: transparent; /* 暗色模式也去掉背景 */
  color: rgba(255, 255, 255, 0.6); /* 暗色模式使用半透明白色 */
  box-shadow: none;
}

[data-theme="dark"] .hf-task-empty,
[data-theme="dark"] .tasks-center-card .hf-task-empty {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"]
  .tasks-center-card
  .hf-task-list.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .tasks-center-card .hf-task-list.is-scrollable {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* 状态样式 */
[data-theme="dark"] .tasks-center-card [data-status="done"],
[data-theme="dark"] .tasks-center-card .is-done {
  opacity: 0.72;
}

[data-theme="dark"] .tasks-center-card [data-status="in-progress"],
[data-theme="dark"] .tasks-center-card .is-in-progress {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border-radius: 6px;
}

[data-theme="dark"] .tasks-center-card [data-status="blocked"],
[data-theme="dark"] .tasks-center-card .is-blocked {
  background: linear-gradient(
    90deg,
    rgba(255, 90, 90, 0.1),
    rgba(255, 90, 90, 0.05)
  );
  border-radius: 6px;
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .tasks-center-card .hf-block-head .hf-mini-label,
  [data-theme="dark"] .tasks-center-card {
    transition: none !important;
  }
}
