/* ==========================================================
   CIBM Studio Pro
   Document Viewport
   Version 9.1
========================================================== */

/* ----------------------------------------------------------
   Viewport Container
---------------------------------------------------------- */

#viewportContainer {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    overflow: auto;

    background: #7f7f7f;

    padding: 24px;

}

/* ----------------------------------------------------------
   Document Viewport
---------------------------------------------------------- */

#documentViewport {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    min-width: 100%;

}

/* ----------------------------------------------------------
   Individual Page
---------------------------------------------------------- */

.document-page {

    position: relative;

    background: #ffffff;

    box-shadow:
        0 2px 6px rgba(0,0,0,.20),
        0 8px 24px rgba(0,0,0,.12);

    border: 1px solid #dcdcdc;

    overflow: hidden;

}

/* ----------------------------------------------------------
   Canvas
---------------------------------------------------------- */

.document-page canvas {

    display: block;

    background: white;

}

/* ----------------------------------------------------------
   Annotation Layer
---------------------------------------------------------- */

.annotation-layer {

    position: absolute;

    inset: 0;

    pointer-events: auto;

}

/* ----------------------------------------------------------
   OCR Text Layer
---------------------------------------------------------- */

.ocr-layer {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .01;

    user-select: text;

}

.ocr-layer span {

    position: absolute;

    transform-origin: top left;

    white-space: pre;

}

/* ----------------------------------------------------------
   Selection Rectangle
---------------------------------------------------------- */

.selection-box {

    position: absolute;

    border: 2px solid var(--accent);

    background: rgba(0,102,204,.15);

    pointer-events: none;

}

/* ----------------------------------------------------------
   Active Page
---------------------------------------------------------- */

.document-page.active {

    outline: 3px solid var(--accent);

}

/* ----------------------------------------------------------
   Drop Indicator
---------------------------------------------------------- */

.page-drop-target {

    border: 2px dashed var(--accent);

}

/* ----------------------------------------------------------
   Zoom Transform
---------------------------------------------------------- */

.viewport-zoom {

    transform-origin: top center;

    transition: transform .08s linear;

}

/* ----------------------------------------------------------
   Loading State
---------------------------------------------------------- */

.page-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 800px;

    height: 1100px;

    background: #ffffff;

    color: #777;

    border: 1px solid #dcdcdc;

}

/* ----------------------------------------------------------
   Scrollbars
---------------------------------------------------------- */

#viewportContainer::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

#viewportContainer::-webkit-scrollbar-thumb {

    background: rgba(0,0,0,.25);

    border-radius: 6px;

}

#viewportContainer::-webkit-scrollbar-thumb:hover {

    background: rgba(0,0,0,.40);

}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width: 1200px) {

    #viewportContainer {

        padding: 12px;

    }

}

/* ==========================================================
   Selection Overlay
========================================================== */

.page-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.overlay-selection,
.overlay-guides,
.overlay-measurement,
.overlay-ai,
.overlay-custom{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.selection-box{

    position:absolute;

    box-sizing:border-box;

    border:2px solid #0A84FF;

    pointer-events:none;

}

.selection-handle{

    position:absolute;

    width:8px;

    height:8px;

    background:#FFFFFF;

    border:2px solid #0A84FF;

    border-radius:50%;

    pointer-events:auto;

    cursor:pointer;

}

.rotation-handle{

    position:absolute;

    width:10px;

    height:10px;

    background:#FF9500;

    border-radius:50%;

    pointer-events:auto;

    cursor:grab;

}

.overlay-guide{

    position:absolute;

    border:1px dashed #FF4D4F;

    pointer-events:none;

}

.overlay-rectangle{

    position:absolute;

    border:2px solid #0A84FF;

    background:rgba(10,132,255,.08);

    pointer-events:none;

}