fix: remove @apply with daisyUI classes from scoped styles

Move Tailwind/daisyUI classes directly to template instead of using
@apply in scoped styles. Tailwind 4 @reference directive doesn't
support daisyUI custom classes like text-base-content/70, bg-base-200.

Files fixed:
- MainNavigation.vue
- SubNavigation.vue
- GlobalSearchBar.vue

app/components/search/GlobalSearchBar.vue

@@ -6,7 +6,7 @@
         class="flex items-center bg-base-100 rounded-full border border-base-300 shadow-sm hover:shadow-md transition-shadow"
       >
         <!-- Product field -->
-        <div class="search-field border-r border-base-300">
+        <div class="flex flex-col px-4 py-2 min-w-32 pl-6 rounded-l-full hover:bg-base-200/50 border-r border-base-300">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.product') }}
           </label>
@@ -34,7 +34,7 @@
         </div>
 
         <!-- Quantity field -->
-        <div class="search-field border-r border-base-300">
+        <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50 border-r border-base-300">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.quantity') }}
           </label>
@@ -54,7 +54,7 @@
         </div>
 
         <!-- Destination field -->
-        <div class="search-field">
+        <div class="flex flex-col px-4 py-2 min-w-32 hover:bg-base-200/50">
           <label class="text-xs font-semibold text-base-content/60 mb-0.5">
             {{ $t('search.destination') }}
           </label>
@@ -208,18 +208,3 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-@reference "tailwindcss";
-
-.search-field {
-  @apply flex flex-col px-4 py-2 min-w-32;
-}
-
-.search-field:first-child {
-  @apply pl-6 rounded-l-full;
-}
-
-.search-field:hover {
-  @apply bg-base-200/50;
-}
-</style>