/* LAYER 3 — Bootstrap component overrides (spec §5.3).
   Bootstrap 5.3 compiles component variants to LITERAL colours, so rebinding the
   root variables (tokens.css) is NOT enough: without this file the app renders
   half coral, half Bootstrap-blue. Every rule below re-points a component's own
   --bs-* variables at our --cx-* tokens, so the values still live in exactly one
   place and follow data-bs-theme for free.
   Caveat: Bootstrap 5.3 gives FORM CONTROLS no per-component variables at all, so
   the Forms section below (and the nav-link/page-link geometry rules) set CSS
   properties directly instead of re-pointing a --bs-* var — those rules are
   therefore specificity-fragile: check :focus / :disabled / :checked whenever you
   add to that section. (That gap is exactly how the .form-control:focus
   background bug got in — see the comment on that rule below.)
   RULE: no colour literal in this file. tests/test_theme_layer.py enforces it,
   with one deliberate, separately-guarded exception — see the checked-glyph
   rules in the Forms section below. */

/* ---------- Buttons ------------------------------------------------------ */
/* Primary is CORAL WITH DARK INK, never white text: #ff6f5e + white is 2.7:1 and
   fails AA (design-tokens.md). This also keeps the coral primary button visually
   distinct from the pale-red `failed` badge. */
.btn-primary {
  --bs-btn-color: var(--cx-brand-ink);
  --bs-btn-bg: var(--cx-brand);
  --bs-btn-border-color: var(--cx-brand);
  --bs-btn-hover-color: var(--cx-brand-ink);
  --bs-btn-hover-bg: var(--cx-brand-hover);
  --bs-btn-hover-border-color: var(--cx-brand-hover);
  --bs-btn-active-color: var(--cx-brand-ink);
  --bs-btn-active-bg: var(--cx-brand-active);
  --bs-btn-active-border-color: var(--cx-brand-active);
  --bs-btn-disabled-color: var(--cx-brand-ink);
  --bs-btn-disabled-bg: var(--cx-brand);
  --bs-btn-disabled-border-color: var(--cx-brand);
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--cx-ink);
  --bs-btn-border-color: var(--cx-brand);
  --bs-btn-hover-color: var(--cx-brand-ink);
  --bs-btn-hover-bg: var(--cx-brand);
  --bs-btn-hover-border-color: var(--cx-brand);
  --bs-btn-active-color: var(--cx-brand-ink);
  --bs-btn-active-bg: var(--cx-brand-active);
  --bs-btn-active-border-color: var(--cx-brand-active);
  --bs-btn-disabled-color: var(--cx-ink-muted);
  --bs-btn-disabled-border-color: var(--cx-outline-strong);
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
}

/* The app's most common control (Edit, Unwatch, the order arrows, Ignore). */
.btn-outline-secondary,
.btn-secondary {
  --bs-btn-color: var(--cx-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--cx-outline-strong);
  --bs-btn-hover-color: var(--cx-ink);
  --bs-btn-hover-bg: var(--cx-surface-hover);
  --bs-btn-hover-border-color: var(--cx-outline-strong);
  --bs-btn-active-color: var(--cx-ink);
  --bs-btn-active-bg: var(--cx-surface-hover);
  --bs-btn-active-border-color: var(--cx-outline-strong);
  --bs-btn-disabled-color: var(--cx-ink-muted);
  --bs-btn-disabled-border-color: var(--cx-outline-strong);
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
}
/* The three SOLID variants below (.btn-secondary, .btn-success, .btn-danger) are used
   by no template today — every call site uses the outline form. Kept deliberately, for
   the same reason as .btn-light/.btn-dark/.btn-info at the bottom of this block: they
   are one `btn-outline-` typo away from being rendered, and Bootstrap's own solids are
   literal blue/green/red. Each is one line riding on the grouped rule above it. */
.btn-secondary { --bs-btn-bg: var(--cx-surface); --bs-btn-color: var(--cx-ink); }

/* "Answered" — the positive action, in the answered green. */
.btn-outline-success,
.btn-success {
  --bs-btn-color: var(--cx-answered-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--cx-answered-ink);
  --bs-btn-hover-color: var(--cx-answered-ink);
  --bs-btn-hover-bg: var(--cx-answered-bg);
  --bs-btn-hover-border-color: var(--cx-answered-ink);
  --bs-btn-active-color: var(--cx-answered-ink);
  --bs-btn-active-bg: var(--cx-answered-bg);
  --bs-btn-active-border-color: var(--cx-answered-ink);
  --bs-btn-disabled-color: var(--cx-ink-muted);
  --bs-btn-disabled-border-color: var(--cx-outline-strong);
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
}
.btn-success { --bs-btn-bg: var(--cx-answered-bg); }

/* Destructive controls ONLY (Delete). Bootstrap's danger never conveys a
   comment/account STATE any more — states use .badge-status (spec §6.1). */
.btn-danger,
.btn-outline-danger {
  --bs-btn-color: var(--cx-failed-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--cx-failed-ink);
  --bs-btn-hover-color: var(--cx-failed-ink);
  --bs-btn-hover-bg: var(--cx-failed-bg);
  --bs-btn-hover-border-color: var(--cx-failed-ink);
  --bs-btn-active-color: var(--cx-failed-ink);
  --bs-btn-active-bg: var(--cx-failed-bg);
  --bs-btn-active-border-color: var(--cx-failed-ink);
  --bs-btn-disabled-color: var(--cx-ink-muted);
  --bs-btn-disabled-border-color: var(--cx-outline-strong);
  /* an *-rgb token, not the hex one: this variable goes inside rgba() */
  --bs-btn-focus-shadow-rgb: var(--cx-failed-ink-rgb);
}
.btn-danger { --bs-btn-bg: var(--cx-failed-bg); }

/* "Reconnect" — needs your attention, so the `new` amber. */
.btn-warning {
  --bs-btn-color: var(--cx-new-ink);
  --bs-btn-bg: var(--cx-new-bg);
  --bs-btn-border-color: var(--cx-new-bg);
  --bs-btn-hover-color: var(--cx-new-ink);
  --bs-btn-hover-bg: var(--cx-new-bg);
  --bs-btn-hover-border-color: var(--cx-new-ink);
  --bs-btn-active-color: var(--cx-new-ink);
  --bs-btn-active-bg: var(--cx-new-bg);
  --bs-btn-active-border-color: var(--cx-new-ink);
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
}

.btn-link {
  --bs-btn-color: rgb(var(--cx-link-rgb));
  --bs-btn-hover-color: rgb(var(--cx-link-rgb));
  --bs-btn-active-color: rgb(var(--cx-link-rgb));
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
}

.btn-light, .btn-dark, .btn-info {
  /* not used by any template today; mapped anyway so a future use is not
     off-palette (Bootstrap's own #f8f9fa / #212529 / #0dcaf0 for these three
     aren't blue, just inconsistent with our palette). All three currently
     collapse to one identical light-surface appearance — a future .btn-dark
     will render as a light surface, not a dark one, until it gets its own
     treatment. */
  --bs-btn-color: var(--cx-ink);
  --bs-btn-bg: var(--cx-surface);
  --bs-btn-border-color: var(--cx-outline-strong);
  --bs-btn-hover-bg: var(--cx-surface-hover);
  --bs-btn-focus-shadow-rgb: var(--cx-brand-rgb);
}

.btn { --bs-btn-border-radius: var(--cx-radius); }

/* ---------- Forms -------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--cx-surface-lowest);
  border-color: var(--cx-outline-strong);
  color: var(--cx-ink);
  border-radius: var(--cx-radius);
}
.form-control::placeholder { color: var(--cx-ink-muted); }
.form-control:focus,
.form-select:focus {
  /* background-color restated: Bootstrap's own .form-control:focus (0,2,0) sets
     background-color: var(--bs-body-bg) at higher specificity than our base
     .form-control rule above (0,1,0), so without this line focus pulls the fill
     to --cx-bg instead of staying on the card-level surface. */
  background-color: var(--cx-surface-lowest);
  border-color: var(--cx-brand);
  box-shadow: 0 0 0 .25rem rgba(var(--cx-brand-rgb), .25);
}
/* Blue fill on every checkbox — and the review screens are made of checkboxes. */
.form-check-input {
  background-color: var(--cx-surface-lowest);
  border-color: var(--cx-outline-strong);
}
.form-check-input:checked {
  background-color: var(--cx-brand);
  border-color: var(--cx-brand);
}
.form-check-input:focus {
  border-color: var(--cx-brand);
  box-shadow: 0 0 0 .25rem rgba(var(--cx-brand-rgb), .25);
}
/* Bootstrap bakes a WHITE tick/dot into the checked checkbox/radio as a data:
   URI custom property (--bs-form-check-bg-image) — the identical white-on-coral
   failure the file header calls out for .btn-primary, but here it cannot be
   fixed by rebinding a token: a data: URI is an opaque string and var() does not
   interpolate inside url(), so this is the ONE place in this file where a colour
   has to be a literal. Measured (rendered): white tick on --cx-brand is 2.73:1
   in light, 2.23:1 in dark — both fail WCAG 1.4.11 (needs 3:1). Swapped the
   glyph ink for --cx-brand-ink (%233d0c07 light, %23650002 dark); everything
   else in each URI is byte-identical to bootstrap.min.css. Pinned to the token
   by tests/test_theme_layer.py::test_the_form_check_glyph_ink_matches_the_brand_ink_token
   so a token change cannot silently leave the glyph behind at 2.7:1. */
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%233d0c07' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%233d0c07'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23650002' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23650002'/%3e%3c/svg%3e");
}

/* ---------- Pagination --------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--cx-ink);
  --bs-pagination-bg: var(--cx-surface-lowest);
  --bs-pagination-border-color: var(--cx-outline-strong);
  --bs-pagination-hover-color: var(--cx-ink);
  --bs-pagination-hover-bg: var(--cx-surface-hover);
  --bs-pagination-hover-border-color: var(--cx-outline-strong);
  --bs-pagination-focus-color: var(--cx-ink);
  --bs-pagination-focus-bg: var(--cx-surface-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--cx-brand-rgb), .25);
  --bs-pagination-active-color: var(--cx-brand-ink);
  --bs-pagination-active-bg: var(--cx-brand);
  --bs-pagination-active-border-color: var(--cx-brand);
  --bs-pagination-disabled-color: var(--cx-ink-muted);
  --bs-pagination-border-radius: var(--cx-radius);
}
.page-link { border-radius: var(--cx-radius); }
.page-item + .page-item { margin-left: .25rem; }

/* ---------- Alerts (flashed feedback — on EVERY screen) ------------------- */
/* A flash() with no category renders `alert alert-message`, which Bootstrap does
   not style at all — hence the base .alert rule, not just the three variants. */
.alert {
  --bs-alert-bg: var(--cx-surface);
  --bs-alert-color: var(--cx-ink);
  --bs-alert-border-color: transparent;
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow);
}
.alert-success { --bs-alert-bg: var(--cx-answered-bg); --bs-alert-color: var(--cx-answered-ink); }
.alert-warning { --bs-alert-bg: var(--cx-new-bg);      --bs-alert-color: var(--cx-new-ink); }
.alert-danger  { --bs-alert-bg: var(--cx-failed-bg);   --bs-alert-color: var(--cx-failed-ink); }
.alert-info    { --bs-alert-bg: var(--cx-own-bg);      --bs-alert-color: var(--cx-own-ink); }

/* ---------- Surfaces ----------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--cx-ink);
  /* Deliberately --cx-outline, not -strong: this is a structural row separator,
     not a UI-component boundary, so WCAG 1.4.11 does not apply here, and a
     heavier grid would fight the card look. Not an oversight. */
  --bs-table-border-color: var(--cx-outline);
  --bs-table-hover-bg: var(--cx-surface-hover);
  --bs-table-hover-color: var(--cx-ink);
}
.table > :not(caption) > * > * { background-color: transparent; }