feat(header): badge mediu RAR compact langa chip-ul RAR

Muta indicatorul de mediu (Testare/PRODUCTIE) din statusbar (randare
periodica, rand intreg) intr-un badge compact din header, langa chipul
RAR scurtat la "RAR". Click pe badge comuta mediul cand exista 2
disponibile; pe mobil (<=560px) eticheta scurta PROD/TEST ramane mereu
vizibila (semnal de risc L.142). Toggle-ul din header si schimbarea
mediului implicit din Setari actualizeaza badge-ul via OOB swap.

Co-Authored-By: Claude Agent <noreply@anthropic.com>

app/web/templates/_header_env_badge.html

@@ -0,0 +1,29 @@
+{# Badge compact "Mediu RAR" din header, langa chip-ul RAR.
+   0 medii: wrapper gol (id-ul ramane in DOM pentru viitoare OOB swap).
+   1 mediu: eticheta statica. 2 medii: buton de comutare HTMX (ciclic).
+   Clasele .env-badge-prod/.env-badge-test sunt cele din listele de trimiteri (consecventa). #}
+{% set _medii = medii_disponibile | default([]) %}
+<div id="header-env-badge"{% if oob %} hx-swap-oob="outerHTML"{% endif %}>
+  {% if _medii | length >= 1 %}
+  {% set _env = env_default | default('prod') %}
+  {% set _eb = eticheta_env(_env) %}
+  {% set _scurt = 'PROD' if _env == 'prod' else 'TEST' %}
+  {% if _medii | length >= 2 %}
+  <button type="button" class="{{ _eb[1] }}"
+          style="cursor:pointer;"
+          hx-post="/_fragments/status/toggle-env"
+          hx-target="#header-env-badge"
+          hx-swap="outerHTML"
+          hx-vals='{"csrf_token": {{ csrf_token | tojson }}}'
+          title="Comuta la {{ 'Testare' if _env == 'prod' else 'PRODUCȚIE' }}">
+    <span class="env-tx-full">{{ _eb[0] }}</span>
+    <span class="env-tx-short">{{ _scurt }}</span>
+  </button>
+  {% else %}
+  <span class="{{ _eb[1] }}">
+    <span class="env-tx-full">{{ _eb[0] }}</span>
+    <span class="env-tx-short">{{ _scurt }}</span>
+  </span>
+  {% endif %}
+  {% endif %}
+</div>

app/web/templates/_status.html

@@ -156,43 +156,6 @@
     </a>
   </div>
 
-  {# === Indicator mediu RAR activ per cont.
-     La 0 medii: nu afisa (cont fara configuratie RAR).
-     La 1 mediu: eticheta statica (fara toggle).
-     La 2 medii: buton de comutare HTMX (toggle conditionat).
-     Culori prin eticheta_env/clase .env-badge-* (consistenta cu badge-urile din liste).
-  #}
-  {% set _medii = medii_disponibile | default([]) %}
-  {% set _env = env_default | default('prod') %}
-  {% set _eb = eticheta_env(_env) %}
-  {% if _medii | length >= 1 %}
-  <div class="env-indicator"
-       style="display:flex; align-items:center; gap:8px; margin-bottom:10px;
-              padding:6px 10px; border-radius:6px; font-size:var(--fs-sm);
-              background:color-mix(in srgb, {% if _env == 'prod' %}var(--err){% else %}var(--line){% endif %} 10%, var(--card));
-              border:1px solid color-mix(in srgb, {% if _env == 'prod' %}var(--err){% else %}var(--line){% endif %} 30%, transparent);">
-    <span style="font-weight:600;">Mediu RAR:</span>
-    <span class="{{ _eb[1] }}">{{ _eb[0] }}</span>
-    {% if _medii | length >= 2 %}
-    {# Toggle: apare DOAR cand sunt cel putin 2 medii disponibile #}
-    <form method="post" action="/_fragments/status/toggle-env"
-          hx-post="/_fragments/status/toggle-env"
-          hx-target="#status-bar"
-          hx-swap="outerHTML"
-          style="margin:0; padding:0; display:inline;">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token | default('') }}">
-      <button type="submit"
-              style="padding:2px 10px; font-size:var(--fs-xs); border-radius:99px;
-                     border:1px solid currentColor; background:transparent; cursor:pointer;
-                     color:var(--muted); line-height:1.4;"
-              title="Comuta la {{ 'PRODUCȚIE' if _env == 'test' else 'Testare' }}">
-        Comuta
-      </button>
-    </form>
-    {% endif %}
-  </div>
-  {% endif %}
-
   {# === Navigatie rapida: Trimiteri + Mapari cu badge needs_mapping ===
      Pastrata exact ca inainte: tab_activ determina marcajul activ.
   #}

app/web/templates/base.html

@@ -150,6 +150,15 @@
                       background:color-mix(in srgb, var(--err) 80%, var(--card)); color:#fff; border:1px solid transparent; }
     .env-badge-test { display:inline-block; padding:1px 7px; border-radius:99px; font-size:11px;
                       background:transparent; color:var(--muted); border:1px solid var(--line); }
+    /* Badge mediu RAR din header: eticheta scurta PROD/TEST ramane mereu vizibila pe
+       mobil (semnal de risc L.142), eticheta lunga se ascunde sub 560px. Clasele
+       .env-badge-prod/.env-badge-test isi redefinesc deja border-ul complet, deci
+       suprascriu stilul global de buton fara reguli suplimentare. */
+    .env-tx-short { display:none; }
+    @media (max-width:560px) {
+      .env-tx-full { display:none; }
+      .env-tx-short { display:inline; }
+    }
     .muted { color:var(--muted); }
     /* Heading/eticheta accesibila doar pentru cititoare de ecran (vizual ascunsa). */
     .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
@@ -956,7 +965,7 @@
            title="RAR online{% if last_login|default('') %} — Ultima autentificare: {{ last_login }}{% endif %}"
            aria-label="RAR online">
         <span class="rar-dot live" aria-hidden="true"></span>
-        <span class="rar-tx">RAR online</span>
+        <span class="rar-tx">RAR</span>
       </div>
       {% else %}
       <div class="rar-chip rar-err" role="status"
@@ -966,6 +975,7 @@
         <span class="rar-tx">RAR blocat</span>
       </div>
       {% endif %}
+      {% include '_header_env_badge.html' %}
       {# Comutatorul "Trimite automat la RAR" langa semnalul RAR.
          In afara swap-ului periodic al #status-bar. #}
       {% include '_auto_send_toggle.html' %}