/* Evo Community 1.1.0 pipeline editor: constrain flex/grid children to the
   dialog, wrap long company names/UUIDs and keep the footer accessible. */
[role="dialog"].max-w-\[620px\] {
  display: flex;
  flex-direction: column;
  width: min(860px, calc(100vw - 32px));
  max-width: 860px !important;
  max-height: calc(100dvh - 32px);
}

[role="dialog"].max-w-\[620px\] > div {
  min-width: 0;
  width: 100%;
}

[role="dialog"].max-w-\[620px\] > div:first-of-type,
[role="dialog"].max-w-\[620px\] > div:last-of-type {
  flex-shrink: 0;
}

[role="dialog"].max-w-\[620px\] > div:first-of-type .min-w-0 > div:first-child {
  flex-wrap: wrap;
}

[role="dialog"].max-w-\[620px\] > div:first-of-type h2 {
  white-space: normal;
  overflow-wrap: anywhere;
}

[role="dialog"].max-w-\[620px\] > div:first-of-type span.shrink-0 {
  flex-shrink: 1;
  overflow-wrap: anywhere;
}

[role="dialog"].max-w-\[620px\] > div:nth-of-type(2) {
  min-height: 0;
  overflow: auto;
}

[role="dialog"].max-w-\[620px\] .h-\[470px\] {
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 290px);
  overflow-y: auto;
}

[role="dialog"].max-w-\[620px\] .grid {
  min-width: 0;
}

[role="dialog"].max-w-\[620px\] textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: min(340px, 45dvh);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  resize: vertical;
}

@media (max-width: 640px) {
  [role="dialog"].max-w-\[620px\] > div:first-of-type {
    flex-wrap: wrap;
    padding: 16px;
  }

  [role="dialog"].max-w-\[620px\] > div:first-of-type > .min-w-0 {
    flex: 1 0 calc(100% - 60px);
  }

  [role="dialog"].max-w-\[620px\] > div:first-of-type > .shrink-0 {
    margin-left: auto;
  }

  [role="dialog"].max-w-\[620px\] > div:nth-of-type(2) > div:first-child {
    flex-wrap: wrap;
    padding-inline: 16px;
  }

  [role="dialog"].max-w-\[620px\] .h-\[470px\] {
    max-height: calc(100dvh - 330px);
    padding-inline: 16px;
  }
}