/* System rule: filter/search/action controls share one row at every width. */
#appView
  #mainContent
  :is(
    .cf-order-filters,
    .ps-filters,
    .cf-cash-toolbar,
    .cf-receipt-toolbar,
    .cf-payment-toolbar,
    .cf-report-toolbar,
    .cf-business-toolbar,
    .cf-report-filters,
    .cf-record-filters,
    .cf-status-toolbar,
    .af-filters:not(.af-record-filters),
    .fr-fields,
    .fr-toolbar,
    .fr-record-head,
    .order-toolbar,
    .order-platform-design-toolbar,
    .department-order-toolbar,
    .finance-filterbar,
    .finance-order-filterbar,
    .ops-filterbar,
    .ops-filter-row,
    .filterbar,
    .orders-filterbar,
    .payment-filters,
    .report-filters,
    .recycle-toolbar,
    .archive-toolbar,
    .archive-page-toolbar,
    .page-toolbar,
    .guide-calendar-filter-row,
    .guide-calendar-toolbar,
    #voFilter,
    .vo-library-filters,
    .ao-filter-grid,
    .ao-calendar-toolbar,
    .ao-people-toolbar,
    .ao-personal-filters,
    .ao-purpose-filters,
    .ao-reception-states,
    .knowledge-category-filters,
    .trip-history-toolbar,
    .health-toolbar,
    [data-single-row-toolbar]
  ):not([hidden]):not(.hidden) {
  box-sizing: border-box;
  position: relative;
  contain: inline-size;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 12px;
  min-inline-size: 0 !important;
  inline-size: 100%;
  max-inline-size: 100% !important;
  overflow: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

/* Flatten only structural groups; controls retain their existing DOM and events. */
#appView
  #mainContent
  .cf-order-filters
  :is(
    .cf-order-filter-row,
    .cf-order-filter-controls,
    .cf-order-toolbar-actions,
    .cf-order-filter-actions
  ),
#appView
  #mainContent
  .order-platform-design-toolbar
  :is(.order-platform-filter-fields, .order-platform-shared-search),
#appView #mainContent .af-filters:not(.af-record-filters) .af-filter-actions {
  display: contents !important;
}

#appView #mainContent .order-toolbar .order-filter-more.is-open,
#appView #mainContent .finance-filterbar .finance-mobile-filter-fields.is-open,
#appView #mainContent .finance-filterbar .finance-order-more-filters:not(.hidden),
#appView #mainContent #voFilter .vo-search,
#appView #mainContent #voFilter .vo-filter-fields.is-open {
  display: contents !important;
}

@media (min-width: 761px) {
  #appView #mainContent .order-toolbar .order-filter-more,
  #appView #mainContent .finance-filterbar .finance-mobile-filter-fields,
  #appView #mainContent #voFilter .vo-filter-fields {
    display: contents !important;
  }
}

#appView #mainContent .order-toolbar .order-filter-more > label,
#appView #mainContent .finance-filterbar .finance-mobile-filter-fields > label,
#appView #mainContent .finance-filterbar .finance-order-more-filters > label,
#appView #mainContent #voFilter label {
  flex: 1 0 140px;
  min-inline-size: 120px;
  inline-size: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* The guide date picker must open above the scrolling row, not be clipped by it. */
#appView #mainContent .guide-calendar-toolbar > .archive-segmented-tabs {
  display: flex !important;
  flex: 0 0 auto !important;
  inline-size: max-content !important;
  min-inline-size: max-content !important;
}

#appView #mainContent .guide-calendar-toolbar > .archive-segmented-tabs > button {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  min-inline-size: 44px;
  white-space: nowrap;
}

#appView #mainContent .guide-calendar-toolbar .guide-range-panel {
  position: fixed;
  inset: auto;
  z-index: 21000;
  margin-block-start: 6px;
}

@media (max-width: 760px) {
  #appView #mainContent .guide-calendar-toolbar .guide-range-panel {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

#appView #mainContent .guide-calendar-toolbar .guide-calendar-dates {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  flex: 0 0 auto;
  inline-size: auto;
  margin: 0;
}

#appView #mainContent .guide-calendar-toolbar .guide-calendar-filter-row {
  flex: 0 0 auto;
}

#appView #mainContent .guide-calendar-toolbar > .guide-calendar-dates-compact {
  flex: 0 0 auto;
  inline-size: max-content;
  min-inline-size: max-content;
  max-inline-size: none;
}

#appView #mainContent .guide-calendar-dates-compact > .guide-range-picker,
#appView #mainContent .guide-calendar-dates-compact > button {
  flex: 0 0 auto;
  inline-size: max-content;
  min-inline-size: max-content;
}

#appView #mainContent .guide-calendar-filter-row > label {
  flex: 0 0 150px;
  min-inline-size: 120px;
}

#appView #mainContent .cf-order-filters .cf-status-filter,
#appView
  #mainContent
  :is(
    .order-toolbar,
    .order-platform-design-toolbar,
    .af-filters:not(.af-record-filters),
    .ps-filters,
    .finance-filterbar,
    .finance-order-filterbar,
    .ops-filterbar,
    .filterbar,
    .department-order-toolbar,
    .cf-report-filters,
    .cf-record-filters,
    .fr-fields,
    .ao-filter-grid,
    .vo-filter-fields,
    .vo-library-filters,
    .report-filters,
    .payment-filters,
    .recycle-toolbar
  )
  > :is(label, .cbf-field, .compact-date-range) {
  flex: 1 0 140px;
  inline-size: auto !important;
  min-inline-size: 120px !important;
  max-inline-size: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin-block: 0 !important;
}

#appView #mainContent .order-toolbar .order-filter-more > .compact-date-range {
  flex: 0 0 auto;
  inline-size: 235px !important;
  min-inline-size: 235px;
}

/* Flattened finance groups need the same non-shrinking actions as direct toolbar children. */
#appView #mainContent .finance-filterbar .finance-mobile-filter-fields > button {
  flex: 0 0 auto;
  inline-size: auto !important;
  min-inline-size: 44px;
}
#appView #mainContent .finance-filterbar .finance-order-exception {
  min-block-size: 44px;
}
@media (max-width: 760px) {
  #appView #mainContent .order-toolbar .order-filter-more > .compact-date-range {
    inline-size: 225px !important;
    min-inline-size: 225px;
  }
}

#appView #mainContent .cf-order-filters .cf-status-filter {
  flex: 0 0 148px;
}

#appView #mainContent .cf-order-filters .cf-itinerary-search-box,
#appView #mainContent .ps-filters > label:first-child,
#appView #mainContent .order-platform-design-toolbar .order-search,
#appView #mainContent .order-toolbar > .order-search {
  box-sizing: border-box;
  flex: 2 0 230px !important;
  inline-size: auto !important;
  min-inline-size: 200px !important;
  max-inline-size: none !important;
  margin: 0 !important;
}

#appView
  #mainContent
  .cf-order-filters
  :is(.cf-status-filter select, .cf-btn, .cf-shared-itinerary) {
  block-size: 42px;
  min-block-size: 42px;
}

#appView
  #mainContent
  :is(
    .cf-order-filters,
    .af-filters,
    .ps-filters,
    .order-toolbar,
    .order-platform-design-toolbar,
    .finance-filterbar,
    .finance-order-filterbar,
    .ops-filterbar,
    .filterbar,
    .department-order-toolbar,
    .fr-fields,
    .report-filters,
    .payment-filters,
    .recycle-toolbar,
    .archive-toolbar,
    .archive-page-toolbar,
    .health-toolbar
  )
  :is(button, select, .compact-range-trigger) {
  white-space: nowrap;
}

#appView
  #mainContent
  :is(
    .cf-order-filters,
    .af-filters,
    .ps-filters,
    .order-toolbar,
    .order-platform-design-toolbar,
    .finance-filterbar,
    .finance-order-filterbar,
    .ops-filterbar,
    .filterbar,
    .department-order-toolbar,
    .report-filters,
    .payment-filters,
    .recycle-toolbar,
    .archive-toolbar,
    .archive-page-toolbar,
    .health-toolbar
  )
  > :is(button, a, details) {
  flex: 0 0 auto;
  inline-size: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

#appView #mainContent .cf-order-filters :is(.cf-btn, .cf-shared-itinerary) {
  flex: 0 0 auto;
  margin: 0 !important;
}

#appView #mainContent .cf-order-filters .cf-order-filter-actions {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Legacy progress chips used width: 0 inside a grid; retain readable widths in the row. */
#appView #mainContent .cf-business-toolbar .cf-business-source {
  flex: 0 0 235px;
  min-inline-size: 235px !important;
}

#appView #mainContent .cf-business-toolbar .cf-business-stage {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  inline-size: auto !important;
  min-inline-size: max-content !important;
  gap: 8px;
}

#appView #mainContent .cf-business-toolbar .cf-business-stage > button {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  min-inline-size: 80px !important;
  padding-inline: 14px !important;
  font-size: 14px !important;
  white-space: nowrap;
}

#appView #mainContent .cf-business-toolbar .cf-business-search {
  flex: 1 0 220px !important;
  min-inline-size: 220px !important;
  inline-size: auto !important;
}

#appView
  #mainContent
  :is(
    .order-platform-filter-fields,
    .fr-record-head,
    .fr-record-actions,
    .fr-export,
    .archive-toolbar__actions,
    .archive-page-toolbar__actions,
    .page-toolbar__actions
  ) {
  flex-wrap: nowrap !important;
}

/* Single-row scrolling stays inside the toolbar, including RTL and narrow screens. */
@media (max-width: 760px) {
  #appView #mainContent .cf-order-filters .cf-status-filter {
    flex-basis: 148px;
  }
  #appView #mainContent .fr-fields > :is(label, .cbf-field, .compact-date-range) {
    flex-basis: 150px;
  }
}

/* The three settlement sources share one control grid without changing their fields. */
#appView #mainContent :is(.cf-settlement-toolbar, .af-settlement-toolbar) {
  --settlement-field-width: 160px;
  --settlement-field-height: 44px;
  gap: 12px !important;
}

#appView
  #mainContent
  :is(.cf-settlement-toolbar, .af-settlement-toolbar)[data-single-row-toolbar]
  > :is(label, [data-settlement-field], button) {
  box-sizing: border-box;
  flex: 0 0 var(--settlement-field-width) !important;
  inline-size: var(--settlement-field-width) !important;
  min-inline-size: var(--settlement-field-width) !important;
  max-inline-size: var(--settlement-field-width) !important;
}

#appView
  #mainContent
  :is(.cf-settlement-toolbar, .af-settlement-toolbar)
  :is(label, [data-settlement-field])
  > :is(input, select, button, .settlement-control, .settlement-combobox) {
  box-sizing: border-box;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  block-size: var(--settlement-field-height) !important;
  min-block-size: var(--settlement-field-height) !important;
}

#appView #mainContent :is(.cf-settlement-toolbar, .af-settlement-toolbar) > button {
  block-size: var(--settlement-field-height) !important;
}

#appView
  #mainContent
  :is(.cf-settlement-toolbar, .af-settlement-toolbar)
  :is(.settlement-control, .settlement-combobox) {
  display: flex;
  align-items: stretch;
  gap: 0;
}

#appView
  #mainContent
  :is(.cf-settlement-toolbar, .af-settlement-toolbar)
  :is(.settlement-control, .settlement-combobox)
  > input {
  flex: 1 1 0 !important;
  inline-size: 0 !important;
  min-inline-size: 0 !important;
}

#appView
  #mainContent
  :is(.cf-settlement-toolbar, .af-settlement-toolbar)
  :is(.settlement-control, .settlement-combobox)
  > button {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  min-inline-size: 44px !important;
}

/* Acceptance 2026-10-17 (1-2, 2-6): at desktop widths the settlement bar keeps its
   search box and 查询 in view. Fields share one narrower width (still identical across sources), action buttons size
   to their label, and the search field takes the remaining space. Narrow screens
   keep the fixed grid and slide inside the bar. */
@media (min-width: 761px) {
  #appView #mainContent :is(.cf-settlement-toolbar, .af-settlement-toolbar) {
    --settlement-field-width: 124px;
    gap: 10px !important;
  }
  #appView
    #mainContent
    :is(.cf-settlement-toolbar, .af-settlement-toolbar)[data-single-row-toolbar]
    > button[type] {
    flex: 0 0 auto !important;
    inline-size: auto !important;
    min-inline-size: 80px !important;
    max-inline-size: none !important;
    padding-inline: 14px;
    white-space: nowrap;
  }
  #appView #mainContent .cf-settlement-toolbar[data-single-row-toolbar] > .cf-settlement-search {
    flex: 1 1 200px !important;
    inline-size: auto !important;
    min-inline-size: 124px !important;
    max-inline-size: 360px !important;
  }
}

/* Arabic accounts show a Chinese company name through a read-only stand-in before
   the ▾ toggle; it shares the field like the input it replaces. */
#appView
  #mainContent
  :is(.cf-settlement-toolbar, .af-settlement-toolbar)
  .settlement-combobox
  > :not(:last-child) {
  flex: 1 1 0 !important;
  inline-size: 0 !important;
  min-inline-size: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}