diff --git a/static/css/custom.css b/static/css/custom.css
index 9bf287e..f4a23ea 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -77,6 +77,18 @@
 
     /* Layout dimensions */
     --bottom-nav-height: 64px;
+
+    /* === ADJUSTMENTS TAB — badge palette (dark theme) === */
+    /* Each adjustment type has its own colour family. Loan-Repayment and
+       Advance-Repayment are +15% saturation siblings of their parent colour
+       so "money coming back" reads as a hotter signal than "money going out". */
+    --badge-bonus-bg: #5b8260;         --badge-bonus-fg: #e8f3ea;
+    --badge-overtime-bg: #a16881;      --badge-overtime-fg: #fce4ec;
+    --badge-deduction-bg: #5b4f8c;     --badge-deduction-fg: #e0daf3;
+    --badge-loan-bg: #9b7f39;          --badge-loan-fg: #fef4d1;
+    --badge-loan-rep-bg: #b48a1a;      --badge-loan-rep-fg: #fef4d1;
+    --badge-advance-bg: #3e5c7b;       --badge-advance-fg: #d7e5f2;
+    --badge-advance-rep-bg: #2f679a;   --badge-advance-rep-fg: #d7e5f2;
 }
 
 /* === LIGHT MODE === */
@@ -132,6 +144,15 @@
     --color-warning-bg: #fffbeb;
     --color-info: #2563eb;
     --color-info-bg: #eff6ff;
+
+    /* === ADJUSTMENTS TAB — badge palette (light theme) === */
+    --badge-bonus-bg: #d7e8d9;         --badge-bonus-fg: #385640;
+    --badge-overtime-bg: #f3d1dd;      --badge-overtime-fg: #703347;
+    --badge-deduction-bg: #d8d0ef;     --badge-deduction-fg: #3b2f6d;
+    --badge-loan-bg: #f0dc9d;          --badge-loan-fg: #6a5320;
+    --badge-loan-rep-bg: #f7d873;      --badge-loan-rep-fg: #5a4418;
+    --badge-advance-bg: #bccee0;       --badge-advance-fg: #243b56;
+    --badge-advance-rep-bg: #9ec1dd;   --badge-advance-rep-fg: #1d3550;
 }
 
 /* ===================================================================
@@ -1884,3 +1905,116 @@ body, .card, .modal-content, .form-control, .form-select,
         z-index: 1050;
     }
 }
+
+/* =============================================================================
+ * ADJUSTMENTS TAB
+ * Visual vocabulary for the Payroll → Adjustments tab.
+ *   - 7 badge classes, one per adjustment type
+ *   - Sticky filter bar that stays visible as the table scrolls
+ *   - Group-by header style (collapsible section divider)
+ *   - Floating bulk-action bar at the bottom of the viewport
+ * ============================================================================= */
+
+/* --- Type badges (one class per PayrollAdjustment type) --- */
+.badge-type-bonus,
+.badge-type-overtime,
+.badge-type-deduction,
+.badge-type-new-loan,
+.badge-type-loan-repayment,
+.badge-type-advance-payment,
+.badge-type-advance-repayment {
+    display: inline-block;
+    padding: 0.3rem 0.7rem;
+    border-radius: 999px;
+    font-family: 'Inter', sans-serif;
+    font-size: 0.7rem;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+}
+.badge-type-bonus             { background: var(--badge-bonus-bg);       color: var(--badge-bonus-fg); }
+.badge-type-overtime          { background: var(--badge-overtime-bg);    color: var(--badge-overtime-fg); }
+.badge-type-deduction         { background: var(--badge-deduction-bg);   color: var(--badge-deduction-fg); }
+.badge-type-new-loan          { background: var(--badge-loan-bg);        color: var(--badge-loan-fg); }
+.badge-type-loan-repayment    { background: var(--badge-loan-rep-bg);    color: var(--badge-loan-rep-fg); }
+.badge-type-advance-payment   { background: var(--badge-advance-bg);     color: var(--badge-advance-fg); }
+.badge-type-advance-repayment { background: var(--badge-advance-rep-bg); color: var(--badge-advance-rep-fg); }
+
+/* --- Sticky filter bar (keeps filters visible as the table scrolls) --- */
+.adjustments-filter-bar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: var(--bg-card);
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-default);
+    border-radius: 0.5rem 0.5rem 0 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: end;
+}
+
+/* --- Group header (collapsible section divider for group-by mode) --- */
+.adj-group-header {
+    cursor: pointer;
+    padding: 0.75rem 1rem;
+    background: var(--bg-inset);
+    border-top: 1px solid var(--border-default);
+    border-bottom: 1px solid var(--border-default);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    user-select: none;
+    transition: background-color 120ms;
+}
+.adj-group-header:hover { background: var(--bg-card-hover); }
+.adj-group-header .fa-chevron-down,
+.adj-group-header .fa-chevron-right { opacity: 0.7; width: 0.8rem; }
+.adj-group-header .adj-group-label   { font-weight: 600; }
+.adj-group-header .adj-group-meta    { color: var(--text-secondary); font-size: 0.875rem; margin-left: auto; }
+
+/* --- Floating bulk action bar (appears when >=1 row selected) --- */
+.adj-bulk-bar {
+    position: fixed;
+    left: 50%;
+    bottom: 1.5rem;
+    transform: translateX(-50%);
+    z-index: 1050;
+    background: var(--bg-card);
+    border: 2px solid var(--accent);
+    border-radius: 2rem;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    padding: 0.6rem 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    animation: adj-bulk-bar-in 180ms ease-out;
+}
+.adj-bulk-bar[hidden] { display: none; }
+@keyframes adj-bulk-bar-in {
+    from { opacity: 0; transform: translate(-50%, 10px); }
+    to   { opacity: 1; transform: translate(-50%, 0); }
+}
+
+/* --- Empty state card --- */
+.adj-empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-secondary);
+}
+.adj-empty-state .adj-empty-icon { font-size: 2.5rem; opacity: 0.35; margin-bottom: 1rem; }
+
+/* --- Group-by toggle pill buttons (Flat / By Type / By Worker) --- */
+.adj-groupby-toggle .btn { font-size: 0.8rem; padding: 0.3rem 0.75rem; }
+
+/* --- Sort header arrows --- */
+th.sortable { cursor: pointer; user-select: none; }
+th.sortable .sort-arrow {
+    opacity: 0.4;
+    margin-left: 0.25rem;
+    font-size: 0.7rem;
+    transition: opacity 120ms;
+}
+th.sortable:hover .sort-arrow,
+th.sortable.sorted .sort-arrow { opacity: 1; }