/*
 * ONE look for the brand-primary button.
 *
 * The theme's brand re-colour is half-done. theme-default.css sets
 *
 *     .btn-outline-primary { color: #ee8437; border-color: #b3b6ff; }
 *     .btn-outline-primary:hover { background-color: #e8e9ff !important; }
 *
 * - orange ink inside a PERIWINKLE border, hovering to an indigo wash - because
 * `--bs-primary` itself is still INDIGO (#666cff) in core.css. So an outline-primary
 * button renders as a pale blue chip with an orange glyph in it, which is what "the
 * action button colours are not right" was. Same story for the waves ripple, which the
 * theme paints from rgba(102, 108, 255, …).
 *
 * This sheet re-points the button to the brand colour in every state. It MUST load after
 * the theme - see the link order in layouts/app.blade.php and layouts/guest.blade.php,
 * the same rule bim-dropdowns.css and bim-tables.css follow. The `!important`s are
 * required because the theme states its own hover/active values with !important.
 *
 * NOTE: the app's action palette (config/ui.php) does NOT use outline-primary for any
 * action - `primary` belongs to create alone, and `edit` is cyan - precisely because
 * orange sits ~21 degrees from danger red (see that file's header). This sheet exists so
 * the places that still write the class by hand (the public knowledge base's "Read More",
 * the admin debug box) are at least the right colour.
 */

:root {
    /* The brand. The theme hard-codes the same literal in theme-default.css - if the brand
       ever moves, both change together. Nothing else in the app may invent an orange. */
    --bim-brand: #ee8437;
    --bim-brand-dark: #d9742a;

    /* The border tint for an OUTLINE button. The theme tints every outline variant to
       50% colour + 50% white - measured: danger #ff4d49 -> rgb(255,166,164), success
       #72e128 -> rgb(185,240,148). Matching that keeps this button the same visual WEIGHT
       as outline-danger beside it; a full-strength orange border reads as heavier than
       every other outline button in the app. */
    --bim-brand-border: #f7c29b;
}

.btn-outline-primary {
    color: var(--bim-brand);
    border-color: var(--bim-brand-border);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: #ffffff !important;
    background-color: var(--bim-brand) !important;
    border-color: var(--bim-brand) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    background-color: var(--bim-brand-dark) !important;
    border-color: var(--bim-brand-dark) !important;
}

/* The waves ripple is painted from the indigo --bs-primary by the theme. */
.btn-outline-primary.waves-effect .waves-ripple {
    background: radial-gradient(rgba(238, 132, 55, .25) 0, rgba(238, 132, 55, .35) 40%, rgba(238, 132, 55, .45) 50%, rgba(238, 132, 55, .55) 60%, rgba(255, 255, 255, 0) 70%);
}