/**
 * Project Sidewalk API Documentation - Validations Component Styles
 *
 * This stylesheet contains styles specific to the Validations component and works in conjunction with the main
 * api-docs.css file.
 */

/* ==========================================================================
   COMPONENT CONTAINERS
   ========================================================================== */

#validations-preview {
  margin: var(--space-lg) 0;
  width: 100%;
}

/* ==========================================================================
   VALIDATION CHARTS LAYOUT
   ========================================================================== */

/* Grid layout for validation charts */
.validation-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* Individual chart container */
.validation-chart-container {
  background-color: #f9f9f9;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.validation-chart-container:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow);
}

/* Chart title styling */
.chart-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-text-heading);
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--space-xs);
}

/* Chart canvas container */
.chart-canvas-container {
  height: 250px;
  width: 100%;
  position: relative;
}

/* ==========================================================================
   VALIDATION SUMMARY SECTION
   ========================================================================== */

/* Summary statistics container */
.validation-summary {
  background-color: var(--color-bg-callout);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  text-align: center;
}

.validation-summary h3 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: var(--color-text-heading);
}

/* Summary stats grid */
.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.summary-stat-item {
  padding: var(--space-sm);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-bg-body);
  border: 1px solid var(--color-border-light);
}

.summary-stat-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-heading);
}

.summary-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

/* ==========================================================================
   LOADING AND ERROR STATES
   ========================================================================== */

.validation-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxl);
  color: var(--color-text-secondary);
}

.validation-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgb(0 0 0 / 10%);
  border-top: 4px solid var(--color-accent-link);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.validation-error {
  color: var(--color-error);
  text-align: center;
  padding: var(--space-xxl);
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error);
  border-radius: var(--border-radius);
  margin: var(--space-lg) 0;
}

/* Empty state for charts with no data */
.chart-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-light);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   VALIDATION RESULT INDICATORS
   ========================================================================== */

/* Legend for validation result types */
.validation-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin: var(--space-md) 0;
  flex-wrap: wrap;
}

.validation-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
}

.validation-legend-color {
  width: 16px;
  height: 16px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-medium);
}

/* Color indicators for validation results */
.result-agree {
  background-color: #4caf50;
}

.result-disagree {
  background-color: #f44336;
}

.result-unsure {
  background-color: #ff9800;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet adjustments */
@media (width <= 992px) {
  .validation-charts-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
  }

  .summary-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

/* Mobile adjustments */
@media (width <= 768px) {
  .validation-charts-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .validation-chart-container {
    padding: var(--space-sm);
  }

  .chart-canvas-container {
    height: 200px;
  }

  .chart-title {
    font-size: var(--font-size-md);
  }

  .validation-legend {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .summary-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Extra small screens */
@media (width <= 480px) {
  .validation-charts-grid {
    gap: var(--space-sm);
  }

  .validation-chart-container {
    padding: var(--space-xs);
  }

  .chart-canvas-container {
    height: 180px;
  }
}