fix: remove cards from invoice popups, match original flat layout

Replace SubcontractorInvoiceDetailView (card-based) with flat layout
matching the original sub-invoice popup: meta strip + raw table + notes.

- InvoiceDetailPopup: add metaContent/metaActions/metaCols props + export POPUP_FIELD_LABEL
- New InvoicePopupTable: flat sortable 5-col table, no card wrapper
- All 4 popups (client, team invoice, team sub-invoice, external): use
  flat meta strip (4-col grid, borderBottom) and InvoicePopupTable
- Sub-invoice + external: Submitted | Paid/Created | Items | Total
- Client invoice: Date | Due | Status | Total
- Team invoice: Date | Due | Company | Email | Total (+ stripe if paid)
  with Edit Dates button in metaActions slot

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

src/components/InvoiceDetailPopup.jsx

@@ -1,12 +1,25 @@
 import { popupOverlayStyle, popupSurfaceStyle } from '../lib/popupStyles';
 import PageLoader from './PageLoader';
 
+export const POPUP_FIELD_LABEL = {
+  fontSize: 11,
+  fontWeight: 500,
+  color: 'var(--text-secondary)',
+  textTransform: 'uppercase',
+  letterSpacing: 0.8,
+  display: 'block',
+  marginBottom: 4,
+};
+
 export default function InvoiceDetailPopup({
   title,
   subtitle,
   headerRight,
   onClose,
   blockClose = false,
+  metaContent,   // JSX fields rendered in flat meta grid (no cards)
+  metaActions,   // optional JSX rendered right-aligned beside meta grid (e.g. Edit Dates)
+  metaCols = 4,  // number of grid columns for meta strip
   footerActions,
   loading = false,
   children,
@@ -17,7 +30,8 @@ export default function InvoiceDetailPopup({
         style={{ ...popupSurfaceStyle, background: 'var(--card-bg)', width: '80vw', height: '80vh', display: 'flex', flexDirection: 'column', gap: 0 }}
         onClick={e => e.stopPropagation()}
       >
-        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, paddingBottom: 18, marginBottom: 18, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
+        {/* Header */}
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, paddingBottom: 18, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
           <div>
             <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--text-primary)', letterSpacing: 0.2, lineHeight: 1.1 }}>{title}</div>
             {subtitle && <div style={{ marginTop: 6, fontSize: 13, color: 'var(--text-secondary)' }}>{subtitle}</div>}
@@ -25,16 +39,34 @@ export default function InvoiceDetailPopup({
           {headerRight && <div style={{ flexShrink: 0 }}>{headerRight}</div>}
         </div>
 
+        {/* Flat meta strip */}
+        {metaContent && (
+          <div style={{ padding: '18px 0', borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
+              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${metaCols}, minmax(0, 1fr))`, gap: '14px 18px', flex: 1 }}>
+                {metaContent}
+              </div>
+              {metaActions && (
+                <div style={{ flexShrink: 0, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
+                  {metaActions}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Body */}
         {loading ? (
           <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <PageLoader />
           </div>
         ) : (
-          <div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
+          <div className="scrollbar-thin-theme table-scroll-hidden" style={{ flex: 1, minHeight: 0, overflowY: 'auto', paddingTop: 18 }}>
             {children}
           </div>
         )}
 
+        {/* Footer */}
         {footerActions && (
           <div className="modal-action-row" style={{ paddingTop: 18, borderTop: '1px solid var(--border)', flexShrink: 0 }}>
             {footerActions}