html, body, #root {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
}

* { box-sizing: border-box; }

:root {
  --RS__pageGutter: 80px !important;
}

/* Use Flex Column for the main app to prevent overlap */
.thorium_web_reader_app {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
}

/* Header stays at top naturally in flex */
.thorium_web_reader_app_topBar {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: #E6E6E6 !important;
  padding: 10px 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Hide only the Library back button wrapper, leaving TOC and Settings untouched */
.thorium_web_reader_header_backlinkWrapper {
  display: none !important;
}

/* Footer stays at bottom naturally in flex */
.thorium_web_reader_app_bottomBar {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  background-color: #E6E6E6 !important;
  padding: 10px 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  width: 100% !important;
  transform: none !important;
}

/* Ensure layered UI doesn't break transform */
.thorium_web_layeredUI .thorium_web_reader_app_bottomBar {
  transform: none !important;
}

/* The middle section holding the reader must fill remaining space */
.thorium_web_reader_app_layeredUI {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Eliminate unnecessary padding and margin from inner containers */
.thorium_web_reader_header_header h1,
.thorium_web_reader_pagination_wrapper,
.rd-progression {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

/* Restore grid layout for header so title centers and actions float right */
.thorium_web_reader_header_header {
  margin: 0 !important;
  padding: 0 20px !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* Force TOC and other side menus to respect the header/footer bounds */
.thorium_web_sideMenu_panel_default {
  top: 60px !important;
  bottom: 60px !important;
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;
  z-index: 99 !important;
}

.thorium_web_sideMenu_overlay {
  top: 60px !important;
  bottom: 60px !important;
  height: calc(100vh - 120px) !important;
}

.thorium_web_reader_pagination_wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Main text area. 
   Since it's in a flex column, it will not overlap the header/footer. 
   Providing padding creates the exact requested gap to the header/footer. */
.rd-reader-container {
  padding-top: 20px !important;
  padding-bottom: 30px !important;
}
