/* 
 * Custom wallpaper styling for AnySpace
 * Image background implementation
 */

/* Image background styling */
.image-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* Do NOT override user profile layouts that set their own body backgrounds */
body.layout-bodybg .image-background {
  display: none !important;
}

body {
  background-color: #000; /* Fallback color */
  position: relative;
}

body:not(.layout-bodybg) main {
  background: #ffffffe3;
  color: #000;
  padding: 6px 0;
  font-size: 80%;
}

body.page-login main,
body.page-index main {
  background: #fff;
}

/* Container styling - transparent to show video wallpaper */
.master-container {
  background-color: transparent;
  background-image: none;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Adjust header and footer for better visibility with wallpaper */
.myspace-header {
  background-color: rgba(0, 50, 153, 0.95) !important; /* Slightly transparent blue */
}

footer {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  margin-top: 20px;
  border-top: 1px solid #ddd;
}

/* Improve visibility of modules and content areas */
.module {
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
  body {
      background-attachment: scroll; /* Better performance on mobile */
  }
  
  .master-container {
      width: 100%;
  }
}