From 8fc6a93ff29eda0baafe9c97bc45dfaec47b3c60 Mon Sep 17 00:00:00 2001
From: Leo <leo@ourpad.casa>
Date: Sat, 23 May 2026 18:35:27 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20per-field=20review=20UI=20polish=20?=
 =?UTF-8?q?=E2=80=94=20blank-fill=20auto-select,=20btn-accent=20CSS,=20car?=
 =?UTF-8?q?d-bg=20fixes,=20sticky=20bar=20z-index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/index.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/static/index.html b/static/index.html
index 3fe3312..55d6ab9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -200,6 +200,8 @@
     .btn-danger { background: transparent; border: 1.5px solid var(--red); color: var(--red); }
     .btn-green { background: var(--green); color: #000; }
     .btn-green-outline { background: transparent; border: 1.5px solid var(--green); color: var(--green); }
+    .btn-accent { background: var(--accent-bg); border: 1.5px solid var(--accent); color: var(--accent2); }
+    .btn-accent:hover { background: var(--accent); color: #fff; }
     .btn-amber { background: var(--amber); color: #000; }
     .btn-block { width: 100%; }
 
@@ -2559,6 +2561,12 @@ async function toggleFieldReview(batchId) {
   try {
     const data = await api(`/api/admin/cantaloupe/batches/${batchId}/field-changes`);
     _csFieldReviewState.changes = data.field_changes || [];
+    // Auto-select blank-fill changes (old_value was empty/null)
+    for (const ch of _csFieldReviewState.changes) {
+      if (ch.is_blank_fill) {
+        _csFieldReviewState.selected.add(ch.machine_id + ':' + ch.field);
+      }
+    }
     renderFieldChanges(area);
     area.style.display = 'block';
     _csFieldReviewOpen = true;
@@ -2597,7 +2605,7 @@ function renderFieldChanges(area) {
     const allSelected = assetChanges.every(c => state.selected.has(c.machine_id + ':' + c.field));
     const anySelected = assetChanges.some(c => state.selected.has(c.machine_id + ':' + c.field));
 
-    html += `<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:8px;transition:opacity 0.2s;" id="fcAsset_${esc(asset.machine_id)}">`;
+    html += `<div style="background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:8px;transition:opacity 0.2s;" id="fcAsset_${esc(asset.machine_id)}">`;
     html += `<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
       <input type="checkbox" ${allSelected ? 'checked' : ''} onchange="toggleAssetChanges('${esc(asset.machine_id)}', this.checked)" style="accent-color:var(--green);">
       <span style="font-weight:600;font-size:13px;"><code class="mono">${esc(asset.machine_id)}</code> — ${esc(asset.name || '—')}</span>
@@ -2624,7 +2632,7 @@ function renderFieldChanges(area) {
 
   // Sticky apply bar at bottom
   const selectedCount = state.selected.size;
-  html += `<div style="position:sticky;bottom:0;background:var(--card-bg);border-top:1px solid var(--border);padding:10px 0;margin-top:8px;display:flex;align-items:center;justify-content:space-between;">
+  html += `<div style="position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--border);padding:10px 0;margin-top:8px;display:flex;align-items:center;justify-content:space-between;z-index:10;">
     <span style="font-size:12px;"><span id="csFieldCount" style="font-weight:700;">${selectedCount}</span> field change(s) selected</span>
     <div style="display:flex;gap:8px;">
       <button class="btn btn-sm btn-green" onclick="applyFieldChanges(${_csFieldReviewState.batchId})" id="csApplyFieldBtn"${selectedCount === 0 ? ' disabled style="opacity:0.5;"' : ''}>✓ Apply Selected</button>