/* ACC-262 · Shared dashboard material, based on each installation's navigation palette. */
html :is(.workspace-shell, .login-presentation) {
  --workspace-glaze: color-mix(in srgb, var(--nav-selected) 10%, var(--surface));
  --workspace-edge: color-mix(in srgb, var(--nav-selected) 24%, var(--border-subtle));
  --workspace-inset: inset 0 1px 0 color-mix(in srgb, var(--surface) 70%, transparent);
  --workspace-depth: 0 .75rem 1.75rem -.95rem color-mix(in srgb, var(--nav-surface) 28%, transparent);
  --workspace-radius: 1rem;
}

html .workspace-shell .workspace-content .page-header {
  border-inline-start: .25rem solid var(--brand-action);
  padding: .8rem clamp(.75rem, 2vw, 1.4rem);
  border-radius: .75rem;
  background: linear-gradient(110deg, var(--surface), var(--workspace-glaze));
  box-shadow: var(--workspace-inset);
}
html .workspace-shell .workspace-content .page-header h1 {
  color: var(--text-primary);
  line-height: 1.5;
}
html .workspace-shell .workspace-content .page-header p { color: var(--text-secondary); }
html .workspace-shell .workspace-content .page-header .section-symbol {
  background: linear-gradient(145deg, var(--surface), var(--workspace-glaze));
  box-shadow: var(--workspace-inset), var(--workspace-depth);
}

html .workspace-shell .workspace-content :is(.surface, .metric-band):not(.color-preview *) {
  border: 1px solid var(--workspace-edge);
  border-radius: var(--workspace-radius);
  box-shadow: var(--workspace-inset), var(--workspace-depth);
}
html .workspace-shell .workspace-content .section-heading h2 {
  padding-inline-start: .625rem;
  border-inline-start: .1875rem solid var(--workspace-edge);
}
html .workspace-shell .workspace-content .metric-band > div { border-color: var(--workspace-edge); }
html .workspace-shell .workspace-content .empty h3 { color: var(--text-primary); }
html .workspace-shell .workspace-content .empty { color: var(--text-secondary); }

html .workspace-shell .workspace-content :is(.tabs, .table-scroll, .knowledge-table-scroll) {
  scrollbar-color: var(--border-control) transparent;
  scrollbar-width: thin;
}
html .workspace-shell .workspace-content .tabs {
  gap: clamp(.25rem, 1vw, .65rem);
  border-bottom-color: var(--workspace-edge);
}
html .workspace-shell .workspace-content .tabs button {
  border-radius: .625rem .625rem 0 0;
}
html .workspace-shell .workspace-content .tabs button:hover {
  color: var(--text-primary);
  background-color: var(--surface-hover);
}
html .workspace-shell .workspace-content .tabs button[aria-selected=true] {
  color: var(--text-primary);
  background-color: var(--workspace-glaze);
  border-bottom-color: var(--brand-action);
}
html .workspace-shell .workspace-content table:not(.color-preview table) thead {
  background-image: linear-gradient(105deg, transparent, color-mix(in srgb, var(--nav-selected) 8%, transparent));
}
html .workspace-shell .workspace-content table:not(.color-preview table) thead th {
  border-bottom-color: var(--workspace-edge);
  font-weight: 700;
}
html .workspace-shell .workspace-content :is(td, th) { font-variant-numeric: tabular-nums; }

html .workspace-shell :is(.workspace-content, dialog.dialog:not(.mobile-nav-sheet)) :is(.button, .field input:not([type=checkbox],[type=radio],[type=color]), .field select, .field textarea) {
  border-radius: .625rem;
}
html .workspace-shell :is(.workspace-content, dialog.dialog:not(.mobile-nav-sheet)) .button-primary:not(:disabled) {
  box-shadow: var(--workspace-inset), 0 .375rem .875rem -.55rem var(--brand-action);
}
html .workspace-shell :is(.workspace-content, dialog.dialog:not(.mobile-nav-sheet)) .button-secondary:not(:disabled) {
  box-shadow: var(--workspace-inset);
}
html .workspace-shell :is(.workspace-content, dialog.dialog:not(.mobile-nav-sheet)) .field :is(input, select, textarea):focus-visible {
  outline-color: var(--focus-ring);
}
html .workspace-shell dialog.dialog:not(.mobile-nav-sheet) .dialog-header {
  background-color: var(--workspace-glaze);
  border-block-end-color: var(--workspace-edge);
  box-shadow: var(--workspace-inset);
}
html .workspace-shell dialog.dialog:not(.mobile-nav-sheet) .dialog-footer {
  border-block-start-color: var(--workspace-edge);
}
html .workspace-shell dialog.dialog:not(.mobile-nav-sheet)::backdrop {
  background: color-mix(in srgb, var(--nav-surface) 42%, transparent);
}

html .login-presentation .v5-login .auth-feature {
  background-image: linear-gradient(145deg, color-mix(in srgb, var(--nav-selected) 30%, transparent), transparent 65%);
  box-shadow: var(--workspace-inset), var(--workspace-depth);
}
html .login-presentation .v5-login .button-primary:not(:disabled) {
  box-shadow: var(--workspace-inset), 0 .375rem .875rem -.55rem var(--brand-action);
}

/* Older Arka shells keep their navigation behavior; share the visual material. */
html .workspace-shell:not(.cando-shell) .workspace-sidebar {
  background: linear-gradient(145deg, color-mix(in srgb, var(--nav-selected) 48%, transparent), transparent 55%), var(--nav-surface);
  box-shadow: var(--workspace-inset), var(--workspace-depth);
}
html .workspace-shell:not(.cando-shell) .workspace-topbar { border-block-end-color: var(--workspace-edge); }
html .workspace-shell:not(.cando-shell) .workspace-nav button.selected {
  border-radius: .75rem;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nav-text) 22%, transparent);
}

@media (max-width: 47.5rem) {
  html .workspace-shell .workspace-content .page-header { gap: .625rem; }
  html .workspace-shell .workspace-content .page-header .button { min-height: 2.75rem; }
}
@media (forced-colors: active) {
  html .workspace-shell .workspace-content .tabs button[aria-selected=true],
  html .workspace-shell .workspace-content .page-header { border-color: Highlight; }
}