/* Ensure full-height, no extra margins */
html, body {
  margin: 0;
  height: 100%;
}

/* Flex layout: left=main Moodle, right=iframe */
#page {
  display: flex;
  min-height: 100vh;
}

/* Left pane: Moodle content */
#page-content, .container-fluid {
  flex: 1 1 auto;
}

/* Container for iframe + toggle */
#splitscreen-container {
  display: flex;
  height: 100vh;
  position: relative;
}

/* Left pane: Moodle content */
#splitscreen-main {
  flex: 1;
  overflow: auto;
}

/* Right pane container */
#splitscreen-iframe-container {
  width: 40%; /* todo: can this be made dynamic? */
  height: 100vh;
  overflow: hidden; /* ? might not be needed */
  transition: width 0.3s ease;
  position: relative; 
}

/* Collapsed state: hide the pane */
#splitscreen-iframe-container.collapsed {
  width: 0;
  overflow: hidden;
}

/* Iframe styling */
#splitscreen-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.splitscreen-dropdown-item:hover {
  background-color: black;
}

.nav-link.dropdown-toggle {
  color: #1d2125;
  background-color: transparent;
}

#splitscreen-resizer {
    background: #e0e0e0;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    height: 100%;
}
#splitscreen-iframe-container {
    background: #fff;
    height: 100%;
    overflow: auto;
}