/* ═══════════════════════════════════════════════════════════════
   PC WEB APP OVERHAUL, part 2: My tasks (Task Feed) on PC.
   Desktop only (body.dx). The phone Open / Active / Done tiles are
   reused (clientView.js _tfPhone renders them on PC too); clicking a
   tile shows its details on the right instead of a bottom sheet.
   Tile styles below are the phone ones, scoped to body.dx.
   Logic: deskx3.js.
   ═══════════════════════════════════════════════════════════════ */
#dxTfHead, #dxTfDetail { display: none; }
body.dx .nh-cat-home      { --nh-cfg: #0f8a7a; --nh-cbg: #e2f5f1; }
body.dx .nh-cat-civil     { --nh-cfg: #1f6fd1; --nh-cbg: #e6f0fc; }
body.dx .nh-cat-domestic  { --nh-cfg: #2b8a3e; --nh-cbg: #e5f5e8; }
body.dx .nh-cat-medical   { --nh-cfg: #d0436b; --nh-cbg: #fde8ee; }
body.dx .nh-cat-tech      { --nh-cfg: #6a4bd1; --nh-cbg: #efeafd; }
body.dx .nh-cat-transport { --nh-cfg: #c46a0c; --nh-cbg: #fdf0e1; }
body.dx .nh-cat-legal     { --nh-cfg: #8a5a2b; --nh-cbg: #f5ece2; }
body.dx .nh-cat-education { --nh-cfg: #a3427a; --nh-cbg: #f8e8f1; }
body.dx .nh-cat-general   { --nh-cfg: #4b5d52; --nh-cbg: #eaefec; }

/* page frame */
body.dx #taskFeedView { overflow-y: auto; background: var(--dx-bg); }
body.dx #taskFeedView > #tfHero, body.dx #taskFeedView .task-feed-aside, body.dx #taskFeedView .messages-column, body.dx #taskFeedView .hub-post-task-banner { display: none !important; }
body.dx #taskFeedView > .tab-main-body { display: block !important; height: auto !important; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
body.dx #taskFeedView .task-feed-main { display: grid !important; grid-template-columns: minmax(0, 1fr) 440px; gap: 18px; align-items: start; padding: 20px 0 40px !important; overflow: visible !important; height: auto !important; background: transparent !important; border: 0 !important; max-width: none !important; }
body.dx #dxTfHead { display: flex; grid-column: 1 / -1; justify-content: space-between; align-items: flex-end; font-family: Inter, sans-serif; color: var(--dx-ink); }
#dxTfHead h1 { margin: 0; font: 800 24px Outfit, Inter, sans-serif; }
#dxTfHead p { margin: 4px 0 0; color: var(--dx-mut); font-size: 13.5px; }
#dxTfHead button { display: inline-flex; align-items: center; gap: 7px; background: var(--dx-g); color: #fff; border: 0; border-radius: 10px; padding: 11px 18px; font: 800 14px Inter, sans-serif; cursor: pointer; }
body.dx #taskFeedActivity { grid-column: 1; padding: 0 !important; min-width: 0; }
body.dx #taskFeedActivity .tf-seg { display: inline-flex !important; background: transparent !important; padding: 0 !important; gap: 8px !important; }
body.dx #taskFeedActivity .tf-seg button { flex: 0 0 auto !important; background: var(--dx-card) !important; border: 1px solid var(--dx-line) !important; border-radius: 999px !important; padding: 8px 16px !important; font-size: 13.5px !important; color: var(--dx-ink) !important; box-shadow: none !important; }
body.dx #taskFeedActivity .tf-seg button.on { background: #e5f5e8 !important; border-color: #9fd6ab !important; color: var(--dx-g) !important; }
body.dx #taskFeedActivity .tf-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
body.dx #taskFeedActivity .tf-tile { border: 2px solid transparent; transition: border-color .12s ease, transform .12s ease; }
body.dx #taskFeedActivity .tf-tile:hover { border-color: rgba(30, 122, 51, .25); }
body.dx #taskFeedActivity .tf-tile.dx-sel { border-color: var(--dx-g); }
body.dx #taskFeedActivity .tf-empty { grid-column: 1 / -1; background: var(--dx-card); border: 1px dashed var(--dx-line); border-radius: 14px; }
body.dx #dxTfDetail { display: block; grid-column: 2; position: sticky; top: 16px; background: var(--dx-card); border: 1px solid var(--dx-line); border-radius: 14px; padding: 6px 4px; max-height: calc(100vh - 230px); overflow-y: auto; }
#dxTfDetail .dx3-empty { padding: 40px 20px; text-align: center; color: var(--dx-mut); font: 500 14px Inter, sans-serif; }
@media (max-width: 1180px) {
  body.dx #taskFeedView .task-feed-main { grid-template-columns: minmax(0, 1fr) 380px; }
  body.dx #taskFeedActivity .tf-list { grid-template-columns: minmax(0, 1fr); }
}

/* ── phone tile styles (from clientView.css PHONE TASK FEED), scoped to PC ── */
body.dx #taskFeedActivity { padding: 16px 14px 90px; }
body.dx #taskFeedActivity .tf-seg {
  display: flex; gap: 4px; background: #e6ece8; border-radius: 16px; padding: 4px;
}
body.dx #taskFeedActivity .tf-seg button {
  flex: 1 1 0; border: 0; background: transparent; border-radius: 12px; padding: 10px 4px;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #56645b; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.dx #taskFeedActivity .tf-seg button.on { background: #fff; color: #14241a; font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
body.dx #taskFeedActivity .tf-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
body.dx #taskFeedActivity .tf-empty { text-align: center; color: #7a887f; font-size: 13px; padding: 28px 12px; }
body.dx #taskFeedActivity .tf-tile {
  background: var(--nh-cbg, #e5f5e8); border-radius: 18px; padding: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
body.dx #taskFeedActivity .tf-tile:active { transform: scale(.98); }
body.dx #taskFeedActivity .tf-tile:focus { outline: none; }
body.dx #taskFeedActivity .tf-tile-w { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
body.dx #taskFeedActivity .tf-tt-top { display: flex; align-items: flex-start; gap: 12px; }
body.dx #taskFeedActivity .tf-tt-ico {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: rgba(255,255,255,.85);
  color: var(--nh-cfg, #2b8a3e); display: flex; align-items: center; justify-content: center;
}
body.dx #taskFeedActivity .tf-tile-w .tf-tt-ico { background: var(--nh-cbg, #e5f5e8); }
body.dx #taskFeedActivity .tf-tt-ico .nh-ic { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; }
body.dx #taskFeedActivity .tf-tt-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.dx #taskFeedActivity .tf-tt-txt b { font-size: 15px; font-weight: 800; color: #14241a; line-height: 1.25; }
body.dx #taskFeedActivity .tf-tt-txt small { font-size: 12.5px; color: #56645b; }
/* Ren 2026-11-01: a long title stays on one line so tiles keep their height */
body.dx #taskFeedActivity .tf-tt-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the date/budget line never wraps either, so an Open tile is always the same height */
body.dx #taskFeedActivity .tf-tile:not(.tf-tile-w) .tf-tt-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
body.dx #taskFeedActivity .tf-tile:not(.tf-tile-w) .tf-tt-meta span { flex: 0 1 auto; min-width: 0; }
body.dx #taskFeedActivity .tf-tile:not(.tf-tile-w) .tf-tt-meta span + span { flex: 0 0 auto; }
body.dx #taskFeedActivity .tf-tt-meta .lucide-ico { flex: 0 0 auto; }
body.dx #taskFeedActivity .tf-tt-meta em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.dx #taskFeedActivity .tf-tt-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dx #taskFeedActivity .tf-tt-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #56645b; }
body.dx #taskFeedActivity .tf-tt-meta span { display: inline-flex; align-items: center; gap: 5px; }
body.dx #taskFeedActivity .tf-tt-meta .lucide-ico { width: 14px; height: 14px; }
body.dx #taskFeedActivity .tf-tt-tag {
  flex: 0 0 auto; background: #fff; border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800;
}
body.dx #taskFeedActivity .tf-exp { color: #c02f57; }
body.dx #taskFeedActivity .tf-cash { background: var(--ag-cash-bg, #fbf1d6); color: var(--ag-cash-ink, #6e4600); }
body.dx #taskFeedActivity .tf-tt-foot { display: flex; margin-top: 12px; }
body.dx #taskFeedActivity .tf-apl {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: rgba(255,255,255,.6);
  border-radius: 999px; padding: 4px 12px 4px 4px; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.dx #taskFeedActivity .tf-apl:active { transform: scale(.97); }
body.dx #taskFeedActivity .tf-avs { display: inline-flex; }
body.dx #taskFeedActivity .tf-avs i {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 10px; font-weight: 800; color: #fff;
}
body.dx #taskFeedActivity .tf-avs i:first-child { margin-left: 0; }
body.dx #taskFeedActivity .tf-avs-ico {
  width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--nh-cfg, #2b8a3e);
  display: inline-flex; align-items: center; justify-content: center;
}
body.dx #taskFeedActivity .tf-avs-ico .lucide-ico { width: 14px; height: 14px; }
body.dx #taskFeedActivity .tf-apl-n { font-size: 13.5px; font-weight: 800; color: #14241a; }
/* Ren 2026-11-01: applicants on the right of the tile, location below */
body.dx #taskFeedActivity .tf-apl-r {
  flex: 0 0 auto; align-self: flex-start; flex-direction: column; gap: 2px;
  background: transparent; border-radius: 12px; padding: 0 2px; min-width: 64px;
}
body.dx #taskFeedActivity .tf-apl-r .tf-avs i, body.dx #taskFeedActivity .tf-apl-r .tf-avs-ico { width: 24px; height: 24px; }
body.dx #taskFeedActivity .tf-apl-r .tf-apl-n { font-size: 11.5px; line-height: 14px; white-space: nowrap; }
body.dx #taskFeedActivity .tf-tt-loc .tf-tt-tag { margin-left: auto; }
body.dx #taskFeedActivity .tf-tt-loc .tf-tt-tag + .tf-tt-tag { margin-left: 6px; }
/* same height as the old applicants pill row (Ren: maintain the height) */
body.dx #taskFeedActivity .tf-tt-loc {
  align-items: center; gap: 6px; min-width: 0; height: 34px; padding: 0 4px;
  font-size: 13px; font-weight: 600; color: #3d4c43;
}
body.dx #taskFeedActivity .tf-tt-loc .lucide-ico { width: 15px; height: 15px; flex: 0 0 auto; color: var(--nh-cfg, #2b8a3e); }
body.dx #taskFeedActivity .tf-tt-loc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dx #taskFeedActivity .tf-loc-none { color: #8a968e; font-weight: 500; }
/* Ren 2026-11-02 (draft A): pay first in bold; applicants = icon + number pill (99+ max), tap opens the list */
body.dx #taskFeedActivity .tf-tt-meta .tf-pay { color: #14241a; font-weight: 800; }
body.dx #taskFeedActivity .tf-tile:not(.tf-tile-w) .tf-tt-meta span.tf-pay { flex: 0 0 auto; }
body.dx #taskFeedActivity .tf-tile:not(.tf-tile-w) .tf-tt-meta span.tf-pay + span { flex: 0 1 auto; min-width: 0; }
body.dx #taskFeedActivity .tf-apl-a {
  flex: 0 0 auto; align-self: center; gap: 6px; padding: 7px 12px; min-width: 58px; justify-content: center;
  background: rgba(255,255,255,.75);
}
body.dx #taskFeedActivity .tf-apl-a .lucide-ico { width: 17px; height: 17px; color: var(--nh-cfg, #2b8a3e); }
body.dx #taskFeedActivity .tf-apl-a strong { font-size: 15px; font-weight: 800; color: #14241a; }
body.dx #taskFeedActivity .tf-apl-a:not(.has) strong { color: #7a887f; }
body.dx #taskFeedActivity .tf-steps { display: flex; gap: 6px; margin-top: 14px; }
body.dx #taskFeedActivity .tf-step { flex: 1 1 0; text-align: center; }
body.dx #taskFeedActivity .tf-step span { display: block; height: 6px; border-radius: 9px; background: #e1e8e3; }
body.dx #taskFeedActivity .tf-step.on span { background: #1f8a3a; }
body.dx #taskFeedActivity .tf-step small { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; color: #56645b; }
body.dx #taskFeedActivity .tf-step.cur small { font-weight: 800; color: #1f8a3a; }
body.dx #taskFeedActivity .tf-done .tf-step.on span { background: #8a968e; }
body.dx #taskFeedView > .tab-main-body, body.dx #taskFeedView .task-feed-main { background: transparent !important; }