/* ---------- Toolbar ---------- */

#toolbarContainer {
  background: #1f4bb8 !important;
  border: none !important;
  height: 56px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

#toolbarViewer {
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  padding: 0 16px !important;
}


/* ---------- Left section ---------- */

#toolbarViewerLeft {
  position: absolute !important;
  left: 82px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}


/* ---------- Sidebar ---------- */

#sidebarToggleButton {
  display: flex !important;
}


/* ---------- Hide unwanted controls ---------- */

#zoomOutButton,
#zoomInButton,
#scaleSelectContainer,
#numPages,
#toolbarViewerRight,
#editorModeButtons,
#editorModeSeparator,
#editorHighlightButton,
#secondaryToolbarToggle,
.toolbarButtonSpacer,
#previous,
#next {
  display: none !important;
}


/* ---------- Page number ---------- */

#toolbarViewerMiddle {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

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

#pageNumber {
  display: block !important;

  width: 36px !important;
  height: 32px !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  color: white !important;

  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;

  padding: 0 !important;
  margin: 0 !important;

  pointer-events: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

#pageNumber::-webkit-inner-spin-button,
#pageNumber::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}


/* ---------- Buttons ---------- */

.toolbarButton {
  border-radius: 10px !important;
  margin: 0 4px !important;
}


/* ---------- Loading bar ---------- */

#loadingBar {
  top: 56px !important;
}


/* ---------- Mobile ---------- */



/* ---------- Full-height PDF viewer ---------- */

#mainContainer {
  height: 100vh !important;
}

#viewerContainer {
  position: absolute !important;
  top: 56px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  overflow: auto !important;
}

@media (max-width: 768px) {
  #toolbarContainer,
  #toolbarViewer {
    height: 48px !important;
  }

  #viewerContainer {
    top: 48px !important;
  }

  .toolbarButton {
    width: 36px !important;
    height: 36px !important;
  }

  #pageNumber {
    width: 36px !important;
    height: 32px !important;
    font-size: 18px !important;
  }
}