/**
 * DOPE Validation Pipeline Styles
 * 
 * Components:
 *   - Confidence badges (high/medium/low)
 *   - Validation result containers
 *   - Statistics grids
 *   - Anomaly/warning lists
 *   - Entry forms (field test, retest)
 *   - Data tables (delta, comparison)
 *   - Verdict badges
 *   - Pipeline report
 */

/* ═══════════════════════════════════════════════════════════════
   CONFIDENCE BADGES
   ═══════════════════════════════════════════════════════════════ */

.confidence-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confidence-badge.high {
  background: rgba(0, 255, 100, 0.15);
  color: #00ff64;
  border: 1px solid rgba(0, 255, 100, 0.4);
}

.confidence-badge.medium {
  background: rgba(255, 200, 0, 0.15);
  color: #ffc800;
  border: 1px solid rgba(255, 200, 0, 0.4);
}

.confidence-badge.low {
  background: rgba(255, 80, 80, 0.15);
  color: #ff5050;
  border: 1px solid rgba(255, 80, 80, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATION RESULT CONTAINER
   ═══════════════════════════════════════════════════════════════ */

.validation-result {
  background: var(--dark-bg-2, #1a1a2a);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.validation-result .validation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
}

.validation-result h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan, #00c8ff);
}

.validation-result .interpretation {
  padding: 12px;
  background: var(--dark-bg-1, #0f1923);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary, #ddd);
}

/* ═══════════════════════════════════════════════════════════════
   STATISTICS GRID
   ═══════════════════════════════════════════════════════════════ */

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  background: var(--dark-bg-1, #0f1923);
  border-radius: 6px;
  font-size: 12px;
}

.statistics-grid div {
  color: var(--text-secondary, #aaa);
}

.statistics-grid strong {
  color: var(--text-primary, #fff);
}

/* ═══════════════════════════════════════════════════════════════
   ANOMALY & WARNING LISTS
   ═══════════════════════════════════════════════════════════════ */

.validation-anomalies h5,
.validation-warnings h5,
.validation-recommendations h5 {
  font-size: 12px;
  font-weight: 600;
  margin: 14px 0 8px;
  color: var(--text-primary, #fff);
}

.validation-anomalies ul,
.validation-warnings ul,
.validation-recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.validation-anomalies li,
.validation-warnings li,
.validation-recommendations li {
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
}

.anomaly-critical {
  background: rgba(255, 0, 0, 0.12);
  border-left: 3px solid #ff0000;
  color: #ff6666;
}

.anomaly-error {
  background: rgba(255, 100, 0, 0.12);
  border-left: 3px solid #ff6400;
  color: #ff9933;
}

.anomaly-warning,
.warning {
  background: rgba(255, 200, 0, 0.1);
  border-left: 3px solid #ffc800;
  color: #ffdd66;
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS MESSAGE
   ═══════════════════════════════════════════════════════════════ */

.validation-success {
  padding: 14px;
  background: rgba(0, 255, 100, 0.08);
  border: 1px solid rgba(0, 255, 100, 0.25);
  border-radius: 6px;
  color: #00ff64;
  text-align: center;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRY FORMS
   ═══════════════════════════════════════════════════════════════ */

.field-test-entry,
.retest-entry {
  padding: 16px;
}

.field-test-entry h4,
.retest-entry h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--cyan, #00c8ff);
}

.field-test-entry .hint,
.retest-entry .hint {
  font-size: 11px;
  color: var(--text-secondary, #888);
  margin-bottom: 16px;
}

.measurement-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.measurement-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary, #aaa);
}

.measurement-row input {
  padding: 8px 10px;
  background: var(--dark-bg-1, #0f1923);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  color: var(--text-primary, #fff);
  width: 100px;
  font-size: 12px;
}

.measurement-row input:focus {
  outline: none;
  border-color: var(--cyan-40, rgba(0, 200, 255, 0.4));
}

.conditions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.entry-section {
  margin-bottom: 20px;
}

.entry-section h5 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary, #ccc);
}

.entry-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.measurements-list {
  min-height: 60px;
  margin: 12px 0;
}

.measurement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--dark-bg-2, #1a1a2a);
  margin: 4px 0;
  border-radius: 4px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn-add {
  padding: 8px 14px;
  background: var(--cyan-20, rgba(0, 200, 255, 0.15));
  border: 1px solid var(--cyan-40, rgba(0, 200, 255, 0.4));
  border-radius: 6px;
  color: var(--cyan, #00c8ff);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-add:hover {
  background: var(--cyan-30, rgba(0, 200, 255, 0.25));
}

.btn-primary {
  padding: 10px 20px;
  background: var(--cyan, #00c8ff);
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.btn-secondary:hover {
  border-color: var(--text-secondary, #aaa);
}

/* ═══════════════════════════════════════════════════════════════
   DATA TABLES
   ═══════════════════════════════════════════════════════════════ */

.delta-table,
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 14px;
}

.delta-table th,
.comparison-table th {
  padding: 10px 8px;
  text-align: left;
  background: var(--dark-bg-2, #1a1a2a);
  color: var(--cyan, #00c8ff);
  font-weight: 600;
  border-bottom: 2px solid var(--cyan-40, rgba(0, 200, 255, 0.4));
}

.delta-table td,
.comparison-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
  color: var(--text-primary, #ccc);
}

.delta-table tr:hover,
.comparison-table tr:hover {
  background: rgba(0, 200, 255, 0.03);
}

/* Status row colors */
.status-good {
  background: rgba(0, 255, 100, 0.04);
}
.status-acceptable {
  background: rgba(255, 200, 0, 0.04);
}
.status-concerning {
  background: rgba(255, 100, 0, 0.06);
}
.status-outlier {
  background: rgba(255, 0, 0, 0.06);
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

tr.improved td:last-child {
  color: #00ff64;
}
tr.not-improved td:last-child {
  color: #ff5050;
}

/* ═══════════════════════════════════════════════════════════════
   VERDICT BADGES
   ═══════════════════════════════════════════════════════════════ */

.verdict-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.verdict-badge.excellent {
  background: rgba(0, 255, 100, 0.15);
  color: #00ff64;
  border: 1px solid rgba(0, 255, 100, 0.4);
}

.verdict-badge.good {
  background: rgba(0, 200, 255, 0.15);
  color: #00c8ff;
  border: 1px solid rgba(0, 200, 255, 0.4);
}

.verdict-badge.acceptable {
  background: rgba(255, 200, 0, 0.15);
  color: #ffc800;
  border: 1px solid rgba(255, 200, 0, 0.4);
}

.verdict-badge.improved {
  background: rgba(100, 200, 255, 0.15);
  color: #64c8ff;
  border: 1px solid rgba(100, 200, 255, 0.4);
}

.verdict-badge.poor {
  background: rgba(255, 80, 80, 0.15);
  color: #ff5050;
  border: 1px solid rgba(255, 80, 80, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   PIPELINE REPORT
   ═══════════════════════════════════════════════════════════════ */

.pipeline-report {
  padding: 16px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
}

.report-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--cyan, #00c8ff);
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
  background: var(--dark-bg-1, #0f1923);
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 16px;
}

.stages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.stage-card {
  background: var(--dark-bg-2, #1a1a2a);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  transition: border-color 0.15s;
}

.stage-card.completed {
  border-color: var(--cyan-40, rgba(0, 200, 255, 0.4));
}

.stage-card .stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.stage-number {
  width: 26px;
  height: 26px;
  background: var(--cyan-20, rgba(0, 200, 255, 0.15));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--cyan, #00c8ff);
}

.stage-card.completed .stage-number {
  background: var(--cyan, #00c8ff);
  color: #000;
}

.stage-name {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary, #fff);
}

.stage-status {
  font-size: 14px;
}

.stage-details {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
}

.stage-summary {
  margin-top: 6px;
  font-style: italic;
}

.stage-pending {
  color: var(--text-secondary, #666);
  font-size: 11px;
  font-style: italic;
}

.report-recommendations {
  margin-top: 16px;
  padding: 12px;
  background: var(--dark-bg-1, #0f1923);
  border-radius: 6px;
}

.report-recommendations h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--luminova, #d4ff00);
}

.report-recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.report-recommendations li {
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-primary, #ccc);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
}

.report-recommendations li:last-child {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */

.dope-empty-hint,
.empty-hint {
  color: var(--text-secondary, #666);
  font-style: italic;
  text-align: center;
  padding: 20px;
}