/* Button Styles with Complementary Background Colors */

/* Primary Buttons */
.btn-outline-primary {
  color: #034694 !important;
  border-color: #034694 !important;
  background-color: rgba(3, 70, 148, 0.05) !important;
}

.btn-outline-primary:hover, 
.btn-outline-primary:focus, 
.btn-outline-primary:active {
  color: #ffffff !important;
  background-color: #034694 !important;
  border-color: #034694 !important;
}

/* Secondary Buttons */
.btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: rgba(108, 117, 125, 0.05) !important;
}

.btn-outline-secondary:hover, 
.btn-outline-secondary:focus, 
.btn-outline-secondary:active {
  color: #ffffff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Success Buttons */
.btn-outline-success {
  color: #198754 !important;
  border-color: #198754 !important;
  background-color: rgba(25, 135, 84, 0.05) !important;
}

.btn-outline-success:hover, 
.btn-outline-success:focus, 
.btn-outline-success:active {
  color: #ffffff !important;
  background-color: #198754 !important;
  border-color: #198754 !important;
}

/* Danger Buttons */
.btn-outline-danger {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.05) !important;
}

.btn-outline-danger:hover, 
.btn-outline-danger:focus, 
.btn-outline-danger:active {
  color: #ffffff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

/* Warning Buttons */
.btn-outline-warning {
  color: #ffc107 !important;
  border-color: #ffc107 !important;
  background-color: rgba(255, 193, 7, 0.05) !important;
}

.btn-outline-warning:hover, 
.btn-outline-warning:focus, 
.btn-outline-warning:active {
  color: #212529 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
}

/* Info Buttons */
.btn-outline-info {
  color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
  background-color: rgba(13, 202, 240, 0.05) !important;
}

.btn-outline-info:hover, 
.btn-outline-info:focus, 
.btn-outline-info:active {
  color: #000000 !important;
  background-color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
}

/* Light Buttons */
.btn-outline-light {
  color: #f8f9fa !important;
  border-color: #f8f9fa !important;
  background-color: rgba(248, 249, 250, 0.05) !important;
}

.btn-outline-light:hover, 
.btn-outline-light:focus, 
.btn-outline-light:active {
  color: #000000 !important;
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
}

/* Dark Buttons */
.btn-outline-dark {
  color: #212529 !important;
  border-color: #212529 !important;
  background-color: rgba(33, 37, 41, 0.05) !important;
}

.btn-outline-dark:hover, 
.btn-outline-dark:focus, 
.btn-outline-dark:active {
  color: #ffffff !important;
  background-color: #212529 !important;
  border-color: #212529 !important;
}

/* Button transitions for smooth hover effects */
.btn {
  transition: all 0.2s ease-in-out;
}

/* Button hover shadow effect */
.btn:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Button active effect */
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}