/* Workflow editor fills the main column. Card properties open in
 * a dialog so the rail can use the full width. */

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

.page.workflows-editor-page {
 --workflows-gap: 16px;
 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-head {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 8px 16px;
 flex: 0 0 auto;
 min-width: 0;
}

.workflows-editor-title {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
 flex: 1 1 16rem;
}

.workflows-editor-title h1,
.workflows-name {
 margin: 0;
 font-size: var(--page-title-size);
 line-height: var(
  --page-title-line-height
 );
 font-weight: 600;
}

.workflows-title-sep {
 color: var(--muted-foreground);
 font-size: var(--page-title-size);
 line-height: 1;
}

.workflows-name {
 width: auto;
 flex: 1 1 12rem;
 min-width: 8rem;
 max-width: 28rem;
 padding: 2px 8px;
 border-color: transparent;
 background: transparent;
}

.workflows-name:hover,
.workflows-name:focus {
 border-color: var(--input);
 background: var(--background);
}

.workflows-editor {
 --workflows-gap: 16px;
 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;
}

.dialog.workflows-properties {
 max-width: 28rem;
 overflow: hidden;
}

.dialog.workflows-properties
 .workflows-inspector {
 flex: 1;
 min-height: 0;
 overflow-x: hidden;
 overflow-y: auto;
}

.workflows-binding-current {
 white-space: pre-wrap;
}

.workflows-tool-field {
 display: flex;
 align-items: stretch;
 min-width: 0;
}

.workflows-tool-field
 > input.input:not([type='radio']):not(
  [type='checkbox']
 ) {
 width: auto;
 flex: 1 1 auto;
 min-width: 0;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
}

.workflows-tool-field > .btn {
 height: auto;
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
 margin-left: -1px;
}

.dialog.workflow-tool-directory {
 max-width: 36rem;
 overflow: hidden;
}

.workflow-tool-directory-body {
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-height: 0;
}

.workflow-tool-directory-list {
 display: flex;
 flex-direction: column;
 gap: 14px;
 max-height: min(52vh, 24rem);
 overflow: auto;
}

.workflow-tool-group h3 {
 margin: 0 0 6px;
 font-size: 13px;
 font-weight: 600;
}

.workflow-tool-option {
 width: 100%;
 height: auto;
 justify-content: flex-start;
 padding: 8px 10px;
 white-space: normal;
 text-align: left;
}

.workflow-tool-option .btn-content {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 min-width: 0;
}

.workflow-tool-name {
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  Consolas, monospace;
 font-size: 13px;
}

.workflow-tool-description,
.workflow-tool-note {
 color: var(--muted-foreground);
 font-size: 12px;
 font-weight: 400;
}

.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 {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 white-space: normal;
 text-align: left;
 line-height: 1.3;
}

.workflows-card-kind,
.workflows-card-detail,
.workflows-kind-note {
 color: var(--muted-foreground);
 font-size: 12px;
 font-weight: 400;
}

.workflows-card-title {
 font-weight: 600;
}

.workflows-card[data-kind='tool'] {
 box-shadow: inset 3px 0 0
  var(--foreground);
}

.workflows-card[data-kind='inference'] {
 box-shadow: inset 3px 0 0 var(--ring);
}

.workflows-card[data-kind='actor'] {
 box-shadow: inset 3px 0 0
  var(--primary);
}

.workflows-card[data-kind='approval'] {
 box-shadow: inset 3px 0 0
  var(--muted-foreground);
}

.workflows-card.is-needs-tool {
 box-shadow: inset 3px 0 0
  var(--destructive);
}

.workflows-legend {
 margin: 0 0 8px;
}

.workflows-trigger {
 width: 240px;
 flex: 0 0 240px;
 padding: 16px;
 gap: 10px;
}

.workflows-trigger h2 {
 margin: 0;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.workflows-trigger p {
 margin: 0;
}

.workflows-trigger .btn {
 width: 100%;
}

.workflows-join {
 align-self: center;
 color: var(--muted-foreground);
 flex: 0 0 auto;
}

.workflows-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.workflows-list-card,
.workflows-empty {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 padding: 16px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--card);
}

.workflows-list-head {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}

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

.workflows-lifecycle {
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.workflows-lifecycle[data-lifecycle='ready'] {
 color: var(--foreground);
}

.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-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-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 {
  overflow: auto;
 }

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

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