feat(5.13): carduri compacte mobil/tableta + fix editare preview (OOB tr) + toast

Dogfood pe import + Trimiteri (mobil/tableta <1024px), pur CSS + markup, backend
trimitere neatins:

- Card compact real pentru .tabel-trimiteri (preview + Trimiteri): vehicul=titlu,
  stare=pill dreapta-sus, operatie+cod, meta data/km muted, nota mica. Inlocuieste
  stiva generica eticheta+valoare (carduri de ~450px -> ~135px). Anuleaza regula
  desktop tr.trimitere-row > td{padding:11px} in blocul compact.
- FIX editare preview: OOB swap pe <tr> esua tacit in htmx 1.9 (un <tr> brut se
  pierde la parsarea unui fragment fara context de tabel) -> randul ramanea cu
  starea veche dupa salvare. Inlocuit cu reload complet al preview-ului prin
  HX-Trigger:reincarcaPreview + detalii randSalvat. /editeaza si /confirma-review
  folosesc helper-ul _raspuns_rand_salvat.
- Feedback post-salvare: toast global "Randul N actualizat · <stare>" + scroll +
  flash pe randul actualizat (base.html window.arataToast + listener randSalvat).
- Modal editare: Salveaza + Anuleaza pe acelasi rand (sistem .act): desktop text,
  mobil doua iconite Lucide 44px alaturate (save/x). Macro icon('x') + .act-primary.
- Randuri deja-trimise/duplicate colapsate implicit in preview + toggle "Arata N".
- Select "Operatii de mapat" full-width pe mobil (nu mai iese din viewport).
- Bara de filtre Trimiteri adaptata mobil: pills pe banda cu scroll orizontal,
  cautare vehicul proeminenta (nu 8 butoane full-width stivuite).
- Nota preview = culoarea camp-fix (accent) ca sa atraga atentia; hint-urile
  camp-fix per-camp scoase (campul Note e self-explanatory).
- Confirmare trimitere: scos campul email (Declarant); text mai clar
  ("Confirma numarul din N gata de trimis"). Backend confirmed_by ramane optional.

Teste: contractul OOB (rupt in browser) inlocuit cu noul contract
(reincarcaPreview + randSalvat) in test_web_preview_edit / test_preview_edit_ui /
test_import_review. Suita: 992 passed (exclus live).

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

app/web/templates/_stepper.html

@@ -1,22 +1,9 @@
 {#
-  _stepper.html — Antet wizard import (PUR vizual, fara logica de rutare).
-
-  Parametru: `pas` (integer 1-4) — pasul curent.
-  Utilizare in template-uri care mostenesc contextul Jinja2:
-    {% set pas = 1 %}{% include '_stepper.html' %}
-  sau cu `with`:
-    {% with pas=2 %}{% include '_stepper.html' %}{% endwith %}
-
-  Cei 4 pasi ficsi:
-    1. Incarca fisier
-    2. Potriveste coloanele
-    3. Verifica
-    4. Confirma trimiterea
-
-  Stari vizuale:
-    - index < pas  → "facut" (bulina plina, text bifat)
-    - index == pas → "activ" (evidentiat, aria-current="step")
-    - index > pas  → "viitor" (estompat)
+  _stepper.html — Antet wizard import COMPACT (PUR vizual). PRD 5.13.
+  Parametru: `pas` (integer 1-4). Clasele .stepper-* sunt definite in base.html.
+  >=1024px: bara slim orizontala (.stepper-track). <1024px: forma colapsata
+  "Pasul N din 4 - Titlu" + bara de progres (.stepper-collapsed).
+  Utilizare: {% set pas = 1 %}{% include '_stepper.html' %}
 #}
 {%- set _pasi_import = [
   (1, "Incarca fisier",        "Trage un fisier xlsx/csv aici sau foloseste butonul de alegere."),
@@ -24,73 +11,26 @@
   (3, "Verifica",              "Verifica randurile inainte sa le trimiti la RAR."),
   (4, "Confirma trimiterea",   "Confirma numarul de prezentari — actiunea e ireversibila."),
 ] -%}
-<nav class="stepper-import" aria-label="Pasii importului" style="
-  display:flex;
-  gap:0;
-  align-items:stretch;
-  margin-bottom:20px;
-  border:1px solid var(--line);
-  border-radius:8px;
-  overflow:hidden;
-  background:var(--card);
-">
-  {% for nr, titlu, ajutor in _pasi_import %}
-  {%- if nr < pas %}
-    {%- set cls = "facut" -%}
-    {%- set aria = "" -%}
-  {%- elif nr == pas %}
-    {%- set cls = "activ" -%}
-    {%- set aria = ' aria-current="step"' -%}
-  {%- else %}
-    {%- set cls = "viitor" -%}
-    {%- set aria = "" -%}
-  {%- endif %}
-  <div class="stepper-pas stepper-pas--{{ cls }}"{{ aria | safe }}
-       style="
-         flex:1;
-         padding:10px 14px;
-         border-right:{% if not loop.last %}1px solid var(--line){% else %}none{% endif %};
-         {% if cls == 'activ' %}
-           background:rgba(91,141,239,.10);
-         {% elif cls == 'facut' %}
-           opacity:1;
-         {% else %}
-           opacity:.4;
-         {% endif %}
-       ">
-    <div style="display:flex; align-items:center; gap:6px; margin-bottom:2px;">
-      <span class="stepper-nr" style="
-        display:inline-flex;
-        align-items:center;
-        justify-content:center;
-        width:20px;
-        height:20px;
-        border-radius:50%;
-        font-size:11px;
-        font-weight:700;
-        flex-shrink:0;
-        {% if cls == 'activ' %}
-          background:var(--accent);
-          color:#fff;
-        {% elif cls == 'facut' %}
-          background:var(--ok);
-          color:#fff;
-        {% else %}
-          background:var(--line);
-          color:var(--muted);
-        {% endif %}
-      ">
-        {% if cls == 'facut' %}&#10003;{% else %}{{ nr }}{% endif %}
-      </span>
-      <span style="
-        font-size:13px;
-        font-weight:{% if cls == 'activ' %}600{% else %}400{% endif %};
-        color:{% if cls == 'activ' %}var(--ink){% elif cls == 'facut' %}var(--ink){% else %}var(--muted){% endif %};
-      ">{{ titlu }}</span>
+{%- set _activ = _pasi_import[pas - 1] -%}
+<div class="stepper">
+  {# Desktop (>=1024px): bara slim orizontala. #}
+  <nav class="stepper-track" aria-label="Pasii importului">
+    {% for nr, titlu, ajutor in _pasi_import %}
+    {%- if nr < pas %}{% set cls = "is-done" %}{% set aria = "" %}
+    {%- elif nr == pas %}{% set cls = "is-active" %}{% set aria = ' aria-current="step"' %}
+    {%- else %}{% set cls = "" %}{% set aria = "" %}{% endif %}
+    <div class="stepper-step {{ cls }}"{{ aria | safe }}>
+      <span class="stepper-nr">{% if nr < pas %}&#10003;{% else %}{{ nr }}{% endif %}</span>
+      <span class="stepper-tx">{{ titlu }}</span>
     </div>
-    {% if cls == 'activ' %}
-    <p class="muted" style="margin:0; font-size:12px; padding-left:26px;">{{ ajutor }}</p>
-    {% endif %}
+    {% endfor %}
+  </nav>
+  {# Tableta/mobil (<1024px): colapsat "Pasul N din 4 - Titlu" + progres. #}
+  <div class="stepper-collapsed">
+    <div class="stepper-current">Pasul {{ pas }} din 4 <span class="muted">&middot; {{ _activ[1] }}</span></div>
+    <div class="stepper-progress" role="progressbar" aria-valuenow="{{ pas }}" aria-valuemin="1" aria-valuemax="4"
+         aria-label="Pasul {{ pas }} din 4"><span style="width:{{ (pas / 4 * 100) | round | int }}%;"></span></div>
   </div>
-  {% endfor %}
-</nav>
+  {# Ajutorul pasului activ — o singura linie, sub bara (valabil pe ambele forme). #}
+  <p class="stepper-help">{{ _activ[2] }}</p>
+</div>