/*
 * Shared semantic status badges. Source: existing ShariX Open shx-badge
 * contract. Product colors still come from each installation's base_colors.css
 * plus its optional theme. Legacy Bootstrap badges are NOT restyled here.
 * The asset is opt-in until Open/Platform roots migrate their legacy rules.
 */
.shx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  max-width: 100%;
  padding: .15rem .45rem;
  border: 1px solid currentColor;
  border-radius: .4rem;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.shx-badge--success {
  background: var(--success-bg, var(--bs-success-bg-subtle, #d1e7dd));
  color: var(--success-text, var(--bs-success-text-emphasis, #0a3622));
}
.shx-badge--danger {
  background: var(--danger-bg, var(--bs-danger-bg-subtle, #f8d7da));
  color: var(--danger-text, var(--bs-danger-text-emphasis, #58151c));
}
.shx-badge--warning {
  background: var(--warning-bg, var(--bs-warning-bg-subtle, #fff3cd));
  color: var(--warning-text, var(--bs-warning-text-emphasis, #664d03));
}
.shx-badge--info {
  background: var(--info-bg, var(--bs-info-bg-subtle, #cff4fc));
  color: var(--info-text, var(--bs-info, #0dcaf0));
}
.shx-badge--primary {
  background: var(--bs-primary-bg-subtle, #cfe2ff);
  color: var(--bs-primary, #0d6efd);
}
.shx-badge--neutral,
.shx-badge--secondary {
  background: var(--bs-gray-100, var(--bs-secondary-bg, #e2e3e5));
  color: var(--bs-gray-700, var(--bs-secondary-color, #495057));
}

/* Opt-in shared variants of existing Open search/switcher/page-size patterns.
   Themes control color through assembly-owned tokens; no copied product palette. */
.shx-ui-switcher { display: inline-flex; flex-wrap: wrap; gap: .25rem; max-width: 100%; }
.shx-ui-switcher .shx-ui-switcher__item {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .45rem .8rem; border-radius: .5rem;
  border: 1px solid var(--bs-border-color, currentColor);
  background: var(--bs-body-bg, transparent);
  color: var(--bs-body-color, inherit);
  text-decoration: none; font: inherit; cursor: pointer;
}
.shx-ui-switcher .shx-ui-switcher__item.active {
  color: var(--bs-primary, var(--primary, currentColor));
  border-color: var(--bs-primary, var(--primary, currentColor));
  background: var(--bs-primary-bg-subtle, transparent);
}
.shx-ui-switcher .shx-ui-switcher__item:disabled { opacity: .55; cursor: not-allowed; }
.shx-ui-switcher .shx-ui-switcher__item:focus-visible { outline: 2px solid var(--bs-primary, currentColor); outline-offset: 2px; }
.shx-ui-header-search { position: relative; display: flex; align-items: center; max-width: 25rem; width: 100%; }
.shx-ui-header-search .shx-ui-header-search__icon { position: absolute; left: .75rem; pointer-events: none; color: var(--bs-secondary-color, #6c757d); }
.shx-ui-header-search input[type="search"] { width: 100%; padding-left: 2.4rem; }
.shx-ui-page-size { display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.shx-ui-page-size .form-select { width: auto; min-width: 5.5rem; }

.shx-ui-page-help { display: grid; gap: 1rem; }
.shx-ui-page-help .shx-page-help-section { min-width: 0; }
.shx-ui-page-help .shx-page-help-heading { font-size: 1.05rem; margin-bottom: .45rem; }
.shx-ui-page-help .shx-page-help-term { margin-bottom: .4rem; }
.shx-ui-page-help .shx-page-help-workflow { padding-left: 1.35rem; }
.shx-ui-page-help .shx-page-help-sources a { overflow-wrap: anywhere; }