/* Custom button styles with maximum specificity to override Bootstrap */
html body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding);
    border: none !important;
    border-radius: var(--radius-md);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    text-align: center;
    cursor: pointer;
    transition: var(--btn-transition);
    min-height: var(--btn-min-height);
    line-height: 1.4;
    box-shadow: var(--btn-shadow);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

html body .btn-primary {
    background-image: var(--primary-gradient) !important;
    color: var(--text-light) !important;
}

html body .btn-primary:hover,
html body .btn-primary:active,
html body .btn-primary:focus {
    background-image: var(--primary-gradient-hover) !important;
    color: var(--text-light) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
}

html body .btn-secondary {
    background-image: var(--secondary-gradient) !important;
    color: var(--text-light) !important;
}

html body .btn-secondary:hover,
html body .btn-secondary:active,
html body .btn-secondary:focus {
    background-image: var(--secondary-gradient-hover) !important;
    color: var(--text-light) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
}

html body .btn-success {
    background-image: var(--success-gradient) !important;
    color: var(--text-light) !important;
}

html body .btn-success:hover,
html body .btn-success:active,
html body .btn-success:focus {
    background-image: var(--success-gradient-hover) !important;
    color: var(--text-light) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
}

html body .btn-danger {
    background-image: var(--error-gradient) !important;
    color: var(--text-light) !important;
}

html body .btn-danger:hover,
html body .btn-danger:active,
html body .btn-danger:focus {
    background-image: var(--error-gradient-hover) !important;
    color: var(--text-light) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
}

html body .btn-info {
    background-image: var(--info-gradient) !important;
    color: var(--text-light) !important;
}

html body .btn-info:hover,
html body .btn-info:active,
html body .btn-info:focus {
    background-image: var(--info-gradient-hover) !important;
    color: var(--text-light) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
}

html body .btn-warning {
    background-image: var(--warning-gradient) !important;
    color: var(--text-dark) !important;
}

html body .btn-warning:hover,
html body .btn-warning:active,
html body .btn-warning:focus {
    background-image: var(--warning-gradient-hover) !important;
    color: var(--text-dark) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    transform: translateY(-1px);
}

html body .btn:active {
    transform: translateY(1px) !important;
    box-shadow: var(--btn-shadow-active) !important;
}

/* Button icon styles */
html body .btn i {
    margin-right: var(--btn-icon-spacing);
    font-size: 1.1em;
}

/* Small button variant */
html body .btn-sm {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-size-sm);
    min-height: var(--btn-min-height-sm);
}

/* Button group */
html body .btn-group {
    display: inline-flex;
    gap: var(--spacing-sm);
}