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/router.tsx

@@ -68,7 +68,7 @@ function NavLink({ to, label }: { to: string; label: string }) {
   return (
     <Link
       to={to}
-      className="px-2 py-1 text-[11px] uppercase tracking-wider text-term-muted rounded-term hover:text-term-text [&.active]:text-term-amber [&.active]:bg-term-panel-2"
+      className="px-2 py-1 text-[0.6875rem] uppercase tracking-wider text-term-muted rounded-term hover:text-term-text [&.active]:text-term-amber [&.active]:bg-term-panel-2"
     >
       {label}
     </Link>
@@ -82,7 +82,7 @@ function SetupTab({ to, label, exact = false }: { to: string; label: string; exa
     <Link
       to={to}
       activeOptions={{ exact }}
-      className="border-b-2 border-transparent px-3 py-2 text-[12px] uppercase tracking-wider text-term-muted hover:text-term-text [&.active]:border-term-amber [&.active]:text-term-amber"
+      className="border-b-2 border-transparent px-3 py-2 text-[0.75rem] uppercase tracking-wider text-term-muted hover:text-term-text [&.active]:border-term-amber [&.active]:text-term-amber"
     >
       {label}
     </Link>
@@ -159,7 +159,7 @@ function LanguageToggle({
     }
   }
   return (
-    <div className="flex items-center gap-0.5 text-[10px] uppercase tracking-wider">
+    <div className="flex items-center gap-0.5 text-[0.625rem] uppercase tracking-wider">
       {(["sq", "en"] as const).map((l) => (
         <button
           key={l}
@@ -205,7 +205,7 @@ function ThemeToggle({
     }
   }
   return (
-    <div className="flex items-center gap-0.5 text-[10px] uppercase tracking-wider">
+    <div className="flex items-center gap-0.5 text-[0.625rem] uppercase tracking-wider">
       {(["dark", "light"] as const).map((th) => (
         <button
           key={th}
@@ -241,7 +241,7 @@ function FontScaleToggle({ user, setUser }: { user: SessionUser; setUser: (u: Se
   }
   const btn = "rounded-term px-1.5 py-0.5 text-term-muted hover:text-term-text disabled:opacity-40";
   return (
-    <div className="flex items-center gap-0.5 text-[10px] uppercase tracking-wider">
+    <div className="flex items-center gap-0.5 text-[0.625rem] uppercase tracking-wider">
       <button type="button" className={btn} onClick={() => step(-FONT_SCALE_STEP)} disabled={active <= FONT_SCALE_MIN} title={t("common.fontSmaller")} aria-label={t("common.fontSmaller")}>
         A−
       </button>
@@ -316,14 +316,14 @@ function ShiftButton() {
         disabled={busy || blockedByOther}
         title={blockedByOther ? t("shift.headerHeldBy", { operator: heldBy ?? "?" }) : undefined}
         onClick={onClick}
-        className={`rounded-term border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wider ${tone}`}
+        className={`rounded-term border px-2 py-0.5 text-[0.6875rem] font-semibold uppercase tracking-wider ${tone}`}
       >
         {busy ? t("shift.opening") : label}
       </button>
       {!isOpen && (
-        <span className="text-[10px] uppercase tracking-wider text-term-amber">{t("shift.headerNoShift")}</span>
+        <span className="text-[0.625rem] uppercase tracking-wider text-term-amber">{t("shift.headerNoShift")}</span>
       )}
-      {err && <span className="text-[10px] text-term-red">{err}</span>}
+      {err && <span className="text-[0.625rem] text-term-red">{err}</span>}
       {confirmingClose && (
         <CloseShiftConfirm
           busy={busy}
@@ -358,7 +358,7 @@ function CloseShiftConfirm({
 
   return (
     <Modal open onClose={onCancel} title={t("shift.endShift")} width="max-w-md">
-      <div className="text-[13px] tabular-nums">
+      <div className="text-[0.8125rem] tabular-nums">
         <p className="text-term-muted">{t("shift.endConfirm")}</p>
         {!x ? (
           <p className="mt-2 text-term-muted">{t("common.loading")}</p>
@@ -370,12 +370,17 @@ function CloseShiftConfirm({
               {/* Split by source — the operator's ask: subscription money apart from tickets. */}
               <ConfirmFigure label={t("shift.srcTickets")} value={fmt(x.ticketTotalMinor)} />
               <ConfirmFigure label={t("shift.srcSubscriptions")} value={fmt(x.subscriptionTotalMinor)} />
-              <ConfirmFigure label={t("shift.srcSubSales")} value={fmt(x.subscriptionSalesMinor)} sub />
+              {/* Abonime is the subscription TOTAL (sales + out-of-window). The 'jashtë orarit'
+                  part is broken out below it; subscription SALES is not (it's the remainder). */}
+              <span />
               <ConfirmFigure label={t("shift.srcSubWindow")} value={fmt(x.subscriptionWindowMinor)} sub />
             </div>
             <div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-0.5 border-t border-term-border pt-2">
               <ConfirmFigure label={t("shift.cash")} value={fmt(x.cashTotalMinor)} />
               <ConfirmFigure label={t("shift.card")} value={fmt(x.cardTotalMinor)} />
+              {/* Drawer math made explicit: opening float + cash taken = expected drawer. */}
+              <ConfirmFigure label={t("shift.openingFloat")} value={fmt(x.openingFloatMinor)} />
+              <span />
               <ConfirmFigure label={t("shift.expectedDrawer")} value={fmt(x.expectedDrawerMinor)} bold />
             </div>
           </>
@@ -396,10 +401,13 @@ function CloseShiftConfirm({
 function ConfirmFigure({ label, value, bold, sub }: { label: string; value: string; bold?: boolean; sub?: boolean }) {
   return (
     <div className={`flex items-baseline justify-between gap-2 ${sub ? "pl-3" : ""}`}>
-      <span className={`text-[11px] uppercase tracking-wider ${sub ? "text-term-muted/70" : "text-term-muted"}`}>
+      <span
+        className={`whitespace-nowrap text-[0.6875rem] uppercase tracking-wider ${sub ? "text-term-muted/70" : "text-term-muted"}`}
+      >
         {label}
       </span>
-      <span className={bold ? "font-semibold text-term-text" : "text-term-text"}>{value}</span>
+      {/* The money/number never splits across lines (e.g. "89,650 ALL"). */}
+      <span className={`whitespace-nowrap ${bold ? "font-semibold text-term-text" : "text-term-text"}`}>{value}</span>
     </div>
   );
 }
@@ -448,7 +456,7 @@ function RootLayout() {
             <Link
               to="/profile"
               title={t("nav.profile")}
-              className="text-[11px] text-term-muted hover:text-term-text [&.active]:text-term-amber"
+              className="text-[0.6875rem] text-term-muted hover:text-term-text [&.active]:text-term-amber"
             >
               {user.username} · {user.roleName}
             </Link>