/* Inverted Button Styling - Transparent Background with Colored Borders */

/* Primary Buttons */
.btn-primary {
    background-color: transparent !important;
    border: 2px solid #20c997 !important;
    color: #20c997 !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: rgba(32, 201, 151, 0.15) !important;
    border-color: #17a2b8 !important;
    color: #17a2b8 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: transparent !important;
    border: 2px solid #6c757d !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Success Buttons */
.btn-success {
    background-color: transparent !important;
    border: 2px solid #28a745 !important;
    color: #28a745 !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Danger Buttons */
.btn-danger {
    background-color: transparent !important;
    border: 2px solid #dc3545 !important;
    color: #dc3545 !important;
    transition: all 0.3s ease !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Warning Buttons */
.btn-warning {
    background-color: transparent !important;
    border: 2px solid #ffc107 !important;
    color: #ffc107 !important;
    transition: all 0.3s ease !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Info Buttons */
.btn-info {
    background-color: transparent !important;
    border: 2px solid #17a2b8 !important;
    color: #17a2b8 !important;
    transition: all 0.3s ease !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Light Buttons */
.btn-light {
    background-color: transparent !important;
    border: 2px solid #f8f9fa !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Dark Buttons */
.btn-dark {
    background-color: transparent !important;
    border: 2px solid #343a40 !important;
    color: #343a40 !important;
    transition: all 0.3s ease !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Outline Buttons - Keep their original styling but enhance hover */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* Link Buttons */
.btn-link {
    background-color: transparent !important;
    border: 2px solid transparent !important;
    color: #007bff !important;
    transition: all 0.3s ease !important;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    background-color: rgba(32, 201, 151, 0.1) !important;
    border-color: #20c997 !important;
    color: #20c997 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.2) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* Disabled Buttons */
.btn:disabled,
.btn.disabled {
    background-color: transparent !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    opacity: 0.65 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Button Groups */
.btn-group .btn {
    border-radius: 0 !important;
}

.btn-group .btn:first-child {
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

.btn-group .btn:last-child {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* Small Buttons */
.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-width: 1px !important;
}

/* Large Buttons */
.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1.25rem !important;
    border-width: 2px !important;
}

/* Focus States */
.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.25) !important;
}

/* Active States */
.btn:active {
    transform: translateY(0) !important;
}

/* Custom Teal Button */
.btn-teal {
    background-color: transparent !important;
    border: 2px solid #20c997 !important;
    color: #20c997 !important;
    transition: all 0.3s ease !important;
}

.btn-teal:hover,
.btn-teal:focus,
.btn-teal:active {
    background-color: rgba(32, 201, 151, 0.15) !important;
    border-color: #17a2b8 !important;
    color: #17a2b8 !important;
    box-shadow: 0 4px 12px rgba(32, 201, 151, 0.3) !important;
    transform: translateY(-1px) !important;
}