fix(mapari-mobil): butoane Salveaza/Sterge vizibile + carduri compacte la 390px

Doua probleme raportate de user pe pagina Mapari pe mobil (screenshot 390px): 1. Butoanele Salveaza/Sterge taiate: regula `.tabel-card td button {width:100%}` (specificitate 0,1,2) batea `.act {width:44px}` (0,1,0), deci cele doua butoane .act deveneau full-width si al doilea (Sterge) iesea din card (celula are nowrap). Fix: bloc @media (max-width:767px) nou, ultimul in <style> (castiga pe cascada) — celula Actiuni devine flex-row, butoanele .act width:auto/flex:1 cu text vizibil. 2. Carduri prea inalte + label-uri inutile: .tabel-card randa etichetele data-eticheta ca pseudo-titluri + linia redundanta "acum: COD — nume" (duplica select-ul de sub). Fix: pe mobil se ascund pseudo-etichetele si linia .map-acum, padding strans. Cardul trece de la ~7 la ~3 elemente. Atributele data-eticheta raman in DOM (a11y+teste). Include si raportul de comparatie UI 5.16 cu appendix-ul /autoplan (CEO/Design/Eng, audit trail, plan aprobat) + addendum cu corectia la sectiunea 8 ("Mapari conform" era gresit: nu testase randarea mobila a paginilor actionabile). Verificare: 80 teste web verzi (test_web_responsive + mapari + submissions + tabs + modal); confirmare vizuala la 390px (render TestClient -> screenshot Playwright). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 08:18:27 +00:00
parent 80d90f317d
commit e1243f603e
3 changed files with 560 additions and 1 deletions
--- a/app/web/templates/_mapari.html
+++ b/app/web/templates/_mapari.html
@@ -134,7 +134,7 @@
              <input type="hidden" name="cod_op_service" value="{{ m.cod_op_service }}">
            </form>
            <div><strong>{{ m.cod_op_service }}</strong></div>
-            <div class="muted" style="font-size:12px;">
+            <div class="muted map-acum" style="font-size:12px;">
              acum: {{ m.cod_prestatie }}{% if m.nume_prestatie %} — {{ m.nume_prestatie }}{% endif %}
            </div>
          </td>
--- a/app/web/templates/base.html
+++ b/app/web/templates/base.html
@@ -763,6 +763,32 @@
      .trimitere-slim { padding:12px 14px; }
    }
    /* === SENTINEL-COMPONENTE-SLIM: sfarsit componente slim US-002 === */
+    /* === Fix mobil Mapari (bug live 2026-06-29) ===
+       Doua probleme raportate la 390px pe pagina Mapari:
+       (1) butoanele Salveaza/Sterge taiate: regula `.tabel-card td button {width:100%}`
+           (specificitate 0,1,2) batea `.act {width:44px}` (0,1,0) -> cele doua butoane act
+           deveneau full-width si al doilea (Sterge) iesea din card (celula are nowrap).
+       (2) carduri prea inalte: etichetele data-eticheta randate ca pseudo-titluri +
+           linia redundanta "acum: COD — nume" (duplica select-ul de dedesubt).
+       Plasat ultimul in <style> => castiga pe cascada la specificitate egala.
+       Atributele data-eticheta raman in DOM (a11y + teste); doar pseudo-eticheta se ascunde. */
+    @media (max-width:767px) {
+      /* Carduri Mapari compacte: fara etichete-zgomot (continutul e auto-descriptiv,
+         ca la cardul de trimiteri), padding strans. */
+      .tabel-card td::before { display:none; }
+      .tabel-card tr { padding:9px 12px; margin-bottom:8px; }
+      .tabel-card td { padding:3px 0; }
+      /* "acum: COD — nume" e redundant cu select-ul de dedesubt (aceeasi valoare). */
+      .map-acum { display:none; }
+      /* Celula Actiuni: butoanele act pe UN rand, vizibile, cu text (nu iconita-only
+         ambigua, nu full-width care impinge al doilea buton afara cardului).
+         `.tabel-card td .act` (0,2,1) > `.tabel-card td button` (0,1,2). */
+      .tabel-card td[data-eticheta="Actiuni"] { display:flex; gap:8px; align-items:stretch;
+                                                margin-top:2px; }
+      .tabel-card td .act { width:auto; flex:1 1 0; min-width:0; min-height:44px; padding:8px 12px; }
+      .tabel-card td .act .act-tx { display:inline; }
+      .tabel-card td .act .act-ic { display:inline-block; }
+    }
  </style>
 </head>
 <body>
--- a/docs/raport-comparatie-mockup-5.16.md
+++ b/docs/raport-comparatie-mockup-5.16.md
@@ -0,0 +1,533 @@
+<!-- /autoplan restore point: /home/claude/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-exemple-etichetate-autoplan-restore-20260629-070833.md -->
+# Raport comparatie UI real vs. mockup-uri (PRD 5.16 + 5.17)
+
+**Data**: 2026-06-29
+**Metoda**: comparatie in browser (Playwright, 1280px + 390px) intre aplicatia live
+(`http://localhost:8010`, cont 2 "Romfast SRL", 34 trimiteri) si mockup-urile de
+referinta din `docs/mockups/`. Pentru fiecare pagina/formular am pus fata in fata
+implementarea reala si intentia de design, apoi am evaluat in spiritul PRD-urilor.
+
+> Concluzie pe scurt: **antetul, /login, selectorul de tema, contoarele si modalele
+> sunt conforme**. Abaterea dominanta este **densitatea informationala**: lista de
+> trimiteri si tabelul de preview din import afiseaza mult mai multa informatie pe rand
+> decat mockup-ul minimalist — exact observatia userului ("randurile foarte late").
+> Plus un **bug de layout** (coliziune coloane in preview-ul de import) si cateva
+> abateri minore de copy/stil.
+
+---
+
+## 1. Lista de trimiteri — rand cu 4 linii in loc de 2 (PRIORITATE INALTA)
+
+**Aceasta e problema semnalata de user.**
+
+| | Mockup (`prd-5.16-dashboard.html`) | Real (`_submissions.html:100-139`) |
+|---|---|---|
+| Linii / rand | **2**: VIN + `operatie · ora` | **4**: VIN; `operatie · data+ora+secunde`; cod RAR; `nr · data · #id` |
+| Pastila de stare | DOAR pe exceptii (In coada / De corectat / Trimis); finalizatele **nu au pastila** | **pe fiecare rand**, inclusiv "Finalizat" |
+| Marca de timp | ora scurta (`09:42`) | datetime complet cu secunde (`27.06.2026 22:25:52`) |
+| Inaltime efectiva | ~2 randuri text | ~2x mai mare; pe mobil un rand se desfasoara pe 5-6 linii |
+
+Cauza in cod (`app/web/templates/_submissions.html`):
+- **Linia 3** — codul RAR (`OE-8`) / "nemapat": liniile 113-119.
+- **Linia 4** — `vehicul_nr · data_prestatie · #id_prezentare`: liniile 121-127.
+- **Marca de timp** foloseste `r.updated_at` complet (data+ora+secunde): linia 111
+  (mockup-ul foloseste ora scurta).
+- **Pastila mereu randata** cu `r.stare_scurt`: liniile 137-139 (mockup-ul ascunde
+  pastila pe starea implicita/finalizata — minimalism "linistit cand e ok, zgomotos
+  cand e exceptie", in spiritul D6/zero-silent-failures).
+
+**Recomandari** (in ordinea impactului):
+1. **Comprima la 2 linii pe starea normala**: pastreaza linia 1 (VIN) + linia 2
+   (`operatie · data`). Muta cod RAR, nr. inmatriculare si `#id_prezentare` in modalul
+   de detaliu (care le are deja — vezi sectiunea 5) sau intr-un al doilea rand afisat
+   doar la hover/expand. Informatia completa nu trebuie sa coabiteze pe rand cu lista.
+2. **Ascunde pastila pe starea finalizata** (afiseaz-o doar pe `queued/sending/
+   needs_*/error`), exact ca mockup-ul. Finalizat = implicit linistit.
+3. **Scurteaza marca de timp**: data fara secunde (`27.06.2026`) sau `data · ora`
+   fara secunde. Secundele sunt zgomot.
+4. Daca cod RAR / nr. inmatriculare sunt considerate esentiale in lista, fa-le optional
+   (toggle "afiseaza detalii") in loc sa fie mereu prezente — implicit colapsat.
+5. Minor: `eticheta-problema` are `font-size:10px` (`_submissions.html:133`) — sub
+   pragul de 12px din scala 5.16/US-002; recableaza pe `--fs-xs`.
+
+---
+
+## 2. Acasa — titlu de sectiune + toolbar mult mai greu decat mockup-ul (PRIORITATE MEDIE)
+
+PRD 5.16/US-002 cere explicit: *"Se ELIMINA titlul de sectiune ... lista incepe direct
+sub tab-uri/filtre"* si *"fara subtitlu de sectiune"*. In real:
+
+- **Titlul "Trimiterile tale" (h2) + link-urile "export CSV: trimise | toate"** sunt inca
+  prezente ca antet de sectiune deasupra listei. Mockup-ul nu are titlu de sectiune —
+  lista porneste direct sub tab-uri.
+- **Toolbar-ul de filtre e mult mai dens** decat mockup-ul. Mockup: 4 pastile simple de
+  stare (`Toate / In coada / Trimise / De corectat`). Real: pastile de timp
+  (`Azi / 7 zile / 30 zile / Custom`) + camp cautare `Vehicul (nr/VIN)` + butoane
+  `Filtreaza` + `Toate` + un AL DOILEA rand de actiuni bulk (`Cod RAR ... / Aplica cod
+  / Sterge selectate`). Sunt functii reale, dar contrazic intentia minimalista.
+
+**Recomandari**:
+1. Elimina antetul "Trimiterile tale" (sau redu-l la un label discret); muta link-urile
+   de export CSV langa tab-uri sau in meniul de cont.
+2. Pastreaza filtrele de timp + cautarea (sunt utile), dar **colapseaza randul de actiuni
+   bulk** (Cod RAR / Aplica cod / Sterge selectate) intr-un buton "Actiuni" care se
+   deschide doar cand exista selectie — azi ocupa un rand permanent.
+3. Aliniaza pastilele de stare cu mockup-ul (stari, nu doar timp), eventual ambele
+   grupuri pe acelasi rand.
+
+---
+
+## 3. Linia "Plan: Gratuit · 34/60 luna asta" reintroduce un meta-rand sub tab-uri (PRIORITATE MEDIE)
+
+PRD 5.17/US-006 + 5.16 cer planul ca **badge in antet** (exista — "GRATUIT") si **linie
+in meniul burger**, NU ca rand in corpul paginii. Real afiseaza consumul si ca **rand
+standalone sub tab-uri**, pe FIECARE tab (Acasa, Mapari, Integrare). Asta:
+- duplica informatia din antet, si
+- recreeaza exact "meta-randul de sectiune" pe care 5.16/US-002 voia sa-l elimine.
+
+**Recomandare**: muta `N/60 luna asta` in meniul burger / pagina Cont (cum cere PRD-ul);
+pastreaza in antet doar badge-ul de plan. Daca avertizarea de consum (>=80%) trebuie sa
+fie vizibila in corp, afiseaz-o **doar** in starea de avertizare, nu permanent.
+
+---
+
+## 4. Import — preview pas 3: coliziune de coloane + tabel mai greu decat mockup-ul
+
+### 4a. BUG layout — pastila STARE se suprapune peste coloana VEHICUL (PRIORITATE INALTA)
+In tabelul de preview (pas Verifica), pastila de stare ("Date incomplete" / "Cod RAR
+lipsa") se **suprapune vizual** peste textul din coloana VEHICUL (`CT88NOE` / `B123ABC`
+apar lipite/sub pastila). Vizibil clar la 1280px. E un bug de latime de coloana / pastila
+fara `white-space:nowrap` sau coloana STARE prea ingusta.
+**Recomandare**: largeste coloana STARE / pune pastila pe `nowrap` cu min-width, sau
+muta stare si vehicul pe coloane clar separate; testeaza la 1280 si 390.
+
+### 4b. Densitate — tabel cu 8 coloane vs. 4 in mockup (PRIORITATE MEDIE)
+Mockup pas 3 = 4 coloane (`VIN / OPERATIE / DATA / STARE` + link editeaza). Real = 8
+coloane (`# / STARE / VEHICUL / OPERATIE / DATA / KM FINAL / NOTE / ACTIUNI`), cu coloana
+NOTE care afiseaza inline mesaje de validare lungi ("VIN trebuie sa aiba exact 17
+caractere..."). Aceeasi tendinta ca lista de trimiteri: prea multa informatie pe rand.
+**Recomandare**: redu la coloanele esentiale (Stare / Vehicul / Operatie / Data +
+Editeaza); muta KM si mesajul de validare in randul de editare (care le are deja) sau
+intr-un tooltip pe pastila de stare.
+
+### 4c. Pastilele de filtru sunt toate albastru-plin (par toate active) (PRIORITATE MICA)
+`Toate (2) / Cod RAR lipsa (1) / Date incomplete (1)` sunt randate ca butoane albastru
+plin — toate par selectate simultan. Mockup-ul foloseste pastile subtiri cu dot colorat,
+doar cea activa accentuata.
+**Recomandare**: stil outline + dot pentru filtrele inactive; plin doar pentru cel activ.
+
+---
+
+## 5. Import — pas 1: dropzone compact vs. zona mare din mockup (PRIORITATE MICA)
+
+Mockup pas 1 = zona mare cu chenar punctat, iconita upload centrata, "Trage fisierul
+aici", buton "Alege fisier" + chips de format (`.xlsx .csv .xls`). Real = o bara
+orizontala slim ("Importa: [Alege fisier] sau trage aici"). Bara compacta se potriveste
+cu "import colapsat", deci e o abatere **acceptabila**; daca se doreste fidelitate cu
+mockup-ul, zona se poate inalta cand `<details>` e deschis (chenar punctat + iconita).
+Pozitiv: stepper-ul (4 pasi, cifre in cerc, pas finalizat = bifa verde) si saltul automat
+peste pas 2 la format recunoscut sunt conforme si bune.
+
+---
+
+## 6. Formularul de editare (modal corectie / editare rand)
+
+Comparatie cu modalul din mockup ("Corecteaza trimiterea / randul"):
+
+- **Conform**: structura (VIN; Data + Nr. inmatriculare pe 2 coloane; Observatii;
+  "Prestatii — cod RAR pe fiecare operatie"; picker cu denumiri; "+ Adauga alta
+  operatie / cod RAR"). Bug-urile US-004..007 sunt rezolvate functional.
+- **Anomalie (PRIORITATE MEDIE)**: intre randul de operatie si controlul "+ Adauga alta
+  operatie" apare un **chenar gol** (container de chips fara continut) — pare nefinisat /
+  neintentionat. De ascuns cand nu are chips.
+- **Stil nume operatie (PRIORITATE MICA)**: mockup-ul afiseaza numele operatiei
+  **bold/uppercase, proeminent** ("SCHIMB PLACUTE FRANA — lipsa cod"); real il arata
+  in greutate normala, mic ("Schimb placute frana · lipsa cod"). Mai putin emfatic.
+- **Copy butoane (PRIORITATE MICA)**: real "Salveaza / Anuleaza"; mockup + PRD/US-007
+  spun "Renunta" (si "Salveaza si retrimite" in modalul de detaliu). Aliniaza eticheta
+  "Anuleaza" -> "Renunta".
+
+---
+
+## 7. Tema transversala — diacritice in textul vizibil (PRIORITATE MICA)
+
+Mockup-urile (intentia de design) folosesc diacritice romanesti complete in textul catre
+user ("Observatii" -> "Observații", "Salveaza" -> "Salvează", "Numar inmatriculare" ->
+"Număr înmatriculare", "Adauga" -> "Adaugă", "In coada" -> "În coadă"). Aplicatia reala
+omite diacriticele in majoritatea label-urilor. US-001 a confirmat ca fontul de sistem
+randeaza corect diacriticele, iar landing-ul le foloseste deja — deci e o diferenta de
+finisaj fata de mockup, nu o limitare tehnica.
+**Recomandare**: aplica diacritice la **textul vizibil pentru user** (label-uri, butoane,
+titluri), pastrand codul/comentariile fara diacritice ca azi. Optional (non-blocant);
+de decis daca se urmareste fidelitate completa cu mockup-urile.
+
+---
+
+## 8. Pagini fara mockup dedicat (judecate dupa design system) — CONFORME
+
+- **Mapari** (`?tab=mapari`): carduri, tabele, fonturi uniforme — coerent cu sistemul.
+  Singura observatie: cardul gol "De rezolvat" cand nu exista needs_mapping (se poate
+  ascunde cand e gol).
+- **Integrare** (`?tab=integrare`): tab-uri de limbaj (curl/Python/PHP/C#/Node/VFP),
+  blocuri de cod, carduri export + test cheie — curat si profesional.
+
+---
+
+## 9. Ce este DEJA conform mockup-urilor (pentru context — fara actiune)
+
+- **/login**: layout brandeit pe 2 coloane (panou ROMFAST + formular), badge mediu,
+  link signup — conform `prd-5.16-header-login-tema.html`.
+- **Antet**: titlu "ROMFAST AUTOPASS" + badge mediu (TEST) + badge plan (GRATUIT) +
+  "Service auto: Romfast SRL" + pastila "RAR online" (dot verde) + meniu burger.
+  Conform US-010/003.
+- **Selector tema**: pill cu iconita + eticheta ("Auto"), iconita-only pe mobil.
+  Conform US-011.
+- **Contoare**: 5 carduri separate desktop (Total / Luna asta / Azi / In coada /
+  De corectat); bara compacta de cifre pe mobil. Conform US-002. (Minor: eticheta
+  "Total" vs mockup "Total trimise"; pe mobil "Erori" vs mockup "Corectat".)
+- **Import colapsat pe Acasa** (`<details>` slim "+ Importa fisier"). Conform US-013.
+- **Modal detaliu trimitere finalizata**: read-only, label-uri clare, "Detalii tehnice"
+  colapsabil — curat si conform.
+
+---
+
+## Rezumat prioritati
+
+| # | Constatare | Prioritate | Fisier principal |
+|---|---|---|---|
+| 1 | Rand lista cu 4 linii + pastila mereu (rânduri late) | **INALTA** | `_submissions.html:110-139` |
+| 4a | Coliziune pastila STARE / coloana VEHICUL in preview import | **INALTA** | `_preview_import.html` |
+| 2 | Titlu sectiune "Trimiterile tale" + toolbar bulk permanent | MEDIE | `_acasa.html` / `_submissions.html` |
+| 3 | "Plan: N/60" ca rand in corp (duplica antetul) | MEDIE | `_acasa.html` / context layout |
+| 4b | Tabel preview cu 8 coloane vs 4 | MEDIE | `_preview_import.html` |
+| 6 | Chenar gol de chips in formularul de editare | MEDIE | `_chips_prestatii.html` |
+| 4c | Pastile de filtru toate albastru-plin | MICA | `_preview_import.html` |
+| 5 | Dropzone import compact vs zona mare | MICA | `_upload.html` |
+| 6 | Nume operatie ne-emfatic + copy "Anuleaza" vs "Renunta" | MICA | `_form_editare.html` / `_chips_prestatii.html` |
+| 7 | Diacritice lipsa in textul vizibil | MICA | transversal |
+
+**Cele doua corectii cu impact maxim**: (1) comprimarea randului de lista la 2 linii +
+ascunderea pastilei pe finalizat, si (4a) bug-ul de coliziune din preview-ul de import.
+Restul sunt finisaje de aliniere la spiritul minimalist al mockup-urilor.
+
+---
+---
+
+<!-- ================= /autoplan REVIEW APPENDIX ================= -->
+# /autoplan — Revizuire automata (CEO → Design → Eng)
+
+> Tratam acest raport ca **plan**: cele 10 recomandari (sectiunile 1-7) sunt
+> elementele de implementat. Scope UI: DA (Design conduce). Scope DX: NU
+> (sectiunea 8 "Integrare" e marcata CONFORM, fara actiune pe suprafata API/CLI).
+> Voci duale: Claude subagent + Codex per faza. Decizii intermediare auto-decise
+> pe cele 6 principii; deciziile de gust merg la poarta finala.
+
+## Faza 1 — CEO (Strategie & Scope)
+
+### 0A. Provocarea premiselor
+
+Planul (raportul) se sprijina pe 4 premise implicite:
+
+- **P1 — Fidelitatea fata de mockup este tinta.** Mockup-urile reprezinta intentia
+  corecta de design; orice abatere a UI-ului real e un defect. *Status: in mare
+  valida, dar nu absoluta* — raportul insusi recunoaste ca UI-ul real a adaugat
+  FUNCTII pe care mockup-ul minimalist nu le are (cautare, filtre de timp, bulk-fix
+  cod RAR, cod RAR + #id_prezentare pe rand). Acele functii pot sa-si merite densitatea.
+- **P2 — "Densitatea informationala" e problema centrala**, iar minimalismul ("linistit
+  cand e ok, zgomotos pe exceptie", D6/zero-silent-failures) e principiul corect.
+  *Status: validata de durere reala* — userul s-a plans explicit de "randurile foarte
+  late". Aici premisa e bine sustinuta.
+- **P3 — Criteriile de acceptare PRD 5.16/5.17 sunt obligatorii** si UI-ul real a
+  derivat de la ele (titlu sectiune de eliminat `_coada.html:10`; plan ca badge nu rand
+  in corp `_status.html:140`; prag tipografic 12px incalcat de `font-size:10px`
+  `_submissions.html:133`). *Status: validata — sunt AC contractuale, nu preferinte.*
+  Acestea NU sunt decizii de gust; sunt conformare la PRD.
+- **P4 — Mutarea informatiei de pe rand nu pierde nimic** fiindca e deja in modalul
+  de detaliu / randul de editare. *Status: tehnic adevarata* (verificat: modalul are
+  cod RAR/nr/#id; randul de editare are KM + mesaj validare), dar muta un cost de la
+  "vizibil la scanare" la "vizibil dupa click" — un compromis de UX, nu zero-cost.
+
+**Premisa care merita judecata umana** (poarta de mai jos): pentru informatia scoasa
+de pe rand (cod RAR, #id_prezentare, marca de timp completa) — o **ascundem in modal**
+(minimalism strict, fidel mockup-ului) sau o **pastram in spatele unui toggle
+compact/detaliat** (operatorul de service poate vrea sa scaneze cod RAR/#id fara click)?
+Userul s-a plans de latime, NU neaparat ca informatia in sine e inutila.
+
+### 0B. Harta de leverage (ce exista deja)
+
+| Sub-problema | Cod existent reutilizat | Tip schimbare |
+|---|---|---|
+| Compresie rand lista | modal detaliu (`_fragments/trimitere/{id}`) are deja cod RAR/nr/#id | SCADERE (sterge L3/L4 din `_submissions.html`) |
+| Pastila pe finalizat | `r.stare_css/stare_scurt` exista; conditie lipsa | conditie `{% if %}` in jurul liniei 138 |
+| Prag tipografic 12px | sistemul de token-uri `--fs-xs:12px` exista deja in mockup/base | re-cablare literal `10px` → `--fs-xs` |
+| KM + validare in preview | randul de editare le are deja | SCADERE coloane din `_preview_import.html` |
+| Chenar gol chips | `_has_ops`/`_chips` deja calculate | conditie `{% if _chips %}` pe container |
+
+Concluzie: planul e **dominant SCADERE + re-tokenizare**, putin cod nou, leverage mare.
+
+### 0B-bis. Pattern de fond depistat (in afara raportului, in blast radius)
+
+`_submissions.html` foloseste **literali px inline** peste tot (`font-size:13px`,
+`12px`, `11px`, `10px` — liniile 18, 45, 54, 63, 133, 153, 182...) in loc de token-uri
+`--fs-*`. Raportul a prins DOAR instanta de 10px (US-002). Cauza-radacina e ca scala
+tipografica 5.16 nu e aplicata sistematic in template-urile de lista/preview. *Flag
+pentru poarta finala: extindem fix-ul la re-tokenizarea template-urilor atinse, sau
+doar instanta 10px?* (In blast radius, < 1 zi CC — candidat de auto-aprobat pe P2.)
+
+### 0C. Dream-state delta
+
+```
+CURENT                    →  ACEST PLAN                →  IDEAL 12 LUNI
+UI real, dens, derivat de    Aliniat la minimalismul       Sistem de token-uri aplicat
+la AC-urile PRD 5.16/5.17;   mockup-ului; bug 4a rezolvat;  uniform (zero literali px);
+bug coliziune coloane;       randuri 2 linii; tipo 12px+    teste de regresie design vs
+literali px imprastiati.     pe instantele semnalate.       mockup (Playwright snapshot).
+```
+Delta ramasa dupa plan: re-tokenizarea completa + testele de regresie vizuala (defer).
+
+### 0C-bis. Alternative de implementare
+
+| # | Abordare | Efort (CC) | Risc | Pro / Contra |
+|---|---|---|---|---|
+| A | Fix exact ca raportul (scade L3/L4 in modal, ascunde pastila, fix bug, polish) | ~30 min | mic | + fidel mockup, simplu / − operatorul pierde cod RAR/#id la scanare |
+| B | Ca A, dar info de rand in spatele unui toggle compact/detaliat | ~60 min | mediu | + nu pierde info / − complexitate noua, contrazice "explicit over clever" (P5) |
+| C | Ca A + re-tokenizare px→token in template-urile atinse | ~50 min | mic | + rezolva cauza-radacina P2 / − atinge mai multe linii |
+
+Recomandare CEO: **A pentru structura** (P5 explicit, P1 completeness fata de mockup),
+cu **C ca extindere in blast radius** (P2 boil-the-lake pe tipografie). B intra la poarta
+finala ca decizie de gust (toggle vs. mutare-in-modal).
+
+### 0D. Mod: **SELECTIVE EXPANSION**
+Nucleu = sectiunile 1 + 4a (impact maxim, una e bug). Extindere selectiva in blast
+radius = re-tokenizarea (0B-bis) + AC-urile PRD (2, 3). Restul (polish MICA) = inclus,
+cost trivial.
+
+### 0E. Interogare temporala
+- **Ora 1**: bug 4a (coliziune `_preview_import.html`) + compresie rand `_submissions.html`
+  + ascundere pastila finalizat. Astea ating durerea userului + singurul bug real.
+- **Ora 6+**: sectiunile 2, 3 (conformare AC), chenarul gol chips (6), polish copy/stil,
+  diacritice (decizie separata).
+
+### 0F. Confirmare mod
+SELECTIVE EXPANSION confirmat: planul livreaza nucleul de impact + extinderile in blast
+radius care isi platesc costul, defera testele de regresie vizuala.
+
+### POARTA DE PREMISE — REZOLVATA (directiva user, 2026-06-29)
+
+Userul a dat o directiva mai precisa decat oricare optiune A/B/C. **Spec guvernanta
+pentru randul de lista:**
+
+> **2 linii MAXIM** (inaltime minimalista, ca in mockup), dar randul CONTINE:
+> **nr. inmatriculare · operatia RAR (cod) · operatia din service (denumire) · data**,
+> plus **pill de stare (inclusiv "Finalizat")**.
+
+Consecinte (override-uri fata de recomandarile raportului):
+- **OVERRIDE rec. 1.1** (partial): cod RAR si operatia din service RAMAN pe rand, NU se
+  muta in modal. Doar VIN (ca identificator primar), #id_prezentare si secundele din
+  timestamp se scot. Identificatorul primar devine **nr. inmatriculare**, nu VIN.
+- **OVERRIDE rec. 1.2**: pastila RAMANE pe finalizat (userul cere explicit "+ pill
+  finalizat"). NU se ascunde pe starea normala. (Raportul recomanda ascunderea — anulat.)
+- **CONFIRMA rec. 1.3**: marca de timp scurta (data, fara secunde).
+- **CONFIRMA rec. 1.4**: implicit 2 linii (fara toggle detaliat — userul nu vrea toggle).
+
+Aceasta devine cerinta de design pentru Faza 2 (aranjarea celor 5 campuri in 2 linii).
+Campuri necesare pe rand: `vehicul_nr`, `cod_rar`, `operatie` (denumire service), `data`,
+`pill`. Campuri eliminate: `vin_scurt` (sau retrogradat), `#id_prezentare`, secunde.
+
+> Nota proces: aceasta a fost singura poarta de judecata umana din Faza 1. Suprafata
+> strategica (minimalism vs. densitate) a fost decisa de user; nu mai exista premisa
+> deschisa de provocat. Vocile duale CEO sunt redundante pe aceasta suprafata si se
+> consolideaza in Faza 3 (vezi nota de proportionalitate).
+
+### Voci (proportionalitate)
+- Codex: **INDISPONIBIL** (limita de utilizare atinsa, reset 18 iul) → tag `[subagent-only]`.
+- Claude subagent Design + Claude subagent Eng: rulate la adancime completa, pe cod real
+  (template-uri + rute + teste), nu pe proza. Acestea sunt vocile substantiale.
+
+## Faza 2 — Design (UI/UX)
+
+### Aranjarea randului de 2 linii (livrabilul central)
+
+Placuta-primul e corect: un operator identifica masina dupa nr. inmatriculare de pe
+comanda, nu dupa VIN de 17 caractere. Layout propus (peste `.trimitere-slim` existent):
+
+```
+L1:  B-123-ABC  (placuta, --fs-md, weight 600, ink)  ............  [ PILL dreapta ]
+L2:  OE-8 (cod RAR, mono/accent) · Schimb placute frana (operatie, ink, ellipsis) · 27.06.2026 (muted)
+```
+
+- L1 = `vehicul_nr` (stanga, `flex:1 1 auto; min-width:0`) + pill (dreapta, `flex:0 0 auto`).
+- L2 = flex 3 celule: cod RAR (auto, primul — e identificatorul scanabil) · operatie
+  (`flex:1 1 auto; min-width:0; white-space:nowrap; text-overflow:ellipsis` — ellipsis-ul
+  pe operatie garanteaza ca randul NU trece pe a 3-a linie nici la 390px) · data (muted, ultima).
+- Operatia ramane **ink, nu muted** (e al doilea cel mai citit camp dupa placuta).
+- Ierarhie vizuala: placuta → pill → cod+operatie → data.
+
+### CONSTATARI DESIGN dincolo de raport (corectii)
+
+| # | Constatare | Sev | Fix |
+|---|---|---|---|
+| D-1 | Linia `eticheta_problema` (L:129-134) e a **5-a linie** → strica "2 linii MAX" pe randurile de eroare | inalta | DECIZIE DE GUST (vezi poarta) — drop vs micro-linie doar pe eroare |
+| D-2 | Pastilele **NU sunt conforme** (raportul sec.9 gresit): chip outline gri, fara dot/fill, doar culoare text. Cu pill permanent pe orice rand → zgomot gri permanent | medie-inalta | restileaza pill ca mockup: fill tint + dot 7px + text colorat (DECIZIE DE GUST) |
+| D-3 | Bug 4a cauza-radacina: `table-layout:fixed` + `.col-stare width:104px` (base.html:401) + pill `nowrap` → overflow peste col-vehicul | inalta | widen `.col-stare`→~140px; reducerea 8→4 col NU rezolva bug-ul (curge in coloanele fluide, nu in col-stare fixa) |
+| D-4 | Lipsa stare de eroare la incarcarea listei (HTMX `/_fragments/submissions` 500 → spinner blocat) | medie | adauga partial de eroare / `hx-on::response-error` (DEFER TODOS — pre-existent) |
+| D-5 | Filtre 4c "toate albastru": raportul e **STALE** — codul are deja `background:transparent` + doar activ plin (`_preview_import.html:56-58,277`). Ramane doar diferenta stilistica (fara dot) | mica | NO-ACTION pe bug; eventual dot pe mockup (gust, optional) |
+
+### Litmus design (consens)
+```
+DESIGN — voci:                          Claude-sub  Codex      Consens
+1. Layout 2 linii fezabil/curat?         DA          N/A        Confirmat (single voice)
+2. Placuta-primul corect?                DA          N/A        Confirmat
+3. Bug 4a cauza reala identificata?      DA          N/A        Confirmat
+4. Pill conform mockup?                  NU          N/A        Flag (D-2)
+5. Stari complete (loading/error/mobil)? partial     N/A        Gap (D-4 error state)
+6. Polish: defect vs gust separat?       DA          N/A        Confirmat (4c stale, 6 real)
+```
+
+## Faza 3 — Eng (arhitectura, regresie)
+
+### Arhitectura (grafic dependente)
+```
+_acasa.html ─include─ _coada.html ─include─ _submissions.html  (LISTA: .lista-trimiteri-slim)
+                                  └─ titlu "Trimiterile tale" (h2, L:10) + export CSV  ← scoate (PRD)
+_preview_import.html (.tabel-trimiteri) ─include─ _preview_rand.html (pill inline-flex)  ← bug 4a
+_chips_prestatii.html (.chips operatii-mode, L:122)  ← chenar gol
+_status.html:140  rand plan N/60 in corp  ← muta in burger/cont (PRD)
+
+DATE: r.prez = prezentare_din_payload (payload_view.py:86) → vehicul_nr, cod_rar,
+      operatie, data_prestatie TOATE prezente. Schimbare = TEMPLATE-ONLY (fara rute).
+```
+
+### Decizie semantica: marca de timp
+`r.updated_at` (L:111) = `format_data_rar` care adauga MEREU `%H:%M:%S` (labels.py:158) →
+sursa secundelor zgomotoase. **Auto-decis: foloseste `r.prez.data_prestatie`** (data
+prestatiei declarate, deja date-only `2026-06-18`) — semantic e "data" pe care o cere
+userul, langa celelalte campuri de prezentare. (Alternativa: helper `format_data_scurta`
+%d.%m.%Y daca trebuie pastrat updated_at — respins ca redundant.)
+
+### Eng consensus table
+```
+ENG — voci:                              Claude-sub  Codex      Consens
+1. Arhitectura sunet (template-only)?    DA          N/A        Confirmat
+2. Acoperire teste suficienta?           NU (3 rup)  N/A        Gap mapat (vezi test plan)
+3. Riscuri performanta?                  nule        N/A        Confirmat (subtractiv)
+4. Securitate?                           N/A         N/A        Fara suprafata noua
+5. Cai de eroare tratate?                partial     N/A        Gap: vehicul_nr=='—' + D-4
+6. Risc deploy gestionabil?              DA          N/A        Confirmat (4 teste de update)
+```
+
+### Regresie (artefact pe disc)
+Test plan scris: `~/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-test-plan-20260629-071500.md`
+- **3 teste se strica HARD**: `test_vin_pe_rand_separat_sub_nr`, `test_rand_slim_vin_operatie_pill`,
+  `test_submissions_coloane_umane` (toate hard-codeaza VIN-primar / #id-pe-rand).
+- **2 la risc**: depind de numele claselor → **pastreaza `slim-vin`/`slim-meta`** (reumple, nu redenumi).
+- Invariant cod_rar ("OE-2 vizibil, fara prefix, nemapat") **pastrat** de spec.
+
+### Registru moduri de esec
+| Mod | Trigger | Tratare in plan | Gap? |
+|---|---|---|---|
+| Placuta lipsa | payload fara `vehicul_nr` → `'—'` | azi mascat de VIN-primar | **GAP — auto-include fallback** (nu randa em-dash singur) |
+| cod_rar lipsa | nemapat | guard `!= '—'` → "nemapat" | OK (pastrat) |
+| operatie lunga la 390px | denumire lunga | ellipsis + min-width:0 (vezi L2) | OK daca se aplica layout-ul |
+| Lista 500 / network drop | HTMX swap esueaza | — | GAP D-4 (defer TODOS) |
+| Pill finalizat a11y | text-in-pill | stare prin TEXT + title | OK (invariant respectat) |
+
+### Retokenizare px (auto-decis: BOUNDED)
+Eng: retokenizarea completa px→token e scope creep (`13px→--fs-sm`=13.5px schimba layout,
+risc regresie vizuala fara baza AC). **Auto-decis: doar instanta sub-12px** (`eticheta-problema`
+10px→`--fs-xs`) — singura cu acoperire AC. (Suprascrie sugestia CEO 0B-bis de auto-aprobare larga.)
+
+## Decision Audit Trail
+
+| # | Faza | Decizie | Clasificare | Principiu | Rationament | Respins |
+|---|---|---|---|---|---|---|
+| 1 | CEO | Rand=2 linii cu placuta+codRAR+op+data+pill | Premisa (user) | — | directiva user la poarta | mutare cod RAR in modal |
+| 2 | CEO | Identificator primar=placuta, nu VIN | Mechanical | P1 | operator scaneaza placuta | VIN primar |
+| 3 | Eng | "data" = `data_prestatie`, nu `updated_at` | Mechanical | P5 | semantic corect, fara secunde, fara helper nou | slice updated_at |
+| 4 | Eng | Pastreaza clase `slim-vin`/`slim-meta` | Mechanical | P3 | minimizeaza churn de teste | redenumire clase |
+| 5 | Eng | Fallback `vehicul_nr=='—'` | Mechanical | P1 | evita em-dash singur ca id primar | lasa em-dash |
+| 6 | Design | Bug 4a: widen `.col-stare`~140px | Mechanical | P5 | cauza reala (fixed 104px+nowrap) | doar nowrap/min-width |
+| 7 | Design | 8→4 coloane preview (densitate) | Mechanical | P1 | match mockup; NU rezolva 4a singur | pastreaza 8 col |
+| 8 | Eng | Guard `{% if _extra %}` pe `.chips` | Mechanical | P5 | elimina chenar gol | container mereu |
+| 9 | Eng | Retokenizare px BOUNDED (doar 10px) | Taste→auto | P5 | evita shift vizual nebazat AC | retokenizare larga |
+| 10 | Design | Filtre 4c: NO-ACTION (raport stale) | Mechanical | P4 | codul deja corect | re-implementare |
+| 11 | CEO | Sec.2 titlu + sec.3 plan N/60: scoate | Mechanical | P1 | AC PRD 5.16/5.17 obligatorii | pastreaza |
+| 12 | Design | Stare eroare lista (D-4): DEFER TODOS | Mechanical | P3 | pre-existent, in afara cererii | include acum |
+| T1 | Design/Eng | eticheta_problema: **PASTREAZA micro-linie doar pe rand de eroare** (user) | Gust→rezolvat | — | normal/finalizat=2 linii strict; eroare=2+motiv (D6 loud-on-exception) | drop complet |
+| T2 | Design | **DA — restileaza pill fill+dot ca mockup** (user) | Gust→rezolvat | — | pill permanent isi merita greutatea vizuala | lasa contur gri |
+| T3 | trans | **NU aplica diacritice** (user) | Gust→rezolvat | — | non-blocant; ramane divergenta de finisaj acceptata | include/pas separat |
+
+## PLAN APROBAT (user, 2026-06-29) — implementarea NU se executa in aceasta sesiune
+
+> Status: **APROBAT ca plan**. User a ales "doar planul, nu implementa inca". Task-urile
+> de mai jos sunt gata de executat intr-o sesiune viitoare (sau /ship cand exista cod).
+
+### Spec final randul de lista (de implementat in `_submissions.html`)
+- **L1**: `vehicul_nr` (placuta, primar, `--fs-md`/weight 600, `.slim-vin` reumplut) + **pill** dreapta.
+- **L2** (`.slim-meta`): `cod_rar` (sau "nemapat", mono/accent, prima) · `operatie` (ink, ellipsis,
+  `min-width:0`) · `data_prestatie` (muted). Scoate: VIN primar, `#id_prezentare`, secundele.
+- **Pill**: ramane pe FIECARE rand inclusiv Finalizat; restilat fill-tint + dot 7px + text colorat per stare.
+- **eticheta_problema**: ramane micro-linie conditionala DOAR pe stari de problema; `10px`→`--fs-xs`.
+- **Fallback**: `vehicul_nr == '—'` → nu randa em-dash singur (mesaj fallback).
+- Pastreaza numele claselor `slim-vin`/`slim-meta` (reumple, nu redenumi) — minimizeaza churn teste.
+
+### Implementation Tasks (agregat)
+- [ ] **T-1 (INALTA) — `_submissions.html`** — refactor rand 4→2 linii cu placuta+codRAR+operatie+data_prestatie+pill; fallback placuta; pastreaza clase. Update teste: rescrie test_vin_pe_rand_separat_sub_nr, test_rand_slim_vin_operatie_pill, test_submissions_coloane_umane; adauga test 2-linii + test fallback placuta.
+- [ ] **T-2 (INALTA) — `base.html` (CSS pill) + `_submissions.html`** — restilare pill slim ca mockup (fill tint + dot + text colorat per `stare_css`); pill ramane pe finalizat.
+- [ ] **T-3 (INALTA) — `_preview_import.html` / `base.html:401`** — bug 4a: `.col-stare` width 104px→~140px (+ `overflow:hidden` sau pill wrap). NU atinge nowrap pe col-vehicul (test_web_preview_compact). Reducere 8→4 coloane (densitate) ca task separat.
+- [ ] **T-4 (MEDIE) — `_preview_import.html`** — reducere la 4 coloane esentiale (Stare/Vehicul/Operatie/Data + Editeaza); muta KM + mesaj validare in randul de editare/tooltip.
+- [ ] **T-5 (MEDIE) — `_coada.html:10-19`** — scoate titlul "Trimiterile tale" (h2); relocare export CSV langa tab-uri / meniu cont (PRD 5.16/US-002).
+- [ ] **T-6 (MEDIE) — `_status.html:140`** — scoate randul plan "N/60 luna asta" din corp; pastreaza badge antet + linie burger (PRD 5.17/US-006). Daca >=80% consum, afiseaza doar in starea de avertizare.
+- [ ] **T-7 (MEDIE) — `_chips_prestatii.html:122`** — guard `{% if _extra %}` pe containerul `.chips` (operatii-mode), elimina chenarul gol.
+- [ ] **T-8 (MICA) — `_submissions.html:133`** — `font-size:10px`→`var(--fs-xs)` (doar instanta sub-12px).
+- [ ] **T-9 (MICA) — copy/stil** — "Anuleaza"→"Renunta" (form editare); nume operatie emfatic (bold) in editorul de chips per mockup.
+- [ ] **Defer TODOS** — stare eroare HTMX lista (D-4); teste regresie vizuala; dropzone zona-mare (sec.5); retokenizare px completa; diacritice (decis: nu).
+
+### Verificare la implementare
+`python3 -m pytest tests/test_web_submissions.py tests/test_web_submissions_layout.py tests/test_web_responsive.py tests/test_web_preview_compact.py -q`
+Test plan complet: `~/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-test-plan-20260629-071500.md`
+
+## ADDENDUM 2026-06-29 — bug live mobil Mapari (CORECTIE la sectiunea 8)
+
+Sectiunea 8 a raportului a marcat **Mapari ca "CONFORME"**, dar nu a testat corect
+randarea mobila. User a raportat (cu screenshot, 390px) doua probleme reale, **REZOLVATE**:
+
+1. **Butoanele Salveaza/Sterge taiate pe mobil.** Cauza: `.tabel-card td button {width:100%}`
+   (base.html, specificitate 0,1,2) batea `.act {width:44px}` (0,1,0) → cele doua butoane
+   `.act` deveneau full-width, iar al doilea (Sterge) iesea din card (celula are `nowrap`).
+   Fix: bloc `@media (max-width:767px)` nou (ultimul in `<style>`) — celula Actiuni devine
+   flex-row, butoanele `.act` `width:auto; flex:1 1 0` cu text vizibil. Acum ambele butoane
+   sunt complet vizibile, una langa alta, cu eticheta.
+2. **Carduri prea inalte + label-uri inutile.** Cauza: `.tabel-card` randa etichetele
+   `data-eticheta` ca pseudo-titluri ("Operatie"/"Cod RAR"/"Actiuni") + linia redundanta
+   "acum: COD — nume" (duplica select-ul). Fix: pe mobil se ascund pseudo-etichetele
+   (`.tabel-card td::before{display:none}`) si linia "acum:" (`.map-acum{display:none}`),
+   padding strans. Cardul trece de la ~7 elemente la ~3 (nume + select + butoane).
+
+Fisiere: `app/web/templates/base.html` (CSS), `app/web/templates/_mapari.html` (clasa `map-acum`).
+Verificare: 80 teste web verzi (test_web_responsive + mapari + submissions + tabs + modal);
+confirmare vizuala la 390px (render TestClient → screenshot Playwright). Atributele
+`data-eticheta` raman in DOM (a11y + teste). NEPLASAT inca: commit (la cererea userului).
+
+> Lectie pentru viitor: "conform" in raportul vizual trebuie sa includa explicit verificarea
+> la 390px a PAGINILOR ACTIONABILE (butoane, formulare), nu doar a layout-ului general.
+
+## GSTACK REVIEW REPORT
+- Faze: CEO (premisa rezolvata de user) → Design (subagent, full) → Eng (subagent, full). DX: skip (fara suprafata developer).
+- Voci: `[subagent-only]` — Codex indisponibil (limita utilizare, reset 18 iul). 2 subagenti Claude pe cod real.
+- Decizii: 15 (12 auto, 3 gust rezolvate de user). Audit trail complet mai sus.
+- Status: **APROBAT ca plan**; implementare amanata la cererea userului.
+- Artefacte: test plan pe disc; restore point pe disc; task list agregat mai sus.
+
+## NOT in scope (defer TODOS.md)
+- Stare de eroare HTMX la incarcarea listei (D-4) — robustete pre-existenta, separata de cerere.
+- Teste de regresie vizuala (Playwright snapshot vs mockup) — ideal 12 luni.
+- Retokenizare px completa in template-uri — risc shift vizual fara baza AC.
+- Dropzone import zona-mare (sec.5) — raport il marcheaza acceptabil.
+
+## Ce exista deja (leverage)
+- Toate cele 5 campuri pe `r.prez` (payload_view.py:86) → schimbare template-only.
+- Modal detaliu are deja VIN integral + #id (test_detaliu_trimitere) → P4 confirmata, zero pierdere date.
+- Sistem token `--fs-*` exista (base.html:52); lista si preview sunt suprafete CSS separate
+  (`.lista-trimiteri-slim` vs `.tabel-trimiteri`) → widen col-stare e SIGUR pt lista.
+