@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    {{-- ========== TOPOLOGY STYLES ========== --}}
    <style>
        /* Override framework .main-content overflow:hidden to allow sticky header */
        .main-content {
            overflow: visible !important;
        }

        /* Data-driven rule: Sembunyikan container port indikator jika node memiliki class penanda */
        .node-has-children .port-indicator-container,
        .node-has-children .port-mini-map {
            display: none !important;
        }

        /* Stats Cards */
        .stat-card {
            border-radius: 0.9rem;
            padding: 0.58rem 0.95rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            min-height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
        }

        .stat-card .stat-icon {
            position: absolute;
            right: 0.7rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.6rem;
            opacity: 0.22;
        }

        .stat-card .stat-label {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.9px;
            opacity: 0.95;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 0.45rem;
        }

        .stat-card .stat-value {
            margin-left: auto;
            padding-right: 18px;
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: 0.2px;
            position: relative;
            z-index: 1;
        }

        .bg-stat-total {
            background: linear-gradient(135deg, #1ab394 0%, #23d5ab 100%);
        }

        .bg-stat-switch {
            background: linear-gradient(135deg, #00b7bd 0%, #3dd5db 100%);
        }

        .bg-stat-cpu {
            background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
        }

        .bg-stat-other {
            background: linear-gradient(135deg, #f5365c 0%, #f56036 100%);
        }

        .stats-cards-row {
            margin-top: -20px;
        }

        @media (max-width: 768px) {
            .stats-cards-row {
                margin-top: -16px;
            }

            .stat-card {
                min-height: 52px;
                padding: 0.56rem 0.85rem;
            }

            .stat-card .stat-label {
                font-size: 0.66rem;
                letter-spacing: 0.7px;
            }

            .stat-card .stat-value {
                font-size: 1.6rem;
                padding-right: 14px;
            }

            .stat-card .stat-icon {
                right: 0.55rem;
                font-size: 1.3rem;
            }
        }

        /* Compact topology header (reduce unused top area) */
        .topology-card {
            --topology-zoom-offset: 70px;
        }

        .topology-card .card-header {
            padding: 0.65rem 1rem 0.55rem;
            position: sticky;
            top: 0;
            z-index: 20;
            background: #fff;
            border-radius: 0.75rem 0.75rem 0 0;
            box-shadow: none;
            transition: box-shadow 0.25s ease;
        }

        .topology-card .card-header.is-stuck {
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
            border-radius: 0;
        }

        .topology-card .topology-heading-wrap,
        .topology-card .topology-controls-wrap {
            margin-bottom: 0 !important;
        }

        .topology-card .topology-subtitle {
            display: none;
        }

        .topology-card>hr.horizontal {
            display: none;
        }

        .topology-card .filter-result-bar {
            display: none !important;
        }

        /* Topology Canvas */
        .topo-viewport {
            overflow-x: auto;
            overflow-y: auto;
            max-width: 100%;
            min-height: 400px;
            position: relative;
            padding: 10px 12px 24px;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            touch-action: pan-x pan-y;
            scrollbar-gutter: stable;
            display: flex;
            flex-direction: column;
        }

        .topo-viewport::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

        .topo-viewport::-webkit-scrollbar-thumb {
            background: #b8c2d4;
            border-radius: 10px;
        }

        .topo-viewport::-webkit-scrollbar-track {
            background: #edf2f7;
            border-radius: 10px;
        }

        .topo-canvas {
            transform-origin: top left;
            transition: transform 0.3s ease;
            width: max-content;
            min-width: 100%;
            flex: 1;
            display: flex;
            justify-content: flex-start;
            padding: 0;
            --topo-line-color: #00b7bd;
            --topo-line-thickness: 4px;
            --topo-line-shadow: 0 0 5px rgba(0, 183, 189, 0.24);
        }

        /* CSS Tree Layout — Absolute Positioning Engine */
        .topo-tree {
            padding: 20px 10px;
            position: relative;
        }

        .layer-guides {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        .layer-band {
            position: absolute;
            left: 0;
            width: 100%;
            /* Memaksa full-width */
            border-top: 1px dashed rgba(52, 71, 103, 0.08);
            border-bottom: 1px dashed rgba(52, 71, 103, 0.05);
            background: linear-gradient(180deg, rgba(94, 114, 228, 0.03), rgba(0, 183, 189, 0.02));
        }

        .layer-band .layer-title {
            position: absolute;
            left: 8px;
            top: 6px;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.3px;
            color: #64748b;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(100, 116, 139, 0.2);
            border-radius: 999px;
            padding: 2px 8px;
        }

        .topo-abs-node {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .topo-abs-node.search-hidden {
            display: none !important;
        }

        .topo-connectors-svg {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
            overflow: visible;
        }

        .topo-connectors-svg path {
            fill: none;
            stroke: var(--topo-line-color);
            stroke-width: var(--topo-line-thickness);
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: opacity 0.2s ease;
        }

        /* Ensure consistent sizing for all topology elements */
        .topo-tree,
        .topo-tree * {
            box-sizing: border-box;
        }

        /* Search focus: dim default connectors, highlight active path */
        .topo-tree.search-focus-lines .topo-connectors-svg {
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .search-path-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .search-path-seg {
            position: absolute;
            background: var(--topo-line-color);
            box-shadow: var(--topo-line-shadow);
            border-radius: 2px;
            opacity: 0.95;
        }

        /* Node Styling */
        .topo-node-wrap {
            position: relative;
            z-index: 2;
        }

        .topo-node {
            background: #fff;
            border: 2px solid #e0e6ed;
            border-radius: 14px;
            padding: 16px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 200px;
            height: 160px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .topo-node:hover {
            border-color: #00b7bd;
            box-shadow: 0 6px 24px rgba(0, 183, 189, 0.2);
            transform: translateY(-3px);
        }

        .topo-node.root-node {
            border-color: #00b7bd;
            border-width: 3px;
            min-width: 190px;
            padding: 20px 28px;
            background: linear-gradient(145deg, #f8fffe 0%, #e4f9f8 100%);
        }

        .topo-node .node-icon {
            color: #00b7bd;
            margin-bottom: 6px;
        }

        .topo-node .node-name {
            font-weight: 700;
            font-size: 0.82rem;
            color: #344767;
            word-break: break-word;
            line-height: 1.2;
        }

        .topo-node .node-type {
            font-size: 0.7rem;
            color: #8392ab;
            margin-top: 2px;
        }

        .topo-node .node-ip {
            font-size: 0.7rem;
            color: #67748e;
            margin-top: 5px;
        }

        .topo-node .node-ip i {
            color: #00b7bd;
        }

        .topo-node .node-area {
            font-size: 0.65rem;
            color: #8392ab;
            margin-top: 3px;
        }

        .topo-node .node-area i {
            color: #fb6340;
            font-size: 0.55rem;
        }

        /* Gateway Node (from another gedung) */
        .topo-node.gateway-node {
            border: 2px dashed #5e72e4;
            background: linear-gradient(135deg, #f6f8ff 0%, #eef0ff 100%);
            overflow: visible;
            min-height: 172px;
            height: auto;
            padding-top: 24px;
        }

        /* Non-placeholder broken device card */
        .topo-node.rusak-node {
            border: 2px dashed #f5365c !important;
            background: linear-gradient(135deg, #fff5f7 0%, #ffecef 100%) !important;
        }

        .topo-node.rusak-node:hover {
            border-color: #f5365c !important;
            box-shadow: 0 6px 20px rgba(245, 54, 92, 0.22) !important;
        }

        .topo-node.rusak-node .node-icon {
            color: #f5365c !important;
        }

        .topo-node.rusak-node .node-name {
            color: #b31942;
        }

        .topo-node.rusak-node .node-type {
            color: #f5365c;
            font-weight: 700;
        }

        /* Orphaned Node (perangkat nonaktif/hilang dari Master Aset) */
        .topo-node.orphaned-node {
            border: 2px dashed #e67e22 !important;
            background: linear-gradient(135deg, #fef9e7 0%, #fdebd0 100%) !important;
            animation: orphan-shimmer 2.5s ease-in-out infinite;
        }

        .topo-node.orphaned-node:hover {
            border-color: #d35400 !important;
            box-shadow: 0 6px 20px rgba(230, 126, 34, 0.30) !important;
        }

        .topo-node.orphaned-node .node-icon {
            color: #e67e22 !important;
        }

        .topo-node.orphaned-node .node-name {
            color: #a04000;
        }

        .topo-node.orphaned-node .node-type {
            color: #e67e22;
            font-weight: 700;
        }

        .orphaned-warning-badge {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e67e22, #f39c12);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            z-index: 5;
            box-shadow: 0 2px 6px rgba(230, 126, 34, 0.4);
        }

        @keyframes orphan-shimmer {

            0%,
            100% {
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            }

            50% {
                box-shadow: 0 0 14px 4px rgba(230, 126, 34, 0.22);
            }
        }

        .topo-port-badge.port-rusak {
            background: linear-gradient(135deg, #f5365c, #fb6340);
            color: #fff;
        }

        .topo-node.gateway-node.root-node {
            border: 2px dashed #5e72e4;
            background: linear-gradient(135deg, #f6f8ff 0%, #eef0ff 100%);
        }

        .topo-node.gateway-node .node-icon {
            color: #5e72e4;
        }

        .gateway-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #5e72e4, #825ee4);
            color: white;
            font-size: 0.6rem;
            font-weight: 700;
            line-height: 1.25;
            padding: 3px 10px;
            border-radius: 10px;
            white-space: nowrap;
            z-index: 5;
            letter-spacing: 0.3px;
        }

        .topo-link-badge.gateway-link {
            background: #eef0ff;
            color: #5e72e4;
            border-color: #5e72e4;
        }

        .topo-link-badge.gateway-link:hover {
            background: #5e72e4;
            color: white;
        }

        /* Search highlight */
        .topo-node.search-match {
            box-shadow: 0 0 0 3px #fb6340, 0 4px 20px rgba(251, 99, 64, 0.35) !important;
            border-color: #fb6340 !important;
        }

        .topo-node.category-dimmed {
            opacity: 0.15;
        }

        .rack-wrapper.category-dimmed {
            opacity: 0.18;
        }

        .topo-node.search-path {
            border-color: #8fd3d7 !important;
            box-shadow: 0 0 0 2px rgba(0, 183, 189, 0.18), 0 2px 12px rgba(0, 183, 189, 0.10) !important;
        }

        .topo-node.search-path.is-path-only {
            opacity: 0.4;
            filter: grayscale(100%);
            border-color: #d5dde8 !important;
            background: linear-gradient(135deg, #f9fbfd 0%, #f3f7fb 100%);
        }

        .topo-node.search-path.search-path-muted {
            opacity: 0.38;
            border-color: #d5dde8 !important;
            box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18), 0 1px 6px rgba(148, 163, 184, 0.10) !important;
            background: linear-gradient(135deg, #f9fbfd 0%, #f3f7fb 100%);
            filter: saturate(0.76);
        }

        .topo-node.search-path.search-path-muted:hover {
            opacity: 0.44;
            border-color: #d5dde8 !important;
            box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.18), 0 1px 6px rgba(148, 163, 184, 0.10) !important;
            transform: none;
        }

        .topo-node.search-path.search-path-muted .node-icon,
        .topo-node.search-path.search-path-muted .node-name,
        .topo-node.search-path.search-path-muted .node-type,
        .topo-node.search-path.search-path-muted .node-ip,
        .topo-node.search-path.search-path-muted .node-area,
        .topo-node.search-path.search-path-muted .node-ip i,
        .topo-node.search-path.search-path-muted .node-area i {
            color: #8a97aa !important;
        }

        .topo-node.search-path.search-path-muted .topo-link-badge {
            background: #f4f7fb;
            border-color: #cfd8e3;
            color: #8a97aa;
        }

        .topo-node.search-match .node-area {
            color: #fb6340;
            font-weight: 700;
        }

        .topo-node-wrap.search-dimmed {
            opacity: 0.12 !important;
        }

        /* Placeholder / Empty Port Node */
        .topo-node.placeholder-node {
            border: 2px dashed #dee2e6;
            background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
            cursor: pointer;
            max-width: 160px;
            padding: 10px 8px;
            opacity: 0.75;
            transition: all 0.25s ease;
        }

        .topo-node.placeholder-node:hover {
            border-color: #00b7bd;
            background: linear-gradient(135deg, #f0fafa 0%, #e8f8f8 100%);
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 183, 189, 0.15);
        }

        .topo-node.placeholder-node .node-icon {
            color: #ced4da;
            font-size: 1.5rem;
        }

        .topo-node.placeholder-node:hover .node-icon {
            color: #00b7bd;
        }

        .topo-node.placeholder-node .node-name {
            font-size: 0.7rem;
            color: #adb5bd;
            font-weight: 600;
        }

        .topo-node.placeholder-node:hover .node-name {
            color: #00b7bd;
        }

        .topo-node.placeholder-node .placeholder-hint {
            font-size: 0.6rem;
            color: #ced4da;
            margin-top: 4px;
        }

        .topo-node.placeholder-node:hover .placeholder-hint {
            color: #00b7bd;
        }

        .topo-node.placeholder-node .node-actions {
            display: none;
        }

        /* Placeholder: RUSAK (Broken Port) */
        .topo-node.placeholder-rusak {
            border: 2px dashed #f5365c !important;
            background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%) !important;
            cursor: default;
            opacity: 0.85;
        }

        .topo-node.placeholder-rusak:hover {
            border-color: #f5365c !important;
            background: linear-gradient(135deg, #fff0f0 0%, #ffe0e0 100%) !important;
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(245, 54, 92, 0.15);
        }

        .topo-node.placeholder-rusak .node-icon {
            color: #f5365c;
        }

        .topo-node.placeholder-rusak:hover .node-icon {
            color: #d32651;
        }

        .topo-node.placeholder-rusak .node-name {
            color: #f5365c;
            font-weight: 700;
        }

        .topo-node.placeholder-rusak .placeholder-hint {
            color: #f5365c;
            opacity: 0.8;
        }

        .topo-node.placeholder-rusak .port-status-actions {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            justify-content: center;
        }

        /* Placeholder: UPLINK (Input Port) */
        .topo-node.placeholder-uplink {
            border: 2px dashed #2dce89 !important;
            background: linear-gradient(135deg, #e8faf0 0%, #d4f5e3 100%) !important;
            cursor: default;
            opacity: 0.92;
        }

        .topo-node.placeholder-uplink:hover {
            border-color: #2dce89 !important;
            background: linear-gradient(135deg, #e0f8eb 0%, #c4f2d7 100%) !important;
            opacity: 1;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(45, 206, 137, 0.15);
        }

        .topo-node.placeholder-uplink .node-icon {
            color: #2dce89;
        }

        .topo-node.placeholder-uplink:hover .node-icon {
            color: #1ab37a;
        }

        .topo-node.placeholder-uplink .node-name {
            color: #2dce89;
            font-weight: 700;
        }

        .topo-node.placeholder-uplink .placeholder-hint {
            color: #2dce89;
            opacity: 0.8;
        }

        .node-uplink-indicator {
            font-size: 0.65rem;
            color: #2dce89;
            font-weight: 700;
            background: rgba(45, 206, 137, 0.08);
            border: 1.5px solid rgba(45, 206, 137, 0.22);
            border-radius: 6px;
            padding: 2px 7px;
            margin-top: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Port Status Actions (on placeholder nodes) */
        .port-status-actions {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            justify-content: center;
        }

        .port-status-actions .btn {
            font-size: 0.55rem;
            padding: 1px 6px;
            border-radius: 4px;
            line-height: 1.4;
            opacity: 0.5;
            transition: opacity 0.2s;
        }

        .topo-node:hover .port-status-actions .btn {
            opacity: 1;
        }

        /* Port Status Legend (below topology canvas) */
        .port-status-legend {
            display: flex;
            gap: 16px;
            padding: 8px 16px;
            border-top: 1px solid #f0f2f5;
            background: #fafbfc;
            font-size: 0.72rem;
            color: #8392ab;
            align-items: center;
        }

        .port-status-legend .legend-title {
            font-weight: 700;
            color: #344767;
            margin-right: 4px;
        }

        .port-status-legend .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .port-status-legend .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 4px;
            border: 2px solid;
            flex-shrink: 0;
        }

        .legend-dot.dot-tersedia {
            border-color: #dee2e6;
            background: #f8f9fa;
            border-style: dashed;
        }

        .legend-dot.dot-terpakai {
            border-color: #2dce89;
            background: #e8faf0;
        }

        .legend-dot.dot-rusak {
            border-color: #f5365c;
            background: #fff5f5;
            border-style: dashed;
        }

        /* Gedung Filter */
        .gedung-filter-wrap {
            position: relative;
        }

        .gedung-filter-wrap select {
            font-size: 0.78rem;
            padding: 6px 30px 6px 32px;
            border-radius: 20px;
            border: 2px solid #dee2e6;
            background: #f8f9fa;
            transition: all 0.25s;
            height: 34px;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            min-width: 150px;
            color: #344767;
        }

        .gedung-filter-wrap select:focus {
            border-color: #5e72e4;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.15);
            outline: none;
        }

        .gedung-filter-wrap .filter-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #8392ab;
            font-size: 0.75rem;
            pointer-events: none;
        }

        .gedung-filter-wrap select:focus~.filter-icon {
            color: #5e72e4;
        }

        .gedung-filter-wrap .filter-arrow {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #8392ab;
            font-size: 0.6rem;
            pointer-events: none;
        }

        .gedung-filter-wrap select.has-value {
            border-color: #5e72e4;
            background: #eef0ff;
            font-weight: 600;
        }

        .filter-separator {
            color: #ccc;
            font-size: 0.8rem;
        }

        /* Search box */
        .area-search-wrap {
            position: relative;
            min-width: 200px;
        }

        .area-search-wrap input {
            font-size: 0.78rem;
            padding: 6px 32px 6px 34px;
            border-radius: 20px;
            border: 2px solid #dee2e6;
            background: #f8f9fa;
            transition: all 0.25s;
            height: 34px;
        }

        .area-search-wrap input:focus {
            border-color: #fb6340;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(251, 99, 64, 0.15);
            outline: none;
        }

        .area-search-wrap .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #8392ab;
            font-size: 0.75rem;
            pointer-events: none;
        }

        .area-search-wrap input:focus~.search-icon {
            color: #fb6340;
        }

        .area-search-wrap .search-clear {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #8392ab;
            cursor: pointer;
            font-size: 0.7rem;
            padding: 2px 4px;
            display: none;
        }

        .area-search-wrap .search-clear:hover {
            color: #fb6340;
        }

        .area-search-results {
            position: absolute;
            top: calc(100% + 6px);
            left: -40px;
            right: -40px;
            min-width: 360px;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 16px;
            max-height: 380px;
            overflow-y: auto;
            overflow-x: hidden;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
            z-index: 100;
            display: none;
            padding: 6px 0;
            animation: searchDropIn 0.2s ease;
        }

        @keyframes searchDropIn {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .area-search-results.show {
            display: block;
        }

        .area-search-results::-webkit-scrollbar {
            width: 5px;
        }

        .area-search-results::-webkit-scrollbar-track {
            background: transparent;
        }

        .area-search-results::-webkit-scrollbar-thumb {
            background: #dee2e6;
            border-radius: 10px;
        }

        .area-search-results::-webkit-scrollbar-thumb:hover {
            background: #adb5bd;
        }

        /* Section headers */
        .search-section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px 6px;
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #8392ab;
            user-select: none;
        }

        .search-section-header .section-icon {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            color: white;
            flex-shrink: 0;
        }

        .search-section-header .section-icon.icon-device {
            background: linear-gradient(135deg, #5e72e4, #825ee4);
        }

        .search-section-header .section-icon.icon-area {
            background: linear-gradient(135deg, #fb6340, #fbb140);
        }

        .search-section-header .section-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, #e9ecef, transparent);
        }

        .search-section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 5%, #e9ecef 50%, transparent 95%);
            margin: 4px 16px;
        }

        /* Search items */
        .area-search-item {
            padding: 10px 16px;
            cursor: pointer;
            font-size: 0.78rem;
            transition: all 0.18s ease;
            border-left: 3px solid transparent;
            margin: 1px 6px;
            border-radius: 10px;
            position: relative;
        }

        .area-search-item:hover {
            background: linear-gradient(135deg, #f0f4ff 0%, #f8f0ff 100%);
            border-left-color: #5e72e4;
        }

        .area-search-item.active {
            background: linear-gradient(135deg, #fff5f0 0%, #fef0e8 100%);
            border-left-color: #fb6340;
        }

        .area-search-item.area-type:hover {
            background: linear-gradient(135deg, #fff8f0 0%, #fff5eb 100%);
            border-left-color: #fb6340;
        }

        .area-search-item .area-name {
            font-weight: 700;
            color: #344767;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .area-search-item .area-count {
            font-size: 0.65rem;
            color: #8392ab;
            font-weight: 600;
            background: #f0f2f5;
            padding: 2px 8px;
            border-radius: 10px;
            white-space: nowrap;
        }

        .area-search-item .area-match {
            color: #fb6340;
            font-weight: 800;
            background: rgba(251, 99, 64, 0.08);
            padding: 0 2px;
            border-radius: 3px;
        }

        .area-search-item .item-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
            font-size: 0.65rem;
            color: #8392ab;
        }

        .area-search-item .item-meta i {
            font-size: 0.55rem;
            width: 12px;
            text-align: center;
        }

        .area-search-item .gedung-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 5px;
        }

        .area-search-item .gedung-tag {
            font-size: 0.58rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            background: linear-gradient(135deg, #f0f4ff, #eef0ff);
            color: #5e72e4;
            border: 1px solid rgba(94, 114, 228, 0.15);
            letter-spacing: 0.3px;
        }

        .search-no-result {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            color: #adb5bd;
        }

        .search-no-result i {
            font-size: 1.5rem;
            margin-bottom: 8px;
            opacity: 0.5;
        }

        .search-no-result span {
            font-size: 0.78rem;
            font-weight: 600;
        }

        .search-result-count {
            font-size: 0.65rem;
            color: white;
            font-weight: 700;
            margin-left: 4px;
            white-space: nowrap;
            background: linear-gradient(135deg, #fb6340, #fbb140);
            padding: 2px 10px;
            border-radius: 10px;
            letter-spacing: 0.3px;
        }

        /* Filter Result Info Bar */
        .filter-result-bar {
            display: none;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fef5f0 100%);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.8rem;
            animation: filterBarSlide 0.25s ease;
            position: relative;
            overflow: hidden;
        }

        .filter-result-bar::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, #5e72e4, #fb6340);
        }

        @keyframes filterBarSlide {
            from {
                opacity: 0;
                transform: translateY(-100%);
                max-height: 0;
            }

            to {
                opacity: 1;
                transform: translateY(0);
                max-height: 60px;
            }
        }

        .filter-result-bar.show {
            display: flex;
        }

        .filter-result-bar .filter-bar-icon {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: white;
            flex-shrink: 0;
        }

        .filter-bar-icon.icon-area {
            background: linear-gradient(135deg, #fb6340, #fbb140);
        }

        .filter-bar-icon.icon-gedung {
            background: linear-gradient(135deg, #5e72e4, #825ee4);
        }

        .filter-bar-icon.icon-device {
            background: linear-gradient(135deg, #00b7bd, #1ab394);
        }

        .filter-result-bar .filter-bar-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .filter-result-bar .filter-bar-title {
            font-weight: 800;
            font-size: 0.78rem;
            color: #344767;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .filter-result-bar .filter-bar-sub {
            font-size: 0.68rem;
            color: #8392ab;
            font-weight: 500;
        }

        .filter-result-bar .filter-bar-count {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 14px;
            border-radius: 20px;
            background: white;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            font-weight: 800;
            font-size: 0.82rem;
            color: #344767;
            white-space: nowrap;
        }

        .filter-result-bar .filter-bar-count .count-num {
            font-size: 1rem;
            background: linear-gradient(135deg, #5e72e4, #fb6340);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .filter-result-bar .filter-bar-clear {
            border: none;
            background: rgba(245, 54, 92, 0.08);
            color: #f5365c;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.7rem;
            flex-shrink: 0;
        }

        .filter-result-bar .filter-bar-clear:hover {
            background: #f5365c;
            color: white;
            transform: scale(1.1);
        }

        .filter-bar-tags {
            display: flex;
            gap: 4px;
        }

        .filter-bar-tag {
            font-size: 0.6rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            letter-spacing: 0.3px;
        }

        .filter-bar-tag.tag-area {
            background: linear-gradient(135deg, #fff5f0, #fef0e8);
            color: #fb6340;
            border: 1px solid rgba(251, 99, 64, 0.2);
        }

        .filter-bar-tag.tag-gedung {
            background: linear-gradient(135deg, #f0f4ff, #eef0ff);
            color: #5e72e4;
            border: 1px solid rgba(94, 114, 228, 0.2);
        }

        /* Port Badge */
        .topo-port-badge {
            background: linear-gradient(135deg, #00b7bd, #009da3);
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 10px;
            display: inline-block;
            margin-bottom: -4px;
            position: relative;
            z-index: 3;
        }

        /* Link Gedung Badge */
        .topo-link-badge {
            display: inline-block;
            margin-top: 8px;
            padding: 3px 12px;
            border-radius: 15px;
            font-size: 0.65rem;
            font-weight: 700;
            background: #e8f9f9;
            color: #00b7bd;
            text-decoration: none;
            border: 1.5px solid #00b7bd;
            transition: all 0.2s;
            letter-spacing: 0.3px;
        }

        .topo-link-badge:hover {
            background: #00b7bd;
            color: white;
            text-decoration: none;
        }

        /* Node context menu */
        .node-actions {
            display: none;
            position: absolute;
            top: -10px;
            right: -10px;
            z-index: 10;
        }

        .topo-node:hover .node-actions {
            display: flex;
            gap: 3px;
        }

        .node-actions .btn {
            padding: 2px 6px;
            font-size: 0.65rem;
            border-radius: 6px;
        }

        /* Zoom Controls */
        .zoom-controls {
            position: sticky;
            top: var(--topology-zoom-offset, 70px);
            left: 0;
            z-index: 19;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        .zoom-controls-inner {
            position: absolute;
            top: 0;
            left: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(52, 71, 103, 0.88);
            border-radius: 12px;
            padding: 6px;
            gap: 2px;
            backdrop-filter: blur(8px);
            transition: opacity 0.2s ease;
            pointer-events: auto;
        }

        .zoom-controls-inner button {
            width: 30px;
            height: 30px;
            border: none;
            background: transparent;
            color: white;
            cursor: pointer;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            transition: background 0.2s;
        }

        .zoom-controls-inner button:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .zoom-controls-inner .zoom-level {
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 3px 0;
        }

        /* Filter Buttons */
        .filter-btn {
            border-radius: 20px !important;
            font-size: 0.72rem !important;
            font-weight: 700 !important;
            padding: 5px 14px !important;
            letter-spacing: 0.3px;
            border-width: 2px !important;
            white-space: nowrap;
        }

        .filter-btn.active-filter,
        .filter-btn.filter-dropdown-toggle {
            opacity: 1;
        }

        .filter-btn:not(.active-filter):not(.filter-dropdown-toggle) {
            opacity: 0.45;
        }

        #topologyFilterButtons {
            max-width: 100%;
            min-width: 0;
            overflow: visible;
        }

        .topology-category-menu {
            min-width: 250px;
            max-height: 240px;
            overflow-y: auto;
            overscroll-behavior: contain;
            border-radius: 12px;
            border: 1px solid #e9ecef;
            padding: 8px;
            z-index: 1065;
            box-shadow: 0 10px 26px rgba(30, 41, 59, 0.14);
        }

        .topology-category-menu::-webkit-scrollbar {
            width: 6px;
        }

        .topology-category-menu::-webkit-scrollbar-thumb {
            background: #c8d0dc;
            border-radius: 999px;
        }

        .topology-category-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        .topology-controls-wrap .dropdown {
            position: relative;
            z-index: 25;
        }

        .topology-category-search-wrap {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #fff;
            padding: 2px 2px 8px;
        }

        .topology-category-search-wrap .category-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 0.7rem;
            pointer-events: none;
        }

        .topology-category-search-wrap input {
            width: 100%;
            border: 1px solid #d9e1ec;
            border-radius: 999px;
            background: #f8fafc;
            color: #334155;
            font-size: 0.72rem;
            font-weight: 600;
            padding: 6px 10px 6px 30px;
            outline: none;
            transition: all 0.18s ease;
        }

        .topology-category-search-wrap input:focus {
            border-color: #00b7bd;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(0, 183, 189, 0.12);
        }

        .topology-category-grid {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .topology-category-header {
            font-size: 0.64rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.55px;
            color: #6b7a90;
            padding: 2px 8px 6px;
        }

        .topology-category-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.72rem;
            font-weight: 700;
            color: #344767;
            border-radius: 9px;
            padding: 6px 9px;
        }

        .topology-category-item .item-main {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
        }

        .topology-category-item .item-main i {
            width: 14px;
            text-align: center;
            color: #00a8ae;
            flex-shrink: 0;
        }

        .topology-category-item .filter-check {
            color: #00b7bd;
            visibility: hidden;
            font-size: 0.68rem;
        }

        .topology-category-item.active {
            background: #eefafa;
            color: #009da3;
        }

        .topology-category-item.active .filter-check {
            visibility: visible;
        }

        .topology-category-item:hover {
            background: #f4f6fb;
            color: #344767;
        }

        .topology-category-item.active:hover {
            background: #e3f7f8;
            color: #008c92;
        }

        .topology-category-item.category-hidden {
            display: none;
        }

        .topology-category-empty {
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 12px 8px;
            margin-top: 4px;
            border: 1px dashed #dbe3ef;
            border-radius: 9px;
            color: #94a3b8;
            font-size: 0.7rem;
            font-weight: 700;
            background: #f8fafc;
        }

        /* Empty State */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            width: 100%;
            min-height: 300px;
            color: #8392ab;
        }

        .empty-state i {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            opacity: 0.4;
        }

        /* Rack Server Utama (Topology Wrapper) */
        .rack-wrapper {
            position: relative;
            background: linear-gradient(180deg, #2d3436 0%, #3d4447 100%);
            border-radius: 18px;
            padding: 44px 18px 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            border: 2px solid #555;
            min-width: 240px;
        }

        .rack-wrapper::before {
            content: '';
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
            pointer-events: none;
        }

        .rack-wrapper-label {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #1ab394, #23d5ab);
            color: white;
            padding: 4px 16px;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 700;
            white-space: nowrap;
            letter-spacing: 0.3px;
            z-index: 5;
            box-shadow: 0 2px 8px rgba(26, 179, 148, 0.4);
        }

        .rack-wrapper-label i {
            font-size: 0.6rem;
        }

        .rack-wrapper-footer {
            text-align: center;
            color: rgba(255, 255, 255, 0.45);
            font-size: 0.6rem;
            font-weight: 600;
            margin-top: 8px;
            letter-spacing: 0.3px;
        }

        .rack-wrapper-footer i {
            font-size: 0.5rem;
        }

        .rack-wrapper .topo-node {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(255, 255, 255, 0.25);
        }

        .rack-wrapper .topo-node:hover {
            border-color: #1ab394;
            box-shadow: 0 4px 16px rgba(26, 179, 148, 0.3);
        }

        .rack-wrapper .topo-node.root-node {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(228, 249, 248, 0.95) 100%);
            border-color: #1ab394;
        }

        /* Rack LED dots */
        .rack-leds {
            position: absolute;
            top: 12px;
            right: 14px;
            display: flex;
            gap: 4px;
        }

        .rack-led {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            animation: rack-blink 3s infinite;
        }

        .rack-led.led-green {
            background: #00b894;
            box-shadow: 0 0 6px rgba(0, 184, 148, 0.6);
        }

        .rack-led.led-amber {
            background: #fdcb6e;
            box-shadow: 0 0 6px rgba(253, 203, 110, 0.6);
            animation-delay: 1s;
        }

        @keyframes rack-blink {

            0%,
            90%,
            100% {
                opacity: 1;
            }

            95% {
                opacity: 0.3;
            }
        }

        /* (Companion nodes are now positioned by TreeLayout engine as normal tree siblings) */

        /* Responsive */
        @media (max-width: 768px) {
            .topo-viewport {
                padding: 10px;
            }

            .topo-canvas {
                justify-content: flex-start;
                padding: 0 8px;
            }

            .topo-node {
                width: 150px;
                height: 132px;
                min-width: 110px;
                padding: 10px 12px;
            }

            .topo-node.gateway-node {
                min-height: 146px;
                height: auto;
                padding-top: 20px;
            }

            .gateway-badge {
                top: -10px;
                font-size: 0.56rem;
            }

            .layer-band .layer-title {
                left: 4px;
                top: 4px;
                font-size: 0.56rem;
                padding: 1px 6px;
            }

            .topo-abs-node .topo-node {
                width: 150px;
                min-width: 110px;
            }

            .rack-wrapper {
                padding: 40px 12px 12px;
                min-width: 180px;
            }
        }

        /* Print Button */
        .btn-print-topo {
            border-radius: 20px !important;
            font-size: 0.72rem !important;
            font-weight: 700 !important;
            padding: 5px 14px !important;
            letter-spacing: 0.3px;
        }

        /* Print Modal */
        .print-filter-card {
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 14px;
            cursor: pointer;
            transition: all .2s;
        }

        .print-filter-card:hover,
        .print-filter-card.active {
            border-color: #00b7bd;
            background: #f0fafa;
        }

        .print-filter-card.active {
            box-shadow: 0 0 0 3px rgba(0, 183, 189, 0.15);
        }

        .print-filter-card .filter-radio {
            width: 18px;
            height: 18px;
            border: 2px solid #dee2e6;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
        }

        .print-filter-card.active .filter-radio {
            border-color: #00b7bd;
            background: #00b7bd;
        }

        .print-filter-card.active .filter-radio::after {
            content: '';
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
        }

        .print-preview-info {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: .8rem;
        }

        .swal2-delete-popup {
            border-radius: 14px !important;
        }

        .swal2-delete-html {
            text-align: left !important;
        }

        .swal-delete-main {
            border: 1px solid #ffd7de;
            border-radius: 10px;
            background: #fff8fa;
            padding: 10px 12px;
            margin-bottom: 10px;
        }

        .swal-delete-main .label {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            color: #8a93a5;
            font-weight: 700;
            letter-spacing: .03em;
            margin-bottom: 2px;
        }

        .swal-delete-list {
            max-height: 220px;
            overflow: auto;
            border: 1px solid #f1f2f6;
            border-radius: 10px;
            background: #fbfcff;
            padding: 8px;
            margin-bottom: 10px;
        }

        .swal-delete-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 6px 8px;
            border-radius: 8px;
        }

        .swal-delete-item:nth-child(odd) {
            background: #f7f9fc;
        }

        .swal-delete-name {
            color: #344767;
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1.2;
        }

        .swal-delete-meta {
            color: #67748e;
            font-size: 0.68rem;
            white-space: nowrap;
        }

        .swal-delete-empty {
            font-size: 0.75rem;
            color: #8392ab;
            margin-bottom: 8px;
        }

        .swal2-delete-popup .swal2-radio {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            align-items: stretch;
            margin: 0.35rem 1.6em 0.3rem !important;
            width: auto;
        }

        .swal2-delete-popup .swal2-radio label {
            margin: 0 !important;
            font-size: 0.84rem !important;
            line-height: 1.35;
            color: #344767;
            font-weight: 600;
            width: 100%;
            border: 1px solid #e3e8ef;
            border-radius: 10px;
            background: #ffffff;
            padding: 9px 10px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            cursor: pointer;
            transition: all 0.16s ease;
            box-sizing: border-box;
        }

        .swal2-delete-popup .swal2-radio label:hover {
            border-color: #cbd5e1;
            background: #fafcff;
        }

        .swal2-delete-popup .swal2-radio label.selected {
            border-color: #5e72e4;
            background: #f6f8ff;
            box-shadow: 0 0 0 1px rgba(94, 114, 228, 0.08);
        }

        .swal2-delete-popup .swal2-radio input {
            margin: 2px 0 0 !important;
        }

        .swal-delete-choice-title {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #8a93a5;
            font-weight: 700;
            margin: 2px 1.6em 6px 2.12em;
        }

        .swal-delete-note {
            font-size: 0.73rem;
            color: #606a85;
            line-height: 1.45;
            margin-top: 4px;
            margin-bottom: 2px;
            margin-left: 2.5em;
            margin-right: 2.5em;
            border: 1px solid #e8edf4;
            border-left: 3px solid #5e72e4;
            border-radius: 8px;
            background: #f9fbff;
            padding: 7px 9px;
        }

        .swal-delete-confirm {
            border: 1px dashed #f1c4c9;
            border-radius: 10px;
            background: #fff4f6;
            padding: 10px 12px;
            margin-bottom: 10px;
            margin-left: 1.9em;
            margin-right: 1.9em;
        }

        .swal-delete-confirm .confirm-label {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            color: #8a93a5;
            font-weight: 700;
            letter-spacing: .03em;
            margin-bottom: 4px;
        }

        .swal-delete-confirm .confirm-code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            font-size: 0.85rem;
            color: #b31942;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .swal-delete-confirm-input {
            width: 100%;
            border: 1px solid #e3e8ef;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 0.82rem;
            color: #344767;
            background: #ffffff;
        }

        .swal-delete-confirm-input:focus {
            outline: none;
            border-color: #e53358;
            box-shadow: 0 0 0 2px rgba(229, 51, 88, 0.12);
        }

        .swal-delete-confirm-hint {
            font-size: 0.7rem;
            color: #8a93a5;
            margin-top: 6px;
        }

        .swal-delete-note strong {
            color: #445071;
        }

        @media (max-width: 640px) {
            .swal2-delete-popup .swal2-radio {
                grid-template-columns: 1fr;
            }
        }

        /* Print Styles */
        .topo-abs-node[draggable="true"] {
            cursor: grab;
        }

        .topo-abs-node[draggable="true"]:active {
            cursor: grabbing;
        }

        .topo-dragging {
            opacity: 0.4;
        }

        .topo-drop-target {
            outline: 3px dashed #11cdef;
            outline-offset: 4px;
        }

        @media print {

            /* Hide everything except printable area */
            body * {
                visibility: hidden !important;
            }

            #printable-area,
            #printable-area * {
                visibility: visible !important;
            }

            #printable-area {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 100% !important;
                z-index: 99999;
                font-family: 'Segoe UI', Arial, sans-serif;
            }

            /* Hide non-printable elements */
            .g-sidenav-container,
            .sidenav,
            .navbar,
            .zoom-controls,
            .node-actions,
            .stat-card,
            .card-header,
            .filter-btn,
            .gedung-filter-wrap,
            .area-search-wrap,
            .search-result-count,
            .btn-print-topo,
            .btn,
            .modal,
            .modal-backdrop,
            footer {
                display: none !important;
            }

            .topology-card .card-header {
                position: static !important;
                box-shadow: none !important;
            }

            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            /* Hide screen placeholders but allow print placeholders */
            .topo-viewport:not(#printable-area .topo-viewport) .placeholder-node {
                display: none !important;
            }

            /* Print Header */
            .print-header {
                visibility: visible !important;
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                padding: 14px 20px;
                border: 2px solid #344767;
                border-radius: 8px;
                margin-bottom: 16px;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background: #f8fafc !important;
            }

            .print-header-left {
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .print-header-logo {
                width: 42px;
                height: 42px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                color: white;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background: #344767 !important;
            }

            .print-header-title {
                font-size: 13pt;
                font-weight: 800;
                color: #344767;
                margin: 0;
                line-height: 1.2;
            }

            .print-header-subtitle {
                font-size: 8.5pt;
                color: #67748e;
                margin: 0;
            }

            .print-header-right {
                text-align: right;
                font-size: 7.5pt;
                color: #8392ab;
                line-height: 1.6;
            }

            .print-header-right strong {
                color: #344767;
            }

            /* Print Footer */
            .print-footer {
                visibility: visible !important;
                display: flex !important;
                justify-content: space-between;
                align-items: center;
                padding: 8px 20px;
                border-top: 1.5px solid #dee2e6;
                margin-top: 20px;
                font-size: 7pt;
                color: #8392ab;
            }

            /* Topology canvas print adjustments */
            .topo-viewport {
                overflow: visible !important;
                height: auto !important;
                max-height: none !important;
                padding: 5px 20px 10px !important;
            }

            .topo-canvas {
                zoom: 100% !important;
                transform: none !important;
                transform-origin: top left !important;
            }

            /* SVG connectors for print */
            .topo-tree,
            .topo-connectors-svg {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .topo-connectors-svg path {
                stroke: #00b7bd !important;
                stroke-width: 2px !important;
            }

            /* Node styles for print */
            .topo-node {
                border: 1.5px solid #c8cfd8 !important;
                box-shadow: none !important;
                page-break-inside: avoid;
                padding: 10px 14px !important;
                min-width: 120px !important;
                max-width: 200px !important;
                border-radius: 10px !important;
            }

            .topo-node.root-node {
                border: 2.5px solid #00b7bd !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background: linear-gradient(145deg, #f8fffe 0%, #e4f9f8 100%) !important;
            }

            .topo-node .node-icon {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                margin-bottom: 4px !important;
            }

            .topo-node .node-icon i {
                font-size: 1.4rem !important;
            }

            .topo-node .node-name {
                font-size: 0.72rem !important;
            }

            .topo-node .node-type {
                font-size: 0.62rem !important;
            }

            .topo-node .node-area {
                font-size: 0.58rem !important;
            }

            .topo-node .node-ip {
                font-size: 0.6rem !important;
            }

            .topo-node.gateway-node {
                border: 1.5px dashed #5e72e4 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background: #f6f8ff !important;
            }

            /* Port badge */
            .topo-port-badge {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                background: #00b7bd !important;
                font-size: 0.55rem !important;
                padding: 2px 7px !important;
            }

            /* Placeholder ports rendered as compact inline badges in print */
            .print-port-summary {
                display: flex !important;
                flex-wrap: wrap;
                gap: 4px;
                justify-content: center;
                margin-top: 4px;
                padding: 4px 6px;
                background: #f8f9fa !important;
                border: 1px dashed #dee2e6;
                border-radius: 6px;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                max-width: 200px;
            }

            .print-port-chip {
                display: inline-flex;
                align-items: center;
                gap: 2px;
                padding: 1px 6px;
                border-radius: 3px;
                font-size: 0.5rem;
                font-weight: 600;
                border: 1px solid;
                line-height: 1.4;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .print-port-chip.port-tersedia {
                border-color: #c8cfd8;
                background: #f0f2f5 !important;
                color: #8392ab;
            }

            .print-port-chip.port-rusak {
                border-color: #f5365c;
                background: #fff0f2 !important;
                color: #f5365c;
            }

            .print-port-chip.port-terpakai {
                border-color: #2dce89;
                background: #e8faf0 !important;
                color: #2dce89;
            }

            .print-port-chip i {
                font-size: 0.4rem;
            }

            /* Hide full placeholder tree nodes in print - replaced by compact chips */
            #printable-area .topo-node.placeholder-node {
                display: none !important;
            }

            #printable-area li:has(> .topo-node-wrap > .topo-node.placeholder-node) {
                display: none !important;
            }

            /* Port status legend for print */
            .print-port-legend {
                display: flex !important;
                visibility: visible !important;
                gap: 16px;
                padding: 6px 20px;
                font-size: 7.5pt;
                color: #8392ab;
                align-items: center;
                border-top: 1px solid #dee2e6;
                margin-top: 6px;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .print-port-legend .legend-dot {
                width: 10px;
                height: 10px;
                border-radius: 3px;
                display: inline-block;
                margin-right: 3px;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            .gateway-badge {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            /* Rack wrapper */
            .rack-wrapper {
                background: #f0f0f0 !important;
                box-shadow: none !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Page setup - orientation controlled dynamically by PrintTopo.doPrint() */
            @page {
                margin: 10mm;
            }
        }
    </style>

    <div class="container-fluid py-4">
        {{-- ========== STATS CARDS ========== --}}
        <div class="row stats-cards-row mb-4">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-3">
                <div class="stat-card bg-stat-total">
                    <div class="stat-label">Total Perangkat</div>
                    <div class="stat-value">{{ $stat_total }}</div>
                    <div class="stat-icon"><i class="fas fa-server"></i></div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-3">
                <div class="stat-card bg-stat-switch">
                    <div class="stat-label">Switch</div>
                    <div class="stat-value">{{ $stat_switch }}</div>
                    <div class="stat-icon"><i class="fas fa-network-wired"></i></div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-3">
                <div class="stat-card bg-stat-cpu">
                    <div class="stat-label">CPU / PC</div>
                    <div class="stat-value">{{ $stat_cpu }}</div>
                    <div class="stat-icon"><i class="fas fa-desktop"></i></div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-3">
                <div class="stat-card bg-stat-other">
                    <div class="stat-label">Lainnya</div>
                    <div class="stat-value">{{ $stat_other }}</div>
                    <div class="stat-icon"><i class="fas fa-print"></i></div>
                </div>
            </div>
        </div>

        {{-- ========== MAIN CONTENT ========== --}}
        <div class="row">
            {{-- Topology Diagram --}}
            <div class="col-12">
                <div class="card topology-card">
                    <div class="card-header pb-2">
                        <div class="d-flex flex-wrap justify-content-between align-items-start">
                            <div class="topology-heading-wrap mb-2">
                                <h5 class="mb-0">
                                    <i class="fas fa-project-diagram me-2 text-primary"></i>Diagram Topologi
                                </h5>
                                <p class="topology-subtitle text-sm text-muted mb-0">
                                    Visualisasi struktur jaringan <strong>{{ $selected_gedung_name }}</strong>
                                </p>
                            </div>
                            <div class="topology-controls-wrap d-flex flex-wrap align-items-center gap-2 mb-2">
                                <div id="topologyFilterButtons" class="d-flex align-items-center gap-2 flex-nowrap">
                                    <div class="dropdown">
                                        <button
                                            class="btn btn-sm filter-btn filter-dropdown-toggle btn-outline-secondary mb-0"
                                            type="button" disabled>
                                            <i class="fas fa-list-check me-1"></i>Memuat Kategori...
                                        </button>
                                    </div>
                                </div>
                                <button id="toggleEmptyPortsBtn" class="btn btn-sm btn-outline-secondary mb-0"
                                    onclick="toggleEmptyPorts(this)" title="Tampilkan/sembunyikan slot port kosong">
                                    <i class="fas fa-table-cells me-1"></i>Port Kosong: OFF
                                </button>

                                <div class="vr mx-1 d-none d-md-block" style="height: 24px; opacity: 0.2;"></div>

                                @if (empty($selected_gedung))
                                    {{-- Gedung Filter (Main Server only) --}}
                                    <div class="gedung-filter-wrap">
                                        <select id="gedungFilter" onchange="AreaSearch.onGedungChange(this.value)">
                                            <option value="">Semua Gedung</option>
                                            @foreach ($gedung_list as $g)
                                                <option value="{{ $g->value }}">{{ $g->name }}</option>
                                            @endforeach
                                        </select>
                                        <i class="fas fa-building filter-icon"></i>
                                        <i class="fas fa-chevron-down filter-arrow"></i>
                                    </div>
                                    <span class="filter-separator d-none d-md-inline"><i
                                            class="fas fa-angle-right"></i></span>
                                @endif

                                {{-- Area & Device Search --}}
                                <div class="area-search-wrap" id="areaSearchWrap">
                                    <input type="text" id="areaSearchInput" placeholder="Cari perangkat / area..."
                                        autocomplete="off">
                                    <i class="fas fa-search search-icon"></i>
                                    <button class="search-clear" id="areaSearchClear" title="Hapus pencarian">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    <div class="area-search-results" id="areaSearchResults"></div>
                                </div>
                                <button class="btn btn-sm mb-0 ms-2" id="quickFilterOrphanBtn"
                                    style="background-color: #FF8C00; border-color: #FF8C00; color: white; display: none;"
                                    onclick="toggleOrphanFilter(this)"
                                    title="Filter Perangkat Anomali (Nonaktif di Master)">
                                    <i class="fas fa-exclamation-triangle me-1"></i>Anomali <span id="orphanCountBadge"
                                        class="badge bg-white text-dark ms-1 px-2 py-1 rounded-pill"
                                        style="font-size:0.65rem;">0</span>
                                </button>
                                <span class="search-result-count" id="searchResultCount" style="display:none;"></span>

                                {{-- Print Button --}}
                                @if (($authorize->print ?? '0') == '1' && !($is_teknisi ?? false))
                                    <button class="btn btn-sm btn-outline-secondary btn-print-topo mb-0"
                                        onclick="PrintTopo.doPrint(this)" title="Print Topologi">
                                        <i class="fas fa-print me-1"></i>Print
                                    </button>
                                    <button class="btn btn-sm btn-outline-success mb-0" onclick="exportTopologyExcel(this)"
                                        title="Export Excel">
                                        <i class="fas fa-file-excel me-1"></i>Excel
                                    </button>
                                @endif

                                @if ($authorize->add == '1')
                                    @php
                                        $addTopologyUrl = URL::to($url_menu . '/add');
                                        if (!empty($selected_gedung)) {
                                            $addTopologyUrl .=
                                                '?gedung=' .
                                                urlencode($selected_gedung) .
                                                '&redirect_gedung=' .
                                                urlencode($selected_gedung);
                                        }
                                    @endphp
                                    <a href="{{ $addTopologyUrl }}" class="btn btn-sm bg-gradient-primary mb-0">
                                        <i class="fas fa-plus me-1"></i>Tambah
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0 mb-0">
                    {{-- Filter Result Info Bar --}}
                    <div class="filter-result-bar" id="filterResultBar">
                        <div class="filter-bar-icon" id="filterBarIcon"><i class="fas fa-filter"></i></div>
                        <div class="filter-bar-text">
                            <div class="filter-bar-title" id="filterBarTitle">Filter Aktif</div>
                            <div class="filter-bar-sub" id="filterBarSub">Menampilkan perangkat sesuai filter</div>
                        </div>
                        <div class="filter-bar-tags" id="filterBarTags"></div>
                        <div class="filter-bar-count">
                            <span class="count-num" id="filterBarCount">0</span>
                            <span style="font-size:0.65rem;color:#8392ab;font-weight:600;">perangkat</span>
                        </div>
                        <button class="filter-bar-clear" id="filterBarClear" title="Hapus Filter"
                            onclick="AreaSearch.clear()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    @php
                        // Render immediately for every role, including technicians.
                        $deferTeknisiTopology = false;
                        $canPrintTopology = ($authorize->print ?? '0') == '1' && !($is_teknisi ?? false);
                    @endphp
                    <div class="card-body position-relative p-0">
                        @include('components.alert')

                        {{-- Zoom Controls --}}
                        <div class="zoom-controls {{ $deferTeknisiTopology ? 'd-none' : '' }}" id="zoom-controls">
                            <div class="zoom-controls-inner">
                                <button onclick="zoomIn()" title="Zoom In"><i class="fas fa-plus"></i></button>
                                <span class="zoom-level" id="zoom-level">100%</span>
                                <button onclick="zoomOut()" title="Zoom Out"><i class="fas fa-minus"></i></button>
                                <button onclick="zoomReset()" title="Reset"><i class="fas fa-expand"></i></button>
                            </div>
                        </div>

                        {{-- Topology Canvas --}}
                        <div class="topo-viewport {{ $deferTeknisiTopology ? 'd-none' : '' }}" id="topo-viewport">
                            <div class="topo-canvas" id="topo-canvas">
                                {{-- Rendered by JavaScript --}}
                            </div>
                        </div>

                        @if ($deferTeknisiTopology)
                            <div id="teknisi-topology-prompt" class="text-center py-6 px-3 border-top border-bottom"
                                style="background: linear-gradient(135deg, #f8fbff 0%, #f5fcfb 100%);">
                                <div class="mb-2">
                                    <i class="fas fa-sitemap text-primary" style="font-size: 2.1rem; opacity: .9;"></i>
                                </div>
                                <h6 class="mb-1">Topologi Belum Ditampilkan</h6>
                                <p class="text-sm text-muted mb-3">
                                    Tekan tombol di bawah, atau gunakan pencarian area/lokasi/perangkat untuk menampilkan
                                    diagram.
                                </p>
                                <button type="button" class="btn btn-sm bg-gradient-primary mb-0"
                                    onclick="activateTopologyIfNeeded()">
                                    <i class="fas fa-play me-1"></i>Tampilkan Topologi
                                </button>
                            </div>
                        @endif
                    </div>
                    {{-- Port Status Legend --}}
                    <div class="port-status-legend {{ $deferTeknisiTopology ? 'd-none' : '' }}" id="port-status-legend">
                        <span class="legend-title"><i class="fas fa-info-circle me-1"></i>Status Port:</span>
                        <span class="legend-item"><span class="legend-dot dot-tersedia"></span> Tersedia</span>
                        <span class="legend-item"><span class="legend-dot dot-terpakai"></span> Terpakai</span>
                        <span class="legend-item"><span class="legend-dot"
                                style="border-color: #2dce89; background: #e8faf0; border-style: dashed;"></span> Uplink
                            (Input)</span>
                        <span class="legend-item"><span class="legend-dot dot-rusak"></span> Rusak</span>
                        <span class="legend-item"><span class="legend-dot"
                                style="border-color: #e67e22; background: #fef9e7; border-style: dashed;"></span> Nonaktif
                            di Master</span>
                    </div>
                </div>
            </div>
        </div>

    </div>


    {{-- ========== PORT STATUS MODAL ========== --}}
    <div class="modal fade" id="portStatusModal" tabindex="-1" aria-labelledby="portStatusLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 18px;">
                <div class="modal-header border-0 pb-0">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                            id="portStatusIcon"
                            style="width: 40px; height: 40px; background: linear-gradient(135deg, #f5365c, #f56036);">
                            <i class="fas fa-ban text-white"></i>
                        </div>
                        <div>
                            <h6 class="mb-0" id="portStatusLabel">Tandai Port Rusak</h6>
                            <small class="text-muted" id="portStatusSub">Port 3</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    {{-- Rusak Mode: show keterangan input --}}
                    <div id="portStatusRusakBody">
                        <p class="text-sm text-muted mb-2">Port ini akan ditandai sebagai <strong
                                class="text-danger">rusak</strong> dan tidak bisa diisi perangkat.</p>
                        <div class="form-group mb-0">
                            <label class="form-control-label text-xs fw-bold text-uppercase mb-1">
                                <i class="fas fa-comment-alt text-primary me-1"></i>Keterangan Kerusakan
                            </label>
                            <textarea class="form-control" id="portStatusKeterangan" rows="2"
                                placeholder="Contoh: Konektor patah, port hangus, dll." style="border-radius: 10px; font-size: 0.85rem;"></textarea>
                            <small class="text-muted">Opsional - akan ditampilkan pada diagram topologi</small>
                        </div>
                    </div>
                    {{-- Normal Mode: show confirmation --}}
                    <div id="portStatusNormalBody" style="display:none;">
                        <p class="text-sm text-muted mb-0">Port ini akan dipulihkan ke status <strong
                                class="text-success">normal</strong> dan bisa diisi perangkat kembali.</p>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-sm btn-outline-secondary mb-0" data-bs-dismiss="modal"
                        style="border-radius: 10px;">Batal</button>
                    <button type="button" class="btn btn-sm mb-0" id="portStatusConfirmBtn"
                        onclick="Topo.confirmPortStatus()" style="border-radius: 10px;">
                        <i class="fas fa-check me-1"></i>Konfirmasi
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- ========== NODE QUICK INFO MODAL ========== --}}
    <div class="modal fade" id="nodeQuickInfoModal" tabindex="-1" aria-labelledby="nodeQuickInfoLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 18px;">
                <div class="modal-header border-0 pb-0">
                    <div class="d-flex align-items-center">
                        <div class="rounded-circle d-flex align-items-center justify-content-center me-3" id="qi_icon_bg"
                            style="width: 44px; height: 44px; background: linear-gradient(135deg, #11cdef, #1171ef);">
                            <i class="fas fa-server text-white" id="qi_icon" style="font-size: 1.1rem;"></i>
                        </div>
                        <div>
                            <h6 class="mb-0" id="qi_node_name">Nama Perangkat</h6>
                            <small class="text-muted fw-bold" id="qi_node_kategori"
                                style="font-size: 0.65rem;">KATEGORI</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3 pb-2">
                    <div class="row g-2 align-items-start">
                        <div class="col-12 col-md-6" id="qi_primary_row">
                            <label class="form-control-label text-xs fw-bold text-uppercase text-muted mb-1">
                                <i class="fas fa-circle-info text-primary me-1" id="qi_primary_icon"></i>
                                <span id="qi_primary_label">Informasi Utama</span>
                            </label>
                            <div class="text-sm fw-bold text-dark" id="qi_primary_value">-</div>
                        </div>
                        <div class="col-12 col-md-6 d-none" id="qi_secondary_row">
                            <label class="form-control-label text-xs fw-bold text-uppercase text-muted mb-1">
                                <i class="fas fa-location-dot text-warning me-1" id="qi_secondary_icon"></i>
                                <span id="qi_secondary_label">Area / Location</span>
                            </label>
                            <div class="text-sm fw-bold text-dark" id="qi_secondary_value">-</div>
                        </div>
                        <div class="col-12 col-md-6 d-none" id="qi_ip_row">
                            <label class="form-control-label text-xs fw-bold text-uppercase text-muted mb-1">
                                <i class="fas fa-network-wired text-info me-1"></i> IP Address
                            </label>
                            <div class="text-sm fw-bold text-dark" id="qi_node_ip">-</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 d-flex justify-content-between">
                    <div>
                        <button type="button" class="btn btn-sm btn-outline-danger mb-0" id="qi_btn_delete"
                            style="border-radius: 10px;">
                            <i class="fas fa-trash me-1"></i> Hapus
                        </button>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary mb-0" data-bs-dismiss="modal"
                            style="border-radius: 10px;">Tutup</button>
                        <a href="#" class="btn btn-sm bg-gradient-primary mb-0" id="qi_btn_detail"
                            style="border-radius: 10px;">
                            <i class="fas fa-eye me-1"></i> Detail Lengkap
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script>
        (function() {
            const cardHeader = document.querySelector('.topology-card .card-header');
            if (!cardHeader) return;
            // Insert a sentinel element right before the card-header
            const sentinel = document.createElement('div');
            sentinel.style.height = '1px';
            sentinel.style.width = '100%';
            sentinel.style.position = 'absolute';
            sentinel.style.top = '0';
            sentinel.style.left = '0';
            sentinel.style.pointerEvents = 'none';
            cardHeader.parentElement.style.position = 'relative';
            cardHeader.parentElement.insertBefore(sentinel, cardHeader);

            const observer = new IntersectionObserver(
                ([entry]) => {
                    cardHeader.classList.toggle('is-stuck', !entry.isIntersecting);
                }, {
                    threshold: [1],
                    rootMargin: '0px 0px 0px 0px'
                }
            );
            observer.observe(sentinel);

        })();

        const TOPO_NODES = {!! $topology_json !!};
        const URL_MENU = '{{ url($url_menu) }}';
        const PORT_MOVE_URL = `${URL_MENU}/ajax/moveport`;
        const EXPORT_EXCEL_URL = '{{ url($url_menu . '/ajax/exportexcel') }}';
        const GEDUNG_ALIAS_URLS = {
            A: '{{ url('trsgda') }}',
            B: '{{ url('trsgdb') }}',
            C: '{{ url('trsgdc') }}',
            E: '{{ url('trsgde') }}',
            F: '{{ url('trsgdf') }}',
        };
        const AUTHORIZE_EDIT = {{ $authorize->edit == '1' ? 'true' : 'false' }};
        const AUTHORIZE_DELETE = {{ $authorize->delete == '1' ? 'true' : 'false' }};
        const AUTHORIZE_PRINT = {{ $canPrintTopology ? 'true' : 'false' }};
        const SHOW_RACK = {{ $show_rack ? 'true' : 'false' }};
        const IS_TEKNISI = {{ $is_teknisi ?? false ? 'true' : 'false' }};
        const CURRENT_VIEW_GEDUNG = '{{ strtoupper((string) ($selected_gedung ?? '')) }}';
        const SHOULD_DEFER_TEKNISI_TOPOLOGY =
            {{ $deferTeknisiTopology ? 'true' : 'false' }};
        let TOPOLOGY_ACTIVATED = !SHOULD_DEFER_TEKNISI_TOPOLOGY;
        let SHOW_EMPTY_PORTS = localStorage.getItem('topo_show_empty_ports') === '1';

        function getTopologyUrlByGedung(gedung) {
            const key = String(gedung || '').toUpperCase();
            if (GEDUNG_ALIAS_URLS[key]) {
                return GEDUNG_ALIAS_URLS[key];
            }
            return URL_MENU;
        }

        function getMenuBaseUrlByGedung(gedung) {
            const key = String(gedung || '').toUpperCase();
            if (GEDUNG_ALIAS_URLS[key]) {
                return GEDUNG_ALIAS_URLS[key];
            }
            return URL_MENU;
        }

        function activateTopologyIfNeeded() {
            if (TOPOLOGY_ACTIVATED) {
                return;
            }

            TOPOLOGY_ACTIVATED = true;

            const prompt = document.getElementById('teknisi-topology-prompt');
            const viewport = document.getElementById('topo-viewport');
            const zoomControls = document.getElementById('zoom-controls');
            const portLegend = document.getElementById('port-status-legend');

            if (prompt) prompt.classList.add('d-none');
            if (viewport) viewport.classList.remove('d-none');
            if (zoomControls) zoomControls.classList.remove('d-none');
            if (portLegend) portLegend.classList.remove('d-none');

            TOPO_INITIAL_POSITION_APPLIED = false;
            Topo.render();
            applyFilters();
            scheduleInitialTopologyViewportPosition();
        }

        // ========== ZOOM ==========
        const DEFAULT_ZOOM_LEVEL = 30;
        const MIN_ZOOM_LEVEL = 10;
        const MAX_ZOOM_LEVEL = 200;
        let zoomLevel = DEFAULT_ZOOM_LEVEL;

        function zoomIn() {
            zoomLevel = Math.min(MAX_ZOOM_LEVEL, zoomLevel + 15);
            updateZoom();
        }

        function zoomOut() {
            zoomLevel = Math.max(MIN_ZOOM_LEVEL, zoomLevel - 15);
            updateZoom();
        }

        function zoomReset() {
            zoomLevel = DEFAULT_ZOOM_LEVEL;
            updateZoom();
        }

        function updateZoom() {
            const canvas = document.getElementById('topo-canvas');
            const zoomLabel = document.getElementById('zoom-level');
            if (!canvas) return;

            const zoomValue = Math.max(MIN_ZOOM_LEVEL, Math.min(MAX_ZOOM_LEVEL, zoomLevel));
            applyConnectorStyleByZoom(canvas, zoomValue);

            // Use CSS zoom so layout width/height follow visual scale (prevents huge empty right area).
            if (typeof canvas.style.zoom !== 'undefined') {
                canvas.style.zoom = `${zoomValue}%`;
                canvas.style.transform = '';
            } else {
                // Fallback for engines without CSS zoom support.
                canvas.style.zoom = '';
                canvas.style.transform = `scale(${zoomValue / 100})`;
            }

            if (zoomLabel) {
                zoomLabel.textContent = `${zoomValue}%`;
            }

            refreshTopologyLayoutDecorations();
        }

        window.recenterDiagram = function() {
            const viewport = document.getElementById('topo-viewport');
            const canvas = document.getElementById('topo-canvas');
            if (!viewport || !canvas) return;

            const tree = canvas.querySelector('.topo-tree');
            const contentGroup = canvas.querySelector('.topo-content-group');
            if (!tree || !contentGroup) return;

            const zoomVal = (typeof zoomLevel !== 'undefined') ? Math.max(zoomLevel / 100, 0.1) : 1;

            let minX = Infinity;
            let maxX = -Infinity;

            const absNodes = contentGroup.querySelectorAll('.topo-abs-node:not(.search-hidden)');
            if (absNodes.length === 0) return;

            absNodes.forEach(node => {
                const left = parseFloat(node.style.left) || 0;
                const width = parseFloat(node.style.width) || 200;
                if (left < minX) minX = left;
                if (left + width > maxX) maxX = left + width;
            });

            if (minX === Infinity) return;

            const logicalTreeWidth = maxX - minX;
            const treeWidthInPx = logicalTreeWidth * zoomVal;

            const viewportWidth = viewport.clientWidth;

            let offsetX = 0;
            if (viewportWidth > treeWidthInPx) {
                const physicalOffset = (viewportWidth - treeWidthInPx) / 2;
                offsetX = physicalOffset / zoomVal;
            }

            const shiftX = offsetX - minX;
            contentGroup.style.transform = `translateX(${shiftX}px)`;
        };

        function applyConnectorStyleByZoom(canvas, rawZoomValue) {
            if (!canvas) return;

            const zoomValue = Math.max(MIN_ZOOM_LEVEL, Math.min(MAX_ZOOM_LEVEL, Number(rawZoomValue) ||
                DEFAULT_ZOOM_LEVEL));
            const scale = Math.max(zoomValue / 100, 0.1);

            // Keep perceived connector width visible on-screen even at very small zoom values.
            let desiredVisiblePx = 1.9;
            if (zoomValue <= 12) {
                desiredVisiblePx = 2.7;
            } else if (zoomValue <= 20) {
                desiredVisiblePx = 2.8;
            } else if (zoomValue <= 30) {
                desiredVisiblePx = 2.9;
            } else if (zoomValue <= 40) {
                desiredVisiblePx = 2.6;
            } else if (zoomValue <= 55) {
                desiredVisiblePx = 2.3;
            }

            let lineThickness = Math.round(desiredVisiblePx / scale);
            lineThickness = Math.max(4, Math.min(30, lineThickness));

            const shadowAlpha = zoomValue <= 20 ? 0.30 : (zoomValue <= 40 ? 0.25 : 0.20);
            const lineColor = zoomValue <= 40 ? '#00979f' : '#00b7bd';

            canvas.style.setProperty('--topo-line-color', lineColor);
            canvas.style.setProperty('--topo-line-thickness', `${lineThickness}px`);
            canvas.style.setProperty('--topo-line-shadow',
                `0 0 ${Math.max(4, Math.round(lineThickness * 0.75))}px rgba(0, 183, 189, ${shadowAlpha})`);
        }

        function getConnectorLineThicknessPx() {
            const canvas = document.getElementById('topo-canvas');
            if (!canvas) return 2;

            const raw = getComputedStyle(canvas).getPropertyValue('--topo-line-thickness').trim();
            const value = parseFloat(raw);
            return Number.isFinite(value) && value > 0 ? value : 2;
        }

        let TOPO_INITIAL_POSITION_APPLIED = false;

        function ensureInitialTopologyViewportPosition(force = false) {
            const viewport = document.getElementById('topo-viewport');
            const tree = document.querySelector('#topo-canvas .topo-tree');
            if (!viewport || !tree) return;

            if (TOPO_INITIAL_POSITION_APPLIED && !force) return;

            const scale = getCanvasScale();
            const visualContentWidth = Math.max(0, Math.round(tree.scrollWidth * scale));
            const maxScrollX = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
            if (maxScrollX <= 0 || visualContentWidth <= (viewport.clientWidth + 12)) {
                viewport.scrollLeft = 0;
                viewport.scrollTop = 0;
                TOPO_INITIAL_POSITION_APPLIED = true;
                return;
            }

            // Always center on the first root node (works for both Port ON and OFF)
            const firstRoot = tree.querySelector('.topo-abs-node[data-depth="1"]');
            if (firstRoot) {
                const rootRect = getRelativeRect(firstRoot, tree);
                const rootCenterX = (rootRect.left + (rootRect.width / 2)) * scale;
                const targetScroll = rootCenterX - (viewport.clientWidth / 2);
                viewport.scrollLeft = Math.max(0, Math.min(maxScrollX, Math.round(targetScroll)));
            } else {
                // Fallback: center on tree content midpoint
                const fallbackCenter = (visualContentWidth / 2) - (viewport.clientWidth / 2);
                viewport.scrollLeft = Math.max(0, Math.min(maxScrollX, Math.round(fallbackCenter)));
            }

            viewport.scrollTop = 0;
            TOPO_INITIAL_POSITION_APPLIED = true;
        }

        function scheduleInitialTopologyViewportPosition(force = false) {
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    ensureInitialTopologyViewportPosition(force);
                });
            });
        }

        function getCanvasScale() {
            const canvas = document.getElementById('topo-canvas');
            if (!canvas) return 1;

            const zoomRaw = (canvas.style.zoom || '').toString().trim();
            if (zoomRaw) {
                let scaleFromZoom = NaN;
                if (zoomRaw.endsWith('%')) {
                    scaleFromZoom = parseFloat(zoomRaw) / 100;
                } else {
                    scaleFromZoom = parseFloat(zoomRaw);
                }
                if (Number.isFinite(scaleFromZoom) && scaleFromZoom > 0) {
                    return scaleFromZoom;
                }
            }

            const transform = canvas.style.transform || '';
            const match = transform.match(/scale\(([^)]+)\)/);
            const scale = match ? parseFloat(match[1]) : 1;
            return Number.isFinite(scale) && scale > 0 ? scale : 1;
        }

        function getRelativeRect(el, ancestor) {
            if (!el || !ancestor) {
                return {
                    top: 0,
                    left: 0,
                    width: 0,
                    height: 0,
                    right: 0,
                    bottom: 0
                };
            }

            let top = 0;
            let left = 0;
            let cursor = el;

            while (cursor && cursor !== ancestor) {
                top += cursor.offsetTop;
                left += cursor.offsetLeft;
                cursor = cursor.offsetParent;
            }

            // Fallback when offsetParent chain is interrupted by transformed ancestors.
            if (cursor !== ancestor) {
                const ancestorRect = ancestor.getBoundingClientRect();
                const rect = el.getBoundingClientRect();
                const scale = getCanvasScale();
                top = (rect.top - ancestorRect.top) / scale;
                left = (rect.left - ancestorRect.left) / scale;
            }

            const width = el.offsetWidth;
            const height = el.offsetHeight;

            return {
                top,
                left,
                width,
                height,
                right: left + width,
                bottom: top + height,
            };
        }

        function refreshTopologyLayoutDecorations() {
            if (!TOPOLOGY_ACTIVATED || typeof Topo === 'undefined') return;

            const canvas = document.getElementById('topo-canvas');
            if (!canvas || !canvas.querySelector('.topo-tree')) return;

            if (typeof Topo.syncCompanionConnectorWidths === 'function') {
                Topo.syncCompanionConnectorWidths(canvas);
            }
            Topo.renderLayerGuides(canvas);
            if (typeof AreaSearch !== 'undefined' && typeof AreaSearch.refreshLineFocus === 'function') {
                AreaSearch.refreshLineFocus();
            }

            if (typeof window.recenterDiagram === 'function') {
                window.recenterDiagram();
            }
        }

        let topologyLayoutRefreshTimer = null;

        // ========== FILTER ==========
        const TOPO_FILTER_PRESET = {
            server: {
                label: 'SERVER',
                icon: 'fa-server',
                btnClass: 'btn-outline-dark'
            },
            switch: {
                label: 'SWITCH',
                icon: 'fa-network-wired',
                btnClass: 'btn-outline-warning'
            },
            cpu: {
                label: 'CPU',
                icon: 'fa-desktop',
                btnClass: 'btn-outline-info'
            },
            printer: {
                label: 'PRINTER',
                icon: 'fa-print',
                btnClass: 'btn-outline-secondary'
            },
            scanner: {
                label: 'SCANNER',
                icon: 'fa-barcode',
                btnClass: 'btn-outline-secondary'
            },
            router: {
                label: 'ROUTER',
                icon: 'fa-route',
                btnClass: 'btn-outline-secondary'
            },
            'access-point': {
                label: 'ACCESS POINT',
                icon: 'fa-wifi',
                btnClass: 'btn-outline-secondary'
            },
            monitor: {
                label: 'MONITOR',
                icon: 'fa-tv',
                btnClass: 'btn-outline-secondary'
            },
            laptop: {
                label: 'LAPTOP',
                icon: 'fa-laptop',
                btnClass: 'btn-outline-secondary'
            },
            cctv: {
                label: 'CCTV',
                icon: 'fa-video',
                btnClass: 'btn-outline-secondary'
            },
            rusak: {
                label: 'RUSAK',
                icon: 'fa-x',
                btnClass: 'btn-outline-secondary'
            },
            spare: {
                label: 'SPARE',
                icon: 'fa-box-open',
                btnClass: 'btn-outline-secondary'
            },
            other: {
                label: 'LAINNYA',
                icon: 'fa-microchip',
                btnClass: 'btn-outline-secondary'
            },
        };
        const TOPO_FILTER_PRIORITY = ['server', 'switch', 'router', 'access-point', 'cpu', 'laptop', 'monitor', 'printer',
            'scanner', 'cctv', 'rusak', 'spare', 'other'
        ];
        let activeFilters = {
            all: true
        };
        let availableCategoryFilters = [];
        let categoryFilterMetaByKey = {};

        function isPlaceholderNode(node) {
            return node && (node.is_placeholder === true || node.is_placeholder === '1');
        }

        function getTopologyFilterKey(kategori) {
            const k = String(kategori || '').trim().toLowerCase();
            if (!k) return 'other';

            if (k.includes('server')) return 'server';
            if (k.includes('switch')) return 'switch';
            if (k.includes('cpu') || k.includes('pc') || k.includes('computer')) return 'cpu';
            if (k.includes('printer')) return 'printer';
            if (k.includes('scanner')) return 'scanner';
            if (k.includes('router')) return 'router';
            if (k.includes('access point') || k.includes('access-point') || /^ap(\b|[^a-z0-9])/.test(k) || k.includes(
                    'wifi')) return 'access-point';
            if (k.includes('monitor')) return 'monitor';
            if (k.includes('laptop')) return 'laptop';
            if (k.includes('cctv') || k.includes('camera')) return 'cctv';

            return k.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'other';
        }

        function getTopologyFilterLabel(kategori, key) {
            if (TOPO_FILTER_PRESET[key]?.label) {
                return TOPO_FILTER_PRESET[key].label;
            }

            const raw = String(kategori || '').trim();
            return raw ? raw.toUpperCase() : TOPO_FILTER_PRESET.other.label;
        }

        function escapeFilterText(text) {
            return String(text || '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function normalizeFilterIconClass(rawIcon, fallbackKey = 'other') {
            const fallback = TOPO_FILTER_PRESET[fallbackKey]?.icon || TOPO_FILTER_PRESET.other.icon;
            const raw = String(rawIcon || '').trim();
            if (!raw) return fallback;

            const tokens = raw.split(/\s+/).filter(Boolean);
            let iconClass = tokens.find(t => /^fa-[a-z0-9-]+$/i.test(t)) || '';

            if (!iconClass) {
                iconClass = raw;
                if (iconClass === 'fa-x') {
                    iconClass = 'fa-times-circle';
                }
                if (!iconClass.startsWith('fa-')) {
                    iconClass = `fa-${iconClass}`;
                }
            }

            return /^fa-[a-z0-9-]+$/i.test(iconClass) ? iconClass : fallback;
        }

        function syncFilterButtonsState() {
            document.querySelectorAll('.topology-category-item[data-filter]').forEach(item => {
                const key = item.dataset.filter;
                const isActive = key === 'all' ? !!activeFilters.all : !!activeFilters[key];
                item.classList.toggle('active', isActive);

                const checkIcon = item.querySelector('.filter-check');
                if (checkIcon) {
                    checkIcon.style.visibility = isActive ? 'visible' : 'hidden';
                }
            });

            const summaryBtn = document.getElementById('topologyCategoryDropdownLabel');
            if (summaryBtn) {
                const activeCount = availableCategoryFilters.filter(key => !!activeFilters[key]).length;
                if (activeFilters.all || activeCount === availableCategoryFilters.length) {
                    summaryBtn.innerHTML = '<i class="fas fa-list-check me-1"></i>Kategori: Semua';
                } else if (activeCount === 1) {
                    const activeKey = availableCategoryFilters.find(key => !!activeFilters[key]);
                    const activeLabel = categoryFilterMetaByKey[activeKey]?.label || TOPO_FILTER_PRESET[activeKey]?.label ||
                        String(activeKey || '').toUpperCase();
                    summaryBtn.innerHTML = `<i class="fas fa-list-check me-1"></i>${escapeFilterText(activeLabel)}`;
                } else if (activeCount === 0) {
                    summaryBtn.innerHTML = '<i class="fas fa-list-check me-1"></i>Kategori: Tidak Ada';
                } else {
                    summaryBtn.innerHTML = `<i class="fas fa-list-check me-1"></i>Kategori (${activeCount})`;
                }
            }
        }

        function initTopologyCategoryFilters() {
            const container = document.getElementById('topologyFilterButtons');
            if (!container) return;

            const categoryMap = new Map();
            const categoryCounts = {};
            let totalOrphaned = 0;
            let totalDevices = 0;

            TOPO_NODES.forEach(node => {
                if (isPlaceholderNode(node)) return;

                totalDevices++;

                if (node.is_orphaned) {
                    totalOrphaned++;
                }

                const kategori = String(node?.kategori || '').trim();
                const kategoriIcon = String(node?.kategori_icon || '').trim();
                const key = getTopologyFilterKey(kategori);

                categoryCounts[key] = (categoryCounts[key] || 0) + 1;

                if (!categoryMap.has(key)) {
                    const preset = TOPO_FILTER_PRESET[key] || TOPO_FILTER_PRESET.other;
                    categoryMap.set(key, {
                        key,
                        label: getTopologyFilterLabel(kategori, key),
                        icon: normalizeFilterIconClass(kategoriIcon, key),
                        btnClass: preset.btnClass,
                        iconFromMaster: !!kategoriIcon,
                    });
                } else if (kategoriIcon) {
                    const existing = categoryMap.get(key);
                    if (!existing.iconFromMaster) {
                        existing.icon = normalizeFilterIconClass(kategoriIcon, key);
                        existing.iconFromMaster = true;
                    }
                }
            });

            const categories = Array.from(categoryMap.values()).sort((a, b) => {
                const indexA = TOPO_FILTER_PRIORITY.includes(a.key) ? TOPO_FILTER_PRIORITY.indexOf(a.key) : Number
                    .MAX_SAFE_INTEGER;
                const indexB = TOPO_FILTER_PRIORITY.includes(b.key) ? TOPO_FILTER_PRIORITY.indexOf(b.key) : Number
                    .MAX_SAFE_INTEGER;
                if (indexA !== indexB) return indexA - indexB;
                return a.label.localeCompare(b.label);
            });

            availableCategoryFilters = categories.map(item => item.key);
            categoryFilterMetaByKey = {};
            categories.forEach(item => {
                categoryFilterMetaByKey[item.key] = {
                    label: item.label,
                    icon: item.icon,
                };
            });

            activeFilters = {
                all: true
            };
            availableCategoryFilters.forEach(key => {
                activeFilters[key] = true;
            });

            let html = `
        <div class="dropdown" data-bs-auto-close="outside" data-auto-close="outside">
            <button class="btn btn-sm filter-btn filter-dropdown-toggle btn-outline-secondary dropdown-toggle mb-0" type="button" id="topologyCategoryDropdownLabel" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fas fa-list-check me-1"></i>Kategori: Semua
            </button>
            <div class="dropdown-menu topology-category-menu" aria-labelledby="topologyCategoryDropdownLabel">
                <div class="topology-category-header">Filter Kategori Perangkat</div>
                <button type="button" class="dropdown-item topology-category-item d-flex justify-content-between align-items-center" data-filter="all" onclick="toggleFilter(event, this)">
                    <span class="item-main"><i class="fas fa-layer-group me-1" style="width: 20px; text-align: center;"></i>SEMUA</span>
                    <span class="d-flex align-items-center">
                        <span class="badge bg-light text-dark border border-secondary border-opacity-25 me-2 rounded-pill px-2 py-1" style="font-size: 0.7rem;">${totalDevices}</span>
                        <i class="fas fa-check filter-check"></i>
                    </span>
                </button>
                <div class="dropdown-divider my-1"></div>
                <div class="topology-category-search-wrap">
                    <i class="fas fa-search category-search-icon"></i>
                    <input type="text" id="topologyCategorySearchInput" placeholder="Cari kategori..." autocomplete="off">
                </div>
                <div class="topology-category-grid">
    `;

            categories.forEach(item => {
                const count = categoryCounts[item.key] || 0;
                html += `
            <button type="button" class="dropdown-item topology-category-item d-flex justify-content-between align-items-center" data-filter="${escapeFilterText(item.key)}" data-filter-label="${escapeFilterText(item.label)}" onclick="toggleFilter(event, this)">
                <span class="item-main"><i class="fas ${escapeFilterText(item.icon)} me-1" style="width: 20px; text-align: center;"></i>${escapeFilterText(item.label)}</span>
                <span class="d-flex align-items-center">
                    <span class="badge bg-light text-dark border border-secondary border-opacity-25 me-2 rounded-pill px-2 py-1" style="font-size: 0.7rem;">${count}</span>
                    <i class="fas fa-check filter-check"></i>
                </span>
            </button>
        `;
            });

            html += `
                </div>
                <div class="topology-category-empty" id="topologyCategoryEmptyState">
                    <i class="fas fa-folder-open me-1"></i>Tidak ada kategori yang cocok
                </div>
            </div>
        </div>
    `;

            container.innerHTML = html;
            syncFilterButtonsState();
            bindTopologyCategoryMenuSearch();

            const orphanBtn = document.getElementById('quickFilterOrphanBtn');
            if (orphanBtn) {
                if (totalOrphaned > 0) {
                    orphanBtn.style.display = 'inline-block';
                    const badge = document.getElementById('orphanCountBadge');
                    if (badge) badge.innerText = totalOrphaned;
                } else {
                    orphanBtn.style.display = 'none';
                }
            }
        }

        function toggleOrphanFilter(btn) {
            if (typeof AreaSearch === 'undefined') return;

            AreaSearch.activeOrphanOnly = !AreaSearch.activeOrphanOnly;

            if (AreaSearch.activeOrphanOnly) {
                btn.classList.add('active');
                btn.style.boxShadow = '0 0 0 0.2rem rgba(255, 140, 0, 0.5)';
                btn.style.opacity = '1';
            } else {
                btn.classList.remove('active');
                btn.style.boxShadow = 'none';
                btn.style.opacity = '0.9';
            }

            AreaSearch.applyHighlight();
        }

        function bindTopologyCategoryMenuSearch() {
            const input = document.getElementById('topologyCategorySearchInput');
            if (!input) return;

            filterTopologyCategoryMenu('');

            if (input.dataset.searchBound !== '1') {
                input.addEventListener('input', () => filterTopologyCategoryMenu(input.value));
                input.dataset.searchBound = '1';
            }

            const dropdown = input.closest('.dropdown');
            if (!dropdown || dropdown.dataset.categorySearchBound === '1') return;

            dropdown.addEventListener('shown.bs.dropdown', () => {
                const activeInput = document.getElementById('topologyCategorySearchInput');
                if (!activeInput) return;
                requestAnimationFrame(() => activeInput.focus());
            });

            dropdown.dataset.categorySearchBound = '1';
        }

        function filterTopologyCategoryMenu(query) {
            const term = String(query || '').trim().toLowerCase();
            let visibleTotal = 0;

            document.querySelectorAll('.topology-category-item[data-filter]').forEach(item => {
                const key = String(item.dataset.filter || '').toLowerCase();
                if (key === 'all') return;

                const label = String(item.dataset.filterLabel || '').toLowerCase();
                const match = !term || key.includes(term) || label.includes(term);
                item.classList.toggle('category-hidden', !match);

                if (match) {
                    visibleTotal += 1;
                }
            });

            const emptyState = document.getElementById('topologyCategoryEmptyState');
            if (emptyState) {
                emptyState.style.display = visibleTotal === 0 ? 'flex' : 'none';
            }
        }

        function keepCategoryDropdownOpen(btn) {
            const dropdown = btn?.closest('.dropdown');
            if (!dropdown) return;

            const toggleBtn = dropdown.querySelector('.dropdown-toggle');
            const menu = dropdown.querySelector('.dropdown-menu');
            if (!toggleBtn || !menu) return;

            setTimeout(() => {
                if (window.bootstrap?.Dropdown?.getOrCreateInstance) {
                    window.bootstrap.Dropdown.getOrCreateInstance(toggleBtn).show();
                    return;
                }

                dropdown.classList.add('show');
                toggleBtn.classList.add('show');
                toggleBtn.setAttribute('aria-expanded', 'true');
                menu.classList.add('show');
            }, 0);
        }

        function toggleFilter(eventOrBtn, maybeBtn) {
            const event = maybeBtn ? eventOrBtn : null;
            const btn = maybeBtn || eventOrBtn;
            if (!btn) return;

            if (event) {
                event.preventDefault();
                event.stopPropagation();
            }

            const filter = btn.dataset.filter;
            if (!filter) return;

            if (filter === 'all') {
                const shouldEnableAll = !activeFilters.all || availableCategoryFilters.some(key => !activeFilters[key]);
                activeFilters.all = shouldEnableAll;
                availableCategoryFilters.forEach(key => {
                    activeFilters[key] = shouldEnableAll;
                });
            } else {
                activeFilters[filter] = !activeFilters[filter];
                activeFilters.all = availableCategoryFilters.length > 0 && availableCategoryFilters.every(key => !!
                    activeFilters[key]);
            }

            syncFilterButtonsState();
            applyFilters();
            keepCategoryDropdownOpen(btn);
        }

        function syncEmptyPortToggleButton() {
            const btn = document.getElementById('toggleEmptyPortsBtn');
            if (!btn) return;

            if (SHOW_EMPTY_PORTS) {
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-outline-primary');
                btn.innerHTML = '<i class="fas fa-table-cells me-1"></i>Port Kosong: ON';
            } else {
                btn.classList.remove('btn-outline-primary');
                btn.classList.add('btn-outline-secondary');
                btn.innerHTML = '<i class="fas fa-table-cells me-1"></i>Port Kosong: OFF';
            }
        }

        function toggleEmptyPorts() {
            SHOW_EMPTY_PORTS = !SHOW_EMPTY_PORTS;
            localStorage.setItem('topo_show_empty_ports', SHOW_EMPTY_PORTS ? '1' : '0');
            syncEmptyPortToggleButton();

            if (!TOPOLOGY_ACTIVATED) {
                activateTopologyIfNeeded();
                return;
            }

            Topo.render();
            applyFilters();
            TOPO_INITIAL_POSITION_APPLIED = false;
            scheduleInitialTopologyViewportPosition(true);
        }

        function exportTopologyExcel(btn) {
            if (!AUTHORIZE_PRINT) return;

            const params = new URLSearchParams();
            const gedungSelect = document.getElementById('gedungFilter');
            const activeGedung = CURRENT_VIEW_GEDUNG || (AreaSearch.activeGedung || (gedungSelect ? gedungSelect.value :
                ''));
            const searchValue = AreaSearch.input ? AreaSearch.input.value.trim() : '';

            if (activeGedung) params.set('gedung', activeGedung);
            if (AreaSearch.activeArea) params.set('area', AreaSearch.activeArea);
            if (AreaSearch.activeDeviceId) params.set('device_id', AreaSearch.activeDeviceId);
            if (searchValue) params.set('search', searchValue);

            params.set('include_empty_ports', SHOW_EMPTY_PORTS ? '1' : '0');

            if (!activeFilters.all) {
                const selectedCategories = availableCategoryFilters.filter(key => !!activeFilters[key]);
                params.set('kategori_filter', '1');
                params.set('kategori', selectedCategories.join(','));
            }

            if (AreaSearch.activeOrphanOnly) {
                params.set('orphan_only', '1');
            }

            if (btn) {
                btn.disabled = true;
                setTimeout(() => {
                    btn.disabled = false;
                }, 1200);
            }

            window.location.href = `${EXPORT_EXCEL_URL}?${params.toString()}`;
        }

        function isCategoryFocusActive() {
            return !activeFilters.all;
        }

        function applyFilters() {
            if (!TOPOLOGY_ACTIVATED) {
                return;
            }

            const areaSearchReady = typeof AreaSearch !== 'undefined' &&
                AreaSearch &&
                typeof AreaSearch.applyHighlight === 'function' &&
                !!AreaSearch.countLabel;

            // Use the same graph-focus behavior as lokasi search: match + connected path.
            if (areaSearchReady) {
                AreaSearch.applyHighlight();
                return;
            }

            document.querySelectorAll('.topo-node').forEach(node => {
                const absNode = node.closest('.topo-abs-node');
                if (absNode) {
                    absNode.style.opacity = '';
                }

                const type = node.dataset.filterType || '';
                const visible = !!activeFilters.all || (!!type && !!activeFilters[type]);
                node.classList.toggle('category-dimmed', !visible);

                if (node.classList.contains('root-node')) {
                    const rackWrapper = node.closest('.rack-wrapper');
                    if (rackWrapper) {
                        rackWrapper.classList.toggle('category-dimmed', !visible);
                    }
                }
            });

            refreshTopologyLayoutDecorations();
        }

        // ========== PRINT TOPOLOGY ===========
        const PrintTopo = {
            filterType: 'gedung',
            orientation: 'landscape',
            showHeaderFooter: false,
            _afterPrintHandler: null,

            init() {
                if (!AUTHORIZE_PRINT) {
                    return;
                }

                this.gedungSelect = document.getElementById('printGedungSelect');
                this.areaSelect = document.getElementById('printAreaSelect');
                this.nodeCountEl = document.getElementById('printNodeCount');
                this.previewTextEl = document.getElementById('printPreviewText');
                this.modalEl = document.getElementById('printFilterModal');
                this.printBtn = this.modalEl ? this.modalEl.querySelector('.bg-gradient-primary') : null;

                this.populateAreaOptions();

                if (this.modalEl) {
                    this.modalEl.addEventListener('shown.bs.modal', () => {
                        this.updatePreview();
                    });
                }

                this.updatePreview();
            },

            isPlaceholder(node) {
                return node && (node.is_placeholder === true || node.is_placeholder === '1');
            },

            getNodeArea(node) {
                return String(node?.area || node?.master_lokasi || node?.location || '').trim();
            },

            normalizeText(v) {
                return String(v || '').trim().toLowerCase();
            },

            populateAreaOptions() {
                if (!this.areaSelect) return;

                const current = this.areaSelect.value || '';
                const areaSet = new Set();

                TOPO_NODES.forEach(node => {
                    if (this.isPlaceholder(node)) return;
                    const area = this.getNodeArea(node);
                    if (area) areaSet.add(area);
                });

                const areas = Array.from(areaSet).sort((a, b) => a.localeCompare(b));

                this.areaSelect.innerHTML = '<option value="">-- Semua Area --</option>';
                areas.forEach(area => {
                    const opt = document.createElement('option');
                    opt.value = area;
                    opt.textContent = area;
                    this.areaSelect.appendChild(opt);
                });

                if (current && areas.includes(current)) {
                    this.areaSelect.value = current;
                }
            },

            selectFilter(type) {
                this.filterType = type === 'area' ? 'area' : 'gedung';

                document.querySelectorAll('.print-filter-card').forEach(card => {
                    card.classList.toggle('active', card.dataset.filter === this.filterType);
                });

                const gedungGroup = document.getElementById('printGedungGroup');
                const areaGroup = document.getElementById('printAreaGroup');
                if (gedungGroup) gedungGroup.style.display = this.filterType === 'gedung' ? 'block' : 'none';
                if (areaGroup) areaGroup.style.display = this.filterType === 'area' ? 'block' : 'none';

                this.updatePreview();
            },

            getFilteredNodes() {
                const nodes = TOPO_NODES.filter(node => !this.isPlaceholder(node));

                if (this.filterType === 'gedung') {
                    const selectedGedung = String(this.gedungSelect?.value || '').trim().toUpperCase();
                    if (!selectedGedung) return nodes;

                    // In alias view (e.g. /trsgdf), backend data is already scoped to current gedung,
                    // and gateway nodes may carry source gedung code. Keep all visible nodes for this scope.
                    if (CURRENT_VIEW_GEDUNG && selectedGedung === CURRENT_VIEW_GEDUNG) {
                        return nodes;
                    }

                    return nodes.filter(node => {
                        const nodeGedung = String(node.gedung || '').trim().toUpperCase();
                        const linkGedung = String(node.link_gedung || '').trim().toUpperCase();
                        const isGateway = node.is_gateway === true || node.is_gateway === '1';

                        if (nodeGedung === selectedGedung) return true;
                        if (isGateway && linkGedung === selectedGedung) return true;
                        return false;
                    });
                }

                const selectedArea = this.normalizeText(this.areaSelect?.value || '');
                if (!selectedArea) return nodes;
                return nodes.filter(node => this.normalizeText(this.getNodeArea(node)) === selectedArea);
            },

            updatePreview() {
                const filtered = this.getFilteredNodes();
                const count = filtered.length;

                if (this.nodeCountEl) {
                    this.nodeCountEl.textContent = `${count} perangkat`;
                }

                if (this.previewTextEl) {
                    if (this.filterType === 'gedung') {
                        const g = String(this.gedungSelect?.value || '').trim();
                        const gName = (typeof GEDUNG_MAP !== 'undefined' && GEDUNG_MAP[g]) ? GEDUNG_MAP[g] : g;
                        this.previewTextEl.textContent = g ?
                            `Perangkat di ${gName} akan dicetak` :
                            'Semua perangkat akan dicetak';
                    } else {
                        const area = String(this.areaSelect?.value || '').trim();
                        this.previewTextEl.textContent = area ?
                            `Perangkat di area "${area}" akan dicetak` :
                            'Semua area akan dicetak';
                    }
                }

                if (this.printBtn) {
                    this.printBtn.disabled = count === 0;
                }
            },

            setOrientation(mode) {
                this.orientation = mode === 'portrait' ? 'portrait' : 'landscape';

                const btnL = document.getElementById('btnLandscape');
                const btnP = document.getElementById('btnPortrait');
                if (btnL) btnL.classList.toggle('active', this.orientation === 'landscape');
                if (btnP) btnP.classList.toggle('active', this.orientation === 'portrait');
            },

            cleanupPrintableArea() {
                const printable = document.getElementById('printable-area');
                if (printable) printable.remove();

                const overlay = document.getElementById('print-loading-overlay');
                if (overlay) overlay.remove();

                // Restore document body overflow
                document.body.style.overflow = '';

                if (this._afterPrintHandler) {
                    window.removeEventListener('afterprint', this._afterPrintHandler);
                    this._afterPrintHandler = null;
                }

                const styleTag = document.getElementById('dynamic-print-orientation');
                if (styleTag) styleTag.remove();
            },

            doPrint(triggerBtn = null) {
                if (!AUTHORIZE_PRINT) {
                    alert('Anda tidak memiliki akses untuk cetak topologi.');
                    return;
                }

                const filtered = this.getFilteredNodes();
                if (filtered.length === 0) {
                    alert('Tidak ada perangkat yang cocok untuk dicetak.');
                    return;
                }

                this.cleanupPrintableArea();

                const allowedIds = new Set(filtered.map(n => String(n.id)));
                const viewport = document.getElementById('topo-viewport');
                if (!viewport) {
                    alert('Area topologi tidak ditemukan.');
                    return;
                }

                // Show loading indicator on button
                const btn = triggerBtn || this.printBtn;
                const originalBtnHtml = btn ? btn.innerHTML : '';
                if (btn) {
                    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Memproses...';
                    btn.disabled = true;
                }

                // ===== SHOW FULL SCREEN LOADING OVERLAY =====
                const overlay = document.createElement('div');
                overlay.id = 'print-loading-overlay';
                overlay.style.cssText = `
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(255, 255, 255, 0.98); z-index: 9999999;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
        `;
                overlay.innerHTML = `
            <div class="spinner-border text-primary" style="width: 4rem; height: 4rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <h4 class="mt-4 text-primary fw-bold">Menyiapkan Dokumen PDF...</h4>
            <p class="text-muted text-sm">Mohon tunggu, merender diagram topologi resolusi tinggi.</p>
        `;
                document.body.appendChild(overlay);

                // Hide main scrollbars temporarily to avoid glitches when appending printable area
                document.body.style.overflow = 'hidden';

                const printable = document.createElement('div');
                printable.id = 'printable-area';
                // Put it under the overlay at left:0 to prevent document width explosion (the cause of huge nodes)
                printable.style.cssText = `
            position: absolute;
            left: 0;
            top: 0;
            z-index: -9999;
            font-family: 'Segoe UI', Arial, sans-serif;
            font-size: 11px;
            color: #333;
            line-height: 1.4;
            background: white;
            width: max-content;
            padding: 20px;
        `;

                // Menghapus efek box-shadow dan filter untuk mencegah ghosting blur di html2canvas
                const noShadowStyle = document.createElement('style');
                noShadowStyle.innerHTML = `
            #printable-area * {
                box-shadow: none !important;
                text-shadow: none !important;
                filter: none !important;
            }
        `;
                printable.appendChild(noShadowStyle);

                const now = new Date();
                const dateStr = now.toLocaleDateString('id-ID', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                const timeStr = now.toLocaleTimeString('id-ID', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                });

                // ===== Filter & Stats label (always built for use) =====
                let filterLabel = '';
                if (this.filterType === 'gedung') {
                    const g = String(this.gedungSelect?.value || '').trim();
                    const gName = (typeof GEDUNG_MAP !== 'undefined' && GEDUNG_MAP[g]) ? GEDUNG_MAP[g] : 'Semua Gedung';
                    filterLabel = gName;
                } else {
                    const area = String(this.areaSelect?.value || '').trim();
                    filterLabel = area || 'Semua Area';
                }

                const switches = filtered.filter(n => (n.kategori || '').toLowerCase().includes('switch')).length;
                const cpus = filtered.filter(n => {
                    const k = (n.kategori || '').toLowerCase();
                    return k.includes('cpu') || k.includes('pc');
                }).length;
                const others = filtered.length - switches - cpus;

                // ===== PAGE HEADER (optional) =====
                if (this.showHeaderFooter) {
                    const pageHeader = document.createElement('div');
                    pageHeader.style.cssText = `
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding-bottom: 12px;
                margin-bottom: 10px;
                border-bottom: 3px solid #00b7bd;
                width: 100%;
            `;

                    const headerTitle = document.createElement('div');
                    headerTitle.innerHTML = `
                <div style="font-size: 16px; font-weight: 700; color: #00b7bd; letter-spacing: 0.5px;">
                    DIAGRAM TOPOLOGI JARINGAN
                </div>
                <div style="font-size: 10px; color: #666; margin-top: 2px;">
                    PT. MSJ (Monitoring &amp; Sistem Jaringan)
                </div>
            `;

                    const headerDate = document.createElement('div');
                    headerDate.style.cssText = 'text-align: right; font-size: 10px;';
                    headerDate.innerHTML = `
                <div style="font-weight: 600; color: #333;">Tanggal Cetak</div>
                <div style="color: #666; margin-top: 2px;">${dateStr}</div>
                <div style="color: #666;">${timeStr} WIB</div>
            `;

                    pageHeader.appendChild(headerTitle);
                    pageHeader.appendChild(headerDate);
                    printable.appendChild(pageHeader);
                }

                // ===== COMPACT FILTER & STATS (small, inline) =====
                const infoBar = document.createElement('div');
                infoBar.style.cssText = `
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            margin-bottom: 10px;
            font-size: 11px;
            color: #666;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background: #fafbfc;
            width: 100%;
        `;
                infoBar.innerHTML = `
            <span style="font-weight: 600; color: #333;"><i class="fas fa-filter" style="color: #00b7bd; margin-right: 4px;"></i>${filterLabel}</span>
            <span style="display: flex; gap: 10px;">
                <span><strong>${filtered.length}</strong> Total</span>
                <span style="color: #fb6340;"><strong>${switches}</strong> Switch</span>
                <span style="color: #5e72e4;"><strong>${cpus}</strong> CPU/PC</span>
                <span style="color: #11cdef;"><strong>${others}</strong> Lainnya</span>
            </span>
        `;
                printable.appendChild(infoBar);

                // ===== MAIN DIAGRAM =====
                const diagramWrapper = document.createElement('div');
                diagramWrapper.style.cssText = `
            margin: 10px 0;
            padding: 10px;
            background: white;
        `;

                const clone = viewport.cloneNode(true);
                clone.id = 'print-topo-viewport';

                // Reset viewport dimensions for print (remove min-height: 400px, padding)
                clone.style.cssText = 'overflow: visible; min-height: 0; height: auto; padding: 10px;';

                // Reset topo-canvas dimensions
                const canvasClone = clone.querySelector('.topo-canvas');
                if (canvasClone) {
                    canvasClone.style.cssText =
                        'zoom: 100%; transform: none; min-width: 0; display: flex; justify-content: flex-start; padding: 0;';
                }

                // Remove layer guide bands (they waste huge vertical space in print)
                clone.querySelectorAll('.layer-guides').forEach(el => el.remove());

                // Remove zoom controls from clone
                clone.querySelectorAll('.zoom-controls').forEach(el => el.remove());

                const showEmpty = typeof SHOW_EMPTY_PORTS !== 'undefined' ? SHOW_EMPTY_PORTS : false;

                if (!showEmpty) {
                    clone.querySelectorAll('.placeholder-node').forEach(el => {
                        const absNode = el.closest('.topo-abs-node');
                        if (absNode) absNode.remove();
                    });
                }

                clone.querySelectorAll('.topo-node').forEach(el => {
                    // Keep placeholder nodes if toggle is ON
                    if (showEmpty && el.classList.contains('placeholder-node')) return;

                    const nodeId = String(el.dataset.id || '');
                    const absNode = el.closest('.topo-abs-node');
                    if (!absNode) return;
                    if (!allowedIds.has(nodeId)) {
                        absNode.remove();
                    }
                });

                // ===== ADD PORT STATUS DETAIL TO SWITCH/SERVER NODES =====
                clone.querySelectorAll('.topo-node:not(.placeholder-node)').forEach(el => {
                    const nodeId = String(el.dataset.id || '');
                    const node = TOPO_NODES.find(n => String(n.id) === nodeId);
                    if (!node) return;

                    const kategoriLower = (node.kategori || '').toLowerCase();
                    const hasPort = (kategoriLower.includes('switch') || kategoriLower.includes('server') ||
                        kategoriLower.includes('router'));
                    const totalPort = Number(node.jumlah_port || 0);
                    if (!hasPort || totalPort <= 0) return;

                    // Build per-port status map
                    const children = TOPO_NODES.filter(c => String(c.parent) === String(node.id));

                    const portStatusMap = {}; // port number -> { status, name }

                    children.forEach(c => {
                        if (c.port) {
                            const portNum = String(c.port);
                            if (c.port_status === 'rusak' || (c.kategori || '').toLowerCase().includes(
                                    'rusak')) {
                                portStatusMap[portNum] = {
                                    status: 'rusak',
                                    name: c.name || ''
                                };
                            } else {
                                portStatusMap[portNum] = {
                                    status: 'terpakai',
                                    name: c.name || ''
                                };
                            }
                        }
                    });

                    // Build compact port grid showing ALL ports
                    const portGrid = document.createElement('div');
                    portGrid.className = 'port-indicator-container';
                    portGrid.style.cssText = `
                display: flex;
                gap: 2px;
                justify-content: center;
                margin-top: 4px;
                flex-wrap: wrap;
                max-width: 200px;
            `;

                    let portChipsHtml = '';
                    for (let p = 1; p <= totalPort; p++) {
                        const pStr = String(p);
                        const info = portStatusMap[pStr];
                        let bgColor, textColor, borderStyle, icon;

                        if (info && info.status === 'rusak') {
                            bgColor = '#fff0f2';
                            textColor = '#f5365c';
                            borderStyle = '1px dashed #f5365c';
                            icon = '×';
                        } else if (info && info.status === 'terpakai') {
                            bgColor = '#e8faf0';
                            textColor = '#2dce89';
                            borderStyle = '1px solid #2dce89';
                            icon = '✓';
                        } else {
                            bgColor = '#f0f2f5';
                            textColor = '#8392ab';
                            borderStyle = '1px dashed #c8cfd8';
                            icon = '';
                        }

                        portChipsHtml +=
                            `<span style="display:inline-flex;align-items:center;gap:1px;padding:0px 3px;border-radius:2px;font-size:6px;font-weight:600;background:${bgColor};color:${textColor};border:${borderStyle};line-height:1.4;" title="Port ${pStr}${info ? ': ' + info.name : ' (Kosong)'}">${icon}${pStr}</span>`;
                    }

                    portGrid.innerHTML = portChipsHtml;
                    el.appendChild(portGrid);
                });

                // ===== HITUNG BOUNDING BOX RIIL (STANDARISASI UKURAN CETAK) =====
                const contentGroupClone = clone.querySelector('.topo-content-group');
                if (contentGroupClone) {
                    let minX = Infinity,
                        maxX = -Infinity;
                    let minY = Infinity,
                        maxY = -Infinity;

                    // Loop pada sisa node yang tidak di-remove
                    contentGroupClone.querySelectorAll('.topo-abs-node').forEach(absNode => {
                        if (absNode.style.display !== 'none' && !absNode.classList.contains('search-hidden')) {
                            const left = parseFloat(absNode.style.left) || 0;
                            const top = parseFloat(absNode.style.top) || 0;
                            const width = parseFloat(absNode.style.width) || 200;
                            const height = parseFloat(absNode.style.height) || 120;

                            if (left < minX) minX = left;
                            if (left + width > maxX) maxX = left + width;
                            if (top < minY) minY = top;
                            if (top + height > maxY) maxY = top + height;
                        }
                    });

                    if (minX !== Infinity && minY !== Infinity) {
                        const padding = 50;
                        const newWidth = (maxX - minX) + (padding * 2);
                        const newHeight = (maxY - minY) + (padding * 2);

                        // Auto-Resize Container
                        const treeClone = clone.querySelector('.topo-tree');
                        if (treeClone) {
                            treeClone.style.minWidth = '0';
                            treeClone.style.width = `${newWidth}px`;
                            treeClone.style.height = `${newHeight}px`;
                        }

                        // Reset Offset Sementara (menimpa transform dari recenterDiagram di layar aktif)
                        // Membawa koordinat (minX, minY) ke (padding, padding)
                        contentGroupClone.style.transform =
                            `translate(${-minX + padding}px, ${-minY + padding}px) scale(1)`;
                    }
                }

                diagramWrapper.appendChild(clone);
                printable.appendChild(diagramWrapper);

                // ===== COMPACT PORT LEGEND (1 line) =====
                const portLegend = document.createElement('div');
                portLegend.style.cssText = `
            display: flex;
            gap: 14px;
            align-items: center;
            font-size: 10px;
            color: #8392ab;
            padding: 8px 10px;
            width: 100%;
        `;
                portLegend.innerHTML = `
            <span style="font-weight:700;color:#344767;">Status Port:</span>
            <span style="display:flex;align-items:center;gap:3px;"><span style="width:10px;height:10px;border-radius:2px;background:#e8faf0;border:1.5px solid #2dce89;display:inline-block;"></span> Terpakai</span>
            <span style="display:flex;align-items:center;gap:3px;"><span style="width:10px;height:10px;border-radius:2px;background:#f0f2f5;border:1.5px dashed #c8cfd8;display:inline-block;"></span> Tersedia</span>
            <span style="display:flex;align-items:center;gap:3px;"><span style="width:10px;height:10px;border-radius:2px;background:#fff0f2;border:1.5px dashed #f5365c;display:inline-block;"></span> Rusak</span>
        `;
                printable.appendChild(portLegend);

                // ===== PAGE FOOTER (optional) =====
                if (this.showHeaderFooter) {
                    const footerSignature = document.createElement('div');
                    footerSignature.style.cssText = `
                text-align: center;
                font-size: 10px;
                color: #999;
                padding-top: 8px;
                margin-top: 10px;
                border-top: 1px solid #e0e0e0;
                width: 100%;
            `;
                    footerSignature.innerHTML = `
                Dokumen ini dicetak oleh Sistem MSJ Topology | ${dateStr} ${timeStr} WIB
            `;
                    printable.appendChild(footerSignature);
                }

                document.body.appendChild(printable);


                // Convert to PDF using html2canvas & jsPDF
                setTimeout(() => {
                    html2canvas(printable, {
                        scale: 2, // Higher resolution for better quality
                        useCORS: true,
                        logging: false,
                        backgroundColor: '#ffffff'
                    }).then(canvas => {
                        const imgData = canvas.toDataURL('image/jpeg', 0.95);
                        const {
                            jsPDF
                        } = window.jspdf;

                        const isLandscape = this.orientation === 'landscape';
                        const pdf = new jsPDF({
                            orientation: this.orientation,
                            unit: 'mm',
                            format: 'a4'
                        });

                        // A4 dimensions
                        const pdfWidth = isLandscape ? 297 : 210;
                        const pdfHeight = isLandscape ? 210 : 297;
                        const margin = 10;
                        const contentWidth = pdfWidth - (margin * 2);
                        const contentHeight = pdfHeight - (margin * 2);

                        const imgRatio = canvas.width / canvas.height;
                        let printWidth = contentWidth;
                        let printHeight = printWidth / imgRatio;

                        // Add first page
                        pdf.addImage(imgData, 'JPEG', margin, margin, printWidth, printHeight);

                        // Multi-page pagination
                        let heightLeft = printHeight - contentHeight;
                        let position = margin - contentHeight;

                        while (heightLeft > 0) {
                            pdf.addPage();
                            pdf.addImage(imgData, 'JPEG', margin, position, printWidth, printHeight);
                            heightLeft -= contentHeight;
                            position -= contentHeight;
                        }

                        // Output and cleanup
                        const blob = pdf.output('blob');
                        const blobUrl = URL.createObjectURL(blob);

                        // Open the PDF
                        window.open(blobUrl, '_blank');
                    }).catch(err => {
                        console.error("PDF generation error:", err);
                        alert("Terjadi kesalahan saat membuat PDF.");
                    }).finally(() => {
                        if (btn) {
                            btn.innerHTML = originalBtnHtml;
                            btn.disabled = false;
                        }
                        this.cleanupPrintableArea();
                    });
                }, 300); // Give DOM a brief moment to stabilize
            }
        };

        // ========== TREE LAYOUT ENGINE (JavaScript Array Contour / max_X_per_depth) ==========
        const TreeLayout = {
            // 1. HARDCODE LOGICAL SIZE - Semua node diperlakukan seragam (termasuk dummy Port Kosong)
            NODE_W: 200,
            NODE_H: 160,
            RACK_W: 240, // Hanya root server yang boleh lebih lebar
            PORT_BADGE_H: 28,
            GAP_X: 24,
            LEVEL_GAP: 80,

            calculate(roots) {
                let mainRoot = null;
                let layer2Y = this.NODE_H + this.LEVEL_GAP;

                // Deteksi Main Server untuk fallback layer2Y di Global View
                if (typeof IS_MAIN_SERVER !== 'undefined' && IS_MAIN_SERVER && roots.length > 0) {
                    let maxDescendants = -1;
                    const countDescendants = (n) => {
                        let count = (n.children || []).length;
                        (n.children || []).forEach(c => count += countDescendants(c));
                        return count;
                    };
                    roots.forEach(r => {
                        let count = countDescendants(r);
                        if (count > maxDescendants) {
                            maxDescendants = count;
                            mainRoot = r;
                        }
                    });
                    if (mainRoot) {
                        let nodeH = this.NODE_H;
                        const k = (mainRoot.kategori || '').toLowerCase();
                        if (k.includes('server')) nodeH = this.NODE_H + 60;
                        if (mainRoot.is_gateway) nodeH = Math.max(nodeH, 172);
                        layer2Y = nodeH + this.LEVEL_GAP;
                    }
                }

                // Ekstrak orphans dan sisipkan di sebelah Gateway perwakilan gedungnya (berlaku global & per gedung)
                if (roots.length > 0) {
                    const trueRoots = [];
                    const orphanedNodes = [];

                    roots.forEach(r => {
                        const k = (r.kategori || '').toLowerCase();
                        const isMain = r.is_gateway || k.includes('switch') || k.includes('server') || k
                            .includes('router');

                        // Jika dia punya gedung dan bukan perangkat utama, kita anggap orphan
                        if (r.gedung && !isMain) {
                            r._hidden_connector = true;
                            orphanedNodes.push(r);
                        } else {
                            trueRoots.push(r);
                        }
                    });

                    if (orphanedNodes.length > 0) {
                        const orphanedByGedung = {};
                        orphanedNodes.forEach(n => {
                            const g = n.gedung || '';
                            if (!orphanedByGedung[g]) orphanedByGedung[g] = [];
                            orphanedByGedung[g].push(n);
                        });

                        const injectOrphans = (nodeArray) => {
                            const newArray = [];
                            nodeArray.forEach(node => {
                                newArray.push(node);

                                const g = node.gedung || '';
                                const linkG = node.link_gedung || '';
                                const sourceG = node.source_gedung_name || '';

                                // Pencocokan yang lebih tangguh untuk menemukan Gateway
                                let matchG = null;
                                if (g && orphanedByGedung[g]) matchG = g;
                                else if (linkG && orphanedByGedung[linkG]) matchG = linkG;
                                else if (sourceG && orphanedByGedung[sourceG]) matchG = sourceG;

                                if (matchG) {
                                    newArray.push(...orphanedByGedung[matchG]);
                                    delete orphanedByGedung[matchG];
                                }

                                if (node.children && node.children.length > 0) {
                                    node.children = injectOrphans(node.children);
                                }
                            });
                            return newArray;
                        };

                        const processedRoots = injectOrphans(trueRoots);

                        // Jika masih ada sisa orphan (tidak ketemu switch utamanya), taruh di ujung roots
                        Object.keys(orphanedByGedung).sort().forEach(g => {
                            const leftovers = orphanedByGedung[g];
                            if (typeof IS_MAIN_SERVER !== 'undefined' && IS_MAIN_SERVER) {
                                leftovers.forEach(n => n._fallback_layer2 =
                                    true); // Fallback jika tidak menemukan parent
                            }
                            processedRoots.push(...leftovers);
                        });

                        roots.length = 0;
                        roots.push(...processedRoots);
                    }
                }

                // Fase 1: Ukur depth & ukuran logis seragam
                roots.forEach(root => {
                    let startDepth = 1;
                    if (root._fallback_layer2) {
                        startDepth = 2; // Paksa ke layer 2 jika gagal disisipkan ke children (Global View)
                    }
                    this._measureSizes(root, startDepth, true);
                });

                // Fase 2: Layout presisi dengan Apportion (Slack Distribution)
                const dummyRoot = {
                    _depth: 0,
                    _x: 0,
                    _w: 0,
                    children: roots
                };
                this._layout(dummyRoot);

                // Fase 3: Normalisasi X agar tidak ada koordinat negatif
                let minX = Infinity;
                this._walkAll(roots, node => {
                    if (node._x < minX) minX = node._x;
                });
                this._walkAll(roots, node => {
                    node._x -= minX;
                });

                // Fase 4: Assign koordinat Y (Depth-based)
                roots.forEach(root => {
                    let startY = 0;
                    if (root._fallback_layer2) {
                        startY = layer2Y;
                    }
                    this._assignY(root, startY);
                });

                // Hitung total Bounding Box Canvas
                let maxRight = 0,
                    maxBottom = 0;
                this._walkAll(roots, node => {
                    maxRight = Math.max(maxRight, node._x + node._w);
                    maxBottom = Math.max(maxBottom, node._y + node._h);
                });

                return {
                    width: maxRight + 20,
                    height: maxBottom + 20
                };
            },

            _layout(node) {
                const children = node.children || [];
                children.forEach(c => this._layout(c));

                if (children.length === 0) {
                    node._x = 0;
                    return;
                }

                // Pastikan subtree anak pertama dimulai persis di X=0 dengan menggeser seluruh isinya
                if (children[0]._x !== 0) {
                    this._shiftTree(children[0], -children[0]._x);
                }

                for (let i = 1; i < children.length; i++) {
                    // Reset subtree anak ke-i ke posisi 0 relatif terhadap parent sebelum dikalkulasi
                    if (children[i]._x !== 0) {
                        this._shiftTree(children[i], -children[i]._x);
                    }

                    let maxShift = 0;
                    let centerNodeIndex = i - 1;

                    const lContour = this._getRelativeContour(children[i], 'left');

                    for (let j = 0; j < i; j++) {
                        const rContour = this._getRelativeContour(children[j], 'right');

                        let shift = 0;
                        // Cek tabrakan kontur di setiap kedalaman (depth)
                        for (const [depth, leftVal] of lContour) {
                            if (rContour.has(depth)) {
                                shift = Math.max(shift, rContour.get(depth) + this.GAP_X - leftVal);
                            }
                        }

                        // Jaminan jarak minimal terhadap sibling yang tepat berada di sebelahnya
                        if (j === i - 1) {
                            shift = Math.max(shift, (children[j]._x + children[j]._w) + this.GAP_X - children[i]._x);
                        }

                        if (shift > maxShift) {
                            maxShift = shift;
                            centerNodeIndex = j; // Menyimpan index node yang menyebabkan shift terbesar
                        }
                    }

                    // Geser node ini sejauh ruang yang dibutuhkan untuk menghindari tabrakan
                    this._shiftTree(children[i], maxShift);

                    // APPORTION / SLACK DISTRIBUTION
                    // Jika node ini digeser karena menabrak sibling yang jauh (bukan j = i - 1),
                    // maka distribusikan ruang kosong (slack) secara merata pada sibling-sibling di tengahnya.
                    const nodesToDistribute = i - centerNodeIndex - 1;
                    if (nodesToDistribute > 0) {
                        const startX = children[centerNodeIndex]._x;
                        const endX = children[i]._x;
                        const step = (endX - startX) / (nodesToDistribute + 1);

                        for (let k = 1; k <= nodesToDistribute; k++) {
                            const targetX = startX + k * step;
                            const child = children[centerNodeIndex + k];
                            const move = targetX - child._x;
                            this._shiftTree(child, move);
                        }
                    }
                }

                // FINAL PARENT CENTERING
                // Paksa koordinat X Parent harus persis di tengah anak pertama dan terakhir
                const firstCx = children[0]._x + children[0]._w / 2;
                const lastCx = children[children.length - 1]._x + children[children.length - 1]._w / 2;
                node._x = (firstCx + lastCx) / 2 - node._w / 2;
            },

            _getRelativeContour(node, side) {
                const contour = new Map();
                const baseDepth = node._depth;

                const walk = (n) => {
                    const d = n._depth - baseDepth;
                    const val = side === 'left' ? n._x : (n._x + n._w);

                    if (!contour.has(d)) {
                        contour.set(d, val);
                    } else {
                        if (side === 'left') {
                            contour.set(d, Math.min(contour.get(d), val));
                        } else {
                            contour.set(d, Math.max(contour.get(d), val));
                        }
                    }
                    (n.children || []).forEach(walk);
                };
                walk(node);
                return contour;
            },

            _measureSizes(node, depth, isRoot) {
                node._depth = depth;
                node._isRoot = isRoot;

                // TETAPKAN UKURAN LOGICAL SECARA PAKSA
                // Semua node (termasuk dummy port) harus memiliki ukuran width yang sama
                node._w = this.NODE_W;
                node._h = this.NODE_H;

                const k = (node.kategori || '').toLowerCase();
                if (isRoot && k.includes('server')) {
                    node._w = this.RACK_W;
                    node._h = this.NODE_H + 60;
                }
                if (node.is_gateway) {
                    node._h = Math.max(node._h, 172);
                }

                (node.children || []).forEach(child => this._measureSizes(child, depth + 1, false));
            },

            // ===== Tree helpers =====

            _shiftTree(node, dx) {
                node._x += dx;
                (node.children || []).forEach(c => this._shiftTree(c, dx));
            },

            _getMinX(node) {
                let minX = node._x;
                (node.children || []).forEach(c => {
                    minX = Math.min(minX, this._getMinX(c));
                });
                return minX;
            },

            _getMaxRight(node) {
                let maxR = node._x + node._w;
                (node.children || []).forEach(c => {
                    maxR = Math.max(maxR, this._getMaxRight(c));
                });
                return maxR;
            },

            _assignY(node, y) {
                node._y = y;
                const portBadgeH = (!node._isRoot && node.port) ? this.PORT_BADGE_H : 0;
                const childY = y + node._h + portBadgeH + this.LEVEL_GAP;
                (node.children || []).forEach(child => {
                    this._assignY(child, childY);
                });
            },

            // ===== SVG Connector paths =====

            getConnectorPaths(roots) {
                const paths = [];
                this._walkAll(roots, node => {
                    const allChildren = node.children || [];
                    // Filter out children that are designated as the uplink port of the current node
                    // so we don't draw a downstream line from this node to its own uplink port!
                    const children = allChildren.filter(c => !c._hidden_connector);
                    if (children.length === 0) return;

                    // Math.round diterapkan di akhir untuk memastikan koordinat presisi
                    const parentCx = Math.round(node._x + node._w / 2);
                    const parentBottom = Math.round(node._y + (node.port && !node._isRoot ? this.PORT_BADGE_H :
                        0) + node._h);

                    const getChildTarget = (child) => {
                        return {
                            cx: Math.round(child._x + child._w / 2),
                            top: Math.round(child._y)
                        };
                    };

                    if (children.length === 1) {
                        const child = children[0];
                        const target = getChildTarget(child);
                        const midY = Math.round((parentBottom + target.top) / 2);
                        paths.push(
                            `M${parentCx},${parentBottom} L${parentCx},${midY} L${target.cx},${midY} L${target.cx},${target.top}`
                        );
                    } else {
                        const midY = Math.round(parentBottom + this.LEVEL_GAP / 2);
                        paths.push(`M${parentCx},${parentBottom} L${parentCx},${midY}`);

                        const firstTarget = getChildTarget(children[0]);
                        const lastTarget = getChildTarget(children[children.length - 1]);
                        paths.push(`M${firstTarget.cx},${midY} L${lastTarget.cx},${midY}`);

                        children.forEach(child => {
                            const target = getChildTarget(child);
                            paths.push(`M${target.cx},${midY} L${target.cx},${target.top}`);
                        });
                    }
                });
                return paths;
            },

            _walkAll(roots, fn) {
                const walk = (node) => {
                    fn(node);
                    (node.children || []).forEach(walk);
                };
                roots.forEach(walk);
            }
        };

        // ========== TOPOLOGY RENDERER ==========
        const Topo = {
            compareNodesByPort(a, b) {
                const portA = a.port ? parseInt(a.port, 10) : Infinity;
                const portB = b.port ? parseInt(b.port, 10) : Infinity;
                if (portA !== portB) return portA - portB;

                const idA = Number(a.id);
                const idB = Number(b.id);
                if (Number.isFinite(idA) && Number.isFinite(idB)) {
                    return idA - idB;
                }

                return String(a.id || '').localeCompare(String(b.id || ''));
            },

            buildTree(nodes, parentId) {
                return nodes
                    .filter(n => {
                        if (parentId === null) {
                            if (n.parent == null) return true;
                            const parentExists = nodes.some(p => p.id == n.parent);
                            return !parentExists;
                        }
                        return n.parent == parentId;
                    })
                    .sort((a, b) => this.compareNodesByPort(a, b))
                    .map(n => ({
                        ...n,
                        children: this.buildTree(nodes, n.id)
                    }));
            },

            getFilterType(kategori) {
                return getTopologyFilterKey(kategori);
            },

            getIcon(kategori, kategoriIcon = null) {
                if (kategoriIcon) {
                    let iconClass = kategoriIcon.trim();
                    if (iconClass === 'fa-x') iconClass = 'fa-times-circle';
                    if (!iconClass.startsWith('fa-')) iconClass = `fa-${iconClass}`;
                    return `<i class="fas ${iconClass} fa-2x"></i>`;
                }

                const k = (kategori || '').toLowerCase();
                if (k.includes('server')) return '<i class="fas fa-server fa-2x"></i>';
                if (k.includes('switch')) return '<i class="fas fa-network-wired fa-2x"></i>';
                if (k.includes('cpu') || k.includes('pc') || k.includes('computer'))
                    return '<i class="fas fa-desktop fa-2x"></i>';
                if (k.includes('printer')) return '<i class="fas fa-print fa-2x"></i>';
                if (k.includes('monitor')) return '<i class="fas fa-tv fa-2x"></i>';
                if (k.includes('scanner')) return '<i class="fas fa-barcode fa-2x"></i>';
                if (k.includes('rusak')) return '<i class="fas fa-times-circle fa-2x"></i>';
                return '<i class="fas fa-microchip fa-2x"></i>';
            },

            esc(str) {
                const d = document.createElement('div');
                d.textContent = str || '';
                return d.innerHTML;
            },

            getRackInfo(node) {
                const kategoriRaw = String(node?.kategori || '').trim();
                const kategoriLower = kategoriRaw.toLowerCase();
                const isServerKategori = kategoriLower.includes('server');

                if (!isServerKategori) {
                    return null;
                }

                const locationRaw = String(node?.location || node?.area || '').trim();
                const gedung = String(node?.gedung || '').trim();

                return {
                    label: 'Rak Server',
                    footer: gedung ?
                        (locationRaw ? `Gedung ${gedung} - ${locationRaw}` : `Gedung ${gedung}`) : (locationRaw ||
                            'Server'),
                };
            },

            isRackNode(node, isRoot) {
                if (!isRoot || !SHOW_RACK) return false;
                return !!this.getRackInfo(node);
            },

            isSwitchNode(node) {
                return String(node?.kategori || '').toLowerCase().includes('switch');
            },

            // Render a single node card HTML (reused for all node types)
            renderNodeCard(node, isRoot, showPort) {
                // Placeholder (empty port) rendering
                if (node.is_placeholder) {
                    return this.renderPlaceholderCard(node);
                }

                const filterType = this.getFilterType(node.kategori);
                let html = '';

                const kLower = (node.kategori || '').toLowerCase();
                const nLower = (node.name || '').toLowerCase();
                const isRusakNode = kLower.includes('rusak') || nLower.includes('rusak') || node.port_status ===
                    'rusak';
                const normalizeRusakLabel = (text, fallback = '') => {
                    const raw = String(text || '').trim();
                    const normalized = raw.replace(/perangkat\s+rusak/ig, 'Port Rusak').trim();
                    if (normalized) return normalized;
                    return fallback;
                };
                const displayName = isRusakNode ?
                    normalizeRusakLabel(node.name, 'Port Rusak') :
                    String(node.name || '');
                const gwClass = node.is_gateway ? ' gateway-node' : '';
                const rusakClass = isRusakNode ? ' rusak-node' : '';
                const isOrphaned = node.is_orphaned === true;
                const orphanedClass = isOrphaned ? ' orphaned-node' : '';

                let searchClass = '';
                if (Topo.searchState && Topo.searchState.active) {
                    if (Topo.searchState.matchIds && Topo.searchState.matchIds.has(String(node.id))) {
                        searchClass = ' search-match';
                    } else {
                        searchClass = ' search-path is-path-only';
                    }
                }

                const nodeOnClick = isOrphaned ?
                    `Topo.onOrphanedClick(${node.id}, event)` :
                    `Topo.onNodeClick(${node.id}, event)`;
                html +=
                    `<div class="topo-node ${isRoot ? 'root-node' : ''}${gwClass}${rusakClass}${orphanedClass}${searchClass}" data-id="${node.id}" data-filter-type="${filterType}" data-gedung="${this.esc(node.gedung || '')}" data-area="${this.esc(node.area || '')}" onclick="${nodeOnClick}">`;

                if (node.is_gateway && node.source_gedung_name) {
                    html +=
                        `<div class="gateway-badge"><i class="fas fa-arrow-right-long me-1"></i>Dari ${this.esc(node.source_gedung_name)}</div>`;
                }

                // Orphaned warning badge (exclamation icon)
                if (isOrphaned) {
                    html +=
                        `<div class="orphaned-warning-badge" title="Perangkat tidak aktif di Master Aset"><i class="fas fa-exclamation"></i></div>`;
                }

                html += `<div class="node-icon">${this.getIcon(node.kategori, node.kategori_icon)}</div>`;
                html += `<div class="node-name">${this.esc(displayName)}</div>`;
                const masterArea = (node.master_lokasi || '').trim();
                const deviceLocation = (node.area || '').trim();
                if (node.user_name) {
                    html +=
                        `<div class="node-type"><i class="fas fa-user me-1" style="color:#5e72e4;"></i>${this.esc(node.user_name)}</div>`;
                    if (deviceLocation) {
                        html +=
                            `<div class="node-area"><i class="fas fa-location-dot me-1"></i>${this.esc(deviceLocation)}</div>`;
                    }
                } else {
                    if (masterArea) {
                        html +=
                            `<div class="node-type"><i class="fas fa-map-marker-alt me-1" style="color:#fb6340;"></i>${this.esc(masterArea)}</div>`;
                    }
                    if (deviceLocation && deviceLocation !== masterArea) {
                        html +=
                            `<div class="node-area"><i class="fas fa-location-dot me-1"></i>${this.esc(deviceLocation)}</div>`;
                    } else if (!masterArea && !deviceLocation) {
                        const displayKategori = isRusakNode ?
                            normalizeRusakLabel(node.kategori, 'Port Rusak') :
                            String(node.kategori || '');
                        html += `<div class="node-type">${this.esc(displayKategori)}</div>`;
                    }
                }
                if (node.ip) html +=
                    `<div class="node-ip"><i class="fas fa-at text-xs"></i> ${this.esc(node.ip)}</div>`;
                if (!isRoot && node.uplink_port) {
                    html +=
                        `<div class="node-uplink-indicator" title="Port Sumber (Input Jaringan): Port ${this.esc(node.uplink_port)}"><i class="fas fa-arrow-down-long text-success"></i>Port ${this.esc(node.uplink_port)}</div>`;
                }
                if (node.link_gedung_name && !node.is_gateway) {
                    html +=
                        `<a href="${getTopologyUrlByGedung(node.link_gedung)}" class="topo-link-badge" onclick="event.stopPropagation()">-> ${this.esc(node.link_gedung_name)}</a>`;
                }
                if (node.is_gateway) {
                    html +=
                        `<a href="${getTopologyUrlByGedung(node.gedung)}" class="topo-link-badge gateway-link" onclick="event.stopPropagation()"><- Lihat di ${this.esc(node.source_gedung_name || node.gedung)}</a>`;
                }
                html += `</div>`;
                return html;
            },

            // Render an empty port placeholder card
            renderPlaceholderCard(node) {
                const isRusak = node.port_status === 'rusak';
                const isUplink = node.is_uplink === true || node.port_status === 'uplink';
                const isVirtual = !!node.is_virtual;

                let cardClass = '';
                if (isRusak) {
                    cardClass = ' placeholder-rusak';
                } else if (isUplink) {
                    cardClass = ' placeholder-uplink';
                }

                let html = '';
                const clickArg = isVirtual ? `'${String(node.id)}'` : node.id;
                const clickAttr = isUplink ? 'onclick="event.stopPropagation()"' :
                    `onclick="Topo.onPlaceholderClick(${clickArg}, event)"`;

                html +=
                    `<div class="topo-node placeholder-node${cardClass}" data-id="${this.esc(String(node.id))}" data-port="${this.esc(node.port)}" data-parent="${this.esc(String(node.parent || ''))}" data-gedung="${this.esc(node.gedung || '')}" data-area="${this.esc(node.area || '')}" data-port-status="${node.port_status || 'normal'}" ${clickAttr}>`;

                if (isRusak) {
                    html +=
                        `<div class="node-icon">${this.getIcon(node.kategori || 'rusak', node.kategori_icon)}</div>`;
                    const rusakLabel = String(node.kategori || 'Rusak').replace(/perangkat\s+rusak/ig, 'Port Rusak');
                    html +=
                        `<div class="node-name">Port ${this.esc(node.port)} <span style="font-size:0.6rem; color:#f5365c;">(${this.esc(rusakLabel)})</span></div>`;
                    const ket = node.keterangan || '';
                    if (ket) {
                        html +=
                            `<div class="placeholder-hint" style="color:#f5365c; font-style:italic;"><i class="fas fa-info-circle me-1"></i>${this.esc(ket)}</div>`;
                    } else {
                        html +=
                            `<div class="placeholder-hint"><i class="fas fa-exclamation-triangle me-1"></i>Port rusak</div>`;
                    }
                } else if (isUplink) {
                    html += `<div class="node-icon"><i class="fas fa-arrow-down fa-2x"></i></div>`;
                    html += `<div class="node-name">Port ${this.esc(node.port)} (Uplink)</div>`;
                    html +=
                        `<div class="placeholder-hint"><i class="fas fa-link me-1"></i>Jalur Masuk dari Parent</div>`;
                } else {
                    html += `<div class="node-icon"><i class="fas fa-plus-circle fa-2x"></i></div>`;
                    html += `<div class="node-name">Port ${this.esc(node.port)}</div>`;
                    html +=
                        `<div class="placeholder-hint"><i class="fas fa-mouse-pointer me-1"></i>Klik untuk isi</div>`;
                }

                // Port status toggle buttons (only for admin and not uplink)
                if (AUTHORIZE_EDIT && !isVirtual && !isUplink) {
                    html += `<div class="port-status-actions">`;
                    if (isRusak) {
                        html +=
                            `<button class="btn btn-sm btn-outline-success" onclick="Topo.togglePortStatus(${node.id}, event)" title="Pulihkan port ini ke status normal"><i class="fas fa-check-circle me-1"></i>Pulihkan</button>`;
                    } else {
                        html +=
                            `<button class="btn btn-sm btn-outline-secondary" onclick="Topo.togglePortStatus(${node.id}, event)" title="Tandai port ini sebagai rusak"><i class="fas fa-ban me-1"></i>Tandai Rusak</button>`;
                    }
                    html += `</div>`;
                }

                html += `</div>`;
                return html;
            },

            /**
             * Render a single positioned node (used in flat layout).
             * Returns HTML for one .topo-abs-node div.
             */
            renderPositionedNode(node) {
                const isRoot = node._isRoot;
                const depth = node._depth || 1;
                const rackInfo = this.getRackInfo(node);
                const inRack = isRoot && SHOW_RACK && !!rackInfo;
                const parentId = node.parent != null ? node.parent : '';

                // Force explicit width/height to match layout calculations and prevent overlaps
                const portBadgeH = (!isRoot && node.port) ? TreeLayout.PORT_BADGE_H : 0;
                const totalH = node._h + portBadgeH;

                const hasChildren = node.children && node.children.length > 0;

                let html = `
                    <div
                        class="topo-abs-node${hasChildren ? ' node-has-children' : ''}"
                        data-id="${node.id}"
                        data-parent-id="${parentId}"
                        data-port="${node.port || ''}"
                        data-is-virtual="${node.is_virtual ? '1' : '0'}"
                        data-depth="${depth}"
                        draggable="${AUTHORIZE_EDIT && !isRoot && !node.is_virtual ? 'true' : 'false'}"
                        style="
                            left: ${Math.round(node._x)}px;
                            top: ${Math.round(node._y)}px;
                            width: ${node._w}px;
                            height: ${totalH}px;
                        "
                    >`;
                html += `<div class="topo-node-wrap" data-depth="${depth}">`;

                // Port badge (not for root)
                if (!isRoot && node.port) {
                    const kLower = (node.kategori || '').toLowerCase();
                    const nLower = (node.name || '').toLowerCase();
                    const isRusakNode = kLower.includes('rusak') || nLower.includes('rusak') || node.port_status ===
                        'rusak';
                    html +=
                        `<div class="text-center mb-1"><span class="topo-port-badge${isRusakNode ? ' port-rusak' : ''}"><i class="fas fa-ethernet"></i> Port ${this.esc(node.port)}</span></div>`;
                }

                // Rack wrapper open
                if (inRack) {
                    html += `<div class="rack-wrapper">`;
                    html +=
                        `<div class="rack-wrapper-label"><i class="fas fa-server me-1"></i>${this.esc(rackInfo.label)}</div>`;
                    html +=
                        `<div class="rack-leds"><span class="rack-led led-green"></span><span class="rack-led led-amber"></span></div>`;
                }

                html += this.renderNodeCard(node, isRoot, true);

                // Rack wrapper close
                if (inRack) {
                    html +=
                        `<div class="rack-wrapper-footer"><i class="fas fa-building me-1"></i>${this.esc(rackInfo.footer)}</div>`;
                    html += `</div>`;
                }

                html += `</div>`; // end topo-node-wrap
                html += `</div>`; // end topo-abs-node
                return html;
            },

            render() {
                const canvas = document.getElementById('topo-canvas');

                // No companion maps needed - all nodes are normal tree siblings now
                const baseNodes = TOPO_NODES.map(n => ({
                    ...n
                }));
                let allNodes = SHOW_EMPTY_PORTS ? [...baseNodes] :
                    baseNodes.filter(n => !((n.is_placeholder === true || n.is_placeholder === '1') && (n.port_status ||
                        'normal') === 'normal'));

                if (true) {
                    const parentNodes = baseNodes.filter(n => {
                        const k = (n.kategori || '').toLowerCase();
                        return (strContainsPortCategory(k) && Number(n.jumlah_port || 0) > 0);
                    });

                    parentNodes.forEach(parent => {
                        const totalPort = Number(parent.jumlah_port || 0);
                        if (!Number.isFinite(totalPort) || totalPort <= 0) return;

                        const parentLinkGedung = String(parent.link_gedung || '').trim().toUpperCase();
                        const parentGedung = String(parent.gedung || '').trim().toUpperCase();
                        if (parentLinkGedung && CURRENT_VIEW_GEDUNG && parentLinkGedung !==
                            CURRENT_VIEW_GEDUNG && parentLinkGedung !== parentGedung) {
                            return;
                        }

                        const occupied = new Set(
                            baseNodes
                            .filter(c => String(c.parent) === String(parent.id) && c.port)
                            .map(c => String(c.port))
                        );

                        for (let p = 1; p <= totalPort; p++) {
                            const port = String(p);
                            if (occupied.has(port)) continue;

                            const isUplinkPort = (parent.parent && parent.uplink_port && String(parent
                                .uplink_port) === port);

                            if (!SHOW_EMPTY_PORTS && !isUplinkPort) continue;

                            allNodes.push({
                                id: `virtual-${parent.id}-${port}`,
                                name: isUplinkPort ? `Port ${port} (Uplink)` : `Port ${port} (Kosong)`,
                                kategori: null,
                                kategori_icon: null,
                                parent: parent.id,
                                port,
                                ip: null,
                                link_gedung: null,
                                link_gedung_name: '',
                                gedung: parent.gedung,
                                location: parent.location || '',
                                area: parent.area || parent.location || '',
                                keterangan: '',
                                enc_id: null,
                                is_gateway: false,
                                jumlah_port: null,
                                is_placeholder: true,
                                is_virtual: true,
                                is_uplink: isUplinkPort,
                                port_status: isUplinkPort ? 'uplink' : 'normal',
                                user_name: null,
                                master_lokasi: null,
                            });
                        }
                    });
                }

                function strContainsPortCategory(k) {
                    return k.includes('switch') || k.includes('server') || k.includes('router');
                }

                if (Topo.searchState && Topo.searchState.active) {
                    allNodes = allNodes.filter(n => {
                        if (n.is_virtual) {
                            return Topo.searchState.matchIds.has(String(n.parent));
                        }
                        return Topo.searchState.visibleIds.has(String(n.id));
                    });
                }

                this._renderedNodes = allNodes;

                const tree = this.buildTree(allNodes, null);

                if (tree.length === 0) {
                    canvas.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-network-wired"></i>
                    <h5>Belum Ada Perangkat</h5>
                    <p class="text-sm">Klik tombol <strong>"+ Tambah"</strong> untuk menambahkan perangkat baru ke topologi ini</p>
                </div>`;
                    return;
                }

                const dims = TreeLayout.calculate(tree);

                // Build flat HTML with absolute positioning
                let nodesHtml = '';
                TreeLayout._walkAll(tree, node => {
                    nodesHtml += this.renderPositionedNode(node);
                });

                // Build SVG connectors
                const connectorPaths = TreeLayout.getConnectorPaths(tree);
                let svgHtml =
                    `<svg class="topo-connectors-svg" width="${dims.width}" height="${dims.height}" viewBox="0 0 ${dims.width} ${dims.height}" style="position:absolute; top:0; left:0; overflow:visible;">`;
                connectorPaths.forEach(d => {
                    svgHtml += `<path d="${d}"/>`;
                });
                svgHtml += `</svg>`;

                // Bungkus SVG dan Node ke dalam satu grup agar bisa di-translate secara bersamaan
                const contentGroupHtml =
                    `<div class="topo-content-group" style="position:absolute; top:0; left:0; width:${dims.width}px; height:${dims.height}px; transform-origin: top left; transition: transform 0.3s ease;">${svgHtml}${nodesHtml}</div>`;

                const treeHtml =
                    `<div class="topo-tree" style="min-width: 100%; width:${dims.width}px;height:${dims.height}px;position:relative;">${contentGroupHtml}</div>`;
                canvas.innerHTML = treeHtml;
                this.initPortDrag(canvas);

                // Store tree for layer guides and search
                this._currentTree = tree;
                this._currentDims = dims;

                this.renderLayerGuides(canvas);

                if (typeof window.recenterDiagram === 'function') {
                    window.recenterDiagram();
                }
            },

            renderLayerGuides(canvas) {
                const tree = canvas.querySelector('.topo-tree');
                if (!tree) return;

                tree.querySelectorAll(':scope > .layer-guides').forEach(el => el.remove());

                const wraps = Array.from(tree.querySelectorAll('.topo-node-wrap[data-depth]')).filter(wrap => {
                    const absNode = wrap.closest('.topo-abs-node');
                    if (absNode && absNode.classList.contains('search-hidden')) return false;
                    const rect = wrap.getBoundingClientRect();
                    return rect.width > 0 && rect.height > 0;
                });
                if (wraps.length === 0) return;

                const depthMap = new Map();

                wraps.forEach(wrap => {
                    const depth = parseInt(wrap.dataset.depth || '1', 10);
                    const rect = getRelativeRect(wrap, tree);
                    const top = rect.top - 10;
                    const bottom = rect.bottom + 10;

                    if (!depthMap.has(depth)) {
                        depthMap.set(depth, {
                            minTop: top,
                            maxBottom: bottom
                        });
                    } else {
                        const cur = depthMap.get(depth);
                        cur.minTop = Math.min(cur.minTop, top);
                        cur.maxBottom = Math.max(cur.maxBottom, bottom);
                    }
                });

                const rows = Array.from(depthMap.entries())
                    .map(([depth, bounds]) => ({
                        depth,
                        minTop: bounds.minTop,
                        maxBottom: bounds.maxBottom,
                    }))
                    .sort((a, b) => a.depth - b.depth);

                const treeHeight = Math.max(tree.scrollHeight, tree.offsetHeight, 1);

                const guides = document.createElement('div');
                guides.className = 'layer-guides';

                rows.forEach((row, index) => {
                    const prev = rows[index - 1];
                    const next = rows[index + 1];

                    let top = row.minTop;
                    let bottom = row.maxBottom;

                    if (prev) {
                        const upperBoundary = (prev.maxBottom + row.minTop) / 2;
                        top = Math.max(top, upperBoundary);
                    }
                    if (next) {
                        const lowerBoundary = (row.maxBottom + next.minTop) / 2;
                        bottom = Math.min(bottom, lowerBoundary);
                    }

                    if ((bottom - top) < 36) {
                        const center = (top + bottom) / 2;
                        top = center - 18;
                        bottom = center + 18;
                    }

                    top = Math.max(0, top);
                    bottom = Math.min(treeHeight, bottom);
                    if (bottom <= top) return;

                    const band = document.createElement('div');
                    band.className = 'layer-band';
                    band.style.top = `${Math.round(top)}px`;
                    band.style.height = `${Math.max(36, Math.round(bottom - top))}px`;

                    const title = document.createElement('span');
                    title.className = 'layer-title';
                    title.textContent = `Layer ${row.depth}`;
                    band.appendChild(title);

                    guides.appendChild(band);
                });

                tree.prepend(guides);
            },

            initPortDrag(canvas) {
                if (!AUTHORIZE_EDIT) return;

                let draggedNode = null;
                const wouldCreateCycle = (sourceId, destinationParentId) => {
                    let currentId = String(destinationParentId || '');
                    const sourceKey = String(sourceId || '');
                    const visited = new Set();

                    while (currentId && !visited.has(currentId)) {
                        if (currentId === sourceKey) return true;
                        visited.add(currentId);
                        const current = TOPO_NODES.find(node => String(node.id) === currentId);
                        currentId = current?.parent ? String(current.parent) : '';
                    }

                    return false;
                };

                canvas.querySelectorAll('.topo-abs-node').forEach(card => {
                  
                    card.addEventListener('dragstart', event => {
                        if (this.portMoveInProgress) {
                            event.preventDefault();
                            return;
                        }

                        const isVirtual =
                            card.dataset.isVirtual === '1';

                        // Port kosong tidak boleh menjadi sumber drag
                        if (isVirtual) {
                            event.preventDefault();
                            return;
                        }

                        draggedNode = {
                            element: card,
                            id: card.dataset.id,
                            parentId: card.dataset.parentId,
                            port: card.dataset.port
                        };

                        card.classList.add('topo-dragging');

                        event.dataTransfer.effectAllowed = 'move';
                        event.dataTransfer.setData(
                            'text/plain',
                            card.dataset.id
                        );
                    });

                    /*
                    |--------------------------------------------------------------------------
                    | Card dilewati saat drag
                    |--------------------------------------------------------------------------
                    */
                    card.addEventListener('dragover', event => {
                        if (!draggedNode) {
                            return;
                        }

                        const targetNode = TOPO_NODES.find(node => String(node.id) === String(card
                            .dataset.id));
                        const isSwitchTarget = card.dataset.isVirtual !== '1' && Number(targetNode
                            ?.jumlah_port || 0) > 0;
                        const targetParentId = isSwitchTarget ? card.dataset.id : card.dataset.parentId;
                        const isCrossSwitch = String(draggedNode.parentId) !== String(targetParentId);

                        if (wouldCreateCycle(draggedNode.id, targetParentId)) {
                            event.dataTransfer.dropEffect = 'none';
                            return;
                        }

                        // Lintas switch boleh menuju port kosong atau langsung ke card switch.
                        if (isCrossSwitch && card.dataset.isVirtual !== '1' && !isSwitchTarget) {
                            event.dataTransfer.dropEffect = 'none';
                            return;
                        }

                        event.preventDefault();
                        event.dataTransfer.dropEffect = 'move';

                        card.classList.add('topo-drop-target');
                    });

                    card.addEventListener('dragleave', () => {
                        card.classList.remove('topo-drop-target');
                    });

                    /*
                    |--------------------------------------------------------------------------
                    | Drop ke port tujuan
                    |--------------------------------------------------------------------------
                    */
                    card.addEventListener('drop', async event => {
                        event.preventDefault();
                        event.stopPropagation();

                        card.classList.remove('topo-drop-target');

                        if (!draggedNode) {
                            return;
                        }

                        // dragend berjalan ketika popup async terbuka, jadi simpan
                        // snapshot agar data sumber tidak ikut menjadi null.
                        const dragData = {
                            ...draggedNode
                        };

                        const hoveredNode = TOPO_NODES.find(node => String(node.id) === String(card
                            .dataset.id));
                        const isSwitchTarget = card.dataset.isVirtual !== '1' && Number(hoveredNode
                            ?.jumlah_port || 0) > 0;
                        let targetId = card.dataset.isVirtual === '1' ? null : card.dataset.id;
                        let targetParentId = isSwitchTarget ? card.dataset.id : card.dataset
                            .parentId;
                        let targetPort = card.dataset.port;

                        const isCrossSwitch = String(dragData.parentId) !== String(targetParentId);

                        if (wouldCreateCycle(dragData.id, targetParentId)) {
                            await Swal.fire({
                                icon: 'warning',
                                title: 'Tidak dapat dipindahkan',
                                text: 'Switch tidak boleh dipindahkan ke dirinya sendiri atau ke perangkat turunannya.'
                            });
                            return;
                        }

                        if (isCrossSwitch && targetId !== null && !isSwitchTarget) return;

                        if (isSwitchTarget) {
                            const totalPorts = Number(hoveredNode.jumlah_port || 0);
                            const occupiedPorts = new Set(TOPO_NODES
                                .filter(node => String(node.parent) === String(hoveredNode
                                    .id) && node.port)
                                .map(node => String(node.port)));
                            const uplinkPort = String(hoveredNode.uplink_port || '');
                            const availablePorts = [];
                            for (let port = 1; port <= totalPorts; port++) {
                                const value = String(port);
                                if (!occupiedPorts.has(value) && value !== uplinkPort)
                                    availablePorts.push(value);
                            }

                            if (!availablePorts.length) {
                                await Swal.fire({
                                    icon: 'warning',
                                    title: 'Tidak ada port kosong',
                                    text: `${hoveredNode.name || 'Switch tujuan'} tidak mempunyai port yang tersedia.`
                                });
                                return;
                            }

                            const portOptions = Object.fromEntries(availablePorts.map(port => [port,
                                `Port ${port}`
                            ]));
                            const portChoice = await Swal.fire({
                                title: 'Pilih port tujuan',
                                text: hoveredNode.name || 'Switch tujuan',
                                input: 'select',
                                inputOptions: portOptions,
                                inputPlaceholder: '-- Pilih Port --',
                                showCancelButton: true,
                                confirmButtonText: 'Lanjutkan',
                                cancelButtonText: 'Batal',
                                inputValidator: value => value ? undefined :
                                    'Pilih port tujuan terlebih dahulu.'
                            });
                            if (!portChoice.isConfirmed) return;

                            targetId = null;
                            targetPort = String(portChoice.value);
                        }

                        if (
                            String(dragData.id) ===
                            String(targetId)
                        ) {
                            return;
                        }

                        if (!targetPort) {
                            return;
                        }

                        const sourceNode = TOPO_NODES.find(node => String(node.id) === String(dragData.id));
                        const sourceParent = TOPO_NODES.find(node => String(node.id) === String(dragData.parentId));
                        const targetParent = TOPO_NODES.find(node => String(node.id) === String(targetParentId));
                        const isSwap = targetId !== null;
                        const confirmation = await Swal.fire({
                            icon: 'warning',
                            title: isSwap ? 'Tukar posisi perangkat?' : 'Pindahkan perangkat?',
                            html: `<strong>${Topo.esc(sourceNode?.name || 'Perangkat')}</strong><br>` +
                                `Dari ${Topo.esc(sourceParent?.name || 'Parent asal')} ` +
                                `Port ${Topo.esc(dragData.port || '-')}<br>` +
                                `Ke ${Topo.esc(targetParent?.name || 'Parent tujuan')} ` +
                                `Port ${Topo.esc(targetPort)}<br>` +
                                (isSwap ? '<small>Port kedua perangkat akan ditukar.</small>' :
                                    '<small></small>'),
                            showCancelButton: true,
                            confirmButtonText: isSwap ? 'Ya, tukar' : 'Ya, pindahkan',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#00b7bd'
                        });
                        if (!confirmation.isConfirmed) return;

                        await this.moveNodePort({
                            sourceId: dragData.id,
                            sourcePort: dragData.port,
                            targetId: targetId,
                            targetPort: targetPort,
                            sourceParentId: dragData.parentId,
                            targetParentId: targetParentId
                        });
                    });

                    card.addEventListener('dragend', () => {
                        canvas
                            .querySelectorAll(
                                '.topo-dragging, .topo-drop-target'
                            )
                            .forEach(element => {
                                element.classList.remove(
                                    'topo-dragging',
                                    'topo-drop-target'
                                );
                            });

                        draggedNode = null;
                    });
                });
            },

            async moveNodePort(data) {
    if (this.portMoveInProgress) return;
    this.portMoveInProgress = true;

    Swal.fire({
        title: 'Memindahkan perangkat...',
        text: 'Mohon tunggu, perubahan sedang disimpan.',
        allowOutsideClick: false,
        allowEscapeKey: false,
        showConfirmButton: false,
        didOpen: () => Swal.showLoading()
    });

    try {
        const response = await fetch(PORT_MOVE_URL, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document
                                .querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        },
                        body: JSON.stringify({
                            source_id: data.sourceId,
                            target_id: data.targetId,
                            source_parent_id: data.sourceParentId,
                            target_parent_id: data.targetParentId,
                            source_port: data.sourcePort,
                            target_port: data.targetPort
                        })
                    });

                    const result = await response.json();

                    if (!response.ok || !result.success) {
                        throw new Error(
                            result.message ||
                            'Gagal memindahkan port.'
                        );
                    }

                    /*
                     * Update data lokal setelah database berhasil.
                     */
                    const sourceNode = TOPO_NODES.find(
                        node => String(node.id) === String(data.sourceId)
                    );

                    const targetNode = data.targetId ?
                        TOPO_NODES.find(
                            node => String(node.id) === String(data.targetId)
                        ) :
                        null;

                    if (sourceNode) {
                        sourceNode.port = data.targetPort;
                        sourceNode.parent = data.targetParentId;
                    }

                    // Jika target terisi, tukar port
                    if (targetNode) {
                        targetNode.port = data.sourcePort;
                    }

                    this.render();

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: targetNode ?
                            'Port kedua perangkat berhasil ditukar.' :
                            `Perangkat berhasil dipindahkan ke Port ${data.targetPort}.`,
                        timer: 1500,
                        showConfirmButton: false
                    });
    } catch (error) {
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: error.message
        });
    } finally {
        this.portMoveInProgress = false;
    }
},

            // syncCompanionConnectorWidths is no longer needed - SVG handles all connectors
            syncCompanionConnectorWidths(canvas) {
                /* no-op */
            },

            onNodeClick(nodeId, event) {
                const node = TOPO_NODES.find(n => n.id === nodeId);
                if (!node) return;

                const cleanText = (value) => String(value ?? '').trim();
                const normalizeRusakLabel = (text, fallback = '') => {
                    const raw = cleanText(text);
                    const normalized = raw.replace(/perangkat\s+rusak/ig, 'Port Rusak').trim();
                    if (normalized) return normalized;
                    return fallback;
                };
                const setInfoRow = (rowId, labelId, iconId, valueId, info) => {
                    const $row = $(`#${rowId}`);
                    if (!info || !cleanText(info.value)) {
                        $row.addClass('d-none');
                        return;
                    }

                    $(`#${labelId}`).text(info.label || 'Informasi');
                    $(`#${valueId}`).text(info.value);
                    $(`#${iconId}`).attr('class',
                        `fas ${info.iconClass || 'fa-circle-info'} me-1 ${info.iconColor || 'text-muted'}`);
                    $row.removeClass('d-none');
                };

                const nodeNameRaw = cleanText(node.name);
                const kategoriRaw = cleanText(node.kategori);
                const userName = cleanText(node.user_name);
                const masterArea = cleanText(node.master_lokasi);
                const deviceLocation = cleanText(node.area || node.location);
                const ipAddress = cleanText(node.ip);

                const kategoriLower = kategoriRaw.toLowerCase();
                const nameLower = nodeNameRaw.toLowerCase();
                const isRusakNode = kategoriLower.includes('rusak') || nameLower.includes('rusak') || node
                    .port_status === 'rusak';

                const displayName = isRusakNode ?
                    normalizeRusakLabel(nodeNameRaw, 'Port Rusak') :
                    (nodeNameRaw || '-');
                const kategoriText = isRusakNode ?
                    normalizeRusakLabel(kategoriRaw, 'Port Rusak') :
                    (kategoriRaw || 'Tidak Ada Kategori');

                // Populate modal data (sync with card node info)
                $('#qi_node_name').text(displayName);
                $('#qi_node_kategori').text(kategoriText.toUpperCase());

                let primaryInfo = {
                    label: 'Kategori',
                    value: kategoriText,
                    iconClass: 'fa-tags',
                    iconColor: 'text-secondary'
                };
                let secondaryInfo = null;

                if (userName) {
                    primaryInfo = {
                        label: 'User',
                        value: userName,
                        iconClass: 'fa-user',
                        iconColor: 'text-primary'
                    };

                    if (deviceLocation) {
                        secondaryInfo = {
                            label: 'Location',
                            value: deviceLocation,
                            iconClass: 'fa-location-dot',
                            iconColor: 'text-warning'
                        };
                    }
                } else if (masterArea) {
                    primaryInfo = {
                        label: 'Area ',
                        value: masterArea,
                        iconClass: 'fa-map-marker-alt',
                        iconColor: 'text-danger'
                    };

                    if (deviceLocation && deviceLocation !== masterArea) {
                        secondaryInfo = {
                            label: 'Location',
                            value: deviceLocation,
                            iconClass: 'fa-location-dot',
                            iconColor: 'text-warning'
                        };
                    }
                } else if (deviceLocation) {
                    primaryInfo = {
                        label: 'Location',
                        value: deviceLocation,
                        iconClass: 'fa-location-dot',
                        iconColor: 'text-warning'
                    };
                }

                setInfoRow('qi_primary_row', 'qi_primary_label', 'qi_primary_icon', 'qi_primary_value', primaryInfo);
                setInfoRow('qi_secondary_row', 'qi_secondary_label', 'qi_secondary_icon', 'qi_secondary_value',
                    secondaryInfo);

                if (ipAddress) {
                    $('#qi_node_ip').text(ipAddress);
                    $('#qi_ip_row').removeClass('d-none');
                } else {
                    $('#qi_node_ip').text('-');
                    $('#qi_ip_row').addClass('d-none');
                }

                // Define Icon
                let iconClass = 'fa-server';
                let bgStyle = 'linear-gradient(135deg, #11cdef, #1171ef)'; // primary
                const k = kategoriLower;

                if (k.includes('switch') || k.includes('hub')) {
                    iconClass = 'fa-network-wired';
                    bgStyle = 'linear-gradient(135deg, #f5365c, #f56036)'; // danger
                } else if (k.includes('router')) {
                    iconClass = 'fa-route';
                    bgStyle = 'linear-gradient(135deg, #fb6340, #fbb140)'; // orange
                } else if (k.includes('cpu') || k.includes('pc') || k.includes('komputer')) {
                    iconClass = 'fa-desktop';
                    bgStyle = 'linear-gradient(135deg, #2dce89, #2dcecc)'; // success
                } else if (k.includes('printer') || k.includes('scanner')) {
                    iconClass = 'fa-print';
                    bgStyle = 'linear-gradient(135deg, #8965e0, #bc65e0)'; // purple
                } else if (node.kategori_icon) {
                    iconClass = node.kategori_icon.replace('fas ', '').replace('far ', '').replace('fab ', '');
                }

                $('#qi_icon').attr('class', `fas ${iconClass} text-white`);
                $('#qi_icon_bg').css('background', bgStyle);

                // Update View Detail Button URL
                $('#qi_btn_detail').attr('href', `${getMenuBaseUrlByGedung(node.gedung)}/show/${node.enc_id}`);

                // Configure Delete Action
                if (AUTHORIZE_DELETE) {
                    $('#qi_btn_delete').show();
                    $('#qi_btn_delete').off('click').on('click', function() {
                        const quickInfoEl = document.getElementById('nodeQuickInfoModal');
                        const quickInfoModal = quickInfoEl ? bootstrap.Modal.getInstance(quickInfoEl) : null;
                        if (quickInfoModal) {
                            quickInfoModal.hide();
                        }

                        const submitDeleteRequest = (deleteMode = 'self_only') => {
                            const deleteUrl = `${getMenuBaseUrlByGedung(node.gedung)}/${node.enc_id}`;

                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = deleteUrl;

                            const csrfToken = document.querySelector('meta[name="csrf-token"]')
                                ?.getAttribute('content');
                            if (csrfToken) {
                                const csrfInput = document.createElement('input');
                                csrfInput.type = 'hidden';
                                csrfInput.name = '_token';
                                csrfInput.value = csrfToken;
                                form.appendChild(csrfInput);
                            }

                            const methodInput = document.createElement('input');
                            methodInput.type = 'hidden';
                            methodInput.name = '_method';
                            methodInput.value = 'DELETE';
                            form.appendChild(methodInput);

                            const deleteModeInput = document.createElement('input');
                            deleteModeInput.type = 'hidden';
                            deleteModeInput.name = 'delete_mode';
                            deleteModeInput.value = deleteMode;
                            form.appendChild(deleteModeInput);

                            document.body.appendChild(form);
                            form.submit();
                        };

                        const escapeHtml = function(value) {
                            return String(value || '')
                                .replace(/&/g, '&amp;')
                                .replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/"/g, '&quot;')
                                .replace(/'/g, '&#039;');
                        };

                        const normalizeConfirmText = function(value) {
                            return String(value || '').trim().replace(/\s+/g, ' ').toUpperCase();
                        };

                        const getConfirmSuffix = function(mode) {
                            return mode === 'with_descendants' ? 'turunan' : '';
                        };

                        const getConfirmTarget = function(code, mode) {
                            return (getConfirmSuffix(mode) + ' ' + String(code || '').trim()).trim();
                        };

                        const buildDeleteSummaryHtml = function(parentDeviceName, deleteDescendants,
                            confirmTarget, showConfirm) {
                            let html = '<div class="swal-delete-main">';
                            html += '<span class="label">Perangkat utama</span>';
                            html += '<strong>' + escapeHtml(parentDeviceName) + '</strong>';
                            html += '</div>';

                            if (!deleteDescendants.length) {
                                html +=
                                    '<div class="swal-delete-empty">Tidak ada turunan pada perangkat ini.</div>';
                            } else {
                                html += '<div class="swal-delete-list">';
                                deleteDescendants.forEach(function(item) {
                                    const depth = Math.max(1, Number(item.depth || 1));
                                    const indent = depth > 1 ? '&nbsp;'.repeat((depth - 1) * 3) +
                                        '&#10148;&nbsp;' : '';
                                    const kategoriText = item.kategori ? ' (' + escapeHtml(item
                                        .kategori) + ')' : '';
                                    const portText = item.port ? 'Port ' + escapeHtml(item.port) +
                                        ' • ' : '';
                                    html += '<div class="swal-delete-item">';
                                    html += '<div class="swal-delete-name">' + indent + escapeHtml(
                                        item.name) + kategoriText + '</div>';
                                    html += '<div class="swal-delete-meta">' + portText +
                                        escapeHtml(item.status) + '</div>';
                                    html += '</div>';
                                });
                                html += '</div>';
                            }

                            if (showConfirm) {
                                html += '<div class="swal-delete-confirm" id="deleteConfirmWrap">';
                                html +=
                                    '<span class="confirm-label">Ketik konfirmasi persis seperti ini</span>';
                                html += '<div class="confirm-code" id="deleteConfirmTarget">' + escapeHtml(
                                    confirmTarget) + '</div>';
                                html +=
                                    '<input id="deleteConfirmInput" class="swal-delete-confirm-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="characters" spellcheck="false" placeholder="Ketik konfirmasi...">';
                                html +=
                                    '<div class="swal-delete-confirm-hint">Pilih cakupan aksi terlebih dahulu, lalu ketik manual (copy/paste dinonaktifkan).</div>';
                                html += '</div>';
                            }

                            return html;
                        };

                        const openDeleteDialog = function(deleteActionLabel, parentDeviceName,
                            deleteDescendants, switchDeviceName, portDeviceName) {
                            const hasDescendants = deleteDescendants.length > 0;
                            const confirmCode = String(parentDeviceName || '').trim();
                            const requiresTypingConfirm = (deleteActionLabel.toLowerCase().includes(
                                        'non aktif') ||
                                    deleteActionLabel.toLowerCase().includes('hapus')) &&
                                confirmCode !== '' &&
                                confirmCode !== '-';

                            if (typeof Swal === 'undefined') {
                                const fallbackConfirm = window.confirm(deleteActionLabel +
                                    ' perangkat ini?');
                                if (!fallbackConfirm) {
                                    return;
                                }
                                const fallbackConfirmSecond = window.confirm(
                                    'Konfirmasi terakhir: lanjutkan ' + deleteActionLabel
                                    .toLowerCase() + ' perangkat ini?');
                                if (!fallbackConfirmSecond) {
                                    return;
                                }
                                submitDeleteRequest('self_only');
                                return;
                            }

                            const inputOptions = {
                                self_only: 'Perangkat ini saja',
                            };

                            {{-- if (hasDescendants) {
                                inputOptions.with_descendants = 'Beserta turunannya (' + deleteDescendants
                                    .length + ')';
                            } --}}

                            if (hasDescendants) {
                                inputOptions.with_descendants = 'Beserta turunannya';
                            }

                            const initialConfirmTarget = getConfirmTarget(confirmCode, 'self_only');

                            Swal.fire({
                                icon: 'warning',
                                title: deleteActionLabel + ' perangkat ini?',
                                html: buildDeleteSummaryHtml(parentDeviceName, deleteDescendants,
                                    initialConfirmTarget, requiresTypingConfirm),
                                input: hasDescendants ? 'radio' : undefined,
                                inputOptions: hasDescendants ? inputOptions : undefined,
                                inputValue: 'self_only',
                                showCancelButton: true,
                                confirmButtonText: deleteActionLabel + ' sekarang',
                                cancelButtonText: 'Batal',
                                confirmButtonColor: '#e53358',
                                cancelButtonColor: '#67748e',
                                customClass: {
                                    popup: 'swal2-delete-popup',
                                    htmlContainer: 'swal2-delete-html'
                                },
                                didOpen: function(popup) {
                                    const radioWrap = popup.querySelector('.swal2-radio');
                                    let note = null;
                                    if (radioWrap) {
                                        const choiceTitle = document.createElement('div');
                                        choiceTitle.className = 'swal-delete-choice-title';
                                        choiceTitle.textContent = 'Pilih cakupan aksi';
                                        radioWrap.insertAdjacentElement('beforebegin',
                                            choiceTitle);

                                        const labels = Array.from(radioWrap.querySelectorAll(
                                            'label'));
                                        const syncSelectedState = function() {
                                            labels.forEach(function(label) {
                                                const input = label.querySelector(
                                                    'input');
                                                label.classList.toggle('selected', !
                                                    !(input && input.checked));
                                            });
                                        };

                                        labels.forEach(function(label) {
                                            const input = label.querySelector('input');
                                            if (input) {
                                                input.addEventListener('change',
                                                    function() {
                                                        syncSelectedState();

                                                        const selectedMode = input
                                                            .value || 'self_only';
                                                        const target = popup
                                                            .querySelector(
                                                                '#deleteConfirmTarget'
                                                            );
                                                        if (target) {
                                                            target.textContent =
                                                                getConfirmTarget(
                                                                    confirmCode,
                                                                    selectedMode);
                                                        }
                                                        const confirmInput = popup
                                                            .querySelector(
                                                                '#deleteConfirmInput'
                                                            );
                                                        if (confirmInput) {
                                                            confirmInput.value = '';
                                                        }
                                                    });
                                            }
                                        });
                                        syncSelectedState();

                                        note = document.createElement('div');
                                        note.className = 'swal-delete-note';
                                        note.innerHTML =
                                            '<strong>Catatan:</strong> Opsi <em>Beserta semua turunan</em> akan menerapkan perubahan status ke seluruh perangkat turunan secara berantai.';
                                        radioWrap.insertAdjacentElement('afterend', note);
                                    }

                                    const confirmWrap = popup.querySelector(
                                        '#deleteConfirmWrap');
                                    if (confirmWrap) {
                                        if (radioWrap) {
                                            const insertAfter = note || radioWrap;
                                            insertAfter.insertAdjacentElement('afterend',
                                                confirmWrap);
                                        } else {
                                            popup.appendChild(confirmWrap);
                                        }
                                    }

                                    const confirmInput = popup.querySelector(
                                        '#deleteConfirmInput');
                                    if (confirmInput) {
                                        const blockPaste = function(event) {
                                            event.preventDefault();
                                        };

                                        confirmInput.addEventListener('paste', blockPaste);
                                        confirmInput.addEventListener('drop', blockPaste);
                                        confirmInput.addEventListener('contextmenu',
                                            blockPaste);
                                        confirmInput.addEventListener('keydown', function(
                                            event) {
                                            const key = String(event.key || '')
                                                .toLowerCase();
                                            if ((event.ctrlKey || event.metaKey) && (
                                                    key === 'v' || key === 'insert')) {
                                                event.preventDefault();
                                            }
                                            if (event.shiftKey && key === 'insert') {
                                                event.preventDefault();
                                            }
                                        });
                                    }
                                },
                                focusCancel: true,
                                preConfirm: function(selectedMode) {
                                    if (hasDescendants && !selectedMode) {
                                        Swal.showValidationMessage(
                                            'Pilih opsi aksi terlebih dahulu');
                                        return false;
                                    }

                                    if (requiresTypingConfirm) {
                                        const popup = Swal.getPopup();
                                        const inputEl = popup ? popup.querySelector(
                                            '#deleteConfirmInput') : null;
                                        const typedValue = inputEl ? inputEl.value : '';
                                        const mode = selectedMode || 'self_only';
                                        const expectedText = getConfirmTarget(confirmCode,
                                            mode);

                                        if (!typedValue || !typedValue.trim()) {
                                            Swal.showValidationMessage(
                                                'Ketik kode perangkat utama untuk konfirmasi'
                                            );
                                            return false;
                                        }

                                        if (normalizeConfirmText(typedValue) !==
                                            normalizeConfirmText(expectedText)) {
                                            Swal.showValidationMessage(
                                                'Kode perangkat tidak cocok. Ketik persis seperti yang ditampilkan.'
                                            );
                                            return false;
                                        }
                                    }
                                    return selectedMode || 'self_only';
                                }
                            }).then(function(result) {
                                if (!result.isConfirmed) {
                                    return;
                                }

                                const selectedMode = result.value || 'self_only';
                                const modeLabel = selectedMode === 'with_descendants' ?
                                    'beserta semua turunan' : 'perangkat ini saja';
                                const doSubmit = function() {
                                    submitDeleteRequest(selectedMode);
                                };

                                if (requiresTypingConfirm) {
                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Konfirmasi terakhir',
                                        html: 'Anda akan <strong>' + escapeHtml(
                                                deleteActionLabel.toLowerCase()) +
                                            '</strong> perangkat <strong>' +
                                            escapeHtml(parentDeviceName) +
                                            '</strong> dari port <strong>' + escapeHtml(
                                                portDeviceName) +
                                            '</strong> switch <strong>' + escapeHtml(
                                                switchDeviceName) + '</strong> (' +
                                            escapeHtml(modeLabel) + '). Lanjutkan?',
                                        showCancelButton: true,
                                        confirmButtonText: 'Ya, lanjutkan',
                                        cancelButtonText: 'Batal',
                                        confirmButtonColor: '#e53358',
                                        cancelButtonColor: '#67748e'
                                    }).then(function(secondResult) {
                                        if (!secondResult.isConfirmed) {
                                            return;
                                        }
                                        doSubmit();
                                    });
                                    return;
                                }

                                doSubmit();
                            });
                        };

                        const fallbackDeleteActionLabel = String(node.isactive || '1') === '1' ?
                            'Non aktifkan' : 'Aktifkan';
                        const fallbackParentDeviceName = displayName || node.name || '-';
                        const previewBaseUrl = getMenuBaseUrlByGedung(node.gedung);
                        const previewUrl =
                            `${previewBaseUrl}/ajax/getdeletepreview?device_id=${encodeURIComponent(node.id)}`;

                        fetch(previewUrl)
                            .then(function(response) {
                                if (!response.ok) {
                                    throw new Error('preview failed');
                                }
                                return response.json();
                            })
                            .then(function(payload) {
                                const deleteActionLabel = String(payload?.delete_action_label ||
                                    fallbackDeleteActionLabel);
                                const parentDeviceName = String(payload?.parent_name ||
                                    fallbackParentDeviceName);

                                const portDeviceName = String(payload?.port || '-');
                                const switchDeviceName = String(payload?.parent || '-');

                                const deleteDescendants = Array.isArray(payload?.descendants) ? payload
                                    .descendants : [];

                                openDeleteDialog(
                                    deleteActionLabel,
                                    parentDeviceName,
                                    deleteDescendants,
                                    switchDeviceName,
                                    portDeviceName
                                );
                            })
                            .catch(function() {
                                openDeleteDialog(
                                    fallbackDeleteActionLabel,
                                    fallbackParentDeviceName,
                                    [],
                                    '-',
                                    '-'
                                );
                            });
                    });
                } else {
                    $('#qi_btn_delete').hide();
                }

                new bootstrap.Modal(document.getElementById('nodeQuickInfoModal')).show();
            },

            // Intercept click on orphaned (inactive/deleted from master) devices
            onOrphanedClick(nodeId, event) {
                event.stopPropagation();
                const node = TOPO_NODES.find(n => n.id === nodeId);
                if (!node) return;

                const reason = node.orphan_reason || 'inactive';
                const isDeleted = reason === 'deleted';
                const statusLabel = isDeleted ? 'Dihapus' : 'Tidak Aktif';
                const statusColor = isDeleted ? '#c0392b' : '#e67e22';
                const statusIcon = isDeleted ? 'fa-trash-can' : 'fa-power-off';

                const detailUrl = `${getMenuBaseUrlByGedung(node.gedung)}/show/${node.enc_id}`;

                if (typeof Swal === 'undefined') {
                    alert('Perangkat ' + (node.name || '') + ' sudah ' + statusLabel +
                        ' dari Master Aset. Silakan hapus dari Topologi atau aktifkan kembali di Master.');
                    return;
                }

                Swal.fire({
                    icon: 'warning',
                    iconColor: statusColor,
                    title: 'Perangkat ' + statusLabel + ' di Master',
                    html: `<div style="text-align:left;font-size:0.9rem;">
                <div style="background:linear-gradient(135deg,#fef9e7,#fdebd0);border:1px solid #f0c27a;border-radius:10px;padding:12px 14px;margin-bottom:12px;">
                    <div style="font-size:0.7rem;text-transform:uppercase;color:#8a93a5;font-weight:700;letter-spacing:0.03em;margin-bottom:4px;">Perangkat</div>
                    <div style="font-weight:700;color:#344767;font-size:1rem;">${this.esc(node.name || '-')}</div>
                    <div style="font-size:0.78rem;color:#67748e;margin-top:2px;">${this.esc(node.kategori || 'Tidak ada kategori')}</div>
                </div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <span style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:${statusColor};color:white;font-size:0.7rem;"><i class="fas ${statusIcon}"></i></span>
                    <span>Status di MIS Asset: <strong style="color:${statusColor};">${statusLabel}</strong></span>
                </div>
                <p style="color:#606a85;line-height:1.5;margin-bottom:0;">Silakan lakukan salah satu tindakan berikut:</p>
                <ul style="color:#606a85;line-height:1.7;padding-left:20px;margin-top:4px;">
                    <li><strong>Hapus atau Edit</strong> perangkat ini dari Topologi</li>
                    <li><strong>Aktifkan kembali</strong> perangkat di sistem Master Aset (MSJAsset)</li>
                </ul>
            </div>`,
                    showCancelButton: true,
                    confirmButtonText: '<i class="fas fa-eye me-1"></i> Lihat Detail',
                    cancelButtonText: 'Tutup',
                    confirmButtonColor: '#e67e22',
                    cancelButtonColor: '#67748e',
                    customClass: {
                        popup: 'swal2-delete-popup'
                    }
                }).then(result => {
                    if (result.isConfirmed) {
                        window.location.href = detailUrl;
                    }
                });
            },

            onPlaceholderClick(nodeId, event) {
                event.stopPropagation();
                if (!AUTHORIZE_EDIT) return;

                const node = (this._renderedNodes || TOPO_NODES).find(n => String(n.id) === String(nodeId));
                if (!node) return;

                // Don't allow add for rusak ports
                if (node.port_status === 'rusak') return;

                // Prefer current page gedung context (e.g. viewing Gedung B gateway ports).
                const targetGedung = CURRENT_VIEW_GEDUNG || node.gedung;

                // Redirect ke halaman add dengan query parameters untuk pre-fill form
                const addUrl =
                    `${getMenuBaseUrlByGedung(targetGedung)}/add?gedung=${encodeURIComponent(targetGedung)}&parent=${encodeURIComponent(node.parent)}&port=${encodeURIComponent(node.port)}&redirect_gedung=${encodeURIComponent(targetGedung)}`;
                window.location.href = addUrl;
            },

            _pendingPortToggle: null, // { nodeId, newStatus }

            togglePortStatus(nodeId, event) {
                event.stopPropagation();
                if (!AUTHORIZE_EDIT) return;

                const node = TOPO_NODES.find(n => n.id === nodeId);
                if (!node) return;

                const newStatus = node.port_status === 'rusak' ? 'normal' : 'rusak';
                this._pendingPortToggle = {
                    nodeId,
                    newStatus
                };

                // Configure modal
                const isRusak = newStatus === 'rusak';
                $('#portStatusLabel').text(isRusak ? 'Tandai Port Rusak' : 'Pulihkan Port');
                $('#portStatusSub').text(`Port ${node.port}`);
                $('#portStatusKeterangan').val('');
                $('#portStatusRusakBody').toggle(isRusak);
                $('#portStatusNormalBody').toggle(!isRusak);

                // Icon & button style
                if (isRusak) {
                    $('#portStatusIcon').css('background', 'linear-gradient(135deg, #f5365c, #f56036)').html(
                        '<i class="fas fa-ban text-white"></i>');
                    $('#portStatusConfirmBtn').removeClass('bg-gradient-success').addClass('bg-gradient-danger').html(
                        '<i class="fas fa-ban me-1"></i>Tandai Rusak');
                } else {
                    $('#portStatusIcon').css('background', 'linear-gradient(135deg, #2dce89, #1ab394)').html(
                        '<i class="fas fa-check-circle text-white"></i>');
                    $('#portStatusConfirmBtn').removeClass('bg-gradient-danger').addClass('bg-gradient-success').html(
                        '<i class="fas fa-check-circle me-1"></i>Pulihkan');
                }

                new bootstrap.Modal(document.getElementById('portStatusModal')).show();
            },

            confirmPortStatus() {
                const pending = this._pendingPortToggle;
                if (!pending) return;

                const {
                    nodeId,
                    newStatus
                } = pending;
                const keterangan = newStatus === 'rusak' ? ($('#portStatusKeterangan').val() || '') : '';
                this._pendingPortToggle = null;

                // Close modal
                bootstrap.Modal.getInstance(document.getElementById('portStatusModal'))?.hide();

                // Use alias-aware base URL for the target node
                const node = TOPO_NODES.find(n => n.id === nodeId);
                const baseUrl = node ? getMenuBaseUrlByGedung(node.gedung) : URL_MENU;

                let url = `${baseUrl}/ajax/toggleportstatus?device_id=${nodeId}`;
                if (keterangan) {
                    url += `&keterangan=${encodeURIComponent(keterangan)}`;
                }

                fetch(url)
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            const node = TOPO_NODES.find(n => n.id === nodeId);
                            if (node) {
                                node.port_status = data.new_status;
                                node.name = data.new_name;
                                node.keterangan = data.keterangan || '';
                            }
                            Topo.render();
                        } else {
                            alert(data.message || 'Gagal mengubah status port');
                        }
                    })
                    .catch(() => {
                        alert('Gagal menghubungi server');
                    });
            }
        };

        // ========== AREA SEARCH ==========
        const IS_MAIN_SERVER = {{ empty($selected_gedung) ? 'true' : 'false' }};
        const GEDUNG_MAP = {!! json_encode(collect($gedung_list)->pluck('name', 'value')) !!};

        const AreaSearch = {
            input: null,
            results: null,
            clearBtn: null,
            countLabel: null,
            allAreaList: [], // full area list from all nodes
            areaList: [], // filtered by gedung (or same as allAreaList)
            activeArea: '',
            activeGedung: '',
            activeDeviceId: '',
            activeOrphanOnly: false,
            selectedIndex: -1,

            init() {
                this.input = document.getElementById('areaSearchInput');
                this.results = document.getElementById('areaSearchResults');
                this.clearBtn = document.getElementById('areaSearchClear');
                this.countLabel = document.getElementById('searchResultCount');
                if (!this.input) return;

                // Build area list with gedung info
                this.buildAreaList();

                this.input.addEventListener('input', () => this.onInput());
                this.input.addEventListener('focus', () => this.onInput());
                this.input.addEventListener('keydown', (e) => this.onKeyDown(e));
                this.clearBtn.addEventListener('click', () => this.clear());

                // Close dropdown on outside click
                document.addEventListener('click', (e) => {
                    if (!document.getElementById('areaSearchWrap').contains(e.target)) {
                        this.results.classList.remove('show');
                    }
                });
            },

            buildAreaList() {
                // Build: { "Ruang Server Utama": { total: 3, byGedung: { A: 3 } }, ... }
                const map = {};
                TOPO_NODES.forEach(n => {
                    if (n.area && n.area.trim()) {
                        const a = n.area.trim();
                        const g = n.gedung || '';
                        if (!map[a]) map[a] = {
                            total: 0,
                            byGedung: {}
                        };
                        map[a].total++;
                        map[a].byGedung[g] = (map[a].byGedung[g] || 0) + 1;
                    }
                });
                this.allAreaList = Object.keys(map).sort().map(a => ({
                    name: a,
                    count: map[a].total,
                    byGedung: map[a].byGedung,
                    gedungs: Object.keys(map[a].byGedung),
                    type: 'area'
                }));
                this.areaList = this.allAreaList;

                // Build device list for search
                this.allDeviceList = TOPO_NODES.map(n => ({
                    id: n.id,
                    name: n.name,
                    kategori: n.kategori || '',
                    area: n.area || '',
                    gedung: n.gedung || '',
                    ip: n.ip || '',
                    enc_id: n.enc_id,
                    type: 'device'
                }));
                this.deviceList = this.allDeviceList;
            },

            // Called when gedung dropdown changes (Main Server only)
            onGedungChange(gedung) {
                this.activeGedung = gedung;
                this.activeArea = '';
                this.activeDeviceId = '';
                this.input.value = '';
                this.clearBtn.style.display = 'none';

                // Toggle select styling
                const sel = document.getElementById('gedungFilter');
                if (sel) sel.classList.toggle('has-value', !!gedung);

                // Filter area list and device list by gedung
                if (gedung) {
                    this.areaList = this.allAreaList
                        .filter(a => a.gedungs.includes(gedung))
                        .map(a => ({
                            ...a,
                            count: a.byGedung[gedung] || 0
                        }));
                    this.deviceList = this.allDeviceList.filter(d => d.gedung === gedung);
                    this.input.placeholder = 'Cari di ' + (GEDUNG_MAP[gedung] || gedung) + '...';
                } else {
                    this.areaList = this.allAreaList;
                    this.deviceList = this.allDeviceList;
                    this.input.placeholder = 'Cari perangkat / area...';
                }

                // Apply gedung highlight
                this.applyHighlight();
                this.results.classList.remove('show');
            },

            onInput() {
                const q = this.input.value.trim().toLowerCase();
                this.selectedIndex = -1;
                this.activeDeviceId = '';
                if (this.activeArea && q !== this.activeArea.toLowerCase()) {
                    this.activeArea = '';
                }

                if (!q) {
                    this.renderList(this.areaList, []);
                    this.clearBtn.style.display = 'none';
                    if (!this.activeArea) {
                        this.applyHighlight(); // re-apply gedung-only highlight
                    }
                    return;
                }

                this.clearBtn.style.display = 'block';
                const filteredAreas = this.areaList.filter(a => a.name.toLowerCase().includes(q));
                const filteredDevices = this.deviceList.filter(d =>
                    d.name.toLowerCase().includes(q) ||
                    (d.ip && d.ip.toLowerCase().includes(q)) ||
                    d.kategori.toLowerCase().includes(q)
                ).slice(0, 8); // limit device results
                this.renderList(filteredAreas, filteredDevices, q);
            },

            renderList(areaItems, deviceItems, query) {
                deviceItems = deviceItems || [];
                query = query || '';

                if (areaItems.length === 0 && deviceItems.length === 0) {
                    this.results.innerHTML = `<div class="search-no-result">
                <i class="fas fa-search-minus"></i>
                <span>Tidak ada hasil ditemukan</span>
            </div>`;
                    this.results.classList.add('show');
                    return;
                }

                const esc = (s) => Topo.esc(s);
                const highlight = (text) => {
                    if (!query) return esc(text);
                    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
                    return esc(text).replace(regex, '<span class="area-match">$1</span>');
                };

                let html = '';
                let idx = 0;

                // Device results
                if (deviceItems.length > 0) {
                    html += `<div class="search-section-header">
                <span class="section-icon icon-device"><i class="fas fa-hdd"></i></span>
                Perangkat
                <span class="section-line"></span>
                <span style="font-size:0.6rem;color:#adb5bd;font-weight:600;">${deviceItems.length}</span>
            </div>`;
                    deviceItems.forEach(d => {
                        html += `<div class="area-search-item" data-device-id="${d.id}" data-index="${idx}" onclick="AreaSearch.selectDevice(${d.id})">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="area-name">${this.getDeviceIcon(d.kategori)} ${highlight(d.name)}</span>
                        <span class="area-count">${esc(d.kategori)}</span>
                    </div>
                    <div class="item-meta">`;
                        if (d.ip) html += `<span><i class="fas fa-at text-info"></i> ${highlight(d.ip)}</span>`;
                        if (d.area) html +=
                            `<span><i class="fas fa-map-marker-alt text-warning"></i> ${esc(d.area)}</span>`;
                        if (IS_MAIN_SERVER && d.gedung) html +=
                            `<span class="gedung-tag">${GEDUNG_MAP[d.gedung] || d.gedung}</span>`;
                        html += `</div></div>`;
                        idx++;
                    });
                }

                // Area results
                if (areaItems.length > 0) {
                    if (deviceItems.length > 0) {
                        html += '<div class="search-section-divider"></div>';
                    }
                    html += `<div class="search-section-header">
                <span class="section-icon icon-area"><i class="fas fa-map-marker-alt"></i></span>
                Area / Lokasi
                <span class="section-line"></span>
                <span style="font-size:0.6rem;color:#adb5bd;font-weight:600;">${areaItems.length}</span>
            </div>`;
                    areaItems.forEach(item => {
                        const isActive = this.activeArea === item.name ? ' active' : '';
                        let gedungInfo = '';
                        if (IS_MAIN_SERVER && !this.activeGedung) {
                            const tags = item.gedungs.map(g =>
                                `<span class="gedung-tag">${GEDUNG_MAP[g] || g}</span>`).join('');
                            gedungInfo = `<div class="gedung-tags">${tags}</div>`;
                        }
                        html += `<div class="area-search-item area-type${isActive}" data-area="${esc(item.name)}" data-index="${idx}" onclick="AreaSearch.selectArea('${item.name.replace(/'/g, "\\'")}')">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="area-name"><i class="fas fa-map-marker-alt" style="color:#fb6340;font-size:0.7rem;"></i>${highlight(item.name)}</span>
                        <span class="area-count">${item.count} perangkat</span>
                    </div>${gedungInfo}
                </div>`;
                        idx++;
                    });
                }

                this.results.innerHTML = html;
                this.results.classList.add('show');
            },

            getDeviceIcon(kategori) {
                const k = (kategori || '').toLowerCase();
                if (k.includes('server'))
                    return '<i class="fas fa-server text-primary me-1" style="font-size:0.7rem;"></i>';
                if (k.includes('switch'))
                    return '<i class="fas fa-network-wired text-success me-1" style="font-size:0.7rem;"></i>';
                if (k.includes('cpu')) return '<i class="fas fa-desktop text-info me-1" style="font-size:0.7rem;"></i>';
                if (k.includes('router'))
                    return '<i class="fas fa-route text-warning me-1" style="font-size:0.7rem;"></i>';
                if (k.includes('printer'))
                    return '<i class="fas fa-print text-secondary me-1" style="font-size:0.7rem;"></i>';
                return '<i class="fas fa-hdd text-muted me-1" style="font-size:0.7rem;"></i>';
            },

            selectDevice(deviceId) {
                activateTopologyIfNeeded();

                this.activeArea = '';
                this.activeDeviceId = String(deviceId);
                this.results.classList.remove('show');

                const searchId = String(deviceId);
                const deviceData = TOPO_NODES.find(n => String(n.id) === searchId);

                Topo.searchState = {
                    active: true,
                    matchIds: new Set([searchId]),
                    visibleIds: new Set()
                };

                const addPathToRoot = (nId) => {
                    let curr = TOPO_NODES.find(n => String(n.id) === String(nId));
                    while (curr) {
                        Topo.searchState.visibleIds.add(String(curr.id));
                        if (!curr.parent) break;
                        curr = TOPO_NODES.find(n => String(n.id) === String(curr.parent));
                    }
                };
                addPathToRoot(deviceId);

                // Re-render topology with filtered subset
                Topo.render();

                this.countLabel.textContent = '1 ditemukan';
                this.countLabel.style.display = 'inline';

                // Show filter bar for device
                const bar = document.getElementById('filterResultBar');
                const icon = document.getElementById('filterBarIcon');
                const title = document.getElementById('filterBarTitle');
                const sub = document.getElementById('filterBarSub');
                const tags = document.getElementById('filterBarTags');
                const count = document.getElementById('filterBarCount');
                icon.className = 'filter-bar-icon icon-device';
                icon.innerHTML = '<i class="fas fa-crosshairs"></i>';
                title.textContent = deviceData ? deviceData.name : `Perangkat #${deviceId}`;
                let subText = deviceData ? (deviceData.kategori || 'Perangkat') : '';
                if (deviceData && deviceData.area) subText += ` - ${deviceData.area}`;
                sub.textContent = subText;
                let tagHtml = '';
                if (deviceData && deviceData.gedung) {
                    tagHtml +=
                        `<span class="filter-bar-tag tag-gedung">${GEDUNG_MAP[deviceData.gedung] || deviceData.gedung}</span>`;
                }
                tags.innerHTML = tagHtml;
                count.textContent = '1';
                bar.classList.add('show');

                // Scroll to match
                setTimeout(() => {
                    const matchNode = document.querySelector(`.topo-abs-node[data-id="${deviceId}"]`);
                    if (matchNode) matchNode.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                        inline: 'center'
                    });
                }, 100);
            },

            onKeyDown(e) {
                const items = this.results.querySelectorAll('.area-search-item[data-index]');
                if (!items.length) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1);
                    this.updateSelection(items);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
                    this.updateSelection(items);
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    const sel = (this.selectedIndex >= 0 && items[this.selectedIndex]) ? items[this.selectedIndex] : (
                        items.length === 1 ? items[0] : null);
                    if (sel) {
                        if (sel.dataset.area) {
                            this.selectArea(sel.dataset.area);
                        } else if (sel.dataset.deviceId) {
                            this.selectDevice(parseInt(sel.dataset.deviceId));
                        }
                    }
                } else if (e.key === 'Escape') {
                    this.clear();
                }
            },

            updateSelection(items) {
                items.forEach((el, i) => {
                    el.classList.toggle('active', i === this.selectedIndex);
                });
                if (items[this.selectedIndex]) {
                    items[this.selectedIndex].scrollIntoView({
                        block: 'nearest'
                    });
                }
            },

            selectArea(areaName) {
                activateTopologyIfNeeded();

                this.activeArea = areaName;
                this.activeDeviceId = '';
                this.input.value = areaName;
                this.clearBtn.style.display = 'block';
                this.results.classList.remove('show');
                this.applyHighlight();
            },

            applyHighlight() {
                let matchCount = 0;
                let firstMatchId = null;
                const hasGedung = !!this.activeGedung;
                const hasArea = !!this.activeArea;
                const hasCategory = isCategoryFocusActive();
                const hasOrphan = !!this.activeOrphanOnly;

                if (!TOPOLOGY_ACTIVATED) {
                    if (hasGedung || hasArea || hasCategory || hasOrphan) {
                        activateTopologyIfNeeded();
                    } else {
                        return;
                    }
                }

                // No filter active at all -> reset
                if (!hasGedung && !hasArea && !hasCategory && !hasOrphan) {
                    this.resetHighlight();
                    return;
                }

                Topo.searchState = {
                    active: true,
                    matchIds: new Set(),
                    visibleIds: new Set()
                };

                const addPathToRoot = (nId) => {
                    let curr = TOPO_NODES.find(n => String(n.id) === String(nId));
                    while (curr) {
                        Topo.searchState.visibleIds.add(String(curr.id));
                        if (!curr.parent) break;
                        curr = TOPO_NODES.find(n => String(n.id) === String(curr.parent));
                    }
                };

                TOPO_NODES.forEach(node => {
                    const nodeGedung = (node.gedung || '');
                    const nodeArea = (node.area || '').toLowerCase();
                    const nodeType = Topo.getFilterType(node.kategori).toLowerCase();
                    let match = true;

                    if (hasGedung && nodeGedung !== this.activeGedung) {
                        match = false;
                    }
                    if (hasArea && nodeArea !== this.activeArea.toLowerCase()) {
                        match = false;
                    }
                    if (hasCategory) {
                        match = match && !!nodeType && !!activeFilters[nodeType];
                    }
                    if (hasOrphan) {
                        match = match && !!node.is_orphaned;
                    }

                    if (match) {
                        Topo.searchState.matchIds.add(String(node.id));
                        matchCount++;
                        if (!firstMatchId) firstMatchId = node.id;
                        addPathToRoot(node.id);
                    }
                });

                // Re-render topology with filtered subset
                Topo.render();

                // Update count label
                this.countLabel.textContent = `${matchCount} ditemukan`;
                this.countLabel.style.display = matchCount > 0 ? 'inline' : 'none';

                // Update filter info bar
                this.updateFilterBar(matchCount);

                // Scroll to first match
                if (firstMatchId) {
                    setTimeout(() => {
                        const firstMatch = document.querySelector(`.topo-abs-node[data-id="${firstMatchId}"]`);
                        if (firstMatch) firstMatch.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center',
                            inline: 'center'
                        });
                    }, 100);
                }
            },

            resetHighlight() {
                Topo.searchState = {
                    active: false
                };
                Topo.render();
                this.countLabel.style.display = 'none';
                this.hideFilterBar();
            },

            applyCompactLayout(visibleWraps, enabled) {
                const tree = document.querySelector('.topo-tree');
                if (!tree) return;

                tree.classList.toggle('search-compact', !!enabled);

                const absNodes = tree.querySelectorAll('.topo-abs-node');
                absNodes.forEach(absNode => {
                    absNode.classList.remove('search-hidden');
                    if (!enabled || !visibleWraps) return;

                    const wrap = absNode.querySelector(':scope > .topo-node-wrap');
                    if (!wrap) return;
                    if (!visibleWraps.has(wrap)) {
                        absNode.classList.add('search-hidden');
                    }
                });

                refreshTopologyLayoutDecorations();
            },

            applyLineFocus(visibleWraps, enabled) {
                const tree = document.querySelector('.topo-tree');
                if (!tree) return;

                tree.classList.toggle('search-focus-lines', !!enabled);
                tree.querySelectorAll('.topo-node-wrap.search-line-active').forEach(w => w.classList.remove(
                    'search-line-active'));
                tree.querySelectorAll('.search-path-overlay').forEach(el => el.remove());

                if (!enabled || !visibleWraps) return;

                visibleWraps.forEach(wrap => {
                    wrap.classList.add('search-line-active');
                });

                // Draw focused connector path so ancestor-child chain remains visibly connected
                const overlay = document.createElement('div');
                overlay.className = 'search-path-overlay';
                const lineThickness = getConnectorLineThicknessPx();
                const halfThickness = Math.max(1, Math.round(lineThickness / 2));

                const addSeg = (left, top, width, height) => {
                    const seg = document.createElement('div');
                    seg.className = 'search-path-seg';
                    seg.style.left = `${Math.round(left)}px`;
                    seg.style.top = `${Math.round(top)}px`;
                    seg.style.width = `${Math.max(lineThickness, Math.round(width))}px`;
                    seg.style.height = `${Math.max(lineThickness, Math.round(height))}px`;
                    overlay.appendChild(seg);
                };

                const getParentWrap = (wrap) => {
                    const absNode = wrap.closest('.topo-abs-node');
                    if (!absNode) return null;
                    const parentId = absNode.dataset.parentId;
                    if (!parentId) return null;
                    const parentAbsNode = document.querySelector(`.topo-abs-node[data-id="${parentId}"]`);
                    return parentAbsNode ? parentAbsNode.querySelector(':scope > .topo-node-wrap') : null;
                };

                visibleWraps.forEach((childWrap) => {
                    const parentWrap = getParentWrap(childWrap);
                    if (!parentWrap || !visibleWraps.has(parentWrap)) return;

                    const p = getRelativeRect(parentWrap, tree);
                    const c = getRelativeRect(childWrap, tree);

                    const x1 = p.left + (p.width / 2);
                    const y1 = p.bottom;
                    const x2 = c.left + (c.width / 2);
                    const y2 = c.top;
                    const midY = y1 + ((y2 - y1) / 2);

                    // Vertical from parent down to mid
                    addSeg(x1 - halfThickness, y1, lineThickness, Math.max(lineThickness, midY - y1));

                    // Horizontal from parent x to child x
                    const left = Math.min(x1, x2);
                    const right = Math.max(x1, x2);
                    addSeg(left, midY - halfThickness, Math.max(lineThickness, right - left), lineThickness);

                    // Vertical from mid down to child
                    addSeg(x2 - halfThickness, midY, lineThickness, Math.max(lineThickness, y2 - midY));
                });

                tree.prepend(overlay);
            },

            refreshLineFocus() {
                const tree = document.querySelector('.topo-tree');
                if (!tree || !tree.classList.contains('search-focus-lines')) return;

                const activeWraps = new Set(Array.from(tree.querySelectorAll('.topo-node-wrap.search-line-active')));
                if (activeWraps.size === 0) return;

                this.applyLineFocus(activeWraps, true);
            },

            updateFilterBar(matchCount) {
                const bar = document.getElementById('filterResultBar');
                const icon = document.getElementById('filterBarIcon');
                const title = document.getElementById('filterBarTitle');
                const sub = document.getElementById('filterBarSub');
                const tags = document.getElementById('filterBarTags');
                const count = document.getElementById('filterBarCount');

                const hasGedung = !!this.activeGedung;
                const hasArea = !!this.activeArea;

                if (!hasGedung && !hasArea) {
                    this.hideFilterBar();
                    return;
                }

                // Determine icon type and title
                if (hasArea) {
                    icon.className = 'filter-bar-icon icon-area';
                    icon.innerHTML = '<i class="fas fa-map-marker-alt"></i>';
                    title.textContent = this.activeArea;
                    sub.textContent = hasGedung ?
                        `Filter area di ${GEDUNG_MAP[this.activeGedung] || this.activeGedung}` :
                        'Menampilkan perangkat di area ini';
                } else {
                    icon.className = 'filter-bar-icon icon-gedung';
                    icon.innerHTML = '<i class="fas fa-building"></i>';
                    title.textContent = GEDUNG_MAP[this.activeGedung] || this.activeGedung;
                    sub.textContent = 'Menampilkan semua perangkat di gedung ini';
                }

                // Tags
                let tagHtml = '';
                if (hasGedung) {
                    tagHtml +=
                        `<span class="filter-bar-tag tag-gedung"><i class="fas fa-building me-1"></i>${GEDUNG_MAP[this.activeGedung] || this.activeGedung}</span>`;
                }
                if (hasArea) {
                    tagHtml +=
                        `<span class="filter-bar-tag tag-area"><i class="fas fa-map-marker-alt me-1"></i>${Topo.esc(this.activeArea)}</span>`;
                }
                tags.innerHTML = tagHtml;

                // Count
                count.textContent = matchCount;

                bar.classList.add('show');
            },

            hideFilterBar() {
                const bar = document.getElementById('filterResultBar');
                if (bar) bar.classList.remove('show');
            },

            clear() {
                this.activeArea = '';
                this.activeDeviceId = '';
                this.input.value = '';
                this.clearBtn.style.display = 'none';
                this.results.classList.remove('show');
                // Re-apply highlight when gedung or kategori focus is active.
                if (this.activeGedung || isCategoryFocusActive()) {
                    this.applyHighlight();
                } else {
                    this.resetHighlight();
                }
                this.input.focus();
            }
        };

        // ========== MODAL: PORT SELECTOR STYLES ==========
        $('<style>').text(`
    .port-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
    .port-btn {
        width: 56px; height: 40px; border: 2px solid #dee2e6; border-radius: 8px;
        background: #fff; cursor: pointer; display: flex; flex-direction: column;
        align-items: center; justify-content: center; font-size: 0.7rem;
        font-weight: 700; color: #344767; transition: all 0.2s; position: relative;
    }
    .port-btn:hover:not(.port-used):not(.port-selected):not(.port-rusak) { border-color: #00b7bd; background: #f0fafa; }
    .port-btn.port-selected { border-color: #00b7bd; background: #00b7bd; color: #fff; }
    .port-btn.port-used { border-color: #f5365c; background: #fff0f2; color: #f5365c; cursor: not-allowed; opacity: 0.75; }
    .port-btn.port-rusak { border-color: #f5365c; background: #fff0f2; color: #f5365c; cursor: not-allowed; opacity: 0.75; position: relative; }
    .port-btn.port-rusak::after { content: '\\00d7'; position: absolute; top: -2px; right: 2px; font-size: 0.6rem; font-weight: 900; color: #f5365c; }
    .port-btn .port-num { font-size: 0.8rem; line-height: 1; }
    .port-btn .port-device { font-size: 0.5rem; line-height: 1; margin-top: 1px; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .port-legend { display: flex; gap: 12px; margin-top: 6px; font-size: 0.68rem; color: #8392ab; }
    .port-legend span { display: flex; align-items: center; gap: 4px; }
    .port-legend .dot { width: 10px; height: 10px; border-radius: 3px; border: 2px solid; }
    .dot-available { border-color: #dee2e6; background: #fff; }
    .dot-selected { border-color: #00b7bd; background: #00b7bd; }
    .dot-used { border-color: #f5365c; background: #fff0f2; }
    .dot-rusak { border-color: #f5365c; background: #fff0f2; }
`).appendTo('head');

        // ========== INIT ==========
        $(document).ready(function() {
            syncEmptyPortToggleButton();
            updateZoom();
            initTopologyCategoryFilters();
            AreaSearch.init();

            if (TOPOLOGY_ACTIVATED) {
                TOPO_INITIAL_POSITION_APPLIED = false;
                Topo.render();
                applyFilters();
                scheduleInitialTopologyViewportPosition();
            }

            // ========== PRINT TOPOLOGY ==========
            if (AUTHORIZE_PRINT) {
                PrintTopo.init();
            }

            window.addEventListener('resize', () => {
                if (topologyLayoutRefreshTimer) {
                    clearTimeout(topologyLayoutRefreshTimer);
                }
                topologyLayoutRefreshTimer = setTimeout(() => {
                    refreshTopologyLayoutDecorations();
                }, 120);
            });
        });

        function loadModalLocationsByGedung(gedung) {
            const $location = $('#modal_location');

            $location.empty().append('<option value="">-- Memuat... --</option>');
            initModalLocationSelect2();

            if (!gedung) {
                $location.empty().append('<option value="">-- Pilih Gedung Terlebih Dahulu --</option>');
                $('#modal_location_hint').text('Pilih gedung untuk menampilkan location dari master lokasi');
                initModalLocationSelect2();
                return;
            }

            // Use alias-aware base URL for the selected gedung
            const baseUrl = getMenuBaseUrlByGedung(gedung);
            fetch(`${baseUrl}/ajax/getarealist?gedung=${gedung}`)
                .then(r => r.json())
                .then(data => {
                    $location.empty().append('<option value="">-- Pilih Location --</option>');
                    data.forEach(item => {
                        $location.append(new Option(item.name, item.value, false, false));
                    });
                    $('#modal_location_hint').text('Location diambil dari master lokasi');
                    initModalLocationSelect2();
                })
                .catch(() => {
                    $location.empty().append('<option value="">-- Gagal Memuat Location --</option>');
                    $('#modal_location_hint').text('Gagal memuat location dari master lokasi');
                    initModalLocationSelect2();
                });
        }
    </script>
@endpush