# UI Guidelines & Branding

## Brand Colors
| Name | Hex | Usage |
|---|---|---|
| Navy (Primary) | `#01203f` | Sidebar background, headings, primary buttons |
| Teal (Accent) | `#22cac3` | Accent buttons, active states, highlights, progress bars |
| White | `#ffffff` | Page background, cards |
| Light Gray | `#f8f9fa` | Card backgrounds, input backgrounds |
| Muted Text | `#64748b` | Subtitles, secondary labels |
| Border | `#e2e8f0` | Card borders, dividers |

## Typography
- **Primary Font:** `DIN Next LT Arabic` — supports both Arabic and Latin characters.
- Fallback stack: `'Segoe UI', Arial, sans-serif`
- Loaded from local assets or Google Fonts CDN.

## Layout Structure
```
[Header]  — White bar. Logo, global search, notifications bell, profile dropdown.
[Sidebar] — Navy (#01203f) vertical nav. Active link = Teal accent. Logo at top.
[Content] — Starts after sidebar. f8f9fa background. Padding 24–30px.
[Footer]  — Minimal. Included via footer.php.
```

## RTL / LTR Support
- The HTML `dir` attribute is set based on user language preference.
- Sidebar flips side automatically.
- All layouts must work in both directions.
- Use `me-*` / `ms-*` Bootstrap margin utilities (not `ml-*` / `mr-*`).

## Component Rules

### Buttons
- **Primary:** `background: #22cac3; color: #fff; border-radius: 10px;`
- **Secondary / Outline:** `border: 2px solid #01203f; color: #01203f;`
- **Danger:** Bootstrap `btn-danger` or custom red `#ef4444`.
- Loading state: replace button text with `<span class="spinner-border spinner-border-sm me-2"></span> Loading...` and `disabled`.

### Cards
- `background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);`

### Status Badges
| Status | Color |
|---|---|
| Active / Completed / Approved | Green `#10b981` |
| Pending / Under Review | Yellow/Amber `#f59e0b` |
| Draft | Gray `#94a3b8` |
| Revision / Warning | Blue `#3b82f6` |
| Cancelled / Error | Red `#ef4444` |

### Timeline (contract_details.php)
- Container: `.tl-container`
- Each event: `.tl-item` with status class `completed | pending | action-req | revision`, plus **`terminated`** and **`termination-pending`** for API events with `type: "termination"` (red / amber icon rings and `.tl-badge.terminated` / `.tl-badge.termination-pending`).
- Progress connector: `.tl-line`
- Action Required card: `.tl-action-card` (amber left border, UAE PASS button)
- **Signing progress** sidebar: optional `#stepTerminated` row (`.timeline-terminated-step`) for `termination_pending`, `terminated`, and `cancelled`.
- **Sticky footer:** hide **Withdraw** (`#btnWithdrawContract`) and **Revise** (`#btnReviseContract`) when status is `terminated` or `cancelled`; header status badge uses `.status-terminated` / `.status-review` as appropriate.

### Contract Review Document (contract_review.php)
- Mimics a legal PDF document on screen.
- White "paper" with box-shadow centered on a gray canvas.
- Zoom in/out controls.
- Toggle between English and Arabic document language.
- **Send contract:** the sticky footer’s primary action is shown only when the loaded payload’s `version_status` is `draft` (latest `contract_versions.review_status`). Already-sent versions are view-only aside from **Cancel** back to the editor.

## Deployment paths & API base (`LINKPROX_*`)
- Layout `header.php` and `login.php` set `window.LINKPROX_VIEWS_BASE`, `LINKPROX_PUBLIC_BASE`, `LINKPROX_API_BASE_V1`, and `LINKPROX_BASE_PATH` via `helpers/AppUrls.php`.
- `LINKPROX_BASE_PATH` in `.env` must be a **path** (`/` or `/subfolder`), never a bare hostname or full URL, or browser URL resolution and Axios `baseURL` will break.
- `window.__linkproxNormalizeViewsBase` (defined in header/login before guards) keeps `/views` paths absolute when needed.

## SweetAlert2
Used for all confirmations and loading states. Loaded via CDN in `header.php`.
```javascript
Swal.fire({ title: '...', html: '...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });
Swal.fire('Success', 'Message', 'success');
Swal.fire({ icon: 'warning', showCancelButton: true }).then(result => { if (result.isConfirmed) { ... } });
```

## Icons
Font Awesome 6 (Free) — loaded via CDN in `header.php`.
- Use `fa-solid` class for filled icons.
- Example: `<i class="fa-solid fa-file-contract"></i>`

## JavaScript Patterns

### Loading a page
```javascript
document.addEventListener('DOMContentLoaded', async () => {
    const res = await window.API.getContractReviewData(contractId);
    if (res.status === 'success') renderPage(res.data);
    else Swal.fire('Error', res.message, 'error');
});
```

### Sending data
```javascript
const res = await window.API.post('/company/contracts/send?contract_id=' + id);
if (res.status === 'success') window.location.reload();
```

### Adding a new API method (api.js)
```javascript
// In the window.API object:
myNewAction: (id) => apiClient.post('/company/contracts/my-action?contract_id=' + id),
```