fix(web): booth UI/UX pass — readable font scaling + booth layout/report clarity

A round of operator-facing fixes on the booth screen, shift views, and the
font-scale control. (Follows the font-scale feature in f706726, which used CSS
`zoom` — reverted here for the rem approach below.)

Font scaling (the A−/A+ control now actually works without breaking layout):
- The control scaled via CSS `zoom`, which also scaled viewport-locked containers
  (h-screen frame, max-h-[90vh] modals) so at 130% modal headers/footers were
  pushed off-screen. Reworked to scale TEXT only: converted every `text-[Npx]`
  font utility to rem across the web app (~230 sites in 25 files + the
  .label/.hint/.btn component classes + body in index.css; 16px root, so 100% is
  visually identical), and applyFontScale now sets the ROOT font-size. vh/h-screen
  layout stays put, so chrome never clips; tall content scrolls its own container.
  Verified at 130%: text 12px→15.6px while the frame stayed viewport-height.

Live feed (event rows):
- Plate, badges and reason now flow inline after the identity and wrap only when
  the row runs out of width — no more forced second line when there's empty space.
- Dropped the redundant TARGË via-badge (the plate chip already conveys it).
- Removed the Direction filter group (Hyrje/Dalje) — it duplicated the entry/exit
  options already in the Type filter.

Active sessions:
- Rebuilt as a real table (Ticket/subscriber · Plate · Entry · Elapsed) so columns
  align and long values (subscriber names, ticket ids) no longer truncate.
- Dropped the status column (an unpaid transient is normal; a subscriber shows ★ +
  name; overstay keeps a row tint). Removed the now-redundant status filter; only
  the Transient/Subscriber filter remains. Plate is now searchable (uses s.plate).

Shift report (close-shift modal + Shift History + printed Z-report slip):
- Removed the confusing `shitje` (subscription-sales) sub-line — Abonime is the
  total; only the out-of-window part is broken out. subscriptionSalesMinor stays in
  the signed payload (audit data), just not displayed/printed.
- Show the inherited opening cash ("Arka fillestare") above the expected drawer, so
  opening + cash-taken = expected reads clearly. Money values no longer line-wrap.

Subscription edit modal:
- Fixed the 2-col grid alignment: a lone "only one version" cell was shifting every
  following row by one column — it now emits a full label+value pair.

Removed orphaned i18n keys (fStatus*, fDir*, srcSubSales) from sq+en (parity kept).
Full workspace build/lint/test green.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/web/src/ui/event-detail.tsx

@@ -95,9 +95,9 @@ export function displayIdentity(e: LedgerEvent): string {
   return e.subscriberLabel ?? e.identity ?? "—";
 }
 
-/** One clickable live-feed / activity row → opens the event-detail modal. A grid keeps
- *  the time/label/identity/index columns aligned across rows; the detail line lives in
- *  its own row, indented under the identity column. */
+/** One clickable live-feed / activity row → opens the event-detail modal. A grid keeps the
+ *  time/label/#index columns aligned across rows; the identity, plate, badges and reason flow
+ *  inline in the middle column and wrap there only when they run out of width. */
 export function EventRow({ e, onOpen }: { e: LedgerEvent; onOpen: (e: LedgerEvent) => void }) {
   const { t } = useTranslation();
   const style = eventStyleFor(e);
@@ -110,52 +110,44 @@ export function EventRow({ e, onOpen }: { e: LedgerEvent; onOpen: (e: LedgerEven
   const reason = renderReason(p, t);
   const amount = paymentSummary(p);
   const badges = eventBadges(p);
-  const via = viaKey(p);
   const detail = reason ?? amount ?? (isAnomaly ? t("booth.evtNoReason") : null);
-  const showDetail = detail != null || badges.length > 0 || via != null;
 
   return (
     <button
       type="button"
       onClick={() => onOpen(e)}
-      className={`grid w-full grid-cols-[auto_5rem_1fr_auto] items-center gap-x-3 gap-y-0.5 border-b border-term-border/50 px-1 py-1 text-left text-[12px] tabular-nums hover:bg-term-panel-2 ${
+      className={`grid w-full grid-cols-[auto_5rem_1fr_auto] items-start gap-x-3 border-b border-term-border/50 px-1 py-1 text-left text-[0.75rem] tabular-nums hover:bg-term-panel-2 ${
         isAnomaly ? "bg-term-red/5" : refusedWarning ? "bg-term-amber/5" : ""
       }`}
     >
-      <span className="text-term-muted">{hhmmss(e.occurredAt)}</span>
-      <span className={`shrink-0 font-semibold ${style.color}`}>{label}</span>
-      <span className="flex min-w-0 items-center gap-2">
-        <span className="truncate text-term-text">{displayIdentity(e)}</span>
+      <span className="py-px text-term-muted">{hhmmss(e.occurredAt)}</span>
+      <span className={`py-px shrink-0 font-semibold ${style.color}`}>{label}</span>
+      {/* Identity + plate + detail all flow in ONE wrapping line — they fill the available
+          width and only wrap to a second line when this cell actually runs out of room (no
+          forced second row). Keeps time/label/#index in their columns. */}
+      <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 py-px">
+        <span className="break-all text-term-text">{displayIdentity(e)}</span>
         {e.plate && (
           <span
-            className="shrink-0 rounded border border-term-border px-1 text-[11px] font-semibold tracking-wide text-term-amber"
+            className="shrink-0 rounded border border-term-border px-1 text-[0.6875rem] font-semibold tracking-wide text-term-amber"
             title={t("booth.plateTitle")}
           >
             {e.plate}
           </span>
         )}
+        {badges.map((k) => (
+          <span
+            key={k}
+            className="shrink-0 rounded-sm bg-term-red/15 px-1.5 py-px text-[0.625rem] font-semibold uppercase tracking-wide text-term-red"
+          >
+            {t(k)}
+          </span>
+        ))}
+        {detail && (
+          <span className={`${isAnomaly ? "text-term-red/90" : "text-term-muted"}`}>{detail}</span>
+        )}
       </span>
-      <span className="text-term-muted">#{e.index}</span>
-      {showDetail && (
-        <div className="col-start-3 col-end-5 flex flex-wrap items-center gap-x-2 gap-y-1">
-          {badges.map((k) => (
-            <span
-              key={k}
-              className="rounded-sm bg-term-red/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-red"
-            >
-              {t(k)}
-            </span>
-          ))}
-          {via && (
-            <span className="rounded-sm bg-term-cyan/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-cyan">
-              {t(via)}
-            </span>
-          )}
-          {detail && (
-            <span className={`text-[11px] ${isAnomaly ? "text-term-red/90" : "text-term-muted"}`}>{detail}</span>
-          )}
-        </div>
-      )}
+      <span className="py-px text-term-muted">#{e.index}</span>
     </button>
   );
 }
@@ -163,8 +155,8 @@ export function EventRow({ e, onOpen }: { e: LedgerEvent; onOpen: (e: LedgerEven
 /** One label/value line in the event-detail modal. */
 function DetailRow({ label, children }: { label: string; children: ReactNode }) {
   return (
-    <div className="grid grid-cols-[8rem_1fr] gap-3 border-b border-term-border/40 py-1.5 text-[12px]">
-      <span className="text-[11px] uppercase tracking-wider text-term-muted">{label}</span>
+    <div className="grid grid-cols-[8rem_1fr] gap-3 border-b border-term-border/40 py-1.5 text-[0.75rem]">
+      <span className="text-[0.6875rem] uppercase tracking-wider text-term-muted">{label}</span>
       <span className="min-w-0 break-words text-term-text">{children}</span>
     </div>
   );
@@ -203,19 +195,19 @@ export function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () =
         <div className={`rounded-term border p-3 ${isAnomaly ? "border-term-red/50 bg-term-red/5" : "border-term-border bg-term-panel-2"}`}>
           <div className={`text-sm font-bold uppercase tracking-widest ${style.color}`}>{label}</div>
           {(reason || money) && (
-            <div className={`mt-1 text-[13px] ${isAnomaly ? "text-term-red/90" : "text-term-text"}`}>
+            <div className={`mt-1 text-[0.8125rem] ${isAnomaly ? "text-term-red/90" : "text-term-text"}`}>
               {reason ?? money}
             </div>
           )}
           {!reason && !money && isAnomaly && (
-            <div className="mt-1 text-[13px] text-term-red/90">{t("booth.evtNoReason")}</div>
+            <div className="mt-1 text-[0.8125rem] text-term-red/90">{t("booth.evtNoReason")}</div>
           )}
           {badges.length > 0 && (
             <div className="mt-2 flex flex-wrap gap-1.5">
               {badges.map((k) => (
                 <span
                   key={k}
-                  className="rounded-sm bg-term-red/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-term-red"
+                  className="rounded-sm bg-term-red/15 px-1.5 py-px text-[0.625rem] font-semibold uppercase tracking-wide text-term-red"
                 >
                   {t(k)}
                 </span>
@@ -235,7 +227,7 @@ export function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () =
               (the SUBSESS-… session key) for traceability against the ledger. */}
           {e.subscriberLabel && e.identity && (
             <DetailRow label={t("booth.edOccurrence")}>
-              <code className="text-[11px] text-term-muted">{e.identity}</code>
+              <code className="text-[0.6875rem] text-term-muted">{e.identity}</code>
             </DetailRow>
           )}
           {money && (
@@ -257,7 +249,7 @@ export function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () =
           )}
           {tariffVersionId && (
             <DetailRow label={t("booth.edTariffVersion")}>
-              <code className="text-[11px] text-term-muted">{tariffVersionId}</code>
+              <code className="text-[0.6875rem] text-term-muted">{tariffVersionId}</code>
             </DetailRow>
           )}
         </div>
@@ -265,7 +257,7 @@ export function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () =
         {/* The entry/exit evidence images for this session's identity. */}
         {e.identity && (
           <div>
-            <div className="mb-1.5 text-[11px] uppercase tracking-wider text-term-muted">{t("booth.edSnapshots")}</div>
+            <div className="mb-1.5 text-[0.6875rem] uppercase tracking-wider text-term-muted">{t("booth.edSnapshots")}</div>
             <SnapshotStrip identity={e.identity} />
           </div>
         )}
@@ -275,28 +267,28 @@ export function EventDetailModal({ e, onClose }: { e: LedgerEvent; onClose: () =
             operator's; tucking them behind a disclosure keeps the common view clean
             while preserving the tamper-evidence trail on demand. */}
         <details className="rounded-term border border-term-border bg-term-panel-2">
-          <summary className="cursor-pointer select-none px-3 py-2 text-[11px] uppercase tracking-wider text-term-muted hover:text-term-text">
+          <summary className="cursor-pointer select-none px-3 py-2 text-[0.6875rem] uppercase tracking-wider text-term-muted hover:text-term-text">
             {t("booth.edAuditData")}
           </summary>
           <div className="border-t border-term-border px-3 pb-3 pt-1">
             <DetailRow label={t("booth.edSignature")}>
-              <code className="break-all text-[11px] text-term-muted">{e.signature}</code>
+              <code className="break-all text-[0.6875rem] text-term-muted">{e.signature}</code>
             </DetailRow>
             <DetailRow label={t("booth.edKeyId")}>
-              <code className="text-[11px] text-term-muted">{e.keyId}</code>
+              <code className="text-[0.6875rem] text-term-muted">{e.keyId}</code>
             </DetailRow>
             <DetailRow label={t("booth.edPrevHash")}>
-              <code className="break-all text-[11px] text-term-muted">{e.prevHash ?? "—"}</code>
+              <code className="break-all text-[0.6875rem] text-term-muted">{e.prevHash ?? "—"}</code>
             </DetailRow>
-            <div className="mb-1.5 mt-3 text-[11px] uppercase tracking-wider text-term-muted">
+            <div className="mb-1.5 mt-3 text-[0.6875rem] uppercase tracking-wider text-term-muted">
               {t("booth.edRawPayload")}
             </div>
             {p && Object.keys(p).length > 0 ? (
-              <pre className="overflow-x-auto rounded-term border border-term-border bg-term-bg p-2 text-[11px] text-term-text">
+              <pre className="overflow-x-auto rounded-term border border-term-border bg-term-bg p-2 text-[0.6875rem] text-term-text">
                 {JSON.stringify(p, null, 2)}
               </pre>
             ) : (
-              <div className="text-[12px] text-term-muted">{t("booth.edNoPayload")}</div>
+              <div className="text-[0.75rem] text-term-muted">{t("booth.edNoPayload")}</div>
             )}
           </div>
         </details>