/* Embedded iframe styles for Articulate Storyline integration */

/* Ensure the app fits properly in iframe/web object */
html, body {
  margin: 0;
  padding: 0;
  height: auto !important;
  min-height: 100vh;
  overflow: visible;
}

/* Make root container responsive */
#root {
  height: auto !important;
  min-height: 100vh;
  width: 100%;
}

/* Ensure proper scrolling behavior */
.ant-layout {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

/* Make sure cards are properly sized */
.ant-card {
  margin-bottom: 16px;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  .ant-layout-content {
    padding: 12px !important;
  }
  
  .ant-row {
    margin: 0 -6px !important;
  }
  
  .ant-col {
    padding: 0 6px !important;
  }
}

/* Hide elements that might cause issues in iframe */
.ant-back-top {
  display: none;
}

/* Ensure modals work properly in iframe context */
.ant-modal-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}