/*
 * 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);
  /* Keep the Bootstrap/card or page-specific background and foreground. */
  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; }

/* Stage 6: reusable, opt-in layout primitives for data-heavy cabinet pages.
   Bootstrap remains the source of table/card/input behavior; no global overrides.
   Product palettes are owned by Open and Platform respectively. */
.shx-ui-card {
  min-width: 0;
  border-color: var(--bs-border-color, currentColor);
  /* Keep the Bootstrap/card or page-specific background and foreground. */
}
.shx-ui-card__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.shx-ui-card--positive { border-inline-start: .25rem solid var(--bs-success, var(--success, #198754)); }
.shx-ui-card--negative { border-inline-start: .25rem solid var(--bs-danger, var(--danger, #dc3545)); }
.shx-ui-card--caution { border-inline-start: .25rem solid var(--bs-warning, #ffc107); }

.shx-ui-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem; align-items: end; }
.shx-ui-filter__field { min-width: 0; }
.shx-ui-filter__field .form-control, .shx-ui-filter__field .form-select { width: 100%; }
.shx-ui-filter__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.shx-ui-filter__field--check { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; }

.shx-ui-form-field { min-width: 0; }
.shx-ui-form-field__label { display: inline-block; margin-bottom: .25rem; }
.shx-ui-form-field__error { color: var(--bs-danger-text-emphasis, var(--bs-danger, #842029)); font-size: .875rem; margin-top: .25rem; }
.shx-ui-form-field__error ul { margin: 0; padding-inline-start: 1.2rem; }
.shx-ui-form-field:has(.shx-ui-form-field__error) :is(input, select, textarea) { border-color: var(--bs-danger, #dc3545); }

.shx-ui-table-scroll { max-width: 100%; overflow-x: auto; }
.shx-ui-table { width: 100%; vertical-align: middle; }
.shx-ui-table > :not(caption) > * > th {
  font-weight: 600;
  border-bottom-color: var(--bs-border-color, currentColor);
  white-space: normal;
}
.shx-ui-table > :not(caption) > * > td { overflow-wrap: anywhere; }
.shx-ui-table > tbody > tr:focus-within { outline: 1px solid var(--bs-primary, var(--primary, currentColor)); outline-offset: -1px; }
@media (max-width: 575.98px) {
  .shx-ui-filter { grid-template-columns: minmax(0, 1fr); }
  .shx-ui-table-scroll .shx-ui-table { min-width: 32rem; }
}

/* Stage 7: integrate existing Bootstrap row filters and generated django-tables2
   output without changing server-side Form, FilterSet or Table instances. */
.shx-ui-filter-panel { min-width: 0; }
.shx-ui-filter-panel :is(.row, .d-flex) > * { min-width: 0; }
.shx-ui-table-scroll > table,
.shx-ui-table-scroll > .table,
.shx-ui-table-scroll > .table-container table { width: 100%; vertical-align: middle; }
.shx-ui-table-scroll :is(table.table, table.shx-ui-table) th {
  border-bottom-color: var(--bs-border-color, currentColor);
}
.shx-ui-table-scroll :is(table.table, table.shx-ui-table) td { overflow-wrap: anywhere; }

/* Linked cards keep their original destination and keyboard behavior. */
a.shx-ui-card:focus-visible {
  outline: 2px solid var(--bs-primary, var(--primary, #0d6efd));
  outline-offset: 2px;
}

/* Stage 8: opt-in summary figures inside existing Bootstrap cards.
   Typography follows the installation theme; no hardcoded Open/Platform palette. */
.shx-ui-metric-card { min-width: 0; }
.shx-ui-metric-card__label { color: var(--bs-secondary-color, inherit); font-weight: 600; }
.shx-ui-metric-card__value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }