complete story 9.8 with qa tests

resources/css/app.css

@@ -290,26 +290,13 @@ button.btn-danger:disabled {
 .btn-group > .btn-primary:first-child,
 .btn-group > .btn-secondary:first-child,
 .btn-group > .btn-danger:first-child {
-    @apply rounded-r-none;
+    @apply rounded-e-none;
 }
 
 .btn-group > .btn-primary:last-child,
 .btn-group > .btn-secondary:last-child,
 .btn-group > .btn-danger:last-child {
-    @apply rounded-l-none;
-}
-
-/* RTL support for button groups */
-[dir="rtl"] .btn-group > .btn-primary:first-child,
-[dir="rtl"] .btn-group > .btn-secondary:first-child,
-[dir="rtl"] .btn-group > .btn-danger:first-child {
-    @apply rounded-l-none rounded-r-md;
-}
-
-[dir="rtl"] .btn-group > .btn-primary:last-child,
-[dir="rtl"] .btn-group > .btn-secondary:last-child,
-[dir="rtl"] .btn-group > .btn-danger:last-child {
-    @apply rounded-r-none rounded-l-md;
+    @apply rounded-s-none;
 }
 
 /* RTL support for icon buttons */
@@ -426,3 +413,24 @@ button.btn-danger:disabled {
 .shadow-card-hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+
+/* ==========================================================================
+   RTL/LTR Layout Utilities (Story 9.8)
+   ========================================================================== */
+
+/* RTL-aware icon flipping - use on directional icons like chevrons, arrows */
+[dir="rtl"] .flip-rtl {
+    transform: scaleX(-1);
+}
+
+/* Force LTR for numbers, emails, code, and other content that should stay LTR */
+.ltr-content {
+    direction: ltr;
+    unicode-bidi: embed;
+}
+
+/* Inline LTR content within RTL text flow */
+.ltr-inline {
+    direction: ltr;
+    unicode-bidi: isolate;
+}

resources/views/components/layouts/public.blade.php

@@ -7,7 +7,7 @@
         <!-- Skip to content link for keyboard accessibility -->
         <a
             href="#main-content"
-            class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md focus:font-semibold"
+            class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-[100] focus:bg-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md focus:font-semibold"
             data-test="skip-to-content"
         >
             {{ __('Skip to content') }}

resources/views/livewire/admin/timelines/create.blade.php

@@ -147,7 +147,7 @@ new class extends Component {
                                         type="button"
                                         wire:key="client-{{ $client->id }}"
                                         wire:click="selectUser({{ $client->id }})"
-                                        class="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-zinc-50 dark:hover:bg-zinc-700 first:rounded-t-lg last:rounded-b-lg"
+                                        class="flex w-full items-center gap-3 px-4 py-3 text-start hover:bg-zinc-50 dark:hover:bg-zinc-700 first:rounded-t-lg last:rounded-b-lg"
                                     >
                                         <flux:avatar size="sm" name="{{ $client->full_name }}" />
                                         <div>

resources/views/livewire/admin/timelines/show.blade.php

@@ -268,7 +268,7 @@ new class extends Component {
         @else
             <div class="relative">
                 {{-- Timeline line --}}
-                <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
+                <div class="absolute start-4 top-0 bottom-0 w-0.5 bg-zinc-200 dark:bg-zinc-700"></div>
 
                 <div class="space-y-6">
                     @foreach($timeline->updates as $update)

resources/views/livewire/client/timelines/show.blade.php

@@ -33,13 +33,13 @@ new class extends Component
     {{-- Timeline Updates --}}
     <div class="relative">
         {{-- Vertical line --}}
-        <div class="absolute {{ app()->getLocale() === 'ar' ? 'right-4' : 'left-4' }} top-0 bottom-0 w-0.5 bg-amber-500/30"></div>
+        <div class="absolute start-4 top-0 bottom-0 w-0.5 bg-amber-500/30"></div>
 
         <div class="space-y-6">
             @forelse($timeline->updates as $update)
-                <div wire:key="update-{{ $update->id }}" class="relative {{ app()->getLocale() === 'ar' ? 'pr-12' : 'pl-12' }}">
+                <div wire:key="update-{{ $update->id }}" class="relative ps-12">
                     {{-- Dot --}}
-                    <div class="absolute {{ app()->getLocale() === 'ar' ? 'right-2' : 'left-2' }} top-2 w-4 h-4 rounded-full bg-amber-500 border-4 border-amber-50 dark:border-zinc-900"></div>
+                    <div class="absolute start-2 top-2 w-4 h-4 rounded-full bg-amber-500 border-4 border-amber-50 dark:border-zinc-900"></div>
 
                     <div class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-sm">
                         <div class="text-sm text-zinc-500 dark:text-zinc-400 mb-2">

resources/views/livewire/pages/posts/index.blade.php

@@ -73,7 +73,7 @@ new #[Layout('components.layouts.public')] class extends Component
         @if($search)
             <button
                 wire:click="clearSearch"
-                class="absolute {{ app()->getLocale() === 'ar' ? 'left-3' : 'right-3' }} top-1/2 -translate-y-1/2 text-charcoal/50 hover:text-charcoal"
+                class="absolute end-3 top-1/2 -translate-y-1/2 text-charcoal/50 hover:text-charcoal"
             >
                 <flux:icon name="x-mark" class="w-5 h-5" />
             </button>