Upgrade to Vite 8 and Tailwind CSS 4 (#595)

- Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6
- Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility)
- Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass
- Convert SCSS files to plain CSS (resources/sass → resources/css)
- Migrate tailwind.config.js to CSS @theme directives
- Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden,
  rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3)
- Migrate opacity utilities to color modifiers (bg-opacity, text-opacity,
  border-opacity, ring-opacity → color/N syntax)
- Update primary color CSS vars to full rgb() values for TW4 color-mix()
- Fix border-l color specificity for sidebar navigation (TW4 default border
  color changed from gray-200 to currentColor)
- Fix invalid border color classes (border-grey-light, border-modal-bg, border--200)
- Add @reference directive for @apply in Vue component style blocks
- Convert Vue component <style lang="scss"> blocks to plain CSS

resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue

@@ -143,7 +143,7 @@
               <BaseContentPlaceholders v-if="loading">
                 <BaseContentPlaceholdersText
                   :lines="1"
-                  class="w-24 h-8 border rounded-md"
+                  class="w-24 h-8 border border-gray-200 rounded-md"
                 />
               </BaseContentPlaceholders>
 

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -42,7 +42,7 @@
         <template v-if="userStore.hasAbilities(ability)" #action>
           <button
             type="button"
-            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
+            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-hidden cursor-pointer "
             @click="openTaxModal"
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />

resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue

@@ -100,7 +100,7 @@
       <BaseContentPlaceholders v-if="isLoading">
         <BaseContentPlaceholdersText
           :lines="1"
-          class="w-24 h-8 border rounded-md"
+          class="w-24 h-8 border border-gray-200 rounded-md"
         />
       </BaseContentPlaceholders>
       <div v-else class="flex" style="width: 140px" role="group">

resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue

@@ -11,7 +11,7 @@
         <BaseIcon
           v-tooltip="{ content: 'Fetch Latest Exchange rate' }"
           name="ArrowPathIcon"
-          :class="`h-4 w-4 text-primary-500 cursor-pointer outline-none ${
+          :class="`h-4 w-4 text-primary-500 cursor-pointer outline-hidden ${
             isFetching
               ? ' animate-spin rotate-180 cursor-not-allowed pointer-events-none '
               : ''

resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue

@@ -2,14 +2,14 @@
   <div class="w-full mt-4 tax-select">
     <Popover v-slot="{ isOpen }" class="relative">
       <PopoverButton
-        :class="isOpen ? '' : 'text-opacity-90'"
+        :class="isOpen ? '' : ''"
         class="
           flex
           items-center
           text-sm
           font-medium
           text-primary-400
-          focus:outline-none focus:border-none
+          focus:outline-hidden focus:border-none
         "
       >
         <BaseIcon
@@ -39,7 +39,7 @@
                 overflow-hidden
                 rounded-md
                 shadow-lg
-                ring-1 ring-black ring-opacity-5
+                ring-1 ring-black/5
               "
             >
               <!-- Tax Search Input  -->
@@ -142,7 +142,7 @@
                   py-3
                   bg-gray-200
                   border-none
-                  outline-none
+                  outline-hidden
                 "
                 @click="openTaxTypeModal"
               >