/* AdsStudio — Stage-One A/B test screen (MP-04). Live theme variables only. */

/* view toggle row */
.abx-viewrow { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0 1rem; flex-wrap: wrap; }
.abx-toggle { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 0.5rem; }
.abx-tab { border: none; background: transparent; color: var(--text-secondary); padding: 0.4rem 0.9rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.abx-tab.active { background: var(--color-primary-600); color: var(--text-inverse); }
.abx-tab[disabled] { opacity: 0.55; cursor: not-allowed; }
.abx-hint { color: var(--text-tertiary); font-size: 0.85rem; }

/* action bar */
.abx-actionbar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.8rem 1rem; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 0.5rem; margin-bottom: 1rem; }
.abx-actiontext { color: var(--text-tertiary); font-size: 0.84rem; flex: 1; min-width: 260px; }
.abx-actiontext a { color: var(--color-primary-600); }
.abx-sort { padding: 0.4rem 0.6rem; border: 1px solid var(--border-primary); border-radius: 0.375rem; background: var(--bg-primary); color: var(--text-primary); font-size: 0.82rem; }
.abx-sort[disabled] { opacity: 0.5; cursor: not-allowed; }

/* winner cards — full width, one per row */
.abx-card { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 0.6rem; padding: 1.05rem 1.2rem; margin-bottom: 1rem; position: relative; }
.abx-card.is-winner { border: 2px solid var(--color-success-500); }
.abx-card.is-dimmed { opacity: 0.6; }
.abx-card.is-dimmed .abx-win-btn { pointer-events: none; opacity: 0.4; }

.abx-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.abx-angle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--bg-primary-subtle, var(--bg-secondary)); color: var(--color-primary-700); border: 1px solid var(--border-primary-light, var(--border-primary)); }
.abx-score { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; }
.abx-top { font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--badge-success-bg, var(--bg-success-light)); color: var(--color-success-700); }
.abx-rec { font-size: 0.75rem; color: var(--color-success-600); font-weight: 600; }
.abx-crown { font-size: 0.72rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--badge-success-bg, var(--bg-success-light)); color: var(--color-success-700); border: 1px solid var(--border-success); }
.abx-actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }

.abx-hook { font-size: 1.12rem; font-weight: 700; color: var(--text-primary); margin: 0.55rem 0 0.25rem; }
.abx-body { color: var(--text-secondary); margin: 0 0 0.45rem; max-width: 80ch; }
.abx-meta-row { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-tertiary); }
.abx-meta-row strong { color: var(--text-secondary); }

/* platform status strip */
.abx-status { display: flex; gap: 1.1rem; margin-top: 0.65rem; flex-wrap: wrap; }
.abx-pstat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-secondary); }
.abx-pstat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-primary); }
.abx-pstat.s-done .dot { background: var(--color-success-500); }
.abx-meta { color: var(--color-primary-600); font-weight: 700; }
.abx-linkedin { color: var(--color-linkedin); font-weight: 700; }

/* stats table — FB above LI, aligned columns */
.abx-table { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--border-primary); overflow-x: auto; }
.abx-grid { display: grid; grid-template-columns: 5.5rem repeat(6, minmax(4.6rem, 1fr)); gap: 0.3rem 0.6rem; align-items: baseline; min-width: 560px; }
.abx-h { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.abx-plat { font-size: 0.78rem; font-weight: 700; }
.abx-v { font-size: 0.84rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.abx-v.best { color: var(--color-success-600); font-weight: 700; }

/* pencil edit mode */
.abx-edit { margin-top: 0.85rem; padding: 0.95rem; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 0.5rem; }
.abx-edit-grid { display: grid; grid-template-columns: auto repeat(2, minmax(110px, 170px)); gap: 0.45rem 0.9rem; align-items: center; }
.abx-edit-grid label { font-size: 0.8rem; color: var(--text-secondary); }
.abx-edit-grid input { width: 100%; padding: 0.4rem 0.55rem; border: 1px solid var(--border-primary); border-radius: 0.375rem; background: var(--bg-primary); color: var(--text-primary); font-size: 0.86rem; box-sizing: border-box; }
.abx-edit-grid input:focus { outline: none; border-color: var(--border-focus); }
.abx-note { font-size: 0.74rem; color: var(--text-tertiary); margin-top: 0.5rem; }
.abx-edit-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.6rem; }

/* live view */
.abx-livenote { margin-bottom: 1rem; padding: 0.9rem 1.1rem; border-radius: 0.5rem; background: var(--bg-success-light); border: 1px solid var(--border-success); color: var(--text-secondary); font-size: 0.88rem; }
.abx-empty { padding: 1.4rem; text-align: center; color: var(--text-tertiary); border: 1px dashed var(--border-primary); border-radius: 0.5rem; }

@media (max-width: 640px) {
    .abx-edit-grid { grid-template-columns: auto repeat(2, 1fr); }
    .abx-actions { margin-left: 0; }
}

/* ── A/B-first modal question (MP-05) ── */
.ab-first-question { border: 1px solid var(--border-primary); border-radius: 0.5rem; padding: 0.75rem 0.9rem; margin-bottom: 1rem; background: var(--bg-secondary); }
.ab-choice-items { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.ab-choice { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border-primary); border-radius: 0.5rem; cursor: pointer; background: var(--bg-primary); }
.ab-choice.is-on { border-color: var(--color-primary-600); box-shadow: 0 0 0 2px var(--bg-primary-subtle, transparent); }
.ab-choice input { margin-top: 0.2rem; }
.ab-choice-note { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--text-secondary); background: var(--bg-primary-subtle, var(--bg-secondary)); border-left: 3px solid var(--color-primary-600); padding: 0.5rem 0.7rem; border-radius: 0.25rem; }

/* A/B lock states on the content grid */
.content-type-item.ab-locked label { font-weight: 700; }
.content-type-item.ab-locked::after { content: "🔒 test"; font-size: 0.68rem; color: var(--text-tertiary); margin-left: 0.4rem; }
.content-type-item.ab-disabled { opacity: 0.5; }

/* MP-10: Send / Import action buttons + extended status states */
.abx-actionbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.abx-send.is-sent{background:var(--color-success-50, var(--bg-secondary));color:var(--color-success-700, var(--text-primary));border-color:var(--color-success-300, var(--border-primary))}
.abx-pstat.s-sent .dot{background:var(--color-primary-600)}
.abx-pstat.s-post .dot{background:var(--color-warning-500, var(--color-primary-600))}

/* MP-10: import preview modal */
.abx-import-modal{max-width:860px}
.abx-import-rows{max-height:46vh;overflow:auto;margin-top:12px;border:1px solid var(--border-primary);border-radius:8px}
.abx-import-table{width:100%;border-collapse:collapse;font-size:13px}
.abx-import-table th,.abx-import-table td{padding:8px 10px;border-bottom:1px solid var(--border-primary);text-align:left}
.abx-import-table th{position:sticky;top:0;background:var(--bg-secondary);z-index:1}
.abx-import-table select{max-width:230px}

/* ── MP-06: live/generated ads render in the A/B card design ──────────────── */
.abx-liveset { margin-bottom: 1.25rem; }
.abx-liveset-head h3 { font-size: 0.95rem; color: var(--text-secondary); margin: 0 0 0.6rem; }
.abx-livelist { display: block; }
/* the live card reuses .abx-card verbatim; no A/B-only controls are rendered */

/* ── Ad send form + grouping panel ─────────────────────────────────────────
   The send asks for the two things only the person can decide (date, theme)
   and confirms the rest. The grouping help replaced a browser alert box, so it
   needs real styling that follows light and dark mode. Colours come from theme
   variables only — nothing hardcoded. */
.abx-send-modal{max-width:520px}
.abx-group-modal{max-width:560px}
.abx-send.is-unknown{background:var(--color-warning-50, var(--bg-secondary));color:var(--color-warning-700, var(--text-primary));border-color:var(--color-warning-300, var(--border-primary))}
a.abx-send{display:inline-block;text-decoration:none;line-height:normal}
a.abx-send:hover{text-decoration:underline}
.abx-field{display:block;margin-top:1rem}
.abx-field-label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-primary);margin-bottom:0.35rem}
.abx-field-hint{display:block;font-size:0.72rem;color:var(--text-tertiary);margin-top:0.3rem}
.abx-field-static{margin:0;font-size:0.86rem;color:var(--text-secondary)}
.abx-input{width:100%;padding:0.55rem 0.7rem;font-size:0.88rem;color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:0.4rem}
.abx-input:focus{outline:none;border-color:var(--border-focus, var(--color-primary-600))}
.abx-group-list{margin:0.8rem 0 0;padding-left:1.1rem;font-size:0.86rem;color:var(--text-secondary)}
.abx-group-list li{margin-bottom:0.55rem}
.abx-group-list strong{color:var(--text-primary)}