/* Outer Container: Use a vertical layout (toolbar on top, viewer below). */
.pdf-outer-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Make it stretch full height if desired. */
  width: 100%;
  background: #fafafa; /* Example background */
}

/* The main container (with the PDF viewer & sidebar) occupies the remaining space below the toolbar. */
#mainContainer {
  flex: 1; /* fill remaining vertical space */
  display: flex;
  position: relative;
  overflow: hidden; /* manage overflow if needed */
}

/* The top toolbar. */
.toolbar {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
  z-index: 10; /* Ensures it appears above PDF content */
  position: relative; /* Or position: sticky; top: 0; if you want it to remain pinned while scrolling. */
  padding: 0.5rem 1rem;
}

/* Tidy up the horizontal groupings in the toolbar. */
.toolbarHorizontalGroup {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* spacing between buttons, etc. */
}

/* The viewer container (right section) flex to fill, with the #sidebarContainer if needed. */
#outerContainer #viewerWrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* By default, the viewer container is relative so the PDF pages do not overlap the toolbar. */
#viewerContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto; /* scrollable for the PDF content */
  background: #ddd; /* example background color */
}

/* Ensure the PDF content does not overlap the toolbar by giving it a top margin/padding if needed. */
#viewer {
  position: relative;
  margin: 1rem auto; /* example: some margin for aesthetics */
}

/* SIDEBAR: Make it collapsible. */
#sidebarContainer {
  width: 250px;
  min-width: 250px;
  max-width: 400px;
  background-color: #f5f5f5;
  border-right: 1px solid #ccc;
  overflow: auto;
  transition: all 0.3s ease;
}

/* A collapsed sidebar (you can toggle this class with JS). */
#sidebarContainer.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
}

/* Doorhangers or “dropdowns” for advanced features. */
.doorHanger {
  background: #ffffff;
  border: 1px solid #ccc;
  position: absolute;
  padding: 0.5rem;
  z-index: 999; /* above PDF content */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-top: 0.5rem;
  /* Initially hidden with display: none or .hidden class. */
}

/* Example styling for a “hidden” class to hide elements. */
.hidden {
  display: none !important;
}

/* Example for a simple "More Tools" button with icon. */
#secondaryToolbarToggleButton::after {
  content: "▼";
  margin-left: 0.25rem;
  font-size: 0.75rem;
}