/* ============================================================================= 29 — FIRM · INVOICES & PAYMENTS (re-skin) ----------------------------------------------------------------------------- Targets: template-parts/firm/view-invoices.php (dispatcher, no markup) + invoices/list.php · invoices/create.php · invoices/detail.php. Visual target: project/"23 Firm Invoices.dc.html" (List + Raise + Detail). Auto-loaded partial (assets/css/redesign/*.css) — loads AFTER style.css / portal-redesign.css, so it only REFINES the shared components those already define (.firm-head, .stat-card, .data-table, .badge*, .firm-form, .firm-grid, .firm-field, .inv-line, .inv-total-row, .btn*, .panel, .c360-meta-grid). No shared component is redefined wholesale; nothing is renamed. ALL rules scoped under .portal-shell.firm-shell + invoice-only hooks (#firmInvTable, #invLines, .inv-*) so nothing leaks to the marketing site, the client portal, or sibling firm views. Colour comes only from the theme :root tokens — no new hex except the shared-token equivalents. Mockup sample data (FL-2026-009x rows / TZS figures) is NEVER hardcoded — every value is rendered server-side from finlaw_firm_invoices() + the Woo order. MISMATCHES resolved (see wiring-prompts/MISMATCHES.md): · List↔form↔detail stay on real server routing (?action=new · /{id}/) — the mockup's client-side tabs are NOT reproduced. · Status badges RECOLOURED via the shared .badge-* classes (Sent→blue wash); Draft/Paid/Overdue already match the mockup, so they are left untouched. · "Audit trail" is wired to real Woo order notes in detail.php and only rendered when notes exist — never fabricated. ============================================================================= */ /* ------------------------------------------------------------------------- 1. STAT CARDS — Outstanding (red accent) + Paid this month (green accent) The shared .stat-card already carries the top accent bar, icon chip and layout. The mockup amount is Playfair (not mono) at ~26px, tabular figures. The template drops the old `.mono`/inline size in favour of .inv-stat-num. ------------------------------------------------------------------------- */ .portal-shell.firm-shell .inv-stat-num{ font-family:'Playfair Display',Georgia,serif; font-size:26px; font-weight:800; line-height:1.05; color:var(--blue-ink); font-variant-numeric:tabular-nums; margin-bottom:4px; } /* ------------------------------------------------------------------------- 2. STATUS BADGES — recolour the SHARED .badge-* classes to the mockup. Draft (.badge-closed=grey), Paid (.badge-paid=green) and Overdue (.badge-overdue=red) already match the mockup. Only Sent/"Due" (.badge-due) needs to move from the base red wash to the mockup's blue wash. Scoped to firm-shell so the client portal's own badge tone is untouched; recoloured, not renamed (other views keep using .badge-due). ------------------------------------------------------------------------- */ .portal-shell.firm-shell .badge-due{ background:var(--blue-pale); color:var(--blue); } /* ------------------------------------------------------------------------- 3. LIST TABLE (#firmInvTable) Base .data-table supplies type, padding and row hover. Add: a min-width so wide content scrolls inside its overflow-x wrapper, a right-aligned Amount column, and a bold navy invoice-number link. Only above the 760px breakpoint, where the base table stacks into data-label cards. ------------------------------------------------------------------------- */ @media(min-width:761px){ .portal-shell.firm-shell #firmInvTable{ min-width:820px; } /* Amount is column 4 (Invoice · Client · Matter · Amount · Issued · Due · Status). */ .portal-shell.firm-shell #firmInvTable th:nth-child(4), .portal-shell.firm-shell #firmInvTable td:nth-child(4){ text-align:right; } } /* Invoice-number link — bold navy tabular, brand-red on hover (mockup). */ .portal-shell.firm-shell #firmInvTable td.mono a, .portal-shell.firm-shell #firmInvTable td.mono a b{ color:var(--blue-ink); font-weight:700; font-variant-numeric:tabular-nums; } .portal-shell.firm-shell #firmInvTable td.mono a:hover, .portal-shell.firm-shell #firmInvTable td.mono a:hover b{ color:var(--red); } /* Overdue rows tinted red — supplementary to the textual "Overdue" badge, so the state is never conveyed by colour alone. Class set server-side from the real invoice status (never hardcoded). */ .portal-shell.firm-shell #firmInvTable tr.inv-row-overdue td{ background:var(--red-pale); } .portal-shell.firm-shell #firmInvTable tr.inv-row-overdue:hover td{ background:#fce0e0; } /* ------------------------------------------------------------------------- 4. RAISE-INVOICE FORM (create.php) Shared .firm-form / .firm-grid / .firm-field / .inv-line already style the fields, inputs and the line-item row. Add: the card max-width, the remove (✕) button chip, the dashed "+ Add line" affordance, and a divider above the live Total — matching the mockup. Every JS hook (#invLines, .inv-line, .inv-amount, #invAddLine, .inv-rm, #invTotal, li_desc[]/li_amount[]) is preserved by the markup; these rules only reshape them. ------------------------------------------------------------------------- */ /* Constrain the raise form card to the mockup width (~720px). :has keys on the line-items container so ONLY the create panel matches — the list/detail panels are unaffected. Layout-only (no hiding) — no .panel regression. */ .portal-shell.firm-shell .panel:has(#invLines){ max-width:720px; } /* Remove-line button — 32px square, hairline border, muted glyph, red hover. */ .portal-shell.firm-shell .inv-line .inv-rm{ flex:0 0 auto; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair); border-radius:8px; background:#fff; color:var(--mid); font-size:18px; line-height:1; cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .portal-shell.firm-shell .inv-line .inv-rm:hover{ background:var(--red-pale); color:var(--red); border-color:var(--red-pale); } /* "+ Add line" — dashed ghost button, blue label (mockup). Overrides the base .btn-view chrome for this one control only (targeted by id). */ .portal-shell.firm-shell #invAddLine{ background:transparent; border:1px dashed var(--hair); border-radius:8px; padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--blue); cursor:pointer; } .portal-shell.firm-shell #invAddLine:hover{ background:var(--blue-pale); border-color:var(--blue); } /* Live Total — right-aligned with a hairline divider above it (mockup). The shared .inv-total-row already sets the tabular mono figure + tone. */ .portal-shell.firm-shell .inv-total-row{ margin-top:14px; padding-top:14px; border-top:1px solid var(--hair); } /* ------------------------------------------------------------------------- 5. DETAIL (detail.php) Shared .c360-meta-grid + .data-table render the meta and line items. Add: the green-outline "Mark paid" override (the sibling PDF/pay controls keep their base chrome), and the real-order-notes audit-trail list. ------------------------------------------------------------------------- */ /* Mark-paid (admin override) — green outline pill (mockup). Scoped by the view-specific .inv-btn-markpaid class so the neighbouring .btn-view PDF link is NOT recoloured. */ .portal-shell.firm-shell .inv-btn-markpaid{ border:1px solid var(--green); color:var(--green); background:transparent; } .portal-shell.firm-shell .inv-btn-markpaid:hover{ background:var(--green-bg); color:var(--green); border-color:var(--green); } /* Audit trail — real Woo order notes only (conditionally rendered server-side). */ .portal-shell.firm-shell .inv-audit-list{ list-style:none; margin:0; padding:6px 22px 20px; display:flex; flex-direction:column; gap:12px; } .portal-shell.firm-shell .inv-audit-item{ position:relative; padding-left:16px; font-size:12.5px; line-height:1.5; color:var(--ink); } .portal-shell.firm-shell .inv-audit-item::before{ content:""; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:50%; background:var(--blue); } .portal-shell.firm-shell .inv-audit-when{ display:block; font-size:11.5px; color:var(--mid); font-variant-numeric:tabular-nums; margin-bottom:2px; }