/* ==========================================
   GOOGLE FONT
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{
    font-family:'Inter',sans-serif;
    background:#d9e8ff;
    overflow:hidden;
}


/* ==========================================
   COLORS
========================================== */

:root{

    --primary:#EB1000;
    --primary-dark:#1d4ed8;
    --toolbar:#282828;

    --sidebar:#282828;

    --workspace:#282828;

    --card:#282828;

    --border:#d5dcef;

    --text:#202124;

    --muted:#6b7280;

    --shadow:
        0 8px 24px rgba(0,0,0,.12);

    --transition:.2s ease;

}


/* ==========================================
   MAIN VIEW
========================================== */

.viewer{

    display:flex;
    flex-direction:column;

    width:100%;
    height:100vh;

}


/* ==========================================
   TOOLBAR
========================================== */

.toolbar{

    height:58px;

    background:var(--toolbar);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    color:white;

    box-shadow:
        0 2px 10px rgba(0,0,0,.18);

    z-index:100;

}


.toolbar-left,
.toolbar-center,
.toolbar-right{

    display:flex;

    align-items:center;

    gap:10px;

}


.toolbar-center{

    flex:1;

    justify-content:center;

}


/* ==========================================
   LOGO
========================================== */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    margin-left:8px;

    font-size:15px;

    font-weight:600;

}

.logo-box{

    width:34px;

    height:34px;

    border-radius:8px;

    background:white;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}


/* ==========================================
   BUTTONS
========================================== */

.icon-btn{

    width:38px;

    height:38px;

    border:none;

    background:transparent;

    color:white;

    border-radius:10px;

    cursor:pointer;

    transition:var(--transition);

    font-size:15px;

}

.icon-btn:hover{

    background:rgba(255,255,255,.15);

}

.icon-btn:active{

    transform:scale(.95);

}


/* ==========================================
   PAGE INDICATOR
========================================== */

.page-indicator{

    display:flex;

    align-items:center;

    gap:8px;

    color:white;

}

.page-indicator input{

    width:55px;

    height:34px;

    border:none;

    border-radius:8px;

    text-align:center;

    outline:none;

    font-weight:600;

    font-size:14px;

}

#zoomLabel{

    width:55px;

    text-align:center;

    font-size:14px;

    font-weight:600;

}

.separator{

    width:1px;

    height:24px;

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

    margin:0 10px;

}


/* ==========================================
   WORKSPACE
========================================== */

.workspace{

    display:flex;

    flex:1;

    overflow:hidden;

    background:var(--workspace);

}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar{

    width:260px;

    background:var(--sidebar);

    border-right:1px solid var(--border);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    transition:.25s ease;

}

.sidebar.collapsed{

    width:0;

    border:none;

}

.sidebar-title{

    height:50px;

    display:flex;

    align-items:center;

    padding:0 18px;

    font-weight:600;

    color:#334155;

    border-bottom:1px solid var(--border);

    background:white;

}

#thumbnailContainer{

    flex:1;

    overflow-y:auto;

    padding:18px;

}

.thumbnail{

    width:100%;

    background:white;

    border-radius:10px;

    padding:8px;

    margin-bottom:18px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.2s;

}

.thumbnail:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.12);

}

.thumbnail.active{

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

}

.thumbnail canvas{

    width:100%;

    display:block;

    border-radius:6px;

}

.thumbnail-number{

    text-align:center;

    margin-top:8px;

    font-size:13px;

    color:var(--muted);

}

/* ==========================================
   PDF VIEWER
========================================== */

.pdf-area{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow:auto;

    padding:40px;

    background:var(--workspace);

}

#viewerContainer{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    width:100%;

    min-height:100%;

}

#pdfCanvas{

    background:white;

    border-radius:8px;

    box-shadow:var(--shadow);

    max-width:100%;

    margin-bottom:40px;

}


/* ==========================================
   SCROLLBARS
========================================== */

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:#e8eefb;

}

::-webkit-scrollbar-thumb{

    background:#b6c5e6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a9d9;

}


/* ==========================================
   LOADING SCREEN
========================================== */

#loading{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.92);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    z-index:9999;

}

#loading.hidden{

    display:none;

}

.loader{

    width:56px;

    height:56px;

    border-radius:50%;

    border:5px solid #dbeafe;

    border-top:5px solid var(--primary);

    animation:spin 1s linear infinite;

}

#loading span{

    font-size:15px;

    color:#374151;

    font-weight:600;

}


/* ==========================================
   INPUTS
========================================== */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{

    appearance:none;

    margin:0;

}

input[type="number"]{

    appearance:textfield;

}


/* ==========================================
   HOVER EFFECTS
========================================== */

.toolbar{

    transition:.25s;

}

.sidebar{

    transition:.25s;

}

.thumbnail{

    transition:.2s;

}

.thumbnail:hover{

    transform:translateY(-3px);

}

.icon-btn{

    transition:.18s;

}

.icon-btn:hover{

    transform:scale(1.05);

}

.icon-btn:active{

    transform:scale(.95);

}


/* ==========================================
   CANVAS ANIMATION
========================================== */

#pdfCanvas{

    animation:fadeIn .35s ease;

}


/* ==========================================
   KEYFRAMES
========================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1100px){

    .sidebar{

        width:220px;

    }

}

@media(max-width:900px){

    .toolbar-center{

        display:none;

    }

    .sidebar{

        position:absolute;

        top:58px;

        left:0;

        height:calc(100vh - 58px);

        z-index:100;

        box-shadow:0 0 30px rgba(0,0,0,.18);

    }

    .sidebar.collapsed{

        transform:translateX(-100%);

        width:260px;

    }

}

@media(max-width:700px){

    .logo span{

        display:none;

    }

    .toolbar{

        padding:0 10px;

    }

    .toolbar-right{

        gap:2px;

    }

    .icon-btn{

        width:34px;

        height:34px;

    }

    .pdf-area{

        padding:20px;

    }

}

@media(max-width:500px){

    .toolbar-right button:nth-child(3),
    .toolbar-right button:nth-child(4),
    .toolbar-right button:nth-child(5){

        display:none;

    }

}

.setup-modal{

    position:fixed;
    inset:0;

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

    display:none;

    justify-content:center;
    align-items:center;

    z-index:99999;

}

.setup-modal.show{

    display:flex;

}

.setup-window{

    width:520px;

    background:#fff;

    border:1px solid #ccc;

    border-radius:8px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.25);

}

.titlebar{

    background:#f5f5f5;

    padding:10px 16px;

    font-weight:600;

    border-bottom:1px solid #ddd;

}

.content{

    display:flex;

    gap:20px;

    padding:25px;

    align-items:flex-start;

}

.setup-logo{

    width:64px;

    height:64px;

}

.footer{

    padding:15px;

    display:flex;

    justify-content:flex-end;

    gap:10px;

    border-top:1px solid #ddd;

}

.footer button{

    padding:8px 22px;

    cursor:pointer;

}

#installBtn{

    background:#2563eb;

    color:white;

    border:none;

}