/* ads-tests.css — Ad Testing UI (Phase 4 v1), src/public/js/ads-tests.js.
 *
 * Every value here is var(--rk-*) — no hardcoded colours/sizes (CODING-STANDARDS
 * §"UI Kit" + §"Design System & UX Principles", MANDATORY). Component classes that
 * ui-kit.css already provides (rk-btn, rk-card, rk-badge, rk-input, rk-tabs,
 * rk-breadcrumbs) are reused directly in the markup — this file only adds the
 * layout/structure ui-kit.css doesn't have: the health strip, spend-vs-cap bar,
 * card grids, variant preview cards, the results table, the connections list and
 * the confirm dialog. Mirrors the scoped-namespace pattern of css/videographer.css
 * (.vg-*) — this file uses .ads-*.
 */

.ads-page {
  max-width: var(--rk-content-wide);
  margin: 0 auto;
  padding: var(--rk-space-2) 0 var(--rk-space-20);
}

/* ── Page head ── */
.ads-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rk-space-4);
  margin-bottom: var(--rk-space-6);
  flex-wrap: wrap;
}
.ads-head h1 { margin: var(--rk-space-2) 0 var(--rk-space-1); }
.ads-head .ads-sub { color: var(--rk-slate); font-size: var(--rk-text-sm); max-width: 640px; }

/* ── Health strip ── */
.ads-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--rk-space-3);
  margin-bottom: var(--rk-space-8);
}
.ads-health-item {
  background: var(--rk-cloud);
  border-radius: var(--rk-radius-lg);
  padding: var(--rk-space-3) var(--rk-space-4);
}
.ads-health-label {
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-slate-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--rk-space-1);
}
.ads-health-value {
  font-size: var(--rk-text-sm);
  font-weight: var(--rk-weight-medium);
}
.ads-health-ok   { color: var(--rk-success); }
.ads-health-bad  { color: var(--rk-slate); }
.ads-health-dash { color: var(--rk-slate-light); }

/* ── Section (row) ── */
.ads-section { margin-top: var(--rk-space-8); }
.ads-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rk-space-3);
  margin-bottom: var(--rk-space-3);
}
.ads-section-head h2 { margin: 0; }
.ads-section-sub { color: var(--rk-slate); font-size: var(--rk-text-sm); }

/* ── Card grid (Needs approval / Running) ── */
.ads-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--rk-space-4);
}
.ads-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rk-space-2);
  margin-bottom: var(--rk-space-2);
}
.ads-card-hypothesis {
  font-size: var(--rk-text-md);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-navy);
  line-height: var(--rk-leading-normal);
  margin-bottom: var(--rk-space-2);
}
.ads-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rk-space-2);
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  margin-bottom: var(--rk-space-3);
}
.ads-card-meta span::after { content: '·'; margin-left: var(--rk-space-2); color: var(--rk-gray-light); }
.ads-card-meta span:last-child::after { content: none; }
.ads-card-cap {
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  margin-bottom: var(--rk-space-3);
}
.ads-card-actions { display: flex; gap: var(--rk-space-2); flex-wrap: wrap; }

/* Minimum 48px touch target — CODING-STANDARDS "no exceptions" (rk-btn only
   guarantees 44px, and only under pointer:coarse). Applied to the primary
   review/approve/dismiss actions. */
.ads-btn-touch { min-height: var(--rk-touch-target); }

/* ── Spend-vs-cap progress bar ── */
.ads-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  margin-bottom: var(--rk-space-1);
}
.ads-progress-row strong { color: var(--rk-navy); font-weight: var(--rk-weight-medium); }
.ads-progress {
  width: 100%;
  height: var(--rk-space-2);
  background: var(--rk-cloud);
  border-radius: var(--rk-radius-pill);
  overflow: hidden;
  margin-bottom: var(--rk-space-2);
}
.ads-progress-fill {
  height: 100%;
  background: var(--rk-blue);
  border-radius: var(--rk-radius-pill);
  transition: width var(--rk-transition);
}
.ads-progress-fill.ads-progress-full { background: var(--rk-warning); }

/* ── Concluded — collapsed list ── */
.ads-concluded-list { display: flex; flex-direction: column; gap: var(--rk-space-1); }
.ads-concluded-row {
  display: flex;
  align-items: center;
  gap: var(--rk-space-3);
  padding: var(--rk-space-3) var(--rk-space-4);
  border-radius: var(--rk-radius-lg);
  border: var(--rk-border);
  cursor: pointer;
  background: var(--rk-white);
  transition: background var(--rk-transition);
}
.ads-concluded-row:hover { background: var(--rk-cloud); }
.ads-concluded-hyp {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--rk-text-sm);
  color: var(--rk-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-concluded-learning {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--rk-text-sm);
  color: var(--rk-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Empty state ── */
.ads-empty {
  text-align: center;
  padding: var(--rk-space-12) var(--rk-space-6);
  border: var(--rk-border);
  border-radius: var(--rk-radius-xl);
  background: var(--rk-cloud);
}
.ads-empty-icon { font-size: 32px; margin-bottom: var(--rk-space-3); }
.ads-empty h3 { margin: 0 0 var(--rk-space-2); }
.ads-empty p { color: var(--rk-slate); max-width: 440px; margin: 0 auto; }
.ads-empty-inline { color: var(--rk-slate); font-size: var(--rk-text-sm); padding: var(--rk-space-3) 0; }

/* ── Detail — audience spec key/value list ── */
.ads-kv { margin: 0; }
.ads-kv-row {
  display: flex;
  gap: var(--rk-space-4);
  padding: var(--rk-space-2) 0;
  border-bottom: 1px solid var(--rk-gray-light);
  font-size: var(--rk-text-sm);
}
.ads-kv-row:last-child { border-bottom: none; }
.ads-kv-row dt { flex: 0 0 160px; color: var(--rk-slate); font-weight: var(--rk-weight-medium); }
.ads-kv-row dd { margin: 0; flex: 1 1 auto; color: var(--rk-navy); word-break: break-word; }

/* ── Variant preview cards ── */
.ads-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--rk-space-4);
}
.ads-variant-card {
  border: var(--rk-border);
  border-radius: var(--rk-radius-lg);
  overflow: hidden;
  background: var(--rk-white);
}
.ads-variant-img { width: 100%; aspect-ratio: 16 / 9; background: var(--rk-silicon); overflow: hidden; }
.ads-variant-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-variant-body { padding: var(--rk-space-3) var(--rk-space-4); }
.ads-variant-label {
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-slate-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--rk-space-1);
}
.ads-variant-headline { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); margin-bottom: var(--rk-space-1); }
.ads-variant-desc { font-size: var(--rk-text-sm); color: var(--rk-slate); line-height: var(--rk-leading-normal); }

/* ── Results table ── */
.ads-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ads-table { width: 100%; border-collapse: collapse; font-size: var(--rk-text-sm); }
.ads-table th, .ads-table td {
  text-align: left;
  padding: var(--rk-space-2) var(--rk-space-3);
  border-bottom: 1px solid var(--rk-gray-light);
  white-space: nowrap;
}
.ads-table th { color: var(--rk-slate); font-weight: var(--rk-weight-medium); font-size: var(--rk-text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.ads-table td { color: var(--rk-navy); }

/* ── Settings — connections list ── */
.ads-conn-list { display: flex; flex-direction: column; gap: var(--rk-space-2); }
.ads-conn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rk-space-3);
  padding: var(--rk-space-3) 0;
  border-bottom: 1px solid var(--rk-gray-light);
  flex-wrap: wrap;
}
.ads-conn-row:last-child { border-bottom: none; }
.ads-conn-main { display: flex; align-items: center; gap: var(--rk-space-3); flex-wrap: wrap; }
.ads-conn-name { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); }

/* ── Settings — Google account picker ("Connect = Provision" step 2:
   the tenant does exactly one more click, picking WHICH account —
   phase-3-4-mcp-and-dashboard.md §"Connect = Provision"). ── */
.ads-acct-list { display: flex; flex-direction: column; gap: var(--rk-space-1); }
.ads-acct-row {
  display: flex;
  align-items: center;
  gap: var(--rk-space-3);
  padding: var(--rk-space-3);
  border-radius: var(--rk-radius-lg);
  border: var(--rk-border);
  cursor: pointer;
  font-size: var(--rk-text-sm);
  color: var(--rk-navy);
}
.ads-acct-row:hover { background: var(--rk-cloud); }
.ads-acct-row input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; }
.ads-acct-id { color: var(--rk-slate); }

/* ── Settings — post-provision confirmation banner ("Connect = Provision"
   result: tag + conversions set up with zero further tenant action). ── */
.ads-provisioned-card { border-color: var(--rk-success); }
.ads-provisioned-head { font-size: var(--rk-text-md); font-weight: var(--rk-weight-medium); color: var(--rk-navy); margin-bottom: var(--rk-space-2); }

/* ── Confirm dialog (scoped — the shared showDeleteConfirm's fixed "Delete"
   button label doesn't fit Approve/Dismiss; design-system rule 6 "Always
   Recoverable" still requires an explicit confirmation step here). ── */
.ads-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 46, 0.45);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rk-space-4);
}
.ads-confirm-modal {
  background: var(--rk-white);
  border-radius: var(--rk-radius-xl);
  padding: var(--rk-space-6);
  width: 420px;
  max-width: 100%;
  box-shadow: var(--rk-shadow-lg);
}
.ads-confirm-modal h3 { margin: 0 0 var(--rk-space-2); }
.ads-confirm-modal p { margin: 0 0 var(--rk-space-5); color: var(--rk-slate); }
.ads-confirm-actions { display: flex; gap: var(--rk-space-2); justify-content: flex-end; flex-wrap: wrap; }

/* ── Mobile-first (375px) ── */
@media (max-width: 640px) {
  .ads-cards, .ads-variant-grid, .ads-health { grid-template-columns: 1fr; }
  .ads-kv-row { flex-direction: column; gap: var(--rk-space-1); }
  .ads-kv-row dt { flex: none; }
  .ads-card-actions { flex-direction: column; }
  .ads-card-actions .rk-btn { width: 100%; }
  .ads-confirm-actions { flex-direction: column-reverse; }
  .ads-confirm-actions .rk-btn { width: 100%; }
}