/* These styles are generated from project.scss. */

/* ============================================
   Bootstrap Color Overrides
   ============================================ */

:root {
  /* Primary brand colors - customize these to match your brand */
  --bs-primary: #000F46;
  --bs-primary-rgb: 0, 102, 204;

  --bg-light: #BFC3D1;
  
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  
  --bs-success: #28a745;
  --bs-success-rgb: 40, 167, 69;
  
  --bs-danger: #dc3545;
  --bs-danger-rgb: 220, 53, 69;
  
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  
  --bs-info: #17a2b8;
  --bs-info-rgb: 23, 162, 184;
  
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  
  --bs-dark: #343a40;
  --bs-dark-rgb: 52, 58, 64;
  
  /* Body colors */
  --bs-body-color: #212529;
  --bs-body-bg: #BFC3D1;
  
  /* Link colors */
  --bs-link-color: #0066cc;
  --bs-link-hover-color: #0052a3;
  
  /* Navbar colors */
  --navbar-light-bg: #000F46;
  --navbar-light-color: white;
  --navbar-light-hover-color: #0066cc;
  
  /* Footer colors */
  --footer-bg: #000F46;
  --footer-text: white;
}

/* ============================================
   Navbar Customization
   ============================================ */

.navbar-light {
  background-color: var(--navbar-light-bg) !important;
}

.navbar-light .nav-link {
  color: var(--navbar-light-color);
  transition: color 0.3s ease;
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus {
  color: var(--navbar-light-hover-color);
}

.navbar-brand {
  color: white !important;
  font-weight: 600;
}

.navbar-brand:hover {
  color: var(--bs-link-hover-color) !important;
}

/* ============================================
   Button Customization
   ============================================ */

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0.2rem 0.3rem 0.2rem 0 rgba(0, 15, 70, 0.25);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ============================================
   Footer Customization
   ============================================ */

footer.bg-light {
  background-color: var(--footer-bg) !important;
}

footer h5 {
  color: white;
  font-weight: 600;
}

footer .text-footer {
  color: var(--footer-text) !important;
}

footer a {
  color: white;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--bs-link-hover-color);
}

/* ============================================
   Alert Customization
   ============================================ */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.alert-success {
  background-color: rgba(var(--bs-success-rgb), 0.1);
  border-color: var(--bs-success);
  color: var(--bs-success);
}

.alert-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.1);
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.alert-warning {
  background-color: rgba(var(--bs-warning-rgb), 0.1);
  border-color: var(--bs-warning);
  color: #856404;
}

.alert-info {
  background-color: rgba(var(--bs-info-rgb), 0.1);
  border-color: var(--bs-info);
  color: var(--bs-info);
}

.page-header{  
  display: flex;
  align-items: center;
  padding: 0.5em;
  border-radius: 0.2em;
  background-color: #404B74;
  color: white;
  font-weight: 600;
}

.bg-card{
  background-color: #8087A2;
  color:white
}

.bg-slide{
  background-color: #BFC3D1;  
}

.bg-slide-header{
  background-color: #8087A2;
  color:white;
  border-radius: 0.2em;
}

.bg-slide table, .bg-slide span{
  color: #404B74;  
}

.bg-slide table{
  border: 1px solid #404B74;
}

.bg-card .alert-info{
  padding: 0;
  color: white;
  border: #8087A2;
  background-color: #8087A2;
}

.form-text{
  color: #BFC3D1 !important;
}

/* ============================================
   Accordion Customization
   ============================================ */

/* Remove purple/blue color from accordion button text */
.accordion-button {
  color: var(--bs-body-color) !important;
}

/* Keep the same color when accordion is open or focused */
.accordion-button:not(.collapsed) {
  color: var(--bs-body-color) !important;
  background-color: #e7f1ff;
}

/* Remove purple color on hover */
.accordion-button:hover {
  color: var(--bs-body-color) !important;
}

/* Remove purple color on focus */
.accordion-button:focus {
  color: var(--bs-body-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 15, 70, 0.25);
}

/* If you want to customize the color of links inside accordion */
.accordion-button a {
  color: var(--bs-link-color) !important;
}

.accordion-button a:hover {
  color: var(--bs-link-hover-color) !important;
}

.profile-header{
  background-color: #404B74;
  color: white;
  padding: 1em;
  border-radius: 0.5em;
}

.prefill{
  background-color: #8087A2;
  color: white;
  padding: 1em;
  border-radius: 0.5em;
}

/* ============================================
   Form Input Customization
   ============================================ */

/* Text inputs, textareas, and selects - focus state */
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 15, 70, 0.25);
}

/* Radio buttons - custom styling */
.form-check-input[type="radio"] {
  border-color: #ced4da;
}

.form-check-input[type="radio"]:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input[type="radio"]:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 15, 70, 0.25);
}

/* Checkboxes - custom styling */
.form-check-input[type="checkbox"] {
  border-color: #ced4da;
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input[type="checkbox"]:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 15, 70, 0.25);
}

/* Form check label hover effect */
.form-check:hover .form-check-label {
  cursor: pointer;
}

/* Selected/highlighted text color customization */
::selection {
  background-color: var(--bs-primary);
  color: white;
}

::-moz-selection {
  background-color: var(--bs-primary);
  color: white;
}

/* File input customization */
.form-control[type="file"]:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 15, 70, 0.25);
}

/* Remove purple outline from all focused elements */
*:focus {
  outline: none;
}

/* Ensure form validation states still show correctly */
.form-control:invalid:focus {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.form-control:valid:focus {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}