/* =========================================
   DOCUMENT PAGE
========================================= */

.document-page{
display:flex;
gap:30px;
align-items:flex-start;
}

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

.document-sidebar{
width:320px;
min-width:320px;
position:sticky;
top:20px;
height:calc(100vh - 40px);
overflow-y:auto;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(12px);
border-radius:20px;
padding:25px;
border:1px solid rgba(255,255,255,0.15);
scrollbar-width:thin;

}


/* CUSTOM SCROLLBAR */

.document-sidebar::-webkit-scrollbar{
width:6px;
}

.document-sidebar::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:10px;
}

.sidebar-header{
margin-bottom:30px;
}

.sidebar-header h2{
font-size:28px;
}

.sidebar-section{
margin-bottom:18px;
}

.sidebar-link{
display:block;
color:#fff;
text-decoration:none;
font-weight:700;
padding:10px 15px;
border-radius:10px;
transition:0.3s;
}

.sidebar-link:hover{
background:rgba(255,255,255,0.12);
}

.sidebar-subsections{
padding-left:20px;
margin-top:10px;
}

.sidebar-sublink{
display:block;
color:#dbeafe;
text-decoration:none;
padding:8px 10px;
font-size:15px;
}

.sidebar-subchild-link{
display:block;
color:#cbd5e1;
text-decoration:none;
padding:6px 10px;
font-size:14px;
padding-left:20px;
}

/* =========================================
   CONTENT WRAPPER
========================================= */

.document-content-wrapper{
flex:1;
background:white;
color:#111827;
border-radius:25px;
padding:60px;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
min-height:100vh;
}

/* =========================================
   DOCUMENT HEADER
========================================= */

.document-header{
margin-bottom:50px;
padding-bottom:30px;
border-bottom:1px solid #e5e7eb;
}

.document-header h1{
font-size:52px;
margin-bottom:20px;
line-height:1.2;
}

.document-meta{
display:flex;
gap:30px;
margin-bottom:20px;
font-weight:600;
color:#6b7280;
}

.document-description{
font-size:18px;
line-height:1.8;
color:#4b5563;
}

/* =========================================
   SECTION
========================================= */

.doc-section{
margin-bottom:60px;
}

.section-title{
font-size:38px;
margin-bottom:25px;
color:#0f172a;
}

.subsection-title{
font-size:30px;
margin-top:50px;
margin-bottom:20px;
color:#1e293b;
}

.sub-subsection-title{
font-size:24px;
margin-top:40px;
margin-bottom:15px;
color:#334155;
}

.section-content{
font-size:18px;
line-height:2;
}

/* =========================================
   CKEDITOR CONTENT
========================================= */

.section-content img{
max-width:100%;
border-radius:15px;
margin:20px 0;
}

.section-content table{
width:100%;
border-collapse:collapse;
margin:30px 0;
}

.section-content table,
.section-content th,
.section-content td{
border:1px solid #d1d5db;
padding:12px;
}

.section-content pre{
background:#0f172a;
color:white;
padding:20px;
border-radius:15px;
overflow:auto;
margin:20px 0;
}

.section-content code{
background:#f3f4f6;
padding:2px 6px;
border-radius:5px;
}

/* =========================================
   IMAGES
========================================= */

.section-images{
margin-top:30px;
}

.image-box{
margin-bottom:30px;
}

.image-box img{
max-width:100%;
border-radius:15px;
}

.image-caption{
margin-top:10px;
font-size:14px;
color:#6b7280;
}

/* =========================================
   ATTACHMENTS
========================================= */

.attachment-section{
margin-top:70px;
padding-top:40px;
border-top:1px solid #e5e7eb;
}

.attachment-item{
display:block;
padding:15px 20px;
background:#f3f4f6;
border-radius:10px;
margin-bottom:15px;
text-decoration:none;
color:#111827;
font-weight:600;
}

/* =========================================
   VERSION
========================================= */

.version-section{
margin-top:60px;
}

.version-item{
padding:12px 18px;
background:#f8fafc;
border-radius:10px;
margin-bottom:10px;
}

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

@media(max-width:1200px){

.document-page{
flex-direction:column;
}

.document-sidebar{
width:100%;
position:relative;
height:auto;
}

}

@media(max-width:768px){

.document-content-wrapper{
padding:30px;
}

.document-header h1{
font-size:38px;
}

.section-title{
font-size:30px;
}

.subsection-title{
font-size:24px;
}

}

/* =========================================
   ACTIVE SIDEBAR LINK
========================================= */

.nav-link-item{
transition:0.3s;
border-radius:8px;
display:block;
padding:8px 12px;
}

.nav-link-item.active-section{
background:#ffb300;
color:#111 !important;
font-weight:700;
box-shadow:0 4px 15px rgba(255,179,0,0.25);
}

/* Smooth Scroll */

html{
scroll-behavior:smooth;
}

/* =========================================
   FLOATING DOCUMENT NAVIGATION
========================================= */

.doc-navigation{

position:fixed;

bottom:25px;

right:40px;

z-index:9999;

display:flex;

gap:15px;

background:white;

padding:12px;

border-radius:14px;

box-shadow:0 10px 30px rgba(0,0,0,0.15);

border:1px solid #e5e7eb;

}

/* BUTTON */

.nav-btn-doc{

background:#0b3d91;

color:white;

border:none;

padding:12px 22px;

border-radius:10px;

cursor:pointer;

font-size:15px;

font-weight:600;

transition:0.3s;

}

/* HOVER */

.nav-btn-doc:hover{

background:#061a40;

transform:translateY(-2px);

}

/* DISABLED */

.nav-btn-doc:disabled{

opacity:0.4;

cursor:not-allowed;

transform:none;

}

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

.sidebar-subsections{
max-height:0;
overflow:hidden;

transition:max-height 0.4s ease;
margin-left:15px;
}

/* OPEN STATE */

.sidebar-section.open .sidebar-subsections{
max-height:1000px;
}

/* =========================================
   3 COLUMN LAYOUT
========================================= */

.three-column-layout{
display:grid;
grid-template-columns:300px 1fr 260px;
gap:30px;
align-items:start;
}

/* =========================================
   RIGHT TOC PANEL
========================================= */

.right-toc-panel{

position:sticky;
top:20px;

height:calc(100vh - 40px);

overflow-y:auto;

padding:20px;

background:#ffffff;

border:1px solid #e5e7eb;

border-radius:12px;
}

/* =========================================
   TOC HEADER
========================================= */

.toc-header{
margin-bottom:20px;
padding-bottom:10px;
border-bottom:1px solid #e5e7eb;
}

.toc-header h3{
font-size:18px;
font-weight:700;
color:#111827;
}

/* =========================================
   TOC LINKS
========================================= */

.toc-link,
.toc-sublink,
.toc-subchild-link{

display:block;

text-decoration:none;

padding:7px 10px;

margin-bottom:5px;

border-radius:8px;

transition:0.3s;

color:#374151;

font-size:14px;
}

/* LEVELS */

.toc-sublink{
padding-left:20px;
font-size:13px;
}

.toc-subchild-link{
padding-left:35px;
font-size:12px;
}

/* HOVER */

.toc-link:hover,
.toc-sublink:hover,
.toc-subchild-link:hover{
background:#f3f4f6;
}

/* ACTIVE */

.active-toc{
background:#2563eb;
color:white !important;
font-weight:600;
}

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

@media(max-width:1400px){

.three-column-layout{
grid-template-columns:280px 1fr;
}

.right-toc-panel{
display:none;
}

}

@media(max-width:992px){

.three-column-layout{
grid-template-columns:1fr;
}

.document-sidebar{
position:relative;
width:100%;
height:auto;
}

}

/* =========================================
   RIGHT TOC LINKS
========================================= */

.dynamic-toc-link{
    display: block;
    margin-bottom: 10px;
    color: #000000;
    text-decoration: none;
    line-height: 1.5;
}


/* OPTIONAL INDENT LEVELS */

.toc-level-h3{
    padding-left: 10px;
}

.toc-level-h4{
    padding-left: 25px;
    font-size: 14px;
    opacity: 0.9;
}

/* =========================================
   COLLAPSIBLE CONTENT
========================================= */

.content-wrapper{
    margin-bottom: 20px;
}

.collapse-btn{
    background: #1f2937;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
    font-size: 14px;
}

.collapse-btn:hover{
    opacity: 0.9;
}

.collapsible-content{
    overflow: hidden;
    transition: all 0.3s ease;
}

.collapsed{
    display: none;
}

.collapsible-content.collapsed{

display:none;


}