:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.studio-shell {
  background: #121212;
}

.studio-mobile-bar {
  background: #171717;
}

.studio-sidebar {
  background: #1b1b1b;
}

.studio-surface {
  background: #1f1f1f;
}

.studio-card {
  border: 1px solid #242424;
  background: #1f1f1f;
}

.studio-action-button {
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #141414;
  color: #f4f4f5;
}

.studio-action-button:hover,
.studio-action-button:focus-visible {
  border-color: rgb(255 255 255 / 0.2);
  background: #242424;
  color: #f4f4f5;
}

.studio-hover:hover {
  background: #242424;
  color: inherit;
}

.studio-hover-soft:hover {
  background: #1f1f1f;
  color: inherit;
}

#app-sidebar[data-collapsed="true"] .sidebar-expanded-only {
  display: none;
}

#app-sidebar:not([data-collapsed="true"]) .sidebar-collapsed-only {
  display: none;
}

#app-sidebar[data-collapsed="true"] .sidebar-collapsed-only {
  display: block;
}

#app-sidebar[data-collapsed="true"] .menu button {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#sidebar-collapse-toggle {
  left: calc(18rem - 0.75rem);
}

#sidebar-collapse-toggle[data-collapsed="true"] {
  left: calc(4rem - 0.75rem);
}

#sidebar-collapse-toggle[data-collapsed="true"] svg {
  transform: rotate(180deg);
}

/* Stage detail modal: wide surface + full-width BPMN board.
   Kept in CSS (not Tailwind utilities) because this layout is critical and
   must not depend on runtime JIT class generation. */
.stage-detail-modal {
  width: 95vw;
  max-width: 95vw;
}

.stage-detail-board {
  display: block;
  width: 100%;
  height: 560px;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #f4f4f5;
}

.stage-detail-board [data-stage-detail-bpmn-viewer] {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}