#cli-update-dialog,
#backend-dialog {
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--card-background);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
#cli-update-dialog::backdrop,
#backend-dialog::backdrop {
  background: var(--page-background);
  opacity: 0.8;
}
.update-heading,
.update-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--component-gap);
}
.update-heading {
  padding-bottom: var(--component-gap);
  border-bottom: 1px solid var(--border);
}
#cli-update-title,
#backend-title {
  color: var(--muted-text);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
.update-summary {
  flex-wrap: wrap;
  margin-block: var(--component-gap);
  font-size: 13px;
  color: var(--muted-text);
}
#cli-update-state {
  color: var(--accent);
}
#cli-update-dialog[data-state='available'] #cli-update-state,
#cli-update-dialog[data-state='error'] #cli-update-state {
  color: var(--focus);
}
.update-versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--component-gap);
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--input-background);
}
.update-versions > div {
  padding: 16px;
  min-width: 0;
}
.update-versions > div + div {
  border-left: 1px solid var(--border);
}
.update-versions dt {
  font-size: 13px;
  color: var(--muted-text);
  margin-bottom: var(--component-gap);
}
.update-versions dd {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin: 0;
}
.update-actions {
  width: 100%;
  margin-top: 0;
}
#cli-update-managed,
#cli-update-message,
#cli-update-requirement {
  color: var(--muted-text);
  font-size: 13px;
  line-height: 1.5;
}
#cli-approval-help {
  margin-bottom: 13px;
}
#cli-approval-help > p:last-child {
  margin-bottom: 0;
}
#cli-update-dialog[data-state='error'] #cli-update-message {
  color: var(--focus);
}
.update-actions:has(#cli-install[hidden]) {
  grid-template-columns: 1fr;
}
.update-actions:has(#cli-install[hidden]) #cli-check {
  border-radius: inherit;
}
.update-actions button {
  white-space: normal;
  padding-inline: 8px;
}

#app-version {
  padding: 4px;
  background: transparent;
  color: var(--accent);
  font-weight: inherit;
}
#app-version:hover {
  color: var(--text);
}
#backend-dialog > p {
  font-size: inherit;
  line-height: 1.5;
  color: var(--muted-text);
}
#backend-dialog dd {
  line-height: 1.5;
}
#backend-technical {
  margin-block: 12px;
  font-size: inherit;
}
#backend-technical summary {
  cursor: pointer;
  color: var(--muted-text);
}
.release-identifiers > div {
  padding-block: 8px;
}
.release-identifiers dt {
  display: flex;
  align-items: center;
  gap: var(--component-gap);
  color: var(--muted-text);
}
.release-identifiers dd {
  margin: 4px 0 0;
}
#backend-restart {
  width: 100%;
  margin-top: 0;
}

#backend-dialog .update-versions dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.version-copy {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: var(--control-height);
  padding: 4px;
  background: transparent;
  color: var(--muted-text);
}
.version-copy:hover:not(:disabled),
.version-copy:focus-visible {
  background: var(--control-hover);
  color: var(--text);
}
.version-copy svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#backend-dialog {
  width: 540px;
  font-size: 14px;
  line-height: 1.5;
}
#backend-dialog
  :is(.update-versions dt, .update-versions dd, .notification-title, .notification-preview) {
  font-size: inherit;
}
#backend-dialog .update-versions.update-available > div:last-child {
  background: var(--version-update-background);
  color: var(--version-update-text);
  border-radius: 0 6px 6px 0;
}
#backend-dialog .update-versions.update-available > div:last-child :is(dt, .version-copy) {
  color: inherit;
}
@media (max-width: 520px) {
  #backend-dialog .update-versions {
    grid-template-columns: 1fr;
  }
  #backend-dialog .update-versions > div + div {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  #backend-dialog .update-versions.update-available > div:last-child {
    border-radius: 0 0 6px 6px;
  }
}

#cli-update-dialog .update-versions > div {
  display: flex;
  flex-direction: column;
}
#cli-update-dialog .update-versions dd {
  margin-top: auto;
}
#cli-auto-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--component-gap);
}
#cli-auto-settings button {
  min-height: var(--control-height);
  white-space: normal;
}
#cli-auto-status,
#cli-global-updates p,
#cli-local-automation > p {
  color: var(--muted-text);
  font-size: 13px;
  line-height: 1.5;
}
#cli-global-updates,
#cli-local-automation {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#cli-global-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
#cli-global-start {
  width: 100%;
}
.cli-global-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--component-gap);
  margin-top: var(--component-gap);
}
.cli-global-actions button {
  flex: 1;
  height: auto;
  min-height: var(--control-height);
  padding-block: 8px;
  white-space: normal;
}
#cli-global-hosts {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: 13px;
}
#cli-global-hosts li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
#cli-global-hosts li > span {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cli-global-hosts .update-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.update-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-background);
  color: var(--muted-text);
}
.update-status-icon[data-kind='check'],
.update-status-icon[data-kind='download'] {
  color: var(--accent);
}
.update-status-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.update-status-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#cli-update-dialog button:disabled {
  background: var(--input-background);
  color: var(--muted-text);
  border: 1px solid var(--border);
  cursor: not-allowed;
}
#cli-update-dialog button[aria-pressed='true']:not(:disabled) {
  background: var(--control-active-surface);
  box-shadow: inset 0 0 0 1px var(--accent);
}

#cli-global-hosts li[data-central='true'] {
  background: var(--card-background);
  font-weight: 600;
}

#cli-central-progress {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-background);
  margin-bottom: 16px;
}
.central-progress-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
#cli-central-title {
  margin: 0;
  font-size: 16px;
}
#cli-central-count {
  color: var(--accent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#cli-central-progress progress {
  display: block;
  width: 100%;
  height: 8px;
  accent-color: var(--accent);
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}
#cli-central-progress progress::-webkit-progress-bar {
  background: var(--border);
}
#cli-central-progress progress::-webkit-progress-value {
  background: var(--accent);
}
#cli-central-progress progress::-moz-progress-bar {
  background: var(--accent);
}
#cli-central-steps {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}
#cli-central-steps li {
  display: flex;
  gap: 10px;
  padding-block: 7px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
#cli-central-steps li > span {
  color: var(--muted-text);
}
#cli-central-steps li[data-complete='true'] > span {
  color: var(--accent);
}
#cli-central-steps div {
  min-width: 0;
}
#cli-central-steps strong,
#cli-central-steps div span {
  display: block;
  overflow-wrap: anywhere;
}
#cli-central-steps strong {
  font-weight: 500;
}
#cli-central-steps div span {
  margin-top: 3px;
  color: var(--muted-text);
  line-height: 1.4;
}
#cli-central-update {
  width: 100%;
  height: auto;
  min-height: var(--control-height);
  white-space: normal;
  padding-block: 8px;
}

.fleet-dialog {
  width: min(1100px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  background: var(--card-background);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
}
.fleet-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.fleet-toolbar h2,
.fleet-toolbar h3 {
  flex: 1;
  margin: 0;
}
.fleet-toolbar select {
  max-width: 100%;
}
.fleet-hosts {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.fleet-host {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
}
.fleet-muted {
  opacity: 0.7;
  overflow-wrap: anywhere;
}
.fleet-table {
  overflow-x: auto;
  margin-block: 12px;
}
.fleet-table table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
}
.fleet-table th,
.fleet-table td {
  padding: 7px;
  text-align: left;
  white-space: nowrap;
  max-width: 220px;
}
.fleet-host details > summary {
  cursor: pointer;
}
.fleet-host dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
}
.fleet-host dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.fleet-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fleet-controls[hidden] {
  display: none;
}
.fleet-actions {
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 0;
}
.fleet-controls button {
  padding: 9px 12px;
}
.fleet-release-controls {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
}
.fleet-release-controls select {
  flex: 1;
  min-width: 0;
  width: 0;
  border: 1px solid var(--border);
  border-radius: 7px 0 0 7px;
  padding: 8px;
  background: var(--card-background);
  color: var(--text);
  font: inherit;
}
.fleet-release-controls button {
  border-radius: 0 7px 7px 0;
  white-space: nowrap;
}
.fleet-dialog::backdrop {
  background: #0006;
}

.propagation-dialog {
  width: min(58rem, calc(100vw - 2rem));
  background: var(--card-background);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.propagation-dialog::backdrop {
  background: var(--page-background);
  opacity: 0.8;
}
.propagation-dialog select {
  background: var(--input-background);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font: inherit;
  max-width: 100%;
}
.propagation-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.propagation-choices > label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.propagation-source {
  margin: 0;
}
.propagation-choice {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.propagation-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.propagation-check input {
  width: auto;
  min-height: auto;
}
.propagation-choices select {
  max-width: 100%;
  min-width: 0;
}
.propagation-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.propagation-result {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow-wrap: anywhere;
}
.propagation-result small {
  color: var(--muted-text);
}
@media (max-width: 600px) {
  .propagation-choice {
    align-items: stretch;
    flex-direction: column;
  }
}