/* Variable default-value editor: multiline + manually resizable */
.dnx-variable-default-value {
  display: block;
  width: 100%;
  min-height: 140px;
  max-height: 60vh;
  resize: vertical;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--mud-palette-lines-inputs, #e0e0e0);
  border-radius: 4px;
  font: inherit;
  line-height: 1.45;
  background: var(--mud-palette-surface, #fff);
  color: var(--mud-palette-text-primary, inherit);
}

.dnx-variable-default-value:focus {
  outline: 2px solid var(--mud-palette-primary, #594ae2);
  outline-offset: 1px;
}

/*
  MudBlazor pins .mud-toolbar to a fixed height and does not wrap.
  Elsa then lays filters out in one nowrap row. Inside the admin shell the
  studio pane is often narrower than that row, so buttons and selects shrink
  and their labels clip. Let the definitions and instances toolbars grow and
  wrap, and keep each control wide enough to show its label.
*/
.definitions-table .mud-table-toolbar,
.instances-table .mud-table-toolbar {
  height: auto;
  min-height: 56px;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  row-gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.definitions-table .mud-table-toolbar .d-flex,
.instances-table .mud-table-toolbar .d-flex {
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  row-gap: 8px;
  min-width: 0;
  max-width: 100%;
  height: auto !important;
}

.definitions-table .mud-table-toolbar .mud-button-root,
.definitions-table .mud-table-toolbar .mud-menu,
.instances-table .mud-table-toolbar .mud-button-root,
.instances-table .mud-table-toolbar .mud-menu {
  flex: 0 0 auto;
}

.definitions-table .mud-table-toolbar .mud-button-label,
.instances-table .mud-table-toolbar .mud-button-label {
  white-space: nowrap;
}

.definitions-table .mud-table-toolbar .mud-select,
.definitions-table .mud-table-toolbar .mud-autocomplete,
.instances-table .mud-table-toolbar .mud-select,
.instances-table .mud-table-toolbar .mud-autocomplete {
  flex: 0 0 auto;
  width: auto;
  min-width: 10.5rem;
  max-width: 14rem;
}

/* Workflows / Status / Sub status are MudSelectExtended.
   The component sets flex-basis: 0 and min-width: 0, so in a tight
   toolbar they collapse and the play icon draws over the label. */
.instances-table .mud-table-toolbar .mud-select-extended {
  flex: 0 0 11.75rem;
  width: 11.75rem;
  min-width: 11.75rem;
  max-width: 16rem;
}

/* Shell pins this select to 160px, which clips "Has Incidents". */
.instances-table .mud-select-has-incidents {
  min-width: 11.5rem;
  max-width: 13.5rem;
  width: 11.5rem;
  justify-content: flex-start;
}

.definitions-table .mud-table-toolbar .d-flex > .mud-input-control:not(.mud-select),
.instances-table .mud-table-toolbar .d-flex > .mud-input-control:not(.mud-select),
.definitions-table .mud-table-toolbar > .mud-input-control:not(.mud-select),
.instances-table .mud-table-toolbar > .mud-input-control:not(.mud-select) {
  flex: 1 1 16rem;
  min-width: 12.5rem;
  max-width: 28rem;
}

/* Definitions list sort controls */
.dnx-sort-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.dnx-sort-controls .dnx-sort-label {
  font-size: 0.875rem;
  color: var(--mud-palette-text-secondary, #666);
  font-weight: 500;
}

.dnx-sort-controls select,
.dnx-sort-controls button {
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--mud-palette-lines-inputs, #e0e0e0);
  background: var(--mud-palette-surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  padding: 0 10px;
}

.dnx-sort-controls button {
  cursor: pointer;
  background: var(--mud-palette-primary, #594ae2);
  color: #fff;
  border-color: transparent;
  font-weight: 500;
}

.dnx-sort-controls button:hover {
  filter: brightness(1.05);
}