/* Global slim scrollbars (~6px; Firefox uses thin ~6?8px) */
:root,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.45);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.65);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

input {
  border-color: #bfbfbf;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
textarea:focus-visible {
  border-color: #14acff;
}
textarea::placeholder {
  color: rgba(0, 0, 0, 0.376);
}
.PrintingPreviewView {
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  position: fixed; /* Fixed position to cover the whole viewport */
  top: 0;
  left: 0;
  justify-content: center;
  z-index: 9999;
  display: flex;
  overflow: hidden;
}
ui-row > textarea {
  flex-grow: 1;
}

ui-column > textarea {
  align-self: stretch;
}

ui-column > ui-wrap {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
textarea {
  border-color: #bfbfbf;
  border-width: 1px;
  border-style: solid;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
.tinymce {
  border: 0px none;
  width: 100%;
  height: 100%;
}
input:focus-visible {
  border-color: #14acff;
}
input::placeholder {
  color: rgba(0, 0, 0, 0.376);
}
*[data-hide] {
  display: none !important;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#root {
  height: 100%;
}
ui-overlay-root {
  height: 100%;
  position: relative;
}

ui-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

ui-row.max {
  width: 100%;
}

ui-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  flex: none;
  width: initial;
  box-sizing: border-box;
}
.ma-e {
  justify-content: end;
}
.ma-s {
  justify-content: start;
}
.ma-c {
  justify-content: center;
}
.ma-sa {
  justify-content: space-around;
}
.ma-sb {
  justify-content: space-between;
}
.ma-se {
  justify-content: space-evenly;
}
.ra-e {
  align-content: end;
}
.ra-s {
  align-content: start;
}
.ra-c {
  align-content: center;
}
.ra-sa {
  align-content: space-around;
}
.ra-sb {
  align-content: space-between;
}
.ra-se {
  align-content: space-evenly;
}
.jc-fe {
  justify-content: flex-end;
}
.cr-s {
  align-items: stretch;
}
.cr-e {
  align-items: flex-end;
}
.cr-c {
  align-items: center;
}
.cr-st {
  align-items: stretch;
}
.cr-b {
  align-items: baseline;
}
ui-column {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  width: initial;
  box-sizing: border-box;
}

/* ui-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  width: initial;
} */
ui-column > ui-stack {
  min-height: 0;
}
ui-row > ui-stack {
  min-width: 0;
}
/* ui-stack > ui-container {
  min-height: 0;
  min-width: 0;
  width: 100%;
} */
ui-scroll-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  width: 100%;
  align-self: stretch;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) rgba(0, 0, 0, 0.06);
}
ui-scroll-view.ScrollView2::-webkit-scrollbar {
  width: 8px;
}
ui-scroll-view.ScrollView2::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}
ui-scroll-view.ScrollView2::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.55);
  border-radius: 4px;
}
ui-scroll-view.ScrollView2::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.75);
}

/* shrinkWrap (Dart kIsWeb): content-sized unless a bounded flex-slot rule applies. */
/* ui-scroll-view.ScrollView2.shrink-wrap {
  flex: 1 1 auto;
  height: auto;
  max-height: 100%;
}

.expanded > ui-scroll-view.ScrollView2.shrink-wrap,
ui-column > .expanded > ui-container > ui-scroll-view.ScrollView2.shrink-wrap,
ui-column.DeploymentView-content.max > .expanded > ui-scroll-view.ScrollView2.shrink-wrap {
  flex: 1 1 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
} */

/* Scroll content sizes to full intrinsic height (Flutter SliverToBoxAdapter parity). */
ui-scroll-view.ScrollView2 > .scroll-view2-content {
  flex-shrink: 0;
  max-height: none;
  min-height: min-content;
  width: 100%;
}

ui-scroll-view.ScrollView2 .scroll-view2-content > ui-column,
ui-scroll-view.ScrollView2 > ui-column {
  flex-shrink: 0;
  height: auto;
  max-height: none;
}

ui-scroll-view.ScrollView2 ui-container > * {
  max-height: none;
}

ui-stack > ui-container > ui-scroll-view {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
ui-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

ui-wrap {
  display: flex;
  flex-wrap: wrap;
}

/* Flutter BoxConstraints parity: NewLabelDropdown fills a width-constrained parent */
ui-container > ui-column.NewLabelDropdown {
  align-self: stretch;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* Flutter BoxConstraints parity: NewLabelDropdown fills a width-constrained parent */
ui-container > ui-column.NewLabelDropdown {
  align-self: stretch;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* Flutter BoxConstraints parity: NewAutoSearchTextWithBuilder in sized parent */
ui-container[style*="width"] > ui-container.NewAutoSearchTextWithBuilder,
ui-container[style*="width"]
  > ui-container.Clickble.NewAutoSearchTextWithBuilder {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

ui-container[style*="height"] > ui-container.NewAutoSearchTextWithBuilder,
ui-container[style*="height"]
  > ui-container.Clickble.NewAutoSearchTextWithBuilder {
  height: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-container[style*="width"]
  > ui-container.NewAutoSearchTextWithBuilder
  > ui-container,
ui-container[style*="width"]
  > ui-container.Clickble.NewAutoSearchTextWithBuilder
  > ui-container,
ui-container[style*="height"]
  > ui-container.NewAutoSearchTextWithBuilder
  > ui-container,
ui-container[style*="height"]
  > ui-container.Clickble.NewAutoSearchTextWithBuilder
  > ui-container {
  box-sizing: border-box;
  max-width: 100%;
  width: 100% !important;
}

ui-container[style*="height"]
  > ui-container.NewAutoSearchTextWithBuilder
  > ui-container,
ui-container[style*="height"]
  > ui-container.Clickble.NewAutoSearchTextWithBuilder
  > ui-container {
  height: 100% !important;
}

ui-container[style*="height"]
  > ui-container.NewAutoSearchTextWithBuilder
  > ui-container
  > ui-row,
ui-container[style*="height"]
  > ui-container.Clickble.NewAutoSearchTextWithBuilder
  > ui-container
  > ui-row {
  align-items: center;
  height: 100%;
  min-height: 0;
}

ui-container
  > ui-column.NewLabelDropdown
  > ui-container.NewLabelDropdownContainer {
  box-sizing: border-box;
  max-width: 100%;
  width: 100% !important;
}

ui-container
  > ui-column.NewLabelDropdown
  > ui-container.NewLabelDropdownContainer
  > ui-container {
  height: 100%;
}

ui-container
  > ui-column.NewLabelDropdown
  > ui-container.NewLabelDropdownContainer
  > ui-container
  > ui-row {
  align-items: center;
  height: 100%;
  min-height: 0;
}

ui-container
  > ui-column.NewLabelDropdown
  > ui-container.NewLabelDropdownContainer {
  box-sizing: border-box;
  max-width: 100%;
  width: 100% !important;
}

ui-container
  > ui-column.NewLabelDropdown
  > ui-container.NewLabelDropdownContainer
  > ui-container {
  height: 100%;
}

ui-container
  > ui-column.NewLabelDropdown
  > ui-container.NewLabelDropdownContainer
  > ui-container
  > ui-row {
  align-items: center;
  height: 100%;
  min-height: 0;
}

ui-wrap > ui-container,
ui-wrap > ui-column {
  flex-shrink: 0;
  max-width: 100%;
}

/* SearchableDropdown popup list (Author / Target Branch) — scroll inside fixed popup height */
ui-popup > ui-container:has(> ui-container.SearchableDropdown) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

ui-popup > ui-container > ui-container.SearchableDropdown {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

ui-popup .SearchableDropdown ui-list-view.sv {
  flex: 1 1 0;
  height: 100%;
  max-height: 210px;
  min-height: 0;
  overflow-y: auto;
}

.checkbox {
  background-color: #bfbfbf;
  cursor: pointer;
  width: fit-content;
}
.button {
  cursor: pointer;
}

ui-stack {
  display: grid;
  position: relative;
  min-height: 0;
}

ui-stack > * {
  grid-area: 1/1/2/2;
  z-index: 1;
}

/* Row stacks: stretch in flex row but keep intrinsic height unless stack-expand. */
ui-row > ui-stack {
  align-self: stretch;
  min-height: 0;
}

/* Flutter StackFit.expand: fill bounded parent (LoginScreen, full-bleed overlays, etc.) */
ui-stack.stack-expand {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Stack hosting a top+bottom pinned overlay fills bounded parent (no StackFit.expand needed). */
ui-stack:has(> ui-positioned.positioned-stretch-y) {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Canvas right panel only: stack holds a property column and/or code-editor column. */
ui-row > ui-stack:has(> ui-column),
ui-row > ui-stack:has(> ui-container > ui-column) {
  flex-shrink: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-width: none;
  min-width: 300px;
  overflow-x: visible;
  overflow-y: hidden;
  width: fit-content;
}

ui-row > ui-stack:has(> ui-column) > ui-column:not([data-hide]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 300px;
  overflow: hidden;
  width: 300px;
}

ui-row > ui-stack:has(> ui-column) > ui-column:not([data-hide]) > .expanded {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

ui-row > ui-stack:has(> ui-container > ui-column) > ui-container {
  flex: 0 0 auto;
  height: 100%;
  max-width: none;
  min-height: 0;
  overflow: hidden;
}

ui-column > .expanded {
  overflow: hidden;
}

ui-column > .expanded > ui-container {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

ui-column > .expanded > ui-container > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  max-height: 100%;
  min-height: 0;
}

/* Flutter Stack parity: base layer fills stack; overlay children use parent alignment */
ui-stack.Stack[class*="stack-align-"] > *:first-child:not(ui-positioned) {
  justify-self: stretch;
  align-self: stretch;
  /*width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;*/
}

ui-overlay-root > ui-page-router {
  height: 100%;
}

ui-overlay-root > ui-page-router > * {
  height: 100%;
}

ui-page-router {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

ui-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

ui-container > ui-column {
  align-self: stretch;
}
ui-column > table {
  align-self: stretch;
}
ui-column > ui-scroll {
  align-self: stretch;
}
ui-row > ui-row {
  /* align-self: stretch; */
}

ui-column > ui-list-view {
  align-self: stretch;
}

.RootPage {
  align-self: stretch;
}

ui-layout-aware {
  display: flex;
  align-self: stretch;
  align-items: stretch;
}

ui-container > ui-column.max {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-page-router {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
ui-page-router > * {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ui-popup {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  z-index: 1;
  position: fixed;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

ui-popup.Top {
  align-items: start;
}
ui-popup.Buttom {
  align-items: end;
}
ui-popup.Center {
  align-items: center;
}
ui-popup.Left {
  justify-content: start;
}
ui-popup.Right {
  justify-content: end;
}
ui-popup.Positioned {
  display: block;
  bottom: auto;
  right: auto;
  justify-content: initial;
  align-items: initial;
  overflow: visible;
  width: max-content;
  height: max-content;
  z-index: 10000;
}

ui-popup-content {
  background-color: white;
  height: fit-content;
  width: fit-content;
}

/* DashboardNotificationPopup: bounded scroll region (Dart ContainerEx height: 400). */
.DashboardNotificationPopup
  > ui-column
  > ui-container
  > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

/* ui-row > ui-column.max {
  align-self: stretch;
} */
ui-container > .v {
  flex-grow: 1;
}
ui-center > .h {
  width: 100%;
}
/* Expanded: global flex slot (Flutter parity). Never clip; scroll lives on ScrollView2. */
.expanded {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  overflow: visible;
}
ui-row > .expanded {
  flex-direction: row;
  max-height: none;
  align-self: stretch;
  min-height: 0;
}

ui-row > .expanded > ui-container {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Flutter parity: Row/Column inside Expanded must fill the flex slot (e.g. ResizableView split). */
.expanded > ui-row.max,
.expanded > ui-row.Row.max {
  flex: 1 1 0%;
  min-width: 0;
  width: 100%;
}

ui-column.BuildView.max {
  height: 100%;
  min-height: 0;
}

ui-column.BuildView > .expanded {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

ui-column.BuildView > ui-row,
ui-column.BuildView > ui-container {
  flex-shrink: 0;
}

/* DeploymentView — stack + column fill right pane (BuildAndDeployView) */
.DeploymentView.ui-stack.stack-expand {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-column.DeploymentView-content.max {
  flex: 1 1 0;
  height: 100%;
  min-height: 0;
}

ui-column.DeploymentView-content.max > .expanded {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

ui-column.DeploymentView-content.max > .expanded > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

ui-column > .expanded > ui-container > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

ui-column > .expanded {
  flex-direction: column;
  min-height: 0;
}

.expanded > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-container > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Modal popup forms: ScrollView2 must not collapse when the flex parent has no height. */
.PopupWrapperView .xd7d2 {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
}

.PopupWrapperView .xd7d2 > * {
  max-height: none;
}

.PopupWrapperView .xd7d2 > ui-scroll-view.ScrollView2,
.PopupWrapperView ui-scroll-view.ScrollView2 {
  flex: 0 1 auto;
  min-height: 220px;
  height: auto;
  max-height: min(55vh, 440px);
  overflow-y: auto;
  width: 100%;
}

.PopupWrapperView ui-scroll-view.ScrollView2 > ui-column {
  flex-shrink: 0;
  height: auto;
  min-height: min-content;
}

/* Settings tab stack: hidden panels must not overlay active panel. */
.NewPersonalSettingsView ui-stack > [data-hide] {
  display: none !important;
  pointer-events: none !important;
}

.NewPersonalSettingsView ui-stack > ui-container,
.NewPersonalSettingsView ui-stack > .UpdateThemeView {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.PersonalSettingsView .UpdateThemeView,
.PersonalSettingsView .TWThemePicker {
  max-width: 28rem;
  padding: 20px 24px;
  box-sizing: border-box;
}

.NewPersonalSettingsView .ProfileSettingsView {
  height: 100%;
  min-height: 0;
}

.NewPersonalSettingsView .ProfileSettingsView ui-scroll-view.x5029 {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

ui-container > input {
  height: inherit;
}
ui-container > .h {
  align-self: stretch;
}
ui-row > *:not(ui-stack) {
  max-height: 100%;
  max-width: 100%;
}
ui-column > * {
  /* max-height: 100%;
  max-width: 100%; */
}
ui-container > * {
  max-width: 100%;
  max-height: 100%;
}

ui-container > ui-row {
  height: 100%;
}

ui-column.v > * {
  flex-shrink: 0;
}

ui-detector {
  display: flex;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}

.Button > ui-center {
  flex-grow: 1;
}

.RootPage {
  align-items: start;
}
label {
  display: block;
  white-space: pre-line;
}

ui-popup-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #2223;
  position: initial;
}
ui-popup.Center {
  position: initial;
}
ui-popup.Top {
  position: initial;
}
ui-popup.Right {
  position: initial;
}
ui-popup.Bottom {
  position: initial;
}
ui-popup.Left {
  position: initial;
}
ui-popup-wrapper.Center {
  align-items: center;
  justify-content: center;
}
ui-popup-wrapper.Top {
  align-items: center;
  justify-content: start;
}
ui-popup-wrapper.Right {
  align-items: end;
  justify-content: center;
}
ui-popup-wrapper.Button {
  align-items: center;
  justify-content: end;
}
ui-popup-wrapper.Left {
  align-items: start;
  justify-content: center;
}

ui-overlay-entry.show {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}
ui-overlay-entry > * {
  pointer-events: all;
}
ui-icon {
  font-size: 24px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
label {
  word-wrap: anywhere;
  cursor: inherit;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

/* Dart TextOverflow.ellipsis — bounded width inside flex columns */
label.TextView {
  box-sizing: border-box;
}

/* LayoutBuilder card grid: slots tile in ui-wrap (structural — no theme x-classes) */
ui-wrap > .layout-builder-slot {
  align-self: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

ui-wrap > .layout-builder-slot > ui-container {
  max-width: 100%;
  box-sizing: border-box;
}

ui-wrap > .layout-builder-slot > ui-container > ui-column {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
table {
  border-spacing: 0px;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
}

table td,
table th {
  overflow: hidden;
  min-width: 0;
  vertical-align: middle;
}

table td label,
table th label {
  word-wrap: normal;
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  display: inline-block;
  vertical-align: middle;
}

table td .table-cell-inner {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

table td .table-cell-inner > ui-row,
table td .table-cell-inner > ui-wrap,
table td .table-cell-inner > ui-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

table td ui-row,
table td ui-column,
table td ui-wrap,
table td ui-container {
  min-width: 0;
  max-width: 100%;
}

/* Branch-details style cells: column beside avatar/# should consume remaining width */
table td ui-wrap > ui-column {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

/* Metadata sub-row: keep name / hash / branch on one line like Dart Row */
table td ui-column > ui-row {
  flex-wrap: nowrap;
  width: 100%;
}

table td ui-column > ui-row > *:not(ui-stack) {
  flex-shrink: 0;
  min-width: 0;
}

table td ui-column > ui-row label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status column only: single horizontal row may shrink */
table td > .table-cell-inner > ui-row > *:not(ui-stack) {
  flex-shrink: 1;
  min-width: 0;
}

table td ui-column {
  overflow: hidden;
}

ui-row > input {
  flex-grow: 1;
}

ui-column > input {
  align-self: stretch;
}
ui-container > ui-layout-aware {
  width: 100%;
  height: 100%;
}

ui-list-view.sv {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

/* Prevent row overlap when list height is constrained (matches ui-list-view.sh > *) */
ui-list-view.sv > * {
  flex-shrink: 0;
}

/* ListView scroll slot — height via --list-slot-height set in ListView.ts */
ui-list-view.ListView.sv.in-expanded-slot {
  min-height: 0;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}
ui-list-view.ListView.sv.in-expanded-slot.slot-measured {
  height: var(--list-slot-height);
  max-height: var(--list-slot-height);
}

ui-list-view.sh {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}
ui-list-view.sh > * {
  flex-shrink: 0;
}
ui-column.v > ui-list-view.sv {
  flex-shrink: inherit;
}
ui-row.h > ui-list-view.sh {
  flex-shrink: inherit;
}
ui-container > ui-list-view.sh {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

ui-positioned {
  position: absolute;
}

/* Flutter Positioned(top+bottom): stretch child to full stack height */
ui-positioned.positioned-stretch-y {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

ui-positioned.positioned-stretch-y > ui-container {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-positioned.positioned-stretch-y > ui-container > ui-column {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-positioned.positioned-stretch-y > ui-container > ui-column > .expanded {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

ui-positioned.positioned-stretch-y
  > ui-container
  > ui-column
  > .expanded
  > ui-scroll-view.ScrollView2 {
  flex: 1 1 0;
  min-height: 0;
}

ui-wrap.jd-col {
  flex-direction: column;
}

ui-loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

canvas {
  width: 100%;
  height: 100%;
}

ui-stack.xe6a0 > ui-column.xdedd:not([data-hide]) {
  align-self: stretch;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

/* CanvasEditorView: keep Test Data button row visible (Flutter intrinsic-height parity). */
ui-column.xdedd {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

ui-column.xdedd > .expanded {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

ui-column.xdedd > ui-row.x68d5 {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: fit-content;
}

/* Canvas floating toolbar: mouse tools + zoom in one row (class hooks from templates) */
ui-container.floating-zoom-bar {
  width: fit-content;
  max-width: calc(100vw - 48px);
  align-self: center;
  overflow: visible;
}

ui-container.floating-zoom-bar > ui-row.floating-zoom-toolbar {
  width: fit-content;
  flex: 0 0 auto;
  height: auto;
  flex-wrap: nowrap;
  max-width: none;
}

ui-row.floating-zoom-toolbar {
  flex: 0 0 auto;
  width: fit-content;
  max-width: none;
}

ui-row.floating-zoom-toolbar > ui-container.mouse-tools-shrink {
  flex: 0 0 auto;
  align-self: center;
}

ui-container.mouse-tools-shrink {
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  height: auto;
  flex: 0 0 auto;
  align-items: flex-start;
  align-self: center;
}

ui-container.mouse-tools-shrink > ui-wrap.mouse-tools-wrap,
ui-container.mouse-tools-shrink > ui-wrap {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: center;
  flex-wrap: nowrap;
}

ui-row.floating-zoom-toolbar > ui-mouse-region,
ui-row.floating-zoom-toolbar > ui-container:not(.mouse-tools-shrink) {
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width: none;
  width: auto;
}

ui-row.floating-zoom-toolbar ui-mouse-region {
  width: auto !important;
  height: auto !important;
}

/* extra iframs which mostly need for user*/
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateCounterClockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
/* WindowEditor — tab strip above tab body; route clicks to tabs not stacked panes */
ui-column.WindowEditor.max {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

ui-column.WindowEditor.max > .expanded {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.WindowEditor > ui-row:first-of-type {
  flex: 0 0 auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-height: 37px;
  position: relative;
  width: 100%;
  z-index: 5;
}

.WindowEditor > ui-row:first-of-type > .expanded,
.WindowEditor > ui-row:first-of-type > ui-container {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.WindowEditor > ui-row:first-of-type ui-list-view.sh {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

.WindowEditor > ui-row:first-of-type > ui-row:first-child,
.WindowEditor > ui-row:first-of-type > ui-row:last-child {
  flex-shrink: 0;
}

.WindowEditor > .expanded > ui-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.WindowEditor > .expanded > ui-container > ui-stack {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.WindowEditor > .expanded > ui-container > ui-stack > ui-positioned {
  pointer-events: none;
}

.WindowEditor
  > .expanded
  > ui-container
  > ui-stack
  > ui-positioned
  > ui-container {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
  width: 100%;
}

.WindowEditor
  > .expanded
  > ui-container
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  > * {
  pointer-events: auto;
}

/* Tab item shell (Overview / AI Agent / NodeTabView parent) */
.WindowEditor ui-list-view.sh > ui-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Tab underline: active only (overrides theme inactive-tab bottom border) */
.WindowEditor ui-list-view.sh > ui-container:not([data-c0]) {
  border: none !important;
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  background-color: transparent !important;
}

.WindowEditor ui-list-view.sh > ui-container[data-c0] {
  align-self: stretch;
  background-color: var(--c2) !important;
  border: none !important;
  border-bottom: 2px solid var(--c20) !important;
}

/* StudioTabsView — fill workspace below tab strip */
ui-column.StudioTabsView.max {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-column.StudioTabsView.max > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Tab pane content (Overview scroll, AI Agent, design pages) */
.WindowEditor
  > .expanded
  > ui-container
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  > ui-container,
.WindowEditor
  > .expanded
  > ui-container
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  ui-scroll-view.ScrollView2 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  width: 100% !important;
}

/* Overview tab — padded root fills tab pane; scroll content stretches to viewport */
.WindowEditor
  > .expanded
  > ui-container
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  > ui-container.ProjectSpecificationView {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.WindowEditor
  > .expanded
  > ui-container
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  > ui-container.ProjectSpecificationView
  > ui-scroll-view.ScrollView2.xb2ea {
  flex: 1 1 0;
  min-height: 0;
}

ui-scroll-view.ScrollView2.xb2ea > .scroll-view2-content {
  box-sizing: border-box;
  min-height: 100%;
}

/* CanvasEditorView right panel: size to child (500px code editor, 300px properties) */
.CanvasEditorView ui-row > .expanded + ui-stack {
  flex: 0 0 auto;
  width: fit-content;
  max-width: none;
  min-width: 300px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Project loader popup — center all content in the column */
.ProjectLoaderView.xa072 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.ProjectLoaderView.xa072 > ui-column {
  align-items: center;
  width: 100%;
}

.ProjectLoaderView.xa072 .x6bdc {
  text-align: center;
}

.ProjectLoaderGradientProgress {
  align-items: center;
  width: 100%;
}