/* ═══════════════════════════════════════════════════════════════════
   CX Management — canonical stylesheet
   Ported 1:1 from DMB/cx-management/index.html visual design,
   with full migration to var(--cxm-*) tokens from cxm-tokens.css.
   NEVER hardcode a hex or a non-scale px here — extend tokens instead.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Scoped reset ──────────────────────────────────────────────────
   box-sizing applies to every cxm-* element and its direct children
   (harmless on icons). font-family is gated with :not(.fa) so that
   `<i class="fa fa-chevron-right cxm-sc-arrow">` keeps FontAwesome's
   own `font-family: FontAwesome` rule — otherwise the browser tries
   to render FA's private-use codepoints in Inter and falls back to
   missing-glyph boxes (the ≡ the user saw on the DMB channel tile). */
[class^="cxm-"],
[class*=" cxm-"] {
  box-sizing: border-box;
}
[class^="cxm-"] > *,
[class*=" cxm-"] > * {
  box-sizing: border-box;
}
[class^="cxm-"]:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.glyphicon),
[class*=" cxm-"]:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.glyphicon) {
  font-family: var(--cxm-font);
}


/* ── Page shell ────────────────────────────────────────────────── */
/* Horizontal padding intentionally slim — .cxm-page sits inside the
   enterprise `.rw-form` wrapper (18px) + Bootstrap `.container-fluid`
   (15px), which together already provide ~33px of outer gutter. Adding
   another 32px here compounded to a 65px gutter and pushed content far
   right. Keep vertical padding generous. */
.cxm-page {
  padding: var(--cxm-sp-7) var(--cxm-sp-3) var(--cxm-sp-9);
  color: var(--cxm-g100);
  background: var(--cxm-g10);
  font-family: var(--cxm-font);
}

.cxm-title {
  font-size: var(--cxm-fs-22);
  font-weight: var(--cxm-fw-800);
  letter-spacing: var(--cxm-ls-tight);
  color: var(--cxm-g100);
  margin: 0 0 var(--cxm-sp-1);
  line-height: var(--cxm-lh-snug);
}

.cxm-subtitle {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-400);
  color: var(--cxm-g70);
  line-height: var(--cxm-lh-relaxed);
  margin: 0;
}

.cxm-header {
  margin-bottom: var(--cxm-sp-7);
}
.cxm-header h1 {
  font-size: var(--cxm-fs-22);
  font-weight: var(--cxm-fw-800);
  letter-spacing: var(--cxm-ls-tight);
  color: var(--cxm-g100);
  margin: 0 0 var(--cxm-sp-1);
}
.cxm-header p {
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-400);
  line-height: var(--cxm-lh-relaxed);
  margin: 0;
}


/* ── Breadcrumb ────────────────────────────────────────────────── */
.cxm-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  font-size: var(--cxm-fs-13);
  margin-bottom: var(--cxm-sp-5);
}
.cxm-breadcrumb a {
  color: var(--cxm-b60);
  text-decoration: none;
  font-weight: var(--cxm-fw-500);
  transition: color .15s var(--cxm-ease);
}
.cxm-breadcrumb a:hover {
  color: var(--cxm-b70);
  text-decoration: underline;
}
.cxm-breadcrumb__sep {
  color: var(--cxm-g50);
  font-size: var(--cxm-fs-10);
}
.cxm-breadcrumb__current {
  color: var(--cxm-g90);
  font-weight: var(--cxm-fw-600);
}


/* ── Section header ────────────────────────────────────────────── */
.cxm-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--cxm-sp-4);
  flex-wrap: wrap;
  gap: var(--cxm-sp-3);
}
.cxm-section-hdr__title {
  font-size: var(--cxm-fs-15);
  font-weight: var(--cxm-fw-800);
  color: var(--cxm-g100);
  letter-spacing: var(--cxm-ls-snug);
  margin: 0 0 2px;
}
.cxm-section-hdr__sub {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-400);
  margin: 0;
}


/* ── Status cards (CX channel tiles) ───────────────────────────── */
.cxm-status-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cxm-sp-4);
  margin-bottom: var(--cxm-sp-7);
}
.cxm-status-card {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  padding: var(--cxm-sp-6) var(--cxm-sp-6);
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease);
}
.cxm-status-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cxm-sm);
  border-color: var(--cxm-g40);
}
.cxm-status-card:hover .cxm-sc-icon  { transform: scale(1.08); }
.cxm-status-card:hover .cxm-sc-arrow { color: var(--cxm-b60); transform: translateX(3px); }

.cxm-sc-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cxm-rl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--cxm-dur) var(--cxm-ease);
  font-size: var(--cxm-fs-20);
}
.cxm-sc-icon--blue   { background: var(--cxm-b10); color: var(--cxm-b60); }
.cxm-sc-icon--green  { background: var(--cxm-s10); color: var(--cxm-s60); }
.cxm-sc-icon--purple { background: var(--cxm-p10); color: var(--cxm-p60); }
.cxm-sc-icon--grey   { background: var(--cxm-g20); color: var(--cxm-g70); }

.cxm-sc-info  { flex: 1; min-width: 0; }
.cxm-sc-title {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-800);
  letter-spacing: var(--cxm-ls-snug);
  margin-bottom: var(--cxm-sp-1);
}
.cxm-sc-title--blue   { color: var(--cxm-b70); }
.cxm-sc-title--green  { color: var(--cxm-s70); }
.cxm-sc-title--purple { color: var(--cxm-p70); }
.cxm-sc-title--grey   { color: var(--cxm-g90); }

.cxm-sc-status {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g70);
}

.cxm-sc-arrow {
  color: var(--cxm-g50);
  flex-shrink: 0;
  transition: transform var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
}


/* ── Pill / badge ──────────────────────────────────────────────── */
.cxm-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  padding: 3px 10px;
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
  line-height: var(--cxm-lh-normal);
}
.cxm-pill--success { background: var(--cxm-s10); color: var(--cxm-s80); border: 1px solid rgba(16,180,143,.25); }
.cxm-pill--error   { background: var(--cxm-e10); color: var(--cxm-e80); border: 1px solid rgba(255,111,146,.25); }
.cxm-pill--warning { background: var(--cxm-o10); color: var(--cxm-o80); border: 1px solid rgba(255,151,114,.25); }
.cxm-pill--blue    { background: var(--cxm-b10); color: var(--cxm-b70); border: 1px solid rgba(65,133,244,.2); }
.cxm-pill--grey    { background: var(--cxm-g20); color: var(--cxm-g80); border: 1px solid var(--cxm-g30); }
.cxm-pill--purple  { background: var(--cxm-p10); color: var(--cxm-p70); border: 1px solid rgba(134,95,194,.22); }

.cxm-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cxm-s60);
  flex-shrink: 0;
  animation: cxm-pulse 2s infinite var(--cxm-ease);
}
@keyframes cxm-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}

.cxm-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 var(--cxm-sp-2);
  background: var(--cxm-b60);
  color: #fff;
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
}


/* ── Buttons ───────────────────────────────────────────────────── */
.cxm-btn {
  font-family: var(--cxm-font);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  padding: 9px 18px;
  border-radius: var(--cxm-r);
  cursor: pointer;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease),
              transform 80ms var(--cxm-ease);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cxm-sp-1);
  line-height: 1;
  white-space: nowrap;
}
.cxm-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,.25);
}
.cxm-btn:disabled,
.cxm-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}
.cxm-btn svg { width: 14px; height: 14px; }

.cxm-btn--primary {
  background: var(--cxm-b60);
  color: #fff;
  border-color: var(--cxm-b60);
  box-shadow: 0 2px 8px rgba(65,133,244,.25);
}
.cxm-btn--primary:hover   { background: var(--cxm-b70); border-color: var(--cxm-b70); box-shadow: 0 4px 12px rgba(65,133,244,.35); }
.cxm-btn--primary:active  { transform: scale(.98); }

.cxm-btn--ghost {
  background: #fff;
  border-color: var(--cxm-g30);
  color: var(--cxm-g80);
}
.cxm-btn--ghost:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g100);
}

.cxm-btn--danger {
  background: var(--cxm-e60);
  color: #fff;
  border-color: var(--cxm-e60);
  box-shadow: 0 2px 8px rgba(255,111,146,.25);
}
.cxm-btn--danger:hover { background: var(--cxm-e70); border-color: var(--cxm-e70); }

.cxm-btn--success {
  background: var(--cxm-s60);
  color: #fff;
  border-color: var(--cxm-s60);
  box-shadow: 0 2px 8px rgba(16,180,143,.25);
}
.cxm-btn--success:hover { background: var(--cxm-s70); border-color: var(--cxm-s70); box-shadow: 0 4px 12px rgba(16,180,143,.35); }

.cxm-btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--cxm-b60);
  padding: 6px 10px;
}
.cxm-btn--text:hover { color: var(--cxm-b70); background: var(--cxm-b10); }

.cxm-btn--sm { padding: 7px 14px; font-size: var(--cxm-fs-12); height: 34px; }
.cxm-btn--lg { padding: 11px 22px; font-size: var(--cxm-fs-14); height: 44px; }

/* ── Split button: main action + dropdown-caret as one visual unit ──
   Bootstrap's .btn-group + .dropdown-toggle pattern places two buttons
   next to each other; the original .btn class flattened the touching
   edges. Our .cxm-btn doesn't inherit those overrides, so the buttons
   render as two separate pills. These rules restore the joined look:
   shared outer rounded corners, flat inner edges, no gap, equal height,
   1px overlap so the borders collapse into one.

   Implementation note: we use flexbox on the .btn-group container
   (rather than `float: left` on children) so that .cxm-btn's existing
   `inline-flex; align-items: center` keeps both halves the same
   computed height — important because the main half has icon+text but
   the caret half has only a 0-height border-triangle. Without flex
   align-stretch, the caret half would render shorter. */
.btn-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}
.btn-group > .cxm-btn {
  position: relative;
}
.btn-group > .cxm-btn:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .cxm-btn:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Hover state on either half lifts that half above the neighbor so the
   shadow / border-color change isn't clipped by the adjacent button. */
.btn-group > .cxm-btn:hover,
.btn-group > .cxm-btn:focus,
.btn-group > .cxm-btn:active {
  z-index: 2;
}
/* Caret-only toggle is visually a 'minor' half — narrower horizontal
   padding so the triangle isn't swimming in whitespace. Vertical
   padding stays in sync with the main half via .cxm-btn's base rule. */
.btn-group > .cxm-btn.dropdown-toggle {
  padding-left: 10px;
  padding-right: 10px;
}
.btn-group > .cxm-btn.dropdown-toggle .caret {
  margin: 0;
}


/* ── Form controls ─────────────────────────────────────────────── */
.cxm-form-input,
.cxm-input {
  width: 100%;
  max-width: 560px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  font-size: var(--cxm-fs-13);
  font-family: var(--cxm-font);
  color: var(--cxm-g90);
  background: #fff;
  outline: none;
  transition: border-color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-form-input::placeholder,
.cxm-input::placeholder { color: var(--cxm-g60); }
.cxm-form-input:focus,
.cxm-input:focus {
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 3px rgba(65,133,244,.1);
}
.cxm-form-input:disabled,
.cxm-input:disabled {
  background: var(--cxm-g20);
  color: var(--cxm-g60);
  cursor: not-allowed;
}
.cxm-form-input--sm,
.cxm-input--sm { height: 34px; font-size: var(--cxm-fs-12); }

.cxm-label {
  display: block;
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
  margin-bottom: var(--cxm-sp-1);
}
.cxm-field-hint {
  display: block;
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  margin-top: var(--cxm-sp-1);
}
/* Label row with a right-aligned live character counter. */
.cxm-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cxm-sp-2);
}
.cxm-field-count {
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g60);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cxm-field-error {
  display: block;
  font-size: var(--cxm-fs-11);
  color: var(--cxm-e70);
  margin-top: var(--cxm-sp-1);
}
.cxm-form-input.is-invalid,
.cxm-input.is-invalid { border-color: var(--cxm-e60); }
.cxm-form-input.is-invalid:focus,
.cxm-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(255,111,146,.15); }

.cxm-select {
  width: 100%;
  max-width: 320px;
  height: 40px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  font-size: var(--cxm-fs-13);
  font-family: var(--cxm-font);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g90);
  background: #fff
    url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239DA2AA' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-select:hover { border-color: var(--cxm-g50); }
.cxm-select:focus {
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 3px rgba(65,133,244,.1);
}
.cxm-select--sm { height: 34px; font-size: var(--cxm-fs-12); }

.cxm-search-wrap { position: relative; display: inline-block; width: 100%; max-width: 320px; }
.cxm-search-wrap--full { display: block; max-width: 100%; }


/* ── Sticky search (brand list) ──────────────────────────────────
   Pins below the enterprise fixed topbar (52px). Background matches
   the app body color (#f8f8f8 from app.css body) so the wrapper
   reads as page. Top+bottom padding give breathing room and also
   paint over cards that would otherwise scroll behind the wrapper.
   Subtle bottom shadow softens the line into the card grid and
   visually forgives any tiny tone drift between the wrapper's
   #f8f8f8 and the actual parent computed color. */
.cxm-sticky-search {
  position: -webkit-sticky;
  position: sticky;
  top: 52px;
  z-index: 20;
  padding: var(--cxm-sp-3) 0 var(--cxm-sp-4);
  margin: calc(var(--cxm-sp-3) * -1) 0 var(--cxm-sp-4);
  background: #f8f8f8;
}
.cxm-sticky-search::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(4, 9, 17, .04) 0%,
    rgba(4, 9, 17, 0) 100%);
}
.cxm-search-wrap--inline { display: inline-flex; align-items: center; vertical-align: middle; }
.cxm-search-wrap svg,
.cxm-search-wrap .fa {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--cxm-g60);
  pointer-events: none;
  font-size: var(--cxm-fs-13);
}
.cxm-search-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--cxm-sp-3) 0 36px;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  font-size: var(--cxm-fs-13);
  font-family: var(--cxm-font);
  color: var(--cxm-g90);
  background: #fff;
  outline: none;
  transition: border-color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-search-input:focus {
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 3px rgba(65,133,244,.1);
}
.cxm-search-input--sm { height: 34px; font-size: var(--cxm-fs-12); padding-left: 32px; }


/* ── Card block (section container w/ tabs, actions) ─────────── */
.cxm-card-block {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  margin-bottom: var(--cxm-sp-5);
  overflow: hidden;
}
/* Variant for cards that host a kebab/popover (Screen Groups, etc.) — drops
   the clip so the dropdown can escape below the last row. The inner
   `.cxm-table-wrap` + explicit thead corner-radius compensate for the lost
   rounded-corner clipping. */
.cxm-card-block--menu-host { overflow: visible; }
.cxm-card-block--menu-host .cxm-table-wrap {
  border-radius: var(--cxm-rl) var(--cxm-rl) 0 0;
  overflow-x: auto;
}
.cxm-card-block--menu-host .cxm-table thead tr th:first-child { border-top-left-radius:  var(--cxm-rl); }
.cxm-card-block--menu-host .cxm-table thead tr th:last-child  { border-top-right-radius: var(--cxm-rl); }
.cxm-card-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cxm-sp-4) var(--cxm-sp-6);
  border-bottom: 1px solid var(--cxm-g30);
  flex-wrap: wrap;
  gap: var(--cxm-sp-3);
}
.cxm-card-block__header-left {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  min-width: 0;
}
.cxm-card-block__bar {
  width: 4px;
  height: 20px;
  background: var(--cxm-b60);
  border-radius: 2px;
  flex-shrink: 0;
}
.cxm-card-block__title {
  font-size: var(--cxm-fs-15);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  letter-spacing: var(--cxm-ls-snug);
  margin: 0;
}
.cxm-card-block__sub {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  margin: 3px 0 0;
  font-weight: var(--cxm-fw-400);
}
.cxm-card-block__actions {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  flex-wrap: wrap;
}
.cxm-card-block__body { padding: var(--cxm-sp-6); }
.cxm-card-block__body--flush { padding: 0; }


/* ── Breadcrumb back variant (Ripunjay / OLALA_2 ideal design) ─ */
.cxm-breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cxm-b60);
  font-weight: var(--cxm-fw-500);
  text-decoration: none;
  cursor: pointer;
}
.cxm-breadcrumb__back:hover { color: var(--cxm-b70); text-decoration: underline; }
.cxm-breadcrumb__back .fa { font-size: var(--cxm-fs-10); }


/* ── Bootstrap <tabset> overlay — renders .nav-tabs as pills ──
   The Angular UI Bootstrap tabset directive outputs <ul class="nav nav-tabs">
   with <li class="active"><a>…</a></li>. Scoped under .cxm-bd-tabs-scope
   so only DMB / CX tabs get the pill look; other tabsets app-wide
   keep their Bootstrap default. */
.cxm-bd-tabs-scope .nav.nav-tabs {
  display: flex;
  gap: var(--cxm-sp-1);
  border-bottom: none;
  margin: 0 0 var(--cxm-sp-6);
  padding: 0;
  flex-wrap: wrap;
}
.cxm-bd-tabs-scope .nav.nav-tabs > li {
  float: none;
  margin: 0;
}
.cxm-bd-tabs-scope .nav.nav-tabs > li > a {
  font-family: var(--cxm-font);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  padding: 8px 20px;
  border-radius: var(--cxm-rf);
  border: 1px solid var(--cxm-g30);
  background: #fff;
  color: var(--cxm-g80);
  margin: 0;
  line-height: 1.4;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-bd-tabs-scope .nav.nav-tabs > li > a:hover,
.cxm-bd-tabs-scope .nav.nav-tabs > li > a:focus {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g100);
}
.cxm-bd-tabs-scope .nav.nav-tabs > li.active > a,
.cxm-bd-tabs-scope .nav.nav-tabs > li.active > a:hover,
.cxm-bd-tabs-scope .nav.nav-tabs > li.active > a:focus {
  background: var(--cxm-b60);
  border-color: var(--cxm-b60);
  color: #fff;
  box-shadow: 0 2px 8px rgba(65, 133, 244, .25);
}
.cxm-bd-tabs-scope .tab-content { padding-top: 0; }


/* ── Brand detail tabs (pill-tab style) ───────────────────────── */
.cxm-bd-tabs {
  display: flex;
  gap: var(--cxm-sp-1);
  margin-bottom: var(--cxm-sp-7);
  flex-wrap: wrap;
}
.cxm-bd-tab {
  font-family: var(--cxm-font);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  padding: 8px 20px;
  border-radius: var(--cxm-rf);
  border: 1px solid var(--cxm-g30);
  background: #fff;
  color: var(--cxm-g80);
  cursor: pointer;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-bd-tab:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g100);
}
.cxm-bd-tab.is-active,
.cxm-bd-tab--active {
  background: var(--cxm-b60);
  border-color: var(--cxm-b60);
  color: #fff;
  box-shadow: 0 2px 8px rgba(65,133,244,.25);
}
.cxm-bd-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,.25);
}


/* ── Brand cards grid (VIEW 2) ────────────────────────────────── */
.cxm-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cxm-sp-4);
}
.cxm-brand-card {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  padding: var(--cxm-sp-5);
  transition: transform var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  box-shadow: inset 0 3px 0 transparent;
}
.cxm-brand-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 3px 0 var(--cxm-b60), var(--cxm-sm);
}
.cxm-brand-card__name {
  font-size: var(--cxm-fs-14);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-b70);
  margin: 0 0 var(--cxm-sp-4);
  line-height: 1.35;
}
.cxm-brand-card__label {
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
}
.cxm-brand-card__row {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g80);
  line-height: var(--cxm-lh-normal);
}
.cxm-brand-card__row svg,
.cxm-brand-card__row .fa {
  width: 14px;
  height: 14px;
  color: var(--cxm-g60);
  flex-shrink: 0;
}
.cxm-brand-card__row strong { font-weight: var(--cxm-fw-600); }
.cxm-brand-card__status { margin-top: var(--cxm-sp-1); }


/* ── Health KPI cards ─────────────────────────────────────────── */
.cxm-health-title {
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--cxm-g70);
  margin-bottom: var(--cxm-sp-3);
}

.cxm-health-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cxm-sp-3);
  margin-bottom: var(--cxm-sp-8);
}

.cxm-health-card {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  padding: var(--cxm-sp-5);
  position: relative;
  transition: box-shadow var(--cxm-dur) var(--cxm-ease);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
}
.cxm-health-card:hover { box-shadow: var(--cxm-sh); }

.cxm-health-card--screens  { background: linear-gradient(135deg, var(--cxm-s10) 0%, #fff 60%); border-color: rgba(16,180,143,.18); }
.cxm-health-card--inactive { background: linear-gradient(135deg, var(--cxm-e10) 0%, #fff 60%); border-color: rgba(255,111,146,.18); }
.cxm-health-card--publish  { background: linear-gradient(135deg, var(--cxm-p10) 0%, #fff 60%); border-color: rgba(134,95,194,.18); }

.cxm-health-label {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  margin-bottom: var(--cxm-sp-3);
}
/* Right-aligned pill rail inside a health-card header. Lets multiple
   tone-pills (EXPIRED + EXPIRING) stack horizontally with the same
   visual weight without each one having to claim margin-left:auto. */
.cxm-health-label__pills {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cxm-health-label__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cxm-r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: var(--cxm-fs-14);
  box-shadow: 0 2px 8px rgba(4,9,17,.12);
}
.cxm-health-label__icon--success { background: linear-gradient(135deg, var(--cxm-s60), #49B6E4); }
.cxm-health-label__icon--danger  { background: linear-gradient(135deg, var(--cxm-e60), var(--cxm-o60)); }
.cxm-health-label__icon--primary { background: linear-gradient(135deg, var(--cxm-b60), var(--cxm-p60)); }
.cxm-health-label__icon--purple  { background: linear-gradient(135deg, var(--cxm-p60), var(--cxm-b60)); }
.cxm-health-label__icon--warn    { background: linear-gradient(135deg, var(--cxm-o60), var(--cxm-e60)); }
.cxm-health-label__text {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g90);
}

.cxm-health-value {
  font-size: var(--cxm-fs-28);
  font-weight: var(--cxm-fw-900);
  color: var(--cxm-g100);
  line-height: var(--cxm-lh-tight);
  margin-bottom: var(--cxm-sp-1);
}
.cxm-health-value--sm { font-size: var(--cxm-fs-20); }
.cxm-health-value__muted {
  font-size: var(--cxm-fs-14);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g60);
}

.cxm-health-hint {
  display: flex;
  gap: var(--cxm-sp-3);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  margin-bottom: var(--cxm-sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.cxm-health-hint__ok     { color: var(--cxm-s70); }
.cxm-health-hint__danger { color: var(--cxm-e70); }
.cxm-health-hint__sep    { color: var(--cxm-g40); }

.cxm-health-bar {
  height: 8px;
  background: var(--cxm-g30);
  border-radius: var(--cxm-rf);
  overflow: hidden;
  min-width: 80px;
}
.cxm-health-bar-fill {
  height: 100%;
  border-radius: var(--cxm-rf);
  transition: width .5s var(--cxm-ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cxm-health-bar-fill--primary { background: linear-gradient(90deg, var(--cxm-b60), var(--cxm-b50)); }
.cxm-health-bar-fill--purple  { background: linear-gradient(90deg, var(--cxm-p60), var(--cxm-b60)); }
.cxm-health-bar-fill--warn    { background: linear-gradient(90deg, var(--cxm-w60), var(--cxm-o60)); }
.cxm-health-bar-fill--danger  { background: linear-gradient(90deg, var(--cxm-e60), var(--cxm-e70)); }

.cxm-health-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
}

.cxm-health-link {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-p60);
  font-weight: var(--cxm-fw-600);
  text-decoration: none;
  transition: color var(--cxm-dur) var(--cxm-ease);
}
.cxm-health-link:hover { color: var(--cxm-p70); text-decoration: underline; }

/* Right-align the "View history" action on the publish health card */
.cxm-health-card__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--cxm-sp-3);
}


/* ── Filter bar ───────────────────────────────────────────────── */
.cxm-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cxm-sp-3);
  margin-bottom: var(--cxm-sp-4);
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  flex-wrap: wrap;
}
.cxm-filter-bar__left,
.cxm-filter-bar__right {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  flex-wrap: wrap;
}
.cxm-filter-bar__count {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
  padding: 4px 10px;
  background: var(--cxm-g20);
  border-radius: var(--cxm-rf);
}
.cxm-filter-label {
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g70);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cxm-filter-deployment { min-width: 160px; }
.cxm-perpage { min-width: 72px; }

/* Inline form controls inside a filter bar must NOT take 100% width
   (the default on .cxm-form-input) — otherwise each dropdown wraps
   to its own row. Also override for ui-select which wants to block
   by default. */
.cxm-filter-bar .cxm-form-input,
.cxm-filter-bar .cxm-form-input--sm,
.cxm-filter-bar select.cxm-form-input { width: auto; max-width: none; min-width: 140px; }
.cxm-filter-bar .cxm-perpage             { min-width: 92px; }
.cxm-filter-bar .cxm-filter-deployment   { min-width: 180px; }
.cxm-filter-bar .cxm-search-wrap--inline { min-width: 200px; }

/* Right group stays on one line: search may shrink, the CTA never wraps.
   (Without this the search's base width:100% claims the row and pushes
   "New template" to a second line.) */
.cxm-filter-bar__right { flex-wrap: nowrap; }
.cxm-filter-bar__right .cxm-search-wrap--inline { width: auto; flex: 0 1 260px; min-width: 0; }
.cxm-filter-bar__right .cxm-btn { flex-shrink: 0; }

/* ── Flat variant (Templates): single row, inline count + explicit spacer.
   Use when children are siblings of the bar itself (no __left / __right
   wrappers) and the layout should push search + CTA to the far right
   via an explicit .cxm-filter-bar__spacer rather than space-between. */
.cxm-filter-bar--flat { justify-content: flex-start; flex-wrap: nowrap; }
.cxm-filter-bar__spacer { flex: 1 1 auto; min-width: 0; }

/* Plain (non-pill) count — reference renders "11 templates" as bold text,
   not a grey chip. Used only with .cxm-filter-bar--flat. */
.cxm-filter-bar__count--plain {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: var(--cxm-fs-14);
  color: var(--cxm-g90);
  white-space: nowrap;
}
.cxm-filter-bar__count--plain strong { font-weight: var(--cxm-fw-700); }

/* Segmented control — mutually-exclusive filter pills in one track. Active
   segment lifts to a white chip; inactive stay muted on the grey track. */
.cxm-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--cxm-g20);
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rf);
}
.cxm-seg__btn {
  border: none;
  background: transparent;
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g70);
  padding: 5px 14px;
  border-radius: var(--cxm-rf);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cxm-dur) var(--cxm-ease), color var(--cxm-dur) var(--cxm-ease);
}
.cxm-seg__btn:hover:not(.cxm-seg__btn--active) { color: var(--cxm-g90); }
.cxm-seg__btn--active {
  background: #fff;
  color: var(--cxm-b70);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.cxm-seg__btn:focus-visible { outline: 2px solid var(--cxm-b60); outline-offset: 1px; }
.dark .cxm-seg { background: #14161c; border-color: #2a2e37; }
.dark .cxm-seg__btn--active { background: #1f2530; color: var(--cxm-b50); box-shadow: none; }

/* Muted search affordance — soft grey fill that clears to white on focus.
   Mirrors the reference #F1F2F5 input inside the template filter bar. */
.cxm-search-input--muted {
  background: var(--cxm-g20);
  border-color: var(--cxm-g20);
}
.cxm-search-input--muted:focus {
  background: #fff;
  border-color: var(--cxm-b60);
}

/* Scoped ui-select override so the deployment dropdown matches sibling
   native .cxm-form-input--sm selects (same 34px height, same gray border,
   same radius, and no shared-ui-select blue hover bleed). Scoped to the
   filter bar only — do NOT move into cx.html's shared ui-select block. */
.cxm-filter-bar .cxm-filter-deployment .ui-select-bootstrap .ui-select-toggle {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-color: var(--cxm-g30) !important;
  border-radius: var(--cxm-r) !important;
  font-size: var(--cxm-fs-12) !important;
  color: var(--cxm-g90);
  background: #fff;
  box-shadow: none !important;
  display: flex;
  align-items: center;
}
.cxm-filter-bar .cxm-filter-deployment .ui-select-bootstrap .ui-select-toggle:hover {
  border-color: var(--cxm-g40) !important;
}
.cxm-filter-bar .cxm-filter-deployment .ui-select-bootstrap.open .ui-select-toggle,
.cxm-filter-bar .cxm-filter-deployment .ui-select-bootstrap .ui-select-toggle:focus {
  border-color: var(--cxm-b60) !important;
  box-shadow: 0 0 0 3px rgba(65,133,244,.1) !important;
  outline: none !important;
}
/* Placeholder + selected-text vertical centering inside the 34px toggle */
.cxm-filter-bar .cxm-filter-deployment .ui-select-bootstrap .ui-select-match-text,
.cxm-filter-bar .cxm-filter-deployment .ui-select-bootstrap .ui-select-placeholder {
  line-height: 32px;
}

/* Section header pushes count pills to the right in a single row */
.cxm-section-hdr__pills {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  flex-wrap: wrap;
}

/* Health KPI labels — uppercase + colored per the ideal design */
.cxm-health-label__text--success { color: var(--cxm-s70); }
.cxm-health-label__text--danger  { color: var(--cxm-e70); }
.cxm-health-label__text--primary { color: var(--cxm-b70); }
.cxm-health-label__text--purple  { color: var(--cxm-p70); }
.cxm-health-label__text--upper {
  text-transform: uppercase;
  letter-spacing: var(--cxm-ls-wide);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-800);
}


/* ── Table ────────────────────────────────────────────────────── */
.cxm-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cxm-g40) transparent;
}
.cxm-table-wrap::-webkit-scrollbar      { height: 5px; }
.cxm-table-wrap::-webkit-scrollbar-thumb{ background: var(--cxm-g40); border-radius: 3px; }

.cxm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.cxm-table thead th {
  padding: 10px var(--cxm-sp-4);
  font-size: var(--cxm-fs-10);
  font-weight: var(--cxm-fw-700);
  text-transform: uppercase;
  letter-spacing: var(--cxm-ls-wider);
  color: var(--cxm-g70);
  background: var(--cxm-g20);
  border-bottom: 1px solid var(--cxm-g30);
  text-align: left;
  white-space: nowrap;
}
.cxm-table tbody tr {
  border-bottom: 1px solid var(--cxm-g30);
  transition: background .12s var(--cxm-ease);
}
.cxm-table tbody tr:last-child { border-bottom: none; }
.cxm-table tbody tr:hover      { background: var(--cxm-g10); }
.cxm-table tbody td {
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g90);
  vertical-align: middle;
}
/* Specificity-matched so it wins over `.cxm-table thead th { text-align: left }` (0,0,2,1). */
.cxm-table thead th.cxm-th-center,
.cxm-table tbody td.cxm-td-center { text-align: center; }
.cxm-table thead th.cxm-th-actions { width: 80px; text-align: center; }

.cxm-tbl-num  { color: var(--cxm-g60); font-weight: var(--cxm-fw-600); font-size: var(--cxm-fs-12); }
.cxm-tbl-name { font-weight: var(--cxm-fw-600); color: var(--cxm-g100); }
.cxm-tbl-sub  { display: block; font-size: var(--cxm-fs-11); color: var(--cxm-g60); margin-top: 2px; }
.cxm-tbl-dash { color: var(--cxm-g50); font-weight: var(--cxm-fw-400); }
/* Status-coloured sub-line variants — used by the DMB screens table to colour
   the merged expiry line (Expired = danger, Expiring soon = warning). The text
   still reads the date, so colour never carries meaning alone. */
.cxm-tbl-sub--danger { color: var(--cxm-e80); font-weight: var(--cxm-fw-600); }
.cxm-tbl-sub--warn   { color: var(--cxm-o80); font-weight: var(--cxm-fw-600); }
/* Deleted-license name in the DMB screens table — muted + struck (the STATUS
   pill carries the "deleted" meaning; this is just de-emphasis). */
.cxm-tbl-name--struck { font-size: 13px; text-decoration: line-through; color: var(--cxm-g50); font-weight: var(--cxm-fw-400); }

/* Row severity accent bar (DMB screens table). A 3px left edge on the row's
   first cell, colour-matched to the STATUS pill, so problem rows are scannable
   without tinting the whole row. Scoped to .cxm-screens so other CX tables are
   untouched. Pairs with the STATUS pill (icon + text) — never colour-only. */
.cxm-screens .cxm-table tbody tr.cxm-tr--danger  > td:first-child { box-shadow: inset 3px 0 0 var(--cxm-e80); }
.cxm-screens .cxm-table tbody tr.cxm-tr--warning > td:first-child { box-shadow: inset 3px 0 0 var(--cxm-o80); }
.cxm-screens .cxm-table tbody tr.cxm-tr--ok      > td:first-child { box-shadow: inset 3px 0 0 var(--cxm-s80); }
/* cxm-tr--none → no accent (neutral rows: unused / license-only). */

/* Sortable <th> — class is on the TH itself, so we must NOT override cell
   layout (display/padding/background/border-bottom already come from
   `.cxm-table thead th`). Only add the sort-specific affordances. */
.cxm-th-sort {
  cursor: pointer;
  user-select: none;
}
.cxm-th-sort:hover { color: var(--cxm-g90); }
.cxm-th-sort:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(65,133,244,.3);
}
.cxm-th-sort__icon {
  opacity: .6;
  font-size: var(--cxm-fs-10);
  margin-left: 4px;
}
.cxm-th-sort[aria-sort="ascending"] .cxm-th-sort__icon,
.cxm-th-sort[aria-sort="descending"] .cxm-th-sort__icon { opacity: 1; color: var(--cxm-b60); }


/* ── Row icon buttons (table actions) ──────────────────────── */
.cxm-row-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
  flex-shrink: 0;
  position: relative;
  color: var(--cxm-g70);
}
.cxm-row-icon-btn svg,
.cxm-row-icon-btn .fa { width: 15px; height: 15px; font-size: var(--cxm-fs-13); }
.cxm-row-icon-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: var(--cxm-r);
}
.cxm-row-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(65,133,244,.3);
}
.cxm-row-icon-btn--edit   { color: var(--cxm-b60); border-color: var(--cxm-b20); }
.cxm-row-icon-btn--edit:hover   { background: var(--cxm-b10); border-color: var(--cxm-b30); }
.cxm-row-icon-btn--danger { color: var(--cxm-e60); border-color: #ffd4de; }
.cxm-row-icon-btn--danger:hover { background: var(--cxm-e10); border-color: var(--cxm-e60); }

/* Disabled (e.g. push gated to active screens) — neutral + non-interactive
   so it never reads as clickable. Beats the --edit/--danger color + hover. */
.cxm-row-icon-btn:disabled,
.cxm-row-icon-btn[disabled] {
  color: var(--cxm-g50);
  border-color: var(--cxm-g30);
  background: var(--cxm-g10);
  cursor: not-allowed;
  opacity: .6;
}
.cxm-row-icon-btn:disabled:hover,
.cxm-row-icon-btn[disabled]:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g30);
}

/* Action cell — inline icon-button cluster for table rows (Screen Groups edit/delete etc). */
.cxm-action-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  justify-content: center;
}


/* ── Pagination ───────────────────────────────────────────────── */
.cxm-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cxm-sp-3) var(--cxm-sp-6);
  border-top: 1px solid var(--cxm-g30);
  gap: var(--cxm-sp-3);
  flex-wrap: wrap;
}
.cxm-pagination-info {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-500);
}
.cxm-pagination-btns {
  display: flex;
  gap: var(--cxm-sp-1);
  flex-wrap: wrap;
}
.cxm-pg-btn {
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: #fff;
  font-family: var(--cxm-font);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cxm-sp-1);
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-pg-btn:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g100);
}
.cxm-pg-btn.is-active,
.cxm-pg-btn--active {
  background: var(--cxm-b60);
  border-color: var(--cxm-b60);
  color: #fff;
  box-shadow: 0 2px 8px rgba(65,133,244,.25);
}
.cxm-pg-btn:disabled,
.cxm-pg-btn[disabled] { opacity: .4; cursor: not-allowed; }
.cxm-pg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,.25);
}
.cxm-pg-btn svg { width: 13px; height: 13px; }


/* ── Empty state ──────────────────────────────────────────────── */
.cxm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--cxm-sp-9) var(--cxm-sp-6);
  color: var(--cxm-g70);
  gap: var(--cxm-sp-3);
}
.cxm-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cxm-g20);
  color: var(--cxm-g60);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cxm-fs-22);
}
.cxm-empty__title {
  font-size: var(--cxm-fs-15);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0;
}
.cxm-empty__desc {
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g70);
  max-width: 420px;
  margin: 0;
}
.cxm-empty__actions {
  display: flex;
  gap: var(--cxm-sp-2);
  margin-top: var(--cxm-sp-2);
  flex-wrap: wrap;
  justify-content: center;
}


/* ── Empty hero (large illustrative empty, first-run) ────────── */
.cxm-empty-hero {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  padding: var(--cxm-sp-9) var(--cxm-sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cxm-sp-4);
  margin-bottom: var(--cxm-sp-7);
}
.cxm-empty-hero__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--cxm-rl);
  background: linear-gradient(135deg, var(--cxm-b10), var(--cxm-p10));
  color: var(--cxm-b60);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.cxm-empty-hero__title {
  font-size: var(--cxm-fs-20);
  font-weight: var(--cxm-fw-800);
  color: var(--cxm-g100);
  margin: 0;
  letter-spacing: var(--cxm-ls-snug);
}
.cxm-empty-hero__subtitle {
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g70);
  max-width: 560px;
  line-height: var(--cxm-lh-relaxed);
  margin: 0;
}
/* Steps — 3-column grid. <ol>'s native "1." numbering is suppressed
   (list-style: none + padding: 0) so only the custom blue circle shows.
   Wraps to a single column on narrow viewports. */
.cxm-empty-hero__steps {
  list-style: none;
  padding: 0;
  margin: var(--cxm-sp-5) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cxm-sp-4);
  width: 100%;
  max-width: 720px;
}
@media (max-width: 720px) {
  .cxm-empty-hero__steps { grid-template-columns: 1fr; max-width: 360px; }
}
.cxm-empty-hero__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-4) var(--cxm-sp-3);
  background: var(--cxm-g10);
  border: 1px solid var(--cxm-g20);
  border-radius: var(--cxm-r);
  text-align: center;
}
.cxm-empty-hero__step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cxm-b60);
  color: #fff;
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxm-empty-hero__step-text {
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g80);
  line-height: var(--cxm-lh-snug);
}
.cxm-empty-hero__actions {
  display: flex;
  gap: var(--cxm-sp-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--cxm-sp-3);
}


/* ── Brand header actions (cx.html DMB persistent bar) ──────── */
.cxm-brand-actions {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}


/* ── Quick actions grid (overview) ────────────────────────────── */
.cxm-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cxm-sp-3);
}
.cxm-quick-action {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-4);
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: #fff;
  cursor: pointer;
  transition: transform var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
  text-align: left;
  font: inherit;
  color: inherit;
}
.cxm-quick-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--cxm-sh);
  border-color: var(--cxm-b30);
}
.cxm-quick-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,.2);
}
.cxm-quick-action__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cxm-r);
  background: var(--cxm-b10);
  color: var(--cxm-b60);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--cxm-fs-14);
}
.cxm-quick-action__label {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g100);
}
.cxm-quick-action__hint {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  margin-top: 2px;
}


/* ── Activity list (overview) ─────────────────────────────────── */
.cxm-activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
}
.cxm-activity-item {
  display: flex;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-3);
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: #fff;
}
.cxm-activity-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--cxm-g50);
}
.cxm-activity-item--ok      .cxm-activity-item__dot { background: var(--cxm-s60); }
.cxm-activity-item--warn    .cxm-activity-item__dot { background: var(--cxm-w60); }
.cxm-activity-item--error   .cxm-activity-item__dot { background: var(--cxm-e60); }
.cxm-activity-item__title {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g90);
  margin: 0;
}
.cxm-activity-item__meta {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  margin-top: 2px;
}


/* ── Template cards (Templates tab) ───────────────────────────── */
.cxm-tmpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cxm-sp-4);
}
.cxm-tmpl-card {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: transform var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease);
  display: flex;
  flex-direction: column;
}
.cxm-tmpl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cxm-sm);
  border-color: var(--cxm-g40);
}
.cxm-tmpl-card:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,.25);
}
.cxm-tmpl-thumb {
  height: 150px;
  background: linear-gradient(145deg, #2C3E50 0%, #3A4F63 40%, #34495E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.cxm-tmpl-thumb-icon { color: rgba(255,255,255,.2); font-size: 32px; }
.cxm-tmpl-badges {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: var(--cxm-sp-1);
}
.cxm-tmpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--cxm-sp-2);
  background: rgba(0,0,0,.55);
  border-radius: var(--cxm-rs);
  font-size: var(--cxm-fs-10);
  font-weight: var(--cxm-fw-600);
  color: rgba(255,255,255,.85);
}
.cxm-tmpl-badge svg { width: 12px; height: 12px; opacity: .7; }
.cxm-tmpl-body { padding: var(--cxm-sp-3) var(--cxm-sp-4); }
.cxm-tmpl-name {
  font-size: var(--cxm-fs-14);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0 0 var(--cxm-sp-1);
}
.cxm-tmpl-meta {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
}
.cxm-tmpl-meta .cxm-tmpl-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--cxm-g50); flex-shrink: 0;
}
.cxm-tmpl-status {
  font-size: var(--cxm-fs-10);
  font-weight: var(--cxm-fw-700);
  padding: 2px var(--cxm-sp-2);
  border-radius: var(--cxm-rf);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cxm-tmpl-status--unused { background: var(--cxm-g20); color: var(--cxm-g70); }
.cxm-tmpl-status--used   { background: var(--cxm-s10); color: var(--cxm-s70); }

/* Floating action cluster on each template card — Edit (rename + description)
   and Delete. Hidden until hover/focus to keep the grid quiet, but the
   buttons stay in DOM with an opacity transition so keyboard tab still
   reaches them. Translucent rail wraps both icons so they read as one
   chrome element rather than two heavy disks. */
.cxm-tmpl-card__actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(4, 9, 17, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--cxm-dur) var(--cxm-ease),
              transform var(--cxm-dur) var(--cxm-ease);
}
.cxm-tmpl-card:hover .cxm-tmpl-card__actions,
.cxm-tmpl-card:focus-within .cxm-tmpl-card__actions {
  opacity: 1;
  transform: translateY(0);
}

.cxm-tmpl-card__action {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: var(--cxm-fs-11);
  cursor: pointer;
  transition: background var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
}
.cxm-tmpl-card__action:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.cxm-tmpl-card__action:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, .55);
}
.cxm-tmpl-card__action--danger:hover {
  background: var(--cxm-e60);
  color: #fff;
}
.cxm-tmpl-card__action--danger:focus-visible {
  background: var(--cxm-e60);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, .45);
}


/* ── Screen-group components ──────────────────────────────────── */
.cxm-sg-card {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  background: #fff;
  padding: var(--cxm-sp-5);
  margin-bottom: var(--cxm-sp-3);
  display: flex;
  gap: var(--cxm-sp-4);
  align-items: flex-start;
  transition: box-shadow var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-card:hover {
  box-shadow: var(--cxm-sh);
  border-color: var(--cxm-g40);
}
.cxm-sg-card__main { flex: 1; min-width: 0; }
.cxm-sg-card__name {
  font-size: var(--cxm-fs-15);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0 0 var(--cxm-sp-1);
}
.cxm-sg-card__meta {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  margin-bottom: var(--cxm-sp-3);
  display: flex;
  gap: var(--cxm-sp-3);
  flex-wrap: wrap;
}

.cxm-sg-tmpl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cxm-sp-1);
}
.cxm-sg-tmpl-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--cxm-sp-3);
  background: var(--cxm-b10);
  color: var(--cxm-b70);
  border: 1px solid var(--cxm-b20);
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
}

/* ── Per-template schedule editor (Screen Group form) ──────────────
   List of picked templates. Each row collapses to a one-line summary chip
   (always-on / Mon Tue · 09:00–12:00 …) and expands to a daypart editor
   (days · windows · date range). Resolution priority follows the row
   order; the first row carries a "Primary" badge. */
.cxm-sg-sched-list {
  margin-top: var(--cxm-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
}
.cxm-sg-sched-row {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: #fff;
  overflow: hidden;
}
.cxm-sg-sched-row__head {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-2) var(--cxm-sp-3);
  flex-wrap: wrap;
}
.cxm-sg-sched-row__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--cxm-rf);
  background: var(--cxm-g20);
  color: var(--cxm-g80);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cxm-sg-sched-row__name {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g100);
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
}
.cxm-sg-sched-row__name i { color: var(--cxm-b60); }
.cxm-sg-sched-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-b70);
  background: var(--cxm-b10);
  border: 1px solid var(--cxm-b20);
}
.cxm-sg-sched-row__chip--alwayson {
  color: var(--cxm-g70);
  background: var(--cxm-g20);
  border-color: var(--cxm-g30);
}
.cxm-sg-sched-row__toggle { margin-left: auto; }
.cxm-sg-sched-row__body {
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  border-top: 1px solid var(--cxm-g20);
  background: var(--cxm-g10);
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-3);
}

.cxm-sg-sched-block {
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
  padding-bottom: var(--cxm-sp-3);
}
.cxm-sg-sched-block + .cxm-sg-sched-block {
  border-top: 1px dashed var(--cxm-g30);
  padding-top: var(--cxm-sp-3);
}
.cxm-sg-sched-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cxm-sp-2);
}
.cxm-sg-sched-block__label {
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g80);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cxm-sg-sched-block__hint {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g60);
  font-weight: var(--cxm-fw-500);
}
.cxm-sg-sched-block__action {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-b60);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cxm-sg-sched-block__action:hover { color: var(--cxm-b70); }

/* ── Day-of-week presets ──────────────────────────────────────── */
.cxm-sg-sched-presets {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--cxm-g15, var(--cxm-g20));
  border-radius: 999px;
}
.cxm-sg-sched-preset {
  padding: 4px 12px;
  border: 0;
  background: transparent;
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g70);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--cxm-dur) var(--cxm-ease), color var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-sched-preset:hover { color: var(--cxm-g100); }
.cxm-sg-sched-preset--on {
  background: #fff;
  color: var(--cxm-g100);
  box-shadow: 0 1px 2px rgba(4, 9, 17, 0.06);
}

/* ── Day chips (compact pills) ────────────────────────────────── */
.cxm-sg-sched-days {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cxm-sg-sched-daychip {
  min-width: 38px;
  padding: 5px 10px;
  border: 1px solid var(--cxm-g30);
  background: #fff;
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-sched-daychip:hover { border-color: var(--cxm-g40); }
.cxm-sg-sched-daychip--on {
  background: var(--cxm-b60);
  border-color: var(--cxm-b60);
  color: #fff;
}
.cxm-sg-sched-daychip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,133,244,.20);
}

/* ── Time-window / date-range rows ────────────────────────────── */
.cxm-sg-sched-window,
.cxm-sg-sched-daterange {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;                  /* keep fields readable on narrow viewports */
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-2);
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
}
.cxm-sg-sched-window:hover,
.cxm-sg-sched-daterange:hover { border-color: var(--cxm-g40); }
/* Below ~720px the trash button orphans on its own line — pin it to the right
   so the From/To fields stack but the action stays reachable inline. */
@media (max-width: 720px) {
  .cxm-sg-sched-window__remove { margin-left: auto; }
  .cxm-sg-sched-window__field  { flex-basis: 100%; min-width: 0; }
  .cxm-sg-sched-window__sep    { display: none; }
}
.cxm-sg-sched-window__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 110px;
}
.cxm-sg-sched-window__sublabel {
  font-size: 10px;
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g60);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cxm-sg-sched-window__field .cxm-input {
  width: 100%;
}
.cxm-sg-sched-window__sep {
  color: var(--cxm-g60);
  font-weight: var(--cxm-fw-700);
  font-size: var(--cxm-fs-13);
  align-self: center;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.cxm-sg-sched-window__remove {
  width: 32px; height: 32px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--cxm-r);
  color: var(--cxm-g60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  transition: background var(--cxm-dur) var(--cxm-ease), color var(--cxm-dur) var(--cxm-ease), border-color var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-sched-window__remove:hover {
  background: var(--cxm-e10);
  color: var(--cxm-e60);
  border-color: var(--cxm-e10);
}

/* ── Empty + add buttons ──────────────────────────────────────── */
.cxm-sg-sched-empty {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  padding: 10px 12px;
  background: #fff;
  border: 1px dashed var(--cxm-g30);
  border-radius: var(--cxm-r);
  font-style: italic;
}
.cxm-sg-sched-add {
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--cxm-g40);
  background: #fff;
  border-radius: var(--cxm-r);
  color: var(--cxm-b60);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  cursor: pointer;
  transition: border-color var(--cxm-dur) var(--cxm-ease), background var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-sched-add:hover:not(:disabled) {
  border-color: var(--cxm-b60);
  background: var(--cxm-b10);
}
.cxm-sg-sched-add:disabled {
  cursor: not-allowed;
  color: var(--cxm-g60);
  opacity: 0.65;
}
.cxm-sg-sched-add i { margin-right: 4px; }

/* ── Inline error banner ──────────────────────────────────────── */
.cxm-sg-sched-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--cxm-r);
  background: var(--cxm-e10);
  color: var(--cxm-e80);
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  border: 1px solid rgba(231, 76, 60, 0.2);
  margin-top: var(--cxm-sp-2);
}
.cxm-sg-sched-error i { font-size: var(--cxm-fs-13); flex-shrink: 0; }

/* ── Footer reset link ────────────────────────────────────────── */
.cxm-sg-sched-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--cxm-sp-2);
  margin-top: var(--cxm-sp-1);
  border-top: 1px solid var(--cxm-g20);
}
.cxm-sg-sched-reset {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g70);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--cxm-dur) var(--cxm-ease), color var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-sched-reset:hover {
  background: var(--cxm-g15, var(--cxm-g20));
  color: var(--cxm-g100);
}

.cxm-sg-more-btn {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cxm-g60);
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
}
.cxm-sg-more-btn:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g90);
}
.cxm-sg-more-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(65,133,244,.3);
}

/* ── Screen-group screen selector (Select screens block) ─────────
   Sits as the bottom row of the edit form. Label + action buttons on
   one line; picker beneath. Wrapped in cxm-form-row so vertical rhythm
   matches the rows above (Group name / Description, Assign templates /
   Filter by deployment). */
.cxm-sg-screens__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cxm-sp-3);
  margin-bottom: var(--cxm-sp-2);
  flex-wrap: wrap;
}
.cxm-sg-screens__label {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.cxm-sg-screens__count { color: var(--cxm-b60); }
.cxm-sg-screens__actions {
  display: inline-flex;
  gap: var(--cxm-sp-1);
  flex-shrink: 0;
}
/* Picker wrapper — gives the ui-select a stable layout anchor so its
   dropdown panel positions cleanly relative to the input instead of
   floating over the rows above. */
.cxm-sg-screens__picker {
  display: block;
  position: relative;
  width: 100%;
}
/* Bootstrap-themed ui-select renders chips inline in .ui-select-match;
   align the multi-select control with the form's input height + radius. */
.cxm-sg-screens__picker .ui-select-bootstrap.ui-select-multiple.dropdown {
  min-height: 38px;
  height: auto;                     /* grow as chips wrap to multi-line */
  border-radius: var(--cxm-r);
  padding: 5px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Individual chip — make each "× tag · sub" element breathe + lock to a
   single line so multi-line chips don't get ragged. */
.cxm-sg-screens__picker .ui-select-match-item {
  margin: 2px 0 !important;
  padding: 3px 8px 3px 6px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
  background: var(--cxm-b10, #DCE7FE) !important;
  border: 1px solid var(--cxm-b20, #B8CFFF) !important;
  border-radius: 14px !important;
  color: var(--cxm-b80, #1E3A5F) !important;
  white-space: nowrap;
  max-width: 100%;
}

/* Inner content of each chip — icon, name, deployment subtitle, warning. */
.cxm-sg-chip__icon {
  font-size: 10px;
  opacity: 0.7;
  margin-right: 2px;
}
.cxm-sg-chip__name {
  display: inline-block;        /* ellipsis + max-width are ignored on inline spans */
  vertical-align: bottom;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.cxm-sg-chip__sub {
  display: inline-block;        /* ditto — needed for the deployment string to truncate */
  vertical-align: bottom;
  color: #5A6470;               /* darkened from #6A6F77 → ≥4.5:1 on the #DCE7FE chip */
  font-weight: 400;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* Remove (×) on each chip — clearer target + hover, aligned with chip text. */
.cxm-sg-screens__picker .ui-select-match-item .close,
.cxm-sg-screens__picker .ui-select-match-item .ui-select-match-close {
  margin-right: 4px;
  font-size: 15px;
  line-height: 1;
  opacity: 0.55;
  color: inherit;
  text-shadow: none;
  float: none;
}
.cxm-sg-screens__picker .ui-select-match-item .close:hover,
.cxm-sg-screens__picker .ui-select-match-item .ui-select-match-close:hover { opacity: 1; }

/* Search input inside the multi-select — grows to fill remaining row. */
.cxm-sg-screens__picker .ui-select-search {
  flex: 1 1 120px;
  min-width: 80px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
}

/* Dark-theme parity for the chip palette. */
.dark .cxm-sg-screens__picker .ui-select-match-item {
  background: rgba(65, 133, 244, 0.15) !important;
  border-color: rgba(65, 133, 244, 0.35) !important;
  color: #BFD6FF !important;
}
.dark .cxm-sg-chip__sub {
  color: rgba(255, 255, 255, 0.55);
}


/* ── Theme tab components ─────────────────────────────────────── */
.cxm-th-label {
  font-size: var(--cxm-fs-14);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin-bottom: var(--cxm-sp-1);
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
}
.cxm-th-label-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--cxm-r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.cxm-th-label-icon--blue   { background: linear-gradient(135deg, var(--cxm-b60), var(--cxm-p60)); }
.cxm-th-label-icon--purple { background: linear-gradient(135deg, var(--cxm-p60), var(--cxm-b60)); }
.cxm-th-label-icon--orange { background: linear-gradient(135deg, var(--cxm-o60), var(--cxm-e60)); }
.cxm-th-label-icon--green  { background: linear-gradient(135deg, var(--cxm-s60), #49B6E4); }
.cxm-th-desc {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-400);
  line-height: var(--cxm-lh-relaxed);
  margin-bottom: var(--cxm-sp-4);
  padding-bottom: var(--cxm-sp-3);
  border-bottom: 1px solid var(--cxm-g30);
  padding-left: 46px;
}
.cxm-th-label:not(:first-child) { margin-top: var(--cxm-sp-7); }

.cxm-th-brand-row {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-5);
  flex-wrap: wrap;
}
.cxm-th-brand-card {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  padding: 10px var(--cxm-sp-4);
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: var(--cxm-g10);
  min-width: 220px;
}
/* Meta column (label + hex) grows so the remove button can pin right. */
.cxm-th-brand-meta { flex: 1 1 auto; min-width: 0; }
/* Remove (×) — subdued by default, red on hover so the destructive intent
   only becomes prominent on the actionable moment. Hidden via ng-if when
   the brand color isn't set, so we don't show a no-op affordance. */
.cxm-th-brand-remove {
  color: var(--cxm-g60);
  flex-shrink: 0;
}
.cxm-th-brand-remove:hover {
  color: var(--cxm-e60);
  background: var(--cxm-e10);
}
/* Edit (pencil) — opens the native picker via label-for; accent on hover/focus. */
.cxm-th-brand-edit {
  color: var(--cxm-b60);
  flex-shrink: 0;
}
.cxm-th-brand-edit:hover {
  color: var(--cxm-b70);
  background: var(--cxm-b10);
}
.cxm-th-brand-edit:focus-visible {
  outline: 2px solid var(--cxm-b60);
  outline-offset: 2px;
}
.cxm-th-brand-color-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}
.cxm-th-color-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  padding: 0;
}
/* When a color is set, the swatch is display-only — the pencil (label-for) still opens this input to change it. */
.cxm-th-color-native--locked { pointer-events: none; }
.cxm-th-brand-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--cxm-r);
  display: block;
  border: 2px solid var(--cxm-g30);
  transition: border-color var(--cxm-dur) var(--cxm-ease);
}
.cxm-th-brand-swatch--sm { width: 26px; height: 26px; border-radius: var(--cxm-rs); }
.cxm-th-brand-swatch:hover { border-color: var(--cxm-g50); }
.cxm-th-brand-type {
  font-size: var(--cxm-fs-10);
  font-weight: var(--cxm-fw-700);
  text-transform: uppercase;
  letter-spacing: var(--cxm-ls-wider);
  color: var(--cxm-g60);
}
.cxm-th-brand-hex {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g90);
  font-family: 'Inter', monospace;
  margin-top: 2px;
}

/* Locked-state card — shown in place of the Screen colors section when
   the user hasn't picked a Primary + Secondary brand color yet. Reads as
   a calm "do this first" hint rather than an error. */
.cxm-th-locked {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px dashed var(--cxm-border, #E0E4EA);
  border-radius: 12px;
  background: var(--cxm-bg, #F4F6F9);
  margin-top: 4px;
}
.cxm-th-locked__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(134, 95, 194, 0.10);
  color: var(--cxm-p60, #865FC2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cxm-th-locked__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxm-th-locked__title {
  font-size: 14px; font-weight: 700;
  color: var(--cxm-g90, #2C3E50);
}
.cxm-th-locked__sub {
  font-size: 12px;
  color: var(--cxm-g70, #7F8C8D);
  line-height: 1.4;
}

.cxm-th-screen-grid {
  display: flex;
  flex-direction: column;
}

/* Empty state — shown when no brand color is set yet. Tells the admin the
   tone picker is gated on choosing a Primary/Secondary above, rather than
   rendering empty rows or (worse) a misleading fallback palette. */
.cxm-th-screen-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-6) var(--cxm-sp-4);
  background: var(--cxm-g10);
  border: 1px dashed var(--cxm-g30);
  border-radius: var(--cxm-r);
}
.cxm-th-screen-empty__icon {
  font-size: 22px;
  color: var(--cxm-b60);
  margin-bottom: var(--cxm-sp-1);
}
.cxm-th-screen-empty__title {
  font-size: var(--cxm-fs-14);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g100);
}
.cxm-th-screen-empty__hint {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  max-width: 420px;
  line-height: var(--cxm-lh-relaxed);
}
.cxm-th-screen-row {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-3) 0;
  border-bottom: 1px solid var(--cxm-g30);
}
.cxm-th-screen-row:last-child { border-bottom: none; }
.cxm-th-screen-name {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g100);
  width: 130px;
  flex-shrink: 0;
}
.cxm-th-screen-desc {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  width: 120px;
  flex-shrink: 0;
}
.cxm-th-tone-row {
  display: flex;
  gap: var(--cxm-sp-1);
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}
.cxm-th-tone {
  width: 28px;
  height: 28px;
  border-radius: var(--cxm-rs);
  cursor: pointer;
  transition: transform var(--cxm-dur) var(--cxm-ease),
              box-shadow var(--cxm-dur) var(--cxm-ease);
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(4,9,17,.04);
}
.cxm-th-tone:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 1; }
.cxm-th-tone.is-selected,
.cxm-th-tone--selected { transform: scale(1.1); }
.cxm-th-tone.is-selected::after,
.cxm-th-tone--selected::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  border: 2.5px solid var(--cxm-b60);
  box-shadow: 0 0 0 2px rgba(65,133,244,.2);
}
.cxm-th-tone.is-selected::before,
.cxm-th-tone--selected::before {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-800);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  z-index: 1;
}
/* Keyboard focus ring — tones are role=button tabindex=0; without this a keyboard user can't see which swatch is focused (WCAG 2.4.7). */
.cxm-th-tone:focus-visible { outline: 2px solid var(--cxm-b60); outline-offset: 2px; z-index: 2; }
.cxm-th-screen-hex {
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
  font-family: 'Inter', monospace;
  background: var(--cxm-g10);
  padding: 4px 10px;
  border-radius: var(--cxm-rs);
  border: 1px solid var(--cxm-g30);
  min-width: 72px;
  text-align: center;
}

.cxm-th-typo-box {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  padding: var(--cxm-sp-6);
  margin-top: var(--cxm-sp-7);
  background: #fff;
}
.cxm-th-typo-box .cxm-th-label:first-child { margin-top: 0; }
/* ── Typography cards (3-up grid — family + size per role) ── */
.cxm-th-tcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cxm-sp-4);
  margin-top: var(--cxm-sp-4);
}
.cxm-th-tcard {
  border: 1.5px solid var(--cxm-g30);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
}
.cxm-th-tcard:hover {
  border-color: var(--cxm-b60);
  box-shadow: 0 4px 18px rgba(65,133,244,0.10);
}
.cxm-th-tcard__role {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-700);
  letter-spacing: -0.01em;
  border-bottom: 1.5px solid transparent;
  border-radius: 10px 10px 0 0;
}
.cxm-th-tcard__role--blue   { background: rgba(65,133,244,0.08);  color: #2961C8; border-color: rgba(65,133,244,0.15); }
.cxm-th-tcard__role--teal   { background: rgba(16,180,143,0.08);  color: #0A7A5A; border-color: rgba(16,180,143,0.15); }
.cxm-th-tcard__role--amber  { background: rgba(234,130,45,0.08);  color: #A84800; border-color: rgba(234,130,45,0.15); }
.cxm-th-tcard__role--purple { background: rgba(134,95,194,0.08);  color: #5B2EA8; border-color: rgba(134,95,194,0.15); }
.cxm-th-tcard__role--rose   { background: rgba(240,68,132,0.07);  color: #A3155A; border-color: rgba(240,68,132,0.12); }
.cxm-th-tcard__body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cxm-th-tcard__field-label {
  font-size: 10px;
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cxm-th-tcard__size-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--cxm-g25, var(--cxm-g30));
}
.cxm-th-tcard__size-label {
  font-size: 10px;
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  min-width: 32px;
}
.cxm-th-tcard__size-row .cxm-th-fs-wrap {
  flex: 1;
  max-width: 110px;
}
.cxm-th-tcard__size-row .cxm-th-fs-input { height: 34px; font-size: var(--cxm-fs-13); }

.cxm-th-typo-select { width: 100%; }
.cxm-th-typo-select .ui-select-bootstrap .ui-select-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
}
.cxm-th-typo-select .ui-select-bootstrap .ui-select-toggle .ui-select-match-text,
.cxm-th-typo-select .ui-select-bootstrap .ui-select-toggle .ui-select-placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cxm-th-typo-select .ui-select-bootstrap .ui-select-toggle > .pull-right {
  float: none;
  flex-shrink: 0;
  margin-left: auto;
}
.cxm-th-typo-select .ui-select-bootstrap.open { z-index: 1050; position: relative; }

/* ── Typography cards: per-card brand-palette tone picker ─
   Mirrors the .cxm-th-tone-row pattern used by Screen colors above,
   sized down to fit inside the typography card. Swatches wrap to as
   many rows as needed (palette can be 15-25 swatches). */
.cxm-th-tcard__tones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.cxm-th-tone--sm {
  /* Compact override on the shared .cxm-th-tone base. */
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
}
.cxm-th-tcard__tones-empty {
  font-size: 11px;
  color: var(--cxm-g60, #9DA2AA);
  font-style: italic;
  padding: 6px 0;
  margin-top: 4px;
}
.cxm-th-tcard__color-hex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.cxm-th-tcard__color-hex {
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 11px;
  color: var(--cxm-g70, #6A6F77);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cxm-row-icon-btn--sm {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 10px;
}

/* Dark-mode parity */
.dark .cxm-th-tcard__color-hex {
  color: rgba(255,255,255,0.65);
}
.dark .cxm-th-tcard__tones-empty {
  color: rgba(255,255,255,0.4);
}

/* ── Typography cards: dark mode ──────────────────────── */
.dark .cxm-th-tcard {
  background: #1a1d24;
  border-color: #2a2e37;
}
.dark .cxm-th-tcard:hover { border-color: var(--cxm-b60); }
.dark .cxm-th-tcard__role { border-bottom-color: transparent; }
.dark .cxm-th-tcard__role--blue   { background: rgba(65,133,244,0.12);  color: #7eb5fa; border-color: rgba(65,133,244,0.20); }
.dark .cxm-th-tcard__role--teal   { background: rgba(16,180,143,0.12);  color: #4ADCA1; border-color: rgba(16,180,143,0.20); }
.dark .cxm-th-tcard__role--amber  { background: rgba(234,130,45,0.12);  color: #F0A060; border-color: rgba(234,130,45,0.20); }
.dark .cxm-th-tcard__role--purple { background: rgba(134,95,194,0.12);  color: #C09AEF; border-color: rgba(134,95,194,0.20); }
.dark .cxm-th-tcard__role--rose   { background: rgba(240,68,132,0.10);  color: #F472B6; border-color: rgba(240,68,132,0.18); }
.dark .cxm-th-tcard__field-label,
.dark .cxm-th-tcard__size-label { color: var(--cxm-g50); }
.dark .cxm-th-tcard__size-row { border-top-color: #2a2e37; }
.dark .cxm-th-fs-wrap { background: #14161c; border-color: #2a2e37; }
.dark .cxm-th-fs-input { color: var(--cxm-g10); }
.dark .cxm-th-fs-unit  { color: var(--cxm-g60); }
.dark .cxm-th-fs-btn   { color: var(--cxm-g60); }
.dark .cxm-th-fs-btn:hover { background: rgba(255,255,255,0.06); color: var(--cxm-g30); }
.dark .cxm-th-typo-select .ui-select-bootstrap .ui-select-toggle {
  background: #14161c;
  border-color: #2a2e37;
  color: var(--cxm-g10);
}
.dark .cxm-th-typo-select .ui-select-bootstrap .ui-select-toggle:hover,
.dark .cxm-th-typo-select .ui-select-bootstrap.open .ui-select-toggle {
  background: #1a1d24;
  border-color: var(--cxm-b60);
}
.dark .cxm-th-typo-select .ui-select-bootstrap .ui-select-placeholder { color: var(--cxm-g60); }
.dark .cxm-th-typo-select .ui-select-bootstrap .ui-select-choices { background: #14161c; border-color: #2a2e37; }
.dark .cxm-th-typo-select .ui-select-bootstrap .ui-select-choices-row.active > .ui-select-choices-row-inner { background: #20242d; color: var(--cxm-g10); }
.cxm-th-fs-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  overflow: hidden;
  background: var(--cxm-g10);
}
.cxm-th-fs-wrap:focus-within {
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 3px rgba(65,133,244,.1);
}
.cxm-th-fs-input {
  flex: 1;
  height: 40px;
  text-align: center;
  font-weight: var(--cxm-fw-600);
  font-size: var(--cxm-fs-14);
  background: transparent;
  border: none;
  outline: none;
  color: var(--cxm-g100);
  font-family: var(--cxm-font);
  -moz-appearance: textfield;
  appearance: textfield;
  min-width: 0;
}
.cxm-th-fs-input::-webkit-outer-spin-button,
.cxm-th-fs-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Restore a visible focus ring — the base rule sets outline:none (WCAG 2.4.7). */
.cxm-th-fs-input:focus-visible { outline: 2px solid var(--cxm-b60); outline-offset: 1px; border-radius: var(--cxm-rs); }
.cxm-th-fs-unit {
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g60);
  padding-right: var(--cxm-sp-1);
}
.cxm-th-fs-btn {
  width: 30px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cxm-g60);
  transition: background var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
  flex-shrink: 0;
}
.cxm-th-fs-btn:hover  { background: var(--cxm-g20); color: var(--cxm-g100); }
.cxm-th-fs-btn:active { background: var(--cxm-g30); }


/* ── Language tab ─────────────────────────────────────────────── */
.cxm-lang-card {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  overflow: hidden;
  background: #fff;
}
.cxm-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cxm-sp-6) var(--cxm-sp-7);
  border-bottom: 1px solid var(--cxm-g30);
  gap: var(--cxm-sp-4);
  flex-wrap: wrap;
}
.cxm-lang-row:last-of-type { border-bottom: none; }
.cxm-lang-row-left {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-4);
  min-width: 0;
}
.cxm-lang-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cxm-rl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: var(--cxm-fs-16);
}
.cxm-lang-icon--primary   { background: linear-gradient(135deg, var(--cxm-b60), var(--cxm-p60)); box-shadow: 0 4px 12px rgba(65,133,244,.25); }
.cxm-lang-icon--secondary { background: linear-gradient(135deg, var(--cxm-s60), #49B6E4); box-shadow: 0 4px 12px rgba(16,180,143,.25); }
.cxm-lang-title {
  font-size: var(--cxm-fs-15);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0 0 var(--cxm-sp-1);
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  flex-wrap: wrap;
}
.cxm-lang-sub {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cxm-lang-row-right {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  flex-wrap: wrap;
}
.cxm-lang-value {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  padding: 8px 18px;
  border: 1px solid rgba(16,180,143,.25);
  background: var(--cxm-s10);
  color: var(--cxm-s70);
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
}
.cxm-lang-pills {
  display: flex;
  gap: var(--cxm-sp-1);
  flex-wrap: wrap;
  align-items: center;
}
.cxm-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  padding: 6px 10px 6px var(--cxm-sp-3);
  background: var(--cxm-s10);
  border: 1px solid rgba(16,180,143,.25);
  color: var(--cxm-s70);
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
}
.cxm-lang-pill-x {
  background: none;
  border: none;
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-e60);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color var(--cxm-dur) var(--cxm-ease);
  font-family: var(--cxm-font);
}
.cxm-lang-pill-x:hover { color: var(--cxm-e70); }


/* ── Form row (horizontal fields) ─────────────────────────────── */
.cxm-form-row {
  display: flex;
  gap: var(--cxm-sp-4);
  margin-bottom: var(--cxm-sp-4);
  flex-wrap: wrap;
}
/* Tight variant — narrower gap, smaller margin (used by size-constraint rows). */
.cxm-form-row--tight {
  gap: var(--cxm-sp-3);
  margin-bottom: var(--cxm-sp-3);
}
.cxm-form-row__field { flex: 1 1 200px; min-width: 0; }
.cxm-form-row__field--2 { flex: 2 1 300px; }
/* Equal-share thirds/quarters — caller promises enough width for all to fit. */
.cxm-form-row__field--3 { flex: 1 1 calc((100% - (var(--cxm-sp-4) * 2)) / 3); min-width: 120px; }
.cxm-form-row__field--4 { flex: 1 1 calc((100% - (var(--cxm-sp-3) * 3)) / 4); min-width: 90px; }
.cxm-form-row__field--narrow { flex: 0 0 120px; }

.cxm-field-label {
  display: block;
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g80);
  margin: 0 0 var(--cxm-sp-1);
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  flex-wrap: wrap;
}
.cxm-field-required { color: var(--cxm-e60); font-weight: var(--cxm-fw-700); margin-left: 2px; }
.cxm-field-optional { color: var(--cxm-g60); font-size: var(--cxm-fs-11); font-weight: var(--cxm-fw-400); margin-left: 2px; }


/* ── Form card (create/edit form container) ───────────────────── */
.cxm-form-card {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  /* overflow VISIBLE (not hidden) so a ui-select dropdown opened by the last
     field in the card — e.g. the screen-group "Select screens" picker — isn't
     clipped at the card's bottom edge. The footer rounds its own bottom corners
     below so its grey fill still respects the card radius. */
  overflow: visible;
  box-shadow: var(--cxm-sh);
}
.cxm-form-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-5) var(--cxm-sp-6);
  border-bottom: 1px solid var(--cxm-g30);
}
.cxm-form-card__back {
  /* Works as <button> or <a>; button-specific resets for native chrome. */
  font-family: inherit;
  padding: 0;
  margin: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--cxm-r);
  background: var(--cxm-g10);
  border: 1px solid var(--cxm-g30);
  color: var(--cxm-g80);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
}
.cxm-form-card__back:hover {
  background: var(--cxm-g20);
  border-color: var(--cxm-g50);
  color: var(--cxm-g100);
}
.cxm-form-card__back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(65,133,244,0.3);
}

/* Inline link styled like a text anchor — use inside table cells / prose. */
.cxm-tbl-link {
  font-family: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--cxm-b60);
  font-size: inherit;
  font-weight: var(--cxm-fw-600);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--cxm-dur) var(--cxm-ease);
}
.cxm-tbl-link:hover { color: var(--cxm-b70); text-decoration: underline; }
.cxm-tbl-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(65,133,244,0.3);
  border-radius: 2px;
}
.cxm-form-card__title h4 {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0 0 2px;
  letter-spacing: var(--cxm-ls-snug);
}
.cxm-form-card__title p {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  margin: 0;
  line-height: var(--cxm-lh-normal);
}
.cxm-form-card__body   { padding: var(--cxm-sp-6); }
.cxm-form-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-4) var(--cxm-sp-6);
  border-top: 1px solid var(--cxm-g30);
  background: var(--cxm-g10);
  flex-wrap: wrap;
  /* Round the bottom corners to match the card now that the card is
     overflow:visible (was relying on the card's overflow:hidden to clip). */
  border-bottom-left-radius: var(--cxm-rl);
  border-bottom-right-radius: var(--cxm-rl);
}


/* ── Chip (compact inline tag) ────────────────────────────────── */
.cxm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  padding: 3px 8px;
  border-radius: var(--cxm-rs);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  background: var(--cxm-g20);
  color: var(--cxm-g80);
  border: 1px solid var(--cxm-g30);
  white-space: nowrap;
}
.cxm-chip--muted    { background: var(--cxm-g20); color: var(--cxm-g70); }
.cxm-chip--primary  { background: var(--cxm-b10); color: var(--cxm-b70); border-color: var(--cxm-b20); }
.cxm-chip--success  { background: var(--cxm-s10); color: var(--cxm-s70); border-color: rgba(16,180,143,.25); }
.cxm-chip--warning  { background: var(--cxm-w10); color: var(--cxm-w80); border-color: rgba(255,200,96,.35); }
.cxm-chip--danger   { background: var(--cxm-e10); color: var(--cxm-e80); border-color: rgba(255,111,146,.25); }


/* ── Kebab menu (three-dot dropdown) ──────────────────────────── */
.cxm-kebab {
  position: relative;
  display: inline-block;
}
.cxm-kebab__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  background: #fff;
  color: var(--cxm-g60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
}
.cxm-kebab__btn:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g90);
}
.cxm-kebab__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(65,133,244,.3);
}
.cxm-kebab__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  box-shadow: var(--cxm-sm);
  padding: var(--cxm-sp-1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cxm-kebab__menu button {
  background: none;
  border: none;
  font-family: var(--cxm-font);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g90);
  padding: var(--cxm-sp-2) var(--cxm-sp-3);
  text-align: left;
  cursor: pointer;
  border-radius: var(--cxm-rs);
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  transition: background var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
}
.cxm-kebab__menu button:hover { background: var(--cxm-g10); }
.cxm-kebab__menu button.cxm-kebab__danger { color: var(--cxm-e70); }
.cxm-kebab__menu button.cxm-kebab__danger:hover { background: var(--cxm-e10); color: var(--cxm-e80); }
.cxm-kebab__divider {
  height: 1px;
  background: var(--cxm-g30);
  margin: var(--cxm-sp-1) 0;
}


/* ── Modal stack ──────────────────────────────────────────────── */
.cxm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4,9,17,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cxm-sp-5);
}
.cxm-modal {
  width: 560px;
  max-width: 100%;
  max-height: 86vh;
  background: #fff;
  border-radius: var(--cxm-rl);
  box-shadow: 0 20px 60px rgba(4,9,17,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cxm-g30);
}
.cxm-modal--sm { width: 420px; }
.cxm-modal--lg { width: 720px; }
.cxm-modal--xl { width: 960px; }
.cxm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cxm-sp-4) var(--cxm-sp-6);
  border-bottom: 1px solid var(--cxm-g30);
  gap: var(--cxm-sp-3);
}
.cxm-modal__header-left {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  min-width: 0;
}
.cxm-modal__title {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0;
}
.cxm-modal__sub {
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g70);
  margin-top: 2px;
}
/* Header icon chip — gradient tile matching the health-card label icons. */
.cxm-modal__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--cxm-r);
  background: linear-gradient(135deg, var(--cxm-b60), var(--cxm-p60));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cxm-fs-16);
  flex-shrink: 0;
}
.cxm-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--cxm-r);
  border: 1px solid var(--cxm-g30);
  background: #fff;
  color: var(--cxm-g60);
  font-size: var(--cxm-fs-20);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cxm-dur) var(--cxm-ease),
              border-color var(--cxm-dur) var(--cxm-ease),
              color var(--cxm-dur) var(--cxm-ease);
  font-family: var(--cxm-font);
  line-height: 1;
}
.cxm-modal__close:hover {
  background: var(--cxm-g10);
  border-color: var(--cxm-g50);
  color: var(--cxm-g100);
}
.cxm-modal__body {
  flex: 1;
  overflow: auto;
  padding: var(--cxm-sp-5) var(--cxm-sp-6);
  scrollbar-width: thin;
  scrollbar-color: var(--cxm-g40) transparent;
}
.cxm-modal__body::-webkit-scrollbar       { width: 6px; }
.cxm-modal__body::-webkit-scrollbar-thumb { background: var(--cxm-g40); border-radius: 3px; }
.cxm-modal__footer {
  padding: var(--cxm-sp-4) var(--cxm-sp-6);
  border-top: 1px solid var(--cxm-g30);
  display: flex;
  justify-content: flex-end;
  gap: var(--cxm-sp-2);
  background: var(--cxm-g10);
  flex-wrap: wrap;
}
.cxm-modal__progress {
  height: 4px;
  background: var(--cxm-g20);
  margin: 0 var(--cxm-sp-6);
}
.cxm-modal__progress-fill {
  height: 100%;
  background: var(--cxm-b60);
  border-radius: 2px;
  transition: width .3s var(--cxm-ease);
}


/* ── Alert (banner) ───────────────────────────────────────────── */
.cxm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  border-radius: var(--cxm-r);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-500);
  margin-bottom: var(--cxm-sp-4);
  border: 1px solid transparent;
}
.cxm-alert__icon { flex-shrink: 0; margin-top: 2px; font-size: var(--cxm-fs-14); }
.cxm-alert__body { flex: 1; min-width: 0; }
.cxm-alert__title { font-weight: var(--cxm-fw-700); margin: 0 0 2px; }
.cxm-alert__desc  { margin: 0; line-height: var(--cxm-lh-relaxed); }
.cxm-alert--info    { background: var(--cxm-b10); border-color: var(--cxm-b20); color: var(--cxm-b80); }
.cxm-alert--info .cxm-alert__icon    { color: var(--cxm-b60); }
.cxm-alert--success { background: var(--cxm-s10); border-color: rgba(16,180,143,.25); color: var(--cxm-s80); }
.cxm-alert--success .cxm-alert__icon { color: var(--cxm-s60); }
.cxm-alert--warning { background: var(--cxm-w10); border-color: rgba(255,200,96,.35); color: var(--cxm-w80); }
.cxm-alert--warning .cxm-alert__icon { color: var(--cxm-w60); }
.cxm-alert--danger  { background: var(--cxm-e10); border-color: rgba(255,111,146,.25); color: var(--cxm-e80); }
.cxm-alert--danger  .cxm-alert__icon { color: var(--cxm-e60); }


/* ── Toast (transient confirmation) ───────────────────────────── */
.cxm-toast-container {
  position: fixed;
  bottom: var(--cxm-sp-6);
  right: var(--cxm-sp-6);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
  pointer-events: none;
}
.cxm-toast {
  min-width: 280px;
  max-width: 420px;
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-left: 4px solid var(--cxm-b60);
  border-radius: var(--cxm-r);
  box-shadow: var(--cxm-sl);
  display: flex;
  align-items: flex-start;
  gap: var(--cxm-sp-3);
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-500);
  color: var(--cxm-g90);
  pointer-events: auto;
  animation: cxm-toast-in .25s var(--cxm-ease);
}
@keyframes cxm-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cxm-toast--success { border-left-color: var(--cxm-s60); }
.cxm-toast--warning { border-left-color: var(--cxm-w60); }
.cxm-toast--danger  { border-left-color: var(--cxm-e60); }
.cxm-toast__icon { flex-shrink: 0; margin-top: 2px; }
.cxm-toast__body { flex: 1; min-width: 0; }
.cxm-toast__close {
  background: none;
  border: none;
  font-size: var(--cxm-fs-16);
  color: var(--cxm-g60);
  cursor: pointer;
  line-height: 1;
  padding: 0 var(--cxm-sp-1);
}
.cxm-toast__close:hover { color: var(--cxm-g90); }


/* ── Skeleton loader ──────────────────────────────────────────────
   Static placeholder by default — no shimmer animation. Motion read
   as "cheap" in the channels table on initial load. Add `--shimmer`
   only where motion is explicitly desired. */
.cxm-skeleton {
  display: block;
  background: var(--cxm-g20);
  border-radius: var(--cxm-r);
  height: 14px;
}
.cxm-skeleton--shimmer {
  background: linear-gradient(90deg, var(--cxm-g20) 0%, var(--cxm-g30) 50%, var(--cxm-g20) 100%);
  background-size: 200% 100%;
  animation: cxm-skeleton-shimmer 1.4s infinite linear;
}
.cxm-skeleton--line-sm  { height: 10px; border-radius: 5px; }
.cxm-skeleton--line-md  { height: 14px; border-radius: 5px; }
.cxm-skeleton--line-lg  { height: 20px; border-radius: 6px; }
.cxm-skeleton--circle   { border-radius: 50%; }
.cxm-skeleton--card     { height: 140px; border-radius: var(--cxm-rl); }
.cxm-skeleton--row      { height: 48px; border-radius: var(--cxm-r); }

.cxm-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
}
.cxm-skeleton-grid {
  display: grid;
  gap: var(--cxm-sp-3);
}
.cxm-skeleton-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cxm-skeleton-grid--4 { grid-template-columns: repeat(4, 1fr); }

@keyframes cxm-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── Spinner / loader ─────────────────────────────────────────── */
.cxm-loader {
  width: 28px;
  height: 28px;
  border: 3px solid var(--cxm-g30);
  border-top-color: var(--cxm-b60);
  border-radius: 50%;
  animation: cxm-spin .9s linear infinite;
  display: inline-block;
}
.cxm-loader--sm { width: 18px; height: 18px; border-width: 2px; }
.cxm-loader--lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes cxm-spin { to { transform: rotate(360deg); } }


/* ── Form footer (sticky actions below a form) ────────────────── */
.cxm-form-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-4) var(--cxm-sp-6);
  background: #fff;
  border-top: 1px solid var(--cxm-g30);
  margin-top: var(--cxm-sp-5);
  flex-wrap: wrap;
}


/* ── Dark mode — flat palette (deliberately not glassmorphism) ─ */
.dark [class^="cxm-"],
.dark [class*=" cxm-"] { color: var(--cxm-g90); }

.dark .cxm-page,
.dark .cxm-status-card,
.dark .cxm-card-block,
.dark .cxm-modal,
.dark .cxm-tmpl-card,
.dark .cxm-sg-card,
.dark .cxm-health-card,
.dark .cxm-brand-card,
.dark .cxm-lang-card,
.dark .cxm-th-brand-card,
.dark .cxm-th-typo-box,
.dark .cxm-activity-item,
.dark .cxm-quick-action,
.dark .cxm-empty-hero,
.dark .cxm-toast { background: #1a1d24; border-color: #2a2e37; color: var(--cxm-g10); }

.dark .cxm-health-card--screens  { background: linear-gradient(135deg, rgba(16,180,143,.12), #1a1d24 60%); }
.dark .cxm-health-card--inactive { background: linear-gradient(135deg, rgba(255,111,146,.12), #1a1d24 60%); }
.dark .cxm-health-card--publish  { background: linear-gradient(135deg, rgba(134,95,194,.12),  #1a1d24 60%); }

.dark .cxm-title,
.dark .cxm-health-value,
.dark .cxm-sc-title--grey,
.dark .cxm-tbl-name,
.dark .cxm-tmpl-name,
.dark .cxm-sg-card__name,
.dark .cxm-modal__title,
.dark .cxm-card-block__title,
.dark .cxm-section-hdr__title { color: var(--cxm-g10); }

.dark .cxm-subtitle,
.dark .cxm-header p,
.dark .cxm-section-hdr__sub,
.dark .cxm-tbl-sub,
.dark .cxm-tmpl-meta,
.dark .cxm-pagination-info { color: var(--cxm-g70); }

.dark .cxm-table thead th     { background: #14161c; color: var(--cxm-g70); border-bottom-color: #2a2e37; }
.dark .cxm-table tbody tr     { border-bottom-color: #2a2e37; }
.dark .cxm-table tbody tr:hover { background: #20242d; }
.dark .cxm-table tbody td     { color: var(--cxm-g90); }

.dark .cxm-form-input,
.dark .cxm-input,
.dark .cxm-search-input,
.dark .cxm-select,
.dark .cxm-pg-btn,
.dark .cxm-btn--ghost,
.dark .cxm-bd-tab,
.dark .cxm-row-icon-btn,
.dark .cxm-modal__close,
.dark .cxm-sg-more-btn { background: #14161c; border-color: #2a2e37; color: var(--cxm-g10); }

/* Disabled row-icon-btn in dark mode — keep the dark surface, just mute it. */
.dark .cxm-row-icon-btn:disabled,
.dark .cxm-row-icon-btn[disabled],
.dark .cxm-row-icon-btn:disabled:hover,
.dark .cxm-row-icon-btn[disabled]:hover { background: #14161c; border-color: #2a2e37; color: var(--cxm-g50); }

.dark .cxm-form-input:focus,
.dark .cxm-input:focus,
.dark .cxm-search-input:focus,
.dark .cxm-select:focus { border-color: var(--cxm-b60); }

.dark .cxm-filter-bar { background: #1a1d24; border-color: #2a2e37; }
.dark .cxm-filter-bar__count { background: #14161c; color: var(--cxm-g70); }
.dark .cxm-filter-bar__count--plain { background: transparent; color: var(--cxm-g20); }
.dark .cxm-search-input--muted { background: #14161c; border-color: #14161c; color: var(--cxm-g20); }
.dark .cxm-search-input--muted:focus { background: #1a1d24; border-color: var(--cxm-b60); }

.dark .cxm-pagination-row,
.dark .cxm-card-block__header,
.dark .cxm-modal__header,
.dark .cxm-modal__footer,
.dark .cxm-form-footer { border-top-color: #2a2e37; border-bottom-color: #2a2e37; background: #1a1d24; }

.dark .cxm-bd-tab.is-active,
.dark .cxm-bd-tab--active,
.dark .cxm-pg-btn.is-active,
.dark .cxm-pg-btn--active { background: var(--cxm-b60); border-color: var(--cxm-b60); color: #fff; }

.dark .cxm-sg-tmpl-pill   { background: rgba(65,133,244,.15); border-color: rgba(65,133,244,.3); color: var(--cxm-b40); }

.dark .cxm-alert--info    { background: rgba(65,133,244,.12); border-color: rgba(65,133,244,.28); color: var(--cxm-b40); }
.dark .cxm-alert--success { background: rgba(16,180,143,.12); border-color: rgba(16,180,143,.28); color: #4ADCA1; }
.dark .cxm-alert--warning { background: rgba(255,200,96,.12); border-color: rgba(255,200,96,.3);  color: var(--cxm-w60); }
.dark .cxm-alert--danger  { background: rgba(255,111,146,.12); border-color: rgba(255,111,146,.28); color: #FF8DA5; }

.dark .cxm-skeleton          { background: #2a2e37; }
.dark .cxm-skeleton--shimmer {
  background: linear-gradient(90deg, #1a1d24 0%, #2a2e37 50%, #1a1d24 100%);
  background-size: 200% 100%;
}


/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .cxm-brand-grid     { grid-template-columns: repeat(3, 1fr); }
  .cxm-tmpl-grid      { grid-template-columns: repeat(3, 1fr); }
  .cxm-th-tcard-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .cxm-status-cards   { grid-template-columns: 1fr 1fr; }
  .cxm-brand-grid     { grid-template-columns: repeat(2, 1fr); }
  .cxm-health-grid    { grid-template-columns: 1fr 1fr; }
  .cxm-tmpl-grid      { grid-template-columns: repeat(2, 1fr); }
  .cxm-quick-actions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cxm-page           { padding: var(--cxm-sp-4); }
  .cxm-status-cards,
  .cxm-brand-grid,
  .cxm-health-grid,
  .cxm-tmpl-grid,
  .cxm-th-tcard-grid  { grid-template-columns: 1fr; }
  .cxm-filter-bar     { flex-direction: column; align-items: stretch; }
  .cxm-filter-bar--flat { flex-direction: row; flex-wrap: wrap; }
  .cxm-filter-bar--flat .cxm-filter-bar__spacer { display: none; }
  .cxm-modal          { width: 100%; }
  .cxm-lang-row       { flex-direction: column; align-items: stretch; }
}


/* ── Respect reduced-motion user preference ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cxm-status-card:hover,
  .cxm-brand-card:hover,
  .cxm-tmpl-card:hover,
  .cxm-quick-action:hover { transform: none; }
  .cxm-pulse,
  .cxm-loader,
  .cxm-skeleton { animation: none; }
  .cxm-toast    { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   .cxm-confirm — brand confirm modal. Tone-aware: danger (delete + red),
   primary (mode switches + blue), warning (amber). Replaces the default
   browser window.confirm() chrome so confirms inside the builder feel
   native to the app rather than the host page.

   Bootstrap modal-window selector .cxm-confirm-window keeps the dark
   variant possible without depending on :has() (Chrome 85+ rule from
   project-memory POS Chrome compat).
   ───────────────────────────────────────────────────────────────────── */

/* Bootstrap modal-window — outer shell. 480px is roomy enough to fit the
   bigger 52px tone disc + a full-width warning banner without crowding. */
.cxm-confirm-window .modal-dialog {
  max-width: 480px;
  margin: 6vh auto;
}
.cxm-confirm-window .modal-content {
  border-radius: 20px;
  border: 1px solid var(--cxm-g15, #eaecef);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 28px 64px rgba(15, 23, 42, 0.20);
  overflow: hidden;
  animation: cxm-confirm-pop 200ms cubic-bezier(.16, 1, .3, 1);
  background: transparent; /* let .cxm-confirm own the surface color */
}

@keyframes cxm-confirm-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cxm-confirm-window .modal-content { animation: none; }
}

.cxm-confirm-window.is-dark .modal-content {
  border-color: #2a3142;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.4),
    0 28px 64px rgba(0, 0, 0, 0.55);
}

.cxm-confirm {
  --cxm-b60-rgb: 65, 133, 244;
  --cxm-tone-color: var(--cxm-b60, #4185f4);
  --cxm-tone-color-rgb: var(--cxm-b60-rgb);
  --cxm-warn-bg: rgba(243, 156, 18, 0.10);
  --cxm-warn-bar: #F39C12;
  --cxm-warn-text: #8B5A00;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--cxm-ff, 'Inter', system-ui, sans-serif);
  color: var(--cxm-g100, #1a1f2e);
  background: var(--cxm-g0, #ffffff);
}

/* Tone-tint tokens — set once per data-tone, consumed by the strip,
   icon, warning bar and CTA so the modal's accent is consistent. */
.cxm-confirm[data-tone="danger"] {
  --cxm-tone-color: #E74C3C;
  --cxm-tone-color-rgb: 231, 76, 60;
}
.cxm-confirm[data-tone="primary"] {
  --cxm-tone-color: var(--cxm-b60, #4185f4);
  --cxm-tone-color-rgb: var(--cxm-b60-rgb);
}
.cxm-confirm[data-tone="warning"] {
  --cxm-tone-color: #F39C12;
  --cxm-tone-color-rgb: 243, 156, 18;
}

/* Top tone strip — 3px tone-tinted band sets the alert mood before the
   user reads. Sits flush at the modal top edge under the rounded corners. */
.cxm-confirm__tone-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cxm-tone-color);
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}

/* Close — visible affordance, not a corner glyph. Subtle bg + border so
   it reads as a button even before hover. Larger 36px target. */
.cxm-confirm__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cxm-g10, #f4f5f7);
  border: 1px solid var(--cxm-g20, #e3e6eb);
  border-radius: 10px;
  color: var(--cxm-g60, #5a6473);
  cursor: pointer;
  z-index: 3;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.cxm-confirm__close:hover {
  background: #ffffff;
  color: var(--cxm-g100, #1a1f2e);
  border-color: var(--cxm-g30, #c5cad3);
}
.cxm-confirm__close:active { transform: scale(0.94); }
.cxm-confirm__close:focus-visible {
  outline: 2px solid var(--cxm-tone-color);
  outline-offset: 2px;
}

.cxm-confirm__body {
  padding: 32px 32px 24px;
}

/* Icon + title cluster — horizontal, vertically centered. */
.cxm-confirm__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding-right: 48px;          /* leave room for the close button */
}

.cxm-confirm__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  font-size: 22px;
  background: rgba(var(--cxm-tone-color-rgb), 0.12);
  color: var(--cxm-tone-color);
}
/* Soft tone halo — 4px outer ring at low alpha. Subtle anchor, not a glow. */
.cxm-confirm__icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(var(--cxm-tone-color-rgb), 0.07);
  pointer-events: none;
}

.cxm-confirm__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--cxm-g100, #1a1f2e);
}

/* Body text — full width, no left indent. Reads as a clean paragraph
   under the head row rather than awkwardly aligned under the title. */
.cxm-confirm__msg {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cxm-g60, #5a6473);
}
.cxm-confirm__msg strong {
  color: var(--cxm-g80, #2d3548);
  font-weight: 600;
}

/* Warning — FULL-WIDTH inline banner with a left tone-bar. Tone is
   amber by default (loss/risk reads cautious regardless of primary
   intent) but switches to red on a destructive confirm. */
.cxm-confirm__warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px 12px 16px;
  background: var(--cxm-warn-bg);
  border-radius: 12px;
  border-left: 3px solid var(--cxm-warn-bar);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cxm-warn-text);
}
.cxm-confirm__warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--cxm-warn-bar);
  font-size: 14px;
}
.cxm-confirm__warning-text { flex: 1; }

/* Destructive confirms (delete) shift the warning to red so the
   consequence reads as "you're about to lose something". */
.cxm-confirm[data-tone="danger"] {
  --cxm-warn-bg: rgba(231, 76, 60, 0.10);
  --cxm-warn-bar: #E74C3C;
  --cxm-warn-text: #A52E22;
}

.cxm-confirm__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  background: var(--cxm-g5, #fafbfc);
  border-top: 1px solid var(--cxm-g15, #eaecef);
}

.cxm-confirm__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
              transform 100ms ease, box-shadow 140ms ease;
}
.cxm-confirm__btn:focus-visible {
  outline: 2px solid var(--cxm-tone-color);
  outline-offset: 2px;
}

/* Cancel — bordered secondary button (was text-only ghost). The bordered
   shape pairs naturally with the heavier CTA and gives the user a clear
   "no" target instead of a barely-visible text link. */
.cxm-confirm__btn--ghost {
  background: #ffffff;
  color: var(--cxm-g80, #2d3548);
  border-color: var(--cxm-g20, #d8dde4);
}
.cxm-confirm__btn--ghost:hover {
  background: var(--cxm-g10, #f4f5f7);
  border-color: var(--cxm-g30, #c5cad3);
  color: var(--cxm-g100, #1a1f2e);
}
.cxm-confirm__btn--ghost:active { transform: scale(0.98); }

/* CTA — solid tone-coloured. Subtle hover lift + active depress. */
.cxm-confirm__btn--cta {
  color: #ffffff;
  background: var(--cxm-tone-color);
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(var(--cxm-tone-color-rgb), 0.18),
    0 0 0 1px transparent;
}
.cxm-confirm__btn--cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(var(--cxm-tone-color-rgb), 0.30),
    0 1px 3px rgba(0, 0, 0, 0.08);
  filter: brightness(1.04);
}
.cxm-confirm__btn--cta:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Warning-tone CTA needs dark text on amber for AA contrast. */
.cxm-confirm[data-tone="warning"] .cxm-confirm__btn--cta {
  color: #1a1f2e;
}
.cxm-confirm__btn--cta i { font-size: 12px; }

/* ── Dark theme ───────────────────────────────────────────────────── */

.cxm-confirm[data-theme="dark"] {
  --cxm-warn-text: #f3b657;
  background: #1a1f2e;
  color: #f0f2f5;
}
.cxm-confirm[data-theme="dark"] .cxm-confirm__title { color: #f0f2f5; }
.cxm-confirm[data-theme="dark"] .cxm-confirm__msg { color: #9aa3b5; }
.cxm-confirm[data-theme="dark"] .cxm-confirm__msg strong { color: #e2e6ef; }
.cxm-confirm[data-theme="dark"] .cxm-confirm__close {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: #c0c7d4;
}
.cxm-confirm[data-theme="dark"] .cxm-confirm__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f0f2f5;
}
.cxm-confirm[data-theme="dark"] .cxm-confirm__foot {
  background: #151a27;
  border-top-color: #2a3142;
}
.cxm-confirm[data-theme="dark"] .cxm-confirm__btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #c0c7d4;
}
.cxm-confirm[data-theme="dark"] .cxm-confirm__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f0f2f5;
}
.cxm-confirm[data-theme="dark"] .cxm-confirm__warning {
  background: rgba(243, 156, 18, 0.14);
}
.cxm-confirm[data-theme="dark"][data-tone="danger"] .cxm-confirm__warning {
  background: rgba(231, 76, 60, 0.16);
  --cxm-warn-text: #ee9388;
}

/* ─────────────────────────────────────────────────────────────────────────
   .cxm-source-trio — 3-card segmented selector. Used for the Media Player
   widget SOURCE picker (Upload / Only Playlist / Mix). Each card carries
   its own one-line explanation so customer knows what they're picking
   without hovering. Reusable wherever a 3-way mode selector with rich
   labels is needed; light + dark.
   ───────────────────────────────────────────────────────────────────── */

.cxm-source-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cxm-source-trio__btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: var(--cxm-g0, #ffffff);
  border: 1px solid var(--cxm-g20, #d8dde4);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease,
              background 140ms ease;
}

.cxm-source-trio__btn:hover {
  border-color: rgba(65, 133, 244, 0.45);
  background: rgba(65, 133, 244, 0.03);
}

.cxm-source-trio__btn:focus-visible {
  outline: 2px solid var(--cxm-b60, #4185f4);
  outline-offset: 2px;
}

.cxm-source-trio__btn.is-active {
  border-color: var(--cxm-b60, #4185f4);
  background: rgba(65, 133, 244, 0.06);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.18) inset;
}

.cxm-source-trio__icon {
  font-size: 14px;
  color: var(--cxm-g60, #5a6473);
}

.cxm-source-trio__btn.is-active .cxm-source-trio__icon {
  color: var(--cxm-b60, #4185f4);
}

/* icon-wrap variant: icon inside a small rounded pill (used by .we-ms1-source-trio) */
.cxm-source-trio__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 14px;
  flex-shrink: 0;
}

.cxm-source-trio__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cxm-g100, #1a1f2e);
  line-height: 1.25;
}

.cxm-source-trio__btn.is-active .cxm-source-trio__title {
  color: var(--cxm-b60, #4185f4);
}

.cxm-source-trio__sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--cxm-g50, #8a92a3);
}

/* Tight viewports — stack cards vertically rather than squish text */
@media (max-width: 640px) {
  .cxm-source-trio { grid-template-columns: 1fr; }
}

/* Dark theme */
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__btn {
  background: #222837;
  border-color: #2f3645;
  color: #f0f2f5;
}
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__btn:hover {
  background: #262d3e;
  border-color: rgba(65, 133, 244, 0.5);
}
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__btn.is-active {
  border-color: var(--cxm-b60, #4185f4);
  background: rgba(65, 133, 244, 0.14);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.32) inset;
}
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__title { color: #f0f2f5; }
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__btn.is-active .cxm-source-trio__title { color: #82aaf6; }
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__sub { color: #9aa3b5; }
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__icon { color: #9aa3b5; }
.tb-fullscreen-modal[data-theme="dark"] .cxm-source-trio__btn.is-active .cxm-source-trio__icon { color: #82aaf6; }

/* ─────────────────────────────────────────────────────────────────────────
   .cxm-switch — reusable iOS-style toggle. Hidden native checkbox sits
   under a visual track + thumb so the row stays single-tap, screen
   readers announce "switch, on|off" via role="switch" on the input,
   and ng-model / ng-checked stay bidirectional. Theme-blue track when
   on; track adopts dark-theme tones inside [data-theme="dark"]
   ancestors (e.g. .tb-fullscreen-modal, .cxm-tp-modal).

   Usage:
     <label class="cxm-switch-row">
       <input type="checkbox" role="switch" class="cxm-switch__input"
              ng-checked="..." ng-click="..." aria-label="...">
       <span class="cxm-switch" aria-hidden="true">
         <span class="cxm-switch__track"></span>
         <span class="cxm-switch__thumb"></span>
       </span>
       <span class="cxm-switch-row__label">…</span>
     </label>

   Or — when the row is already a click target (existing
   .we-playlist-multi__row pattern with ng-click on the row), drop the
   <label> and <input>; just place .cxm-switch inside the row and let
   .we-playlist-multi__row--selected drive the state. Both patterns
   are supported below.
   ───────────────────────────────────────────────────────────────────── */

.cxm-switch__input {
  /* sr-only — focusable but visually hidden */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cxm-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}

.cxm-switch__track {
  position: absolute;
  inset: 0;
  background: var(--cxm-g30, #d7dbe0);
  border-radius: 999px;
  transition: background 160ms ease;
}

.cxm-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(4, 9, 17, 0.18);
  transition: left 160ms ease, box-shadow 160ms ease;
}

/* On — triggered by either :checked input or row-level .--selected
   class so both ng-checked and ng-class drivers work. */
.cxm-switch__input:checked ~ .cxm-switch .cxm-switch__track,
.is-on > .cxm-switch .cxm-switch__track,
.we-playlist-multi__row--selected .cxm-switch__track {
  background: var(--cxm-b60, #4185f4);
}

.cxm-switch__input:checked ~ .cxm-switch .cxm-switch__thumb,
.is-on > .cxm-switch .cxm-switch__thumb,
.we-playlist-multi__row--selected .cxm-switch__thumb {
  left: 18px;
  box-shadow: 0 1px 4px rgba(65, 133, 244, 0.45);
}

/* Focus ring on the visual switch when the hidden input is keyboard-focused */
.cxm-switch__input:focus-visible ~ .cxm-switch .cxm-switch__track {
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.25);
}

/* Disabled */
.cxm-switch__input:disabled ~ .cxm-switch,
.is-disabled .cxm-switch {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .cxm-switch__track,
  .cxm-switch__thumb { transition: none; }
}

/* ── Dark-theme adoption ──────────────────────────────────────────────
   The same switch lives inside both light cx-management surfaces and
   dark builder surfaces (.tb-fullscreen-modal[data-theme="dark"]) +
   the dark layout picker (.cxm-tp-modal[data-theme="dark"]). One rule
   per parent keeps token shifts local and explicit.                    */

.tb-fullscreen-modal[data-theme="dark"] .cxm-switch__track,
.cxm-tp-modal[data-theme="dark"] .cxm-switch__track {
  background: #3a4258;
}

.tb-fullscreen-modal[data-theme="dark"] .cxm-switch__thumb,
.cxm-tp-modal[data-theme="dark"] .cxm-switch__thumb {
  background: #f0f2f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.tb-fullscreen-modal[data-theme="dark"] .cxm-switch__input:checked ~ .cxm-switch .cxm-switch__track,
.tb-fullscreen-modal[data-theme="dark"] .is-on > .cxm-switch .cxm-switch__track,
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__row--selected .cxm-switch__track,
.cxm-tp-modal[data-theme="dark"] .cxm-switch__input:checked ~ .cxm-switch .cxm-switch__track {
  background: var(--cxm-b60, #4185f4);
}

.tb-fullscreen-modal[data-theme="dark"] .cxm-switch__input:checked ~ .cxm-switch .cxm-switch__thumb,
.tb-fullscreen-modal[data-theme="dark"] .is-on > .cxm-switch .cxm-switch__thumb,
.tb-fullscreen-modal[data-theme="dark"] .we-playlist-multi__row--selected .cxm-switch__thumb {
  /* Brighter glow on dark surfaces so the on-state reads */
  box-shadow: 0 1px 6px rgba(65, 133, 244, 0.55);
}




/* ═══════════════════════════════════════════════════════════════════════════
   DMB Screen Group — v2 redesign: numbered single-column sections, template
   sort controls, sticky footer, and a Google-Calendar-style week coverage grid.
   Tokens follow CLAUDE.md §6: Primary #1E3A5F · Accent #2D7DD2 · Success #27AE60
   · Warning #F39C12 · Danger #E74C3C · Surface #FFF · Bg #F4F6F9 · Text #2C3E50
   · Muted #7F8C8D · Border #E0E4EA.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Numbered sections ─────────────────────────────────────────────────────── */
.cxm-sg-v2__body { padding: 0; }

.cxm-sg-v2-section {
  padding: 24px;
  border-bottom: 1px solid #E0E4EA;
}
.cxm-sg-v2-section:last-child { border-bottom: 0; }

.cxm-sg-v2-section__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.cxm-sg-v2-section__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #2D7DD2;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.cxm-sg-v2-section__titles { min-width: 0; }
.cxm-sg-v2-section__title {
  margin: 4px 0 2px;
  font-size: 16px;
  font-weight: 600;
  color: #2C3E50;
}
.cxm-sg-v2-section__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #7F8C8D;
}
.cxm-sg-v2-section__hint .fa { font-size: 11px; }
/* Indent the section body to align under the title (past the number badge). */
.cxm-sg-v2-section__body { padding-left: 40px; }

@media (max-width: 768px) {
  .cxm-sg-v2-section { padding: 16px; }
  .cxm-sg-v2-section__body { padding-left: 0; }
}

/* ── Sticky footer ─────────────────────────────────────────────────────────── */
.cxm-sg-v2-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #FFFFFF;
  border-top: 1px solid #E0E4EA;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* ── Template reorder (sort) controls ──────────────────────────────────────── */
.cxm-sg-sched-row__move {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 4px;
}
.cxm-sg-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #E0E4EA;
  border-radius: 4px;
  color: #2D7DD2;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cxm-sg-move-btn:hover:not(:disabled) { background: #F4F6F9; border-color: #2D7DD2; }
.cxm-sg-move-btn:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 1px; }
.cxm-sg-move-btn:disabled { opacity: 0.35; cursor: not-allowed; color: #7F8C8D; }

/* ── Coverage: empty hint ──────────────────────────────────────────────────── */
.cxm-sg-cal-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: #F4F6F9;
  border: 1px dashed #E0E4EA;
  border-radius: 8px;
  color: #7F8C8D;
}
.cxm-sg-cal-empty .fa { font-size: 16px; }

/* ── Coverage: advisories ──────────────────────────────────────────────────── */
.cxm-sg-cal__advisory {
  margin-bottom: 12px;
  padding: 12px 16px;
  background: rgba(243, 156, 18, 0.10);
  border: 1px solid rgba(243, 156, 18, 0.40);
  border-radius: 8px;
}
.cxm-sg-cal__advisory-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #8A5A00;
}
.cxm-sg-cal__advisory-row + .cxm-sg-cal__advisory-row { margin-top: 6px; }
.cxm-sg-cal__advisory-row .fa { margin-top: 2px; color: #F39C12; flex-shrink: 0; }

.cxm-sg-cal__gap-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.32);
  border-radius: 8px;
  font-size: 13px;
  color: #C0392B;
}
.cxm-sg-cal__gap-note .fa { flex-shrink: 0; }

/* Date-range advisory — informational (blue), distinct from the red gap note. */
.cxm-sg-cal__date-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: rgba(45, 125, 210, 0.07);
  border: 1px solid rgba(45, 125, 210, 0.28);
  border-radius: 8px;
  font-size: 13px;
  color: #1E3A5F;
}
.cxm-sg-cal__date-note .fa { flex-shrink: 0; color: #2D7DD2; }
/* Small calendar glyph prefixed to a date-ranged template's block label. */
.cxm-sg-cal__block-cal { margin-right: 4px; font-size: 10px; opacity: 0.8; }

/* ── Coverage: the week grid ───────────────────────────────────────────────── */
.cxm-sg-cal {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #E0E4EA;
  border-radius: 8px;
  background: #FFFFFF;
}
.cxm-sg-cal__head,
.cxm-sg-cal__body {
  display: flex;
  min-width: 680px;
}
.cxm-sg-cal__head {
  border-bottom: 1px solid #E0E4EA;
  background: #F4F6F9;
}
.cxm-sg-cal__gutter-head,
.cxm-sg-cal__gutter {
  flex: 0 0 48px;
  width: 48px;
}
.cxm-sg-cal__colhead {
  flex: 1 1 0;
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #2C3E50;
  border-left: 1px solid #E0E4EA;
}
.cxm-sg-cal__colhead--today {
  background: rgba(45, 125, 210, 0.10);
  color: #2D7DD2;
}

/* Hour gutter — labels pinned to their time position. */
.cxm-sg-cal__gutter {
  position: relative;
  height: 320px;
}
.cxm-sg-cal__tick {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-size: 11px;
  color: #7F8C8D;
  font-variant-numeric: tabular-nums;
}

/* Day column — relative box; hourly gridlines drawn as a repeating background. */
.cxm-sg-cal__col {
  position: relative;
  flex: 1 1 0;
  height: 420px;
  border-left: 1px solid #E0E4EA;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% / 24 - 1px),
    #EEF1F5 calc(100% / 24 - 1px),
    #EEF1F5 calc(100% / 24)
  );
}
.cxm-sg-cal__col--today { background-color: rgba(45, 125, 210, 0.04); }

/* Gap (blank-screen) marker — sits behind the lanes. */
.cxm-sg-cal__gap {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(231, 76, 60, 0.10);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(231, 76, 60, 0.45) 0,
    rgba(231, 76, 60, 0.45) 5px,
    rgba(231, 76, 60, 0.12) 5px,
    rgba(231, 76, 60, 0.12) 10px
  );
}

/* Each template gets a vertical lane within the day column. */
.cxm-sg-cal__lane {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  border-right: 1px solid rgba(224, 228, 234, 0.6);
  cursor: copy; /* hints "click to add" */
}
.cxm-sg-cal__lane:last-child { border-right: 0; }
.cxm-sg-cal__lane:hover { background: rgba(45, 125, 210, 0.04); }
.cxm-sg-cal__lane:focus-visible { outline: 2px solid #2D7DD2; outline-offset: -2px; }

/* A scheduled block. Winner = solid (colour set inline); eclipsed = hatched. */
.cxm-sg-cal__block {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 14px;
  border-radius: 3px;
  overflow: hidden;
  cursor: default; /* calendar is view-only — blocks are not interactive */
  box-sizing: border-box;
  pointer-events: auto;
  /* Solid colour identity bar on the left; colour set inline per template. */
  border-left: 3px solid #2D7DD2;
}
/* Winner: pale tint fill (set inline) + dark text → WCAG-AA on any palette colour. */
.cxm-sg-cal__block--win {
  color: #2C3E50;
}
/* Eclipsed (hidden by a higher template): muted grey hatch, kept de-emphasised
   but still tied to its template via the inline left-bar colour. */
.cxm-sg-cal__block--eclipsed {
  background-color: rgba(127, 140, 141, 0.10);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(127, 140, 141, 0.40) 0,
    rgba(127, 140, 141, 0.40) 4px,
    rgba(127, 140, 141, 0.12) 4px,
    rgba(127, 140, 141, 0.12) 8px
  );
  border-left-style: dashed;
  color: #3E4B4A; /* ≥5:1 even on the darkest hatch stripe */
}
.cxm-sg-cal__block-label {
  display: block;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Coverage: legend + tip ────────────────────────────────────────────────── */
.cxm-sg-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 12px;
  color: #2C3E50;
}
.cxm-sg-cal__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cxm-sg-cal__legend-date { font-size: 11px; color: #7F8C8D; white-space: nowrap; }
.cxm-sg-cal__legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.cxm-sg-cal__legend-swatch--eclipsed {
  background: repeating-linear-gradient(
    45deg,
    rgba(127, 140, 141, 0.55) 0,
    rgba(127, 140, 141, 0.55) 4px,
    rgba(127, 140, 141, 0.16) 4px,
    rgba(127, 140, 141, 0.16) 8px
  );
  border-color: rgba(127, 140, 141, 0.6);
}
.cxm-sg-cal__legend-swatch--gap {
  background: repeating-linear-gradient(
    45deg,
    rgba(231, 76, 60, 0.45) 0,
    rgba(231, 76, 60, 0.45) 4px,
    rgba(231, 76, 60, 0.12) 4px,
    rgba(231, 76, 60, 0.12) 8px
  );
  border-color: rgba(231, 76, 60, 0.5);
}
.cxm-sg-cal__legend-badge {
  padding: 1px 6px;
  background: #2D7DD2;
  color: #FFFFFF;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.cxm-sg-cal__legend-name { color: #2C3E50; }

.cxm-sg-cal__tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 12px;
  color: #7F8C8D;
}

@media (prefers-reduced-motion: reduce) {
  .cxm-sg-move-btn,
  .cxm-sg-cal__lane { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DMB Screen Group calendar — drag-to-add refinements (GCal-style):
   template "drawing" chip picker · drag ghost · now-line · packed columns.
   These rules come after the base cxm-sg-cal block so they win on order.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drawing-target chip picker */
.cxm-sg-cal__draw-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cxm-sg-cal__draw-label {
  font-size: 12px;
  color: #7F8C8D;
  font-weight: 600;
}
.cxm-sg-cal__draw-label .fa { font-size: 11px; }
.cxm-sg-cal__draw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  background: #FFFFFF;
  border: 1px solid #E0E4EA;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #2C3E50;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cxm-sg-cal__draw-chip:hover { border-color: #2D7DD2; }
.cxm-sg-cal__draw-chip:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 2px; }
.cxm-sg-cal__draw-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
/* Selected: light tint fill + 2px colour border + dark text (AA-safe; the old
   solid-colour + white text failed contrast on light palette hues). */
.cxm-sg-cal__draw-chip--on {
  border-width: 2px;
  padding: 3px 11px; /* offset the +1px border so the chip doesn't shift */
  color: #2C3E50;
  font-weight: 700;
}

/* The column is the drag surface (crosshair shows everywhere). Lanes are
   display-only: they pass mouse events through so a drag can start anywhere,
   while their child blocks re-enable pointer-events to stay clickable. */
.cxm-sg-cal__col { cursor: default; }
.cxm-sg-cal__lane { pointer-events: none; cursor: default; }
.cxm-sg-cal__lane:hover { background: transparent; }

/* Drag ghost — the block being drawn. Colour set inline (focused template). */
.cxm-sg-cal__ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 5;
  border-radius: 3px;
  opacity: 0.55;
  border: 1px dashed rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* "Now" indicator line (today column) */
.cxm-sg-cal__now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 0;
  border-top: 2px solid #E74C3C;
  pointer-events: none;
}
.cxm-sg-cal__now::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #E74C3C;
}

/* Let event labels wrap so wide blocks show the full name (no "Meals …"). */
.cxm-sg-cal__block-label {
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* A touch more room so labels read on narrow days. */
.cxm-sg-cal__head,
.cxm-sg-cal__body { min-width: 760px; }

/* ── Transposed coverage calendar: days as ROWS, time across the top ──────────
   Markup carries `cxm-sg-cal--rows`. The timeline %s are reused unchanged — time
   (topPct/heightPct) now drives the HORIZONTAL axis (left/width) and template
   packing (leftPct/widthPct) drives the VERTICAL axis (stacked lanes). These
   rules override the legacy column layout for that instance only, so each
   template gets a full-width 24h track and labels read on one line. */
.cxm-sg-cal--rows .cxm-sg-cal__head { display: flex; }
.cxm-sg-cal--rows .cxm-sg-cal__corner { flex: 0 0 68px; width: 68px; }
.cxm-sg-cal--rows .cxm-sg-cal__timehead { position: relative; flex: 1 1 0; height: 32px; }
.cxm-sg-cal--rows .cxm-sg-cal__tick {
  position: absolute; top: 50%; right: auto; transform: translate(-50%, -50%);
}
.cxm-sg-cal--rows .cxm-sg-cal__tick:first-child { transform: translate(0, -50%); }
.cxm-sg-cal--rows .cxm-sg-cal__tick:last-child  { transform: translate(-100%, -50%); }

/* Body: a vertical stack of day rows (not a flex row of day columns). */
.cxm-sg-cal--rows .cxm-sg-cal__body { display: block; }
.cxm-sg-cal--rows .cxm-sg-cal__row { display: flex; align-items: stretch; border-top: 1px solid #E0E4EA; }
.cxm-sg-cal--rows .cxm-sg-cal__row:first-child { border-top: 0; }
/* Rowhead = the day label; top-aligned so it sits beside the winner bar. */
.cxm-sg-cal--rows .cxm-sg-cal__rowhead {
  flex: 0 0 68px; width: 68px; box-sizing: border-box;
  /* Top-pad to vertically align the day label with the 38px winner band, while
     staying top-anchored when a "Hidden" caption extends the row below. */
  display: flex; align-items: flex-start; padding: 13px 12px;
  font-size: 12px; font-weight: 600; color: #2C3E50;
  background: #F4F6F9; border-right: 1px solid #E0E4EA;
}
.cxm-sg-cal--rows .cxm-sg-cal__row--today .cxm-sg-cal__rowhead { background: rgba(45, 125, 210, 0.10); color: #2D7DD2; }

/* Day track — relative box; vertical hourly gridlines via repeating background. */
.cxm-sg-cal--rows .cxm-sg-cal__track {
  position: relative; width: 100%; min-width: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / 24 - 1px),
    #EEF1F5 calc(100% / 24 - 1px),
    #EEF1F5 calc(100% / 24)
  );
}
.cxm-sg-cal--rows .cxm-sg-cal__row--today .cxm-sg-cal__track { background-color: rgba(45, 125, 210, 0.04); }

/* Gap (blank-screen) marker — spans the full lane height; left/width = time (inline). */
.cxm-sg-cal--rows .cxm-sg-cal__gap { top: 0; bottom: 0; }

/* Lanes stack vertically (top/height inline = template packing); divider below each. */
.cxm-sg-cal--rows .cxm-sg-cal__lane {
  top: auto; bottom: auto; left: 0; right: 0;
  border-right: 0; border-bottom: 1px solid rgba(224, 228, 234, 0.6);
}
.cxm-sg-cal--rows .cxm-sg-cal__lane:last-child { border-bottom: 0; }

/* Blocks fill the lane height; left/width (inline) place them along time. */
.cxm-sg-cal--rows .cxm-sg-cal__block {
  top: 3px; bottom: 3px; left: 2px; right: auto; min-height: 0; min-width: 5px;
  display: flex; align-items: center;   /* vertically centre the label in the band */
}
.cxm-sg-cal--rows .cxm-sg-cal__block-label { padding: 0 10px; white-space: nowrap; word-break: normal; line-height: 1.3; }

/* "Now" indicator — vertical line at the current time. */
.cxm-sg-cal--rows .cxm-sg-cal__now {
  top: 0; bottom: 0; right: auto; width: 0; height: auto;
  border-top: 0; border-left: 2px solid #E74C3C;
}
.cxm-sg-cal--rows .cxm-sg-cal__now::before { top: -4px; left: -3px; }

/* The bar that PLAYS — solid template tint (inline) + a "plays" pill. */
.cxm-sg-cal--rows .cxm-sg-cal__block--win { font-weight: 600; }
.cxm-sg-cal--rows .cxm-sg-cal__plays-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.72); color: #2C3E50;
}

/* Overridden bars keep the template's OWN colour (inline tint) but read as
   secondary: white diagonal stripes over the tint + dimmed + dashed identity
   bar. Overrides the legacy grey-hatch eclipsed style for this layout. */
.cxm-sg-cal--rows .cxm-sg-cal__block--eclipsed {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.60) 0, rgba(255, 255, 255, 0.60) 5px,
    rgba(255, 255, 255, 0) 5px,   rgba(255, 255, 255, 0) 10px
  );
  opacity: 0.72;
  border-left-style: dashed;
}
.cxm-sg-cal--rows .cxm-sg-cal__block--eclipsed .cxm-sg-cal__block-label { color: #5B636B; font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════════════════
   DMB Screen Group — calendar-managed scheduling (v3): slim template list,
   focused-template toolbar, and the block edit popover. Reuses the existing
   cxm-sg-sched-* day/preset/window styles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Slim template list (§2) ───────────────────────────────────────────────── */
.cxm-sg-tpl-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cxm-sg-tpl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #E0E4EA;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cxm-sg-tpl-row:hover { border-color: #2D7DD2; background: #FAFBFC; }
.cxm-sg-tpl-row:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 2px; }
.cxm-sg-tpl-row--focus {
  border-color: #2D7DD2;
  box-shadow: inset 3px 0 0 #2D7DD2, 0 1px 4px rgba(45, 125, 210, 0.12);
  background: rgba(45, 125, 210, 0.04);
}
.cxm-sg-tpl-row__dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.cxm-sg-tpl-row .cxm-sg-sched-row__name { font-weight: 600; color: #2C3E50; }
.cxm-sg-tpl-row__edithint {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #7F8C8D;
  white-space: nowrap;
}
.cxm-sg-tpl-row--focus .cxm-sg-tpl-row__edithint { color: #2D7DD2; font-weight: 600; }
/* When the row is focused, the chip sits before the hint, not pushed to the far right. */
.cxm-sg-tpl-row .cxm-sg-sched-row__chip { margin-left: 0; }

/* ── Focused-template toolbar (§3) ─────────────────────────────────────────── */
.cxm-sg-cal-tools {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #F4F6F9;
  border: 1px solid #E0E4EA;
  border-radius: 8px;
}
.cxm-sg-cal-tools__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cxm-sg-cal-tools__row + .cxm-sg-cal-tools__row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E7EBF0;
}
.cxm-sg-cal-tools__label {
  flex: 0 0 60px;
  font-size: 12px;
  font-weight: 700;
  color: #7F8C8D;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cxm-sg-cal-tools__label .cxm-field-optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cxm-sg-cal-tools__date { max-width: 170px; }

/* Time-blocks row (§3 toolbar) — set the focused template's windows here. */
.cxm-sg-cal-tools__times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.cxm-sg-cal-tools__allday {
  font-size: 12px;
  color: #7F8C8D;
  font-style: italic;
}
.cxm-sg-cal-tools__time-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Wide enough for a 12-hour "02:00 PM" value + the native clock spinner. */
.cxm-sg-cal-tools__time { min-width: 138px; max-width: 160px; }
.cxm-sg-cal-tools__time-del {
  width: 26px;
  height: 26px;
  border: 1px solid #E0E4EA;
  border-radius: 6px;
  background: #fff;
  color: #7F8C8D;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cxm-sg-cal-tools__time-del:hover { color: #E74C3C; border-color: #E74C3C; background: #FDEDEC; }
.cxm-sg-cal-tools__time-del:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 1px; }
.cxm-sg-cal-tools__addtime { flex-shrink: 0; }

/* ── Block edit popover (§3) ───────────────────────────────────────────────── */
.cxm-sg-cal__edit {
  margin-top: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid #2D7DD2;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.cxm-sg-cal__edit-window {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.cxm-sg-cal__edit-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #2C3E50;
  margin-right: 4px;
  padding-bottom: 6px;
}
.cxm-sg-cal__edit-field { display: flex; flex-direction: column; gap: 2px; }
.cxm-sg-cal__edit-field .cxm-input { max-width: 150px; }
.cxm-sg-cal__edit-spacer { flex: 1 1 auto; }
.cxm-sg-cal__edit-del {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  background: #FFFFFF;
  border: 1px solid #E74C3C;
  border-radius: 6px;
  color: #C0392B;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cxm-sg-cal__edit-del:hover { background: rgba(231, 76, 60, 0.08); }
.cxm-sg-cal__edit-del:focus-visible { outline: 2px solid #E74C3C; outline-offset: 2px; }
.cxm-sg-cal__edit-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #2C3E50;
}
.cxm-sg-cal__edit-info .fa { color: #2D7DD2; }
.cxm-sg-cal__edit-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: #7F8C8D;
  cursor: pointer;
  border-radius: 6px;
}
.cxm-sg-cal__edit-close:hover { background: #F4F6F9; color: #2C3E50; }
.cxm-sg-cal__edit .cxm-sg-sched-error { margin-top: 10px; }

/* The block currently open in the editor gets a focus ring. */
.cxm-sg-cal__block--editing {
  box-shadow: 0 0 0 2px #2D7DD2, 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 3;
}


/* ── Template list drag-and-drop reordering (§2) ───────────────────────────── */
.cxm-sg-tpl-row { position: relative; }
.cxm-sg-tpl-row__grip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: #B0B8C1;
  cursor: grab;
  font-size: 13px;
}
.cxm-sg-tpl-row__grip:active { cursor: grabbing; }
.cxm-sg-tpl-row:hover .cxm-sg-tpl-row__grip { color: #7F8C8D; }

/* Keyboard-accessible reorder arrows (paired with the mouse-only drag handle). */
.cxm-sg-tpl-row__reorder { display: inline-flex; gap: 3px; flex-shrink: 0; }
.cxm-sg-tpl-row__move {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid #E0E4EA; border-radius: 4px;
  background: #FFFFFF; color: #7F8C8D; font-size: 10px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.cxm-sg-tpl-row__move:hover:not(:disabled) {
  border-color: #2D7DD2; color: #2D7DD2; background: rgba(45, 125, 210, 0.06);
}
.cxm-sg-tpl-row__move:disabled { opacity: 0.4; cursor: not-allowed; }
.cxm-sg-tpl-row__move:focus-visible { outline: 2px solid #2D7DD2; outline-offset: 1px; }
.cxm-sg-tpl-row--dragging {
  opacity: 0.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* Drop indicators — a 2px accent bar above/below the hovered row. */
.cxm-sg-tpl-row--drop-above::before,
.cxm-sg-tpl-row--drop-below::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: #2D7DD2;
}
.cxm-sg-tpl-row--drop-above::before { top: -6px; }
.cxm-sg-tpl-row--drop-below::after { bottom: -6px; }