/* ============================================================
   「按任务筛选」下拉多选（C2.214）
   ------------------------------------------------------------
   按钮长得跟同一条筛选栏里的 <select> 一致（同高、同边框、同圆角），
   点开浮在下方：搜索框 + 复选清单 + 全选/清空。
   任务名很长，所以按钮只放摘要（全部任务 / 任务名截断 / 已选 N 个），
   完整名字靠 title 与浮层清单里的那一行。

   为什么不用原生 <select multiple>：Windows 上要按住 Ctrl 点，
   而且长任务名在下拉里只剩省略号，选哪个都看不清。
   ============================================================ */

.tf{position:relative;display:inline-flex}

.tf-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;cursor:pointer;
  min-width:130px;max-width:230px;padding:0 10px;height:32px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);
  font-size:13px;line-height:1;text-align:left}
.tf-btn:hover{border-color:var(--line3)}
.tf-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.tf-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-caret{flex:0 0 auto;font-size:10px;color:var(--txt2);transition:transform .14s}
.tf.is-open .tf-caret{transform:rotate(180deg)}

/* 有选中时给按钮一个「正在筛」的痕迹：光看列表分不清是数据少还是筛过了 */
.tf.is-on .tf-btn{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-d);color:var(--blue)}

.tf-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:400px;
  display:flex;flex-direction:column;max-height:360px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);overflow:hidden}
.tf-pop[hidden]{display:none}

/* 复位筛选栏那条全局规则：`.filters input{width:auto;min-width:150px}` 是给日期框写的，
   但它会连带命中浮层里的 checkbox —— 复选框被拉成 150px 宽，任务名被挤到右边，
   深色下那个宽盒子还像一张输入框（C2.216 修）。 */
.tf-pop input[type="checkbox"]{width:13px;height:13px;min-width:0;flex:0 0 auto;margin:0;
  accent-color:var(--brand);cursor:pointer}

.tf-q{width:auto;min-width:0;margin:8px 8px 4px;height:30px;padding:0 9px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;
  background:var(--soft);color:var(--txt)}
.tf-q:focus{outline:none;border-color:var(--brand);background:var(--panel)}

.tf-list{flex:1;min-height:0;overflow:auto;padding:4px 6px 6px}
.tf-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;cursor:pointer}
.tf-item:hover{background:var(--hover)}
/* 已勾的那行给一层淡色底：列表长的时候，一眼看出勾了哪几条，不用逐个看小方块 */
.tf-item:has(input:checked){background:color-mix(in srgb, var(--brand) 9%, transparent)}
.tf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;color:var(--txt)}
.tf-count{flex:0 0 auto;font-size:11.5px}
/* 已选但现在这条数据里没有：淡下去 + 写明「当前无数据」，不然会以为是勾错了 */
.tf-item.is-gone .tf-name{color:var(--txt2);text-decoration:line-through}

.tf-foot{display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-top:1px solid var(--line);background:var(--soft)}
.tf-foot .sp{flex:1}
.tf-foot .btn{height:26px;padding:0 10px;font-size:12.5px}
.tf-none{margin:10px 6px;text-align:center}

/* 按钮右侧那枚结果数：勾完不用去看矩阵也能知道筛出几条 */
.tf-hit{flex:0 0 auto;font-size:11px;font-style:normal;font-weight:700;
  padding:1px 5px;border-radius:999px;background:var(--brand-d);color:var(--brand)}
.tf-hit[hidden]{display:none}