#pdf-epaper-viewer {
    width: 100%;
    height: 1000px;
    border: 2px solid #007cba;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Modernized font */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#pdf-top-bar {
    display: flex;
    padding: 10px 20px;
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
    gap: 12px;
    align-items: center;
    justify-content: center;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    z-index: 10;
    position: relative;
}

#pdf-top-bar input#date-selector {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
    cursor: pointer;
    min-width: 140px;
    font-size: 14px;
    color: #444;
    transition: all 0.2s ease;
}

#pdf-top-bar input#date-selector:hover,
#pdf-top-bar input#date-selector:focus {
    background: #fff;
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
    outline: none;
}

#pdf-top-bar select#page-selector {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin: 0 8px;
    background: #f9f9f9;
    color: #444;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#pdf-top-bar select#page-selector:hover {
    border-color: #007cba;
    background: #fff;
}

#pdf-top-bar button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #555;
    font-size: 18px;
    transition: all 0.2s ease;
}

#pdf-top-bar button:hover {
    background: #f0f4f8;
    color: #007cba;
    transform: translateY(-1px);
}

#pdf-top-bar button:active {
    background: #e1e8ed;
    transform: translateY(0);
}

#pdf-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#pdf-sidebar {
    width: 200px;
    background: #f8f9fa;
    overflow-y: auto;
    border-right: 1px solid #dee2e6;
}

#pdf-thumbnails {
    padding: 10px;
}

.pdf-thumbnail {
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    transition: border-color 0.3s, transform 0.2s;
    position: relative;
}

.pdf-thumbnail:hover {
    border-color: #007cba;
    transform: scale(1.05);
}

.pdf-thumbnail-number {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

#pdf-viewer {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #f8f9fa;
}

#pdf-canvas {
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#loading-indicator {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 1000;
}

#error-message {
    display: none;
    text-align: center;
    padding: 20px;
    color: #dc3545;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin: 20px;
}

@media (max-width: 768px) {
    #pdf-container {
        flex-direction: column;
    }

    #pdf-sidebar {
        width: 100%;
        height: 150px;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    #pdf-top-bar {
        flex-wrap: wrap;
    }
}

/* Archive Page Styles */
#pdf-archive {
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

#archive-controls {
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

#archive-controls input {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#archive-controls input:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

#archive-controls button {
    padding: 10px 20px;
    background-color: #007cba;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 600;
}

#archive-controls button:hover {
    background-color: #006ba1;
}

#pdf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
}

.pdf-item {
    border: none;
    padding: 0;
    border-radius: 8px;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pdf-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

.pdf-thumbnail {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    padding: 15px;
    transition: background-color 0.3s;
}

.pdf-item:hover .pdf-thumbnail {
    background-color: #f1f3f5;
}

.pdf-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.no-thumbnail {
    color: #adb5bd;
    font-size: 0.9em;
    font-style: italic;
}

.pdf-info {
    padding: 15px 15px 10px;
}

.pdf-info h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-info p {
    margin: 0;
    color: #777;
    font-size: 13px;
}

.pdf-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    /* Push to bottom */
    padding: 0 15px 15px;
}

.pdf-actions button {
    flex: 1;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s;
    font-weight: 500;
}

.view-pdf {
    background: #fff;
    color: #007cba;
    border: 1px solid #007cba;
}

.view-pdf:hover {
    background: #007cba;
    color: white;
}

.download-pdf {
    background: #fff;
    color: #28a745;
    border: 1px solid #28a745;
}

.download-pdf:hover {
    background: #28a745;
    color: white;
}

/* Standard/Scroll Mode Redesign (Clean Editorial) */
/* Standard/Scroll Mode - Viewer Background Only */
.scroll-mode {
    background: #f5f5f5;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
}

.scroll-mode #pdf-viewer {
    background: #f5f5f5;
    padding: 40px 0;
}

.scroll-mode #pdf-canvas {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* Elegant shadow */
    margin: 0 auto;
    display: block;
}

.scroll-mode #pdf-sidebar {
    background: #fff;
    border-right: 1px solid #e0e0e0;
}

.scroll-mode .pdf-thumbnail {
    background: #fff;
    border: 1px solid #eee;
}

.scroll-mode .pdf-thumbnail:hover {
    border-color: #007cba;
}

/* Flipbook Mode overrides */
.flipbook-mode #pdf-canvas,
.flipbook-mode #pdf-sidebar,
.flipbook-mode .pdf-thumbnail-number {
    display: none !important;
}

.flipbook-mode #pdf-container {
    justify-content: center;
    align-items: center;
    background: #fdfdfd;
}

.flipbook-mode #flipbook {
    margin: 20px auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.flipbook-mode .page {
    background: white;
}


/* Modern Mode - Dark Viewer Theme */
.modern-mode #pdf-epaper-viewer {
    background: #222;
    /* Dark theme container */
    border: none;
}

/* Modern mode inherits the standard white toolbar now, 
   but we might want to ensure it looks good against the dark body.
   The inherited styles are white bg, so it will look like a white header bar on a dark app. 
   This is clean and standard. 
*/

.modern-mode #pdf-viewer {
    background: #222;
}

.modern-mode #pdf-sidebar {
    background: #1a1a1a;
    border-right: 1px solid #333;
}

.modern-mode .pdf-thumbnail {
    background: #333;
    border-color: #444;
}

.modern-mode .pdf-thumbnail:hover {
    border-color: #007cba;
}

.modern-mode #pdf-top-bar #archive-btn,
.modern-mode #pdf-top-bar #download-btn {
    /* Maybe move these or keep them */
}

.modern-mode #pdf-viewer {
    background: #222;
}

.modern-mode #pdf-sidebar {
    background: #1a1a1a;
    border-right: 1px solid #333;
}

.modern-mode .pdf-thumbnail {
    background: #333;
    border-color: #444;
}

.modern-mode .pdf-thumbnail:hover {
    border-color: #007cba;
}