feat(5.9): US-003 - modal reutilizabil (overlay, focus-trap, a11y) + cleanup inline-expand 5.8

- base.html: #modal-detaliu (role=dialog, aria-modal) + #detaliu-modal-body swap target;
  focus-trap, inert+aria-hidden pe <main>, Esc/backdrop/x inchid, listener trimiteriChanged (R5/R7)
- _coada.html: ancora modal in afara #submissions-wrap; sters #trimitere-detaliu inert vechi
- _submissions.html: randul declanseaza modalul; sters tr.detaliu-rand sibling (R3)
- _trimitere_detaliu.html: script rescris pentru modal, fara marcheazaDetaliuDeschis/scrollIntoView (R4)
- teste: test_web_modal.py nou (3); test_web_detaliu_inline.py sters; test_acasa_trimiteri.py curatat (R3)
- gates: pytest PASS (suita completa 819). Browser E2E + design-review deferate la VERIFY.

Salvat manual: iteratiile Ralph 2-12 au ramas fara turns (30) inainte de commit.

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

app/web/templates/base.html

@@ -176,27 +176,29 @@
     .tabel-trimiteri .col-operatie > div { line-height:1.35; }
     /* secundarul muted („cod RAR" / „nemapat") — >=12px, contrast pe var(--muted) >=4.5:1 */
     .tabel-trimiteri .cod-rar-sub { font-size:12px; margin-top:2px; }
-    /* === Detaliu inline (PRD 5.8 US-008): rand-sibling expandabil sub randul selectat. === */
-    /* Chevron de stare (▸ inchis / ▾ deschis), rotit prin schimbarea glifei in JS. */
-    .tabel-trimiteri .chevron { display:inline-block; color:var(--muted); font-size:11px;
-                                width:1.1em; text-align:center; margin-right:2px; }
-    /* Randul deschis: fundal evidentiat (nu doar culoare de text -> a11y). */
-    .tabel-trimiteri tr.rand-deschis > td { background:#1d212b; }
-    [data-theme="light"] .tabel-trimiteri tr.rand-deschis > td { background:#eef1f6; }
-    /* Conectorul detaliului = fundal subtil + border-top (NU border-left accent / slop). */
-    .tabel-trimiteri tr.detaliu-rand > td { padding:0; border-top:2px solid var(--accent);
-      background:color-mix(in srgb, var(--accent) 6%, var(--card)); }
-    .tabel-trimiteri tr.detaliu-rand .card { margin:10px; }
-    /* `hidden` trebuie sa invinga `display:block` din banda <768 (specificitate). */
-    .tabel-trimiteri tr.detaliu-rand[hidden] { display:none; }
     /* 768-1024px: ascunde Actualizat (e in detaliu) -> 7 coloane, fara scroll */
     @media (max-width:1024px) {
       .tabel-trimiteri .col-actualizat { display:none; }
     }
-    /* Tinta de atins >=44px pe touch (chevron-ul e ancora de toggle). */
-    @media (pointer:coarse) {
-      .tabel-trimiteri .chevron { min-width:44px; min-height:44px; line-height:44px; }
-    }
+    /* === 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. === */
+    .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; }
+    .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); }
+    .modal-dialog { position:relative; z-index:1; width:100%; max-width:680px;
+                    background:var(--card); border:1px solid var(--line); border-radius:12px;
+                    box-shadow:0 16px 48px rgba(0,0,0,.35); padding:18px 20px;
+                    max-height:calc(100vh - 80px); overflow-y:auto; }
+    .modal-close { position:absolute; top:10px; right:10px; background:transparent;
+                   border:1px solid var(--line); color:var(--muted); width:36px; height:36px;
+                   border-radius:8px; font-size:20px; line-height:1; cursor:pointer;
+                   display:inline-flex; align-items:center; justify-content:center; }
+    .modal-close:hover { background:var(--line); color:var(--ink); }
+    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 */
     @media (max-width:767px) {
       .tabel-trimiteri table { table-layout:auto; }
@@ -243,6 +245,18 @@
     </div>
   </header>
   <main>{% block content %}{% endblock %}</main>
+  {# Modal detaliu trimitere (PRD 5.9 US-003): container global, SIBLING al <main>
+     (nu descendent), ca `inert`+`aria-hidden` pe <main> sa nu-l prinda si pe el (R7).
+     Corpul #detaliu-modal-body e tinta de swap pentru fragment + rutele corectie/
+     mapare/lifecycle. Traieste in afara #submissions-wrap -> poll-ul de 15s nu-l atinge. #}
+  <div id="modal-detaliu" class="modal-overlay" role="dialog" aria-modal="true"
+       aria-labelledby="detaliu-modal-titlu" hidden>
+    <div class="modal-backdrop" data-modal-close></div>
+    <div class="modal-dialog" role="document">
+      <button type="button" class="modal-close" data-modal-close aria-label="Inchide detaliul">&times;</button>
+      <div id="detaliu-modal-body"></div>
+    </div>
+  </div>
   <script>
     // Handler comutator tema (US-002 PRD 5.3): click toggle light<->dark, persista in localStorage.
     // Separare init (doar sincronizare iconita) de persistenta (doar la click explicit).
@@ -418,84 +432,108 @@
     })();
   </script>
   <script>
-    // Detaliu trimitere INLINE (PRD 5.8 US-008): randul de detaliu (#detaliu-{id}) e
-    // un <tr class="detaliu-rand"> sibling, ascuns pana la deschidere. La click pe rand:
-    //  - se inchid celelalte detalii (un singur rand deschis o data);
-    //  - se arata randul-sibling (placeholder „Se incarca…" prin hx-indicator);
-    //  - chevron ▸/▾ + fundal evidentiat + aria-expanded sincronizate.
-    // Re-click pe acelasi rand inchide fara re-fetch. Cat un detaliu e deschis, poll-ul
-    // de 15s (#submissions-wrap) e pus pe pauza (D-eng-2) ca lista sa nu se miste sub
-    // operator. Delegare pe document.body -> supravietuieste swap-urilor HTMX ale listei.
+    // Modal detaliu trimitere (PRD 5.9 US-003): inlocuieste detaliul inline (5.8). Detaliul
+    // se incarca prin HTMX in #detaliu-modal-body (in afara #submissions-wrap, deci poll-ul
+    // de 15s nu-l atinge). Aici: deschidere la click pe rand, inchidere (x/Esc/backdrop),
+    // focus-trap, scroll-lock, inert+aria-hidden pe <main> (R7), stare de eroare la load
+    // esuat (R5), inchidere pe succes corectie/sterge (HX-Trigger inchideModal, R5).
     (function() {
-      function chevron(row, on) {
-        var c = row.querySelector('.chevron');
-        if (c) c.innerHTML = on ? '&#9662;' : '&#9656;';   // ▾ / ▸
+      var overlay = document.getElementById('modal-detaliu');
+      if (!overlay) return;
+      var dialog = overlay.querySelector('.modal-dialog');
+      var body = document.getElementById('detaliu-modal-body');
+      var main = document.querySelector('main');
+      var trigger = null;          // randul care a deschis modalul (focus return la inchidere)
+      var triggerId = null;        // id-ul randului: re-query la inchidere daca poll-ul l-a re-swapuit
+      var onKeyTrap = null;
+
+      function focusable() {
+        return Array.prototype.filter.call(
+          dialog.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]),' +
+            ' select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),
+          function(el) { return el.offsetParent !== null || el === document.activeElement; });
       }
-      function setExpanded(row, on) {
-        row.setAttribute('aria-expanded', on ? 'true' : 'false');
-        if (on) row.classList.add('rand-deschis'); else row.classList.remove('rand-deschis');
-        chevron(row, on);
+      // R7: focus-trap — Tab/Shift+Tab cicleaza in interiorul dialogului.
+      function trapFocus(e) {
+        if (e.key !== 'Tab') return;
+        var f = focusable();
+        if (!f.length) { e.preventDefault(); return; }
+        var first = f[0], last = f[f.length - 1];
+        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
       }
-      function detRowFor(id) {
-        var cont = document.getElementById('detaliu-' + id);
-        return cont ? cont.closest('tr.detaliu-rand') : null;
+      function isOpen() { return !overlay.hidden; }
+
+      function open(triggerRow) {
+        trigger = triggerRow || null;
+        triggerId = (triggerRow && triggerRow.id) || null;
+        body.innerHTML = '<div class="empty muted" style="padding:24px;">Se incarca&hellip;</div>';
+        overlay.hidden = false;
+        document.body.classList.add('modal-open');                 // scroll-lock pe body
+        if (main) { main.setAttribute('inert', ''); main.setAttribute('aria-hidden', 'true'); }
+        onKeyTrap = trapFocus;
+        document.addEventListener('keydown', onKeyTrap, true);
+        var x = overlay.querySelector('.modal-close');
+        if (x) x.focus();                                          // focus initial in modal
       }
-      function closeOne(row) {
-        var id = row.getAttribute('data-detaliu-id');
-        var cont = document.getElementById('detaliu-' + id);
-        if (cont) cont.innerHTML = '';
-        var dr = detRowFor(id);
-        if (dr) dr.hidden = true;
-        setExpanded(row, false);
+      function close() {
+        if (!isOpen()) return;
+        overlay.hidden = true;
+        body.innerHTML = '';
+        document.body.classList.remove('modal-open');
+        if (main) { main.removeAttribute('inert'); main.removeAttribute('aria-hidden'); }
+        if (onKeyTrap) { document.removeEventListener('keydown', onKeyTrap, true); onKeyTrap = null; }
+        var t = trigger; trigger = null;
+        if (t && t.focus) t.focus();                               // focus readus pe rand
       }
-      function closeAllDetalii(except) {
-        document.querySelectorAll('tr.trimitere-row[aria-expanded="true"]').forEach(function(r) {
-          if (r !== except) closeOne(r);
-        });
-      }
-      // Expus pentru butonul „Inchide" din _trimitere_detaliu.html: goleste containerul
-      // randului CURENT si readuce focusul pe randul declansator.
-      window.inchideDetaliu = function(id) {
-        var row = document.getElementById('trimitere-row-' + id);
-        if (row) { closeOne(row); row.focus(); }
-        else {
-          var cont = document.getElementById('detaliu-' + id);
-          if (cont) cont.innerHTML = '';
-          var dr = detRowFor(id);
-          if (dr) dr.hidden = true;
-        }
-      };
-      // Expus pentru scriptul fragmentului: marcheaza randul ca deschis dupa un re-swap
-      // (corectie/mapare inline), inchizand orice alt detaliu ramas deschis.
-      window.marcheazaDetaliuDeschis = function(row) {
-        closeAllDetalii(row);
-        setExpanded(row, true);
-      };
-      // htmx:beforeRequest — single point: pauza poll + toggle deschidere/inchidere.
+      // API public: butonul „Inchide" din fragment + inchiderea pe succes corectie/sterge.
+      // (Semnatura veche inchideDetaliu(id) pastrata, dar exista un singur modal o data.)
+      window.inchideDetaliu = function() { close(); };
+
+      // Inchidere: x si backdrop (elemente cu data-modal-close), Esc.
+      overlay.addEventListener('click', function(e) {
+        if (e.target && e.target.hasAttribute && e.target.hasAttribute('data-modal-close')) close();
+      });
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && isOpen()) { e.preventDefault(); close(); }
+      });
+
+      // Deschidere la click pe rand (htmx:beforeRequest): arata modalul cu placeholder
+      // inainte ca raspunsul fragmentului sa fie swap-uit in corp.
       document.body.addEventListener('htmx:beforeRequest', function(evt) {
         var elt = evt.detail && evt.detail.elt;
-        if (!elt) return;
-        // Pauza poll periodic cat un detaliu e deschis (cererea vine chiar de pe wrap).
-        if (elt.id === 'submissions-wrap' &&
-            document.querySelector('tr.detaliu-rand:not([hidden])')) {
-          evt.preventDefault();
-          return;
-        }
-        if (!(elt.classList && elt.classList.contains('trimitere-row'))) return;
-        var id = elt.getAttribute('data-detaliu-id');
-        if (elt.getAttribute('aria-expanded') === 'true') {
-          // Re-click pe randul deschis -> inchide, fara re-fetch.
-          evt.preventDefault();
-          window.inchideDetaliu(id);
-          return;
-        }
-        // Deschidere: inchide celelalte, arata randul-sibling (placeholder loading).
-        closeAllDetalii(elt);
-        var dr = detRowFor(id);
-        if (dr) dr.hidden = false;
-        setExpanded(elt, true);
+        if (elt && elt.classList && elt.classList.contains('trimitere-row')) open(elt);
       });
-      // Tastatura (role=button): Enter/Space deschid/inchid randul focusat.
+      // Dupa swap-ul fragmentului (sau re-render corectie/mapare): muta focusul in modal.
+      body.addEventListener('htmx:afterSettle', function() {
+        if (!isOpen()) return;
+        var f = focusable();
+        if (f.length) f[0].focus();
+      });
+      // R5: load-error al fragmentului (GET esuat) -> stare Reincearca/Inchide, nu placeholder blocat.
+      body.addEventListener('htmx:responseError', function(evt) {
+        if (!isOpen()) return;
+        var elt = evt.detail && evt.detail.elt;
+        var url = (elt && elt.getAttribute && elt.getAttribute('hx-get')) || '';
+        body.innerHTML = '<div class="modal-eroare"><p>Nu s-a putut incarca detaliul.</p>' +
+          '<div class="actiuni">' +
+          (url ? '<button type="button" data-modal-retry="' + url + '">Reincearca</button>' : '') +
+          '<button type="button" data-modal-close' +
+          ' style="background:var(--card); color:var(--muted); border-color:var(--line);">Inchide</button>' +
+          '</div></div>';
+      });
+      body.addEventListener('click', function(e) {
+        var r = e.target.closest && e.target.closest('[data-modal-retry]');
+        if (r && window.htmx) htmx.ajax('GET', r.getAttribute('data-modal-retry'),
+                                        { target: body, swap: 'innerHTML' });
+      });
+
+      // R5: inchidere pe succes corectie/sterge — ruta emite HX-Trigger `inchideModal`.
+      // Lista se reincarca separat prin `trimiteriChanged` (#submissions-wrap). Maparea
+      // inline NU emite inchideModal -> modalul ramane deschis sa arate codul rezolvat.
+      document.body.addEventListener('inchideModal', function() { close(); });
+
+      // Tastatura pe rand (role=button): Enter/Space deschid modalul.
       document.body.addEventListener('keydown', function(evt) {
         var t = evt.target;
         if (!(t && t.classList && t.classList.contains('trimitere-row'))) return;