/* ---------- Page Layout ---------- */

body{
background:#f5f7fb;
font-family: Arial, sans-serif;
}

/* ---------- Navbar ---------- */

.navbar{
background:#0d6efd;
}

.navbar-brand{
font-weight:bold;
font-size:20px;
}

/* ---------- Sidebar ---------- */

.sidebar{
background:#ffffff;
border-right:1px solid #e5e5e5;
}

.nav-link{
color:#333;
padding:8px;
border-radius:6px;
transition:0.2s;
}

.nav-link:hover{
background:#e9ecef;
padding-left:12px;
}

.nav-link.active{
background:#0d6efd;
color:white !important;
}

/* ---------- Cards ---------- */

.card{
border:none;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

/* ---------- Code Blocks ---------- */

pre{
position:relative;
background:#1e1e1e;
color:white;
padding:16px;
border-radius:8px;
overflow-x:auto;
margin-top:10px;
}

.card code{
background:#111827;
color:#22c55e;
padding:4px 8px;
border-radius:6px;
font-family:monospace;
font-size:14px;
}

/* ---------- Copy Button ---------- */

.copy-btn{
position:absolute;
right:10px;
top:5px;
background:none;
border:none;
color:white;
cursor:pointer;
}

.copy-btn:hover{
background:#444;
}

.code-header{
background:#111;
color:white;
font-size:12px;
padding:6px 10px;
border-top-left-radius:6px;
border-top-right-radius:6px;
}

.code-block{
position:relative;
}

#progressBar{
position: fixed;
top:0;
left:0;
height:4px;
background:#0d6efd;
width:0%;
z-index:1000;
}

.card table{
width:100%;
border-collapse: collapse;
margin-top:20px;
}

.card th,
.card td{
border:1px solid #ddd;
padding:10px;
text-align:left;
}

.card th{
background:#f8f9fa;
}

/* TOC */

.toc ul{
list-style:none;
padding-left:0;
font-size:14px;
}

.toc li{
margin-bottom:6px;
}

.toc a{
text-decoration:none;
color:#0d6efd;
}

.toc a:hover{
text-decoration:underline;
}

/* Sticky TOC */

.col-md-2{
position:sticky;
top:20px;
height:100vh;
overflow:auto;
}