Docker

client/src/app/running/running-kpi-dashboard.component.scss

@@ -0,0 +1,244 @@
+.page {
+  display: grid;
+  gap: 18px;
+}
+
+.heading,
+.heading-actions,
+.section-title,
+.recovery-panel {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.heading-actions {
+  gap: 10px;
+}
+
+.eyebrow {
+  color: #687386;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 10px;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+.icon-button {
+  background: #ffffff;
+  border: 1px solid #c8d0dc;
+  border-radius: 6px;
+  height: 40px;
+  width: 40px;
+}
+
+.secondary-link {
+  border: 1px solid #c8d0dc;
+  border-radius: 6px;
+  color: #4e5a6b;
+  font-weight: 800;
+  min-height: 40px;
+  padding: 9px 12px;
+  text-decoration: none;
+}
+
+.notice,
+.empty-state,
+.panel,
+.kpis > div {
+  background: #ffffff;
+  border: 1px solid #dfe4ec;
+  border-radius: 8px;
+}
+
+.notice,
+.empty-state,
+.panel {
+  padding: 18px;
+}
+
+.error {
+  background: #fff0ed;
+  color: #9b2915;
+}
+
+.kpis {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.kpis > div {
+  padding: 16px;
+}
+
+.kpis span,
+.section-title span,
+.progression-card span,
+.progression-card small,
+.pr-row span,
+.recovery-panel p {
+  color: #687386;
+  font-size: 0.82rem;
+}
+
+.kpis strong,
+.progression-card strong {
+  display: block;
+  font-size: 1.25rem;
+  margin-top: 4px;
+}
+
+.green {
+  color: #1c8b76;
+}
+
+.yellow {
+  color: #9a6b00;
+}
+
+.red {
+  color: #d63f4c;
+}
+
+.recovery-panel {
+  gap: 18px;
+}
+
+.recovery-meter {
+  display: grid;
+  gap: 8px;
+  min-width: 220px;
+}
+
+.meter-track {
+  background: #eef2f7;
+  border-radius: 999px;
+  height: 10px;
+  overflow: hidden;
+}
+
+.meter-fill {
+  border-radius: inherit;
+  height: 100%;
+}
+
+.meter-fill.green {
+  background: #1c8b76;
+}
+
+.meter-fill.yellow {
+  background: #d2a21f;
+}
+
+.meter-fill.red {
+  background: #d63f4c;
+}
+
+.chart-grid {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.chart-panel {
+  min-width: 0;
+}
+
+.canvas-wrap {
+  height: 260px;
+  margin-top: 14px;
+  position: relative;
+}
+
+.progression-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  margin-top: 14px;
+}
+
+.progression-card {
+  border: 1px solid #eef2f7;
+  border-radius: 6px;
+  display: grid;
+  gap: 5px;
+  padding: 12px;
+}
+
+.progression-card em {
+  font-style: normal;
+  font-weight: 800;
+}
+
+.positive {
+  color: #1c8b76;
+}
+
+.negative {
+  color: #d63f4c;
+}
+
+.neutral {
+  color: #687386;
+}
+
+.pr-list {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.pr-row {
+  align-items: center;
+  border: 1px solid #eef2f7;
+  border-radius: 6px;
+  color: inherit;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 90px 90px 90px minmax(0, 1fr) 90px 90px;
+  padding: 12px;
+  text-decoration: none;
+}
+
+a.pr-row:hover,
+.secondary-link:hover {
+  background: #f6f8fb;
+}
+
+@media (max-width: 980px) {
+  .kpis,
+  .chart-grid,
+  .progression-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .pr-row {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .heading,
+  .recovery-panel {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .kpis,
+  .chart-grid,
+  .progression-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .recovery-meter {
+    min-width: 0;
+  }
+}