/**
 * newsletter.css — Newsletter Center MC2.0
 * Phase 3: Light-theme with CSS variable tokens, dark mode override.
 * Follows campaigns.css pattern.
 */

/* ── Shell ─────────────────────────────────────────────── */
.nc-shell {
  padding: 0 0 40px 0;
  min-height: 60vh;
}

.nc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light, #e8e3db);
  background: var(--bg-card, #fff);
}

.nc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.nc-header-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #8a7f72);
}

.nc-btn-primary {
  background: var(--accent, #c9a84c);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.nc-btn-primary:hover { opacity: 0.88; }

.nc-btn-secondary {
  background: transparent;
  color: var(--text-secondary, #5c5347);
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}
.nc-btn-secondary:hover { border-color: var(--accent, #c9a84c); }

.nc-btn-ghost {
  background: transparent;
  color: var(--text-muted, #8a7f72);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.nc-btn-ghost:hover { background: var(--bg-hover, #f5f0e8); }

/* ── Filter Tabs ───────────────────────────────────────── */
.nc-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 24px 0;
  border-bottom: 1px solid var(--border-light, #e8e3db);
  background: var(--bg-card, #fff);
  overflow-x: auto;
}

.nc-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted, #8a7f72);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.nc-tab:hover { color: var(--text-primary, #1a1612); }
.nc-tab.active {
  color: var(--accent, #c9a84c);
  border-bottom-color: var(--accent, #c9a84c);
  font-weight: 600;
}

.nc-tab-badge {
  background: var(--bg-muted, #f0ebe3);
  color: var(--text-muted, #8a7f72);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 600;
}
.nc-tab.active .nc-tab-badge {
  background: var(--accent-light, #fdf3da);
  color: var(--accent, #c9a84c);
}

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

.nc-card {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.nc-card:hover {
  border-color: var(--accent, #c9a84c);
  box-shadow: 0 4px 16px rgba(201,168,76,0.12);
}

.nc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.nc-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #1a1612);
  line-height: 1.3;
}

.nc-card-subject {
  font-size: 0.8rem;
  color: var(--text-secondary, #5c5347);
  margin-bottom: 10px;
  font-style: italic;
}

.nc-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted, #8a7f72);
  margin-top: 10px;
}

.nc-card-chip {
  background: var(--bg-muted, #f0ebe3);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--text-secondary, #5c5347);
}

/* ── Status Pills ──────────────────────────────────────── */
.nc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nc-status-draft     { background: #f0ebe3; color: #7a6f60; }
.nc-status-scheduled { background: #e8f3ff; color: #2b6cb0; }
.nc-status-sent      { background: #e6f7f0; color: #276749; }
.nc-status-archived  { background: #f5f5f5; color: #888; }

/* ── Empty State ───────────────────────────────────────── */
.nc-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted, #8a7f72);
}
.nc-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.nc-empty h3 { font-size: 1rem; font-weight: 600; color: var(--text-secondary, #5c5347); margin-bottom: 6px; }
.nc-empty p  { font-size: 0.85rem; }

/* ── Detail Header ─────────────────────────────────────── */
.nc-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-light, #e8e3db);
  background: var(--bg-card, #fff);
}

.nc-back-btn {
  background: transparent;
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary, #5c5347);
  cursor: pointer;
  transition: border-color 0.15s;
}
.nc-back-btn:hover { border-color: var(--accent, #c9a84c); }

.nc-detail-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #1a1612);
  flex: 1;
}

.nc-detail-actions { display: flex; gap: 8px; align-items: center; }

/* ── Detail Tabs ───────────────────────────────────────── */
.nc-detail-tabs {
  display: flex;
  gap: 2px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-light, #e8e3db);
  background: var(--bg-card, #fff);
  overflow-x: auto;
}

.nc-dtab {
  padding: 10px 16px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-muted, #8a7f72);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.nc-dtab:hover { color: var(--text-primary, #1a1612); }
.nc-dtab.active {
  color: var(--accent, #c9a84c);
  border-bottom-color: var(--accent, #c9a84c);
  font-weight: 600;
}

/* ── Detail Content ────────────────────────────────────── */
.nc-detail-content { padding: 20px 24px; }

.nc-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.nc-field-group {
  background: var(--bg-muted, #f8f5f0);
  border-radius: 10px;
  padding: 14px;
}

.nc-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #8a7f72);
  margin-bottom: 4px;
}

.nc-field-value {
  font-size: 0.9rem;
  color: var(--text-primary, #1a1612);
}

.nc-field-value.empty { color: var(--text-muted, #8a7f72); font-style: italic; }

/* ── Section List ──────────────────────────────────────── */
.nc-section-list { display: flex; flex-direction: column; gap: 8px; }

.nc-section-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s;
}
.nc-section-row:hover { border-color: var(--accent-light, #e8d5a0); }
.nc-section-row.disabled { opacity: 0.45; }

.nc-section-order {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #8a7f72);
  width: 20px;
  text-align: center;
}

.nc-section-type-badge {
  background: var(--accent-light, #fdf3da);
  color: var(--accent-dark, #9a7030);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.nc-section-content-preview {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text-secondary, #5c5347);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-section-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.nc-reorder-btn {
  background: transparent;
  border: 1px solid var(--border-light, #e8e3db);
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-muted, #8a7f72);
  transition: background 0.12s;
}
.nc-reorder-btn:hover { background: var(--bg-muted, #f0ebe3); }

.nc-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-light, #e8e3db);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted, #8a7f72);
  transition: all 0.12s;
}
.nc-toggle-btn.on  { background: #e6f7f0; color: #276749; border-color: #b2dfcf; }
.nc-toggle-btn.off { background: #f5f5f5; color: #888; }

.nc-edit-section-btn {
  background: var(--accent, #c9a84c);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}
.nc-edit-section-btn:hover { opacity: 0.85; }

/* ── Preview Panel ─────────────────────────────────────── */
.nc-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.nc-preview-mode-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border-light, #e8e3db);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #5c5347);
  cursor: pointer;
  transition: all 0.15s;
}
.nc-preview-mode-btn.active {
  background: var(--accent, #c9a84c);
  color: #fff;
  border-color: var(--accent, #c9a84c);
}

.nc-preview-frame-wrap {
  display: flex;
  justify-content: center;
  background: var(--bg-muted, #f0ebe3);
  border-radius: 12px;
  padding: 24px;
  min-height: 400px;
}

.nc-preview-desktop {
  width: 100%;
  max-width: 620px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  overflow: hidden;
  font-family: Georgia, serif;
}

.nc-preview-mobile {
  width: 375px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  overflow: hidden;
  font-family: Georgia, serif;
}

.nc-preview-email-header {
  background: var(--accent, #c9a84c);
  color: #fff;
  padding: 24px;
  text-align: center;
}
.nc-preview-email-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}
.nc-preview-email-header p {
  font-size: 0.82rem;
  margin: 0;
  opacity: 0.85;
}

.nc-preview-section {
  padding: 20px 24px;
  border-bottom: 1px solid #f0ebe3;
}
.nc-preview-section:last-child { border-bottom: none; }
.nc-preview-section h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1612;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  color: var(--accent, #c9a84c);
}
.nc-preview-section p {
  font-size: 0.88rem;
  color: #5c5347;
  margin: 0;
  line-height: 1.55;
}

.nc-preview-cta {
  text-align: center;
  padding: 24px;
  background: #f8f5f0;
}
.nc-preview-cta-btn {
  display: inline-block;
  background: var(--accent, #c9a84c);
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.nc-preview-footer {
  background: #1a1612;
  color: #8a7f72;
  text-align: center;
  padding: 16px;
  font-size: 0.72rem;
}

/* ── Disconnected State (Provider) ─────────────────────── */
.nc-disconnected {
  border: 2px dashed var(--border-light, #e8e3db);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  background: var(--bg-muted, #f8f5f0);
}
.nc-disconnected-icon { font-size: 2rem; margin-bottom: 12px; }
.nc-disconnected h3   { font-size: 0.95rem; font-weight: 700; color: var(--text-secondary, #5c5347); margin-bottom: 6px; }
.nc-disconnected p    { font-size: 0.82rem; color: var(--text-muted, #8a7f72); margin-bottom: 14px; line-height: 1.5; }
.nc-provider-note {
  display: inline-block;
  background: var(--accent-light, #fdf3da);
  color: var(--accent-dark, #9a7030);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Metrics / Results ─────────────────────────────────── */
.nc-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.nc-metric-card {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.nc-metric-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary, #1a1612);
}
.nc-metric-label {
  font-size: 0.72rem;
  color: var(--text-muted, #8a7f72);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ── Templates Grid ────────────────────────────────────── */
.nc-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.nc-template-card {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.nc-template-card:hover { border-color: var(--accent, #c9a84c); }

.nc-template-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary, #1a1612);
  margin-bottom: 4px;
}
.nc-template-desc { font-size: 0.78rem; color: var(--text-muted, #8a7f72); }
.nc-template-sections {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--accent-dark, #9a7030);
  font-weight: 600;
}

/* ── Section Edit Modal ────────────────────────────────── */
.nc-section-form { display: flex; flex-direction: column; gap: 14px; }
.nc-section-form label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary, #5c5347); display: block; margin-bottom: 4px; }
.nc-section-form input,
.nc-section-form textarea,
.nc-section-form select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border-light, #e8e3db);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary, #1a1612);
  background: var(--bg-card, #fff);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.nc-section-form input:focus,
.nc-section-form textarea:focus,
.nc-section-form select:focus {
  outline: none;
  border-color: var(--accent, #c9a84c);
}
.nc-section-form textarea { min-height: 80px; resize: vertical; }

/* ── Merge Fields Chip Strip ───────────────────────────── */
.nc-merge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
}
.nc-merge-chip {
  background: var(--bg-muted, #f0ebe3);
  border: 1px solid var(--border-light, #e8e3db);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-family: monospace;
  color: var(--text-secondary, #5c5347);
  cursor: default;
}

/* ── Dark Mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .nc-header,
  .nc-tabs,
  .nc-card,
  .nc-detail-header,
  .nc-detail-tabs,
  .nc-metric-card,
  .nc-template-card,
  .nc-section-row { background: var(--bg-card, #2a2420); border-color: var(--border-dark, #3d3530); }

  .nc-header h2,
  .nc-detail-name,
  .nc-card-title,
  .nc-field-value,
  .nc-metric-value { color: var(--text-primary, #f0ebe3); }

  .nc-card-subject,
  .nc-field-value.empty,
  .nc-section-content-preview { color: var(--text-muted, #8a7f72); }

  .nc-tab-badge,
  .nc-card-chip,
  .nc-merge-chip { background: var(--bg-muted, #3d3530); }

  .nc-field-group,
  .nc-disconnected,
  .nc-preview-frame-wrap { background: var(--bg-muted, #3d3530); }

  .nc-preview-desktop,
  .nc-preview-mobile { background: #1e1a17; }

  .nc-preview-section p,
  .nc-preview-cta { background: #2a2420; }
}