/* ============================================================================
   20-campagnes.css — Onglet admin « Campagnes » (CRM lot 2a)
   ============================================================================ */

/* Barre d'onglets admin : défilement horizontal plutôt que compression des
   boutons / retour à la ligne des libellés quand il y a beaucoup d'onglets
   (10+ depuis l'ajout de Campagnes). Reproduit sur desktop le comportement
   déjà en place en mobile (02-layout.css). 20- charge en dernier → prioritaire.
   Scopé aux enfants directs pour ne pas perturber d'autres .admin-tab. */
.admin-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.admin-tabs > .admin-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Bouton primaire d'ajout : même style que .admin-events-new-btn / .admin-crm-new-btn
   (fond navy, TEXTE cream, hover doré hérité de btn-primary:hover). */
.admin-campaigns-new-btn {
  display: inline-flex;
  align-items: center;
  background: var(--navy-950);
  color: var(--cream);
  padding: 0.85rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
}

/* Aligne le bouton « Envoyer un test » sur le bas de la ligne (à côté du champ) */
.campaign-test-action {
  display: flex;
  align-items: flex-end;
}
.campaign-test-action .btn {
  width: 100%;
}

.campaign-error {
  margin: 0 0 1rem 0;
  padding: 0.85rem 1.1rem;
  background: rgba(196, 69, 61, 0.08);
  border-left: 3px solid var(--red-500);
  color: var(--red-700);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Barre de progression d'envoi --------------------------------------------- */
.campaign-progress {
  margin-top: 1.25rem;
}
.campaign-progress-bar {
  height: 10px;
  background: rgba(76, 145, 80, 0.15);
  border-radius: 6px;
  overflow: hidden;
}
.campaign-progress-bar > span {
  display: block;
  height: 100%;
  background: var(--green-500);
  border-radius: 6px;
  transition: width 0.3s ease;
}
.campaign-progress-label {
  margin: 0.5rem 0 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Historique des campagnes -------------------------------------------------- */
.campaign-history {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.campaign-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.campaign-card-subject {
  font-weight: 600;
  color: var(--ink);
}
.campaign-card-meta {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.campaign-card-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.campaign-card-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Pastilles de statut */
.campaign-status {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.campaign-status--sent {
  background: rgba(76, 145, 80, 0.15);
  color: var(--green-500);
}
.campaign-status--sending,
.campaign-status--partial {
  background: rgba(192, 142, 44, 0.18);
  color: #c08e2c;
}
.campaign-status--draft {
  background: var(--cream-dark);
  color: var(--muted);
}
.campaign-status--failed {
  background: rgba(196, 69, 61, 0.12);
  color: var(--red-700);
}

@media (max-width: 640px) {
  .campaign-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Aperçu du rendu email (lot 2b) ------------------------------------------- */
.campaign-preview-bar {
  margin-top: 0.25rem;
}
.campaign-preview {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}
.campaign-preview iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: #ffffff;
}

/* Tableau dense de l'historique des campagnes (lot 2c) -----------------------
   Colonnes : Sujet | Type | Cible | Statut | Envoyés | Actions.
   Aligné sur le système .admin-table-header--<domaine> / .admin-row. */
.admin-table-header--campaigns,
#campaignHistory .admin-row {
  grid-template-columns: 2fr 0.9fr 1.1fr 0.9fr 0.8fr 168px;
}

/* Iframe de la modale d'aperçu (déclenchée depuis le tableau). */
#campaignPreviewModalFrame {
  display: block;
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #ffffff;
}