feat(5.12): modal editare + cont obligatoriu la import; design.md + PRD 5.13 revizuit (/autoplan)

5.12 (livrat): editare in modal a randurilor de preview, cont obligatoriu inainte de
import, formular editare extras (_form_editare, _editare_preview_modal), plus suita de
teste aferenta (preview edit/compact, mapare op, form editare, signup, admin panel).

Design + planificare:
- docs/design.md: sistem de design (tokeni, breakpoints, scara control, componente, a11y).
- docs/prd/prd-5.12-* si prd-5.13-* (5.13 cu raport /autoplan: CEO+Design+Eng, audit trail).

Curatare: sterse PNG-urile de test/mockup temporare din radacina.

Nota: implementarea CSS 5.13 (responsive compact + sistem butoane) NU e inca facuta —
planul revizuit cere refactorul testelor fragile din test_web_responsive.py INAINTE de CSS.

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

app/web/templates/_preview_rand.html

@@ -1,11 +1,13 @@
 {#
   _preview_rand.html — un singur rand de preview import.
-  Doua moduri:
-    - display (editing falsy): <tr> normal cu 9 coloane in format .tabel-trimiteri.
-    - edit   (editing truthy): <tr class="preview-edit"> (display:block) cu un singur
-      <td> ce contine un FORM PROPRIU (NU #confirm-form). Escapa grila table-layout:fixed.
-  Swap pe RAND (hx-target pe #preview-row-N, outerHTML), NU pe #import-section.
-  La save, optional OOB pe rezumat + contor "gata de trimis" (include_oob).
+  US-006 (PRD 5.12): editarea inline (tr.preview-edit + mutual-exclusion script)
+  a fost eliminata. Butonul Editeaza deschide MODALUL global (#detaliu-modal-body).
+
+  Parametri:
+    editing      — ELIMINAT (ignorat, pastrat pentru compatibilitate apeluri vechi)
+    include_oob  — True: randeaza OOB rezumat + contor + script recalc (swap dupa save)
+    oob_tr       — True: adauga hx-swap-oob pe <tr> insusi (pentru raspunsul POST succes)
+    summary      — dict cu contoarele per status
 
   Campuri pre-computate de _web_compute_preview (NOT din template raw):
     row.prez           — prezentare_din_payload(resolved): vehicul_nr, vin_scurt,
@@ -16,87 +18,10 @@
 #}
 {%- set res = row.resolved -%}
 {%- set status = row.resolved_status -%}
-{% if editing %}
-{%- set err_map = {} -%}
-{%- set fix_map = {} -%}
-{%- for e in row.errors -%}{%- if e is mapping and e.get('field') -%}{%- set _ = err_map.update({e.field: (e.get('message') or e.get('msg'))}) -%}{%- if e.get('fix') -%}{%- set _ = fix_map.update({e.field: e.get('fix')}) -%}{%- endif -%}{%- endif -%}{%- endfor -%}
-<tr id="preview-row-{{ row.row_index }}" data-status="{{ status }}" data-editing="1"
-    class="preview-edit">
-  <td data-eticheta="" style="padding:0; border:none;">
-    <form class="rand-editare"
-          hx-post="/_import/{{ import_id }}/rand/{{ row.row_index }}/editeaza"
-          hx-target="#preview-row-{{ row.row_index }}"
-          hx-swap="outerHTML"
-          hx-indicator="#rand-spinner-{{ row.row_index }}"
-          hx-disabled-elt="find button"
-          hx-on::response-error="this.querySelector('.rand-eroare-banner').style.display='block';"
-          style="padding:12px; background:rgba(91,141,239,.06); border-radius:4px;">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
-
-      <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
-        <strong style="font-size:13px;">Editare rand {{ row.row_index + 1 }}</strong>
-        <span class="pill {{ row.stare_css }}" style="font-size:11px;">{{ row.stare_eticheta }}</span>
-      </div>
-
-      {% if message %}
-      <div class="flash" style="border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); margin-bottom:10px;"
-           role="alert">{{ message }}</div>
-      {% endif %}
-      <div class="rand-eroare-banner" role="alert"
-           style="display:none; margin-bottom:10px; padding:8px 12px; border:1px solid var(--err);
-                  background:color-mix(in srgb, var(--err) 12%, var(--card)); border-radius:6px; font-size:13px;">
-        Salvarea nu a reusit (retea / sesiune). Valorile introduse sunt pastrate — reincearca.
-      </div>
-
-      {% macro camp(nume, eticheta, valoare, tip='text') %}
-      <div>
-        <label for="e-{{ row.row_index }}-{{ nume }}" class="muted" style="font-size:12px; display:block;">{{ eticheta }}</label>
-        <input id="e-{{ row.row_index }}-{{ nume }}" type="{{ tip }}" name="{{ nume }}" value="{{ valoare or '' }}"
-               style="width:100%; {% if err_map.get(nume) %}border-color:var(--err);{% endif %}"
-               aria-label="{{ eticheta }} — randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin') or '' }})"
-               {% if err_map.get(nume) %}aria-invalid="true"{% endif %}>
-        {% if err_map.get(nume) %}
-        <div class="s-error" style="font-size:12px; margin-top:2px;">{{ err_map.get(nume) }}</div>
-        {% endif %}
-        {% if fix_map.get(nume) %}
-        <span class="camp-fix">{{ fix_map.get(nume) }}</span>
-        {% endif %}
-      </div>
-      {% endmacro %}
-
-      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 16px;">
-        {{ camp('nr_inmatriculare', 'Numar inmatriculare', res.get('nr_inmatriculare')) }}
-        {{ camp('vin', 'VIN (serie sasiu)', res.get('vin')) }}
-        {{ camp('data_prestatie', 'Data prestatie (YYYY-MM-DD)', res.get('data_prestatie')) }}
-        {{ camp('odometru_final', 'Odometru final', res.get('odometru_final')) }}
-        {{ camp('odometru_initial', 'Odometru initial (daca e cerut)', res.get('odometru_initial')) }}
-      </div>
-
-      <div style="margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
-        <button type="submit" style="min-height:44px; padding:8px 18px;">Salveaza</button>
-        <button type="button" style="min-height:44px; padding:8px 18px;
-                background:var(--card); color:var(--muted); border-color:var(--line);"
-                hx-get="/_import/{{ import_id }}/rand/{{ row.row_index }}"
-                hx-target="#preview-row-{{ row.row_index }}" hx-swap="outerHTML">Anuleaza</button>
-        <span id="rand-spinner-{{ row.row_index }}" class="htmx-indicator muted" style="font-size:13px;">
-          se salveaza…
-        </span>
-      </div>
-    </form>
-  </td>
-</tr>
-<script>
-(function() {
-  /* Mutual-exclusion: cat un rand e in editare, dezactiveaza confirm + alte Editeaza. */
-  var btn = document.getElementById('confirm-btn');
-  if (btn) { btn.disabled = true; btn.title = 'Termina editarea randului inainte de a trimite.'; }
-  document.querySelectorAll('.btn-editeaza').forEach(function(b) { b.disabled = true; });
-})();
-</script>
-{% else %}
 {%- set disp_fix_map = {} -%}
 {%- for e in row.errors -%}{%- if e is mapping and e.get('field') and e.get('fix') -%}{%- set _ = disp_fix_map.update({e.field: e.get('fix')}) -%}{%- endif -%}{%- endfor -%}
 <tr id="preview-row-{{ row.row_index }}" data-status="{{ status }}"
+    {% if oob_tr %}hx-swap-oob="outerHTML:#preview-row-{{ row.row_index }}"{% endif %}
     style="{% if status == 'needs_review' %}background:rgba(230,179,74,.04);{% elif status in ('already_sent', 'duplicate_in_file') %}opacity:.65;{% endif %}">
   <td class="col-id muted" data-eticheta="#">{{ row.row_index + 1 }}</td>
   <td class="col-stare" data-eticheta="Stare">
@@ -105,7 +30,7 @@
   <td class="col-vehicul" data-eticheta="Vehicul">
     {{ row.prez.vehicul_nr }}
     {% if row.prez.vin_scurt and row.prez.vin_scurt != '—' %}
-    <div class="muted" style="font-size:12px;">{{ row.prez.vin_scurt }}</div>
+    <div class="muted" style="font-size:12px; white-space:nowrap;">{{ row.prez.vin_scurt }}</div>
     {% endif %}
     {# Fix-uri de validare pe vehicul #}
     {% if disp_fix_map.get('vin') %}<span class="camp-fix">{{ disp_fix_map.get('vin') }}</span>{% endif %}
@@ -140,24 +65,13 @@
       {{ row.nota_umana or '' }}
     {% endif %}
   </td>
-  <td class="col-verificat" data-eticheta="Verificat?" style="text-align:center;">
-    {% if status == 'needs_review' %}
-    <label class="chk" style="min-height:44px; justify-content:center; cursor:pointer;"
-           title="Bifat inseamna ca ai verificat valorile si le incluzi in trimitere">
-      <input type="checkbox" form="confirm-form" name="reviewed_rows" value="{{ row.row_index }}"
-             onchange="window.updateN && window.updateN()"
-             aria-label="Verificat — randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin', '') }})">
-      verif.
-    </label>
-    {% endif %}
-  </td>
   <td class="col-actiuni" data-eticheta="Actiuni" style="text-align:center;">
     {% if status not in ('already_sent', 'duplicate_in_file') %}
     <button type="button" class="btn-editeaza"
             style="min-height:44px; padding:6px 14px; font-size:13px;
                    background:transparent; border-color:var(--line); color:var(--ink);"
-            hx-get="/_import/{{ import_id }}/rand/{{ row.row_index }}/editare"
-            hx-target="#preview-row-{{ row.row_index }}" hx-swap="outerHTML"
+            hx-get="/_import/{{ import_id }}/rand/{{ row.row_index }}/editare-modal"
+            hx-target="#detaliu-modal-body" hx-swap="innerHTML"
             aria-label="Editeaza randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin', '') }})">
       Editeaza
     </button>
@@ -165,7 +79,7 @@
   </td>
 </tr>
 {% if include_oob %}
-{# OOB: actualizeaza rezumatul si contorul "gata de trimis" dupa save, fara a re-randa sectiunea. #}
+{# OOB: actualizeaza rezumatul, contorul, bannerul needs_review dupa save/confirma-review. #}
 {% set status_labels = [
   ('ok','Gata de trimis'), ('needs_review','Verifica valori'), ('needs_mapping','Cod RAR lipsa'),
   ('needs_data','Date incomplete'), ('already_sent','Deja trimis'), ('duplicate_in_file','Duplicat in fisier')] %}
@@ -177,6 +91,19 @@
   {% endfor %}
 </div>
 <span id="preview-ok-count" hx-swap-oob="true" data-ok="{{ summary.get('ok', 0) }}" hidden></span>
+{# Banner discoverability: OOB swap dupa confirmare/editare → dispare cand needs_review==0. #}
+<div id="preview-needs-review-banner" hx-swap-oob="true">
+{% if summary.get('needs_review', 0) %}
+<div class="banner warn" role="note" aria-live="polite"
+     style="margin-bottom:12px; padding:8px 14px; border-radius:6px;
+            background:color-mix(in srgb, var(--warn, #e6b34a) 12%, var(--card));
+            border:1px solid var(--warn, #e6b34a); font-size:13px;">
+  Randurile cu <span class="pill s-needs_review" style="font-size:11px;">Verifica valori</span>
+  nu pleaca la RAR pana le deschizi in modal si confirmi in modal
+  cu butonul <strong>Confirma valorile</strong>.
+</div>
+{% endif %}
+</div>
 <script>
 (function() {
   /* Editare incheiata: re-activeaza confirm + butoanele Editeaza, recalculeaza N.
@@ -192,4 +119,3 @@
 })();
 </script>
 {% endif %}
-{% endif %}