/*
 * Copyright (C) 2025 Jema Technology
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/* PDF Viewer Styles */

.pdf-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-variant);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pdf-viewer.active {
    opacity: 1;
    pointer-events: auto;
}

/* Toolbar */
.pdf-toolbar {
    height: 56px;
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 16px;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    pointer-events: none;
}

.pdf-toolbar > * {
    pointer-events: auto;
}

.pdf-toolbar.edit-mode-toolbar {
    pointer-events: auto;
}

#pdf-edit-toolbar {
    pointer-events: auto;
}

.pdf-toolbar-left,
.pdf-toolbar-center,
.pdf-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-toolbar-center {
    justify-content: center;
}

.pdf-toolbar-right {
    justify-self: end;
}

.pdf-filename {
    font-size: 14px;
    font-weight: 500;
    color: var(--on-surface);
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.pdf-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--on-surface-variant);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    pointer-events: auto;
}

.pdf-btn:hover {
    background-color: var(--surface-variant);
    color: var(--on-surface);
}

.pdf-btn.primary {
    background-color: var(--primary-color);
    color: white;
}

.pdf-btn.primary:hover {
    background-color: var(--primary-variant);
}

.pdf-btn i {
    font-size: 20px;
}

.pdf-divider {
    width: 1px;
    height: 24px;
    background-color: var(--divider-color);
    margin: 0 8px;
}

.pdf-zoom-level {
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface-variant);
    min-width: 40px;
    text-align: center;
    padding: 4px 8px;
    background-color: var(--background-variant);
    border-radius: 4px;
}

.pdf-page-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--on-surface-variant);
    background-color: var(--background-variant);
    padding: 4px;
    border-radius: 20px; /* Pill shape */
    border: 1px solid var(--border-color);
}

.pdf-nav-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--on-surface-variant);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
    pointer-events: auto;
}

.pdf-nav-btn:hover {
    background-color: var(--surface-variant);
    color: var(--on-surface);
}

.pdf-nav-btn i {
    font-size: 18px;
}

#pdf-page-num {
    width: 40px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 13px;
    color: var(--on-surface);
    font-weight: 500;
    padding: 2px 0;
    -moz-appearance: textfield; /* Firefox */
}

#pdf-page-num::-webkit-outer-spin-button,
#pdf-page-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#pdf-page-num:focus {
    outline: none;
    background-color: var(--surface-variant);
    border-radius: 4px;
}

/* Main Container */
.pdf-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    /* Ensure no transitions interfere with zoom/pan logic */
    transition: none !important;
}

.pdf-sidebar {
    width: 200px;
    background-color: var(--surface-color);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    transition: width 0.3s ease;
}

.pdf-sidebar.hidden {
    width: 0;
    border-right: none;
}

.pdf-sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

.pdf-thumbnail {
    width: 140px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pdf-thumbnail:hover {
    transform: scale(1.02);
}

.pdf-thumbnail canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: 4px;
    background-color: white;
}

.pdf-thumbnail.active canvas {
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.pdf-thumbnail-number {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: 4px;
}

.pdf-thumbnail.active .pdf-thumbnail-number {
    color: var(--primary-color);
    font-weight: 500;
}

.pdf-main {
    flex: 1;
    /* Force vertical scrollbar to prevent layout shift during zoom */
    overflow-y: scroll;
    overflow-x: auto;
    display: block;
    padding: 24px;
    background-color: var(--background-variant);
    position: relative;
    cursor: default;
}

.pdf-main.grab {
    cursor: grab;
}

.pdf-main.grabbing {
    cursor: grabbing;
}

.pdf-canvas-container {
    display: block;
    /* Container is absolutely positioned inside the wrapper */
    position: absolute;
    top: 0;
    left: 0;
    /* CRITICAL: transform-origin must be 0 0 for zoom to work correctly */
    transform-origin: 0 0;
    /* GPU acceleration for smooth zoom */
    will-change: transform;
    /* Prevent any transitions during zoom */
    transition: none !important;
}

#pdf-zoom-wrapper {
    position: relative;
    margin: 0;
    /* Ensure it takes up space for scrollbars */
    flex-shrink: 0;
    /* Prevent transitions during zoom */
    transition: none !important;
}

.pdf-page-wrapper {
    box-shadow: var(--shadow-md);
    background-color: white;
    margin-bottom: 20px;
    position: absolute;
    /* Important: ensure proper stacking context */
    isolation: isolate;
    max-width: none;
    /* Prevent canvas overlap */
    overflow: hidden;
    /* No transitions during zoom */
    transition: none !important;
}

.pdf-page-wrapper .pdf-page-canvas {
    display: block;
    max-width: none;
    /* Crisp text rendering when downscaling high-res canvas */
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    /* No transitions */
    transition: none !important;
}

.pdf-page-wrapper .annotation-canvas {
    background-color: transparent;
    /* Ensure annotations scale correctly */
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: auto; /* Enable events for drawing */
    /* Actually annotation canvas usually matches wrapper size in old logic.
       In new logic, if wrapper is visual size, annotation canvas should probably be visual size too? 
       Or if it's high-res, it needs transform. 
       The annotation manager usually handles its own canvas. 
       Let's assume for now it needs to match the wrapper or be handled by JS.
    */
}

.pdf-page-wrapper .pdf-text-layer {
    /* Text layer sits on top of canvas */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    color: transparent;
    line-height: 1.0;
    /* GPU compositing to prevent glitch during zoom */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Prevent transition interference */
    transition: none !important;
    transform-origin: 0 0;
}

.pdf-page-wrapper .pdf-text-layer ::selection {
    background: rgba(101, 105, 208, 0.3);
}

/* Scrollbars */
.pdf-sidebar::-webkit-scrollbar,
.pdf-main::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pdf-sidebar::-webkit-scrollbar-track,
.pdf-main::-webkit-scrollbar-track {
    background: var(--surface-color);
}

.pdf-sidebar::-webkit-scrollbar-thumb,
.pdf-main::-webkit-scrollbar-thumb {
    background: var(--surface-variant);
    border-radius: var(--radius-full);
}

.pdf-sidebar::-webkit-scrollbar-thumb:hover,
.pdf-main::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-variant);
}

/* Responsive */
@media (max-width: 1024px) {
    .pdf-toolbar-center {
        flex: 1;
        justify-content: center;
    }
    
    .pdf-toolbar-right {
        justify-self: end;
    }
}

@media (max-width: 768px) {
    .pdf-toolbar {
        padding: 0 8px;
        gap: 8px;
    }

    .pdf-filename {
        max-width: 100px;
    }

    .pdf-page-nav {
        font-size: 12px;
        padding: 2px 4px;
    }

    #pdf-page-num {
        width: 24px;
        font-size: 12px;
    }

    .pdf-zoom-level {
        display: none; /* Hide zoom level text on small screens */
    }
}

/* Window Controls Overlay Support */
@media (display-mode: window-controls-overlay) {
  .pdf-toolbar {
    padding-left: calc(16px + env(titlebar-area-x, 0));
    padding-right: calc(16px + (100vw - (env(titlebar-area-x, 0) + env(titlebar-area-width, 100vw))));
    -webkit-app-region: drag;
    app-region: drag;
  }

  .pdf-toolbar button,
  .pdf-toolbar input,
  .pdf-toolbar .pdf-filename,
  .pdf-toolbar .pdf-page-nav {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}