/**
 * @file digital_ads/my_campaigns.css
 * @description Digital ads My Campaigns: status, filter, sort, pagination and
 *   empty-state styling on top of campaign_setup.css, which the direct mail
 *   campaign selection page also uses. Loaded by
 *   build_my_campaign_web_services/digital_ads/my_campaigns.html.
 *
 * @author Murtaza Lightwala
 * @since 30 Oct 2026 (header added)
 *
 * Edit log:
 *   30 Oct 2026 - Read --pl-* tokens for colours, radii and shadows.
 */

.myCampaignTable td,
.myCampaignTable th {
  vertical-align: middle;
}

.draft-status {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.draft-status-draft {
  background-color: #e6f4f4;
  color: var(--pl-color-primary);
}

.draft-status-in_cart {
  background-color: #e6efff;
  color: var(--pl-color-blue);
}

.draft-status-submitted {
  background-color: #e8f5ec;
  color: #00934f;
}

/* --- Clear all, above the table while any filter is on --- */
.campaign-table-meta {
  display: flex;
  justify-content: flex-end;
  padding: 0 15px 12px;
}

.filter-clear-all {
  color: #b23b3b;
  font-size: 15px;
  text-decoration: none;
}

.filter-clear-all:hover {
  color: #b23b3b;
  text-decoration: underline;
}

/* --- Per-column filter, opened from the column heading itself --- */

/* The heading, its filter icon and its sort arrows are one line: without this
   the controls wrap under the column name as the columns get narrow. */
.myCampaignTable thead th {
  /* Not nowrap. Under the fixed layout below, a heading that refuses to wrap
     pushes its filter icon out of the cell instead of widening the column. */
  white-space: normal;
}

.myCampaignTable th .column-filter {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.column-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #a8c3c3;
  font-size: 13px;
  line-height: 1;
}

.column-filter-toggle:hover {
  background-color: #e6f4f4;
  color: var(--pl-color-primary);
}

/* A column carrying a filter reads differently from one that is not. */
.myCampaignTable th.is-filtered .column-filter-toggle {
  background-color: #e6f4f4;
  color: var(--pl-color-primary);
}

.column-filter-toggle .filter-count {
  min-width: 17px;
  padding: 0 5px;
  background-color: var(--pl-color-primary);
  border-radius: 50px;
  color: var(--pl-color-text-inverse);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* The menu hangs off a heading cell, so undo what the heading imposes on it:
   nowrap, bold and any heading alignment. */
.myCampaignTable th .filter-menu {
  white-space: normal;
  font-weight: 400;
  text-align: left;
  text-transform: none;
}

.filter-menu {
  min-width: 250px;
  padding: 10px;
  border: 1px solid #b1eaea;
  border-radius: var(--pl-radius-sm);
}

.filter-menu-head {
  display: flex;
  gap: 14px;
  padding: 0 4px 8px;
  border-bottom: 1px solid #e6f4f4;
}

.filter-link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--pl-color-primary);
  font-size: 14px;
  text-decoration: underline;
}

.filter-options {
  max-height: 260px;
  margin: 8px 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.filter-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 4px;
  margin: 0;
  color: var(--pl-color-text-body);
  font-size: 15px;
  cursor: pointer;
}

.filter-options label:hover {
  background-color: #f2fafa;
}

.filter-options .filter-empty {
  padding: 6px 4px;
  color: #8a9a9a;
  font-size: 14px;
}

.filter-menu-budget .budget-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--pl-color-text-body);
  font-size: 15px;
}

.filter-menu-budget .budget-field input {
  width: 130px;
  padding: 5px 8px;
  border: 1px solid #b1eaea;
  border-radius: var(--pl-radius-sm);
}

.filter-apply {
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  background-color: var(--pl-color-primary);
  border: 0;
  border-radius: var(--pl-radius-sm);
  color: var(--pl-color-text-inverse);
  font-size: 15px;
  font-weight: 600;
}

/* --- Filtered / sorted column headers --- */
.myCampaignTable th.is-filtered {
  color: var(--pl-color-primary);
}

.myCampaignTable th .sort-controls {
  display: inline-flex;
  flex-direction: column;
  margin-left: 6px;
  line-height: 0.7;
  vertical-align: middle;
}

.myCampaignTable th .sort-arrow {
  color: #c2d4d4;
  font-size: 13px;
  text-decoration: none;
}

/* Which direction is in force, rather than just that the column is sortable. */
.myCampaignTable th .sort-arrow.is-active {
  color: var(--pl-color-primary);
}

/* --- Empty states --- */
.campaign-empty-cell {
  text-align: center;
}

.campaign-empty {
  padding: 26px 15px;
}

.campaign-empty-icon {
  color: #b1eaea;
  font-size: 28px;
}

.campaign-empty-title {
  margin: 12px 0 4px;
  color: var(--pl-color-primary-dark);
  font-size: 18px;
  font-weight: 600;
}

.campaign-empty-hint {
  margin: 0 0 14px;
  color: #4a7599;
  font-size: 15px;
}

.campaign-empty-action {
  display: inline-block;
  padding: 7px 16px;
  background-color: var(--pl-color-primary);
  border-radius: var(--pl-radius-sm);
  color: var(--pl-color-text-inverse);
  font-size: 15px;
  text-decoration: none;
}

.campaign-empty-action:hover {
  color: var(--pl-color-text-inverse);
}

/* --- Pagination --- */
.campaign-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 15px 4px;
}

.campaign-pagination .page-summary {
  color: #4a7599;
  font-size: 15px;
}

.campaign-pagination .page-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.campaign-pagination .page-links a,
.campaign-pagination .page-links span {
  display: block;
  min-width: 36px;
  padding: 6px 10px;
  border: 1px solid #b1eaea;
  border-radius: var(--pl-radius-sm);
  color: var(--pl-color-primary);
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}

.campaign-pagination .page-links a:hover {
  background-color: #e6f4f4;
}

.campaign-pagination .page-links .current {
  background-color: var(--pl-color-primary);
  border-color: var(--pl-color-primary);
  color: var(--pl-color-text-inverse);
  font-weight: 600;
}

.campaign-pagination .page-links .disabled {
  color: #b9c6c6;
  cursor: not-allowed;
}

/* A submitted campaign is history: it can be viewed but not reopened. */
.button[data-can-load="false"],
.button[data-can-remove="false"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.button[data-can-load="false"]:hover,
.button[data-can-remove="false"]:hover {
  transform: none;
  box-shadow: var(--pl-shadow-sm);
}

/* ── Seven columns inside a fixed-width card ──
   The table was auto-layout, so its width came from its content: adding the
   Design Type column pushed the intrinsic minimum past the card, and the card
   does not clip, so the rows and the action pills visibly ran out past its
   rounded edge.

   Fixed layout with stated widths is the fix rather than a scrollbar: the
   columns are known and none of them needs to be measured from its content.

   The percentages are a budget, and Actions is the one that is measured rather
   than chosen. Each pill is 28px of left padding (the icon is absolutely
   positioned, so the padding has to clear it), its label, 10px right padding
   and 3px of margin each side — about 266px for the three, 274px once this
   cell's own padding is counted.

   That was first budgeted at 25%, which on a 1440 window is 278px: four pixels
   of headroom, and the Remove pill clipped anyway. The lesson is that 266px is
   an estimate of text widths, not a measurement, so it cannot be budgeted to
   the pixel — a font fallback or a renamed button eats the margin. 28% (311px)
   leaves ~37px, enough to absorb being wrong about the labels. The 3% comes off
   Campaign Name, Platform and Budget, all of which wrap or have room. */
.myCampaignTable {
  table-layout: fixed;
  width: 100%;
}

.myCampaignTable th:nth-child(1),
.myCampaignTable td:nth-child(1) { width: 18%; }   /* Campaign Name */
.myCampaignTable th:nth-child(2),
.myCampaignTable td:nth-child(2) { width: 11%; }   /* Platform */
.myCampaignTable th:nth-child(3),
.myCampaignTable td:nth-child(3) { width: 12%; }   /* Design Type */
.myCampaignTable th:nth-child(4),
.myCampaignTable td:nth-child(4) { width: 9%; }    /* Budget */
.myCampaignTable th:nth-child(5),
.myCampaignTable td:nth-child(5) { width: 12%; }   /* Last Saved */
.myCampaignTable th:nth-child(6),
.myCampaignTable td:nth-child(6) { width: 10%; }   /* Status */
.myCampaignTable th:nth-child(7),
.myCampaignTable td:nth-child(7) { width: 28%; }   /* Actions */

/* Fixed layout will not widen a column for a long word, so anything unbroken
   has to be allowed to wrap or it overflows its own cell instead of the table.
   NOT the actions cell: it is a flex container, and letting its text break
   anywhere let the pills shrink to their one-character minimum and render as
   vertical slivers with the label running down the side. */
.myCampaignTable td:not(.actions) {
  overflow-wrap: anywhere;
}

/* ── Action buttons: smaller, to fit three pills in 23% of the row ──
   Scoped to this table rather than changed on .button itself, because
   campaign_setup.css is shared with the direct-mail EDDM page and the pills
   there are not short of room.

   The icon is absolutely positioned inside the pill, so its width and the
   button's left padding have to move together — shrinking only the padding
   slides the label under the icon. */
.myCampaignTable td.actions {
  /* A table cell, NOT a flex container.
     campaign_setup.css sets `.actions { display: flex }`, and that is the root
     of both faults seen here. A flex td leaves the table formatting context:
     it stops honouring its column width, and with justify-content:center it
     overflows symmetrically — which is how the pills ended up sitting on top of
     the Status pill in the column to its left. It is also what let the pills be
     shrunk below their labels into vertical slivers.

     Restored to table-cell so the 25% column width actually binds, with the
     pills laid out inline inside it. No markup change needed, which matters:
     the alternative is a wrapper div inside every actions cell. */
  display: table-cell;
  text-align: center;
  /* Keeps the three pills on one line now that they are inline rather than
     flex items. */
  white-space: nowrap;
  /* The pills carry their own 3px margins, so the cell's inherited 8px each
     side is 16px of the column spent on nothing. This is the one cell where
     that margin is worth reclaiming. */
  padding-left: 4px;
  padding-right: 4px;
}

.myCampaignTable td.actions .button {
  /* inline-flex, not flex: `.button` is display:flex in the shared stylesheet,
     which inside a table-cell would make each pill block-level and stack them
     vertically. inline-flex keeps the icon/label centring that flex gives while
     letting the three sit side by side. */
  display: inline-flex;
  vertical-align: middle;
  margin: 0 3px;
  padding: 5px 10px 5px 28px;
  font-size: 12px;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.myCampaignTable td.actions .button i {
  width: 22px;
  height: 22px;
  font-size: 11px;
  left: 2px;
}

/* Last resort. If a narrow window ever makes even the fixed widths too tight,
   the table scrolls inside the card rather than breaking out of it — which is
   what it was doing before. */
#campaign-filter-form {
  overflow-x: auto;
}

/* ── The table's own padding ──
   campaign_setup.css sets `.pt-4 { padding: 15px }` and is shared with the
   direct-mail campaign-selection page, so this narrows only the horizontal
   padding and only here. The 5px recovered on each side goes to the table,
   which is the column short of room. */
.campaign-table-pad {
  padding: 15px 10px;
}