/* ============================================
 * Validation Feedback Panel
 * ============================================
 * Displays validation warnings, errors, and suggestions
 * from the AI DM pipeline's Stage 5 validate phase.
 */

/* Panel Container */
.validation-feedback-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

.validation-feedback-panel:not(.visible) {
  opacity: 0.6;
}

.validation-feedback-panel.minimized .validation-content,
.validation-feedback-panel.minimized .validation-suppressed {
  display: none;
}

/* Header */
.validation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.validation-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.validation-icon {
  font-size: 1.1em;
}

.validation-controls {
  display: flex;
  gap: var(--space-1);
}

/* Summary */
.validation-summary {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.validation-count {
  font-family: var(--font-mono);
}

/* Content Area */
.validation-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.validation-section {
  margin-bottom: var(--space-3);
}

.validation-section:last-child {
  margin-bottom: 0;
}

.validation-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.severity-icon {
  font-size: 1em;
}

.dismiss-all-btn {
  margin-left: auto;
  font-size: var(--font-size-xxs);
}

/* Validation List */
.validation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.validation-item:last-child {
  margin-bottom: 0;
}

/* Error Items */
.validation-error {
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  border-left: 3px solid var(--color-danger, #dc3545);
  color: var(--color-danger-text, #dc3545);
}

/* Warning Items */
.validation-warning {
  background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
  border-left: 3px solid var(--color-warning, #ffc107);
  color: var(--color-text-primary);
}

.validation-warning .warning-text {
  flex: 1;
}

.validation-warning .dismiss-btn {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.validation-warning:hover .dismiss-btn {
  opacity: 1;
}

/* Suggestion Items */
.validation-suggestion {
  background: var(--color-info-bg, rgba(13, 202, 240, 0.1));
  border-left: 3px solid var(--color-info, #0dcaf0);
  color: var(--color-text-primary);
}

/* Suppressed Items */
.validation-suppressed {
  background: var(--color-bg-tertiary, rgba(128, 128, 128, 0.1));
  border-left: 3px solid var(--color-text-muted);
  color: var(--color-text-muted);
}

.suppressed-count {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Balance Score Section */
.validation-balance-section {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.balance-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.balance-score-bar {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.balance-score-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.balance-score-fill.score-1 {
  background: var(--color-danger, #dc3545);
}

.balance-score-fill.score-2 {
  background: var(--color-warning, #ffc107);
}

.balance-score-fill.score-3 {
  background: var(--color-info, #0dcaf0);
}

.balance-score-fill.score-4 {
  background: var(--color-success, #28a745);
}

.balance-score-fill.score-5 {
  background: var(--color-accent-primary);
}

.balance-score-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: 30px;
  text-align: right;
}

.balance-assessment {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Suppressed Section */
.validation-suppressed {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.suppressed-list-container {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.suppressed-list .validation-item {
  opacity: 0.7;
}

/* Empty State */
.validation-empty-state {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.validation-empty-state p {
  margin: 0 0 var(--space-2) 0;
}

.validation-empty-state p:first-child {
  font-size: var(--font-size-lg);
  color: var(--color-success, #28a745);
}

.validation-empty-state .text-muted {
  font-size: var(--font-size-xs);
}

/* ============================================
 * Inline Validation Segments (in narrative)
 * ============================================
 */

.validation-alert {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.validation-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.validation-alert-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.validation-alert-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Severity-specific styles */
.validation-alert.severity-info {
  border-color: var(--color-info, #0dcaf0);
}

.validation-alert.severity-info .validation-alert-badge {
  background: var(--color-info-bg, rgba(13, 202, 240, 0.1));
  color: var(--color-info, #0dcaf0);
}

.validation-alert.severity-warning {
  border-color: var(--color-warning, #ffc107);
}

.validation-alert.severity-warning .validation-alert-badge {
  background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
  color: var(--color-warning, #ffc107);
}

.validation-alert.severity-error {
  border-color: var(--color-danger, #dc3545);
}

.validation-alert.severity-error .validation-alert-badge {
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  color: var(--color-danger, #dc3545);
}

.validation-alert.severity-critical {
  border-color: var(--color-danger, #dc3545);
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
}

.validation-alert.severity-critical .validation-alert-badge {
  background: var(--color-danger, #dc3545);
  color: white;
}

.validation-alert-body {
  font-size: var(--font-size-sm);
}

.validation-alert-issues {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-alert-issues li {
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--color-border);
}

.validation-alert-issues li:last-child {
  border-bottom: none;
}

.validation-alert-suggestions {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.validation-alert-suggestions h5 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.validation-alert-suggestions ul {
  list-style: disc;
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.validation-dismiss-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}

.validation-dismiss-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.validation-dismiss-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
}