feat: улучшить учебные периоды и просмотр расписаний

frontend/admin/css/components.css

@@ -1014,9 +1014,9 @@
     border-radius: var(--radius-sm);
     background: rgba(10, 10, 15, 0.97);
     box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
+    transform: none;
 }
 
 .schedule-visual-context-menu[hidden] {
@@ -1325,6 +1325,152 @@
     font-size: 0.82rem;
 }
 
+.academic-year-builder-card {
+    overflow: hidden;
+}
+
+.academic-year-builder-description {
+    margin: 0.28rem 0 0;
+    font-size: 0.84rem;
+}
+
+.academic-year-period-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+    gap: 0.8rem;
+    margin-top: 1rem;
+}
+
+#academic-year-end[readonly] {
+    color: var(--text-secondary);
+    background: color-mix(in srgb, var(--bg-input) 82%, var(--accent) 5%);
+    cursor: default;
+}
+
+.academic-year-field-hint {
+    display: block;
+    margin-top: 0.4rem;
+    font-size: 0.72rem;
+    line-height: 1.35;
+}
+
+.academic-year-semester-builder {
+    margin-top: 1rem;
+    padding: 0.85rem;
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--bg-input) 78%, transparent);
+}
+
+.academic-year-semester-builder-head,
+.academic-year-semester-card-title,
+.academic-year-form-actions {
+    display: flex;
+    align-items: center;
+}
+
+.academic-year-semester-builder-head {
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.academic-year-semester-builder-head h3,
+.academic-year-semester-builder-head p {
+    margin: 0;
+}
+
+.academic-year-semester-builder-head h3 {
+    font-size: 0.96rem;
+}
+
+.academic-year-semester-builder-head p {
+    margin-top: 0.2rem;
+    font-size: 0.78rem;
+}
+
+.academic-year-required-badge {
+    flex: 0 0 auto;
+    padding: 0.2rem 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    color: var(--accent-hover);
+    font-size: 0.68rem;
+    font-weight: 800;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+}
+
+.academic-year-semester-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+}
+
+.academic-year-semester-card {
+    min-width: 0;
+    padding: 0.75rem;
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card);
+}
+
+.academic-year-semester-card-title {
+    gap: 0.5rem;
+    margin-bottom: 0.65rem;
+    color: var(--text-primary);
+}
+
+.academic-year-semester-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.academic-year-semester-dot-autumn {
+    color: #f59e0b;
+    background: #f59e0b;
+}
+
+.academic-year-semester-dot-spring {
+    color: #22c55e;
+    background: #22c55e;
+}
+
+.academic-year-semester-dates {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.65rem;
+}
+
+.academic-year-form-actions {
+    justify-content: flex-end;
+    margin-top: 0.85rem;
+}
+
+@media (max-width: 900px) {
+    .academic-year-semester-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 640px) {
+    .academic-year-period-grid,
+    .academic-year-semester-dates {
+        grid-template-columns: 1fr;
+    }
+
+    .academic-year-semester-builder-head {
+        align-items: flex-start;
+    }
+
+    .academic-year-form-actions .btn {
+        width: 100%;
+    }
+}
+
 .schedule-inline-table {
     margin-top: 1rem;
 }
@@ -2148,6 +2294,20 @@
     transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), filter var(--transition);
 }
 
+.calendar-activity-color-10b981 { --activity-color: #10b981; }
+.calendar-activity-color-f59e0b { --activity-color: #f59e0b; }
+.calendar-activity-color-38bdf8 { --activity-color: #38bdf8; }
+.calendar-activity-color-a78bfa { --activity-color: #a78bfa; }
+.calendar-activity-color-fb7185 { --activity-color: #fb7185; }
+.calendar-activity-color-f97316 { --activity-color: #f97316; }
+.calendar-activity-color-22c55e { --activity-color: #22c55e; }
+.calendar-activity-color-ef4444 { --activity-color: #ef4444; }
+.calendar-activity-color-dc2626 { --activity-color: #dc2626; }
+.calendar-activity-color-eab308 { --activity-color: #eab308; }
+.calendar-activity-color-06b6d4 { --activity-color: #06b6d4; }
+.calendar-activity-color-64748b { --activity-color: #64748b; }
+.calendar-activity-color-475569 { --activity-color: #475569; }
+
 .calendar-day:hover,
 .calendar-day:focus-visible {
     background: color-mix(in srgb, var(--activity-color, var(--accent)) 24%, var(--bg-card));
@@ -2311,7 +2471,7 @@
 }
 
 .calendar-total-chip {
-    --chip-color: var(--accent);
+    --chip-color: var(--activity-color, var(--accent));
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;