/* Internal workspace chrome (not a standalone gallery Hyperpart — no HYPERPART
 * marker, matching the other migrated chrome components detail/fragments/etc.). */
/* Moved from Dazzle dashboard.css (HMC-007c) — the workspace composition
 * shell: outer padding + heading row + primary actions, context selector,
 * and the edit toolbar (Reset/Save with the 5 saveState values). Byte-faithful,
 * already HM-tokenised; the dz-spin keyframe it uses lives in HM base. */

/* ─────────────────────────── outer shell ────────────────────────
 * Padded root for the workspace; no max-width constraint — caller
 * provides the layout container. */

.dz-workspace {
  padding: var(--space-md);
}

.dz-workspace-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
  /* Heading wraps when title + actions exceed the row — actions
   * fall under the title rather than bleeding past <main>'s right
   * edge (#985). */
  flex-wrap: wrap;
}

.dz-workspace-title {
  /* #983 — canonical app page-title scale. Was hard-coded to
   * `--text-lg`; promoting to the named token unifies workspace
   * titles with list-page titles + leaves the visual size
   * unchanged (token resolves to --text-lg). */
  font-size: var(--dz-heading-app-page-title);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
  margin: 0;
}

.dz-workspace-primary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* #985: workspaces with many entities surface a long row of
   * "New <Entity>" buttons. Without flex-wrap the row would bleed
   * past <main>'s right edge (5 × 200px buttons + gaps overflows a
   * 1024px content column). flex-shrink:0 is intentionally dropped:
   * shrinking would squeeze button labels, wrapping is cleaner.
   * justify-content:flex-end keeps wrapped rows right-aligned to
   * match the heading's space-between layout. */
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Workspace-level primary action — same shape as .dz-button-primary
 * but slightly taller (h-2 instead of h-1.75) to match the heading. */
.dz-workspace-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 2rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--colour-brand);
  color: var(--colour-brand-contrast);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.dz-workspace-action:hover {
  opacity: 0.9;
}

/* Suppress the default <summary> disclosure triangle cross-browser. */
/* ─────────────────────────── context selector ───────────────────
 * Workspace-level context filter. Just a label + select. */

.dz-workspace-context {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

.dz-workspace-context-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text);
}

.dz-workspace-context-select {
  height: 2rem;
  padding-inline: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--colour-text);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
}

.dz-workspace-context-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--colour-brand);
  border-color: var(--colour-brand);
}

/* ─────────────────────────── edit toolbar ───────────────────────
 * Right-aligned row above the grid: Reset + Save buttons. Save
 * reflects saveState (clean/dirty/saving/saved/error) via a
 * data-dz-save-state attribute the template binds with x-bind. */

.dz-workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

.dz-workspace-toolbar-spacer {
  flex: 1 1 0;
}

.dz-workspace-reset {
  height: 2rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.dz-workspace-reset:hover {
  background: var(--colour-bg);
  color: var(--colour-text);
}

.dz-workspace-save {
  height: 2rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

/* Save-state span visibility (Tier F4e: replaces the Alpine
 * x-cloak/x-show pair) — the button's data-dz-save-state selects
 * exactly one label span. */
.dz-workspace-save [data-dz-when] {
  display: none;
}

.dz-workspace-save[data-dz-save-state="clean"] [data-dz-when="clean"],
.dz-workspace-save[data-dz-save-state="dirty"] [data-dz-when="dirty"],
.dz-workspace-save[data-dz-save-state="saving"] [data-dz-when="saving"],
.dz-workspace-save[data-dz-save-state="saved"] [data-dz-when="saved"],
.dz-workspace-save[data-dz-save-state="error"] [data-dz-when="error"] {
  display: inline-flex;
}

.dz-workspace-save[data-dz-save-state="clean"] {
  color: var(--colour-text-muted);
  cursor: default;
}

.dz-workspace-save[data-dz-save-state="dirty"] {
  background: var(--colour-brand);
  color: var(--colour-brand-contrast);
}

.dz-workspace-save[data-dz-save-state="saving"] {
  background: var(--colour-brand);
  color: var(--colour-brand-contrast);
  opacity: 0.7;
}

.dz-workspace-save[data-dz-save-state="saved"] {
  background: var(--success-600); /* fixed step — white text on fill */
  color: white;
}

.dz-workspace-save[data-dz-save-state="error"] {
  border-color: var(--colour-danger);
  color: var(--colour-danger);
}

.dz-workspace-save-busy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.dz-workspace-save-busy-icon {
  width: 0.75rem;
  height: 0.75rem;
  animation: dz-spin 1s linear infinite;
}