/*
 * Customer Operations unified centre
 *
 * Keeps the existing React campaign and D2C routes intact, while adding the
 * missing CDP / audience / MA workspaces and one consistent navigation model.
 */

:root {
  --co-ink: #171719;
  --co-ink-soft: #2d2d30;
  --co-gold: #a98b54;
  --co-gold-soft: #eee6d4;
  --co-canvas: #f7f6f2;
  --co-panel: #fff;
  --co-line: #dedfdc;
  --co-muted: #72767b;
  --co-good: #2f7457;
  --co-good-soft: #e5f2eb;
  --co-warn: #9a6a19;
  --co-warn-soft: #fbf1dd;
  --co-danger: #a94e45;
  --co-info: #3e6687;
}

body.co-unified-center .up-nav-cap b {
  letter-spacing: .09em;
}

body.co-unified-center #root .up-sidenav {
  visibility: hidden;
}

.co-unified-sidenav {
  position: fixed !important;
  z-index: 32 !important;
  top: var(--lesh-header-height, 64px) !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--lesh-sidebar-width, 248px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: auto !important;
  visibility: visible !important;
}

.co-unified-sidenav[hidden] {
  display: none !important;
}

.co-unified-sidenav > nav {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

body.co-custom-active .up-main {
  visibility: hidden;
}

body.co-unified-center .up-sidenav nav > div:first-child .up-nav-group-label {
  color: #cdbb95;
}

body.co-unified-center .up-sidenav nav a.co-tool-link::after {
  content: "↗";
  margin-left: auto;
  color: #777c80;
  font-size: 10px;
}

.co-custom-workspace {
  position: fixed;
  z-index: 28;
  top: var(--lesh-header-height, 64px);
  left: var(--lesh-sidebar-width, 248px);
  right: auto;
  bottom: 0;
  width: calc(100vw - var(--lesh-sidebar-width, 248px));
  max-width: none;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--co-ink);
  background: var(--co-canvas);
  font: 12px/1.55 var(--lesh-font-sans, Inter, "PingFang SC", sans-serif);
}

.co-custom-workspace,
.co-custom-workspace *,
.co-custom-workspace *::before,
.co-custom-workspace *::after {
  box-sizing: border-box;
}

.co-custom-workspace[hidden] {
  display: none;
}

.co-workspace-inner {
  width: 100%;
  max-width: 1560px;
  min-height: 100%;
  margin: 0 auto;
  padding: 22px 26px 60px;
}

.co-crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: var(--co-muted);
  font-size: 11px;
}

.co-crumbs a {
  color: inherit;
  text-decoration: none;
}

.co-crumbs b {
  color: var(--co-ink);
}

.co-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.co-eyebrow,
.co-panel-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--co-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.co-page-head h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}

.co-page-head p {
  max-width: 820px;
  margin: 8px 0 0;
  color: #5d6166;
}

.co-head-actions,
.co-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.co-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #cfd0cd;
  border-radius: 6px;
  color: var(--co-ink);
  background: #fff;
  font: 600 11px/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
}

.co-button:hover {
  border-color: var(--co-gold);
  background: #fbf8f1;
}

.co-button.primary {
  border-color: var(--co-ink);
  color: #fff;
  background: var(--co-ink);
}

.co-button.primary:hover {
  background: #2b2b2e;
}

.co-button.ghost {
  border-color: transparent;
  background: transparent;
}

.co-loop {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--co-line);
  border-radius: 8px;
  background: #fff;
}

.co-loop a,
.co-loop span {
  position: relative;
  min-height: 64px;
  padding: 12px 15px;
  color: #5f6368;
  text-decoration: none;
  border-right: 1px solid var(--co-line);
}

.co-loop > :last-child {
  border-right: 0;
}

.co-loop small,
.co-loop b {
  display: block;
}

.co-loop small {
  margin-bottom: 4px;
  color: #999b9e;
  font-size: 9px;
}

.co-loop b {
  font-size: 12px;
  font-weight: 600;
}

.co-loop a:hover,
.co-loop .active {
  color: #fff;
  background: var(--co-ink);
}

.co-loop a:hover small,
.co-loop .active small {
  color: var(--co-gold-soft);
}

.co-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.co-metric,
.co-panel,
.co-card {
  border: 1px solid var(--co-line);
  border-radius: 7px;
  background: var(--co-panel);
  box-shadow: 0 5px 16px rgba(23, 23, 25, .035);
}

.co-metric {
  min-height: 108px;
  padding: 17px 18px;
}

.co-metric span,
.co-metric small {
  display: block;
  color: var(--co-muted);
  font-size: 11px;
}

.co-metric strong {
  display: block;
  margin: 9px 0 5px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
  gap: 16px;
  align-items: start;
}

.co-grid.equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.co-panel {
  overflow: hidden;
}

.co-panel + .co-panel,
.co-grid + .co-panel,
.co-panel + .co-grid {
  margin-top: 16px;
}

.co-grid .co-panel + .co-panel {
  margin-top: 0;
}

.co-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 67px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--co-line);
}

.co-panel-head h2,
.co-panel-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.co-panel-head p {
  margin: 3px 0 0;
  color: var(--co-muted);
  font-size: 11px;
}

.co-panel-body {
  padding: 17px 18px;
}

.co-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, .7fr));
  gap: 11px;
}

.co-field {
  display: grid;
  gap: 6px;
}

.co-field > span {
  color: #4d5155;
  font-size: 11px;
  font-weight: 600;
}

.co-field input,
.co-field select,
.co-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cfd0cd;
  border-radius: 6px;
  color: var(--co-ink);
  background: #fff;
  font: 12px/1.4 inherit;
}

.co-table {
  width: 100%;
  border-collapse: collapse;
}

.co-table th,
.co-table td {
  padding: 12px 13px;
  border-bottom: 1px solid #e6e5e1;
  text-align: left;
  vertical-align: middle;
}

.co-table th {
  color: #6b6f73;
  background: #f4f5f3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.co-table tbody tr {
  cursor: pointer;
}

.co-table tbody tr:hover,
.co-table tbody tr.selected {
  background: #faf7f0;
}

.co-table td strong,
.co-table td small {
  display: block;
}

.co-table td strong {
  font-size: 12px;
  font-weight: 600;
}

.co-table td small {
  margin-top: 3px;
  color: var(--co-muted);
  font-size: 10px;
}

.co-badge,
.co-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #5c564b;
  background: #f2eee5;
  font-size: 10px;
  font-weight: 600;
}

.co-badge.good,
.co-tag.good {
  color: var(--co-good);
  background: var(--co-good-soft);
}

.co-badge.warn,
.co-tag.warn {
  color: var(--co-warn);
  background: var(--co-warn-soft);
}

.co-badge.info,
.co-tag.info {
  color: var(--co-info);
  background: #e9f0f6;
}

.co-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.co-tag-row + .co-tag-row {
  margin-top: 8px;
}

.co-avatar {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-right: 10px;
  border-radius: 50%;
  color: #171719;
  background: #cdb57d;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}

.co-customer-cell {
  display: flex;
  align-items: center;
}

.co-customer-cell > span:last-child {
  min-width: 0;
}

.co-signal-list,
.co-action-list,
.co-segment-list,
.co-journey-list {
  display: grid;
  gap: 9px;
}

.co-signal,
.co-action,
.co-segment,
.co-journey-row {
  padding: 13px 14px;
  border: 1px solid #e0dfda;
  border-radius: 6px;
  background: #fff;
}

.co-action,
.co-journey-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.co-action strong,
.co-segment strong,
.co-journey-row strong,
.co-signal strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
}

.co-action p,
.co-segment p,
.co-journey-row p,
.co-signal p {
  margin: 0;
  color: var(--co-muted);
  font-size: 11px;
}

.co-evidence {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed #ddd9d0;
  color: #5f6468;
  font-size: 10px;
}

.co-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e9e7;
}

.co-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--co-gold);
}

.co-mini-chart {
  display: grid;
  gap: 11px;
}

.co-chart-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 45px;
  gap: 10px;
  align-items: center;
}

.co-chart-row b {
  font-size: 11px;
  font-weight: 600;
}

.co-chart-row span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e8e6;
}

.co-chart-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #536e86;
}

.co-chart-row em {
  color: var(--co-muted);
  font-style: normal;
  text-align: right;
}

.co-profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px;
  color: #fff;
  border: 1px solid #38383b;
  border-radius: 8px;
  background: linear-gradient(120deg, #171719, #2b2a28 66%, #54462e);
}

.co-profile-hero .co-avatar {
  width: 54px;
  height: 54px;
  margin: 0;
  font-size: 18px;
}

.co-profile-hero h1 {
  margin: 0 0 5px;
  font-size: 22px;
  font-weight: 600;
}

.co-profile-hero p {
  margin: 0;
  color: #c7c7c3;
}

.co-profile-score {
  min-width: 108px;
  padding-left: 18px;
  border-left: 1px solid #575755;
}

.co-profile-score strong,
.co-profile-score small {
  display: block;
}

.co-profile-score strong {
  font-size: 26px;
}

.co-profile-score small {
  color: #cdbb95;
}

.co-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--co-line);
}

.co-tabs button {
  padding: 12px 11px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--co-muted);
  background: transparent;
  font: 600 11px/1.2 inherit;
  cursor: pointer;
}

.co-tabs button.active {
  color: var(--co-ink);
  border-bottom-color: var(--co-gold);
}

.co-tab-panel[hidden] {
  display: none;
}

.co-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.co-detail-list > div {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e7e3;
}

.co-detail-list > div:last-child {
  border-bottom: 0;
}

.co-detail-list dt {
  color: var(--co-muted);
}

.co-detail-list dd {
  margin: 0;
  font-weight: 500;
}

.co-timeline {
  display: grid;
  gap: 0;
}

.co-timeline article {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 1px solid #d9d7d0;
}

.co-timeline article::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--co-gold);
}

.co-timeline article strong,
.co-timeline article span,
.co-timeline article small {
  display: block;
}

.co-timeline article span,
.co-timeline article small {
  color: var(--co-muted);
  font-size: 10px;
}

.co-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
}

.co-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.co-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #e0dfda;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.co-check:has(input:checked) {
  border-color: var(--co-gold);
  background: #fbf7ee;
}

.co-check input {
  margin-top: 2px;
  accent-color: var(--co-gold);
}

.co-check strong,
.co-check small {
  display: block;
}

.co-check small {
  margin-top: 3px;
  color: var(--co-muted);
  font-size: 10px;
}

.co-audience-result {
  position: sticky;
  top: 16px;
  padding: 18px;
  color: #fff;
  border-radius: 7px;
  background: var(--co-ink);
}

.co-audience-result > span,
.co-audience-result > small,
.co-audience-result > strong {
  display: block;
}

.co-audience-result > span {
  color: #cdbb95;
  font-size: 10px;
  letter-spacing: .12em;
}

.co-audience-result > strong {
  margin: 12px 0 4px;
  font-size: 32px;
  font-weight: 600;
}

.co-audience-result > small {
  color: #b9b9b6;
}

.co-audience-result .co-tag-row {
  margin: 15px 0;
}

.co-audience-result .co-tag {
  color: #e9e2d2;
  background: #343438;
}

.co-automation-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.co-journey-row {
  cursor: pointer;
}

.co-journey-row.selected {
  border-color: var(--co-gold);
  background: #fbf7ee;
}

.co-flow-canvas {
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  padding: 5px 0 10px;
}

.co-flow-node {
  flex: 0 0 146px;
  min-height: 116px;
  padding: 13px;
  border: 1px solid #dcdad3;
  border-radius: 7px;
  background: #fff;
}

.co-flow-node.branch {
  border-color: #cdbb95;
  background: #fbf7ed;
}

.co-flow-node.exit {
  background: #f1f2f0;
}

.co-flow-node span,
.co-flow-node strong,
.co-flow-node small {
  display: block;
}

.co-flow-node span {
  color: var(--co-gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
}

.co-flow-node strong {
  margin: 8px 0 5px;
  font-size: 12px;
}

.co-flow-node small {
  color: var(--co-muted);
  font-size: 10px;
}

.co-flow-arrow {
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  color: var(--co-gold);
}

.co-status-note {
  margin-bottom: 16px;
  padding: 11px 13px;
  color: #3d664f;
  border: 1px solid #cbe0d3;
  border-radius: 6px;
  background: var(--co-good-soft);
}

.co-toast {
  position: fixed;
  z-index: 10050;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 12px 15px;
  color: #fff;
  border-radius: 7px;
  background: #171719;
  box-shadow: 0 12px 30px rgba(17,17,19,.2);
  font-size: 11px;
}

.co-campaign-ribbon {
  position: fixed;
  z-index: 27;
  top: var(--lesh-header-height, 64px);
  right: 0;
  left: var(--lesh-sidebar-width, 248px);
  margin: 0;
  padding: 10px 26px 12px;
  border: 1px solid #d8d4ca;
  border-radius: 0;
  background: linear-gradient(90deg, #fbf8f1, #fff);
  box-shadow: 0 8px 22px rgba(17,17,19,.08);
}

body.co-campaign-active .up-main {
  padding-top: 124px !important;
}

.co-campaign-ribbon header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.co-campaign-ribbon header strong {
  font-size: 12px;
}

.co-campaign-ribbon header span {
  color: var(--co-muted);
  font-size: 10px;
}

.co-campaign-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  overflow: hidden;
  border: 1px solid #dfddd6;
  border-radius: 6px;
}

.co-campaign-steps a,
.co-campaign-steps span {
  min-height: 52px;
  padding: 9px 11px;
  border-right: 1px solid #dfddd6;
  color: #5d6165;
  background: #fff;
  text-decoration: none;
}

.co-campaign-steps > :last-child {
  border-right: 0;
}

.co-campaign-steps small,
.co-campaign-steps b {
  display: block;
}

.co-campaign-steps small {
  color: #a08b62;
  font-size: 9px;
}

.co-campaign-steps b {
  margin-top: 3px;
  font-size: 11px;
}

.co-campaign-steps a:hover {
  color: #fff;
  background: #171719;
}

@media (max-width: 1320px) {
  .co-loop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .co-loop > :nth-child(4) { border-right: 0; }
  .co-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-grid,
  .co-grid.equal,
  .co-builder,
  .co-automation-layout { grid-template-columns: 1fr; }
  .co-audience-result { position: static; }
  .co-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .co-custom-workspace { left: 0 !important; width: 100vw; }
  .co-campaign-ribbon { left: 0; }
  .co-unified-sidenav { transform: translateX(-100%); }
  .co-unified-sidenav.open { transform: translateX(0); }
  .co-workspace-inner { padding: 18px 16px 54px; }
  .co-page-head { align-items: flex-start; flex-direction: column; }
  .co-campaign-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .co-campaign-steps > :nth-child(3) { border-right: 0; }
}

@media (max-width: 640px) {
  .co-loop,
  .co-metrics,
  .co-filterbar,
  .co-check-grid { grid-template-columns: 1fr; }
  .co-loop > * { border-right: 0; border-bottom: 1px solid var(--co-line); }
  .co-loop > :last-child { border-bottom: 0; }
  .co-page-head h1 { font-size: 25px; }
  .co-profile-hero { grid-template-columns: auto 1fr; }
  .co-profile-score { grid-column: 1 / -1; padding: 12px 0 0; border-left: 0; border-top: 1px solid #575755; }
  .co-detail-list > div { grid-template-columns: 1fr; gap: 3px; }
  .co-campaign-steps { grid-template-columns: 1fr 1fr; }
  .co-campaign-steps > :nth-child(3) { border-right: 1px solid #dfddd6; }
  .co-campaign-steps > :nth-child(even) { border-right: 0; }
}