feat: finance page overhaul — pie charts, month nav, tab improvements

- Overview tab: 3 donut pie charts (expenses by category, sub payments, invoiced) each with independent month navigation arrows
- Expenses tab: big red total in category sidebar, left-aligned category column, white text
- Subcontractors tab: big gold total in sidebar, pending/paid breakdown with gold highlight
- Invoices tab: big green total in companies sidebar, dashboard-inline-link for invoice# and company, StatusBadge with Invoiced/Paid labels, column widths tuned
- StatusBadge: add optional label prop for custom display text
- Layout/style polish across tabs

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

layout.md

@@ -63,10 +63,13 @@ This is the single source of truth for dashboard/profile visual structure and UI
 ## 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`
+  - **`margin-bottom: 10` is the site-wide standard gap between any tab/control bar and the card(s) below — use this everywhere, no exceptions**
+  - tab bar row must always be `min-height: var(--btn-height)` so the gap to the card never shifts when action buttons appear/disappear
   - 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
+  - when the control bar uses a multi-column grid (to align with split-card layouts below), add `align-items: center` to the grid and `min-height: var(--btn-height)` to every column so row height is stable across all tab states
 
 ## 7) Dashboard Grids (Team)
 - Stat row: `grid-template-columns: 1fr 1fr 1fr 1.5fr`, `gap: 24`, `margin-bottom: 0`
@@ -287,6 +290,8 @@ This is the single source of truth for dashboard/profile visual structure and UI
 
 ## 14.7) Status Tags
 - Shared status tags use `StatusBadge` (`.badge.badge-status`).
+- Rule: any workflow/state value (`not_started`, `in_progress`, `on_hold`, `client_review`, `client_approved`, `invoiced`, `paid`, `active`, `completed`, etc.) must render through `StatusBadge` only.
+- Do not use raw `span.badge badge-*` for statuses.
 - Base badge geometry:
   - `display: inline-flex`
   - `align-items: center`
@@ -298,13 +303,19 @@ This is the single source of truth for dashboard/profile visual structure and UI
   - `letter-spacing: 0.3px`
   - `white-space: nowrap`
 - Status badge geometry override (`.badge-status`):
+  - `display: inline-flex`
+  - `align-items: center`
+  - `justify-content: center`
   - `min-width: 78px`
   - `height: 20px`
-  - `justify-content: center`
   - `padding: 0 8px`
   - `font-size: 10px`
-  - `line-height: 1`
+  - `line-height: 1.05`
+  - `box-sizing: border-box`
+  - `padding-top: 1px` (optical vertical-centering correction for current font metrics)
 - Status colors are variant classes (`.badge-not_started`, `.badge-in_progress`, etc.) and are theme-aware.
+- Non-status chips (example: invoice line-item type `Initial`/`Revision`, or service-type labels) may use `.badge` variants directly.
+- When a non-status chip should visually align with status pills, add `.badge-status` to match geometry.
 - Exception: compact urgent tag (`.badge-needs_revision`) uses tighter geometry:
   - `min-width: 28px`
   - `padding: 3px 4px`
@@ -332,6 +343,17 @@ This is the single source of truth for dashboard/profile visual structure and UI
   - `Pinned` + `Navigation` tree rows use text-only hover highlight (`color: var(--accent)`).
   - Do not apply row background fill for hover in this section.
 
+## 17.5) Link Interaction Standard
+- Use shared link classes only; do not hand-roll page-specific link hover styles:
+  - table/text links inside cards and tables: `table-link`
+  - inline action links/buttons in cards/feeds: `dashboard-inline-link`
+- Hover behavior for both classes:
+  - color changes to accent gold (`var(--accent)`)
+  - no underline on hover/focus
+  - cursor remains pointer
+- For table-heavy rows where hit targets are tight, row hover may also promote link color to accent; still keep text-only link treatment (no full-row fill just for links).
+- Do not rely on inline style color overrides for hover behavior; if a variant is needed, add/extend a shared class in `index.css`.
+
 ## 16) Non-Negotiable Implementation Rules
 - Keep gradient backgrounds on `html`, not `body`
 - Keep widget shell values (`18px 21px`, `8px`, blur 12, border token) consistent