/* zero2hero admin — Campañas (page-scoped styles; admin.css owns the shared vocabulary) */

/* Compose: snippet toolbar above the HTML textarea */
#admin-campaigns .cmp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
#admin-campaigns .cmp-toolbar .adm-act { min-height: 32px; padding: 0.2rem 0.6rem; }
#admin-campaigns .cmp-toolbar__link { flex: 1 1 200px; min-width: 180px; }
#admin-campaigns .cmp-toolbar__link .form-select { min-height: 32px; padding: 0.2rem 1.8rem 0.2rem 0.6rem; font-size: 0.78rem; }
#admin-campaigns textarea.cmp-body { font-family: var(--adm-font-mono); font-size: 0.82rem; min-height: 260px; }

/* Character counters */
#admin-campaigns .cmp-label { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
#admin-campaigns .cmp-audience { display: flex; flex-wrap: wrap; gap: 0.9rem; }
#admin-campaigns .cmp-audience > div { flex: 1 1 220px; min-width: 0; }
#admin-campaigns .cmp-count {
  font-family: var(--adm-font-mono);
  font-size: 0.66rem;
  color: var(--adm-muted-2);
  letter-spacing: 0.04em;
}
#admin-campaigns .cmp-count.is-over { color: var(--adm-danger); }

/* Preview */
#admin-campaigns .cmp-preview {
  background: var(--adm-surface-2);
  border: 1px solid var(--adm-border);
  border-radius: var(--adm-radius-sm);
  padding: 0.6rem;
  display: flex;
  justify-content: center;
}
#admin-campaigns #preview-frame {
  width: 100%;
  max-width: 100%;
  height: 560px;
  border: 0;
  border-radius: 8px;
  background: #f5f3ff;
  transition: max-width 0.2s ease;
}
#admin-campaigns .cmp-preview.is-mobile #preview-frame { max-width: 380px; }

/* Progress bar (list + detail) */
#admin-campaigns .cmp-progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--adm-surface-3);
  border: 1px solid var(--adm-border);
  overflow: hidden;
  min-width: 90px;
}
#admin-campaigns .cmp-progress__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--adm-violet);
  border-radius: 999px;
  transition: width 0.4s ease;
}
#admin-campaigns .cmp-progress__bar--err { background: var(--adm-danger); }
#admin-campaigns .cmp-progress__meta {
  font-family: var(--adm-font-mono);
  font-size: 0.7rem;
  color: var(--adm-muted);
  margin-top: 0.25rem;
  white-space: nowrap;
}
#admin-campaigns .cmp-progress--lg { height: 12px; }

/* History table */
#admin-campaigns .cmp-row { cursor: pointer; }
#admin-campaigns .cmp-row.is-active > * { background: var(--adm-violet-soft); box-shadow: inset 3px 0 0 var(--adm-violet); }
#admin-campaigns .cmp-subject { font-family: var(--adm-font-head); font-weight: 600; letter-spacing: -0.01em; }
#admin-campaigns .cmp-sub { color: var(--adm-muted); font-size: 0.76rem; }
#admin-campaigns .cmp-actions { display: flex; gap: 0.3rem; justify-content: flex-end; flex-wrap: wrap; }

/* Detail header actions */
#admin-campaigns .cmp-detail-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
#admin-campaigns .cmp-send-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--adm-violet-line);
  background: var(--adm-violet-soft);
  border-radius: var(--adm-radius-sm);
}
#admin-campaigns .cmp-send-row .input-group { flex: 1 1 280px; max-width: 420px; }
#admin-campaigns .cmp-send-row__spacer { flex: 1 1 auto; }

/* Recipients pager */
#admin-campaigns .cmp-pager { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }

/* Audience sample in confirm */
.adm-confirm .cmp-sample { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.adm-confirm .cmp-sample li { font-family: var(--adm-font-mono); font-size: 0.74rem; background: var(--adm-surface-3); border: 1px solid var(--adm-border); border-radius: 6px; padding: 0.15rem 0.45rem; }

/* Mobile */
@media (max-width: 767.98px) {
  #admin-campaigns .cmp-hide-sm { display: none !important; }
  #admin-campaigns .cmp-form-actions .btn { flex: 1 1 auto; }
  #admin-campaigns #preview-frame { height: 440px; }
  #admin-campaigns .cmp-send-row .input-group { max-width: none; }
  #admin-campaigns .cmp-send-row .btn { flex: 1 1 auto; }
  #admin-campaigns .cmp-actions .adm-act { flex: 1 1 auto; justify-content: center; }
}