From db05b4fcdb02ca8604cc8b1550c3b7854950f081 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Sat, 11 Apr 2026 20:44:16 +0300
Subject: [PATCH] refactor(frontend): align calendar and list UI

---
 backend/api/v1/schedule/serializers.py        |  14 +
 frontend/next-env.d.ts                        |   2 +-
 frontend/src/app/equipment/page.tsx           | 108 +++---
 frontend/src/app/globals.css                  |  23 ++
 frontend/src/app/messages/page.tsx            |   4 +-
 frontend/src/app/notifications/page.tsx       |  63 ++--
 frontend/src/app/procurement/page.tsx         |  84 ++---
 frontend/src/app/requests/page.tsx            |   4 +-
 frontend/src/components/BigCalendar.tsx       |   7 +-
 .../components/CalendarParticipantsModal.tsx  |  54 ++-
 frontend/src/components/EventModal.tsx        | 315 +++++++++++++-----
 .../src/components/NotificationCenter.tsx     |  20 +-
 .../src/components/ViewDayEventsModal.tsx     |   3 +-
 .../src/components/ViewEventDetailsModal.tsx  |   3 +-
 .../src/components/calendar/CalendarCard.tsx  |   5 +-
 frontend/src/hooks/useCalendarModals.ts       |   3 +-
 frontend/src/hooks/useProcurementPage.ts      |  68 +++-
 frontend/src/lib/calendar-event-colors.ts     |  16 +
 18 files changed, 548 insertions(+), 248 deletions(-)
 create mode 100644 frontend/src/lib/calendar-event-colors.ts

diff --git a/backend/api/v1/schedule/serializers.py b/backend/api/v1/schedule/serializers.py
index 2e5040e6..a847b3ae 100644
--- a/backend/api/v1/schedule/serializers.py
+++ b/backend/api/v1/schedule/serializers.py
@@ -496,6 +496,7 @@ class EventRelationSerializer(serializers.ModelSerializer):
 
     event_title = serializers.CharField(source="event.title", read_only=True)
     user_name = serializers.SerializerMethodField()
+    user_avatar = serializers.SerializerMethodField()
     content_type = serializers.PrimaryKeyRelatedField(
         queryset=ContentType.objects.all(),
         required=False,  # Делаем необязательным
@@ -511,6 +512,7 @@ class EventRelationSerializer(serializers.ModelSerializer):
             "object_id",
             "distinction",
             "user_name",
+            "user_avatar",
         ]
         read_only_fields = ["id"]
 
@@ -521,6 +523,18 @@ class EventRelationSerializer(serializers.ModelSerializer):
             return str(obj.content_object)
         return None
 
+    @extend_schema_field(serializers.CharField(allow_null=True))
+    def get_user_avatar(self, obj):
+        """URL аватара связанного сотрудника."""
+        user = getattr(obj, "content_object", None)
+        avatar = getattr(user, "avatar", None)
+        if avatar:
+            try:
+                return avatar.url
+            except Exception:
+                return str(avatar)
+        return None
+
     def create(self, validated_data):
         """Автоматически устанавливает content_type для User."""
         if "content_type" not in validated_data:
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index 9edff1c7..c4b7818f 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/frontend/src/app/equipment/page.tsx b/frontend/src/app/equipment/page.tsx
index f039e067..ebb19ead 100644
--- a/frontend/src/app/equipment/page.tsx
+++ b/frontend/src/app/equipment/page.tsx
@@ -153,23 +153,23 @@ export default function EquipmentPage() {
   return (
     <AppShell>
       {loading ? (
-        <div className="rounded-2xl bg-white p-8 text-center shadow-sm ring-1 ring-gray-100">
+        <div className="app-surface rounded-2xl p-8 text-center">
           <div className="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-sky-400 border-t-transparent" />
-          <p className="text-sm text-gray-500">Загрузка оборудования...</p>
+          <p className="app-text-muted text-sm">Загрузка оборудования...</p>
         </div>
       ) : error ? (
-        <div className="rounded-2xl bg-red-50 p-6 text-center">
+        <div className="app-feedback-danger rounded-2xl p-6 text-center">
           <p className="text-sm text-red-800">{error}</p>
         </div>
       ) : (
-        <section className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100">
+        <section className="app-surface rounded-2xl p-4">
           {/* Header */}
           <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
-            <p className="text-sm font-semibold uppercase tracking-wide text-gray-500">Оборудование</p>
+            <p className="app-text-muted text-sm font-semibold uppercase tracking-wide">Оборудование</p>
             <button
               type="button"
               onClick={() => { void openCreateModal(); }}
-              className="inline-flex items-center gap-1 rounded-lg bg-sky-500 px-3 py-2 text-sm font-medium text-white hover:bg-sky-600"
+              className="app-action-primary inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium"
             >
               <Plus size={14} /> Добавить оборудование
             </button>
@@ -186,14 +186,14 @@ export default function EquipmentPage() {
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder="Поиск по оборудованию"
-                className="w-full rounded-lg border border-gray-200 bg-gray-50 py-2.5 pl-9 pr-3 text-sm text-gray-800 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm"
               />
             </div>
             <button
               type="button"
               title="Фильтры"
               onClick={() => setFiltersOpen((v) => !v)}
-              className={`relative inline-flex items-center justify-center rounded-lg border p-2.5 transition ${filtersOpen ? "border-sky-400 bg-sky-50 text-sky-600" : "border-gray-200 bg-gray-50 text-gray-500 hover:bg-gray-100"}`}
+              className={`relative inline-flex items-center justify-center rounded-lg p-2.5 transition ${filtersOpen ? "app-selected app-accent-text" : "app-surface-muted app-text-muted hover:bg-[var(--surface-tertiary)]"}`}
             >
               <Filter size={16} />
               {activeFilterCount > 0 && (
@@ -207,7 +207,7 @@ export default function EquipmentPage() {
               <select
                 value={ordering}
                 onChange={(e) => setOrdering(e.target.value)}
-                className="w-full appearance-none rounded-lg border border-gray-200 bg-gray-50 py-2.5 pl-9 pr-8 text-xs font-medium text-gray-700 transition hover:bg-gray-100 focus:border-sky-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                className="app-select w-full appearance-none rounded-lg py-2.5 pl-9 pr-8 text-xs font-medium"
                 aria-label="Сортировка списка оборудования"
               >
                 {orderingOptions.map((option) => (
@@ -226,8 +226,8 @@ export default function EquipmentPage() {
                 onClick={() => setListMode(mode.value)}
                 className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition ${
                   listMode === mode.value
-                    ? "bg-sky-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "app-pill-active"
+                    : "app-pill"
                 }`}
               >
                 <span>{mode.label}</span>
@@ -237,27 +237,27 @@ export default function EquipmentPage() {
 
           {/* Filters panel */}
           {filtersOpen && (
-            <div className="mb-3 flex flex-col gap-2 rounded-xl border border-gray-200 bg-gray-50 p-3">
+            <div className="app-surface-muted mb-3 flex flex-col gap-2 rounded-xl p-3">
               <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
-                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+                <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                   <option value="">Все статусы</option>
                   {Object.entries(statusMeta).map(([key, meta]) => (
                     <option key={key} value={key}>{meta.label}</option>
                   ))}
                 </select>
-                <select value={categoryFilter} onChange={(e) => setCategoryFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+                <select value={categoryFilter} onChange={(e) => setCategoryFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                   <option value="">Все категории</option>
                   {categories.map((cat) => (
                     <option key={cat.id} value={cat.id}>{cat.name}</option>
                   ))}
                 </select>
-                <select value={departmentFilter} onChange={(e) => setDepartmentFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+                <select value={departmentFilter} onChange={(e) => setDepartmentFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                   <option value="">Все отделы</option>
                   {departments.map((dep) => (
                     <option key={dep.id} value={dep.id}>{dep.name}</option>
                   ))}
                 </select>
-                <select value={responsibleFilter} onChange={(e) => setResponsibleFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+                <select value={responsibleFilter} onChange={(e) => setResponsibleFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                   <option value="">Все сотрудники</option>
                   {employees.map((emp) => (
                     <option key={emp.id} value={emp.id}>{displayUserName(emp)}</option>
@@ -265,13 +265,13 @@ export default function EquipmentPage() {
                 </select>
               </div>
               <div className="flex items-center gap-2">
-                <span className="shrink-0 text-xs text-gray-500">Дата покупки:</span>
-                <input type="date" value={dateFromFilter} onChange={(e) => setDateFromFilter(e.target.value)} className="flex-1 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800" placeholder="С" />
-                <span className="text-xs text-gray-400">—</span>
-                <input type="date" value={dateToFilter} onChange={(e) => setDateToFilter(e.target.value)} className="flex-1 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800" placeholder="По" />
+                <span className="app-text-muted shrink-0 text-xs">Дата покупки:</span>
+                <input type="date" value={dateFromFilter} onChange={(e) => setDateFromFilter(e.target.value)} className="app-input flex-1 rounded-lg px-3 py-2 text-sm" placeholder="С" />
+                <span className="app-text-muted text-xs">—</span>
+                <input type="date" value={dateToFilter} onChange={(e) => setDateToFilter(e.target.value)} className="app-input flex-1 rounded-lg px-3 py-2 text-sm" placeholder="По" />
               </div>
               {activeFilterCount > 0 && (
-                <button type="button" onClick={() => { setStatusFilter(""); setCategoryFilter(""); setDepartmentFilter(""); setResponsibleFilter(""); setDateFromFilter(""); setDateToFilter(""); }} className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-600 transition hover:bg-gray-100">
+                <button type="button" onClick={() => { setStatusFilter(""); setCategoryFilter(""); setDepartmentFilter(""); setResponsibleFilter(""); setDateFromFilter(""); setDateToFilter(""); }} className="app-action-secondary rounded-lg px-3 py-2 text-sm font-medium transition">
                   Очистить фильтры
                 </button>
               )}
@@ -528,8 +528,8 @@ export default function EquipmentPage() {
       {/* ===== Modal create/edit ===== */}
       <Modal isOpen={isModalOpen} onClose={closeModal} title={modalMode === "create" ? "Добавить оборудование" : "Редактировать оборудование"} size="md" footer={
             <div className="flex flex-wrap items-center justify-end gap-2">
-              <button type="button" onClick={closeModal} className="rounded-lg bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300">Отмена</button>
-              <button type="button" onClick={() => handleSave(modalMode)} disabled={busyKey !== null} className="rounded-lg bg-sky-500 px-3 py-2 text-sm font-medium text-white hover:bg-sky-600 disabled:opacity-60">
+              <button type="button" onClick={closeModal} className="app-action-secondary rounded-lg px-3 py-2 text-sm font-medium">Отмена</button>
+              <button type="button" onClick={() => handleSave(modalMode)} disabled={busyKey !== null} className="app-action-primary rounded-lg px-3 py-2 text-sm font-medium disabled:opacity-60">
                 {modalMode === "create" ? "Добавить" : "Сохранить"}
               </button>
             </div>
@@ -539,12 +539,12 @@ export default function EquipmentPage() {
             <div className="flex flex-col gap-3">
               {/* Название */}
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Название оборудования *</label>
+                <label className="app-text-muted mb-1 block text-xs font-medium">Название оборудования *</label>
                 <input
                   value={form.name}
                   onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
                   placeholder="Ноутбук Lenovo ThinkPad X1..."
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
 
@@ -558,8 +558,8 @@ export default function EquipmentPage() {
               />
 
               {isCreateMode && previewInventoryNumber && (
-                <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-600">
-                  Следующий инвентарный номер: <span className="font-semibold text-gray-900">{previewInventoryNumber}</span>
+                <div className="app-surface-muted rounded-lg px-3 py-2 text-sm text-[var(--muted-foreground)]">
+                  Следующий инвентарный номер: <span className="font-semibold text-[var(--foreground)]">{previewInventoryNumber}</span>
                 </div>
               )}
 
@@ -585,14 +585,14 @@ export default function EquipmentPage() {
 
               {modalMode === "create" && (
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Количество</label>
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Количество</label>
                   <input
                     type="number"
                     min={1}
                     max={100}
                     value={form.quantity}
                     onChange={(e) => setForm((p) => ({ ...p, quantity: Math.max(1, Math.min(100, Number(e.target.value) || 1)) }))}
-                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                    className="app-input w-full rounded-lg px-3 py-2 text-sm"
                   />
                 </div>
               )}
@@ -600,58 +600,58 @@ export default function EquipmentPage() {
               {/* Дата покупки + стоимость */}
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Дата покупки *</label>
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Дата покупки *</label>
                   <input
                     type="date"
                     value={form.purchase_date}
                     onChange={(e) => setForm((p) => ({ ...p, purchase_date: e.target.value }))}
-                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                    className="app-input w-full rounded-lg px-3 py-2 text-sm"
                   />
                 </div>
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Стоимость (₽) *</label>
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Стоимость (₽) *</label>
                   <input
                     type="number"
                     step="0.01"
                     value={form.purchase_cost}
                     onChange={(e) => setForm((p) => ({ ...p, purchase_cost: e.target.value }))}
                     placeholder="0.00"
-                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                    className="app-input w-full rounded-lg px-3 py-2 text-sm"
                   />
                 </div>
               </div>
 
               {/* Серийный номер */}
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Серийный номер</label>
+                <label className="app-text-muted mb-1 block text-xs font-medium">Серийный номер</label>
                 <input
                   value={form.serial_number}
                   onChange={(e) => setForm((p) => ({ ...p, serial_number: e.target.value }))}
                   placeholder="SN-XXXXX"
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
 
               {/* Расположение */}
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Расположение</label>
+                <label className="app-text-muted mb-1 block text-xs font-medium">Расположение</label>
                 <input
                   value={form.location}
                   onChange={(e) => setForm((p) => ({ ...p, location: e.target.value }))}
                   placeholder="Офис 305, стол 2..."
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
 
               {/* Заметки */}
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Заметки</label>
+                <label className="app-text-muted mb-1 block text-xs font-medium">Заметки</label>
                 <textarea
                   value={form.notes}
                   onChange={(e) => setForm((p) => ({ ...p, notes: e.target.value }))}
                   placeholder="Заметки об оборудовании..."
                   rows={3}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
             </div>
@@ -663,10 +663,10 @@ export default function EquipmentPage() {
             "Добавить обслуживание"
       } size="md" footer={
             <div className="flex items-center justify-end gap-2">
-              <button type="button" onClick={closeOperationModal} className="rounded-lg bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300">Отмена</button>
-              {operationModal === "transfer" && <button type="button" onClick={() => { void handleTransfer(); }} disabled={busyKey !== null} className="rounded-lg bg-sky-500 px-3 py-2 text-sm font-medium text-white hover:bg-sky-600 disabled:opacity-60">Перевести</button>}
+              <button type="button" onClick={closeOperationModal} className="app-action-secondary rounded-lg px-3 py-2 text-sm font-medium">Отмена</button>
+              {operationModal === "transfer" && <button type="button" onClick={() => { void handleTransfer(); }} disabled={busyKey !== null} className="app-action-primary rounded-lg px-3 py-2 text-sm font-medium disabled:opacity-60">Перевести</button>}
               {operationModal === "writeoff" && <button type="button" onClick={() => { void handleWriteOff(); }} disabled={busyKey !== null} className="rounded-lg bg-rose-600 px-3 py-2 text-sm font-medium text-white hover:bg-rose-700 disabled:opacity-60">Списать</button>}
-              {operationModal === "maintenance" && <button type="button" onClick={() => { void handleMaintenance(); }} disabled={busyKey !== null} className="rounded-lg bg-sky-500 px-3 py-2 text-sm font-medium text-white hover:bg-sky-600 disabled:opacity-60">Добавить</button>}
+              {operationModal === "maintenance" && <button type="button" onClick={() => { void handleMaintenance(); }} disabled={busyKey !== null} className="app-action-primary rounded-lg px-3 py-2 text-sm font-medium disabled:opacity-60">Добавить</button>}
             </div>
       }>
             {operationModal === "transfer" && (
@@ -686,24 +686,24 @@ export default function EquipmentPage() {
                   onSelect={(id) => setTransferForm((prev) => ({ ...prev, to_person: id }))}
                 />
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Причина</label>
-                  <textarea value={transferForm.reason} onChange={(e) => setTransferForm((prev) => ({ ...prev, reason: e.target.value }))} rows={3} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100" />
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Причина</label>
+                  <textarea value={transferForm.reason} onChange={(e) => setTransferForm((prev) => ({ ...prev, reason: e.target.value }))} rows={3} className="app-input w-full rounded-lg px-3 py-2 text-sm" />
                 </div>
               </div>
             )}
 
             {operationModal === "writeoff" && (
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Причина списания</label>
-                <textarea value={writeOffReason} onChange={(e) => setWriteOffReason(e.target.value)} rows={4} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100" />
+                <label className="app-text-muted mb-1 block text-xs font-medium">Причина списания</label>
+                <textarea value={writeOffReason} onChange={(e) => setWriteOffReason(e.target.value)} rows={4} className="app-input w-full rounded-lg px-3 py-2 text-sm" />
               </div>
             )}
 
             {operationModal === "maintenance" && (
               <div className="space-y-3">
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Тип обслуживания</label>
-                  <select value={maintenanceForm.type} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, type: e.target.value }))} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-800 focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100">
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Тип обслуживания</label>
+                  <select value={maintenanceForm.type} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, type: e.target.value }))} className="app-select w-full rounded-lg px-3 py-2 text-sm">
                     <option value="repair">Ремонт</option>
                     <option value="maintenance">Обслуживание</option>
                     <option value="inspection">Осмотр</option>
@@ -712,17 +712,17 @@ export default function EquipmentPage() {
                 </div>
                 <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <label className="mb-1 block text-xs font-medium text-gray-500">Дата</label>
-                    <input type="date" value={maintenanceForm.date} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, date: e.target.value }))} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100" />
+                    <label className="app-text-muted mb-1 block text-xs font-medium">Дата</label>
+                    <input type="date" value={maintenanceForm.date} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, date: e.target.value }))} className="app-input w-full rounded-lg px-3 py-2 text-sm" />
                   </div>
                   <div>
-                    <label className="mb-1 block text-xs font-medium text-gray-500">Стоимость</label>
-                    <input type="number" step="0.01" value={maintenanceForm.cost} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, cost: e.target.value }))} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100" />
+                    <label className="app-text-muted mb-1 block text-xs font-medium">Стоимость</label>
+                    <input type="number" step="0.01" value={maintenanceForm.cost} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, cost: e.target.value }))} className="app-input w-full rounded-lg px-3 py-2 text-sm" />
                   </div>
                 </div>
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Описание</label>
-                  <textarea value={maintenanceForm.description} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, description: e.target.value }))} rows={4} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100" />
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Описание</label>
+                  <textarea value={maintenanceForm.description} onChange={(e) => setMaintenanceForm((prev) => ({ ...prev, description: e.target.value }))} rows={4} className="app-input w-full rounded-lg px-3 py-2 text-sm" />
                 </div>
               </div>
             )}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 60333106..fd81b8a0 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -124,6 +124,11 @@ textarea {
   border: 1px solid var(--border-strong);
   color: var(--foreground);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
 }
 
 .app-field-label {
@@ -169,6 +174,11 @@ textarea {
   background: var(--surface-secondary);
   cursor: pointer;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
 }
 
 .app-color-input::-webkit-color-swatch-wrapper {
@@ -184,6 +194,13 @@ textarea {
   color: var(--muted-foreground);
 }
 
+.app-input:hover,
+.app-select:hover,
+.app-color-input:hover {
+  background: var(--surface-tertiary);
+  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-strong));
+}
+
 .app-input:focus,
 .app-select:focus {
   background: var(--surface-elevated);
@@ -192,6 +209,12 @@ textarea {
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
 }
 
+.app-color-input:focus {
+  border-color: var(--accent-primary);
+  outline: none;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
+}
+
 .app-input[type="date"],
 .app-input[type="datetime-local"],
 .app-input[type="time"] {
diff --git a/frontend/src/app/messages/page.tsx b/frontend/src/app/messages/page.tsx
index 3cb51c5b..3a1f9efd 100644
--- a/frontend/src/app/messages/page.tsx
+++ b/frontend/src/app/messages/page.tsx
@@ -610,7 +610,7 @@ export default function MessagesPage() {
                   value={newChatName}
                   onChange={(e) => setNewChatName(e.target.value)}
                   placeholder="Введите название чата..."
-                  className="app-input w-full rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
               <div>
@@ -622,7 +622,7 @@ export default function MessagesPage() {
                   onChange={(e) => setNewChatDescription(e.target.value)}
                   placeholder="Краткое описание чата..."
                   rows={3}
-                  className="app-input w-full rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
 
diff --git a/frontend/src/app/notifications/page.tsx b/frontend/src/app/notifications/page.tsx
index 67ef2287..665a3d76 100644
--- a/frontend/src/app/notifications/page.tsx
+++ b/frontend/src/app/notifications/page.tsx
@@ -2,12 +2,11 @@
 
 import { AppShell } from '@/components/AppShell';
 import { apiClient } from '@/lib/api';
-import { Bell, Check, CheckCheck, Filter, Search, Trash2, Settings } from 'lucide-react';
+import { Bell, CheckCheck, Filter, Search, Trash2 } from 'lucide-react';
 import { useState, useMemo, useEffect } from 'react';
 import { formatDistanceToNow } from 'date-fns';
 import { ru } from 'date-fns/locale/ru';
 import { getVerbCategory, getVerbName } from '@/lib/verbTranslations';
-import Link from 'next/link';
 
 export default function NotificationsPage() {
   // Локальное состояние для ВСЕХ уведомлений (не только непрочитанных)
@@ -165,20 +164,15 @@ export default function NotificationsPage() {
 
   return (
     <AppShell>
-      <div className="mx-auto max-w-5xl px-4 py-6">
+      <section className="mx-auto max-w-5xl app-surface rounded-2xl p-4 sm:p-5">
         {/* Заголовок */}
-        <div className="mb-6 flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold text-[var(--foreground)]">Уведомления</h1>
-            <p className="app-text-muted mt-1 text-sm">
-              {unreadCount > 0 ? `${unreadCount} непрочитанных` : 'Все прочитано'}
-            </p>
-          </div>
-          <div className="flex gap-2">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+          <p className="app-text-muted text-sm font-semibold uppercase tracking-wide">Уведомления</p>
+          <div className="flex flex-wrap gap-2">
             {unreadCount > 0 && (
               <button
                 onClick={markAllAsRead}
-                className="app-action-primary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition"
+                className="app-action-primary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
               >
                 <CheckCheck size={16} />
                 Прочитать все
@@ -192,19 +186,12 @@ export default function NotificationsPage() {
                     console.log(`Удалено ${count} прочитанных уведомлений`);
                   }
                 }}
-                className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition"
+                className="app-feedback-danger inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
               >
                 <Trash2 size={16} />
                 Удалить прочитанные
               </button>
             )}
-            <Link
-              href="/notifications/settings"
-              className="app-action-secondary inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition"
-            >
-              <Settings size={16} />
-              Настройки
-            </Link>
           </div>
         </div>
 
@@ -217,7 +204,7 @@ export default function NotificationsPage() {
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder="Поиск по уведомлениям..."
-                className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm focus:bg-[var(--surface-elevated)] focus:outline-none focus:ring-2 focus:ring-sky-100"
+                className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm"
               />
             </div>
             <button
@@ -279,6 +266,30 @@ export default function NotificationsPage() {
           )}
         </div>
 
+        <div className="mb-4 flex flex-wrap gap-2">
+          {[
+            { key: 'all', label: 'Все', count: notifications.length },
+            { key: 'unread', label: 'Непрочитанные', count: unreadCount },
+            { key: 'read', label: 'Прочитанные', count: readCount },
+          ].map((item) => (
+            <button
+              key={item.key}
+              type="button"
+              onClick={() => setFilterRead(item.key as 'all' | 'unread' | 'read')}
+              className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition ${
+                filterRead === item.key ? 'app-pill-active' : 'app-pill'
+              }`}
+            >
+              <span>{item.label}</span>
+              <span className={`app-badge px-1.5 py-0.5 text-[10px] font-bold ${
+                filterRead === item.key ? 'app-pill-count-active' : 'app-pill-count'
+              }`}>
+                {item.count}
+              </span>
+            </button>
+          ))}
+        </div>
+
         {/* Бейджи категорий с счетчиками */}
         {categoryCounts.length > 0 && (
           <div className="mb-4 flex flex-wrap gap-2">
@@ -356,17 +367,17 @@ export default function NotificationsPage() {
             {filteredNotifications.map((notification: any) => (
               <article
                 key={notification.id}
-                className={`group rounded-xl border transition ${
+                className={`group overflow-hidden rounded-xl border transition ${
                   notification.is_read
-                    ? 'app-surface'
-                    : 'app-selected'
+                    ? 'app-surface hover:border-[var(--border-strong)]'
+                    : 'app-unread-surface border-[color:color-mix(in_srgb,var(--accent-primary)_20%,var(--border-subtle))] hover:border-[color:var(--accent-primary)]'
                 }`}
               >
                 <div className="flex gap-4 p-4">
                   {/* Иконка */}
                   <div
                     className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xl ${
-                      notification.is_read ? 'bg-[var(--surface-secondary)]' : 'bg-[var(--accent-soft)]'
+                      notification.is_read ? 'bg-[var(--surface-secondary)]' : 'bg-[color:color-mix(in_srgb,var(--accent-primary)_14%,var(--surface-primary))]'
                     }`}
                     style={
                       notification.color
@@ -435,7 +446,7 @@ export default function NotificationsPage() {
             ))}
           </div>
         )}
-      </div>
+      </section>
     </AppShell>
   );
 }
diff --git a/frontend/src/app/procurement/page.tsx b/frontend/src/app/procurement/page.tsx
index 090d23b2..afc58fe9 100644
--- a/frontend/src/app/procurement/page.tsx
+++ b/frontend/src/app/procurement/page.tsx
@@ -149,6 +149,7 @@ export default function ProcurementPage() {
     urgencyFilter,
     userLink,
     scope,
+    scopeCounts,
   } = useProcurementPage(user);
 
   /* ══════════════════════════════════════════════════════
@@ -158,34 +159,34 @@ export default function ProcurementPage() {
   return (
     <AppShell>
       {loading ? (
-        <div className="rounded-2xl bg-white p-8 text-center shadow-sm ring-1 ring-gray-100">
+        <div className="app-surface rounded-2xl p-8 text-center">
           <Loader2 size={28} className="mx-auto mb-3 animate-spin text-sky-500" />
-          <p className="text-sm text-gray-500">Загрузка заявок на закупку...</p>
+          <p className="app-text-muted text-sm">Загрузка заявок на закупку...</p>
         </div>
       ) : error ? (
-        <div className="rounded-2xl bg-red-50 p-6 text-center">
+        <div className="app-feedback-danger rounded-2xl p-6 text-center">
           <p className="text-sm text-red-800">{error}</p>
         </div>
       ) : (
-        <section className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100">
+        <section className="app-surface rounded-2xl p-4">
           {/* ── header ── */}
           <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
             <div>
-              <p className="text-sm font-semibold uppercase tracking-wide text-gray-500">Закупки</p>
-              <div className="mt-2 flex flex-wrap gap-2">
-                <button type="button" onClick={() => setActiveSection("requests")} className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${activeSection === "requests" ? "bg-sky-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`}>
+              <p className="app-text-muted text-sm font-semibold uppercase tracking-wide">Закупки</p>
+              {/* <div className="mt-2 flex flex-wrap gap-2">
+                <button type="button" onClick={() => setActiveSection("requests")} className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${activeSection === "requests" ? "app-pill-active" : "app-pill"}`}>
                   Заявки
                 </button>
-                <button type="button" onClick={() => setActiveSection("stats")} className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${activeSection === "stats" ? "bg-sky-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`}>
+                <button type="button" onClick={() => setActiveSection("stats")} className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${activeSection === "stats" ? "app-pill-active" : "app-pill"}`}>
                   Статистика
                 </button>
-                <button type="button" onClick={() => setActiveSection("suppliers")} className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${activeSection === "suppliers" ? "bg-sky-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`}>
+                <button type="button" onClick={() => setActiveSection("suppliers")} className={`rounded-full px-3 py-1.5 text-xs font-medium transition ${activeSection === "suppliers" ? "app-pill-active" : "app-pill"}`}>
                   Поставщики
                 </button>
-              </div>
+              </div> */}
             </div>
             {activeSection === "requests" && (
-              <button type="button" onClick={openCreate} className="inline-flex items-center gap-1 rounded-lg bg-sky-500 px-3 py-2 text-sm font-medium text-white transition hover:bg-sky-600">
+              <button type="button" onClick={openCreate} className="app-action-primary inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm font-medium transition">
                 <Plus size={14} /> Создать заявку
               </button>
             )}
@@ -212,14 +213,14 @@ export default function ProcurementPage() {
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onKeyDown={(e) => { if (e.key === "Enter") loadPage1(); }}
                 placeholder="Поиск по заявкам..."
-                className="w-full rounded-lg border border-gray-200 bg-gray-50 py-2.5 pl-9 pr-3 text-sm text-gray-800 transition focus:border-sky-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm"
               />
             </div>
             <button
               type="button"
               title="Фильтры"
               onClick={() => setFiltersOpen((v) => !v)}
-              className={`relative inline-flex items-center justify-center rounded-lg border p-2.5 transition ${filtersOpen ? "border-sky-400 bg-sky-50 text-sky-600" : "border-gray-200 bg-gray-50 text-gray-500 hover:bg-gray-100"}`}
+              className={`relative inline-flex items-center justify-center rounded-lg p-2.5 transition ${filtersOpen ? "app-selected app-accent-text" : "app-surface-muted app-text-muted hover:bg-[var(--surface-tertiary)]"}`}
             >
               <Filter size={16} />
               {activeFilterCount > 0 && (
@@ -231,7 +232,7 @@ export default function ProcurementPage() {
               <select
                 value={ordering}
                 onChange={(e) => setOrdering(e.target.value)}
-                className="w-full appearance-none rounded-lg border border-gray-200 bg-gray-50 py-2.5 pl-9 pr-8 text-xs font-medium text-gray-700 transition hover:bg-gray-100 focus:border-sky-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-sky-100"
+                className="app-select w-full appearance-none rounded-lg py-2.5 pl-9 pr-8 text-xs font-medium"
                 aria-label="Сортировка списка закупок"
               >
                 {orderingOptions.map((option) => (
@@ -251,35 +252,40 @@ export default function ProcurementPage() {
                 onClick={() => setScope(tab.value)}
                 className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition ${
                   scope === tab.value
-                    ? "bg-sky-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    ? "app-pill-active"
+                    : "app-pill"
                 }`}
               >
-                {tab.label}
+                <span>{tab.label}</span>
+                <span className={`app-badge px-1.5 py-0.5 text-[10px] font-bold ${
+                  scope === tab.value ? "app-pill-count-active" : "app-pill-count"
+                }`}>
+                  {scopeCounts[tab.value] ?? 0}
+                </span>
               </button>
             ))}
           </div>
 
           {/* ── filters panel ── */}
           {filtersOpen && (
-            <div className="mb-3 flex flex-col gap-2 rounded-xl border border-gray-200 bg-gray-50 p-3">
-              <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+            <div className="app-surface-muted mb-3 flex flex-col gap-2 rounded-xl p-3">
+              <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                 <option value="">Все статусы</option>
                 {Object.entries(statusMeta).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
               </select>
-              <select value={urgencyFilter} onChange={(e) => setUrgencyFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+              <select value={urgencyFilter} onChange={(e) => setUrgencyFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                 <option value="">Все уровни срочности</option>
                 {Object.entries(urgencyMeta).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
               </select>
-              <select value={departmentFilter} onChange={(e) => setDepartmentFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+              <select value={departmentFilter} onChange={(e) => setDepartmentFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                 <option value="">Все отделы</option>
                 {departments.map((d) => <option key={d.id} value={d.id}>{d.name}</option>)}
               </select>
-              <select value={periodFilter} onChange={(e) => setPeriodFilter(e.target.value)} className="rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800">
+              <select value={periodFilter} onChange={(e) => setPeriodFilter(e.target.value)} className="app-select rounded-lg px-3 py-2 text-sm">
                 {periodOptions.map((option) => <option key={option.value || "all"} value={option.value}>{option.label}</option>)}
               </select>
               {activeFilterCount > 0 && (
-                <button type="button" onClick={() => { setStatusFilter(""); setUrgencyFilter(""); setDepartmentFilter(""); setPeriodFilter(""); }} className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition">
+                <button type="button" onClick={() => { setStatusFilter(""); setUrgencyFilter(""); setDepartmentFilter(""); setPeriodFilter(""); }} className="app-action-secondary rounded-lg px-3 py-2 text-sm font-medium transition">
                   Очистить фильтры
                 </button>
               )}
@@ -526,8 +532,8 @@ export default function ProcurementPage() {
       {/* ══════════ Create / Edit modal ══════════ */}
       <Modal isOpen={isModalOpen} onClose={closeModal} title={modalMode === "create" ? "Новая заявка на закупку" : "Редактировать заявку"} size="lg" footer={
             <div className="flex flex-wrap items-center justify-end gap-2">
-              <button type="button" onClick={closeModal} className="rounded-lg bg-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-300">Отмена</button>
-              <button type="button" onClick={handleSave} disabled={busyKey === "save"} className="rounded-lg bg-sky-500 px-3 py-2 text-sm font-medium text-white hover:bg-sky-600 disabled:opacity-60">
+              <button type="button" onClick={closeModal} className="app-action-secondary rounded-lg px-3 py-2 text-sm font-medium">Отмена</button>
+              <button type="button" onClick={handleSave} disabled={busyKey === "save"} className="app-action-primary rounded-lg px-3 py-2 text-sm font-medium disabled:opacity-60">
                 {modalMode === "create" ? "Создать черновик" : "Сохранить"}
               </button>
             </div>
@@ -538,24 +544,24 @@ export default function ProcurementPage() {
             <div className="flex flex-col gap-3">
               {/* Название */}
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Название заявки *</label>
+                <label className="app-text-muted mb-1 block text-xs font-medium">Название заявки *</label>
                 <input
                   value={form.title}
                   onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
                   placeholder="Закупка офисной техники..."
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
 
               {/* Описание */}
               <div>
-                <label className="mb-1 block text-xs font-medium text-gray-500">Описание и обоснование *</label>
+                <label className="app-text-muted mb-1 block text-xs font-medium">Описание и обоснование *</label>
                 <textarea
                   value={form.description}
                   onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
                   placeholder="Обоснуйте необходимость закупки..."
                   rows={3}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                  className="app-input w-full rounded-lg px-3 py-2 text-sm"
                 />
               </div>
 
@@ -569,11 +575,11 @@ export default function ProcurementPage() {
                   onSelect={(id) => setForm((f) => ({ ...f, department: id }))}
                 />
                 <div>
-                  <label className="mb-1 block text-xs font-medium text-gray-500">Срочность</label>
+                  <label className="app-text-muted mb-1 block text-xs font-medium">Срочность</label>
                   <select
                     value={form.urgency}
                     onChange={(e) => setForm((f) => ({ ...f, urgency: e.target.value as UrgencyLevel }))}
-                    className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-100"
+                    className="app-select w-full rounded-lg px-3 py-2 text-sm"
                   >
                     <option value="low">Низкая</option>
                     <option value="medium">Средняя</option>
@@ -586,8 +592,8 @@ export default function ProcurementPage() {
               {/* ── Items ── */}
               <div>
                 <div className="mb-2 flex items-center justify-between">
-                  <label className="text-xs font-medium text-gray-500">Позиции *</label>
-                  <button type="button" onClick={addItemRow} className="inline-flex items-center gap-1 text-xs font-medium text-sky-600 hover:text-sky-700">
+                  <label className="app-text-muted text-xs font-medium">Позиции *</label>
+                  <button type="button" onClick={addItemRow} className="app-link-accent inline-flex items-center gap-1 text-xs font-medium">
                     <Plus size={13} /> Добавить
                   </button>
                 </div>
@@ -605,13 +611,13 @@ export default function ProcurementPage() {
                           value={it.name}
                           onChange={(e) => updateItemRow(idx, { name: e.target.value })}
                           placeholder="Название позиции *"
-                          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none"
+                          className="app-input w-full rounded-lg px-3 py-2 text-sm"
                         />
                         <input
                           value={it.description}
                           onChange={(e) => updateItemRow(idx, { description: e.target.value })}
                           placeholder="Описание (необязательно)"
-                          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none"
+                          className="app-input w-full rounded-lg px-3 py-2 text-sm"
                         />
                         <div className="grid grid-cols-4 gap-2">
                           <input
@@ -620,13 +626,13 @@ export default function ProcurementPage() {
                             onChange={(e) => updateItemRow(idx, { quantity: e.target.value })}
                             placeholder="Кол-во"
                             min={1}
-                            className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none"
+                            className="app-input rounded-lg px-3 py-2 text-sm"
                           />
                           <input
                             value={it.unit}
                             onChange={(e) => updateItemRow(idx, { unit: e.target.value })}
                             placeholder="Ед."
-                            className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none"
+                            className="app-input rounded-lg px-3 py-2 text-sm"
                           />
                           <input
                             type="number"
@@ -634,7 +640,7 @@ export default function ProcurementPage() {
                             value={it.estimated_unit_price}
                             onChange={(e) => updateItemRow(idx, { estimated_unit_price: e.target.value })}
                             placeholder="Цена/ед."
-                            className="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none"
+                            className="app-input rounded-lg px-3 py-2 text-sm"
                           />
                           <div className="flex items-center text-xs text-gray-500">
                             {it.quantity && it.estimated_unit_price ? money(Number(it.quantity) * Number(it.estimated_unit_price)) : "—"}
@@ -644,7 +650,7 @@ export default function ProcurementPage() {
                           value={it.supplier_info}
                           onChange={(e) => updateItemRow(idx, { supplier_info: e.target.value })}
                           placeholder="Информация о поставщике (необязательно)"
-                          className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:border-sky-400 focus:outline-none"
+                          className="app-input w-full rounded-lg px-3 py-2 text-sm"
                         />
                       </div>
                     </div>
diff --git a/frontend/src/app/requests/page.tsx b/frontend/src/app/requests/page.tsx
index bf035724..f509b606 100644
--- a/frontend/src/app/requests/page.tsx
+++ b/frontend/src/app/requests/page.tsx
@@ -181,7 +181,7 @@ function RequestsPageContent() {
           <div className="mb-4 flex items-center gap-2">
             <div className="relative flex-1">
               <Search size={16} className="app-text-muted pointer-events-none absolute left-3 top-1/2 -translate-y-1/2" />
-              <input value={h.search} onChange={(e) => h.setSearch(e.target.value)} placeholder="Поиск по заявлениям" className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm transition focus:bg-[var(--surface-elevated)]" />
+              <input value={h.search} onChange={(e) => h.setSearch(e.target.value)} placeholder="Поиск по заявлениям" className="app-input w-full rounded-lg py-2.5 pl-9 pr-3 text-sm" />
             </div>
             <button type="button" title="Фильтры" onClick={() => h.setFiltersOpen((v) => !v)} className={`relative inline-flex items-center justify-center rounded-lg p-2.5 transition ${h.filtersOpen ? "app-selected app-accent-text" : "app-surface-muted app-text-muted hover:bg-[var(--surface-tertiary)]"}`}>
               <Filter size={16} />
@@ -191,7 +191,7 @@ function RequestsPageContent() {
             </button>
             <div className="relative w-[148px] shrink-0">
               <ArrowUpDown size={15} className="app-text-muted pointer-events-none absolute left-3 top-1/2 -translate-y-1/2" />
-              <select value={h.ordering} onChange={(e) => h.setOrdering(e.target.value)} className="app-select w-full appearance-none rounded-lg py-2.5 pl-9 pr-8 text-xs font-medium transition hover:bg-[var(--surface-tertiary)]" aria-label="Сортировка">
+              <select value={h.ordering} onChange={(e) => h.setOrdering(e.target.value)} className="app-select w-full appearance-none rounded-lg py-2.5 pl-9 pr-8 text-xs font-medium" aria-label="Сортировка">
                 {orderingOptions.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
               </select>
               <ChevronDown size={14} className="app-text-muted pointer-events-none absolute right-3 top-1/2 -translate-y-1/2" />
diff --git a/frontend/src/components/BigCalendar.tsx b/frontend/src/components/BigCalendar.tsx
index 37e0c3ec..7254ab22 100644
--- a/frontend/src/components/BigCalendar.tsx
+++ b/frontend/src/components/BigCalendar.tsx
@@ -12,6 +12,7 @@ import { CalendarModal } from "@/components/CalendarModal";
 import { EventModal } from "@/components/EventModal";
 import { ViewDayEventsModal } from "@/components/ViewDayEventsModal";
 import { ViewEventDetailsModal } from "@/components/ViewEventDetailsModal";
+import { DEFAULT_EVENT_COLOR, resolveEventColor } from "@/lib/calendar-event-colors";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import "../app/calendar/calendar.css";
 
@@ -213,7 +214,7 @@ export function BigCalendar() {
           end: new Date(occ.end),
           allDay: false, // Явно указываем что событие с временем
           calendar: occ.calendar, // Используем calendar из occurrence (важно для "Все события")
-          color_event: occ.color_event || '#3498db',
+          color_event: resolveEventColor(occ.color_event),
           event_id: occ.event_id,
           rule: occ.rule,
           isOccurrence: true, // Помечаем как occurrence для корректного отображения
@@ -290,7 +291,7 @@ export function BigCalendar() {
       start: startDate,
       end: endDate,
       calendar: selectedCalendarId,
-      color_event: "#3498db",
+      color_event: DEFAULT_EVENT_COLOR,
     });
 
     // Закрываем модал просмотра дня и открываем модал создания
@@ -353,7 +354,7 @@ export function BigCalendar() {
 
   // Стилизация событий по цвету
   const eventStyleGetter = (event: CalendarEvent) => {
-    const backgroundColor = event.color_event || "#3498db";
+    const backgroundColor = resolveEventColor(event.color_event);
     return {
       style: {
         backgroundColor,
diff --git a/frontend/src/components/CalendarParticipantsModal.tsx b/frontend/src/components/CalendarParticipantsModal.tsx
index 4b11064e..2764c252 100644
--- a/frontend/src/components/CalendarParticipantsModal.tsx
+++ b/frontend/src/components/CalendarParticipantsModal.tsx
@@ -4,6 +4,8 @@ import React, { useState, useEffect } from 'react';
 import { X, UserPlus, Trash2 } from 'lucide-react';
 import api from '@/lib/api';
 import { Modal } from '@/components/ui';
+import { loadAllPages } from '@/lib/shared';
+import { resolveMediaUrl } from '@/lib/url';
 
 interface Participant {
   id: number;
@@ -12,6 +14,8 @@ interface Participant {
     username: string;
     first_name: string;
     last_name: string;
+    email?: string;
+    avatar?: string | null;
   };
   distinction: string;
 }
@@ -22,6 +26,7 @@ interface Employee {
   first_name: string;
   last_name: string;
   email?: string;
+  avatar?: string | null;
   departments?: Array<{
     id: number;
     name: string;
@@ -78,8 +83,8 @@ export default function CalendarParticipantsModal({
 
   const loadEmployees = async () => {
     try {
-      const data = await api.getEmployees({ limit: 200 });
-      setEmployees(data.results || []);
+      const allEmployees = await loadAllPages<Employee>((params) => api.getEmployees(params));
+      setEmployees(allEmployees);
     } catch (error) {
       console.error('Failed to load employees:', error);
     }
@@ -277,12 +282,27 @@ export default function CalendarParticipantsModal({
                         onChange={() => toggleUserSelection(emp.id)}
                         className="h-4 w-4 rounded border-[var(--border-strong)] text-[var(--accent-primary)]"
                       />
-                      <span className="text-sm text-[var(--foreground)]">
-                        {emp.first_name} {emp.last_name}
-                      </span>
-                      {emp.email && (
-                        <span className="app-text-muted text-xs">({emp.email})</span>
+                      {emp.avatar ? (
+                        <img
+                          src={resolveMediaUrl(emp.avatar)}
+                          alt={`${emp.first_name} ${emp.last_name}`.trim() || 'Сотрудник'}
+                          className="app-avatar-frame h-9 w-9 shrink-0 rounded-full object-cover"
+                        />
+                      ) : (
+                        <div className="app-avatar-fallback flex h-9 w-9 shrink-0 items-center justify-center rounded-full">
+                          <span className="text-xs font-medium">
+                            {emp.first_name?.[0] || emp.last_name?.[0] || '?'}
+                          </span>
+                        </div>
                       )}
+                      <div className="min-w-0">
+                        <div className="truncate text-sm text-[var(--foreground)]">
+                          {emp.first_name} {emp.last_name}
+                        </div>
+                        {emp.email && (
+                          <div className="truncate app-text-muted text-xs">{emp.email}</div>
+                        )}
+                      </div>
                     </label>
                   ))}
                 </div>
@@ -339,16 +359,24 @@ export default function CalendarParticipantsModal({
                       className="app-surface-elevated flex items-center justify-between rounded-lg px-4 py-3 transition hover:bg-[var(--surface-secondary)]"
                     >
                       <div className="flex items-center gap-3">
-                        <div className="app-avatar-fallback flex h-10 w-10 items-center justify-center rounded-full">
-                          <span className="text-sm font-medium">
-                            {firstName[0]}{lastName[0]}
-                          </span>
-                        </div>
+                        {user.avatar ? (
+                          <img
+                            src={resolveMediaUrl(user.avatar)}
+                            alt={`${firstName} ${lastName}`.trim() || 'Сотрудник'}
+                            className="app-avatar-frame h-10 w-10 shrink-0 rounded-full object-cover"
+                          />
+                        ) : (
+                          <div className="app-avatar-fallback flex h-10 w-10 items-center justify-center rounded-full">
+                            <span className="text-sm font-medium">
+                              {firstName[0]}{lastName[0]}
+                            </span>
+                          </div>
+                        )}
                         <div>
                           <div className="text-sm font-medium text-[var(--foreground)]">
                             {firstName} {lastName}
                           </div>
-                          <div className="app-text-muted text-xs">@{username}</div>
+                          <div className="app-text-muted text-xs">{user.email || `@${username}`}</div>
                         </div>
                       </div>
 
diff --git a/frontend/src/components/EventModal.tsx b/frontend/src/components/EventModal.tsx
index 6e071100..57734ddc 100644
--- a/frontend/src/components/EventModal.tsx
+++ b/frontend/src/components/EventModal.tsx
@@ -1,9 +1,12 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { X, Trash2 } from "lucide-react";
+import { Check, X, Trash2 } from "lucide-react";
 import { apiClient } from "@/lib/api";
 import { Modal } from "@/components/ui";
+import { EVENT_COLOR_OPTIONS, resolveEventColor } from "@/lib/calendar-event-colors";
+import { loadAllPages } from "@/lib/shared";
+import { resolveMediaUrl } from "@/lib/url";
 
 // Нормализация byweekday в массив чисел
 function normalizeByweekday(byweekday: any): number[] {
@@ -43,6 +46,7 @@ export function EventModal({
   const [loadingEmployees, setLoadingEmployees] = useState(false);
   const [addingParticipants, setAddingParticipants] = useState(false);
   const [pendingParticipantIds, setPendingParticipantIds] = useState<number[]>([]);
+  const customColorInputRef = useRef<HTMLInputElement | null>(null);
 
   // Ref для отслеживания, был ли уже выполнен авто-выбор дня (чтобы не перезаписывать выбор пользователя)
   const autoWeekdaySetRef = useRef(false);
@@ -95,6 +99,7 @@ export function EventModal({
 
       setEditingEvent({
         ...event,
+        color_event: resolveEventColor(event.color_event),
         isRecurring: event.isRecurring ?? false,
         repeatMode,
       });
@@ -106,6 +111,10 @@ export function EventModal({
         setEventParticipants([]);
       }
 
+      if (showParticipants) {
+        loadAvailableEmployees();
+      }
+
       // Загружаем правило для повторяющегося события
       if (event.id && event.rule) {
         loadRule(event.rule);
@@ -219,8 +228,8 @@ export function EventModal({
   const loadAvailableEmployees = async () => {
     setLoadingEmployees(true);
     try {
-      const data = await apiClient.getEmployees({ limit: 200 });
-      setAvailableEmployees(data.results || []);
+      const allEmployees = await loadAllPages<any>((params) => apiClient.getEmployees(params));
+      setAvailableEmployees(allEmployees);
     } catch (error) {
       console.error('Failed to load employees:', error);
     } finally {
@@ -328,7 +337,7 @@ export function EventModal({
           ? editingEvent.end
           : editingEvent.end?.toISOString?.() || new Date(editingEvent.end).toISOString(),
         calendar: editingEvent.calendar,
-        color_event: editingEvent.color_event || '#3498db',
+        color_event: resolveEventColor(editingEvent.color_event),
         rule: ruleId,
       };
 
@@ -385,7 +394,7 @@ export function EventModal({
       <button
         onClick={handleSave}
         disabled={!editingEvent.title?.trim() || saving}
-        className="app-action-primary flex-1"
+        className="app-action-primary flex-1 rounded-xl px-4 py-3 text-sm font-semibold shadow-sm"
       >
         {saving ? 'Сохранение...' : (editingEvent.id ? 'Сохранить' : 'Создать')}
       </button>
@@ -394,7 +403,7 @@ export function EventModal({
         <button
           onClick={handleDelete}
           disabled={saving}
-          className="app-action-danger px-4 py-2.5"
+          className="app-action-danger rounded-xl px-4 py-3"
           title="Удалить событие"
         >
           <Trash2 size={16} />
@@ -403,6 +412,17 @@ export function EventModal({
     </div>
   );
 
+  const activeColor = resolveEventColor(editingEvent?.color_event);
+  const isPresetColor = EVENT_COLOR_OPTIONS.some((option) => option.value === activeColor);
+  const employeeMap = new Map(availableEmployees.map((employee) => [employee.id, employee]));
+  const filteredEmployees = availableEmployees.filter((emp) => {
+    const fullName = `${emp.first_name} ${emp.last_name} ${emp.email || ""}`.toLowerCase();
+    const matchesSearch = fullName.includes(searchQuery.toLowerCase());
+    const notParticipant = !eventParticipants.find((participant) => participant.object_id === emp.id);
+    const notPending = !pendingParticipantIds.includes(emp.id);
+    return matchesSearch && notParticipant && notPending;
+  });
+
   return (
     <Modal
       isOpen={isOpen}
@@ -412,14 +432,14 @@ export function EventModal({
       closeOnEsc={!saving}
       footer={footerContent}
     >
-      <div className="space-y-4">
+      <div className="space-y-5">
           <div>
             <label className="app-field-label">Название</label>
             <input
               type="text"
               value={editingEvent.title || ''}
               onChange={(e) => setEditingEvent({ ...editingEvent, title: e.target.value })}
-              className="app-input w-full"
+              className="app-input w-full rounded-lg px-3 py-2.5 text-sm"
               placeholder="Название события"
               autoFocus
             />
@@ -430,7 +450,7 @@ export function EventModal({
             <textarea
               value={editingEvent.description || ''}
               onChange={(e) => setEditingEvent({ ...editingEvent, description: e.target.value })}
-              className="app-input min-h-28 w-full resize-y"
+              className="app-input min-h-28 w-full rounded-lg px-3 py-2.5 text-sm leading-6 resize-y"
               placeholder="Описание (необязательно)"
               rows={3}
             />
@@ -450,7 +470,7 @@ export function EventModal({
                   ...editingEvent,
                   start: new Date(e.target.value).toISOString()
                 })}
-                className="app-input w-full"
+                className="app-input w-full rounded-lg px-3 py-2.5 text-sm"
               />
             </div>
 
@@ -467,7 +487,7 @@ export function EventModal({
                   ...editingEvent,
                   end: new Date(e.target.value).toISOString()
                 })}
-                className="app-input w-full"
+                className="app-input w-full rounded-lg px-3 py-2.5 text-sm"
               />
             </div>
           </div>
@@ -475,19 +495,55 @@ export function EventModal({
 
           <div>
             <label className="app-field-label">Цвет</label>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              {EVENT_COLOR_OPTIONS.map((option) => {
+                const isActive = activeColor === option.value;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => setEditingEvent({ ...editingEvent, color_event: option.value })}
+                    className={`h-9 w-9 rounded-full border-2 transition ${
+                      isActive
+                        ? "scale-105 border-[color:var(--accent-primary)] shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent-primary)_22%,transparent)]"
+                        : "border-[color:var(--border-primary)] hover:border-[color:var(--accent-primary)]"
+                    }`}
+                    style={{ backgroundColor: option.value }}
+                    title={option.label}
+                    aria-label={option.label}
+                  />
+                );
+              })}
+              <button
+                type="button"
+                onClick={() => customColorInputRef.current?.click()}
+                className={`relative h-9 w-9 rounded-full border-2 transition ${
+                  isPresetColor
+                    ? "border-[color:var(--border-primary)] hover:border-[color:var(--accent-primary)]"
+                    : "scale-105 border-[color:var(--accent-primary)] shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent-primary)_22%,transparent)]"
+                }`}
+                style={{
+                  background:
+                    "conic-gradient(from 180deg, #ef4444, #f59e0b, #22c55e, #1296ea, #8b5cf6, #ef4444)",
+                }}
+                title="Выбрать другой цвет"
+                aria-label="Выбрать другой цвет"
+              >
+                <span className="absolute inset-[7px] rounded-full border border-white/20 bg-[var(--surface-primary)]" />
+              </button>
               <input
+                ref={customColorInputRef}
                 type="color"
-                value={editingEvent.color_event || '#3498db'}
+                value={activeColor}
                 onChange={(e) => setEditingEvent({ ...editingEvent, color_event: e.target.value })}
-                className="app-color-input"
+                className="sr-only"
+                aria-label="Выбор произвольного цвета"
               />
-              <span className="app-text-muted text-xs">{editingEvent.color_event || '#3498db'}</span>
             </div>
           </div>
 
           {/* Повторяющееся событие */}
-          <div>
+          <div className="space-y-3">
             <label className="app-choice-label">
               <input
                 type="checkbox"
@@ -506,13 +562,21 @@ export function EventModal({
                 </label>
 
               {editingEvent.isRecurring && (
-                <div className="app-surface space-y-4 rounded-xl p-4">
+                <div className="app-surface-muted space-y-4 rounded-2xl p-4">
+                  <div className="space-y-1">
+                    <p className="text-sm font-semibold text-[var(--foreground)]">Параметры повторения</p>
+                    <p className="app-text-muted text-xs">
+                      Настрой периодичность и правило завершения серии.
+                    </p>
+                  </div>
+
+                  <div className="app-surface space-y-4 rounded-xl p-4">
                   <div>
                     <label className="app-field-label">Частота повторения</label>
                     <select
                       value={editingEvent.frequency || 'WEEKLY'}
                       onChange={(e) => setEditingEvent({ ...editingEvent, frequency: e.target.value })}
-                      className="app-select w-full"
+                      className="app-select w-full rounded-lg px-3 py-2.5 text-sm"
                     >
                       <option value="DAILY">Ежедневно</option>
                       <option value="WEEKLY">Еженедельно</option>
@@ -531,7 +595,7 @@ export function EventModal({
                         max="365"
                         value={editingEvent.interval || 1}
                         onChange={(e) => setEditingEvent({ ...editingEvent, interval: parseInt(e.target.value) })}
-                        className="app-input w-20"
+                        className="app-input w-24 rounded-lg px-3 py-2.5 text-center text-sm"
                       />
                       <span className="app-text-muted text-sm">
                         {editingEvent.frequency === 'DAILY' && 'дней'}
@@ -568,7 +632,7 @@ export function EventModal({
                                   : [...current, day.value].sort();
                                 setEditingEvent({ ...editingEvent, byweekday: updated });
                               }}
-                              className={`px-2 py-1.5 text-xs ${
+                              className={`rounded-lg px-2 py-1.5 text-xs font-medium transition ${
                                 isSelected
                                   ? 'app-pill-active'
                                   : 'app-pill'
@@ -625,7 +689,7 @@ export function EventModal({
                         max="999"
                         value={editingEvent.count || 10}
                         onChange={(e) => setEditingEvent({ ...editingEvent, count: parseInt(e.target.value) })}
-                        className="app-input w-full"
+                        className="app-input w-full rounded-lg px-3 py-2.5 text-sm"
                         placeholder="Количество повторений"
                       />
                     ) : (
@@ -634,6 +698,7 @@ export function EventModal({
                       </p>
                     )}
                   </div>
+                  </div>
                 </div>
               )}
           </div>
@@ -642,7 +707,7 @@ export function EventModal({
           {showParticipants && (
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <label className="text-sm font-medium text-[var(--foreground)]">
+                <label className="app-field-label mb-0">
                   Участники события
                   {!eventParticipantsLoading && eventParticipants.length > 0 && (
                     <span className="app-text-muted ml-1">({eventParticipants.length})</span>
@@ -656,7 +721,7 @@ export function EventModal({
                       loadAvailableEmployees();
                     }
                   }}
-                  className="app-link-accent text-xs font-medium"
+                  className="app-action-secondary rounded-lg px-3 py-2 text-xs font-medium"
                 >
                   {showAddParticipants ? 'Отмена' : '+ Добавить участников'}
                 </button>
@@ -674,11 +739,19 @@ export function EventModal({
                         className="app-selected flex items-center justify-between rounded-xl px-3 py-2"
                       >
                         <div className="flex items-center gap-2">
-                          <div className="app-avatar-fallback h-6 w-6">
-                            <span className="text-xs font-medium">
-                              {emp.first_name?.[0] || '?'}
-                            </span>
-                          </div>
+                          {emp.avatar ? (
+                            <img
+                              src={resolveMediaUrl(emp.avatar)}
+                              alt={`${emp.first_name || ""} ${emp.last_name || ""}`.trim() || "Сотрудник"}
+                              className="app-avatar-frame h-6 w-6 shrink-0 rounded-full object-cover"
+                            />
+                          ) : (
+                            <div className="app-avatar-fallback flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                              <span className="text-xs font-medium">
+                                {emp.first_name?.[0] || emp.last_name?.[0] || '?'}
+                              </span>
+                            </div>
+                          )}
                           <div className="text-xs">
                             <div className="font-medium text-[var(--foreground)]">{emp.first_name} {emp.last_name}</div>
                             <div className="app-text-muted">attendee</div>
@@ -702,32 +775,51 @@ export function EventModal({
                 <p className="app-text-muted py-2 text-xs">Загрузка...</p>
               ) : editingEvent.id && eventParticipants.length > 0 ? (
                 <div className="space-y-2 max-h-32 overflow-y-auto">
-                  {eventParticipants.map((participant: any) => (
-                    <div
-                      key={participant.id}
-                      className="app-surface-muted flex items-center justify-between rounded-xl px-3 py-2"
-                    >
-                      <div className="flex items-center gap-2">
-                        <div className="app-avatar-fallback h-6 w-6">
-                          <span className="text-xs font-medium">
-                            {participant.user_name?.[0] || '?'}
-                          </span>
-                        </div>
-                        <div className="text-xs">
-                          <div className="font-medium text-[var(--foreground)]">{participant.user_name}</div>
-                          <div className="app-text-muted">{participant.distinction || 'attendee'}</div>
-                        </div>
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => handleRemoveParticipant(participant.id)}
-                        className="app-action-danger p-1.5"
-                        title="Удалить участника"
+                  {eventParticipants.map((participant: any) => {
+                    const employee = employeeMap.get(participant.object_id);
+                    const participantName =
+                      participant.user_name ||
+                      [employee?.first_name, employee?.last_name].filter(Boolean).join(" ") ||
+                      "Сотрудник";
+                    const avatarUrl = participant.user_avatar || employee?.avatar;
+
+                    return (
+                      <div
+                        key={participant.id}
+                        className="app-surface-muted flex items-center justify-between rounded-xl px-3 py-2"
                       >
-                        <X size={14} />
-                      </button>
-                    </div>
-                  ))}
+                        <div className="flex min-w-0 items-center gap-2">
+                          {avatarUrl ? (
+                            <img
+                              src={resolveMediaUrl(avatarUrl)}
+                              alt={participantName}
+                              className="app-avatar-frame h-8 w-8 shrink-0 rounded-full object-cover"
+                            />
+                          ) : (
+                            <div className="app-avatar-fallback flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
+                              <span className="text-xs font-medium">
+                                {participantName?.[0] || '?'}
+                              </span>
+                            </div>
+                          )}
+                          <div className="min-w-0 text-xs">
+                            <div className="truncate font-medium text-[var(--foreground)]">{participantName}</div>
+                            <div className="truncate app-text-muted">
+                              {employee?.email || participant.distinction || 'attendee'}
+                            </div>
+                          </div>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveParticipant(participant.id)}
+                          className="app-action-danger p-1.5"
+                          title="Удалить участника"
+                        >
+                          <X size={14} />
+                        </button>
+                      </div>
+                    );
+                  })}
                 </div>
               ) : editingEvent.id ? (
                 <p className="app-text-muted py-2 text-xs">Нет участников</p>
@@ -737,53 +829,92 @@ export function EventModal({
 
               {/* Форма добавления участников */}
               {showAddParticipants && (
-                <div className="app-surface-muted space-y-3 rounded-xl p-3">
-                  <input
-                    type="text"
-                    placeholder="Поиск сотрудников..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="app-input w-full"
-                  />
+                <div className="app-surface-muted space-y-3 rounded-2xl p-3">
+                  <div className="space-y-1">
+                    <input
+                      type="text"
+                      placeholder="Поиск сотрудников..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="app-input w-full rounded-lg px-3 py-2.5 text-sm"
+                    />
+                    <div className="flex items-center justify-between px-1 text-xs">
+                      <span className="app-text-muted">
+                        {loadingEmployees ? "Загружаю сотрудников..." : `Найдено: ${filteredEmployees.length}`}
+                      </span>
+                      <span className="app-accent-text font-medium">
+                        Выбрано: {selectedEmployeeIds.length}
+                      </span>
+                    </div>
+                  </div>
 
                   {loadingEmployees ? (
                     <p className="app-text-muted py-2 text-xs">Загрузка сотрудников...</p>
                   ) : (
                     <>
-                      <div className="max-h-48 overflow-y-auto space-y-1">
-                        {availableEmployees
-                          .filter(emp => {
-                            const fullName = `${emp.first_name} ${emp.last_name} ${emp.email || ''}`.toLowerCase();
-                            const matchesSearch = fullName.includes(searchQuery.toLowerCase());
-                            const notParticipant = !eventParticipants.find(p => p.object_id === emp.id);
-                            const notPending = !pendingParticipantIds.includes(emp.id);
-                            return matchesSearch && notParticipant && notPending;
-                          })
-                          .map(emp => (
-                            <label
-                              key={emp.id}
-                              className="app-surface flex cursor-pointer items-center gap-2 rounded-xl p-2"
-                            >
-                              <input
-                                type="checkbox"
-                                checked={selectedEmployeeIds.includes(emp.id)}
-                                onChange={(e) => {
-                                  if (e.target.checked) {
-                                    setSelectedEmployeeIds([...selectedEmployeeIds, emp.id]);
+                      <div className="app-surface max-h-72 space-y-2 overflow-y-auto rounded-2xl p-2">
+                        {filteredEmployees.length > 0 ? (
+                          filteredEmployees.map((emp) => {
+                            const isSelected = selectedEmployeeIds.includes(emp.id);
+                            return (
+                              <button
+                                key={emp.id}
+                                type="button"
+                                onClick={() => {
+                                  if (isSelected) {
+                                    setSelectedEmployeeIds(selectedEmployeeIds.filter((id) => id !== emp.id));
                                   } else {
-                                    setSelectedEmployeeIds(selectedEmployeeIds.filter(id => id !== emp.id));
+                                    setSelectedEmployeeIds([...selectedEmployeeIds, emp.id]);
                                   }
                                 }}
-                                className="app-checkbox"
-                              />
-                              <div className="text-xs">
-                                <div className="font-medium text-[var(--foreground)]">
-                                  {emp.first_name} {emp.last_name}
+                                className={`flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition ${
+                                  isSelected
+                                    ? "app-selected"
+                                    : "app-surface-muted hover:bg-[var(--surface-tertiary)]"
+                                }`}
+                              >
+                                {emp.avatar ? (
+                                  <img
+                                    src={resolveMediaUrl(emp.avatar)}
+                                    alt={`${emp.first_name || ""} ${emp.last_name || ""}`.trim() || "Сотрудник"}
+                                    className="app-avatar-frame h-10 w-10 shrink-0 rounded-full object-cover"
+                                  />
+                                ) : (
+                                  <div className="app-avatar-fallback flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
+                                    <span className="text-sm font-semibold">
+                                      {emp.first_name?.[0] || emp.last_name?.[0] || "?"}
+                                    </span>
+                                  </div>
+                                )}
+                                <div className="min-w-0 flex-1">
+                                  <div className="truncate text-sm font-medium text-[var(--foreground)]">
+                                    {emp.first_name} {emp.last_name}
+                                  </div>
+                                  <div className="truncate text-xs text-[var(--muted-foreground)]">
+                                    {emp.email || "Почта не указана"}
+                                  </div>
                                 </div>
-                                {emp.email && <div className="app-text-muted">{emp.email}</div>}
-                              </div>
-                            </label>
-                          ))}
+                                <div
+                                  className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition ${
+                                    isSelected
+                                      ? "border-[color:var(--accent-primary)] bg-[var(--accent-primary)] text-white"
+                                      : "border-[color:var(--border-strong)] text-transparent"
+                                  }`}
+                                  aria-hidden="true"
+                                >
+                                  <Check size={14} />
+                                </div>
+                              </button>
+                            );
+                          })
+                        ) : (
+                          <div className="app-surface-muted rounded-xl px-3 py-6 text-center">
+                            <p className="text-sm font-medium text-[var(--foreground)]">Ничего не найдено</p>
+                            <p className="app-text-muted mt-1 text-xs">
+                              Попробуй изменить запрос или очистить фильтр поиска.
+                            </p>
+                          </div>
+                        )}
                       </div>
 
                       {selectedEmployeeIds.length > 0 && (
@@ -791,7 +922,7 @@ export function EventModal({
                           type="button"
                           onClick={handleAddParticipants}
                           disabled={addingParticipants}
-                          className="app-action-primary w-full"
+                          className="app-action-primary w-full rounded-xl px-4 py-3 text-sm font-semibold"
                         >
                           {addingParticipants ? 'Добавление...' : `Добавить выбранных (${selectedEmployeeIds.length})`}
                         </button>
diff --git a/frontend/src/components/NotificationCenter.tsx b/frontend/src/components/NotificationCenter.tsx
index acd6102b..d8a733d8 100644
--- a/frontend/src/components/NotificationCenter.tsx
+++ b/frontend/src/components/NotificationCenter.tsx
@@ -105,7 +105,7 @@ export function NotificationCenter({ variant = 'default', isOpen: externalIsOpen
                 <div className="app-menu absolute right-0 top-12 z-[60] flex max-h-[600px] w-80 flex-col rounded-xl sm:w-96 animate-fade-in">
                     {/* Заголовок */}
                     <div className="app-divider flex items-center justify-between border-b p-4">
-                        <h3 className="text-base font-semibold text-[var(--foreground)]">Уведомления</h3>
+                        <p className="app-text-muted text-sm font-semibold uppercase tracking-wide">Уведомления</p>
                         <div className="flex items-center gap-2">
                             {unreadCount > 0 && (
                                 <button
@@ -149,9 +149,9 @@ export function NotificationCenter({ variant = 'default', isOpen: externalIsOpen
                                 Загрузка...
                             </div>
                         ) : notifications.length === 0 ? (
-                            <div className="app-text-muted p-8 text-center">
-                                <Bell className="mx-auto mb-2 h-12 w-12 opacity-20" />
-                                <p className="text-sm">Нет уведомлений</p>
+                            <div className="app-text-muted p-10 text-center">
+                                <Bell className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                                <p className="text-sm font-medium">Нет уведомлений</p>
                             </div>
                         ) : (
                             <ul>
@@ -208,7 +208,7 @@ export function NotificationCenter({ variant = 'default', isOpen: externalIsOpen
                     </div>
 
                     {/* Футер */}
-                    <div className="app-divider app-surface-muted border-t p-3 text-center">
+                    <div className="app-divider border-t p-3 text-center">
                         <a
                             href="/notifications"
                             onClick={(e) => e.stopPropagation()}
@@ -240,7 +240,7 @@ export function NotificationPanel({ onClose }: { onClose?: () => void }) {
     return (
         <div className="app-menu flex max-h-[60vh] flex-col overflow-hidden rounded-xl">
             <div className="app-divider flex items-center justify-between border-b p-3">
-                <h3 className="text-sm font-semibold text-[var(--foreground)]">Уведомления</h3>
+                <p className="app-text-muted text-sm font-semibold uppercase tracking-wide">Уведомления</p>
                 <div className="flex items-center gap-2">
                     {unreadCount > 0 && (
                         <button 
@@ -276,9 +276,9 @@ export function NotificationPanel({ onClose }: { onClose?: () => void }) {
                 {loading ? (
                     <div className="app-text-muted p-8 text-center text-sm">Загрузка...</div>
                 ) : notifications.length === 0 ? (
-                    <div className="app-text-muted p-8 text-center">
-                        <Bell className="mx-auto mb-2 h-12 w-12 opacity-20" />
-                        <p className="text-sm">Нет уведомлений</p>
+                    <div className="app-text-muted p-10 text-center">
+                        <Bell className="mx-auto mb-3 h-12 w-12 opacity-30" />
+                        <p className="text-sm font-medium">Нет уведомлений</p>
                     </div>
                 ) : (
                     <ul>
@@ -314,7 +314,7 @@ export function NotificationPanel({ onClose }: { onClose?: () => void }) {
                 )}
             </div>
 
-            <div className="app-divider app-surface-muted border-t p-2 text-center">
+            <div className="app-divider border-t p-2 text-center">
                 <a 
                     href="/notifications" 
                     onClick={(e) => e.stopPropagation()}
diff --git a/frontend/src/components/ViewDayEventsModal.tsx b/frontend/src/components/ViewDayEventsModal.tsx
index 0b4131e9..8039ec14 100644
--- a/frontend/src/components/ViewDayEventsModal.tsx
+++ b/frontend/src/components/ViewDayEventsModal.tsx
@@ -2,6 +2,7 @@
 
 import { Plus, Clock, Calendar } from "lucide-react";
 import { Modal } from "@/components/ui";
+import { resolveEventColor } from "@/lib/calendar-event-colors";
 import { format } from "date-fns";
 import { ru } from "date-fns/locale";
 
@@ -91,7 +92,7 @@ export function ViewDayEventsModal({
                     {/* Color Indicator */}
                     <div
                       className="mt-1 h-8 w-1 rounded-full flex-shrink-0"
-                      style={{ backgroundColor: event.color_event || "#3498db" }}
+                      style={{ backgroundColor: resolveEventColor(event.color_event) }}
                     />
 
                     <div className="flex-1 min-w-0">
diff --git a/frontend/src/components/ViewEventDetailsModal.tsx b/frontend/src/components/ViewEventDetailsModal.tsx
index a34b1d0e..f37da0b5 100644
--- a/frontend/src/components/ViewEventDetailsModal.tsx
+++ b/frontend/src/components/ViewEventDetailsModal.tsx
@@ -2,6 +2,7 @@
 
 import { Edit2, Trash2, Clock, Calendar, FileText, Users } from "lucide-react";
 import { Modal } from "@/components/ui";
+import { resolveEventColor } from "@/lib/calendar-event-colors";
 import { format } from "date-fns";
 import { ru } from "date-fns/locale";
 import { useState, useEffect } from "react";
@@ -134,7 +135,7 @@ export function ViewEventDetailsModal({
           <div className="app-text-muted flex items-center gap-1.5 text-xs">
             <div
               className="h-2.5 w-2.5 rounded-full flex-shrink-0"
-              style={{ backgroundColor: event.color_event || "#3498db" }}
+              style={{ backgroundColor: resolveEventColor(event.color_event) }}
             />
             <span className="truncate">Календарь #{event.calendar}</span>
           </div>
diff --git a/frontend/src/components/calendar/CalendarCard.tsx b/frontend/src/components/calendar/CalendarCard.tsx
index 14b5242f..81f98d4f 100644
--- a/frontend/src/components/calendar/CalendarCard.tsx
+++ b/frontend/src/components/calendar/CalendarCard.tsx
@@ -5,6 +5,7 @@ import { ChevronLeft, ChevronRight, Plus, Users } from "lucide-react";
 import { useCalendar } from "@/contexts/CalendarContext";
 import { useCalendarEvents } from "@/hooks/calendar/useCalendarEvents";
 import { calendarService, formatDateKey, type CalendarEvent } from "@/services/calendarService";
+import { DEFAULT_EVENT_COLOR, resolveEventColor } from "@/lib/calendar-event-colors";
 
 // Типы
 interface CalendarCardProps {
@@ -92,7 +93,7 @@ export const CalendarCard = memo(function CalendarCard({
       start: startDate.toISOString(),
       end: endDate.toISOString(),
       calendar: selectedCalendarId,
-      color_event: "#3498db",
+      color_event: DEFAULT_EVENT_COLOR,
     };
     onOpenEventModal(newEvent, date);
   }, [selectedCalendarId, onOpenEventModal]);
@@ -490,7 +491,7 @@ export const CalendarCard = memo(function CalendarCard({
                     <div className="flex items-center gap-1">
                       <div
                         className="h-2 w-2 rounded-full flex-shrink-0"
-                        style={{ backgroundColor: event.color_event || event.color || "#3498db" }}
+                        style={{ backgroundColor: resolveEventColor(event.color_event || event.color) }}
                       />
                       <p className="truncate text-xs font-medium text-[var(--foreground)]">{event.title}</p>
                       {(event.is_recurring || event.rule) && (
diff --git a/frontend/src/hooks/useCalendarModals.ts b/frontend/src/hooks/useCalendarModals.ts
index 0009a4b6..4b49fcdf 100644
--- a/frontend/src/hooks/useCalendarModals.ts
+++ b/frontend/src/hooks/useCalendarModals.ts
@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from "react";
 import { apiClient } from "@/lib/api";
+import { DEFAULT_EVENT_COLOR } from "@/lib/calendar-event-colors";
 import type { CalendarEvent } from "@/services/calendarService";
 
 export interface CalendarModalsState {
@@ -84,7 +85,7 @@ export function useCalendarModals() {
       start: startDate.toISOString(),
       end: endDate.toISOString(),
       calendar: currentSelectedCalendarId,
-      color_event: "#3498db",
+      color_event: DEFAULT_EVENT_COLOR,
     } as CalendarEvent);
 
     setShowDayEventsModal(false);
diff --git a/frontend/src/hooks/useProcurementPage.ts b/frontend/src/hooks/useProcurementPage.ts
index 054ae28e..50db2d1c 100644
--- a/frontend/src/hooks/useProcurementPage.ts
+++ b/frontend/src/hooks/useProcurementPage.ts
@@ -51,6 +51,7 @@ type ProcurementSection = "requests" | "stats" | "suppliers";
 type PaginatedLike<T> = {
   results?: T[];
   next?: string | null;
+  count?: number;
 };
 
 const getPaginatedResults = <T,>(response: unknown): T[] => {
@@ -76,6 +77,17 @@ const getPaginatedNext = (response: unknown): number | null => {
   return extractNextPage((response as PaginatedLike<unknown>).next ?? null);
 };
 
+const getPaginatedCount = (response: unknown): number => {
+  if (!response || typeof response !== "object" || Array.isArray(response)) {
+    return 0;
+  }
+
+  const count = (response as PaginatedLike<unknown>).count;
+  return typeof count === "number" && Number.isFinite(count)
+    ? count
+    : getPaginatedResults(response).length;
+};
+
 const getReadableError = (error: unknown, fallback: string): string => {
   const raw = String((error as Error)?.message || fallback);
   try {
@@ -110,6 +122,14 @@ export function useProcurementPage(user: User | null) {
   const [actionSuccess, setActionSuccess] = useState<string | null>(null);
   const [busyKey, setBusyKey] = useState<string | null>(null);
   const [nextPage, setNextPage] = useState<number | null>(null);
+  const [scopeCounts, setScopeCounts] = useState<Record<ScopeTab, number>>({
+    all: 0,
+    mine: 0,
+    department: 0,
+    pending_approvals: 0,
+    my_work: 0,
+    available: 0,
+  });
 
   const [scope, setScope] = useState<ScopeTab>("all");
   const [searchQuery, setSearchQuery] = useState("");
@@ -181,6 +201,23 @@ export function useProcurementPage(user: User | null) {
     [departmentFilter, periodFilter, scope, searchQuery, statusFilter, urgencyFilter],
   );
 
+  const buildScopeCountParams = useCallback(
+    (targetScope: ScopeTab): Record<string, string | number> => {
+      const params: Record<string, string | number> = { page: 1 };
+      if (targetScope === "mine") params.scope = "mine";
+      else if (targetScope === "department") params.scope = "department";
+      else if (targetScope === "my_work") params.scope = "my_work";
+      else if (targetScope === "available") params.scope = "available";
+      if (statusFilter) params.status = statusFilter;
+      if (urgencyFilter) params.urgency = urgencyFilter;
+      if (departmentFilter) params.department = departmentFilter;
+      if (periodFilter) params.period = periodFilter;
+      if (searchQuery.trim()) params.search = searchQuery.trim();
+      return params;
+    },
+    [departmentFilter, periodFilter, searchQuery, statusFilter, urgencyFilter],
+  );
+
   const loadPage1 = useCallback(async () => {
     try {
       setLoading(true);
@@ -204,6 +241,34 @@ export function useProcurementPage(user: User | null) {
     void loadPage1();
   }, [loadPage1]);
 
+  useEffect(() => {
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const scopes: ScopeTab[] = ["all", "mine", "department", "pending_approvals", "my_work", "available"];
+        const results = await Promise.all(
+          scopes.map(async (scopeKey) => {
+            const response: unknown = scopeKey === "pending_approvals"
+              ? await apiClient.getPendingApprovals(buildScopeCountParams(scopeKey))
+              : await apiClient.getProcurementRequests(buildScopeCountParams(scopeKey));
+            return [scopeKey, getPaginatedCount(response)] as const;
+          }),
+        );
+
+        if (!cancelled) {
+          setScopeCounts(Object.fromEntries(results) as Record<ScopeTab, number>);
+        }
+      } catch (countsError) {
+        console.error("Load procurement scope counts error:", countsError);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [buildScopeCountParams]);
+
   useEffect(() => {
     let cancelled = false;
 
@@ -520,6 +585,7 @@ export function useProcurementPage(user: User | null) {
     actionSuccess,
     busyKey,
     nextPage,
+    scopeCounts,
     scope,
     setScope,
     searchQuery,
@@ -572,4 +638,4 @@ export function useProcurementPage(user: User | null) {
     getRequestAmount,
     loadPage1,
   };
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/calendar-event-colors.ts b/frontend/src/lib/calendar-event-colors.ts
new file mode 100644
index 00000000..619cf378
--- /dev/null
+++ b/frontend/src/lib/calendar-event-colors.ts
@@ -0,0 +1,16 @@
+export const DEFAULT_EVENT_COLOR = "#1296ea";
+
+export const EVENT_COLOR_OPTIONS = [
+  { value: DEFAULT_EVENT_COLOR, label: "Фирменный голубой" },
+  { value: "#0ea5e9", label: "Небесный" },
+  { value: "#14b8a6", label: "Бирюзовый" },
+  { value: "#22c55e", label: "Зеленый" },
+  { value: "#f59e0b", label: "Янтарный" },
+  { value: "#f97316", label: "Оранжевый" },
+  { value: "#ef4444", label: "Красный" },
+  { value: "#8b5cf6", label: "Фиолетовый" },
+];
+
+export function resolveEventColor(color?: string | null) {
+  return color || DEFAULT_EVENT_COLOR;
+}