/* Wide screens scroll the table sideways inside the card, narrow ones turn each row into a card. */
.campaign-table-card {
  overflow-x: auto;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.campaign-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
}

.campaign-table th,
.campaign-table td {
  padding: var(--space-16) var(--space-24);
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-align: left;
  vertical-align: middle;
}

.campaign-table thead th {
  padding-block: var(--space-12);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-body-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-table tbody tr:last-child > * {
  border-bottom: none;
}

/* The three tables share their column widths, so the columns line up from one group to the next. */
.campaign-table {
  table-layout: fixed;
}

.campaign-table__period-column { width: 15rem; }
.campaign-table__medium-column { width: 11rem; }
.campaign-table__changed-column { width: 12rem; }

/* ---------- one section per status, the ended ones quieter ---------- */

.campaign-group + .campaign-group {
  margin-top: var(--space-40);
}

.campaign-group__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4) var(--space-12);
  margin-bottom: var(--space-12);
}

.campaign-group__heading {
  color: var(--text-heading);
  font-size: var(--fs-subheadline-m);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-body-m);
}

.campaign-group__meta {
  color: var(--text-muted);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-body-xs);
}

.campaign-group__toggle {
  margin-inline-start: auto;
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-body-xs);
}

.campaign-group--ended .campaign-table__title,
.campaign-group--ended .campaign-table__medium,
.campaign-group--ended .campaign-table__editor {
  color: var(--text-muted);
}

.campaign-group--ended .campaign-medium {
  --medium-color: var(--text-subtle);
}

.campaign-table__title {
  color: var(--text-brand);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-body-bold);
}

.campaign-table__title-link {
  color: inherit;
  text-decoration: none;
}

.campaign-table__title-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- where a campaign stands: words, a bar for a fixed period, the dates ---------- */

.campaign-timing {
  --timing-color: var(--text-body);
  --timing-bar: var(--success);

  display: inline-grid;
  justify-items: start;
  gap: var(--space-4);
}

.campaign-timing--running { --timing-color: var(--success); }
.campaign-timing--ended { --timing-color: var(--text-muted); }
.campaign-timing--ending { --timing-bar: var(--warning); }

.campaign-timing__phrase {
  color: var(--timing-color);
  font-weight: var(--fw-body-bold);
  white-space: nowrap;
}

/* Warning yellow is too light for text, so the phrase gets its pale background instead. */
.campaign-timing--ending .campaign-timing__phrase {
  margin-inline: calc(var(--space-8) * -1);
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--warning-bg);
  color: var(--text-body);
}

.campaign-timing__progress {
  justify-self: stretch;
  height: 0.25rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-hover);
  overflow: hidden;
  appearance: none;
}

.campaign-timing__progress::-webkit-progress-bar {
  background: var(--surface-hover);
}

.campaign-timing__progress::-webkit-progress-value {
  background: var(--timing-bar);
}

.campaign-timing__progress::-moz-progress-bar {
  background: var(--timing-bar);
}

.campaign-timing__dates {
  color: var(--text-muted);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-body-xs);
  white-space: nowrap;
}

.campaign-table__changed-at {
  color: var(--text-muted);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-body-xs);
  white-space: nowrap;
}

.campaign-table__change {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.campaign-table__editor {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-body-bold);
  line-height: var(--lh-body-xs);
}

.campaign-table__open {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-body-xs);
  white-space: nowrap;
}

.campaign-table__open .icon {
  width: 1em;
  height: 1em;
}

.campaign-table__open .avatar-stack {
  margin-inline-start: var(--space-4);
}

.campaign-medium {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.campaign-medium .icon {
  color: var(--medium-color);
}

.campaign-medium--online { --medium-color: var(--medium-online); }
.campaign-medium--phone { --medium-color: var(--medium-phone); }
.campaign-medium--post { --medium-color: var(--medium-post); }
.campaign-medium--social { --medium-color: var(--medium-social); }

@media (max-width: 40rem) {
  .campaign-table-card {
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
  }

  .campaign-table,
  .campaign-table tbody,
  .campaign-table tr,
  .campaign-table th,
  .campaign-table td {
    display: block;
  }

  .campaign-table thead,
  .campaign-table colgroup {
    display: none;
  }

  .campaign-table tbody {
    display: grid;
    gap: var(--space-12);
  }

  .campaign-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title   title"
      "period  medium"
      "changed changed";
    gap: var(--space-12) var(--space-16);
    padding: var(--space-16);
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .campaign-table th,
  .campaign-table td {
    padding: 0;
    border: none;
  }

  .campaign-table__title { grid-area: title; }
  .campaign-table__period { grid-area: period; }
  .campaign-table__medium { grid-area: medium; text-align: end; }
  .campaign-table__changed { grid-area: changed; }

  .campaign-table__period[data-label]::before,
  .campaign-table__medium[data-label]::before,
  .campaign-table__changed[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-body-bold);
    line-height: var(--lh-body-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}