/* Visual page editor (GrapesJS) inside the lead page workspace */

.workspace-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-self: end;
  grid-column: 3;
}

.workspace-editor-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: none;
  padding: 0;
  color: var(--dark-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.workspace-editor-btn:hover:not(:disabled) {
  color: var(--dark-accent);
}

.workspace-editor-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.workspace-editor-btn .material-icons {
  font-size: 1rem;
}

.workspace-editor-btn-primary {
  background: var(--dark-accent);
  color: #fff;
  border-radius: 7px;
  padding: 0.25rem 0.7rem;
}

.workspace-editor-btn-primary:hover:not(:disabled) {
  color: #fff;
  background: color-mix(in srgb, var(--dark-accent), #000 15%);
}

.workspace-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.workspace-editor {
  display: none;
}

.workspace-preview-card.is-editing .workspace-preview-body,
.workspace-preview-card.is-editing .workspace-preview-open {
  display: none;
}

.workspace-preview-card.is-editing .workspace-editor {
  display: flex;
  flex: 1;
  min-height: 0;
}

.workspace-editor-canvas {
  flex: 1;
  min-width: 0;
}

/* Map the GrapesJS theme classes onto the app palette */
.workspace-editor .gjs-editor {
  font-family: inherit;
}

.workspace-editor .gjs-one-bg {
  background-color: var(--dark-surface);
}

.workspace-editor .gjs-two-color {
  color: var(--dark-text-body);
}

.workspace-editor .gjs-three-bg {
  background-color: var(--dark-accent);
  color: #fff;
}

.workspace-editor .gjs-four-color {
  color: var(--dark-accent);
}

.workspace-editor .gjs-four-color-h:hover {
  color: var(--dark-accent);
}

/* No GrapesJS panels are rendered, so the canvas takes the full card */
.workspace-editor .gjs-cv-canvas {
  background-color: var(--dark-bg);
  top: 0;
  width: 100%;
  height: 100%;
}

.workspace-editor .gjs-toolbar-item .material-icons {
  display: block;
  font-size: 15px;
}