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>

src/pages/TaskDetail.jsx

@@ -62,13 +62,6 @@ const CARD = { padding: '18px 21px', borderRadius: 8 };
 const LABEL = { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 14 };
 const META_LABEL = { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 4 };
 const CARD_META_LABEL = { fontSize: 11, fontWeight: 500, color: 'var(--text-secondary)', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 2 };
-const TAB_STYLE = (active) => ({
-  fontFamily: "Fourge, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-  fontSize: 13, fontWeight: 500, letterSpacing: 0.2, padding: '2px 0 5px', margin: '0 8px',
-  borderRadius: 0, border: 'none', borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
-  cursor: 'pointer', background: 'transparent',
-  color: active ? 'var(--text-primary)' : 'var(--text-secondary)', transition: 'all 160ms',
-});
 
 const TABS = ['Overview', 'Revisions', 'Comments', 'Folder'];
 
@@ -444,7 +437,7 @@ export default function TaskDetail() {
             </div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 20 }}>
               {submission?.service_type && (
-                <span className="badge badge-client">{submission.service_type}</span>
+                <span className="badge badge-status badge-client">{submission.service_type}</span>
               )}
               <StatusBadge status={task.status || 'not_started'} />
             </div>
@@ -502,7 +495,7 @@ export default function TaskDetail() {
               {TABS.map(tab => {
                 const count = tab === 'Revisions' ? revisions.length : tab === 'Comments' ? comments.length : 0;
                 return (
-                  <button key={tab} onClick={() => setActiveTab(tab)} style={TAB_STYLE(activeTab === tab)}>
+                  <button key={tab} onClick={() => setActiveTab(tab)} className={`section-tab-btn${activeTab === tab ? ' is-active' : ''}`}>
                     {tab}{count > 0 && <span style={{ marginLeft: 5, fontSize: 12, fontWeight: 600, color: activeTab === tab ? 'var(--accent)' : 'var(--text-muted)', background: 'var(--card-bg-2)', border: '1px solid var(--border)', borderRadius: 10, padding: '3px 8px' }}>{count}</span>}
                   </button>
                 );