feat(bokslut): the bokslut trio in the flat concept language (scenes 34-36) (#1161)

* feat(bokslut): Arsbokslut hub as Stegen with de-boxed linear steps (trio 1/3) Scene 34: the six-step wizard gets the house horizontal stepper (done checks behind the current step, click-back navigation, forward stays with each step's continue action), the period select moves into the header as the context control, and the progress-bar and picker cards die. Preflight, Preview, Execute and Result are de-boxed: sans eyebrow sections with hairlines, quiet action links, attn lines instead of boxed alerts, muted text for normal states. Step content is centered at reading width. Accruals/Dispositions keep their internals for now (interactive panels; follow-up pass). All wizard logic untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(bokslut): INK2 and NE-bilaga views in the flat house language (trio 2/3) Scene 36 direction: the declaration views lose every card. Statutory sections (Tillgangar, Eget kapital och skulder, Resultatrakning, INK2S, Intakter, Kostnader) become sans eyebrow sections with hairlines, the header card becomes a flat block with the SRU download beside it, the filing instructions lose their info box, warnings render as attn lines, and the NE R11 result becomes the emphasized document-foot row. All ruta tables, SRU downloads and warnings logic untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> * feat(bokslut): Arsredovisning page, studio and digital filing in the flat house language (trio 3/3) De-boxes the whole scene-35 surface: the page shell (period picker, K3 note, narrativ, flerarsoversikt, underskrifter, PDF section), the AnnualReportStudio (workflow strip, scope form, completeness checks, versions) and DigitalInlamning (iXBRL review, submission form, status history) all move from Card shells to sans-eyebrow sections with hairlines. Inner info boxes flatten to bordered text blocks; the digital-checks warning becomes an attn line. The iframe border and the Kommer snart overlay sign stay: one frames an external document, the other floats above blurred content. Statutory Swedish-only surface: no new i18n keys. * polish(bokslut): align trio controls with the house language Founder feedback: buttons and selects still read old-style next to the bookkeeping page. Sweeps all trio surfaces: - Drop every min-h-11 override on Buttons and Inputs (44px chunky controls) so the compact house pill and h-10 input apply. - Replace all native <select> elements (BooleanQuestion, currency, group size, signing method, signer role, versions, AGM outcome, roll) with the shadcn Select primitive used system-wide. - Step navigation matches the merged Moms Stegen: white outline size-sm pills labelled 'Nästa: <steg> →' and '← Tillbaka'. Booking commits (Verkställ, Bokför valda dispositioner) stay primary. - Year-end period picker becomes the ContextPicker chip (the house context-picker idiom), and the stepper row widens to max-w-4xl so step 6 'Klart' no longer clips. - font-sans on two uppercase h3 eyebrows that rendered serif via the global h1-h3 display rule. * fix(vat): one toolbar row and the FyPicker chip on every fiscal-year surface The prod momsdeklaration (helårsmoms) broke into two sparse rows: Exportera alone, then a labelled 280px FiscalYearSelector below it, plus a serif uppercase worklist heading and internal check codes in the UI. - The VAT toolbar is one flat row: periodicity picker, fiscal-year chip, black Exportera, all h-9 aligned. - FyPicker (the rounded ContextPicker chip from UI-migration PR 3) replaces FiscalYearSelector on every page-level surface it had left: the VAT toolbar, FocusedReport's header (all report detail pages) and Kassaflödesanalys. Dialog/settings forms keep the labelled select, which is a form field, not a context picker. - 'Verifikationer som saknar basbelopp' becomes a sans eyebrow with hairline; internal codes (RC_BASIS_MISSING et al) no longer render in check rows, the Swedish message already cites the SKV felkod. - font-sans on the SkatteverketPanel validation eyebrow. * polish(vat): periodicity, year and quarter/month pickers as ContextPicker chips Founder feedback: the Arsvis dropdown should also be the rounded style. The cadence choice now lives behind a settings-style 'Period' chip (Manadsvis/Kvartalsvis/Arsvis with a check on the active one), and the year and quarter/month selects become chips too, so the whole momsdeklaration toolbar is chip-shaped: Period, 2026, Kvartal 3 (jul-sep) or Rakenskapsar 2026, then the black Exportera pill. The concrete period chip already implies the cadence, so the Period chip can stay label-only. --------- Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
2026-07-24 20:20:00 +02:00
parent 49e86e2e67
commit 98e1a48c2b
17 changed files with 778 additions and 824 deletions
@@ -273,8 +273,8 @@ export function AccrualsStep({ periodId, onBack, onContinue }: AccrualsStepProps
      )}

      <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack} disabled={posting}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack} disabled={posting}>
+          ← Tillbaka
        </Button>
        <Button onClick={handleCommit} disabled={posting}>
          {posting ? (
@@ -216,9 +216,11 @@ export function DispositionsStep({ periodId, onBack, onContinue }: DispositionsS
          fiscalYear={fiscalYear}
        />
        <div className="flex justify-between">
-          <Button variant="outline" onClick={onBack}>Tillbaka</Button>
-          <Button onClick={onContinue}>
-            Fortsätt <ArrowRight className="ml-1 h-4 w-4" />
+          <Button variant="outline" size="sm" onClick={onBack}>
+            ← Tillbaka
+          </Button>
+          <Button variant="outline" size="sm" onClick={onContinue}>
+            Nästa: Förhandsgranska →
          </Button>
        </div>
      </div>
@@ -322,8 +324,8 @@ export function DispositionsStep({ periodId, onBack, onContinue }: DispositionsS
      )}

      <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack} disabled={posting}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack} disabled={posting}>
+          ← Tillbaka
        </Button>
        <Button onClick={handleCommit} disabled={posting || hasCorrectionRequired}>
          {posting ? (
@@ -1,10 +1,9 @@
 'use client'

 import { useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { DestructiveConfirmDialog } from '@/components/ui/destructive-confirm-dialog'
-import { Lock, Loader2, AlertTriangle } from 'lucide-react'
+import { Lock, Loader2 } from 'lucide-react'

 interface ExecuteStepProps {
  periodName: string
@@ -27,14 +26,15 @@ export function ExecuteStep({ periodName, isRunning, error, bolagsskattMissing,

  return (
    <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base flex items-center gap-2">
-            <Lock className="h-4 w-4" />
+      <section>
+        <div className="mb-3 flex items-center gap-2 px-1">
+          <Lock className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
            Klar att verkställa
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
+          </h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="space-y-4 px-1">
          <p className="text-sm">
            När du verkställer bokslutet för <strong>{periodName}</strong> kommer följande att hända
            i en transaktion:
@@ -51,27 +51,20 @@ export function ExecuteStep({ periodName, isRunning, error, bolagsskattMissing,
            stornering eller bokar i den nya perioden.
          </p>
          {bolagsskattMissing && (
-            <div className="rounded-md border border-border p-3 text-sm flex items-start gap-2">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground mt-0.5 shrink-0" />
-              <p>
-                Ingen bolagsskatt är bokförd trots att året visar vinst. Om det inte är avsiktligt
-                (t.ex. underskottsavdrag, periodiseringsfond eller överavskrivningar som nollar det
-                skattemässiga resultatet), gå tillbaka och boka skatten i dispositionssteget innan
-                du verkställer.
-              </p>
-            </div>
+            <p className="text-[12.5px] leading-5 text-attn">
+              Ingen bolagsskatt är bokförd trots att året visar vinst. Om det inte är avsiktligt
+              (t.ex. underskottsavdrag, periodiseringsfond eller överavskrivningar som nollar det
+              skattemässiga resultatet), gå tillbaka och boka skatten i dispositionssteget innan
+              du verkställer.
+            </p>
          )}
-          {error && (
-            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          )}
-        </CardContent>
-      </Card>
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+      </section>

      <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack} disabled={isRunning}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack} disabled={isRunning}>
+          ← Tillbaka
        </Button>
        <Button
          variant="destructive"
@@ -1,10 +1,10 @@
 'use client'

-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { CheckCircle2, AlertTriangle, XCircle, Info } from 'lucide-react'
+import { QUIET_LINK_CLASS } from '@/components/ui/dry-table'
+import { AlertTriangle, Info, XCircle } from 'lucide-react'
 import Link from 'next/link'
 import type { BokslutReadinessReport } from '@/lib/bokslut/readiness-aggregator'

@@ -15,28 +15,33 @@ interface PreflightStepProps {
  onContinue: () => void
 }

+/** Sans eyebrow section head with a trailing hairline (house idiom). */
+function SectionHead({ icon, children }: { icon?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="mb-1 flex items-center gap-2 px-1">
+      {icon}
+      <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
+        {children}
+      </h3>
+      <div className="h-px flex-1 bg-border/60" />
+    </div>
+  )
+}
+
 export function PreflightStep({ report, isLoading, error, onContinue }: PreflightStepProps) {
  if (isLoading) {
    return (
-      <Card>
-        <CardContent className="p-6 space-y-3">
-          <Skeleton className="h-6 w-1/3" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-4 w-2/3" />
-        </CardContent>
-      </Card>
+      <div className="space-y-3">
+        <Skeleton className="h-6 w-1/3" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
    )
  }

  if (error) {
-    return (
-      <Card>
-        <CardContent className="p-6">
-          <p className="text-destructive">{error}</p>
-        </CardContent>
-      </Card>
-    )
+    return <p className="py-4 text-sm text-destructive">{error}</p>
  }

  if (!report) {
@@ -44,95 +49,71 @@ export function PreflightStep({ report, isLoading, error, onContinue }: Prefligh
  }

  return (
-    <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <CardTitle className="text-base">{report.period.name}</CardTitle>
-              <p className="text-sm text-muted-foreground tabular-nums">
-                {report.period.period_start}: {report.period.period_end}
-              </p>
-            </div>
-            {report.ready ? (
-              <Badge variant="success" className="gap-1">
-                <CheckCircle2 className="h-3.5 w-3.5" /> Redo för bokslut
-              </Badge>
-            ) : (
-              <Badge variant="destructive" className="gap-1">
-                <XCircle className="h-3.5 w-3.5" /> Inte redo
-              </Badge>
-            )}
-          </div>
-        </CardHeader>
-      </Card>
+    <div className="space-y-8">
+      {/* Period line: muted text for the normal state, chip only when the
+          period deviates (design.md: chips mark exceptions). */}
+      <div className="flex flex-wrap items-baseline justify-between gap-3 px-1">
+        <div className="flex items-baseline gap-3">
+          <h2 className="font-sans text-sm font-medium">{report.period.name}</h2>
+          <span className="text-xs tabular-nums text-muted-foreground">
+            {report.period.period_start} till {report.period.period_end}
+          </span>
+        </div>
+        {report.ready ? (
+          <span className="text-xs text-muted-foreground">Redo för bokslut</span>
+        ) : (
+          <Badge variant="destructive" className="font-normal">Inte redo</Badge>
+        )}
+      </div>

      {report.blockers.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <XCircle className="h-4 w-4 text-destructive" />
-              Måste åtgärdas innan bokslut
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {report.blockers.map((blocker, i) => (
-              <BlockerRow key={i} blocker={blocker} report={report} />
-            ))}
-          </CardContent>
-        </Card>
+        <section>
+          <SectionHead icon={<XCircle className="h-3.5 w-3.5 text-destructive" aria-hidden="true" />}>
+            Måste åtgärdas innan bokslut
+          </SectionHead>
+          {report.blockers.map((blocker, i) => (
+            <BlockerRow key={i} blocker={blocker} report={report} />
+          ))}
+        </section>
      )}

      {report.warnings.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground" />
-              Varningar
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            {report.warnings.map((warning, i) => (
-              <p key={i} className="text-sm">
-                {warning}
-              </p>
-            ))}
-          </CardContent>
-        </Card>
+        <section>
+          <SectionHead icon={<AlertTriangle className="h-3.5 w-3.5 text-attn" aria-hidden="true" />}>
+            Varningar
+          </SectionHead>
+          {report.warnings.map((warning, i) => (
+            <p key={i} className="border-b border-border/60 px-1 py-3 text-[13px] leading-5 last:border-b-0">
+              {warning}
+            </p>
+          ))}
+        </section>
      )}

      {report.reminders.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <Info className="h-4 w-4 text-muted-foreground" />
-              Påminnelser
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {report.reminders.map((reminder) => (
-              <div key={reminder.code} className="flex items-start gap-3 text-sm">
-                <span className="mt-1 h-1.5 w-1.5 rounded-full bg-muted-foreground shrink-0" />
-                <div className="flex-1">
-                  <p>{reminder.message}</p>
-                  {reminder.href && (
-                    <Link
-                      href={reminder.href}
-                      className="text-xs text-primary hover:underline"
-                    >
-                      Öppna
-                    </Link>
-                  )}
-                </div>
-              </div>
-            ))}
-          </CardContent>
-        </Card>
+        <section>
+          <SectionHead icon={<Info className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />}>
+            Påminnelser
+          </SectionHead>
+          {report.reminders.map((reminder) => (
+            <div
+              key={reminder.code}
+              className="flex items-baseline justify-between gap-3 border-b border-border/60 px-1 py-3 text-[13px] leading-5 text-muted-foreground last:border-b-0"
+            >
+              <p className="flex-1">{reminder.message}</p>
+              {reminder.href && (
+                <Link href={reminder.href} className={QUIET_LINK_CLASS}>
+                  Öppna
+                </Link>
+              )}
+            </div>
+          ))}
+        </section>
      )}

      <div className="flex justify-end">
-        <Button onClick={onContinue} disabled={!report.ready}>
-          Fortsätt
+        <Button variant="outline" size="sm" onClick={onContinue} disabled={!report.ready}>
+          Nästa: Periodiseringar →
        </Button>
      </div>
    </div>
@@ -162,10 +143,10 @@ function BlockerRow({ blocker, report }: { blocker: string; report: BokslutReadi
  }

  return (
-    <div className="flex items-start justify-between gap-3 text-sm">
+    <div className="flex items-baseline justify-between gap-3 border-b border-border/60 px-1 py-3 text-[13px] leading-5 last:border-b-0">
      <p className="flex-1">{blocker}</p>
      {href && actionLabel && (
-        <Link href={href} className="text-xs text-primary hover:underline shrink-0 mt-0.5">
+        <Link href={href} className={QUIET_LINK_CLASS}>
          {actionLabel}
        </Link>
      )}
@@ -1,10 +1,8 @@
 'use client'

-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { ArrowRight, AlertTriangle } from 'lucide-react'
 import {
  Table,
  TableBody,
@@ -27,23 +25,15 @@ interface PreviewStepProps {
 export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: PreviewStepProps) {
  if (isLoading) {
    return (
-      <Card>
-        <CardContent className="p-6 space-y-3">
-          <Skeleton className="h-6 w-1/3" />
-          <Skeleton className="h-32 w-full" />
-        </CardContent>
-      </Card>
+      <div className="space-y-3">
+        <Skeleton className="h-6 w-1/3" />
+        <Skeleton className="h-32 w-full" />
+      </div>
    )
  }

  if (error) {
-    return (
-      <Card>
-        <CardContent className="p-6">
-          <p className="text-destructive">{error}</p>
-        </CardContent>
-      </Card>
-    )
+    return <p className="py-4 text-sm text-destructive">{error}</p>
  }

  if (!preview) return null
@@ -53,58 +43,49 @@ export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: P

  return (
    <div className="space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Årets resultat</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-baseline justify-between">
-            <div>
-              <p className="text-sm text-muted-foreground">
-                Nettoresultat överförs till {preview.closingAccount} {preview.closingAccountName}
-              </p>
-              {isProfit && <Badge variant="success" className="mt-2">Vinst</Badge>}
-              {isLoss && <Badge variant="destructive" className="mt-2">Förlust</Badge>}
-            </div>
-            <p className="font-display text-3xl tabular-nums">
-              {formatCurrency(preview.netResult)}
-            </p>
-          </div>
-        </CardContent>
-      </Card>
+      <div className="px-1">
+        <p className="font-sans text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          Årets resultat
+        </p>
+        <div className="mt-1 flex items-baseline justify-between gap-4">
+          <p
+            className={`font-display text-2xl tabular-nums tracking-tight ${isLoss ? 'text-destructive' : ''}`}
+          >
+            {formatCurrency(preview.netResult)}
+          </p>
+          {isProfit && <span className="text-xs text-muted-foreground">Vinst</span>}
+          {isLoss && <Badge variant="destructive" className="font-normal">Förlust</Badge>}
+        </div>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Nettoresultat överförs till {preview.closingAccount} {preview.closingAccountName}
+        </p>
+      </div>

      {preview.bolagsskattMissing && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base flex items-center gap-2">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground" />
-              Ingen bolagsskatt är bokförd
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <p className="text-sm">
-              Året visar vinst men ingen skatt på årets resultat (konto 8910) finns bland de konton
-              som stängs. Gå tillbaka till dispositionssteget och boka bolagsskatten innan du
-              verkställer, om inte skattemässigt resultat är noll (t.ex. genom underskottsavdrag,
-              avsättning till periodiseringsfond eller överavskrivningar).
-            </p>
-            <Button variant="outline" size="sm" onClick={onBack}>
-              Till dispositionssteget
-            </Button>
-          </CardContent>
-        </Card>
+        <p className="px-1 text-[12.5px] leading-5 text-attn">
+          Året visar vinst men ingen skatt på årets resultat (konto 8910) finns bland de konton
+          som stängs. Gå tillbaka till dispositionssteget och boka bolagsskatten innan du
+          verkställer, om inte skattemässigt resultat är noll (t.ex. genom underskottsavdrag,
+          avsättning till periodiseringsfond eller överavskrivningar).{' '}
+          <button type="button" onClick={onBack} className="underline underline-offset-2 hover:opacity-80">
+            Till dispositionssteget
+          </button>
+        </p>
      )}

      {preview.currencyRevaluation && preview.currencyRevaluation.items.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Kursrevaluering (ÅRL 4:13)</CardTitle>
-            <p className="text-sm text-muted-foreground">
-              Öppna fordringar/skulder i utländsk valuta värderas om till balansdagens kurs innan bokslut.
-              Detta sker automatiskt som en del av verkställandet.
-            </p>
-          </CardHeader>
-          <CardContent>
+        <section>
+          <div className="mb-1 flex items-center gap-2 px-1">
+            <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Kursrevaluering (ÅRL 4:13)
+            </h3>
+            <div className="h-px flex-1 bg-border/60" />
+          </div>
+          <p className="px-1 text-xs leading-5 text-muted-foreground">
+            Öppna fordringar/skulder i utländsk valuta värderas om till balansdagens kurs innan
+            bokslut. Detta sker automatiskt som en del av verkställandet.
+          </p>
+          <div className="px-1 pt-4">
            <div className="grid grid-cols-3 gap-4 text-sm">
              <div>
                <p className="text-muted-foreground text-xs uppercase tracking-wider">Kursvinst</p>
@@ -125,18 +106,20 @@ export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: P
                </p>
              </div>
            </div>
-          </CardContent>
-        </Card>
+          </div>
+        </section>
      )}

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Bokslutsverifikation: förhandsgranskning</CardTitle>
-          <p className="text-sm text-muted-foreground">
-            {preview.closingLines.length} kontorader. Nollställer klass 3-8 mot {preview.closingAccount}.
-          </p>
-        </CardHeader>
-        <CardContent className="p-0">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            Bokslutsverifikation: förhandsgranskning
+          </h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <p className="px-1 pb-2 text-xs leading-5 text-muted-foreground">
+          {preview.closingLines.length} kontorader. Nollställer klass 3-8 mot {preview.closingAccount}.
+        </p>
          <Table>
            <TableHeader>
              <TableRow>
@@ -161,15 +144,14 @@ export function PreviewStep({ preview, isLoading, error, onBack, onContinue }: P
              ))}
            </TableBody>
          </Table>
-        </CardContent>
-      </Card>
+      </section>

      <div className="flex justify-between">
-        <Button variant="outline" onClick={onBack}>
-          Tillbaka
+        <Button variant="outline" size="sm" onClick={onBack}>
+          ← Tillbaka
        </Button>
-        <Button onClick={onContinue}>
-          Verkställ bokslut <ArrowRight className="ml-1 h-4 w-4" />
+        <Button variant="outline" size="sm" onClick={onContinue}>
+          Nästa: Verkställ →
        </Button>
      </div>
    </div>
@@ -1,7 +1,6 @@
 'use client'

 import { useMemo, useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -36,8 +35,7 @@ export function ResultStep({ result }: ResultStepProps) {
  // grouped by BAS class so the user can confirm visually before leaving.
  return (
    <div className="space-y-6">
-      <Card>
-        <CardContent className="p-6 text-center space-y-4">
+      <div className="space-y-4 py-6 text-center">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-success/10">
            <CheckCircle2 className="h-7 w-7 text-success" />
          </div>
@@ -45,14 +43,14 @@ export function ResultStep({ result }: ResultStepProps) {
          <p className="text-muted-foreground">
            Perioden är stängd och en ny räkenskapsperiod har skapats.
          </p>
-        </CardContent>
-      </Card>
+      </div>

-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Resultat</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3 text-sm">
+      <section>
+        <div className="mb-1 flex items-center gap-2 px-1">
+          <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">Resultat</h3>
+          <div className="h-px flex-1 bg-border/60" />
+        </div>
+        <div className="space-y-3 px-1 pt-2 text-sm">
          <ResultRow
            label="Bokslutsverifikation"
            value={formatVoucher(result.closingEntry)}
@@ -78,12 +76,11 @@ export function ResultStep({ result }: ResultStepProps) {
            />
          )}
          <ResultRow label="Ny räkenskapsperiod" value={result.nextPeriod.name} />
-        </CardContent>
-      </Card>
+        </div>
+      </section>

      {result.resultAppropriationFailed && (
-        <Card className="border-destructive/30 bg-destructive/5">
-          <CardContent className="p-4 flex items-start gap-3">
+        <div className="flex items-start gap-3 px-1 py-2 text-destructive">
            <AlertTriangle className="h-4 w-4 mt-0.5 text-destructive shrink-0" />
            <p className="text-sm">
              <span className="font-medium">
@@ -94,8 +91,7 @@ export function ResultStep({ result }: ResultStepProps) {
              Det måste flyttas till 2098 innan balansräkningen stämmer. Kör om bokslutet
              eller kontakta support: felet är loggat.
            </p>
-          </CardContent>
-        </Card>
+        </div>
      )}

      {continuity && (
@@ -105,8 +101,7 @@ export function ResultStep({ result }: ResultStepProps) {
        />
      )}

-      <Card>
-        <CardContent className="p-6 space-y-4">
+      <section className="space-y-4 px-1">
          <label className="flex items-start gap-3 cursor-pointer">
            <Checkbox
              checked={acknowledged}
@@ -153,8 +148,7 @@ export function ResultStep({ result }: ResultStepProps) {
              </Link>
            </Button>
          </div>
-        </CardContent>
-      </Card>
+      </section>
    </div>
  )
 }
@@ -197,9 +191,9 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
  )

  return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0">
-        <CardTitle className="text-base">IB/UB-avstämning</CardTitle>
+    <section>
+      <div className="mb-3 flex items-center justify-between gap-2 px-1">
+        <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground">IB/UB-avstämning</h3>
        {hasIssues ? (
          <Badge variant="destructive" className="gap-1">
            <AlertTriangle className="h-3 w-3" />
@@ -211,8 +205,8 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
            Stämmer
          </Badge>
        )}
-      </CardHeader>
-      <CardContent className="space-y-4">
+      </div>
+      <div className="space-y-4 px-1">
        <p className="text-sm text-muted-foreground">
          {checkedAccounts} balanskonto(n) jämförda mellan utgående balans i
          stängd period och ingående balans i ny period.
@@ -230,7 +224,7 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
              if (rows.length === 0) return null
              return (
                <div key={klass}>
-                  <h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground mb-2">
+                  <h3 className="font-sans text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
                    Klass {klass}: {klass === 1 ? 'Tillgångar' : 'Skulder & eget kapital'}
                  </h3>
                  <Table>
@@ -280,7 +274,7 @@ function ContinuityPanel({ discrepancies, checkedAccounts }: ContinuityPanelProp
            })}
          </div>
        )}
-      </CardContent>
-    </Card>
+      </div>
+    </section>
  )
 }