/* Campaign signals — approved “Inside metrics” direction.
   Presentation only: no tooltips, popovers, click targets or explanatory badges.
   Root/ID scope keeps LINK and APPS aligned without affecting the team table. */
:root #active-table tbody > tr.campaign-row {
  --campaign-cell-bg: var(--surface, #101725);
}
:root #active-table tbody > tr.campaign-row:nth-child(even) {
  --campaign-cell-bg: var(--soft, #0d1421);
}
:root #active-table tbody > tr.campaign-row:hover {
  --campaign-cell-bg: var(--raised, #1b2945);
}

/* Retire full-row alert washes and the old left-edge stripe. Only background
   images are reset on metric cells, preserving existing ROI/profit colors. */
:root #active-table tbody > tr.campaign-row:is(.alert-critical, .alert-high, .row-positive) > td:not([data-col-field$="roi"], [data-col-field$="profit"], [data-col-field$="revenue"]) {
  background-image: none;
}
:root #active-table tbody > tr.campaign-row:is(.alert-critical, .alert-high, .row-positive) > td.sticky-name {
  background-color: var(--campaign-cell-bg);
  background-image: none;
  box-shadow: none;
}
:root #active-table tbody > tr.campaign-row .campaign-alert-bar {
  display: none !important;
}

/* APPS formerly painted every metric according to profit. Keep its financial
   cell treatment; other metrics receive only their own local signal. */
:root .apps-selected #active-table tbody > tr.campaign-row > td:is(.apps-result-positive, .apps-result-negative):not([data-col-field$="roi"], [data-col-field$="profit"], [data-col-field$="revenue"]) {
  background-image: none;
}

/* Marker is a direct sibling of the name, outside its ellipsis box. */
:root #active-table .campaign-name-cell {
  position: relative;
}
:root #active-table .campaign-name-cell:has(> .campaign-signal-marker) > .campaign-name-main {
  box-sizing: border-box;
  padding-right: 26px !important;
  max-width: 100%;
}
:root #active-table .campaign-name-cell > .campaign-signal-marker {
  position: absolute;
  inset: 0 0 auto auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin: 0;
  padding: 2px;
  color: var(--muted, #a0a9bd);
  background: transparent;
  border: 0;
  border-radius: 0;
  line-height: 1;
  cursor: default;
  pointer-events: none;
  user-select: none;
}
:root #active-table .campaign-signal-marker.critical {
  color: var(--negative, #ff929e);
}
:root #active-table .campaign-signal-marker.high {
  color: var(--warning, #e6bd7e);
}
:root #active-table .campaign-signal-marker svg {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root #active-table .campaign-metric-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
:root #active-table .campaign-metric-value {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
:root #active-table .campaign-metric-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--muted, #a0a9bd);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: inherit;
}
:root #active-table .campaign-metric-delta.good {
  color: var(--positive, #80e6bd);
}
:root #active-table .campaign-metric-delta.bad {
  color: var(--negative, #ff929e);
}
:root #active-table .campaign-metric-delta.neutral {
  color: var(--muted, #a0a9bd);
}
:root #active-table .campaign-metric-delta svg {
  display: block;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A narrow edge + soft wash belong to the cell, not the entire campaign.
   Opaque background-color is required for pinned columns. Important background
   properties intentionally beat legacy .view-pinned background!important;
   column position, width, z-index and period dividers remain untouched. */
:root #active-table tbody > tr.campaign-row > td.campaign-signal-critical {
  --campaign-signal-edge: #ff929e99;
  --campaign-signal-tint: #ff6e8412;
}
:root #active-table tbody > tr.campaign-row > td.campaign-signal-high {
  --campaign-signal-edge: #e6bd7e99;
  --campaign-signal-tint: #e6bd7e10;
}
:root #active-table tbody > tr.campaign-row > td:is(.campaign-signal-critical, .campaign-signal-high) {
  background-color: var(--campaign-cell-bg) !important;
  background-image: linear-gradient(var(--campaign-signal-edge), var(--campaign-signal-edge)), linear-gradient(90deg, transparent, var(--campaign-signal-tint)) !important;
  background-size: 2px calc(100% - 24px), 100% 100% !important;
  background-position: right center, center !important;
  background-repeat: no-repeat !important;
}
:root #active-table tbody > tr.campaign-row > td.campaign-signal-critical:not(.num-green):not(.num-red) {
  color: var(--negative, #ff929e);
}
:root #active-table tbody > tr.campaign-row > td.campaign-signal-high:not(.num-green):not(.num-red) {
  color: var(--warning, #e6bd7e);
}

/* Existing financial semantic classes continue to own ROI/profit/revenue
   text, including when one of those metrics is pinned or has a delta. */
:root #active-table .campaign-row > td.num-green .campaign-metric-value {
  color: var(--positive, #80e6bd);
}
:root #active-table .campaign-row > td.num-red .campaign-metric-value {
  color: var(--negative, #ff929e);
}

@media (max-width: 820px) {
  :root #active-table .campaign-name-cell > .campaign-signal-marker {
    top: 1px;
  }
  :root #active-table .campaign-metric-stack {
    gap: 4px;
  }
  :root #active-table .campaign-metric-delta {
    font-size: 9px;
  }
}