:root{
--card-bg:#fff; --card-border:#e5e7eb; --muted:#6c757d; --fg:#111827; --accent:#0d6efd; --surface:#f8f9fa;
}
html[data-theme="dark"]{
--card-bg:#0f1115; --card-border:#1f2430; --muted:#9aa4b2; --fg:#e5e7eb; --accent:#60a5fa; --surface:#0b0d11;
}
body{ color:var(--fg); background:var(--surface); }
.bg-surface{ background:var(--surface); }
.page-header.bg-blur{ position:sticky; top:0; z-index:1030; backdrop-filter:saturate(180%) blur(6px); background:rgba(255,255,255,.8); }
html[data-theme="dark"] .page-header.bg-blur{ background:rgba(15,17,21,.8); }
.card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; }
.form-control, .form-select{ border-radius:10px; border-color:var(--card-border); background:var(--card-bg); color:var(--fg); }
.btn{ border-radius:10px; }
.page-footer{ margin-top:40px; padding:20px 0; border-top:1px solid var(--card-border); color:var(--muted); font-size:.875rem; }
.toc a{ text-decoration:none; display:block; padding:.2rem .1rem; border-left:2px solid transparent; }
.toc a.active{ border-left-color:var(--accent); font-weight:600; }
/* Live search dropdown */
.live-suggest{
    position:absolute; left:0; right:96px; top:100%;
    z-index: 2000;
    background: var(--card-bg);
    border:1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    margin-top: .25rem;
    max-height: 420px;
    overflow:auto;
}
.live-suggest .item{
    display:block; padding:.55rem .75rem; text-decoration:none; color:inherit;
    border-bottom:1px solid rgba(0,0,0,.04);
}
.live-suggest .item:last-child{ border-bottom:0; }
.live-suggest .item .t{ font-weight:600; }
.live-suggest .item .m{ font-size:.85rem; color:var(--muted); }
.live-suggest .item.active,
.live-suggest .item:hover{ background: rgba(13,110,253,.08); }
.live-suggest .more{ display:block; padding:.5rem .75rem; text-align:center; font-weight:600; }
@media (max-width: 768px){
    .live-suggest{ right:0; }
}
.brand-logo{
    width:200px; height:50px; object-fit:cover; border-radius:8px;
}
.brand-text{ font-weight:600; letter-spacing:.3px; }
/* Optional: tuck text on very small screens */
@media (max-width:480px){
    .brand-text{ display:none; }
}
     .brand a{
    color: var(--fg) !important;
    text-decoration: none !important;
}
.brand a:hover,
.brand a:focus{
    color: var(--fg) !important;
    text-decoration: none !important;
}
 /* Sticky TOC */
#tocWrap{ position:sticky; top:150px; max-height:calc(100vh - 110px); overflow:auto; }
/* Smooth anchor jumps + offset for sticky header */
html{ scroll-behavior:smooth; }
#pageContent h2, #pageContent h3{ scroll-margin-top:96px; }
/* Optional polish for active link */
#tocWrap .toc a{ text-decoration:none; display:block; padding:.2rem .1rem; border-left:2px solid transparent; }
#tocWrap .toc a.active{ border-left-color:var(--accent); font-weight:600; }

/* Sticky TOC (desktop) */
#tocWrap{ position:sticky; top:88px; max-height:calc(100vh - 110px); overflow:auto; }

/* Smooth jumps; offset for sticky header */
html{ scroll-behavior:smooth; }
#pageContent h2, #pageContent h3{ scroll-margin-top:96px; }


/* Optional: subtle anchor icon on hover */
#pageContent h2 .anchor, #pageContent h3 .anchor{
    margin-left:.25rem; opacity:0; text-decoration:none;
}
#pageContent h2:hover .anchor, #pageContent h3:hover .anchor{ opacity:1; }
  /* TOC structure + persistent highlighting */
.toc ul{ list-style:none; padding-left:.5rem; margin:0; }
.toc li{ margin:.1rem 0; }
.toc .lvl-2 > a{ font-weight:600; }
.toc .lvl-2 > ul{ display:none; padding-left:.5rem; }
.toc .lvl-2.open > ul{ display:block; }

.toc a{
    color: inherit; text-decoration:none; display:block; padding:.2rem 0;
    border-left:2px solid transparent;
}
.toc .current > a{ border-left-color: var(--accent); font-weight:600; }
.toc .current-parent > a{ border-left-color: var(--accent); }

/* Sticky + scroll offset (keep if you already added) */
#tocWrap{ position:sticky; top:88px; max-height:calc(100vh - 110px); overflow:auto; }
html{ scroll-behavior:smooth; }
#pageContent h2, #pageContent h3{ scroll-margin-top:96px; }
 /* Keep admin actions tight */
.table .text-nowrap .btn,
.table .text-nowrap .dropdown,
.table .text-nowrap form {
    display: inline-flex;
    align-items: center;
}
.table .text-nowrap .dropdown-menu form { margin: 0; }
/* Mobile TOC drawer: push down 150px so it clears the header/logo */
@media (max-width: 991.98px){
    #tocOffcanvas{
        top: 50px !important;
        height: calc(100% - 50px) !important;
    }
    /* If you keep the dim backdrop, offset it too */
    .offcanvas-backdrop.show{
        top: 50px !important;
        height: calc(100% - 50px) !important;
    }
}
   .attachment {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.15rem .35rem; border:1px solid var(--card-border,#e5e7eb);
    border-radius:6px; text-decoration:none;
}
.attachment:hover { background:rgba(13,110,253,.06); text-decoration:none; }
 /* === TOC/Related in one card: spacing + sticky + bullets === */

/* Single source of truth for sticky sidebar card */
#tocWrap{
    position: sticky;
    top: 88px;                          /* match your header height */
    max-height: calc(100vh - 110px);    /* viewport-bound */
    overflow: auto;                     /* internal scroll when long */
}

/* Reset default UL margins that create the top gap + overlap */
#tocWrap .toc { margin: 0; padding: 0; }
#tocWrap .toc > ul {                   /* first list level */
    margin: 0;
    padding-left: .75rem;                /* keep a modest indent */
}
#tocWrap .toc ul {                     /* any nested lists */
    margin: 0;
    padding-left: .75rem;
}
/* Consistent item spacing (not big blocks) */
#tocWrap .toc li { margin: 0; padding: .125rem 0; }

/* Keep a little breathing room after the last TOC list */
#tocWrap .toc ul:last-child { margin-bottom: .25rem; }

/* Visual divider before "Related pages" (no <br> needed) */
#tocWrap .related-sep{
    margin: .25rem 0 .5rem;
    border-top: 1px solid var(--card-border, #e5e7eb);
    height: 0;
}

/* Related list bullets: grey markers, tidy spacing */
.related-list{
    list-style: disc inside;            /* show bullets without extra indent */
    margin: 0;
    padding: 0;
}
.related-list li { margin: .125rem 0; }
.related-list li::marker { color: var(--muted); } /* grey bullet */

/* Optional: active TOC link styling (keeps your current look) */
#tocWrap .toc a{
    color: inherit; text-decoration: none; display: block;
    padding: .2rem 0; border-left: 2px solid transparent;
}
#tocWrap .toc a.active{ border-left-color: var(--accent); font-weight: 600; }

/* Make the TOC nav start a new formatting context:
   prevents top/bottom margin collapse with siblings */
#tocWrap .toc{
  display: flow-root;     /* key fix */
  margin: 0;
  padding: 0;
}

/* Kill default UL margins that create the top gap */
#tocWrap .toc > ul{
  margin-block: 0;        /* margin-top:0; margin-bottom:0; */
  padding-inline-start: .75rem;
}

/* Nested lists too */
#tocWrap .toc ul{
  margin-block: 0;
  padding-inline-start: .75rem;
}

/* Provide controlled item spacing without margins causing collapse */
#tocWrap .toc li{
  margin: 0;
  padding: .125rem 0;
}

/* Add a tiny padding to the nav so the last item can't sit flush
   against the next element and visually 'overlap' */
#tocWrap .toc{ padding-bottom: .25rem; }

/* Separator + related list (keeps things tidy) */
#tocWrap .related-sep{
  margin: .25rem 0 .5rem;
  border-top: 1px solid var(--card-border, #e5e7eb);
  height: 0;
}
.related-list{ list-style: disc inside; margin:0; padding:0; }
.related-list li{ margin:.125rem 0; }
.related-list li::marker{ color: var(--muted); }

#tocWrap .toc ul:first-child { margin-top: 0 !important; }
#tocWrap .toc ul:last-child  { margin-bottom: 0 !important; }