feat(tenant): per-theme logos + file-upload + button UI polish

Replace the single tenant avatar with a pair of theme-scoped brand logos.
Render only the theme-matching <img> server-side and swap src on theme
toggle via a JS hook — no reload, no double request, no CSS tricks.

Tenant logos
- TenantLogoService (ImageUploadTrait) with theme whitelist and per-theme
  storage storage/tenants/{uuid}/logo/{light|dark}/, SIZES 128/256/512
- Public serving endpoint auth/tenant-logo-file so login can show the
  logo pre-auth; matching authenticated admin preview endpoint
- appTenantLogoUrl(?size, ?theme) with 4-step fallback cascade; PDF +
  mail always request 'light'
- Admin tenant edit: avatar block replaced by "Tenant logos" details
  block inside the Master-data tab, two side-by-side slots via Pico
  .grid with the core app-file-upload partial
- Policy rename ABILITY_ADMIN_TENANTS_AVATAR_VIEW -> LOGO_VIEW, action
  routes logo / logo-delete / logo-file with theme body/query param
- API endpoint path kept (backward compat), internals on new service
- CLI tenant:logo-migrate-avatars moves legacy avatar/ -> logo/light/
  idempotently (--dry-run, --yes, --cleanup)
- i18n "Tenant image" removed, 12 new keys synced across de/en

File upload component
- Full-width preview + filename/actions below (3D stack layout)
- Fixed 16:9 aspect ratio with 1rem inner padding for consistent
  preview size across any logo aspect
- Transparency checker pattern as background so black logos stay
  visible on dark mode and white logos on light mode
- form="" + deleteFormId support so the partial works with barrier
  forms inside another form

Buttons
- width:100% dropped from button[type="submit"]; scoped back via
  .login-main for the auth-flow primary CTA
- .outline base rule now tints background via color-mix of --app-color
  so secondary/primary/danger outlines all gain a subtle surface
- .outline.secondary restyled Stripe-style in both themes: solid white
  chip with soft shadow in light, solid elevated dark chip with white
  text in dark; neutral border replaces role-colored border
- .app-action-success/.app-action-danger outlines get color-mix bg +
  theme-aware outline-text tokens for stronger contrast
- Filled .primary/.app-action-success/.app-action-danger get raised
  box-shadow (inset highlight + drop) — opt-in via class so chrome
  buttons stay flat
- Dropped the legacy .secondary utility that was clobbering the
  custom-property cascade with a hardcoded muted color

Theme swap
- Logo img carries data-src-light + data-src-dark; theme-toggle JS
  swaps src when data-theme changes, keeping the topbar/login logo in
  sync without a page reload

Quality gates: PHPUnit (2045), PHPStan L5, CS-Fixer, docs link/drift,
codex skills sync — all green.

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

web/js/components/app-theme-toggle.js

@@ -6,6 +6,28 @@ import { postForm } from '../core/app-http.js';
 
 const setTheme = (theme) => {
   document.documentElement.dataset.theme = theme;
+  syncThemeAwareImages(theme);
+};
+
+/**
+ * Swap `src` on every <img data-theme-src> to the attribute matching the
+ * current theme — keeps tenant logos (topbar, login hero) in sync with the
+ * theme toggle without a full page reload.
+ */
+const syncThemeAwareImages = (theme) => {
+  const key = theme === 'dark' ? 'dark' : 'light';
+  const fallback = key === 'dark' ? 'light' : 'dark';
+  document.querySelectorAll('[data-theme-src]').forEach((img) => {
+    if (!(img instanceof HTMLImageElement)) {
+      return;
+    }
+    const next = img.dataset['src' + key.charAt(0).toUpperCase() + key.slice(1)]
+      || img.dataset['src' + fallback.charAt(0).toUpperCase() + fallback.slice(1)]
+      || '';
+    if (next && img.getAttribute('src') !== next) {
+      img.setAttribute('src', next);
+    }
+  });
 };
 
 const isDarkTheme = (theme) => theme === 'dark';

web/js/pages/admin-tenants-index.js

@@ -33,11 +33,11 @@ createListPageModule({
             sort: true,
             width: '75%',
             formatter: (cell, row) => {
-              const hasAvatar = cell?.has_avatar ? 1 : 0;
+              const hasLogo = cell?.has_logo ? 1 : 0;
               const uuid = encodeURIComponent(String(cell?.uuid ?? ''));
               let avatarHtml = '';
-              if (hasAvatar && uuid) {
-                const src = new URL(`admin/tenants/avatar-file?uuid=${uuid}&size=64`, appBase).toString();
+              if (hasLogo && uuid) {
+                const src = new URL(`admin/tenants/logo-file?uuid=${uuid}&theme=light&size=64`, appBase).toString();
                 avatarHtml = `<img class="grid-avatar grid-avatar-tenant" src="${src}" alt="" loading="lazy">`;
               } else {
                 const initials = escapeHtml(initialsForRow(row));
@@ -75,7 +75,7 @@ createListPageModule({
           {
             uuid: row.uuid ?? '',
             label: row.description ?? '',
-            has_avatar: row.has_avatar ? 1 : 0,
+            has_logo: row.has_logo ? 1 : 0,
           },
           row.total_users ?? 0,
           row.uuid,