/* FuelFlow layout framework — the Bootstrap subset this product actually uses.
 *
 * Bootstrap 5.3 was loaded from a CDN for 8,511 class usages across 159
 * templates. Rewriting those templates would have meant touching every page in
 * the product to change nothing a user can see. This file does the opposite: it
 * implements exactly the classes the templates already use, from tokens.css, so
 * the markup is untouched and the dependency is gone.
 *
 * The utility and grid sections are generated (scripts/gen_framework.py) from an
 * inventory of the classes in use, then whole families are emitted rather than
 * only the observed members — several class names are built at run time
 * (`col-lg-{{ '8' if ... }}`, `text-bg-{{ badge }}`), and a scan of literal text
 * cannot enumerate those.
 *
 * Bootstrap's spacing scale lands exactly on this product's 4px token scale
 * (0 / 4 / 8 / 16 / 24 / 48px), so the swap changes no measurement.
 *
 * Component class names and the .fade/.show state pairs are kept as Bootstrap
 * named them, because the markup already uses them and bs-compat.js now drives
 * them.
 *
 * No colour literals: every value comes from tokens.css. That matters more here
 * than anywhere, because a filled control needs its text to invert WITH its
 * fill. Pairing an inverting background with a fixed white broke three buttons
 * and the "dark" pill in dark mode before this was caught.
 */

/* ---- spacing ---- */
.m-0 { margin: 0 !important; }
.m-3 { margin: var(--s-4) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-4) !important; }
.mb-4 { margin-bottom: var(--s-6) !important; }
.me-1 { margin-inline-end: var(--s-1) !important; }
.me-2 { margin-inline-end: var(--s-2) !important; }
.me-auto { margin-inline-end: auto !important; }
.ms-1 { margin-inline-start: var(--s-1) !important; }
.ms-2 { margin-inline-start: var(--s-2) !important; }
.ms-auto { margin-inline-start: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--s-1) !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-4) !important; }
.mt-4 { margin-top: var(--s-6) !important; }
.mt-5 { margin-top: var(--s-12) !important; }
.mt-auto { margin-top: auto !important; }
.mx-auto { margin-inline-start: auto !important;  margin-inline-end: auto !important; }
.my-1 { margin-top: var(--s-1) !important;  margin-bottom: var(--s-1) !important; }
.my-2 { margin-top: var(--s-2) !important;  margin-bottom: var(--s-2) !important; }
.my-3 { margin-top: var(--s-4) !important;  margin-bottom: var(--s-4) !important; }
.my-4 { margin-top: var(--s-6) !important;  margin-bottom: var(--s-6) !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: var(--s-2) !important; }
.p-3 { padding: var(--s-4) !important; }
.p-4 { padding: var(--s-6) !important; }
.p-5 { padding: var(--s-12) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-2 { padding-bottom: var(--s-2) !important; }
.pb-3 { padding-bottom: var(--s-4) !important; }
.pe-0 { padding-inline-end: 0 !important; }
.pe-2 { padding-inline-end: var(--s-2) !important; }
.pe-3 { padding-inline-end: var(--s-4) !important; }
.ps-0 { padding-inline-start: 0 !important; }
.ps-2 { padding-inline-start: var(--s-2) !important; }
.ps-3 { padding-inline-start: var(--s-4) !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--s-1) !important; }
.pt-2 { padding-top: var(--s-2) !important; }
.pt-3 { padding-top: var(--s-4) !important; }
.px-0 { padding-inline-start: 0 !important;  padding-inline-end: 0 !important; }
.px-1 { padding-inline-start: var(--s-1) !important;  padding-inline-end: var(--s-1) !important; }
.px-2 { padding-inline-start: var(--s-2) !important;  padding-inline-end: var(--s-2) !important; }
.px-3 { padding-inline-start: var(--s-4) !important;  padding-inline-end: var(--s-4) !important; }
.py-0 { padding-top: 0 !important;  padding-bottom: 0 !important; }
.py-1 { padding-top: var(--s-1) !important;  padding-bottom: var(--s-1) !important; }
.py-2 { padding-top: var(--s-2) !important;  padding-bottom: var(--s-2) !important; }
.py-3 { padding-top: var(--s-4) !important;  padding-bottom: var(--s-4) !important; }
.py-4 { padding-top: var(--s-6) !important;  padding-bottom: var(--s-6) !important; }
.py-5 { padding-top: var(--s-12) !important;  padding-bottom: var(--s-12) !important; }

/* ---- display ---- */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }

/* ---- flexbox ---- */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-self-center { align-self: center !important; }
.align-middle { vertical-align: middle !important; }
.ms-auto { margin-inline-start: auto !important; }
.me-auto { margin-inline-end: auto !important; }
.gap-1 { gap: var(--s-1) !important; }
.gap-3 { gap: var(--s-4) !important; }

/* ---- typography ---- */
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-truncate { overflow: hidden !important;  text-overflow: ellipsis !important;  white-space: nowrap !important; }
.fst-italic { font-style: italic !important; }
.list-unstyled { margin: 0 !important;  padding: 0 !important;  list-style: none !important; }
.img-fluid { max-width: 100% !important;  height: auto !important; }
.fw-bold { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }
.fs-1 { font-size: var(--fs-32) !important; }
.fs-2 { font-size: var(--fs-28) !important; }
.fs-4 { font-size: var(--fs-18) !important; }
.fs-5 { font-size: var(--fs-16) !important; }
.h4 { font-size: var(--fs-18) !important;  font-weight: var(--fw-semibold) !important;  line-height: var(--lh-tight) !important; }
.h5 { font-size: var(--fs-16) !important;  font-weight: var(--fw-semibold) !important;  line-height: var(--lh-tight) !important; }
.h6 { font-size: var(--fs-14) !important;  font-weight: var(--fw-semibold) !important;  line-height: var(--lh-tight) !important; }
.lh-sm { line-height: var(--lh-tight) !important; }
.display-4 { font-size: 2.5rem !important;  font-weight: var(--fw-semibold) !important;  line-height: var(--lh-tight) !important; }
.display-6 { font-size: 1.75rem !important;  font-weight: var(--fw-semibold) !important;  line-height: var(--lh-tight) !important; }

/* ---- colour utilities ---- */
.bg-dark { background-color: var(--text) !important; }
.bg-primary { background-color: var(--brand-600) !important; }
.bg-secondary { background-color: var(--text-muted) !important; }
.bg-success { background-color: var(--pos-600) !important; }
.bg-warning { background-color: var(--warn-700) !important; }
.text-dark { color: var(--text) !important; }
.text-info { color: var(--info-600) !important; }
.text-primary { color: var(--brand-600) !important; }
.text-secondary { color: var(--text-muted) !important; }
.text-warning { color: var(--warn-700) !important; }

/* ---- borders, radius, shadow ---- */
.border { border: 1px solid var(--border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--border) !important; }
.border-bottom { border-bottom: 1px solid var(--border) !important; }
.border-start { border-inline-start: 1px solid var(--border) !important; }
.border-top-0 { border-top: 0 !important; }
.rounded { border-radius: var(--r-sm) !important; }
.rounded-3 { border-radius: var(--r-lg) !important; }
.rounded-pill { border-radius: var(--r-pill) !important; }

/* ---- sizing, position, misc ---- */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.position-relative { position: relative !important; }
.visually-hidden { position: absolute !important;  width: 1px !important;  height: 1px !important;  padding: 0 !important;  margin: -1px !important;  overflow: hidden !important;  clip: rect(0,0,0,0) !important;  white-space: nowrap !important;  border: 0 !important; }
.container { width: 100% !important;  max-width: var(--content-max) !important;  margin-inline: auto !important;  padding-inline: var(--s-4) !important; }
.container-xl { width: 100% !important;  max-width: var(--content-max) !important;  margin-inline: auto !important;  padding-inline: var(--s-4) !important; }

/* ---- grid: 12 columns, gutters, five breakpoints ---- */
.row {
  --gutter-x: var(--s-4);
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-inline: calc(-.5 * var(--gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: calc(var(--gutter-x) * .5);
  margin-top: var(--gutter-y);
  /* Without this a grid column refuses to be narrower than its contents and
     pushes the page sideways on a phone — the defect this product had on
     seven admin pages before the port. */
  min-width: 0;
}
.g-0, .gx-0 { --gutter-x: 0; }
.g-0, .gy-0 { --gutter-y: 0; }
.g-1, .gx-1 { --gutter-x: var(--s-1); }
.g-1, .gy-1 { --gutter-y: var(--s-1); }
.g-2, .gx-2 { --gutter-x: var(--s-2); }
.g-2, .gy-2 { --gutter-y: var(--s-2); }
.g-3, .gx-3 { --gutter-x: var(--s-4); }
.g-3, .gy-3 { --gutter-y: var(--s-4); }
.g-4, .gx-4 { --gutter-x: var(--s-6); }
.g-4, .gy-4 { --gutter-y: var(--s-6); }
.g-5, .gx-5 { --gutter-x: var(--s-12); }
.g-5, .gy-5 { --gutter-y: var(--s-12); }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333%; }
.col-2 { flex: 0 0 auto; width: 16.6667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.3333%; }
.col-5 { flex: 0 0 auto; width: 41.6667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.3333%; }
.col-8 { flex: 0 0 auto; width: 66.6667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.33333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.33333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.33333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.33333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1400px) {
  .col-xxl { flex: 1 0 0%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1 { flex: 0 0 auto; width: 8.33333%; }
  .col-xxl-2 { flex: 0 0 auto; width: 16.6667%; }
  .col-xxl-3 { flex: 0 0 auto; width: 25%; }
  .col-xxl-4 { flex: 0 0 auto; width: 33.3333%; }
  .col-xxl-5 { flex: 0 0 auto; width: 41.6667%; }
  .col-xxl-6 { flex: 0 0 auto; width: 50%; }
  .col-xxl-7 { flex: 0 0 auto; width: 58.3333%; }
  .col-xxl-8 { flex: 0 0 auto; width: 66.6667%; }
  .col-xxl-9 { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.3333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.6667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
}

/* ---- responsive display and alignment ---- */
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-grid { display: grid !important; }
  .d-sm-table { display: table !important; }
  .d-sm-table-cell { display: table-cell !important; }
  .flex-sm-row { flex-direction: row !important; }
  .flex-sm-column { flex-direction: column !important; }
  .text-sm-start { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-end { text-align: right !important; }
  .ms-sm-auto { margin-inline-start: auto !important; }
  .me-sm-auto { margin-inline-end: auto !important; }
}
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-grid { display: grid !important; }
  .d-md-table { display: table !important; }
  .d-md-table-cell { display: table-cell !important; }
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .text-md-start { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-end { text-align: right !important; }
  .ms-md-auto { margin-inline-start: auto !important; }
  .me-md-auto { margin-inline-end: auto !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
  .d-lg-table { display: table !important; }
  .d-lg-table-cell { display: table-cell !important; }
  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-column { flex-direction: column !important; }
  .text-lg-start { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-end { text-align: right !important; }
  .ms-lg-auto { margin-inline-start: auto !important; }
  .me-lg-auto { margin-inline-end: auto !important; }
}
@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-flex { display: flex !important; }
  .d-xl-inline-flex { display: inline-flex !important; }
  .d-xl-grid { display: grid !important; }
  .d-xl-table { display: table !important; }
  .d-xl-table-cell { display: table-cell !important; }
  .flex-xl-row { flex-direction: row !important; }
  .flex-xl-column { flex-direction: column !important; }
  .text-xl-start { text-align: left !important; }
  .text-xl-center { text-align: center !important; }
  .text-xl-end { text-align: right !important; }
  .ms-xl-auto { margin-inline-start: auto !important; }
  .me-xl-auto { margin-inline-end: auto !important; }
}
@media (min-width: 1400px) {
  .d-xxl-none { display: none !important; }
  .d-xxl-block { display: block !important; }
  .d-xxl-inline { display: inline !important; }
  .d-xxl-inline-block { display: inline-block !important; }
  .d-xxl-flex { display: flex !important; }
  .d-xxl-inline-flex { display: inline-flex !important; }
  .d-xxl-grid { display: grid !important; }
  .d-xxl-table { display: table !important; }
  .d-xxl-table-cell { display: table-cell !important; }
  .flex-xxl-row { flex-direction: row !important; }
  .flex-xxl-column { flex-direction: column !important; }
  .text-xxl-start { text-align: left !important; }
  .text-xxl-center { text-align: center !important; }
  .text-xxl-end { text-align: right !important; }
  .ms-xxl-auto { margin-inline-start: auto !important; }
  .me-xxl-auto { margin-inline-end: auto !important; }
}

/* ---- contextual pill colours ----
 * text-bg-* is built at runtime by the status_badge filter, so every tone it
 * can emit has to exist here. Paired background and foreground, both from
 * tokens, so they track the colour mode.
 */
.text-bg-primary { background-color: var(--brand-50) !important;  color: var(--brand-700) !important;  border-color: var(--brand-200) !important; }
.bg-primary-subtle { background-color: var(--brand-50) !important; }
.text-primary-emphasis { color: var(--brand-700) !important; }
.border-primary { border-color: var(--brand-200) !important; }
.text-bg-secondary { background-color: var(--bg-sunken) !important;  color: var(--text-muted) !important;  border-color: var(--border) !important; }
.bg-secondary-subtle { background-color: var(--bg-sunken) !important; }
.text-secondary-emphasis { color: var(--text-muted) !important; }
.border-secondary { border-color: var(--border) !important; }
.text-bg-success { background-color: var(--pos-50) !important;  color: var(--pos-700) !important;  border-color: var(--pos-200) !important; }
.bg-success-subtle { background-color: var(--pos-50) !important; }
.text-success-emphasis { color: var(--pos-700) !important; }
.border-success { border-color: var(--pos-200) !important; }
.text-bg-danger { background-color: var(--neg-50) !important;  color: var(--neg-700) !important;  border-color: var(--neg-200) !important; }
.bg-danger-subtle { background-color: var(--neg-50) !important; }
.text-danger-emphasis { color: var(--neg-700) !important; }
.border-danger { border-color: var(--neg-200) !important; }
.text-bg-warning { background-color: var(--warn-50) !important;  color: var(--warn-700) !important;  border-color: var(--warn-200) !important; }
.bg-warning-subtle { background-color: var(--warn-50) !important; }
.text-warning-emphasis { color: var(--warn-700) !important; }
.border-warning { border-color: var(--warn-200) !important; }
.text-bg-info { background-color: var(--info-50) !important;  color: var(--info-700) !important;  border-color: var(--info-200) !important; }
.bg-info-subtle { background-color: var(--info-50) !important; }
.text-info-emphasis { color: var(--info-700) !important; }
.border-info { border-color: var(--info-200) !important; }
.text-bg-light { background-color: var(--bg-sunken) !important;  color: var(--text-muted) !important;  border-color: var(--border) !important; }
.bg-light-subtle { background-color: var(--bg-sunken) !important; }
.text-light-emphasis { color: var(--text-muted) !important; }
.border-light { border-color: var(--border) !important; }
/* Paired so both halves invert together: --n-0 is white in both modes,
   so pairing it with an inverting background breaks in dark. */
.text-bg-dark { background-color: var(--n-700) !important;  color: var(--bg-surface) !important;  border-color: var(--n-700) !important; }
.bg-dark-subtle { background-color: var(--bg-sunken) !important; }
.text-dark-emphasis { color: var(--text) !important; }
.border-dark { border-color: var(--n-800) !important; }
.bg-body-tertiary { background-color: var(--bg-sunken) !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.align-baseline { vertical-align: baseline !important; }

/* ---- components Bootstrap was the only source of ---------------------------
 * styles.css already restyles .btn, .card, .form-control, .table, .alert,
 * .dropdown-menu, .modal-content and .list-group. What follows is the rest:
 * the structural pieces those overrides assumed Bootstrap would supply.
 */

/* Modal. The class names and the .fade/.show state pair are Bootstrap's,
   because its JavaScript toggles them — see ux.js for the shim that replaces
   that JavaScript while keeping the same contract, so no template changes. */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal.show { display: block; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dialog) - 1);
  background: rgba(3, 7, 18, .55);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.modal-backdrop.show { opacity: 1; }
.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: var(--s-6) auto;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: translateY(-8px);
  transition: transform var(--dur) var(--ease);
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--s-12));
}
.modal-dialog-scrollable { height: calc(100% - var(--s-12)); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }
.modal-sm { max-width: 360px; }
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.modal-body { position: relative; flex: 1 1 auto; padding: var(--s-4); }
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-4);
  border-top: 1px solid var(--border);
}
@media (max-width: 576px) {
  .modal-dialog { margin: var(--s-2); }
  .modal-lg, .modal-xl { max-width: none; }
}
body.modal-open { overflow: hidden; }

/* The close control is an icon button, so it needs a real accessible name in
   the markup — every use in this product already carries aria-label. */
.btn-close {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { background: var(--bg-hover); color: var(--text); }
.btn-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Dropdown. .show is toggled by the shim, as Bootstrap's JS did. */
.dropdown, .dropup { position: relative; }
.dropdown-menu {
  position: absolute;
  z-index: var(--z-drawer);
  display: none;
  min-width: 190px;
  margin-top: var(--s-1);
  padding: var(--s-1);
  list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.dropdown-menu.show { display: block; }
.dropdown-menu-end { right: 0; left: auto; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font-size: var(--fs-13);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); }
.dropdown-item.active { background: var(--bg-selected); color: var(--brand-700); }
.dropdown-header {
  padding: var(--s-2) var(--s-3);
  color: var(--text-subtle);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.dropdown-divider { height: 0; margin: var(--s-1) 0; border-top: 1px solid var(--border); }
.dropdown-toggle::after {
  display: inline-block;
  margin-left: var(--s-2);
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  vertical-align: .255em;
}
.dropdown-toggle-split { padding-inline: var(--s-2); }
.dropdown-toggle-split::after { margin-left: 0; }

/* Button group: buttons joined into one control, so only the outer corners
   round and the shared borders collapse. */
.btn-group { position: relative; display: inline-flex; vertical-align: middle; }
.btn-group > .btn { position: relative; flex: 0 1 auto; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:hover, .btn-group > .btn:focus { z-index: 1; }
.btn-group-sm > .btn { min-height: 28px; padding: 6px 12px; font-size: var(--fs-12); }

/* Nav / tabs / pills */
.nav { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 0; margin: 0; list-style: none; }
.nav-link {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-13);
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link.active { background: var(--bg-selected); color: var(--brand-700); font-weight: var(--fw-medium); }
.nav-link.disabled { color: var(--text-subtle); pointer-events: none; }
.nav-tabs { gap: 0; border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { border: 1px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; margin-bottom: -1px; }
.nav-tabs .nav-link.active { background: var(--bg-surface); border-color: var(--border) var(--border) var(--bg-surface); color: var(--text); }
.nav-pills .nav-link.active { background: var(--brand-600); color: var(--text-invert); }
.nav-sm .nav-link { padding: var(--s-1) var(--s-2); font-size: var(--fs-12); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* Pagination */
.pagination { display: flex; gap: var(--s-1); padding: 0; margin: 0; list-style: none; }
.page-link {
  display: block;
  min-width: var(--control-h);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text);
  font-size: var(--fs-13);
  text-align: center;
  text-decoration: none;
}
.page-link:hover { background: var(--bg-hover); }
.page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); color: var(--text-invert); }
.page-item.disabled .page-link { color: var(--text-subtle); pointer-events: none; }
.pagination-sm .page-link { padding: 2px var(--s-2); font-size: var(--fs-12); }

/* Progress */
.progress {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--brand-600);
  color: var(--text-invert);
  font-size: var(--fs-11);
  text-align: center;
  transition: width var(--dur) var(--ease);
}

/* Spinner */
@keyframes spinner-border { to { transform: rotate(360deg); } }
.spinner-border {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: .2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
  vertical-align: -.125em;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: .15em; }

/* Base box rules Bootstrap owned. styles.css paints these controls — colour,
   border, padding — but never sized them, because Bootstrap's width:100% was
   always underneath. Without it an input falls back to its intrinsic size and
   overflows its column: measured at 9-16px on two filter forms.
   The lesson worth keeping: "already styled locally" is not the same as
   "fully styled". */
.form-control, .form-select {
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: var(--lh-normal);
  appearance: none;
}
.form-select {
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
textarea.form-control { min-height: 76px; }

/* Forms Bootstrap sized for us */
.form-control-sm, .form-select-sm { min-height: 28px; padding: 4px var(--s-2); font-size: var(--fs-12); }
.form-control-lg, .form-select-lg { min-height: 42px; padding: var(--s-2) var(--s-3); font-size: var(--fs-16); }
.form-check { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); }
.form-check-input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand-600); flex: none; }
.form-check-label { font-size: var(--fs-13); cursor: pointer; }
.form-text { color: var(--text-muted); font-size: var(--fs-12); }
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > * { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .btn, .input-group > .input-group-text { flex: 0 0 auto; width: auto; }
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: var(--fs-13);
}
.input-group-sm > * { min-height: 28px; font-size: var(--fs-12); }

/* The wrapper 53 templates put round a wide table. Our CSS referenced it once,
   inside `.table-responsive:has(+ .as-cards)`, which was enough to make an
   inventory of "classes our stylesheets mention" think it was ours — it was
   not. Bootstrap supplied the scrolling, and without this rule a wide report
   table pushed the whole document sideways at desktop width. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Card footer and table sizing that styles.css did not cover */
.card-footer {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}
/* A dense table is the same table at 60% of the row step, so the density
   toggle still moves it and the gutters still meet the panel edge. */
.table-sm > :not(caption) > * > * { padding: calc(var(--row-py) * .6) var(--s-3); }
.table-sm > :not(caption) > * > :first-child { padding-left: var(--table-gutter); }
.table-sm > :not(caption) > * > :last-child { padding-right: var(--table-gutter); }
.table-light > :not(caption) > * > *, tr.table-light > * { background: var(--bg-sunken); }

/* List group. styles.css sets the item's padding and border colour but never
   the structure — Bootstrap supplied that. Same trap as .table-responsive. */
.list-group { display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; border-radius: var(--r-md); }
.list-group-item {
  position: relative;
  display: block;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--r-md) var(--r-md); }
.list-group-item.active { background: var(--bg-selected); color: var(--brand-700); }
.list-group-flush { border-radius: 0; }
.list-group-flush > .list-group-item { border-inline: 0; border-radius: 0; }

/* Toggle switch. styles.css colours the checked state; the control itself —
   the track and the travelling thumb — was Bootstrap's. */
.form-switch { padding-left: 0; }
.form-switch .form-check-input {
  width: 34px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  background-image: radial-gradient(circle 7px at 11px 50%, var(--n-0) 99%, transparent 100%);
  background-repeat: no-repeat;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), background-position var(--dur) var(--ease);
}
.form-switch .form-check-input:checked {
  background-image: radial-gradient(circle 7px at 23px 50%, var(--n-0) 99%, transparent 100%);
}
.form-switch .form-check-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Collapse: the shim toggles .show, as Bootstrap's JS did. */
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height var(--dur) var(--ease); }

/* Alert tones styles.css did not define */
.alert-primary { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.alert-secondary { background: var(--bg-sunken); border-color: var(--border); color: var(--text-muted); }

/* Solid and outline button tones */
.btn-secondary { background: var(--bg-sunken); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-warning { background: var(--warn-600); border-color: var(--warn-600); color: var(--text-invert); }
.btn-warning:hover { background: var(--warn-700); border-color: var(--warn-700); }
.btn-outline-primary { background: transparent; border-color: var(--brand-600); color: var(--brand-600); }
.btn-outline-primary:hover { background: var(--brand-600); color: var(--text-invert); }
.btn-outline-success { background: transparent; border-color: var(--pos-600); color: var(--pos-700); }
.btn-outline-success:hover { background: var(--pos-600); color: var(--text-invert); }
.btn-outline-warning { background: transparent; border-color: var(--warn-600); color: var(--warn-700); }
.btn-outline-warning:hover { background: var(--warn-600); color: var(--text-invert); }