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

.test-container {
  h2 {
    margin-bottom: 24px;
  }

  .test-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;

    button {
      mat-icon {
        margin-right: 4px;
      }
    }
  }

  .test-categories {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 24px;

    > mat-checkbox {
      margin-bottom: 16px;
      display: block;
    }

    mat-accordion {
      mat-expansion-panel {
        margin-bottom: 8px;

        mat-checkbox {
          margin-right: 8px;
        }

        .category-status {
          mat-chip {
            font-size: 11px;
            min-height: 20px;
            padding: 2px 8px;

            &.success-chip {
              background-color: #e8f5e9;
              color: #2e7d32;
            }

            &.error-chip {
              background-color: #ffebee;
              color: #c62828;
            }
          }
        }

        mat-list-item {
          .status-PASS { color: #4caf50; }
          .status-FAIL { color: #f44336; }
          .status-RUNNING { color: #ff9800; }
          .status-pending { color: #9e9e9e; }

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

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

          .test-error {
            color: #f44336;
            font-size: 12px;
          }

          .running-icon {
            animation: spin 1s linear infinite;
          }
        }
      }
    }
  }

  .test-results {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 24px;

    h3 {
      margin-top: 0;
      margin-bottom: 16px;
    }

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

    .test-summary {
      display: flex;
      gap: 32px;
      justify-content: center;
      margin-bottom: 16px;

      .summary-item {
        display: flex;
        align-items: center;
        gap: 8px;

        mat-icon {
          &.success { color: #4caf50; }
          &.error { color: #f44336; }
        }

        span {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    .current-test {
      text-align: center;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      mat-icon {
        animation: spin 1s linear infinite;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 4px;

    mat-icon {
      font-size: 64px;
      width: 64px;
      height: 64px;
      color: #e0e0e0;
      margin-bottom: 16px;
    }

    p {
      color: #666;
    }
  }
}

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