/* ============================================
   PDF.css - PDF Preview, Highlights, Drawing Mode, Canvas
   ============================================
   Contains:
   - PDF list and items
   - PDF preview container
   - PDF page container and canvas
   - Highlight overlay and boxes
   - Highlight animations
   - Full-screen drawing mode (mobile)
   - Drawing mode header, footer, controls
   - Drawing zoom controls
   ============================================ */

/* PDF List */
.pdf-list { max-height: 200px; overflow-y: auto; margin-top: 1rem; }
.pdf-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: #f9fafb; border-radius: 6px; margin-bottom: 0.5rem; cursor: pointer; border: 2px solid transparent; }
.pdf-item:hover { background: #f5f3ff; }
.pdf-item.active { border-color: #7c3aed; background: #f5f3ff; }
.pdf-item-name { font-size: 0.8rem; color: #374151; font-weight: 500; }
.pdf-item-date { font-size: 0.7rem; color: #9ca3af; }
.pdf-item-delete { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 0.8rem; padding: 0.25rem; }

/* Preview */
.pdf-preview { min-height: 500px; max-height: 600px; overflow-y: auto; background: #e5e7eb; border-radius: 8px; position: relative; padding: 1rem; }
.pdf-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 450px; color: #9ca3af; }
.pdf-page-container { position: relative; margin: 0 auto 1rem; display: inline-block; }
.pdf-page-container canvas { display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.highlight-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: crosshair; }
.highlight-box { position: absolute; border-radius: 3px; cursor: pointer; transition: opacity 0.2s; }
.highlight-box.processing { border-style: dashed; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============================================
   FULL-SCREEN DRAWING MODE (Mobile)
   ============================================ */

.drawing-mode-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f7fa;
    z-index: 2000;
    flex-direction: column;
}

.drawing-mode-overlay.active {
    display: flex;
}

/* Drawing Mode Header */
.drawing-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    gap: 0.5rem;
}

.drawing-close-btn,
.drawing-done-btn {
    min-height: 44px;
    min-width: 80px;
}

.drawing-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.drawing-done-btn {
    background: white;
    color: #7c3aed;
    font-weight: 600;
}

.drawing-mode-title {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawing Canvas Container */
.drawing-mode-canvas-container {
    flex: 1;
    overflow: auto;
    position: relative;
    background: #e5e7eb;
    -webkit-overflow-scrolling: touch;
}

.drawing-pdf-preview {
    position: relative;
    display: inline-block;
    min-width: 100%;
}

.drawing-pdf-preview canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Drawing Highlight Overlay */
.drawing-highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: crosshair;
    touch-action: none;
}

/* Drawing Mode Footer */
.drawing-mode-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: white;
    border-top: 1px solid #e5e7eb;
    gap: 1rem;
}

.drawing-clear-btn {
    min-height: 48px;
    min-width: 100px;
}

.drawing-instructions {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: #6b7280;
}

/* Drawing Highlight Boxes */
.drawing-highlight-box {
    position: absolute;
    border: 3px solid #7c3aed;
    background: rgba(124, 58, 237, 0.25);
    border-radius: 4px;
    pointer-events: none;
}

.drawing-highlight-box.current {
    border-style: dashed;
    animation: draw-pulse 1s infinite;
}

@keyframes draw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Drawing Zoom Controls */
.drawing-zoom-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.25rem;
}

.drawing-zoom-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0.5rem !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    background: white !important;
}

.drawing-zoom-btn:active {
    background: #e5e7eb !important;
}

.drawing-zoom-level {
    min-width: 50px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

/* Drawing Highlight Counter */
.drawing-highlight-counter {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    color: #6d28d9;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 90px;
    text-align: center;
}

/* Drawing Instructions Bar */
.drawing-instructions-bar {
    background: #f9fafb;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
}

/* Drawing Save Flash Animation */
.drawing-save-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 185, 129, 0);
    pointer-events: none;
    z-index: 2100;
    transition: background 0.15s ease;
}

.drawing-save-flash.active {
    background: rgba(16, 185, 129, 0.3);
}

/* Drawing Canvas Container with Zoom */
.drawing-mode-canvas-container {
    flex: 1;
    overflow: auto;
    position: relative;
    background: #e5e7eb;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}

.drawing-mode-canvas-container.zoomed {
    touch-action: pan-x pan-y pinch-zoom;
}

/* PDF Canvas Wrapper for Zoom */
.drawing-canvas-wrapper {
    transform-origin: top left;
    transition: transform 0.2s ease;
    will-change: transform;
}

/* Minimum highlight size for fat fingers */
@media (max-width: 768px) {
    .drawing-highlight-box {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Landscape mobile - more compact */
@media (max-width: 768px) and (orientation: landscape) {
    .drawing-mode-header {
        padding: 0.5rem 1rem;
    }
    
    .drawing-mode-footer {
        padding: 0.5rem 1rem;
    }
    
    .drawing-mode-overlay {
        flex-direction: column;
    }
}