Добавить дисциплины календарных графиков

frontend/admin/css/components.css

@@ -1181,6 +1181,150 @@
     }
 }
 
+.academic-calendar-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid var(--bg-card-border);
+}
+
+.academic-calendar-tab {
+    min-height: 40px;
+    padding: 0.55rem 0.9rem;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+    background: transparent;
+    color: var(--text-secondary);
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+    transition: color var(--transition), background var(--transition), border-color var(--transition);
+}
+
+.academic-calendar-tab:hover,
+.academic-calendar-tab:focus-visible {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+    outline: none;
+}
+
+.academic-calendar-tab.active {
+    color: var(--accent-hover);
+    background: var(--bg-card);
+    border-color: var(--bg-card-border);
+}
+
+.academic-calendar-tab-panel {
+    display: grid;
+    gap: 1rem;
+}
+
+.academic-calendar-tab-panel[hidden] {
+    display: none;
+}
+
+.calendar-subject-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 0.75rem;
+}
+
+.calendar-subject-semester {
+    min-height: 104px;
+    padding: 0.8rem;
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--bg-input) 84%, var(--bg-card));
+}
+
+.calendar-subject-semester-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.65rem;
+}
+
+.calendar-subject-semester-head strong {
+    color: var(--text-primary);
+    font-size: 0.92rem;
+}
+
+.calendar-subject-semester-head span,
+.calendar-subject-empty {
+    color: var(--text-secondary);
+    font-size: 0.84rem;
+}
+
+.calendar-subject-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+}
+
+.calendar-subject-chip {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-height: 30px;
+    padding: 0.25rem 0.28rem 0.25rem 0.55rem;
+    gap: 0.35rem;
+    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--bg-card-border));
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--accent) 9%, var(--bg-card));
+    color: var(--text-primary);
+    font-size: 0.84rem;
+}
+
+.calendar-subject-chip span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.calendar-subject-remove {
+    width: 22px;
+    height: 22px;
+    flex: 0 0 22px;
+    border: none;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    color: var(--danger);
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.calendar-subject-remove:hover,
+.calendar-subject-remove:focus-visible {
+    background: var(--danger);
+    color: white;
+    outline: none;
+}
+
+.assignment-subjects {
+    display: grid;
+    gap: 0.45rem;
+    min-width: 220px;
+}
+
+.assignment-subject-semester {
+    display: grid;
+    gap: 0.15rem;
+}
+
+.assignment-subject-semester strong {
+    color: var(--accent-hover);
+    font-size: 0.78rem;
+}
+
+.assignment-subject-semester span {
+    color: var(--text-primary);
+    font-size: 0.86rem;
+    line-height: 1.35;
+}
+
 .calendar-fill-panel {
     display: grid;
     grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
@@ -1715,6 +1859,10 @@
         grid-template-columns: repeat(2, minmax(180px, 1fr));
     }
 
+    .calendar-subject-summary {
+        grid-template-columns: repeat(2, minmax(220px, 1fr));
+    }
+
     .calendar-semesters-grid {
         grid-template-columns: 1fr;
         grid-auto-rows: auto;
@@ -1769,6 +1917,16 @@
         grid-template-columns: 1fr;
     }
 
+    .academic-calendar-tab {
+        flex: 1 1 100%;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--bg-card-border);
+    }
+
+    .calendar-subject-summary {
+        grid-template-columns: 1fr;
+    }
+
     .calendar-day-dialog-grid {
         grid-template-columns: 1fr;
     }