/* === ATLAS V5 — Marketing / Campaign Hub === */
/* Scoped to #view-marketing. Token-only → both light + dark themes auto-valid.
 * Loads after bundle CSS so it overrides the legacy dept-* marketing layout. */

#view-marketing.atlas-view { display: flex; flex-direction: column; min-height: 0; }
#view-marketing .mk5-page {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 0 28px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.mk5-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  flex-shrink: 0;
}
.mk5-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted, var(--text-dim)); margin-bottom: 6px; display: block;
}
.mk5-title { font-size: 24px; font-weight: 700; color: var(--ink, var(--text)); margin: 0; line-height: 1.1; }
.mk5-sub { font-size: 13px; color: var(--muted, var(--text-dim)); margin: 4px 0 0; }
.mk5-new-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--champagne, var(--accent)); color: #1a1407;
  border: none; border-radius: 9px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  box-shadow: 0 2px 10px rgba(214,169,79,.28);
}
.mk5-new-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(214,169,79,.36); }
.mk5-new-btn:active { transform: translateY(0); }
.mk5-new-btn svg { width: 15px; height: 15px; }

/* ── Performance strip ──────────────────────────────────────────────────── */
.mk5-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line, var(--border)); flex-shrink: 0;
}
.mk5-stat { padding: 18px 24px; border-right: 1px solid var(--line, var(--border)); }
.mk5-stat:last-child { border-right: none; }
.mk5-stat-lab {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted, var(--text-dim)); margin-bottom: 6px; display: block;
}
.mk5-stat-val {
  font-size: 26px; font-weight: 700; color: var(--ink, var(--text));
  font-variant-numeric: tabular-nums; line-height: 1;
}
.mk5-stat-val.champagne { color: var(--champagne, var(--accent)); }
.mk5-stat-meta { font-size: 11px; color: var(--muted, var(--text-dim)); margin-top: 5px; display: block; }

/* ── Two-column body ────────────────────────────────────────────────────── */
.mk5-cols {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px;
  padding: 22px 28px 0; align-items: start;
}
.mk5-panel {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px; overflow: hidden;
}
.mk5-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
}
.mk5-panel-title { font-size: 13px; font-weight: 700; color: var(--ink, var(--text)); letter-spacing: .01em; }
.mk5-panel-meta { font-size: 11px; color: var(--muted, var(--text-dim)); }
.mk5-panel-body { padding: 0 18px 18px; }

/* ── Campaign cards ─────────────────────────────────────────────────────── */
.mk5-campaign {
  position: relative;
  background: var(--surface, var(--panel));
  border: 1px solid var(--line, var(--border));
  border-radius: 11px; padding: 14px 16px 15px 18px;
  margin-bottom: 12px;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.mk5-campaign:last-child { margin-bottom: 0; }
.mk5-campaign:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
/* channel accent rail (left) */
.mk5-campaign::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 11px 0 0 11px; background: var(--mk-accent, var(--champagne, var(--accent)));
}
.mk5-campaign[data-channel="meta"]   { --mk-accent: #1877f2; }
.mk5-campaign[data-channel="google"] { --mk-accent: linear-gradient(180deg,#4285f4 0%,#ea4335 33%,#fbbc05 66%,#34a853 100%); }
.mk5-campaign[data-channel="email"]  { --mk-accent: #22c55e; }
.mk5-campaign[data-channel="social"] { --mk-accent: #a855f7; }

.mk5-camp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mk5-camp-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk5-camp-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, var(--panel2, var(--panel)));
  color: var(--ink, var(--text));
}
.mk5-camp-icon svg { width: 17px; height: 17px; }
.mk5-campaign[data-channel="meta"]   .mk5-camp-icon { color: #1877f2; background: rgba(24,119,242,.12); }
.mk5-campaign[data-channel="google"] .mk5-camp-icon { color: #ea4335; background: rgba(234,67,53,.10); }
.mk5-campaign[data-channel="email"]  .mk5-camp-icon { color: #22c55e; background: rgba(34,197,94,.12); }
.mk5-campaign[data-channel="social"] .mk5-camp-icon { color: #a855f7; background: rgba(168,85,247,.12); }
.mk5-camp-name { font-size: 14px; font-weight: 700; color: var(--ink, var(--text)); line-height: 1.2; }
.mk5-camp-channel { font-size: 11px; color: var(--muted, var(--text-dim)); margin-top: 1px; }

.mk5-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.mk5-status.active { background: rgba(34,197,94,.14); color: #22c55e; }
.mk5-status.paused { background: rgba(234,179,8,.16);  color: #d4a017; }
.mk5-status.ended  { background: var(--surface-2, var(--panel2, var(--panel))); color: var(--muted, var(--text-dim)); }

.mk5-budget-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.mk5-budget-txt { font-size: 12px; color: var(--ink, var(--text)); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk5-budget-pct { font-size: 11px; color: var(--muted, var(--text-dim)); font-variant-numeric: tabular-nums; }
.mk5-bar {
  height: 7px; border-radius: 6px; background: var(--surface-2, var(--panel2, var(--panel)));
  overflow: hidden; margin-bottom: 11px;
}
.mk5-bar-fill {
  height: 100%; border-radius: 6px; width: 0;
  background: linear-gradient(90deg, var(--champagne, var(--accent)), #f0d9a0);
  transition: width 700ms cubic-bezier(.22,.61,.36,1);
}
.mk5-camp-stats { display: flex; gap: 22px; }
.mk5-camp-stat { display: flex; flex-direction: column; }
.mk5-camp-stat-val { font-size: 15px; font-weight: 700; color: var(--ink, var(--text)); font-variant-numeric: tabular-nums; }
.mk5-camp-stat-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, var(--text-dim)); margin-top: 1px; }
.mk5-camp-dates { margin-left: auto; align-self: flex-end; font-size: 11px; color: var(--muted, var(--text-dim)); }

/* ── Lead source bars (horizontal CSS chart) ────────────────────────────── */
.mk5-source { margin-bottom: 13px; }
.mk5-source:last-child { margin-bottom: 0; }
.mk5-source-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.mk5-source-name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink, var(--text)); font-weight: 600; }
.mk5-source-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--src-color, var(--champagne)); }
.mk5-source-pct { font-size: 12px; font-weight: 700; color: var(--ink, var(--text)); font-variant-numeric: tabular-nums; }
.mk5-source-track { height: 9px; border-radius: 6px; background: var(--surface-2, var(--panel2, var(--panel))); overflow: hidden; }
.mk5-source-bar {
  height: 100%; border-radius: 6px; width: 0;
  background: var(--src-color, var(--champagne, var(--accent)));
  transition: width 800ms cubic-bezier(.22,.61,.36,1);
}
.mk5-source-count { font-size: 10.5px; color: var(--muted, var(--text-dim)); margin-top: 3px; display: block; }

/* ── Promoted listings ──────────────────────────────────────────────────── */
.mk5-listings-wrap { padding: 24px 28px 0; }
.mk5-listings-head {
  font-size: 13px; font-weight: 700; color: var(--ink, var(--text));
  margin-bottom: 14px; display: flex; align-items: center; gap: 9px;
}
.mk5-listings-head::after {
  content: ""; flex: 1; height: 1px; background: var(--line, var(--border));
}
.mk5-listings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk5-listing {
  background: var(--surface-2, var(--panel2, var(--panel)));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px; overflow: hidden;
  transition: transform 160ms, box-shadow 160ms;
}
.mk5-listing:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.mk5-listing-thumb {
  height: 92px; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(214,169,79,.22), rgba(40,52,70,.4)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px);
  color: var(--muted, var(--text-dim));
}
.mk5-listing-thumb svg { width: 28px; height: 28px; opacity: .55; }
.mk5-listing-body { padding: 11px 13px 13px; }
.mk5-listing-addr { font-size: 12.5px; font-weight: 600; color: var(--ink, var(--text)); line-height: 1.3; margin-bottom: 8px; }
.mk5-boost {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 20px;
}
.mk5-boost.boosted   { background: rgba(168,85,247,.14); color: #a855f7; }
.mk5-boost.scheduled { background: rgba(59,130,246,.14); color: #3b82f6; }
.mk5-boost.organic   { background: var(--surface, var(--panel)); color: var(--muted, var(--text-dim)); border: 1px solid var(--line, var(--border)); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mk5-cols { grid-template-columns: 1fr; }
  .mk5-listings-grid { grid-template-columns: repeat(2, 1fr); }
  .mk5-strip { grid-template-columns: repeat(2, 1fr); }
  .mk5-strip .mk5-stat:nth-child(2) { border-right: none; }
}
@media (max-width: 640px) {
  .mk5-head { flex-direction: column; align-items: flex-start; }
  .mk5-listings-grid { grid-template-columns: 1fr; }
}

/* ── Light-theme nudge ──────────────────────────────────────────────────── */
[data-theme="light"] #view-marketing .mk5-listing:hover,
:root[data-theme="light"] #view-marketing .mk5-listing:hover { box-shadow: 0 6px 16px rgba(0,0,0,.10); }
[data-theme="light"] #view-marketing .mk5-listing-thumb,
:root[data-theme="light"] #view-marketing .mk5-listing-thumb {
  background: linear-gradient(135deg, rgba(214,169,79,.28), rgba(180,195,215,.5));
}