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/customer/layouts/partials/TheSiteHeader.vue

@@ -2,7 +2,7 @@
   <Disclosure
     v-slot="{ open }"
     as="nav"
-    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
+    class="bg-white shadow-xs fixed top-0 left-0 z-20 w-full"
   >
     <div class="mx-auto px-8">
       <div class="flex justify-between h-16 w-full">
@@ -51,7 +51,7 @@
               rounded-full
               text-gray-400
               hover:text-gray-500
-              focus:outline-none
+              focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
               focus:ring-primary-500
@@ -69,7 +69,7 @@
                     flex
                     text-sm
                     rounded-full
-                    focus:outline-none
+                    focus:outline-hidden
                     focus:ring-2
                     focus:ring-offset-2
                     focus:ring-primary-500
@@ -114,7 +114,7 @@
               rounded-md
               text-gray-400
               hover:text-gray-500 hover:bg-gray-100
-              focus:outline-none
+              focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
               focus:ring-primary-500
@@ -167,7 +167,7 @@
               rounded-full
               text-gray-400
               hover:text-gray-500
-              focus:outline-none
+              focus:outline-hidden
               focus:ring-2
               focus:ring-offset-2
               focus:ring-primary-500

resources/scripts/customer/views/BaseCheckon.vue

@@ -8,5 +8,5 @@
 export default {}
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 </style>

resources/scripts/customer/views/estimates/View.vue

@@ -146,9 +146,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(estimate.id),
             },
           ]"

resources/scripts/customer/views/invoices/View.vue

@@ -152,9 +152,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(invoice.id),
             },
           ]"

resources/scripts/customer/views/payments/View.vue

@@ -140,9 +140,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
                 hasActiveUrl(payment.id),
             },
           ]"