изменил дизайн выпадающих списков

AGENTS.md

@@ -86,3 +86,4 @@ docker compose logs -f backend
 | [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md) | Code Style, соглашения, пошаговое создание нового эндпоинта |
 | [`docs/FRONTEND.md`](docs/FRONTEND.md) | Frontend архитектура, SPA-маршрутизация, CSS, адаптивность |
 | [`docs/LOGGING.md`](docs/LOGGING.md) | Логирование: SLF4J + Logback, MDC, OpenTelemetry → SigNoz |
+| [`docs/UI_COMPONENTS.md`](docs/UI_COMPONENTS.md) | Использование дизайн-системы (кастомные селекты, чекбоксы и др.) |

backend/README.md

@@ -1,77 +0,0 @@
-# Руководство Backend-разработчика Magistr
-
-Добро пожаловать в проект Magistr! Этот бэкенд построен на **Spring Boot** и имеет сложную **мультитенантную архитектуру**, где одно приложение обслуживает множество независимых университетов, каждый со своей базой данных. В проекте также есть интеграция с Kubernetes для "горячего" управления этими тенантами.
-
-Здесь описано, как тут всё устроено, чтобы вы ничего не сломали.
-
----
-
-## 1. Архитектура мультитенантности
-
-Мы используем подход **Separate Database per Tenant** (Отдельная БД для каждого клиента).
-
-- **Как приложение понимает, к какой базе обращаться?**
-  Все запросы с фронтенда приходят с заголовком `Host` (например, `swsu.zuev.company`).
-  В классе `TenantInterceptor` (находится в `config/tenant/TenantInterceptor.java`) мы перехватываем этот запрос ДО того, как он дойдёт до контроллеров, вытаскиваем поддомен (`swsu`) и сохраняем его в `ThreadLocal` переменную через класс `TenantContext`.
-
-- **Как переключаются базы данных?**
-  Класс `TenantRoutingDataSource` наследуется от спринговского `AbstractRoutingDataSource`. Перед каждым запросом в базу (любой `findById` или `save` из репозитория) Spring спрашивает этот класс: *"Какой сейчас ключ тенанта?"*. Класс берёт имя из `TenantContext` и переключает коннект на нужную БД на лету.
-
-> **Важно:** Вся логика переключения абсолютно прозрачна для бизнес-кода. В контроллерах и сервисах вы пишете обычный код (`userRepository.findAll()`), и он сам выполнится в нужной базе.
-
----
-
-## 2. Динамическое управление тенантами (Kubernetes / ConfigMap)
-
-Бэкенд спроектирован для работы в **Kubernetes с несколькими репликами (replicas: 2+)**.
-
-Список тенантов не зашит в код:
-- В K8s он лежит в специальном `ConfigMap`, который монтируется внутрь пода как файл `tenants.json`.
-- В классе `DatabaseController` находится API для добавления нового тенанта из админки.
-- Чтобы изменения применились ко **всем подам** без перезагрузки, `DatabaseController` вызывает `ConfigMapUpdater`. Этот класс обращается напрямую к **Kubernetes API** (используя ServiceAccount токен пода) и патчит `ConfigMap`.
-- В фоне работает планировщик `TenantConfigWatcher` (каждые 30 секунд). Он следит за изменениями `tenants.json` и, если видит нового тенанта, на лету поднимает для него новый `HikariCP` пул соединений и добавляет в маршрутизатор баз данных.
-
----
-
-## 3. Базы данных и Миграции (Flyway)
-
-Мы **НЕ используем** автоматическую генерацию таблиц через Hibernate (`spring.jpa.hibernate.ddl-auto=none`).
-Структурой баз данных правит **Flyway**.
-
-Поскольку баз данных много (они создаются динамически), стандартный Spring Boot Flyway отключён. Вместо этого `TenantConfigWatcher` вызывает Flyway **программно** в момент первого подключения нового тенанта.
-
-### 🛑 ПРАВИЛА ИЗМЕНЕНИЯ СТРУКТУРЫ БД:
-
-Если вам нужно добавить новую таблицу, колонку или изменить тип поля:
-
-1. **Запрещено трогать старые файлы миграций!**
-   Запомните: файл `V1__init.sql` (и любые другие V-файлы, которые уже попали в коммит) — **СВЯЩЕНЕН**. Если вы его измените, бэкенд не запустится на сервере с ошибкой `Migration checksum mismatch`.
-
-2. **Как правильно добавить таблицу?**
-   - Зайдите в папку `src/main/resources/db/migration/`.
-   - Создайте новый файл. Название **строго** по формату: `V<Номер>__<Описание>.sql`. Например: `V2__add_student_rating_table.sql`.
-   - Напишите в нём ваш SQL (`CREATE TABLE ...`, `ALTER TABLE ...`).
-   - Сохраните и запустите проект. Flyway **сам** пройдёт по всем базам данных тенантов и накатит этот скрипт.
-
-3. **Что если локально я накосячил в V2?**
-   Пока файл `V2_...` не залит в Git и крутится только у вас на локалке, вы можете его переписывать. Но для этого вам нужно зайти в вашу локальную БД (через DBeaver/pgAdmin), вручную откатить свои кривые изменения (удалить таблицу) и **удалить запись из истории Flyway**:
-   `DELETE FROM flyway_schema_history WHERE version = '2';`
-   Либо, что проще: удалите контейнер с локальной БД (`docker compose down -v`) и поднимите заново пустую.
-
----
-
-## 4. Как запускать проект локально
-
-В корневой папке репозитория (где лежит `docker-compose.yaml`) поднимите инфраструктуру:
-```bash
-docker compose up -d
-```
-Соберется и запустится:
-- Фронтенд 
-- Бэкенд
-- Ваша локальная тестовая PostgreSQL-база данных (на порту 5432, имя базы `app_db`, юзер `myuser`, логин/пароль см. в compose файле).
-
-Файл `backend/tenants.json` нужен для локальной разработки. Если вы запускаете бэкенд в Docker Compose, вы можете указать URL `jdbc:postgresql://db:5432/app_db` (где `db` — имя контейнера в compose сети). 
-Либо, если вы тестируете взаимодействие бэкенда с вашим текущим IP-адресом (например, `192.168.1.87`), вы можете использовать этот IP. Оба варианта рабочие! Проект сразу подхватит настройки и накатит таблицы через Flyway.
-
-Контроллеры и бизнес-логику пишите как в обычном Spring Boot проекте. Главное, помните: у каждого тенанта — своё изолированное хранилище!

docs/UI_COMPONENTS.md

@@ -0,0 +1,115 @@
+# 🎨 Использование UI компонентов: Выпадающие списки (Dropdowns)
+
+В проекте Magistr используется **премиальная кастомная дизайн-система** выпадающих списков. В связи с ограничениями браузеров на стилизацию стандартных элементов `<select>`, мы реализовали два типа компонентов, которые выглядят потрясающе (с эффектом glassmorphism, встроенными микро-анимациями и свечением), но интегрируются максимально просто.
+
+---
+
+## 1. Стандартные одинарные списки (Custom Select Wrapper)
+
+Этот компонент автоматически "оборачивает" любые стандартные теги `<select>` на всём сайте, превращая их в красивые выпадающие меню. Вам **не нужно** писать сложный HTML, всё работает автоматически!
+
+### Как добавить новый одинарный список:
+
+Просто добавьте обычный тег `<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>
+```
+
+### Как это работает:
+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>`, поэтому он **автоматически перестроит красивый кастомный выпадающий список**. Никаких дополнительных вызовов для перерисовки не требуется.
+
+---
+
+## 2. Множественный выбор (Multi-Select с чекбоксами)
+
+Этот UI-компонент позволяет выбирать сразу несколько элементов из выпадающего списка. Он включает в себя кастомные красивые галочки (checkmarks) с неоновой подсветкой и кастомный скроллбар.
+
+Этот компонент требует написания определённой HTML-структуры, так как нативного тега `select multiple` с похожей функциональностью не существует.
+
+### Как добавить мульти-селект:
+
+**1. HTML Структура:**
+```html
+<div class="form-group">
+    <label>Выберите оборудование</label>
+    <div class="custom-multi-select">
+        <!-- Кнопка-триггер (то, на что нажимаем) -->
+        <div class="select-box" id="my-multi-box">
+            <span class="select-text" id="my-multi-text">Выберите...</span>
+            <svg class="dropdown-icon" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1 1.5L6 6.5L11 1.5" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        </div>
+        <!-- Само выпадающее меню -->
+        <div class="dropdown-menu" id="my-multi-menu">
+            <div id="my-multi-checkboxes" class="checkbox-group-vertical">
+                <!-- Сюда JS добавит чекбоксы -->
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+**2. Инициализация (в вашем JS-файле):**
+Используйте готовую утилиту `initMultiSelect` из `utils.js` (она обрабатывает клики и открытие/закрытие):
+```javascript
+import { initMultiSelect } from '../utils.js';
+
+// Передаем ID: box, menu, text, container
+initMultiSelect('my-multi-box', 'my-multi-menu', 'my-multi-text', 'my-multi-checkboxes');
+```
+
+**3. Рендеринг элементов с кастомными галочками:**
+Чтобы нарисовать сами чекбоксы, нужно использовать класс `.checkbox-item` и обязательный пустой `span.checkmark`. Пример генерации HTML:
+
+```javascript
+const container = document.getElementById('my-multi-checkboxes');
+const items = [{id: 1, name: "Проектор"}, {id: 2, name: "Компьютер"}];
+
+container.innerHTML = items.map(item => `
+    <label class="checkbox-item">
+        <input type="checkbox" value="${item.id}">
+        <!-- Обязательный элемент для красивой галочки: -->
+        <span class="checkmark"></span>
+        <span class="checkbox-label">${item.name}</span>
+    </label>
+`).join('');
+```
+
+### Как прочитать выбранные значения:
+Просто соберите массив value у выбранных чекбоксов внутри контейнера:
+
+```javascript
+const checkedBoxes = Array.from(document.querySelectorAll('#my-multi-checkboxes input:checked'));
+const selectedIds = checkedBoxes.map(chk => parseInt(chk.value, 10));
+console.log(selectedIds); // [1, 2]
+```
+
+---
+
+## Итог и правила
+
+1. **Никогда не пытайтесь "красить" нативные теги `<option>`.** Браузеры (особенно Safari и Chrome) не позволяют этого сделать.
+2. Для **отдельного выбора (1 из N)** всегда используйте стандартный `select`. Наша обёртка сделает всю магию сама.
+3. Для **множественного выбора (N из M)** используйте HTML-шаблон `.custom-multi-select` (с `span.checkmark`).

frontend/admin/css/components.css

@@ -72,7 +72,7 @@
 }
 
 .form-group input,
-.form-group select {
+.filter-row input {
     width: 100%;
     padding: 0.75rem 1rem;
     background: var(--bg-input);
@@ -85,20 +85,22 @@
     transition: all var(--transition);
 }
 
-.form-group input::placeholder {
+.form-group input::placeholder,
+.filter-row input::placeholder {
     color: var(--text-placeholder);
     transition: opacity var(--transition);
 }
 
 .form-group input:focus,
-.form-group select:focus {
+.filter-row input:focus {
     background: var(--bg-input-focus);
     border-color: var(--accent);
     box-shadow: 0 0 0 4px var(--accent-glow);
     transform: translateY(-1px);
 }
 
-.form-group input:focus::placeholder {
+.form-group input:focus::placeholder,
+.filter-row input:focus::placeholder {
     opacity: 0.5;
 }
 
@@ -114,34 +116,187 @@ input[type="number"] {
     appearance: textfield;
 }
 
-/* Select Base Style */
+/* ===== Premium Custom Dropdown Styles ===== */
-.form-group select,
+.custom-select-wrapper {
-.filter-row select {
+    position: relative;
-    cursor: pointer;
+    width: 100%;
-    appearance: none;
+    user-select: none;
-    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    font-family: inherit;
-    background-repeat: no-repeat;
-    background-position: right 0.75rem center;
-    padding-right: 2.25rem;
 }
 
-.form-group select option,
+.custom-select-trigger {
-.filter-row select option {
+    display: flex;
-    background: #1a1a2e;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: var(--bg-input);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
     color: var(--text-primary);
+    font-size: 0.95rem;
+    cursor: pointer;
+    outline: none;
+    transition: all var(--transition);
+}
+
+.filter-row .custom-select-trigger {
+    padding: 0.45rem 1rem;
+    font-size: 0.85rem;
+    border-color: transparent;
+}
+
+.custom-select-trigger:hover {
+    background: var(--bg-hover);
+}
+
+.custom-select-trigger:focus,
+.custom-select-wrapper.open .custom-select-trigger {
+    background: var(--bg-input-focus);
+    border-color: var(--accent);
+    box-shadow: 0 0 0 4px var(--accent-glow);
+    transform: translateY(-1px);
+}
+
+.filter-row .custom-select-wrapper.open .custom-select-trigger,
+.filter-row .custom-select-trigger:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.custom-select-trigger.placeholder-active .custom-select-text {
+    color: var(--text-placeholder);
+}
+
+.custom-select-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.custom-select-icon {
+    margin-left: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.custom-select-wrapper.open .custom-select-icon {
+    transform: rotate(180deg);
+    color: var(--accent);
+}
+
+.custom-select-menu {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    width: 100%;
+    max-height: 280px;
+    overflow-y: auto;
+    background: rgba(10, 10, 15, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
+    padding: 0.5rem;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px) scale(0.98);
+    transform-origin: top center;
+    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
+    list-style: none;
+    margin: 0;
+}
+
+.custom-select-wrapper.open .custom-select-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+}
+
+/* Custom Scrollbar for Dropdown */
+.custom-select-menu::-webkit-scrollbar {
+    width: 6px;
+}
+.custom-select-menu::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 8px;
+}
+.custom-select-menu::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+}
+.custom-select-menu::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.custom-select-item {
+    padding: 0.6rem 0.8rem;
+    margin-bottom: 0.15rem;
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
+}
+
+.custom-select-item:last-child {
+    margin-bottom: 0;
+}
+
+.custom-select-item:hover:not(.disabled) {
+    background: var(--bg-hover);
+    padding-left: 1.1rem;
+}
+
+.custom-select-item.selected {
+    background: var(--accent-glow);
+    color: #fff;
+    font-weight: 500;
+}
+
+.custom-select-item.selected:hover {
+    background: var(--accent-glow);
+    padding-left: 0.8rem;
+}
+
+.custom-select-item.disabled {
+    color: var(--text-secondary);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.custom-select-item.placeholder-item {
+    display: none; /* Hide placeholder options in the actual dropdown list naturally */
 }
 
 /* Light theme selects */
 [data-theme="light"] .form-group input,
-[data-theme="light"] .form-group select,
+[data-theme="light"] .filter-row input,
-[data-theme="light"] .filter-row select {
+[data-theme="light"] .custom-select-trigger {
     border-color: rgba(0, 0, 0, 0.15);
 }
 
-[data-theme="light"] .form-group select option,
+[data-theme="light"] .custom-select-menu {
-[data-theme="light"] .filter-row select option {
+    background: rgba(255, 255, 255, 0.95);
-    background: #fff;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
-    color: #1a1a2e;
+}
+
+[data-theme="light"] .custom-select-menu::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+}
+[data-theme="light"] .custom-select-menu::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.25);
+}
+
+[data-theme="light"] .custom-select-item.selected {
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--accent-hover);
 }
 
 /* Filter Row */
@@ -172,7 +327,7 @@ input[type="number"] {
     white-space: nowrap;
 }
 
-.filter-row select {
+.filter-row input {
     padding: 0.45rem 2rem 0.45rem 0.7rem;
     background: var(--bg-input);
     border: 1px solid transparent;
@@ -182,7 +337,7 @@ input[type="number"] {
     transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
 }
 
-.filter-row select:focus {
+.filter-row input:focus {
     background-color: var(--bg-input-focus);
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-glow);
@@ -230,26 +385,33 @@ input[type="number"] {
 
 .dropdown-menu {
     position: absolute;
-    top: 100%;
+    top: calc(100% + 0.5rem);
     left: 0;
     width: 100%;
-    margin-top: 0.5rem;
+    background: rgba(10, 10, 15, 0.95);
-    background: rgba(15, 23, 42, 0.95);
+    backdrop-filter: blur(16px);
-    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(12px);
     border: 1px solid var(--bg-card-border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-    padding: 1rem;
+    padding: 0.5rem;
     z-index: 100;
     opacity: 0;
     visibility: hidden;
-    transform: translateY(-10px);
+    transform: translateY(-8px) scale(0.98);
-    transition: all var(--transition);
+    transform-origin: top center;
+    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
 }
 
 [data-theme="light"] .custom-multi-select .dropdown-menu {
-    background: rgba(255, 255, 255, 0.98);
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
+}
+
+.dropdown-menu.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
 }
 
 .dropdown-menu.open {
@@ -261,26 +423,102 @@ input[type="number"] {
 .checkbox-group-vertical {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.25rem;
-    max-height: 200px;
+    max-height: 250px;
     overflow-y: auto;
+    padding-right: 0.25rem;
+}
+
+.checkbox-group-vertical::-webkit-scrollbar {
+    width: 6px;
+}
+.checkbox-group-vertical::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 8px;
+}
+.checkbox-group-vertical::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+}
+.checkbox-group-vertical::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+[data-theme="light"] .checkbox-group-vertical::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+}
+[data-theme="light"] .checkbox-group-vertical::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.25);
 }
 
 .checkbox-item {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    position: relative;
+    padding: 0.5rem 0.5rem 0.5rem 2.25rem;
     cursor: pointer;
     font-size: 0.9rem;
     color: var(--text-primary);
-    padding: 0.25rem 0;
+    border-radius: var(--radius-sm);
+    user-select: none;
+    transition: background 0.2s ease;
+}
+
+.checkbox-item:hover {
+    background: var(--bg-hover);
 }
 
 .checkbox-item input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
     cursor: pointer;
-    width: 1.1rem;
+    height: 0;
-    height: 1.1rem;
+    width: 0;
-    accent-color: var(--accent);
+}
+
+.checkbox-item .checkmark {
+    position: absolute;
+    top: 50%;
+    left: 0.6rem;
+    transform: translateY(-50%);
+    height: 1.15rem;
+    width: 1.15rem;
+    background-color: var(--bg-input);
+    border: 1px solid var(--bg-card-border);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.checkbox-item:hover input ~ .checkmark {
+    border-color: var(--accent);
+}
+
+.checkbox-item input:focus ~ .checkmark {
+    box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.checkbox-item input:checked ~ .checkmark {
+    background-color: var(--accent);
+    border-color: var(--accent);
+    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
+}
+
+.checkmark::after {
+    content: "";
+    display: none;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    margin-bottom: 2px;
+}
+
+.checkbox-item input:checked ~ .checkmark::after {
+    display: block;
 }
 
 /* ===== Buttons ===== */

frontend/admin/css/layout.css

@@ -162,50 +162,57 @@
     bottom: calc(100% + 0.5rem);
     left: 0;
     right: 0;
-    background: rgba(15, 23, 42, 0.97);
+    background: rgba(10, 10, 15, 0.95);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--bg-card-border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
-    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
-    padding: 0.4rem;
+    padding: 0.5rem;
     z-index: 200;
     opacity: 0;
     visibility: hidden;
-    transform: translateY(8px);
+    transform: translateY(8px) scale(0.98);
-    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
+    transform-origin: bottom center;
+    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
 }
 
 [data-theme="light"] .settings-menu {
-    background: rgba(255, 255, 255, 0.98);
+    background: rgba(255, 255, 255, 0.95);
-    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
 }
 
 .settings-dropdown.open .settings-menu {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
 }
 
 .settings-menu-item {
     display: flex;
     align-items: center;
     gap: 0.6rem;
-    padding: 0.6rem 0.75rem;
+    padding: 0.6rem 0.8rem;
     border: none;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     background: none;
     color: var(--text-primary);
     font-family: inherit;
-    font-size: 0.88rem;
+    font-size: 0.9rem;
     cursor: pointer;
     text-decoration: none;
-    transition: background 0.2s ease;
+    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
     width: 100%;
+    margin-bottom: 0.15rem;
+}
+
+.settings-menu-item:last-child {
+    margin-bottom: 0;
 }
 
 .settings-menu-item:hover {
     background: var(--bg-hover);
+    padding-left: 1.1rem;
 }
 
 .settings-menu-item--danger {
@@ -214,6 +221,7 @@
 
 .settings-menu-item--danger:hover {
     background: rgba(248, 113, 113, 0.1);
+    padding-left: 1.1rem;
 }
 
 .settings-menu-divider {

frontend/admin/js/dropdown.js

@@ -0,0 +1,222 @@
+// dropdown.js - Premium Custom Dropdowns
+
+export class CustomSelect {
+    constructor(originalSelect) {
+        if (originalSelect.classList.contains('custom-select-initialized')) return;
+        
+        this.originalSelect = originalSelect;
+        this.originalSelect.classList.add('custom-select-initialized');
+        
+        // Hide original but keep it accessible for form submissions and JS
+        this.originalSelect.style.display = 'none';
+
+        // Bind methods
+        this.handleTriggerClick = this.handleTriggerClick.bind(this);
+        this.closeAll = this.closeAll.bind(this);
+        this.handleItemClick = this.handleItemClick.bind(this);
+        this.rebuildMenu = this.rebuildMenu.bind(this);
+
+        this.init();
+        
+        // Watch for dynamic changes (like when api fetching populates <option> tags)
+        this.observer = new MutationObserver((mutations) => {
+            let shouldRebuild = false;
+            mutations.forEach(mut => {
+                if (mut.type === 'childList') shouldRebuild = true;
+            });
+            if (shouldRebuild) {
+                this.rebuildMenu();
+            }
+        });
+        
+        this.observer.observe(this.originalSelect, { childList: true });
+
+        // Listen for external value changes (e.g. form.reset())
+        this.originalSelect.addEventListener('change', () => {
+            this.syncTriggerText();
+        });
+    }
+
+    init() {
+        // Create wrapper
+        this.wrapper = document.createElement('div');
+        this.wrapper.className = 'custom-select-wrapper';
+        
+        // Insert wrapper right after the original select
+        this.originalSelect.parentNode.insertBefore(this.wrapper, this.originalSelect.nextSibling);
+
+        // Create trigger button
+        this.trigger = document.createElement('div');
+        this.trigger.className = 'custom-select-trigger';
+        this.trigger.tabIndex = 0; // Make focusable
+        
+        this.triggerText = document.createElement('span');
+        this.triggerText.className = 'custom-select-text';
+        
+        this.triggerIcon = document.createElement('div');
+        this.triggerIcon.className = 'custom-select-icon';
+        this.triggerIcon.innerHTML = `<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+        this.trigger.appendChild(this.triggerText);
+        this.trigger.appendChild(this.triggerIcon);
+
+        // Create menu
+        this.menu = document.createElement('ul');
+        this.menu.className = 'custom-select-menu';
+
+        this.wrapper.appendChild(this.trigger);
+        this.wrapper.appendChild(this.menu);
+
+        this.rebuildMenu();
+
+        // Events
+        this.trigger.addEventListener('click', this.handleTriggerClick);
+        this.trigger.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTriggerClick(e);
+            } else if (e.key === 'Escape') {
+                this.close();
+            }
+        });
+
+        // Close when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!this.wrapper.contains(e.target)) {
+                this.close();
+            }
+        });
+    }
+
+    rebuildMenu() {
+        this.menu.innerHTML = '';
+        const options = Array.from(this.originalSelect.options);
+        
+        if (options.length === 0) {
+            const li = document.createElement('li');
+            li.className = 'custom-select-item disabled';
+            li.textContent = 'Нет опций';
+            this.menu.appendChild(li);
+        } else {
+            options.forEach((option, index) => {
+                const li = document.createElement('li');
+                li.className = 'custom-select-item';
+                li.textContent = option.text;
+                li.dataset.value = option.value;
+                li.dataset.index = index;
+                
+                if (option.disabled || option.value === '') {
+                    li.classList.add('disabled');
+                    if (option.value === '') li.classList.add('placeholder-item');
+                } else {
+                    li.addEventListener('click', (e) => this.handleItemClick(e, index));
+                }
+
+                if (option.selected) {
+                    li.classList.add('selected');
+                }
+
+                this.menu.appendChild(li);
+            });
+        }
+
+        this.syncTriggerText();
+    }
+
+    syncTriggerText() {
+        const selectedOption = this.originalSelect.options[this.originalSelect.selectedIndex];
+        
+        if (selectedOption) {
+            this.triggerText.textContent = selectedOption.text;
+            if (selectedOption.value === '') {
+                this.trigger.classList.add('placeholder-active');
+            } else {
+                this.trigger.classList.remove('placeholder-active');
+            }
+        } else {
+            this.triggerText.textContent = '—';
+            this.trigger.classList.add('placeholder-active');
+        }
+
+        // Disable state sync
+        if (this.originalSelect.disabled) {
+            this.wrapper.classList.add('disabled');
+            this.trigger.tabIndex = -1;
+        } else {
+            this.wrapper.classList.remove('disabled');
+            this.trigger.tabIndex = 0;
+        }
+
+        // Highlight selected in menu
+        const items = this.menu.querySelectorAll('.custom-select-item');
+        items.forEach(item => item.classList.remove('selected'));
+        if (selectedOption && this.originalSelect.selectedIndex >= 0) {
+            const activeItem = this.menu.querySelector(`[data-index="${this.originalSelect.selectedIndex}"]`);
+            if(activeItem) activeItem.classList.add('selected');
+        }
+    }
+
+    handleTriggerClick(e) {
+        if (this.originalSelect.disabled) return;
+        
+        const isOpen = this.wrapper.classList.contains('open');
+        this.closeAll(); // Close other open dropdowns
+
+        if (!isOpen) {
+            this.wrapper.classList.add('open');
+            // Scroll selected item into view
+            const selectedItem = this.menu.querySelector('.selected');
+            if (selectedItem) {
+                setTimeout(() => {
+                    selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                }, 50);
+            }
+        }
+    }
+
+    closeAll() {
+        document.querySelectorAll('.custom-select-wrapper.open').forEach(wrapper => {
+            wrapper.classList.remove('open');
+        });
+    }
+
+    close() {
+        this.wrapper.classList.remove('open');
+    }
+
+    handleItemClick(e, index) {
+        e.stopPropagation();
+        this.originalSelect.selectedIndex = index;
+        
+        // Trigger native change event so other scripts (users.js) pick it up
+        this.originalSelect.dispatchEvent(new Event('change', { bubbles: true }));
+        
+        this.syncTriggerText();
+        this.close();
+    }
+}
+
+// Global initializer
+export function initAllCustomDropdowns(root = document) {
+    const selects = root.querySelectorAll('select:not(.custom-select-initialized)');
+    selects.forEach(select => {
+        new CustomSelect(select);
+    });
+}
+
+// Observe DOM for automatically picking up new select elements
+export function startDropdownAutoObserver() {
+    const observer = new MutationObserver((mutations) => {
+        let shouldInit = false;
+        mutations.forEach(mut => {
+            if (mut.addedNodes.length > 0) {
+                shouldInit = true;
+            }
+        });
+        if (shouldInit) {
+            initAllCustomDropdowns(document.body);
+        }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+}

frontend/admin/js/main.js

@@ -5,6 +5,18 @@ if (!['localhost', '127.0.0.1'].includes(window.location.hostname)) {
 
 import { isAuthenticatedAsAdmin } from './api.js';
 import { applyRippleEffect, closeAllDropdownsOnOutsideClick } from './utils.js';
+import { startDropdownAutoObserver, initAllCustomDropdowns } from './dropdown.js';
+
+// Auth check
+if (!isAuthenticatedAsAdmin()) {
+    window.location.href = '/';
+}
+
+// Global initialization for Custom Selects
+document.addEventListener('DOMContentLoaded', () => {
+    initAllCustomDropdowns(document.body);
+    startDropdownAutoObserver();
+});
 
 import { initUsers } from './views/users.js';
 import { initGroups } from './views/groups.js';

frontend/admin/js/views/equipments.js

@@ -24,7 +24,9 @@ export function renderEquipmentCheckboxes(equipments, containerId, textId, check
         const isChecked = checkedIds.includes(eq.id) ? 'checked' : '';
         return `
         <label class="checkbox-item">
-            <input type="checkbox" value="${eq.id}" ${isChecked}> ${escapeHtml(eq.name)}
+            <input type="checkbox" value="${eq.id}" ${isChecked}>
+            <span class="checkmark"></span>
+            <span class="checkbox-label">${escapeHtml(eq.name)}</span>
         </label>
     `}).join('');
     updateSelectText(containerId, textId);

frontend/admin/settings/js/main.js

@@ -1,4 +1,5 @@
 // Settings page main.js
+import { startDropdownAutoObserver, initAllCustomDropdowns } from '../../js/dropdown.js';
 
 // Auth check
 const token = localStorage.getItem('token');
@@ -7,6 +8,12 @@ if (!token || role !== 'ADMIN') {
     window.location.href = '/';
 }
 
+// Global initialization for Custom Selects
+document.addEventListener('DOMContentLoaded', () => {
+    initAllCustomDropdowns(document.body);
+    startDropdownAutoObserver();
+});
+
 // Configuration
 const ROUTES = {
     general: { title: 'Общие настройки', file: 'views/general.html' },

frontend/script.js

@@ -2,7 +2,8 @@
   'use strict';
 
   // --- OpenTelemetry Frontend Instrumentation ---
-  // Загружаем OTel Web SDK динамически через esm.sh, чтобы не ломать старый Vanilla JS (без type="module")
+  // Загружаем OTel только на продакшене (не на localhost)
+  if (!['localhost', '127.0.0.1'].includes(window.location.hostname)) {
     import('https://esm.sh/@opentelemetry/sdk-trace-web').then(async ({ WebTracerProvider, BatchSpanProcessor }) => {
       const { OTLPTraceExporter } = await import('https://esm.sh/@opentelemetry/exporter-trace-otlp-http');
       const { getWebAutoInstrumentations } = await import('https://esm.sh/@opentelemetry/auto-instrumentations-web');
@@ -10,7 +11,7 @@
       const { Resource } = await import('https://esm.sh/@opentelemetry/resources');
 
       const exporter = new OTLPTraceExporter({
-      url: window.location.origin + '/otel/v1/traces' // Трафик пойдет через ваш Caddy Proxy
+        url: window.location.origin + '/otel/v1/traces'
       });
       
       const provider = new WebTracerProvider({
@@ -25,6 +26,7 @@
       });
       console.log("SigNoz (OpenTelemetry) инициализирован во фронтенде.");
     }).catch(e => console.error("Ошибка загрузки OTel:", e));
+  }
   // ----------------------------------------------
 
   const form = document.getElementById('login-form');