/* style.css - viewer + editor */
/*:root{
    --left-panel-bg: #f6f7f9;
    --content-bg: #fff;

    --left-panel-text: #d7dde3;
    --page-hover: #2a3138;
    --page-active: #3a82f6;
}*/


:root{
    --left-panel-bg: #f6f7f9;
    --content-bg: #fff;

    --left-panel-text: #d7dde3;
    --page-hover: #2a3138;
    --page-active: #3a82f6;
}


body{ margin:0; font-family:Inter, Arial, sans-serif; color:#222; }
.topbar{ background:#111; color:#fff; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; }
.topbar select{ padding:6px; }
.topbar a{ color:#fff; text-decoration:none; margin-left:12px; }

.layout{ display:flex; height:calc(100vh - 48px); }
.sidebar{ width:280px; background:#f6f7f9; padding:16px; overflow:auto; border-right:1px solid #e5e7eb;   overflow:hidden; }
.sidebar h3{ margin-top:0; }
.nav-item{ display:block; color:#ddd; text-decoration:none; padding:6px 0; }
.nav-item.active{ color:#4ea1ff; }




pre{ background:#1e1e1e; color:#eee; padding:12px; border-radius:6px; overflow:auto; }

/* Editor styles */

.editor-wrap{ display:flex; height:calc(100vh - 48px); overflow:auto; }
.editor-left{ width:280px; background:var(--left-panel-bg); padding:16px; overflow:auto; border-right:1px solid #e5e7eb;   overflow:hidden; }
.editor-left input, .editor-left select { width:100%; padding:8px; margin:6px 0; }

.content{ flex:1; padding-left:20px;padding-top: 20px; overflow:auto; background:var(--content-bg); }
.content img{ max-width:100%; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.08); margin:18px 0; }

.rightcol{ width:240px; border-left:1px solid #eee; padding:18px; background:#fafafa; overflow:auto; }



.editor-main{ flex:1; padding-left:4px; display:flex; flex-direction:column; gap:2px; }
#editorArea{ width:100%; height:60vh; padding:12px; font-family:monospace; font-size:14px; border:1px solid #ddd; border-radius:6px; }
.editor-actions{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.editor-actions input{ padding:6px; }
.preview{ border:1px solid #ddd; padding:12px; border-radius:6px; background:#fff; overflow:auto; max-height:40vh; }

/* login */
.login-box{ max-width:420px; margin:60px auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
.login-box input{ width:100%; padding:10px; margin:8px 0; }

#pagesList{
    max-height:60vh;
    overflow-y:auto;
    margin-top:6px;
    border-top:1px solid #2a2d31;
    padding-top:6px;
  
}

/*for editor 98*/

#pagesList .page-item{
    display:block;
    padding:3px 12px;
    margin:3px 0;
    color:#444;
    text-decoration:none;
    border-radius:6px;
    border-left:4px solid transparent;
    transition:all 0.15s ease;
}

#pagesList a{
    display:block;
    text-decoration:none;
    color:#333;
}

#pagesList .page-item:hover{
    background:#fff6f6;
}

/* highlighted active page */
#pagesList .page-item.active{
    background:#fff4e6;
    border-left:6px solid #ff8c00;
    color:#d35400;
    font-weight:600;
}

/* highlight the text */
#pagesList .page-item.active span,
#pagesList .page-item.active{
    text-shadow:0 0 0.5px #1a3cff;
}

#pagesList .page-item.active a{
    font-weight:600;
}




/* small helpers */
button{ padding:8px 10px; cursor:pointer; border-radius:6px; border:1px solid #ccc; background:#fff; }



html{
scroll-behavior:smooth;
}

#editor{
border:1px solid #ccc;
border-radius:6px;
}

.ql-toolbar{
border-radius:6px 6px 0 0;
}

.ql-container{
border-radius:0 0 6px 6px;
font-size:15px;
}

.ql-container {
    border: none;
    height:100%;
}


.ql-editor {
    margin: 0px;
    padding: 5px 40px;
    font-size:15px;
    line-height:1.4;
}


.ql-editor h1 {
    font-size:28px;
    margin-top:5px;
}

.ql-editor img{
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    max-width:100%;
    height:auto;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;

    cursor: zoom-in;
    
}

.ql-editor img:hover{
    transform: translateY(-3px) scale(1.02);
    box-shadow:0 12px 28px rgba(0,0,0,0.35);
    filter: brightness(1.04);
}


/* draggable media */
.ql-editor img,
.ql-editor video{
    cursor: grab;
    -webkit-user-drag: element;
    user-select: none;
}

/* when dragging */
.ql-editor img:active,
.ql-editor video:active{
    cursor: grabbing;
}


/* fix image alignment inside quill editor */

.ql-editor .ql-align-center img{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.ql-editor .ql-align-right img{
    display:block;
    margin-left:auto;
}

.ql-editor .ql-align-left img{
    display:block;
    margin-right:auto;
}

.quill-output img {
  cursor: zoom-in;
}



.content img {
    cursor: zoom-in;
}

.img-wrap{
    position:relative;
    display:inline-block;
}

.img-wrap img{
    display:block;
    max-width:100%;
    cursor:zoom-in;
}

.img-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .2s;
    font-size:14px;
}

.img-wrap:hover .img-overlay{
    opacity:1;
}


.ql-container .ql-editor img {
    cursor: zoom-in !important;
}

.ql-container .ql-editor img:hover {
    outline: 2px solid rgba(0,0,0,0.2);
}