/* ============================================================================
   BOOTSTRAP BRIDGE — feeds our theme tokens into Bootstrap components.
   ----------------------------------------------------------------------------
   Loads AFTER the Bootstrap CDN stylesheet and AFTER scss/index.css, so every
   rule here wins ties by plain source order — no !important needed anywhere.

   Colors in this file MUST come from var(--...) tokens, never hex literals.
   This is a TEMPLATE file shared by all tenants: extend it when a new
   Bootstrap component needs branding, but never edit it per client —
   per-client color values belong in domain_color/<domain>/theme.css only.
   ========================================================================== */

/* --- Text links ---------------------------------------------------------- */
a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

/* --- Buttons -------------------------------------------------------------- */
/* THE THEME OWNS EXACTLY TWO BUTTONS: .btn-primary and .btn-secondary.
   Every other variant is left completely alone. That is deliberate, not an
   omission — read this before adding a third.

   A form is only readable if its buttons rank themselves: the action that
   commits has to outweigh the half-dozen utility actions beside it ("Image",
   "Reset", "Copy", "Add", "Search"). Pull every variant into the same branded
   slab and that ranking vanishes — the page turns into a wall of identical
   buttons and the user has to read all of them to find the one that matters.
   So the brand is spent where it buys something:

     .btn-primary     -> THEMED. The commit action (LOGIN, SUBMIT, PAY, SAVE).
     .btn-secondary   -> THEMED. The deliberate quieter partner (Cancel, Reset).
     everything else  -> STOCK BOOTSTRAP. Not styled here at all.

   "Everything else" means .btn-outline-primary, .btn-outline-secondary,
   .btn-outline-dark, .btn-success, .btn-danger, .btn-warning, .btn-info,
   .btn-light, .btn-link, plain .btn — and any variant added later. They keep
   Bootstrap's own colors, metrics, radius and hover, which is what makes them
   read as lighter-weight next to the two themed slabs.

   Do NOT add a variant here to "make it match the others". Matching IS the
   problem this section exists to prevent. If a button genuinely deserves brand
   weight, change its class to .btn-primary or .btn-secondary in the markup —
   that is the whole point of having two themed classes and a stock rest.
   (.btn-success / .btn-danger are additionally SEMANTIC — yes/no, delete — and
   must stay Bootstrap-standard on every tenant so their meaning never shifts.)

   ONE recipe for both themed variants, so tenants stay consistent:

     base rule   ->  background SHORTHAND + border + text from tokens
     state rule  ->  :hover, :focus-visible, :active swap the SAME properties

   Why the shorthand: --btn-primary-bg may be a GRADIENT (a background-image),
   and may also carry a solid base color in front of it. Bootstrap's own states
   (--bs-btn-hover-bg, .btn:active) only change background-COLOR, which paints
   UNDERNEATH an opaque gradient and never shows. Swapping the whole
   `background` shorthand replaces both halves outright, so every theme's
   hover/pressed state is always visible.
   Keep these shorthands; never narrow one to background-color.

   HOVER IS A COLOR CHANGE ONLY. The state rules touch background, border-color
   and color — nothing else. No glow, no box-shadow swap, no transform: the
   rest-state shadow carries straight through, so the button never lifts,
   spreads or halos under the pointer. Style the states through the theme's
   -hover- tokens; do not reintroduce a shadow here.

   The --bs-btn-* variables are still set so Bootstrap-internal styling
   (disabled, .btn-check states) agrees with the theme. */

/* SHAPE — the metrics shared by the two THEMED variants, so a primary and the
   secondary next to it are the same slab in different colors. Stock variants
   are not listed here on purpose: their smaller, lighter Bootstrap metrics are
   part of how they stay subordinate.
   A page must never restate these in its own <style> block — see the
   "two themed buttons" note in _README.md. */
.btn-primary,
.btn-secondary {
  border: 2px solid transparent;   /* each variant supplies its own border-color */
  color: var(--btn-primary-color);
  font-weight: bold;
  font-size: 14px;
  padding: 8px 16px;
  text-align: center;
  text-transform: uppercase;
  /* Tight, grounded shadow — the button reads as a solid slab sitting ON the
     page, not a card floating above it. An offset, blurred shadow here is what
     makes a button look soft; keep this one short and close. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* .btn-sm keeps its compact footprint — same style, less of it. Without this
   the shared metrics above would inflate every small in-card button. */
.btn-sm.btn-primary,
.btn-sm.btn-secondary {
  font-size: 12px;
  padding: 4px 10px;
}

.btn-primary {
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-color: var(--btn-primary-color);
  --bs-btn-hover-bg: var(--hover-color);
  --bs-btn-hover-border-color: var(--hover-color);
  --bs-btn-hover-color: var(--btn-primary-hover-color);
  --bs-btn-active-bg: var(--hover-color);
  --bs-btn-active-border-color: var(--hover-color);
  --bs-btn-active-color: var(--btn-primary-hover-color);
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-btn-disabled-color: var(--btn-primary-color);

  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border-color);
  color: var(--btn-primary-color);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border-color);
  color: var(--btn-primary-hover-color);
}

.btn-secondary {
  --bs-btn-bg: var(--btn-secondary-bg);
  --bs-btn-border-color: var(--btn-secondary-border-color);
  --bs-btn-color: var(--btn-secondary-color);
  --bs-btn-hover-bg: var(--btn-secondary-hover-bg);
  --bs-btn-hover-border-color: var(--btn-secondary-hover-border-color);
  --bs-btn-hover-color: var(--btn-secondary-hover-color);
  --bs-btn-active-bg: var(--btn-secondary-hover-bg);
  --bs-btn-active-border-color: var(--btn-secondary-hover-border-color);
  --bs-btn-active-color: var(--btn-secondary-hover-color);
  --bs-btn-disabled-bg: var(--btn-secondary-bg);
  --bs-btn-disabled-border-color: var(--btn-secondary-border-color);
  --bs-btn-disabled-color: var(--btn-secondary-color);

  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border-color);
  color: var(--btn-secondary-color);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active {
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border-color);
  color: var(--btn-secondary-hover-color);
}

/* NOTE — there is no .btn-outline-primary / .btn-outline-secondary rule here,
   and there was one until this file said otherwise. The outline variants used
   to be filled with the primary and secondary backgrounds, which is precisely
   how "Image", "Reset", "Copy", "Add" and "Broadcast SMS" ended up looking
   exactly like SAVE. They are now stock Bootstrap: light, outlined, quiet.
   Restoring a rule for them re-creates the monotony — don't. */

/* --- Form focus (skipped inside .custom-form, which strips rings) -------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--hover-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* --- Checks, radios, switches -------------------------------------------- */
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  border-color: var(--hover-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}

/* --- Nav pills / active states ------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-color);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary-color);
}

/* --- Pagination ----------------------------------------------------------- */
.page-link {
  color: var(--link-color);
}

.active > .page-link,
.page-link.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* --- Progress bars --------------------------------------------------------- */
.progress-bar {
  background-color: var(--primary-color);
}