From cec3be73fb47df78aa34e97eda1e028c6dc80233 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 19:46:34 +0500
Subject: [PATCH 01/22] Title tier of relevance_score accepts token containment

Live case: the job titled "Generative Engineer" sourced a pool titled
"Generative AI Engineer" -- the exact phrase never occurs in that title,
so every genuine match fell through to the scattered 35 tier and the
whole pool compressed into the 40s. A current title containing every
job-title token now earns the full 55. The headline tier stays
phrase-only so keyword-stuffed headlines still cap at the 35 tier.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 backend/talent/plugins.py            | 22 ++++++++++++++++------
 backend/tests/test_talent_plugins.py | 20 +++++++++++++++++++-
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/backend/talent/plugins.py b/backend/talent/plugins.py
index 2bca488..a0409fc 100644
--- a/backend/talent/plugins.py
+++ b/backend/talent/plugins.py
@@ -418,11 +418,17 @@ def _match_tokens(*texts) -> set[str]:
 def relevance_score(job: dict, profile: dict) -> int:
     """0-100 job-fit rank for sorting, computed when a profile is persisted.
 
-    Deterministic and free. Title component: the job title as an exact PHRASE
-    in the person's current title scores 55, in their headline 45; scattered
+    Deterministic and free. Title component: a current title CONTAINING every
+    job-title token scores 55 — containment, not exact phrase, because job
+    titles rarely reappear verbatim ("Generative Engineer" vs the pool's
+    "Generative AI Engineer"; seen live: the phrase rule dropped every real
+    match to the scattered tier and compressed the whole pool into the 40s).
+    The job title as an exact phrase in the headline scores 45; scattered
     token overlap caps at 35 — a keyword-stuffed headline ("AI/ML Engineer |
     Python | FastAPI | ...") must not outrank someone whose title IS the job
-    title, which is exactly what token overlap alone did on live data.
+    title, which is exactly what token overlap alone did on live data. The
+    headline tier stays phrase-only for the same reason: stuffed headlines
+    contain every token of every hot title.
 
     Skills component (up to 45): GRADED token overlap between the content
     words of the job's requirements + optional skills and the person's
@@ -432,16 +438,20 @@ def relevance_score(job: dict, profile: dict) -> int:
     whole live pool on exactly 60.
     """
     job_title = _clean_phrase(job.get("title"))
+    job_title_tokens = set(job_title.split())
     title_text = _clean_phrase(profile.get("current_title"))
     headline_text = _clean_phrase(profile.get("headline"))
-    if job_title and job_title in title_text:
+    if job_title and job_title_tokens <= set(title_text.split()):
         title_component = 55.0
     elif job_title and job_title in headline_text:
         title_component = 45.0
     else:
-        title_tokens = set(job_title.split())
         role_tokens = set(title_text.split()) | set(headline_text.split())
-        ratio = len(title_tokens & role_tokens) / len(title_tokens) if title_tokens else 0.0
+        ratio = (
+            len(job_title_tokens & role_tokens) / len(job_title_tokens)
+            if job_title_tokens
+            else 0.0
+        )
         title_component = 35 * ratio
 
     job_tokens = _match_tokens(
diff --git a/backend/tests/test_talent_plugins.py b/backend/tests/test_talent_plugins.py
index 4aeef2a..e16c6d1 100644
--- a/backend/tests/test_talent_plugins.py
+++ b/backend/tests/test_talent_plugins.py
@@ -404,7 +404,25 @@ def test_headline_phrase_scores_below_title_phrase():
     scattered = plugins.relevance_score(job, {"current_title": "Engineer", "headline": "Agentic AI | Python"})
     assert in_title == 55
     assert in_headline == 45
-    assert scattered == 35  # both tokens present but never as the phrase
+    assert scattered == 35  # tokens split across title and headline never combine
+
+
+def test_title_containment_scores_like_an_exact_title():
+    # Live case: job "Generative Engineer", pool titled "Generative AI
+    # Engineer" — the exact phrase never occurs, so every genuine match fell
+    # to the scattered 35 tier and the whole pool compressed into the 40s.
+    job = {"title": "Generative Engineer", "requirements": [], "optional_skills": []}
+    interleaved = plugins.relevance_score(job, {"current_title": "Generative AI Engineer"})
+    senior = plugins.relevance_score(job, {"current_title": "Senior Generative AI Engineer"})
+    assert interleaved == 55
+    assert senior == 55
+    # Containment applies to the TITLE only: the same tokens scattered across
+    # a keyword-stuffed headline still cap at the 35 tier.
+    stuffed = plugins.relevance_score(
+        job,
+        {"current_title": "Developer", "headline": "Generative AI | Engineer | Python"},
+    )
+    assert stuffed == 35
 
 
 # ---------------------------------------------------------------- detail extraction

From 4ad964e1ffa11eacb04a65d3976eb34cb1ed3c16 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 19:49:08 +0500
Subject: [PATCH 02/22] Talent filter uses the standard toolbar-search box

className="input" matches no CSS rule, so the filter fell back to the
browser default ~180px width and clipped its own placeholder ("Filter
by name, headline, com"). Swap it for the toolbar-search pattern every
other screen uses: search icon, full-width input, 340px cap.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/dist/index.html        |  2 +-
 frontend/src/screens/Talent.jsx | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index df37875..72268d5 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -23,7 +23,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-CsixWp5R.js"></script>
+    <script type="module" crossorigin src="/assets/index-BDBvEU8Q.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index--H0MdQBQ.css">
   </head>
   <body>
diff --git a/frontend/src/screens/Talent.jsx b/frontend/src/screens/Talent.jsx
index bc27470..5a51b45 100644
--- a/frontend/src/screens/Talent.jsx
+++ b/frontend/src/screens/Talent.jsx
@@ -543,13 +543,14 @@ export default function Talent() {
       ) : (
         <>
           <div className="flex items-center gap-8 mb-18">
-            <input
-              className="input"
-              style={{ maxWidth: 320 }}
-              placeholder="Filter by name, headline, company…"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-            />
+            <div className="toolbar-search">
+              <Icon name="search" />
+              <input
+                placeholder="Filter by name, headline, company…"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
             <span className="text-muted text-sm">
               {visible.length} of {profiles.length} profile{profiles.length === 1 ? '' : 's'}
             </span>

From bc5856005db6d79b62d6f6c3e13cf10df83984b4 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:37:14 +0500
Subject: [PATCH 03/22] ui-polish 1/6: typography+spacing tokens, base
 headings, utilities

- Type scale (--fs-2xs..--fs-3xl) and line-height tokens; the 20-size
  census collapses onto 9 steps. Spacing scale (--space-1..8) plus --gap
  keeping the signature 18px rhythm. Colors untouched.
- Base h1-h6 rules: bare headings used to render at UA defaults, larger
  and bolder than the styled card titles beside them.
- One eyebrow-label rule replacing eleven near-identical declarations at
  five sizes and five letter-spacings.
- High-traffic families retrofitted to tokens (page/card/table/form/btn/
  tabs/badge/sidebar/kpi); rare bolt-on sections left alone.
- New utilities: truncate, clamp-2, justify-between, flex-wrap, flex-col,
  flex-1, min-w-0, w-full, mt/mb-8/12/16/24, cell-clip, row-click.
- Defined phantom classes shipped in JSX (.dt, .route-loading,
  .tab-count) and a .skip-link.
- Email/role cells clip with ellipsis on all viewports, not only <640px.
- Content measure capped at 1440px on every desktop, not only >=1600.
- Sidebar: clearer group separation, active item weight 600.
- main.jsx design-contract comment amended: colors stay frozen,
  typography/spacing re-tokenized.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/main.jsx          |   7 +-
 frontend/src/styles/styles.css | 241 ++++++++++++++++++++++-----------
 2 files changed, 165 insertions(+), 83 deletions(-)

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index dbc7e4d..211f174 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -3,9 +3,10 @@ import { createRoot } from 'react-dom/client'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
-// The frozen design contract (ADR 0013 §1): 1,269 lines, 93 tokens, dual
-// themes, WCAG 2.1 AA verified across 23 routes. Content-frozen — new CSS may
-// only use existing var(--…) tokens.
+// Design contract (ADR 0013 §1), amended 2026-08-25: the COLOR palette and
+// color tokens remain frozen. Typography and spacing were re-tokenized in the
+// ui-polish pass (--fs-*/--lh-*/--space-*/--gap); new CSS must use var(--…)
+// tokens only — no raw font sizes, spacing, or colors.
 import './styles/styles.css'
 import './styles/auth.css'
 
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 76b59c2..d59ebeb 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -87,6 +87,29 @@
   --font-display: 'Belleza', 'Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
 
+  /* Type scale — 9 steps that the 20-size census collapses onto.
+     Theme-invariant; declared once here, never redefined in dark. */
+  --fs-2xs: 11px;   /* eyebrow labels, micro-meta */
+  --fs-xs:  12px;   /* badges, chips, cell-sub */
+  --fs-sm:  13px;   /* secondary body, form labels, small buttons */
+  --fs-base: 14px;  /* body, tables, buttons, nav */
+  --fs-md:  15px;   /* card titles */
+  --fs-lg:  18px;   /* section headings, empty states */
+  --fs-xl:  22px;   /* modal titles */
+  --fs-2xl: 25px;   /* profile hero name, mobile page title */
+  --fs-3xl: 30px;   /* page title (Belleza) */
+
+  --lh-display: 1.15;  /* Belleza display headings */
+  --lh-heading: 1.25;  /* h2–h6, card titles */
+  --lh-body:    1.5;   /* running copy */
+  --lh-label:   1.35;  /* eyebrows, form labels, table headers */
+
+  /* Spacing scale. --gap is the app's signature 18px stack rhythm
+     (grid gap, mt/mb-18, card-head padding) — a sanctioned step, kept. */
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-7: 32px;  --space-8: 40px;
+  --gap: 18px;
+
   /* Categorical chart series — brand hues darkened to hold >=3:1
      against white so lines and small marks stay legible. */
   --c1: #004d43;  --c2: #0f9d76;  --c3: #5b60e8;  --c4: #6f8f14;
@@ -180,8 +203,8 @@ body {
   font-family: var(--font);
   background: var(--bg);
   color: var(--text);
-  font-size: 14px;
-  line-height: 1.5;
+  font-size: var(--fs-base);
+  line-height: var(--lh-body);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   /* Grey flash on tap (iOS/Android WebKit + Chromium); we provide our own
@@ -195,7 +218,7 @@ button {
   font-family: inherit; cursor: pointer; border: none; background: none; color: inherit;
   touch-action: manipulation;   /* removes the legacy 300ms tap delay */
 }
-input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); }
+input, select, textarea { font-family: inherit; font-size: var(--fs-base); color: var(--text); }
 a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
 img, svg, video, canvas { max-width: 100%; }
 
@@ -254,10 +277,11 @@ img, svg, video, canvas { max-width: 100%; }
   font-weight: 400;
   letter-spacing: 0;
 }
-.page-title { font-size: 30px; line-height: 1.15; }
-.modal-head h2 { font-size: 22px; }
-.ph-name { font-size: 25px; }
-.brand-name { font-size: 18px; font-weight: 400; letter-spacing: .2px; }
+.page-title { font-size: var(--fs-3xl); line-height: var(--lh-display); }
+.page-title-sm { font-size: var(--fs-xl); }   /* embedded sub-page titles (h2) */
+.modal-head h2 { font-size: var(--fs-xl); }
+.ph-name { font-size: var(--fs-2xl); }
+.brand-name { font-size: var(--fs-lg); font-weight: 400; letter-spacing: .2px; }
 
 /* Metrics read as data, not prose — keep them in the UI face,
    tabular-lining so digits don't jitter as values update. */
@@ -266,6 +290,28 @@ table.data td, .k-count, .nav-badge {
   font-variant-numeric: tabular-nums;
 }
 
+/* Base heading scale. Any heading a class doesn't reach lands on a sane
+   step instead of the UA default (which rendered bare h3/h4 LARGER and
+   bolder than the styled card titles beside them). Component rules
+   (.page-title, .modal-head h2, .card-head h3, …) win by specificity. */
+h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); }
+h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-display); }
+h2 { font-size: var(--fs-xl); font-weight: 600; }
+h3 { font-size: var(--fs-md); font-weight: 600; }
+h4 { font-size: var(--fs-base); font-weight: 600; }
+h5, h6 { font-size: var(--fs-sm); font-weight: 600; }
+
+/* Eyebrow labels — one concept, one rule. Previously eleven near-identical
+   declarations at five sizes and five letter-spacings. Selectors keep only
+   their unique bits (padding, borders, sticky) at their own definitions. */
+.nav-section-label, .search-group-label, .form-section-title,
+table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
+.hf-tile .hf-k, .hf-block-title, .hf-sign .hf-sign-role,
+.hf-rate-head > div, .hf-rate-foot > div:first-child {
+  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
+  letter-spacing: .6px; line-height: var(--lh-label); color: var(--text-3);
+}
+
 /* ============================================================
    FOCUS & MOTION (accessibility)
    ============================================================ */
@@ -335,25 +381,26 @@ table.data td, .k-count, .nav-badge {
 .sidebar-nav::-webkit-scrollbar { width: 6px; }
 .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
 .nav-section-label {
-  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px;
-  color: var(--text-3); padding: 14px 12px 6px;
+  letter-spacing: .8px;               /* brand moment — wider than the base eyebrow */
+  padding: 20px 12px 6px;             /* clear air between nav groups */
 }
+.sidebar-nav > div:first-child .nav-section-label { padding-top: 4px; }
 .nav-item {
   display: flex; align-items: center; gap: 12px;
   padding: 9px 12px; border-radius: 9px; margin-bottom: 2px;
-  color: var(--sidebar-fg); font-weight: 500; font-size: 13.5px;
+  color: var(--sidebar-fg); font-weight: 500; font-size: var(--fs-base);
   transition: background .14s, color .14s; position: relative; white-space: nowrap;
 }
 .nav-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 1.9; }
 .nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
-.nav-item.active { background: var(--sidebar-active-bg); color: #fff; }
+.nav-item.active { background: var(--sidebar-active-bg); color: #fff; font-weight: 600; }
 .nav-item.active::before {
   content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
   width: 3px; height: 20px; background: var(--sidebar-rail); border-radius: 0 3px 3px 0;
 }
 .nav-badge {
   margin-left: auto; background: rgba(255,255,255,.12); color: #fff;
-  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; min-width: 22px; text-align: center;
+  font-size: var(--fs-xs); font-weight: 600; padding: 1px 8px; border-radius: 20px; min-width: 22px; text-align: center;
 }
 .nav-badge-alert { background: var(--danger); color: var(--danger-fg); }
 .nav-badge-ai { background: var(--brand-lime); color: var(--brand-ink); font-weight: 700; letter-spacing: .3px; }
@@ -412,7 +459,7 @@ table.data td, .k-count, .nav-badge {
   box-shadow: var(--shadow-lg); max-height: 420px; overflow-y: auto; display: none; z-index: 80; padding: 6px;
 }
 .search-results.open { display: block; }
-.search-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); padding: 8px 10px 4px; }
+.search-group-label { padding: 8px 10px 4px; }
 .search-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
 .search-item:hover { background: var(--bg-sunken); }
 .search-item .si-title { font-weight: 600; font-size: 13px; }
@@ -458,7 +505,7 @@ table.data td, .k-count, .nav-badge {
 .dp-name { font-weight: 600; }
 .dp-email { font-size: 12px; color: var(--text-3); }
 .dropdown-divider { height: 1px; background: var(--border); margin: 6px 0; }
-.dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; width: 100%; text-align: left; color: var(--text); }
+.dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: var(--fs-base); font-weight: 500; width: 100%; text-align: left; color: var(--text); }
 .dropdown-link svg { width: 17px; height: 17px; color: var(--text-3); }
 .dropdown-link:hover { background: var(--bg-sunken); }
 .dropdown-link.danger { color: var(--danger); }
@@ -471,8 +518,8 @@ table.data td, .k-count, .nav-badge {
 .notif-icn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
 .notif-icn svg { width: 16px; height: 16px; }
 .notif-body { flex: 1; min-width: 0; }
-.notif-title { font-size: 13px; font-weight: 600; }
-.notif-text { font-size: 12.5px; color: var(--text-2); }
+.notif-title { font-size: var(--fs-sm); font-weight: 600; }
+.notif-text { font-size: var(--fs-sm); color: var(--text-2); }
 .notif-time { font-size: 11px; color: var(--text-3); margin-top: 3px; }
 .dd-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
 
@@ -480,16 +527,17 @@ table.data td, .k-count, .nav-badge {
 .content { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 26px 30px 60px; }
 .page { animation: fadeUp .3s ease; }
 @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
-.page-sub { color: var(--text-2); font-size: 14px; margin-top: 3px; }
+.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
+.page-head-main { min-width: 0; }
+.page-sub { color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-body); margin-top: 3px; max-width: 65ch; }
 .page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
-.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
+.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 10px; }
 .breadcrumb svg { width: 14px; height: 14px; }
 
 /* ================= BUTTONS ================= */
 .btn {
   display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-  padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
+  padding: 9px 16px; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-base);
   transition: .15s; white-space: nowrap; border: 1px solid transparent;
 }
 .btn svg { width: 17px; height: 17px; }
@@ -502,26 +550,26 @@ table.data td, .k-count, .nav-badge {
 .btn-danger { background: var(--danger); color: var(--danger-fg); }
 .btn-danger:hover { filter: brightness(.94); }
 .btn-block { width: 100%; margin-top: 12px; }
-.btn-sm { padding: 6px 12px; font-size: 12.5px; }
+.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
 .btn-icon { padding: 8px; width: 34px; height: 34px; }
 .btn:disabled { opacity: .5; cursor: not-allowed; }
 
 /* ================= CARDS ================= */
 .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
-.card-pad { padding: 20px; }
-.card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); gap: 12px; }
-.card-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
-.card-head .ch-sub { font-size: 12.5px; color: var(--text-3); font-weight: 400; }
-.card-body { padding: 20px; }
+.card-pad { padding: var(--space-5); }
+.card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--gap) var(--space-5); border-bottom: 1px solid var(--border); gap: var(--space-3); }
+.card-head h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.2px; }
+.card-head .ch-sub { font-size: var(--fs-sm); color: var(--text-3); font-weight: 400; }
+.card-body { padding: var(--space-5); }
 
-.grid { display: grid; gap: 18px; }
+.grid { display: grid; gap: var(--gap); }
 .g-kpi { grid-template-columns: repeat(4, 1fr); }
 .g-3 { grid-template-columns: repeat(3, 1fr); }
 .g-2 { grid-template-columns: repeat(2, 1fr); }
 .g-2-1 { grid-template-columns: 2fr 1fr; }
 .g-1-2 { grid-template-columns: 1fr 2fr; }
-.mt-18 { margin-top: 18px; }
-.mb-18 { margin-bottom: 18px; }
+.mt-18 { margin-top: var(--gap); }
+.mb-18 { margin-bottom: var(--gap); }
 
 /* KPI card */
 .kpi {
@@ -530,12 +578,12 @@ table.data td, .k-count, .nav-badge {
 }
 .kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
 .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
-.kpi-label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
+.kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
 .kpi-icn { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
 .kpi-icn svg { width: 20px; height: 20px; }
 .kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
-.kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; }
-.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
+.kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-sm); }
+.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-sm); font-size: var(--fs-xs); }
 .trend svg { width: 13px; height: 13px; }
 .trend-up { color: var(--success); background: var(--success-soft); }
 .trend-down { color: var(--danger); background: var(--danger-soft); }
@@ -550,7 +598,7 @@ table.data td, .k-count, .nav-badge {
 .i-teal { background: var(--teal-soft); color: var(--teal); }
 
 /* ================= BADGES ================= */
-.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
+.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
 .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
 .badge-plain::before { display: none; }
 .b-green { color: var(--success); background: var(--success-soft); }
@@ -566,24 +614,26 @@ table.data td, .k-count, .nav-badge {
 /* Horizontal scroll is the right answer for wide data tables on phones;
    make the gesture smooth and keep it from chaining to the page. */
 .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
-table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
 table.data thead th {
-  text-align: left; padding: 12px 16px; font-size: 11.5px; font-weight: 700;
-  text-transform: uppercase; letter-spacing: .5px; color: var(--text-3);
+  text-align: left; padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-elev); position: sticky; top: 0;
 }
 table.data thead th.sortable { cursor: pointer; user-select: none; }
 table.data thead th.sortable:hover { color: var(--text); }
 .sort-ind { display: inline-block; margin-left: 4px; opacity: .4; font-size: 10px; }
 th.sorted-asc .sort-ind, th.sorted-desc .sort-ind { opacity: 1; color: var(--primary); }
-table.data tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
+table.data tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
 table.data tbody tr { transition: background .12s; }
 table.data tbody tr:hover { background: var(--bg-sunken); }
 table.data tbody tr:last-child td { border-bottom: none; }
 .cell-primary { font-weight: 600; color: var(--text); }
-.cell-sub { font-size: 12px; color: var(--text-3); }
-.cell-mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
-.user-cell { display: flex; align-items: center; gap: 11px; }
+.cell-sub { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.4; }
+.cell-mono { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-2); }
+.user-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
+/* Long emails/roles under a name clip with an ellipsis on every viewport —
+   this was previously only applied inside the 640px media query. */
+.user-cell .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
 .user-cell .avatar { width: 34px; height: 34px; font-size: 12px; }
 .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
 .act-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: .12s; }
@@ -592,7 +642,7 @@ table.data tbody tr:last-child td { border-bottom: none; }
 .act-btn svg { width: 16px; height: 16px; }
 
 /* Toolbar */
-.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
 .toolbar-search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
 .toolbar-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); }
 .toolbar-search input { width: 100%; padding: 8px 12px 8px 36px; border-radius: 9px; background: var(--bg-elev); border: 1px solid var(--border-strong); outline: none; }
@@ -662,14 +712,14 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .modal-head p { font-size: 13px; color: var(--text-3); margin-top: 3px; }
 .modal-close { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--text-3); }
 .modal-close:hover { background: var(--bg-sunken); color: var(--text); }
-.modal-body { padding: 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
+.modal-body { padding: var(--space-6); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
 .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--border); background: var(--bg-sunken); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
 
 /* ================= FORMS ================= */
-.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
 .form-field { display: flex; flex-direction: column; gap: 6px; }
 .form-field.col-span-2 { grid-column: 1 / -1; }
-.form-field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
+.form-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); line-height: var(--lh-label); }
 .form-field label .req { color: var(--danger); }
 .form-field input, .form-field select, .form-field textarea {
   padding: 9px 12px; border-radius: 9px; background: var(--bg-elev); border: 1px solid var(--border-strong); outline: none; transition: .15s; width: 100%;
@@ -678,9 +728,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .form-field textarea { resize: vertical; min-height: 84px; }
 .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
 .form-field input.err, .form-field select.err, .form-field textarea.err { border-color: var(--danger); }
-.field-error { font-size: 11.5px; color: var(--danger); display: none; }
+.field-error { font-size: var(--fs-xs); color: var(--danger); display: none; }
 .field-error.show { display: block; }
-.form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin: 22px 0 4px; grid-column: 1/-1; }
+.form-section-title { margin: var(--space-5) 0 var(--space-1); grid-column: 1/-1; }
 
 /* AI field assist (ui/AiFieldAssist.jsx) */
 .field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -718,14 +768,14 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .setting-info p { font-size: 13px; color: var(--text-3); margin-top: 2px; }
 
 /* ================= TABS ================= */
-.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
-.tab { display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; font-weight: 600; font-size: 13.5px; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; margin-bottom: -1px; }
+.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; }
+.tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; font-weight: 600; font-size: var(--fs-base); color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; margin-bottom: -1px; }
 .tab:hover { color: var(--text); }
 .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
 .tab-pane { display: none; animation: fadeUp .25s; }
 .tab-pane.active { display: block; }
 .pill-tabs { display: inline-flex; gap: 4px; background: var(--bg-sunken); padding: 4px; border-radius: 11px; }
-.pill-tab { padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--text-2); transition: .15s; }
+.pill-tab { padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); transition: .15s; }
 .pill-tab.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }
 
 /* ================= KANBAN ================= */
@@ -734,7 +784,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; position: sticky; top: 0; }
 .kanban-col-head .k-dot { width: 9px; height: 9px; border-radius: 50%; }
 .kanban-col-head h4 { font-size: 13.5px; font-weight: 700; }
-.k-count { margin-left: auto; background: var(--bg-elev); color: var(--text-2); font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 20px; }
+.k-count { margin-left: auto; background: var(--bg-elev); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; padding: 1px 9px; border-radius: 20px; }
 .kanban-cards { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 60px; }
 .kanban-cards.drag-over { background: var(--primary-soft); border-radius: 10px; outline: 2px dashed var(--primary); outline-offset: -4px; }
 .k-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; padding: 13px; cursor: grab; box-shadow: var(--shadow-sm); transition: .15s; }
@@ -742,11 +792,11 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .k-card.dragging { opacity: .5; transform: rotate(2deg); cursor: grabbing; }
 .k-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
 .k-card-top .avatar { width: 32px; height: 32px; font-size: 11px; }
-.kc-name { font-weight: 600; font-size: 13.5px; }
+.kc-name { font-weight: 600; font-size: var(--fs-base); }
 .kc-role { font-size: 12px; color: var(--text-3); }
 .k-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
 .k-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
-.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bg-sunken); color: var(--text-2); }
+.tag { font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--text-2); }
 
 /* ================= MISC ================= */
 .list-tight > * + * { border-top: 1px solid var(--border); }
@@ -754,8 +804,8 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .list-row:first-child { padding-top: 0; }
 .list-row .avatar { width: 38px; height: 38px; font-size: 13px; }
 .lr-main { flex: 1; min-width: 0; }
-.lr-title { font-weight: 600; font-size: 13.5px; }
-.lr-sub { font-size: 12.5px; color: var(--text-3); }
+.lr-title { font-weight: 600; font-size: var(--fs-base); }
+.lr-sub { font-size: var(--fs-sm); color: var(--text-3); }
 .lr-right { text-align: right; flex-shrink: 0; }
 .timeline { position: relative; padding-left: 28px; }
 .timeline::before { content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
@@ -763,13 +813,14 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .tl-item:last-child { padding-bottom: 0; }
 .tl-dot { position: absolute; left: -28px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elev); border: 2px solid var(--primary); display: grid; place-items: center; }
 .tl-dot svg { width: 11px; height: 11px; color: var(--primary); }
-.tl-title { font-weight: 600; font-size: 13.5px; }
+.tl-title { font-weight: 600; font-size: var(--fs-base); }
 .tl-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
 .tl-desc { font-size: 13px; color: var(--text-2); margin-top: 5px; }
 
 .empty-state { text-align: center; padding: 60px 20px; color: var(--text-3); }
 .empty-state svg { width: 48px; height: 48px; margin-bottom: 14px; opacity: .5; }
-.empty-state h3 { font-size: 18px; color: var(--text-2); margin-bottom: 6px; }
+.empty-state h3 { font-size: var(--fs-lg); color: var(--text-2); margin-bottom: 6px; }
+.empty-state p { max-width: 46ch; margin-inline: auto; line-height: var(--lh-body); }
 
 .avatar-stack { display: flex; }
 .avatar-stack .avatar { width: 30px; height: 30px; font-size: 11px; border: 2px solid var(--bg-elev); margin-left: -8px; }
@@ -778,20 +829,52 @@ canvas { width: 100%; max-width: 100%; display: block; }
 
 .stat-mini { display: flex; flex-direction: column; gap: 4px; }
 .stat-mini-val { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
-.stat-mini-lbl { font-size: 12.5px; color: var(--text-3); }
+.stat-mini-lbl { font-size: var(--fs-sm); color: var(--text-3); }
 
 .divider { height: 1px; background: var(--border); margin: 16px 0; }
 .flex { display: flex; }
+.flex-col { flex-direction: column; }
 .items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1 1 0%; min-width: 0; }
+.min-w-0 { min-width: 0; }
+.w-full { width: 100%; }
+.gap-4 { gap: var(--space-1); }
 .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
+.mt-8 { margin-top: var(--space-2); }  .mb-8 { margin-bottom: var(--space-2); }
+.mt-12 { margin-top: var(--space-3); } .mb-12 { margin-bottom: var(--space-3); }
+.mt-16 { margin-top: var(--space-4); } .mb-16 { margin-bottom: var(--space-4); }
+.mt-24 { margin-top: var(--space-6); } .mb-24 { margin-bottom: var(--space-6); }
 .text-muted { color: var(--text-3); }
 .fw-600 { font-weight: 600; }
-.text-sm { font-size: 12.5px; }
+.text-sm { font-size: var(--fs-sm); }
 .mono { font-family: var(--mono); }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+/* Inline clamp for table cells (emails, long titles); pair with title="". */
+.cell-clip { display: inline-block; max-width: 26ch; vertical-align: bottom;
+             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row-click { cursor: pointer; }
+
+/* Classes referenced from JSX that previously had no definition. */
+.dt { display: flow-root; }
+.route-loading { display: grid; place-items: center; min-height: 40vh; }
+.tab-count { font-size: var(--fs-xs); font-weight: 600; padding: 1px 8px;
+             border-radius: 20px; background: var(--bg-sunken); color: var(--text-2); }
+.tab.active .tab-count { background: var(--primary-soft); color: var(--primary); }
+
+/* Keyboard users jump straight past the 20+ sidebar links. */
+.skip-link { position: absolute; left: -9999px; z-index: 1000; }
+.skip-link:focus {
+  left: 12px; top: 12px; position: fixed; background: var(--bg-elev);
+  color: var(--text); padding: 10px 16px; border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-lg); outline: 2px solid var(--primary);
+}
 
 /* Calendar */
 .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
-.cal-dow { background: var(--bg-elev); padding: 10px; text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--text-3); letter-spacing: .5px; }
+.cal-dow { background: var(--bg-elev); padding: 10px; text-align: center; }
 .cal-cell { background: var(--bg-elev); min-height: 108px; padding: 8px; position: relative; transition: .12s; }
 .cal-cell:hover { background: var(--bg-sunken); }
 .cal-cell.other { background: var(--bg-sunken); }
@@ -809,8 +892,8 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .toast-icn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
 .toast-icn svg { width: 18px; height: 18px; }
 .toast-body { flex: 1; }
-.toast-title { font-weight: 600; font-size: 13.5px; }
-.toast-msg { font-size: 12.5px; color: var(--text-3); }
+.toast-title { font-weight: 600; font-size: var(--fs-base); }
+.toast-msg { font-size: var(--fs-sm); color: var(--text-3); }
 .toast-close { color: var(--text-3); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
 .toast-close:hover { background: var(--bg-sunken); }
 
@@ -837,8 +920,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .ph-role { color: var(--text-2); font-size: 14px; }
 .ph-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
 .info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 24px; }
-.info-item .il { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
-.info-item .iv { font-size: 14px; font-weight: 500; margin-top: 3px; }
+.info-item .iv { font-size: var(--fs-base); font-weight: 500; margin-top: 3px; }
 
 /* ================= ENTERPRISE PHASE 2 ================= */
 
@@ -902,7 +984,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
    11px copy keeps its contrast in both modes. */
 .source-chip {
   display: inline-flex; align-items: center; gap: 5px;
-  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
+  font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 20px;
   --chip: var(--text-3);
   color: var(--text-2);
   background: var(--bg-sunken);   /* fallback: color-mix needs Safari 16.2+ / Chrome 111+ */
@@ -911,7 +993,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .source-chip svg { width: 12px; height: 12px; color: var(--chip); }
 .source-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--chip); }
 
-.integration-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--success-soft); color: var(--success); }
+.integration-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; font-size: var(--fs-sm); font-weight: 600; background: var(--success-soft); color: var(--success); }
 .integration-status.pending { background: var(--warning-soft); color: var(--warning); }
 .integration-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; }
 .integration-status .pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
@@ -953,7 +1035,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .ats-ring .ats-val { position: relative; z-index: 1; text-align: center; }
 .ats-ring .ats-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
 .ats-ring .ats-lbl { font-size: 11px; color: var(--text-3); font-weight: 600; }
-.skill-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
+.skill-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); }
 .skill-pill svg { width: 12px; height: 12px; }
 .skill-matched { background: var(--success-soft); color: var(--success); }
 .skill-missing { background: var(--danger-soft); color: var(--danger); }
@@ -968,7 +1050,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .cand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .cand-role { font-size: 12.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .cand-skills { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; height: 54px; overflow: hidden; margin-bottom: 12px; }
-.cand-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--bg-sunken); color: var(--text-2); white-space: nowrap; }
+.cand-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; background: var(--bg-sunken); color: var(--text-2); white-space: nowrap; }
 .cand-chip svg { width: 11px; height: 11px; }
 .cand-chip.miss { background: var(--danger-soft); color: var(--danger); }
 .cand-chip.more { background: transparent; color: var(--text-3); padding: 0 4px; }
@@ -1026,7 +1108,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 /* Role chips use the avatar ramp, which inverts with the theme. */
 .role-badge { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--avatar-fg); flex-shrink: 0; }
 .rbac-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
-.rbac-matrix th { padding: 12px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); border-bottom: 1px solid var(--border); text-align: center; font-weight: 700; }
+.rbac-matrix th { padding: 12px 8px; border-bottom: 1px solid var(--border); text-align: center; }
 .rbac-matrix th:first-child { text-align: left; padding-left: 16px; }
 .rbac-matrix td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: center; }
 .rbac-matrix td:first-child { text-align: left; padding-left: 16px; font-weight: 600; }
@@ -1121,14 +1203,14 @@ canvas { width: 100%; max-width: 100%; display: block; }
 
 /* Filter panel */
 .filter-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
-.filter-panel .form-field label { font-size: 11.5px; }
+.filter-panel .form-field label { font-size: var(--fs-xs); }
 .star-btn { color: var(--text-3); transition: .12s; }
 .star-btn.on { color: var(--warning); }
 .star-btn.on svg { fill: currentColor; }
 
 /* Segmented control */
 .seg { display: inline-flex; background: var(--bg-sunken); padding: 3px; border-radius: 10px; }
-.seg button { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
+.seg button { padding: 6px 14px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
 .seg button.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }
 
 .rating-stars { display: inline-flex; gap: 3px; }
@@ -1216,10 +1298,10 @@ canvas { width: 100%; max-width: 100%; display: block; }
    400 small phone · plus a landscape-phone height rule
    ============================================================ */
 
-/* Ultrawide: stop dashboards stretching to unreadable line lengths. */
-@media (min-width: 1600px) {
-  .content > .page { max-width: 1560px; margin-inline: auto; }
-}
+/* Cap the measure on every desktop, not only ultrawide — between 900 and
+   1600px the content used to run full-bleed. No-op below ~1500px viewports;
+   agrees with .cand-page's own 1440px cap. */
+.content > .page { max-width: 1440px; margin-inline: auto; }
 
 @media (max-width: 1200px) {
   .g-kpi { grid-template-columns: repeat(2, 1fr); }
@@ -1256,7 +1338,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .g-kpi { grid-template-columns: 1fr; }
   .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; }
   .form-grid, .info-grid, .filter-panel { grid-template-columns: 1fr; }
-  .page-title { font-size: 25px; }
+  .page-title { font-size: var(--fs-2xl); }
   .page-head { gap: 12px; margin-bottom: 18px; }
   .page-head-actions { width: 100%; }
   .page-head-actions .btn { flex: 1 1 auto; justify-content: center; }
@@ -1416,7 +1498,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 /* Score summary: stat tiles, hero = combined overall */
 .hf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
 .hf-tile { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; }
-.hf-tile .hf-k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hf-tile .hf-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .hf-tile .hf-v { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
 .hf-tile .hf-v small { font-size: 12px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
 .hf-tile .hf-sub { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
@@ -1426,7 +1508,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 
 /* Bordered section card, titled like the paper form's section headers */
 .hf-block { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
-.hf-block-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
+.hf-block-title { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
 .hf-block-title label { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
 .hf-note { font-size: 12.5px; color: var(--text-3); margin: 2px 0 10px; }
 
@@ -1434,7 +1516,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .hf-rate { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
 .hf-rate-head, .hf-rate-row, .hf-rate-foot { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 96px); align-items: center; }
 .hf-rate-head { background: var(--bg-sunken); }
-.hf-rate-head > div { padding: 8px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); text-align: center; line-height: 1.25; }
+.hf-rate-head > div { padding: 8px 10px; text-align: center; }
 .hf-rate-head > div:first-child { text-align: left; }
 .hf-rate-row { border-top: 1px solid var(--border); }
 .hf-rate-row > div:first-child { padding: 9px 10px; font-size: 13px; }
@@ -1443,7 +1525,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .hf-dot:hover { border-color: var(--primary); }
 .hf-dot.on { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 3.5px var(--bg-elev); }
 .hf-rate-foot { border-top: 1px solid var(--border); background: var(--bg-sunken); }
-.hf-rate-foot > div:first-child { padding: 8px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-3); }
+.hf-rate-foot > div:first-child { padding: 8px 10px; }
 .hf-rate-foot .hf-avg { grid-column: 2 / -1; text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 8px 0; }
 
 /* Completion dot on the form switcher */
@@ -1452,7 +1534,6 @@ canvas { width: 100%; max-width: 100%; display: block; }
 /* Approvals: four signature slots */
 .hf-sign-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
 .hf-sign { display: flex; flex-direction: column; gap: 6px; }
-.hf-sign .hf-sign-role { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
 
 @media (max-width: 860px) {
   /* Rating columns keep their full 96px width here — the word headers still

From bd16f8a775d28df7b9ce50f0a621650510c00d42 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:39:31 +0500
Subject: [PATCH 04/22] ui-polish 2/6: PageHeader, DataTable dedup,
 Tabs/Toast/Dropdown a11y

- New ui/PageHeader.jsx emitting the existing .page-head structure;
  screens adopt it in the next two passes.
- DataTable: sortable thead extracted as DataTableHead (Candidates can
  drop its verbatim copy) and an onRowClick prop with keyboard support.
- Tabs: index-based ids, aria-controls, roving tabindex, arrow-key and
  Home/End navigation; TabPanel labels its panel.
- Toast root announces politely to screen readers (was silent).
- Dropdown stamps aria-expanded/aria-haspopup on every trigger.
- primitives: shared PRIORITY_CLASS (Dashboard and Tasks had identical
  private copies).
- Shell: skip link to #main-content, sidebar nav labeled Primary,
  clickable notification rows are real buttons now.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/app/AppLayout.jsx |  1 +
 frontend/src/app/Sidebar.jsx   |  2 +-
 frontend/src/app/Topbar.jsx    |  6 +--
 frontend/src/styles/styles.css |  4 +-
 frontend/src/ui/DataTable.jsx  | 72 +++++++++++++++++++++-------------
 frontend/src/ui/Dropdown.jsx   |  8 +++-
 frontend/src/ui/PageHeader.jsx | 24 ++++++++++++
 frontend/src/ui/Tabs.jsx       | 44 +++++++++++++++++----
 frontend/src/ui/Toast.jsx      |  2 +-
 frontend/src/ui/primitives.jsx |  4 ++
 10 files changed, 123 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/ui/PageHeader.jsx

diff --git a/frontend/src/app/AppLayout.jsx b/frontend/src/app/AppLayout.jsx
index de62040..22d4d3a 100644
--- a/frontend/src/app/AppLayout.jsx
+++ b/frontend/src/app/AppLayout.jsx
@@ -38,6 +38,7 @@ export default function AppLayout() {
 
   return (
     <div id="app">
+      <a className="skip-link" href="#main-content">Skip to content</a>
       <Sidebar
         collapsed={collapsed}
         mobileOpen={navOpen}
diff --git a/frontend/src/app/Sidebar.jsx b/frontend/src/app/Sidebar.jsx
index b79370a..7aede97 100644
--- a/frontend/src/app/Sidebar.jsx
+++ b/frontend/src/app/Sidebar.jsx
@@ -34,7 +34,7 @@ export default function Sidebar({ collapsed, mobileOpen, onToggleCollapse, badge
         </button>
       </div>
 
-      <nav className="sidebar-nav">
+      <nav className="sidebar-nav" aria-label="Primary">
         {NAV_GROUPS.map((group) => {
           const items = visible.filter((r) => r.group === group)
           if (!items.length) return null
diff --git a/frontend/src/app/Topbar.jsx b/frontend/src/app/Topbar.jsx
index 3b7a8e1..1256fd2 100644
--- a/frontend/src/app/Topbar.jsx
+++ b/frontend/src/app/Topbar.jsx
@@ -137,11 +137,11 @@ export default function Topbar({ onOpenNav, searchRef }) {
                 <div className="notif-row"><div className="notif-text">No notifications yet.</div></div>
               )}
               {notifications.map((n) => (
-                <div
+                <button
                   key={n.id}
+                  type="button"
                   className={`notif-row${n.unread ? ' unread' : ''}`}
                   onClick={() => openNotif(n)}
-                  style={{ cursor: 'pointer' }}
                 >
                   <span className={`notif-icn ${n.color}`}><Icon name={n.icon} /></span>
                   <div className="notif-body">
@@ -149,7 +149,7 @@ export default function Topbar({ onOpenNav, searchRef }) {
                     {n.text && <div className="notif-text">{n.text}</div>}
                     <div className="notif-time">{n.time}</div>
                   </div>
-                </div>
+                </button>
               ))}
             </div>
             <div className="dropdown-foot">
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index d59ebeb..5f6d99c 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -511,7 +511,9 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
 .dropdown-link.danger { color: var(--danger); }
 .dropdown-link.danger svg { color: var(--danger); }
 .link-btn { color: var(--primary); font-size: 12px; font-weight: 600; }
-.notif-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; }
+/* Rendered as a <button> when clickable (keyboard-reachable); the global
+   button reset keeps the visuals, these two keep the layout. */
+.notif-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; width: 100%; text-align: left; }
 .notif-row:hover { background: var(--bg-sunken); }
 .notif-row.unread { background: var(--primary-soft); }
 [data-theme="dark"] .notif-row.unread { background: var(--primary-soft); }
diff --git a/frontend/src/ui/DataTable.jsx b/frontend/src/ui/DataTable.jsx
index c3be4c4..645a201 100644
--- a/frontend/src/ui/DataTable.jsx
+++ b/frontend/src/ui/DataTable.jsx
@@ -103,39 +103,47 @@ export function Pagination({ from, to, total, page, pages, setPage, pageButtons
   )
 }
 
-export default function DataTable({ columns, rows, pageSize = 10, empty }) {
+/** The sortable <thead>, exported so useDataTable consumers with custom
+    tbody markup (Candidates' checkbox column) stop copying it verbatim. */
+export function DataTableHead({ columns, sort, toggleSort }) {
+  return (
+    <thead>
+      <tr>
+        {columns.map((c) => {
+          const isSorted = sort.key === c.key
+          const cls = [
+            c.sortable ? 'sortable' : '',
+            isSorted ? (sort.dir === 1 ? 'sorted-asc' : 'sorted-desc') : '',
+          ].filter(Boolean).join(' ')
+          return (
+            <th
+              key={c.key}
+              className={cls}
+              style={{ textAlign: c.align || 'left' }}
+              onClick={c.sortable ? () => toggleSort(c.key) : undefined}
+            >
+              {c.label}
+              {c.sortable && (
+                <span className="sort-ind">
+                  {isSorted ? (sort.dir === 1 ? '▲' : '▼') : '⇅'}
+                </span>
+              )}
+            </th>
+          )
+        })}
+      </tr>
+    </thead>
+  )
+}
+
+export default function DataTable({ columns, rows, pageSize = 10, empty, onRowClick }) {
   const t = useDataTable({ columns, rows, pageSize })
 
   return (
     <div className="dt">
       <div className="table-wrap">
         <table className="data">
-          <thead>
-            <tr>
-              {columns.map((c) => {
-                const isSorted = t.sort.key === c.key
-                const cls = [
-                  c.sortable ? 'sortable' : '',
-                  isSorted ? (t.sort.dir === 1 ? 'sorted-asc' : 'sorted-desc') : '',
-                ].filter(Boolean).join(' ')
-                return (
-                  <th
-                    key={c.key}
-                    className={cls}
-                    style={{ textAlign: c.align || 'left' }}
-                    onClick={c.sortable ? () => t.toggleSort(c.key) : undefined}
-                  >
-                    {c.label}
-                    {c.sortable && (
-                      <span className="sort-ind">
-                        {isSorted ? (t.sort.dir === 1 ? '▲' : '▼') : '⇅'}
-                      </span>
-                    )}
-                  </th>
-                )
-              })}
-            </tr>
-          </thead>
+          <DataTableHead columns={columns} sort={t.sort} toggleSort={t.toggleSort} />
           <tbody>
             {t.pageRows.length === 0 ? (
               <tr>
@@ -145,7 +153,15 @@ export default function DataTable({ columns, rows, pageSize = 10, empty }) {
               </tr>
             ) : (
               t.pageRows.map((row, i) => (
-                <tr key={row.id ?? i}>
+                <tr
+                  key={row.id ?? i}
+                  className={onRowClick ? 'row-click' : undefined}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  onKeyDown={onRowClick ? (e) => {
+                    if (e.key === 'Enter' && e.target === e.currentTarget) onRowClick(row)
+                  } : undefined}
+                >
                   {columns.map((c) => (
                     <td key={c.key} style={{ textAlign: c.align || 'left' }}>
                       {c.render ? c.render(row) : (row[c.key] ?? '')}
diff --git a/frontend/src/ui/Dropdown.jsx b/frontend/src/ui/Dropdown.jsx
index 62407d2..9820e89 100644
--- a/frontend/src/ui/Dropdown.jsx
+++ b/frontend/src/ui/Dropdown.jsx
@@ -3,7 +3,7 @@
    js/app.js:200-215, including its "only one open at a time" behaviour.
    ============================================================ */
 
-import { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react'
+import { cloneElement, createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react'
 
 const GroupContext = createContext(null)
 
@@ -43,9 +43,13 @@ export default function Dropdown({ trigger, children, className = '', panelClass
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
+  // The trigger is a render prop returning a single button; stamp the
+  // disclosure ARIA on it here so no call site has to remember to.
+  const triggerNode = trigger({ open, toggle: () => setOpen(!open) })
+
   return (
     <div className={`dropdown ${open ? 'open' : ''} ${className}`} ref={ref}>
-      {trigger({ open, toggle: () => setOpen(!open) })}
+      {cloneElement(triggerNode, { 'aria-expanded': open, 'aria-haspopup': 'true' })}
       <div className={`dropdown-menu ${panelClassName}`}>{children}</div>
     </div>
   )
diff --git a/frontend/src/ui/PageHeader.jsx b/frontend/src/ui/PageHeader.jsx
new file mode 100644
index 0000000..4df3a94
--- /dev/null
+++ b/frontend/src/ui/PageHeader.jsx
@@ -0,0 +1,24 @@
+/* ============================================================
+   PageHeader.jsx — the one page-top pattern.
+
+   Every screen used to hand-write the same .page-head block, and the copies
+   drifted (a bare <h1> on Matching rendered in the wrong face entirely).
+   Emits the exact class structure the stylesheet already targets, so this is
+   markup dedup, not a redesign. `title`/`sub`/`actions` accept any node —
+   selects, buttons and status chips ride through unchanged.
+   ============================================================ */
+
+export default function PageHeader({ title, sub, crumb, actions }) {
+  return (
+    <>
+      {crumb && <div className="breadcrumb">{crumb}</div>}
+      <div className="page-head">
+        <div className="page-head-main">
+          <h1 className="page-title">{title}</h1>
+          {sub && <p className="page-sub">{sub}</p>}
+        </div>
+        {actions && <div className="page-head-actions">{actions}</div>}
+      </div>
+    </>
+  )
+}
diff --git a/frontend/src/ui/Tabs.jsx b/frontend/src/ui/Tabs.jsx
index e4a2283..2eb0764 100644
--- a/frontend/src/ui/Tabs.jsx
+++ b/frontend/src/ui/Tabs.jsx
@@ -6,24 +6,48 @@
    `.active`. One component replaces four ad-hoc implementations, and only the
    active pane is mounted — which also means a chart in a hidden pane no longer
    draws into a zero-width canvas.
+
+   ARIA: tabs are indexed (`{base}-tab-{i}` / `{base}-panel-{i}`) so ids stay
+   valid whatever the key strings contain. A controlled <Tabs> without a
+   TabPanel emits aria-controls ids that nothing renders — inert, not an
+   error. Arrow keys move selection (selection follows focus); the roving
+   tabindex keeps the strip a single Tab stop.
    ============================================================ */
 
 import { useId, useState } from 'react'
 
-export function Tabs({ tabs, value, onChange, className = 'tabs' }) {
-  const id = useId()
+export function Tabs({ tabs, value, onChange, className = 'tabs', idBase }) {
+  const autoId = useId()
+  const base = idBase ?? autoId
+  const activeIndex = Math.max(0, tabs.findIndex((t) => (t.key ?? t) === value))
+
+  function onKeyDown(e) {
+    let next = null
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (activeIndex + 1) % tabs.length
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (activeIndex - 1 + tabs.length) % tabs.length
+    else if (e.key === 'Home') next = 0
+    else if (e.key === 'End') next = tabs.length - 1
+    if (next === null) return
+    e.preventDefault()
+    const t = tabs[next]
+    onChange(t.key ?? t)
+    document.getElementById(`${base}-tab-${next}`)?.focus()
+  }
+
   return (
-    <div className={className} role="tablist">
-      {tabs.map((t) => {
+    <div className={className} role="tablist" onKeyDown={onKeyDown}>
+      {tabs.map((t, i) => {
         const key = t.key ?? t
         const label = t.label ?? t
         const active = key === value
         return (
           <button
             key={key}
-            id={`${id}-${key}`}
+            id={`${base}-tab-${i}`}
             role="tab"
             aria-selected={active}
+            aria-controls={`${base}-panel-${i}`}
+            tabIndex={active ? 0 : -1}
             className={`tab${active ? ' active' : ''}`}
             onClick={() => onChange(key)}
           >
@@ -37,12 +61,16 @@ export function Tabs({ tabs, value, onChange, className = 'tabs' }) {
 
 /** Uncontrolled convenience wrapper: <TabPanel tabs={[{key,label,render}]} /> */
 export default function TabPanel({ tabs, initial, className }) {
+  const base = useId()
   const [value, setValue] = useState(initial ?? tabs[0]?.key)
-  const active = tabs.find((t) => t.key === value) ?? tabs[0]
+  const activeIndex = Math.max(0, tabs.findIndex((t) => t.key === value))
+  const active = tabs[activeIndex] ?? tabs[0]
   return (
     <>
-      <Tabs tabs={tabs} value={value} onChange={setValue} className={className} />
-      <div role="tabpanel">{active?.render?.()}</div>
+      <Tabs tabs={tabs} value={value} onChange={setValue} className={className} idBase={base} />
+      <div role="tabpanel" id={`${base}-panel-${activeIndex}`} aria-labelledby={`${base}-tab-${activeIndex}`}>
+        {active?.render?.()}
+      </div>
     </>
   )
 }
diff --git a/frontend/src/ui/Toast.jsx b/frontend/src/ui/Toast.jsx
index 97835e8..df188cc 100644
--- a/frontend/src/ui/Toast.jsx
+++ b/frontend/src/ui/Toast.jsx
@@ -77,7 +77,7 @@ export default function ToastProvider({ children }) {
     <ToastContext.Provider value={value}>
       {children}
       {createPortal(
-        <div className="toast-root">
+        <div className="toast-root" role="status" aria-live="polite">
           {items.map((t) => {
             const cfg = CONFIG[t.type] || CONFIG.info
             return (
diff --git a/frontend/src/ui/primitives.jsx b/frontend/src/ui/primitives.jsx
index 76c8920..4e53ce4 100644
--- a/frontend/src/ui/primitives.jsx
+++ b/frontend/src/ui/primitives.jsx
@@ -43,6 +43,10 @@ export const STATUS_CLASS = {
   'Strong Hire': 'b-green', Hire: 'b-teal', 'Lean Hire': 'b-amber', 'No Hire': 'b-red',
 }
 
+// Shared task/candidate priority map — Dashboard and Tasks each used to
+// define an identical private copy.
+export const PRIORITY_CLASS = { High: 'b-red', Medium: 'b-amber', Low: 'b-gray' }
+
 export function Badge({ children, className }) {
   const cls = className || STATUS_CLASS[children] || 'b-gray'
   return <span className={`badge ${cls}`}>{children}</span>

From 4757895029fc654085d41e36420dc3f5fe31c035 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:46:11 +0500
Subject: [PATCH 05/22] ui-polish 3/6: screen sweep A (9 representative
 screens)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dashboard, Candidates, Jobs, Settings, Inbox, Interviews, Matching,
Managers, JobCandidates — bounded checklist per screen:

- Hand-rolled .page-head blocks replaced with <PageHeader/>. Fixes
  Matching, whose bare <h1> rendered in the wrong face and weight.
- Candidates drops its verbatim copy of the DataTable thead for
  DataTableHead; clickable rows use .row-click.
- Interviews deletes its local STATUS_CLASS shadow (Badge auto-maps
  identically); Dashboard imports the shared PRIORITY_CLASS.
- Icon-only .act-btn buttons gain aria-labels mirroring their tooltips.
- Emails no longer overflow: Settings/Candidates clip with full text in
  title=""; Managers shows the full address again instead of chopping
  the domain off the data.
- Mechanical inline-style swaps to the new utilities (mb-*, mt-*,
  flex-1, justify-between, flex-wrap) on exact matches only.
- Settings uses its imported EmptyState instead of a hand-rolled copy;
  JobCandidates embedded title uses .page-title-sm instead of an inline
  font size.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/screens/Candidates.jsx    | 54 +++++++-------------------
 frontend/src/screens/Dashboard.jsx     | 20 ++++------
 frontend/src/screens/Inbox.jsx         | 15 ++++---
 frontend/src/screens/Interviews.jsx    | 46 +++++++++-------------
 frontend/src/screens/JobCandidates.jsx | 22 +++++------
 frontend/src/screens/Jobs.jsx          | 29 +++++++-------
 frontend/src/screens/Managers.jsx      | 21 +++++-----
 frontend/src/screens/Matching.jsx      | 26 ++++++-------
 frontend/src/screens/Settings.jsx      | 47 ++++++++++------------
 9 files changed, 115 insertions(+), 165 deletions(-)

diff --git a/frontend/src/screens/Candidates.jsx b/frontend/src/screens/Candidates.jsx
index d1aece4..329711c 100644
--- a/frontend/src/screens/Candidates.jsx
+++ b/frontend/src/screens/Candidates.jsx
@@ -14,7 +14,8 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
-import { Pagination, useDataTable } from '../ui/DataTable'
+import { DataTableHead, Pagination, useDataTable } from '../ui/DataTable'
+import PageHeader from '../ui/PageHeader'
 import { Avatar, Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import CandidateProfile from './CandidateProfile'
@@ -263,14 +264,10 @@ export default function Candidates() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Candidates</h1>
-          <p className="page-sub">
-            {rows.length} candidate account{rows.length === 1 ? '' : 's'} · role_id {CANDIDATE_ROLE_ID}
-          </p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Candidates"
+        sub={<>{rows.length} candidate account{rows.length === 1 ? '' : 's'} · role_id {CANDIDATE_ROLE_ID}</>}
+        actions={<>
           <button className="btn btn-secondary" onClick={() => toast('Candidates exported', 'success')}>
             <Icon name="download" /> Export
           </button>
@@ -280,11 +277,11 @@ export default function Candidates() {
           <button className="btn btn-primary" onClick={() => setAdding(true)}>
             <Icon name="plus" /> Add Candidate
           </button>
-        </div>
-      </div>
+        </>}
+      />
 
       {recentChips.length > 0 && (
-        <div className="flex items-center gap-8" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
+        <div className="flex items-center gap-8 flex-wrap mb-12">
           <span className="text-muted text-sm fw-600">Recently viewed:</span>
           {recentChips.map((c) => (
             <button key={c.id} className="prompt-chip" style={{ padding: '5px 10px' }} onClick={() => openProfile(c)}>
@@ -342,30 +339,7 @@ export default function Candidates() {
           <div className="dt">
             <div className="table-wrap">
               <table className="data">
-                <thead>
-                  <tr>
-                    {columns.map((c) => {
-                      const isSorted = t.sort.key === c.key
-                      const cls = [
-                        c.sortable ? 'sortable' : '',
-                        isSorted ? (t.sort.dir === 1 ? 'sorted-asc' : 'sorted-desc') : '',
-                      ].filter(Boolean).join(' ')
-                      return (
-                        <th
-                          key={c.key}
-                          className={cls}
-                          style={{ textAlign: c.align || 'left' }}
-                          onClick={c.sortable ? () => t.toggleSort(c.key) : undefined}
-                        >
-                          {c.label}
-                          {c.sortable && (
-                            <span className="sort-ind">{isSorted ? (t.sort.dir === 1 ? '▲' : '▼') : '⇅'}</span>
-                          )}
-                        </th>
-                      )
-                    })}
-                  </tr>
-                </thead>
+                <DataTableHead columns={columns} sort={t.sort} toggleSort={t.toggleSort} />
                 <tbody>
                   {t.pageRows.length === 0 ? (
                     <tr>
@@ -379,7 +353,7 @@ export default function Candidates() {
                     t.pageRows.map((c) => (
                       <tr
                         key={c.id}
-                        style={{ cursor: 'pointer' }}
+                        className="row-click"
                         onClick={() => openProfile(c)}
                       >
                         <td>
@@ -392,7 +366,7 @@ export default function Candidates() {
                           </div>
                         </td>
                         <td>
-                          <span className="text-sm">{c.email ?? '—'}</span>
+                          <span className="text-sm cell-clip" title={c.email || undefined}>{c.email ?? '—'}</span>
                         </td>
                         <td>
                           {c.isActive
@@ -948,7 +922,7 @@ function AddCandidate({ onClose, onSave, onInvalid }) {
           <div className="dz-icn" style={{ width: 44, height: 44, borderRadius: 13, marginBottom: 10 }}>
             <Icon name="upload" />
           </div>
-          <h3 style={{ fontSize: 15 }}>Drop the CV here or click to browse</h3>
+          <h3>Drop the CV here or click to browse</h3>
           <p className="text-muted text-sm">
             PDF only · text-based resumes · up to {MAX_CV_MB} MB
           </p>
@@ -956,7 +930,7 @@ function AddCandidate({ onClose, onSave, onInvalid }) {
         {cv && (
           <div className="upload-row">
             <span className="attach-icn" style={{ width: 34, height: 34 }}><Icon name="file" /></span>
-            <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="flex-1">
               <div className="fw-600 text-sm">{cv.name}</div>
               <div className="cell-sub">{Math.max(1, Math.round(cv.size / 1024))} KB</div>
             </div>
diff --git a/frontend/src/screens/Dashboard.jsx b/frontend/src/screens/Dashboard.jsx
index c2d90d4..41329e2 100644
--- a/frontend/src/screens/Dashboard.jsx
+++ b/frontend/src/screens/Dashboard.jsx
@@ -5,7 +5,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import Chart, { ChartLegend } from '../ui/Chart'
 import Charts from '../lib/charts'
 import Dropdown from '../ui/Dropdown'
-import { Avatar, Badge, EmptyState, Icon, KpiTile, ProgressBar } from '../ui/primitives'
+import PageHeader from '../ui/PageHeader'
+import { Avatar, Badge, EmptyState, Icon, KpiTile, PRIORITY_CLASS, ProgressBar } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
 import { qk } from '../lib/queryKeys'
@@ -17,7 +18,6 @@ import * as jobsApi from '../api/jobs'
 import * as tasksApi from '../api/tasks'
 
 const POLL_MS = 60_000
-const PRIORITY_CLASS = { High: 'b-red', Medium: 'b-amber', Low: 'b-gray' }
 
 function asObject(data) {
   return data && typeof data === 'object' && !Array.isArray(data) ? data : null
@@ -373,14 +373,10 @@ export default function Dashboard() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">{greetingFor()}, {firstName} 👋</h1>
-          <p className="page-sub">
-            Here’s what’s happening with your hiring today — {todayLabel}
-          </p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title={<>{greetingFor()}, {firstName} 👋</>}
+        sub={<>Here’s what’s happening with your hiring today — {todayLabel}</>}
+        actions={<>
           <Link className="btn btn-secondary" to="/reports">
             <Icon name="download" /> Export
           </Link>
@@ -404,8 +400,8 @@ export default function Dashboard() {
           <Link className="btn btn-primary" to="/jobs" state={{ openCreate: true }}>
             <Icon name="plus" /> Create Job
           </Link>
-        </div>
-      </div>
+        </>}
+      />
 
       <div className="grid g-kpi-7">
         {tiles.map((c) => <KpiTile key={c.label} {...c} />)}
diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index f634776..a506f9f 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -9,6 +9,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
 import EmailBody, { looksLikeHtml } from '../ui/EmailBody'
+import PageHeader from '../ui/PageHeader'
 import { Tabs } from '../ui/Tabs'
 import { Pagination, pageWindow } from '../ui/DataTable'
 import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
@@ -719,12 +720,10 @@ export default function Inbox() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Recruitment Inbox</h1>
-          <p className="page-sub">Every candidate, every source — one unified queue</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Recruitment Inbox"
+        sub="Every candidate, every source — one unified queue"
+        actions={<>
           <span className="integration-status"><span className="pulse" />Microsoft Graph API · Connected</span>
           <button
             className="btn btn-secondary"
@@ -739,8 +738,8 @@ export default function Inbox() {
           <button className="btn btn-primary" onClick={() => navigate('/import')}>
             <Icon name="upload" /> Upload CVs
           </button>
-        </div>
-      </div>
+        </>}
+      />
 
       <div className="card">
         <div style={{ margin: '0 16px', paddingTop: 8 }}>
diff --git a/frontend/src/screens/Interviews.jsx b/frontend/src/screens/Interviews.jsx
index 4f9720c..0cfe17c 100644
--- a/frontend/src/screens/Interviews.jsx
+++ b/frontend/src/screens/Interviews.jsx
@@ -25,6 +25,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Tabs } from '../ui/Tabs'
 import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, Stars } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
@@ -39,13 +40,6 @@ import { avatarColor, fmtShort, initials as initialsOf } from '../data/seed'
 
 const FETCH_TOP = 200
 
-const STATUS_CLASS = {
-  Scheduled: 'b-blue',
-  Completed: 'b-green',
-  Cancelled: 'b-red',
-  'No Show': 'b-amber',
-}
-
 /** <input type="date"> + <input type="time"> -> one ISO instant, or null. */
 function toInstant(date, time) {
   if (!date) return null
@@ -229,14 +223,14 @@ export default function Interviews() {
     },
     {
       key: 'status', label: 'Status', sortable: true,
-      render: (iv) => <Badge className={STATUS_CLASS[iv.status] ?? 'b-gray'}>{iv.status}</Badge>,
+      render: (iv) => <Badge>{iv.status}</Badge>,
     },
     {
       key: '_a', label: 'Actions', align: 'right',
       render: (iv) => (
         <div className="row-actions">
           <button
-            className="act-btn" data-tip="View candidate"
+            className="act-btn" data-tip="View candidate" aria-label="View candidate"
             disabled={!iv.userId}
             onClick={() => navigate('/candidates', { state: { openCandidate: iv.userId } })}
           >
@@ -245,14 +239,14 @@ export default function Interviews() {
           {iv.status === 'Scheduled' && (
             <>
               <button
-                className="act-btn" data-tip="Mark completed"
+                className="act-btn" data-tip="Mark completed" aria-label="Mark completed"
                 disabled={setStatusMutation.isPending}
                 onClick={() => setStatusMutation.mutate({ id: iv.id, next: 'Completed' })}
               >
                 <Icon name="check" />
               </button>
               <button
-                className="act-btn" data-tip="Cancel interview"
+                className="act-btn" data-tip="Cancel interview" aria-label="Cancel interview"
                 disabled={setStatusMutation.isPending}
                 onClick={() => setStatusMutation.mutate({ id: iv.id, next: 'Cancelled' })}
               >
@@ -260,7 +254,7 @@ export default function Interviews() {
               </button>
             </>
           )}
-          <button className="act-btn" data-tip="Scorecard" onClick={() => setFeedbackFor(iv)}>
+          <button className="act-btn" data-tip="Scorecard" aria-label="Scorecard" onClick={() => setFeedbackFor(iv)}>
             <Icon name="star" />
           </button>
         </div>
@@ -272,18 +266,16 @@ export default function Interviews() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Interviews</h1>
-          <p className="page-sub">Manage and track all interview activity</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Interviews"
+        sub="Manage and track all interview activity"
+        actions={<>
           <Link className="btn btn-secondary" to="/calendar"><Icon name="calendar" /> Calendar View</Link>
           <button className="btn btn-primary" onClick={() => setScheduling(true)}>
             <Icon name="plus" /> Schedule Interview
           </button>
-        </div>
-      </div>
+        </>}
+      />
 
       <div className="grid g-kpi mb-18">
         <KpiCard label="Scheduled" value={allQuery.isPending ? '—' : stats.scheduled} icon="calendar" tone="i-blue" />
@@ -484,14 +476,14 @@ function Scorecard({ interview: iv, onClose, onSaved, toast }) {
           color={avatarColor(iv.candidate)}
           className="avatar-lg"
         />
-        <div style={{ flex: 1 }}>
+        <div className="flex-1">
           <div className="ph-name" style={{ fontSize: 17 }}>{iv.candidate}</div>
           <div className="ph-role">{iv.type}{iv.jobTitle ? ` · ${iv.jobTitle}` : ''}</div>
         </div>
-        <Badge className={STATUS_CLASS[iv.status] ?? 'b-gray'}>{iv.status}</Badge>
+        <Badge>{iv.status}</Badge>
       </div>
 
-      <div style={{ marginBottom: 18 }}>
+      <div className="mb-18">
         <Tabs
           value={tab}
           onChange={setTab}
@@ -519,14 +511,14 @@ function Scorecard({ interview: iv, onClose, onSaved, toast }) {
           )}
           {template && (
             <>
-              <div className="form-field" style={{ marginBottom: 8 }}>
+              <div className="form-field mb-8">
                 <label>Evaluation Template</label>
                 <select value={templateName} onChange={(e) => setTemplateName(e.target.value)}>
                   {templates.map((t) => <option key={t.id}>{t.name}</option>)}
                 </select>
               </div>
               <CriteriaList criteria={template.criteria} ratings={ratings} setRating={setRating} />
-              <div className="form-field" style={{ marginTop: 8 }}>
+              <div className="form-field mt-8">
                 <label>Comments</label>
                 <textarea
                   placeholder="Strengths, concerns, and areas explored…"
@@ -534,7 +526,7 @@ function Scorecard({ interview: iv, onClose, onSaved, toast }) {
                   onChange={(e) => setComments(e.target.value)}
                 />
               </div>
-              <div className="form-field" style={{ marginTop: 14 }}>
+              <div className="form-field mt-12">
                 <label>Overall Recommendation</label>
                 <div className="seg" style={{ marginTop: 4 }}>
                   {['Strong Hire', 'Hire', 'Lean Hire', 'No Hire'].map((r) => (
@@ -662,7 +654,7 @@ function ScheduleForm({ applications, loading, busy, onClose, onSubmit, toast })
           </div>
         </div>
 
-        <p className="text-muted" style={{ marginTop: 16, fontSize: 13 }}>
+        <p className="text-muted text-sm mt-16">
           Interviews attach to an application, so only candidates with an assigned job post appear here.
           Duration, meeting mode and interviewers are not stored by the interview record.
         </p>
diff --git a/frontend/src/screens/JobCandidates.jsx b/frontend/src/screens/JobCandidates.jsx
index 74c83a7..51c2320 100644
--- a/frontend/src/screens/JobCandidates.jsx
+++ b/frontend/src/screens/JobCandidates.jsx
@@ -92,7 +92,7 @@ function CandidateCard({ c, onView }) {
           <span className="cand-meta"><Icon name="briefcase" /> {c.experience != null ? `${c.experience} yrs` : '—'}</span>
           <span className="cand-company">{c.currentCompany ?? ''}</span>
           <Badge className="b-gray">{SOURCE_LABEL[c.source] ?? c.source}</Badge>
-          <button className="act-btn" data-tip="View" onClick={(e) => { e.stopPropagation(); onView(c) }}>
+          <button className="act-btn" data-tip="View" aria-label="View candidate" onClick={(e) => { e.stopPropagation(); onView(c) }}>
             <Icon name="eye" />
           </button>
         </div>
@@ -119,7 +119,7 @@ function FailedCard({ c, onView }) {
           <Badge className="b-red">{c.errorCode ?? 'FAILED'}</Badge>
           <span className="cand-company" />
           <Badge className="b-gray">{SOURCE_LABEL[c.source] ?? c.source}</Badge>
-          <button className="act-btn" data-tip="View" onClick={(e) => { e.stopPropagation(); onView(c) }}>
+          <button className="act-btn" data-tip="View" aria-label="View details" onClick={(e) => { e.stopPropagation(); onView(c) }}>
             <Icon name="eye" />
           </button>
         </div>
@@ -143,7 +143,7 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
     >
       <div className="profile-hero">
         <Avatar name={c.name} initials={initialsOf(c.name)} color={avatarColor(c.name)} className="avatar-lg" />
-        <div style={{ flex: 1 }}>
+        <div className="flex-1">
           <div className="ph-name">{displayName(c.name)}</div>
           <div className="ph-role">{roleLine}</div>
           <div className="ph-tags">
@@ -195,14 +195,14 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
         {tab === 'Job Match' && completed && (
           <>
             <div className="form-section-title" style={{ marginTop: 0 }}>Job-Match Score</div>
-            <p className="text-muted text-sm" style={{ marginBottom: 14 }}>
+            <p className="text-muted text-sm mb-12">
               Match this candidate against the job the CV was scored for.
             </p>
             <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)', marginBottom: 20 }}>
               <div className="card-body flex items-center gap-12">
                 <MiniRing score={c.aiScore} size={56} />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div className="fw-600" style={{ marginBottom: 8 }}>{jobTitle ?? 'Selected job'}</div>
+                <div className="flex-1">
+                  <div className="fw-600 mb-8">{jobTitle ?? 'Selected job'}</div>
                   <ProgressBar pct={c.aiScore} />
                 </div>
                 {band && <Badge className={bandCls}>{band}</Badge>}
@@ -212,7 +212,7 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
             <div className="form-section-title" style={{ marginTop: 0 }}>
               Matched must-have skills ({c.matchedSkills.length})
             </div>
-            <div className="k-tags" style={{ marginBottom: 16 }}>
+            <div className="k-tags mb-16">
               {c.matchedSkills.length
                 ? c.matchedSkills.map((s) => (
                     <span className="skill-pill skill-matched" key={s}><Icon name="check" /> {s}</span>
@@ -223,7 +223,7 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
             <div className="form-section-title" style={{ marginTop: 0 }}>
               Missing must-have skills ({c.missingSkills.length})
             </div>
-            <div className="k-tags" style={{ marginBottom: 16 }}>
+            <div className="k-tags mb-16">
               {c.missingSkills.length
                 ? c.missingSkills.map((s) => (
                     <span className="skill-pill skill-missing" key={s}><Icon name="x" /> {s}</span>
@@ -282,9 +282,9 @@ export default function JobCandidates({ jobId, jobTitle }) {
   if (!jobId) return null
 
   return (
-    <div style={{ marginTop: 24 }}>
-      <div style={{ marginBottom: 14 }}>
-        <h2 className="page-title" style={{ fontSize: 20 }}>Candidates</h2>
+    <div className="mt-24">
+      <div className="mb-12">
+        <h2 className="page-title page-title-sm">Candidates</h2>
         <p className="page-sub">
           {rows.length} candidate{rows.length === 1 ? '' : 's'} · {scored} scored · {failed} failed
           {jobTitle ? ` · vs ${jobTitle}` : ''}
diff --git a/frontend/src/screens/Jobs.jsx b/frontend/src/screens/Jobs.jsx
index e46b103..eca6816 100644
--- a/frontend/src/screens/Jobs.jsx
+++ b/frontend/src/screens/Jobs.jsx
@@ -14,6 +14,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import AiFieldAssist from '../ui/AiFieldAssist'
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
@@ -221,11 +222,11 @@ export default function Jobs() {
       key: '_a', label: 'Actions', align: 'right',
       render: (j) => (
         <div className="row-actions">
-          <button className="act-btn" data-tip="View" onClick={() => setViewing(j)}><Icon name="eye" /></button>
+          <button className="act-btn" data-tip="View" aria-label="View job" onClick={() => setViewing(j)}><Icon name="eye" /></button>
           {canEdit && (
-            <button className="act-btn" data-tip="Edit" onClick={() => setEditing(j)}><Icon name="edit" /></button>
+            <button className="act-btn" data-tip="Edit" aria-label="Edit job" onClick={() => setEditing(j)}><Icon name="edit" /></button>
           )}
-          <button className="act-btn" data-tip="Publish" onClick={() => navigate('/jobboard', { state: { publishJob: j.id } })}><Icon name="send" /></button>
+          <button className="act-btn" data-tip="Publish" aria-label="Publish job" onClick={() => navigate('/jobboard', { state: { publishJob: j.id } })}><Icon name="send" /></button>
         </div>
       ),
     },
@@ -233,12 +234,10 @@ export default function Jobs() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Jobs</h1>
-          <p className="page-sub">{jobs.length} requisitions · {openCount} currently open</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Jobs"
+        sub={`${jobs.length} requisitions · ${openCount} currently open`}
+        actions={<>
           <button className="btn btn-secondary" onClick={exportJobs} disabled={exporting}>
             <Icon name="download" /> {exporting ? 'Exporting…' : 'Export'}
           </button>
@@ -247,8 +246,8 @@ export default function Jobs() {
               <Icon name="plus" /> Create Job <Icon name="sparkles" />
             </button>
           )}
-        </div>
-      </div>
+        </>}
+      />
 
       <div className="card">
         {jobsQuery.isPending && (
@@ -620,7 +619,7 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
                 ) : (
                   <span className="attach-icn" style={{ width: 34, height: 34 }}><Icon name="file" /></span>
                 )}
-                <div style={{ flex: 1, minWidth: 0 }}>
+                <div className="flex-1">
                   <div className="fw-600 text-sm">{imageFile.name}</div>
                   <div className="cell-sub">{Math.max(1, Math.round(imageFile.size / 1024))} KB</div>
                 </div>
@@ -640,7 +639,7 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
 
         </div>
 
-        <p className="text-muted" style={{ marginTop: 16, fontSize: 13 }}>
+        <p className="text-muted text-sm mt-16">
           Saves the requisition to the board — publish to a channel later from the Job Board.
         </p>
       </form>
@@ -849,7 +848,7 @@ function RecruiterAssignment({ jobPostId, fallbackName, canEdit }) {
   return (
     <>
       <div className="divider" />
-      <div style={{ marginBottom: 16 }}>
+      <div className="mb-16">
         <div style={SECTION_LABEL}>Recruiter ownership</div>
         {currentQuery.isError ? (
           <p className="text-muted text-sm">
@@ -967,7 +966,7 @@ function JobDetail({
       {j.description && (
         <>
           <div className="divider" />
-          <div style={{ marginBottom: 16 }}>
+          <div className="mb-16">
             <div style={SECTION_LABEL}>Description</div>
             <p style={{ color: 'var(--text-2)' }}>{j.description}</p>
           </div>
diff --git a/frontend/src/screens/Managers.jsx b/frontend/src/screens/Managers.jsx
index 01ef2c7..06b5cd6 100644
--- a/frontend/src/screens/Managers.jsx
+++ b/frontend/src/screens/Managers.jsx
@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { useMutation, useQuery } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Avatar, Badge, EmptyState, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
@@ -46,12 +47,10 @@ export default function Managers() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Hiring Managers</h1>
-          <p className="page-sub">{managers.length} managers · {totalReqs} active requisitions</p>
-        </div>
-      </div>
+      <PageHeader
+        title="Hiring Managers"
+        sub={`${managers.length} managers · ${totalReqs} active requisitions`}
+      />
 
       {managersQuery.isPending && (
         <EmptyState icon="managers" title="Loading…">Fetching hiring managers.</EmptyState>
@@ -71,9 +70,9 @@ export default function Managers() {
           {managers.map((m) => (
             <div className="card" key={m.id}>
               <div className="card-body">
-                <div className="flex items-center gap-12" style={{ marginBottom: 14 }}>
+                <div className="flex items-center gap-12 mb-12">
                   <Avatar name={m.name} className="avatar-lg" />
-                  <div style={{ flex: 1 }}>
+                  <div className="flex-1">
                     <div className="lr-title">{m.name}</div>
                     <div className="lr-sub">{m.title || m.roleName || 'Hiring manager'}</div>
                   </div>
@@ -83,8 +82,10 @@ export default function Managers() {
                   <div className="stat-mini"><span className="stat-mini-val">{m.teamSize ?? '—'}</span><span className="stat-mini-lbl">Team Size</span></div>
                 </div>
                 <div className="divider" style={{ margin: '12px 0' }} />
-                <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
-                  <span className="cell-sub"><Icon name="mail" /> {m.email ? m.email.split('@')[0] : '—'}</span>
+                <div className="flex items-center justify-between gap-8">
+                  <span className="cell-sub truncate min-w-0" title={m.email || undefined}>
+                    <Icon name="mail" /> {m.email || '—'}
+                  </span>
                   <button className="btn btn-ghost btn-sm" onClick={() => setDetail(m)}>View</button>
                 </div>
               </div>
diff --git a/frontend/src/screens/Matching.jsx b/frontend/src/screens/Matching.jsx
index d28b2c0..e5c5016 100644
--- a/frontend/src/screens/Matching.jsx
+++ b/frontend/src/screens/Matching.jsx
@@ -12,6 +12,7 @@ import { useSearchParams } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import EmailBody, { looksLikeHtml } from '../ui/EmailBody'
+import PageHeader from '../ui/PageHeader'
 import { Tabs } from '../ui/Tabs'
 import { Avatar, Badge, EmptyState, Icon } from '../ui/primitives'
 import { JobCard, PickRoleModal } from '../ui/SuggestedRoles'
@@ -375,15 +376,10 @@ export default function Matching() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1>Job Matching</h1>
-          <p className="page-sub">Route applications to the right open role</p>
-        </div>
-      </div>
+      <PageHeader title="Job Matching" sub="Route applications to the right open role" />
 
       {!canEdit && (
-        <div className="alert alert-danger" style={{ marginBottom: 14 }}>
+        <div className="alert alert-danger mb-12">
           Your account does not hold <code>inbox.edit</code>, which the server requires to
           assign, unassign, or retry a match. Controls below stay disabled.
         </div>
@@ -554,7 +550,7 @@ function MatchingWorkspace({
     <div style={{ padding: 24 }}>
       <div className="flex items-center gap-16" style={{ marginBottom: 20 }}>
         <Avatar name={i.name} initials={i.initials} color={i.color} className="avatar-lg" />
-        <div style={{ flex: 1 }}>
+        <div className="flex-1">
           <div className="ph-name" style={{ fontSize: 19 }}>{i.name}</div>
           <div className="ph-role">{i.position}</div>
           <div className="ph-tags" style={{ marginTop: 8 }}>
@@ -577,7 +573,7 @@ function MatchingWorkspace({
             marginBottom: 18,
           }}
         >
-          <div className="card-body flex items-center gap-12" style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+          <div className="card-body flex items-center gap-12 justify-between flex-wrap">
             <div className="flex items-center gap-8">
               <Icon name="check-circle" />
               <div>
@@ -609,8 +605,8 @@ function MatchingWorkspace({
       >
         <div style={{ flex: '1 1 320px', minWidth: 0 }}>
           {matchFailed ? (
-            <div className="alert alert-danger" style={{ marginBottom: 16 }}>
-              <div style={{ marginBottom: 8 }}>{detail?.matchError || 'Matching failed for this application.'}</div>
+            <div className="alert alert-danger mb-16">
+              <div className="mb-8">{detail?.matchError || 'Matching failed for this application.'}</div>
               <button
                 className="btn btn-secondary btn-sm"
                 disabled={!canEdit || rematching}
@@ -621,7 +617,7 @@ function MatchingWorkspace({
               </button>
             </div>
           ) : (
-            <div style={{ marginBottom: 16 }}>
+            <div className="mb-16">
               <div className="fw-600" style={{ marginBottom: 6 }}>AI verdict</div>
               <p style={{ marginBottom: 4 }}>
                 {detail?.matchSummary || listRow?.matchSummary || 'No match summary yet.'}
@@ -639,7 +635,7 @@ function MatchingWorkspace({
                 </button>
               )}
               {whyOpen && (
-                <p className="text-muted text-sm" style={{ marginTop: 8 }}>
+                <p className="text-muted text-sm mt-8">
                   {detail?.matchReasoning || listRow?.matchReasoning}
                 </p>
               )}
@@ -649,7 +645,7 @@ function MatchingWorkspace({
           {/* Email first: it is the application itself, and the resume is its
               attachment. Reading order follows that. */}
           {(detail?.subject || detail?.body) && (
-            <div style={{ marginBottom: 16 }}>
+            <div className="mb-16">
               <div className="fw-600" style={{ marginBottom: 6 }}>Email</div>
               <div className="email-head">Subject: {detail.subject || '(no subject)'}</div>
               {looksLikeHtml(detail.bodyHtml) ? (
@@ -669,7 +665,7 @@ function MatchingWorkspace({
         </div>
 
         <div role="radiogroup" aria-label="Suggested roles" style={{ flex: '0 1 360px', minWidth: 260 }}>
-          <div className="fw-600" style={{ marginBottom: 8 }}>Suggested roles</div>
+          <div className="fw-600 mb-8">Suggested roles</div>
           {suggestionCards.length === 0 && !manualPost ? (
             <EmptyState icon="alert" title="No suggested roles">
               <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginTop: 10 }}>
diff --git a/frontend/src/screens/Settings.jsx b/frontend/src/screens/Settings.jsx
index 1b338f6..2fd2492 100644
--- a/frontend/src/screens/Settings.jsx
+++ b/frontend/src/screens/Settings.jsx
@@ -9,6 +9,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Tabs } from '../ui/Tabs'
 import { Avatar, Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
@@ -115,23 +116,19 @@ export default function Settings() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Settings</h1>
-          <p className="page-sub">Configure your workspace and team preferences</p>
-        </div>
-        <div className="page-head-actions">
-          {showOrgSave && (
-            <button
-              className="btn btn-primary"
-              disabled={!canConfigure || save.isPending}
-              onClick={() => save.mutate()}
-            >
-              <Icon name="check" /> {save.isPending ? 'Saving…' : 'Save Changes'}
-            </button>
-          )}
-        </div>
-      </div>
+      <PageHeader
+        title="Settings"
+        sub="Configure your workspace and team preferences"
+        actions={showOrgSave && (
+          <button
+            className="btn btn-primary"
+            disabled={!canConfigure || save.isPending}
+            onClick={() => save.mutate()}
+          >
+            <Icon name="check" /> {save.isPending ? 'Saving…' : 'Save Changes'}
+          </button>
+        )}
+      />
 
       <Tabs value={tab} onChange={setTab} tabs={TABS.map((t) => ({ key: t, label: t }))} />
 
@@ -264,14 +261,10 @@ function Users() {
 
       {usersQuery.isError ? (
         <div className="card-body">
-          <div className="empty-state">
-            <Icon name="alert" />
-            <h3>Couldn’t load users</h3>
-            <p>
-              {friendlyAuthError(usersQuery.error, 'The server did not return the user list.')}
-              {' '}This tab needs the <code>rbac_users.view</code> permission.
-            </p>
-          </div>
+          <EmptyState icon="alert" title="Couldn’t load users">
+            {friendlyAuthError(usersQuery.error, 'The server did not return the user list.')}
+            {' '}This tab needs the <code>rbac_users.view</code> permission.
+          </EmptyState>
         </div>
       ) : (
         <div className="table-wrap">
@@ -288,9 +281,9 @@ function Users() {
                   <td>
                     <div className="user-cell">
                       <Avatar name={u.name} />
-                      <div>
+                      <div className="min-w-0">
                         <div className="cell-primary">{u.name}</div>
-                        <div className="cell-sub">{u.email}</div>
+                        <div className="cell-sub" title={u.email || undefined}>{u.email}</div>
                       </div>
                     </div>
                   </td>

From af6ef715c52af1b9893f23107cc7b967db3e8565 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:51:26 +0500
Subject: [PATCH 06/22] ui-polish 4/6: screen sweep B (17 remaining page
 screens)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AiAssistant, AiStudio, Analytics, Assessments, Calendar, CvImport, Help,
JobBoard, Notifications, Offers, Pipeline, Rbac, RecruiterHub, Reports,
Talent, TalentPool, Tasks — same bounded checklist:

- Every remaining hand-rolled .page-head replaced with <PageHeader/>;
  zero copies of the block remain in the codebase.
- JobBoard fixes its non-functional inline ellipsis (overflow without
  white-space never truncated) with .truncate + title.
- Tasks imports the shared PRIORITY_CLASS and labels its unlabeled
  card-head add button; remaining .act-btn tooltips mirrored into
  aria-labels (Assessments, JobBoard, Notifications, Offers, Talent).
- Assessments swaps a hand-rolled empty state for the imported
  EmptyState; Help drops an inline h2 font size the base rule now covers.
- Mechanical inline-style swaps to utilities on exact matches.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/screens/AiAssistant.jsx   | 15 +++++++--------
 frontend/src/screens/AiStudio.jsx      | 19 ++++++++-----------
 frontend/src/screens/Analytics.jsx     | 15 +++++++--------
 frontend/src/screens/Assessments.jsx   | 26 ++++++++++++--------------
 frontend/src/screens/Calendar.jsx      | 18 +++++++-----------
 frontend/src/screens/CvImport.jsx      | 20 ++++++++------------
 frontend/src/screens/Help.jsx          | 10 +++-------
 frontend/src/screens/JobBoard.jsx      | 24 ++++++++++++------------
 frontend/src/screens/Notifications.jsx | 16 ++++++++--------
 frontend/src/screens/Offers.jsx        | 18 +++++++++---------
 frontend/src/screens/Pipeline.jsx      | 25 ++++++++++++-------------
 frontend/src/screens/Rbac.jsx          | 17 +++++++----------
 frontend/src/screens/RecruiterHub.jsx  | 17 ++++++++---------
 frontend/src/screens/Reports.jsx       | 15 +++++++--------
 frontend/src/screens/Talent.jsx        | 20 ++++++++++----------
 frontend/src/screens/TalentPool.jsx    | 15 +++++++--------
 frontend/src/screens/Tasks.jsx         | 21 ++++++++++-----------
 17 files changed, 142 insertions(+), 169 deletions(-)

diff --git a/frontend/src/screens/AiAssistant.jsx b/frontend/src/screens/AiAssistant.jsx
index e4dbe2e..f972c8e 100644
--- a/frontend/src/screens/AiAssistant.jsx
+++ b/frontend/src/screens/AiAssistant.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import Chat from '../app/ai/Chat'
+import PageHeader from '../ui/PageHeader'
 import { Icon } from '../ui/primitives'
 
 export default function AiAssistant() {
@@ -8,20 +9,18 @@ export default function AiAssistant() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">AI Assistant</h1>
-          <p className="page-sub">Your recruiting copilot — powered by AI (interface preview)</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="AI Assistant"
+        sub="Your recruiting copilot — powered by AI (interface preview)"
+        actions={<>
           <span className="integration-status pending">
             <span className="pulse" />Model endpoint · Not connected
           </span>
           <button className="btn btn-secondary" onClick={() => setResetKey((k) => k + 1)}>
             <Icon name="plus" /> New Chat
           </button>
-        </div>
-      </div>
+        </>}
+      />
       <div className="card">
         <div className="card-body">
           <Chat resetKey={resetKey} />
diff --git a/frontend/src/screens/AiStudio.jsx b/frontend/src/screens/AiStudio.jsx
index 3a795ac..586d637 100644
--- a/frontend/src/screens/AiStudio.jsx
+++ b/frontend/src/screens/AiStudio.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Badge, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { aiModules } from '../data/seed'
@@ -11,20 +12,16 @@ export default function AiStudio() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">AI Studio</h1>
-          <p className="page-sub">
-            Next-generation AI modules — designed and API-ready for backend integration
-          </p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="AI Studio"
+        sub="Next-generation AI modules — designed and API-ready for backend integration"
+        actions={
           <span className="integration-status pending"><span className="pulse" />{betaCount} in Beta</span>
-        </div>
-      </div>
+        }
+      />
 
       <div className="card brand-hero mb-18">
-        <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
+        <div className="card-body flex items-center flex-wrap" style={{ gap: 20 }}>
           <div className="ai-logo" style={{ margin: 0, width: 56, height: 56 }}><Icon name="sparkles" /></div>
           <div style={{ flex: 1, minWidth: 220 }}>
             <h2 style={{ fontSize: 19, marginBottom: 4 }}>Everything is API-ready</h2>
diff --git a/frontend/src/screens/Analytics.jsx b/frontend/src/screens/Analytics.jsx
index eec603d..e42ccaf 100644
--- a/frontend/src/screens/Analytics.jsx
+++ b/frontend/src/screens/Analytics.jsx
@@ -31,6 +31,7 @@ import { useMutation, useQueries, useQuery } from '@tanstack/react-query'
 import Chart, { ChartLegend } from '../ui/Chart'
 import Charts from '../lib/charts'
 import DataTable from '../ui/DataTable'
+import PageHeader from '../ui/PageHeader'
 import { EmptyState, Icon } from '../ui/primitives'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -396,12 +397,10 @@ export default function Analytics() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Analytics</h1>
-          <p className="page-sub">Deep-dive metrics across your recruitment funnel</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Analytics"
+        sub="Deep-dive metrics across your recruitment funnel"
+        actions={<>
           <div className="pill-tabs">
             {RANGES.map((r) => (
               <span
@@ -426,8 +425,8 @@ export default function Analytics() {
               <option key={r.id} value={r.id}>{r.name}</option>
             ))}
           </select>
-        </div>
-      </div>
+        </>}
+      />
 
       {kpisQuery.isError && (
         <div className="card mb-18">
diff --git a/frontend/src/screens/Assessments.jsx b/frontend/src/screens/Assessments.jsx
index 3e57097..e9e54ec 100644
--- a/frontend/src/screens/Assessments.jsx
+++ b/frontend/src/screens/Assessments.jsx
@@ -13,6 +13,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, ProgressBar, ScoreChip } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
@@ -168,10 +169,11 @@ export default function Assessments() {
       key: '_a', label: 'Actions', align: 'right',
       render: (a) => (
         <div className="row-actions">
-          <button className="act-btn" data-tip="View" onClick={() => setViewing(a)}><Icon name="eye" /></button>
+          <button className="act-btn" data-tip="View" aria-label="View assessment" onClick={() => setViewing(a)}><Icon name="eye" /></button>
           <button
             className="act-btn"
             data-tip="Remind"
+            aria-label="Send reminder"
             disabled={!canEdit || remind.isPending}
             title={!canEdit ? 'Requires assessments.edit' : undefined}
             onClick={() => remind.mutate(a.id)}
@@ -185,12 +187,10 @@ export default function Assessments() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Assessments</h1>
-          <p className="page-sub">Coding tests, take-homes, and evaluations</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Assessments"
+        sub="Coding tests, take-homes, and evaluations"
+        actions={
           <button
             className="btn btn-primary"
             disabled={!canCreate}
@@ -199,8 +199,8 @@ export default function Assessments() {
           >
             <Icon name="plus" /> Assign Assessment
           </button>
-        </div>
-      </div>
+        }
+      />
 
       <div className="grid g-kpi mb-18">
         <KpiCard label="Total Assigned" value={totalCount} icon="file" tone="i-indigo" />
@@ -320,11 +320,9 @@ export default function Assessments() {
               )}
             </>
           ) : (
-            <div className="empty-state">
-              <Icon name="clock" />
-              <h3>Assessment not completed</h3>
-              <p>Results will appear once the candidate submits.</p>
-            </div>
+            <EmptyState icon="clock" title="Assessment not completed">
+              Results will appear once the candidate submits.
+            </EmptyState>
           )}
         </Modal>
       )}
diff --git a/frontend/src/screens/Calendar.jsx b/frontend/src/screens/Calendar.jsx
index b4516e4..0f0c1d8 100644
--- a/frontend/src/screens/Calendar.jsx
+++ b/frontend/src/screens/Calendar.jsx
@@ -16,6 +16,7 @@ import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 
+import PageHeader from '../ui/PageHeader'
 import { Avatar, EmptyState, Icon } from '../ui/primitives'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -122,15 +123,10 @@ export default function Calendar() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Calendar</h1>
-          <p className="page-sub">
-            Interview schedule at a glance
-            {monthQuery.isSuccess ? ` · ${events.length} this month` : ''}
-          </p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Calendar"
+        sub={`Interview schedule at a glance${monthQuery.isSuccess ? ` · ${events.length} this month` : ''}`}
+        actions={<>
           <div className="flex items-center gap-8">
             <button className="btn btn-icon btn-secondary" onClick={() => step(-1)} aria-label="Previous month">
               <Icon name="chevron-left" />
@@ -152,8 +148,8 @@ export default function Calendar() {
           >
             <Icon name="plus" /> Schedule
           </button>
-        </div>
-      </div>
+        </>}
+      />
 
       {monthQuery.isError ? (
         <div className="card">
diff --git a/frontend/src/screens/CvImport.jsx b/frontend/src/screens/CvImport.jsx
index 590939e..5ae729b 100644
--- a/frontend/src/screens/CvImport.jsx
+++ b/frontend/src/screens/CvImport.jsx
@@ -12,6 +12,7 @@
 import { useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
+import PageHeader from '../ui/PageHeader'
 import { Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import JobCandidates from './JobCandidates'
@@ -124,25 +125,20 @@ export default function CvImport() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">CV Import</h1>
-          <p className="page-sub">Upload resume PDFs — parsed, scored against a job, and saved automatically</p>
-        </div>
-        <div className="page-head-actions">
-          <span className="integration-status pending"><span className="pulse" />AI Resume Scoring · Live</span>
-        </div>
-      </div>
+      <PageHeader
+        title="CV Import"
+        sub="Upload resume PDFs — parsed, scored against a job, and saved automatically"
+        actions={<span className="integration-status pending"><span className="pulse" />AI Resume Scoring · Live</span>}
+      />
 
       <div className="grid g-2-1">
         <div>
           <div className="card mb-18">
             <div className="card-body">
-              <div className="flex items-center gap-8" style={{ marginBottom: 16 }}>
+              <div className="flex items-center gap-8 mb-16">
                 <span className="fw-600 text-sm" style={{ flexShrink: 0 }}>Score against</span>
                 <select
-                  className="select"
-                  style={{ flex: 1 }}
+                  className="select flex-1"
                   value={jobId}
                   onChange={(e) => setJobId(e.target.value)}
                 >
diff --git a/frontend/src/screens/Help.jsx b/frontend/src/screens/Help.jsx
index f665f0b..15389d2 100644
--- a/frontend/src/screens/Help.jsx
+++ b/frontend/src/screens/Help.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import PageHeader from '../ui/PageHeader'
 import { Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 
@@ -23,16 +24,11 @@ export default function Help() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Help Center</h1>
-          <p className="page-sub">Find answers and get support</p>
-        </div>
-      </div>
+      <PageHeader title="Help Center" sub="Find answers and get support" />
 
       <div className="card brand-hero mb-18">
         <div className="card-body" style={{ padding: 32, textAlign: 'center' }}>
-          <h2 style={{ fontSize: 22, marginBottom: 8 }}>How can we help you?</h2>
+          <h2 className="mb-8">How can we help you?</h2>
           <p style={{ opacity: 0.85, marginBottom: 18 }}>
             Search our knowledge base or browse the topics below
           </p>
diff --git a/frontend/src/screens/JobBoard.jsx b/frontend/src/screens/JobBoard.jsx
index b468588..0c83f08 100644
--- a/frontend/src/screens/JobBoard.jsx
+++ b/frontend/src/screens/JobBoard.jsx
@@ -27,6 +27,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 
 import DataTable from '../ui/DataTable'
+import PageHeader from '../ui/PageHeader'
 import { Badge, EmptyState, Icon, KpiCard } from '../ui/primitives'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -235,11 +236,12 @@ export default function JobBoard() {
               target="_blank"
               rel="noreferrer noopener"
               data-tip="Open live post"
+              aria-label="Open live post"
             >
               <Icon name="external" />
             </a>
           ) : (
-            <button className="act-btn" data-tip="Not published yet" disabled>
+            <button className="act-btn" data-tip="Not published yet" aria-label="Not published yet" disabled>
               <Icon name="external" />
             </button>
           )}
@@ -250,12 +252,10 @@ export default function JobBoard() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Job Board</h1>
-          <p className="page-sub">Where each requisition was published, and whether it landed</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Job Board"
+        sub="Where each requisition was published, and whether it landed"
+        actions={<>
           <Link className="btn btn-secondary" to="/analytics"><Icon name="trending-up" /> Analytics</Link>
           <button
             className="btn btn-primary"
@@ -263,8 +263,8 @@ export default function JobBoard() {
           >
             <Icon name="send" /> Publish a Job
           </button>
-        </div>
-      </div>
+        </>}
+      />
 
       <div className="grid g-kpi mb-18">
         <KpiCard label="Total Posts" value={postsQuery.isPending ? '—' : stats.total} icon="layers" tone="i-indigo" />
@@ -309,12 +309,12 @@ export default function JobBoard() {
                       <span className={`kpi-icn ${d.connected ? 'i-green' : 'i-indigo'}`} style={{ width: 34, height: 34, borderRadius: 9 }}>
                         <Icon name={d.connected ? 'check-circle' : 'layers'} />
                       </span>
-                      <div style={{ minWidth: 0 }}>
-                        <div className="lr-title" style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</div>
+                      <div className="min-w-0">
+                        <div className="lr-title truncate" title={d.name}>{d.name}</div>
                         <div className="lr-sub">{d.service || (d.connected ? 'channel' : 'not connected')}</div>
                       </div>
                     </div>
-                    <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
+                    <div className="flex items-center justify-between">
                       <span className="cell-sub">{d.posts} post{d.posts === 1 ? '' : 's'}</span>
                       <Badge className={d.connected ? 'b-green' : 'b-gray'}>
                         {d.connected ? 'Connected' : 'Available'}
diff --git a/frontend/src/screens/Notifications.jsx b/frontend/src/screens/Notifications.jsx
index b23b45e..927be36 100644
--- a/frontend/src/screens/Notifications.jsx
+++ b/frontend/src/screens/Notifications.jsx
@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
+import PageHeader from '../ui/PageHeader'
 import { EmptyState, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
@@ -50,12 +51,10 @@ export default function Notifications() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Notifications</h1>
-          <p className="page-sub">Stay on top of hiring activity</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Notifications"
+        sub="Stay on top of hiring activity"
+        actions={
           <button
             className="btn btn-secondary"
             disabled={markAll.isPending}
@@ -63,8 +62,8 @@ export default function Notifications() {
           >
             <Icon name="check" /> Mark all read
           </button>
-        </div>
-      </div>
+        }
+      />
 
       <div className="card">
         {query.isPending && (
@@ -107,6 +106,7 @@ export default function Notifications() {
                 <button
                   className="act-btn"
                   data-tip="Dismiss"
+                  aria-label="Dismiss notification"
                   onClick={(e) => {
                     e.stopPropagation()
                     remove.mutate(n.id)
diff --git a/frontend/src/screens/Offers.jsx b/frontend/src/screens/Offers.jsx
index 7261cbe..1127f8b 100644
--- a/frontend/src/screens/Offers.jsx
+++ b/frontend/src/screens/Offers.jsx
@@ -24,6 +24,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
@@ -224,12 +225,13 @@ export default function Offers() {
       key: '_a', label: 'Actions', align: 'right',
       render: (o) => (
         <div className="row-actions">
-          <button className="act-btn" data-tip="View" onClick={() => setViewing(o)}>
+          <button className="act-btn" data-tip="View" aria-label="View offer" onClick={() => setViewing(o)}>
             <Icon name="eye" />
           </button>
           <button
             className="act-btn"
             data-tip={o.status === 'draft' ? 'Send offer' : 'Resend'}
+            aria-label={o.status === 'draft' ? 'Send offer' : 'Resend offer'}
             disabled={busy || ['accepted', 'declined'].includes(o.status)}
             onClick={() => issue.mutate(o.id)}
           >
@@ -242,17 +244,15 @@ export default function Offers() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Offers</h1>
-          <p className="page-sub">Track offer letters and acceptance</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Offers"
+        sub="Track offer letters and acceptance"
+        actions={
           <button className="btn btn-primary" onClick={() => setCreating(true)}>
             <Icon name="plus" /> Create Offer
           </button>
-        </div>
-      </div>
+        }
+      />
 
       <div className="grid g-kpi mb-18">
         <KpiCard label="Offers Sent" value={allQuery.isPending ? '—' : stats.sent} icon="send" tone="i-indigo" />
diff --git a/frontend/src/screens/Pipeline.jsx b/frontend/src/screens/Pipeline.jsx
index ef45fdb..042df19 100644
--- a/frontend/src/screens/Pipeline.jsx
+++ b/frontend/src/screens/Pipeline.jsx
@@ -18,6 +18,7 @@ import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
+import PageHeader from '../ui/PageHeader'
 import { Avatar, EmptyState, Icon, ScoreChip } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
@@ -178,17 +179,15 @@ export default function Pipeline() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Pipeline</h1>
-          <p className="page-sub">
-            {canEdit
-              ? 'Drag candidates between stages to update their status'
-              : 'Read-only — moving a candidate needs the pipeline.edit permission'}
-            {total > candidates.length && ` · showing ${candidates.length} of ${total} applications`}
-          </p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Pipeline"
+        sub={<>
+          {canEdit
+            ? 'Drag candidates between stages to update their status'
+            : 'Read-only — moving a candidate needs the pipeline.edit permission'}
+          {total > candidates.length && ` · showing ${candidates.length} of ${total} applications`}
+        </>}
+        actions={<>
           <select className="select" value={jobId} onChange={(e) => setJobId(e.target.value)}>
             <option value="">All Jobs</option>
             {jobs.map((j) => (
@@ -201,8 +200,8 @@ export default function Pipeline() {
           >
             <Icon name="plus" /> Add Candidate
           </button>
-        </div>
-      </div>
+        </>}
+      />
 
       {board.isError ? (
         <EmptyState title="Could not load the pipeline">
diff --git a/frontend/src/screens/Rbac.jsx b/frontend/src/screens/Rbac.jsx
index 26e483b..492f045 100644
--- a/frontend/src/screens/Rbac.jsx
+++ b/frontend/src/screens/Rbac.jsx
@@ -23,6 +23,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useFormState } from '../components/AuthLayout'
@@ -129,19 +130,15 @@ export default function Rbac() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Access Control</h1>
-          <p className="page-sub">
-            Roles, permission bundles and the {totalTags || '104'}-tag vocabulary, live from the server
-          </p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Access Control"
+        sub={<>Roles, permission bundles and the {totalTags || '104'}-tag vocabulary, live from the server</>}
+        actions={
           <button className="btn btn-primary" onClick={() => setCreating(true)}>
             <Icon name="plus" /> New Role
           </button>
-        </div>
-      </div>
+        }
+      />
 
       {rolesQuery.isPending && (
         <div className="card"><div className="card-body">
diff --git a/frontend/src/screens/RecruiterHub.jsx b/frontend/src/screens/RecruiterHub.jsx
index 8fdb848..523127f 100644
--- a/frontend/src/screens/RecruiterHub.jsx
+++ b/frontend/src/screens/RecruiterHub.jsx
@@ -26,6 +26,7 @@ import { useQuery } from '@tanstack/react-query'
 
 import Chart from '../ui/Chart'
 import Charts from '../lib/charts'
+import PageHeader from '../ui/PageHeader'
 import { Avatar, EmptyState, Icon, KpiCard } from '../ui/primitives'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -188,20 +189,18 @@ export default function RecruiterHub() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Recruiter Hub</h1>
-          <p className="page-sub">Per-recruiter performance, scoped server-side</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Recruiter Hub"
+        sub="Per-recruiter performance, scoped server-side"
+        actions={
           <select className="select" value={selected.id} onChange={(e) => setRecruiterId(e.target.value)}>
             {recruiters.map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}
           </select>
-        </div>
-      </div>
+        }
+      />
 
       <div className="card brand-hero mb-18">
-        <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
+        <div className="card-body flex items-center flex-wrap" style={{ gap: 18 }}>
           <Avatar name={name} initials={initialsOf(name)} color="rgba(255,255,255,.18)" className="avatar-lg" />
           <div style={{ flex: 1, minWidth: 200 }}>
             <div style={{ fontSize: 20, fontWeight: 700 }}>{name}</div>
diff --git a/frontend/src/screens/Reports.jsx b/frontend/src/screens/Reports.jsx
index 9b0aefa..a74ff7d 100644
--- a/frontend/src/screens/Reports.jsx
+++ b/frontend/src/screens/Reports.jsx
@@ -36,6 +36,7 @@ import Chart, { ChartLegend } from '../ui/Chart'
 import Charts from '../lib/charts'
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { EmptyState, Icon, KpiCard, ProgressBar } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
@@ -461,17 +462,15 @@ export default function Reports() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Reports</h1>
-          <p className="page-sub">Recruitment metrics across the selected window</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Reports"
+        sub="Recruitment metrics across the selected window"
+        actions={
           <select className="select" value={rangeKey} onChange={(e) => setRangeKey(e.target.value)}>
             {RANGES.map((r) => <option key={r.key} value={r.key}>{r.label}</option>)}
           </select>
-        </div>
-      </div>
+        }
+      />
 
       {kpisQuery.isError && (
         <div className="card mb-18"><div className="card-body">
diff --git a/frontend/src/screens/Talent.jsx b/frontend/src/screens/Talent.jsx
index 5a51b45..24c389b 100644
--- a/frontend/src/screens/Talent.jsx
+++ b/frontend/src/screens/Talent.jsx
@@ -12,6 +12,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
+import PageHeader from '../ui/PageHeader'
 import { Badge, EmptyState, Icon } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
@@ -186,6 +187,7 @@ function ProfileCard({ p, onView, onDismiss, dismissing }) {
           <a
             className="act-btn"
             data-tip="Open LinkedIn profile"
+            aria-label="Open LinkedIn profile"
             href={p.linkedinUrl}
             target="_blank"
             rel="noreferrer"
@@ -196,6 +198,7 @@ function ProfileCard({ p, onView, onDismiss, dismissing }) {
           <button
             className="act-btn"
             data-tip="View profile"
+            aria-label="View profile"
             onClick={(e) => { e.stopPropagation(); onView(p) }}
           >
             <Icon name="eye" />
@@ -203,6 +206,7 @@ function ProfileCard({ p, onView, onDismiss, dismissing }) {
           <button
             className="act-btn"
             data-tip="Dismiss"
+            aria-label="Dismiss profile"
             disabled={dismissing}
             onClick={(e) => { e.stopPropagation(); onDismiss(p) }}
           >
@@ -440,19 +444,15 @@ export default function Talent() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Find Talent</h1>
-          <p className="page-sub">Source matching LinkedIn profiles for a job via Apify</p>
-        </div>
-        <div className="page-head-actions">
-          <span className="integration-status pending"><span className="pulse" />LinkedIn Sourcing · Live</span>
-        </div>
-      </div>
+      <PageHeader
+        title="Find Talent"
+        sub="Source matching LinkedIn profiles for a job via Apify"
+        actions={<span className="integration-status pending"><span className="pulse" />LinkedIn Sourcing · Live</span>}
+      />
 
       <div className="card mb-18">
         <div className="card-body">
-          <div className="flex items-center gap-8" style={{ flexWrap: 'wrap' }}>
+          <div className="flex items-center gap-8 flex-wrap">
             <select
               className="select"
               style={{ flex: 1, minWidth: 180 }}
diff --git a/frontend/src/screens/TalentPool.jsx b/frontend/src/screens/TalentPool.jsx
index 16593a6..8075d31 100644
--- a/frontend/src/screens/TalentPool.jsx
+++ b/frontend/src/screens/TalentPool.jsx
@@ -34,6 +34,7 @@ import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 
+import PageHeader from '../ui/PageHeader'
 import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import CandidateProfile from './CandidateProfile'
@@ -200,17 +201,15 @@ export default function TalentPool() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Talent Pool</h1>
-          <p className="page-sub">{pool.length} silver-medalists &amp; passive candidates to re-engage</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Talent Pool"
+        sub={<>{pool.length} silver-medalists &amp; passive candidates to re-engage</>}
+        actions={
           <button className="btn btn-primary" onClick={() => toast('Talent campaign created', 'success')}>
             <Icon name="send" /> Start Campaign
           </button>
-        </div>
-      </div>
+        }
+      />
 
       <div className="card mb-18">
         <div className="card-body" style={{ padding: 16 }}>
diff --git a/frontend/src/screens/Tasks.jsx b/frontend/src/screens/Tasks.jsx
index ff4c488..bec4f1b 100644
--- a/frontend/src/screens/Tasks.jsx
+++ b/frontend/src/screens/Tasks.jsx
@@ -17,7 +17,8 @@ import { useNavigate } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
-import { Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
+import PageHeader from '../ui/PageHeader'
+import { Badge, EmptyState, FieldError, Icon, PRIORITY_CLASS } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
 import { useFormState } from '../components/AuthLayout'
@@ -28,7 +29,6 @@ import * as savedSearchesApi from '../api/savedSearches'
 import { fmtDate, fmtShort } from '../data/seed'
 
 const FILTERS = ['All', 'Open', 'Completed', 'Overdue', 'High', 'Medium', 'Low']
-const PRIORITY_CLASS = { High: 'b-red', Medium: 'b-amber', Low: 'b-gray' }
 // Mirrors backend/tasks/views.py CREATOR_ROLES — the server is the enforcer,
 // this only keeps the button honest.
 const CREATOR_ROLES = ['system_administrator', 'hr_administrator', 'recruiter']
@@ -156,12 +156,10 @@ export default function Tasks() {
 
   return (
     <div className="page">
-      <div className="page-head">
-        <div>
-          <h1 className="page-title">Tasks</h1>
-          <p className="page-sub">{openCount} open · {overdueCount} overdue</p>
-        </div>
-        <div className="page-head-actions">
+      <PageHeader
+        title="Tasks"
+        sub={`${openCount} open · ${overdueCount} overdue`}
+        actions={
           <button
             className="btn btn-primary"
             disabled={!canCreate}
@@ -170,8 +168,8 @@ export default function Tasks() {
           >
             <Icon name="plus" /> New Task
           </button>
-        </div>
-      </div>
+        }
+      />
 
       <div className="grid g-2-1">
         <div className="card">
@@ -241,7 +239,7 @@ export default function Tasks() {
         <div className="card" style={{ alignSelf: 'start' }}>
           <div className="card-head">
             <div><h3>Saved Searches</h3><span className="ch-sub">Quick candidate filters</span></div>
-            <button className="act-btn" onClick={() => setAddingSearch(true)}><Icon name="plus" /></button>
+            <button className="act-btn" aria-label="Add saved search" data-tip="Add saved search" onClick={() => setAddingSearch(true)}><Icon name="plus" /></button>
           </div>
           <div className="card-body">
             {savedQuery.isPending && <EmptyState icon="bookmark" title="Loading…">Fetching saved searches.</EmptyState>}
@@ -277,6 +275,7 @@ export default function Tasks() {
                     <button
                       className="act-btn"
                       data-tip="Delete"
+                      aria-label="Delete saved search"
                       onClick={(e) => {
                         e.stopPropagation()
                         deleteSearch.mutate(s.id)

From c4793479a28fae2d129e613830f4a68602e129b5 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:53:08 +0500
Subject: [PATCH 07/22] ui-polish 5/6: a11y semantics and remaining labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- All 28 <div className="form-section-title"> section markers are real
  <h3> headings now — the class carries every visual property, so this
  is semantics-only, zero visual change.
- Remaining icon-only .act-btn buttons labeled: CandidateProfile
  (download/edit note/revise scorecard, incl. one that had neither
  tooltip nor label), CandidateForms amend button.
- PasswordField show/hide toggle is keyboard-reachable (tabIndex -1
  removed) with aria-pressed state.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/components/PasswordField.jsx |  2 +-
 frontend/src/screens/AiStudio.jsx         |  2 +-
 frontend/src/screens/Assessments.jsx      |  2 +-
 frontend/src/screens/CandidateForms.jsx   |  2 +-
 frontend/src/screens/CandidateProfile.jsx | 19 ++++++++++---------
 frontend/src/screens/Candidates.jsx       | 18 +++++++++---------
 frontend/src/screens/JobCandidates.jsx    | 12 ++++++------
 frontend/src/screens/Managers.jsx         |  4 ++--
 frontend/src/screens/Offers.jsx           |  2 +-
 frontend/src/screens/Rbac.jsx             |  4 ++--
 frontend/src/screens/Settings.jsx         |  6 +++---
 frontend/src/screens/Talent.jsx           |  8 ++++----
 12 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/PasswordField.jsx b/frontend/src/components/PasswordField.jsx
index e94b72f..2a69218 100644
--- a/frontend/src/components/PasswordField.jsx
+++ b/frontend/src/components/PasswordField.jsx
@@ -35,7 +35,7 @@ export default function PasswordField({
           className="pw-toggle"
           onClick={() => setVisible((v) => !v)}
           aria-label={visible ? 'Hide password' : 'Show password'}
-          tabIndex={-1}
+          aria-pressed={visible}
         >
           {visible ? (
             <svg viewBox="0 0 24 24" aria-hidden="true">
diff --git a/frontend/src/screens/AiStudio.jsx b/frontend/src/screens/AiStudio.jsx
index 586d637..c24dc54 100644
--- a/frontend/src/screens/AiStudio.jsx
+++ b/frontend/src/screens/AiStudio.jsx
@@ -75,7 +75,7 @@ export default function AiStudio() {
           </div>
           <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)' }}>
             <div className="card-body">
-              <div className="form-section-title" style={{ marginTop: 0 }}>API Contract (preview)</div>
+              <h3 className="form-section-title" style={{ marginTop: 0 }}>API Contract (preview)</h3>
               <pre className="resume-thumb" style={{ maxHeight: 'none' }}>
 {`POST /api/ai/${detail.name.toLowerCase().replace(/ /g, '-')}
 {
diff --git a/frontend/src/screens/Assessments.jsx b/frontend/src/screens/Assessments.jsx
index e9e54ec..0781205 100644
--- a/frontend/src/screens/Assessments.jsx
+++ b/frontend/src/screens/Assessments.jsx
@@ -308,7 +308,7 @@ export default function Assessments() {
               <div className="mb-18"><ProgressBar pct={viewing.score} /></div>
               {viewing.sectionScores.length > 0 && (
                 <>
-                  <div className="form-section-title" style={{ marginTop: 0 }}>Section Breakdown</div>
+                  <h3 className="form-section-title" style={{ marginTop: 0 }}>Section Breakdown</h3>
                   {viewing.sectionScores.map((s) => (
                     <div className="flex items-center gap-12" style={{ marginBottom: 10 }} key={s.label}>
                       <span style={{ width: 130, fontSize: 13 }}>{s.label}</span>
diff --git a/frontend/src/screens/CandidateForms.jsx b/frontend/src/screens/CandidateForms.jsx
index 4547a28..2913a02 100644
--- a/frontend/src/screens/CandidateForms.jsx
+++ b/frontend/src/screens/CandidateForms.jsx
@@ -278,7 +278,7 @@ function FormRowList({ rows, defs, onEdit, canEdit }) {
               </Badge>
             )}
             {canEdit && (
-              <button className="act-btn" data-tip="Amend this form" onClick={() => onEdit(r)}>
+              <button className="act-btn" data-tip="Amend this form" aria-label="Amend this form" onClick={() => onEdit(r)}>
                 <Icon name="edit" />
               </button>
             )}
diff --git a/frontend/src/screens/CandidateProfile.jsx b/frontend/src/screens/CandidateProfile.jsx
index eda0b42..4a379d9 100644
--- a/frontend/src/screens/CandidateProfile.jsx
+++ b/frontend/src/screens/CandidateProfile.jsx
@@ -413,13 +413,13 @@ export default function CandidateProfile({
                 <h3 style={{ marginBottom: 4 }}>{c.name}</h3>
                 <p className="text-muted">{c.currentTitle} · {c.location}</p>
                 <div className="divider" />
-                <div className="form-section-title" style={{ marginTop: 0 }}>Summary</div>
+                <h3 className="form-section-title" style={{ marginTop: 0 }}>Summary</h3>
                 <p className="text-muted">
                   Results-driven {c.currentTitle.toLowerCase()} with {c.experience} years of experience
                   across {c.department.toLowerCase()}. Passionate about building high-quality products
                   and collaborating with cross-functional teams.
                 </p>
-                <div className="form-section-title">Experience</div>
+                <h3 className="form-section-title">Experience</h3>
                 <div className="info-item">
                   <div className="iv">{c.currentTitle} — {c.currentCompany}</div>
                   <div className="il" style={{ textTransform: 'none' }}>2021 – Present</div>
@@ -428,7 +428,7 @@ export default function CandidateProfile({
                   <div className="iv">Associate — {priorCompany}</div>
                   <div className="il" style={{ textTransform: 'none' }}>2018 – 2021</div>
                 </div>
-                <div className="form-section-title">Education</div>
+                <h3 className="form-section-title">Education</h3>
                 <div className="iv">{c.education}</div>
               </div>
             </div>
@@ -572,7 +572,7 @@ export default function CandidateProfile({
                   <Icon name="file" />
                 </span>
                 <div className="lr-main"><div className="lr-title">{d.n}</div><div className="lr-sub">{d.s}</div></div>
-                <button className="act-btn" onClick={() => toast(`Downloading ${d.n}`, 'info')}>
+                <button className="act-btn" data-tip="Download" aria-label={`Download ${d.n}`} onClick={() => toast(`Downloading ${d.n}`, 'info')}>
                   <Icon name="download" />
                 </button>
               </div>
@@ -921,7 +921,7 @@ function InterviewTab({ userId, inboxId, rows }) {
       )}
 
       <div className="divider" />
-      <div className="form-section-title" style={{ marginTop: 0 }}>Schedule an interview</div>
+      <h3 className="form-section-title" style={{ marginTop: 0 }}>Schedule an interview</h3>
       <div className="form-grid">
         <div className="form-field">
           <label>Type</label>
@@ -1065,7 +1065,7 @@ function NoteRow({ note: n, userId }) {
       </div>
       {mine && (
         <div className="lr-right">
-          <button className="act-btn" data-tip="Edit note" onClick={() => setEditing(true)}>
+          <button className="act-btn" data-tip="Edit note" aria-label="Edit note" onClick={() => setEditing(true)}>
             <Icon name="edit" />
           </button>
         </div>
@@ -1124,7 +1124,7 @@ function ActivityTab({ userId, inboxId, rows }) {
       )}
 
       <div className="divider" />
-      <div className="form-section-title" style={{ marginTop: 0 }}>Log activity</div>
+      <h3 className="form-section-title" style={{ marginTop: 0 }}>Log activity</h3>
       <div className="form-grid">
         <div className="form-field">
           <label>Type</label>
@@ -1188,6 +1188,7 @@ function DocumentsTab({ rows, inboxId }) {
             className="act-btn"
             disabled={!inboxId || download.isPending}
             title={!inboxId ? 'No application id for download' : 'Download'}
+            aria-label={`Download ${d.name}`}
             onClick={() => download.mutate({ index: i, filename: d.name })}
           >
             <Icon name="download" />
@@ -1301,7 +1302,7 @@ function FeedbackRow({ row: f, userId }) {
       <div className="lr-right" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
         {f.review ? <Badge>{f.review}</Badge> : null}
         {mine && (
-          <button className="act-btn" data-tip="Revise scorecard" onClick={() => setEditing(true)}>
+          <button className="act-btn" data-tip="Revise scorecard" aria-label="Revise scorecard" onClick={() => setEditing(true)}>
             <Icon name="edit" />
           </button>
         )}
@@ -1347,7 +1348,7 @@ function FeedbackTab({ userId, inboxId, rows }) {
       )}
 
       <div className="divider" />
-      <div className="form-section-title" style={{ marginTop: 0 }}>Submit a scorecard</div>
+      <h3 className="form-section-title" style={{ marginTop: 0 }}>Submit a scorecard</h3>
       <div className="form-grid">
         <div className="form-field">
           <label>Recommendation</label>
diff --git a/frontend/src/screens/Candidates.jsx b/frontend/src/screens/Candidates.jsx
index 329711c..5d4f074 100644
--- a/frontend/src/screens/Candidates.jsx
+++ b/frontend/src/screens/Candidates.jsx
@@ -560,7 +560,7 @@ export function AtsMatch({ candidate: c, jobTitle, onClose, onProfile }) {
             </div>
           </div>
           <div>
-            <div className="form-section-title" style={{ marginTop: 0 }}>Assessment</div>
+            <h3 className="form-section-title" style={{ marginTop: 0 }}>Assessment</h3>
             <p className="text-muted" style={{ fontSize: 13 }}>{critique ?? '—'}</p>
           </div>
         </div>
@@ -570,9 +570,9 @@ export function AtsMatch({ candidate: c, jobTitle, onClose, onProfile }) {
           <div className="info-item"><div className="il">Scored On</div><div className="iv">{scoredOn ?? '—'}</div></div>
         </div>
 
-        <div className="form-section-title" style={{ marginTop: 0 }}>
+        <h3 className="form-section-title" style={{ marginTop: 0 }}>
           Matched Skills ({matched.length})
-        </div>
+        </h3>
         <div className="k-tags" style={{ marginBottom: 16 }}>
           {matched.length
             ? matched.map((s) => (
@@ -581,9 +581,9 @@ export function AtsMatch({ candidate: c, jobTitle, onClose, onProfile }) {
             : <span className="text-muted">—</span>}
         </div>
 
-        <div className="form-section-title" style={{ marginTop: 0 }}>
+        <h3 className="form-section-title" style={{ marginTop: 0 }}>
           Missing Skills ({missing.length})
-        </div>
+        </h3>
         <div className="k-tags">
           {missing.length
             ? missing.map((s) => (
@@ -844,9 +844,9 @@ function AddCandidate({ onClose, onSave, onInvalid }) {
         {/* Role selection sits directly above the CV because it is what the CV
             gets scored against — same card UI as Job Matching's role list.
             (.req is scoped to `.form-field label .req`, so tint it here.) */}
-        <div className="form-section-title">
+        <h3 className="form-section-title">
           Applied Job <span className="req" style={{ color: 'var(--danger)' }}>*</span>
-        </div>
+        </h3>
         {posts.length > 0 && (
           <div className="toolbar-search" style={{ maxWidth: 'none', marginBottom: 10 }}>
             <Icon name="search" />
@@ -892,9 +892,9 @@ function AddCandidate({ onClose, onSave, onInvalid }) {
         )}
         <FieldError>{form.errors.job}</FieldError>
 
-        <div className="form-section-title">
+        <h3 className="form-section-title">
           CV / Resume <span className="req" style={{ color: 'var(--danger)' }}>*</span>
-        </div>
+        </h3>
         <input
           ref={fileInput}
           type="file"
diff --git a/frontend/src/screens/JobCandidates.jsx b/frontend/src/screens/JobCandidates.jsx
index 51c2320..95e6364 100644
--- a/frontend/src/screens/JobCandidates.jsx
+++ b/frontend/src/screens/JobCandidates.jsx
@@ -181,7 +181,7 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
             </div>
             {completed ? (
               <>
-                <div className="form-section-title" style={{ marginTop: 0 }}>AI Assessment</div>
+                <h3 className="form-section-title" style={{ marginTop: 0 }}>AI Assessment</h3>
                 <p className="text-muted">{c.critique ?? '—'}</p>
               </>
             ) : (
@@ -194,7 +194,7 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
 
         {tab === 'Job Match' && completed && (
           <>
-            <div className="form-section-title" style={{ marginTop: 0 }}>Job-Match Score</div>
+            <h3 className="form-section-title" style={{ marginTop: 0 }}>Job-Match Score</h3>
             <p className="text-muted text-sm mb-12">
               Match this candidate against the job the CV was scored for.
             </p>
@@ -209,9 +209,9 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
               </div>
             </div>
 
-            <div className="form-section-title" style={{ marginTop: 0 }}>
+            <h3 className="form-section-title" style={{ marginTop: 0 }}>
               Matched must-have skills ({c.matchedSkills.length})
-            </div>
+            </h3>
             <div className="k-tags mb-16">
               {c.matchedSkills.length
                 ? c.matchedSkills.map((s) => (
@@ -220,9 +220,9 @@ export function ScoredCandidateDetail({ candidate: c, jobTitle, onClose }) {
                 : <span className="text-muted">—</span>}
             </div>
 
-            <div className="form-section-title" style={{ marginTop: 0 }}>
+            <h3 className="form-section-title" style={{ marginTop: 0 }}>
               Missing must-have skills ({c.missingSkills.length})
-            </div>
+            </h3>
             <div className="k-tags mb-16">
               {c.missingSkills.length
                 ? c.missingSkills.map((s) => (
diff --git a/frontend/src/screens/Managers.jsx b/frontend/src/screens/Managers.jsx
index 06b5cd6..7f87def 100644
--- a/frontend/src/screens/Managers.jsx
+++ b/frontend/src/screens/Managers.jsx
@@ -203,7 +203,7 @@ function ManagerDetail({ manager: m, jobs, canSend, onClose, navigate, toast })
             </div>
           </div>
 
-          <div className="form-section-title" style={{ marginTop: 0 }}>Hiring Manager Portal</div>
+          <h3 className="form-section-title" style={{ marginTop: 0 }}>Hiring Manager Portal</h3>
           <div className="grid g-2" style={{ gap: 10, marginBottom: 16 }}>
             <button className="btn btn-secondary" onClick={() => go('/jobs', { openCreate: true })}>
               <Icon name="plus" /> Raise Requisition
@@ -219,7 +219,7 @@ function ManagerDetail({ manager: m, jobs, canSend, onClose, navigate, toast })
             </button>
           </div>
 
-          <div className="form-section-title">Open requisitions</div>
+          <h3 className="form-section-title">Open requisitions</h3>
           <p className="text-muted text-sm" style={{ marginBottom: 10 }}>
             Jobs are not linked to a hiring-manager id yet, so this list is the current open requisitions rather than this manager&apos;s own.
           </p>
diff --git a/frontend/src/screens/Offers.jsx b/frontend/src/screens/Offers.jsx
index 1127f8b..f3f4e5e 100644
--- a/frontend/src/screens/Offers.jsx
+++ b/frontend/src/screens/Offers.jsx
@@ -370,7 +370,7 @@ function OfferDetail({ offer: o, busy, onClose, onIssue, onStatus }) {
 
       <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)', marginBottom: 18 }}>
         <div className="card-body">
-          <div className="form-section-title" style={{ marginTop: 0 }}>Compensation Package</div>
+          <h3 className="form-section-title" style={{ marginTop: 0 }}>Compensation Package</h3>
           <div className="info-grid">
             <div className="info-item">
               <div className="il">Base Salary</div>
diff --git a/frontend/src/screens/Rbac.jsx b/frontend/src/screens/Rbac.jsx
index 492f045..ecbe1b0 100644
--- a/frontend/src/screens/Rbac.jsx
+++ b/frontend/src/screens/Rbac.jsx
@@ -436,12 +436,12 @@ function RoleForm({ title, subtitle, role, bundles, bundlesLoading, busy, onClos
           </label>
         </div>
 
-        <div className="form-section-title">
+        <h3 className="form-section-title">
           Permission bundles
           <span className="text-muted text-sm" style={{ marginLeft: 8, fontWeight: 400 }}>
             {picked.size} selected · {grantedTags.size} tags resolved
           </span>
-        </div>
+        </h3>
 
         {bundlesLoading && <p className="text-muted">Loading bundles…</p>}
         {!bundlesLoading && bundles.length === 0 && (
diff --git a/frontend/src/screens/Settings.jsx b/frontend/src/screens/Settings.jsx
index 2fd2492..52ad7d5 100644
--- a/frontend/src/screens/Settings.jsx
+++ b/frontend/src/screens/Settings.jsx
@@ -815,12 +815,12 @@ function Notifications({ registerSave }) {
   return (
     <div className="card">
       <div className="card-body">
-        <div className="form-section-title" style={{ marginTop: 0 }}>Email Notifications</div>
+        <h3 className="form-section-title" style={{ marginTop: 0 }}>Email Notifications</h3>
         <ToggleRow title="New applications" desc="Get notified when a candidate applies" checked={draft['notifications.email_new_applications']} onChange={(v) => setField('notifications.email_new_applications', v)} />
         <ToggleRow title="Interview reminders" desc="Reminders 30 minutes before interviews" checked={draft['notifications.email_interview_reminders']} onChange={(v) => setField('notifications.email_interview_reminders', v)} />
         <ToggleRow title="Offer responses" desc="When candidates accept or decline offers" checked={draft['notifications.email_offer_responses']} onChange={(v) => setField('notifications.email_offer_responses', v)} />
         <ToggleRow title="Weekly digest" desc="A summary of hiring activity every Monday" checked={draft['notifications.email_weekly_digest']} onChange={(v) => setField('notifications.email_weekly_digest', v)} />
-        <div className="form-section-title">In-App Notifications</div>
+        <h3 className="form-section-title">In-App Notifications</h3>
         <ToggleRow title="Mentions" desc="When a teammate @mentions you" checked={draft['notifications.inapp_mentions']} onChange={(v) => setField('notifications.inapp_mentions', v)} />
         <ToggleRow title="Stage changes" desc="When a candidate moves stages" checked={draft['notifications.inapp_stage_changes']} onChange={(v) => setField('notifications.inapp_stage_changes', v)} />
         <ToggleRow title="Task assignments" desc="When you are assigned a task" checked={draft['notifications.inapp_task_assignments']} onChange={(v) => setField('notifications.inapp_task_assignments', v)} />
@@ -1040,7 +1040,7 @@ function Appearance() {
   return (
     <div className="card">
       <div className="card-body">
-        <div className="form-section-title" style={{ marginTop: 0 }}>Theme</div>
+        <h3 className="form-section-title" style={{ marginTop: 0 }}>Theme</h3>
         <div className="grid g-3" style={{ marginBottom: 8 }}>
           <div className="card theme-opt" style={{ cursor: 'pointer', overflow: 'hidden' }} onClick={() => pick('light')}>
             <div style={{ height: 80, background: '#f1f7f4', borderBottom: '1px solid var(--border)', display: 'flex' }}>
diff --git a/frontend/src/screens/Talent.jsx b/frontend/src/screens/Talent.jsx
index 24c389b..204e41c 100644
--- a/frontend/src/screens/Talent.jsx
+++ b/frontend/src/screens/Talent.jsx
@@ -271,14 +271,14 @@ function TalentProfileDetail({ profileId, onClose }) {
 
           {p.summary && (
             <>
-              <div className="form-section-title">About</div>
+              <h3 className="form-section-title">About</h3>
               <p className="text-muted" style={{ whiteSpace: 'pre-line' }}>{p.summary}</p>
             </>
           )}
 
           {p.skills.length > 0 && (
             <>
-              <div className="form-section-title">Skills ({p.skills.length})</div>
+              <h3 className="form-section-title">Skills ({p.skills.length})</h3>
               <div className="k-tags" style={{ marginBottom: 16 }}>
                 {p.skills.map((s) => <span className="tag" key={s}>{s}</span>)}
               </div>
@@ -287,7 +287,7 @@ function TalentProfileDetail({ profileId, onClose }) {
 
           {p.experience.length > 0 && (
             <>
-              <div className="form-section-title">Experience ({p.experience.length})</div>
+              <h3 className="form-section-title">Experience ({p.experience.length})</h3>
               {p.experience.map((e, i) => (
                 <div key={i} style={{ marginBottom: 14 }}>
                   <div className="fw-600">
@@ -311,7 +311,7 @@ function TalentProfileDetail({ profileId, onClose }) {
 
           {p.education.length > 0 && (
             <>
-              <div className="form-section-title">Education ({p.education.length})</div>
+              <h3 className="form-section-title">Education ({p.education.length})</h3>
               {p.education.map((e, i) => (
                 <div key={i} style={{ marginBottom: 12 }}>
                   <div className="fw-600">{e.school ?? '—'}</div>

From 967c1acc5cea55845d385196749769451fe0f3b0 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:55:00 +0500
Subject: [PATCH 08/22] ui-polish 6/6: responsive consolidation

- .g-3 grids step 3 -> 2 columns at 1200px and 2 -> 1 at 900px; they
  used to jump straight to one column, wasting the whole 900-1200 band
  (Managers cards, Help topics, JobBoard destinations).
- The four scattered trailing @media 640px fragments (Dashboard v2
  grid, candidate page, hiring forms) merged into ONE labeled block at
  the end of the file, positioned after every base rule; the paired
  400px override moves with it so small-phone rules still win. The
  core shell 640 block stays put so the landscape-phone height rules
  keep their existing precedence.
- Every breakpoint labeled; responsive section header updated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/styles/styles.css | 51 ++++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 5f6d99c..3bdca50 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1295,9 +1295,11 @@ canvas { width: 100%; max-width: 100%; display: block; }
 
 /* ============================================================
    RESPONSIVE
-   ≥1600 ultrawide · 1200 laptop · 980 tablet-landscape
-   900 tablet-portrait (sidebar goes off-canvas) · 640 phone
-   400 small phone · plus a landscape-phone height rule
+   1200 laptop · 980 tablet-landscape · 900 tablet-portrait (sidebar
+   goes off-canvas) · 640 phone · 400 small phone · plus a
+   landscape-phone height rule. Late bolt-on sections (Dashboard v2,
+   hiring forms) keep their 1400/1200/860 steps next to their base
+   rules and share ONE consolidated 640/400 block at the end of file.
    ============================================================ */
 
 /* Cap the measure on every desktop, not only ultrawide — between 900 and
@@ -1305,12 +1307,15 @@ canvas { width: 100%; max-width: 100%; display: block; }
    agrees with .cand-page's own 1440px cap. */
 .content > .page { max-width: 1440px; margin-inline: auto; }
 
+/* ≤1200 — laptop. .g-3 steps 3→2 here and 2→1 at 900; it used to jump
+   straight to one column, wasting the whole 900–1200 band. */
 @media (max-width: 1200px) {
   .g-kpi { grid-template-columns: repeat(2, 1fr); }
-  .g-3 { grid-template-columns: 1fr; }
+  .g-3 { grid-template-columns: repeat(2, 1fr); }
   .g-2-1, .g-1-2, .g-2 { grid-template-columns: 1fr; }
   .filter-panel { grid-template-columns: repeat(3, 1fr); }
 }
+/* ≤980 — tablet landscape */
 @media (max-width: 980px) {
   .split { grid-template-columns: 1fr; }
   .split-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 380px; }
@@ -1318,7 +1323,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .filter-panel { grid-template-columns: repeat(2, 1fr); }
   .rbac-matrix { min-width: 620px; }          /* scrolls inside .table-wrap */
 }
+/* ≤900 — tablet portrait: the sidebar goes off-canvas */
 @media (max-width: 900px) {
+  .g-3 { grid-template-columns: 1fr; }
   .sidebar {
     /* above the scrim (55) but below the AI dock (310) and modals (300),
        so an open drawer never sits on top of a dialog. */
@@ -1336,6 +1343,8 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
   .chat-wrap { height: calc(100vh - 170px); height: calc(100dvh - 170px); }
 }
+/* ≤640 — phone (core shell + components; late-section 640 rules live in the
+   consolidated block at the end of the file, after their base rules) */
 @media (max-width: 640px) {
   .g-kpi { grid-template-columns: 1fr; }
   .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; }
@@ -1487,9 +1496,6 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .g-kpi-7 { grid-template-columns: repeat(2, 1fr); }
   .pipe-split { grid-template-columns: 1fr; }
 }
-@media (max-width: 640px) {
-  .g-kpi-7 { grid-template-columns: 1fr; }
-}
 
 /* ============================================================
    Hiring forms — the candidate profile Forms tab (CandidateForms.jsx).
@@ -1561,26 +1567,29 @@ canvas { width: 100%; max-width: 100%; display: block; }
 /* The four-form switcher must wrap rather than overflow on narrow screens. */
 .cand-page .seg { flex-wrap: wrap; }
 
+/* Rating-table scale header: full words down to 640px, bare numbers below. */
+.hf-scale-short { display: none; }
+
+/* Empty-state CTA on the hiring forms: full-size, and full-width on phones. */
+.hf-cta { padding: 11px 26px; font-size: 14.5px; }
+
+/* ============================================================
+   ≤640 / ≤400 — consolidated phone rules for the late bolt-on sections
+   (Dashboard v2 grid, candidate page, hiring forms). Kept in ONE block
+   at the end of the file so they always follow their base rules; the
+   core shell's 640 rules live in the RESPONSIVE section above.
+   ============================================================ */
 @media (max-width: 640px) {
+  .g-kpi-7 { grid-template-columns: 1fr; }
   .cand-page-actions { width: 100%; }
   .cand-page-actions .btn { flex: 1 1 auto; justify-content: center; }
   .hf-sign-grid { grid-template-columns: 1fr; }
   .hf-summary { grid-template-columns: repeat(2, 1fr); }
+  .hf-scale-full { display: none; }
+  .hf-scale-short { display: inline; font-size: var(--fs-xs); }
+  .hf-rate-head, .hf-rate-row, .hf-rate-foot { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); }
+  .hf-cta { width: 100%; max-width: 420px; justify-content: center; }
 }
 @media (max-width: 400px) {
   .hf-summary { grid-template-columns: 1fr; }
 }
-
-/* Rating-table scale header: full words down to 640px, bare numbers below. */
-.hf-scale-short { display: none; }
-@media (max-width: 640px) {
-  .hf-scale-full { display: none; }
-  .hf-scale-short { display: inline; font-size: 12px; }
-  .hf-rate-head, .hf-rate-row, .hf-rate-foot { grid-template-columns: minmax(0, 1fr) repeat(4, 44px); }
-}
-
-/* Empty-state CTA on the hiring forms: full-size, and full-width on phones. */
-.hf-cta { padding: 11px 26px; font-size: 14.5px; }
-@media (max-width: 640px) {
-  .hf-cta { width: 100%; max-width: 420px; justify-content: center; }
-}

From 066346af803cde4f418796b6da7a4f495af5a8bb Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 21:58:34 +0500
Subject: [PATCH 09/22] =?UTF-8?q?ui-polish=207:=20hardening=20pass=20?=
 =?UTF-8?q?=E2=80=94=20skeletons,=20ErrorBoundary,=20auth=20font=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Skeleton loading system: .skeleton shimmer primitives in CSS (theme-
  aware via --border) plus a SkeletonRows component, adopted at the
  main-content loading states of Jobs, Candidates, Inbox, Interviews,
  Offers, Assessments, Tasks, Managers, Notifications. Small card-level
  loading states keep their EmptyState text.
- ErrorBoundary around the route outlet, keyed by pathname: a throw in
  one lazy screen shows a recoverable error state instead of blanking
  the whole app; navigating away resets it.
- auth.css stops hardcoding the Belleza stack twice; both sites use
  var(--font-display) so the display face has one definition.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/app/AppLayout.jsx            | 10 ++++--
 frontend/src/components/ErrorBoundary.jsx | 39 +++++++++++++++++++++++
 frontend/src/screens/Assessments.jsx      |  4 +--
 frontend/src/screens/Candidates.jsx       |  4 +--
 frontend/src/screens/Inbox.jsx            |  4 +--
 frontend/src/screens/Interviews.jsx       |  4 +--
 frontend/src/screens/Jobs.jsx             |  4 +--
 frontend/src/screens/Managers.jsx         |  4 +--
 frontend/src/screens/Notifications.jsx    |  4 +--
 frontend/src/screens/Offers.jsx           |  4 +--
 frontend/src/screens/Tasks.jsx            |  4 +--
 frontend/src/styles/auth.css              |  4 +--
 frontend/src/styles/styles.css            | 18 +++++++++++
 frontend/src/ui/primitives.jsx            | 17 ++++++++++
 14 files changed, 101 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/ErrorBoundary.jsx

diff --git a/frontend/src/app/AppLayout.jsx b/frontend/src/app/AppLayout.jsx
index 22d4d3a..13ba098 100644
--- a/frontend/src/app/AppLayout.jsx
+++ b/frontend/src/app/AppLayout.jsx
@@ -7,6 +7,7 @@ import AiDock from './AiDock'
 import { ROUTE_BY_PATH } from './routes'
 import { useBadges, useHotkeys, useNavOpen, useRouteMeta, useSidebarCollapsed } from './useShell'
 import Icon from '../ui/icons'
+import ErrorBoundary from '../components/ErrorBoundary'
 import Spinner from '../components/Spinner'
 
 export default function AppLayout() {
@@ -49,9 +50,12 @@ export default function AppLayout() {
       <div className="main-wrap">
         <Topbar onOpenNav={() => setNavOpen((o) => !o)} searchRef={searchRef} />
         <main className="content" id="main-content" ref={contentRef}>
-          <Suspense fallback={<div className="route-loading"><Spinner label="Loading" /></div>}>
-            <Outlet />
-          </Suspense>
+          {/* Keyed by pathname: navigating away from a crashed screen resets it. */}
+          <ErrorBoundary key={location.pathname}>
+            <Suspense fallback={<div className="route-loading"><Spinner label="Loading" /></div>}>
+              <Outlet />
+            </Suspense>
+          </ErrorBoundary>
         </main>
       </div>
 
diff --git a/frontend/src/components/ErrorBoundary.jsx b/frontend/src/components/ErrorBoundary.jsx
new file mode 100644
index 0000000..226b5b5
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.jsx
@@ -0,0 +1,39 @@
+/* ============================================================
+   ErrorBoundary — a throw in any lazy screen used to blank the whole app.
+   Mounted around the route outlet in AppLayout, keyed by pathname so simply
+   navigating away resets it.
+   ============================================================ */
+
+import { Component } from 'react'
+import { EmptyState } from '../ui/primitives'
+
+export default class ErrorBoundary extends Component {
+  state = { error: null }
+
+  static getDerivedStateFromError(error) {
+    return { error }
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Screen crashed:', error, info?.componentStack)
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="page">
+          <EmptyState icon="alert" title="Something went wrong">
+            This screen hit an unexpected error. The rest of the app is fine —
+            try again, or head back to the dashboard.
+          </EmptyState>
+          <div style={{ textAlign: 'center' }}>
+            <button className="btn btn-secondary" onClick={() => this.setState({ error: null })}>
+              Try again
+            </button>
+          </div>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
diff --git a/frontend/src/screens/Assessments.jsx b/frontend/src/screens/Assessments.jsx
index 0781205..12e161a 100644
--- a/frontend/src/screens/Assessments.jsx
+++ b/frontend/src/screens/Assessments.jsx
@@ -14,7 +14,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
-import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, ProgressBar, ScoreChip } from '../ui/primitives'
+import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, ProgressBar, ScoreChip, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
 import { useFormState } from '../components/AuthLayout'
@@ -212,7 +212,7 @@ export default function Assessments() {
       <div className="card">
         {listQuery.isPending && (
           <div className="card-body">
-            <EmptyState icon="check-square" title="Loading…">Fetching assessments from the server.</EmptyState>
+            <SkeletonRows rows={6} />
           </div>
         )}
         {listQuery.isError && (
diff --git a/frontend/src/screens/Candidates.jsx b/frontend/src/screens/Candidates.jsx
index 5d4f074..caa1d6a 100644
--- a/frontend/src/screens/Candidates.jsx
+++ b/frontend/src/screens/Candidates.jsx
@@ -16,7 +16,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import Modal from '../ui/Modal'
 import { DataTableHead, Pagination, useDataTable } from '../ui/DataTable'
 import PageHeader from '../ui/PageHeader'
-import { Avatar, Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
+import { Avatar, Badge, EmptyState, FieldError, Icon, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import CandidateProfile from './CandidateProfile'
 import { useJobTitles } from './ScoredCandidateProfile'
@@ -324,7 +324,7 @@ export default function Candidates() {
 
         {candidatesQuery.isPending && (
           <div className="card-body">
-            <EmptyState icon="users" title="Loading…">Fetching candidates from the server.</EmptyState>
+            <SkeletonRows rows={6} />
           </div>
         )}
         {candidatesQuery.isError && (
diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index a506f9f..b550837 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -12,7 +12,7 @@ import EmailBody, { looksLikeHtml } from '../ui/EmailBody'
 import PageHeader from '../ui/PageHeader'
 import { Tabs } from '../ui/Tabs'
 import { Pagination, pageWindow } from '../ui/DataTable'
-import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
+import { Avatar, Badge, EmptyState, Icon, ScoreChip, SkeletonRows } from '../ui/primitives'
 import { JobCard, PickRoleModal } from '../ui/SuggestedRoles'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
@@ -780,7 +780,7 @@ export default function Inbox() {
               </div>
               <div>
                 {applicationsQuery.isPending && (
-                  <EmptyState icon="inbox" title="Loading…">Fetching applications from the server.</EmptyState>
+                  <SkeletonRows rows={6} />
                 )}
                 {applicationsQuery.isError && (
                   <EmptyState icon="inbox" title="Couldn't load applications">
diff --git a/frontend/src/screens/Interviews.jsx b/frontend/src/screens/Interviews.jsx
index 0cfe17c..eb86c3c 100644
--- a/frontend/src/screens/Interviews.jsx
+++ b/frontend/src/screens/Interviews.jsx
@@ -27,7 +27,7 @@ import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
 import { Tabs } from '../ui/Tabs'
-import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, Stars } from '../ui/primitives'
+import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, SkeletonRows, Stars } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -306,7 +306,7 @@ export default function Interviews() {
 
           {listQuery.isPending && (
             <div className="card-body">
-              <EmptyState icon="calendar" title="Loading…">Fetching interviews from the server.</EmptyState>
+              <SkeletonRows rows={6} />
             </div>
           )}
           {listError && (
diff --git a/frontend/src/screens/Jobs.jsx b/frontend/src/screens/Jobs.jsx
index eca6816..e4a9420 100644
--- a/frontend/src/screens/Jobs.jsx
+++ b/frontend/src/screens/Jobs.jsx
@@ -15,7 +15,7 @@ import AiFieldAssist from '../ui/AiFieldAssist'
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
-import { Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
+import { Badge, EmptyState, FieldError, Icon, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
 import { useFormState } from '../components/AuthLayout'
@@ -252,7 +252,7 @@ export default function Jobs() {
       <div className="card">
         {jobsQuery.isPending && (
           <div className="card-body">
-            <EmptyState icon="briefcase" title="Loading…">Fetching requisitions from the server.</EmptyState>
+            <SkeletonRows rows={6} />
           </div>
         )}
         {jobsQuery.isError && (
diff --git a/frontend/src/screens/Managers.jsx b/frontend/src/screens/Managers.jsx
index 7f87def..ca13d8c 100644
--- a/frontend/src/screens/Managers.jsx
+++ b/frontend/src/screens/Managers.jsx
@@ -4,7 +4,7 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
-import { Avatar, Badge, EmptyState, Icon } from '../ui/primitives'
+import { Avatar, Badge, EmptyState, Icon, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
 import { qk } from '../lib/queryKeys'
@@ -53,7 +53,7 @@ export default function Managers() {
       />
 
       {managersQuery.isPending && (
-        <EmptyState icon="managers" title="Loading…">Fetching hiring managers.</EmptyState>
+        <div className="card"><div className="card-body"><SkeletonRows rows={4} /></div></div>
       )}
       {managersQuery.isError && (
         <EmptyState icon="managers" title="Couldn’t load hiring managers">
diff --git a/frontend/src/screens/Notifications.jsx b/frontend/src/screens/Notifications.jsx
index 927be36..b6ad2ee 100644
--- a/frontend/src/screens/Notifications.jsx
+++ b/frontend/src/screens/Notifications.jsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import PageHeader from '../ui/PageHeader'
-import { EmptyState, Icon } from '../ui/primitives'
+import { EmptyState, Icon, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -68,7 +68,7 @@ export default function Notifications() {
       <div className="card">
         {query.isPending && (
           <div className="card-body">
-            <EmptyState icon="bell" title="Loading…">Fetching notifications.</EmptyState>
+            <SkeletonRows rows={5} />
           </div>
         )}
         {query.isError && (
diff --git a/frontend/src/screens/Offers.jsx b/frontend/src/screens/Offers.jsx
index f3f4e5e..a1de046 100644
--- a/frontend/src/screens/Offers.jsx
+++ b/frontend/src/screens/Offers.jsx
@@ -25,7 +25,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
-import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard } from '../ui/primitives'
+import { Avatar, Badge, EmptyState, FieldError, Icon, KpiCard, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
@@ -283,7 +283,7 @@ export default function Offers() {
 
         {offersQuery.isPending && (
           <div className="card-body">
-            <EmptyState icon="file" title="Loading…">Fetching offers from the server.</EmptyState>
+            <SkeletonRows rows={6} />
           </div>
         )}
         {offersQuery.isError && (
diff --git a/frontend/src/screens/Tasks.jsx b/frontend/src/screens/Tasks.jsx
index bec4f1b..901b59c 100644
--- a/frontend/src/screens/Tasks.jsx
+++ b/frontend/src/screens/Tasks.jsx
@@ -18,7 +18,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
-import { Badge, EmptyState, FieldError, Icon, PRIORITY_CLASS } from '../ui/primitives'
+import { Badge, EmptyState, FieldError, Icon, PRIORITY_CLASS, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
 import { useFormState } from '../components/AuthLayout'
@@ -185,7 +185,7 @@ export default function Tasks() {
           <div className="card-body">
             <div className="list-tight">
               {tasksQuery.isPending ? (
-                <EmptyState icon="check-square" title="Loading…">Fetching tasks from the server.</EmptyState>
+                <SkeletonRows rows={5} />
               ) : tasksQuery.isError ? (
                 <EmptyState icon="alert" title="Couldn’t load tasks">
                   {friendlyAuthError(tasksQuery.error, 'Request failed')}
diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css
index a07d95f..0f550e6 100644
--- a/frontend/src/styles/auth.css
+++ b/frontend/src/styles/auth.css
@@ -50,7 +50,7 @@
 }
 
 .auth-aside-copy h1 {
-  font-family: 'Belleza', Georgia, serif;
+  font-family: var(--font-display);
   font-size: clamp(32px, 4vw, 44px);
   line-height: 1.15;
   font-weight: 400;
@@ -115,7 +115,7 @@
 }
 
 .auth-brand .brand-name {
-  font-family: 'Belleza', Georgia, serif;
+  font-family: var(--font-display);
   font-weight: 400;
   letter-spacing: 0.2px;
 }
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 3bdca50..d7c8c5b 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -866,6 +866,24 @@ canvas { width: 100%; max-width: 100%; display: block; }
              border-radius: 20px; background: var(--bg-sunken); color: var(--text-2); }
 .tab.active .tab-count { background: var(--primary-soft); color: var(--primary); }
 
+/* Skeleton loading (primitives.jsx SkeletonRows). The sweep uses --border,
+   which tracks the theme, so no per-theme rules are needed. */
+.skeleton {
+  position: relative; overflow: hidden;
+  background: var(--bg-sunken); border-radius: var(--radius-sm);
+}
+.skeleton::after {
+  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--border), transparent);
+  animation: skeletonSweep 1.4s infinite;
+}
+@keyframes skeletonSweep { to { transform: translateX(100%); } }
+.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
+.skeleton-row + .skeleton-row { border-top: 1px solid var(--border); }
+.skeleton-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
+.skeleton-line { display: block; height: 11px; }
+.skeleton-line + .skeleton-line { margin-top: 7px; }
+
 /* Keyboard users jump straight past the 20+ sidebar links. */
 .skip-link { position: absolute; left: -9999px; z-index: 1000; }
 .skip-link:focus {
diff --git a/frontend/src/ui/primitives.jsx b/frontend/src/ui/primitives.jsx
index 4e53ce4..5783dc4 100644
--- a/frontend/src/ui/primitives.jsx
+++ b/frontend/src/ui/primitives.jsx
@@ -76,6 +76,23 @@ export function ProgressBar({ pct, className }) {
   )
 }
 
+/** Shimmer placeholder for a loading table/list — one row per record slot. */
+export function SkeletonRows({ rows = 5 }) {
+  return (
+    <div role="status" aria-label="Loading">
+      {Array.from({ length: rows }, (_, i) => (
+        <div className="skeleton-row" aria-hidden="true" key={i}>
+          <span className="skeleton skeleton-avatar" />
+          <div className="flex-1">
+            <span className="skeleton skeleton-line" style={{ width: `${52 - (i % 3) * 9}%` }} />
+            <span className="skeleton skeleton-line" style={{ width: `${34 - (i % 3) * 6}%` }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export function EmptyState({ icon = 'search', title = 'No results found', children }) {
   return (
     <div className="empty-state">

From 5555f2475c5b0e618cc0ad52c1b170759053273a Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Tue, 25 Aug 2026 22:22:35 +0500
Subject: [PATCH 10/22] Inbox queue rows: stop the sender name flooding the
 timestamp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 380px queue rail left .ii-main only 148px: an email-style sender
name (no break points, never truncated) painted straight over the
timestamp, and the meta chips wrapped one per line. Three changes,
verified live against the dev server:

- Sender names truncate with the full value in title="" (Inbox and
  Matching, which reuses the row classes).
- Older-than-a-week list timestamps show the date only, like Outlook —
  the date+time form was ~105px and the detail pane has the full
  instant. .ii-main grows 148 -> 195px; both status chips fit one row.
- .ii-name gets min-width: 0 and its size joins the type scale.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/screens/Inbox.jsx    | 19 +++++++++++--------
 frontend/src/screens/Matching.jsx |  2 +-
 frontend/src/styles/styles.css    |  4 +++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index b550837..5a6e44b 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -60,25 +60,28 @@ function startOfDay(d) {
 
 /**
  * Outlook-style list timestamps in the client's local timezone.
- * Within 7 days: weekday + AM/PM time. Older: dd/mm/yyyy + AM/PM time.
+ * Within 7 days: weekday + AM/PM time. Older: dd/mm/yyyy only — like Outlook.
+ * The date-plus-time form was ~105px wide, and in the 380px queue rail that
+ * squeezed .ii-main to 148px: sender names painted over the timestamp and the
+ * meta chips wrapped one-per-line. The full timestamp is in the detail pane.
  */
 function outlookListTime(value) {
   if (!value) return '—'
   const d = value instanceof Date ? value : new Date(value)
   if (Number.isNaN(d.getTime())) return '—'
-  const time = d.toLocaleTimeString(undefined, {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-  })
   const daysAgo = Math.round((startOfDay(new Date()) - startOfDay(d)) / 86400000)
   if (daysAgo < 7) {
     const weekday = d.toLocaleDateString(undefined, { weekday: 'short' })
+    const time = d.toLocaleTimeString(undefined, {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    })
     return `${weekday} ${time}`
   }
   const dd = String(d.getDate()).padStart(2, '0')
   const mm = String(d.getMonth() + 1).padStart(2, '0')
-  return `${dd}/${mm}/${d.getFullYear()} ${time}`
+  return `${dd}/${mm}/${d.getFullYear()}`
 }
 
 /**
@@ -804,7 +807,7 @@ export default function Inbox() {
                       <Avatar name={i.name} initials={i.initials} color={i.color} />
                       <div className="ii-main">
                         <div className="ii-name">
-                          {i.name}{' '}
+                          <span className="truncate min-w-0" title={i.name}>{i.name}</span>
                           {i.duplicate && (
                             <span className="badge b-red badge-plain" style={{ padding: '1px 6px', fontSize: 10 }}>DUP</span>
                           )}
diff --git a/frontend/src/screens/Matching.jsx b/frontend/src/screens/Matching.jsx
index e5c5016..d1ab4fe 100644
--- a/frontend/src/screens/Matching.jsx
+++ b/frontend/src/screens/Matching.jsx
@@ -431,7 +431,7 @@ export default function Matching() {
                 >
                   <Avatar name={i.name} initials={i.initials} color={i.color} />
                   <div className="ii-main">
-                    <div className="ii-name">{i.name}</div>
+                    <div className="ii-name"><span className="truncate min-w-0" title={i.name}>{i.name}</span></div>
                     <div className="ii-pos">{i.position}</div>
                     <div className="ii-meta">
                       <SourceChip item={i} />
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index d7c8c5b..740557f 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -955,7 +955,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .inbox-item.unread::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
 .inbox-item.unread .ii-name { font-weight: 700; }
 .ii-main { flex: 1; min-width: 0; }
-.ii-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
+/* The name text is wrapped in a .truncate span in the JSX — email-style
+   sender names have no break points and used to paint over the timestamp. */
+.ii-name { font-weight: 600; font-size: var(--fs-base); display: flex; align-items: center; gap: 6px; min-width: 0; }
 .ii-pos { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ii-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
 .ii-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }

From abc8bffb81cd26356cd5fb820154403c057c721c Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 10:46:21 +0500
Subject: [PATCH 11/22] frontend dist: bump built asset hashes

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/dist/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 72268d5..d8621ee 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -23,8 +23,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-BDBvEU8Q.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index--H0MdQBQ.css">
+    <script type="module" crossorigin src="/assets/index-CxWyqo2y.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C-yWe0Um.css">
   </head>
   <body>
     <div id="root"></div>


From 9df3b46aa95f23942520690a24754977e15262d0 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 11:31:19 +0500
Subject: [PATCH 12/22] Typography overhaul: Inter Tight display headings,
 Belleza confined to wordmark

Belleza (single-weight decorative face) read thin and informal against
the dense data UI. Headings now use Inter Tight semibold with negative
tracking; hero metrics join the display face at proper optical sizes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/dist/index.html       | 13 +++++-----
 frontend/index.html            |  9 ++++---
 frontend/src/styles/auth.css   |  8 +++---
 frontend/src/styles/styles.css | 46 ++++++++++++++++++----------------
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index d8621ee..0aa6337 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -16,15 +16,16 @@
     <meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
     <meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
 
-    <!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
-         compatible stand-in for Neue Montreal, which is a licensed face.
-         If Neue Montreal is installed locally it wins via the CSS stack. -->
+    <!-- Type: Inter Tight (headings) + Inter as the metric-compatible
+         stand-in for Neue Montreal, which is a licensed face; if Neue
+         Montreal is installed locally it wins via the CSS stack.
+         Belleza is loaded for the wordmark only. -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-CxWyqo2y.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C-yWe0Um.css">
+    <script type="module" crossorigin src="/assets/index-Nz9mKrAc.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B2bX4le4.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/index.html b/frontend/index.html
index f425b9e..7ce4819 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -16,12 +16,13 @@
     <meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
     <meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
 
-    <!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
-         compatible stand-in for Neue Montreal, which is a licensed face.
-         If Neue Montreal is installed locally it wins via the CSS stack. -->
+    <!-- Type: Inter Tight (headings) + Inter as the metric-compatible
+         stand-in for Neue Montreal, which is a licensed face; if Neue
+         Montreal is installed locally it wins via the CSS stack.
+         Belleza is loaded for the wordmark only. -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
   </head>
   <body>
diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css
index 0f550e6..6b644e3 100644
--- a/frontend/src/styles/auth.css
+++ b/frontend/src/styles/auth.css
@@ -52,9 +52,9 @@
 .auth-aside-copy h1 {
   font-family: var(--font-display);
   font-size: clamp(32px, 4vw, 44px);
-  line-height: 1.15;
-  font-weight: 400;
-  letter-spacing: -0.02em;
+  line-height: 1.12;
+  font-weight: 600;
+  letter-spacing: -0.025em;
   margin: 0 0 14px;
   color: #fff;
 }
@@ -115,7 +115,7 @@
 }
 
 .auth-brand .brand-name {
-  font-family: var(--font-display);
+  font-family: var(--font-brand);
   font-weight: 400;
   letter-spacing: 0.2px;
 }
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 740557f..76cd39b 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -7,8 +7,9 @@
      Secondary  #25e9a5  mint         ·  #8e92ff  periwinkle
      Neutral    #ffffff  ·  #000000
    Typography
-     Display / main headings ....... Belleza
+     Display / main headings ....... Inter Tight (semibold, tight tracking)
      UI, body & sub-headings ....... Neue Montreal (Inter fallback)
+     Wordmark only ................. Belleza
 
    Theme model
      Light — white/mint surfaces, deep green as the action colour.
@@ -84,7 +85,8 @@
   --topbar-h: 64px;
 
   --font: 'Neue Montreal', 'PP Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --font-display: 'Belleza', 'Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-display: 'Inter Tight', 'Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-brand: 'Belleza', 'Inter Tight', 'Inter', sans-serif;
   --mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
 
   /* Type scale — 9 steps that the 20-size census collapses onto.
@@ -97,9 +99,9 @@
   --fs-lg:  18px;   /* section headings, empty states */
   --fs-xl:  22px;   /* modal titles */
   --fs-2xl: 25px;   /* profile hero name, mobile page title */
-  --fs-3xl: 30px;   /* page title (Belleza) */
+  --fs-3xl: 30px;   /* page title (Inter Tight) */
 
-  --lh-display: 1.15;  /* Belleza display headings */
+  --lh-display: 1.15;  /* display headings */
   --lh-heading: 1.25;  /* h2–h6, card titles */
   --lh-body:    1.5;   /* running copy */
   --lh-label:   1.35;  /* eyebrows, form labels, table headers */
@@ -261,30 +263,32 @@ img, svg, video, canvas { max-width: 100%; }
 
 /* ============================================================
    BRAND TYPOGRAPHY
-   Guideline: "main heading always in main typeface belleza /
-   content & sub-heading always in neue montreal".
-   Belleza is a display face — reserved for page-level and modal
-   titles, hero numbers and the wordmark. Everything structural
-   (labels, tables, controls) stays in the UI face for legibility.
+   Display face is Inter Tight — a headline grotesque that shares
+   Inter's skeleton, so titles read as the same voice as the UI,
+   only set semibold with negative tracking. Belleza (the brand
+   guideline's decorative face) is confined to the wordmark: at
+   text sizes and weight 400 it read thin and informal against a
+   dense data UI. Everything structural (labels, tables, controls)
+   stays in the UI face for legibility.
    ============================================================ */
 .page-title,
 .modal-head h2,
-.brand-name,
 .ph-name,
 .ai-hero h2,
 .empty-state h3 {
   font-family: var(--font-display);
-  font-weight: 400;
-  letter-spacing: 0;
+  font-weight: 600;
+  letter-spacing: -0.015em;
 }
-.page-title { font-size: var(--fs-3xl); line-height: var(--lh-display); }
-.page-title-sm { font-size: var(--fs-xl); }   /* embedded sub-page titles (h2) */
+.page-title { font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: -0.02em; }
+.page-title-sm { font-size: var(--fs-xl); letter-spacing: -0.015em; }   /* embedded sub-page titles (h2) */
 .modal-head h2 { font-size: var(--fs-xl); }
 .ph-name { font-size: var(--fs-2xl); }
-.brand-name { font-size: var(--fs-lg); font-weight: 400; letter-spacing: .2px; }
+.brand-name { font-family: var(--font-brand); font-size: var(--fs-lg); font-weight: 400; letter-spacing: .2px; }
 
-/* Metrics read as data, not prose — keep them in the UI face,
-   tabular-lining so digits don't jitter as values update. */
+/* Metrics read as data — hero numbers use the display face (Inter
+   Tight keeps Inter's figures), everything else stays in the UI face;
+   all tabular-lining so digits don't jitter as values update. */
 .kpi-value, .stat-mini-val, .ats-ring .ats-num, .cell-mono, .mono,
 table.data td, .k-count, .nav-badge {
   font-variant-numeric: tabular-nums;
@@ -295,7 +299,7 @@ table.data td, .k-count, .nav-badge {
    bolder than the styled card titles beside them). Component rules
    (.page-title, .modal-head h2, .card-head h3, …) win by specificity. */
 h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); }
-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-display); }
+h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: var(--lh-display); letter-spacing: -0.02em; }
 h2 { font-size: var(--fs-xl); font-weight: 600; }
 h3 { font-size: var(--fs-md); font-weight: 600; }
 h4 { font-size: var(--fs-base); font-weight: 600; }
@@ -583,7 +587,7 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
 .kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
 .kpi-icn { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
 .kpi-icn svg { width: 20px; height: 20px; }
-.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
+.kpi-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
 .kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-sm); }
 .trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-sm); font-size: var(--fs-xs); }
 .trend svg { width: 13px; height: 13px; }
@@ -830,7 +834,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .more-count { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-2); font-size: 11px; font-weight: 700; border: 2px solid var(--bg-elev); margin-left: -8px; }
 
 .stat-mini { display: flex; flex-direction: column; gap: 4px; }
-.stat-mini-val { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
+.stat-mini-val { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
 .stat-mini-lbl { font-size: var(--fs-sm); color: var(--text-3); }
 
 .divider { height: 1px; background: var(--border); margin: 16px 0; }
@@ -1055,7 +1059,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
   background: conic-gradient(var(--c) calc(var(--pct)*1%), var(--bg-sunken) 0); }
 .ats-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg-elev); }
 .ats-ring .ats-val { position: relative; z-index: 1; text-align: center; }
-.ats-ring .ats-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
+.ats-ring .ats-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
 .ats-ring .ats-lbl { font-size: 11px; color: var(--text-3); font-weight: 600; }
 .skill-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); }
 .skill-pill svg { width: 12px; height: 12px; }

From bc97182a7ed63d9489e4d17866c13c90f0ad6cfa Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 11:41:00 +0500
Subject: [PATCH 13/22] Typography check: align inline hero numbers with the
 display type system

Full-app verification tour (25 screens, light + dark) confirmed Inter
Tight/Belleza/Inter render correctly; the only stragglers were inline
weight-800 numbers with px tracking in four screens, now on the same
display face, weights, and em tracking as the CSS system.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/dist/index.html               | 2 +-
 frontend/src/screens/Assessments.jsx   | 2 +-
 frontend/src/screens/JobCandidates.jsx | 2 +-
 frontend/src/screens/RecruiterHub.jsx  | 4 ++--
 frontend/src/screens/Talent.jsx        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 0aa6337..9c5d1f2 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,7 +24,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-Nz9mKrAc.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dwd76W0A.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B2bX4le4.css">
   </head>
   <body>
diff --git a/frontend/src/screens/Assessments.jsx b/frontend/src/screens/Assessments.jsx
index 12e161a..067f1b5 100644
--- a/frontend/src/screens/Assessments.jsx
+++ b/frontend/src/screens/Assessments.jsx
@@ -297,7 +297,7 @@ export default function Assessments() {
               <div style={{ textAlign: 'center', padding: '10px 0' }}>
                 <div
                   style={{
-                    fontSize: 44, fontWeight: 800, letterSpacing: -1,
+                    fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em',
                     color: viewing.score >= 70 ? 'var(--success)' : 'var(--warning)',
                   }}
                 >
diff --git a/frontend/src/screens/JobCandidates.jsx b/frontend/src/screens/JobCandidates.jsx
index 95e6364..a05d64c 100644
--- a/frontend/src/screens/JobCandidates.jsx
+++ b/frontend/src/screens/JobCandidates.jsx
@@ -51,7 +51,7 @@ function MiniRing({ score, size = 46 }) {
         style={{
           width: size - 8, height: size - 8, borderRadius: '50%',
           background: 'var(--bg-elev)', display: 'grid', placeItems: 'center',
-          fontWeight: 800, fontSize: size >= 56 ? 17 : 13.5, letterSpacing: '-.3px',
+          fontWeight: 700, fontSize: size >= 56 ? 17 : 13.5, letterSpacing: '-0.01em',
           color: ringColor(score),
         }}
       >
diff --git a/frontend/src/screens/RecruiterHub.jsx b/frontend/src/screens/RecruiterHub.jsx
index 523127f..ed2e709 100644
--- a/frontend/src/screens/RecruiterHub.jsx
+++ b/frontend/src/screens/RecruiterHub.jsx
@@ -211,13 +211,13 @@ export default function RecruiterHub() {
             </div>
           </div>
           <div style={{ textAlign: 'center' }}>
-            <div style={{ fontSize: 26, fontWeight: 800 }}>
+            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
               {loading ? '—' : pct(k?.hires ?? 0, k?.total_candidates ?? 0)}
             </div>
             <div style={{ opacity: 0.85, fontSize: 12 }}>Applicant → hire</div>
           </div>
           <div style={{ textAlign: 'center' }}>
-            <div style={{ fontSize: 26, fontWeight: 800 }}>
+            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
               {loading ? '—' : pct(k?.offers_accepted ?? 0, k?.offers_sent ?? 0)}
             </div>
             <div style={{ opacity: 0.85, fontSize: 12 }}>Offer acceptance</div>
diff --git a/frontend/src/screens/Talent.jsx b/frontend/src/screens/Talent.jsx
index 204e41c..e383197 100644
--- a/frontend/src/screens/Talent.jsx
+++ b/frontend/src/screens/Talent.jsx
@@ -124,7 +124,7 @@ function MatchRing({ score, size = 46 }) {
         style={{
           width: size - 8, height: size - 8, borderRadius: '50%',
           background: 'var(--bg-elev)', display: 'grid', placeItems: 'center',
-          fontWeight: 800, fontSize: 13.5, letterSpacing: '-.3px',
+          fontWeight: 700, fontSize: 13.5, letterSpacing: '-0.01em',
           color,
         }}
       >

From 95b5de16356bb2e6ada0935d3c68fe16634988f9 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 11:46:28 +0500
Subject: [PATCH 14/22] Vite dev proxy: serve the SPA shell for browser
 navigations to API-prefixed routes

Several API prefixes double as SPA routes (/jobs, /inbox, /pipeline, ...);
refreshing the browser on one proxied the navigation to the backend and
500d. Navigations send Accept: text/html and now bypass to /index.html,
while fetch/XHR traffic still proxies. VITE_API_TARGET repoints the proxy
when the API is not on 8000.

Verified: direct loads of /jobs, /inbox, /pipeline, /analytics, /offers
render the correct screen with the session intact; /health still proxies.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/vite.config.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 2f34a4e..e6f9c7b 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -20,10 +20,21 @@ export default defineConfig({
     port: 5173,
     // Same-origin style for local Vite when VITE_API_BASE is empty.
     // Requires API published on the host (docker-compose.host-ports.yml).
+    // VITE_API_TARGET repoints the proxy when the API runs elsewhere
+    // (e.g. 8001 locally because another service holds 8000).
     proxy: {
       '^/(health|users|roles|permissions|permission-tags|email|job|jobs|candidate|notes|interview|feedback|activity|pipeline|notifications|analytics|offers|tasks|assessments|org-settings|saved-searches|search|documents|sheet|managers|inbox)(/|$)': {
-        target: 'http://127.0.0.1:8000',
+        target: process.env.VITE_API_TARGET || 'http://127.0.0.1:8000',
         changeOrigin: true,
+        // Several API prefixes double as SPA routes (/jobs, /inbox, …).
+        // A browser NAVIGATION to one of them — refresh, pasted URL —
+        // sends Accept: text/html and wants the app shell, not the API;
+        // without this it proxied and 500'd. fetch/XHR traffic never
+        // asks for text/html (downloads go fetch→blob), so only real
+        // page loads are bypassed.
+        bypass(req) {
+          if (req.headers.accept?.includes('text/html')) return '/index.html'
+        },
       },
     },
   },

From c22ea4c689bc8e3c3029b2f810eb83ebb35de2ee Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 16:09:30 +0500
Subject: [PATCH 15/22] Job posts: remove the salary field

Dropped from the create and edit modals, the detail drawer, the frontend
job mapper, and the composed publish text (which otherwise printed
Salary: Anonymous on every post). Backend model/API still tolerate the
column, so older clients and stored rows are unaffected.

UI-verified live: modal has no salary field, create POST carries no
salary key, cover-image upload previews and the post lands successfully.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 backend/job/job_post/plugins.py |  4 ----
 frontend/dist/index.html        |  2 +-
 frontend/src/api/jobs.js        |  1 -
 frontend/src/screens/Jobs.jsx   | 22 ----------------------
 4 files changed, 1 insertion(+), 28 deletions(-)

diff --git a/backend/job/job_post/plugins.py b/backend/job/job_post/plugins.py
index bae385c..8604722 100644
--- a/backend/job/job_post/plugins.py
+++ b/backend/job/job_post/plugins.py
@@ -100,7 +100,6 @@ def render_job_post(payload) -> str:
     experience_max = payload.get("experience_max")
     requirements = [str(r).strip() for r in (payload.get("requirements") or []) if str(r).strip()]
     optional_skills = [str(s).strip() for s in (payload.get("optional_skills") or []) if str(s).strip()]
-    salary = (payload.get("salary") or "Anonymous").strip() or "Anonymous"
     description = (payload.get("description") or "").strip()
 
     lines = [f"We're hiring: {title}", ""]
@@ -136,9 +135,6 @@ def render_job_post(payload) -> str:
             lines.append(f"• {item}")
         lines.append("")
 
-    lines.append(f"Salary: {salary}")
-    lines.append("")
-
     if description:
         lines.append(description)
         lines.append("")
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 9c5d1f2..d870204 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,7 +24,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-Dwd76W0A.js"></script>
+    <script type="module" crossorigin src="/assets/index-CMSkJU2w.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-B2bX4le4.css">
   </head>
   <body>
diff --git a/frontend/src/api/jobs.js b/frontend/src/api/jobs.js
index c8db05b..d733a51 100644
--- a/frontend/src/api/jobs.js
+++ b/frontend/src/api/jobs.js
@@ -57,7 +57,6 @@ export function toJobView(row) {
     experienceMin: row.experience_min,
     experienceMax: row.experience_max,
     experience: experienceLabel(row.experience_min, row.experience_max),
-    salary: row.salary,
     skills: row.requirements ?? [],
     optionalSkills: row.optional_skills ?? [],
     description: row.description,
diff --git a/frontend/src/screens/Jobs.jsx b/frontend/src/screens/Jobs.jsx
index e4a9420..d9194a4 100644
--- a/frontend/src/screens/Jobs.jsx
+++ b/frontend/src/screens/Jobs.jsx
@@ -350,7 +350,6 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
     vacancies: '1',
     experience_min: '',
     experience_max: '',
-    salary: '',
     requirements: '',
     optional_skills: '',
     description: '',
@@ -426,7 +425,6 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
       vacancies,
       experience_min: expMin,
       experience_max: expMax,
-      salary: v.salary.trim() || 'Anonymous',
       requirements: splitLines(v.requirements),
       optional_skills: splitLines(v.optional_skills),
       description: v.description.trim() || null,
@@ -447,7 +445,6 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
     employment_type: form.values.employment_type,
     experience_min: form.values.experience_min,
     experience_max: form.values.experience_max,
-    salary: form.values.salary,
     requirements: form.values.requirements,
     optional_skills: form.values.optional_skills,
     description: form.values.description,
@@ -534,14 +531,6 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
             <input type="number" min="0" {...field('experience_max')} className={form.errors.experience_max ? 'err' : ''} placeholder="5" />
             <FieldError>{form.errors.experience_max}</FieldError>
           </div>
-          <div className="form-field col-span-2">
-            <div className="field-label-row">
-              <label>Salary</label>
-              {assist('salary')}
-            </div>
-            <input {...field('salary')} placeholder="Anonymous" />
-          </div>
-
           <div className="form-field col-span-2">
             <div className="field-label-row">
               <label>Requirements</label>
@@ -654,7 +643,6 @@ function EditJobForm({ job: j, departmentOptions, busy, onClose, onSubmit }) {
     location: j.location || '',
     employment_type: j.type || '',
     vacancies: j.vacancies != null ? String(j.vacancies) : '1',
-    salary: j.salary || '',
     experience_min: j.experienceMin != null ? String(j.experienceMin) : '',
     experience_max: j.experienceMax != null ? String(j.experienceMax) : '',
     description: j.description || '',
@@ -667,7 +655,6 @@ function EditJobForm({ job: j, departmentOptions, busy, onClose, onSubmit }) {
     employment_type: form.values.employment_type,
     experience_min: form.values.experience_min,
     experience_max: form.values.experience_max,
-    salary: form.values.salary,
     description: form.values.description,
   })
 
@@ -696,7 +683,6 @@ function EditJobForm({ job: j, departmentOptions, busy, onClose, onSubmit }) {
       location: form.values.location.trim() || null,
       employment_type: form.values.employment_type || null,
       vacancies: Number(form.values.vacancies) || 1,
-      salary: form.values.salary.trim() || null,
       experience_min: form.values.experience_min === '' ? null : Number(form.values.experience_min),
       experience_max: form.values.experience_max === '' ? null : Number(form.values.experience_max),
       description: form.values.description.trim() || null,
@@ -754,13 +740,6 @@ function EditJobForm({ job: j, departmentOptions, busy, onClose, onSubmit }) {
             <label>Vacancies</label>
             <input type="number" min="1" value={form.values.vacancies} onChange={(e) => form.setField('vacancies', e.target.value)} disabled={busy} />
           </div>
-          <div className="form-field">
-            <div className="field-label-row">
-              <label>Salary</label>
-              {assist('salary')}
-            </div>
-            <input value={form.values.salary} onChange={(e) => form.setField('salary', e.target.value)} disabled={busy} />
-          </div>
           <div className="form-field">
             <label>Experience min</label>
             <input type="number" min="0" value={form.values.experience_min} onChange={(e) => form.setField('experience_min', e.target.value)} disabled={busy} />
@@ -953,7 +932,6 @@ function JobDetail({
         <div className="info-item"><div className="il">Employment Type</div><div className="iv">{j.type || '—'}</div></div>
         <div className="info-item"><div className="il">Platform</div><div className="iv">{platformLabel(j.platform) || '—'}</div></div>
         <div className="info-item"><div className="il">Vacancies</div><div className="iv">{j.vacancies ?? '—'}</div></div>
-        <div className="info-item"><div className="il">Salary</div><div className="iv">{j.salary || '—'}</div></div>
         <div className="info-item"><div className="il">Experience</div><div className="iv">{j.experience || '—'}</div></div>
         <div className="info-item"><div className="il">Created</div><div className="iv">{j.created ? fmtShort(j.created) : '—'}</div></div>
         <div className="info-item"><div className="il">Created by</div><div className="iv">{j.createdByName || '—'}</div></div>

From e6a82aaa23803015fb6df70f036855c4265ee231 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 16:17:55 +0500
Subject: [PATCH 16/22] Job posts: persist and display the cover image

The create modal collected an image but dropped it. Now POST
/job/image/upload stores it on disk keyed by the post id (uuid-validated,
5 MB / png-jpg-webp-gif, replace-on-reupload; no DB migration) and GET
/job/image/fetch serves it. The create flow uploads right after the row
exists, image failure downgrades to a toast instead of failing the create,
and Job Details renders the cover via an authorized blob fetch.

E2E-verified: upload 200, fetch 200, cover renders in Job Details.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .gitignore                     |  3 ++
 backend/job/app.py             | 47 +++++++++++++++++++++++++++
 backend/job/job_post/views.py  | 58 ++++++++++++++++++++++++++++++++++
 frontend/dist/index.html       |  4 +--
 frontend/src/api/jobs.js       | 15 ++++++++-
 frontend/src/lib/apiClient.js  | 51 ++++++++++++++++++++++++++++++
 frontend/src/screens/Jobs.jsx  | 48 ++++++++++++++++++++++++----
 frontend/src/styles/styles.css |  3 ++
 8 files changed, 220 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index d189398..83a125d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,6 +57,9 @@ temp/
 node_modules/
 frontend/dist/
 
+# Uploaded content (job cover images, …) — user data, never in git
+backend/uploads/
+
 **.pdf
 # Per-machine alembic autogen revisions only — the old bare `**_**_**.py`
 # also swallowed any module with two underscores (e.g. test_talent_plugins.py).
diff --git a/backend/job/app.py b/backend/job/app.py
index 3653429..9c6d2e6 100644
--- a/backend/job/app.py
+++ b/backend/job/app.py
@@ -296,6 +296,53 @@ async def post_job(
         raise HTTPException(status_code=500,detail=str(e))
 
 
+@router.post("/job/image/upload")
+async def upload_job_image(
+    job_post_id: str = Form(...),
+    file: UploadFile = File(...),
+    current_user: dict = Depends(require_permission(
+        PermissionTag.JOB_BOARD_CREATE, PermissionTag.JOBS_EDIT, require_all=False,
+    )),
+    session: AsyncSession = Depends(get_session),
+):
+    """Attach (or replace) the cover image of a job post. Stored on disk keyed
+    by the post id; the create flow calls this right after /job/post-job."""
+    try:
+        content=await file.read()
+        service=JobPost(session=session)
+        data=await service.save_job_image(
+            job_post_id,file.filename,file.content_type,content,current_user,
+        )
+        return JSONResponse(content={"data":data,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.get("/job/image/fetch")
+async def fetch_job_image(
+    job_post_id: str = Query(...),
+    current_user: dict = Depends(require_permission(
+        PermissionTag.JOBS_VIEW, PermissionTag.JOB_BOARD_VIEW, require_all=False,
+    )),
+    session: AsyncSession = Depends(get_session),
+):
+    """The stored cover image, served inline; 404 when the post has none."""
+    try:
+        service=JobPost(session=session)
+        path,media_type=await service.get_job_image(job_post_id)
+        return FileResponse(
+            path=str(path),
+            media_type=media_type,
+            content_disposition_type="inline",
+        )
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
 class JobAssistRequest(BaseModel):
     field: Literal[
         "title", "department", "location", "salary",
diff --git a/backend/job/job_post/views.py b/backend/job/job_post/views.py
index b983477..3a47a14 100644
--- a/backend/job/job_post/views.py
+++ b/backend/job/job_post/views.py
@@ -2,6 +2,7 @@ from datetime import date, time
 import logging
 import os
 import uuid
+from pathlib import Path
 
 import httpx
 from dotenv import load_dotenv
@@ -24,6 +25,31 @@ from job.job_post.serializers import serialize_job_post, serialize_job_row
 load_dotenv()
 logger=logging.getLogger("job.job_post")
 
+# Cover images are stored on disk keyed by the job post id — no DB column, so
+# no migration. One image per post: uploading again replaces the previous file.
+JOB_IMAGE_DIR=Path(os.getenv("JOB_IMAGE_DIR") or Path(__file__).resolve().parents[2]/"uploads"/"job_images")
+IMAGE_EXT_BY_TYPE={"image/png":"png","image/jpeg":"jpg","image/webp":"webp","image/gif":"gif"}
+IMAGE_MEDIA_BY_EXT={"png":"image/png","jpg":"image/jpeg","jpeg":"image/jpeg","webp":"image/webp","gif":"image/gif"}
+MAX_JOB_IMAGE_BYTES=5*1024*1024
+
+
+def _job_image_key(job_post_id) -> str:
+    """The id is used as a filename — parse it as a UUID so a crafted value can
+    never traverse out of the image directory."""
+    try:
+        return str(uuid.UUID(str(job_post_id)))
+    except ValueError as e:
+        raise HTTPException(status_code=422,detail="job_post_id must be a UUID") from e
+
+
+def find_job_image(job_post_id) -> Path | None:
+    key=_job_image_key(job_post_id)
+    for ext in IMAGE_MEDIA_BY_EXT:
+        p=JOB_IMAGE_DIR/f"{key}.{ext}"
+        if p.exists():
+            return p
+    return None
+
 
 class JobPostCreate(BaseModel):
     title: str
@@ -224,6 +250,38 @@ class JobPost:
             raise HTTPException(status_code=404,detail="Job post not found")
         return {"id":str(row.id),"deleted":True}
 
+    async def save_job_image(self,job_post_id,filename,content_type,content,current_user):
+        if not current_user:
+            raise HTTPException(status_code=401,detail="Not authenticated")
+        key=_job_image_key(job_post_id)
+        ext=IMAGE_EXT_BY_TYPE.get((content_type or "").lower())
+        if not ext:
+            # Fall back to the filename extension; browsers occasionally send
+            # application/octet-stream for perfectly valid images.
+            suffix=Path((filename or "").replace("\\","/")).suffix.lstrip(".").lower()
+            ext=suffix if suffix in IMAGE_MEDIA_BY_EXT else None
+        if not ext:
+            raise HTTPException(status_code=415,detail="Image must be PNG, JPG, WEBP or GIF")
+        if not content:
+            raise HTTPException(status_code=400,detail="Empty image upload")
+        if len(content)>MAX_JOB_IMAGE_BYTES:
+            raise HTTPException(status_code=413,detail="Image must be under 5 MB")
+        rows,total=await JobPosts.fetch_job_posts(self.session,ids=[key],active_only=False)
+        if not total:
+            raise HTTPException(status_code=404,detail="Job post not found")
+        JOB_IMAGE_DIR.mkdir(parents=True,exist_ok=True)
+        # Replace, never accumulate: drop any previous image regardless of format.
+        for old_ext in IMAGE_MEDIA_BY_EXT:
+            (JOB_IMAGE_DIR/f"{key}.{old_ext}").unlink(missing_ok=True)
+        (JOB_IMAGE_DIR/f"{key}.{ext}").write_bytes(content)
+        return {"job_post_id":key,"has_image":True}
+
+    async def get_job_image(self,job_post_id):
+        path=find_job_image(job_post_id)
+        if not path:
+            raise HTTPException(status_code=404,detail="No image for this job post")
+        return path,IMAGE_MEDIA_BY_EXT[path.suffix.lstrip(".").lower()]
+
     async def set_job_status(self,job_post_id,payload,current_user):
         if not current_user:
             raise HTTPException(status_code=401,detail="Not authenticated")
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index d870204..81a6875 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,8 +24,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-CMSkJU2w.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B2bX4le4.css">
+    <script type="module" crossorigin src="/assets/index-D-zYfH3L.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BwYjpKNo.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/api/jobs.js b/frontend/src/api/jobs.js
index d733a51..4a268ea 100644
--- a/frontend/src/api/jobs.js
+++ b/frontend/src/api/jobs.js
@@ -1,4 +1,4 @@
-import { downloadFile, request } from '../lib/apiClient'
+import { downloadFile, fetchBlobUrl, request } from '../lib/apiClient'
 
 /**
  * Job requisitions — backend/job/app.py `GET /jobs/fetch`.
@@ -96,6 +96,19 @@ export function remove(jobPostId) {
   })
 }
 
+/** Attach or replace a job post's cover image — POST /job/image/upload (multipart). */
+export function uploadImage(jobPostId, file) {
+  const fd = new FormData()
+  fd.append('job_post_id', jobPostId)
+  fd.append('file', file)
+  return request('/job/image/upload', { method: 'POST', body: fd })
+}
+
+/** Object URL of the cover image, or null when the post has none. Caller revokes. */
+export function fetchImageUrl(jobPostId) {
+  return fetchBlobUrl('/job/image/fetch', { params: { job_post_id: jobPostId } })
+}
+
 /** `status` is the Jobs UI label (Open / Closed / On Hold) or a raw requisition_status. */
 export function setStatus(jobPostId, status) {
   const requisition_status = LABEL_TO_STATUS[status] ?? status
diff --git a/frontend/src/lib/apiClient.js b/frontend/src/lib/apiClient.js
index 6d452da..9cf0bea 100644
--- a/frontend/src/lib/apiClient.js
+++ b/frontend/src/lib/apiClient.js
@@ -187,6 +187,57 @@ export async function downloadFile(path, { params, auth = true, filename } = {})
   URL.revokeObjectURL(url)
 }
 
+/**
+ * Authenticated binary GET returning an object URL for <img>/<video> use —
+ * a plain src attribute cannot carry the bearer token. Returns null on 404
+ * (the resource legitimately not existing, e.g. a job with no cover image).
+ * Callers own the URL: revoke it with URL.revokeObjectURL when done.
+ */
+export async function fetchBlobUrl(path, { params, auth = true } = {}) {
+  if (auth && isExpiring()) {
+    try {
+      await refreshSession()
+    } catch {
+      /* fall through — the 401 path below makes the final call */
+    }
+  }
+
+  const send = async () => {
+    const headers = { Accept: '*/*' }
+    const bearer = auth ? getAccessToken() : null
+    if (bearer) headers.Authorization = `Bearer ${bearer}`
+    return fetch(buildUrl(path, params), { method: 'GET', headers })
+  }
+
+  let res
+  try {
+    res = await send()
+  } catch (err) {
+    if (err?.name === 'AbortError') throw err
+    throw new ApiError('Unable to reach the server. Check your connection.', 0, null)
+  }
+
+  if (res.status === 401 && auth) {
+    try {
+      await refreshSession()
+    } catch (err) {
+      if (err instanceof SessionExpiredError) onSessionExpired()
+      throw err
+    }
+    res = await send()
+    if (res.status === 401) {
+      onSessionExpired()
+      throw new ApiError('Session expired', 401, null)
+    }
+  }
+
+  if (res.status === 404) return null
+  if (!res.ok) {
+    throw new ApiError(res.statusText || 'Request failed', res.status, null)
+  }
+  return URL.createObjectURL(await res.blob())
+}
+
 function filenameFromDisposition(header) {
   if (!header) return null
   const star = /filename\*=UTF-8''([^;]+)/i.exec(header)
diff --git a/frontend/src/screens/Jobs.jsx b/frontend/src/screens/Jobs.jsx
index d9194a4..d699174 100644
--- a/frontend/src/screens/Jobs.jsx
+++ b/frontend/src/screens/Jobs.jsx
@@ -105,11 +105,24 @@ export default function Jobs() {
   }, [jobs]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const createJob = useMutation({
-    mutationFn: (payload) => jobPostsApi.create(payload),
-    onSuccess: () => {
+    mutationFn: async ({ payload, imageFile }) => {
+      const res = await jobPostsApi.create(payload)
+      // The cover image rides along after the row exists. Its failure must not
+      // read as "create failed" — the job IS created — so it downgrades to a flag.
+      if (imageFile && res?.data?.id) {
+        try {
+          await jobsApi.uploadImage(res.data.id, imageFile)
+        } catch {
+          return { ...res, imageFailed: true }
+        }
+      }
+      return res
+    },
+    onSuccess: (res) => {
       qc.invalidateQueries({ queryKey: qk.jobs.all() })
       setCreating(false)
-      toast('Job created', 'success')
+      if (res?.imageFailed) toast('Job created, but the cover image failed to upload.', 'error')
+      else toast('Job created', 'success')
     },
     onError: (err) => {
       // 502: row was created but Buffer publish failed — refresh the board and
@@ -326,7 +339,7 @@ export default function Jobs() {
           departmentOptions={departmentOptions}
           busy={createJob.isPending}
           onClose={() => setCreating(false)}
-          onSubmit={(payload) => createJob.mutate(payload)}
+          onSubmit={(payload, imageFile) => createJob.mutate({ payload, imageFile })}
         />
       )}
     </div>
@@ -416,7 +429,7 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
 
     // No channel_id / platform: the backend saves an internal-only requisition
     // and skips Buffer entirely. Publishing happens later from the Job Board.
-    // Image is UI-only for now — not sent to the API.
+    // The cover image is uploaded separately right after the row exists.
     onSubmit({
       title: v.title.trim(),
       department: v.department.trim() || null,
@@ -428,7 +441,7 @@ function JobForm({ departmentOptions, busy, onClose, onSubmit }) {
       requirements: splitLines(v.requirements),
       optional_skills: splitLines(v.optional_skills),
       description: v.description.trim() || null,
-    })
+    }, imageFile)
   }
 
   const field = (name) => ({
@@ -878,6 +891,27 @@ function RecruiterAssignment({ jobPostId, fallbackName, canEdit }) {
   )
 }
 
+/* Cover image, when the post has one — fetched with the bearer token into an
+   object URL, because a bare <img src> cannot carry auth headers. null (404)
+   simply renders nothing. */
+function JobCover({ jobId }) {
+  const [url, setUrl] = useState(null)
+  useEffect(() => {
+    let alive = true
+    let objectUrl = null
+    jobsApi.fetchImageUrl(jobId)
+      .then((u) => {
+        if (!alive) { if (u) URL.revokeObjectURL(u); return }
+        objectUrl = u
+        setUrl(u)
+      })
+      .catch(() => {})
+    return () => { alive = false; if (objectUrl) URL.revokeObjectURL(objectUrl) }
+  }, [jobId])
+  if (!url) return null
+  return <img src={url} alt="Job cover" className="job-cover" />
+}
+
 function JobDetail({
   job: j, canEdit, canDelete, statusBusy, deleteBusy, onClose, onPublish, onEdit, onStatus, onDelete,
 }) {
@@ -902,6 +936,8 @@ function JobDetail({
         </>
       }
     >
+      <JobCover jobId={j.id} />
+
       <div className="flex items-center gap-16 mb-18">
         <span className="kpi-icn i-indigo" style={{ width: 52, height: 52, borderRadius: 14 }}>
           <Icon name="briefcase" />
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 76cd39b..db18a1a 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1045,6 +1045,9 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .email-plain { border-radius: 0 0 10px 10px; }
 
 /* Upload dropzone */
+/* Job detail cover image — banner above the info grid. */
+.job-cover { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-sunken); margin-bottom: 18px; }
+
 .dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center; transition: .18s; background: var(--bg-sunken); cursor: pointer; }
 .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); transform: scale(1.005); }
 .dropzone .dz-icn { width: 64px; height: 64px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin: 0 auto 16px; }

From ccec7d48dbbee1ca86f524f95bd602e459556f68 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 16:34:04 +0500
Subject: [PATCH 17/22] Job cover images: move storage from disk into the
 database
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Production containers have ephemeral filesystems, so the disk-backed
image from the previous commit would vanish on redeploy. New
job_post_images table (bytea, PK = job_posts FK so re-upload replaces),
created everywhere by manual migration 009 which run_manual_sql applies
automatically at startup — prod boots with DB_AUTOGENERATE=false and
never autogenerates tables. Upload/fetch endpoints unchanged for the
frontend; fetch now serves bytes from the row. The one locally stored
disk image was imported into the table and backend/uploads removed.

E2E re-verified: create-with-image 200, fetch 200, cover renders.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .gitignore                                    |  2 +-
 backend/job/app.py                            | 15 ++---
 backend/job/job_post/models.py                | 44 ++++++++++++++
 backend/job/job_post/views.py                 | 60 +++++++++----------
 .../migrations/manual/009_job_post_images.sql | 21 +++++++
 5 files changed, 101 insertions(+), 41 deletions(-)
 create mode 100644 backend/migrations/manual/009_job_post_images.sql

diff --git a/.gitignore b/.gitignore
index 83a125d..424b7ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,7 +57,7 @@ temp/
 node_modules/
 frontend/dist/
 
-# Uploaded content (job cover images, …) — user data, never in git
+# Uploaded content — user data, never in git
 backend/uploads/
 
 **.pdf
diff --git a/backend/job/app.py b/backend/job/app.py
index 9c6d2e6..034c28a 100644
--- a/backend/job/app.py
+++ b/backend/job/app.py
@@ -305,8 +305,8 @@ async def upload_job_image(
     )),
     session: AsyncSession = Depends(get_session),
 ):
-    """Attach (or replace) the cover image of a job post. Stored on disk keyed
-    by the post id; the create flow calls this right after /job/post-job."""
+    """Attach (or replace) the cover image of a job post. Stored in the
+    job_post_images table; the create flow calls this right after /job/post-job."""
     try:
         content=await file.read()
         service=JobPost(session=session)
@@ -328,14 +328,15 @@ async def fetch_job_image(
     )),
     session: AsyncSession = Depends(get_session),
 ):
-    """The stored cover image, served inline; 404 when the post has none."""
+    """The stored cover image, served inline from the database; 404 when the
+    post has none."""
     try:
         service=JobPost(session=session)
-        path,media_type=await service.get_job_image(job_post_id)
-        return FileResponse(
-            path=str(path),
+        content,media_type=await service.get_job_image(job_post_id)
+        return Response(
+            content=content,
             media_type=media_type,
-            content_disposition_type="inline",
+            headers={"Content-Disposition":"inline"},
         )
     except HTTPException:
         raise
diff --git a/backend/job/job_post/models.py b/backend/job/job_post/models.py
index 1f6277b..54169ad 100644
--- a/backend/job/job_post/models.py
+++ b/backend/job/job_post/models.py
@@ -278,6 +278,50 @@ class JobPosts(SQLModel, table=True):
         return await cls.get_job_post_by_id(session, record_id)
 
 
+class JobPostImages(SQLModel, table=True):
+    """Cover image of a job post, stored as bytes IN the database.
+
+    Deliberately not on disk: production containers have ephemeral filesystems,
+    so a file-backed image dies on every redeploy. One row per post — the PK is
+    the job_posts FK, which makes re-upload a plain replace. Created in prod by
+    migrations/manual/009_job_post_images.sql (autogen is off there)."""
+
+    __tablename__ = "job_post_images"
+
+    job_post_id: uuid.UUID = Field(primary_key=True, foreign_key="job_posts.id")
+    content_type: str
+    file_name: str | None = Field(default=None)
+    data: bytes
+    uploaded_by: uuid.UUID | None = Field(default=None, foreign_key="users.id")
+    created_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+    updated_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+
+    @classmethod
+    async def get(cls, session: AsyncSession, job_post_id: uuid.UUID):
+        result = await session.execute(select(cls).where(cls.job_post_id == job_post_id))
+        return result.scalars().first()
+
+    @classmethod
+    async def upsert(cls, session: AsyncSession, job_post_id: uuid.UUID, *,
+                     content_type: str, file_name: str | None, data: bytes,
+                     uploaded_by: uuid.UUID | None):
+        row = await cls.get(session, job_post_id)
+        if row:
+            row.content_type = content_type
+            row.file_name = file_name
+            row.data = data
+            row.uploaded_by = uploaded_by
+            row.updated_at = _now()
+        else:
+            row = cls(
+                job_post_id=job_post_id, content_type=content_type,
+                file_name=file_name, data=data, uploaded_by=uploaded_by,
+            )
+            session.add(row)
+        await session.commit()
+        return row
+
+
 class SocialPlatform(SQLModel, table=True):
     """Buffer publish aliases (fb → facebook). Spelling tolerance + UI list, not an allowlist."""
 
diff --git a/backend/job/job_post/views.py b/backend/job/job_post/views.py
index 3a47a14..26bbfba 100644
--- a/backend/job/job_post/views.py
+++ b/backend/job/job_post/views.py
@@ -9,7 +9,7 @@ from dotenv import load_dotenv
 from fastapi import HTTPException
 from sqlalchemy.ext.asyncio import AsyncSession
 from pydantic import BaseModel, model_validator
-from job.job_post.models import JobPosts,SocialPlatform
+from job.job_post.models import JobPostImages,JobPosts,SocialPlatform
 from job.job_post.plugins import (
     BufferError,
     create_buffer_post,
@@ -25,32 +25,21 @@ from job.job_post.serializers import serialize_job_post, serialize_job_row
 load_dotenv()
 logger=logging.getLogger("job.job_post")
 
-# Cover images are stored on disk keyed by the job post id — no DB column, so
-# no migration. One image per post: uploading again replaces the previous file.
-JOB_IMAGE_DIR=Path(os.getenv("JOB_IMAGE_DIR") or Path(__file__).resolve().parents[2]/"uploads"/"job_images")
-IMAGE_EXT_BY_TYPE={"image/png":"png","image/jpeg":"jpg","image/webp":"webp","image/gif":"gif"}
-IMAGE_MEDIA_BY_EXT={"png":"image/png","jpg":"image/jpeg","jpeg":"image/jpeg","webp":"image/webp","gif":"image/gif"}
+# Cover images live in the job_post_images table (bytea), NOT on disk:
+# production containers have ephemeral filesystems, so a file-backed image
+# would vanish on every redeploy. One row per post; re-upload replaces it.
+ALLOWED_IMAGE_TYPES={"image/png","image/jpeg","image/webp","image/gif"}
+IMAGE_TYPE_BY_EXT={"png":"image/png","jpg":"image/jpeg","jpeg":"image/jpeg","webp":"image/webp","gif":"image/gif"}
 MAX_JOB_IMAGE_BYTES=5*1024*1024
 
 
-def _job_image_key(job_post_id) -> str:
-    """The id is used as a filename — parse it as a UUID so a crafted value can
-    never traverse out of the image directory."""
+def _job_image_key(job_post_id) -> uuid.UUID:
     try:
-        return str(uuid.UUID(str(job_post_id)))
+        return uuid.UUID(str(job_post_id))
     except ValueError as e:
         raise HTTPException(status_code=422,detail="job_post_id must be a UUID") from e
 
 
-def find_job_image(job_post_id) -> Path | None:
-    key=_job_image_key(job_post_id)
-    for ext in IMAGE_MEDIA_BY_EXT:
-        p=JOB_IMAGE_DIR/f"{key}.{ext}"
-        if p.exists():
-            return p
-    return None
-
-
 class JobPostCreate(BaseModel):
     title: str
     experience_min: int | None = None
@@ -254,33 +243,38 @@ class JobPost:
         if not current_user:
             raise HTTPException(status_code=401,detail="Not authenticated")
         key=_job_image_key(job_post_id)
-        ext=IMAGE_EXT_BY_TYPE.get((content_type or "").lower())
-        if not ext:
+        media=(content_type or "").lower()
+        if media not in ALLOWED_IMAGE_TYPES:
             # Fall back to the filename extension; browsers occasionally send
             # application/octet-stream for perfectly valid images.
             suffix=Path((filename or "").replace("\\","/")).suffix.lstrip(".").lower()
-            ext=suffix if suffix in IMAGE_MEDIA_BY_EXT else None
-        if not ext:
+            media=IMAGE_TYPE_BY_EXT.get(suffix)
+        if not media:
             raise HTTPException(status_code=415,detail="Image must be PNG, JPG, WEBP or GIF")
         if not content:
             raise HTTPException(status_code=400,detail="Empty image upload")
         if len(content)>MAX_JOB_IMAGE_BYTES:
             raise HTTPException(status_code=413,detail="Image must be under 5 MB")
-        rows,total=await JobPosts.fetch_job_posts(self.session,ids=[key],active_only=False)
+        rows,total=await JobPosts.fetch_job_posts(self.session,ids=[str(key)],active_only=False)
         if not total:
             raise HTTPException(status_code=404,detail="Job post not found")
-        JOB_IMAGE_DIR.mkdir(parents=True,exist_ok=True)
-        # Replace, never accumulate: drop any previous image regardless of format.
-        for old_ext in IMAGE_MEDIA_BY_EXT:
-            (JOB_IMAGE_DIR/f"{key}.{old_ext}").unlink(missing_ok=True)
-        (JOB_IMAGE_DIR/f"{key}.{ext}").write_bytes(content)
-        return {"job_post_id":key,"has_image":True}
+        raw_user=(current_user or {}).get("id")
+        uploaded_by=uuid.UUID(str(raw_user)) if raw_user else None
+        await JobPostImages.upsert(
+            self.session,key,
+            content_type=media,
+            file_name=Path((filename or "").replace("\\","/")).name or None,
+            data=content,
+            uploaded_by=uploaded_by,
+        )
+        return {"job_post_id":str(key),"has_image":True}
 
     async def get_job_image(self,job_post_id):
-        path=find_job_image(job_post_id)
-        if not path:
+        key=_job_image_key(job_post_id)
+        row=await JobPostImages.get(self.session,key)
+        if not row:
             raise HTTPException(status_code=404,detail="No image for this job post")
-        return path,IMAGE_MEDIA_BY_EXT[path.suffix.lstrip(".").lower()]
+        return row.data,row.content_type
 
     async def set_job_status(self,job_post_id,payload,current_user):
         if not current_user:
diff --git a/backend/migrations/manual/009_job_post_images.sql b/backend/migrations/manual/009_job_post_images.sql
new file mode 100644
index 0000000..36f4d8a
--- /dev/null
+++ b/backend/migrations/manual/009_job_post_images.sql
@@ -0,0 +1,21 @@
+-- 009_job_post_images.sql
+-- Cover images of job posts, stored IN the database (bytea) rather than on the
+-- container filesystem, which is ephemeral in production — a disk-backed image
+-- would vanish on every redeploy. One row per post: the PK doubles as the FK,
+-- so a re-upload is a plain replace. 5 MB cap and type checks are enforced by
+-- the API layer (backend/job/job_post/views.py save_job_image).
+--
+-- Idempotent, applied automatically at startup by alembic_setup.run_manual_sql()
+-- and recorded in manual_migrations. Matches the SQLModel JobPostImages model in
+-- backend/job/job_post/models.py (needed here because prod boots with
+-- DB_AUTOGENERATE=false and never autogenerates new tables).
+
+CREATE TABLE IF NOT EXISTS app.job_post_images (
+    job_post_id  uuid PRIMARY KEY REFERENCES app.job_posts(id) ON DELETE CASCADE,
+    content_type varchar NOT NULL,
+    file_name    varchar,
+    data         bytea NOT NULL,
+    uploaded_by  uuid REFERENCES app.users(id),
+    created_at   timestamptz NOT NULL DEFAULT NOW(),
+    updated_at   timestamptz NOT NULL DEFAULT NOW()
+);

From d1ca1e933db6fe9c90b5840f3edc183e07cc573c Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 19:11:13 +0500
Subject: [PATCH 18/22] =?UTF-8?q?CV=20Import:=20No-Job=20mode=20=E2=80=94?=
 =?UTF-8?q?=20store=20CVs=20in=20the=20CV=20bank?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The job picker gains a No job / store in CV bank option: files upload
one-per-request through the existing POST /candidate/cv_upload pipeline
(email auto-detected from the CV, saved as an UNASSIGNED inbox item with
background job suggestions) instead of being scored. Queue rows show
Stored plus the detected email; a CV with no detectable email fails
alone with a clear message. In this mode the scored grid gives way to a
panel linking Job Matching and the Inbox, where stored CVs are browsed
and later assigned. Also guarded the matcher enqueue in ingest_upload:
with the broker down the upload used to 500 after the row was inserted.

E2E-verified: two CVs stored (emails detected), rows visible in DB with
assigned_job_post_id NULL, both surfaced in Job Matching and the Inbox.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 backend/job/candidate/views.py    |  19 +++--
 frontend/dist/index.html          |   2 +-
 frontend/src/api/candidates.js    |  13 +++
 frontend/src/screens/CvImport.jsx | 135 +++++++++++++++++++++++++-----
 4 files changed, 141 insertions(+), 28 deletions(-)

diff --git a/backend/job/candidate/views.py b/backend/job/candidate/views.py
index eeb29d5..b715b1c 100644
--- a/backend/job/candidate/views.py
+++ b/backend/job/candidate/views.py
@@ -182,11 +182,18 @@ class FileRead:
         )
 
         created_at=datetime.now(timezone.utc).isoformat()
-        task=await match_uploaded_cv.kicker().with_labels(
-            created_at=created_at,
-            correlation_id=str(row.id),
-            queue=CV_QUEUE_NAME,
-        ).kiq(str(row.id),force=False)
+        # Enqueue failure must not fail the upload: the CV row is already
+        # persisted, and with the broker down (optional locally) the kiq call
+        # raises a connection error. Suggestions just arrive later, or never.
+        try:
+            task=await match_uploaded_cv.kicker().with_labels(
+                created_at=created_at,
+                correlation_id=str(row.id),
+                queue=CV_QUEUE_NAME,
+            ).kiq(str(row.id),force=False)
+        except Exception as e:
+            logger.warning("cv match enqueue skipped for %s: %s",row.id,e)
+            task=None
 
         account_setup=None
         if new_user_email:
@@ -218,7 +225,7 @@ class FileRead:
         return {
             "queued":True,
             "inbox_message_id":str(row.id),
-            "task_id":task.task_id,
+            "task_id":task.task_id if task else None,
             "filename":parsed.get("filename"),
             "num_pages":parsed.get("num_pages"),
             "candidate_email":email,
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 81a6875..351c9de 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,7 +24,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-D-zYfH3L.js"></script>
+    <script type="module" crossorigin src="/assets/index-BkPc2-Gs.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BwYjpKNo.css">
   </head>
   <body>
diff --git a/frontend/src/api/candidates.js b/frontend/src/api/candidates.js
index b2a6ed0..d1c854b 100644
--- a/frontend/src/api/candidates.js
+++ b/frontend/src/api/candidates.js
@@ -53,6 +53,19 @@ export function scoreUploads(jobId, files) {
   return request('/candidate/score', { method: 'POST', body: form })
 }
 
+/**
+ * Store one CV in the bank with NO job attached — POST /candidate/cv_upload.
+ * Needs candidates.create. The backend saves the PDF, detects the candidate's
+ * email from the CV text (422 CANDIDATE_EMAIL_REQUIRED when none is found),
+ * and lands it as an UNASSIGNED inbox item; the async matcher only fills job
+ * suggestions. One file per request.
+ */
+export function uploadCv(file) {
+  const form = new FormData()
+  form.append('file', file, file.name)
+  return request('/candidate/cv_upload', { method: 'POST', body: form })
+}
+
 /**
  * Score the decoded attachments of inbox messages against a job post.
  * Needs candidates.create. messageIds are inbox_messages PK uuids (the `id`
diff --git a/frontend/src/screens/CvImport.jsx b/frontend/src/screens/CvImport.jsx
index 5ae729b..9ad848a 100644
--- a/frontend/src/screens/CvImport.jsx
+++ b/frontend/src/screens/CvImport.jsx
@@ -1,15 +1,20 @@
 /* ============================================================
-   CV Import — real upload → score → persist flow.
+   CV Import — two modes behind one dropzone.
 
-   Files go to POST /candidate/score as one multipart batch: the backend
-   extracts each PDF, scores it against the selected job with the ATS engine,
-   and persists a row per file. Unreadable/oversized/non-PDF files come back
-   as status "failed" rows instead of failing the batch, and re-uploading the
-   same bytes updates the existing record (content-hash dedupe) — so there is
-   no separate "import" step and no duplicate modal anymore.
+   Score mode: files go to POST /candidate/score as one multipart batch —
+   each PDF is extracted, scored against the selected job, persisted a row
+   per file. Unreadable/oversized files come back as "failed" rows, and
+   re-uploading the same bytes updates the existing record.
+
+   No-Job mode ("store in CV bank"): each file goes to POST
+   /candidate/cv_upload individually — parsed, the candidate email detected
+   from the CV text, and stored as an UNASSIGNED inbox item. Nothing is
+   scored; the async matcher only suggests jobs. Stored CVs are viewed in
+   Job Matching and the Recruitment Inbox.
    ============================================================ */
 
 import { useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import PageHeader from '../ui/PageHeader'
@@ -20,13 +25,23 @@ import { qk } from '../lib/queryKeys'
 import { friendlyAuthError } from '../lib/errors'
 import * as candidatesApi from '../api/candidates'
 
-const STEPS = [
+/* Sentinel for the job picker: store CVs without scoring or assignment. */
+const NO_JOB = '__none__'
+
+const SCORE_STEPS = [
   { i: 'file', t: 'Resume parsing', d: 'PDF text extraction with layout cleanup' },
   { i: 'target', t: 'ATS scoring', d: 'LLM match score with matched & missing skills vs the selected job' },
   { i: 'users', t: 'Duplicate detection', d: 'Re-uploading the same file updates its existing record' },
   { i: 'user-plus', t: 'Saved to pool', d: 'Results persist — see Candidates and Talent Pool' },
 ]
 
+const STORE_STEPS = [
+  { i: 'file', t: 'Resume parsing', d: 'PDF text extraction with layout cleanup' },
+  { i: 'users', t: 'Candidate identified', d: 'Email auto-detected from the CV — a CV without one is rejected' },
+  { i: 'target', t: 'Job suggestions', d: 'Fitting jobs are suggested in the background — nothing is scored or assigned' },
+  { i: 'user-plus', t: 'Saved to CV bank', d: 'Stored unassigned — view in Job Matching or the Recruitment Inbox' },
+]
+
 async function fetchJobs() {
   const res = await candidatesApi.listJobs()
   const rows = Array.isArray(res?.data) ? res.data : []
@@ -93,11 +108,49 @@ export default function CvImport() {
     },
   })
 
+  /* No-Job mode: one request per file, so one unreadable CV (or one with no
+     detectable email) fails alone and the rest of the batch still lands. */
+  const storing = useMutation({
+    mutationFn: async ({ files, rowIds }) => {
+      const results = []
+      for (let k = 0; k < files.length; k++) {
+        try {
+          const res = await candidatesApi.uploadCv(files[k])
+          results.push({ rowId: rowIds[k], ok: true, email: res?.data?.candidate_email ?? null })
+        } catch (err) {
+          const code = err?.data?.detail?.error_code
+          results.push({ rowId: rowIds[k], ok: false, error: code === 'CANDIDATE_EMAIL_REQUIRED' ? 'NO_EMAIL' : 'FAILED' })
+        }
+      }
+      return results
+    },
+    onSuccess: (results) => {
+      setQueue((q) =>
+        q.map((item) => {
+          const r = results.find((x) => x.rowId === item.id)
+          if (!r) return item
+          return r.ok
+            ? { ...item, status: 'Stored', email: r.email }
+            : { ...item, status: 'Failed', error: r.error }
+        }),
+      )
+      qc.invalidateQueries({ queryKey: qk.mailbox.all() })
+      const ok = results.filter((r) => r.ok).length
+      const bad = results.length - ok
+      toast(
+        bad
+          ? `${ok} stored, ${bad} failed — see the queue for details`
+          : `${ok} CV${ok === 1 ? '' : 's'} stored in the CV bank`,
+        bad ? 'warning' : 'success',
+      )
+    },
+  })
+
   function handleFiles(fileList) {
     const all = Array.from(fileList || [])
     if (!all.length) return
     if (!jobId) {
-      toast('Select a job to score against first', 'warning')
+      toast('Select a job — or "No job" to just store the CVs', 'warning')
       return
     }
     const files = all.filter((f) => f.name.toLowerCase().endsWith('.pdf'))
@@ -105,29 +158,35 @@ export default function CvImport() {
     if (skipped) toast(`Only PDF resumes are supported — ${skipped} file(s) skipped`, 'warning')
     if (!files.length) return
 
+    const noJob = jobId === NO_JOB
     const items = files.map((f) => ({
       id: `UP-${++rowSeq}-${Date.now()}`,
       name: f.name,
       file: f.name,
       size: fmtSize(f.size),
-      status: 'Scoring',
+      status: noJob ? 'Storing' : 'Scoring',
       atsScore: null,
       critique: null,
+      email: null,
       error: null,
     }))
     setQueue((q) => [...q, ...items])
-    scoring.mutate({ job: jobId, files, rowIds: items.map((i) => i.id) })
+    const rowIds = items.map((i) => i.id)
+    if (noJob) storing.mutate({ files, rowIds })
+    else scoring.mutate({ job: jobId, files, rowIds })
   }
 
   const scored = queue.filter((i) => i.status === 'Ready').length
+  const stored = queue.filter((i) => i.status === 'Stored').length
   const failed = queue.filter((i) => i.status === 'Failed').length
   const selectedJob = jobs.find((j) => j.id === jobId)
+  const noJobMode = jobId === NO_JOB
 
   return (
     <div className="page">
       <PageHeader
         title="CV Import"
-        sub="Upload resume PDFs — parsed, scored against a job, and saved automatically"
+        sub="Upload resume PDFs — score them against a job, or store them in the CV bank"
         actions={<span className="integration-status pending"><span className="pulse" />AI Resume Scoring · Live</span>}
       />
 
@@ -143,6 +202,7 @@ export default function CvImport() {
                   onChange={(e) => setJobId(e.target.value)}
                 >
                   <option value="">Select a job post…</option>
+                  <option value={NO_JOB}>No job — store in CV bank</option>
                   {jobs.map((j) => <option key={j.id} value={j.id}>{j.title}</option>)}
                 </select>
               </div>
@@ -196,7 +256,9 @@ export default function CvImport() {
                 <div>
                   <h3>Processing Queue</h3>
                   <span className="ch-sub">
-                    {queue.length} file{queue.length === 1 ? '' : 's'} · {scored} scored
+                    {queue.length} file{queue.length === 1 ? '' : 's'}
+                    {scored ? ` · ${scored} scored` : ''}
+                    {stored ? ` · ${stored} stored` : ''}
                     {failed ? ` · ${failed} failed` : ''}
                     {selectedJob ? ` · vs ${selectedJob.title}` : ''}
                   </span>
@@ -211,7 +273,7 @@ export default function CvImport() {
                         <span className="fw-600 text-sm">{i.name}</span>
                       </div>
                       <div className="cell-sub">{i.file} · {i.size}</div>
-                      {i.status === 'Scoring' && (
+                      {(i.status === 'Scoring' || i.status === 'Storing') && (
                         <div className="upload-progress" style={{ marginTop: 6 }}>
                           <div className="upload-progress-fill" style={{ width: '66%' }} />
                         </div>
@@ -219,17 +281,26 @@ export default function CvImport() {
                       {i.status === 'Ready' && i.critique && (
                         <div className="cell-sub" style={{ marginTop: 4 }}>{i.critique}</div>
                       )}
+                      {i.status === 'Stored' && i.email && (
+                        <div className="cell-sub" style={{ marginTop: 4 }}>Candidate email: {i.email}</div>
+                      )}
                       {i.status === 'Failed' && (
-                        <div className="cell-sub" style={{ marginTop: 4 }}>Could not be scored</div>
+                        <div className="cell-sub" style={{ marginTop: 4 }}>
+                          {i.error === 'NO_EMAIL'
+                            ? 'No email found in this CV — add the candidate manually with an email instead'
+                            : 'Could not be processed'}
+                        </div>
                       )}
                     </div>
                     <div style={{ textAlign: 'right', flexShrink: 0 }}>
                       {i.status === 'Ready' && <ScoreChip score={i.atsScore} />}
                       {i.status === 'Scoring' && <Badge className="b-blue">Scoring…</Badge>}
+                      {i.status === 'Storing' && <Badge className="b-blue">Storing…</Badge>}
                       {i.status === 'Failed' && <Badge className="b-red">{i.error}</Badge>}
                     </div>
                     <div style={{ flexShrink: 0 }}>
                       {i.status === 'Ready' && <Badge className="b-green">Saved</Badge>}
+                      {i.status === 'Stored' && <Badge className="b-green">Stored</Badge>}
                     </div>
                   </div>
                 ))}
@@ -239,7 +310,7 @@ export default function CvImport() {
 
           {queue.length === 0 && jobsQuery.isSuccess && jobs.length === 0 && (
             <EmptyState icon="briefcase" title="No job posts yet">
-              Create a job post first — resumes are always scored against a job.
+              Create a job post to score against — or pick “No job — store in CV bank” above to just save CVs.
             </EmptyState>
           )}
         </div>
@@ -248,7 +319,7 @@ export default function CvImport() {
           <div className="card-head"><div><h3>Auto-Processing</h3><span className="ch-sub">What happens on upload</span></div></div>
           <div className="card-body">
             <div className="timeline">
-              {STEPS.map((s) => (
+              {(noJobMode ? STORE_STEPS : SCORE_STEPS).map((s) => (
                 <div className="tl-item" key={s.t}>
                   <div className="tl-dot"><Icon name={s.i} /></div>
                   <div className="tl-title">{s.t}</div>
@@ -260,10 +331,32 @@ export default function CvImport() {
         </div>
       </div>
 
-      {/* Everything ever scored against the selected job — this batch, earlier
-          uploads and synced inbox CVs alike. The scoring mutation invalidates
-          qk.candidates.all(), so the grid refreshes as each batch lands. */}
-      <JobCandidates jobId={jobId} jobTitle={selectedJob?.title} />
+      {/* No-Job mode has no scored grid — point at where the bank is browsed. */}
+      {noJobMode ? (
+        <div className="card mt-18">
+          <div className="card-body flex items-center gap-16 flex-wrap">
+            <span className="kpi-icn i-teal" style={{ width: 44, height: 44, borderRadius: 12, flexShrink: 0 }}>
+              <Icon name="talent" />
+            </span>
+            <div style={{ flex: 1, minWidth: 220 }}>
+              <div className="fw-600">Stored CVs live in the CV bank</div>
+              <div className="text-muted text-sm">
+                They stay unassigned until you attach them to a job — review them with suggested
+                matches in Job Matching, or browse them in the Recruitment Inbox.
+              </div>
+            </div>
+            <div className="flex items-center gap-8" style={{ flexShrink: 0 }}>
+              <Link className="btn btn-secondary" to="/matching"><Icon name="target" /> Job Matching</Link>
+              <Link className="btn btn-secondary" to="/inbox"><Icon name="inbox" /> Inbox</Link>
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Everything ever scored against the selected job — this batch, earlier
+           uploads and synced inbox CVs alike. The scoring mutation invalidates
+           qk.candidates.all(), so the grid refreshes as each batch lands. */
+        <JobCandidates jobId={jobId} jobTitle={selectedJob?.title} />
+      )}
     </div>
   )
 }

From 9f610a9078cccb8e98f0fb134e973fd8fd89e39a Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 19:20:38 +0500
Subject: [PATCH 19/22] CV bank: private storage for No-Job CV imports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Storing a CV without a job no longer rides the cv_upload pipeline, which
created a candidate user account and an inbox row — stored CVs were
leaking into the Candidates screen. New cv-bank endpoints instead write
apply_via=cv_bank rows in manual_upload_candidate (nullable user/job
FKs): file + parsed text only, no account, no inbox entry, no scoring,
and email is optional (captured when the CV contains one). The CV Import
screen now shows the bank itself below the dropzone — browse, download
(existing /documents/download route) and delete.

E2E-verified: uploads land as BANKED rows with user_id NULL, zero new
accounts or inbox rows, UI delete works, Candidates screen unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 backend/job/app.py                |  88 ++++++++++++++++++
 backend/job/candidate/models.py   |  55 ++++++++++++
 frontend/dist/index.html          |   4 +-
 frontend/src/api/candidates.js    |  28 ++++--
 frontend/src/lib/queryKeys.js     |   4 +
 frontend/src/screens/CvImport.jsx | 145 +++++++++++++++++++++---------
 6 files changed, 274 insertions(+), 50 deletions(-)

diff --git a/backend/job/app.py b/backend/job/app.py
index 034c28a..3c1c49d 100644
--- a/backend/job/app.py
+++ b/backend/job/app.py
@@ -257,6 +257,94 @@ async def cv_upload(
         raise HTTPException(status_code=500,detail=str(e))
 
 
+@router.post("/candidate/cv-bank/upload")
+async def cv_bank_upload(
+    file: UploadFile = File(...),
+    current_user: dict = Depends(require_permission(PermissionTag.CANDIDATES_CREATE)),
+    session: AsyncSession = Depends(get_session),
+):
+    """Store a CV in the bank: the file plus its parsed text, nothing else.
+    No job, no user account, no inbox entry, no scoring — the CV waits until a
+    recruiter picks it up. Email/name are captured only if the CV contains them."""
+    from job.candidate.models import Manual_UPLOAD_CANDIDATE
+    from job.candidate.plugins import extract_candidate_email
+    saved_path=None
+    try:
+        content=await file.read()
+        reader=FileRead(session=session,filename=file.filename,file=content)
+        parsed=await reader.injest_manual_upload()   # 400 on unreadable/empty PDF
+        saved=await reader.save_manual_upload()
+        saved_path=saved.get("file_path")
+        text=parsed.get("text") or ""
+        detected,_=extract_candidate_email(text)
+        row=await Manual_UPLOAD_CANDIDATE.insert_bank_cv(
+            session,
+            candidate_email=detected or "",
+            candidate_name="",
+            full_text=text,
+            file_name=saved.get("file_name"),
+            file_path=saved_path,
+            created_by=current_user.get("id"),
+        )
+        return JSONResponse(content={"data":{
+            "id":str(row.id),
+            "file_name":row.file_name,
+            "candidate_email":row.candidate_email or None,
+            "created_at":row.created_at.isoformat() if row.created_at else None,
+        },"status_code":200})
+    except HTTPException:
+        FileRead.discard_upload(saved_path)
+        raise
+    except Exception as e:
+        FileRead.discard_upload(saved_path)
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.get("/candidate/cv-bank/fetch")
+async def cv_bank_fetch(
+    top: int = Query(100, ge=1, le=500),
+    skip: int = Query(0, ge=0),
+    current_user: dict = Depends(require_permission(PermissionTag.CANDIDATES_VIEW)),
+    session: AsyncSession = Depends(get_session),
+):
+    """The stored-CV bank, newest first. Download the file via
+    GET /documents/download?manual_upload_candidate_id=<id>."""
+    from job.candidate.models import Manual_UPLOAD_CANDIDATE
+    try:
+        rows,total=await Manual_UPLOAD_CANDIDATE.list_bank(session,limit=top,offset=skip)
+        data=[{
+            "id":str(r.id),
+            "file_name":r.file_name,
+            "candidate_email":r.candidate_email or None,
+            "candidate_name":r.candidate_name or None,
+            "created_at":r.created_at.isoformat() if r.created_at else None,
+        } for r in rows]
+        return JSONResponse(content={"data":data,"total":total,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.delete("/candidate/cv-bank/delete")
+async def cv_bank_delete(
+    id: str = Query(...),
+    current_user: dict = Depends(require_permission(PermissionTag.CANDIDATES_DELETE)),
+    session: AsyncSession = Depends(get_session),
+):
+    from job.candidate.models import Manual_UPLOAD_CANDIDATE
+    try:
+        row=await Manual_UPLOAD_CANDIDATE.delete_bank_cv(session,id)
+        if not row:
+            raise HTTPException(status_code=404,detail="CV not found in the bank")
+        FileRead.discard_upload(row.file_path)
+        return JSONResponse(content={"data":{"id":str(row.id),"deleted":True},"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
 @router.post("/candidate/inbox-match")
 async def candidate_inbox_match(
     inbox_message_id: str = Query(...),
diff --git a/backend/job/candidate/models.py b/backend/job/candidate/models.py
index 09a72e6..54aa258 100644
--- a/backend/job/candidate/models.py
+++ b/backend/job/candidate/models.py
@@ -240,6 +240,61 @@ class Manual_UPLOAD_CANDIDATE(SQLModel, table=True):
         result = await session.execute(select(cls).where(cls.id == uid))
         return result.scalars().first()
 
+    # ---- CV bank -----------------------------------------------------------
+    # apply_via="cv_bank" rows are a private store of CVs with NO job, NO user
+    # account and NO inbox entry — deliberately invisible to Candidates,
+    # Pipeline (whose list inner-joins Users/JobPosts) and the Inbox. They wait
+    # until a recruiter picks them up; email is captured only when the CV
+    # contains one.
+
+    @classmethod
+    async def insert_bank_cv(cls, session: AsyncSession, *, candidate_email,
+                             candidate_name, full_text, file_name, file_path,
+                             created_by):
+        row = cls(
+            candidate_email=(candidate_email or "").strip().lower(),
+            candidate_name=(candidate_name or "").strip(),
+            job_post_id=None,
+            full_text=full_text or "",
+            linkedin_slug=primary_slug_from_text(full_text or ""),
+            apply_via="cv_bank",
+            user_id=None,
+            created_by=cls._as_uuid(created_by),
+            status="BANKED",
+            file_name=(file_name or "").strip(),
+            file_path=(file_path or "").strip(),
+        )
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def list_bank(cls, session: AsyncSession, limit=100, offset=0):
+        total = (
+            await session.execute(
+                select(func.count()).select_from(cls).where(cls.apply_via == "cv_bank")
+            )
+        ).scalar() or 0
+        result = await session.execute(
+            select(cls)
+            .where(cls.apply_via == "cv_bank")
+            .order_by(cls.created_at.desc(), cls.id.desc())
+            .limit(limit)
+            .offset(offset)
+        )
+        return list(result.scalars().all()), total
+
+    @classmethod
+    async def delete_bank_cv(cls, session: AsyncSession, record_id):
+        """Hard delete, bank rows only — never reachable for application rows."""
+        row = await cls.get_by_id(session, record_id)
+        if not row or row.apply_via != "cv_bank":
+            return None
+        await session.delete(row)
+        await session.commit()
+        return row
+
 
 class Candidates(SQLModel, table=True):
 
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 351c9de..cbca26d 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,8 +24,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-BkPc2-Gs.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BwYjpKNo.css">
+    <script type="module" crossorigin src="/assets/index-_PGQLp_7.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C1VjJy57.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/api/candidates.js b/frontend/src/api/candidates.js
index d1c854b..1afa119 100644
--- a/frontend/src/api/candidates.js
+++ b/frontend/src/api/candidates.js
@@ -54,16 +54,30 @@ export function scoreUploads(jobId, files) {
 }
 
 /**
- * Store one CV in the bank with NO job attached — POST /candidate/cv_upload.
- * Needs candidates.create. The backend saves the PDF, detects the candidate's
- * email from the CV text (422 CANDIDATE_EMAIL_REQUIRED when none is found),
- * and lands it as an UNASSIGNED inbox item; the async matcher only fills job
- * suggestions. One file per request.
+ * CV bank — a private store of CVs with NO job, NO user account and NO inbox
+ * entry (POST /candidate/cv-bank/upload). Nothing is scored; the file just
+ * waits until a recruiter picks it up. Email is captured only when the CV
+ * contains one. One file per request. Needs candidates.create.
  */
-export function uploadCv(file) {
+export function uploadToCvBank(file) {
   const form = new FormData()
   form.append('file', file, file.name)
-  return request('/candidate/cv_upload', { method: 'POST', body: form })
+  return request('/candidate/cv-bank/upload', { method: 'POST', body: form })
+}
+
+/** The stored-CV bank, newest first — GET /candidate/cv-bank/fetch. */
+export function listCvBank({ top = 100, skip = 0 } = {}) {
+  return request('/candidate/cv-bank/fetch', { params: { top, skip } })
+}
+
+/** Permanently remove a stored CV (file included). Needs candidates.delete. */
+export function deleteCvBankCv(id) {
+  return request('/candidate/cv-bank/delete', { method: 'DELETE', params: { id } })
+}
+
+/** Browser-save a stored CV's PDF via the existing documents route. */
+export function downloadCvBankCv(id) {
+  return downloadFile('/documents/download', { params: { manual_upload_candidate_id: id } })
 }
 
 /**
diff --git a/frontend/src/lib/queryKeys.js b/frontend/src/lib/queryKeys.js
index 1c750f2..be22737 100644
--- a/frontend/src/lib/queryKeys.js
+++ b/frontend/src/lib/queryKeys.js
@@ -34,6 +34,10 @@ export const qk = {
     list: (p = {}) => ['assessments', 'list', p],
     counts: () => ['assessments', 'counts'],
   },
+  cvBank: {
+    all: () => ['cvBank'],
+    list: () => ['cvBank', 'list'],
+  },
   notifications: {
     all: () => ['notifications'],
     list: (p = {}) => ['notifications', 'list', p],
diff --git a/frontend/src/screens/CvImport.jsx b/frontend/src/screens/CvImport.jsx
index 9ad848a..d544420 100644
--- a/frontend/src/screens/CvImport.jsx
+++ b/frontend/src/screens/CvImport.jsx
@@ -7,14 +7,13 @@
    re-uploading the same bytes updates the existing record.
 
    No-Job mode ("store in CV bank"): each file goes to POST
-   /candidate/cv_upload individually — parsed, the candidate email detected
-   from the CV text, and stored as an UNASSIGNED inbox item. Nothing is
-   scored; the async matcher only suggests jobs. Stored CVs are viewed in
-   Job Matching and the Recruitment Inbox.
+   /candidate/cv-bank/upload individually — parsed and stored as a private
+   bank row: no job, no user account, no inbox entry, no scoring. The bank
+   is listed right below the dropzone and is where stored CVs are browsed,
+   downloaded and (later) picked up for a job.
    ============================================================ */
 
 import { useRef, useState } from 'react'
-import { Link } from 'react-router-dom'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
 import PageHeader from '../ui/PageHeader'
@@ -37,9 +36,9 @@ const SCORE_STEPS = [
 
 const STORE_STEPS = [
   { i: 'file', t: 'Resume parsing', d: 'PDF text extraction with layout cleanup' },
-  { i: 'users', t: 'Candidate identified', d: 'Email auto-detected from the CV — a CV without one is rejected' },
-  { i: 'target', t: 'Job suggestions', d: 'Fitting jobs are suggested in the background — nothing is scored or assigned' },
-  { i: 'user-plus', t: 'Saved to CV bank', d: 'Stored unassigned — view in Job Matching or the Recruitment Inbox' },
+  { i: 'users', t: 'Details captured', d: 'Candidate email is picked up when the CV contains one' },
+  { i: 'target', t: 'Nothing else happens', d: 'No scoring, no candidate account, no inbox entry — just stored' },
+  { i: 'user-plus', t: 'Saved to CV bank', d: 'Browse, download or remove stored CVs in the bank below' },
 ]
 
 async function fetchJobs() {
@@ -108,18 +107,17 @@ export default function CvImport() {
     },
   })
 
-  /* No-Job mode: one request per file, so one unreadable CV (or one with no
-     detectable email) fails alone and the rest of the batch still lands. */
+  /* No-Job mode: one request per file, so one unreadable CV fails alone and
+     the rest of the batch still lands in the bank. */
   const storing = useMutation({
     mutationFn: async ({ files, rowIds }) => {
       const results = []
       for (let k = 0; k < files.length; k++) {
         try {
-          const res = await candidatesApi.uploadCv(files[k])
+          const res = await candidatesApi.uploadToCvBank(files[k])
           results.push({ rowId: rowIds[k], ok: true, email: res?.data?.candidate_email ?? null })
-        } catch (err) {
-          const code = err?.data?.detail?.error_code
-          results.push({ rowId: rowIds[k], ok: false, error: code === 'CANDIDATE_EMAIL_REQUIRED' ? 'NO_EMAIL' : 'FAILED' })
+        } catch {
+          results.push({ rowId: rowIds[k], ok: false, error: 'FAILED' })
         }
       }
       return results
@@ -134,7 +132,7 @@ export default function CvImport() {
             : { ...item, status: 'Failed', error: r.error }
         }),
       )
-      qc.invalidateQueries({ queryKey: qk.mailbox.all() })
+      qc.invalidateQueries({ queryKey: qk.cvBank.all() })
       const ok = results.filter((r) => r.ok).length
       const bad = results.length - ok
       toast(
@@ -281,15 +279,13 @@ export default function CvImport() {
                       {i.status === 'Ready' && i.critique && (
                         <div className="cell-sub" style={{ marginTop: 4 }}>{i.critique}</div>
                       )}
-                      {i.status === 'Stored' && i.email && (
-                        <div className="cell-sub" style={{ marginTop: 4 }}>Candidate email: {i.email}</div>
+                      {i.status === 'Stored' && (
+                        <div className="cell-sub" style={{ marginTop: 4 }}>
+                          {i.email ? `Candidate email: ${i.email}` : 'No email in the CV — stored anyway'}
+                        </div>
                       )}
                       {i.status === 'Failed' && (
-                        <div className="cell-sub" style={{ marginTop: 4 }}>
-                          {i.error === 'NO_EMAIL'
-                            ? 'No email found in this CV — add the candidate manually with an email instead'
-                            : 'Could not be processed'}
-                        </div>
+                        <div className="cell-sub" style={{ marginTop: 4 }}>Could not be processed</div>
                       )}
                     </div>
                     <div style={{ textAlign: 'right', flexShrink: 0 }}>
@@ -331,26 +327,9 @@ export default function CvImport() {
         </div>
       </div>
 
-      {/* No-Job mode has no scored grid — point at where the bank is browsed. */}
+      {/* No-Job mode swaps the scored grid for the bank itself. */}
       {noJobMode ? (
-        <div className="card mt-18">
-          <div className="card-body flex items-center gap-16 flex-wrap">
-            <span className="kpi-icn i-teal" style={{ width: 44, height: 44, borderRadius: 12, flexShrink: 0 }}>
-              <Icon name="talent" />
-            </span>
-            <div style={{ flex: 1, minWidth: 220 }}>
-              <div className="fw-600">Stored CVs live in the CV bank</div>
-              <div className="text-muted text-sm">
-                They stay unassigned until you attach them to a job — review them with suggested
-                matches in Job Matching, or browse them in the Recruitment Inbox.
-              </div>
-            </div>
-            <div className="flex items-center gap-8" style={{ flexShrink: 0 }}>
-              <Link className="btn btn-secondary" to="/matching"><Icon name="target" /> Job Matching</Link>
-              <Link className="btn btn-secondary" to="/inbox"><Icon name="inbox" /> Inbox</Link>
-            </div>
-          </div>
-        </div>
+        <CvBank />
       ) : (
         /* Everything ever scored against the selected job — this batch, earlier
            uploads and synced inbox CVs alike. The scoring mutation invalidates
@@ -360,3 +339,87 @@ export default function CvImport() {
     </div>
   )
 }
+
+/* The stored-CV bank — a private store with no job, account or inbox entry.
+   This list is the bank's home: browse, download, or remove; picking a CV up
+   for a job later is a future action. */
+function CvBank() {
+  const { toast } = useToast()
+  const qc = useQueryClient()
+  const bankQuery = useQuery({
+    queryKey: qk.cvBank.list(),
+    queryFn: () => candidatesApi.listCvBank({ top: 200 }),
+  })
+  const rows = Array.isArray(bankQuery.data?.data) ? bankQuery.data.data : []
+
+  const removing = useMutation({
+    mutationFn: (id) => candidatesApi.deleteCvBankCv(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: qk.cvBank.all() })
+      toast('CV removed from the bank', 'success')
+    },
+    onError: (err) => toast(friendlyAuthError(err, 'Could not remove the CV'), 'error'),
+  })
+
+  async function download(row) {
+    try {
+      await candidatesApi.downloadCvBankCv(row.id)
+    } catch (err) {
+      toast(friendlyAuthError(err, 'Could not download the CV'), 'error')
+    }
+  }
+
+  return (
+    <div className="card mt-18">
+      <div className="card-head">
+        <div>
+          <h3>CV Bank</h3>
+          <span className="ch-sub">
+            {bankQuery.isSuccess ? `${bankQuery.data?.total ?? rows.length} stored CV${(bankQuery.data?.total ?? rows.length) === 1 ? '' : 's'} · no job attached` : 'Stored CVs with no job attached'}
+          </span>
+        </div>
+      </div>
+      <div className="card-body">
+        {bankQuery.isLoading && <p className="text-muted text-sm">Loading stored CVs…</p>}
+        {bankQuery.isError && (
+          <p className="text-muted text-sm">{friendlyAuthError(bankQuery.error, 'Could not load the CV bank')}</p>
+        )}
+        {bankQuery.isSuccess && rows.length === 0 && (
+          <EmptyState icon="file" title="The CV bank is empty">
+            Drop CVs above with “No job — store in CV bank” selected and they will be kept here.
+          </EmptyState>
+        )}
+        {rows.map((r) => (
+          <div className="upload-row" key={r.id}>
+            <span className="attach-icn" style={{ width: 38, height: 38 }}><Icon name="file" /></span>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="fw-600 text-sm">{r.file_name || 'CV'}</div>
+              <div className="cell-sub">
+                {r.candidate_email || 'No email detected'}
+                {r.created_at ? ` · added ${new Date(r.created_at).toLocaleDateString()}` : ''}
+              </div>
+            </div>
+            <div className="flex items-center gap-8" style={{ flexShrink: 0 }}>
+              <button className="act-btn" data-tip="Download" aria-label="Download CV" onClick={() => download(r)}>
+                <Icon name="download" />
+              </button>
+              <button
+                className="act-btn"
+                data-tip="Remove"
+                aria-label="Remove CV from bank"
+                disabled={removing.isPending}
+                onClick={() => {
+                  if (window.confirm(`Remove “${r.file_name}” from the CV bank? The file is deleted permanently.`)) {
+                    removing.mutate(r.id)
+                  }
+                }}
+              >
+                <Icon name="trash" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

From 0b19f3ce086f7e6467b308ad429868677f767362 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 19:26:31 +0500
Subject: [PATCH 20/22] =?UTF-8?q?CV=20bank:=20in-app=20preview=20=E2=80=94?=
 =?UTF-8?q?=20view=20a=20stored=20CV=20without=20downloading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each bank row gains an eye action that opens the PDF in a modal iframe.
fetchBlobUrl learned an optional MIME re-type: /documents/download sends
octet-stream, which would trigger a download instead of the inline
viewer, so the blob is re-wrapped as application/pdf. Object URL revoked
on close. Download and remove actions unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/dist/index.html          |  2 +-
 frontend/src/api/candidates.js    | 14 +++++++++-
 frontend/src/lib/apiClient.js     | 15 ++++++-----
 frontend/src/screens/CvImport.jsx | 43 +++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index cbca26d..a7a1f61 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,7 +24,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-_PGQLp_7.js"></script>
+    <script type="module" crossorigin src="/assets/index-CVZNz-Ck.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C1VjJy57.css">
   </head>
   <body>
diff --git a/frontend/src/api/candidates.js b/frontend/src/api/candidates.js
index 1afa119..b949343 100644
--- a/frontend/src/api/candidates.js
+++ b/frontend/src/api/candidates.js
@@ -12,7 +12,7 @@
    function returns the parsed {data, total, status_code} envelope.
    ============================================================ */
 
-import { downloadFile, request } from '../lib/apiClient'
+import { downloadFile, fetchBlobUrl, request } from '../lib/apiClient'
 
 /** Active job posts for pickers. Needs job_board.view OR candidates.view.
  *
@@ -80,6 +80,18 @@ export function downloadCvBankCv(id) {
   return downloadFile('/documents/download', { params: { manual_upload_candidate_id: id } })
 }
 
+/**
+ * Object URL of a stored CV for IN-APP preview (no download). The route sends
+ * octet-stream, so the blob is re-typed to application/pdf for the browser's
+ * inline viewer. Caller revokes the URL when the preview closes.
+ */
+export function viewCvBankCv(id) {
+  return fetchBlobUrl('/documents/download', {
+    params: { manual_upload_candidate_id: id },
+    type: 'application/pdf',
+  })
+}
+
 /**
  * Score the decoded attachments of inbox messages against a job post.
  * Needs candidates.create. messageIds are inbox_messages PK uuids (the `id`
diff --git a/frontend/src/lib/apiClient.js b/frontend/src/lib/apiClient.js
index 9cf0bea..2935634 100644
--- a/frontend/src/lib/apiClient.js
+++ b/frontend/src/lib/apiClient.js
@@ -188,12 +188,14 @@ export async function downloadFile(path, { params, auth = true, filename } = {})
 }
 
 /**
- * Authenticated binary GET returning an object URL for <img>/<video> use —
- * a plain src attribute cannot carry the bearer token. Returns null on 404
- * (the resource legitimately not existing, e.g. a job with no cover image).
- * Callers own the URL: revoke it with URL.revokeObjectURL when done.
+ * Authenticated binary GET returning an object URL for <img>/<video>/<iframe>
+ * use — a plain src attribute cannot carry the bearer token. Returns null on
+ * 404 (the resource legitimately not existing, e.g. a job with no cover
+ * image). `type` re-wraps the blob with that MIME type: routes that send
+ * application/octet-stream would otherwise trigger a download instead of the
+ * browser's inline viewer. Callers own the URL: revoke it when done.
  */
-export async function fetchBlobUrl(path, { params, auth = true } = {}) {
+export async function fetchBlobUrl(path, { params, auth = true, type } = {}) {
   if (auth && isExpiring()) {
     try {
       await refreshSession()
@@ -235,7 +237,8 @@ export async function fetchBlobUrl(path, { params, auth = true } = {}) {
   if (!res.ok) {
     throw new ApiError(res.statusText || 'Request failed', res.status, null)
   }
-  return URL.createObjectURL(await res.blob())
+  const blob = await res.blob()
+  return URL.createObjectURL(type ? new Blob([blob], { type }) : blob)
 }
 
 function filenameFromDisposition(header) {
diff --git a/frontend/src/screens/CvImport.jsx b/frontend/src/screens/CvImport.jsx
index d544420..6a41165 100644
--- a/frontend/src/screens/CvImport.jsx
+++ b/frontend/src/screens/CvImport.jsx
@@ -16,6 +16,7 @@
 import { useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 
+import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
 import { Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
@@ -346,12 +347,31 @@ export default function CvImport() {
 function CvBank() {
   const { toast } = useToast()
   const qc = useQueryClient()
+  const [preview, setPreview] = useState(null) // { name, url } — url is an object URL we own
   const bankQuery = useQuery({
     queryKey: qk.cvBank.list(),
     queryFn: () => candidatesApi.listCvBank({ top: 200 }),
   })
   const rows = Array.isArray(bankQuery.data?.data) ? bankQuery.data.data : []
 
+  async function view(row) {
+    try {
+      const url = await candidatesApi.viewCvBankCv(row.id)
+      if (!url) {
+        toast('The CV file could not be found', 'error')
+        return
+      }
+      setPreview({ name: row.file_name || 'CV', url })
+    } catch (err) {
+      toast(friendlyAuthError(err, 'Could not open the CV'), 'error')
+    }
+  }
+
+  function closePreview() {
+    if (preview) URL.revokeObjectURL(preview.url)
+    setPreview(null)
+  }
+
   const removing = useMutation({
     mutationFn: (id) => candidatesApi.deleteCvBankCv(id),
     onSuccess: () => {
@@ -400,6 +420,9 @@ function CvBank() {
               </div>
             </div>
             <div className="flex items-center gap-8" style={{ flexShrink: 0 }}>
+              <button className="act-btn" data-tip="View" aria-label="View CV" onClick={() => view(r)}>
+                <Icon name="eye" />
+              </button>
               <button className="act-btn" data-tip="Download" aria-label="Download CV" onClick={() => download(r)}>
                 <Icon name="download" />
               </button>
@@ -420,6 +443,26 @@ function CvBank() {
           </div>
         ))}
       </div>
+
+      {preview && (
+        <Modal
+          title={preview.name}
+          subtitle="CV preview"
+          size="modal-lg"
+          onClose={closePreview}
+          footer={
+            <button className="btn btn-secondary" onClick={closePreview}>Close</button>
+          }
+        >
+          {/* Blob URL re-typed to application/pdf, so the browser's built-in
+              viewer renders inline instead of triggering a download. */}
+          <iframe
+            src={preview.url}
+            title={`Preview of ${preview.name}`}
+            style={{ width: '100%', height: '70vh', border: 'none', borderRadius: 10, background: 'var(--bg-sunken)' }}
+          />
+        </Modal>
+      )}
     </div>
   )
 }

From 1ae5249d18e8bd907660d81535f68d56782bcd1a Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 19:38:40 +0500
Subject: [PATCH 21/22] CV bank: production-safe file storage + candidates
 visibility

The banked PDF now lives IN the database (new cv_bank_files table,
manual migration 010, auto-applied at startup) instead of the container
filesystem, so production redeploys cannot lose a stored CV; upload
writes row + bytes in one commit and creates no disk file at all. New
GET /candidate/cv-bank/file serves the bytes for both download and the
in-app preview.

Per user request, banking a CV with a detectable email also creates or
reactivates the candidate account (same pattern as manual add, no setup
email), so banked people appear on the Candidates screen; a CV without
an email still banks fine, account-less. Existing bank rows were
backfilled locally.

E2E-verified: upload -> bank row + DB bytes + zero disk files, preview
and download served from the DB, candidate visible on the Candidates
screen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 backend/job/app.py                            | 50 +++++++++--
 backend/job/candidate/models.py               | 85 +++++++++++++++++--
 .../migrations/manual/010_cv_bank_files.sql   | 21 +++++
 frontend/dist/index.html                      |  2 +-
 frontend/src/api/candidates.js                | 12 +--
 5 files changed, 148 insertions(+), 22 deletions(-)
 create mode 100644 backend/migrations/manual/010_cv_bank_files.sql

diff --git a/backend/job/app.py b/backend/job/app.py
index 3c1c49d..ae54afe 100644
--- a/backend/job/app.py
+++ b/backend/job/app.py
@@ -265,26 +265,31 @@ async def cv_bank_upload(
 ):
     """Store a CV in the bank: the file plus its parsed text, nothing else.
     No job, no user account, no inbox entry, no scoring — the CV waits until a
-    recruiter picks it up. Email/name are captured only if the CV contains them."""
+    recruiter picks it up. Email/name are captured only if the CV contains
+    them. The PDF bytes go INTO the database (cv_bank_files), never onto the
+    container filesystem, so production redeploys cannot lose a stored CV."""
+    from pathlib import PurePosixPath,PureWindowsPath
     from job.candidate.models import Manual_UPLOAD_CANDIDATE
     from job.candidate.plugins import extract_candidate_email
-    saved_path=None
     try:
         content=await file.read()
+        if len(content)>15*1024*1024:
+            raise HTTPException(status_code=413,detail="CV must be under 15 MB")
         reader=FileRead(session=session,filename=file.filename,file=content)
         parsed=await reader.injest_manual_upload()   # 400 on unreadable/empty PDF
-        saved=await reader.save_manual_upload()
-        saved_path=saved.get("file_path")
         text=parsed.get("text") or ""
         detected,_=extract_candidate_email(text)
+        # Basename against both separator styles — a Windows client sends
+        # C:\Users\x\cv.pdf whose PosixPath name is the whole string.
+        original=PurePosixPath(PureWindowsPath(file.filename or "resume.pdf").name).name or "resume.pdf"
         row=await Manual_UPLOAD_CANDIDATE.insert_bank_cv(
             session,
             candidate_email=detected or "",
             candidate_name="",
             full_text=text,
-            file_name=saved.get("file_name"),
-            file_path=saved_path,
+            file_name=original,
             created_by=current_user.get("id"),
+            pdf_bytes=content,
         )
         return JSONResponse(content={"data":{
             "id":str(row.id),
@@ -293,10 +298,8 @@ async def cv_bank_upload(
             "created_at":row.created_at.isoformat() if row.created_at else None,
         },"status_code":200})
     except HTTPException:
-        FileRead.discard_upload(saved_path)
         raise
     except Exception as e:
-        FileRead.discard_upload(saved_path)
         raise HTTPException(status_code=500,detail=str(e))
 
 
@@ -326,6 +329,36 @@ async def cv_bank_fetch(
         raise HTTPException(status_code=500,detail=str(e))
 
 
+@router.get("/candidate/cv-bank/file")
+async def cv_bank_file(
+    id: str = Query(...),
+    current_user: dict = Depends(require_permission(PermissionTag.CANDIDATES_VIEW)),
+    session: AsyncSession = Depends(get_session),
+):
+    """The stored CV's bytes, straight from the database. Content-Disposition
+    carries the original filename so browser saves are named sensibly; the
+    frontend preview re-types the blob and renders it inline."""
+    from urllib.parse import quote
+    from job.candidate.models import CvBankFiles,Manual_UPLOAD_CANDIDATE
+    try:
+        row=await Manual_UPLOAD_CANDIDATE.get_by_id(session,id)
+        if not row or row.apply_via!="cv_bank":
+            raise HTTPException(status_code=404,detail="CV not found in the bank")
+        file_row=await CvBankFiles.get(session,row.id)
+        if not file_row:
+            raise HTTPException(status_code=404,detail="CV file is missing")
+        name=file_row.file_name or row.file_name or "cv.pdf"
+        return Response(
+            content=file_row.data,
+            media_type=file_row.content_type or "application/pdf",
+            headers={"Content-Disposition":f"attachment; filename*=UTF-8''{quote(name)}"},
+        )
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
 @router.delete("/candidate/cv-bank/delete")
 async def cv_bank_delete(
     id: str = Query(...),
@@ -337,6 +370,7 @@ async def cv_bank_delete(
         row=await Manual_UPLOAD_CANDIDATE.delete_bank_cv(session,id)
         if not row:
             raise HTTPException(status_code=404,detail="CV not found in the bank")
+        # Legacy rows from before bytes moved into the DB still carry a disk file.
         FileRead.discard_upload(row.file_path)
         return JSONResponse(content={"data":{"id":str(row.id),"deleted":True},"status_code":200})
     except HTTPException:
diff --git a/backend/job/candidate/models.py b/backend/job/candidate/models.py
index 54aa258..1a2d2f5 100644
--- a/backend/job/candidate/models.py
+++ b/backend/job/candidate/models.py
@@ -249,22 +249,66 @@ class Manual_UPLOAD_CANDIDATE(SQLModel, table=True):
 
     @classmethod
     async def insert_bank_cv(cls, session: AsyncSession, *, candidate_email,
-                             candidate_name, full_text, file_name, file_path,
-                             created_by):
+                             candidate_name, full_text, file_name,
+                             created_by, pdf_bytes,
+                             content_type="application/pdf"):
+        """Bank a CV: metadata row + its bytes (cv_bank_files) in one commit —
+        the PDF lives in the database, never on the container filesystem, so a
+        redeploy cannot lose a stored CV. file_path stays "" by design.
+
+        When the CV carries an email, the candidate ACCOUNT is created/reused
+        (same pattern as create_manual_upload_candidate) so the person shows
+        up on the Candidates screen; unlike an application there is still no
+        inbox entry, no scoring, and no setup email. A CV with no detectable
+        email banks fine and simply stays account-less."""
+        import os
+
+        from role.models import EnumRoles, Roles
+        from users.models import Users
+        from users.plugins import hash_password
+
+        email = (candidate_email or "").strip().lower()
+        user = None
+        if email:
+            user = await Users.get_user_by_email(session, email)
+            if not user:
+                role = await Roles.get_role_by_name(session, EnumRoles.CANDIDATE.value)
+                user = await Users.insert_user(session, {
+                    "name": (candidate_name or "").strip() or email,
+                    "email": email,
+                    "role_id": role.id if role else 8,
+                    "password": hash_password(os.getenv("DEFAULT_CANDIDATE_PASSWORD", "Utopia!@#")),
+                    "is_active": True,
+                    "is_deleted": False,
+                })
+            elif user.is_deleted or not user.is_active:
+                # get_user_by_email returns soft-deleted accounts too; a fresh
+                # bank upload means the person is relevant again.
+                user.is_deleted = False
+                user.is_active = True
+                session.add(user)
+
         row = cls(
-            candidate_email=(candidate_email or "").strip().lower(),
-            candidate_name=(candidate_name or "").strip(),
+            candidate_email=email,
+            candidate_name=(candidate_name or "").strip() or (email or ""),
             job_post_id=None,
             full_text=full_text or "",
             linkedin_slug=primary_slug_from_text(full_text or ""),
             apply_via="cv_bank",
-            user_id=None,
+            user_id=user.id if user else None,
             created_by=cls._as_uuid(created_by),
             status="BANKED",
             file_name=(file_name or "").strip(),
-            file_path=(file_path or "").strip(),
+            file_path="",
         )
         session.add(row)
+        await session.flush()
+        session.add(CvBankFiles(
+            manual_upload_candidate_id=row.id,
+            content_type=content_type,
+            file_name=(file_name or "").strip(),
+            data=pdf_bytes,
+        ))
         await session.commit()
         await session.refresh(row)
         return row
@@ -287,15 +331,42 @@ class Manual_UPLOAD_CANDIDATE(SQLModel, table=True):
 
     @classmethod
     async def delete_bank_cv(cls, session: AsyncSession, record_id):
-        """Hard delete, bank rows only — never reachable for application rows."""
+        """Hard delete, bank rows only — never reachable for application rows.
+        The cv_bank_files row goes with it via ON DELETE CASCADE."""
         row = await cls.get_by_id(session, record_id)
         if not row or row.apply_via != "cv_bank":
             return None
+        file_row = await CvBankFiles.get(session, row.id)
+        if file_row:
+            await session.delete(file_row)
         await session.delete(row)
         await session.commit()
         return row
 
 
+class CvBankFiles(SQLModel, table=True):
+    """PDF bytes of a CV-bank entry — in the database so production redeploys
+    (ephemeral container filesystems) can never lose a stored CV. Created in
+    prod by migrations/manual/010_cv_bank_files.sql."""
+
+    __tablename__ = "cv_bank_files"
+
+    manual_upload_candidate_id: uuid.UUID = Field(
+        primary_key=True, foreign_key="manual_upload_candidate.id",
+    )
+    content_type: str = Field(default="application/pdf")
+    file_name: str | None = Field(default=None)
+    data: bytes
+    created_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+
+    @classmethod
+    async def get(cls, session: AsyncSession, manual_upload_candidate_id):
+        result = await session.execute(
+            select(cls).where(cls.manual_upload_candidate_id == manual_upload_candidate_id)
+        )
+        return result.scalars().first()
+
+
 class Candidates(SQLModel, table=True):
 
 
diff --git a/backend/migrations/manual/010_cv_bank_files.sql b/backend/migrations/manual/010_cv_bank_files.sql
new file mode 100644
index 0000000..ae09070
--- /dev/null
+++ b/backend/migrations/manual/010_cv_bank_files.sql
@@ -0,0 +1,21 @@
+-- 010_cv_bank_files.sql
+-- PDF bytes of CV-bank entries, stored IN the database. The bank's metadata
+-- row lives in app.manual_upload_candidate (apply_via = 'cv_bank'); keeping
+-- the file itself on the container filesystem would lose every stored CV on
+-- redeploy, so bank uploads write the bytes here instead and no disk file is
+-- created at all. PK doubles as the FK: one file per bank row, removed
+-- automatically with it.
+--
+-- Idempotent, applied automatically at startup by alembic_setup.run_manual_sql()
+-- and recorded in manual_migrations (prod boots with DB_AUTOGENERATE=false and
+-- never autogenerates tables). Matches CvBankFiles in
+-- backend/job/candidate/models.py.
+
+CREATE TABLE IF NOT EXISTS app.cv_bank_files (
+    manual_upload_candidate_id uuid PRIMARY KEY
+        REFERENCES app.manual_upload_candidate(id) ON DELETE CASCADE,
+    content_type varchar NOT NULL DEFAULT 'application/pdf',
+    file_name    varchar,
+    data         bytea NOT NULL,
+    created_at   timestamptz NOT NULL DEFAULT NOW()
+);
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index a7a1f61..d07a381 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -24,7 +24,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700&display=swap" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-    <script type="module" crossorigin src="/assets/index-CVZNz-Ck.js"></script>
+    <script type="module" crossorigin src="/assets/index-OBhFgWnT.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C1VjJy57.css">
   </head>
   <body>
diff --git a/frontend/src/api/candidates.js b/frontend/src/api/candidates.js
index b949343..4ea84a2 100644
--- a/frontend/src/api/candidates.js
+++ b/frontend/src/api/candidates.js
@@ -75,19 +75,19 @@ export function deleteCvBankCv(id) {
   return request('/candidate/cv-bank/delete', { method: 'DELETE', params: { id } })
 }
 
-/** Browser-save a stored CV's PDF via the existing documents route. */
+/** Browser-save a stored CV's PDF — served from the database (cv_bank_files). */
 export function downloadCvBankCv(id) {
-  return downloadFile('/documents/download', { params: { manual_upload_candidate_id: id } })
+  return downloadFile('/candidate/cv-bank/file', { params: { id } })
 }
 
 /**
  * Object URL of a stored CV for IN-APP preview (no download). The route sends
- * octet-stream, so the blob is re-typed to application/pdf for the browser's
- * inline viewer. Caller revokes the URL when the preview closes.
+ * an attachment disposition, so the blob is re-typed to application/pdf for
+ * the browser's inline viewer. Caller revokes the URL when the preview closes.
  */
 export function viewCvBankCv(id) {
-  return fetchBlobUrl('/documents/download', {
-    params: { manual_upload_candidate_id: id },
+  return fetchBlobUrl('/candidate/cv-bank/file', {
+    params: { id },
     type: 'application/pdf',
   })
 }

From 5575a1a6aa992404d3a4ffd6783fe4ccf8801fa6 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Thu, 27 Aug 2026 19:43:24 +0500
Subject: [PATCH 22/22] UI fixes and job lifecycle actions

- Jobs list: close/reopen action per requisition with confirm on close
- Settings: real timezone and currency option lists
- Assigned-role chip: readable color pairing on soft background
- Scrollbars: Chromium honors the styled ::-webkit-scrollbar again
  (scrollbar-color now gated to Firefox), slightly wider hit area
- Topbar hamburger: hidden on desktop (specificity fix) and the drawer
  closes itself when the window grows past the mobile breakpoint
- Content scroller: removed overscroll containment that killed wheel
  scrolling everywhere except the scrollbar thumb

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/app/useShell.js              | 10 ++++++++
 frontend/src/screens/CandidateProfile.jsx |  5 +++-
 frontend/src/screens/Jobs.jsx             | 21 ++++++++++++++++
 frontend/src/screens/Settings.jsx         | 30 +++++++++++++++++++----
 frontend/src/styles/styles.css            | 27 ++++++++++++++------
 5 files changed, 79 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/useShell.js b/frontend/src/app/useShell.js
index 2bccdd2..cbcc6be 100644
--- a/frontend/src/app/useShell.js
+++ b/frontend/src/app/useShell.js
@@ -36,6 +36,16 @@ export function useNavOpen() {
     }
   }, [navOpen])
 
+  // The drawer only exists ≤900px (styles.css). If the window grows past the
+  // breakpoint while it is open, nav-open would strand the scrim over the
+  // desktop layout with body scroll locked — close it instead.
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 900px)')
+    const onChange = (e) => { if (!e.matches) setNavOpen(false) }
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
   return [navOpen, setNavOpen]
 }
 
diff --git a/frontend/src/screens/CandidateProfile.jsx b/frontend/src/screens/CandidateProfile.jsx
index 4a379d9..7acea98 100644
--- a/frontend/src/screens/CandidateProfile.jsx
+++ b/frontend/src/screens/CandidateProfile.jsx
@@ -367,7 +367,10 @@ export default function CandidateProfile({
               <>
                 <div style={LABEL}>Assigned Role</div>
                 <div className="k-tags" style={{ marginBottom: 14 }}>
-                  <span className="tag" style={{ background: 'var(--primary-soft)', color: 'var(--primary-fg)' }}>
+                  {/* --primary-fg is the on-solid-primary text color (white in
+                      light theme) — on --primary-soft it was white-on-mint,
+                      unreadable. Soft chips pair with --primary (see .b-indigo). */}
+                  <span className="tag" style={{ background: 'var(--primary-soft)', color: 'var(--primary)' }}>
                     {live.assigned_job_post.title}
                   </span>
                 </div>
diff --git a/frontend/src/screens/Jobs.jsx b/frontend/src/screens/Jobs.jsx
index d699174..64a8e64 100644
--- a/frontend/src/screens/Jobs.jsx
+++ b/frontend/src/screens/Jobs.jsx
@@ -239,6 +239,27 @@ export default function Jobs() {
           {canEdit && (
             <button className="act-btn" data-tip="Edit" aria-label="Edit job" onClick={() => setEditing(j)}><Icon name="edit" /></button>
           )}
+          {canEdit && (j.status === 'Closed' ? (
+            <button
+              className="act-btn"
+              data-tip="Reopen"
+              aria-label="Reopen job"
+              disabled={setJobStatus.isPending}
+              onClick={() => setJobStatus.mutate({ id: j.id, status: 'Open' })}
+            ><Icon name="refresh" /></button>
+          ) : (
+            <button
+              className="act-btn"
+              data-tip="Close job"
+              aria-label="Close job"
+              disabled={setJobStatus.isPending}
+              onClick={() => {
+                if (window.confirm(`Close “${j.title}”? It stays on the board and can be reopened later.`)) {
+                  setJobStatus.mutate({ id: j.id, status: 'Closed' })
+                }
+              }}
+            ><Icon name="x-circle" /></button>
+          ))}
           <button className="act-btn" data-tip="Publish" aria-label="Publish job" onClick={() => navigate('/jobboard', { state: { publishJob: j.id } })}><Icon name="send" /></button>
         </div>
       ),
diff --git a/frontend/src/screens/Settings.jsx b/frontend/src/screens/Settings.jsx
index 52ad7d5..a86173f 100644
--- a/frontend/src/screens/Settings.jsx
+++ b/frontend/src/screens/Settings.jsx
@@ -147,13 +147,35 @@ export default function Settings() {
   )
 }
 
+/* The option label IS the stored value (org_settings rows hold the full string),
+   so existing saved values like "(GMT-08:00) Pacific Time" must stay verbatim. */
+const TIMEZONES = [
+  '(GMT-08:00) Pacific Time',
+  '(GMT-07:00) Mountain Time',
+  '(GMT-06:00) Central Time',
+  '(GMT-05:00) Eastern Time',
+  '(GMT+00:00) UTC',
+  '(GMT+00:00) London',
+  '(GMT+01:00) Central European Time',
+  '(GMT+03:00) Arabia Standard Time',
+  '(GMT+04:00) Gulf Standard Time',
+  '(GMT+05:00) Pakistan Standard Time',
+  '(GMT+05:30) India Standard Time',
+  '(GMT+08:00) Singapore Standard Time',
+  '(GMT+09:00) Japan Standard Time',
+  '(GMT+10:00) Australian Eastern Time',
+]
+
+// Codes match the offer form's currency set (Offers.jsx).
+const CURRENCIES = ['USD ($)', 'EUR (€)', 'GBP (£)', 'PKR (₨)', 'AED (د.إ)']
+
 function General({ registerSave }) {
   const defaults = {
     'general.company_name': 'Utopia Brands Inc.',
     'general.website': 'https://utopiabrands.com',
     'general.industry': 'Consumer Goods',
     'general.company_size': '201–500',
-    'general.timezone': '(GMT-08:00) Pacific Time',
+    'general.timezone': '(GMT+05:00) Pakistan Standard Time',
     'general.currency': 'USD ($)',
     'general.auto_archive_stale_jobs': true,
     'general.duplicate_detection': true,
@@ -204,15 +226,13 @@ function General({ registerSave }) {
           <div className="form-field">
             <label>Default Time Zone</label>
             <select value={draft['general.timezone'] ?? ''} onChange={(e) => setField('general.timezone', e.target.value)}>
-              <option>(GMT-08:00) Pacific Time</option>
-              <option>(GMT-05:00) Eastern Time</option>
-              <option>(GMT+00:00) UTC</option>
+              {TIMEZONES.map((tz) => <option key={tz}>{tz}</option>)}
             </select>
           </div>
           <div className="form-field">
             <label>Default Currency</label>
             <select value={draft['general.currency'] ?? ''} onChange={(e) => setField('general.currency', e.target.value)}>
-              <option>USD ($)</option><option>EUR (€)</option><option>GBP (£)</option>
+              {CURRENCIES.map((c) => <option key={c}>{c}</option>)}
             </select>
           </div>
         </div>
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index db18a1a..9724271 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -224,14 +224,18 @@ input, select, textarea { font-family: inherit; font-size: var(--fs-base); color
 a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
 img, svg, video, canvas { max-width: 100%; }
 
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar { width: 14px; height: 14px; }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }
 ::selection { background: var(--brand-lime); color: var(--brand-ink); }
 
-/* Firefox / non-WebKit scrollbars (WebKit ignores these). */
-@supports (scrollbar-color: auto) {
-  * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
+/* Firefox-only scrollbar colors. Chrome 121+ also passes
+   @supports (scrollbar-color: auto), and any non-auto scrollbar-color/width
+   makes Chromium IGNORE the ::-webkit-scrollbar rules above — the old
+   `scrollbar-width: thin` here is what forced the skinny native bars.
+   Gate on -moz-appearance so only Firefox takes this path. */
+@supports (-moz-appearance: none) {
+  * { scrollbar-color: var(--border-strong) transparent; }
 }
 
 /* ============================================================
@@ -444,7 +448,10 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
   display: flex; align-items: center; gap: 16px; padding: 0 22px;
   position: sticky; top: 0; z-index: 50;
 }
-.menu-toggle { display: none; }
+/* Double class: .icon-btn { display: grid } is declared later with equal
+   specificity and used to win, leaving the hamburger visible on desktop —
+   where clicking it stranded the scrim over the page with scroll locked. */
+.icon-btn.menu-toggle { display: none; }
 .topbar-search { position: relative; flex: 1; max-width: 480px; display: flex; align-items: center; }
 .topbar-search > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
 .topbar-search input {
@@ -530,7 +537,11 @@ table.data thead th, .rbac-matrix th, .cal-dow, .info-item .il,
 .dd-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
 
 /* ================= CONTENT / PAGE ================= */
-.content { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 26px 30px 60px; }
+/* No overscroll-behavior here: #app is min-height, so .content never overflows
+   and the DOCUMENT is the real scroller. `contain` on this (non-scrolling)
+   scroll container blocked wheel chaining — the wheel was dead everywhere
+   except dragging the scrollbar thumb. */
+.content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 30px 60px; }
 .page { animation: fadeUp .3s ease; }
 @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
@@ -1363,7 +1374,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
   .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
   /* The FAB floated over the scrim and stayed tappable behind the drawer. */
   .nav-open .ai-fab { display: none; }
-  .menu-toggle { display: grid; }
+  .icon-btn.menu-toggle { display: grid; }
   .search-kbd { display: none; }
   .content { padding: 20px max(16px, env(safe-area-inset-left)) 50px max(16px, env(safe-area-inset-right)); }
   .profile-meta { display: none; }