/* =========================================
   BUTTONS (Consolidated & Fixed)
   ========================================= */
.btn {
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.25rem 1.5rem;
    height: 33px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Reset Bootstrap focus shadow rgb to brand primary to avoid default blue glow */
    --bs-btn-focus-shadow-rgb: 0, 126, 69;
}

/* Primary & Success Buttons */
.btn-primary,
.btn-success {
    background-color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    /* Override Bootstrap Variables to prevent blue bleed */
    --bs-btn-color: var(--brand-primary-text);
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-primary-text);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-color: var(--brand-primary-text);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: #9ca3af;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #d1d5db;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--brand-primary-text);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-success:active,
.btn-success.active {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--brand-primary-text) !important;
}

/* Fix for "Stuck" color on focus: Only apply shadow, do not keep hover bg */
.btn-primary:focus,
.btn-success:focus {
    background-color: var(--brand-primary); /* Return to base color */
    border-color: var(--brand-primary);
    box-shadow: var(--link-focus-shadow);
}

/* Ensure active state takes precedence over focus state */
.btn-primary:active:focus,
.btn-primary.active:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: transparent !important;
    border: 1px solid #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Secondary Button (Outline Style) */
.btn-secondary {
    /* Override Bootstrap Variables */
    --bs-btn-color: var(--brand-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-primary-text);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: var(--brand-primary-text);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-color: #9ca3af;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #d1d5db;

    background-color: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-secondary:hover {
    background-color: var(--brand-primary);
    color: var(--brand-primary-text);
    border-color: var(--brand-primary);
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--brand-primary-hover) !important;
    color: var(--brand-primary-text) !important;
    border-color: var(--brand-primary-hover) !important;
    box-shadow: var(--link-focus-shadow);
}

.btn-secondary:focus {
    background-color: transparent; /* Return to base */
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: var(--link-focus-shadow);
}

.btn-secondary:active:focus,
.btn-secondary.active:focus {
    background-color: var(--brand-primary-hover) !important;
    color: var(--brand-primary-text) !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: transparent !important;
    border: 1px solid #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Destructive / Danger Buttons */
.btn-destructive,
.btn-danger {
    --bs-btn-color: var(--brand-danger-text);
    --bs-btn-bg: var(--brand-danger);
    --bs-btn-border-color: var(--brand-danger);
    --bs-btn-hover-color: var(--brand-danger-text);
    --bs-btn-hover-bg: var(--brand-danger-hover);
    --bs-btn-hover-border-color: var(--brand-danger-hover);
    --bs-btn-active-color: var(--brand-danger-text);
    --bs-btn-active-bg: var(--brand-danger-hover);
    --bs-btn-active-border-color: var(--brand-danger-hover);
    background-color: var(--brand-danger);
    border: 1px solid var(--brand-danger);
    color: var(--brand-danger-text);
}

.btn-destructive:hover,
.btn-danger:hover {
    border-color: var(--brand-danger-hover);
}

.btn-destructive:focus,
.btn-danger:focus {
    background-color: var(--brand-danger); /* Return to base */
    border-color: var(--brand-danger);
    box-shadow: var(--link-focus-shadow);
}

/* Button Links & Tertiary */
.btn-tertiary,
.btn-link {
    background-color: transparent;
    border: none;
    color: var(--brand-primary);
    padding-left: 0;
    padding-right: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-tertiary:hover,

.btn-link:hover,
a.btn-link:hover {
    text-decoration: underline;
    background-color: transparent;
    color: var(--brand-secondary) !important;
}

.btn-link:active,
.btn-link:focus,
.btn-link:visited {
    color: var(--brand-primary) !important;
    background: transparent !important;
    text-decoration: underline;
    box-shadow: none;
    outline: none;
}

a.btn {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.btn:active,
a.btn:focus {
    border-radius: 9999px !important;
}

.btn-secondary.active {
    border-radius: 9999px !important;
}

.btn-xs {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem !important;
    min-height: 22px;
    min-width: 32px;
    line-height: 1.1;
}

.btn-category {
    background: var(--ui-light);
    color: var(--brand-primary);
    border: 1px solid var(--ui-border);
    font-weight: 500;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    min-height: 22px;
    min-width: 32px;
    line-height: 1.1;
    border-radius: 9999px;
    transition: background 0.2s, color 0.2s, border 0.2s;
    display: inline-block;
}

.btn-category.selected,
.btn-category:active {
    background: var(--brand-primary);
    color: var(--ui-white);
    border: 1px solid var(--brand-primary);
}

.btn-category:hover {
    background: #e0f7ea;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}

/* Ensure components like btn-link don't get the standard link focus style */
.btn-link:focus-visible {
    box-shadow: none; /* Remove the custom text link focus */
    text-decoration: underline; /* Keep underline consistent with Bootstrap potentially */
    /* Add Bootstrap's default focus ring or your button focus style */
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(0, 126, 69, .25); /* Example focus ring using your link color */
}