/* State-transition menu (design-system menu atom, the Delete-on-state-menu
   pattern): the trigger badge, the dropdown, its items, the divider, the
   Delete and Undo-delete items and the state dots. Used by every record
   page's state badge and by the Index selection row's Actions menu, so
   the layout links it on every page. Moved out of campaign_page.css, where every rule was scoped to .cpv1-body;
   the Index selection row sits outside that wrapper, so the rules are
   global here (page stylesheets still override at higher specificity) and
   read the design tokens directly rather than the page's --cp-* aliases. */

/* ---------- planning-state transition menu ---------- */

.cpv1-badge--clickable {
  cursor: pointer;
  border: none;
  font-family: inherit;
}
/* Every state-menu anchors to its own trigger wrapper (canon: menus
 * anchor below the trigger, flipping on clip — never the page edge).
 * Without this, body-row menus anchored to the nearest positioned
 * ancestor, which could be the page itself. */
[data-controller~="cpv1-state-menu"] { position: relative; }
.cpv1-state-menu {
  display: none;
  position: absolute;
  /* Deterministic anchor: directly below the trigger wrapper. Without
   * an explicit top, absolute elements fall at their static position,
   * which inside flex wrappers can land beside or above the trigger. */
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  z-index: 20;
}
.cpv1-state-menu.cpv1-state-menu--open { display: block; }
/* Left-anchored variant — used by the facts-column Vertical menu, which
 * sits at the left of its value cell (the hero state menu anchors right). */
.cpv1-state-menu--left { left: 0; right: auto; }
/* State menu items per STATE_CHANGE_MENU_SPEC.md — flex row with a
 * colored dot, label, and (current only) a "current" marker. */
.cpv1-state-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 6px 10px 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
}
.cpv1-state-menu-item:hover { background: var(--surface-2); }
.cpv1-state-menu-item--current {
  cursor: default;
}
.cpv1-state-menu-item--current:hover { background: transparent; }
.cpv1-state-menu-item--current .cpv1-state-label {
  color: var(--fg-muted);
}
.cpv1-state-label { flex: 1; }
.cpv1-state-menu-tag {
  font-size: 11px;
  color: var(--fg-faint);
  font-weight: 500;
}
/* Delete row at the bottom of the state menu, separated by a divider.
 * Per AUDIENCE_MARKETING_AUDIT_AND_UNDO.md §5.1. The divider signals
 * "Delete is not a peer choice with the workflow states." */
.cpv1-state-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 4px;
}
.cpv1-state-menu-item--delete {
  color: var(--color-danger-text);
}
.cpv1-state-menu-item--delete .cpv1-state-menu-icon {
  width: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger-text);
  font-weight: 600;
}
.cpv1-state-menu-item--delete:hover { background: #fef2f2; }
/* Undo-delete row — single item shown when the menu is opened on a
 * soft-deleted record. Per AUDIENCE_MARKETING_AUDIT_AND_UNDO.md §5.4. */
.cpv1-state-menu-item--undo-delete {
  color: var(--link-blue, #2563eb);
}
.cpv1-state-menu-item--undo-delete .cpv1-state-menu-icon {
  width: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--link-blue, #2563eb);
}
.cpv1-state-menu-item--undo-delete:hover { background: #eff6ff; }

/* Colored dot — fills + matching lighter border per spec section 3. */
.cpv1-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid;
}
.cpv1-state-dot--draft     { background: var(--color-slate-300); border-color: var(--color-slate-300); }
.cpv1-state-dot--in_review { background: #93c5fd; border-color: #bfdbfe; }
.cpv1-state-dot--approved  { background: #86efac; border-color: #bbf7d0; }
.cpv1-state-dot--revising  { background: #fcd34d; border-color: #fde68a; }
.cpv1-state-dot--archived  { background: var(--surface-2); border-color: var(--color-slate-300); }