/* =============================================================================
   OrganicSystem — ERP Filter Bar (authoritative; loads last via _UiAutoScaleHead)
   Layout only — do not change filter behavior.

   Desktop (>=1200): Farm · Year · Season · Product · Plot on the FIRST row
                     Action Bar (Refresh + New/Save/Print/…) on a SECOND row when present
   Tablet / mobile: controlled wrap; empty action slot stays collapsed
   ============================================================================= */

:root {
  --os-filter-bar-gap: 8px;
  --os-filter-bar-row-gap: 8px;
  /* Keep filter controls aligned with the global toolbar button height token */
  --os-filter-control-height: var(--os-erp-toolbar-btn-height, 36px);
  --os-filter-label-size: 0.75rem;
  --os-filter-control-font: 0.875rem;
  --os-filter-actions-min-height: var(--os-erp-toolbar-btn-height, 36px);
}

/* ---------- Hosts ---------- */
.os-module-toolbar,
.os-module-toolbar-inner,
.os-module-toolbar .module-main-filter-form,
.os-module-toolbar .prs-station-form,
.module-main-sidebar .module-main-filter-form,
.prs-sidebar .prs-station-form,
.os-report-filter-form,
.os-page-sticky-chrome form.row.g-2,
.os-desktop-page-header form.row.g-2,
.ags-balance-page form.row.g-2,
.prs-balance-page form.row.g-2,
.prs-page form.row.g-2,
.ags-comm-filter-form,
.ags-trace-cover-filter-form,
.prs-trace-filter-form,
.aps-mrl-filter-form {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.os-module-toolbar,
.os-module-toolbar *,
.os-module-toolbar *::before,
.os-module-toolbar *::after {
  box-sizing: border-box;
}

/* Column shell: filters on row 1; Action Bar (Refresh + page actions) on row 2 */
.os-module-toolbar-inner,
.os-module-toolbar-inner.os-page-filter-header {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: var(--os-filter-bar-gap) !important;
  row-gap: var(--os-filter-bar-row-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.os-module-toolbar-filter-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: var(--os-filter-bar-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.os-module-toolbar-filter-row:empty,
.os-module-toolbar-filter-row--empty,
.os-module-toolbar-filter-row[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: none !important;
}

.os-module-toolbar .os-app-page-toolbar-slot.os-filter-actions--has-page-actions,
.os-module-toolbar .os-app-page-toolbar-slot:has([data-os-toolbar="refresh"]) {
  display: flex !important;
  min-height: var(--os-filter-actions-min-height) !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.os-module-toolbar .os-app-page-toolbar-slot[hidden],
.os-module-toolbar .os-app-page-toolbar-slot:not(.os-filter-actions--has-page-actions):not(:has([data-os-toolbar="refresh"])) {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
}

.os-module-toolbar-filter-row > .module-main-filter-form,
.os-module-toolbar-filter-row > .prs-station-form {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Form owns the filter grid — NOT display:contents (that pulled actions into the filter flex) */
.os-module-toolbar .module-main-filter-form,
.os-module-toolbar .module-main-filter-form.os-page-filter-row,
.os-module-toolbar .prs-station-form {
  display: grid !important;
  grid-template-columns:
    minmax(260px, 1.6fr)
    minmax(140px, 0.7fr)
    minmax(160px, 0.8fr)
    minmax(240px, 1.2fr)
    minmax(220px, 1.1fr);
  gap: var(--os-filter-bar-gap) !important;
  align-items: end !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Non-AGS toolbars with fewer/different fields still share one grid row when space allows */
.os-module-toolbar .module-main-filter-form:not([data-filter-cascade="ags"]),
.os-module-toolbar .prs-station-form {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

/* ---------- Filter fields ---------- */
.os-module-toolbar .module-main-filter-field,
.os-module-toolbar .module-main-filter-field--farm,
.os-module-toolbar .module-main-filter-field--company,
.os-module-toolbar .module-main-filter-field--site,
.os-module-toolbar .module-main-filter-field--season,
.os-module-toolbar .module-main-filter-field--year,
.os-module-toolbar .module-main-filter-field--product,
.os-module-toolbar .module-main-filter-field--certification,
.os-module-toolbar .module-main-filter-field--supplier,
.os-module-toolbar .module-main-filter-field--station,
.os-module-toolbar .module-main-filter-field--plots,
.module-main-sidebar .module-main-filter-field,
.prs-sidebar .prs-station-form > * {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex: unset !important;
  flex-basis: auto !important;
  order: unset !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  position: relative;
  overflow: visible !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
}

/* Plot stays in the same grid row — never force a full-width wrap */
.os-module-toolbar .module-main-filter-field--plots {
  flex: unset !important;
  flex-basis: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  order: unset !important;
  z-index: 0;
}

/* Keep empty plot strip space reserved (stable height; no hide→show jump) */
.os-module-toolbar .module-main-filter-field--plots:not(:has(.module-main-plot-chip)) {
  display: inline-flex !important;
}

.os-module-toolbar .module-main-filter-field--plots:not(:has(.module-main-plot-chip)) .module-main-plot-strip,
.os-module-toolbar .module-main-plot-strip:empty {
  display: flex !important;
  min-height: var(--os-filter-control-height) !important;
  height: var(--os-filter-control-height) !important;
}

.os-module-toolbar .module-main-filter-label,
.os-module-toolbar .prs-station-label {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: var(--os-filter-label-size) !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.os-module-toolbar .module-main-filter-select:not([multiple]),
.os-module-toolbar .prs-station-select,
.os-module-toolbar .module-main-filter-field--farm .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--company .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--site .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--season .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--year .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--product .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--certification .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--supplier .module-main-filter-select,
.os-module-toolbar .module-main-filter-field--station .module-main-filter-select {
  flex: 1 1 auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--os-filter-control-height) !important;
  min-height: var(--os-filter-control-height) !important;
  max-height: var(--os-filter-control-height) !important;
  font-size: var(--os-filter-control-font) !important;
  padding-block: 0 !important;
  padding-inline: 0.55rem !important;
  line-height: 1.2 !important;
  border-radius: var(--os-erp-toolbar-btn-radius, 0.4rem) !important;
  field-sizing: normal;
  box-sizing: border-box !important;
}

/* Page filter rows + TagBoxes: same height/radius as toolbar controls */
.os-report-filter-form .form-control,
.os-report-filter-form .form-select,
.os-page-sticky-chrome form.row.g-2 .form-control,
.os-page-sticky-chrome form.row.g-2 .form-select,
.os-desktop-page-header form.row.g-2 .form-control,
.os-desktop-page-header form.row.g-2 .form-select,
.ags-balance-page form.row.g-2 .form-control,
.ags-balance-page form.row.g-2 .form-select,
.prs-balance-page form.row.g-2 .form-control,
.prs-balance-page form.row.g-2 .form-select,
.prs-page form.row.g-2 .form-control,
.prs-page form.row.g-2 .form-select,
.ags-comm-filter-form .form-control,
.ags-comm-filter-form .form-select,
.ags-trace-cover-filter-form .form-select,
.prs-trace-filter-form .form-select,
.aps-mrl-filter-form .form-control,
.aps-mrl-filter-form .form-select {
  height: var(--os-filter-control-height) !important;
  min-height: var(--os-filter-control-height) !important;
  max-height: var(--os-filter-control-height) !important;
  border-radius: var(--os-erp-toolbar-btn-radius, 0.4rem) !important;
  box-sizing: border-box !important;
}

.os-module-toolbar .os-app-page-toolbar-slot .os-app-header-filter-control .dx-tagbox,
.os-module-toolbar .os-app-page-toolbar-slot .os-app-header-filter-control .dx-texteditor,
.os-page-toolbar .dx-tagbox,
.os-app-page-toolbar-slot .dx-tagbox,
.ags-balance-page .os-balance-tagbox-host .dx-tagbox,
.prs-balance-page .dx-tagbox {
  height: var(--os-filter-control-height) !important;
  min-height: var(--os-filter-control-height) !important;
  max-height: var(--os-filter-control-height) !important;
  border-radius: var(--os-erp-toolbar-btn-radius, 0.4rem) !important;
  box-sizing: border-box !important;
}

.os-module-toolbar .module-main-plot-strip {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: var(--os-filter-control-height) !important;
  min-height: var(--os-filter-control-height) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
}

/* ---------- Actions row (page toolbar only; Refresh lives on the filter row) ---------- */
.os-module-toolbar .os-app-page-toolbar-slot,
.os-module-toolbar .os-app-page-toolbar-slot.os-filter-actions {
  display: none !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: var(--os-filter-bar-gap) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  order: unset !important;
  min-height: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition: none !important;
  animation: none !important;
}

.os-module-toolbar .os-app-page-toolbar-slot.os-filter-actions--has-page-actions,
.os-module-toolbar .os-app-page-toolbar-slot:has([data-os-toolbar="refresh"]) {
  display: flex !important;
  min-height: var(--os-filter-actions-min-height) !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.os-module-toolbar .os-app-page-toolbar-slot[hidden],
.os-module-toolbar .os-app-page-toolbar-slot:not(.os-filter-actions--has-page-actions):not(:has([data-os-toolbar="refresh"])) {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: none !important;
}

body.os-module-shell .os-module-toolbar .os-app-page-toolbar-slot.os-filter-actions--has-page-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.os-module-toolbar .os-app-page-toolbar-slot .os-app-merged-toolbar,
.os-module-toolbar .os-app-page-toolbar-slot .os-page-toolbar.os-app-merged-toolbar,
.os-module-toolbar .os-app-page-toolbar-slot .os-page-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: var(--os-filter-bar-gap) !important;
  order: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
}

/* Never leave toolbar actions visually clickable but non-interactive */
.os-module-toolbar .os-app-page-toolbar-slot .btn,
.os-module-toolbar .os-app-page-toolbar-slot a.btn,
.os-module-toolbar .os-app-page-toolbar-slot [data-os-toolbar],
.os-module-toolbar .os-app-page-toolbar-slot .dropdown-toggle {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer;
  position: relative;
  z-index: 6;
  flex: 0 0 auto !important;
  min-width: auto !important;
}

.os-module-toolbar .os-app-page-toolbar-slot .dropdown-menu,
.os-module-toolbar .os-app-page-toolbar-slot .dropdown-menu.show {
  z-index: 2000 !important;
  pointer-events: auto !important;
}

.os-module-toolbar .os-app-page-toolbar-slot .os-app-header-search,
.os-module-toolbar .os-app-page-toolbar-slot #os-app-header-search {
  order: 99 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-inline-start: var(--os-filter-bar-gap) !important;
}

/* Page-level Bootstrap filter rows (reports / balance secondary filters) */
.os-report-filter-form,
.os-page-sticky-chrome form.row.g-2,
.os-desktop-page-header form.row.g-2,
.ags-balance-page form.row.g-2,
.prs-balance-page form.row.g-2,
.prs-page form.row.g-2,
.ags-comm-filter-form,
.ags-trace-cover-filter-form,
.prs-trace-filter-form,
.aps-mrl-filter-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: var(--os-filter-bar-gap) !important;
  row-gap: var(--os-filter-bar-row-gap) !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.os-report-filter-form > [class*="col-"],
.os-page-sticky-chrome form.row.g-2 > [class*="col-"],
.os-desktop-page-header form.row.g-2 > [class*="col-"],
.ags-balance-page form.row.g-2 > [class*="col-"],
.prs-balance-page form.row.g-2 > [class*="col-"],
.prs-page form.row.g-2 > [class*="col-"] {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.os-report-filter-form .form-control,
.os-report-filter-form .form-select,
.os-page-sticky-chrome form.row.g-2 .form-control,
.os-page-sticky-chrome form.row.g-2 .form-select,
.ags-balance-page form.row.g-2 .form-control,
.ags-balance-page form.row.g-2 .form-select,
.prs-balance-page form.row.g-2 .form-control,
.prs-balance-page form.row.g-2 .form-select,
.prs-page form.row.g-2 .form-control,
.prs-page form.row.g-2 .form-select,
.ags-trace-cover-filter-form .form-select,
.prs-trace-filter-form .form-select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Mass Balance: reserve TagBox host space only while still in the page form.
   Once promoted into the toolbar slot, height is owned by os-toolbar.css. */
.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) #agsBalanceYearsHost,
.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) #agsBalanceSeasonsHost,
.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) .os-balance-tagbox-host,
.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) .os-balance-multiselect {
  display: block !important;
  min-height: var(--os-filter-control-height) !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) #agsBalanceYearsHost .dx-tagbox,
.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) #agsBalanceSeasonsHost .dx-tagbox,
.ags-balance-page #agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) .os-balance-tagbox-host .dx-tagbox {
  min-height: var(--os-filter-control-height) !important;
}

.ags-balance-page form#agsBalanceFilterForm:not([data-os-toolbar-source-hidden="true"]) {
  margin-top: 0.35rem !important;
}

.ags-balance-page form#agsBalanceFilterForm[data-os-toolbar-source-hidden="true"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =============================================================================
   DESKTOP (>=1200): five filters one row with Refresh on the left; actions second row only when present
   (Higher specificity / later in cascade than touch-responsive / orientation)
   ============================================================================= */
@media (min-width: 1200px) {
  html[data-os-layout="wide"] .os-module-toolbar .module-main-filter-form,
  html[data-os-layout="wide"] .os-module-toolbar .module-main-filter-form.os-page-filter-row,
  body.os-landscape-layout .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .module-main-filter-form[data-filter-cascade="ags"],
  .os-module-toolbar .module-main-filter-form.os-page-filter-row[data-filter-cascade="ags"] {
    display: grid !important;
    grid-template-columns:
      minmax(260px, 1.6fr)
      minmax(140px, 0.7fr)
      minmax(160px, 0.8fr)
      minmax(240px, 1.2fr)
      minmax(220px, 1.1fr) !important;
    grid-auto-flow: row !important;
  }

  html[data-os-layout="wide"] .os-module-toolbar .module-main-filter-field--plots,
  body.os-landscape-layout .os-module-toolbar .module-main-filter-field--plots,
  .os-module-toolbar .module-main-filter-field--plots {
    display: inline-flex !important;
    flex: unset !important;
    flex-basis: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    order: unset !important;
    margin-top: 0 !important;
  }

  .os-module-toolbar .module-main-filter-field,
  .os-module-toolbar .module-main-filter-field--plots {
    flex-wrap: nowrap !important;
  }

  .os-module-toolbar-inner,
  .os-module-toolbar-inner.os-page-filter-header {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .os-module-toolbar .os-app-page-toolbar-slot,
  .os-module-toolbar .os-app-page-toolbar-slot.os-filter-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    order: unset !important;
  }

  .os-report-filter-form,
  .os-page-sticky-chrome form.row.g-2,
  .os-desktop-page-header form.row.g-2,
  .ags-balance-page form.row.g-2,
  .prs-balance-page form.row.g-2,
  .prs-page form.row.g-2 {
    flex-wrap: nowrap !important;
  }
}

/* =============================================================================
   TABLET (768–1199)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .module-main-filter-form.os-page-filter-row,
  .os-module-toolbar .prs-station-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .os-module-toolbar .module-main-filter-field--year,
  .os-module-toolbar .module-main-filter-field--season {
    min-width: 0 !important;
  }

  .os-report-filter-form > [class*="col-"],
  .os-page-sticky-chrome form.row.g-2 > [class*="col-"],
  .ags-balance-page form.row.g-2 > [class*="col-"],
  .prs-balance-page form.row.g-2 > [class*="col-"],
  .prs-page form.row.g-2 > [class*="col-"] {
    flex: 1 1 calc(50% - var(--os-filter-bar-gap)) !important;
    max-width: calc(50% - (var(--os-filter-bar-gap) / 2)) !important;
  }
}

/* =============================================================================
   PORTRAIT / MOBILE
   ============================================================================= */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 767.98px) {
  :root {
    /* Stay locked to the global toolbar height token (40px on portrait via os-toolbar.css) */
    --os-filter-control-height: var(--os-erp-toolbar-btn-height, 40px);
    --os-filter-actions-min-height: var(--os-erp-toolbar-btn-height, 40px);
  }

  .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .module-main-filter-form.os-page-filter-row,
  .os-module-toolbar .prs-station-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .os-report-filter-form,
  .os-page-sticky-chrome form.row.g-2,
  .ags-balance-page form.row.g-2,
  .prs-balance-page form.row.g-2,
  .prs-page form.row.g-2 {
    flex-wrap: wrap !important;
  }

  .os-report-filter-form > [class*="col-"],
  .os-page-sticky-chrome form.row.g-2 > [class*="col-"],
  .ags-balance-page form.row.g-2 > [class*="col-"],
  .prs-balance-page form.row.g-2 > [class*="col-"],
  .prs-page form.row.g-2 > [class*="col-"] {
    flex: 1 1 calc(50% - var(--os-filter-bar-gap)) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .module-main-filter-form.os-page-filter-row,
  .os-module-toolbar .prs-station-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .os-report-filter-form > [class*="col-"],
  .os-page-sticky-chrome form.row.g-2 > [class*="col-"],
  .ags-balance-page form.row.g-2 > [class*="col-"],
  .prs-balance-page form.row.g-2 > [class*="col-"],
  .prs-page form.row.g-2 > [class*="col-"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* Kill fixed-width / max-content filter select leftovers */
.os-module-toolbar .module-main-filter-field--year .module-main-filter-select:not([multiple]),
.os-module-toolbar .module-main-filter-field--season .module-main-filter-select:not([multiple]),
.os-module-toolbar .module-main-filter-field:has(#agsYear) .module-main-filter-select:not([multiple]),
.os-module-toolbar .module-main-filter-field:has(#agsSeason) .module-main-filter-select:not([multiple]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  field-sizing: normal !important;
}

/* Native page filters keep the final control box before DX lookup upgrade. */
select.form-select[name="farm"],
select.form-select[name="station"],
select.form-select[name="site"],
select.form-select[name="Item.Farm"],
select.form-select[name="Item.Station"],
select.form-select[name="Item.Site"] {
  height: var(--os-filter-control-height, 36px);
  min-height: var(--os-filter-control-height, 36px);
  max-height: var(--os-filter-control-height, 36px);
  box-sizing: border-box;
}