/* 
 * Bootstrap 5 Override for Flex Layout and Modal Backdrop
 * This file MUST be loaded AFTER bootstrap.css
 */

/* Override Bootstrap's .show { display: block !important } */
.topbar,
div.topbar {
  display: flex !important;
  align-items: center !important;
}

.topbar > .dropdown,
.topbar > div.dropdown,
div.topbar > div.dropdown {
  display: flex !important;
  align-items: center !important;
  margin-left: auto;
}

/* Critical: Override when dropdown is opened (.show class added) */
.topbar > .dropdown.show,
.topbar > div.dropdown.show,
div.topbar > div.dropdown.show,
.topbar .dropdown.show {
  display: flex !important;
  align-items: center !important;
}

/* Additional specificity for any Bootstrap override */
.topbar > * {
  flex-shrink: 0;
}

/* Ensure profile_details maintains flex layout */
.topbar .profile_details,
.topbar > .dropdown > .profile_details,
div.topbar .profile_details {
  display: flex !important;
  align-items: center !important;
}

/* Prevent Bootstrap from breaking profile_details flex on any state */
.topbar .profile_details:hover,
.topbar .profile_details:active,
.topbar .profile_details:focus {
  display: flex !important;
}

/* ============================================
   MODAL BACKDROP - Remove black background
   ============================================ */

/* Remove default black background from Bootstrap modal-backdrop */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
div.modal-backdrop {
  background-color: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Force remove even with inline styles */
.modal-backdrop[style] {
  background-color: transparent !important;
}

/* Alternative: If you want gray background for loading, uncomment below
#loading-popup ~ .modal-backdrop {
  background-color: rgba(128, 128, 128, 0.5) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
*/

/* Any custom overlay/loading background */
.overlay,
.loading-overlay,
.modal-overlay {
  background-color: rgba(128, 128, 128, 0.5) !important;
}
