/* CIC overrides to ensure visibility of primary table icon backgrounds without relying on SCSS build */
.table__icon.primary {
  color: var(--clr-theme-primary, #0d6efd) !important;
  background: rgba(13, 110, 253, 0.15) !important; /* ensure not overridden by background shorthand */
  border: 1px solid rgba(13, 110, 253, 0.2);
}
.table__icon.primary i { color: inherit !important; }
.table__icon.primary:hover {
  color: var(--clr-common-white, #fff) !important;
  background: var(--clr-theme-primary, #0d6efd) !important;
  border-color: var(--clr-theme-primary, #0d6efd);
}

/* Ensure disabled state still shows background subtly */
.table__icon.primary:disabled,
.table__icon.primary[disabled] {
  opacity: 0.6;
  background: rgba(13, 110, 253, 0.12) !important;
}

/* Success/Complete variants to match dashboard tasks UI */
.table__icon.success,
.table__icon.complete {
  color: var(--clr-action-success, #198754);
  background-color: rgba(25, 135, 84, 0.15);
}
.table__icon.success:hover,
.table__icon.complete:hover {
  color: var(--clr-common-white, #fff);
  background-color: var(--clr-action-success, #198754);
}

/* Ensure consistent gender toggle styling across all modals */
.nav-pills-sliding-gender {
  /* Force consistent sizing and positioning */
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

.nav-pills-sliding-gender .nav-link {
  /* Ensure consistent button styling */
  min-width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* CRITICAL FIX: Override global nav-pills styles that break gender toggle */
.nav-pills-sliding-gender .nav-link {
  background: transparent !important;
  border: none !important;
  color: var(--sliding-pill-inactive-fg, #6b7280) !important;
}

.nav-pills-sliding-gender .nav-link.active {
  background: transparent !important;
  border: none !important;
  color: var(--sliding-pill-active-fg, #ffffff) !important;
}

/* Fix next button height issue - prevent line-height clipping */
.btn {
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  height: auto !important;
}

.btn i {
  line-height: inherit !important;
  vertical-align: middle !important;
}

/* Fix LPR loading modal to have transparent/blurry background instead of solid card */
#lprLoadingModal .modal-content {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Dark mode for LPR loading modal */
[bd-theme="bd-theme-dark"] #lprLoadingModal .modal-content {
  background: rgba(28, 28, 32, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Ensure the modal backdrop is properly transparent and blurry */
#lprLoadingModal .modal-backdrop {
  background-color: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Fix gender nav-pill sliding pill styling - ensure sliding pill appears correctly */
.nav-pills-sliding-gender {
  /* Ensure the sliding pill system is properly initialized */
  position: relative !important;
  display: inline-flex !important;
}

/* Force the sliding pill to show when neutral is active (default state) */
.nav-pills-sliding-gender.gender-neutral,
.nav-pills-sliding-gender:has(#genderOptionNeutral.active) {
  --sliding-pill-pill-bg: linear-gradient(135deg, #ffc107, #ff9800) !important;
  --sliding-pill-track-bg: linear-gradient(180deg, #fff8e1, #ffecb3) !important;
  --sliding-pill-active-fg: #b45309 !important;
  --sliding-pill-inactive-fg: #6b7280 !important;
  --sliding-pill-hover-fg: #374151 !important;
}

/* Ensure the sliding pill pseudo-element is visible for all states */
.nav-pills-sliding-gender::before {
  opacity: 1 !important;
  background: var(--sliding-pill-pill-bg, linear-gradient(135deg, #ffc107, #ff9800)) !important;
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  bottom: 2px !important;
  left: 2px !important;
  width: var(--pill-w, 70px) !important;
  transform: translateX(var(--pill-x, 0px)) !important;
  border-radius: 999px !important;
  /* Smoother animation with better easing */
  transition: transform 0.35s cubic-bezier(0.4, 0.0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0.0, 0.2, 1), background 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  z-index: 0 !important;
  /* Optimize for smooth animations */
  will-change: transform, width, background !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

/* Male gender state styling - ensure sliding pill is always visible */
.nav-pills-sliding-gender:has(#genderOptionMale.active) {
  --sliding-pill-pill-bg: linear-gradient(135deg, #0d6efd, #0056b3) !important;
  --sliding-pill-track-bg: linear-gradient(180deg, #e7f1ff, #cce5ff) !important;
  --sliding-pill-active-fg: #ffffff !important;
}

.nav-pills-sliding-gender:has(#genderOptionMale.active)::before {
  opacity: 1 !important;
  background: linear-gradient(135deg, #0d6efd, #0056b3) !important;
}

/* Female gender state styling - ensure sliding pill is always visible */
.nav-pills-sliding-gender:has(#genderOptionFemale.active) {
  --sliding-pill-pill-bg: linear-gradient(135deg, #e91e63, #c2185b) !important;
  --sliding-pill-track-bg: linear-gradient(180deg, #fce4ec, #f8bbd9) !important;
  --sliding-pill-active-fg: #ffffff !important;
}

.nav-pills-sliding-gender:has(#genderOptionFemale.active)::before {
  opacity: 1 !important;
  background: linear-gradient(135deg, #e91e63, #c2185b) !important;
}

/* Enhanced hover effects for next buttons with gradient styling */
.js-btn-next.btn-gradient {
  background: linear-gradient(135deg, var(--clr-theme-primary, #0d6efd) 0%, var(--clr-theme-secondary, #6f42c1) 100%) !important;
  color: white !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
  
  /* CRITICAL: Ensure button content stays above all pseudo-elements */
  > * {
    position: relative !important;
    z-index: 10 !important;
    color: white !important;
  }
  
  /* CRITICAL: Force text and icons to stay visible */
  span, i, .fa-solid, .fa-regular, .fa-brands {
    position: relative !important;
    z-index: 10 !important;
    color: white !important;
    /* Prevent any color transitions on text */
    transition: none !important;
  }
  
  &:hover:not(:disabled) {
    /* Subtle lift effect only - no background color change */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.35) !important;
    
    /* CRITICAL: Force text to stay white on hover */
    > * {
      color: white !important;
    }
    
    span, i, .fa-solid, .fa-regular, .fa-brands {
      color: white !important;
    }
  }
  
  &:active:not(:disabled) {
    transform: translateY(0) !important;
    transition-duration: 0.1s !important;
  }
  
  &:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Failsafe for text visibility */
  &:focus {
    color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
  }
  
  /* CRITICAL: Disable redundant ::after pseudo-element that covers text */
  &::after {
    display: none !important;
    content: none !important;
  }
  
  /* Keep ::before if needed but ensure it stays behind content */
  &::before {
    z-index: 1 !important;
  }
}

/* Fix text-muted to be more readable - use readable color for light theme */
.text-muted {
  color: #6c757d !important;  /* Bootstrap's default secondary color - readable */
}

/* Ensure form-text with text-muted is readable */
.form-text.text-muted {
  color: #6c757d !important;
}

/* Override Bootstrap's dark mode variable for consistency */
[data-bs-theme="dark"] .text-muted,
[color-scheme="dark"] .text-muted,
[bd-theme="bd-theme-dark"] .text-muted,
html[bd-theme="bd-theme-dark"] .text-muted {
  --bs-secondary-color: #6c757d !important;  /* Use same readable color */
  color: #6c757d !important;
  opacity: 1 !important;
}

[data-bs-theme="dark"] .form-text.text-muted,
[color-scheme="dark"] .form-text.text-muted,
[bd-theme="bd-theme-dark"] .form-text.text-muted,
html[bd-theme="bd-theme-dark"] .form-text.text-muted {
  --bs-secondary-color: #6c757d !important;
  color: #6c757d !important;
  opacity: 1 !important;
}

/* Fix modal backdrop z-index issue - ensure modal content appears above backdrop */
.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1050 !important;
}

.modal-dialog {
  z-index: 1060 !important;
}


.modal-body,
.modal-header,
.modal-footer {
  z-index: 1080 !important;
  position: relative;
}

/* Center the spinner in LPR loading modal */
#lprLoadingModal .modal-content.text-center .spinner-border {
  margin: 0 auto !important;
}