# معماری Theme

## 1. لایه Vendor

شامل Bootstrap، jQuery، DataTables، amCharts و سایر پلاگین‌ها است. این لایه دست‌نخورده باقی می‌ماند و در نسخه Demo از CDN بارگذاری می‌شود.

## 2. لایه Design Token

فایل `assets/css/theme-tokens.css` رنگ‌ها، تایپوگرافی، فاصله‌ها، شعاع‌ها، سایه‌ها و متغیرهای Day/Night را تعریف می‌کند.

## 3. لایه Override

- `bootstrap-overrides.css`: فقط کلاس‌های رسمی Bootstrap
- `plugins-overrides.css`: فقط کلاس‌های رسمی پلاگین‌ها

## 4. لایه Application UI

`app.css` و `responsive.css` اجزای اختصاصی ERP، Sidebar، Topbar، Dashboard و صفحات ماژول را می‌سازند.

## 5. لایه JavaScript

- `modules.js`: رجیستری ۱۷ ماژول و زیرماژول‌ها
- `theme.js`: مدیریت Day/Night و Local Storage
- `layout.js`: Sidebar، Command Palette و Responsive
- `plugins.js`: راه‌اندازی پلاگین‌ها
- `charts.js`: نمودارهای amCharts 5
- `app.js`: Bootstrap نهایی اپلیکیشن و صفحات پویا

## 6. اتصال Backend

برای CodeIgniter، بخش‌های تکراری HTML به Layout و Partial تبدیل می‌شوند. `modules.js` می‌تواند از API یا تنظیمات سمت سرور تولید شود. هیچ وابستگی Theme به Backend خاصی وجود ندارد.

## 7. نقشه ساختار

فایل `workflow.html` ساختار ماژول‌ها را به‌صورت HTML/SVG شبیه Visio نمایش می‌دهد و از همان رجیستری `modules.js` تغذیه می‌شود.