@openmrs/esm-report-builder 0.1.1-pre.87

package/src/components/etl-monitor/renderers/monitor-renderers.scss

@@ -0,0 +1,1621 @@
+/**
+ * Monitor Renderers - Shared Styles
+ *
+ * Common styling for all ETL monitor display components
+ */
+
+/* ===== Base Monitor Component Styles ===== */
+
+.monitor-status-card,
+.monitor-summary-card,
+.monitor-progress,
+.monitor-table,
+.monitor-metrics-grid,
+.monitor-error-log,
+.monitor-details {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.monitor-status-card {
+  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+/* ===== Common Header Styles ===== */
+
+.monitor-status-card__header,
+.monitor-summary-card__header,
+.monitor-progress__header,
+.monitor-table__header,
+.monitor-metrics-grid__header,
+.monitor-error-log__header,
+.monitor-details__header {
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
+}
+
+.monitor-status-card__header {
+  padding: 1.25rem 1.5rem 0.75rem 1.5rem;
+  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.monitor-status-card__title,
+.monitor-summary-card__title,
+.monitor-progress__title,
+.monitor-table__title,
+.monitor-metrics-grid__title,
+.monitor-error-log__title,
+.monitor-details__title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #262626;
+}
+
+.monitor-status-card__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #161616;
+  letter-spacing: -0.01em;
+}
+
+/* ===== Subtitle Styles ===== */
+
+.monitor-status-card__subtitle {
+  margin: 0.375rem 0 0 0;
+  font-size: 0.875rem;
+  color: #525252;
+  line-height: 1.4;
+}
+
+/* ===== Common Body Styles ===== */
+
+.monitor-status-card__body,
+.monitor-summary-card__body,
+.monitor-progress__body,
+.monitor-table__body,
+.monitor-metrics-grid__body,
+.monitor-error-log__body,
+.monitor-details__body {
+  padding: 1rem;
+}
+
+.monitor-status-card__body {
+  padding: 1.25rem 1.5rem 1rem 1.5rem;
+}
+
+/* ===== Status Card Styles ===== */
+
+.monitor-status {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  background-color: #f9f9f9;
+  border: 1px solid #f0f0f0;
+
+  &__indicator {
+    flex-shrink: 0;
+
+    .monitor-status__dot {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .monitor-status__icon {
+      font-size: 1.25rem;
+      line-height: 1;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #525252;
+  }
+
+  &__description {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #161616;
+  }
+
+  /* Tone Variants */
+  &--success {
+    background-color: #defbe6;
+    border-color: #a8e6b8;
+
+    .monitor-status__dot {
+      background-color: #198038;
+      box-shadow: 0 0 8px rgba(25, 128, 56, 0.3);
+    }
+
+    .monitor-status__label {
+      color: #0e6027;
+    }
+
+    .monitor-status__description {
+      color: #0f6027;
+    }
+  }
+
+  &--critical {
+    background-color: #ffd7d9;
+    border-color: #ffc1c1;
+
+    .monitor-status__dot {
+      background-color: #da1e28;
+      box-shadow: 0 0 8px rgba(218, 30, 40, 0.3);
+    }
+
+    .monitor-status__label {
+      color: #8a1a24;
+    }
+
+    .monitor-status__description {
+      color: #8a1a24;
+    }
+  }
+
+  &--warning {
+    background-color: #fff1c9;
+    border-color: #ffe8a1;
+
+    .monitor-status__dot {
+      background-color: #f1c21b;
+      box-shadow: 0 0 8px rgba(241, 194, 27, 0.3);
+    }
+
+    .monitor-status__label {
+      color: #8a6d00;
+    }
+
+    .monitor-status__description {
+      color: #8a6d00;
+    }
+  }
+
+  &--info {
+    background-color: #d0e2ff;
+    border-color: #a6c8ff;
+
+    .monitor-status__dot {
+      background-color: #0f62fe;
+      box-shadow: 0 0 8px rgba(15, 98, 254, 0.3);
+    }
+
+    .monitor-status__label {
+      color: #0043ce;
+    }
+
+    .monitor-status__description {
+      color: #0043ce;
+    }
+  }
+
+  &--neutral {
+    background-color: #f4f4f4;
+    border-color: #e0e0e0;
+
+    .monitor-status__dot {
+      background-color: #6f6f6f;
+      box-shadow: 0 0 8px rgba(111, 111, 111, 0.3);
+    }
+
+    .monitor-status__label {
+      color: #262626;
+    }
+
+    .monitor-status__description {
+      color: #262626;
+    }
+  }
+}
+
+.monitor-status-card__fields {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #f0f0f0;
+}
+
+.monitor-status-card__field {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.625rem 0;
+  border-bottom: 1px solid #f5f5f5;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &-label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: #525252;
+    text-transform: none;
+    letter-spacing: 0;
+  }
+
+  &-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+  }
+}
+
+.monitor-status-card__timestamp {
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f0f0f0;
+  font-size: 0.75rem;
+  color: #8d8d8d;
+  text-align: right;
+  font-style: italic;
+}
+
+/* ===== Summary Card Styles ===== */
+
+.monitor-summary-card__metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0.75rem;
+}
+
+.monitor-summary-card__metric {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.625rem;
+  background-color: #f9f9f9;
+  border-radius: 0.375rem;
+
+  &-label {
+    font-size: 0.75rem;
+    color: #6f6f6f;
+  }
+
+  &-value {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #262626;
+  }
+}
+
+/* ===== Progress Styles ===== */
+
+.monitor-progress__bar-container {
+  height: 8px;
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.monitor-progress__bar {
+  height: 100%;
+  background: linear-gradient(90deg, #198038 0%, #4faa6e 100%);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.monitor-progress__info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.875rem;
+}
+
+.monitor-progress__percentage {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #198038;
+}
+
+.monitor-progress__stage {
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+.monitor-progress__idle {
+  text-align: center;
+  padding: 1.5rem 0;
+  color: #8d8d8d;
+
+  &-text {
+    font-size: 0.875rem;
+    color: #8d8d8d;
+  }
+}
+
+.monitor-progress__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.monitor-progress__field {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8125rem;
+
+  &-label {
+    color: #6f6f6f;
+  }
+
+  &-value {
+    color: #262626;
+    font-weight: 500;
+  }
+}
+
+/* ===== Table Styles ===== */
+
+.monitor-table__empty {
+  text-align: center;
+  padding: 2rem;
+  color: #8d8d8d;
+  font-size: 0.875rem;
+}
+
+.monitor-table__element {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+
+  thead {
+    background-color: #f4f4f4;
+    border-bottom: 2px solid #e0e0e0;
+
+    th {
+      padding: 0.625rem 0.75rem;
+      text-align: left;
+      font-weight: 600;
+      color: #262626;
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+
+      &:hover {
+        background-color: #e8e8e8;
+      }
+
+      &.monitor-table__th--sorted {
+        background-color: #e0e0e0;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid #f0f0f0;
+
+      &:hover {
+        background-color: #fafafa;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      td {
+        padding: 0.625rem 0.75rem;
+        color: #262626;
+      }
+    }
+  }
+}
+
+.monitor-table__th-content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.monitor-table__sort-icon {
+  font-size: 0.75rem;
+  color: #198038;
+}
+
+/* ===== Metrics Grid Styles ===== */
+
+.monitor-metrics-grid__items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 0.625rem;
+}
+
+.monitor-metrics-grid__item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background-color: #f9f9f9;
+  border-radius: 0.375rem;
+  text-align: center;
+
+  &-label {
+    font-size: 0.6875rem;
+    color: #6f6f6f;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #262626;
+  }
+}
+
+/* ===== Error Log Styles ===== */
+
+.monitor-error-log__count {
+  font-size: 0.75rem;
+  color: #da1e28;
+  font-weight: 500;
+}
+
+.monitor-error-log__empty {
+  text-align: center;
+  padding: 1.5rem;
+  color: #8d8d8d;
+  font-size: 0.875rem;
+}
+
+.monitor-error-log__items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.monitor-error-log__item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.625rem;
+  border-radius: 0.375rem;
+  border: 1px solid #e0e0e0;
+
+  &-indicator {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-top: 4px;
+  }
+
+  &--critical {
+    background-color: #fff0f0;
+    border-color: #ffc1c1;
+
+    .monitor-error-log__item-indicator {
+      background-color: #da1e28;
+    }
+  }
+
+  &--warning {
+    background-color: #fffbf0;
+    border-color: #ffe8a1;
+
+    .monitor-error-log__item-indicator {
+      background-color: #f1c21b;
+    }
+  }
+
+  &--info {
+    background-color: #f0f6ff;
+    border-color: #c1deff;
+
+    .monitor-error-log__item-indicator {
+      background-color: #0f62fe;
+    }
+  }
+
+  &--neutral {
+    background-color: #f9f9f9;
+
+    .monitor-error-log__item-indicator {
+      background-color: #6f6f6f;
+    }
+  }
+}
+
+.monitor-error-log__item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.monitor-error-log__item-field {
+  font-size: 0.8125rem;
+
+  &-label {
+    color: #6f6f6f;
+    font-weight: 500;
+  }
+
+  &-value {
+    color: #262626;
+  }
+}
+
+/* ===== Details Styles ===== */
+
+.monitor-details__group {
+  margin-bottom: 1rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.monitor-details__group-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #262626;
+  margin: 0 0 0.625rem 0;
+  padding-bottom: 0.375rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.monitor-details__items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.monitor-details__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.25rem;
+
+  &:hover {
+    background-color: #f9f9f9;
+  }
+
+  &-label {
+    color: #6f6f6f;
+  }
+
+  &-value {
+    color: #262626;
+    font-weight: 500;
+  }
+}
+
+/* ===== State Components ===== */
+
+.monitor-empty-state,
+.monitor-loading-state,
+.monitor-error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  text-align: center;
+  gap: 1rem;
+  min-height: 200px;
+}
+
+.monitor-empty-state__icon,
+.monitor-error-state__icon {
+  color: #c6c6c6;
+}
+
+.monitor-empty-state__title,
+.monitor-error-state__title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #262626;
+}
+
+.monitor-empty-state__description,
+.monitor-error-state__description,
+.monitor-loading-state__text {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+.monitor-loading-state__spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #e0e0e0;
+  border-top-color: #198038;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.monitor-fallback {
+  background-color: #f9f9f9;
+  border: 1px dashed #c6c6c6;
+  border-radius: 0.5rem;
+  overflow: hidden;
+
+  &__header {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #f4f4f4;
+  }
+
+  &__content {
+    padding: 1rem;
+  }
+
+  &__note {
+    font-size: 0.8125rem;
+    color: #6f6f6f;
+    margin-bottom: 0.5rem;
+  }
+
+  &__data {
+    font-size: 0.6875rem;
+    background-color: #ffffff;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+}
+
+/* ===== Dark Theme Support ===== */
+
+[data-theme='dark'] {
+  .monitor-status-card,
+  .monitor-summary-card,
+  .monitor-progress,
+  .monitor-table,
+  .monitor-metrics-grid,
+  .monitor-error-log,
+  .monitor-details {
+    background-color: #1a1a1a;
+    border-color: #393939;
+  }
+
+  .monitor-status-card__header,
+  .monitor-summary-card__header,
+  .monitor-progress__header,
+  .monitor-table__header,
+  .monitor-metrics-grid__header,
+  .monitor-error-log__header,
+  .monitor-details__header {
+    background: linear-gradient(180deg, #262626 0%, #1a1a1a 100%);
+    border-color: #393939;
+
+    h4, h5 {
+      color: #f4f4f4;
+    }
+  }
+
+  .monitor-status-card__field,
+  .monitor-summary-card__metric,
+  .monitor-metrics-grid__item,
+  .monitor-progress__field,
+  .monitor-details__item {
+    background-color: #262626;
+  }
+
+  .monitor-status-card__field-value,
+  .monitor-summary-card__metric-value,
+  .monitor-metrics-grid__item-value,
+  .monitor-status__label,
+  .monitor-details__item-value {
+    color: #f4f4f4;
+  }
+
+  .monitor-status-card__field-label,
+  .monitor-summary-card__metric-label,
+  .monitor-metrics-grid__item-label,
+  .monitor-status__description,
+  .monitor-details__item-label {
+    color: #8d8d8d;
+  }
+
+  .monitor-table__element {
+    thead {
+      background-color: #262626;
+      border-color: #393939;
+
+      th {
+        color: #f4f4f4;
+
+        &:hover {
+          background-color: #303030;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        border-color: #262626;
+
+        &:hover {
+          background-color: #303030;
+        }
+
+        td {
+          color: #c6c6c6;
+        }
+      }
+    }
+  }
+
+  .monitor-error-log__item--critical {
+    background-color: #2a1a1a;
+    border-color: #4a2a2a;
+  }
+
+  .monitor-error-log__item--warning {
+    background-color: #2a261a;
+    border-color: #4a3a2a;
+  }
+
+  .monitor-error-log__item--info {
+    background-color: #1a1a2a;
+    border-color: #2a2a4a;
+  }
+
+  .monitor-empty-state__title,
+  .monitor-error-state__title {
+    color: #f4f4f4;
+  }
+
+  .monitor-empty-state__description,
+  .monitor-error-state__description,
+  .monitor-loading-state__text {
+    color: #8d8d8d;
+  }
+
+  .monitor-fallback {
+    background-color: #1a1a1a;
+    border-color: #393939;
+
+    &__header {
+      background-color: #262626;
+    }
+
+    &__data {
+      background-color: #0d0d0d;
+    }
+  }
+}
+
+/* ===== Monitor Preview Wrapper ===== */
+
+.monitor-preview-wrapper {
+  min-height: 300px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #e0e0e0;
+
+  [data-theme='dark'] & {
+    background-color: #1a1a1a;
+    border-color: #393939;
+  }
+}
+
+
+/* ===== Status Card (reference widget style) ===== */
+
+.status-card-premium {
+  --sc-tone: #525252;
+  --sc-tone-soft: #e0e0e0;
+
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  border-radius: 0.75rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+
+  &--success {
+    --sc-tone: #198038;
+    --sc-tone-soft: #defbe6;
+  }
+
+  &--critical {
+    --sc-tone: #da1e28;
+    --sc-tone-soft: #ffd7d9;
+  }
+
+  &--warning {
+    --sc-tone: #8a6100;
+    --sc-tone-soft: #fff1c9;
+  }
+
+  &--info {
+    --sc-tone: #0f62fe;
+    --sc-tone-soft: #d0e2ff;
+  }
+
+  &--neutral {
+    --sc-tone: #525252;
+    --sc-tone-soft: #e0e0e0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.25rem 1.5rem 0 1.5rem;
+  }
+
+  &__icon-tile {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    border-radius: 0.625rem;
+    background-color: var(--sc-tone-soft);
+    color: var(--sc-tone);
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #161616;
+    letter-spacing: -0.01em;
+  }
+
+  &__body {
+    padding: 0.75rem 1.5rem 1.5rem 1.5rem;
+  }
+
+  &__status-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__status-value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--sc-tone);
+    line-height: 1.2;
+  }
+
+  &__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--sc-tone);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-tone) 18%, transparent);
+  }
+
+  &__description {
+    margin: 0.375rem 0 0 0;
+    font-size: 0.875rem;
+    color: #525252;
+    line-height: 1.45;
+  }
+
+  &__footer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  &__meta-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: #6f6f6f;
+
+    svg {
+      color: #8d8d8d;
+    }
+  }
+
+  &__meta-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+[data-theme='dark'] {
+  .status-card-premium {
+    background: #1a1a1a;
+    border-color: #393939;
+
+    &--success {
+      --sc-tone: #42be65;
+      --sc-tone-soft: rgba(66, 190, 101, 0.15);
+    }
+
+    &--critical {
+      --sc-tone: #fa4d56;
+      --sc-tone-soft: rgba(250, 77, 86, 0.15);
+    }
+
+    &--warning {
+      --sc-tone: #f1c21b;
+      --sc-tone-soft: rgba(241, 194, 27, 0.15);
+    }
+
+    &--info {
+      --sc-tone: #4589ff;
+      --sc-tone-soft: rgba(69, 137, 255, 0.15);
+    }
+
+    &--neutral {
+      --sc-tone: #8d8d8d;
+      --sc-tone-soft: rgba(141, 141, 141, 0.15);
+    }
+
+    &__title {
+      color: #f4f4f4;
+    }
+
+    &__description {
+      color: #8d8d8d;
+    }
+
+    &__meta-value {
+      color: #f4f4f4;
+    }
+
+    &__footer {
+      border-top-color: #393939;
+    }
+  }
+}
+
+/* ===== Reference widget styles (docs/image-series-monitor/widgets) ===== */
+
+/* Empty state tones (widget #4: "no errors" is a positive state) */
+.monitor-empty-state__icon {
+  color: #8d8d8d;
+
+  &--success {
+    color: #24a148;
+  }
+
+  &--critical {
+    color: #da1e28;
+  }
+
+  &--warning {
+    color: #f1c21b;
+  }
+
+  &--info {
+    color: #0f62fe;
+  }
+}
+
+/* Metric Summary Card (final design: widgets/metrics_final.png) */
+.metrics-grid-renderer {
+  // Header: icon tile + title + subtitle
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    margin-bottom: 1rem;
+  }
+
+  &__head-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    height: 52px;
+    border-radius: 0.75rem;
+    flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__head-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  &__head-title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #161616;
+    letter-spacing: -0.01em;
+  }
+
+  &__head-sub {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #6f6f6f;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+
+  &__grid--hero {
+    grid-template-columns: 1fr;
+  }
+
+  // Tile: colored icon tile LEFT, label/value/subtitle stacked right
+  &__tile {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 0.625rem;
+    text-align: left;
+    min-width: 0;
+  }
+
+  &__tile-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 0.625rem;
+    background-color: #f4f4f4;
+    color: #525252;
+    flex-shrink: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__tile-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  // labels wrap instead of truncating — tiles are narrow at thumbnail scale
+  &__tile-label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: #525252;
+    line-height: 1.25;
+  }
+
+  &__tile-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #161616;
+    line-height: 1.15;
+    overflow-wrap: anywhere;
+  }
+
+  &__tile-sub {
+    font-size: 0.75rem;
+    color: #8d8d8d;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 0.875rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f0f0f0;
+    font-size: 0.8125rem;
+    color: #6f6f6f;
+
+    svg {
+      color: #8d8d8d;
+    }
+  }
+}
+
+/* Widget #5: inline progress bar cells + table footer */
+.table-renderer__progress {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 120px;
+
+  &-label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #161616;
+    min-width: 38px;
+  }
+
+  &-track {
+    display: inline-block;
+    flex: 1;
+    height: 6px;
+    border-radius: 3px;
+    background-color: #e0e0e0;
+    overflow: hidden;
+  }
+
+  &-fill {
+    display: block;
+    height: 100%;
+    border-radius: 3px;
+    background-color: #198038;
+  }
+}
+
+.table-renderer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f0f0f0;
+
+  &-count {
+    font-size: 0.75rem;
+    color: #6f6f6f;
+  }
+
+  &-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #0f62fe;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Widget #8: datetime with relative-time subline */
+.details-renderer__timestamp {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.details-renderer__timestamp-sub {
+  font-size: 0.75rem;
+  color: #6f6f6f;
+}
+
+/* Widget #7: summary badges sit on their own line */
+.monitor-summary-card__metric-value .cds--tag {
+  margin: 0;
+}
+
+[data-theme='dark'] {
+  .monitor-empty-state__icon--success {
+    color: #42be65;
+  }
+
+  .monitor-empty-state__icon--critical {
+    color: #fa4d56;
+  }
+
+  .monitor-empty-state__icon--warning {
+    color: #f1c21b;
+  }
+
+  .monitor-empty-state__icon--info {
+    color: #4589ff;
+  }
+
+  .table-renderer__progress-label {
+    color: #f4f4f4;
+  }
+
+  .table-renderer__progress-track {
+    background-color: #393939;
+  }
+
+  .table-renderer__footer {
+    border-top-color: #393939;
+
+    &-count {
+      color: #8d8d8d;
+    }
+  }
+
+  .table-renderer__footer-link {
+    color: #78a9ff;
+  }
+
+  .details-renderer__timestamp-sub {
+    color: #8d8d8d;
+  }
+}
+
+/* ===== Log / Timeline Card ===== */
+
+.log-renderer {
+  &__title {
+    margin: 0 0 0.75rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #161616;
+  }
+
+  &__empty {
+    padding: 1rem 0;
+    font-size: 0.8125rem;
+    color: #8d8d8d;
+  }
+
+  &__timeline {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__entry {
+    position: relative;
+    display: flex;
+    align-items: baseline;
+    gap: 0.75rem;
+    padding: 0.5rem 0 0.5rem 1.25rem;
+
+    // vertical line
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background-color: #e0e0e0;
+    }
+
+    &:first-child::before {
+      top: 50%;
+    }
+
+    &:last-child::before {
+      bottom: 50%;
+    }
+
+    &:only-child::before {
+      display: none;
+    }
+
+    // event dot
+    &::after {
+      content: '';
+      position: absolute;
+      left: -3px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #24a148;
+      box-shadow: 0 0 0 2px #ffffff;
+    }
+  }
+
+  &__time {
+    flex-shrink: 0;
+    min-width: 76px;
+    font-size: 0.75rem;
+    color: #6f6f6f;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__message {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: #161616;
+    min-width: 0;
+  }
+}
+
+[data-theme='dark'] {
+  .log-renderer__title,
+  .log-renderer__message {
+    color: #f4f4f4;
+  }
+
+  .log-renderer__time,
+  .log-renderer__empty {
+    color: #8d8d8d;
+  }
+
+  .log-renderer__entry {
+    &::before {
+      background-color: #393939;
+    }
+
+    &::after {
+      background-color: #42be65;
+      box-shadow: 0 0 0 2px #1a1a1a;
+    }
+  }
+}
+
+/* ===== Status card header pill (reference sheet: "Running" badge) ===== */
+
+.status-card-premium__pill {
+  margin-left: auto;
+  padding: 0.25rem 0.625rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background-color: var(--sc-tone-soft, #e0e0e0);
+  color: var(--sc-tone, #525252);
+  white-space: nowrap;
+}
+
+/* ===== Time Series Card (widgets/timeseries.png) ===== */
+
+.time-series-renderer {
+  --ts-accent: #1a7f37;
+  --ts-surface: #ffffff;
+  --ts-grid: #e0e0e0;
+  --ts-muted: #6f6f6f;
+  --ts-up: #24a148;
+  --ts-down: #da1e28;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 0.625rem;
+    background-color: rgba(138, 63, 252, 0.1);
+    color: #8a3ffc;
+    flex-shrink: 0;
+  }
+
+  &__head-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  &__label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: #525252;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__value {
+    font-size: 1.625rem;
+    font-weight: 700;
+    color: #161616;
+    line-height: 1.1;
+  }
+
+  &__head-delta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.125rem;
+    margin-left: auto;
+  }
+
+  &__delta {
+    font-size: 0.8125rem;
+    font-weight: 600;
+
+    &--up {
+      color: var(--ts-up);
+    }
+
+    &--down {
+      color: var(--ts-down);
+    }
+  }
+
+  &__delta-note {
+    font-size: 0.6875rem;
+    color: #8d8d8d;
+  }
+
+  &__empty {
+    padding: 1rem 0;
+    font-size: 0.8125rem;
+    color: #8d8d8d;
+  }
+
+  &__chart {
+    position: relative;
+
+    svg {
+      display: block;
+      overflow: visible;
+
+      &:focus-visible {
+        outline: 2px solid #0f62fe;
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  // hairline solid gridlines, recessive
+  &__grid {
+    stroke: var(--ts-grid);
+    stroke-width: 1;
+  }
+
+  &__tick {
+    fill: var(--ts-muted);
+    font-size: 10px;
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  &__crosshair {
+    stroke: var(--ts-muted);
+    stroke-width: 1;
+  }
+
+  // 2px line, round caps, series hue
+  &__line {
+    fill: none;
+    stroke: var(--ts-accent);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  // series hue wash ~10%
+  &__area {
+    fill: var(--ts-accent);
+    opacity: 0.1;
+  }
+
+  // >=8px dot with a 2px surface ring
+  &__dot {
+    fill: var(--ts-accent);
+    stroke: var(--ts-surface);
+    stroke-width: 2;
+  }
+
+  &__tooltip {
+    position: absolute;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+    padding: 0.375rem 0.625rem;
+    background: #161616;
+    border-radius: 0.375rem;
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 3;
+  }
+
+  // values lead, labels follow
+  &__tooltip-value {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #ffffff;
+  }
+
+  &__tooltip-time {
+    font-size: 0.6875rem;
+    color: #c6c6c6;
+  }
+}
+
+[data-theme='dark'] {
+  .time-series-renderer {
+    --ts-accent: #42be65;
+    --ts-surface: #1a1a1a;
+    --ts-grid: #393939;
+    --ts-muted: #8d8d8d;
+    --ts-up: #42be65;
+    --ts-down: #fa4d56;
+
+    &__label {
+      color: #a8a8a8;
+    }
+
+    &__value {
+      color: #f4f4f4;
+    }
+
+    &__delta-note {
+      color: #8d8d8d;
+    }
+
+    &__empty {
+      color: #8d8d8d;
+    }
+
+    &__tooltip {
+      background: #262626;
+    }
+  }
+
+  .metrics-grid-renderer__tile {
+    background: #1a1a1a;
+    border-color: #393939;
+  }
+
+  .metrics-grid-renderer__head-title,
+  .metrics-grid-renderer__tile-value {
+    color: #f4f4f4;
+  }
+
+  .metrics-grid-renderer__head-sub,
+  .metrics-grid-renderer__tile-label {
+    color: #8d8d8d;
+  }
+
+  .metrics-grid-renderer__tile-sub {
+    color: #6f6f6f;
+  }
+
+  .metrics-grid-renderer__footer {
+    border-top-color: #393939;
+    color: #8d8d8d;
+  }
+}