/* Admin is a product surface too: consume the shared light/dark token contract. */
:root {
  color: var(--ds-text);
  background: var(--ds-app-surface-subtle);
  font-family: var(--nb-font-sans);
}

.admin-header {
  border-color: var(--ds-button-border);
  color: var(--ds-muted);
}

.admin-header button,
.dashboard-heading button,
.design-system-source button,
.version-row button,
.catalog-link {
  border-color: var(--ds-button-border);
  background: var(--ds-button-surface);
  color: var(--ds-text);
}

.admin-header button:hover,
.dashboard-heading button:hover,
.design-system-source button:hover,
.version-row button:hover,
.catalog-link:hover {
  border-color: var(--ds-button-border-hover);
  background: var(--ds-button-hover);
}

.admin-card,
.users-card,
.metrics article,
.design-system-card {
  border-color: var(--ds-button-border);
  background: var(--ds-app-surface);
  color: var(--ds-text);
  box-shadow: 0 12px 34px var(--ds-canvas-menu-shadow);
}

.admin-card,
.dashboard-heading p,
.design-system-card header p:not(.eyebrow),
.admin-header .brand + span,
.design-system-actions,
.design-system-source small,
.users-card header span,
.metrics span,
.version-row span,
.status-pill,
th,
.empty {
  color: var(--ds-muted);
}

.eyebrow,
.design-system-source > label,
.design-system-history h3 {
  color: var(--ds-muted) !important;
}

.users-card header,
th,
td,
.version-row {
  border-color: var(--ds-button-border);
}

td,
.version-row strong {
  color: var(--ds-text);
}

.design-system-source input {
  border-color: var(--ds-field-border);
  background: var(--ds-field-surface);
  color: var(--ds-text);
}

.design-system-source input:focus {
  border-color: var(--ds-selection-border);
  box-shadow: 0 0 0 3px var(--ds-selection-surface);
}

.design-system-actions {
  background: var(--ds-app-surface-subtle);
}

.status-pill {
  border-color: var(--ds-button-border);
  background: var(--ds-app-surface-subtle);
}

.status-pill.is-ready {
  border-color: var(--ds-status-success-border);
  background: var(--ds-status-success-surface);
  color: var(--ds-status-success-text);
}

.status-pill.is-warning {
  border-color: var(--ds-admin-warning-border);
  background: var(--ds-admin-warning-surface);
  color: var(--ds-admin-warning-text);
}

.design-system-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.primary-action {
  border-color: var(--ds-accent);
  background: var(--ds-accent);
  color: var(--ds-admin-primary-text);
}

.primary-action:hover {
  background: var(--ds-admin-primary-hover);
}

.version-row,
.version-list .empty {
  border-color: var(--ds-button-border);
}

.admin-theme {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 600;
}

.admin-theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-button-border);
  border-radius: 8px;
  background: var(--ds-app-surface-subtle);
}

.admin-header .admin-theme-options button {
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ds-muted);
  font: 600 11px/1.2 var(--nb-font-sans);
}

.admin-header .admin-theme-options button:hover {
  background: var(--ds-button-hover);
  color: var(--ds-text);
}

.admin-header .admin-theme-options button.is-active {
  background: var(--ds-app-surface);
  box-shadow: 0 1px 3px var(--ds-header-menu-active-shadow);
  color: var(--ds-text);
}

#sign-out {
  margin-left: 0;
}

@media (max-width: 620px) {
  .admin-theme {
    margin-left: auto;
  }

  .admin-header {
    gap: 7px;
  }

  .admin-header .admin-theme > span {
    display: none;
  }

  .admin-header .admin-theme-options button {
    padding-inline: 5px;
  }
}