/* Custom Bootstrap Theme for ShoutOut - Pink Color Palette */
:root {
  /* Primary Colors */
  --bs-primary: #d7006d;
  --bs-primary-rgb: 215, 0, 109;
  --bs-primary-bg-subtle: #fce4f0;
  --bs-primary-border-subtle: #f8b9d7;
  --bs-primary-text-emphasis: #57002b;
  
  /* Secondary Colors */
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-secondary-bg-subtle: #f8f9fa;
  --bs-secondary-border-subtle: #e9ecef;
  --bs-secondary-text-emphasis: #2c2e30;
  
  /* Success Colors */
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-success-border-subtle: #a3cfbb;
  --bs-success-text-emphasis: #0a3622;
  
  /* Info Colors */
  --bs-info: #0dcaf0;
  --bs-info-rgb: 13, 202, 240;
  --bs-info-bg-subtle: #cff4fc;
  --bs-info-border-subtle: #9eeaf9;
  --bs-info-text-emphasis: #055160;
  
  /* Warning Colors */
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-warning-border-subtle: #ffe69c;
  --bs-warning-text-emphasis: #664d03;
  
  /* Danger Colors */
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-danger-text-emphasis: #58151c;
  
  /* Light Colors */
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-light-border-subtle: #e9ecef;
  --bs-light-text-emphasis: #495057;
  
  /* Dark Colors */
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;
  --bs-dark-bg-subtle: #ced4da;
  --bs-dark-border-subtle: #adb5bd;
  --bs-dark-text-emphasis: #495057;
  
  /* Custom Pink Variants */
  --bs-pink: #f06da7;
  --bs-pink-rgb: 240, 109, 167;
  --bs-pink-bg-subtle: #fce4f0;
  --bs-pink-border-subtle: #f8b9d7;
  --bs-pink-text-emphasis: #602b4a;
  
  /* Body */
  --bs-body-color: #65686d;
  --bs-body-bg: #ffffff;
  
  /* Link Colors */
  --bs-link-color: #d7006d;
  --bs-link-hover-color: #a00050;
  
  /* Border Colors */
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  
  /* Focus Ring */
  --bs-focus-ring-color: rgba(215, 0, 109, 0.25);
  --bs-focus-ring-width: 0.25rem;
}

/* Button Customizations */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a00050;
  --bs-btn-hover-border-color: #a00050;
  --bs-btn-focus-shadow-rgb: 215, 0, 109;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #a00050;
  --bs-btn-active-border-color: #a00050;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 215, 0, 109;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-gradient: none;
}

/* Ensure FontAwesome icons inherit button colors properly */
.btn-outline-danger .fas,
.btn-outline-danger .fa,
.btn-outline-primary .fas,
.btn-outline-primary .fa,
.btn-outline-pink .fas,
.btn-outline-pink .fa {
  color: inherit !important;
  transition: color 0.15s ease-in-out !important;
}

/* Force white icons on hover for outline buttons */
.btn-outline-danger:hover .fas,
.btn-outline-danger:hover .fa,
.btn-outline-primary:hover .fas,
.btn-outline-primary:hover .fa,
.btn-outline-pink:hover .fas,
.btn-outline-pink:hover .fa {
  color: #ffffff !important;
}

/* Force white icons on active/focus states for outline buttons */
.btn-outline-danger:active .fas,
.btn-outline-danger:active .fa,
.btn-outline-danger:focus .fas,
.btn-outline-danger:focus .fa,
.btn-outline-primary:active .fas,
.btn-outline-primary:active .fa,
.btn-outline-primary:focus .fas,
.btn-outline-primary:focus .fa,
.btn-outline-pink:active .fas,
.btn-outline-pink:active .fa,
.btn-outline-pink:focus .fas,
.btn-outline-pink:focus .fa {
  color: #ffffff !important;
}

/* Alert Customizations */
.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-pink {
  --bs-alert-color: var(--bs-pink-text-emphasis);
  --bs-alert-bg: var(--bs-pink-bg-subtle);
  --bs-alert-border-color: var(--bs-pink-border-subtle);
  --bs-alert-link-color: var(--bs-pink-text-emphasis);
}

/* Badge Customizations */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* Form Control Focus */
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(215, 0, 109, 0.25);
}

.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(215, 0, 109, 0.25);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(215, 0, 109, 0.25);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Form Switch Toggle Styles */
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d7006d'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(215, 0, 109, 0.25);
}

.form-switch .form-check-input:checked:focus {
  box-shadow: 0 0 0 0.25rem rgba(215, 0, 109, 0.25);
}

/* Pagination */
.page-link {
  color: var(--bs-primary);
}

.page-link:hover {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Progress Bars */
.progress-bar {
  background-color: var(--bs-primary);
}

/* List Group */
.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Custom utility classes for pink colors */
.text-pink {
  color: var(--bs-pink) !important;
}

.bg-pink {
  background-color: var(--bs-pink) !important;
}

.border-pink {
  border-color: var(--bs-pink) !important;
}