/* ============================================================================
   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   ->  SOLID fill + matching border + text, from tokens
     state rule  ->  :hover, :focus-visible, :active swap the SAME properties

   SOLID ONLY - NO GRADIENTS, ON ANY TENANT (client 2026-09-03: "I don't want
   this style anywhere in the app"). The fill is painted with background-COLOR
   and background-image is pinned to none, so a gradient cannot reach a
   themed button from anywhere - not from a token, not from a stale tenant
   file on a server. The old shorthand tokens (--btn-primary-bg,
   --btn-primary-hover-bg, --btn-secondary-bg, --btn-secondary-hover-bg and
   their -border-color partners) are NOT read any more, on purpose: a
   per-client theme.css that still carries the retired lavender -> indigo
   gradient in them is simply inert.

   The tokens that ARE read, all plain colours:
     --btn-primary-fill / --btn-primary-hover-fill     (default: the brand
       colour, and that colour one step deeper)
     --btn-secondary-fill / --btn-secondary-hover-fill (default: graphite,
       and graphite one step deeper)
     --btn-primary-color / --btn-primary-hover-color, and the secondary pair
   The border is always the fill, so the slab reads as one flat colour with a
   firm edge. A tenant that sets nothing gets a correct, visibly-hovering
   button from its --primary-color alone.

   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. The deeper hover shade is derived with
   color-mix(); a browser without it darkens the whole slab with a filter
   instead, so the hover is visible everywhere.

   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);
  /* The guarantee: nothing can paint an image onto a themed button. */
  background-image: none;
}

/* .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 {
  --_btn-fill: var(--btn-primary-fill, var(--primary-color));
  --_btn-hover-fill: var(--btn-primary-hover-fill, var(--_btn-fill));
  --_btn-color: var(--btn-primary-color, #ffffff);
  --_btn-hover-color: var(--btn-primary-hover-color, var(--_btn-color));

  --bs-btn-bg: var(--_btn-fill);
  --bs-btn-border-color: var(--_btn-fill);
  --bs-btn-color: var(--_btn-color);
  --bs-btn-hover-bg: var(--_btn-hover-fill);
  --bs-btn-hover-border-color: var(--_btn-hover-fill);
  --bs-btn-hover-color: var(--_btn-hover-color);
  --bs-btn-active-bg: var(--_btn-hover-fill);
  --bs-btn-active-border-color: var(--_btn-hover-fill);
  --bs-btn-active-color: var(--_btn-hover-color);
  --bs-btn-disabled-bg: var(--_btn-fill);
  --bs-btn-disabled-border-color: var(--_btn-fill);
  --bs-btn-disabled-color: var(--_btn-color);

  background-color: var(--_btn-fill);
  border-color: var(--_btn-fill);
  color: var(--_btn-color);
}

.btn-secondary {
  --_btn-fill: var(--btn-secondary-fill, #475569);
  --_btn-hover-fill: var(--btn-secondary-hover-fill, var(--_btn-fill));
  --_btn-color: var(--btn-secondary-color, #ffffff);
  --_btn-hover-color: var(--btn-secondary-hover-color, var(--_btn-color));

  --bs-btn-bg: var(--_btn-fill);
  --bs-btn-border-color: var(--_btn-fill);
  --bs-btn-color: var(--_btn-color);
  --bs-btn-hover-bg: var(--_btn-hover-fill);
  --bs-btn-hover-border-color: var(--_btn-hover-fill);
  --bs-btn-hover-color: var(--_btn-hover-color);
  --bs-btn-active-bg: var(--_btn-hover-fill);
  --bs-btn-active-border-color: var(--_btn-hover-fill);
  --bs-btn-active-color: var(--_btn-hover-color);
  --bs-btn-disabled-bg: var(--_btn-fill);
  --bs-btn-disabled-border-color: var(--_btn-fill);
  --bs-btn-disabled-color: var(--_btn-color);

  background-color: var(--_btn-fill);
  border-color: var(--_btn-fill);
  color: var(--_btn-color);
}

/* STATES. Baseline: the hover fill token if the tenant set one, plus a mild
   darkening filter so the step is visible even when it did not. */
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active {
  background-color: var(--_btn-hover-fill);
  border-color: var(--_btn-hover-fill);
  color: var(--_btn-hover-color);
  filter: brightness(0.88);
}

/* Modern browsers: derive the deeper shade properly (one step toward black)
   when no hover token is set, and drop the filter so the text stays pure. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .btn-primary {
    --_btn-hover-fill: var(--btn-primary-hover-fill, color-mix(in srgb, var(--_btn-fill) 82%, #000000));
  }
  .btn-secondary {
    --_btn-hover-fill: var(--btn-secondary-hover-fill, color-mix(in srgb, var(--_btn-fill) 82%, #000000));
  }
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-primary:active,
  .btn-secondary:hover,
  .btn-secondary:focus-visible,
  .btn-secondary:active {
    filter: none;
  }
}

/* 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);
}