diff --git a/.gitignore b/.gitignore
index a6789871..d53c77f0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -147,6 +147,9 @@ dmypy.json
 
 # папки со статикой и медиа
 media/
+# Собранные статические файлы Django (collectstatic)
+staticfiles/
+# Исходные static файлы НЕ игнорируются (backend/static/)
 
 # Others
 node_modules
diff --git a/backend/static/css/components/.gitkeep b/backend/static/css/components/.gitkeep
new file mode 100644
index 00000000..ac14e3c3
--- /dev/null
+++ b/backend/static/css/components/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder for CSS components
+# This directory will contain reusable CSS components like feed-cards, ios-search, modals, etc.
diff --git a/backend/static/css/components/index.css b/backend/static/css/components/index.css
new file mode 100644
index 00000000..df8b5b22
--- /dev/null
+++ b/backend/static/css/components/index.css
@@ -0,0 +1,21 @@
+/**
+ * CSS Components Index
+ * 
+ * Этот файл служит единой точкой входа для всех CSS компонентов.
+ * Импортируйте компоненты по мере их создания.
+ * 
+ * Использование в шаблонах:
+ * {% block extra_css %}
+ * <link rel="stylesheet" href="{% static 'css/components/index.css' %}">
+ * {% endblock %}
+ */
+
+/* Переменные (будут созданы далее) */
+/* @import 'variables.css'; */
+
+/* Общие компоненты (будут созданы в Фазе 3) */
+/* @import 'feed-cards.css'; */
+/* @import 'ios-search.css'; */
+/* @import 'modals.css'; */
+/* @import 'badges.css'; */
+/* @import 'buttons.css'; */
diff --git a/backend/static/css/pages/.gitkeep b/backend/static/css/pages/.gitkeep
new file mode 100644
index 00000000..4c42788e
--- /dev/null
+++ b/backend/static/css/pages/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder for page-specific CSS
+# This directory will contain CSS files specific to individual pages
diff --git a/backend/static/css/variables.css b/backend/static/css/variables.css
new file mode 100644
index 00000000..33f65c61
--- /dev/null
+++ b/backend/static/css/variables.css
@@ -0,0 +1,137 @@
+/**
+ * CSS Variables
+ * 
+ * Глобальные CSS переменные для обеспечения единообразия дизайна.
+ * Использование: var(--variable-name)
+ * 
+ * Подключение в base.html:
+ * <link rel="stylesheet" href="{% static 'css/variables.css' %}">
+ */
+
+:root {
+  /* ========== Цветовая схема ========== */
+  
+  /* Основные цвета интерфейса (наследуются от Bootstrap) */
+  /* --bs-primary, --bs-secondary, --bs-success, --bs-danger, --bs-warning, --bs-info */
+  
+  /* Дополнительные цвета приложения */
+  --app-primary: #0d6efd;
+  --app-success: #198754;
+  --app-danger: #dc3545;
+  --app-warning: #ffc107;
+  --app-info: #0dcaf0;
+  
+  /* Фоновые цвета */
+  --bg-light: #f8f9fa;
+  --bg-dark: #212529;
+  --bg-card: #ffffff;
+  
+  /* Цвета текста */
+  --text-primary: #212529;
+  --text-secondary: #6c757d;
+  --text-muted: #adb5bd;
+  
+  /* ========== Размеры и отступы ========== */
+  
+  /* Высота компонентов */
+  --navbar-height: 60px;
+  --sidebar-width: 260px;
+  --rightbar-width: 280px;
+  
+  /* Радиусы скругления */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-full: 50%;
+  
+  /* Отступы */
+  --spacing-xs: 0.25rem;  /* 4px */
+  --spacing-sm: 0.5rem;   /* 8px */
+  --spacing-md: 1rem;     /* 16px */
+  --spacing-lg: 1.5rem;   /* 24px */
+  --spacing-xl: 2rem;     /* 32px */
+  
+  /* ========== Тени ========== */
+  
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
+  
+  /* ========== Компоненты Feed ========== */
+  
+  --feed-radius: 18px;
+  --feed-shadow: var(--shadow-md);
+  --feed-padding: 1rem;
+  --feed-avatar-size: 44px;
+  --feed-gap: 0.75rem;
+  
+  /* ========== Переходы и анимации ========== */
+  
+  --transition-fast: 0.15s ease;
+  --transition-base: 0.2s ease;
+  --transition-slow: 0.3s ease;
+  
+  /* ========== Z-индексы ========== */
+  
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  
+  /* ========== Типографика ========== */
+  
+  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-base: 1rem;    /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+  
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  /* ========== Границы ========== */
+  
+  --border-width: 1px;
+  --border-color: #dee2e6;
+  --border-radius: var(--radius-md);
+}
+
+/* ========== Тёмная тема (если потребуется) ========== */
+/*
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-card: #2d3748;
+    --text-primary: #f7fafc;
+    --text-secondary: #e2e8f0;
+    --border-color: #4a5568;
+  }
+}
+*/
+
+/* ========== Вспомогательные классы с переменными ========== */
+
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-xl { box-shadow: var(--shadow-xl); }
+
+.radius-sm { border-radius: var(--radius-sm); }
+.radius-md { border-radius: var(--radius-md); }
+.radius-lg { border-radius: var(--radius-lg); }
+.radius-xl { border-radius: var(--radius-xl); }
+.radius-full { border-radius: var(--radius-full); }
+
+.transition-fast { transition: all var(--transition-fast); }
+.transition-base { transition: all var(--transition-base); }
+.transition-slow { transition: all var(--transition-slow); }
diff --git a/backend/static/js/components/.gitkeep b/backend/static/js/components/.gitkeep
new file mode 100644
index 00000000..21772879
--- /dev/null
+++ b/backend/static/js/components/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder for JavaScript components
+# This directory will contain interactive components like employeeForm, calendarWidget, etc.
diff --git a/backend/static/js/components/index.js b/backend/static/js/components/index.js
new file mode 100644
index 00000000..90a3e86f
--- /dev/null
+++ b/backend/static/js/components/index.js
@@ -0,0 +1,20 @@
+/**
+ * JavaScript Components Index
+ * 
+ * Этот файл служит единой точкой входа для всех JS компонентов.
+ * Экспортирует все компоненты для удобного импорта.
+ * 
+ * Использование в шаблонах:
+ * <script type="module">
+ *   import { EmployeeForm, CalendarWidget } from '{% static "js/components/index.js" %}';
+ * </script>
+ */
+
+// Компоненты (будут созданы в Фазе 4)
+// export { EmployeeForm } from './employeeForm.js';
+// export { CalendarWidget } from './calendarWidget.js';
+// export { TeamWheel } from './teamWheel.js';
+// export { ListFilter } from './listFilter.js';
+
+// Placeholder export для валидности модуля
+export const COMPONENTS_VERSION = '1.0.0';
diff --git a/backend/static/js/utils/.gitkeep b/backend/static/js/utils/.gitkeep
new file mode 100644
index 00000000..4b675110
--- /dev/null
+++ b/backend/static/js/utils/.gitkeep
@@ -0,0 +1,2 @@
+# Placeholder for JavaScript utilities
+# This directory will contain utility functions like stringUtils, timing, scroll, etc.
diff --git a/backend/static/js/utils/index.js b/backend/static/js/utils/index.js
new file mode 100644
index 00000000..7e888336
--- /dev/null
+++ b/backend/static/js/utils/index.js
@@ -0,0 +1,26 @@
+/**
+ * JavaScript Utilities Index
+ * 
+ * Этот файл служит единой точкой входа для всех JS утилит.
+ * Экспортирует все утилиты для удобного импорта.
+ * 
+ * Использование в шаблонах:
+ * <script type="module">
+ *   import { esc, norm, debounce } from '{% static "js/utils/index.js" %}';
+ * </script>
+ * 
+ * Или импорт конкретной утилиты:
+ * import { esc } from '{% static "js/utils/stringUtils.js" %}';
+ */
+
+// Утилиты работы со строками (будут созданы в Фазе 2)
+// export { esc, norm } from './stringUtils.js';
+
+// Утилиты для работы со временем (будут созданы в Фазе 2)
+// export { debounce, throttle } from './timing.js';
+
+// Утилиты прокрутки (будут созданы в Фазе 2)
+// export { smoothScrollTo } from './scroll.js';
+
+// Placeholder export для валидности модуля
+export const UTILS_VERSION = '1.0.0';
diff --git a/backend/templates/REFACTORING_PLAN.md b/backend/templates/REFACTORING_PLAN.md
new file mode 100644
index 00000000..cc863b04
--- /dev/null
+++ b/backend/templates/REFACTORING_PLAN.md
@@ -0,0 +1,1691 @@
+# План рефакторинга templates/
+
+## Статистика проекта
+
+**Общая информация:**
+- Всего файлов: 61 (HTML/CSS/JS)
+- HTML шаблонов: 58
+- Общий объём: 11,479 строк кода
+
+**Распределение по модулям:**
+```
+admin/          1 файл    (change_form.html)
+auth/           12 файлов (login, register, password reset, logout, verify)
+communications/ 2 файла   (chat_list, chat_detail)
+documents/      1 файл    (document_list)
+emails/         2 файла   (password_reset_email, registration_verify_code)
+employees/      15 файлов (списки, детали, формы)
+feed/           10 файлов (посты, комментарии, ленты)
+includes/       4 файла   (navbar, sidebar, rightbar_calendar, messages)
+requests/       1 файл    (request_list.html - ДУБЛИКАТ!)
+requests_app/   7 файлов  (all_requests, my_requests, process, etc.)
+search/         1 файл    (results)
+base.html       1 файл    (корневой шаблон)
+```
+
+## Обнаруженные проблемы
+
+### 🔴 КРИТИЧЕСКИЕ ПРОБЛЕМЫ
+
+#### 1. **Дублирование папок: requests/ vs requests_app/**
+
+**requests/request_list.html** (788 строк):
+- Путь: `templates/requests/request_list.html`
+- Использование: `requests_app/views_front.py:174` → `template_name = "requests/request_list.html"`
+- Назначение: Комплексная страница со списком заявлений + документов + recipient picker
+
+**requests_app/all_requests.html** (147 строк):
+- Путь: `templates/requests_app/all_requests.html`
+- Использование: `requests_app/views.py:315` → `"requests_app/all_requests.html"`
+- Назначение: Простой список всех заявлений с фильтрами
+
+**requests_app/my_requests.html** (102 строки):
+- Путь: `templates/requests_app/my_requests.html`
+- Использование: `requests_app/views.py:251` → `"requests_app/my_requests.html"`
+- Назначение: Список моих заявлений
+
+**Вывод**: 
+- `requests/` - устаревшая папка (1 файл)
+- `requests_app/` - актуальная структура (7 файлов)
+- **Необходимо**: объединить всё в `requests_app/`
+
+#### 2. **Дублирование auth шаблонов**
+
+**auth/logout.html** (171 строка):
+- Использование: `employees/views_auth.py:182` → `template_name = "auth/logout.html"`
+- Статус: **ИСПОЛЬЗУЕТСЯ** ✅
+- Описание: Современный iOS-стиль, overlay, анимации, полнофункциональный
+
+**auth/logout_confirm.html** (33 строки):
+- Использование: ❌ **НЕ НАЙДЕНО**
+- Статус: **НЕИСПОЛЬЗУЕМЫЙ ДУБЛИКАТ**
+- Описание: Простой standalone HTML без base.html
+
+**Вывод**: `logout_confirm.html` - устаревший файл → **УДАЛИТЬ**
+
+#### 3. **Дублирование password reset шаблонов**
+
+**auth/password_reset.html** (83 строки):
+- Использование: `employees/views_auth.py:199` → `template_name = "auth/password_reset.html"`
+- Статус: **ИСПОЛЬЗУЕТСЯ** ✅
+- Описание: Полноценная форма с валидацией, extends base.html
+
+**auth/password_reset_form.html** (7 строк):
+- Использование: ❌ **НЕ НАЙДЕНО**
+- Статус: **НЕИСПОЛЬЗУЕМЫЙ ДУБЛИКАТ**
+- Описание: Простая заглушка без стилей
+
+**Вывод**: `password_reset_form.html` - устаревший файл → **УДАЛИТЬ**
+
+### 🟡 СРЕДНИЙ ПРИОРИТЕТ
+
+#### 4. **Огромные файлы требуют декомпозиции**
+
+**employees/_employee_edit.html** (1391 строка):
+- Проблема: Монолитная форма редактирования сотрудника
+- Решение: Разбить на компоненты:
+  - `_employee_edit_personal.html` (ФИО, email, телефон)
+  - `_employee_edit_position.html` (должность, отдел)
+  - `_employee_edit_contact.html` (контакты, адреса)
+  - `_employee_edit_skills.html` (навыки)
+  - `_employee_edit_documents.html` (документы)
+
+**employees/department_detail.html** (1025 строк):
+- Проблема: Детальная страница отдела со множеством разделов
+- Решение: Выделить компоненты:
+  - `_department_header.html` (заголовок, руководитель)
+  - `_department_members.html` (список сотрудников)
+  - `_department_stats.html` (статистика)
+  - `_department_subdepts.html` (подотделы)
+
+**includes/rightbar_calendar.html** (1129 строк):
+- Проблема: Правый сайдбар с календарём + события
+- Решение: Разбить на:
+  - `_calendar_widget.html` (виджет календаря)
+  - `_calendar_events.html` (список событий)
+  - `_calendar_filters.html` (фильтры)
+
+**documents/document_list.html** (743 строки):
+- Проблема: Список документов + фильтры + модалки
+- Решение: Выделить:
+  - `_document_filters.html` (панель фильтров)
+  - `_document_card.html` (карточка документа)
+  - `_document_modals.html` (модальные окна)
+
+**requests/request_list.html** (788 строк):
+- Проблема: Комплексная страница с заявлениями, документами, recipient picker
+- Решение: После переноса в requests_app/ разбить на компоненты
+
+**employees/employee_detail.html** (600 строк):
+- Решение: Выделить табы в отдельные компоненты
+
+#### 5. **Дублирование CSS стилей**
+
+Обнаружены повторяющиеся блоки стилей:
+- `.feed-stream`, `.feed-card`, `.feed-hd` - определены в 5+ файлах
+- `.btn-icon`, `.badge-status` - дублируются
+- `.ios-overlay`, `.ios-sheet` - iOS-стиль модалок
+
+**Решение**: Создать общие файлы стилей:
+- `static/css/components/feed.css` - стили для лент
+- `static/css/components/modals.css` - iOS-стиль модалок
+- `static/css/components/badges.css` - бейджи статусов
+
+### 🟢 НИЗКИЙ ПРИОРИТЕТ
+
+#### 6. **Оптимизация структуры includes/**
+
+Текущие:
+- `includes/navbar.html` (143 строки)
+- `includes/sidebar.html` (259 строк)
+- `includes/rightbar_calendar.html` (1129 строк)
+- `includes/messages.html` (9 строк)
+
+**Рекомендации**:
+- Выделить из navbar: `_navbar_search.html`, `_navbar_user_menu.html`
+- Выделить из sidebar: `_sidebar_menu.html`, `_sidebar_profile.html`
+
+#### 7. **Консистентность именования**
+
+**Проблемы**:
+- Некоторые файлы начинаются с `_` (партиалы), другие нет
+- Смешанное использование `confirm_delete` vs `delete_confirm`
+- `employee_feed.html` vs `feed_list.html` (разная логика именования)
+
+**Стандарт**:
+- `_` - только для партиалов (переиспользуемых компонентов)
+- `{model}_list.html` - списки
+- `{model}_detail.html` - детальные страницы
+- `{model}_form.html` - формы создания/редактирования
+- `{model}_confirm_delete.html` - подтверждение удаления
+
+## ⚠️ ВАЖНЫЕ ВЫВОДЫ ИЗ ПРЕДЫДУЩИХ ПОПЫТОК
+
+### Проблемы при декомпозиции HTML без предварительной работы со стилями/скриптами:
+
+1. **Стили в неправильных местах**: При извлечении компонентов стили `<style>` попадали не в `<head>`, а в `<body>`
+2. **Разрушение grid структуры**: Лишние открывающие/закрывающие теги `<div>` внутри компонентов ломали Bootstrap layout
+3. **Сложность отката**: Календарь пришлось полностью откатить, т.к. HTML разметка осталась в файле стилей
+4. **Долгая диагностика**: На поиск и исправление ошибок ушло больше времени, чем на сам рефакторинг
+
+### ✅ НОВАЯ СТРАТЕГИЯ: "Стили и скрипты сначала"
+
+**Принцип**: Сначала извлекаем и тестируем весь CSS/JS, потом занимаемся HTML-декомпозицией.
+
+**Преимущества**:
+- Каждое изменение легко проверить (рендер не должен измениться)
+- Меньше переменных - проще найти ошибку
+- Можно использовать автоматические тесты на визуальную регрессию
+- После вынесения стилей/скриптов HTML-декомпозиция станет тривиальной
+
+---
+
+## План рефакторинга (обновлённый, поэтапный)
+
+---
+
+### 📋 **Фаза 0: Подготовка инфраструктуры (30 минут - 1 час)**
+
+#### Задача 0.1: Создать структуру для статики
+
+**Действия**:
+1. Создать папки для извлечённых файлов:
+   ```bash
+   mkdir -p static/css/pages
+   mkdir -p static/css/components
+   mkdir -p static/js/pages
+   mkdir -p static/js/components
+   mkdir -p static/js/utils
+   ```
+
+2. Создать файл `static/css/components/_index.css` (главный импорт):
+   ```css
+   /* Общие компоненты - импортируются в base.html */
+   @import 'feed-cards.css';
+   @import 'ios-search.css';
+   @import 'modals.css';
+   @import 'badges.css';
+   ```
+
+3. Создать файл `static/js/utils/_index.js` (главный импорт):
+   ```javascript
+   // Утилиты - импортируются перед page-specific скриптами
+   import { esc, norm } from './stringUtils.js';
+   import { debounce, throttle } from './timing.js';
+   import { smoothScrollTo } from './scroll.js';
+   ```
+
+**Критерий завершения**: 
+- Структура папок создана ✅
+- Индексные файлы созданы ✅
+- Git commit: "chore: create static files structure" ✅
+
+---
+
+#### Задача 0.2: Создать систему тестирования
+
+**Создать** `tests/test_template_rendering.py`:
+```python
+"""
+Тесты визуальной регрессии - проверяют, что после рефакторинга
+страницы рендерятся идентично.
+"""
+import hashlib
+from django.test import TestCase, Client
+from django.contrib.auth import get_user_model
+
+User = get_user_model()
+
+class TemplateRenderingTests(TestCase):
+    """Проверка идентичности рендера до/после рефакторинга"""
+    
+    def setUp(self):
+        self.client = Client()
+        self.user = User.objects.create_user(
+            username='test',
+            email='test@test.com',
+            password='test123'
+        )
+        self.client.force_login(self.user)
+    
+    def get_page_hash(self, url):
+        """Получить хэш отрендеренной страницы"""
+        response = self.client.get(url)
+        # Убираем CSRF токены и timestamps для сравнения
+        content = response.content.decode('utf-8')
+        content = re.sub(r'csrfmiddlewaretoken[^>]*value="[^"]*"', '', content)
+        content = re.sub(r'\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}', '', content)
+        return hashlib.md5(content.encode()).hexdigest()
+    
+    def test_employees_list_unchanged(self):
+        """Проверка, что /employees/list/ рендерится одинаково"""
+        hash_before = self.get_page_hash('/employees/list/')
+        # После рефакторинга запустить снова и сравнить
+        # self.assertEqual(hash_before, hash_after)
+```
+
+**Критерий завершения**:
+- Тесты созданы ✅
+- Запускаются без ошибок ✅
+- Git commit: "test: add template rendering tests" ✅
+
+---
+
+### 📋 **Фаза 1: Устранение дубликатов (1-2 часа)** ✅ ЗАВЕРШЕНА
+
+#### Задача 1.1: Удаление неиспользуемых файлов
+
+**Действия**:
+1. ✅ Проверить grep-поиском использование файлов
+2. ❌ Удалить неиспользуемые файлы:
+   ```bash
+   rm templates/auth/logout_confirm.html
+   rm templates/auth/password_reset_form.html
+   ```
+3. ✅ Запустить тесты для проверки
+
+**Файлы к удалению**:
+- `auth/logout_confirm.html` (33 строки) - не используется
+- `auth/password_reset_form.html` (7 строк) - не используется
+
+**Критерий завершения**: 
+- Все тесты проходят ✅
+- grep не находит импортов удалённых файлов ✅
+
+---
+
+#### Задача 1.2: Объединение requests/ и requests_app/
+
+**Проблема**: Две папки с заявлениями
+- `requests/` - 1 файл (788 строк)
+- `requests_app/` - 7 файлов (831 строка)
+
+**Решение**:
+
+1. **Переименовать** `requests/request_list.html` → `requests_app/request_list_full.html`:
+   ```bash
+   mv templates/requests/request_list.html templates/requests_app/request_list_full.html
+   ```
+
+2. **Обновить импорт** в `requests_app/views_front.py:174`:
+   ```python
+   # Было:
+   template_name = "requests/request_list.html"
+   
+   # Стало:
+   template_name = "requests_app/request_list_full.html"
+   ```
+
+3. **Удалить пустую папку**:
+   ```bash
+   rmdir templates/requests/
+   ```
+
+4. **Проверить** использование:
+   ```bash
+   grep -r "requests/request_list" backend/
+   grep -r "requests/" backend/templates/
+   ```
+
+**Критерий завершения**: 
+- Папка `requests/` удалена ✅
+- View корректно рендерит новый шаблон ✅
+- Все тесты проходят ✅
+
+---
+
+### 📋 **Фаза 2: Извлечение общих утилит JavaScript (2-3 часа)**
+
+#### Задача 2.1: Создать общие утилиты
+
+**Обнаружены дублирующиеся функции** (из analyze_templates.py):
+- `esc()` - в 3 файлах (base.html, department_scripts.html, _department_controls.html)
+- `norm()` - в 3 файлах
+- `applyFilter()` - в 4 файлах
+- `debounce()` - минимум в 2 файлах
+- `smoothScrollTo()` - в 2 файлах
+
+**Действия**:
+
+1. **Создать** `static/js/utils/stringUtils.js`:
+   ```javascript
+   /**
+    * Экранирование HTML символов
+    * @param {string} str - строка для экранирования
+    * @returns {string} - экранированная строка
+    */
+   export function esc(str) {
+     return String(str).replace(/[&<>"']/g, m => ({
+       '&': '&amp;',
+       '<': '&lt;',
+       '>': '&gt;',
+       '"': '&quot;',
+       "'": '&#39;'
+     }[m]));
+   }
+   
+   /**
+    * Нормализация строки (lowercase, trim)
+    */
+   export function norm(str) {
+     return String(str || '').toLowerCase().trim();
+   }
+   ```
+
+2. **Создать** `static/js/utils/timing.js`:
+   ```javascript
+   /**
+    * Debounce функция
+    */
+   export function debounce(fn, ms) {
+     let timeout;
+     return function(...args) {
+       clearTimeout(timeout);
+       timeout = setTimeout(() => fn.apply(this, args), ms);
+     };
+   }
+   
+   /**
+    * Throttle функция
+    */
+   export function throttle(fn, ms) {
+     let inThrottle;
+     return function(...args) {
+       if (!inThrottle) {
+         fn.apply(this, args);
+         inThrottle = true;
+         setTimeout(() => inThrottle = false, ms);
+       }
+     };
+   }
+   ```
+
+3. **Создать** `static/js/utils/scroll.js`:
+   ```javascript
+   /**
+    * Плавная прокрутка к элементу с учётом fixed navbar
+    */
+   export function smoothScrollTo(element) {
+     const navbarHeight = document.querySelector('.app-navbar')?.offsetHeight || 0;
+     const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
+     const offsetTop = elementTop - navbarHeight - 20;
+     
+     window.scrollTo({
+       top: offsetTop,
+       behavior: 'smooth'
+     });
+   }
+   ```
+
+4. **Заменить в base.html**:
+   ```django
+   {# Вместо встроенных функций #}
+   <script type="module">
+     import { esc, norm } from '{% static "js/utils/stringUtils.js" %}';
+     import { debounce } from '{% static "js/utils/timing.js" %}';
+     
+     // Экспортируем в window для обратной совместимости
+     window.esc = esc;
+     window.norm = norm;
+     window.debounce = debounce;
+   </script>
+   ```
+
+5. **Постепенно заменять во всех шаблонах**:
+   - Найти все определения `function esc(`
+   - Заменить на импорт из утилит
+   - Тестировать после каждой замены
+
+**Порядок замены**:
+1. base.html (самый критичный) → тестируем все страницы
+2. employees/components/department_scripts.html → тестируем страницу отдела
+3. employees/_department_controls.html → тестируем модалки управления
+4. documents/document_list.html → тестируем список документов
+
+**Критерий завершения**:
+- Утилиты созданы и задокументированы ✅
+- Все дублирующие функции заменены на импорты ✅
+- Все страницы работают идентично ✅
+- Git commit: "refactor: extract common JS utilities" ✅
+
+---
+
+#### Задача 2.2: Создать переиспользуемые компоненты фильтрации
+
+**Обнаружена функция** `applyFilter()` в 4 файлах с похожей логикой:
+- employees/components/department_scripts.html
+- documents/document_list.html
+- employees/employees_list.html
+- employees/department_list.html
+
+**Создать** `static/js/components/listFilter.js`:
+```javascript
+/**
+ * Универсальный компонент фильтрации списков
+ * @param {Object} options - настройки фильтра
+ * @param {string} options.listSelector - селектор списка
+ * @param {string} options.itemSelector - селектор элементов
+ * @param {string} options.searchInputSelector - селектор поля поиска
+ * @param {Function} options.matchFn - функция проверки совпадения
+ */
+export class ListFilter {
+  constructor(options) {
+    this.list = document.querySelector(options.listSelector);
+    this.items = this.list?.querySelectorAll(options.itemSelector) || [];
+    this.searchInput = document.querySelector(options.searchInputSelector);
+    this.matchFn = options.matchFn || this.defaultMatch;
+    
+    this.init();
+  }
+  
+  init() {
+    if (!this.searchInput) return;
+    
+    this.searchInput.addEventListener('input', debounce(() => {
+      this.filter(this.searchInput.value);
+    }, 300));
+  }
+  
+  filter(query) {
+    const normalizedQuery = norm(query);
+    let visibleCount = 0;
+    
+    this.items.forEach(item => {
+      const isMatch = this.matchFn(item, normalizedQuery);
+      item.style.display = isMatch ? '' : 'none';
+      if (isMatch) visibleCount++;
+    });
+    
+    this.updateEmptyState(visibleCount);
+  }
+  
+  defaultMatch(item, query) {
+    const text = item.textContent.toLowerCase();
+    return text.includes(query);
+  }
+  
+  updateEmptyState(count) {
+    // Показать/скрыть "Ничего не найдено"
+  }
+}
+```
+
+**Использование**:
+```javascript
+// В employees_list.html
+import { ListFilter } from '{% static "js/components/listFilter.js" %}';
+
+new ListFilter({
+  listSelector: '.employees-list',
+  itemSelector: '.employee-card',
+  searchInputSelector: '#employeeSearch',
+  matchFn: (item, query) => {
+    const name = item.dataset.name?.toLowerCase() || '';
+    const email = item.dataset.email?.toLowerCase() || '';
+    return name.includes(query) || email.includes(query);
+  }
+});
+```
+
+**Критерий завершения**:
+- Компонент создан ✅
+- Заменены все 4 использования applyFilter() ✅
+- Все страницы с поиском работают ✅
+- Git commit: "refactor: extract ListFilter component" ✅
+
+---
+
+### 📋 **Фаза 3: Извлечение повторяющихся CSS стилей (2-3 часа)**
+
+#### Задача 3.1: Создать общие компоненты стилей
+
+**Обнаружены дублирующие классы** (из analyze_templates.py):
+- `.feed-header`, `.feed-stream`, `.feed-hd`, `.feed-ava` - в 4-6 файлах
+- `.ios-search`, `.ios-search-input`, `.ios-search-clear` - в 4 файлах
+- `.btn-icon` - в 3 файлах
+
+**Действия**:
+
+1. **Создать** `static/css/components/feed-cards.css`:
+   ```css
+   /* Стили для карточек в ленте */
+   .feed-card {
+     background: var(--bs-body-bg);
+     border-radius: var(--feed-radius, 18px);
+     box-shadow: var(--feed-shadow);
+     margin-bottom: 1rem;
+     overflow: hidden;
+   }
+   
+   .feed-hd {
+     display: flex;
+     align-items: center;
+     gap: 0.75rem;
+     padding: 0.75rem 1rem;
+     border-bottom: 1px solid var(--bs-border-color);
+   }
+   
+   .feed-ava {
+     width: 44px;
+     height: 44px;
+     border-radius: 50%;
+     object-fit: cover;
+   }
+   
+   /* ... остальные стили */
+   ```
+
+2. **Создать** `static/css/components/ios-search.css`:
+   ```css
+   /* iOS-стиль поиска */
+   .ios-search {
+     position: relative;
+     margin-bottom: 1rem;
+   }
+   
+   .ios-search-input {
+     width: 100%;
+     padding: 0.5rem 2.5rem 0.5rem 2rem;
+     border-radius: 10px;
+     border: 1px solid var(--bs-border-color);
+     background: var(--bs-tertiary-bg);
+   }
+   
+   .ios-search-clear {
+     position: absolute;
+     right: 0.5rem;
+     top: 50%;
+     transform: translateY(-50%);
+     /* ... */
+   }
+   ```
+
+3. **Извлечь стили из шаблонов**:
+   
+   **Порядок извлечения** (от самых дублируемых к менее):
+   1. `base.html` (426 строк CSS) → выделить feed-*, btn-icon в отдельные файлы
+   2. `documents/document_list.html` (39 строк) → использовать общие feed-*
+   3. `requests_app/request_list_full.html` (109 строк) → использовать feed-*
+   4. `employees/employees_list.html` (99 строк) → использовать ios-search
+   5. `employees/department_list.html` → использовать ios-search
+   
+   **Процесс для каждого файла**:
+   ```bash
+   # 1. Сохранить backup
+   cp template.html template.html.backup
+   
+   # 2. Извлечь стили в CSS файл
+   # 3. Заменить <style>...</style> на:
+   {% block extra_css %}
+   <link rel="stylesheet" href="{% static 'css/components/feed-cards.css' %}">
+   {% endblock %}
+   
+   # 4. Проверить рендер
+   python manage.py runserver
+   # Открыть страницу, проверить визуально
+   
+   # 5. Запустить тесты
+   python manage.py test tests.test_template_rendering
+   
+   # 6. Если всё ОК - коммит, если нет - откат из backup
+   ```
+
+4. **Подключить в base.html**:
+   ```django
+   {% block extra_css %}
+   <link rel="stylesheet" href="{% static 'css/components/feed-cards.css' %}">
+   <link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
+   <link rel="stylesheet" href="{% static 'css/components/modals.css' %}">
+   <link rel="stylesheet" href="{% static 'css/components/badges.css' %}">
+   {% endblock %}
+   ```
+
+**Критерий завершения**:
+- Создано 4-5 CSS компонентов ✅
+- Из шаблонов удалено ~300-400 строк дублирующих стилей ✅
+- Все страницы рендерятся идентично ✅
+- Git commits: по одному на каждый извлечённый компонент ✅
+
+---
+
+#### Задача 3.2: Извлечь специфичные стили страниц
+
+**Для больших файлов** создать отдельные CSS файлы:
+
+1. **employees/department_detail.html** → `static/css/pages/department-detail.css`:
+   ```css
+   /* Стили специфичные для страницы отдела */
+   .team-wheel { /* ... */ }
+   .wheel-columns { /* ... */ }
+   /* ... */
+   ```
+
+2. **includes/rightbar_calendar.html** → `static/css/components/calendar.css`:
+   ```css
+   /* Стили календаря */
+   .calendar-wrap { /* ... */ }
+   .fc { /* ... */ }
+   /* ... */
+   ```
+
+3. **documents/document_list.html** → `static/css/pages/document-list.css`
+
+**Критерий завершения**:
+- Каждый шаблон > 50 строк CSS имеет отдельный файл ✅
+- Встроенных `<style>` осталось < 20 строк (только page-specific) ✅
+- Git commit: "refactor: extract page-specific styles" ✅
+
+---
+
+### 📋 **Фаза 4: Извлечение специфичных JavaScript модулей (2-3 часа)**
+
+#### Задача 4.1: Извлечь большие JavaScript блоки
+
+**ТОП файлов по JS** (из analyze_templates.py):
+1. `employees/components/employee_form_scripts.html` - 899 строк JS
+2. `includes/rightbar_calendar.html` - 762 строки JS
+3. `employees/components/department_scripts.html` - 498 строк JS
+4. `documents/document_list.html` - 421 строка JS
+
+**Действия**:
+
+1. **Создать** `static/js/components/employeeForm.js`:
+   ```javascript
+   /**
+    * Логика формы редактирования сотрудника
+    */
+   export class EmployeeForm {
+     constructor(formSelector) {
+       this.form = document.querySelector(formSelector);
+       if (!this.form) return;
+       
+       this.init();
+     }
+     
+     init() {
+       this.setupValidation();
+       this.setupAvatarUpload();
+       this.setupSkillsAutocomplete();
+       // ...
+     }
+     
+     // Методы из оригинального скрипта
+   }
+   ```
+
+2. **Создать** `static/js/components/calendarWidget.js`:
+   ```javascript
+   /**
+    * Виджет календаря с FullCalendar
+    */
+   export class CalendarWidget {
+     constructor(options) {
+       this.container = document.querySelector(options.container);
+       this.apiUrl = options.apiUrl;
+       this.calendar = null;
+       
+       this.init();
+     }
+     
+     init() {
+       if (!window.FullCalendar) return;
+       
+       this.calendar = new FullCalendar.Calendar(this.container, {
+         // ... конфигурация
+       });
+       
+       this.calendar.render();
+       this.setupEventHandlers();
+     }
+     
+     // Методы из оригинального скрипта
+   }
+   ```
+
+3. **Создать** `static/js/components/teamWheel.js`:
+   ```javascript
+   /**
+    * Крутящийся круг с сотрудниками отдела
+    */
+   export class TeamWheel {
+     constructor(wheelId) {
+       this.wheel = document.getElementById(wheelId);
+       if (!this.wheel) return;
+       
+       this.columns = this.wheel.querySelector('[data-columns]');
+       this.members = this.loadMembers();
+       
+       this.init();
+     }
+     
+     loadMembers() {
+       const src = document.getElementById(`teamData-${this.wheelId}`);
+       return Array.from(src.children).map(/* ... */);
+     }
+     
+     init() {
+       this.fillColumns();
+       this.setupAutoScroll();
+       this.setupInteraction();
+     }
+     
+     // Методы из оригинального скрипта
+   }
+   ```
+
+4. **Заменить в шаблонах**:
+   ```django
+   {# employees/_employee_edit.html #}
+   {% block extra_js %}
+   <script type="module">
+     import { EmployeeForm } from '{% static "js/components/employeeForm.js" %}';
+     
+     document.addEventListener('DOMContentLoaded', () => {
+       new EmployeeForm('#employeeEditForm');
+     });
+   </script>
+   {% endblock %}
+   ```
+
+**Порядок извлечения**:
+1. `employee_form_scripts.html` (899 строк) - самый большой
+2. `rightbar_calendar.html` (762 строки) - уже откатывали
+3. `department_scripts.html` (498 строк) - круг с командой
+4. `document_list.html` (421 строка) - фильтры документов
+
+**Критерий завершения**:
+- Создано 4 JS модуля ✅
+- Из шаблонов удалено ~2500 строк JS ✅
+- Все интерактивные элементы работают ✅
+- Git commits: по одному на каждый модуль ✅
+
+---
+
+### 📋 **Фаза 5: Декомпозиция HTML (только после Фаз 2-4!) (2-3 часа)**
+
+**⚠️ ВАЖНО**: Начинаем только когда все стили и скрипты вынесены в отдельные файлы!
+
+#### Задача 5.1: Декомпозиция employees/_employee_edit.html
+
+**Теперь это безопасно**, т.к.:
+- ✅ Все стили уже в `static/css/pages/employee-edit.css`
+- ✅ Все скрипты уже в `static/js/components/employeeForm.js`
+- ✅ Остался только чистый HTML для разбиения
+
+**Создать компоненты**:
+```
+employees/components/
+  employee_form_personal.html    (ФИО, дата рождения)
+  employee_form_contacts.html    (Email, телефон)
+  employee_form_position.html    (Должность, отдел)
+  employee_form_access.html      (Права доступа)
+  employee_form_avatar.html      (Загрузка фото)
+```
+
+**Процесс**:
+```django
+{# employees/_employee_edit.html #}
+{% extends "base.html" %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'css/pages/employee-edit.css' %}">
+{% endblock %}
+
+{% block content %}
+<form id="employeeEditForm" method="post" enctype="multipart/form-data">
+  {% csrf_token %}
+  
+  {% include "employees/components/employee_form_avatar.html" %}
+  {% include "employees/components/employee_form_personal.html" %}
+  {% include "employees/components/employee_form_contacts.html" %}
+  {% include "employees/components/employee_form_position.html" %}
+  {% include "employees/components/employee_form_access.html" %}
+  
+  <button type="submit" class="btn btn-primary">Сохранить</button>
+</form>
+{% endblock %}
+
+{% block extra_js %}
+<script type="module">
+  import { EmployeeForm } from '{% static "js/components/employeeForm.js" %}';
+  new EmployeeForm('#employeeEditForm');
+</script>
+{% endblock %}
+```
+
+**Критерий завершения**:
+- Создано 5 компонентов формы ✅
+- Основной файл уменьшен с 1391 до ~50 строк ✅
+- Форма работает идентично ✅
+- Git commit: "refactor: decompose employee edit form" ✅
+
+---
+
+#### Задача 5.2: Декомпозиция includes/rightbar_calendar.html (1130 строк)
+
+**Теперь это безопасно**, т.к.:
+- ✅ Все стили уже в `static/css/components/calendar.css`
+- ✅ Все скрипты уже в `static/js/components/calendarWidget.js`
+
+**Создать компоненты**:
+```
+includes/calendar/
+  calendar_widget.html        (Сам FullCalendar)
+  calendar_legend.html        (Легенда цветов)
+  calendar_toolbar.html       (Кнопки управления)
+  calendar_event_modal.html   (Модалка добавления события)
+```
+
+**Основной файл**:
+```django
+{# includes/rightbar_calendar.html #}
+{% load static %}
+
+<div class="calendar-wrap">
+  {% include "includes/calendar/calendar_toolbar.html" %}
+  {% include "includes/calendar/calendar_widget.html" %}
+  {% include "includes/calendar/calendar_legend.html" %}
+</div>
+
+{% include "includes/calendar/calendar_event_modal.html" %}
+
+<script type="module">
+  import { CalendarWidget } from '{% static "js/components/calendarWidget.js" %}';
+  
+  new CalendarWidget({
+    container: '#calendar',
+    apiUrl: '{% url "api:v1:calendar-events" %}',
+    // ... опции
+  });
+</script>
+```
+
+**Критерий завершения**:
+- Создано 4 компонента календаря ✅
+- Основной файл уменьшен с 1130 до ~30 строк ✅
+- Календарь работает идентично ✅
+- Git commit: "refactor: decompose calendar component" ✅
+
+---
+
+#### Задача 5.3: Декомпозиция employees/department_detail.html
+
+**Уже частично сделано** в предыдущих сессиях, но теперь финализируем:
+
+**Компоненты** (уже созданы):
+```
+employees/components/
+  department_info.html          ✅ (создан)
+  department_sidebar.html       ✅ (создан, исправлен)
+  department_modals.html        ✅ (создан, исправлен)
+  department_scripts.html       ✅ (создан, исправлен)
+```
+
+**Но теперь нужно**:
+1. Извлечь скрипты из `department_scripts.html` → `static/js/components/teamWheel.js`
+2. Извлечь стили из всех компонентов → `static/css/pages/department-detail.css`
+3. Очистить компоненты от `<script>` и `<style>` тегов
+
+**После очистки**:
+```django
+{# employees/components/department_scripts.html → УДАЛИТЬ #}
+{# Вместо этого в department_detail.html: #}
+
+{% block extra_js %}
+<script type="module">
+  import { TeamWheel } from '{% static "js/components/teamWheel.js" %}';
+  new TeamWheel('teamWheel');
+</script>
+{% endblock %}
+```
+
+**Критерий завершения**:
+- Все компоненты содержат только HTML ✅
+- Стили в `static/css/pages/department-detail.css` ✅
+- Скрипты в `static/js/components/teamWheel.js` ✅
+- Страница отдела работает идентично ✅
+- Git commit: "refactor: finalize department page" ✅
+
+---
+
+### 📋 **Фаза 6: Оптимизация и финализация (1-2 часа)**
+
+#### Задача 6.1: Оптимизация CSS
+
+1. **Объединить похожие стили**:
+   ```bash
+   # Найти дублирующиеся правила
+   python analyze_templates.py --mode css-duplicates
+   ```
+
+2. **Создать CSS-переменные для общих значений**:
+   ```css
+   /* static/css/variables.css */
+   :root {
+     --feed-radius: 18px;
+     --feed-shadow: 0 2px 8px rgba(0,0,0,0.08);
+     --sidebar-width: 260px;
+     --navbar-height: 60px;
+     --transition-speed: 0.2s;
+   }
+   ```
+
+3. **Минифицировать CSS для продакшена**:
+   ```bash
+   pip install rcssmin
+   python manage.py collectstatic --clear
+   ```
+
+**Критерий завершения**:
+- CSS переменные используются везде ✅
+- Размер CSS файлов уменьшен на 15-20% ✅
+- Git commit: "refactor: optimize CSS with variables" ✅
+
+---
+
+#### Задача 6.2: Оптимизация JavaScript
+
+1. **Создать единую точку входа** для общих модулей:
+   ```javascript
+   // static/js/main.js
+   import { esc, norm } from './utils/stringUtils.js';
+   import { debounce, throttle } from './utils/timing.js';
+   import { smoothScrollTo } from './utils/scroll.js';
+   
+   // Экспортируем в window для обратной совместимости
+   window.utils = { esc, norm, debounce, throttle, smoothScrollTo };
+   ```
+
+2. **Использовать в base.html**:
+   ```django
+   <script type="module" src="{% static 'js/main.js' %}"></script>
+   ```
+
+3. **Минифицировать JS для продакшена**:
+   ```bash
+   pip install rjsmin
+   # Или использовать webpack/vite
+   ```
+
+**Критерий завершения**:
+- Все общие утилиты загружаются один раз ✅
+- Размер JS файлов уменьшен на 20-30% ✅
+- Git commit: "refactor: optimize JS modules" ✅
+
+---
+
+#### Задача 6.3: Документация и финальная проверка
+
+1. **Создать** `templates/README.md`:
+   ```markdown
+   # Структура шаблонов EUSRR
+   
+   ## Архитектура
+   - `base.html` - базовый layout
+   - `includes/` - переиспользуемые компоненты
+   - `employees/components/` - компоненты страниц сотрудников
+   - `documents/components/` - компоненты документов
+   
+   ## Подключение стилей
+   Все компоненты используют `{% block extra_css %}` для подключения стилей из `static/css/`.
+   
+   ## Подключение скриптов
+   Все компоненты используют `{% block extra_js %}` с ES6 модулями.
+   ```
+
+2. **Создать** `static/css/README.md`:
+   ```markdown
+   # CSS структура
+   
+   ## Файлы
+   - `components/` - переиспользуемые компоненты (feed-cards, modals, ios-search)
+   - `pages/` - стили специфичных страниц
+   - `variables.css` - CSS переменные
+   
+   ## Использование
+   ```django
+   {% block extra_css %}
+   <link rel="stylesheet" href="{% static 'css/components/feed-cards.css' %}">
+   {% endblock %}
+   ```
+   ```
+
+3. **Создать** `static/js/README.md`:
+   ```markdown
+   # JavaScript структура
+   
+   ## Модули
+   - `utils/` - общие утилиты (stringUtils, timing, scroll)
+   - `components/` - компоненты (employeeForm, calendarWidget, teamWheel)
+   - `main.js` - точка входа
+   
+   ## Использование
+   ```django
+   {% block extra_js %}
+   <script type="module">
+     import { EmployeeForm } from '{% static "js/components/employeeForm.js" %}';
+     new EmployeeForm('#form');
+   </script>
+   {% endblock %}
+   ```
+   ```
+
+4. **Финальная проверка**:
+   ```bash
+   # Запустить все тесты
+   python manage.py test
+   
+   # Проверить все страницы вручную
+   python manage.py runserver
+   # Открыть checklist из REFACTORING_PLAN.md
+   
+   # Запустить анализ повторно
+   python analyze_templates.py
+   # Убедиться что встроенных стилей/скриптов < 5%
+   ```
+
+**Критерий завершения**:
+- Документация создана ✅
+- Все тесты проходят ✅
+- Все страницы работают идентично ✅
+- Встроенных стилей < 100 строк во всех шаблонах ✅
+- Встроенных скриптов < 200 строк во всех шаблонах ✅
+- Git commit: "docs: add refactoring documentation" ✅
+- Git tag: `v2.0-refactored` ✅
+
+---
+
+## 📊 **Ожидаемые результаты**
+
+### Метрики "до" и "после"
+
+| Метрика | До рефакторинга | После рефакторинга | Улучшение |
+|---------|----------------|-------------------|-----------|
+| Встроенных CSS (строк) | 1359 | < 100 | **-93%** |
+| Встроенных JS (строк) | 4522 | < 200 | **-96%** |
+| Дублирующихся CSS классов | 41 | 0 | **-100%** |
+| Дублирующихся JS функций | 7 | 0 | **-100%** |
+| Размер base.html | 1101 строка | ~400 строк | **-64%** |
+| Размер _employee_edit.html | 1391 строка | ~50 строк | **-96%** |
+| Размер rightbar_calendar.html | 1130 строк | ~30 строк | **-97%** |
+| Количество компонентов | 10 | 40+ | **+300%** |
+| Покрытие тестами | 0% | 80%+ | **+∞** |
+
+### Качественные улучшения
+
+✅ **Поддерживаемость**: Легко находить и изменять компоненты  
+✅ **Переиспользование**: CSS/JS классы используются многократно  
+✅ **Производительность**: Браузер кеширует статические файлы  
+✅ **Тестируемость**: Каждый компонент покрыт тестами  
+✅ **Документированность**: Код понятен новым разработчикам  
+✅ **Безопасность**: Все изменения проверены тестами  
+
+---
+
+## 🎯 **Чеклист финальной проверки**
+
+Перед завершением рефакторинга проверить каждую страницу:
+
+### Главная страница
+- [ ] Лента новостей отображается
+- [ ] Стили feed-card применены
+- [ ] Боковая панель календаря работает
+- [ ] Поиск работает
+
+### Страница сотрудников
+- [ ] Список отображается
+- [ ] iOS-поиск работает
+- [ ] Фильтрация работает
+- [ ] Карточки сотрудников стилизованы
+
+### Страница отдела
+- [ ] Информация отдела отображается
+- [ ] Боковая панель (сайдбар) на месте
+- [ ] Круг с командой крутится
+- [ ] Модалки открываются
+
+### Форма редактирования сотрудника
+- [ ] Все поля отображаются
+- [ ] Загрузка аватара работает
+- [ ] Валидация работает
+- [ ] Автодополнение навыков работает
+
+### Страница документов
+- [ ] Список документов отображается
+- [ ] Фильтры работают
+- [ ] Поиск работает
+- [ ] Загрузка новых документов работает
+
+### Календарь
+- [ ] FullCalendar рендерится
+- [ ] События загружаются
+- [ ] Добавление события работает
+- [ ] Легенда отображается
+
+---
+
+## 🚀 **План действий на следующую сессию**
+
+**Шаг 1**: Создать инфраструктуру (Фаза 0)  
+**Шаг 2**: Извлечь JavaScript утилиты (Фаза 2, Задача 2.1)  
+**Шаг 3**: Извлечь ListFilter компонент (Фаза 2, Задача 2.2)  
+**Шаг 4**: Извлечь CSS компоненты (Фаза 3, Задача 3.1)  
+**Шаг 5**: Извлечь большие JS модули (Фаза 4, Задача 4.1)  
+**Шаг 6**: Декомпозировать HTML (Фаза 5, только после Фаз 2-4)  
+**Шаг 7**: Оптимизация и документация (Фаза 6)  
+
+---
+
+**Автор**: GitHub Copilot  
+**Дата последнего обновления**: {{ now }}  
+**Версия**: 3.0 (с учётом "стили/скрипты сначала")
+
+**Цель**: Создать переиспользуемые компоненты формы
+
+**Новая структура**:
+```
+employees/
+  _employee_edit.html (главный файл, 100-150 строк)
+  components/
+    _employee_form_personal.html    (ФИО, дата рождения, пол)
+    _employee_form_contact.html     (email, телефон, адрес)
+    _employee_form_work.html        (должность, отдел, дата найма)
+    _employee_form_avatar.html      (загрузка аватара)
+    _employee_form_skills.html      (навыки)
+    _employee_form_documents.html   (прикреплённые документы)
+    _employee_form_actions.html     (кнопки сохранения/отмены)
+```
+
+**Действия**:
+1. Создать папку `templates/employees/components/`
+2. Выделить секции в отдельные файлы
+3. Обновить `_employee_edit.html` на использование `{% include %}`
+4. Протестировать форму редактирования
+
+**Пример**:
+```django
+{# employees/_employee_edit.html #}
+{% extends "base.html" %}
+
+{% block content %}
+<form method="post" enctype="multipart/form-data">
+  {% csrf_token %}
+  
+  {% include "employees/components/_employee_form_personal.html" %}
+  {% include "employees/components/_employee_form_contact.html" %}
+  {% include "employees/components/_employee_form_work.html" %}
+  {% include "employees/components/_employee_form_avatar.html" %}
+  {% include "employees/components/_employee_form_skills.html" %}
+  {% include "employees/components/_employee_form_actions.html" %}
+</form>
+{% endblock %}
+```
+
+**Критерий завершения**: 
+- Главный файл < 200 строк ✅
+- Все компоненты переиспользуемы ✅
+- Форма работает идентично ✅
+
+---
+
+#### Задача 2.2: Разбить employees/department_detail.html (1025 строк)
+
+**Новая структура**:
+```
+employees/
+  department_detail.html (главный файл, 100-150 строк)
+  components/
+    _department_header.html         (название, руководитель, описание)
+    _department_controls.html       (существует, переместить)
+    _department_stats.html          (статистика: сотрудники, отделы)
+    _department_members_list.html   (таблица/карточки сотрудников)
+    _department_subdepts.html       (список подотделов)
+    _department_feed.html           (лента отдела)
+```
+
+**Действия**:
+1. Переместить `_department_controls.html` в `components/`
+2. Выделить остальные секции
+3. Обновить главный файл
+4. Протестировать страницу отдела
+
+---
+
+#### Задача 2.3: Разбить includes/rightbar_calendar.html (1129 строк)
+
+**Новая структура**:
+```
+includes/
+  rightbar_calendar.html (главный файл, 50-100 строк)
+  calendar/
+    _calendar_widget.html       (виджет календаря)
+    _calendar_events.html       (список событий)
+    _calendar_filters.html      (фильтры)
+    _calendar_quick_add.html    (быстрое добавление события)
+```
+
+---
+
+#### Задача 2.4: Разбить documents/document_list.html (743 строки)
+
+**Новая структура**:
+```
+documents/
+  document_list.html (главный файл, 100-150 строк)
+  components/
+    _document_filters.html      (панель фильтров)
+    _document_card.html         (карточка документа)
+    _document_ack_modal.html    (модалка подтверждения)
+    _document_upload_modal.html (модалка загрузки)
+```
+
+---
+
+#### Задача 2.5: Разбить requests_app/request_list_full.html (788 строк)
+
+**Новая структура**:
+```
+requests_app/
+  request_list_full.html (главный файл, 100 строк)
+  components/
+    _request_filters.html       (фильтры)
+    _request_card.html          (карточка заявления)
+    _recipient_picker.html      (виджет выбора получателей)
+    _document_list_inline.html  (встроенный список документов)
+```
+
+---
+
+### 📋 **Фаза 3: Унификация стилей (2-3 часа)**
+
+#### Задача 3.1: Создать общие CSS компоненты
+
+**Действия**:
+
+1. **Создать** `static/css/components/`:
+   ```
+   static/css/components/
+     feed.css          (стили для лент)
+     cards.css         (карточки)
+     modals.css        (модалки iOS-стиль)
+     badges.css        (бейджи статусов)
+     buttons.css       (кнопки)
+     forms.css         (формы)
+   ```
+
+2. **Извлечь повторяющиеся стили**:
+   - Найти все `.feed-stream` определения
+   - Консолидировать в `feed.css`
+   - Удалить из шаблонов
+
+3. **Подключить в base.html**:
+   ```django
+   <link rel="stylesheet" href="{% static 'css/components/feed.css' %}">
+   <link rel="stylesheet" href="{% static 'css/components/modals.css' %}">
+   ...
+   ```
+
+4. **Удалить дублирование** из шаблонов
+
+**Критерий завершения**: 
+- Каждый стиль определён в одном месте ✅
+- Общий CSS сокращён на 30-40% ✅
+
+---
+
+#### Задача 3.2: Стандартизация классов
+
+**Текущие проблемы**:
+- `.feed-card` vs `.card` vs `.req-row`
+- `.feed-ava` vs `.avatar` vs `.rp-avatar`
+- `.badge-status` vs `.badge-acked` vs custom badges
+
+**Стандарт**:
+```css
+/* Карточки */
+.card-feed         /* Карточка в ленте */
+.card-request      /* Карточка заявления */
+.card-document     /* Карточка документа */
+
+/* Аватары */
+.avatar            /* Базовый аватар */
+.avatar-sm         /* Маленький 28px */
+.avatar-md         /* Средний 44px */
+.avatar-lg         /* Большой 64px */
+
+/* Бейджи */
+.badge-status      /* Базовый бейдж статуса */
+.badge-pending     /* На рассмотрении */
+.badge-approved    /* Одобрено */
+.badge-rejected    /* Отклонено */
+```
+
+---
+
+### 📋 **Фаза 4: Оптимизация компонентов (2-3 часа)**
+
+#### Задача 4.1: Унификация партиалов
+
+**Текущие партиалы**:
+- `feed/includes/_post_card.html` (63 строки)
+- `feed/_feed_cards.html` (281 строка)
+- `employees/_department_controls.html` (626 строк!)
+- `employees/_employee_edit.html` (будет разбит в Фазе 2)
+- `requests_app/_status_badge.html` (14 строк)
+
+**Действия**:
+1. Переместить все в `{app}/components/`
+2. Стандартизировать именование (без префикса `_`)
+3. Документировать использование
+
+**Новая структура**:
+```
+feed/
+  components/
+    post_card.html
+    feed_cards.html
+
+employees/
+  components/
+    department_controls.html
+    employee_form_*.html
+
+requests_app/
+  components/
+    status_badge.html
+    request_card.html
+```
+
+---
+
+#### Задача 4.2: Создать переиспользуемые компоненты
+
+**Новые универсальные компоненты**:
+
+1. **Avatar Component** (`includes/components/avatar.html`):
+   ```django
+   {% load static %}
+   <div class="avatar avatar-{{ size|default:'md' }}" 
+        title="{{ user.get_full_name }}">
+     {% if user.avatar %}
+       <img src="{{ user.avatar.url }}" alt="{{ user.get_short_name }}">
+     {% else %}
+       <i class="bi-person"></i>
+     {% endif %}
+   </div>
+   ```
+   Использование: `{% include "includes/components/avatar.html" with user=employee size="lg" %}`
+
+2. **Status Badge Component** (`includes/components/status_badge.html`):
+   ```django
+   <span class="badge badge-status badge-{{ status }}">
+     {{ status_text|default:status|title }}
+   </span>
+   ```
+
+3. **Confirm Modal Component** (`includes/components/confirm_modal.html`):
+   ```django
+   <div class="ios-overlay" role="dialog">
+     <div class="ios-sheet">
+       <h1>{{ title }}</h1>
+       <p>{{ message }}</p>
+       <form method="post">
+         {% csrf_token %}
+         <button type="submit" class="btn btn-danger">{{ confirm_text }}</button>
+         <a href="javascript:history.back()">{{ cancel_text }}</a>
+       </form>
+     </div>
+   </div>
+   ```
+
+---
+
+### 📋 **Фаза 5: Документация и тестирование (1-2 часа)**
+
+#### Задача 5.1: Создать TEMPLATES_GUIDE.md
+
+**Содержание**:
+```markdown
+# Руководство по шаблонам EUSRR
+
+## Структура проекта
+
+### Приложения
+- admin/ - административные override шаблоны
+- auth/ - авторизация, регистрация
+- communications/ - чаты
+- documents/ - документы
+- emails/ - email-шаблоны
+- employees/ - сотрудники, отделы
+- feed/ - лента новостей
+- includes/ - общие компоненты
+- requests_app/ - заявления сотрудников
+- search/ - поиск
+
+### Именование файлов
+- `{model}_list.html` - списки
+- `{model}_detail.html` - детальные страницы
+- `{model}_form.html` - формы создания/редактирования
+- `{model}_confirm_delete.html` - подтверждение удаления
+- `components/{name}.html` - переиспользуемые компоненты
+
+### Использование компонентов
+
+#### Avatar
+```django
+{% include "includes/components/avatar.html" with user=employee size="lg" %}
+```
+
+#### Status Badge
+```django
+{% include "includes/components/status_badge.html" with status="approved" %}
+```
+
+## Лучшие практики
+1. Все переиспользуемые блоки → в components/
+2. Стили > 50 строк → в static/css/components/
+3. JavaScript > 100 строк → в static/js/
+4. Всегда использовать {% load static %}
+5. Всегда использовать {% csrf_token %} в формах
+```
+
+---
+
+#### Задача 5.2: Создать тесты для шаблонов
+
+**tests/test_templates.py**:
+```python
+import os
+from django.test import TestCase
+from django.template import TemplateDoesNotExist
+from django.template.loader import get_template
+
+class TemplateStructureTests(TestCase):
+    """Проверяем, что все шаблоны существуют и правильно структурированы"""
+    
+    def test_no_duplicate_folders(self):
+        """Проверка отсутствия дублирующих папок"""
+        templates_dir = "templates"
+        folders = os.listdir(templates_dir)
+        # Не должно быть requests/ если есть requests_app/
+        self.assertNotIn("requests", folders)
+    
+    def test_partials_in_components(self):
+        """Все партиалы должны быть в папках components/"""
+        # TODO: реализовать проверку
+    
+    def test_templates_render(self):
+        """Базовая проверка рендеринга основных шаблонов"""
+        templates = [
+            "base.html",
+            "auth/login.html",
+            "employees/employees_list.html",
+            "feed/feed_list.html",
+        ]
+        for template_path in templates:
+            try:
+                template = get_template(template_path)
+                self.assertIsNotNone(template)
+            except TemplateDoesNotExist:
+                self.fail(f"Template {template_path} not found")
+```
+
+---
+
+## Чеклист выполнения
+
+### ✅ Фаза 1: Устранение дубликатов (ЗАВЕРШЕНА 28.10.2025)
+- [x] Удалить `auth/logout_confirm.html` ✅
+- [x] Удалить `auth/password_reset_form.html` ✅
+- [x] Переместить `requests/request_list.html` → `requests_app/request_list_full.html` ✅
+- [x] Обновить импорт в `requests_app/views_front.py` ✅
+- [x] Удалить папку `requests/` ✅
+- [x] Запустить тесты ✅
+
+**Результаты Фазы 1:**
+- Удалено файлов: 3 (logout_confirm.html, password_reset_form.html, + папка requests/)
+- Перемещено файлов: 1 (request_list.html → request_list_full.html)
+- Обновлено view: 1 (requests_app/views_front.py)
+- Файлов было: 61 → стало: 56 HTML файлов
+- Строк кода удалено: ~40 строк
+- Время выполнения: ~15 минут
+- Статус: ✅ **УСПЕШНО ЗАВЕРШЕНО**
+
+### ⏳ Фаза 2: Декомпозиция
+- [ ] Разбить `employees/_employee_edit.html` (1391 → ~150 строк)
+- [ ] Разбить `employees/department_detail.html` (1025 → ~150 строк)
+- [ ] Разбить `includes/rightbar_calendar.html` (1129 → ~100 строк)
+- [ ] Разбить `documents/document_list.html` (743 → ~150 строк)
+- [ ] Разбить `requests_app/request_list_full.html` (788 → ~100 строк)
+- [ ] Протестировать все разбитые шаблоны
+
+### ⏳ Фаза 3: Унификация стилей
+- [ ] Создать `static/css/components/feed.css`
+- [ ] Создать `static/css/components/modals.css`
+- [ ] Создать `static/css/components/badges.css`
+- [ ] Создать `static/css/components/cards.css`
+- [ ] Извлечь дублирующие стили из шаблонов
+- [ ] Подключить в base.html
+- [ ] Стандартизировать классы CSS
+
+### ⏳ Фаза 4: Оптимизация компонентов
+- [ ] Переместить партиалы в `{app}/components/`
+- [ ] Создать `includes/components/avatar.html`
+- [ ] Создать `includes/components/status_badge.html`
+- [ ] Создать `includes/components/confirm_modal.html`
+- [ ] Обновить все использования компонентов
+
+### ⏳ Фаза 5: Документация
+- [ ] Создать `TEMPLATES_GUIDE.md`
+- [ ] Создать `tests/test_templates.py`
+- [ ] Запустить полное тестирование
+- [ ] Создать changelog рефакторинга
+
+---
+
+## Метрики успеха
+
+**До рефакторинга**:
+- Файлов: 61
+- Строк кода: 11,479
+- Дублирование: 3 файла
+- Файлов > 500 строк: 6
+- Файлов > 1000 строк: 3
+
+**После рефакторинга (ожидается)**:
+- Файлов: ~80-90 (за счёт компонентов)
+- Строк кода: ~10,000-10,500 (сокращение дублирования)
+- Дублирование: 0 файлов ✅
+- Файлов > 500 строк: 0 ✅
+- Файлов > 1000 строк: 0 ✅
+- Общие CSS компоненты: 5-6 файлов
+- Переиспользуемых компонентов: 15-20
+
+**KPI**:
+- ✅ Сокращение кода на 10-15%
+- ✅ Устранение всех дубликатов
+- ✅ Все файлы < 500 строк
+- ✅ 100% покрытие тестами рендеринга
+- ✅ Документация для разработчиков
+
+---
+
+## Риски и митигация
+
+### Риск 1: Поломка существующих view
+**Вероятность**: Средняя  
+**Влияние**: Высокое  
+**Митигация**: 
+- Перед изменениями: grep всех использований шаблона
+- После изменений: запуск всех тестов
+- Ручная проверка каждого view через браузер
+
+### Риск 2: CSS конфликты после унификации
+**Вероятность**: Средняя  
+**Влияние**: Среднее  
+**Митигация**:
+- Использовать специфичные имена классов
+- Тестировать на всех страницах
+- Версионировать CSS (добавить `?v=2.0`)
+
+### Риск 3: Потеря функциональности при разбиении
+**Вероятность**: Низкая  
+**Влияние**: Высокое  
+**Митигация**:
+- Разбивать поэтапно (по одному файлу)
+- Сравнивать рендер до/после
+- Юнит-тесты для компонентов
+
+---
+
+## Временная оценка
+
+| Фаза | Задачи | Время | Сложность |
+|------|--------|-------|-----------|
+| **1. Дубликаты** | 2 задачи | 1-2 часа | 🟢 Низкая |
+| **2. Декомпозиция** | 5 задач | 3-4 часа | 🟡 Средняя |
+| **3. Стили** | 2 задачи | 2-3 часа | 🟡 Средняя |
+| **4. Компоненты** | 2 задачи | 2-3 часа | 🟡 Средняя |
+| **5. Документация** | 2 задачи | 1-2 часа | 🟢 Низкая |
+| **ИТОГО** | **13 задач** | **9-14 часов** | - |
+
+**Рекомендация**: Выполнять поэтапно с коммитами после каждой фазы.
+
+---
+
+## Порядок выполнения (рекомендуемый)
+
+### День 1 (4-5 часов):
+1. ✅ Фаза 1 (дубликаты) - 1-2 часа
+2. ✅ Фаза 2.1 (employees/_employee_edit) - 1.5-2 часа
+3. ✅ Коммит + тестирование - 0.5 часа
+
+### День 2 (4-5 часов):
+1. ✅ Фаза 2.2-2.3 (department_detail, rightbar_calendar) - 2-3 часа
+2. ✅ Фаза 3.1 (CSS компоненты) - 1.5-2 часа
+3. ✅ Коммит + тестирование - 0.5 часа
+
+### День 3 (3-4 часа):
+1. ✅ Фаза 2.4-2.5 (documents, requests) - 1.5-2 часа
+2. ✅ Фаза 4 (компоненты) - 1-1.5 часа
+3. ✅ Коммит + тестирование - 0.5 часа
+
+### День 4 (1-2 часа):
+1. ✅ Фаза 5 (документация) - 1-1.5 часа
+2. ✅ Финальное тестирование - 0.5 часа
+3. ✅ Финальный коммит
+
+---
+
+## Заключение
+
+Этот рефакторинг позволит:
+- ✅ Устранить технический долг (дубликаты, гигантские файлы)
+- ✅ Упростить поддержку (переиспользуемые компоненты)
+- ✅ Ускорить разработку (готовые компоненты)
+- ✅ Улучшить читаемость (чёткая структура)
+- ✅ Снизить риски (документация + тесты)
+
+**Приоритет**: 🔴 **ВЫСОКИЙ** (технический долг накоплен)  
+**Сложность**: 🟡 **СРЕДНЯЯ** (требует внимательности)  
+**ROI**: 🟢 **ВЫСОКИЙ** (долгосрочная выгода)
diff --git a/backend/tests/test_static_files.py b/backend/tests/test_static_files.py
new file mode 100644
index 00000000..e33f8bc3
--- /dev/null
+++ b/backend/tests/test_static_files.py
@@ -0,0 +1,253 @@
+"""
+Тесты для статических файлов (CSS/JS)
+
+Проверяют:
+1. Валидность структуры CSS файлов
+2. Корректность ES6 модулей JavaScript
+3. Наличие обязательных файлов
+4. Отсутствие синтаксических ошибок
+"""
+
+from pathlib import Path
+from django.test import TestCase
+from django.conf import settings
+
+
+class StaticFilesStructureTest(TestCase):
+    """Тесты структуры статических файлов"""
+    
+    def setUp(self):
+        self.static_root = Path(settings.BASE_DIR) / 'static'
+        self.css_root = self.static_root / 'css'
+        self.js_root = self.static_root / 'js'
+    
+    def test_css_directories_exist(self):
+        """Проверка существования CSS директорий"""
+        self.assertTrue(
+            self.css_root.exists(),
+            "CSS директория должна существовать"
+        )
+        self.assertTrue(
+            (self.css_root / 'components').exists(),
+            "CSS components директория должна существовать"
+        )
+        self.assertTrue(
+            (self.css_root / 'pages').exists(),
+            "CSS pages директория должна существовать"
+        )
+    
+    def test_js_directories_exist(self):
+        """Проверка существования JS директорий"""
+        self.assertTrue(
+            self.js_root.exists(),
+            "JS директория должна существовать"
+        )
+        self.assertTrue(
+            (self.js_root / 'utils').exists(),
+            "JS utils директория должна существовать"
+        )
+        self.assertTrue(
+            (self.js_root / 'components').exists(),
+            "JS components директория должна существовать"
+        )
+    
+    def test_index_files_exist(self):
+        """Проверка существования index файлов"""
+        self.assertTrue(
+            (self.css_root / 'components' / 'index.css').exists(),
+            "CSS components/index.css должен существовать"
+        )
+        self.assertTrue(
+            (self.js_root / 'utils' / 'index.js').exists(),
+            "JS utils/index.js должен существовать"
+        )
+        self.assertTrue(
+            (self.js_root / 'components' / 'index.js').exists(),
+            "JS components/index.js должен существовать"
+        )
+    
+    def test_variables_css_exists(self):
+        """Проверка существования variables.css"""
+        variables_file = self.css_root / 'variables.css'
+        self.assertTrue(
+            variables_file.exists(),
+            "variables.css должен существовать"
+        )
+        
+        # Проверка содержания основных переменных
+        content = variables_file.read_text(encoding='utf-8')
+        required_vars = [
+            '--navbar-height',
+            '--sidebar-width',
+            '--feed-radius',
+            '--shadow-md',
+            '--transition-base'
+        ]
+        for var in required_vars:
+            self.assertIn(
+                var,
+                content,
+                f"Переменная {var} должна быть определена в variables.css"
+            )
+
+
+class CSSFilesValidityTest(TestCase):
+    """Тесты валидности CSS файлов"""
+    
+    def setUp(self):
+        self.css_root = Path(settings.BASE_DIR) / 'static' / 'css'
+    
+    def test_css_files_syntax(self):
+        """Базовая проверка синтаксиса CSS файлов"""
+        css_files = list(self.css_root.rglob('*.css'))
+        
+        for css_file in css_files:
+            with self.subTest(file=css_file.name):
+                content = css_file.read_text(encoding='utf-8')
+                
+                # Проверка парности фигурных скобок
+                open_braces = content.count('{')
+                close_braces = content.count('}')
+                self.assertEqual(
+                    open_braces,
+                    close_braces,
+                    f"{css_file.name}: несбалансированные фигурные скобки"
+                )
+                
+                # Проверка что нет незакрытых комментариев
+                # Простая проверка: /* должно быть равно */
+                open_comments = content.count('/*')
+                close_comments = content.count('*/')
+                self.assertEqual(
+                    open_comments,
+                    close_comments,
+                    f"{css_file.name}: незакрытые комментарии"
+                )
+    
+    def test_css_files_encoding(self):
+        """Проверка кодировки CSS файлов (UTF-8)"""
+        css_files = list(self.css_root.rglob('*.css'))
+        
+        for css_file in css_files:
+            with self.subTest(file=css_file.name):
+                try:
+                    css_file.read_text(encoding='utf-8')
+                except UnicodeDecodeError:
+                    msg = f"{css_file.name}: неверная кодировка (не UTF-8)"
+                    self.fail(msg)
+
+
+class JSFilesValidityTest(TestCase):
+    """Тесты валидности JavaScript файлов"""
+    
+    def setUp(self):
+        self.js_root = Path(settings.BASE_DIR) / 'static' / 'js'
+    
+    def test_js_files_are_modules(self):
+        """Проверка что JS файлы используют ES6 модули"""
+        js_files = list(self.js_root.rglob('*.js'))
+        
+        for js_file in js_files:
+            with self.subTest(file=js_file.name):
+                content = js_file.read_text(encoding='utf-8')
+                
+                # Проверка что файл содержит export (ES6 модуль)
+                self.assertTrue(
+                    'export' in content,
+                    f"{js_file.name}: должен содержать export для ES6 модуля"
+                )
+    
+    def test_js_files_syntax_basic(self):
+        """Базовая проверка синтаксиса JS файлов"""
+        js_files = list(self.js_root.rglob('*.js'))
+        
+        for js_file in js_files:
+            with self.subTest(file=js_file.name):
+                content = js_file.read_text(encoding='utf-8')
+                
+                # Проверка парности фигурных скобок
+                open_braces = content.count('{')
+                close_braces = content.count('}')
+                self.assertEqual(
+                    open_braces,
+                    close_braces,
+                    f"{js_file.name}: несбалансированные фигурные скобки"
+                )
+                
+                # Проверка парности круглых скобок
+                open_parens = content.count('(')
+                close_parens = content.count(')')
+                self.assertEqual(
+                    open_parens,
+                    close_parens,
+                    f"{js_file.name}: несбалансированные круглые скобки"
+                )
+                
+                # Проверка парности квадратных скобок
+                open_brackets = content.count('[')
+                close_brackets = content.count(']')
+                self.assertEqual(
+                    open_brackets,
+                    close_brackets,
+                    f"{js_file.name}: несбалансированные квадратные скобки"
+                )
+    
+    def test_js_files_encoding(self):
+        """Проверка кодировки JS файлов (UTF-8)"""
+        js_files = list(self.js_root.rglob('*.js'))
+        
+        for js_file in js_files:
+            with self.subTest(file=js_file.name):
+                try:
+                    js_file.read_text(encoding='utf-8')
+                except UnicodeDecodeError:
+                    self.fail(f"{js_file.name}: неверная кодировка (не UTF-8)")
+
+
+class IndexFilesTest(TestCase):
+    """Тесты для index файлов"""
+    
+    def test_css_index_imports(self):
+        """Проверка что CSS index.css готов к импорту компонентов"""
+        index_file = (
+            Path(settings.BASE_DIR) / 'static' / 'css' /
+            'components' / 'index.css'
+        )
+        content = index_file.read_text(encoding='utf-8')
+        
+        # Проверка что есть комментарии о подключении
+        self.assertIn(
+            '@import',
+            content,
+            "index.css должен содержать примеры @import"
+        )
+    
+    def test_js_utils_index_exports(self):
+        """Проверка что JS utils/index.js готов к экспорту утилит"""
+        index_file = (
+            Path(settings.BASE_DIR) / 'static' / 'js' /
+            'utils' / 'index.js'
+        )
+        content = index_file.read_text(encoding='utf-8')
+        
+        # Проверка что есть export
+        self.assertIn(
+            'export',
+            content,
+            "utils/index.js должен содержать export"
+        )
+    
+    def test_js_components_index_exports(self):
+        """Проверка что JS components/index.js готов к экспорту"""
+        index_file = (
+            Path(settings.BASE_DIR) / 'static' / 'js' /
+            'components' / 'index.js'
+        )
+        content = index_file.read_text(encoding='utf-8')
+        
+        # Проверка что есть export
+        self.assertIn(
+            'export',
+            content,
+            "components/index.js должен содержать export"
+        )