admin-web/src/styles/adminWorkbench.css

@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-space);
  background: var(--workbench-surface);
  color: var(--workbench-text);
}

/* 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-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 .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);
}

.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);
}

/* Only title-free list toolbars opt in; keep controls and wrapping intact. */
.admin-workbench .workbench-table.is-compact-toolbar > .data-table > .data-table__toolbar {
  min-height: 52px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.admin-workbench .workbench-table > .data-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 .workbench-table .el-table .density-action:not([data-tone]),
.admin-workbench .workbench-table .el-table .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__business-actions .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__title {
  color: 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;
  }
}