# Story 9.8: RTL/LTR Layout Perfection

## Epic Reference
**Epic 9:** Design & Branding Implementation

## User Story
As a **user**,
I want **perfect RTL layout for Arabic and LTR for English**,
So that **the content is natural to read in my language**.

## Acceptance Criteria

### RTL (Arabic)
- [ ] Text aligns right
- [ ] Navigation mirrors (logo right)
- [ ] Form labels on right
- [ ] Icons/arrows flip appropriately
- [ ] Margins/paddings swap

### LTR (English)
- [ ] Standard left-to-right layout
- [ ] Proper text alignment

### Transitions
- [ ] Seamless language toggle
- [ ] No layout breaks on switch

### Component Support
- [ ] Calendar RTL support
- [ ] Tables RTL support
- [ ] All components tested in both modes

## Technical Notes

```css
/* Use logical properties */
.card {
  margin-inline-start: 1rem; /* margin-left in LTR, margin-right in RTL */
  padding-inline-end: 1rem;  /* padding-right in LTR, padding-left in RTL */
}

/* RTL-aware utilities */
[dir="rtl"] .flip-rtl {
  transform: scaleX(-1);
}

/* Tailwind RTL plugin configuration */
@theme {
  /* Use logical properties by default */
}
```

```blade
<!-- RTL-aware icon -->
<flux:icon
    name="arrow-right"
    @class(['flip-rtl' => app()->getLocale() === 'ar'])
/>

<!-- RTL-aware positioning -->
<div class="{{ app()->getLocale() === 'ar' ? 'right-0' : 'left-0' }} absolute">
    <!-- Content -->
</div>

<!-- Better: Use logical properties -->
<div class="start-0 absolute">
    <!-- Content -->
</div>
```

### Testing Checklist
- [ ] Navigation layout
- [ ] Form layouts
- [ ] Card layouts
- [ ] Table layouts
- [ ] Modal layouts
- [ ] Dropdown menus
- [ ] Pagination

## Definition of Done
- [ ] RTL renders correctly
- [ ] LTR renders correctly
- [ ] Language switch seamless
- [ ] Icons flip correctly
- [ ] All components tested
- [ ] No layout breaks
- [ ] Tests pass

## Estimation
**Complexity:** High | **Effort:** 5-6 hours