/* ═══════════════════════════════════════════════════════════════
   30-marketing.css — Block H: Kampagnen, Dynamic Pricing, Promo
   ═══════════════════════════════════════════════════════════════ */

/* ── Sub-Tabs ─────────────────────────────────────────────────── */
.mkt-subtabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.mkt-subtab-btn {
  padding: .45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg2);
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mkt-subtab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mkt-subtab-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Section header row ──────────────────────────────────────── */
.mkt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.mkt-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
}

/* ── Campaign list ───────────────────────────────────────────── */
.mkt-campaign-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mkt-campaign-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .7rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mkt-campaign-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.mkt-campaign-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .5rem;
  background: rgba(var(--accent-rgb),.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-campaign-icon svg { color: var(--accent); }
.mkt-campaign-info { flex: 1; min-width: 0; }
.mkt-campaign-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-campaign-meta {
  font-size: .78rem;
  color: var(--fg2);
  margin-top: .1rem;
}
.mkt-campaign-status {
  font-size: .75rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}
.mkt-status-draft      { background: rgba(180,180,180,.15); color: var(--fg2); }
.mkt-status-scheduled  { background: rgba(59,130,246,.12);  color: #3b82f6; }
.mkt-status-running    { background: rgba(249,115,22,.12);  color: #f97316; }
.mkt-status-done       { background: rgba(34,197,94,.12);   color: #22c55e; }
.mkt-status-cancelled  { background: rgba(239,68,68,.12);   color: #ef4444; }

/* ── Pricing rules list ──────────────────────────────────────── */
.mkt-rule-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mkt-rule-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .7rem;
  cursor: pointer;
  transition: border-color .15s;
}
.mkt-rule-card:hover { border-color: var(--accent); }
.mkt-rule-badge {
  font-size: .72rem;
  padding: .18rem .55rem;
  border-radius: .35rem;
  font-weight: 600;
  background: rgba(var(--accent-rgb),.12);
  color: var(--accent);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mkt-rule-info { flex: 1; min-width: 0; }
.mkt-rule-name {
  font-weight: 600;
  font-size: .88rem;
  color: var(--fg);
}
.mkt-rule-detail {
  font-size: .77rem;
  color: var(--fg2);
  margin-top: .1rem;
}
.mkt-rule-toggle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--fg2);
}

/* ── Promo codes list ────────────────────────────────────────── */
.mkt-promo-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.mkt-promo-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .7rem;
  cursor: pointer;
  transition: border-color .15s;
}
.mkt-promo-card:hover { border-color: var(--accent); }
.mkt-promo-code {
  font-family: monospace;
  font-size: .92rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.08);
  padding: .25rem .65rem;
  border-radius: .4rem;
  letter-spacing: .06em;
  flex-shrink: 0;
}
.mkt-promo-info { flex: 1; min-width: 0; }
.mkt-promo-name {
  font-weight: 600;
  font-size: .88rem;
  color: var(--fg);
}
.mkt-promo-detail {
  font-size: .77rem;
  color: var(--fg2);
  margin-top: .1rem;
}
.mkt-promo-uses {
  font-size: .78rem;
  color: var(--fg2);
  flex-shrink: 0;
  text-align: right;
}

/* ── Dialog details ──────────────────────────────────────────── */
.mkt-segment-options {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .3rem;
}
.mkt-segment-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.mkt-segment-row label {
  font-size: .85rem;
  color: var(--fg2);
  min-width: 12rem;
}
.mkt-segment-row input[type=number],
.mkt-segment-row input[type=text] {
  width: 6rem;
  padding: .3rem .5rem;
  border-radius: .4rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: .85rem;
}
.mkt-segment-row input:disabled {
  opacity: .4;
}

.mkt-recipient-count {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--fg2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .3rem .7rem;
  margin-top: .4rem;
}
.mkt-recipient-count strong {
  color: var(--accent);
  font-weight: 700;
}

/* condition panels for DPR */
.mkt-cond-panel {
  display: none;
  flex-direction: column;
  gap: .5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .75rem;
  margin-top: .3rem;
}
.mkt-cond-panel.active { display: flex; }
.mkt-day-checkboxes {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.mkt-day-checkboxes label {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .82rem;
  cursor: pointer;
  padding: .2rem .45rem;
  border-radius: .35rem;
  background: var(--card);
  border: 1px solid var(--border);
  user-select: none;
  transition: background .12s, border-color .12s;
}
.mkt-day-checkboxes label:has(input:checked) {
  background: rgba(var(--accent-rgb),.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Upgrade gate ────────────────────────────────────────────── */
.mkt-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: .75rem;
  border: 1.5px dashed var(--border);
  border-radius: .9rem;
  color: var(--fg2);
}
.mkt-gate svg { opacity: .4; }
.mkt-gate h4 { margin: 0; font-size: 1rem; color: var(--fg); }
.mkt-gate p  { margin: 0; font-size: .85rem; max-width: 26rem; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mkt-campaign-card,
  .mkt-rule-card,
  .mkt-promo-card {
    flex-wrap: wrap;
  }
  .mkt-campaign-status { order: -1; }
}