/* styles/main.css - Global layout fixes and overrides */

/* Global layout fixes */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.app {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* Main content wrapper */
.main-content {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Ensure all rooms and separators take full width */
.room-container, .room-separator {
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* Mobile optimization */
@media (max-width: 480px) {
  .room-container {
    height: 70vh; /* Shorter rooms on small screens */
  }
  
  .room-separator {
    height: 15vh; /* Shorter separators on mobile */
  }
}

/* Tablet optimization */
@media (min-width: 481px) and (max-width: 768px) {
  .room-container {
    height: 75vh;
  }
  
  .room-separator {
    height: 18vh;
  }
}

/* Desktop optimization */
@media (min-width: 769px) {
  .room-container {
    height: 80vh;
  }
  
  .room-separator {
    height: 20vh;
  }
}