баги

2026-10-02 04:07:56 +03:00
parent 97bf3cc50a
commit fc5801d683
42 changed files with 1201 additions and 305 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -4,7 +4,7 @@

 Проект представляет собой систему управления университетским расписанием.
 - **Backend**: Java 17, Spring Boot 3.5.16 (Мультитенантная архитектура: отдельная БД для каждого клиента)
- **Frontend**: поэтапный переход с Vanilla JavaScript на React 19 + HTML/CSS
+- **Frontend**: React 19 + HTML/CSS (все пользовательские страницы и вкладки)
 - **Database**: PostgreSQL (множество БД, управляются через Flyway)
 - **Локальный URL**: localhost:80
 - **Продакшн URL**: https://magistr.zuev.company
@@ -25,7 +25,7 @@ magistr/
 │       ├── utils/       # Утилиты
 │   └── src/main/resources/db/migration/ # Flyway SQL миграции (версионирование схемы БД)
 ├── frontend/          # Статические файлы
-│   ├── react/         # React entrypoint и компоненты уже перенесённых страниц
+│   ├── react/         # React entrypoint, страницы и общие компоненты
 │   ├── admin/         # Интерфейс администратора
 │   │   └── settings/  # Страница настроек (отдельный SPA)
 │   ├── department/    # Redirect в кабинет кафедры внутри admin SPA
--- a/backend/src/main/java/com/magistr/app/config/auth/JwtTokenService.java
+++ b/backend/src/main/java/com/magistr/app/config/auth/JwtTokenService.java
@@ -85,7 +85,11 @@ public class JwtTokenService {

            Long userId = asLong(jwt.getClaim("userId")).orElseGet(() -> Long.valueOf(jwt.getSubject()));
            String username = jwt.getClaimAsString("username");
-            Role role = Role.valueOf(jwt.getClaimAsString("role"));
+            String roleClaim = jwt.getClaimAsString("role");
+            if (userId <= 0 || username == null || username.isBlank() || roleClaim == null) {
+                return Optional.empty();
+            }
+            Role role = Role.valueOf(roleClaim);
            Long departmentId = asLong(jwt.getClaim("departmentId")).orElse(null);

            return Optional.of(new AuthenticatedUser(userId, username, role, departmentId));
--- a/backend/src/test/java/com/magistr/app/config/auth/JwtTokenServiceTest.java
+++ b/backend/src/test/java/com/magistr/app/config/auth/JwtTokenServiceTest.java
@@ -59,6 +59,42 @@ class JwtTokenServiceTest {
        assertThat(service.authenticate(token, "magistr")).isEmpty();
    }

+    @Test
+    void rejectsTokenWithMissingRole() throws JOSEException {
+        String secret = "12345678901234567890123456789012";
+        JwtTokenService service = new JwtTokenService(properties(secret, Duration.ofMinutes(15)));
+        assertThat(service.authenticate(signedToken(secret, null, "admin", 10L), "magistr")).isEmpty();
+    }
+
+    @Test
+    void rejectsTokenWithMissingUsername() throws JOSEException {
+        String secret = "12345678901234567890123456789012";
+        JwtTokenService service = new JwtTokenService(properties(secret, Duration.ofMinutes(15)));
+        assertThat(service.authenticate(signedToken(secret, "ADMIN", null, 10L), "magistr")).isEmpty();
+    }
+
+    @Test
+    void rejectsTokenWithInvalidUserId() throws JOSEException {
+        String secret = "12345678901234567890123456789012";
+        JwtTokenService service = new JwtTokenService(properties(secret, Duration.ofMinutes(15)));
+        assertThat(service.authenticate(signedToken(secret, "ADMIN", "admin", -1L), "magistr")).isEmpty();
+    }
+
+    private String signedToken(String secret, String role, String username, long userId) throws JOSEException {
+        JWTClaimsSet claims = new JWTClaimsSet.Builder()
+                .issuer("magistr")
+                .subject(Long.toString(userId))
+                .expirationTime(Date.from(Instant.now().plusSeconds(900)))
+                .claim("tenant", "magistr")
+                .claim("userId", userId)
+                .claim("username", username)
+                .claim("role", role)
+                .build();
+        SignedJWT jwt = new SignedJWT(new JWSHeader(JWSAlgorithm.HS256), claims);
+        jwt.sign(new MACSigner(secret.getBytes(StandardCharsets.UTF_8)));
+        return jwt.serialize();
+    }
+
    private String expiredToken(String secret) {
        try {
            Instant now = Instant.now();
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -425,6 +425,9 @@ Access JWT содержит claim'ы `tenant`, `userId`, `username`, `role`, `de
 frontend восстанавливает access JWT и профиль в памяти через refresh-cookie; Web Storage
 для данных авторизации не используется. Backend возвращает `401`, если токен отсутствует
 или некорректен, и `403`, если роли недостаточно.
+Подписанный токен с отсутствующей ролью или пустым логином, а также с неположительным
+ID пользователя отклоняется как некорректный. Отсутствие обязательных данных профиля
+не должно приводить к внутренней ошибке сервера.

 `AuthContext` существует только в границах одного servlet-запроса. Интерцептор очищает
 `ThreadLocal` до любых ранних выходов, устанавливает пользователя только после успешной
--- a/docs/FRONTEND.md
+++ b/docs/FRONTEND.md
@@ -4,15 +4,15 @@

 | Параметр | Значение |
 |----------|----------|
-| **Фреймворк** | Переходный режим: React 19 для страницы входа, кабинетов студента и преподавателя, страницы настроек и общего слоя `react/shared`, Vanilla JavaScript для остальных разделов |
+| **Фреймворк** | React 19 для всех пользовательских страниц и вкладок; общие сервисы и чистые вспомогательные функции остаются ES-модулями |
 | **Модульная система** | ES6 Modules (`import`/`export`) |
 | **Стили** | CSS (модульный подход) |
 | **Шрифт** | Системный стек без внешних font-CDN |
 | **Веб-сервер** | Apache httpd на Alpine со строгим CSP |

 Пошаговый план и актуальная точка продолжения находятся в
-[`REACT_MIGRATION.md`](REACT_MIGRATION.md). Миграция выполняется по целым страницам и
-разделам без изменения действующих URL и REST-контрактов.
+[`REACT_MIGRATION.md`](REACT_MIGRATION.md). Все страницы и вкладки переведены на React
+с сохранением действующих URL и REST-контрактов.

 ---

@@ -102,14 +102,15 @@ frontend/
 │   │   │   └── TeacherAbsencesTab.jsx # Отсутствия: реестр, мастер замены, пожелания и заявки на изменение
 │   │   ├── main.jsx        # React entrypoint для `/admin/`
 │   │   └── testing/        # render-admin.jsx для DOM-проверок
-│   └── shared/             # Общий React-слой для следующих переносимых страниц
+│   └── shared/             # Общий React-слой всех кабинетов
 │       ├── api-client.js   # requestJson/apiClient поверх auth-транспорта
 │       ├── auth-client.js  # Восстановление сессии и logout с redirect
+│       ├── use-sidebar.js  # Десктопное сворачивание и мобильное меню
 │       ├── dates.js        # Дата-математика (недели, ISO, форматирование)
 │       ├── session-policy.js # Фазы loading/ready/unauthorized/error и русские тексты
 │       ├── use-authorized-session.js # Хук проверки роли при монтировании страницы
 │       ├── runtime-entry.jsx # Единая точка экспорта общего runtime-chunk
-│       ├── ui/             # AppErrorBoundary, AsyncState, FormAlert, AsyncCombobox, ScheduleOverview, ConfirmDialog, Pagination
+│       ├── ui/             # CustomSelect, SidebarToggle, AppErrorBoundary, AsyncState, FormAlert, AsyncCombobox, ScheduleOverview, ConfirmDialog, Pagination
 │       └── testing/        # render-shared.jsx для DOM-проверок через renderToStaticMarkup
 ├── tests/
 │   ├── academic-calendar-grid.test.mjs # Неполная первая неделя календарного графика
@@ -132,6 +133,7 @@ frontend/
 │   ├── schedule-view-semesters.test.mjs # Выбор семестра и расчёт двухнедельного диапазона просмотра
 │   ├── teacher-absences.test.mjs # Payload мастера замены и доступность вкладки по ролям
 │   ├── teacher-preferences.test.mjs # Календарь пожеланий, заявки и подсказки конструктора
+│   ├── browser/            # Playwright: наведение, селекты и мобильное меню
 │   └── security-policy.test.mjs # Web Storage, XSS, пароли, язык, CSP и Dockerfile
 ├── index.html              # 🔐 Страница авторизации (общая)
 ├── style.css               # Стили страницы авторизации
@@ -330,9 +332,15 @@ settings SPA не содержат неработающей кнопки бур
  `PageResponse`; размер страницы — 25, 50 или 100. `view-state.js` унифицирует
  загрузку со spinner, пустой результат и ошибку с кнопкой повторного запроса.
 - `AsyncCombobox` загружает варианты с сервера, сохраняет выбранный ID, поддерживает
-  клавиатуру и роли `combobox/listbox`. Он используется для групп, преподавателей,
+  клавиатуру и роли `combobox/listbox`. При новом вводе сразу исключаются устаревшие
+  результаты, включая ответы во время задержки поиска. Escape закрывает меню с возвратом
+  фокуса без нового запроса; уход фокуса за пределы компонента отменяет отложенный поиск.
+  Возврат стрелкой вверх сохраняет введённый текст. Он используется для групп, преподавателей,
  аудиторий и совместимых календарных графиков; предварительная загрузка вариантов не
  раскрывает меню. Студент больше не загружает полный список групп.
+- Реестры пользователей, групп, дисциплин и заявок сохраняют выбранные параметры до
+  завершения запроса, чтобы быстрые изменения фильтров и сортировки не отменяли друг друга.
+  Сброс фильтров групп также отменяет отложенный поиск.
 - `dialog.js` заменяет нативные `confirm`, `prompt` и `alert`: возвращает фокус, удерживает
  его внутри окна, закрывается по Escape и может требовать причину. Нативных диалогов в
  admin/settings-модулях нет.
@@ -414,11 +422,28 @@ SHA-256 style-хэшей с CSP. Там же закреплены безопас
 npm run build  # собрать dist/vendor/otel.js и dist/react/login.js
 npm test       # frontend unit/static tests
 npm run check  # React-сборка, синтаксис auth/UI-модулей + все frontend-тесты
+npm run check:browser # Проверка UI, асинхронного поиска и валидации в локальном Chromium
 ```

-React-сборка выполняется существующим esbuild без отдельного dev-сервера. Для страницы
-входа установлен лимит 75 000 байт gzip; превышение завершает сборку ошибкой. При появлении
-нескольких React entrypoint общий runtime будет вынесен в отдельный кэшируемый chunk.
+React-сборка выполняется esbuild без отдельного dev-сервера. Общие зависимости вынесены
+в кэшируемые chunk'и, вкладки админки загружаются через `React.lazy`. Холодный бюджет
+входа — 85 000 байт gzip, остальных кабинетов — 90 000 байт. Для каждого entrypoint
+считаются только его статические зависимости: lazy-вкладки и модули других страниц
+не включаются в холодную загрузку. Превышение лимита завершает сборку ошибкой.
+
+Браузерные проверки требуют запущенной локальной версии в Docker и Chromium
+(`/usr/bin/chromium`, другой путь задаётся через `CHROMIUM_PATH`). По умолчанию
+используются `https://localhost` и демо-аккаунт `admin`; настройки можно передать через
+`FRONTEND_TEST_BASE_URL`, `FRONTEND_TEST_LOGIN`, `FRONTEND_TEST_PASSWORD`.
+Проверка пожеланий использует демо-аккаунт преподавателя; для другого аккаунта
+задаются `FRONTEND_TEST_TEACHER_LOGIN` и `FRONTEND_TEST_TEACHER_PASSWORD`.
+Проверки не сохраняют изменения данных: проверяются обе темы, доступные вкладки,
+края кнопок, смена роли в форме, сброс фильтра, мобильное меню админки/настроек
+и стабильность ячеек пожеланий преподавателя. Отдельные сценарии задерживают ответы
+API для проверки совместного изменения роли и сортировки и отмены поиска после сброса.
+`shared-controls.test.mjs` собирает текущие компоненты в изолированную браузерную форму:
+проверяет устаревшие ответы и ошибки поиска, клавиатурное управление, уход фокуса
+и валидацию обязательного селекта без записи данных в API.

 ---

@@ -549,6 +574,32 @@ ID преподавателя берётся из восстановленног
 4. **`modals.css`** — Модальные окна
 5. **`departments-data.css`** — Стили создания кафедры/специальности

+### Общие элементы управления после миграции
+
+Кнопки сохраняют область наведения: hover и active меняют цвет, границу и тень,
+не смещая сам элемент через `translateY`. Это исключает мерцание у нижней кромки.
+Пункты бокового меню и ячейки пожеланий преподавателя также не смещаются при наведении.
+Карточки и боковая панель админки/настроек используют непрозрачные фоновые токены
+без `backdrop-filter`; у карточек отключена анимация с сохраняемым `transform`.
+Это убирает фоновые фильтруемые слои, на которых наблюдались цветные полосы при
+перерисовке после наведения на меню. В развёрнутой панели не создаются избыточные
+нативные подсказки `title`; подсказки остаются у скрытых подписей свёрнутого меню.
+Волна нажатия страницы входа ограничена `.btn-submit`; админка больше не добавляет
+ripple-узлы в React-разметку старым глобальным обработчиком.
+
+Одинарные селекты вкладок и пагинации используют React-компонент `CustomSelect`.
+Подписи, пункты и `disabled` синхронизируются с нативным контролом после рендера;
+пустой пункт доступен для сброса фильтров. Автоматическое оборачивание селектов
+через `admin/js/dropdown.js` отключено. При отправке формы пустой обязательный
+селект показывает «Выберите значение», получает фокус на видимой кнопке и помечается
+`aria-invalid`; выбор значения снимает ошибку. Пример — в `docs/UI_COMPONENTS.md`.
+
+Оболочки админки и настроек используют `useSidebar` и `SidebarToggle`:
+сворачивание десктопной панели хранится в `localStorage`, открытие мобильного
+меню — отдельное временное состояние. Мобильная панель закрывается при выборе
+раздела, клике по затемнению, Escape и смене размера экрана. Навигация развёрнутой
+панели прокручивается, а её заголовок и нижние действия остаются доступными.
+
 ### Темизация

 Общий `ui-foundation.css` подключается последним во всех пяти оболочках.
--- a/docs/README.md
+++ b/docs/README.md
@@ -14,7 +14,7 @@
 | Компонент | Технология |
 |-----------|-----------|
 | **Backend** | Java 17, Spring Boot 3.5.16 |
-| **Frontend** | React 19 + переходные Vanilla JavaScript ES-модули + HTML/CSS |
+| **Frontend** | React 19 для всех пользовательских страниц + общие ES-модули + HTML/CSS |
 | **База данных** | PostgreSQL (через Flyway миграции) |
 | **Контейнеризация** | Docker, Docker Compose |
 | **Продакшн** | Kubernetes, Caddy (реверс-прокси) |
--- a/docs/UI_COMPONENTS.md
+++ b/docs/UI_COMPONENTS.md
@@ -4,45 +4,53 @@

 ---

-## 1. Стандартные одинарные списки (Custom Select Wrapper)
+## 1. Одинарные списки на React

-Этот компонент автоматически "оборачивает" любые стандартные теги `<select>` на всём сайте, превращая их в красивые выпадающие меню. Вам **не нужно** писать сложный HTML, всё работает автоматически!
+В админке используется `frontend/react/shared/ui/CustomSelect.jsx`. Он сохраняет
+стили `.custom-select-wrapper`, нативный `select` для формы и событие `change`,
+но разметкой меню, выбранной подписью и состоянием `disabled` управляет React.
+Глобальный `MutationObserver` из `admin/js/dropdown.js` больше не запускается.
+Его прежнее применение к React-дереву оставляло устаревшие подписи и лишние DOM-узлы.

-### Как добавить новый одинарный список:
+```jsx
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

-Просто добавьте обычный тег `<select>` в HTML:
-
-```html
-<div class="form-group">
-    <label for="my-new-select">Выберите опцию</label>
-    <select id="my-new-select">
-        <option value="">Выберите...</option>
-        <option value="1">Опция 1</option>
-        <option value="2">Опция 2</option>
-    </select>
+<div className="form-group">
+    <label htmlFor="my-new-select">Выберите опцию</label>
+    <CustomSelect
+        id="my-new-select"
+        value={selectedId}
+        disabled={loading}
+        onChange={event => setSelectedId(event.target.value)}
+    >
+        <option value="">Все значения</option>
+        {options.map(option => (
+            <option key={option.id} value={option.id}>{option.name}</option>
+        ))}
+    </CustomSelect>
 </div>
 ```

-### Как это работает:
-1. В файле `frontend/admin/js/dropdown.js` инициализируется глобальный **`MutationObserver`**.
-2. Как только любой скрипт или загрузка страницы добавляет `<select>` в DOM, скрипт автоматически:
-   - Скрывает оригинальный `<select>` (но оставляет его доступным из JS!).
-   - Рисует поверх него красивый `div.custom-select-wrapper` с нужным текстом, иконкой-шевроном и эффектом размытия фона.
-   - Синхронизирует состояния (если вы выберете элемент в кастомном UI, он автоматически изменит `select.value` и кинет событие `change`).
-
-### Динамическое обновление списка (через JS):
-Если вы подгружаете список с API, просто обновите `innerHTML` **нативного селекта**, как обычно:
-
-```javascript
-const select = document.getElementById('my-new-select');
-select.innerHTML = '<option value="99">Новое значение с API</option>';
-```
-**Магия!** Экземпляр `CustomSelect` использует свой собственный внутренний `MutationObserver` для отслеживания изменений `<option>`, поэтому он **автоматически перестроит красивый кастомный выпадающий список**. Никаких дополнительных вызовов для перерисовки не требуется.
+Список обновляется через `options` и `value`, без `innerHTML`. Пустое значение
+можно выбрать для сброса фильтра; недоступные пункты помечаются `disabled`.
+При количестве вариантов больше шести появляется поиск. Поддерживаются стрелки,
+Home/End, Escape, закрытие снаружи и снятие обработчиков при размонтировании.
+Для обязательного поля передайте `required`: пустое значение блокирует отправку,
+показывает «Выберите значение» и переводит фокус на видимую кнопку селекта.
+Ошибка связана с кнопкой через `aria-describedby` и снимается после выбора.
+Для поиска по API используется отдельный `AsyncCombobox`.

 ---

 ## 2. Множественный выбор (Multi-Select с чекбоксами)

+На React-страницах меню и закрытие снаружи управляются состоянием компонентов
+(`EquipmentMultiSelect` в `ClassroomsTab.jsx`, `WorkloadMultiSelect` в
+`AuditoriumWorkloadTab.jsx` и аналогичные компоненты остальных вкладок).
+Глобальные `initMultiSelect` и `closeAllDropdownsOnOutsideClick` к React-дереву
+не применяются. HTML-примеры ниже описывают прежний контракт CSS-классов;
+новые элементы следует создавать в JSX и управлять ими через React-состояние.
+
 Этот UI-компонент позволяет выбирать сразу несколько элементов из выпадающего списка. Он включает в себя кастомные красивые галочки (checkmarks) с неоновой подсветкой и кастомный скроллбар.

 Этот компонент требует написания определённой HTML-структуры, так как нативного тега `select multiple` с похожей функциональностью не существует.
--- a/frontend/admin/css/components.css
+++ b/frontend/admin/css/components.css
@@ -51,15 +51,13 @@
 /* ===== Cards ===== */
 .card {
    background: var(--bg-card);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    position: relative;
    overflow: visible;
-    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-    animation: slideUpCard 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both;
+    /* Непрозрачная поверхность не требует фильтрации и трансформации фонового слоя. */
+    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 }

@@ -2870,6 +2868,51 @@ input[type="number"] {
    white-space: nowrap;
 }

+/* React-селекты не создают соседние DOM-узлы через MutationObserver. */
+.react-custom-select {
+    position: relative;
+    min-width: 0;
+}
+
+.react-custom-select select[hidden] {
+    display: none !important;
+}
+
+.card:has(.react-custom-select.select-layer-active),
+.settings-card:has(.react-custom-select.select-layer-active) {
+    position: relative;
+    z-index: 10001;
+}
+
+.react-custom-select .custom-select-trigger {
+    font-family: inherit;
+    text-align: left;
+    transform: none;
+}
+
+.react-custom-select .custom-select-item {
+    display: block;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    font-family: inherit;
+    text-align: left;
+}
+
+.react-custom-select .custom-select-item.selected {
+    background: var(--accent-glow);
+}
+
+[data-theme="light"] .react-custom-select .custom-select-item.selected {
+    background: rgba(99, 102, 241, 0.15);
+}
+
+.react-select-options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
 .custom-select-icon {
    margin-left: 0.75rem;
    display: flex;
@@ -3941,8 +3984,6 @@ tbody tr:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
    padding: 0;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
    z-index: 100;
@@ -4187,9 +4228,9 @@ tbody tr:hover {
 .project-dialog-field textarea { width: 100%; resize: vertical; }
 .project-dialog-error { min-height: 1.3rem; margin-top: 0.35rem; color: var(--danger, #dc2626); font-size: 0.85rem; }

-/* ===== Êëàññû ýòàïà 5 (âîëíà 1): çàìåíà inline-ñòèëåé ïåðåíåñ¸ííûõ âêëàäîê ===== */
+/* ===== Классы этапа 5 (волна 1): замена inline-стилей перенесённых вкладок ===== */

-/* Çàãîëîâîê êàðòî÷êè ñ äåéñòâèåì ñïðàâà (àóäèòîðèè) */
+/* Заголовок карточки с действием справа (аудитории) */
 .card-toolbar {
    display: flex;
    justify-content: space-between;
@@ -4203,7 +4244,7 @@ tbody tr:hover {
    margin: 0;
 }

-/* Ñòðîêè è ãðóïïû ôîðì */
+/* Строки и группы форм */
 .form-row--spacing {
    margin-top: 1rem;
 }
@@ -4234,7 +4275,7 @@ tbody tr:hover {
    margin-bottom: 0;
 }

-/* ß÷åéêè òàáëèö */
+/* Ячейки таблиц */
 .th-actions {
    text-align: right;
 }
@@ -4258,7 +4299,7 @@ tbody tr:hover {
    font-size: 0.75rem;
 }

-/* Ìîäàëüíûå îêíà ïåðåíåñ¸ííûõ âêëàäîê */
+/* Модальные окна перенесённых вкладок */
 .modal-content--medium {
    max-width: 600px;
    width: 90%;
@@ -4287,7 +4328,7 @@ tbody tr:hover {
    margin-top: 0;
 }

-/* Ñîñòîÿíèå çàãðóçêè lazy-âêëàäêè */
+/* Состояние загрузки lazy-вкладки */
 .tab-loading {
    display: flex;
    align-items: center;
@@ -4297,7 +4338,7 @@ tbody tr:hover {
    color: var(--text-secondary);
 }

-/* Äàøáîðä: ìåòðèêè è ìîíèòîðèíã */
+/* Дашборд: метрики и мониторинг */
 .dashboard-metric-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
@@ -4350,7 +4391,7 @@ tbody tr:hover {
    border: 1px solid rgba(16, 185, 129, 0.2);
 }

-/* Äàøáîðä: öåíòð ïðåäóïðåæäåíèé (Red Zone) */
+/* Дашборд: центр предупреждений (Red Zone) */
 .red-zone-card {
    border-top: 4px solid var(--error, #ef4444);
 }
@@ -4390,9 +4431,9 @@ tbody tr:hover {
    color: var(--text-secondary);
 }

-/* ===== Ýòàï 5 (âîëíà 2): êëàññû inline-ñòèëåé ïåðåíåñ¸ííûõ âêëàäîê ===== */
+/* ===== Этап 5 (волна 2): классы inline-стилей перенесённых вкладок ===== */

-/* Øèðîêèå ìîäàëüíûå îêíà (ïîäãðóïïû, ïðîôèëè, êàëåíäàðíûå ãðàôèêè) */
+/* Широкие модальные окна (подгруппы, профили, календарные графики) */
 .modal-content--wide {
    max-width: 700px;
    width: 90%;
@@ -4408,7 +4449,7 @@ tbody tr:hover {
    width: 90%;
 }

-/* Ôîðìà ïðîôèëÿ íà âêëàäêå ñòðóêòóðû âóçà */
+/* Форма профиля на вкладке структуры вуза */
 .profile-form-spec {
    flex: 1;
    min-width: 200px;
@@ -4424,13 +4465,13 @@ tbody tr:hover {
    min-width: 250px;
 }

-/* Ðÿä êíîïîê ôîðìû, âûðîâíåííûõ ïî íèæíåé êðîìêå */
+/* Ряд кнопок формы, выровненных по нижней кромке */
 .form-actions-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
 }
-/* Âîëíà 3 (ýòàï 5): çàìåíà inline-ñòèëÿ èç legacy department-workspace.html */
+/* Волна 3 (этап 5): замена inline-стиля из legacy department-workspace.html */
 .schedule-section-label--flush {
    margin: 0;
-}
+}
--- a/frontend/admin/css/layout.css
+++ b/frontend/admin/css/layout.css
@@ -1,10 +1,8 @@
 /* ===== Sidebar ===== */
 .sidebar {
    width: 260px;
-    min-height: 100vh;
+    min-height: 0;
    background: var(--bg-sidebar);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--bg-card-border);
    display: flex;
    flex-direction: column;
@@ -12,7 +10,7 @@
    left: 0;
    top: 0;
    bottom: 0;
-    z-index: 1000;
+    z-index: 11001;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

@@ -45,9 +43,19 @@

 .sidebar-nav {
    flex: 1;
+    min-height: 0;
    padding: 0.75rem;
 }

+.sidebar:not(.collapsed) .sidebar-nav {
+    overflow-y: auto;
+}
+
+.sidebar-header,
+.sidebar-footer {
+    flex-shrink: 0;
+}
+
 .nav-item {
    display: flex;
    align-items: center;
@@ -90,7 +98,6 @@
 .nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
-    transform: translateX(4px);
 }

 .nav-item.active {
@@ -335,7 +342,7 @@
        transform: translateY(-50%) translateX(0);
    }
    
-    .sidebar.collapsed .sidebar-close-btn {
+    .sidebar.collapsed .sidebar-close-btn svg {
        transform: rotate(180deg);
    }
    
@@ -375,7 +382,7 @@
        margin-left: 74px;
    }
    
-    .main.sidebar-collapsed .menu-toggle {
+    .main.sidebar-collapsed .menu-toggle.btn {
        display: none;
    }
 }
@@ -441,7 +448,7 @@
 }

 /* ===== Mobile Menu Toggle ===== */
-.menu-toggle {
+.menu-toggle.btn {
    display: none;
    color: var(--text-primary);
    transition: background var(--transition);
@@ -460,7 +467,7 @@
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
-    z-index: 9;
+    z-index: 11000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
@@ -489,7 +496,10 @@
        padding: 1.25rem;
    }

-    .menu-toggle,
+    .menu-toggle.btn {
+        display: inline-flex;
+    }
+
    .sidebar-overlay {
        display: block;
    }
--- a/frontend/admin/css/main.css
+++ b/frontend/admin/css/main.css
@@ -10,8 +10,8 @@
 :root {
    /* Deep dark premium background */
    --bg-primary: #0a0a0f;
-    --bg-sidebar: rgba(255, 255, 255, 0.02);
-    --bg-card: rgba(255, 255, 255, 0.03);
+    --bg-sidebar: #0f0f14;
+    --bg-card: #111116;
    --bg-card-border: rgba(255, 255, 255, 0.05);
    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-input-focus: rgba(255, 255, 255, 0.08);
@@ -42,8 +42,8 @@
 /* ===== Light Theme ===== */
 [data-theme="light"] {
    --bg-primary: #f8fafc;
-    --bg-sidebar: rgba(255, 255, 255, 0.7);
-    --bg-card: rgba(255, 255, 255, 0.75);
+    --bg-sidebar: #fdfefe;
+    --bg-card: #fdfefe;
    --bg-card-border: rgba(0, 0, 0, 0.08);
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-input-focus: rgba(0, 0, 0, 0.06);
--- a/frontend/admin/settings/css/layout.css
+++ b/frontend/admin/settings/css/layout.css
@@ -11,10 +11,8 @@
 /* ===== Sidebar ===== */
 .sidebar {
    width: 260px;
-    min-height: 100vh;
+    min-height: 0;
    background: var(--bg-sidebar);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--bg-card-border);
    display: flex;
    flex-direction: column;
@@ -22,7 +20,7 @@
    left: 0;
    top: 0;
    bottom: 0;
-    z-index: 1000;
+    z-index: 11001;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

@@ -58,6 +56,20 @@
    padding: 0.75rem;
 }

+.sidebar-nav-container {
+    flex: 1;
+    min-height: 0;
+}
+
+.sidebar:not(.collapsed) .sidebar-nav-container {
+    overflow-y: auto;
+}
+
+.sidebar-header,
+.sidebar-footer {
+    flex-shrink: 0;
+}
+
 .nav-item {
    display: flex;
    align-items: center;
@@ -95,7 +107,6 @@
 .nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
-    transform: translateX(4px);
 }

 .nav-item.active {
@@ -204,7 +215,7 @@
        transform: translateY(-50%) translateX(0);
    }
    
-    .sidebar.collapsed .sidebar-close-btn {
+    .sidebar.collapsed .sidebar-close-btn svg {
        transform: rotate(180deg);
    }
    
@@ -234,7 +245,7 @@
        margin-left: 74px;
    }
    
-    .main.sidebar-collapsed .menu-toggle {
+    .main.sidebar-collapsed .menu-toggle.btn {
        display: none;
    }
 }
@@ -265,7 +276,7 @@
 }

 /* ===== Mobile Menu Toggle ===== */
-.menu-toggle {
+.menu-toggle.btn {
    display: none;
    color: var(--text-primary);
    transition: background var(--transition);
@@ -284,7 +295,7 @@
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
-    z-index: 9;
+    z-index: 11000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
@@ -313,7 +324,10 @@
        padding: 1.25rem;
    }

-    .menu-toggle,
+    .menu-toggle.btn {
+        display: inline-flex;
+    }
+
    .sidebar-overlay {
        display: block;
    }
--- a/frontend/admin/settings/css/main.css
+++ b/frontend/admin/settings/css/main.css
@@ -9,8 +9,8 @@

 :root {
    --bg-primary: #0a0a0f;
-    --bg-sidebar: rgba(255, 255, 255, 0.02);
-    --bg-card: rgba(255, 255, 255, 0.03);
+    --bg-sidebar: #0f0f14;
+    --bg-card: #111116;
    --bg-card-border: rgba(255, 255, 255, 0.05);
    --bg-input: rgba(255, 255, 255, 0.04);
    --bg-input-focus: rgba(255, 255, 255, 0.08);
@@ -37,8 +37,8 @@
 /* ===== Светлая тема ===== */
 [data-theme="light"] {
    --bg-primary: #f8fafc;
-    --bg-sidebar: rgba(255, 255, 255, 0.7);
-    --bg-card: rgba(255, 255, 255, 0.75);
+    --bg-sidebar: #fdfefe;
+    --bg-card: #fdfefe;
    --bg-card-border: rgba(0, 0, 0, 0.08);
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-input-focus: rgba(0, 0, 0, 0.06);
@@ -86,8 +86,6 @@ body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
    padding: 0;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
    z-index: 100;
@@ -206,8 +204,6 @@ body {
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: 1rem;
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
 }

 .settings-card-compact {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
        "@opentelemetry/sdk-trace-web": "2.9.0",
        "@opentelemetry/semantic-conventions": "1.43.0",
        "esbuild": "0.25.12",
+        "playwright": "1.55.1",
        "zone.js": "0.16.0"
      },
      "engines": {
@@ -899,6 +900,21 @@
        "@esbuild/win32-x64": "0.25.12"
      }
    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/import-in-the-middle": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-3.3.1.tgz",
@@ -928,6 +944,38 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/playwright": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.55.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.55.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/react": {
      "version": "19.3.0",
      "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
    "build:react-tests": "node scripts/build-react-tests.mjs",
    "build:vendor": "node scripts/build-vendor.mjs",
    "test": "npm run build:react-tests && node --test tests/*.test.mjs",
-    "check": "npm run build:react && node --check auth-session.js && node --check telemetry.js && node --check schedule-overview.js && node --check react/login/login-service.js && node --check react/shared/api-client.js && node --check react/shared/auth-client.js && node --check react/shared/session-policy.js && node --check react/student/student-service.js && node --check react/teacher/teacher-service.js && node --check react/settings/settings-service.js && node --check react/admin/admin-service.js && node --check react/admin/react-tabs.js && node --check react/admin/classrooms-service.js && node --check react/admin/subjects-service.js && node --check react/admin/dashboard-service.js && node --check react/admin/users-service.js && node --check react/admin/groups-service.js && node --check react/admin/university-structure-service.js && node --check react/admin/teacher-requests-service.js && node --check react/admin/department-workspace-service.js && node --check react/admin/auditorium-workload-service.js && node --check react/admin/academic-calendar-service.js && node --check react/admin/schedule-view-service.js && node --check react/admin/schedule-versions-service.js && node --check react/admin/schedule-service.js && node --check react/admin/schedule-override-service.js && node --check react/admin/schedule-quality-service.js && node --check react/admin/teacher-absences-service.js && node --check admin/js/api.js && node --check admin/js/academic-period.js && node --check admin/js/dialog.js && node --check admin/js/dirty-state.js && node --check admin/js/url-state.js && node --check admin/js/view-state.js && npm test"
+    "check": "npm run build:react && node --check auth-session.js && node --check telemetry.js && node --check schedule-overview.js && node --check react/login/login-service.js && node --check react/shared/api-client.js && node --check react/shared/auth-client.js && node --check react/shared/session-policy.js && node --check react/student/student-service.js && node --check react/teacher/teacher-service.js && node --check react/settings/settings-service.js && node --check react/admin/admin-service.js && node --check react/admin/react-tabs.js && node --check react/admin/classrooms-service.js && node --check react/admin/subjects-service.js && node --check react/admin/dashboard-service.js && node --check react/admin/users-service.js && node --check react/admin/groups-service.js && node --check react/admin/university-structure-service.js && node --check react/admin/teacher-requests-service.js && node --check react/admin/department-workspace-service.js && node --check react/admin/auditorium-workload-service.js && node --check react/admin/academic-calendar-service.js && node --check react/admin/schedule-view-service.js && node --check react/admin/schedule-versions-service.js && node --check react/admin/schedule-service.js && node --check react/admin/schedule-override-service.js && node --check react/admin/schedule-quality-service.js && node --check react/admin/teacher-absences-service.js && node --check admin/js/api.js && node --check admin/js/academic-period.js && node --check admin/js/dialog.js && node --check admin/js/dirty-state.js && node --check admin/js/url-state.js && node --check admin/js/view-state.js && npm test",
+    "check:browser": "node --test tests/browser/*.test.mjs"
  },
  "devDependencies": {
    "@opentelemetry/api": "1.9.0",
@@ -24,6 +25,7 @@
    "@opentelemetry/sdk-trace-web": "2.9.0",
    "@opentelemetry/semantic-conventions": "1.43.0",
    "esbuild": "0.25.12",
+    "playwright": "1.55.1",
    "zone.js": "0.16.0"
  },
  "dependencies": {
--- a/frontend/react/admin/AdminApp.jsx
+++ b/frontend/react/admin/AdminApp.jsx
@@ -1,14 +1,14 @@
 import { Suspense, useEffect, useRef, useState } from 'react';

 import { ADMIN_APP_ROLES, SETTINGS_ROLES } from '../../admin/js/role-capabilities.js';
-import { applyRippleEffect, closeAllDropdownsOnOutsideClick } from '../../admin/js/utils.js';
-import { initAllCustomDropdowns, startDropdownAutoObserver } from '../../admin/js/dropdown.js';
 import { confirmAbandonDirtyChanges } from '../../admin/js/dirty-state.js';
 import { trackUxEvent } from '../../telemetry.js';
 import { logoutAndRedirect } from '../shared/auth-client.js';
 import { SESSION_PHASES } from '../shared/session-policy.js';
 import { useAuthorizedSession } from '../shared/use-authorized-session.js';
 import { AsyncState } from '../shared/ui/AsyncState.jsx';
+import { useSidebar } from '../shared/use-sidebar.js';
+import { SidebarToggle } from '../shared/ui/SidebarToggle.jsx';
 import { REACT_TABS } from './react-tabs.js';
 import {
    ADMIN_ROUTES,
@@ -24,7 +24,6 @@ import {
 } from './admin-service.js';

 const THEME_STORAGE_KEY = 'theme';
-const SIDEBAR_STORAGE_KEY = 'sidebar-collapsed';

 const ICONS = Object.freeze({
    dashboard: (
@@ -166,7 +165,7 @@ function AdminFrame({ children }) {
    return (
        <main className="main">
            <header className="topbar">
-                <div className="topbar-title-group">
+                    <div className="topbar-title-group">
                    <h1>Админ-панель</h1>
                </div>
            </header>
@@ -185,22 +184,11 @@ export function AdminWorkspace({ role }) {
            : tabFromHash(window.location.hash, role)
    ));
    const activeTabRef = useRef(activeTab);
-    const [collapsed, setCollapsed] = useState(() => (
-        typeof window !== 'undefined'
-            && window.innerWidth > 768
-            && localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true'
-    ));
+    const { collapsed, mobileOpen, toggleSidebar, closeSidebar } = useSidebar();
    const [settingsOpen, setSettingsOpen] = useState(false);
    const [pendingCount, setPendingCount] = useState(null);
    const settingsRef = useRef(null);

-    useEffect(() => {
-        applyRippleEffect();
-        closeAllDropdownsOnOutsideClick();
-        initAllCustomDropdowns(document.body);
-        startDropdownAutoObserver();
-    }, []);
-
    useEffect(() => {
        document.documentElement.dataset.theme = localStorage.getItem(THEME_STORAGE_KEY) || 'light';
    }, []);
@@ -255,25 +243,22 @@ export function AdminWorkspace({ role }) {
    }, [role]);

    async function requestTabSwitch(tab) {
-        if (tab === activeTabRef.current || !allowedTabs.has(tab)) return;
+        if (tab === activeTabRef.current) {
+            closeSidebar();
+            return;
+        }
+        if (!allowedTabs.has(tab)) return;
        if (activeTabRef.current && !(await confirmAbandonDirtyChanges())) return;

        activeTabRef.current = tab;
        setActiveTab(tab);
+        closeSidebar();
        trackUxEvent('раздел_открыт', { tab, role });
        if (window.location.hash !== `#${tab}`) {
            window.location.hash = tab;
        }
    }

-    function toggleSidebar() {
-        setCollapsed(current => {
-            const next = !current;
-            localStorage.setItem(SIDEBAR_STORAGE_KEY, next);
-            return next;
-        });
-    }
-
    function toggleTheme() {
        const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
        document.documentElement.dataset.theme = next;
@@ -291,7 +276,7 @@ export function AdminWorkspace({ role }) {

    return (
        <>
-            <aside className={`sidebar${collapsed ? ' collapsed' : ''}`}>
+            <aside id="app-sidebar" className={`sidebar${collapsed && !mobileOpen ? ' collapsed' : ''}${mobileOpen ? ' open' : ''}`}>
                <div className="sidebar-header">
                    <div className="logo">
                        <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
@@ -332,6 +317,7 @@ export function AdminWorkspace({ role }) {
                                <a
                                    key={item.id}
                                    href={`#${item.id}`}
+                                    title={collapsed ? item.label : undefined}
                                    className={`nav-item${item.id === activeTab ? ' active' : ''}`}
                                    data-tab={item.id}
                                    onClick={event => {
@@ -406,10 +392,11 @@ export function AdminWorkspace({ role }) {
                </div>
            </aside>

-            <div className="sidebar-overlay" />
+            <div className={`sidebar-overlay${mobileOpen ? ' open' : ''}`} onClick={closeSidebar} />

            <main className={`main${collapsed ? ' sidebar-collapsed' : ''}`}>
                <header className="topbar">
+                    <SidebarToggle open={mobileOpen} onClick={toggleSidebar} />
                    <div className="topbar-title-group">
                        <h1 id="page-title">{title}</h1>
                        {badge && !badge.hidden && (
--- a/frontend/react/admin/tabs/AcademicCalendarTab.jsx
+++ b/frontend/react/admin/tabs/AcademicCalendarTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';
 import { createPortal } from 'react-dom';

 import { confirmAbandonDirtyChanges, createDirtyScope } from '../../../admin/js/dirty-state.js';
@@ -237,17 +238,17 @@ function CalendarDayDialog({
                </div>
                <div className="form-group">
                    <label htmlFor="calendar-day-dialog-activity">Код активности</label>
-                    <select id="calendar-day-dialog-activity" value={common} onChange={onActivityChange}>
+                    <CustomSelect id="calendar-day-dialog-activity" value={common} onChange={onActivityChange}>
                        <option value="">Выберите</option>
                        {activityTypes.map(type => (
                            <option key={type.id} value={type.id}>{`${type.code} - ${type.name}`}</option>
                        ))}
-                    </select>
+                    </CustomSelect>
                </div>
                <div className="calendar-day-dialog-time-grid">
                    <div className="form-group">
                        <label htmlFor="calendar-day-dialog-time-scope">Временная сетка даты</label>
-                        <select
+                        <CustomSelect
                            id="calendar-day-dialog-time-scope"
                            value={scopeValue}
                            disabled={!isSingle}
@@ -263,7 +264,7 @@ function CalendarDayDialog({
                            ) : (
                                <option value="">Для выделения доступен только код дня</option>
                            )}
-                        </select>
+                        </CustomSelect>
                    </div>
                    <div className="calendar-day-dialog-actions">
                        <button
@@ -1447,7 +1448,7 @@ export function AcademicCalendarTab() {
                        <div className="form-row">
                            <div className="form-group">
                                <label htmlFor="academic-calendar-year">Учебный год</label>
-                                <select
+                                <CustomSelect
                                    id="academic-calendar-year"
                                    required
                                    value={calendarForm.yearId}
@@ -1466,11 +1467,11 @@ export function AcademicCalendarTab() {
                                    ) : (
                                        <option value="">Загрузка...</option>
                                    )}
-                                </select>
+                                </CustomSelect>
                            </div>
                            <div className="form-group">
                                <label htmlFor="academic-calendar-specialty">Специальность</label>
-                                <select
+                                <CustomSelect
                                    id="academic-calendar-specialty"
                                    required
                                    value={calendarForm.specialtyId}
@@ -1492,11 +1493,11 @@ export function AcademicCalendarTab() {
                                    ) : (
                                        <option value="">Загрузка...</option>
                                    )}
-                                </select>
+                                </CustomSelect>
                            </div>
                            <div className="form-group">
                                <label htmlFor="academic-calendar-profile">Профиль</label>
-                                <select
+                                <CustomSelect
                                    id="academic-calendar-profile"
                                    required
                                    value={calendarForm.profileId}
@@ -1515,11 +1516,11 @@ export function AcademicCalendarTab() {
                                    ) : (
                                        <option value="">{profileEmptyLabel}</option>
                                    )}
-                                </select>
+                                </CustomSelect>
                            </div>
                            <div className="form-group">
                                <label htmlFor="academic-calendar-study-form">Форма обучения</label>
-                                <select
+                                <CustomSelect
                                    id="academic-calendar-study-form"
                                    required
                                    value={calendarForm.studyFormId}
@@ -1538,7 +1539,7 @@ export function AcademicCalendarTab() {
                                    ) : (
                                        <option value="">Загрузка...</option>
                                    )}
-                                </select>
+                                </CustomSelect>
                            </div>
                            <div className="form-group">
                                <label htmlFor="academic-calendar-course-count">Курсов</label>
@@ -1590,7 +1591,7 @@ export function AcademicCalendarTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="academic-calendars-year-filter">Учебный год</label>
-                            <select
+                            <CustomSelect
                                id="academic-calendars-year-filter"
                                value={calendarYearFilter}
                                onChange={event => {
@@ -1604,7 +1605,7 @@ export function AcademicCalendarTab() {
                                {academicYears.map(year => (
                                    <option key={year.id} value={year.id}>{year.title}</option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                    </div>
                    <div className="table-wrap">
@@ -1899,7 +1900,7 @@ export function AcademicCalendarTab() {
                    <div className="calendar-fill-panel">
                        <div className="form-group">
                            <label htmlFor="calendar-fill-course">Курс</label>
-                            <select
+                            <CustomSelect
                                id="calendar-fill-course"
                                value={fillForm.course}
                                onChange={event => setFillForm(current => ({
@@ -1911,7 +1912,7 @@ export function AcademicCalendarTab() {
                                {fillCourseOptions.map(course => (
                                    <option key={course} value={course}>{course} курс</option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="calendar-fill-start">С даты</label>
@@ -1931,7 +1932,7 @@ export function AcademicCalendarTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="calendar-fill-activity">Код</label>
-                            <select
+                            <CustomSelect
                                id="calendar-fill-activity"
                                value={fillForm.activityId}
                                onChange={event => setFillForm(current => ({
@@ -1951,7 +1952,7 @@ export function AcademicCalendarTab() {
                                ) : (
                                    <option value="">Загрузка...</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <button
                            type="button"
@@ -2053,7 +2054,7 @@ export function AcademicCalendarTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="calendar-subject-semester">Семестр</label>
-                            <select
+                            <CustomSelect
                                id="calendar-subject-semester"
                                value={subjectSemester}
                                onChange={event => setSubjectSemester(event.target.value)}
@@ -2070,11 +2071,11 @@ export function AcademicCalendarTab() {
                                ) : (
                                    <option value="">Выберите график</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="calendar-subject-id">Дисциплина</label>
-                            <select
+                            <CustomSelect
                                id="calendar-subject-id"
                                value={sortedSubjects.some(item => String(item.id) === subjectIdValue)
                                    ? subjectIdValue
@@ -2097,7 +2098,7 @@ export function AcademicCalendarTab() {
                                ) : (
                                    <option value="">Загрузка...</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <button
                            type="button"
--- a/frontend/react/admin/tabs/AuditoriumWorkloadTab.jsx
+++ b/frontend/react/admin/tabs/AuditoriumWorkloadTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { toIsoDate } from '../../shared/dates.js';
 import { FormAlert } from '../../shared/ui/FormAlert.jsx';
@@ -406,7 +407,7 @@ export function AuditoriumWorkloadTab() {
            <div className="filter-row workload-filter-row">
                <div className="form-group workload-target-control">
                    <label htmlFor="workload-target-select">Что смотреть</label>
-                    <select
+                    <CustomSelect
                        id="workload-target-select"
                        className="workload-display-select"
                        value={currentTarget}
@@ -415,12 +416,12 @@ export function AuditoriumWorkloadTab() {
                        <option value={TARGET_CLASSROOMS}>Аудитории</option>
                        <option value={TARGET_TEACHERS}>Преподаватели</option>
                        <option value={TARGET_DEPARTMENTS}>Кафедры</option>
-                    </select>
+                    </CustomSelect>
                </div>

                <div className="form-group workload-display-control">
                    <label htmlFor="workload-display-select">Отображение</label>
-                    <select
+                    <CustomSelect
                        id="workload-display-select"
                        className="workload-display-select"
                        value={displayValue}
@@ -429,7 +430,7 @@ export function AuditoriumWorkloadTab() {
                        {displayOptions.map(option => (
                            <option key={option.value} value={option.value}>{option.label}</option>
                        ))}
-                    </select>
+                    </CustomSelect>
                </div>

                {showOverviewFilters && (
--- a/frontend/react/admin/tabs/DepartmentWorkspaceTab.jsx
+++ b/frontend/react/admin/tabs/DepartmentWorkspaceTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { getSession } from '../../../admin/js/api.js';
 import { addDays, toIsoDate } from '../../shared/dates.js';
@@ -356,7 +357,7 @@ export function DepartmentWorkspaceTab() {
                    {!isDepartmentRole && (
                        <div className="form-group" id="department-workspace-department-field">
                            <label htmlFor="department-workspace-department">Кафедра</label>
-                            <select
+                            <CustomSelect
                                id="department-workspace-department"
                                value={departmentId}
                                onChange={event => handleDepartmentChange(event.target.value)}
@@ -367,7 +368,7 @@ export function DepartmentWorkspaceTab() {
                                        {departmentOptionLabel(department)}
                                    </option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                    )}
                    <div className="form-group">
@@ -471,7 +472,7 @@ export function DepartmentWorkspaceTab() {
                    <form id="department-teacher-assign-form" className="stack-form" onSubmit={submitAssign}>
                        <div className="form-group">
                            <label htmlFor="department-teacher-select">Преподаватель</label>
-                            <select
+                            <CustomSelect
                                id="department-teacher-select"
                                value={assignTeacherId}
                                onChange={event => setAssignTeacherId(event.target.value)}
@@ -492,7 +493,7 @@ export function DepartmentWorkspaceTab() {
                                        ))}
                                    </>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="department-teacher-assign-comment">Комментарий</label>
--- a/frontend/react/admin/tabs/GroupsTab.jsx
+++ b/frontend/react/admin/tabs/GroupsTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { readUrlState, readUrlValues, writeUrlState } from '../../../admin/js/url-state.js';
 import { trackUxEvent } from '../../../telemetry.js';
@@ -134,6 +135,8 @@ export function GroupsTab() {
    }, []);

    async function loadGroups(nextState) {
+        stateRef.current = nextState;
+        setState(nextState);
        const currentRequest = requestNumber.current + 1;
        requestNumber.current = currentRequest;
        setTableLoading(true);
@@ -174,6 +177,7 @@ export function GroupsTab() {
    }

    function resetFilters() {
+        window.clearTimeout(searchTimer.current);
        setSearchInput('');
        void loadGroups({
            ...stateRef.current,
@@ -546,7 +550,7 @@ export function GroupsTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-group-ef">Форма обучения</label>
-                            <select
+                            <CustomSelect
                                id="new-group-ef"
                                value={createForm.educationFormId}
                                onChange={event => updateCreateForm({ educationFormId: event.target.value })}
@@ -554,11 +558,11 @@ export function GroupsTab() {
                                {(educationForms || []).map(form => (
                                    <option key={form.id} value={form.id}>{form.name}</option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-group-department">Кафедра</label>
-                            <select
+                            <CustomSelect
                                id="new-group-department"
                                value={createForm.departmentId}
                                onChange={event => updateCreateForm({ departmentId: event.target.value })}
@@ -569,7 +573,7 @@ export function GroupsTab() {
                                        {departmentOptionLabel(department)}
                                    </option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-group-yearStartStudy">Год начала обучения</label>
@@ -586,7 +590,7 @@ export function GroupsTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-group-speciality-code">Специальность</label>
-                            <select
+                            <CustomSelect
                                id="new-group-speciality-code"
                                value={createForm.specialtyId}
                                onChange={event => updateCreateForm({ specialtyId: event.target.value, specialtyProfileId: '' })}
@@ -597,11 +601,11 @@ export function GroupsTab() {
                                        {specialityLabel(specialties, speciality.id)}
                                    </option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-group-profile">Профиль обучения</label>
-                            <select
+                            <CustomSelect
                                id="new-group-profile"
                                value={createForm.specialtyProfileId}
                                onChange={event => updateCreateForm({ specialtyProfileId: event.target.value })}
@@ -616,7 +620,7 @@ export function GroupsTab() {
                                ) : (
                                    <option value="">Нет профилей</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <button type="submit" className="btn btn-md btn-primary">Создать</button>
                    </div>
@@ -654,7 +658,7 @@ export function GroupsTab() {
                    </div>
                    <div className="form-group">
                        <label htmlFor="groups-sort">Сортировка</label>
-                        <select
+                        <CustomSelect
                            id="groups-sort"
                            value={state.sort}
                            onChange={event => applyState({ sort: event.target.value, page: 0 })}
@@ -662,7 +666,7 @@ export function GroupsTab() {
                            {GROUP_SORT_OPTIONS.map(option => (
                                <option key={option.value} value={option.value}>{option.label}</option>
                            ))}
-                        </select>
+                        </CustomSelect>
                    </div>
                    <button type="button" className="btn btn-md btn-ghost" onClick={resetFilters}>Сбросить фильтры</button>
                </div>
@@ -819,7 +823,7 @@ export function GroupsTab() {
                                </div>
                                <div className="form-group">
                                    <label htmlFor="edit-group-ef">Форма обучения</label>
-                                    <select
+                                    <CustomSelect
                                        id="edit-group-ef"
                                        value={editModal.form.educationFormId}
                                        onChange={event => setEditModal(current => (
@@ -829,13 +833,13 @@ export function GroupsTab() {
                                        {(educationForms || []).map(form => (
                                            <option key={form.id} value={form.id}>{form.name}</option>
                                        ))}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                            </div>
                            <div className="form-row edit-group-form-row edit-group-form-row-details">
                                <div className="form-group">
                                    <label htmlFor="edit-group-department">Кафедра</label>
-                                    <select
+                                    <CustomSelect
                                        id="edit-group-department"
                                        value={editModal.form.departmentId}
                                        onChange={event => setEditModal(current => (
@@ -848,7 +852,7 @@ export function GroupsTab() {
                                                {departmentOptionLabel(department)}
                                            </option>
                                        ))}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="edit-group-yearStartStudy">Год начала обучения</label>
@@ -866,7 +870,7 @@ export function GroupsTab() {
                                </div>
                                <div className="form-group">
                                    <label htmlFor="edit-group-speciality-code">Специальность</label>
-                                    <select
+                                    <CustomSelect
                                        id="edit-group-speciality-code"
                                        value={editModal.form.specialtyId}
                                        onChange={event => setEditModal(current => (
@@ -881,11 +885,11 @@ export function GroupsTab() {
                                                {specialityLabel(specialties, speciality.id)}
                                            </option>
                                        ))}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="edit-group-profile">Профиль обучения</label>
-                                    <select
+                                    <CustomSelect
                                        id="edit-group-profile"
                                        value={editModal.form.specialtyProfileId}
                                        onChange={event => setEditModal(current => (
@@ -902,7 +906,7 @@ export function GroupsTab() {
                                        ) : (
                                            <option value="">Нет профилей</option>
                                        )}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                                <div className="form-group edit-group-submit">
                                    <button type="submit" className="btn btn-md btn-primary">Сохранить</button>
@@ -949,7 +953,7 @@ export function GroupsTab() {
                                <div className="subgroup-config-grid">
                                    <div className="form-group subgroup-count-field">
                                        <label htmlFor="manage-subgroup-count">Количество подгрупп</label>
-                                        <select
+                                        <CustomSelect
                                            id="manage-subgroup-count"
                                            value={subgroupsModal.count}
                                            onChange={event => changeSubgroupCount(event.target.value)}
@@ -957,7 +961,7 @@ export function GroupsTab() {
                                            {SUBGROUP_COUNT_OPTIONS.map(option => (
                                                <option key={option.value} value={option.value}>{option.label}</option>
                                            ))}
-                                        </select>
+                                        </CustomSelect>
                                    </div>
                                    <div className={`subgroup-capacity-fields subgroup-capacity-fields-${subgroupsModal.count}`}>
                                        {subgroupsModal.capacities.map((value, index) => (
@@ -1074,7 +1078,7 @@ export function GroupsTab() {
                                <div className="form-row form-row--bottom">
                                    <div className="form-group form-group--flush">
                                        <label htmlFor="manage-calendar-year">Учебный год</label>
-                                        <select
+                                        <CustomSelect
                                            id="manage-calendar-year"
                                            required
                                            value={calendarModal.yearId}
@@ -1084,7 +1088,7 @@ export function GroupsTab() {
                                            {(academicYears || []).map(year => (
                                                <option key={year.id} value={year.id}>{year.title}</option>
                                            ))}
-                                        </select>
+                                        </CustomSelect>
                                    </div>
                                    <div className="form-group form-group--flush form-group--wide">
                                        <label htmlFor="manage-calendar-id">Календарный график</label>
--- a/frontend/react/admin/tabs/ScheduleQualityTab.jsx
+++ b/frontend/react/admin/tabs/ScheduleQualityTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import {
    academicYearsFromSemesters,
@@ -238,17 +239,17 @@ export function ScheduleQualityTab() {
                </div>
                <div className="quality-run-panel">
                    <label htmlFor="quality-year">Учебный год</label>
-                    <select id="quality-year" value={academicYearId} onChange={handleYearChange}>
+                    <CustomSelect id="quality-year" value={academicYearId} onChange={handleYearChange}>
                        {yearOptions}
-                    </select>
+                    </CustomSelect>
                    <label htmlFor="quality-semester">Семестр</label>
-                    <select id="quality-semester" value={semesterId} onChange={handleSemesterChange}>
+                    <CustomSelect id="quality-semester" value={semesterId} onChange={handleSemesterChange}>
                        {semesterOptions}
-                    </select>
+                    </CustomSelect>
                    <label htmlFor="quality-version">Версия</label>
-                    <select id="quality-version" value={versionId} onChange={event => setVersionId(event.target.value)}>
+                    <CustomSelect id="quality-version" value={versionId} onChange={event => setVersionId(event.target.value)}>
                        {versionOptions}
-                    </select>
+                    </CustomSelect>
                    <button
                        type="button"
                        className="btn btn-md btn-primary"
@@ -335,7 +336,7 @@ export function ScheduleQualityTab() {
                                <div className="quality-filters">
                                    <label>
                                        Важность
-                                        <select
+                                        <CustomSelect
                                            id="quality-severity-filter"
                                            value={severityFilter}
                                            onChange={event => setSeverityFilter(event.target.value)}
@@ -345,11 +346,11 @@ export function ScheduleQualityTab() {
                                            <option value="HIGH">Высокие</option>
                                            <option value="MEDIUM">Средние</option>
                                            <option value="LOW">Низкие</option>
-                                        </select>
+                                        </CustomSelect>
                                    </label>
                                    <label>
                                        Категория
-                                        <select
+                                        <CustomSelect
                                            id="quality-type-filter"
                                            value={categoryFilter}
                                            onChange={event => setCategoryFilter(event.target.value)}
@@ -359,7 +360,7 @@ export function ScheduleQualityTab() {
                                            <option value="LOAD">Дневная нагрузка</option>
                                            <option value="ROOM">Аудитории</option>
                                            <option value="PREFERENCE">Пожелания</option>
-                                        </select>
+                                        </CustomSelect>
                                    </label>
                                </div>
                                <div className="quality-problems" id="quality-problems">
--- a/frontend/react/admin/tabs/ScheduleTab.jsx
+++ b/frontend/react/admin/tabs/ScheduleTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import {
    academicYearsFromSemesters,
@@ -1368,7 +1369,7 @@ export function ScheduleTab() {
                    <div className="version-constructor-controls">
                        <div className="version-constructor-field">
                            <label htmlFor="schedule-version-year">Учебный год</label>
-                            <select id="schedule-version-year" value={versionYearId} onChange={handleVersionYearChange}>
+                            <CustomSelect id="schedule-version-year" value={versionYearId} onChange={handleVersionYearChange}>
                                {initialPhase === 'loading' ? (
                                    <option value="">Загрузка годов…</option>
                                ) : years.length ? (
@@ -1376,11 +1377,11 @@ export function ScheduleTab() {
                                ) : (
                                    <option value="">Учебные годы не настроены</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="version-constructor-field">
                            <label htmlFor="schedule-version-semester">Семестр</label>
-                            <select id="schedule-version-semester" value={versionSemesterId} onChange={handleVersionSemesterChange}>
+                            <CustomSelect id="schedule-version-semester" value={versionSemesterId} onChange={handleVersionSemesterChange}>
                                {initialPhase === 'loading' ? (
                                    <option value="">Сначала выберите год</option>
                                ) : yearSemesters.length ? (
@@ -1390,11 +1391,11 @@ export function ScheduleTab() {
                                ) : (
                                    <option value="">Семестры не настроены</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="version-constructor-field version-constructor-field-wide">
                            <label htmlFor="schedule-version-select">Версия расписания</label>
-                            <select id="schedule-version-select" value={versionId} onChange={handleVersionChange}>
+                            <CustomSelect id="schedule-version-select" value={versionId} onChange={handleVersionChange}>
                                {initialPhase === 'loading' || !versionSemesterId ? (
                                    <option value="">Сначала выберите семестр</option>
                                ) : scheduleVersions.length ? (
@@ -1410,7 +1411,7 @@ export function ScheduleTab() {
                                ) : (
                                    <option value="">Расписания не созданы</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="version-constructor-actions">
                            <button type="button" className="btn btn-sm btn-primary" id="schedule-version-create-draft" onClick={openDraftModal} disabled={!selectedVersion}>Создать черновик</button>
@@ -1466,7 +1467,7 @@ export function ScheduleTab() {
                        <div className="form-row">
                            <div className="form-group">
                                <label htmlFor="schedule-rule-subject">Дисциплина</label>
-                                <select id="schedule-rule-subject" required disabled={editorDisabled} value={ruleSubjectId} onChange={handleSubjectChange}>
+                                <CustomSelect id="schedule-rule-subject" required disabled={editorDisabled} value={ruleSubjectId} onChange={handleSubjectChange}>
                                    {!subjects.length ? (
                                        <option value="">Загрузка...</option>
                                    ) : (
@@ -1475,11 +1476,11 @@ export function ScheduleTab() {
                                    {subjects.map(subject => (
                                        <option key={subject.id} value={subject.id}>{subject.name}</option>
                                    ))}
-                                </select>
+                                </CustomSelect>
                            </div>
                            <div className="form-group">
                                <label htmlFor="schedule-rule-semester">Семестр</label>
-                                <select id="schedule-rule-semester" required disabled value={ruleSemesterId} onChange={() => {}}>
+                                <CustomSelect id="schedule-rule-semester" required disabled value={ruleSemesterId} onChange={() => {}}>
                                    {!semesters.length ? (
                                        <option value="">Загрузка...</option>
                                    ) : (
@@ -1488,7 +1489,7 @@ export function ScheduleTab() {
                                    {semesters.map(semester => (
                                        <option key={semester.id} value={semester.id}>{semesterLabel(semester)}</option>
                                    ))}
-                                </select>
+                                </CustomSelect>
                            </div>
                        </div>

@@ -1723,7 +1724,7 @@ export function ScheduleTab() {
                                <div className="form-row">
                                    <div className="form-group">
                                        <label htmlFor="schedule-move-slot-day">День</label>
-                                        <select
+                                        <CustomSelect
                                            id="schedule-move-slot-day"
                                            required
                                            value={moveSlot.dayOfWeek}
@@ -1733,11 +1734,11 @@ export function ScheduleTab() {
                                        >
                                            <option value="">Выберите</option>
                                            {DAY_OPTIONS.map(day => <option key={day.value} value={day.value}>{day.label}</option>)}
-                                        </select>
+                                        </CustomSelect>
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="schedule-move-slot-time">Пара</label>
-                                        <select
+                                        <CustomSelect
                                            id="schedule-move-slot-time"
                                            required
                                            value={moveSlot.timeSlotId}
@@ -1749,7 +1750,7 @@ export function ScheduleTab() {
                                            {timeSlotOptions.map(option => (
                                                <option key={option.value} value={option.value}>{option.label}</option>
                                            ))}
-                                        </select>
+                                        </CustomSelect>
                                    </div>
                                </div>
                                <FormAlert id="schedule-move-slot-alert" alert={moveSlotAlert} />
@@ -1863,14 +1864,14 @@ export function ScheduleTab() {
                            <div className="schedule-visual-period-grid">
                                <div className="form-group">
                                    <label htmlFor="schedule-visual-year">Учебный год</label>
-                                    <select id="schedule-visual-year" value={effectiveVisualPeriod.yearId} onChange={handleVisualYearChange}>
+                                    <CustomSelect id="schedule-visual-year" value={effectiveVisualPeriod.yearId} onChange={handleVisualYearChange}>
                                        <option value="">Выберите учебный год</option>
                                        {academicYears.map(year => <option key={year.id} value={year.id}>{year.title}</option>)}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="schedule-visual-semester">Семестр</label>
-                                    <select id="schedule-visual-semester" value={effectiveVisualPeriod.semesterId} onChange={handleVisualSemesterChange}>
+                                    <CustomSelect id="schedule-visual-semester" value={effectiveVisualPeriod.semesterId} onChange={handleVisualSemesterChange}>
                                        {effectiveVisualPeriod.yearSemesters.length ? (
                                            <>
                                                <option value="">Выберите семестр</option>
@@ -1881,7 +1882,7 @@ export function ScheduleTab() {
                                        ) : (
                                            <option value="">Нет семестров</option>
                                        )}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                            </div>
                            <div className="schedule-visual-filter-head">
@@ -1950,24 +1951,24 @@ function RuleSlotRow({
        <div className={`schedule-slot-row${laboratory ? ' has-subgroup' : ''}`} data-index={index} data-slot-id={slot.id || ''}>
            <div className="form-group">
                <label>День</label>
-                <select className="slot-day" required disabled={disabled} value={slot.dayOfWeek} onChange={event => onChange(index, { dayOfWeek: Number(event.target.value) })}>
+                <CustomSelect className="slot-day" required disabled={disabled} value={slot.dayOfWeek} onChange={event => onChange(index, { dayOfWeek: Number(event.target.value) })}>
                    <option value="">Выберите</option>
                    {DAY_OPTIONS.map(day => <option key={day.value} value={day.value}>{day.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <div className="form-group">
                <label>Чётность</label>
-                <select className="slot-parity" required disabled={disabled} value={slot.parity} onChange={event => onChange(index, { parity: event.target.value })}>
+                <CustomSelect className="slot-parity" required disabled={disabled} value={slot.parity} onChange={event => onChange(index, { parity: event.target.value })}>
                    <option value="">Выберите</option>
                    {PARITY_OPTIONS.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <div className="form-group">
                <label>Пара</label>
-                <select className="slot-time" required disabled={disabled} value={slot.timeSlotId} onChange={event => onChange(index, { timeSlotId: Number(event.target.value) })}>
+                <CustomSelect className="slot-time" required disabled={disabled} value={slot.timeSlotId} onChange={event => onChange(index, { timeSlotId: Number(event.target.value) })}>
                    <option value="">Выберите</option>
                    {timeSlotOptions.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <div className="form-group">
                <label>Преподаватель</label>
@@ -2005,10 +2006,10 @@ function RuleSlotRow({
            </div>
            <div className="form-group">
                <label>Тип</label>
-                <select className="slot-lesson-type" required disabled={disabled} value={slot.lessonTypeId} onChange={event => onChange(index, { lessonTypeId: Number(event.target.value) })}>
+                <CustomSelect className="slot-lesson-type" required disabled={disabled} value={slot.lessonTypeId} onChange={event => onChange(index, { lessonTypeId: Number(event.target.value) })}>
                    <option value="">Выберите</option>
                    {lessonTypeOptions.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            {laboratory && (selectedGroupIds.length > 1 ? (
                <div className="form-group slot-subgroup-multi">
@@ -2068,7 +2069,7 @@ function RuleSlotRow({
            ) : (
                <div className="form-group">
                    <label>Подгруппа</label>
-                    <select
+                    <CustomSelect
                        className="slot-subgroup"
                        disabled={disabled}
                        value={slot.subgroupIds[0] == null ? WHOLE_GROUP_SUBGROUP_VALUE : String(slot.subgroupIds[0])}
@@ -2088,15 +2089,15 @@ function RuleSlotRow({
                                ))}
                            </>
                        )}
-                    </select>
+                    </CustomSelect>
                </div>
            ))}
            <div className="form-group">
                <label>Формат</label>
-                <select className="slot-format" required disabled={disabled} value={slot.lessonFormat} onChange={event => onChange(index, { lessonFormat: event.target.value })}>
+                <CustomSelect className="slot-format" required disabled={disabled} value={slot.lessonFormat} onChange={event => onChange(index, { lessonFormat: event.target.value })}>
                    <option value="">Выберите</option>
                    {LESSON_FORMAT_OPTIONS.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <button
                type="button"
@@ -2142,24 +2143,24 @@ function ConflictSlotRow({ slot, index, conflictFields, timeSlotOptions, onSlotC
            </div>
            <div className="form-group">
                <label>День</label>
-                <select className="conflict-slot-day" required value={slot.dayOfWeek} onChange={event => onSlotChange(index, { dayOfWeek: Number(event.target.value) })}>
+                <CustomSelect className="conflict-slot-day" required value={slot.dayOfWeek} onChange={event => onSlotChange(index, { dayOfWeek: Number(event.target.value) })}>
                    <option value="">Выберите</option>
                    {DAY_OPTIONS.map(day => <option key={day.value} value={day.value}>{day.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <div className="form-group">
                <label>Чётность</label>
-                <select className="conflict-slot-parity" required value={slot.parity} onChange={event => onSlotChange(index, { parity: event.target.value })}>
+                <CustomSelect className="conflict-slot-parity" required value={slot.parity} onChange={event => onSlotChange(index, { parity: event.target.value })}>
                    <option value="">Выберите</option>
                    {PARITY_OPTIONS.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <div className="form-group">
                <label>Пара</label>
-                <select className="conflict-slot-time" required value={slot.timeSlotId} onChange={event => onSlotChange(index, { timeSlotId: Number(event.target.value) })}>
+                <CustomSelect className="conflict-slot-time" required value={slot.timeSlotId} onChange={event => onSlotChange(index, { timeSlotId: Number(event.target.value) })}>
                    <option value="">Выберите</option>
                    {timeSlotOptions.map(option => <option key={option.value} value={option.value}>{option.label}</option>)}
-                </select>
+                </CustomSelect>
            </div>
            <div className={`form-group ${conflictFieldClass('teacher', conflictFields)}`}>
                <label>Преподаватель</label>
--- a/frontend/react/admin/tabs/ScheduleVersionsTab.jsx
+++ b/frontend/react/admin/tabs/ScheduleVersionsTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import {
    academicYearsFromSemesters,
@@ -301,15 +302,15 @@ export function ScheduleVersionsTab() {
                    <div className="version-hero-period-grid">
                        <div>
                            <label htmlFor="version-year">Учебный год</label>
-                            <select id="version-year" value={academicYearId} onChange={handleYearChange}>
+                            <CustomSelect id="version-year" value={academicYearId} onChange={handleYearChange}>
                                {yearOptions}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div>
                            <label htmlFor="version-semester">Рабочий семестр</label>
-                            <select id="version-semester" value={semesterId} onChange={handleSemesterChange}>
+                            <CustomSelect id="version-semester" value={semesterId} onChange={handleSemesterChange}>
                                {semesterOptions}
-                            </select>
+                            </CustomSelect>
                        </div>
                    </div>
                    <button type="button" className="btn btn-md btn-primary" id="version-create" onClick={openCreateModal}>
--- a/frontend/react/admin/tabs/ScheduleViewTab.jsx
+++ b/frontend/react/admin/tabs/ScheduleViewTab.jsx
@@ -1,4 +1,5 @@
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { getSession } from '../../../admin/js/api.js';
 import {
@@ -710,7 +711,7 @@ export function ScheduleViewTab() {
                <div className="schedule-view-control-grid">
                    <div className="form-group">
                        <label htmlFor="schedule-view-target">Что смотреть</label>
-                        <select
+                        <CustomSelect
                            id="schedule-view-target"
                            value={activeTargetValue}
                            disabled={isDepartment}
@@ -720,7 +721,7 @@ export function ScheduleViewTab() {
                            <option value={TARGET_TEACHERS}>Преподаватель</option>
                            <option value={TARGET_CLASSROOMS}>Аудитория</option>
                            <option value={TARGET_DEPARTMENTS}>Кафедра</option>
-                        </select>
+                        </CustomSelect>
                    </div>

                    <div
@@ -793,7 +794,7 @@ export function ScheduleViewTab() {
                        hidden={activeTargetValue !== TARGET_DEPARTMENTS}
                    >
                        <label htmlFor="schedule-view-department">Кафедра</label>
-                        <select
+                        <CustomSelect
                            id="schedule-view-department"
                            value={departmentId}
                            disabled={isDepartment}
@@ -801,7 +802,7 @@ export function ScheduleViewTab() {
                        >
                            <option value="">Все кафедры</option>
                            {departmentOptions}
-                        </select>
+                        </CustomSelect>
                    </div>

                    <input
@@ -818,7 +819,7 @@ export function ScheduleViewTab() {
                    <div className="schedule-view-extra-grid">
                        <div className="form-group">
                            <label htmlFor="schedule-view-year">Учебный год</label>
-                            <select id="schedule-view-year" value={yearId} onChange={handleYearChange}>
+                            <CustomSelect id="schedule-view-year" value={yearId} onChange={handleYearChange}>
                                {!baseLoaded ? (
                                    <option value="">Загрузка годов…</option>
                                ) : (
@@ -828,11 +829,11 @@ export function ScheduleViewTab() {
                                        ))
                                        : <option value="">Учебные годы не настроены</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="schedule-view-semester">Семестр</label>
-                            <select id="schedule-view-semester" value={semesterId} onChange={handleSemesterChange}>
+                            <CustomSelect id="schedule-view-semester" value={semesterId} onChange={handleSemesterChange}>
                                {!baseLoaded ? (
                                    <option value="">Сначала выберите год</option>
                                ) : (
@@ -844,11 +845,11 @@ export function ScheduleViewTab() {
                                        ))
                                        : <option value="">Семестры не настроены</option>
                                )}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="schedule-view-subject">Дисциплина</label>
-                            <select
+                            <CustomSelect
                                id="schedule-view-subject"
                                value={subjectId}
                                onChange={handleSimpleFilterChange('subjectId', setSubjectId)}
@@ -857,11 +858,11 @@ export function ScheduleViewTab() {
                                {subjects.map(subject => (
                                    <option key={String(subject.id)} value={String(subject.id)}>{subject.name}</option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="schedule-view-lesson-type">Тип занятия</label>
-                            <select
+                            <CustomSelect
                                id="schedule-view-lesson-type"
                                value={lessonTypeId}
                                onChange={handleSimpleFilterChange('lessonTypeId', setLessonTypeId)}
@@ -872,11 +873,11 @@ export function ScheduleViewTab() {
                                        {lessonType.name}
                                    </option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="schedule-view-parity">Неделя</label>
-                            <select
+                            <CustomSelect
                                id="schedule-view-parity"
                                value={parity}
                                onChange={handleSimpleFilterChange('parity', setParity)}
@@ -885,7 +886,7 @@ export function ScheduleViewTab() {
                                <option value="BOTH">Каждая</option>
                                <option value="ODD">Нечётная</option>
                                <option value="EVEN">Чётная</option>
-                            </select>
+                            </CustomSelect>
                        </div>
                    </div>
                </details>
@@ -1635,7 +1636,7 @@ const OverrideDrawer = forwardRef(function OverrideDrawer({
                            <div className="schedule-override-fields">
                                <div className="form-group">
                                    <label htmlFor="schedule-override-time">Время</label>
-                                    <select
+                                    <CustomSelect
                                        id="schedule-override-time"
                                        required
                                        disabled={timeSlotsLoading}
@@ -1652,7 +1653,7 @@ const OverrideDrawer = forwardRef(function OverrideDrawer({
                                                ))}
                                            </>
                                        )}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                                <div className="form-group">
                                    <label htmlFor="schedule-override-teacher">Преподаватель</label>
@@ -1692,14 +1693,14 @@ const OverrideDrawer = forwardRef(function OverrideDrawer({
                                </div>
                                <div className="form-group">
                                    <label htmlFor="schedule-override-format">Формат</label>
-                                    <select
+                                    <CustomSelect
                                        id="schedule-override-format"
                                        value={lessonFormat}
                                        onChange={event => setLessonFormat(event.target.value)}
                                    >
                                        <option value="Очно">Очно</option>
                                        <option value="Онлайн">Онлайн</option>
-                                    </select>
+                                    </CustomSelect>
                                </div>
                            </div>

--- a/frontend/react/admin/tabs/SubjectsTab.jsx
+++ b/frontend/react/admin/tabs/SubjectsTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { readUrlState, writeUrlState } from '../../../admin/js/url-state.js';
 import { trackUxEvent } from '../../../telemetry.js';
@@ -83,6 +84,8 @@ export function SubjectsTab() {
    }, []);

    async function loadSubjects(nextState) {
+        stateRef.current = nextState;
+        setState(nextState);
        const currentRequest = requestNumber.current + 1;
        requestNumber.current = currentRequest;
        setTableLoading(true);
@@ -267,7 +270,7 @@ export function SubjectsTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-subject-department">Кафедра</label>
-                            <select
+                            <CustomSelect
                                id="new-subject-department"
                                required
                                value={createDepartmentId}
@@ -279,7 +282,7 @@ export function SubjectsTab() {
                                        {departmentOptionLabel(department)}
                                    </option>
                                ))}
-                            </select>
+                            </CustomSelect>
                        </div>
                        <button type="submit" className="btn btn-md btn-primary">Добавить</button>
                    </div>
@@ -307,7 +310,7 @@ export function SubjectsTab() {
                    </div>
                    <div className="form-group">
                        <label htmlFor="subjects-department-filter">Кафедра</label>
-                        <select
+                        <CustomSelect
                            id="subjects-department-filter"
                            value={state.departmentId}
                            onChange={event => applyState({ departmentId: event.target.value, page: 0 })}
@@ -318,11 +321,11 @@ export function SubjectsTab() {
                                    {department.departmentName || department.name || department.id}
                                </option>
                            ))}
-                        </select>
+                        </CustomSelect>
                    </div>
                    <div className="form-group">
                        <label htmlFor="subjects-sort">Сортировка</label>
-                        <select
+                        <CustomSelect
                            id="subjects-sort"
                            value={state.sort}
                            onChange={event => applyState({ sort: event.target.value, page: 0 })}
@@ -330,7 +333,7 @@ export function SubjectsTab() {
                            {SUBJECT_SORT_OPTIONS.map(option => (
                                <option key={option.value} value={option.value}>{option.label}</option>
                            ))}
-                        </select>
+                        </CustomSelect>
                    </div>
                </div>
                <div className="table-wrap">
--- a/frontend/react/admin/tabs/TeacherAbsencesTab.jsx
+++ b/frontend/react/admin/tabs/TeacherAbsencesTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { getSession } from '../../../admin/js/api.js';
 import { AsyncCombobox } from '../../shared/ui/AsyncCombobox.jsx';
@@ -621,7 +622,7 @@ export function TeacherAbsencesTab() {
                        <h2>Реестр инцидентов</h2>
                    </div>
                    <div className="absence-registry-actions">
-                        <select
+                        <CustomSelect
                            id="teacher-absence-status-filter"
                            aria-label="Фильтр по статусу"
                            value={statusFilter}
@@ -636,7 +637,7 @@ export function TeacherAbsencesTab() {
                            <option value="RESOLVED">Разрешены</option>
                            <option value="REJECTED">Отклонены</option>
                            <option value="CANCELLED">Отменены</option>
-                        </select>
+                        </CustomSelect>
                        <button
                            type="button"
                            className="btn btn-md btn-secondary"
@@ -668,7 +669,7 @@ export function TeacherAbsencesTab() {
                        </div>
                    </header>
                    <div className="teacher-dialogue-toolbar">
-                        <select
+                        <CustomSelect
                            id="teacher-preference-semester-filter"
                            aria-label="Семестр пожеланий"
                            value={preferenceSemesterId}
@@ -683,8 +684,8 @@ export function TeacherAbsencesTab() {
                                    {absenceSemesterLabel(semester)}
                                </option>
                            ))}
-                        </select>
-                        <select
+                        </CustomSelect>
+                        <CustomSelect
                            id="teacher-preference-status-filter"
                            aria-label="Статус пожеланий"
                            value={preferenceStatusFilter}
@@ -696,7 +697,7 @@ export function TeacherAbsencesTab() {
                            <option value="PENDING">На рассмотрении</option>
                            <option value="APPROVED">Согласованные</option>
                            <option value="">Все статусы</option>
-                        </select>
+                        </CustomSelect>
                        <button
                            className="btn btn-md btn-secondary"
                            id="teacher-preference-refresh"
@@ -726,7 +727,7 @@ export function TeacherAbsencesTab() {
                        </div>
                    </header>
                    <div className="teacher-dialogue-toolbar">
-                        <select
+                        <CustomSelect
                            id="teacher-change-status-filter"
                            aria-label="Статус заявок"
                            value={changeStatusFilter}
@@ -739,7 +740,7 @@ export function TeacherAbsencesTab() {
                            <option value="APPROVED">Одобренные</option>
                            <option value="REJECTED">Отклонённые</option>
                            <option value="">Все статусы</option>
-                        </select>
+                        </CustomSelect>
                        <button
                            className="btn btn-md btn-secondary"
                            id="teacher-change-refresh"
@@ -919,7 +920,7 @@ function LessonDecision({ lesson, index, locked, value, onChange }) {
            </div>
            <div className="absence-lesson-decision">
                <label htmlFor={`absence-decision-${index}`}>Решение</label>
-                <select
+                <CustomSelect
                    id={`absence-decision-${index}`}
                    className="absence-decision-select"
                    disabled={locked}
@@ -930,7 +931,7 @@ function LessonDecision({ lesson, index, locked, value, onChange }) {
                    {options.map(option => (
                        <option key={option.value} value={option.value}>{option.label}</option>
                    ))}
-                </select>
+                </CustomSelect>
                {lesson.decisionStatus
                    ? <span className="absence-decision-fixed">{decisionStatusLabel(lesson.decisionStatus)}</span>
                    : null}
--- a/frontend/react/admin/tabs/TeacherRequestsTab.jsx
+++ b/frontend/react/admin/tabs/TeacherRequestsTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { readUrlState, writeUrlState } from '../../../admin/js/url-state.js';
 import { trackUxEvent } from '../../../telemetry.js';
@@ -71,6 +72,8 @@ export function TeacherRequestsTab() {
    }, []);

    async function loadRequests(nextState) {
+        stateRef.current = nextState;
+        setState(nextState);
        const currentRequest = requestNumber.current + 1;
        requestNumber.current = currentRequest;
        setTableLoading(true);
@@ -180,7 +183,7 @@ export function TeacherRequestsTab() {
                </div>
                <div className="form-group">
                    <label htmlFor="teacher-requests-status">Статус</label>
-                    <select
+                    <CustomSelect
                        id="teacher-requests-status"
                        value={state.status}
                        onChange={event => applyState({ status: event.target.value, page: 0 })}
@@ -188,7 +191,7 @@ export function TeacherRequestsTab() {
                        {REQUEST_STATUS_OPTIONS.map(option => (
                            <option key={option.value} value={option.value}>{option.label}</option>
                        ))}
-                    </select>
+                    </CustomSelect>
                </div>
            </div>
            <div className="table-wrap">
@@ -296,7 +299,7 @@ function TeacherRequestRow({ request, departments, onApprove, onReject }) {
    return (
        <tr>
            <td>
-                <select
+                <CustomSelect
                    value={departmentId}
                    onChange={event => setDepartmentId(event.target.value)}
                >
@@ -305,7 +308,7 @@ function TeacherRequestRow({ request, departments, onApprove, onReject }) {
                            {requestDepartmentLabel(department)}
                        </option>
                    ))}
-                </select>
+                </CustomSelect>
            </td>
            <td>
                <input
--- a/frontend/react/admin/tabs/UniversityStructureTab.jsx
+++ b/frontend/react/admin/tabs/UniversityStructureTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { AlertDialog, ConfirmDialog } from '../../shared/ui/ConfirmDialog.jsx';
 import { Pagination } from '../../shared/ui/Pagination.jsx';
@@ -708,7 +709,7 @@ export function UniversityStructureTab() {
                            <div className="form-row form-row--bottom">
                                <div className="form-group profile-form-spec">
                                    <label htmlFor="tab-profile-spec">Специальность</label>
-                                    <select
+                                    <CustomSelect
                                        id="tab-profile-spec"
                                        required
                                        disabled={profileForm.editing}
@@ -721,7 +722,7 @@ export function UniversityStructureTab() {
                                                {specialtyOptionLabel(speciality)}
                                            </option>
                                        ))}
-                                    </select>
+                                    </CustomSelect>
                                </div>
                                <div className="form-group profile-form-name">
                                    <label htmlFor="tab-profile-name">Название профиля</label>
--- a/frontend/react/admin/tabs/UsersTab.jsx
+++ b/frontend/react/admin/tabs/UsersTab.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { CustomSelect } from '../../shared/ui/CustomSelect.jsx';

 import { readUrlState, writeUrlState } from '../../../admin/js/url-state.js';
 import { trackUxEvent } from '../../../telemetry.js';
@@ -64,6 +65,8 @@ export function UsersTab() {
    }, []);

    async function loadUsers(nextState) {
+        stateRef.current = nextState;
+        setState(nextState);
        const currentRequest = requestNumber.current + 1;
        requestNumber.current = currentRequest;
        setTableLoading(true);
@@ -204,7 +207,7 @@ export function UsersTab() {
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-role">Роль</label>
-                            <select
+                            <CustomSelect
                                id="new-role"
                                value={createRole}
                                onChange={event => setCreateRole(event.target.value)}
@@ -215,7 +218,7 @@ export function UsersTab() {
                                <option value="EDUCATION_OFFICE">Учебный отдел</option>
                                <option value="SCHEDULE_VIEWER">Просмотр расписаний</option>
                                <option value="ADMIN">Администратор</option>
-                            </select>
+                            </CustomSelect>
                        </div>
                        <div className="form-group">
                            <label htmlFor="new-fullname">ФИО пользователя</label>
@@ -276,7 +279,7 @@ export function UsersTab() {
                    </div>
                    <div className="form-group">
                        <label htmlFor="users-role-filter">Роль</label>
-                        <select
+                        <CustomSelect
                            id="users-role-filter"
                            value={state.role}
                            onChange={event => applyState({ role: event.target.value, page: 0 })}
@@ -285,11 +288,11 @@ export function UsersTab() {
                            {ROLE_FILTER_OPTIONS.map(option => (
                                <option key={option.value} value={option.value}>{option.label}</option>
                            ))}
-                        </select>
+                        </CustomSelect>
                    </div>
                    <div className="form-group">
                        <label htmlFor="users-sort">Сортировка</label>
-                        <select
+                        <CustomSelect
                            id="users-sort"
                            value={state.sort}
                            onChange={event => applyState({ sort: event.target.value, page: 0 })}
@@ -297,7 +300,7 @@ export function UsersTab() {
                            {USER_SORT_OPTIONS.map(option => (
                                <option key={option.value} value={option.value}>{option.label}</option>
                            ))}
-                        </select>
+                        </CustomSelect>
                    </div>
                </div>
                <div className="table-wrap">
--- a/frontend/react/admin/teacher-absences-service.js
+++ b/frontend/react/admin/teacher-absences-service.js
@@ -119,7 +119,8 @@ export function preferenceDescription(item) {
 }

 export function absenceSemesterLabel(semester) {
-    const type = semester.semesterType === 'AUTUMN' ? 'осенний' : semester.semesterType === 'SPRING' ? 'весенний' : semester.semesterType;
+    const semesterType = String(semester.semesterType || '').toUpperCase();
+    const type = semesterType === 'AUTUMN' ? 'осенний' : semesterType === 'SPRING' ? 'весенний' : 'семестр';
    return `${semester.academicYearTitle} · ${type} · ${formatAbsenceDate(semester.startDate)}–${formatAbsenceDate(semester.endDate)}`;
 }

--- a/frontend/react/settings/SettingsApp.jsx
+++ b/frontend/react/settings/SettingsApp.jsx
@@ -5,6 +5,8 @@ import { logoutAndRedirect } from '../shared/auth-client.js';
 import { SESSION_PHASES } from '../shared/session-policy.js';
 import { useAuthorizedSession } from '../shared/use-authorized-session.js';
 import { AsyncState } from '../shared/ui/AsyncState.jsx';
+import { useSidebar } from '../shared/use-sidebar.js';
+import { SidebarToggle } from '../shared/ui/SidebarToggle.jsx';
 import { DatabaseTab } from './DatabaseTab.jsx';
 import { EduFormsTab } from './EduFormsTab.jsx';
 import { GeneralTab } from './GeneralTab.jsx';
@@ -15,7 +17,6 @@ import {
 } from './settings-service.js';

 const THEME_STORAGE_KEY = 'theme';
-const SIDEBAR_STORAGE_KEY = 'sidebar-collapsed';

 const TAB_ICONS = Object.freeze({
    database: (
@@ -72,19 +73,7 @@ export function SettingsApp() {
 }

 function SettingsShell({ title, sidebar, children }) {
-    const [collapsed, setCollapsed] = useState(() => (
-        typeof window !== 'undefined'
-            && window.innerWidth > 768
-            && localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true'
-    ));
-
-    function toggleSidebar() {
-        setCollapsed(current => {
-            const next = !current;
-            localStorage.setItem(SIDEBAR_STORAGE_KEY, next);
-            return next;
-        });
-    }
+    const { collapsed, mobileOpen, toggleSidebar, closeSidebar } = useSidebar();

    function toggleTheme() {
        const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
@@ -99,7 +88,7 @@ function SettingsShell({ title, sidebar, children }) {

    return (
        <>
-            <aside className={`sidebar${collapsed ? ' collapsed' : ''}`}>
+            <aside id="app-sidebar" className={`sidebar${collapsed && !mobileOpen ? ' collapsed' : ''}${mobileOpen ? ' open' : ''}`}>
                <div className="sidebar-header">
                    <div className="logo">
                        <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
@@ -127,7 +116,9 @@ function SettingsShell({ title, sidebar, children }) {
                        </svg>
                    </button>
                </div>
-                {sidebar}
+                <div className="sidebar-nav-container" onClick={event => {
+                    if (event.target.closest('.nav-item')) closeSidebar();
+                }}>{sidebar}</div>
                <div className="sidebar-footer">
                    <a href="/admin/" className="btn-back">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
@@ -149,10 +140,11 @@ function SettingsShell({ title, sidebar, children }) {
                </div>
            </aside>

-            <div className="sidebar-overlay" />
+            <div className={`sidebar-overlay${mobileOpen ? ' open' : ''}`} onClick={closeSidebar} />

            <main className={`main${collapsed ? ' sidebar-collapsed' : ''}`}>
                <header className="topbar">
+                    <SidebarToggle open={mobileOpen} onClick={toggleSidebar} />
                    <h1>{title}</h1>
                    <button
                        type="button"
--- a/frontend/react/shared/ui/AsyncCombobox.jsx
+++ b/frontend/react/shared/ui/AsyncCombobox.jsx
@@ -19,6 +19,7 @@ export function AsyncCombobox({
    const inputRef = useRef(null);
    const debounceTimer = useRef(null);
    const requestNumber = useRef(0);
+    const restoringFocus = useRef(false);
    const [open, setOpen] = useState(false);
    const [query, setQuery] = useState('');
    const [items, setItems] = useState([]);
@@ -38,8 +39,8 @@ export function AsyncCombobox({
                close();
            }
        };
-        document.addEventListener('mousedown', handlePointerDown);
-        return () => document.removeEventListener('mousedown', handlePointerDown);
+        document.addEventListener('pointerdown', handlePointerDown);
+        return () => document.removeEventListener('pointerdown', handlePointerDown);
    });

    async function search(nextQuery) {
@@ -73,16 +74,24 @@ export function AsyncCombobox({
    function choose(item) {
        onSelect(item);
        close();
+        restoreInputFocus();
+    }
+
+    function restoreInputFocus() {
+        restoringFocus.current = true;
+        inputRef.current?.focus();
+        restoringFocus.current = false;
    }

    function clear() {
        onSelect(null);
        setQuery('');
-        inputRef.current?.focus();
+        restoreInputFocus();
        void search('');
    }

    function handleFocus() {
+        if (restoringFocus.current || open) return;
        setQuery(selectedLabel);
        void search(selectedLabel);
    }
@@ -90,6 +99,12 @@ export function AsyncCombobox({
    function handleInput(event) {
        const value = event.target.value;
        setQuery(value);
+        // Старый ответ не должен стать доступен во время задержки нового поиска.
+        requestNumber.current += 1;
+        setOpen(true);
+        setItems([]);
+        setLoading(true);
+        setError('');
        window.clearTimeout(debounceTimer.current);
        debounceTimer.current = window.setTimeout(() => {
            void search(value);
@@ -98,6 +113,7 @@ export function AsyncCombobox({

    function handleInputKeydown(event) {
        if (event.key === 'Escape') {
+            event.preventDefault();
            close();
        } else if (event.key === 'ArrowDown') {
            event.preventDefault();
@@ -111,7 +127,7 @@ export function AsyncCombobox({
        if (event.key === 'Escape') {
            event.preventDefault();
            close();
-            inputRef.current?.focus();
+            restoreInputFocus();
        } else if (event.key === 'ArrowDown' && current >= 0) {
            event.preventDefault();
            options[Math.min(current + 1, options.length - 1)]?.focus();
@@ -122,7 +138,13 @@ export function AsyncCombobox({
    }

    return (
-        <div className={`async-combobox${open ? ' is-open' : ''}`} ref={rootRef}>
+        <div
+            className={`async-combobox${open ? ' is-open' : ''}`}
+            ref={rootRef}
+            onBlur={event => {
+                if (!event.currentTarget.contains(event.relatedTarget)) close();
+            }}
+        >
            <div className="async-combobox-control">
                <input
                    type="search"
--- a/frontend/react/shared/ui/CustomSelect.jsx
+++ b/frontend/react/shared/ui/CustomSelect.jsx
@@ -0,0 +1,171 @@
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+
+/** Селект дизайн-системы: разметкой и состоянием полностью управляет React. */
+export function CustomSelect({ children, ...props }) {
+    const rootRef = useRef(null);
+    const selectRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listId = useId();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [invalid, setInvalid] = useState(false);
+    const [snapshot, setSnapshot] = useState({ options: [], selectedIndex: -1, label: '' });
+
+    // Читаем итоговые option после commit: children могут содержать массивы и фрагменты.
+    // Контролируемые value, disabled и подписи синхронизируются при каждом рендере.
+    useLayoutEffect(() => {
+        const select = selectRef.current;
+        const next = {
+            options: Array.from(select.options, option => ({
+                value: option.value,
+                text: option.text,
+                disabled: option.disabled || Boolean(option.closest('optgroup')?.disabled)
+            })),
+            selectedIndex: select.selectedIndex,
+            label: Array.from(select.labels || [], label => {
+                const caption = label.cloneNode(true);
+                caption.querySelectorAll('select, .custom-select-wrapper').forEach(node => node.remove());
+                return caption.textContent.trim();
+            }).join(' ')
+        };
+        setSnapshot(current => JSON.stringify(current) === JSON.stringify(next) ? current : next);
+        if (select.validity.valid) setInvalid(false);
+    });
+
+    const expanded = open && !props.disabled;
+    useEffect(() => {
+        if (!expanded) return undefined;
+        function closeOutside(event) {
+            if (!rootRef.current?.contains(event.target)) setOpen(false);
+        }
+        document.addEventListener('pointerdown', closeOutside);
+        return () => document.removeEventListener('pointerdown', closeOutside);
+    }, [expanded]);
+
+    const selected = snapshot.options[snapshot.selectedIndex];
+    const searchable = snapshot.options.length > 6;
+
+    function choose(index) {
+        const select = selectRef.current;
+        select.selectedIndex = index;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        setOpen(false);
+        triggerRef.current?.focus();
+    }
+
+    function toggle() {
+        setQuery('');
+        setOpen(current => !current);
+    }
+
+    function handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            triggerRef.current?.focus();
+        } else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            event.preventDefault();
+            if (!expanded) {
+                setQuery('');
+                setOpen(true);
+                return;
+            }
+            const options = Array.from(rootRef.current.querySelectorAll('[role="option"]:not(:disabled)'));
+            const current = options.indexOf(document.activeElement);
+            const index = event.key === 'Home' ? 0
+                : event.key === 'End' ? options.length - 1
+                    : event.key === 'ArrowUp' ? (current < 0 ? options.length - 1 : Math.max(0, current - 1))
+                        : Math.min(options.length - 1, current + 1);
+            options[index]?.focus();
+        }
+    }
+
+    return (
+        <div
+            className={`react-custom-select${expanded ? ' select-layer-active' : ''}`}
+            ref={rootRef}
+            onKeyDown={handleKeydown}
+            onBlur={event => {
+                if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+            }}
+        >
+            <select
+                {...props}
+                ref={selectRef}
+                hidden
+                aria-hidden="true"
+                tabIndex={-1}
+                data-native-select="true"
+                onInvalid={event => {
+                    props.onInvalid?.(event);
+                    event.preventDefault();
+                    setInvalid(true);
+                    triggerRef.current?.focus();
+                }}
+            >
+                {children}
+            </select>
+            <div className={`custom-select-wrapper${expanded ? ' open' : ''}${props.disabled ? ' disabled' : ''}`}>
+                <button
+                    type="button"
+                    className={`custom-select-trigger${!selected?.value ? ' placeholder-active' : ''}`}
+                    ref={triggerRef}
+                    disabled={props.disabled}
+                    role="combobox"
+                    aria-expanded={expanded}
+                    aria-controls={listId}
+                    aria-haspopup="listbox"
+                    aria-required={props.required || undefined}
+                    aria-invalid={invalid || undefined}
+                    aria-describedby={invalid ? `${listId}-error` : undefined}
+                    aria-label={props['aria-label'] || snapshot.label || 'Выбор значения'}
+                    onClick={toggle}
+                >
+                    <span className="custom-select-text">{selected?.text || '—'}</span>
+                    <span className="custom-select-icon" aria-hidden="true">
+                        <svg width="12" height="8" viewBox="0 0 12 8" fill="none">
+                            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                    </span>
+                </button>
+                {expanded && (
+                    <div className="custom-select-menu">
+                        {searchable && (
+                            <input
+                                className="custom-select-search-input"
+                                type="search"
+                                placeholder="Поиск..."
+                                aria-label="Поиск по списку"
+                                value={query}
+                                onChange={event => setQuery(event.target.value)}
+                            />
+                        )}
+                        <ul className="react-select-options" role="listbox" id={listId}>
+                            {snapshot.options.filter(option => option.text.toLocaleLowerCase('ru').includes(query.toLocaleLowerCase('ru'))).length === 0 && (
+                                <li className="custom-select-item disabled">Ничего не найдено</li>
+                            )}
+                            {snapshot.options.map((option, index) => (
+                                option.text.toLocaleLowerCase('ru').includes(query.toLocaleLowerCase('ru')) && (
+                                    <li key={index} role="presentation">
+                                        <button
+                                            type="button"
+                                            className={`custom-select-item${index === snapshot.selectedIndex ? ' selected' : ''}${option.disabled ? ' disabled' : ''}`}
+                                            role="option"
+                                            aria-selected={index === snapshot.selectedIndex}
+                                            disabled={option.disabled}
+                                            onClick={() => choose(index)}
+                                        >
+                                            {option.text}
+                                        </button>
+                                    </li>
+                                )
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+            {invalid && <span id={`${listId}-error`} className="form-alert error" role="alert">Выберите значение</span>}
+        </div>
+    );
+}
--- a/frontend/react/shared/ui/Pagination.jsx
+++ b/frontend/react/shared/ui/Pagination.jsx
@@ -1,3 +1,4 @@
+import { CustomSelect } from './CustomSelect.jsx';
 const PAGE_SIZES = [25, 50, 100];

 export function Pagination({
@@ -25,14 +26,14 @@ export function Pagination({
            <div className="pagination-actions">
                <label className="pagination-size">
                    <span>На странице</span>
-                    <select
+                    <CustomSelect
                        value={pageSize}
                        onChange={event => onSize?.(Number(event.target.value))}
                    >
                        {PAGE_SIZES.map(value => (
                            <option key={value} value={value}>{value}</option>
                        ))}
-                    </select>
+                    </CustomSelect>
                </label>
                <button
                    type="button"
--- a/frontend/react/shared/ui/SidebarToggle.jsx
+++ b/frontend/react/shared/ui/SidebarToggle.jsx
@@ -0,0 +1,16 @@
+export function SidebarToggle({ open, onClick }) {
+    return (
+        <button
+            type="button"
+            className="btn btn-icon-md btn-secondary menu-toggle"
+            aria-label={open ? 'Закрыть меню' : 'Открыть меню'}
+            aria-expanded={open}
+            aria-controls="app-sidebar"
+            onClick={onClick}
+        >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+                <path d="M3 6h18M3 12h18M3 18h18" />
+            </svg>
+        </button>
+    );
+}
--- a/frontend/react/shared/use-sidebar.js
+++ b/frontend/react/shared/use-sidebar.js
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+const STORAGE_KEY = 'sidebar-collapsed';
+
+/** Сворачивание на десктопе и открытие мобильного меню — независимые состояния. */
+export function useSidebar() {
+    const [collapsed, setCollapsed] = useState(() => (
+        typeof window !== 'undefined' && localStorage.getItem(STORAGE_KEY) === 'true'
+    ));
+    const [mobileOpen, setMobileOpen] = useState(false);
+
+    useEffect(() => {
+        const media = window.matchMedia('(max-width: 768px)');
+        const close = () => setMobileOpen(false);
+        media.addEventListener('change', close);
+        return () => media.removeEventListener('change', close);
+    }, []);
+
+    useEffect(() => {
+        if (!mobileOpen) return undefined;
+        const close = event => {
+            if (event.key === 'Escape') setMobileOpen(false);
+        };
+        document.addEventListener('keydown', close);
+        return () => document.removeEventListener('keydown', close);
+    }, [mobileOpen]);
+
+    function toggleSidebar() {
+        if (window.matchMedia('(max-width: 768px)').matches) {
+            setMobileOpen(current => !current);
+        } else {
+            setCollapsed(current => {
+                localStorage.setItem(STORAGE_KEY, String(!current));
+                return !current;
+            });
+        }
+    }
+
+    return { collapsed, mobileOpen, toggleSidebar, closeSidebar: () => setMobileOpen(false) };
+}
--- a/frontend/scripts/build-react.mjs
+++ b/frontend/scripts/build-react.mjs
@@ -80,7 +80,7 @@ const ENTRY_OUTPUT_PATHS = Object.freeze({
    runtime: 'dist/react/shared/runtime.js'
 });

-function chunkReachability() {
+function chunkReachability(includeDynamic = true) {
    const reach = new Map();
    for (const [entryName, entryPath] of Object.entries(ENTRY_OUTPUT_PATHS)) {
        const stack = [entryPath];
@@ -90,6 +90,7 @@ function chunkReachability() {
            if (seen.has(path) || !outputs[path]) continue;
            seen.add(path);
            for (const imported of outputs[path].imports || []) {
+                if (!includeDynamic && imported.kind === 'dynamic-import') continue;
                stack.push(imported.path);
            }
        }
@@ -102,6 +103,7 @@ function chunkReachability() {
 }

 const reach = chunkReachability();
+const coldReach = chunkReachability(false);
 const adminLazyChunkPaths = sharedChunkPaths.filter(path => {
    const entries = reach.get(path);
    return entries !== undefined && entries.size > 0 && [...entries].every(name => name === 'admin');
@@ -128,7 +130,12 @@ for (const [name, path, limit, coldLimit] of [
 ]) {
    const rawBytes = outputBytes(path);
    const gzipBytes = await gzipSize(path);
-    const coldLoadGzipBytes = gzipBytes + sharedChunkGzipBytes;
+    // Холодная загрузка включает только статические зависимости этой страницы.
+    // Общий пул содержит также модули других кабинетов и не загружается целиком.
+    const entryName = Object.keys(ENTRY_OUTPUT_PATHS).find(name => ENTRY_OUTPUT_PATHS[name] === path);
+    const coldChunkPaths = sharedChunkPaths.filter(chunk => coldReach.get(chunk)?.has(entryName));
+    const coldLoadGzipBytes = gzipBytes + (await Promise.all(coldChunkPaths.map(gzipSize)))
+        .reduce((total, bytes) => total + bytes, 0);
    entryReports.push({ name, path, rawBytes, gzipBytes, coldLoadGzipBytes, limit, coldLimit });

    if (gzipBytes > limit) {
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -498,8 +498,6 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 100;
  flex-shrink: 0;
--- a/frontend/teacher/style.css
+++ b/frontend/teacher/style.css
@@ -680,10 +680,10 @@ body {
    background: transparent;
    color: var(--muted);
    cursor: pointer;
-    transition: transform .16s ease, border-color .16s ease, background .16s ease;
+    transition: border-color .16s ease, background .16s ease;
 }

-.preference-cell:hover { transform: translateY(-2px); border-color: var(--accent); }
+.preference-cell:hover { border-color: var(--accent); }
 .preference-cell span { font-size: 19px; font-weight: 900; }
 .preference-cell.is-preferred { border-color: #10b981; background: color-mix(in srgb, #10b981 15%, transparent); color: #047857; }
 .preference-cell.is-unwanted { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; }
@@ -945,4 +945,3 @@ body {
    .request-ledger-side { grid-column: 2; align-items: start; }
    .request-dialog footer { flex-direction: column-reverse; }
 }
-
--- a/frontend/tests/browser/shared-controls.test.mjs
+++ b/frontend/tests/browser/shared-controls.test.mjs
@@ -0,0 +1,152 @@
+import assert from 'node:assert/strict';
+import { after, before, test } from 'node:test';
+import { build } from 'esbuild';
+import { chromium } from 'playwright';
+
+let browser;
+let bundle;
+
+before(async () => {
+    const result = await build({
+        stdin: {
+            contents: `
+                import React from 'react';
+                import { createRoot } from 'react-dom/client';
+                import { AsyncCombobox } from './react/shared/ui/AsyncCombobox.jsx';
+                import { CustomSelect } from './react/shared/ui/CustomSelect.jsx';
+                window.requests = [];
+                window.selected = null;
+                window.submitted = false;
+                function RequiredSelectForm() {
+                    const [value, setValue] = React.useState('');
+                    return <form onSubmit={event => { event.preventDefault(); window.submitted = true; }}>
+                        <label htmlFor="required-select">Обязательный выбор</label>
+                        <CustomSelect id="required-select" name="choice" required value={value} onChange={event => setValue(event.target.value)}>
+                            <option value="">Выберите вариант</option>
+                            <option value="valid">Правильный вариант</option>
+                        </CustomSelect>
+                        <button type="submit">Отправить</button>
+                    </form>;
+                }
+                createRoot(document.getElementById('root')).render(
+                    <><AsyncCombobox
+                        selectedLabel="Выбранная группа"
+                        selectedValue="1"
+                        load={query => new Promise((resolve, reject) => {
+                            window.requests.push({ query, resolve, reject });
+                        })}
+                        onSelect={item => { window.selected = item; }}
+                    /><RequiredSelectForm /></>
+                );
+            `,
+            resolveDir: process.cwd(),
+            loader: 'jsx'
+        },
+        bundle: true,
+        write: false,
+        format: 'iife',
+        jsx: 'automatic',
+        define: { 'process.env.NODE_ENV': '"test"' }
+    });
+    bundle = result.outputFiles[0].text;
+    browser = await chromium.launch({ executablePath: process.env.CHROMIUM_PATH || '/usr/bin/chromium' });
+});
+
+after(async () => { await browser?.close(); });
+
+async function fixture(t) {
+    const page = await browser.newPage();
+    const errors = [];
+    page.on('pageerror', error => errors.push(error.message));
+    t.after(async () => {
+        await page.close();
+        assert.deepEqual(errors, [], 'Компонент вызвал ошибку JavaScript');
+    });
+    await page.setContent('<style>.async-combobox-menu { position: absolute; }</style><div id="root"></div><button id="outside">Другой элемент</button>');
+    await page.addScriptTag({ content: bundle });
+    const input = page.getByRole('combobox', { name: 'Поисковый список', exact: true });
+    await input.focus();
+    await page.waitForFunction(() => window.requests.length === 1);
+    return { page, input };
+}
+
+test('устаревший ответ или ошибка не заменяют новый поиск во время задержки', async t => {
+    for (const outcome of ['resolve', 'reject']) {
+        const { page, input } = await fixture(t);
+        await input.fill('Новая группа');
+        await page.evaluate(outcome => {
+            const request = window.requests[0];
+            if (outcome === 'resolve') request.resolve([{ id: 2, name: 'Устаревшая группа' }]);
+            else request.reject(new Error('Ошибка старого запроса'));
+        }, outcome);
+        assert.equal(await page.getByRole('option').count(), 0, 'Устаревший вариант доступен для выбора');
+        await page.getByText('Поиск...', { exact: true }).waitFor();
+        await page.waitForFunction(() => window.requests.length === 2);
+        await page.evaluate(() => window.requests[1].resolve([{ id: 3, name: 'Новая группа' }]));
+        await page.getByRole('option', { name: 'Новая группа' }).waitFor();
+        assert.equal(await page.getByRole('option').count(), 1);
+    }
+});
+
+test('Escape из списка возвращает фокус и оставляет меню закрытым', async t => {
+    const { page, input } = await fixture(t);
+    await page.evaluate(() => window.requests[0].resolve([{ id: 2, name: 'Группа' }]));
+    await page.getByRole('option').waitFor();
+    await input.press('ArrowDown');
+    await page.keyboard.press('Escape');
+    assert.equal(await input.getAttribute('aria-expanded'), 'false');
+    assert.equal(await input.evaluate(element => element === document.activeElement), true);
+    assert.equal(await page.evaluate(() => window.requests.length), 1, 'Возврат фокуса запустил лишний поиск');
+});
+
+test('возврат стрелкой вверх сохраняет поисковый текст и результаты', async t => {
+    const { page, input } = await fixture(t);
+    await input.fill('Запрос');
+    await page.waitForFunction(() => window.requests.length === 2);
+    await page.evaluate(() => window.requests[1].resolve([{ id: 2, name: 'Результат' }]));
+    await page.getByRole('option').waitFor();
+    await input.press('ArrowDown');
+    await page.keyboard.press('ArrowUp');
+    assert.equal(await input.inputValue(), 'Запрос');
+    assert.equal(await page.evaluate(() => window.requests.length), 2);
+});
+
+test('ввод после Escape открывает поиск, а уход фокуса отменяет отложенный запрос', async t => {
+    const { page, input } = await fixture(t);
+    await input.press('Escape');
+    await input.fill('Новый запрос');
+    assert.equal(await input.getAttribute('aria-expanded'), 'true');
+    await page.locator('#outside').focus();
+    await page.waitForTimeout(400);
+    assert.equal(await input.getAttribute('aria-expanded'), 'false');
+    assert.equal(await page.evaluate(() => window.requests.length), 1);
+});
+
+test('выбор варианта сохраняет значение и возвращает фокус без нового поиска', async t => {
+    const { page, input } = await fixture(t);
+    await page.evaluate(() => window.requests[0].resolve([{ id: 2, name: 'Группа' }]));
+    await page.getByRole('option').click();
+    assert.deepEqual(await page.evaluate(() => window.selected), { id: 2, name: 'Группа' });
+    assert.equal(await input.getAttribute('aria-expanded'), 'false');
+    assert.equal(await input.evaluate(element => element === document.activeElement), true);
+    assert.equal(await page.evaluate(() => window.requests.length), 1);
+});
+
+test('обязательный селект показывает ошибку, получает фокус и разрешает отправку после выбора', async t => {
+    const { page } = await fixture(t);
+    const errors = [];
+    page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); });
+    const select = page.getByRole('combobox', { name: 'Обязательный выбор', exact: true });
+    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
+    assert.equal(await page.evaluate(() => window.submitted), false);
+    await page.waitForFunction(() => document.activeElement?.getAttribute('aria-label') === 'Обязательный выбор');
+    assert.equal(await select.evaluate(element => element === document.activeElement), true);
+    assert.equal(await select.getAttribute('aria-invalid'), 'true');
+    await page.getByRole('alert').filter({ hasText: 'Выберите значение' }).waitFor();
+    await select.click();
+    await page.getByRole('option', { name: 'Правильный вариант', exact: true }).click();
+    assert.equal(await select.getAttribute('aria-invalid'), null);
+    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
+    assert.equal(await page.evaluate(() => window.submitted), true);
+    assert.deepEqual(errors, [], 'Браузер не смог сфокусировать обязательный селект');
+});
--- a/frontend/tests/browser/ui-regressions.test.mjs
+++ b/frontend/tests/browser/ui-regressions.test.mjs
@@ -0,0 +1,254 @@
+import assert from 'node:assert/strict';
+import { after, before, test } from 'node:test';
+import { chromium } from 'playwright';
+
+const baseURL = process.env.FRONTEND_TEST_BASE_URL || 'https://localhost';
+let browser;
+let context;
+let page;
+const errors = [];
+
+before(async () => {
+    browser = await chromium.launch({
+        executablePath: process.env.CHROMIUM_PATH || '/usr/bin/chromium',
+        headless: true
+    });
+    context = await browser.newContext({
+        baseURL,
+        ignoreHTTPSErrors: true,
+        viewport: { width: 1440, height: 1000 }
+    });
+    page = await context.newPage();
+    page.on('pageerror', error => errors.push(error.message));
+});
+
+after(async () => {
+    await browser?.close();
+    assert.deepEqual(errors, [], 'Во время проверки возникли ошибки JavaScript');
+});
+
+async function assertStableHover(locator) {
+    if (!await locator.isVisible() || !await locator.isEnabled()) return;
+    await locator.scrollIntoViewIfNeeded();
+    await page.mouse.move(0, 0);
+    await page.waitForTimeout(250);
+    const before = await locator.boundingBox();
+    await locator.evaluate(element => {
+        window.hoverLeaves = 0;
+        element.addEventListener('mouseleave', () => { window.hoverLeaves += 1; }, { once: true });
+    });
+    // Курсор внутри нижней кромки: старый translateY(-1px) выводил кнопку из-под него.
+    await page.mouse.move(before.x + before.width / 2, before.y + before.height - 0.2);
+    await page.waitForTimeout(500);
+    const after = await locator.boundingBox();
+    assert(Math.abs(before.x - after.x) < 0.01, 'Элемент сместился по горизонтали при наведении');
+    assert(Math.abs(before.y - after.y) < 0.01, 'Кнопка сместилась при наведении');
+    assert.equal(await page.evaluate(() => window.hoverLeaves), 0, 'Кнопка теряет наведение у края');
+}
+
+async function assertSelectsSynchronized() {
+    await page.waitForTimeout(150);
+    const values = await page.locator('.react-custom-select').evaluateAll(roots => roots.map(root => {
+        const select = root.querySelector('select');
+        return {
+            id: select.id,
+            text: select.options[select.selectedIndex]?.text || '—',
+            triggerText: root.querySelector('.custom-select-text').textContent,
+            disabled: select.disabled,
+            triggerDisabled: root.querySelector('.custom-select-trigger').disabled
+        };
+    }));
+    for (const value of values) {
+        assert.equal(value.triggerText, value.text, `Устаревшая подпись ${value.id}`);
+        assert.equal(value.triggerDisabled, value.disabled, `Устаревшее состояние disabled ${value.id}`);
+    }
+}
+
+async function choose(id, name) {
+    const root = page.locator('.react-custom-select').filter({ has: page.locator(id) });
+    const value = await root.locator('select').evaluate((select, text) => (
+        Array.from(select.options).find(option => option.text === text)?.value
+    ), name);
+    await root.locator('.custom-select-trigger').click();
+    await root.getByRole('option', { name, exact: true }).click();
+    await page.waitForFunction(({ id, value }) => document.querySelector(id)?.value === value, { id, value });
+}
+
+test('кнопки входа стабильны при наведении в обеих темах', async () => {
+    await page.goto('/');
+    await page.locator('#btn-submit').waitFor();
+    await page.waitForTimeout(1000);
+    for (const theme of ['light', 'dark']) {
+        await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
+        for (const selector of ['#btn-submit', '.toggle-password', '.theme-toggle']) {
+            await assertStableHover(page.locator(selector));
+        }
+    }
+    assert.deepEqual(await page.locator('#btn-submit').evaluate(element => ({
+        position: getComputedStyle(element).position,
+        overflow: getComputedStyle(element).overflow
+    })), { position: 'relative', overflow: 'hidden' }, 'Волна нажатия должна оставаться внутри кнопки');
+});
+
+test('вкладки админки сохраняют стабильные кнопки и актуальные селекты', async () => {
+    await page.locator('#username').fill(process.env.FRONTEND_TEST_LOGIN || 'admin');
+    await page.locator('#password').fill(process.env.FRONTEND_TEST_PASSWORD || 'admin');
+    await page.locator('#btn-submit').click();
+    await page.waitForURL('**/admin/**');
+    await page.locator('.nav-item').first().waitFor();
+    assert.equal(await page.locator('.menu-toggle').isVisible(), false, 'Десктопная кнопка мобильного меню скрыта');
+    const tabs = await page.locator('.nav-item').evaluateAll(items => items.map(item => item.dataset.tab));
+    assert(tabs.length > 0, 'Не появились вкладки админки');
+    for (const theme of ['light', 'dark']) {
+        await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
+        await assertStableHover(page.locator('.sidebar .nav-item').first());
+        for (const tab of tabs) {
+            await page.locator(`.nav-item[data-tab="${tab}"]`).click();
+            await page.locator('.tab-loading').waitFor({ state: 'hidden' });
+            await page.waitForLoadState('networkidle');
+            await assertSelectsSynchronized();
+            await assertStableHover(page.locator('.theme-toggle'));
+            const button = page.locator('#app-content .btn:visible').first();
+            if (await button.count()) await assertStableHover(button);
+        }
+    }
+    await page.locator('.nav-item[data-tab="users"]').click();
+    await page.locator('#new-role').waitFor({ state: 'attached' });
+    await choose('#new-role', 'Преподаватель');
+    await assertSelectsSynchronized();
+    await choose('#new-role', 'Студент');
+    await assertSelectsSynchronized();
+    await choose('#users-role-filter', 'Преподаватель');
+    assert.equal(await page.locator('#users-role-filter').inputValue(), 'TEACHER');
+    await choose('#users-role-filter', 'Все роли');
+    assert.equal(await page.locator('#users-role-filter').inputValue(), '');
+    await assertSelectsSynchronized();
+});
+
+test('мобильное меню админки и настроек открывается и закрывается', async () => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    for (const path of ['/admin/', '/admin/settings/']) {
+        await page.goto(path);
+        const toggle = page.getByRole('button', { name: 'Открыть меню', exact: true });
+        await toggle.click();
+        assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), true);
+        const destination = path === '/admin/'
+            ? page.locator('.nav-item[data-tab="groups"]')
+            : page.locator('.sidebar .nav-item').first();
+        await destination.click();
+        await page.locator('.tab-loading').waitFor({ state: 'hidden' });
+        await page.waitForLoadState('networkidle');
+        assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), false);
+        await toggle.click();
+        await page.locator('.sidebar-overlay').click({ position: { x: 350, y: 300 } });
+        assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), false);
+        await toggle.click();
+        await page.keyboard.press('Escape');
+        assert.equal(await page.locator('.sidebar').evaluate(element => element.classList.contains('open')), false);
+    }
+});
+
+test('кнопки календаря пожеланий преподавателя не смещаются при наведении', async () => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    await page.goto('/');
+    await page.locator('#username').fill(process.env.FRONTEND_TEST_TEACHER_LOGIN || 'Тестовый преподаватель');
+    await page.locator('#password').fill(process.env.FRONTEND_TEST_TEACHER_PASSWORD || '1234567890');
+    await page.locator('#btn-submit').click();
+    await page.waitForURL('**/teacher/**');
+    await page.locator('.workspace-tab').filter({ hasText: 'Пожелания' }).click();
+    await page.locator('.preference-cell').first().waitFor();
+    for (const theme of ['light', 'dark']) {
+        await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
+        await assertStableHover(page.locator('.preference-cell:enabled').first());
+    }
+});
+
+test('карточки дашборда не перерисовываются при наведении на боковое меню', async () => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    await page.goto('/');
+    await page.locator('#username').fill(process.env.FRONTEND_TEST_LOGIN || 'admin');
+    await page.locator('#password').fill(process.env.FRONTEND_TEST_PASSWORD || 'admin');
+    await page.locator('#btn-submit').click();
+    await page.waitForURL('**/admin/**');
+    await page.locator('.nav-item[data-tab="dashboard"]').click();
+    await page.locator('.dashboard-metric-card').first().waitFor();
+    await page.waitForLoadState('networkidle');
+    await page.locator('[aria-busy="true"]').waitFor({ state: 'hidden' });
+
+    for (const theme of ['dark', 'light']) {
+        await page.evaluate(value => { document.documentElement.dataset.theme = value; }, theme);
+        await page.mouse.move(0, 0);
+        await page.waitForTimeout(600);
+        const surfaces = await page.locator('.card, .sidebar').evaluateAll(elements => elements.map(element => {
+            const style = getComputedStyle(element);
+            return {
+                filter: style.backdropFilter,
+                transform: style.transform,
+                color: style.backgroundColor
+            };
+        }));
+        for (const surface of surfaces) {
+            assert.equal(surface.filter, 'none', 'На постоянной поверхности остался фоновой фильтр');
+            assert.equal(surface.transform, 'none', 'На карточке осталась трансформация после появления');
+            assert.match(surface.color, /^rgb\(/, 'Фон постоянной поверхности должен быть непрозрачным');
+        }
+        for (const selector of ['.dashboard-metrics-grid', '.dashboard-monitor-card', '.red-zone-card']) {
+            const card = page.locator(selector);
+            await page.mouse.move(0, 0);
+            const before = await card.screenshot();
+            await page.locator('.nav-item[data-tab="schedule"]').hover();
+            await page.waitForTimeout(500);
+            const after = await card.screenshot();
+            assert(before.equals(after), `${theme}: изображение ${selector} изменилось при наведении на меню`);
+        }
+    }
+});
+
+test('быстрые изменения фильтра и сортировки сохраняют оба параметра запроса', async () => {
+    await page.locator('.nav-item[data-tab="users"]').click();
+    await page.waitForLoadState('networkidle');
+    const requests = [];
+    let releaseFirst;
+    const firstBlocked = new Promise(resolve => { releaseFirst = resolve; });
+    await page.route('**/api/users/page?**', async route => {
+        requests.push(new URL(route.request().url()));
+        if (requests.length === 1) await firstBlocked;
+        await route.fulfill({ json: { items: [], totalItems: 0, totalPages: 0, page: 0, size: 25 } });
+    });
+    try {
+        await choose('#users-role-filter', 'Преподаватель');
+        const sortedResponse = page.waitForResponse(response => response.url().includes('/api/users/page?') && response.url().includes('sort=username'));
+        await choose('#users-sort', 'По логину');
+        await sortedResponse;
+        assert.equal(requests.at(-1).searchParams.get('role'), 'TEACHER', 'Сортировка отменила выбранную роль');
+        assert.equal(requests.at(-1).searchParams.get('sort'), 'username');
+        releaseFirst();
+        await page.waitForLoadState('networkidle');
+        assert.equal(await page.locator('#users-role-filter').inputValue(), 'TEACHER', 'Старый ответ отменил роль');
+        assert.equal(await page.locator('#users-sort').inputValue(), 'username,asc');
+    } finally {
+        releaseFirst();
+        await page.unroute('**/api/users/page?**');
+    }
+});
+
+test('сброс фильтров групп отменяет отложенный поиск', async () => {
+    await page.locator('.nav-item[data-tab="groups"]').click();
+    await page.waitForLoadState('networkidle');
+    const queries = [];
+    await page.route('**/api/groups/page?**', async route => {
+        queries.push(new URL(route.request().url()).searchParams.get('query'));
+        await route.fulfill({ json: { items: [], totalItems: 0, totalPages: 0, page: 0, size: 25 } });
+    });
+    try {
+        await page.locator('#groups-search').fill('Отменённый поиск');
+        await page.getByRole('button', { name: 'Сбросить фильтры', exact: true }).click();
+        await page.waitForTimeout(500);
+        await page.waitForLoadState('networkidle');
+        assert.equal(await page.locator('#groups-search').inputValue(), '');
+        assert(queries.length > 0, 'Сброс не обновил список');
+        assert(queries.every(query => query === ''), 'После сброса запустился старый поиск');
+    } finally {
+        await page.unroute('**/api/groups/page?**');
+    }
+});
--- a/frontend/tests/teacher-absences.test.mjs
+++ b/frontend/tests/teacher-absences.test.mjs
@@ -3,11 +3,26 @@ import { readFile } from 'node:fs/promises';
 import test from 'node:test';

 import {
+    absenceSemesterLabel,
    decisionOptions,
    parseDecisionOption,
    teacherAbsenceTeacherOptionsUrl
 } from '../react/admin/teacher-absences-service.js';

+test('подпись семестра на русском принимает регистр API расписания и пожеланий', () => {
+    for (const [semesterType, expected] of [
+        ['autumn', 'осенний'], ['AUTUMN', 'осенний'],
+        ['spring', 'весенний'], ['SPRING', 'весенний']
+    ]) {
+        assert.equal(absenceSemesterLabel({
+            semesterType,
+            academicYearTitle: '2026–2027',
+            startDate: '2026-09-01',
+            endDate: '2027-01-31'
+        }), `2026–2027 · ${expected} · 01.09.2026–31.01.2027`);
+    }
+});
+
 test('значение мастера преобразуется в payload точечного изменения', () => {
    assert.deepEqual(parseDecisionOption('REPLACE_TEACHER|17'), {
        resolution: 'REPLACE_TEACHER',
--- a/frontend/ui-foundation.css
+++ b/frontend/ui-foundation.css
@@ -138,16 +138,22 @@ input[type="time"],
        background-color var(--ui-transition),
        border-color var(--ui-transition),
        color var(--ui-transition),
-        box-shadow var(--ui-transition),
-        transform var(--ui-transition);
+        box-shadow var(--ui-transition);
 }

+/* Смещение меняет область наведения и вызывает мерцание у края кнопки. */
 .btn:hover:not(:disabled):not([aria-disabled="true"]) {
-    transform: translateY(-1px);
+    transform: none;
 }

 .btn:active:not(:disabled):not([aria-disabled="true"]) {
-    transform: translateY(0);
+    transform: none;
+}
+
+/* Волна нажатия остаётся внутри кнопки и не перекрывает соседние поля. */
+.btn-submit {
+    position: relative;
+    overflow: hidden;
 }

 .btn:focus-visible {