/* Shared category and mode switches, matching the approved hall category bar.
   Keep navigation, action buttons and multi-select number grids separate. */
body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
  height: auto;
  min-height: 32px;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 2px;
  background: #f2f3f5;
  box-shadow: none;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(button, a, label) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 54px;
  height: auto;
  min-height: 26px;
  margin: 0;
  padding: 2px 12px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  color: #4e5969;
  font-family: var(--skin-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(button, a, label) + :is(button, a, label)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  width: 0;
  height: 14px;
  border-left: 1px solid #e5e6eb;
  background: none;
  transform: translateY(-50%);
  pointer-events: none;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(button, a, label):hover {
  background: #f7f8fa;
  color: #263244;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], label:has(input:checked)) {
  background: #fff;
  color: #165dff;
  font-weight: 400;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], label:has(input:checked))::before,
body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(.active, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], label:has(input:checked)) + :is(button, a, label)::before {
  display: none;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(button, a, label):focus-visible,
body :is(#app, dialog) .flight-message-order > label:has(input:focus-visible) {
  outline: 2px solid #165dff;
  outline-offset: -2px;
}

body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(button, a):disabled {
  color: #86909c;
  cursor: default;
  opacity: .5;
}

body :is(#app, dialog) .flight-message-order > label > span {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  box-shadow: none;
}

body :is(#app, dialog) .flight-config-tabs {
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  body :is(#app, dialog) :is(.hall-category-options, .stat-center-options, .stat-scopes, .om-dimensions, .st-types, .ab-categories, .hu-create-tabs, .st-direction, .flight-config-tabs, .flight-message-order) > :is(button, a, label) {
    min-width: 46px;
    min-height: 30px;
    padding: 4px 9px;
  }
}