button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 480px;
  min-block-size: 320px;
  overflow: auto;
  grid-template-rows: max-content 1fr max-content;
}

.section {
  display: contents;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  margin: 0;
}

.main {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xl);
  padding-block: var(--spacing-padding-l);
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-m);
  color: var(--color-text-neutral-default);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
}

.status-dot {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background-color: var(--color-text-neutral-disabled);
  flex-shrink: 0;
}
.status-badge--running .status-dot {
  background-color: var(--color-text-success-default, #22c55e);
}
.status-badge--error .status-dot {
  background-color: var(--color-text-error-default, #ef4444);
}
.status-badge--starting .status-dot, .status-badge--stopping .status-dot {
  background-color: var(--color-text-warning-default, #f59e0b);
}
.status-dot--animated {
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.status-card {
  border: 1px solid var(--color-border-surface-on-elevation-1);
  border-radius: 4px;
  padding: var(--spacing-gap-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-m);
}
.status-card--dimmed {
  opacity: 0.5;
}
.status-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-gap-l);
}
.status-card__row > :first-child {
  min-inline-size: 80px;
  flex-shrink: 0;
}
.status-card__endpoint {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-gap-m);
  flex-wrap: wrap;
}
.status-card__endpoint > .button-icon-only {
  padding: 0;
  block-size: auto;
}

.endpoint-value {
  word-break: break-all;
  color: var(--color-text-neutral-default);
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.error-message {
  color: var(--color-text-error-default, #ef4444);
  padding: var(--spacing-gap-m);
  border: 1px solid var(--color-border-error-default, #ef4444);
  border-radius: 4px;
  background-color: var(--color-surface-error-default, rgba(239, 68, 68, 0.08));
}