fix(backoffice): composition audit fixes for transactions, customers, moderation, users, monitoring, analytics

- Transactions list: hardcoded #fff background replaced with var(--bg-primary); missing th scope=col added on all 7 headers
- Customers list: hardcoded #fff background replaced with var(--bg-primary); missing th scope=col added on all 7 headers
- Customer detail: fake CSS vars --border-subtle/--brand-primary (never defined, silently falling back to hex) replaced with real --border-color/--primary-color
- Reviews list: hardcoded #fff card background and sticky-header background replaced with var(--bg-primary)/var(--bg-secondary); missing th scope=col added across dynamic column table header
- Reports list: hardcoded #fff background replaced with var(--bg-primary); fake --brand-primary var replaced with --primary-color; missing th scope=col added
- Review health widget: fake --surface-muted/--brand-primary vars replaced with real --bg-tertiary/--primary-color (matches product-health-widget precedent)
- Users page: hardcoded #fff background replaced with var(--bg-primary); missing th scope=col added on both tables
- Monitoring page: hardcoded #fff background replaced with var(--bg-primary); missing th scope=col added on webhooks and events tables
- Analytics page: fake --color-primary var (undefined anywhere in codebase) replaced with real --primary-color across tabs/chart/focus rings; fake --surface-muted/--brand-primary on health bar replaced with --bg-tertiary/--primary-color; hardcoded #fff card/summary-card backgrounds replaced with var(--bg-primary); missing th scope=col added across 4 tables

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss

@@ -1,6 +1,6 @@
 .review-health { display: grid; gap: 6px; align-items: center; }
-.review-health__bar { height: 6px; border-radius: var(--radius-full, 999px); background: var(--surface-muted, #eef2f0); overflow: hidden; }
-.review-health__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); }
+.review-health__bar { height: 6px; border-radius: var(--radius-full, 999px); background: var(--bg-tertiary); overflow: hidden; }
+.review-health__bar-fill { height: 100%; background: var(--primary-color); }
 .review-health__percent { font-size: var(--font-size-xs, 0.75rem); font-weight: var(--font-weight-bold, 700); color: var(--text-secondary, #5f6e6a); }
 .review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }
 .review-health__list li { display: flex; align-items: center; gap: 6px; }

src/app/features/admin/moderation/pages/admin-reports-list-page.component.html

@@ -10,12 +10,12 @@
     <app-table>
       <thead>
         <tr>
-          <th>{{ 'adminModeration.reportTarget' | translate }}</th>
-          <th>{{ 'adminModeration.reportType' | translate }}</th>
-          <th>{{ 'adminModeration.reportReason' | translate }}</th>
-          <th>{{ 'backoffice.status' | translate }}</th>
-          <th>{{ 'adminOrders.createdAt' | translate }}</th>
-          <th>{{ 'adminProducts.actions' | translate }}</th>
+          <th scope="col">{{ 'adminModeration.reportTarget' | translate }}</th>
+          <th scope="col">{{ 'adminModeration.reportType' | translate }}</th>
+          <th scope="col">{{ 'adminModeration.reportReason' | translate }}</th>
+          <th scope="col">{{ 'backoffice.status' | translate }}</th>
+          <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th>
+          <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
         </tr>
       </thead>
       <tbody>

src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss

@@ -1,6 +1,6 @@
-.admin-reports-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
+.admin-reports-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: var(--bg-primary, #fff); }
 .toolbar { display: flex; align-items: center; gap: 12px; }
 .toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
 .actions { display: flex; gap: 8px; }
-.link-button { all: unset; cursor: pointer; color: var(--brand-primary, #1e8a6e); font-weight: var(--font-weight-semibold, 600); }
+.link-button { all: unset; cursor: pointer; color: var(--primary-color); font-weight: var(--font-weight-semibold, 600); }
 .link-button:hover, .link-button:focus-visible { text-decoration: underline; }

src/app/features/admin/moderation/pages/admin-reviews-list-page.component.html

@@ -69,15 +69,15 @@
       <app-table>
         <thead>
           <tr>
-            <th><input type="checkbox" [attr.aria-label]="'adminModeration.selectAllRows' | translate" (change)="facade.toggleAll($any($event.target).checked)" /></th>
-            <th>{{ 'adminModeration.customer' | translate }}</th>
-            @if (isColumnVisible('product')) { <th>{{ 'adminModeration.product' | translate }}</th> }
-            @if (isColumnVisible('rating')) { <th>{{ 'adminModeration.rating' | translate }}</th> }
-            @if (isColumnVisible('status')) { <th>{{ 'backoffice.status' | translate }}</th> }
-            @if (isColumnVisible('reports')) { <th>{{ 'adminModeration.reportsColumn' | translate }}</th> }
-            @if (isColumnVisible('created')) { <th>{{ 'adminOrders.createdAt' | translate }}</th> }
-            <th>{{ 'adminModeration.health' | translate }}</th>
-            <th>{{ 'adminProducts.actions' | translate }}</th>
+            <th scope="col"><input type="checkbox" [attr.aria-label]="'adminModeration.selectAllRows' | translate" (change)="facade.toggleAll($any($event.target).checked)" /></th>
+            <th scope="col">{{ 'adminModeration.customer' | translate }}</th>
+            @if (isColumnVisible('product')) { <th scope="col">{{ 'adminModeration.product' | translate }}</th> }
+            @if (isColumnVisible('rating')) { <th scope="col">{{ 'adminModeration.rating' | translate }}</th> }
+            @if (isColumnVisible('status')) { <th scope="col">{{ 'backoffice.status' | translate }}</th> }
+            @if (isColumnVisible('reports')) { <th scope="col">{{ 'adminModeration.reportsColumn' | translate }}</th> }
+            @if (isColumnVisible('created')) { <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th> }
+            <th scope="col">{{ 'adminModeration.health' | translate }}</th>
+            <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
           </tr>
         </thead>
         <tbody>

src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss

@@ -1,4 +1,4 @@
-.admin-reviews-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
+.admin-reviews-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: var(--bg-primary, #fff); }
 .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
 .filters { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
 select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
@@ -16,7 +16,7 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
   max-height: 70vh;
   overflow: auto;
 
-  thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
+  thead th { position: sticky; top: 0; background: var(--bg-secondary, #f4f4f5); z-index: 1; }
 }
 
 .density-compact td, .density-compact th { padding: 4px 8px; }