/* ==========================================================================
   BridgeBI — Campaigns: the pill tabs and the card morph
   --------------------------------------------------------------------------
   Reference: "Post card morph transition" by @omererdgan, Collect UI
   (/designs/card-ui-design-inspiration/167cf145-…). Also a VIDEO. Two moves,
   both read off the frames:

   1. TABS ARE PILLS AND THE ACTIVE ONE TRAVELS. Travel / Cars / Nature / Sport
      sit as flat chips on the page; the selected one is a WHITE pill with a
      soft shadow, and picking another one slides that white pill across rather
      than repainting two chips. Measured: page #FAFAFA, chip #EEEEEE, active
      #FFFFFF, ink #3E3E3E, fully rounded.
   2. ONE CARD IS A CARD; THE REST ARE THE PAGE. In the feed only the post in
      play is a white card with a hairline and a shadow — every other row is
      flat on the background. Switching tabs moves that one card between slots
      instead of redrawing the list.

   Applied to the Campaigns page, whose six pill groups had five different
   idioms (an underline, three tinted tracks, a navy segmented block, a
   bordered button row). Now they are one control that behaves one way.

   HARD RULE — the thumb owns the fill, the button owns the text. An active
   button must NOT paint its own background: the whole point is that the white
   pill is a single element that MOVES. Two elements each painting themselves
   is what a tab bar looks like when it cannot animate. The old
   `.cmp-entity-tab.active { background: white }` rules are neutralised below,
   not edited in place, so index.html keeps working with morph.js absent.

   Load AFTER dropdown.css (it is scoped to #pageCampaigns, so it never fights
   the select layer) and keep every rule under `#pageCampaigns` / `.rc-hub` /
   `.cg-hub` — the same classes exist on no other page, but scoping is what
   makes that a guarantee rather than an observation.
   ========================================================================== */

#pageCampaigns {
  --bbm-chip:      #EDEDED;        /* the resting pill */
  --bbm-chip-ink:  #7C7C82;
  --bbm-thumb:     #FFFFFF;        /* the pill that travels */
  --bbm-thumb-ink: #1A1A1A;
  --bbm-card:      #FFFFFF;
  --bbm-card-line: rgba(16, 24, 40, .07);
  --bbm-quiet:     rgba(16, 24, 40, .022);   /* a row that is not the one */
  --bbm-quiet-ink: #5C5C5C;

  --bbm-r-pill:    999px;
  --bbm-r-card:    18px;

  /* One easing for every move on this page. It is the reference's: a fast
     start that settles without a bounce, so a pill sliding 300px and a card
     lifting 2px look like the same hand. */
  --bbm-ease:      cubic-bezier(.22, 1, .36, 1);
  --bbm-t-slide:   .34s;
  --bbm-t-lift:    .26s;

  --bbm-sh-thumb:
    0 0 0 1px rgba(16, 24, 40, .04),
    0 1px 2px rgba(16, 24, 40, .06),
    0 4px 12px -3px rgba(16, 24, 40, .14);
  --bbm-sh-lift:
    0 0 0 1px var(--bbm-card-line),
    0 1px 2px rgba(16, 24, 40, .04),
    0 10px 26px -8px rgba(16, 24, 40, .14),
    0 26px 50px -24px rgba(16, 24, 40, .16);
}

html[data-bb-theme="dark"] #pageCampaigns {
  --bbm-chip:      rgba(255, 255, 255, .06);
  --bbm-chip-ink:  #8894A8;
  --bbm-thumb:     #24314A;
  --bbm-thumb-ink: #EEF1F6;
  --bbm-card:      #172134;
  --bbm-card-line: rgba(255, 255, 255, .10);
  --bbm-quiet:     rgba(255, 255, 255, .028);
  --bbm-quiet-ink: #A3AEC0;
  --bbm-sh-thumb:
    0 0 0 1px rgba(255, 255, 255, .07),
    0 2px 6px rgba(0, 0, 0, .35);
  --bbm-sh-lift:
    0 0 0 1px var(--bbm-card-line),
    0 2px 6px rgba(0, 0, 0, .30),
    0 14px 32px -10px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   1 · PILL GROUPS
   ========================================================================== */

#pageCampaigns .cmp-viewtabs,
#pageCampaigns .cmp-plat-tabs,
#pageCampaigns .cmp-entity-tabs,
#pageCampaigns .cmp-period-presets,
#pageCampaigns .cmp-seg,
#pageCampaigns .rc-plat {
  position: relative;               /* the thumb is absolute inside this box */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: var(--bbm-r-pill);
  background: var(--bbm-chip);
  overflow: visible;                /* .cmp-seg had overflow:hidden */
  box-shadow: none;
}
/* DELIBERATE DEVIATION from the reference, do not "fix" it: there the four
   chips sit separately on the page with gaps between them, each with its own
   grey fill. Here the fill is on the GROUP and the buttons are transparent.
   Reason: the white pill has to travel BETWEEN them, and a chip painted by the
   button itself is a child that stacks above the pill — the pill would slide
   behind the neighbouring chips and disappear mid-flight. Painting the ground
   once, on the track, is what lets one element do the moving. */

/* The platform tabs were an underlined tab strip with a 2px rule under the
   whole row. The rule has to go or the pills sit on a line that no longer
   means anything. */
#pageCampaigns .cmp-plat-tabs {
  border-bottom: 0;
  margin-bottom: 18px;
}
#pageCampaigns .cmp-entity-tabs,
#pageCampaigns .cmp-viewtabs { margin-bottom: 14px; }

/* The travelling pill. Painted behind the buttons, moved by morph.js with a
   transform — never by changing `left`, which cannot be composited. */
#pageCampaigns .bbm-thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: var(--bbm-r-pill);
  background: var(--bbm-thumb);
  box-shadow: var(--bbm-sh-thumb);
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--bbm-t-slide) var(--bbm-ease),
    width var(--bbm-t-slide) var(--bbm-ease),
    opacity .16s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform, width;
}
#pageCampaigns .bbm-thumb.is-on { opacity: 1; }
/* First paint must not slide in from x=0 — that reads as a glitch, not a move. */
#pageCampaigns .bbm-thumb.is-cold { transition: opacity .16s ease; }

#pageCampaigns .cmp-viewtab,
#pageCampaigns .cmp-plat-tab,
#pageCampaigns .cmp-entity-tab,
#pageCampaigns .cmp-period-btn,
#pageCampaigns .cmp-seg-btn,
#pageCampaigns .rc-plat-btn {
  position: relative;
  z-index: 1;                      /* above the thumb */
  border: 0;
  border-radius: var(--bbm-r-pill);
  background: none;
  box-shadow: none;
  color: var(--bbm-chip-ink);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: color .18s ease;
  margin: 0;
}
#pageCampaigns .cmp-plat-tab {
  padding: 9px 18px;
  font-size: 13.5px;
  border-bottom: 0;                /* was the active indicator */
  margin-bottom: 0;
}
#pageCampaigns .cmp-viewtab,
#pageCampaigns .cmp-entity-tab { padding: 8px 16px; font-size: 13px; }
#pageCampaigns .cmp-period-btn { padding: 6px 13px; font-size: 12px; }
#pageCampaigns .cmp-seg-btn    { padding: 6px 13px; font-size: 12px; }
#pageCampaigns .rc-plat-btn    { padding: 6px 14px; font-size: 12px; }

#pageCampaigns .cmp-viewtab:hover,
#pageCampaigns .cmp-plat-tab:hover,
#pageCampaigns .cmp-entity-tab:hover,
#pageCampaigns .cmp-period-btn:hover,
#pageCampaigns .cmp-seg-btn:hover,
#pageCampaigns .rc-plat-btn:hover { color: var(--bbm-thumb-ink); background: none; }

/* Active: ink and weight only. The fill is the thumb's job — see the HARD
   RULE. `background: none` here is what neutralises index.html's own
   `.active { background: white }` without editing it. */
#pageCampaigns .cmp-viewtab.active,
#pageCampaigns .cmp-plat-tab.active,
#pageCampaigns .cmp-entity-tab.active,
#pageCampaigns .cmp-period-btn.active,
#pageCampaigns .cmp-seg-btn.active,
#pageCampaigns .rc-plat-btn.active {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--bbm-thumb-ink);
  font-weight: 700;
}
/* No thumb yet (morph.js absent, or a group with nothing selected): the active
   chip still has to look selected. `.bbm-has-thumb` is set by morph.js, so this
   is the graceful-degradation branch and it must stay. */
#pageCampaigns .cmp-viewtab.active:not(.bbm-has-thumb),
#pageCampaigns .cmp-plat-tab.active:not(.bbm-has-thumb),
#pageCampaigns .cmp-entity-tab.active:not(.bbm-has-thumb),
#pageCampaigns .cmp-period-btn.active:not(.bbm-has-thumb),
#pageCampaigns .cmp-seg-btn.active:not(.bbm-has-thumb),
#pageCampaigns .rc-plat-btn.active:not(.bbm-has-thumb) {
  background: var(--bbm-thumb);
  box-shadow: var(--bbm-sh-thumb);
}

/* The count badge on a platform tab rides along, so it has to read on both the
   chip and the white pill. */
#pageCampaigns .cmp-plat-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--bbm-chip-ink);
}
#pageCampaigns .cmp-plat-tab.active .cmp-plat-count { color: var(--bbm-thumb-ink); }

/* The period bar's label and the free-standing Custom inputs are not pills and
   must not inherit the group's fill. */
#pageCampaigns .cmp-period-bar { gap: 12px; }
#pageCampaigns .cmp-period-label { color: var(--bbm-chip-ink); }

/* ==========================================================================
   2 · CARDS — one is a card, the rest are the page
   ========================================================================== */

#pageCampaigns .cmp-camp-list { gap: 6px; }

#pageCampaigns .cmp-camp-row,
#pageCampaigns .cmp-unit-row {
  background: var(--bbm-quiet);
  border: 0;
  border-radius: var(--bbm-r-card);
  box-shadow: none;
  color: var(--bbm-quiet-ink);
  padding: 13px 16px;
  transition:
    background var(--bbm-t-lift) ease,
    box-shadow var(--bbm-t-lift) ease,
    transform var(--bbm-t-lift) var(--bbm-ease);
  will-change: transform;
}
/* Hover and keyboard focus are the same event as far as this page is concerned:
   this is the row you are dealing with, so it becomes the card. */
#pageCampaigns .cmp-camp-row:hover,
#pageCampaigns .cmp-unit-row:hover,
#pageCampaigns .cmp-camp-row:focus-within,
#pageCampaigns .cmp-unit-row:focus-within,
#pageCampaigns .cmp-camp-row.bbm-lift,
#pageCampaigns .cmp-unit-row.bbm-lift {
  background: var(--bbm-card);
  box-shadow: var(--bbm-sh-lift);
  transform: translateY(-1px);
  z-index: 2;
}
/* The row that was clicked stays lifted while the drill-in loads, so the thing
   you pointed at is still the thing on screen when the content changes. */
#pageCampaigns .cmp-camp-row.bbm-lift,
#pageCampaigns .cmp-unit-row.bbm-lift { position: relative; }

#pageCampaigns .cmp-unit-row.cmp-unit-paused { background: transparent; opacity: .5; }
#pageCampaigns .cmp-unit-row.cmp-unit-paused:hover { opacity: 1; background: var(--bbm-card); }

#pageCampaigns .rc-card,
.rc-hub .rc-card {
  border: 0;
  border-radius: var(--bbm-r-card);
  box-shadow: 0 0 0 1px var(--bbm-card-line, rgba(16, 24, 40, .07));
  transition: box-shadow var(--bbm-t-lift, .26s) ease, transform var(--bbm-t-lift, .26s) ease;
}
#pageCampaigns .rc-card:hover,
.rc-hub .rc-card:hover {
  box-shadow: var(--bbm-sh-lift, 0 10px 26px -8px rgba(16, 24, 40, .14));
  transform: translateY(-1px);
}
.cg-hub .cg-card {
  border: 0;
  border-radius: var(--bbm-r-card, 18px);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .07);
}
.cg-hub .cg-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(16, 24, 40, .07),
    0 12px 30px -8px rgba(16, 24, 40, .16);
}

/* ==========================================================================
   3 · CHIPS — the reference's #roadtrip / +3 pills
   ========================================================================== */

#pageCampaigns .cmp-prog-tag,
#pageCampaigns .cmp-prog-chip-more,
#pageCampaigns .cmp-glearn-tag {
  border-radius: var(--bbm-r-pill);
  background: var(--bbm-chip);
  border: 0;
  color: var(--bbm-quiet-ink);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
}
/* On the lifted card the chips sit on white, so the flat chip needs a hair
   more contrast to stay a chip. */
#pageCampaigns .cmp-camp-row:hover .cmp-prog-tag,
#pageCampaigns .cmp-camp-row.bbm-lift .cmp-prog-tag,
#pageCampaigns .cmp-unit-row:hover .cmp-prog-tag,
#pageCampaigns .cmp-unit-row.bbm-lift .cmp-prog-tag {
  background: rgba(16, 24, 40, .055);
  color: #3E3E3E;
}
html[data-bb-theme="dark"] #pageCampaigns .cmp-camp-row:hover .cmp-prog-tag,
html[data-bb-theme="dark"] #pageCampaigns .cmp-camp-row.bbm-lift .cmp-prog-tag {
  background: rgba(255, 255, 255, .09);
  color: #EEF1F6;
}

/* ==========================================================================
   4 · THE MORPH — a row becoming the view it opens
   --------------------------------------------------------------------------
   The ghost is a CLONE of the clicked row, fixed over the page, animated from
   the row's own rect to where the new content landed. It is decoration with no
   data of its own: `aria-hidden`, no pointer events, and it removes itself. If
   anything about the drill-in is slow or fails, the ghost is gone in 420ms and
   the page is exactly what it would have been.
   ========================================================================== */

.bbm-ghost {
  position: fixed;
  z-index: 900;                    /* under the dropdown layer, over the page */
  margin: 0;
  border-radius: var(--bbm-r-card, 18px);
  background: var(--bbm-card, #fff);
  box-shadow:
    0 0 0 1px rgba(16, 24, 40, .07),
    0 18px 40px -12px rgba(16, 24, 40, .22);
  overflow: hidden;
  pointer-events: none;
  transform-origin: top left;
  will-change: transform, opacity;
}
.bbm-ghost.is-flying {
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    opacity .42s ease,
    border-radius .42s ease;
}
.bbm-ghost.is-gone { opacity: 0; }

/* Rows entering after a render: a short rise, staggered, capped in morph.js so
   the twentieth row is not still animating when you reach for it. */
@keyframes bbm-rise {
  from { opacity: 0; transform: translateY(8px) scale(.994); }
  to   { opacity: 1; transform: none; }
}
#pageCampaigns .bbm-in {
  animation: bbm-rise .40s var(--bbm-ease) both;
  animation-delay: calc(var(--bbm-i, 0) * 26ms);
}

/* The skeletons are the reference's flat grey blocks: no navy tint, no
   gradient that reads as a different material from the rows around it. */
#pageCampaigns .cmp-skel-shimmer {
  background: linear-gradient(90deg,
    rgba(16, 24, 40, .045) 25%,
    rgba(16, 24, 40, .085) 37%,
    rgba(16, 24, 40, .045) 63%);
  background-size: 400% 100%;
}
#pageCampaigns .cmp-skel-line { border-radius: 999px; }

/* ==========================================================================
   5 · THE DARK-MODE LITERALS THIS PAGE STILL CARRIES
   --------------------------------------------------------------------------
   beautiful.css remaps the legacy aliases for dark mode but deliberately
   leaves `--navy` as navy ("anything still light after this is a hardcoded
   literal — that is the follow-up sweep"). The Explorer rows used to paint
   `background: white` in BOTH themes, so navy-on-white stayed readable by
   accident. Section 2 takes that white away, which makes the ink this file's
   problem: measured in dark mode, every campaign name went navy-on-navy and
   the list read as empty rows with numbers floating in them.

   So this is the sweep, for this page only, and it is not cosmetic —
   `.cmp-unit-name` is the campaign name.
   ========================================================================== */

html[data-bb-theme="dark"] #pageCampaigns .cmp-unit-name,
html[data-bb-theme="dark"] #pageCampaigns .cmp-unit-sub b,
html[data-bb-theme="dark"] #pageCampaigns .cmp-kpi-chip .kc-val.spend {
  color: var(--bb-ink);
}
html[data-bb-theme="dark"] #pageCampaigns .cmp-unit-row.cmp-unit-paused .cmp-unit-name {
  color: var(--bb-ink-3);
}
/* The toolbar is `background: white` with no dark branch, so it lands as a
   white slab holding white-on-white buttons — visible in the dark screenshot
   before this rule existed. */
html[data-bb-theme="dark"] #pageCampaigns .cmp-toolbar {
  background: var(--bb-surface);
  border-color: var(--bb-line);
}
/* Same literal, two more places: both toolbar toggles are `background: white;
   color: var(--navy)`, which in dark mode is a white block with navy text
   floating in a dark bar. Their ACTIVE state (navy fill, white text) is left
   alone — it still reads. */
html[data-bb-theme="dark"] #pageCampaigns .cmp-analyze-toggle:not(.active),
html[data-bb-theme="dark"] #pageCampaigns .cmp-rawname-toggle:not(.active) {
  background: var(--bb-field);
  border-color: var(--bb-line-strong);
  color: var(--bb-ink);
}
html[data-bb-theme="dark"] #pageCampaigns .cmp-search-input {
  background: var(--bb-field);
  border-color: var(--bb-line-strong);
  color: var(--bb-ink);
}

@media (prefers-reduced-motion: reduce) {
  #pageCampaigns .bbm-thumb { transition: opacity .16s ease; }
  #pageCampaigns .cmp-camp-row,
  #pageCampaigns .cmp-unit-row { transition: background .12s ease, box-shadow .12s ease; }
  #pageCampaigns .cmp-camp-row:hover,
  #pageCampaigns .cmp-unit-row:hover,
  #pageCampaigns .bbm-lift { transform: none; }
  #pageCampaigns .bbm-in { animation: none; }
  .bbm-ghost { display: none; }
}