@import './adminWorkbenchTokens.css';

.admin-workbench {
  --el-color-primary: var(--workbench-primary);
  --el-color-primary-light-3: var(--workbench-primary-hover);
  --el-color-primary-light-5: var(--workbench-primary-disabled);
  --el-color-primary-light-7: var(--workbench-accent-border);
  --el-color-primary-light-8: var(--workbench-accent-border);
  --el-color-primary-light-9: var(--workbench-accent-soft);
  --el-color-primary-dark-2: var(--workbench-primary-active);
}

/* Keep business grids in the page; these primitives only provide appearance. */
.admin-workbench.admin-page {
  min-width: 0;
  padding: var(--workbench-page-padding);
  border: 0;
  border-radius: 0;
  background: var(--workbench-surface);
  color: var(--workbench-text);
  box-shadow: none;
}

.admin-workbench.admin-page.is-embedded {
  padding: 0;
}

/* Override AdminPage's scoped normal spacing only for this explicit opt-in. */
.admin-workbench.admin-page.admin-density.is-spacing-normal {
  gap: var(--workbench-page-space);
}

.admin-workbench .workbench-heading {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.admin-workbench .workbench-title {
  margin: 0;
  color: var(--workbench-text);
  font-size: var(--workbench-title-size);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-meta {
  display: inline-flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--workbench-muted);
  font-size: var(--workbench-note-size);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-meta > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--workbench-accent);
}

.admin-workbench .workbench-section {
  display: grid;
  min-width: 0;
  gap: var(--workbench-section-gap);
}

.admin-workbench .workbench-section-heading {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-workbench .workbench-section-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--workbench-text);
  font-size: var(--workbench-section-title-size);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-section-title::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--workbench-accent);
  content: '';
}

.admin-workbench .workbench-badge {
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--workbench-surface-soft);
  color: var(--workbench-muted);
  font-size: var(--workbench-note-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-badge.is-toned {
  border: 1px solid var(--workbench-accent-border);
  background: var(--workbench-accent-soft);
  color: var(--workbench-accent);
}

.admin-workbench .workbench-metric,
.admin-workbench .workbench-panel {
  min-width: 0;
  padding: var(--workbench-card-space);
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: var(--workbench-surface);
  box-shadow: var(--workbench-shadow);
}

.admin-workbench .workbench-metric {
  min-height: var(--workbench-metric-min-height);
  box-sizing: border-box;
  background: linear-gradient(145deg, var(--workbench-surface) 58%, var(--workbench-surface-tint));
}

.admin-workbench .workbench-panel.is-flush {
  padding: 0;
}

.admin-workbench .workbench-panel.is-compact {
  padding: var(--workbench-compact-card-space);
}

.admin-workbench .workbench-metric.is-compact {
  min-height: 0;
  padding: var(--workbench-compact-card-space);
}

.admin-workbench .workbench-metric.is-compact .workbench-metric-heading {
  gap: 8px;
}

.admin-workbench .workbench-metric.is-compact .workbench-metric-label {
  font-size: var(--workbench-note-size);
}

.admin-workbench .workbench-metric.is-compact .workbench-metric-value {
  margin: 10px 0 6px;
}

.admin-workbench .workbench-metric.is-compact .workbench-metric-value > strong {
  font-size: var(--workbench-compact-number-size);
}

.admin-workbench .workbench-icon.is-compact {
  width: 32px;
  height: 32px;
  border-radius: var(--workbench-tab-radius);
}

.admin-workbench .workbench-icon.is-compact > svg {
  width: 18px;
  height: 18px;
}

.admin-workbench .workbench-metric-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.admin-workbench .workbench-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--workbench-icon-radius);
  background: var(--workbench-accent-soft);
  color: var(--workbench-accent);
}

.admin-workbench .workbench-icon > svg {
  width: 24px;
  height: 24px;
}

.admin-workbench .workbench-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--workbench-icon-radius);
  background: var(--workbench-primary);
  color: var(--workbench-surface);
}

.admin-workbench .workbench-metric-label {
  min-width: 0;
  margin: 0;
  color: var(--workbench-text);
  font-size: var(--workbench-label-size);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-metric-value {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin: 20px 0 12px;
}

.admin-workbench .workbench-metric-value > strong {
  min-width: 0;
  color: var(--workbench-number);
  font-size: var(--workbench-number-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-metric-value > span {
  color: var(--workbench-muted);
  font-size: var(--workbench-note-size);
  line-height: 1.5;
}

.admin-workbench .workbench-note,
.admin-workbench .workbench-status {
  display: block;
  margin: 4px 0;
  color: var(--workbench-muted);
  font-size: var(--workbench-note-size);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-panel.workbench-tone {
  border-color: var(--workbench-accent-border);
}

.admin-workbench .workbench-chart {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
}

.admin-workbench .workbench-chart-heading {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
}

.admin-workbench .workbench-chart-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--workbench-text);
  font-size: var(--workbench-label-size);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-chart-title::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--workbench-accent);
  content: '';
}

.admin-workbench .workbench-chart-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.admin-workbench .workbench-chart-actions .el-button {
  --el-button-text-color: var(--workbench-primary);
  --el-button-hover-text-color: var(--workbench-primary-active);
  --el-button-disabled-text-color: var(--workbench-primary-disabled);
  font-size: var(--workbench-note-size);
}

.admin-workbench .workbench-chart-actions .el-button + .el-button {
  margin-left: 0;
}

.admin-workbench .workbench-chart-canvas {
  min-width: 0;
  flex: 0 0 auto;
}

.admin-workbench .workbench-chart-empty {
  display: flex;
  min-height: 240px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--workbench-card-space);
  border-radius: var(--workbench-icon-radius);
  background: var(--workbench-surface-soft);
  color: var(--workbench-muted);
  text-align: center;
}

.admin-workbench .workbench-chart-empty.is-compact {
  min-height: 0;
  padding: var(--workbench-compact-card-space);
}

.admin-workbench .workbench-chart-empty-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-icon-radius);
  background: var(--workbench-surface);
  color: var(--workbench-muted);
}

.admin-workbench .workbench-chart-empty p {
  max-width: 28em;
  margin: 0;
  color: var(--workbench-muted);
  font-size: var(--workbench-note-size);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* DataTable retains ownership of toolbar size, controls and query layout. */
.admin-workbench .query-toolbar.workbench-query {
  border-color: var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: var(--workbench-surface);
  box-shadow: var(--workbench-shadow);
}

/* Integrated filters share the table surface; never nest another query card. */
.admin-workbench .data-table--integrated > .data-table__filters .query-toolbar.workbench-query {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-workbench .workbench-toolbar,
.admin-workbench .workbench-table {
  min-width: 0;
}

/* DataTable forwards attrs to its inner table, so opt in through this wrapper. */
.admin-workbench .workbench-toolbar > .data-table,
.admin-workbench .workbench-table > .data-table {
  --list-card-accent: var(--workbench-primary);
  --list-card-border: var(--workbench-border);
  --list-card-muted-bg: var(--workbench-surface-soft);
  --list-card-radius: var(--workbench-radius);
  min-width: 0;
  border-color: var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: var(--workbench-surface);
  box-shadow: var(--workbench-shadow);
}

/* Integrated DataTable already owns its border; default tables need a frame. */
.admin-workbench .workbench-toolbar > .data-table:not(.data-table--integrated),
.admin-workbench .workbench-table > .data-table:not(.data-table--integrated) {
  border: 1px solid var(--workbench-border);
}

.admin-workbench .workbench-toolbar > .data-table > .data-table__toolbar,
.admin-workbench .workbench-table > .data-table > .data-table__toolbar {
  border-color: var(--workbench-border);
  background: var(--workbench-surface);
}

/* The main page is one continuous surface; only inner cards retain their frame. */
.admin-workbench.workbench-panel.is-page-surface,
.admin-workbench .workbench-panel.is-page-surface,
.admin-workbench .workbench-table.is-page-surface > .data-table,
.admin-workbench .workbench-toolbar.is-page-surface > .data-table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Page/detail wrappers use their parent's inset; independent cards keep theirs. */
@media screen {
  .admin-workbench.workbench-panel.is-page-surface:not(.admin-page),
  .admin-workbench .workbench-panel.is-page-surface:not(.admin-page) {
    padding: 0;
  }
}

/* Main lists share one compact header. Nested tables and dialog density stay local. */
@media (min-width: 721px) {
  .admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar,
  .admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__toolbar {
    --el-component-size: var(--admin-control-height, 32px);
    min-height: var(--workbench-list-toolbar-height);
    box-sizing: border-box;
    padding: var(--workbench-list-toolbar-padding) var(--workbench-list-inset);
    gap: 8px 12px;
    flex-wrap: wrap;
  }

  .admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-start {
    flex: 1 1 280px;
  }

  .admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions,
  .admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Action wrappers and dropdown/button groups are bounded before floating roots. */
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-start > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-start > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-start > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-start > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions > :is(.data-table__business-actions, .data-table__utility-actions) > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions > :is(.data-table__business-actions, .data-table__utility-actions) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions > :is(.data-table__business-actions, .data-table__utility-actions) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button,
  .admin-workbench :is(.workbench-table, .workbench-toolbar).is-page-surface > .data-table > .data-table__toolbar > .data-table__toolbar-actions > :is(.data-table__business-actions, .data-table__utility-actions) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button {
    min-height: var(--admin-control-height, 32px);
    height: var(--admin-control-height, 32px);
  }

  .admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__filters .query-toolbar,
  .admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__filters .query-toolbar {
    --el-component-size: var(--admin-control-height, 32px);
    padding: var(--workbench-list-query-padding) var(--workbench-list-inset);
    gap: 8px 12px;
  }

  .admin-workbench .workbench-table.is-page-surface > .data-table > .data-table__filters .query-toolbar__filters,
  .admin-workbench .workbench-toolbar.is-page-surface > .data-table > .data-table__filters .query-toolbar__filters {
    gap: 8px 12px;
  }

  /* The toolbar supplies the inset; moved tabs must not add a second frame. */
  .admin-workbench .data-table__toolbar-start .workbench-list-tabs {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-status-tabs > button,
  .admin-workbench .data-table__toolbar-start .workbench-list-tabs.workbench-tabs > button,
  .admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item {
    min-height: var(--admin-control-height, 32px);
    height: var(--admin-control-height, 32px);
  }

  .admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header,
  .admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav-wrap {
    margin: 0;
  }
}

.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-status-tabs > button:is(:hover, .is-active),
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item:is(:hover, .is-active) {
  color: var(--workbench-primary);
}

.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-status-tabs > button.is-active::after,
.admin-workbench .data-table__toolbar-start .workbench-list-tabs.density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item.is-active::after {
  background: var(--workbench-primary);
}

.admin-workbench .workbench-table > .data-table > .el-table,
.admin-workbench .workbench-table > .el-table {
  --el-table-border-color: var(--workbench-border);
  --el-table-header-bg-color: var(--workbench-surface-soft);
  --el-table-header-text-color: var(--workbench-muted);
  --el-table-row-hover-bg-color: var(--workbench-accent-soft);
  --el-table-current-row-bg-color: var(--workbench-accent-soft);
  --el-table-text-color: var(--workbench-text);
  color: var(--workbench-text);
}

.admin-workbench .workbench-table .el-table th.el-table__cell {
  color: var(--workbench-muted);
}

.admin-workbench .el-button.density-action:not([data-tone]),
.admin-workbench .el-button.density-action[data-tone='primary'] {
  --action-color: var(--workbench-primary);
  --action-border: var(--workbench-accent-border);
  --action-hover-bg: var(--workbench-accent-soft);
}

.admin-workbench .workbench-table .data-table .data-table__page-button[aria-current='page']:not(:disabled),
.admin-workbench .workbench-table > .data-table > .data-table__toolbar > .data-table__toolbar-actions > .data-table__business-actions > .el-button--primary:not(:disabled),
.admin-workbench .workbench-table > .data-table > .data-table__toolbar > .data-table__toolbar-actions > .data-table__business-actions > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button--primary:not(:disabled),
.admin-workbench .workbench-table > .data-table > .data-table__toolbar > .data-table__toolbar-actions > .data-table__business-actions > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button--primary:not(:disabled),
.admin-workbench .workbench-table > .data-table > .data-table__toolbar > .data-table__toolbar-actions > .data-table__business-actions > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button--primary:not(:disabled) {
  box-shadow: var(--workbench-shadow);
}

/* Keep selection, focus and disabled states consistent for existing native tabs. */
.admin-workbench .workbench-tabs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.admin-workbench .workbench-tabs > button {
  display: inline-flex;
  min-height: var(--admin-tab-height);
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--workbench-tab-radius);
  background: transparent;
  color: var(--workbench-muted);
  font: inherit;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}

.admin-workbench .workbench-tabs > button:hover:not(:disabled):not([aria-pressed='true']):not(.is-active) {
  background: var(--workbench-surface-soft);
  color: var(--workbench-primary);
}

.admin-workbench .workbench-tabs > button[aria-pressed='true'],
.admin-workbench .workbench-tabs > button.is-active {
  border-color: var(--workbench-accent-border);
  background: var(--workbench-accent-soft);
  color: var(--workbench-primary);
  font-weight: 600;
}

.admin-workbench .workbench-tabs > button:focus-visible,
.admin-workbench .workbench-input:focus-visible {
  outline: 2px solid var(--workbench-primary);
  outline-offset: 2px;
}

.admin-workbench .workbench-tabs > button:disabled {
  color: var(--workbench-primary-disabled);
  cursor: not-allowed;
}

.admin-workbench .workbench-input {
  min-height: var(--admin-control-height);
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-tab-radius);
  background: var(--workbench-surface);
  color: var(--workbench-text);
  font: inherit;
}

.admin-workbench .workbench-input:disabled {
  background: var(--workbench-surface-soft);
  color: var(--workbench-muted);
  cursor: not-allowed;
}

/* Teleported dialogs opt in on their own root; retain the density frame geometry. */
.admin-workbench.is-dialog.el-dialog:not(.is-fullscreen) {
  border-radius: var(--workbench-radius);
}

.admin-workbench.is-dialog.el-dialog > .el-dialog__header,
.admin-workbench.is-dialog.el-dialog > .el-dialog__footer {
  border-color: var(--workbench-border);
  background: var(--workbench-surface);
}

.admin-workbench.is-dialog.el-dialog > .el-dialog__header > .el-dialog__title {
  color: var(--workbench-text);
}

/* A teleported drawer carries its own opt-in. Density owns its frame geometry. */
.admin-workbench.is-drawer.el-drawer {
  background: var(--workbench-surface);
  color: var(--workbench-text);
}

.admin-workbench.is-drawer.el-drawer > .el-drawer__header,
.admin-workbench.is-drawer.el-drawer > .el-drawer__footer {
  border-color: var(--workbench-border);
  background: var(--workbench-surface);
}

.admin-workbench.is-drawer.el-drawer > .el-drawer__header > .el-drawer__title {
  color: var(--workbench-text);
}

/* Existing density classes retain layout and typography; adapt neutral paint only. */
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-layout,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-header,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields > div,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-dialog-section:not([data-tone]) {
  background: var(--workbench-surface);
}

.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-layout > .detail-page-layout__header,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields > div,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-descriptions .el-descriptions__cell,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .form-section.density-form-section,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-dialog-section:not([data-tone]) {
  border-color: var(--workbench-border);
}

.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-title,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview dd,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields dd,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-descriptions .el-descriptions__content.el-descriptions__cell,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form-section .form-section__heading h2 {
  color: var(--workbench-text);
}

.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview dt,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-detail-overview small,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form-section .form-section__heading p,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form .el-form-item__label {
  color: var(--workbench-muted);
}

.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-fields dt,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-descriptions .el-descriptions__label.el-descriptions__cell {
  background: var(--workbench-surface-soft);
  color: var(--workbench-muted);
}

/* Neutral form tokens leave required marks, validation, disabled and semantic colors intact. */
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer).density-form,
.admin-workbench:is(.admin-density, .admin-density-dialog, .admin-density-drawer) .density-form {
  --el-border-color: var(--workbench-border);
  --el-fill-color-blank: var(--workbench-surface);
  --el-text-color-regular: var(--workbench-text);
}

.admin-workbench .workbench-evidence table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-font-body);
}

.admin-workbench .workbench-evidence th,
.admin-workbench .workbench-evidence td {
  border: 1px solid var(--workbench-border);
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-evidence table:not(.density-table) :is(th, td) {
  padding: var(--admin-space-1) var(--admin-space-3);
  line-height: 1.6;
}

.admin-workbench .workbench-evidence th {
  background: var(--workbench-surface-soft);
  color: var(--workbench-muted);
  font-weight: 600;
}

.admin-workbench .workbench-notice {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--workbench-accent-border);
  border-radius: var(--workbench-icon-radius);
  background: var(--workbench-accent-soft);
  color: var(--workbench-text);
  font-size: var(--workbench-note-size);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* State labels remain the source of meaning; color only reinforces them. */
.admin-workbench .workbench-step {
  min-width: 0;
  padding: var(--workbench-compact-card-space);
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-icon-radius);
  background: var(--workbench-surface-soft);
  color: var(--workbench-muted);
  overflow-wrap: anywhere;
}

.admin-workbench .workbench-step-index {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--workbench-border);
  border-radius: 50%;
  background: var(--workbench-surface);
  color: var(--workbench-muted);
  font-size: var(--workbench-note-size);
  font-variant-numeric: tabular-nums;
}

.admin-workbench .workbench-step[data-state='active'],
.admin-workbench .workbench-step[data-state='done'] {
  border-color: var(--workbench-accent-border);
  background: var(--workbench-accent-soft);
  color: var(--workbench-accent);
}

.admin-workbench .workbench-step[data-state='active'] .workbench-step-index,
.admin-workbench .workbench-step[data-state='done'] .workbench-step-index {
  border-color: var(--workbench-accent);
  background: var(--workbench-accent);
  color: var(--workbench-surface);
}

.admin-workbench .el-button--primary:not(.is-plain):not(.is-link):not(.is-text) {
  --el-button-bg-color: var(--workbench-primary);
  --el-button-border-color: var(--workbench-primary);
  --el-button-hover-bg-color: var(--workbench-primary-hover);
  --el-button-hover-border-color: var(--workbench-primary-hover);
  --el-button-active-bg-color: var(--workbench-primary-active);
  --el-button-active-border-color: var(--workbench-primary-active);
  --el-button-disabled-bg-color: var(--workbench-primary-disabled);
  --el-button-disabled-border-color: var(--workbench-primary-disabled);
}

.admin-workbench .workbench-skeleton {
  display: block;
  min-width: 0;
  height: var(--workbench-metric-min-height);
  border: 1px solid var(--workbench-border);
  border-radius: var(--workbench-radius);
  background: var(--workbench-surface-soft);
  animation: admin-workbench-loading 1.6s ease-in-out infinite alternate;
}

@keyframes admin-workbench-loading {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-workbench .workbench-skeleton {
    animation: none;
  }
}