From e4b7b8120ce2fc6f849dac9bab3525acfb564ff6 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Wed, 24 Jun 2026 15:15:15 +0100
Subject: [PATCH] out new baseline

---
 .../views/components/colour-select.blade.php  |  80 +++---
 .../views/components/lookup-table.blade.php   |  28 +-
 .../views/components/project-table.blade.php  |  32 +--
 .../components/repository-table.blade.php     |  24 +-
 .../components/settings-section.blade.php     |  23 +-
 .../views/components/team-table.blade.php     |  28 +-
 .../Helpdesk/Resources/views/index.blade.php  |  16 +-
 .../views/livewire/settings-manager.blade.php | 262 +++++++++---------
 .../GitSpellcheckSettingsUiFilesTest.php      |  23 +-
 Modules/Helpdesk/changelog.yaml               |  11 +
 Modules/Helpdesk/module.json                  |   2 +-
 11 files changed, 271 insertions(+), 258 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/components/colour-select.blade.php b/Modules/Helpdesk/Resources/views/components/colour-select.blade.php
index 17097235..1385c92a 100644
--- a/Modules/Helpdesk/Resources/views/components/colour-select.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/colour-select.blade.php
@@ -11,31 +11,40 @@
     $currentLabel = \Modules\Helpdesk\Support\Color::label($currentValue);
 @endphp
 
-<div {{ $attributes->class('rounded-2xl border border-zinc-200 bg-white/70 p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50') }}>
-    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div class="min-w-0 flex-1 space-y-3">
-            <label class="block text-sm font-semibold text-zinc-800 dark:text-zinc-100">
+<div {{ $attributes->class('rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50') }}>
+    <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
+        <div class="min-w-0 space-y-2">
+            <label class="block text-xs font-bold uppercase tracking-wide text-zinc-600 dark:text-zinc-300">
                 {{ $label }}
             </label>
 
-            <select
-                wire:model.live="{{ $model }}"
-                class="h-11 w-full rounded-xl border border-zinc-300 bg-white px-3 text-sm font-semibold text-zinc-900 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
-            >
-                @foreach ($options as $key => $option)
-                    <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
-                        ● {{ $option['name'] }} — {{ $option['hex'] }}
-                    </option>
-                @endforeach
-            </select>
+            <div class="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
+                <select
+                    wire:model.live="{{ $model }}"
+                    class="h-9 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm font-semibold text-zinc-900 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
+                >
+                    @foreach ($options as $key => $option)
+                        <option value="{{ $key }}" style="color: {{ $option['hex'] }};">
+                            ● {{ $option['name'] }} — {{ $option['hex'] }}
+                        </option>
+                    @endforeach
+                </select>
 
-            <div class="flex flex-wrap items-center gap-2" aria-label="Available Helpdesk colours">
+                <span
+                    class="inline-flex h-9 min-w-28 items-center justify-center rounded-lg px-3 text-xs font-bold shadow-sm ring-1 ring-zinc-900/10 dark:ring-white/10"
+                    style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
+                >
+                    {{ $currentLabel }}
+                </span>
+            </div>
+
+            <div class="flex flex-wrap items-center gap-1.5" aria-label="Available Helpdesk colours">
                 @foreach ($options as $key => $option)
                     <button
                         type="button"
                         wire:click="$set('{{ $model }}', '{{ $key }}')"
                         title="{{ $option['name'] }} {{ $option['hex'] }}"
-                        class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/80 shadow-sm ring-1 ring-zinc-900/10 transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500/40 dark:ring-white/15"
+                        class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/80 shadow-sm ring-1 ring-zinc-900/10 transition hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500/40 dark:ring-white/15"
                         style="background-color: {{ $option['hex'] }}"
                     >
                         <span class="sr-only">Use {{ $option['name'] }}</span>
@@ -44,31 +53,22 @@
             </div>
         </div>
 
-        <div class="flex w-full flex-col gap-3 sm:w-44 sm:items-stretch">
-            <span
-                class="inline-flex h-11 items-center justify-center rounded-xl px-4 text-sm font-bold shadow-sm ring-1 ring-zinc-900/10 dark:ring-white/10"
-                style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
-            >
-                {{ $currentLabel }}
-            </span>
+        <div class="grid grid-cols-[2.75rem_minmax(0,11rem)] items-center gap-2 lg:justify-end">
+            <input
+                type="color"
+                value="{{ $currentHex }}"
+                wire:change="$set('{{ $model }}', $event.target.value)"
+                class="h-9 w-11 cursor-pointer rounded-lg border border-zinc-300 bg-white p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
+                aria-label="Choose a custom hex colour"
+            />
 
-            <div class="grid grid-cols-[3.5rem_minmax(0,1fr)] items-center gap-2">
-                <input
-                    type="color"
-                    value="{{ $currentHex }}"
-                    wire:change="$set('{{ $model }}', $event.target.value)"
-                    class="h-10 w-14 cursor-pointer rounded-xl border border-zinc-300 bg-white p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
-                    aria-label="Choose a custom hex colour"
-                />
-
-                <input
-                    type="text"
-                    wire:model.live.debounce.500ms="{{ $model }}"
-                    class="h-10 w-full rounded-xl border border-zinc-300 bg-white px-3 text-sm text-zinc-900 placeholder:text-zinc-400 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500"
-                    placeholder="#ffffff"
-                    aria-label="Custom hex colour"
-                />
-            </div>
+            <input
+                type="text"
+                wire:model.live.debounce.500ms="{{ $model }}"
+                class="h-9 w-full rounded-lg border border-zinc-300 bg-white px-3 text-xs font-semibold text-zinc-900 placeholder:text-zinc-400 shadow-sm outline-none transition-colors duration-150 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+                placeholder="#ffffff"
+                aria-label="Custom hex colour"
+            />
         </div>
     </div>
 </div>
diff --git a/Modules/Helpdesk/Resources/views/components/lookup-table.blade.php b/Modules/Helpdesk/Resources/views/components/lookup-table.blade.php
index 582c3d4d..7fbce6d4 100644
--- a/Modules/Helpdesk/Resources/views/components/lookup-table.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/lookup-table.blade.php
@@ -3,33 +3,33 @@
         <thead
             class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
             <tr>
-                <th class="px-4 py-3">Name</th>
-                <th class="px-4 py-3">Slug</th>
-                <th class="px-4 py-3">Colour</th>
-                <th class="px-4 py-3">Default</th>
-                <th class="px-4 py-3">Tickets</th>
-                <th class="px-4 py-3 text-right">Actions</th>
+                <th class="px-3 py-2.5">Name</th>
+                <th class="px-3 py-2.5">Slug</th>
+                <th class="px-3 py-2.5">Colour</th>
+                <th class="px-3 py-2.5">Default</th>
+                <th class="px-3 py-2.5">Tickets</th>
+                <th class="px-3 py-2.5 text-right">Actions</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
             @forelse ($items as $item)
                 <tr>
-                    <td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
-                    <td class="px-4 py-3 font-mono text-xs text-zinc-500">{{ $item->slug }}</td>
-                    <td class="px-4 py-3">
+                    <td class="px-3 py-2.5 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
+                    <td class="px-3 py-2.5 font-mono text-xs text-zinc-500">{{ $item->slug }}</td>
+                    <td class="px-3 py-2.5">
                         <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
                             <span class="h-3 w-3 rounded-full" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($item->color) }}"></span>
                             {{ \Illuminate\Support\Str::of(\Modules\Helpdesk\Support\Color::normalise($item->color))->headline() }}
                         </span>
                     </td>
-                    <td class="px-4 py-3">
+                    <td class="px-3 py-2.5">
                         <flux:badge color="{{ $item->is_default ?? false ? 'emerald' : 'zinc' }}">
                             {{ $item->is_default ?? false ? 'Default' : 'No' }}
                         </flux:badge>
                     </td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
-                    <td class="px-4 py-3 text-right">
-                        <div class="flex justify-end gap-2">
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
+                    <td class="px-3 py-2.5 text-right">
+                        <div class="flex justify-end gap-1.5">
                             <button type="button" wire:click="{{ $edit }}({{ $item->id }})"
                                 class="hd-btn hd-btn-sm hd-btn-blue">Edit</button>
                             <button type="button" wire:click="{{ $delete }}({{ $item->id }})"
@@ -39,7 +39,7 @@
                 </tr>
             @empty
                 <tr>
-                    <td colspan="6" class="px-4 py-10 text-center text-zinc-500">No records yet.</td>
+                    <td colspan="6" class="px-3 py-8 text-center text-zinc-500">No records yet.</td>
                 </tr>
             @endforelse
         </tbody>
diff --git a/Modules/Helpdesk/Resources/views/components/project-table.blade.php b/Modules/Helpdesk/Resources/views/components/project-table.blade.php
index 4a8f7d9d..c7af1cbe 100644
--- a/Modules/Helpdesk/Resources/views/components/project-table.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/project-table.blade.php
@@ -3,34 +3,34 @@
         <thead
             class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
             <tr>
-                <th class="px-4 py-3">Project</th>
-                <th class="px-4 py-3">Company</th>
-                <th class="px-4 py-3">Team</th>
-                <th class="px-4 py-3">Colour</th>
-                <th class="px-4 py-3">Default</th>
-                <th class="px-4 py-3">Tickets</th>
-                <th class="px-4 py-3 text-right">Actions</th>
+                <th class="px-3 py-2.5">Project</th>
+                <th class="px-3 py-2.5">Company</th>
+                <th class="px-3 py-2.5">Team</th>
+                <th class="px-3 py-2.5">Colour</th>
+                <th class="px-3 py-2.5">Default</th>
+                <th class="px-3 py-2.5">Tickets</th>
+                <th class="px-3 py-2.5 text-right">Actions</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
             @forelse ($items as $item)
                 <tr>
-                    <td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->title }}</td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->company?->name ?? 'Global' }}</td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->team?->name ?? 'No team' }}</td>
-                    <td class="px-4 py-3">
+                    <td class="px-3 py-2.5 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->title }}</td>
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->company?->name ?? 'Global' }}</td>
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->team?->name ?? 'No team' }}</td>
+                    <td class="px-3 py-2.5">
                         <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
                             <span class="h-3 w-3 rounded-full" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($item->color) }}"></span>
                             {{ \Illuminate\Support\Str::of(\Modules\Helpdesk\Support\Color::normalise($item->color))->headline() }}
                         </span>
                     </td>
-                    <td class="px-4 py-3">
+                    <td class="px-3 py-2.5">
                         <flux:badge color="{{ $item->is_default ?? false ? 'emerald' : 'zinc' }}">
                             {{ $item->is_default ?? false ? 'Default' : 'No' }}</flux:badge>
                     </td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
-                    <td class="px-4 py-3 text-right">
-                        <div class="flex justify-end gap-2"><button type="button"
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
+                    <td class="px-3 py-2.5 text-right">
+                        <div class="flex justify-end gap-1.5"><button type="button"
                                 wire:click="editProject({{ $item->id }})"
                                 class="hd-btn hd-btn-sm hd-btn-blue">Edit</button><button type="button"
                                 wire:click="deleteProject({{ $item->id }})"
@@ -39,7 +39,7 @@
                 </tr>
             @empty
                 <tr>
-                    <td colspan="7" class="px-4 py-10 text-center text-zinc-500">No projects yet.</td>
+                    <td colspan="7" class="px-3 py-8 text-center text-zinc-500">No projects yet.</td>
                 </tr>
             @endforelse
         </tbody>
diff --git a/Modules/Helpdesk/Resources/views/components/repository-table.blade.php b/Modules/Helpdesk/Resources/views/components/repository-table.blade.php
index 875bea96..8c590c47 100644
--- a/Modules/Helpdesk/Resources/views/components/repository-table.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/repository-table.blade.php
@@ -3,22 +3,22 @@
         <thead
             class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
             <tr>
-                <th class="px-4 py-3">Name</th>
-                <th class="px-4 py-3">Provider</th>
-                <th class="px-4 py-3">Project</th>
-                <th class="px-4 py-3">Commits</th>
-                <th class="px-4 py-3 text-right">Actions</th>
+                <th class="px-3 py-2.5">Name</th>
+                <th class="px-3 py-2.5">Provider</th>
+                <th class="px-3 py-2.5">Project</th>
+                <th class="px-3 py-2.5">Commits</th>
+                <th class="px-3 py-2.5 text-right">Actions</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
             @forelse ($items as $item)
                 <tr>
-                    <td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
-                    <td class="px-4 py-3 text-zinc-500">{{ strtoupper($item->provider) }}</td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->project?->title ?? 'No project' }}</td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->commits_count ?? 0 }}</td>
-                    <td class="px-4 py-3 text-right">
-                        <div class="flex justify-end gap-2"><button type="button"
+                    <td class="px-3 py-2.5 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
+                    <td class="px-3 py-2.5 text-zinc-500">{{ strtoupper($item->provider) }}</td>
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->project?->title ?? 'No project' }}</td>
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->commits_count ?? 0 }}</td>
+                    <td class="px-3 py-2.5 text-right">
+                        <div class="flex justify-end gap-1.5"><button type="button"
                                 wire:click="editRepository({{ $item->id }})"
                                 class="hd-btn hd-btn-sm hd-btn-blue">Edit</button><button type="button"
                                 wire:click="deleteRepository({{ $item->id }})"
@@ -28,7 +28,7 @@
                 </tr>
             @empty
                 <tr>
-                    <td colspan="5" class="px-4 py-10 text-center text-zinc-500">No repositories yet.</td>
+                    <td colspan="5" class="px-3 py-8 text-center text-zinc-500">No repositories yet.</td>
                 </tr>
             @endforelse
         </tbody>
diff --git a/Modules/Helpdesk/Resources/views/components/settings-section.blade.php b/Modules/Helpdesk/Resources/views/components/settings-section.blade.php
index 8a626587..30748359 100644
--- a/Modules/Helpdesk/Resources/views/components/settings-section.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/settings-section.blade.php
@@ -5,28 +5,29 @@
 
 <section
     {{ $attributes->merge([
-        'class' => 'overflow-hidden rounded-3xl border border-zinc-700 bg-zinc-900 shadow-sm ring-1 ring-white/10',
+        'class' => 'overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm ring-1 ring-zinc-900/5 dark:border-zinc-700 dark:bg-zinc-900 dark:ring-white/10',
     ]) }}>
-    <div class="border-b border-zinc-700 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-5 py-4 text-white">
-        <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+    <div class="border-b border-zinc-200 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-4 py-3 text-white dark:border-zinc-700">
+        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <div class="min-w-0">
-                <p class="text-[10px] font-black uppercase tracking-[0.24em] text-blue-200">Configuration</p>
-                <h2 class="mt-1 text-lg font-extrabold tracking-tight text-white">{{ $title }}</h2>
-                <p class="mt-1 max-w-3xl text-sm font-medium leading-6 text-blue-100/90">{{ $description }}</p>
+                <p class="text-[10px] font-black uppercase tracking-[0.22em] text-blue-200">Configuration</p>
+                <h2 class="mt-0.5 text-base font-bold tracking-tight text-white">{{ $title }}</h2>
+                <p class="mt-1 max-w-3xl text-xs font-medium leading-5 text-blue-100/90 sm:text-sm">{{ $description }}</p>
             </div>
-            <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/10 text-blue-100 shadow-inner">
-                <i class="fa-solid fa-sliders text-sm" aria-hidden="true"></i>
+
+            <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/10 text-blue-100 shadow-inner">
+                <i class="fa-solid fa-sliders text-xs" aria-hidden="true"></i>
             </span>
         </div>
     </div>
 
-    <div class="border-b border-zinc-800 bg-zinc-950/45 px-4 py-5 sm:px-5">
-        <div class="mx-auto max-w-7xl rounded-2xl border border-zinc-700 bg-zinc-900/90 p-4 shadow-sm sm:p-5 [&_input:not([type='checkbox']):not([type='radio']):not([type='color'])]:min-h-11 [&_textarea]:min-h-24 [&_textarea]:leading-6">
+    <div class="border-b border-zinc-200 bg-zinc-50 px-3 py-3 dark:border-zinc-800 dark:bg-zinc-950/45 sm:px-4">
+        <div class="mx-auto max-w-7xl rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/90 sm:p-4 [&_input:not([type='checkbox']):not([type='radio']):not([type='color'])]:min-h-9 [&_textarea]:min-h-20 [&_textarea]:leading-6">
             {{ $form }}
         </div>
     </div>
 
-    <div class="bg-zinc-900">
+    <div class="bg-white dark:bg-zinc-900">
         {{ $slot }}
     </div>
 </section>
diff --git a/Modules/Helpdesk/Resources/views/components/team-table.blade.php b/Modules/Helpdesk/Resources/views/components/team-table.blade.php
index 0479aea5..90a3233a 100644
--- a/Modules/Helpdesk/Resources/views/components/team-table.blade.php
+++ b/Modules/Helpdesk/Resources/views/components/team-table.blade.php
@@ -3,32 +3,32 @@
         <thead
             class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
             <tr>
-                <th class="px-4 py-3">Team</th>
-                <th class="px-4 py-3">Company</th>
-                <th class="px-4 py-3">Colour</th>
-                <th class="px-4 py-3">Default</th>
-                <th class="px-4 py-3">Tickets</th>
-                <th class="px-4 py-3 text-right">Actions</th>
+                <th class="px-3 py-2.5">Team</th>
+                <th class="px-3 py-2.5">Company</th>
+                <th class="px-3 py-2.5">Colour</th>
+                <th class="px-3 py-2.5">Default</th>
+                <th class="px-3 py-2.5">Tickets</th>
+                <th class="px-3 py-2.5 text-right">Actions</th>
             </tr>
         </thead>
         <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
             @forelse ($items as $item)
                 <tr>
-                    <td class="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->company?->name ?? 'Global' }}</td>
-                    <td class="px-4 py-3">
+                    <td class="px-3 py-2.5 font-medium text-zinc-900 dark:text-zinc-100">{{ $item->name }}</td>
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->company?->name ?? 'Global' }}</td>
+                    <td class="px-3 py-2.5">
                         <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-2.5 py-1 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
                             <span class="h-3 w-3 rounded-full" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($item->color) }}"></span>
                             {{ \Illuminate\Support\Str::of(\Modules\Helpdesk\Support\Color::normalise($item->color))->headline() }}
                         </span>
                     </td>
-                    <td class="px-4 py-3">
+                    <td class="px-3 py-2.5">
                         <flux:badge color="{{ $item->is_default ?? false ? 'emerald' : 'zinc' }}">
                             {{ $item->is_default ?? false ? 'Default' : 'No' }}</flux:badge>
                     </td>
-                    <td class="px-4 py-3 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
-                    <td class="px-4 py-3 text-right">
-                        <div class="flex justify-end gap-2"><button type="button"
+                    <td class="px-3 py-2.5 text-zinc-500">{{ $item->tickets_count ?? 0 }}</td>
+                    <td class="px-3 py-2.5 text-right">
+                        <div class="flex justify-end gap-1.5"><button type="button"
                                 wire:click="editTeam({{ $item->id }})"
                                 class="hd-btn hd-btn-sm hd-btn-blue">Edit</button><button type="button"
                                 wire:click="deleteTeam({{ $item->id }})"
@@ -37,7 +37,7 @@
                 </tr>
             @empty
                 <tr>
-                    <td colspan="6" class="px-4 py-10 text-center text-zinc-500">No teams yet.</td>
+                    <td colspan="6" class="px-3 py-8 text-center text-zinc-500">No teams yet.</td>
                 </tr>
             @endforelse
         </tbody>
diff --git a/Modules/Helpdesk/Resources/views/index.blade.php b/Modules/Helpdesk/Resources/views/index.blade.php
index 394bb883..d2230a8b 100644
--- a/Modules/Helpdesk/Resources/views/index.blade.php
+++ b/Modules/Helpdesk/Resources/views/index.blade.php
@@ -5,29 +5,29 @@
         align-items: center;
         justify-content: center;
         gap: .5rem;
-        border-radius: .85rem;
-        padding: .62rem 1.05rem;
-        font-size: .875rem;
+        border-radius: .65rem;
+        padding: .46rem .78rem;
+        font-size: .8125rem;
         line-height: 1.25rem;
         font-weight: 800;
         color: #ffffff !important;
         text-decoration: none !important;
         border: 1px solid rgba(255, 255, 255, .14);
-        box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
+        box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
         transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
     }
 
     .hd-helpdesk-surface .hd-btn:hover,
     .hd-btn:hover {
         transform: translateY(-1px);
-        box-shadow: 0 16px 34px rgba(0, 0, 0, .30);
+        box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
     }
 
     .hd-helpdesk-surface .hd-btn-sm,
     .hd-btn-sm {
-        border-radius: .65rem;
-        padding: .42rem .78rem;
-        font-size: .8125rem;
+        border-radius: .55rem;
+        padding: .32rem .62rem;
+        font-size: .75rem;
     }
 
     .hd-helpdesk-surface .hd-btn-blue,
diff --git a/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php b/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php
index c8c68d38..167d5c30 100644
--- a/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/settings-manager.blade.php
@@ -20,16 +20,16 @@
     $products = collect($products ?? []);
 @endphp
 
-<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-settings-manager">
+<div class="hd-helpdesk-surface space-y-4" dusk="helpdesk-settings-manager">
     <div
-        class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
-        <div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
-            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+        <div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-5 text-white">
+            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                 <div>
                     <p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Helpdesk administration
                     </p>
-                    <h1 class="mt-2 text-3xl font-semibold tracking-tight">Support configuration</h1>
-                    <p class="mt-2 max-w-3xl text-sm text-blue-100/90">Manage lookup data, workflow messages, canned
+                    <h1 class="mt-2 text-2xl font-semibold tracking-tight">Support configuration</h1>
+                    <p class="mt-1 max-w-3xl text-sm text-blue-100/90">Manage lookup data, workflow messages, canned
                         responses, SLA policies, automation rules, checklists, tags and product/service linkage.</p>
                 </div>
 
@@ -42,7 +42,7 @@
             </div>
         </div>
     </div>
-    <div class="grid gap-3 md:grid-cols-4 xl:grid-cols-7">
+    <div class="grid gap-2 md:grid-cols-4 xl:grid-cols-7">
         @foreach ([
         'statuses' => ['label' => 'Statuses', 'count' => $statuses->count()],
         'priorities' => ['label' => 'Priorities', 'count' => $priorities->count()],
@@ -95,10 +95,10 @@
             @endphp
             <a href="{{ route('helpdesk.settings', ['section' => $key]) }}"
                 dusk="helpdesk-settings-section-{{ $key }}"
-                class="rounded-2xl border px-4 py-3 text-left shadow-sm transition hover:-translate-y-0.5"
+                class="rounded-xl border px-3 py-2 text-left shadow-sm transition hover:-translate-y-0.5"
                 style="{{ $sectionStyle }}">
                 <div class="text-xs font-semibold uppercase tracking-wide opacity-70">{{ $item['label'] }}</div>
-                <div class="mt-1 text-2xl font-semibold">{{ $item['count'] }}</div>
+                <div class="mt-0.5 text-xl font-semibold">{{ $item['count'] }}</div>
             </a>
         @endforeach
     </div>
@@ -108,7 +108,7 @@
         <x-helpdesk::settings-section title="Ticket defaults"
             description="Choose the company default used when a new Helpdesk ticket is created. Lookup defaults are configured on the Statuses, Priorities, Categories, Teams and Projects sections.">
             <x-slot:form>
-                <form class="grid gap-4 md:grid-cols-3">
+                <form class="grid gap-3 md:grid-cols-3">
                     <flux:select wire:model="default_helpdesk_company_id" label="Default company">
                         <option value="">No default company</option>
                         @foreach ($companies as $company)
@@ -119,8 +119,8 @@
                     </flux:select>
 
                     <div class="md:col-span-3 flex gap-2">
-                        <flux:button type="button" wire:click="saveDefaultHelpdeskCompany" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">
+                        <flux:button size="sm" type="button" wire:click="saveDefaultHelpdeskCompany" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">
                             Save default company
                         </flux:button>
                     </div>
@@ -140,32 +140,32 @@
         <x-helpdesk::settings-section title="Statuses"
             description="Control workflow stages and mark which statuses close tickets.">
             <x-slot:form>
-                <form wire:submit.prevent="saveStatus" class="grid gap-5 xl:grid-cols-12">
+                <form wire:submit.prevent="saveStatus" class="grid gap-3 xl:grid-cols-12">
                     <div class="xl:col-span-3">
                         <flux:input wire:model="statusForm.name" label="Name" />
                     </div>
                     <div class="xl:col-span-3">
                         <flux:input wire:model="statusForm.slug" label="Slug" placeholder="auto-generated" />
                     </div>
-                    <x-helpdesk::colour-select class="xl:col-span-4" model="statusForm.color" label="Badge colour" :options="$colourOptions" />
+                    <x-helpdesk::colour-select class="xl:col-span-12" model="statusForm.color" label="Badge colour" :options="$colourOptions" />
                     <div class="xl:col-span-2">
                         <flux:input wire:model="statusForm.sort_order" label="Sort" type="number" min="0" />
                     </div>
-                    <label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-3">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-3">
                         <input type="checkbox" wire:model="statusForm.is_closed" class="rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                         Closed status
                     </label>
-                    <label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
                         <input type="checkbox" wire:model="statusForm.is_default"
                             class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                         Default status for new tickets
                     </label>
                     <div class="flex flex-wrap items-center gap-2 xl:col-span-12">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save status
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save status
                         </flux:button>
-                        <flux:button type="button" wire:click="resetStatusForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetStatusForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -177,28 +177,28 @@
     @if ($section === 'priorities')
         <x-helpdesk::settings-section title="Priorities" description="Define ticket urgency levels and display order.">
             <x-slot:form>
-                <form wire:submit.prevent="savePriority" class="grid gap-5 xl:grid-cols-12">
+                <form wire:submit.prevent="savePriority" class="grid gap-3 xl:grid-cols-12">
                     <div class="xl:col-span-3">
                         <flux:input wire:model="priorityForm.name" label="Name" />
                     </div>
                     <div class="xl:col-span-3">
                         <flux:input wire:model="priorityForm.slug" label="Slug" placeholder="auto-generated" />
                     </div>
-                    <x-helpdesk::colour-select class="xl:col-span-4" model="priorityForm.color" label="Badge colour" :options="$colourOptions" />
+                    <x-helpdesk::colour-select class="xl:col-span-12" model="priorityForm.color" label="Badge colour" :options="$colourOptions" />
                     <div class="xl:col-span-2">
                         <flux:input wire:model="priorityForm.sort_order" label="Sort" type="number" min="0" />
                     </div>
-                    <label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
                         <input type="checkbox" wire:model="priorityForm.is_default"
                             class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                         Default for new tickets
                     </label>
                     <div class="flex flex-wrap items-center gap-2 xl:col-span-12">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save priority
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save priority
                         </flux:button>
-                        <flux:button type="button" wire:click="resetPriorityForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetPriorityForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -211,7 +211,7 @@
         <x-helpdesk::settings-section title="Categories"
             description="Group tickets by support area, optionally per company.">
             <x-slot:form>
-                <form wire:submit.prevent="saveCategory" class="grid gap-5 xl:grid-cols-12">
+                <form wire:submit.prevent="saveCategory" class="grid gap-3 xl:grid-cols-12">
                     <div class="xl:col-span-3">
                         <flux:select wire:model="categoryForm.company_id" label="Company">
                             <option value="">Global</option>
@@ -226,21 +226,21 @@
                     <div class="xl:col-span-3">
                         <flux:input wire:model="categoryForm.slug" label="Slug" placeholder="auto-generated" />
                     </div>
-                    <x-helpdesk::colour-select class="xl:col-span-3" model="categoryForm.color" label="Badge colour" :options="$colourOptions" />
+                    <x-helpdesk::colour-select class="xl:col-span-12" model="categoryForm.color" label="Badge colour" :options="$colourOptions" />
                     <div class="xl:col-span-12">
                         <flux:textarea wire:model="categoryForm.description" label="Description" rows="3" />
                     </div>
-                    <label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
                         <input type="checkbox" wire:model="categoryForm.is_default"
                             class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                         Default category for new tickets
                     </label>
                     <div class="flex flex-wrap items-center gap-2 xl:col-span-12">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
                             category</flux:button>
-                        <flux:button type="button" wire:click="resetCategoryForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetCategoryForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -253,7 +253,7 @@
         <x-helpdesk::settings-section title="Teams"
             description="Create support teams under each company and assign projects to them.">
             <x-slot:form>
-                <form wire:submit.prevent="saveTeam" class="grid gap-5 xl:grid-cols-12">
+                <form wire:submit.prevent="saveTeam" class="grid gap-3 xl:grid-cols-12">
                     <div class="xl:col-span-3">
                         <flux:select wire:model="teamForm.company_id" label="Company">
                             <option value="">Global</option>
@@ -268,21 +268,21 @@
                     <div class="xl:col-span-3">
                         <flux:input wire:model="teamForm.slug" label="Slug" placeholder="auto-generated" />
                     </div>
-                    <x-helpdesk::colour-select class="xl:col-span-3" model="teamForm.color" label="Badge colour" :options="$colourOptions" />
+                    <x-helpdesk::colour-select class="xl:col-span-12" model="teamForm.color" label="Badge colour" :options="$colourOptions" />
                     <div class="xl:col-span-12">
                         <flux:textarea wire:model="teamForm.description" label="Description" rows="3" />
                     </div>
-                    <label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
                         <input type="checkbox" wire:model="teamForm.is_default"
                             class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                         Default team for new tickets
                     </label>
                     <div class="flex flex-wrap items-center gap-2 xl:col-span-12">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save team
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save team
                         </flux:button>
-                        <flux:button type="button" wire:click="resetTeamForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetTeamForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -295,7 +295,7 @@
         <x-helpdesk::settings-section title="Projects"
             description="Create company projects and optionally assign them to support teams.">
             <x-slot:form>
-                <form wire:submit.prevent="saveProject" class="grid gap-5 xl:grid-cols-12">
+                <form wire:submit.prevent="saveProject" class="grid gap-3 xl:grid-cols-12">
                     <div class="xl:col-span-2">
                         <flux:select wire:model="projectForm.company_id" label="Company">
                             <option value="">Global</option>
@@ -318,21 +318,21 @@
                     <div class="xl:col-span-2">
                         <flux:input wire:model="projectForm.slug" label="Slug" placeholder="auto-generated" />
                     </div>
-                    <x-helpdesk::colour-select class="xl:col-span-4" model="projectForm.color" label="Badge colour" :options="$colourOptions" />
+                    <x-helpdesk::colour-select class="xl:col-span-12" model="projectForm.color" label="Badge colour" :options="$colourOptions" />
                     <div class="xl:col-span-12">
                         <flux:textarea wire:model="projectForm.description" label="Description" rows="3" />
                     </div>
-                    <label class="flex min-h-12 items-center gap-3 rounded-xl border border-zinc-200 bg-white/70 px-4 py-3 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-200 xl:col-span-4">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
                         <input type="checkbox" wire:model="projectForm.is_default"
                             class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
                         Default project for new tickets
                     </label>
                     <div class="flex flex-wrap items-center gap-2 xl:col-span-12">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save project
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save project
                         </flux:button>
-                        <flux:button type="button" wire:click="resetProjectForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetProjectForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -346,7 +346,7 @@
         <x-helpdesk::settings-section title="Kanban Boards"
             description="Create configurable workflow boards and choose which statuses appear as draggable columns.">
             <x-slot:form>
-                <form wire:submit.prevent="saveBoard" class="grid gap-4 md:grid-cols-7">
+                <form wire:submit.prevent="saveBoard" class="grid gap-3 md:grid-cols-7">
                     <flux:input wire:model="boardForm.name" label="Name" />
                     <flux:input wire:model="boardForm.slug" label="Slug" placeholder="auto-generated" />
                     <flux:input wire:model="boardForm.sort_order" label="Sort" type="number" min="0" />
@@ -356,14 +356,14 @@
                             <option value="{{ $owner->id }}">{{ $owner->name }}</option>
                         @endforeach
                     </flux:select>
-                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200">
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200">
                         <input type="checkbox" wire:model="boardForm.is_default" class="rounded border-zinc-300">
                         Default board
                     </label>
                     <div class="md:col-span-2">
                         <flux:textarea wire:model="boardForm.description" label="Description" rows="2" />
                     </div>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Board
                             columns</label>
                         <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
@@ -379,12 +379,12 @@
                             @endforeach
                         </div>
                     </div>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save board
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save board
                         </flux:button>
-                        <flux:button type="button" wire:click="resetBoardForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetBoardForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -430,12 +430,12 @@
                                 <td class="px-4 py-3 text-right">
                                     <flux:button size="sm" variant="primary"
                                         wire:click="editBoard({{ $boardItem->id }})"
-                                        class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
+                                        class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
                                         Edit</flux:button>
                                     <flux:button size="sm" variant="danger"
                                         wire:click="deleteBoard({{ $boardItem->id }})"
                                         wire:confirm="Delete this board?"
-                                        class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                        class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                                     </flux:button>
                                 </td>
                             </tr>
@@ -455,7 +455,7 @@
         <x-helpdesk::settings-section title="Git repositories"
             description="Configure repositories that can be linked to projects and tickets. Commits can then be stored against tickets for traceability.">
             <x-slot:form>
-                <form wire:submit.prevent="saveRepository" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveRepository" class="grid gap-3 md:grid-cols-6">
                     <flux:select wire:model="repositoryForm.company_id" label="Company">
                         <option value="">Global</option>
                         @foreach ($companies as $company)
@@ -473,16 +473,16 @@
                         placeholder="git, github, gitlab" />
                     <flux:input wire:model="repositoryForm.default_branch" label="Default branch" />
                     <flux:input wire:model="repositoryForm.webhook_secret" label="Webhook secret" />
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:input wire:model="repositoryForm.remote_url" label="Remote URL"
                             placeholder="git@github.com:company/repo.git" />
                     </div>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
                             repository</flux:button>
-                        <flux:button type="button" wire:click="resetRepositoryForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetRepositoryForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -496,7 +496,7 @@
         <x-helpdesk::settings-section title="Workflow messages"
             description="Define the professional email messages sent when tickets are raised, updated, replied to and closed.">
             <x-slot:form>
-                <form wire:submit.prevent="saveWorkflowTemplate" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveWorkflowTemplate" class="grid gap-3 md:grid-cols-6">
                     <flux:input wire:model="workflowForm.name" label="Name" />
                     <flux:select wire:model="workflowForm.event" label="Event">
                         <option value="ticket.created">Ticket raised</option>
@@ -514,27 +514,27 @@
                         placeholder="Optional comma-separated emails" />
                     <flux:input wire:model="workflowForm.bcc" label="BCC"
                         placeholder="Optional comma-separated emails" />
-                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200"><input
                             type="checkbox" wire:model="workflowForm.is_active" class="rounded border-zinc-300">
                         Active</label>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:input wire:model="workflowForm.subject" label="Subject"
                             placeholder="Ticket @{{ ticket.reference }} has been raised" />
                     </div>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:textarea wire:model="workflowForm.html_body" label="HTML email body" rows="8"
                             placeholder="Use tokens like @{{ ticket.reference }}, @{{ ticket.subject }}, @{{ ticket.status }}, @{{ requester.name }}, @{{ ticket.url }}" />
                     </div>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:textarea wire:model="workflowForm.text_body" label="Plain text body" rows="4"
                             placeholder="Optional fallback text" />
                     </div>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
                             workflow message</flux:button>
-                        <flux:button type="button" wire:click="resetWorkflowTemplateForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetWorkflowTemplateForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -567,12 +567,12 @@
                                 <td class="px-4 py-3 text-right">
                                     <flux:button size="sm" variant="ghost"
                                         wire:click="editWorkflowTemplate({{ $template->id }})"
-                                        class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
+                                        class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
                                         Edit</flux:button>
                                     <flux:button size="sm" variant="danger"
                                         wire:click="deleteWorkflowTemplate({{ $template->id }})"
                                         wire:confirm="Delete this workflow message?"
-                                        class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                        class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                                     </flux:button>
                                 </td>
                             </tr>
@@ -593,7 +593,7 @@
         <x-helpdesk::settings-section title="Canned responses"
             description="Save professional reusable replies with macro tokens for ticket, requester, agent, status and URL values.">
             <x-slot:form>
-                <form wire:submit.prevent="saveCannedResponse" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveCannedResponse" class="grid gap-3 md:grid-cols-6">
                     <flux:input wire:model="cannedForm.name" label="Name" />
                     <flux:input wire:model="cannedForm.slug" label="Slug" placeholder="auto-generated" />
                     <flux:input wire:model="cannedForm.sort_order" label="Sort" type="number" min="0" />
@@ -609,22 +609,22 @@
                             <option value="{{ $team->id }}">{{ $team->name }}</option>
                         @endforeach
                     </flux:select>
-                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200"><input
                             type="checkbox" wire:model="cannedForm.is_active" class="rounded border-zinc-300">
                         Active</label>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:input wire:model="cannedForm.subject" label="Optional subject" />
                     </div>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:textarea wire:model="cannedForm.body" label="Reply body" rows="6"
                             placeholder="Hello @{{ requester.name }},&#10;&#10;Your ticket @{{ ticket.reference }} has been reviewed." />
                     </div>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save canned
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save canned
                             response</flux:button>
-                        <flux:button type="button" wire:click="resetCannedResponseForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetCannedResponseForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -646,12 +646,12 @@
                         <div class="mt-4 flex justify-end gap-2">
                             <flux:button size="sm" variant="primary"
                                 wire:click="editCannedResponse({{ $response->id }})"
-                                class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
                             </flux:button>
                             <flux:button size="sm" variant="danger"
                                 wire:click="deleteCannedResponse({{ $response->id }})"
                                 wire:confirm="Delete this canned response?"
-                                class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                             </flux:button>
                         </div>
                     </div>
@@ -668,7 +668,7 @@
         <x-helpdesk::settings-section title="SLA policies"
             description="Define first response and resolution targets used for breach indicators, reporting and ticket cards.">
             <x-slot:form>
-                <form wire:submit.prevent="saveSlaPolicy" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveSlaPolicy" class="grid gap-3 md:grid-cols-6">
                     <flux:input wire:model="slaForm.name" label="Name" />
                     <flux:input wire:model="slaForm.slug" label="Slug" placeholder="auto-generated" />
                     <flux:select wire:model="slaForm.priority_id" label="Priority">
@@ -696,12 +696,12 @@
                     <label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-200"><input
                             type="checkbox" wire:model="slaForm.is_active" class="rounded border-zinc-300">
                         Active</label>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save SLA
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save SLA
                             policy</flux:button>
-                        <flux:button type="button" wire:click="resetSlaPolicyForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetSlaPolicyForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -731,12 +731,12 @@
                                 <td class="px-4 py-3 text-right">
                                     <flux:button size="sm" variant="primary"
                                         wire:click="editSlaPolicy({{ $policy->id }})"
-                                        class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
+                                        class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">
                                         Edit</flux:button>
                                     <flux:button size="sm" variant="danger"
                                         wire:click="deleteSlaPolicy({{ $policy->id }})"
                                         wire:confirm="Delete this SLA policy?"
-                                        class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                        class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                                     </flux:button>
                                 </td>
                         </tr>@empty<tr>
@@ -754,7 +754,7 @@
         <x-helpdesk::settings-section title="Email automation rules"
             description="Match incoming support messages and automatically assign priority, category, team, project, agent and status.">
             <x-slot:form>
-                <form wire:submit.prevent="saveAutomationRule" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveAutomationRule" class="grid gap-3 md:grid-cols-6">
                     <flux:input wire:model="automationForm.name" label="Name" />
                     <flux:input wire:model="automationForm.slug" label="Slug" placeholder="auto-generated" />
                     <flux:input wire:model="automationForm.sort_order" label="Sort" type="number"
@@ -792,15 +792,15 @@
                             <option value="{{ $status->id }}">{{ $status->name }}</option>
                         @endforeach
                     </flux:select>
-                    <label class="flex items-end gap-2 pb-2 text-sm text-zinc-700 dark:text-zinc-200"><input
+                    <label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200"><input
                             type="checkbox" wire:model="automationForm.is_active" class="rounded border-zinc-300">
                         Active</label>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
                             automation rule</flux:button>
-                        <flux:button type="button" wire:click="resetAutomationRuleForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetAutomationRuleForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -814,12 +814,12 @@
                         <div class="mt-4 flex justify-end gap-2">
                             <flux:button size="sm" variant="primary"
                                 wire:click="editAutomationRule({{ $rule->id }})"
-                                class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
                             </flux:button>
                             <flux:button size="sm" variant="danger"
                                 wire:click="deleteAutomationRule({{ $rule->id }})"
                                 wire:confirm="Delete this rule?"
-                                class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                             </flux:button>
                         </div>
                 </div>@empty<div
@@ -834,7 +834,7 @@
         <x-helpdesk::settings-section title="Checklist templates"
             description="Apply repeatable checklist items by category or project and show completion progress on tickets and Kanban cards.">
             <x-slot:form>
-                <form wire:submit.prevent="saveChecklistTemplate" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveChecklistTemplate" class="grid gap-3 md:grid-cols-6">
                     <flux:input wire:model="checklistTemplateForm.name" label="Name" />
                     <flux:input wire:model="checklistTemplateForm.slug" label="Slug" />
                     <flux:select wire:model="checklistTemplateForm.category_id" label="Category">
@@ -852,16 +852,16 @@
                     <label class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox"
                             wire:model="checklistTemplateForm.is_active" class="rounded border-zinc-300">
                         Active</label>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:textarea wire:model="checklistTemplateForm.items_text"
                             label="Checklist items, one per line" rows="6" />
                     </div>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
                             checklist</flux:button>
-                        <flux:button type="button" wire:click="resetChecklistTemplateForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetChecklistTemplateForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -874,12 +874,12 @@
                         <div class="mt-4 flex justify-end gap-2">
                             <flux:button size="sm" variant="primary"
                                 wire:click="editChecklistTemplate({{ $template->id }})"
-                                class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
                             </flux:button>
                             <flux:button size="sm" variant="danger"
                                 wire:click="deleteChecklistTemplate({{ $template->id }})"
                                 wire:confirm="Delete this checklist?"
-                                class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                             </flux:button>
                         </div>
                 </div>@empty<div
@@ -894,20 +894,20 @@
         <x-helpdesk::settings-section title="Ticket tags"
             description="Maintain visible ticket labels for search, triage and Kanban card context.">
             <x-slot:form>
-                <form wire:submit.prevent="saveTag" class="grid gap-5 xl:grid-cols-12">
+                <form wire:submit.prevent="saveTag" class="grid gap-3 xl:grid-cols-12">
                     <div class="xl:col-span-4">
                         <flux:input wire:model="tagForm.name" label="Name" />
                     </div>
                     <div class="xl:col-span-4">
                         <flux:input wire:model="tagForm.slug" label="Slug" />
                     </div>
-                    <x-helpdesk::colour-select class="xl:col-span-4" model="tagForm.color" label="Colour" :options="$colourOptions" />
+                    <x-helpdesk::colour-select class="xl:col-span-12" model="tagForm.color" label="Colour" :options="$colourOptions" />
                     <div class="flex flex-wrap items-center gap-2 xl:col-span-12">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save tag
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save tag
                         </flux:button>
-                        <flux:button type="button" wire:click="resetTagForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetTagForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -920,11 +920,11 @@
                             style="background-color: {{ \Modules\Helpdesk\Support\Color::css($tag->color) }}">{{ $tag->name }}</span>
                         <div class="mt-3 flex gap-2">
                             <flux:button size="sm" variant="primary" wire:click="editTag({{ $tag->id }})"
-                                class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
                             </flux:button>
                             <flux:button size="sm" variant="danger" wire:click="deleteTag({{ $tag->id }})"
                                 wire:confirm="Delete this tag?"
-                                class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                             </flux:button>
                         </div>
                 </div>@empty<div
@@ -939,7 +939,7 @@
         <x-helpdesk::settings-section title="Products and services"
             description="Link tickets to products, services, releases or builds and report support cost/time by product.">
             <x-slot:form>
-                <form wire:submit.prevent="saveProduct" class="grid gap-4 md:grid-cols-6">
+                <form wire:submit.prevent="saveProduct" class="grid gap-3 md:grid-cols-6">
                     <flux:input wire:model="productForm.name" label="Name" />
                     <flux:input wire:model="productForm.slug" label="Slug" />
                     <flux:input wire:model="productForm.type" label="Type" />
@@ -947,15 +947,15 @@
                     <flux:input wire:model="productForm.release_channel" label="Release/build" /><label
                         class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox"
                             wire:model="productForm.is_active" class="rounded border-zinc-300"> Active</label>
-                    <div class="md:col-span-7">
+                    <div class="md:col-span-full">
                         <flux:textarea wire:model="productForm.description" label="Description" rows="3" />
                     </div>
-                    <div class="md:col-span-7 flex gap-2">
-                        <flux:button type="submit" variant="primary"
-                            class="!bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
+                    <div class="md:col-span-full flex gap-2">
+                        <flux:button size="sm" type="submit" variant="primary"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save
                             product/service</flux:button>
-                        <flux:button type="button" wire:click="resetProductForm" variant="ghost"
-                            class="!bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
+                        <flux:button size="sm" type="button" wire:click="resetProductForm" variant="ghost"
+                            class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
                         </flux:button>
                     </div>
                 </form>
@@ -969,12 +969,12 @@
                         <div class="mt-4 flex justify-end gap-2">
                             <flux:button size="sm" variant="primary"
                                 wire:click="editProduct({{ $product->id }})"
-                                class="!bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-blue-600 !text-white hover:!bg-blue-700 focus:!ring-blue-400/60">Edit
                             </flux:button>
                             <flux:button size="sm" variant="danger"
                                 wire:click="deleteProduct({{ $product->id }})"
                                 wire:confirm="Delete this product/service?"
-                                class="!bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
+                                class="!h-8 !rounded-lg !px-2.5 !text-xs !font-semibold !bg-red-600 !text-white hover:!bg-red-700 focus:!ring-red-400/60">Delete
                             </flux:button>
                         </div>
                 </div>@empty<div
diff --git a/Modules/Helpdesk/Tests/Feature/GitSpellcheckSettingsUiFilesTest.php b/Modules/Helpdesk/Tests/Feature/GitSpellcheckSettingsUiFilesTest.php
index 3a8c89f8..ae354ca2 100644
--- a/Modules/Helpdesk/Tests/Feature/GitSpellcheckSettingsUiFilesTest.php
+++ b/Modules/Helpdesk/Tests/Feature/GitSpellcheckSettingsUiFilesTest.php
@@ -61,11 +61,11 @@ final class GitSpellcheckSettingsUiFilesTest extends TestCase
         $settingsSection = base_path('Modules/Helpdesk/Resources/views/components/settings-section.blade.php');
         $contents = file_get_contents($settingsSection) ?: '';
 
-        self::assertStringContainsString('rounded-3xl', $contents);
+        self::assertStringContainsString('rounded-2xl', $contents);
         self::assertStringContainsString('bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900', $contents);
         self::assertStringContainsString('Configuration', $contents);
-        self::assertStringContainsString("[&_input:not([type='checkbox']):not([type='radio']):not([type='color'])]:min-h-11", $contents);
-        self::assertStringContainsString('bg-zinc-950/45', $contents);
+        self::assertStringContainsString("[&_input:not([type='checkbox']):not([type='radio']):not([type='color'])]:min-h-9", $contents);
+        self::assertStringContainsString('dark:bg-zinc-950/45', $contents);
     }
     /**
      * Ensure settings lookup forms stay aligned and avoid oversized colour controls.
@@ -78,15 +78,16 @@ final class GitSpellcheckSettingsUiFilesTest extends TestCase
         $settingsContents = file_get_contents($settingsManager) ?: '';
         $colourContents = file_get_contents($colourSelect) ?: '';
 
-        self::assertStringContainsString('grid gap-5 xl:grid-cols-12', $settingsContents);
-        self::assertStringContainsString('class="xl:col-span-4" model="statusForm.color"', $settingsContents);
-        self::assertStringContainsString('class="xl:col-span-4" model="priorityForm.color"', $settingsContents);
-        self::assertStringContainsString('class="xl:col-span-3" model="categoryForm.color"', $settingsContents);
-        self::assertStringContainsString('class="xl:col-span-3" model="teamForm.color"', $settingsContents);
-        self::assertStringContainsString('class="xl:col-span-4" model="projectForm.color"', $settingsContents);
-        self::assertStringContainsString('class="xl:col-span-4" model="tagForm.color"', $settingsContents);
-        self::assertStringContainsString('grid grid-cols-[3.5rem_minmax(0,1fr)]', $colourContents);
+        self::assertStringContainsString('grid gap-3 xl:grid-cols-12', $settingsContents);
+        self::assertStringContainsString('class="xl:col-span-12" model="statusForm.color"', $settingsContents);
+        self::assertStringContainsString('class="xl:col-span-12" model="priorityForm.color"', $settingsContents);
+        self::assertStringContainsString('class="xl:col-span-12" model="categoryForm.color"', $settingsContents);
+        self::assertStringContainsString('class="xl:col-span-12" model="teamForm.color"', $settingsContents);
+        self::assertStringContainsString('class="xl:col-span-12" model="projectForm.color"', $settingsContents);
+        self::assertStringContainsString('class="xl:col-span-12" model="tagForm.color"', $settingsContents);
+        self::assertStringContainsString('grid grid-cols-[2.75rem_minmax(0,11rem)]', $colourContents);
         self::assertStringContainsString('aria-label="Custom hex colour"', $colourContents);
+        self::assertStringContainsString('h-9 w-full rounded-lg', $colourContents);
         self::assertStringNotContainsString('<flux:input', $colourContents);
     }
 
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index 85f11b18..c25f205e 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -442,3 +442,14 @@
     - Preserved dark-mode surfaces, existing Livewire bindings, save/reset actions, lookup tables, routes and business behaviour.
     - Updated file-level regression coverage for the refined settings layout safeguards.
     - Preserved append-only changelog history.
+
+- version: 1.10.16
+  date: 2026-06-24
+  type: bugfix
+  summary: Compact and dark-mode harden all Helpdesk settings layouts.
+  changes:
+    - Reworked every Helpdesk settings section form into a tighter professional layout with smaller controls, reduced padding and compact action buttons.
+    - Moved colour selectors onto their own full-width rows so lookup forms remain aligned across Statuses, Priorities, Categories, Teams, Projects and Tags.
+    - Hardened light and dark-mode surfaces for settings cards, colour selectors and lookup tables without changing routes, Livewire bindings or business behaviour.
+    - Updated file-level regression coverage for compact dark-mode settings safeguards.
+    - Preserved append-only changelog history.
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index f4873a49..5422520a 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.10.15"
+    "version": "1.10.16"
 }