/* ==========================================================================
   Buttons — the single owner of .btn / .btn-* chrome.

   Consolidated from theme.css (vendor) and theme-override.css (app layer);
   every value here is the one that already resolved after that cascade, so
   this file is a behaviour-preserving replacement for both button blocks.

   Load order assumed: bootstrap.min.css -> theme.css -> theme-override.css
   -> THIS FILE. Bootstrap is earlier and never !important on button
   selectors, so plain declarations win by file order or by the extra
   :not()/compound specificity used below.

   Both themes run the same ladder: a variant names --btn-rgb / --btn-fg and
   the accent triplets in tokens.css drop to the deeper -600 tier on light,
   so nothing here needs a light counterpart.

   The !important marks that survived are individually justified inline.
   Everything else lost its !important: with theme.css's and
   theme-override.css's button rules gone, plain declarations already beat
   Bootstrap.

   COLOUR MODEL (unchanged): a variant is a low-alpha tint of its own hue
   with a matching coloured label and edge; the tint deepens through
   hover -> focus -> active and thins out when disabled. Outline variants
   are the same ladder with a transparent rest state. Each variant declares
   only --btn-rgb / --btn-fg; the shared consumer rules below do the rest.

   RULE ORDER IS LOAD-BEARING. Three groups sit at equal (0,1,0)
   specificity and currently resolve by source order:
     .btn (geometry)  <  .btn-white  <  .btn-border  <  .btn-link
     <  the colour variants.
   That is why the legacy vendor tiers appear ABOVE the colour variants:
   today a `.btn-border.btn-primary` shows the primary tint background and
   the vendor's blue label/edge, and that is preserved. Do not reorder.
   ========================================================================== */


/* --- Base -------------------------------------------------------------- */

/* Geometry, type and motion. Bootstrap's .btn supplies display, colour,
   text-align, vertical-align, user-select, line-height and the base
   background; only the properties the app actually changes are restated.
   theme.css's competing padding (.43rem 1.4rem), font-size (14px) and
   border-radius (3px) all lost to these and are not carried over. */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: var(--font-weight-control);
    cursor: pointer;
    opacity: 1;
    word-wrap: normal;
}

/* Vendor hover/focus fade. Note this also swaps the transition to .3s for
   the duration of the interaction — kept verbatim. */
.btn:hover,
.btn:focus {
    opacity: var(--btn-hover-fade);
    transition: all .3s;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow-hover);
}

/* Flex centering only where it is needed; block buttons keep display:block
   (Bootstrap's .btn-block) unless they also sit in a .btn-group, which is
   the pre-existing behaviour. */
.btn-group .btn,
.btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Bootstrap flattens a group member's edges from its DOM position among ALL
   siblings, so a non-button sibling — an anchored popover, a hidden input —
   makes a lone button lose the radius on the side facing it. Restore the
   radius on any edge that does not actually face another button. Both
   selectors outrank the vendor's :not(:first-child) / :not(:last-child)
   pair on specificity. */
.btn-group > .btn:not(.btn ~ .btn):not(.btn-group ~ .btn) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-group > .btn:not(:has(~ .btn)):not(:has(~ .btn-group)) {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-block {
    display: block;
    width: 100%;
}

/* Disabled. Only :disabled suppresses the hover lift — an <a class="btn
   disabled"> still lifts today, and that is preserved. The higher
   specificity of the :hover forms is what turns the lift off, so no
   !important is needed. */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Vendor: hovering an inert button relaxes the fade back to .65. Beats the
   .5 above on specificity. */
.btn.disabled:hover,
.btn:hover:disabled {
    opacity: 0.65;
}

/* KEPT !important (1): guards the inert opacity for elements carrying the
   `disabled` attribute against any equal-specificity opacity rule elsewhere
   in the app. Pairs with the `a[disabled], button[disabled] {
   pointer-events: none }` rule, which is NOT a button rule and stays in
   theme-override.css. */
a.btn[disabled],
button.btn[disabled] {
    opacity: .65 !important;
}


/* --- Icon-slot buttons ------------------------------------------------- */

/* Square buttons sized to their icon. theme.css's .btn-icon font-size
   (.9375rem), line-height (normal) and padding (0) are not carried over:
   all three already lost to the .btn / .btn.btn-icon rules above. */
.btn-icon {
    height: 2.5125rem;
    min-width: 2.5125rem;
    width: 2.5125rem;
    overflow: hidden;
    position: relative;
}

.btn.btn-icon {
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.btn-sm.btn-icon {
    padding: 0;
}

.btn.btn-icon:hover {
    text-decoration: none;
}

.btn-icon.btn-lg {
    height: 2.75rem;
    min-width: 2.75rem;
    width: 2.75rem;
}

.btn-icon.btn-sm {
    height: 2rem;
    min-width: 2rem;
    width: 2rem;
}

/* theme-override's 1.439rem replaced theme.css's 1.6875rem; only the
   surviving value is carried. */
.btn-icon.btn-xs {
    height: 1.439rem;
    min-width: 1.439rem;
    width: 1.439rem;
    font-size: .7rem;
}


/* --- Sizes ------------------------------------------------------------- */

/* Only padding and font-size actually differ from the base: theme.css's
   .btn-lg border-radius (3px) and font-weight (400) both lost to the .btn
   rule above, so .btn-lg keeps the base 6px radius and 500 weight. */
.btn-lg {
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
}

/* theme.css's .btn-sm / .btn-xs (font-size 11px/10px, padding 5px 9px /
   4px 8px) are fully dead — the :not(.btn-icon) rules below beat them for
   text buttons and .btn / .btn.btn-icon beat them for icon buttons. Not
   carried over. */
.btn-sm {
    line-height: 1.4;
}

.btn-sm:not(.btn-icon) {
    padding: 0.306rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 6px;
    line-height: 1.7;
}

.btn-xs:not(.btn-icon) {
    padding: 0.25rem 0.5rem;
    font-size: 0.55rem;
    border-radius: 6px;
}

/* Smaller lift shadow for small buttons; must stay after .btn:hover. */
.btn-sm:hover {
    transform: translateY(-1px);
    box-shadow: var(--btn-shadow-hover-sm);
}

/* Vendor icon-plus-label slot. */
.btn .btn-label {
    display: inline-block;
}

.btn .btn-label i {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
    margin-left: -2px;
    line-height: 0;
    margin-top: -2.5px;
}

.btn-lg .btn-label i {
    font-size: 27px;
    vertical-align: middle;
    margin-right: 2px;
    margin-left: -7px;
    line-height: 0;
    margin-top: -2.5px;
}


/* --- Shapes ------------------------------------------------------------ */

/* KEPT !important (2, 3): the pill radii have to beat .btn-sm:not(.btn-icon)
   and .btn-xs:not(.btn-icon) above (0,2,0), plus the `.btn-sm, .form-control-sm,
   … { border-radius: 6px }` rule that stays in theme-override.css. Both
   combinations are live in templates (`btn-round btn-sm`,
   `btn-rounded btn-xs`). */
.btn-round {
    border-radius: 100px !important;
}

.btn-rounded {
    border-radius: 60px !important;
}

.btn-round .toggle-handle {
    border-radius: 50px;
}


/* --- Legacy vendor tiers ------------------------------------------------
   .btn-white / .btn-border / .btn-link predate the token model and are
   still used (the preview-UI gallery plus a handful of pages). They sit
   here, ABOVE the colour variants, because that is their relative order in
   the current cascade: a variant's tinted background deliberately wins
   over .btn-border's and .btn-link's `transparent`, while their compound
   `.btn-border.btn-<colour>` / `.btn-link.btn-<colour>` label and edge
   colours win on specificity. Every !important in these rules was
   redundant once the ordering is explicit and has been dropped.
   ----------------------------------------------------------------------- */

.btn-white,
.btn-white:hover,
.btn-white:focus,
.btn-white:disabled {
    background: #ffffff;
    color: var(--chrome-base);
}

.btn-border,
.btn-border:hover,
.btn-border:focus {
    background: transparent;
}

.btn-border.btn-white {
    color: #ffffff;
    border: 1px solid #ffffff;
}

.btn-border.btn-black {
    color: var(--chrome-base);
    border: 1px solid var(--chrome-base);
}

.btn-border.btn-primary {
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

.btn-border.btn-secondary {
    color: var(--color-purple);
    border: 1px solid var(--color-purple);
}

.btn-border.btn-info {
    color: #48ABF7;
    border: 1px solid #48ABF7;
}

.btn-border.btn-success {
    color: #31CE36;
    border: 1px solid #31CE36;
}

.btn-border.btn-warning {
    color: #FFAD46;
    border: 1px solid #FFAD46;
}

.btn-border.btn-danger {
    color: var(--color-red);
    border: 1px solid var(--color-red);
}

.btn-border.btn-light {
    border: 1px solid #efefef;
    background: #fff;
}

.btn-link {
    border: 0;
    background: transparent;
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: underline;
    background: transparent;
    border: 0;
}

.btn-link.btn-black,
.btn-link.btn-black:hover {
    color: var(--chrome-base);
}

.btn-link.btn-primary,
.btn-link.btn-primary:hover {
    color: var(--color-blue);
}

.btn-link.btn-secondary,
.btn-link.btn-secondary:hover {
    color: var(--color-purple);
}

.btn-link.btn-info,
.btn-link.btn-info:hover {
    color: #48ABF7;
}

.btn-link.btn-success,
.btn-link.btn-success:hover {
    color: #31CE36;
}

.btn-link.btn-warning,
.btn-link.btn-warning:hover {
    color: #FFAD46;
}

.btn-link.btn-danger,
.btn-link.btn-danger:hover {
    color: var(--color-red);
}


/* --- Colour variants: the shared consumers ------------------------------
   Every variant below declares only its token triple; these five rules are
   the only place a button's background / label / edge is actually written.

   Token contract (all --btn-* live in this file):
     --btn-rgb            the variant's "R, G, B" channel triple
     --btn-bg / -hover / -active / -disabled
     --btn-fg / -hover / -focus / -active / -disabled
     --btn-border / -hover / -active / -disabled
     --btn-ring          the focus halo colour

   --btn-fg-focus and --btn-fg-active default to --btn-fg-hover, which
   defaults to --btn-fg, so a variant only names the states that differ.
   ----------------------------------------------------------------------- */

:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
    .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-danger, .btn-outline-warning, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark) {
    --btn-fg-hover: var(--btn-fg);
    --btn-fg-focus: var(--btn-fg-hover);
    --btn-fg-active: var(--btn-fg-hover);

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

:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
    .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-danger, .btn-outline-warning, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark):hover:not(:disabled) {
    background: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
    border-color: var(--btn-border-hover);
}

/* KEPT !important (4): on the box-shadow only. theme.css carries a blanket
   `*:focus { box-shadow: none !important }` (not a button rule — it stays),
   so a focus halo is only visible if it is !important at higher
   specificity. The colour declarations here need no !important: they beat
   Bootstrap's .btn-*:focus by source order at equal specificity. */
:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
    .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-danger, .btn-outline-warning, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark):is(:focus, .focus) {
    background: var(--btn-bg-hover);
    color: var(--btn-fg-focus);
    border-color: var(--btn-border-hover);
    box-shadow: 0 0 0 0.2rem var(--btn-ring) !important;
}

/* KEPT !important (5, 6, 7): Bootstrap's pressed state is
   `.btn-*:not(:disabled):not(.disabled):active` (0,4,0), which outranks
   this selector. !important is the cheapest way to beat it without
   duplicating Bootstrap's guard chain, and it matches what the old rules
   did. */
:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
    .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-danger, .btn-outline-warning, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark):is(:active, .active) {
    background: var(--btn-bg-active) !important;
    color: var(--btn-fg-active) !important;
    border-color: var(--btn-border-active) !important;
}

:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
    .btn-info, .btn-light, .btn-dark,
    .btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-danger, .btn-outline-warning, .btn-outline-info,
    .btn-outline-light, .btn-outline-dark):is(:disabled, .disabled) {
    background: var(--btn-bg-disabled);
    color: var(--btn-fg-disabled);
    border-color: var(--btn-border-disabled);
}


/* --- Tint variants ------------------------------------------------------
   Diagonal two-stop wash of the variant's own hue. The alpha ladder is
   identical for all six, so it is written once here, and every step is a
   token from tokens.css: dark runs a translucent tint that composites over
   whatever surface the button lands on, light runs the same ladder at full
   opacity so a button is a solid, filled control.

   Hover and active cannot deepen by raising the alpha once light has run
   it to 1, so the raised states also carry --btn-shade-*, a neutral scrim
   laid over the fill. Dark leaves the scrim transparent and moves on
   alpha alone; light holds the alpha and moves on the scrim.

   .btn-light and .btn-dark sit outside it: the hue ladder goes solid on the
   light theme, which would paint the neutrals as a black button labelled
   "light" and lose .btn-light's label entirely. They run their own below —
   light a wash, dark a well — at metrics identical to this one.
   ----------------------------------------------------------------------- */

:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
    .btn-info) {
    /* Resting depth belongs to the filled variants alone. On .btn it would
       also land on the ghost and link buttons, which are meant to have no
       box at all until you touch them. */
    box-shadow: var(--btn-shadow);

    --btn-bg: linear-gradient(
        135deg,
        rgba(var(--btn-rgb), var(--btn-fill-a)),
        rgba(var(--btn-rgb), var(--btn-fill-b))
    );
    --btn-bg-hover:
        linear-gradient(var(--btn-shade-hover), var(--btn-shade-hover)),
        linear-gradient(
            135deg,
            rgba(var(--btn-rgb), var(--btn-fill-hover-a)),
            rgba(var(--btn-rgb), var(--btn-fill-hover-b))
        );
    --btn-bg-active:
        linear-gradient(var(--btn-shade-active), var(--btn-shade-active)),
        linear-gradient(
            135deg,
            rgba(var(--btn-rgb), var(--btn-fill-active-a)),
            rgba(var(--btn-rgb), var(--btn-fill-active-b))
        );
    --btn-bg-disabled: linear-gradient(
        135deg,
        rgba(var(--btn-rgb), var(--btn-fill-disabled-a)),
        rgba(var(--btn-rgb), var(--btn-fill-disabled-b))
    );
    --btn-border: rgba(var(--btn-rgb), var(--btn-edge-a));
    --btn-border-hover: rgba(var(--btn-rgb), var(--btn-edge-hover-a));
    --btn-border-active: rgba(var(--btn-rgb), var(--btn-edge-active-a));
    --btn-border-disabled: rgba(var(--btn-rgb), var(--btn-edge-disabled-a));
    /* Disabled stays a translucent wash in both themes — a solid fill with
       a dimmed label reads as live-but-dark, where a thin one reads as
       switched off. */
    --btn-fg-disabled: rgba(var(--btn-rgb), 0.55);
    --btn-ring: rgba(var(--btn-rgb), 0.25);
}

/* The label is the variant's own hue while the fill is a translucent tint
   of it, and flips to --btn-fg-on-fill once a theme fills the button
   solid, where the hue would sit on itself. Only light defines that token;
   dark leaves it unset and takes the fallback. */

.btn-primary {
    --btn-rgb: var(--bs-primary-fill-rgb);
    --btn-fg: var(--btn-fg-on-fill, var(--bs-primary));
}

.btn-success {
    --btn-rgb: var(--bs-success-fill-rgb);
    --btn-fg: var(--btn-fg-on-fill, var(--bs-success));
}

.btn-warning {
    --btn-rgb: var(--bs-warning-fill-rgb);
    --btn-fg: var(--btn-fg-on-fill, var(--bs-warning));
}

.btn-danger {
    --btn-rgb: var(--bs-danger-fill-rgb);
    --btn-fg: var(--btn-fg-on-fill, var(--bs-danger));
}

.btn-info {
    --btn-rgb: var(--bs-info-fill-rgb);
    --btn-fg: var(--btn-fg-on-fill, var(--bs-info));
}

/* Grey has no hue to brighten into, so its label goes to full-strength
   text on every raised state instead. */
.btn-secondary {
    --btn-rgb: var(--bs-secondary-fill-rgb);
    --btn-fg: var(--btn-fg-on-fill, var(--bs-secondary));
    --btn-fg-hover: var(--btn-fg-on-fill, var(--text-primary));
}

/* The two neutral variants. They name a weight on the text ramp rather than
   a hue — light is its bright end, dark its dim one — and both flip with the
   theme, so each stays legible on either page. */
.btn-light {
    --btn-rgb: var(--bs-light-rgb);
    --btn-fg: var(--tag-light-fg);
    --btn-fg-hover: var(--text-primary);
    --btn-fg-disabled: rgba(var(--bs-light-rgb), 0.3);
    --btn-bg: linear-gradient(
        135deg,
        rgba(var(--bs-light-rgb), 0.1),
        rgba(var(--bs-light-rgb), 0.05)
    );
    --btn-bg-hover: linear-gradient(
        135deg,
        rgba(var(--bs-light-rgb), 0.15),
        rgba(var(--bs-light-rgb), 0.08)
    );
    --btn-bg-active: linear-gradient(
        135deg,
        rgba(var(--bs-light-rgb), 0.22),
        rgba(var(--bs-light-rgb), 0.12)
    );
    --btn-bg-disabled: linear-gradient(
        135deg,
        rgba(var(--bs-light-rgb), 0.05),
        rgba(var(--bs-light-rgb), 0.02)
    );
    /* Edge one step quieter than a hue's 0.4: white at full edge alpha blooms
       and the button reads larger than the coloured ones beside it. */
    --btn-border: rgba(var(--bs-light-rgb), 0.22);
    --btn-border-hover: rgba(var(--bs-light-rgb), 0.32);
    --btn-border-active: rgba(var(--bs-light-rgb), 0.4);
    --btn-border-disabled: rgba(var(--bs-light-rgb), 0.1);
    --btn-ring: rgba(var(--bs-light-rgb), 0.15);
}

.btn-dark {
    --btn-rgb: var(--bs-dark-rgb);
    --btn-fg: var(--bs-dark-fg);
    --btn-fg-hover: var(--bs-dark-fg);
    --btn-fg-active: var(--bs-dark-fg);
    --btn-bg: var(--bs-dark-well);
    --btn-bg-hover: color-mix(in srgb, var(--bs-dark-well) 86%, #fff);
    --btn-bg-active: color-mix(in srgb, var(--bs-dark-well) 76%, #fff);
    --btn-bg-disabled: color-mix(in srgb, var(--bs-dark-well) 45%, transparent);
    --btn-fg-disabled: rgba(var(--bs-dark-fg-rgb), 0.45);
    --btn-border: var(--btn-dark-border);
    --btn-border-hover: var(--btn-dark-border);
    --btn-border-active: var(--btn-dark-border);
    --btn-border-disabled: rgba(0, 0, 0, 0.25);
    --btn-ring: rgba(var(--bs-dark-fg-rgb), 0.22);
}


/* --- Outline variants ---------------------------------------------------
   Same ladder, transparent rest state, flat (non-gradient) fills.
   ----------------------------------------------------------------------- */

:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
    .btn-outline-danger, .btn-outline-warning, .btn-outline-info) {
    --btn-bg: transparent;
    --btn-bg-hover: rgba(var(--btn-rgb), 0.15);
    --btn-bg-active: rgba(var(--btn-rgb), 0.25);
    --btn-bg-disabled: transparent;
    --btn-border: rgba(var(--btn-rgb), 0.4);
    --btn-border-hover: rgba(var(--btn-rgb), 0.6);
    --btn-border-active: rgba(var(--btn-rgb), 0.7);
    --btn-border-disabled: rgba(var(--btn-rgb), 0.2);
    --btn-fg-disabled: rgba(var(--btn-rgb), 0.4);
    --btn-ring: rgba(var(--btn-rgb), 0.25);
}

.btn-outline-primary {
    --btn-rgb: var(--bs-primary-rgb);
    --btn-fg: var(--bs-primary);
}

.btn-outline-success {
    --btn-rgb: var(--bs-success-rgb);
    --btn-fg: var(--bs-success);
}

.btn-outline-warning {
    --btn-rgb: var(--bs-warning-rgb);
    --btn-fg: var(--bs-warning);
}

.btn-outline-danger {
    --btn-rgb: var(--bs-danger-rgb);
    --btn-fg: var(--bs-danger);
}

.btn-outline-info {
    --btn-rgb: var(--bs-info-rgb);
    --btn-fg: var(--bs-info);
}

/* Hover is the only raised state that promotes the label to full-strength
   text; focus and pressed keep the grey. */
.btn-outline-secondary {
    --btn-rgb: var(--bs-secondary-rgb);
    --btn-fg: var(--bs-secondary);
    --btn-fg-hover: var(--text-primary);
    --btn-fg-focus: var(--bs-secondary);
    --btn-fg-active: var(--bs-secondary);
}

.btn-outline-light {
    --btn-fg: var(--tag-light-fg);
    --btn-fg-hover: var(--text-primary);
    --btn-fg-disabled: rgba(var(--bs-light-rgb), 0.3);
    --btn-bg: transparent;
    --btn-bg-hover: rgba(var(--bs-light-rgb), 0.08);
    --btn-bg-active: rgba(var(--bs-light-rgb), 0.15);
    --btn-bg-disabled: transparent;
    --btn-border: rgba(var(--bs-light-rgb), 0.2);
    --btn-border-hover: rgba(var(--bs-light-rgb), 0.3);
    --btn-border-active: rgba(var(--bs-light-rgb), 0.4);
    --btn-border-disabled: rgba(var(--bs-light-rgb), 0.1);
    --btn-ring: rgba(var(--bs-light-rgb), 0.15);
}

/* Mirrors .btn-outline-light above. It used to be left to stock Bootstrap,
   which paints a near-black edge that disappears into a dark page — so it
   draws with --bs-dark-edge, the end of the pair that reads on this theme. */
.btn-outline-dark {
    --btn-fg: var(--bs-dark-edge);
    --btn-fg-hover: var(--text-primary);
    --btn-fg-disabled: rgba(var(--bs-dark-edge-rgb), 0.3);
    --btn-bg: transparent;
    --btn-bg-hover: rgba(var(--bs-dark-edge-rgb), 0.08);
    --btn-bg-active: rgba(var(--bs-dark-edge-rgb), 0.15);
    --btn-bg-disabled: transparent;
    --btn-border: rgba(var(--bs-dark-edge-rgb), 0.22);
    --btn-border-hover: rgba(var(--bs-dark-edge-rgb), 0.32);
    --btn-border-active: rgba(var(--bs-dark-edge-rgb), 0.4);
    --btn-border-disabled: rgba(var(--bs-dark-edge-rgb), 0.1);
    --btn-ring: rgba(var(--bs-dark-edge-rgb), 0.15);
}


/* --- Ghost --------------------------------------------------------------
   Quiet action buttons for list rows and toolbars: grey at rest, brightens
   on hover. Pair with .btn-icon in table rows. Add .btn-ghost-danger on
   destructive actions so they go red on hover instead.

   The :focus halo below is left non-!important exactly as it is today —
   which means theme.css's `*:focus { box-shadow: none !important }`
   currently suppresses it. Kept verbatim rather than "fixed", since
   turning it on would be a visual change.
   ----------------------------------------------------------------------- */

.btn.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-tertiary);
    transition-property: color, background-color;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.btn.btn-ghost:hover:not(:disabled) {
    background: var(--surface-3);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

.btn.btn-ghost:focus,
.btn.btn-ghost.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--text-tertiary-rgb), 0.25);
}

.btn.btn-ghost-danger:hover:not(:disabled),
.btn.btn-ghost-danger:focus {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}


/* --- Trailing overrides -------------------------------------------------
   These must stay after the colour variants: .btn-link is a text button and
   must not pick up a variant's lift shadow when the two classes are
   combined.
   ----------------------------------------------------------------------- */

.btn-link:hover,
.btn-link:focus {
    box-shadow: none;
}

/* KEPT !important (8): an opt-out utility, and it has to beat
   .btn-link:hover / Bootstrap's .btn-link:hover underline at equal
   specificity. Matches Bootstrap's own utility semantics. */
.btn-link.text-decoration-none {
    text-decoration: none !important;
}

/* KEPT !important (9): the icon inherits its colour from the button, but
   several variants paint the label directly; !important keeps the hover
   brightening from being outranked. Carried over unchanged. */
.btn-hover-icon:hover .fa {
    color: #F0F1F3 !important;
}

/* Count pill rendered inside a button label. */
.btn-count-badge {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.3em 0.5em;
    font-size: 0.85em;
}