.main-container {
   height: calc(100vh - 56px);
   display: flex;
}

.sidebar {
   width: 250px;
   overflow-y: auto;
}

.pdf-container {
   flex: 1;
   overflow-y: auto;
   background-color: #e9ecef;
   position: relative;
}

.pdf-page-wrapper {
   margin: 20px auto;
   position: relative;
   display: inline-block;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.pdf-canvas {
   display: block;
   border: 1px solid #dee2e6;
   background-color: white;
}

.edit-canvas {
   position: absolute;
   top: 0;
   left: 0;
   cursor: crosshair;
   z-index: 10;
}

.tool-button {
   width: 100%;
   margin-bottom: 10px;
   text-align: left;
}

.tool-button.active {
   background-color: #0d6efd;
   color: white;
}

.page-thumbnail {
   width: 100%;
   height: 150px;
   object-fit: contain;
   border: 2px solid transparent;
   cursor: pointer;
   background-color: white;
}

.page-thumbnail.active {
   border-color: #0d6efd;
}

.page-controls {
   position: absolute;
   top: 5px;
   right: 5px;
   z-index: 20;
}

.text-overlay {
   position: absolute;
   border: 1px dashed #0d6efd;
   padding: 2px;
   cursor: move;
   background-color: rgba(255,255,255,0.8);
}

.image-overlay {
   position: absolute;
   border: 1px dashed #0d6efd;
   cursor: move;
}

.color-picker {
   width: 40px;
   height: 40px;
   border: 1px solid #dee2e6;
   cursor: pointer;
}

@media (max-width: 768px) {
   .sidebar {
       position: fixed;
       top: 56px;
       left: -250px;
       height: calc(100vh - 56px);
       z-index: 1000;
       transition: left 0.3s;
   }
   .sidebar.show {
       left: 0;
   }
   .main-container {
       flex-direction: column;
   }
}

.resize-handle {
   box-sizing: border-box;
   border-radius: 50%;
}

.drag-over {
   outline: 2px dashed #0d6efd;
   background: #e7f1ff;
}
.dragging {
   opacity: 0.5;
}
#zoomLevel {
    min-width: 50px;
    text-align: center;
}