# Settings Modal Architecture

The `settings.js` `initializeSettings()` function expects a full tabbed settings modal with these element IDs:

## Required elements

### Modal shell
- `settings-modal` — main modal container
- `settings-close-btn` — close button

### Tab navigation
- `business-info-tab-btn`, `service-advisor-tab-btn`, `financial-tab-btn`, `messages-tab-btn`, `services-tab-btn`
- Tab contents: `business-info-tab`, `service-advisor-tab`, `financial-tab`, `messages-tab`, `services-tab`

### Save buttons
- `business-info-save-btn`, `service-advisor-save-btn`, `financial-save-btn`, `messages-save-btn`

### Input fields (Business Info)
- `settings-business-name`, `settings-business-address`, `settings-business-phone`

### Input fields (Service Advisor)
- `settings-service-advisor`, `settings-advisor-phone`

### Input fields (Financial)
- `tax-rate-input`, `settings-shop-charge`, `settings-shop-charge-explanation`

### Input fields (Messages)
- `settings-header-message`, `settings-footer-message`, `settings-quote-footer-note`
- `settings-estimate-valid-days`, `settings-warranty-text`, `settings-terms-text`
- `settings-default-parts-delivery`

### Service management (in Services tab)
- `service-search-input-settings` — search within settings
- `add-service-btn` — opens add modal
- `services-list` — rendered list
- `add-service-modal-settings`, `add-service-name`, `add-service-price`, `add-service-recommendation`, `add-service-explanation`, `ai-write-btn-add-service`, `add-service-save-btn`, `add-service-cancel-btn`
- `service-edit-modal-settings`, `service-edit-name-settings`, `service-edit-price-settings`, `service-edit-recommendation-settings`, `service-edit-explanation-settings`, `ai-write-btn-settings`, `service-edit-save-btn-settings`, `service-edit-cancel-btn-settings`

## Behavior

If ANY required element is missing, `initializeSettings()` returns early with a console error and `settings-btn` gets no click handler. This is why the gear icon does nothing on pages without the full modal.

## Repair-orders.html fix

The repair-orders.html page had `account-settings-modal` (profile/preferences) and `site-settings-modal` (display/notifications/system) but lacked the full `settings-modal`. Solution: inserted the complete 5-tab modal + 2 sub-modals (add service, edit service) before the script tags. All element IDs must match exactly what settings.js expects.

## Service list rendering pitfall

`renderServicesList()` in settings.js originally displayed only `service.recommendation` — it never rendered `service.explanation`. The data was saved to Firestore correctly but invisible in the list. Fix: add explanation display as italic text below the recommendation line.