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

/* ── The small button the card emits, defined HERE ───────────────────────────
   Every surface that renders this component loads this stylesheet, and this is the only
   stylesheet all of them load. The Copy, Results and Mark-winner buttons carry `btn-small`, which
   was previously defined only in the two dashboard stylesheets and, for the public result page,
   inside that page's own block. The Submissions screen never had it, and the result page lost it
   when its duplicated primitives were removed — so on both, those buttons rendered as bare
   browser defaults. Defining it here is what makes the buttons match on all four screens.
   Scoped to `.abx-card` so it cannot alter the dashboards' own `btn-small` elsewhere. */
.abx-card .btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}
.abx-card .btn-small:hover { background: var(--bg-secondary); }
.abx-card .btn-small:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.abx-card .btn-small:disabled { opacity: 0.5; cursor: not-allowed; }

/* 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; }

/* ── THE SHARED POST (approved design 2026-08-16) ───────────────────────────
   The body, call to action and hashtags are the same on all five variants — the engine returns
   one of each and attaches them to every one. They render ONCE in the left column instead of
   five times inside the cards. */
.abx-post-field { margin-bottom: 1.15rem; }
.abx-post-field:last-child { margin-bottom: 0; }
.abx-post-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--color-success-700); margin-bottom: 0.3rem; }
.abx-post-value { margin: 0; font-size: 0.9rem; color: var(--text-primary); max-width: 65ch; }

/* 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-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-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)}