/* ============================================================
CSS 前缀归属（组件级命名空间，新组件先认领前缀再写样式）：
sn- SideNav | ep- EditPanel | td- TodoItem/条目行 | ds- DayDateStrip
tl- 统计时间轴 | qa- QuickAdd | cal- 日历格 | vm- ViewMoreMenu
tg- TodoGroupBlock | rc- RecycleBin | rm- RepeatModal | w- 浮窗(WinControls/悬浮窗)
form- SettingsModal | dropdown- 通用下拉 | main-nav- 侧栏主导航区
无前缀 = 设计稿沿用区（原版全局类，勿与新组件混用）
============================================================ */
/* ===== 自 base.css 迁入（QuickAdd qa-，内容逐字未改；置于头部以保持原级联顺序 base < 本文件）===== */
.qa-wrap { flex: 1; }
.qa-bar { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.qa-inputwrap {
position: relative; flex: 1; display: flex; align-items: center;
background: var(--gray-bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
transition: border-color .2s, box-shadow .2s;
}
.qa-inputwrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 157, 143, .08); background: var(--panel, #fff); }
/* 日历按钮壳：透明 el-date-picker 铺满按钮，点击即弹标准日历面板 */
.qa-cal { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; z-index: 2; cursor: pointer; }
.qa-cal .todo-input-add__calender { position: static; width: 100%; height: 100%; }
.qa-cal .qa-cal-picker.el-date-editor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.qa-cal .qa-cal-picker .el-input__inner { width: 100%; height: 100%; cursor: pointer; }
.qa-input { flex: 1; height: 46px; border: 0; background: none; padding: 0 16px; font-size: var(--fs-md); color: var(--text-1); border-radius: var(--radius-lg); }
.qa-input::placeholder { color: #8a9099; }
.qa-date-chip {
display: inline-flex; align-items: center; gap: var(--space-1); margin-right: 12px;
color: var(--brand); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.qa-date-chip img { width: 13px; height: 13px; }
.qa-dots { display: none; }
.qa-pop {
position: absolute; top: 52px; left: 0; right: 40px; z-index: var(--z-list-pop);
background: var(--panel, #fff); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); color: var(--text-2);
}
.qa-row { display: flex; align-items: center; gap: 8px; }
/* 6. 快捷添加的日期 chip pop 出场（原为生硬 fade） */
.qa-date-chip { animation: qa-chip-pop .15s cubic-bezier(.2, .8, .2, 1); }
@keyframes qa-chip-pop { from { opacity: 0; transform: scale(.85); } }
/* ============================================================
style-1.css —— 列表类页面（最近待办/待办箱/已达成/回收站/标签/清单）基础样式
来源: 构建产物 A / 构建产物 B
处理: 选择器已去 [data-v-*] 作用域；url(../img/*) 改写为 ../img/*；
设计稿「TodoBoxListItem」与「RecycleBinItem」编译后共用 .todo-box-list-item 类名
但两套规则不同，本文件分别以 .todo-box-list / .todo-list 祖先限定以互不覆盖；
K 节为本实现的最小适配补充，其余均为沿用既有规则。
============================================================ */
/* ---- A. 页面骨架（旧 TodoPageLayout）---- */
.page{display:flex;flex-direction:column;box-sizing:border-box;height:100%;overflow:hidden}
.page__header{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;padding:18px;box-shadow:0 2px 4px hsla(0,0%,91.4%,.5)}
.page__header--no-shadow{box-shadow:none}
.page__header--has-title-bar{padding-top:30px}
.page__top{display:flex;flex-shrink:0;gap:18px;align-items:center}
.page__main{flex:1;height:100%;overflow:auto}
.page__main--has-padding{padding:0 25px 25px}
.page__todo-list-multi-select{position:absolute;right:10px;bottom:10px;left:10px;z-index:1}
.page__todo-list-multi-select-placeholder{height:66px}
/* ---- B. 页头标题行（原 待办箱 a2d07ad4 / 已达成 7231d7ac / 回收站 12870041 合并）---- */
.title{display:flex;justify-content:space-between;line-height:28px}
.title__prepend{display:flex;gap:8px;align-items:center}
.title__text{font-size:16px}
.title__append{display:flex;align-items:center;gap:18px}
.title__append .icon-button>i{font-size:20px}
/* ---- C. 页头左侧图标（资源沿用，按视图根类区分）---- */
.icon-prepend{display:block;width:20px;height:20px;background-repeat:no-repeat;background-position:50%;background-size:contain}
.box-page .icon-prepend{background-image:url(../img/icon-main-nav-todobox.svg)}
.completed-page .icon-prepend{background-image:url('data:image/svg+xml;utf8,')}
.recycle-page .icon-prepend{background-image:url('data:image/svg+xml;utf8,')}
.icon-append{display:block;color:var(--text-4);font-size:16px;line-height:20px}
/* ---- D. 空状态（原 TodoListEmpty scoped）---- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:transparent}
.empty__icon{width:200px;height:120px;background:url(../img/todo-list-empty.svg);background-size:200px 120px}
.empty__text{margin-top:12px;color:var(--text-3); /* text-dim #9b9b9b 白底2.8:1(axe serious) */font-weight:400;font-size: var(--fs-md);line-height:18px}
.empty--full{position:absolute;top:0;right:0;bottom:0;left:0}
/* ---- E. 分组列表（原 TodoListItemGroup d79a80b2 / GroupList 5f948ac6 / GroupContainer bc3cef5e）---- */
.todo-list-item-group{padding:6px 0;background-color:var(--panel, #fff);box-shadow:0 2px 4px hsla(0,0%,91.4%,.5);border-top:1px solid var(--line)}
.todo-list-item-group:focus{outline:0}
.todo-list-item-group:hover{background-color:var(--hover-bg)}
.todo-list-item-group:active{background-color:var(--active-bg)}
.todo-list-item-group__header-container{display:flex;gap:6px;align-items:center;margin:0 18px}
.todo-list-item-group__header{display:flex;flex-shrink:0;align-items:center;height:26px;padding:0 8px;transition:all .3s cubic-bezier(.23,1,.32,1)}
.todo-list-item-group__header:hover{filter:brightness(.95)}
.todo-list-item-group__header-append{display:flex;flex-shrink:0;align-items:center;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1)}
.todo-list-item-group__header-container:hover .todo-list-item-group__header-append{opacity:1}
.todo-list-item-group__btn-settings{color:var(--text-4);cursor:pointer}
.todo-list-item-group__title{flex:1;margin-right:20px;margin-left:6px;color:var(--text-3);font-size: var(--fs-base)}
/* 分组标题不可编辑：用默认箭头，禁文字选中（避免 I 型输入光标与双击误选） */
.todo-list-item-group__header,
.todo-list-item-group__title { cursor: default; }
.todo-list-item-group__header-append { cursor: pointer; }
.todo-list-item-group__count{flex-shrink:0;color:#a0a0a0;font-size: var(--fs-base)}
.todo-list-item-group__arrow{display:flex;flex-shrink:0;justify-content:center;color:var(--text-4);font-size: var(--fs-sm);transition:all .3s cubic-bezier(.23,1,.32,1)}
.todo-list-item-group--collapsed{box-shadow:none}
.todo-list-item-group--collapsed .todo-list-item-group__arrow{transform:rotate(-90deg)}
.todo-list-item-group--color2 .todo-list-item-group__title{color:var(--danger-strong)}
.todo-list-item-group--color3 .todo-list-item-group__title{color:#4053d8} /* 品牌蓝加深 6.09:1 */
.todo-list-item-group-list{display:flex;flex-direction:column;min-height:100%;box-sizing:border-box}
/* 分组列表与今日待办同构:普通文档流滚动,禁用sticky(整组sticky会吞掉高于视口的组,组头sticky则与今日待办行为不一致) */
.todo-list-item-group-list .todo-list-item-group{position:static}
.todo-list-item-group-container__list{overflow:hidden;transform-origin:top;transition:all .3s cubic-bezier(.23,1,.32,1)}
.todo-list-item-group-container__list .todo-list-item:last-child{border-bottom:none}
/* ---- F1. 待办箱条目（原 TodoBoxListItem scoped，限定于 .todo-box-list 下）---- */
.todo-box-list .todo-box-list-item{position:relative;border-bottom:1px solid var(--line);background-color:var(--panel, #fff);padding:10px 26px;transition:all .3s cubic-bezier(.23,1,.32,1);box-sizing:border-box;display:flex}
.todo-box-list .todo-box-list-item__append,.todo-box-list .todo-box-list-item__prepend{flex-shrink:0}
.todo-box-list .todo-box-list-item__category-dot{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px;font-size: var(--fs-sm)}
.todo-box-list .todo-box-list-item__category-dot>svg{display:block}
.todo-box-list .todo-box-list-item__container{flex:1;overflow:hidden}
.todo-box-list .todo-box-list-item__content{display:-webkit-box;overflow:hidden;color:var(--text-1);font-weight:400;font-size: var(--fs-base);line-height:20px;white-space:pre-line;text-overflow:ellipsis;overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.todo-box-list .todo-box-list-item__workload{position:absolute;top:8px;left:0;bottom:8px;background-color:transparent;width:3px}
.todo-box-list .todo-box-list-item__workload--lv2{background-color:#f49a4f}
.todo-box-list .todo-box-list-item__workload--lv3{background-color:var(--danger)}
.todo-box-list .todo-box-list-item__tools{display:flex;gap:15px}
.todo-box-list .todo-box-list-item:hover{background-color:var(--hover-bg)}
.todo-box-list .todo-box-list-item:active{background-color:var(--active-bg)}
.todo-box-list .todo-box-list-item--is-drop{pointer-events:none}
.todo-box-list .todo-box-list-item--is-drop:active,.todo-box-list .todo-box-list-item--is-drop:hover{background-color:var(--hover-bg)}
.todo-box-list .todo-box-list-item--is-drag{background-color:var(--active-bg)}
.todo-box-list .todo-box-list-item--selected,.todo-box-list .todo-box-list-item--selected:hover{background-color:#f5fafb}
/* ---- F2. 回收站条目（原 RecycleBinItem scoped，限定于 .todo-list 下）---- */
.todo-list .todo-box-list-item{position:relative;border-bottom:1px solid var(--line);background-color:var(--panel, #fff);padding:20px 26px;transition:all .3s cubic-bezier(.23,1,.32,1);box-sizing:border-box;display:flex;gap:15px}
.todo-list .todo-box-list-item__append,.todo-list .todo-box-list-item__prepend{flex-shrink:0}
.todo-list .todo-box-list-item__container{flex:1}
.todo-list .todo-box-list-item__content{display:-webkit-box;overflow:hidden;color:var(--text-1);font-weight:400;font-size: var(--fs-base);line-height:20px;white-space:pre-line;text-overflow:ellipsis;overflow-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:12px}
.todo-list .todo-box-list-item__content--del{text-decoration:line-through}
.todo-list .todo-box-list-item__workload{position:absolute;top:8px;left:0;bottom:8px;background-color:transparent;width:3px}
.todo-list .todo-box-list-item__workload--lv2{background-color:#f49a4f}
.todo-list .todo-box-list-item__workload--lv3{background-color:var(--danger)}
.todo-list .todo-box-list-item__tools{display:flex;gap:15px}
.todo-list .todo-box-list-item:hover{background-color:var(--hover-bg)}
.todo-list .todo-box-list-item:active{background-color:var(--active-bg)}
.todo-list .todo-box-list-item--is-drop{pointer-events:none}
.todo-list .todo-box-list-item--is-drop:active,.todo-list .todo-box-list-item--is-drop:hover{background-color:var(--hover-bg)}
.todo-list .todo-box-list-item--is-drag{background-color:var(--active-bg)}
.todo-list .todo-box-list-item--selected,.todo-list .todo-box-list-item--selected:hover{background-color:#f5fafb}
/* F2 补充（原 bd75649e 作用域，此前抽取遗漏）：日期后缀 12px 灰字 + 药丸操作组 */
.todo-list .datetime{color:var(--text-dim);font-weight:400;font-size: var(--fs-sm);line-height:30px;white-space:nowrap}
.todo-list .btn-group{display:flex}
.todo-list .btn-group>.btn:first-of-type{border-top-left-radius:5px;border-bottom-left-radius:5px}
.todo-list .btn-group>.btn:last-of-type{border-top-right-radius:5px;border-bottom-right-radius:5px}
.todo-list .todo-box-list-item__tools .btn{
position:relative;overflow:hidden;color:var(--brand-dark);font-size: var(--fs-sm);font-weight:400;line-height:16px;
padding:5px 10px;background-color:var(--tomato-bg);border:none;cursor:pointer;
}
.todo-list .todo-box-list-item__tools .btn:focus,.todo-list .todo-box-list-item__tools .btn:hover{filter:brightness(.9);outline:0}
.todo-list .todo-box-list-item__tools .btn:active{filter:brightness(.8)}
/* 「选择日期」按钮内嵌透明 el-date-picker（同 .qa-cal 手法），铺满按钮点击即弹 */
.todo-list .rc-pick{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border:0;padding:0;background:none;cursor:pointer}
/* 彻底删除（原版无此钮、我方补充）：红字浅红底，与组内药丸同形 */
.todo-list .btn--danger.rc-danger-btn{color:var(--danger) !important;background-color:#fdecea !important}
.todo-list .btn--danger.rc-danger-btn:hover{color:var(--danger-strong) !important}
/* ---- G. 设计稿圆形勾选（原 TodoBoxListItem 多选态 .checkbox）---- */
.checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:20px;color:var(--text-4);font-size:18px;cursor:pointer}
.checkbox>svg{display:block}
.checkbox--active{color:#0f9d8f}
/* ---- H. 条目日期前缀色（原 .datetime--*）---- */
.datetime--primary{color:var(--brand-dark)}
.datetime--alert{color:#bd401e}
.datetime--gray{color:var(--text-dim)}
/* ---- I. 工具栏下拉 label（原 DropdownSelect 的 .dropdown-select__label）---- */
.dropdown-select{display:flex;gap:8px}
.dropdown-select__label{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;line-height:20px;border-radius:var(--radius-pill);font-size:var(--fs-md);color:var(--text-2);cursor:pointer;transition:background .15s,color .15s}
.dropdown-select__label:hover{background:var(--gray-bg);color:var(--text-1)}
.dropdown-select__label:active{background:var(--line)}
.dropdown-select.is-open .dropdown-select__label{background:var(--gray-bg);color:var(--text-1)}
.dropdown-select__label:disabled{cursor:not-allowed;opacity:.5}
.dropdown-select__label:disabled:hover{background:transparent}
.dropdown-select__label--placeholder{color:var(--text-3)}
/* ---- J. 提示问号（原 已达成页 .tip-icon）与分组设置按钮（原 __btn-settings cog）---- */
.tip-icon{color:var(--text-4)}
.tip-icon>svg,.icon-append>svg{display:block}
/* 裸文字按钮仅限待办箱条目（旧 scoped id）；回收站条目用原版药丸组（见 F2 补充） */
.todo-box-list .todo-box-list-item__tools .btn{padding:0;color:var(--brand-dark);font-size: var(--fs-sm);background:none;border:none;cursor:pointer;transition:all .2s}
.todo-box-list .todo-box-list-item__tools .btn:focus{outline:0}
.todo-box-list .todo-box-list-item__tools .btn:hover{color:var(--brand-hover)}
.todo-box-list .todo-box-list-item__tools .btn:active{color:var(--brand-active)}
.todo-box-list .todo-box-list-item__tools .btn--dark{color:#4f4f4f}
.todo-box-list .todo-box-list-item__tools .btn--dark:focus{outline:0}
.todo-box-list .todo-box-list-item__tools .btn--dark:hover{color:#474747}
.todo-box-list .todo-box-list-item__tools .btn--dark:active{color:#3b3b3b}
/* ---- K. 实现适配补充（设计稿无对应规则的最小 glue，均注明用途）---- */
/* 外层布局 .view-head 已承担快捷添加条；无独立 page__header 的视图在滚动区补回原 header 上内边距节奏 */
.page__main--flow-top{padding-top:18px}
/* 视图根为 .page 时占满滚动区高度（避免 .main-scroll 无高度参照） */
.main-scroll>.page{min-height:100%}
/* 完成/标签/清单等页在条目右侧的悬停操作（恢复为未完成等），颜色取自设计稿 .btn-group .btn */
.row-btn{flex-shrink:0;align-self:center;margin-right:14px;padding:0;color:var(--brand-dark);font-size: var(--fs-sm);background:none;border:none;cursor:pointer;transition:all .2s;opacity:0}
.row-btn:hover{color:var(--brand-hover)}
.row-btn:active{color:var(--brand-active)}
.row-btn.danger{color:var(--danger)}.row-btn.danger:hover{color:var(--danger-strong)}
.done-row-orig{display:flex;align-items:stretch}.done-row-orig>:first-child{flex:1;min-width:0}
/* 分组行展开箭头字符尺寸与垂直居中 */
.todo-list-item-group__arrow svg{width:12px;height:12px;display:block}
.todo-list-item-group__btn-settings-char{font-size: var(--fs-base);line-height:1;font-style:normal}
/* 待办箱：分类圆点使用圆形图标（原为 font-awesome far/fas circle），此处由内联 SVG 承担 */
.todo-box-list-item__category-dot svg{width:12px;height:12px;display:block}
.todo-list .todo-box-list-item__category-dot svg{width:12px;height:12px;display:block}
.checkbox svg{width:16px;height:16px;display:block}
/* 分组内条目与设计稿一致的「最后一行去底线」规则（我方行类为 .td-item） */
.todo-list-item-group-container__list .td-item:last-child{border-bottom:none}
/* 工具栏下拉菜单（原 DropdownSelect 的弹出层无独立样式文件，按设计稿设计语言补齐：白底/分隔/主色高亮） */
.dd-menu{list-style:none;margin:0 -4px;padding:0;font-size: var(--fs-sm);color:var(--text-1)}
.dd-menu li{padding:7px 16px;cursor:pointer;white-space:nowrap;border-radius: var(--radius-md)}
.dd-menu li:hover{background:var(--gray-bg, #f5f7fa)}
.dd-menu li.on{color:var(--brand);font-weight:600}
/* 下拉面板（popper 挂 body，须 popper-class 钩住）：紧内边距+圆角投影，过渡 120ms 干脆利落 */
.dd-pop{--el-popover-padding:6px;border-radius:var(--radius-lg) !important;box-shadow:0 10px 32px rgba(0,0,0,.13) !important}
.dd-menu li{padding:7px 12px}
.dd-pop.el-fade-in-linear-enter-active{transition:opacity .12s ease,transform .12s ease}
.dd-pop.el-fade-in-linear-enter-from{opacity:0;transform:translateY(-5px) scale(.97)}
.dd-pop.el-fade-in-linear-leave-active{transition:opacity .06s ease-out;pointer-events:none}
.dd-pop.el-fade-in-linear-leave-to{opacity:0}
.dd-caret{font-style:normal;font-size:0;line-height:1;flex-shrink:0}
.dd-caret::before{content:"";display:block;width:6px;height:6px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg) translate(-1px,-1px);transition:transform .18s,border-color .15s}
.dropdown-select__label:hover .dd-caret::before{border-color:var(--text-2)}
.dropdown-select.is-open .dd-caret::before{transform:rotate(225deg) translate(-1px,-1px)}
.dd-q,.tip-q{
width:16px;height:16px;margin-left:2px;border:1px solid currentColor;border-radius:50%;
font-size: var(--fs-xs);line-height:15px;text-align:center;text-indent:1px;cursor:pointer;
color:var(--text-4);flex-shrink:0;
}
.tip-q{margin-left:8px;color:var(--text-4);border-color:var(--text-4)}
/* 回收站页头计数与危险按钮微调（颜色取自设计稿 var(--danger) 系） */
.rc-count{font-size: var(--fs-sm);color:var(--text-dim)}
/* 回收站条目完成勾选框：复用 .td-check 形态，勾选后标题删除线弱化 */
.todo-list .todo-box-list-item__container{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:10px}
.todo-list .todo-box-list-item__tools{flex-basis:100%;margin-top:8px}
.todo-list .rc-check{flex-shrink:0}
.todo-list .rc-done{text-decoration:line-through;color:var(--text-3)}
.todo-list .rc-editable{cursor:pointer;border-radius: var(--radius-md)}
.todo-list .rc-editable:hover{background:rgba(0,0,0,.04)}
.rc-danger-btn{color:var(--danger) !important}
.rc-danger-btn:hover{color:var(--danger-strong) !important}
.el-button--danger{background:var(--danger);border-color:var(--danger)}
.el-button--danger:hover,.el-button--danger:focus{background:var(--danger-strong);border-color:var(--danger-strong)}
/* 已达成页提示气泡文案列表（原 TipCompleted 内容，样式按设计稿 tip 12px 灰字） */
.tip-completed-list{list-style:none;margin:0;padding:0;font-size: var(--fs-sm);color:var(--text-2);line-height:20px}
.tip-completed-list li{padding:2px 0}
/* 条目右侧悬停操作按钮的显示时机：悬停所在行时出现 */
.done-row-orig:hover .row-btn,.todo-box-list-item__tools{opacity:1}
/* 待办箱圆点 = 完成入口（与其他视图勾选圈同语义）：悬停描边高亮，键盘可达 */
.tb-dot-check { cursor: pointer; border-radius: 50%; transition: transform .15s, box-shadow .15s, opacity .15s; }
.tb-dot-check:hover { box-shadow: 0 0 0 2px var(--brand-light); opacity: .85; }
.tb-dot-check:active { transform: scale(.88); }
.tb-dot-check:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }