/* =====================================================================
   DedicaQR — Sprint 19 CSS
   A/B Tests admin: badges, variants editor, results table, decision
   panel, sample calculator.
   Aditivo sobre Sprints 1-18.
   ===================================================================== */

:root {
  --ab-running:    #059669;
  --ab-running-bg: #d1fae5;
  --ab-paused:     #d97706;
  --ab-paused-bg:  #fef3c7;
  --ab-draft:      #6b7280;
  --ab-draft-bg:   #f3f4f6;
  --ab-completed:  #1d4ed8;
  --ab-completed-bg:#dbeafe;
  --ab-archived:   #9ca3af;
  --ab-archived-bg:#f5f5f5;
  --ab-lift-pos:   #059669;
  --ab-lift-neg:   #dc2626;
  --ab-lift-zero:  #6b7280;
  --ab-winner:     #ca8a04;
  --ab-winner-bg:  #fef9c3;
}

/* =====================================================================
   STAT ROW
   ===================================================================== */

.ab-stat-row { margin: 14px 0 18px; }

/* =====================================================================
   STATUS BADGES
   ===================================================================== */

.ab-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}
.ab-status-running    { background: var(--ab-running-bg);   color: var(--ab-running); }
.ab-status-paused     { background: var(--ab-paused-bg);    color: var(--ab-paused); }
.ab-status-draft      { background: var(--ab-draft-bg);     color: var(--ab-draft); }
.ab-status-completed  { background: var(--ab-completed-bg); color: var(--ab-completed); }
.ab-status-archived   { background: var(--ab-archived-bg);  color: var(--ab-archived); }

/* =====================================================================
   TABLE LIST
   ===================================================================== */

.ab-table td { vertical-align: top; font-size: 13px; }
.ab-table code { background: var(--dqr-bg, #FFF8F5); padding: 1px 6px; border-radius: 3px; font-size: 11px; }

/* =====================================================================
   VARIANTS EDITOR
   ===================================================================== */

.ab-variants-editor { margin: 10px 0 14px; }

.ab-variant-row {
  background: white;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.ab-variant-head {
  display: grid;
  grid-template-columns: 32px 90px 1fr 1fr 90px 32px;
  gap: 8px;
  align-items: center;
}
.ab-variant-num {
  background: var(--dqr-brand, #C9184A);
  color: white;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.ab-control-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  cursor: pointer;
}
.ab-control-toggle input { margin: 0; }
.ab-variant-slug,
.ab-variant-name {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
}
.ab-variant-slug { font-family: 'SFMono-Regular', Consolas, monospace; }
.ab-weight-label {
  font-size: 11px;
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ab-variant-weight {
  width: 50px;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
.ab-variant-rm {
  background: var(--ab-lift-neg);
  color: white;
  border: 0;
  border-radius: 6px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.ab-variant-rm:hover { opacity: 0.85; }

.ab-variant-config {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}
.ab-variant-config summary {
  cursor: pointer;
  font-size: 12px;
  color: #666;
  user-select: none;
}
.ab-variant-config textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  margin-top: 6px;
  background: #fafafa;
}

.ab-mini-calc {
  margin-top: 16px;
  padding: 12px;
  background: var(--dqr-bg, #FFF8F5);
  border-radius: 8px;
}
.ab-mini-calc h4 { margin: 0 0 6px; font-size: 13px; }

/* =====================================================================
   DECISION PANEL (show.php)
   ===================================================================== */

.ab-decision-panel {
  display: flex;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 12px;
  margin: 18px 0 24px;
  border: 1px solid;
  flex-wrap: wrap;
}
.ab-decision-content { flex: 1; min-width: 280px; }
.ab-decision-content h3 { margin: 0 0 6px; font-size: 16px; }
.ab-decision-content p { margin: 0; line-height: 1.5; font-size: 14px; }

.ab-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  align-self: flex-start;
}

.ab-decision--wait_more_sample {
  background: var(--ab-paused-bg);
  border-color: #fcd34d;
  color: #78350f;
}
.ab-decision--no_significant_winner {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #78350f;
}
.ab-decision--promote_variant {
  background: var(--ab-running-bg);
  border-color: #6ee7b7;
  color: #064e3b;
}
.ab-decision--no_data {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

/* =====================================================================
   RESULTS TABLE (show.php)
   ===================================================================== */

.ab-results-table td { vertical-align: middle; }

.ab-pvalue-sig { color: var(--ab-running); font-weight: 700; }

.ab-variant-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.ab-control-tag,
.ab-winner-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-left: 6px;
  vertical-align: middle;
}
.ab-control-tag { background: #e5e7eb; color: #374151; }
.ab-winner-tag  { background: var(--ab-winner-bg); color: var(--ab-winner); }

.ab-variant-winner {
  background: #fffbeb;
  position: relative;
}
.ab-variant-winner td:first-child {
  border-left: 4px solid var(--ab-winner);
}

.ab-rate-bar {
  margin-top: 4px;
}

.ab-lift-pos {
  color: var(--ab-lift-pos);
  font-weight: 700;
}
.ab-lift-neg {
  color: var(--ab-lift-neg);
  font-weight: 700;
}
.ab-lift-zero {
  color: var(--ab-lift-zero);
}

.ab-sig-yes {
  color: var(--ab-running);
  font-weight: 600;
  font-size: 12px;
}
.ab-sig-no {
  color: #888;
  font-size: 12px;
}

/* =====================================================================
   CHART
   ===================================================================== */

.ab-chart-wrap {
  background: white;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 18px;
  margin: 12px 0 24px;
  min-height: 320px;
}

/* =====================================================================
   CODE SNIPPET
   ===================================================================== */

.ab-code-snippet {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, monospace;
  margin: 8px 0 0;
}

/* =====================================================================
   SAMPLE CALCULATOR
   ===================================================================== */

.ab-calc-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ab-calc-input-group input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.ab-calc-input-group span {
  font-weight: 700;
  color: #666;
  font-size: 14px;
}

.ab-calc-results {
  background: white;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 20px;
  position: sticky;
  top: 16px;
}
.ab-calc-results h3 { margin: 0 0 16px; font-size: 16px; }

.ab-calc-big-number {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--dqr-bg, #FFF8F5) 0%, white 100%);
  border-radius: 12px;
  border: 2px solid var(--dqr-pink, #FFB3C1);
  margin-bottom: 18px;
}
.ab-calc-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.ab-calc-value {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--dqr-brand, #C9184A);
  line-height: 1;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}

.ab-calc-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.ab-calc-table td {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.ab-calc-table td:last-child { text-align: right; }
.ab-calc-table tr.ab-calc-highlight {
  background: var(--ab-running-bg);
}
.ab-calc-table tr.ab-calc-highlight td {
  padding: 12px 8px;
  border-bottom: 0;
  border-radius: 6px;
}

.ab-calc-hint {
  margin-top: 16px;
  padding: 12px;
  background: #fffbeb;
  border-left: 3px solid var(--ab-winner);
  border-radius: 6px;
  font-size: 12px;
}
.ab-calc-hint ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.ab-calc-hint li {
  margin: 3px 0;
  color: #78350f;
}

.ab-calc-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  background: #fafafa;
  border-radius: 12px;
  border: 2px dashed #ddd;
}
.ab-calc-placeholder p { margin: 6px 0; }

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

@media (max-width: 1024px) {
  .ab-decision-panel { flex-direction: column; }
  .ab-decision-actions { width: 100%; }
}

@media (max-width: 768px) {
  .ab-stat-row { grid-template-columns: repeat(2, 1fr); }
  .ab-variant-head {
    grid-template-columns: 28px 1fr 1fr 28px;
    gap: 6px;
  }
  .ab-variant-head .ab-control-toggle { grid-column: 1 / -1; order: 99; padding-top: 4px; }
  .ab-weight-label { grid-column: 1 / -1; order: 100; }
  .ab-results-table { font-size: 11px; }
  .ab-results-table th, .ab-results-table td { padding: 6px 4px; }
  .ab-calc-results { position: static; }
  .ab-calc-value { font-size: 2rem; }
}

@media (max-width: 480px) {
  .ab-stat-row { grid-template-columns: 1fr; }
  .ab-decision-panel { padding: 14px; }
  .ab-decision-actions .btn,
  .ab-decision-actions .btn-primary { width: 100%; }
}