/* ================================================
   EXOATLAS EXPLORER - LIVE SOLAR SYSTEM - INDEX PAGE WRAPPER STYLES
   Template integration styles for embedding the app
   ================================================ */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000000;
  color: #eee;
}

body {
  display: flex;
  flex-direction: column;
}


/* App wrapper container */
.live-solar-system-wrapper {
  width: 100%;
  height: 100vh;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border-top: 2px solid #2a2a2a;
  margin-top: auto;
}


@media (max-width: 768px) {
  .live-solar-system-wrapper {
    height: calc(100vh - var(--header-height, 70px));
  }
}

/* Iframe styling */
#live-solar-system-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #111;
  display: block;
}

/* Fullscreen mode styles */
body.fullscreen-mode .site-header,
body.fullscreen-mode .mobile-nav-menu {
  display: none;
}

body.fullscreen-mode .live-solar-system-wrapper {
  height: 100vh;
}

/* ========================================
   DARK MODE STYLES
   ======================================== */
@media (prefers-color-scheme: dark) {
  html,
  body {
    background: #0a0a0a;
    color: #e0e0e0;
  }
  
  .live-solar-system-wrapper {
    border-top: 2px solid #2a2a2a;
  }
  
  #live-solar-system-frame {
    background: #0a0a0a;
  }
  
  .collapse-toggle {
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid #2a2a2a;
    color: #e0e0e0;
  }
  
  .collapse-toggle:hover {
    background: rgba(77, 166, 255, 0.9);
    border-color: #4da6ff;
  }
  
  .collapse-toggle::after {
    background: rgba(10, 10, 10, 0.95);
    color: #e0e0e0;
  }
}