/* ═══════════════════════════════════════════════════════════════
   Manzoma Tasks Page Styles
   Phase 2 split: page-specific styles extracted from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → page styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TASKS PAGE — Complete Rebuild v4
   Design: Linear-inspired · RTL-first · Professional PM tool
═══════════════════════════════════════════════════════════════ */

/* ─── Page layout ────────────────────────────────────────────── */
#page-tasks{gap:0;padding:16px 20px 40px}

/* ─── Header card ────────────────────────────────────────────── */
.tp-header{
  background:var(--s0);
  border:1px solid var(--b0);
  border-radius:var(--r);
  box-shadow:var(--sh1);
  margin-bottom:10px;
  overflow:hidden;
}

/* Search row */
.tp-search-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--b0);
}
.tp-search-wrap{
  flex:1;display:flex;align-items:center;gap:8px;
  background:var(--s1);border:1.5px solid var(--b1);
  border-radius:var(--r3);padding:9px 13px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.tp-search-wrap:focus-within{
  border-color:var(--g4);background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.tp-search-icon{color:var(--t4);flex-shrink:0}
.tp-search-input{
  flex:1;border:none;background:transparent;
  font-size:var(--fz-base);color:var(--t1);outline:none;font-family:var(--ff);
}
.tp-search-input::placeholder{color:var(--t4)}
.tp-search-clear{
  background:none;border:none;color:var(--t4);
  font-size:14px;cursor:pointer;padding:0;line-height:1;
  transition:color .12s;
}
.tp-search-clear:hover{color:var(--t1)}

/* Filter toggle button */
.tp-filter-toggle-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:var(--r3);
  border:1.5px solid var(--b1);background:var(--s1);
  font-size:var(--fz-sm);font-weight:600;color:var(--t3);
  cursor:pointer;transition:background .14s,border-color .14s,color .14s;white-space:nowrap;
  flex-shrink:0;font-family:var(--ff);
  position:relative;min-height:36px;
}
.tp-filter-toggle-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.tp-filter-toggle-btn.active{border-color:var(--g4);color:var(--g3);background:var(--g5)}
.tp-filter-toggle-btn.has-filters{border-color:var(--g3);background:var(--g5);color:var(--g3)}
.tp-filter-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--red);color:#fff;border-radius:9px;
  font-size:var(--fz-xs);font-weight:800;
}

/* View switcher */
.tp-view-switcher{
  display:flex;background:var(--s2);border-radius:8px;padding:2px;
}
.tp-view-btn{
  width:34px;height:30px;border-radius:var(--r3);border:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--t4);background:transparent;cursor:pointer;transition:color .14s,background .14s;
}
.tp-view-btn:hover{color:var(--t2)}
.tp-view-btn.active{background:var(--s0);color:var(--g3);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ─── Quick filter tabs ──────────────────────────────────────── */
.tp-quick-tabs{
  display:flex;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;
  padding:0 12px;
  border-bottom:1px solid var(--b0);
}
.tp-quick-tabs::-webkit-scrollbar{display:none}

.tp-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 13px;font-size:var(--fz-sm);font-weight:600;
  color:var(--t3);background:none;border:none;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  border-bottom:2.5px solid transparent;
  margin-bottom:-1px;min-height:42px;
  transition:color .14s,border-color .14s;
  font-family:var(--ff);
}
.tp-tab:hover{color:var(--t1)}
.tp-tab.active{color:var(--g3);border-bottom-color:var(--g3)}
.tp-tab-red.active{color:var(--red);border-bottom-color:var(--red)}
.tp-tab-purple.active{color:var(--purple);border-bottom-color:var(--purple)}
.tp-tab-amber.active{color:var(--amber);border-bottom-color:var(--amber)}
.tp-tab-done.active{color:var(--green);border-bottom-color:var(--green)}

.tp-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:18px;padding:0 5px;
  background:var(--s3);border-radius:9px;
  font-size:var(--fz-xs);font-weight:700;color:var(--t3);
  transition:background .14s,color .14s;
}
.tp-tab.active .tp-tab-count{background:var(--g5);color:var(--g3)}
.tp-tab-red.active .tp-tab-count{background:var(--red-bg);color:var(--red)}
.tp-tab-purple.active .tp-tab-count{background:var(--purple-bg);color:var(--purple)}
.tp-tab-amber.active .tp-tab-count{background:var(--amber-bg);color:var(--amber)}
.tp-tab-done.active .tp-tab-count{background:var(--green-bg);color:var(--green)}
.tp-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0}
.tp-tab-dot-purple{background:var(--purple)}
.tp-tab-dot-amber{background:var(--amber)}
.tp-tab-dot-prog{background:var(--blue)}

/* ─── Advanced filters panel ─────────────────────────────────── */
.tp-adv-filters{
  max-height:0;overflow:hidden;
  transition:max-height .28s cubic-bezier(.4,0,.2,1);
}
.tp-adv-filters.open{max-height:360px}

.tp-adv-inner{padding:14px 14px 10px;display:flex;flex-direction:column;gap:12px}
.tp-adv-section{display:flex;flex-direction:column;gap:7px}
.tp-adv-section-title{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;color:var(--t4);
  letter-spacing:.6px;text-transform:uppercase;
}
.tp-adv-hint{
  font-size:10px;color:var(--t4);font-weight:400;
  letter-spacing:0;text-transform:none;
}
.tp-multi-chips{display:flex;flex-wrap:wrap;gap:5px}

/* Multi-select chips */
.tp-mchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:20px;
  background:var(--s2);border:1.5px solid var(--b0);
  color:var(--t3);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .13s;white-space:nowrap;
  font-family:var(--ff);
}
.tp-mchip:hover{border-color:var(--b2);color:var(--t1);background:var(--s3)}
.tp-mchip.active{
  background:var(--g5);border-color:var(--g4);color:var(--g3);
  box-shadow:0 1px 4px rgba(16,185,129,.15);
}
.tp-mchip-all{background:var(--s2)}
.tp-mchip-all.active{background:var(--s3);border-color:var(--b1);color:var(--t2);box-shadow:none}
.tp-mchip-av{
  width:15px;height:15px;border-radius:50%;
  font-size:10px;font-weight:800;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Active filter tags + footer */
.tp-adv-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--b0);
}
.tp-active-filters{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.taf-tag{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:20px;
  background:var(--g5);border:1px solid var(--g4);
  color:var(--g3);font-size:11px;font-weight:600;
}
.tp-reset-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:8px;
  border:1.5px solid var(--b1);background:transparent;
  font-size:12px;font-weight:600;color:var(--t3);
  cursor:pointer;transition:all .13s;font-family:var(--ff);
  white-space:nowrap;
}
.tp-reset-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}

/* ─── Toolbar ────────────────────────────────────────────────── */
.tp-toolbar{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:10px;
}
.tp-count{display:flex;align-items:baseline;gap:4px}
.tp-count-num{
  font-size:24px;font-weight:800;line-height:1;
  color:var(--t1);font-variant-numeric:tabular-nums;
}
.tp-count-lbl{font-size:12px;color:var(--t4)}
.tp-sort-row{display:flex;align-items:center;gap:6px;flex:1}
.tp-sort-lbl{font-size:11px;color:var(--t4);font-weight:600;white-space:nowrap}
.tp-sort-btns{display:flex;gap:3px;flex-wrap:wrap}
#tp-sort-btns .tp-sort-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:6px;
  border:1.5px solid var(--b0);background:var(--s1);
  font-size:12px;font-weight:600;color:var(--t3);
  cursor:pointer;transition:all .13s;white-space:nowrap;
  font-family:var(--ff);
}
#tp-sort-btns .tp-sort-btn:hover{border-color:var(--g4);color:var(--g3);background:var(--g5)}
#tp-sort-btns .tp-sort-btn.active{
  border-color:var(--g4);color:var(--g3);background:var(--g5);
  box-shadow:0 1px 4px rgba(16,185,129,.15);
}
.tp-toggle-label{
  display:flex;align-items:center;gap:7px;
  cursor:pointer;user-select:none;flex-shrink:0;
}
.tp-toggle-label input{display:none}
.tp-toggle-track{
  width:32px;height:17px;border-radius:8px;
  background:var(--s3);border:1.5px solid var(--b1);
  position:relative;transition:all .18s;flex-shrink:0;
}
.tp-toggle-track::after{
  content:'';position:absolute;
  top:1px;right:1px;width:12px;height:12px;
  background:#fff;border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
input:checked + .tp-toggle-track{background:var(--g3);border-color:var(--g3)}
input:checked + .tp-toggle-track::after{transform:translateX(-15px)}
.tp-toggle-text{font-size:12px;font-weight:600;color:var(--t3)}

/* ─── Tasks list ─────────────────────────────────────────────── */
.tasks-list{display:flex;flex-direction:column;gap:6px}

/* ─── Task card ──────────────────────────────────────────────── */
.tc{
  display:flex;align-items:center;
  background:var(--s0);
  border:1px solid var(--b0);
  border-radius:var(--r2);
  border-right:4px solid transparent;
  transition:box-shadow .16s var(--ease),border-color .16s,transform .12s;
  cursor:default;overflow:hidden;
  position:relative;
}
.tc:hover{
  box-shadow:var(--sh2);
  border-color:var(--b1);
  transform:translateY(-1px);
}
.tc + .tc{margin-top:2px}

/* Color accents */
.tc-red   {border-right-color:var(--red);background:#fffafa}
.tc-purple{border-right-color:var(--purple);background:#fbfafe}
.tc-amber {border-right-color:var(--amber);background:#fffdf5}
.tc-yellow{border-right-color:#d4a017;background:#fffef7}
.tc-done  {border-right-color:var(--green);opacity:.62}
.tc-grey  {border-right-color:var(--s4)}

/* State circle */
.tc-check-wrap{
  width:44px;flex-shrink:0;min-height:52px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.tc-state{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--b1);color:var(--t4);background:var(--s0);
  transition:all .14s;
}
.tc-state-done{border-color:var(--green);background:var(--green);color:#fff}
.tc-state-prog{border-color:var(--amber);color:var(--amber)}
.tc-check-wrap:hover .tc-state-open{border-color:var(--g4);background:var(--g5);color:var(--g4)}

/* Body */
.tc-main{flex:1;min-width:0;padding:var(--sp3) var(--sp2) var(--sp3) 0}
.tc-top{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp1);flex-wrap:wrap}
.tc-title{
  font-size:var(--fz-base);font-weight:600;color:var(--t1);
  text-decoration:none;line-height:1.35;flex:1;min-width:0;
  display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .12s;
}
.tc-title:hover{color:var(--g3);text-decoration:underline;text-underline-offset:2px}
.tc-title-done{text-decoration:line-through;color:var(--t4)}

/* Priority badge */
.tp-prio{
  font-size:var(--fz-xs);font-weight:700;padding:2px 7px;border-radius:var(--r4);
  white-space:nowrap;flex-shrink:0;
}
.tp-prio-urgent{background:#fef2f2;color:var(--red);border:1px solid rgba(195,43,39,.2)}
.tp-prio-high  {background:var(--amber-bg);color:var(--amber);border:1px solid rgba(168,90,4,.18)}
.tp-prio-low   {background:var(--s2);color:var(--t4);border:1px solid var(--b0)}

/* Bottom meta */
.tc-bottom{display:flex;align-items:center;gap:var(--sp2);flex-wrap:wrap}
.tc-project-tag{
  font-size:var(--fz-xs);font-weight:600;color:var(--t3);
  background:var(--s2);border-radius:var(--r4);padding:2px 8px;
  white-space:nowrap;
}
.tc-divider{color:var(--s4);font-size:var(--fz-xs)}
.tc-due{
  display:inline-flex;align-items:center;gap:3px;
  font-size:var(--fz-sm);font-weight:600;padding:2px 7px;border-radius:var(--r4);
}
.tc-due-overdue{color:var(--red);background:var(--red-bg)}
.tc-due-notstarted{color:var(--purple);background:var(--purple-bg)}
.tc-due-today  {color:var(--amber);background:var(--amber-bg)}
.tc-due-soon   {color:#0369a1;background:#e0f2fe}
.tc-due-normal {color:var(--t4);background:var(--s2)}
.tc-ext-badge  {font-size:10px;color:var(--t4);background:var(--s2);padding:1px 5px;border-radius:4px}

/* Right side */
.tc-side{
  display:flex;align-items:center;gap:6px;
  padding:0 10px 0 6px;flex-shrink:0;
}
.tc-avatar{
  width:26px;height:26px;border-radius:50%;
  font-size:10px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border:2px solid rgba(255,255,255,.6);
  transition:transform .12s;cursor:default;
}
.tc-avatar:hover{transform:scale(1.1)}
.tc-avatar-empty{background:var(--s3);color:var(--t4);border:1.5px dashed var(--b2)}

/* Actions — show on row hover */
.tc-acts{
  display:flex;gap:2px;
  opacity:0;transform:translateX(6px);
  transition:opacity .14s,transform .14s;
  pointer-events:none;
}
.tc:hover .tc-acts,.tc-acts:focus-within{opacity:1;transform:none;pointer-events:all}
.tc-action-btn{
  width:26px;height:26px;border-radius:6px;
  border:1px solid var(--b1);background:var(--s1);
  color:var(--t3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.tc-action-btn:hover{background:var(--s3);color:var(--t1);border-color:var(--b2)}
.tc-act-start:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.tc-act-complete:hover{background:var(--g3);color:#fff;border-color:var(--g3)}

/* ─── Grouping — by status/urgency ──────────────────────────── */
.tg-section{margin-bottom:10px}
.tg-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;cursor:pointer;border-radius:8px;
  transition:background .12s;margin-bottom:3px;user-select:none;
}
.tg-header:hover{background:var(--s2)}
.tg-header-left{display:flex;align-items:center;gap:8px}
.tg-chevron{color:var(--t4);transition:transform .2s;flex-shrink:0}
.tg-collapsed{transform:rotate(-90deg)}
.tg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tg-label{font-size:13px;font-weight:700;color:var(--t2)}
.tg-count{
  font-size:11px;font-weight:700;
  background:var(--s3);border-radius:20px;padding:1px 8px;color:var(--t4);
}
.tg-body{display:flex;flex-direction:column;gap:2px;padding-right:0}
.tg-body-hidden{display:none}

/* ─── Project group sections ─────────────────────────────────── */
.tpg-section{margin-bottom:14px}
.tpg-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;
  border:1px solid var(--b0);border-radius:8px 8px 0 0;
  background:var(--s1);
}
.tpg-hd-norm{border-right:3px solid var(--g4)}
.tpg-hd-late{border-right:3px solid var(--red);background:#fff8f8}
.tpg-hd-done{border-right:3px solid var(--green);background:#f3faf5}
.tpg-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.tpg-name{font-size:13px;font-weight:800;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpg-count{font-size:11px;color:var(--t4);background:var(--s3);padding:2px 8px;border-radius:12px;font-weight:600;white-space:nowrap}
.tpg-late-badge{font-size:11px;color:var(--red);background:var(--red-bg);padding:2px 8px;border-radius:12px;font-weight:700;white-space:nowrap}
.tpg-pct{font-size:12px;font-weight:700;color:var(--t3);flex-shrink:0}
.tpg-body{
  border:1px solid var(--b0);border-top:none;
  border-radius:0 0 8px 8px;overflow:hidden;
  background:var(--s0);
}
.tpg-body .tc{border-radius:0;margin-top:0}
.tpg-body .tc + .tc{border-top:1px solid var(--b0)}
.tpg-body .tc:last-child{border-bottom:none}

/* Assignee group sections */
.tag-section{margin-bottom:14px}
.tag-header{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  border:1px solid var(--b0);border-radius:8px 8px 0 0;
  background:var(--s1);border-right:3px solid var(--blue);
}
.tag-avatar{
  width:28px;height:28px;border-radius:50%;
  font-size:11px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.tag-name{font-size:13px;font-weight:800;color:var(--t1)}
.tag-count{font-size:11px;color:var(--t4);background:var(--s3);padding:2px 8px;border-radius:12px;font-weight:600}
.tag-body{
  border:1px solid var(--b0);border-top:none;
  border-radius:0 0 8px 8px;overflow:hidden;background:var(--s0);
}
.tag-body .tc{border-radius:0;margin-top:0}
.tag-body .tc + .tc{border-top:1px solid var(--b0)}

/* ─── Empty state ────────────────────────────────────────────── */
.tp-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:56px 20px;gap:12px;text-align:center;
  background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);
}
.tp-empty-icon{opacity:.3}
.tp-empty-title{font-size:15px;font-weight:700;color:var(--t2)}
.tp-empty-sub{font-size:13px;color:var(--t4);max-width:260px;line-height:1.5}
.tp-empty-reset{
  margin-top:4px;padding:8px 18px;
  background:var(--g5);border:1.5px solid var(--g4);
  border-radius:8px;color:var(--g3);font-size:13px;font-weight:700;
  cursor:pointer;transition:all .13s;font-family:var(--ff);
}
.tp-empty-reset:hover{background:var(--g3);color:#fff}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media(max-width:640px){
  #page-tasks{padding:10px 12px 30px}
  .tc-acts{opacity:1;transform:none;pointer-events:all}
  .tc-title{font-size:13px}
  .tp-sort-row{display:none}
  .tp-count-num{font-size:20px}
  .tp-toggle-text{display:none}
  .tp-tab{padding:8px 9px;font-size:12px}
  .tp-tab-count{display:none}
}
@media(max-width:400px){
  .tc-check-wrap{width:36px}
  .tc-side{padding:0 8px 0 4px}
}

@media(min-width:1280px){
  .kpi-grid{grid-template-columns:repeat(6,1fr)}
  .pg-v2{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1600px){
  .pg-v2{grid-template-columns:repeat(4,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   FILTERS REDESIGN + SUBTASK STYLES
   ══════════════════════════════════════════════════════════════ */

/* ── Filter chip — new tp-fc style ───────────────────────────── */
.tp-adv-filters {
  border-top: 1px solid var(--b2);
  padding: 12px 16px 14px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
  animation: filterSlideDown .18s var(--ease) both;
}
@keyframes filterSlideDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.tp-adv-section { display:flex; flex-direction:column; gap:5px; }

.tp-adv-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600;
  color: var(--t3); text-transform: uppercase; letter-spacing: .04em;
}

.tp-fc-row {
  display: flex; flex-wrap: wrap; gap: 5px;
}

.tp-fc {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px;
  font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--b2);
  background: var(--bg); color: var(--t2);
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.tp-fc:hover { border-color: var(--s4); color: var(--s4); }
.tp-fc.active {
  background: var(--s4); color: #fff;
  border-color: var(--s4);
}

/* Priority chips */
.tp-prio-urgent.active { background:#DC2626; border-color:#DC2626; }
.tp-prio-high.active   { background:#D97706; border-color:#D97706; }
.tp-prio-normal.active { background:#2563EB; border-color:#2563EB; }
.tp-prio-low.active    { background:#6B7280; border-color:#6B7280; }

/* Member chips */
.tp-mchip-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: #fff;
}

/* Subtask toggle */
.tp-adv-toggles { border-top: 1px solid var(--b2); padding-top: 10px; }

.tp-toggle-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  user-select: none;
}
.tp-toggle-track {
  width: 34px; height: 18px; border-radius: 100px;
  background: var(--b2); position: relative;
  transition: background .2s; flex-shrink: 0;
}
.tp-toggle-track.on { background: var(--s4); }
.tp-toggle-thumb {
  position: absolute; top: 2px; right: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: right .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tp-toggle-track.on .tp-toggle-thumb { right: 2px; }
.tp-toggle-label { font-size: 12px; font-weight: 500; color: var(--t1); }
.tp-toggle-hint  { font-size: 11px; color: var(--t3); }

/* ── Active filter tags ───────────────────────────────────────── */
.tp-active-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--s4) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--s4) 20%, transparent);
}
.tp-active-tags-label { font-size: 11px; color: var(--t3); font-weight: 500; }
.tp-active-tags-list  { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }

.tp-active-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 100px;
  font-size: 11.5px; font-weight: 500;
  background: var(--s4); color: #fff;
  border: none; cursor: pointer;
  transition: opacity .15s;
}
.tp-active-tag:hover { opacity: .8; }
.tp-active-tag-x { font-size: 13px; opacity: .7; }

.tp-clear-all {
  font-size: 11px; color: var(--t3); border: none;
  background: none; cursor: pointer; padding: 2px 6px;
  border-radius: 4px; text-decoration: underline;
}
.tp-clear-all:hover { color: var(--s4); }

/* ── Subtask badge on parent task ────────────────────────────── */
.tc-sub-summary {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 5px; font-size: var(--fz-xs); color: var(--t3);
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: 999px; padding: 3px 10px 3px 8px;
  cursor: pointer; font-family: var(--ff);
  transition: background .14s, border-color .14s, color .14s;
}
.tc-sub-summary:hover {
  background: var(--g5); border-color: var(--g4); color: var(--g3);
}
.tc-sub-summary.expanded {
  background: var(--g5); border-color: var(--g4); color: var(--g3); font-weight: 700;
}
.tc-sub-chev {
  font-size: 8px; line-height: 1; transition: transform .2s var(--ease);
  color: currentColor; opacity: .8;
}
.tc-sub-summary.expanded .tc-sub-chev { color: var(--g3); }
.tc-sub-count {
  font-size: var(--fz-xs); font-weight: 600; color: inherit;
}
.tc-sub-progress {
  width: 42px; height: 4px; border-radius: 2px;
  background: var(--s3); overflow: hidden;
}
.tc-sub-bar {
  height: 100%; border-radius: 2px;
  background: var(--g4); transition: width .4s var(--ease);
}
.tc-sub-summary.expanded .tc-sub-bar { background: var(--g3); }
.tc-sub-frac {
  font-size: 10px; font-weight: 700; color: var(--t4);
  font-variant-numeric: tabular-nums; opacity: .85;
}
.tc-sub-summary.expanded .tc-sub-frac { color: var(--g3); }

/* ── Subtask badge ↳ in task rows ────────────────────────────── */
.tc-sub-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  color: var(--t4); opacity: .65; margin-inline-end: 3px;
}

/* ══════════════════════════════════════════════════════════════
   SUBTASK HIERARCHICAL DISPLAY
   ══════════════════════════════════════════════════════════════ */

/* Group container under parent card */
.tc-subtask-group {
  margin-inline-start: 28px;
  margin-top: 2px;
  margin-bottom: 4px;
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}

/* Vertical connector line */
.tc-subtask-group::before {
  content: '';
  position: absolute;
  inset-inline-start: -14px;
  top: 0; bottom: 14px;
  width: 2px;
  background: var(--g4);
  opacity: .35;
  border-radius: 1px;
}

/* Each subtask row */
.tc-subtask-row {
  position: relative;
  padding-inline-start: 14px;
}

/* Horizontal connector */
.tc-subtask-row::before {
  content: '';
  position: absolute;
  inset-inline-start: -14px;
  top: 50%;
  width: 14px; height: 2px;
  background: var(--g4);
  opacity: .35;
  transform: translateY(-50%);
  border-radius: 1px;
}

/* Subtask card — visually nested */
.tc-subtask-row .tc {
  background: var(--s1);
  border-style: dashed;
  font-size: var(--fz-sm);
  margin-top: 0 !important;
}
.tc-subtask-row .tc:hover {
  background: var(--s0);
  border-style: solid;
}