/* ── Email Campaigns — Phase 3 MC2.0 ────────────────────────────────────────
   Prefix: ec-
   Light theme via CSS custom properties. Dark mode via @media prefers-color-scheme.
   ADR-028: UI only — all data ops delegate to SocialPlannerService.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Shell ──────────────────────────────────────────────────────────────── */
.ec-shell {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--font-main, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--text-primary, #1a1a1a);
}

.ec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.ec-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
  margin: 0;
}

.ec-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Filter Tabs ─────────────────────────────────────────────────────────── */
.ec-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-light, #e5e7eb);
  margin-bottom: 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ec-tabs::-webkit-scrollbar { display: none; }

.ec-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.ec-tab:hover { color: var(--text-primary, #1a1a1a); }
.ec-tab.active {
  color: var(--gold, #c9a84c);
  border-bottom-color: var(--gold, #c9a84c);
  font-weight: 600;
}

.ec-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--border-light, #e5e7eb);
  color: var(--text-secondary, #6b7280);
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 6px;
}
.ec-tab.active .ec-tab-badge {
  background: var(--gold, #c9a84c);
  color: #fff;
}

/* ── Card Grid ───────────────────────────────────────────────────────────── */
.ec-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.ec-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ec-card:hover {
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 2px 8px rgba(201,168,76,0.12);
}

.ec-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ec-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary, #1a1a1a);
  line-height: 1.3;
}

.ec-card-subject {
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ec-campaign-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--gold-faint, #fef9ec);
  color: var(--gold-dark, #a07c2e);
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid var(--gold-light, #f0d987);
}

.ec-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--blue-faint, #eff6ff);
  color: var(--blue-mid, #1d4ed8);
  font-size: 0.72rem;
  font-weight: 500;
}

.ec-card-dates {
  font-size: 0.75rem;
  color: var(--text-tertiary, #9ca3af);
  margin-top: 8px;
}

/* ── Status Pills ────────────────────────────────────────────────────────── */
.ec-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ec-status-draft     { background: #f3f4f6; color: #4b5563; }
.ec-status-scheduled { background: #eff6ff; color: #1d4ed8; }
.ec-status-sent      { background: #ecfdf5; color: #065f46; }
.ec-status-archived  { background: #fafafa; color: #9ca3af; }

/* ── Empty State ─────────────────────────────────────────────────────────── */
.ec-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary, #6b7280);
}
.ec-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.ec-empty h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; color: var(--text-primary, #1a1a1a); }
.ec-empty p  { margin: 0; font-size: 0.875rem; }

/* ── Detail Shell ────────────────────────────────────────────────────────── */
.ec-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 16px;
  transition: border-color 0.15s;
}
.ec-back-btn:hover { border-color: var(--gold, #c9a84c); color: var(--text-primary, #1a1a1a); }

.ec-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ec-detail-title { font-size: 1.35rem; font-weight: 700; color: var(--text-primary, #1a1a1a); margin: 0 0 6px; }
.ec-detail-sub   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ec-detail-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border-light, #e5e7eb);
  margin-bottom: 22px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ec-detail-tabs::-webkit-scrollbar { display: none; }

.ec-detail-tab {
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.ec-detail-tab:hover { color: var(--text-primary, #1a1a1a); }
.ec-detail-tab.active {
  color: var(--gold, #c9a84c);
  border-bottom-color: var(--gold, #c9a84c);
  font-weight: 600;
}

/* ── Overview Grid ───────────────────────────────────────────────────────── */
.ec-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.ec-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ec-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #9ca3af);
}
.ec-field-value {
  font-size: 0.9rem;
  color: var(--text-primary, #1a1a1a);
  word-break: break-word;
}
.ec-field-empty { color: var(--text-tertiary, #9ca3af); font-style: italic; }

/* ── Merge Field Strip ───────────────────────────────────────────────────── */
.ec-merge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  background: var(--gold-faint, #fef9ec);
  border: 1px solid var(--gold-light, #f0d987);
  border-radius: 8px;
  margin-bottom: 20px;
}
.ec-merge-label { font-size: 0.8rem; font-weight: 600; color: var(--gold-dark, #a07c2e); }
.ec-merge-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--gold, #c9a84c);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: monospace;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ec-merge-chip:hover { opacity: 0.85; }

/* ── Compose Tab ─────────────────────────────────────────────────────────── */
.ec-compose-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ec-compose-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 6px;
}
.ec-compose-field input,
.ec-compose-field textarea,
.ec-compose-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface, #fff);
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}
.ec-compose-field input:focus,
.ec-compose-field textarea:focus,
.ec-compose-field select:focus {
  outline: none;
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}
.ec-compose-field textarea {
  min-height: 200px;
  resize: vertical;
  line-height: 1.6;
}
.ec-compose-field .ec-body-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ec-compose-field .ec-body-toolbar button {
  padding: 4px 10px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 4px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  transition: border-color 0.15s;
}
.ec-compose-field .ec-body-toolbar button:hover {
  border-color: var(--gold, #c9a84c);
  color: var(--text-primary, #1a1a1a);
}

/* ── Preview Tab ─────────────────────────────────────────────────────────── */
.ec-preview-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ec-preview-mode-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  transition: all 0.15s;
}
.ec-preview-mode-btn.active {
  background: var(--gold, #c9a84c);
  border-color: var(--gold, #c9a84c);
  color: #fff;
  font-weight: 600;
}

.ec-preview-frame-wrap {
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  transition: max-width 0.2s;
}
.ec-preview-desktop { max-width: 100%; }
.ec-preview-mobile  { max-width: 420px; margin: 0 auto; }

.ec-preview-frame-wrap iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  display: block;
}

/* ── Send Tab (disconnected state) ───────────────────────────────────────── */
.ec-disconnected {
  border: 2px dashed var(--border-light, #e5e7eb);
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.ec-disconnected-icon { font-size: 2.5rem; margin-bottom: 12px; }
.ec-disconnected h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; color: var(--text-primary, #1a1a1a); }
.ec-disconnected p  { margin: 0 0 20px; font-size: 0.875rem; color: var(--text-secondary, #6b7280); }

.ec-provider-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.ec-provider-card {
  padding: 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
}
.ec-provider-card .ec-provider-name { font-weight: 600; color: var(--text-primary, #1a1a1a); margin-bottom: 2px; }

.ec-dnc-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fef9ec;
  border: 1px solid #f0d987;
  font-size: 0.8rem;
  color: var(--text-secondary, #6b7280);
  text-align: left;
  max-width: 600px;
  margin: 16px auto 0;
}
.ec-dnc-note strong { color: var(--gold-dark, #a07c2e); }

/* ── Results Tab ─────────────────────────────────────────────────────────── */
.ec-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.ec-metric-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.ec-metric-value { font-size: 1.8rem; font-weight: 700; color: var(--text-primary, #1a1a1a); line-height: 1; margin-bottom: 4px; }
.ec-metric-label { font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.ec-metric-pending { color: var(--text-tertiary, #9ca3af); font-style: italic; font-size: 1.1rem; }

/* ── Templates Tab ───────────────────────────────────────────────────────── */
.ec-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.ec-template-card {
  padding: 16px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ec-template-card:hover {
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 2px 8px rgba(201,168,76,0.1);
}
.ec-template-card.builtin { border-left: 3px solid var(--gold, #c9a84c); }
.ec-template-card.saved   { border-left: 3px solid var(--blue-mid, #3b82f6); }
.ec-template-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.ec-template-type { font-size: 0.75rem; color: var(--text-secondary, #6b7280); margin-bottom: 6px; }
.ec-template-desc { font-size: 0.8rem; color: var(--text-secondary, #6b7280); }

/* ── Action Buttons ──────────────────────────────────────────────────────── */
.ec-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--gold, #c9a84c);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ec-btn-primary:hover { opacity: 0.9; }

.ec-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--surface, #fff);
  color: var(--text-primary, #1a1a1a);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}
.ec-btn-secondary:hover { border-color: var(--gold, #c9a84c); }

.ec-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--surface, #fff);
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}
.ec-btn-danger:hover { border-color: #dc2626; }

.ec-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ec-status-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.ec-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ec-modal {
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: 28px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ec-modal h3 {
  margin: 0 0 20px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #1a1a1a);
}
.ec-modal-field {
  margin-bottom: 14px;
}
.ec-modal-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 5px;
}
.ec-modal-field input,
.ec-modal-field textarea,
.ec-modal-field select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-primary, #1a1a1a);
  background: var(--surface, #fff);
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}
.ec-modal-field input:focus,
.ec-modal-field textarea:focus,
.ec-modal-field select:focus {
  outline: none;
  border-color: var(--gold, #c9a84c);
}
.ec-modal-field textarea { min-height: 100px; resize: vertical; }
.ec-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}

.ec-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .ec-modal-grid { grid-template-columns: 1fr; }
}

/* ── Sender Identity placeholder ─────────────────────────────────────────── */
.ec-sender-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .ec-sender-row { grid-template-columns: 1fr; }
}

/* ── Dark Mode ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .ec-shell        { color: #f3f4f6; }
  .ec-header h2, .ec-detail-title, .ec-card-name, .ec-field-value,
  .ec-template-name, .ec-metric-value, .ec-disconnected h3,
  .ec-empty h3 { color: #f3f4f6; }

  .ec-card, .ec-metric-card, .ec-template-card, .ec-provider-card,
  .ec-modal, .ec-back-btn, .ec-btn-secondary, .ec-btn-danger,
  .ec-compose-field input, .ec-compose-field textarea, .ec-compose-field select,
  .ec-modal-field input, .ec-modal-field textarea, .ec-modal-field select {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
  }

  .ec-tabs, .ec-detail-tabs { border-bottom-color: #374151; }
  .ec-tab, .ec-detail-tab   { color: #9ca3af; }
  .ec-tab:hover, .ec-detail-tab:hover { color: #f3f4f6; }

  .ec-tab-badge { background: #374151; color: #9ca3af; }

  .ec-card-subject, .ec-field-label, .ec-template-type, .ec-template-desc,
  .ec-card-dates, .ec-metric-label, .ec-disconnected p, .ec-empty p,
  .ec-tab, .ec-detail-tab, .ec-btn-secondary { color: #9ca3af; }

  .ec-disconnected { border-color: #374151; }
  .ec-modal-overlay { background: rgba(0,0,0,0.6); }

  .ec-status-draft     { background: #374151; color: #d1d5db; }
  .ec-status-scheduled { background: #1e3a5f; color: #93c5fd; }
  .ec-status-sent      { background: #064e3b; color: #6ee7b7; }
  .ec-status-archived  { background: #111827; color: #4b5563; }

  .ec-campaign-chip { background: #3d2e00; color: #fde68a; border-color: #78580c; }
  .ec-provider-chip { background: #1e3a5f; color: #93c5fd; }
  .ec-merge-strip   { background: #2d2200; border-color: #78580c; }
  .ec-merge-label   { color: #fde68a; }
  .ec-dnc-note      { background: #2d2200; border-color: #78580c; }
  .ec-dnc-note strong { color: #fde68a; }
}