/* 
 * custom_overlay.css - Rectangular Floating UI for PDF.js (ABZ/UDE Style)
 */

:root {
    --toolbar-bg: rgba(0, 59, 122, 0.9); /* UDE Blue semi-transparent */
    --toolbar-blur: 10px;
    --toolbar-radius: 0px; /* SHARP EDGES as requested */
    --toolbar-color: #ffffff;
    --button-hover: rgba(255, 255, 255, 0.1);
    --accent: #ffffff;
}

/* Base Toolbar Container */
#toolbarContainer {
    position: fixed !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important; /* Responsive, no overflow */
    max-width: 560px !important;
    min-width: 0 !important; /* No forced minimum — let it shrink */
    min-height: 50px !important;
    height: auto !important;
    background: var(--toolbar-bg) !important;
    backdrop-filter: blur(var(--toolbar-blur)) !important;
    border-radius: var(--toolbar-radius) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    z-index: 2147483647 !important; /* MAX z-index for Fullscreen API */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 8px !important;
    box-sizing: border-box !important;
}

/* Ensure visibility in PDF.js presentation mode */
.pdfPresentationMode #toolbarContainer {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* PDF Viewer Layout */
#viewerContainer {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    background-color: transparent !important;
}

/* Hide Sidebar */
#sidebarContainer {
    display: none !important;
}

/* UI Group Management (Flatten the hierarchy for flex layout) */
#toolbarViewerLeft, #toolbarViewerRight, #toolbarViewerMiddle, .toolbarHorizontalGroup {
    display: contents !important;
}

/* Elements to hide */
#viewsManagerToggleButton, .toolbarButtonSpacer, #zoomOutButton, #zoomInButton, #scaleSelectContainer, #editorModeButtons, #editorModeSeparator, #secondaryToolbarToggle {
    display: none !important;
}

/* Force all nav buttons ALWAYS visible, override PDF.js responsive hiding */
/* PDF.js adds .hiddenSmallView/.visibleMediumView via JS based on viewport width */
#toolbarContainer #previous,
#toolbarContainer #next,
#toolbarContainer #presentationMode,
#toolbarContainer #printButton,
#toolbarContainer #downloadButton,
#toolbarContainer #viewFindButton,
#toolbarContainer .toolbarButton,
.hiddenSmallView, .hiddenMediumView {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Secondary toolbar consolidation */
#secondaryToolbar, #secondaryToolbarButtonContainer {
    display: contents !important;
}

/* Hide unwanted buttons in secondary toolbar */
#secondaryOpenFile, #viewBookmark, .horizontalToolbarSeparator {
    display: none !important;
}

/* Button Styling (Sharp & Consistent) */
#previous, #next, #presentationMode, #printButton, #downloadButton, #viewFindButton {
    display: inline-flex !important;
    visibility: visible !important;
    color: white !important;
    background: transparent !important;
    border: none !important;
    opacity: 0.8 !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 0 !important; /* SHARP EDGES */
}

/* Hover Effects */
#previous:hover, #next:hover, #presentationMode:hover, #printButton:hover, #downloadButton:hover, #viewFindButton:hover {
    opacity: 1 !important;
    background: var(--button-hover) !important;
}

.toolbarButton::before {
    filter: invert(1) brightness(2) !important;
}

/* Rotate arrows to be horizontal */
#previous::before {
    transform: rotate(-90deg) !important;
}
#next::before {
    transform: rotate(-90deg) !important;
}

/* Custom clear Fullscreen Icon */
#presentationMode::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>') !important;
    transform: scale(0.9) !important;
}
/* Toolbar Flex Layout */
#toolbarViewer {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Ensure the wrapper holding the find button is correctly aligned */
.toolbarButtonWithContainer:has(#viewFindButton) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Page Indicator Styling */
#pageNumber {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    text-align: center !important;
    width: 40px !important;
    height: 28px !important;
    border-radius: 0 !important; /* SHARP */
    font-size: 13px !important;
}

#numPages {
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* Ensure the container of page indicators is horizontal */
.toolbarHorizontalGroup:has(> #numPages) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Search Bar (Findbar) Integration */
#findbar {
    position: absolute !important;
    bottom: 100% !important; /* Show ABOVE the toolbar */
    left: 0 !important;
    right: 0 !important;
    background: var(--toolbar-bg) !important;
    backdrop-filter: blur(var(--toolbar-blur)) !important;
    border-radius: 0 !important; /* SHARP */
    padding: 10px !important;
    width: 100% !important;
    top: auto !important;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    margin-bottom: 5px !important;
}

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

/* Findbar internal elements */
#findInput {
    background: rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
}

/* Color tweak for search box labels */
#findbar label, #findbar .toolbarLabel {
    color: white !important;
    font-size: 11px !important;
    opacity: 0.9 !important;
}

#findbar .toolbarButton::before {
    filter: invert(1) brightness(2) !important;
}

/* Loading Bar */
#loadingBar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}