/* Modern PDF.js Viewer Override Stylesheet */
/* Load this after viewer.css to override default styles */

:root {
  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;
  --background-dark:#0f172a; /* #0f172a;*/
  --background-darkest:#0a0f1a; /* #0f172a;*/
  --background-light: #1e293b;
  --surface: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border-color: #475569;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
}

body {
  background: var(--background-darkest) !important;
}

#toolbarContainer {
  padding: 0px !important;
} 

.toolbarHorizontalGroup {
  height: auto !important ;
  
}

.toolbarHorizontalGroup hiddenMediumView {
  padding: 0px !important;
  margin: 0px !important;
}

/* Main toolbar modernization */
#toolbarContainer {
  background: var(--background-dark) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  height: 48px !important;
}

#toolbarViewer {
  padding: 0px 12px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Button styling */
.toolbarButton,
#secondaryToolbarToggle {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0px !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  color: var(--text-secondary) !important;
  min-width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  ;
}

.toolbarButton:hover,
#secondaryToolbarToggle:hover {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  transform: translateY(-1px);
}

.toolbarButton:active {
  transform: translateY(0);
}

/* Input fields */
#pageNumber,
#scaleSelect {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  height: 25px !important;
  line-height: normal !important;
}

#pageNumber {
  width: 50px !important;
  text-align: center !important;
}

#scaleSelect {
  min-width: 100px !important;
}

#pageNumber:focus,
#scaleSelect:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Sidebar */
#sidebarContainer {
  background: var(--background-darkest) !important;
  border-right: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
  top: 48px !important;
}

#toolbarSidebar {
  background: var(--background-dark) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 6px !important;
  margin-bottom: 5px !important;
  height: 40px !important;
}

#sidebarContent {
  margin-top: 15px !important; /* Below toolbar */
}

.toolbarButton.toggled {
  background: var(--primary-color) !important;
  color: white !important;
}

/* Thumbnail view */
.thumbnail {
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.thumbnail:hover {
  border-color: var(--primary-color) !important;
  transform: scale(1.05);
  box-shadow: var(--shadow-lg) !important;
}

.thumbnail.selected {
  border-color: var(--primary-color) !important;
  background: var(--surface) !important;
}

/* Search bar */
#findbar {
  background: var(--background-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 12px !important;
  margin: 8px !important;
}

#findInput {
  background: var(--surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
  padding: 8px 12px !important;
}

#findInput:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Secondary toolbar */
#secondaryToolbar {
  background: var(--background-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
}

.secondaryToolbarButton {
  background: transparent !important;
  border-radius: 6px !important;
  color: var(--text-secondary) !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
  margin: 2px 0 !important;
}

.secondaryToolbarButton:hover {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

/* Viewer background */
#viewerContainer {
  background: #0a0f1a !important;
}

/* PDF page canvas */
.page {
  box-shadow: var(--shadow-lg) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 20px auto !important;
}

/* Loading bar */
#loadingBar {
  background: var(--surface) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-top: 10px !important;
}

.progress {
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)) !important;
  transition: width 0.3s ease !important;
}

/* Dialog boxes */
.dialog {
  background: var(--background-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
}

.dialog .row {
  color: var(--text-primary) !important;
}

.dialog button {
  background: var(--primary-color) !important;
  border: none !important;
  border-radius: 6px !important;
  color: white !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.dialog button:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--background-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--surface);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

/* Zoom controls styling */
#scaleSelectContainer {
  background: var(--surface) !important;
  border-radius: 8px !important;
  padding: 4px !important;
}

/* Page navigation label */
#pageNumberLabel {
  color: var(--text-secondary) !important;
}

/* Toolbar separator */
.verticalToolbarSeparator {
  background: var(--border-color) !important;
  margin: 0 6px !important;
  opacity: 0.5 !important;
  height: 20px !important;
  align-self: center !important;
}

/* Toolbar field groups */
.toolbarField {
  padding: 0 2px !important;
}

#toolbarViewerLeft,
#toolbarViewerRight,
#toolbarViewerMiddle {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Error message styling */
#errorWrapper {
  background: var(--background-light) !important;
  color: var(--text-primary) !important;
}

/* Presentation mode improvements */
.pdfViewer.presentationMode .page {
  margin: 0 auto !important;
  border: none !important;
}

/* Print-specific overrides */
@media print {
  body {
    background: white !important;
  }
}

/* Custom icon for Notes & Quotes toggle button */
.toolbarButton.notesQuotesToggle::before {
  content: "";
  background-image: url('images/sidebar-right.svg');
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent ;
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}


/* Add Quote */
.toolbarButton.notesQuotesToggle::before {
  content: "";
  background-image: url('images/sidebar-right.svg');
  background-size: 23px 23px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent ;
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}


/* Save changes */
.toolbarButton.saveAnnotationsToggle::before {
  content: "";
  background-image: url('images/save-modifications.svg');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent ;
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.toolbarButton.notesQuotesToggle:hover::before {
  opacity: 1;
}


/* 
#NotesAndQuotesSidebarToggleButton.toggled::before {
  background: var(--primary-color) !important;
  color: white !important;
} */


/* ────── ALL THREE RIGHT SIDEBAR TABS – Quotes / Notes / Add Note ────── */
#viewQuotes,
#viewNotes,
#viewAddNote {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 16px !important;
  min-width: 80px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 2px !important;
}

/* Hover state */
#viewQuotes:hover,
#viewNotes:hover,
#viewAddNote:hover {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

/* Active/toggled state */
#viewQuotes.toggled,
#viewNotes.toggled,
#viewAddNote.toggled {
  background: var(--primary-color) !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Clean, modern sans-serif font for the entire notes system */
#notesSidebarContainer,
#noteEditor,
#notesList,
#noteTitleInput {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
  font-weight: 450 !important;           /* slightly lighter than regular – looks premium */
  letter-spacing: -0.01em !important;    /* tiny polish */
}

#noteEditor {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

#notesList {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

/* ────── NOTE EDITOR: perfect dark background matching the viewer ────── */
#addNoteView,
#noteTitleInput,
#noteEditor,
#noteEditor ~ div {                     /* this targets the toolbar we injected */
  background: #0a0f1a !important;
  border: 1px solid #1e293b !important;   /* subtle slate border for definition */
}

/* Toolbar buttons & dropdown */
#noteEditor ~ div button,
#noteEditor ~ div select {
  background: #0f172a !important;         /* one shade lighter for depth */
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
}

#noteEditor ~ div button:hover {
  background: #1e293b !important;
}

/* Title input specific */
#noteTitleInput {
  color: #e2e8f0 !important;
}

/* Focus states — beautiful blue glow */
#noteTitleInput:focus,
#noteEditor:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3) !important;
}

/* Force the rich text toolbar background to match the viewer perfectly */
#noteEditor ~ div {
  background: #0a0f1a !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px !important;
}

#sidebarToggleButton::before{
  background-image: url('images/save-modifications.svg') !important;
}




#notesSidebarContainer {
  z-index: 1 !important;
}

#highlightParamsToolbarContainer,
#editorInkParamsToolbar,
#editorFreeTextParamsToolbar,
#editorStampParamsToolbar,
{
  background-color: var(--background-dark) !important;
  
}

#pageNumber,
#scaleSelect {
  background-color: var(--background-dark) !important;
  border: 1px solid var(--primary-color) !important;
}

#scaleSelectContainer {
  background-color: var(--background-dark) !important;
  border: 0px solid var(--primary-color) !important;
}

.toolbarButton.pdfdarkmode::before {
  content: "";
  background-image: url('images/dark-mode.svg');
  background-size: 28px 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent ;
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}