diff --git a/app/Http/Controllers/PhoneViewController.php b/app/Http/Controllers/PhoneViewController.php
index 49ca8bb..fb1e7b9 100644
--- a/app/Http/Controllers/PhoneViewController.php
+++ b/app/Http/Controllers/PhoneViewController.php
@@ -17,6 +17,11 @@ public function index(Request $request): \Inertia\Response
         $search = $request->input('search');
         $clientFilter = $request->input('client');
 
+        // On full page loads, always start from page 1
+        if (! $request->header('X-Inertia-Partial-Data')) {
+            $request->merge(['pending' => 1, 'processed' => 1]);
+        }
+
         $eagerLoad = [
             'contract' => function ($q) {
                 $q->with([
@@ -97,6 +102,11 @@ public function completedToday(Request $request): \Inertia\Response
         $search = $request->input('search');
         $clientFilter = $request->input('client');
 
+        // On full page loads, always start from page 1
+        if (! $request->header('X-Inertia-Partial-Data')) {
+            $request->merge(['completed' => 1]);
+        }
+
         $start = now()->startOfDay();
         $end = now()->endOfDay();
 
diff --git a/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue b/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
index 764c20f..46fc69b 100644
--- a/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
+++ b/resources/js/Components/PersonInfo/PersonInfoSmsDialog.vue
@@ -25,6 +25,7 @@ import {
 } from "@/Components/ui/select";
 import { Switch } from "@/Components/ui/switch";
 import { Button } from "@/Components/ui/button";
+import { ScrollArea } from "@/Components/ui/scroll-area";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
@@ -452,11 +453,57 @@ const open = computed({
         </DialogDescription>
       </DialogHeader>
 
-      <form @submit.prevent="onSubmit" class="space-y-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <FormField v-slot="{ value, handleChange }" name="profile_id">
+      <ScrollArea class="max-h-[65vh] pr-1">
+        <form @submit.prevent="onSubmit" class="space-y-4 pr-3">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <FormField v-slot="{ value, handleChange }" name="profile_id">
+              <FormItem>
+                <FormLabel>Profil</FormLabel>
+                <Select :model-value="value" @update:model-value="handleChange">
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="—" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem :value="null">—</SelectItem>
+                    <SelectItem v-for="p in pageSmsProfiles" :key="p.id" :value="p.id">
+                      {{ p.name || "Profil #" + p.id }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ value, handleChange }" name="sender_id">
+              <FormItem>
+                <FormLabel>Pošiljatelj</FormLabel>
+                <Select :model-value="value" @update:model-value="handleChange">
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="—" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem :value="null">—</SelectItem>
+                    <SelectItem
+                      v-for="s in sendersForSelectedProfile"
+                      :key="s.id"
+                      :value="s.id"
+                    >
+                      {{ s.name || s.phone || "Sender #" + s.id }}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+          </div>
+
+          <FormField v-slot="{ value, handleChange }" name="contract_uuid">
             <FormItem>
-              <FormLabel>Profil</FormLabel>
+              <FormLabel>Pogodba</FormLabel>
               <Select :model-value="value" @update:model-value="handleChange">
                 <FormControl>
                   <SelectTrigger>
@@ -465,18 +512,22 @@ const open = computed({
                 </FormControl>
                 <SelectContent>
                   <SelectItem :value="null">—</SelectItem>
-                  <SelectItem v-for="p in pageSmsProfiles" :key="p.id" :value="p.id">
-                    {{ p.name || "Profil #" + p.id }}
+                  <SelectItem v-for="c in contractsForCase" :key="c.uuid" :value="c.uuid">
+                    {{ c.reference || c.uuid }}
                   </SelectItem>
                 </SelectContent>
               </Select>
+              <p class="mt-1 text-xs text-gray-500">
+                Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in
+                {account.*} mest.
+              </p>
               <FormMessage />
             </FormItem>
           </FormField>
 
-          <FormField v-slot="{ value, handleChange }" name="sender_id">
+          <FormField v-slot="{ value, handleChange }" name="template_id">
             <FormItem>
-              <FormLabel>Pošiljatelj</FormLabel>
+              <FormLabel>Predloga</FormLabel>
               <Select :model-value="value" @update:model-value="handleChange">
                 <FormControl>
                   <SelectTrigger>
@@ -485,125 +536,77 @@ const open = computed({
                 </FormControl>
                 <SelectContent>
                   <SelectItem :value="null">—</SelectItem>
-                  <SelectItem
-                    v-for="s in sendersForSelectedProfile"
-                    :key="s.id"
-                    :value="s.id"
-                  >
-                    {{ s.name || s.phone || "Sender #" + s.id }}
+                  <SelectItem v-for="t in pageSmsTemplates" :key="t.id" :value="t.id">
+                    {{ t.name || "Predloga #" + t.id }}
                   </SelectItem>
                 </SelectContent>
               </Select>
               <FormMessage />
             </FormItem>
           </FormField>
-        </div>
 
-        <FormField v-slot="{ value, handleChange }" name="contract_uuid">
-          <FormItem>
-            <FormLabel>Pogodba</FormLabel>
-            <Select :model-value="value" @update:model-value="handleChange">
+          <FormField v-slot="{ componentField }" name="message">
+            <FormItem>
+              <FormLabel>Vsebina sporočila</FormLabel>
               <FormControl>
-                <SelectTrigger>
-                  <SelectValue placeholder="—" />
-                </SelectTrigger>
+                <Textarea
+                  rows="4"
+                  placeholder="Vpišite SMS vsebino..."
+                  v-bind="componentField"
+                />
               </FormControl>
-              <SelectContent>
-                <SelectItem :value="null">—</SelectItem>
-                <SelectItem v-for="c in contractsForCase" :key="c.uuid" :value="c.uuid">
-                  {{ c.reference || c.uuid }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <p class="mt-1 text-xs text-gray-500">
-              Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in
-              {account.*} mest.
-            </p>
-            <FormMessage />
-          </FormItem>
-        </FormField>
+              <FormMessage />
+            </FormItem>
+          </FormField>
 
-        <FormField v-slot="{ value, handleChange }" name="template_id">
-          <FormItem>
-            <FormLabel>Predloga</FormLabel>
-            <Select :model-value="value" @update:model-value="handleChange">
-              <FormControl>
-                <SelectTrigger>
-                  <SelectValue placeholder="—" />
-                </SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                <SelectItem :value="null">—</SelectItem>
-                <SelectItem v-for="t in pageSmsTemplates" :key="t.id" :value="t.id">
-                  {{ t.name || "Predloga #" + t.id }}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <FormField v-slot="{ componentField }" name="message">
-          <FormItem>
-            <FormLabel>Vsebina sporočila</FormLabel>
-            <FormControl>
-              <Textarea
-                rows="4"
-                placeholder="Vpišite SMS vsebino..."
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-
-        <!-- Live counters -->
-        <div class="text-xs text-gray-600 flex flex-col gap-1">
-          <div>
-            <span class="font-medium">Znakov:</span>
-            <span class="font-mono">{{ charCount }}</span>
-            <span class="mx-2">|</span>
-            <span class="font-medium">Kodiranje:</span>
-            <span>{{ smsEncoding }}</span>
-            <span class="mx-2">|</span>
-            <span class="font-medium">Deli SMS:</span>
-            <span class="font-mono">{{ segments }}</span>
-            <span class="mx-2">|</span>
-            <span class="font-medium">Krediti:</span>
-            <span class="font-mono">{{ creditsNeeded }}</span>
-          </div>
-          <div>
-            <span class="font-medium">Omejitev:</span>
-            <span class="font-mono">{{ maxAllowed }}</span>
-            <span class="mx-2">|</span>
-            <span class="font-medium">Preostanek:</span>
-            <span class="font-mono" :class="{ 'text-red-600': remaining === 0 }">
-              {{ remaining }}
-            </span>
-          </div>
-          <p class="text-[11px] text-gray-500 leading-snug">
-            Dolžina 160 znakov velja samo pri pošiljanju sporočil, ki vsebujejo znake, ki
-            ne zahtevajo enkodiranja. Če npr. želite pošiljati šumnike, ki niso del
-            7-bitne abecede GSM, morate uporabiti Unicode enkodiranje (UCS‑2). V tem
-            primeru je največja dolžina enega SMS sporočila 70 znakov (pri daljših
-            sporočilih 67 znakov na del), medtem ko je pri GSM‑7 160 znakov (pri daljših
-            sporočilih 153 znakov na del). Razširjeni znaki (^{{ "{" }}}}\\[]~| in €)
-            štejejo dvojno. Največja dovoljena dolžina po ponudniku: 640 (GSM‑7) oziroma
-            320 (UCS‑2) znakov.
-          </p>
-        </div>
-
-        <FormField v-slot="{ value, handleChange }" name="delivery_report">
-          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
-            <FormControl>
-              <Switch :model-value="value" @update:model-value="handleChange" />
-            </FormControl>
-            <div class="space-y-1 leading-none">
-              <FormLabel>Zahtevaj poročilo o dostavi</FormLabel>
+          <!-- Live counters -->
+          <div class="text-xs text-gray-600 flex flex-col gap-1">
+            <div>
+              <span class="font-medium">Znakov:</span>
+              <span class="font-mono">{{ charCount }}</span>
+              <span class="mx-2">|</span>
+              <span class="font-medium">Kodiranje:</span>
+              <span>{{ smsEncoding }}</span>
+              <span class="mx-2">|</span>
+              <span class="font-medium">Deli SMS:</span>
+              <span class="font-mono">{{ segments }}</span>
+              <span class="mx-2">|</span>
+              <span class="font-medium">Krediti:</span>
+              <span class="font-mono">{{ creditsNeeded }}</span>
             </div>
-          </FormItem>
-        </FormField>
-      </form>
+            <div>
+              <span class="font-medium">Omejitev:</span>
+              <span class="font-mono">{{ maxAllowed }}</span>
+              <span class="mx-2">|</span>
+              <span class="font-medium">Preostanek:</span>
+              <span class="font-mono" :class="{ 'text-red-600': remaining === 0 }">
+                {{ remaining }}
+              </span>
+            </div>
+            <p class="text-[11px] text-gray-500 leading-snug">
+              Dolžina 160 znakov velja samo pri pošiljanju sporočil, ki vsebujejo znake,
+              ki ne zahtevajo enkodiranja. Če npr. želite pošiljati šumnike, ki niso del
+              7-bitne abecede GSM, morate uporabiti Unicode enkodiranje (UCS‑2). V tem
+              primeru je največja dolžina enega SMS sporočila 70 znakov (pri daljših
+              sporočilih 67 znakov na del), medtem ko je pri GSM‑7 160 znakov (pri daljših
+              sporočilih 153 znakov na del). Razširjeni znaki (^{{ "{" }}}}\\[]~| in €)
+              štejejo dvojno. Največja dovoljena dolžina po ponudniku: 640 (GSM‑7) oziroma
+              320 (UCS‑2) znakov.
+            </p>
+          </div>
+
+          <FormField v-slot="{ value, handleChange }" name="delivery_report">
+            <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+              <FormControl>
+                <Switch :model-value="value" @update:model-value="handleChange" />
+              </FormControl>
+              <div class="space-y-1 leading-none">
+                <FormLabel>Zahtevaj poročilo o dostavi</FormLabel>
+              </div>
+            </FormItem>
+          </FormField>
+        </form>
+      </ScrollArea>
 
       <DialogFooter>
         <Button variant="outline" @click="closeSmsDialog" :disabled="processing">
diff --git a/resources/js/Layouts/AppPhoneLayout.vue b/resources/js/Layouts/AppPhoneLayout.vue
index 8e74971..a725c0c 100644
--- a/resources/js/Layouts/AppPhoneLayout.vue
+++ b/resources/js/Layouts/AppPhoneLayout.vue
@@ -308,7 +308,7 @@ const closeSearch = () => (searchOpen.value = false);
         </div>
 
         <!-- Page Heading -->
-        <header v-if="$slots.header" class="bg-white border-b border-gray-200 shadow-sm">
+        <header v-if="$slots.header" class="sticky top-16 z-20 bg-white border-b border-gray-200 shadow-sm dark:bg-gray-900 dark:border-gray-700">
           <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 space-y-2">
             <Breadcrumbs
               v-if="$page.props.breadcrumbs && $page.props.breadcrumbs.length"
diff --git a/resources/js/Pages/Phone/Case/Index.vue b/resources/js/Pages/Phone/Case/Index.vue
index ef05d98..3b54234 100644
--- a/resources/js/Pages/Phone/Case/Index.vue
+++ b/resources/js/Pages/Phone/Case/Index.vue
@@ -18,10 +18,11 @@ import { Button } from "@/Components/ui/button";
 import { Badge } from "@/Components/ui/badge";
 import { Separator } from "@/Components/ui/separator";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/Components/ui/collapsible";
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/Components/ui/accordion";
 import {
   Dialog,
   DialogContent,
@@ -46,7 +47,6 @@ import { Checkbox } from "@/Components/ui/checkbox";
 import {
   ArrowLeft,
   CheckCircle2,
-  ChevronDown,
   FileText,
   Calendar,
   Euro,
@@ -321,7 +321,7 @@ const clientSummary = computed(() => {
     <div class="py-4 sm:py-6">
       <div class="mx-auto max-w-5xl px-2 sm:px-4 space-y-4">
         <!-- Client details (account holder) -->
-        <Card>
+        <Card class="gap-3">
           <CardHeader>
             <CardTitle class="flex items-center gap-2 text-base">
               <Building2 class="w-5 h-5 text-gray-500" />
@@ -340,8 +340,8 @@ const clientSummary = computed(() => {
         </Card>
 
         <!-- Person (case person) -->
-        <Card>
-          <CardHeader>
+        <Card class="gap-3">
+          <CardHeader class="px-3">
             <CardTitle class="flex items-center gap-2 text-base">
               <User class="w-5 h-5 text-gray-500" />
               <span class="truncate">{{ client_case.person.full_name }}</span>
@@ -354,7 +354,7 @@ const clientSummary = computed(() => {
               {{ client_case.person.description }}
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          <CardContent class="px-3">
             <Separator class="mb-4" />
             <PersonDetailPhone
               :types="types"
@@ -365,35 +365,32 @@ const clientSummary = computed(() => {
         </Card>
 
         <!-- Contracts assigned to me -->
-        <Card>
-          <CardHeader>
+        <Card class="p-0 pt-3 gap-1">
+          <CardHeader class="px-4">
             <CardTitle class="flex items-center gap-2">
               <FileText class="w-5 h-5" />
               Pogodbe
             </CardTitle>
           </CardHeader>
-          <CardContent class="space-y-3">
+          <CardContent class="p-2">
             <Card
               v-for="c in contracts"
               :key="c.uuid || c.id"
-              class="border-l-4 border-l-indigo-500 overflow-hidden"
+              class="overflow-hidden p-0 gap-3"
             >
               <!-- Contract header: reference + type badge -->
-              <CardHeader class="pb-2">
-                <div class="flex items-center gap-2 flex-wrap">
+              <CardHeader class="p-3 pb-2">
+                <div class="flex items-center flex-wrap">
                   <CardTitle class="text-base font-semibold">
-                    {{ c.reference || c.uuid }}
+                    {{ c.reference || "Šifra pogodbe ni določena" }}
                   </CardTitle>
-                  <Badge v-if="c.type?.name" variant="secondary" class="text-[11px]">
-                    {{ c.type.name }}
-                  </Badge>
                 </div>
               </CardHeader>
 
               <!-- Balance row -->
               <div
                 v-if="c.account"
-                class="mx-4 mb-3 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900 px-4 py-3 flex items-center justify-between"
+                class="mx-3 rounded-xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900 px-2 py-2 flex items-center justify-between"
               >
                 <div class="flex items-center gap-2 text-red-500">
                   <Euro class="w-4 h-4 shrink-0" />
@@ -413,75 +410,76 @@ const clientSummary = computed(() => {
                 v-if="
                   c.description || c.last_object || (c.meta && Object.keys(c.meta).length)
                 "
-                class="pt-0 px-4 space-y-0"
+                class="pt-0 px-0 space-y-0"
               >
-                <!-- Description -->
-                <template v-if="c.description">
-                  <Separator class="mb-3" />
-                  <Collapsible>
-                    <CollapsibleTrigger
-                      class="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 group w-full py-1"
+                <!-- Description + Meta Accordion -->
+                <template v-if="c.description || (c.meta && Object.keys(c.meta).length)">
+                  <Separator />
+                  <Accordion type="multiple" class="w-full">
+                    <AccordionItem
+                      v-if="c.description"
+                      value="description"
+                      class="border-b-0"
                     >
-                      <ChevronDown
-                        class="w-3.5 h-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180 shrink-0"
-                      />
-                      <span class="uppercase tracking-wide font-medium">Opis</span>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent>
-                      <p
-                        class="mt-1.5 mb-2 text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
+                      <AccordionTrigger
+                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
                       >
-                        {{ c.description }}
-                      </p>
-                    </CollapsibleContent>
-                  </Collapsible>
-                </template>
-
-                <!-- Meta -->
-                <template v-if="c.meta && Object.keys(c.meta).length">
-                  <Separator class="mb-3" :class="c.description ? 'mt-2' : 'mt-0'" />
-                  <Collapsible>
-                    <CollapsibleTrigger
-                      class="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 group w-full py-1"
-                    >
-                      <ChevronDown
-                        class="w-3.5 h-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180 shrink-0"
-                      />
-                      <span class="uppercase tracking-wide font-medium"
-                        >Dodatni podatki</span
-                      >
-                      <span class="ml-auto text-gray-400 font-normal">{{
-                        Object.keys(c.meta).length
-                      }}</span>
-                    </CollapsibleTrigger>
-                    <CollapsibleContent>
-                      <div
-                        class="mt-1.5 mb-2 divide-y divide-gray-100 dark:divide-gray-700 rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden"
-                      >
-                        <div
-                          v-for="(val, key) in c.meta"
-                          :key="key"
-                          class="flex items-center justify-between gap-3 px-3 py-2 bg-white dark:bg-gray-900 even:bg-gray-50/60 dark:even:bg-gray-800/40"
+                        Opis
+                      </AccordionTrigger>
+                      <AccordionContent class="px-3 pb-3">
+                        <p
+                          class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line rounded-lg bg-gray-50 dark:bg-gray-800/50 px-3 py-2.5"
                         >
-                          <span
-                            class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
-                            >{{ val?.title || key }}</span
+                          {{ c.description }}
+                        </p>
+                      </AccordionContent>
+                    </AccordionItem>
+                    <AccordionItem
+                      v-if="c.meta && Object.keys(c.meta).length"
+                      value="meta"
+                      class="border-b-0"
+                      :class="c.description ? 'border-t' : ''"
+                    >
+                      <AccordionTrigger
+                        class="px-3 py-2 text-xs font-medium uppercase tracking-wide hover:no-underline"
+                      >
+                        <div>
+                          <span class="mr-1">Dodatni podatki</span>
+                          <Badge
+                            class="bg-blue-500 text-white dark:bg-blue-600 h-5 min-w-5 rounded-full px-2 font-mono tabular-nums"
+                            >{{ Object.keys(c.meta).length }}</Badge
                           >
-                          <span
-                            class="text-xs font-semibold text-gray-800 dark:text-gray-200 text-right"
-                          >
-                            <template v-if="val?.type === 'date'">{{
-                              formatDateShort(val.value) || val.value || "—"
-                            }}</template>
-                            <template v-else-if="val?.type === 'number'">{{
-                              val.value ?? "—"
-                            }}</template>
-                            <template v-else>{{ val?.value ?? val ?? "—" }}</template>
-                          </span>
                         </div>
-                      </div>
-                    </CollapsibleContent>
-                  </Collapsible>
+                      </AccordionTrigger>
+                      <AccordionContent class="pb-2">
+                        <div
+                          class="divide-y divide-gray-100 dark:divide-gray-700 rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden"
+                        >
+                          <div
+                            v-for="(val, key) in c.meta"
+                            :key="key"
+                            class="flex items-center justify-between gap-3 px-3 py-2 bg-white dark:bg-gray-900 even:bg-gray-50/60 dark:even:bg-gray-800/40"
+                          >
+                            <span
+                              class="text-xs text-gray-500 dark:text-gray-400 shrink-0"
+                              >{{ val?.title || key }}</span
+                            >
+                            <span
+                              class="text-xs font-semibold text-gray-800 dark:text-gray-200 text-right"
+                            >
+                              <template v-if="val?.type === 'date'">{{
+                                formatDateShort(val.value) || val.value || "—"
+                              }}</template>
+                              <template v-else-if="val?.type === 'number'">{{
+                                val.value ?? "—"
+                              }}</template>
+                              <template v-else>{{ val?.value ?? val ?? "—" }}</template>
+                            </span>
+                          </div>
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
                 </template>
 
                 <!-- Last object -->
diff --git a/resources/js/Pages/Phone/Index.vue b/resources/js/Pages/Phone/Index.vue
index ac74de5..05319e6 100644
--- a/resources/js/Pages/Phone/Index.vue
+++ b/resources/js/Pages/Phone/Index.vue
@@ -4,49 +4,36 @@ import { Badge } from "@/Components/ui/badge";
 import { Button } from "@/Components/ui/button";
 import { Input } from "@/Components/ui/input";
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@/Components/ui/select";
 import { Skeleton } from "@/Components/ui/skeleton";
-import {
-    Tabs,
-    TabsContent,
-    TabsList,
-    TabsTrigger,
-} from "@/Components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs";
 import { router } from "@inertiajs/vue3";
-import {
-    computed,
-    defineComponent,
-    h,
-    onMounted,
-    onUnmounted,
-    ref,
-    watch,
-} from "vue";
+import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import {
-    CalendarDays,
-    CheckCircle2,
-    ChevronRight,
-    ClipboardList,
-    MapPin,
-    Phone,
-    SlidersHorizontal,
-    Wallet,
+  CalendarDays,
+  CheckCircle2,
+  ChevronRight,
+  ClipboardList,
+  MapPin,
+  Phone,
+  SlidersHorizontal,
+  Wallet,
 } from "lucide-vue-next";
 import { fmtDateDMY } from "@/Utilities/functions";
 
 const props = defineProps({
-    pendingJobs: { type: Object, default: null },
-    processedJobs: { type: Object, default: null },
-    completedJobs: { type: Object, default: null },
-    clients: { type: Array, default: () => [] },
-    view_mode: { type: String, default: "assigned" },
-    filters: { type: Object, default: () => ({ search: "", client: "" }) },
+  pendingJobs: { type: Object, default: null },
+  processedJobs: { type: Object, default: null },
+  completedJobs: { type: Object, default: null },
+  clients: { type: Array, default: () => [] },
+  view_mode: { type: String, default: "assigned" },
+  filters: { type: Object, default: () => ({ search: "", client: "" }) },
 });
 
 const isCompleted = computed(() => props.view_mode === "completed-today");
@@ -55,43 +42,45 @@ const isCompleted = computed(() => props.view_mode === "completed-today");
 const search = ref(props.filters.search || "");
 const clientFilter = ref(props.filters.client || "all");
 const isFiltering = ref(false);
-const showFilters = ref(!!(props.filters.search || (props.filters.client && props.filters.client !== "all")));
+const showFilters = ref(
+  !!(props.filters.search || (props.filters.client && props.filters.client !== "all"))
+);
 
 const debouncedFilter = useDebounceFn(() => performFilter(), 500);
 watch(search, () => debouncedFilter());
 watch(clientFilter, () => performFilter());
 
 function performFilter() {
-    isFiltering.value = true;
-    const targetRoute = isCompleted.value ? "phone.completed" : "phone.index";
-    const only = isCompleted.value
-        ? ["completedJobs", "filters"]
-        : ["pendingJobs", "processedJobs", "filters"];
+  isFiltering.value = true;
+  const targetRoute = isCompleted.value ? "phone.completed" : "phone.index";
+  const only = isCompleted.value
+    ? ["completedJobs", "filters"]
+    : ["pendingJobs", "processedJobs", "filters"];
 
-    router.get(
-        route(targetRoute),
-        {
-            search: search.value || undefined,
-            client: clientFilter.value !== "all" ? clientFilter.value : undefined,
-        },
-        {
-            preserveState: true,
-            preserveScroll: false,
-            only,
-            onSuccess: () => {
-                resetLists();
-                isFiltering.value = false;
-            },
-            onError: () => {
-                isFiltering.value = false;
-            },
-        },
-    );
+  router.get(
+    route(targetRoute),
+    {
+      search: search.value || undefined,
+      client: clientFilter.value !== "all" ? clientFilter.value : undefined,
+    },
+    {
+      preserveState: true,
+      preserveScroll: false,
+      only,
+      onSuccess: () => {
+        resetLists();
+        isFiltering.value = false;
+      },
+      onError: () => {
+        isFiltering.value = false;
+      },
+    }
+  );
 }
 
 function clearFilters() {
-    search.value = "";
-    clientFilter.value = "all";
+  search.value = "";
+  clientFilter.value = "all";
 }
 
 // ── Infinite scroll lists ────────────────────────────────────────────────────
@@ -116,108 +105,128 @@ const processedSentinel = ref(null);
 const completedSentinel = ref(null);
 
 function resetLists() {
-    pendingList.value = props.pendingJobs?.data ?? [];
-    processedList.value = props.processedJobs?.data ?? [];
-    completedList.value = props.completedJobs?.data ?? [];
-    pendingPage.value = props.pendingJobs?.current_page ?? 1;
-    processedPage.value = props.processedJobs?.current_page ?? 1;
-    completedPage.value = props.completedJobs?.current_page ?? 1;
-    pendingLastPage.value = props.pendingJobs?.last_page ?? 1;
-    processedLastPage.value = props.processedJobs?.last_page ?? 1;
-    completedLastPage.value = props.completedJobs?.last_page ?? 1;
-    clientFilter.value = props.filters.client || "all";
+  pendingList.value = props.pendingJobs?.data ?? [];
+  processedList.value = props.processedJobs?.data ?? [];
+  completedList.value = props.completedJobs?.data ?? [];
+  pendingPage.value = props.pendingJobs?.current_page ?? 1;
+  processedPage.value = props.processedJobs?.current_page ?? 1;
+  completedPage.value = props.completedJobs?.current_page ?? 1;
+  pendingLastPage.value = props.pendingJobs?.last_page ?? 1;
+  processedLastPage.value = props.processedJobs?.last_page ?? 1;
+  completedLastPage.value = props.completedJobs?.last_page ?? 1;
+  clientFilter.value = props.filters.client || "all";
 }
 
 function appendUnique(list, newItems) {
-    const ids = new Set(list.value.map((i) => i.id));
-    list.value.push(...newItems.filter((i) => !ids.has(i.id)));
+  const ids = new Set(list.value.map((i) => i.id));
+  list.value.push(...newItems.filter((i) => !ids.has(i.id)));
 }
 
 function buildPageUrl(pageParam, pageNum) {
-    const params = new URLSearchParams(window.location.search);
-    params.set(pageParam, pageNum);
-    return `${window.location.pathname}?${params.toString()}`;
+  const params = new URLSearchParams(window.location.search);
+  params.set(pageParam, pageNum);
+  return `${window.location.pathname}?${params.toString()}`;
 }
 
 function loadMore(listRef, pageRef, lastPageRef, loadingRef, propKey, pageParam) {
-    if (loadingRef.value) return;
-    if (pageRef.value >= lastPageRef.value) return;
+  if (loadingRef.value) return;
+  if (pageRef.value >= lastPageRef.value) return;
 
-    const nextPage = pageRef.value + 1;
-    loadingRef.value = true;
+  const nextPage = pageRef.value + 1;
+  loadingRef.value = true;
 
-    router.get(
-        buildPageUrl(pageParam, nextPage),
-        {},
-        {
-            preserveState: true,
-            preserveScroll: true,
-            only: [propKey],
-            onSuccess: () => {
-                const newData = props[propKey]?.data ?? [];
-                appendUnique(listRef, newData);
-                pageRef.value = nextPage;
-                lastPageRef.value =
-                    props[propKey]?.last_page ?? lastPageRef.value;
-                loadingRef.value = false;
-            },
-            onError: () => {
-                loadingRef.value = false;
-            },
-        },
-    );
+  router.get(
+    buildPageUrl(pageParam, nextPage),
+    {},
+    {
+      preserveState: true,
+      preserveScroll: true,
+      only: [propKey],
+      onSuccess: () => {
+        const newData = props[propKey]?.data ?? [];
+        appendUnique(listRef, newData);
+        pageRef.value = nextPage;
+        lastPageRef.value = props[propKey]?.last_page ?? lastPageRef.value;
+        loadingRef.value = false;
+      },
+      onError: () => {
+        loadingRef.value = false;
+      },
+    }
+  );
 }
 
 function makeObserver(sentinelRef, loadFn) {
-    const obs = new IntersectionObserver(
-        (entries) => {
-            if (entries[0].isIntersecting) loadFn();
-        },
-        { rootMargin: "200px" },
-    );
-    if (sentinelRef.value) obs.observe(sentinelRef.value);
-    return obs;
+  const obs = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting) loadFn();
+    },
+    { rootMargin: "200px" }
+  );
+  if (sentinelRef.value) obs.observe(sentinelRef.value);
+  return obs;
 }
 
 let observers = [];
 
+// ── Scroll-hide title ────────────────────────────────────────────────────────
+const scrolled = ref(false);
+let stopNavigateListener = null;
+function onScroll() {
+  if (!scrolled.value && window.scrollY > 50) {
+    scrolled.value = true;
+  } else if (scrolled.value && window.scrollY < 10) {
+    scrolled.value = false;
+  }
+}
 onMounted(() => {
-    observers.push(
-        makeObserver(pendingSentinel, () =>
-            loadMore(
-                pendingList,
-                pendingPage,
-                pendingLastPage,
-                loadingPending,
-                "pendingJobs",
-                "pending",
-            ),
-        ),
-        makeObserver(processedSentinel, () =>
-            loadMore(
-                processedList,
-                processedPage,
-                processedLastPage,
-                loadingProcessed,
-                "processedJobs",
-                "processed",
-            ),
-        ),
-        makeObserver(completedSentinel, () =>
-            loadMore(
-                completedList,
-                completedPage,
-                completedLastPage,
-                loadingCompleted,
-                "completedJobs",
-                "completed",
-            ),
-        ),
-    );
+  let trackedPath = window.location.pathname;
+  stopNavigateListener = router.on("navigate", (event) => {
+    const newPath = new URL(event.detail.page.url, window.location.origin).pathname;
+    if (newPath !== trackedPath) {
+      scrolled.value = false;
+      trackedPath = newPath;
+    }
+  });
+  window.addEventListener("scroll", onScroll, { passive: true });
+  observers.push(
+    makeObserver(pendingSentinel, () =>
+      loadMore(
+        pendingList,
+        pendingPage,
+        pendingLastPage,
+        loadingPending,
+        "pendingJobs",
+        "pending"
+      )
+    ),
+    makeObserver(processedSentinel, () =>
+      loadMore(
+        processedList,
+        processedPage,
+        processedLastPage,
+        loadingProcessed,
+        "processedJobs",
+        "processed"
+      )
+    ),
+    makeObserver(completedSentinel, () =>
+      loadMore(
+        completedList,
+        completedPage,
+        completedLastPage,
+        loadingCompleted,
+        "completedJobs",
+        "completed"
+      )
+    )
+  );
 });
 
 onUnmounted(() => {
-    observers.forEach((o) => o.disconnect());
+  if (stopNavigateListener) stopNavigateListener();
+  observers.forEach((o) => o.disconnect());
+  window.removeEventListener("scroll", onScroll);
 });
 
 // ── Counts ───────────────────────────────────────────────────────────────────
@@ -226,440 +235,394 @@ const processedCount = computed(() => props.processedJobs?.total ?? 0);
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 function formatAmount(val) {
-    if (val === null || val === undefined) return "0,00";
-    const num = typeof val === "number" ? val : parseFloat(val);
-    if (Number.isNaN(num)) return String(val);
-    return num.toLocaleString("sl-SI", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-    });
+  if (val === null || val === undefined) return "0,00";
+  const num = typeof val === "number" ? val : parseFloat(val);
+  if (Number.isNaN(num)) return String(val);
+  return num.toLocaleString("sl-SI", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
 }
 
 function getCaseUuid(job) {
-    return (
-        job?.contract?.client_case?.uuid ||
-        job?.client_case?.uuid ||
-        job?.case_uuid ||
-        null
-    );
+  return (
+    job?.contract?.client_case?.uuid || job?.client_case?.uuid || job?.case_uuid || null
+  );
 }
 
 function jobHref(job) {
-    const uuid = getCaseUuid(job);
-    if (!uuid) return null;
-    return route("phone.case", {
-        client_case: uuid,
-        completed: isCompleted.value ? 1 : undefined,
-    });
+  const uuid = getCaseUuid(job);
+  if (!uuid) return null;
+  return route("phone.case", {
+    client_case: uuid,
+    completed: isCompleted.value ? 1 : undefined,
+  });
 }
 
 // ── JobCard component ────────────────────────────────────────────────────────
 const JobCard = defineComponent({
-    name: "JobCard",
-    props: {
-        job: { type: Object, required: true },
-        href: { type: String, default: null },
-        accentClass: { type: String, default: "border-l-blue-500" },
-        showLastActivity: { type: Boolean, default: false },
-    },
-    setup(p) {
-        return () => {
-            const j = p.job;
-            const person = j.contract?.client_case?.person;
-            const clientName =
-                j.contract?.client_case?.client?.person?.full_name;
-            const address = person?.address?.address;
-            const phone = person?.phones?.[0]?.nu;
-            const balance = j.contract?.account?.balance_amount;
+  name: "JobCard",
+  props: {
+    job: { type: Object, required: true },
+    href: { type: String, default: null },
+    accentClass: { type: String, default: "border-l-blue-500" },
+    showLastActivity: { type: Boolean, default: false },
+  },
+  setup(p) {
+    return () => {
+      const j = p.job;
+      const person = j.contract?.client_case?.person;
+      const clientName = j.contract?.client_case?.client?.person?.full_name;
+      const address = person?.address?.address;
+      const phone = person?.phones?.[0]?.nu;
+      const balance = j.contract?.account?.balance_amount;
 
-            const inner = h("div", { class: `border-l-4 ${p.accentClass}` }, [
-                h(
-                    "div",
-                    {
-                        class: "px-4 pt-4 pb-2 flex items-start justify-between gap-3",
-                    },
-                    [
-                        h("div", { class: "flex-1 min-w-0" }, [
-                            h(
-                                "p",
-                                {
-                                    class: "font-bold text-base text-gray-900 dark:text-gray-100 truncate leading-tight",
-                                },
-                                person?.full_name || "—",
-                            ),
-                            h(
-                                "p",
-                                {
-                                    class: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate",
-                                },
-                                j.contract?.reference ||
-                                    j.contract?.uuid ||
-                                    "—",
-                            ),
-                            clientName
-                                ? h(
-                                    "p",
-                                    {
-                                        class: "text-xs text-indigo-600 dark:text-indigo-400 mt-0.5 truncate",
-                                    },
-                                    clientName,
-                                )
-                                : null,
-                        ]),
-                        j.priority
-                            ? h(
-                                "span",
-                                {
-                                    class: "shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400 animate-pulse",
-                                },
-                                "Prioriteta",
-                            )
-                            : null,
-                    ],
-                ),
-                address || phone
-                    ? h("div", { class: "px-4 pb-3 space-y-1.5" }, [
-                        address
-                            ? h(
-                                "div",
-                                {
-                                    class: "flex items-center gap-2 text-gray-500 dark:text-gray-400",
-                                },
-                                [
-                                    h(MapPin, {
-                                        class: "w-3.5 h-3.5 shrink-0 text-gray-400",
-                                    }),
-                                    h(
-                                        "span",
-                                        { class: "text-xs truncate" },
-                                        address,
-                                    ),
-                                ],
-                            )
-                            : null,
-                        phone
-                            ? h(
-                                "div",
-                                {
-                                    class: "flex items-center gap-2 text-gray-500 dark:text-gray-400",
-                                },
-                                [
-                                    h(Phone, {
-                                        class: "w-3.5 h-3.5 shrink-0 text-gray-400",
-                                    }),
-                                    h(
-                                        "span",
-                                        { class: "text-xs font-medium" },
-                                        phone,
-                                    ),
-                                ],
-                            )
-                            : null,
-                    ])
-                    : null,
-                balance != null
-                    ? h(
-                        "div",
-                        {
-                            class: "mx-4 mb-3 px-3 py-2 bg-red-50 dark:bg-red-950/20 rounded-lg flex items-center gap-2 border border-red-100 dark:border-red-900",
-                        },
-                        [
-                            h(Wallet, {
-                                class: "w-4 h-4 text-red-500 shrink-0",
-                            }),
-                            h(
-                                "span",
-                                {
-                                    class: "font-bold text-red-600 dark:text-red-400 text-sm",
-                                },
-                                `${formatAmount(balance)} €`,
-                            ),
-                            h(
-                                "span",
-                                { class: "text-xs text-red-400" },
-                                "odprto",
-                            ),
-                        ],
-                    )
-                    : null,
-                h(
-                    "div",
-                    {
-                        class: "px-4 py-3 border-t bg-gray-50/60 dark:bg-gray-900/40 flex items-center justify-between",
-                    },
-                    [
-                        h(
-                            "div",
-                            {
-                                class: "flex items-center gap-1.5 text-xs text-gray-400",
-                            },
-                            [
-                                h(CalendarDays, { class: "w-3.5 h-3.5" }),
-                                h(
-                                    "span",
-                                    {},
-                                    p.showLastActivity && j.last_activity
-                                        ? fmtDateDMY(j.last_activity)
-                                        : fmtDateDMY(j.assigned_at),
-                                ),
-                            ],
-                        ),
-                        p.href
-                            ? h(
-                                "div",
-                                {
-                                    class: "flex items-center gap-0.5 text-primary font-semibold text-sm",
-                                },
-                                [
-                                    "Odpri",
-                                    h(ChevronRight, { class: "w-4 h-4" }),
-                                ],
-                            )
-                            : h(
-                                "span",
-                                { class: "text-xs text-gray-400 italic" },
-                                "Manjka primer",
-                            ),
-                    ],
-                ),
-            ]);
-
-            return p.href
+      const inner = h("div", { class: `border-l-4 ${p.accentClass}` }, [
+        h(
+          "div",
+          {
+            class: "px-4 pt-4 pb-2 flex items-start justify-between gap-3",
+          },
+          [
+            h("div", { class: "flex-1 min-w-0" }, [
+              h(
+                "p",
+                {
+                  class:
+                    "font-bold text-base text-gray-900 dark:text-gray-100 truncate leading-tight",
+                },
+                person?.full_name || "—"
+              ),
+              h(
+                "p",
+                {
+                  class: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate",
+                },
+                j.contract?.reference || j.contract?.uuid || "—"
+              ),
+              clientName
                 ? h(
-                    "a",
+                    "p",
                     {
-                        href: p.href,
-                        class: "block rounded-xl border shadow-sm overflow-hidden bg-white dark:bg-card active:scale-[0.99] transition-transform duration-100",
+                      class:
+                        "text-xs text-indigo-600 dark:text-indigo-400 mt-0.5 truncate",
                     },
-                    inner,
+                    clientName
+                  )
+                : null,
+            ]),
+            j.priority
+              ? h(
+                  "span",
+                  {
+                    class:
+                      "shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400 animate-pulse",
+                  },
+                  "Prioriteta"
                 )
-                : h(
+              : null,
+          ]
+        ),
+        address || phone
+          ? h("div", { class: "px-4 pb-3 space-y-1.5" }, [
+              address
+                ? h(
                     "div",
                     {
-                        class: "rounded-xl border shadow-sm overflow-hidden bg-white dark:bg-card opacity-60",
+                      class: "flex items-center gap-2 text-gray-500 dark:text-gray-400",
                     },
-                    inner,
-                );
-        };
-    },
+                    [
+                      h(MapPin, {
+                        class: "w-3.5 h-3.5 shrink-0 text-gray-400",
+                      }),
+                      h("span", { class: "text-xs truncate" }, address),
+                    ]
+                  )
+                : null,
+              phone
+                ? h(
+                    "div",
+                    {
+                      class: "flex items-center gap-2 text-gray-500 dark:text-gray-400",
+                    },
+                    [
+                      h(Phone, {
+                        class: "w-3.5 h-3.5 shrink-0 text-gray-400",
+                      }),
+                      h("span", { class: "text-xs font-medium" }, phone),
+                    ]
+                  )
+                : null,
+            ])
+          : null,
+        balance != null
+          ? h(
+              "div",
+              {
+                class:
+                  "mx-4 mb-3 px-3 py-2 bg-red-50 dark:bg-red-950/20 rounded-lg flex items-center gap-2 border border-red-100 dark:border-red-900",
+              },
+              [
+                h(Wallet, {
+                  class: "w-4 h-4 text-red-500 shrink-0",
+                }),
+                h(
+                  "span",
+                  {
+                    class: "font-bold text-red-600 dark:text-red-400 text-sm",
+                  },
+                  `${formatAmount(balance)} €`
+                ),
+                h("span", { class: "text-xs text-red-400" }, "odprto"),
+              ]
+            )
+          : null,
+        h(
+          "div",
+          {
+            class:
+              "px-4 py-3 border-t bg-gray-50/60 dark:bg-gray-900/40 flex items-center justify-between",
+          },
+          [
+            h(
+              "div",
+              {
+                class: "flex items-center gap-1.5 text-xs text-gray-400",
+              },
+              [
+                h(CalendarDays, { class: "w-3.5 h-3.5" }),
+                h(
+                  "span",
+                  {},
+                  p.showLastActivity && j.last_activity
+                    ? fmtDateDMY(j.last_activity)
+                    : fmtDateDMY(j.assigned_at)
+                ),
+              ]
+            ),
+            p.href
+              ? h(
+                  "div",
+                  {
+                    class: "flex items-center gap-0.5 text-primary font-semibold text-sm",
+                  },
+                  ["Odpri", h(ChevronRight, { class: "w-4 h-4" })]
+                )
+              : h("span", { class: "text-xs text-gray-400 italic" }, "Manjka primer"),
+          ]
+        ),
+      ]);
+
+      return p.href
+        ? h(
+            "a",
+            {
+              href: p.href,
+              class:
+                "block rounded-xl border shadow-sm overflow-hidden bg-white dark:bg-card active:scale-[0.99] transition-transform duration-100",
+            },
+            inner
+          )
+        : h(
+            "div",
+            {
+              class:
+                "rounded-xl border shadow-sm overflow-hidden bg-white dark:bg-card opacity-60",
+            },
+            inner
+          );
+    };
+  },
 });
 </script>
 
 <template>
-    <AppPhoneLayout title="Phone">
-        <template #header>
-            <h2
-                class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"
-            >
-                {{ isCompleted ? "Zaključeno danes" : "Terenska opravila" }}
-            </h2>
-        </template>
+  <AppPhoneLayout title="Phone">
+    <template #header>
+      <h2
+        class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight overflow-hidden transition-all duration-200 ease-in-out"
+        :class="scrolled ? 'max-h-0 opacity-0 mb-0' : 'max-h-12 opacity-100 mb-0'"
+      >
+        {{ isCompleted ? "Zaključeno danes" : "Terenska opravila" }}
+      </h2>
 
-        <div class="pb-8">
-            <!-- Filter bar -->
-            <div
-                class="sticky top-16 z-20 bg-white/95 dark:bg-gray-950/95 backdrop-blur border-b px-4 py-3 space-y-3"
-            >
-                <div class="flex items-center gap-2">
-                    <div class="relative flex-1">
-                        <Input
-                            v-model="search"
-                            type="text"
-                            placeholder="Išči po referenci ali imenu..."
-                            class="pr-10"
-                        />
-                        <span
-                            v-if="isFiltering"
-                            class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"
-                        />
-                    </div>
-                    <Button
-                        variant="outline"
-                        size="icon"
-                        class="shrink-0"
-                        :class="
-                            showFilters || clientFilter !== 'all'
-                                ? 'bg-primary/10 border-primary'
-                                : ''
-                        "
-                        title="Filter po naročniku"
-                        @click="showFilters = !showFilters"
-                    >
-                        <SlidersHorizontal class="w-4 h-4" />
-                    </Button>
-                    <Button
-                        v-if="search || clientFilter !== 'all'"
-                        variant="ghost"
-                        size="sm"
-                        class="shrink-0 text-muted-foreground"
-                        @click="clearFilters"
-                    >
-                        Počisti
-                    </Button>
-                </div>
-
-                <div v-if="showFilters || clientFilter !== 'all'" class="pb-1">
-                    <Select v-model="clientFilter">
-                        <SelectTrigger class="w-full">
-                            <SelectValue placeholder="Vsi naročniki" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="all">Vsi naročniki</SelectItem>
-                            <SelectItem
-                                v-for="client in props.clients"
-                                :key="client.uuid"
-                                :value="client.uuid"
-                            >
-                                {{ client.name }}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </div>
-            </div>
-
-            <!-- Assigned mode: two tabs (Novo / Obdelano) -->
-            <div v-if="!isCompleted" class="px-4 pt-4">
-                <Tabs default-value="pending" class="w-full">
-                    <TabsList class="w-full grid grid-cols-2 mb-4">
-                        <TabsTrigger value="pending" class="gap-1.5">
-                            <ClipboardList class="w-4 h-4" />
-                            Novo
-                            <Badge
-                                v-if="pendingCount"
-                                variant="secondary"
-                                class="ml-1 h-5 px-1.5 text-xs"
-                            >
-                                {{ pendingCount }}
-                            </Badge>
-                        </TabsTrigger>
-                        <TabsTrigger value="processed" class="gap-1.5">
-                            <CheckCircle2 class="w-4 h-4" />
-                            Obdelano
-                            <Badge
-                                v-if="processedCount"
-                                variant="secondary"
-                                class="ml-1 h-5 px-1.5 text-xs"
-                            >
-                                {{ processedCount }}
-                            </Badge>
-                        </TabsTrigger>
-                    </TabsList>
-
-                    <!-- Pending tab -->
-                    <TabsContent value="pending" class="space-y-3">
-                        <template v-if="pendingList.length">
-                            <JobCard
-                                v-for="job in pendingList"
-                                :key="job.id"
-                                :job="job"
-                                :href="jobHref(job)"
-                                accent-class="border-l-blue-500"
-                            />
-                        </template>
-                        <div
-                            v-else-if="!loadingPending"
-                            class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
-                        >
-                            <ClipboardList
-                                class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto"
-                            />
-                            <p class="text-sm">
-                                {{
-                                    search || clientFilter !== 'all'
-                                        ? "Ni zadetkov"
-                                        : "Ni novih opravil"
-                                }}
-                            </p>
-                        </div>
-                        <!-- Sentinel for infinite scroll -->
-                        <div ref="pendingSentinel" class="h-px" />
-                        <div v-if="loadingPending" class="space-y-3">
-                            <Skeleton
-                                v-for="i in 3"
-                                :key="i"
-                                class="h-36 rounded-xl"
-                            />
-                        </div>
-                    </TabsContent>
-
-                    <!-- Processed tab -->
-                    <TabsContent value="processed" class="space-y-3">
-                        <template v-if="processedList.length">
-                            <JobCard
-                                v-for="job in processedList"
-                                :key="job.id"
-                                :job="job"
-                                :href="jobHref(job)"
-                                accent-class="border-l-green-500"
-                                :show-last-activity="true"
-                            />
-                        </template>
-                        <div
-                            v-else-if="!loadingProcessed"
-                            class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
-                        >
-                            <CheckCircle2
-                                class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto"
-                            />
-                            <p class="text-sm">
-                                {{
-                                    search || clientFilter !== 'all'
-                                        ? "Ni zadetkov"
-                                        : "Ni obdelanih opravil"
-                                }}
-                            </p>
-                        </div>
-                        <!-- Sentinel for infinite scroll -->
-                        <div ref="processedSentinel" class="h-px" />
-                        <div v-if="loadingProcessed" class="space-y-3">
-                            <Skeleton
-                                v-for="i in 3"
-                                :key="i"
-                                class="h-36 rounded-xl"
-                            />
-                        </div>
-                    </TabsContent>
-                </Tabs>
-            </div>
-
-            <!-- Completed-today mode: single scroll list -->
-            <div v-else class="px-4 pt-4 space-y-3">
-                <template v-if="completedList.length">
-                    <JobCard
-                        v-for="job in completedList"
-                        :key="job.id"
-                        :job="job"
-                        :href="jobHref(job)"
-                        accent-class="border-l-purple-500"
-                        :show-last-activity="true"
-                    />
-                </template>
-                <div
-                    v-else-if="!loadingCompleted"
-                    class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
-                >
-                    <CheckCircle2
-                        class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto"
-                    />
-                    <p class="text-sm">
-                        {{
-                            search || clientFilter !== 'all'
-                                ? "Ni zadetkov"
-                                : "Danes ni zaključenih opravil"
-                        }}
-                    </p>
-                </div>
-                <!-- Sentinel for infinite scroll -->
-                <div ref="completedSentinel" class="h-px" />
-                <div v-if="loadingCompleted" class="space-y-3">
-                    <Skeleton
-                        v-for="i in 3"
-                        :key="i"
-                        class="h-36 rounded-xl"
-                    />
-                </div>
-            </div>
+      <!-- Filter bar -->
+      <div class="pt-2 space-y-2">
+        <div class="flex items-center gap-2">
+          <div class="relative flex-1">
+            <Input
+              v-model="search"
+              type="text"
+              placeholder="Išči po referenci ali imenu..."
+              class="pr-10"
+            />
+            <span
+              v-if="isFiltering"
+              class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            class="shrink-0"
+            :class="
+              showFilters || clientFilter !== 'all' ? 'bg-primary/10 border-primary' : ''
+            "
+            title="Filter po naročniku"
+            @click="showFilters = !showFilters"
+          >
+            <SlidersHorizontal class="w-4 h-4" />
+          </Button>
+          <Button
+            v-if="search || clientFilter !== 'all'"
+            variant="ghost"
+            size="sm"
+            class="shrink-0 text-muted-foreground"
+            @click="clearFilters"
+          >
+            Počisti
+          </Button>
         </div>
-    </AppPhoneLayout>
-</template>
 
+        <div v-if="showFilters || clientFilter !== 'all'">
+          <Select v-model="clientFilter">
+            <SelectTrigger class="w-full">
+              <SelectValue placeholder="Vsi naročniki" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Vsi naročniki</SelectItem>
+              <SelectItem
+                v-for="client in props.clients"
+                :key="client.uuid"
+                :value="client.uuid"
+              >
+                {{ client.name }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </template>
+
+    <div class="pb-8">
+      <!-- Assigned mode: two tabs (Novo / Obdelano) -->
+      <div v-if="!isCompleted" class="px-4 pt-4">
+        <Tabs default-value="pending" class="w-full">
+          <TabsList class="w-full grid grid-cols-2 mb-4">
+            <TabsTrigger value="pending">
+              <span class="inline-flex flex-row items-center gap-1">
+                <ClipboardList class="w-3.5 h-3.5 shrink-0" />
+                Novo
+                <Badge v-if="pendingCount" variant="secondary" class="h-4 px-1 text-xs">
+                  {{ pendingCount }}
+                </Badge>
+              </span>
+            </TabsTrigger>
+            <TabsTrigger value="processed">
+              <span class="inline-flex flex-row items-center gap-1">
+                <CheckCircle2 class="w-3.5 h-3.5 shrink-0" />
+                Obdelano
+                <Badge v-if="processedCount" variant="secondary" class="h-4 px-1 text-xs">
+                  {{ processedCount }}
+                </Badge>
+              </span>
+            </TabsTrigger>
+          </TabsList>
+
+          <!-- Pending tab -->
+          <TabsContent value="pending" class="space-y-3">
+            <template v-if="pendingList.length">
+              <JobCard
+                v-for="job in pendingList"
+                :key="job.id"
+                :job="job"
+                :href="jobHref(job)"
+                accent-class="border-l-blue-500"
+              />
+            </template>
+            <div
+              v-else-if="!loadingPending"
+              class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
+            >
+              <ClipboardList class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
+              <p class="text-sm">
+                {{
+                  search || clientFilter !== "all" ? "Ni zadetkov" : "Ni novih opravil"
+                }}
+              </p>
+            </div>
+            <!-- Sentinel for infinite scroll -->
+            <div ref="pendingSentinel" class="h-px" />
+            <div v-if="loadingPending" class="space-y-3">
+              <Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
+            </div>
+          </TabsContent>
+
+          <!-- Processed tab -->
+          <TabsContent value="processed" class="space-y-3">
+            <template v-if="processedList.length">
+              <JobCard
+                v-for="job in processedList"
+                :key="job.id"
+                :job="job"
+                :href="jobHref(job)"
+                accent-class="border-l-green-500"
+                :show-last-activity="true"
+              />
+            </template>
+            <div
+              v-else-if="!loadingProcessed"
+              class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
+            >
+              <CheckCircle2 class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
+              <p class="text-sm">
+                {{
+                  search || clientFilter !== "all"
+                    ? "Ni zadetkov"
+                    : "Ni obdelanih opravil"
+                }}
+              </p>
+            </div>
+            <!-- Sentinel for infinite scroll -->
+            <div ref="processedSentinel" class="h-px" />
+            <div v-if="loadingProcessed" class="space-y-3">
+              <Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <!-- Completed-today mode: single scroll list -->
+      <div v-else class="px-4 pt-4 space-y-3">
+        <template v-if="completedList.length">
+          <JobCard
+            v-for="job in completedList"
+            :key="job.id"
+            :job="job"
+            :href="jobHref(job)"
+            accent-class="border-l-purple-500"
+            :show-last-activity="true"
+          />
+        </template>
+        <div
+          v-else-if="!loadingCompleted"
+          class="py-16 text-center text-gray-500 dark:text-gray-400 space-y-2"
+        >
+          <CheckCircle2 class="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto" />
+          <p class="text-sm">
+            {{
+              search || clientFilter !== "all"
+                ? "Ni zadetkov"
+                : "Danes ni zaključenih opravil"
+            }}
+          </p>
+        </div>
+        <!-- Sentinel for infinite scroll -->
+        <div ref="completedSentinel" class="h-px" />
+        <div v-if="loadingCompleted" class="space-y-3">
+          <Skeleton v-for="i in 3" :key="i" class="h-36 rounded-xl" />
+        </div>
+      </div>
+    </div>
+  </AppPhoneLayout>
+</template>