flare-ui/src/app/components/test/test.component.scss

.test-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;

  .header {
    margin-bottom: 32px;

    h2 {
      margin: 0 0 8px 0;
      display: flex;
      align-items: center;
      gap: 12px;

      mat-icon {
        color: #666;
        vertical-align: middle;
      }
    }

    p {
      color: #666;
      margin: 0;
    }
  }

  .actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;

    .run-buttons {
      display: flex;
      gap: 12px;
      align-items: center;

      .selected-count {
        color: #666;
        font-size: 14px;
        margin-left: 8px;
      }
    }

    .select-all {
      margin-left: auto;
      display: flex;
      align-items: center;

      mat-checkbox {
        vertical-align: middle;
      }
    }
  }

  .test-progress {
    margin-bottom: 32px;

    mat-progress-bar {
      margin-bottom: 8px;
    }

    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .current-test {
        color: #666;
        font-size: 14px;
      }

      .test-stats {
        display: flex;
        gap: 16px;
        font-size: 14px;

        .stat {
          display: flex;
          align-items: center;
          gap: 4px;

          mat-icon {
            font-size: 18px;
            width: 18px;
            height: 18px;
            vertical-align: middle;
          }

          &.passed {
            color: #4caf50;
          }

          &.failed {
            color: #f44336;
          }
        }
      }
    }
  }

  .test-categories {
    mat-expansion-panel {
      margin-bottom: 8px;

      mat-expansion-panel-header {
        padding: 0 24px;

        .category-header {
          display: flex;
          align-items: center;
          width: 100%;

          mat-checkbox {
            margin-right: 16px;
            vertical-align: middle;
          }

          .category-info {
            flex: 1;

            .category-name {
              font-weight: 500;
            }
          }

          .category-stats {
            display: flex;
            gap: 12px;
            align-items: center;

            mat-chip {
              min-height: 24px;
              font-size: 12px;
            }
          }
        }
      }

      .test-list {
        padding: 0 24px 16px 24px;

        mat-list-item {
          height: auto;
          padding: 8px 0;

          .test-item {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 16px;

            mat-checkbox {
              flex-shrink: 0;
              vertical-align: middle;
            }

            .test-name {
              flex: 1;
              font-size: 14px;
            }

            .test-result {
              display: flex;
              align-items: center;
              gap: 8px;

              mat-icon {
                font-size: 20px;
                width: 20px;
                height: 20px;
                vertical-align: middle;
              }

              .duration {
                font-size: 12px;
                color: #666;
              }

              &.pass mat-icon {
                color: #4caf50;
              }

              &.fail {
                mat-icon {
                  color: #f44336;
                }

                .error-details {
                  margin-left: 8px;
                  font-size: 12px;
                  color: #f44336;
                  max-width: 300px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }

              &.running mat-icon {
                color: #2196f3;
                animation: spin 1s linear infinite;
              }
            }
          }
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;

    mat-icon {
      font-size: 64px;
      width: 64px;
      height: 64px;
      margin-bottom: 16px;
      opacity: 0.3;
    }

    h3 {
      margin: 0 0 8px 0;
      font-weight: normal;
    }

    p {
      margin: 0;
      font-size: 14px;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// Material overrides
::ng-deep {
  .mat-mdc-list-item {
    height: auto !important;
  }

  .mat-expansion-panel-header {
    height: 64px;
  }

  .mat-expansion-panel-header-title {
    align-items: center;
  }
}