/* Scenario DTG chip */
.scenario-dtg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(96,165,250,.42);
  border-radius: 12px;
  background: rgba(30,64,115,.58);
  color: rgba(248,250,252,.98);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.18);
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .08em;
  white-space: nowrap;
  line-height: 1;
}

/* Keep page title left and all topbar controls/chips right */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar .breadcrumb,
.topbar .page-title,
.topbar h1,
.topbar > strong:first-child {
  margin-right: auto;
}

/* Common topbar button groups should sit right */
.topbar .tabs,
.topbar .tabbar,
.topbar .topbar-tabs,
.topbar .topbar-actions,
.topbar nav,
.topbar .actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* If there is no grouped nav, push the first control after title to the right */
.topbar > .btn:first-of-type,
.topbar > button:first-of-type,
.topbar > a:first-of-type,
.topbar > .scenario-dtg-chip:first-of-type {
  margin-left: auto;
}

/* The DTG chip should be the final right-side item, not force other controls left */
.topbar .scenario-dtg-chip {
  margin-left: 8px;
}

/* Hide old live/status chip when a dedicated DTG chip exists on the page */
body:has([data-scenario-dtg-chip="true"]) .topbar .turn-chip:not([data-scenario-dtg-chip="true"]) {
  display: none !important;
}

/* Do not hide save-status chips inside forms/panels if they are not in the topbar */
body:has([data-scenario-dtg-chip="true"]) .topbar .turn-chip[data-save-state] {
  display: none !important;
}