/* Banner image override fixes - This is the final override for banner styling */

/* Ensure banner image is always visible regardless of theme */
.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;
  position: relative !important;
  z-index: 1 !important; /* Ensure proper stacking context */
  min-height: 500px !important; /* Ensure minimum height even if content is sparse */
}

/* Override any CSS that might hide the background */
.banner-bg::after {
  content: none !important;
  display: none !important;
}

/* Ensure the overlay isn't too dark or light */
.banner-bg::before {
  content: '' !important;
  background: rgba(0, 0, 0, 0.4) !important; /* Standard overlay for light mode */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important; /* Position between bg and content */
  pointer-events: none !important; /* Allow clicks to pass through */
}

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

/* Banner area positioning */
.banner-area {
  position: relative !important;
  z-index: 2 !important; /* Above the overlay */
  padding: 250px 0 145px !important;
}

/* Ensure content remains visible */
.banner-content {
  position: relative !important;
  z-index: 2 !important; /* Ensure content is above overlay */
}

/* Typography settings for banner */
.banner-content .title,
.banner-content p {
  color: #ffffff !important; /* White text for contrast */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; /* Shadow for readability */
}

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

/* Responsive adjustments */
@media (max-width: 991px) {
  .banner-area {
    padding: 200px 0 120px !important;
  }
  
  .banner-content .title {
    font-size: 42px !important;
  }
}

@media (max-width: 767px) {
  .banner-area {
    padding: 180px 0 100px !important;
  }
  
  .banner-content .title {
    font-size: 36px !important;
  }
  
  .banner-bg {
    min-height: 450px !important;
  }
}