Upload style.css

style.css

@@ -654,465 +654,511 @@ select.form-control {
     format('woff2');
 }
 
-/* Додаткові стилі для навчального дашборду */
-
-.app-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Заголовок */
+/* Header */
 .header {
-  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
   color: var(--color-btn-primary-text);
-  padding: var(--space-20) 0;
-  box-shadow: var(--shadow-md);
+  padding: var(--space-24) 0;
+  margin-bottom: var(--space-32);
 }
 
-.header h1 {
-  margin: 0;
+.header__title {
   font-size: var(--font-size-3xl);
-  text-align: center;
   font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-8);
 }
 
-/* Основний контент */
-.main-content {
-  flex: 1;
-  padding: var(--space-24) var(--space-16);
+.header__subtitle {
+  font-size: var(--font-size-lg);
+  opacity: 0.9;
+  margin: 0;
 }
 
-.workflow-container {
-  gap: var(--space-32);
-  align-items: flex-start;
+/* Main Layout */
+.main {
+  min-height: calc(100vh - 200px);
 }
 
-/* Бічна панель */
-.sidebar {
-  width: 280px;
-  flex-shrink: 0;
+.container {
+  display: grid;
+  grid-template-columns: 280px 1fr 1fr;
+  gap: var(--space-32);
+  align-items: start;
 }
 
-.sidebar-content {
+/* Filters Sidebar */
+.filters {
+  background: var(--color-surface);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-24);
   position: sticky;
   top: var(--space-24);
+  box-shadow: var(--shadow-sm);
 }
 
-.sidebar h3 {
-  margin-bottom: var(--space-16);
-  color: var(--color-text);
+.filters__section {
+  margin-bottom: var(--space-24);
+}
+
+.filters__section:last-child {
+  margin-bottom: 0;
+}
+
+.filters__title {
   font-size: var(--font-size-lg);
-  border-bottom: 2px solid var(--color-primary);
-  padding-bottom: var(--space-8);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-12);
+  color: var(--color-text);
 }
 
-.steps-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 var(--space-24) 0;
+.filters .form-control {
+  margin-bottom: var(--space-16);
 }
 
-.steps-list li {
-  margin-bottom: var(--space-8);
+.progress-summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
 }
 
-.step-link {
+.progress-item {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: var(--space-12);
-  text-decoration: none;
-  color: var(--color-text);
-  border-radius: var(--radius-base);
+  padding: var(--space-8);
+  background: var(--color-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.progress-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.progress-value {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+}
+
+/* Timeline */
+.timeline-container {
+  position: relative;
+}
+
+.timeline {
+  position: relative;
+  padding: var(--space-24) 0;
+}
+
+.timeline__line {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-border) 60%, var(--color-border) 100%);
+  border-radius: var(--radius-full);
+  transform: translateX(-50%);
+}
+
+.timeline__stages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-24);
+}
+
+.timeline-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
   transition: all var(--duration-normal) var(--ease-standard);
-  border: 1px solid transparent;
-  gap: var(--space-12);
 }
 
-.step-link:hover {
-  background: var(--color-secondary);
-  border-color: var(--color-border);
+.timeline-stage:hover {
+  transform: translateY(-2px);
 }
 
-.step-link.active {
-  background: var(--color-primary);
-  color: var(--color-btn-primary-text);
-  border-color: var(--color-primary);
+.timeline-stage--left {
+  justify-content: flex-end;
+  padding-right: calc(50% + var(--space-32));
 }
 
-.step-number {
+.timeline-stage--right {
+  justify-content: flex-start;
+  padding-left: calc(50% + var(--space-32));
+}
+
+.timeline-stage__node {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
+  font-size: var(--font-size-2xl);
+  border: 4px solid var(--color-surface);
+  box-shadow: var(--shadow-md);
+  transition: all var(--duration-normal) var(--ease-standard);
+  z-index: 2;
+}
+
+.timeline-stage--completed .timeline-stage__node {
+  background: var(--color-success);
+  color: white;
+}
+
+.timeline-stage--in-progress .timeline-stage__node {
+  background: var(--color-warning);
+  color: white;
+  animation: pulse 2s infinite;
+}
+
+.timeline-stage--pending .timeline-stage__node {
   background: var(--color-secondary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  flex-shrink: 0;
+  color: var(--color-text-secondary);
 }
 
-.step-link.active .step-number {
-  background: var(--color-btn-primary-text);
-  color: var(--color-primary);
+.timeline-stage--active .timeline-stage__node {
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: var(--shadow-lg), var(--focus-ring);
 }
 
-.step-link.visited .step-number {
-  background: var(--color-success);
-  color: var(--color-btn-primary-text);
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
 }
 
-/* Прогрес */
-.progress-container {
+.timeline-stage__card {
   background: var(--color-surface);
-  padding: var(--space-16);
+  border: 1px solid var(--color-card-border);
   border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
+  padding: var(--space-20);
+  max-width: 300px;
+  box-shadow: var(--shadow-sm);
+  transition: all var(--duration-normal) var(--ease-standard);
 }
 
-.progress-container h4 {
-  margin-bottom: var(--space-12);
-  font-size: var(--font-size-md);
+.timeline-stage:hover .timeline-stage__card {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-primary);
 }
 
-.progress-bar {
-  width: 100%;
-  height: 8px;
-  background: var(--color-secondary);
-  border-radius: var(--radius-full);
-  overflow: hidden;
+.timeline-stage__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
   margin-bottom: var(--space-8);
+  color: var(--color-text);
 }
 
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
+.timeline-stage__description {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.timeline-stage__status {
+  display: inline-block;
+  margin-top: var(--space-8);
+  padding: var(--space-4) var(--space-8);
   border-radius: var(--radius-full);
-  transition: width var(--duration-normal) var(--ease-standard);
-  width: 0%;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-#progressText {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-12);
+.status--completed {
+  background: rgba(var(--color-success-rgb), 0.15);
+  color: var(--color-success);
+  border: 1px solid rgba(var(--color-success-rgb), 0.25);
 }
 
-/* Основна панель */
-.main-panel {
-  flex: 1;
-  min-width: 0;
+.status--in-progress {
+  background: rgba(var(--color-warning-rgb), 0.15);
+  color: var(--color-warning);
+  border: 1px solid rgba(var(--color-warning-rgb), 0.25);
 }
 
-/* Вступ */
-.introduction {
-  margin-bottom: var(--space-32);
+.status--pending {
+  background: rgba(var(--color-info-rgb), 0.15);
+  color: var(--color-info);
+  border: 1px solid rgba(var(--color-info-rgb), 0.25);
+}
+
+/* Content Area */
+.content-area {
+  background: var(--color-surface);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  min-height: 600px;
 }
 
-.introduction h2 {
+.stage-detail {
+  padding: var(--space-32);
+}
+
+.welcome-message h2 {
+  color: var(--color-text);
   margin-bottom: var(--space-16);
-  color: var(--color-primary);
 }
 
-/* Візуалізація робочого процесу */
-.workflow-visualization {
+.welcome-message p {
+  color: var(--color-text-secondary);
   margin-bottom: var(--space-32);
 }
 
-.workflow-diagram {
+.overview-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--space-20);
-  padding: var(--space-24);
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-16);
 }
 
-.workflow-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.stat-card {
   text-align: center;
   padding: var(--space-20);
-  background: var(--color-background);
+  background: var(--color-secondary);
   border-radius: var(--radius-md);
-  border: 2px solid var(--color-border);
-  cursor: pointer;
-  transition: all var(--duration-normal) var(--ease-standard);
-  position: relative;
+  border: 1px solid var(--color-card-border);
 }
 
-.workflow-step:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
-  border-color: var(--color-primary);
+.stat-card h3 {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--space-8);
+  font-weight: var(--font-weight-medium);
 }
 
-.workflow-step.active {
-  background: var(--color-primary);
-  color: var(--color-btn-primary-text);
-  border-color: var(--color-primary);
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
+.stat-value {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
 }
 
-.workflow-step.visited {
-  border-color: var(--color-success);
+/* Stage Detail Content */
+.stage-content {
+  animation: fadeIn 0.3s ease-in-out;
 }
 
-.workflow-step.visited::after {
-  content: "✓";
-  position: absolute;
-  top: var(--space-8);
-  right: var(--space-8);
-  background: var(--color-success);
-  color: white;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-xs);
-  font-weight: bold;
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.step-icon {
-  width: 48px;
-  height: 48px;
-  background: var(--color-secondary);
-  border-radius: 50%;
+.stage-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-bottom: var(--space-12);
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--color-primary);
+  gap: var(--space-16);
+  margin-bottom: var(--space-24);
+  padding-bottom: var(--space-16);
+  border-bottom: 1px solid var(--color-border);
 }
 
-.workflow-step.active .step-icon {
-  background: var(--color-btn-primary-text);
-  color: var(--color-primary);
+.stage-icon {
+  font-size: var(--font-size-4xl);
 }
 
-.workflow-step h3 {
+.stage-title {
+  font-size: var(--font-size-3xl);
   margin: 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-}
-
-/* Деталі етапу */
-.step-details {
-  display: none;
-}
-
-.step-details.active {
-  display: block;
 }
 
-.step-navigation {
-  display: flex;
-  gap: var(--space-12);
+.stage-description {
+  color: var(--color-text-secondary);
+  margin: var(--space-8) 0 0 0;
 }
 
-.step-content {
+.stage-sections {
   display: grid;
   gap: var(--space-24);
 }
 
-.step-description {
-  font-size: var(--font-size-lg);
-  line-height: var(--line-height-normal);
-}
-
-.step-key-points, .step-tips {
+.stage-section {
   background: var(--color-background);
   padding: var(--space-20);
   border-radius: var(--radius-md);
-  border-left: 4px solid var(--color-primary);
+  border: 1px solid var(--color-card-border-inner);
 }
 
-.step-key-points h3, .step-tips h3 {
-  margin-top: 0;
-  margin-bottom: var(--space-16);
-  color: var(--color-primary);
+.stage-section h4 {
+  margin-bottom: var(--space-12);
+  color: var(--color-text);
+  font-size: var(--font-size-lg);
 }
 
-.step-key-points ul, .step-tips ul {
+.key-points {
+  list-style: none;
+  padding: 0;
   margin: 0;
-  padding-left: var(--space-20);
 }
 
-.step-key-points li, .step-tips li {
-  margin-bottom: var(--space-8);
-  line-height: var(--line-height-normal);
+.key-points li {
+  padding: var(--space-8) 0;
+  padding-left: var(--space-20);
+  position: relative;
 }
 
-.example-box {
-  background: var(--color-secondary);
-  padding: var(--space-20);
-  border-radius: var(--radius-md);
-  border-left: 4px solid var(--color-warning);
-  font-style: italic;
-  line-height: var(--line-height-normal);
+.key-points li:before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--color-success);
+  font-weight: var(--font-weight-bold);
 }
 
-.step-example h3 {
-  margin-bottom: var(--space-16);
-  color: var(--color-warning);
+.compliance-badges {
+  display: flex;
+  gap: var(--space-8);
+  flex-wrap: wrap;
 }
 
-/* Вікторина */
-.step-quiz {
-  background: var(--color-surface);
-  padding: var(--space-24);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
+.compliance-badge {
+  padding: var(--space-6) var(--space-12);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
 }
 
-.step-quiz h3 {
-  margin-top: 0;
-  margin-bottom: var(--space-20);
-  color: var(--color-primary);
+.compliance-badge--active {
+  background: var(--color-success);
+  color: var(--color-btn-primary-text);
 }
 
-.quiz-question {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-medium);
-  margin-bottom: var(--space-16);
+.compliance-badge--inactive {
+  background: var(--color-secondary);
+  color: var(--color-text-secondary);
 }
 
-.quiz-options {
+.metrics-grid {
   display: grid;
-  gap: var(--space-8);
-  margin-bottom: var(--space-16);
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-16);
 }
 
-.quiz-option {
+.metric-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: var(--space-12);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-base);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-standard);
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-card-border-inner);
 }
 
-.quiz-option:hover {
-  background: var(--color-secondary);
-  border-color: var(--color-primary);
+.metric-label {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
 }
 
-.quiz-option.selected {
-  background: var(--color-primary);
-  color: var(--color-btn-primary-text);
-  border-color: var(--color-primary);
+.metric-value {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
 }
 
-.quiz-option.correct {
-  background: var(--color-success);
-  color: var(--color-btn-primary-text);
-  border-color: var(--color-success);
+.chart-container {
+  height: 300px;
+  margin-top: var(--space-16);
 }
 
-.quiz-option.incorrect {
-  background: var(--color-error);
-  color: var(--color-btn-primary-text);
-  border-color: var(--color-error);
+.model-selector {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-12);
+  margin-bottom: var(--space-20);
 }
 
-.quiz-result {
-  padding: var(--space-12);
-  border-radius: var(--radius-base);
-  margin-bottom: var(--space-16);
-  display: none;
+.model-option {
+  padding: var(--space-16);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-standard);
+  text-align: center;
 }
 
-.quiz-result.show {
-  display: block;
+.model-option:hover {
+  border-color: var(--color-primary);
+  background: var(--color-secondary);
 }
 
-.quiz-result.correct {
+.model-option--selected {
+  border-color: var(--color-primary);
   background: rgba(var(--color-success-rgb), 0.1);
-  border: 1px solid var(--color-success);
-  color: var(--color-success);
 }
 
-.quiz-result.incorrect {
-  background: rgba(var(--color-error-rgb), 0.1);
-  border: 1px solid var(--color-error);
-  color: var(--color-error);
+.alert {
+  padding: var(--space-16);
+  border-radius: var(--radius-md);
+  margin: var(--space-12) 0;
+  border-left: 4px solid;
 }
 
-/* Футер */
-.footer {
-  background: var(--color-surface);
-  border-top: 1px solid var(--color-border);
-  padding: var(--space-20) 0;
-  margin-top: var(--space-32);
+.alert--warning {
+  background: rgba(var(--color-warning-rgb), 0.1);
+  border-left-color: var(--color-warning);
+  color: var(--color-warning);
 }
 
-.footer p {
-  margin: 0;
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
+.alert--success {
+  background: rgba(var(--color-success-rgb), 0.1);
+  border-left-color: var(--color-success);
+  color: var(--color-success);
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-  .workflow-container {
-    flex-direction: column;
+.alert--info {
+  background: rgba(var(--color-info-rgb), 0.1);
+  border-left-color: var(--color-info);
+  color: var(--color-info);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .container {
+    grid-template-columns: 1fr;
     gap: var(--space-24);
   }
   
-  .sidebar {
-    width: 100%;
-    order: 2;
+  .filters {
+    position: static;
+    order: -1;
   }
   
-  .main-panel {
+  .timeline-container {
     order: 1;
   }
   
-  .workflow-diagram {
-    grid-template-columns: 1fr;
-    gap: var(--space-16);
-    padding: var(--space-16);
-  }
-  
-  .step-navigation {
-    flex-direction: column;
-  }
-  
-  .step-navigation .btn {
-    width: 100%;
-    justify-content: center;
+  .content-area {
+    order: 2;
   }
   
-  .header h1 {
-    font-size: var(--font-size-2xl);
+  .overview-stats {
+    grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 480px) {
-  .main-content {
-    padding: var(--space-16) var(--space-12);
+@media (max-width: 768px) {
+  .header__title {
+    font-size: var(--font-size-2xl);
   }
   
-  .workflow-step {
-    padding: var(--space-16);
+  .timeline-stage--left,
+  .timeline-stage--right {
+    justify-content: center;
+    padding: 0 var(--space-16);
   }
   
-  .step-icon {
-    width: 40px;
-    height: 40px;
-    font-size: var(--font-size-lg);
+  .timeline-stage__card {
+    max-width: 100%;
   }
   
-  .step-content {
-    gap: var(--space-20);
+  .stage-header {
+    flex-direction: column;
+    text-align: center;
   }
 }