/* ========================================
   HBL Shared Button Styling
   Scoped to hbl-action-btn and hbl-filter-btn only.
   Does NOT override global .btn-primary or .btn-orange
   to avoid side-effects on Create, Save, Submit, etc.
   ======================================== */

.hbl-action-btn,
.hbl-filter-btn,
.btn-primary.hbl-filter-btn,
.btn-outline-primary.hbl-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem;
    background-color: var(--brand-action) !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action-text) !important;
    text-decoration: none !important;
}
.hbl-action-btn.d-none,
.hbl-filter-btn.d-none,
.hbl-outline-action-btn.d-none {
    display: none !important;
}

.hbl-action-btn:hover,
.hbl-action-btn:focus,
.hbl-action-btn:active,
.hbl-action-btn.active,
.hbl-action-btn:not(:disabled):not(.disabled):active,
.hbl-action-btn:not(:disabled):not(.disabled).active,
.btn-primary.hbl-filter-btn:hover,
.btn-primary.hbl-filter-btn:focus,
.btn-primary.hbl-filter-btn:active,
.btn-primary.hbl-filter-btn.active,
.btn-outline-primary.hbl-filter-btn:hover,
.btn-outline-primary.hbl-filter-btn:focus,
.btn-outline-primary.hbl-filter-btn:active,
.btn-outline-primary.hbl-filter-btn.active,
.hbl-filter-btn:hover,
.hbl-filter-btn:focus,
.hbl-filter-btn:active,
.hbl-filter-btn.active {
    background-color: var(--brand-action-hover, var(--brand-action)) !important;
    border-color: var(--brand-action-hover, var(--brand-action)) !important;
    color: var(--brand-action-text) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.hbl-action-btn i,
.hbl-action-btn span,
.btn-primary.hbl-filter-btn i,
.btn-primary.hbl-filter-btn span,
.btn-outline-primary.hbl-filter-btn i,
.btn-outline-primary.hbl-filter-btn span,
.hbl-filter-btn i,
.hbl-filter-btn span {
    color: inherit !important;
    vertical-align: middle;
}

.hbl-action-btn:disabled,
.hbl-action-btn.disabled,
.hbl-action-btn[aria-disabled="true"],
.hbl-filter-btn:disabled,
.hbl-filter-btn.disabled,
.hbl-filter-btn[aria-disabled="true"],
.btn-primary.hbl-filter-btn:disabled,
.btn-primary.hbl-filter-btn.disabled,
.btn-outline-primary.hbl-filter-btn:disabled,
.btn-outline-primary.hbl-filter-btn.disabled {
    background-color: var(--hbl-color-disabled-bg, #8a96a3) !important;
    border-color: var(--hbl-color-disabled-border, #8a96a3) !important;
    color: var(--hbl-color-disabled-text, #ffffff) !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    box-shadow: none !important;
}

.hbl-action-btn:disabled i,
.hbl-action-btn:disabled span,
.hbl-action-btn.disabled i,
.hbl-action-btn.disabled span,
.hbl-filter-btn:disabled i,
.hbl-filter-btn:disabled span,
.hbl-filter-btn.disabled i,
.hbl-filter-btn.disabled span {
    color: inherit !important;
    opacity: 0.96 !important;
}

/* ========================================
   HBL Outline Action Button
   ======================================== */

.hbl-outline-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem;
    background-color: transparent !important;
    border-color: var(--brand-action) !important;
    color: var(--brand-action) !important;
    text-decoration: none !important;
}

.hbl-outline-action-btn:hover,
.hbl-outline-action-btn:focus,
.hbl-outline-action-btn:active {
    background-color: var(--brand-action-hover, var(--brand-action)) !important;
    border-color: var(--brand-action-hover, var(--brand-action)) !important;
    color: var(--brand-action-text) !important;
}

.hbl-outline-action-btn:hover i,
.hbl-outline-action-btn:focus i,
.hbl-outline-action-btn:active i {
    color: inherit !important;
}

:is(.hbl-outline-action-btn, .btn-outline-primary):is(:hover, :focus, :active) {
    color: #ffffff !important;
}

:is(.hbl-outline-action-btn, .btn-outline-primary):is(:hover, :focus, :active) :is(i, svg, .fa, .fal, .far, .fas, span) {
    color: inherit !important;
    fill: currentColor !important;
}

/* Dark Mode Primary Button Contrast */
.mod-skin-dark:not(.mod-skin-light) .btn-primary:not(:disabled):not(.disabled),
.mod-skin-dark:not(.mod-skin-light) .btn-primary:not(:disabled):not(.disabled):hover,
.mod-skin-dark:not(.mod-skin-light) .btn-primary:not(:disabled):not(.disabled):focus,
.mod-skin-dark:not(.mod-skin-light) .btn-primary:not(:disabled):not(.disabled):active,
.mod-skin-dark:not(.mod-skin-light) .btn-primary:not(:disabled):not(.disabled).active,
.mod-skin-dark:not(.mod-skin-light) .show > .btn-primary.dropdown-toggle {
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) .btn-primary:not(:disabled):not(.disabled) :is(i, svg, .fa, .fal, .far, .fas) {
    color: inherit !important;
    fill: currentColor;
}

.mod-skin-dark:not(.mod-skin-light) :is(.hbl-outline-action-btn, .btn-outline-primary):is(:hover, :focus, :active) {
    background-color: var(--brand-action-hover, var(--brand-action)) !important;
    border-color: var(--brand-action-hover, var(--brand-action)) !important;
    color: #ffffff !important;
}

.mod-skin-dark:not(.mod-skin-light) :is(.hbl-outline-action-btn, .btn-outline-primary):is(:hover, :focus, :active) :is(i, svg, .fa, .fal, .far, .fas) {
    color: inherit !important;
    fill: currentColor !important;
}