/* Workflow editor fills the main column. Columns scroll on their
 * own so the properties card can stay pinned beside them. */

.content:has(.workflows-editor-page) {
 overflow: hidden;
}

.page.workflows-editor-page {
 --workflows-gap: 16px;
 --workflows-inspector-width: 340px;
 max-width: none;
 width: 100%;
 flex: 1 1 auto;
 flex-shrink: 1;
 min-height: 0;
 height: 100%;
 overflow: hidden;
 padding-left: 8px;
 padding-right: 8px;
 padding-bottom: 12px;
 gap: 12px;
}

.workflows-page {
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
}

.workflows-editor {
 --workflows-gap: 16px;
 --workflows-inspector-width: 340px;
 position: relative;
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 min-height: 0;
}

.workflows-row {
 display: flex;
 flex: 1;
 align-items: stretch;
 gap: var(--workflows-gap);
 min-width: 0;
 min-height: 0;
}

.workflows-editor[data-pin='right']
 .workflows-row {
 flex-direction: row-reverse;
}

/* Sticky keeps the properties card in place if an ancestor
 * scrolls. The card is not inside the column scroller, so
 * horizontal scrolling never moves it and its width stays
 * reserved. The row gap is the space between the card and
 * the first column when the canvas is scrolled to the start. */
.workflows-inspector {
 position: sticky;
 top: 0;
 z-index: 2;
 flex: 0 0
  var(--workflows-inspector-width);
 width: var(
  --workflows-inspector-width
 );
 align-self: stretch;
 max-height: 100%;
 overflow-x: hidden;
 overflow-y: auto;
 padding: 0 0 16px;
 gap: 12px;
 background: var(--card);
}

.workflows-editor[data-pin='left']
 .workflows-inspector {
 left: 0;
}

.workflows-editor[data-pin='right']
 .workflows-inspector {
 right: 0;
}

.workflows-inspector-bar {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 position: sticky;
 top: 0;
 z-index: 1;
 margin: 0;
 padding: 12px 12px 8px 16px;
 background: var(--card);
}

.workflows-inspector
 > :not(.workflows-inspector-bar) {
 margin-left: 16px;
 margin-right: 16px;
}

.workflows-inspector-bar h2 {
 margin: 0;
 font-size: var(--text-lg);
}

.workflows-pin {
 flex-shrink: 0;
 margin-left: auto;
}

.workflows-canvas-pane {
 position: relative;
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 min-height: 0;
}

.workflows-canvas {
 display: flex;
 flex: 1;
 align-items: flex-start;
 gap: 12px;
 min-width: 0;
 min-height: 0;
 overflow: auto;
 overscroll-behavior: contain;
 padding: 0 8px 12px 0;
 scroll-padding-inline: 8px;
 scroll-padding-bottom: 12px;
 -webkit-overflow-scrolling: touch;
}

.workflows-canvas-sizer {
 flex: 0 0 auto;
 align-self: flex-start;
 min-width: 0;
}

.workflows-canvas-scale {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 width: max-content;
 padding: 4px;
 transform-origin: top left;
}

.workflows-editor[data-zoom='0.5']
 .workflows-canvas-scale {
 transform: scale(0.5);
}

.workflows-editor[data-zoom='0.5']
 .workflows-canvas-sizer {
 overflow: hidden;
}

.workflows-column {
 width: 280px;
 flex: 0 0 280px;
 padding: 16px;
 gap: 10px;
}

.workflows-column h2 {
 font-size: var(--text-lg);
}

.workflows-card {
 white-space: normal;
 height: auto;
 min-height: 36px;
 padding: 8px 12px;
 justify-content: flex-start;
 text-align: left;
 width: 100%;
}

.workflows-card .btn-content {
 white-space: normal;
 text-align: left;
 line-height: 1.3;
}

.workflows-card.is-selected {
 outline: none;
 box-shadow: inset 0 0 0 2px var(--ring);
}

.workflows-add-column {
 align-self: flex-start;
 flex: 0 0 auto;
}

.workflows-zoom {
 position: relative;
 z-index: 4;
 align-self: flex-end;
 flex: none;
 margin: 0 12px 8px;
 display: inline-flex;
 align-items: center;
 gap: 2px;
 padding: 4px;
 border: 1px solid var(--border);
 border-radius: 999px;
 background: var(--card);
 box-shadow: 0 8px 20px
  rgba(16, 23, 41, 0.12);
}

.workflows-zoom-divider {
 color: var(--muted-foreground);
 font-size: 13px;
 line-height: 1;
 padding: 0 2px;
 user-select: none;
}

.workflows-editor[data-pin='right']
 .workflows-zoom {
 align-self: flex-start;
 margin-left: 12px;
 margin-right: 12px;
}

.workflows-zoom .btn {
 height: 28px;
 min-width: 44px;
 padding: 0 10px;
 border-radius: 999px;
}

.workflows-zoom
 .btn[aria-pressed='true'] {
 background: var(--primary);
 color: var(--primary-foreground);
}

.workflows-editor-meta {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 12px;
 flex: 0 1 auto;
 min-height: 0;
 width: 100%;
 max-width: 40rem;
 max-height: 36%;
 overflow: auto;
 padding: 4px 8px 8px;
}

.workflows-editor-meta .stack,
.workflows-editor-meta
 .workflows-schedules {
 width: 100%;
 max-width: none;
}

.workflows-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.workflows-schedules {
 max-width: 36rem;
}

.workflows-schedule-list .btn {
 justify-content: flex-start;
 text-align: left;
}

@media (max-width: 720px) {
 .page.workflows-editor-page {
  padding-left: max(
   8px,
   env(safe-area-inset-left)
  );
  padding-right: max(
   8px,
   env(safe-area-inset-right)
  );
  padding-bottom: max(
   12px,
   env(safe-area-inset-bottom)
  );
 }

 .workflows-row,
 .workflows-editor[data-pin='right']
  .workflows-row {
  flex-direction: column;
  overflow: auto;
 }

 .workflows-editor[data-pin='right']
  .workflows-row {
  flex-direction: column-reverse;
 }

 .workflows-inspector {
  position: static;
  flex: 0 1 auto;
  width: auto;
  max-height: 240px;
  height: auto;
  min-height: 0;
  left: auto;
  right: auto;
 }

 .workflows-canvas-pane {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 220px;
 }

 .workflows-canvas {
  min-height: 168px;
 }

 .workflows-editor-meta {
  max-height: 30%;
 }
}