feat: finance page overhaul, file access fix for clients and subcontractors

- Finance (TeamInvoices): chart + stat cards, Overview/Expenses/Subcontractors/Invoices/Legacy tabs
- Expenses tab: 70/30 card split with expense list + category breakdown, + Expense button
- Overview tab: 3 cards dynamic height filling window, .md-compliant table headers and sticky heads
- TaskDetail FileBrowser: role-based virtual paths so clients and subcontractors no longer get 403

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

layout.md

@@ -60,6 +60,14 @@ This is the single source of truth for dashboard/profile visual structure and UI
   - Theme toggle to avatar: `14px` (`avatar-wrap margin-left`)
   - Avatar button: `49x49`, circle, `2px` inner ring + `2px` accent outline
 
+## 6.5) Section Control Bars (Tabs + Actions)
+- For page-level card controls (ex: Tasks/Projects, Finances tabs):
+  - container uses: `display: flex`, `align-items: center`, `gap: 4`, `margin-bottom: 10`, `flex-shrink: 0`
+  - tabs stay on the left in source order
+  - action buttons group sits on the right using: `margin-left: auto`, `display: flex`, `align-items: center`, `gap: 8`
+  - do not use hardcoded spacer blocks (`width` filler divs) to force alignment
+  - icon-only filter/action buttons share the same row and align vertically with add buttons
+
 ## 7) Dashboard Grids (Team)
 - Stat row: `grid-template-columns: 1fr 1fr 1fr 1.5fr`, `gap: 24`, `margin-bottom: 0`
 - Row 2: `grid-template-columns: 1fr 1fr 280px`, `gap: 24`, `margin-top: 24`
@@ -147,7 +155,7 @@ This is the single source of truth for dashboard/profile visual structure and UI
   - company line under title is always visible; fallback display is `—` when no company is assigned
   - right-side meta labels (`Member Since`, `Role`) use widget-title sizing: `11px`, `500`, uppercase, `letter-spacing: 0.8px`
   - right-side meta values use body sizing: `13px`
-  - self-only edit button: `position: absolute`, `top: 18px`, `right: 21px` (aligns to card padding), `border-radius: 8px` (matches card), `height: 30px`, `font-size: 12px`, `padding: 0 12px`
+  - self-only edit button: `position: absolute`, `top: 18px`, `right: 21px` (aligns to card padding), `border-radius: 8px` (matches card), `height: 22px`, `font-size: 12px`, `padding: 0 12px`
   - default outline button hover/focus fills with accent gold and uses dark text
 - Right calendar card shows only tasks/events assigned to the viewed profile user
 - Profile page left column includes a `Tasks In Progress` card above `Recent Activity`
@@ -196,7 +204,7 @@ This is the single source of truth for dashboard/profile visual structure and UI
   - current file path uses the same `11px` uppercase label treatment as the title row family
   - toolbar does not show `+ Folder` or `Upload` buttons
   - upload happens by dragging and dropping files or folders into the right card
-  - delete action uses the same geometry as the profile edit button (`top: 18px`, `right: 21px`, `8px` radius, `30px` height, `12px` text, `0 12px` padding) but uses danger styling with red hover/fill
+  - delete action uses the same geometry as the profile edit button (`top: 18px`, `right: 21px`, `8px` radius, `22px` height, `12px` text, `0 12px` padding) but uses danger styling with red hover/fill
 - Right card table:
   - uses dashboard table styling (`table-layout: fixed`, transparent header row, `10px` uppercase headers, `13px/12px` body text)
   - card padding matches dashboard widget shell (`18px 21px`)
@@ -216,7 +224,15 @@ This is the single source of truth for dashboard/profile visual structure and UI
 - Dashboard/profile widgets: `8px` radius
 - Sidebar: `8px` radius
 - Standard app buttons use the `Edit Profile` geometry:
-  - height: `30px`
+  - geometry is tokenized globally in CSS vars and must be reused (no per-page hardcoded button geometry):
+    - `--btn-height`
+    - `--btn-padding-x`
+    - `--btn-radius`
+    - `--btn-font-size`
+    - `--btn-font-weight`
+    - `--btn-letter-spacing`
+    - `--btn-line-height`
+  - height: `22px`
   - horizontal padding: `0 12px`
   - border-radius: `8px`
   - font-size: `11px`
@@ -269,6 +285,32 @@ This is the single source of truth for dashboard/profile visual structure and UI
   - field surfaces and borders use global theme tokens (`var(--card-bg-2)` + `var(--border)`) for dark/light parity
   - modal form action buttons use the standard outline geometry/style (`btn btn-outline`) unless a page explicitly defines a different role
 
+## 14.7) Status Tags
+- Shared status tags use `StatusBadge` (`.badge.badge-status`).
+- Base badge geometry:
+  - `display: inline-flex`
+  - `align-items: center`
+  - `gap: 4px`
+  - `padding: 3px 10px`
+  - `border-radius: 4px`
+  - `font-size: 11px`
+  - `font-weight: 400`
+  - `letter-spacing: 0.3px`
+  - `white-space: nowrap`
+- Status badge geometry override (`.badge-status`):
+  - `min-width: 78px`
+  - `height: 20px`
+  - `justify-content: center`
+  - `padding: 0 8px`
+  - `font-size: 10px`
+  - `line-height: 1`
+- Status colors are variant classes (`.badge-not_started`, `.badge-in_progress`, etc.) and are theme-aware.
+- Exception: compact urgent tag (`.badge-needs_revision`) uses tighter geometry:
+  - `min-width: 28px`
+  - `padding: 3px 4px`
+  - `border-radius: 4px`
+  - fixed red treatment in both dark/light themes.
+
 ## 15) Motion
 - Motion vars:
   - fast `160ms`