From 3d02a741478ef5e3fc32b0c6c8566e208558241f Mon Sep 17 00:00:00 2001
From: Jakob Wennberg <149234542+jakobwennberg@users.noreply.github.com>
Date: Wed, 29 Jul 2026 12:33:40 +0200
Subject: [PATCH] refactor(ui): system hygiene sweep from the UI craft audit
 (#1281)

Raw palette: SalaryCalendar was the only file in the salary cluster still
on bg-red-100 / text-amber-800 style classes, with zero dark: variants, so
every absence pill rendered paper-white on a near-black page. All 30 are
now alpha-over-token on the semantic scale, which needs no dark: variant
(the approach badge.tsx already takes). Eight absence types share four
tones, so fill carries a second axis: filled vs outlined separates the
types whose Lucide icon is identical (Heart is parental, pregnancy and
care_relative; Activity is study and other_leave).

Primitives:
- select and dropdown-menu now scale from their trigger via the Radix
  transform-origin variables instead of from their own middle. Dialog stays
  centred: modals are not anchored to a trigger.
- toast used fade-out-80, the one animate-* class with no @utility in
  globals.css, so --tw-exit-opacity fell back to 1 and the toast slid away
  at full opacity. Enter and exit now also share one path per breakpoint
  (top on mobile where the viewport is a full-width bar, right on desktop
  where it is a corner card) using max-sm:/sm: rather than stacking both,
  which would have produced a diagonal.
- slide-over exited on ease-in, which delays the moment the user has
  already decided to leave; it enters on the drawer curve and now leaves
  on it too.
- progress animated transition-all where only transform changes.
- One app-wide TooltipProvider in the root layout. skipDelayDuration is
  provider-scoped, so a provider per instance meant the grace window could
  never fire and every account number in a huvudbok re-paid the full 200ms.

Also: nine hand-rolled animate-pulse placeholders in three different greys
to the Skeleton primitive, 25 CardTitle text-lg to the locked text-base,
two always-on chips to muted text (a chip on every row is not an
exception), the three extensions titles onto the display face, the help
filter chips onto pill geometry, and the dead border-border/60 on the
/import row.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 app/(dashboard)/articles/[id]/page.tsx        | 10 ++--
 .../extensions/[sector]/[extension]/page.tsx  |  2 +-
 app/(dashboard)/extensions/[sector]/page.tsx  |  2 +-
 app/(dashboard)/extensions/page.tsx           |  2 +-
 app/(dashboard)/help/page.tsx                 | 12 ++---
 app/(dashboard)/import/page.tsx               |  2 +-
 app/(dashboard)/invoices/recurring/page.tsx   |  4 +-
 .../KassaflodesanalysClient.tsx               |  3 --
 .../supplier-invoices/[id]/page.tsx           | 16 +++---
 app/(dashboard)/suppliers/[id]/page.tsx       | 10 ++--
 app/layout.tsx                                | 11 ++--
 components/agent/AgentChat.tsx                |  7 +--
 components/agent/AgentSheetProvider.tsx       |  5 +-
 .../extensions/general/CalendarWorkspace.tsx  |  7 +--
 components/reports/BankReconciliationView.tsx |  8 +--
 components/reports/views/index.tsx            | 10 ++--
 components/salary/SalaryCalendar.tsx          | 50 ++++++++++++-------
 .../NewSupplierInvoiceForm.tsx                |  6 +--
 .../transactions/BankSyncStatusChip.tsx       |  3 --
 components/ui/account-number.tsx              |  3 --
 components/ui/dropdown-menu.tsx               |  2 +-
 components/ui/info-tooltip.tsx                |  2 -
 components/ui/progress.tsx                    |  2 +-
 components/ui/select.tsx                      |  2 +-
 components/ui/slide-over.tsx                  |  2 +-
 components/ui/toast.tsx                       |  2 +-
 components/ui/tooltip-provider.tsx            | 22 ++++++++
 27 files changed, 119 insertions(+), 88 deletions(-)
 create mode 100644 components/ui/tooltip-provider.tsx

diff --git a/app/(dashboard)/articles/[id]/page.tsx b/app/(dashboard)/articles/[id]/page.tsx
index e0389f86..15cef32e 100644
--- a/app/(dashboard)/articles/[id]/page.tsx
+++ b/app/(dashboard)/articles/[id]/page.tsx
@@ -242,9 +242,13 @@ export default function ArticleDetailPage({
             <div>
               <h1 className="font-display text-2xl leading-8 tracking-tight">{article.name}</h1>
               <div className="flex items-center gap-2 mt-1">
-                <Badge variant={article.active ? 'success' : 'secondary'}>
-                  {article.active ? t('status_active') : t('status_inactive')}
-                </Badge>
+                {article.active ? (
+                  <span className="text-sm text-muted-foreground">{t('status_active')}</span>
+                ) : (
+                  <Badge variant="outline" className="font-normal">
+                    {t('status_inactive')}
+                  </Badge>
+                )}
                 <span className="text-sm text-muted-foreground tabular-nums">
                   {t(ARTICLE_TYPE_KEY[article.type])}
                   {article.article_number ? ` · #${article.article_number}` : ''}
diff --git a/app/(dashboard)/extensions/[sector]/[extension]/page.tsx b/app/(dashboard)/extensions/[sector]/[extension]/page.tsx
index dee52627..e256fe59 100644
--- a/app/(dashboard)/extensions/[sector]/[extension]/page.tsx
+++ b/app/(dashboard)/extensions/[sector]/[extension]/page.tsx
@@ -76,7 +76,7 @@ export default async function ExtensionDetailPage({
             <Icon className="h-7 w-7 text-primary" />
           </div>
           <div>
-            <h1 className="text-xl font-semibold tracking-tight">{extensionName}</h1>
+            <h1 className="font-display text-2xl leading-8 tracking-tight">{extensionName}</h1>
             <p className="text-sm text-muted-foreground mt-0.5">{extensionDescription}</p>
             <div className="mt-2">
               <CategoryBadge category={definition.category} />
diff --git a/app/(dashboard)/extensions/[sector]/page.tsx b/app/(dashboard)/extensions/[sector]/page.tsx
index db683142..ef339fab 100644
--- a/app/(dashboard)/extensions/[sector]/page.tsx
+++ b/app/(dashboard)/extensions/[sector]/page.tsx
@@ -44,7 +44,7 @@ export default async function SectorExtensionsPage({
           <Icon className="h-6 w-6 text-primary" />
         </div>
         <div>
-          <h1 className="text-xl font-semibold tracking-tight">{sectorName}</h1>
+          <h1 className="font-display text-2xl leading-8 tracking-tight">{sectorName}</h1>
           <p className="text-sm text-muted-foreground mt-0.5">{sectorDescription}</p>
         </div>
       </div>
diff --git a/app/(dashboard)/extensions/page.tsx b/app/(dashboard)/extensions/page.tsx
index 3d43646a..93357d68 100644
--- a/app/(dashboard)/extensions/page.tsx
+++ b/app/(dashboard)/extensions/page.tsx
@@ -18,7 +18,7 @@ export default async function ExtensionsPage() {
   return (
     <div>
       <div className="mb-8">
-        <h1 className="text-xl font-semibold tracking-tight">{t('page_title')}</h1>
+        <h1 className="font-display text-2xl leading-8 tracking-tight">{t('page_title')}</h1>
         <p className="text-sm text-muted-foreground mt-1">
           {t('page_description')}
         </p>
diff --git a/app/(dashboard)/help/page.tsx b/app/(dashboard)/help/page.tsx
index 95267788..4a1b9410 100644
--- a/app/(dashboard)/help/page.tsx
+++ b/app/(dashboard)/help/page.tsx
@@ -350,10 +350,10 @@ export default function HelpPage() {
         <button
           onClick={() => setSelectedCategory(null)}
           className={cn(
-            'px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
+            'rounded-full px-4 py-[7px] text-[13px] transition-colors duration-150',
             selectedCategory === null
               ? 'bg-primary text-primary-foreground'
-              : 'bg-secondary text-muted-foreground hover:text-foreground'
+              : 'bg-secondary/60 text-muted-foreground hover:bg-secondary hover:text-foreground'
           )}
         >
           {t('filter_all')}
@@ -363,10 +363,10 @@ export default function HelpPage() {
             key={key}
             onClick={() => setSelectedCategory(selectedCategory === key ? null : key)}
             className={cn(
-              'px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
+              'rounded-full px-4 py-[7px] text-[13px] transition-colors duration-150',
               selectedCategory === key
                 ? 'bg-primary text-primary-foreground'
-                : 'bg-secondary text-muted-foreground hover:text-foreground'
+                : 'bg-secondary/60 text-muted-foreground hover:bg-secondary hover:text-foreground'
             )}
           >
             {t(config.labelKey)}
@@ -400,7 +400,7 @@ export default function HelpPage() {
       {/* Document templates */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">{t('templates_title')}</CardTitle>
+          <CardTitle className="text-base">{t('templates_title')}</CardTitle>
           <CardDescription>{t('templates_subtitle')}</CardDescription>
         </CardHeader>
         <CardContent>
@@ -438,7 +438,7 @@ export default function HelpPage() {
       {/* External resources */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">{t('external_resources_title')}</CardTitle>
+          <CardTitle className="text-base">{t('external_resources_title')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="grid gap-3 sm:grid-cols-2">
diff --git a/app/(dashboard)/import/page.tsx b/app/(dashboard)/import/page.tsx
index d0792fcd..1ec4fe65 100644
--- a/app/(dashboard)/import/page.tsx
+++ b/app/(dashboard)/import/page.tsx
@@ -2298,7 +2298,7 @@ function ImportRow({
       disabled={disabled}
       aria-expanded={expanded}
       className={cn(
-        'group flex w-full items-center justify-between gap-4 border-b border-border/60 px-1 py-3 text-left',
+        'group flex w-full items-center justify-between gap-4 border-b border-border px-1 py-3 text-left',
         'transition-colors duration-150 hover:bg-secondary/35',
         'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent',
       )}
diff --git a/app/(dashboard)/invoices/recurring/page.tsx b/app/(dashboard)/invoices/recurring/page.tsx
index 87c89618..e1c3e648 100644
--- a/app/(dashboard)/invoices/recurring/page.tsx
+++ b/app/(dashboard)/invoices/recurring/page.tsx
@@ -261,9 +261,9 @@ export default function RecurringInvoicesPage() {
                     <TableCell className="tabular-nums">{formatDate(s.next_run_date)}</TableCell>
                     <TableCell>
                       {s.status === 'active' ? (
-                        <Badge variant="success">{t('status_active')}</Badge>
+                        <span className="text-xs text-muted-foreground">{t('status_active')}</span>
                       ) : (
-                        <Badge variant="secondary">{t('status_paused')}</Badge>
+                        <Badge variant="outline" className="font-normal">{t('status_paused')}</Badge>
                       )}
                     </TableCell>
                     <TableCell className="tabular-nums text-right">
diff --git a/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx b/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
index 93132bb9..83668a1c 100644
--- a/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
+++ b/app/(dashboard)/reports/kassaflodesanalys/KassaflodesanalysClient.tsx
@@ -13,7 +13,6 @@ import { useToast } from '@/components/ui/use-toast'
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/info-tooltip'
 import {
@@ -193,7 +192,6 @@ export function KassaflodesanalysClient() {
             )}
             Ladda ner PDF
           </Button>
-          <TooltipProvider delayDuration={300}>
             <Tooltip>
               <TooltipTrigger asChild>
                 <span>
@@ -205,7 +203,6 @@ export function KassaflodesanalysClient() {
               </TooltipTrigger>
               <TooltipContent>Snart tillgänglig</TooltipContent>
             </Tooltip>
-          </TooltipProvider>
         </div>
       </div>
 
diff --git a/app/(dashboard)/supplier-invoices/[id]/page.tsx b/app/(dashboard)/supplier-invoices/[id]/page.tsx
index b685de19..bff93c5e 100644
--- a/app/(dashboard)/supplier-invoices/[id]/page.tsx
+++ b/app/(dashboard)/supplier-invoices/[id]/page.tsx
@@ -588,7 +588,7 @@ export default function SupplierInvoiceDetailPage() {
       <div className="grid gap-4 md:grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('invoice_info_title')}</CardTitle>
+            <CardTitle className="text-base">{t('invoice_info_title')}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-2 text-sm">
             <div className="flex justify-between">
@@ -629,7 +629,7 @@ export default function SupplierInvoiceDetailPage() {
 
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('amounts_title')}</CardTitle>
+            <CardTitle className="text-base">{t('amounts_title')}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-2 text-sm">
             <div className="flex justify-between">
@@ -666,7 +666,7 @@ export default function SupplierInvoiceDetailPage() {
       {invoice.supplier && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('supplier_section_title')}</CardTitle>
+            <CardTitle className="text-base">{t('supplier_section_title')}</CardTitle>
           </CardHeader>
           <CardContent className="text-sm">
             <Link href={`/suppliers/${invoice.supplier.id}`} className="text-primary hover:underline font-medium">
@@ -683,7 +683,7 @@ export default function SupplierInvoiceDetailPage() {
       {/* Line items */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">{t('rows_title')}</CardTitle>
+          <CardTitle className="text-base">{t('rows_title')}</CardTitle>
         </CardHeader>
         <CardContent>
           {/* Desktop table */}
@@ -766,7 +766,7 @@ export default function SupplierInvoiceDetailPage() {
       {payments.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('payment_history_title')}</CardTitle>
+            <CardTitle className="text-base">{t('payment_history_title')}</CardTitle>
           </CardHeader>
           <CardContent>
             {/* Desktop table */}
@@ -824,7 +824,7 @@ export default function SupplierInvoiceDetailPage() {
       {invoice.document_id && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('document_title')}</CardTitle>
+            <CardTitle className="text-base">{t('document_title')}</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
@@ -844,7 +844,7 @@ export default function SupplierInvoiceDetailPage() {
       {/* Journal entries (sambandskrav) */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">{t('vouchers_title')}</CardTitle>
+          <CardTitle className="text-base">{t('vouchers_title')}</CardTitle>
         </CardHeader>
         <CardContent className="space-y-2 text-sm">
           {invoice.registration_journal_entry_id ? (
@@ -895,7 +895,7 @@ export default function SupplierInvoiceDetailPage() {
       {invoice.notes && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('notes_title')}</CardTitle>
+            <CardTitle className="text-base">{t('notes_title')}</CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-sm text-muted-foreground">{invoice.notes}</p>
diff --git a/app/(dashboard)/suppliers/[id]/page.tsx b/app/(dashboard)/suppliers/[id]/page.tsx
index 21bbed32..4823e491 100644
--- a/app/(dashboard)/suppliers/[id]/page.tsx
+++ b/app/(dashboard)/suppliers/[id]/page.tsx
@@ -126,9 +126,7 @@ export default function SupplierDetailPage() {
     return (
       <div className="space-y-8">
         <Skeleton className="h-8 w-48" />
-        <Card className="animate-pulse">
-          <CardContent className="h-48" />
-        </Card>
+        <Skeleton className="h-48 w-full" />
       </div>
     )
   }
@@ -240,7 +238,7 @@ export default function SupplierDetailPage() {
       <div className="grid gap-4 md:grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('contact_section_title')}</CardTitle>
+            <CardTitle className="text-base">{t('contact_section_title')}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-2 text-sm">
             {supplier.email && <p>{t('email_inline', { email: supplier.email })}</p>}
@@ -252,7 +250,7 @@ export default function SupplierDetailPage() {
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('payment_section_title')}</CardTitle>
+            <CardTitle className="text-base">{t('payment_section_title')}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-2 text-sm">
             {supplier.bankgiro && <p>{t('bankgiro_inline', { value: supplier.bankgiro })}</p>}
@@ -269,7 +267,7 @@ export default function SupplierDetailPage() {
       {/* Invoices */}
       <Card>
         <CardHeader className="flex flex-row items-center justify-between">
-          <CardTitle className="text-lg">{t('invoices_section_title')}</CardTitle>
+          <CardTitle className="text-base">{t('invoices_section_title')}</CardTitle>
           <Link href="/supplier-invoices?new=1">
             <Button size="sm">
               <FileText className="mr-2 h-4 w-4" />
diff --git a/app/layout.tsx b/app/layout.tsx
index 7b192695..1bf28756 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,6 +6,7 @@ import { NextIntlClientProvider } from "next-intl";
 import { getLocale, getMessages } from "next-intl/server";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip-provider";
 import { DeployReloadPrompt } from "@/components/system/DeployReloadPrompt";
 import { ThemeProvider } from "@/components/theme-provider";
 import { SWRProvider } from "@/components/providers/SWRProvider";
@@ -89,10 +90,12 @@ export default async function RootLayout({
             disableTransitionOnChange
           >
             <SWRProvider>
-              {children}
-              <Toaster />
-              <DeployReloadPrompt />
-              <ScrollbarReveal />
+              <TooltipProvider>
+                {children}
+                <Toaster />
+                <DeployReloadPrompt />
+                <ScrollbarReveal />
+              </TooltipProvider>
             </SWRProvider>
           </ThemeProvider>
         </NextIntlClientProvider>
diff --git a/components/agent/AgentChat.tsx b/components/agent/AgentChat.tsx
index 50045729..6a1742cd 100644
--- a/components/agent/AgentChat.tsx
+++ b/components/agent/AgentChat.tsx
@@ -26,6 +26,7 @@ import { getErrorMessage as getUserErrorMessage } from '@/lib/errors/get-error-m
 import type { StoredStagedOperation } from '@/types'
 import type { AgentStatusEvent } from './agent-status'
 import { sendFeedback, type FeedbackSentiment } from './feedback-client'
+import { Skeleton } from '@/components/ui/skeleton'
 
 // Markdown parser loads separately from the chat surface: react-markdown +
 // remark-gfm pull in the whole unified/remark tree.
@@ -1197,9 +1198,9 @@ function SkeletonBubble() {
   return (
     <div className="flex flex-col gap-2 items-start animate-fade-in">
       <div className="max-w-[85%] rounded-lg border border-border bg-card px-4 py-3 space-y-2 w-72">
-        <div className="h-3 rounded bg-muted-foreground/15 animate-pulse w-full" />
-        <div className="h-3 rounded bg-muted-foreground/15 animate-pulse w-[85%]" />
-        <div className="h-3 rounded bg-muted-foreground/15 animate-pulse w-[60%]" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-[85%]" />
+        <Skeleton className="h-3 w-[60%]" />
       </div>
     </div>
   )
diff --git a/components/agent/AgentSheetProvider.tsx b/components/agent/AgentSheetProvider.tsx
index c886243e..f3424534 100644
--- a/components/agent/AgentSheetProvider.tsx
+++ b/components/agent/AgentSheetProvider.tsx
@@ -16,6 +16,7 @@ import {
   type AgentStatus,
   type AgentStatusEvent,
 } from './agent-status'
+import { Skeleton } from '@/components/ui/skeleton'
 
 // The sheet is a lazy chunk, and it used to have no loading state at all: a
 // click on the launcher produced NOTHING until the chunk arrived, then the
@@ -34,8 +35,8 @@ function AgentSheetSkeleton() {
       style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}
     >
       <div className="flex items-center gap-2 border-b border-border px-4 py-4">
-        <div className="h-8 w-8 shrink-0 animate-pulse rounded-full bg-secondary" />
-        <div className="h-4 w-32 animate-pulse rounded bg-secondary" />
+        <Skeleton className="h-8 w-8 shrink-0 rounded-full" />
+        <Skeleton className="h-4 w-32" />
       </div>
     </div>
   )
diff --git a/components/extensions/general/CalendarWorkspace.tsx b/components/extensions/general/CalendarWorkspace.tsx
index b9002c7c..a5a482b1 100644
--- a/components/extensions/general/CalendarWorkspace.tsx
+++ b/components/extensions/general/CalendarWorkspace.tsx
@@ -7,6 +7,7 @@ import { PaymentCalendar } from '@/extensions/general/calendar/components/Paymen
 import type { DeadlineFormValues } from '@/components/deadlines/DeadlineForm'
 import type { WorkspaceComponentProps } from '@/lib/extensions/workspace-registry'
 import type { Invoice, Deadline } from '@/types'
+import { Skeleton } from '@/components/ui/skeleton'
 
 export default function CalendarWorkspace({ userId }: WorkspaceComponentProps) {
   const [invoices, setInvoices] = useState<Invoice[]>([])
@@ -107,9 +108,9 @@ export default function CalendarWorkspace({ userId }: WorkspaceComponentProps) {
 
   if (isLoading) {
     return (
-      <div className="animate-pulse">
-        <div className="h-10 bg-muted rounded w-48 mb-4" />
-        <div className="h-96 bg-muted rounded" />
+      <div className="space-y-4">
+        <Skeleton className="h-10 w-48" />
+        <Skeleton className="h-96 w-full" />
       </div>
     )
   }
diff --git a/components/reports/BankReconciliationView.tsx b/components/reports/BankReconciliationView.tsx
index 73e1d286..28b0ae14 100644
--- a/components/reports/BankReconciliationView.tsx
+++ b/components/reports/BankReconciliationView.tsx
@@ -1019,7 +1019,7 @@ export function BankReconciliationView({ periodId, periodBounds }: BankReconcili
       {dryRunResults && dryRunResults.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">
+            <CardTitle className="text-base">
               Förhandsgranskning: {dryRunResults.length}{' '}
               {dryRunResults.length === 1 ? 'matchning hittad' : 'matchningar hittade'}
             </CardTitle>
@@ -1280,7 +1280,7 @@ export function BankReconciliationView({ periodId, periodBounds }: BankReconcili
       {unmatchedGlLines.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">
+            <CardTitle className="text-base">
               Omatchade verifikationer på <AccountNumber number={accountNumber} /> ({unmatchedGlLines.length})
             </CardTitle>
           </CardHeader>
@@ -1362,7 +1362,7 @@ export function BankReconciliationView({ periodId, periodBounds }: BankReconcili
               ) : (
                 <ChevronRight className="h-4 w-4" />
               )}
-              <CardTitle className="text-lg">
+              <CardTitle className="text-base">
                 Ignorerade transaktioner ({ignoredTx.length})
               </CardTitle>
             </div>
@@ -1427,7 +1427,7 @@ export function BankReconciliationView({ periodId, periodBounds }: BankReconcili
               ) : (
                 <ChevronRight className="h-4 w-4" />
               )}
-              <CardTitle className="text-lg">
+              <CardTitle className="text-base">
                 Matchade transaktioner ({matchedTx.length})
               </CardTitle>
             </div>
diff --git a/components/reports/views/index.tsx b/components/reports/views/index.tsx
index 4e90ca83..f2ee3b07 100644
--- a/components/reports/views/index.tsx
+++ b/components/reports/views/index.tsx
@@ -510,7 +510,7 @@ export function IncomeStatementView({ periodId, dateRange, dimensionFilter = nul
       {/* Revenue */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Rörelseintäkter</CardTitle>
+          <CardTitle className="text-base">Rörelseintäkter</CardTitle>
         </CardHeader>
         <CardContent>
           <ReportSectionTable sections={data.revenue_sections} onNavigateToAccount={onNavigateToAccount} />
@@ -524,7 +524,7 @@ export function IncomeStatementView({ periodId, dateRange, dimensionFilter = nul
       {/* Expenses */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Rörelsekostnader</CardTitle>
+          <CardTitle className="text-base">Rörelsekostnader</CardTitle>
         </CardHeader>
         <CardContent>
           <ReportSectionTable sections={data.expense_sections} negate onNavigateToAccount={onNavigateToAccount} />
@@ -551,7 +551,7 @@ export function IncomeStatementView({ periodId, dateRange, dimensionFilter = nul
       {data.financial_sections.length > 0 && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">Finansiella poster</CardTitle>
+            <CardTitle className="text-base">Finansiella poster</CardTitle>
           </CardHeader>
           <CardContent>
             <ReportSectionTable sections={data.financial_sections} onNavigateToAccount={onNavigateToAccount} />
@@ -648,7 +648,7 @@ export function BalanceSheetView({ periodId, dateRange, onNavigateToAccount }: {
       {/* Assets */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Tillgångar</CardTitle>
+          <CardTitle className="text-base">Tillgångar</CardTitle>
         </CardHeader>
         <CardContent>
           <ReportSectionTable sections={data.asset_sections} onNavigateToAccount={onNavigateToAccount} />
@@ -662,7 +662,7 @@ export function BalanceSheetView({ periodId, dateRange, onNavigateToAccount }: {
       {/* Equity and liabilities */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Eget kapital och skulder</CardTitle>
+          <CardTitle className="text-base">Eget kapital och skulder</CardTitle>
         </CardHeader>
         <CardContent>
           <ReportSectionTable sections={data.equity_liability_sections} onNavigateToAccount={onNavigateToAccount} />
diff --git a/components/salary/SalaryCalendar.tsx b/components/salary/SalaryCalendar.tsx
index e5b75273..6dd53bf8 100644
--- a/components/salary/SalaryCalendar.tsx
+++ b/components/salary/SalaryCalendar.tsx
@@ -81,15 +81,27 @@ interface AbsenceTypeMeta {
   pillClass: string
 }
 
+// Absence tone comes from the semantic scale, never the raw Tailwind palette.
+// Every value is alpha-over-token, which is why none of these need a `dark:`
+// variant: the same class reads correctly on both grounds (the approach
+// components/ui/badge.tsx already takes). The eight types share four tones, so
+// fill carries a second axis: filled vs outlined separates the two types
+// inside a tone whose Lucide icon is identical (Heart is parental, pregnancy
+// and care_relative; Activity is study and other_leave).
+//
+//   terracotta = sick (karens, employer cost)
+//   ochre      = caring for someone else (vab, närstående)
+//   sage       = parental and pregnancy leave
+//   neutral    = the rest (study, unpaid, other)
 const TYPE_META: Record<AbsenceType, AbsenceTypeMeta> = {
-  sick:          { labelKey: 'type_sick',          shortLabelKey: 'type_sick_short',          icon: HeartPulse,   pillClass: 'bg-red-100 text-red-800' },
-  vab:           { labelKey: 'type_vab',           shortLabelKey: 'type_vab_short',           icon: Baby,         pillClass: 'bg-amber-100 text-amber-800' },
-  parental:      { labelKey: 'type_parental',      shortLabelKey: 'type_parental_short',      icon: Heart,        pillClass: 'bg-emerald-100 text-emerald-800' },
-  pregnancy:     { labelKey: 'type_pregnancy',     shortLabelKey: 'type_pregnancy_short',     icon: Heart,        pillClass: 'bg-pink-100 text-pink-800' },
-  care_relative: { labelKey: 'type_care_relative', shortLabelKey: 'type_care_relative_short', icon: Heart,        pillClass: 'bg-blue-100 text-blue-800' },
-  study:         { labelKey: 'type_study',         shortLabelKey: 'type_study_short',         icon: Activity,     pillClass: 'bg-indigo-100 text-indigo-800' },
-  unpaid_leave:  { labelKey: 'type_unpaid_leave',  shortLabelKey: 'type_unpaid_leave_short',  icon: MinusCircle,  pillClass: 'bg-slate-100 text-slate-800' },
-  other_leave:   { labelKey: 'type_other_leave',   shortLabelKey: 'type_other_leave_short',   icon: Activity,     pillClass: 'bg-zinc-100 text-zinc-800' },
+  sick:          { labelKey: 'type_sick',          shortLabelKey: 'type_sick_short',          icon: HeartPulse,   pillClass: 'bg-destructive/10 text-destructive' },
+  vab:           { labelKey: 'type_vab',           shortLabelKey: 'type_vab_short',           icon: Baby,         pillClass: 'bg-warning/15 text-warning-foreground' },
+  care_relative: { labelKey: 'type_care_relative', shortLabelKey: 'type_care_relative_short', icon: Heart,        pillClass: 'border border-warning/40 text-warning-foreground' },
+  parental:      { labelKey: 'type_parental',      shortLabelKey: 'type_parental_short',      icon: Heart,        pillClass: 'bg-success/10 text-success' },
+  pregnancy:     { labelKey: 'type_pregnancy',     shortLabelKey: 'type_pregnancy_short',     icon: Heart,        pillClass: 'border border-success/40 text-success' },
+  study:         { labelKey: 'type_study',         shortLabelKey: 'type_study_short',         icon: Activity,     pillClass: 'bg-secondary text-secondary-foreground' },
+  unpaid_leave:  { labelKey: 'type_unpaid_leave',  shortLabelKey: 'type_unpaid_leave_short',  icon: MinusCircle,  pillClass: 'bg-muted text-muted-foreground' },
+  other_leave:   { labelKey: 'type_other_leave',   shortLabelKey: 'type_other_leave_short',   icon: Activity,     pillClass: 'border border-border text-muted-foreground' },
 }
 
 const TYPE_ORDER: AbsenceType[] = ['sick', 'vab', 'parental', 'pregnancy', 'care_relative', 'study', 'unpaid_leave', 'other_leave']
@@ -422,7 +434,7 @@ export function SalaryCalendar({
               </span>
               <div className="mt-auto flex flex-col items-start gap-0.5">
                 {w && (
-                  <span className="inline-flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-px text-[10px] font-medium text-emerald-800">
+                  <span className="inline-flex items-center gap-0.5 rounded-full bg-secondary px-1.5 py-px text-[10px] font-medium text-secondary-foreground">
                     <Clock className="h-2.5 w-2.5" aria-hidden />
                     <span className="tabular-nums">{w.hours}h</span>
                   </span>
@@ -472,8 +484,8 @@ export function SalaryCalendar({
       <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t px-3 py-2 text-[11px] text-muted-foreground">
         {isHourly && (
           <span className="inline-flex items-center gap-1">
-            <span className="inline-flex h-3 w-3 items-center justify-center rounded-full bg-emerald-100">
-              <Clock className="h-2 w-2 text-emerald-800" aria-hidden />
+            <span className="inline-flex h-3 w-3 items-center justify-center rounded-full bg-secondary">
+              <Clock className="h-2 w-2 text-secondary-foreground" aria-hidden />
             </span>
             <span>{t('worked_time')}</span>
           </span>
@@ -713,11 +725,11 @@ function BulkWorkedDialog({
           </div>
 
           {conflicts.length > 0 && (
-            <div className="space-y-1 rounded-md border border-amber-200 bg-amber-50 p-2 text-xs">
-              <div className="font-medium text-amber-900">
+            <div className="space-y-1 rounded-md border border-warning/40 bg-warning/10 p-2 text-xs">
+              <div className="font-medium text-warning-foreground">
                 {t('conflicts_worked', { count: conflicts.length })}
               </div>
-              <ul className="list-disc space-y-0.5 pl-4 text-amber-800 tabular-nums">
+              <ul className="list-disc space-y-0.5 pl-4 text-warning-foreground tabular-nums">
                 {conflicts.map(c => <li key={c.date}>{c.date}</li>)}
               </ul>
             </div>
@@ -866,11 +878,11 @@ function BulkAbsenceDialog({
           </div>
 
           {conflicts.length > 0 && (
-            <div className="space-y-1 rounded-md border border-amber-200 bg-amber-50 p-2 text-xs">
-              <div className="font-medium text-amber-900">
+            <div className="space-y-1 rounded-md border border-warning/40 bg-warning/10 p-2 text-xs">
+              <div className="font-medium text-warning-foreground">
                 {t('conflicts_absence', { count: conflicts.length })}
               </div>
-              <ul className="list-disc space-y-0.5 pl-4 text-amber-800 tabular-nums">
+              <ul className="list-disc space-y-0.5 pl-4 text-warning-foreground tabular-nums">
                 {conflicts.map(c => <li key={c.date}>{c.date}</li>)}
               </ul>
             </div>
@@ -981,9 +993,9 @@ function DayInspectorDialog({
 
         <div className="space-y-2">
           {isHourly && worked && (
-            <div className="flex items-center justify-between rounded-md border bg-emerald-50 px-3 py-2">
+            <div className="flex items-center justify-between rounded-md border bg-secondary/50 px-3 py-2">
               <div className="flex items-center gap-2 text-sm">
-                <Clock className="h-4 w-4 text-emerald-700" />
+                <Clock className="h-4 w-4 text-muted-foreground" />
                 <div>
                   <div className="font-medium">{t('worked_time')}</div>
                   <div className="text-xs text-muted-foreground tabular-nums">{t('hours_count', { hours: String(worked.hours) })}</div>
diff --git a/components/supplier-invoices/NewSupplierInvoiceForm.tsx b/components/supplier-invoices/NewSupplierInvoiceForm.tsx
index 8f7a7aee..314c1976 100644
--- a/components/supplier-invoices/NewSupplierInvoiceForm.tsx
+++ b/components/supplier-invoices/NewSupplierInvoiceForm.tsx
@@ -1552,7 +1552,7 @@ export default function NewSupplierInvoiceForm({
         {/* Section 1: Faktura */}
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('section_invoice')}</CardTitle>
+            <CardTitle className="text-base">{t('section_invoice')}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
             {/* Eget utlägg-toggle. När den är på bokas verifikatet direkt mot
@@ -1718,7 +1718,7 @@ export default function NewSupplierInvoiceForm({
         {/* Section 2: Kontering */}
         <Card>
           <CardHeader className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-            <CardTitle className="text-lg">{t('section_accounting')}</CardTitle>
+            <CardTitle className="text-base">{t('section_accounting')}</CardTitle>
             <Button
               type="button"
               variant="outline"
@@ -2187,7 +2187,7 @@ export default function NewSupplierInvoiceForm({
             onClick={() => setAdvancedOpen(!advancedOpen)}
           >
             <div className="flex items-center justify-between">
-              <CardTitle className="text-lg">{t('section_other')}</CardTitle>
+              <CardTitle className="text-base">{t('section_other')}</CardTitle>
               <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform ${advancedOpen ? 'rotate-180' : ''}`} />
             </div>
           </CardHeader>
diff --git a/components/transactions/BankSyncStatusChip.tsx b/components/transactions/BankSyncStatusChip.tsx
index 05563cdc..e383faff 100644
--- a/components/transactions/BankSyncStatusChip.tsx
+++ b/components/transactions/BankSyncStatusChip.tsx
@@ -10,7 +10,6 @@ import { useCompany } from '@/contexts/CompanyContext'
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/info-tooltip'
 
@@ -140,7 +139,6 @@ export default function BankSyncStatusChip() {
 
   // healthy
   return (
-    <TooltipProvider delayDuration={300}>
       <Tooltip>
         <TooltipTrigger asChild>
           <span className="inline-flex cursor-help items-center gap-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground">
@@ -160,6 +158,5 @@ export default function BankSyncStatusChip() {
           <div className="text-sm leading-relaxed">{t('bank_sync_latency_hint')}</div>
         </TooltipContent>
       </Tooltip>
-    </TooltipProvider>
   )
 }
diff --git a/components/ui/account-number.tsx b/components/ui/account-number.tsx
index 3614bfa2..385254aa 100644
--- a/components/ui/account-number.tsx
+++ b/components/ui/account-number.tsx
@@ -5,7 +5,6 @@ import {
   Tooltip,
   TooltipTrigger,
   TooltipContent,
-  TooltipProvider,
 } from '@/components/ui/info-tooltip'
 import { cn } from '@/lib/utils'
 
@@ -69,7 +68,6 @@ export function AccountNumber({
   }
 
   return (
-    <TooltipProvider delayDuration={200}>
       <Tooltip>
         <TooltipTrigger asChild>
           <span
@@ -112,6 +110,5 @@ export function AccountNumber({
           </div>
         </TooltipContent>
       </Tooltip>
-    </TooltipProvider>
   )
 }
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 8012e675..3a471958 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -19,7 +19,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[10rem] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-[var(--shadow-md)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "z-50 min-w-[10rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-[var(--shadow-md)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
diff --git a/components/ui/info-tooltip.tsx b/components/ui/info-tooltip.tsx
index 0c785697..4cfdb783 100644
--- a/components/ui/info-tooltip.tsx
+++ b/components/ui/info-tooltip.tsx
@@ -67,7 +67,6 @@ function InfoTooltip({
   const Icon = variant === 'help' ? HelpCircle : Info
 
   return (
-    <TooltipProvider delayDuration={300}>
       <Tooltip>
         <TooltipTrigger asChild>
           {children ? (
@@ -102,7 +101,6 @@ function InfoTooltip({
           <div className="text-sm leading-relaxed">{content}</div>
         </TooltipContent>
       </Tooltip>
-    </TooltipProvider>
   )
 }
 
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
index 5aeda881..931e99e2 100644
--- a/components/ui/progress.tsx
+++ b/components/ui/progress.tsx
@@ -17,7 +17,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 750f5863..b8777d45 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -74,7 +74,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-[var(--shadow-md)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-[8rem] origin-[var(--radix-select-content-transform-origin)] overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-[var(--shadow-md)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/components/ui/slide-over.tsx b/components/ui/slide-over.tsx
index a2ea4a1a..6687a493 100644
--- a/components/ui/slide-over.tsx
+++ b/components/ui/slide-over.tsx
@@ -33,7 +33,7 @@ const SlideOverContent = React.forwardRef<
         'fixed top-[18px] right-[18px] bottom-[18px] z-50 flex w-[480px] max-w-[calc(100vw-36px)] flex-col',
         'rounded-xl border border-border bg-background shadow-[var(--shadow-lg)]',
         'data-[state=open]:animate-in data-[state=open]:slide-in-from-right-full data-[state=open]:fade-in-0 data-[state=open]:duration-300 data-[state=open]:ease-[cubic-bezier(0.32,0.72,0,1)]',
-        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-full data-[state=closed]:fade-out-0 data-[state=closed]:duration-200 data-[state=closed]:ease-in',
+        'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-full data-[state=closed]:fade-out-0 data-[state=closed]:duration-200 data-[state=closed]:ease-[cubic-bezier(0.32,0.72,0,1)]',
         className,
       )}
       {...props}
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index dc62a9ee..f39d3d8f 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -24,7 +24,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-0 max-sm:data-[state=open]:slide-in-from-top-full max-sm:data-[state=closed]:slide-out-to-top-full sm:data-[state=open]:slide-in-from-right-full sm:data-[state=closed]:slide-out-to-right-full",
   {
     variants: {
       variant: {
diff --git a/components/ui/tooltip-provider.tsx b/components/ui/tooltip-provider.tsx
new file mode 100644
index 00000000..1e836e0b
--- /dev/null
+++ b/components/ui/tooltip-provider.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+/**
+ * The single app-wide tooltip provider, mounted once in the root layout.
+ *
+ * `skipDelayDuration` is provider-scoped: it is the grace window during which
+ * a second tooltip opens instantly because one is already open. Mounting a
+ * provider per tooltip instance (which is what AccountNumber, InfoTooltip,
+ * BankSyncStatusChip and KassaflodesanalysClient each used to do) means every
+ * instance sits in its own scope and the grace window can never fire, so
+ * scanning a huvudbok re-pays the full open delay on every single account
+ * number. One provider makes the second and later tooltips instant.
+ */
+export function TooltipProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={200} skipDelayDuration={300}>
+      {children}
+    </TooltipPrimitive.Provider>
+  )
+}