/* Emergency banner fix for dark/light mode visibility 
   This file contains the absolute final overrides that take precedence over all other styling */

/* Force banner visibility regardless of theme */
.banner-bg {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

/* Force background image to be visible */
.banner-bg {
  background-image: url(/assets/img/banner/dashboard_banner.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Force proper overlay with !important */
.banner-bg::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
  z-index: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dark mode specific overlay */
.dark-mode .banner-bg::before {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure text is visible and properly styled */
.banner-content h2.title,
.banner-content p {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.banner-content h2.title span {
  color: #6DBE45 !important; 
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Banner positioning */
.banner-area {
  position: relative !important;
  z-index: 2 !important;
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}