From 54aff1ee1b21b1b6e12cb056cdd1569086820116 Mon Sep 17 00:00:00 2001
From: Joel Wedemire <joel@wedemire.com>
Date: Thu, 9 Apr 2026 08:44:29 -0700
Subject: [PATCH] feat(ticketing): implement mobile-responsive inbox UX

---
 resources/js/Pages/Ticketing/Index.vue | 256 +++++++++++++++----------
 1 file changed, 158 insertions(+), 98 deletions(-)

diff --git a/resources/js/Pages/Ticketing/Index.vue b/resources/js/Pages/Ticketing/Index.vue
index 1ac8123..80ed2e2 100644
--- a/resources/js/Pages/Ticketing/Index.vue
+++ b/resources/js/Pages/Ticketing/Index.vue
@@ -1,39 +1,51 @@
 <template>
-  <div class="flex h-screen overflow-hidden bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
+  <div class="flex h-screen overflow-hidden bg-gray-100 text-gray-900">
 
     <!-- Bootstrap / first-run state -->
     <div v-if="isBootstrap" class="flex flex-col items-center justify-center w-full h-full text-center px-6">
       <div class="max-w-md">
         <div class="text-5xl mb-4">🎫</div>
-        <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100 mb-2">Ticketing isn’t set up yet</h2>
-        <p class="text-slate-500 dark:text-slate-400 mb-6">Create your first group in Settings to get started. Default priorities will be seeded automatically.</p>
+        <h2 class="text-2xl font-bold text-gray-800 mb-2">Ticketing isn’t set up yet</h2>
+        <p class="text-gray-500 mb-6">Create your first group in Settings to get started. Default priorities will be seeded automatically.</p>
         <Link :href="route('ticketing.settings')" class="inline-block bg-indigo-600 text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-700 transition">Go to Settings</Link>
       </div>
     </div>
 
     <template v-else>
-    <aside class="hidden w-72 shrink-0 border-r border-slate-200 bg-white/90 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90 lg:flex lg:flex-col">
-      <div class="border-b border-slate-200 p-5 dark:border-slate-800">
+    <aside
+      class="w-full shrink-0 border-r border-gray-200 bg-white/90 backdrop-blur lg:flex lg:w-72 lg:flex-col"
+      :class="showSidebar ? 'flex flex-col' : 'hidden'"
+    >
+      <div class="border-b border-gray-200 p-5">
         <div class="flex items-center justify-between gap-3">
           <div>
-            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">Shared inbox</p>
+            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-gray-400">Shared inbox</p>
             <h1 class="mt-1 text-2xl font-semibold tracking-tight">Ticketing</h1>
           </div>
-          <Link
-            :href="route('ticketing.create')"
-            class="inline-flex h-10 items-center justify-center rounded-xl bg-slate-900 px-4 text-sm font-medium text-white transition hover:bg-slate-700 dark:bg-indigo-500 dark:hover:bg-indigo-400"
-          >
-            New
-          </Link>
+          <div class="flex items-center gap-2">
+            <button
+              type="button"
+              class="inline-flex h-10 items-center justify-center rounded-xl border border-gray-200 px-4 text-sm font-medium text-gray-600 transition hover:bg-gray-100 lg:hidden"
+              @click="showSidebar = false"
+            >
+              Done
+            </button>
+            <Link
+              :href="route('ticketing.create')"
+              class="inline-flex h-10 items-center justify-center rounded-xl bg-gray-900 px-4 text-sm font-medium text-white transition hover:bg-gray-700:bg-indigo-400"
+            >
+              New
+            </Link>
+          </div>
         </div>
       </div>
 
       <div class="flex-1 space-y-6 overflow-y-auto p-5">
         <section class="space-y-2">
-          <label class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Group switcher</label>
+          <label class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Group switcher</label>
           <select
             v-model="activeGroupId"
-            class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm shadow-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:border-slate-700 dark:bg-slate-800 dark:focus:border-indigo-500 dark:focus:ring-indigo-500/20"
+            class="w-full rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm shadow-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100:border-indigo-500:ring-indigo-500/20"
             @change="applyFilters({ group_id: normalizeNullable(activeGroupId) })"
           >
             <option :value="null">All groups</option>
@@ -43,8 +55,8 @@
 
         <section class="space-y-2">
           <div class="flex items-center justify-between">
-            <h2 class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Views</h2>
-            <span class="text-xs text-slate-400">{{ filteredTickets.length }}</span>
+            <h2 class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Views</h2>
+            <span class="text-xs text-gray-400">{{ filteredTickets.length }}</span>
           </div>
 
           <button
@@ -53,14 +65,14 @@
             type="button"
             class="flex w-full items-center justify-between rounded-2xl px-3 py-3 text-sm transition"
             :class="currentFilter === view.key
-              ? 'bg-slate-900 text-white shadow-sm dark:bg-indigo-500'
-              : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'"
+              ? 'bg-gray-900 text-white shadow-sm'
+              : 'text-gray-600 hover:bg-gray-100:bg-gray-800'"
             @click="applyFilters({ filter: view.key === 'all' ? 'all' : view.key })"
           >
             <span>{{ view.label }}</span>
             <span
               class="rounded-full px-2 py-0.5 text-xs"
-              :class="currentFilter === view.key ? 'bg-white/15 text-white' : 'bg-slate-200 text-slate-600 dark:bg-slate-800 dark:text-slate-300'"
+              :class="currentFilter === view.key ? 'bg-white/15 text-white' : 'bg-gray-200 text-gray-600'"
             >
               {{ viewCount(view.key) }}
             </span>
@@ -69,11 +81,11 @@
 
         <section class="space-y-3">
           <div class="flex items-center justify-between">
-            <h2 class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Priority</h2>
+            <h2 class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Priority</h2>
             <button
               v-if="filters.priority_id"
               type="button"
-              class="text-xs text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-200"
+              class="text-xs text-gray-400 transition hover:text-gray-600:text-gray-200"
               @click="applyFilters({ priority_id: undefined })"
             >
               Clear
@@ -86,7 +98,7 @@
               :key="priority.id"
               type="button"
               class="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition"
-              :class="Number(filters.priority_id) === priority.id ? 'shadow-sm' : 'border-slate-200 text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800'"
+              :class="Number(filters.priority_id) === priority.id ? 'shadow-sm' : 'border-gray-200 text-gray-600 hover:bg-gray-100:bg-gray-800'"
               :style="priorityChipStyle(priority, Number(filters.priority_id) === priority.id)"
               @click="togglePriority(priority.id)"
             >
@@ -98,11 +110,11 @@
 
         <section class="space-y-3">
           <div class="flex items-center justify-between">
-            <h2 class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Projects</h2>
+            <h2 class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Projects</h2>
             <button
               v-if="filters.project_id"
               type="button"
-              class="text-xs text-slate-400 transition hover:text-slate-600 dark:hover:text-slate-200"
+              class="text-xs text-gray-400 transition hover:text-gray-600:text-gray-200"
               @click="applyFilters({ project_id: undefined })"
             >
               Clear
@@ -113,11 +125,11 @@
             <button
               type="button"
               class="flex w-full items-center justify-between rounded-2xl px-3 py-2.5 text-sm transition"
-              :class="!filters.project_id ? 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'"
+              :class="!filters.project_id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100:bg-gray-800'"
               @click="applyFilters({ project_id: undefined })"
             >
               <span>All projects</span>
-              <span class="text-xs text-slate-400">{{ totalProjectCount }}</span>
+              <span class="text-xs text-gray-400">{{ totalProjectCount }}</span>
             </button>
 
             <button
@@ -125,42 +137,64 @@
               :key="project.id"
               type="button"
               class="flex w-full items-center justify-between rounded-2xl px-3 py-2.5 text-sm transition"
-              :class="Number(filters.project_id) === project.id ? 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'"
+              :class="Number(filters.project_id) === project.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100:bg-gray-800'"
               @click="applyFilters({ project_id: Number(filters.project_id) === project.id ? undefined : project.id })"
             >
               <span class="truncate">{{ project.name }}</span>
-              <span class="rounded-full bg-slate-200 px-2 py-0.5 text-xs text-slate-600 dark:bg-slate-700 dark:text-slate-300">{{ project.ticket_count ?? 0 }}</span>
+              <span class="rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600">{{ project.ticket_count ?? 0 }}</span>
             </button>
           </div>
         </section>
       </div>
     </aside>
 
-    <main class="flex min-w-0 flex-1 border-r border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-925 xl:max-w-[34rem]">
+    <main
+      class="min-w-0 flex-1 border-r border-gray-200 bg-white xl:max-w-[34rem]"
+      :class="showList ? 'flex' : 'hidden lg:flex'"
+    >
       <div class="flex min-w-0 flex-1 flex-col">
-        <div class="border-b border-slate-200 p-5 dark:border-slate-800">
+        <div class="border-b border-gray-200 p-5">
           <div class="flex items-center justify-between gap-3">
-            <div>
-              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Queue</p>
+            <div class="min-w-0 flex-1">
+              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Queue</p>
               <h2 class="mt-1 text-xl font-semibold tracking-tight">{{ currentViewTitle }}</h2>
             </div>
-            <div class="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-300">
-              {{ tickets.total }} total
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="inline-flex h-10 items-center justify-center rounded-xl border border-gray-200 px-4 text-sm font-medium text-gray-600 transition hover:bg-gray-100 lg:hidden"
+                @click="showSidebar = true"
+              >
+                Filters
+              </button>
+              <Link
+                :href="route('ticketing.create')"
+                class="inline-flex h-10 items-center justify-center rounded-xl bg-gray-900 px-4 text-sm font-medium text-white transition hover:bg-gray-700 lg:hidden"
+              >
+                New
+              </Link>
+              <div class="hidden rounded-full border border-gray-200 px-3 py-1 text-xs text-gray-500 sm:block">
+                {{ tickets.total }} total
+              </div>
             </div>
           </div>
 
+          <div class="mt-3 text-xs text-gray-500 sm:hidden">
+            {{ tickets.total }} total
+          </div>
+
           <div class="mt-4 flex flex-col gap-3 sm:flex-row">
             <div class="relative flex-1">
               <input
                 v-model="search"
                 type="text"
                 placeholder="Search tickets, people, or numbers"
-                class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:border-slate-700 dark:bg-slate-800 dark:focus:border-indigo-500 dark:focus:ring-indigo-500/20"
+                class="w-full rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100:border-indigo-500:ring-indigo-500/20"
               />
             </div>
             <select
               v-model="sortBy"
-              class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:border-slate-700 dark:bg-slate-800 dark:focus:border-indigo-500 dark:focus:ring-indigo-500/20"
+              class="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100:border-indigo-500:ring-indigo-500/20"
             >
               <option value="newest">Newest first</option>
               <option value="oldest">Oldest first</option>
@@ -172,9 +206,9 @@
 
         <div class="min-h-0 flex-1 overflow-y-auto">
           <div v-if="filteredTickets.length === 0" class="flex h-full flex-col items-center justify-center px-6 text-center">
-            <div class="rounded-3xl border border-dashed border-slate-300 px-8 py-10 dark:border-slate-700">
-              <p class="text-sm font-medium text-slate-500 dark:text-slate-300">Nothing matches the current filters.</p>
-              <p class="mt-2 text-sm text-slate-400">Try a different view, search, or priority chip.</p>
+            <div class="rounded-3xl border border-dashed border-gray-300 px-8 py-10">
+              <p class="text-sm font-medium text-gray-500">Nothing matches the current filters.</p>
+              <p class="mt-2 text-sm text-gray-400">Try a different view, search, or priority chip.</p>
             </div>
           </div>
 
@@ -182,24 +216,24 @@
             v-for="ticket in filteredTickets"
             :key="ticket.id"
             type="button"
-            class="flex w-full gap-4 border-b border-slate-100 px-5 py-4 text-left transition hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-900/60"
-            :class="selectedTicketId === ticket.id ? 'bg-indigo-50/80 dark:bg-indigo-500/10' : ''"
+            class="flex w-full gap-4 border-b border-gray-100 px-4 py-4 text-left transition hover:bg-gray-50:bg-gray-900/60 sm:px-5"
+            :class="selectedTicketId === ticket.id ? 'bg-indigo-50/80' : ''"
             @click="selectTicket(ticket.id)"
           >
             <div class="w-1 self-stretch rounded-full" :style="{ backgroundColor: ticket.priority?.color || ticket.group?.color || '#cbd5e1' }"></div>
 
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
-                <span class="text-xs font-semibold uppercase tracking-[0.12em] text-slate-400">{{ ticket.number }}</span>
+                <span class="text-xs font-semibold uppercase tracking-[0.12em] text-gray-400">{{ ticket.number }}</span>
                 <span :class="badgeClass(ticket.status)" class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold">{{ statusLabel(ticket.status) }}</span>
                 <span v-if="hasUnread(ticket)" class="h-2.5 w-2.5 rounded-full bg-sky-500"></span>
               </div>
 
-              <p class="mt-2 truncate text-sm font-semibold text-slate-900 dark:text-slate-100">{{ ticket.title }}</p>
+              <p class="mt-2 truncate text-sm font-semibold text-gray-900">{{ ticket.title }}</p>
 
-              <div class="mt-3 flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400">
+              <div class="mt-3 flex items-center gap-3 text-xs text-gray-500">
                 <div class="flex items-center gap-2">
-                  <span class="avatar-ring bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-100">{{ initials(ticket.submitter?.name || ticket.submitter?.email || '?') }}</span>
+                  <span class="avatar-ring bg-gray-200 text-gray-700">{{ initials(ticket.submitter?.name || ticket.submitter?.email || '?') }}</span>
                   <span class="truncate">{{ ticket.submitter?.name || ticket.submitter?.email || 'Unknown' }}</span>
                 </div>
                 <span>•</span>
@@ -208,12 +242,12 @@
             </div>
 
             <div class="flex shrink-0 flex-col items-end justify-between gap-3">
-              <div class="text-xs font-medium text-slate-500 dark:text-slate-400">{{ ticket.priority?.name || 'No priority' }}</div>
+              <div class="text-xs font-medium text-gray-500">{{ ticket.priority?.name || 'No priority' }}</div>
               <div class="flex items-center gap-2">
-                <span class="text-[11px] uppercase tracking-[0.16em] text-slate-400">Assignee</span>
+                <span class="text-[11px] uppercase tracking-[0.16em] text-gray-400">Assignee</span>
                 <span
                   class="avatar-ring"
-                  :class="ticket.assignee ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-200' : 'bg-slate-200 text-slate-500 dark:bg-slate-700 dark:text-slate-300'"
+                  :class="ticket.assignee ? 'bg-indigo-100 text-indigo-700' : 'bg-gray-200 text-gray-500'"
                 >
                   {{ ticket.assignee ? initials(ticket.assignee.name || ticket.assignee.email) : '—' }}
                 </span>
@@ -222,87 +256,100 @@
           </button>
         </div>
 
-        <div v-if="tickets.last_page > 1" class="flex items-center justify-between border-t border-slate-200 px-5 py-3 text-sm dark:border-slate-800">
-          <span class="text-slate-500 dark:text-slate-400">Page {{ tickets.current_page }} of {{ tickets.last_page }}</span>
+        <div v-if="tickets.last_page > 1" class="flex items-center justify-between border-t border-gray-200 px-5 py-3 text-sm">
+          <span class="text-gray-500">Page {{ tickets.current_page }} of {{ tickets.last_page }}</span>
           <div class="flex items-center gap-2">
             <Link
               v-if="tickets.prev_page_url"
               :href="tickets.prev_page_url"
-              class="rounded-xl border border-slate-200 px-3 py-1.5 text-slate-600 transition hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+              class="rounded-xl border border-gray-200 px-3 py-1.5 text-gray-600 transition hover:bg-gray-100:bg-gray-800"
             >Prev</Link>
             <Link
               v-if="tickets.next_page_url"
               :href="tickets.next_page_url"
-              class="rounded-xl border border-slate-200 px-3 py-1.5 text-slate-600 transition hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
+              class="rounded-xl border border-gray-200 px-3 py-1.5 text-gray-600 transition hover:bg-gray-100:bg-gray-800"
             >Next</Link>
           </div>
         </div>
       </div>
     </main>
 
-    <section class="flex min-w-0 flex-1 flex-col bg-slate-50 dark:bg-slate-950/80">
+    <section
+      class="min-w-0 flex-1 flex-col bg-gray-50"
+      :class="showDetail ? 'flex' : 'hidden lg:flex'"
+    >
       <div v-if="!ticketDetail" class="flex h-full items-center justify-center p-8">
-        <div class="max-w-md rounded-3xl border border-dashed border-slate-300 bg-white p-10 text-center shadow-sm dark:border-slate-700 dark:bg-slate-900">
-          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Conversation</p>
+        <div class="max-w-md rounded-3xl border border-dashed border-gray-300 bg-white p-10 text-center shadow-sm">
+          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">Conversation</p>
           <h3 class="mt-3 text-2xl font-semibold tracking-tight">Pick a ticket</h3>
-          <p class="mt-3 text-sm leading-6 text-slate-500 dark:text-slate-400">
+          <p class="mt-3 text-sm leading-6 text-gray-500">
             The right panel becomes the full thread view: metadata, internal notes, and reply composer included. Miracles do happen.
           </p>
         </div>
       </div>
 
       <template v-else>
-        <div class="border-b border-slate-200 bg-white px-6 py-5 dark:border-slate-800 dark:bg-slate-900">
+        <div class="border-b border-gray-200 bg-white px-4 py-5 sm:px-6">
+          <div class="mb-4 lg:hidden">
+            <button
+              type="button"
+              class="inline-flex items-center rounded-xl border border-gray-200 px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100"
+              @click="backToList"
+            >
+              ← Back to list
+            </button>
+          </div>
+
           <div class="flex flex-wrap items-start justify-between gap-4">
             <div class="min-w-0 flex-1">
               <div class="flex flex-wrap items-center gap-2">
                 <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold text-white" :style="{ backgroundColor: ticketDetail.group?.color || '#6366f1' }">{{ ticketDetail.number }}</span>
                 <span :class="badgeClass(ticketDetail.status)" class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold">{{ statusLabel(ticketDetail.status) }}</span>
-                <span v-if="ticketDetail.priority" class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-600 dark:border-slate-700 dark:text-slate-300">
+                <span v-if="ticketDetail.priority" class="inline-flex items-center gap-2 rounded-full border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-600">
                   <span class="h-2.5 w-2.5 rounded-full" :style="{ backgroundColor: ticketDetail.priority.color || '#94a3b8' }"></span>
                   {{ ticketDetail.priority.name }}
                 </span>
               </div>
 
               <div class="mt-3 flex items-start gap-3">
-                <h3 class="min-w-0 flex-1 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">{{ ticketDetail.title }}</h3>
-                <Link :href="route('ticketing.show', { ticket: ticketDetail.id })" class="text-sm font-medium text-indigo-600 transition hover:text-indigo-500 dark:text-indigo-300">Open full page</Link>
+                <h3 class="min-w-0 flex-1 text-2xl font-semibold tracking-tight text-gray-900">{{ ticketDetail.title }}</h3>
+                <Link :href="route('ticketing.show', { ticket: ticketDetail.id })" class="text-sm font-medium text-indigo-600 transition hover:text-indigo-500">Open full page</Link>
               </div>
             </div>
           </div>
 
           <div class="mt-5 grid gap-3 md:grid-cols-5">
-            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
-              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Assignee</div>
+            <div class="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Assignee</div>
               <div class="mt-2 flex items-center gap-2 text-sm font-medium">
-                <span class="avatar-ring bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-200">{{ ticketDetail.assignee ? initials(ticketDetail.assignee.name || ticketDetail.assignee.email) : '—' }}</span>
+                <span class="avatar-ring bg-indigo-100 text-indigo-700">{{ ticketDetail.assignee ? initials(ticketDetail.assignee.name || ticketDetail.assignee.email) : '—' }}</span>
                 <span class="truncate">{{ ticketDetail.assignee?.name || ticketDetail.assignee?.email || 'Unassigned' }}</span>
               </div>
             </div>
 
-            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
-              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Due date</div>
+            <div class="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Due date</div>
               <div class="mt-2 text-sm font-medium">{{ formatDate(ticketDetail.due_date, 'No due date') }}</div>
             </div>
 
-            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
-              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Project</div>
+            <div class="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Project</div>
               <div class="mt-2 truncate text-sm font-medium">{{ ticketDetail.project?.name || 'No project' }}</div>
             </div>
 
-            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
-              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Submitter</div>
+            <div class="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Submitter</div>
               <div class="mt-2 truncate text-sm font-medium">{{ ticketDetail.submitter?.name || ticketDetail.submitter?.email || 'Unknown' }}</div>
             </div>
 
-            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
-              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Opened</div>
+            <div class="rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3">
+              <div class="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Opened</div>
               <div class="mt-2 text-sm font-medium">{{ ageLabel(ticketDetail.created_at) }}</div>
             </div>
           </div>
 
-          <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-slate-500 dark:text-slate-400">
-            <span>Group: <strong class="text-slate-700 dark:text-slate-200">{{ ticketDetail.group?.name || 'Unknown' }}</strong></span>
+          <div class="mt-4 flex flex-wrap items-center gap-3 text-sm text-gray-500">
+            <span>Group: <strong class="text-gray-700">{{ ticketDetail.group?.name || 'Unknown' }}</strong></span>
             <span>•</span>
             <span>{{ ticketDetail.messages?.length || 0 }} messages</span>
             <span>•</span>
@@ -328,13 +375,13 @@
           </div>
         </div>
 
-        <div class="min-h-0 flex-1 overflow-y-auto px-6 py-6">
-          <div v-if="ticketDetail.description" class="mb-6 rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
-            <div class="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-400">Description</div>
-            <p class="whitespace-pre-wrap text-sm leading-6 text-slate-700 dark:text-slate-300">{{ ticketDetail.description }}</p>
+        <div class="min-h-0 flex-1 overflow-y-auto px-4 py-6 sm:px-6">
+          <div v-if="ticketDetail.description" class="mb-6 rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
+            <div class="mb-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-400">Description</div>
+            <p class="whitespace-pre-wrap text-sm leading-6 text-gray-700">{{ ticketDetail.description }}</p>
           </div>
 
-          <div v-if="!ticketDetail.messages?.length" class="rounded-3xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
+          <div v-if="!ticketDetail.messages?.length" class="rounded-3xl border border-dashed border-gray-300 bg-white p-8 text-center text-sm text-gray-500">
             No messages yet.
           </div>
 
@@ -348,7 +395,7 @@
               <div class="max-w-3xl rounded-3xl px-5 py-4 shadow-sm" :class="messageCardClass(message)">
                 <div class="flex flex-wrap items-center gap-2 text-xs font-medium opacity-80">
                   <span class="inline-flex items-center gap-2">
-                    <span class="avatar-ring bg-white/70 text-slate-700 dark:bg-slate-900/60 dark:text-slate-100">{{ initials(messageAuthor(message)) }}</span>
+                    <span class="avatar-ring bg-white/70 text-gray-700">{{ initials(messageAuthor(message)) }}</span>
                     {{ messageRoleLabel(message) }}
                   </span>
                   <span>•</span>
@@ -364,7 +411,7 @@
                     v-for="attachment in message.attachments"
                     :key="attachment.id"
                     :href="route('ticketing.attachments.show', { attachment: attachment.id })"
-                    class="inline-flex items-center gap-2 rounded-full border border-current/20 px-3 py-1.5 text-xs font-medium transition hover:bg-white/30 dark:hover:bg-slate-900/30"
+                    class="inline-flex items-center gap-2 rounded-full border border-current/20 px-3 py-1.5 text-xs font-medium transition hover:bg-white/30:bg-gray-900/30"
                     target="_blank"
                   >
                     📎 {{ attachment.filename }}
@@ -375,18 +422,18 @@
           </div>
         </div>
 
-        <div class="border-t border-slate-200 bg-white px-6 py-5 dark:border-slate-800 dark:bg-slate-900">
-          <div v-if="isAgent" class="mb-4 inline-flex rounded-2xl bg-slate-100 p-1 dark:bg-slate-800">
+        <div class="border-t border-gray-200 bg-white px-4 py-5 sm:px-6">
+          <div v-if="isAgent" class="mb-4 inline-flex rounded-2xl bg-gray-100 p-1">
             <button
               type="button"
               class="rounded-2xl px-4 py-2 text-sm font-medium transition"
-              :class="replyMode === 'reply' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-white' : 'text-slate-500 dark:text-slate-300'"
+              :class="replyMode === 'reply' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500'"
               @click="replyMode = 'reply'"
             >Reply</button>
             <button
               type="button"
               class="rounded-2xl px-4 py-2 text-sm font-medium transition"
-              :class="replyMode === 'internal' ? 'bg-amber-500 text-white shadow-sm' : 'text-slate-500 dark:text-slate-300'"
+              :class="replyMode === 'internal' ? 'bg-amber-500 text-white shadow-sm' : 'text-gray-500'"
               @click="replyMode = 'internal'"
             >Internal note</button>
           </div>
@@ -398,20 +445,20 @@
               required
               class="w-full rounded-3xl border px-4 py-3 text-sm outline-none transition focus:ring-2"
               :class="replyMode === 'internal'
-                ? 'border-amber-300 bg-amber-50 text-amber-950 focus:border-amber-400 focus:ring-amber-100 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-100 dark:focus:ring-amber-500/20'
-                : 'border-slate-200 bg-slate-50 text-slate-900 focus:border-indigo-400 focus:ring-indigo-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-500/20'"
+                ? 'border-amber-300 bg-amber-50 text-amber-950 focus:border-amber-400 focus:ring-amber-100:ring-amber-500/20'
+                : 'border-gray-200 bg-gray-50 text-gray-900 focus:border-indigo-400 focus:ring-indigo-100:border-indigo-500:ring-indigo-500/20'"
               :placeholder="replyMode === 'internal' ? 'Internal note for agents only…' : 'Reply to the thread…'"
             ></textarea>
 
             <div class="flex items-center justify-between gap-3">
-              <div class="text-xs text-slate-400">
+              <div class="text-xs text-gray-400">
                 {{ replyMode === 'internal' ? 'Only agents can see internal notes.' : 'Replies are visible in the ticket thread.' }}
               </div>
               <button
                 type="submit"
                 :disabled="messageForm.processing"
                 class="inline-flex items-center rounded-2xl px-4 py-2 text-sm font-medium text-white transition disabled:cursor-not-allowed disabled:opacity-60"
-                :class="replyMode === 'internal' ? 'bg-amber-500 hover:bg-amber-600' : 'bg-slate-900 hover:bg-slate-700 dark:bg-indigo-500 dark:hover:bg-indigo-400'"
+                :class="replyMode === 'internal' ? 'bg-amber-500 hover:bg-amber-600' : 'bg-gray-900 hover:bg-gray-700:bg-indigo-400'"
               >
                 {{ messageForm.processing ? 'Sending…' : replyMode === 'internal' ? 'Save note' : 'Send reply' }}
               </button>
@@ -445,6 +492,7 @@ const search = ref('')
 const sortBy = ref('newest')
 const activeGroupId = ref(props.filters?.group_id ? Number(props.filters.group_id) : null)
 const replyMode = ref('reply')
+const showSidebar = ref(!props.ticketDetail)
 
 const visibleViews = computed(() => {
   const base = [
@@ -462,6 +510,8 @@ const currentFilter = computed(() => props.filters?.filter || 'all')
 const selectedTicketId = computed(() => props.ticketDetail?.id ?? (props.filters?.detail ? Number(props.filters.detail) : null))
 const currentViewTitle = computed(() => visibleViews.value.find((view) => view.key === currentFilter.value)?.label || 'Tickets')
 const totalProjectCount = computed(() => props.projects.reduce((sum, project) => sum + Number(project.ticket_count || 0), 0))
+const showList = computed(() => !props.ticketDetail)
+const showDetail = computed(() => !!props.ticketDetail)
 
 const filteredTickets = computed(() => {
   const term = search.value.trim().toLowerCase()
@@ -523,6 +573,7 @@ watch(
   () => props.ticketDetail,
   (detail) => {
     replyMode.value = 'reply'
+    showSidebar.value = !detail
     metaForm.defaults({
       status: detail?.status ?? 'open',
       priority_id: detail?.priority_id ?? null,
@@ -584,6 +635,15 @@ function selectTicket(ticketId) {
   })
 }
 
+function backToList() {
+  router.get(route('ticketing.index'), buildParams({ detail: undefined }), {
+    preserveState: true,
+    preserveScroll: true,
+    replace: true,
+    only: ['ticketDetail', 'detailAgents', 'filters'],
+  })
+}
+
 function saveMeta() {
   if (!props.ticketDetail) return
 
@@ -631,12 +691,12 @@ function initials(value) {
 
 function badgeClass(status) {
   return {
-    open: 'bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-200',
-    in_progress: 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-200',
-    pending: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-200',
-    resolved: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-200',
-    closed: 'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200',
-  }[status] || 'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200'
+    open: 'bg-sky-100 text-sky-700',
+    in_progress: 'bg-violet-100 text-violet-700',
+    pending: 'bg-amber-100 text-amber-700',
+    resolved: 'bg-emerald-100 text-emerald-700',
+    closed: 'bg-gray-200 text-gray-700',
+  }[status] || 'bg-gray-200 text-gray-700'
 }
 
 function priorityChipStyle(priority, active) {
@@ -703,14 +763,14 @@ function messageAlignment(message) {
 
 function messageCardClass(message) {
   if (message.is_internal) {
-    return 'border border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100'
+    return 'border border-amber-200 bg-amber-50 text-amber-950'
   }
 
   if (isSubmitterMessage(message)) {
-    return 'border border-slate-200 bg-white text-slate-800 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100'
+    return 'border border-gray-200 bg-white text-gray-800'
   }
 
-  return 'bg-slate-900 text-white dark:bg-indigo-500'
+  return 'bg-gray-900 text-white'
 }
 
 function isSubmitterMessage(message) {
@@ -733,6 +793,6 @@ function messageAuthor(message) {
 }
 
 .meta-select {
-  @apply w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-500/20;
+  @apply w-full rounded-2xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm outline-none transition focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 focus:ring-indigo-500/20;
 }
 </style>