diff --git a/backend/static/css/components/rightbar-calendar-fullcalendar.css b/backend/static/css/components/rightbar-calendar-fullcalendar.css
new file mode 100644
index 00000000..b5a2f7d3
--- /dev/null
+++ b/backend/static/css/components/rightbar-calendar-fullcalendar.css
@@ -0,0 +1,316 @@
+/**
+ * rightbar-calendar-fullcalendar.css
+ * Стили для календаря в правой панели (FullCalendar + недельная лента)
+ */
+
+/* ─────────────────────────────────────────────────────────────
+ БАЗА КАЛЕНДАРЯ
+────────────────────────────────────────────────────────────── */
+.calendar-wrap {
+ min-height: 360px;
+ border-radius: 10px;
+ overflow: hidden;
+ background: var(--bs-body-bg);
+ box-shadow: inset 0 1px 3px color-mix(in srgb, var(--bs-body-color), transparent 92%);
+ border: 0;
+}
+
+.rightbar-card {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ border-radius: 16px;
+ overflow: hidden;
+ border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 10%);
+ background: var(--bs-body-bg);
+ box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
+ min-height: 0;
+}
+
+.rightbar-card .card-header {
+ flex: 0 0 auto;
+ background: var(--bs-tertiary-bg);
+ border-bottom: 1px solid var(--bs-border-color);
+ padding: .6rem .9rem;
+}
+
+.rightbar-card .card-body {
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ padding: .75rem;
+}
+
+@media (min-width: 992px) {
+ .rightbar {
+ position: sticky;
+ top: var(--navbar-h);
+ height: calc(100dvh - var(--navbar-h));
+ padding: 1rem 1rem 1rem .75rem;
+ overflow: hidden;
+ }
+}
+
+/* ─────────────────────────────────────────────────────────────
+ FULLCALENDAR — КОМПАКТНО
+────────────────────────────────────────────────────────────── */
+.fc {
+ font-size: 0.7rem;
+ --fc-border-color: var(--bs-border-color);
+ --fc-page-bg-color: transparent;
+ --fc-neutral-bg-color: transparent;
+ --fc-today-bg-color: color-mix(in srgb, var(--bs-primary), transparent 85%);
+ --fc-event-bg-color: var(--bs-primary);
+ --fc-event-border-color: var(--bs-primary);
+ --fc-event-text-color: var(--bs-body-bg);
+}
+
+.fc-theme-standard .fc-scrollgrid {
+ border: 0 !important;
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+ border: 0 !important;
+}
+
+.fc .fc-toolbar {
+ padding: .7rem .9rem;
+ background: var(--bs-tertiary-bg);
+ border-bottom: 1px solid var(--bs-border-color);
+ justify-content: space-between;
+}
+
+.fc .fc-toolbar-title {
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--bs-body-color);
+}
+
+.fc .fc-button {
+ border-radius: 8px;
+ font-size: .82rem;
+ padding: .25rem .5rem;
+ background: transparent;
+ border: none;
+ color: var(--bs-primary);
+}
+
+.fc .fc-button:hover {
+ background: rgba(var(--bs-primary-rgb), .1);
+}
+
+.fc .fc-daygrid-day-frame {
+ padding: 2px 3px !important;
+}
+
+.fc .fc-daygrid-day-number {
+ font-size: .82rem;
+ width: 100%;
+ height: 1.6rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ color: var(--bs-body-color);
+ text-decoration: none !important;
+}
+
+.fc .fc-day-today {
+ background: none !important;
+}
+
+.fc .fc-day-today .fc-daygrid-day-number {
+ color: var(--bs-primary);
+ font-weight: 700;
+ border: 1px solid var(--bs-primary);
+ border-radius: 50%;
+}
+
+.fc .fc-day-other .fc-daygrid-day-number {
+ opacity: .4;
+}
+
+.fc .fc-daygrid-day-events {
+ padding: 0 2px 2px !important;
+ row-gap: 2px !important;
+}
+
+.fc .fc-daygrid-event-harness {
+ margin: 0 0 2px 0 !important;
+}
+
+.fc .fc-daygrid-event .fc-event-time {
+ display: none !important;
+}
+
+.fc .fc-daygrid-event {
+ border-radius: 6px;
+ padding: .1rem .25rem !important;
+ line-height: 1.02 !important;
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 75%);
+ border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 60%);
+ color: var(--bs-body-color);
+}
+
+.fc .fc-daygrid-event .fc-event-title {
+ font-size: .62rem !important;
+ line-height: 1.02 !important;
+ letter-spacing: -0.2px;
+ font-weight: 600;
+ font-family: "Arial Narrow","Roboto Condensed",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+ display: -webkit-box !important;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden !important;
+ white-space: normal !important;
+ text-overflow: ellipsis;
+ max-height: calc(1.02em * 3);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ ВЕРТИКАЛЬНАЯ ЛЕНТА НЕДЕЛИ
+────────────────────────────────────────────────────────────── */
+.week-strip-header {
+ margin-top: .6rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--bs-secondary-color);
+ font-size: .8rem;
+}
+
+.week-vertical {
+ margin-top: .6rem;
+ display: flex;
+ flex-direction: column;
+ gap: .4rem;
+}
+
+.week-vertical .week-row {
+ display: grid;
+ grid-template-columns: 56px 1fr;
+ align-items: start;
+ gap: .6rem;
+ padding: .5rem .6rem;
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 86%);
+ border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 70%);
+}
+
+.week-vertical .week-row:hover {
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 82%);
+}
+
+.date-badge {
+ display: grid;
+ place-items: center;
+ border-radius: 10px;
+ padding: .35rem .25rem;
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 92%);
+ border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 75%);
+ text-align: center;
+ line-height: 1.05;
+}
+
+.date-badge .dow {
+ font-size: .7rem;
+ font-weight: 700;
+ color: var(--bs-primary);
+ text-transform: uppercase;
+}
+
+.date-badge .md {
+ font-size: .74rem;
+ font-weight: 700;
+ color: var(--bs-body-color);
+}
+
+.week-vertical .content .title {
+ font-size: .8rem;
+ font-weight: 600;
+ color: var(--bs-body-color);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+}
+
+.week-vertical .content .meta {
+ margin-top: .15rem;
+ font-size: .72rem;
+ color: var(--bs-secondary-color);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ OFFCANVAS (МОБАЙЛ)
+────────────────────────────────────────────────────────────── */
+#rightbarOffcanvas {
+ height: 100dvh;
+ height: 100svh;
+}
+
+#rightbarOffcanvas .offcanvas-body {
+ display: flex;
+ flex-direction: column;
+ gap: .6rem;
+ height: calc(100dvh - var(--rb-offcanvas-head, 56px));
+ height: calc(100svh - var(--rb-offcanvas-head, 56px));
+ min-height: 0;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ overscroll-behavior: contain;
+}
+
+#rightbarOffcanvas .calendar-wrap {
+ flex: 0 0 auto;
+}
+
+#rightbarOffcanvas .week-vertical {
+ flex: 0 0 auto;
+}
+
+.calendar-fab {
+ position: fixed;
+ right: 1rem;
+ bottom: 1rem;
+ z-index: 1060;
+ width: 52px;
+ height: 52px;
+ border-radius: 9999px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.18);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ COLOR PICKER (PALETTE)
+────────────────────────────────────────────────────────────── */
+.color-swatch {
+ width: 26px;
+ height: 26px;
+ border: 1px solid var(--bs-border-color);
+ border-radius: 9999px;
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+}
+
+.color-swatch.active {
+ outline: 2px solid var(--bs-primary);
+ outline-offset: 2px;
+}
+
+/* ─────────────────────────────────────────────────────────────
+ EVENT DETAILS MODAL
+────────────────────────────────────────────────────────────── */
+.color-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 9999px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 6px;
+ border: 1px solid #00000022;
+}
diff --git a/backend/static/css/components/team-wheel.css b/backend/static/css/components/team-wheel.css
new file mode 100644
index 00000000..c859fdf2
--- /dev/null
+++ b/backend/static/css/components/team-wheel.css
@@ -0,0 +1,190 @@
+/**
+ * team-wheel.css
+ * Стили для колеса команды (круговой прокручиваемый виджет сотрудников)
+ */
+
+/* ─────────────────────────────────────────────────────────────
+ CSS ПЕРЕМЕННЫЕ
+────────────────────────────────────────────────────────────── */
+:root {
+ --wheel-size: 200px; /* размер круга */
+ --ava-size: 52px; /* размер мини-аватарки */
+ --ring-bg: radial-gradient(ellipse at center, var(--bs-body-bg), color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-secondary-bg, #f7f7f9) 15%));
+ --ring-border: var(--bs-border-color, rgba(0,0,0,.125));
+ --shadow-inset: 0 8px 24px rgba(0,0,0,.06) inset;
+ --shadow-out: 0 4px 12px rgba(0,0,0,.05);
+ --arc-width: 4px;
+ --arc-track: color-mix(in srgb, var(--bs-secondary-color) 30%, transparent);
+ --arc-prog: var(--bs-primary);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ TEAM WRAP & WHEEL
+────────────────────────────────────────────────────────────── */
+.team-wrap {
+ width: var(--wheel-size);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-inline: auto;
+}
+
+.team-wheel {
+ position: relative;
+ width: var(--wheel-size);
+ height: var(--wheel-size);
+ border-radius: 50%;
+ overflow: hidden;
+ background: var(--ring-bg);
+ border: 1px solid var(--ring-border);
+ box-shadow: var(--shadow-inset);
+ user-select: none;
+ touch-action: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* ─────────────────────────────────────────────────────────────
+ WHEEL LAYOUT
+────────────────────────────────────────────────────────────── */
+.wheel-plane {
+ position: absolute;
+ inset: 0;
+}
+
+.wheel-columns {
+ position: absolute;
+ inset: 10px 8px;
+ display: flex;
+ gap: 8px;
+ justify-content: space-between;
+ align-items: flex-start;
+ will-change: transform;
+}
+
+.wheel-col {
+ width: calc(25% - 6px);
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+}
+
+.wheel-col.col-2 {
+ margin-top: calc(var(--ava-size) * .5);
+}
+
+.wheel-col.col-3 {
+ margin-top: calc(var(--ava-size) * 1.0);
+}
+
+.wheel-col.col-4 {
+ margin-top: calc(var(--ava-size) * 1.5);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ WHEEL ITEMS
+────────────────────────────────────────────────────────────── */
+.wheel-item {
+ background: transparent;
+ border: 0;
+ padding: 0;
+ width: var(--ava-size);
+ height: var(--ava-size);
+ border-radius: 50%;
+ cursor: pointer;
+ box-shadow: var(--shadow-out);
+}
+
+.wheel-item .ava {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: color-mix(in srgb, var(--bs-body-bg) 75%, #f0f0f3 25%);
+}
+
+.wheel-item .ava img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+
+.wheel-item .ava i {
+ font-size: calc(var(--ava-size) * .55);
+ color: var(--bs-secondary-color);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ WHEEL FOCUS (ЦЕНТРАЛЬНЫЙ ЭЛЕМЕНТ)
+────────────────────────────────────────────────────────────── */
+.wheel-focus {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bs-body-bg);
+}
+
+.wheel-focus .focus-inner {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: color-mix(in srgb, var(--bs-body-bg) 85%, #e9ecef 15%);
+}
+
+.wheel-focus img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: none;
+}
+
+.wheel-focus [data-focus-fallback] {
+ display: none;
+ font-size: calc(var(--wheel-size) * .35);
+ color: var(--bs-secondary-color);
+}
+
+/* ─────────────────────────────────────────────────────────────
+ SCROLL ARC (ПРОГРЕСС-ИНДИКАТОР)
+────────────────────────────────────────────────────────────── */
+.scroll-arc {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+}
+
+.arc-track {
+ fill: none;
+ stroke: var(--arc-track);
+ stroke-width: var(--arc-width);
+ stroke-linecap: round;
+}
+
+.arc-prog {
+ fill: none;
+ stroke: var(--arc-prog);
+ stroke-width: var(--arc-width);
+ stroke-linecap: round;
+ stroke-dasharray: 1;
+ stroke-dashoffset: 1;
+ transition: stroke-dashoffset .12s linear;
+}
+
+/* ─────────────────────────────────────────────────────────────
+ TEAM INFO
+────────────────────────────────────────────────────────────── */
+.team-info {
+ text-align: center;
+}
diff --git a/backend/templates/employees/components/department_styles.html b/backend/templates/employees/components/department_styles.html
index 10615611..d0b34384 100644
--- a/backend/templates/employees/components/department_styles.html
+++ b/backend/templates/employees/components/department_styles.html
@@ -1,58 +1,2 @@
-{# ==== СТИЛИ (можно вынести в base.html, чтобы не дублировать) ==== #}
-
-
+{% load static %}
+
diff --git a/backend/templates/includes/calendar/calendar_styles.html b/backend/templates/includes/calendar/calendar_styles.html
index aa04e614..4315297d 100644
--- a/backend/templates/includes/calendar/calendar_styles.html
+++ b/backend/templates/includes/calendar/calendar_styles.html
@@ -1,133 +1,2 @@
-
\ No newline at end of file
+{% load static %}
+