[STU-185] Migrate remaining app pages to shadcn/ui + Tailwind v4

src/app/admin/companies/[id]/page.tsx

@@ -36,7 +36,7 @@ export default async function AdminCompanyDetailPage({ params }: { params: Promi
           { label: "Updated", value: formatDate(data.company.company_updated_at) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Stores" rows={data.stores} />
         <CompactList title="Notes" rows={data.notes} />
       </section>

src/app/admin/transfers/[id]/page.tsx

@@ -27,7 +27,7 @@ export default async function AdminTransferDetailPage({ params }: { params: Prom
       primary={{ title: "Candidate Payouts", rows: data.candidates }}
       secondary={{ title: "Invoices", rows: data.invoices }}
     >
-      <Suspense fallback={<div className="transferActions"><p>Loading actions…</p></div>}>
+      <Suspense fallback={<div className="flex flex-col gap-4 mb-6"><p>Loading actions…</p></div>}>
         <TransferActionBar data={data} />
       </Suspense>
 
@@ -44,7 +44,7 @@ export default async function AdminTransferDetailPage({ params }: { params: Prom
           { label: "Updated", value: formatDate(data.transfer.transfer_updated_at) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Transfer File Entries" rows={data.fileEntries} />
       </section>
     </WorkspaceShell>

src/app/admin/transfers/page.tsx

@@ -24,27 +24,27 @@ export default async function AdminTransfersPage() {
         { label: "Next action", value: "Review", note: "Open a run before exporting PDFs or reconciling pay" }
       ]}
     >
-      <section className="financeStart" aria-label="Finance workflow">
-        <div className="financePrimary">
-          <span>Finance path</span>
-          <h2>Start with a transfer run. Everything else should hang off that.</h2>
-          <p>
+      <section className="grid grid-cols-[minmax(0,0.9fr)_minmax(360px,1.1fr)] gap-3 max-[1040px]:grid-cols-1" aria-label="Finance workflow">
+        <div className="grid content-start gap-2.5 p-[18px] border border-[#dfe4ed] rounded-lg bg-white dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+          <span className="text-[var(--blue)] text-[11px] font-black uppercase">Finance path</span>
+          <h2 className="max-w-[620px] text-[26px] leading-[1.08] mb-0">Start with a transfer run. Everything else should hang off that.</h2>
+          <p className="max-w-[640px] text-[var(--muted)] leading-[1.5] mb-0">
             A run is the place to inspect candidate payouts, employer charges, period dates, status, invoice context,
             and PDF exports. The table below is only the index.
           </p>
-          {latest ? <Link href={`/admin/transfers/${latest.id}` as Route}>Open latest run #{latest.id}</Link> : null}
+          {latest ? <Link className="w-fit min-h-10 inline-flex items-center rounded-lg bg-[#111827] text-white px-[13px] font-black no-underline dark:bg-[#e7ecf5] dark:text-[#090d14]" href={`/admin/transfers/${latest.id}` as Route}>Open latest run #{latest.id}</Link> : null}
         </div>
-        <div className="financeSteps">
+        <div className="grid grid-cols-2 overflow-hidden border border-[#dfe4ed] rounded-lg bg-white dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
           {[
             ["1", "Review run", "Check company, period, total, and status."],
             ["2", "Check payouts", "Inspect candidate rows before payment."],
             ["3", "Issue invoice", "Generate employer invoice PDF from the same source."],
             ["4", "Reconcile", "Mark what is paid, exported, or needs correction."]
           ].map(([step, title, note]) => (
-            <article key={step}>
-              <span>{step}</span>
-              <strong>{title}</strong>
-              <small>{note}</small>
+            <article key={step} className="min-w-0 min-h-[118px] grid content-center gap-1.5 border-r border-b border-[#e2e6ee] p-3.5 [&:nth-child(2n)]:border-r-0 [&:nth-last-child(-n+2)]:border-b-0">
+              <span className="text-[var(--blue)] text-[11px] font-black uppercase">{step}</span>
+              <strong className="text-[#101828] text-[17px] dark:text-[var(--ink)]">{title}</strong>
+              <small className="text-[var(--muted)] leading-[1.4]">{note}</small>
             </article>
           ))}
         </div>

src/app/candidate/payments/[id]/page.tsx

@@ -59,9 +59,9 @@ export default async function CandidatePaymentDetailPage({
       <FactPanel title="Payment Breakdown" facts={facts} />
       {transfer && <FactPanel title="Transfer Run" facts={transferFacts} />}
       {data.invoices.length > 0 && (
-        <section className="detailPanel">
-          <h2>Receipts & Invoices</h2>
-          <p className="detailPanelNote">
+        <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+          <h2 className="m-0 p-[18px] border-b border-[var(--line)]">Receipts & Invoices</h2>
+          <p className="text-[var(--muted)] p-[18px] pb-3.5 m-0">
             Paid invoices linked to this payment period serve as your receipt.
           </p>
           <CompactList title="Invoices" rows={data.invoices} />

src/app/company/companies/[id]/page.tsx

@@ -36,7 +36,7 @@ export default async function CompanyAccountDetailPage({ params }: { params: Pro
           { label: "Updated", value: formatDate(data.company.company_updated_at) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Stores" rows={data.stores} />
         <CompactList title="Notes" rows={data.notes} />
       </section>

src/app/company/requests/[id]/page.tsx

@@ -37,7 +37,7 @@ export default async function CompanyRequestDetailPage({ params }: { params: Pro
           { label: "Updated", value: formatDate(data.request.request_updated_datetime) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Interviews" rows={data.interviews} />
         <CompactList title="Stories" rows={data.stories} />
       </section>