/* ===========================================================================
   BOOTSTRAP BRIDGE — plumbing, not design. ADR-0028.

   Bootstrap 5.3 hard-codes its own values in `--bs-*`, and its utilities are
   `!important`, so it is steered by redefining the variables behind it rather
   than by out-specifying it. Everything here reads a token from
   `design-tokens.css` and hands it to Bootstrap.

   **Do not change how the product looks by editing this file.** Change the
   token. If a change cannot be expressed as a token, that is the signal that a
   token is missing — add it next door and reference it here.

   **The split with `components.css`** (DDR-0010): anything that restyles a
   *Bootstrap* class — `.card`, `.btn-*`, `.form-control`, `.table` — lives here,
   because it is Bootstrap being handed our values. TestPrep's own patterns,
   the `.tp-*` classes, live in `components.css`. One component, one file.

   Two traps recorded because both have already cost time:

   - **`--bs-*-rgb` triplets are duplicates of tokens, and CSS cannot derive
     them.** Bootstrap's utilities compose colours as `rgba(var(--bs-x-rgb), α)`,
     which needs three comma-separated numbers, not a hex. So each triplet below
     restates a token's value in another notation, and a token changed without
     its triplet leaves half the product on the old colour while this file looks
     entirely correct. `PaletteContrastTests.Bootstrap_rgb_triplets_match_their_tokens`
     fails on exactly that.
   - **Buttons need every variant restating.** `--bs-btn-bg` and friends are set
     per component, so a variant that is used but not listed here silently keeps
     Bootstrap's default. That per-variant repetition is Option B's known cost in
     ADR-0028, and the trigger for escalating to Option D (Bootstrap's Sass
     source) if this section keeps growing.
   - **Bootstrap paints several components in the body colour.** Cards, tables,
     list groups and form controls all default to `var(--bs-body-bg)`. That was
     invisible while the page was white; now the page is `--tp-canvas`, each of
     them has to be handed `--tp-surface` explicitly or it renders the colour of
     the page it is meant to stand out from.
   =========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------- */
  --bs-body-bg: var(--tp-canvas);
  --bs-body-bg-rgb: 240, 244, 249;             /* = --tp-canvas     #f0f4f9    */
  --bs-body-color: var(--tp-ink);
  --bs-emphasis-color: var(--tp-ink);          /* tables, .text-body-emphasis */
  --bs-emphasis-color-rgb: 30, 41, 59;         /* = --tp-ink        #1e293b    */
  --bs-heading-color: var(--tp-heading);
  --bs-secondary-color: var(--tp-ink-muted);   /* .text-muted, .form-text     */
  --bs-primary-rgb: 0, 39, 76;                 /* = --tp-primary    #00274c    */
  --bs-success-rgb: 8, 77, 57;                 /* = --tp-success    #084d39    */
  --bs-danger-rgb: 143, 24, 41;                /* = --tp-danger     #8f1829    */
  --bs-secondary-rgb: 62, 74, 92;              /* = --tp-ink-muted  #3e4a5c    */
  --bs-dark-rgb: 30, 41, 59;                   /* = --tp-ink        #1e293b    */

  /* Both forms are required. Bootstrap's `a` rule reads
     `rgba(var(--bs-link-color-rgb), …)` — it never touches --bs-link-color,
     which only feeds components like .btn-link. Setting the hex alone leaves
     every link in every *view* on Bootstrap's #0d6efd (4.50:1) while looking
     entirely correct here. PaletteContrastTests cannot see that: the token is
     right, it just is not applied. The browser tier caught it — see the axe run
     in tests/e2e/specs/accessibility.spec.ts. */
  --bs-link-color: var(--tp-link);
  --bs-link-color-rgb: 18, 64, 107;            /* = --tp-link       #12406b    */
  --bs-link-hover-color: var(--tp-link-hover);
  --bs-link-hover-color-rgb: 0, 39, 76;        /* = --tp-link-hover #00274c    */

  /* Inline <code> — Bootstrap's #d63384 is 4.50:1. */
  --bs-code-color: var(--tp-code);

  /* --- Shape, rhythm and type (ADR-0028 tier 3) -------------------------- */
  --bs-border-radius-sm: var(--tp-radius-sm);
  --bs-border-radius: var(--tp-radius-md);
  --bs-border-radius-lg: var(--tp-radius-lg);
  --bs-border-radius-xl: var(--tp-radius-xl);
  --bs-border-radius-xxl: var(--tp-radius-2xl);
  --bs-border-radius-pill: var(--tp-radius-pill);

  /* --bs-border-color is deliberately NOT remapped. It draws the `.border`
     utility and a few component edges, and none of them carries information;
     remapping it would repaint every one of them for no reason a test could
     state. Tables are handed --tp-rule explicitly below. */

  --bs-body-font-family: var(--tp-font-sans);
  --bs-font-monospace: var(--tp-font-mono);
  --bs-body-font-size: var(--tp-text-base);
  --bs-body-font-weight: var(--tp-weight-normal);
  --bs-body-line-height: var(--tp-leading-base);

  --bs-box-shadow-sm: var(--tp-elev-1);
  --bs-box-shadow: var(--tp-elev-2);
  --bs-box-shadow-lg: var(--tp-elev-3);
}

/* Headings read Sass variables rather than custom properties in Bootstrap 5.3,
   so the type scale has to be applied rather than handed over.

   **This is the one wiring below that changes what renders**, and it is
   deliberate. Bootstrap interpolates heading sizes against the viewport (RFS),
   so an h1 is ~25px on a phone and 40px on a desktop with nothing stating
   either. That is not a scale a designer can reason about or edit. It is
   replaced here by a two-step scale — the tokens, with a smaller set below
   768px in design-tokens.css. Most product headings do not use it: the band's
   title, section titles and card titles have their own `.tp-*` sizes in
   components.css, because the prototype's headings are far smaller than any
   default scale. This is the floor for anything that has not been given one. */
h1, .h1 { font-size: var(--tp-text-4xl); }
h2, .h2 { font-size: var(--tp-text-3xl); }
h3, .h3 { font-size: var(--tp-text-2xl); }
h4, .h4 { font-size: var(--tp-text-xl); }
h5, .h5 { font-size: var(--tp-text-lg); }
h6, .h6 { font-size: var(--tp-text-base); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: var(--tp-leading-tight);
  font-weight: var(--tp-weight-heading);
}

/* `.small` and `<small>` are deliberately left alone: Bootstrap sizes them in
   `em` so they shrink relative to whatever they sit inside, and a rem token
   would flatten that. --tp-text-sm exists for views that want an absolute
   small; it is not the same thing. */

/* .bg-warning and .bg-info are deliberately NOT remapped. They are used only as
   light badge surfaces carrying .text-dark, which already clears 7:1. Darkening
   them for white text would break those badges instead. But the same variable
   drives .text-warning, where light amber is 1.63:1 — so that one utility is
   overridden directly, and needs !important to beat Bootstrap's. */
.text-warning {
  color: var(--tp-warning-ink) !important;
}

/* --- Buttons. Each variant in use is restated; see the header. -------------
   Every button carries a 2px border, filled or not, so an outlined button and
   a filled one beside it are the same size — the prototype's border-2. */
.btn {
  --bs-btn-padding-x: var(--tp-space-3);
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-size: var(--tp-text-sm);
  --bs-btn-font-weight: var(--tp-weight-bold);
  --bs-btn-border-width: var(--tp-border-width);
  --bs-btn-border-radius: var(--tp-radius-md);
}

.btn-sm {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-size: var(--tp-text-sm);
  --bs-btn-border-radius: var(--tp-radius-md);
}

.btn-lg {
  --bs-btn-padding-x: var(--tp-space-4);
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: var(--tp-text-base);
  --bs-btn-border-radius: var(--tp-radius-md);
}

/* The primary button is the ACTION: gold, with navy on it. It is the one
   button a page wants pressed — Start now, Sign in, Send invitation. Its hover
   is lighter rather than darker, as the prototype's is. */
.btn-primary {
  --bs-btn-color: var(--tp-on-action);
  --bs-btn-bg: var(--tp-action);
  --bs-btn-border-color: var(--tp-action);
  --bs-btn-hover-color: var(--tp-on-action);
  --bs-btn-hover-bg: var(--tp-action-hover);
  --bs-btn-hover-border-color: var(--tp-action-hover);
  --bs-btn-active-color: var(--tp-on-action);
  --bs-btn-active-bg: var(--tp-action-hover);
  --bs-btn-active-border-color: var(--tp-action-hover);
  --bs-btn-disabled-color: var(--tp-on-action);
  --bs-btn-disabled-bg: var(--tp-action);
  --bs-btn-disabled-border-color: var(--tp-action);
}

.btn-success {
  --bs-btn-color: var(--tp-on-accent);
  --bs-btn-bg: var(--tp-success);
  --bs-btn-border-color: var(--tp-success);
  --bs-btn-hover-color: var(--tp-on-accent);
  --bs-btn-hover-bg: var(--tp-success-hover);
  --bs-btn-hover-border-color: var(--tp-success-hover);
  --bs-btn-active-bg: var(--tp-success-hover);
  --bs-btn-active-border-color: var(--tp-success-hover);
  --bs-btn-disabled-bg: var(--tp-success);
  --bs-btn-disabled-border-color: var(--tp-success);
}

/* The secondary button: navy outline, filling navy on hover — the prototype's
   "Edit candidates". */
.btn-outline-primary {
  --bs-btn-color: var(--tp-primary);
  --bs-btn-border-color: var(--tp-primary);
  --bs-btn-hover-color: var(--tp-on-accent);
  --bs-btn-hover-bg: var(--tp-primary);
  --bs-btn-hover-border-color: var(--tp-primary);
  --bs-btn-active-color: var(--tp-on-accent);
  --bs-btn-active-bg: var(--tp-primary);
  --bs-btn-active-border-color: var(--tp-primary);
  --bs-btn-disabled-color: var(--tp-primary);
  --bs-btn-disabled-border-color: var(--tp-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--tp-ink-muted);
  --bs-btn-border-color: var(--tp-border);
  --bs-btn-hover-color: var(--tp-on-accent);
  --bs-btn-hover-bg: var(--tp-ink-muted);
  --bs-btn-hover-border-color: var(--tp-ink-muted);
  --bs-btn-active-color: var(--tp-on-accent);
  --bs-btn-active-bg: var(--tp-ink-muted);
  --bs-btn-active-border-color: var(--tp-ink-muted);
  --bs-btn-disabled-color: var(--tp-ink-muted);
  --bs-btn-disabled-border-color: var(--tp-border);
}

.btn-outline-danger {
  --bs-btn-color: var(--tp-danger);
  --bs-btn-border-color: var(--tp-danger);
  --bs-btn-hover-color: var(--tp-on-accent);
  --bs-btn-hover-bg: var(--tp-danger);
  --bs-btn-hover-border-color: var(--tp-danger);
  --bs-btn-active-color: var(--tp-on-accent);
  --bs-btn-active-bg: var(--tp-danger);
  --bs-btn-active-border-color: var(--tp-danger);
  --bs-btn-disabled-color: var(--tp-danger);
  --bs-btn-disabled-border-color: var(--tp-danger);
}

.btn-link {
  --bs-btn-color: var(--tp-link);
  --bs-btn-hover-color: var(--tp-link-hover);
  --bs-btn-active-color: var(--tp-link-hover);
}

/* --- Cards: white, borderless, one soft shadow, a 1rem corner. ----------- */
.card {
  --bs-card-bg: var(--tp-surface);
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--tp-radius-lg);
  --bs-card-inner-border-radius: var(--tp-radius-lg);
  --bs-card-spacer-x: var(--tp-space-card);
  --bs-card-spacer-y: var(--tp-space-card);
  box-shadow: var(--tp-elev-1);
}

/* --- Status badges, for the few that are still Bootstrap's. The product's own
       pills are `.tp-pill` in components.css; this makes a stray `.badge` take
       the same shape rather than a square one. */
.badge {
  --bs-badge-padding-x: 0.625rem;
  --bs-badge-padding-y: 0.125rem;
  --bs-badge-font-size: var(--tp-text-xs);
  --bs-badge-font-weight: var(--tp-weight-bold);
  --bs-badge-border-radius: var(--tp-radius-pill);
}

/* --- Alerts. Bootstrap 5.3's colours already clear 7:1 and are left alone
       (accessibility.instructions.md); only the shape changes. */
.alert {
  --bs-alert-border-radius: var(--tp-radius-md);
  --bs-alert-border-color: transparent;
  --bs-alert-padding-y: 0.75rem;
  font-size: var(--tp-text-sm);
}

/* --- Forms. A 2px border at 3:1, a white fill whatever the page is, and a
       navy edge when focused — the focus ring in site.css still draws outside
       it, which is the part WCAG 2.4.11 relies on. */
.form-control,
.form-select {
  background-color: var(--tp-surface);
  border: var(--tp-border-width) solid var(--tp-border);
  border-radius: var(--tp-radius-md);
  padding: 0.625rem 0.75rem;
  font-size: var(--tp-text-sm);
}

.form-select {
  padding-right: 2.25rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--tp-surface);
  border-color: var(--tp-primary);
}

.form-check-input {
  --bs-form-check-bg: var(--tp-surface);
  border: var(--tp-border-width) solid var(--tp-border);
}

.form-check-input:checked {
  background-color: var(--tp-primary);
  border-color: var(--tp-primary);
}

.form-label {
  font-weight: var(--tp-weight-bold);
  font-size: var(--tp-text-sm);
}

.input-group > .form-control,
.input-group > .btn {
  border-radius: var(--tp-radius-md);
}

.input-group {
  gap: var(--tp-space-2);
}

/* --- Tables sit inside cards, so their background is the card's. Headers
       take the prototype's small uppercase label. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tp-ink);
  --bs-table-border-color: var(--tp-rule);
  font-size: var(--tp-text-sm);
}

.table > thead th {
  font-size: var(--tp-text-xs);
  font-weight: var(--tp-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tp-tracking-wide);
  color: var(--tp-ink-muted);
}

.table > :not(caption) > * > * {
  padding: 0.75rem 0.5rem;
}

/* Rules BETWEEN rows, not under the last one — the prototype's divide-y. */
.table > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

/* .table-responsive scrolls sideways, and CSS makes overflow-y `auto` whenever
   overflow-x is — so a table whose layout rounds one pixel past its wrapper
   (measured on /Admin's centre-administrator list, 2026-09-24: every row 1px
   out, the hidden caption included) grew a vertical scroll bar for that pixel.
   A table never needs to scroll vertically inside its wrapper. The cells'
   0.75rem padding keeps a focused button's ring (3px + 2px offset) well inside
   the clip. */
.table-responsive {
  overflow-y: hidden;
}

.list-group {
  --bs-list-group-bg: var(--tp-surface);
  --bs-list-group-border-color: var(--tp-rule);
  --bs-list-group-border-radius: var(--tp-radius-lg);
}

/* --- Pills (the style guide's section tabs): white when idle, gold when
       current — the prototype's tab bar. The current one also carries a navy
       edge, because white against gold is 1.52:1 and colour alone must not be
       the only thing saying which tab you are on (WCAG 1.4.1). */
.nav-pills {
  --bs-nav-link-padding-x: var(--tp-space-3);
  --bs-nav-link-padding-y: var(--tp-space-2);
  --bs-nav-link-font-size: var(--tp-text-sm);
  --bs-nav-link-font-weight: var(--tp-weight-bold);
  --bs-nav-link-color: var(--tp-ink-muted);
  --bs-nav-link-hover-color: var(--tp-heading);
  --bs-nav-pills-border-radius: var(--tp-radius-md);
  --bs-nav-pills-link-active-color: var(--tp-on-action);
  --bs-nav-pills-link-active-bg: var(--tp-action);
  gap: var(--tp-space-2);
}

.nav-pills .nav-link {
  background-color: var(--tp-surface);
  border: var(--tp-border-width) solid transparent;
}

.nav-pills .nav-link.active {
  border-color: var(--tp-on-action);
}