/* Emergency fix for profile images */

/* Global base styling for all images */
img {
  background-color: #f8f9fa !important;
  color: transparent !important;
}

/* Fix specifically for profile images */
.profile-picture, 
.profile-picture-preview, 
.profile-image,
.profile-pic img,
.rounded-circle,
.avatar,
img[data-filename],
img[data-user-id] {
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  color: transparent !important;
  object-fit: cover !important;
}

/* Fix image containers */
.profile-img-wrapper,
.preview-container,
.profile-picture-container,
.profile-pic,
.avatar-container {
  background-color: #f8f9fa !important;
  overflow: hidden !important;
}

/* Fix for broken images in Firefox */
img:-moz-broken {
  background-color: #f8f9fa !important;
  background-image: url('/static/images/gray-placeholder.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Fix for broken images in Chrome/Safari */
img:not([src]),
img[src=""],
img[src="#"],
img[src="data:,"],
img[src="about:blank"] {
  background-color: #f8f9fa !important;
  background-image: url('/static/images/gray-placeholder.svg') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Hide the broken image icon completely */
img::before,
img::after {
  content: "" !important;
  display: none !important;
}