style(ui): design polish + replace CUI badge with +RO/−RO

6 design review fixes: diff summary badge in modal header, PF indicator,
eFactura risk icon (octagon vs triangle for colorblind), aria labels,
extract .denom-mismatch CSS class, remove dead .addr-table CSS.

Replace vague "Corectat" badge with directional +RO (green, prefix added)
or −RO (orange, prefix removed). Kit items show "Kit" badge instead of
price match dot. Cache-bust shared.js v24, style.css v31.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

api/app/static/css/style.css

@@ -1229,26 +1229,21 @@ tr.mapping-deleted td {
     flex-shrink: 0;
     filter: drop-shadow(0 0 3px rgba(202,138,4,0.3));
 }
-.addr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.addr-line .bi-exclamation-octagon {
-.addr-table th {
+    color: var(--error-text);
-    font-family: var(--font-display);
+    flex-shrink: 0;
-    font-size: 12px;
+    filter: drop-shadow(0 0 3px rgba(220,38,38,0.3));
-    font-weight: 500;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    padding: 6px 8px;
-    text-align: left;
 }
-.addr-table td { padding: 8px; vertical-align: top; font-family: var(--font-body); }
+/* Denomination mismatch alert */
-.addr-mismatch { background: var(--warning-light) !important; }
+.denom-mismatch {
-.addr-efactura-risk { background: var(--error-light) !important; }
+    background: var(--warning-light);
-.addr-label {
+    padding: 8px 12px;
-    font-family: var(--font-display);
+    border-radius: var(--card-radius);
-    font-size: 11px;
+}
+.denom-mismatch-title {
+    font-size: 12px;
+    color: var(--warning-text);
     font-weight: 500;
-    text-transform: uppercase;
-    color: var(--text-secondary);
-    margin-bottom: 4px;
 }
 /* Mobile address cards */
 .addr-card { border: 1px solid var(--border); border-radius: var(--card-radius); margin-bottom: 8px; overflow: hidden; }

api/app/static/js/shared.js

@@ -517,15 +517,20 @@ async function renderOrderDetailModal(orderNumber, opts) {
     if (priceCheckEl) priceCheckEl.innerHTML = '';
     const reconEl = document.getElementById('detailInvoiceRecon');
     if (reconEl) { reconEl.innerHTML = ''; reconEl.style.display = 'none'; }
+    // Remove diff badge from previous render
+    const prevDiffBadge = document.querySelector('.diff-badge');
+    if (prevDiffBadge) prevDiffBadge.remove();
     // Reset compact header elements
     const partenerRoa = document.getElementById('detailPartenerRoa');
     if (partenerRoa) { partenerRoa.style.display = 'none'; partenerRoa.textContent = ''; }
     const cuiGomag = document.getElementById('detailCuiGomag');
     if (cuiGomag) cuiGomag.style.display = 'none';
     const cuiRoa = document.getElementById('detailCuiRoa');
-    if (cuiRoa) cuiRoa.style.display = 'none';
+    if (cuiRoa) {
-    const anafArea = document.getElementById('detailPartnerAnafArea');
+        cuiRoa.style.display = 'none';
-    if (anafArea) anafArea.innerHTML = '';
+        // Restore original structure (may have been replaced by PF indicator)
+        cuiRoa.innerHTML = '<small class="text-muted">CUI:</small> <span class="font-data" id="detailCuiRoaVal"></span><span id="detailPartnerAnafArea"></span>';
+    }
     const denomMismatch = document.getElementById('detailDenomMismatch');
     if (denomMismatch) { denomMismatch.style.display = 'none'; denomMismatch.innerHTML = ''; }
     const addressBlock = document.getElementById('detailAddressBlock');
@@ -693,7 +698,10 @@ async function renderOrderDetailModal(orderNumber, opts) {
             const priceInfo = { pret_roa: item.pret_roa, match: item.price_match };
             const pretRoaHtml = priceInfo.pret_roa != null ? fmtNum(priceInfo.pret_roa) : '–';
             let matchDot, rowStyle;
-            if (priceInfo.pret_roa == null && priceInfo.match == null) {
+            if (item.kit) {
+                matchDot = '<span class="badge" style="background:var(--info-light);color:var(--info-text);font-size:10px;padding:2px 6px">Kit</span>';
+                rowStyle = '';
+            } else if (priceInfo.pret_roa == null && priceInfo.match == null) {
                 matchDot = '<span class="dot dot-gray"></span>';
                 rowStyle = '';
             } else if (priceInfo.match === false) {
@@ -895,10 +903,16 @@ function _renderHeaderInfo(order) {
             document.getElementById('detailCuiRoaVal').textContent = pi.cod_fiscal_roa || '\u2014';
             cuiRoaEl.style.display = '';
 
-            // CUI correction badge
+            // CUI correction badge: +RO (added prefix) or −RO (removed prefix)
             let cuiCorrHtml = '';
-            if (pi.anaf_cod_fiscal_adjusted) {
+            if (pi.anaf_cod_fiscal_adjusted && pi.cod_fiscal_gomag && pi.cod_fiscal_roa) {
-                cuiCorrHtml = ' <span class="anaf-badge anaf-badge-warn"><i class="bi bi-arrow-left-right"></i> Corectat</span>';
+                const gomagHasRO = /^RO\s*/i.test(pi.cod_fiscal_gomag);
+                const roaHasRO = /^RO\s*/i.test(pi.cod_fiscal_roa);
+                if (!gomagHasRO && roaHasRO) {
+                    cuiCorrHtml = ' <span class="anaf-badge anaf-badge-ok" aria-label="Prefix RO adaugat conform ANAF"><i class="bi bi-plus-circle"></i> +RO</span>';
+                } else if (gomagHasRO && !roaHasRO) {
+                    cuiCorrHtml = ' <span class="anaf-badge anaf-badge-warn" aria-label="Prefix RO eliminat conform ANAF"><i class="bi bi-dash-circle"></i> −RO</span>';
+                }
             }
 
             // ANAF badge
@@ -906,15 +920,24 @@ function _renderHeaderInfo(order) {
             if (anafArea) {
                 let anafBadge;
                 if (pi.anaf_platitor_tva === 1) {
-                    anafBadge = '<span class="anaf-badge anaf-badge-ok">Platitor TVA</span>';
+                    anafBadge = '<span class="anaf-badge anaf-badge-ok" aria-label="Platitor TVA">Platitor TVA</span>';
                 } else if (pi.anaf_platitor_tva === 0) {
-                    anafBadge = '<span class="anaf-badge anaf-badge-warn">Neplatitor TVA</span>';
+                    anafBadge = '<span class="anaf-badge anaf-badge-warn" aria-label="Neplatitor TVA">Neplatitor TVA</span>';
                 } else {
-                    anafBadge = '<span class="anaf-badge anaf-badge-gray">?</span>';
+                    anafBadge = '<span class="anaf-badge anaf-badge-gray" aria-label="Status TVA necunoscut">?</span>';
                 }
                 anafArea.innerHTML = cuiCorrHtml + ' ' + anafBadge;
             }
         }
+    } else {
+        // PF indicator — show muted text in CUI area
+        const cuiRoaEl = document.getElementById('detailCuiRoa');
+        if (cuiRoaEl) {
+            document.getElementById('detailCuiRoaVal').textContent = '';
+            document.getElementById('detailPartnerAnafArea').innerHTML = '';
+            cuiRoaEl.innerHTML = '<small class="text-muted" style="font-style:italic">Persoana fizica</small>';
+            cuiRoaEl.style.display = '';
+        }
     }
 
     // ERROR orders: muted dashes for ROA fields
@@ -927,8 +950,8 @@ function _renderHeaderInfo(order) {
     if (isPJ && pi.anaf_denumire_mismatch && pi.denumire_anaf) {
         const denomEl = document.getElementById('detailDenomMismatch');
         if (denomEl) {
-            denomEl.innerHTML = `<div style="background:var(--warning-light);padding:8px 12px;border-radius:var(--card-radius)">
+            denomEl.innerHTML = `<div class="denom-mismatch">
-                <span style="font-size:12px;color:var(--warning-text);font-weight:500"><i class="bi bi-exclamation-triangle"></i> Denumire diferita</span><br>
+                <span class="denom-mismatch-title"><i class="bi bi-exclamation-triangle"></i> Denumire diferita</span><br>
                 <span style="font-size:13px">GoMag: <strong>${esc(order.customer_name || '')}</strong></span><br>
                 <span style="font-size:13px">ANAF: <strong>${esc(pi.denumire_anaf)}</strong></span>
             </div>`;
@@ -952,11 +975,11 @@ function _renderHeaderInfo(order) {
         const escaped = esc(text);
         let icon = '';
         if (matchIcon === 'match') {
-            icon = ' <i class="bi bi-check-lg addr-line-match" title="Adrese identice"></i>';
+            icon = ' <i class="bi bi-check-lg addr-line-match" title="Adrese identice" role="img" aria-label="Adrese identice"></i>';
         } else if (matchIcon === 'mismatch') {
-            icon = ' <i class="bi bi-exclamation-triangle" title="Adrese diferite"></i>';
+            icon = ' <i class="bi bi-exclamation-triangle" title="Adrese diferite" role="img" aria-label="Adrese diferite"></i>';
         } else if (matchIcon === 'risk') {
-            icon = ' <i class="bi bi-exclamation-triangle" title="Risc eFactura" style="color:var(--error-text)"></i>';
+            icon = ' <i class="bi bi-exclamation-octagon" title="Risc eFactura" role="img" aria-label="Risc eFactura" style="color:var(--error-text)"></i>';
         }
         return `<div class="addr-line">
             <span class="addr-line-label">${label}</span>
@@ -989,4 +1012,23 @@ function _renderHeaderInfo(order) {
     }
 
     addressLines.innerHTML = html;
+
+    // Diff summary badge in modal header
+    let diffCount = 0;
+    if (isPJ && pi.anaf_denumire_mismatch) diffCount++;
+    if (order.price_check && order.price_check.mismatches > 0) diffCount += order.price_check.mismatches;
+    if (addr) {
+        if (addr.livrare_roa && !addrMatch(addr.livrare_gomag, addr.livrare_roa)) diffCount++;
+        if (addr.facturare_roa && !addrMatch(addr.facturare_gomag, addr.facturare_roa)) diffCount++;
+    }
+    const orderNumEl = document.getElementById('detailOrderNumber');
+    if (orderNumEl && diffCount > 0) {
+        const existing = orderNumEl.querySelector('.diff-badge');
+        if (existing) existing.remove();
+        const badge = document.createElement('span');
+        badge.className = 'diff-badge badge ms-2';
+        badge.style.cssText = 'background:var(--warning-light);color:var(--warning-text);font-size:11px;vertical-align:middle';
+        badge.textContent = diffCount + ' diferente';
+        orderNumEl.parentNode.insertBefore(badge, orderNumEl.nextSibling);
+    }
 }

api/app/templates/base.html

@@ -19,7 +19,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
     {% set rp = request.scope.get('root_path', '') %}
-    <link href="{{ rp }}/static/css/style.css?v=30" rel="stylesheet">
+    <link href="{{ rp }}/static/css/style.css?v=31" rel="stylesheet">
 </head>
 <body>
     <!-- Top Navbar (hidden on mobile via CSS) -->
@@ -161,7 +161,7 @@
 
     <script>window.ROOT_PATH = "{{ rp }}";</script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="{{ rp }}/static/js/shared.js?v=22"></script>
+    <script src="{{ rp }}/static/js/shared.js?v=24"></script>
     <script>
     // Dark mode toggle
     function toggleDarkMode() {