/*
 * ag-customization.css -- Article Galaxy re-skin of the pdf.js 6.x viewer (PSIT-46).
 *
 * Rewritten for pdf.js 6.2.108 (NOT a port of the old pdfjs/ag-customization.css:
 * the 2.8 selectors/variables no longer exist). The vendored viewer.css stays
 * pristine -- every AG tweak lives here, loaded AFTER pdfjs6/web/viewer.css so
 * same-specificity declarations win by source order.
 */

/* ------------------------------------------------------------------ */
/* 1. Brand theme.                                                      */
/*    - color-scheme pins the light palette (viewer.css uses            */
/*      light-dark() everywhere; ag-init.js also sets viewerCssTheme=1). */
/*    - --toolbar-height 40px restores the AG toolbar geometry (v6      */
/*      default is 32px); #viewerContainer/#viewsManager offsets follow  */
/*      the variable automatically. The AG sidebar assumes top: 41px.   */
/* ------------------------------------------------------------------ */
:root {
  color-scheme: light !important;

  --toolbar-height: 40px;

  --body-bg-color: #f5f4f3;
  --toolbar-bg-color: #f5f4f3;
  --toolbar-border-color: rgb(12 12 13);
  --progressBar-color: #ee6e05;
  --toolbar-icon-bg-color: #495057;
  --toolbar-icon-hover-bg-color: #495057;
  --button-hover-color: #ebf4ff;
  --toggled-btn-color: #495057;
  --toggled-btn-bg-color: #ebf4ff;
  --toggled-hover-active-btn-color: #ebf4ff;
  --dropdown-btn-bg-color: #ffffff;
  --separator-color: #495057;
  --field-color: #495057;
  --field-bg-color: #ffffff;
  --field-border-color: rgb(115 115 115);
  --doorhanger-bg-color: #ffffff;
  --doorhanger-border-color: #e5e5e5;
}

/* ------------------------------------------------------------------ */
/* 2. Hidden stock UI (parity with the old AG reader).                  */
/*    Elements are kept in the DOM (viewer.mjs binds them by id) and    */
/*    only hidden visually:                                             */
/*    - .ag-hidden: wrapper groups annotated in fulltextreader.html     */
/*      (page prev/next, pageNumber/numPages, medium-view separator)    */
/*    - #secondaryToolbarToggle: kebab menu; hiding it makes the whole  */
/*      secondary toolbar unreachable = old behavior                    */
/*    - #viewsManagerAddFileButton: v6 open-file affordance inside the  */
/*      views panel (replaces the old ag-customization.js removeChild)  */
/*    - editor buttons: already auto-hidden by annotationEditorMode -1  */
/*      in ag-init.js; this is belt and braces                          */
/* ------------------------------------------------------------------ */
.ag-hidden,
#secondaryToolbarToggle,
#viewsManagerAddFileButton,
#editorModeButtons,
#editorModeSeparator {
  display: none !important;
}

.hidden-element {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* 3. Re-iconed stock buttons: the AG markup puts its own <img>/<svg>   */
/*    inside these buttons, so the stock mask-image icons are dropped.  */
/* ------------------------------------------------------------------ */
#zoomOutButton::before,
#zoomInButton::before,
#printButton::before,
#downloadButton::before,
#viewsManagerToggleButton::before {
  display: none !important;
}

#zoomOutButton,
#zoomInButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  margin: 0 4px;
}

#printButton,
#downloadButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 3px !important;
  border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* 4. Zoom dropdown de-chromed and recolored (was inline styles + 2.8   */
/*    selectors in the old fork).                                       */
/* ------------------------------------------------------------------ */
.toolbarField {
  color: #495057;
}

.dropdownToolbarButton > select {
  color: #495057;
}

#scaleSelectContainer {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-left: 8px;
}

#scaleSelect {
  background-color: #f5f4f3;
  font-size: 1.2em;
}

.dropdownToolbarButton > select > option {
  background: var(--doorhanger-bg-color);
}

.findbar label {
  color: #495057 !important;
}

/* ------------------------------------------------------------------ */
/* 5. AG-owned chrome (carried over from the old fork).                 */
/* ------------------------------------------------------------------ */
.component-pdfviewer {
  overflow: hidden !important;
}

.rpdtoolbarButton.sidebarviewers {
  width: 28px;
  height: 28px;
  margin: 1px 5px;
  padding: 2px 6px 0;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: #495057;
}

.rpdtoolbarButton.sidebarviewers:hover {
  background-color: #ebf4ff;
}

.active-sidebar {
  background-color: #ebf4ff !important;
}

.rpdtoolbarButton.sidebarviewers i.material-icons {
  font-size: 20px;
}

.rpdtoolbarButton.savereference {
  border: none;
  margin: 0 3px !important;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background-color: transparent;
}

.rpdtoolbarButton.savereference:hover {
  background-color: #ebf4ff;
}

.rpdtoolbarButton.savereference i.material-icons {
  font-size: 16px;
  padding-top: 6px;
}

.aglogo-container {
  padding: 0 15px;
  padding-top: 3px;
}

@media all and (max-width: 640px) {
  .aglogo-container {
    padding: 0 5px;
    padding-top: 3px;
  }
}

.aglogo {
  display: block;
  box-sizing: border-box;
  width: 85px;
  margin-top: -6px;
}

/* ------------------------------------------------------------------ */
/* 6. AG sidebar (scite/AI panel) layout.                               */
/*    .agSidebarOpen replaces the old reuse of pdf.js 2.8's sidebarOpen  */
/*    class: it shifts the viewer exactly like v6's own viewsManagerOpen */
/*    does, and the 320px panel (.sidebar-viewers) overlays the left     */
/*    edge. Toggled from ag-init.js (btnsidebaropen/agsidebarclose).     */
/* ------------------------------------------------------------------ */
.sidebar-viewers {
  width: 320px;
  z-index: 1040;
  top: 41px;
}

#outerContainer.agSidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  inset-inline-start: 320px;
  transition-property: inset-inline-start;
}

/* ------------------------------------------------------------------ */
/* 7. Toast + sidebar component typography (unchanged from old fork).   */
/* ------------------------------------------------------------------ */
.b-toaster-top-center .toast {
  font-size: 1rem;
  padding: 12px;
}

::selection {
  background-color: #f37e20;
  color: white;
}

.sidebar-viewers__title .icon {
  font-size: 20px !important;
}

.sidebar-viewers__title b {
  font-size: 1rem !important;
}

.citation-title {
  margin: 10px 0 10px 0 !important;
  font-size: 1rem !important;
}

.sidebar-tab__content p {
  padding: 0;
  line-height: 1.2;
}

.component-sidebar-viewers {
  font-family: Mulish, Roboto, RobotoDraft, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.component-citationrender .text-secondary {
  font-size: 12px !important;
}

.component-citationrender .text-dark {
  font-size: 12px !important;
}

.component-recommendations > div > div p {
  font-size: 12px !important;
  padding: 0 !important;
}

.component-sidebar-viewers .component-recommendations {
  padding-left: 8px !important;
}

.recommendations-table .table-header img {
  padding-left: 5px;
}

.component-recommendations .recommendations-table .table-header__icon {
  width: 16px;
}

.sidebar-tab__content {
  padding-bottom: 40px !important;
}

/* Skip Link - WCAG 2.4.1 Bypass Blocks */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #2860f4;
  color: #ffffff;
  padding: 8px 16px;
  z-index: 10001;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers - WCAG 2.4.6 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}