@use '../variables' as v;
@use '../mixins' as m;

// Campaign name cell
.campaign-name-cell {
  h4 {
    font-size: v.$font-size-sm;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
  }

  p {
    font-size: v.$font-size-xs;
    color: var(--text-muted);
  }
}

// Sent count cell
.sent-cell {
  &-count {
    font-weight: 600;
    color: var(--text-primary);
  }

  &-total {
    font-size: v.$font-size-xs;
    color: var(--text-muted);
  }
}

// Campaign wizard layout
.wizard-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;

  @include m.max-lg { grid-template-columns: 1fr; }
}

.wizard-form-card {
  @include m.card-base;
  overflow: visible;
}

.wizard-sidebar-card {
  @include m.card-base;
  padding: 18px;
  position: sticky;
  top: calc(v.$topbar-height + 20px);
}

.review-row {
  @include m.flex-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: v.$font-size-sm;

  &:last-child { border-bottom: none; }

  &-label { color: var(--text-secondary); font-weight: 500; }
  &-value { color: var(--text-primary); font-weight: 500; }
}

// Analytics
.analytics-hero {
  @include m.card-base;
  padding: 24px 28px;
  margin-bottom: 22px;
  @include m.flex-between;
  gap: 20px;
  flex-wrap: wrap;

  &-info {
    h2 { font-size: v.$font-size-xl; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    p  { font-size: v.$font-size-sm; color: var(--text-secondary); }
  }

  &-badges {
    @include m.flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
}

.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;

  @include m.max-lg { grid-template-columns: repeat(2, 1fr); }
  @include m.max-sm { grid-template-columns: 1fr; }
}

.analytics-metric {
  @include m.card-base;
  padding: 18px 20px;
  text-align: center;

  &-label {
    font-size: v.$font-size-xs;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin-bottom: 8px;
  }

  &-value {
    font-size: v.$font-size-3xl;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
  }

  &-sub {
    font-size: v.$font-size-xs;
    color: var(--text-muted);
    margin-top: 4px;
  }
}
