/*!
 * inventory.css: Bootstrap 5.3.8 dressed in the Docs/ui design tokens (P0-14, design system v2 = P1-20/ADR 0028).
 *
 * Load order (Views/layouts/_head.php):
 *   vendor/fonts/fonts.css → vendor/bootstrap/css/bootstrap.min.css → css/inventory-tokens.css → css/inventory.css
 *
 * How: Bootstrap is never edited or recompiled (no Node, ENV-WINDOWS rule 10). Its global variables (--bs-*) are
 * re-pointed at our tokens on :root, and each component's own variables (--bs-btn-*, --bs-card-*, …) on the
 * component class, so switching data-theme re-colours everything at once. Bootstrap's *-rgb variables cannot be
 * derived from a token, so the colour utilities that read them are overridden directly (section 5).
 *
 * Rules: values come from var(--token) only — no hex/rgb literals here (scripts/qa-token-scan.php); the only
 * literal lengths are 1px/2px strokes and unitless factors. Component styles of the kit (Views/_components, st-*
 * status pills, DataTable, …) are added by P0-16; this file stays the Bootstrap mapping + base typography.
 */

/* ============================================================ 1. theme plumbing */
/* Native controls, scrollbars and Bootstrap's own dark assets follow the effective theme
   (inventory-theme.js mirrors it to data-bs-theme). */
:root{color-scheme:light}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){color-scheme:dark} }
:root[data-theme="dark"],
:root[data-theme="warehouse"]{color-scheme:dark}

/* ============================================================ 2. Bootstrap globals → tokens */
:root,
[data-bs-theme]{
  /* type */
  --bs-font-sans-serif:var(--f-sans);
  --bs-font-monospace:var(--f-mono);
  --bs-body-font-family:var(--f-sans);
  --bs-body-font-size:var(--t-md);
  --bs-body-font-weight:400;
  --bs-body-line-height:var(--lh-body);

  /* surfaces and ink */
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--bg);
  --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--ink-3);
  --bs-secondary-bg:var(--line);
  --bs-tertiary-color:var(--ink-3);
  --bs-tertiary-bg:var(--surface-2);
  --bs-heading-color:inherit;
  --bs-link-color:var(--primary);
  --bs-link-hover-color:var(--primary-hover);
  --bs-code-color:inherit;
  --bs-highlight-color:var(--ink);
  --bs-highlight-bg:var(--c-amber-100);

  /* lines, radii, shadows */
  --bs-border-color:var(--line);
  --bs-border-color-translucent:var(--line);
  --bs-border-radius:var(--r);
  --bs-border-radius-sm:var(--r-sm);
  --bs-border-radius-lg:var(--r-lg);
  --bs-border-radius-xl:var(--r-lg);
  --bs-border-radius-xxl:var(--r-lg);
  --bs-border-radius-2xl:var(--r-lg);
  --bs-border-radius-pill:var(--r-pill);
  --bs-box-shadow:var(--sh-2);
  --bs-box-shadow-sm:var(--sh-1);
  --bs-box-shadow-lg:var(--sh-3);
  --bs-box-shadow-inset:none;

  /* focus + validation */
  --bs-focus-ring-width:2px;
  --bs-focus-ring-opacity:1;
  --bs-focus-ring-color:var(--focus);
  --bs-form-valid-color:var(--c-ok-fg);
  --bs-form-valid-border-color:var(--c-ok);
  --bs-form-invalid-color:var(--c-err-fg);
  --bs-form-invalid-border-color:var(--c-err);

  /* theme colours (one brand colour + 4 semantic, spec O2) */
  --bs-primary:var(--primary);
  --bs-secondary:var(--ink-3);
  --bs-success:var(--c-ok);
  --bs-info:var(--c-info);
  --bs-warning:var(--c-warn);
  --bs-danger:var(--c-err);
  --bs-light:var(--surface-2);
  --bs-dark:var(--ink);

  --bs-primary-text-emphasis:var(--primary-soft-ink);
  --bs-primary-bg-subtle:var(--primary-soft);
  --bs-primary-border-subtle:var(--c-brand-200);
  --bs-secondary-text-emphasis:var(--ink-2);
  --bs-secondary-bg-subtle:var(--surface-2);
  --bs-secondary-border-subtle:var(--line-strong);
  --bs-success-text-emphasis:var(--c-ok-fg);
  --bs-success-bg-subtle:var(--c-ok-bg);
  --bs-success-border-subtle:var(--c-ok);
  --bs-info-text-emphasis:var(--c-info-fg);
  --bs-info-bg-subtle:var(--c-info-bg);
  --bs-info-border-subtle:var(--c-info);
  --bs-warning-text-emphasis:var(--c-warn-fg);
  --bs-warning-bg-subtle:var(--c-warn-bg);
  --bs-warning-border-subtle:var(--c-warn);
  --bs-danger-text-emphasis:var(--c-err-fg);
  --bs-danger-bg-subtle:var(--c-err-bg);
  --bs-danger-border-subtle:var(--c-err);
  --bs-light-text-emphasis:var(--ink-2);
  --bs-light-bg-subtle:var(--surface-2);
  --bs-light-border-subtle:var(--line);
  --bs-dark-text-emphasis:var(--ink);
  --bs-dark-bg-subtle:var(--line);
  --bs-dark-border-subtle:var(--line-strong);
}

/* ============================================================ 3. base (Docs/ui/styleguide.html "base") */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Thai never goes below line-height 1.5 — headings included (styleguide rule 15). */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{margin:0;font-weight:600;line-height:var(--lh-head);color:inherit;
  letter-spacing:normal;text-wrap:balance}
h1,.h1{font-size:var(--t-2xl)}
h2,.h2{font-size:var(--t-xl)}
h3,.h3{font-size:var(--t-lg)}
h4,.h4,h5,.h5,h6,.h6{font-size:var(--t-md)}
.inv-display{font-size:var(--t-3xl);font-weight:700;line-height:var(--lh-head)}

a{color:var(--primary);text-underline-offset:2px}
a:hover{color:var(--primary-hover)}

/* numbers and document numbers: JetBrains Mono + tabular figures so columns line up */
code,.mono,.num,.tnum{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
code{font-size:inherit;color:inherit}
.ta-r{text-align:right}

hr{margin:var(--s4) 0;color:var(--line);opacity:1}
::selection{background-color:var(--primary-soft);color:var(--primary-soft-ink)}

/* a visible focus ring on every control (styleguide rule: keyboard users all day) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* skip link: hidden until focused (layouts/app.php) */
.skip-link{position:absolute;left:var(--s2);top:var(--s2);z-index:1100;padding:var(--s2) var(--s3);
  background:var(--surface);color:var(--primary);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transform:translateY(calc(-100% - var(--s4)))}
/* P6-15: the shadow only once it is on screen — parked above the page, its 16px blur drew a grey smear across the top
   of every screen in the light theme */
.skip-link:focus{transform:none;box-shadow:var(--sh-2)}

/* motion never longer than --dur (styleguide: "animation เกิน 200ms" is a don't) */
.fade{transition:opacity var(--dur) linear}
.collapsing{transition:height var(--dur) ease-out}
.collapsing.collapse-horizontal{transition:width var(--dur) ease-out}
.modal.fade .modal-dialog{transition:transform var(--dur) ease-out}

/* ============================================================ 3a. segmented control (theme / language switchers)
   Lives here, not in the shell, because the sign-in page uses it too (inventory-auth.css). */
.inv-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface-2)}
.inv-seg button,
.inv-seg a{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-width:var(--s6);
  min-height:calc(var(--s6) + var(--s1));padding:0 var(--s3);border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--ink-3);font:inherit;font-size:var(--t-xs);font-weight:600;
  line-height:var(--lh-body);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur),color var(--dur)}
.inv-seg button:hover,
.inv-seg a:hover{color:var(--ink)}
.inv-seg [aria-pressed="true"],
.inv-seg [aria-current="true"],
.inv-seg [aria-current="page"]{background:var(--primary);color:var(--primary-ink);box-shadow:var(--sh-1)}
.inv-seg button:focus-visible,
.inv-seg a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.inv-lang{flex:none}
.inv-lang form{display:contents}

/* ============================================================ 3b. icons (P1-20: ONE Lucide sprite, inv_icon()) */
.inv-icon{flex:none;width:1.125em;height:1.125em;vertical-align:-.2em;stroke-width:2}
.inv-icon-sm{width:1em;height:1em}
.inv-icon-lg{width:1.5em;height:1.5em;stroke-width:1.75}
.inv-icon-xl{width:2.5rem;height:2.5rem;stroke-width:1.5}

/* ============================================================ 4. Bootstrap components → tokens */

/* ---- buttons: 1 page = 1 filled button; secondary = outline; ghost = text; danger = red outline (never red fill) */
.btn{
  --bs-btn-padding-x:var(--s4);
  --bs-btn-padding-y:0;
  --bs-btn-font-size:var(--t-sm);
  --bs-btn-font-weight:600;
  --bs-btn-line-height:var(--lh-body);
  --bs-btn-border-radius:var(--r-sm);
  --bs-btn-box-shadow:none;
  --bs-btn-focus-box-shadow:none;
  --bs-btn-disabled-opacity:.45;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--control-h);
  transition:background-color var(--dur),border-color var(--dur),color var(--dur),box-shadow var(--dur),transform var(--dur)
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,
.btn-check:focus-visible+.btn{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}
.btn:disabled,
.btn.disabled{box-shadow:none;transform:none}
.btn-primary{
  --bs-btn-color:var(--primary-ink);--bs-btn-bg:var(--primary);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--primary-ink);--bs-btn-hover-bg:var(--primary-hover);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--primary-ink);--bs-btn-active-bg:var(--primary-hover);--bs-btn-active-border-color:transparent;
  --bs-btn-disabled-color:var(--primary-ink);--bs-btn-disabled-bg:var(--primary);--bs-btn-disabled-border-color:transparent;
  box-shadow:var(--sh-1)
}
.btn-primary:hover{box-shadow:var(--sh-2)}
/* stock-positive confirmations (รับเข้า / ของพอ) — the teal accent, never the page's one primary action */
.btn-accent{
  --bs-btn-color:var(--accent-ink);--bs-btn-bg:var(--accent);--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--accent-ink);--bs-btn-hover-bg:var(--accent);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--accent-ink);--bs-btn-active-bg:var(--accent);--bs-btn-active-border-color:transparent;
  --bs-btn-disabled-color:var(--accent-ink);--bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-border-color:transparent;
  box-shadow:var(--sh-1)
}
.btn-secondary{
  --bs-btn-color:var(--ink);--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--line-strong);
  --bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:var(--ink-3);
  --bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--surface-2);--bs-btn-active-border-color:var(--ink-3);
  --bs-btn-disabled-color:var(--ink);--bs-btn-disabled-bg:var(--surface);--bs-btn-disabled-border-color:var(--line-strong)
}
.btn-ghost{
  --bs-btn-color:var(--ink-2);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--surface-2);--bs-btn-active-border-color:transparent;
  --bs-btn-disabled-color:var(--ink-2);--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:transparent
}
.btn-danger{
  --bs-btn-color:var(--c-err-fg);--bs-btn-bg:transparent;--bs-btn-border-color:var(--c-err);
  --bs-btn-hover-color:var(--c-err-fg);--bs-btn-hover-bg:var(--c-err-bg);--bs-btn-hover-border-color:var(--c-err);
  --bs-btn-active-color:var(--c-err-fg);--bs-btn-active-bg:var(--c-err-bg);--bs-btn-active-border-color:var(--c-err);
  --bs-btn-disabled-color:var(--c-err-fg);--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:var(--c-err)
}
.btn-link{--bs-btn-color:var(--primary);--bs-btn-hover-color:var(--primary-hover);--bs-btn-active-color:var(--primary-hover);--bs-btn-disabled-color:var(--ink-3)}
.btn-lg{--bs-btn-padding-x:var(--s5);--bs-btn-font-size:var(--t-md);--bs-btn-border-radius:var(--r);min-height:var(--tap)}
.btn-sm{--bs-btn-padding-x:var(--s3);--bs-btn-font-size:var(--t-xs);--bs-btn-border-radius:var(--r-sm);min-height:calc(var(--control-h) - var(--s2))}
/* icon-only (the Button component adds it when there is no label): the icon plus the padding is 40px wide, so on a
   touch screen it misses the 48px the styleguide asks of a tap target. A mouse keeps the compact button. (P3-13) */
@media (pointer:coarse){ .btn-icon{min-width:var(--tap);min-height:var(--tap)} }
.btn-block{width:100%}
.btn-close{--bs-btn-close-focus-shadow:none}
.btn-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- forms: label above, hint/error below, error = red border + tinted field (never an alert) */
.form-label{display:block;margin-bottom:var(--s1);font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.form-text{margin-top:var(--s1);font-size:var(--t-xs);color:var(--ink-3)}
.invalid-feedback{margin-top:var(--s1);font-size:var(--t-xs);color:var(--c-err-fg)}
.valid-feedback{margin-top:var(--s1);font-size:var(--t-xs);color:var(--c-ok-fg)}

.form-control,
.form-select{
  min-height:var(--control-h);padding-top:0;padding-bottom:0;padding-left:var(--s3);
  font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink);background-color:var(--surface);
  border-color:var(--line-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur),box-shadow var(--dur)
}
.form-control{padding-right:var(--s3)}
.form-select{padding-right:calc(var(--s3) + var(--s5));background-position:right var(--s3) center}
textarea.form-control{padding-top:var(--s2);padding-bottom:var(--s2)}
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus){border-color:var(--ink-3)}
.form-control:focus,
.form-select:focus{color:var(--ink);background-color:var(--surface);border-color:var(--focus);
  outline:2px solid var(--focus);outline-offset:0;box-shadow:none}
.form-control::placeholder{color:var(--ink-3)}
/* GATE-3 visual QA: an unstyled <input type="file"> keeps the browser's own button — a light grey chip that
   stays light in the dark and warehouse themes and never follows the theme. Dress it like .btn-secondary so
   the deposit slip (portal), the payment slip, the import files and the parallel-run upload look the same
   everywhere. Only the label text inside it stays the browser's (the OS decides its wording). */
.form-control[type="file"]{display:flex;align-items:center;padding-left:0}
.form-control[type="file"]::file-selector-button{
  height:calc(var(--control-h) - var(--s1));margin:0 var(--s3) 0 0;padding:0 var(--s3);
  color:var(--ink);background-color:var(--surface-2);border:0;border-right:1px solid var(--line-strong);
  border-radius:var(--r-sm) 0 0 var(--r-sm);font-family:inherit;font-size:var(--t-sm);line-height:var(--lh-body);
  cursor:pointer;transition:background-color var(--dur),color var(--dur)
}
.form-control[type="file"]:hover:not(:disabled)::file-selector-button{background-color:var(--primary-soft);color:var(--ink)}
.form-control[type="file"]:disabled::file-selector-button{color:var(--ink-3);cursor:not-allowed}
.form-control:disabled,
.form-select:disabled{color:var(--ink-3);background-color:var(--surface-2);border-color:var(--line)}
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid{border-color:var(--c-err);background-color:var(--c-err-bg)}
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.was-validated .form-control:valid{padding-right:var(--s3);background-image:none}
.form-select.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-valid,
.was-validated .form-select:valid{--bs-form-select-bg-icon:none}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus{outline-color:var(--c-err);box-shadow:none}
.form-control-lg,
.form-select-lg{min-height:var(--tap);font-size:var(--t-md);border-radius:var(--r)}
.form-control-sm,
.form-select-sm{min-height:calc(var(--control-h) - var(--s2));font-size:var(--t-xs)}

.form-check-input{--bs-form-check-bg:var(--surface);border-color:var(--line-strong)}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate{background-color:var(--primary);border-color:var(--primary)}
.form-check-input:focus{border-color:var(--focus);box-shadow:none}
.form-check-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form-range::-webkit-slider-thumb{background-color:var(--primary)}
.form-range::-moz-range-thumb{background-color:var(--primary)}
.input-group-text{padding-top:0;padding-bottom:0;padding-left:var(--s3);padding-right:var(--s3);
  font-size:var(--t-sm);color:var(--ink-2);background-color:var(--surface-2);border-color:var(--line-strong);
  border-radius:var(--r-sm)}

/* ---- card: white surface, hairline border, soft resting shadow; lifts only when it is a link */
.card{
  --bs-card-bg:var(--surface);--bs-card-color:var(--ink);
  --bs-card-border-color:var(--line);--bs-card-border-radius:var(--r);
  --bs-card-inner-border-radius:calc(var(--r) - 1px);
  --bs-card-spacer-x:var(--s5);--bs-card-spacer-y:var(--s5);--bs-card-title-spacer-y:var(--s2);
  --bs-card-cap-padding-x:var(--s5);--bs-card-cap-padding-y:var(--s3);--bs-card-cap-bg:transparent;
  --bs-card-box-shadow:var(--sh-1);
  box-shadow:var(--bs-card-box-shadow)
}
.card-header{border-bottom-color:var(--line);font-weight:600}
a.card,
.card-link-hover{transition:box-shadow var(--dur),border-color var(--dur),transform var(--dur)}
a.card:hover,
.card-link-hover:hover{box-shadow:var(--sh-2);border-color:var(--line-strong)}

/* ---- table: 44px rows (56px warehouse/touch), sticky header, hairline separators, numbers right + mono */
.table{
  --bs-table-color:var(--ink);--bs-table-bg:transparent;--bs-table-border-color:var(--line);
  --bs-table-striped-color:var(--ink);--bs-table-striped-bg:var(--surface-2);
  --bs-table-hover-color:var(--ink);--bs-table-hover-bg:var(--surface-2);
  --bs-table-active-color:var(--ink);--bs-table-active-bg:var(--primary-soft);
  margin-bottom:0;font-size:var(--t-sm)
}
.table>:not(caption)>*>*{padding:0 var(--s3);height:var(--row-h);vertical-align:middle;background-color:transparent}
.table>thead{--bs-table-color:var(--ink-3)}
.table>thead>tr>th{position:sticky;top:0;z-index:2;height:calc(var(--s6) + var(--s2));
  background:var(--surface-2);font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;border-bottom:1px solid var(--line-strong)}
.table>tbody>tr{transition:background-color var(--dur)}
.table>tbody>tr>*{border-bottom:1px solid var(--line)}
.table td.num,.table th.num,
.table td.ta-r,.table th.ta-r{text-align:right}
@media (pointer:coarse){ .table>:not(caption)>*>*{height:var(--row-h-touch)} }

/* ---- navs: .nav-underline = the styleguide "tabs" */
.nav-underline{
  --bs-nav-underline-gap:var(--s4);--bs-nav-underline-border-width:2px;
  --bs-nav-link-padding-x:0;--bs-nav-link-padding-y:var(--s2);--bs-nav-link-font-size:var(--t-sm);
  --bs-nav-link-color:var(--ink-3);--bs-nav-link-hover-color:var(--ink);
  --bs-nav-underline-link-active-color:var(--ink);
  border-bottom:1px solid var(--line)
}
.nav-underline .nav-link{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--control-h);font-weight:500}
.nav-underline .nav-link.active,
.nav-underline .show>.nav-link{font-weight:600;border-bottom-color:var(--primary)}
.nav-tabs{
  --bs-nav-tabs-border-color:var(--line);--bs-nav-tabs-border-radius:var(--r-sm);
  --bs-nav-tabs-link-hover-border-color:var(--line) var(--line) var(--line);
  --bs-nav-tabs-link-active-color:var(--ink);--bs-nav-tabs-link-active-bg:var(--surface);
  --bs-nav-tabs-link-active-border-color:var(--line) var(--line) var(--surface)
}
.nav-pills{--bs-nav-pills-border-radius:var(--r-pill);--bs-nav-pills-link-active-color:var(--primary-ink);--bs-nav-pills-link-active-bg:var(--primary)}
.nav-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:none}

/* ---- dropdown */
.dropdown-menu{
  --bs-dropdown-font-size:var(--t-sm);--bs-dropdown-color:var(--ink);--bs-dropdown-bg:var(--surface);
  --bs-dropdown-border-color:var(--line);--bs-dropdown-border-radius:var(--r);
  --bs-dropdown-inner-border-radius:calc(var(--r) - 1px);--bs-dropdown-box-shadow:var(--sh-3);
  --bs-dropdown-padding-y:var(--s1);--bs-dropdown-divider-bg:var(--line);--bs-dropdown-divider-margin-y:var(--s1);
  --bs-dropdown-item-padding-x:var(--s3);--bs-dropdown-item-padding-y:var(--s2);
  --bs-dropdown-link-color:var(--ink);--bs-dropdown-link-hover-color:var(--ink);--bs-dropdown-link-hover-bg:var(--surface-2);
  --bs-dropdown-link-active-color:var(--primary-soft-ink);--bs-dropdown-link-active-bg:var(--primary-soft);
  --bs-dropdown-link-disabled-color:var(--ink-3);--bs-dropdown-header-color:var(--ink-3);
  box-shadow:var(--bs-dropdown-box-shadow)
}
.dropdown-item{display:flex;align-items:center;gap:var(--s2);border-radius:var(--r-sm)}
.dropdown-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dropdown-header{font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ---- modal / offcanvas (SlideOver) / toast */
.modal{
  --bs-modal-color:var(--ink);--bs-modal-bg:var(--surface);--bs-modal-border-color:var(--line);
  --bs-modal-border-radius:var(--r-lg);--bs-modal-inner-border-radius:calc(var(--r-lg) - 1px);
  --bs-modal-box-shadow:var(--sh-3);--bs-modal-padding:var(--s5);
  --bs-modal-header-padding:var(--s4) var(--s5);--bs-modal-header-border-color:var(--line);
  --bs-modal-footer-border-color:var(--line);--bs-modal-footer-gap:var(--s2);--bs-modal-title-line-height:var(--lh-head)
}
.offcanvas,.offcanvas-sm,.offcanvas-md,.offcanvas-lg,.offcanvas-xl,.offcanvas-xxl{
  --bs-offcanvas-color:var(--ink);--bs-offcanvas-bg:var(--surface);--bs-offcanvas-border-color:var(--line);
  --bs-offcanvas-box-shadow:var(--sh-3);--bs-offcanvas-padding-x:var(--s5);--bs-offcanvas-padding-y:var(--s4);
  --bs-offcanvas-transition:transform var(--dur) ease-out;--bs-offcanvas-title-line-height:var(--lh-head)
}
.toast{
  --bs-toast-color:var(--ink);--bs-toast-bg:var(--surface);--bs-toast-border-color:var(--line);
  --bs-toast-border-radius:var(--r);--bs-toast-box-shadow:var(--sh-3);--bs-toast-font-size:var(--t-sm);
  --bs-toast-padding-x:var(--s3);--bs-toast-padding-y:var(--s3);--bs-toast-spacing:var(--s4);
  --bs-toast-header-color:var(--ink-3);--bs-toast-header-bg:var(--surface-2);--bs-toast-header-border-color:var(--line)
}

/* ---- badge / alert / pagination / list group / progress / tooltip / popover */
.badge{--bs-badge-font-size:var(--t-xs);--bs-badge-font-weight:600;--bs-badge-border-radius:var(--r-pill)}
.alert{--bs-alert-padding-x:var(--s4);--bs-alert-padding-y:var(--s3);--bs-alert-margin-bottom:var(--s4);--bs-alert-border-radius:var(--r);font-size:var(--t-sm)}
.pagination{
  --bs-pagination-padding-x:var(--s3);--bs-pagination-padding-y:var(--s1);--bs-pagination-font-size:var(--t-sm);
  --bs-pagination-color:var(--ink-2);--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--line-strong);
  --bs-pagination-border-radius:var(--r-sm);
  --bs-pagination-hover-color:var(--ink);--bs-pagination-hover-bg:var(--surface-2);--bs-pagination-hover-border-color:var(--ink-3);
  --bs-pagination-focus-color:var(--ink);--bs-pagination-focus-bg:var(--surface-2);--bs-pagination-focus-box-shadow:none;
  --bs-pagination-active-color:var(--primary-ink);--bs-pagination-active-bg:var(--primary);--bs-pagination-active-border-color:var(--primary);
  --bs-pagination-disabled-color:var(--ink-3);--bs-pagination-disabled-bg:var(--surface);--bs-pagination-disabled-border-color:var(--line)
}
.page-link{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--control-h)}
.page-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.list-group{
  --bs-list-group-color:var(--ink);--bs-list-group-bg:var(--surface);--bs-list-group-border-color:var(--line);
  --bs-list-group-border-radius:var(--r);--bs-list-group-item-padding-x:var(--s4);--bs-list-group-item-padding-y:var(--s3);
  --bs-list-group-action-color:var(--ink-2);--bs-list-group-action-hover-color:var(--ink);--bs-list-group-action-hover-bg:var(--surface-2);
  --bs-list-group-action-active-color:var(--ink);--bs-list-group-action-active-bg:var(--surface-2);
  --bs-list-group-disabled-color:var(--ink-3);--bs-list-group-disabled-bg:var(--surface);
  --bs-list-group-active-color:var(--primary-soft-ink);--bs-list-group-active-bg:var(--primary-soft);--bs-list-group-active-border-color:var(--c-brand-200)
}
.list-group-item-action:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.progress,.progress-stacked{--bs-progress-height:var(--s2);--bs-progress-bg:var(--line);--bs-progress-border-radius:var(--r-pill);--bs-progress-bar-color:var(--primary-ink);--bs-progress-bar-bg:var(--primary)}
.tooltip{--bs-tooltip-font-size:var(--t-xs);--bs-tooltip-color:var(--surface);--bs-tooltip-bg:var(--ink);--bs-tooltip-border-radius:var(--r-sm);--bs-tooltip-padding-x:var(--s2);--bs-tooltip-padding-y:var(--s1);--bs-tooltip-opacity:1}
.popover{
  --bs-popover-font-size:var(--t-sm);--bs-popover-bg:var(--surface);--bs-popover-border-color:var(--line);
  --bs-popover-border-radius:var(--r);--bs-popover-inner-border-radius:calc(var(--r) - 1px);--bs-popover-box-shadow:var(--sh-3);
  --bs-popover-header-font-size:var(--t-sm);--bs-popover-header-bg:var(--surface-2);--bs-popover-header-color:var(--ink);
  --bs-popover-header-padding-x:var(--s3);--bs-popover-header-padding-y:var(--s2);
  --bs-popover-body-padding-x:var(--s3);--bs-popover-body-padding-y:var(--s3);--bs-popover-body-color:var(--ink)
}

/* ============================================================ 5. colour utilities (Bootstrap reads *-rgb vars here) */
.text-primary{color:var(--primary)!important}
.text-secondary,.text-muted,.text-body-secondary{color:var(--ink-3)!important}
.text-success{color:var(--c-ok-fg)!important}
.text-info{color:var(--c-info-fg)!important}
.text-warning{color:var(--c-warn-fg)!important}
.text-danger{color:var(--c-err-fg)!important}
.text-body,.text-body-emphasis,.text-dark{color:var(--ink)!important}
.text-body-tertiary{color:var(--ink-3)!important}

.bg-primary{background-color:var(--primary)!important}
.bg-success{background-color:var(--c-ok)!important}
.bg-info{background-color:var(--c-info)!important}
.bg-warning{background-color:var(--c-warn)!important}
.bg-danger{background-color:var(--c-err)!important}
.bg-body{background-color:var(--bg)!important}
.bg-body-secondary{background-color:var(--line)!important}
.bg-body-tertiary,.bg-light{background-color:var(--surface-2)!important}
.bg-white{background-color:var(--surface)!important}

/* P2-15: `--surface` is the card, not an ink — white on the light theme's emerald is 3.8:1, and on the dark
   themes' lighter emerald / rose it is under 2:1. Each fill takes the `-ink` token made for it. `--c-info` has no
   ink that clears AA in the light theme (white 4.1:1, the darkest neutral 4.3:1), so nothing may print on it: the
   informational badge is `.st-quoted`, which is the soft background the styleguide draws it with. */
.text-bg-primary{color:var(--primary-ink)!important;background-color:var(--primary)!important}
.text-bg-success{color:var(--c-ok-ink)!important;background-color:var(--c-ok)!important}
.text-bg-info{color:var(--c-info-fg)!important;background-color:var(--c-info-bg)!important}
.text-bg-warning{color:var(--c-warn-ink)!important;background-color:var(--c-warn)!important}
.text-bg-danger{color:var(--c-err-ink)!important;background-color:var(--c-err)!important}

.border-primary{border-color:var(--primary)!important}
.border-success{border-color:var(--c-ok)!important}
.border-info{border-color:var(--c-info)!important}
.border-warning{border-color:var(--c-warn)!important}
.border-danger{border-color:var(--c-err)!important}

.link-primary{color:var(--primary)!important;text-decoration-color:var(--primary)!important}