/* ========================================= */
/* 文件：tab2-todo.css                          */
/* 功能：Evol终端 → 智能待办日程                */
/*       ——日期导航头、分类折叠面板、             */
/*        任务条目+自定义复选框、                 */
/*        删除按钮、右滑分类菜单栏               */
/* ========================================= */

/* =========================================
   ✨✨✨ 智能待办日程 2.0 (分类折叠版) ✨✨✨
   ========================================= */

/* --- 1. 日期导航头 (完全保留你的完美设计) --- */
.todo-header-nav { display: flex; justify-content: space-between; align-items: center; background: transparent; border: none; padding: 10px 16px; margin-bottom: 15px; }
.todo-date-display { display: flex; flex-direction: column; align-items: center; }
#todo-date-day { font-size: 20px; font-weight: 700; color: #ffb37a; font-family: sans-serif; }
#todo-date-month { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 2px; font-weight: 600; }
.nav-arrow { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 20px; padding: 5px 10px; cursor: pointer; transition: all 0.2s; }
.nav-arrow:active { color: #fff; transform: scale(1.2); }

.todo-list { display: flex; flex-direction: column; gap: 10px; }

/* --- 2. ✨ 全新：分类折叠面板外壳 ✨ --- */
.todo-category-group {
  margin-bottom: 2px;
  background: rgba(20, 22, 30, 0.4); /* 融入你的深色底 */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

/* 展开时的主题色高亮：使用你的专属金橘色 #ffb37a */
.todo-category-group[open] {
  background: rgba(20, 22, 30, 0.8);
  border: 1px solid rgba(255, 179, 122, 0.3);
}

/* 隐藏原生极丑的黑三角 */
.todo-category-group summary::-webkit-details-marker { display: none; }
.todo-category-group summary { list-style: none; }

.todo-category-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px; /* 适配你要求的紧凑感 */
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  user-select: none;
}

.cat-left { display: flex; align-items: center; gap: 8px; }
.cat-icon { font-size: 16px; }

.cat-right { display: flex; align-items: center; gap: 10px; }
/* 数量角标：使用你的金橘色点缀 */
.cat-count {
  background: rgba(255, 179, 122, 0.15);
  color: #ffb37a;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

.cat-arrow { font-size: 12px; opacity: 0.5; transition: transform 0.3s ease; }
.todo-category-group[open] .cat-arrow { transform: rotate(-180deg); }

/* 内部任务项容器：包裹你的 .todo-item */
.todo-items-container {
  padding: 0 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- 3. 单条任务 (完全保留你的精调间距与黑科技复选框) --- */
.todo-item {
  display: flex;
  align-items: center;
  padding: 4px 6px !important;
  min-height: 36px;
  background: rgba(20, 22, 30, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s;
  position: relative; /* 确保删除按钮能定位 */
  overflow: hidden;
}
.todo-item:active { background: rgba(255, 255, 255, 0.1); }

.todo-content { padding: 0 !important; width: 100%; display: flex; align-items: center; }
.todo-inner-row { display: flex; align-items: center; width: 100%; }

.todo-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  margin: 0 10px 0 0;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 179, 122, 0.5);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  cursor: pointer;
  display: grid; place-content: center;
}
.todo-item input[type="checkbox"]:checked { background: #ffb37a; border-color: #ffb37a; }
.todo-item input[type="checkbox"]:checked::after {
  content: "✔"; position: static; transform: none;
  color: #2a2a2a; font-size: 12px; font-weight: 800; line-height: 1; display: block;
}

.todo-item label { font-size: 13px; line-height: 1.4; margin-top: 2px; color: #fff; flex: 1; }
.todo-item.checked { opacity: 0.6; }
.todo-item.checked label { text-decoration: line-through; color: rgba(255,255,255,0.5); }
.todo-empty {
    text-align: center;
    padding: 2px 0 4px 0; /* 💡 关键：把上下间距改小！上边距 10px，下边距 4px */
    margin-top: -8px; /* 💡 魔法属性：负边距！强行无视重力，把它往上拉！ */
    color: rgba(255, 255, 255, 0.3); /* 稍微提亮一点点让字不那么暗 */
    font-size: 13px; /* 字体稍微收一点更显精致 */
    font-style: italic;
}

.delete-btn { position: absolute; top: 0; bottom: 0; right: 0; width: 60px; display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 0; transition: opacity 0.2s ease; }
.delete-icon-svg { width: 20px; height: 20px; fill: rgba(255, 255, 255, 0.5); transition: all 0.2s ease; }
.delete-btn:active .delete-icon-svg { fill: #ff4d4d; transform: scale(1.1); }

/* ============ ✨ 双向滑动：右滑分类菜单栏 (全宽铺开版) ✨ ============ */
.category-menu {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%; /* ✨ 关键修复：100% 占满整个条目宽度！ */
  display: flex;
  align-items: center;
  justify-content: space-evenly; /* ✨ 关键修复：均匀铺满所有空间 */
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: rgba(20, 22, 30, 0.95); /* 用你的底色盖住，防止文字残影透出 */
}

.cat-swipe-btn {
  width: 46px;  /* 💡 拉宽，形成椭圆的基础 */
  height: 28px; /* 💡 压扁，让它看起来更轻盈 */
  border-radius: 14px; /* 💡 完美的胶囊/椭圆圆角 (高度的一半) */
  background: rgba(255, 179, 122, 0.15); /* ✨ 完美呼应：和数字角标一模一样的底色！ */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; /* 💡 图标缩小一点，让胶囊有呼吸感 */
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  border: 1px solid rgba(255, 179, 122, 0.1); /* 增加极其细腻的同色系描边，提升质感 */
}

.cat-swipe-btn:active {
  transform: scale(1.1); /* 按下时稍微放大一点点 */
  background: rgba(255, 179, 122, 0.35); /* 按下时金橘色变深，提供物理反馈 */
}