/* Penyesuaian kecil di atas Bootstrap 5. */

:root {
    --navbar-h: 57px;
}

html { scroll-padding-top: calc(var(--navbar-h) + 16px); }
body { background: var(--bs-body-bg); }

/* Navbar */
.brand-logo {
    width: 32px; height: 32px; border-radius: 6px;
    display: inline-grid; place-items: center;
    background: var(--bs-primary); color: #fff; font-weight: 700;
}
.navbar-brand small { font-size: .75rem; }
.search-btn { min-width: 0; }
@media (min-width: 768px) { .search-btn { width: 300px; color: var(--bs-secondary-color); } }
.search-btn kbd { font-size: .7rem; }

/* Sidebar */
@media (min-width: 992px) {
    .sidebar-col { position: sticky; top: var(--navbar-h); height: calc(100vh - var(--navbar-h)); overflow-y: auto; }
}
.sidebar-heading {
    margin: 1.25rem 0 .35rem; padding: 0 .5rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color);
}
.sidebar-link {
    display: flex; padding: .35rem .5rem; border-radius: .375rem;
    color: var(--bs-body-color); text-decoration: none; font-size: .925rem;
}
.sidebar-link:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.sidebar-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.sidebar-num { min-width: 2.1rem; color: var(--bs-secondary-color); font-weight: 400; flex-shrink: 0; }
.sidebar-sub { margin: .15rem 0 .5rem 1.4rem; padding-left: .5rem; border-left: 1px solid var(--bs-border-color); }
.sidebar-sub a { display: flex; padding: .2rem .5rem; font-size: .825rem; color: var(--bs-secondary-color); text-decoration: none; }
.sidebar-sub a:hover { color: var(--bs-body-color); }
.sidebar-sub .sidebar-num { min-width: 2.6rem; }

/* Konten */
.main-col { min-width: 0; }
.doc-section { margin-top: 2rem; }
.toc-number { min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.toc-sections .list-inline-item { margin-right: 1rem; }
.min-w-0 { min-width: 0; }
.meta-table th { width: 30%; font-weight: 600; }
.page-toc { position: sticky; top: calc(var(--navbar-h) + 1.5rem); border-left: 1px solid var(--bs-border-color); padding-left: 1rem; }
.page-toc .nav-link { color: var(--bs-secondary-color); }
.page-toc .nav-link:hover, .page-toc .nav-link.active { color: var(--bs-primary); }
.callout-body p:last-child { margin-bottom: 0; }
.badge-orange { background: #fd7e14; color: #fff; }
.admin-tools .btn { line-height: 1.2; }
.btn-group > form:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.btn-group > form:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > form + .btn, .btn-group > .btn + form > .btn { margin-left: -1px; }

/* Pencarian */
#searchResults mark { padding: 0 .1em; background: var(--bs-warning-bg-subtle); }
#searchResults .list-group-item.active mark { background: transparent; color: inherit; }

/* Topologi */
.topology-svg { display: block; width: 100%; min-width: 720px; height: auto; font-family: var(--bs-body-font-family); }
.topology-svg .zone rect { fill: var(--bs-tertiary-bg); stroke: var(--bs-border-color); stroke-dasharray: 4 4; }
.topology-svg .zone text { fill: var(--bs-secondary-color); font-size: 12px; font-weight: 600; }
.topology-svg .link { stroke: #6c757d; stroke-width: 2; }
.topology-svg .link-dashed { stroke-dasharray: 7 6; }
.topology-svg .link-vpn { stroke: var(--bs-primary); stroke-dasharray: 2 5; stroke-width: 2.5; stroke-linecap: round; }
.topology-svg .link-label { fill: var(--bs-secondary-color); font-size: 11px; paint-order: stroke; stroke: var(--bs-body-bg); stroke-width: 4px; }
.topology-svg .node { cursor: pointer; outline: none; }
.topology-svg .node rect { fill: var(--bs-body-bg); stroke: var(--bs-border-color); stroke-width: 1.5; }
.topology-svg .node:hover rect, .topology-svg .node:focus rect, .topology-svg .node.selected rect { stroke: var(--bs-primary); stroke-width: 2.5; }
.topology-svg .node-label { fill: var(--bs-body-color); font-size: 13px; font-weight: 600; }
.topology-svg .node-sub { fill: var(--bs-secondary-color); font-size: 11px; }
.topology-svg .node-security rect { fill: var(--bs-danger-bg-subtle); }
.topology-svg .node-isp rect, .topology-svg .node-cloud rect { fill: var(--bs-info-bg-subtle); }
.topology-svg .node-switch rect { fill: var(--bs-success-bg-subtle); }
.topology-svg .node-server rect { fill: var(--bs-warning-bg-subtle); }
.legend-line { display: inline-block; width: 26px; vertical-align: middle; border-top: 2px solid #6c757d; }
.legend-dashed { border-top-style: dashed; }
.legend-vpn { border-top: 3px dotted var(--bs-primary); }

/* Form admin */
.editor-table th, .editor-table td { min-width: 150px; }
.editor-table .cell-actions { min-width: 0; width: 1%; white-space: nowrap; }
.block-item > summary { cursor: pointer; list-style: none; }
.block-item > summary::-webkit-details-marker { display: none; }
.block-item > summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: .75rem; color: var(--bs-secondary-color); transition: transform .15s; }
.block-item[open] > summary::before { transform: rotate(90deg); }
.block-item:not([open]) > summary { border-bottom: 0; }
.form-footer { position: sticky; bottom: 0; z-index: 2; background: var(--bs-tertiary-bg); }

/* Cetak */
@media print {
    .navbar, .sidebar-col, .no-print, footer, .alert-dismissible { display: none !important; }
    .main-col { width: 100% !important; }
    .accordion-collapse { display: block !important; }
}