# Frontend Architecture Specification

## 1. Technology Stack
- **Templating:** Laravel Blade
- **Styling:** Bootstrap 5 & Tailwind CSS 4.x
- **Asset Bundler:** Vite
- **Interactivity:** Vanilla JS / Alpine.js (if applicable), AJAX for dynamic forms.

## 2. Layouts & Structure
- **Main Layouts:**
  - `layouts.app` (Dashboard/Admin layout with Sidebar and Navbar)
  - `layouts.blank` (Auth/Login pages)
- **Component Design:**
  - Use Blade Components (`resources/views/components/`) for reusable UI elements (e.g., custom select inputs, buttons, modals).

## 3. Localization (L10n) & RTL
- All user-facing text MUST use Laravel translation directives `{{ __('messages.key') }}`.
- Do not hardcode Arabic or English strings in views.
- Ensure proper RTL support utilizing `bootstrap-rtl` and Tailwind's `rtl:` modifiers.

## 4. UI/UX Standards (Premium UI)
- **Forms:** Use consistent classes (`form-control-lg`, `form-select`).
- **Modals:** Use a unified modal component (`showGlobalModal`) for confirmations and errors.
- **Feedback:** Provide immediate visual feedback (Toast notifications or SweetAlert) for success/error states, handled via Session flashes.

## 5. Asset Compilation
- Use `@vite(['resources/css/app.css', 'resources/js/app.js'])`.
- Fallback to CDNs (as defined in existing environment setups) if `npm`/`yarn` build is restricted.