feat(portal): customer-admin surface on real data + Stripe billing + session resilience

Access & navigation
- Gate partner-mode strictly to partner staff so admins/end-users never inherit
  leftover partner-view state; purge stale session entry on hydrate.
- Role-driven admin entry: useMe.isTenantAdmin, Admin/Personal tiles in the app
  launcher, and an /admin route guard in the global middleware (fail closed).
- Drop the duplicate user identity block from the sidebar footer.

Admin pages on real data
- New tenant-scoped, membership-gated endpoints: GET /tenants/:slug/{audit,users,
  invoices}; useTenant composable resolves the active workspace + subscription.
- Dashboard: real seats, spend (cycle-normalized + minor-units), plan, renewal,
  and recent audit; unbacked sections removed.
- Users & groups: real members; Groups/Invitations/Service accounts shown as
  honest "coming soon".
- Subscription & invoices: real plan hero, invoice history, and billing details.

Stripe payment method (Elements + SetupIntent)
- StripeClient: publishable key + getDefaultCard/createSetupIntent/setDefaultCard.
- CustomerBillingController + BillingService methods (ensure-customer on demand).
- Portal: PaymentMethodModal, useStripeJs (CDN load), proxies; hidePostalCode.

Editable billing details & whitelabel branding
- PATCH /tenants/:slug/billing-info (narrow: company/VAT/country/email).
- TenantBranding schema/service + GET/PUT /tenants/:slug/branding: real product
  name, accent colour, and per-tenant email-template overrides.
- Branding preview + sidebar workspace mark wired to real name/plan/seats/colour
  with YIQ auto-contrast (readableOn util).

Session resilience
- Request offline_access so Authentik issues a refresh token (automaticRefresh).
- Silent refresh + single retry on 401 for writes (useApiFetch, incl. partner
  pages) and reads (useMe.fetchMe) — no redirect, no lost input.
- Modal backdrop closes only on press+release on the backdrop (no more
  drag-select-to-close).

apps/portal/components/PortalSidebar.vue

@@ -15,6 +15,7 @@
 
 import type { IconName } from './UiIcon.vue'
 import type { PartnerTenantDoc } from '~/types/partner'
+import type { TenantUserDoc } from '~/types/workspace'
 
 interface NavItem {
   id: string
@@ -156,6 +157,32 @@ const { data: partnerTenants } = await useFetch<PartnerTenantDoc[]>('/api/partne
 })
 const partnerCustomerCount = computed(() => partnerTenants.value?.length ?? 0)
 
+// The signed-in user's own workspace (for the customer switcher tile). Real
+// name, plan and accent come from /api/me.
+const { tenant: ownTenant, planLabel, seatLimit } = useTenant()
+const ownSlug = computed(() => ownTenant.value?.slug ?? '')
+
+// Seat usage for the switcher sub-line. Gated to non-partner members so the
+// global shell never 403s the membership-scoped endpoint; shared key keeps it
+// to one request.
+const { data: ownUsers } = await useFetch<TenantUserDoc[]>(
+  () => `/api/tenants/${ownSlug.value}/users`,
+  {
+    key: 'sidebar-ws-users',
+    default: () => [],
+    immediate: !isPartnerStaff.value && !!ownSlug.value,
+    watch: [ownSlug],
+  },
+)
+const seatsUsed = computed(() => (ownUsers.value ?? []).filter((u) => u.active !== false).length)
+
+// Workspace mark colours. Default to the signal accent when no brandColor is
+// saved (matches the Branding preview); readableOn flips the initial light on
+// dark accents so it stays legible for any chosen colour.
+const DEFAULT_BRAND = '#D4FF3A'
+const brandBg = computed(() => ownTenant.value?.brandColor || DEFAULT_BRAND)
+const brandFg = computed(() => readableOn(brandBg.value))
+
 // Customer currently being acted-as (partner-in-customer mode), resolved from
 // the real tenant list by the _id stored in partner mode.
 const activeCustomer = computed(() =>
@@ -167,14 +194,15 @@ const activeCustomer = computed(() =>
   <aside class="sidebar" :class="{ collapsed }">
     <!-- Workspace switcher -->
     <button class="switcher" :title="collapsed ? 'Workspace' : undefined">
-      <!-- Customer admin: bone tile with node-mark -->
+      <!-- Customer admin: brand-colour tile with the workspace initial,
+           matching the Branding live-preview mark. -->
       <template v-if="switcherKind === 'customer'">
-        <span class="ws-tile bone">
-          <NodeMark :size="28" fg="#0A0A0A" accent="var(--signal)" />
+        <span class="ws-tile brand" :style="{ background: brandBg, color: brandFg }">
+          {{ (ownTenant?.name?.[0] || 'a').toLowerCase() }}
         </span>
         <div v-if="!collapsed" class="ws-text">
-          <div class="ws-name">baslund</div>
-          <div class="ws-sub">Business · 11/25</div>
+          <div class="ws-name">{{ ownTenant?.name || 'Workspace' }}</div>
+          <div class="ws-sub">{{ planLabel }}{{ seatLimit ? ` · ${seatsUsed}/${seatLimit}` : '' }}</div>
         </div>
       </template>
 
@@ -225,18 +253,9 @@ const activeCustomer = computed(() =>
       </template>
     </nav>
 
-    <!-- User footer -->
+    <!-- Footer: collapse toggle only. The user identity block lives in the
+         topbar avatar menu — no need to duplicate it here. -->
     <div class="foot">
-      <button class="user" :title="collapsed ? 'Anne Hansen' : undefined">
-        <Avatar name="Anne Hansen" :size="26" />
-        <div v-if="!collapsed" class="user-text">
-          <div class="user-name">Anne Hansen</div>
-          <div class="user-role">
-            {{ section === 'partner' ? 'partner admin' : section === 'admin' ? 'admin' : 'user' }}
-          </div>
-        </div>
-        <UiIcon v-if="!collapsed" name="chevUpDown" :size="12" stroke="var(--side-mute)" />
-      </button>
       <button class="collapse" @click="toggle" :title="collapsed ? 'Expand · ⌘[' : 'Collapse · ⌘['">
         <UiIcon :name="collapsed ? 'chevRight' : 'chevLeft'" :size="11" />
         <span v-if="!collapsed">collapse · ⌘[</span>
@@ -298,6 +317,13 @@ const activeCustomer = computed(() =>
   font-weight: 700;
   font-size: 18px;
 }
+/* Customer workspace mark — brand colour bg + auto-contrast initial (bg + color
+   set inline; the initial flips light/dark by luminance). */
+.ws-tile.brand {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 18px;
+}
 
 .ws-text { flex: 1; min-width: 0; }
 .ws-name {
@@ -397,31 +423,6 @@ nav {
   border-top: 1px solid var(--side-border);
   padding: 8px;
 }
-.user {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 8px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--side-dim);
-  font-family: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  text-align: left;
-}
-.user:hover { background: var(--side-hover); }
-.user-text { flex: 1; min-width: 0; }
-.user-name { font-size: 12px; color: var(--side-text); font-weight: 500; }
-.user-role {
-  font-size: 10px;
-  color: var(--side-mute);
-  font-family: var(--font-mono);
-  margin-top: 1px;
-}
-.sidebar.collapsed .user { justify-content: center; padding: 8px 0; }
 
 /* Collapse toggle */
 .collapse {