.pdfjs-layout{display:flex;align-items:stretch;width:100%;height:100%;gap:0}
.pdfjs-sidebar{width:180px;min-width:180px;background:#0f1f23;border-left:1px solid rgba(122,220,201,0.2);overflow:auto;padding:8px}
.pdfjs-thumb{display:block;margin:8px auto;background:#1a2d31;border:1px solid rgba(122,220,201,0.25);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.pdfjs-thumb.active{outline:2px solid #7adcc9}
.pdfjs-pages{flex:1;min-width:0;overflow:auto}
.pdfjs-wrapper{background:rgba(6,24,28,0.92);height:100%;overflow:auto}
.pdfjs-canvas{display:block;margin:12px auto;background:#1a2d31;border:1px solid rgba(122,220,201,0.15);box-shadow:0 6px 18px rgba(0,0,0,0.5);max-width:100%;height:auto}
.pdfjs-pages{display:flex;flex-direction:column;align-items:center;padding:8px}
.pdfjs-toolbar{
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:8px 12px;
    background:rgba(17,46,51,0.6);
    border-bottom:1px solid rgba(122,220,201,0.2);
    gap:10px;
}
.pdf-modal .modal-header{ 
    border-bottom: none;
    position: relative;
}
.pdfjs-toolbar .toolbar-center{display:flex;align-items:center;gap:8px;justify-content:center;flex:1}
.pdfjs-toolbar .toolbar-right{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Remove toolbar-right styles as close button is now outside toolbar */
.pdfjs-toolbar .zoom-level{color:#7adcc9;font-weight:600;min-width:40px;text-align:center}
.pdfjs-toolbar input.page{width:56px;text-align:center;background:rgba(17,46,51,0.8);color:#7adcc9;border:1px solid rgba(122,220,201,0.3);border-radius:6px;height:28px;font-weight:600;font-size:13px;transition:all 0.2s ease}
.pdfjs-toolbar input.page:focus{outline:none;border-color:#7adcc9;background:rgba(17,46,51,0.95);box-shadow:0 0 0 2px rgba(122,220,201,0.2)}
.pdfjs-toolbar input.page:hover{border-color:rgba(122,220,201,0.5);background:rgba(17,46,51,0.9)}
.pdfjs-toolbar input.page::-webkit-outer-spin-button,
.pdfjs-toolbar input.page::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0 }
.pdfjs-toolbar input.page{ -moz-appearance:textfield }
.pdfjs-toolbar .sep{width:1px;height:20px;background:rgba(122,220,201,0.2)}
.pdfjs-toolbar .filename{color:#7adcc9;font-weight:600;font-size:14px}
.pdfjs-zoom{display:flex;gap:6px}
.pdfjs-zoom button{min-width:32px;height:28px}

/* Match toolbar buttons with app theme */
.pdfjs-toolbar .btn.btn-secondary.btn-sm{
    background: rgba(17,46,51,0.75);
    color: #7adcc9;
    border: 1px solid rgba(122,220,201,0.35);
    border-radius: 18px;
    width: 36px; height: 36px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; font-size: 16px;
}
.pdfjs-toolbar .btn.btn-secondary.btn-sm svg{
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
}
.pdfjs-toolbar .btn.btn-secondary.btn-sm:hover{
    background: rgba(17,46,51,0.9);
    border-color: rgba(122,220,201,0.55);
    color: #e8fbf6;
}

/* Close button styles are now in style.css as .pdf-modal > .modal-close */
.pdfjs-toolbar .total{ color:#aee6db; font-weight:600; padding:0 2px }

/* Keep page indicator centered between prev/next */
.pdfjs-toolbar .toolbar-center { gap: 10px; }
.pdfjs-toolbar .page-group{ display:inline-flex; align-items:center; gap:6px; }

/* Mobile optimizations */
@media (max-width: 768px) {
  .pdfjs-toolbar{ 
    padding:4px 6px; 
    gap:3px; 
    overflow-x:auto; 
    -webkit-overflow-scrolling: touch;
    min-height: 40px;
  }
  .pdfjs-toolbar .toolbar-center{ 
    gap:3px; 
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pdfjs-toolbar .page-group{ 
    gap:2px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 2px;
  }
  .pdfjs-toolbar .btn.btn-secondary.btn-sm{ 
    width:28px !important; 
    height:28px !important; 
    border-radius:14px; 
    font-size:13px;
    flex-shrink: 0;
  }
  /* Thu nhỏ nút prev/next trong page navigation */
  .pdfjs-toolbar #prev,
  .pdfjs-toolbar #next {
    width:24px !important;
    height:24px !important;
    font-size:16px;
  }
  /* Thu nhỏ nút zoom in/out để tạo không gian cho zoom % */
  .pdfjs-toolbar #zoomIn,
  .pdfjs-toolbar #zoomOut {
    width:24px !important;
    height:24px !important;
  }
  .pdfjs-toolbar input.page{ 
    width:32px; 
    height:24px; 
    font-size:11px;
    padding: 0 2px;
    text-align: center;
  }
  .pdfjs-toolbar .zoom-level{ 
    font-size: 12px;
    min-width: 35px;
    display: inline-block !important;
    color: #7adcc9;
    font-weight: 600;
  }
  .pdfjs-toolbar .sep{ 
    height: 20px;
    margin: 0 1px;
  }
  .pdfjs-toolbar .total{
    font-size: 11px;
    padding: 0;
  }
  
  /* SVG icons in buttons */
  .pdfjs-toolbar .btn svg{
    width: 14px;
    height: 14px;
    display: block;
  }
  
  /* Đảm bảo toolbar không bị overflow */
  .pdfjs-toolbar .toolbar-center{
    overflow-x: visible;
    white-space: nowrap;
  }
}

/* For very small screens */
@media (max-width: 380px) {
  .pdfjs-toolbar .page-group{
    gap: 1px;
    padding: 0 1px;
  }
  .pdfjs-toolbar .btn.btn-secondary.btn-sm{ 
    width:26px !important; 
    height:26px !important; 
    font-size:12px;
  }
  .pdfjs-toolbar #prev,
  .pdfjs-toolbar #next {
    width:22px !important;
    height:22px !important;
    font-size:14px;
  }
  .pdfjs-toolbar #zoomIn,
  .pdfjs-toolbar #zoomOut {
    width:22px !important;
    height:22px !important;
  }
  .pdfjs-toolbar input.page{ 
    width:28px; 
    height:22px;
    font-size:10px;
  }
  .pdfjs-toolbar .total{
    font-size: 10px;
  }
  .pdfjs-toolbar .zoom-level{
    font-size: 11px !important;
    min-width: 32px !important;
  }
  .pdfjs-toolbar .sep{
    display: none; /* Ẩn separator */
  }
}

