/* ============================================================
   SmarterWorkflow Tasks Module — Custom styles
   Modern-shell variant of the Hub: same tokens, softer dividers,
   more whitespace, denser table where it counts.
   ============================================================ */

* { box-sizing: border-box; }
/* Use the hub-wide --sw-font (defined in sw-hub.css :root) so Tasks
   matches the rest of the hub instead of falling through to whatever
   `var(--font-sans)` (undefined) would resolve to. Universal selector
   on .t-root * keeps overriding any nested element that would
   otherwise pick up a Bootstrap-utility font (e.g. .text-monospace). */
.t-root, .t-root * { font-family: var(--sw-font); }
.t-root {
  background: var(--surface-page);
  color: var(--fg-primary);
  /* font-size set to 0.9375rem (15px) — midpoint between the original
     14px (too dense vs. rest of hub) and Bootstrap's 16px (too large
     for dense task tables). Pritesh eyeball preference. */
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Module accent — Tasks reuses teal (workhorse module). */
.t-root { --t-accent: #008080; --t-accent-tint: #e0f2f2; --t-accent-soft: #f5fafa;
          --t-divider: #eef0f3; --t-divider-strong: #e5e7eb; }

/* [UI001-5a/5b] --fg-primary, --surface-page and --surface-muted were
   referenced throughout this file (84 references between the first
   two, 50 more for --surface-muted) with no definition anywhere and
   no fallback. Originally declared on .t-root - but .t-root only
   wraps {% block tasks_content %} in each page template; the sidebar
   (.t-side / .t-rail) is a SIBLING of .t-content inside .t-shell, so
   nothing defined on .t-root ever reached it. Moved here, to
   .t-shell, the actual shared ancestor of both the sidebar and
   .t-content on every /tasks/* page (confirmed: 44 of 45 tasks
   templates extend tasks/_layout.html, which renders both under one
   .t-shell; the task-panel fragment has no .t-shell of its own but is
   always injected into .t-right-panel, itself a child of .t-shell on
   the host page - never served or rendered standalone).

   --fg-primary and --surface-page reproduce today's already-inherited
   appearance on .t-root itself (--sw-text and --sw-bg respectively -
   no change there), but this move is not a no-op for the sidebar:
   text inside .t-side/.t-rail now resolves --fg-primary explicitly
   for the first time instead of whatever it was inheriting before.

   --surface-muted points at --sw-surface-muted (sw-hub.css) rather
   than a literal so the value has one place to change. This is a
   visible change everywhere it applies, including the sidebar hover
   states it could never reach before. The .t-crumb bar is NOT
   affected either way - see breadcrumb.html's own inline
   background:#fff, left alone here (a shadowed rule to revisit
   separately, not a change to make in this commit). */
.t-shell {
  --fg-primary: var(--sw-text);
  --surface-page: var(--sw-bg);
  --surface-muted: var(--sw-surface-muted);
  /* [UI001-5c-1] Sidebar tree indent + icon size. Before this, each
     level's indent was a separate hardcoded value with no relationship
     to the others (folder margin-left:16px, sub-folder inline
     marginLeft:14px in tasks_sidebar.js, list padding-left:36px,
     4th-level task padding-left:60px), and every icon (.chev, .fi, the
     list-row icon set inline in JS) was sized on its own selector with
     no shared reference. --t-indent is the one unit every level is now
     a multiple of: folder 1x, sub-folder 2x, list 3x, task 4x.
     --t-icon-size matches the .s-swatch/.s-emoji fixed-width box (14px,
     0.875rem) used where a level has no icon of its own, so an icon
     and its colour-swatch fallback occupy the same visual weight. */
  --t-indent: 16px;
  --t-icon-size: 0.875rem;
}

/* ── Top bar ──────────────────────────────────────────── */
.t-nav { background: var(--sw-text-muted); padding: 6px 16px;
         display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
         border-bottom: 1px solid #b8b8b8; }
.t-nav .brand { display:flex; align-items:center; gap: 8px; }
.t-nav .brand img { height: 32px; }
.t-nav .brand .hubmark { color: var(--sw-gold); font-weight: 800;
                         letter-spacing: 0.04em; font-size: 1.15rem; }
.t-nav .nav-modules { display:flex; gap: 0; flex: 1; }
.t-nav .nav-modules .m { padding: 4px 10px; font-size: 0.82rem; font-weight: 500;
                        color: #000; display: inline-flex; align-items:center; gap: 5px;
                        border-radius: 4px; cursor: pointer; }
.t-nav .nav-modules .m.is-active { background: rgba(0,0,0,0.08); }
.t-nav .right { display:flex; align-items:center; gap: 12px; font-size: 12px;
                color: var(--sw-grey-700); }
.t-nav .right .bell { position: relative; width: 28px; height: 28px;
                      display:inline-flex; align-items:center; justify-content:center;
                      border-radius: 6px; cursor: pointer; }
.t-nav .right .bell:hover { background: rgba(0,0,0,0.06); }
.t-nav .right .bell .dot { position:absolute; top: 4px; right: 4px; width: 8px; height:8px;
                           border-radius:50%; background: var(--sw-gold); border: 2px solid var(--sw-text-muted); }
.t-nav .right .user { display:inline-flex; align-items:center; gap: 5px; }
.t-nav .right .ver { color: var(--sw-gold); font-weight: 600; display:inline-flex; align-items:center; gap: 4px; }

/* ── Breadcrumb (primary nav surface) ─────────────────── */
.t-crumb { background: var(--surface-muted); padding: 8px 16px;
           border-bottom: 1px solid var(--t-divider);
           display: flex; align-items: center; gap: 8px; font-size: 0.82rem;
           color: var(--sw-text-soft); }
.t-crumb .home { color: var(--sw-text-soft); display:inline-flex; align-items:center; gap:5px; }
.t-crumb .sep { color: var(--sw-text-muted); }
.t-crumb a, .t-crumb .crumb { color: var(--sw-text-soft); cursor:pointer; }
.t-crumb a:hover, .t-crumb .crumb:hover { color: var(--sw-gold); }
.t-crumb .crumb.active { color: var(--fg-primary); font-weight: 600; }
.t-crumb .crumb .chevdown { font-size: 9px; opacity: 0.6; margin-left: 3px; }
.t-crumb .right { margin-left:auto; display:flex; align-items:center; gap: 14px;
                  color: var(--sw-text-soft); font-size: 0.78rem; }
.t-crumb .right .reveal-sidebar { display:inline-flex; align-items:center; gap: 5px;
                                  cursor: pointer; padding: 2px 8px; border-radius: 4px; }
.t-crumb .right .reveal-sidebar:hover { background: rgba(0,0,0,0.05); color: var(--sw-gold); }
.t-crumb .right kbd { background: #fff; border: 1px solid var(--t-divider-strong);
                      border-bottom-width: 2px; border-radius: 4px;
                      padding: 1px 5px; font-size: 0.7rem; font-family: var(--font-mono);
                      color: var(--sw-grey-700); }

/* ── Optional sidebar (auto-hides; shown collapsed by default) ── */
.t-shell { display: flex; min-height: 100%; }
.t-rail { width: 48px; background: #fff; border-right: 1px solid var(--t-divider);
          display: flex; flex-direction: column; align-items: center; padding: 10px 0;
          gap: 2px; flex-shrink: 0; }
.t-rail .ri { width: 32px; height: 32px; border-radius: 6px; display:inline-flex;
              align-items:center; justify-content:center; color: var(--sw-grey-700);
              font-size: 1rem; cursor: pointer; }
.t-rail .ri:hover { background: var(--t-accent-soft); color: var(--t-accent); }
.t-rail .ri.is-active { background: var(--t-accent-tint); color: var(--t-accent); }
.t-rail .spacer { flex: 1; }
.t-rail .ri.handle { color: var(--sw-text-soft); font-size: 0.7rem; }

/* Expanded sidebar (shown when pinned/hovered) */
.t-side { width: 248px; background: #fff; border-right: 1px solid var(--t-divider);
          padding: 14px 12px; flex-shrink: 0; }
.t-side .side-head { display:flex; align-items:center; justify-content:space-between;
                     margin-bottom: 10px; }
.t-side .side-head .title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
                            letter-spacing: 0.06em; color: var(--sw-text-soft); }
.t-side .side-head .pin { color: var(--sw-text-soft); cursor: pointer; }
.t-side .side-head .pin.is-pinned { color: var(--t-accent); }
.t-side .ssearch { display: flex; align-items: center; gap: 6px; padding: 4px 8px;
                   border: 1px solid var(--t-divider-strong); border-radius: 6px;
                   margin-bottom: 10px; background: var(--surface-muted); }
.t-side .ssearch input { border: 0; background: transparent; outline: 0; flex:1;
                         font-family: inherit; font-size: 0.8rem; padding: 1px 0; }
.t-side .ssearch i { color: var(--sw-text-soft); font-size: 0.85rem; }
.t-side .space { margin-bottom: 8px; }
.t-side .space > .space-head { display:flex; align-items:center; gap: 6px;
                               padding: 4px 6px; border-radius: 4px; cursor: pointer;
                               /* [UI001-5c-1] Space is the tree's "list heading" level -
                                  one size larger than the uniform 0.82rem the other
                                  levels share, and already bold. Was 0.85rem. */
                               font-size: 0.9rem; font-weight: 600; color: var(--fg-primary); }
.t-side .space > .space-head:hover { background: var(--surface-muted); }
/* [BRIEF UI003 Step 4] Active-state fix: Space/Folder rows were never
   highlighted at all (only expanded) - the current List row's own
   .is-active rule (below) existed in CSS but nothing in JS ever
   applied the class, so all three levels rendered identically whether
   or not they were the one currently open. Same accent-tint pattern as
   .lst.is-active / .task-row.is-active-task, applied one level up. */
.t-side .space > .space-head.is-active { background: var(--t-accent-tint); color: var(--t-accent); }
.t-side .space > .space-head i.chev { font-size: var(--t-icon-size); color: var(--sw-text-soft); }
/* [#866] .s-swatch sized to match .s-emoji's 14px box so toggling a
   space's emoji on/off doesn't shift the row's visual mass. Was
   8x8 pre-[#866] when nothing larger sat in the icon slot.
   [UI001-5c-1/Item 4] Renamed from .sdot - border-radius:3px makes
   this a rounded square, not a dot/circle, and the name was
   misleading. Expressed from --t-icon-size (0.875rem = 14px) since
   it's the reference every other tree icon is now sized to match. */
.t-side .space > .space-head .s-swatch { width: var(--t-icon-size); height: var(--t-icon-size);
                                     border-radius: 3px;
                                     background: var(--c, var(--sw-gold)); }
/* [#866] Space emoji in the sidebar tree — sized slightly larger
   than the folder icon (.fi is 0.78rem) so a space's row reads
   visually distinct from a folder's row. Fixed-width box keeps the
   tree column aligned regardless of whether the row uses .s-emoji
   (set by the operator) or .s-swatch (the colour fallback). */
.s-emoji { display: inline-flex; align-items: center; justify-content: center;
           width: 14px; font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
/* [#866] Rail variant — the rail is 48px wide and the icons stack
   vertically, so the glyph reads better at a slightly smaller scale
   than the tree's. Same fixed-width box for visual continuity with
   the bi-square-fill fallback on the same row. */
.s-emoji-rail { font-size: 1.0rem; width: auto; }

/* [#866] Rail dot — match the rail emoji's 1.0rem so toggling
   emoji on/off keeps the icon column's visual mass constant. The
   sidebar template renders the dot fallback as
   `<i class="bi bi-square-fill" style="font-size:0.78rem;">` with
   the size inline, so `!important` is required to win the cascade
   against the inline style. This is the only place in the file
   that uses !important; documented here so future eyes don't
   mistake it for sloppy specificity. */
.t-rail .ri .bi-square-fill { font-size: 1.0rem !important; }

/* [#866] Shared colour-swatch picker. The same component pattern is
   already inlined in admin/statuses.html (kept inline there for now
   to avoid touching status-related rendering as a side effect of
   this brief). Moving it to the shared stylesheet here lets the
   spaces create + edit forms (and any future picker site) inherit
   the same look without duplicating the rules. */
.t-swatch {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}
.t-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.t-swatch.selected {
    border-color: #212529;
    box-shadow: 0 0 0 2px #fff inset;
}
.t-swatch-custom.is-invalid { border-color: #dc3545; }

/* [#866] Emoji suggestion row on the Space create + edit forms.
   Clickable preset emojis to lower friction over the plain text
   input. Each chip is interactive and shows a hover hint. */
.s-emoji-suggest {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 4px;
}
.s-emoji-suggest .s-emoji-chip {
    font-size: 1.1rem; line-height: 1;
    padding: 3px 6px; border-radius: 4px;
    cursor: pointer; user-select: none;
    border: 1px solid var(--t-divider, #e5e7eb);
    background: #fff;
    transition: transform 0.08s, border-color 0.08s;
}
.s-emoji-suggest .s-emoji-chip:hover {
    transform: scale(1.15);
    border-color: var(--t-accent, #008080);
}
/* [UI001-5c-1] Folder is 1x --t-indent (was a bare 16px hardcode -
   same value, now expressed from the shared unit). */
.t-side .folder { margin-left: var(--t-indent); }
.t-side .folder > .fhead { display:flex; align-items:center; gap: 6px; padding: 3px 6px;
                           border-radius: 4px; cursor:pointer; font-size: 0.82rem;
                           color: var(--fg-secondary); }
.t-side .folder > .fhead:hover { background: var(--surface-muted); color: var(--fg-primary); }
/* [BRIEF UI003 Step 4] See the .space-head.is-active comment above -
   same fix, folder level. */
.t-side .folder > .fhead.is-active { background: var(--t-accent-tint); color: var(--t-accent); font-weight: 600; }
.t-side .folder > .fhead i.fi { color: var(--sw-text-soft); font-size: var(--t-icon-size); }
/* [UI001-5c-1] Sub-folder's own margin-left is 1x --t-indent, which
   stacks with the parent .folder's own 1x margin-left (sub-folder is
   nested inside it) for a total of 2x --t-indent (32px) from the
   space edge - was an inline marginLeft:"14px" set in
   tasks_sidebar.js with no relationship to the parent folder's own
   16px margin. */
.t-side .folder.sub-folder { margin-left: var(--t-indent); }
/* [UI001-5c-1] List is the tree's "view name" level - one size
   smaller than the uniform 0.82rem folder/space-adjacent baseline,
   matching the 4th-level task title's own 0.78rem so both of the
   two smallest levels agree. Was 0.82rem. Padding-left is now 3x
   --t-indent (48px) instead of the old bare 36px. */
.t-side .lst { display:flex; align-items:center; gap: 6px;
               padding: 3px 6px 3px calc(var(--t-indent) * 3);
               border-radius: 4px; font-size: 0.78rem; color: var(--fg-secondary);
               cursor: pointer; justify-content: space-between; }
.t-side .lst:hover { background: var(--surface-muted); color: var(--fg-primary); }
.t-side .lst.is-active { background: var(--t-accent-tint); color: var(--t-accent);
                         font-weight: 600; }
.t-side .lst i.li { color: var(--sw-text-soft); font-size: var(--t-icon-size); }
.t-side .lst .name { flex: 1; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-side .lst .ct { font-size: 0.72rem; color: var(--sw-text-soft); font-weight: 500;
                   padding: 0 4px; }
.t-side .lst.is-active .ct { color: var(--t-accent); }

/* ── UX Rework C3 — sidebar 4th-level task expansion ────────
   List rows are now wrapped in .lst-wrap (relative positioning so
   the chevron sits absolutely in the left-padding zone of .lst).
   Click chevron → reveal .t-list-tasks <ul> below with top-level
   task rows. Inactive default, accent-tint highlight when current
   task matches. */
.t-side .lst-wrap { position: relative; }
/* [UI001-5c-1] Chevron sits mid-way through the list row's now-48px
   (3x --t-indent) left padding zone - was a bare 18px tied to the
   old 36px padding, kept proportional here rather than left stale. */
.t-side .lst-chev { position: absolute; left: calc(var(--t-indent) * 1.5); top: 5px;
                    width: 12px; text-align: center;
                    color: var(--sw-text-soft); cursor: pointer;
                    font-size: 0.72rem; line-height: 1;
                    user-select: none; z-index: 1; }
.t-side .lst-chev:hover { color: var(--fg-primary); }
.t-side .t-list-tasks { list-style: none; margin: 0; padding: 0; }
/* [UI001-5c-1] Task row is the tree's 4th and deepest level - 4x
   --t-indent (64px), was a bare 60px hardcode. */
.t-side .t-list-tasks .task-row { display: flex; align-items: center;
                                  gap: 8px; padding: 3px 6px 3px calc(var(--t-indent) * 4);
                                  border-radius: 4px; cursor: pointer; }
.t-side .t-list-tasks .task-row:hover { background: var(--surface-muted); }
.t-side .t-list-tasks .task-row.is-active-task {
    background: var(--t-accent-tint); font-weight: 600; }
.t-side .t-list-tasks .task-status-dot { width: 8px; height: 8px;
                                         border-radius: 50%; flex-shrink: 0; }
.t-side .t-list-tasks .task-title { flex: 1; overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    font-size: 0.78rem;
                                    color: var(--fg-secondary);
                                    text-decoration: none; }
.t-side .t-list-tasks .task-row.is-active-task .task-title { color: var(--t-accent); }
.t-side .t-list-tasks .task-more { padding: 3px 6px 3px calc(var(--t-indent) * 4);
                                   font-size: 0.74rem;
                                   color: var(--sw-text-soft); font-style: italic; }

.t-side .saved-views-head { margin-top: 14px; font-size: 0.7rem; font-weight: 700;
                            text-transform: uppercase; letter-spacing: 0.06em;
                            color: var(--sw-text-soft); padding: 0 6px; margin-bottom: 4px; }
.t-side .sview { display:flex; align-items:center; gap: 6px; padding: 4px 6px;
                 border-radius: 4px; font-size: 0.82rem; color: var(--fg-secondary);
                 cursor: pointer; }
.t-side .sview:hover { background: var(--surface-muted); }
.t-side .sview i { color: var(--sw-text-soft); font-size: 0.78rem; }

/* ── Main content area ───────────────────────────────── */
.t-content { flex: 1; min-width: 0; padding: 18px 24px 36px; }
.t-page-head { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 16px; margin-bottom: 14px; }
.t-page-head .left h1 { margin: 0; font-size: 1.4rem; font-weight: 700;
                        color: var(--fg-primary); display: inline-flex;
                        align-items: center; gap: 8px; }
.t-page-head .left .h1-meta { color: var(--sw-text-soft); font-weight: 400; font-size: 0.9rem; }
.t-page-head .left .sub { margin: 3px 0 0; color: var(--sw-text-soft); font-size: 0.82rem; }
.t-page-head .right { display: flex; gap: 8px; align-items: center; }

/* View tabs (List / Board / Sprint) — first-class above content */
.t-vtabs { display: inline-flex; background: var(--surface-muted);
           border: 1px solid var(--t-divider); border-radius: 8px; padding: 3px; gap: 2px; }
.t-vtabs .vt { padding: 5px 12px; font-size: 0.82rem; font-weight: 500;
               color: var(--sw-grey-700); border-radius: 5px; cursor: pointer;
               display: inline-flex; align-items: center; gap: 5px; }
.t-vtabs .vt:hover { color: var(--fg-primary); }
.t-vtabs .vt.is-active { background: #fff; color: var(--t-accent); font-weight: 600;
                         box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* ── Toolbar (filters, search, sort) ─────────────────── */
/* UX Rework C5 Tier 1 — min-height keeps the toolbar row stable when
   chips flow on/off; chip height is locked so adding/removing a chip
   doesn't shift the row vertically. Together these eliminate the
   "filter bar jumps" complaint. */
.t-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
             padding: 8px 0; margin-bottom: 10px;
             min-height: 36px; }
.t-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px;
            border: 1px solid var(--t-divider-strong); border-radius: 6px;
            background: #fff; width: 220px; }
.t-search input { border: 0; outline: 0; flex: 1; font-family: inherit;
                  font-size: 0.84rem; background: transparent; }
.t-search i { color: var(--sw-text-soft); font-size: 0.9rem; }
.t-chip { display:inline-flex; align-items:center; gap: 5px;
          padding: 4px 10px; border: 1px dashed var(--t-divider-strong);
          border-radius: 16px; font-size: 0.78rem; color: var(--sw-grey-700);
          background: #fff; cursor: pointer;
          /* UX Rework C5 Tier 1 — fixed height so toolbar row doesn't
             reflow vertically as filters are added/removed. */
          height: 26px; box-sizing: border-box; }
.t-chip:hover { border-style: solid; border-color: var(--t-accent); color: var(--t-accent); }
.t-chip.is-set { background: var(--t-accent-soft); border-style: solid;
                 border-color: var(--t-accent); color: var(--t-accent); font-weight: 500; }
.t-chip.is-set i.x { font-size: 0.7rem; opacity: 0.7; margin-left: 2px; }
.t-chip i.plus { font-size: 0.78rem; }
.t-toolbar .spacer { flex: 1; }
.t-toolbar .group-by { display: inline-flex; align-items: center; gap: 6px;
                      padding: 4px 10px; border: 1px solid var(--t-divider-strong);
                      border-radius: 6px; font-size: 0.78rem; color: var(--sw-grey-700);
                      background: #fff; cursor: pointer; }
.t-toolbar .group-by:hover { border-color: var(--t-accent); color: var(--t-accent); }
.t-toolbar .group-by .lab { color: var(--sw-text-soft); }

/* Buttons */
.t-btn { display:inline-flex; align-items:center; gap: 5px; padding: 5px 11px;
         border-radius: 6px; font-size: 0.84rem; font-weight: 500;
         border: 1px solid transparent; cursor: pointer; background: #fff;
         color: var(--fg-primary); }
.t-btn:hover { background: var(--surface-muted); }
.t-btn.primary { background: var(--t-accent); color: #fff; border-color: var(--t-accent); }
.t-btn.primary:hover { background: var(--sw-gold-deep); }
.t-btn.outline { background: #fff; border-color: var(--t-divider-strong); color: var(--sw-grey-700); }
.t-btn.outline:hover { border-color: var(--t-accent); color: var(--t-accent); background: #fff; }
.t-btn.ghost { background: transparent; color: var(--sw-grey-700); }
.t-btn.ghost:hover { background: var(--surface-muted); }
.t-btn.danger { color: var(--sw-red); border-color: var(--sw-red); background: #fff; }
.t-btn.danger:hover { background: var(--sw-red); color: #fff; }
.t-btn.sm { padding: 3px 8px; font-size: 0.78rem; }
.t-btn .k { background: rgba(255,255,255,0.2); border-radius: 3px; padding: 0 4px;
            font-family: var(--font-mono); font-size: 0.72rem; }
/* [#858] Disabled state — matches Bootstrap's .btn.disabled convention
   (pointer-events:none + reduced opacity). Without these rules .t-btn
   with the disabled class looked identical to its enabled state, so
   the [#858] Download-template button gave no visual cue that a
   space had to be picked first. Covers both class="disabled" and
   aria-disabled="true" forms — the latter is the accessible
   convention some callers use without the matching class. */
.t-btn.disabled,
.t-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Task table ──────────────────────────────────────── */
.t-table-wrap { background: #fff; border: 1px solid var(--t-divider);
                border-radius: 8px; overflow: hidden; }
.t-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.t-table thead th { background: var(--surface-muted); padding: 8px 10px;
                    text-align: left; font-weight: 600; font-size: 0.75rem;
                    text-transform: uppercase; letter-spacing: 0.04em;
                    color: var(--sw-grey-700);
                    border-bottom: 1px solid var(--t-divider-strong);
                    white-space: nowrap; position: sticky; top: 0; }
.t-table thead th .sort { font-size: 9px; color: var(--sw-text-soft); margin-left: 3px; }
.t-table thead th.check { width: 32px; padding: 8px 0 8px 12px; }
.t-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--t-divider);
                    vertical-align: middle; }
.t-table tbody tr:last-child td { border-bottom: 0; }
.t-table tbody tr:hover td { background: var(--t-accent-soft); cursor: pointer; }
.t-table tbody tr.is-selected td { background: var(--t-accent-tint); }
.t-table tbody tr.is-selected:hover td { background: var(--t-accent-tint); }
.t-table tbody tr.group-row td { background: var(--surface-muted); padding: 6px 10px;
                                 font-size: 0.78rem; color: var(--sw-grey-700);
                                 font-weight: 600; text-transform: uppercase;
                                 letter-spacing: 0.04em; }
.t-table tbody tr.group-row td .ct { color: var(--sw-text-soft); font-weight: 500;
                                     text-transform: none; letter-spacing: 0;
                                     margin-left: 6px; }
.t-table .ck { width: 14px; height: 14px; border: 1.5px solid var(--t-divider-strong);
               border-radius: 3px; background: #fff; display: inline-flex;
               align-items: center; justify-content: center; cursor: pointer; }
.t-table .ck.is-on { background: var(--t-accent); border-color: var(--t-accent); color: #fff; font-size: 10px; }
.t-table .ck.is-mixed { background: var(--t-accent); border-color: var(--t-accent); }
.t-table .ck.is-mixed::after { content: ""; width: 6px; height: 2px; background: #fff; border-radius: 1px; }
.t-table .key { font-family: var(--font-mono); font-size: 0.74rem; color: var(--sw-text-soft); }
.t-table .title-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-table .title-cell .sub-indicator { color: var(--sw-text-soft); width: 16px;
                                      display:inline-flex; justify-content:center;
                                      font-size: 0.78rem; }
.t-table .title-cell .ttitle { flex: 1; min-width: 0; overflow:hidden;
                               text-overflow:ellipsis; white-space:nowrap;
                               color: var(--fg-primary); font-weight: 500; }
.t-table .title-cell .ttitle.done { text-decoration: line-through; color: var(--sw-text-soft); font-weight: 400; }
.t-table .title-cell .subct { font-size: 0.72rem; color: var(--sw-text-soft);
                              background: var(--surface-muted); padding: 1px 6px;
                              border-radius: 8px; }
.t-table .title-cell .peek { color: var(--sw-text-soft); opacity: 0; font-size: 0.85rem; padding: 2px; }
.t-table tr:hover .title-cell .peek { opacity: 0.7; }

/* Status pill — flat, colored dot + name */
.t-status { display: inline-flex; align-items: center; gap: 6px;
            padding: 2px 8px 2px 7px; border-radius: 12px; font-size: 0.74rem;
            font-weight: 500; border: 1px solid var(--t-divider-strong);
            background: #fff; color: var(--fg-primary); white-space: nowrap; cursor:pointer; }
.t-status .d { width: 7px; height: 7px; border-radius: 50%; background: var(--s, #9ca3af); }
.t-status.s-backlog { color: var(--sw-grey-700); }
.t-status.s-todo    { color: #1f4e8f; background: #eaf2fb; border-color: #c9deef; }
.t-status.s-prog    { color: #8a4d00; background: #fff3e0; border-color: #fbd9aa; }
.t-status.s-rev     { color: #5a4a2a; background: #f5f4ed; border-color: #d8d3b8; }
.t-status.s-done    { color: #155138; background: #d8f0e2; border-color: #b6e2c8; }
.t-status.s-cancel  { color: var(--sw-text-soft); background: var(--surface-muted);
                      border-color: var(--t-divider-strong); text-decoration: line-through; }

/* Assignee avatar */
.t-av { width: 22px; height: 22px; border-radius: 50%; background: var(--t-av-accent, var(--sw-gold));
        color: #fff; font-size: 0.66rem; font-weight: 700;
        display: inline-flex; align-items:center; justify-content:center;
        border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--t-divider-strong); }
.t-av.unassigned { background: var(--surface-muted); color: var(--sw-text-soft);
                   border: 1px dashed var(--t-divider-strong); box-shadow:none; }
.t-av-stack { display: inline-flex; }
.t-av-stack .t-av { margin-left: -6px; }
.t-av-stack .t-av:first-child { margin-left: 0; }

/* Tag chips */
.t-tag { display:inline-flex; align-items:center; gap: 3px;
         padding: 1px 7px; border-radius: 10px; font-size: 0.7rem; font-weight: 500;
         background: var(--t-tag-bg, #f3f4f6); color: var(--t-tag-fg, #4b5563); white-space:nowrap; }
.t-tags { display:inline-flex; gap: 4px; flex-wrap: wrap; }

/* Date column */
.t-date { font-variant-numeric: tabular-nums; font-size: 0.84rem;
          color: var(--fg-primary); white-space: nowrap; }
.t-date.overdue { color: var(--sw-red); font-weight: 600; }
.t-date.soon { color: var(--sw-gold-deep); }
.t-date.faint { color: var(--sw-text-soft); }
.t-date .dow { color: var(--sw-text-soft); font-size: 0.72rem; margin-left: 3px; }

/* Story points */
.t-pts { display: inline-flex; align-items:center; justify-content:center; min-width: 22px;
         padding: 1px 6px; border-radius: 4px; background: var(--surface-muted);
         font-size: 0.74rem; font-weight: 600; color: var(--sw-grey-700);
         font-variant-numeric: tabular-nums; }
.t-pts.lg { padding: 4px 10px; font-size: 0.95rem; }
.t-cust { font-family: var(--font-mono); font-size: 0.78rem; color: var(--sw-charcoal); }

/* Bulk action bar */
.t-bulk { display: flex; align-items: center; gap: 10px;
          background: var(--sw-charcoal); color: #fff;
          border-radius: 8px; padding: 8px 14px; margin: 0 0 10px;
          font-size: 0.84rem; }
.t-bulk .ct { font-weight: 600; padding-right: 8px; border-right: 1px solid rgba(255,255,255,0.25); }
.t-bulk .actions { display: flex; gap: 4px; flex-wrap: wrap; }
.t-bulk .ba { background: rgba(255,255,255,0.12); color: #fff;
              padding: 4px 10px; border-radius: 5px; font-size: 0.8rem;
              border: 0; cursor: pointer; display:inline-flex; align-items:center; gap: 5px; }
.t-bulk .ba:hover { background: rgba(255,255,255,0.22); }
.t-bulk .ba.danger { color: #ffd6d8; }
.t-bulk .spacer { flex: 1; }
.t-bulk .close { color: rgba(255,255,255,0.6); cursor: pointer; padding: 0 6px; }

/* ── Kanban (UX Rework C8 polish) ───────────────────────
   Cards: proper white tiles on --sw-border with hover lift to
   signal draggability. Columns: --sw-bg background.
   Headers: status-coloured dot + tinted count pill borrowing
   the status colour. All corp tokens (--sw-*) with safe
   hex fallbacks so the look survives in contexts where
   sw-hub.css hasn't been loaded yet (panel fragments etc). */
/* padding-right reserves trailing whitespace so the last column is
   fully scrollable into view — Chrome/Safari historically drop
   trailing padding from a horizontal-scroll container's
   scrollWidth calculation, clipping the rightmost item. */
.t-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 288px;
            gap: 12px; overflow-x: auto; padding-bottom: 8px;
            padding-right: 24px; }
/* min-width belt-and-braces: grid-auto-columns sets explicit width
   but min-width prevents any nested flex/grid context from squashing
   the column below its intended size on narrow viewports. */
.t-kcol { background: var(--sw-bg, #f8f9fa); border-radius: 10px;
          padding: 10px; display: flex; flex-direction: column; gap: 8px;
          min-width: 280px; }
.t-kcol .khead { display:flex; align-items:center; justify-content:space-between;
                 padding: 2px 4px 8px;
                 border-bottom: 1px solid var(--sw-border, #dee2e6); }
.t-kcol .khead .left { display:inline-flex; align-items:center; gap: 8px;
                       font-size: 0.78rem; font-weight: 600;
                       color: var(--sw-text);
                       text-transform: uppercase; letter-spacing: 0.04em; }
.t-kcol .khead .left .d { width: 10px; height: 10px; border-radius: 50%;
                          background: var(--s, var(--sw-text-soft, #808080));
                          flex-shrink: 0; }
.t-kcol .khead .ct { background: var(--sw-white, #fff); border-radius: 12px;
                     padding: 1px 9px; font-size: 0.72rem;
                     color: var(--sw-text); font-weight: 600;
                     border: 1px solid var(--s, var(--sw-border, #dee2e6)); }
.t-kcol .khead .add { color: var(--sw-text-soft, #808080); cursor:pointer;
                      padding: 2px 4px; border-radius: 4px; }
.t-kcol .khead .add:hover { background: rgba(0,0,0,0.06); color: var(--t-accent); }
.t-kcard { background: var(--sw-white, #ffffff);
           border: 1px solid var(--sw-border, #dee2e6);
           border-radius: 8px; padding: 10px 12px;
           box-shadow: 0 1px 2px rgba(0,0,0,0.04);
           cursor: pointer;
           transition: transform 120ms ease, box-shadow 120ms ease,
                       border-color 120ms ease; }
.t-kcard:hover { transform: translateY(-1px);
                 box-shadow: 0 4px 12px rgba(0,0,0,0.08);
                 border-color: var(--sw-text-soft, #808080); }
.t-kcard .key { font-family: var(--font-mono); font-size: 0.7rem;
                color: var(--sw-text-soft, #808080); }
.t-kcard h6 { margin: 2px 0 7px; font-size: 0.84rem; font-weight: 500;
              color: var(--sw-text); line-height: 1.35; }
.t-kcard .kfoot { display:flex; align-items:center; gap: 6px; }
.t-kcard .kfoot .spacer { flex: 1; }

/* ── Folder/list landing ─────────────────────────────── */
.t-folders { display: flex; flex-direction: column; gap: 18px; }
.t-folder { background: #fff; border: 1px solid var(--t-divider); border-radius: 10px;
            overflow: hidden; }
.t-folder .fh { display:flex; align-items:center; gap: 10px; padding: 10px 14px;
                background: var(--surface-muted); border-bottom: 1px solid var(--t-divider); }
.t-folder .fh i.ico { color: var(--sw-grey-700); }
.t-folder .fh .name { font-weight: 600; font-size: 0.92rem; }
.t-folder .fh .meta { font-size: 0.78rem; color: var(--sw-text-soft); }
.t-folder .fh .spacer { flex: 1; }
.t-folder .fh .sprint-badge { background: var(--t-accent-tint); color: var(--t-accent);
                              padding: 1px 8px; border-radius: 10px;
                              font-size: 0.72rem; font-weight: 600; }
.t-folder .lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                   gap: 1px; background: var(--t-divider); }
.t-folder .list-item { background: #fff; padding: 12px 14px; cursor:pointer;
                       display: flex; flex-direction: column; gap: 6px; }
.t-folder .list-item:hover { background: var(--t-accent-soft); }
.t-folder .list-item .top { display:flex; align-items:center; gap: 7px; }
.t-folder .list-item .top i.li { color: var(--sw-grey-700); font-size: 0.85rem; }
.t-folder .list-item .top .name { font-weight: 600; font-size: 0.88rem; flex: 1; }
.t-folder .list-item .top .ct { font-size: 0.74rem; color: var(--sw-text-soft);
                                background: var(--surface-muted); padding: 1px 7px;
                                border-radius: 9px; font-weight: 600; }
.t-folder .list-item .meta-row { display: flex; align-items: center; gap: 10px;
                                 font-size: 0.74rem; color: var(--sw-text-soft); }
.t-folder .list-item .meta-row .pp { display:inline-flex; align-items:center; gap: 4px; }
.t-folder .list-item .progress { height: 4px; background: var(--surface-muted);
                                 border-radius: 2px; overflow: hidden; }
.t-folder .list-item .progress .bar { height: 100%; background: var(--t-accent);
                                      border-radius: 2px; }

/* ── Task detail (full page) ─────────────────────────── */
.t-detail { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.t-detail .col-main { min-width: 0; }
.t-detail .col-side { min-width: 0; }
.t-detail .d-title { font-size: 1.6rem; font-weight: 700; line-height: 1.25;
                     margin: 6px 0 10px; color: var(--fg-primary); }
.t-detail .d-title-row { display: flex; align-items: center; gap: 10px;
                         margin-bottom: 4px; }
.t-detail .d-title-row .key { font-family: var(--font-mono); font-size: 0.78rem;
                              color: var(--sw-text-soft); }
.t-detail .d-title-row .crumb-mini { font-size: 0.78rem; color: var(--sw-text-soft); }
.t-detail .d-title-row .crumb-mini a { color: var(--sw-text-soft); }
.t-detail .d-meta-row { display: flex; align-items: center; gap: 14px;
                       padding: 10px 0; border-bottom: 1px solid var(--t-divider);
                       margin-bottom: 18px; font-size: 0.82rem; flex-wrap: wrap; }
.t-detail .d-meta-row .mi { display:inline-flex; align-items:center; gap: 5px;
                            color: var(--fg-secondary); }
.t-detail .d-meta-row .mi i { color: var(--sw-text-soft); }
.t-detail .d-section { margin-bottom: 22px; }
.t-detail .d-section h6 { margin: 0 0 8px; font-size: 0.7rem; font-weight: 700;
                          text-transform: uppercase; letter-spacing: 0.06em;
                          color: var(--sw-text-soft); }
.t-detail .d-desc { font-size: 0.92rem; color: var(--fg-primary); line-height: 1.55; }
.t-detail .d-desc p { margin: 0 0 10px; }
.t-detail .d-desc ul { margin: 0 0 10px; padding-left: 20px; }
.t-detail .d-desc code { font-family: var(--font-mono); font-size: 0.86rem;
                        background: var(--surface-muted); padding: 1px 5px;
                        border-radius: 3px; color: var(--sw-charcoal); }
.t-detail .d-tabs { display:flex; gap: 4px; border-bottom: 1px solid var(--t-divider);
                    margin-bottom: 12px; }
.t-detail .d-tabs .dt { padding: 6px 12px; font-size: 0.84rem; color: var(--sw-grey-700);
                        border-bottom: 2px solid transparent;
                        cursor: pointer; display:inline-flex; align-items:center; gap:5px; }
.t-detail .d-tabs .dt:hover { color: var(--fg-primary); }
.t-detail .d-tabs .dt.is-active { color: var(--t-accent); border-bottom-color: var(--t-accent); font-weight: 600; }
.t-detail .d-tabs .dt .ct { background: var(--surface-muted); border-radius: 9px;
                            font-size: 0.7rem; padding: 0 6px; color: var(--sw-text-soft); }

/* Subtask list */
.t-subtasks { display: flex; flex-direction: column; gap: 4px; }
.t-st { display: flex; align-items: center; gap: 9px; padding: 6px 8px;
        border-radius: 6px; }
.t-st:hover { background: var(--surface-muted); }
.t-st .ck-st { width: 14px; height: 14px; border: 1.5px solid var(--t-divider-strong);
               border-radius: 3px; background: #fff; display: inline-flex;
               align-items: center; justify-content: center; }
.t-st .ck-st.is-on { background: var(--t-accent); border-color: var(--t-accent); color: #fff; font-size: 9px; }
.t-st .ck-st.is-on i { font-size: 9px; }
.t-st .st-title { flex: 1; font-size: 0.86rem; }
.t-st .st-title.done { text-decoration: line-through; color: var(--sw-text-soft); }
.t-st .st-meta { font-size: 0.72rem; color: var(--sw-text-soft); }

/* Comments */
.t-comment { display: flex; gap: 10px; padding: 10px 0;
             border-bottom: 1px solid var(--t-divider); }
.t-comment:last-of-type { border-bottom: 0; }
.t-comment .av-lg { width: 32px; height: 32px; border-radius: 50%;
                    background: var(--t-av-accent, var(--sw-gold)); color: #fff;
                    font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
                    display: inline-flex; align-items: center; justify-content: center; }
.t-comment .body { flex: 1; min-width: 0; }
.t-comment .body .ch { display:flex; align-items:center; gap: 6px;
                       font-size: 0.82rem; margin-bottom: 3px; }
.t-comment .body .ch strong { font-weight: 600; }
.t-comment .body .ch .when { color: var(--sw-text-soft); font-size: 0.76rem; }
.t-comment .body .ct { font-size: 0.86rem; color: var(--fg-primary); line-height: 1.5; }
.t-comment .body .ct .mention { color: var(--t-accent); font-weight: 500;
                                background: var(--t-accent-soft); padding: 0 4px;
                                border-radius: 3px; }
.t-comment-box { border: 1px solid var(--t-divider-strong); border-radius: 8px;
                 padding: 8px 10px; margin-top: 10px; background: #fff; }
.t-comment-box .ph { color: var(--sw-text-soft); font-size: 0.86rem; }
.t-comment-box .actions { display:flex; align-items:center; gap: 6px; margin-top: 8px; }
.t-comment-box .actions .spacer { flex: 1; }
.t-comment-box .actions .ic { color: var(--sw-text-soft); font-size: 0.86rem; padding: 2px 4px; cursor:pointer; }

/* History */
.t-hist { display: flex; flex-direction: column; }
.t-hev { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px;
         align-items: flex-start; padding: 7px 0; font-size: 0.82rem; }
.t-hev .hi { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-muted);
             color: var(--sw-grey-700); display:inline-flex; align-items:center;
             justify-content:center; font-size: 0.78rem; }
.t-hev .ht { color: var(--fg-primary); line-height: 1.4; }
.t-hev .ht .who { font-weight: 600; }
.t-hev .ht .v { font-family: var(--font-mono); font-size: 0.78rem;
                background: var(--surface-muted); padding: 1px 5px;
                border-radius: 3px; color: var(--sw-grey-700); }
.t-hev .hw { color: var(--sw-text-soft); font-size: 0.74rem; white-space: nowrap; }

/* Side properties panel */
.t-props { background: #fff; border: 1px solid var(--t-divider);
           border-radius: 10px; padding: 14px; }
.t-props .pgroup { display: grid; grid-template-columns: 88px 1fr; gap: 6px 12px;
                   align-items: center; margin-bottom: 10px; font-size: 0.84rem; }
.t-props .pgroup .lab { color: var(--sw-text-soft); font-size: 0.78rem; }
.t-props .pgroup .val { color: var(--fg-primary); }
.t-props .pgroup .val.empty { color: var(--sw-text-soft); font-style: italic; cursor: pointer; }
.t-props .pgroup .val.empty:hover { color: var(--t-accent); }
.t-props .divider { border-top: 1px solid var(--t-divider); margin: 12px -14px;}
.t-props .pgroup-head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
                        letter-spacing: 0.06em; color: var(--sw-text-soft); margin: 4px 0 6px;
                        display:flex; align-items:center; justify-content: space-between;}
.t-props .pgroup-head .cog { cursor: pointer; color: var(--sw-text-soft); }
.t-props .pgroup-head .cog:hover { color: var(--t-accent); }
.t-props .field-empty { color: var(--sw-text-soft); font-style: italic; }
.t-props .time-progress { height: 4px; background: var(--surface-muted);
                         border-radius: 2px; overflow:hidden; margin-top: 4px; }
.t-props .time-progress .bar { height: 100%; background: var(--t-accent); }

/* ── Sprint summary KPIs ─────────────────────────────── */
.t-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.t-kpi { background: #fff; border: 1px solid var(--t-divider); border-radius: 10px;
         padding: 12px 14px; }
.t-kpi .lab { font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
              letter-spacing: 0.06em; color: var(--sw-text-soft); margin-bottom: 4px; }
.t-kpi .val { font-size: 1.6rem; font-weight: 800; color: var(--fg-primary); line-height: 1; }
.t-kpi .sub { font-size: 0.74rem; color: var(--sw-text-soft); margin-top: 4px; }
.t-kpi.accent .val { color: var(--t-accent); }

.t-sprint-progress { background: #fff; border: 1px solid var(--t-divider);
                    border-radius: 10px; padding: 14px; margin-top: 14px; }
.t-sprint-progress .head { display:flex; align-items:center; gap: 10px; margin-bottom: 10px; }
.t-sprint-progress .head .name { font-weight: 600; }
.t-sprint-progress .head .meta { font-size: 0.78rem; color: var(--sw-text-soft); margin-left:auto; }
.t-sprint-progress .stack { display: flex; height: 12px; border-radius: 6px;
                            overflow: hidden; gap: 1px; background: var(--surface-muted); }
.t-sprint-progress .stack .seg { height: 100%; }
.t-sprint-progress .legend { display:flex; gap: 14px; margin-top: 8px;
                            font-size: 0.76rem; color: var(--sw-grey-700); flex-wrap: wrap; }
.t-sprint-progress .legend .lg { display:inline-flex; align-items:center; gap: 5px; }
.t-sprint-progress .legend .lg .sw { width: 10px; height: 10px; border-radius: 2px; }

/* ── Admin / Settings ────────────────────────────────── */
.t-admin-grid { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.t-admin-grid .anav { display: flex; flex-direction: column; gap: 1px; }
.t-admin-grid .anav .ai { padding: 7px 10px; font-size: 0.85rem; color: var(--fg-primary);
                          border-radius: 6px; cursor: pointer;
                          display:inline-flex; align-items:center; gap: 8px; }
.t-admin-grid .anav .ai i { color: var(--sw-text-soft); width: 16px; }
.t-admin-grid .anav .ai:hover { background: var(--surface-muted); }
.t-admin-grid .anav .ai.is-active { background: var(--t-accent-tint); color: var(--t-accent);
                                    font-weight: 600; }
.t-admin-grid .anav .ai.is-active i { color: var(--t-accent); }
.t-admin-grid .anav .anav-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
                                  letter-spacing: 0.06em; color: var(--sw-text-soft);
                                  padding: 6px 10px; margin-top: 8px; }
.t-admin-card { background: #fff; border: 1px solid var(--t-divider);
                border-radius: 10px; overflow: hidden; }
.t-admin-card .ahead { padding: 12px 16px; border-bottom: 1px solid var(--t-divider);
                       display:flex; align-items:center; justify-content:space-between; }
.t-admin-card .ahead h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.t-admin-card .ahead .sub { font-size: 0.78rem; color: var(--sw-text-soft); margin: 1px 0 0; }
.t-admin-card .abody { padding: 14px 16px; }
.t-admin-card .arow { display: grid; align-items: center; gap: 10px;
                      padding: 8px 0; border-bottom: 1px solid var(--t-divider);
                      font-size: 0.84rem; }
.t-admin-card .arow:last-child { border-bottom: 0; }

/* Custom fields table */
.t-fields-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.t-fields-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase;
                     letter-spacing: 0.04em; color: var(--sw-grey-700);
                     font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--t-divider-strong);
                     background: var(--surface-muted); }
.t-fields-table td { padding: 8px 8px; border-bottom: 1px solid var(--t-divider); vertical-align: middle; }
.t-fields-table tr.empty td { color: var(--sw-text-soft); font-style: italic; }
.t-fields-table .slot { font-family: var(--font-mono); font-size: 0.74rem; color: var(--sw-text-soft); }
.t-fields-table .type-tag { font-size: 0.7rem; padding: 1px 7px; border-radius: 9px;
                            background: var(--surface-muted); color: var(--sw-grey-700);
                            font-weight: 600; }
.t-fields-table .type-tag.text { background: #eaf2fb; color: #1f4e8f; }
.t-fields-table .type-tag.numeric { background: #fff3e0; color: #8a4d00; }
.t-fields-table .type-tag.date { background: #d8f0e2; color: #155138; }

/* Toggle */
.t-toggle { width: 32px; height: 18px; background: var(--t-divider-strong);
            border-radius: 10px; position: relative; cursor: pointer;
            transition: background .15s; flex-shrink: 0; display:inline-block;
            vertical-align: middle; }
.t-toggle::after { content: ""; position: absolute; top: 2px; left: 2px;
                   width: 14px; height: 14px; border-radius: 50%; background: #fff;
                   box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left .15s; }
.t-toggle.is-on { background: var(--t-accent); }
.t-toggle.is-on::after { left: 16px; }

/* ── Forms ───────────────────────────────────────────── */
.t-form-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px;
              align-items: flex-start; padding: 10px 0;
              border-bottom: 1px solid var(--t-divider); }
.t-form-row:last-child { border-bottom: 0; }
.t-form-row .flabel { font-size: 0.84rem; font-weight: 600; color: var(--fg-primary);
                      padding-top: 6px; }
.t-form-row .flabel .req { color: var(--sw-red); margin-left: 2px; }
.t-form-row .flabel .help { font-size: 0.76rem; font-weight: 400; color: var(--sw-text-soft);
                            margin-top: 2px; }
.t-input { width: 100%; padding: 6px 10px; border: 1px solid var(--t-divider-strong);
           border-radius: 6px; font-family: inherit; font-size: 0.86rem; background: #fff; }
.t-input:focus { outline: 0; border-color: var(--t-accent);
                 box-shadow: 0 0 0 3px rgba(0,128,128,0.15); }
.t-textarea { min-height: 80px; resize: vertical; }
.t-select { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23808080'/></svg>") no-repeat right 10px center;
            padding-right: 26px; appearance: none; }

/* ── Notifications ───────────────────────────────────── */
.t-notif-dropdown { background: #fff; border: 1px solid var(--t-divider-strong);
                    border-radius: 10px; width: 380px;
                    box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06);
                    overflow: hidden; }
.t-notif-dropdown .nh { padding: 10px 14px; border-bottom: 1px solid var(--t-divider);
                        display:flex; align-items:center; justify-content:space-between; }
.t-notif-dropdown .nh h6 { margin: 0; font-size: 0.92rem; font-weight: 600; }
.t-notif-dropdown .nh .clear { color: var(--t-accent); font-size: 0.78rem; cursor:pointer; }
.t-notif-list { max-height: 360px; overflow: hidden; }
.t-notif { display: flex; gap: 10px; padding: 10px 14px;
           border-bottom: 1px solid var(--t-divider); position: relative; }
.t-notif:last-child { border-bottom: 0; }
.t-notif:hover { background: var(--surface-muted); cursor: pointer; }
.t-notif.unread::before { content: ""; position: absolute; top: 14px; left: 4px;
                          width: 6px; height: 6px; border-radius: 50%; background: var(--t-accent); }
.t-notif .nav-av { padding-left: 4px; }
.t-notif .nbody { flex: 1; min-width: 0; }
.t-notif .nbody .nt { font-size: 0.82rem; line-height: 1.4; }
.t-notif .nbody .nt .who { font-weight: 600; }
.t-notif .nbody .nm { font-size: 0.74rem; color: var(--sw-text-soft); margin-top: 3px; }
.t-notif .ntime { font-size: 0.72rem; color: var(--sw-text-soft); white-space:nowrap; }

.t-toast { background: #fff; border: 1px solid var(--t-divider-strong);
           border-left: 3px solid var(--t-accent);
           border-radius: 8px; padding: 11px 14px; width: 320px;
           box-shadow: var(--shadow-md); display: flex; gap: 10px; align-items: flex-start; }
.t-toast .ti { color: var(--t-accent); font-size: 1.1rem; }
.t-toast .tb { flex: 1; min-width: 0; }
.t-toast .tb .th { font-size: 0.86rem; font-weight: 600; margin-bottom: 2px; }
.t-toast .tb .td { font-size: 0.78rem; color: var(--sw-grey-700); line-height: 1.4; }
.t-toast .tb .ta { margin-top: 6px; display: flex; gap: 8px; }
.t-toast .tb .ta a { font-size: 0.78rem; font-weight: 600; }
.t-toast .tx { color: var(--sw-text-soft); cursor:pointer; font-size: 0.85rem; }

/* ── Quick-add modal ─────────────────────────────────── */
.t-mod-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display:flex;
            align-items: flex-start; justify-content: center; padding: 80px 16px; }
.t-mod { background: #fff; border-radius: 12px; width: 100%; max-width: 560px;
         box-shadow: 0 16px 40px rgba(0,0,0,0.25); }
.t-mod .mh { padding: 14px 18px; border-bottom: 1px solid var(--t-divider);
             display: flex; align-items: center; justify-content: space-between; }
.t-mod .mh h5 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.t-mod .mh .close { color: var(--sw-text-soft); cursor: pointer; }
.t-mod .mb { padding: 16px 18px; }
.t-mod .mf { padding: 12px 18px; border-top: 1px solid var(--t-divider);
             display:flex; gap: 8px; justify-content: flex-end; align-items: center; }
.t-mod .mf .hint { margin-right: auto; font-size: 0.74rem; color: var(--sw-text-soft); }
.t-mod .mf .hint kbd { background: var(--surface-muted); border-radius: 4px;
                      padding: 1px 5px; font-family: var(--font-mono); font-size: 0.7rem;
                      color: var(--sw-grey-700); border: 1px solid var(--t-divider-strong);
                      border-bottom-width: 2px; }

/* Quick-add inline pill row */
.t-qa-title { width: 100%; border: 0; outline: 0; font-family: inherit;
              font-size: 1.05rem; font-weight: 500; padding: 4px 0;
              background: transparent; color: var(--fg-primary); }
.t-qa-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.t-qa-pill { display:inline-flex; align-items:center; gap: 5px;
             padding: 4px 10px; border: 1px dashed var(--t-divider-strong);
             border-radius: 16px; font-size: 0.78rem; color: var(--sw-grey-700);
             background: #fff; cursor: pointer; }
.t-qa-pill:hover { border-color: var(--t-accent); color: var(--t-accent); border-style: solid; }
.t-qa-pill.is-set { background: var(--t-accent-soft); border-style: solid;
                    border-color: var(--t-accent); color: var(--t-accent); font-weight: 500; }

/* ── CSV import wizard ───────────────────────────────── */
.t-wizard { display: flex; gap: 24px; }
.t-wsteps { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; }
.t-wstep { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px;
           border-radius: 6px; cursor: pointer; }
.t-wstep .wsi { width: 22px; height: 22px; border-radius: 50%;
                background: var(--surface-muted); color: var(--sw-grey-700);
                font-size: 0.75rem; font-weight: 700; display: inline-flex;
                align-items: center; justify-content: center; flex-shrink: 0; }
.t-wstep.done .wsi { background: var(--t-accent); color: #fff; }
.t-wstep.active .wsi { background: #fff; border: 2px solid var(--t-accent); color: var(--t-accent); }
.t-wstep.active { background: var(--t-accent-soft); }
.t-wstep .ws-body .ws-title { font-size: 0.84rem; font-weight: 600; color: var(--fg-primary); }
.t-wstep.done .ws-body .ws-title { color: var(--sw-grey-700); }
.t-wstep .ws-body .ws-desc { font-size: 0.76rem; color: var(--sw-text-soft); }
.t-wzone { border: 2px dashed var(--t-divider-strong); border-radius: 10px;
           padding: 28px; text-align: center; background: var(--surface-muted); }
.t-wzone .wzi { font-size: 2rem; color: var(--sw-text-soft); }
.t-wzone .wzt { font-weight: 600; margin-top: 8px; }
.t-wzone .wzs { font-size: 0.82rem; color: var(--sw-text-soft); margin-top: 3px; }

/* ── Permissions admin ──────────────────────────────── */
.t-perm-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px;
              align-items: center; padding: 10px 0;
              border-bottom: 1px solid var(--t-divider); font-size: 0.86rem; }
.t-perm-row:last-child { border-bottom: 0; }
.t-perm-row .who { display: flex; align-items: center; gap: 9px; }
.t-perm-row .who .nm { font-weight: 500; }
.t-perm-row .who .sub { font-size: 0.74rem; color: var(--sw-text-soft); }
.t-perm-row .tag-team { background: var(--sw-sage-tint); color: #5a5037;
                        padding: 1px 8px; border-radius: 10px; font-size: 0.7rem;
                        font-weight: 600; }
.t-perm-row .tag-user { background: var(--surface-muted); color: var(--sw-grey-700);
                        padding: 1px 8px; border-radius: 10px; font-size: 0.7rem;
                        font-weight: 600; }
.t-perm-row .level-pill { display: inline-flex; gap: 1px; padding: 2px;
                          background: var(--surface-muted); border-radius: 7px; }
.t-perm-row .level-pill .lv { padding: 3px 9px; font-size: 0.74rem; font-weight: 500;
                              color: var(--sw-grey-700); border-radius: 5px; cursor: pointer; }
.t-perm-row .level-pill .lv.is-on { background: var(--t-accent); color: #fff; }

/* Compact module-tile mock (for Hub home placement) */
.t-hub-tile-host { padding: 18px; background: var(--surface-muted); }
.t-hub-tile { padding: 14px 16px; border-radius: 6px; background: #fff;
              border-left: 4px solid var(--t-accent);
              box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; gap: 12px;
              align-items: flex-start; cursor: pointer;
              transition: box-shadow .15s, transform .15s; }
.t-hub-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.t-hub-tile .ti { color: var(--t-accent); font-size: 1.6rem; }
.t-hub-tile .body .name { font-size: 1rem; font-weight: 600;
                          display: inline-flex; align-items: center; gap: 8px; }
.t-hub-tile .body .name .new { background: var(--sw-gold); color: #fff;
                               padding: 1px 7px; border-radius: 9px;
                               font-size: 0.65rem; font-weight: 700;
                               letter-spacing: 0.04em; }
.t-hub-tile .body .desc { color: var(--sw-text-soft); font-size: 0.82rem;
                          margin: 4px 0 8px; line-height: 1.4; }
.t-hub-tile .body .stats { display: flex; gap: 14px; font-size: 0.78rem; color: var(--sw-grey-700); }
.t-hub-tile .body .stats .stat strong { font-weight: 700; color: var(--fg-primary); }
.t-hub-tile .body .stats .stat .acc { color: var(--t-accent); }

/* ── Saved view tabs ─────────────────────────────────── */
.t-vtab-bar { display: flex; align-items: center; gap: 2px; padding: 0 0 0 0;
              border-bottom: 1px solid var(--t-divider); margin-bottom: 12px;
              flex-wrap: wrap; }
.t-vtab { display: inline-flex; align-items: center; gap: 6px;
          padding: 7px 13px; font-size: 0.82rem; color: var(--sw-grey-700);
          border-bottom: 2px solid transparent; cursor: pointer; }
.t-vtab:hover { color: var(--fg-primary); }
.t-vtab.is-active { color: var(--t-accent); border-bottom-color: var(--t-accent); font-weight: 600; }
.t-vtab i { font-size: 0.84rem; opacity: 0.7; }
.t-vtab .x { color: var(--sw-text-soft); font-size: 0.75rem; opacity: 0; margin-left: 2px; }
.t-vtab:hover .x { opacity: 0.6; }
.t-vtab.is-active .x { opacity: 0; }
.t-vtab.add { color: var(--sw-text-soft); }
.t-vtab.add:hover { color: var(--t-accent); }

/* Cell variants for custom fields shown inline (rare — toggleable) */
.t-cf-cell { font-size: 0.82rem; color: var(--fg-secondary); }
.t-cf-cell.empty { color: var(--sw-text-soft); font-style: italic; }

/* ── Misc helpers ───────────────────────────────────── */
.muted { color: var(--sw-text-soft); }
.tabular { font-variant-numeric: tabular-nums; }
.hr { border-top: 1px solid var(--t-divider); margin: 14px 0; }

/* Avatar colors. [BRIEF UI003 Step 7] --t-av-accent was --ac - an
   unnamespaced two-letter custom property, an anti-pattern flagged
   in UI003_structure_inventory.md (the kind of short generic name
   that WILL collide if another module ever adopts the same
   shorthand). Renamed to match the rest of this file's --t-* prefix;
   every value below is unchanged. */
.av-jb { --t-av-accent: #008080; }
.av-as { --t-av-accent: #003366; }
.av-rm { --t-av-accent: #964B00; }
.av-ew { --t-av-accent: #E07B00; }
.av-tp { --t-av-accent: #2d5a3d; }
.av-sk { --t-av-accent: #6b7280; }
.av-mh { --t-av-accent: #DC3545; }

/* Status accent bars */
.s-backlog-bg { background: #9ca3af; }
.s-todo-bg    { background: #3b82f6; }
.s-prog-bg    { background: #f59e0b; }
.s-rev-bg     { background: #B2AC88; }
.s-done-bg    { background: #10b981; }
.s-cancel-bg  { background: #d1d5db; }

/* Tag color presets. [BRIEF UI003 Step 7] --t-tag-bg/--t-tag-fg were
   --tg/--tgc - same unnamespaced anti-pattern as --ac above, renamed
   the same way. Every value below is unchanged. */
.tg-urgent  { --t-tag-bg: #fde2e4; --t-tag-fg: #b42318; }
.tg-bug     { --t-tag-bg: #fde2e4; --t-tag-fg: #b42318; }
.tg-tech    { --t-tag-bg: #f5f4ed; --t-tag-fg: #5a5037; }
.tg-fe      { --t-tag-bg: #eaf2fb; --t-tag-fg: #1f4e8f; }
.tg-be      { --t-tag-bg: #f3eaff; --t-tag-fg: #5b21b6; }
.tg-infra   { --t-tag-bg: #fff3e0; --t-tag-fg: #8a4d00; }
.tg-cust    { --t-tag-bg: #d8f0e2; --t-tag-fg: #155138; }
.tg-blocked { --t-tag-bg: #fce7f3; --t-tag-fg: #9d174d; }

/* ── Drag-drop visual feedback (Phase 2 C1) ─────────────────
   Sortable.js applies these classes during a drag:
     chosenClass — applied to the row while grabbed
     dragClass   — the floating clone being dragged
     ghostClass  — placeholder in the destination */
.t-task-chosen {
    background: var(--surface-muted, #f8f9fa) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: scale(1.01);
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.t-task-drag {
    opacity: 0.7;
    transform: rotate(0.5deg);
}
.t-task-ghost {
    opacity: 0.4;
    background: var(--t-accent-soft, #e6f4f4) !important;
    outline: 1px dashed var(--t-accent, #008080);
    outline-offset: -2px;
}
/* Grip handle hover affordance — grab cursor + bump opacity */
.tasks-drag-handle {
    cursor: grab;
    opacity: 0.5;
    transition: opacity 100ms ease;
}
.tasks-drag-handle:hover,
.tasks-row:hover .tasks-drag-handle {
    opacity: 1;
}
.tasks-drag-handle:active {
    cursor: grabbing;
}

/* ============================================================
   FIX PACK v2 — additions for sw-tasks.css
   APPEND to the existing sw-tasks.css. Pairs with the new
   tasks_right_panel.js and the _layout.html patches in v2.
   ============================================================ */

/* ── 3-column shell when the task panel is open ──────────── */
.t-shell {
    display: grid;
    grid-template-columns: auto 1fr 0fr;   /* sidebar | content | panel collapsed */
    transition: grid-template-columns 0.18s ease;
}
body.t-panel-open .t-shell {
    grid-template-columns: auto minmax(0, 1fr) 540px;
}
@media (max-width: 1280px) {
    body.t-panel-open .t-shell { grid-template-columns: auto minmax(0, 1fr) 480px; }
}
@media (max-width: 1024px) {
    /* On narrow screens overlay instead of push; sidebar collapses to rail. */
    body.t-panel-open .t-shell { grid-template-columns: auto 0 100vw; }
    body.t-panel-open .t-content { display: none; }
}

/* ── Right panel container ───────────────────────────────── */
.t-right-panel {
    background: #fff;
    border-left: 1px solid var(--t-divider, #ececec);
    overflow: auto;
    min-width: 0;
    display: none;                /* hidden until panel-open */

    /* UX Rework C7.5 — scroll-shadow indicator.
       Layered background showing soft fading shadows at top + bottom
       when there's more content to scroll. The two solid white bands
       cover the shadows when content is scrolled to that edge; the
       two radial-gradient bands always paint the shadow but are
       attached to the scrollport (background-attachment: local), so
       they slide out of view when the corresponding edge is reached.
       Lea Verou's classic scroll-shadow technique. */
    background:
        /* solid white masks — local attachment, hide shadow at edges */
        linear-gradient(#fff 30%, rgba(255,255,255,0)) center top,
        linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom,
        /* shadow bands — scroll attachment, always at viewport edges */
        radial-gradient(ellipse at top, rgba(0,0,0,0.12), transparent 60%)
            center top,
        radial-gradient(ellipse at bottom, rgba(0,0,0,0.12), transparent 60%)
            center bottom;
    background-repeat: no-repeat;
    background-size: 100% 30px, 100% 30px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
}
body.t-panel-open .t-right-panel { display: block; }

.t-panel-loading,
.t-panel-error {
    padding: 32px 24px;
    color: var(--sw-text-soft, #6b7280);
    font-size: 0.86rem;
    text-align: center;
}
.t-panel-error { color: var(--sw-red, #dc3545); }

/* ── Panel header (close + prev/next + breadcrumb) ───────── */
.t-panel-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid #f1f5f9;
    position: sticky; top: 0; background: #fff; z-index: 2;
    font-size: 0.84rem;
}
.t-panel-head .t-panel-nav {
    display: inline-flex; flex-direction: column;
    margin-right: 4px;
}
.t-panel-head .t-panel-nav .bi {
    font-size: 0.7rem; color: var(--sw-text-soft); cursor: pointer; line-height: 0.9; padding: 1px 4px;
}
.t-panel-head .t-panel-nav .bi:hover { color: var(--fg-primary); }
.t-panel-head .spacer { flex: 1; }
.t-panel-head .t-panel-ic {
    width: 28px; height: 28px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--sw-text-soft); font-size: 0.92rem;
}
.t-panel-head .t-panel-ic:hover { background: var(--surface-muted); }
.t-panel-head .t-panel-ic.close:hover { background: #fee2e2; color: var(--sw-red); }

/* ── Panel body ──────────────────────────────────────────── */
.t-panel-body { padding: 14px 22px 24px; }

.t-panel-task-type {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
    font-size: 0.78rem; color: var(--sw-text-soft);
}
.t-panel-task-type .ttype {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 5px;
    background: var(--surface-muted); cursor: pointer;
}

.t-panel-subtask-of {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--sw-text-soft); margin-bottom: 6px;
}
.t-panel-subtask-of .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 10px; background: var(--surface-muted);
    font-size: 0.76rem; color: var(--fg-primary);
}
.t-panel-subtask-of .pill .hash {
    width: 8px; height: 8px; border-radius: 50%;
}

.t-panel-title {
    font-size: 1.5rem; font-weight: 600;
    line-height: 1.2; margin: 0 0 14px;
    color: var(--fg-primary); letter-spacing: -0.01em;
}

/* ── Inline-editable field rows ──────────────────────────── */
.t-panel-fields { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.t-panel-field {
    display: flex; align-items: center; gap: 16px;
    padding: 6px 6px;
    border-radius: 5px;
    cursor: pointer;
}
.t-panel-field:hover { background: var(--surface-muted); }
.t-panel-field .lab {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.82rem; color: var(--sw-text-soft);
    width: 150px; flex-shrink: 0;
}
.t-panel-field .lab .bi { font-size: 0.88rem; color: var(--sw-grey-400, #9ca3af); }
.t-panel-field .val {
    flex: 1;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.84rem; color: var(--fg-primary);
}
.t-panel-field .val.faint { color: var(--sw-text-soft); }
.t-panel-field .date-chip,
.t-panel-field .empty-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 4px;
    background: var(--surface-muted); color: var(--sw-text-soft);
    font-size: 0.78rem;
    border: 1px dashed transparent;
}
.t-panel-field:hover .date-chip { background: #fff; border-color: var(--t-divider-strong, #cbd5e1); }

/* ── Panel description + activity ────────────────────────── */
.t-panel-desc {
    padding: 12px 0; margin-bottom: 12px;
    font-size: 0.88rem; color: var(--fg-primary); line-height: 1.55;
    border-bottom: 1px solid var(--t-divider);
    text-wrap: pretty;
    white-space: pre-wrap;
}
.t-panel-desc code {
    font-family: var(--font-mono); font-size: 0.82rem;
    background: var(--surface-muted); padding: 1px 5px; border-radius: 3px;
    word-break: break-all;
}

.t-panel-actions { display: flex; flex-direction: column; gap: 2px; }
.t-panel-actions .act {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 6px;
    border-radius: 5px;
    font-size: 0.84rem; color: var(--sw-grey-700);
    cursor: pointer;
}
.t-panel-actions .act:hover { background: var(--surface-muted); color: var(--fg-primary); }
.t-panel-actions .act .bi { color: var(--sw-text-soft); font-size: 0.94rem; width: 18px; }

/* ── List row: mark the row that's currently open in the panel ──
   Subtle grey treatment (was teal-accent) so the highlight reads
   as "this row's panel is open" without competing with the rest
   of the brand teal on the page. */
tr.tasks-row.is-panel-active td {
    background-color: #dee2e6 !important;
    box-shadow: inset 4px 0 0 #6c757d;
}

/* ── Subtask + sub-subtask indent on the title cell ───────
   Reinforces the inline chevron (.ms-3 / .ms-5) so the indent
   reads clearly even when the title column wraps to a second
   line. 24px per level. [#1001] — bumped to 3 levels max
   (matches MAX_SUBTASK_DEPTH). */
tr.tasks-subtask-row        .tasks-col-title { padding-left: 24px; }
tr.tasks-subsubtask-row     .tasks-col-title { padding-left: 48px; }
tr.tasks-subsubsubtask-row  .tasks-col-title { padding-left: 72px; }

/* ── @mention picker (UX Rework C7.7) ─────────────────────
   Floating dropdown attached to the panel comment textarea.
   Absolute-positioned by JS just below the textarea. Uses
   --sw-* corp tokens per design system (Tier 1 structural). */
.t-mention-picker {
    position: absolute;
    z-index: 1090;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--sw-white, #ffffff);
    border: 1px solid var(--sw-border, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.84rem;
    color: var(--sw-text);
}
.t-mention-row {
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.t-mention-row:hover {
    background: var(--sw-bg, #f8f9fa);
}
.t-mention-row.is-highlighted {
    background: var(--sw-bg, #f8f9fa);
    font-weight: 500;
}

/* ── Contenteditable inline-edit styling (UX Rework C7.3 + C7.4) ──
   Shared treatment for .t-panel-desc (description), .t-panel-title
   (panel title), .task-detail-title (full task detail page title).
   Placeholder rendered via :empty::before reading data-placeholder.
   JS clears the placeholder text on focus so the user doesn't type
   into it. */
.t-panel-desc:empty::before,
.t-panel-title:empty::before,
.task-detail-title:empty::before {
    content: attr(data-placeholder);
    color: var(--sw-text-soft);
    font-style: italic;
}
.t-panel-desc[contenteditable="true"],
.t-panel-title[contenteditable="true"],
.task-detail-title[contenteditable="true"] {
    cursor: text;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.t-panel-desc[contenteditable="true"]:hover,
.t-panel-title[contenteditable="true"]:hover,
.task-detail-title[contenteditable="true"]:hover {
    background: var(--surface-muted, #f8f9fa);
}
.t-panel-desc[contenteditable="true"]:focus,
.t-panel-title[contenteditable="true"]:focus,
.task-detail-title[contenteditable="true"]:focus {
    background: var(--surface-muted, #f8f9fa);
    outline: 2px solid var(--t-accent, #008080);
    outline-offset: 2px;
}

/* ── Generic CSV import wizard (C2) ──────────────────────
   Step indicator + mapping table + warning highlights. Uses the
   --sw-* corp tokens already established elsewhere. */
.t-import-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.84rem;
}
.t-import-progress .step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--sw-bg, #f8f9fa);
    color: var(--sw-text-soft, #6c757d);
    border: 1px solid var(--sw-border, #dee2e6);
}
.t-import-progress .step.is-active {
    background: var(--t-accent, #008080);
    color: #fff;
    border-color: var(--t-accent, #008080);
}
.t-import-progress .step.is-done {
    background: var(--sw-white, #fff);
    color: var(--sw-grey-700, #495057);
    border-color: var(--sw-border, #dee2e6);
}
.t-import-progress .step .num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.t-import-progress .sep {
    color: var(--sw-text-soft, #6c757d);
    font-size: 1.1rem;
    line-height: 1;
}

/* Field-mapping table — required-row highlight + sample cell tone */
.t-import-map-table tr.is-required {
    background: rgba(220, 53, 69, 0.03);
}
.t-import-map-table .t-import-sample {
    font-family: var(--font-mono, monospace);
    background: var(--sw-bg, #f8f9fa);
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Step 3 preview table — subtask row indent */
.t-fields-table tr.is-subtask {
    background: rgba(0, 128, 128, 0.025);
}

/* Warning body collapse helper (tasks_import.js toggles .is-hidden) */
[data-tasks-import-warnings-body].is-hidden {
    display: none;
}

/* ── Kanban subtask indicator (Option A — subtasks as cards) ──
   Small "↳ Parent title" hint under the title on subtask cards.
   Muted so the card visually stays subordinate to top-level cards
   without losing readability. */
.t-kcard-parent-ref {
    font-size: 0.72rem;
    color: var(--sw-text-soft, #6c757d);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ── List view: surfaced-subtask parent hint ──
   When a filter is active and a subtask whose parent doesn't match
   gets surfaced as a top-level row, the title cell carries a
   "↳ Parent title" line below the link. Same muted style as the
   Kanban .t-kcard-parent-ref, scaled for the list-row context. */
.t-row-parent-ref {
    font-size: 0.74rem;
    color: var(--sw-text-soft, #6c757d);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ── Phase 2a (Migration 122) — Task type badge ──────────── */
/* Used in admin list, task panel, list view rows, kanban cards. */
.task-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    background: color-mix(in srgb, var(--tt-colour, grey) 18%, white);
    color: color-mix(in srgb, var(--tt-colour, grey) 80%, black);
    border: 1px solid color-mix(in srgb, var(--tt-colour, grey) 35%, white);
    white-space: nowrap;
}
.task-type-badge .tt-icon { line-height: 1; font-size: 0.85rem; }
.task-type-badge .tt-label { line-height: 1.2; }
.task-type-badge.sm {
    padding: 0 6px;
    font-size: 0.72rem;
}
.task-type-badge.sm .tt-icon { font-size: 0.78rem; }

/* ── Phase 2a F3 — Assignee chip (task panel cell) ─────── */
.t-assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.3;
    background: var(--surface-muted, #f3f4f6);
    color: var(--fg-primary, #1f2937);
    border: 1px solid var(--t-divider, #e5e7eb);
    margin-right: 4px;
    white-space: nowrap;
}
.t-assignee-chip > .bi { font-size: 0.85rem; opacity: 0.75; }

/* [#1647] RAG (Red/Amber/Green/Grey) indicator dot — appears next
   to folder names and list names on the Space detail page. The
   colour is set inline per-instance so a single class covers all
   four states. */
.rag-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 6px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────
   [#1949] List view enhancements — compact pills, initials
   circles, table font −10%, group-by section headers.
   ────────────────────────────────────────────────────────── */

/* List-view table font −10% (root sets 0.9375rem; table-only
   override pulls cells to ~0.84rem). Scoped to
   .tasks-list-table so toolbar / filter bar / sidebar
   keep their existing sizes. */
.tasks-list-table tbody td,
.tasks-list-table tbody th {
    font-size: 0.84rem;
}
/* [UI001-5c-2] Header row: not bold (was Bootstrap's default
   font-weight:700, with no override anywhere in this file), and one
   size smaller than the body (0.78rem vs 0.84rem) rather than the
   same size as the cells it labels. */
.tasks-list-table thead th {
    font-size: 0.78rem;
    font-weight: 500;
}

/* Compact priority pill — flag icon only (full label moves
   to the title attribute as a tooltip). Existing `.badge
   .tasks-priority-pill` background-color is inline-styled
   from the priority colour map; this rule trims padding so
   the pill is the same height as the task-type-badge.sm. */
.tasks-priority-pill.icon-only {
    padding: 2px 7px;
    font-size: 0.78rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    color: #fff;
}
.tasks-priority-pill.icon-only .bi { line-height: 1; }

/* Assignee initials circles. Stacked with negative margin so
   subsequent circles overlap the previous; first circle stays
   on top via DOM order + relative positioning. */
.assignee-stack {
    display: inline-flex;
    align-items: center;
}
.assignee-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
    line-height: 1;
    flex-shrink: 0;
}
.assignee-stack .assignee-circle + .assignee-circle {
    margin-left: -8px;
}
.assignee-stack .assignee-circle.overflow {
    background: var(--sw-text-soft, #6c757d);
    font-size: 0.66rem;
}

/* Group-by section headers — coloured pill + count.
   Used when ?group_by=… or saved pref is active. The
   header is a <tr> spanning all visible columns; click
   toggles collapse of every <tr> tagged with
   data-group-key=<this>. */
.tasks-group-header td {
    background: var(--surface-muted, #f8f9fa) !important;
    border-top: 2px solid var(--t-divider-strong, #cbd5e1);
    border-bottom: 1px solid var(--t-divider, #e5e7eb);
    padding: 6px 12px !important;
    cursor: pointer;
    user-select: none;
}
.tasks-group-header .tg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
}
.tasks-group-header .tg-count {
    margin-left: 8px;
    color: var(--sw-grey-700, #495057);
    font-size: 0.76rem;
}
.tasks-group-header .tg-chev {
    color: var(--sw-grey-700, #495057);
    font-size: 0.78rem;
    margin-right: 6px;
    transition: transform 0.15s ease;
    display: inline-block;
}
.tasks-group-header.is-collapsed .tg-chev {
    transform: rotate(-90deg);
}
.tasks-group-header:hover .tg-pill {
    filter: brightness(1.05);
}

/* [#2003] List view SUM footer — bolded totals row anchored at the
   bottom of the table. Top border separates from the last data
   row; muted background distinguishes from data; no hover (footer
   isn't interactive). Cell padding matches the data rows so the
   total aligns under each summed column. tabular-nums keeps
   numeric columns vertically aligned with the cells above. */
.tasks-list-totals td {
    border-top: 2px solid var(--t-divider-strong, #cbd5e1);
    background: var(--surface-muted, #f8f9fa);
    padding: 6px 10px !important;
    color: var(--fg-primary, #1f2937);
    font-variant-numeric: tabular-nums;
}
.tasks-list-totals tr { cursor: default; }
.tasks-list-totals tr:hover td {
    background: var(--surface-muted, #f8f9fa);
}

/* ============================================================
   [#2986] Column drag-to-reorder — list view <thead> cells.
   Grip icon appears only on visible (non-[hidden]) columns and
   shows the grab cursor; hidden columns trail at the right edge
   carrying the [hidden] attribute, never visible to the operator
   until toggled on from the picker.
   ============================================================ */
th.tasks-col:not([hidden]) {
    cursor: grab;
}
th.tasks-col:not([hidden]):active {
    cursor: grabbing;
}
th.tasks-col .tasks-col-grip {
    display: inline-block;
    color: var(--sw-text-soft, #adb5bd);
    font-size: 0.82rem;
    margin-right: 4px;
    opacity: 0.65;
}
th.tasks-col:hover .tasks-col-grip {
    opacity: 1;
}
th.tasks-col[hidden] .tasks-col-grip {
    /* Hidden columns shouldn't expose the grip even briefly
       during the show/hide transition. */
    display: none;
}

/* ============================================================
   [#2817 / #2818] Customer + Product code panel rows — narrow the
   label gutter from the default 150px to 110px so the chip has
   ~40px more horizontal room for the code. Scoped to these two
   rows only; other panel fields (Sprint, dates, Tags, etc.) keep
   the wider gutter.
   ============================================================ */
.t-panel-field.tasks-col-customer_code .lab,
.t-panel-field.tasks-col-product_code  .lab {
    width: 110px;
}

/* ============================================================
   [#3158] Sortable column headers — click cycles
     neutral → asc → desc → neutral
   JS in tasks_list_view.js reads/writes data-sort-state on the <th>
   and swaps the arrow icon's class. CSS here only handles the
   pointer/cursor state, opacity dim on neutral, and full opacity
   on hover or when actively sorted.
   ============================================================ */
th[data-sortable] {
    cursor: pointer;
    user-select: none;
}
th[data-sortable] .tasks-col-sort {
    opacity: 0.35;
    margin-left: 4px;
    font-size: 0.85em;
}
th[data-sortable]:hover .tasks-col-sort,
th[data-sortable][data-sort-state="asc"] .tasks-col-sort,
th[data-sortable][data-sort-state="desc"] .tasks-col-sort {
    opacity: 1;
}

/* ============================================================
   [#3055] Due-date colour states — shared by the list view (text
   colour on <span> inside <td>) and the kanban card chip
   (background + text via the .tasks-due-chip composability).
   Thresholds come from Space.config's due_soon_days (three-layer
   resolver) so list + kanban always agree on what "soon" means.
   ============================================================ */
.tasks-due-overdue { color: #dc3545; font-weight: 500; }
.tasks-due-soon    { color: #B2AC88; font-weight: 500; }
/* Kanban chip variant — combine .tasks-due-chip with either colour
   class to add the pill background used on kanban cards. */
.tasks-due-chip { padding: 1px 6px; border-radius: 10px; font-size: 0.7rem; }
.tasks-due-chip.tasks-due-overdue { background: #fee; }
.tasks-due-chip.tasks-due-soon    { background: #fdf3e7; }