/**
 * AGSS / GTS unified action button design system.
 * Skin-controlled colors use --button-* tokens (mapped from Skin entity in SkinCssBuilder).
 * Status badges, workflow pills, and calendar status cells are NOT styled here.
 * Mobile sizing enforcement: wwwroot/css/buttons-mobile.css (load LAST in layout).
 */

/* -------------------------------------------------------------------------- */
/* Design tokens (static fallbacks; DB skin overrides via SkinCssBuilder)      */
/* -------------------------------------------------------------------------- */
:root {
    --button-bg: var(--ButtonBackgroundColor, #0F4C81);
    --button-text: var(--ButtonTextColor, #FFFFFF);
    --button-hover-bg: var(--WhiteButtonTextColor, #0B3A63);
    /* Text color while a button is hovered/filled. Defaults to white for contrast against the hover fill.
       Wire --ButtonHoverTextColor from a Skin field to make it configurable per company. */
    --button-hover-text: var(--ButtonHoverTextColor, #FFFFFF);
    --button-border: var(--ButtonBorderColor, #0F4C81);

    /* Layout — Job page action button screenshot reference (colors from Skin only) */
    --ds-btn-radius: 10px;
    --ds-btn-font-size: 14px;
    --ds-btn-font-family: 'Open Sans', sans-serif;
    --ds-btn-font-weight: 500;
    --ds-btn-shadow: none;
    --ds-btn-shadow-none: none;
    --ds-btn-outline-surface: var(--whitebg, #ffffff);
    /* Outline hover uses Skin Manager Button Hover Color (--button-hover-bg) via shared hover rules below */
    --ds-btn-gap: 8px;
    --ds-btn-row-gap: 8px;
    --ds-btn-min-height: 36px;
    --ds-btn-padding-y: 8px;
    --ds-btn-padding-x: 16px;

    /* Desktop size tiers (default action buttons = md) */
    --ds-btn-desktop-sm-height: 32px;
    --ds-btn-desktop-sm-padding-y: 6px;
    --ds-btn-desktop-sm-padding-x: 12px;
    --ds-btn-desktop-sm-font-size: 13px;
    --ds-btn-desktop-md-height: 36px;
    --ds-btn-desktop-md-padding-y: 8px;
    --ds-btn-desktop-md-padding-x: 16px;
    --ds-btn-desktop-md-font-size: 14px;
    --ds-btn-desktop-lg-height: 42px;
    --ds-btn-desktop-lg-padding-y: 10px;
    --ds-btn-desktop-lg-padding-x: 20px;
    --ds-btn-desktop-lg-font-size: 15px;

    /* Mobile compact tiers — enforced in buttons-mobile.css (≤991.98px) */
    --ds-btn-min-height-mobile: 26px;
    --ds-btn-padding-mobile-y: 2px;
    --ds-btn-padding-mobile-x: 6px;
    --ds-btn-font-size-mobile: 11px;
    --ds-btn-gap-mobile: 3px;
    --ds-btn-gap-mobile-inline: 3px;
    --ds-btn-mobile-sm-height: 24px;
    --ds-btn-mobile-sm-padding-y: 1px;
    --ds-btn-mobile-sm-padding-x: 6px;
    --ds-btn-mobile-sm-font-size: 10px;
    --ds-btn-mobile-md-height: 38px;
    --ds-btn-mobile-md-padding-y: 7px;
    --ds-btn-mobile-md-padding-x: 14px;
    --ds-btn-mobile-md-font-size: 14px;
    --ds-btn-focus-ring: 0 0 0 3px color-mix(in srgb, var(--button-bg, #0F4C81) 35%, transparent);
    --ds-btn-disabled-opacity: 0.55;

    /* Semantic action colors (not skin primary; use existing skin status tokens) */
    --ds-btn-success-bg: var(--SuccessText, #2e7d32);
    --ds-btn-success-text: #ffffff;
    --ds-btn-danger-bg: var(--ErrorText, #d32f2f);
    --ds-btn-danger-text: #ffffff;
    --ds-btn-warning-bg: var(--secondarycolor, #ed6c02);
    --ds-btn-warning-text: #ffffff;

    /* AGSS legacy alias */
    --buttoncolor: var(--button-text, #FFFFFF);
}

/* -------------------------------------------------------------------------- */
/* Base                                                                        */
/* -------------------------------------------------------------------------- */
.ds-btn,
button.ds-btn,
a.ds-btn,
input[type="submit"].ds-btn,
input[type="button"].ds-btn {
    font-family: var(--ds-btn-font-family);
    font-weight: var(--ds-btn-font-weight);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1.35;
    border-radius: var(--ds-btn-radius);
    border: 1px solid transparent;
    margin: 0 3px 10px 3px;
    padding: 0 13px;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ds-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-btn-focus-ring);
}

.ds-btn:disabled,
.ds-btn.is-disabled,
.ds-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: var(--ds-btn-disabled-opacity);
    pointer-events: none;
}

.ds-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

.ds-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ds-btn-spin 0.65s linear infinite;
    color: inherit;
    top: 50%;
    left: 50%;
    margin: -0.5em 0 0 -0.5em;
}

@keyframes ds-btn-spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------- */
/* Desktop sizes                                                               */
/* -------------------------------------------------------------------------- */
.ds-btn--xs,
.ds-btn.ds-btn--xs {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.ds-btn--sm,
.ds-btn.ds-btn--sm {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13px;
}

.ds-btn--md,
.ds-btn.ds-btn--md {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 14px;
}

.ds-btn--lg,
.ds-btn.ds-btn--lg {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 15px;
    border-radius: 10px;
}

/* Default size when no size class */
.ds-btn:not([class*="ds-btn--xs"]):not([class*="ds-btn--sm"]):not([class*="ds-btn--md"]):not([class*="ds-btn--lg"]):not([class*="mobile-"]) {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 14px;
}

/* -------------------------------------------------------------------------- */
/* Variants                                                                    */
/* -------------------------------------------------------------------------- */
.ds-btn--primary,
.ds-btn--primary:hover {
    color: var(--button-text, #FFFFFF);
}

.ds-btn--primary {
    background: var(--button-bg, #0F4C81);
    border-color: var(--button-border, #0F4C81);
    box-shadow: var(--ds-btn-shadow);
}

.ds-btn--primary:hover:not(:disabled):not(.is-disabled) {
    background: var(--button-hover-bg, #0B3A63);
    border-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
}

.ds-btn--primary:active:not(:disabled):not(.is-disabled) {
    filter: brightness(0.92);
}

.ds-btn--secondary {
    background: var(--ds-btn-outline-surface);
    border-color: var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
    box-shadow: var(--ds-btn-shadow-none);
}

.ds-btn--secondary:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

/* Filled primary — explicit only (.ds-btn--primary, .button--solid) */

.ds-btn--outline {
    background: var(--ds-btn-outline-surface);
    border-color: var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
    box-shadow: var(--ds-btn-shadow-none);
}

.ds-btn--outline:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

.ds-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--button-text, #FFFFFF);
    box-shadow: var(--ds-btn-shadow-none);
}

.ds-btn--ghost:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

.ds-btn--text {
    background: transparent;
    border-color: transparent;
    color: var(--button-text, #FFFFFF);
    box-shadow: var(--ds-btn-shadow-none);
    text-decoration: underline;
    min-height: auto;
    padding-left: 4px;
    padding-right: 4px;
}

.ds-btn--text:hover:not(:disabled):not(.is-disabled) {
    color: var(--button-text, #FFFFFF);
    opacity: 0.85;
    background: transparent;
}

.ds-btn--success {
    background: var(--ds-btn-success-bg);
    border-color: var(--ds-btn-success-bg);
    color: var(--ds-btn-success-text);
    box-shadow: var(--ds-btn-shadow);
}

.ds-btn--success:hover:not(:disabled):not(.is-disabled) {
    filter: brightness(0.92);
}

.ds-btn--danger {
    background: var(--ds-btn-danger-bg);
    border-color: var(--ds-btn-danger-bg);
    color: var(--ds-btn-danger-text);
    box-shadow: var(--ds-btn-shadow);
}

.ds-btn--danger:hover:not(:disabled):not(.is-disabled) {
    filter: brightness(0.92);
}

.ds-btn--warning {
    background: var(--ds-btn-warning-bg);
    border-color: var(--ds-btn-warning-bg);
    color: var(--ds-btn-warning-text);
    box-shadow: var(--ds-btn-shadow);
}

.ds-btn--warning:hover:not(:disabled):not(.is-disabled) {
    filter: brightness(0.92);
}

.ds-btn--icon {
    padding: 0;
    min-width: 36px;
    width: 36px;
    min-height: 36px;
    border-radius: 8px;
}

.ds-btn--icon.ds-btn--xs { min-width: 28px; width: 28px; min-height: 28px; }
.ds-btn--icon.ds-btn--sm { min-width: 32px; width: 32px; min-height: 32px; }
.ds-btn--icon.ds-btn--lg { min-width: 42px; width: 42px; min-height: 42px; }

/* Floating action button */
.ds-btn--fab {
    position: fixed;
    z-index: 1050;
    bottom: 1.25rem;
    right: 1.25rem;
    min-width: 56px;
    min-height: 56px;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    margin: 0;
}

/* Mobile sticky CTA bar */
.ds-btn-bar--sticky-mobile {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* ff-btn / ds-btn explicit desktop size tiers (≥992px only)                   */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .ff-btn-desktop-sm,
    .ds-btn.ff-btn-desktop-sm,
    .ds-btn--desktop-sm {
        min-height: var(--ds-btn-desktop-sm-height);
        padding: var(--ds-btn-desktop-sm-padding-y) var(--ds-btn-desktop-sm-padding-x);
        font-size: var(--ds-btn-desktop-sm-font-size);
    }

    .ff-btn-desktop-md,
    .ds-btn.ff-btn-desktop-md,
    .ds-btn--desktop-md {
        min-height: var(--ds-btn-desktop-md-height);
        padding: var(--ds-btn-desktop-md-padding-y) var(--ds-btn-desktop-md-padding-x);
        font-size: var(--ds-btn-desktop-md-font-size);
    }

    .ff-btn-desktop-lg,
    .ds-btn.ff-btn-desktop-lg,
    .ds-btn--desktop-lg {
        min-height: var(--ds-btn-desktop-lg-height);
        padding: var(--ds-btn-desktop-lg-padding-y) var(--ds-btn-desktop-lg-padding-x);
        font-size: var(--ds-btn-desktop-lg-font-size);
        border-radius: var(--ds-btn-radius);
    }
}

/* -------------------------------------------------------------------------- */
/* ff-btn explicit mobile size tiers (≤991.98px only)                           */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ff-btn-mobile-sm,
    .ds-btn.ff-btn-mobile-sm,
    .ds-btn--mobile-sm {
        min-height: var(--ds-btn-mobile-sm-height) !important;
        padding: var(--ds-btn-mobile-sm-padding-y) var(--ds-btn-mobile-sm-padding-x) !important;
        font-size: var(--ds-btn-mobile-sm-font-size) !important;
    }

    .ff-btn-mobile-md,
    .ds-btn.ff-btn-mobile-md,
    .ds-btn--mobile-md {
        min-height: var(--ds-btn-mobile-md-height) !important;
        padding: var(--ds-btn-mobile-md-padding-y) var(--ds-btn-mobile-md-padding-x) !important;
        font-size: var(--ds-btn-mobile-md-font-size) !important;
    }

    .ff-btn-mobile-full,
    .ds-btn.ff-btn-mobile-full,
    .ds-btn--full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 1 1 100% !important;
    }

    .ds-btn-bar--sticky-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        padding: 12px 16px;
        background: var(--whitebg, #fff);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    .ds-btn-bar--sticky-mobile .ds-btn {
        margin-bottom: 0;
    }

    .ds-btn-bar--sticky-mobile .ds-btn--full-width-mobile {
        width: 100%;
    }

}

/* Desktop job header card — compact like screenshot */
@media (min-width: 992px) {
    .form-1600 .job-summary-customer-header-card .job-header-action-btn {
        min-height: var(--ds-btn-min-height);
        padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
        font-size: var(--ds-btn-font-size);
    }
}

/* -------------------------------------------------------------------------- */
/* ff-btn semantic aliases (optional markup; same skin tokens as legacy classes) */
/* -------------------------------------------------------------------------- */
.ff-btn,
button.ff-btn,
a.ff-btn,
input.ff-btn[type="submit"],
input.ff-btn[type="button"] {
    font-family: var(--ds-btn-font-family);
    font-size: var(--ds-btn-font-size);
    font-weight: var(--ds-btn-font-weight);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-btn-radius);
    min-height: var(--ds-btn-min-height);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
    cursor: pointer;
    box-shadow: var(--ds-btn-shadow-none);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ff-btn-outline,
.ff-btn-secondary,
.ff-btn:not(.ff-btn-primary):not(.ff-btn-solid) {
    background-color: var(--ds-btn-outline-surface);
    border: 1px solid var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
}

.ff-btn-outline:hover,
.ff-btn-secondary:hover,
.ff-btn:not(.ff-btn-primary):not(.ff-btn-solid):hover {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

.ff-btn-primary,
.ff-btn-solid {
    background-color: var(--button-bg, #0F4C81);
    border: 1px solid var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
}

.ff-btn-primary:hover,
.ff-btn-solid:hover {
    background-color: var(--button-hover-bg, #0B3A63);
    border-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
}

/* -------------------------------------------------------------------------- */
/* Enterprise outline action (Job screenshot — default for all action buttons) */
/* -------------------------------------------------------------------------- */
.button,
.filterbutton,
.button-white,
.gridbutton,
.smallbutton,
.button-small,
.storeitem-btn,
.job-header-action-btn,
.data-action-btn,
.button-link,
button.button,
button.filterbutton,
button.button-white,
button.gridbutton,
button.smallbutton,
button.button-small,
button.job-header-action-btn,
input.button[type="submit"],
a.button:not(.tab):not(.email-cta),
a.job-header-action-btn,
label.job-header-action-btn,
button.data-action-btn,
.btn:not(.btn-link):not(.btn-close):not(.close),
.send-btn,
.btn.btn-secondary,
.btn.btn-outline-primary,
.btn.btn-outline-secondary {
    font-family: var(--ds-btn-font-family);
    font-size: var(--ds-btn-font-size);
    font-weight: var(--ds-btn-font-weight);
    line-height: 1.35;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    box-sizing: border-box;
    border-radius: var(--ds-btn-radius);
    min-height: var(--ds-btn-min-height);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
    margin: 0;
    background: var(--ds-btn-outline-surface);
    border: 1px solid var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
    box-shadow: var(--ds-btn-shadow-none);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gridbutton,
.smallbutton,
.button-small,
.storeitem-btn,
button.gridbutton,
button.smallbutton,
button.button-small {
    font-size: 13px;
    padding: 6px 12px;
    min-height: 32px;
    margin-right: var(--ds-btn-gap);
}

.button,
.filterbutton,
button.button,
button.filterbutton,
input.button[type="submit"] {
    margin: 0 var(--ds-btn-gap) 10px 0;
}

.button-link {
    font-size: 12px;
    min-height: 32px;
    padding: 6px 12px;
    min-width: 70px;
    margin: 0 var(--ds-btn-gap) 10px 0;
}

.button:hover,
.filterbutton:hover,
.button-white:hover,
.gridbutton:hover,
.smallbutton:hover,
.storeitem-btn:hover,
.job-header-action-btn:hover,
.data-action-btn:hover,
.button-link:hover,
button.button:hover,
button.filterbutton:hover,
button.button-white:hover,
button.gridbutton:hover,
button.smallbutton:hover,
button.job-header-action-btn:hover,
a.button:not(.tab):not(.email-cta):hover,
a.job-header-action-btn:hover,
.btn:not(.btn-link):not(.btn-close):not(.close):hover,
.send-btn:hover,
.btn.btn-secondary:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
    text-decoration: none;
}

.button:focus-visible,
.filterbutton:focus-visible,
.gridbutton:focus-visible,
.smallbutton:focus-visible,
.job-header-action-btn:focus-visible,
.button-link:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-btn-focus-ring);
}

.button a,
.filterbutton a,
.gridbutton a,
.smallbutton a,
.storeitem-btn a {
    color: inherit !important;
    background: transparent !important;
    text-decoration: none !important;
}

.job-header-action-btn.dropdown-toggle::after {
    margin-left: 0.35em;
    vertical-align: 0.15em;
}

/* Compact undo / inline actions beside status text (still outline; smaller) */
.job-summary-status-stamp-undo.gridbutton,
.job-summary-status-stamp-undo.smallbutton {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    margin-right: 0;
}

/* Explicit filled primary when needed (rare) */
.button--solid,
.filterbutton--solid,
button.button--solid {
    background: var(--button-bg, #0F4C81);
    border-color: var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
    box-shadow: var(--ds-btn-shadow-none);
}

.button--solid:hover,
.filterbutton--solid:hover,
button.button--solid:hover {
    background: var(--button-hover-bg, #0B3A63);
    border-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
}

/* Text-style controls (not filled buttons) */
.buttonaslink,
button.buttonaslink {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--button-text, #FFFFFF);
    text-decoration: underline;
    padding: 0;
    min-height: auto;
    margin: 0;
    font-weight: 400;
}

.buttonaslink:hover {
    color: var(--button-text, #FFFFFF);
    opacity: 0.85;
    background: none;
}

/* AGSS layout: buttonlink */
.buttonlink,
a.buttonlink {
    font-size: var(--ds-btn-font-size);
    font-weight: var(--ds-btn-font-weight);
    background: var(--ds-btn-outline-surface);
    border-radius: var(--ds-btn-radius);
    color: var(--button-text, #FFFFFF);
    text-align: center;
    margin: 0 var(--ds-btn-gap) 10px 0;
    border: 1px solid var(--button-border, #0F4C81);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
    min-height: var(--ds-btn-min-height);
    line-height: 1.35;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--ds-btn-shadow-none);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.buttonlink a {
    color: inherit;
    text-decoration: none;
}

.buttonlink:hover,
a.buttonlink:hover {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

.buttonlink:hover a {
    color: inherit;
}

/* AGSS: bare buttons → enterprise outline */
button:not(.button):not(.filterbutton):not(.button-white):not(.gridbutton):not(.smallbutton):not(.buttonaslink):not(.button-link):not(.job-header-action-btn):not(.ds-btn):not(.dropdown-item):not(.close):not(.btn-close):not([class*="calendar-"]):not(.blockschedule-edit-icon):not(.tab):not(.storeitem-btn):not(.btn) {
    font-size: var(--ds-btn-font-size);
    font-weight: var(--ds-btn-font-weight);
    background: var(--ds-btn-outline-surface);
    border-radius: var(--ds-btn-radius);
    color: var(--button-text, #FFFFFF);
    border: 1px solid var(--button-border, #0F4C81);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
    min-height: var(--ds-btn-min-height);
    line-height: 1.35;
    cursor: pointer;
    box-shadow: var(--ds-btn-shadow-none);
}

button:not(.button):not(.filterbutton):not(.button-white):not(.gridbutton):not(.smallbutton):not(.buttonaslink):not(.button-link):not(.job-header-action-btn):not(.ds-btn):not(.dropdown-item):not(.close):not(.btn-close):not([class*="calendar-"]):not(.blockschedule-edit-icon):not(.tab):not(.storeitem-btn):not(.btn):hover {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

.calendar-nav-arrow {
    border: 1px solid var(--button-border, #0F4C81);
    background: var(--ds-btn-outline-surface);
    color: var(--button-text, #FFFFFF);
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: var(--ds-btn-radius);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ds-btn-shadow-none);
}

.calendar-nav-arrow:hover {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

/* Calendar toolbar actions (not appointment status cells) */
.calendar-filter-toggle,
.calendar-select-date-btn,
.calendar-date-nav .calendar-this-period.button,
.calendar-date-nav .calendar-this-period {
    border: 1px solid var(--button-border, #0F4C81) !important;
    background: var(--ds-btn-outline-surface) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-radius: var(--ds-btn-radius) !important;
    padding: var(--ds-btn-padding-y) 14px !important;
    font-size: var(--ds-btn-font-size) !important;
    font-weight: var(--ds-btn-font-weight) !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: var(--ds-btn-gap);
    box-shadow: var(--ds-btn-shadow-none) !important;
    min-height: var(--ds-btn-min-height) !important;
}

.calendar-filter-toggle:hover,
.calendar-select-date-btn:hover,
.calendar-date-nav .calendar-this-period:hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
}

/* Block schedule cell edit + calendar header settings — compact (mobile-sm tier), all viewports */
button.blockschedule-edit-icon,
.blockschedule-edit-icon,
a.calendar-schedule-settings-btn,
.calendar-schedule-settings-btn {
    box-sizing: border-box !important;
    min-width: var(--ds-btn-mobile-sm-height, 24px) !important;
    width: var(--ds-btn-mobile-sm-height, 24px) !important;
    max-width: var(--ds-btn-mobile-sm-height, 24px) !important;
    min-height: var(--ds-btn-mobile-sm-height, 24px) !important;
    height: var(--ds-btn-mobile-sm-height, 24px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--button-border, #0F4C81);
    border-radius: var(--ds-btn-radius, 10px);
    background: var(--ds-btn-outline-surface);
    color: var(--button-text, #FFFFFF);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--ds-btn-shadow-none);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button.blockschedule-edit-icon:hover,
.blockschedule-edit-icon:hover,
a.calendar-schedule-settings-btn:hover,
.calendar-schedule-settings-btn:hover {
    background-color: var(--button-hover-bg, #0B3A63);
    border-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
}

button.blockschedule-edit-icon svg,
.blockschedule-edit-icon svg,
.calendar-schedule-settings-btn i {
    width: 12px;
    height: 12px;
    display: block;
    flex-shrink: 0;
}

button.blockschedule-edit-icon svg path,
.blockschedule-edit-icon svg path {
    stroke: currentColor;
}

.calendar-schedule-settings-btn {
    text-decoration: none !important;
    line-height: 1;
}

.calendar-schedule-settings-btn i {
    font-size: 12px;
}

/* Calendar date navigation — prev / this period / next */
.calendar-date-nav-controls {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: var(--ds-btn-gap, 8px);
    vertical-align: middle;
}

.calendar-date-nav-controls .calendar-nav-arrow {
    width: var(--ds-btn-min-height, 36px);
    min-width: var(--ds-btn-min-height, 36px);
    height: var(--ds-btn-min-height, 36px);
    min-height: var(--ds-btn-min-height, 36px);
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    line-height: 1;
}

.calendar-date-nav-controls .calendar-this-period.button,
.calendar-date-nav-controls .calendar-this-period {
    min-height: var(--ds-btn-min-height, 36px);
    height: var(--ds-btn-min-height, 36px);
    padding: 0 var(--ds-btn-padding-x, 16px) !important;
    margin: 0 !important;
    flex: 0 0 auto;
    line-height: 1.35;
    align-self: center;
}

/* Bootstrap in app shell → enterprise outline (screenshot standard) */
.btn.btn-primary,
.btn-primary {
    background-color: var(--ds-btn-outline-surface) !important;
    border-color: var(--button-border, #0F4C81) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-radius: var(--ds-btn-radius) !important;
    font-weight: var(--ds-btn-font-weight) !important;
    min-height: var(--ds-btn-min-height);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x) !important;
    box-shadow: var(--ds-btn-shadow-none) !important;
}

.btn.btn-primary:hover,
.btn-primary:hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
}

.btn.btn-outline-primary {
    color: var(--button-text, #FFFFFF) !important;
    border-color: var(--button-border, #0F4C81) !important;
    background-color: var(--ds-btn-outline-surface) !important;
}

.btn.btn-outline-primary:hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
}

/* Filled bootstrap override when explicitly needed */
.btn.btn-solid,
.btn.btn-filled {
    background-color: var(--button-bg, #0F4C81) !important;
    border-color: var(--button-border, #0F4C81) !important;
    color: var(--button-text, #FFFFFF) !important;
}

.btn.btn-solid:hover,
.btn.btn-filled:hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
}

.btn.btn-secondary:not(.btn-link):not(.btn-close),
.btn-secondary:not(.btn-link):not(.btn-close) {
    background-color: var(--ds-btn-outline-surface) !important;
    border-color: var(--button-border, #0F4C81) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-radius: var(--ds-btn-radius) !important;
    min-height: var(--ds-btn-min-height);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x) !important;
    box-shadow: var(--ds-btn-shadow-none) !important;
}

.btn.btn-secondary:not(.btn-link):not(.btn-close):hover,
.btn-secondary:not(.btn-link):not(.btn-close):hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
}

/* FilmQuote / public quote shell (buttons.css loads after FilmQuote/css/style.css) */
.wrapper .button,
.body .button,
#partialview .button,
.wrapper .gridbutton,
.body .gridbutton,
.wrapper .btn-primary,
.body .btn-primary {
    box-sizing: border-box;
}

/* Email CTA links in templates */
a.button.email-cta,
.email-cta.button {
    text-decoration: none;
    min-width: 100px;
    display: inline-flex;
    background: var(--ds-btn-outline-surface);
    border: 1px solid var(--button-border, #0F4C81);
    color: var(--button-text, #FFFFFF);
    border-radius: var(--ds-btn-radius);
    padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
    min-height: var(--ds-btn-min-height);
}

a.button.email-cta:hover,
.email-cta.button:hover {
    background-color: var(--button-hover-bg, #0B3A63);
    color: var(--button-text, #FFFFFF);
    border-color: var(--button-hover-bg, #0B3A63);
}

/* -------------------------------------------------------------------------- */
/* Action button rows — centralized flex layout (gap only; no per-button margin) */
/* -------------------------------------------------------------------------- */
.ds-action-row,
.buttons,
.button-row,
.job-summary-customer-modal-btn-row,
.job-summary-header-toolbar,
.job-summary-header-editrow,
.job-summary-header-actions,
.calendar-toolbar-actions,
.inp-btn-flx,
.group-btns,
.modal-footer.ds-action-row,
.modal-footer:has(> .button, > .btn:not(.btn-link), > .send-btn, > .filterbutton) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    column-gap: var(--ds-btn-gap);
    row-gap: var(--ds-btn-row-gap, var(--ds-btn-gap));
    gap: var(--ds-btn-gap);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Legacy centered toolbars */
.buttons {
    justify-content: center;
}

.ds-action-row--center,
.buttons.buttons--center {
    justify-content: center;
}

.ds-action-row--start,
.buttons.buttons--start {
    justify-content: flex-start;
}

.ds-action-row--end,
.buttons.buttons--end {
    justify-content: flex-end;
}

.ds-action-row--between,
.buttons.buttons--between {
    justify-content: space-between;
}

/* Flex-wrap rows that contain action buttons (Bootstrap utility cleanup) */
.d-flex.flex-wrap:is(
    :has(> .button),
    :has(> button.button),
    :has(> .job-header-action-btn),
    :has(> .gridbutton),
    :has(> .filterbutton),
    :has(> .send-btn),
    :has(> .data-action-btn),
    :has(> a.button),
    :has(> a.job-header-action-btn)
) {
    align-items: center;
    align-content: flex-start;
    column-gap: var(--ds-btn-gap);
    row-gap: var(--ds-btn-row-gap, var(--ds-btn-gap));
    gap: var(--ds-btn-gap);
}

/* Children use flex gap — cancel stray margins from legacy/mobile rules */
.ds-action-row > .button,
.ds-action-row > button,
.ds-action-row > .btn,
.ds-action-row > .job-header-action-btn,
.ds-action-row > .filterbutton,
.ds-action-row > .gridbutton,
.ds-action-row > .send-btn,
.ds-action-row > .data-action-btn,
.ds-action-row > a.button,
.ds-action-row > a.job-header-action-btn,
.ds-action-row > .btn-group,
.buttons > .button,
.buttons > button,
.buttons > .btn,
.buttons > .job-header-action-btn,
.buttons > .filterbutton,
.buttons > .gridbutton,
.buttons > .send-btn,
.buttons > .data-action-btn,
.buttons > a.button,
.buttons > a.job-header-action-btn,
.button-row > .button,
.button-row > button,
.button-row > .btn,
.button-row > .send-btn,
.button-row > .filterbutton,
.job-summary-customer-modal-btn-row > .button,
.job-summary-customer-modal-btn-row > button,
.job-summary-header-actions > .button,
.job-summary-header-actions > .job-header-action-btn,
.job-summary-header-actions > .btn-group,
.appointment-side-panel__header-actions > .button,
.appointment-side-panel__header-actions > button.button,
.appointment-side-panel__header-actions > a.button,
.appointment-side-panel__header-actions > .btn-group,
.job-summary-header-editrow > .button,
.job-summary-header-editrow > .job-header-action-btn,
.d-flex.flex-wrap > .button,
.d-flex.flex-wrap > button.button,
.d-flex.flex-wrap > .job-header-action-btn,
.d-flex.flex-wrap > .gridbutton,
.d-flex.flex-wrap > .filterbutton,
.d-flex.flex-wrap > .send-btn,
.d-flex.flex-wrap > a.button,
.d-flex.flex-wrap > a.job-header-action-btn {
    margin: 0;
    flex: 0 1 auto;
}

.job-summary-header-toolbar {
    flex-wrap: wrap;
    gap: var(--ds-btn-gap);
    row-gap: var(--ds-btn-row-gap, var(--ds-btn-gap));
}

.job-summary-header-toolbar .job-summary-header-editrow,
.job-summary-header-toolbar .job-summary-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--ds-btn-gap);
    row-gap: var(--ds-btn-row-gap, var(--ds-btn-gap));
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
}

.job-summary-header-actions > .btn-group {
    flex-shrink: 0;
    margin: 0;
}

/* Mobile layout helpers — compact sizing enforced at end of file (after skin colors) */
@media (max-width: 991.98px) {
    .ds-action-row,
    .job-summary-header-toolbar,
    .job-summary-header-toolbar .job-summary-header-editrow,
    .job-summary-header-toolbar .job-summary-header-actions,
    .buttons,
    .button-row,
    .inp-btn-flx,
    .group-btns,
    .calendar-toolbar-actions,
    .d-flex.flex-wrap:is(
        :has(> .button),
        :has(> button.button),
        :has(> .job-header-action-btn),
        :has(> .gridbutton),
        :has(> .filterbutton),
        :has(> .send-btn)
    ) {
        column-gap: var(--ds-btn-gap-mobile, 6px);
        row-gap: var(--ds-btn-row-gap-mobile, var(--ds-btn-gap-mobile, 6px));
        gap: var(--ds-btn-gap-mobile, 6px);
    }

    .ds-btn-bar--sticky-mobile .ds-btn,
    .ds-btn-bar--sticky-mobile .button {
        width: 100%;
        margin: 0;
    }
}

@media (min-width: 990px) {
    /* Filter / Clear / Export live in a label-less column. Offset that column down so the
       buttons line up with the dropdown inputs (which sit below their .formlabel), and keep
       an even gap between the buttons. Uses margin (not position:relative) so the buttons are
       never clipped by `.filters { overflow:hidden }`. */
    .filters .filter:has(> .filterbutton) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 22px;
    }

    .filters .filter > .filterbutton {
        position: static;
        top: auto;
        margin: 0;
    }
}

/* Navigation tabs — NOT action buttons (use tabs.css / --tab-* tokens only)    */
.tab,
.tabs .tab,
.activetab,
.inactivetab,
a.tab,
a.activetab,
a.inactivetab,
.calendar-mode-tab,
.nav-tabs .nav-link,
.nav-pills .nav-link {
    /* Excluded from button skin enforcement above */
}

/* -------------------------------------------------------------------------- */
/* Status / badges — NOT action buttons (do not apply button skin)              */
/* -------------------------------------------------------------------------- */
.success-message,
.error-message,
.validation-message,
[class*="status-badge"],
[class*="status-pill"],
.invoice-sent-badge,
.paid-badge,
.unpaid-badge,
.appointmentstatus-color-indicator,
.quote-type-color-indicator,
.calendar-legend-item,
.calendar-status-label,
.workflow-status-pill {
    /* Intentionally excluded from .button / .gridbutton rules above */
}

/* Prevent success/status spans from inheriting button class styles */
span.success-message.button,
div.success-message.button {
    all: revert;
}

/* -------------------------------------------------------------------------- */
/* Skin enforcement — wins over page-local / Bootstrap overrides (action only) */
/* -------------------------------------------------------------------------- */
.button:not(.success-message):not(.error-message):not(.email-cta),
.filterbutton,
.button-white,
.gridbutton,
.smallbutton,
.job-header-action-btn,
.data-action-btn,
.button-link,
.buttonlink:not(.btt),
.send-btn,
.btn:not(.btn-link):not(.btn-close):not(.close):not(.dropdown-toggle-split),
.calendar-filter-toggle,
.calendar-select-date-btn,
.calendar-nav-arrow,
.calendar-date-nav .calendar-this-period,
.ff-btn-outline,
.ff-btn-secondary,
.ff-btn:not(.ff-btn-primary):not(.ff-btn-solid),
.btn.btn-secondary:not(.btn-link):not(.btn-close) {
    background-color: var(--ds-btn-outline-surface) !important;
    border-color: var(--button-border, #0F4C81) !important;
    color: var(--button-text, #FFFFFF) !important;
}

.button:not(.success-message):not(.error-message):not(.email-cta):hover,
.filterbutton:hover,
.button-white:hover,
.gridbutton:hover,
.smallbutton:hover,
.job-header-action-btn:hover,
.data-action-btn:hover,
.button-link:hover,
.buttonlink:not(.btt):hover,
.send-btn:hover,
.btn:not(.btn-link):not(.btn-close):not(.close):not(.dropdown-toggle-split):hover,
.calendar-filter-toggle:hover,
.calendar-select-date-btn:hover,
.calendar-nav-arrow:hover,
.calendar-date-nav .calendar-this-period:hover,
.ff-btn-outline:hover,
.ff-btn-secondary:hover,
.ff-btn:not(.ff-btn-primary):not(.ff-btn-solid):hover,
.btn.btn-secondary:not(.btn-link):not(.btn-close):hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
}

.button--solid,
.filterbutton--solid,
.btn.btn-solid,
.btn.btn-filled,
.ff-btn-primary,
.ff-btn-solid {
    background-color: var(--button-bg, #0F4C81) !important;
    border-color: var(--button-border, #0F4C81) !important;
    color: var(--button-text, #FFFFFF) !important;
}

.button--solid:hover,
.filterbutton--solid:hover,
.btn.btn-solid:hover,
.btn.btn-filled:hover,
.ff-btn-primary:hover,
.ff-btn-solid:hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-text, #FFFFFF) !important;
}

/* Anchor action buttons inside panels (beats .white-bg a { color: #222 } in styles.css) */
a.button:not(.tab):not(.email-cta),
a.job-header-action-btn,
a.buttonlink:not(.btt),
a.gridbutton,
a.filterbutton,
.white-bg a.button:not(.tab),
.white-bg a.job-header-action-btn,
.white-bg a.buttonlink:not(.btt),
.job-header-action-btn.dropdown-toggle,
.btn.dropdown-toggle:not(.btn-link) {
    color: var(--button-text, #FFFFFF) !important;
}

a.button:not(.tab):not(.email-cta):hover,
a.job-header-action-btn:hover,
a.buttonlink:not(.btt):hover,
.white-bg a.button:hover,
.white-bg a.job-header-action-btn:hover {
    color: var(--button-text, #FFFFFF) !important;
}

.job-header-action-btn.dropdown-toggle::after,
.btn.job-header-action-btn.dropdown-toggle::after {
    border-top-color: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Desktop action sizing lock (≥992px — preserves enterprise button size)      */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .ds-btn:not(.ff-btn-mobile-sm):not(.ff-btn-mobile-md):not(.ff-btn-mobile-full),
    button.ds-btn:not(.ff-btn-mobile-sm):not(.ff-btn-mobile-md):not(.ff-btn-mobile-full),
    a.ds-btn:not(.ff-btn-mobile-sm):not(.ff-btn-mobile-md):not(.ff-btn-mobile-full),
    .ff-btn:not(.ff-btn-mobile-sm):not(.ff-btn-mobile-md):not(.ff-btn-mobile-full),
    button.ff-btn:not(.ff-btn-mobile-sm):not(.ff-btn-mobile-md):not(.ff-btn-mobile-full),
    a.ff-btn:not(.ff-btn-mobile-sm):not(.ff-btn-mobile-md):not(.ff-btn-mobile-full),
    .button:not(.tab):not(.email-cta),
    .filterbutton,
    .button-white,
    .gridbutton,
    .smallbutton,
    .button-small,
    .storeitem-btn,
    .job-header-action-btn,
    .data-action-btn,
    .button-link,
    .buttonlink:not(.btt),
    .send-btn,
    button.button,
    button.filterbutton,
    button.gridbutton,
    button.smallbutton,
    button.job-header-action-btn,
    a.button:not(.tab):not(.email-cta),
    a.job-header-action-btn,
    a.buttonlink:not(.btt),
    label.job-header-action-btn,
    button.data-action-btn,
    .btn:not(.btn-link):not(.btn-close):not(.close):not(.dropdown-toggle-split):not(.navbar-toggler),
    .wrapper .button:not(.tab),
    .body .button:not(.tab),
    #partialview .button:not(.tab),
    .wrapper .gridbutton,
    .body .gridbutton,
    .wrapper .btn:not(.btn-link),
    .body .btn:not(.btn-link),
    .calendar-filter-toggle,
    .calendar-select-date-btn,
    .calendar-date-nav .calendar-this-period,
    .calendar-nav-arrow,
    button:not(.buttonaslink):not(.button-link):not(.job-header-action-btn):not(.ds-btn):not(.dropdown-item):not(.close):not(.btn-close):not([class*="calendar-"]):not(.blockschedule-edit-icon):not(.tab):not(.storeitem-btn):not(.btn) {
        min-height: var(--ds-btn-min-height);
        padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
        font-size: var(--ds-btn-font-size);
        border-radius: var(--ds-btn-radius);
        width: auto;
        flex: 0 1 auto;
        max-width: none;
    }

    .gridbutton,
    .smallbutton,
    .button-small,
    .button-link,
    button.gridbutton,
    button.smallbutton {
        min-height: 32px;
        padding: 6px 12px;
        font-size: 13px;
    }

    button.blockschedule-edit-icon,
    .blockschedule-edit-icon,
    a.calendar-schedule-settings-btn,
    .calendar-schedule-settings-btn {
        min-width: var(--ds-btn-mobile-sm-height, 24px) !important;
        width: var(--ds-btn-mobile-sm-height, 24px) !important;
        max-width: var(--ds-btn-mobile-sm-height, 24px) !important;
        min-height: var(--ds-btn-mobile-sm-height, 24px) !important;
        height: var(--ds-btn-mobile-sm-height, 24px) !important;
        padding: 0 !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Hover text contrast — keep the label legible once a button fills on hover.   */
/* The base rules reuse --button-text (the resting/outline text, often a brand   */
/* color) for hover too, which reads as same-color-on-color. Force hover text to  */
/* --button-hover-text (defaults white; skin can override via --ButtonHoverTextColor). */
/* -------------------------------------------------------------------------- */
.button:hover,
button.button:hover,
a.button:not(.tab):not(.email-cta):hover,
.filterbutton:hover,
button.filterbutton:hover,
.button-white:hover,
button.button-white:hover,
.gridbutton:hover,
button.gridbutton:hover,
.smallbutton:hover,
button.smallbutton:hover,
.button-small:hover,
.button-link:hover,
.buttonlink:hover,
a.buttonlink:hover,
.buttonaslink:hover,
.storeitem-btn:hover,
.data-action-btn:hover,
button.data-action-btn:hover,
.job-header-action-btn:hover,
a.job-header-action-btn:hover,
.button--solid:hover,
button.button--solid:hover,
.email-cta.button:hover,
a.button.email-cta:hover,
.send-btn:hover,
.calendar-nav-arrow:hover,
.calendar-select-date-btn:hover,
.calendar-schedule-settings-btn:hover,
.calendar-date-nav .calendar-this-period:hover,
.ff-btn-outline:hover,
.ff-btn-secondary:hover,
.ff-btn-primary:hover,
.ff-btn-solid:hover,
.ff-btn:not(.ff-btn-primary):not(.ff-btn-solid):hover,
.ds-btn--primary:hover:not(:disabled):not(.is-disabled),
.ds-btn--secondary:hover:not(:disabled):not(.is-disabled),
.ds-btn--outline:hover:not(:disabled):not(.is-disabled),
.ds-btn--ghost:hover:not(:disabled):not(.is-disabled),
.btn:not(.btn-link):not(.btn-close):not(.close):hover,
.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-secondary:not(.btn-link):not(.btn-close):hover,
.btn-secondary:not(.btn-link):not(.btn-close):hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover,
.btn.btn-filled:hover {
    color: var(--button-hover-text, #FFFFFF) !important;
}

/* -------------------------------------------------------------------------- */
/* Anchor action buttons (<a class="button">) sit under generic a:hover rules   */
/* in later stylesheets (templatelayout.css) that recolor links. Pin the full   */
/* hover treatment — fill + border + white text — with a .wrapper-scoped rule    */
/* so it beats those stray link rules regardless of load order.                 */
/* -------------------------------------------------------------------------- */
.wrapper a.button:not(.tab):not(.email-cta):hover,
.wrapper a.button:not(.tab):not(.email-cta):focus,
.wrapper button.button:hover,
.wrapper .button:not(.tab):not(.email-cta):hover,
.wrapper .filterbutton:hover,
.wrapper button.filterbutton:hover {
    background-color: var(--button-hover-bg, #0B3A63) !important;
    border-color: var(--button-hover-bg, #0B3A63) !important;
    color: var(--button-hover-text, #FFFFFF) !important;
}

/* Mobile action sizing: wwwroot/css/buttons-mobile.css (load last in layout head; sizing only) */