feat(5.9): US-006 - fundatie responsive (viewport, nav, modal full-screen mobil)

- base.html: conventie breakpoint unic 767px documentata + bloc @media mobil extins
- modal full-screen pe mobil (100vw/100vh, fara backdrop lateral, x >=44px, scroll intern)
- header/nav colapsat sub 768px + tinte touch >=44px (.icon-btn/.tab-link/.cont-menu)
- tests/test_web_responsive.py NOU (3 teste) + prd.json/progress.txt US-006 passes

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

app/web/templates/base.html

@@ -34,6 +34,11 @@
     [data-theme="light"] { --bg:#f6f7f9; --card:#ffffff; --ink:#1a1d24; --muted:#5c6473; --line:#e2e5ea;
                            --ok:#15803d; --warn:#b45309; --err:#dc2626; --accent:#2563eb; }
     * { box-sizing:border-box; }
+    /* PRD 5.9 US-006 — CONVENTIE BREAKPOINT: un singur prag mobil la 768px.
+       CSS custom properties NU functioneaza in `@media`, deci pragul nu poate fi o
+       variabila; folosim consecvent `@media (max-width:767px)` peste tot (mobil) si
+       `@media (max-width:1024px)` doar pentru densitatea tabelului. >=1024px = layout
+       desktop neschimbat (fara regresie). Orice regula mobila noua reutilizeaza 767px. */
     body { margin:0; font:15px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
            background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
     header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
@@ -197,7 +202,8 @@
     }
     /* === Modal detaliu (PRD 5.9 US-003): fereastra modala globala, in afara zonei de
        poll (#submissions-wrap). Backdrop + dialog centrat pe desktop; focus-trap +
-       scroll-lock + inert pe <main> sunt in JS. Varianta full-screen mobil vine in US-006. === */
+       scroll-lock + inert pe <main> sunt in JS. Varianta full-screen mobil: vezi blocul
+       `@media (max-width:767px)` US-006 de mai jos. === */
     .modal-overlay { position:fixed; inset:0; z-index:1100; display:flex;
                      align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
     .modal-overlay[hidden] { display:none; }
@@ -214,8 +220,12 @@
     body.modal-open { overflow:hidden; }
     .modal-eroare { padding:16px 4px; }
     .modal-eroare .actiuni { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
-    /* <768px: card per rand (eticheta:valoare stivuit), nu tabel -> fara scroll orizontal */
+    /* === PRD 5.9 US-006: fundatie responsive mobil (<768px) ===
+       Breakpoint unic 767px (vezi conventia de sus). Cuprinde: card per rand pe tabelul
+       de trimiteri (5.8, pastrat), modal full-screen, header/nav colapsat cu tinte touch
+       >=44px. Desktop (>=1024px) ramane neschimbat — regulile de baza nu se modifica. */
     @media (max-width:767px) {
+      /* Tabel trimiteri: card per rand (eticheta:valoare stivuit) -> fara scroll orizontal */
       .tabel-trimiteri table { table-layout:auto; }
       .tabel-trimiteri thead { display:none; }
       .tabel-trimiteri table, .tabel-trimiteri tbody, .tabel-trimiteri tr, .tabel-trimiteri td { display:block; width:auto; }
@@ -224,6 +234,25 @@
       .tabel-trimiteri td::before { content:attr(data-eticheta); color:var(--muted); font-size:12px;
                                     flex:0 0 auto; min-width:120px; }
       .tabel-trimiteri td.col-chk { display:none; }
+
+      /* Modal full-screen: ocupa tot ecranul, fara backdrop lateral (overlay fara
+         padding, dialog la latime/inaltime pline, fara colturi/umbra). Scroll intern
+         pe dialog; butonul `x` la >=44px (tinta touch). Desktop pastreaza varianta
+         centrata cu `max-width:680px` din regula de baza de mai sus. */
+      .modal-overlay { padding:0; align-items:stretch; justify-content:stretch; }
+      .modal-dialog { width:100vw; max-width:none; min-height:100vh; max-height:100vh;
+                      border:none; border-radius:0; box-shadow:none;
+                      padding:16px; padding-top:56px; overflow-y:auto; }
+      .modal-close { width:44px; height:44px; top:8px; right:8px; font-size:24px; }
+
+      /* Header + nav colapsate: header se rupe pe linii, fara scroll orizontal de pagina;
+         tintele touch (toggle tema/cont, taburi, itemi meniu cont) cresc la >=44px. */
+      header { padding:12px 16px; flex-wrap:wrap; gap:8px; }
+      header h1 { font-size:17px; }
+      main { padding:16px; }
+      .icon-btn { min-height:44px; min-width:44px; }
+      .tab-link { min-height:44px; padding:10px 14px; }
+      .cont-menu a, .cont-menu button { min-height:44px; }
     }
   </style>
 </head>

scripts/ralph/prd.json

@@ -93,12 +93,12 @@
       ],
       "requiresBrowserCheck": true,
       "requiresDesignReview": true,
-      "passes": false,
+      "passes": true,
       "failed": false,
       "blocked": false,
       "retries": 0,
       "failureReason": "",
-      "notes": ""
+      "notes": "Atins: app/web/templates/base.html (conventie breakpoint unic 767px documentata; bloc `@media (max-width:767px)` US-006 extins cu: modal full-screen — overlay fara padding/align-stretch, dialog 100vw/100vh fara border-radius/umbra, modal-close 44x44px, scroll intern; header colapsat flex-wrap + main padding redus; tinte touch >=44px pe .icon-btn/.tab-link/.cont-menu items; comentariu desktop modal actualizat), tests/test_web_responsive.py NOU (3 teste: test_viewport_meta_prezent, test_modal_fullscreen_clasa_mobil, test_nav_colapsabil_sub_breakpoint). meta viewport deja prezent (confirmat, neatins). Nav colapsabil (hamburger cont + tab-bar overflow-x) deja livrat de PRD-uri anterioare; US-006 a adaugat doar tintele touch 44px sub breakpoint. Gates: pytest PASS (fisier 3/3; suita completa 829 passed, 1 deselected — fata de 826 inainte). DEFERAT la VERIFY: requiresBrowserCheck + requiresDesignReview (gstack browser la 375px pe / — fara scroll orizontal, hamburger deschide meniul, modal full-screen + inchidere din x) NErulate in loop fara browser."
     },
     {
       "id": "US-002",

scripts/ralph/progress.txt

@@ -68,3 +68,31 @@ Note: PRD APROBAT 2026-06-24 cu revizii obligatorii R1-R12 (raport AUTOPLAN). R1
 - US-004 (detaliu editabil in-place + butoane in modal), US-005 (poll nu inchide modalul), US-006/007/008 (responsive).
 - VERIFY: ruleaza gstack E2E pe `/` pentru AC requiresBrowserCheck (eticheta sub pill, fara chevron, cod fara prefix, click deschide modal).
 ---
+
+## US-006: Fundatie responsive — viewport, header/nav, modal full-screen mobil, breakpoint-uri
+
+### Ce s-a livrat:
+- app/web/templates/base.html: CONVENTIE breakpoint unic 768px documentata (CSS custom props nu
+  merg in @media -> folosim consecvent `@media (max-width:767px)` pentru mobil; >=1024px = desktop
+  neschimbat). Blocul `@media (max-width:767px)` extins cu:
+  - Modal full-screen pe mobil: overlay fara padding + align/justify:stretch (fara backdrop lateral);
+    dialog 100vw/100vh, fara border-radius/umbra, padding-top:56px, scroll intern; modal-close 44x44px.
+  - Header colapsat: flex-wrap + gap + padding redus; h1 mai mic; main padding 16px.
+  - Tinte touch >=44px: .icon-btn (toggle tema/cont hamburger), .tab-link, itemii .cont-menu.
+  - Comentariul CSS desktop al modalului actualizat (full-screen mobil livrat, nu „vine in US-006").
+- tests/test_web_responsive.py NOU: test_viewport_meta_prezent, test_modal_fullscreen_clasa_mobil,
+  test_nav_colapsabil_sub_breakpoint (markup/CSS in HTML randat prin TestClient).
+
+### Learnings:
+- meta viewport era DEJA prezent (base.html:5) -> AC „confirmat/adaugat" = confirmat, neatins.
+- Nav colapsabil (hamburger cont #cont-menu-toggle ☰ + dropdown hidden; tab-bar cu overflow-x:auto)
+  era deja livrat de PRD-uri anterioare (5.5 US-006, 5.3 tab-bar). US-006 5.9 a adaugat DOAR
+  tratamentul touch 44px sub breakpoint + modalul full-screen (modalul e nou din US-003 5.9).
+- Desktop nefatat: regula de baza `.modal-dialog { max-width:680px }` ramane; doar media mobil o
+  suprascrie. Test asigura ambele (max-width:680px prezent + media 767px cu 100vw/100vh/44px).
+
+### Next:
+- US-007 (responsive pagini continut), US-008 (responsive Acasa + login/signup) — depind de US-006 (gata).
+- VERIFY: gstack browser la 375px pe `/` — fara scroll orizontal de pagina; ☰ deschide meniul cont;
+  modal deschis ocupa tot ecranul si se inchide din `x` (requiresBrowserCheck + requiresDesignReview).
+---

tests/test_web_responsive.py

@@ -0,0 +1,112 @@
+"""Teste PRD 5.9 US-006: fundatie responsive — viewport, header/nav colapsabil,
+modal full-screen pe mobil, breakpoint-uri consistente.
+
+Verificam markup-ul + CSS server-side randat (TestClient): prezenta meta viewport,
+existenta unei reguli `@media (max-width:767px)` care trece modalul pe full-screen
+(`.modal-dialog`) cu buton `x` >=44px, si structura de nav colapsabil (meniul de cont
+hamburger + tinte touch >=44px). Verificarile vizuale efective (375px, fara scroll
+orizontal) sunt deferate la VERIFY (gstack browser).
+"""
+
+from __future__ import annotations
+
+import os
+import re
+import tempfile
+
+import pytest
+from starlette.testclient import TestClient
+
+
+def _create_account_user(email: str, name: str = "Service", password: str = "parolasecreta10"):
+    from app.accounts import create_account
+    from app.users import create_user
+    from app.db import get_connection
+
+    conn = get_connection()
+    try:
+        acct_id = create_account(conn, name, active=True)
+        create_user(conn, acct_id, email, password)
+        return acct_id
+    finally:
+        conn.close()
+
+
+def _login(client, email: str, password: str = "parolasecreta10") -> None:
+    resp = client.get("/login")
+    m = re.search(r'name="csrf_token"\s+value="([^"]+)"', resp.text) or \
+        re.search(r'value="([^"]+)"\s+name="csrf_token"', resp.text)
+    assert m
+    resp = client.post("/login", data={"email": email, "parola": password, "csrf_token": m.group(1)})
+    assert resp.status_code == 303
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    tmp = tempfile.mkdtemp()
+    monkeypatch.setenv("AUTOPASS_DB_PATH", os.path.join(tmp, "responsive.db"))
+    monkeypatch.setenv("AUTOPASS_WEB_AUTH_REQUIRED", "true")
+    from app.config import get_settings
+    get_settings.cache_clear()
+    from app.web import ratelimit
+    ratelimit._hits.clear()
+    from app.main import app
+    with TestClient(app, follow_redirects=False) as c:
+        yield c
+    ratelimit._hits.clear()
+    get_settings.cache_clear()
+
+
+def test_viewport_meta_prezent(client):
+    """`<meta name=viewport>` cu width=device-width prezent in base.html."""
+    _create_account_user("vp@test.com")
+    _login(client, "vp@test.com")
+    html = client.get("/?tab=acasa").text
+    assert 'name="viewport"' in html
+    assert "width=device-width" in html
+    assert "initial-scale=1" in html
+
+
+def test_modal_fullscreen_clasa_mobil(client):
+    """Sub 768px modalul devine full-screen: o regula `@media (max-width:767px)`
+    pune `.modal-dialog` la latime/inaltime pline (fara latimea marginita de desktop)
+    si butonul `x` la >=44px. Desktop pastreaza regula centrata (`max-width:680px`)."""
+    _create_account_user("mf@test.com")
+    _login(client, "mf@test.com")
+    html = client.get("/?tab=acasa").text
+
+    # Regula de baza (desktop) ramane: dialog centrat cu latime marginita.
+    assert "max-width:680px" in html
+
+    # Exista un bloc media mobil care vizeaza modalul.
+    assert "@media (max-width:767px)" in html
+    # Markerul US-006 pentru modalul full-screen pe mobil.
+    assert "US-006" in html
+    # Dialogul ocupa tot ecranul pe mobil (latime/inaltime pline, fara border-radius lateral).
+    mobil = html[html.find("@media (max-width:767px)"):]
+    assert "100vw" in mobil or "width:100%" in mobil
+    assert "100vh" in mobil
+    # Butonul de inchidere >=44px pe mobil (tinta touch).
+    assert "44px" in mobil
+
+
+def test_nav_colapsabil_sub_breakpoint(client):
+    """Nav colapsabil: meniul de cont e un buton hamburger (☰) ascuns intr-un dropdown,
+    iar tintele touch (icon-btn, tab-link, itemi meniu) ajung la >=44px sub breakpoint."""
+    _create_account_user("nav@test.com")
+    _login(client, "nav@test.com")
+    html = client.get("/?tab=acasa").text
+
+    # Hamburger-ul de cont exista si dropdown-ul e colapsat (hidden) implicit.
+    assert 'id="cont-menu-toggle"' in html
+    assert "&#9776;" in html  # pictograma hamburger
+    assert 'id="cont-menu"' in html
+    assert 'class="cont-menu"' in html
+
+    # Tab-bar-ul (nav principal) exista si e scrollabil orizontal (nu deborda pagina).
+    assert "tab-bar" in html
+    assert "overflow-x:auto" in html
+
+    # Sub breakpoint, tintele touch din header/nav cresc la >=44px.
+    mobil = html[html.find("@media (max-width:767px)"):]
+    assert "44px" in mobil