/* Custom modern styling overrides for PDF.js Viewer */

/* 1. Global Font and Base Styling overrides */
body, button, select, input, textarea {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Theme Specific Variables & Overrides */
html.is-light {
  --pm-bg-primary: #ffffff;
  --pm-bg-secondary: #f8fafc; /* Slate 50 */
  --pm-bg-tertiary: #f1f5f9;  /* Slate 100 */
  --pm-border-color: rgba(0, 0, 0, 0.08);
  --pm-text-primary: #0f172a; /* Slate 900 */
  --pm-text-secondary: #475569; /* Slate 600 */
  --pm-accent-color: #22c55e; /* Emerald 500 */
  --pm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --pm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

html.is-dark {
  --pm-bg-primary: #0b0f19;    /* Deep dark */
  --pm-bg-secondary: #111827;  /* Gray 900 */
  --pm-bg-tertiary: #1f2937;   /* Gray 800 */
  --pm-border-color: rgba(255, 255, 255, 0.08);
  --pm-text-primary: #f9fafb;  /* Gray 50 */
  --pm-text-secondary: #9ca3af; /* Gray 400 */
  --pm-accent-color: #22c55e;  /* Emerald 500 */
  --pm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --pm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

/* 3. Toolbar Customization */
.toolbar {
  height: 48px !important;
}

#toolbarContainer {
  background-color: var(--pm-bg-secondary) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--pm-border-color) !important;
  box-shadow: var(--pm-shadow-md) !important;
  height: 48px !important;
  padding: 8px 16px !important;
  box-sizing: border-box !important;
}

#toolbarViewer {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* 4. Main Page Container */
#viewerContainer {
  background-color: var(--pm-bg-secondary) !important;
  background-image: none !important;
  top: 48px !important;
}

/* 5. PDF Page Shadows and Styling */
.pdfViewer .page {
  border: none !important;
  border-radius: 8px !important;
  box-shadow: var(--pm-shadow-lg) !important;
  margin: 20px auto !important;
  background-color: #ffffff !important; /* Always white background for standard PDF page readability */
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html.is-dark .pdfViewer .page {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

/* 6. Sidebar customization */
#sidebarContainer {
  background-color: var(--pm-bg-primary) !important;
  border-right: 1px solid var(--pm-border-color) !important;
  top: 48px !important;
}

#toolbarSidebar {
  background-color: var(--pm-bg-secondary) !important;
  border-bottom: 1px solid var(--pm-border-color) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#toolbarSidebarLeft {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

#sidebarViewButtons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

#sidebarContent {
  background-color: var(--pm-bg-primary) !important;
}

/* Center "Pages" icon and text horizontally */
#viewThumbnail {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 auto !important;
  aspect-ratio: unset !important;
  padding: 4px 12px !important;
}

#viewThumbnail > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--pm-text-secondary) !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

/* Thumbnail Page Styles in Sidebar */
.thumbnail {
  box-sizing: content-box !important; /* Use content-box so border and padding wrap the dynamic width/height */
  border: 2px solid transparent !important;
  border-radius: 6px !important; /* Subtle radius for non-active pages */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important; /* Subtle shadow */
  background-color: #ffffff !important;
  padding: 2px !important;
  margin: 12px auto 26px auto !important; /* Increased bottom margin for the page number label */
  transition: all 0.2s ease !important;
  float: none !important;
  display: block !important;
  position: relative !important; /* Position relative for the absolute page number pseudo-element */
}

.thumbnail.selected {
  border: 2px solid var(--pm-accent-color) !important; /* Green border for active page */
  border-color: var(--pm-accent-color) !important;
  border-radius: 2px !important; /* Very less radius */
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important;
}

.thumbnailImage {
  border-radius: 4px !important; /* Rounded corners on the image inside */
  display: block !important;
  width: var(--thumbnail-width) !important;
  height: var(--thumbnail-height) !important;
}

/* Page number label below each page thumbnail */
.thumbnail::after {
  content: attr(data-page-number) !important;
  position: absolute !important;
  bottom: -22px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 10px !important;
  color: var(--pm-text-secondary) !important;
  font-weight: 600 !important;
  pointer-events: none !important;
}

/* 7. Dropdowns, Textfields and Inputs */
.toolbarField {
  background-color: var(--pm-bg-primary) !important;
  color: var(--pm-text-primary) !important;
  border: 1px solid var(--pm-border-color) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  outline: none !important;
  font-size: 13px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.toolbarField:focus {
  border-color: var(--pm-accent-color) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important;
}

/* Custom Zoom Dropdown */
#scaleSelectContainer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: unset !important;
  width: auto !important;
}

#scaleSelectContainer::after, #scaleSelectContainer::before {
  display: none !important; /* Hide default arrows/icons */
}

#scaleSelect {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--pm-bg-primary) !important;
  color: var(--pm-text-primary) !important;
  border: 1px solid var(--pm-border-color) !important;
  border-radius: 6px !important;
  padding: 4px 24px 4px 10px !important;
  padding-inline: 10px 24px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  outline: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
  min-width: 80px !important;
  max-width: 140px !important;
  height: 28px !important;
  line-height: 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.is-dark #scaleSelect {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

#scaleSelect:focus, #scaleSelect:hover {
  border-color: var(--pm-accent-color) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}

/* 8. Find Bar (Search popup) */
#findbar {
  background-color: var(--pm-bg-primary) !important;
  background-image: none !important;
  border: 1px solid var(--pm-border-color) !important;
  border-radius: 6px !important; /* Sleek reduced border-radius */
  box-shadow: var(--pm-shadow-lg) !important;
  padding: 12px !important;
  top: 54px !important;
}

#findbar.hidden, #findbar[hidden] {
  display: none !important;
}

#findbar:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Custom Triangle pointing to the search magnifier icon */
#findbar::before, #findbar::after {
  content: "" !important;
  position: absolute !important;
  bottom: 100% !important;
  border-style: solid !important;
  border-color: transparent !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
}

#findbar::before {
  border-width: 8px !important;
  border-bottom-color: var(--pm-border-color) !important;
  left: 20px !important;
  margin-left: -8px !important;
}

#findbar::after {
  border-width: 7px !important;
  border-bottom-color: var(--pm-bg-primary) !important;
  left: 20px !important;
  margin-left: -7px !important;
}

/* 9. Buttons - modern and flat styling */
.toolbarButton, .secondaryToolbarButton {
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  margin: 2px !important;
}

html.is-light .toolbarButton:hover, 
html.is-light .dropdownToolbarButton:hover {
  background-color: var(--pm-bg-tertiary) !important;
}

html.is-dark .toolbarButton:hover, 
html.is-dark .dropdownToolbarButton:hover {
  background-color: var(--pm-bg-tertiary) !important;
}

.toolbarButton.toggled, 
.secondaryToolbarButton.toggled {
  background-color: var(--pm-bg-tertiary) !important;
  border-radius: 6px !important;
}

/* 10. Secondary Toolbar (Tools panel) */
#secondaryToolbar {
  background-color: var(--pm-bg-primary) !important;
  border: 1px solid var(--pm-border-color) !important;
  border-radius: 6px !important; /* Sleek reduced border-radius */
  box-shadow: var(--pm-shadow-lg) !important;
  top: 54px !important;
  width: max-content !important;
  min-width: 160px !important;
  max-width: 280px !important;
  overflow: visible !important; /* Allow pointing triangle to overflow and not get clipped */
}

#secondaryToolbar .toolbarButton.labeled {
  font-size: 10px !important; /* Reduced font size in tools menu */
}

#secondaryToolbar .toolbarButton.labeled > span {
  font-size: 10px !important;
}

#secondaryToolbarButtonContainer {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100% !important;
}

/* Custom scrollbar for tools dropdown button container */
#secondaryToolbarButtonContainer::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

#secondaryToolbarButtonContainer::-webkit-scrollbar-track {
  background: transparent !important;
}

#secondaryToolbarButtonContainer::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4) !important;
  border-radius: 9999px !important;
}

#secondaryToolbarButtonContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6) !important;
}

.secondaryToolbarButton {
  color: var(--pm-text-primary) !important;
}

/* Smooth rotate animation for tools icon when menu is open */
#secondaryToolbarToggleButton::before {
  transition: transform 0.15s ease-in-out !important;
}

#secondaryToolbarToggleButton.toggled::before,
#secondaryToolbarToggleButton[aria-expanded="true"]::before {
  transform: scaleX(var(--dir-factor)) rotate(90deg) !important;
}

/* Custom Triangle for Secondary Toolbar pointing to the tools button */
#secondaryToolbar::before, #secondaryToolbar::after {
  content: "" !important;
  position: absolute !important;
  bottom: 100% !important;
  border-style: solid !important;
  border-color: transparent !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
}

#secondaryToolbar::before {
  border-width: 8px !important;
  border-bottom-color: var(--pm-border-color) !important;
  right: 12px !important;
}

#secondaryToolbar::after {
  border-width: 7px !important;
  border-bottom-color: var(--pm-bg-primary) !important;
  right: 13px !important;
}

.horizontalToolbarSeparator {
  border-top: 1px solid var(--pm-border-color) !important;
  margin: 4px 0 !important;
}

/* 11. Highlight and Annotations color tweak */
::selection {
  background: rgba(34, 197, 94, 0.3) !important;
}

/* 12. Clean Scrollbar overrides */
#viewerContainer::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#viewerContainer::-webkit-scrollbar-track {
  background: transparent;
}

#viewerContainer::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4); /* Slate gray transparent */
  border-radius: 9999px;
}

#viewerContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6);
}

/* 13. Progress bar */
#loadingBar .progress {
  background-color: var(--pm-border-color) !important;
}

#loadingBar .progress .glimmer {
  background: var(--pm-accent-color) !important;
}

/* Hide some legacy buttons if desired, or keep them styled cleanly */
.toolbarButtonSpacer {
  width: 4px !important;
}

/* Alignment fixes for modern look */
#toolbarViewerLeft, #toolbarViewerMiddle, #toolbarViewerRight {
  display: flex !important;
  align-items: center !important;
}

/* 14. Hide unwanted tools and features */
#editorModeButtons,
#editorModeSeparator,
#printButton,
#secondaryPrint,
#downloadButton,
#secondaryDownload,
#secondaryOpenFile,
#viewBookmark,
#viewBookmarkSeparator,
#spreadModeButtons,
#documentProperties,
#viewOutline,
#viewAttachments,
#viewLayers {
  display: none !important;
}

/* 15. Mobile Specific Overrides */
@media (max-width: 768px) {
  #pageNumber,
  .loadingInput:has(#pageNumber),
  #numPages {
    display: none !important;
  }

  #sidebarContainer {
    z-index: 100005 !important;
  }

  #findbar {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--pm-border-color) !important;
    border-bottom: 1px solid var(--pm-border-color) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    padding: 8px 16px !important;
    background-color: var(--pm-bg-primary) !important;
    gap: 8px !important;
    z-index: 99999 !important;
  }

  #findbar:not(.hidden) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Hide the pointing triangles on mobile */
  #findbar::before, #findbar::after {
    display: none !important;
  }

  /* Expand input container to fill space */
  #findInputContainer {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
  }

  #findInputContainer .loadingInput {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #findInput {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hide options */
  #findbarOptionsOneContainer,
  #findbarOptionsTwoContainer {
    display: none !important;
  }

  /* Message container (results count) inline */
  #findbarMessageContainer {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: var(--pm-text-secondary) !important;
  }

  /* Custom chevron up/down icons for search navigation on mobile */
  :is(#findbar #findInputContainer) #findPreviousButton::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E") !important;
  }

  :is(#findbar #findInputContainer) #findNextButton::before {
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  }
}

/* Custom scrollbar for toggle sidebar thumbnail container */
#thumbnailView::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

#thumbnailView::-webkit-scrollbar-track {
  background: transparent !important;
}

#thumbnailView::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4) !important;
  border-radius: 9999px !important;
}

#thumbnailView::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.6) !important;
}